From 6e6c1cebcfa2fcfda1880a528d41c5e1b785bcf9 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 5 Nov 2015 11:28:42 +0100
Subject: [PATCH 0001/1024] Pure dialog

---
 components/date_picker/dialog.jsx             |  9 +-
 components/dialog/index.jsx                   | 95 ++++++++-----------
 components/dialog/readme.md                   | 29 +++---
 components/time_picker/dialog.jsx             | 15 +--
 .../modules/examples/dialog_example_1.txt     | 23 +++--
 .../layout/main/modules/examples/example.txt  | 18 ++--
 spec/components/dialog.jsx                    | 27 +++---
 spec/style.scss                               |  4 +-
 8 files changed, 105 insertions(+), 115 deletions(-)

diff --git a/components/date_picker/dialog.jsx b/components/date_picker/dialog.jsx
index 40b191467..42ea77757 100644
--- a/components/date_picker/dialog.jsx
+++ b/components/date_picker/dialog.jsx
@@ -15,6 +15,7 @@ class CalendarDialog extends React.Component {
   };
 
   state = {
+    active: false,
     date: this.props.initialDate,
     display: 'months',
     actions: [
@@ -36,16 +37,16 @@ class CalendarDialog extends React.Component {
   };
 
   onDateCancel () {
-    this.refs.dialog.hide();
+    this.setState({active: false});
   }
 
   onDateSelected () {
     if (this.props.onDateSelected) this.props.onDateSelected(this.state.date);
-    this.refs.dialog.hide();
+    this.setState({active: false});
   }
 
   show () {
-    this.refs.dialog.show();
+    this.setState({active: true});
   }
 
   render () {
@@ -53,7 +54,7 @@ class CalendarDialog extends React.Component {
     const headerClassName = `${style.header} ${style[display]}`;
 
     return (
-      <Dialog ref="dialog" type="custom" className={style.dialog} actions={this.state.actions}>
+      <Dialog active={this.state.active} type="custom" className={style.dialog} actions={this.state.actions}>
           <header className={headerClassName}>
             <span className={style.weekday}>
               {time.getFullDayOfWeek(this.state.date.getDay())}
diff --git a/components/dialog/index.jsx b/components/dialog/index.jsx
index 2be9719c6..667169a45 100644
--- a/components/dialog/index.jsx
+++ b/components/dialog/index.jsx
@@ -2,61 +2,46 @@ import React from 'react';
 import Button from '../button';
 import style from './style';
 
-class Dialog extends React.Component {
-  static propTypes = {
-    actions: React.PropTypes.array,
-    active: React.PropTypes.bool,
-    className: React.PropTypes.string,
-    title: React.PropTypes.string,
-    type: React.PropTypes.string
-  };
-
-  static defaultProps = {
-    actions: [],
-    active: false,
-    type: 'normal'
-  };
-
-  state = {
-    active: this.props.active
-  };
-
-  renderActions () {
-    return this.props.actions.map((action, idx) => {
-      let className = style.button;
-      if (action.className) className += ` ${action.className}`;
-      return <Button key={idx} {...action} className={className} />;
-    });
-  }
-
-  render () {
-    let className = `${style.root} ${style[this.props.type]}`;
-    if (this.state.active) className += ` ${style.active}`;
-    if (this.props.className) className += ` ${this.props.className}`;
-
-    return (
-      <div data-react-toolbox='dialog' className={className}>
-        <div role='overlay' className={style.overlay} />
-        <div role='content' className={style.content}>
-          <section role='body' className={style.body}>
-            { this.props.title ? <h6 className={style.title}>{this.props.title}</h6> : null }
-            { this.props.children }
-          </section>
-          <nav role='navigation' className={style.navigation}>
-            { this.renderActions() }
-          </nav>
-        </div>
+const Dialog = (props) => {
+  const actions = props.actions.map((action, idx) => {
+    let className = style.button;
+    if (action.className) className += ` ${action.className}`;
+    return <Button key={idx} {...action} className={className} />;
+  });
+
+  let className = `${style.root} ${style[props.type]}`;
+  if (props.active) className += ` ${style.active}`;
+  if (props.className) className += ` ${props.className}`;
+
+  return (
+    <div data-react-toolbox='dialog' className={className}>
+      <div role='overlay' className={style.overlay} onClick={props.onOverlayClick} />
+      <div role='content' className={style.content}>
+        <section role='body' className={style.body}>
+          { props.title ? <h6 className={style.title}>{props.title}</h6> : null }
+          { props.children }
+        </section>
+        <nav role='navigation' className={style.navigation}>
+          { actions }
+        </nav>
       </div>
-    );
-  }
-
-  show () {
-    this.setState({active: true});
-  }
-
-  hide () {
-    this.setState({active: false});
-  }
-}
+    </div>
+  );
+};
+
+Dialog.propTypes = {
+  actions: React.PropTypes.array,
+  active: React.PropTypes.bool,
+  className: React.PropTypes.string,
+  onOverlayClick: React.PropTypes.func,
+  title: React.PropTypes.string,
+  type: React.PropTypes.string
+};
+
+Dialog.defaultProps = {
+  actions: [],
+  active: false,
+  type: 'normal'
+};
 
 export default Dialog;
diff --git a/components/dialog/readme.md b/components/dialog/readme.md
index 23e678cea..009025ca5 100644
--- a/components/dialog/readme.md
+++ b/components/dialog/readme.md
@@ -7,24 +7,24 @@
 import Dialog from 'react-toolbox/dialog';
 
 class DialogTest extends React.Component {
-  showDialog = () => {
-    this.refs.dialog.show();
+  state = { 
+    active: false 
   };
 
-  closeDialog = () => {
-    this.refs.dialog.hide();
-  };
+  handleToggle = () => {
+    this.setState({active: !this.state.active});
+  }
 
   actions = [
-    { label: "Cancel", onClick: this.closeDialog },
-    { label: "Save", onClick: this.closeDialog }
+    { label: "Cancel", onClick: this.handleToggle },
+    { label: "Save", onClick: this.handleToggle }
   ];
 
   render () {
     return (
       <div>
-        <Button label='Show my dialog' onClick={this.showDialog} />
-        <Dialog ref='dialog' title='My awesome dialog' actions={this.actions}>
+        <Button label='Show my dialog' onClick={this.handleToggle} />
+        <Dialog actions={this.actions} active={this.state.active} title='My awesome dialog'>
           <p>Here you can add arbitrary content. Components like Pickers are using dialogs now.</p>
         </Dialog>
       </div>
@@ -37,16 +37,9 @@ class DialogTest extends React.Component {
 
 | Name              | Type          | Default         | Description|
 |:-----|:-----|:-----|:-----|
+| `active`        | `Boolean`       |  `false`        | If true, the dialog will be active.|
 | `actions`       | `Array`         |    `[]`         | A array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons.|
-| `active`        | `Boolean`       |  `false`        | If true, the dialog will be active by default.|
 | `className`     | `String`        |     `''`        | Sets a class to give customized styles to the dialog.|
+| `onOverlayClick`   | `Function`   |             | Callback to be invoked when the dialog overlay is clicked.|
 | `title`         | `String`        |                 | The text string to use as standar title of the dialog.|
 | `type`          | `String`        |  `normal`       | Used to determine the size of the dialog. It can be `small`, `normal` or `large`. |
-
-## Methods
-
-The Dialog has state to determine if it is being shown or not. It exposes methods to show and hide:
-
-- `show` is used to show the dialog.
-- `hide` is used to hide the dialog.
-
diff --git a/components/time_picker/dialog.jsx b/components/time_picker/dialog.jsx
index 5685fa483..18c159c56 100644
--- a/components/time_picker/dialog.jsx
+++ b/components/time_picker/dialog.jsx
@@ -13,12 +13,13 @@ class TimePickerDialog extends React.Component {
   };
 
   static defaultProps = {
-      className: '',
-      initialTime: new Date(),
-      format: '24hr'
+    className: '',
+    initialTime: new Date(),
+    format: '24hr'
   };
 
   state = {
+    active: false,
     display: 'hours',
     time: this.props.initialTime,
     actions: [
@@ -44,16 +45,16 @@ class TimePickerDialog extends React.Component {
   };
 
   onTimeCancel () {
-    this.refs.dialog.hide();
+    this.setState({active: false});
   }
 
   onTimeSelected () {
     if (this.props.onTimeSelected) this.props.onTimeSelected(this.state.time);
-    this.refs.dialog.hide();
+    this.setState({active: false});
   }
 
   show () {
-    this.refs.dialog.show();
+    this.setState({active: true});
     setTimeout(this.refs.clock.handleCalculateShape, 1000);
   }
 
@@ -82,7 +83,7 @@ class TimePickerDialog extends React.Component {
     const className = `${style.dialog} ${style[display]} ${style[format]}`;
 
     return (
-      <Dialog ref="dialog" className={className} type="custom" actions={this.state.actions}>
+      <Dialog className={className} active={this.state.active} type="custom" actions={this.state.actions}>
         <header className={style.header}>
           <span className={style.hours} onClick={this.displayHours}>
             { ('0' + this.formatHours()).slice(-2) }
diff --git a/docs/app/components/layout/main/modules/examples/dialog_example_1.txt b/docs/app/components/layout/main/modules/examples/dialog_example_1.txt
index fb155a005..f453e6216 100644
--- a/docs/app/components/layout/main/modules/examples/dialog_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/dialog_example_1.txt
@@ -1,22 +1,27 @@
 class DialogTest extends React.Component {
-  showDialog = () => {
-    this.refs.dialog.show();
+  state = {
+    active: false
   };
 
-  closeDialog = () => {
-    this.refs.dialog.hide();
-  };
+  handleToggle = () => {
+    this.setState({active: !this.state.active});
+  }
 
   actions = [
-    { label: "Cancel", onClick: this.closeDialog },
-    { label: "Save", onClick: this.closeDialog }
+    { label: "Cancel", onClick: this.handleToggle },
+    { label: "Save", onClick: this.handleToggle }
   ];
 
   render () {
     return (
       <div>
-        <Button label='Show my dialog' onClick={this.showDialog} />
-        <Dialog ref='dialog' title='My awesome dialog' type='small' actions={this.actions}>
+        <Button label='Show my dialog' onClick={this.handleToggle} />
+        <Dialog
+          actions={this.actions}
+          active={this.state.active}
+          title='My awesome dialog'
+          onOverlayClick={this.handleToggle}
+        >
           <p>Here you can add arbitrary content. Components like Pickers are using dialogs now.</p>
         </Dialog>
       </div>
diff --git a/docs/app/components/layout/main/modules/examples/example.txt b/docs/app/components/layout/main/modules/examples/example.txt
index 063ebcb05..b1eb90779 100644
--- a/docs/app/components/layout/main/modules/examples/example.txt
+++ b/docs/app/components/layout/main/modules/examples/example.txt
@@ -6,25 +6,25 @@
 // but loading new examples will smash your changes!
 
 class Welcome extends React.Component {
-  hideDialog = () => {
-    this.refs.dialog.hide();
+  state = {
+    active: false
   };
 
-  showDialog = () => {
-    this.refs.dialog.show();
-  };
+  handleToggle = () => {
+    this.setState({active: !this.state.active});
+  }
 
   actions = [{
     label: 'Great!',
-    onClick: this.hideDialog
+    onClick: this.handleToggle
   }];
 
   render () {
     return (
       <section>
-        <Button label="Let's start!" onClick={this.showDialog} />
-        <Dialog ref="dialog" type="small" actions={this.actions} title="Welcome to React Toolbox">
-          <p>Enjoy Beautiful React Material Design Components!</p>
+        <Button label="Let's start!" onClick={this.handleToggle} />
+        <Dialog actions={this.actions} active={this.state.active} title='My awesome dialog' type="small">
+          <p>Here you can add arbitrary content. Components like Pickers are using dialogs now.</p>
         </Dialog>
       </section>
     );
diff --git a/spec/components/dialog.jsx b/spec/components/dialog.jsx
index e6aa9a0d0..861b375ad 100644
--- a/spec/components/dialog.jsx
+++ b/spec/components/dialog.jsx
@@ -4,27 +4,32 @@ import Dialog from '../../components/dialog';
 
 class DialogTest extends React.Component {
   state = {
-    title: 'Use Google\'s location service?',
-    actions: [
-      { label: 'Disagree', type: 'flat', className: 'primary', onClick: this.onClose.bind(this) },
-      { label: 'Agree', type: 'flat', className: 'primary', onClick: this.onClose.bind(this) }]
+    active: false
   };
 
-  onClose () {
-    this.refs.dialog.hide();
+  handleToggle = () => {
+    this.setState({
+      active: !this.state.active
+    });
   }
 
-  onShow () {
-    this.refs.dialog.show();
-  }
+  actions = [
+    { label: 'Disagree', type: 'flat', className: 'primary', onClick: this.handleToggle },
+    { label: 'Agree', type: 'flat', className: 'primary', onClick: this.handleToggle }
+  ];
 
   render () {
     return (
       <section>
         <h5>Dialog</h5>
         <p>lorem ipsum...</p>
-        <Button kind='raised' label='Show Dialog' onClick={this.onShow.bind(this)} />
-        <Dialog ref='dialog' type='small' title={this.state.title} actions={this.state.actions}>
+        <Button kind='raised' label='Show Dialog' onClick={this.handleToggle} />
+        <Dialog
+          actions={this.actions}
+          active={this.state.active}
+          title="Use Google\'s location service?"
+          onOverlayClick={this.handleToggle}
+        >
           <p>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</p>
         </Dialog>
       </section>
diff --git a/spec/style.scss b/spec/style.scss
index c9da88c54..1f7edc4f7 100644
--- a/spec/style.scss
+++ b/spec/style.scss
@@ -7,7 +7,7 @@ $offset: 1.8 * $unit;
 .app {
   padding: (8.2 * $unit) $offset $offset $offset;
   background-color: #f5f5f5;
-  section {
+  > section {
     padding: $offset;
     margin-bottom: $offset;
     background-color: white;
@@ -36,7 +36,7 @@ $offset: 1.8 * $unit;
   z-index: $z-index-higher;
 }
 
-.app_bar {
+.appbar {
   display: flex;
   > h1 {
     flex-grow: 1;

From fa94c4e759cd098dc9e99b13b72fe83f75e4aa35 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 5 Nov 2015 11:45:23 +0100
Subject: [PATCH 0002/1024] Pure drawer

---
 components/drawer/index.jsx                   | 74 +++++++------------
 components/drawer/readme.md                   | 24 +++---
 .../modules/examples/drawer_example_1.txt     | 12 ++-
 spec/components/drawer.jsx                    | 25 +++++--
 4 files changed, 62 insertions(+), 73 deletions(-)

diff --git a/components/drawer/index.jsx b/components/drawer/index.jsx
index 59623aea3..914cd41ea 100644
--- a/components/drawer/index.jsx
+++ b/components/drawer/index.jsx
@@ -1,52 +1,32 @@
 import React from 'react';
 import style from './style';
 
-class Drawer extends React.Component {
-  static propTypes = {
-    active: React.PropTypes.bool,
-    className: React.PropTypes.string,
-    hideable: React.PropTypes.bool,
-    type: React.PropTypes.oneOf(['left', 'right'])
-  };
-
-  static defaultProps = {
-    className: '',
-    hideable: true,
-    type: 'left'
-  };
-
-  state = {
-    active: this.props.active
-  };
-
-  handleOverlayClick = () => {
-    if (this.props.hideable) {
-      this.setState({active: false});
-    }
-  };
-
-  render () {
-    let className = `${style.drawer} ${style[this.props.type]}`;
-    if (this.state.active) className += ` ${style.active}`;
-    if (this.props.className) className += ` ${this.props.className}`;
-
-    return (
-      <div data-react-toolbox='drawer' className={className}>
-        <div className={style.overlay} onClick={this.handleOverlayClick}></div>
-        <aside className={style.content}>
-          { this.props.children }
-        </aside>
-      </div>
-    );
-  }
-
-  show () {
-    this.setState({active: true});
-  }
-
-  hide () {
-    this.setState({active: false});
-  }
-}
+const Drawer = (props) => {
+  let className = `${style.drawer} ${style[props.type]}`;
+  if (props.active) className += ` ${style.active}`;
+  if (props.className) className += ` ${props.className}`;
+
+  return (
+    <div data-react-toolbox='drawer' className={className}>
+      <div className={style.overlay} onClick={props.onOverlayClick}></div>
+      <aside className={style.content}>
+        { props.children }
+      </aside>
+    </div>
+  );
+};
+
+Drawer.propTypes = {
+  active: React.PropTypes.bool,
+  className: React.PropTypes.string,
+  onOverlayClick: React.PropTypes.func,
+  type: React.PropTypes.oneOf(['left', 'right'])
+};
+
+Drawer.defaultProps = {
+  active: false,
+  className: '',
+  type: 'left'
+};
 
 export default Drawer;
diff --git a/components/drawer/readme.md b/components/drawer/readme.md
index acc6d1ae7..d2156eb1d 100644
--- a/components/drawer/readme.md
+++ b/components/drawer/readme.md
@@ -7,15 +7,19 @@ The [navigation drawer](https://www.google.com/design/spec/patterns/navigation-d
 import Drawer from 'react-toolbox/drawer';
 
 class DrawerTest extends React.Component {
-  handleClick = () => {
-    this.refs.drawer.show();
+  state = {
+    active: false
+  };
+  
+  handleToggle = () => {
+    this.setState({active: !this.state.active});
   };
 
   render () {
     return (
       <div>
-        <Button kind='raised' accent label='Show Drawer' onClick={this.handleClick} />
-        <Drawer ref='drawer' hideable>
+        <Button kind='raised' accent label='Show Drawer' onClick={this.handleToggle} />
+        <Drawer active={this.state.active} onOverlayClick={this.handleToggle}>
           <h5>This is your Drawer.</h5>
           <p>You can embed any content you want, for example a Menu.</p>
         </Drawer>
@@ -29,15 +33,7 @@ class DrawerTest extends React.Component {
 
 | Name              | Type          | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `active`        | `Boolean`       |  `false`        | If true, the drawer will be active by default.|
+| `active`        | `Boolean`       |  `false`        | If true, the drawer will be visible.|
 | `className`     | `String`        |     `''`        | Sets a class to give customized styles to the drawer.|
-| `hideable`      | `Bool`          | `true`           | If true, the drawer will be hidden by clicking the overlay.|
+| `onOverlayClick` | `Function`     |            | Callback function to be invoked when the overlay is clicked.|
 | `type`          | `String`        | `left`          | Type of drawer. It can be left or right to display the drawer on the left or right side of the screen.|
-
-## Methods
-
-The Drawer has state to determine if it is being shown or not. It exposes methods to show and hide:
-
-- `show` is used to show the drawer.
-- `hide` is used to hide the drawer.
-
diff --git a/docs/app/components/layout/main/modules/examples/drawer_example_1.txt b/docs/app/components/layout/main/modules/examples/drawer_example_1.txt
index af9b8fc54..98820fd2d 100644
--- a/docs/app/components/layout/main/modules/examples/drawer_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/drawer_example_1.txt
@@ -1,13 +1,17 @@
 class DrawerTest extends React.Component {
-  handleClick = () => {
-    this.refs.drawer.show();
+  state = {
+    active: false
+  };
+
+  handleToggle = () => {
+    this.setState({active: !this.state.active});
   };
 
   render () {
     return (
       <div>
-        <Button kind='raised' accent label='Show Drawer' onClick={this.handleClick} />
-        <Drawer ref='drawer' hideable>
+        <Button kind='raised' accent label='Show Drawer' onClick={this.handleToggle} />
+        <Drawer active={this.state.active} onOverlayClick={this.handleToggle}>
           <h5>This is your Drawer.</h5>
           <p>You can embed any content you want, for example a Menu.</p>
         </Drawer>
diff --git a/spec/components/drawer.jsx b/spec/components/drawer.jsx
index 5611606cc..19ed880ef 100644
--- a/spec/components/drawer.jsx
+++ b/spec/components/drawer.jsx
@@ -3,29 +3,38 @@ import Button from '../../components/button';
 import Drawer from '../../components/drawer';
 
 class DrawerTest extends React.Component {
-  handleClick = (ref, method) => {
-    this.refs[ref][method]();
+  state = {
+    leftActive: false,
+    rightActive: false
   };
 
+  handleToggleLeft = () => {
+    this.setState({leftActive: !this.state.leftActive});
+  };
+
+  handleToggleRight = () => {
+    this.setState({rightActive: !this.state.rightActive});
+  }
+
   render () {
     return (
       <section>
         <h5>Drawer</h5>
-        <p>You can navigate using a drawer to the left or right. They can be auto-closable or not.</p>
+        <p>You can navigate using a drawer to the left or right.</p>
 
-        <Drawer ref='left' hideable={true}>
+        <Drawer active={this.state.leftActive} onOverlayClick={this.handleToggleLeft}>
           <h5>Officia deserunt mollit.</h5>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
         </Drawer>
 
-        <Drawer ref='right' type='right'>
-          <Button label='Close' onClick={this.handleClick.bind(this, 'right', 'hide')} />
+        <Drawer active={this.state.rightActive} type='right'>
+          <Button label='Close' onClick={this.handleToggleRight} />
         </Drawer>
 
         <nav>
-          <Button accent label='Drawer left hideable' kind='raised' onClick={this.handleClick.bind(this, 'left', 'show')} />
-          <Button primary label='Drawer right' kind='raised' onClick={this.handleClick.bind(this, 'right', 'show')} />
+          <Button accent label='Drawer left' kind='raised' onClick={this.handleToggleLeft} />
+          <Button primary label='Drawer right' kind='raised' onClick={this.handleToggleRight} />
         </nav>
       </section>
     );

From 8e5150c4d819f5a3dfc61a117eea7a25aa61d020 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 5 Nov 2015 11:53:00 +0100
Subject: [PATCH 0003/1024] Bugfix: read input DOM reference with ReactDOM in
 autocomplete

---
 components/autocomplete/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/autocomplete/index.jsx b/components/autocomplete/index.jsx
index 104e056b8..dcae111e4 100644
--- a/components/autocomplete/index.jsx
+++ b/components/autocomplete/index.jsx
@@ -73,7 +73,7 @@ class Autocomplete extends React.Component {
   };
 
   handleFocus = () => {
-    const client = event.target.getBoundingClientRect();
+    const client = ReactDOM.findDOMNode(this.refs.input).getBoundingClientRect();
     const screen_height = window.innerHeight || document.documentElement.offsetHeight;
     const up = this.props.auto ? client.top > ((screen_height / 2) + client.height) : false;
 

From 3b48501e9b7bf8e0c7402c9597669285740d3b01 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 5 Nov 2015 12:48:21 +0100
Subject: [PATCH 0004/1024] Remove dataSource state from autocomplete

---
 components/autocomplete/index.jsx | 51 +++++++++++++++++++++----------
 spec/root.jsx                     |  2 +-
 2 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/components/autocomplete/index.jsx b/components/autocomplete/index.jsx
index dcae111e4..b67ae9635 100644
--- a/components/autocomplete/index.jsx
+++ b/components/autocomplete/index.jsx
@@ -4,6 +4,26 @@ import Input from '../input';
 import style from './style';
 import utils from '../utils';
 
+const valuesToMap = (values, source) => {
+  const valueMap = new Map();
+  for (const [k, v] of source) {
+    if (values.indexOf(k) !== -1) valueMap.set(k, v);
+  }
+  return valueMap;
+};
+
+const valueToMap = (value, source) => {
+  return valuesToMap([value], source);
+};
+
+const dataSourceToMap = (source = {}) => {
+  if (source.hasOwnProperty(length)) {
+    return new Map(source.map((item) => [item, item]));
+  } else {
+    return new Map(Object.keys(source).map((key) => [key, source[key]]));
+  }
+};
+
 class Autocomplete extends React.Component {
   static propTypes = {
     auto: React.PropTypes.bool,
@@ -26,7 +46,6 @@ class Autocomplete extends React.Component {
   };
 
   state = {
-    dataSource: this._indexDataSource(this.props.dataSource),
     focus: false,
     query: '',
     up: false,
@@ -41,12 +60,6 @@ class Autocomplete extends React.Component {
     });
   }
 
-  componentWillReceiveProps (props) {
-    if (props.dataSource) {
-      this.setState({dataSource: this._indexDataSource(props.dataSource)});
-    }
-  }
-
   componentWillUpdate (props, state) {
     this.refs.input.setValue(state.query);
   }
@@ -172,8 +185,9 @@ class Autocomplete extends React.Component {
 
   _getSuggestions () {
     const query = this.state.query.toLowerCase().trim() || '';
+    const sourceMap = dataSourceToMap(this.props.dataSource);
     const suggestions = new Map();
-    for (const [key, value] of this.state.dataSource) {
+    for (const [key, value] of sourceMap) {
       if (!this.state.values.has(key) && value.toLowerCase().trim().startsWith(query)) {
         suggestions.set(key, value);
       }
@@ -182,13 +196,13 @@ class Autocomplete extends React.Component {
   }
 
   _selectOption (key) {
-    const { dataSource } = this.state;
+    const dataMap = dataSourceToMap(this.props.dataSource);
     let { values } = this.state;
-    const query = !this.props.multiple ? dataSource.get(key) : '';
+    const query = !this.props.multiple ? dataMap.get(key) : '';
     values = new Map(values);
 
     if (!this.props.multiple) values.clear();
-    values.set(key, dataSource.get(key));
+    values.set(key, dataMap.get(key));
 
     this.setState({focus: false, query, values}, () => {
       this.refs.input.blur();
@@ -212,12 +226,17 @@ class Autocomplete extends React.Component {
   }
 
   setValue (dataParam = []) {
-    const values = new Map();
-    const data = (typeof dataParam === 'string') ? [dataParam] : dataParam;
-    for (const [key, value] of this.state.dataSource) {
-      if (data.indexOf(key) !== -1) values.set(key, value);
+    const sourceMap = dataSourceToMap(this.props.dataSource);
+    let values, query;
+
+    if (this.props.multiple) {
+      values = valuesToMap(dataParam, sourceMap);
+      query = '';
+    } else {
+      values = valueToMap(dataParam, sourceMap);
+      query = sourceMap.get(dataParam);
     }
-    this.setState({values, query: this.props.multiple ? '' : values.get(data[0])});
+    this.setState({values, query});
   }
 }
 
diff --git a/spec/root.jsx b/spec/root.jsx
index 9ac43b449..76075c788 100644
--- a/spec/root.jsx
+++ b/spec/root.jsx
@@ -33,7 +33,7 @@ const _hrefProject = () => {
 
 const Root = () => (
   <App className={style.app}>
-    <AppBarToolbox fixed flat className={style.app_bar}>
+    <AppBarToolbox fixed flat className={style.appbar}>
       <h1>React Toolbox <small>Spec 0.11.2</small></h1>
       <ButtonToolbox
         accent

From f5957bc043f4da83db93364461cd787170dbd955 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 7 Nov 2015 23:38:26 +0100
Subject: [PATCH 0005/1024] Stateless input

---
 components/input/index.jsx                    | 41 ++-----------------
 components/input/readme.md                    | 35 ++++++++++------
 .../main/modules/examples/input_example_1.txt | 28 +++++++++----
 spec/components/input.jsx                     | 39 ++++++++++++------
 4 files changed, 72 insertions(+), 71 deletions(-)

diff --git a/components/input/index.jsx b/components/input/index.jsx
index fdb1feefa..aea98f4af 100644
--- a/components/input/index.jsx
+++ b/components/input/index.jsx
@@ -29,40 +29,13 @@ class Input extends React.Component {
     type: 'text'
   };
 
-  state = {
-    value: this.props.value
-  };
-
-  onChange = (event) => {
-    this.setState({value: event.target.value}, () => {
-      if (this.props.onChange) this.props.onChange(event, this);
-    });
-  };
-
   renderInput () {
     let className = style.input;
-    if (this.state.value && this.state.value.length > 0) className += ` ${style.filled}`;
-
+    if (this.props.value && this.props.value.length > 0) className += ` ${style.filled}`;
     if (this.props.multiline) {
-      return (
-        <textarea
-          ref='input'
-          role='input'
-          {...this.props}
-          className={className}
-          onChange={this.onChange}
-          value={this.state.value} />
-      );
+      return <textarea ref='input' role='input' {...this.props} className={className} />;
     } else {
-      return (
-        <input
-          ref='input'
-          role='input'
-          {...this.props}
-          className={className}
-          value={this.state.value}
-          onChange={this.onChange} />
-      );
+      return <input ref='input' role='input' {...this.props} className={className} />;
     }
   }
 
@@ -94,14 +67,6 @@ class Input extends React.Component {
   focus () {
     this.refs.input.focus();
   }
-
-  getValue () {
-    return this.state.value;
-  }
-
-  setValue (value) {
-    this.setState({value});
-  }
 }
 
 export default Input;
diff --git a/components/input/readme.md b/components/input/readme.md
index 7f409eb7a..69f839074 100644
--- a/components/input/readme.md
+++ b/components/input/readme.md
@@ -6,15 +6,26 @@ Although we are calling then Inputs they actually correspond to Material Design
 ```jsx
 import Input from 'react-toolbox/input';
 
-const InputTest = () => (
-  <div>
-    <Input type='text' label='Firstname' />
-    <Input type='email' label='Label fixed' floating={false} />
-    <Input type='text' label='Disabled field' disabled />
-    <Input type='tel' label='With icon' icon='phone' />
-    <Input type='email' label='With icon' icon='email' />
-  </div>
-);
+class InputTest extends React.Component {
+  state = { name: '', phone: '', email: '' };
+
+  handleChange = (name, event) => {
+    const newState = {};
+    newState[`${name}`] = event.target.value;
+    this.setState(newState);
+  };
+
+  render () {
+    return (
+      <section>
+        <Input type='text' label='Name' name='name' value={this.state.name} onChange={this.handleChange.bind(this, 'name')} />
+        <Input type='text' label='Disabled field' disabled />
+        <Input type='email' label='Email address' icon='email' />
+        <Input type='tel' label='Phone' name='phone' icon='phone' value={this.state.withIcon} onChange={this.handleChange.bind(this, 'phone')} />
+      </section>
+    );
+  }
+}
 ```
 
 ## Properties
@@ -34,13 +45,11 @@ const InputTest = () => (
 | `onKeyPress`    | `Function`      |                 | Callback function that is fired when a key is pressed.|
 | `required`      | `Boolean`       | `false`         | If true, the html input has a required value.|
 | `type`          | `String`        | `text`        | Type of the input element. It can be a valid HTML5 input type|
-| `value`         | `String`        |                 | Initial value of the input element.|
+| `value`         | `String`        |              | Current value of the input element.|
 
 ## Methods
 
-The input component has a state to control its value. It exposes instance methods to retrieve and set the current value and to control the input state:
+The input is stateless but it includes two methods to be able to communicate with the DOM input node:
 
-- `getValue` is used to retrieve the current value.
-- `setValue` to force a new value.
 - `blur` to blur the input field.
 - `focus` to focus the input field.
diff --git a/docs/app/components/layout/main/modules/examples/input_example_1.txt b/docs/app/components/layout/main/modules/examples/input_example_1.txt
index f23b3cc7e..7787fd23b 100644
--- a/docs/app/components/layout/main/modules/examples/input_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/input_example_1.txt
@@ -1,10 +1,22 @@
-const InputTest = () => (
-  <div>
-    <Input type='text' label='Your fullname' icon='account-box' value='Tony Stark' />
-    <Input type='tel' label='Telephone number' icon='phone' />
-    <Input type='email' label='Email address' icon='email' />
-    <Input type='text' label='Disabled field' disabled />
-  </div>
-);
+class InputTest extends React.Component {
+  state = { name: '', phone: '', email: '' };
+
+  handleChange = (name, event) => {
+    const newState = {};
+    newState[`${name}`] = event.target.value;
+    this.setState(newState);
+  };
+
+  render () {
+    return (
+      <section>
+        <Input type='text' label='Name' name='name' value={this.state.name} onChange={this.handleChange.bind(this, 'name')} />
+        <Input type='text' label='Disabled field' disabled />
+        <Input type='email' label='Email address' icon='email' />
+        <Input type='tel' label='Phone' name='phone' icon='phone' value={this.state.withIcon} onChange={this.handleChange.bind(this, 'phone')} />
+      </section>
+    );
+  }
+}
 
 return <InputTest />;
diff --git a/spec/components/input.jsx b/spec/components/input.jsx
index dbb3bc11e..ebda48e73 100644
--- a/spec/components/input.jsx
+++ b/spec/components/input.jsx
@@ -1,17 +1,32 @@
 import React from 'react';
 import Input from '../../components/input';
 
-const InputTest = () => (
-  <section>
-    <h5>Inputs</h5>
-    <p>lorem ipsum...</p>
-    <Input type='text' label='Firstname' />
-    <Input type='email' label='Label fixed' floating={false} />
-    <Input type='text' label='Phone Number' />
-    <Input type='text' label='Disabled field' disabled />
-    <Input type='tel' label='With icon' icon='phone' />
-    <Input type='email' label='With icon' icon='email' />
-  </section>
-);
+class InputTest extends React.Component {
+  state = {
+    normal: '',
+    fixedLabel: '',
+    withIcon: ''
+  };
+
+  handleChange = (name, event) => {
+    const newState = {};
+    newState[`${name}`] = event.target.value;
+    this.setState(newState);
+  };
+
+  render () {
+    return (
+      <section>
+        <h5>Inputs</h5>
+        <p>lorem ipsum...</p>
+        <Input type='text' value={this.state.normal} label='Firstname' onChange={this.handleChange.bind(this, 'normal')} />
+        <Input type='email' value={this.state.fixedLabel} label='Label fixed' floating={false} onChange={this.handleChange.bind(this, 'fixedLabel')} />
+        <Input type='text' value='Read only' readOnly label='Phone Number' />
+        <Input type='text' label='Disabled field' disabled />
+        <Input type='tel' value={this.state.withIcon} label='With icon' onChange={this.handleChange.bind(this, 'withIcon')} icon='phone' />
+      </section>
+    );
+  }
+}
 
 export default InputTest;

From 703d4c613067be1309df844ee687f4a411f983f5 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 8 Nov 2015 16:49:00 +0100
Subject: [PATCH 0006/1024] Extract state from autocomplete

---
 .csscomb.json                                 |   3 +-
 .scss-lint.yml                                |   3 +-
 components/autocomplete/index.jsx             | 287 ++++++++----------
 components/autocomplete/readme.md             |  58 ++--
 components/autocomplete/style.scss            |  11 +-
 components/input/_config.scss                 |   1 +
 components/input/style.scss                   |   3 +-
 .../examples/autocomplete_example_1.txt       |  39 ++-
 spec/components/autocomplete.jsx              |  46 +--
 9 files changed, 218 insertions(+), 233 deletions(-)

diff --git a/.csscomb.json b/.csscomb.json
index 3a6196e37..2c3abada3 100644
--- a/.csscomb.json
+++ b/.csscomb.json
@@ -43,12 +43,13 @@
       "min-height",
       "max-height",
       "flex",
+      "flex-align",
       "flex-direction",
       "flex-flow",
       "flex-grow",
       "flex-order",
       "flex-pack",
-      "flex-align",
+      "flex-wrap",
       "align-content",
       "align-items",
       "justify-content",
diff --git a/.scss-lint.yml b/.scss-lint.yml
index 58d80c532..b6017f8ff 100644
--- a/.scss-lint.yml
+++ b/.scss-lint.yml
@@ -118,12 +118,13 @@ linters:
       "min-height",
       "max-height",
       "flex",
+      "flex-align",
       "flex-direction",
       "flex-flow",
       "flex-grow",
       "flex-order",
       "flex-pack",
-      "flex-align",
+      "flex-wrap",
       "align-content",
       "align-items",
       "justify-content",
diff --git a/components/autocomplete/index.jsx b/components/autocomplete/index.jsx
index b67ae9635..1305c2d56 100644
--- a/components/autocomplete/index.jsx
+++ b/components/autocomplete/index.jsx
@@ -4,80 +4,75 @@ import Input from '../input';
 import style from './style';
 import utils from '../utils';
 
-const valuesToMap = (values, source) => {
-  const valueMap = new Map();
-  for (const [k, v] of source) {
-    if (values.indexOf(k) !== -1) valueMap.set(k, v);
-  }
-  return valueMap;
-};
-
-const valueToMap = (value, source) => {
-  return valuesToMap([value], source);
-};
-
-const dataSourceToMap = (source = {}) => {
-  if (source.hasOwnProperty(length)) {
-    return new Map(source.map((item) => [item, item]));
-  } else {
-    return new Map(Object.keys(source).map((key) => [key, source[key]]));
-  }
+const POSITION = {
+  AUTO: 'auto',
+  DOWN: 'down',
+  UP: 'up'
 };
 
 class Autocomplete extends React.Component {
   static propTypes = {
-    auto: React.PropTypes.bool,
     className: React.PropTypes.string,
-    dataSource: React.PropTypes.any,
+    direction: React.PropTypes.oneOf(['auto', 'up', 'down']),
     disabled: React.PropTypes.bool,
     error: React.PropTypes.string,
     label: React.PropTypes.string,
     multiple: React.PropTypes.bool,
     onChange: React.PropTypes.func,
-    required: React.PropTypes.bool,
+    source: React.PropTypes.any,
     value: React.PropTypes.any
   };
 
   static defaultProps = {
-      auto: true,
       className: '',
-      dataSource: {},
-      multiple: true
+      direction: 'auto',
+      multiple: true,
+      source: {}
   };
 
   state = {
+    direction: this.props.direction,
     focus: false,
-    query: '',
-    up: false,
-    values: new Map(),
-    width: undefined
+    query: this.query(this.props.value)
   };
 
-  componentDidMount () {
-    if (this.props.value) this.setValue(this.props.value);
-    this.setState({
-      width: ReactDOM.findDOMNode(this).getBoundingClientRect().width
-    });
+  shouldComponentUpdate (nextProps, nextState) {
+    if (!this.state.focus && nextState.focus && this.props.direction === POSITION.AUTO) {
+      const direction = this.calculateDirection();
+      if (this.state.direction !== direction) {
+        this.setState({ direction });
+        return false;
+      }
+    }
+    return true;
   }
 
-  componentWillUpdate (props, state) {
-    this.refs.input.setValue(state.query);
-  }
+  handleChange = (keys) => {
+    const key = this.props.multiple ? keys : keys[0];
+    const query = this.query(key);
+    if (this.props.onChange) this.props.onChange(key);
+    this.setState({ focus: false, query }, () => { this.refs.input.blur(); });
+  };
 
-  handleQueryChange = () => {
-    const query = this.refs.input.getValue();
-    if (this.state.query !== query) {
-      this.setState({query});
-    }
+  handleQueryBlur = () => {
+    if (this.state.focus) this.setState({focus: false});
   };
 
-  handleKeyPress = (event) => {
-    if (event.which === 13 && this.state.active) {
-      this._selectOption(this.state.active);
-    }
+  handleQueryChange = (event) => {
+    const query = event.target.value;
+    this.setState({query});
+  };
 
+  handleQueryFocus = () => {
+    this.refs.suggestions.scrollTop = 0;
+    this.setState({active: '', focus: true});
+  };
+
+  handleQueryKeyUp = (event) => {
+    if (event.which === 13 && this.state.active) this.select(this.state.active, event);
+    if (event.which === 27) this.refs.input.blur();
     if ([40, 38].indexOf(event.which) !== -1) {
-      const suggestionsKeys = [...this._getSuggestions().keys()];
+      const suggestionsKeys = [...this.suggestions().keys()];
       let index = suggestionsKeys.indexOf(this.state.active) + (event.which === 40 ? +1 : -1);
       if (index < 0) index = suggestionsKeys.length - 1;
       if (index >= suggestionsKeys.length) index = 0;
@@ -85,159 +80,123 @@ class Autocomplete extends React.Component {
     }
   };
 
-  handleFocus = () => {
-    const client = ReactDOM.findDOMNode(this.refs.input).getBoundingClientRect();
-    const screen_height = window.innerHeight || document.documentElement.offsetHeight;
-    const up = this.props.auto ? client.top > ((screen_height / 2) + client.height) : false;
-
-    this.refs.suggestions.scrollTop = 0;
-    this.setState({active: '', up: up, focus: true});
+  handleSuggestionHover = (key) => {
+    this.setState({active: key});
   };
 
-  handleBlur = () => {
-    if (this.state.focus) this.setState({focus: false});
-  };
+  calculateDirection () {
+    if (this.props.direction === 'auto') {
+      const client = ReactDOM.findDOMNode(this.refs.input).getBoundingClientRect();
+      const screen_height = window.innerHeight || document.documentElement.offsetHeight;
+      const up = this.props.auto ? client.top > ((screen_height / 2) + client.height) : false;
+      return up ? 'up' : 'down';
+    } else {
+      return this.props.direction;
+    }
+  }
 
-  handleHover = (event) => {
-    this.setState({active: event.target.getAttribute('id')});
-  };
+  query (key) {
+    return !this.props.multiple && this.props.value ? this.source().get(key) : '';
+  }
 
-  handleSelect = (event) => {
-    utils.events.pauseEvent(event);
-    this._selectOption(event.target.getAttribute('id'));
-  };
+  suggestions () {
+    const suggestions = new Map();
+    const query = this.state.query.toLowerCase().trim() || '';
+    const values = this.values();
+    for (const [key, value] of this.source()) {
+      if (!values.has(key) && value.toLowerCase().trim().startsWith(query)) {
+        suggestions.set(key, value);
+      }
+    }
+    return suggestions;
+  }
 
-  handleUnselect = (event) => {
-    this._unselectOption(event.target.getAttribute('id'));
-  };
+  source () {
+    const { source } = this.props;
+    if (source.hasOwnProperty(length)) {
+      return new Map(source.map((item) => [item, item]));
+    } else {
+      return new Map(Object.keys(source).map((key) => [key, source[key]]));
+    }
+  }
 
-  renderLabel () {
-    if (this.props.label) {
-      return <label data-role='label' className={style.label}>{this.props.label}</label>;
+  values () {
+    const valueMap = new Map();
+    const values = this.props.multiple ? this.props.value : [this.props.value];
+    for (const [k, v] of this.source()) {
+      if (values.indexOf(k) !== -1) valueMap.set(k, v);
     }
+    return valueMap;
+  }
+
+  select (key, event) {
+    utils.events.pauseEvent(event);
+    const values = this.values(this.props.value);
+    this.handleChange([key, ...values.keys()]);
+  }
+
+  unselect (key) {
+    const values = this.values(this.props.value);
+    values.delete(key);
+    this.handleChange([...values.keys()]);
   }
 
   renderSelected () {
     if (this.props.multiple) {
-      return (
-        <ul className={style.values} data-role='selections' onClick={this.handleUnselect}>
-          {[...this.state.values].map(([key, value]) => {
-            return <li key={key} id={key} data-role='selection' className={style.value}>{value}</li>;
-          })}
-        </ul>
-      );
+      const selectedItems = [...this.values()].map(([key, value]) => {
+        return <li key={key} className={style.value} onClick={this.unselect.bind(this, key)}>{value}</li>;
+      });
+
+      return <ul className={style.values}>{selectedItems}</ul>;
     }
   }
 
   renderSuggestions () {
-    return [...this._getSuggestions()].map(([key, value]) => {
+    let suggestionsClassName = style.suggestions;
+    if (this.state.direction === 'up') suggestionsClassName += ` ${style.up}`;
+    const suggestions = [...this.suggestions()].map(([key, value]) => {
       let className = style.suggestion;
       if (this.state.active === key) className += ` ${style.active}`;
-      return <li id={key} key={key} data-role='suggestion' className={className}>{value}</li>;
+      return (
+        <li
+          key={key}
+          className={className}
+          onMouseDown={this.select.bind(this, key)}
+          onMouseOver={this.handleSuggestionHover.bind(this, key)}
+        >
+          {value}
+        </li>
+      );
     });
+
+    return <ul ref='suggestions' className={suggestionsClassName}>{suggestions}</ul>;
   }
 
   render () {
     let className = style.root;
-    if (this.props.className) className += ` ${this.props.className}`;
     if (this.state.focus) className += ` ${style.focus}`;
-
-    let suggestionsClassName = style.suggestions;
-    if (this.state.up) suggestionsClassName += ` ${style.up}`;
-    const suggestionsStyle = {width: this.state.width};
+    if (this.props.error) className += ` ${style.errored}`;
+    if (this.props.className) className += ` ${this.props.className}`;
 
     return (
       <div data-react-toolbox='autocomplete' className={className}>
-        {this.renderLabel()}
-        {this.renderSelected()}
+        { this.props.label ? <label className={style.label}>{this.props.label}</label> : null }
+        { this.renderSelected() }
         <Input
           ref='input'
           {...this.props}
           label=''
-          value=''
-          data-role='input'
           className={style.input}
-          onBlur={this.handleBlur}
+          onBlur={this.handleQueryBlur}
           onChange={this.handleQueryChange}
-          onFocus={this.handleFocus}
-          onKeyUp={this.handleKeyPress} />
-        <ul
-          ref='suggestions'
-          data-role='suggestions'
-          className={suggestionsClassName}
-          onMouseDown={this.handleSelect}
-          onMouseOver={this.handleHover}
-          style={suggestionsStyle}
-        >
-          {this.renderSuggestions()}
-        </ul>
+          onFocus={this.handleQueryFocus}
+          onKeyUp={this.handleQueryKeyUp}
+          value={this.state.query}
+        />
+        { this.renderSuggestions() }
       </div>
     );
   }
-
-  _indexDataSource (data = {}) {
-    if (data.length) {
-      return new Map(data.map((item) => [item, item]));
-    } else {
-      return new Map(Object.keys(data).map((key) => [key, data[key]]));
-    }
-  }
-
-  _getSuggestions () {
-    const query = this.state.query.toLowerCase().trim() || '';
-    const sourceMap = dataSourceToMap(this.props.dataSource);
-    const suggestions = new Map();
-    for (const [key, value] of sourceMap) {
-      if (!this.state.values.has(key) && value.toLowerCase().trim().startsWith(query)) {
-        suggestions.set(key, value);
-      }
-    }
-    return suggestions;
-  }
-
-  _selectOption (key) {
-    const dataMap = dataSourceToMap(this.props.dataSource);
-    let { values } = this.state;
-    const query = !this.props.multiple ? dataMap.get(key) : '';
-    values = new Map(values);
-
-    if (!this.props.multiple) values.clear();
-    values.set(key, dataMap.get(key));
-
-    this.setState({focus: false, query, values}, () => {
-      this.refs.input.blur();
-      if (this.props.onChange) this.props.onChange(this);
-    });
-  }
-
-  _unselectOption (key) {
-    if (key) {
-      const values = new Map(this.state.values);
-      values.delete(key);
-      this.setState({focus: false, values}, () => {
-        if (this.props.onChange) this.props.onChange(this);
-      });
-    }
-  }
-
-  getValue () {
-    const values = [...this.state.values.keys()];
-    return this.props.multiple ? values : (values.length > 0 ? values[0] : null);
-  }
-
-  setValue (dataParam = []) {
-    const sourceMap = dataSourceToMap(this.props.dataSource);
-    let values, query;
-
-    if (this.props.multiple) {
-      values = valuesToMap(dataParam, sourceMap);
-      query = '';
-    } else {
-      values = valueToMap(dataParam, sourceMap);
-      query = sourceMap.get(dataParam);
-    }
-    this.setState({values, query});
-  }
 }
 
 export default Autocomplete;
diff --git a/components/autocomplete/readme.md b/components/autocomplete/readme.md
index 48054c18a..ff4bb7436 100644
--- a/components/autocomplete/readme.md
+++ b/components/autocomplete/readme.md
@@ -1,48 +1,54 @@
 # Autocomplete
 
-An input field with a set of predeterminated labeled values. When it's focused it shows a list of hints that are filtered by label as the user types. They can be simple or multiple depending on the amount of values that can be selected. The opening direction is determinated at opening time depending on the current position.
+An input field with a set of predeterminated labeled values. When it's focused it shows a list of hints that are filtered by label as the user types. They can be simple or multiple depending on the amount of values that can be selected. The opening direction is determined at opening time depending on the current position.
 
 <!-- example -->
 ```jsx
-import Autocomplete from 'react-toolbox/autocomplete';
+import Autocomplete from 'react-toolbox/lib/autocomplete';
 
-const countries = {
-  'EN-gb': 'England',
-  'ES-es': 'Spain',
-  'TH-th': 'Thailand',
+const source = {
+  'ES-es': 'Spain', 
+  'TH-th': 'Thailand', 
+  'EN-gb': 'England', 
   'EN-en': 'USA'
 };
 
-const selected = ['ES-es', 'EN-gb'];
-
-const AutocompleteTest = () => (
-  <Autocomplete
-    label="Choose a country"
-    placeholder="Elements is up to you..."
-    dataSource={countries}
-    value={selected}
-  />
-)
+class AutocompleteTest extends React.Component {
+  state = { 
+    countries: ['EN-es', 'TH-th']
+  }
+
+  handleChange = (value) => {
+    this.setState({value: value});
+  };
+
+  render () {
+    return (
+      <Autocomplete
+        direction="down"
+        label="Choose countries"
+        onChange={this.handleChange}
+        placeholder="Pick multiple elements..."
+        source={source}
+        value={this.state.value}
+      />
+    );
+  }
+}
 ```
 
 ## Properties
 
 | Name              | Type          | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `auto`        | `Boolean`       |  `true`        | If true, the autocomplete will open to the best possible direction |
 | `className`     | `String`      | `''`            | Sets a class to style of the Component.|
-| `dataSource`    | `Object` or `Array`   |           | Object of key/values or array representing all items suggested.|
+| `direction`    | `String`       |  `auto`        | Determines the opening direction. It can be `auto`, `top` or `bottom`. |
 | `disabled`      | `Bool`        |  `false`         | If true, component will be disabled.|
 | `error`         | `String`      |         | Sets the error string for the internal input element.|
 | `label`         | `String`      |         | The text string to use for the floating label element.|
 | `multiple`      | `Bool`        | `true`          | If true, component can hold multiple values.|
 | `onChange`      | `Function`    |                 | Callback function that is fired when the components's value changes.|
-| `required`      | `Boolean`     |                 | If true, component input is set as required.|
-| `value`         | `String` or `Array`    |        | Default value to initialize the component.|
-
-## Methods
-
-This component has state to control how is it rendered and the values currently selected. It exposes the following instance methods:
+| `source`    | `Object` or `Array`   |           | Object of key/values or array representing all items suggested. |
+| `value`         | `String` or `Array`    |        | Value or array of values currently selected component.|
 
-- `getValue` is used to retrieve the current value.
-- `setValue` to force a new value.
+Additional properties will be passed to the input element so you can use `name`, `type`... etc.
diff --git a/components/autocomplete/style.scss b/components/autocomplete/style.scss
index a59b80bb5..382c6185b 100644
--- a/components/autocomplete/style.scss
+++ b/components/autocomplete/style.scss
@@ -1,8 +1,10 @@
 @import "http://github.com/base";
 @import "http://github.com/config";
+@import "http://github.com/input/config";
 
 .root {
   position: relative;
+  padding: $unit 0;
   &.focus {
     .label {
       color: $autocomplete-color-primary;
@@ -13,6 +15,11 @@
       box-shadow: $zdepth-shadow-1;
     }
   }
+  &.errored {
+    .suggestions {
+      margin-top: - $input-error-height;
+    }
+  }
 }
 
 .label {
@@ -24,6 +31,7 @@
 .values {
   flex-direction: row;
   flex-wrap: wrap;
+  padding-bottom: $unit / 2;
 }
 
 .value {
@@ -40,6 +48,7 @@
 .suggestions {
   position: absolute;
   z-index: $z-index-high;
+  width: 100%;
   max-height: 0;
   overflow-x: hidden;
   overflow-y: scroll;
@@ -52,7 +61,6 @@
     bottom: auto;
   }
   &.up {
-    top: auto;
     bottom: 0;
   }
 }
@@ -66,5 +74,6 @@
 }
 
 .input {
+  padding-top: 0;
   padding-bottom: 0;
 }
diff --git a/components/input/_config.scss b/components/input/_config.scss
index a8dbeac40..d89a49116 100644
--- a/components/input/_config.scss
+++ b/components/input/_config.scss
@@ -11,6 +11,7 @@ $input-text-highlight-color: unquote("rgb(#{$color-primary})") !default;
 $input-text-disabled-color: $input-text-bottom-border-color !default;
 $input-text-disabled-text-color: $input-text-label-color !default;
 $input-text-error-color: unquote("rgb(222, 50, 38)") !default;
+$input-error-height:  1.8 * $unit;
 $input-icon-font-size: 2.4 * $unit;
 $input-icon-size: 2 * $input-icon-font-size;
 $input-icon-offset: 1.6 * $unit;
diff --git a/components/input/style.scss b/components/input/style.scss
index 91b38829c..ed0da891f 100644
--- a/components/input/style.scss
+++ b/components/input/style.scss
@@ -91,8 +91,9 @@
 }
 
 .error {
+  display: block;
   font-size: $input-label-font-size;
-  line-height: 1.6 * $unit;
+  line-height: $input-error-height;
   color: $input-text-error-color;
 }
 
diff --git a/docs/app/components/layout/main/modules/examples/autocomplete_example_1.txt b/docs/app/components/layout/main/modules/examples/autocomplete_example_1.txt
index e01190bab..8ecf4a2d9 100644
--- a/docs/app/components/layout/main/modules/examples/autocomplete_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/autocomplete_example_1.txt
@@ -1,20 +1,27 @@
-const countries = {
-  'EN-gb': 'England',
-  'ES-es': 'Spain',
-  'TH-th': 'Thailand',
-  'EN-en': 'USA'
-};
+const source = {'ES-es': 'Spain', 'TH-th': 'Thailand', 'EN-gb': 'England', 'EN-en': 'USA'};
 
-const selected = ['ES-es', 'EN-gb'];
+class AutocompleteTest extends React.Component {
+  state = {
+    countries: ['ES-es', 'TH-th']
+  }
 
-const AutocompleteTest = () => (
-  <Autocomplete
-    auto={false}
-    label="Choose a country"
-    placeholder="Elements is up to you..."
-    dataSource={countries}
-    value={selected}
-  />
-)
+  handleChange = (value) => {
+    this.setState({countries: value});
+  };
+
+  render () {
+    return (
+      <Autocomplete
+        direction="down"
+        label="Choose countries"
+        name="countries"
+        onChange={this.handleChange}
+        placeholder="Pick multiple elements..."
+        source={source}
+        value={this.state.countries}
+      />
+    );
+  }
+}
 
 return <AutocompleteTest />
diff --git a/spec/components/autocomplete.jsx b/spec/components/autocomplete.jsx
index c41b73476..8d56a78d0 100644
--- a/spec/components/autocomplete.jsx
+++ b/spec/components/autocomplete.jsx
@@ -1,45 +1,45 @@
 import React from 'react';
 import Autocomplete from '../../components/autocomplete';
 
+const countriesArray = ['Spain', 'England', 'USA', 'Thailand', 'Tongo', 'Slovenia'];
+const countriesObject = {'ES-es': 'Spain', 'TH-th': 'Thailand', 'EN-gb': 'England', 'EN-en': 'USA'};
+
 class AutocompleteTest extends React.Component {
   state = {
-    countries: ['Spain', 'England', 'USA', 'Thailand', 'Tongo', 'Slovenia'],
-    countries_obj: {
-      'ES-es': 'Spain',
-      'TH-th': 'Thailand',
-      'EN-gb': 'England',
-      'EN-en': 'USA'
-    }
+    simple: 'Spain',
+    multiple: ['ES-es', 'TH-th']
   };
 
-  onAutocompleteValues = () => {
-    console.log(this.refs.autocomplete_multiple.getValue());
-    console.log(this.refs.autocomplete_simple.getValue());
+  handleMultipleChange = (value) => {
+    this.setState({multiple: value});
   };
 
-  render () {
-    const countries_selected = ['USA', 'Tongo'];
-    const countries_obj_selected = 'TH-th';
+  handleSimpleChange = (value) => {
+    this.setState({simple: value});
+  };
 
+  render () {
     return (
       <section>
         <h5>Autocomplete</h5>
         <p>You can have a multiple or simple autocomplete.</p>
 
         <Autocomplete
-          ref="autocomplete_multiple"
-          label="Choose a country"
-          onChange={this.onAutocompleteValues}
-          placeholder="Elements is up to you..."
-          dataSource={this.state.countries}
-          value={countries_selected}/>
+          label="Choose countries"
+          onChange={this.handleMultipleChange}
+          placeholder="Pick multiple elements..."
+          source={countriesObject}
+          value={this.state.multiple}
+        />
 
         <Autocomplete
-          ref="autocomplete_simple"
+          label="Choose a country"
           multiple={false}
-          onChange={this.onAutocompleteValues}
-          dataSource={this.state.countries_obj}
-          value={countries_obj_selected}/>
+          onChange={this.handleSimpleChange}
+          placeholder="Elements up to you..."
+          source={countriesArray}
+          value={this.state.simple}
+        />
       </section>
     );
   }

From 1d9cde9e54db09a186acee44ca3375768cb1d69e Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 8 Nov 2015 19:00:25 +0100
Subject: [PATCH 0007/1024] Improvements in checkbox and adapt dependencies to
 stateless behavior

---
 components/checkbox/index.jsx                 |   2 +-
 components/checkbox/readme.md                 |  49 +++-
 components/checkbox/style.scss                |   3 +-
 .../modules/examples/checkbox_example_1.txt   |  41 +++-
 spec/components/checkbox.jsx                  |   1 -
 spec/components/list.jsx                      | 231 ++++++++++--------
 6 files changed, 205 insertions(+), 122 deletions(-)

diff --git a/components/checkbox/index.jsx b/components/checkbox/index.jsx
index 44afde71c..635642bcf 100644
--- a/components/checkbox/index.jsx
+++ b/components/checkbox/index.jsx
@@ -48,10 +48,10 @@ class Checkbox extends React.Component {
         onClick={this.handleClick}
       >
         <input
+          ref='input'
           {...this.props}
           className={style.input}
           onClick={this.handleInputClick}
-          ref='input'
           type='checkbox'
         />
         <span data-role='checkbox' className={checkboxClassName} onMouseDown={this.handleMouseDown}>
diff --git a/components/checkbox/readme.md b/components/checkbox/readme.md
index 880b40066..ffcae3416 100644
--- a/components/checkbox/readme.md
+++ b/components/checkbox/readme.md
@@ -6,31 +6,58 @@
 ```jsx
 import Checkbox from 'react-toolbox/checkbox';
 
-const TestCheckbox = () => (
-  <div>
-    <Checkbox label="Checked option" checked />
-    <Checkbox label="Unchecked option" />
-    <Checkbox label="Disabled checkbox" checked disabled />
-  </div>
-);
+class TestCheckbox extends React.Component {
+  state = {
+    check1: true,
+    check2: false
+  };
+
+  handleChange = (field) => {
+    const newState = {};
+    newState[field] = !this.state[field];
+    this.setState(newState);
+  };
+
+  render () {
+    return (
+      <div>
+        <Checkbox 
+          checked={this.state.check1} 
+          label="Checked option" 
+          onChange={this.handleChange.bind(this, 'check1')} 
+        />
+        <Checkbox 
+          checked={this.state.check2} 
+          label="Unchecked option" 
+          onChange={this.handleChange.bind(this, 'check2')}
+        />
+        <Checkbox 
+          checked 
+          disabled 
+          label="Disabled checkbox" 
+        />
+      </div>
+    );
+  } 
+}
 ```
 
 ## Properties
 
 | Name              | Type          | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `checked`       | `Bool`        |   `false`        | If true, the checkbox will be checked.|
+| `checked`       | `Bool`        |   `false`        | Value for the checkbox, can be `true` or `false`. |
 | `className`     | `String`        |     `''`            | Sets a class to give customized styles to the checkbox field.|
 | `disabled`         | `Bool`        |     `false`          | If true, the checkbox shown as disabled and is not possible to modify it.|
-| `label`         | `String`        |                 | Text label to attach next to the checkbox element.|
-| `name`       | `String`       | `false`                | The name of the field to set in the input checkbox.|
+| `label`         | `String`        |              | Text label to attach next to the checkbox element.|
+| `name`       | `String`       | `false`         | The name of the field to set in the input checkbox.|
 | `onBlur`       | `Function`       |                | Callback called when the checkbox is blurred.|
 | `onChange`       | `Function`       |                | Callback called when the checkbox value is changed.|
 | `onFocus`       | `Function`       |                | Callback called when the checkbox is focused |
 
 ## Methods
 
-This component has state to control its value and how is it rendered. It exposes the following instance methods:
+This component exposes methods to communicate with the `input` DOM component:
 
 - `blur` to blur the input.
 - `focus` to focus the input.
diff --git a/components/checkbox/style.scss b/components/checkbox/style.scss
index 87a7c5b7c..29075defa 100644
--- a/components/checkbox/style.scss
+++ b/components/checkbox/style.scss
@@ -25,12 +25,11 @@
   height: 0;
   overflow: hidden;
   opacity: 0;
-  &:focus:not(&:active) + .check {
+  &:focus ~ .check {
     &:before {
       position: absolute;
       top: 50%;
       left: 50%;
-      z-index: $z-index-low;
       width: $checkbox-focus-size;
       height: $checkbox-focus-size;
       margin-top: - $checkbox-focus-size / 2;
diff --git a/docs/app/components/layout/main/modules/examples/checkbox_example_1.txt b/docs/app/components/layout/main/modules/examples/checkbox_example_1.txt
index 79190d386..327478a70 100644
--- a/docs/app/components/layout/main/modules/examples/checkbox_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/checkbox_example_1.txt
@@ -1,9 +1,36 @@
-const TestCheckbox = () => (
-  <div>
-    <Checkbox label="Checked option" checked />
-    <Checkbox label="Unchecked option" />
-    <Checkbox label="Disabled checkbox" checked disabled />
-  </div>
-);
+class TestCheckbox extends React.Component {
+  state = {
+    check1: true,
+    check2: false
+  };
+
+  handleChange = (field) => {
+    const newState = {};
+    newState[field] = !this.state[field];
+    this.setState(newState);
+  };
+
+  render () {
+    return (
+      <div>
+        <Checkbox
+          checked={this.state.check1}
+          label="Checked option"
+          onChange={this.handleChange.bind(this, 'check1')}
+        />
+        <Checkbox
+          checked={this.state.check2}
+          label="Unchecked option"
+          onChange={this.handleChange.bind(this, 'check2')}
+        />
+        <Checkbox
+          checked
+          disabled
+          label="Disabled checkbox"
+        />
+      </div>
+    );
+  }
+}
 
 return <TestCheckbox />;
diff --git a/spec/components/checkbox.jsx b/spec/components/checkbox.jsx
index 0772068da..db3abf525 100644
--- a/spec/components/checkbox.jsx
+++ b/spec/components/checkbox.jsx
@@ -2,7 +2,6 @@ import React from 'react';
 import Checkbox from '../../components/checkbox';
 
 class CheckboxTest extends React.Component {
-
   state = {
     checkbox_1: true,
     checkbox_2: false,
diff --git a/spec/components/list.jsx b/spec/components/list.jsx
index ae1fdcd39..996a21709 100644
--- a/spec/components/list.jsx
+++ b/spec/components/list.jsx
@@ -7,109 +7,140 @@ const listStyle = {
   minWidth: 340
 };
 
-const ListTest = () => (
-  <section>
-    <h5>With simple text and icons</h5>
-    <p>This list can be used inside a Drawer for a list of options or as navigation.</p>
-    <div style={listStyle}>
-      <List selectable ripple>
-        <ListSubHeader caption='Contacts' />
-        <ListItem caption='Inbox' leftIcon='inbox' />
-        <ListItem caption='Outbox' leftIcon='send' />
-        <ListItem caption='Trash' leftIcon='delete' />
-        <ListItem caption='Spam' leftIcon='report' />
-      </List>
-    </div>
+class ListTest extends React.Component {
+  state = {
+    checkbox1: false,
+    checkbox2: true,
+    checkbox3: true
+  };
 
-    <h5>Two text lines, avatar and right icon</h5>
-    <p>Useful for a list of contacts or similar.</p>
-    <div style={listStyle}>
-      <List selectable ripple>
-        <ListSubHeader caption='Contacts' />
-        <ListItem
-          avatar='https://pbs.twimg.com/profile_images/614407428/s6pTalMzZs-nusCGWqoV.0_400x400.jpeg'
-          caption='Alfonso Rocha'
-          legend='Product Manager at Fon'
-          rightIcon='star'
-        />
-        <ListItem
-          avatar='https://pbs.twimg.com/profile_images/459485216499720192/ufS4YGOY_400x400.png'
-          caption='Javi Velasco'
-          legend='Frontend engineer at Socialbro'
-          rightIcon='star'
-        />
-        <ListItem
-          avatar='https://avatars2.githubusercontent.com/u/559654?v=3&s=460'
-          caption='Javi Jiménez'
-          legend='Frontend engineer at MediaSmart'
-          rightIcon='star'
-        />
-        <ListItem
-          avatar='https://pbs.twimg.com/profile_images/477103691506282499/bsIaPEiM_400x400.jpeg'
-          caption='Tobias Van Schneider'
-          legend='Designer at Spotify'
-          rightIcon='star'
-        />
-      </List>
-    </div>
+  handleCheckboxChange = (field) => {
+    const newState = {};
+    newState[field] = !this.state[field];
+    this.setState(newState);
+  };
 
-    <h5>Two line options and checkbox items</h5>
-    <p>It can be used to embed little checkboxes in the list. These behave as checkboxes.</p>
-    <div style={listStyle}>
-      <List>
-        <ListSubHeader caption='General' />
-        <ListItem caption='Profile Photo' legend='Change your Google+ profile photo' />
-        <ListItem disabled caption='Show your status' legend='Your status is visible to everyone you use with' />
-      </List>
-      <ListDivider />
-      <List>
-        <ListSubHeader caption='Hangout notifications' />
-        <ListCheckbox caption='Notifications' legend='Allow notifications' />
-        <ListCheckbox checked caption='Sound' legend='Hangouts message' />
-        <ListCheckbox disabled caption='Video sounds' legend='Hangouts video call' />
-      </List>
-    </div>
+  render () {
+    return (
+      <section>
+        <h5>With simple text and icons</h5>
+        <p>This list can be used inside a Drawer for a list of options or as navigation.</p>
+        <div style={listStyle}>
+          <List selectable ripple>
+            <ListSubHeader caption='Contacts' />
+            <ListItem caption='Inbox' leftIcon='inbox' />
+            <ListItem caption='Outbox' leftIcon='send' />
+            <ListItem caption='Trash' leftIcon='delete' />
+            <ListItem caption='Spam' leftIcon='report' />
+          </List>
+        </div>
 
-    <h5>Avatar, sinle text and icon</h5>
-    <p>Similar to a previous one but only with one text line</p>
-    <div style={listStyle}>
-      <List>
-        <ListItem
-          avatar='https://pbs.twimg.com/profile_images/614407428/s6pTalMzZs-nusCGWqoV.0_400x400.jpeg'
-          caption='Alfonso Rocha'
-          rightIcon='mail'
-        />
-        <ListItem
-          avatar='https://pbs.twimg.com/profile_images/459485216499720192/ufS4YGOY_400x400.png'
-          caption='Javi Velasco'
-          rightIcon='mail'
-        />
-        <ListItem
-          avatar='https://avatars2.githubusercontent.com/u/559654?v=3&s=460'
-          caption='Javi Jiménez'
-          rightIcon='mail'
-        />
-        <ListItem
-          avatar='https://pbs.twimg.com/profile_images/477103691506282499/bsIaPEiM_400x400.jpeg'
-          caption='Tobias Van Schneider'
-          rightIcon='mail'
-        />
-      </List>
-    </div>
+        <h5>Two text lines, avatar and right icon</h5>
+        <p>Useful for a list of contacts or similar.</p>
+        <div style={listStyle}>
+          <List selectable ripple>
+            <ListSubHeader caption='Contacts' />
+            <ListItem
+              avatar='https://pbs.twimg.com/profile_images/614407428/s6pTalMzZs-nusCGWqoV.0_400x400.jpeg'
+              caption='Alfonso Rocha'
+              legend='Product Manager at Fon'
+              rightIcon='star'
+            />
+            <ListItem
+              avatar='https://pbs.twimg.com/profile_images/459485216499720192/ufS4YGOY_400x400.png'
+              caption='Javi Velasco'
+              legend='Frontend engineer at Socialbro'
+              rightIcon='star'
+            />
+            <ListItem
+              avatar='https://avatars2.githubusercontent.com/u/559654?v=3&s=460'
+              caption='Javi Jiménez'
+              legend='Frontend engineer at MediaSmart'
+              rightIcon='star'
+            />
+            <ListItem
+              avatar='https://pbs.twimg.com/profile_images/477103691506282499/bsIaPEiM_400x400.jpeg'
+              caption='Tobias Van Schneider'
+              legend='Designer at Spotify'
+              rightIcon='star'
+            />
+          </List>
+        </div>
 
-    <h5>Simple with just one text line</h5>
-    <p>The most simple list.</p>
-    <div style={listStyle}>
-      <List>
-        <ListItem caption='Alfonso Rocha' />
-        <ListItem caption='Javi Velasco' />
-        <ListItem caption='Javi Jiménez' />
-        <ListItem caption='Tobias Van Schneider' />
-        <ListDivider />
-        <ListItem caption='Other people' />
-      </List>
-    </div>
-  </section>
-);
+        <h5>Two line options and checkbox items</h5>
+        <p>It can be used to embed little checkboxes in the list. These behave as checkboxes.</p>
+        <div style={listStyle}>
+          <List>
+            <ListSubHeader caption='General' />
+            <ListItem caption='Profile Photo' legend='Change your Google+ profile photo' />
+            <ListItem disabled caption='Show your status' legend='Your status is visible to everyone you use with' />
+          </List>
+          <ListDivider />
+          <List>
+            <ListSubHeader caption='Hangout notifications' />
+            <ListCheckbox
+              caption='Notifications'
+              checked={this.state.checkbox1}
+              legend='Allow notifications'
+              onChange={this.handleCheckboxChange.bind(this, 'checkbox1')}
+            />
+            <ListCheckbox
+              caption='Sound'
+              checked={this.state.checkbox2}
+              legend='Hangouts message'
+              onChange={this.handleCheckboxChange.bind(this, 'checkbox2')}
+            />
+            <ListCheckbox
+              caption='Video sounds'
+              checked
+              disabled
+              legend='Hangouts video call'
+            />
+          </List>
+        </div>
+
+        <h5>Avatar, sinle text and icon</h5>
+        <p>Similar to a previous one but only with one text line</p>
+        <div style={listStyle}>
+          <List>
+            <ListItem
+              avatar='https://pbs.twimg.com/profile_images/614407428/s6pTalMzZs-nusCGWqoV.0_400x400.jpeg'
+              caption='Alfonso Rocha'
+              rightIcon='mail'
+            />
+            <ListItem
+              avatar='https://pbs.twimg.com/profile_images/459485216499720192/ufS4YGOY_400x400.png'
+              caption='Javi Velasco'
+              rightIcon='mail'
+            />
+            <ListItem
+              avatar='https://avatars2.githubusercontent.com/u/559654?v=3&s=460'
+              caption='Javi Jiménez'
+              rightIcon='mail'
+            />
+            <ListItem
+              avatar='https://pbs.twimg.com/profile_images/477103691506282499/bsIaPEiM_400x400.jpeg'
+              caption='Tobias Van Schneider'
+              rightIcon='mail'
+            />
+          </List>
+        </div>
+
+        <h5>Simple with just one text line</h5>
+        <p>The most simple list.</p>
+        <div style={listStyle}>
+          <List>
+            <ListItem caption='Alfonso Rocha' />
+            <ListItem caption='Javi Velasco' />
+            <ListItem caption='Javi Jiménez' />
+            <ListItem caption='Tobias Van Schneider' />
+            <ListDivider />
+            <ListItem caption='Other people' />
+          </List>
+        </div>
+      </section>
+    );
+  }
+}
 
 export default ListTest;

From 7d6c898c37373ad7f33ac309e8976ded821a488b Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 9 Nov 2015 02:14:02 +0100
Subject: [PATCH 0008/1024] Extract value from slider state and fix tests

---
 components/slider/__tests__/index.spec.jsx | 38 ++++------
 components/slider/index.jsx                | 84 +++++++++++++++-------
 components/slider/style.scss               |  1 +
 spec/components/slider.jsx                 | 38 +++++++---
 4 files changed, 100 insertions(+), 61 deletions(-)

diff --git a/components/slider/__tests__/index.spec.jsx b/components/slider/__tests__/index.spec.jsx
index d7c4a9f43..e5e3d85e3 100644
--- a/components/slider/__tests__/index.spec.jsx
+++ b/components/slider/__tests__/index.spec.jsx
@@ -8,7 +8,7 @@ import Slider from '../index';
 import TestUtils from 'react-addons-test-utils';
 
 describe('Slider', function () {
-  let props, state, slider, progress, input;
+  let props, state, slider, progress, input, onChange;
 
   describe('#positionToValue', function () {
     before(function () {
@@ -74,21 +74,6 @@ describe('Slider', function () {
     });
   });
 
-  describe('#getValue', function () {
-    it('retrieves the current value', function () {
-      slider = utils.renderComponent(Slider, {value: 10});
-      expect(slider.getValue()).toEqual(slider.state.value);
-    });
-  });
-
-  describe('#setValue', function () {
-    it('set the current value', function () {
-      slider = utils.renderComponent(Slider, {value: 10});
-      slider.setValue(50);
-      expect(slider.state.value).toEqual(50);
-    });
-  });
-
   describe('#render', function () {
     it('contains a linear progress bar with proper properties', function () {
       slider = utils.renderComponent(Slider, {min: 100, max: 1000, value: 140});
@@ -116,8 +101,9 @@ describe('Slider', function () {
   });
 
   describe('#events', function () {
-    before(function () {
-      props = { min: -500, max: 500 };
+    beforeEach(function () {
+      onChange = sinon.spy();
+      props = { min: -500, max: 500, onChange: onChange };
       state = { sliderStart: 0, sliderLength: 1000 };
       slider = utils.renderComponent(Slider, props, state);
       slider.handleResize = (event, callback) => { callback(); };
@@ -135,28 +121,32 @@ describe('Slider', function () {
 
     it('sets a proper value when the slider is clicked', function () {
       TestUtils.Simulate.mouseDown(slider.refs.slider, { pageX: 200 });
-      expect(slider.state.value).toEqual(-300);
+      expect(onChange.called).toEqual(true);
+      expect(onChange.getCall(0).args[0]).toEqual(-300);
     });
 
     it('sets a proper value when the slider is touched', function () {
       TestUtils.Simulate.touchStart(slider.refs.slider, {touches: [{pageX: 200, pageY: 0}]});
-      expect(slider.state.value).toEqual(-300);
+      expect(onChange.called).toEqual(true);
+      expect(onChange.getCall(0).args[0]).toEqual(-300);
     });
 
     it('changes input value when slider changes', function () {
-      slider = utils.renderComponent(Slider, {editable: true}, {sliderStart: 0, sliderLength: 1000});
+      slider = utils.renderComponent(Slider, {editable: true, onChange}, {sliderStart: 0, sliderLength: 1000});
       slider.handleResize = (event, callback) => { callback(); };
       input = TestUtils.findRenderedComponentWithType(slider, Input);
       TestUtils.Simulate.mouseDown(slider.refs.slider, { pageX: 900 });
-      expect(input.state.value).toEqual(90);
+      expect(onChange.called).toEqual(true);
+      expect(onChange.getCall(0).args[0]).toEqual(90);
     });
 
     it('changes its value when input is blurred', function () {
-      slider = utils.renderComponent(Slider, {editable: true, value: 50});
+      slider = utils.renderComponent(Slider, {editable: true, value: 50, onChange});
       input = TestUtils.findRenderedComponentWithType(slider, Input);
       TestUtils.Simulate.change(input.refs.input, {target: {value: '80'}});
       TestUtils.Simulate.blur(input.refs.input);
-      expect(slider.state.value).toEqual(80);
+      expect(onChange.called).toEqual(true);
+      expect(onChange.getCall(0).args[0]).toEqual(80);
     });
 
     it('calls onChange callback when the value is changed', function () {
diff --git a/components/slider/index.jsx b/components/slider/index.jsx
index 6289e714c..53fcca913 100644
--- a/components/slider/index.jsx
+++ b/components/slider/index.jsx
@@ -30,9 +30,10 @@ class Slider extends React.Component {
   };
 
   state = {
-    sliderStart: 0,
+    inputFocused: false,
+    inputValue: null,
     sliderLength: 0,
-    value: this.props.value
+    sliderStart: 0
   };
 
   componentDidMount () {
@@ -40,10 +41,14 @@ class Slider extends React.Component {
     this.handleResize();
   }
 
-  componentDidUpdate (prevProps, prevState) {
-    if (prevState.value !== this.state.value) {
-      if (this.props.onChange) this.props.onChange(this);
-      if (this.refs.input) this.refs.input.setValue(this.valueForInput(this.state.value));
+  shouldComponentUpdate (nextProps, nextState) {
+    if (!this.state.inputFocused && nextState.inputFocused) return false;
+
+    if (this.state.inputFocused && this.props.value !== nextProps.value) {
+      this.setState({inputValue: this.valueForInput(nextProps.value)});
+      return false;
+    } else {
+      return true;
     }
   }
 
@@ -51,9 +56,22 @@ class Slider extends React.Component {
     window.removeEventListener('resize', this.handleResize);
   }
 
+  handleInputFocus = () => {
+    this.setState({
+      inputFocused: true,
+      inputValue: this.valueForInput(this.props.value)
+    });
+  };
+
+  handleInputChange = (event) => {
+    this.setState({inputValue: event.target.value});
+  };
 
   handleInputBlur = () => {
-    this.setState({value: this.trimValue(this.refs.input.getValue()) });
+    const value = this.state.inputValue || 0;
+    this.setState({inputFocused: false, inputValue: null}, () => {
+      this.props.onChange(this.trimValue(value));
+    });
   };
 
   handleKeyDown = (event) => {
@@ -66,6 +84,7 @@ class Slider extends React.Component {
   };
 
   handleMouseDown = (event) => {
+    if (this.state.inputFocused) this.refs.input.blur();
     utils.events.addEventsToDocument(this.getMouseEventMap());
     this.start(utils.events.getMousePosition(event));
     utils.events.pauseEvent(event);
@@ -103,13 +122,21 @@ class Slider extends React.Component {
   };
 
   handleTouchStart = (event) => {
+    if (this.state.inputFocused) this.refs.input.blur();
     this.start(utils.events.getTouchPosition(event));
     utils.events.addEventsToDocument(this.getTouchEventMap());
     utils.events.pauseEvent(event);
   };
 
-  addToValue (value) {
-    this.setState({value: this.trimValue(this.state.value + value)});
+  addToValue (increment) {
+    let value;
+    if (this.state.inputFocused) {
+      value = this.trimValue(parseFloat(this.state.inputValue) + increment);
+    } else {
+      value = this.trimValue(this.props.value + increment);
+    }
+
+    if (value !== this.props.value) this.props.onChange(value);
   }
 
   getKeyboardEvents () {
@@ -139,11 +166,12 @@ class Slider extends React.Component {
 
   knobOffset () {
     const { max, min } = this.props;
-    return this.state.sliderLength * (this.state.value - min) / (max - min);
+    return this.state.sliderLength * (this.props.value - min) / (max - min);
   }
 
   move (position) {
-    this.setState({value: this.positionToValue(position)});
+    const newValue = this.positionToValue(position);
+    if (newValue !== this.props.value) this.props.onChange(newValue);
   }
 
   positionToValue (position) {
@@ -154,7 +182,8 @@ class Slider extends React.Component {
 
   start (position) {
     this.handleResize(null, () => {
-      this.setState({pressed: true, value: this.positionToValue(position)});
+      this.setState({pressed: true});
+      this.props.onChange(this.positionToValue(position));
     });
   }
 
@@ -187,14 +216,25 @@ class Slider extends React.Component {
     }
   }
 
+  currentValueForInput () {
+    if (this.state.inputFocused) {
+      return this.state.inputValue;
+    } else {
+      return this.valueForInput(this.props.value);
+    }
+  }
+
   renderInput () {
     if (this.props.editable) {
       return (
         <Input
           ref='input'
           className={style.input}
+          onFocus={this.handleInputFocus}
+          onChange={this.handleInputChange}
           onBlur={this.handleInputBlur}
-          value={this.valueForInput(this.state.value)} />
+          value={this.currentValueForInput()}
+        />
       );
     }
   }
@@ -205,15 +245,15 @@ class Slider extends React.Component {
     if (this.props.editable) className += ` ${style.editable}`;
     if (this.props.pinned) className += ` ${style.pinned}`;
     if (this.state.pressed) className += ` ${style.pressed}`;
-    if (this.state.value === this.props.min) className += ` ${style.ring}`;
+    if (this.props.value === this.props.min) className += ` ${style.ring}`;
 
     return (
       <div
-        data-react-toolbox='slider'
         className={style.root + className}
-        tabIndex='0'
+        data-react-toolbox='slider'
         onBlur={this.handleSliderBlur}
         onFocus={this.handleSliderFocus}
+        tabIndex='0'
       >
         <div
           ref='slider'
@@ -228,7 +268,7 @@ class Slider extends React.Component {
             onTouchStart={this.handleTouchStart}
             style={knobStyles}
           >
-            <div className={style.innerknob} data-value={parseInt(this.state.value)}></div>
+            <div className={style.innerknob} data-value={parseInt(this.props.value)}></div>
           </div>
 
           <div className={style.progress}>
@@ -238,7 +278,7 @@ class Slider extends React.Component {
               max={this.props.max}
               min={this.props.min}
               mode='determinate'
-              value={this.state.value}
+              value={this.props.value}
             />
             { this.renderSnaps() }
           </div>
@@ -248,14 +288,6 @@ class Slider extends React.Component {
       </div>
     );
   }
-
-  getValue () {
-    return this.state.value;
-  }
-
-  setValue (value) {
-    this.setState({value});
-  }
 }
 
 export default Slider;
diff --git a/components/slider/style.scss b/components/slider/style.scss
index 4b0276316..af75414d2 100644
--- a/components/slider/style.scss
+++ b/components/slider/style.scss
@@ -161,6 +161,7 @@
       .innerknob {
         width: 100%;
         height: 100%;
+        transition-delay: 100ms;
         transform: translateZ(0);
       }
     }
diff --git a/spec/components/slider.jsx b/spec/components/slider.jsx
index d16c42476..a2f085faf 100644
--- a/spec/components/slider.jsx
+++ b/spec/components/slider.jsx
@@ -1,16 +1,32 @@
 import React from 'react';
 import Slider from '../../components/slider';
 
-const SliderTest = () => (
-  <section>
-    <h5>Sliders</h5>
-    <p>Normal slider</p>
-    <Slider />
-    <p>With steps, initial value and editable</p>
-    <Slider value={5} min={0} max={10} editable />
-    <p>Pinned and with snaps</p>
-    <Slider pinned snaps value={1} min={0} max={10} step={1} editable />
-  </section>
-);
+class SliderTest extends React.Component {
+  state = {
+    slider1: null,
+    slider2: 5,
+    slider3: 1
+  };
+
+  handleChange = (slider, value) => {
+    const newState = {};
+    newState[slider] = value;
+    this.setState(newState);
+  };
+
+  render () {
+    return (
+      <section>
+        <h5>Sliders</h5>
+        <p>Normal slider</p>
+        <Slider value={this.state.slider1} onChange={this.handleChange.bind(this, 'slider1')} />
+        <p>With steps, initial value and editable</p>
+        <Slider min={0} max={10} editable value={this.state.slider2} onChange={this.handleChange.bind(this, 'slider2')} />
+        <p>Pinned and with snaps</p>
+        <Slider pinned snaps min={0} max={10} step={1} editable value={this.state.slider3} onChange={this.handleChange.bind(this, 'slider3')} />
+      </section>
+    );
+  }
+}
 
 export default SliderTest;

From 0a8b6b0940afa33f40f815036bfc6be98b485dad Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 9 Nov 2015 02:28:01 +0100
Subject: [PATCH 0009/1024] Improve code for slider

---
 components/slider/index.jsx | 45 +++++++++++++------------------------
 spec/components/slider.jsx  |  1 -
 2 files changed, 15 insertions(+), 31 deletions(-)

diff --git a/components/slider/index.jsx b/components/slider/index.jsx
index 53fcca913..258541b96 100644
--- a/components/slider/index.jsx
+++ b/components/slider/index.jsx
@@ -36,20 +36,18 @@ class Slider extends React.Component {
     sliderStart: 0
   };
 
-  componentDidMount () {
-    window.addEventListener('resize', this.handleResize);
-    this.handleResize();
-  }
-
   shouldComponentUpdate (nextProps, nextState) {
     if (!this.state.inputFocused && nextState.inputFocused) return false;
-
     if (this.state.inputFocused && this.props.value !== nextProps.value) {
       this.setState({inputValue: this.valueForInput(nextProps.value)});
       return false;
-    } else {
-      return true;
     }
+    return true;
+  }
+
+  componentDidMount () {
+    window.addEventListener('resize', this.handleResize);
+    this.handleResize();
   }
 
   componentWillUnmount () {
@@ -129,13 +127,8 @@ class Slider extends React.Component {
   };
 
   addToValue (increment) {
-    let value;
-    if (this.state.inputFocused) {
-      value = this.trimValue(parseFloat(this.state.inputValue) + increment);
-    } else {
-      value = this.trimValue(this.props.value + increment);
-    }
-
+    let value = this.state.inputFocused ? parseFloat(this.state.inputValue) : this.props.value;
+    value = this.trimValue(value + increment);
     if (value !== this.props.value) this.props.onChange(value);
   }
 
@@ -161,7 +154,7 @@ class Slider extends React.Component {
 
   end (revents) {
     utils.events.removeEventsFromDocument(revents);
-    this.setState({pressed: false});
+    this.setState({ pressed: false });
   }
 
   knobOffset () {
@@ -206,26 +199,17 @@ class Slider extends React.Component {
     if (this.props.snaps) {
       return (
         <div ref='snaps' className={style.snaps}>
-          {
-            utils.range(0, (this.props.max - this.props.min) / this.props.step).map(i => {
-              return (<div key={`span-${i}`} className={style.snap}></div>);
-            })
-          }
+          { utils.range(0, (this.props.max - this.props.min) / this.props.step).map(i => {
+              return <div key={`span-${i}`} className={style.snap}></div>;
+            }) }
         </div>
       );
     }
   }
 
-  currentValueForInput () {
-    if (this.state.inputFocused) {
-      return this.state.inputValue;
-    } else {
-      return this.valueForInput(this.props.value);
-    }
-  }
-
   renderInput () {
     if (this.props.editable) {
+      const value = this.state.inputFocused ? this.state.inputValue : this.valueForInput(this.props.value);
       return (
         <Input
           ref='input'
@@ -233,7 +217,7 @@ class Slider extends React.Component {
           onFocus={this.handleInputFocus}
           onChange={this.handleInputChange}
           onBlur={this.handleInputBlur}
-          value={this.currentValueForInput()}
+          value={value}
         />
       );
     }
@@ -245,6 +229,7 @@ class Slider extends React.Component {
     if (this.props.editable) className += ` ${style.editable}`;
     if (this.props.pinned) className += ` ${style.pinned}`;
     if (this.state.pressed) className += ` ${style.pressed}`;
+    console.log(this.props.value, this.props.min);
     if (this.props.value === this.props.min) className += ` ${style.ring}`;
 
     return (
diff --git a/spec/components/slider.jsx b/spec/components/slider.jsx
index a2f085faf..458d9295a 100644
--- a/spec/components/slider.jsx
+++ b/spec/components/slider.jsx
@@ -3,7 +3,6 @@ import Slider from '../../components/slider';
 
 class SliderTest extends React.Component {
   state = {
-    slider1: null,
     slider2: 5,
     slider3: 1
   };

From 362c0cf70f342c1c78e22607ff12bc4bceaff34a Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 9 Nov 2015 02:41:58 +0100
Subject: [PATCH 0010/1024] Update examples and documentation for slider

---
 components/slider/readme.md                   | 49 +++++++++++--------
 .../modules/examples/slider_example_1.txt     | 35 +++++++++----
 2 files changed, 54 insertions(+), 30 deletions(-)

diff --git a/components/slider/readme.md b/components/slider/readme.md
index 92c037d82..6d94e62d9 100644
--- a/components/slider/readme.md
+++ b/components/slider/readme.md
@@ -4,18 +4,33 @@
 
 <!-- example -->
 ```jsx
-import Slider from 'react-toolbox/slider';
-
-const SliderTest = () => (
-  <section>
-    <p>Default slider</p>
-    <Slider />
-    <p>With steps, initial value and editable</p>
-    <Slider value={5} min={0} max={10} editable />
-    <p>Pinned and with snaps</p>
-    <Slider pinned snaps value={1} min={0} max={10} step={1} editable />
-  </section>
-);
+import Slider from 'react-toolbox/lib/slider';
+
+class SliderTest extends React.Component {
+  state = {
+    slider2: 5,
+    slider3: 1
+  };
+
+  handleChange = (slider, value) => {
+    const newState = {};
+    newState[slider] = value;
+    this.setState(newState);
+  };
+
+  render () {
+    return (
+      <section>
+        <p>Normal slider</p>
+        <Slider value={this.state.slider1} onChange={this.handleChange.bind(this, 'slider1')} />
+        <p>With steps, initial value and editable</p>
+        <Slider min={0} max={10} editable value={this.state.slider2} onChange={this.handleChange.bind(this, 'slider2')} />
+        <p>Pinned and with snaps</p>
+        <Slider pinned snaps min={0} max={10} step={1} editable value={this.state.slider3} onChange={this.handleChange.bind(this, 'slider3')} />
+      </section>
+    );
+  }
+}
 ```
 
 ## Properties
@@ -26,14 +41,8 @@ const SliderTest = () => (
 | `editable`  | `Boolean` | `false`   | If true, an input is shown and the user can set the slider from keyboard value.|
 | `max`       | `Number`  | `100`     | Maximum value permitted.|
 | `min`       | `Number`  | `0`       | Minimum value permitted.|
+| `onChange`   | `Function` |   | Callback function that will be invoked when the slider value changes.|
 | `pinned`    | `Boolean` | `false`   | If true, a pin with numeric value label is shown when the slider thumb is pressed. Use for settings for which users need to know the exact value of the setting.|
 | `snaps`     | `Boolean` | `false` | If true, the slider thumb snaps to tick marks evenly spaced based on the step property value.|
 | `step`      | `Number`  | `0.01`    | Amount to vary the value when the knob is moved or increase/decrease is called.|
-| `value`     | `Number`  | `0`       | Value of the current value.|
-
-## Methods
-
-Since the slider is able to keep a value it needs state and exposes methods to retrieve and set the current value as usual.
-
-- `getValue` is used to retrieve the current value.
-- `setValue` to force a new value.
+| `value`     | `Number`  | `0`       | Current valud of the slider.|
diff --git a/docs/app/components/layout/main/modules/examples/slider_example_1.txt b/docs/app/components/layout/main/modules/examples/slider_example_1.txt
index 8189862f1..c39c93421 100644
--- a/docs/app/components/layout/main/modules/examples/slider_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/slider_example_1.txt
@@ -1,12 +1,27 @@
-const SliderTest = () => (
-  <section>
-    <p>Default slider</p>
-    <Slider />
-    <p>With steps, initial value and editable</p>
-    <Slider value={5} min={0} max={10} editable />
-    <p>Pinned and with snaps</p>
-    <Slider pinned snaps value={1} min={0} max={10} step={1} editable />
-  </section>
-);
+class SliderTest extends React.Component {
+  state = {
+    slider2: 5,
+    slider3: 1
+  };
+
+  handleChange = (slider, value) => {
+    const newState = {};
+    newState[slider] = value;
+    this.setState(newState);
+  };
+
+  render () {
+    return (
+      <section>
+        <p>Normal slider</p>
+        <Slider value={this.state.slider1} onChange={this.handleChange.bind(this, 'slider1')} />
+        <p>With steps, initial value and editable</p>
+        <Slider min={0} max={10} editable value={this.state.slider2} onChange={this.handleChange.bind(this, 'slider2')} />
+        <p>Pinned and with snaps</p>
+        <Slider pinned snaps min={0} max={10} step={1} editable value={this.state.slider3} onChange={this.handleChange.bind(this, 'slider3')} />
+      </section>
+    );
+  }
+}
 
 return <SliderTest />;

From fe868542f823ea253a9350facca3bc9daa470ad0 Mon Sep 17 00:00:00 2001
From: Enzo Martin <enzo.r.martin@gmail.com>
Date: Mon, 9 Nov 2015 03:46:52 +0100
Subject: [PATCH 0011/1024] Set font URLs as variables - Add intellij .idea
 folder to ignore - Set both font URLs to use HTTPS

---
 .gitignore                      | 1 +
 components/_globals.scss        | 2 ++
 components/commons.scss         | 2 +-
 components/font_icon/style.scss | 2 +-
 package.json                    | 2 +-
 5 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/.gitignore b/.gitignore
index bb9bc230a..57642d3c5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@ build
 lib
 node_modules
 npm-debug.log
+.idea
diff --git a/components/_globals.scss b/components/_globals.scss
index 25101a6c0..64a65d064 100644
--- a/components/_globals.scss
+++ b/components/_globals.scss
@@ -17,6 +17,8 @@ $color-accent-contrast: $color-dark-contrast !default;
 $unit: 1rem;
 
 // -- Fonts
+$font-icon-url: 'https://fonts.googleapis.com/icon?family=Material+Icons' !default;
+$font-roboto-url: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700' !default;
 $preferred-font: "Roboto", "Helvetica", "Arial", sans-serif !default;
 $font-size: 1.6 * $unit !default;
 $font-size-tiny: 1.2 * $unit !default;
diff --git a/components/commons.scss b/components/commons.scss
index 877c09973..2c8483bde 100644
--- a/components/commons.scss
+++ b/components/commons.scss
@@ -1,6 +1,6 @@
 @import "http://github.com/~normalize.css";
 @import "http://github.com/base";
-@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500,700);
+@import url(http://github.com/$font-roboto-url);
 
 html {
   font-size: 62.5%;
diff --git a/components/font_icon/style.scss b/components/font_icon/style.scss
index 184bd6094..77770b9a0 100644
--- a/components/font_icon/style.scss
+++ b/components/font_icon/style.scss
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
+@import url(http://github.com/$font-icon-url);
 
 %icon {
   display: inline-block;
diff --git a/package.json b/package.json
index e6076780d..7eb1753e4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-toolbox",
-  "version": "0.11.4",
+  "version": "0.11.5",
   "description": "A set of complementary tools to ReactJS.",
   "author": "React Toolbox Team (http://github.com/react-toolbox)",
   "contributors": [

From 7aec1852ee02a6f4d4aa46b87e0eac7eeda82d29 Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Tue, 10 Nov 2015 19:33:38 +0700
Subject: [PATCH 0012/1024] minor changes

---
 components/app/index.jsx          |  2 +-
 components/autocomplete/index.jsx | 13 ++++++-------
 components/button/index.jsx       |  2 +-
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/components/app/index.jsx b/components/app/index.jsx
index 8790234d0..4f1d4f232 100644
--- a/components/app/index.jsx
+++ b/components/app/index.jsx
@@ -8,7 +8,7 @@ const App = (props) => {
   }
 
   return (
-    <div className={className} data-react-toolbox='app'>
+    <div data-react-toolbox='app' className={className}>
       {props.children}
     </div>
   );
diff --git a/components/autocomplete/index.jsx b/components/autocomplete/index.jsx
index 1305c2d56..e757d3279 100644
--- a/components/autocomplete/index.jsx
+++ b/components/autocomplete/index.jsx
@@ -24,10 +24,10 @@ class Autocomplete extends React.Component {
   };
 
   static defaultProps = {
-      className: '',
-      direction: 'auto',
-      multiple: true,
-      source: {}
+    className: '',
+    direction: 'auto',
+    multiple: true,
+    source: {}
   };
 
   state = {
@@ -59,8 +59,7 @@ class Autocomplete extends React.Component {
   };
 
   handleQueryChange = (event) => {
-    const query = event.target.value;
-    this.setState({query});
+    this.setState({event: event.target.value});
   };
 
   handleQueryFocus = () => {
@@ -185,8 +184,8 @@ class Autocomplete extends React.Component {
         <Input
           ref='input'
           {...this.props}
-          label=''
           className={style.input}
+          label=''
           onBlur={this.handleQueryBlur}
           onChange={this.handleQueryChange}
           onFocus={this.handleQueryFocus}
diff --git a/components/button/index.jsx b/components/button/index.jsx
index 182e7a4b4..0526e6a90 100644
--- a/components/button/index.jsx
+++ b/components/button/index.jsx
@@ -51,8 +51,8 @@ class Button extends React.Component {
         data-react-toolbox='button'
         {...others}
         className={className}
-        onMouseDown={this.handleMouseDown}
         disabled={this.props.disabled || this.props.loading}
+        onMouseDown={this.handleMouseDown}
       >
         { ripple ? <Ripple ref='ripple' loading={loading}/> : null }
         { icon ? <FontIcon className={style.icon} value={icon}/> : null }

From 57d01094dc0001db21ce9e339b147db5da9ff699 Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Tue, 10 Nov 2015 20:27:00 +0700
Subject: [PATCH 0013/1024] Stateless DatePicker

---
 components/date_picker/dialog.jsx | 27 +++++++++----------
 components/date_picker/index.jsx  | 29 ++++++++++----------
 spec/components/pickers.jsx       | 44 ++++++++++++++++++-------------
 3 files changed, 54 insertions(+), 46 deletions(-)

diff --git a/components/date_picker/dialog.jsx b/components/date_picker/dialog.jsx
index 6d9f45b29..6936ae81a 100644
--- a/components/date_picker/dialog.jsx
+++ b/components/date_picker/dialog.jsx
@@ -6,26 +6,30 @@ import Dialog from '../dialog';
 
 class CalendarDialog extends React.Component {
   static propTypes = {
+    active: React.PropTypes.bool,
     initialDate: React.PropTypes.object,
-    onDateSelected: React.PropTypes.func
+    onCancel: React.PropTypes.func,
+    onChange: React.PropTypes.func,
+    onSelect: React.PropTypes.func
   };
 
   static defaultProps = {
+    active: false,
     initialDate: new Date()
   };
 
   state = {
-    active: false,
     date: this.props.initialDate,
     display: 'months',
     actions: [
-      { label: 'Cancel', className: style.button, onClick: this.onDateCancel.bind(this) },
-      { label: 'Ok', className: style.button, onClick: this.onDateSelected.bind(this) }
+      { label: 'Cancel', className: style.button, onClick: this.handleCancel.bind(this) },
+      { label: 'Ok', className: style.button, onClick: this.handleSelect.bind(this) }
     ]
   };
 
   handleCalendarChange = (date) => {
     this.setState({date, display: 'months'});
+    if (this.props.onChange) this.props.onChange(date);
   };
 
   displayMonths = () => {
@@ -36,17 +40,12 @@ class CalendarDialog extends React.Component {
     this.setState({display: 'years'});
   };
 
-  onDateCancel () {
-    this.setState({active: false});
-  }
-
-  onDateSelected () {
-    if (this.props.onDateSelected) this.props.onDateSelected(this.state.date);
-    this.setState({active: false});
+  handleCancel () {
+    if (this.props.onCancel) this.props.onCancel(this.state.date);
   }
 
-  show () {
-    this.setState({active: true});
+  handleSelect () {
+    if (this.props.onSelect) this.props.onSelect(this.state.date);
   }
 
   render () {
@@ -54,7 +53,7 @@ class CalendarDialog extends React.Component {
     const headerClassName = `${style.header} ${style[display]}`;
 
     return (
-      <Dialog active={this.state.active} type="custom" className={style.dialog} actions={this.state.actions}>
+      <Dialog active={this.props.active} type="custom" className={style.dialog} actions={this.state.actions}>
           <header className={headerClassName}>
             <span className={style.weekday}>
               {time.getFullDayOfWeek(this.state.date.getDay())}
diff --git a/components/date_picker/index.jsx b/components/date_picker/index.jsx
index ccb011b60..c7a4d5a0b 100644
--- a/components/date_picker/index.jsx
+++ b/components/date_picker/index.jsx
@@ -8,6 +8,7 @@ import style from './style';
 class DatePicker extends React.Component {
   static propTypes = {
     className: React.PropTypes.string,
+    onChange: React.PropTypes.func,
     value: React.PropTypes.object
   };
 
@@ -16,17 +17,22 @@ class DatePicker extends React.Component {
   };
 
   state = {
-    value: this.props.value
+    value: this.props.value,
+    dialog: false
   };
 
-  handleDateSelected = (value) => {
-    this.refs.input.setValue(this.formatDate(value));
-    this.setState({value});
+  handleCalendarCancel = () => {
+    this.setState({dialog: false});
+  };
+
+  handleCalendarChange = (value) => {
+    this.setState({dialog: false, value: value});
+    if (this.props.onChange) this.props.onChange(value);
   };
 
   handleMouseDown = (event) => {
     events.pauseEvent(event);
-    this.refs.dialog.show();
+    this.setState({dialog: true});
   };
 
   formatDate (date) {
@@ -47,20 +53,15 @@ class DatePicker extends React.Component {
         />
         <CalendarDialog
           ref='dialog'
+          active={this.state.dialog}
           initialDate={this.state.value}
-          onDateSelected={this.handleDateSelected}
+          onCancel={this.handleCalendarCancel}
+          onChange={this.handleCalendarChange}
+          onSelect={this.handleCalendarChange}
         />
       </div>
     );
   }
-
-  getValue () {
-    return this.state.value;
-  }
-
-  setValue (value) {
-    this.setState({value});
-  }
 }
 
 export default DatePicker;
diff --git a/spec/components/pickers.jsx b/spec/components/pickers.jsx
index b09116199..eaf476505 100644
--- a/spec/components/pickers.jsx
+++ b/spec/components/pickers.jsx
@@ -2,23 +2,31 @@ import React from 'react';
 import DatePicker from '../../components/date_picker';
 import TimePicker from '../../components/time_picker';
 
-const PickersTest = () => {
-  const datetime = new Date(1995, 11, 17);
-  datetime.setHours(17);
-  datetime.setMinutes(28);
-
-  return (
-    <section>
-      <h5>Pickers</h5>
-      <p>Date pickers and time pickers with Material flavour.</p>
-
-      <DatePicker />
-      <DatePicker value={datetime} />
-
-      <TimePicker />
-      <TimePicker value={datetime} format='ampm' />
-    </section>
-  );
-};
+const datetime = new Date(1995, 11, 17);
+datetime.setHours(17);
+datetime.setMinutes(28);
+
+class PickersTest extends React.Component {
+
+  handleDatePickerChange = (value) => {
+    console.log('handleDatePickerChange', value);
+  };
+
+  render () {
+    return (
+      <section>
+        <h5>Pickers</h5>
+        <p>Date pickers and time pickers with Material flavour.</p>
+
+        <DatePicker onChange={this.handleDatePickerChange}/>
+        <DatePicker value={datetime} />
+
+        <TimePicker />
+        <TimePicker value={datetime} format='ampm' />
+      </section>
+    );
+  }
+
+}
 
 export default PickersTest;

From 2130057d56bcae245fe73c23872575adfa46a7fb Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Tue, 10 Nov 2015 21:07:14 +0700
Subject: [PATCH 0014/1024] Stateless TimePicker

---
 components/time_picker/dialog.jsx | 30 +++++++++++++-----------------
 components/time_picker/index.jsx  | 31 +++++++++++++++----------------
 spec/components/pickers.jsx       | 10 +++++++---
 3 files changed, 35 insertions(+), 36 deletions(-)

diff --git a/components/time_picker/dialog.jsx b/components/time_picker/dialog.jsx
index 8d8534518..f00018f3e 100644
--- a/components/time_picker/dialog.jsx
+++ b/components/time_picker/dialog.jsx
@@ -6,30 +6,32 @@ import Dialog from '../dialog';
 
 class TimePickerDialog extends React.Component {
   static propTypes = {
+    active: React.PropTypes.bool,
     className: React.PropTypes.string,
     initialTime: React.PropTypes.object,
     format: React.PropTypes.oneOf(['24hr', 'ampm']),
-    onTimeSelected: React.PropTypes.func
+    onCancel: React.PropTypes.func,
+    onSelect: React.PropTypes.func
   };
 
   static defaultProps = {
+    active: false,
     className: '',
     initialTime: new Date(),
     format: '24hr'
   };
 
   state = {
-    active: false,
     display: 'hours',
     time: this.props.initialTime,
     actions: [
-      { label: 'Cancel', className: style.button, onClick: this.onTimeCancel.bind(this) },
-      { label: 'Ok', className: style.button, onClick: this.onTimeSelected.bind(this) }
+      { label: 'Cancel', className: style.button, onClick: this.handleCancel.bind(this) },
+      { label: 'Ok', className: style.button, onClick: this.handleSelect.bind(this) }
     ]
   };
 
-  handleClockChange = (newTime) => {
-    this.setState({time: newTime});
+  handleClockChange = (value) => {
+    this.setState({time: value});
   };
 
   displayMinutes = () => {
@@ -44,18 +46,12 @@ class TimePickerDialog extends React.Component {
     this.refs.clock.toggleTimeMode();
   };
 
-  onTimeCancel () {
-    this.setState({active: false});
-  }
-
-  onTimeSelected () {
-    if (this.props.onTimeSelected) this.props.onTimeSelected(this.state.time);
-    this.setState({active: false});
+  handleCancel () {
+    if (this.props.onCancel) this.props.onCancel();
   }
 
-  show () {
-    this.setState({active: true});
-    setTimeout(this.refs.clock.handleCalculateShape, 1000);
+  handleSelect () {
+    if (this.props.onSelect) this.props.onSelect(this.state.time);
   }
 
   formatHours () {
@@ -83,7 +79,7 @@ class TimePickerDialog extends React.Component {
     const className = `${style.dialog} ${style[display]} ${style[format]}`;
 
     return (
-      <Dialog className={className} active={this.state.active} type="custom" actions={this.state.actions}>
+      <Dialog className={className} active={this.props.active} type="custom" actions={this.state.actions}>
         <header className={style.header}>
           <span className={style.hours} onClick={this.displayHours}>
             { ('0' + this.formatHours()).slice(-2) }
diff --git a/components/time_picker/index.jsx b/components/time_picker/index.jsx
index f0417aed0..8eee9d0b5 100644
--- a/components/time_picker/index.jsx
+++ b/components/time_picker/index.jsx
@@ -16,17 +16,22 @@ class TimePicker extends React.Component {
   };
 
   state = {
-    value: this.props.value
+    value: this.props.value,
+    dialog: false
   };
 
-  onTimeSelected = (newTime) => {
-    this.refs.input.setValue(time.formatTime(newTime, this.props.format));
-    this.setState({value: newTime});
+  handleTimeCancel = () => {
+    this.setState({dialog: false});
   };
 
-  openTimeDialog = (event) => {
+  handleTimeChange = (value) => {
+    this.setState({dialog: false, value: value});
+    if (this.props.onChange) this.props.onChange(value);
+  };
+
+  handleMouseDown = (event) => {
     events.pauseEvent(event);
-    this.refs.dialog.show();
+    this.setState({dialog: true});
   };
 
   formatTime () {
@@ -41,7 +46,7 @@ class TimePicker extends React.Component {
         <Input
           ref='input'
           className={style.input}
-          onMouseDown={this.openTimeDialog}
+          onMouseDown={this.handleMouseDown}
           placeholder='Pick up time'
           readOnly={true}
           type='text'
@@ -49,21 +54,15 @@ class TimePicker extends React.Component {
         />
         <TimeDialog
           ref='dialog'
+          active={this.state.dialog}
           format={this.props.format}
           initialTime={this.state.value}
-          onTimeSelected={this.onTimeSelected}
+          onCancel={this.handleTimeCancel}
+          onSelect={this.handleTimeChange}
         />
       </div>
     );
   }
-
-  getValue () {
-    return this.state.value;
-  }
-
-  setValue (value) {
-    this.setState({value});
-  }
 }
 
 export default TimePicker;
diff --git a/spec/components/pickers.jsx b/spec/components/pickers.jsx
index eaf476505..fcbe7a0a2 100644
--- a/spec/components/pickers.jsx
+++ b/spec/components/pickers.jsx
@@ -8,8 +8,12 @@ datetime.setMinutes(28);
 
 class PickersTest extends React.Component {
 
-  handleDatePickerChange = (value) => {
-    console.log('handleDatePickerChange', value);
+  handleDatePickerChange = (date) => {
+    console.log('handleDatePickerChange', date);
+  };
+
+  handleTimePickerChange = (time) => {
+    console.log('handleTimePickerChange', time);
   };
 
   render () {
@@ -21,7 +25,7 @@ class PickersTest extends React.Component {
         <DatePicker onChange={this.handleDatePickerChange}/>
         <DatePicker value={datetime} />
 
-        <TimePicker />
+        <TimePicker onChange={this.handleTimePickerChange}/>
         <TimePicker value={datetime} format='ampm' />
       </section>
     );

From 49acc411d4e0e2521a30b7c13e623a7a041ddd7d Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Tue, 10 Nov 2015 21:07:40 +0700
Subject: [PATCH 0015/1024] Minor changes

---
 components/date_picker/dialog.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/date_picker/dialog.jsx b/components/date_picker/dialog.jsx
index 6936ae81a..e11f17eb2 100644
--- a/components/date_picker/dialog.jsx
+++ b/components/date_picker/dialog.jsx
@@ -27,9 +27,9 @@ class CalendarDialog extends React.Component {
     ]
   };
 
-  handleCalendarChange = (date) => {
-    this.setState({date, display: 'months'});
-    if (this.props.onChange) this.props.onChange(date);
+  handleCalendarChange = (value) => {
+    this.setState({date: value, display: 'months'});
+    if (this.props.onChange) this.props.onChange(value);
   };
 
   displayMonths = () => {
@@ -41,7 +41,7 @@ class CalendarDialog extends React.Component {
   };
 
   handleCancel () {
-    if (this.props.onCancel) this.props.onCancel(this.state.date);
+    if (this.props.onCancel) this.props.onCancel();
   }
 
   handleSelect () {

From 653150c3967247fe25da5116049edc1796742129 Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Tue, 10 Nov 2015 21:27:03 +0700
Subject: [PATCH 0016/1024] change documentation

---
 components/date_picker/readme.md | 8 +-------
 components/time_picker/readme.md | 8 +-------
 2 files changed, 2 insertions(+), 14 deletions(-)

diff --git a/components/date_picker/readme.md b/components/date_picker/readme.md
index 58653a0f0..c9a0204fd 100644
--- a/components/date_picker/readme.md
+++ b/components/date_picker/readme.md
@@ -17,11 +17,5 @@ const DatePickerTest = () => (
 | Name          | Type    | Default         | Description|
 |:-----|:-----|:-----|:-----|
 | `className`     | `String`        |     `''`            | Sets a class to give customized styles to the time picker.|
+| `onChange`       | `Function`       |                | Callback called when the picker value is changed.|
 | `value`         | `Date`    |                 | Date object with the currently selected date. |
-
-## Methods
-
-The DatePicker is a very easy component from the top level API but quite complex inside. It has state to keep the currently viewed date and the currently selected value.
-
-- `getValue` is used to retrieve the current value.
-- `setValue` to force a new value.
diff --git a/components/time_picker/readme.md b/components/time_picker/readme.md
index 354f5ad44..16aa75fcc 100644
--- a/components/time_picker/readme.md
+++ b/components/time_picker/readme.md
@@ -21,11 +21,5 @@ const TimePickerTest = () => (
 |:-----|:-----|:-----|:-----|
 | `className`  | `String`    |     `''`            | Sets a class to give customized styles.|
 | `format`    | `String`  | `24hr`          | Format to display the clock. It can be `24hr` or `ampm`.|
+| `onChange`       | `Function`       |                | Callback called when the picker value is changed.|
 | `value`     | `Date`    |   | Datetime object with currrently selected time |
-
-## Methods
-
-The TimePicker is a very easy component from the top level API but quite complex inside. It has state to keep the the currently selected value.
-
-- `getValue` is used to retrieve the current value.
-- `setValue` to force a new value.

From 24c4c395072ca114d466c56b2d8fde640eabee6f Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 10 Nov 2015 19:58:14 +0100
Subject: [PATCH 0017/1024] Bugfix: avoid delay in slider knob

---
 components/slider/style.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/slider/style.scss b/components/slider/style.scss
index af75414d2..4b0276316 100644
--- a/components/slider/style.scss
+++ b/components/slider/style.scss
@@ -161,7 +161,6 @@
       .innerknob {
         width: 100%;
         height: 100%;
-        transition-delay: 100ms;
         transform: translateZ(0);
       }
     }

From 476729f2b829583a259094ccece78ba196120086 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 10 Nov 2015 21:39:47 +0100
Subject: [PATCH 0018/1024] Pure timepicker, fixes #33

---
 components/time_picker/clock/index.jsx  | 35 +++++---------
 components/time_picker/clock/style.scss |  1 +
 components/time_picker/dialog.jsx       | 64 ++++++++++++-------------
 components/time_picker/index.jsx        | 44 ++++++++---------
 spec/components/pickers.jsx             | 14 ++++--
 5 files changed, 73 insertions(+), 85 deletions(-)

diff --git a/components/time_picker/clock/index.jsx b/components/time_picker/clock/index.jsx
index 388579781..2c53a5cce 100644
--- a/components/time_picker/clock/index.jsx
+++ b/components/time_picker/clock/index.jsx
@@ -9,7 +9,7 @@ class Clock extends React.Component {
     className: React.PropTypes.string,
     display: React.PropTypes.oneOf(['hours', 'minutes']),
     format: React.PropTypes.oneOf(['24hr', 'ampm']),
-    initialTime: React.PropTypes.object,
+    time: React.PropTypes.object,
     onChange: React.PropTypes.func
   };
 
@@ -17,13 +17,12 @@ class Clock extends React.Component {
     className: '',
     display: 'hours',
     format: '24hr',
-    initialTime: new Date()
+    time: new Date()
   };
 
   state = {
     center: {x: null, y: null},
-    radius: 0,
-    time: this.props.initialTime
+    radius: 0
   };
 
   componentDidMount () {
@@ -36,18 +35,14 @@ class Clock extends React.Component {
   }
 
   handleHourChange = (hours) => {
-    if (this.state.time.getHours() !== hours) {
-      const newTime = time.setHours(this.state.time, this.adaptHourToFormat(hours));
-      this.setState({time: newTime});
-      if (this.props.onChange) this.props.onChange(newTime);
+    if (this.props.time.getHours() !== hours) {
+      this.props.onChange(time.setHours(this.props.time, this.adaptHourToFormat(hours)));
     }
   };
 
   handleMinuteChange = (minutes) => {
-    if (this.state.time.getMinutes() !== minutes) {
-      const newTime = time.setMinutes(this.state.time, minutes);
-      this.setState({time: newTime});
-      if (this.props.onChange) this.props.onChange(newTime);
+    if (this.props.time.getMinutes() !== minutes) {
+      this.props.onChange(time.setMinutes(this.props.time, minutes));
     }
   };
 
@@ -59,15 +54,9 @@ class Clock extends React.Component {
     });
   };
 
-  toggleTimeMode () {
-    const newTime = time.toggleTimeMode(this.state.time);
-    this.setState({time: newTime});
-    if (this.props.onChange) this.props.onChange(newTime);
-  }
-
   adaptHourToFormat (hour) {
     if (this.props.format === 'ampm') {
-      if (time.getTimeMode(this.state.time) === 'pm') {
+      if (time.getTimeMode(this.props.time) === 'pm') {
         return hour < 12 ? hour + 12 : hour;
       } else {
         return hour === 12 ? 0 : hour;
@@ -84,7 +73,7 @@ class Clock extends React.Component {
         format={this.props.format}
         onChange={this.handleHourChange}
         radius={this.state.radius}
-        selected={this.state.time.getHours()}
+        selected={this.props.time.getHours()}
         spacing={this.state.radius * 0.18}
       />
     );
@@ -96,7 +85,7 @@ class Clock extends React.Component {
         center={this.state.center}
         onChange={this.handleMinuteChange}
         radius={this.state.radius}
-        selected={this.state.time.getMinutes()}
+        selected={this.props.time.getMinutes()}
         spacing={this.state.radius * 0.18}
       />
     );
@@ -106,8 +95,8 @@ class Clock extends React.Component {
     return (
       <div data-react-toolbox='clock' className={style.root}>
         <div ref='wrapper' className={style.wrapper} style={{height: this.state.radius * 2}}>
-          { this.props.display === 'hours' ? this.renderHours() : '' }
-          { this.props.display === 'minutes' ? this.renderMinutes() : '' }
+          { this.props.display === 'hours' ? this.renderHours() : null }
+          { this.props.display === 'minutes' ? this.renderMinutes() : null }
         </div>
       </div>
     );
diff --git a/components/time_picker/clock/style.scss b/components/time_picker/clock/style.scss
index 9feac7738..ff041663c 100644
--- a/components/time_picker/clock/style.scss
+++ b/components/time_picker/clock/style.scss
@@ -7,6 +7,7 @@
 
 .wrapper {
   position: relative;
+  z-index: $z-index-high;
   background-color: $color-divider;
   border-radius: 50%;
 }
diff --git a/components/time_picker/dialog.jsx b/components/time_picker/dialog.jsx
index f00018f3e..987a3025a 100644
--- a/components/time_picker/dialog.jsx
+++ b/components/time_picker/dialog.jsx
@@ -8,57 +8,56 @@ class TimePickerDialog extends React.Component {
   static propTypes = {
     active: React.PropTypes.bool,
     className: React.PropTypes.string,
-    initialTime: React.PropTypes.object,
     format: React.PropTypes.oneOf(['24hr', 'ampm']),
-    onCancel: React.PropTypes.func,
-    onSelect: React.PropTypes.func
+    onDismiss: React.PropTypes.func,
+    onSelect: React.PropTypes.func,
+    value: React.PropTypes.object
   };
 
   static defaultProps = {
     active: false,
     className: '',
-    initialTime: new Date(),
-    format: '24hr'
+    format: '24hr',
+    value: new Date()
   };
 
   state = {
     display: 'hours',
-    time: this.props.initialTime,
-    actions: [
-      { label: 'Cancel', className: style.button, onClick: this.handleCancel.bind(this) },
-      { label: 'Ok', className: style.button, onClick: this.handleSelect.bind(this) }
-    ]
+    displayTime: this.props.value
   };
 
-  handleClockChange = (value) => {
-    this.setState({time: value});
-  };
+  componentWillUpdate (nextProps) {
+    if (!this.props.active && nextProps.active) {
+      setTimeout(this.refs.clock.handleCalculateShape, 1000);
+    }
+  }
 
-  displayMinutes = () => {
-    this.setState({display: 'minutes'});
+  handleClockChange = (value) => {
+    this.setState({displayTime: value});
   };
 
-  displayHours = () => {
-    this.setState({display: 'hours'});
+  handleSelect = () => {
+    this.props.onSelect(this.state.displayTime);
   };
 
   toggleTimeMode = () => {
-    this.refs.clock.toggleTimeMode();
+    this.setState({displayTime: time.toggleTimeMode(this.state.displayTime)});
   };
 
-  handleCancel () {
-    if (this.props.onCancel) this.props.onCancel();
-  }
+  switchDisplay = (display) => {
+    this.setState({display});
+  };
 
-  handleSelect () {
-    if (this.props.onSelect) this.props.onSelect(this.state.time);
-  }
+  actions = [
+    { label: 'Cancel', className: style.button, onClick: this.props.onDismiss },
+    { label: 'Ok', className: style.button, onClick: this.handleSelect }
+  ];
 
   formatHours () {
     if (this.props.format === 'ampm') {
-      return this.state.time.getHours() % 12 || 12;
+      return this.state.displayTime.getHours() % 12 || 12;
     } else {
-      return this.state.time.getHours();
+      return this.state.displayTime.getHours();
     }
   }
 
@@ -75,18 +74,17 @@ class TimePickerDialog extends React.Component {
 
   render () {
     const display = `display-${this.state.display}`;
-    const format = `format-${time.getTimeMode(this.state.time)}`;
+    const format = `format-${time.getTimeMode(this.state.displayTime)}`;
     const className = `${style.dialog} ${style[display]} ${style[format]}`;
-
     return (
-      <Dialog className={className} active={this.props.active} type="custom" actions={this.state.actions}>
+      <Dialog active={this.props.active} className={className} actions={this.actions}>
         <header className={style.header}>
-          <span className={style.hours} onClick={this.displayHours}>
+          <span className={style.hours} onClick={this.switchDisplay.bind(this, 'hours')}>
             { ('0' + this.formatHours()).slice(-2) }
           </span>
           <span className={style.separator}>:</span>
-          <span className={style.minutes} onClick={this.displayMinutes}>
-            { ('0' + this.state.time.getMinutes()).slice(-2) }
+          <span className={style.minutes} onClick={this.switchDisplay.bind(this, 'minutes')}>
+            { ('0' + this.state.displayTime.getMinutes()).slice(-2) }
           </span>
           { this.renderAMPMLabels() }
         </header>
@@ -94,7 +92,7 @@ class TimePickerDialog extends React.Component {
           ref='clock'
           display={this.state.display}
           format={this.props.format}
-          initialTime={this.props.initialTime}
+          time={this.state.displayTime}
           onChange={this.handleClockChange}
         />
       </Dialog>
diff --git a/components/time_picker/index.jsx b/components/time_picker/index.jsx
index 8eee9d0b5..62036ef86 100644
--- a/components/time_picker/index.jsx
+++ b/components/time_picker/index.jsx
@@ -8,6 +8,7 @@ import TimeDialog from './dialog';
 class TimePicker extends React.Component {
   static propTypes = {
     format: React.PropTypes.oneOf(['24hr', 'ampm']),
+    onChange: React.PropTypes.func,
     value: React.PropTypes.object
   };
 
@@ -16,49 +17,42 @@ class TimePicker extends React.Component {
   };
 
   state = {
-    value: this.props.value,
-    dialog: false
+    active: false
   };
 
-  handleTimeCancel = () => {
-    this.setState({dialog: false});
+  handleDismiss = () => {
+    this.setState({active: false});
   };
 
-  handleTimeChange = (value) => {
-    this.setState({dialog: false, value: value});
-    if (this.props.onChange) this.props.onChange(value);
-  };
-
-  handleMouseDown = (event) => {
+  handleInputMouseDown = (event) => {
     events.pauseEvent(event);
-    this.setState({dialog: true});
+    this.setState({active: true});
   };
 
-  formatTime () {
-    if (this.state.value) {
-      return time.formatTime(this.state.value, this.props.format);
-    }
-  }
+  handleSelect = (value) => {
+    this.props.onChange(value);
+    this.setState({active: false});
+  };
 
   render () {
+    const { value, format } = this.props;
+    const formattedTime = value ? time.formatTime(value, format) : null;
     return (
       <div data-react-toolbox='time-picker'>
         <Input
-          ref='input'
           className={style.input}
-          onMouseDown={this.handleMouseDown}
+          onMouseDown={this.handleInputMouseDown}
           placeholder='Pick up time'
           readOnly={true}
           type='text'
-          value={this.formatTime()}
+          value={formattedTime}
         />
         <TimeDialog
-          ref='dialog'
-          active={this.state.dialog}
-          format={this.props.format}
-          initialTime={this.state.value}
-          onCancel={this.handleTimeCancel}
-          onSelect={this.handleTimeChange}
+          active={this.state.active}
+          format={format}
+          onDismiss={this.handleDismiss}
+          onSelect={this.handleSelect}
+          value={this.props.value}
         />
       </div>
     );
diff --git a/spec/components/pickers.jsx b/spec/components/pickers.jsx
index fcbe7a0a2..8587ec14f 100644
--- a/spec/components/pickers.jsx
+++ b/spec/components/pickers.jsx
@@ -7,13 +7,19 @@ datetime.setHours(17);
 datetime.setMinutes(28);
 
 class PickersTest extends React.Component {
+  state = {
+    time1: undefined,
+    time2: datetime
+  };
 
   handleDatePickerChange = (date) => {
     console.log('handleDatePickerChange', date);
   };
 
-  handleTimePickerChange = (time) => {
-    console.log('handleTimePickerChange', time);
+  handleTimeChange = (item, value) => {
+    const newState = {};
+    newState[item] = value;
+    this.setState(newState);
   };
 
   render () {
@@ -25,8 +31,8 @@ class PickersTest extends React.Component {
         <DatePicker onChange={this.handleDatePickerChange}/>
         <DatePicker value={datetime} />
 
-        <TimePicker onChange={this.handleTimePickerChange}/>
-        <TimePicker value={datetime} format='ampm' />
+        <TimePicker value={this.state.time1} onChange={this.handleTimeChange.bind(this, 'time1')} />
+        <TimePicker value={this.state.time2} format='ampm' onChange={this.handleTimeChange.bind(this, 'time2')} />
       </section>
     );
   }

From 5fc135961bd2c3a06ab24f0e49c53996fe103964 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 11 Nov 2015 01:29:42 +0100
Subject: [PATCH 0019/1024] Improve pickers

---
 components/date_picker/index.jsx  | 40 +++++++++++++------------------
 components/time_picker/dialog.jsx |  2 --
 components/time_picker/index.jsx  |  4 +++-
 spec/components/pickers.jsx       | 16 +++++--------
 spec/root.jsx                     | 19 ---------------
 5 files changed, 26 insertions(+), 55 deletions(-)

diff --git a/components/date_picker/index.jsx b/components/date_picker/index.jsx
index c7a4d5a0b..8ca2718e1 100644
--- a/components/date_picker/index.jsx
+++ b/components/date_picker/index.jsx
@@ -17,47 +17,41 @@ class DatePicker extends React.Component {
   };
 
   state = {
-    value: this.props.value,
-    dialog: false
+    active: false
   };
 
-  handleCalendarCancel = () => {
-    this.setState({dialog: false});
+  handleDismiss = () => {
+    this.setState({active: false});
   };
 
-  handleCalendarChange = (value) => {
-    this.setState({dialog: false, value: value});
-    if (this.props.onChange) this.props.onChange(value);
-  };
-
-  handleMouseDown = (event) => {
+  handleInputMouseDown = (event) => {
     events.pauseEvent(event);
-    this.setState({dialog: true});
+    this.setState({active: true});
   };
 
-  formatDate (date) {
-    return `${date.getDate()} ${time.getFullMonth(date)} ${date.getFullYear()}`;
-  }
+  handleSelect = (value) => {
+    if (this.props.onChange) this.props.onChange(value);
+    this.setState({active: false});
+  };
 
   render () {
+    const { value } = this.props;
+    const date = value ? `${value.getDate()} ${time.getFullMonth(value)} ${value.getFullYear()}` : null;
     return (
       <div data-toolbox='date-picker'>
         <Input
-          ref='input'
           className={style.input}
-          onMouseDown={this.handleMouseDown}
+          onMouseDown={this.handleInputMouseDown}
           placeholder='Pick up date'
           readOnly={true}
           type='text'
-          value={this.state.value ? this.formatDate(this.state.value) : null}
+          value={date}
         />
         <CalendarDialog
-          ref='dialog'
-          active={this.state.dialog}
-          initialDate={this.state.value}
-          onCancel={this.handleCalendarCancel}
-          onChange={this.handleCalendarChange}
-          onSelect={this.handleCalendarChange}
+          active={this.state.active}
+          onDismiss={this.handleDismiss}
+          onSelect={this.handleSelect}
+          value={this.props.value}
         />
       </div>
     );
diff --git a/components/time_picker/dialog.jsx b/components/time_picker/dialog.jsx
index 987a3025a..a17b311b9 100644
--- a/components/time_picker/dialog.jsx
+++ b/components/time_picker/dialog.jsx
@@ -7,7 +7,6 @@ import Dialog from '../dialog';
 class TimePickerDialog extends React.Component {
   static propTypes = {
     active: React.PropTypes.bool,
-    className: React.PropTypes.string,
     format: React.PropTypes.oneOf(['24hr', 'ampm']),
     onDismiss: React.PropTypes.func,
     onSelect: React.PropTypes.func,
@@ -16,7 +15,6 @@ class TimePickerDialog extends React.Component {
 
   static defaultProps = {
     active: false,
-    className: '',
     format: '24hr',
     value: new Date()
   };
diff --git a/components/time_picker/index.jsx b/components/time_picker/index.jsx
index 62036ef86..693df6608 100644
--- a/components/time_picker/index.jsx
+++ b/components/time_picker/index.jsx
@@ -7,12 +7,14 @@ import TimeDialog from './dialog';
 
 class TimePicker extends React.Component {
   static propTypes = {
+    className: React.PropTypes.string,
     format: React.PropTypes.oneOf(['24hr', 'ampm']),
     onChange: React.PropTypes.func,
     value: React.PropTypes.object
   };
 
   static defaultProps = {
+    className: '',
     format: '24hr'
   };
 
@@ -30,7 +32,7 @@ class TimePicker extends React.Component {
   };
 
   handleSelect = (value) => {
-    this.props.onChange(value);
+    if (this.props.onChange) this.props.onChange(value);
     this.setState({active: false});
   };
 
diff --git a/spec/components/pickers.jsx b/spec/components/pickers.jsx
index 8587ec14f..ac0b82d3f 100644
--- a/spec/components/pickers.jsx
+++ b/spec/components/pickers.jsx
@@ -8,15 +8,11 @@ datetime.setMinutes(28);
 
 class PickersTest extends React.Component {
   state = {
-    time1: undefined,
+    date2: datetime,
     time2: datetime
   };
 
-  handleDatePickerChange = (date) => {
-    console.log('handleDatePickerChange', date);
-  };
-
-  handleTimeChange = (item, value) => {
+  handleChange = (item, value) => {
     const newState = {};
     newState[item] = value;
     this.setState(newState);
@@ -28,11 +24,11 @@ class PickersTest extends React.Component {
         <h5>Pickers</h5>
         <p>Date pickers and time pickers with Material flavour.</p>
 
-        <DatePicker onChange={this.handleDatePickerChange}/>
-        <DatePicker value={datetime} />
+        <DatePicker value={this.state.date1} onChange={this.handleChange.bind(this, 'date1')} />
+        <DatePicker value={this.state.date2} onChange={this.handleChange.bind(this, 'date2')} />
 
-        <TimePicker value={this.state.time1} onChange={this.handleTimeChange.bind(this, 'time1')} />
-        <TimePicker value={this.state.time2} format='ampm' onChange={this.handleTimeChange.bind(this, 'time2')} />
+        <TimePicker value={this.state.time1} onChange={this.handleChange.bind(this, 'time1')} />
+        <TimePicker value={this.state.time2} format='ampm' onChange={this.handleChange.bind(this, 'time2')} />
       </section>
     );
   }
diff --git a/spec/root.jsx b/spec/root.jsx
index bbf82ebd4..1cf2ee7f3 100644
--- a/spec/root.jsx
+++ b/spec/root.jsx
@@ -45,26 +45,7 @@ const Root = () => (
       />
     </AppBarToolbox>
 
-    <Autocomplete />
-    <Button />
-    <Card />
-    <Checkbox />
-    <Dialog />
-    <Drawer />
-    <Dropdown />
-    <IconMenu />
-    <Input />
-    <List />
-    <Menu />
     <Pickers />
-    <Progress />
-    <Radio />
-    <Slider />
-    <Snackbar />
-    <Switch />
-    <Table />
-    <Tabs />
-    <Tooltip />
   </App>
 );
 

From 0dd4bb6815dfd195662f2f0aac46ccfad1111898 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 11 Nov 2015 01:31:37 +0100
Subject: [PATCH 0020/1024] Restore root and remove missing console log

---
 components/slider/index.jsx |  1 -
 spec/root.jsx               | 21 +++++++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/components/slider/index.jsx b/components/slider/index.jsx
index 258541b96..1fbe6d699 100644
--- a/components/slider/index.jsx
+++ b/components/slider/index.jsx
@@ -229,7 +229,6 @@ class Slider extends React.Component {
     if (this.props.editable) className += ` ${style.editable}`;
     if (this.props.pinned) className += ` ${style.pinned}`;
     if (this.state.pressed) className += ` ${style.pressed}`;
-    console.log(this.props.value, this.props.min);
     if (this.props.value === this.props.min) className += ` ${style.ring}`;
 
     return (
diff --git a/spec/root.jsx b/spec/root.jsx
index 1cf2ee7f3..cdddf7624 100644
--- a/spec/root.jsx
+++ b/spec/root.jsx
@@ -45,6 +45,27 @@ const Root = () => (
       />
     </AppBarToolbox>
 
+    <Autocomplete />
+    <Button />
+    <Card />
+    <Checkbox />
+    <Dialog />
+    <Drawer />
+    <Dropdown />
+    <IconMenu />
+    <Input />
+    <List />
+    <Menu />
+    <Pickers />
+    <Progress />
+    <Radio />
+    <Slider />
+    <Snackbar />
+    <Switch />
+    <Table />
+    <Tabs />
+    <Tooltip />
+
     <Pickers />
   </App>
 );

From bcec735df71dc3ec0651d8e4d183891f5df4a897 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 11 Nov 2015 01:32:46 +0100
Subject: [PATCH 0021/1024] Delete repeated pickers in spec

---
 spec/root.jsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/spec/root.jsx b/spec/root.jsx
index cdddf7624..bbf82ebd4 100644
--- a/spec/root.jsx
+++ b/spec/root.jsx
@@ -65,8 +65,6 @@ const Root = () => (
     <Table />
     <Tabs />
     <Tooltip />
-
-    <Pickers />
   </App>
 );
 

From 42b949694d1125a39a663023e31e8be5661b7f32 Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Wed, 11 Nov 2015 09:09:08 +0700
Subject: [PATCH 0022/1024] Pure <Tabs>

---
 components/tabs/tab.jsx  |  2 +-
 components/tabs/tabs.jsx | 16 +++-------------
 spec/components/tabs.jsx | 39 ++++++++++++++++++++++++++-------------
 3 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/components/tabs/tab.jsx b/components/tabs/tab.jsx
index bfc9e9fac..b5ce8247d 100644
--- a/components/tabs/tab.jsx
+++ b/components/tabs/tab.jsx
@@ -17,7 +17,7 @@ class Tab extends React.Component {
   };
 
   componentDidMount () {
-    this.active(this.props.active);
+    if (this.props.active) this.active(this.props.active);
   }
 
   componentWillReceiveProps (next_props) {
diff --git a/components/tabs/tabs.jsx b/components/tabs/tabs.jsx
index 46d4d2d3a..a230b9046 100644
--- a/components/tabs/tabs.jsx
+++ b/components/tabs/tabs.jsx
@@ -20,16 +20,13 @@ class Tabs extends React.Component {
 
   componentDidMount () {
     setTimeout(() => {
-      this.setState({pointer: this._pointerPosition(this.state.index)});
+      this.setState({pointer: this._pointerPosition(this.props.index)});
     }, 20);
   }
 
   componentWillReceiveProps (next_props) {
     const index = next_props.index || this.state.index;
-    this.setState({
-      index,
-      pointer: this._pointerPosition(index)
-    });
+    this.setState({ index, pointer: this._pointerPosition(index) });
   }
 
   _pointerPosition (index = 0) {
@@ -48,7 +45,7 @@ class Tabs extends React.Component {
       index,
       pointer: this._pointerPosition(index)
     });
-    if (this.props.onChange) this.props.onChange(this);
+    if (this.props.onChange) this.props.onChange(index);
   };
 
   renderLabels (labels) {
@@ -91,13 +88,6 @@ class Tabs extends React.Component {
       </div>
     );
   }
-
-  active (value) {
-    this.setState({active: value});
-    if (this.props.onActive && value) {
-      this.props.onActive(this);
-    }
-  }
 }
 
 export default Tabs;
diff --git a/spec/components/tabs.jsx b/spec/components/tabs.jsx
index 62b585733..09405dce1 100644
--- a/spec/components/tabs.jsx
+++ b/spec/components/tabs.jsx
@@ -1,19 +1,32 @@
 import React from 'react';
 import { Tabs, Tab } from '../../components/tabs';
 
-const TabsTest = () => (
-  <section>
-    <h5>Tabs</h5>
-    <p>This tabs can be disabled or hidden</p>
+class TabsTest extends React.Component {
 
-    <Tabs>
-        <Tab label='Primary'><small>Primary content</small></Tab>
-        <Tab label='Secondary'><small>Secondary content</small></Tab>
-        <Tab label='Third' disabled><small>Disabled content</small></Tab>
-        <Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
-        <Tab label='Fifth'><small>Fifth content</small></Tab>
-    </Tabs>
-  </section>
-);
+  state = {
+    index: 1
+  };
+
+  handleTabsOnChange = (index) => {
+    console.log('handleTabsOnChange', index);
+  };
+
+  render () {
+    return (
+      <section>
+        <h5>Tabs</h5>
+        <p>This tabs can be disabled or hidden</p>
+
+        <Tabs index={this.state.index} onChange={this.handleTabsOnChange}>
+          <Tab label='Primary'><small>Primary content</small></Tab>
+          <Tab label='Secondary'><small>Secondary content</small></Tab>
+          <Tab label='Third' disabled><small>Disabled content</small></Tab>
+          <Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
+          <Tab label='Fifth'><small>Fifth content</small></Tab>
+        </Tabs>
+      </section>
+    );
+  }
+}
 
 export default TabsTest;

From 9d7eebd76744950948c29390053ee9b0e4861163 Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Wed, 11 Nov 2015 09:13:46 +0700
Subject: [PATCH 0023/1024] Next version

---
 spec/root.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spec/root.jsx b/spec/root.jsx
index bbf82ebd4..7cfc4d86c 100644
--- a/spec/root.jsx
+++ b/spec/root.jsx
@@ -35,7 +35,7 @@ const _hrefProject = () => {
 const Root = () => (
   <App className={style.app}>
     <AppBarToolbox fixed flat className={style.appbar}>
-      <h1>React Toolbox <small>Spec 0.11.2</small></h1>
+      <h1>React Toolbox <small>Spec 0.11.5</small></h1>
       <ButtonToolbox
         accent
         className={style.github}

From 0fe79fdd2f3595d3135934e8879639df7ec8fb87 Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Wed, 11 Nov 2015 10:07:22 +0700
Subject: [PATCH 0024/1024] Pure <Table> and improve events.

---
 components/table/index.jsx                    | 56 +++++++++----------
 components/table/readme.md                    |  7 ---
 .../main/modules/examples/table_example_1.txt |  4 +-
 spec/components/table.jsx                     | 12 ++--
 4 files changed, 33 insertions(+), 46 deletions(-)

diff --git a/components/table/index.jsx b/components/table/index.jsx
index ee161ba6e..827953888 100644
--- a/components/table/index.jsx
+++ b/components/table/index.jsx
@@ -22,9 +22,9 @@ class Table extends React.Component {
   };
 
   state = {
+    all: false,
     dataSource: utils.cloneObject(this.props.dataSource),
-    selected: false,
-    selected_rows: []
+    selected_index: []
   };
 
   componentWillReceiveProps = (next_props) => {
@@ -36,29 +36,29 @@ class Table extends React.Component {
   handleRowChange = (event, row, key, value) => {
     const dataSource = this.state.dataSource;
     dataSource[row.props.index][key] = value;
-    this.setState({ dataSource: dataSource });
+    this.setState({ dataSource });
     if (this.props.onChange) {
-      this.props.onChange(event, this, row);
+      this.props.onChange(event, dataSource[row.props.index], dataSource);
     }
   };
 
   handleRowSelect = (event, instance) => {
-    if (this.props.onSelect) {
-      const index = instance.props.index;
-      const selected_rows = this.state.selected_rows;
-      const selected = selected_rows.indexOf(index) === -1;
-      if (selected) {
-        selected_rows.push(index);
-        this.props.onSelect(event, instance.props.data);
-      } else {
-        delete selected_rows[selected_rows.indexOf(index)];
-      }
-      this.setState({ selected_rows: selected_rows });
+    const index = instance.props.index;
+    const selected_index = this.state.selected_index;
+    const selected = selected_index.indexOf(index) === -1;
+    if (selected) {
+      selected_index.push(index);
+    } else {
+      delete selected_index[selected_index.indexOf(index)];
     }
+    this.setState({ selected_index: selected_index });
+    this.props.onSelect(event, this.getSelected());
   };
 
   handleRowsSelect = (event) => {
-    this.setState({ selected: !this.state.selected });
+    const all = !this.state.all;
+    this.setState({ all });
+    this.props.onSelect(event, this.getSelected(all));
   };
 
   isChanged = (data, base) => {
@@ -71,13 +71,21 @@ class Table extends React.Component {
     return changed;
   };
 
+  getSelected = (all = false) => {
+    const rows = [];
+    this.state.dataSource.map((row, index) => {
+      if (all || this.state.selected_index.indexOf(index) !== -1) rows.push(row);
+    });
+    return rows;
+  }
+
   renderHead () {
     if (this.props.heading) {
       return (
         <Head
           model={this.props.model}
           onSelect={this.props.onSelect ? this.handleRowsSelect : null}
-          selected={this.state.selected}
+          selected={this.state.all}
         />
       );
     }
@@ -97,7 +105,7 @@ class Table extends React.Component {
               model={this.props.model}
               onChange={this.props.onChange ? this.handleRowChange : null}
               onSelect={this.props.onSelect ? this.handleRowSelect : null}
-              selected={this.state.selected || this.state.selected_rows.indexOf(index) !== -1}
+              selected={this.state.all || this.state.selected_index.indexOf(index) !== -1}
             />
           );
         })
@@ -115,18 +123,6 @@ class Table extends React.Component {
       </table>
     );
   }
-
-  getValue () {
-    return this.state.dataSource;
-  }
-
-  getSelected () {
-    const rows = [];
-    this.state.dataSource.map((row, index) => {
-      if (this.state.selected_rows.indexOf(index) !== -1) rows.push(row);
-    });
-    return rows;
-  }
 }
 
 export default Table;
diff --git a/components/table/readme.md b/components/table/readme.md
index c9ac86d91..f2da19781 100644
--- a/components/table/readme.md
+++ b/components/table/readme.md
@@ -41,10 +41,3 @@ const TableTest = () => (
 | `heading`       | `Bool`        | `true`          | If true, component will show a heading using model field names.|
 | `onChange`      | `Function`    |                 | Callback function that is fired when the components's value changes.|
 | `onSelect`      | `Function`    |                 | Callback function when  selects a determinate row.|
-
-## Methods
-
-This component has state to control how is it rendered and the values currently selected. It exposes the following instance methods:
-
-- `getValue` is used to retrieve the current dataSource.
-- `getSelected` is used to retrieve the current rows selected.
diff --git a/docs/app/components/layout/main/modules/examples/table_example_1.txt b/docs/app/components/layout/main/modules/examples/table_example_1.txt
index 00f1b39f5..7b3e826a2 100644
--- a/docs/app/components/layout/main/modules/examples/table_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/table_example_1.txt
@@ -18,8 +18,8 @@ const users = [
   {name: 'Javi Velasco', twitter: '@javivelasco', birthdate: new Date(1987, 1, 1), dogs: 1, active: true}
 ];
 
-const handleSelect = (event, row, instance) => {
-  alert(row.twitter);
+const handleSelect = (event, selected) => {
+  alert(selected.length);
 };
 
 const TableTest = () => (
diff --git a/spec/components/table.jsx b/spec/components/table.jsx
index b659e878d..9dbe49fbb 100644
--- a/spec/components/table.jsx
+++ b/spec/components/table.jsx
@@ -12,18 +12,17 @@ const UserModel = {
 
 const users = [
   {name: 'Javi Jimenez', twitter: '@soyjavi', birthdate: new Date(1980, 3, 11), cats: 1},
-  {name: 'Javi Velasco', twitter: '@javivelasco', birthdate: new Date(1987, 1, 1), dogs: 1, active: true},
-  {name: 'chinorro'}
+  {name: 'Javi Velasco', twitter: '@javivelasco', birthdate: new Date(1987, 1, 1), dogs: 1, active: true}
 ];
 
 class TableTest extends React.Component {
 
-  handleTableChange = (event, instance, row) => {
-    console.log('handleTableChange', instance.getValue(), row);
+  handleTableChange = (event, row, dataSource) => {
+    console.log('handleTableChange', row, dataSource);
   };
 
-  handleTableRowSelect = (event, row) => {
-    console.log('handleTableRowSelect', row, this.refs.table.getSelected());
+  handleTableRowSelect = (event, selected) => {
+    console.log('handleTableRowSelect', selected);
   };
 
   render () {
@@ -32,7 +31,6 @@ class TableTest extends React.Component {
         <h5>Table</h5>
         <p style={{marginBottom: '10px'}}>Organized data.</p>
         <Table
-          ref='table'
           model={UserModel}
           dataSource={users}
           onChange={this.handleTableChange}

From 7311489ade70db08fbd06f47e27e9dc423a3c9d1 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 11 Nov 2015 20:34:19 +0100
Subject: [PATCH 0025/1024] Improve date picker

---
 components/date_picker/calendar/index.jsx     | 13 +++---
 components/date_picker/dialog.jsx             | 44 +++++++------------
 components/date_picker/index.jsx              |  5 ---
 components/date_picker/readme.md              | 29 +++++++++---
 .../modules/examples/datepicker_example_1.txt | 27 ++++++++++--
 spec/components/pickers.jsx                   |  1 -
 6 files changed, 69 insertions(+), 50 deletions(-)

diff --git a/components/date_picker/calendar/index.jsx b/components/date_picker/calendar/index.jsx
index c785e8f36..c98b85b42 100644
--- a/components/date_picker/calendar/index.jsx
+++ b/components/date_picker/calendar/index.jsx
@@ -21,7 +21,6 @@ class Calendar extends React.Component {
   };
 
   state = {
-    selectedDate: this.props.selectedDate,
     viewDate: this.props.selectedDate
   };
 
@@ -39,15 +38,13 @@ class Calendar extends React.Component {
   }
 
   handleDayClick = (day) => {
-    const newDate = utils.time.setDay(this.state.viewDate, day);
-    this.setState({selectedDate: newDate});
-    if (this.props.onChange) this.props.onChange(newDate);
+    this.props.onChange(utils.time.setDay(this.state.viewDate, day));
   };
 
   handleYearClick = (year) => {
-    const newDate = utils.time.setYear(this.state.selectedDate, year);
-    this.setState({selectedDate: newDate, viewDate: newDate});
-    if (this.props.onChange) this.props.onChange(newDate);
+    const viewDate = utils.time.setYear(this.props.selectedDate, year);
+    this.setState({viewDate});
+    this.props.onChange(viewDate);
   };
 
   incrementViewMonth = () => {
@@ -102,7 +99,7 @@ class Calendar extends React.Component {
           <Month
             key={this.state.viewDate.getMonth()}
             viewDate={this.state.viewDate}
-            selectedDate={this.state.selectedDate}
+            selectedDate={this.props.selectedDate}
             onDayClick={this.handleDayClick} />
         </CSSTransitionGroup>
       </div>
diff --git a/components/date_picker/dialog.jsx b/components/date_picker/dialog.jsx
index e11f17eb2..f9cd6407d 100644
--- a/components/date_picker/dialog.jsx
+++ b/components/date_picker/dialog.jsx
@@ -7,69 +7,59 @@ import Dialog from '../dialog';
 class CalendarDialog extends React.Component {
   static propTypes = {
     active: React.PropTypes.bool,
-    initialDate: React.PropTypes.object,
-    onCancel: React.PropTypes.func,
-    onChange: React.PropTypes.func,
-    onSelect: React.PropTypes.func
+    onDismiss: React.PropTypes.func,
+    onSelect: React.PropTypes.func,
+    value: React.PropTypes.object
   };
 
   static defaultProps = {
     active: false,
-    initialDate: new Date()
+    value: new Date()
   };
 
   state = {
-    date: this.props.initialDate,
-    display: 'months',
-    actions: [
-      { label: 'Cancel', className: style.button, onClick: this.handleCancel.bind(this) },
-      { label: 'Ok', className: style.button, onClick: this.handleSelect.bind(this) }
-    ]
+    date: this.props.value,
+    display: 'months'
   };
 
   handleCalendarChange = (value) => {
     this.setState({date: value, display: 'months'});
-    if (this.props.onChange) this.props.onChange(value);
   };
 
-  displayMonths = () => {
-    this.setState({display: 'months'});
+  handleSelect = () => {
+    if (this.props.onSelect) this.props.onSelect(this.state.date);
   };
 
-  displayYears = () => {
-    this.setState({display: 'years'});
+  handleSwitchDisplay = (display) => {
+    this.setState({ display });
   };
 
-  handleCancel () {
-    if (this.props.onCancel) this.props.onCancel();
-  }
-
-  handleSelect () {
-    if (this.props.onSelect) this.props.onSelect(this.state.date);
-  }
+  actions = [
+    { label: 'Cancel', className: style.button, onClick: this.props.onDismiss },
+    { label: 'Ok', className: style.button, onClick: this.handleSelect }
+  ];
 
   render () {
     const display = `display-${this.state.display}`;
     const headerClassName = `${style.header} ${style[display]}`;
 
     return (
-      <Dialog active={this.props.active} type="custom" className={style.dialog} actions={this.state.actions}>
+      <Dialog active={this.props.active} type="custom" className={style.dialog} actions={this.actions}>
           <header className={headerClassName}>
             <span className={style.weekday}>
               {time.getFullDayOfWeek(this.state.date.getDay())}
             </span>
-            <div onClick={this.displayMonths}>
+            <div onClick={this.handleSwitchDisplay.bind(this, 'months')}>
               <span className={style.month}>{time.getShortMonth(this.state.date)}</span>
               <span className={style.day}>{this.state.date.getDate()}</span>
             </div>
-            <span className={style.year} onClick={this.displayYears}>
+            <span className={style.year} onClick={this.handleSwitchDisplay.bind(this, 'years')}>
               {this.state.date.getFullYear()}
             </span>
           </header>
 
           <div className={style.wrapper}>
             <Calendar
-              ref='calendar'
               display={this.state.display}
               onChange={this.handleCalendarChange}
               selectedDate={this.state.date} />
diff --git a/components/date_picker/index.jsx b/components/date_picker/index.jsx
index 8ca2718e1..00bf3b6ca 100644
--- a/components/date_picker/index.jsx
+++ b/components/date_picker/index.jsx
@@ -7,15 +7,10 @@ import style from './style';
 
 class DatePicker extends React.Component {
   static propTypes = {
-    className: React.PropTypes.string,
     onChange: React.PropTypes.func,
     value: React.PropTypes.object
   };
 
-  static defaultProps = {
-    className: ''
-  };
-
   state = {
     active: false
   };
diff --git a/components/date_picker/readme.md b/components/date_picker/readme.md
index 63c882d85..f742de225 100644
--- a/components/date_picker/readme.md
+++ b/components/date_picker/readme.md
@@ -6,16 +6,35 @@ A [dialog](https://www.google.com/design/spec/components/pickers.html#pickers-da
 ```jsx
 import DatePicker from 'react-toolbox/lib/date_picker';
 
-const selectedDate = new Date(1995, 11, 17);
-const DatePickerTest = () => (
-  <DatePicker value={selectedDate} />
-);
+const datetime = new Date(1995, 11, 17);
+datetime.setHours(17);
+datetime.setMinutes(28);
+
+class DatePickerTest extends React.Component {
+  state = {
+    date2: datetime
+  };
+
+  handleChange = (item, value) => {
+    const newState = {};
+    newState[item] = value;
+    this.setState(newState);
+  };
+
+  render () {
+    return (
+      <section>
+        <DatePicker value={this.state.date1} onChange={this.handleChange.bind(this, 'date1')} />
+        <DatePicker value={this.state.date2} onChange={this.handleChange.bind(this, 'date2')} />
+      </section>
+    );
+  }
+}
 ```
 
 ## Properties
 
 | Name          | Type    | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `className`     | `String`        |     `''`            | Sets a class to give customized styles to the time picker.|
 | `onChange`       | `Function`       |                | Callback called when the picker value is changed.|
 | `value`         | `Date`    |                 | Date object with the currently selected date. |
diff --git a/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt b/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt
index 018d1115d..e1ca9f2ff 100644
--- a/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt
@@ -1,7 +1,26 @@
-const selectedDate = new Date(1995, 11, 17);
+const datetime = new Date(1995, 11, 17);
+datetime.setHours(17);
+datetime.setMinutes(28);
 
-const DatePickerTest = () => (
-  <DatePicker value={selectedDate} />
-);
+class DatePickerTest extends React.Component {
+  state = {
+    date2: datetime
+  };
+
+  handleChange = (item, value) => {
+    const newState = {};
+    newState[item] = value;
+    this.setState(newState);
+  };
+
+  render () {
+    return (
+      <section>
+        <DatePicker value={this.state.date1} onChange={this.handleChange.bind(this, 'date1')} />
+        <DatePicker value={this.state.date2} onChange={this.handleChange.bind(this, 'date2')} />
+      </section>
+    );
+  }
+}
 
 return <DatePickerTest />;
diff --git a/spec/components/pickers.jsx b/spec/components/pickers.jsx
index ac0b82d3f..7d248aab7 100644
--- a/spec/components/pickers.jsx
+++ b/spec/components/pickers.jsx
@@ -32,7 +32,6 @@ class PickersTest extends React.Component {
       </section>
     );
   }
-
 }
 
 export default PickersTest;

From 459036719e4ac5dc27991f5ccd8bd2a6f4cd263a Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 12 Nov 2015 00:12:33 +0100
Subject: [PATCH 0026/1024] Refactor dropdown and put value state out

---
 components/dropdown/index.jsx                 | 109 ++++++------------
 components/dropdown/readme.md                 |  36 +++---
 components/dropdown/style.scss                |  22 ++--
 .../modules/examples/dropdown_example_1.txt   |   9 +-
 spec/components/dropdown.jsx                  |  53 ++++++---
 5 files changed, 110 insertions(+), 119 deletions(-)

diff --git a/components/dropdown/index.jsx b/components/dropdown/index.jsx
index c7d46d985..c2d435c75 100644
--- a/components/dropdown/index.jsx
+++ b/components/dropdown/index.jsx
@@ -1,28 +1,14 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import Ripple from '../ripple';
 import style from './style';
 
-const _selectValue = (value, dataSource) => {
-  let item;
-  if (value) {
-    for (item of dataSource) {
-      if (item.value.toString() === value.toString()) break;
-    }
-    return item;
-  } else {
-    return dataSource[0];
-  }
-};
-
 class Dropdown extends React.Component {
   static propTypes = {
     auto: React.PropTypes.bool,
     className: React.PropTypes.string,
-    dataSource: React.PropTypes.array.isRequired,
     disabled: React.PropTypes.bool,
     label: React.PropTypes.string,
     onChange: React.PropTypes.func,
+    source: React.PropTypes.array.isRequired,
     template: React.PropTypes.func,
     value: React.PropTypes.string
   };
@@ -35,91 +21,64 @@ class Dropdown extends React.Component {
 
   state = {
     active: false,
-    selected: _selectValue(this.props.value, this.props.dataSource),
-    up: false,
-    width: undefined
+    up: false
   };
 
-  componentDidMount () {
-    this.setState({
-      width: ReactDOM.findDOMNode(this).getBoundingClientRect().width
-    });
-  }
-
-  componentDidUpdate (prev_props, prev_state) {
-    if (this.props.onChange && prev_state.selected !== this.state.selected && prev_state.active) {
-      this.props.onChange(this);
-    }
-  }
-
   handleClick = (event) => {
     const client = event.target.getBoundingClientRect();
     const screen_height = window.innerHeight || document.documentElement.offsetHeight;
     const up = this.props.auto ? client.top > ((screen_height / 2) + client.height) : false;
-    this.setState({ active: true, up: up });
+    this.setState({active: true, up: up});
   };
 
-  handleClickValue = (id) => {
-    if (!this.props.disabled) {
-      const value = id.toString();
-      for (const item of this.props.dataSource) {
-        if (item.value.toString() === value) {
-          this.setState({active: false, selected: item});
-          break;
-        }
-      }
+  handleSelect = (item) => {
+    if (!this.props.disabled && this.props.onChange) {
+      this.props.onChange(item);
+      this.setState({active: false});
     }
   };
 
-  renderValues () {
-    const items = this.props.dataSource.map((item, index) => {
-      let className;
-      if (item.value === this.state.selected.value) className = ` ${style.selected}`;
-
-      return (
-        <li
-          key={index}
-          className={className}
-          id={item.value}
-          onClick={this.handleClickValue.bind(this, item.value)}
-        >
-          { this.props.template ? this.props.template(item) : item.label }
-          <Ripple className={style.ripple}/>
-        </li>
-      );
-    });
-
-    let className = style.values;
-    const valuesStyle = {width: this.state.width};
-    if (this.state.up) className += ` ${style.up}`;
+  getSelectedItem = () => {
+    if (this.props.value) {
+      for (const item of this.props.source) {
+        if (item.value === this.props.value) return item;
+      }
+    } else {
+      return this.props.source[0];
+    }
+  };
 
-    return <ul ref='values' className={className} style={valuesStyle}>{ items }</ul>;
+  renderItem (item, idx) {
+    const className = item.value === this.props.value ? style.selected : null;
+    return (
+      <li key={idx} className={className} onMouseDown={this.handleSelect.bind(this, item.value)}>
+        { this.props.template ? this.props.template(item) : item.label }
+      </li>
+    );
   }
 
   render () {
     let className = style.root;
-    if (this.props.className) className += ` ${this.props.className}`;
-    if (this.props.disabled) className += ` ${style.disabled}`;
+    const selected = this.getSelectedItem();
+    if (this.state.up) className += ` ${style.up}`;
     if (this.state.active) className += ` ${style.active}`;
+    if (this.props.disabled) className += ` ${style.disabled}`;
+    if (this.props.className) className += ` ${this.props.className}`;
 
     return (
       <div data-react-toolbox='dropdown' className={className}>
-        {this.props.label ? <label className={style.label}>{this.props.label}</label> : null}
-        { this.renderValues() }
+        { this.props.label ? <label className={style.label}>{this.props.label}</label> : null }
+
+        <ul ref='values' className={style.values}>
+          { this.props.source.map(this.renderItem.bind(this)) }
+        </ul>
+
         <div ref='value' className={style.value} onClick={this.handleClick}>
-          { this.props.template ? this.props.template(this.state.selected) : <span>{this.state.selected.label}</span> }
+          { this.props.template ? this.props.template(selected) : <span>{selected.label}</span> }
         </div>
       </div>
     );
   }
-
-  getValue () {
-    return this.state.selected.value;
-  }
-
-  setValue (data) {
-    this.setState({selected: data});
-  }
 }
 
 export default Dropdown;
diff --git a/components/dropdown/readme.md b/components/dropdown/readme.md
index 3bcf43f2f..eeb9e2606 100644
--- a/components/dropdown/readme.md
+++ b/components/dropdown/readme.md
@@ -13,13 +13,26 @@ const countries: [
   { value: 'EN-en', label: 'USA'}
 ];
 
-const DropdownTest = () => (
-  <Dropdown 
-    auto
-    dataSource={countries}
-    value='TH-th'
-  />
-);
+class DropdownTest extends React.Component {
+  state = {
+    value: 'ES-es',
+  };
+
+  handleChange = (value) => {
+    this.setState({value: value});
+  };
+
+  render () {
+    return (
+      <Dropdown
+        auto={true}
+        onChange={this.handleChange}
+        source={countries}
+        value={this.state.value}
+      />
+    );
+  }
+}
 ```
 
 ## Properties
@@ -28,16 +41,9 @@ const DropdownTest = () => (
 |:-----|:-----|:-----|:-----|
 | `auto`        | `Boolean`       |  `true`        | If true, the dropdown will open up or down depending on the position in the screen .|
 | `className`     | `String`        |  `''`               | Set the class to give custom styles to the dropdown.
-| `dataSource`    | `Array`         |                 | Array of data objects with the data to represent in the dropdown.
 | `disabled`      | `Boolean`       | `false`         | Set the component as disabled.
 | `label`         | `String`        |                 | The text string to use for the floating label element.
 | `onChange`      | `Function`      |                 | Callback function that is fired when the component's value changes.
+| `source`    | `Array`         |                 | Array of data objects with the data to represent in the dropdown.
 | `template`      | `Function`      |                 | Callback function that returns a JSX template to represent the element.
 | `value`         | `String`        |                 | Default value using JSON data.
-
-## Methods
-
-This component has state to control its value and how is it rendered. It exposes the following instance methods:
-
-- `getValue` is used to retrieve the current value.
-- `setValue` to force a new value.
diff --git a/components/dropdown/style.scss b/components/dropdown/style.scss
index eeb07fc1e..82482fe4c 100644
--- a/components/dropdown/style.scss
+++ b/components/dropdown/style.scss
@@ -34,6 +34,14 @@
       transform: scale(0);
     }
   }
+  &:not(.up) > .values {
+    top: 0;
+    bottom: auto;
+  }
+  &.up > .values {
+    top: auto;
+    bottom: 0;
+  }
 }
 
 .label {
@@ -44,6 +52,7 @@
 .values {
   position: absolute;
   z-index: 2;
+  width: 100%;
   overflow-x: hidden;
   overflow-y: scroll;
   list-style: none;
@@ -64,14 +73,6 @@
       color: $dropdown-color-primary;
     }
   }
-  &:not(.up) {
-    top: 0;
-    bottom: auto;
-  }
-  &.up {
-    top: auto;
-    bottom: 0;
-  }
 }
 
 .value {
@@ -100,8 +101,3 @@
     transition: transform $animation-duration $animation-curve-default;
   }
 }
-
-.ripple {
-  z-index: 0;
-  background-color: $color-divider;
-}
diff --git a/docs/app/components/layout/main/modules/examples/dropdown_example_1.txt b/docs/app/components/layout/main/modules/examples/dropdown_example_1.txt
index e3b394f1b..5645ba6ed 100644
--- a/docs/app/components/layout/main/modules/examples/dropdown_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/dropdown_example_1.txt
@@ -1,6 +1,6 @@
 class DropdownTest extends React.Component {
   state = {
-    selected: null
+    selected: 3
   };
 
   albums = [
@@ -10,6 +10,10 @@ class DropdownTest extends React.Component {
     { value: 4, artist: 'Pixies', album: 'Doolittle', img: 'http://www.resident-music.com/image/cache/data/Emilys_Packshots/Pixies/Pixies_Doolittlke-500x500.jpg' }
   ];
 
+  handleChange = (value) => {
+    this.setState({selected: value});
+  };
+
   customItem (item) {
     const style = {
       width: 36,
@@ -33,7 +37,8 @@ class DropdownTest extends React.Component {
     return (
       <Dropdown
         auto={false}
-        dataSource={this.albums}
+        source={this.albums}
+        onChange={this.handleChange}
         label='Select your favorite album'
         template={this.customItem}
         value={this.state.selected}
diff --git a/spec/components/dropdown.jsx b/spec/components/dropdown.jsx
index ed1a792a9..ecb75d53d 100644
--- a/spec/components/dropdown.jsx
+++ b/spec/components/dropdown.jsx
@@ -1,20 +1,24 @@
 import React from 'react';
 import Dropdown from '../../components/dropdown';
 
+const countries = [
+  { value: 'EN-gb', label: 'England', img: 'http://' },
+  { value: 'ES-es', label: 'Spain', img: 'http://' },
+  { value: 'TH-th', label: 'Thailand', img: 'http://' },
+  { value: 'EN-en', label: 'USA', img: 'http://' },
+  { value: 'FR-fr', label: 'France', img: 'http://' }
+];
+
 class DropdownTest extends React.Component {
   state = {
-    countries: [
-      { value: 'ES-es', label: 'Spain', img: 'http://' },
-      { value: 'TH-th', label: 'Thailand', img: 'http://' },
-      { value: 'EN-gb', label: 'England', img: 'http://' },
-      { value: 'EN-en', label: 'USA', img: 'http://' },
-      { value: 'FR-fr', label: 'France', img: 'http://' }
-    ],
-    selected: 'TH-th'
+    dropdown1: 'ES-es',
+    dropdown4: 'TH-th'
   };
 
-  handleChange = (dropdown) => {
-    console.log('[DROPDOWN]', dropdown.getValue());
+  handleChange = (dropdown, value) => {
+    const newState = {};
+    newState[dropdown] = value;
+    this.setState(newState);
   };
 
   customDropdownItem (data) {
@@ -41,10 +45,31 @@ class DropdownTest extends React.Component {
       <section>
         <h5>Dropdown</h5>
         <p>lorem ipsum...</p>
-        <Dropdown dataSource={this.state.countries} label="Countries" onChange={this.handleChange}/>
-        <Dropdown dataSource={this.state.countries} disabled={true} onChange={this.handleChange}/>
-        <Dropdown dataSource={this.state.countries} value={this.state.selected} onChange={this.handleChange}/>
-        <Dropdown dataSource={this.state.countries} value={this.state.selected} template={this.customDropdownItem} onChange={this.handleChange}/>
+
+        <Dropdown
+          onChange={this.handleChange.bind(this, 'dropdown1')}
+          source={countries}
+          template={this.customDropdownItem}
+          value={this.state.dropdown1}
+        />
+
+        <Dropdown
+          label="Countries"
+          onChange={this.handleChange.bind(this, 'dropdown2')}
+          source={countries}
+        />
+
+        <Dropdown
+          onChange={this.handleChange.bind(this, 'dropdown4')}
+          source={countries}
+          value={this.state.dropdown4}
+        />
+
+        <Dropdown
+          source={countries}
+          disabled={true}
+          onChange={this.handleChange.bind(this, 'dropdown3')}
+        />
       </section>
     );
   }

From 50d99d2117bd1192b36ee399c0044ae6ff73d907 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 12 Nov 2015 00:26:23 +0100
Subject: [PATCH 0027/1024] Add toolbox version to webpack configuration

---
 spec/root.jsx                 | 7 ++-----
 webpack.config.development.js | 4 +++-
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/spec/root.jsx b/spec/root.jsx
index 7cfc4d86c..8951ff4c0 100644
--- a/spec/root.jsx
+++ b/spec/root.jsx
@@ -1,9 +1,8 @@
+/* global VERSION */
 import React from 'react';
-
 import App from '../components/app';
 import AppBarToolbox from '../components/app_bar';
 import ButtonToolbox from '../components/button';
-
 import Autocomplete from './components/autocomplete';
 import Button from './components/button';
 import Card from './components/card';
@@ -24,8 +23,6 @@ import Switch from './components/switch';
 import Table from './components/table';
 import Tabs from './components/tabs';
 import Tooltip from './components/tooltip';
-
-// import Logo from '../docs/app/components/logo'
 import style from './style';
 
 const _hrefProject = () => {
@@ -35,7 +32,7 @@ const _hrefProject = () => {
 const Root = () => (
   <App className={style.app}>
     <AppBarToolbox fixed flat className={style.appbar}>
-      <h1>React Toolbox <small>Spec 0.11.5</small></h1>
+      <h1>React Toolbox <small>Spec {VERSION}</small></h1>
       <ButtonToolbox
         accent
         className={style.github}
diff --git a/webpack.config.development.js b/webpack.config.development.js
index 1bb3f6294..05b9397e9 100644
--- a/webpack.config.development.js
+++ b/webpack.config.development.js
@@ -1,3 +1,4 @@
+const pkg = require('./package');
 const path = require('path');
 const webpack = require('webpack');
 const autoprefixer = require('autoprefixer');
@@ -36,7 +37,8 @@ module.exports = {
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoErrorsPlugin(),
     new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify('development')
+      'process.env.NODE_ENV': JSON.stringify('development'),
+      VERSION: JSON.stringify(pkg.version)
     })
   ]
 };

From 32804ab86aa8abdd82845e6d92442c97710e0104 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 12 Nov 2015 00:35:58 +0100
Subject: [PATCH 0028/1024] Update example for list checkbox

---
 .../main/modules/examples/list_example_1.txt  | 72 ++++++++++++-------
 1 file changed, 45 insertions(+), 27 deletions(-)

diff --git a/docs/app/components/layout/main/modules/examples/list_example_1.txt b/docs/app/components/layout/main/modules/examples/list_example_1.txt
index 31c5f4f53..8d087ec39 100644
--- a/docs/app/components/layout/main/modules/examples/list_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/list_example_1.txt
@@ -1,29 +1,47 @@
-const ListTest = () => (
-  <List selectable ripple>
-    <ListSubHeader caption='Explore characters' />
-    <ListItem
-      avatar='https://dl.dropboxusercontent.com/u/2247264/assets/m.jpg'
-      caption='Dr. Manhattan'
-      legend="Jonathan 'Jon' Osterman"
-      rightIcon='star'
-    />
-    <ListItem
-      avatar='https://dl.dropboxusercontent.com/u/2247264/assets/o.jpg'
-      caption='Ozymandias'
-      legend='Adrian Veidt'
-      rightIcon='star'
-    />
-    <ListItem
-      avatar='https://dl.dropboxusercontent.com/u/2247264/assets/r.jpg'
-      caption='Rorschach'
-      legend='Walter Joseph Kovacs'
-      rightIcon='star'
-    />
-    <ListSubHeader caption='Configuration' />
-    <ListCheckbox checked caption='Notify new comics' legend='You will receive a notification when a new one is published' />
-    <ListItem caption='Contact the publisher' leftIcon='send' />
-    <ListItem caption='Remove this publication' leftIcon='delete' />
-  </List>
-);
+class ListTest extends React.Component {
+  state = {
+    checkbox: false
+  };
+
+  handleCheckboxChange = () => {
+    this.setState({checkbox: !this.state.checkbox});
+  };
+
+  render () {
+    return (
+      <List selectable ripple>
+        <ListSubHeader caption='Explore characters' />
+        <ListItem
+          avatar='https://dl.dropboxusercontent.com/u/2247264/assets/m.jpg'
+          caption='Dr. Manhattan'
+          legend="Jonathan 'Jon' Osterman"
+          rightIcon='star'
+        />
+        <ListItem
+          avatar='https://dl.dropboxusercontent.com/u/2247264/assets/o.jpg'
+          caption='Ozymandias'
+          legend='Adrian Veidt'
+          rightIcon='star'
+        />
+        <ListItem
+          avatar='https://dl.dropboxusercontent.com/u/2247264/assets/r.jpg'
+          caption='Rorschach'
+          legend='Walter Joseph Kovacs'
+          rightIcon='star'
+        />
+        <ListSubHeader caption='Configuration' />
+        <ListCheckbox
+          caption='Notify new comics'
+          checked={this.state.checkbox}
+          legend='You will receive a notification when a new one is published'
+          onChange={this.handleCheckboxChange}
+        />
+        <ListItem caption='Contact the publisher' leftIcon='send' />
+        <ListItem caption='Remove this publication' leftIcon='delete' />
+      </List>
+    );
+  }
+
+}
 
 return <ListTest />;

From 58ac44a5ce9828f354dd64b0e481d85d74df66e4 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 12 Nov 2015 00:59:39 +0100
Subject: [PATCH 0029/1024] Extract selected item from menu

---
 components/menu/icon_menu.jsx                 |  4 +++-
 components/menu/menu.jsx                      | 19 +++++--------------
 .../main/modules/examples/menu_example_1.txt  |  2 +-
 spec/components/icon_menu.jsx                 | 16 +++++++++++-----
 spec/components/menu.jsx                      | 11 ++++++++---
 5 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/components/menu/icon_menu.jsx b/components/menu/icon_menu.jsx
index 51a5da009..cf7c03712 100644
--- a/components/menu/icon_menu.jsx
+++ b/components/menu/icon_menu.jsx
@@ -15,7 +15,8 @@ class IconMenu extends React.Component {
     onShow: React.PropTypes.func,
     onSelect: React.PropTypes.func,
     position: React.PropTypes.string,
-    selectable: React.PropTypes.bool
+    selectable: React.PropTypes.bool,
+    selected: React.PropTypes.any
   };
 
   static defaultProps = {
@@ -58,6 +59,7 @@ class IconMenu extends React.Component {
           position={this.props.position}
           ripple={this.props.menuRipple}
           selectable={this.props.selectable}
+          selected={this.props.selected}
         >
           { this.props.children }
         </Menu>
diff --git a/components/menu/menu.jsx b/components/menu/menu.jsx
index 30106f24e..5eb369379 100644
--- a/components/menu/menu.jsx
+++ b/components/menu/menu.jsx
@@ -24,7 +24,7 @@ class Menu extends React.Component {
     position: React.PropTypes.string,
     ripple: React.PropTypes.bool,
     selectable: React.PropTypes.bool,
-    value: React.PropTypes.any
+    selected: React.PropTypes.any
   };
 
   static defaultProps = {
@@ -37,8 +37,7 @@ class Menu extends React.Component {
 
   state = {
     active: this.props.active,
-    rippled: false,
-    value: this.props.value
+    rippled: false
   };
 
   componentDidMount () {
@@ -90,9 +89,9 @@ class Menu extends React.Component {
 
   handleSelect = (item) => {
     const { value, onClick } = item.props;
-    this.setState({ value, active: false, rippled: this.props.ripple }, () => {
+    this.setState({ active: false, rippled: this.props.ripple }, () => {
       if (onClick) onClick();
-      if (this.props.onSelect) this.props.onSelect(value, this);
+      if (this.props.onSelect) this.props.onSelect(value);
     });
   };
 
@@ -132,7 +131,7 @@ class Menu extends React.Component {
       if (item.type === MenuItem) {
         return React.cloneElement(item, {
           ripple: item.props.ripple || this.props.ripple,
-          selected: item.props.value && this.props.selectable && item.props.value === this.state.value,
+          selected: item.props.value && this.props.selectable && item.props.value === this.props.selected,
           onClick: this.handleSelect.bind(this, item)
         });
       } else {
@@ -158,14 +157,6 @@ class Menu extends React.Component {
     );
   }
 
-  getValue () {
-    return this.state.value;
-  }
-
-  setValue (value) {
-    this.setState({value: value});
-  }
-
   show () {
     this.setState({active: true});
   }
diff --git a/docs/app/components/layout/main/modules/examples/menu_example_1.txt b/docs/app/components/layout/main/modules/examples/menu_example_1.txt
index 6c8642502..6a234a95b 100644
--- a/docs/app/components/layout/main/modules/examples/menu_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/menu_example_1.txt
@@ -1,5 +1,5 @@
 const MenuTest = () => (
-  <IconMenu icon='more-vert' position='top-left' menuRipple selectable>
+  <IconMenu icon='more-vert' position='top-left' menuRipple>
     <MenuItem value='download' icon='get-app' caption='Download' />
     <MenuItem value='help' icon='favorite' caption='Favorite' />
     <MenuItem value='settings' icon='open-in-browser' caption='Open in app' />
diff --git a/spec/components/icon_menu.jsx b/spec/components/icon_menu.jsx
index 601801ab6..afb075354 100644
--- a/spec/components/icon_menu.jsx
+++ b/spec/components/icon_menu.jsx
@@ -2,6 +2,10 @@ import React from 'react';
 import { MenuItem, IconMenu } from '../../components/menu';
 
 class IconMenuTest extends React.Component {
+  state = {
+    selected: undefined
+  };
+
   handleShow = () => {
     console.log('Showing menu...');
   };
@@ -10,8 +14,9 @@ class IconMenuTest extends React.Component {
     console.log('Hiding menu...');
   };
 
-  handleSelect = (value, instance) => {
-    console.log('Option selected', value, instance);
+  handleSelect = (value) => {
+    console.log('Option selected', value);
+    this.setState({selected: value});
   };
 
   handleItem = () => {
@@ -20,7 +25,7 @@ class IconMenuTest extends React.Component {
 
   render () {
     return (
-      <div>
+      <section>
         <h5>Icon Menus</h5>
         <p>Although a menu can be used indepently with any component, we are providing a common use case with the icon menu.</p>
         <IconMenu
@@ -31,14 +36,15 @@ class IconMenuTest extends React.Component {
           onShow={this.handleShow}
           onHide={this.handleHide}
           onSelect={this.handleSelect}
-          selectable={false}
+          selectable={true}
+          selected={this.state.selected}
         >
           <MenuItem onClick={this.handleItem} value='refresh' caption='Refresh' />
           <MenuItem value='help' caption='Help & Feedback' />
           <MenuItem value='settings' caption='Settings' />
           <MenuItem value='signout' caption='Sign out' disabled />
         </IconMenu>
-      </div>
+      </section>
     );
   }
 }
diff --git a/spec/components/menu.jsx b/spec/components/menu.jsx
index 59c6110dc..4fc787d20 100644
--- a/spec/components/menu.jsx
+++ b/spec/components/menu.jsx
@@ -2,8 +2,13 @@ import React from 'react';
 import { Menu, MenuItem, MenuDivider } from '../../components/menu';
 
 class MenuTest extends React.Component {
-  handleSelect = (e, instance) => {
-    console.log('Menu selection changed!!, now its', instance.getValue());
+  state = {
+    value: undefined
+  };
+
+  handleSelect = (item) => {
+    console.log('Menu selection changed!!, now its', item);
+    this.setState({value: item});
   };
 
   handleItemClick = () => {
@@ -16,7 +21,7 @@ class MenuTest extends React.Component {
         <h5>Menus</h5>
         <p>This tabs can be disabled or hidden</p>
 
-        <Menu onSelect={this.handleSelect} selectable={false}>
+        <Menu onSelect={this.handleSelect} selectable={false} selected={this.state.value}>
           <MenuItem value='foo' caption='Caption' />
           <MenuItem onClick={this.handleItemClick} value='bar' caption='Caption & Shortcut' shortcut='Ctrl + P' />
           <MenuItem caption='Disabled ...' disabled shortcut='Ctrl + P' />

From 02dc01b172a0c8758d87291adf14fad0f207a847 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 12 Nov 2015 01:07:30 +0100
Subject: [PATCH 0030/1024] Extract value from radio group state

---
 components/radio/radio_group.jsx              | 20 ++-----------
 .../main/modules/examples/radio_example_1.txt | 28 +++++++++++++------
 spec/components/radio.jsx                     | 11 ++++++--
 3 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/components/radio/radio_group.jsx b/components/radio/radio_group.jsx
index 40de24aea..f3835fefa 100644
--- a/components/radio/radio_group.jsx
+++ b/components/radio/radio_group.jsx
@@ -15,14 +15,8 @@ class RadioGroup extends React.Component {
     disabled: false
   };
 
-  state = {
-    value: this.props.value
-  };
-
-  handleChange = (value, event) => {
-    this.setState({ value }, () => {
-      if (this.props.onChange) this.props.onChange(event, this);
-    });
+  handleChange = (value) => {
+    if (this.props.onChange) this.props.onChange(value);
   };
 
   renderRadioButtons () {
@@ -30,7 +24,7 @@ class RadioGroup extends React.Component {
       return (
         <RadioButton
           {...radio.props}
-          checked={radio.props.value === this.state.value}
+          checked={radio.props.value === this.props.value}
           disabled={this.props.disabled || radio.props.disabled}
           key={idx}
           label={radio.props.label}
@@ -48,14 +42,6 @@ class RadioGroup extends React.Component {
       </div>
     );
   }
-
-  getValue () {
-    return this.state.value;
-  }
-
-  setValue (value) {
-    this.setState({ value });
-  }
 }
 
 export default RadioGroup;
diff --git a/docs/app/components/layout/main/modules/examples/radio_example_1.txt b/docs/app/components/layout/main/modules/examples/radio_example_1.txt
index 8491bd0ea..10713f79a 100644
--- a/docs/app/components/layout/main/modules/examples/radio_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/radio_example_1.txt
@@ -1,10 +1,22 @@
-const RadioTest = () => (
-  <RadioGroup name='comic' value='vvendetta'>
-    <RadioButton label='The Walking Dead' value='thewalkingdead'/>
-    <RadioButton label='From Hell' value='fromhell' disabled/>
-    <RadioButton label='V for a Vendetta' value='vvendetta'/>
-    <RadioButton label='Watchmen' value='watchmen'/>
-  </RadioGroup>
-);
+class RadioTest extends React.Component {
+  state = {
+    value: 'vvendetta'
+  };
+
+  handleChange = (value) => {
+    this.setState({value});
+  };
+
+  render () {
+    return (
+      <RadioGroup name='comic' value={this.state.value} onChange={this.handleChange}>
+        <RadioButton label='The Walking Dead' value='thewalkingdead'/>
+        <RadioButton label='From Hell' value='fromhell' disabled/>
+        <RadioButton label='V for a Vendetta' value='vvendetta'/>
+        <RadioButton label='Watchmen' value='watchmen'/>
+      </RadioGroup>
+    );
+  }
+}
 
 return <RadioTest />;
diff --git a/spec/components/radio.jsx b/spec/components/radio.jsx
index 711e7088c..0d88b462e 100644
--- a/spec/components/radio.jsx
+++ b/spec/components/radio.jsx
@@ -2,8 +2,13 @@ import React from 'react';
 import { RadioGroup, RadioButton } from '../../components/radio';
 
 class RadioGroupTest extends React.Component {
-  handleChange = (event, instance) => {
-    console.log('Changed!', { comic: instance.getValue()});
+  state = {
+    value: 'vvendetta'
+  };
+
+  handleChange = (value) => {
+    console.log('Changed!', { comic: value});
+    this.setState({value});
   };
 
   handleFocus = () => {
@@ -20,7 +25,7 @@ class RadioGroupTest extends React.Component {
         <h5>Radio Button</h5>
         <p style={{marginBottom: '10px'}}>Lorem ipsum...</p>
 
-        <RadioGroup ref='group' name='comic' value='vvendetta' onChange={this.handleChange}>
+        <RadioGroup name='comic' value={this.state.value} onChange={this.handleChange}>
           <RadioButton label='The Walking Dead' value='thewalkingdead'/>
           <RadioButton label='From Hell' value='fromhell' disabled/>
           <RadioButton label='V for a Vendetta' value='vvendetta' onFocus={this.handleFocus}/>

From d5294cc57aeed74f43bb1cc4a40ec0d9050a12ac Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Thu, 12 Nov 2015 11:25:14 +0700
Subject: [PATCH 0031/1024] Pure <Snackbar>

---
 components/snackbar/index.jsx                 | 33 +++++++------------
 components/snackbar/readme.md                 |  9 +----
 .../modules/examples/snackbar_example_1.txt   | 30 ++++++++++++-----
 spec/components/snackbar.jsx                  | 27 +++++++++++----
 4 files changed, 53 insertions(+), 46 deletions(-)

diff --git a/components/snackbar/index.jsx b/components/snackbar/index.jsx
index c60620bda..463dcdeb6 100644
--- a/components/snackbar/index.jsx
+++ b/components/snackbar/index.jsx
@@ -10,20 +10,22 @@ class Snackbar extends React.Component {
     icon: React.PropTypes.string,
     label: React.PropTypes.string.isRequired,
     onClick: React.PropTypes.func,
+    onTimeout: React.PropTypes.func,
     timeout: React.PropTypes.number,
     type: React.PropTypes.string
   };
 
-  state = {
-    active: false
+  handleClick = (event) => {
+    this.props.onClick(event, this);
   };
 
-  handleClick = (event) => {
-    this.setState({active: false});
-    if (this.props.onClick) {
-      this.props.onClick(event, this);
+  componentDidUpdate () {
+    if (this.props.active && this.props.timeout) {
+      setTimeout(() => {
+        this.props.onTimeout(event, this);
+      }, this.props.timeout * 1000);
     }
-  };
+  }
 
   renderButton () {
     if (this.props.action) {
@@ -32,7 +34,7 @@ class Snackbar extends React.Component {
           className={style.button}
           kind='flat'
           label={this.props.action}
-          onClick={this.handleClick}
+          onClick={this.props.onClick ? this.handleClick : null}
         />
       );
     }
@@ -40,7 +42,7 @@ class Snackbar extends React.Component {
 
   render () {
     let className = `${style.root} ${style[this.props.type]}`;
-    if (this.state.active) className += ` ${style.active}`;
+    if (this.props.active) className += ` ${style.active}`;
     if (this.props.className) className += ` ${this.props.className}`;
 
     return (
@@ -51,19 +53,6 @@ class Snackbar extends React.Component {
       </div>
     );
   }
-
-  hide () {
-    this.setState({active: false});
-  }
-
-  show () {
-    this.setState({active: true});
-    if (this.props.timeout) {
-      setTimeout(() => {
-        this.setState({ active: false });
-      }, this.props.timeout * 1000);
-    }
-  }
 }
 
 export default Snackbar;
diff --git a/components/snackbar/readme.md b/components/snackbar/readme.md
index 7c4ec32e4..5abcdb1cc 100644
--- a/components/snackbar/readme.md
+++ b/components/snackbar/readme.md
@@ -42,13 +42,6 @@ class SnackbarTest extends React.Component {
 | `icon` | `String`  |       | String key for an icon displayed in left side of the snackbar.|
 | `label` | `String`  |       | Text to display in the content.|
 | `onClick` | `Function`  |       | Callback function that will be called when the button action is clicked.|
+| `onTimeout` | `Function`  |       | Callback function when finish the set timeout.|
 | `timeout` | `Number`  |       | Amount of time after the Snackbar will be automatically hidden.|
 | `type` | `String`  |       | Indicates the action type. Can be `accept`, `warning` or `cancel`|
-
-## Methods
-
-The Snackbar, in a similar way to the Dialog and Drawer holds state to check whether it's being displayed or not. It exposes methods to hide and show it manually:
-
-- `hide` used to hide the Snackbar.
-- `show` used to show the Snackbar.
-
diff --git a/docs/app/components/layout/main/modules/examples/snackbar_example_1.txt b/docs/app/components/layout/main/modules/examples/snackbar_example_1.txt
index e3751ec37..7701639bf 100644
--- a/docs/app/components/layout/main/modules/examples/snackbar_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/snackbar_example_1.txt
@@ -1,24 +1,36 @@
 class SnackbarTest extends React.Component {
+  handleSnackbarClick = (event, instance) => {
+    console.log('handleSnackbarClick', event, instance);
+    this.setState({ active: false });
+  };
+
+  handleSnackbarTimeout = (event, instance) => {
+    console.log('handleSnackbarClick', event, instance);
+    this.setState({ active: false });
+  };
+
   handleClick = () => {
-    this.refs.snackbar.show();
+    this.setState({ active: true });
   };
 
-  handleSnackbarClick = () => {
-    this.refs.snackbar.hide();
+  state = {
+    active: false
   };
 
   render () {
     return (
       <section>
-        <Button label='Show Snackbar' kind='raised' onClick={this.handleClick} />
+        <Button label='Show snackbar' kind='raised' onClick={this.handleClick} />
         <Snackbar
-          action='http://github.com/Nice'
+          action='http://github.com/Dismiss'
+          active={this.state.active}
           icon='question-answer'
-          label='A new developer started using React Toolbox'
+          label='Snackbar action cancel'
+          timeout={2}
           onClick={this.handleSnackbarClick}
-          ref='snackbar'
-          type='accept'
-      />
+          onTimeout={this.handleSnackbarTimeout}
+          type='cancel'
+        />
       </section>
     );
   }
diff --git a/spec/components/snackbar.jsx b/spec/components/snackbar.jsx
index 61783a177..4959098ad 100644
--- a/spec/components/snackbar.jsx
+++ b/spec/components/snackbar.jsx
@@ -3,12 +3,23 @@ import Button from '../../components/button';
 import Snackbar from '../../components/snackbar';
 
 class SnackbarTest extends React.Component {
-  handleClick = (event, snackbar) => {
-    console.log('handleClick', event, snackbar);
+
+  handleSnackbarClick = (event, instance) => {
+    console.log('handleSnackbarClick', event, instance);
+    this.setState({ active: false });
+  };
+
+  handleSnackbarTimeout = (event, instance) => {
+    console.log('handleSnackbarClick', event, instance);
+    this.setState({ active: false });
+  };
+
+  handleClick = () => {
+    this.setState({ active: true });
   };
 
-  handleSnackbar = () => {
-    this.refs.snackbar.show();
+  state = {
+    active: false
   };
 
   render () {
@@ -16,13 +27,15 @@ class SnackbarTest extends React.Component {
       <section>
         <h5>Snackbars & Toasts</h5>
         <p>lorem ipsum...</p>
-        <Button label='Show snackbar' kind='raised' onClick={this.handleSnackbar} />
+        <Button label='Show snackbar' kind='raised' onClick={this.handleClick} />
         <Snackbar
-          ref='snackbar'
           action='http://github.com/Dismiss'
+          active={this.state.active}
           icon='question-answer'
           label='Snackbar action cancel'
-          onClick={this.handleClick}
+          timeout={2}
+          onClick={this.handleSnackbarClick}
+          onTimeout={this.handleSnackbarTimeout}
           type='cancel'
         />
       </section>

From c1c1a9a93144c728a8548b845adc78530cdc71ba Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Thu, 12 Nov 2015 11:52:05 +0700
Subject: [PATCH 0032/1024] Pure <Switch>

---
 components/switch/index.jsx                   | 30 +++-----------
 components/switch/readme.md                   |  2 -
 components/switch/style.scss                  |  4 +-
 .../modules/examples/switch_example_1.txt     | 41 +++++++++++++++----
 spec/components/switch.jsx                    | 29 ++++++++++---
 5 files changed, 65 insertions(+), 41 deletions(-)

diff --git a/components/switch/index.jsx b/components/switch/index.jsx
index b2099a6c3..cf478a4b1 100644
--- a/components/switch/index.jsx
+++ b/components/switch/index.jsx
@@ -10,9 +10,7 @@ class Switch extends React.Component {
     disabled: React.PropTypes.bool,
     label: React.PropTypes.string,
     name: React.PropTypes.string,
-    onBlur: React.PropTypes.func,
-    onChange: React.PropTypes.func,
-    onFocus: React.PropTypes.func
+    onChange: React.PropTypes.func
   };
 
   static defaultProps = {
@@ -21,19 +19,9 @@ class Switch extends React.Component {
     disabled: false
   };
 
-  state = {
-    checked: this.props.checked
-  };
-
   handleChange = (event) => {
-    this.setState({checked: !this.state.checked}, () => {
-      if (this.props.onChange) this.props.onChange(event, this);
-    });
-  };
-
-  handleClick = (event) => {
     events.pauseEvent(event);
-    if (!this.props.disabled) this.handleChange(event);
+    if (this.props.onChange && !this.props.disabled) this.props.onChange(event);
   };
 
   handleInputClick = (event) => {
@@ -46,19 +34,19 @@ class Switch extends React.Component {
 
   render () {
     let labelClassName = style[this.props.disabled ? 'disabled' : 'field'];
-    const switchClassName = style[this.state.checked ? 'switch-on' : 'switch-off'];
+    const switchClassName = style[this.props.checked ? 'on' : 'off'];
     if (this.props.className) labelClassName += ` ${this.props.className}`;
 
     return (
       <label
         data-react-toolbox='checkbox'
         className={labelClassName}
-        onClick={this.handleClick}
+        onClick={this.handleChange}
       >
         <input
           {...this.props}
           ref='input'
-          checked={this.state.checked}
+          checked={this.props.checked}
           className={style.input}
           onChange={this.handleChange}
           onClick={this.handleInputClick}
@@ -81,14 +69,6 @@ class Switch extends React.Component {
   focus () {
     this.refs.input.focus();
   }
-
-  getValue () {
-    return this.state.checked;
-  }
-
-  setValue (value) {
-    this.setState({checked: value});
-  }
 }
 
 export default Switch;
diff --git a/components/switch/readme.md b/components/switch/readme.md
index 7952c8da5..14c6c5743 100644
--- a/components/switch/readme.md
+++ b/components/switch/readme.md
@@ -24,6 +24,4 @@ const SwitchTest = () => (
 | `disabled`     | `Boolean`  | `false`  | If true, component will be disabled.|
 | `label`        | `String`   |       | The text string to use for the floating label element.|
 | `name`         | `String`   |        | The text string used as name of the input.|
-| `onBlur`       | `Function` |        | Callback function that is fired when when the switch is blurred.|
 | `onChange`     | `Function` |        | Callback function that is fired when the components's value changes.|
-| `onFocus`      | `Function`  |        | Callback function fire when the switch is focused.|
diff --git a/components/switch/style.scss b/components/switch/style.scss
index 1e783464e..4716a1bf7 100644
--- a/components/switch/style.scss
+++ b/components/switch/style.scss
@@ -48,7 +48,7 @@
   transition-duration: $switch-ripple-duration;
 }
 
-.switch-on {
+.on {
   @extend %switch;
   background: $switch-track-on-color;
   .thumb {
@@ -58,7 +58,7 @@
   }
 }
 
-.switch-off {
+.off {
   @extend %switch;
   background: $switch-track-off-color;
   .thumb {
diff --git a/docs/app/components/layout/main/modules/examples/switch_example_1.txt b/docs/app/components/layout/main/modules/examples/switch_example_1.txt
index cb4f535b5..ec41c31a4 100644
--- a/docs/app/components/layout/main/modules/examples/switch_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/switch_example_1.txt
@@ -1,9 +1,36 @@
-const SwitchTest = () => (
-  <fieldset>
-    <Switch label="Push notifications" />
-    <Switch checked label="Mail notifications" />
-    <Switch disabled label="Nothing, thanks"/>
-  </fieldset>
-);
+class SwitchTest extends React.Component {
+  state = {
+    switch: [true, false, false]
+  };
+
+  handleChange = (index) => {
+    const state = this.state.switch;
+    state[index] = !state[index];
+    this.setState({switch: state});
+  };
+
+  render () {
+    return (
+      <section>
+        <Switch
+          checked={this.state.switch[0]}
+          label="Push notifications"
+          onChange={this.handleChange.bind(this, 0)}
+        />
+        <Switch
+          checked={this.state.switch[1]}
+          label="Mail notifications"
+          onChange={this.handleChange.bind(this, 1)}
+        />
+        <Switch
+          checked={this.state.switch[2]}
+          disabled
+          label="Nothing, thanks"
+          onChange={this.handleChange.bind(this, 2)}
+        />
+      </section>
+    );
+  }
+}
 
 return <SwitchTest />;
diff --git a/spec/components/switch.jsx b/spec/components/switch.jsx
index d3015b2d7..238712080 100644
--- a/spec/components/switch.jsx
+++ b/spec/components/switch.jsx
@@ -2,8 +2,14 @@ import React from 'react';
 import Switch from '../../components/switch';
 
 class SwitchTest extends React.Component {
-  handleChange = (event, instance) => {
-    console.log('[Switch] Changed', instance.getValue());
+  state = {
+    switch: [true, false, false]
+  };
+
+  handleChange = (index) => {
+    const state = this.state.switch;
+    state[index] = !state[index];
+    this.setState({switch: state});
   };
 
   render () {
@@ -11,9 +17,22 @@ class SwitchTest extends React.Component {
       <section>
         <h5>Switches</h5>
         <p style={{marginBottom: '10px'}}>This is more beautiful than the old fashion checkboxes...</p>
-        <Switch label="Push notifications" />
-        <Switch checked label="Mail notifications" onChange={this.handleChange} />
-        <Switch disabled label="Nothing, thanks"/>
+        <Switch
+          checked={this.state.switch[0]}
+          label="Push notifications"
+          onChange={this.handleChange.bind(this, 0)}
+        />
+        <Switch
+          checked={this.state.switch[1]}
+          label="Mail notifications"
+          onChange={this.handleChange.bind(this, 1)}
+        />
+        <Switch
+          checked={this.state.switch[2]}
+          disabled
+          label="Nothing, thanks"
+          onChange={this.handleChange.bind(this, 2)}
+        />
       </section>
     );
   }

From d37b3d536f0753ea06eb1e7794643876f9432a4a Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Thu, 12 Nov 2015 12:02:37 +0700
Subject: [PATCH 0033/1024] Missing code in <Table>

---
 components/table/index.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/table/index.jsx b/components/table/index.jsx
index f984a6b29..08123699d 100644
--- a/components/table/index.jsx
+++ b/components/table/index.jsx
@@ -56,7 +56,9 @@ class Table extends React.Component {
   };
 
   handleRowsSelect = () => {
-    this.setState({ selected: !this.state.selected });
+    const all = !this.state.all;
+    this.setState({ all });
+    this.props.onSelect(event, this.getSelected(all));
   };
 
   isChanged = (data, base) => {

From cbbf6025523ce1b11a0adebf169df676190ac376 Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Thu, 12 Nov 2015 12:03:24 +0700
Subject: [PATCH 0034/1024] Minor changes (help to read)

---
 components/checkbox/index.jsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/components/checkbox/index.jsx b/components/checkbox/index.jsx
index 635642bcf..992318676 100644
--- a/components/checkbox/index.jsx
+++ b/components/checkbox/index.jsx
@@ -23,7 +23,7 @@ class Checkbox extends React.Component {
 
   handleClick = (event) => {
     events.pauseEvent(event);
-    if (!this.props.disabled) this.props.onChange(event);
+    this.props.onChange(event);
   };
 
   handleInputClick = (event) => {
@@ -31,7 +31,7 @@ class Checkbox extends React.Component {
   };
 
   handleMouseDown = (event) => {
-    if (!this.props.disabled) this.refs.ripple.start(event);
+    this.refs.ripple.start(event);
   };
 
   render () {
@@ -51,10 +51,14 @@ class Checkbox extends React.Component {
           ref='input'
           {...this.props}
           className={style.input}
-          onClick={this.handleInputClick}
+          onClick={(this.props.onChange && !this.props.disabled) ? this.handleInputClick : null}
           type='checkbox'
         />
-        <span data-role='checkbox' className={checkboxClassName} onMouseDown={this.handleMouseDown}>
+        <span
+          data-role='checkbox'
+          className={checkboxClassName}
+          onMouseDown={!this.props.disabled ? this.handleMouseDown : null}
+        >
           <Ripple ref='ripple' data-role='ripple' className={style.ripple} spread={3} centered />
         </span>
         { this.props.label ? <span data-role='label' className={style.text}>{this.props.label}</span> : null }

From 846699ad22b98111a6ab508de70dd0fd630a64f7 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 12 Nov 2015 19:00:28 +0100
Subject: [PATCH 0035/1024] Remove not needed click handler in snackbar

---
 components/snackbar/index.jsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/components/snackbar/index.jsx b/components/snackbar/index.jsx
index 463dcdeb6..8ef748108 100644
--- a/components/snackbar/index.jsx
+++ b/components/snackbar/index.jsx
@@ -15,10 +15,6 @@ class Snackbar extends React.Component {
     type: React.PropTypes.string
   };
 
-  handleClick = (event) => {
-    this.props.onClick(event, this);
-  };
-
   componentDidUpdate () {
     if (this.props.active && this.props.timeout) {
       setTimeout(() => {
@@ -34,7 +30,7 @@ class Snackbar extends React.Component {
           className={style.button}
           kind='flat'
           label={this.props.action}
-          onClick={this.props.onClick ? this.handleClick : null}
+          onClick={this.props.onClick}
         />
       );
     }

From acdb2ca0f794a9303770a7395f0472613891d887 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 12 Nov 2015 19:02:21 +0100
Subject: [PATCH 0036/1024] Add back onBlur and onFocus for Switch component

---
 components/switch/index.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/switch/index.jsx b/components/switch/index.jsx
index cf478a4b1..7ffdaf0cd 100644
--- a/components/switch/index.jsx
+++ b/components/switch/index.jsx
@@ -10,7 +10,9 @@ class Switch extends React.Component {
     disabled: React.PropTypes.bool,
     label: React.PropTypes.string,
     name: React.PropTypes.string,
-    onChange: React.PropTypes.func
+    onBlur: React.PropTypes.func,
+    onChange: React.PropTypes.func,
+    onFocus: React.PropTypes.func
   };
 
   static defaultProps = {

From d9153468e8c8cd416f2f24a67b62ccded88b1d0b Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 12 Nov 2015 19:06:56 +0100
Subject: [PATCH 0037/1024] Add proper example in switch readme

---
 components/switch/readme.md | 43 +++++++++++++++++++++++++++++++------
 1 file changed, 36 insertions(+), 7 deletions(-)

diff --git a/components/switch/readme.md b/components/switch/readme.md
index 14c6c5743..2591e8e00 100644
--- a/components/switch/readme.md
+++ b/components/switch/readme.md
@@ -6,13 +6,40 @@ On/off switches toggle the state of a single settings option. The option that th
 ```jsx
 import Switch from 'react-toolbox/lib/switch';
 
-const SwitchTest = () => (
-  <fieldset>
-    <Switch label="Push notifications" />
-    <Switch checked label="Mail notifications" />
-    <Switch disabled label="Nothing, thanks"/>
-  </fieldset>
-);
+class SwitchTest extends React.Component {
+  state = {
+    switch: [true, false, false]
+  };
+
+  handleChange = (index) => {
+    const state = this.state.switch;
+    state[index] = !state[index];
+    this.setState({switch: state});
+  };
+
+  render () {
+    return (
+      <section>
+        <Switch
+          checked={this.state.switch[0]}
+          label="Push notifications"
+          onChange={this.handleChange.bind(this, 0)}
+        />
+        <Switch
+          checked={this.state.switch[1]}
+          label="Mail notifications"
+          onChange={this.handleChange.bind(this, 1)}
+        />
+        <Switch
+          checked={this.state.switch[2]}
+          disabled
+          label="Nothing, thanks"
+          onChange={this.handleChange.bind(this, 2)}
+        />
+      </section>
+    );
+  }
+}
 ```
 
 ## Properties
@@ -24,4 +51,6 @@ const SwitchTest = () => (
 | `disabled`     | `Boolean`  | `false`  | If true, component will be disabled.|
 | `label`        | `String`   |       | The text string to use for the floating label element.|
 | `name`         | `String`   |        | The text string used as name of the input.|
+| `onBlur`       | `Function` |        | Callback function that is fired when when the switch is blurred.|
 | `onChange`     | `Function` |        | Callback function that is fired when the components's value changes.|
+| `onFocus`      | `Function`  |        | Callback function fire when the switch is focused.|

From 50b113b4d19632a64b848d4265122ea2535ed513 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Fri, 13 Nov 2015 01:01:27 +0100
Subject: [PATCH 0038/1024] New and refactored stateless tabs

---
 components/tabs/content.jsx |  36 +++++++++++++
 components/tabs/index.jsx   |   4 +-
 components/tabs/readme.md   |   5 +-
 components/tabs/tab.jsx     |  47 +++++++---------
 components/tabs/tabs.jsx    | 104 ++++++++++++++++++++----------------
 spec/components/tabs.jsx    |  37 +++++++++----
 6 files changed, 143 insertions(+), 90 deletions(-)
 create mode 100644 components/tabs/content.jsx

diff --git a/components/tabs/content.jsx b/components/tabs/content.jsx
new file mode 100644
index 000000000..53f7c2273
--- /dev/null
+++ b/components/tabs/content.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import style from './style';
+
+class TabContent extends React.Component {
+  static propTypes = {
+    active: React.PropTypes.bool,
+    className: React.PropTypes.string,
+    onActive: React.PropTypes.func,
+    tabIndex: React.PropTypes.number
+  };
+
+  static defaultProps = {
+    active: false,
+    className: ''
+  };
+
+  componentWillReceiveProps (nextProps) {
+    if (nextProps.active && this.props.onActive) {
+      this.props.onActive();
+    }
+  }
+
+  render () {
+    let className = style.tab;
+    if (this.props.active) className += ` ${style.active}`;
+    if (this.props.className) className += ` ${this.props.className}`;
+
+    return (
+      <section className={className} tabIndex={this.props.tabIndex}>
+        {this.props.children}
+      </section>
+    );
+  }
+}
+
+export default TabContent;
diff --git a/components/tabs/index.jsx b/components/tabs/index.jsx
index 8ef447e6e..1121fce60 100644
--- a/components/tabs/index.jsx
+++ b/components/tabs/index.jsx
@@ -1,4 +1,4 @@
 module.exports = {
-  Tab: require('./tab'),
-  Tabs: require('./tabs')
+  Tabs: require('./tabs'),
+  Tab: require('./tab')
 };
diff --git a/components/tabs/readme.md b/components/tabs/readme.md
index 9e49e38b9..10b08c003 100644
--- a/components/tabs/readme.md
+++ b/components/tabs/readme.md
@@ -24,11 +24,9 @@ This component acts as the wrapper and the main controller of the content that i
 | Name              | Type          | Default         | Description|
 |:-----|:-----|:-----|:-----|
 | `className`     | `String`        | `''`            | Additional class name to provide custom styling.|
-| `index`         | `Number`        | `0`             | Current <Tab> |
+| `active`         | `Number`        | `0`             | Current <Tab> |
 | `onChange`      | `Function`      |                 | Callback function that is fired when the tab changes.
 
-The tabs component has state to hold the currently activated tab and exposes a method to change it manually called `active`. You can call this method with the index value of the child you want to activate.
-
 ## Tab
 
 Represent a single tab element and it should include some properties to describe the tab itself and get children elements as content.
@@ -41,4 +39,3 @@ Represent a single tab element and it should include some properties to describe
 | `hidden`        | `Boolean`       | `false`         | If true, the current component is not visible.|
 | `label`         | `String`        |                 | Label text for navigation header |
 | `onActive`      | `Function`      |                 | Callback function that is fired when the tab is activated. |
-| `tabIndex`      | `Number`        |                 | Sets the tabindex html attribute.|
diff --git a/components/tabs/tab.jsx b/components/tabs/tab.jsx
index b5ce8247d..364c28701 100644
--- a/components/tabs/tab.jsx
+++ b/components/tabs/tab.jsx
@@ -1,52 +1,43 @@
 import React from 'react';
 import style from './style';
 
-class Tab extends React.Component {
+class TabHeader extends React.Component {
   static propTypes = {
     active: React.PropTypes.bool,
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
     hidden: React.PropTypes.bool,
-    label: React.PropTypes.string.isRequired,
+    label: React.PropTypes.any.isRequired,
     onActive: React.PropTypes.func,
-    tabIndex: React.PropTypes.number
+    onClick: React.PropTypes.func
   };
 
   static defaultProps = {
-    className: ''
+    active: false,
+    className: '',
+    disabled: false,
+    hidden: false
   };
 
-  componentDidMount () {
-    if (this.props.active) this.active(this.props.active);
-  }
-
-  componentWillReceiveProps (next_props) {
-    if (next_props.active) this.active(next_props.active);
-  }
+  handleClick = () => {
+    if (!this.props.disabled && this.props.onClick) {
+      this.props.onClick();
+    }
+  };
 
   render () {
-    let className = `${style.tab} ${this.props.className}`;
+    let className = style.label;
     if (this.props.active) className += ` ${style.active}`;
-    if (this.props.disabled) className += ` ${style.disabled}`;
     if (this.props.hidden) className += ` ${style.hidden}`;
+    if (this.props.disabled) className += ` ${style.disabled}`;
+    if (this.props.className) className += ` ${this.props.className}`;
 
     return (
-      <section
-        data-react-toolbox='tab'
-        className={className}
-        tabIndex={this.props.tabIndex}
-      >
-        { this.props.children }
-      </section>
+      <label className={className} onClick={this.handleClick}>
+        {this.props.label}
+      </label>
     );
   }
-
-  active (value) {
-    this.setState({active: value});
-    if (this.props.onActive && value) {
-      this.props.onActive(this);
-    }
-  }
 }
 
-export default Tab;
+export default TabHeader;
diff --git a/components/tabs/tabs.jsx b/components/tabs/tabs.jsx
index a230b9046..0f4da0c6a 100644
--- a/components/tabs/tabs.jsx
+++ b/components/tabs/tabs.jsx
@@ -1,90 +1,100 @@
 import React from 'react';
+import Tab from './tab';
+import Content from './content';
 import style from './style';
 
 class Tabs extends React.Component {
   static propTypes = {
+    active: React.PropTypes.number,
     className: React.PropTypes.string,
-    index: React.PropTypes.number.isRequired,
     onChange: React.PropTypes.func
   };
 
   static defaultProps = {
-    className: '',
-    index: 0
+    active: 0
   };
 
   state = {
-    index: this.props.index,
     pointer: {}
   };
 
+  componentWillReceiveProps (nextProps) {
+    this.updatePointer(nextProps.active);
+  }
+
   componentDidMount () {
     setTimeout(() => {
-      this.setState({pointer: this._pointerPosition(this.props.index)});
-    }, 20);
+      this.updatePointer(this.props.active);
+    }, 100);
   }
 
-  componentWillReceiveProps (next_props) {
-    const index = next_props.index || this.state.index;
-    this.setState({ index, pointer: this._pointerPosition(index) });
-  }
+  handleHeaderClick = (idx) => {
+    if (this.props.onChange) this.props.onChange(idx);
+  };
 
-  _pointerPosition (index = 0) {
-    const startPoint = this.refs.tabs.getBoundingClientRect().left;
-    const label = this.refs.navigation.children[index].getBoundingClientRect();
+  parseChildren () {
+    const headers = [];
+    const contents = [];
+
+    React.Children.forEach(this.props.children, (item) => {
+      if (item.type === Tab) {
+        headers.push(item);
+        if (item.props.children) {
+          const {onActive, children} = item.props;
+          contents.push(<Content onActive={onActive} children={children}/>);
+        }
+      } else if (item.type === Content) {
+        contents.push(item);
+      }
+    });
 
-    return {
-      top: `${this.refs.navigation.getBoundingClientRect().height}px`,
-      left: `${label.left - startPoint}px`,
-      width: `${label.width}px`
-    };
+    return {headers, contents};
   }
 
-  handleClick = (index) => {
+  updatePointer (idx) {
+    const startPoint = this.refs.tabs.getBoundingClientRect().left;
+    const label = this.refs.navigation.children[idx].getBoundingClientRect();
     this.setState({
-      index,
-      pointer: this._pointerPosition(index)
+      pointer: {
+        top: `${this.refs.navigation.getBoundingClientRect().height}px`,
+        left: `${label.left - startPoint}px`,
+        width: `${label.width}px`
+      }
     });
-    if (this.props.onChange) this.props.onChange(index);
-  };
+  }
 
-  renderLabels (labels) {
-    return labels.map((props) => {
-      return <label {...props}>{ props.label }</label>;
+  renderHeaders (headers) {
+    return headers.map((item, idx) => {
+      return React.cloneElement(item, {
+        key: idx,
+        active: this.props.active === idx,
+        onClick: this.handleHeaderClick.bind(this, idx, item)
+      });
     });
   }
 
-  render () {
-    const labels = [];
-
-    const tabs = this.props.children.map((tab, index) => {
-      const active = this.state.index === index;
-      let className = `${style.label} ${tab.props.className}`;
-
-      if (active) className += ` ${style.active}`;
-      if (tab.props.disabled) className += ` ${style.disabled}`;
-      if (tab.props.hidden) className += ` ${style.hidden}`;
-
-      labels.push({
-        className,
-        label: tab.props.label,
-        key: index,
-        onClick: !tab.props.disabled ? this.handleClick.bind(this, index) : null
+  renderContents (contents) {
+    return contents.map((item, idx) => {
+      return React.cloneElement(item, {
+        key: idx,
+        active: this.props.active === idx,
+        tabIndex: idx
       });
-
-      return React.cloneElement(tab, { active, key: index, tabIndex: index });
     });
+  }
 
+  render () {
     let className = style.root;
+    const { headers, contents } = this.parseChildren();
     if (this.props.className) className += ` ${this.props.className}`;
 
     return (
-      <div data-react-toolbox='tabs' ref='tabs' className={className}>
+      <div ref='tabs' className={className}>
         <nav className={style.navigation} ref='navigation'>
-          { this.renderLabels(labels) }
+          {this.renderHeaders(headers)}
         </nav>
         <span className={style.pointer} style={this.state.pointer} />
-        { tabs }
+        {this.renderContents(contents)}
       </div>
     );
   }
diff --git a/spec/components/tabs.jsx b/spec/components/tabs.jsx
index 09405dce1..b29933c7a 100644
--- a/spec/components/tabs.jsx
+++ b/spec/components/tabs.jsx
@@ -4,11 +4,16 @@ import { Tabs, Tab } from '../../components/tabs';
 class TabsTest extends React.Component {
 
   state = {
-    index: 1
+    active: 1
   };
 
-  handleTabsOnChange = (index) => {
-    console.log('handleTabsOnChange', index);
+  handleTabChange = (active) => {
+    this.setState({active});
+    console.log('change active');
+  };
+
+  handleActive = () => {
+    console.log('special one activated');
   };
 
   render () {
@@ -17,12 +22,26 @@ class TabsTest extends React.Component {
         <h5>Tabs</h5>
         <p>This tabs can be disabled or hidden</p>
 
-        <Tabs index={this.state.index} onChange={this.handleTabsOnChange}>
-          <Tab label='Primary'><small>Primary content</small></Tab>
-          <Tab label='Secondary'><small>Secondary content</small></Tab>
-          <Tab label='Third' disabled><small>Disabled content</small></Tab>
-          <Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
-          <Tab label='Fifth'><small>Fifth content</small></Tab>
+        <Tabs active={this.state.active} onChange={this.handleTabChange}>
+          <Tab label='Primary'>
+            <small>Primary content</small>
+          </Tab>
+
+          <Tab label='Secondary' onActive={this.handleActive}>
+            <small>Secondary content</small>
+          </Tab>
+
+          <Tab label='Third' disabled>
+            <small>Disabled content</small>
+          </Tab>
+
+          <Tab label='Fourth' hidden>
+            <small>Fourth content hidden</small>
+          </Tab>
+
+          <Tab label='Fifth'>
+            <small>Fifth content</small>
+          </Tab>
         </Tabs>
       </section>
     );

From e15c421ff3e31aa47615e38295a8f7e20361fc1a Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Fri, 13 Nov 2015 10:04:08 +0100
Subject: [PATCH 0039/1024] =?UTF-8?q?Rename=20active=20to=20index=20in=20t?=
 =?UTF-8?q?abs=20=F0=9F=98=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/tabs/readme.md |  2 +-
 components/tabs/tabs.jsx  | 12 ++++++------
 spec/components/tabs.jsx  | 11 +++++------
 3 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/components/tabs/readme.md b/components/tabs/readme.md
index 10b08c003..39ba55d49 100644
--- a/components/tabs/readme.md
+++ b/components/tabs/readme.md
@@ -24,7 +24,7 @@ This component acts as the wrapper and the main controller of the content that i
 | Name              | Type          | Default         | Description|
 |:-----|:-----|:-----|:-----|
 | `className`     | `String`        | `''`            | Additional class name to provide custom styling.|
-| `active`         | `Number`        | `0`             | Current <Tab> |
+| `index`         | `Number`        | `0`             | Current <Tab> |
 | `onChange`      | `Function`      |                 | Callback function that is fired when the tab changes.
 
 ## Tab
diff --git a/components/tabs/tabs.jsx b/components/tabs/tabs.jsx
index 0f4da0c6a..d8cfc17e7 100644
--- a/components/tabs/tabs.jsx
+++ b/components/tabs/tabs.jsx
@@ -5,13 +5,13 @@ import style from './style';
 
 class Tabs extends React.Component {
   static propTypes = {
-    active: React.PropTypes.number,
+    index: React.PropTypes.number,
     className: React.PropTypes.string,
     onChange: React.PropTypes.func
   };
 
   static defaultProps = {
-    active: 0
+    index: 0
   };
 
   state = {
@@ -19,12 +19,12 @@ class Tabs extends React.Component {
   };
 
   componentWillReceiveProps (nextProps) {
-    this.updatePointer(nextProps.active);
+    this.updatePointer(nextProps.index);
   }
 
   componentDidMount () {
     setTimeout(() => {
-      this.updatePointer(this.props.active);
+      this.updatePointer(this.props.index);
     }, 100);
   }
 
@@ -67,7 +67,7 @@ class Tabs extends React.Component {
     return headers.map((item, idx) => {
       return React.cloneElement(item, {
         key: idx,
-        active: this.props.active === idx,
+        active: this.props.index === idx,
         onClick: this.handleHeaderClick.bind(this, idx, item)
       });
     });
@@ -77,7 +77,7 @@ class Tabs extends React.Component {
     return contents.map((item, idx) => {
       return React.cloneElement(item, {
         key: idx,
-        active: this.props.active === idx,
+        active: this.props.index === idx,
         tabIndex: idx
       });
     });
diff --git a/spec/components/tabs.jsx b/spec/components/tabs.jsx
index b29933c7a..393184090 100644
--- a/spec/components/tabs.jsx
+++ b/spec/components/tabs.jsx
@@ -4,16 +4,15 @@ import { Tabs, Tab } from '../../components/tabs';
 class TabsTest extends React.Component {
 
   state = {
-    active: 1
+    index: 1
   };
 
-  handleTabChange = (active) => {
-    this.setState({active});
-    console.log('change active');
+  handleTabChange = (index) => {
+    this.setState({index});
   };
 
   handleActive = () => {
-    console.log('special one activated');
+    console.log('Special one activated');
   };
 
   render () {
@@ -22,7 +21,7 @@ class TabsTest extends React.Component {
         <h5>Tabs</h5>
         <p>This tabs can be disabled or hidden</p>
 
-        <Tabs active={this.state.active} onChange={this.handleTabChange}>
+        <Tabs index={this.state.index} onChange={this.handleTabChange}>
           <Tab label='Primary'>
             <small>Primary content</small>
           </Tab>

From 832e01fe27a9e99f281836a2e59ab35b9a3b96da Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Fri, 13 Nov 2015 15:01:30 +0100
Subject: [PATCH 0040/1024] Move onActive to tab in tabs

---
 components/tabs/content.jsx | 7 -------
 components/tabs/tab.jsx     | 6 ++++++
 components/tabs/tabs.jsx    | 3 +--
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/components/tabs/content.jsx b/components/tabs/content.jsx
index 53f7c2273..5f002c9ab 100644
--- a/components/tabs/content.jsx
+++ b/components/tabs/content.jsx
@@ -5,7 +5,6 @@ class TabContent extends React.Component {
   static propTypes = {
     active: React.PropTypes.bool,
     className: React.PropTypes.string,
-    onActive: React.PropTypes.func,
     tabIndex: React.PropTypes.number
   };
 
@@ -14,12 +13,6 @@ class TabContent extends React.Component {
     className: ''
   };
 
-  componentWillReceiveProps (nextProps) {
-    if (nextProps.active && this.props.onActive) {
-      this.props.onActive();
-    }
-  }
-
   render () {
     let className = style.tab;
     if (this.props.active) className += ` ${style.active}`;
diff --git a/components/tabs/tab.jsx b/components/tabs/tab.jsx
index 364c28701..85579d98e 100644
--- a/components/tabs/tab.jsx
+++ b/components/tabs/tab.jsx
@@ -19,6 +19,12 @@ class TabHeader extends React.Component {
     hidden: false
   };
 
+  componentDidUpdate (prevProps) {
+    if (!prevProps.active && this.props.active && this.props.onActive) {
+      this.props.onActive();
+    }
+  }
+
   handleClick = () => {
     if (!this.props.disabled && this.props.onClick) {
       this.props.onClick();
diff --git a/components/tabs/tabs.jsx b/components/tabs/tabs.jsx
index d8cfc17e7..2730806d2 100644
--- a/components/tabs/tabs.jsx
+++ b/components/tabs/tabs.jsx
@@ -40,8 +40,7 @@ class Tabs extends React.Component {
       if (item.type === Tab) {
         headers.push(item);
         if (item.props.children) {
-          const {onActive, children} = item.props;
-          contents.push(<Content onActive={onActive} children={children}/>);
+          contents.push(<Content children={item.props.children}/>);
         }
       } else if (item.type === Content) {
         contents.push(item);

From 272a37fd4c55af6c09c5165bb673f89b3467bd0b Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 14 Nov 2015 10:26:50 +0100
Subject: [PATCH 0041/1024] Stateless table component

---
 components/table/components/head.jsx   |  50 ----------
 components/table/components/row.jsx    |  97 -------------------
 components/table/components/style.scss |  37 --------
 components/table/head.jsx              |  39 ++++++++
 components/table/index.jsx             | 125 ++++++++-----------------
 components/table/readme.md             |  59 +++++++-----
 components/table/row.jsx               |  72 ++++++++++++++
 components/table/style.scss            |  31 +++++-
 components/utils/index.js              |  15 +++
 spec/components/table.jsx              |  23 +++--
 10 files changed, 250 insertions(+), 298 deletions(-)
 delete mode 100644 components/table/components/head.jsx
 delete mode 100644 components/table/components/row.jsx
 delete mode 100644 components/table/components/style.scss
 create mode 100644 components/table/head.jsx
 create mode 100644 components/table/row.jsx

diff --git a/components/table/components/head.jsx b/components/table/components/head.jsx
deleted file mode 100644
index 3f869618e..000000000
--- a/components/table/components/head.jsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-import Checkbox from '../../checkbox';
-import style from './style';
-
-class Head extends React.Component {
-
-  static propTypes = {
-    className: React.PropTypes.string,
-    model: React.PropTypes.object,
-    onSelect: React.PropTypes.func,
-    selected: React.PropTypes.bool
-  };
-
-  static defaultProps = {
-    className: '',
-    model: {},
-    selected: false
-  };
-
-  handleSelectChange = (event) => {
-    this.props.onSelect(event);
-  };
-
-  renderCellSelectable () {
-    if (this.props.onSelect) {
-      return (
-        <th className={style.selectable}>
-          <Checkbox onChange={this.handleSelectChange} checked={this.props.selected}/>
-        </th>
-      );
-    }
-  }
-
-  render () {
-    return (
-      <thead data-react-toolbox-table='head' className={this.props.className}>
-        <tr>
-        { this.renderCellSelectable() }
-        {
-          Object.keys(this.props.model).map((key) => {
-            return (<th key={key}>{key}</th>);
-          })
-        }
-        </tr>
-      </thead>
-    );
-  }
-}
-
-export default Head;
diff --git a/components/table/components/row.jsx b/components/table/components/row.jsx
deleted file mode 100644
index 7e97cc767..000000000
--- a/components/table/components/row.jsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import React from 'react';
-import Checkbox from '../../checkbox';
-import style from './style';
-
-// Private
-const _castType = (type) => {
-  let input_type = 'text';
-  if (type === Date) {
-    input_type = 'date';
-  } else if (type === Number) {
-    input_type = 'number';
-  } else if (type === Boolean) {
-    input_type = 'checkbox';
-  }
-  return input_type;
-};
-
-const _castValue = (value, type) => {
-  let cast = value;
-  if (value && type === Date) {
-    cast = new Date(value).toISOString().slice(0, 10);
-  }
-  return cast;
-};
-
-class Row extends React.Component {
-
-  static propTypes = {
-    changed: React.PropTypes.bool,
-    className: React.PropTypes.string,
-    data: React.PropTypes.object,
-    index: React.PropTypes.number,
-    onChange: React.PropTypes.func,
-    onSelect: React.PropTypes.func,
-    selected: React.PropTypes.bool
-  };
-
-  static defaultProps = {
-    className: ''
-  };
-
-  handleInputChange = (key, event) => {
-    this.props.onChange(event, this, key, event.target.value);
-  };
-
-  handleSelectChange = (event) => {
-    this.props.onSelect(event, this);
-  };
-
-  renderCell (key) {
-    let value = this.props.data[key];
-
-    if (this.props.onChange) {
-      const attr = this.props.model[key];
-      value = _castValue(value, attr.type);
-      return (
-        <input
-          type={_castType(attr.type)}
-          value={value}
-          onChange={this.handleInputChange.bind(null, key)}
-        />
-      );
-    } else {
-      return value;
-    }
-  }
-
-  renderCellSelectable () {
-    if (this.props.onSelect) {
-      return (
-        <td className={style.selectable}>
-          <Checkbox onChange={this.handleSelectChange} checked={this.props.selected}/>
-        </td>
-      );
-    }
-  }
-
-  render () {
-    let className = `${this.props.className} ${style.row}`;
-    if (this.props.changed) className += ` ${style.changed}`;
-    if (this.props.onChange) className += ` ${style.editable}`;
-    if (this.props.selected) className += ` ${style.selected}`;
-
-    return (
-      <tr data-react-toolbox-table='row' className={className}>
-      { this.renderCellSelectable() }
-      {
-        Object.keys(this.props.model).map((key) => {
-          return (<td key={key}>{this.renderCell(key)}</td>);
-        })
-      }
-      </tr>
-    );
-  }
-}
-
-export default Row;
diff --git a/components/table/components/style.scss b/components/table/components/style.scss
deleted file mode 100644
index b09d8aebc..000000000
--- a/components/table/components/style.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-@import "http://github.com/base";
-@import "http://github.com/config";
-
-.row {
-  transition: background-color $animation-duration $animation-curve-default;
-  &:last-child {
-    border-color: transparent;
-  }
-  > td {
-    > input {
-      display: block;
-      width: 100%;
-      background-color: transparent;
-      border: none;
-    }
-  }
-}
-
-.selected, .row:hover {
-  background-color: $table-row-highlight;
-}
-
-.editable > * {
-  cursor: pointer;
-}
-
-.changed {
-  // @TODO: We've to create a style for changed rows.
-}
-
-.selectable {
-  padding-right: 0 !important;
-  width: 1.8 * $unit;
-  > * {
-    margin: 0;
-  }
-}
diff --git a/components/table/head.jsx b/components/table/head.jsx
new file mode 100644
index 000000000..6cdb59294
--- /dev/null
+++ b/components/table/head.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import Checkbox from '../checkbox';
+import style from './style';
+
+const TableHead = ({model, onSelect, selected}) => {
+  let selectCell;
+  const contentCells = Object.keys(model).map((key) => {
+    return <th key={key}>{key}</th>;
+  });
+
+  if (onSelect) {
+    selectCell = (
+      <th key='select' className={style.selectable}>
+        <Checkbox onChange={onSelect} checked={selected} />
+      </th>
+    );
+  }
+
+  return (
+    <thead>
+      <tr>{[selectCell, ...contentCells]}</tr>
+    </thead>
+  );
+};
+
+TableHead.propTypes = {
+  className: React.PropTypes.string,
+  model: React.PropTypes.object,
+  onSelect: React.PropTypes.func,
+  selected: React.PropTypes.bool
+};
+
+TableHead.defaultProps = {
+  className: '',
+  model: {},
+  selected: false
+};
+
+export default TableHead;
diff --git a/components/table/index.jsx b/components/table/index.jsx
index 08123699d..36983bfcc 100644
--- a/components/table/index.jsx
+++ b/components/table/index.jsx
@@ -1,121 +1,78 @@
 import React from 'react';
-import Head from './components/head';
-import Row from './components/row';
+import TableHead from './head';
+import TableRow from './row';
 import style from './style';
-import utils from '../utils';
 
 class Table extends React.Component {
-
   static propTypes = {
     className: React.PropTypes.string,
-    dataSource: React.PropTypes.array,
-    model: React.PropTypes.object,
     heading: React.PropTypes.bool,
+    model: React.PropTypes.object,
     onChange: React.PropTypes.func,
-    onSelect: React.PropTypes.func
+    onSelect: React.PropTypes.func,
+    selected: React.PropTypes.array,
+    source: React.PropTypes.array
   };
 
   static defaultProps = {
     className: '',
-    dataSource: [],
-    heading: true
+    heading: true,
+    selected: [],
+    source: []
   };
 
-  state = {
-    all: false,
-    dataSource: utils.cloneObject(this.props.dataSource),
-    selected_index: []
+  handleFullSelect = () => {
+    if (this.props.onSelect) {
+      const {source, selected} = this.props;
+      const newSelected = source.length === selected.length ? [] : source.map((i, idx) => idx);
+      this.props.onSelect(newSelected);
+    }
   };
 
-  componentWillReceiveProps = (next_props) => {
-    if (next_props.dataSource) {
-      this.setState({dataSource: utils.cloneObject(next_props.datasSource)});
+  handleRowSelect = (index) => {
+    if (this.props.onSelect) {
+      const position = this.props.selected.indexOf(index);
+      const newSelected = [...this.props.selected];
+      if (position !== -1) newSelected.splice(position, 1); else newSelected.push(index);
+      this.props.onSelect(newSelected);
     }
   };
 
-  handleRowChange = (event, row, key, value) => {
-    const dataSource = this.state.dataSource;
-    dataSource[row.props.index][key] = value;
-    this.setState({ dataSource });
+  handleRowChange = (index, key, value) => {
     if (this.props.onChange) {
-      this.props.onChange(event, dataSource[row.props.index], dataSource);
+      this.props.onChange(index, key, value);
     }
   };
 
-  handleRowSelect = (event, instance) => {
-    const index = instance.props.index;
-    const selected_index = this.state.selected_index;
-    const selected = selected_index.indexOf(index) === -1;
-    if (selected) {
-      selected_index.push(index);
-    } else {
-      delete selected_index[selected_index.indexOf(index)];
+  renderHead () {
+    if (this.props.heading) {
+      const {model, selected, source} = this.props;
+      const isSelected = selected.length === source.length;
+      return <TableHead model={model} onSelect={this.handleFullSelect} selected={isSelected} />;
     }
-    this.setState({ selected_index: selected_index });
-    this.props.onSelect(event, this.getSelected());
-  };
-
-  handleRowsSelect = () => {
-    const all = !this.state.all;
-    this.setState({ all });
-    this.props.onSelect(event, this.getSelected(all));
-  };
-
-  isChanged = (data, base) => {
-    let changed = false;
-    Object.keys(data).map((key) => {
-      if (data[key] !== base[key]) {
-        changed = true;
-      }
-    });
-    return changed;
-  };
-
-  getSelected = (all = false) => {
-    const rows = [];
-    this.state.dataSource.map((row, index) => {
-      if (all || this.state.selected_index.indexOf(index) !== -1) rows.push(row);
-    });
-    return rows;
   }
 
-  renderHead () {
-    if (this.props.heading) {
+  renderBody () {
+    const rows = this.props.source.map((data, idx) => {
       return (
-        <Head
+        <TableRow
+          data={data}
+          index={idx}
+          key={idx}
           model={this.props.model}
-          onSelect={this.props.onSelect ? this.handleRowsSelect : null}
-          selected={this.state.all}
+          onChange={this.props.onChange ? this.handleRowChange.bind(this, idx) : null}
+          onSelect={this.handleRowSelect.bind(this, idx)}
+          selected={this.props.selected.indexOf(idx) !== -1}
         />
       );
-    }
-  }
+    });
 
-  renderBody () {
-    return (
-      <tbody>
-      {
-        this.state.dataSource.map((data, index) => {
-          return (
-            <Row
-              changed={this.isChanged(data, this.props.dataSource[index])}
-              data={data}
-              index={index}
-              key={index}
-              model={this.props.model}
-              onChange={this.props.onChange ? this.handleRowChange : null}
-              onSelect={this.props.onSelect ? this.handleRowSelect : null}
-              selected={this.state.all || this.state.selected_index.indexOf(index) !== -1}
-            />
-          );
-        })
-      }
-      </tbody>
-    );
+    return <tbody>{rows}</tbody>;
   }
 
   render () {
-    const className = `${this.props.className} ${style.root}`;
+    let className = style.root;
+    if (this.props.className) className += ` ${this.props.className}`;
     return (
       <table data-react-toolbox='table' className={className}>
         { this.renderHead() }
diff --git a/components/table/readme.md b/components/table/readme.md
index 2a8456f71..349ce9af6 100644
--- a/components/table/readme.md
+++ b/components/table/readme.md
@@ -1,43 +1,60 @@
 # Table
 
-The Table component is an enhanced version of the standard HTML `<table>`. A data-table consists of rows and columns of well-formatted data, presented with appropriate user interaction capabilities. This component uses a solid typed model, helping you to create formatted formated cells. These cells can be editable if you subscribe to `onChange` method who dispatch then new dataSource with each change.
+The Table component is an enhanced version of the standard HTML `<table>`. A data-table consists of rows and columns of well-formatted data, presented with appropriate user interaction capabilities. This component uses a solid typed model, helping you to create formatted formated cells. These cells can be editable if you subscribe to `onChange` method who dispatch then new source with each change.
 
 <!-- example -->
 ```jsx
 import Table from 'react-toolbox/lib/table';
 
 const UserModel = {
-  name: {type: String}
-,
-  twitter: {type: String}
-,
-  birthdate: {type: Date}
-,
-  cats: {type: Number}
-,
-  dogs: {type: Number}
-,
+  name: {type: String},
+  twitter: {type: String},
+  birthdate: {type: Date},
+  cats: {type: Number},
+  dogs: {type: Number},
   active: {type: Boolean}
 };
 
 const users = [
-  {name: 'Javi Jimenez', twitter: '@soyjavi', birthdate: new Date(1980, 3, 11), cats: 1}
-,
+  {name: 'Javi Jimenez', twitter: '@soyjavi', birthdate: new Date(1980, 3, 11), cats: 1},
   {name: 'Javi Velasco', twitter: '@javivelasco', birthdate: new Date(1987, 1, 1), dogs: 1, active: true}
 ];
 
-const TableTest = () => (
-  <Table model={UserModel} dataSource={users} />
-)
+class TableTest extends React.Component {
+  state = { selected: [], source: users };
+
+  handleChange = (row, key, value) => {
+    const source = this.state.source;
+    source[row][key] = value;
+    this.setState({source});
+  };
+
+  handleSelect = (selected) => {
+    this.setState({selected});
+  };
+
+  render () {
+    return (
+      <Table
+        model={UserModel}
+        onChange={this.handleChange}
+        onSelect={this.handleSelect}
+        selected={this.state.selected}
+        source={this.state.source}
+      />
+    );
+  }
+}
 ```
 
 ## Properties
 
 | Name              | Type          | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `className`     | `String`      | `''`            | Sets a class to style of the Component.|
-| `dataSource`    | `Array`       |           | array representing all items for show.|
-| `model`         | `Object`      |                 | If true, component will be disabled.|
+| `className`     | `String`      | `''`            | Sets a custom class to style the Component.|
 | `heading`       | `Bool`        | `true`          | If true, component will show a heading using model field names.|
-| `onChange`      | `Function`    |                 | Callback function that is fired when the components's value changes.|
-| `onSelect`      | `Function`    |                 | Callback function when  selects a determinate row.|
+| `model`         | `Object`      |                 | Object describing the data model that represents each object in the `source`.|
+| `onChange`      | `Function`    |                 | Callback function that is fired when an item in a row changes. If set, rows are editable. |
+| `onSelect`      | `Function`    |                 | Callback function invoked when the row selection changes.|
+| `selected`    | `Array`       |                  | Array of indexes of the items in the source that should appear as selected.|
+| `source`    | `Array`       |                  | Array of objects representing each item to show.|
diff --git a/components/table/row.jsx b/components/table/row.jsx
new file mode 100644
index 000000000..b0a0cd9d1
--- /dev/null
+++ b/components/table/row.jsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import Checkbox from '../checkbox';
+import utils from '../utils';
+import style from './style';
+
+class TableRow extends React.Component {
+  static propTypes = {
+    data: React.PropTypes.object,
+    onChange: React.PropTypes.func,
+    onSelect: React.PropTypes.func,
+    selected: React.PropTypes.bool
+  };
+
+  handleInputChange = (key, type, event) => {
+    const value = type === 'checkbox' ? event.target.checked : event.target.value;
+    this.props.onChange(key, value);
+  };
+
+  renderSelectCell () {
+    if (this.props.onSelect) {
+      return (
+        <td className={style.selectable}>
+          <Checkbox checked={this.props.selected} onChange={this.props.onSelect} />
+        </td>
+      );
+    }
+  }
+
+  renderCells () {
+    return Object.keys(this.props.model).map((key) => {
+      return <td key={key}>{this.renderCell(key)}</td>;
+    });
+  }
+
+  renderCell (key) {
+    const value = this.props.data[key];
+    if (this.props.onChange) {
+      return this.renderInput(key, value);
+    } else if (value) {
+      return value.toString();
+    }
+  }
+
+  renderInput (key, value) {
+    const inputType = utils.inputTypeForPrototype(this.props.model[key].type);
+    const inputValue = utils.prepareValueForInput(value, inputType);
+    const checked = inputType === 'checkbox' && value ? true : null;
+    return (
+      <input
+        checked={checked}
+        onChange={this.handleInputChange.bind(null, key, inputType)}
+        type={inputType}
+        value={inputValue}
+      />
+    );
+  }
+
+  render () {
+    let className = style.row;
+    if (this.props.onChange) className += ` ${style.editable}`;
+    if (this.props.selected) className += ` ${style.selected}`;
+
+    return (
+      <tr data-react-toolbox-table='row' className={className}>
+        { this.renderSelectCell() }
+        { this.renderCells() }
+      </tr>
+    );
+  }
+}
+
+export default TableRow;
diff --git a/components/table/style.scss b/components/table/style.scss
index 6dd2531fb..36f98c538 100644
--- a/components/table/style.scss
+++ b/components/table/style.scss
@@ -10,7 +10,6 @@
     height: $table-row-height;
     line-height: $table-row-height;
     border-bottom: $table-row-divider;
-
   }
   th {
     font-weight: $font-weight-bold;
@@ -21,5 +20,35 @@
   th, td {
     position: relative;
     padding: 0 $table-row-offset;
+    &.selectable {
+      width: 1.8 * $unit;
+      padding-right: 0;
+      > * {
+        margin: 0;
+      }
+    }
+  }
+}
+
+.row {
+  transition: background-color $animation-duration $animation-curve-default;
+  &:last-child {
+    border-color: transparent;
   }
+  > td {
+    > input {
+      display: block;
+      width: 100%;
+      background-color: transparent;
+      border: 0;
+    }
+  }
+}
+
+.selected, .row:hover {
+  background-color: $table-row-highlight;
+}
+
+.editable > * {
+  cursor: pointer;
 }
diff --git a/components/utils/index.js b/components/utils/index.js
index e668417f2..e811df03f 100644
--- a/components/utils/index.js
+++ b/components/utils/index.js
@@ -44,6 +44,21 @@ module.exports = {
     return JSON.parse(JSON.stringify(object));
   },
 
+  inputTypeForPrototype (prototype) {
+    if (prototype === Date) return 'date';
+    if (prototype === Number) return 'number';
+    if (prototype === Boolean) return 'checkbox';
+    return 'text';
+  },
+
+  prepareValueForInput (value, type) {
+    if (type === 'date') return new Date(value).toISOString().slice(0, 10);
+    if (type === 'checkbox') {
+      return value ? 'on' : null;
+    }
+    return value;
+  },
+
   events: require('./events'),
   prefixer: require('./prefixer'),
   time: require('./time'),
diff --git a/spec/components/table.jsx b/spec/components/table.jsx
index 9dbe49fbb..4edb8bd0c 100644
--- a/spec/components/table.jsx
+++ b/spec/components/table.jsx
@@ -12,17 +12,23 @@ const UserModel = {
 
 const users = [
   {name: 'Javi Jimenez', twitter: '@soyjavi', birthdate: new Date(1980, 3, 11), cats: 1},
-  {name: 'Javi Velasco', twitter: '@javivelasco', birthdate: new Date(1987, 1, 1), dogs: 1, active: true}
+  {name: 'Javi Velasco', twitter: '@javivelasco', birthdate: new Date(1987, 1, 1), dogs: 1, owner: true}
 ];
 
 class TableTest extends React.Component {
+  state = {
+    selected: [],
+    source: users
+  };
 
-  handleTableChange = (event, row, dataSource) => {
-    console.log('handleTableChange', row, dataSource);
+  handleChange = (row, key, value) => {
+    const source = this.state.source;
+    source[row][key] = value;
+    this.setState({source});
   };
 
-  handleTableRowSelect = (event, selected) => {
-    console.log('handleTableRowSelect', selected);
+  handleSelect = (selected) => {
+    this.setState({selected});
   };
 
   render () {
@@ -32,9 +38,10 @@ class TableTest extends React.Component {
         <p style={{marginBottom: '10px'}}>Organized data.</p>
         <Table
           model={UserModel}
-          dataSource={users}
-          onChange={this.handleTableChange}
-          onSelect={this.handleTableRowSelect}
+          onChange={this.handleChange}
+          onSelect={this.handleSelect}
+          selected={this.state.selected}
+          source={this.state.source}
         />
       </section>
     );

From db93a7522948b274e45294f8f7c0c64950b354af Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 14 Nov 2015 12:36:28 +0100
Subject: [PATCH 0042/1024] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 239a4f415..ab3fab85f 100644
--- a/README.md
+++ b/README.md
@@ -3,8 +3,8 @@
 ![Last version](https://img.shields.io/github/tag/react-toolbox/react-toolbox.svg?style=flat-square)
 [![Build Status](http://img.shields.io/travis/react-toolbox/react-toolbox/master.svg?style=flat-square)](https://travis-ci.org/react-toolbox/react-toolbox)
 [![NPM Status](http://img.shields.io/npm/dm/react-toolbox.svg?style=flat-square)](https://www.npmjs.org/package/react-toolbox)
+[![react-toolbox channel on discord](https://img.shields.io/badge/discord-%23react--toolbox%20%40%20reactiflux-61dafb.svg?style=flat-square)](https://discord.gg/0ZcbPKXt5bW2GqFj)
 [![Donate](https://img.shields.io/badge/donate-paypal-blue.svg?style=flat-square)](https://paypal.me/javivelasco)
-[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/react-toolbox/react-toolbox?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=body_badge)
 
 React Toolbox is a set of [React](http://facebook.github.io/react/) components that implement [Google's Material Design specification](https://www.google.com/design/spec/material-design/introduction.html). It's powered by [CSS Modules](https://github.com/css-modules/css-modules) and harmoniously integrates with your [Webpack](http://webpack.github.io/) workflow. You can take a tour through our documentation website and try the components live!
 

From 63a1c87655e13b7e61bd5636a3bad9fb780ab75c Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 14 Nov 2015 12:38:00 +0100
Subject: [PATCH 0043/1024] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index ab3fab85f..68d006898 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # React Toolbox
 
-![Last version](https://img.shields.io/github/tag/react-toolbox/react-toolbox.svg?style=flat-square)
+[![npm version](https://img.shields.io/npm/v/react-toolbox.svg?style=flat-square)](https://www.npmjs.com/package/react-toolbox)
 [![Build Status](http://img.shields.io/travis/react-toolbox/react-toolbox/master.svg?style=flat-square)](https://travis-ci.org/react-toolbox/react-toolbox)
 [![NPM Status](http://img.shields.io/npm/dm/react-toolbox.svg?style=flat-square)](https://www.npmjs.org/package/react-toolbox)
 [![react-toolbox channel on discord](https://img.shields.io/badge/discord-%23react--toolbox%20%40%20reactiflux-61dafb.svg?style=flat-square)](https://discord.gg/0ZcbPKXt5bW2GqFj)

From 14c8cb5b2089cbe47a6aaab7ec564981af0090f8 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 14 Nov 2015 21:38:17 +0100
Subject: [PATCH 0044/1024] Add Overlay component

---
 components/_globals.scss        |  1 +
 components/app/index.jsx        |  6 ++++-
 components/overlay/_config.scss |  2 ++
 components/overlay/index.jsx    | 47 +++++++++++++++++++++++++++++++++
 components/overlay/style.scss   | 37 ++++++++++++++++++++++++++
 5 files changed, 92 insertions(+), 1 deletion(-)
 create mode 100644 components/overlay/_config.scss
 create mode 100644 components/overlay/index.jsx
 create mode 100644 components/overlay/style.scss

diff --git a/components/_globals.scss b/components/_globals.scss
index 25101a6c0..f954dd668 100644
--- a/components/_globals.scss
+++ b/components/_globals.scss
@@ -49,6 +49,7 @@ $animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
 $animation-curve-default: $animation-curve-fast-out-slow-in !default;
 
 //-- Indexes
+$z-index-highest: 300;
 $z-index-higher: 200;
 $z-index-high: 100;
 $z-index-normal: 1;
diff --git a/components/app/index.jsx b/components/app/index.jsx
index 4f1d4f232..c156c0313 100644
--- a/components/app/index.jsx
+++ b/components/app/index.jsx
@@ -8,7 +8,11 @@ const App = (props) => {
   }
 
   return (
-    <div data-react-toolbox='app' className={className}>
+    <div
+      className={className}
+      data-react-toolbox='app'
+      id='react-toolbox-app'
+    >
       {props.children}
     </div>
   );
diff --git a/components/overlay/_config.scss b/components/overlay/_config.scss
new file mode 100644
index 000000000..e56829bbd
--- /dev/null
+++ b/components/overlay/_config.scss
@@ -0,0 +1,2 @@
+$overlay-color: unquote("rgb(#{$color-black})") !default;
+$overlay-opacity: 0.5 !default;
diff --git a/components/overlay/index.jsx b/components/overlay/index.jsx
new file mode 100644
index 000000000..9f0012fb5
--- /dev/null
+++ b/components/overlay/index.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import style from './style';
+
+class Overlay extends React.Component {
+  static propTypes = {
+    active: React.PropTypes.bool,
+    className: React.PropTypes.string
+  };
+
+  static defaultProps = {
+    className: ''
+  };
+
+  componentDidMount () {
+    this.app = document.getElementById('react-toolbox-app') || document.body;
+    this.node = document.createElement('div');
+    this.app.appendChild(this.node);
+    this.handleRender();
+  }
+
+  componentDidUpdate () {
+    this.handleRender();
+  }
+
+  componentWillUnmount () {
+    ReactDOM.unmountComponentAtNode(this.node);
+    this.app.removeChild(this.node);
+  }
+
+  handleRender () {
+    let className = style.root;
+    if (this.props.active) className += ` ${style.active}`;
+    ReactDOM.render(
+      <div className={className}>
+        <div className={style.overlay}></div>
+        {this.props.children}
+      </div>
+    , this.node);
+  }
+
+  render () {
+    return React.DOM.noscript();
+  }
+}
+
+export default Overlay;
diff --git a/components/overlay/style.scss b/components/overlay/style.scss
new file mode 100644
index 000000000..49c2c25cf
--- /dev/null
+++ b/components/overlay/style.scss
@@ -0,0 +1,37 @@
+@import "http://github.com/base";
+@import "http://github.com/config";
+
+.root {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: $z-index-highest;
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  flex-direction: column;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: $overlay-color;
+  opacity: 0;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transition-property: opacity;
+}
+
+.active {
+  pointer-events: all;
+  > .overlay {
+    opacity: $overlay-opacity;
+  }
+}

From 2c17688db1116e4419c100fb0d0dfac08384eb7f Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 14 Nov 2015 21:42:13 +0100
Subject: [PATCH 0045/1024] Use new Overlay component in dialogs and
 dependencies

---
 components/date_picker/style.scss |  2 +-
 components/dialog/index.jsx       |  8 ++--
 components/dialog/style.scss      | 73 ++++++++-----------------------
 components/overlay/index.jsx      |  5 ++-
 components/time_picker/style.scss | 22 +++++-----
 spec/components/dialog.jsx        |  2 +-
 6 files changed, 37 insertions(+), 75 deletions(-)

diff --git a/components/date_picker/style.scss b/components/date_picker/style.scss
index e06fba4ea..f79afcea7 100644
--- a/components/date_picker/style.scss
+++ b/components/date_picker/style.scss
@@ -58,7 +58,7 @@
   }
 }
 
-.dialog > [role="content"] {
+.dialog {
   width: $datepicker-dialog-width;
   > [role="body"] {
     padding: 0;
diff --git a/components/dialog/index.jsx b/components/dialog/index.jsx
index 667169a45..0911dc94b 100644
--- a/components/dialog/index.jsx
+++ b/components/dialog/index.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import Button from '../button';
+import Overlay from '../overlay';
 import style from './style';
 
 const Dialog = (props) => {
@@ -14,9 +15,8 @@ const Dialog = (props) => {
   if (props.className) className += ` ${props.className}`;
 
   return (
-    <div data-react-toolbox='dialog' className={className}>
-      <div role='overlay' className={style.overlay} onClick={props.onOverlayClick} />
-      <div role='content' className={style.content}>
+    <Overlay active={props.active} onClick={props.onOverlayClick}>
+      <div className={className}>
         <section role='body' className={style.body}>
           { props.title ? <h6 className={style.title}>{props.title}</h6> : null }
           { props.children }
@@ -25,7 +25,7 @@ const Dialog = (props) => {
           { actions }
         </nav>
       </div>
-    </div>
+    </Overlay>
   );
 };
 
diff --git a/components/dialog/style.scss b/components/dialog/style.scss
index 8f9845a6a..13074510e 100644
--- a/components/dialog/style.scss
+++ b/components/dialog/style.scss
@@ -2,38 +2,6 @@
 @import "http://github.com/config";
 
 .root {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: $z-index-high;
-  display: flex;
-  width: 100vw;
-  height: 100vh;
-  flex-direction: column;
-  align-content: center;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-  > .content {
-    opacity: 0;
-    transform: translateY(-$dialog-translate-y);
-  }
-}
-
-.overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: $color-overlay;
-  opacity: 0;
-  transition-timing-function: $animation-curve-default;
-  transition-duration: $animation-duration;
-  transition-property: opacity;
-}
-
-.content {
   display: flex;
   max-width: 96vw;
   max-height: 96vh;
@@ -41,10 +9,28 @@
   background-color: $dialog-color-white;
   border-radius: $dialog-border-radius;
   box-shadow: $zdepth-shadow-5;
+  opacity: 0;
   transition-delay: $animation-delay;
   transition-timing-function: $animation-curve-default;
   transition-duration: $animation-duration;
   transition-property: opacity, transform;
+  transform: translateY(-$dialog-translate-y);
+  &.active {
+    opacity: 1;
+    transform: translateY(0%);
+  }
+}
+
+.small {
+  width: 30vw;
+}
+
+.normal {
+  width: 50vw;
+}
+
+.large {
+  width: 96vw;
 }
 
 .title {
@@ -73,26 +59,3 @@
   padding-left: $dialog-navigation-padding;
   margin-left: $dialog-navigation-padding;
 }
-
-.active {
-  pointer-events: all;
-  > .overlay {
-    opacity: $color-overlay-opacity;
-  }
-  > .content {
-    opacity: 1;
-    transform: translateY(0%);
-  }
-}
-
-.small > .content {
-  width: 30vw;
-}
-
-.normal > .content {
-  width: 50vw;
-}
-
-.large > .content {
-  width: 96vw;
-}
diff --git a/components/overlay/index.jsx b/components/overlay/index.jsx
index 9f0012fb5..5171ebd8a 100644
--- a/components/overlay/index.jsx
+++ b/components/overlay/index.jsx
@@ -5,7 +5,8 @@ import style from './style';
 class Overlay extends React.Component {
   static propTypes = {
     active: React.PropTypes.bool,
-    className: React.PropTypes.string
+    className: React.PropTypes.string,
+    onClick: React.PropTypes.func
   };
 
   static defaultProps = {
@@ -33,7 +34,7 @@ class Overlay extends React.Component {
     if (this.props.active) className += ` ${style.active}`;
     ReactDOM.render(
       <div className={className}>
-        <div className={style.overlay}></div>
+        <div className={style.overlay} onClick={this.props.onClick}></div>
         {this.props.children}
       </div>
     , this.node);
diff --git a/components/time_picker/style.scss b/components/time_picker/style.scss
index f5e77637d..dac9a4254 100644
--- a/components/time_picker/style.scss
+++ b/components/time_picker/style.scss
@@ -45,19 +45,17 @@
 }
 
 .dialog {
-  > [role="content"] {
-    width: $timepicker-dialog-width;
-    > [role="body"] {
-      padding: 0;
+  width: $timepicker-dialog-width;
+  > [role="body"] {
+    padding: 0;
+  }
+  > [role="navigation"] > .button {
+    color: $timepicker-primary-color;
+    &:hover {
+      background: $timepicker-primary-hover-color;
     }
-    > [role="navigation"] > .button {
-      color: $timepicker-primary-color;
-      &:hover {
-        background: $timepicker-primary-hover-color;
-      }
-      &:focus:not(:active) {
-        background: $timepicker-primary-hover-color;
-      }
+    &:focus:not(:active) {
+      background: $timepicker-primary-hover-color;
     }
   }
   &.display-hours .hours, &.display-minutes .minutes, &.format-am .am,
diff --git a/spec/components/dialog.jsx b/spec/components/dialog.jsx
index 861b375ad..9c990b3df 100644
--- a/spec/components/dialog.jsx
+++ b/spec/components/dialog.jsx
@@ -27,7 +27,7 @@ class DialogTest extends React.Component {
         <Dialog
           actions={this.actions}
           active={this.state.active}
-          title="Use Google\'s location service?"
+          title="Use Google's location service?"
           onOverlayClick={this.handleToggle}
         >
           <p>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</p>

From cadc3e2bc702717383bf3ba2ef7105b1adbfcdc8 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 14 Nov 2015 22:00:35 +0100
Subject: [PATCH 0046/1024] Use Overlay component in drawers

---
 components/drawer/index.jsx  | 16 ++++----
 components/drawer/style.scss | 74 ++++++++++--------------------------
 2 files changed, 30 insertions(+), 60 deletions(-)

diff --git a/components/drawer/index.jsx b/components/drawer/index.jsx
index 914cd41ea..83ce1489f 100644
--- a/components/drawer/index.jsx
+++ b/components/drawer/index.jsx
@@ -1,18 +1,20 @@
 import React from 'react';
+import Overlay from '../overlay';
 import style from './style';
 
 const Drawer = (props) => {
-  let className = `${style.drawer} ${style[props.type]}`;
+  let className = `${style.root} ${style[props.type]}`;
   if (props.active) className += ` ${style.active}`;
   if (props.className) className += ` ${props.className}`;
 
   return (
-    <div data-react-toolbox='drawer' className={className}>
-      <div className={style.overlay} onClick={props.onOverlayClick}></div>
-      <aside className={style.content}>
-        { props.children }
-      </aside>
-    </div>
+    <Overlay active={props.active} onClick={props.onOverlayClick}>
+      <div data-react-toolbox='drawer' className={className}>
+        <aside className={style.content}>
+          { props.children }
+        </aside>
+      </div>
+    </Overlay>
   );
 };
 
diff --git a/components/drawer/style.scss b/components/drawer/style.scss
index 7e5e2f80a..590e4d26c 100644
--- a/components/drawer/style.scss
+++ b/components/drawer/style.scss
@@ -1,59 +1,7 @@
 @import "http://github.com/base";
 @import "http://github.com/config";
 
-.drawer {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  z-index: $z-index-high;
-  width: 100vw;
-  height: 100vh;
-  pointer-events: none;
-}
-
-.active {
-  pointer-events: all;
-  > .content {
-    transition-delay: $animation-delay;
-    transform: translateX(0);
-  }
-  > .overlay {
-    opacity: $color-overlay-opacity;
-  }
-}
-
-.left {
-  > .content {
-    left: 0;
-    border-right: 1px solid $drawer-border-color;
-  }
-  &:not(.active) > .content {
-    transform: translateX(- 100%);
-  }
-}
-
-.right {
-  > .content {
-    right: 0;
-    border-left: 1px solid $drawer-border-color;
-  }
-  &:not(.active) > .content {
-    transform: translateX(100%);
-  }
-}
-
-.overlay {
-  width: 100%;
-  height: 100%;
-  background-color: $drawer-overlay-color;
-  opacity: 0;
-  transition-timing-function: $animation-curve-default;
-  transition-duration: $animation-duration;
-  transition-property: opacity;
-}
-
-.content {
+.root {
   @include shadow-2dp();
   position: absolute;
   top: 0;
@@ -62,6 +10,7 @@
   height: 100%;
   overflow-y: scroll;
   color: $drawer-text-color;
+  pointer-events: none;
   background-color: $drawer-background-color;
   transition-delay: 0s;
   transition-timing-function: $animation-curve-default;
@@ -69,4 +18,23 @@
   transition-property: transform;
   transform-style: preserve-3d;
   will-change: transform;
+  &.active {
+    pointer-events: all;
+    transition-delay: $animation-delay;
+    transform: translateX(0);
+  }
+  &.right {
+    right: 0;
+    border-left: 1px solid $drawer-border-color;
+    &:not(.active) {
+      transform: translateX(100%);
+    }
+  }
+  &.left {
+    left: 0;
+    border-right: 1px solid $drawer-border-color;
+    &:not(.active) {
+      transform: translateX(- 100%);
+    }
+  }
 }

From 5fbe67b9acbadbdcd40c530a9142f4f008735736 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 15 Nov 2015 03:20:23 +0100
Subject: [PATCH 0047/1024] Add react-toolbox attribute to dialog

---
 components/dialog/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/dialog/index.jsx b/components/dialog/index.jsx
index 0911dc94b..921820e0d 100644
--- a/components/dialog/index.jsx
+++ b/components/dialog/index.jsx
@@ -16,7 +16,7 @@ const Dialog = (props) => {
 
   return (
     <Overlay active={props.active} onClick={props.onOverlayClick}>
-      <div className={className}>
+      <div data-react-toolbox='dialog' className={className}>
         <section role='body' className={style.body}>
           { props.title ? <h6 className={style.title}>{props.title}</h6> : null }
           { props.children }

From 6cd6fd73406d4d5f36be0edf4c2a23b90a66d8f0 Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Sun, 15 Nov 2015 10:17:07 +0700
Subject: [PATCH 0048/1024] Now opacity set by property

---
 components/overlay/_config.scss |  1 -
 components/overlay/index.jsx    | 19 +++++++++++++++----
 components/overlay/style.scss   |  3 ---
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/components/overlay/_config.scss b/components/overlay/_config.scss
index e56829bbd..fc0b37857 100644
--- a/components/overlay/_config.scss
+++ b/components/overlay/_config.scss
@@ -1,2 +1 @@
 $overlay-color: unquote("rgb(#{$color-black})") !default;
-$overlay-opacity: 0.5 !default;
diff --git a/components/overlay/index.jsx b/components/overlay/index.jsx
index 5171ebd8a..37adeaea4 100644
--- a/components/overlay/index.jsx
+++ b/components/overlay/index.jsx
@@ -6,11 +6,12 @@ class Overlay extends React.Component {
   static propTypes = {
     active: React.PropTypes.bool,
     className: React.PropTypes.string,
-    onClick: React.PropTypes.func
+    onClick: React.PropTypes.func,
+    opacity: React.PropTypes.number
   };
 
   static defaultProps = {
-    className: ''
+    opacity: 0.5
   };
 
   componentDidMount () {
@@ -31,10 +32,20 @@ class Overlay extends React.Component {
 
   handleRender () {
     let className = style.root;
-    if (this.props.active) className += ` ${style.active}`;
+    let overlayStyle = {};
+    if (this.props.active) {
+      className += ` ${style.active}`;
+      if (this.props.opacity) overlayStyle.opacity = this.props.opacity;
+    }
+    if (this.props.className) className += ` ${className}`;
+
     ReactDOM.render(
       <div className={className}>
-        <div className={style.overlay} onClick={this.props.onClick}></div>
+        <div
+          className={style.overlay}
+          onClick={this.props.onClick}
+          style={overlayStyle}
+        />
         {this.props.children}
       </div>
     , this.node);
diff --git a/components/overlay/style.scss b/components/overlay/style.scss
index 49c2c25cf..59e940afd 100644
--- a/components/overlay/style.scss
+++ b/components/overlay/style.scss
@@ -31,7 +31,4 @@
 
 .active {
   pointer-events: all;
-  > .overlay {
-    opacity: $overlay-opacity;
-  }
 }

From 9aca75a1d7ef92212f618101f9099bdfcced6cbd Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Sun, 15 Nov 2015 10:20:22 +0700
Subject: [PATCH 0049/1024] Now <Snackbar> uses internal component <overlay>
 (using its new property opacity)

---
 components/snackbar/index.jsx | 17 +++++++++++------
 components/snackbar/readme.md |  2 ++
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/components/snackbar/index.jsx b/components/snackbar/index.jsx
index 8ef748108..d5e4f1057 100644
--- a/components/snackbar/index.jsx
+++ b/components/snackbar/index.jsx
@@ -1,16 +1,19 @@
 import React from 'react';
-import style from './style';
 import Button from '../button';
 import FontIcon from '../font_icon';
+import Overlay from '../overlay';
+import style from './style';
 
 class Snackbar extends React.Component {
   static propTypes = {
     action: React.PropTypes.string,
+    active: React.PropTypes.bool,
     className: React.PropTypes.string,
     icon: React.PropTypes.string,
     label: React.PropTypes.string.isRequired,
     onClick: React.PropTypes.func,
     onTimeout: React.PropTypes.func,
+    onOverlayClick: React.PropTypes.func,
     timeout: React.PropTypes.number,
     type: React.PropTypes.string
   };
@@ -42,11 +45,13 @@ class Snackbar extends React.Component {
     if (this.props.className) className += ` ${this.props.className}`;
 
     return (
-      <div data-react-toolbox='snackbar' className={className}>
-        { this.props.icon ? <FontIcon value={this.props.icon} className={style.icon} /> : null }
-        <span className={style.label}>{this.props.label}</span>
-        { this.renderButton() }
-      </div>
+      <Overlay active={this.props.active} onClick={this.props.onOverlayClick} opacity={0}>
+        <div data-react-toolbox='snackbar' className={className}>
+          { this.props.icon ? <FontIcon value={this.props.icon} className={style.icon} /> : null }
+          <span className={style.label}>{this.props.label}</span>
+          { this.renderButton() }
+        </div>
+      </Overlay>
     );
   }
 }
diff --git a/components/snackbar/readme.md b/components/snackbar/readme.md
index 5abcdb1cc..0deb6c292 100644
--- a/components/snackbar/readme.md
+++ b/components/snackbar/readme.md
@@ -38,10 +38,12 @@ class SnackbarTest extends React.Component {
 | Name          | Type    | Default   | Description|
 |:-----|:-----|:-----|:-----|
 | `action`  | `String` |   | Label for the action component inside the Snackbar.|
+| `active`        | `Boolean`       |  `false`        | If true, the snackbar will be active.|
 | `className` | `String`  | `''`      | Additional class name to provide custom styling.|
 | `icon` | `String`  |       | String key for an icon displayed in left side of the snackbar.|
 | `label` | `String`  |       | Text to display in the content.|
 | `onClick` | `Function`  |       | Callback function that will be called when the button action is clicked.|
+| `onOverlayClick`   | `Function`   |             | Callback to be invoked when the dialog overlay is clicked.|
 | `onTimeout` | `Function`  |       | Callback function when finish the set timeout.|
 | `timeout` | `Number`  |       | Amount of time after the Snackbar will be automatically hidden.|
 | `type` | `String`  |       | Indicates the action type. Can be `accept`, `warning` or `cancel`|

From bacb02b8e465f7cbc630384d3fb1e382e5d0db85 Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Sun, 15 Nov 2015 12:13:05 +0700
Subject: [PATCH 0050/1024] Get real height of parent

---
 components/tooltip/_config.scss | 1 +
 components/tooltip/index.jsx    | 4 +++-
 components/tooltip/style.scss   | 5 ++---
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/tooltip/_config.scss b/components/tooltip/_config.scss
index c29f4c415..497dee2f9 100644
--- a/components/tooltip/_config.scss
+++ b/components/tooltip/_config.scss
@@ -1,4 +1,5 @@
 $tooltip-background: rgba(97,97,97,.9);
+$tooltip-margin: 0.5 * $unit;
 $tooltip-border-radius: .2 * $unit;
 $tooltip-color: #fff;
 $tooltip-font-size: $unit;
diff --git a/components/tooltip/index.jsx b/components/tooltip/index.jsx
index 2c07add98..01e5e2734 100644
--- a/components/tooltip/index.jsx
+++ b/components/tooltip/index.jsx
@@ -22,8 +22,10 @@ class Tooltip extends React.Component {
     const parent = node.parentNode;
     if (parent) {
       parent.onmouseover = () => {
+        const parentStyle =  parent.currentStyle || window.getComputedStyle(parent);
+        const offset = parseFloat(parentStyle['margin-bottom']) + parseFloat(parentStyle['padding-bottom']);
         const position = parent.getBoundingClientRect();
-        node.style.top = `${position.top + position.height}px`;
+        node.style.top = `${position.top + position.height - offset}px`;
         node.style.left = `${position.left + parseInt((position.width / 2) - (node.offsetWidth / 2))}px`;
         if (!this.state.active) this.setState({ active: true});
       };
diff --git a/components/tooltip/style.scss b/components/tooltip/style.scss
index 75e3d9609..d9e602325 100644
--- a/components/tooltip/style.scss
+++ b/components/tooltip/style.scss
@@ -7,8 +7,8 @@
   z-index: $z-index-higher;
   display: inline-block;
   max-width: $tooltip-max-width;
-  margin-top: 10px;
   padding: $tooltip-padding;
+  margin: $tooltip-margin 0;
   font-size: $font-size-tiny;
   font-size: $tooltip-font-size;
   font-weight: $font-weight-bold;
@@ -27,10 +27,9 @@
     animation-name: tooltip-animation;
   }
   &.large {
-    font-size: $font-size-small;
     padding: 2 * $tooltip-padding;
+    font-size: $font-size-small;
   }
-
   @keyframes tooltip-animation {
     0% {
       transform: scale(0);

From 17cc28d3a2ac8f6cc13cf572840a0516c52fb647 Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Sun, 15 Nov 2015 14:11:35 +0700
Subject: [PATCH 0051/1024] Set .active class only when component has a opacity
 > 0

---
 components/overlay/index.jsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/components/overlay/index.jsx b/components/overlay/index.jsx
index 37adeaea4..8e2dd1a37 100644
--- a/components/overlay/index.jsx
+++ b/components/overlay/index.jsx
@@ -17,6 +17,7 @@ class Overlay extends React.Component {
   componentDidMount () {
     this.app = document.getElementById('react-toolbox-app') || document.body;
     this.node = document.createElement('div');
+    this.node.setAttribute('data-react-toolbox', 'overlay');
     this.app.appendChild(this.node);
     this.handleRender();
   }
@@ -32,10 +33,11 @@ class Overlay extends React.Component {
 
   handleRender () {
     let className = style.root;
-    let overlayStyle = {};
+    const overlayStyle = {};
+
     if (this.props.active) {
-      className += ` ${style.active}`;
-      if (this.props.opacity) overlayStyle.opacity = this.props.opacity;
+      if (this.props.opacity > 0) className += ` ${style.active}`;
+      overlayStyle.opacity = this.props.opacity;
     }
     if (this.props.className) className += ` ${className}`;
 

From 8d0649aca03c2a195bda4d36f3bc00ec558d9265 Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Sun, 15 Nov 2015 14:13:10 +0700
Subject: [PATCH 0052/1024] Use <overlay> component for set the correct
 position in <dialog> components.

---
 components/tooltip/index.jsx | 17 +++++++++++------
 spec/components/dialog.jsx   |  3 ++-
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/components/tooltip/index.jsx b/components/tooltip/index.jsx
index 01e5e2734..a90a3238f 100644
--- a/components/tooltip/index.jsx
+++ b/components/tooltip/index.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import Overlay from '../overlay';
 import style from './style';
 
 class Tooltip extends React.Component {
@@ -18,13 +19,15 @@ class Tooltip extends React.Component {
   };
 
   componentDidMount = () => {
-    const node = ReactDOM.findDOMNode(this);
-    const parent = node.parentNode;
+    const node = ReactDOM.findDOMNode(this.refs.tooltip);
+    const parent = ReactDOM.findDOMNode(this).parentNode;
+
     if (parent) {
       parent.onmouseover = () => {
-        const parentStyle =  parent.currentStyle || window.getComputedStyle(parent);
+        const parentStyle = parent.currentStyle || window.getComputedStyle(parent);
         const offset = parseFloat(parentStyle['margin-bottom']) + parseFloat(parentStyle['padding-bottom']);
         const position = parent.getBoundingClientRect();
+
         node.style.top = `${position.top + position.height - offset}px`;
         node.style.left = `${position.left + parseInt((position.width / 2) - (node.offsetWidth / 2))}px`;
         if (!this.state.active) this.setState({ active: true});
@@ -41,9 +44,11 @@ class Tooltip extends React.Component {
     if (this.state.active) className += ` ${style.active}`;
 
     return (
-      <span data-react-toolbox='tooltip' className={className}>
-        {this.props.label}
-      </span>
+      <Overlay active={this.state.active} opacity={0}>
+        <span ref='tooltip' data-react-toolbox='tooltip' className={className}>
+          {this.props.label}
+        </span>
+      </Overlay>
     );
   }
 }
diff --git a/spec/components/dialog.jsx b/spec/components/dialog.jsx
index 9c990b3df..214face70 100644
--- a/spec/components/dialog.jsx
+++ b/spec/components/dialog.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import Button from '../../components/button';
 import Dialog from '../../components/dialog';
+import Tooltip from '../../components/tooltip';
 
 class DialogTest extends React.Component {
   state = {
@@ -30,7 +31,7 @@ class DialogTest extends React.Component {
           title="Use Google's location service?"
           onOverlayClick={this.handleToggle}
         >
-          <p>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</p>
+          <p>Let Google help apps <strong><Tooltip label='location' />determine location</strong>. This means sending anonymous location data to Google, even when no apps are running.</p>
         </Dialog>
       </section>
     );

From 597d6fdf8407bfd40d92e850a49d6fcd467e8e2d Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Sun, 15 Nov 2015 20:42:16 +0700
Subject: [PATCH 0053/1024] Not necesary overlay events

---
 components/snackbar/index.jsx | 3 +--
 components/snackbar/readme.md | 1 -
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/components/snackbar/index.jsx b/components/snackbar/index.jsx
index d5e4f1057..06bc63244 100644
--- a/components/snackbar/index.jsx
+++ b/components/snackbar/index.jsx
@@ -13,7 +13,6 @@ class Snackbar extends React.Component {
     label: React.PropTypes.string.isRequired,
     onClick: React.PropTypes.func,
     onTimeout: React.PropTypes.func,
-    onOverlayClick: React.PropTypes.func,
     timeout: React.PropTypes.number,
     type: React.PropTypes.string
   };
@@ -45,7 +44,7 @@ class Snackbar extends React.Component {
     if (this.props.className) className += ` ${this.props.className}`;
 
     return (
-      <Overlay active={this.props.active} onClick={this.props.onOverlayClick} opacity={0}>
+      <Overlay active={this.props.active} opacity={0}>
         <div data-react-toolbox='snackbar' className={className}>
           { this.props.icon ? <FontIcon value={this.props.icon} className={style.icon} /> : null }
           <span className={style.label}>{this.props.label}</span>
diff --git a/components/snackbar/readme.md b/components/snackbar/readme.md
index 0deb6c292..ddeec1565 100644
--- a/components/snackbar/readme.md
+++ b/components/snackbar/readme.md
@@ -43,7 +43,6 @@ class SnackbarTest extends React.Component {
 | `icon` | `String`  |       | String key for an icon displayed in left side of the snackbar.|
 | `label` | `String`  |       | Text to display in the content.|
 | `onClick` | `Function`  |       | Callback function that will be called when the button action is clicked.|
-| `onOverlayClick`   | `Function`   |             | Callback to be invoked when the dialog overlay is clicked.|
 | `onTimeout` | `Function`  |       | Callback function when finish the set timeout.|
 | `timeout` | `Number`  |       | Amount of time after the Snackbar will be automatically hidden.|
 | `type` | `String`  |       | Indicates the action type. Can be `accept`, `warning` or `cancel`|

From 69180726c532aa6687a5e23f3dfc57b5fff41ada Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Sun, 15 Nov 2015 20:48:57 +0700
Subject: [PATCH 0054/1024] Tooltip using a parent with relative position

---
 components/button/style.scss  |  1 -
 components/tooltip/index.jsx  | 42 +++++++++++++++++------------------
 components/tooltip/style.scss |  5 ++---
 3 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/components/button/style.scss b/components/button/style.scss
index 17538d46d..486954eba 100644
--- a/components/button/style.scss
+++ b/components/button/style.scss
@@ -11,7 +11,6 @@
   color: $button-default-text-color;
   text-align: center;
   text-decoration: none;
-  overflow: hidden;
   white-space: nowrap;
   cursor: pointer;
   border: 0;
diff --git a/components/tooltip/index.jsx b/components/tooltip/index.jsx
index a90a3238f..490cb2242 100644
--- a/components/tooltip/index.jsx
+++ b/components/tooltip/index.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Overlay from '../overlay';
 import style from './style';
 
 class Tooltip extends React.Component {
@@ -19,23 +18,24 @@ class Tooltip extends React.Component {
   };
 
   componentDidMount = () => {
-    const node = ReactDOM.findDOMNode(this.refs.tooltip);
-    const parent = ReactDOM.findDOMNode(this).parentNode;
-
-    if (parent) {
-      parent.onmouseover = () => {
-        const parentStyle = parent.currentStyle || window.getComputedStyle(parent);
-        const offset = parseFloat(parentStyle['margin-bottom']) + parseFloat(parentStyle['padding-bottom']);
-        const position = parent.getBoundingClientRect();
-
-        node.style.top = `${position.top + position.height - offset}px`;
-        node.style.left = `${position.left + parseInt((position.width / 2) - (node.offsetWidth / 2))}px`;
-        if (!this.state.active) this.setState({ active: true});
-      };
-      parent.onmouseout = () => {
-        if (this.state.active) this.setState({ active: false});
-      };
+    const node = ReactDOM.findDOMNode(this);
+    const parent = node.parentNode;
+
+    if (parent.style.position !== 'relative' && parent.style.position !== 'absolute'){
+      parent.style.position = 'relative';
     }
+    parent.onmouseover = () => {
+      const parentStyle = parent.currentStyle || window.getComputedStyle(parent);
+      const offset = parseFloat(parentStyle['margin-bottom']) + parseFloat(parentStyle['padding-bottom']);
+      const position = parent.getBoundingClientRect();
+
+      node.style.top = `${position.height - offset}px`;
+      node.style.left = `${parseInt((position.width / 2) - (node.offsetWidth / 2))}px`;
+      if (!this.state.active) this.setState({ active: true});
+    };
+    parent.onmouseout = () => {
+      if (this.state.active) this.setState({ active: false});
+    };
   };
 
   render () {
@@ -44,11 +44,9 @@ class Tooltip extends React.Component {
     if (this.state.active) className += ` ${style.active}`;
 
     return (
-      <Overlay active={this.state.active} opacity={0}>
-        <span ref='tooltip' data-react-toolbox='tooltip' className={className}>
-          {this.props.label}
-        </span>
-      </Overlay>
+      <span data-react-toolbox='tooltip' className={className}>
+        {this.props.label}
+      </span>
     );
   }
 }
diff --git a/components/tooltip/style.scss b/components/tooltip/style.scss
index d9e602325..bc1b1a708 100644
--- a/components/tooltip/style.scss
+++ b/components/tooltip/style.scss
@@ -3,13 +3,12 @@
 @import "http://github.com/config";
 
 .root {
-  position: fixed;
+  position: absolute;
   z-index: $z-index-higher;
-  display: inline-block;
+  display: block;
   max-width: $tooltip-max-width;
   padding: $tooltip-padding;
   margin: $tooltip-margin 0;
-  font-size: $font-size-tiny;
   font-size: $tooltip-font-size;
   font-weight: $font-weight-bold;
   line-height: $font-size-small;

From 5b9472c8276bebb69763e3688e348d2f5287a8d2 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 15 Nov 2015 16:59:11 +0100
Subject: [PATCH 0055/1024] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 68d006898..742496769 100644
--- a/README.md
+++ b/README.md
@@ -3,7 +3,7 @@
 [![npm version](https://img.shields.io/npm/v/react-toolbox.svg?style=flat-square)](https://www.npmjs.com/package/react-toolbox)
 [![Build Status](http://img.shields.io/travis/react-toolbox/react-toolbox/master.svg?style=flat-square)](https://travis-ci.org/react-toolbox/react-toolbox)
 [![NPM Status](http://img.shields.io/npm/dm/react-toolbox.svg?style=flat-square)](https://www.npmjs.org/package/react-toolbox)
-[![react-toolbox channel on discord](https://img.shields.io/badge/discord-%23react--toolbox%20%40%20reactiflux-61dafb.svg?style=flat-square)](https://discord.gg/0ZcbPKXt5bW2GqFj)
+[![react-toolbox channel on discord](https://img.shields.io/badge/discord-%23react--toolbox%20%40%20reactiflux-61dafb.svg?style=flat-square)](https://discord.gg/0ZcbPKXt5bW9FLzM)
 [![Donate](https://img.shields.io/badge/donate-paypal-blue.svg?style=flat-square)](https://paypal.me/javivelasco)
 
 React Toolbox is a set of [React](http://facebook.github.io/react/) components that implement [Google's Material Design specification](https://www.google.com/design/spec/material-design/introduction.html). It's powered by [CSS Modules](https://github.com/css-modules/css-modules) and harmoniously integrates with your [Webpack](http://webpack.github.io/) workflow. You can take a tour through our documentation website and try the components live!

From e476893aa32fa24b9f9e6eac44dab8629ebfe291 Mon Sep 17 00:00:00 2001
From: lukasliesis <liesislukas@gmail.com>
Date: Sun, 15 Nov 2015 18:30:26 +0200
Subject: [PATCH 0056/1024] Readme update. Short instructions to start docs
 locally

---
 README.md | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/README.md b/README.md
index 68d006898..b6663189c 100644
--- a/README.md
+++ b/README.md
@@ -72,5 +72,16 @@ The project is being initially developed and maintained by [Javier Velasco](http
 
 To work in the project you'd need a `node` version with ES6 syntax. Although the project is built using Babel we use some ES6 features in the development server. Also, the packages has been tested with `node 4.2.1`. Consider using [nvm](https://github.com/creationix/nvm) or [n](https://github.com/tj/n) to handle different node versions!
 
+To start documentation site locally:
+
+```
+git clone https://github.com/react-toolbox/react-toolbox.git
+cd docs/
+npm install 
+npm start
+```
+
+Local documentation will be available at http://localhost:8081/
+
 ## License 
 This project is licensed under the terms of the [MIT license](https://github.com/react-toolbox/react-toolbox/blob/master/LICENSE).

From 51f83388caabf95bc7ad360239f845b98c0d0395 Mon Sep 17 00:00:00 2001
From: lukasliesis <liesislukas@gmail.com>
Date: Sun, 15 Nov 2015 18:47:39 +0200
Subject: [PATCH 0057/1024] don't hide navigation while playground is loaded if
 screen is 1200px+ in width

---
 .gitignore                                 |  1 +
 docs/app/components/layout/main/index.jsx  |  1 +
 docs/app/components/layout/main/style.scss | 32 ++++++++++++++++++++++
 3 files changed, 34 insertions(+)

diff --git a/.gitignore b/.gitignore
index bb9bc230a..e5c73cc5f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@ build
 lib
 node_modules
 npm-debug.log
+.idea
\ No newline at end of file
diff --git a/docs/app/components/layout/main/index.jsx b/docs/app/components/layout/main/index.jsx
index b0869d8c7..80ede3169 100644
--- a/docs/app/components/layout/main/index.jsx
+++ b/docs/app/components/layout/main/index.jsx
@@ -49,6 +49,7 @@ class Main extends React.Component {
     const examples = document.getElementsByClassName(this.LOAD_EXAMPLE_CLASS);
     Array.prototype.forEach.call(examples, (exampleNode, idx) => {
       const exampleCode = components[this.props.params.component].examples[idx];
+      this.refs.playground.loadCode(exampleCode);
       ReactDOM.render(
         <LoadExampleButton onClick={this.handlePlaygroundLoad.bind(this, exampleCode)} />,
         exampleNode
diff --git a/docs/app/components/layout/main/style.scss b/docs/app/components/layout/main/style.scss
index 42c11ffd8..f477d2ba2 100644
--- a/docs/app/components/layout/main/style.scss
+++ b/docs/app/components/layout/main/style.scss
@@ -70,6 +70,38 @@
   }
 }
 
+/*
+  don't hide navigation when playground is open if screen width > 1200px
+*/
+@media screen and (min-width: 1200px) {
+  .root {
+    &:not(.with-playground) {
+      > .playground {
+        right: - ($playground-width * 1.1);
+      }
+      > .documentation {
+        padding-right: 0;
+        padding-left: $navigation-width;
+      }
+      > .navigation {
+        transform: translateX(0);
+      }
+    }
+    &.with-playground {
+      > .playground {
+        right: 0;
+      }
+      > .documentation {
+        padding-right: $playground-width;
+        padding-left: $navigation-width;
+      }
+      > .navigation {
+        transform: translateX(0);
+      }
+    }
+  }
+}
+
 .load-button {
   display: inline-block;
 }

From 7e694b41eb7abb1d86d7e81439577141d3877c0d Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 15 Nov 2015 18:31:01 +0100
Subject: [PATCH 0058/1024] Defer hiding in 500ms for tooltips

---
 components/tooltip/index.jsx | 44 ++++++++++++++++++++++--------------
 1 file changed, 27 insertions(+), 17 deletions(-)

diff --git a/components/tooltip/index.jsx b/components/tooltip/index.jsx
index a90a3238f..f154d3b8e 100644
--- a/components/tooltip/index.jsx
+++ b/components/tooltip/index.jsx
@@ -3,8 +3,9 @@ import ReactDOM from 'react-dom';
 import Overlay from '../overlay';
 import style from './style';
 
-class Tooltip extends React.Component {
+const HIDE_TIMEOUT = 300;
 
+class Tooltip extends React.Component {
   static propTypes = {
     className: React.PropTypes.string,
     label: React.PropTypes.string
@@ -18,23 +19,32 @@ class Tooltip extends React.Component {
     active: false
   };
 
-  componentDidMount = () => {
+  componentDidMount () {
+    this.parent = ReactDOM.findDOMNode(this).parentNode;
+    if (this.parent) {
+      this.parent.onmouseover = this.handleParentMouseOver;
+      this.parent.onmouseout = this.handleParentMouseOut;
+    }
+  }
+
+  handleParentMouseOver = () => {
+    if (this.deferred) clearTimeout(this.deferred);
+
     const node = ReactDOM.findDOMNode(this.refs.tooltip);
-    const parent = ReactDOM.findDOMNode(this).parentNode;
-
-    if (parent) {
-      parent.onmouseover = () => {
-        const parentStyle = parent.currentStyle || window.getComputedStyle(parent);
-        const offset = parseFloat(parentStyle['margin-bottom']) + parseFloat(parentStyle['padding-bottom']);
-        const position = parent.getBoundingClientRect();
-
-        node.style.top = `${position.top + position.height - offset}px`;
-        node.style.left = `${position.left + parseInt((position.width / 2) - (node.offsetWidth / 2))}px`;
-        if (!this.state.active) this.setState({ active: true});
-      };
-      parent.onmouseout = () => {
-        if (this.state.active) this.setState({ active: false});
-      };
+    const parentStyle = this.parent.currentStyle || window.getComputedStyle(this.parent);
+    const offset = parseFloat(parentStyle['margin-bottom']) + parseFloat(parentStyle['padding-bottom']);
+    const position = this.parent.getBoundingClientRect();
+
+    node.style.top = `${position.top + position.height - offset}px`;
+    node.style.left = `${position.left + parseInt((position.width / 2) - (node.offsetWidth / 2))}px`;
+    if (!this.state.active) this.setState({ active: true});
+  };
+
+  handleParentMouseOut = () => {
+    if (this.state.active) {
+      this.deferred = setTimeout(() => {
+        this.setState({ active: false});
+      }, HIDE_TIMEOUT);
     }
   };
 

From 37f1bf24a9a9fae327b8541ba0617cf3ff906638 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 15 Nov 2015 19:34:09 +0100
Subject: [PATCH 0059/1024] Minor fixes

---
 components/button/style.scss                             | 9 ++++-----
 components/tooltip/readme.md                             | 5 +----
 .../layout/main/modules/examples/tooltip_example_1.txt   | 5 +----
 3 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/components/button/style.scss b/components/button/style.scss
index 486954eba..19fcd844c 100644
--- a/components/button/style.scss
+++ b/components/button/style.scss
@@ -27,6 +27,10 @@
   > * {
     pointer-events: none;
   }
+
+  [data-react-toolbox="ripple"] {
+    overflow: hidden;
+  }
 }
 
 %squared {
@@ -107,11 +111,6 @@
   .icon {
     line-height: $button-floating-height;
   }
-
-  [data-react-toolbox="ripple"] {
-    overflow: hidden;
-    border-radius: 50%;
-  }
 }
 
 .primary:not([disabled]) {
diff --git a/components/tooltip/readme.md b/components/tooltip/readme.md
index 7ff5a0336..75d86e870 100644
--- a/components/tooltip/readme.md
+++ b/components/tooltip/readme.md
@@ -9,10 +9,7 @@ import Tooltip from 'react-toolbox/lib/tooltip';
 
 const TooltipTest = () => (
   <div>
-    <p>
-      Lorem ipsum dolor sit amet, <strong>consectetur<Tooltip label='This is a auto show tooltip' /></strong> adipiscing elit.
-    </p>
-    
+    <p>Lorem ipsum dolor sit amet, <strong>consectetur<Tooltip label='This is a auto show tooltip' /></strong> adipiscing elit.</p>
     <Button label='Button with tooltip' kind='raised' accent tooltip='This is a tooltip by property' />
   </div>
 );
diff --git a/docs/app/components/layout/main/modules/examples/tooltip_example_1.txt b/docs/app/components/layout/main/modules/examples/tooltip_example_1.txt
index 80d1277f1..d9dbbccd6 100644
--- a/docs/app/components/layout/main/modules/examples/tooltip_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/tooltip_example_1.txt
@@ -1,9 +1,6 @@
 const TooltipTest = () => (
   <div>
-    <p>
-      Lorem ipsum dolor sit amet, <strong>consectetur<Tooltip label='This is a auto show tooltip' /></strong> adipiscing elit.
-    </p>
-    
+    <p>Lorem ipsum dolor sit amet, <strong>consectetur<Tooltip label='This is a auto show tooltip' /></strong> adipiscing elit.</p>
     <Button label='Button with tooltip' kind='raised' accent tooltip='This is a tooltip by property' />
   </div>
 );

From b5c2590b008ab8bc6cf3141007d54ad6b3cd9835 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 15 Nov 2015 19:42:59 +0100
Subject: [PATCH 0060/1024] 0.12.0 release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2a7fd1c58..d60918ee2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-toolbox",
-  "version": "0.11.5",
+  "version": "0.12.0",
   "description": "A set of complementary tools to ReactJS.",
   "author": "React Toolbox Team (http://github.com/react-toolbox)",
   "contributors": [

From f5594fefac908f441eb3ab0fc6c6e6c20e825d45 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 15 Nov 2015 19:48:19 +0100
Subject: [PATCH 0061/1024] Fix description and homepage in package

---
 package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d60918ee2..275a25db0 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,8 @@
 {
   "name": "react-toolbox",
   "version": "0.12.0",
-  "description": "A set of complementary tools to ReactJS.",
+  "homepage": "www.react-toolbox.com",
+  "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "author": "React Toolbox Team (http://github.com/react-toolbox)",
   "contributors": [
     {

From 7667f3965f6ba542ee37187b61eb599769665e54 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 15 Nov 2015 19:48:49 +0100
Subject: [PATCH 0062/1024] 0.12.1 release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 275a25db0..e7050bd7f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-toolbox",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "homepage": "www.react-toolbox.com",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "author": "React Toolbox Team (http://github.com/react-toolbox)",

From 92e6aaec49f510cc352335d935275f0072df74e6 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 15 Nov 2015 20:53:59 +0100
Subject: [PATCH 0063/1024] Add a section to explain App wrapper

---
 README.md                                     | 18 ++++++++++++++++++
 docs/app/components/layout/install/install.md | 18 ++++++++++++++++++
 2 files changed, 36 insertions(+)

diff --git a/README.md b/README.md
index 31a12cfa8..da1aa92e5 100644
--- a/README.md
+++ b/README.md
@@ -37,6 +37,24 @@ The previous code creates a React button component based on React toolbox button
 
 We encourage you to work with webpack but if you want to use React Toolbox in an old fashioned way you must generate a build with all the css and javascript and include it in your `index.html`. Then you can use the components exposed in the `window` object.
 
+## The `App` component
+
+There are some components in React Toolbox that requires special positioning. For example, `Dialog` and `Drawer` components block the scroll showing a fixed positioned overlay. To handle these cases, React Toolbox needs some styling in your root node. This can be achieved wrapping your app with a non intrusive `App` wrapper component:
+
+```jsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ToolboxApp from 'react-toolbox/lib/app';
+import App from './my-app';
+
+ReactDOM.render(
+  <ToolboxApp>
+    <App />
+  </ToolboxApp>
+, document.getElementById('app'));
+
+```
+
 ## Customization
 
 Since React Toolbox styles are written in CSS it's pretty easy to customize your components. We have several ways:
diff --git a/docs/app/components/layout/install/install.md b/docs/app/components/layout/install/install.md
index 7f5737940..cf645f268 100644
--- a/docs/app/components/layout/install/install.md
+++ b/docs/app/components/layout/install/install.md
@@ -31,6 +31,24 @@ The previous code creates a React button component based on React toolbox button
 
 We encourage you to work with webpack but if you want to use React Toolbox in an old fashioned way you must generate a build with all the css and javascript and include it in your `index.html`. Then you can use the components exposed in the `window` object.
 
+## The `App` component
+
+There are some components in React Toolbox that requires special positioning. For example, `Dialog` and `Drawer` components block the scroll showing a fixed positioned overlay. To handle these cases, React Toolbox needs some styling in your root node. This can be achieved wrapping your app with a non intrusive `App` wrapper component:
+
+```jsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ToolboxApp from 'react-toolbox/lib/app';
+import App from './my-app';
+
+ReactDOM.render(
+  <ToolboxApp>
+    <App />
+  </ToolboxApp>
+, document.getElementById('app'));
+
+```
+
 ## Customization
 
 Since React Toolbox styles are written in CSS it's pretty easy to customize your components. We have several ways:

From a208570e8a66a3251b01386624415e19bbb3c0cc Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 15 Nov 2015 20:54:43 +0100
Subject: [PATCH 0064/1024] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index da1aa92e5..43a14e047 100644
--- a/README.md
+++ b/README.md
@@ -37,7 +37,7 @@ The previous code creates a React button component based on React toolbox button
 
 We encourage you to work with webpack but if you want to use React Toolbox in an old fashioned way you must generate a build with all the css and javascript and include it in your `index.html`. Then you can use the components exposed in the `window` object.
 
-## The `App` component
+## App component
 
 There are some components in React Toolbox that requires special positioning. For example, `Dialog` and `Drawer` components block the scroll showing a fixed positioned overlay. To handle these cases, React Toolbox needs some styling in your root node. This can be achieved wrapping your app with a non intrusive `App` wrapper component:
 

From de6bfdf4c5acb128c504195cb4c2e7d64bd87269 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 15 Nov 2015 20:55:49 +0100
Subject: [PATCH 0065/1024] Update install.md

---
 docs/app/components/layout/install/install.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/app/components/layout/install/install.md b/docs/app/components/layout/install/install.md
index cf645f268..0c6fed711 100644
--- a/docs/app/components/layout/install/install.md
+++ b/docs/app/components/layout/install/install.md
@@ -31,7 +31,7 @@ The previous code creates a React button component based on React toolbox button
 
 We encourage you to work with webpack but if you want to use React Toolbox in an old fashioned way you must generate a build with all the css and javascript and include it in your `index.html`. Then you can use the components exposed in the `window` object.
 
-## The `App` component
+## App component
 
 There are some components in React Toolbox that requires special positioning. For example, `Dialog` and `Drawer` components block the scroll showing a fixed positioned overlay. To handle these cases, React Toolbox needs some styling in your root node. This can be achieved wrapping your app with a non intrusive `App` wrapper component:
 

From c09f7c4ad7b44205649f09e08ad9816725059088 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 15 Nov 2015 21:42:32 +0100
Subject: [PATCH 0066/1024] Round ripple for floating buttons

---
 components/button/style.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/components/button/style.scss b/components/button/style.scss
index 19fcd844c..4cb89d86b 100644
--- a/components/button/style.scss
+++ b/components/button/style.scss
@@ -111,6 +111,9 @@
   .icon {
     line-height: $button-floating-height;
   }
+  [data-react-toolbox="ripple"] {
+    border-radius: 50%;
+  }
 }
 
 .primary:not([disabled]) {

From f3355b6462af68de27fb4ad08865ebf4359434d9 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 15 Nov 2015 21:50:37 +0100
Subject: [PATCH 0067/1024] 0.12.2 release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e7050bd7f..f29091558 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-toolbox",
-  "version": "0.12.1",
+  "version": "0.12.2",
   "homepage": "www.react-toolbox.com",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "author": "React Toolbox Team (http://github.com/react-toolbox)",

From 14ad835b3d03c7546ca90ae58b46e6ae58528024 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 15 Nov 2015 22:06:52 +0100
Subject: [PATCH 0068/1024] Change quotes to pass linter rules

---
 components/_globals.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/_globals.scss b/components/_globals.scss
index 5f51a9663..c98eda641 100644
--- a/components/_globals.scss
+++ b/components/_globals.scss
@@ -17,8 +17,8 @@ $color-accent-contrast: $color-dark-contrast !default;
 $unit: 1rem;
 
 // -- Fonts
-$font-icon-url: 'https://fonts.googleapis.com/icon?family=Material+Icons' !default;
-$font-roboto-url: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700' !default;
+$font-roboto-url: "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" !default;
+$font-icon-url: "https://fonts.googleapis.com/icon?family=Material+Icons" !default;
 $preferred-font: "Roboto", "Helvetica", "Arial", sans-serif !default;
 $font-size: 1.6 * $unit !default;
 $font-size-tiny: 1.2 * $unit !default;

From e7850c4668ed780694722d2157fa25588f910194 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 15 Nov 2015 22:10:05 +0100
Subject: [PATCH 0069/1024] Import globals in font icon to get the url config
 variable for the font

---
 components/font_icon/style.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/font_icon/style.scss b/components/font_icon/style.scss
index 77770b9a0..a6d4d1f28 100644
--- a/components/font_icon/style.scss
+++ b/components/font_icon/style.scss
@@ -1,3 +1,4 @@
+@import "http://github.com/base";
 @import url(http://github.com/$font-icon-url);
 
 %icon {

From 67e6a7ed8cae8ffb0787bd691deb4de8b960479b Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Mon, 16 Nov 2015 15:56:05 +0700
Subject: [PATCH 0070/1024] New properties 'minDate' & 'maxDate'

---
 components/date_picker/calendar/_config.scss |  1 +
 components/date_picker/calendar/day.jsx      |  5 ++++-
 components/date_picker/calendar/index.jsx    |  4 ++++
 components/date_picker/calendar/month.jsx    | 15 ++++++++++++++-
 components/date_picker/calendar/style.scss   | 15 +++++++++------
 components/date_picker/dialog.jsx            |  4 ++++
 components/date_picker/index.jsx             |  5 +++++
 7 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/components/date_picker/calendar/_config.scss b/components/date_picker/calendar/_config.scss
index 85a2100ea..793eda77b 100644
--- a/components/date_picker/calendar/_config.scss
+++ b/components/date_picker/calendar/_config.scss
@@ -8,6 +8,7 @@ $calendar-arrows-font-size: 2 * $unit;
 $calendar-arrows-ripple-duration: 450ms;
 $calendar-year-font-size: 2.4;
 $calendar-day-font-size: 1.3 * $unit;
+$calendar-day-disable-opacity: 0.25;
 $calendar-row-height: 3 * $unit;
 $calendar-day-padding: .2 * $unit;
 $calendar-total-height: $calendar-row-height * 8 + $calendar-day-padding * 12;
diff --git a/components/date_picker/calendar/day.jsx b/components/date_picker/calendar/day.jsx
index f609946f1..38e7bf65b 100644
--- a/components/date_picker/calendar/day.jsx
+++ b/components/date_picker/calendar/day.jsx
@@ -5,6 +5,7 @@ import style from './style';
 class Day extends React.Component {
   static propTypes = {
     day: React.PropTypes.number,
+    disabled: React.PropTypes.bool,
     onClick: React.PropTypes.func,
     selectedDate: React.PropTypes.object,
     viewDate: React.PropTypes.object
@@ -26,7 +27,9 @@ class Day extends React.Component {
   }
 
   render () {
-    const className = this.isSelected() ? `${style.day} ${style.active}` : style.day;
+    let className = this.isSelected() ? `${style.day} ${style.active}` : style.day;
+    if (this.props.disabled) className += ` ${style.disabled}`;
+
     return (
       <div className={className} style={this.dayStyle()}>
           <span onClick={this.props.onClick}>
diff --git a/components/date_picker/calendar/index.jsx b/components/date_picker/calendar/index.jsx
index c98b85b42..b3490911e 100644
--- a/components/date_picker/calendar/index.jsx
+++ b/components/date_picker/calendar/index.jsx
@@ -10,6 +10,8 @@ import style from './style';
 class Calendar extends React.Component {
   static propTypes = {
     display: React.PropTypes.oneOf(['months', 'years']),
+    maxDate: React.PropTypes.object,
+    minDate: React.PropTypes.object,
     onChange: React.PropTypes.func,
     selectedDate: React.PropTypes.object,
     viewDate: React.PropTypes.object
@@ -98,6 +100,8 @@ class Calendar extends React.Component {
         <CSSTransitionGroup transitionName={animation} transitionEnterTimeout={350} transitionLeaveTimeout={350}>
           <Month
             key={this.state.viewDate.getMonth()}
+            maxDate={this.props.maxDate}
+            minDate={this.props.minDate}
             viewDate={this.state.viewDate}
             selectedDate={this.props.selectedDate}
             onDayClick={this.handleDayClick} />
diff --git a/components/date_picker/calendar/month.jsx b/components/date_picker/calendar/month.jsx
index 82bcd42d0..ffa3ba27c 100644
--- a/components/date_picker/calendar/month.jsx
+++ b/components/date_picker/calendar/month.jsx
@@ -5,6 +5,8 @@ import style from './style';
 
 class Month extends React.Component {
   static propTypes = {
+    maxDate: React.PropTypes.object,
+    minDate: React.PropTypes.object,
     onDayClick: React.PropTypes.func,
     selectedDate: React.PropTypes.object,
     viewDate: React.PropTypes.object
@@ -22,11 +24,21 @@ class Month extends React.Component {
 
   renderDays () {
     return utils.range(1, utils.time.getDaysInMonth(this.props.viewDate) + 1).map(i => {
+      let active = true;
+
+      if (this.props.minDate || this.props.maxDate) {
+        const date = new Date(this.props.viewDate.getFullYear(), this.props.viewDate.getMonth(), i);
+        if (this.props.minDate && !(date >= this.props.minDate)) active = false;
+        if (this.props.maxDate && !(date <= this.props.maxDate)) active = false;
+        console.log('day', i, date, this.props.minDate, active);
+      }
+
       return (
         <Day
           key={i}
           day={i}
-          onClick={this.handleDayClick.bind(this, i)}
+          disabled={!active}
+          onClick={active ? this.handleDayClick.bind(this, i) : null}
           selectedDate={this.props.selectedDate}
           viewDate={this.props.viewDate}
         />
@@ -35,6 +47,7 @@ class Month extends React.Component {
   }
 
   render () {
+    console.info('max/min', this.props.maxDate, this.props.minDate);
     return (
       <div className={style.month}>
         <span className={style.title}>
diff --git a/components/date_picker/calendar/style.scss b/components/date_picker/calendar/style.scss
index 8339fcee1..057fb8007 100644
--- a/components/date_picker/calendar/style.scss
+++ b/components/date_picker/calendar/style.scss
@@ -50,11 +50,10 @@
 .week {
   display: flex;
   height: $calendar-row-height;
+  flex-wrap: wrap;
   font-size: $calendar-day-font-size;
   line-height: $calendar-row-height;
   opacity: .5;
-
-  flex-wrap: wrap;
   > span {
     flex: 0 0 (100% / 7);
   }
@@ -62,9 +61,8 @@
 
 .days {
   display: flex;
-  font-size: $calendar-day-font-size;
-
   flex-wrap: wrap;
+  font-size: $calendar-day-font-size;
 }
 
 .day {
@@ -75,10 +73,9 @@
     width: $calendar-row-height;
     height: $calendar-row-height;
     line-height: $calendar-row-height;
-    cursor: pointer;
     border-radius: 50%;
   }
-  &:hover:not(.active) > span {
+  &:hover:not(.active):not(.disabled) > span {
     color: $calendar-primary-contrast-color;
     background: $calendar-primary-hover-color;
   }
@@ -86,6 +83,12 @@
     color: $calendar-primary-contrast-color;
     background: $calendar-primary-color;
   }
+  &:hover:not(.disabled) > span {
+    cursor: pointer;
+  }
+  &.disabled {
+    opacity: $calendar-day-disable-opacity;
+  }
 }
 
 .month {
diff --git a/components/date_picker/dialog.jsx b/components/date_picker/dialog.jsx
index f9cd6407d..390e7e621 100644
--- a/components/date_picker/dialog.jsx
+++ b/components/date_picker/dialog.jsx
@@ -7,6 +7,8 @@ import Dialog from '../dialog';
 class CalendarDialog extends React.Component {
   static propTypes = {
     active: React.PropTypes.bool,
+    maxDate: React.PropTypes.object,
+    minDate: React.PropTypes.object,
     onDismiss: React.PropTypes.func,
     onSelect: React.PropTypes.func,
     value: React.PropTypes.object
@@ -61,6 +63,8 @@ class CalendarDialog extends React.Component {
           <div className={style.wrapper}>
             <Calendar
               display={this.state.display}
+              maxDate={this.props.maxDate}
+              minDate={this.props.minDate}
               onChange={this.handleCalendarChange}
               selectedDate={this.state.date} />
           </div>
diff --git a/components/date_picker/index.jsx b/components/date_picker/index.jsx
index 00bf3b6ca..903eae780 100644
--- a/components/date_picker/index.jsx
+++ b/components/date_picker/index.jsx
@@ -7,6 +7,8 @@ import style from './style';
 
 class DatePicker extends React.Component {
   static propTypes = {
+    maxDate: React.PropTypes.object,
+    minDate: React.PropTypes.object,
     onChange: React.PropTypes.func,
     value: React.PropTypes.object
   };
@@ -32,6 +34,7 @@ class DatePicker extends React.Component {
   render () {
     const { value } = this.props;
     const date = value ? `${value.getDate()} ${time.getFullMonth(value)} ${value.getFullYear()}` : null;
+
     return (
       <div data-toolbox='date-picker'>
         <Input
@@ -44,6 +47,8 @@ class DatePicker extends React.Component {
         />
         <CalendarDialog
           active={this.state.active}
+          maxDate={this.props.maxDate}
+          minDate={this.props.minDate}
           onDismiss={this.handleDismiss}
           onSelect={this.handleSelect}
           value={this.props.value}

From c9e700f770bcc911afa818ab5750838ddd571c0b Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 16 Nov 2015 10:18:49 +0100
Subject: [PATCH 0071/1024] Enable App component to hold refs

---
 components/app/index.jsx     | 39 ++++++++++++++++--------------------
 components/overlay/index.jsx |  2 +-
 2 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/components/app/index.jsx b/components/app/index.jsx
index c156c0313..ca8a1166a 100644
--- a/components/app/index.jsx
+++ b/components/app/index.jsx
@@ -1,29 +1,24 @@
 import React from 'react';
 import style from './style';
 
-const App = (props) => {
-  let className = style.root;
-  if (props.className) {
-    className += ` ${props.className}`;
-  }
-
-  return (
-    <div
-      className={className}
-      data-react-toolbox='app'
-      id='react-toolbox-app'
-    >
-      {props.children}
-    </div>
-  );
-};
+class App extends React.Component {
+  static propTypes = {
+    className: React.PropTypes.string
+  };
 
-App.propTypes = {
-  className: React.PropTypes.string
-};
+  static defaultProps = {
+    className: ''
+  };
 
-App.defaultProps = {
-  className: ''
-};
+  render () {
+    let className = style.root;
+    if (this.props.className) className += ` ${this.props.className}`;
+    return (
+      <div data-react-toolbox='app' className={className}>
+        {this.props.children}
+      </div>
+    );
+  }
+}
 
 export default App;
diff --git a/components/overlay/index.jsx b/components/overlay/index.jsx
index 8e2dd1a37..f50790c54 100644
--- a/components/overlay/index.jsx
+++ b/components/overlay/index.jsx
@@ -15,7 +15,7 @@ class Overlay extends React.Component {
   };
 
   componentDidMount () {
-    this.app = document.getElementById('react-toolbox-app') || document.body;
+    this.app = document.querySelector('[data-react-toolbox="app"]') || document.body;
     this.node = document.createElement('div');
     this.node.setAttribute('data-react-toolbox', 'overlay');
     this.app.appendChild(this.node);

From e28562506fc720da64e9d34233e82f97212bb2f9 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 16 Nov 2015 10:19:21 +0100
Subject: [PATCH 0072/1024] 0.12.3 release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f29091558..42fe85963 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-toolbox",
-  "version": "0.12.2",
+  "version": "0.12.3",
   "homepage": "www.react-toolbox.com",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "author": "React Toolbox Team (http://github.com/react-toolbox)",

From f31dde202b75656566348a5c75e72ff7b7934952 Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Mon, 16 Nov 2015 22:54:05 +0700
Subject: [PATCH 0073/1024] Lock year like a change date (when it's out of
 range)

---
 components/date_picker/calendar/month.jsx | 15 ++++-----------
 components/date_picker/dialog.jsx         | 15 ++++++++++-----
 components/date_picker/index.jsx          |  4 ++--
 components/utils/time.js                  |  4 ++++
 4 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/components/date_picker/calendar/month.jsx b/components/date_picker/calendar/month.jsx
index ffa3ba27c..e8bb5ae2c 100644
--- a/components/date_picker/calendar/month.jsx
+++ b/components/date_picker/calendar/month.jsx
@@ -24,21 +24,15 @@ class Month extends React.Component {
 
   renderDays () {
     return utils.range(1, utils.time.getDaysInMonth(this.props.viewDate) + 1).map(i => {
-      let active = true;
-
-      if (this.props.minDate || this.props.maxDate) {
-        const date = new Date(this.props.viewDate.getFullYear(), this.props.viewDate.getMonth(), i);
-        if (this.props.minDate && !(date >= this.props.minDate)) active = false;
-        if (this.props.maxDate && !(date <= this.props.maxDate)) active = false;
-        console.log('day', i, date, this.props.minDate, active);
-      }
+      const date = new Date(this.props.viewDate.getFullYear(), this.props.viewDate.getMonth(), i);
+      const disabled = utils.time.dateOutOfRange(date, this.props.minDate, this.props.maxDate);
 
       return (
         <Day
           key={i}
           day={i}
-          disabled={!active}
-          onClick={active ? this.handleDayClick.bind(this, i) : null}
+          disabled={disabled}
+          onClick={!disabled ? this.handleDayClick.bind(this, i) : null}
           selectedDate={this.props.selectedDate}
           viewDate={this.props.viewDate}
         />
@@ -47,7 +41,6 @@ class Month extends React.Component {
   }
 
   render () {
-    console.info('max/min', this.props.maxDate, this.props.minDate);
     return (
       <div className={style.month}>
         <span className={style.title}>
diff --git a/components/date_picker/dialog.jsx b/components/date_picker/dialog.jsx
index 390e7e621..13d2045be 100644
--- a/components/date_picker/dialog.jsx
+++ b/components/date_picker/dialog.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import style from './style';
-import time from '../utils/time';
 import Calendar from './calendar';
 import Dialog from '../dialog';
+import style from './style';
+import time from '../utils/time';
 
 class CalendarDialog extends React.Component {
   static propTypes = {
@@ -21,11 +21,16 @@ class CalendarDialog extends React.Component {
 
   state = {
     date: this.props.value,
-    display: 'months'
+    display: 'months',
+    year: this.props.value.getFullYear()
   };
 
   handleCalendarChange = (value) => {
-    this.setState({date: value, display: 'months'});
+    const state = {display: 'months', year: value.getFullYear()};
+    if (!time.dateOutOfRange(value, this.props.minDate, this.props.maxDate)) {
+      state.date = value;
+    }
+    this.setState(state);
   };
 
   handleSelect = () => {
@@ -56,7 +61,7 @@ class CalendarDialog extends React.Component {
               <span className={style.day}>{this.state.date.getDate()}</span>
             </div>
             <span className={style.year} onClick={this.handleSwitchDisplay.bind(this, 'years')}>
-              {this.state.date.getFullYear()}
+              {this.state.year}
             </span>
           </header>
 
diff --git a/components/date_picker/index.jsx b/components/date_picker/index.jsx
index 903eae780..028976c88 100644
--- a/components/date_picker/index.jsx
+++ b/components/date_picker/index.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import CalendarDialog from './dialog';
-import Input from '../input';
 import events from '../utils/events';
-import time from '../utils/time';
+import Input from '../input';
 import style from './style';
+import time from '../utils/time';
 
 class DatePicker extends React.Component {
   static propTypes = {
diff --git a/components/utils/time.js b/components/utils/time.js
index 91155fc51..e636f6b25 100644
--- a/components/utils/time.js
+++ b/components/utils/time.js
@@ -172,6 +172,10 @@ module.exports = {
     if (hours.length < 2) hours = '0' + hours;
     if (mins.length < 2) mins = '0' + mins;
     return hours + ':' + mins;
+  },
+
+  dateOutOfRange (date, minDate, maxDate) {
+    return ((minDate && !(date >= minDate)) || (maxDate && !(date <= maxDate)));
   }
 
 };

From 0cacdf14ec5b42258cb955533e1a7a45c3eec9b2 Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Mon, 16 Nov 2015 23:04:13 +0700
Subject: [PATCH 0074/1024] Change examples for use new properties 'minDate'
 and 'maxDate'

---
 components/date_picker/readme.md                     |  7 +++++--
 .../main/modules/examples/datepicker_example_1.txt   | 11 +++++++++--
 spec/components/pickers.jsx                          | 12 ++++++++++--
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/components/date_picker/readme.md b/components/date_picker/readme.md
index f742de225..b56d9a02f 100644
--- a/components/date_picker/readme.md
+++ b/components/date_picker/readme.md
@@ -6,7 +6,8 @@ A [dialog](https://www.google.com/design/spec/components/pickers.html#pickers-da
 ```jsx
 import DatePicker from 'react-toolbox/lib/date_picker';
 
-const datetime = new Date(1995, 11, 17);
+const datetime = new Date(2015, 10, 16);
+const min_datetime = new Date(new Date(datetime).setDate(8));
 datetime.setHours(17);
 datetime.setMinutes(28);
 
@@ -25,7 +26,7 @@ class DatePickerTest extends React.Component {
     return (
       <section>
         <DatePicker value={this.state.date1} onChange={this.handleChange.bind(this, 'date1')} />
-        <DatePicker value={this.state.date2} onChange={this.handleChange.bind(this, 'date2')} />
+        <DatePicker minDate={min_datetime} value={this.state.date2} onChange={this.handleChange.bind(this, 'date2')} />
       </section>
     );
   }
@@ -36,5 +37,7 @@ class DatePickerTest extends React.Component {
 
 | Name          | Type    | Default         | Description|
 |:-----|:-----|:-----|:-----|
+| `maxDate`         | `Date`    |                 | Date object with the maximum selectable date. |
+| `minDate`         | `Date`    |                 | Date object with the minimum selectable date. |
 | `onChange`       | `Function`       |                | Callback called when the picker value is changed.|
 | `value`         | `Date`    |                 | Date object with the currently selected date. |
diff --git a/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt b/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt
index e1ca9f2ff..77abdfb7a 100644
--- a/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt
@@ -1,4 +1,6 @@
-const datetime = new Date(1995, 11, 17);
+const datetime = new Date(2015, 10, 16);
+const min_datetime = new Date(new Date(datetime).setDate(8));
+const max_datetime = new Date(new Date(datetime).setDate(24));
 datetime.setHours(17);
 datetime.setMinutes(28);
 
@@ -17,7 +19,12 @@ class DatePickerTest extends React.Component {
     return (
       <section>
         <DatePicker value={this.state.date1} onChange={this.handleChange.bind(this, 'date1')} />
-        <DatePicker value={this.state.date2} onChange={this.handleChange.bind(this, 'date2')} />
+        <DatePicker 
+          maxDate={max_datetime}
+          minDate={min_datetime}
+          value={this.state.date2} 
+          onChange={this.handleChange.bind(this, 'date2')} 
+        />
       </section>
     );
   }
diff --git a/spec/components/pickers.jsx b/spec/components/pickers.jsx
index 7d248aab7..b1ec213d3 100644
--- a/spec/components/pickers.jsx
+++ b/spec/components/pickers.jsx
@@ -2,7 +2,10 @@ import React from 'react';
 import DatePicker from '../../components/date_picker';
 import TimePicker from '../../components/time_picker';
 
-const datetime = new Date(1995, 11, 17);
+
+const datetime = new Date(2015, 10, 16);
+const min_datetime = new Date(new Date(datetime).setDate(8));
+const max_datetime = new Date(new Date(datetime).setDate(24));
 datetime.setHours(17);
 datetime.setMinutes(28);
 
@@ -25,7 +28,12 @@ class PickersTest extends React.Component {
         <p>Date pickers and time pickers with Material flavour.</p>
 
         <DatePicker value={this.state.date1} onChange={this.handleChange.bind(this, 'date1')} />
-        <DatePicker value={this.state.date2} onChange={this.handleChange.bind(this, 'date2')} />
+        <DatePicker
+          maxDate={max_datetime}
+          minDate={min_datetime}
+          value={this.state.date2}
+          onChange={this.handleChange.bind(this, 'date2')}
+        />
 
         <TimePicker value={this.state.time1} onChange={this.handleChange.bind(this, 'time1')} />
         <TimePicker value={this.state.time2} format='ampm' onChange={this.handleChange.bind(this, 'time2')} />

From 20d8834ccb3776514c08c28cb900cdfe40a4f254 Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Tue, 17 Nov 2015 00:02:32 +0700
Subject: [PATCH 0075/1024] force date when it's out of range

---
 components/date_picker/dialog.jsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/components/date_picker/dialog.jsx b/components/date_picker/dialog.jsx
index 13d2045be..9007a8011 100644
--- a/components/date_picker/dialog.jsx
+++ b/components/date_picker/dialog.jsx
@@ -21,14 +21,13 @@ class CalendarDialog extends React.Component {
 
   state = {
     date: this.props.value,
-    display: 'months',
-    year: this.props.value.getFullYear()
+    display: 'months'
   };
 
   handleCalendarChange = (value) => {
-    const state = {display: 'months', year: value.getFullYear()};
-    if (!time.dateOutOfRange(value, this.props.minDate, this.props.maxDate)) {
-      state.date = value;
+    const state = {display: 'months', date: value};
+    if (time.dateOutOfRange(value, this.props.minDate, this.props.maxDate)) {
+      state.date = this.props.maxDate || this.props.minDate;
     }
     this.setState(state);
   };
@@ -61,7 +60,7 @@ class CalendarDialog extends React.Component {
               <span className={style.day}>{this.state.date.getDate()}</span>
             </div>
             <span className={style.year} onClick={this.handleSwitchDisplay.bind(this, 'years')}>
-              {this.state.year}
+              {this.state.date.getFullYear()}
             </span>
           </header>
 

From 0e54523fc1230ff7347afa3b502700b0eaea54c7 Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Tue, 17 Nov 2015 00:37:29 +0700
Subject: [PATCH 0076/1024] New style for calendar (material design new spec)

---
 components/date_picker/_config.scss |  4 +--
 components/date_picker/dialog.jsx   | 10 +++-----
 components/date_picker/style.scss   | 40 ++++++++++-------------------
 3 files changed, 18 insertions(+), 36 deletions(-)

diff --git a/components/date_picker/_config.scss b/components/date_picker/_config.scss
index 1fbd88e0c..9c74226f1 100644
--- a/components/date_picker/_config.scss
+++ b/components/date_picker/_config.scss
@@ -5,11 +5,11 @@ $datepicker-primary-color: unquote("rgb(#{$datepicker-primary})") !default;
 $datepicker-primary-hover-color: unquote("rgba(#{$datepicker-primary}, 0.20)") !default;
 $datepicker-primary-contrast-color: unquote("rgb(#{$datepicker-primary-contrast})") !default;
 $datepicker-primary-dark-color: unquote("rgb(#{$datepicker-primary-dark})") !default;
-$datepicker-dialog-width: 30 * $unit;
+$datepicker-dialog-width: 33 * $unit;
 $datepicker-inactive-opacity: .6;
 $datepicker-weekday-line-height: 2 * $unit;
 $datepicker-weekday-font-size: $font-size-small;
 $datepicker-month-font-size: $font-size-big;
 $datepicker-day-font-size: 5 * $unit;
 $datepicker-day-line-height: 4 * $unit;
-$datepicker-year-font-size: 1.8 * $unit;
+$datepicker-year-font-size: $font-size-small;
diff --git a/components/date_picker/dialog.jsx b/components/date_picker/dialog.jsx
index 9007a8011..6df5cfa55 100644
--- a/components/date_picker/dialog.jsx
+++ b/components/date_picker/dialog.jsx
@@ -52,16 +52,12 @@ class CalendarDialog extends React.Component {
     return (
       <Dialog active={this.props.active} type="custom" className={style.dialog} actions={this.actions}>
           <header className={headerClassName}>
-            <span className={style.weekday}>
-              {time.getFullDayOfWeek(this.state.date.getDay())}
-            </span>
-            <div onClick={this.handleSwitchDisplay.bind(this, 'months')}>
-              <span className={style.month}>{time.getShortMonth(this.state.date)}</span>
-              <span className={style.day}>{this.state.date.getDate()}</span>
-            </div>
             <span className={style.year} onClick={this.handleSwitchDisplay.bind(this, 'years')}>
               {this.state.date.getFullYear()}
             </span>
+            <h3 className={style.date} onClick={this.handleSwitchDisplay.bind(this, 'months')}>
+              {time.getShortDayOfWeek(this.state.date.getDay())}, {time.getShortMonth(this.state.date)} {this.state.date.getDate()}
+            </h3>
           </header>
 
           <div className={style.wrapper}>
diff --git a/components/date_picker/style.scss b/components/date_picker/style.scss
index f79afcea7..9078184a2 100644
--- a/components/date_picker/style.scss
+++ b/components/date_picker/style.scss
@@ -6,40 +6,23 @@
 }
 
 .header {
-  padding-bottom: $unit;
+  padding: 1.6 * $unit 2 * $unit;
   color: $datepicker-primary-contrast-color;
-  text-align: center;
   background-color: $datepicker-primary-color;
-}
-
-.weekday {
-  display: block;
-  width: 100%;
-  font-size: $datepicker-weekday-font-size;
-  line-height: $datepicker-weekday-line-height;
-  background-color: $datepicker-primary-dark-color;
-}
-
-.month {
-  display: block;
-  padding: $unit;
-  font-size: $datepicker-month-font-size;
-  text-transform: uppercase;
   cursor: pointer;
 }
 
-.day {
-  display: block;
-  font-size: $datepicker-day-font-size;
-  line-height: $datepicker-day-line-height;
-  cursor: pointer;;
-}
-
 .year {
   display: inline-block;
-  margin-top: $unit;
   font-size: $datepicker-year-font-size;
-  cursor: pointer;
+  transition: opacity, font-size $animation-duration $animation-curve-default;
+}
+
+.date {
+  display: block;
+  font-weight: $font-weight-semi-bold;
+  text-transform: capitalize;
+  transition: opacity $animation-duration $animation-curve-default;
 }
 
 .wrapper {
@@ -47,9 +30,12 @@
 }
 
 .display-years {
-  .day, .month {
+  .date {
     opacity: $datepicker-inactive-opacity;
   }
+  .year {
+    font-size: $font-size-normal;
+  }
 }
 
 .display-months {

From ac1c92440edecf195524f92ffb31a0d65f3bb3a2 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 16 Nov 2015 18:52:27 +0100
Subject: [PATCH 0077/1024] 0.12.4 release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 42fe85963..61b83badb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-toolbox",
-  "version": "0.12.3",
+  "version": "0.12.4",
   "homepage": "www.react-toolbox.com",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "author": "React Toolbox Team (http://github.com/react-toolbox)",

From b351237fb3d3525a5aa225a1416754972bdcfcd8 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 16 Nov 2015 19:21:41 +0100
Subject: [PATCH 0078/1024] 0.12.5 release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 61b83badb..afe15b556 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-toolbox",
-  "version": "0.12.4",
+  "version": "0.12.5",
   "homepage": "www.react-toolbox.com",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "author": "React Toolbox Team (http://github.com/react-toolbox)",

From 4707a26748db58204032ddae3d8c0582801d72a6 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 16 Nov 2015 21:55:21 +0100
Subject: [PATCH 0079/1024] Allow children for buttons and use it as link where
 there is href prop

---
 components/button/index.jsx  | 30 ++++++++++++++++--------------
 components/button/style.scss | 30 +++++++++++++++++++-----------
 spec/components/button.jsx   |  9 +++++++++
 spec/style.scss              |  8 ++------
 4 files changed, 46 insertions(+), 31 deletions(-)

diff --git a/components/button/index.jsx b/components/button/index.jsx
index c18a09107..05a43baed 100644
--- a/components/button/index.jsx
+++ b/components/button/index.jsx
@@ -39,26 +39,28 @@ class Button extends React.Component {
 
   render () {
     let className = style[this.props.kind];
-    const {label, icon, loading, ripple, primary, accent, mini, kind, tooltip, ...others} = this.props;
+    const {label, icon, loading, ripple, primary, accent, mini, kind, tooltip, href, ...others} = this.props;
+    const element = href ? 'a' : 'button';
+
     if (this.props.className) className += ` ${this.props.className}`;
     if (!primary && !accent) className += ` ${style.primary}`;
     if (primary) className += ` ${style.primary}`;
     if (accent) className += ` ${style.accent}`;
     if (mini) className += ` ${style.mini}`;
 
-    return (
-      <button
-        data-react-toolbox='button'
-        {...others}
-        className={className}
-        disabled={this.props.disabled || this.props.loading}
-        onMouseDown={this.handleMouseDown}
-      >
-        { ripple ? <Ripple ref='ripple' loading={loading}/> : null }
-        { icon ? <FontIcon className={style.icon} value={icon}/> : null }
-        { label ? <abbr className={style.label}>{label}</abbr> : null }
-        { tooltip ? <Tooltip label={tooltip}/> : null }
-      </button>
+    const props = {
+      ...others,
+      href,
+      className,
+      disabled: this.props.disabled || this.props.loading,
+      onMouseDown: this.handleMouseDown
+    };
+
+    return React.createElement(element, props,
+      ripple ? <Ripple ref='ripple' loading={loading}/> : null,
+      tooltip ? <Tooltip label={tooltip}/> : null,
+      icon ? <FontIcon className={style.icon} value={icon}/> : null,
+      label ? label : this.props.children
     );
   }
 }
diff --git a/components/button/style.scss b/components/button/style.scss
index 4cb89d86b..fb5ae8fab 100644
--- a/components/button/style.scss
+++ b/components/button/style.scss
@@ -7,7 +7,9 @@
   display: inline-block;
   height: $button-height;
   flex-direction: row;
+  align-content: center;
   align-items: center;
+  justify-content: center;
   color: $button-default-text-color;
   text-align: center;
   text-decoration: none;
@@ -16,18 +18,29 @@
   border: 0;
   outline: none;
   transition: box-shadow .2s $animation-curve-fast-out-linear-in,
-                background-color .2s $animation-curve-default,
-                color .2s $animation-curve-default;
-  align-content: center;
-  justify-content: center;
-
+              background-color .2s $animation-curve-default,
+              color .2s $animation-curve-default;
   &::-moz-focus-inner {
     border: 0;
   }
+  > span {
+    @include typo-button();
+    display: inline-block;
+    line-height: $button-height;
+    vertical-align: middle;
+  }
+  > svg {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    margin-right: .5 * $unit;
+    font-size: 120%;
+    vertical-align: middle;
+    fill: currentColor;
+  }
   > * {
     pointer-events: none;
   }
-
   [data-react-toolbox="ripple"] {
     overflow: hidden;
   }
@@ -50,11 +63,6 @@
   cursor: auto;
 }
 
-.label {
-  @include typo-button();
-  line-height: $button-height;
-}
-
 .flat {
   @extend %button;
   @extend %squared;
diff --git a/spec/components/button.jsx b/spec/components/button.jsx
index ee576e68f..fa71b1060 100644
--- a/spec/components/button.jsx
+++ b/spec/components/button.jsx
@@ -1,10 +1,19 @@
 import React from 'react';
 import Button from '../../components/button';
 
+const GithubIcon = () => (
+  <svg viewBox="0 0 284 277">
+    <g><path d="M141.888675,0.0234927555 C63.5359948,0.0234927555 0,63.5477395 0,141.912168 C0,204.6023 40.6554239,257.788232 97.0321356,276.549924 C104.12328,277.86336 106.726656,273.471926 106.726656,269.724287 C106.726656,266.340838 106.595077,255.16371 106.533987,243.307542 C67.0604204,251.890693 58.7310279,226.56652 58.7310279,226.56652 C52.2766299,210.166193 42.9768456,205.805304 42.9768456,205.805304 C30.1032937,196.998939 43.9472374,197.17986 43.9472374,197.17986 C58.1953153,198.180797 65.6976425,211.801527 65.6976425,211.801527 C78.35268,233.493192 98.8906827,227.222064 106.987463,223.596605 C108.260955,214.426049 111.938106,208.166669 115.995895,204.623447 C84.4804813,201.035582 51.3508808,188.869264 51.3508808,134.501475 C51.3508808,119.01045 56.8936274,106.353063 65.9701981,96.4165325 C64.4969882,92.842765 59.6403297,78.411417 67.3447241,58.8673023 C67.3447241,58.8673023 79.2596322,55.0538738 106.374213,73.4114319 C117.692318,70.2676443 129.83044,68.6910512 141.888675,68.63701 C153.94691,68.6910512 166.09443,70.2676443 177.433682,73.4114319 C204.515368,55.0538738 216.413829,58.8673023 216.413829,58.8673023 C224.13702,78.411417 219.278012,92.842765 217.804802,96.4165325 C226.902519,106.353063 232.407672,119.01045 232.407672,134.501475 C232.407672,188.998493 199.214632,200.997988 167.619331,204.510665 C172.708602,208.913848 177.243363,217.54869 177.243363,230.786433 C177.243363,249.771339 177.078889,265.050898 177.078889,269.724287 C177.078889,273.500121 179.632923,277.92445 186.825101,276.531127 C243.171268,257.748288 283.775,204.581154 283.775,141.912168 C283.775,63.5477395 220.248404,0.0234927555 141.888675,0.0234927555" /></g>
+  </svg>
+);
+
 const ButtonTest = () => (
   <section>
     <h5>Buttons</h5>
     <p>lorem ipsum...</p>
+    <Button href='http://github.com/javivelasco' target='_blank' kind='raised'>
+      <GithubIcon /> Github Profile
+    </Button>
     <Button kind='raised' primary label='Bookmark' icon='bookmark' />
     <Button kind='flat' accent label='Inbox' icon='inbox' />
     <Button kind='floating' primary icon='add' />
diff --git a/spec/style.scss b/spec/style.scss
index 1f7edc4f7..7dda066e5 100644
--- a/spec/style.scss
+++ b/spec/style.scss
@@ -5,12 +5,12 @@
 $offset: 1.8 * $unit;
 
 .app {
-  padding: (8.2 * $unit) $offset $offset $offset;
+  padding: (8.2 * $unit) $offset $offset;
   background-color: #f5f5f5;
   > section {
     padding: $offset;
     margin-bottom: $offset;
-    background-color: white;
+    background-color: #fff;
     box-shadow: 0 1px 2px rgba(0,0,0, 0.25);
     > h5 {
       color: rgb(48, 63, 159);
@@ -48,7 +48,3 @@ $offset: 1.8 * $unit;
     }
   }
 }
-
-.logo {
-  // height: $unit;
-}

From 709cc3746ebe2141c289dd378f8471c86f166bd9 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 16 Nov 2015 21:55:32 +0100
Subject: [PATCH 0080/1024] Use i tagname for icons

---
 components/font_icon/index.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/font_icon/index.jsx b/components/font_icon/index.jsx
index 2e6583d57..ab9acedda 100644
--- a/components/font_icon/index.jsx
+++ b/components/font_icon/index.jsx
@@ -5,9 +5,9 @@ const FontIcon = props => {
   let className = style[props.value];
   if (props.className) className += ` ${props.className}`;
   return (
-    <span data-react-toolbox='icon' {...props} className={className}>
+    <i data-react-toolbox='icon' {...props} className={className}>
       {props.children}
-    </span>
+    </i>
   );
 };
 

From 3e91b97a875ca79751e24a8e8df6bf3347dc8b87 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 16 Nov 2015 21:56:20 +0100
Subject: [PATCH 0081/1024] Set raised button for first test example

---
 spec/components/button.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spec/components/button.jsx b/spec/components/button.jsx
index fa71b1060..c492c58d6 100644
--- a/spec/components/button.jsx
+++ b/spec/components/button.jsx
@@ -11,7 +11,7 @@ const ButtonTest = () => (
   <section>
     <h5>Buttons</h5>
     <p>lorem ipsum...</p>
-    <Button href='http://github.com/javivelasco' target='_blank' kind='raised'>
+    <Button href='http://github.com/javivelasco' target='_blank' kind='raised' accent>
       <GithubIcon /> Github Profile
     </Button>
     <Button kind='raised' primary label='Bookmark' icon='bookmark' />

From 2d4dceff6431d5c661ca04bdebb46239260ed166 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 17 Nov 2015 00:18:58 +0100
Subject: [PATCH 0082/1024] Add icons for cards in landing docs page

---
 docs/app/components/layout/home/index.jsx     | 29 +++++++++++++++++--
 .../components/layout/home/modules/authors.js |  8 ++---
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/docs/app/components/layout/home/index.jsx b/docs/app/components/layout/home/index.jsx
index 41a66040c..af26e52e2 100644
--- a/docs/app/components/layout/home/index.jsx
+++ b/docs/app/components/layout/home/index.jsx
@@ -6,6 +6,18 @@ import Navigation from '../../navigation';
 import style from './style';
 import authors from './modules/authors';
 
+const GithubIcon = () => (
+  <svg viewBox="0 0 284 277">
+    <g><path d="M141.888675,0.0234927555 C63.5359948,0.0234927555 0,63.5477395 0,141.912168 C0,204.6023 40.6554239,257.788232 97.0321356,276.549924 C104.12328,277.86336 106.726656,273.471926 106.726656,269.724287 C106.726656,266.340838 106.595077,255.16371 106.533987,243.307542 C67.0604204,251.890693 58.7310279,226.56652 58.7310279,226.56652 C52.2766299,210.166193 42.9768456,205.805304 42.9768456,205.805304 C30.1032937,196.998939 43.9472374,197.17986 43.9472374,197.17986 C58.1953153,198.180797 65.6976425,211.801527 65.6976425,211.801527 C78.35268,233.493192 98.8906827,227.222064 106.987463,223.596605 C108.260955,214.426049 111.938106,208.166669 115.995895,204.623447 C84.4804813,201.035582 51.3508808,188.869264 51.3508808,134.501475 C51.3508808,119.01045 56.8936274,106.353063 65.9701981,96.4165325 C64.4969882,92.842765 59.6403297,78.411417 67.3447241,58.8673023 C67.3447241,58.8673023 79.2596322,55.0538738 106.374213,73.4114319 C117.692318,70.2676443 129.83044,68.6910512 141.888675,68.63701 C153.94691,68.6910512 166.09443,70.2676443 177.433682,73.4114319 C204.515368,55.0538738 216.413829,58.8673023 216.413829,58.8673023 C224.13702,78.411417 219.278012,92.842765 217.804802,96.4165325 C226.902519,106.353063 232.407672,119.01045 232.407672,134.501475 C232.407672,188.998493 199.214632,200.997988 167.619331,204.510665 C172.708602,208.913848 177.243363,217.54869 177.243363,230.786433 C177.243363,249.771339 177.078889,265.050898 177.078889,269.724287 C177.078889,273.500121 179.632923,277.92445 186.825101,276.531127 C243.171268,257.748288 283.775,204.581154 283.775,141.912168 C283.775,63.5477395 220.248404,0.0234927555 141.888675,0.0234927555" /></g>
+  </svg>
+);
+
+const TwitterIcon = () => (
+  <svg viewBox="0 0 274 223">
+    <g><path d="M273.39,26.301 C263.331,30.762 252.521,33.777 241.175,35.133 C252.756,28.191 261.649,17.199 265.837,4.102 C255,10.529 242.996,15.197 230.22,17.713 C219.988,6.812 205.411,0 189.279,0 C158.302,0 133.188,25.113 133.188,56.088 C133.188,60.484 133.685,64.765 134.641,68.87 C88.025,66.531 46.696,44.201 19.032,10.267 C14.204,18.551 11.438,28.186 11.438,38.465 C11.438,57.924 21.341,75.092 36.391,85.15 C27.196,84.859 18.548,82.336 10.985,78.135 C10.981,78.369 10.981,78.604 10.981,78.84 C10.981,106.016 30.315,128.686 55.974,133.838 C51.267,135.12 46.312,135.805 41.196,135.805 C37.582,135.805 34.068,135.454 30.644,134.799 C37.781,157.083 58.495,173.299 83.039,173.752 C63.843,188.795 39.658,197.762 13.38,197.762 C8.853,197.762 4.388,197.497 0,196.979 C24.822,212.893 54.305,222.178 85.98,222.178 C189.148,222.178 245.564,136.711 245.564,62.592 C245.564,60.16 245.51,57.741 245.402,55.336 C256.36,47.428 265.87,37.549 273.39,26.301" /></g>
+  </svg>
+);
+
 const Home = () => (
   <article>
     <header className={style.header}>
@@ -48,8 +60,21 @@ const Home = () => (
       {
         authors.map((author, index) => {
           author.actions.map((action) => {
-            const url = `https:\\\\${ action.label }.com\\${ author.subtitle }`;
-            action.onClick = () => { window.open(url.toLowerCase(), '_blank'); };
+            if (action.id === 'github') {
+              action.style = {color: '#000'};
+              action.children = [
+                <GithubIcon key={`gicon-${author.subtitle}`} />,
+                <span key={`glabel-${author.subtitle}`}>Github</span>
+              ];
+              action.id = null;
+            } else {
+              action.style = {color: '#55acee'};
+              action.children = [
+                <TwitterIcon key={`ticon-${author.subtitle}`} />,
+                <span key={`tlabel-${author.subtitle}`}>Twitter</span>
+              ];
+              action.id = null;
+            }
           });
           return <Card key={index} {...author} />;
         })
diff --git a/docs/app/components/layout/home/modules/authors.js b/docs/app/components/layout/home/modules/authors.js
index 3aac70d0a..fb8379738 100644
--- a/docs/app/components/layout/home/modules/authors.js
+++ b/docs/app/components/layout/home/modules/authors.js
@@ -3,8 +3,8 @@ export default [
     title: 'Javi Velasco',
     subtitle: 'javivelasco',
     actions: [
-      { label: 'Github' },
-      { label: 'Twitter' }
+      { id: 'github', href: 'http://github.com/javivelasco', target: '_blank' },
+      { id: 'twitter', href: 'http://twitter.com/javivelasco', target: '_blank' }
     ],
     image: '/images/javivelasco.jpg',
     text: 'Software gardener • Film, music & comic lover • Frontend Engineer at SocialBro  • Any biographer in the room?',
@@ -14,8 +14,8 @@ export default [
     title: 'Javi Jimenez',
     subtitle: 'soyjavi',
     actions: [
-      { label: 'Github' },
-      { label: 'Twitter' }
+      { id: 'github', href: 'http://github.com/soyjavi', target: '_blank' },
+      { id: 'twitter', href: 'http://twitter.com/soyjavi', target: '_blank' }
     ],
     image: '/images/soyjavi.jpg',
     text: 'Creative Doer · A complicated #human who builds stuff · #author · #opensource lover · #traveller · with a dark past being CEO & CTO',

From ab40974ea97d0b17ddf328da651e74bb3ab68ee9 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 17 Nov 2015 00:45:20 +0100
Subject: [PATCH 0083/1024] Adapt docs to new buttons

---
 components/button/readme.md                           | 11 +++++++++++
 .../components/layout/main/components/playground.scss |  1 -
 .../layout/main/modules/examples/button_example_1.txt |  9 +++++++++
 docs/app/components/markdown/style.scss               |  2 +-
 4 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/components/button/readme.md b/components/button/readme.md
index a094928ac..29f1af3ac 100644
--- a/components/button/readme.md
+++ b/components/button/readme.md
@@ -6,8 +6,17 @@ A [button](https://www.google.com/design/spec/components/buttons.html) clearly c
 ```jsx
 import Button from 'react-toolbox/lib/button';
 
+const GithubIcon = () => (
+  <svg viewBox="0 0 284 277">
+    <g><path d="M141.888675,0.0234927555 C63.5359948,0.0234927555 0,63.5477395 0,141.912168 C0,204.6023 40.6554239,257.788232 97.0321356,276.549924 C104.12328,277.86336 106.726656,273.471926 106.726656,269.724287 C106.726656,266.340838 106.595077,255.16371 106.533987,243.307542 C67.0604204,251.890693 58.7310279,226.56652 58.7310279,226.56652 C52.2766299,210.166193 42.9768456,205.805304 42.9768456,205.805304 C30.1032937,196.998939 43.9472374,197.17986 43.9472374,197.17986 C58.1953153,198.180797 65.6976425,211.801527 65.6976425,211.801527 C78.35268,233.493192 98.8906827,227.222064 106.987463,223.596605 C108.260955,214.426049 111.938106,208.166669 115.995895,204.623447 C84.4804813,201.035582 51.3508808,188.869264 51.3508808,134.501475 C51.3508808,119.01045 56.8936274,106.353063 65.9701981,96.4165325 C64.4969882,92.842765 59.6403297,78.411417 67.3447241,58.8673023 C67.3447241,58.8673023 79.2596322,55.0538738 106.374213,73.4114319 C117.692318,70.2676443 129.83044,68.6910512 141.888675,68.63701 C153.94691,68.6910512 166.09443,70.2676443 177.433682,73.4114319 C204.515368,55.0538738 216.413829,58.8673023 216.413829,58.8673023 C224.13702,78.411417 219.278012,92.842765 217.804802,96.4165325 C226.902519,106.353063 232.407672,119.01045 232.407672,134.501475 C232.407672,188.998493 199.214632,200.997988 167.619331,204.510665 C172.708602,208.913848 177.243363,217.54869 177.243363,230.786433 C177.243363,249.771339 177.078889,265.050898 177.078889,269.724287 C177.078889,273.500121 179.632923,277.92445 186.825101,276.531127 C243.171268,257.748288 283.775,204.581154 283.775,141.912168 C283.775,63.5477395 220.248404,0.0234927555 141.888675,0.0234927555" /></g>
+  </svg>
+);
+
 const TestButtons = () => (
   <div>
+    <Button href='http://github.com/javivelasco' target='_blank' kind='raised' accent>
+      <GithubIcon /> Github Profile
+    </Button>
     <Button label="Flat button" />
     <Button kind="raised" label="Raised" />
     <Button kind="raised" label="Raised accent" accent icon="favorite" />
@@ -32,3 +41,5 @@ const TestButtons = () => (
 | `onClick`  | `Function` |  | Callback called when the button is clicked.|
 | `primary`  | `false` | | If true, component will have the primary color.|
 | `ripple`  | `Boolean`  | `true`    | If true, component will have a ripple effect on click.|
+
+The `Button` component also accept children so if you want to provide a custom component and text instead of a `label` and `icon` you can do it too. Just check the examples.
diff --git a/docs/app/components/layout/main/components/playground.scss b/docs/app/components/layout/main/components/playground.scss
index 343f3419b..14c41ded1 100644
--- a/docs/app/components/layout/main/components/playground.scss
+++ b/docs/app/components/layout/main/components/playground.scss
@@ -1,6 +1,5 @@
 @import "http://github.com/config";
 
-
 .editor, .preview {
   position: absolute;
   right: 0;
diff --git a/docs/app/components/layout/main/modules/examples/button_example_1.txt b/docs/app/components/layout/main/modules/examples/button_example_1.txt
index 60db342d6..282ec3748 100644
--- a/docs/app/components/layout/main/modules/examples/button_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/button_example_1.txt
@@ -1,5 +1,14 @@
+const GithubIcon = () => (
+  <svg viewBox="0 0 284 277">
+    <g><path d="M141.888675,0.0234927555 C63.5359948,0.0234927555 0,63.5477395 0,141.912168 C0,204.6023 40.6554239,257.788232 97.0321356,276.549924 C104.12328,277.86336 106.726656,273.471926 106.726656,269.724287 C106.726656,266.340838 106.595077,255.16371 106.533987,243.307542 C67.0604204,251.890693 58.7310279,226.56652 58.7310279,226.56652 C52.2766299,210.166193 42.9768456,205.805304 42.9768456,205.805304 C30.1032937,196.998939 43.9472374,197.17986 43.9472374,197.17986 C58.1953153,198.180797 65.6976425,211.801527 65.6976425,211.801527 C78.35268,233.493192 98.8906827,227.222064 106.987463,223.596605 C108.260955,214.426049 111.938106,208.166669 115.995895,204.623447 C84.4804813,201.035582 51.3508808,188.869264 51.3508808,134.501475 C51.3508808,119.01045 56.8936274,106.353063 65.9701981,96.4165325 C64.4969882,92.842765 59.6403297,78.411417 67.3447241,58.8673023 C67.3447241,58.8673023 79.2596322,55.0538738 106.374213,73.4114319 C117.692318,70.2676443 129.83044,68.6910512 141.888675,68.63701 C153.94691,68.6910512 166.09443,70.2676443 177.433682,73.4114319 C204.515368,55.0538738 216.413829,58.8673023 216.413829,58.8673023 C224.13702,78.411417 219.278012,92.842765 217.804802,96.4165325 C226.902519,106.353063 232.407672,119.01045 232.407672,134.501475 C232.407672,188.998493 199.214632,200.997988 167.619331,204.510665 C172.708602,208.913848 177.243363,217.54869 177.243363,230.786433 C177.243363,249.771339 177.078889,265.050898 177.078889,269.724287 C177.078889,273.500121 179.632923,277.92445 186.825101,276.531127 C243.171268,257.748288 283.775,204.581154 283.775,141.912168 C283.775,63.5477395 220.248404,0.0234927555 141.888675,0.0234927555" /></g>
+  </svg>
+);
+
 const ButtonsTest = () => (
   <div>
+    <Button href='http://github.com/javivelasco' target='_blank' kind='raised'>
+      <GithubIcon /> Github Profile
+    </Button>
     <Button label="Flat button" />
     <Button kind="raised" label="Raised" />
     <Button kind="raised" label="Raised accent" accent icon="favorite" />
diff --git a/docs/app/components/markdown/style.scss b/docs/app/components/markdown/style.scss
index af4024290..f3fecbc4a 100644
--- a/docs/app/components/markdown/style.scss
+++ b/docs/app/components/markdown/style.scss
@@ -63,7 +63,7 @@ $documentation-table-font-size: 1.4 * $unit;
     text-align: left;
     > button {
       height: $documentation-playground-button-height;
-      > abbr {
+      > span {
         font-size: $documentation-playground-button-font-size;
         line-height: $documentation-playground-button-height;
       }

From 4227201eb1615c16f1fe8d548b899e1d8ee8f43f Mon Sep 17 00:00:00 2001
From: NogsMPLS <nathanes@gmail.com>
Date: Mon, 16 Nov 2015 19:02:52 -0600
Subject: [PATCH 0084/1024] adding cross-env command to npm start scripts for
 windows compatibility.

---
 docs/package.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index 45b253e1a..0168ce5af 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -4,7 +4,7 @@
   "description": "Documentation for React Toolbox",
   "author": "React Toolbox Team (http://github.com/react-toolbox)",
   "scripts": {
-    "start": "node ./server",
+    "start": "cross-env NODE_ENV=development UV_THREADPOOL_SIZE=100 node ./server",
     "build": "cross-env NODE_ENV=production UV_THREADPOOL_SIZE=100 webpack --config ./webpack.config.production --colors --profile --progress",
     "deploy": "gh-pages -d build"
   },
diff --git a/package.json b/package.json
index afe15b556..5d705e018 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
   ],
   "main": "./lib",
   "scripts": {
-    "start": "node ./server",
+    "start": "cross-env NODE_ENV=development UV_THREADPOOL_SIZE=100 node ./server",
     "lint": "eslint ./ --ext .js,.jsx",
     "babel": "babel ./components --out-dir ./lib",
     "sass": "cpx './components/**/*.scss' ./lib",

From fe7b4d50f28b91fd2907c0a0375d9ded92975f05 Mon Sep 17 00:00:00 2001
From: NogsMPLS <nathanes@gmail.com>
Date: Mon, 16 Nov 2015 19:04:43 -0600
Subject: [PATCH 0085/1024] removing UV_THREADPOOL_SIZE set, now executed from
 npm start script.

---
 docs/server.js | 2 --
 server.js      | 2 --
 2 files changed, 4 deletions(-)

diff --git a/docs/server.js b/docs/server.js
index c355af21f..146b6d974 100644
--- a/docs/server.js
+++ b/docs/server.js
@@ -1,5 +1,3 @@
-process.env.UV_THREADPOOL_SIZE = 100;
-
 const path = require('path');
 const express = require('express');
 const webpack = require('webpack');
diff --git a/server.js b/server.js
index 98d389f3b..faac4f9ac 100644
--- a/server.js
+++ b/server.js
@@ -1,5 +1,3 @@
-process.env.UV_THREADPOOL_SIZE = 100;
-
 const path = require('path');
 const express = require('express');
 const webpack = require('webpack');

From 9c4c5894d471d3e31464a635fd345eb8f7a41606 Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Tue, 17 Nov 2015 09:42:42 +0700
Subject: [PATCH 0086/1024] Added bumped to a npm command

---
 package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 61b83badb..aa40ad84d 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,8 @@
     "prebuild": "npm run clean",
     "prepublish": "npm run build",
     "test": "cross-env NODE_ENV=test karma start",
-    "test:watch": "cross-env NODE_ENV=test karma start --no-single-run"
+    "test:watch": "cross-env NODE_ENV=test karma start --no-single-run",
+    "release": "bumped release patch"
   },
   "bugs": {
     "url": "https://github.com/react-toolbox/react-toolbox/issues",

From e408f957abea6e1c8898a16e9e306d28a9399294 Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Tue, 17 Nov 2015 09:43:10 +0700
Subject: [PATCH 0087/1024] Revert "Added bumped to a npm command"

This reverts commit 9c4c5894d471d3e31464a635fd345eb8f7a41606.
---
 package.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/package.json b/package.json
index aa40ad84d..61b83badb 100644
--- a/package.json
+++ b/package.json
@@ -27,8 +27,7 @@
     "prebuild": "npm run clean",
     "prepublish": "npm run build",
     "test": "cross-env NODE_ENV=test karma start",
-    "test:watch": "cross-env NODE_ENV=test karma start --no-single-run",
-    "release": "bumped release patch"
+    "test:watch": "cross-env NODE_ENV=test karma start --no-single-run"
   },
   "bugs": {
     "url": "https://github.com/react-toolbox/react-toolbox/issues",

From 94c874746b12049ed57fd5d58b5b598307d98531 Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Tue, 17 Nov 2015 09:44:05 +0700
Subject: [PATCH 0088/1024] Bumped such as NPM Commands

---
 package.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index afe15b556..0dffab5ef 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,9 @@
     "prebuild": "npm run clean",
     "prepublish": "npm run build",
     "test": "cross-env NODE_ENV=test karma start",
-    "test:watch": "cross-env NODE_ENV=test karma start --no-single-run"
+    "test:watch": "cross-env NODE_ENV=test karma start --no-single-run",
+    "release": "bumped release",
+    "patch": "bumped release patch"
   },
   "bugs": {
     "url": "https://github.com/react-toolbox/react-toolbox/issues",

From 98f2920bf4088902a661b5e712148b0a5f3282ee Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Tue, 17 Nov 2015 09:49:25 +0700
Subject: [PATCH 0089/1024] Patch: Placeholder in <DatePicker>

---
 components/date_picker/index.jsx | 7 ++++++-
 components/date_picker/readme.md | 1 +
 package.json                     | 2 +-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/components/date_picker/index.jsx b/components/date_picker/index.jsx
index 028976c88..1490edeec 100644
--- a/components/date_picker/index.jsx
+++ b/components/date_picker/index.jsx
@@ -10,9 +10,14 @@ class DatePicker extends React.Component {
     maxDate: React.PropTypes.object,
     minDate: React.PropTypes.object,
     onChange: React.PropTypes.func,
+    placeholder: React.PropTypes.string,
     value: React.PropTypes.object
   };
 
+  static defaultProps = {
+    placeholder: 'Choose a date'
+  };
+
   state = {
     active: false
   };
@@ -40,7 +45,7 @@ class DatePicker extends React.Component {
         <Input
           className={style.input}
           onMouseDown={this.handleInputMouseDown}
-          placeholder='Pick up date'
+          placeholder={this.props.placeholder}
           readOnly={true}
           type='text'
           value={date}
diff --git a/components/date_picker/readme.md b/components/date_picker/readme.md
index b56d9a02f..e8acc2af1 100644
--- a/components/date_picker/readme.md
+++ b/components/date_picker/readme.md
@@ -40,4 +40,5 @@ class DatePickerTest extends React.Component {
 | `maxDate`         | `Date`    |                 | Date object with the maximum selectable date. |
 | `minDate`         | `Date`    |                 | Date object with the minimum selectable date. |
 | `onChange`       | `Function`       |                | Callback called when the picker value is changed.|
+| `placeholder`     | `String`        |             | The text string to use like a input placeholder.|
 | `value`         | `Date`    |                 | Date object with the currently selected date. |
diff --git a/package.json b/package.json
index 0dffab5ef..6a6a59785 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-toolbox",
-  "version": "0.12.5",
+  "version": "0.12.6",
   "homepage": "www.react-toolbox.com",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "author": "React Toolbox Team (http://github.com/react-toolbox)",

From 2bf510f42e606fb4e4325bcc1fb22a2571a204df Mon Sep 17 00:00:00 2001
From: Shant Parseghian <you@example.com>
Date: Tue, 17 Nov 2015 11:39:26 -0800
Subject: [PATCH 0090/1024] Add scrollX/Y for components not wrapped in App

---
 components/ripple/index.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/ripple/index.jsx b/components/ripple/index.jsx
index 06d19c172..0ed7e4293 100644
--- a/components/ripple/index.jsx
+++ b/components/ripple/index.jsx
@@ -42,8 +42,8 @@ class Ripple extends React.Component {
   _getDescriptor (pageX, pageY) {
     const { left, top, height, width } = ReactDOM.findDOMNode(this).getBoundingClientRect();
     return {
-      left: this.props.centered ? width / 2 : pageX - left,
-      top: this.props.centered ? height / 2 : pageY - top,
+      left: this.props.centered ? width / 2 : pageX - left + window.scrollX,
+      top: this.props.centered ? height / 2 : pageY - top + window.scrollY,
       width: width * this.props.spread
     };
   }

From 26cecdc23fa3ea39b544c290b183d0b0dfe6874e Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 17 Nov 2015 21:49:27 +0100
Subject: [PATCH 0091/1024] Change button properties and support toggle icon
 buttons

---
 README.md                                     |  2 +-
 components/button/__test__/index.spec.jsx     | 13 +++--
 components/button/_config.scss                | 11 ++--
 components/button/index.jsx                   | 24 +++++----
 components/button/readme.md                   | 32 +++++++----
 components/button/style.scss                  | 53 +++++++++++++++++--
 components/drawer/readme.md                   |  2 +-
 components/navigation/readme.md               |  4 +-
 components/snackbar/index.jsx                 |  1 -
 components/snackbar/readme.md                 |  2 +-
 components/tooltip/readme.md                  |  2 +-
 docs/app/components/layout/home/index.jsx     |  2 +-
 docs/app/components/layout/install/install.md |  2 +-
 docs/app/components/layout/main/index.jsx     |  4 +-
 .../modules/examples/button_example_1.txt     | 23 +++++---
 .../modules/examples/drawer_example_1.txt     |  2 +-
 .../modules/examples/navigation_example_1.txt |  4 +-
 .../modules/examples/snackbar_example_1.txt   |  2 +-
 .../modules/examples/tooltip_example_1.txt    |  2 +-
 spec/components/button.jsx                    | 25 +++++----
 spec/components/dialog.jsx                    |  6 +--
 spec/components/drawer.jsx                    |  6 +--
 spec/components/snackbar.jsx                  |  2 +-
 spec/components/tooltip.jsx                   |  6 +--
 spec/root.jsx                                 |  2 +-
 25 files changed, 156 insertions(+), 78 deletions(-)

diff --git a/README.md b/README.md
index 43a14e047..6a9bf531b 100644
--- a/README.md
+++ b/README.md
@@ -27,7 +27,7 @@ import React from 'react';
 import Button from 'react-toolbox/lib/button';
 
 const CustomButton = () => (
-  <Button label="Hello world" kind="raised" accent />
+  <Button label="Hello world" raised accent />
 );
 
 export default CustomButton;
diff --git a/components/button/__test__/index.spec.jsx b/components/button/__test__/index.spec.jsx
index 764e34930..e540b9f08 100644
--- a/components/button/__test__/index.spec.jsx
+++ b/components/button/__test__/index.spec.jsx
@@ -7,12 +7,11 @@ describe('Button', function () {
   let button;
 
   describe('#render', function () {
-
-    it('uses flat and primary styles by default', function () {
+    it('uses flat and neutral styles by default', function () {
       button = utils.shallowRenderComponent(Button);
 
       expect(button.props.className).toContain(style.flat);
-      expect(button.props.className).toContain(style.primary);
+      expect(button.props.className).toContain(style.neutral);
     });
 
     it('renders accent button with accent style', function () {
@@ -22,11 +21,11 @@ describe('Button', function () {
       expect(button.props.className).toContain(style.accent);
     });
 
-    it('1 renders mini button with mini style', function () {
-      button = utils.shallowRenderComponent(Button, { mini: true });
+    it('renders mini button with mini style', function () {
+      button = utils.shallowRenderComponent(Button, { floating: true, mini: true });
 
-      expect(button.props.className).toContain(style.flat);
-      expect(button.props.className).toContain(style.primary);
+      expect(button.props.className).toContain(style.floating);
+      expect(button.props.className).toContain(style.neutral);
       expect(button.props.className).toContain(style.mini);
     });
 
diff --git a/components/button/_config.scss b/components/button/_config.scss
index 15e0ef0be..d78046718 100644
--- a/components/button/_config.scss
+++ b/components/button/_config.scss
@@ -1,18 +1,21 @@
+$button-neutral-color: unquote("rgb(#{$color-white})") !default;
+$button-neutral-color-contrast: unquote("rgb(#{$palette-grey-900})") !default;
+$button-neutral-color-hover: unquote("rgba(#{$palette-grey-900}, 0.20)") !default;
+$button-primary-color-contrast: unquote("rgb(#{$color-primary-contrast})") !default;
+$button-primary-color-hover: unquote("rgba(#{$color-primary}, 0.20)") !default;
+$button-primary-color: unquote("rgb(#{$color-primary})") !default;
 $button-accent-color-contrast: unquote("rgb(#{$color-primary-contrast})") !default;
 $button-accent-color-hover: unquote("rgba(#{$color-accent}, 0.20)") !default;
 $button-accent-color: unquote("rgb(#{$color-accent})") !default;
-$button-border-radius: 0.2 * $unit;
 $button-default-text-color: unquote("rgb(#{$color-black})") !default;
 $button-disabled-text-color: unquote("rgba(#{$color-black}, 0.26)") !default;
 $button-flat-color-hover: unquote("rgba(#{$color-black}, 0.26)") !default;
+$button-border-radius: 0.2 * $unit;
 $button-floating-font-size: $unit * 2.4;
 $button-floating-height-mini: $unit * 4;
 $button-floating-mini-font-size: $button-floating-height-mini / 2.25;
 $button-floating-height: $unit * 5.6;
 $button-height: $unit * 3.6;
-$button-primary-color-contrast: unquote("rgb(#{$color-primary-contrast})") !default;
-$button-primary-color-hover: unquote("rgba(#{$color-primary}, 0.20)") !default;
-$button-primary-color: unquote("rgb(#{$color-primary})") !default;
 $button-solid-background-color: unquote("rgba(#{$palette-grey-500}, 0.20)") !default;
 $button-solid-disabled-background-color: unquote("rgba(#{$color-black}, 0.12)") !default;
 $button-squared-icon-margin: $unit * .6;
diff --git a/components/button/index.jsx b/components/button/index.jsx
index 05a43baed..2e314a3da 100644
--- a/components/button/index.jsx
+++ b/components/button/index.jsx
@@ -10,13 +10,16 @@ class Button extends React.Component {
     accent: React.PropTypes.bool,
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
+    flat: React.PropTypes.bool,
+    floating: React.PropTypes.bool,
     icon: React.PropTypes.string,
-    kind: React.PropTypes.string,
     label: React.PropTypes.string,
     loading: React.PropTypes.bool,
     mini: React.PropTypes.bool,
     primary: React.PropTypes.bool,
+    raised: React.PropTypes.bool,
     ripple: React.PropTypes.bool,
+    toggle: React.PropTypes.bool,
     tooltip: React.PropTypes.string,
     type: React.PropTypes.string
   };
@@ -24,11 +27,14 @@ class Button extends React.Component {
   static defaultProps = {
     accent: false,
     className: '',
-    kind: 'flat',
+    flat: false,
+    floating: false,
     loading: false,
     mini: false,
     primary: false,
-    ripple: true
+    raised: false,
+    ripple: true,
+    toggle: false
   };
 
   handleMouseDown = (event) => {
@@ -38,14 +44,14 @@ class Button extends React.Component {
   };
 
   render () {
-    let className = style[this.props.kind];
-    const {label, icon, loading, ripple, primary, accent, mini, kind, tooltip, href, ...others} = this.props;
+    const {accent, flat, floating, href, icon, label, loading, mini,
+           primary, raised, ripple, toggle, tooltip, ...others} = this.props;
     const element = href ? 'a' : 'button';
+    const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
+    const shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : toggle ? 'toggle' : 'flat';
+    let className = `${style[shape]} ${style[level]}`;
 
     if (this.props.className) className += ` ${this.props.className}`;
-    if (!primary && !accent) className += ` ${style.primary}`;
-    if (primary) className += ` ${style.primary}`;
-    if (accent) className += ` ${style.accent}`;
     if (mini) className += ` ${style.mini}`;
 
     const props = {
@@ -58,7 +64,7 @@ class Button extends React.Component {
 
     return React.createElement(element, props,
       ripple ? <Ripple ref='ripple' loading={loading}/> : null,
-      tooltip ? <Tooltip label={tooltip}/> : null,
+      tooltip ? <Tooltip className={style.tooltip} label={tooltip}/> : null,
       icon ? <FontIcon className={style.icon} value={icon}/> : null,
       label ? label : this.props.children
     );
diff --git a/components/button/readme.md b/components/button/readme.md
index 29f1af3ac..0d73910da 100644
--- a/components/button/readme.md
+++ b/components/button/readme.md
@@ -14,14 +14,20 @@ const GithubIcon = () => (
 
 const TestButtons = () => (
   <div>
-    <Button href='http://github.com/javivelasco' target='_blank' kind='raised' accent>
-      <GithubIcon /> Github Profile
+    <Button href='http://github.com/javivelasco' target='_blank' raised>
+      <GithubIcon /> Github
     </Button>
-    <Button label="Flat button" />
-    <Button kind="raised" label="Raised" />
-    <Button kind="raised" label="Raised accent" accent icon="favorite" />
-    <Button className="primary" kind="floating" icon="add" />
-    <Button mini kind="floating" icon="add" accent />
+    <Button icon='bookmark' label='Bookmark' accent />
+    <Button icon='bookmark' label='Bookmark' raised primary />
+    <Button icon='inbox' label='Inbox' flat />
+    <Button icon='add' floating />
+    <Button icon='add' floating accent mini />
+    <Button icon='mood' toggle />
+    <Button toggle primary>
+      <GithubIcon />
+    </Button>
+    <Button icon='add' label='Add this' flat primary />
+    <Button icon='add' label='Add this' flat disabled />
   </div>
 );
 ```
@@ -30,16 +36,22 @@ const TestButtons = () => (
 
 | Name      | Type      | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `accent`    | `Bool`    | `false` | Indicates if the button should have accent color.|
+| `accent`    | `Boolean`   | `false` | Indicates if the button should have accent color.|
 | `className` | `String`  | `''` | Set a class to style the Component.|
 | `disabled`  | `Boolean` | `false` | If true, component will be disabled.|
+| `flat`      | `Boolean`  | `false` | If true, the button will have a flat look. |
+| `floating`  | `Boolean`  | `false` | If true, the button will have a floating look. |
 | `icon`      | `String`  |  | Value of the icon (See icon component). |
-| `kind`      | `String`  | `flat`  | Type of the component, overwrite this property if you need set a different stylesheet.|
 | `label`     | `String`  |  | The text string to use for the name of the button.|
 | `loading`   | `Boolean`  | `false` | If true, component will be disabled and show a loading animation.|
 | `mini`  | `Boolean` | `false`  | To be used with floating button. If true the button will be smaller.|
 | `onClick`  | `Function` |  | Callback called when the button is clicked.|
-| `primary`  | `false` | | If true, component will have the primary color.|
+| `primary`  | `false` | `false` | Indicates if the button should have primary color.|
+| `raised`   | `Boolean`  | `false` | If true, the button will have a raised look. |
 | `ripple`  | `Boolean`  | `true`    | If true, component will have a ripple effect on click.|
+| `toggle`   | `Boolean`  | `false` | If true, the button will have a toggle icon look. |
+| `tooptip`   | `String`  |  | The value will be shown as a tooltip when the button is hovered. |
+
+By default it will have neutral colors and a flat aspect even though the `flat` property is `false` by default. Also, some properties exclude others, for example a button cannot be `flat` and `raised` at the same time. 
 
 The `Button` component also accept children so if you want to provide a custom component and text instead of a `label` and `icon` you can do it too. Just check the examples.
diff --git a/components/button/style.scss b/components/button/style.scss
index fb5ae8fab..a8cb43344 100644
--- a/components/button/style.scss
+++ b/components/button/style.scss
@@ -23,7 +23,7 @@
   &::-moz-focus-inner {
     border: 0;
   }
-  > span {
+  > span:not(.tooltip) {
     @include typo-button();
     display: inline-block;
     line-height: $button-height;
@@ -33,7 +33,6 @@
     display: inline-block;
     width: 1em;
     height: 1em;
-    margin-right: .5 * $unit;
     font-size: 120%;
     vertical-align: middle;
     fill: currentColor;
@@ -55,6 +54,9 @@
     font-size: 120%;
     vertical-align: middle;
   }
+  > svg {
+    margin-right: .5 * $unit;
+  }
 }
 
 %disabled {
@@ -78,6 +80,33 @@
   }
 }
 
+.toggle {
+  @extend %button;
+  @extend %toggle;
+  width: $button-height;
+  background: transparent;
+  border-radius: 50%;
+  &:hover {
+    background: $button-flat-color-hover;
+  }
+  &:focus:not(:active) {
+    background: $button-flat-color-hover;
+  }
+  &[disabled] {
+    @extend %disabled;
+  }
+  .icon {
+    font-size: 120%;
+    vertical-align: middle;
+  }
+  .icon {
+    line-height: $button-height;
+  }
+  [data-react-toolbox="ripple"] {
+    border-radius: 50%;
+  }
+}
+
 .raised {
   @extend %button;
   @extend %squared;
@@ -129,7 +158,7 @@
     color: $button-primary-color-contrast;
     background: $button-primary-color;
   }
-  &.flat {
+  &.flat, &.toggle {
     color: $button-primary-color;
     &:hover {
       background: $button-primary-color-hover;
@@ -145,7 +174,7 @@
     color: $button-accent-color-contrast;
     background-color: $button-accent-color;
   }
-  &.flat {
+  &.flat, &.toggle {
     color: $button-accent-color;
     &:hover {
       background: $button-accent-color-hover;
@@ -156,6 +185,22 @@
   }
 }
 
+.neutral:not([disabled]) {
+  &.raised, &.floating {
+    color: $button-neutral-color-contrast;
+    background-color: $button-neutral-color;
+  }
+  &.flat, &.toggle {
+    color: $button-neutral-color-contrast;
+    &:hover {
+      background: $button-neutral-color-hover;
+    }
+    &:focus:not(:active) {
+      background: $button-neutral-color-hover;
+    }
+  }
+}
+
 .mini.floating {
   width: $button-floating-height-mini;
   height: $button-floating-height-mini;
diff --git a/components/drawer/readme.md b/components/drawer/readme.md
index 51ca8bc93..e1add337c 100644
--- a/components/drawer/readme.md
+++ b/components/drawer/readme.md
@@ -18,7 +18,7 @@ class DrawerTest extends React.Component {
   render () {
     return (
       <div>
-        <Button kind='raised' accent label='Show Drawer' onClick={this.handleToggle} />
+        <Button label='Show Drawer' raised accent onClick={this.handleToggle} />
         <Drawer active={this.state.active} onOverlayClick={this.handleToggle}>
           <h5>This is your Drawer.</h5>
           <p>You can embed any content you want, for example a Menu.</p>
diff --git a/components/navigation/readme.md b/components/navigation/readme.md
index 5c41537d4..72c0b9df8 100644
--- a/components/navigation/readme.md
+++ b/components/navigation/readme.md
@@ -12,8 +12,8 @@ const links = [
 ];
 
 const actions = [
-  { label: 'Alarm', kind: 'raised', icon: 'access-alarm'},
-  { label: 'Location', kind: 'raised', accent: true, icon: 'room'}
+  { label: 'Alarm', raised: true, icon: 'access-alarm'},
+  { label: 'Location', raised: true, accent: true, icon: 'room'}
 ];
 
 const NavigationTest = () => (
diff --git a/components/snackbar/index.jsx b/components/snackbar/index.jsx
index 06bc63244..4e7b9cec7 100644
--- a/components/snackbar/index.jsx
+++ b/components/snackbar/index.jsx
@@ -30,7 +30,6 @@ class Snackbar extends React.Component {
       return (
         <Button
           className={style.button}
-          kind='flat'
           label={this.props.action}
           onClick={this.props.onClick}
         />
diff --git a/components/snackbar/readme.md b/components/snackbar/readme.md
index ddeec1565..80dbde85e 100644
--- a/components/snackbar/readme.md
+++ b/components/snackbar/readme.md
@@ -18,7 +18,7 @@ class SnackbarTest extends React.Component {
   render () {
     return (
       <section>
-        <Button label='Show Snackbar' kind='raised' onClick={this.handleClick} />
+        <Button label='Show Snackbar' raised onClick={this.handleClick} />
         <Snackbar
           action='http://github.com/Nice'
           icon='question-answer'
diff --git a/components/tooltip/readme.md b/components/tooltip/readme.md
index 75d86e870..a2dff7fbc 100644
--- a/components/tooltip/readme.md
+++ b/components/tooltip/readme.md
@@ -10,7 +10,7 @@ import Tooltip from 'react-toolbox/lib/tooltip';
 const TooltipTest = () => (
   <div>
     <p>Lorem ipsum dolor sit amet, <strong>consectetur<Tooltip label='This is a auto show tooltip' /></strong> adipiscing elit.</p>
-    <Button label='Button with tooltip' kind='raised' accent tooltip='This is a tooltip by property' />
+    <Button label='Button with tooltip' raised accent tooltip='This is a tooltip by property' />
   </div>
 );
 ```
diff --git a/docs/app/components/layout/home/index.jsx b/docs/app/components/layout/home/index.jsx
index af26e52e2..1167bc34e 100644
--- a/docs/app/components/layout/home/index.jsx
+++ b/docs/app/components/layout/home/index.jsx
@@ -50,7 +50,7 @@ const Home = () => (
       </p>
 
       <Link to='/components'>
-        <Button label='Try it now!' kind='raised' accent />
+        <Button label='Try it now!' raised accent />
       </Link>
     </section>
 
diff --git a/docs/app/components/layout/install/install.md b/docs/app/components/layout/install/install.md
index 0c6fed711..f8842c43b 100644
--- a/docs/app/components/layout/install/install.md
+++ b/docs/app/components/layout/install/install.md
@@ -21,7 +21,7 @@ import React from 'react';
 import Button from 'react-toolbox/lib/button';
 
 const CustomButton = () => (
-  <Button label="Hello world" kind="raised" accent />
+  <Button label="Hello world" raised accent />
 );
 
 export default CustomButton;
diff --git a/docs/app/components/layout/main/index.jsx b/docs/app/components/layout/main/index.jsx
index b0869d8c7..cb9fe5c5c 100644
--- a/docs/app/components/layout/main/index.jsx
+++ b/docs/app/components/layout/main/index.jsx
@@ -12,8 +12,8 @@ import style from './style';
 const LoadExampleButton = (props) => {
   return (
     <Button
+      raised
       accent
-      kind='raised'
       icon='code'
       label='Load in playground'
       onClick={props.onClick}
@@ -76,9 +76,9 @@ class Main extends React.Component {
         <Appbar className={style.appbar}/>
         <Button
           accent
+          floating
           className={style['playground-button']}
           icon={this.state.playground ? 'close' : 'code'}
-          kind='floating'
           onClick={this.handlePlayGroundClick}
         />
         <MainNavigation className={style.navigation} />
diff --git a/docs/app/components/layout/main/modules/examples/button_example_1.txt b/docs/app/components/layout/main/modules/examples/button_example_1.txt
index 282ec3748..d929b5903 100644
--- a/docs/app/components/layout/main/modules/examples/button_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/button_example_1.txt
@@ -6,14 +6,23 @@ const GithubIcon = () => (
 
 const ButtonsTest = () => (
   <div>
-    <Button href='http://github.com/javivelasco' target='_blank' kind='raised'>
-      <GithubIcon /> Github Profile
+    <Button href='http://github.com/javivelasco' target='_blank' raised>
+      <GithubIcon /> Github
     </Button>
-    <Button label="Flat button" />
-    <Button kind="raised" label="Raised" />
-    <Button kind="raised" label="Raised accent" accent icon="favorite" />
-    <Button className="primary" kind="floating" icon="add" />
-    <Button mini kind="floating" icon="add" accent />
+    <Button icon='bookmark' label='Bookmark' accent />
+    <Button icon='bookmark' label='Bookmark' raised primary />
+    <Button icon='inbox' label='Inbox' flat />
+    <Button icon='add' floating />
+    <Button icon='add' floating primary />
+    <Button icon='add' floating primary disabled />
+    <Button icon='add' floating accent mini />
+    <Button icon='mood' toggle />
+    <Button toggle primary>
+      <GithubIcon />
+    </Button>
+    <Button icon='add' label='Add this' flat primary />
+    <Button icon='add' label='Add this' flat disabled />
+    <Button icon='bookmark' label='Bookmark' raised primary loading />
   </div>
 );
 
diff --git a/docs/app/components/layout/main/modules/examples/drawer_example_1.txt b/docs/app/components/layout/main/modules/examples/drawer_example_1.txt
index 98820fd2d..1a0c95c44 100644
--- a/docs/app/components/layout/main/modules/examples/drawer_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/drawer_example_1.txt
@@ -10,7 +10,7 @@ class DrawerTest extends React.Component {
   render () {
     return (
       <div>
-        <Button kind='raised' accent label='Show Drawer' onClick={this.handleToggle} />
+        <Button raised accent label='Show Drawer' onClick={this.handleToggle} />
         <Drawer active={this.state.active} onOverlayClick={this.handleToggle}>
           <h5>This is your Drawer.</h5>
           <p>You can embed any content you want, for example a Menu.</p>
diff --git a/docs/app/components/layout/main/modules/examples/navigation_example_1.txt b/docs/app/components/layout/main/modules/examples/navigation_example_1.txt
index 7ac3efb27..151137d1f 100644
--- a/docs/app/components/layout/main/modules/examples/navigation_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/navigation_example_1.txt
@@ -4,8 +4,8 @@ const links = [
 ];
 
 const actions = [
-  { label: 'Alarm', kind: 'raised', icon: 'access-alarm'},
-  { label: 'Location', kind: 'raised', accent: true, icon: 'room'}
+  { label: 'Alarm', raised: true, icon: 'access-alarm'},
+  { label: 'Location', raised: true, accent: true, icon: 'room'}
 ];
 
 const NavigationTest = () => (
diff --git a/docs/app/components/layout/main/modules/examples/snackbar_example_1.txt b/docs/app/components/layout/main/modules/examples/snackbar_example_1.txt
index 7701639bf..e2a4a96cf 100644
--- a/docs/app/components/layout/main/modules/examples/snackbar_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/snackbar_example_1.txt
@@ -20,7 +20,7 @@ class SnackbarTest extends React.Component {
   render () {
     return (
       <section>
-        <Button label='Show snackbar' kind='raised' onClick={this.handleClick} />
+        <Button label='Show snackbar' raised primary onClick={this.handleClick} />
         <Snackbar
           action='http://github.com/Dismiss'
           active={this.state.active}
diff --git a/docs/app/components/layout/main/modules/examples/tooltip_example_1.txt b/docs/app/components/layout/main/modules/examples/tooltip_example_1.txt
index d9dbbccd6..e50b1547b 100644
--- a/docs/app/components/layout/main/modules/examples/tooltip_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/tooltip_example_1.txt
@@ -1,7 +1,7 @@
 const TooltipTest = () => (
   <div>
     <p>Lorem ipsum dolor sit amet, <strong>consectetur<Tooltip label='This is a auto show tooltip' /></strong> adipiscing elit.</p>
-    <Button label='Button with tooltip' kind='raised' accent tooltip='This is a tooltip by property' />
+    <Button label='Button with tooltip' raised accent tooltip='This is a tooltip by property' />
   </div>
 );
 
diff --git a/spec/components/button.jsx b/spec/components/button.jsx
index c492c58d6..3d1f55718 100644
--- a/spec/components/button.jsx
+++ b/spec/components/button.jsx
@@ -11,17 +11,22 @@ const ButtonTest = () => (
   <section>
     <h5>Buttons</h5>
     <p>lorem ipsum...</p>
-    <Button href='http://github.com/javivelasco' target='_blank' kind='raised' accent>
-      <GithubIcon /> Github Profile
+
+    <Button href='http://github.com/javivelasco' target='_blank' raised>
+      <GithubIcon /> Github
     </Button>
-    <Button kind='raised' primary label='Bookmark' icon='bookmark' />
-    <Button kind='flat' accent label='Inbox' icon='inbox' />
-    <Button kind='floating' primary icon='add' />
-    <Button kind='floating' primary disabled icon='add' />
-    <Button kind='floating' accent mini icon='add' />
-    <Button kind='flat' primary icon='add' label='Add this' />
-    <Button kind='raised' primary label='Bookmark' icon='bookmark' loading />
-    <Button kind='flat' disabled icon='add' label='Add this' />
+    <Button icon='bookmark' label='Bookmark' accent />
+    <Button icon='bookmark' label='Bookmark' raised primary />
+    <Button icon='inbox' label='Inbox' flat />
+    <Button icon='add' floating />
+    <Button icon='add' floating primary />
+    <Button icon='add' floating primary disabled />
+    <Button icon='add' floating accent mini />
+    <Button icon='mood' toggle />
+    <Button toggle primary><GithubIcon /></Button>
+    <Button icon='add' label='Add this' flat primary />
+    <Button icon='add' label='Add this' flat disabled />
+    <Button icon='bookmark' label='Bookmark' raised primary loading />
   </section>
 );
 
diff --git a/spec/components/dialog.jsx b/spec/components/dialog.jsx
index 214face70..26cecff9f 100644
--- a/spec/components/dialog.jsx
+++ b/spec/components/dialog.jsx
@@ -15,8 +15,8 @@ class DialogTest extends React.Component {
   }
 
   actions = [
-    { label: 'Disagree', type: 'flat', className: 'primary', onClick: this.handleToggle },
-    { label: 'Agree', type: 'flat', className: 'primary', onClick: this.handleToggle }
+    { label: 'Disagree', primary: true, onClick: this.handleToggle },
+    { label: 'Agree', primary: true, onClick: this.handleToggle }
   ];
 
   render () {
@@ -24,7 +24,7 @@ class DialogTest extends React.Component {
       <section>
         <h5>Dialog</h5>
         <p>lorem ipsum...</p>
-        <Button kind='raised' label='Show Dialog' onClick={this.handleToggle} />
+        <Button label='Show Dialog' raised primary onClick={this.handleToggle} />
         <Dialog
           actions={this.actions}
           active={this.state.active}
diff --git a/spec/components/drawer.jsx b/spec/components/drawer.jsx
index 19ed880ef..f76fea7ae 100644
--- a/spec/components/drawer.jsx
+++ b/spec/components/drawer.jsx
@@ -29,12 +29,12 @@ class DrawerTest extends React.Component {
         </Drawer>
 
         <Drawer active={this.state.rightActive} type='right'>
-          <Button label='Close' onClick={this.handleToggleRight} />
+          <Button primary label='Close' onClick={this.handleToggleRight} />
         </Drawer>
 
         <nav>
-          <Button accent label='Drawer left' kind='raised' onClick={this.handleToggleLeft} />
-          <Button primary label='Drawer right' kind='raised' onClick={this.handleToggleRight} />
+          <Button label='Drawer left' raised primary onClick={this.handleToggleLeft} />
+          <Button label='Drawer right' raised accent onClick={this.handleToggleRight} />
         </nav>
       </section>
     );
diff --git a/spec/components/snackbar.jsx b/spec/components/snackbar.jsx
index 4959098ad..266a9cf30 100644
--- a/spec/components/snackbar.jsx
+++ b/spec/components/snackbar.jsx
@@ -27,7 +27,7 @@ class SnackbarTest extends React.Component {
       <section>
         <h5>Snackbars & Toasts</h5>
         <p>lorem ipsum...</p>
-        <Button label='Show snackbar' kind='raised' onClick={this.handleClick} />
+        <Button label='Show snackbar' primary raised onClick={this.handleClick} />
         <Snackbar
           action='http://github.com/Dismiss'
           active={this.state.active}
diff --git a/spec/components/tooltip.jsx b/spec/components/tooltip.jsx
index 375d67db3..dd4c5011c 100644
--- a/spec/components/tooltip.jsx
+++ b/spec/components/tooltip.jsx
@@ -7,9 +7,9 @@ const TooltipTest = () => (
   <section>
     <h5>Tooltip</h5>
     <p>Give information on :hover</p>
-    <Button kind='raised' primary label='Bookmark' icon='bookmark' tooltip='Bookmark Tooltip' />
-    <Button kind='floating' primary accent icon='add' tooltip='Floating Tooltip' />
-    <Button kind='floating' primary disabled icon='add' tooltip='Floating can not show' />
+    <Button label='Bookmark' icon='bookmark' raised primary tooltip='Bookmark Tooltip' />
+    <Button icon='add' floating accent tooltip='Floating Tooltip' />
+    <Button icon='add' floating disabled tooltip='Floating can not be shown' />
     <Input tooltip='lorem ipsum...'/>
     <p>
       Lorem ipsum dolor sit amet, <strong>consectetur<Tooltip label='This is a auto show tooltip' /></strong> adipiscing elit.
diff --git a/spec/root.jsx b/spec/root.jsx
index 8951ff4c0..e2b025e68 100644
--- a/spec/root.jsx
+++ b/spec/root.jsx
@@ -37,7 +37,7 @@ const Root = () => (
         accent
         className={style.github}
         icon='web'
-        kind='floating'
+        floating
         onClick={_hrefProject}
       />
     </AppBarToolbox>

From 54ad233dd663aec0f7e4c8a3af986e578e6f69bd Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 18 Nov 2015 01:15:07 +0100
Subject: [PATCH 0092/1024] Fix scss linter errors and bugfix in snackbar

---
 .csscomb.json                          |  2 +-
 .scss-lint.yml                         |  2 ++
 components/animations/slide-left.scss  |  1 +
 components/animations/slide-right.scss |  1 +
 components/commons.scss                |  2 +-
 components/date_picker/style.scss      |  2 +-
 components/form/style.scss             |  6 ++----
 components/input/style.scss            |  2 +-
 components/overlay/index.jsx           |  2 +-
 components/progress_bar/style.scss     | 12 +++++-------
 components/snackbar/_config.scss       | 11 +++++++----
 components/snackbar/style.scss         | 19 ++++++++-----------
 package.json                           |  2 +-
 spec/components/snackbar.jsx           |  4 ++--
 14 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/.csscomb.json b/.csscomb.json
index 2c3abada3..219133445 100644
--- a/.csscomb.json
+++ b/.csscomb.json
@@ -18,7 +18,7 @@
   "space-before-opening-brace": 1,
   "strip-spaces": true,
   "unitless-zero": true,
-  "vendor-prefix-align": true,
+  "vendor-prefix-align": false,
   "sort-order": [
     [
       "$variable",
diff --git a/.scss-lint.yml b/.scss-lint.yml
index b6017f8ff..2a87f8d42 100644
--- a/.scss-lint.yml
+++ b/.scss-lint.yml
@@ -1,5 +1,7 @@
 scss_files: "./components/**/*.scss"
 
+exclude: "./node_modules"
+
 linters:
   BangFormat:
     enabled: true
diff --git a/components/animations/slide-left.scss b/components/animations/slide-left.scss
index 30fa9aecd..70d46ac4d 100644
--- a/components/animations/slide-left.scss
+++ b/components/animations/slide-left.scss
@@ -1,3 +1,4 @@
+// scss-lint:disable SelectorFormat
 @import "http://github.com/base";
 
 .enter, .leave {
diff --git a/components/animations/slide-right.scss b/components/animations/slide-right.scss
index 55b6ea3b1..5ef840132 100644
--- a/components/animations/slide-right.scss
+++ b/components/animations/slide-right.scss
@@ -1,3 +1,4 @@
+// scss-lint:disable SelectorFormat
 @import "http://github.com/base";
 
 .enter, .leave {
diff --git a/components/commons.scss b/components/commons.scss
index 2c8483bde..e71c736ae 100644
--- a/components/commons.scss
+++ b/components/commons.scss
@@ -138,9 +138,9 @@ body[data-flex] {
 }
 
 [data-flex*="center"] {
-  justify-content: center;
   align-content: center;
   align-items: center;
+  justify-content: center;
 }
 
 [data-flex-justify="start"] {
diff --git a/components/date_picker/style.scss b/components/date_picker/style.scss
index 9078184a2..e3fcb3461 100644
--- a/components/date_picker/style.scss
+++ b/components/date_picker/style.scss
@@ -8,8 +8,8 @@
 .header {
   padding: 1.6 * $unit 2 * $unit;
   color: $datepicker-primary-contrast-color;
-  background-color: $datepicker-primary-color;
   cursor: pointer;
+  background-color: $datepicker-primary-color;
 }
 
 .year {
diff --git a/components/form/style.scss b/components/form/style.scss
index c099dd316..86ed935cc 100644
--- a/components/form/style.scss
+++ b/components/form/style.scss
@@ -1,5 +1,3 @@
-.root {
-  & > :last-child {
-    margin-bottom: 0 !important;
-  }
+.root > :last-child {
+  margin-bottom: 0;
 }
diff --git a/components/input/style.scss b/components/input/style.scss
index d28291267..b36350da9 100644
--- a/components/input/style.scss
+++ b/components/input/style.scss
@@ -44,7 +44,7 @@
       color: $input-text-highlight-color;
     }
   }
-  &:focus, &.filled, &[type='date'], &[type='time']{
+  &:focus, &.filled, &[type='date'], &[type='time'] {
     ~ .label:not(.fixed) {
       top: $input-focus-label-top;
       font-size: $input-label-font-size;
diff --git a/components/overlay/index.jsx b/components/overlay/index.jsx
index f50790c54..55e7e0b32 100644
--- a/components/overlay/index.jsx
+++ b/components/overlay/index.jsx
@@ -36,7 +36,7 @@ class Overlay extends React.Component {
     const overlayStyle = {};
 
     if (this.props.active) {
-      if (this.props.opacity > 0) className += ` ${style.active}`;
+      className += ` ${style.active}`;
       overlayStyle.opacity = this.props.opacity;
     }
     if (this.props.className) className += ` ${className}`;
diff --git a/components/progress_bar/style.scss b/components/progress_bar/style.scss
index 70111bf00..e34bc766e 100644
--- a/components/progress_bar/style.scss
+++ b/components/progress_bar/style.scss
@@ -8,7 +8,6 @@
   height: $progress-height;
   overflow: hidden;
   background: $color-divider;
-
   &.indeterminate .value {
     transform-origin: center center;
     animation: linear-indeterminate-bar 1s linear infinite;
@@ -33,7 +32,7 @@
 
 .buffer {
   background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
-                      linear-gradient(to right, $progress-main-color, $progress-main-color);
+  linear-gradient(to right, $progress-main-color, $progress-main-color);
 }
 
 .circular {
@@ -42,21 +41,19 @@
   width: $circle-wrapper-width * 1px;
   height: $circle-wrapper-width * 1px;
   transform: rotate(-90deg);
-
   &.indeterminate {
     .circle {
       animation: circular-indeterminate-bar-rotate 2s linear infinite;
     }
-
     .path {
       animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite;
+
       stroke-dasharray: $scale-ratio * 1, $scale-ratio * 200;
       stroke-dashoffset: 0;
     }
-
     &.multicolor .path {
       animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite,
-                       colors (1.5s * 4) ease-in-out infinite;
+      colors (1.5s * 4) ease-in-out infinite;
     }
   }
 }
@@ -68,13 +65,14 @@
 
 .path {
   transition: stroke-dasharray $animation-duration $animation-curve-default;
+  fill: none;
+
   stroke-dasharray: 0, $scale-ratio * 200;
   stroke-dashoffset: 0;
   stroke-linecap: round;
   stroke-miterlimit: 20;
   stroke-width: 4;
   stroke: $progress-main-color;
-  fill: none;
 }
 
 @keyframes linear-indeterminate-bar {
diff --git a/components/snackbar/_config.scss b/components/snackbar/_config.scss
index 7a96ab3be..ee140abc7 100644
--- a/components/snackbar/_config.scss
+++ b/components/snackbar/_config.scss
@@ -1,6 +1,9 @@
+$snackbar-color-cancel: unquote("rgb(#{$palette-red-500})") !default;
+$snackbar-color-accept: unquote("rgb(#{$palette-green-500})") !default;
+$snackbar-color-warning: unquote("rgb(#{$palette-lime-a200})") !default;
 $snackbar-background-color: $color-text !default;
-$snackbar-border-radius: .2 * $unit;
-$snackbar-button-offset: 4.8 * $unit;
+$snackbar-border-radius: .2 * $unit !default;
+$snackbar-button-offset: 4.8 * $unit !default;
 $snackbar-color: unquote("rgb(#{$color-white})") !default;
-$snackbar-horizontal-offset: 2.4 * $unit;
-$snackbar-vertical-offset: 1.4 * $unit;
+$snackbar-horizontal-offset: 2.4 * $unit !default;
+$snackbar-vertical-offset: 1.4 * $unit !default;
diff --git a/components/snackbar/style.scss b/components/snackbar/style.scss
index 50fb89113..d27da625d 100644
--- a/components/snackbar/style.scss
+++ b/components/snackbar/style.scss
@@ -1,29 +1,30 @@
 @import "http://github.com/base";
 @import "http://github.com/config";
 
+
 .root {
-  z-index: $z-index-higher;
   position: fixed;
+  right: $snackbar-horizontal-offset;
   bottom: 0;
   left: $snackbar-horizontal-offset;
-  right: $snackbar-horizontal-offset;
-  margin: 0 auto;
+  z-index: $z-index-higher;
   display: flex;
   align-items: center;
   padding: $snackbar-vertical-offset $snackbar-horizontal-offset;
+  margin: 0 auto;
   margin-top: $snackbar-vertical-offset;
   color: $snackbar-color;
   background-color: $snackbar-background-color;
   border-radius: $snackbar-border-radius;
   transition: all $animation-duration $animation-curve-default $animation-duration;
   &.accept .button {
-    color: green;
+    color: $snackbar-color-accept;
   }
   &.warning .button {
-    color: orange;
+    color: $snackbar-color-warning;
   }
   &.cancel .button {
-    color: red;
+    color: $snackbar-color-cancel;
   }
   &:not(.active) {
     transform: translateY(100%);
@@ -45,11 +46,7 @@
 .button {
   min-width: inherit;
   margin-top: - $snackbar-vertical-offset / 2;
-  margin-bottom: - $snackbar-vertical-offset / 2;
   margin-right: - $snackbar-horizontal-offset / 2;
+  margin-bottom: - $snackbar-vertical-offset / 2;
   margin-left: $snackbar-button-offset;
-  color: white;
-  > abbr {
-    line-height: inherit;
-  }
 }
diff --git a/package.json b/package.json
index 6719b8b12..448df243b 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
   "main": "./lib",
   "scripts": {
     "start": "cross-env NODE_ENV=development UV_THREADPOOL_SIZE=100 node ./server",
-    "lint": "eslint ./ --ext .js,.jsx",
+    "lint": "eslint ./ --ext .js,.jsx && scss-lint",
     "babel": "babel ./components --out-dir ./lib",
     "sass": "cpx './components/**/*.scss' ./lib",
     "build": "cross-env NODE_ENV=production npm run babel && npm run sass",
diff --git a/spec/components/snackbar.jsx b/spec/components/snackbar.jsx
index 266a9cf30..4733870df 100644
--- a/spec/components/snackbar.jsx
+++ b/spec/components/snackbar.jsx
@@ -29,14 +29,14 @@ class SnackbarTest extends React.Component {
         <p>lorem ipsum...</p>
         <Button label='Show snackbar' primary raised onClick={this.handleClick} />
         <Snackbar
-          action='http://github.com/Dismiss'
+          action='http://github.com/Hide'
           active={this.state.active}
           icon='question-answer'
           label='Snackbar action cancel'
           timeout={2}
           onClick={this.handleSnackbarClick}
           onTimeout={this.handleSnackbarTimeout}
-          type='cancel'
+          type='warning'
         />
       </section>
     );

From 81e2661e6125d4304a9ee5f4fabba4cbea8f874e Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 18 Nov 2015 01:17:33 +0100
Subject: [PATCH 0093/1024] Fixes #124

---
 .../main/modules/examples/table_example_1.txt | 48 ++++++++++++-------
 1 file changed, 30 insertions(+), 18 deletions(-)

diff --git a/docs/app/components/layout/main/modules/examples/table_example_1.txt b/docs/app/components/layout/main/modules/examples/table_example_1.txt
index 7b3e826a2..2c0a30fff 100644
--- a/docs/app/components/layout/main/modules/examples/table_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/table_example_1.txt
@@ -1,29 +1,41 @@
 const UserModel = {
-  name: {type: String}
-,
-  twitter: {type: String}
-,
-  birthdate: {type: Date}
-,
-  cats: {type: Number}
-,
-  dogs: {type: Number}
-,
+  name: {type: String},
+  twitter: {type: String},
+  birthdate: {type: Date},
+  cats: {type: Number},
+  dogs: {type: Number},
   active: {type: Boolean}
 };
 
 const users = [
-  {name: 'Javi Jimenez', twitter: '@soyjavi', birthdate: new Date(1980, 3, 11), cats: 1}
-,
+  {name: 'Javi Jimenez', twitter: '@soyjavi', birthdate: new Date(1980, 3, 11), cats: 1},
   {name: 'Javi Velasco', twitter: '@javivelasco', birthdate: new Date(1987, 1, 1), dogs: 1, active: true}
 ];
 
-const handleSelect = (event, selected) => {
-  alert(selected.length);
-};
+class TableTest extends React.Component {
+  state = { selected: [], source: users };
+
+  handleChange = (row, key, value) => {
+    const source = this.state.source;
+    source[row][key] = value;
+    this.setState({source});
+  };
+
+  handleSelect = (selected) => {
+    this.setState({selected});
+  };
 
-const TableTest = () => (
-  <Table model={UserModel} dataSource={users} onSelect={handleSelect} />
-)
+  render () {
+    return (
+      <Table
+        model={UserModel}
+        onChange={this.handleChange}
+        onSelect={this.handleSelect}
+        selected={this.state.selected}
+        source={this.state.source}
+      />
+    );
+  }
+}
 
 return <TableTest />

From cdc08147d65c828b2eb633324c671d7d88a4e38a Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 18 Nov 2015 01:21:35 +0100
Subject: [PATCH 0094/1024] 0.12.7 release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 448df243b..443d60606 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-toolbox",
-  "version": "0.12.6",
+  "version": "0.12.7",
   "homepage": "www.react-toolbox.com",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "author": "React Toolbox Team (http://github.com/react-toolbox)",

From 76a7e913eae447679ac9ac20f6b380549d3991b5 Mon Sep 17 00:00:00 2001
From: jpersson <jonathan.persson@creuna.se>
Date: Tue, 17 Nov 2015 20:28:25 -0500
Subject: [PATCH 0095/1024] Refactor class list generation in `Input` component

---
 components/input/index.jsx | 22 ++++++++++++++--------
 package.json               |  1 +
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/components/input/index.jsx b/components/input/index.jsx
index a91582540..2466e68d1 100644
--- a/components/input/index.jsx
+++ b/components/input/index.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames-minimal';
 import style from './style';
 import FontIcon from '../font_icon';
 import Tooltip from '../tooltip';
@@ -41,14 +42,19 @@ class Input extends React.Component {
   }
 
   render () {
-    let className = style.root;
-    let labelClassName = style.label;
-    if (this.props.error) className += ` ${style.errored}`;
-    if (this.props.disabled) className += ` ${style.disabled}`;
-    if (this.props.className) className += ` ${this.props.className}`;
-    if (this.props.type === 'hidden') className += ` ${style.hidden}`;
-    if (this.props.icon) className += ` ${style['with-icon']}`;
-    if (!this.props.floating) labelClassName += ` ${style.fixed}`;
+    const className = classNames({
+      [style.root]: true,
+      [style.errored]: this.props.error,
+      [style.disabled]: this.props.disabled,
+      [this.props.className]: this.props.className,
+      [style.hidden]: this.props.type === 'hidden',
+      [style['with-icon']]: this.props.icon
+    });
+
+    const labelClassName = classNames({
+      [style.label]: true,
+      [style.fixed]: !this.props.floating
+    });
 
     return (
       <div data-react-toolbox='input' className={className}>
diff --git a/package.json b/package.json
index 443d60606..91ab1dcda 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "babel-eslint": "^4.1.3",
     "babel-loader": "^5.3.2",
     "babel-plugin-react-transform": "^1.1.1",
+    "classnames-minimal": "^1.0.0",
     "core-js": "^1.2.6",
     "cross-env": "^1.0.4",
     "cpx": "^1.2.1",

From 477b770edda7c28db8438e750d4dbc986aa0418b Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Wed, 18 Nov 2015 15:19:58 +0700
Subject: [PATCH 0096/1024] New property 'maxLength'

---
 components/autocomplete/style.scss |  2 +-
 components/input/_config.scss      |  2 +-
 components/input/index.jsx         | 13 ++++++++++++-
 components/input/readme.md         |  1 +
 components/input/style.scss        | 25 ++++++++++++++++++++-----
 spec/components/input.jsx          |  9 +++++++--
 6 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/components/autocomplete/style.scss b/components/autocomplete/style.scss
index 382c6185b..853f0947e 100644
--- a/components/autocomplete/style.scss
+++ b/components/autocomplete/style.scss
@@ -17,7 +17,7 @@
   }
   &.errored {
     .suggestions {
-      margin-top: - $input-error-height;
+      margin-top: - $input-underline-height;
     }
   }
 }
diff --git a/components/input/_config.scss b/components/input/_config.scss
index d89a49116..487e100a4 100644
--- a/components/input/_config.scss
+++ b/components/input/_config.scss
@@ -11,7 +11,7 @@ $input-text-highlight-color: unquote("rgb(#{$color-primary})") !default;
 $input-text-disabled-color: $input-text-bottom-border-color !default;
 $input-text-disabled-text-color: $input-text-label-color !default;
 $input-text-error-color: unquote("rgb(222, 50, 38)") !default;
-$input-error-height:  1.8 * $unit;
+$input-underline-height:  2 * $unit;
 $input-icon-font-size: 2.4 * $unit;
 $input-icon-size: 2 * $input-icon-font-size;
 $input-icon-offset: 1.6 * $unit;
diff --git a/components/input/index.jsx b/components/input/index.jsx
index a91582540..aa8cbed02 100644
--- a/components/input/index.jsx
+++ b/components/input/index.jsx
@@ -11,6 +11,7 @@ class Input extends React.Component {
     floating: React.PropTypes.bool,
     icon: React.PropTypes.string,
     label: React.PropTypes.string,
+    maxLength: React.PropTypes.number,
     multiline: React.PropTypes.bool,
     onBlur: React.PropTypes.func,
     onChange: React.PropTypes.func,
@@ -40,6 +41,16 @@ class Input extends React.Component {
     }
   }
 
+  renderUnderline () {
+    const error = this.props.error ? <span className={style.error}>{this.props.error}</span> : null;
+    let counter = null;
+    if (this.props.maxLength) {
+      const length = this.props.value ? this.props.value.length : 0;
+      if (length > 0) counter = <span className={style.counter}>{length} / {this.props.maxLength}</span>;
+    }
+    if (error || counter) return <span className={style.underline}>{error}{counter}</span>;
+  }
+
   render () {
     let className = style.root;
     let labelClassName = style.label;
@@ -56,7 +67,7 @@ class Input extends React.Component {
         { this.props.icon ? <FontIcon className={style.icon} value={this.props.icon} /> : null }
         <span className={style.bar}></span>
         { this.props.label ? <label className={labelClassName}>{this.props.label}</label> : null }
-        { this.props.error ? <span className={style.error}>{this.props.error}</span> : null }
+        { this.renderUnderline() }
         { this.props.tooltip ? <Tooltip label={this.props.tooltip}/> : null }
       </div>
     );
diff --git a/components/input/readme.md b/components/input/readme.md
index cc06f3cd0..11afe733f 100644
--- a/components/input/readme.md
+++ b/components/input/readme.md
@@ -38,6 +38,7 @@ class InputTest extends React.Component {
 | `icon`         | `String`        |                 | Name of an icon to use as a label for the input.|
 | `floating`     | `Boolean`       | `true`         | Indicates if the label is floating in the input field or not.|
 | `label`         | `String`        |             | The text string to use for the floating label element.|
+| `maxLength`     | `number`       |             |Specifies the maximum number of characters allowed in the component.|
 | `multiline`     | `Boolean`       | `false`        | If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.|
 | `onBlur`        | `Function`      |                 | Callback function that is fired when components is blured.|
 | `onChange`      | `Function`      |                 | Callback function that is fired when the components's value changes.|
diff --git a/components/input/style.scss b/components/input/style.scss
index d28291267..9c58a70ac 100644
--- a/components/input/style.scss
+++ b/components/input/style.scss
@@ -44,7 +44,7 @@
       color: $input-text-highlight-color;
     }
   }
-  &:focus, &.filled, &[type='date'], &[type='time']{
+  &:focus, &.filled, &[type='date'], &[type='time'] {
     ~ .label:not(.fixed) {
       top: $input-focus-label-top;
       font-size: $input-label-font-size;
@@ -90,11 +90,23 @@
   }
 }
 
-.error {
-  display: block;
+.underline {
+  display: flex;
+  margin-bottom: - $input-underline-height;
   font-size: $input-label-font-size;
-  line-height: $input-error-height;
-  color: $input-text-error-color;
+  line-height: $input-underline-height;
+  color: $input-text-label-color;
+  .error, .counter {
+    flex-grow: 1;
+  }
+}
+
+.error {
+  text-align: left;
+}
+
+.counter {
+  text-align: right;
 }
 
 .disabled > .input {
@@ -115,6 +127,9 @@
       }
     }
   }
+  > .underline {
+    color: $input-text-error-color;
+  }
 }
 
 .hidden {
diff --git a/spec/components/input.jsx b/spec/components/input.jsx
index ebda48e73..affe88088 100644
--- a/spec/components/input.jsx
+++ b/spec/components/input.jsx
@@ -3,7 +3,7 @@ import Input from '../../components/input';
 
 class InputTest extends React.Component {
   state = {
-    normal: '',
+    normal: 'hello world',
     fixedLabel: '',
     withIcon: ''
   };
@@ -19,7 +19,12 @@ class InputTest extends React.Component {
       <section>
         <h5>Inputs</h5>
         <p>lorem ipsum...</p>
-        <Input type='text' value={this.state.normal} label='Firstname' onChange={this.handleChange.bind(this, 'normal')} />
+        <Input
+          type='text'
+          value={this.state.normal}
+          label='Firstname' onChange={this.handleChange.bind(this, 'normal')}
+          maxLength={12}
+        />
         <Input type='email' value={this.state.fixedLabel} label='Label fixed' floating={false} onChange={this.handleChange.bind(this, 'fixedLabel')} />
         <Input type='text' value='Read only' readOnly label='Phone Number' />
         <Input type='text' label='Disabled field' disabled />

From 9dedee63e1ff03c25c767edc642175139e7c8608 Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Wed, 18 Nov 2015 15:23:08 +0700
Subject: [PATCH 0097/1024] Change example with new property 'maxLength'

---
 .../components/layout/main/modules/examples/input_example_1.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/app/components/layout/main/modules/examples/input_example_1.txt b/docs/app/components/layout/main/modules/examples/input_example_1.txt
index 7787fd23b..a30ff0a82 100644
--- a/docs/app/components/layout/main/modules/examples/input_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/input_example_1.txt
@@ -10,7 +10,7 @@ class InputTest extends React.Component {
   render () {
     return (
       <section>
-        <Input type='text' label='Name' name='name' value={this.state.name} onChange={this.handleChange.bind(this, 'name')} />
+        <Input type='text' label='Name' name='name' value={this.state.name} onChange={this.handleChange.bind(this, 'name')} maxLength={16 } />
         <Input type='text' label='Disabled field' disabled />
         <Input type='email' label='Email address' icon='email' />
         <Input type='tel' label='Phone' name='phone' icon='phone' value={this.state.withIcon} onChange={this.handleChange.bind(this, 'phone')} />

From 21d048525ac7ee274fb00fff956a7cdf2aa673f8 Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Wed, 18 Nov 2015 15:27:01 +0700
Subject: [PATCH 0098/1024] 0.12.8 release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 443d60606..c67009b74 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-toolbox",
-  "version": "0.12.7",
+  "version": "0.12.8",
   "homepage": "www.react-toolbox.com",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "author": "React Toolbox Team (http://github.com/react-toolbox)",

From 8aa5fa92b56bcba2d2a6dd1916b1524bd1cd5022 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 18 Nov 2015 09:46:25 +0100
Subject: [PATCH 0099/1024] Add scss-lint to dev dependencies

---
 package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c67009b74..157e321c4 100644
--- a/package.json
+++ b/package.json
@@ -57,8 +57,8 @@
     "babel-loader": "^5.3.2",
     "babel-plugin-react-transform": "^1.1.1",
     "core-js": "^1.2.6",
-    "cross-env": "^1.0.4",
     "cpx": "^1.2.1",
+    "cross-env": "^1.0.4",
     "css-loader": "^0.21.0",
     "eslint": "^1.7.3",
     "eslint-plugin-react": "^3.3.1",
@@ -86,6 +86,7 @@
     "redbox-react": "^1.1.1",
     "rimraf": "^2.4.3",
     "sass-loader": "^3.0.0",
+    "scss-lint": "0.0.0",
     "sinon": "git://github.com/sinonjs/sinon.git#b672042043517b9f84e14ed0fb8265126168778a",
     "style-loader": "^0.13.0",
     "toolbox-loader": "0.0.2",

From e0a4168c794f196cd6afad41a3e695b2c6c9c91a Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 18 Nov 2015 09:57:46 +0100
Subject: [PATCH 0100/1024] Fix examples for tab

---
 components/tabs/readme.md                     | 38 ++++++++++++++-----
 .../main/modules/examples/tabs_example_1.txt  | 34 ++++++++++++-----
 spec/components/tabs.jsx                      | 26 +++----------
 3 files changed, 59 insertions(+), 39 deletions(-)

diff --git a/components/tabs/readme.md b/components/tabs/readme.md
index 39ba55d49..d6ed7bd46 100644
--- a/components/tabs/readme.md
+++ b/components/tabs/readme.md
@@ -6,15 +6,35 @@
 ```jsx
 import {Tab, Tabs} from 'react-toolbox';
 
-const TabsExample = () => (
-  <Tabs>
-    <Tab label='Primary'><small>Primary content</small></Tab>
-    <Tab label='Secondary'><small>Secondary content</small></Tab>
-    <Tab label='Third' disabled><small>Disabled content</small></Tab>
-    <Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
-    <Tab label='Fifth'><small>Fifth content</small></Tab>
-  </Tabs>
-);
+class TabsTest extends React.Component {
+  state = {
+    index: 1
+  };
+
+  handleTabChange = (index) => {
+    this.setState({index});
+  };
+
+  handleActive = () => {
+    console.log('Special one activated');
+  };
+
+  render () {
+    return (
+      <section>
+        <h5>Tabs</h5>
+        <p>This tabs can be disabled or hidden</p>
+        <Tabs index={this.state.index} onChange={this.handleTabChange}>
+          <Tab label='Primary'><small>Primary content</small></Tab>
+          <Tab label='Secondary' onActive={this.handleActive}><small>Secondary content</small></Tab>
+          <Tab label='Third' disabled><small>Disabled content</small></Tab>
+          <Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
+          <Tab label='Fifth'><small>Fifth content</small></Tab>
+        </Tabs>
+      </section>
+    );
+  }
+}
 ```
 
 ## Tabs
diff --git a/docs/app/components/layout/main/modules/examples/tabs_example_1.txt b/docs/app/components/layout/main/modules/examples/tabs_example_1.txt
index 843739833..fa36ddbf9 100644
--- a/docs/app/components/layout/main/modules/examples/tabs_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/tabs_example_1.txt
@@ -1,11 +1,27 @@
-const TabsExample = () => (
-  <Tabs>
-    <Tab label='Primary'><small>Primary content</small></Tab>
-    <Tab label='Secondary'><small>Secondary content</small></Tab>
-    <Tab label='Third' disabled><small>Disabled content</small></Tab>
-    <Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
-    <Tab label='Fifth'><small>Fifth content</small></Tab>
-  </Tabs>
-);
+class TabsExample extends React.Component {
+  state = {
+    index: 1
+  };
+
+  handleTabChange = (index) => {
+    this.setState({index});
+  };
+
+  render () {
+    return (
+      <section>
+        <h5>Tabs</h5>
+        <p>This tabs can be disabled or hidden</p>
+        <Tabs index={this.state.index} onChange={this.handleTabChange}>
+          <Tab label='Primary'><small>Primary content</small></Tab>
+          <Tab label='Secondary'><small>Secondary content</small></Tab>
+          <Tab label='Third' disabled><small>Disabled content</small></Tab>
+          <Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
+          <Tab label='Fifth'><small>Fifth content</small></Tab>
+        </Tabs>
+      </section>
+    );
+  }
+}
 
 return <TabsExample />;
diff --git a/spec/components/tabs.jsx b/spec/components/tabs.jsx
index 393184090..73d037f26 100644
--- a/spec/components/tabs.jsx
+++ b/spec/components/tabs.jsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { Tabs, Tab } from '../../components/tabs';
 
 class TabsTest extends React.Component {
-
   state = {
     index: 1
   };
@@ -20,27 +19,12 @@ class TabsTest extends React.Component {
       <section>
         <h5>Tabs</h5>
         <p>This tabs can be disabled or hidden</p>
-
         <Tabs index={this.state.index} onChange={this.handleTabChange}>
-          <Tab label='Primary'>
-            <small>Primary content</small>
-          </Tab>
-
-          <Tab label='Secondary' onActive={this.handleActive}>
-            <small>Secondary content</small>
-          </Tab>
-
-          <Tab label='Third' disabled>
-            <small>Disabled content</small>
-          </Tab>
-
-          <Tab label='Fourth' hidden>
-            <small>Fourth content hidden</small>
-          </Tab>
-
-          <Tab label='Fifth'>
-            <small>Fifth content</small>
-          </Tab>
+          <Tab label='Primary'><small>Primary content</small></Tab>
+          <Tab label='Secondary' onActive={this.handleActive}><small>Secondary content</small></Tab>
+          <Tab label='Third' disabled><small>Disabled content</small></Tab>
+          <Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
+          <Tab label='Fifth'><small>Fifth content</small></Tab>
         </Tabs>
       </section>
     );

From f8ff16211a05e8029ca83074021fdf3511ae8943 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 18 Nov 2015 09:58:24 +0100
Subject: [PATCH 0101/1024] Remove scss lint from package until migrating to
 sass-lint

---
 package.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 157e321c4..38cae1e2b 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
   "main": "./lib",
   "scripts": {
     "start": "cross-env NODE_ENV=development UV_THREADPOOL_SIZE=100 node ./server",
-    "lint": "eslint ./ --ext .js,.jsx && scss-lint",
+    "lint": "eslint ./ --ext .js,.jsx",
     "babel": "babel ./components --out-dir ./lib",
     "sass": "cpx './components/**/*.scss' ./lib",
     "build": "cross-env NODE_ENV=production npm run babel && npm run sass",
@@ -86,7 +86,6 @@
     "redbox-react": "^1.1.1",
     "rimraf": "^2.4.3",
     "sass-loader": "^3.0.0",
-    "scss-lint": "0.0.0",
     "sinon": "git://github.com/sinonjs/sinon.git#b672042043517b9f84e14ed0fb8265126168778a",
     "style-loader": "^0.13.0",
     "toolbox-loader": "0.0.2",

From 6c75479328539c55a302c422d22ccfe2da3936a1 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 18 Nov 2015 09:59:56 +0100
Subject: [PATCH 0102/1024] Remove section titles from tabs in tabs example

---
 components/tabs/readme.md                      | 18 +++++++-----------
 .../main/modules/examples/tabs_example_1.txt   | 18 +++++++-----------
 2 files changed, 14 insertions(+), 22 deletions(-)

diff --git a/components/tabs/readme.md b/components/tabs/readme.md
index d6ed7bd46..a93baccb5 100644
--- a/components/tabs/readme.md
+++ b/components/tabs/readme.md
@@ -21,17 +21,13 @@ class TabsTest extends React.Component {
 
   render () {
     return (
-      <section>
-        <h5>Tabs</h5>
-        <p>This tabs can be disabled or hidden</p>
-        <Tabs index={this.state.index} onChange={this.handleTabChange}>
-          <Tab label='Primary'><small>Primary content</small></Tab>
-          <Tab label='Secondary' onActive={this.handleActive}><small>Secondary content</small></Tab>
-          <Tab label='Third' disabled><small>Disabled content</small></Tab>
-          <Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
-          <Tab label='Fifth'><small>Fifth content</small></Tab>
-        </Tabs>
-      </section>
+      <Tabs index={this.state.index} onChange={this.handleTabChange}>
+        <Tab label='Primary'><small>Primary content</small></Tab>
+        <Tab label='Secondary' onActive={this.handleActive}><small>Secondary content</small></Tab>
+        <Tab label='Third' disabled><small>Disabled content</small></Tab>
+        <Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
+        <Tab label='Fifth'><small>Fifth content</small></Tab>
+      </Tabs>
     );
   }
 }
diff --git a/docs/app/components/layout/main/modules/examples/tabs_example_1.txt b/docs/app/components/layout/main/modules/examples/tabs_example_1.txt
index fa36ddbf9..617d2c667 100644
--- a/docs/app/components/layout/main/modules/examples/tabs_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/tabs_example_1.txt
@@ -9,17 +9,13 @@ class TabsExample extends React.Component {
 
   render () {
     return (
-      <section>
-        <h5>Tabs</h5>
-        <p>This tabs can be disabled or hidden</p>
-        <Tabs index={this.state.index} onChange={this.handleTabChange}>
-          <Tab label='Primary'><small>Primary content</small></Tab>
-          <Tab label='Secondary'><small>Secondary content</small></Tab>
-          <Tab label='Third' disabled><small>Disabled content</small></Tab>
-          <Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
-          <Tab label='Fifth'><small>Fifth content</small></Tab>
-        </Tabs>
-      </section>
+      <Tabs index={this.state.index} onChange={this.handleTabChange}>
+        <Tab label='Primary'><small>Primary content</small></Tab>
+        <Tab label='Secondary'><small>Secondary content</small></Tab>
+        <Tab label='Third' disabled><small>Disabled content</small></Tab>
+        <Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
+        <Tab label='Fifth'><small>Fifth content</small></Tab>
+      </Tabs>
     );
   }
 }

From 0cc5a6fd0ae462b4fe33c93c3082e6e81b780d31 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 18 Nov 2015 10:05:33 +0100
Subject: [PATCH 0103/1024] Remove code autoload in playground

---
 docs/app/components/layout/main/index.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/app/components/layout/main/index.jsx b/docs/app/components/layout/main/index.jsx
index 7191a5d6f..cb9fe5c5c 100644
--- a/docs/app/components/layout/main/index.jsx
+++ b/docs/app/components/layout/main/index.jsx
@@ -49,7 +49,6 @@ class Main extends React.Component {
     const examples = document.getElementsByClassName(this.LOAD_EXAMPLE_CLASS);
     Array.prototype.forEach.call(examples, (exampleNode, idx) => {
       const exampleCode = components[this.props.params.component].examples[idx];
-      this.refs.playground.loadCode(exampleCode);
       ReactDOM.render(
         <LoadExampleButton onClick={this.handlePlaygroundLoad.bind(this, exampleCode)} />,
         exampleNode

From 5b7ca281010344c2a2ef340db0ac26e6293af655 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 18 Nov 2015 10:05:59 +0100
Subject: [PATCH 0104/1024] Pass scss lint

---
 docs/app/components/layout/main/style.scss | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/docs/app/components/layout/main/style.scss b/docs/app/components/layout/main/style.scss
index f477d2ba2..2ddd5107a 100644
--- a/docs/app/components/layout/main/style.scss
+++ b/docs/app/components/layout/main/style.scss
@@ -70,9 +70,7 @@
   }
 }
 
-/*
-  don't hide navigation when playground is open if screen width > 1200px
-*/
+// don't hide navigation when playground is open if screen width > 1200px
 @media screen and (min-width: 1200px) {
   .root {
     &:not(.with-playground) {

From 23fd0f3c41273b0f228696e9405436e920dc9580 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 18 Nov 2015 10:08:01 +0100
Subject: [PATCH 0105/1024] 0.12.9 release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 38cae1e2b..e726e222b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-toolbox",
-  "version": "0.12.8",
+  "version": "0.12.9",
   "homepage": "www.react-toolbox.com",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "author": "React Toolbox Team (http://github.com/react-toolbox)",

From 9f6a41554286bd122712dbdef0813f613c577b5c Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 18 Nov 2015 10:48:02 +0100
Subject: [PATCH 0106/1024] Disable responsive in docs for now

---
 docs/app/components/layout/main/style.scss | 30 ----------------------
 1 file changed, 30 deletions(-)

diff --git a/docs/app/components/layout/main/style.scss b/docs/app/components/layout/main/style.scss
index 2ddd5107a..42c11ffd8 100644
--- a/docs/app/components/layout/main/style.scss
+++ b/docs/app/components/layout/main/style.scss
@@ -70,36 +70,6 @@
   }
 }
 
-// don't hide navigation when playground is open if screen width > 1200px
-@media screen and (min-width: 1200px) {
-  .root {
-    &:not(.with-playground) {
-      > .playground {
-        right: - ($playground-width * 1.1);
-      }
-      > .documentation {
-        padding-right: 0;
-        padding-left: $navigation-width;
-      }
-      > .navigation {
-        transform: translateX(0);
-      }
-    }
-    &.with-playground {
-      > .playground {
-        right: 0;
-      }
-      > .documentation {
-        padding-right: $playground-width;
-        padding-left: $navigation-width;
-      }
-      > .navigation {
-        transform: translateX(0);
-      }
-    }
-  }
-}
-
 .load-button {
   display: inline-block;
 }

From a24cad012db98c3dd93f287b2899124422031b14 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 18 Nov 2015 11:59:00 +0100
Subject: [PATCH 0107/1024] Change actions for authors cards in landing

---
 docs/app/components/layout/home/index.jsx     | 29 ----------
 .../components/layout/home/modules/authors.js | 24 --------
 .../layout/home/modules/authors.jsx           | 56 +++++++++++++++++++
 3 files changed, 56 insertions(+), 53 deletions(-)
 delete mode 100644 docs/app/components/layout/home/modules/authors.js
 create mode 100644 docs/app/components/layout/home/modules/authors.jsx

diff --git a/docs/app/components/layout/home/index.jsx b/docs/app/components/layout/home/index.jsx
index 1167bc34e..8720d631b 100644
--- a/docs/app/components/layout/home/index.jsx
+++ b/docs/app/components/layout/home/index.jsx
@@ -6,18 +6,6 @@ import Navigation from '../../navigation';
 import style from './style';
 import authors from './modules/authors';
 
-const GithubIcon = () => (
-  <svg viewBox="0 0 284 277">
-    <g><path d="M141.888675,0.0234927555 C63.5359948,0.0234927555 0,63.5477395 0,141.912168 C0,204.6023 40.6554239,257.788232 97.0321356,276.549924 C104.12328,277.86336 106.726656,273.471926 106.726656,269.724287 C106.726656,266.340838 106.595077,255.16371 106.533987,243.307542 C67.0604204,251.890693 58.7310279,226.56652 58.7310279,226.56652 C52.2766299,210.166193 42.9768456,205.805304 42.9768456,205.805304 C30.1032937,196.998939 43.9472374,197.17986 43.9472374,197.17986 C58.1953153,198.180797 65.6976425,211.801527 65.6976425,211.801527 C78.35268,233.493192 98.8906827,227.222064 106.987463,223.596605 C108.260955,214.426049 111.938106,208.166669 115.995895,204.623447 C84.4804813,201.035582 51.3508808,188.869264 51.3508808,134.501475 C51.3508808,119.01045 56.8936274,106.353063 65.9701981,96.4165325 C64.4969882,92.842765 59.6403297,78.411417 67.3447241,58.8673023 C67.3447241,58.8673023 79.2596322,55.0538738 106.374213,73.4114319 C117.692318,70.2676443 129.83044,68.6910512 141.888675,68.63701 C153.94691,68.6910512 166.09443,70.2676443 177.433682,73.4114319 C204.515368,55.0538738 216.413829,58.8673023 216.413829,58.8673023 C224.13702,78.411417 219.278012,92.842765 217.804802,96.4165325 C226.902519,106.353063 232.407672,119.01045 232.407672,134.501475 C232.407672,188.998493 199.214632,200.997988 167.619331,204.510665 C172.708602,208.913848 177.243363,217.54869 177.243363,230.786433 C177.243363,249.771339 177.078889,265.050898 177.078889,269.724287 C177.078889,273.500121 179.632923,277.92445 186.825101,276.531127 C243.171268,257.748288 283.775,204.581154 283.775,141.912168 C283.775,63.5477395 220.248404,0.0234927555 141.888675,0.0234927555" /></g>
-  </svg>
-);
-
-const TwitterIcon = () => (
-  <svg viewBox="0 0 274 223">
-    <g><path d="M273.39,26.301 C263.331,30.762 252.521,33.777 241.175,35.133 C252.756,28.191 261.649,17.199 265.837,4.102 C255,10.529 242.996,15.197 230.22,17.713 C219.988,6.812 205.411,0 189.279,0 C158.302,0 133.188,25.113 133.188,56.088 C133.188,60.484 133.685,64.765 134.641,68.87 C88.025,66.531 46.696,44.201 19.032,10.267 C14.204,18.551 11.438,28.186 11.438,38.465 C11.438,57.924 21.341,75.092 36.391,85.15 C27.196,84.859 18.548,82.336 10.985,78.135 C10.981,78.369 10.981,78.604 10.981,78.84 C10.981,106.016 30.315,128.686 55.974,133.838 C51.267,135.12 46.312,135.805 41.196,135.805 C37.582,135.805 34.068,135.454 30.644,134.799 C37.781,157.083 58.495,173.299 83.039,173.752 C63.843,188.795 39.658,197.762 13.38,197.762 C8.853,197.762 4.388,197.497 0,196.979 C24.822,212.893 54.305,222.178 85.98,222.178 C189.148,222.178 245.564,136.711 245.564,62.592 C245.564,60.16 245.51,57.741 245.402,55.336 C256.36,47.428 265.87,37.549 273.39,26.301" /></g>
-  </svg>
-);
-
 const Home = () => (
   <article>
     <header className={style.header}>
@@ -59,23 +47,6 @@ const Home = () => (
       <ul className={style.authors}>
       {
         authors.map((author, index) => {
-          author.actions.map((action) => {
-            if (action.id === 'github') {
-              action.style = {color: '#000'};
-              action.children = [
-                <GithubIcon key={`gicon-${author.subtitle}`} />,
-                <span key={`glabel-${author.subtitle}`}>Github</span>
-              ];
-              action.id = null;
-            } else {
-              action.style = {color: '#55acee'};
-              action.children = [
-                <TwitterIcon key={`ticon-${author.subtitle}`} />,
-                <span key={`tlabel-${author.subtitle}`}>Twitter</span>
-              ];
-              action.id = null;
-            }
-          });
           return <Card key={index} {...author} />;
         })
       }
diff --git a/docs/app/components/layout/home/modules/authors.js b/docs/app/components/layout/home/modules/authors.js
deleted file mode 100644
index fb8379738..000000000
--- a/docs/app/components/layout/home/modules/authors.js
+++ /dev/null
@@ -1,24 +0,0 @@
-export default [
-  {
-    title: 'Javi Velasco',
-    subtitle: 'javivelasco',
-    actions: [
-      { id: 'github', href: 'http://github.com/javivelasco', target: '_blank' },
-      { id: 'twitter', href: 'http://twitter.com/javivelasco', target: '_blank' }
-    ],
-    image: '/images/javivelasco.jpg',
-    text: 'Software gardener • Film, music & comic lover • Frontend Engineer at SocialBro  • Any biographer in the room?',
-    color: '#3f51b5'
-  },
-  {
-    title: 'Javi Jimenez',
-    subtitle: 'soyjavi',
-    actions: [
-      { id: 'github', href: 'http://github.com/soyjavi', target: '_blank' },
-      { id: 'twitter', href: 'http://twitter.com/soyjavi', target: '_blank' }
-    ],
-    image: '/images/soyjavi.jpg',
-    text: 'Creative Doer · A complicated #human who builds stuff · #author · #opensource lover · #traveller · with a dark past being CEO & CTO',
-    color: '#3f51b5'
-  }
-];
diff --git a/docs/app/components/layout/home/modules/authors.jsx b/docs/app/components/layout/home/modules/authors.jsx
new file mode 100644
index 000000000..a56322eef
--- /dev/null
+++ b/docs/app/components/layout/home/modules/authors.jsx
@@ -0,0 +1,56 @@
+import React from 'react';
+
+const GithubIcon = () => (
+  <svg viewBox="0 0 284 277">
+    <g><path d="M141.888675,0.0234927555 C63.5359948,0.0234927555 0,63.5477395 0,141.912168 C0,204.6023 40.6554239,257.788232 97.0321356,276.549924 C104.12328,277.86336 106.726656,273.471926 106.726656,269.724287 C106.726656,266.340838 106.595077,255.16371 106.533987,243.307542 C67.0604204,251.890693 58.7310279,226.56652 58.7310279,226.56652 C52.2766299,210.166193 42.9768456,205.805304 42.9768456,205.805304 C30.1032937,196.998939 43.9472374,197.17986 43.9472374,197.17986 C58.1953153,198.180797 65.6976425,211.801527 65.6976425,211.801527 C78.35268,233.493192 98.8906827,227.222064 106.987463,223.596605 C108.260955,214.426049 111.938106,208.166669 115.995895,204.623447 C84.4804813,201.035582 51.3508808,188.869264 51.3508808,134.501475 C51.3508808,119.01045 56.8936274,106.353063 65.9701981,96.4165325 C64.4969882,92.842765 59.6403297,78.411417 67.3447241,58.8673023 C67.3447241,58.8673023 79.2596322,55.0538738 106.374213,73.4114319 C117.692318,70.2676443 129.83044,68.6910512 141.888675,68.63701 C153.94691,68.6910512 166.09443,70.2676443 177.433682,73.4114319 C204.515368,55.0538738 216.413829,58.8673023 216.413829,58.8673023 C224.13702,78.411417 219.278012,92.842765 217.804802,96.4165325 C226.902519,106.353063 232.407672,119.01045 232.407672,134.501475 C232.407672,188.998493 199.214632,200.997988 167.619331,204.510665 C172.708602,208.913848 177.243363,217.54869 177.243363,230.786433 C177.243363,249.771339 177.078889,265.050898 177.078889,269.724287 C177.078889,273.500121 179.632923,277.92445 186.825101,276.531127 C243.171268,257.748288 283.775,204.581154 283.775,141.912168 C283.775,63.5477395 220.248404,0.0234927555 141.888675,0.0234927555" /></g>
+  </svg>
+);
+
+const TwitterIcon = () => (
+  <svg viewBox="0 0 274 223">
+    <g><path d="M273.39,26.301 C263.331,30.762 252.521,33.777 241.175,35.133 C252.756,28.191 261.649,17.199 265.837,4.102 C255,10.529 242.996,15.197 230.22,17.713 C219.988,6.812 205.411,0 189.279,0 C158.302,0 133.188,25.113 133.188,56.088 C133.188,60.484 133.685,64.765 134.641,68.87 C88.025,66.531 46.696,44.201 19.032,10.267 C14.204,18.551 11.438,28.186 11.438,38.465 C11.438,57.924 21.341,75.092 36.391,85.15 C27.196,84.859 18.548,82.336 10.985,78.135 C10.981,78.369 10.981,78.604 10.981,78.84 C10.981,106.016 30.315,128.686 55.974,133.838 C51.267,135.12 46.312,135.805 41.196,135.805 C37.582,135.805 34.068,135.454 30.644,134.799 C37.781,157.083 58.495,173.299 83.039,173.752 C63.843,188.795 39.658,197.762 13.38,197.762 C8.853,197.762 4.388,197.497 0,196.979 C24.822,212.893 54.305,222.178 85.98,222.178 C189.148,222.178 245.564,136.711 245.564,62.592 C245.564,60.16 245.51,57.741 245.402,55.336 C256.36,47.428 265.87,37.549 273.39,26.301" /></g>
+  </svg>
+);
+
+export default [
+  {
+    title: 'Javi Velasco',
+    subtitle: 'javivelasco',
+    actions: [
+      {
+        href: 'http://github.com/javivelasco',
+        children: [<GithubIcon key='gicon-javivelasco' />, <span key='glabel-javivelasco'>Github</span>],
+        target: '_blank'
+      },
+      {
+        href: 'http://twitter.com/javivelasco',
+        children: [<TwitterIcon key='ticon-javivelasco' />, <span key='tlabel-javivelasco'>Twitter</span>],
+        style: {color: '#55acee'},
+        target: '_blank'
+      }
+    ],
+    image: '/images/javivelasco.jpg',
+    text: 'Software gardener • Film, music & comic lover • Frontend Engineer at SocialBro  • Any biographer in the room?',
+    color: '#3f51b5'
+  },
+  {
+    title: 'Javi Jimenez',
+    subtitle: 'soyjavi',
+    actions: [
+      {
+        href: 'http://github.com/soyjavi',
+        children: [<GithubIcon key='gicon-soyjavi' />, <span key='glabel-soyjavi'>Github</span>],
+        target: '_blank'
+      },
+      {
+        href: 'http://twitter.com/soyjavi',
+        children: [<TwitterIcon key='ticon-soyjavi' />, <span key='tlabel-soyjavi'>Twitter</span>],
+        style: {color: '#55acee'},
+        target: '_blank'
+      }
+    ],
+    image: '/images/soyjavi.jpg',
+    text: 'Creative Doer · A complicated #human who builds stuff · #author · #opensource lover · #traveller · with a dark past being CEO & CTO',
+    color: '#3f51b5'
+  }
+];

From b8941e172d6a51455711292b4e2a297f599570a5 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 18 Nov 2015 22:33:22 +0100
Subject: [PATCH 0108/1024] Restyle layout to use transforms in main docs

---
 docs/app/components/layout/main/style.scss | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/docs/app/components/layout/main/style.scss b/docs/app/components/layout/main/style.scss
index 42c11ffd8..74e82f3a9 100644
--- a/docs/app/components/layout/main/style.scss
+++ b/docs/app/components/layout/main/style.scss
@@ -19,7 +19,8 @@
   right: 0;
   bottom: 0;
   left: 0;
-  transition: all $animation-duration $animation-curve-default;
+  z-index: $z-index-normal;
+  transition: padding $animation-duration $animation-curve-default;
 }
 
 .navigation {
@@ -29,24 +30,25 @@
   left: 0;
   z-index: $z-index-high;
   box-shadow: $documentation-left-shadow;
-  transition: all $animation-duration $animation-curve-default;
+  transition: transform $animation-duration $animation-curve-default;
 }
 
 .playground {
   position: fixed;
   top: $appbar-height;
+  right: 0;
   bottom: 0;
   z-index: $z-index-high;
   width: $playground-width;
   background: $color-background;
   box-shadow: $documentation-right-shadow;
-  transition: right $animation-duration $animation-curve-default;
+  transition: transform $animation-duration $animation-curve-default;
 }
 
 .root {
   &:not(.with-playground) {
     > .playground {
-      right: - ($playground-width * 1.1);
+      transform: translateX(100%);
     }
     > .documentation {
       padding-right: 0;
@@ -58,7 +60,7 @@
   }
   &.with-playground {
     > .playground {
-      right: 0;
+      transform: translateY(0);
     }
     > .documentation {
       padding-right: $playground-width;

From 64baf5db63f817a4cf4d8e91d5e76067c470d314 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 18 Nov 2015 22:43:20 +0100
Subject: [PATCH 0109/1024] Change scale3d property to scale in radio button

---
 components/radio/style.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/radio/style.scss b/components/radio/style.scss
index c6c25976c..fcd206e19 100644
--- a/components/radio/style.scss
+++ b/components/radio/style.scss
@@ -60,7 +60,7 @@
     background-color: $radio-inner-color;
     border-radius: 50%;
     transition-property: transform;
-    transform: scale3d(0, 0, 0);
+    transform: scale(0);
   }
 }
 
@@ -68,7 +68,7 @@
   @extend .radio;
   border: .2 * $unit solid $radio-inner-color;
   &:before {
-    transform: scale3d(1, 1, 1);
+    transform: scale(1);
   }
 }
 

From b12bf6e7e0e80b033b47e52e19eafc07fc6cc26e Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 18 Nov 2015 22:53:30 +0100
Subject: [PATCH 0110/1024] Add hack to allow overflow hidden with border radio
 in old webkit

---
 components/_mixins.scss      | 5 +++++
 components/button/style.scss | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/components/_mixins.scss b/components/_mixins.scss
index c4bc7ee63..da0db388d 100644
--- a/components/_mixins.scss
+++ b/components/_mixins.scss
@@ -252,6 +252,11 @@
   transition-duration: $duration;
 }
 
+@mixin rounded-overflow() {
+  overflow: hidden;
+  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
+}
+
 // The frames are this way to prevent a flicker in Safari
 // See https://goo.gl/5luFDk
 @mixin ripple-loading($name, $width, $height, $opacity: 0.3) {
diff --git a/components/button/style.scss b/components/button/style.scss
index a8cb43344..d9fc253b2 100644
--- a/components/button/style.scss
+++ b/components/button/style.scss
@@ -41,7 +41,7 @@
     pointer-events: none;
   }
   [data-react-toolbox="ripple"] {
-    overflow: hidden;
+    @include rounded-overflow();
   }
 }
 

From 9905403b97e6ce5d82ef7eea04ca3a078769cf83 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 19 Nov 2015 00:49:39 +0100
Subject: [PATCH 0111/1024] Do not include commons in app wrapper

---
 components/_globals.scss          |   1 -
 components/app/style.scss         |   2 -
 components/commons.scss           | 161 ++++++++++++++++--------------
 docs/app/components/_globals.scss |   1 +
 spec/style.scss                   |   4 +
 5 files changed, 91 insertions(+), 78 deletions(-)

diff --git a/components/_globals.scss b/components/_globals.scss
index c98eda641..3b4147d2c 100644
--- a/components/_globals.scss
+++ b/components/_globals.scss
@@ -17,7 +17,6 @@ $color-accent-contrast: $color-dark-contrast !default;
 $unit: 1rem;
 
 // -- Fonts
-$font-roboto-url: "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" !default;
 $font-icon-url: "https://fonts.googleapis.com/icon?family=Material+Icons" !default;
 $preferred-font: "Roboto", "Helvetica", "Arial", sans-serif !default;
 $font-size: 1.6 * $unit !default;
diff --git a/components/app/style.scss b/components/app/style.scss
index 55c9f8cfb..1de449412 100644
--- a/components/app/style.scss
+++ b/components/app/style.scss
@@ -1,5 +1,3 @@
-@import "http://github.com/commons";
-
 .root {
   position: absolute;
   top: 0;
diff --git a/components/commons.scss b/components/commons.scss
index e71c736ae..afef0c754 100644
--- a/components/commons.scss
+++ b/components/commons.scss
@@ -1,6 +1,15 @@
-@import "http://github.com/~normalize.css";
-@import "http://github.com/base";
-@import url(http://github.com/$font-roboto-url);
+$import-normalize: true !default;
+$import-font: true !default;
+$import-flex-attributes: false !default;
+$font-roboto-url: "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" !default;
+
+@if $import-normalize == true {
+  @import "http://github.com/~normalize.css";
+}
+
+@if $import-font == true {
+  @import url(http://github.com/$font-roboto-url);
+}
 
 html {
   font-size: 62.5%;
@@ -93,97 +102,99 @@ p {
   @include typo-body-1;
 }
 
-//-- Flex
-[data-flex] {
-  display: flex;
-}
+@if $import-flex-attributes == true {
+  //-- Flex
+  [data-flex] {
+    display: flex;
+  }
 
-body[data-flex] {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  overflow: hidden;
-}
+  body[data-flex] {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    overflow: hidden;
+  }
 
-// -- Direction
-[data-flex^="horizontal"] {
-  flex-direction: row;
-}
+  // -- Direction
+  [data-flex^="horizontal"] {
+    flex-direction: row;
+  }
 
-[data-flex^="vertical"] {
-  flex-direction: column;
-}
+  [data-flex^="vertical"] {
+    flex-direction: column;
+  }
 
 
-// -- Size {
-[data-flex*="grow"] {
-  > *:not([data-column]):not([data-flex-grow]) {
-    flex-grow: 1;
+  // -- Size {
+  [data-flex*="grow"] {
+    > *:not([data-column]):not([data-flex-grow]) {
+      flex-grow: 1;
+    }
   }
-}
 
-[data-flex-grow="min"] {
-  flex-grow: 0;
-}
+  [data-flex-grow="min"] {
+    flex-grow: 0;
+  }
 
-[data-flex-grow="max"] {
-  flex-grow: 2;
-}
+  [data-flex-grow="max"] {
+    flex-grow: 2;
+  }
 
-// -- Container properties
-[data-flex*="wrap"] {
-  flex-wrap: wrap;
-}
+  // -- Container properties
+  [data-flex*="wrap"] {
+    flex-wrap: wrap;
+  }
 
-[data-flex*="center"] {
-  align-content: center;
-  align-items: center;
-  justify-content: center;
-}
+  [data-flex*="center"] {
+    align-content: center;
+    align-items: center;
+    justify-content: center;
+  }
 
-[data-flex-justify="start"] {
-  justify-content: flex-start;
-}
+  [data-flex-justify="start"] {
+    justify-content: flex-start;
+  }
 
-[data-flex-justify="center"] {
-  justify-content: center;
-}
+  [data-flex-justify="center"] {
+    justify-content: center;
+  }
 
-[data-flex-justify="end"] {
-  justify-content: flex-end;
-}
+  [data-flex-justify="end"] {
+    justify-content: flex-end;
+  }
 
-[data-flex-content="start"] {
-  align-content: flex-start;
-}
+  [data-flex-content="start"] {
+    align-content: flex-start;
+  }
 
-[data-flex-content="center"] {
-  align-content: center;
-}
+  [data-flex-content="center"] {
+    align-content: center;
+  }
 
-[data-flex-content="end"] {
-  align-content: flex-end;
-}
+  [data-flex-content="end"] {
+    align-content: flex-end;
+  }
 
-[data-flex-items="center"] {
-  align-items: center;
-}
+  [data-flex-items="center"] {
+    align-items: center;
+  }
 
-[data-flex-items="start"] {
-  align-items: flex-start;
-}
+  [data-flex-items="start"] {
+    align-items: flex-start;
+  }
 
-[data-flex-items="end"] {
-  align-items: flex-end;
-}
+  [data-flex-items="end"] {
+    align-items: flex-end;
+  }
 
-// -- Children properties
-[data-flex-order="first"] {
-  order: -1;
-}
+  // -- Children properties
+  [data-flex-order="first"] {
+    order: -1;
+  }
 
-[data-flex-order="last"] {
-  order: 999999;
+  [data-flex-order="last"] {
+    order: 999999;
+  }
 }
diff --git a/docs/app/components/_globals.scss b/docs/app/components/_globals.scss
index 41bcea688..a89dee8ac 100644
--- a/docs/app/components/_globals.scss
+++ b/docs/app/components/_globals.scss
@@ -1,4 +1,5 @@
 @import "http://github.com/~react-toolbox/base";
+@import "http://github.com/~react-toolbox/commons";
 
 $unit: 1rem;
 $color-primary-dark: unquote("rgb(#{$color-primary-dark})");
diff --git a/spec/style.scss b/spec/style.scss
index 7dda066e5..32601471a 100644
--- a/spec/style.scss
+++ b/spec/style.scss
@@ -1,4 +1,8 @@
+$import-normalize: false;
+$import-flex-attributes: true;
+
 @import "http://github.com/components/base";
+@import "http://github.com/components/commons";
 @import "http://github.com/components/app_bar/config";
 @import "http://github.com/components/button/config";
 

From e1f60b7f43b621ea90e0f85aa8251ddf7e8f8ded Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 19 Nov 2015 00:54:02 +0100
Subject: [PATCH 0112/1024] 0.12.10 release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e726e222b..a33fecea9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-toolbox",
-  "version": "0.12.9",
+  "version": "0.12.10",
   "homepage": "www.react-toolbox.com",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "author": "React Toolbox Team (http://github.com/react-toolbox)",

From 1cf41fe8defd8d96d05dda09d2f5d064ca403132 Mon Sep 17 00:00:00 2001
From: Stan <bernardstanislas@gmail.com>
Date: Thu, 19 Nov 2015 11:02:10 +0100
Subject: [PATCH 0113/1024] [autocomplete] Fix #134

---
 components/autocomplete/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/autocomplete/index.jsx b/components/autocomplete/index.jsx
index e757d3279..e707fd6f9 100644
--- a/components/autocomplete/index.jsx
+++ b/components/autocomplete/index.jsx
@@ -59,7 +59,7 @@ class Autocomplete extends React.Component {
   };
 
   handleQueryChange = (event) => {
-    this.setState({event: event.target.value});
+    this.setState({query: event.target.value});
   };
 
   handleQueryFocus = () => {

From dd8a176af72c4755e2f03787bad0685fe9a290d2 Mon Sep 17 00:00:00 2001
From: Enzo Martin <enzo.r.martin@gmail.com>
Date: Wed, 18 Nov 2015 20:35:32 +0100
Subject: [PATCH 0114/1024] Define all colors as RGB - Remove the need to use
 `unquote` and makes all variables be actual color values that can be
 manipulated as expected with SASS

---
 components/_colors.scss | 860 ++++++++++++++--------------------------
 1 file changed, 294 insertions(+), 566 deletions(-)

diff --git a/components/_colors.scss b/components/_colors.scss
index 6888abe76..c2eb5099c 100644
--- a/components/_colors.scss
+++ b/components/_colors.scss
@@ -1,571 +1,299 @@
 //-- Color definitions taken from Material Design Lite
-$palette-red:
-"255,235,238"
-"255,205,210"
-"239,154,154"
-"229,115,115"
-"239,83,80"
-"244,67,54"
-"229,57,53"
-"211,47,47"
-"198,40,40"
-"183,28,28"
-"255,138,128"
-"255,82,82"
-"255,23,68"
-"213,0,0";
 
-$palette-red-50: nth($palette-red, 1);
-$palette-red-100: nth($palette-red, 2);
-$palette-red-200: nth($palette-red, 3);
-$palette-red-300: nth($palette-red, 4);
-$palette-red-400: nth($palette-red, 5);
-$palette-red-500: nth($palette-red, 6);
-$palette-red-600: nth($palette-red, 7);
-$palette-red-700: nth($palette-red, 8);
-$palette-red-800: nth($palette-red, 9);
-$palette-red-900: nth($palette-red, 10);
-$palette-red-a100: nth($palette-red, 11);
-$palette-red-a200: nth($palette-red, 12);
-$palette-red-a400: nth($palette-red, 13);
-$palette-red-a700: nth($palette-red, 14);
-
-$palette-pink:
-"252,228,236"
-"248,187,208"
-"244,143,177"
-"240,98,146"
-"236,64,122"
-"233,30,99"
-"216,27,96"
-"194,24,91"
-"173,20,87"
-"136,14,79"
-"255,128,171"
-"255,64,129"
-"245,0,87"
-"197,17,98";
-
-$palette-pink-50: nth($palette-pink, 1);
-$palette-pink-100: nth($palette-pink, 2);
-$palette-pink-200: nth($palette-pink, 3);
-$palette-pink-300: nth($palette-pink, 4);
-$palette-pink-400: nth($palette-pink, 5);
-$palette-pink-500: nth($palette-pink, 6);
-$palette-pink-600: nth($palette-pink, 7);
-$palette-pink-700: nth($palette-pink, 8);
-$palette-pink-800: nth($palette-pink, 9);
-$palette-pink-900: nth($palette-pink, 10);
-$palette-pink-a100: nth($palette-pink, 11);
-$palette-pink-a200: nth($palette-pink, 12);
-$palette-pink-a400: nth($palette-pink, 13);
-$palette-pink-a700: nth($palette-pink, 14);
-
-$palette-purple:
-"243,229,245"
-"225,190,231"
-"206,147,216"
-"186,104,200"
-"171,71,188"
-"156,39,176"
-"142,36,170"
-"123,31,162"
-"106,27,154"
-"74,20,140"
-"234,128,252"
-"224,64,251"
-"213,0,249"
-"170,0,255";
-
-$palette-purple-50: nth($palette-purple, 1);
-$palette-purple-100: nth($palette-purple, 2);
-$palette-purple-200: nth($palette-purple, 3);
-$palette-purple-300: nth($palette-purple, 4);
-$palette-purple-400: nth($palette-purple, 5);
-$palette-purple-500: nth($palette-purple, 6);
-$palette-purple-600: nth($palette-purple, 7);
-$palette-purple-700: nth($palette-purple, 8);
-$palette-purple-800: nth($palette-purple, 9);
-$palette-purple-900: nth($palette-purple, 10);
-$palette-purple-a100: nth($palette-purple, 11);
-$palette-purple-a200: nth($palette-purple, 12);
-$palette-purple-a400: nth($palette-purple, 13);
-$palette-purple-a700: nth($palette-purple, 14);
-
-$palette-deep-purple:
-"237,231,246"
-"209,196,233"
-"179,157,219"
-"149,117,205"
-"126,87,194"
-"103,58,183"
-"94,53,177"
-"81,45,168"
-"69,39,160"
-"49,27,146"
-"179,136,255"
-"124,77,255"
-"101,31,255"
-"98,0,234";
-
-$palette-deep-purple-50: nth($palette-deep-purple, 1);
-$palette-deep-purple-100: nth($palette-deep-purple, 2);
-$palette-deep-purple-200: nth($palette-deep-purple, 3);
-$palette-deep-purple-300: nth($palette-deep-purple, 4);
-$palette-deep-purple-400: nth($palette-deep-purple, 5);
-$palette-deep-purple-500: nth($palette-deep-purple, 6);
-$palette-deep-purple-600: nth($palette-deep-purple, 7);
-$palette-deep-purple-700: nth($palette-deep-purple, 8);
-$palette-deep-purple-800: nth($palette-deep-purple, 9);
-$palette-deep-purple-900: nth($palette-deep-purple, 10);
-$palette-deep-purple-a100: nth($palette-deep-purple, 11);
-$palette-deep-purple-a200: nth($palette-deep-purple, 12);
-$palette-deep-purple-a400: nth($palette-deep-purple, 13);
-$palette-deep-purple-a700: nth($palette-deep-purple, 14);
-
-$palette-indigo:
-"232,234,246"
-"197,202,233"
-"159,168,218"
-"121,134,203"
-"92,107,192"
-"63,81,181"
-"57,73,171"
-"48,63,159"
-"40,53,147"
-"26,35,126"
-"140,158,255"
-"83,109,254"
-"61,90,254"
-"48,79,254";
-
-$palette-indigo-50: nth($palette-indigo, 1);
-$palette-indigo-100: nth($palette-indigo, 2);
-$palette-indigo-200: nth($palette-indigo, 3);
-$palette-indigo-300: nth($palette-indigo, 4);
-$palette-indigo-400: nth($palette-indigo, 5);
-$palette-indigo-500: nth($palette-indigo, 6);
-$palette-indigo-600: nth($palette-indigo, 7);
-$palette-indigo-700: nth($palette-indigo, 8);
-$palette-indigo-800: nth($palette-indigo, 9);
-$palette-indigo-900: nth($palette-indigo, 10);
-$palette-indigo-a100: nth($palette-indigo, 11);
-$palette-indigo-a200: nth($palette-indigo, 12);
-$palette-indigo-a400: nth($palette-indigo, 13);
-$palette-indigo-a700: nth($palette-indigo, 14);
-
-$palette-blue:
-"227,242,253"
-"187,222,251"
-"144,202,249"
-"100,181,246"
-"66,165,245"
-"33,150,243"
-"30,136,229"
-"25,118,210"
-"21,101,192"
-"13,71,161"
-"130,177,255"
-"68,138,255"
-"41,121,255"
-"41,98,255";
-
-$palette-blue-50: nth($palette-blue, 1);
-$palette-blue-100: nth($palette-blue, 2);
-$palette-blue-200: nth($palette-blue, 3);
-$palette-blue-300: nth($palette-blue, 4);
-$palette-blue-400: nth($palette-blue, 5);
-$palette-blue-500: nth($palette-blue, 6);
-$palette-blue-600: nth($palette-blue, 7);
-$palette-blue-700: nth($palette-blue, 8);
-$palette-blue-800: nth($palette-blue, 9);
-$palette-blue-900: nth($palette-blue, 10);
-$palette-blue-a100: nth($palette-blue, 11);
-$palette-blue-a200: nth($palette-blue, 12);
-$palette-blue-a400: nth($palette-blue, 13);
-$palette-blue-a700: nth($palette-blue, 14);
-
-$palette-light-blue:
-"225,245,254"
-"179,229,252"
-"129,212,250"
-"79,195,247"
-"41,182,246"
-"3,169,244"
-"3,155,229"
-"2,136,209"
-"2,119,189"
-"1,87,155"
-"128,216,255"
-"64,196,255"
-"0,176,255"
-"0,145,234";
-
-$palette-light-blue-50: nth($palette-light-blue, 1);
-$palette-light-blue-100: nth($palette-light-blue, 2);
-$palette-light-blue-200: nth($palette-light-blue, 3);
-$palette-light-blue-300: nth($palette-light-blue, 4);
-$palette-light-blue-400: nth($palette-light-blue, 5);
-$palette-light-blue-500: nth($palette-light-blue, 6);
-$palette-light-blue-600: nth($palette-light-blue, 7);
-$palette-light-blue-700: nth($palette-light-blue, 8);
-$palette-light-blue-800: nth($palette-light-blue, 9);
-$palette-light-blue-900: nth($palette-light-blue, 10);
-$palette-light-blue-a100: nth($palette-light-blue, 11);
-$palette-light-blue-a200: nth($palette-light-blue, 12);
-$palette-light-blue-a400: nth($palette-light-blue, 13);
-$palette-light-blue-a700: nth($palette-light-blue, 14);
-
-$palette-cyan:
-"224,247,250"
-"178,235,242"
-"128,222,234"
-"77,208,225"
-"38,198,218"
-"0,188,212"
-"0,172,193"
-"0,151,167"
-"0,131,143"
-"0,96,100"
-"132,255,255"
-"24,255,255"
-"0,229,255"
-"0,184,212";
-
-$palette-cyan-50: nth($palette-cyan, 1);
-$palette-cyan-100: nth($palette-cyan, 2);
-$palette-cyan-200: nth($palette-cyan, 3);
-$palette-cyan-300: nth($palette-cyan, 4);
-$palette-cyan-400: nth($palette-cyan, 5);
-$palette-cyan-500: nth($palette-cyan, 6);
-$palette-cyan-600: nth($palette-cyan, 7);
-$palette-cyan-700: nth($palette-cyan, 8);
-$palette-cyan-800: nth($palette-cyan, 9);
-$palette-cyan-900: nth($palette-cyan, 10);
-$palette-cyan-a100: nth($palette-cyan, 11);
-$palette-cyan-a200: nth($palette-cyan, 12);
-$palette-cyan-a400: nth($palette-cyan, 13);
-$palette-cyan-a700: nth($palette-cyan, 14);
-
-$palette-teal:
-"224,242,241"
-"178,223,219"
-"128,203,196"
-"77,182,172"
-"38,166,154"
-"0,150,136"
-"0,137,123"
-"0,121,107"
-"0,105,92"
-"0,77,64"
-"167,255,235"
-"100,255,218"
-"29,233,182"
-"0,191,165";
-
-$palette-teal-50: nth($palette-teal, 1);
-$palette-teal-100: nth($palette-teal, 2);
-$palette-teal-200: nth($palette-teal, 3);
-$palette-teal-300: nth($palette-teal, 4);
-$palette-teal-400: nth($palette-teal, 5);
-$palette-teal-500: nth($palette-teal, 6);
-$palette-teal-600: nth($palette-teal, 7);
-$palette-teal-700: nth($palette-teal, 8);
-$palette-teal-800: nth($palette-teal, 9);
-$palette-teal-900: nth($palette-teal, 10);
-$palette-teal-a100: nth($palette-teal, 11);
-$palette-teal-a200: nth($palette-teal, 12);
-$palette-teal-a400: nth($palette-teal, 13);
-$palette-teal-a700: nth($palette-teal, 14);
-
-$palette-green:
-"232,245,233"
-"200,230,201"
-"165,214,167"
-"129,199,132"
-"102,187,106"
-"76,175,80"
-"67,160,71"
-"56,142,60"
-"46,125,50"
-"27,94,32"
-"185,246,202"
-"105,240,174"
-"0,230,118"
-"0,200,83";
-
-$palette-green-50: nth($palette-green, 1);
-$palette-green-100: nth($palette-green, 2);
-$palette-green-200: nth($palette-green, 3);
-$palette-green-300: nth($palette-green, 4);
-$palette-green-400: nth($palette-green, 5);
-$palette-green-500: nth($palette-green, 6);
-$palette-green-600: nth($palette-green, 7);
-$palette-green-700: nth($palette-green, 8);
-$palette-green-800: nth($palette-green, 9);
-$palette-green-900: nth($palette-green, 10);
-$palette-green-a100: nth($palette-green, 11);
-$palette-green-a200: nth($palette-green, 12);
-$palette-green-a400: nth($palette-green, 13);
-$palette-green-a700: nth($palette-green, 14);
-
-$palette-light-green:
-"241,248,233"
-"220,237,200"
-"197,225,165"
-"174,213,129"
-"156,204,101"
-"139,195,74"
-"124,179,66"
-"104,159,56"
-"85,139,47"
-"51,105,30"
-"204,255,144"
-"178,255,89"
-"118,255,3"
-"100,221,23";
-
-$palette-light-green-50: nth($palette-light-green, 1);
-$palette-light-green-100: nth($palette-light-green, 2);
-$palette-light-green-200: nth($palette-light-green, 3);
-$palette-light-green-300: nth($palette-light-green, 4);
-$palette-light-green-400: nth($palette-light-green, 5);
-$palette-light-green-500: nth($palette-light-green, 6);
-$palette-light-green-600: nth($palette-light-green, 7);
-$palette-light-green-700: nth($palette-light-green, 8);
-$palette-light-green-800: nth($palette-light-green, 9);
-$palette-light-green-900: nth($palette-light-green, 10);
-$palette-light-green-a100: nth($palette-light-green, 11);
-$palette-light-green-a200: nth($palette-light-green, 12);
-$palette-light-green-a400: nth($palette-light-green, 13);
-$palette-light-green-a700: nth($palette-light-green, 14);
-
-$palette-lime:
-"249,251,231"
-"240,244,195"
-"230,238,156"
-"220,231,117"
-"212,225,87"
-"205,220,57"
-"192,202,51"
-"175,180,43"
-"158,157,36"
-"130,119,23"
-"244,255,129"
-"238,255,65"
-"198,255,0"
-"174,234,0";
-
-$palette-lime-50: nth($palette-lime, 1);
-$palette-lime-100: nth($palette-lime, 2);
-$palette-lime-200: nth($palette-lime, 3);
-$palette-lime-300: nth($palette-lime, 4);
-$palette-lime-400: nth($palette-lime, 5);
-$palette-lime-500: nth($palette-lime, 6);
-$palette-lime-600: nth($palette-lime, 7);
-$palette-lime-700: nth($palette-lime, 8);
-$palette-lime-800: nth($palette-lime, 9);
-$palette-lime-900: nth($palette-lime, 10);
-$palette-lime-a100: nth($palette-lime, 11);
-$palette-lime-a200: nth($palette-lime, 12);
-$palette-lime-a400: nth($palette-lime, 13);
-$palette-lime-a700: nth($palette-lime, 14);
-
-$palette-yellow:
-"255,253,231"
-"255,249,196"
-"255,245,157"
-"255,241,118"
-"255,238,88"
-"255,235,59"
-"253,216,53"
-"251,192,45"
-"249,168,37"
-"245,127,23"
-"255,255,141"
-"255,255,0"
-"255,234,0"
-"255,214,0";
-
-$palette-yellow-50: nth($palette-yellow, 1);
-$palette-yellow-100: nth($palette-yellow, 2);
-$palette-yellow-200: nth($palette-yellow, 3);
-$palette-yellow-300: nth($palette-yellow, 4);
-$palette-yellow-400: nth($palette-yellow, 5);
-$palette-yellow-500: nth($palette-yellow, 6);
-$palette-yellow-600: nth($palette-yellow, 7);
-$palette-yellow-700: nth($palette-yellow, 8);
-$palette-yellow-800: nth($palette-yellow, 9);
-$palette-yellow-900: nth($palette-yellow, 10);
-$palette-yellow-a100: nth($palette-yellow, 11);
-$palette-yellow-a200: nth($palette-yellow, 12);
-$palette-yellow-a400: nth($palette-yellow, 13);
-$palette-yellow-a700: nth($palette-yellow, 14);
-
-$palette-amber:
-"255,248,225"
-"255,236,179"
-"255,224,130"
-"255,213,79"
-"255,202,40"
-"255,193,7"
-"255,179,0"
-"255,160,0"
-"255,143,0"
-"255,111,0"
-"255,229,127"
-"255,215,64"
-"255,196,0"
-"255,171,0";
-
-$palette-amber-50: nth($palette-amber, 1);
-$palette-amber-100: nth($palette-amber, 2);
-$palette-amber-200: nth($palette-amber, 3);
-$palette-amber-300: nth($palette-amber, 4);
-$palette-amber-400: nth($palette-amber, 5);
-$palette-amber-500: nth($palette-amber, 6);
-$palette-amber-600: nth($palette-amber, 7);
-$palette-amber-700: nth($palette-amber, 8);
-$palette-amber-800: nth($palette-amber, 9);
-$palette-amber-900: nth($palette-amber, 10);
-$palette-amber-a100: nth($palette-amber, 11);
-$palette-amber-a200: nth($palette-amber, 12);
-$palette-amber-a400: nth($palette-amber, 13);
-$palette-amber-a700: nth($palette-amber, 14);
-
-$palette-orange:
-"255,243,224"
-"255,224,178"
-"255,204,128"
-"255,183,77"
-"255,167,38"
-"255,152,0"
-"251,140,0"
-"245,124,0"
-"239,108,0"
-"230,81,0"
-"255,209,128"
-"255,171,64"
-"255,145,0"
-"255,109,0";
-
-$palette-orange-50: nth($palette-orange, 1);
-$palette-orange-100: nth($palette-orange, 2);
-$palette-orange-200: nth($palette-orange, 3);
-$palette-orange-300: nth($palette-orange, 4);
-$palette-orange-400: nth($palette-orange, 5);
-$palette-orange-500: nth($palette-orange, 6);
-$palette-orange-600: nth($palette-orange, 7);
-$palette-orange-700: nth($palette-orange, 8);
-$palette-orange-800: nth($palette-orange, 9);
-$palette-orange-900: nth($palette-orange, 10);
-$palette-orange-a100: nth($palette-orange, 11);
-$palette-orange-a200: nth($palette-orange, 12);
-$palette-orange-a400: nth($palette-orange, 13);
-$palette-orange-a700: nth($palette-orange, 14);
-
-$palette-deep-orange:
-"251,233,231"
-"255,204,188"
-"255,171,145"
-"255,138,101"
-"255,112,67"
-"255,87,34"
-"244,81,30"
-"230,74,25"
-"216,67,21"
-"191,54,12"
-"255,158,128"
-"255,110,64"
-"255,61,0"
-"221,44,0";
-
-$palette-deep-orange-50: nth($palette-deep-orange, 1);
-$palette-deep-orange-100: nth($palette-deep-orange, 2);
-$palette-deep-orange-200: nth($palette-deep-orange, 3);
-$palette-deep-orange-300: nth($palette-deep-orange, 4);
-$palette-deep-orange-400: nth($palette-deep-orange, 5);
-$palette-deep-orange-500: nth($palette-deep-orange, 6);
-$palette-deep-orange-600: nth($palette-deep-orange, 7);
-$palette-deep-orange-700: nth($palette-deep-orange, 8);
-$palette-deep-orange-800: nth($palette-deep-orange, 9);
-$palette-deep-orange-900: nth($palette-deep-orange, 10);
-$palette-deep-orange-a100: nth($palette-deep-orange, 11);
-$palette-deep-orange-a200: nth($palette-deep-orange, 12);
-$palette-deep-orange-a400: nth($palette-deep-orange, 13);
-$palette-deep-orange-a700: nth($palette-deep-orange, 14);
-
-$palette-brown:
-"239,235,233"
-"215,204,200"
-"188,170,164"
-"161,136,127"
-"141,110,99"
-"121,85,72"
-"109,76,65"
-"93,64,55"
-"78,52,46"
-"62,39,35";
-
-$palette-brown-50: nth($palette-brown, 1);
-$palette-brown-100: nth($palette-brown, 2);
-$palette-brown-200: nth($palette-brown, 3);
-$palette-brown-300: nth($palette-brown, 4);
-$palette-brown-400: nth($palette-brown, 5);
-$palette-brown-500: nth($palette-brown, 6);
-$palette-brown-600: nth($palette-brown, 7);
-$palette-brown-700: nth($palette-brown, 8);
-$palette-brown-800: nth($palette-brown, 9);
-$palette-brown-900: nth($palette-brown, 10);
-
-$palette-grey:
-"250,250,250"
-"245,245,245"
-"238,238,238"
-"224,224,224"
-"189,189,189"
-"158,158,158"
-"117,117,117"
-"97,97,97"
-"66,66,66"
-"33,33,33";
-
-$palette-grey-50: nth($palette-grey, 1);
-$palette-grey-100: nth($palette-grey, 2);
-$palette-grey-200: nth($palette-grey, 3);
-$palette-grey-300: nth($palette-grey, 4);
-$palette-grey-400: nth($palette-grey, 5);
-$palette-grey-500: nth($palette-grey, 6);
-$palette-grey-600: nth($palette-grey, 7);
-$palette-grey-700: nth($palette-grey, 8);
-$palette-grey-800: nth($palette-grey, 9);
-$palette-grey-900: nth($palette-grey, 10);
-
-$palette-blue-grey:
-"236,239,241"
-"207,216,220"
-"176,190,197"
-"144,164,174"
-"120,144,156"
-"96,125,139"
-"84,110,122"
-"69,90,100"
-"55,71,79"
-"38,50,56";
-
-$palette-blue-grey-50: nth($palette-blue-grey, 1);
-$palette-blue-grey-100: nth($palette-blue-grey, 2);
-$palette-blue-grey-200: nth($palette-blue-grey, 3);
-$palette-blue-grey-300: nth($palette-blue-grey, 4);
-$palette-blue-grey-400: nth($palette-blue-grey, 5);
-$palette-blue-grey-500: nth($palette-blue-grey, 6);
-$palette-blue-grey-600: nth($palette-blue-grey, 7);
-$palette-blue-grey-700: nth($palette-blue-grey, 8);
-$palette-blue-grey-800: nth($palette-blue-grey, 9);
-$palette-blue-grey-900: nth($palette-blue-grey, 10);
-
-$color-black: "0,0,0";
-$color-white: "255,255,255";
+// Red
+$palette-red-50: rgb(255,235,238);
+$palette-red-100: rgb(255,205,210);
+$palette-red-200: rgb(239,154,154);
+$palette-red-300: rgb(229,115,115);
+$palette-red-400: rgb(239,83,80);
+$palette-red-500: rgb(244,67,54);
+$palette-red-600: rgb(229,57,53);
+$palette-red-700: rgb(211,47,47);
+$palette-red-800: rgb(198,40,40);
+$palette-red-900: rgb(183,28,28);
+$palette-red-a100: rgb(255,138,128);
+$palette-red-a200: rgb(255,82,82);
+$palette-red-a400: rgb(255,23,68);
+$palette-red-a700: rgb(213,0,0);
+
+// Pink
+$palette-pink-50: rgb(252,228,236);
+$palette-pink-100: rgb(248,187,208);
+$palette-pink-200: rgb(244,143,177);
+$palette-pink-300: rgb(240,98,146);
+$palette-pink-400: rgb(236,64,122);
+$palette-pink-500: rgb(233,30,99);
+$palette-pink-600: rgb(216,27,96);
+$palette-pink-700: rgb(194,24,91);
+$palette-pink-800: rgb(173,20,87);
+$palette-pink-900: rgb(136,14,79);
+$palette-pink-a100: rgb(255,128,171);
+$palette-pink-a200: rgb(255,64,129);
+$palette-pink-a400: rgb(245,0,87);
+$palette-pink-a700: rgb(197,17,98);
+
+// Purple
+$palette-purple-50: rgb(243,229,245);
+$palette-purple-100: rgb(225,190,231);
+$palette-purple-200: rgb(206,147,216);
+$palette-purple-300: rgb(186,104,200);
+$palette-purple-400: rgb(171,71,188);
+$palette-purple-500: rgb(156,39,176);
+$palette-purple-600: rgb(142,36,170);
+$palette-purple-700: rgb(123,31,162);
+$palette-purple-800: rgb(106,27,154);
+$palette-purple-900: rgb(74,20,140);
+$palette-purple-a100: rgb(234,128,252);
+$palette-purple-a200: rgb(224,64,251);
+$palette-purple-a400: rgb(213,0,249);
+$palette-purple-a700: rgb(170,0,255);
+
+//Deep Purple
+$palette-deep-purple-50: rgb(237,231,246);
+$palette-deep-purple-100: rgb(209,196,233);
+$palette-deep-purple-200: rgb(179,157,219);
+$palette-deep-purple-300: rgb(149,117,205);
+$palette-deep-purple-400: rgb(126,87,194);
+$palette-deep-purple-500: rgb(103,58,183);
+$palette-deep-purple-600: rgb(94,53,177);
+$palette-deep-purple-700: rgb(81,45,168);
+$palette-deep-purple-800: rgb(69,39,160);
+$palette-deep-purple-900: rgb(49,27,146);
+$palette-deep-purple-a100: rgb(179,136,255);
+$palette-deep-purple-a200: rgb(124,77,255);
+$palette-deep-purple-a400: rgb(101,31,255);
+$palette-deep-purple-a700: rgb(98,0,234);
+
+// Indigo
+$palette-indigo-50: rgb(232,234,246);
+$palette-indigo-100: rgb(197,202,233);
+$palette-indigo-200: rgb(159,168,218);
+$palette-indigo-300: rgb(121,134,203);
+$palette-indigo-400: rgb(92,107,192);
+$palette-indigo-500: rgb(63,81,181);
+$palette-indigo-600: rgb(57,73,171);
+$palette-indigo-700: rgb(48,63,159);
+$palette-indigo-800: rgb(40,53,147);
+$palette-indigo-900: rgb(26,35,126);
+$palette-indigo-a100: rgb(140,158,255);
+$palette-indigo-a200: rgb(83,109,254);
+$palette-indigo-a400: rgb(61,90,254);
+$palette-indigo-a700: rgb(48,79,254);
+
+// Blue
+$palette-blue-50: rgb(227,242,253);
+$palette-blue-100: rgb(187,222,251);
+$palette-blue-200: rgb(144,202,249);
+$palette-blue-300: rgb(100,181,246);
+$palette-blue-400: rgb(66,165,245);
+$palette-blue-500: rgb(33,150,243);
+$palette-blue-600: rgb(30,136,229);
+$palette-blue-700: rgb(25,118,210);
+$palette-blue-800: rgb(21,101,192);
+$palette-blue-900: rgb(13,71,161);
+$palette-blue-a100: rgb(130,177,255);
+$palette-blue-a200: rgb(68,138,255);
+$palette-blue-a400: rgb(41,121,255);
+$palette-blue-a700: rgb(41,98,255);
+
+// Light Blue
+$palette-light-blue-50: rgb(225,245,254);
+$palette-light-blue-100: rgb(179,229,252);
+$palette-light-blue-200: rgb(129,212,250);
+$palette-light-blue-300: rgb(79,195,247);
+$palette-light-blue-400: rgb(41,182,246);
+$palette-light-blue-500: rgb(3,169,244);
+$palette-light-blue-600: rgb(3,155,229);
+$palette-light-blue-700: rgb(2,136,209);
+$palette-light-blue-800: rgb(2,119,189);
+$palette-light-blue-900: rgb(1,87,155);
+$palette-light-blue-a100: rgb(128,216,255);
+$palette-light-blue-a200: rgb(64,196,255);
+$palette-light-blue-a400: rgb(0,176,255);
+$palette-light-blue-a700: rgb(0,145,234);
+
+// Cyan
+$palette-cyan-50: rgb(224,247,250);
+$palette-cyan-100: rgb(178,235,242);
+$palette-cyan-200: rgb(128,222,234);
+$palette-cyan-300: rgb(77,208,225);
+$palette-cyan-400: rgb(38,198,218);
+$palette-cyan-500: rgb(0,188,212);
+$palette-cyan-600: rgb(0,172,193);
+$palette-cyan-700: rgb(0,151,167);
+$palette-cyan-800: rgb(0,131,143);
+$palette-cyan-900: rgb(0,96,100);
+$palette-cyan-a100: rgb(132,255,255);
+$palette-cyan-a200: rgb(24,255,255);
+$palette-cyan-a400: rgb(0,229,255);
+$palette-cyan-a700: rgb(0,184,212);
+
+// Teal
+$palette-teal-50: rgb(224,242,241);
+$palette-teal-100: rgb(178,223,219);
+$palette-teal-200: rgb(128,203,196);
+$palette-teal-300: rgb(77,182,172);
+$palette-teal-400: rgb(38,166,154);
+$palette-teal-500: rgb(0,150,136);
+$palette-teal-600: rgb(0,137,123);
+$palette-teal-700: rgb(0,121,107);
+$palette-teal-800: rgb(0,105,92);
+$palette-teal-900: rgb(0,77,64);
+$palette-teal-a100: rgb(167,255,235);
+$palette-teal-a200: rgb(100,255,218);
+$palette-teal-a400: rgb(29,233,182);
+$palette-teal-a700: rgb(0,191,165);
+
+// Green
+$palette-green-50: rgb(232,245,233);
+$palette-green-100: rgb(200,230,201);
+$palette-green-200: rgb(165,214,167);
+$palette-green-300: rgb(129,199,132);
+$palette-green-400: rgb(102,187,106);
+$palette-green-500: rgb(76,175,80);
+$palette-green-600: rgb(67,160,71);
+$palette-green-700: rgb(56,142,60);
+$palette-green-800: rgb(46,125,50);
+$palette-green-900: rgb(27,94,32);
+$palette-green-a100: rgb(185,246,202);
+$palette-green-a200: rgb(105,240,174);
+$palette-green-a400: rgb(0,230,118);
+$palette-green-a700: rgb(0,200,83);
+
+// Green
+$palette-light-green-50: rgb(241,248,233);
+$palette-light-green-100: rgb(220,237,200);
+$palette-light-green-200: rgb(197,225,165);
+$palette-light-green-300: rgb(174,213,129);
+$palette-light-green-400: rgb(156,204,101);
+$palette-light-green-500: rgb(139,195,74);
+$palette-light-green-600: rgb(124,179,66);
+$palette-light-green-700: rgb(104,159,56);
+$palette-light-green-800: rgb(85,139,47);
+$palette-light-green-900: rgb(51,105,30);
+$palette-light-green-a100: rgb(204,255,144);
+$palette-light-green-a200: rgb(178,255,89);
+$palette-light-green-a400: rgb(118,255,3);
+$palette-light-green-a700: rgb(100,221,23);
+
+// Lime
+$palette-lime-50: rgb(249,251,231);
+$palette-lime-100: rgb(240,244,195);
+$palette-lime-200: rgb(230,238,156);
+$palette-lime-300: rgb(220,231,117);
+$palette-lime-400: rgb(212,225,87);
+$palette-lime-500: rgb(205,220,57);
+$palette-lime-600: rgb(192,202,51);
+$palette-lime-700: rgb(175,180,43);
+$palette-lime-800: rgb(158,157,36);
+$palette-lime-900: rgb(130,119,23);
+$palette-lime-a100: rgb(244,255,129);
+$palette-lime-a200: rgb(238,255,65);
+$palette-lime-a400: rgb(198,255,0);
+$palette-lime-a700: rgb(174,234,0);
+
+// Yellow
+$palette-yellow-50: rgb(255,253,231);
+$palette-yellow-100: rgb(255,249,196);
+$palette-yellow-200: rgb(255,245,157);
+$palette-yellow-300: rgb(255,241,118);
+$palette-yellow-400: rgb(255,238,88);
+$palette-yellow-500: rgb(255,235,59);
+$palette-yellow-600: rgb(253,216,53);
+$palette-yellow-700: rgb(251,192,45);
+$palette-yellow-800: rgb(249,168,37);
+$palette-yellow-900: rgb(245,127,23);
+$palette-yellow-a100: rgb(255,255,141);
+$palette-yellow-a200: rgb(255,255,0);
+$palette-yellow-a400: rgb(255,234,0);
+$palette-yellow-a700: rgb(255,214,0);
+
+// Amber
+$palette-amber-50: rgb(255,248,225);
+$palette-amber-100: rgb(255,236,179);
+$palette-amber-200: rgb(255,224,130);
+$palette-amber-300: rgb(255,213,79);
+$palette-amber-400: rgb(255,202,40);
+$palette-amber-500: rgb(255,193,7);
+$palette-amber-600: rgb(255,179,0);
+$palette-amber-700: rgb(255,160,0);
+$palette-amber-800: rgb(255,143,0);
+$palette-amber-900: rgb(255,111,0);
+$palette-amber-a100: rgb(255,229,127);
+$palette-amber-a200: rgb(255,215,64);
+$palette-amber-a400: rgb(255,196,0);
+$palette-amber-a700: rgb(255,171,0);
+
+// Orange
+$palette-orange-50: rgb(255,243,224);
+$palette-orange-100: rgb(255,224,178);
+$palette-orange-200: rgb(255,204,128);
+$palette-orange-300: rgb(255,183,77);
+$palette-orange-400: rgb(255,167,38);
+$palette-orange-500: rgb(255,152,0);
+$palette-orange-600: rgb(251,140,0);
+$palette-orange-700: rgb(245,124,0);
+$palette-orange-800: rgb(239,108,0);
+$palette-orange-900: rgb(230,81,0);
+$palette-orange-a100: rgb(255,209,128);
+$palette-orange-a200: rgb(255,171,64);
+$palette-orange-a400: rgb(255,145,0);
+$palette-orange-a700: rgb(255,109,0);
+
+// Deep Orange
+$palette-deep-orange-50: rgb(251,233,231);
+$palette-deep-orange-100: rgb(255,204,188);
+$palette-deep-orange-200: rgb(255,171,145);
+$palette-deep-orange-300: rgb(255,138,101);
+$palette-deep-orange-400: rgb(255,112,67);
+$palette-deep-orange-500: rgb(255,87,34);
+$palette-deep-orange-600: rgb(244,81,30);
+$palette-deep-orange-700: rgb(230,74,25);
+$palette-deep-orange-800: rgb(216,67,21);
+$palette-deep-orange-900: rgb(191,54,12);
+$palette-deep-orange-a100: rgb(255,158,128);
+$palette-deep-orange-a200: rgb(255,110,64);
+$palette-deep-orange-a400: rgb(255,61,0);
+$palette-deep-orange-a700: rgb(221,44,0);
+
+// Brown
+$palette-brown-50: rgb(239,235,233);
+$palette-brown-100: rgb(215,204,200);
+$palette-brown-200: rgb(188,170,164);
+$palette-brown-300: rgb(161,136,127);
+$palette-brown-400: rgb(141,110,99);
+$palette-brown-500: rgb(121,85,72);
+$palette-brown-600: rgb(109,76,65);
+$palette-brown-700: rgb(93,64,55);
+$palette-brown-800: rgb(78,52,46);
+$palette-brown-900: rgb(62,39,35);
+
+// Grey
+$palette-grey-50: rgb(250,250,250);
+$palette-grey-100: rgb(245,245,245);
+$palette-grey-200: rgb(238,238,238);
+$palette-grey-300: rgb(224,224,224);
+$palette-grey-400: rgb(189,189,189);
+$palette-grey-500: rgb(158,158,158);
+$palette-grey-600: rgb(117,117,117);
+$palette-grey-700: rgb(97,97,97);
+$palette-grey-800: rgb(66,66,66);
+$palette-grey-900: rgb(33,33,33);
+
+// Blue Grey
+$palette-blue-grey-50: rgb(236,239,241);
+$palette-blue-grey-100: rgb(207,216,220);
+$palette-blue-grey-200: rgb(176,190,197);
+$palette-blue-grey-300: rgb(144,164,174);
+$palette-blue-grey-400: rgb(120,144,156);
+$palette-blue-grey-500: rgb(96,125,139);
+$palette-blue-grey-600: rgb(84,110,122);
+$palette-blue-grey-700: rgb(69,90,100);
+$palette-blue-grey-800: rgb(55,71,79);
+$palette-blue-grey-900: rgb(38,50,56);
+
+$color-black: rgb(0,0,0);
+$color-white: rgb(255,255,255);
 
 //-- The two possible colors for overlayed text.
 $styleguide-generate-template: false !default;

From addc7f312bc5b4a6c07257df7eaf56d405f48581 Mon Sep 17 00:00:00 2001
From: Enzo Martin <enzo.r.martin@gmail.com>
Date: Wed, 18 Nov 2015 20:56:15 +0100
Subject: [PATCH 0115/1024] Remove all `unquote` calls - Use SASS RGBA directly
 when modifying the opacity

---
 components/_globals.scss                     | 10 +++----
 components/app_bar/_config.scss              |  4 +--
 components/autocomplete/_config.scss         |  8 +++---
 components/button/_config.scss               | 28 ++++++++++----------
 components/card/_config.scss                 |  4 +--
 components/checkbox/_config.scss             | 10 +++----
 components/date_picker/_config.scss          |  8 +++---
 components/date_picker/calendar/_config.scss |  8 +++---
 components/dialog/_config.scss               |  4 +--
 components/drawer/_config.scss               |  6 ++---
 components/dropdown/_config.scss             |  8 +++---
 components/input/_config.scss                |  8 +++---
 components/list/_config.scss                 |  2 +-
 components/menu/_config.scss                 |  4 +--
 components/navigation/_config.scss           |  4 +--
 components/overlay/_config.scss              |  2 +-
 components/progress_bar/_config.scss         |  4 +--
 components/radio/_config.scss                | 10 +++----
 components/slider/_config.scss               |  6 ++---
 components/snackbar/_config.scss             |  8 +++---
 components/switch/_config.scss               | 22 +++++++--------
 components/tabs/_config.scss                 |  6 ++---
 components/time_picker/_config.scss          |  8 +++---
 components/time_picker/clock/_config.scss    |  8 +++---
 docs/app/components/_globals.scss            |  8 +++---
 25 files changed, 99 insertions(+), 99 deletions(-)

diff --git a/components/_globals.scss b/components/_globals.scss
index 3b4147d2c..4304190d5 100644
--- a/components/_globals.scss
+++ b/components/_globals.scss
@@ -1,9 +1,9 @@
 //-- Color configuration
-$color-divider: unquote("rgb(#{$palette-grey-200})") !default;
-$color-background: unquote("rgb(#{$color-white})") !default;
-$color-text: unquote("rgb(#{$palette-grey-900})") !default;
-$color-text-secondary: unquote("rgb(#{$palette-grey-600})") !default;
-$color-overlay: unquote("rgb(#{$color-black})");
+$color-divider: $palette-grey-200 !default;
+$color-background: $color-white !default;
+$color-text: $palette-grey-900 !default;
+$color-text-secondary: $palette-grey-600 !default;
+$color-overlay: $color-black;
 $color-overlay-opacity: 0.5;
 
 $color-primary: $palette-indigo-500 !default;
diff --git a/components/app_bar/_config.scss b/components/app_bar/_config.scss
index ce27a4bf8..cf79769f1 100644
--- a/components/app_bar/_config.scss
+++ b/components/app_bar/_config.scss
@@ -1,5 +1,5 @@
-$appbar-color: unquote("rgb(#{$color-primary-dark})") !default;
-$appbar-contrast: unquote("rgb(#{$color-primary-contrast})") !default;
+$appbar-color: $color-primary-dark !default;
+$appbar-contrast: $color-primary-contrast !default;
 $appbar-title-total-distance: 8 * $unit;
 $appbar-height: 6.4 * $unit;
 $appbar-h-padding: 2.4 * $unit;
diff --git a/components/autocomplete/_config.scss b/components/autocomplete/_config.scss
index 36e864308..277d4f1b1 100644
--- a/components/autocomplete/_config.scss
+++ b/components/autocomplete/_config.scss
@@ -1,9 +1,9 @@
-$autocomplete-color-primary-contrast: unquote("rgb(#{$color-primary-contrast})");
-$autocomplete-color-primary: unquote("rgb(#{$color-primary})");
+$autocomplete-color-primary-contrast: $color-primary-contrast;
+$autocomplete-color-primary: $color-primary;
 $autocomplete-overflow-max-height: 45vh;
-$autocomplete-suggestion-active-background: unquote("rgb(#{$palette-grey-200})");
+$autocomplete-suggestion-active-background: $palette-grey-200;
 $autocomplete-suggestion-padding: $unit;
-$autocomplete-suggestions-background: unquote("rgb(#{$color-white})");
+$autocomplete-suggestions-background: $color-white;
 $autocomplete-value-border-radius: .2 * $unit;
 $autocomplete-value-margin: $unit * .25 $unit * .5 $unit * .25 0;
 $autocomplete-value-padding: $unit * .5 $unit * .75;
diff --git a/components/button/_config.scss b/components/button/_config.scss
index d78046718..e015b79d0 100644
--- a/components/button/_config.scss
+++ b/components/button/_config.scss
@@ -1,23 +1,23 @@
-$button-neutral-color: unquote("rgb(#{$color-white})") !default;
-$button-neutral-color-contrast: unquote("rgb(#{$palette-grey-900})") !default;
-$button-neutral-color-hover: unquote("rgba(#{$palette-grey-900}, 0.20)") !default;
-$button-primary-color-contrast: unquote("rgb(#{$color-primary-contrast})") !default;
-$button-primary-color-hover: unquote("rgba(#{$color-primary}, 0.20)") !default;
-$button-primary-color: unquote("rgb(#{$color-primary})") !default;
-$button-accent-color-contrast: unquote("rgb(#{$color-primary-contrast})") !default;
-$button-accent-color-hover: unquote("rgba(#{$color-accent}, 0.20)") !default;
-$button-accent-color: unquote("rgb(#{$color-accent})") !default;
-$button-default-text-color: unquote("rgb(#{$color-black})") !default;
-$button-disabled-text-color: unquote("rgba(#{$color-black}, 0.26)") !default;
-$button-flat-color-hover: unquote("rgba(#{$color-black}, 0.26)") !default;
+$button-neutral-color: $color-white !default;
+$button-neutral-color-contrast: $palette-grey-900 !default;
+$button-neutral-color-hover: rgba($palette-grey-900, 0.20) !default;
+$button-primary-color-contrast: $color-primary-contrast !default;
+$button-primary-color-hover: rgba($color-primary, 0.20) !default;
+$button-primary-color: $color-primary !default;
+$button-accent-color-contrast: $color-primary-contrast !default;
+$button-accent-color-hover: rgba($color-accent, 0.20) !default;
+$button-accent-color: $color-accent !default;
+$button-default-text-color: $color-black !default;
+$button-disabled-text-color: rgba($color-black, 0.26) !default;
+$button-flat-color-hover: rgba($color-black, 0.26) !default;
 $button-border-radius: 0.2 * $unit;
 $button-floating-font-size: $unit * 2.4;
 $button-floating-height-mini: $unit * 4;
 $button-floating-mini-font-size: $button-floating-height-mini / 2.25;
 $button-floating-height: $unit * 5.6;
 $button-height: $unit * 3.6;
-$button-solid-background-color: unquote("rgba(#{$palette-grey-500}, 0.20)") !default;
-$button-solid-disabled-background-color: unquote("rgba(#{$color-black}, 0.12)") !default;
+$button-solid-background-color: rgba($palette-grey-500, 0.20) !default;
+$button-solid-disabled-background-color: rgba($color-black, 0.12) !default;
 $button-squared-icon-margin: $unit * .6;
 $button-squared-min-width: 9 * $unit;
 $button-squared-padding: 0 $unit * 1.2;
diff --git a/components/card/_config.scss b/components/card/_config.scss
index 52b0d98a5..05ace4345 100644
--- a/components/card/_config.scss
+++ b/components/card/_config.scss
@@ -1,7 +1,7 @@
-$card-color-white: unquote("rgb(#{$color-white})") !default;
+$card-color-white: $color-white !default;
 $card-title-height: 17.6 * $unit;
 $card-width-normal: 32 * $unit;
 $card-width-large: 51.2 * $unit;
 $card-offset: 1.6 * $unit;
 $card-navigation-offset: $card-offset / 2;
-$card-text-overlay: unquote("rgba(#{$color-black}, 0.2)");
+$card-text-overlay: rgba($color-black, 0.2);
diff --git a/components/checkbox/_config.scss b/components/checkbox/_config.scss
index 45c35a4d6..18266e498 100644
--- a/components/checkbox/_config.scss
+++ b/components/checkbox/_config.scss
@@ -1,12 +1,12 @@
-$checkbox-color: unquote("rgb(#{$color-primary})") !default;
-$checkbox-disabled-color: unquote("rgba(#{$color-black}, 0.26)") !default;
+$checkbox-color: $color-primary !default;
+$checkbox-disabled-color: rgba($color-black, 0.26) !default;
 $checkbox-field-margin-bottom: 1.5 * $unit !default;
-$checkbox-focus-checked-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
+$checkbox-focus-checked-color: rgba($color-primary, 0.26) !default;
 $checkbox-ripple-duration: 650ms !default;
 $checkbox-size: 1.8 * $unit !default;
-$checkbox-focus-color: unquote("rgba(#{$color-black}, 0.1)") !default;
+$checkbox-focus-color: rgba($color-black, 0.1) !default;
 $checkbox-focus-size: $checkbox-size * 2.3 !default;
-$checkbox-text-color: unquote("rgb(#{$color-black})") !default;
+$checkbox-text-color: $color-black !default;
 $checkbox-text-font-size: $font-size-small !default;
 $checkbox-total-height: 1.8 * $unit !default;
 $checkbox-transition-duration: .2s !default;
diff --git a/components/date_picker/_config.scss b/components/date_picker/_config.scss
index 9c74226f1..ca3c7554a 100644
--- a/components/date_picker/_config.scss
+++ b/components/date_picker/_config.scss
@@ -1,10 +1,10 @@
 $datepicker-primary: $color-primary;
 $datepicker-primary-contrast: $color-primary-contrast;
 $datepicker-primary-dark: $color-primary-dark;
-$datepicker-primary-color: unquote("rgb(#{$datepicker-primary})") !default;
-$datepicker-primary-hover-color: unquote("rgba(#{$datepicker-primary}, 0.20)") !default;
-$datepicker-primary-contrast-color: unquote("rgb(#{$datepicker-primary-contrast})") !default;
-$datepicker-primary-dark-color: unquote("rgb(#{$datepicker-primary-dark})") !default;
+$datepicker-primary-color: $datepicker-primary) !default;
+$datepicker-primary-hover-color: rgba($datepicker-primary, 0.20) !default;
+$datepicker-primary-contrast-color: $datepicker-primary-contrast !default;
+$datepicker-primary-dark-color: $datepicker-primary-dark !default;
 $datepicker-dialog-width: 33 * $unit;
 $datepicker-inactive-opacity: .6;
 $datepicker-weekday-line-height: 2 * $unit;
diff --git a/components/date_picker/calendar/_config.scss b/components/date_picker/calendar/_config.scss
index 793eda77b..53d6ac989 100644
--- a/components/date_picker/calendar/_config.scss
+++ b/components/date_picker/calendar/_config.scss
@@ -1,9 +1,9 @@
 $calendar-primary: $color-primary;
 $calendar-primary-contrast: $color-primary-contrast;
-$calendar-primary-color: unquote("rgb(#{$calendar-primary})") !default;
-$calendar-primary-contrast-color: unquote("rgb(#{$calendar-primary-contrast})") !default;
-$calendar-primary-hover-color: unquote("rgba(#{$calendar-primary}, 0.21)") !default;
-$calendar-arrows-color: unquote("rgb(#{$palette-grey-600})") !default;
+$calendar-primary-color: $calendar-primary !default;
+$calendar-primary-contrast-color: $calendar-primary-contrast !default;
+$calendar-primary-hover-color: rgba($calendar-primary, 0.21) !default;
+$calendar-arrows-color: $palette-grey-600 !default;
 $calendar-arrows-font-size: 2 * $unit;
 $calendar-arrows-ripple-duration: 450ms;
 $calendar-year-font-size: 2.4;
diff --git a/components/dialog/_config.scss b/components/dialog/_config.scss
index 47716a8ef..cc1d68849 100644
--- a/components/dialog/_config.scss
+++ b/components/dialog/_config.scss
@@ -1,6 +1,6 @@
 $dialog-border-radius: .2 * $unit;
-$dialog-color-title: unquote("rgb(#{$color-black})") !default;
-$dialog-color-white: unquote("rgb(#{$color-white})") !default;
+$dialog-color-title: $color-black !default;
+$dialog-color-white: $color-white !default;
 $dialog-content-padding: 2.4 * $unit;
 $dialog-navigation-padding: .8 * $unit;
 $dialog-translate-y: 4 * $unit;
diff --git a/components/drawer/_config.scss b/components/drawer/_config.scss
index 21cf5900b..5a164bac4 100644
--- a/components/drawer/_config.scss
+++ b/components/drawer/_config.scss
@@ -1,5 +1,5 @@
-$drawer-background-color: unquote("rgb(#{$palette-grey-50})") !default;
-$drawer-border-color: unquote("rgb(#{$palette-grey-300})") !default;
+$drawer-background-color: $palette-grey-50 !default;
+$drawer-border-color: $palette-grey-300 !default;
 $drawer-overlay-color: $color-overlay;
-$drawer-text-color: unquote("rgb(#{$palette-grey-800})") !default;
+$drawer-text-color: $palette-grey-800 !default;
 $drawer-width: 24 * $unit;
diff --git a/components/dropdown/_config.scss b/components/dropdown/_config.scss
index f924ec26c..58a2ab265 100644
--- a/components/dropdown/_config.scss
+++ b/components/dropdown/_config.scss
@@ -1,7 +1,7 @@
 $dropdown-offset: 1.6 * $unit;
-$dropdown-color-white: unquote("rgb(#{$color-white})");
-$dropdown-color-primary: unquote("rgb(#{$color-primary})");
-$dropdown-color-primary-contrast: unquote("rgb(#{$color-primary-contrast})");
-$dropdown-value-hover-background: unquote("rgb(#{$palette-grey-200})");
+$dropdown-color-white: $color-white;
+$dropdown-color-primary: $color-primary;
+$dropdown-color-primary-contrast: $color-primary-contrast;
+$dropdown-value-hover-background: $palette-grey-200;
 $dropdown-overflow-max-height: 45vh;
 $dropdown-value-border-radius: .2 * $unit;
diff --git a/components/input/_config.scss b/components/input/_config.scss
index 487e100a4..bc7c5450b 100644
--- a/components/input/_config.scss
+++ b/components/input/_config.scss
@@ -5,12 +5,12 @@ $input-field-height: $input-field-padding * 2 + $input-field-font-size;
 $input-label-font-size: 1.2 * $unit;
 $input-focus-label-top: .6 * $unit;
 $input-text-background-color: transparent !default;
-$input-text-label-color: unquote("rgba(#{$color-black}, 0.26)") !default;
-$input-text-bottom-border-color: unquote("rgba(#{$color-black}, 0.12)") !default;
-$input-text-highlight-color: unquote("rgb(#{$color-primary})") !default;
+$input-text-label-color: rgba($color-black, 0.26) !default;
+$input-text-bottom-border-color: rgba($color-black, 0.12) !default;
+$input-text-highlight-color: $color-primary !default;
 $input-text-disabled-color: $input-text-bottom-border-color !default;
 $input-text-disabled-text-color: $input-text-label-color !default;
-$input-text-error-color: unquote("rgb(222, 50, 38)") !default;
+$input-text-error-color: rgb(222, 50, 38) !default;
 $input-underline-height:  2 * $unit;
 $input-icon-font-size: 2.4 * $unit;
 $input-icon-size: 2 * $input-icon-font-size;
diff --git a/components/list/_config.scss b/components/list/_config.scss
index 0528ed883..49c57c8ff 100644
--- a/components/list/_config.scss
+++ b/components/list/_config.scss
@@ -7,7 +7,7 @@ $list-subheader-font-weight: 500;
 $list-divider-height: .1 * $unit;
 $list-item-min-height: 4.8 * $unit;
 $list-item-min-height-legend: 7.2 * $unit;
-$list-item-hover-color: unquote("rgb(#{$palette-grey-200})");
+$list-item-hover-color: $palette-grey-200;
 $list-item-legend-margin-top: .3 * $unit;
 $list-item-icon-font-size: 2.4 * $unit;
 $list-item-icon-size: 1.8 * $unit;
diff --git a/components/menu/_config.scss b/components/menu/_config.scss
index 631cf29ac..02b06d470 100644
--- a/components/menu/_config.scss
+++ b/components/menu/_config.scss
@@ -1,10 +1,10 @@
 $menu-expand-duration: .3s !default;
 $menu-fade-duration: .2s !default;
 $menu-ripple-delay: .3s !default;
-$menu-background-color: unquote("rgb(#{$color-white})");
+$menu-background-color: $color-white;
 $menu-padding: .8 * $unit 0;
 $menu-outline-border-radius: .2 * $unit;
-$menu-item-hover-background: unquote("rgb(#{$palette-grey-200})");
+$menu-item-hover-background: $palette-grey-200;
 $menu-item-icon-font-size: 2.4 * $unit;
 $menu-item-icon-size: 1.6 * $menu-item-icon-font-size;
 $menu-item-height: 4.8 * $unit;
diff --git a/components/navigation/_config.scss b/components/navigation/_config.scss
index a24e899f0..0375d1567 100644
--- a/components/navigation/_config.scss
+++ b/components/navigation/_config.scss
@@ -1,3 +1,3 @@
 $navigation-space: $unit;
-$navigation-color: unquote("rgb(#{$color-black})") !default;
-$navigation-background: unquote("rgb(#{$color-white})") !default;
+$navigation-color: $color-black !default;
+$navigation-background: $color-white !default;
diff --git a/components/overlay/_config.scss b/components/overlay/_config.scss
index fc0b37857..fd75dac5e 100644
--- a/components/overlay/_config.scss
+++ b/components/overlay/_config.scss
@@ -1 +1 @@
-$overlay-color: unquote("rgb(#{$color-black})") !default;
+$overlay-color: $color-black !default;
diff --git a/components/progress_bar/_config.scss b/components/progress_bar/_config.scss
index 3f78ce585..2d9d5d2b2 100644
--- a/components/progress_bar/_config.scss
+++ b/components/progress_bar/_config.scss
@@ -1,6 +1,6 @@
 $progress-height: .4 * $unit;
-$progress-main-color: unquote("rgb(#{$color-primary})") !default;
-$progress-secondary-color: unquote("rgba(#{$color-primary-contrast}, 0.7)") !default;
+$progress-main-color: $color-primary !default;
+$progress-secondary-color: rgba($color-primary-contrast, 0.7) !default;
 $circle-wrapper-width: 60;
 $circle-radius: 25;
 $scale-ratio: $circle-radius / 20;
diff --git a/components/radio/_config.scss b/components/radio/_config.scss
index 4fec5abc2..67de4b873 100644
--- a/components/radio/_config.scss
+++ b/components/radio/_config.scss
@@ -1,9 +1,9 @@
 $radio-field-margin-bottom: 1.5 * $unit;
 $radio-button-size: 1.6 * $unit !default;
 $radio-inner-margin: $radio-button-size / 4;
-$radio-inner-color: unquote("rgb(#{$color-primary})") !default;
-$radio-focus-color: unquote("rgba(#{$color-black}, 0.1)") !default;
-$radio-checked-focus-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
-$radio-text-color: unquote("rgb(#{$color-black})") !default;
-$radio-disabled-color: unquote("rgba(#{$color-black}, 0.26)") !default;
+$radio-inner-color: $color-primary !default;
+$radio-focus-color: rgba($color-black, 0.1) !default;
+$radio-checked-focus-color: rgba($color-primary, 0.26) !default;
+$radio-text-color: $color-black !default;
+$radio-disabled-color: rgba($color-black, 0.26) !default;
 $radio-text-font-size: 1.4 * $unit;
diff --git a/components/slider/_config.scss b/components/slider/_config.scss
index 5e97a8563..30c82699c 100644
--- a/components/slider/_config.scss
+++ b/components/slider/_config.scss
@@ -1,6 +1,6 @@
-$slider-main-color: unquote("rgb(#{$color-primary})") !default;
-$slider-main-color-contrast: unquote("rgb(#{$color-primary-contrast})") !default;
-$slider-snap-color: unquote("rgb(#{$color-black})") !default;
+$slider-main-color: $color-primary !default;
+$slider-main-color-contrast: $color-primary-contrast !default;
+$slider-snap-color: $color-black !default;
 $slider-knob-size: 3.2 * $unit;
 $slider-inner-knob-size: 1.2 * $unit;
 $slider-snap-size: .2 * $unit;
diff --git a/components/snackbar/_config.scss b/components/snackbar/_config.scss
index ee140abc7..69f7cdf50 100644
--- a/components/snackbar/_config.scss
+++ b/components/snackbar/_config.scss
@@ -1,9 +1,9 @@
-$snackbar-color-cancel: unquote("rgb(#{$palette-red-500})") !default;
-$snackbar-color-accept: unquote("rgb(#{$palette-green-500})") !default;
-$snackbar-color-warning: unquote("rgb(#{$palette-lime-a200})") !default;
+$snackbar-color-cancel: $palette-red-500 !default;
+$snackbar-color-accept: $palette-green-500 !default;
+$snackbar-color-warning: $palette-lime-a200 !default;
 $snackbar-background-color: $color-text !default;
 $snackbar-border-radius: .2 * $unit !default;
 $snackbar-button-offset: 4.8 * $unit !default;
-$snackbar-color: unquote("rgb(#{$color-white})") !default;
+$snackbar-color: $color-white !default;
 $snackbar-horizontal-offset: 2.4 * $unit !default;
 $snackbar-vertical-offset: 1.4 * $unit !default;
diff --git a/components/switch/_config.scss b/components/switch/_config.scss
index 0e0a8389c..31319bc24 100644
--- a/components/switch/_config.scss
+++ b/components/switch/_config.scss
@@ -1,14 +1,14 @@
-$switch-color: unquote("rgb(#{$color-primary})") !default;
-$switch-text-color: unquote("rgb(#{$color-black})") !default;
-$switch-thumb-off-color: unquote("rgb(#{$palette-grey-50})") !default;
-$switch-track-on-color: unquote("rgba(#{$color-primary}, 0.5)") !default;
-$switch-track-off-color: unquote("rgba(#{$color-black}, 0.26)") !default;
-$switch-off-ripple-color: unquote("rgba(#{$color-black}, 0.4)") !default;
-$switch-on-focus-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
-$switch-off-focus-color: unquote("rgba(#{$color-black}, 0.1)") !default;
-$switch-disabled-thumb-color: unquote("rgb(#{$palette-grey-400})") !default;
-$switch-disabled-track-color: unquote("rgba(#{$color-black}, 0.12)") !default;
-$switch-disabled-text-color: unquote("rgba(#{$color-black}, 0.26)") !default;
+$switch-color: $color-primary !default;
+$switch-text-color: $color-black !default;
+$switch-thumb-off-color: $palette-grey-50 !default;
+$switch-track-on-color: rgba($color-primary, 0.5) !default;
+$switch-track-off-color: rgba($color-black, 0.26) !default;
+$switch-off-ripple-color: rgba($color-black, 0.4) !default;
+$switch-on-focus-color: rgba($color-primary, 0.26) !default;
+$switch-off-focus-color: rgba($color-black, 0.1) !default;
+$switch-disabled-thumb-color: $palette-grey-400 !default;
+$switch-disabled-track-color: rgba($color-black, 0.12) !default;
+$switch-disabled-text-color: rgba($color-black, 0.26) !default;
 $switch-total-height: 2.4 * $unit !default;
 $switch-track-length: 3.6 * $unit !default;
 $switch-track-height: 1.4 * $unit !default;
diff --git a/components/tabs/_config.scss b/components/tabs/_config.scss
index 5b29e5345..64f02c950 100644
--- a/components/tabs/_config.scss
+++ b/components/tabs/_config.scss
@@ -4,8 +4,8 @@ $tab-label-height: 4.8 * $unit;
 $tab-text-height: 1.4 * $unit;
 $tab-label-v-padding: ($tab-label-height - $tab-text-height) / 2;
 $tab-navigation-border-color: $color-divider;
-$tab-pointer-color: unquote("rgb(#{$color-primary})") !default;
+$tab-pointer-color: $color-primary !default;
 $tab-pointer-height: .2 * $unit;
 $tab-text: $color-black !default;
-$tab-text-color: unquote("rgb(#{$tab-text})") !default;
-$tab-text-inactive-color: unquote("rgba(#{$tab-text}, 0.70)") !default;
+$tab-text-color: $tab-text !default;
+$tab-text-inactive-color: rgba($tab-text, 0.70) !default;
diff --git a/components/time_picker/_config.scss b/components/time_picker/_config.scss
index 486d7777c..7cc7d2c76 100644
--- a/components/time_picker/_config.scss
+++ b/components/time_picker/_config.scss
@@ -4,10 +4,10 @@ $timepicker-ampm-font-size: 1.6 * $unit;
 $timepicker-primary: $color-primary;
 $timepicker-primary-contrast: $color-primary-contrast;
 $timepicker-primary-dark: $color-primary-dark;
-$timepicker-primary-color: unquote("rgb(#{$timepicker-primary})") !default;
-$timepicker-primary-hover-color: unquote("rgba(#{$timepicker-primary}, 0.20)") !default;
-$timepicker-primary-contrast-color: unquote("rgb(#{$timepicker-primary-contrast})") !default;
-$timepicker-primary-dark-color: unquote("rgb(#{$timepicker-primary-dark})") !default;
+$timepicker-primary-color: $timepicker-primary !default;
+$timepicker-primary-hover-color: rgba($timepicker-primary, 0.20) !default;
+$timepicker-primary-contrast-color: $timepicker-primary-contrast !default;
+$timepicker-primary-dark-color: $timepicker-primary-dark !default;
 $timepicker-ampm-height: 2.2 * $unit;
 $timepicker-ampm-width: 4 * $unit;
 $timepicker-dialog-width: 30 * $unit;
diff --git a/components/time_picker/clock/_config.scss b/components/time_picker/clock/_config.scss
index 1b1ad40db..0c07e6d92 100644
--- a/components/time_picker/clock/_config.scss
+++ b/components/time_picker/clock/_config.scss
@@ -2,10 +2,10 @@ $clock-padding: 1.5 * $unit 2 * $unit;
 $clock-primary: $color-primary;
 $clock-primary-contrast: $color-primary-contrast;
 $clock-primary-dark: $color-primary-dark;
-$clock-primary-color: unquote("rgb(#{$clock-primary})") !default;
-$clock-primary-hover-color: unquote("rgba(#{$clock-primary}, 0.20)") !default;
-$clock-primary-contrast-color: unquote("rgb(#{$clock-primary-contrast})") !default;
-$clock-primary-dark-color: unquote("rgb(#{$clock-primary-dark})") !default;
+$clock-primary-color: $clock-primary !default;
+$clock-primary-hover-color: rgba($clock-primary, 0.20) !default;
+$clock-primary-contrast-color: $clock-primary-contrast !default;
+$clock-primary-dark-color: $clock-primary-dark !default;
 $clock-number-size: 2 * $unit;
 $clock-hand-width: .4 * $unit;
 $clock-hand-dot-size: 1 * $unit;
diff --git a/docs/app/components/_globals.scss b/docs/app/components/_globals.scss
index a89dee8ac..ff5edcc15 100644
--- a/docs/app/components/_globals.scss
+++ b/docs/app/components/_globals.scss
@@ -2,9 +2,9 @@
 @import "http://github.com/~react-toolbox/commons";
 
 $unit: 1rem;
-$color-primary-dark: unquote("rgb(#{$color-primary-dark})");
-$color-primary-light: unquote("rgb(#{$color-primary-light})");
-$color-primary-contrast: unquote("rgb(#{$color-primary-contrast})");
-$color-accent: unquote("rgb(#{$color-accent})");
+$color-primary-dark: $color-primary-dark;
+$color-primary-light: $color-primary-light;
+$color-primary-contrast: $color-primary-contrast;
+$color-accent: $color-accent;
 $color-divider: $color-divider;
 $color-content: #fafafa;

From 2fc419f0cddd75474681c91a6b48fd5e751b3911 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 19 Nov 2015 17:03:14 +0100
Subject: [PATCH 0116/1024] Auto import base in commons file

---
 components/_globals.scss | 1 +
 components/commons.scss  | 3 ++-
 spec/style.scss          | 1 -
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/_globals.scss b/components/_globals.scss
index 3b4147d2c..c98eda641 100644
--- a/components/_globals.scss
+++ b/components/_globals.scss
@@ -17,6 +17,7 @@ $color-accent-contrast: $color-dark-contrast !default;
 $unit: 1rem;
 
 // -- Fonts
+$font-roboto-url: "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" !default;
 $font-icon-url: "https://fonts.googleapis.com/icon?family=Material+Icons" !default;
 $preferred-font: "Roboto", "Helvetica", "Arial", sans-serif !default;
 $font-size: 1.6 * $unit !default;
diff --git a/components/commons.scss b/components/commons.scss
index afef0c754..32e4626f8 100644
--- a/components/commons.scss
+++ b/components/commons.scss
@@ -1,7 +1,8 @@
+@import "http://github.com/base";
+
 $import-normalize: true !default;
 $import-font: true !default;
 $import-flex-attributes: false !default;
-$font-roboto-url: "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" !default;
 
 @if $import-normalize == true {
   @import "http://github.com/~normalize.css";
diff --git a/spec/style.scss b/spec/style.scss
index 32601471a..72a927b24 100644
--- a/spec/style.scss
+++ b/spec/style.scss
@@ -1,7 +1,6 @@
 $import-normalize: false;
 $import-flex-attributes: true;
 
-@import "http://github.com/components/base";
 @import "http://github.com/components/commons";
 @import "http://github.com/components/app_bar/config";
 @import "http://github.com/components/button/config";

From 966f457fce86aaf0d6cf8a90abb75e25ba2cc3f7 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 19 Nov 2015 17:03:53 +0100
Subject: [PATCH 0117/1024] 0.12.11 release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a33fecea9..2b7136840 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-toolbox",
-  "version": "0.12.10",
+  "version": "0.12.11",
   "homepage": "www.react-toolbox.com",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "author": "React Toolbox Team (http://github.com/react-toolbox)",

From 1ab45dbe5b40979f4385ed4992e6419944dab0db Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 19 Nov 2015 20:13:14 +0100
Subject: [PATCH 0118/1024] Add touch support for ripple

---
 components/ripple/index.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/ripple/index.jsx b/components/ripple/index.jsx
index 6a56ed560..297eedbc9 100644
--- a/components/ripple/index.jsx
+++ b/components/ripple/index.jsx
@@ -25,13 +25,13 @@ class Ripple extends React.Component {
     width: null
   };
 
-  handleEnd = () => {
-    document.removeEventListener('mouseup', this.handleEnd);
+  handleEnd = (touch = false) => {
+    document.removeEventListener(touch ? 'touchend' : 'mouseup', this.handleEnd);
     this.setState({active: false});
   };
 
-  start = ({ pageX, pageY }) => {
-    document.addEventListener('mouseup', this.handleEnd);
+  start = ({ pageX, pageY }, touch = false) => {
+    document.addEventListener(touch ? 'touchend' : 'mouseup', this.handleEnd.bind(this, touch));
     const {top, left, width} = this._getDescriptor(pageX, pageY);
     this.setState({active: false, restarting: true, width: 0}, () => {
       this.refs.ripple.offsetWidth;  //eslint-disable-line no-unused-expressions

From 7841b430d60c314b9ad26fd8797f4200f3658b7c Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 19 Nov 2015 20:13:47 +0100
Subject: [PATCH 0119/1024] Add touch ripple for buttons

---
 components/button/index.jsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/components/button/index.jsx b/components/button/index.jsx
index 2e314a3da..31fde0e6f 100644
--- a/components/button/index.jsx
+++ b/components/button/index.jsx
@@ -43,6 +43,12 @@ class Button extends React.Component {
     if (this.props.onMouseDown) this.props.onMouseDown(event);
   };
 
+  handleTouchStart = (event) => {
+    events.pauseEvent(event);
+    if (this.refs.ripple) this.refs.ripple.start(event.touches[0], true);
+    if (this.props.onTouchStart) this.props.onTouchStart(event);
+  };
+
   render () {
     const {accent, flat, floating, href, icon, label, loading, mini,
            primary, raised, ripple, toggle, tooltip, ...others} = this.props;
@@ -59,7 +65,8 @@ class Button extends React.Component {
       href,
       className,
       disabled: this.props.disabled || this.props.loading,
-      onMouseDown: this.handleMouseDown
+      onMouseDown: this.handleMouseDown,
+      onTouchStart: this.handleTouchStart
     };
 
     return React.createElement(element, props,

From 1193e99d3d5aee2658a2d804b22df0c86ceb8ded Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 19 Nov 2015 17:03:14 +0100
Subject: [PATCH 0120/1024] Auto import base in commons file

---
 components/_globals.scss | 1 +
 components/commons.scss  | 3 ++-
 spec/style.scss          | 1 -
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/_globals.scss b/components/_globals.scss
index 4304190d5..da054b365 100644
--- a/components/_globals.scss
+++ b/components/_globals.scss
@@ -17,6 +17,7 @@ $color-accent-contrast: $color-dark-contrast !default;
 $unit: 1rem;
 
 // -- Fonts
+$font-roboto-url: "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" !default;
 $font-icon-url: "https://fonts.googleapis.com/icon?family=Material+Icons" !default;
 $preferred-font: "Roboto", "Helvetica", "Arial", sans-serif !default;
 $font-size: 1.6 * $unit !default;
diff --git a/components/commons.scss b/components/commons.scss
index afef0c754..32e4626f8 100644
--- a/components/commons.scss
+++ b/components/commons.scss
@@ -1,7 +1,8 @@
+@import "http://github.com/base";
+
 $import-normalize: true !default;
 $import-font: true !default;
 $import-flex-attributes: false !default;
-$font-roboto-url: "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" !default;
 
 @if $import-normalize == true {
   @import "http://github.com/~normalize.css";
diff --git a/spec/style.scss b/spec/style.scss
index 32601471a..72a927b24 100644
--- a/spec/style.scss
+++ b/spec/style.scss
@@ -1,7 +1,6 @@
 $import-normalize: false;
 $import-flex-attributes: true;
 
-@import "http://github.com/components/base";
 @import "http://github.com/components/commons";
 @import "http://github.com/components/app_bar/config";
 @import "http://github.com/components/button/config";

From a93ab7e997ef6fab2f4d0d3f10767cb73e108be9 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 19 Nov 2015 17:03:53 +0100
Subject: [PATCH 0121/1024] 0.12.11 release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a33fecea9..2b7136840 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-toolbox",
-  "version": "0.12.10",
+  "version": "0.12.11",
   "homepage": "www.react-toolbox.com",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "author": "React Toolbox Team (http://github.com/react-toolbox)",

From bd236e172bc4f9ec446b72e1e1be5233573ef9a6 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 19 Nov 2015 20:13:14 +0100
Subject: [PATCH 0122/1024] Add touch support for ripple

---
 components/ripple/index.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/ripple/index.jsx b/components/ripple/index.jsx
index 6a56ed560..297eedbc9 100644
--- a/components/ripple/index.jsx
+++ b/components/ripple/index.jsx
@@ -25,13 +25,13 @@ class Ripple extends React.Component {
     width: null
   };
 
-  handleEnd = () => {
-    document.removeEventListener('mouseup', this.handleEnd);
+  handleEnd = (touch = false) => {
+    document.removeEventListener(touch ? 'touchend' : 'mouseup', this.handleEnd);
     this.setState({active: false});
   };
 
-  start = ({ pageX, pageY }) => {
-    document.addEventListener('mouseup', this.handleEnd);
+  start = ({ pageX, pageY }, touch = false) => {
+    document.addEventListener(touch ? 'touchend' : 'mouseup', this.handleEnd.bind(this, touch));
     const {top, left, width} = this._getDescriptor(pageX, pageY);
     this.setState({active: false, restarting: true, width: 0}, () => {
       this.refs.ripple.offsetWidth;  //eslint-disable-line no-unused-expressions

From 63a0c489c80194aab91a07873e93be2e4ad6430d Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 19 Nov 2015 20:13:47 +0100
Subject: [PATCH 0123/1024] Add touch ripple for buttons

---
 components/button/index.jsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/components/button/index.jsx b/components/button/index.jsx
index 2e314a3da..31fde0e6f 100644
--- a/components/button/index.jsx
+++ b/components/button/index.jsx
@@ -43,6 +43,12 @@ class Button extends React.Component {
     if (this.props.onMouseDown) this.props.onMouseDown(event);
   };
 
+  handleTouchStart = (event) => {
+    events.pauseEvent(event);
+    if (this.refs.ripple) this.refs.ripple.start(event.touches[0], true);
+    if (this.props.onTouchStart) this.props.onTouchStart(event);
+  };
+
   render () {
     const {accent, flat, floating, href, icon, label, loading, mini,
            primary, raised, ripple, toggle, tooltip, ...others} = this.props;
@@ -59,7 +65,8 @@ class Button extends React.Component {
       href,
       className,
       disabled: this.props.disabled || this.props.loading,
-      onMouseDown: this.handleMouseDown
+      onMouseDown: this.handleMouseDown,
+      onTouchStart: this.handleTouchStart
     };
 
     return React.createElement(element, props,

From 6d4ae47168f927a6203819ac3f51e9f04620471d Mon Sep 17 00:00:00 2001
From: Enzo Martin <enzo.r.martin@gmail.com>
Date: Thu, 19 Nov 2015 23:41:41 +0100
Subject: [PATCH 0124/1024] Fix straggling )

---
 components/date_picker/_config.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/date_picker/_config.scss b/components/date_picker/_config.scss
index ca3c7554a..8c7f86df6 100644
--- a/components/date_picker/_config.scss
+++ b/components/date_picker/_config.scss
@@ -1,7 +1,7 @@
 $datepicker-primary: $color-primary;
 $datepicker-primary-contrast: $color-primary-contrast;
 $datepicker-primary-dark: $color-primary-dark;
-$datepicker-primary-color: $datepicker-primary) !default;
+$datepicker-primary-color: $datepicker-primary !default;
 $datepicker-primary-hover-color: rgba($datepicker-primary, 0.20) !default;
 $datepicker-primary-contrast-color: $datepicker-primary-contrast !default;
 $datepicker-primary-dark-color: $datepicker-primary-dark !default;

From 0d5310d0ecbc4388d7cc29356f15f73c807b158a Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Fri, 20 Nov 2015 00:26:36 +0100
Subject: [PATCH 0125/1024] Use normal overflow on rounded buttons

---
 components/button/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/button/style.scss b/components/button/style.scss
index d9fc253b2..a8cb43344 100644
--- a/components/button/style.scss
+++ b/components/button/style.scss
@@ -41,7 +41,7 @@
     pointer-events: none;
   }
   [data-react-toolbox="ripple"] {
-    @include rounded-overflow();
+    overflow: hidden;
   }
 }
 

From f6840de8ea440dc2403fd19ef09cf30425ac2f2c Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Fri, 20 Nov 2015 13:10:11 +0100
Subject: [PATCH 0126/1024] Use scale for ripple instead of width and height

---
 components/ripple/style.scss | 31 +++++++++++++++++--------------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/components/ripple/style.scss b/components/ripple/style.scss
index a25845fc0..45b567d0d 100644
--- a/components/ripple/style.scss
+++ b/components/ripple/style.scss
@@ -7,10 +7,7 @@
   pointer-events: none;
   background-color: currentColor;
   border-radius: 50%;
-  transform-style: preserve-3d;
-  transform: translate3d(-50%, -50%, 0);
-  backface-visibility: hidden;
-  will-change: width, height, opacity;
+  transform-origin: 50% 50%;
 }
 
 .wrapper {
@@ -25,18 +22,24 @@
 
 .normal {
   @extend %ripple;
-  width: 0;
-  height: 0;
-  opacity: $ripple-final-opacity;
-  transition-timing-function: $animation-curve-linear-out-slow-in;
   transition-duration: $ripple-duration;
-  transition-property: height, width;
-  &:not(.active) {
+
+  &.restarting {
+    transform: translate3d(-50%, -50%, 0) scale(0);
+    transition-property: none;
+    opacity: $ripple-final-opacity;
+  }
+
+  &.active {
+    transform: translate3d(-50%, -50%, 0) scale(1);
+    transition-property: transform;
+    opacity: $ripple-final-opacity;
+  }
+
+  &:not(.active):not(.restarting) {
+    transform: translate3d(-50%, -50%, 0) scale(1);
+    transition-property: opacity, transform;
     opacity: 0;
-    transition-property: height, width, opacity;
-    &.restarting {
-      transition-property: none;
-    }
   }
 }
 

From 7fc2617fa9794c1c18bad1f5ef96c7cf43d2851a Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Sat, 21 Nov 2015 11:24:14 +0700
Subject: [PATCH 0127/1024] Use milliseconds for timeout.

---
 components/snackbar/index.jsx                                   | 2 +-
 components/snackbar/readme.md                                   | 2 +-
 .../layout/main/modules/examples/snackbar_example_1.txt         | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/snackbar/index.jsx b/components/snackbar/index.jsx
index 4e7b9cec7..75ca7c197 100644
--- a/components/snackbar/index.jsx
+++ b/components/snackbar/index.jsx
@@ -21,7 +21,7 @@ class Snackbar extends React.Component {
     if (this.props.active && this.props.timeout) {
       setTimeout(() => {
         this.props.onTimeout(event, this);
-      }, this.props.timeout * 1000);
+      }, this.props.timeout);
     }
   }
 
diff --git a/components/snackbar/readme.md b/components/snackbar/readme.md
index 80dbde85e..cb33e64f3 100644
--- a/components/snackbar/readme.md
+++ b/components/snackbar/readme.md
@@ -44,5 +44,5 @@ class SnackbarTest extends React.Component {
 | `label` | `String`  |       | Text to display in the content.|
 | `onClick` | `Function`  |       | Callback function that will be called when the button action is clicked.|
 | `onTimeout` | `Function`  |       | Callback function when finish the set timeout.|
-| `timeout` | `Number`  |       | Amount of time after the Snackbar will be automatically hidden.|
+| `timeout` | `Number`  |       | Amount of time in milliseconds after the Snackbar will be automatically hidden.|
 | `type` | `String`  |       | Indicates the action type. Can be `accept`, `warning` or `cancel`|
diff --git a/docs/app/components/layout/main/modules/examples/snackbar_example_1.txt b/docs/app/components/layout/main/modules/examples/snackbar_example_1.txt
index e2a4a96cf..bd1d7b455 100644
--- a/docs/app/components/layout/main/modules/examples/snackbar_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/snackbar_example_1.txt
@@ -26,7 +26,7 @@ class SnackbarTest extends React.Component {
           active={this.state.active}
           icon='question-answer'
           label='Snackbar action cancel'
-          timeout={2}
+          timeout={2000}
           onClick={this.handleSnackbarClick}
           onTimeout={this.handleSnackbarTimeout}
           type='cancel'

From ef6bd0899d43d3a76bee96e6c25b23bdf55ff459 Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Sat, 21 Nov 2015 11:27:33 +0700
Subject: [PATCH 0128/1024] New property delay in milliseconds.

---
 components/button/index.jsx                   |  5 ++--
 components/button/readme.md                   |  1 +
 components/input/index.jsx                    |  4 ++-
 components/input/readme.md                    |  2 ++
 components/tooltip/index.jsx                  | 25 +++++++++++--------
 components/tooltip/readme.md                  |  1 +
 .../modules/examples/tooltip_example_1.txt    |  4 +--
 spec/components/tooltip.jsx                   |  8 +++---
 8 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/components/button/index.jsx b/components/button/index.jsx
index 31fde0e6f..5c0533e25 100644
--- a/components/button/index.jsx
+++ b/components/button/index.jsx
@@ -21,6 +21,7 @@ class Button extends React.Component {
     ripple: React.PropTypes.bool,
     toggle: React.PropTypes.bool,
     tooltip: React.PropTypes.string,
+    tooltipDelay: React.PropTypes.number,
     type: React.PropTypes.string
   };
 
@@ -51,7 +52,7 @@ class Button extends React.Component {
 
   render () {
     const {accent, flat, floating, href, icon, label, loading, mini,
-           primary, raised, ripple, toggle, tooltip, ...others} = this.props;
+           primary, raised, ripple, toggle, tooltip, tooltipDelay, ...others} = this.props;
     const element = href ? 'a' : 'button';
     const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
     const shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : toggle ? 'toggle' : 'flat';
@@ -71,7 +72,7 @@ class Button extends React.Component {
 
     return React.createElement(element, props,
       ripple ? <Ripple ref='ripple' loading={loading}/> : null,
-      tooltip ? <Tooltip className={style.tooltip} label={tooltip}/> : null,
+      tooltip ? <Tooltip className={style.tooltip} delay={tooltipDelay} label={tooltip}/> : null,
       icon ? <FontIcon className={style.icon} value={icon}/> : null,
       label ? label : this.props.children
     );
diff --git a/components/button/readme.md b/components/button/readme.md
index 0d73910da..9e77ee295 100644
--- a/components/button/readme.md
+++ b/components/button/readme.md
@@ -51,6 +51,7 @@ const TestButtons = () => (
 | `ripple`  | `Boolean`  | `true`    | If true, component will have a ripple effect on click.|
 | `toggle`   | `Boolean`  | `false` | If true, the button will have a toggle icon look. |
 | `tooptip`   | `String`  |  | The value will be shown as a tooltip when the button is hovered. |
+| `tooltipDelay`     | `Number`  |  | Amount of time in milliseconds before the tooltip is visible.|
 
 By default it will have neutral colors and a flat aspect even though the `flat` property is `false` by default. Also, some properties exclude others, for example a button cannot be `flat` and `raised` at the same time. 
 
diff --git a/components/input/index.jsx b/components/input/index.jsx
index aa8cbed02..24fee2369 100644
--- a/components/input/index.jsx
+++ b/components/input/index.jsx
@@ -18,6 +18,8 @@ class Input extends React.Component {
     onFocus: React.PropTypes.func,
     onKeyPress: React.PropTypes.func,
     required: React.PropTypes.bool,
+    tooltip: React.PropTypes.string,
+    tooltipDelay: React.PropTypes.number,
     type: React.PropTypes.string,
     value: React.PropTypes.any
   };
@@ -68,7 +70,7 @@ class Input extends React.Component {
         <span className={style.bar}></span>
         { this.props.label ? <label className={labelClassName}>{this.props.label}</label> : null }
         { this.renderUnderline() }
-        { this.props.tooltip ? <Tooltip label={this.props.tooltip}/> : null }
+        { this.props.tooltip ? <Tooltip label={this.props.tooltip} delay={this.props.tooltipDelay}/> : null }
       </div>
     );
   }
diff --git a/components/input/readme.md b/components/input/readme.md
index 11afe733f..a79e02d77 100644
--- a/components/input/readme.md
+++ b/components/input/readme.md
@@ -45,6 +45,8 @@ class InputTest extends React.Component {
 | `onFocus`       | `Function`      |                 | Callback function that is fired when components is focused.|
 | `onKeyPress`    | `Function`      |                 | Callback function that is fired when a key is pressed.|
 | `required`      | `Boolean`       | `false`         | If true, the html input has a required value.|
+| `tooptip`   | `String`  |  | The value will be shown as a tooltip when the button is hovered. |
+| `tooltipDelay`     | `Number`  |  | Amount of time in milliseconds before the tooltip is visible.|
 | `type`          | `String`        | `text`        | Type of the input element. It can be a valid HTML5 input type|
 | `value`         | `String`        |              | Current value of the input element.|
 
diff --git a/components/tooltip/index.jsx b/components/tooltip/index.jsx
index 67861d219..e223431a5 100644
--- a/components/tooltip/index.jsx
+++ b/components/tooltip/index.jsx
@@ -7,11 +7,13 @@ const HIDE_TIMEOUT = 100;
 class Tooltip extends React.Component {
   static propTypes = {
     className: React.PropTypes.string,
+    delay: React.PropTypes.number,
     label: React.PropTypes.string
   };
 
   static defaultProps = {
-    className: ''
+    className: '',
+    delay: 0
   };
 
   state = {
@@ -30,17 +32,18 @@ class Tooltip extends React.Component {
   };
 
   handleParentMouseOver = () => {
-    if (this.deferredHide) clearTimeout(this.deferredHide);
+    setTimeout(() => {
+      if (this.deferredHide) clearTimeout(this.deferredHide);
+      const node = ReactDOM.findDOMNode(this);
+      const parent = node.parentNode;
+      const parentStyle = parent.currentStyle || window.getComputedStyle(parent);
+      const offset = parseFloat(parentStyle['margin-bottom']) + parseFloat(parentStyle['padding-bottom']);
+      const position = parent.getBoundingClientRect();
 
-    const node = ReactDOM.findDOMNode(this);
-    const parent = node.parentNode;
-    const parentStyle = parent.currentStyle || window.getComputedStyle(parent);
-    const offset = parseFloat(parentStyle['margin-bottom']) + parseFloat(parentStyle['padding-bottom']);
-    const position = parent.getBoundingClientRect();
-
-    node.style.top = `${position.height - offset}px`;
-    node.style.left = `${parseInt((position.width / 2) - (node.offsetWidth / 2))}px`;
-    if (!this.state.active) this.setState({ active: true});
+      node.style.top = `${position.height - offset}px`;
+      node.style.left = `${parseInt((position.width / 2) - (node.offsetWidth / 2))}px`;
+      if (!this.state.active) this.setState({ active: true});
+    }, this.props.delay);
   };
 
   handleParentMouseOut = () => {
diff --git a/components/tooltip/readme.md b/components/tooltip/readme.md
index a2dff7fbc..01d01e335 100644
--- a/components/tooltip/readme.md
+++ b/components/tooltip/readme.md
@@ -20,4 +20,5 @@ const TooltipTest = () => (
 | Name      | Type      | Default         | Description|
 |:-----|:-----|:-----|:-----|
 | `className` | `String`  | `''` | Set a class to style the Component.|
+| `delay`     | `Number`  |  | Amount of time in miliseconds before the tooltip is visible.|
 | `label`     | `String`  |  | The text string to use for the tooltip.|
diff --git a/docs/app/components/layout/main/modules/examples/tooltip_example_1.txt b/docs/app/components/layout/main/modules/examples/tooltip_example_1.txt
index e50b1547b..b974394c3 100644
--- a/docs/app/components/layout/main/modules/examples/tooltip_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/tooltip_example_1.txt
@@ -1,7 +1,7 @@
 const TooltipTest = () => (
   <div>
-    <p>Lorem ipsum dolor sit amet, <strong>consectetur<Tooltip label='This is a auto show tooltip' /></strong> adipiscing elit.</p>
-    <Button label='Button with tooltip' raised accent tooltip='This is a tooltip by property' />
+    <p>Lorem ipsum dolor sit amet, <strong>consectetur<Tooltip label='This is a auto show tooltip' delay={500}/></strong> adipiscing elit.</p>
+    <Button label='Button with tooltip' raised accent tooltip='This is a tooltip by property' tooltipDelay={100}/>
   </div>
 );
 
diff --git a/spec/components/tooltip.jsx b/spec/components/tooltip.jsx
index dd4c5011c..a45b6f790 100644
--- a/spec/components/tooltip.jsx
+++ b/spec/components/tooltip.jsx
@@ -7,12 +7,12 @@ const TooltipTest = () => (
   <section>
     <h5>Tooltip</h5>
     <p>Give information on :hover</p>
-    <Button label='Bookmark' icon='bookmark' raised primary tooltip='Bookmark Tooltip' />
-    <Button icon='add' floating accent tooltip='Floating Tooltip' />
+    <Button label='Bookmark' icon='bookmark' raised primary tooltip='Bookmark Tooltip' tooltipDelay={1000} />
+    <Button icon='add' floating accent tooltip='Floating Tooltip'/>
     <Button icon='add' floating disabled tooltip='Floating can not be shown' />
-    <Input tooltip='lorem ipsum...'/>
+    <Input tooltip='lorem ipsum...' />
     <p>
-      Lorem ipsum dolor sit amet, <strong>consectetur<Tooltip label='This is a auto show tooltip' /></strong> adipiscing elit.
+      Lorem ipsum dolor sit amet, <strong>consectetur<Tooltip label='This is a auto show tooltip' delay={300} /></strong> adipiscing elit.
     </p>
   </section>
 );

From 3507bcf5f473966351d309ca91462760f4e1c513 Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Sat, 21 Nov 2015 11:29:48 +0700
Subject: [PATCH 0129/1024] 0.12.12 release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2b7136840..6b99c17df 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-toolbox",
-  "version": "0.12.11",
+  "version": "0.12.12",
   "homepage": "www.react-toolbox.com",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "author": "React Toolbox Team (http://github.com/react-toolbox)",

From ac5501b9a5fbfa76e63f762f95482b704c091e9f Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 21 Nov 2015 12:23:24 +0100
Subject: [PATCH 0130/1024] Improve ripple performance. Fixes #142

---
 components/_mixins.scss       | 11 ++++-------
 components/button/index.jsx   |  2 +-
 components/button/style.scss  |  8 +++-----
 components/commons.scss       |  6 +-----
 components/ripple/index.jsx   | 30 ++++++++++++++++++++----------
 components/ripple/style.scss  | 16 +++++-----------
 components/tooltip/style.scss |  1 +
 components/utils/prefixer.js  |  4 ++--
 8 files changed, 37 insertions(+), 41 deletions(-)

diff --git a/components/_mixins.scss b/components/_mixins.scss
index da0db388d..7a800dbb0 100644
--- a/components/_mixins.scss
+++ b/components/_mixins.scss
@@ -1,4 +1,4 @@
-//-- Typography
+// scss-lint:disable VendorPrefix
 @mixin typo-preferred-font($use-preferred: true) {
   @if $use-preferred {
     font-family: $preferred-font;
@@ -262,21 +262,18 @@
 @mixin ripple-loading($name, $width, $height, $opacity: 0.3) {
   @keyframes #{$name} {
     0% {
-      width: 0;
-      height: 0;
       opacity: $opacity;
+      transform: translate3d(-50%, -50%, 0) scale(0);
     }
 
     95% {
-      width: $width;
-      height: $height;
       opacity: 0;
+      transform: translate3d(-50%, -50%, 0) scale(1);
     }
 
     100% {
-      width: 0;
-      height: 0;
       opacity: 0;
+      transform: translate3d(-50%, -50%, 0) scale(0);
     }
   }
 }
diff --git a/components/button/index.jsx b/components/button/index.jsx
index 31fde0e6f..1ac167a19 100644
--- a/components/button/index.jsx
+++ b/components/button/index.jsx
@@ -70,7 +70,7 @@ class Button extends React.Component {
     };
 
     return React.createElement(element, props,
-      ripple ? <Ripple ref='ripple' loading={loading}/> : null,
+      ripple ? <Ripple ref='ripple' loading={loading} /> : null,
       tooltip ? <Tooltip className={style.tooltip} label={tooltip}/> : null,
       icon ? <FontIcon className={style.icon} value={icon}/> : null,
       label ? label : this.props.children
diff --git a/components/button/style.scss b/components/button/style.scss
index a8cb43344..a84c60490 100644
--- a/components/button/style.scss
+++ b/components/button/style.scss
@@ -3,6 +3,7 @@
 @import "http://github.com/config";
 
 %button {
+  @include typo-button();
   position: relative;
   display: inline-block;
   height: $button-height;
@@ -24,7 +25,6 @@
     border: 0;
   }
   > span:not(.tooltip) {
-    @include typo-button();
     display: inline-block;
     line-height: $button-height;
     vertical-align: middle;
@@ -41,7 +41,7 @@
     pointer-events: none;
   }
   [data-react-toolbox="ripple"] {
-    overflow: hidden;
+    @include rounded-overflow();
   }
 }
 
@@ -97,10 +97,8 @@
   }
   .icon {
     font-size: 120%;
-    vertical-align: middle;
-  }
-  .icon {
     line-height: $button-height;
+    vertical-align: middle;
   }
   [data-react-toolbox="ripple"] {
     border-radius: 50%;
diff --git a/components/commons.scss b/components/commons.scss
index 32e4626f8..d8c4b1c8b 100644
--- a/components/commons.scss
+++ b/components/commons.scss
@@ -1,13 +1,9 @@
 @import "http://github.com/base";
+@import "http://github.com/~normalize.css";
 
-$import-normalize: true !default;
 $import-font: true !default;
 $import-flex-attributes: false !default;
 
-@if $import-normalize == true {
-  @import "http://github.com/~normalize.css";
-}
-
 @if $import-font == true {
   @import url(http://github.com/$font-roboto-url);
 }
diff --git a/components/ripple/index.jsx b/components/ripple/index.jsx
index 297eedbc9..cf2d96f24 100644
--- a/components/ripple/index.jsx
+++ b/components/ripple/index.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import prefixer from '../utils/prefixer';
 import style from './style';
 
 class Ripple extends React.Component {
@@ -25,32 +26,41 @@ class Ripple extends React.Component {
     width: null
   };
 
-  handleEnd = (touch = false) => {
-    document.removeEventListener(touch ? 'touchend' : 'mouseup', this.handleEnd);
+  handleEnd = () => {
+    document.removeEventListener(this.touch ? 'touchend' : 'mouseup', this.handleEnd);
     this.setState({active: false});
   };
 
-  start = ({ pageX, pageY }, touch = false) => {
-    document.addEventListener(touch ? 'touchend' : 'mouseup', this.handleEnd.bind(this, touch));
+  start = ({pageX, pageY}, touch = false) => {
+    this.touch = touch;
+    document.addEventListener(this.touch ? 'touchend' : 'mouseup', this.handleEnd);
     const {top, left, width} = this._getDescriptor(pageX, pageY);
-    this.setState({active: false, restarting: true, width: 0}, () => {
+    this.setState({active: false, restarting: true, top, left, width}, () => {
       this.refs.ripple.offsetWidth;  //eslint-disable-line no-unused-expressions
-      this.setState({active: true, restarting: false, top, left, width});
+      this.setState({active: true, restarting: false});
     });
   };
 
   _getDescriptor (pageX, pageY) {
-    const { left, top, height, width } = ReactDOM.findDOMNode(this).getBoundingClientRect();
+    const {left, top, height, width} = ReactDOM.findDOMNode(this).getBoundingClientRect();
     return {
-      left: this.props.centered ? width / 2 : pageX - left + window.scrollX,
-      top: this.props.centered ? height / 2 : pageY - top + window.scrollY,
+      left: this.props.centered ? 0 : pageX - left - width / 2 + window.scrollX,
+      top: this.props.centered ? 0 : pageY - top - height / 2 + window.scrollY,
       width: width * this.props.spread
     };
   }
 
   render () {
     const { left, top, width } = this.state;
-    const rippleStyle = {left, top, width, height: width};
+    const scale = this.state.restarting ? 0 : 1;
+    let rippleStyle = {width, height: width};
+
+    if (!this.props.loading) {
+      rippleStyle = prefixer({
+        transform: `translate3d(${-width / 2 + left}px, ${-width / 2 + top}px, 0) scale(${scale})`
+      }, rippleStyle);
+    }
+
     let className = style[this.props.loading ? 'loading' : 'normal'];
     if (this.state.active) className += ` ${style.active}`;
     if (this.state.restarting) className += ` ${style.restarting}`;
diff --git a/components/ripple/style.scss b/components/ripple/style.scss
index 45b567d0d..bddf5afe8 100644
--- a/components/ripple/style.scss
+++ b/components/ripple/style.scss
@@ -3,6 +3,8 @@
 
 %ripple {
   position: absolute;
+  top: 50%;
+  left: 50%;
   z-index: $z-index-high;
   pointer-events: none;
   background-color: currentColor;
@@ -23,31 +25,23 @@
 .normal {
   @extend %ripple;
   transition-duration: $ripple-duration;
-
   &.restarting {
-    transform: translate3d(-50%, -50%, 0) scale(0);
-    transition-property: none;
     opacity: $ripple-final-opacity;
+    transition-property: none;
   }
-
   &.active {
-    transform: translate3d(-50%, -50%, 0) scale(1);
-    transition-property: transform;
     opacity: $ripple-final-opacity;
+    transition-property: transform;
   }
-
   &:not(.active):not(.restarting) {
-    transform: translate3d(-50%, -50%, 0) scale(1);
-    transition-property: opacity, transform;
     opacity: 0;
+    transition-property: opacity, transform;
   }
 }
 
 .loading {
   @extend %ripple;
   @include ripple-loading(ripple, $ripple-size, $ripple-size);
-  top: 50%;
-  left: 50%;
   width: $ripple-size;
   height: $ripple-size;
   opacity: $ripple-final-opacity;
diff --git a/components/tooltip/style.scss b/components/tooltip/style.scss
index bc1b1a708..6b657c28a 100644
--- a/components/tooltip/style.scss
+++ b/components/tooltip/style.scss
@@ -14,6 +14,7 @@
   line-height: $font-size-small;
   color: $tooltip-color;
   text-align: center;
+  text-transform: none;
   background: $tooltip-background;
   border-radius: $tooltip-border-radius;
   transform: scale(0);
diff --git a/components/utils/prefixer.js b/components/utils/prefixer.js
index 1f3eeb13a..17d6df655 100644
--- a/components/utils/prefixer.js
+++ b/components/utils/prefixer.js
@@ -25,8 +25,8 @@ function addPrefixesTo (style, property, value) {
   return style;
 }
 
-function prefixer (style) {
-  const _style = {};
+function prefixer (style, defaultValue = {}) {
+  const _style = defaultValue;
   for (const property in style) {
     _style[property] = style[property];
     if (properties[property]) {

From 1bfd44e60f6d24f0ca691037e26f4b096cc5275b Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 21 Nov 2015 12:56:57 +0100
Subject: [PATCH 0131/1024] Update eslint and plugins and add some rules to
 make it pass

---
 .eslintrc                                  | 5 ++++-
 components/button/index.jsx                | 5 +++--
 components/dropdown/index.jsx              | 2 +-
 components/slider/__tests__/index.spec.jsx | 2 +-
 docs/app/components/preview/index.jsx      | 4 ++--
 package.json                               | 9 +++++----
 6 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 32c6d3f36..deff2827e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -17,6 +17,7 @@
   "parser": "babel-eslint",
 
   "plugins": [
+    "babel",
     "react"
   ],
 
@@ -168,6 +169,7 @@
     "operator-linebreak": [2, "after"],
     "padded-blocks": [0],
     "prefer-const": [2],
+    "prefer-spread": [2],
     "quote-props": [0],
     "radix": [0],
     "semi": [2],
@@ -210,6 +212,7 @@
     }],
     "react/jsx-uses-react": [2],
     "react/jsx-uses-vars": [2],
-    "react/react-in-jsx-scope": [2]
+    "react/react-in-jsx-scope": [2],
+    "babel/object-shorthand": [2]
   }
 }
diff --git a/components/button/index.jsx b/components/button/index.jsx
index 5c0533e25..e4dd1706e 100644
--- a/components/button/index.jsx
+++ b/components/button/index.jsx
@@ -51,8 +51,9 @@ class Button extends React.Component {
   };
 
   render () {
-    const {accent, flat, floating, href, icon, label, loading, mini,
-           primary, raised, ripple, toggle, tooltip, tooltipDelay, ...others} = this.props;
+    const {accent, flat, floating, href, icon, label,
+           loading, mini, primary, raised, ripple, toggle,
+           tooltip, tooltipDelay, ...others} = this.props;  //eslint-disable-line no-redeclare
     const element = href ? 'a' : 'button';
     const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
     const shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : toggle ? 'toggle' : 'flat';
diff --git a/components/dropdown/index.jsx b/components/dropdown/index.jsx
index c2d435c75..8e2c929cf 100644
--- a/components/dropdown/index.jsx
+++ b/components/dropdown/index.jsx
@@ -28,7 +28,7 @@ class Dropdown extends React.Component {
     const client = event.target.getBoundingClientRect();
     const screen_height = window.innerHeight || document.documentElement.offsetHeight;
     const up = this.props.auto ? client.top > ((screen_height / 2) + client.height) : false;
-    this.setState({active: true, up: up});
+    this.setState({active: true, up});
   };
 
   handleSelect = (item) => {
diff --git a/components/slider/__tests__/index.spec.jsx b/components/slider/__tests__/index.spec.jsx
index e5e3d85e3..07011034a 100644
--- a/components/slider/__tests__/index.spec.jsx
+++ b/components/slider/__tests__/index.spec.jsx
@@ -103,7 +103,7 @@ describe('Slider', function () {
   describe('#events', function () {
     beforeEach(function () {
       onChange = sinon.spy();
-      props = { min: -500, max: 500, onChange: onChange };
+      props = { min: -500, max: 500, onChange };
       state = { sliderStart: 0, sliderLength: 1000 };
       slider = utils.renderComponent(Slider, props, state);
       slider.handleResize = (event, callback) => { callback(); };
diff --git a/docs/app/components/preview/index.jsx b/docs/app/components/preview/index.jsx
index d1badd056..f8e0a52d8 100644
--- a/docs/app/components/preview/index.jsx
+++ b/docs/app/components/preview/index.jsx
@@ -39,7 +39,7 @@ const Preview = React.createClass({
 
   setTimeout () {
     clearTimeout(this.timeoutID);
-    this.timeoutID = setTimeout.apply(null, arguments);
+    this.timeoutID = setTimeout(...arguments);
   },
 
   compileCode () {
@@ -72,7 +72,7 @@ const Preview = React.createClass({
       const compiledCode = this.compileCode();
 
       /*eslint-disable no-eval*/
-      const Component = eval(compiledCode).apply(null, scope);
+      const Component = eval(compiledCode)(...scope);
       ReactDOM.render(Component, mountNode);
       if (this.state.error) {
         this.setState({error: null});
diff --git a/package.json b/package.json
index 6b99c17df..32a827a84 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-toolbox",
   "version": "0.12.12",
-  "homepage": "www.react-toolbox.com",
+  "homepage": "http://www.react-toolbox.com/",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "author": "React Toolbox Team (http://github.com/react-toolbox)",
   "contributors": [
@@ -53,15 +53,16 @@
     "autoprefixer": "^6.0.3",
     "babel": "^5.8.23",
     "babel-core": "^5.8.23",
-    "babel-eslint": "^4.1.3",
+    "babel-eslint": "^4.1.5",
     "babel-loader": "^5.3.2",
     "babel-plugin-react-transform": "^1.1.1",
     "core-js": "^1.2.6",
     "cpx": "^1.2.1",
     "cross-env": "^1.0.4",
     "css-loader": "^0.21.0",
-    "eslint": "^1.7.3",
-    "eslint-plugin-react": "^3.3.1",
+    "eslint": "^1.10.1",
+    "eslint-plugin-babel": "^2.1.1",
+    "eslint-plugin-react": "^3.10.0",
     "expect": "^1.8.0",
     "express": "^4.13.3",
     "extract-text-webpack-plugin": "^0.8.2",

From fb2909640df3dd786e88f382b610120650b075ff Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 21 Nov 2015 13:18:05 +0100
Subject: [PATCH 0132/1024] Add selectable property to table. Fixes #145

---
 components/table/head.jsx                        |  4 ++--
 components/table/index.jsx                       | 16 +++++++++++++---
 components/table/readme.md                       |  2 ++
 components/table/row.jsx                         |  3 ++-
 .../main/modules/examples/table_example_1.txt    |  1 +
 spec/components/table.jsx                        |  1 +
 6 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/components/table/head.jsx b/components/table/head.jsx
index 6cdb59294..e58962ad5 100644
--- a/components/table/head.jsx
+++ b/components/table/head.jsx
@@ -2,13 +2,13 @@ import React from 'react';
 import Checkbox from '../checkbox';
 import style from './style';
 
-const TableHead = ({model, onSelect, selected}) => {
+const TableHead = ({model, onSelect, selectable, selected}) => {
   let selectCell;
   const contentCells = Object.keys(model).map((key) => {
     return <th key={key}>{key}</th>;
   });
 
-  if (onSelect) {
+  if (selectable) {
     selectCell = (
       <th key='select' className={style.selectable}>
         <Checkbox onChange={onSelect} checked={selected} />
diff --git a/components/table/index.jsx b/components/table/index.jsx
index 36983bfcc..6290d0b81 100644
--- a/components/table/index.jsx
+++ b/components/table/index.jsx
@@ -10,6 +10,7 @@ class Table extends React.Component {
     model: React.PropTypes.object,
     onChange: React.PropTypes.func,
     onSelect: React.PropTypes.func,
+    selectable: React.PropTypes.bool,
     selected: React.PropTypes.array,
     source: React.PropTypes.array
   };
@@ -17,6 +18,7 @@ class Table extends React.Component {
   static defaultProps = {
     className: '',
     heading: true,
+    selectable: true,
     selected: [],
     source: []
   };
@@ -46,9 +48,16 @@ class Table extends React.Component {
 
   renderHead () {
     if (this.props.heading) {
-      const {model, selected, source} = this.props;
+      const {model, selected, source, selectable} = this.props;
       const isSelected = selected.length === source.length;
-      return <TableHead model={model} onSelect={this.handleFullSelect} selected={isSelected} />;
+      return (
+        <TableHead
+          model={model}
+          onSelect={this.handleFullSelect}
+          selectable={selectable}
+          selected={isSelected}
+        />
+      );
     }
   }
 
@@ -60,8 +69,9 @@ class Table extends React.Component {
           index={idx}
           key={idx}
           model={this.props.model}
-          onChange={this.props.onChange ? this.handleRowChange.bind(this, idx) : null}
+          onChange={this.handleRowChange.bind(this, idx)}
           onSelect={this.handleRowSelect.bind(this, idx)}
+          selectable={this.props.selectable}
           selected={this.props.selected.indexOf(idx) !== -1}
         />
       );
diff --git a/components/table/readme.md b/components/table/readme.md
index 349ce9af6..db3efa5be 100644
--- a/components/table/readme.md
+++ b/components/table/readme.md
@@ -39,6 +39,7 @@ class TableTest extends React.Component {
         model={UserModel}
         onChange={this.handleChange}
         onSelect={this.handleSelect}
+        selectable={true}
         selected={this.state.selected}
         source={this.state.source}
       />
@@ -56,5 +57,6 @@ class TableTest extends React.Component {
 | `model`         | `Object`      |                 | Object describing the data model that represents each object in the `source`.|
 | `onChange`      | `Function`    |                 | Callback function that is fired when an item in a row changes. If set, rows are editable. |
 | `onSelect`      | `Function`    |                 | Callback function invoked when the row selection changes.|
+| `selectable`    | `Bool`       | `true`           | If true, the header and each row will display a checkbox to allow the user to select them.|
 | `selected`    | `Array`       |                  | Array of indexes of the items in the source that should appear as selected.|
 | `source`    | `Array`       |                  | Array of objects representing each item to show.|
diff --git a/components/table/row.jsx b/components/table/row.jsx
index b0a0cd9d1..aaec7d813 100644
--- a/components/table/row.jsx
+++ b/components/table/row.jsx
@@ -8,6 +8,7 @@ class TableRow extends React.Component {
     data: React.PropTypes.object,
     onChange: React.PropTypes.func,
     onSelect: React.PropTypes.func,
+    selectable: React.PropTypes.bool,
     selected: React.PropTypes.bool
   };
 
@@ -17,7 +18,7 @@ class TableRow extends React.Component {
   };
 
   renderSelectCell () {
-    if (this.props.onSelect) {
+    if (this.props.selectable) {
       return (
         <td className={style.selectable}>
           <Checkbox checked={this.props.selected} onChange={this.props.onSelect} />
diff --git a/docs/app/components/layout/main/modules/examples/table_example_1.txt b/docs/app/components/layout/main/modules/examples/table_example_1.txt
index 2c0a30fff..6ca77f595 100644
--- a/docs/app/components/layout/main/modules/examples/table_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/table_example_1.txt
@@ -31,6 +31,7 @@ class TableTest extends React.Component {
         model={UserModel}
         onChange={this.handleChange}
         onSelect={this.handleSelect}
+        selectable={true}
         selected={this.state.selected}
         source={this.state.source}
       />
diff --git a/spec/components/table.jsx b/spec/components/table.jsx
index 4edb8bd0c..49682851a 100644
--- a/spec/components/table.jsx
+++ b/spec/components/table.jsx
@@ -40,6 +40,7 @@ class TableTest extends React.Component {
           model={UserModel}
           onChange={this.handleChange}
           onSelect={this.handleSelect}
+          selectable={true}
           selected={this.state.selected}
           source={this.state.source}
         />

From 364e270da1c1c3a3f77b1c998f519a03041c7b61 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 21 Nov 2015 14:26:17 +0100
Subject: [PATCH 0133/1024] Better imports organization. Fixes #140

---
 components/_mixins.scss                   |  5 --
 components/animations/index.js            |  8 +--
 components/autocomplete/index.jsx         |  4 +-
 components/button/style.scss              |  2 +-
 components/date_picker/calendar/index.jsx | 11 ++--
 components/date_picker/calendar/month.jsx | 11 ++--
 components/list/index.jsx                 | 14 ++---
 components/menu/index.jsx                 | 15 +++--
 components/menu/menu.jsx                  |  8 +--
 components/radio/index.jsx                |  8 +--
 components/slider/index.jsx               | 30 +++++-----
 components/snackbar/index.jsx             |  2 +-
 components/table/row.jsx                  |  2 +-
 components/tabs/index.jsx                 |  8 +--
 components/time_picker/clock/hand.jsx     | 24 ++++----
 components/time_picker/clock/hours.jsx    |  2 +-
 components/time_picker/clock/minutes.jsx  |  2 +-
 components/time_picker/index.jsx          |  2 +-
 components/utils/events.js                |  4 +-
 components/utils/index.js                 | 70 ++---------------------
 components/utils/prefixer.js              |  2 +-
 components/utils/testing.js               |  4 +-
 components/utils/time.js                  |  4 +-
 components/utils/utils.js                 | 60 +++++++++++++++++++
 spec/components/input.jsx                 |  2 +-
 spec/components/list.jsx                  |  2 +-
 spec/components/snackbar.jsx              | 15 ++---
 27 files changed, 159 insertions(+), 162 deletions(-)
 create mode 100644 components/utils/utils.js

diff --git a/components/_mixins.scss b/components/_mixins.scss
index 7a800dbb0..f67f01ac0 100644
--- a/components/_mixins.scss
+++ b/components/_mixins.scss
@@ -252,11 +252,6 @@
   transition-duration: $duration;
 }
 
-@mixin rounded-overflow() {
-  overflow: hidden;
-  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
-}
-
 // The frames are this way to prevent a flicker in Safari
 // See https://goo.gl/5luFDk
 @mixin ripple-loading($name, $width, $height, $opacity: 0.3) {
diff --git a/components/animations/index.js b/components/animations/index.js
index ccaa2b153..c4bac431c 100644
--- a/components/animations/index.js
+++ b/components/animations/index.js
@@ -1,4 +1,4 @@
-module.exports = {
-  SlideLeft: require('./slide-left'),
-  SlideRight: require('./slide-right')
-};
+import SlideLeft from './slide-left';
+import SlideRight from './slide-right';
+
+export default {SlideLeft, SlideRight};
diff --git a/components/autocomplete/index.jsx b/components/autocomplete/index.jsx
index e707fd6f9..604c20f2b 100644
--- a/components/autocomplete/index.jsx
+++ b/components/autocomplete/index.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Input from '../input';
+import events from '../utils/events';
 import style from './style';
-import utils from '../utils';
 
 const POSITION = {
   AUTO: 'auto',
@@ -129,7 +129,7 @@ class Autocomplete extends React.Component {
   }
 
   select (key, event) {
-    utils.events.pauseEvent(event);
+    events.pauseEvent(event);
     const values = this.values(this.props.value);
     this.handleChange([key, ...values.keys()]);
   }
diff --git a/components/button/style.scss b/components/button/style.scss
index a84c60490..8368d3286 100644
--- a/components/button/style.scss
+++ b/components/button/style.scss
@@ -41,7 +41,7 @@
     pointer-events: none;
   }
   [data-react-toolbox="ripple"] {
-    @include rounded-overflow();
+    overflow: hidden;
   }
 }
 
diff --git a/components/date_picker/calendar/index.jsx b/components/date_picker/calendar/index.jsx
index b3490911e..deaded3fd 100644
--- a/components/date_picker/calendar/index.jsx
+++ b/components/date_picker/calendar/index.jsx
@@ -4,7 +4,8 @@ import { SlideLeft, SlideRight } from '../../animations';
 import FontIcon from '../../font_icon';
 import Ripple from '../../ripple';
 import Month from './month';
-import utils from '../../utils';
+import time from '../../utils/time';
+import utils from '../../utils/utils';
 import style from './style';
 
 class Calendar extends React.Component {
@@ -40,11 +41,11 @@ class Calendar extends React.Component {
   }
 
   handleDayClick = (day) => {
-    this.props.onChange(utils.time.setDay(this.state.viewDate, day));
+    this.props.onChange(time.setDay(this.state.viewDate, day));
   };
 
   handleYearClick = (year) => {
-    const viewDate = utils.time.setYear(this.props.selectedDate, year);
+    const viewDate = time.setYear(this.props.selectedDate, year);
     this.setState({viewDate});
     this.props.onChange(viewDate);
   };
@@ -53,7 +54,7 @@ class Calendar extends React.Component {
     this.refs.rippleRight.start(event);
     this.setState({
       direction: 'right',
-      viewDate: utils.time.addMonths(this.state.viewDate, 1)
+      viewDate: time.addMonths(this.state.viewDate, 1)
     });
   };
 
@@ -61,7 +62,7 @@ class Calendar extends React.Component {
     this.refs.rippleLeft.start(event);
     this.setState({
       direction: 'left',
-      viewDate: utils.time.addMonths(this.state.viewDate, -1)
+      viewDate: time.addMonths(this.state.viewDate, -1)
     });
   };
 
diff --git a/components/date_picker/calendar/month.jsx b/components/date_picker/calendar/month.jsx
index e8bb5ae2c..091ae1871 100644
--- a/components/date_picker/calendar/month.jsx
+++ b/components/date_picker/calendar/month.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import utils from '../../utils';
+import time from '../../utils/time';
+import utils from '../../utils/utils';
 import Day from './day';
 import style from './style';
 
@@ -18,14 +19,14 @@ class Month extends React.Component {
 
   renderWeeks () {
     return utils.range(0, 7).map(i => {
-      return <span key={i}>{ utils.time.getFullDayOfWeek(i).charAt(0) }</span>;
+      return <span key={i}>{ time.getFullDayOfWeek(i).charAt(0) }</span>;
     });
   }
 
   renderDays () {
-    return utils.range(1, utils.time.getDaysInMonth(this.props.viewDate) + 1).map(i => {
+    return utils.range(1, time.getDaysInMonth(this.props.viewDate) + 1).map(i => {
       const date = new Date(this.props.viewDate.getFullYear(), this.props.viewDate.getMonth(), i);
-      const disabled = utils.time.dateOutOfRange(date, this.props.minDate, this.props.maxDate);
+      const disabled = time.dateOutOfRange(date, this.props.minDate, this.props.maxDate);
 
       return (
         <Day
@@ -44,7 +45,7 @@ class Month extends React.Component {
     return (
       <div className={style.month}>
         <span className={style.title}>
-          { utils.time.getFullMonth(this.props.viewDate)} { this.props.viewDate.getFullYear() }
+          { time.getFullMonth(this.props.viewDate)} { this.props.viewDate.getFullYear() }
         </span>
         <div className={style.week}>{ this.renderWeeks() }</div>
         <div className={style.days}>{ this.renderDays() }</div>
diff --git a/components/list/index.jsx b/components/list/index.jsx
index 124b4da22..28a413adf 100644
--- a/components/list/index.jsx
+++ b/components/list/index.jsx
@@ -1,7 +1,7 @@
-module.exports = {
-  List: require('./list'),
-  ListItem: require('./item'),
-  ListDivider: require('./divider'),
-  ListCheckbox: require('./checkbox'),
-  ListSubHeader: require('./subheader')
-};
+import List from './list';
+import ListItem from './item';
+import ListDivider from './divider';
+import ListCheckbox from './checkbox';
+import ListSubHeader from './subheader';
+
+export default {List, ListItem, ListDivider, ListCheckbox, ListSubHeader};
diff --git a/components/menu/index.jsx b/components/menu/index.jsx
index 42a2075ae..d26b5a90e 100644
--- a/components/menu/index.jsx
+++ b/components/menu/index.jsx
@@ -1,6 +1,11 @@
-module.exports = {
-  Menu: require('./menu'),
-  MenuItem: require('./menu_item'),
-  MenuDivider: require('./menu_divider'),
-  IconMenu: require('./icon_menu')
+import Menu from './menu';
+import MenuItem from './menu_item';
+import MenuDivider from './menu_divider';
+import IconMenu from './icon_menu';
+
+export default {
+  Menu,
+  MenuItem,
+  MenuDivider,
+  IconMenu
 };
diff --git a/components/menu/menu.jsx b/components/menu/menu.jsx
index 5eb369379..9157067bd 100644
--- a/components/menu/menu.jsx
+++ b/components/menu/menu.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import MenuItem from './menu_item';
-import utils from '../utils';
+import { events, utils } from '../utils';
 import style from './style.menu';
 
 const POSITION = {
@@ -49,7 +49,7 @@ class Menu extends React.Component {
   componentDidUpdate (prevProps, prevState) {
     if (prevState.active && !this.state.active) {
       if (this.props.onHide) this.props.onHide();
-      utils.events.removeEventsFromDocument({click: this.handleDocumentClick});
+      events.removeEventsFromDocument({click: this.handleDocumentClick});
     } else if (!prevState.active && this.state.active && this.props.onShow) {
       this.props.onShow();
     }
@@ -64,7 +64,7 @@ class Menu extends React.Component {
 
   componentWillUpdate (prevState, nextState) {
     if (!prevState.active && nextState.active) {
-      utils.events.addEventsToDocument({click: this.handleDocumentClick});
+      events.addEventsToDocument({click: this.handleDocumentClick});
     }
   }
 
@@ -82,7 +82,7 @@ class Menu extends React.Component {
   }
 
   handleDocumentClick = (event) => {
-    if (this.state.active && !utils.events.targetIsDescendant(event, ReactDOM.findDOMNode(this))) {
+    if (this.state.active && !events.targetIsDescendant(event, ReactDOM.findDOMNode(this))) {
       this.setState({active: false, rippled: false});
     }
   };
diff --git a/components/radio/index.jsx b/components/radio/index.jsx
index 34176952d..9e887e90f 100644
--- a/components/radio/index.jsx
+++ b/components/radio/index.jsx
@@ -1,4 +1,4 @@
-module.exports = {
-  RadioButton: require('./radio_button'),
-  RadioGroup: require('./radio_group')
-};
+import RadioButton from './radio_button';
+import RadioGroup from './radio_group';
+
+export default {RadioButton, RadioGroup};
diff --git a/components/slider/index.jsx b/components/slider/index.jsx
index 1fbe6d699..e58e93595 100644
--- a/components/slider/index.jsx
+++ b/components/slider/index.jsx
@@ -1,7 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import style from './style';
-import utils from '../utils';
+import events from '../utils/events';
+import prefixer from '../utils/prefixer';
+import utils from '../utils/utils';
 import ProgressBar from '../progress_bar';
 import Input from '../input';
 
@@ -83,14 +85,14 @@ class Slider extends React.Component {
 
   handleMouseDown = (event) => {
     if (this.state.inputFocused) this.refs.input.blur();
-    utils.events.addEventsToDocument(this.getMouseEventMap());
-    this.start(utils.events.getMousePosition(event));
-    utils.events.pauseEvent(event);
+    events.addEventsToDocument(this.getMouseEventMap());
+    this.start(events.getMousePosition(event));
+    events.pauseEvent(event);
   };
 
   handleMouseMove = (event) => {
-    utils.events.pauseEvent(event);
-    this.move(utils.events.getMousePosition(event));
+    events.pauseEvent(event);
+    this.move(events.getMousePosition(event));
   };
 
   handleMouseUp = () => {
@@ -104,11 +106,11 @@ class Slider extends React.Component {
   };
 
   handleSliderBlur = () => {
-    utils.events.removeEventsFromDocument(this.getKeyboardEvents());
+    events.removeEventsFromDocument(this.getKeyboardEvents());
   };
 
   handleSliderFocus = () => {
-    utils.events.addEventsToDocument(this.getKeyboardEvents());
+    events.addEventsToDocument(this.getKeyboardEvents());
   };
 
   handleTouchEnd = () => {
@@ -116,14 +118,14 @@ class Slider extends React.Component {
   };
 
   handleTouchMove = (event) => {
-    this.move(utils.events.getTouchPosition(event));
+    this.move(events.getTouchPosition(event));
   };
 
   handleTouchStart = (event) => {
     if (this.state.inputFocused) this.refs.input.blur();
-    this.start(utils.events.getTouchPosition(event));
-    utils.events.addEventsToDocument(this.getTouchEventMap());
-    utils.events.pauseEvent(event);
+    this.start(events.getTouchPosition(event));
+    events.addEventsToDocument(this.getTouchEventMap());
+    events.pauseEvent(event);
   };
 
   addToValue (increment) {
@@ -153,7 +155,7 @@ class Slider extends React.Component {
   }
 
   end (revents) {
-    utils.events.removeEventsFromDocument(revents);
+    events.removeEventsFromDocument(revents);
     this.setState({ pressed: false });
   }
 
@@ -224,7 +226,7 @@ class Slider extends React.Component {
   }
 
   render () {
-    const knobStyles = utils.prefixer({transform: `translateX(${this.knobOffset()}px)`});
+    const knobStyles = prefixer({transform: `translateX(${this.knobOffset()}px)`});
     let className = this.props.className;
     if (this.props.editable) className += ` ${style.editable}`;
     if (this.props.pinned) className += ` ${style.pinned}`;
diff --git a/components/snackbar/index.jsx b/components/snackbar/index.jsx
index 75ca7c197..4515cb0f1 100644
--- a/components/snackbar/index.jsx
+++ b/components/snackbar/index.jsx
@@ -20,7 +20,7 @@ class Snackbar extends React.Component {
   componentDidUpdate () {
     if (this.props.active && this.props.timeout) {
       setTimeout(() => {
-        this.props.onTimeout(event, this);
+        this.props.onTimeout();
       }, this.props.timeout);
     }
   }
diff --git a/components/table/row.jsx b/components/table/row.jsx
index aaec7d813..dd8376959 100644
--- a/components/table/row.jsx
+++ b/components/table/row.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import Checkbox from '../checkbox';
-import utils from '../utils';
+import utils from '../utils/utils';
 import style from './style';
 
 class TableRow extends React.Component {
diff --git a/components/tabs/index.jsx b/components/tabs/index.jsx
index 1121fce60..42cc63beb 100644
--- a/components/tabs/index.jsx
+++ b/components/tabs/index.jsx
@@ -1,4 +1,4 @@
-module.exports = {
-  Tabs: require('./tabs'),
-  Tab: require('./tab')
-};
+import Tabs from './tabs';
+import Tab from './tab';
+
+export default { Tabs, Tab };
diff --git a/components/time_picker/clock/hand.jsx b/components/time_picker/clock/hand.jsx
index 334d8a895..e708560df 100644
--- a/components/time_picker/clock/hand.jsx
+++ b/components/time_picker/clock/hand.jsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import style from './style';
-import utils from '../../utils';
+import events from '../../utils/events';
+import prefixer from '../../utils/prefixer';
+import utils from '../../utils/utils';
 
 class Hand extends React.Component {
   static propTypes = {
@@ -40,11 +42,11 @@ class Hand extends React.Component {
   }
 
   handleMouseMove = (event) => {
-    this.move(utils.events.getMousePosition(event));
+    this.move(events.getMousePosition(event));
   };
 
   handleTouchMove = (event) => {
-    this.move(utils.events.getTouchPosition(event));
+    this.move(events.getTouchPosition(event));
   };
 
   handleMouseUp = () => {
@@ -56,14 +58,14 @@ class Hand extends React.Component {
   };
 
   mouseStart (event) {
-    utils.events.addEventsToDocument(this.getMouseEventMap());
-    this.move(utils.events.getMousePosition(event));
+    events.addEventsToDocument(this.getMouseEventMap());
+    this.move(events.getMousePosition(event));
   }
 
   touchStart (event) {
-    utils.events.addEventsToDocument(this.getTouchEventMap());
-    this.move(utils.events.getTouchPosition(event));
-    utils.events.pauseEvent(event);
+    events.addEventsToDocument(this.getTouchEventMap());
+    this.move(events.getTouchPosition(event));
+    events.pauseEvent(event);
   }
 
   getPositionRadius (position) {
@@ -80,9 +82,9 @@ class Hand extends React.Component {
     return utils.angle360FromPositions(this.props.origin.x, this.props.origin.y, position.x, position.y);
   }
 
-  end (events) {
+  end (evts) {
     if (this.props.onMoved) this.props.onMoved();
-    utils.events.removeEventsFromDocument(events);
+    events.removeEventsFromDocument(evts);
   }
 
   move (position) {
@@ -93,7 +95,7 @@ class Hand extends React.Component {
 
   render () {
     const className = `${style.hand} ${this.props.className}`;
-    const handStyle = utils.prefixer({
+    const handStyle = prefixer({
       height: this.props.length - this.state.knobWidth / 2,
       transform: `rotate(${this.props.angle}deg)`
     });
diff --git a/components/time_picker/clock/hours.jsx b/components/time_picker/clock/hours.jsx
index f380ba9fe..7caa871cd 100644
--- a/components/time_picker/clock/hours.jsx
+++ b/components/time_picker/clock/hours.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import utils from '../../utils';
+import utils from '../../utils/utils';
 import Face from './face';
 import Hand from './hand';
 
diff --git a/components/time_picker/clock/minutes.jsx b/components/time_picker/clock/minutes.jsx
index 164091b65..11cec5c12 100644
--- a/components/time_picker/clock/minutes.jsx
+++ b/components/time_picker/clock/minutes.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import utils from '../../utils';
+import utils from '../../utils/utils';
 import style from './style';
 import Face from './face';
 import Hand from './hand';
diff --git a/components/time_picker/index.jsx b/components/time_picker/index.jsx
index 693df6608..6efd6e58d 100644
--- a/components/time_picker/index.jsx
+++ b/components/time_picker/index.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
+import events from '../utils/events';
 import time from '../utils/time';
 import style from './style';
-import events from '../utils/events';
 import Input from '../input';
 import TimeDialog from './dialog';
 
diff --git a/components/utils/events.js b/components/utils/events.js
index cc2ef9cb8..731879217 100644
--- a/components/utils/events.js
+++ b/components/utils/events.js
@@ -1,5 +1,4 @@
-module.exports = {
-
+export default {
   getMousePosition (event) {
     return {
       x: event.pageX,
@@ -41,5 +40,4 @@ module.exports = {
     }
     return false;
   }
-
 };
diff --git a/components/utils/index.js b/components/utils/index.js
index e811df03f..c48fd6474 100644
--- a/components/utils/index.js
+++ b/components/utils/index.js
@@ -1,66 +1,6 @@
-module.exports = {
+import events from './events';
+import prefixer from './prefixer';
+import time from './time';
+import utils from './utils';
 
-  angleFromPositions (cx, cy, ex, ey) {
-    const theta = Math.atan2(ey - cy, ex - cx) + Math.PI / 2;
-    return theta * 180 / Math.PI;
-  },
-
-  angle360FromPositions (cx, cy, ex, ey) {
-    const angle = this.angleFromPositions(cx, cy, ex, ey);
-    return angle < 0 ? 360 + angle : angle;
-  },
-
-  range (start = 0, stop = null, step = 1) {
-    let [_start, _stop] = [0, start];
-    if (stop !== null) {
-      [_start, _stop] = [start, stop];
-    }
-    const length = Math.max(Math.ceil((_stop - _start) / step), 0);
-    const range = Array(length);
-
-    for (let idx = 0; idx < length; idx++, _start += step) {
-      range[idx] = _start;
-    }
-
-    return range;
-  },
-
-  round (number, decimals) {
-    if (!isNaN(parseFloat(number)) && isFinite(number)) {
-      const decimalPower = Math.pow(10, decimals);
-      return Math.round(parseFloat(number) * decimalPower) / decimalPower;
-    }
-    return NaN;
-  },
-
-  getViewport () {
-    return {
-      height: window.innerHeight || document.documentElement.offsetHeight,
-      width: window.innerWidth || document.documentElement.offsetWidth
-    };
-  },
-
-  cloneObject (object) {
-    return JSON.parse(JSON.stringify(object));
-  },
-
-  inputTypeForPrototype (prototype) {
-    if (prototype === Date) return 'date';
-    if (prototype === Number) return 'number';
-    if (prototype === Boolean) return 'checkbox';
-    return 'text';
-  },
-
-  prepareValueForInput (value, type) {
-    if (type === 'date') return new Date(value).toISOString().slice(0, 10);
-    if (type === 'checkbox') {
-      return value ? 'on' : null;
-    }
-    return value;
-  },
-
-  events: require('./events'),
-  prefixer: require('./prefixer'),
-  time: require('./time'),
-  testing: require('./testing')
-};
+export default {events, prefixer, time, utils};
diff --git a/components/utils/prefixer.js b/components/utils/prefixer.js
index 17d6df655..ac27ad47d 100644
--- a/components/utils/prefixer.js
+++ b/components/utils/prefixer.js
@@ -37,4 +37,4 @@ function prefixer (style, defaultValue = {}) {
   return _style;
 }
 
-module.exports = prefixer;
+export default prefixer;
diff --git a/components/utils/testing.js b/components/utils/testing.js
index 9902076c5..6aa2fa3fa 100644
--- a/components/utils/testing.js
+++ b/components/utils/testing.js
@@ -1,8 +1,7 @@
 import React from 'react';
 import TestUtils from 'react-addons-test-utils';
 
-module.exports = {
-
+export default {
   renderComponent (Component, props = {}, state = {}) {
     const component = TestUtils.renderIntoDocument(<Component {...props} />);
     if (state !== {}) { component.setState(state); }
@@ -14,5 +13,4 @@ module.exports = {
     shallowRenderer.render(React.createElement(component, props, children.length > 1 ? children : children[0]));
     return shallowRenderer.getRenderOutput();
   }
-
 };
diff --git a/components/utils/time.js b/components/utils/time.js
index e636f6b25..ecc53c4c6 100644
--- a/components/utils/time.js
+++ b/components/utils/time.js
@@ -1,5 +1,4 @@
-module.exports = {
-
+export default {
   getDaysInMonth (d) {
     const resultDate = this.getFirstDayOfMonth(d);
     resultDate.setMonth(resultDate.getMonth() + 1);
@@ -177,5 +176,4 @@ module.exports = {
   dateOutOfRange (date, minDate, maxDate) {
     return ((minDate && !(date >= minDate)) || (maxDate && !(date <= maxDate)));
   }
-
 };
diff --git a/components/utils/utils.js b/components/utils/utils.js
new file mode 100644
index 000000000..202caf082
--- /dev/null
+++ b/components/utils/utils.js
@@ -0,0 +1,60 @@
+export default {
+  angleFromPositions (cx, cy, ex, ey) {
+    const theta = Math.atan2(ey - cy, ex - cx) + Math.PI / 2;
+    return theta * 180 / Math.PI;
+  },
+
+  angle360FromPositions (cx, cy, ex, ey) {
+    const angle = this.angleFromPositions(cx, cy, ex, ey);
+    return angle < 0 ? 360 + angle : angle;
+  },
+
+  range (start = 0, stop = null, step = 1) {
+    let [_start, _stop] = [0, start];
+    if (stop !== null) {
+      [_start, _stop] = [start, stop];
+    }
+    const length = Math.max(Math.ceil((_stop - _start) / step), 0);
+    const range = Array(length);
+
+    for (let idx = 0; idx < length; idx++, _start += step) {
+      range[idx] = _start;
+    }
+
+    return range;
+  },
+
+  round (number, decimals) {
+    if (!isNaN(parseFloat(number)) && isFinite(number)) {
+      const decimalPower = Math.pow(10, decimals);
+      return Math.round(parseFloat(number) * decimalPower) / decimalPower;
+    }
+    return NaN;
+  },
+
+  getViewport () {
+    return {
+      height: window.innerHeight || document.documentElement.offsetHeight,
+      width: window.innerWidth || document.documentElement.offsetWidth
+    };
+  },
+
+  cloneObject (object) {
+    return JSON.parse(JSON.stringify(object));
+  },
+
+  inputTypeForPrototype (prototype) {
+    if (prototype === Date) return 'date';
+    if (prototype === Number) return 'number';
+    if (prototype === Boolean) return 'checkbox';
+    return 'text';
+  },
+
+  prepareValueForInput (value, type) {
+    if (type === 'date') return new Date(value).toISOString().slice(0, 10);
+    if (type === 'checkbox') {
+      return value ? 'on' : null;
+    }
+    return value;
+  }
+};
diff --git a/spec/components/input.jsx b/spec/components/input.jsx
index affe88088..0be843973 100644
--- a/spec/components/input.jsx
+++ b/spec/components/input.jsx
@@ -3,7 +3,7 @@ import Input from '../../components/input';
 
 class InputTest extends React.Component {
   state = {
-    normal: 'hello world',
+    normal: 'Tony Stark',
     fixedLabel: '',
     withIcon: ''
   };
diff --git a/spec/components/list.jsx b/spec/components/list.jsx
index 996a21709..eebe79026 100644
--- a/spec/components/list.jsx
+++ b/spec/components/list.jsx
@@ -99,7 +99,7 @@ class ListTest extends React.Component {
           </List>
         </div>
 
-        <h5>Avatar, sinle text and icon</h5>
+        <h5>Avatar, single text and icon</h5>
         <p>Similar to a previous one but only with one text line</p>
         <div style={listStyle}>
           <List>
diff --git a/spec/components/snackbar.jsx b/spec/components/snackbar.jsx
index 4733870df..0c289a00f 100644
--- a/spec/components/snackbar.jsx
+++ b/spec/components/snackbar.jsx
@@ -3,19 +3,16 @@ import Button from '../../components/button';
 import Snackbar from '../../components/snackbar';
 
 class SnackbarTest extends React.Component {
-
-  handleSnackbarClick = (event, instance) => {
-    console.log('handleSnackbarClick', event, instance);
-    this.setState({ active: false });
+  handleSnackbarClick = () => {
+    this.setState({active: false});
   };
 
-  handleSnackbarTimeout = (event, instance) => {
-    console.log('handleSnackbarClick', event, instance);
-    this.setState({ active: false });
+  handleSnackbarTimeout = () => {
+    this.setState({active: false});
   };
 
   handleClick = () => {
-    this.setState({ active: true });
+    this.setState({active: true});
   };
 
   state = {
@@ -33,7 +30,7 @@ class SnackbarTest extends React.Component {
           active={this.state.active}
           icon='question-answer'
           label='Snackbar action cancel'
-          timeout={2}
+          timeout={2000}
           onClick={this.handleSnackbarClick}
           onTimeout={this.handleSnackbarTimeout}
           type='warning'

From 92a5369c16e6a7caa0548969ef38c3def9119258 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 21 Nov 2015 14:26:54 +0100
Subject: [PATCH 0134/1024] 0.12.13 release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 32a827a84..cbc0c88ca 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-toolbox",
-  "version": "0.12.12",
+  "version": "0.12.13",
   "homepage": "http://www.react-toolbox.com/",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "author": "React Toolbox Team (http://github.com/react-toolbox)",

From d468c9f1b3d23a166f6074e6797f615a3029cfcf Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 21 Nov 2015 14:46:24 +0100
Subject: [PATCH 0135/1024] Add floating label for pickers. Fixes #137

---
 components/date_picker/index.jsx              |  8 ++-----
 components/date_picker/readme.md              |  5 ++--
 components/time_picker/index.jsx              |  3 ++-
 components/time_picker/readme.md              |  3 ++-
 .../modules/examples/datepicker_example_1.txt | 15 ++++++++----
 .../modules/examples/timepicker_example_1.txt |  2 +-
 spec/components/pickers.jsx                   | 24 +++++++++++++++----
 7 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/components/date_picker/index.jsx b/components/date_picker/index.jsx
index 1490edeec..82a6b07a2 100644
--- a/components/date_picker/index.jsx
+++ b/components/date_picker/index.jsx
@@ -7,17 +7,13 @@ import time from '../utils/time';
 
 class DatePicker extends React.Component {
   static propTypes = {
+    label: React.PropTypes.string,
     maxDate: React.PropTypes.object,
     minDate: React.PropTypes.object,
     onChange: React.PropTypes.func,
-    placeholder: React.PropTypes.string,
     value: React.PropTypes.object
   };
 
-  static defaultProps = {
-    placeholder: 'Choose a date'
-  };
-
   state = {
     active: false
   };
@@ -45,7 +41,7 @@ class DatePicker extends React.Component {
         <Input
           className={style.input}
           onMouseDown={this.handleInputMouseDown}
-          placeholder={this.props.placeholder}
+          label={this.props.label}
           readOnly={true}
           type='text'
           value={date}
diff --git a/components/date_picker/readme.md b/components/date_picker/readme.md
index e8acc2af1..b48d65f6b 100644
--- a/components/date_picker/readme.md
+++ b/components/date_picker/readme.md
@@ -25,8 +25,8 @@ class DatePickerTest extends React.Component {
   render () {
     return (
       <section>
-        <DatePicker value={this.state.date1} onChange={this.handleChange.bind(this, 'date1')} />
-        <DatePicker minDate={min_datetime} value={this.state.date2} onChange={this.handleChange.bind(this, 'date2')} />
+        <DatePicker label='Birthdate' onChange={this.handleChange.bind(this, 'date1')} value={this.state.date1} />
+        <DatePicker label='Expiration date' minDate={min_datetime} onChange={this.handleChange.bind(this, 'date2')} value={this.state.date2} />
       </section>
     );
   }
@@ -37,6 +37,7 @@ class DatePickerTest extends React.Component {
 
 | Name          | Type    | Default         | Description|
 |:-----|:-----|:-----|:-----|
+| `label`         | `String`        |             | The text string to use for the floating label element in the input component.|
 | `maxDate`         | `Date`    |                 | Date object with the maximum selectable date. |
 | `minDate`         | `Date`    |                 | Date object with the minimum selectable date. |
 | `onChange`       | `Function`       |                | Callback called when the picker value is changed.|
diff --git a/components/time_picker/index.jsx b/components/time_picker/index.jsx
index 6efd6e58d..f92e3dc59 100644
--- a/components/time_picker/index.jsx
+++ b/components/time_picker/index.jsx
@@ -9,6 +9,7 @@ class TimePicker extends React.Component {
   static propTypes = {
     className: React.PropTypes.string,
     format: React.PropTypes.oneOf(['24hr', 'ampm']),
+    label: React.PropTypes.string,
     onChange: React.PropTypes.func,
     value: React.PropTypes.object
   };
@@ -43,8 +44,8 @@ class TimePicker extends React.Component {
       <div data-react-toolbox='time-picker'>
         <Input
           className={style.input}
+          label={this.props.label}
           onMouseDown={this.handleInputMouseDown}
-          placeholder='Pick up time'
           readOnly={true}
           type='text'
           value={formattedTime}
diff --git a/components/time_picker/readme.md b/components/time_picker/readme.md
index 7d2a7068d..e4d487fb9 100644
--- a/components/time_picker/readme.md
+++ b/components/time_picker/readme.md
@@ -11,7 +11,7 @@ selectedTime.setHours(17);
 selectedTime.setMinutes(28);
 
 const TimePickerTest = () => (
-  <TimePicker value={selectedTime} />
+  <TimePicker label='Finishing time' value={selectedTime} />
 );
 ```
 
@@ -21,5 +21,6 @@ const TimePickerTest = () => (
 |:-----|:-----|:-----|:-----|
 | `className`  | `String`    |     `''`            | Sets a class to give customized styles.|
 | `format`    | `String`  | `24hr`          | Format to display the clock. It can be `24hr` or `ampm`.|
+| `label`         | `String`        |             | The text string to use for the floating label element in the input component.|
 | `onChange`       | `Function`       |                | Callback called when the picker value is changed.|
 | `value`     | `Date`    |   | Datetime object with currrently selected time |
diff --git a/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt b/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt
index 77abdfb7a..e44e507ca 100644
--- a/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt
@@ -18,12 +18,17 @@ class DatePickerTest extends React.Component {
   render () {
     return (
       <section>
-        <DatePicker value={this.state.date1} onChange={this.handleChange.bind(this, 'date1')} />
-        <DatePicker 
-          maxDate={max_datetime}
+        <DatePicker
+          label='Birthdate'
+          onChange={this.handleChange.bind(this, 'date1')}
+          value={this.state.date1}
+        />
+
+        <DatePicker
+          label='Expiration date'
           minDate={min_datetime}
-          value={this.state.date2} 
-          onChange={this.handleChange.bind(this, 'date2')} 
+          onChange={this.handleChange.bind(this, 'date2')}
+          value={this.state.date2}
         />
       </section>
     );
diff --git a/docs/app/components/layout/main/modules/examples/timepicker_example_1.txt b/docs/app/components/layout/main/modules/examples/timepicker_example_1.txt
index 599fd668b..b29784a40 100644
--- a/docs/app/components/layout/main/modules/examples/timepicker_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/timepicker_example_1.txt
@@ -3,7 +3,7 @@ selectedTime.setHours(17);
 selectedTime.setMinutes(28);
 
 const TimePickerTest = () => (
-  <TimePicker value={selectedTime} />
+  <TimePicker label='Finishing time' value={selectedTime} />
 );
 
 return <TimePickerTest />
diff --git a/spec/components/pickers.jsx b/spec/components/pickers.jsx
index b1ec213d3..02c5dd0cc 100644
--- a/spec/components/pickers.jsx
+++ b/spec/components/pickers.jsx
@@ -27,16 +27,32 @@ class PickersTest extends React.Component {
         <h5>Pickers</h5>
         <p>Date pickers and time pickers with Material flavour.</p>
 
-        <DatePicker value={this.state.date1} onChange={this.handleChange.bind(this, 'date1')} />
         <DatePicker
+          label='Birthdate'
+          onChange={this.handleChange.bind(this, 'date1')}
+          value={this.state.date1}
+        />
+
+        <DatePicker
+          label='Expiration date'
           maxDate={max_datetime}
           minDate={min_datetime}
-          value={this.state.date2}
           onChange={this.handleChange.bind(this, 'date2')}
+          value={this.state.date2}
+        />
+
+        <TimePicker
+          label='Start time'
+          onChange={this.handleChange.bind(this, 'time1')}
+          value={this.state.time1}
         />
 
-        <TimePicker value={this.state.time1} onChange={this.handleChange.bind(this, 'time1')} />
-        <TimePicker value={this.state.time2} format='ampm' onChange={this.handleChange.bind(this, 'time2')} />
+        <TimePicker
+          format='ampm'
+          label='Finishing time'
+          onChange={this.handleChange.bind(this, 'time2')}
+          value={this.state.time2}
+        />
       </section>
     );
   }

From f5134d256c29c0ba79879e095dd7bce81c65dda8 Mon Sep 17 00:00:00 2001
From: jpersson <jonathan.persson@creuna.se>
Date: Sat, 21 Nov 2015 13:04:09 -0500
Subject: [PATCH 0136/1024] Replace dependency `classnames-minimal` with
 `classnames`

---
 components/input/index.jsx | 2 +-
 package.json               | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/input/index.jsx b/components/input/index.jsx
index e2135b855..c49bd1f3b 100644
--- a/components/input/index.jsx
+++ b/components/input/index.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames-minimal';
+import classNames from 'classnames';
 import style from './style';
 import FontIcon from '../font_icon';
 import Tooltip from '../tooltip';
diff --git a/package.json b/package.json
index 558694072..0c705c74a 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,7 @@
     "babel-eslint": "^4.1.3",
     "babel-loader": "^5.3.2",
     "babel-plugin-react-transform": "^1.1.1",
-    "classnames-minimal": "^1.0.0",
+    "classnames": "^2.2.0",
     "core-js": "^1.2.6",
     "cpx": "^1.2.1",
     "cross-env": "^1.0.4",

From 1c822d22343ca366c70f6dddb81e38b8ed120f83 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 21 Nov 2015 21:50:28 +0100
Subject: [PATCH 0137/1024] Update README.md

---
 README.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 6a9bf531b..1ddc4ba62 100644
--- a/README.md
+++ b/README.md
@@ -90,10 +90,11 @@ The project is being initially developed and maintained by [Javier Velasco](http
 
 To work in the project you'd need a `node` version with ES6 syntax. Although the project is built using Babel we use some ES6 features in the development server. Also, the packages has been tested with `node 4.2.1`. Consider using [nvm](https://github.com/creationix/nvm) or [n](https://github.com/tj/n) to handle different node versions!
 
-To start documentation site locally:
+To start documentation site locally you'd need to install dependencies from the main package and also dependencies from the docs subproject:
 
 ```
 git clone https://github.com/react-toolbox/react-toolbox.git
+npm install
 cd docs/
 npm install 
 npm start

From 1611b491fa4c21ec2d669cb017e02e5b848ba335 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 22 Nov 2015 19:20:05 +0100
Subject: [PATCH 0138/1024] Rename some components to new naming approach

---
 .babelrc                                      |  2 +-
 .eslintrc                                     | 29 ++++++-
 components/app/{index.jsx => App.jsx}         |  1 +
 components/app/index.js                       |  1 +
 components/app_bar/{index.jsx => AppBar.jsx}  |  1 +
 components/app_bar/index.js                   |  1 +
 .../{index.jsx => Autocomplete.jsx}           |  8 +-
 components/autocomplete/index.js              |  1 +
 components/button/{index.jsx => Button.jsx}   |  2 +
 components/button/index.js                    |  1 +
 components/card/{index.jsx => Card.jsx}       | 13 +--
 components/card/index.js                      |  1 +
 .../checkbox/{index.jsx => Checkbox.jsx}      | 18 ++---
 components/checkbox/index.js                  |  1 +
 .../date_picker/{index.jsx => DatePicker.jsx} |  4 +-
 .../{dialog.jsx => DatePickerDialog.jsx}      |  2 +-
 .../calendar/{index.jsx => Calendar.jsx}      | 14 ++--
 components/date_picker/calendar/index.js      |  1 +
 components/date_picker/calendar/month.jsx     | 10 +--
 components/date_picker/index.js               |  1 +
 components/dialog/{index.jsx => Dialog.jsx}   |  9 ++-
 components/dialog/index.js                    |  1 +
 components/drawer/{index.jsx => Drawer.jsx}   |  3 +-
 components/drawer/index.js                    |  1 +
 .../dropdown/{index.jsx => Dropdown.jsx}      |  8 +-
 components/dropdown/index.js                  |  1 +
 .../font_icon/{index.jsx => FontIcon.jsx}     |  1 +
 components/font_icon/index.js                 |  1 +
 components/form/{index.jsx => Form.jsx}       | 79 ++++++++++---------
 components/form/index.js                      |  1 +
 components/input/{index.jsx => Input.jsx}     | 26 +++---
 components/input/index.js                     |  1 +
 components/link/{index.jsx => Link.jsx}       |  6 +-
 components/link/index.js                      |  1 +
 components/list/checkbox.jsx                  |  2 +-
 components/list/content.jsx                   |  2 +-
 components/list/index.jsx                     | 12 ++-
 components/list/item.jsx                      | 14 ++--
 components/list/list.jsx                      |  3 +-
 components/list/subheader.jsx                 |  3 +-
 .../menu/{icon_menu.jsx => IconMenu.jsx}      |  9 ++-
 .../{menu_divider.jsx => MenuDivider.jsx}     |  0
 .../menu/{menu_item.jsx => MenuItem.jsx}      | 11 +--
 components/menu/index.jsx                     | 15 +---
 components/menu/menu.jsx                      | 45 +++++------
 45 files changed, 201 insertions(+), 166 deletions(-)
 rename components/app/{index.jsx => App.jsx} (92%)
 create mode 100644 components/app/index.js
 rename components/app_bar/{index.jsx => AppBar.jsx} (94%)
 create mode 100644 components/app_bar/index.js
 rename components/autocomplete/{index.jsx => Autocomplete.jsx} (95%)
 create mode 100644 components/autocomplete/index.js
 rename components/button/{index.jsx => Button.jsx} (97%)
 create mode 100644 components/button/index.js
 rename components/card/{index.jsx => Card.jsx} (82%)
 create mode 100644 components/card/index.js
 rename components/checkbox/{index.jsx => Checkbox.jsx} (94%)
 create mode 100644 components/checkbox/index.js
 rename components/date_picker/{index.jsx => DatePicker.jsx} (95%)
 rename components/date_picker/{dialog.jsx => DatePickerDialog.jsx} (98%)
 rename components/date_picker/calendar/{index.jsx => Calendar.jsx} (88%)
 create mode 100644 components/date_picker/calendar/index.js
 create mode 100644 components/date_picker/index.js
 rename components/dialog/{index.jsx => Dialog.jsx} (85%)
 create mode 100644 components/dialog/index.js
 rename components/drawer/{index.jsx => Drawer.jsx} (92%)
 create mode 100644 components/drawer/index.js
 rename components/dropdown/{index.jsx => Dropdown.jsx} (86%)
 create mode 100644 components/dropdown/index.js
 rename components/font_icon/{index.jsx => FontIcon.jsx} (93%)
 create mode 100644 components/font_icon/index.js
 rename components/form/{index.jsx => Form.jsx} (98%)
 create mode 100644 components/form/index.js
 rename components/input/{index.jsx => Input.jsx} (87%)
 create mode 100644 components/input/index.js
 rename components/link/{index.jsx => Link.jsx} (70%)
 create mode 100644 components/link/index.js
 rename components/menu/{icon_menu.jsx => IconMenu.jsx} (89%)
 rename components/menu/{menu_divider.jsx => MenuDivider.jsx} (100%)
 rename components/menu/{menu_item.jsx => MenuItem.jsx} (76%)

diff --git a/.babelrc b/.babelrc
index e0e22ee73..99113d594 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,5 +1,5 @@
 {
-  "stage": 2,
+  "stage": 1,
   "optional": ["es7.classProperties"],
   "env": {
     "development": {
diff --git a/.eslintrc b/.eslintrc
index deff2827e..5b38b7a81 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -210,9 +210,30 @@
     "yoda": [2, "never", {
       "exceptRange": true
     }],
-    "react/jsx-uses-react": [2],
-    "react/jsx-uses-vars": [2],
-    "react/react-in-jsx-scope": [2],
-    "babel/object-shorthand": [2]
+    "babel/object-shorthand": [2],
+    "react/display-name": 0,
+    "react/jsx-boolean-value": 1,
+    "react/jsx-closing-bracket-location": 0,
+    "react/jsx-curly-spacing": 1,
+    "react/jsx-max-props-per-line": 0,
+    "react/jsx-indent-props": 0,
+    "react/jsx-no-duplicate-props": 1,
+    "react/jsx-no-undef": 1,
+    "react/jsx-pascal-case": 1,
+    "react/jsx-sort-prop-types": 1,
+    "react/jsx-sort-props": 0,
+    "react/jsx-uses-react": 1,
+    "react/jsx-uses-vars": 1,
+    "react/no-danger": 0,
+    "react/no-did-mount-set-state": 0,
+    "react/no-did-update-set-state": 1,
+    "react/no-multi-comp": 1,
+    "react/no-unknown-property": 1,
+    "react/prop-types": [2, {"ignore": ["onMouseDown", "onTouchStart"]}],
+    "react/react-in-jsx-scope": 1,
+    "react/require-extension": 1,
+    "react/self-closing-comp": 1,
+    "react/sort-comp": 1,
+    "react/wrap-multilines": 1
   }
 }
diff --git a/components/app/index.jsx b/components/app/App.jsx
similarity index 92%
rename from components/app/index.jsx
rename to components/app/App.jsx
index ca8a1166a..e02273267 100644
--- a/components/app/index.jsx
+++ b/components/app/App.jsx
@@ -3,6 +3,7 @@ import style from './style';
 
 class App extends React.Component {
   static propTypes = {
+    children: React.PropTypes.node,
     className: React.PropTypes.string
   };
 
diff --git a/components/app/index.js b/components/app/index.js
new file mode 100644
index 000000000..efe995487
--- /dev/null
+++ b/components/app/index.js
@@ -0,0 +1 @@
+export default from './App.jsx';
diff --git a/components/app_bar/index.jsx b/components/app_bar/AppBar.jsx
similarity index 94%
rename from components/app_bar/index.jsx
rename to components/app_bar/AppBar.jsx
index f53601fe5..95d2832e3 100644
--- a/components/app_bar/index.jsx
+++ b/components/app_bar/AppBar.jsx
@@ -15,6 +15,7 @@ const AppBar = (props) => {
 };
 
 AppBar.propTypes = {
+  children: React.PropTypes.node,
   className: React.PropTypes.string,
   fixed: React.PropTypes.bool,
   flat: React.PropTypes.bool
diff --git a/components/app_bar/index.js b/components/app_bar/index.js
new file mode 100644
index 000000000..f3e152c09
--- /dev/null
+++ b/components/app_bar/index.js
@@ -0,0 +1 @@
+export default from './AppBar.jsx';
diff --git a/components/autocomplete/index.jsx b/components/autocomplete/Autocomplete.jsx
similarity index 95%
rename from components/autocomplete/index.jsx
rename to components/autocomplete/Autocomplete.jsx
index 604c20f2b..7a6bcbf4f 100644
--- a/components/autocomplete/index.jsx
+++ b/components/autocomplete/Autocomplete.jsx
@@ -87,7 +87,7 @@ class Autocomplete extends React.Component {
     if (this.props.direction === 'auto') {
       const client = ReactDOM.findDOMNode(this.refs.input).getBoundingClientRect();
       const screen_height = window.innerHeight || document.documentElement.offsetHeight;
-      const up = this.props.auto ? client.top > ((screen_height / 2) + client.height) : false;
+      const up = client.top > ((screen_height / 2) + client.height);
       return up ? 'up' : 'down';
     } else {
       return this.props.direction;
@@ -179,8 +179,8 @@ class Autocomplete extends React.Component {
 
     return (
       <div data-react-toolbox='autocomplete' className={className}>
-        { this.props.label ? <label className={style.label}>{this.props.label}</label> : null }
-        { this.renderSelected() }
+        {this.props.label ? <label className={style.label}>{this.props.label}</label> : null}
+        {this.renderSelected()}
         <Input
           ref='input'
           {...this.props}
@@ -192,7 +192,7 @@ class Autocomplete extends React.Component {
           onKeyUp={this.handleQueryKeyUp}
           value={this.state.query}
         />
-        { this.renderSuggestions() }
+        {this.renderSuggestions()}
       </div>
     );
   }
diff --git a/components/autocomplete/index.js b/components/autocomplete/index.js
new file mode 100644
index 000000000..cd659a51c
--- /dev/null
+++ b/components/autocomplete/index.js
@@ -0,0 +1 @@
+export default from './Autocomplete.jsx';
diff --git a/components/button/index.jsx b/components/button/Button.jsx
similarity index 97%
rename from components/button/index.jsx
rename to components/button/Button.jsx
index e4dd1706e..286710c90 100644
--- a/components/button/index.jsx
+++ b/components/button/Button.jsx
@@ -8,10 +8,12 @@ import events from '../utils/events';
 class Button extends React.Component {
   static propTypes = {
     accent: React.PropTypes.bool,
+    children: React.PropTypes.node,
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
     flat: React.PropTypes.bool,
     floating: React.PropTypes.bool,
+    href: React.PropTypes.string,
     icon: React.PropTypes.string,
     label: React.PropTypes.string,
     loading: React.PropTypes.bool,
diff --git a/components/button/index.js b/components/button/index.js
new file mode 100644
index 000000000..7a4ebccc7
--- /dev/null
+++ b/components/button/index.js
@@ -0,0 +1 @@
+export default from './Button.jsx';
diff --git a/components/card/index.jsx b/components/card/Card.jsx
similarity index 82%
rename from components/card/index.jsx
rename to components/card/Card.jsx
index 65fbfd965..c06c439d7 100644
--- a/components/card/index.jsx
+++ b/components/card/Card.jsx
@@ -11,6 +11,7 @@ class Card extends React.Component {
     image: React.PropTypes.string,
     loading: React.PropTypes.bool,
     onClick: React.PropTypes.func,
+    subtitle: React.PropTypes.string,
     text: React.PropTypes.string,
     title: React.PropTypes.string,
     type: React.PropTypes.oneOf(['wide', 'event', 'image'])
@@ -49,9 +50,9 @@ class Card extends React.Component {
     if (this.props.title || this.props.image) {
       return (
         <figure className={style.figure} style={styleFigure}>
-          { this.props.title ? <h5 data-role='title'>{this.props.title}</h5> : null }
-          { this.props.subtitle ? <small data-role='subtitle'>{this.props.subtitle}</small> : null }
-          { this.props.color ? <div className={style.overflow} style={styleOverflow}></div> : null }
+          {this.props.title ? <h5 data-role='title'>{this.props.title}</h5> : null}
+          {this.props.subtitle ? <small data-role='subtitle'>{this.props.subtitle}</small> : null}
+          {this.props.color ? <div className={style.overflow} style={styleOverflow}></div> : null}
         </figure>
       );
     }
@@ -72,9 +73,9 @@ class Card extends React.Component {
         className={className}
         onMouseDown={this.handleMouseDown}
       >
-        { this.renderTitle() }
-        { this.props.text ? <p data-role='text' className={style.text}>{this.props.text}</p> : null }
-        { this.renderActions() }
+        {this.renderTitle()}
+        {this.props.text ? <p data-role='text' className={style.text}>{this.props.text}</p> : null}
+        {this.renderActions()}
         <Ripple
           ref='ripple'
           className={style.ripple}
diff --git a/components/card/index.js b/components/card/index.js
new file mode 100644
index 000000000..de126c790
--- /dev/null
+++ b/components/card/index.js
@@ -0,0 +1 @@
+export default from './Card.jsx';
diff --git a/components/checkbox/index.jsx b/components/checkbox/Checkbox.jsx
similarity index 94%
rename from components/checkbox/index.jsx
rename to components/checkbox/Checkbox.jsx
index 882cd5d82..17d4ba987 100644
--- a/components/checkbox/index.jsx
+++ b/components/checkbox/Checkbox.jsx
@@ -38,6 +38,14 @@ class Checkbox extends React.Component {
     }
   };
 
+  blur () {
+    this.refs.input.blur();
+  }
+
+  focus () {
+    this.refs.input.focus();
+  }
+
   render () {
     let fieldClassName = style.field;
     let checkboxClassName = style.check;
@@ -61,18 +69,10 @@ class Checkbox extends React.Component {
         <span data-role='checkbox' className={checkboxClassName} onMouseDown={this.handleMouseDown}>
           <Ripple ref='ripple' data-role='ripple' className={style.ripple} spread={3} centered />
         </span>
-        { this.props.label ? <span data-role='label' className={style.text}>{this.props.label}</span> : null }
+        {this.props.label ? <span data-role='label' className={style.text}>{this.props.label}</span> : null}
       </label>
     );
   }
-
-  blur () {
-    this.refs.input.blur();
-  }
-
-  focus () {
-    this.refs.input.focus();
-  }
 }
 
 export default Checkbox;
diff --git a/components/checkbox/index.js b/components/checkbox/index.js
new file mode 100644
index 000000000..626810b39
--- /dev/null
+++ b/components/checkbox/index.js
@@ -0,0 +1 @@
+export default from './Checkbox.jsx';
diff --git a/components/date_picker/index.jsx b/components/date_picker/DatePicker.jsx
similarity index 95%
rename from components/date_picker/index.jsx
rename to components/date_picker/DatePicker.jsx
index 82a6b07a2..a60967543 100644
--- a/components/date_picker/index.jsx
+++ b/components/date_picker/DatePicker.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import CalendarDialog from './dialog';
+import CalendarDialog from './DatePickerDialog';
 import events from '../utils/events';
 import Input from '../input';
 import style from './style';
@@ -42,7 +42,7 @@ class DatePicker extends React.Component {
           className={style.input}
           onMouseDown={this.handleInputMouseDown}
           label={this.props.label}
-          readOnly={true}
+          readOnly
           type='text'
           value={date}
         />
diff --git a/components/date_picker/dialog.jsx b/components/date_picker/DatePickerDialog.jsx
similarity index 98%
rename from components/date_picker/dialog.jsx
rename to components/date_picker/DatePickerDialog.jsx
index 6df5cfa55..ee6f08457 100644
--- a/components/date_picker/dialog.jsx
+++ b/components/date_picker/DatePickerDialog.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import Calendar from './calendar';
-import Dialog from '../dialog';
+import Dialog from '../Dialog';
 import style from './style';
 import time from '../utils/time';
 
diff --git a/components/date_picker/calendar/index.jsx b/components/date_picker/calendar/Calendar.jsx
similarity index 88%
rename from components/date_picker/calendar/index.jsx
rename to components/date_picker/calendar/Calendar.jsx
index deaded3fd..5b8cf1043 100644
--- a/components/date_picker/calendar/index.jsx
+++ b/components/date_picker/calendar/Calendar.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import CSSTransitionGroup from 'react-addons-css-transition-group';
+import CssTransitionGroup from 'react-addons-css-transition-group';
 import { SlideLeft, SlideRight } from '../../animations';
 import FontIcon from '../../font_icon';
 import Ripple from '../../ripple';
-import Month from './month';
+import Month from './Month';
 import time from '../../utils/time';
 import utils from '../../utils/utils';
 import style from './style';
@@ -77,13 +77,13 @@ class Calendar extends React.Component {
       props.ref = 'activeYear';
     }
 
-    return <li {...props}>{ year }</li>;
+    return <li {...props}>{year}</li>;
   }
 
   renderYears () {
     return (
       <ul ref="years" className={style.years}>
-        { utils.range(1900, 2100).map((i) => { return this.renderYear(i); })}
+        {utils.range(1900, 2100).map((i) => { return this.renderYear(i); })}
       </ul>
     );
   }
@@ -98,7 +98,7 @@ class Calendar extends React.Component {
         <FontIcon className={style.next} value='chevron-right' onMouseDown={this.incrementViewMonth}>
           <Ripple ref='rippleRight' className={style.ripple} spread={1.2} centered />
         </FontIcon>
-        <CSSTransitionGroup transitionName={animation} transitionEnterTimeout={350} transitionLeaveTimeout={350}>
+        <CssTransitionGroup transitionName={animation} transitionEnterTimeout={350} transitionLeaveTimeout={350}>
           <Month
             key={this.state.viewDate.getMonth()}
             maxDate={this.props.maxDate}
@@ -106,7 +106,7 @@ class Calendar extends React.Component {
             viewDate={this.state.viewDate}
             selectedDate={this.props.selectedDate}
             onDayClick={this.handleDayClick} />
-        </CSSTransitionGroup>
+        </CssTransitionGroup>
       </div>
     );
   }
@@ -114,7 +114,7 @@ class Calendar extends React.Component {
   render () {
     return (
       <div className={style.root}>
-        { this.props.display === 'months' ? this.renderMonths() : this.renderYears() }
+        {this.props.display === 'months' ? this.renderMonths() : this.renderYears()}
       </div>
     );
   }
diff --git a/components/date_picker/calendar/index.js b/components/date_picker/calendar/index.js
new file mode 100644
index 000000000..0efaa9a65
--- /dev/null
+++ b/components/date_picker/calendar/index.js
@@ -0,0 +1 @@
+export default from './Calendar.jsx';
diff --git a/components/date_picker/calendar/month.jsx b/components/date_picker/calendar/month.jsx
index 091ae1871..ac75eaa27 100644
--- a/components/date_picker/calendar/month.jsx
+++ b/components/date_picker/calendar/month.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import time from '../../utils/time';
 import utils from '../../utils/utils';
-import Day from './day';
+import Day from './Day';
 import style from './style';
 
 class Month extends React.Component {
@@ -19,7 +19,7 @@ class Month extends React.Component {
 
   renderWeeks () {
     return utils.range(0, 7).map(i => {
-      return <span key={i}>{ time.getFullDayOfWeek(i).charAt(0) }</span>;
+      return <span key={i}>{time.getFullDayOfWeek(i).charAt(0)}</span>;
     });
   }
 
@@ -45,10 +45,10 @@ class Month extends React.Component {
     return (
       <div className={style.month}>
         <span className={style.title}>
-          { time.getFullMonth(this.props.viewDate)} { this.props.viewDate.getFullYear() }
+          {time.getFullMonth(this.props.viewDate)} {this.props.viewDate.getFullYear()}
         </span>
-        <div className={style.week}>{ this.renderWeeks() }</div>
-        <div className={style.days}>{ this.renderDays() }</div>
+        <div className={style.week}>{this.renderWeeks()}</div>
+        <div className={style.days}>{this.renderDays()}</div>
       </div>
     );
   }
diff --git a/components/date_picker/index.js b/components/date_picker/index.js
new file mode 100644
index 000000000..38f9dabea
--- /dev/null
+++ b/components/date_picker/index.js
@@ -0,0 +1 @@
+export default from './DatePicker.jsx';
diff --git a/components/dialog/index.jsx b/components/dialog/Dialog.jsx
similarity index 85%
rename from components/dialog/index.jsx
rename to components/dialog/Dialog.jsx
index 921820e0d..8a4cede45 100644
--- a/components/dialog/index.jsx
+++ b/components/dialog/Dialog.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Button from '../button';
 import Overlay from '../overlay';
-import style from './style';
+import style from './style.scss';
 
 const Dialog = (props) => {
   const actions = props.actions.map((action, idx) => {
@@ -18,11 +18,11 @@ const Dialog = (props) => {
     <Overlay active={props.active} onClick={props.onOverlayClick}>
       <div data-react-toolbox='dialog' className={className}>
         <section role='body' className={style.body}>
-          { props.title ? <h6 className={style.title}>{props.title}</h6> : null }
-          { props.children }
+          {props.title ? <h6 className={style.title}>{props.title}</h6> : null}
+          {props.children}
         </section>
         <nav role='navigation' className={style.navigation}>
-          { actions }
+          {actions}
         </nav>
       </div>
     </Overlay>
@@ -32,6 +32,7 @@ const Dialog = (props) => {
 Dialog.propTypes = {
   actions: React.PropTypes.array,
   active: React.PropTypes.bool,
+  children: React.PropTypes.node,
   className: React.PropTypes.string,
   onOverlayClick: React.PropTypes.func,
   title: React.PropTypes.string,
diff --git a/components/dialog/index.js b/components/dialog/index.js
new file mode 100644
index 000000000..074f9e1f0
--- /dev/null
+++ b/components/dialog/index.js
@@ -0,0 +1 @@
+export default from './Dialog.jsx';
diff --git a/components/drawer/index.jsx b/components/drawer/Drawer.jsx
similarity index 92%
rename from components/drawer/index.jsx
rename to components/drawer/Drawer.jsx
index 83ce1489f..ec74071fc 100644
--- a/components/drawer/index.jsx
+++ b/components/drawer/Drawer.jsx
@@ -11,7 +11,7 @@ const Drawer = (props) => {
     <Overlay active={props.active} onClick={props.onOverlayClick}>
       <div data-react-toolbox='drawer' className={className}>
         <aside className={style.content}>
-          { props.children }
+          {props.children}
         </aside>
       </div>
     </Overlay>
@@ -20,6 +20,7 @@ const Drawer = (props) => {
 
 Drawer.propTypes = {
   active: React.PropTypes.bool,
+  children: React.PropTypes.node,
   className: React.PropTypes.string,
   onOverlayClick: React.PropTypes.func,
   type: React.PropTypes.oneOf(['left', 'right'])
diff --git a/components/drawer/index.js b/components/drawer/index.js
new file mode 100644
index 000000000..631e1dd3e
--- /dev/null
+++ b/components/drawer/index.js
@@ -0,0 +1 @@
+export default from './Drawer.jsx';
diff --git a/components/dropdown/index.jsx b/components/dropdown/Dropdown.jsx
similarity index 86%
rename from components/dropdown/index.jsx
rename to components/dropdown/Dropdown.jsx
index 8e2c929cf..866385287 100644
--- a/components/dropdown/index.jsx
+++ b/components/dropdown/Dropdown.jsx
@@ -52,7 +52,7 @@ class Dropdown extends React.Component {
     const className = item.value === this.props.value ? style.selected : null;
     return (
       <li key={idx} className={className} onMouseDown={this.handleSelect.bind(this, item.value)}>
-        { this.props.template ? this.props.template(item) : item.label }
+        {this.props.template ? this.props.template(item) : item.label}
       </li>
     );
   }
@@ -67,14 +67,14 @@ class Dropdown extends React.Component {
 
     return (
       <div data-react-toolbox='dropdown' className={className}>
-        { this.props.label ? <label className={style.label}>{this.props.label}</label> : null }
+        {this.props.label ? <label className={style.label}>{this.props.label}</label> : null}
 
         <ul ref='values' className={style.values}>
-          { this.props.source.map(this.renderItem.bind(this)) }
+          {this.props.source.map(this.renderItem.bind(this))}
         </ul>
 
         <div ref='value' className={style.value} onClick={this.handleClick}>
-          { this.props.template ? this.props.template(selected) : <span>{selected.label}</span> }
+          {this.props.template ? this.props.template(selected) : <span>{selected.label}</span>}
         </div>
       </div>
     );
diff --git a/components/dropdown/index.js b/components/dropdown/index.js
new file mode 100644
index 000000000..dccf96d9a
--- /dev/null
+++ b/components/dropdown/index.js
@@ -0,0 +1 @@
+export default from './Dropdown.jsx';
diff --git a/components/font_icon/index.jsx b/components/font_icon/FontIcon.jsx
similarity index 93%
rename from components/font_icon/index.jsx
rename to components/font_icon/FontIcon.jsx
index ab9acedda..3e7e6fdf4 100644
--- a/components/font_icon/index.jsx
+++ b/components/font_icon/FontIcon.jsx
@@ -12,6 +12,7 @@ const FontIcon = props => {
 };
 
 FontIcon.propTypes = {
+  children: React.PropTypes.any,
   className: React.PropTypes.string,
   value: React.PropTypes.string
 };
diff --git a/components/font_icon/index.js b/components/font_icon/index.js
new file mode 100644
index 000000000..f4a63e7e9
--- /dev/null
+++ b/components/font_icon/index.js
@@ -0,0 +1 @@
+export default from './FontIcon.jsx';
diff --git a/components/form/index.jsx b/components/form/Form.jsx
similarity index 98%
rename from components/form/index.jsx
rename to components/form/Form.jsx
index 1de528dcc..9cdd3cca2 100644
--- a/components/form/index.jsx
+++ b/components/form/Form.jsx
@@ -14,6 +14,7 @@ import TimePicker from '../time_picker';
 class Form extends React.Component {
   static propTypes = {
     attributes: React.PropTypes.array,
+    children: React.PropTypes.node,
     className: React.PropTypes.string,
     onChange: React.PropTypes.func,
     onError: React.PropTypes.func,
@@ -69,45 +70,6 @@ class Form extends React.Component {
     }
   };
 
-  render () {
-    const className = `${style.root} ${this.props.className}`;
-    const attributes = this.state.attributes.map((attribute, index) => {
-      if (attribute.type === 'autocomplete') {
-        return <Autocomplete key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'submit') {
-        return <Button key={index} {...attribute} ref='submit' onClick={this.onSubmit} type='square' />;
-      } else if (attribute.type === 'checkbox') {
-        return <Checkbox key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'date_picker') {
-        return <DatePicker key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'dropdown') {
-        return <Dropdown key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'radio_group') {
-        return <RadioGroup key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'slider') {
-        return <Slider key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'switch') {
-        return <Switch key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'time_picker') {
-        return <TimePicker key={index} {...attribute} onChange={this.onChange}/>;
-      } else {
-        return <Input key={index} {...attribute} />;
-      }
-    });
-
-    return (
-      <form
-        data-react-toolbox='form'
-        className={className}
-        onChange={this.onChange}
-        onSubmit={this.onSubmit}
-      >
-        { attributes }
-        { this.props.children }
-      </form>
-    );
-  }
-
   storage (props, value) {
     const key = `react-toolbox-form-${props.storage}`;
     if (value) {
@@ -160,6 +122,45 @@ class Form extends React.Component {
       }
     }
   }
+
+  render () {
+    const className = `${style.root} ${this.props.className}`;
+    const attributes = this.state.attributes.map((attribute, index) => {
+      if (attribute.type === 'autocomplete') {
+        return <Autocomplete key={index} {...attribute} onChange={this.onChange}/>;
+      } else if (attribute.type === 'submit') {
+        return <Button key={index} {...attribute} ref='submit' onClick={this.onSubmit} type='square' />;
+      } else if (attribute.type === 'checkbox') {
+        return <Checkbox key={index} {...attribute} onChange={this.onChange}/>;
+      } else if (attribute.type === 'date_picker') {
+        return <DatePicker key={index} {...attribute} onChange={this.onChange}/>;
+      } else if (attribute.type === 'dropdown') {
+        return <Dropdown key={index} {...attribute} onChange={this.onChange}/>;
+      } else if (attribute.type === 'radio_group') {
+        return <RadioGroup key={index} {...attribute} onChange={this.onChange}/>;
+      } else if (attribute.type === 'slider') {
+        return <Slider key={index} {...attribute} onChange={this.onChange}/>;
+      } else if (attribute.type === 'switch') {
+        return <Switch key={index} {...attribute} onChange={this.onChange}/>;
+      } else if (attribute.type === 'time_picker') {
+        return <TimePicker key={index} {...attribute} onChange={this.onChange}/>;
+      } else {
+        return <Input key={index} {...attribute} />;
+      }
+    });
+
+    return (
+      <form
+        data-react-toolbox='form'
+        className={className}
+        onChange={this.onChange}
+        onSubmit={this.onSubmit}
+      >
+        {attributes}
+        {this.props.children}
+      </form>
+    );
+  }
 }
 
 export default Form;
diff --git a/components/form/index.js b/components/form/index.js
new file mode 100644
index 000000000..a6a1f3a02
--- /dev/null
+++ b/components/form/index.js
@@ -0,0 +1 @@
+export default from './Form.jsx';
diff --git a/components/input/index.jsx b/components/input/Input.jsx
similarity index 87%
rename from components/input/index.jsx
rename to components/input/Input.jsx
index 5d7592d82..e2ee34a6f 100644
--- a/components/input/index.jsx
+++ b/components/input/Input.jsx
@@ -54,6 +54,14 @@ class Input extends React.Component {
     if (error || counter) return <span className={style.underline}>{error}{counter}</span>;
   }
 
+  blur () {
+    this.refs.input.blur();
+  }
+
+  focus () {
+    this.refs.input.focus();
+  }
+
   render () {
     const className = classNames({
       [style.root]: true,
@@ -71,23 +79,15 @@ class Input extends React.Component {
 
     return (
       <div data-react-toolbox='input' className={className}>
-        { this.renderInput() }
-        { this.props.icon ? <FontIcon className={style.icon} value={this.props.icon} /> : null }
+        {this.renderInput()}
+        {this.props.icon ? <FontIcon className={style.icon} value={this.props.icon} /> : null}
         <span className={style.bar}></span>
-        { this.props.label ? <label className={labelClassName}>{this.props.label}</label> : null }
-        { this.renderUnderline() }
-        { this.props.tooltip ? <Tooltip label={this.props.tooltip} delay={this.props.tooltipDelay}/> : null }
+        {this.props.label ? <label className={labelClassName}>{this.props.label}</label> : null}
+        {this.renderUnderline()}
+        {this.props.tooltip ? <Tooltip label={this.props.tooltip} delay={this.props.tooltipDelay}/> : null}
       </div>
     );
   }
-
-  blur () {
-    this.refs.input.blur();
-  }
-
-  focus () {
-    this.refs.input.focus();
-  }
 }
 
 export default Input;
diff --git a/components/input/index.js b/components/input/index.js
new file mode 100644
index 000000000..afc98883e
--- /dev/null
+++ b/components/input/index.js
@@ -0,0 +1 @@
+export default from './Input.jsx';
diff --git a/components/link/index.jsx b/components/link/Link.jsx
similarity index 70%
rename from components/link/index.jsx
rename to components/link/Link.jsx
index b659aa216..8dcae78cc 100644
--- a/components/link/index.jsx
+++ b/components/link/Link.jsx
@@ -12,9 +12,9 @@ const Link = (props) => {
       data-react-toolbox='link'
       className={className}
     >
-      { props.icon ? <FontIcon className={style.icon} value={props.icon} /> : null }
-      { props.label ? <abbr>{props.label}</abbr> : null }
-      { props.count && parseInt(props.count) !== 0 ? <small>{props.count}</small> : null}
+      {props.icon ? <FontIcon className={style.icon} value={props.icon} /> : null}
+      {props.label ? <abbr>{props.label}</abbr> : null}
+      {props.count && parseInt(props.count) !== 0 ? <small>{props.count}</small> : null}
     </a>
   );
 };
diff --git a/components/link/index.js b/components/link/index.js
new file mode 100644
index 000000000..283402972
--- /dev/null
+++ b/components/link/index.js
@@ -0,0 +1 @@
+export default from './Link.jsx';
diff --git a/components/list/checkbox.jsx b/components/list/checkbox.jsx
index c0723ed5f..2e3eabf62 100644
--- a/components/list/checkbox.jsx
+++ b/components/list/checkbox.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import Checkbox from '../checkbox';
-import ListItemContent from './content';
+import ListItemContent from './Content';
 import style from './style';
 
 const ListCheckbox = (props) => {
diff --git a/components/list/content.jsx b/components/list/content.jsx
index 1e4d57819..6fdd5cf5d 100644
--- a/components/list/content.jsx
+++ b/components/list/content.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import style from './style';
 
-const ListItemContent = ({ caption, legend }) => (
+const ListItemContent = ({caption, legend}) => (
   <span className={style.text}>
     <span className={style.caption}>{caption}</span>
     <span className={style.legend}>{legend}</span>
diff --git a/components/list/index.jsx b/components/list/index.jsx
index 28a413adf..f8a57e7cf 100644
--- a/components/list/index.jsx
+++ b/components/list/index.jsx
@@ -1,7 +1,5 @@
-import List from './list';
-import ListItem from './item';
-import ListDivider from './divider';
-import ListCheckbox from './checkbox';
-import ListSubHeader from './subheader';
-
-export default {List, ListItem, ListDivider, ListCheckbox, ListSubHeader};
+export List from './List';
+export ListItem from './Item';
+export ListDivider from './Divider';
+export ListCheckbox from './Checkbox';
+export ListSubHeader from './Subheader';
diff --git a/components/list/item.jsx b/components/list/item.jsx
index cd8dc9a9d..c5a259c64 100644
--- a/components/list/item.jsx
+++ b/components/list/item.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import FontIcon from '../font_icon';
-import ListItemContent from './content';
+import ListItemContent from './Content';
 import Ripple from '../ripple';
 import style from './style';
 
@@ -8,9 +8,11 @@ class ListItem extends React.Component {
   static propTypes = {
     avatar: React.PropTypes.string,
     caption: React.PropTypes.string.isRequired,
+    className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
     leftIcon: React.PropTypes.string,
     legend: React.PropTypes.string,
+    onClick: React.PropTypes.func,
     rightIcon: React.PropTypes.string,
     ripple: React.PropTypes.bool,
     selectable: React.PropTypes.bool,
@@ -44,11 +46,11 @@ class ListItem extends React.Component {
 
     return (
       <span className={className}>
-        { this.props.leftIcon ? <FontIcon className={`${style.icon} ${style.left}`} value={this.props.leftIcon} /> : null }
-        { this.props.avatar ? <img className={style.avatar} src={this.props.avatar} /> : null }
+        {this.props.leftIcon ? <FontIcon className={`${style.icon} ${style.left}`} value={this.props.leftIcon} /> : null}
+        {this.props.avatar ? <img className={style.avatar} src={this.props.avatar} /> : null}
         <ListItemContent caption={this.props.caption} legend={this.props.legend} />
-        { this.props.ripple ? <Ripple ref='ripple' className={style.ripple} spread={2} /> : null }
-        { this.props.rightIcon ? <FontIcon className={`${style.icon} ${style.right}`} value={this.props.rightIcon} /> : null }
+        {this.props.ripple ? <Ripple ref='ripple' className={style.ripple} spread={2} /> : null}
+        {this.props.rightIcon ? <FontIcon className={`${style.icon} ${style.right}`} value={this.props.rightIcon} /> : null}
       </span>
     );
   }
@@ -56,7 +58,7 @@ class ListItem extends React.Component {
   render () {
     return (
       <li className={style['list-item']} onClick={this.handleClick} onMouseDown={this.handleMouseDown}>
-        { this.props.to ? <a href={this.props.to}>{this.renderContent()}</a> : this.renderContent() }
+        {this.props.to ? <a href={this.props.to}>{this.renderContent()}</a> : this.renderContent()}
       </li>
     );
   }
diff --git a/components/list/list.jsx b/components/list/list.jsx
index d020999d4..4e44bdebb 100644
--- a/components/list/list.jsx
+++ b/components/list/list.jsx
@@ -1,9 +1,10 @@
 import React from 'react';
-import ListItem from './item';
+import ListItem from './Item';
 import style from './style';
 
 class List extends React.Component {
   static propTypes = {
+    children: React.PropTypes.node,
     className: React.PropTypes.string,
     ripple: React.PropTypes.bool,
     selectable: React.PropTypes.bool
diff --git a/components/list/subheader.jsx b/components/list/subheader.jsx
index a5fcd3426..690f337be 100644
--- a/components/list/subheader.jsx
+++ b/components/list/subheader.jsx
@@ -8,7 +8,8 @@ const ListSubHeader = (props) => {
 };
 
 ListSubHeader.propTypes = {
-  caption: React.PropTypes.string
+  caption: React.PropTypes.string,
+  className: React.PropTypes.string
 };
 
 export default ListSubHeader;
diff --git a/components/menu/icon_menu.jsx b/components/menu/IconMenu.jsx
similarity index 89%
rename from components/menu/icon_menu.jsx
rename to components/menu/IconMenu.jsx
index cf7c03712..0d875a3eb 100644
--- a/components/menu/icon_menu.jsx
+++ b/components/menu/IconMenu.jsx
@@ -1,19 +1,20 @@
 import React from 'react';
 import FontIcon from '../font_icon';
-import Menu from './menu';
+import Menu from './Menu';
 import Ripple from '../ripple';
 import style from './style.icon_menu';
 
 class IconMenu extends React.Component {
   static propTypes = {
+    children: React.PropTypes.node,
     className: React.PropTypes.string,
     icon: React.PropTypes.string,
     iconRipple: React.PropTypes.bool,
     menuRipple: React.PropTypes.bool,
     onClick: React.PropTypes.func,
     onHide: React.PropTypes.func,
-    onShow: React.PropTypes.func,
     onSelect: React.PropTypes.func,
+    onShow: React.PropTypes.func,
     position: React.PropTypes.string,
     selectable: React.PropTypes.bool,
     selected: React.PropTypes.any
@@ -61,9 +62,9 @@ class IconMenu extends React.Component {
           selectable={this.props.selectable}
           selected={this.props.selected}
         >
-          { this.props.children }
+          {this.props.children}
         </Menu>
-        { this.props.iconRipple ? <Ripple ref='ripple' className={style.ripple} spread={2.4} centered /> : null }
+        {this.props.iconRipple ? <Ripple ref='ripple' className={style.ripple} spread={2.4} centered /> : null}
       </div>
     );
   }
diff --git a/components/menu/menu_divider.jsx b/components/menu/MenuDivider.jsx
similarity index 100%
rename from components/menu/menu_divider.jsx
rename to components/menu/MenuDivider.jsx
diff --git a/components/menu/menu_item.jsx b/components/menu/MenuItem.jsx
similarity index 76%
rename from components/menu/menu_item.jsx
rename to components/menu/MenuItem.jsx
index a827d81dd..221ab111c 100644
--- a/components/menu/menu_item.jsx
+++ b/components/menu/MenuItem.jsx
@@ -9,9 +9,10 @@ class MenuItem extends React.Component {
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
     icon: React.PropTypes.string,
+    onClick: React.PropTypes.func,
     ripple: React.PropTypes.bool,
-    shortcut: React.PropTypes.string,
-    selected: React.PropTypes.bool
+    selected: React.PropTypes.bool,
+    shortcut: React.PropTypes.string
   };
 
   static defaultProps = {
@@ -46,10 +47,10 @@ class MenuItem extends React.Component {
         onClick={this.handleClick}
         onMouseDown={this.handleMouseDown}
       >
-        { this.props.icon ? <FontIcon value={this.props.icon} className={style.icon}/> : null }
+        {this.props.icon ? <FontIcon value={this.props.icon} className={style.icon}/> : null}
         <span className={style.caption}>{this.props.caption}</span>
-        { this.props.shortcut ? <small className={style.shortcut}>{this.props.shortcut}</small> : null }
-        { this.props.ripple ? <Ripple ref='ripple' className={style.ripple} spread={2.5} /> : null }
+        {this.props.shortcut ? <small className={style.shortcut}>{this.props.shortcut}</small> : null}
+        {this.props.ripple ? <Ripple ref='ripple' className={style.ripple} spread={2.5} /> : null}
       </li>
     );
   }
diff --git a/components/menu/index.jsx b/components/menu/index.jsx
index d26b5a90e..779e68d19 100644
--- a/components/menu/index.jsx
+++ b/components/menu/index.jsx
@@ -1,11 +1,4 @@
-import Menu from './menu';
-import MenuItem from './menu_item';
-import MenuDivider from './menu_divider';
-import IconMenu from './icon_menu';
-
-export default {
-  Menu,
-  MenuItem,
-  MenuDivider,
-  IconMenu
-};
+export Menu from './Menu';
+export MenuItem from './MenuItem';
+export MenuDivider from './MenuDivider';
+export IconMenu from './IconMenu';
diff --git a/components/menu/menu.jsx b/components/menu/menu.jsx
index 9157067bd..8f1507ec0 100644
--- a/components/menu/menu.jsx
+++ b/components/menu/menu.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import MenuItem from './menu_item';
+import MenuItem from './MenuItem';
 import { events, utils } from '../utils';
 import style from './style.menu';
 
@@ -16,6 +16,7 @@ const POSITION = {
 class Menu extends React.Component {
   static propTypes = {
     active: React.PropTypes.bool,
+    children: React.PropTypes.node,
     className: React.PropTypes.string,
     onHide: React.PropTypes.func,
     onSelect: React.PropTypes.func,
@@ -46,15 +47,6 @@ class Menu extends React.Component {
     this.setState({ position, width, height });
   }
 
-  componentDidUpdate (prevProps, prevState) {
-    if (prevState.active && !this.state.active) {
-      if (this.props.onHide) this.props.onHide();
-      events.removeEventsFromDocument({click: this.handleDocumentClick});
-    } else if (!prevState.active && this.state.active && this.props.onShow) {
-      this.props.onShow();
-    }
-  }
-
   componentWillReceiveProps (nextProps) {
     if (this.props.position !== nextProps.position) {
       const position = nextProps.position === POSITION.AUTO ? this.calculatePosition() : nextProps.position;
@@ -62,12 +54,6 @@ class Menu extends React.Component {
     }
   }
 
-  componentWillUpdate (prevState, nextState) {
-    if (!prevState.active && nextState.active) {
-      events.addEventsToDocument({click: this.handleDocumentClick});
-    }
-  }
-
   shouldComponentUpdate (nextProps, nextState) {
     if (!this.state.active && nextState.active && this.props.position === POSITION.AUTO) {
       const position = this.calculatePosition();
@@ -81,6 +67,21 @@ class Menu extends React.Component {
     return true;
   }
 
+  componentWillUpdate (prevState, nextState) {
+    if (!prevState.active && nextState.active) {
+      events.addEventsToDocument({click: this.handleDocumentClick});
+    }
+  }
+
+  componentDidUpdate (prevProps, prevState) {
+    if (prevState.active && !this.state.active) {
+      if (this.props.onHide) this.props.onHide();
+      events.removeEventsFromDocument({click: this.handleDocumentClick});
+    } else if (!prevState.active && this.state.active && this.props.onShow) {
+      this.props.onShow();
+    }
+  }
+
   handleDocumentClick = (event) => {
     if (this.state.active && !events.targetIsDescendant(event, ReactDOM.findDOMNode(this))) {
       this.setState({active: false, rippled: false});
@@ -149,21 +150,13 @@ class Menu extends React.Component {
 
     return (
       <div className={className} style={this.getRootStyle()}>
-        { this.props.outline ? <div className={style.outline} style={outlineStyle}></div> : null }
+        {this.props.outline ? <div className={style.outline} style={outlineStyle}></div> : null}
         <ul ref='menu' className={style.menu} style={this.getMenuStyle()}>
-          { this.renderItems() }
+          {this.renderItems()}
         </ul>
       </div>
     );
   }
-
-  show () {
-    this.setState({active: true});
-  }
-
-  hide () {
-    this.setState({active: false});
-  }
 }
 
 export default Menu;

From cfebdb55f48d35cf316b070f49fd5f1fec7dc028 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 22 Nov 2015 21:41:28 +0100
Subject: [PATCH 0139/1024] Rename most components index to actual components

---
 .babelrc                                      |   4 +-
 .eslintrc                                     |   2 +-
 components/animations/index.js                |   6 +-
 components/app/{index.js => index.jsx}        |   0
 components/app_bar/{index.js => index.jsx}    |   0
 .../autocomplete/{index.js => index.jsx}      |   0
 components/button/{index.js => index.jsx}     |   0
 components/card/{index.js => index.jsx}       |   0
 components/checkbox/{index.js => index.jsx}   |   0
 components/date_picker/DatePickerDialog.jsx   |   2 +-
 .../calendar/{index.js => index.jsx}          |   0
 .../date_picker/{index.js => index.jsx}       |   0
 components/dialog/{index.js => index.jsx}     |   0
 components/drawer/{index.js => index.jsx}     |   0
 components/dropdown/{index.js => index.jsx}   |   0
 components/dropdown/readme.md                 |   2 +-
 components/font_icon/{index.js => index.jsx}  |   0
 components/form/{index.js => index.jsx}       |   0
 components/input/{index.js => index.jsx}      |   0
 components/link/{index.js => index.jsx}       |   0
 components/list/list.jsx                      |   2 +-
 components/navigation/Navigation.jsx          |  42 +++
 components/navigation/index.jsx               |  42 +--
 components/overlay/Overlay.jsx                |  62 ++++
 components/overlay/index.jsx                  |  62 +---
 components/progress_bar/ProgressBar.jsx       |  89 ++++++
 components/progress_bar/index.jsx             |  90 +-----
 .../{radio_button.jsx => RadioButton.jsx}     |  18 +-
 .../radio/{radio_group.jsx => RadioGroup.jsx} |   3 +-
 components/radio/index.jsx                    |   6 +-
 components/ripple/Ripple.jsx                  |  77 +++++
 components/ripple/index.jsx                   |  78 +----
 components/slider/Slider.jsx                  | 279 +++++++++++++++++
 components/slider/index.jsx                   | 280 +-----------------
 components/snackbar/Snackbar.jsx              |  57 ++++
 components/snackbar/index.jsx                 |  58 +---
 components/switch/Switch.jsx                  |  76 +++++
 components/switch/index.jsx                   |  77 +----
 components/table/Table.jsx                    |  95 ++++++
 components/table/{head.jsx => TableHead.jsx}  |   0
 components/table/{row.jsx => TableRow.jsx}    |   5 +-
 components/table/index.jsx                    |  96 +-----
 components/table/readme.md                    |   2 +-
 .../tabs/{content.jsx => TabContent.jsx}      |   1 +
 components/tabs/index.jsx                     |   6 +-
 components/tabs/tabs.jsx                      |  19 +-
 components/time_picker/TimePicker.jsx         |  65 ++++
 .../{dialog.jsx => TimePickerDialog.jsx}      |   6 +-
 components/time_picker/clock/Clock.jsx        | 106 +++++++
 components/time_picker/clock/face.jsx         |  12 +-
 components/time_picker/clock/hand.jsx         |   7 +-
 components/time_picker/clock/hours.jsx        |  11 +-
 components/time_picker/clock/index.jsx        | 107 +------
 components/time_picker/clock/minutes.jsx      |  11 +-
 components/time_picker/index.jsx              |  66 +----
 components/tooltip/Tooltip.jsx                |  69 +++++
 components/tooltip/index.jsx                  |  70 +----
 .../main/modules/examples/table_example_1.txt |   2 +-
 spec/components/dropdown.jsx                  |   2 +-
 spec/components/icon_menu.jsx                 |   6 +-
 spec/components/snackbar.jsx                  |   8 +-
 spec/components/table.jsx                     |   2 +-
 62 files changed, 1108 insertions(+), 1080 deletions(-)
 rename components/app/{index.js => index.jsx} (100%)
 rename components/app_bar/{index.js => index.jsx} (100%)
 rename components/autocomplete/{index.js => index.jsx} (100%)
 rename components/button/{index.js => index.jsx} (100%)
 rename components/card/{index.js => index.jsx} (100%)
 rename components/checkbox/{index.js => index.jsx} (100%)
 rename components/date_picker/calendar/{index.js => index.jsx} (100%)
 rename components/date_picker/{index.js => index.jsx} (100%)
 rename components/dialog/{index.js => index.jsx} (100%)
 rename components/drawer/{index.js => index.jsx} (100%)
 rename components/dropdown/{index.js => index.jsx} (100%)
 rename components/font_icon/{index.js => index.jsx} (100%)
 rename components/form/{index.js => index.jsx} (100%)
 rename components/input/{index.js => index.jsx} (100%)
 rename components/link/{index.js => index.jsx} (100%)
 create mode 100644 components/navigation/Navigation.jsx
 create mode 100644 components/overlay/Overlay.jsx
 create mode 100644 components/progress_bar/ProgressBar.jsx
 rename components/radio/{radio_button.jsx => RadioButton.jsx} (95%)
 rename components/radio/{radio_group.jsx => RadioGroup.jsx} (93%)
 create mode 100644 components/ripple/Ripple.jsx
 create mode 100644 components/slider/Slider.jsx
 create mode 100644 components/snackbar/Snackbar.jsx
 create mode 100644 components/switch/Switch.jsx
 create mode 100644 components/table/Table.jsx
 rename components/table/{head.jsx => TableHead.jsx} (100%)
 rename components/table/{row.jsx => TableRow.jsx} (95%)
 rename components/tabs/{content.jsx => TabContent.jsx} (94%)
 create mode 100644 components/time_picker/TimePicker.jsx
 rename components/time_picker/{dialog.jsx => TimePickerDialog.jsx} (94%)
 create mode 100644 components/time_picker/clock/Clock.jsx
 create mode 100644 components/tooltip/Tooltip.jsx

diff --git a/.babelrc b/.babelrc
index 99113d594..06454b6f8 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,6 +1,6 @@
 {
-  "stage": 1,
-  "optional": ["es7.classProperties"],
+  "stage": 2,
+  "optional": ["es7.classProperties", "es7.exportExtensions"],
   "env": {
     "development": {
       "plugins": ["react-transform"],
diff --git a/.eslintrc b/.eslintrc
index 5b38b7a81..043e6ba2e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -227,7 +227,7 @@
     "react/no-danger": 0,
     "react/no-did-mount-set-state": 0,
     "react/no-did-update-set-state": 1,
-    "react/no-multi-comp": 1,
+    "react/no-multi-comp": 0,
     "react/no-unknown-property": 1,
     "react/prop-types": [2, {"ignore": ["onMouseDown", "onTouchStart"]}],
     "react/react-in-jsx-scope": 1,
diff --git a/components/animations/index.js b/components/animations/index.js
index c4bac431c..3fb4f3f73 100644
--- a/components/animations/index.js
+++ b/components/animations/index.js
@@ -1,4 +1,2 @@
-import SlideLeft from './slide-left';
-import SlideRight from './slide-right';
-
-export default {SlideLeft, SlideRight};
+export SlideLeft from './slide-left';
+export SlideRight from './slide-right';
diff --git a/components/app/index.js b/components/app/index.jsx
similarity index 100%
rename from components/app/index.js
rename to components/app/index.jsx
diff --git a/components/app_bar/index.js b/components/app_bar/index.jsx
similarity index 100%
rename from components/app_bar/index.js
rename to components/app_bar/index.jsx
diff --git a/components/autocomplete/index.js b/components/autocomplete/index.jsx
similarity index 100%
rename from components/autocomplete/index.js
rename to components/autocomplete/index.jsx
diff --git a/components/button/index.js b/components/button/index.jsx
similarity index 100%
rename from components/button/index.js
rename to components/button/index.jsx
diff --git a/components/card/index.js b/components/card/index.jsx
similarity index 100%
rename from components/card/index.js
rename to components/card/index.jsx
diff --git a/components/checkbox/index.js b/components/checkbox/index.jsx
similarity index 100%
rename from components/checkbox/index.js
rename to components/checkbox/index.jsx
diff --git a/components/date_picker/DatePickerDialog.jsx b/components/date_picker/DatePickerDialog.jsx
index ee6f08457..6df5cfa55 100644
--- a/components/date_picker/DatePickerDialog.jsx
+++ b/components/date_picker/DatePickerDialog.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import Calendar from './calendar';
-import Dialog from '../Dialog';
+import Dialog from '../dialog';
 import style from './style';
 import time from '../utils/time';
 
diff --git a/components/date_picker/calendar/index.js b/components/date_picker/calendar/index.jsx
similarity index 100%
rename from components/date_picker/calendar/index.js
rename to components/date_picker/calendar/index.jsx
diff --git a/components/date_picker/index.js b/components/date_picker/index.jsx
similarity index 100%
rename from components/date_picker/index.js
rename to components/date_picker/index.jsx
diff --git a/components/dialog/index.js b/components/dialog/index.jsx
similarity index 100%
rename from components/dialog/index.js
rename to components/dialog/index.jsx
diff --git a/components/drawer/index.js b/components/drawer/index.jsx
similarity index 100%
rename from components/drawer/index.js
rename to components/drawer/index.jsx
diff --git a/components/dropdown/index.js b/components/dropdown/index.jsx
similarity index 100%
rename from components/dropdown/index.js
rename to components/dropdown/index.jsx
diff --git a/components/dropdown/readme.md b/components/dropdown/readme.md
index eeb9e2606..39609dfe6 100644
--- a/components/dropdown/readme.md
+++ b/components/dropdown/readme.md
@@ -25,7 +25,7 @@ class DropdownTest extends React.Component {
   render () {
     return (
       <Dropdown
-        auto={true}
+        auto
         onChange={this.handleChange}
         source={countries}
         value={this.state.value}
diff --git a/components/font_icon/index.js b/components/font_icon/index.jsx
similarity index 100%
rename from components/font_icon/index.js
rename to components/font_icon/index.jsx
diff --git a/components/form/index.js b/components/form/index.jsx
similarity index 100%
rename from components/form/index.js
rename to components/form/index.jsx
diff --git a/components/input/index.js b/components/input/index.jsx
similarity index 100%
rename from components/input/index.js
rename to components/input/index.jsx
diff --git a/components/link/index.js b/components/link/index.jsx
similarity index 100%
rename from components/link/index.js
rename to components/link/index.jsx
diff --git a/components/list/list.jsx b/components/list/list.jsx
index 4e44bdebb..dd4af432b 100644
--- a/components/list/list.jsx
+++ b/components/list/list.jsx
@@ -34,7 +34,7 @@ class List extends React.Component {
     if (this.props.className) className += ` ${this.props.className}`;
     return (
       <ul className={className}>
-        { this.renderItems() }
+        {this.renderItems()}
       </ul>
     );
   }
diff --git a/components/navigation/Navigation.jsx b/components/navigation/Navigation.jsx
new file mode 100644
index 000000000..be1b92078
--- /dev/null
+++ b/components/navigation/Navigation.jsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import style from './style';
+import Button from '../button';
+import Link from '../link';
+
+const Navigation = props => {
+  let className = `${style[props.type]}`;
+  if (props.className) className += ` ${props.className}`;
+
+  const buttons = props.actions.map((action, index) => {
+    return <Button className={style.button} key={index} {...action} />;
+  });
+
+  const links = props.routes.map((route, index) => {
+    return <Link className={style.link} key={index} {...route} />;
+  });
+
+  return (
+    <nav data-react-toolbox='navigation' className={className}>
+      {links}
+      {buttons}
+      {props.children}
+    </nav>
+  );
+};
+
+Navigation.propTypes = {
+  actions: React.PropTypes.array,
+  children: React.PropTypes.node,
+  className: React.PropTypes.string,
+  routes: React.PropTypes.array,
+  type: React.PropTypes.oneOf(['vertical', 'horizontal'])
+};
+
+Navigation.defaultProps = {
+  actions: [],
+  className: '',
+  type: 'horizontal',
+  routes: []
+};
+
+export default Navigation;
diff --git a/components/navigation/index.jsx b/components/navigation/index.jsx
index ee960f392..71ba44354 100644
--- a/components/navigation/index.jsx
+++ b/components/navigation/index.jsx
@@ -1,41 +1 @@
-import React from 'react';
-import style from './style';
-import Button from '../button';
-import Link from '../link';
-
-const Navigation = props => {
-  let className = `${style[props.type]}`;
-  if (props.className) className += ` ${props.className}`;
-
-  const buttons = props.actions.map((action, index) => {
-    return <Button className={style.button} key={index} {...action} />;
-  });
-
-  const links = props.routes.map((route, index) => {
-    return <Link className={style.link} key={index} {...route} />;
-  });
-
-  return (
-    <nav data-react-toolbox='navigation' className={className}>
-      { links }
-      { buttons }
-      { props.children }
-    </nav>
-  );
-};
-
-Navigation.propTypes = {
-  actions: React.PropTypes.array,
-  className: React.PropTypes.string,
-  routes: React.PropTypes.array,
-  type: React.PropTypes.oneOf(['vertical', 'horizontal'])
-};
-
-Navigation.defaultProps = {
-  actions: [],
-  className: '',
-  type: 'horizontal',
-  routes: []
-};
-
-export default Navigation;
+export default from './Navigation.jsx';
diff --git a/components/overlay/Overlay.jsx b/components/overlay/Overlay.jsx
new file mode 100644
index 000000000..09c9cf124
--- /dev/null
+++ b/components/overlay/Overlay.jsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import style from './style';
+
+class Overlay extends React.Component {
+  static propTypes = {
+    active: React.PropTypes.bool,
+    children: React.PropTypes.node,
+    className: React.PropTypes.string,
+    onClick: React.PropTypes.func,
+    opacity: React.PropTypes.number
+  };
+
+  static defaultProps = {
+    opacity: 0.5
+  };
+
+  componentDidMount () {
+    this.app = document.querySelector('[data-react-toolbox="app"]') || document.body;
+    this.node = document.createElement('div');
+    this.node.setAttribute('data-react-toolbox', 'overlay');
+    this.app.appendChild(this.node);
+    this.handleRender();
+  }
+
+  componentDidUpdate () {
+    this.handleRender();
+  }
+
+  componentWillUnmount () {
+    ReactDOM.unmountComponentAtNode(this.node);
+    this.app.removeChild(this.node);
+  }
+
+  handleRender () {
+    let className = style.root;
+    const overlayStyle = {};
+
+    if (this.props.active) {
+      className += ` ${style.active}`;
+      overlayStyle.opacity = this.props.opacity;
+    }
+    if (this.props.className) className += ` ${className}`;
+
+    ReactDOM.render(
+      <div className={className}>
+        <div
+          className={style.overlay}
+          onClick={this.props.onClick}
+          style={overlayStyle}
+        />
+        {this.props.children}
+      </div>
+    , this.node);
+  }
+
+  render () {
+    return React.DOM.noscript();
+  }
+}
+
+export default Overlay;
diff --git a/components/overlay/index.jsx b/components/overlay/index.jsx
index 55e7e0b32..030b11847 100644
--- a/components/overlay/index.jsx
+++ b/components/overlay/index.jsx
@@ -1,61 +1 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import style from './style';
-
-class Overlay extends React.Component {
-  static propTypes = {
-    active: React.PropTypes.bool,
-    className: React.PropTypes.string,
-    onClick: React.PropTypes.func,
-    opacity: React.PropTypes.number
-  };
-
-  static defaultProps = {
-    opacity: 0.5
-  };
-
-  componentDidMount () {
-    this.app = document.querySelector('[data-react-toolbox="app"]') || document.body;
-    this.node = document.createElement('div');
-    this.node.setAttribute('data-react-toolbox', 'overlay');
-    this.app.appendChild(this.node);
-    this.handleRender();
-  }
-
-  componentDidUpdate () {
-    this.handleRender();
-  }
-
-  componentWillUnmount () {
-    ReactDOM.unmountComponentAtNode(this.node);
-    this.app.removeChild(this.node);
-  }
-
-  handleRender () {
-    let className = style.root;
-    const overlayStyle = {};
-
-    if (this.props.active) {
-      className += ` ${style.active}`;
-      overlayStyle.opacity = this.props.opacity;
-    }
-    if (this.props.className) className += ` ${className}`;
-
-    ReactDOM.render(
-      <div className={className}>
-        <div
-          className={style.overlay}
-          onClick={this.props.onClick}
-          style={overlayStyle}
-        />
-        {this.props.children}
-      </div>
-    , this.node);
-  }
-
-  render () {
-    return React.DOM.noscript();
-  }
-}
-
-export default Overlay;
+export default from './Overlay.jsx';
diff --git a/components/progress_bar/ProgressBar.jsx b/components/progress_bar/ProgressBar.jsx
new file mode 100644
index 000000000..f01089ae6
--- /dev/null
+++ b/components/progress_bar/ProgressBar.jsx
@@ -0,0 +1,89 @@
+import React from 'react';
+import style from './style';
+import prefixer from '../utils/prefixer';
+
+class ProgressBar extends React.Component {
+  static propTypes = {
+    buffer: React.PropTypes.number,
+    className: React.PropTypes.string,
+    max: React.PropTypes.number,
+    min: React.PropTypes.number,
+    mode: React.PropTypes.string,
+    multicolor: React.PropTypes.bool,
+    type: React.PropTypes.string,
+    value: React.PropTypes.number
+  };
+
+  static defaultProps = {
+    buffer: 0,
+    className: '',
+    max: 100,
+    min: 0,
+    mode: 'indeterminate',
+    multicolor: false,
+    type: 'linear',
+    value: 0
+  };
+
+  calculateRatio (value) {
+    if (value < this.props.min) return 0;
+    if (value > this.props.max) return 1;
+    return (value - this.props.min) / (this.props.max - this.props.min);
+  }
+
+  circularStyle () {
+    if (this.props.mode !== 'indeterminate') {
+      return {strokeDasharray: `${2 * Math.PI * 25 * this.calculateRatio(this.props.value)}, 400`};
+    }
+  }
+
+  linearStyle () {
+    if (this.props.mode !== 'indeterminate') {
+      return {
+        buffer: prefixer({transform: `scaleX(${this.calculateRatio(this.props.buffer)})`}),
+        value: prefixer({transform: `scaleX(${this.calculateRatio(this.props.value)})`})
+      };
+    } else {
+      return {};
+    }
+  }
+
+  renderCircular () {
+    return (
+      <svg className={style.circle}>
+        <circle className={style.path} style={this.circularStyle()} cx='30' cy='30' r='25' />
+      </svg>
+    );
+  }
+
+  renderLinear () {
+    const {buffer, value} = this.linearStyle();
+    return (
+      <div>
+        <span ref='buffer' data-ref='buffer' className={style.buffer} style={buffer}></span>
+        <span ref='value' data-ref='value' className={style.value} style={value}></span>
+      </div>
+    );
+  }
+
+  render () {
+    let className = this.props.type === 'linear' ? style.linear : style.circular;
+    if (this.props.mode) className += ` ${style[this.props.mode]}`;
+    if (this.props.multicolor) className += ` ${style.multicolor}`;
+    if (this.props.className) className += ` ${this.props.className}`;
+
+    return (
+      <div
+        data-react-toolbox='progress-bar'
+        aria-valuenow={this.props.value}
+        aria-valuemin={this.props.min}
+        aria-valuemax={this.props.max}
+        className={className}
+      >
+        {this.props.type === 'circular' ? this.renderCircular() : this.renderLinear()}
+      </div>
+    );
+  }
+}
+
+export default ProgressBar;
diff --git a/components/progress_bar/index.jsx b/components/progress_bar/index.jsx
index 7016da9d2..1b73e214d 100644
--- a/components/progress_bar/index.jsx
+++ b/components/progress_bar/index.jsx
@@ -1,89 +1 @@
-import React from 'react';
-import style from './style';
-import prefixer from '../utils/prefixer';
-
-class ProgressBar extends React.Component {
-  static propTypes = {
-    buffer: React.PropTypes.number,
-    className: React.PropTypes.string,
-    max: React.PropTypes.number,
-    min: React.PropTypes.number,
-    mode: React.PropTypes.string,
-    multicolor: React.PropTypes.bool,
-    type: React.PropTypes.string,
-    value: React.PropTypes.number
-  };
-
-  static defaultProps = {
-    buffer: 0,
-    className: '',
-    max: 100,
-    min: 0,
-    mode: 'indeterminate',
-    multicolor: false,
-    type: 'linear',
-    value: 0
-  };
-
-  calculateRatio (value) {
-    if (value < this.props.min) return 0;
-    if (value > this.props.max) return 1;
-    return (value - this.props.min) / (this.props.max - this.props.min);
-  }
-
-  circularStyle () {
-    if (this.props.mode !== 'indeterminate') {
-      return {strokeDasharray: `${2 * Math.PI * 25 * this.calculateRatio(this.props.value)}, 400`};
-    }
-  }
-
-  linearStyle () {
-    if (this.props.mode !== 'indeterminate') {
-      return {
-        buffer: prefixer({transform: `scaleX(${this.calculateRatio(this.props.buffer)})`}),
-        value: prefixer({transform: `scaleX(${this.calculateRatio(this.props.value)})`})
-      };
-    } else {
-      return {};
-    }
-  }
-
-  renderCircular () {
-    return (
-      <svg className={style.circle}>
-        <circle className={style.path} style={this.circularStyle()} cx='30' cy='30' r='25' />
-      </svg>
-    );
-  }
-
-  renderLinear () {
-    const {buffer, value} = this.linearStyle();
-    return (
-      <div>
-        <span ref='buffer' data-ref='buffer' className={style.buffer} style={buffer}></span>
-        <span ref='value' data-ref='value' className={style.value} style={value}></span>
-      </div>
-    );
-  }
-
-  render () {
-    let className = this.props.type === 'linear' ? style.linear : style.circular;
-    if (this.props.mode) className += ` ${style[this.props.mode]}`;
-    if (this.props.multicolor) className += ` ${style.multicolor}`;
-    if (this.props.className) className += ` ${this.props.className}`;
-
-    return (
-      <div
-        data-react-toolbox='progress-bar'
-        aria-valuenow={this.props.value}
-        aria-valuemin={this.props.min}
-        aria-valuemax={this.props.max}
-        className={className}
-      >
-        { this.props.type === 'circular' ? this.renderCircular() : this.renderLinear() }
-      </div>
-    );
-  }
-}
-
-export default ProgressBar;
+export default from './ProgressBar.jsx';
diff --git a/components/radio/radio_button.jsx b/components/radio/RadioButton.jsx
similarity index 95%
rename from components/radio/radio_button.jsx
rename to components/radio/RadioButton.jsx
index f65ed1760..4c2d681b7 100644
--- a/components/radio/radio_button.jsx
+++ b/components/radio/RadioButton.jsx
@@ -41,6 +41,14 @@ class RadioButton extends React.Component {
     if (!this.props.disabled) this.refs.ripple.start(event);
   };
 
+  blur () {
+    this.refs.input.blur();
+  }
+
+  focus () {
+    this.refs.input.focus();
+  }
+
   render () {
     let labelClassName = style[this.props.disabled ? 'disabled' : 'field'];
     const radioClassName = style[this.props.checked ? 'radio-checked' : 'radio'];
@@ -59,18 +67,10 @@ class RadioButton extends React.Component {
         <span role='radio' className={radioClassName} onMouseDown={this.handleMouseDown}>
           <Ripple ref='ripple' role='ripple' className={style.ripple} spread={3} centered />
         </span>
-        { this.props.label ? <span className={style.text}>{this.props.label}</span> : null }
+        {this.props.label ? <span className={style.text}>{this.props.label}</span> : null}
       </label>
     );
   }
-
-  blur () {
-    this.refs.input.blur();
-  }
-
-  focus () {
-    this.refs.input.focus();
-  }
 }
 
 export default RadioButton;
diff --git a/components/radio/radio_group.jsx b/components/radio/RadioGroup.jsx
similarity index 93%
rename from components/radio/radio_group.jsx
rename to components/radio/RadioGroup.jsx
index f3835fefa..9dae4c2e6 100644
--- a/components/radio/radio_group.jsx
+++ b/components/radio/RadioGroup.jsx
@@ -1,8 +1,9 @@
 import React from 'react';
-import RadioButton from './radio_button';
+import RadioButton from './RadioButton';
 
 class RadioGroup extends React.Component {
   static propTypes = {
+    children: React.PropTypes.node,
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
     name: React.PropTypes.string,
diff --git a/components/radio/index.jsx b/components/radio/index.jsx
index 9e887e90f..bd8f8fcc8 100644
--- a/components/radio/index.jsx
+++ b/components/radio/index.jsx
@@ -1,4 +1,2 @@
-import RadioButton from './radio_button';
-import RadioGroup from './radio_group';
-
-export default {RadioButton, RadioGroup};
+export RadioButton from './RadioButton';
+export RadioGroup from './RadioGroup';
diff --git a/components/ripple/Ripple.jsx b/components/ripple/Ripple.jsx
new file mode 100644
index 000000000..cf2d96f24
--- /dev/null
+++ b/components/ripple/Ripple.jsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import prefixer from '../utils/prefixer';
+import style from './style';
+
+class Ripple extends React.Component {
+  static propTypes = {
+    centered: React.PropTypes.bool,
+    className: React.PropTypes.string,
+    loading: React.PropTypes.bool,
+    spread: React.PropTypes.number
+  };
+
+  static defaultProps = {
+    centered: false,
+    className: '',
+    loading: false,
+    spread: 2
+  };
+
+  state = {
+    active: false,
+    left: null,
+    restarting: false,
+    top: null,
+    width: null
+  };
+
+  handleEnd = () => {
+    document.removeEventListener(this.touch ? 'touchend' : 'mouseup', this.handleEnd);
+    this.setState({active: false});
+  };
+
+  start = ({pageX, pageY}, touch = false) => {
+    this.touch = touch;
+    document.addEventListener(this.touch ? 'touchend' : 'mouseup', this.handleEnd);
+    const {top, left, width} = this._getDescriptor(pageX, pageY);
+    this.setState({active: false, restarting: true, top, left, width}, () => {
+      this.refs.ripple.offsetWidth;  //eslint-disable-line no-unused-expressions
+      this.setState({active: true, restarting: false});
+    });
+  };
+
+  _getDescriptor (pageX, pageY) {
+    const {left, top, height, width} = ReactDOM.findDOMNode(this).getBoundingClientRect();
+    return {
+      left: this.props.centered ? 0 : pageX - left - width / 2 + window.scrollX,
+      top: this.props.centered ? 0 : pageY - top - height / 2 + window.scrollY,
+      width: width * this.props.spread
+    };
+  }
+
+  render () {
+    const { left, top, width } = this.state;
+    const scale = this.state.restarting ? 0 : 1;
+    let rippleStyle = {width, height: width};
+
+    if (!this.props.loading) {
+      rippleStyle = prefixer({
+        transform: `translate3d(${-width / 2 + left}px, ${-width / 2 + top}px, 0) scale(${scale})`
+      }, rippleStyle);
+    }
+
+    let className = style[this.props.loading ? 'loading' : 'normal'];
+    if (this.state.active) className += ` ${style.active}`;
+    if (this.state.restarting) className += ` ${style.restarting}`;
+    if (this.props.className) className += ` ${this.props.className}`;
+
+    return (
+      <span data-react-toolbox='ripple' className={style.wrapper}>
+        <span ref='ripple' role='ripple' className={className} style={rippleStyle} />
+      </span>
+    );
+  }
+}
+
+export default Ripple;
diff --git a/components/ripple/index.jsx b/components/ripple/index.jsx
index cf2d96f24..b065179d2 100644
--- a/components/ripple/index.jsx
+++ b/components/ripple/index.jsx
@@ -1,77 +1 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import prefixer from '../utils/prefixer';
-import style from './style';
-
-class Ripple extends React.Component {
-  static propTypes = {
-    centered: React.PropTypes.bool,
-    className: React.PropTypes.string,
-    loading: React.PropTypes.bool,
-    spread: React.PropTypes.number
-  };
-
-  static defaultProps = {
-    centered: false,
-    className: '',
-    loading: false,
-    spread: 2
-  };
-
-  state = {
-    active: false,
-    left: null,
-    restarting: false,
-    top: null,
-    width: null
-  };
-
-  handleEnd = () => {
-    document.removeEventListener(this.touch ? 'touchend' : 'mouseup', this.handleEnd);
-    this.setState({active: false});
-  };
-
-  start = ({pageX, pageY}, touch = false) => {
-    this.touch = touch;
-    document.addEventListener(this.touch ? 'touchend' : 'mouseup', this.handleEnd);
-    const {top, left, width} = this._getDescriptor(pageX, pageY);
-    this.setState({active: false, restarting: true, top, left, width}, () => {
-      this.refs.ripple.offsetWidth;  //eslint-disable-line no-unused-expressions
-      this.setState({active: true, restarting: false});
-    });
-  };
-
-  _getDescriptor (pageX, pageY) {
-    const {left, top, height, width} = ReactDOM.findDOMNode(this).getBoundingClientRect();
-    return {
-      left: this.props.centered ? 0 : pageX - left - width / 2 + window.scrollX,
-      top: this.props.centered ? 0 : pageY - top - height / 2 + window.scrollY,
-      width: width * this.props.spread
-    };
-  }
-
-  render () {
-    const { left, top, width } = this.state;
-    const scale = this.state.restarting ? 0 : 1;
-    let rippleStyle = {width, height: width};
-
-    if (!this.props.loading) {
-      rippleStyle = prefixer({
-        transform: `translate3d(${-width / 2 + left}px, ${-width / 2 + top}px, 0) scale(${scale})`
-      }, rippleStyle);
-    }
-
-    let className = style[this.props.loading ? 'loading' : 'normal'];
-    if (this.state.active) className += ` ${style.active}`;
-    if (this.state.restarting) className += ` ${style.restarting}`;
-    if (this.props.className) className += ` ${this.props.className}`;
-
-    return (
-      <span data-react-toolbox='ripple' className={style.wrapper}>
-        <span ref='ripple' role='ripple' className={className} style={rippleStyle} />
-      </span>
-    );
-  }
-}
-
-export default Ripple;
+export default from './Ripple';
diff --git a/components/slider/Slider.jsx b/components/slider/Slider.jsx
new file mode 100644
index 000000000..fbb0b8072
--- /dev/null
+++ b/components/slider/Slider.jsx
@@ -0,0 +1,279 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import style from './style';
+import events from '../utils/events';
+import prefixer from '../utils/prefixer';
+import utils from '../utils/utils';
+import ProgressBar from '../progress_bar';
+import Input from '../input';
+
+class Slider extends React.Component {
+  static propTypes = {
+    className: React.PropTypes.string,
+    editable: React.PropTypes.bool,
+    max: React.PropTypes.number,
+    min: React.PropTypes.number,
+    onChange: React.PropTypes.func,
+    pinned: React.PropTypes.bool,
+    snaps: React.PropTypes.bool,
+    step: React.PropTypes.number,
+    value: React.PropTypes.number
+  };
+
+  static defaultProps = {
+    className: '',
+    editable: false,
+    max: 100,
+    min: 0,
+    pinned: false,
+    snaps: false,
+    step: 0.01,
+    value: 0
+  };
+
+  state = {
+    inputFocused: false,
+    inputValue: null,
+    sliderLength: 0,
+    sliderStart: 0
+  };
+
+  componentDidMount () {
+    window.addEventListener('resize', this.handleResize);
+    this.handleResize();
+  }
+
+  shouldComponentUpdate (nextProps, nextState) {
+    if (!this.state.inputFocused && nextState.inputFocused) return false;
+    if (this.state.inputFocused && this.props.value !== nextProps.value) {
+      this.setState({inputValue: this.valueForInput(nextProps.value)});
+      return false;
+    }
+    return true;
+  }
+
+  componentWillUnmount () {
+    window.removeEventListener('resize', this.handleResize);
+  }
+
+  handleInputFocus = () => {
+    this.setState({
+      inputFocused: true,
+      inputValue: this.valueForInput(this.props.value)
+    });
+  };
+
+  handleInputChange = (event) => {
+    this.setState({inputValue: event.target.value});
+  };
+
+  handleInputBlur = () => {
+    const value = this.state.inputValue || 0;
+    this.setState({inputFocused: false, inputValue: null}, () => {
+      this.props.onChange(this.trimValue(value));
+    });
+  };
+
+  handleKeyDown = (event) => {
+    if ([13, 27].indexOf(event.keyCode) !== -1) {
+      this.refs.input.blur();
+      ReactDOM.findDOMNode(this).blur();
+    }
+    if (event.keyCode === 38) this.addToValue(this.props.step);
+    if (event.keyCode === 40) this.addToValue(-this.props.step);
+  };
+
+  handleMouseDown = (event) => {
+    if (this.state.inputFocused) this.refs.input.blur();
+    events.addEventsToDocument(this.getMouseEventMap());
+    this.start(events.getMousePosition(event));
+    events.pauseEvent(event);
+  };
+
+  handleMouseMove = (event) => {
+    events.pauseEvent(event);
+    this.move(events.getMousePosition(event));
+  };
+
+  handleMouseUp = () => {
+    this.end(this.getMouseEventMap());
+  };
+
+  handleResize = (event, callback) => {
+    const {left, right} = ReactDOM.findDOMNode(this.refs.progressbar).getBoundingClientRect();
+    const cb = callback || () => {};
+    this.setState({sliderStart: left, sliderLength: right - left}, cb);
+  };
+
+  handleSliderBlur = () => {
+    events.removeEventsFromDocument(this.getKeyboardEvents());
+  };
+
+  handleSliderFocus = () => {
+    events.addEventsToDocument(this.getKeyboardEvents());
+  };
+
+  handleTouchEnd = () => {
+    this.end(this.getTouchEventMap());
+  };
+
+  handleTouchMove = (event) => {
+    this.move(events.getTouchPosition(event));
+  };
+
+  handleTouchStart = (event) => {
+    if (this.state.inputFocused) this.refs.input.blur();
+    this.start(events.getTouchPosition(event));
+    events.addEventsToDocument(this.getTouchEventMap());
+    events.pauseEvent(event);
+  };
+
+  addToValue (increment) {
+    let value = this.state.inputFocused ? parseFloat(this.state.inputValue) : this.props.value;
+    value = this.trimValue(value + increment);
+    if (value !== this.props.value) this.props.onChange(value);
+  }
+
+  getKeyboardEvents () {
+    return {
+      keydown: this.handleKeyDown
+    };
+  }
+
+  getMouseEventMap () {
+    return {
+      mousemove: this.handleMouseMove,
+      mouseup: this.handleMouseUp
+    };
+  }
+
+  getTouchEventMap () {
+    return {
+      touchmove: this.handleTouchMove,
+      touchend: this.handleTouchEnd
+    };
+  }
+
+  end (revents) {
+    events.removeEventsFromDocument(revents);
+    this.setState({ pressed: false });
+  }
+
+  knobOffset () {
+    const { max, min } = this.props;
+    return this.state.sliderLength * (this.props.value - min) / (max - min);
+  }
+
+  move (position) {
+    const newValue = this.positionToValue(position);
+    if (newValue !== this.props.value) this.props.onChange(newValue);
+  }
+
+  positionToValue (position) {
+    const { sliderStart: start, sliderLength: length } = this.state;
+    const { max, min } = this.props;
+    return this.trimValue((position.x - start) / length * (max - min) + min);
+  }
+
+  start (position) {
+    this.handleResize(null, () => {
+      this.setState({pressed: true});
+      this.props.onChange(this.positionToValue(position));
+    });
+  }
+
+  stepDecimals () {
+    return (this.props.step.toString().split('.')[1] || []).length;
+  }
+
+  trimValue (value) {
+    if (value < this.props.min) return this.props.min;
+    if (value > this.props.max) return this.props.max;
+    return utils.round(value, this.stepDecimals());
+  }
+
+  valueForInput (value) {
+    const decimals = this.stepDecimals();
+    return decimals > 0 ? value.toFixed(decimals) : value.toString();
+  }
+
+  renderSnaps () {
+    if (this.props.snaps) {
+      return (
+        <div ref='snaps' className={style.snaps}>
+          {utils.range(0, (this.props.max - this.props.min) / this.props.step).map(i => {
+              return <div key={`span-${i}`} className={style.snap}></div>;
+            })}
+        </div>
+      );
+    }
+  }
+
+  renderInput () {
+    if (this.props.editable) {
+      const value = this.state.inputFocused ? this.state.inputValue : this.valueForInput(this.props.value);
+      return (
+        <Input
+          ref='input'
+          className={style.input}
+          onFocus={this.handleInputFocus}
+          onChange={this.handleInputChange}
+          onBlur={this.handleInputBlur}
+          value={value}
+        />
+      );
+    }
+  }
+
+  render () {
+    const knobStyles = prefixer({transform: `translateX(${this.knobOffset()}px)`});
+    let className = this.props.className;
+    if (this.props.editable) className += ` ${style.editable}`;
+    if (this.props.pinned) className += ` ${style.pinned}`;
+    if (this.state.pressed) className += ` ${style.pressed}`;
+    if (this.props.value === this.props.min) className += ` ${style.ring}`;
+
+    return (
+      <div
+        className={style.root + className}
+        data-react-toolbox='slider'
+        onBlur={this.handleSliderBlur}
+        onFocus={this.handleSliderFocus}
+        tabIndex='0'
+      >
+        <div
+          ref='slider'
+          className={style.container}
+          onMouseDown={this.handleMouseDown}
+          onTouchStart={this.handleTouchStart}
+        >
+          <div
+            ref='knob'
+            className={style.knob}
+            onMouseDown={this.handleMouseDown}
+            onTouchStart={this.handleTouchStart}
+            style={knobStyles}
+          >
+            <div className={style.innerknob} data-value={parseInt(this.props.value)}></div>
+          </div>
+
+          <div className={style.progress}>
+            <ProgressBar
+              ref='progressbar'
+              className={style.innerprogress}
+              max={this.props.max}
+              min={this.props.min}
+              mode='determinate'
+              value={this.props.value}
+            />
+            {this.renderSnaps()}
+          </div>
+        </div>
+
+        {this.renderInput()}
+      </div>
+    );
+  }
+}
+
+export default Slider;
diff --git a/components/slider/index.jsx b/components/slider/index.jsx
index e58e93595..12b099f9b 100644
--- a/components/slider/index.jsx
+++ b/components/slider/index.jsx
@@ -1,279 +1 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import style from './style';
-import events from '../utils/events';
-import prefixer from '../utils/prefixer';
-import utils from '../utils/utils';
-import ProgressBar from '../progress_bar';
-import Input from '../input';
-
-class Slider extends React.Component {
-  static propTypes = {
-    className: React.PropTypes.string,
-    editable: React.PropTypes.bool,
-    max: React.PropTypes.number,
-    min: React.PropTypes.number,
-    onChange: React.PropTypes.func,
-    pinned: React.PropTypes.bool,
-    snaps: React.PropTypes.bool,
-    step: React.PropTypes.number,
-    value: React.PropTypes.number
-  };
-
-  static defaultProps = {
-    className: '',
-    editable: false,
-    max: 100,
-    min: 0,
-    pinned: false,
-    snaps: false,
-    step: 0.01,
-    value: 0
-  };
-
-  state = {
-    inputFocused: false,
-    inputValue: null,
-    sliderLength: 0,
-    sliderStart: 0
-  };
-
-  shouldComponentUpdate (nextProps, nextState) {
-    if (!this.state.inputFocused && nextState.inputFocused) return false;
-    if (this.state.inputFocused && this.props.value !== nextProps.value) {
-      this.setState({inputValue: this.valueForInput(nextProps.value)});
-      return false;
-    }
-    return true;
-  }
-
-  componentDidMount () {
-    window.addEventListener('resize', this.handleResize);
-    this.handleResize();
-  }
-
-  componentWillUnmount () {
-    window.removeEventListener('resize', this.handleResize);
-  }
-
-  handleInputFocus = () => {
-    this.setState({
-      inputFocused: true,
-      inputValue: this.valueForInput(this.props.value)
-    });
-  };
-
-  handleInputChange = (event) => {
-    this.setState({inputValue: event.target.value});
-  };
-
-  handleInputBlur = () => {
-    const value = this.state.inputValue || 0;
-    this.setState({inputFocused: false, inputValue: null}, () => {
-      this.props.onChange(this.trimValue(value));
-    });
-  };
-
-  handleKeyDown = (event) => {
-    if ([13, 27].indexOf(event.keyCode) !== -1) {
-      this.refs.input.blur();
-      ReactDOM.findDOMNode(this).blur();
-    }
-    if (event.keyCode === 38) this.addToValue(this.props.step);
-    if (event.keyCode === 40) this.addToValue(-this.props.step);
-  };
-
-  handleMouseDown = (event) => {
-    if (this.state.inputFocused) this.refs.input.blur();
-    events.addEventsToDocument(this.getMouseEventMap());
-    this.start(events.getMousePosition(event));
-    events.pauseEvent(event);
-  };
-
-  handleMouseMove = (event) => {
-    events.pauseEvent(event);
-    this.move(events.getMousePosition(event));
-  };
-
-  handleMouseUp = () => {
-    this.end(this.getMouseEventMap());
-  };
-
-  handleResize = (event, callback) => {
-    const {left, right} = ReactDOM.findDOMNode(this.refs.progressbar).getBoundingClientRect();
-    const cb = callback || () => {};
-    this.setState({sliderStart: left, sliderLength: right - left}, cb);
-  };
-
-  handleSliderBlur = () => {
-    events.removeEventsFromDocument(this.getKeyboardEvents());
-  };
-
-  handleSliderFocus = () => {
-    events.addEventsToDocument(this.getKeyboardEvents());
-  };
-
-  handleTouchEnd = () => {
-    this.end(this.getTouchEventMap());
-  };
-
-  handleTouchMove = (event) => {
-    this.move(events.getTouchPosition(event));
-  };
-
-  handleTouchStart = (event) => {
-    if (this.state.inputFocused) this.refs.input.blur();
-    this.start(events.getTouchPosition(event));
-    events.addEventsToDocument(this.getTouchEventMap());
-    events.pauseEvent(event);
-  };
-
-  addToValue (increment) {
-    let value = this.state.inputFocused ? parseFloat(this.state.inputValue) : this.props.value;
-    value = this.trimValue(value + increment);
-    if (value !== this.props.value) this.props.onChange(value);
-  }
-
-  getKeyboardEvents () {
-    return {
-      keydown: this.handleKeyDown
-    };
-  }
-
-  getMouseEventMap () {
-    return {
-      mousemove: this.handleMouseMove,
-      mouseup: this.handleMouseUp
-    };
-  }
-
-  getTouchEventMap () {
-    return {
-      touchmove: this.handleTouchMove,
-      touchend: this.handleTouchEnd
-    };
-  }
-
-  end (revents) {
-    events.removeEventsFromDocument(revents);
-    this.setState({ pressed: false });
-  }
-
-  knobOffset () {
-    const { max, min } = this.props;
-    return this.state.sliderLength * (this.props.value - min) / (max - min);
-  }
-
-  move (position) {
-    const newValue = this.positionToValue(position);
-    if (newValue !== this.props.value) this.props.onChange(newValue);
-  }
-
-  positionToValue (position) {
-    const { sliderStart: start, sliderLength: length } = this.state;
-    const { max, min } = this.props;
-    return this.trimValue((position.x - start) / length * (max - min) + min);
-  }
-
-  start (position) {
-    this.handleResize(null, () => {
-      this.setState({pressed: true});
-      this.props.onChange(this.positionToValue(position));
-    });
-  }
-
-  stepDecimals () {
-    return (this.props.step.toString().split('.')[1] || []).length;
-  }
-
-  trimValue (value) {
-    if (value < this.props.min) return this.props.min;
-    if (value > this.props.max) return this.props.max;
-    return utils.round(value, this.stepDecimals());
-  }
-
-  valueForInput (value) {
-    const decimals = this.stepDecimals();
-    return decimals > 0 ? value.toFixed(decimals) : value.toString();
-  }
-
-  renderSnaps () {
-    if (this.props.snaps) {
-      return (
-        <div ref='snaps' className={style.snaps}>
-          { utils.range(0, (this.props.max - this.props.min) / this.props.step).map(i => {
-              return <div key={`span-${i}`} className={style.snap}></div>;
-            }) }
-        </div>
-      );
-    }
-  }
-
-  renderInput () {
-    if (this.props.editable) {
-      const value = this.state.inputFocused ? this.state.inputValue : this.valueForInput(this.props.value);
-      return (
-        <Input
-          ref='input'
-          className={style.input}
-          onFocus={this.handleInputFocus}
-          onChange={this.handleInputChange}
-          onBlur={this.handleInputBlur}
-          value={value}
-        />
-      );
-    }
-  }
-
-  render () {
-    const knobStyles = prefixer({transform: `translateX(${this.knobOffset()}px)`});
-    let className = this.props.className;
-    if (this.props.editable) className += ` ${style.editable}`;
-    if (this.props.pinned) className += ` ${style.pinned}`;
-    if (this.state.pressed) className += ` ${style.pressed}`;
-    if (this.props.value === this.props.min) className += ` ${style.ring}`;
-
-    return (
-      <div
-        className={style.root + className}
-        data-react-toolbox='slider'
-        onBlur={this.handleSliderBlur}
-        onFocus={this.handleSliderFocus}
-        tabIndex='0'
-      >
-        <div
-          ref='slider'
-          className={style.container}
-          onMouseDown={this.handleMouseDown}
-          onTouchStart={this.handleTouchStart}
-        >
-          <div
-            ref='knob'
-            className={style.knob}
-            onMouseDown={this.handleMouseDown}
-            onTouchStart={this.handleTouchStart}
-            style={knobStyles}
-          >
-            <div className={style.innerknob} data-value={parseInt(this.props.value)}></div>
-          </div>
-
-          <div className={style.progress}>
-            <ProgressBar
-              ref='progressbar'
-              className={style.innerprogress}
-              max={this.props.max}
-              min={this.props.min}
-              mode='determinate'
-              value={this.props.value}
-            />
-            { this.renderSnaps() }
-          </div>
-        </div>
-
-        { this.renderInput() }
-      </div>
-    );
-  }
-}
-
-export default Slider;
+export default from './Slider';
diff --git a/components/snackbar/Snackbar.jsx b/components/snackbar/Snackbar.jsx
new file mode 100644
index 000000000..2eeaaf060
--- /dev/null
+++ b/components/snackbar/Snackbar.jsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Button from '../button';
+import FontIcon from '../font_icon';
+import Overlay from '../overlay';
+import style from './style';
+
+class Snackbar extends React.Component {
+  static propTypes = {
+    action: React.PropTypes.string,
+    active: React.PropTypes.bool,
+    className: React.PropTypes.string,
+    icon: React.PropTypes.string,
+    label: React.PropTypes.string.isRequired,
+    onClick: React.PropTypes.func,
+    onTimeout: React.PropTypes.func,
+    timeout: React.PropTypes.number,
+    type: React.PropTypes.string
+  };
+
+  componentDidUpdate () {
+    if (this.props.active && this.props.timeout) {
+      setTimeout(() => {
+        this.props.onTimeout();
+      }, this.props.timeout);
+    }
+  }
+
+  renderButton () {
+    if (this.props.action) {
+      return (
+        <Button
+          className={style.button}
+          label={this.props.action}
+          onClick={this.props.onClick}
+        />
+      );
+    }
+  }
+
+  render () {
+    let className = `${style.root} ${style[this.props.type]}`;
+    if (this.props.active) className += ` ${style.active}`;
+    if (this.props.className) className += ` ${this.props.className}`;
+
+    return (
+      <Overlay active={this.props.active} opacity={0}>
+        <div data-react-toolbox='snackbar' className={className}>
+          {this.props.icon ? <FontIcon value={this.props.icon} className={style.icon} /> : null}
+          <span className={style.label}>{this.props.label}</span>
+          {this.renderButton()}
+        </div>
+      </Overlay>
+    );
+  }
+}
+
+export default Snackbar;
diff --git a/components/snackbar/index.jsx b/components/snackbar/index.jsx
index 4515cb0f1..29ff7c39d 100644
--- a/components/snackbar/index.jsx
+++ b/components/snackbar/index.jsx
@@ -1,57 +1 @@
-import React from 'react';
-import Button from '../button';
-import FontIcon from '../font_icon';
-import Overlay from '../overlay';
-import style from './style';
-
-class Snackbar extends React.Component {
-  static propTypes = {
-    action: React.PropTypes.string,
-    active: React.PropTypes.bool,
-    className: React.PropTypes.string,
-    icon: React.PropTypes.string,
-    label: React.PropTypes.string.isRequired,
-    onClick: React.PropTypes.func,
-    onTimeout: React.PropTypes.func,
-    timeout: React.PropTypes.number,
-    type: React.PropTypes.string
-  };
-
-  componentDidUpdate () {
-    if (this.props.active && this.props.timeout) {
-      setTimeout(() => {
-        this.props.onTimeout();
-      }, this.props.timeout);
-    }
-  }
-
-  renderButton () {
-    if (this.props.action) {
-      return (
-        <Button
-          className={style.button}
-          label={this.props.action}
-          onClick={this.props.onClick}
-        />
-      );
-    }
-  }
-
-  render () {
-    let className = `${style.root} ${style[this.props.type]}`;
-    if (this.props.active) className += ` ${style.active}`;
-    if (this.props.className) className += ` ${this.props.className}`;
-
-    return (
-      <Overlay active={this.props.active} opacity={0}>
-        <div data-react-toolbox='snackbar' className={className}>
-          { this.props.icon ? <FontIcon value={this.props.icon} className={style.icon} /> : null }
-          <span className={style.label}>{this.props.label}</span>
-          { this.renderButton() }
-        </div>
-      </Overlay>
-    );
-  }
-}
-
-export default Snackbar;
+export default from './Snackbar.jsx';
diff --git a/components/switch/Switch.jsx b/components/switch/Switch.jsx
new file mode 100644
index 000000000..c27393afb
--- /dev/null
+++ b/components/switch/Switch.jsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import Ripple from '../ripple';
+import style from './style';
+import events from '../utils/events';
+
+class Switch extends React.Component {
+  static propTypes = {
+    checked: React.PropTypes.bool,
+    className: React.PropTypes.string,
+    disabled: React.PropTypes.bool,
+    label: React.PropTypes.string,
+    name: React.PropTypes.string,
+    onBlur: React.PropTypes.func,
+    onChange: React.PropTypes.func,
+    onFocus: React.PropTypes.func
+  };
+
+  static defaultProps = {
+    checked: false,
+    className: '',
+    disabled: false
+  };
+
+  handleChange = (event) => {
+    events.pauseEvent(event);
+    if (this.props.onChange && !this.props.disabled) this.props.onChange(event);
+  };
+
+  handleInputClick = (event) => {
+    events.pauseEvent(event);
+  };
+
+  handleMouseDown = (event) => {
+    if (!this.props.disabled) this.refs.ripple.start(event);
+  };
+
+  blur () {
+    this.refs.input.blur();
+  }
+
+  focus () {
+    this.refs.input.focus();
+  }
+
+  render () {
+    let labelClassName = style[this.props.disabled ? 'disabled' : 'field'];
+    const switchClassName = style[this.props.checked ? 'on' : 'off'];
+    if (this.props.className) labelClassName += ` ${this.props.className}`;
+
+    return (
+      <label
+        data-react-toolbox='checkbox'
+        className={labelClassName}
+        onClick={this.handleChange}
+      >
+        <input
+          {...this.props}
+          ref='input'
+          checked={this.props.checked}
+          className={style.input}
+          onChange={this.handleChange}
+          onClick={this.handleInputClick}
+          type='checkbox'
+        />
+        <span role='switch' className={switchClassName}>
+          <span role='thumb' className={style.thumb} onMouseDown={this.handleMouseDown}>
+            <Ripple ref='ripple' role='ripple' className={style.ripple} spread={2.4} centered />
+          </span>
+        </span>
+        {this.props.label ? <span className={style.text}>{this.props.label}</span> : null}
+      </label>
+    );
+  }
+}
+
+export default Switch;
diff --git a/components/switch/index.jsx b/components/switch/index.jsx
index 7ffdaf0cd..4aa0029cb 100644
--- a/components/switch/index.jsx
+++ b/components/switch/index.jsx
@@ -1,76 +1 @@
-import React from 'react';
-import Ripple from '../ripple';
-import style from './style';
-import events from '../utils/events';
-
-class Switch extends React.Component {
-  static propTypes = {
-    checked: React.PropTypes.bool,
-    className: React.PropTypes.string,
-    disabled: React.PropTypes.bool,
-    label: React.PropTypes.string,
-    name: React.PropTypes.string,
-    onBlur: React.PropTypes.func,
-    onChange: React.PropTypes.func,
-    onFocus: React.PropTypes.func
-  };
-
-  static defaultProps = {
-    checked: false,
-    className: '',
-    disabled: false
-  };
-
-  handleChange = (event) => {
-    events.pauseEvent(event);
-    if (this.props.onChange && !this.props.disabled) this.props.onChange(event);
-  };
-
-  handleInputClick = (event) => {
-    events.pauseEvent(event);
-  };
-
-  handleMouseDown = (event) => {
-    if (!this.props.disabled) this.refs.ripple.start(event);
-  };
-
-  render () {
-    let labelClassName = style[this.props.disabled ? 'disabled' : 'field'];
-    const switchClassName = style[this.props.checked ? 'on' : 'off'];
-    if (this.props.className) labelClassName += ` ${this.props.className}`;
-
-    return (
-      <label
-        data-react-toolbox='checkbox'
-        className={labelClassName}
-        onClick={this.handleChange}
-      >
-        <input
-          {...this.props}
-          ref='input'
-          checked={this.props.checked}
-          className={style.input}
-          onChange={this.handleChange}
-          onClick={this.handleInputClick}
-          type='checkbox'
-        />
-        <span role='switch' className={switchClassName}>
-          <span role='thumb' className={style.thumb} onMouseDown={this.handleMouseDown}>
-            <Ripple ref='ripple' role='ripple' className={style.ripple} spread={2.4} centered />
-          </span>
-        </span>
-        { this.props.label ? <span className={style.text}>{this.props.label}</span> : null }
-      </label>
-    );
-  }
-
-  blur () {
-    this.refs.input.blur();
-  }
-
-  focus () {
-    this.refs.input.focus();
-  }
-}
-
-export default Switch;
+export default from './Switch.jsx';
diff --git a/components/table/Table.jsx b/components/table/Table.jsx
new file mode 100644
index 000000000..93c492f91
--- /dev/null
+++ b/components/table/Table.jsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import TableHead from './TableHead';
+import TableRow from './TableRow';
+import style from './style';
+
+class Table extends React.Component {
+  static propTypes = {
+    className: React.PropTypes.string,
+    heading: React.PropTypes.bool,
+    model: React.PropTypes.object,
+    onChange: React.PropTypes.func,
+    onSelect: React.PropTypes.func,
+    selectable: React.PropTypes.bool,
+    selected: React.PropTypes.array,
+    source: React.PropTypes.array
+  };
+
+  static defaultProps = {
+    className: '',
+    heading: true,
+    selectable: true,
+    selected: [],
+    source: []
+  };
+
+  handleFullSelect = () => {
+    if (this.props.onSelect) {
+      const {source, selected} = this.props;
+      const newSelected = source.length === selected.length ? [] : source.map((i, idx) => idx);
+      this.props.onSelect(newSelected);
+    }
+  };
+
+  handleRowSelect = (index) => {
+    if (this.props.onSelect) {
+      const position = this.props.selected.indexOf(index);
+      const newSelected = [...this.props.selected];
+      if (position !== -1) newSelected.splice(position, 1); else newSelected.push(index);
+      this.props.onSelect(newSelected);
+    }
+  };
+
+  handleRowChange = (index, key, value) => {
+    if (this.props.onChange) {
+      this.props.onChange(index, key, value);
+    }
+  };
+
+  renderHead () {
+    if (this.props.heading) {
+      const {model, selected, source, selectable} = this.props;
+      const isSelected = selected.length === source.length;
+      return (
+        <TableHead
+          model={model}
+          onSelect={this.handleFullSelect}
+          selectable={selectable}
+          selected={isSelected}
+        />
+      );
+    }
+  }
+
+  renderBody () {
+    const rows = this.props.source.map((data, idx) => {
+      return (
+        <TableRow
+          data={data}
+          index={idx}
+          key={idx}
+          model={this.props.model}
+          onChange={this.handleRowChange.bind(this, idx)}
+          onSelect={this.handleRowSelect.bind(this, idx)}
+          selectable={this.props.selectable}
+          selected={this.props.selected.indexOf(idx) !== -1}
+        />
+      );
+    });
+
+    return <tbody>{rows}</tbody>;
+  }
+
+  render () {
+    let className = style.root;
+    if (this.props.className) className += ` ${this.props.className}`;
+    return (
+      <table data-react-toolbox='table' className={className}>
+        {this.renderHead()}
+        {this.renderBody()}
+      </table>
+    );
+  }
+}
+
+export default Table;
diff --git a/components/table/head.jsx b/components/table/TableHead.jsx
similarity index 100%
rename from components/table/head.jsx
rename to components/table/TableHead.jsx
diff --git a/components/table/row.jsx b/components/table/TableRow.jsx
similarity index 95%
rename from components/table/row.jsx
rename to components/table/TableRow.jsx
index dd8376959..2d8f0bab6 100644
--- a/components/table/row.jsx
+++ b/components/table/TableRow.jsx
@@ -6,6 +6,7 @@ import style from './style';
 class TableRow extends React.Component {
   static propTypes = {
     data: React.PropTypes.object,
+    model: React.PropTypes.object,
     onChange: React.PropTypes.func,
     onSelect: React.PropTypes.func,
     selectable: React.PropTypes.bool,
@@ -63,8 +64,8 @@ class TableRow extends React.Component {
 
     return (
       <tr data-react-toolbox-table='row' className={className}>
-        { this.renderSelectCell() }
-        { this.renderCells() }
+        {this.renderSelectCell()}
+        {this.renderCells()}
       </tr>
     );
   }
diff --git a/components/table/index.jsx b/components/table/index.jsx
index 6290d0b81..71fc37996 100644
--- a/components/table/index.jsx
+++ b/components/table/index.jsx
@@ -1,95 +1 @@
-import React from 'react';
-import TableHead from './head';
-import TableRow from './row';
-import style from './style';
-
-class Table extends React.Component {
-  static propTypes = {
-    className: React.PropTypes.string,
-    heading: React.PropTypes.bool,
-    model: React.PropTypes.object,
-    onChange: React.PropTypes.func,
-    onSelect: React.PropTypes.func,
-    selectable: React.PropTypes.bool,
-    selected: React.PropTypes.array,
-    source: React.PropTypes.array
-  };
-
-  static defaultProps = {
-    className: '',
-    heading: true,
-    selectable: true,
-    selected: [],
-    source: []
-  };
-
-  handleFullSelect = () => {
-    if (this.props.onSelect) {
-      const {source, selected} = this.props;
-      const newSelected = source.length === selected.length ? [] : source.map((i, idx) => idx);
-      this.props.onSelect(newSelected);
-    }
-  };
-
-  handleRowSelect = (index) => {
-    if (this.props.onSelect) {
-      const position = this.props.selected.indexOf(index);
-      const newSelected = [...this.props.selected];
-      if (position !== -1) newSelected.splice(position, 1); else newSelected.push(index);
-      this.props.onSelect(newSelected);
-    }
-  };
-
-  handleRowChange = (index, key, value) => {
-    if (this.props.onChange) {
-      this.props.onChange(index, key, value);
-    }
-  };
-
-  renderHead () {
-    if (this.props.heading) {
-      const {model, selected, source, selectable} = this.props;
-      const isSelected = selected.length === source.length;
-      return (
-        <TableHead
-          model={model}
-          onSelect={this.handleFullSelect}
-          selectable={selectable}
-          selected={isSelected}
-        />
-      );
-    }
-  }
-
-  renderBody () {
-    const rows = this.props.source.map((data, idx) => {
-      return (
-        <TableRow
-          data={data}
-          index={idx}
-          key={idx}
-          model={this.props.model}
-          onChange={this.handleRowChange.bind(this, idx)}
-          onSelect={this.handleRowSelect.bind(this, idx)}
-          selectable={this.props.selectable}
-          selected={this.props.selected.indexOf(idx) !== -1}
-        />
-      );
-    });
-
-    return <tbody>{rows}</tbody>;
-  }
-
-  render () {
-    let className = style.root;
-    if (this.props.className) className += ` ${this.props.className}`;
-    return (
-      <table data-react-toolbox='table' className={className}>
-        { this.renderHead() }
-        { this.renderBody() }
-      </table>
-    );
-  }
-}
-
-export default Table;
+export default from './Table.jsx';
diff --git a/components/table/readme.md b/components/table/readme.md
index db3efa5be..d1418b862 100644
--- a/components/table/readme.md
+++ b/components/table/readme.md
@@ -39,7 +39,7 @@ class TableTest extends React.Component {
         model={UserModel}
         onChange={this.handleChange}
         onSelect={this.handleSelect}
-        selectable={true}
+        selectable
         selected={this.state.selected}
         source={this.state.source}
       />
diff --git a/components/tabs/content.jsx b/components/tabs/TabContent.jsx
similarity index 94%
rename from components/tabs/content.jsx
rename to components/tabs/TabContent.jsx
index 5f002c9ab..04a9810ad 100644
--- a/components/tabs/content.jsx
+++ b/components/tabs/TabContent.jsx
@@ -4,6 +4,7 @@ import style from './style';
 class TabContent extends React.Component {
   static propTypes = {
     active: React.PropTypes.bool,
+    children: React.PropTypes.node,
     className: React.PropTypes.string,
     tabIndex: React.PropTypes.number
   };
diff --git a/components/tabs/index.jsx b/components/tabs/index.jsx
index 42cc63beb..3860bc2ab 100644
--- a/components/tabs/index.jsx
+++ b/components/tabs/index.jsx
@@ -1,4 +1,2 @@
-import Tabs from './tabs';
-import Tab from './tab';
-
-export default { Tabs, Tab };
+export Tabs from './Tabs.jsx';
+export Tab from './Tab.jsx';
diff --git a/components/tabs/tabs.jsx b/components/tabs/tabs.jsx
index 2730806d2..f066c711b 100644
--- a/components/tabs/tabs.jsx
+++ b/components/tabs/tabs.jsx
@@ -1,12 +1,13 @@
 import React from 'react';
-import Tab from './tab';
-import Content from './content';
+import Tab from './Tab';
+import TabContent from './TabContent';
 import style from './style';
 
 class Tabs extends React.Component {
   static propTypes = {
-    index: React.PropTypes.number,
+    children: React.PropTypes.node,
     className: React.PropTypes.string,
+    index: React.PropTypes.number,
     onChange: React.PropTypes.func
   };
 
@@ -18,16 +19,16 @@ class Tabs extends React.Component {
     pointer: {}
   };
 
-  componentWillReceiveProps (nextProps) {
-    this.updatePointer(nextProps.index);
-  }
-
   componentDidMount () {
     setTimeout(() => {
       this.updatePointer(this.props.index);
     }, 100);
   }
 
+  componentWillReceiveProps (nextProps) {
+    this.updatePointer(nextProps.index);
+  }
+
   handleHeaderClick = (idx) => {
     if (this.props.onChange) this.props.onChange(idx);
   };
@@ -40,9 +41,9 @@ class Tabs extends React.Component {
       if (item.type === Tab) {
         headers.push(item);
         if (item.props.children) {
-          contents.push(<Content children={item.props.children}/>);
+          contents.push(<TabContent children={item.props.children}/>);
         }
-      } else if (item.type === Content) {
+      } else if (item.type === TabContent) {
         contents.push(item);
       }
     });
diff --git a/components/time_picker/TimePicker.jsx b/components/time_picker/TimePicker.jsx
new file mode 100644
index 000000000..a0fd6d9e5
--- /dev/null
+++ b/components/time_picker/TimePicker.jsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import events from '../utils/events';
+import time from '../utils/time';
+import style from './style';
+import Input from '../input';
+import TimePickerDialog from './TimePickerDialog';
+
+class TimePicker extends React.Component {
+  static propTypes = {
+    className: React.PropTypes.string,
+    format: React.PropTypes.oneOf(['24hr', 'ampm']),
+    label: React.PropTypes.string,
+    onChange: React.PropTypes.func,
+    value: React.PropTypes.object
+  };
+
+  static defaultProps = {
+    className: '',
+    format: '24hr'
+  };
+
+  state = {
+    active: false
+  };
+
+  handleDismiss = () => {
+    this.setState({active: false});
+  };
+
+  handleInputMouseDown = (event) => {
+    events.pauseEvent(event);
+    this.setState({active: true});
+  };
+
+  handleSelect = (value) => {
+    if (this.props.onChange) this.props.onChange(value);
+    this.setState({active: false});
+  };
+
+  render () {
+    const { value, format } = this.props;
+    const formattedTime = value ? time.formatTime(value, format) : null;
+    return (
+      <div data-react-toolbox='time-picker'>
+        <Input
+          className={style.input}
+          label={this.props.label}
+          onMouseDown={this.handleInputMouseDown}
+          readOnly
+          type='text'
+          value={formattedTime}
+        />
+        <TimePickerDialog
+          active={this.state.active}
+          format={format}
+          onDismiss={this.handleDismiss}
+          onSelect={this.handleSelect}
+          value={this.props.value}
+        />
+      </div>
+    );
+  }
+}
+
+export default TimePicker;
diff --git a/components/time_picker/dialog.jsx b/components/time_picker/TimePickerDialog.jsx
similarity index 94%
rename from components/time_picker/dialog.jsx
rename to components/time_picker/TimePickerDialog.jsx
index a17b311b9..4a2429f2c 100644
--- a/components/time_picker/dialog.jsx
+++ b/components/time_picker/TimePickerDialog.jsx
@@ -78,13 +78,13 @@ class TimePickerDialog extends React.Component {
       <Dialog active={this.props.active} className={className} actions={this.actions}>
         <header className={style.header}>
           <span className={style.hours} onClick={this.switchDisplay.bind(this, 'hours')}>
-            { ('0' + this.formatHours()).slice(-2) }
+            {('0' + this.formatHours()).slice(-2)}
           </span>
           <span className={style.separator}>:</span>
           <span className={style.minutes} onClick={this.switchDisplay.bind(this, 'minutes')}>
-            { ('0' + this.state.displayTime.getMinutes()).slice(-2) }
+            {('0' + this.state.displayTime.getMinutes()).slice(-2)}
           </span>
-          { this.renderAMPMLabels() }
+          {this.renderAMPMLabels()}
         </header>
         <Clock
           ref='clock'
diff --git a/components/time_picker/clock/Clock.jsx b/components/time_picker/clock/Clock.jsx
new file mode 100644
index 000000000..4338fce35
--- /dev/null
+++ b/components/time_picker/clock/Clock.jsx
@@ -0,0 +1,106 @@
+import React from 'react';
+import style from './style';
+import time from '../../utils/time';
+import Hours from './Hours';
+import Minutes from './Minutes';
+
+class Clock extends React.Component {
+  static propTypes = {
+    className: React.PropTypes.string,
+    display: React.PropTypes.oneOf(['hours', 'minutes']),
+    format: React.PropTypes.oneOf(['24hr', 'ampm']),
+    onChange: React.PropTypes.func,
+    time: React.PropTypes.object
+  };
+
+  static defaultProps = {
+    className: '',
+    display: 'hours',
+    format: '24hr',
+    time: new Date()
+  };
+
+  state = {
+    center: {x: null, y: null},
+    radius: 0
+  };
+
+  componentDidMount () {
+    window.addEventListener('resize', this.handleCalculateShape);
+    this.handleCalculateShape();
+  }
+
+  componentWillUnmount () {
+    window.removeEventListener('resize', this.handleCalculateShape);
+  }
+
+  handleHourChange = (hours) => {
+    if (this.props.time.getHours() !== hours) {
+      this.props.onChange(time.setHours(this.props.time, this.adaptHourToFormat(hours)));
+    }
+  };
+
+  handleMinuteChange = (minutes) => {
+    if (this.props.time.getMinutes() !== minutes) {
+      this.props.onChange(time.setMinutes(this.props.time, minutes));
+    }
+  };
+
+  handleCalculateShape = () => {
+    const { top, left, width } = this.refs.wrapper.getBoundingClientRect();
+    this.setState({
+      center: { x: left + width / 2, y: top + width / 2 },
+      radius: width / 2
+    });
+  };
+
+  adaptHourToFormat (hour) {
+    if (this.props.format === 'ampm') {
+      if (time.getTimeMode(this.props.time) === 'pm') {
+        return hour < 12 ? hour + 12 : hour;
+      } else {
+        return hour === 12 ? 0 : hour;
+      }
+    } else {
+      return hour;
+    }
+  }
+
+  renderHours () {
+    return (
+      <Hours
+        center={this.state.center}
+        format={this.props.format}
+        onChange={this.handleHourChange}
+        radius={this.state.radius}
+        selected={this.props.time.getHours()}
+        spacing={this.state.radius * 0.18}
+      />
+    );
+  }
+
+  renderMinutes () {
+    return (
+      <Minutes
+        center={this.state.center}
+        onChange={this.handleMinuteChange}
+        radius={this.state.radius}
+        selected={this.props.time.getMinutes()}
+        spacing={this.state.radius * 0.18}
+      />
+    );
+  }
+
+  render () {
+    return (
+      <div data-react-toolbox='clock' className={style.root}>
+        <div ref='wrapper' className={style.wrapper} style={{height: this.state.radius * 2}}>
+          {this.props.display === 'hours' ? this.renderHours() : null}
+          {this.props.display === 'minutes' ? this.renderMinutes() : null}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Clock;
diff --git a/components/time_picker/clock/face.jsx b/components/time_picker/clock/face.jsx
index 345112876..a5dd546dd 100644
--- a/components/time_picker/clock/face.jsx
+++ b/components/time_picker/clock/face.jsx
@@ -2,6 +2,14 @@ import React from 'react';
 import style from './style';
 
 class Face extends React.Component {
+  static propTypes = {
+    active: React.PropTypes.number,
+    numbers: React.PropTypes.array,
+    radius: React.PropTypes.number,
+    spacing: React.PropTypes.number,
+    twoDigits: React.PropTypes.bool
+  };
+
   static defaultProps = {
     active: null,
     numbers: [],
@@ -33,7 +41,7 @@ class Face extends React.Component {
         style={this.numberStyle(this.props.radius - this.props.spacing, idx + 1)}
         key={number}
       >
-        { this.props.twoDigits ? ('0' + number).slice(-2) : number }
+        {this.props.twoDigits ? ('0' + number).slice(-2) : number}
       </span>
     );
   }
@@ -47,7 +55,7 @@ class Face extends React.Component {
         onMouseDown={this.props.onMouseDown}
         style={this.faceStyle()}
       >
-        { this.props.numbers.map(this.renderNumber.bind(this))}
+        {this.props.numbers.map(this.renderNumber.bind(this))}
       </div>
     );
   }
diff --git a/components/time_picker/clock/hand.jsx b/components/time_picker/clock/hand.jsx
index e708560df..0bed5b6d6 100644
--- a/components/time_picker/clock/hand.jsx
+++ b/components/time_picker/clock/hand.jsx
@@ -6,10 +6,13 @@ import utils from '../../utils/utils';
 
 class Hand extends React.Component {
   static propTypes = {
-    className: React.PropTypes.string,
     angle: React.PropTypes.number,
+    className: React.PropTypes.string,
+    length: React.PropTypes.number,
     onMove: React.PropTypes.func,
-    onMoved: React.PropTypes.func
+    onMoved: React.PropTypes.func,
+    origin: React.PropTypes.object,
+    step: React.PropTypes.number
   };
 
   static defaultProps = {
diff --git a/components/time_picker/clock/hours.jsx b/components/time_picker/clock/hours.jsx
index 7caa871cd..a8cd898b4 100644
--- a/components/time_picker/clock/hours.jsx
+++ b/components/time_picker/clock/hours.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import utils from '../../utils/utils';
-import Face from './face';
-import Hand from './hand';
+import Face from './Face';
+import Hand from './Hand';
 
 const outerNumbers = [0, ...utils.range(13, 24)];
 const innerNumbers = [12, ...utils.range(1, 12)];
@@ -10,10 +10,13 @@ const step = 360 / 12;
 
 class Hours extends React.Component {
   static propTypes = {
+    center: React.PropTypes.object,
     format: React.PropTypes.oneOf(['24hr', 'ampm']),
     onChange: React.PropTypes.func,
     onHandMoved: React.PropTypes.func,
-    selected: React.PropTypes.number
+    radius: React.PropTypes.number,
+    selected: React.PropTypes.number,
+    spacing: React.PropTypes.number
   };
 
   state = {
@@ -77,7 +80,7 @@ class Hours extends React.Component {
             twoDigits={is24hr}
             active={is24hr ? selected : (selected % 12 || 12)}
           />
-          { this.renderInnerFace(radius - spacing * innerSpacing) }
+          {this.renderInnerFace(radius - spacing * innerSpacing)}
           <Hand ref='hand'
             angle={selected * step}
             length={(this.state.inner ? radius - spacing * innerSpacing : radius) - spacing}
diff --git a/components/time_picker/clock/index.jsx b/components/time_picker/clock/index.jsx
index 2c53a5cce..b75fdcc33 100644
--- a/components/time_picker/clock/index.jsx
+++ b/components/time_picker/clock/index.jsx
@@ -1,106 +1 @@
-import React from 'react';
-import style from './style';
-import time from '../../utils/time';
-import Hours from './hours';
-import Minutes from './minutes';
-
-class Clock extends React.Component {
-  static propTypes = {
-    className: React.PropTypes.string,
-    display: React.PropTypes.oneOf(['hours', 'minutes']),
-    format: React.PropTypes.oneOf(['24hr', 'ampm']),
-    time: React.PropTypes.object,
-    onChange: React.PropTypes.func
-  };
-
-  static defaultProps = {
-    className: '',
-    display: 'hours',
-    format: '24hr',
-    time: new Date()
-  };
-
-  state = {
-    center: {x: null, y: null},
-    radius: 0
-  };
-
-  componentDidMount () {
-    window.addEventListener('resize', this.handleCalculateShape);
-    this.handleCalculateShape();
-  }
-
-  componentWillUnmount () {
-    window.removeEventListener('resize', this.handleCalculateShape);
-  }
-
-  handleHourChange = (hours) => {
-    if (this.props.time.getHours() !== hours) {
-      this.props.onChange(time.setHours(this.props.time, this.adaptHourToFormat(hours)));
-    }
-  };
-
-  handleMinuteChange = (minutes) => {
-    if (this.props.time.getMinutes() !== minutes) {
-      this.props.onChange(time.setMinutes(this.props.time, minutes));
-    }
-  };
-
-  handleCalculateShape = () => {
-    const { top, left, width } = this.refs.wrapper.getBoundingClientRect();
-    this.setState({
-      center: { x: left + width / 2, y: top + width / 2 },
-      radius: width / 2
-    });
-  };
-
-  adaptHourToFormat (hour) {
-    if (this.props.format === 'ampm') {
-      if (time.getTimeMode(this.props.time) === 'pm') {
-        return hour < 12 ? hour + 12 : hour;
-      } else {
-        return hour === 12 ? 0 : hour;
-      }
-    } else {
-      return hour;
-    }
-  }
-
-  renderHours () {
-    return (
-      <Hours
-        center={this.state.center}
-        format={this.props.format}
-        onChange={this.handleHourChange}
-        radius={this.state.radius}
-        selected={this.props.time.getHours()}
-        spacing={this.state.radius * 0.18}
-      />
-    );
-  }
-
-  renderMinutes () {
-    return (
-      <Minutes
-        center={this.state.center}
-        onChange={this.handleMinuteChange}
-        radius={this.state.radius}
-        selected={this.props.time.getMinutes()}
-        spacing={this.state.radius * 0.18}
-      />
-    );
-  }
-
-  render () {
-    return (
-      <div data-react-toolbox='clock' className={style.root}>
-        <div ref='wrapper' className={style.wrapper} style={{height: this.state.radius * 2}}>
-          { this.props.display === 'hours' ? this.renderHours() : null }
-          { this.props.display === 'minutes' ? this.renderMinutes() : null }
-        </div>
-      </div>
-    );
-  }
-}
-
-export default Clock;
+export default from './Clock.jsx';
diff --git a/components/time_picker/clock/minutes.jsx b/components/time_picker/clock/minutes.jsx
index 11cec5c12..1f9940fee 100644
--- a/components/time_picker/clock/minutes.jsx
+++ b/components/time_picker/clock/minutes.jsx
@@ -1,16 +1,19 @@
 import React from 'react';
 import utils from '../../utils/utils';
 import style from './style';
-import Face from './face';
-import Hand from './hand';
+import Face from './Face';
+import Hand from './Hand';
 
 const minutes = utils.range(0, 60, 5);
 const step = 360 / 60;
 
 class Minutes extends React.Component {
   static propTypes = {
+    center: React.PropTypes.object,
+    onChange: React.PropTypes.func,
+    radius: React.PropTypes.number,
     selected: React.PropTypes.number,
-    onChange: React.PropTypes.func
+    spacing: React.PropTypes.number
   };
 
   static defaultProps = {
@@ -39,7 +42,7 @@ class Minutes extends React.Component {
           numbers={minutes}
           spacing={this.props.spacing}
           radius={this.props.radius}
-          twoDigits={true}
+          twoDigits
           active={this.props.selected}
         />
         <Hand ref='hand'
diff --git a/components/time_picker/index.jsx b/components/time_picker/index.jsx
index f92e3dc59..81fb3d72f 100644
--- a/components/time_picker/index.jsx
+++ b/components/time_picker/index.jsx
@@ -1,65 +1 @@
-import React from 'react';
-import events from '../utils/events';
-import time from '../utils/time';
-import style from './style';
-import Input from '../input';
-import TimeDialog from './dialog';
-
-class TimePicker extends React.Component {
-  static propTypes = {
-    className: React.PropTypes.string,
-    format: React.PropTypes.oneOf(['24hr', 'ampm']),
-    label: React.PropTypes.string,
-    onChange: React.PropTypes.func,
-    value: React.PropTypes.object
-  };
-
-  static defaultProps = {
-    className: '',
-    format: '24hr'
-  };
-
-  state = {
-    active: false
-  };
-
-  handleDismiss = () => {
-    this.setState({active: false});
-  };
-
-  handleInputMouseDown = (event) => {
-    events.pauseEvent(event);
-    this.setState({active: true});
-  };
-
-  handleSelect = (value) => {
-    if (this.props.onChange) this.props.onChange(value);
-    this.setState({active: false});
-  };
-
-  render () {
-    const { value, format } = this.props;
-    const formattedTime = value ? time.formatTime(value, format) : null;
-    return (
-      <div data-react-toolbox='time-picker'>
-        <Input
-          className={style.input}
-          label={this.props.label}
-          onMouseDown={this.handleInputMouseDown}
-          readOnly={true}
-          type='text'
-          value={formattedTime}
-        />
-        <TimeDialog
-          active={this.state.active}
-          format={format}
-          onDismiss={this.handleDismiss}
-          onSelect={this.handleSelect}
-          value={this.props.value}
-        />
-      </div>
-    );
-  }
-}
-
-export default TimePicker;
+export default from './TimePicker.jsx';
diff --git a/components/tooltip/Tooltip.jsx b/components/tooltip/Tooltip.jsx
new file mode 100644
index 000000000..e223431a5
--- /dev/null
+++ b/components/tooltip/Tooltip.jsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import style from './style';
+
+const HIDE_TIMEOUT = 100;
+
+class Tooltip extends React.Component {
+  static propTypes = {
+    className: React.PropTypes.string,
+    delay: React.PropTypes.number,
+    label: React.PropTypes.string
+  };
+
+  static defaultProps = {
+    className: '',
+    delay: 0
+  };
+
+  state = {
+    active: false
+  };
+
+  componentDidMount = () => {
+    const parent = ReactDOM.findDOMNode(this).parentNode;
+
+    if (parent.style.position !== 'relative' && parent.style.position !== 'absolute'){
+      parent.style.position = 'relative';
+    }
+
+    parent.onmouseover = this.handleParentMouseOver;
+    parent.onmouseout = this.handleParentMouseOut;
+  };
+
+  handleParentMouseOver = () => {
+    setTimeout(() => {
+      if (this.deferredHide) clearTimeout(this.deferredHide);
+      const node = ReactDOM.findDOMNode(this);
+      const parent = node.parentNode;
+      const parentStyle = parent.currentStyle || window.getComputedStyle(parent);
+      const offset = parseFloat(parentStyle['margin-bottom']) + parseFloat(parentStyle['padding-bottom']);
+      const position = parent.getBoundingClientRect();
+
+      node.style.top = `${position.height - offset}px`;
+      node.style.left = `${parseInt((position.width / 2) - (node.offsetWidth / 2))}px`;
+      if (!this.state.active) this.setState({ active: true});
+    }, this.props.delay);
+  };
+
+  handleParentMouseOut = () => {
+    if (this.state.active) {
+      this.deferredHide = setTimeout(() => { this.setState({active: false}); }, HIDE_TIMEOUT);
+      console.log(this.deferredHide);
+    }
+  };
+
+  render () {
+    let className = style.root;
+    if (this.props.className) className += ` ${this.props.className}`;
+    if (this.state.active) className += ` ${style.active}`;
+
+    return (
+      <span data-react-toolbox='tooltip' className={className}>
+        {this.props.label}
+      </span>
+    );
+  }
+}
+
+export default Tooltip;
diff --git a/components/tooltip/index.jsx b/components/tooltip/index.jsx
index e223431a5..e48b883d2 100644
--- a/components/tooltip/index.jsx
+++ b/components/tooltip/index.jsx
@@ -1,69 +1 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import style from './style';
-
-const HIDE_TIMEOUT = 100;
-
-class Tooltip extends React.Component {
-  static propTypes = {
-    className: React.PropTypes.string,
-    delay: React.PropTypes.number,
-    label: React.PropTypes.string
-  };
-
-  static defaultProps = {
-    className: '',
-    delay: 0
-  };
-
-  state = {
-    active: false
-  };
-
-  componentDidMount = () => {
-    const parent = ReactDOM.findDOMNode(this).parentNode;
-
-    if (parent.style.position !== 'relative' && parent.style.position !== 'absolute'){
-      parent.style.position = 'relative';
-    }
-
-    parent.onmouseover = this.handleParentMouseOver;
-    parent.onmouseout = this.handleParentMouseOut;
-  };
-
-  handleParentMouseOver = () => {
-    setTimeout(() => {
-      if (this.deferredHide) clearTimeout(this.deferredHide);
-      const node = ReactDOM.findDOMNode(this);
-      const parent = node.parentNode;
-      const parentStyle = parent.currentStyle || window.getComputedStyle(parent);
-      const offset = parseFloat(parentStyle['margin-bottom']) + parseFloat(parentStyle['padding-bottom']);
-      const position = parent.getBoundingClientRect();
-
-      node.style.top = `${position.height - offset}px`;
-      node.style.left = `${parseInt((position.width / 2) - (node.offsetWidth / 2))}px`;
-      if (!this.state.active) this.setState({ active: true});
-    }, this.props.delay);
-  };
-
-  handleParentMouseOut = () => {
-    if (this.state.active) {
-      this.deferredHide = setTimeout(() => { this.setState({active: false}); }, HIDE_TIMEOUT);
-      console.log(this.deferredHide);
-    }
-  };
-
-  render () {
-    let className = style.root;
-    if (this.props.className) className += ` ${this.props.className}`;
-    if (this.state.active) className += ` ${style.active}`;
-
-    return (
-      <span data-react-toolbox='tooltip' className={className}>
-        {this.props.label}
-      </span>
-    );
-  }
-}
-
-export default Tooltip;
+export default from './Tooltip.jsx';
diff --git a/docs/app/components/layout/main/modules/examples/table_example_1.txt b/docs/app/components/layout/main/modules/examples/table_example_1.txt
index 6ca77f595..bee3dd480 100644
--- a/docs/app/components/layout/main/modules/examples/table_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/table_example_1.txt
@@ -31,7 +31,7 @@ class TableTest extends React.Component {
         model={UserModel}
         onChange={this.handleChange}
         onSelect={this.handleSelect}
-        selectable={true}
+        selectable
         selected={this.state.selected}
         source={this.state.source}
       />
diff --git a/spec/components/dropdown.jsx b/spec/components/dropdown.jsx
index ecb75d53d..a87c1c559 100644
--- a/spec/components/dropdown.jsx
+++ b/spec/components/dropdown.jsx
@@ -67,7 +67,7 @@ class DropdownTest extends React.Component {
 
         <Dropdown
           source={countries}
-          disabled={true}
+          disabled
           onChange={this.handleChange.bind(this, 'dropdown3')}
         />
       </section>
diff --git a/spec/components/icon_menu.jsx b/spec/components/icon_menu.jsx
index afb075354..21cd51b19 100644
--- a/spec/components/icon_menu.jsx
+++ b/spec/components/icon_menu.jsx
@@ -31,12 +31,12 @@ class IconMenuTest extends React.Component {
         <IconMenu
           icon='more-vert'
           position='auto'
-          iconRipple={true}
-          menuRipple={true}
+          iconRipple
+          menuRipple
           onShow={this.handleShow}
           onHide={this.handleHide}
           onSelect={this.handleSelect}
-          selectable={true}
+          selectable
           selected={this.state.selected}
         >
           <MenuItem onClick={this.handleItem} value='refresh' caption='Refresh' />
diff --git a/spec/components/snackbar.jsx b/spec/components/snackbar.jsx
index 0c289a00f..fe923d2fb 100644
--- a/spec/components/snackbar.jsx
+++ b/spec/components/snackbar.jsx
@@ -3,6 +3,10 @@ import Button from '../../components/button';
 import Snackbar from '../../components/snackbar';
 
 class SnackbarTest extends React.Component {
+  state = {
+    active: false
+  };
+
   handleSnackbarClick = () => {
     this.setState({active: false});
   };
@@ -15,10 +19,6 @@ class SnackbarTest extends React.Component {
     this.setState({active: true});
   };
 
-  state = {
-    active: false
-  };
-
   render () {
     return (
       <section>
diff --git a/spec/components/table.jsx b/spec/components/table.jsx
index 49682851a..e6c8739d4 100644
--- a/spec/components/table.jsx
+++ b/spec/components/table.jsx
@@ -40,7 +40,7 @@ class TableTest extends React.Component {
           model={UserModel}
           onChange={this.handleChange}
           onSelect={this.handleSelect}
-          selectable={true}
+          selectable
           selected={this.state.selected}
           source={this.state.source}
         />

From ceb2ce4c7a62488fb1361216ad815aa93398a5a9 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 22 Nov 2015 22:13:27 +0100
Subject: [PATCH 0140/1024] Reorganize pickers

---
 .../date_picker/{calendar => }/Calendar.jsx   | 19 ++++++++++---------
 .../{calendar/day.jsx => CalendarDay.jsx}     |  4 ++--
 .../{calendar/month.jsx => CalendarMonth.jsx} | 10 +++++-----
 components/date_picker/DatePicker.jsx         |  4 ++--
 components/date_picker/DatePickerDialog.jsx   |  2 +-
 components/date_picker/_config.scss           | 15 +++++++++++++++
 components/date_picker/calendar/_config.scss  | 14 --------------
 components/date_picker/calendar/index.jsx     |  1 -
 .../style.scss => style.calendar.scss}        |  2 +-
 components/time_picker/{clock => }/Clock.jsx  |  8 ++++----
 .../{clock/face.jsx => ClockFace.jsx}         |  2 +-
 .../{clock/hand.jsx => ClockHand.jsx}         |  8 ++++----
 .../{clock/hours.jsx => ClockHours.jsx}       |  6 +++---
 .../{clock/minutes.jsx => ClockMinutes.jsx}   |  8 ++++----
 components/time_picker/TimePickerDialog.jsx   |  2 +-
 components/time_picker/_config.scss           | 14 ++++++++++++++
 components/time_picker/clock/_config.scss     | 13 -------------
 components/time_picker/clock/index.jsx        |  1 -
 .../{clock/style.scss => style.clock.scss}    |  2 +-
 components/tooltip/Tooltip.jsx                |  1 -
 20 files changed, 68 insertions(+), 68 deletions(-)
 rename components/date_picker/{calendar => }/Calendar.jsx (89%)
 rename components/date_picker/{calendar/day.jsx => CalendarDay.jsx} (94%)
 rename components/date_picker/{calendar/month.jsx => CalendarMonth.jsx} (89%)
 delete mode 100644 components/date_picker/calendar/_config.scss
 delete mode 100644 components/date_picker/calendar/index.jsx
 rename components/date_picker/{calendar/style.scss => style.calendar.scss} (98%)
 rename components/time_picker/{clock => }/Clock.jsx (94%)
 rename components/time_picker/{clock/face.jsx => ClockFace.jsx} (97%)
 rename components/time_picker/{clock/hand.jsx => ClockHand.jsx} (94%)
 rename components/time_picker/{clock/hours.jsx => ClockHours.jsx} (96%)
 rename components/time_picker/{clock/minutes.jsx => ClockMinutes.jsx} (90%)
 delete mode 100644 components/time_picker/clock/_config.scss
 delete mode 100644 components/time_picker/clock/index.jsx
 rename components/time_picker/{clock/style.scss => style.clock.scss} (98%)

diff --git a/components/date_picker/calendar/Calendar.jsx b/components/date_picker/Calendar.jsx
similarity index 89%
rename from components/date_picker/calendar/Calendar.jsx
rename to components/date_picker/Calendar.jsx
index 5b8cf1043..a8aee1a2a 100644
--- a/components/date_picker/calendar/Calendar.jsx
+++ b/components/date_picker/Calendar.jsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import CssTransitionGroup from 'react-addons-css-transition-group';
-import { SlideLeft, SlideRight } from '../../animations';
-import FontIcon from '../../font_icon';
-import Ripple from '../../ripple';
-import Month from './Month';
-import time from '../../utils/time';
-import utils from '../../utils/utils';
-import style from './style';
+import { SlideLeft, SlideRight } from '../animations';
+import FontIcon from '../font_icon';
+import Ripple from '../ripple';
+import CalendarMonth from './CalendarMonth';
+import time from '../utils/time';
+import utils from '../utils/utils';
+import style from './style.calendar';
 
 class Calendar extends React.Component {
   static propTypes = {
@@ -99,13 +99,14 @@ class Calendar extends React.Component {
           <Ripple ref='rippleRight' className={style.ripple} spread={1.2} centered />
         </FontIcon>
         <CssTransitionGroup transitionName={animation} transitionEnterTimeout={350} transitionLeaveTimeout={350}>
-          <Month
+          <CalendarMonth
             key={this.state.viewDate.getMonth()}
             maxDate={this.props.maxDate}
             minDate={this.props.minDate}
             viewDate={this.state.viewDate}
             selectedDate={this.props.selectedDate}
-            onDayClick={this.handleDayClick} />
+            onDayClick={this.handleDayClick}
+          />
         </CssTransitionGroup>
       </div>
     );
diff --git a/components/date_picker/calendar/day.jsx b/components/date_picker/CalendarDay.jsx
similarity index 94%
rename from components/date_picker/calendar/day.jsx
rename to components/date_picker/CalendarDay.jsx
index 38e7bf65b..6b8768582 100644
--- a/components/date_picker/calendar/day.jsx
+++ b/components/date_picker/CalendarDay.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import time from '../../utils/time';
-import style from './style';
+import time from '../utils/time';
+import style from './style.calendar';
 
 class Day extends React.Component {
   static propTypes = {
diff --git a/components/date_picker/calendar/month.jsx b/components/date_picker/CalendarMonth.jsx
similarity index 89%
rename from components/date_picker/calendar/month.jsx
rename to components/date_picker/CalendarMonth.jsx
index ac75eaa27..65000c376 100644
--- a/components/date_picker/calendar/month.jsx
+++ b/components/date_picker/CalendarMonth.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import time from '../../utils/time';
-import utils from '../../utils/utils';
-import Day from './Day';
-import style from './style';
+import CalendarDay from './CalendarDay';
+import time from '../utils/time';
+import utils from '../utils/utils';
+import style from './style.calendar';
 
 class Month extends React.Component {
   static propTypes = {
@@ -29,7 +29,7 @@ class Month extends React.Component {
       const disabled = time.dateOutOfRange(date, this.props.minDate, this.props.maxDate);
 
       return (
-        <Day
+        <CalendarDay
           key={i}
           day={i}
           disabled={disabled}
diff --git a/components/date_picker/DatePicker.jsx b/components/date_picker/DatePicker.jsx
index a60967543..632a08428 100644
--- a/components/date_picker/DatePicker.jsx
+++ b/components/date_picker/DatePicker.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import CalendarDialog from './DatePickerDialog';
+import DatePickerDialog from './DatePickerDialog';
 import events from '../utils/events';
 import Input from '../input';
 import style from './style';
@@ -46,7 +46,7 @@ class DatePicker extends React.Component {
           type='text'
           value={date}
         />
-        <CalendarDialog
+        <DatePickerDialog
           active={this.state.active}
           maxDate={this.props.maxDate}
           minDate={this.props.minDate}
diff --git a/components/date_picker/DatePickerDialog.jsx b/components/date_picker/DatePickerDialog.jsx
index 6df5cfa55..ab689110f 100644
--- a/components/date_picker/DatePickerDialog.jsx
+++ b/components/date_picker/DatePickerDialog.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Calendar from './calendar';
+import Calendar from './Calendar';
 import Dialog from '../dialog';
 import style from './style';
 import time from '../utils/time';
diff --git a/components/date_picker/_config.scss b/components/date_picker/_config.scss
index 8c7f86df6..7f6b7d780 100644
--- a/components/date_picker/_config.scss
+++ b/components/date_picker/_config.scss
@@ -13,3 +13,18 @@ $datepicker-month-font-size: $font-size-big;
 $datepicker-day-font-size: 5 * $unit;
 $datepicker-day-line-height: 4 * $unit;
 $datepicker-year-font-size: $font-size-small;
+
+$calendar-primary: $color-primary;
+$calendar-primary-contrast: $color-primary-contrast;
+$calendar-primary-color: $calendar-primary !default;
+$calendar-primary-contrast-color: $calendar-primary-contrast !default;
+$calendar-primary-hover-color: rgba($calendar-primary, 0.21) !default;
+$calendar-arrows-color: $palette-grey-600 !default;
+$calendar-arrows-font-size: 2 * $unit;
+$calendar-arrows-ripple-duration: 450ms;
+$calendar-year-font-size: 2.4;
+$calendar-day-font-size: 1.3 * $unit;
+$calendar-day-disable-opacity: 0.25;
+$calendar-row-height: 3 * $unit;
+$calendar-day-padding: .2 * $unit;
+$calendar-total-height: $calendar-row-height * 8 + $calendar-day-padding * 12;
diff --git a/components/date_picker/calendar/_config.scss b/components/date_picker/calendar/_config.scss
deleted file mode 100644
index 53d6ac989..000000000
--- a/components/date_picker/calendar/_config.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-$calendar-primary: $color-primary;
-$calendar-primary-contrast: $color-primary-contrast;
-$calendar-primary-color: $calendar-primary !default;
-$calendar-primary-contrast-color: $calendar-primary-contrast !default;
-$calendar-primary-hover-color: rgba($calendar-primary, 0.21) !default;
-$calendar-arrows-color: $palette-grey-600 !default;
-$calendar-arrows-font-size: 2 * $unit;
-$calendar-arrows-ripple-duration: 450ms;
-$calendar-year-font-size: 2.4;
-$calendar-day-font-size: 1.3 * $unit;
-$calendar-day-disable-opacity: 0.25;
-$calendar-row-height: 3 * $unit;
-$calendar-day-padding: .2 * $unit;
-$calendar-total-height: $calendar-row-height * 8 + $calendar-day-padding * 12;
diff --git a/components/date_picker/calendar/index.jsx b/components/date_picker/calendar/index.jsx
deleted file mode 100644
index 0efaa9a65..000000000
--- a/components/date_picker/calendar/index.jsx
+++ /dev/null
@@ -1 +0,0 @@
-export default from './Calendar.jsx';
diff --git a/components/date_picker/calendar/style.scss b/components/date_picker/style.calendar.scss
similarity index 98%
rename from components/date_picker/calendar/style.scss
rename to components/date_picker/style.calendar.scss
index 057fb8007..d5da9cc96 100644
--- a/components/date_picker/calendar/style.scss
+++ b/components/date_picker/style.calendar.scss
@@ -1,4 +1,4 @@
-@import "http://github.com/base";
+@import "http://github.com/base";
 @import "http://github.com/config";
 
 .root {
diff --git a/components/time_picker/clock/Clock.jsx b/components/time_picker/Clock.jsx
similarity index 94%
rename from components/time_picker/clock/Clock.jsx
rename to components/time_picker/Clock.jsx
index 4338fce35..a56e7bf10 100644
--- a/components/time_picker/clock/Clock.jsx
+++ b/components/time_picker/Clock.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import style from './style';
-import time from '../../utils/time';
-import Hours from './Hours';
-import Minutes from './Minutes';
+import style from './style.clock';
+import time from '../utils/time';
+import Hours from './ClockHours';
+import Minutes from './ClockMinutes';
 
 class Clock extends React.Component {
   static propTypes = {
diff --git a/components/time_picker/clock/face.jsx b/components/time_picker/ClockFace.jsx
similarity index 97%
rename from components/time_picker/clock/face.jsx
rename to components/time_picker/ClockFace.jsx
index a5dd546dd..ae1821325 100644
--- a/components/time_picker/clock/face.jsx
+++ b/components/time_picker/ClockFace.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import style from './style';
+import style from './style.clock';
 
 class Face extends React.Component {
   static propTypes = {
diff --git a/components/time_picker/clock/hand.jsx b/components/time_picker/ClockHand.jsx
similarity index 94%
rename from components/time_picker/clock/hand.jsx
rename to components/time_picker/ClockHand.jsx
index 0bed5b6d6..6dea2f2ce 100644
--- a/components/time_picker/clock/hand.jsx
+++ b/components/time_picker/ClockHand.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import style from './style';
-import events from '../../utils/events';
-import prefixer from '../../utils/prefixer';
-import utils from '../../utils/utils';
+import style from './style.clock';
+import events from '../utils/events';
+import prefixer from '../utils/prefixer';
+import utils from '../utils/utils';
 
 class Hand extends React.Component {
   static propTypes = {
diff --git a/components/time_picker/clock/hours.jsx b/components/time_picker/ClockHours.jsx
similarity index 96%
rename from components/time_picker/clock/hours.jsx
rename to components/time_picker/ClockHours.jsx
index a8cd898b4..a1c2491fb 100644
--- a/components/time_picker/clock/hours.jsx
+++ b/components/time_picker/ClockHours.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import utils from '../../utils/utils';
-import Face from './Face';
-import Hand from './Hand';
+import utils from '../utils/utils';
+import Face from './ClockFace';
+import Hand from './ClockHand';
 
 const outerNumbers = [0, ...utils.range(13, 24)];
 const innerNumbers = [12, ...utils.range(1, 12)];
diff --git a/components/time_picker/clock/minutes.jsx b/components/time_picker/ClockMinutes.jsx
similarity index 90%
rename from components/time_picker/clock/minutes.jsx
rename to components/time_picker/ClockMinutes.jsx
index 1f9940fee..096ff6ea8 100644
--- a/components/time_picker/clock/minutes.jsx
+++ b/components/time_picker/ClockMinutes.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import utils from '../../utils/utils';
-import style from './style';
-import Face from './Face';
-import Hand from './Hand';
+import utils from '../utils/utils';
+import style from './style.clock';
+import Face from './ClockFace';
+import Hand from './ClockHand';
 
 const minutes = utils.range(0, 60, 5);
 const step = 360 / 60;
diff --git a/components/time_picker/TimePickerDialog.jsx b/components/time_picker/TimePickerDialog.jsx
index 4a2429f2c..2dd84b323 100644
--- a/components/time_picker/TimePickerDialog.jsx
+++ b/components/time_picker/TimePickerDialog.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import style from './style';
 import time from '../utils/time';
-import Clock from './clock';
+import Clock from './Clock';
 import Dialog from '../dialog';
 
 class TimePickerDialog extends React.Component {
diff --git a/components/time_picker/_config.scss b/components/time_picker/_config.scss
index 7cc7d2c76..568202839 100644
--- a/components/time_picker/_config.scss
+++ b/components/time_picker/_config.scss
@@ -11,3 +11,17 @@ $timepicker-primary-dark-color: $timepicker-primary-dark !default;
 $timepicker-ampm-height: 2.2 * $unit;
 $timepicker-ampm-width: 4 * $unit;
 $timepicker-dialog-width: 30 * $unit;
+
+$clock-padding: 1.5 * $unit 2 * $unit;
+$clock-primary: $color-primary;
+$clock-primary-contrast: $color-primary-contrast;
+$clock-primary-dark: $color-primary-dark;
+$clock-primary-color: $clock-primary !default;
+$clock-primary-hover-color: rgba($clock-primary, 0.20) !default;
+$clock-primary-contrast-color: $clock-primary-contrast !default;
+$clock-primary-dark-color: $clock-primary-dark !default;
+$clock-number-size: 2 * $unit;
+$clock-hand-width: .4 * $unit;
+$clock-hand-dot-size: 1 * $unit;
+$clock-knob-size: 3.4 * $unit;
+$clock-knob-small-size: 1.2 * $unit;
diff --git a/components/time_picker/clock/_config.scss b/components/time_picker/clock/_config.scss
deleted file mode 100644
index 0c07e6d92..000000000
--- a/components/time_picker/clock/_config.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-$clock-padding: 1.5 * $unit 2 * $unit;
-$clock-primary: $color-primary;
-$clock-primary-contrast: $color-primary-contrast;
-$clock-primary-dark: $color-primary-dark;
-$clock-primary-color: $clock-primary !default;
-$clock-primary-hover-color: rgba($clock-primary, 0.20) !default;
-$clock-primary-contrast-color: $clock-primary-contrast !default;
-$clock-primary-dark-color: $clock-primary-dark !default;
-$clock-number-size: 2 * $unit;
-$clock-hand-width: .4 * $unit;
-$clock-hand-dot-size: 1 * $unit;
-$clock-knob-size: 3.4 * $unit;
-$clock-knob-small-size: 1.2 * $unit;
diff --git a/components/time_picker/clock/index.jsx b/components/time_picker/clock/index.jsx
deleted file mode 100644
index b75fdcc33..000000000
--- a/components/time_picker/clock/index.jsx
+++ /dev/null
@@ -1 +0,0 @@
-export default from './Clock.jsx';
diff --git a/components/time_picker/clock/style.scss b/components/time_picker/style.clock.scss
similarity index 98%
rename from components/time_picker/clock/style.scss
rename to components/time_picker/style.clock.scss
index ff041663c..051a0c1f3 100644
--- a/components/time_picker/clock/style.scss
+++ b/components/time_picker/style.clock.scss
@@ -1,4 +1,4 @@
-@import "http://github.com/base";
+@import "http://github.com/base";
 @import "http://github.com/config";
 
 .root {
diff --git a/components/tooltip/Tooltip.jsx b/components/tooltip/Tooltip.jsx
index e223431a5..f68dc4909 100644
--- a/components/tooltip/Tooltip.jsx
+++ b/components/tooltip/Tooltip.jsx
@@ -49,7 +49,6 @@ class Tooltip extends React.Component {
   handleParentMouseOut = () => {
     if (this.state.active) {
       this.deferredHide = setTimeout(() => { this.setState({active: false}); }, HIDE_TIMEOUT);
-      console.log(this.deferredHide);
     }
   };
 

From 25964bf11886aa21b017806fea1c1735ed84aa51 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 22 Nov 2015 22:19:11 +0100
Subject: [PATCH 0141/1024] Pass linter rules

---
 docs/app/components/editor/index.jsx                  | 11 ++++++-----
 .../components/layout/main/components/navigation.jsx  |  9 +++++----
 .../components/layout/main/components/playground.jsx  |  8 ++++----
 docs/app/components/layout/main/index.jsx             | 11 ++++++++++-
 docs/app/components/navigation/index.jsx              |  8 ++++----
 5 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/docs/app/components/editor/index.jsx b/docs/app/components/editor/index.jsx
index b187a6d03..cf7c5bdac 100644
--- a/docs/app/components/editor/index.jsx
+++ b/docs/app/components/editor/index.jsx
@@ -6,6 +6,7 @@ import 'codemirror/mode/javascript/javascript';
 class Editor extends React.Component {
   static propTypes = {
     className: React.PropTypes.string,
+    codeText: React.PropTypes.string,
     lineNumbers: React.PropTypes.bool,
     onChange: React.PropTypes.func,
     readOnly: React.PropTypes.bool,
@@ -47,6 +48,11 @@ class Editor extends React.Component {
     }
   };
 
+  setCode (code) {
+    this.editor.getDoc().setValue(code);
+    this.handleChange();
+  }
+
   render () {
     let className = style.editor;
     if (this.props.className) className += ` ${this.props.className}`;
@@ -56,11 +62,6 @@ class Editor extends React.Component {
       </div>
     );
   }
-
-  setCode (code) {
-    this.editor.getDoc().setValue(code);
-    this.handleChange();
-  }
 }
 
 export default Editor;
diff --git a/docs/app/components/layout/main/components/navigation.jsx b/docs/app/components/layout/main/components/navigation.jsx
index 09678b5f3..facb3ff65 100644
--- a/docs/app/components/layout/main/components/navigation.jsx
+++ b/docs/app/components/layout/main/components/navigation.jsx
@@ -5,12 +5,13 @@ import components from '../modules/components';
 import style from './navigation.scss';
 
 const MainNavigation = React.createClass({
-  mixins: [History],
-
   propTypes: {
-    active: React.PropTypes.bool
+    active: React.PropTypes.bool,
+    className: React.PropTypes.string
   },
 
+  mixins: [History],
+
   renderDrawerItems () {
     return Object.keys(components).map((key) => {
       const ToolboxComponent = components[key];
@@ -39,7 +40,7 @@ const MainNavigation = React.createClass({
     return (
       <aside className={className}>
         <List className={style.list} selectable ripple>
-          { this.renderDrawerItems() }
+          {this.renderDrawerItems()}
         </List>
         <footer className={style.footer}>
           <span>React Toolbox © 2015</span>
diff --git a/docs/app/components/layout/main/components/playground.jsx b/docs/app/components/layout/main/components/playground.jsx
index 93b8904bf..c848fec29 100644
--- a/docs/app/components/layout/main/components/playground.jsx
+++ b/docs/app/components/layout/main/components/playground.jsx
@@ -17,6 +17,10 @@ class Playground extends React.Component {
     this.setState({code});
   };
 
+  loadCode (code) {
+    this.refs.editor.setCode(code);
+  }
+
   render () {
     return (
       <aside className={this.props.className}>
@@ -33,10 +37,6 @@ class Playground extends React.Component {
       </aside>
     );
   }
-
-  loadCode (code) {
-    this.refs.editor.setCode(code);
-  }
 }
 
 export default Playground;
diff --git a/docs/app/components/layout/main/index.jsx b/docs/app/components/layout/main/index.jsx
index cb9fe5c5c..84e40e5d7 100644
--- a/docs/app/components/layout/main/index.jsx
+++ b/docs/app/components/layout/main/index.jsx
@@ -21,8 +21,15 @@ const LoadExampleButton = (props) => {
   );
 };
 
+LoadExampleButton.propTypes = {
+  onClick: React.PropTypes.func
+};
+
 class Main extends React.Component {
-  LOAD_EXAMPLE_CLASS = 'js-load-in-playground playground-button';
+  static propTypes = {
+    onClick: React.PropTypes.func,
+    params: React.PropTypes.object
+  };
 
   state = {
     playground: false
@@ -36,6 +43,8 @@ class Main extends React.Component {
     this.renderExampleLoaders();
   }
 
+  LOAD_EXAMPLE_CLASS = 'js-load-in-playground playground-button';
+
   handlePlayGroundClick = () => {
     this.setState({ playground: !this.state.playground});
   };
diff --git a/docs/app/components/navigation/index.jsx b/docs/app/components/navigation/index.jsx
index fc25581d3..63fb279ad 100644
--- a/docs/app/components/navigation/index.jsx
+++ b/docs/app/components/navigation/index.jsx
@@ -14,14 +14,14 @@ const Navigation = (props) => {
 };
 
 Navigation.propTypes = {
-  className: React.PropTypes.string,
-  activeClassName: React.PropTypes.string
+  activeClassName: React.PropTypes.string,
+  className: React.PropTypes.string
 };
 
 
 Navigation.defaultProps = {
-  className: '',
-  activeClassName: ''
+  activeClassName: '',
+  className: ''
 };
 
 export default Navigation;

From 598d80564b3a1f9b66f728e6a83f63e470e5eb49 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 22 Nov 2015 22:28:24 +0100
Subject: [PATCH 0142/1024] Rename lists subcomponents and little fixes

---
 components/commons.scss                       |  2 +-
 components/form/Form.jsx                      |  2 +-
 components/index.js                           | 26 +++++++++----------
 .../list/{checkbox.jsx => ListCheckbox.jsx}   |  2 +-
 .../list/{divider.jsx => ListDivider.jsx}     |  0
 components/list/{item.jsx => ListItem.jsx}    |  2 +-
 .../list/{content.jsx => ListItemContent.jsx} |  0
 .../list/{subheader.jsx => ListSubheader.jsx} |  0
 components/list/index.jsx                     |  8 +++---
 components/list/list.jsx                      |  2 +-
 docs/app/components/_globals.scss             |  2 ++
 11 files changed, 24 insertions(+), 22 deletions(-)
 rename components/list/{checkbox.jsx => ListCheckbox.jsx} (96%)
 rename components/list/{divider.jsx => ListDivider.jsx} (100%)
 rename components/list/{item.jsx => ListItem.jsx} (97%)
 rename components/list/{content.jsx => ListItemContent.jsx} (100%)
 rename components/list/{subheader.jsx => ListSubheader.jsx} (100%)

diff --git a/components/commons.scss b/components/commons.scss
index d8c4b1c8b..ff4537526 100644
--- a/components/commons.scss
+++ b/components/commons.scss
@@ -99,7 +99,7 @@ p {
   @include typo-body-1;
 }
 
-@if $import-flex-attributes == true {
+@if $import-flex-attributes != false {
   //-- Flex
   [data-flex] {
     display: flex;
diff --git a/components/form/Form.jsx b/components/form/Form.jsx
index 9cdd3cca2..532a2e2cb 100644
--- a/components/form/Form.jsx
+++ b/components/form/Form.jsx
@@ -6,7 +6,7 @@ import Checkbox from '../checkbox';
 import DatePicker from '../date_picker';
 import Dropdown from '../dropdown';
 import Input from '../input';
-import RadioGroup from '../radio/radio_group';
+import RadioGroup from '../radio/RadioGroup';
 import Slider from '../slider';
 import Switch from '../switch';
 import TimePicker from '../time_picker';
diff --git a/components/index.js b/components/index.js
index 467794ee5..e429c8754 100644
--- a/components/index.js
+++ b/components/index.js
@@ -13,26 +13,26 @@ import FontIcon from './font_icon';
 import Form from './form';
 import Input from './input';
 import Link from './link';
-import List from './list/list';
-import ListItem from './list/item';
-import ListDivider from './list/divider';
-import ListCheckbox from './list/checkbox';
-import ListSubHeader from './list/subheader';
-import Menu from './menu/menu';
-import MenuItem from './menu/menu_item';
-import MenuDivider from './menu/menu_divider';
-import IconMenu from './menu/icon_menu';
+import List from './list/List';
+import ListItem from './list/ListItem';
+import ListDivider from './list/ListDivider';
+import ListCheckbox from './list/ListCheckbox';
+import ListSubHeader from './list/ListSubHeader';
+import Menu from './menu/Menu';
+import MenuItem from './menu/MenuItem';
+import MenuDivider from './menu/MenuDivider';
+import IconMenu from './menu/IconMenu';
 import Navigation from './navigation';
 import ProgressBar from './progress_bar';
-import RadioGroup from './radio/radio_group';
-import RadioButton from './radio/radio_button';
+import RadioGroup from './radio/RadioGroup';
+import RadioButton from './radio/RadioButton';
 import Ripple from './ripple';
 import Slider from './slider';
 import Snackbar from './snackbar';
 import Switch from './switch';
 import Table from './table';
-import Tabs from './tabs/tabs';
-import Tab from './tabs/tab';
+import Tabs from './tabs/Tabs';
+import Tab from './tabs/Tab';
 import Tooltip from './tooltip';
 import TimePicker from './time_picker';
 
diff --git a/components/list/checkbox.jsx b/components/list/ListCheckbox.jsx
similarity index 96%
rename from components/list/checkbox.jsx
rename to components/list/ListCheckbox.jsx
index 2e3eabf62..615e04e22 100644
--- a/components/list/checkbox.jsx
+++ b/components/list/ListCheckbox.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import Checkbox from '../checkbox';
-import ListItemContent from './Content';
+import ListItemContent from './ListItemContent';
 import style from './style';
 
 const ListCheckbox = (props) => {
diff --git a/components/list/divider.jsx b/components/list/ListDivider.jsx
similarity index 100%
rename from components/list/divider.jsx
rename to components/list/ListDivider.jsx
diff --git a/components/list/item.jsx b/components/list/ListItem.jsx
similarity index 97%
rename from components/list/item.jsx
rename to components/list/ListItem.jsx
index c5a259c64..96a7c4831 100644
--- a/components/list/item.jsx
+++ b/components/list/ListItem.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import FontIcon from '../font_icon';
-import ListItemContent from './Content';
+import ListItemContent from './ListItemContent';
 import Ripple from '../ripple';
 import style from './style';
 
diff --git a/components/list/content.jsx b/components/list/ListItemContent.jsx
similarity index 100%
rename from components/list/content.jsx
rename to components/list/ListItemContent.jsx
diff --git a/components/list/subheader.jsx b/components/list/ListSubheader.jsx
similarity index 100%
rename from components/list/subheader.jsx
rename to components/list/ListSubheader.jsx
diff --git a/components/list/index.jsx b/components/list/index.jsx
index f8a57e7cf..371643cf8 100644
--- a/components/list/index.jsx
+++ b/components/list/index.jsx
@@ -1,5 +1,5 @@
 export List from './List';
-export ListItem from './Item';
-export ListDivider from './Divider';
-export ListCheckbox from './Checkbox';
-export ListSubHeader from './Subheader';
+export ListItem from './ListItem';
+export ListDivider from './ListDivider';
+export ListCheckbox from './ListCheckbox';
+export ListSubHeader from './ListSubHeader';
diff --git a/components/list/list.jsx b/components/list/list.jsx
index dd4af432b..bc3936a12 100644
--- a/components/list/list.jsx
+++ b/components/list/list.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ListItem from './Item';
+import ListItem from './ListItem';
 import style from './style';
 
 class List extends React.Component {
diff --git a/docs/app/components/_globals.scss b/docs/app/components/_globals.scss
index ff5edcc15..a6fe84233 100644
--- a/docs/app/components/_globals.scss
+++ b/docs/app/components/_globals.scss
@@ -1,3 +1,5 @@
+$import-flex-attributes: true;
+
 @import "http://github.com/~react-toolbox/base";
 @import "http://github.com/~react-toolbox/commons";
 

From 37199c22e6ac6b046e54bcfe9ddc7127fa0ff3ba Mon Sep 17 00:00:00 2001
From: Nathan Marks <nathan@poweredbysearch.com>
Date: Sat, 14 Nov 2015 11:21:17 -0500
Subject: [PATCH 0143/1024] Started card overhaul

---
 components/card/index.js | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 components/card/index.js

diff --git a/components/card/index.js b/components/card/index.js
new file mode 100644
index 000000000..e69de29bb

From dba68e72a5caa24552bc4f5ed0fc6dbf9aa045d3 Mon Sep 17 00:00:00 2001
From: Nathan Marks <nathan@poweredbysearch.com>
Date: Tue, 17 Nov 2015 16:24:22 -0500
Subject: [PATCH 0144/1024] Added <Avatar> component as required by the card
 title component

---
 .eslintrc                              |   2 +-
 components/avatar/Avatar.jsx           |  67 ++++++++++
 components/avatar/index.js             |   1 +
 components/avatar/style.scss           |  11 ++
 components/card/Card.jsx               |  99 ++++-----------
 components/card/CardActions.jsx        |  32 +++++
 components/card/CardMedia.jsx          |  48 +++++++
 components/card/CardText.jsx           |  32 +++++
 components/card/CardTitle.jsx          |  61 +++++++++
 components/card/_config.scss           |  17 +--
 components/card/index.js               |   5 +
 components/card/{index.jsx => old.jsx} |   0
 components/card/style.scss             | 168 +++++++++++++------------
 components/decorators/ClassNames.jsx   |  31 +++++
 spec/components/card.jsx               | 102 +++++++++++----
 spec/root.jsx                          |  21 +---
 spec/style.scss                        |  48 ++++++-
 17 files changed, 531 insertions(+), 214 deletions(-)
 create mode 100644 components/avatar/Avatar.jsx
 create mode 100644 components/avatar/index.js
 create mode 100644 components/avatar/style.scss
 create mode 100644 components/card/CardActions.jsx
 create mode 100644 components/card/CardMedia.jsx
 create mode 100644 components/card/CardText.jsx
 create mode 100644 components/card/CardTitle.jsx
 rename components/card/{index.jsx => old.jsx} (100%)
 create mode 100644 components/decorators/ClassNames.jsx

diff --git a/.eslintrc b/.eslintrc
index 043e6ba2e..5b38b7a81 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -227,7 +227,7 @@
     "react/no-danger": 0,
     "react/no-did-mount-set-state": 0,
     "react/no-did-update-set-state": 1,
-    "react/no-multi-comp": 0,
+    "react/no-multi-comp": 1,
     "react/no-unknown-property": 1,
     "react/prop-types": [2, {"ignore": ["onMouseDown", "onTouchStart"]}],
     "react/react-in-jsx-scope": 1,
diff --git a/components/avatar/Avatar.jsx b/components/avatar/Avatar.jsx
new file mode 100644
index 000000000..503d60e7c
--- /dev/null
+++ b/components/avatar/Avatar.jsx
@@ -0,0 +1,67 @@
+import React, { PropTypes, Component } from 'react';
+import ClassNames from '../decorators/ClassNames';
+import FontIcon from '../font_icon'; // ewww! :P @TODO
+import style from './style';
+
+@ClassNames(style)
+class Avatar extends Component {
+
+  static propTypes = {
+    accent: PropTypes.bool,
+    children: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.node
+    ]),
+    className: PropTypes.string,
+    classNames: PropTypes.func,
+    icon: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.element
+    ]),
+    image: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.element
+    ]),
+    primary: PropTypes.bool,
+    size: PropTypes.number.required
+  }
+
+  static defaultProps = {
+    size: 40
+  }
+
+  render () {
+    const {
+      accent,
+      children,
+      className,
+      classNames,
+      icon,
+      primary,
+      image,
+      ...otherProps
+    } = this.props;
+
+    let component;
+
+    const classes = classNames('avatar', {
+      accent,
+      primary
+    }, className);
+
+    if (typeof image === 'string') {
+      component = <img className={style.avatarImg} src={image} />;
+    } else if (typeof image === 'string') {
+      component = <img className={style.avatarImg} src={image} />;
+    } else if (typeof icon === 'string') {
+      component = <FontIcon value="icon" />;
+    }
+
+    return (
+      <div className={classes}>{component ? component : children}</div>
+    );
+  }
+
+}
+
+export default Avatar;
diff --git a/components/avatar/index.js b/components/avatar/index.js
new file mode 100644
index 000000000..2c1f2bf4d
--- /dev/null
+++ b/components/avatar/index.js
@@ -0,0 +1 @@
+export Avatar from './Avatar.jsx';
diff --git a/components/avatar/style.scss b/components/avatar/style.scss
new file mode 100644
index 000000000..3f849d1b9
--- /dev/null
+++ b/components/avatar/style.scss
@@ -0,0 +1,11 @@
+.avatar {
+  width: 40px;
+  height: 40px;
+  overflow: hidden;
+  border-radius: 50%;
+}
+
+.avatarImg {
+  max-width: 100%;
+  height: auto;
+}
diff --git a/components/card/Card.jsx b/components/card/Card.jsx
index c06c439d7..210f7382d 100644
--- a/components/card/Card.jsx
+++ b/components/card/Card.jsx
@@ -1,87 +1,36 @@
-import React from 'react';
-import Navigation from '../navigation';
-import Ripple from '../ripple';
-import style from './style';
+import React, { PropTypes, Component } from 'react';
+import ClassNames from '../decorators/ClassNames';
+import styles from './style';
 
-class Card extends React.Component {
-  static propTypes = {
-    actions: React.PropTypes.array,
-    className: React.PropTypes.string,
-    color: React.PropTypes.string,
-    image: React.PropTypes.string,
-    loading: React.PropTypes.bool,
-    onClick: React.PropTypes.func,
-    subtitle: React.PropTypes.string,
-    text: React.PropTypes.string,
-    title: React.PropTypes.string,
-    type: React.PropTypes.oneOf(['wide', 'event', 'image'])
-  };
-
-  static defaultProps = {
-    className: '',
-    loading: false
-  };
+@ClassNames(styles)
+class Card extends Component {
 
-  handleMouseDown = (event) => {
-    if (this.props.onClick) {
-      event.preventDefault();
-      this.refs.ripple.start(event);
-      this.props.onClick(event, this);
-    }
-  };
-
-  renderActions () {
-    if (this.props.actions) {
-      return (
-        <Navigation data-role='actions' className={style.navigation} actions={this.props.actions} />
-      );
-    }
-  }
-
-  renderTitle () {
-    const styleFigure = {};
-    const styleOverflow = {};
-    if (this.props.image) styleFigure.backgroundImage = `url(http://github.com/$%7Bthis.props.image%7D)`;
-    if (this.props.color) {
-      styleFigure.backgroundColor = this.props.color;
-      styleOverflow.backgroundColor = this.props.color;
-    }
-
-    if (this.props.title || this.props.image) {
-      return (
-        <figure className={style.figure} style={styleFigure}>
-          {this.props.title ? <h5 data-role='title'>{this.props.title}</h5> : null}
-          {this.props.subtitle ? <small data-role='subtitle'>{this.props.subtitle}</small> : null}
-          {this.props.color ? <div className={style.overflow} style={styleOverflow}></div> : null}
-        </figure>
-      );
-    }
+  static propTypes = {
+    children: PropTypes.any,
+    className: PropTypes.string,
+    classNames: PropTypes.func,
+    raised: PropTypes.bool
   }
 
   render () {
-    let className = style.root;
-    if (this.props.type) className += ` ${style[this.props.type]}`;
-    if (this.props.onClick) className += ` ${style.touch}`;
-    if (this.props.image || this.props.color) className += ` ${style.contrast}`;
-    if (this.props.color) className += ` ${style.color}`;
-    if (this.props.loading) className += ` ${style.loading}`;
-    if (this.props.className) className += ` ${this.props.className}`;
+    const {
+      children,
+      className,
+      classNames,
+      raised,
+      ...otherProps
+    } = this.props;
+
+    const classes = classNames('card', {
+      'raised': raised
+    }, className);
 
     return (
       <div
-        data-react-toolbox='card'
-        className={className}
-        onMouseDown={this.handleMouseDown}
+        data-react-toolbox="card"
+        className={classes}
       >
-        {this.renderTitle()}
-        {this.props.text ? <p data-role='text' className={style.text}>{this.props.text}</p> : null}
-        {this.renderActions()}
-        <Ripple
-          ref='ripple'
-          className={style.ripple}
-          loading={this.props.loading}
-          spread={2.5}
-        />
+        {children}
       </div>
     );
   }
diff --git a/components/card/CardActions.jsx b/components/card/CardActions.jsx
new file mode 100644
index 000000000..605d40aaa
--- /dev/null
+++ b/components/card/CardActions.jsx
@@ -0,0 +1,32 @@
+import React, { PropTypes, Component } from 'react';
+import ClassNames from '../decorators/ClassNames';
+import style from './style';
+
+@ClassNames(style)
+class CardActions extends Component {
+
+  static propTypes = {
+    children: PropTypes.any,
+    className: PropTypes.string,
+    classNames: PropTypes.func
+  }
+
+  render () {
+    const {
+      children,
+      className,
+      classNames,
+      ...otherProps
+    } = this.props;
+
+    const classes = classNames('cardActions', className);
+
+    return (
+      <div className={classes} {...otherProps}>
+        {children}
+      </div>
+    );
+  }
+}
+
+export default CardActions;
diff --git a/components/card/CardMedia.jsx b/components/card/CardMedia.jsx
new file mode 100644
index 000000000..64faca5d7
--- /dev/null
+++ b/components/card/CardMedia.jsx
@@ -0,0 +1,48 @@
+import React, { PropTypes, Component } from 'react';
+import ClassNames from '../decorators/ClassNames';
+import style from './style';
+
+@ClassNames(style)
+class CardMedia extends Component {
+
+  static propTypes = {
+    aspectRatio: PropTypes.oneOf([ 'wide', 'square' ]),
+    children: PropTypes.node,
+    className: PropTypes.string,
+    classNames: PropTypes.func,
+    color: PropTypes.string,
+    image: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.node
+    ])
+  }
+
+  render () {
+    const {
+      aspectRatio,
+      children,
+      className,
+      classNames,
+      color,
+      image,
+      ...otherProps
+    } = this.props;
+
+    const classes = classNames('cardMedia', aspectRatio, className);
+
+    const bgStyle = {
+      backgroundColor: color ? color : undefined,
+      backgroundImage: typeof image === 'string' ? `url('http://github.com/$%7Bimage%7D')` : undefined
+    };
+
+    return (
+      <div style={bgStyle} className={classes} {...otherProps}>
+        <div className={style.content}>
+          {children}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default CardMedia;
diff --git a/components/card/CardText.jsx b/components/card/CardText.jsx
new file mode 100644
index 000000000..e2014bca2
--- /dev/null
+++ b/components/card/CardText.jsx
@@ -0,0 +1,32 @@
+import React, { PropTypes, Component } from 'react';
+import ClassNames from '../decorators/ClassNames';
+import style from './style';
+
+@ClassNames(style)
+class CardText extends Component {
+
+  static propTypes = {
+    children: PropTypes.any,
+    className: PropTypes.string,
+    classNames: PropTypes.func
+  }
+
+  render () {
+    const {
+      children,
+      className,
+      classNames,
+      ...otherProps
+    } = this.props;
+
+    const classes = classNames('cardText', className);
+
+    return (
+      <div className={classes} {...otherProps}>
+        {typeof children === 'string' ? <p>{children}</p> : children}
+      </div>
+    );
+  }
+}
+
+export default CardText;
diff --git a/components/card/CardTitle.jsx b/components/card/CardTitle.jsx
new file mode 100644
index 000000000..56e8a64a6
--- /dev/null
+++ b/components/card/CardTitle.jsx
@@ -0,0 +1,61 @@
+import React, { PropTypes, Component } from 'react';
+import ClassNames from '../decorators/ClassNames';
+import { Avatar } from '../avatar';
+import style from './style';
+
+@ClassNames(style)
+class CardTitle extends Component {
+
+  static propTypes = {
+    avatar: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.element
+    ]),
+    children: PropTypes.string,
+    className: PropTypes.string,
+    classNames: PropTypes.func,
+    subtitle: PropTypes.string,
+    title: PropTypes.string
+  }
+
+  render () {
+    let avatarComponent;
+
+    const {
+      avatar,
+      children,
+      className,
+      classNames,
+      subtitle,
+      title,
+      ...otherProps
+    } = this.props;
+
+    const classes = classNames('cardTitle', {
+      'small': avatar,
+      'large': !avatar
+    }, className);
+
+    if (typeof avatar === 'string') {
+      avatarComponent = <Avatar image={avatar} />;
+    } else {
+      avatarComponent = avatar;
+    }
+
+    return (
+      <div className={classes} {...otherProps}>
+        {avatarComponent && (
+          <div className={style.avatar}>
+            {avatarComponent}
+          </div>
+        )}
+        <div>
+          {(title || children) && <h5 className={style.title}>{title ? title : children}</h5>}
+          {subtitle && <p className={style.subtitle}>{subtitle}</p>}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default CardTitle;
diff --git a/components/card/_config.scss b/components/card/_config.scss
index 05ace4345..1f85e577e 100644
--- a/components/card/_config.scss
+++ b/components/card/_config.scss
@@ -1,7 +1,10 @@
-$card-color-white: $color-white !default;
-$card-title-height: 17.6 * $unit;
-$card-width-normal: 32 * $unit;
-$card-width-large: 51.2 * $unit;
-$card-offset: 1.6 * $unit;
-$card-navigation-offset: $card-offset / 2;
-$card-text-overlay: rgba($color-black, 0.2);
+$card-color-white: unquote("rgb(#{$color-white})") !default;
+$card-text-overlay: unquote("rgba(#{$color-black}, 0.2)");
+
+$card-background-color: $card-color-white;
+
+$card-padding-sm: 8px;
+$card-padding: 16px;
+$card-padding-lg: 20px;
+
+$card-font-size: $font-size-small;
diff --git a/components/card/index.js b/components/card/index.js
index e69de29bb..4935ce94d 100644
--- a/components/card/index.js
+++ b/components/card/index.js
@@ -0,0 +1,5 @@
+export Card from './Card.jsx';
+export CardActions from './CardActions.jsx';
+export CardMedia from './CardMedia.jsx';
+export CardText from './CardText.jsx';
+export CardTitle from './CardTitle.jsx';
diff --git a/components/card/index.jsx b/components/card/old.jsx
similarity index 100%
rename from components/card/index.jsx
rename to components/card/old.jsx
diff --git a/components/card/style.scss b/components/card/style.scss
index 48dd8809f..c255ab47d 100644
--- a/components/card/style.scss
+++ b/components/card/style.scss
@@ -1,112 +1,122 @@
 @import "http://github.com/base";
 @import "http://github.com/config";
 
-.figure {
-  position: relative;
+.card {
+  // Box Model
   display: flex;
-  min-height: $card-title-height;
   flex-direction: column;
-  justify-content: flex-end;
-  background-position: center center;
+  border-radius: 2px;
+  overflow: hidden;
+
+  // Fonts
+  font-size: $card-font-size;
+
+  // Colors
+  background: $card-background-color;
+
+  // Elevation
+  @include shadow-2dp();
+
+  // Raised Elevation as per spec
+  &.raised {
+    @include shadow-8dp();
+  }
+}
+
+.cardMedia {
+  position: relative;
+  background-repeat: no-repeat;
   background-size: cover;
-  > *:not(.overflow) {
-    z-index: $z-index-normal;
-    font-weight: $font-weight-normal;
+  background-position: center center;
+  height: 0;
+
+  &.wide {
+    width: 100%;
+    padding-top: 56.25%;
+  }
+
+  &.square {
+    width: 100%;
+    padding-top: 100%;
   }
-  > .overflow {
+
+  .content {
+    // Positioning
     position: absolute;
     top: 0;
     left: 0;
-    z-index: 0;
+
+    // Box Model
+    display: flex;
+    flex-direction: column;
     width: 100%;
     height: 100%;
-    opacity: .75;
   }
 }
 
-.text {
-  font-size: $font-size-small;
-  line-height: $font-size-big;
-  color: $color-text-secondary;
-}
+.cardTitle {
+  display: flex;
+  align-items: center;
 
-.navigation {
-  padding: $card-navigation-offset;
-  > * {
-    min-width: 0;
-    padding-right: $card-navigation-offset;
-    padding-left: $card-navigation-offset;
+  .avatar {
+    margin-right: 13px;
   }
-}
 
-.ripple {
-  background-color: $color-text-secondary;
-}
+  .subtitle {
+    color: $color-text-secondary;
+  }
 
-.root {
-  @include shadow-2dp();
-  position: relative;
-  display: flex;
-  width: $card-width-normal;
-  flex-direction: column;
-  overflow: hidden;
-  vertical-align: top;
-  background: $color-background;
-  > *:not(.navigation) {
-    padding: $card-offset;
+  &.large {
+    padding: $card-padding-lg $card-padding ($card-padding - 2px);
+
+    .title {
+      @include typo-headline();
+      line-height: 1.25;
+    }
   }
-  &:not(.color) > *:not(.figure), > *:not(:last-child) {
-    box-shadow: 0 1px $color-divider;
+
+  &.small {
+    padding: $card-padding;
+
+    .title {
+      @include typo-body-2(false, true);
+      line-height: 1.4;
+    }
+    .subtitle {
+      font-weight: 500;
+      line-height: 1.4;
+    }
   }
 }
 
-.touch {
-  cursor: pointer;
-}
+.cardTitle, .cardText {
+  padding: ($card-padding - 2px) $card-padding;
 
-.contrast {
-  .figure {
-    color: $card-color-white;
-    text-shadow: 0;
+  &:last-child {
+    padding-bottom: $card-padding-lg;
   }
-  .ripple {
-    background-color: $card-color-white;
-  }
-}
 
-.loading {
-  pointer-events: none;
-  cursor: none;
-  filter: grayscale(100%);
-  .ripple {
-    @include ripple-loading(cardloading, 2 * $card-width-normal, 2 * $card-width-normal);
-    width: 2 * $card-width-normal;
-    height: 2 * $card-width-normal;
-    animation-name: cardloading;
+  & + .cardText {
+    padding-top: 0;
   }
 }
 
-.image {
-  &, .figure {
-    height: $card-width-normal;
-  }
-  .figure {
-    padding: 0;
-    > h5 {
-      padding: $card-offset;
-      font-size: $font-size-small;
-      font-weight: $font-weight-bold;
-      background-color: $card-text-overlay;
+.cardActions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: $card-padding-sm $card-padding-sm;
+
+  button[data-react-toolbox="button"] {
+    min-width: 0;
+    margin: 0 $card-padding-sm/2;
+
+    &:first-child {
+      margin-left: $card-padding-sm;
     }
-  }
-}
 
-.event {
-  .figure {
-    justify-content: flex-start;
+    &:last-child {
+      margin-right: $card-padding-sm;
+    }
   }
 }
-
-.wide {
-  width: $card-width-large;
-}
diff --git a/components/decorators/ClassNames.jsx b/components/decorators/ClassNames.jsx
new file mode 100644
index 000000000..cb0cb5855
--- /dev/null
+++ b/components/decorators/ClassNames.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import ClassNames from 'classnames/bind';
+
+/**
+ * Provides a component with a classNames
+ * function bound to the provided CSS module
+ *
+ * Check for 'classNames()' in props
+ *
+ * @param  {CSS Module} styles
+ * @return {Component}
+ */
+function classNames (styles) {
+  const classNamesFn = ClassNames.bind(styles);
+
+  return function classNamesDecorator (ComposedComponent) {
+
+    return function ClassNamesDecor (props) {
+
+      return (
+        <ComposedComponent
+          classNames={classNamesFn}
+          {...props}
+        />
+      );
+    };
+  };
+}
+
+
+export default classNames;
diff --git a/spec/components/card.jsx b/spec/components/card.jsx
index 0f4dde4b0..34bb9e939 100644
--- a/spec/components/card.jsx
+++ b/spec/components/card.jsx
@@ -1,37 +1,85 @@
 import React from 'react';
-import Card from '../../components/card';
+import Button from '../../components/button';
+import {
+  Card,
+  CardActions,
+  CardMedia,
+  CardText,
+  CardTitle
+} from '../../components/card';
+import style from '../style';
 
-class CardTest extends React.Component {
-  onClick = () => {
-    console.log('onClick', arguments);
-  };
+const dummyText = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.';
 
-  onActionClick () {
-    console.log('onClick', arguments);
+const demos = [
+  {
+    name: 'Basic Card',
+    component: (
+      <Card className={style.card}>
+        <CardTitle>Basic Card</CardTitle>
+        <CardText>{dummyText}</CardText>
+        <CardActions>
+          <Button label="Action" />
+          <Button label="More" />
+        </CardActions>
+      </Card>
+    )
+  }, {
+    name: '16:9 Card Media',
+    component: (
+      <Card className={style.card}>
+        <CardMedia
+          aspectRatio="wide"
+          image="https://placeimg.com/800/450/nature"
+        />
+        <CardTitle
+          title="Basic Card"
+          subtitle="An awesome basic card"
+        />
+        <CardText>{dummyText}</CardText>
+      </Card>
+    )
+  }, {
+    name: 'Avatar Card Title',
+    component: (
+      <Card className={style.card}>
+        <CardTitle
+          avatar="https://placeimg.com/80/80/animals"
+          title="Avatar Card"
+          subtitle="An awesome basic card"
+        />
+        <CardMedia
+          aspectRatio="wide"
+          image="https://placeimg.com/800/450/nature"
+        />
+        <CardActions style={{ justifyContent: 'flex-end' }}>
+          <Button icon="feedback" />
+          <Button icon="favorite" />
+        </CardActions>
+      </Card>
+    )
   }
+];
 
-  render () {
-    const text = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.';
-    const actions = [
-      { label: 'Save', icon: 'add', className: 'flat accent', onClick: this.onActionClick.bind(this) },
-      { label: 'Close', className: 'flat', onClick: this.onActionClick.bind(this) }];
+class CardTest extends React.Component {
 
+  render () {
     return (
-      <section>
-        <h5>Cards</h5>
-        <Card title='Default Card' />
-        <Card title='Default Card loading' loading />
-        <Card type='wide' title='Wide card' />
-        <Card title='Default Card with text' text={text} />
-        <Card title='Default Card with actions' actions={actions} />
-        <Card title='Default Card with text and image' text={text} image='https://avatars2.githubusercontent.com/u/559654?v=3&s=460' />
-        <Card title='Default Card with text, image and color' text={text} color='#e91e63' image='https://avatars2.githubusercontent.com/u/559654?v=3&s=460' />
-        <Card title='Default Card with text, image and color' text={text} color='#00bcd4' image='https://avatars2.githubusercontent.com/u/1634922?v=3&s=460' />
-        <Card title='Default Card with text, color and onClick event' text={text} color='#e91e63' onClick={this.onClick} />
-        <Card type='wide' title='Wide Card loading with text, color and onClick event' text={text} color='#e91e63' onClick={this.onClick} loading />
-        <Card type='image' title='javivelasco.jpg' image='https://avatars2.githubusercontent.com/u/1634922?v=3&s=460' />
-        <Card type='event' title='Featured event: May 24, 2016 7-11pm' color='#00bcd4' />
-      </section>
+      <div>
+        <h2>Cards</h2>
+        <ul className={style.demoList}>
+          {demos.map((demo, i) => (
+            <li key={i} className={style.demoListItem}>
+              <div className={style.demo}>
+                {demo.component}
+              </div>
+              <div className={style.demoName}>
+                {demo.name}
+              </div>
+            </li>
+          ))}
+        </ul>
+      </div>
     );
   }
 }
diff --git a/spec/root.jsx b/spec/root.jsx
index e2b025e68..04dd63de0 100644
--- a/spec/root.jsx
+++ b/spec/root.jsx
@@ -42,26 +42,9 @@ const Root = () => (
       />
     </AppBarToolbox>
 
-    <Autocomplete />
-    <Button />
+
     <Card />
-    <Checkbox />
-    <Dialog />
-    <Drawer />
-    <Dropdown />
-    <IconMenu />
-    <Input />
-    <List />
-    <Menu />
-    <Pickers />
-    <Progress />
-    <Radio />
-    <Slider />
-    <Snackbar />
-    <Switch />
-    <Table />
-    <Tabs />
-    <Tooltip />
+
   </App>
 );
 
diff --git a/spec/style.scss b/spec/style.scss
index 72a927b24..f3210e914 100644
--- a/spec/style.scss
+++ b/spec/style.scss
@@ -1,19 +1,16 @@
-$import-normalize: false;
-$import-flex-attributes: true;
-
-@import "http://github.com/components/commons";
+@import "http://github.com/components/base";
 @import "http://github.com/components/app_bar/config";
 @import "http://github.com/components/button/config";
 
 $offset: 1.8 * $unit;
 
 .app {
-  padding: (8.2 * $unit) $offset $offset;
+  padding: (8.2 * $unit) $offset $offset $offset;
   background-color: #f5f5f5;
   > section {
     padding: $offset;
     margin-bottom: $offset;
-    background-color: #fff;
+    background-color: white;
     box-shadow: 0 1px 2px rgba(0,0,0, 0.25);
     > h5 {
       color: rgb(48, 63, 159);
@@ -51,3 +48,42 @@ $offset: 1.8 * $unit;
     }
   }
 }
+
+.logo {
+  // height: $unit;
+}
+
+.demoList {
+  margin: 20px 0;
+  padding: 20px 0;
+  list-style: none;
+  display: flex;
+  position: relative;
+  justify-content: center;
+  align-items: stretch;
+}
+
+.demoListItem {
+  margin: 0 30px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.demo {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.demoName {
+  display: block;
+  margin: 20px 0 0;
+  text-align: center;
+}
+
+.card {
+  width: 345px;
+}

From e1b04a206a5842c036803c8aa2014ad11bf8f15f Mon Sep 17 00:00:00 2001
From: Nathan Marks <nathan@poweredbysearch.com>
Date: Sat, 21 Nov 2015 14:17:18 -0500
Subject: [PATCH 0145/1024] Remove classnames decorator

---
 components/avatar/Avatar.jsx         |  3 +--
 components/card/Card.jsx             | 11 ++++------
 components/card/CardActions.jsx      |  9 +++-----
 components/card/CardMedia.jsx        |  9 ++++----
 components/card/CardText.jsx         |  9 +++-----
 components/card/CardTitle.jsx        | 11 ++++------
 components/decorators/ClassNames.jsx | 31 ----------------------------
 spec/components/card.jsx             |  1 +
 8 files changed, 20 insertions(+), 64 deletions(-)
 delete mode 100644 components/decorators/ClassNames.jsx

diff --git a/components/avatar/Avatar.jsx b/components/avatar/Avatar.jsx
index 503d60e7c..60fce0455 100644
--- a/components/avatar/Avatar.jsx
+++ b/components/avatar/Avatar.jsx
@@ -22,8 +22,7 @@ class Avatar extends Component {
       PropTypes.string,
       PropTypes.element
     ]),
-    primary: PropTypes.bool,
-    size: PropTypes.number.required
+    primary: PropTypes.bool
   }
 
   static defaultProps = {
diff --git a/components/card/Card.jsx b/components/card/Card.jsx
index 210f7382d..66ddc2c2a 100644
--- a/components/card/Card.jsx
+++ b/components/card/Card.jsx
@@ -1,14 +1,12 @@
 import React, { PropTypes, Component } from 'react';
-import ClassNames from '../decorators/ClassNames';
-import styles from './style';
+import ClassNames from 'classnames';
+import style from './style';
 
-@ClassNames(styles)
 class Card extends Component {
 
   static propTypes = {
     children: PropTypes.any,
     className: PropTypes.string,
-    classNames: PropTypes.func,
     raised: PropTypes.bool
   }
 
@@ -16,13 +14,12 @@ class Card extends Component {
     const {
       children,
       className,
-      classNames,
       raised,
       ...otherProps
     } = this.props;
 
-    const classes = classNames('card', {
-      'raised': raised
+    const classes = ClassNames(style.card, {
+      [style.raised]: raised
     }, className);
 
     return (
diff --git a/components/card/CardActions.jsx b/components/card/CardActions.jsx
index 605d40aaa..a71756c8a 100644
--- a/components/card/CardActions.jsx
+++ b/components/card/CardActions.jsx
@@ -1,25 +1,22 @@
 import React, { PropTypes, Component } from 'react';
-import ClassNames from '../decorators/ClassNames';
+import ClassNames from 'classnames';
 import style from './style';
 
-@ClassNames(style)
 class CardActions extends Component {
 
   static propTypes = {
     children: PropTypes.any,
-    className: PropTypes.string,
-    classNames: PropTypes.func
+    className: PropTypes.string
   }
 
   render () {
     const {
       children,
       className,
-      classNames,
       ...otherProps
     } = this.props;
 
-    const classes = classNames('cardActions', className);
+    const classes = ClassNames(style.cardActions, className);
 
     return (
       <div className={classes} {...otherProps}>
diff --git a/components/card/CardMedia.jsx b/components/card/CardMedia.jsx
index 64faca5d7..9b3748173 100644
--- a/components/card/CardMedia.jsx
+++ b/components/card/CardMedia.jsx
@@ -1,15 +1,13 @@
 import React, { PropTypes, Component } from 'react';
-import ClassNames from '../decorators/ClassNames';
+import ClassNames from 'classnames';
 import style from './style';
 
-@ClassNames(style)
 class CardMedia extends Component {
 
   static propTypes = {
     aspectRatio: PropTypes.oneOf([ 'wide', 'square' ]),
     children: PropTypes.node,
     className: PropTypes.string,
-    classNames: PropTypes.func,
     color: PropTypes.string,
     image: PropTypes.oneOfType([
       PropTypes.string,
@@ -22,13 +20,14 @@ class CardMedia extends Component {
       aspectRatio,
       children,
       className,
-      classNames,
       color,
       image,
       ...otherProps
     } = this.props;
 
-    const classes = classNames('cardMedia', aspectRatio, className);
+    const classes = ClassNames(style.cardMedia, {
+      [style[aspectRatio]]: aspectRatio
+    }, className);
 
     const bgStyle = {
       backgroundColor: color ? color : undefined,
diff --git a/components/card/CardText.jsx b/components/card/CardText.jsx
index e2014bca2..4fc38e01b 100644
--- a/components/card/CardText.jsx
+++ b/components/card/CardText.jsx
@@ -1,25 +1,22 @@
 import React, { PropTypes, Component } from 'react';
-import ClassNames from '../decorators/ClassNames';
+import ClassNames from 'classnames';
 import style from './style';
 
-@ClassNames(style)
 class CardText extends Component {
 
   static propTypes = {
     children: PropTypes.any,
-    className: PropTypes.string,
-    classNames: PropTypes.func
+    className: PropTypes.string
   }
 
   render () {
     const {
       children,
       className,
-      classNames,
       ...otherProps
     } = this.props;
 
-    const classes = classNames('cardText', className);
+    const classes = ClassNames(style.cardText, className);
 
     return (
       <div className={classes} {...otherProps}>
diff --git a/components/card/CardTitle.jsx b/components/card/CardTitle.jsx
index 56e8a64a6..5c1251e2c 100644
--- a/components/card/CardTitle.jsx
+++ b/components/card/CardTitle.jsx
@@ -1,9 +1,8 @@
 import React, { PropTypes, Component } from 'react';
-import ClassNames from '../decorators/ClassNames';
+import ClassNames from 'classnames';
 import { Avatar } from '../avatar';
 import style from './style';
 
-@ClassNames(style)
 class CardTitle extends Component {
 
   static propTypes = {
@@ -13,7 +12,6 @@ class CardTitle extends Component {
     ]),
     children: PropTypes.string,
     className: PropTypes.string,
-    classNames: PropTypes.func,
     subtitle: PropTypes.string,
     title: PropTypes.string
   }
@@ -25,15 +23,14 @@ class CardTitle extends Component {
       avatar,
       children,
       className,
-      classNames,
       subtitle,
       title,
       ...otherProps
     } = this.props;
 
-    const classes = classNames('cardTitle', {
-      'small': avatar,
-      'large': !avatar
+    const classes = ClassNames(style.cardTitle, {
+      [style.small]: avatar,
+      [style.large]: !avatar
     }, className);
 
     if (typeof avatar === 'string') {
diff --git a/components/decorators/ClassNames.jsx b/components/decorators/ClassNames.jsx
deleted file mode 100644
index cb0cb5855..000000000
--- a/components/decorators/ClassNames.jsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react';
-import ClassNames from 'classnames/bind';
-
-/**
- * Provides a component with a classNames
- * function bound to the provided CSS module
- *
- * Check for 'classNames()' in props
- *
- * @param  {CSS Module} styles
- * @return {Component}
- */
-function classNames (styles) {
-  const classNamesFn = ClassNames.bind(styles);
-
-  return function classNamesDecorator (ComposedComponent) {
-
-    return function ClassNamesDecor (props) {
-
-      return (
-        <ComposedComponent
-          classNames={classNamesFn}
-          {...props}
-        />
-      );
-    };
-  };
-}
-
-
-export default classNames;
diff --git a/spec/components/card.jsx b/spec/components/card.jsx
index 34bb9e939..3ee238592 100644
--- a/spec/components/card.jsx
+++ b/spec/components/card.jsx
@@ -44,6 +44,7 @@ const demos = [
     component: (
       <Card className={style.card}>
         <CardTitle
+          className="my-custom-class"
           avatar="https://placeimg.com/80/80/animals"
           title="Avatar Card"
           subtitle="An awesome basic card"

From 6d9f9aa8db6d431335bbd11dc31b0c2396fed994 Mon Sep 17 00:00:00 2001
From: Nathan Marks <nathan@poweredbysearch.com>
Date: Sat, 21 Nov 2015 20:43:18 -0500
Subject: [PATCH 0146/1024] Rebasing with master

---
 components/avatar/Avatar.jsx  | 12 ++---
 components/card/Card.jsx      | 53 +++++++++----------
 components/card/CardMedia.jsx |  8 ++-
 components/card/CardTitle.jsx | 98 ++++++++++++++++++-----------------
 components/card/_config.scss  |  2 +-
 components/card/style.scss    | 24 ++++++++-
 spec/components/card.jsx      | 35 ++++++++++++-
 spec/style.scss               |  7 ++-
 8 files changed, 149 insertions(+), 90 deletions(-)

diff --git a/components/avatar/Avatar.jsx b/components/avatar/Avatar.jsx
index 60fce0455..df7a0c491 100644
--- a/components/avatar/Avatar.jsx
+++ b/components/avatar/Avatar.jsx
@@ -1,9 +1,8 @@
 import React, { PropTypes, Component } from 'react';
-import ClassNames from '../decorators/ClassNames';
+import ClassNames from 'classnames';
 import FontIcon from '../font_icon'; // ewww! :P @TODO
 import style from './style';
 
-@ClassNames(style)
 class Avatar extends Component {
 
   static propTypes = {
@@ -13,7 +12,6 @@ class Avatar extends Component {
       PropTypes.node
     ]),
     className: PropTypes.string,
-    classNames: PropTypes.func,
     icon: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.element
@@ -34,7 +32,6 @@ class Avatar extends Component {
       accent,
       children,
       className,
-      classNames,
       icon,
       primary,
       image,
@@ -43,10 +40,9 @@ class Avatar extends Component {
 
     let component;
 
-    const classes = classNames('avatar', {
-      accent,
-      primary
-    }, className);
+    const classes = ClassNames(style.avatar, [
+      primary ? style.primary : accent ? style.accent : null
+    ], className);
 
     if (typeof image === 'string') {
       component = <img className={style.avatarImg} src={image} />;
diff --git a/components/card/Card.jsx b/components/card/Card.jsx
index 66ddc2c2a..2ee1bc6ab 100644
--- a/components/card/Card.jsx
+++ b/components/card/Card.jsx
@@ -1,36 +1,33 @@
-import React, { PropTypes, Component } from 'react';
+import React, { PropTypes } from 'react';
 import ClassNames from 'classnames';
 import style from './style';
 
-class Card extends Component {
+const Card = ({
+    children,
+    className,
+    raised,
+    ...otherProps
+  }) => {
 
-  static propTypes = {
-    children: PropTypes.any,
-    className: PropTypes.string,
-    raised: PropTypes.bool
-  }
+  const classes = ClassNames(style.card, {
+    [style.raised]: raised
+  }, className);
 
-  render () {
-    const {
-      children,
-      className,
-      raised,
-      ...otherProps
-    } = this.props;
+  return (
+    <div
+      data-react-toolbox="card"
+      className={classes}
+      {...otherProps}
+    >
+      {children}
+    </div>
+  );
+};
 
-    const classes = ClassNames(style.card, {
-      [style.raised]: raised
-    }, className);
-
-    return (
-      <div
-        data-react-toolbox="card"
-        className={classes}
-      >
-        {children}
-      </div>
-    );
-  }
-}
+Card.propTypes = {
+  children: PropTypes.any,
+  className: PropTypes.string,
+  raised: PropTypes.bool
+};
 
 export default Card;
diff --git a/components/card/CardMedia.jsx b/components/card/CardMedia.jsx
index 9b3748173..7bac762d6 100644
--- a/components/card/CardMedia.jsx
+++ b/components/card/CardMedia.jsx
@@ -9,6 +9,7 @@ class CardMedia extends Component {
     children: PropTypes.node,
     className: PropTypes.string,
     color: PropTypes.string,
+    contentOverlay: PropTypes.bool,
     image: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.node
@@ -21,6 +22,7 @@ class CardMedia extends Component {
       children,
       className,
       color,
+      contentOverlay,
       image,
       ...otherProps
     } = this.props;
@@ -29,6 +31,10 @@ class CardMedia extends Component {
       [style[aspectRatio]]: aspectRatio
     }, className);
 
+    const innerClasses = ClassNames(style.content, {
+      [style.contentOverlay]: contentOverlay
+    });
+
     const bgStyle = {
       backgroundColor: color ? color : undefined,
       backgroundImage: typeof image === 'string' ? `url('http://github.com/$%7Bimage%7D')` : undefined
@@ -36,7 +42,7 @@ class CardMedia extends Component {
 
     return (
       <div style={bgStyle} className={classes} {...otherProps}>
-        <div className={style.content}>
+        <div className={innerClasses}>
           {children}
         </div>
       </div>
diff --git a/components/card/CardTitle.jsx b/components/card/CardTitle.jsx
index 5c1251e2c..b76e19bc4 100644
--- a/components/card/CardTitle.jsx
+++ b/components/card/CardTitle.jsx
@@ -1,58 +1,60 @@
-import React, { PropTypes, Component } from 'react';
+import React, { PropTypes } from 'react';
 import ClassNames from 'classnames';
 import { Avatar } from '../avatar';
 import style from './style';
 
-class CardTitle extends Component {
-
-  static propTypes = {
-    avatar: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.element
-    ]),
-    children: PropTypes.string,
-    className: PropTypes.string,
-    subtitle: PropTypes.string,
-    title: PropTypes.string
+const CardTitle = (props) => {
+
+  const {
+    avatar,
+    children,
+    className,
+    subtitle,
+    title,
+    ...otherProps
+  } = props;
+
+  const classes = ClassNames(style.cardTitle, {
+    [style.small]: avatar,
+    [style.large]: !avatar
+  }, className);
+
+  let avatarComponent;
+
+  if (typeof avatar === 'string') {
+    avatarComponent = <Avatar image={avatar} />;
+  } else {
+    avatarComponent = avatar;
   }
 
-  render () {
-    let avatarComponent;
-
-    const {
-      avatar,
-      children,
-      className,
-      subtitle,
-      title,
-      ...otherProps
-    } = this.props;
-
-    const classes = ClassNames(style.cardTitle, {
-      [style.small]: avatar,
-      [style.large]: !avatar
-    }, className);
-
-    if (typeof avatar === 'string') {
-      avatarComponent = <Avatar image={avatar} />;
-    } else {
-      avatarComponent = avatar;
-    }
-
-    return (
-      <div className={classes} {...otherProps}>
-        {avatarComponent && (
-          <div className={style.avatar}>
-            {avatarComponent}
-          </div>
-        )}
-        <div>
-          {(title || children) && <h5 className={style.title}>{title ? title : children}</h5>}
-          {subtitle && <p className={style.subtitle}>{subtitle}</p>}
+  return (
+    <div className={classes} {...otherProps}>
+      {avatarComponent && (
+        <div className={style.avatar}>
+          {avatarComponent}
         </div>
+      )}
+      <div>
+        {(title || children) && (
+          <h5 className={style.title}>
+            {title ? title : children}
+          </h5>
+        )}
+        {subtitle && <p className={style.subtitle}>{subtitle}</p>}
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
+
+CardTitle.propTypes = {
+  avatar: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element
+  ]),
+  // children: PropTypes.string,
+  // className: PropTypes.string,
+  subtitle: PropTypes.string,
+  title: PropTypes.string
+};
 
 export default CardTitle;
diff --git a/components/card/_config.scss b/components/card/_config.scss
index 1f85e577e..7aa635d3c 100644
--- a/components/card/_config.scss
+++ b/components/card/_config.scss
@@ -1,5 +1,5 @@
 $card-color-white: unquote("rgb(#{$color-white})") !default;
-$card-text-overlay: unquote("rgba(#{$color-black}, 0.2)");
+$card-text-overlay: unquote("rgba(#{$color-black}, 0.3)");
 
 $card-background-color: $card-color-white;
 
diff --git a/components/card/style.scss b/components/card/style.scss
index c255ab47d..26554060f 100644
--- a/components/card/style.scss
+++ b/components/card/style.scss
@@ -49,9 +49,16 @@
     // Box Model
     display: flex;
     flex-direction: column;
+    justify-content: flex-end;
     width: 100%;
     height: 100%;
   }
+
+  .contentOverlay {
+    .cardTitle, .cardActions, .cardText {
+      background-color: $card-text-overlay;
+    }
+  }
 }
 
 .cardTitle {
@@ -87,6 +94,12 @@
       line-height: 1.4;
     }
   }
+
+  .cardMedia & {
+    .title, .subtitle {
+      color: $card-color-white;
+    }
+  }
 }
 
 .cardTitle, .cardText {
@@ -110,13 +123,20 @@
   button[data-react-toolbox="button"] {
     min-width: 0;
     margin: 0 $card-padding-sm/2;
+    padding: 0 $card-padding-sm;
 
     &:first-child {
-      margin-left: $card-padding-sm;
+      margin-left: 0;
     }
 
     &:last-child {
-      margin-right: $card-padding-sm;
+      margin-right: 0;
+    }
+  }
+
+  .cardMedia & {
+    button[data-react-toolbox="button"] {
+
     }
   }
 }
diff --git a/spec/components/card.jsx b/spec/components/card.jsx
index 3ee238592..7ec0146a8 100644
--- a/spec/components/card.jsx
+++ b/spec/components/card.jsx
@@ -24,6 +24,20 @@ const demos = [
         </CardActions>
       </Card>
     )
+  }, {
+    name: 'Card Media Area',
+    component: (
+      <Card className={style.card}>
+        <CardMedia
+          aspectRatio="wide"
+          className={style.primary}
+        >
+          <CardTitle>Basic Card</CardTitle>
+        </CardMedia>
+        <CardTitle subtitle="You can also use a subtitle like this" />
+        <CardText>{dummyText}</CardText>
+      </Card>
+    )
   }, {
     name: '16:9 Card Media',
     component: (
@@ -44,7 +58,6 @@ const demos = [
     component: (
       <Card className={style.card}>
         <CardTitle
-          className="my-custom-class"
           avatar="https://placeimg.com/80/80/animals"
           title="Avatar Card"
           subtitle="An awesome basic card"
@@ -59,6 +72,26 @@ const demos = [
         </CardActions>
       </Card>
     )
+  }, {
+    name: 'Square Media Card',
+    component: (
+      <Card className={style.card}>
+        <CardMedia
+          contentOverlay
+          aspectRatio="square"
+          image="https://placeimg.com/800/450/nature"
+        >
+          <CardTitle
+            title="Title goes here"
+            subtitle="Subtitle here"
+          />
+          <CardActions>
+            <Button label="Action 1" />
+            <Button label="Action 2" />
+          </CardActions>
+        </CardMedia>
+      </Card>
+    )
   }
 ];
 
diff --git a/spec/style.scss b/spec/style.scss
index f3210e914..efcd4b7fe 100644
--- a/spec/style.scss
+++ b/spec/style.scss
@@ -53,18 +53,23 @@ $offset: 1.8 * $unit;
   // height: $unit;
 }
 
+.primary {
+  background-color: unquote("rgb(#{$color-primary})");
+}
+
 .demoList {
   margin: 20px 0;
   padding: 20px 0;
   list-style: none;
   display: flex;
+  flex-wrap: wrap;
   position: relative;
   justify-content: center;
   align-items: stretch;
 }
 
 .demoListItem {
-  margin: 0 30px;
+  margin: 0 30px 100px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;

From 38e9dd314b629d86e3ceabf325cfcb73105c3423 Mon Sep 17 00:00:00 2001
From: Nathan Marks <nathan@poweredbysearch.com>
Date: Sun, 22 Nov 2015 01:01:49 -0500
Subject: [PATCH 0147/1024] Added additional examples in spec

---
 .eslintrc                     |   4 +-
 components/button/style.scss  |  37 +++++--
 components/card/Card.jsx      |   6 +-
 components/card/CardTitle.jsx |  15 +--
 components/card/_config.scss  |   4 +-
 components/card/style.scss    |  19 ++--
 spec/components/card.jsx      | 185 ++++++++++++++++++++++++++++------
 spec/style.scss               |  16 ++-
 8 files changed, 220 insertions(+), 66 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 5b38b7a81..62ff84a8a 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -58,9 +58,7 @@
     "max-params": [0, 3],
     "max-statements": [0, 10],
     "new-parens": [2],
-    "new-cap": [2, {
-      "capIsNewExceptions": ["CSSModules", "ToInteger", "ToObject", "ToPrimitive", "ToUint32"]
-    }],
+    "new-cap": [0],
     "newline-after-var": [0],
     "no-alert": [2],
     "no-array-constructor": [2],
diff --git a/components/button/style.scss b/components/button/style.scss
index 8368d3286..dde24b625 100644
--- a/components/button/style.scss
+++ b/components/button/style.scss
@@ -184,19 +184,38 @@
 }
 
 .neutral:not([disabled]) {
-  &.raised, &.floating {
-    color: $button-neutral-color-contrast;
-    background-color: $button-neutral-color;
+  &:not(.inverse) {
+    &.raised, &.floating {
+      color: $button-neutral-color-contrast;
+      background-color: $button-neutral-color;
+    }
+    &.flat, &.toggle {
+      color: $button-neutral-color-contrast;
+      &:hover {
+        background: $button-neutral-color-hover;
+      }
+      &:focus:not(:active) {
+        background: $button-neutral-color-hover;
+      }
+    }
   }
-  &.flat, &.toggle {
-    color: $button-neutral-color-contrast;
-    &:hover {
-      background: $button-neutral-color-hover;
+
+  &.inverse {
+    &.raised, &.floating {
+      color: $button-neutral-color;
+      background-color: $button-neutral-color-contrast;
     }
-    &:focus:not(:active) {
-      background: $button-neutral-color-hover;
+    &.flat, &.toggle {
+      color: $button-neutral-color;
+      &:hover {
+        background: $button-neutral-color-hover;
+      }
+      &:focus:not(:active) {
+        background: $button-neutral-color-hover;
+      }
     }
   }
+
 }
 
 .mini.floating {
diff --git a/components/card/Card.jsx b/components/card/Card.jsx
index 2ee1bc6ab..89c7d5fc4 100644
--- a/components/card/Card.jsx
+++ b/components/card/Card.jsx
@@ -14,11 +14,7 @@ const Card = ({
   }, className);
 
   return (
-    <div
-      data-react-toolbox="card"
-      className={classes}
-      {...otherProps}
-    >
+    <div className={classes} {...otherProps}>
       {children}
     </div>
   );
diff --git a/components/card/CardTitle.jsx b/components/card/CardTitle.jsx
index b76e19bc4..1fd4c9171 100644
--- a/components/card/CardTitle.jsx
+++ b/components/card/CardTitle.jsx
@@ -35,12 +35,12 @@ const CardTitle = (props) => {
         </div>
       )}
       <div>
-        {(title || children) && (
-          <h5 className={style.title}>
-            {title ? title : children}
-          </h5>
+        {title && <h5 className={style.title}>{title}</h5>}
+        {children && typeof children === 'string' && (
+          <h5 className={style.title}>{children}</h5>
         )}
         {subtitle && <p className={style.subtitle}>{subtitle}</p>}
+        {children && typeof children !== 'string' && children}
       </div>
     </div>
   );
@@ -51,8 +51,11 @@ CardTitle.propTypes = {
     PropTypes.string,
     PropTypes.element
   ]),
-  // children: PropTypes.string,
-  // className: PropTypes.string,
+  children: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element
+  ]),
+  className: PropTypes.string,
   subtitle: PropTypes.string,
   title: PropTypes.string
 };
diff --git a/components/card/_config.scss b/components/card/_config.scss
index 7aa635d3c..b301bf006 100644
--- a/components/card/_config.scss
+++ b/components/card/_config.scss
@@ -1,5 +1,5 @@
-$card-color-white: unquote("rgb(#{$color-white})") !default;
-$card-text-overlay: unquote("rgba(#{$color-black}, 0.3)");
+$card-color-white: $color-white !default;
+$card-text-overlay: rgba($color-black, 0.35) !default;
 
 $card-background-color: $card-color-white;
 
diff --git a/components/card/style.scss b/components/card/style.scss
index 26554060f..5a1e1f04d 100644
--- a/components/card/style.scss
+++ b/components/card/style.scss
@@ -7,6 +7,7 @@
   flex-direction: column;
   border-radius: 2px;
   overflow: hidden;
+  width: 100%;
 
   // Fonts
   font-size: $card-font-size;
@@ -30,13 +31,19 @@
   background-position: center center;
   height: 0;
 
-  &.wide {
+  &.wide, &.square {
     width: 100%;
+
+    .content > iframe, .content > video, .content > img {
+      max-width: 100%;
+    }
+  }
+
+  &.wide {
     padding-top: 56.25%;
   }
 
   &.square {
-    width: 100%;
     padding-top: 100%;
   }
 
@@ -52,6 +59,7 @@
     justify-content: flex-end;
     width: 100%;
     height: 100%;
+    overflow: hidden;
   }
 
   .contentOverlay {
@@ -120,7 +128,7 @@
   justify-content: flex-start;
   padding: $card-padding-sm $card-padding-sm;
 
-  button[data-react-toolbox="button"] {
+  button {
     min-width: 0;
     margin: 0 $card-padding-sm/2;
     padding: 0 $card-padding-sm;
@@ -134,9 +142,4 @@
     }
   }
 
-  .cardMedia & {
-    button[data-react-toolbox="button"] {
-
-    }
-  }
 }
diff --git a/spec/components/card.jsx b/spec/components/card.jsx
index 7ec0146a8..e620ab647 100644
--- a/spec/components/card.jsx
+++ b/spec/components/card.jsx
@@ -11,21 +11,65 @@ import style from '../style';
 
 const dummyText = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.';
 
-const demos = [
+const Spacer = () => {
+  return (
+    <div style={{
+      display: 'flex',
+      flex: '1 1 auto'
+    }}/>
+  );
+};
+
+const DemoList = (props) => <ul className={style.demoList}>{props.children}</ul>;
+
+const DemoListItem = (props) => (
+  <li className={style.demoListItem}>
+    <div className={style.demo}>
+      {props.component}
+    </div>
+    <div className={style.demoName}>
+      {props.name}
+    </div>
+  </li>
+);
+
+const basic = [
   {
     name: 'Basic Card',
     component: (
       <Card className={style.card}>
-        <CardTitle>Basic Card</CardTitle>
+        <CardTitle
+          title="Title goes here"
+          subtitle="Subtitle here"
+        />
         <CardText>{dummyText}</CardText>
         <CardActions>
-          <Button label="Action" />
-          <Button label="More" />
+          <Button label="Action 1" />
+          <Button label="Action 2" />
         </CardActions>
       </Card>
     )
   }, {
-    name: 'Card Media Area',
+    name: 'Raised Card',
+    component: (
+      <Card raised className={style.card}>
+        <CardTitle
+          title="Title goes here"
+          subtitle="Subtitle here"
+        />
+        <CardText>{dummyText}</CardText>
+        <CardActions>
+          <Button label="Action 1" />
+          <Button label="Action 2" />
+        </CardActions>
+      </Card>
+    )
+  }
+];
+
+const media = [
+  {
+    name: '16:9 Card Media Area',
     component: (
       <Card className={style.card}>
         <CardMedia
@@ -39,21 +83,45 @@ const demos = [
       </Card>
     )
   }, {
-    name: '16:9 Card Media',
+    name: '16:9 Card Media Image',
     component: (
       <Card className={style.card}>
         <CardMedia
           aspectRatio="wide"
           image="https://placeimg.com/800/450/nature"
         />
-        <CardTitle
-          title="Basic Card"
-          subtitle="An awesome basic card"
-        />
+          <CardTitle
+            title="Title goes here"
+            subtitle="Subtitle here"
+          />
         <CardText>{dummyText}</CardText>
       </Card>
     )
   }, {
+    name: 'Square Media Card',
+    component: (
+      <Card className={style.card}>
+        <CardMedia
+          contentOverlay
+          aspectRatio="square"
+          image="https://placeimg.com/700/700/nature"
+        >
+          <CardTitle
+            title="Title goes here"
+            subtitle="Subtitle here"
+          />
+          <CardActions>
+            <Button inverse label="Action 1" />
+            <Button inverse label="Action 2" />
+          </CardActions>
+        </CardMedia>
+      </Card>
+    )
+  }
+];
+
+const avatar = [
+  {
     name: 'Avatar Card Title',
     component: (
       <Card className={style.card}>
@@ -67,29 +135,72 @@ const demos = [
           image="https://placeimg.com/800/450/nature"
         />
         <CardActions style={{ justifyContent: 'flex-end' }}>
-          <Button icon="feedback" />
-          <Button icon="favorite" />
+          <Button toggle icon="share" />
+          <Button toggle icon="favorite" />
         </CardActions>
       </Card>
     )
   }, {
-    name: 'Square Media Card',
+    name: 'Video in a card',
     component: (
       <Card className={style.card}>
+        <CardTitle
+          avatar="https://placeimg.com/80/80/animals"
+          title="Avatar Card"
+          subtitle="An awesome basic card"
+        />
+        <CardMedia
+          aspectRatio="wide"
+        >
+          <iframe width="1280" height="720" src="https://www.youtube.com/embed/sGbxmsDFVnE?rel=0&amp;showinfo=0" frameBorder="0" allowFullScreen></iframe>
+        </CardMedia>
+        <CardActions style={{ justifyContent: 'flex-end' }}>
+          <Button toggle icon="report-problem" />
+          <Spacer/>
+          <Button toggle icon="share" />
+          <Button toggle icon="favorite" />
+        </CardActions>
+      </Card>
+    )
+  }
+];
+
+const small = [
+  {
+    name: 'Small Media Card',
+    component: (
+      <Card>
         <CardMedia
-          contentOverlay
           aspectRatio="square"
-          image="https://placeimg.com/800/450/nature"
+          image="https://placeimg.com/400/400/nature"
         >
+          <CardTitle>Test</CardTitle>
+        </CardMedia>
+        <CardActions style={{justifyContent: 'center'}}>
+          <Button toggle icon="thumb-down" />
+          <Button toggle icon="thumb-up" />
+          <Button toggle icon="turned-in-not" />
+        </CardActions>
+      </Card>
+    )
+  }, {
+    name: 'Alternative Layout Example',
+    component: (
+      <Card className={style.card}>
+        <div className={style.cardRow}>
           <CardTitle
             title="Title goes here"
             subtitle="Subtitle here"
           />
-          <CardActions>
-            <Button label="Action 1" />
-            <Button label="Action 2" />
-          </CardActions>
-        </CardMedia>
+          <CardMedia
+            className={style.media}
+            image="https://placeimg.com/400/400/nature"
+          />
+        </div>
+        <CardActions>
+          <Button label="Action 1" />
+          <Button label="Action 2" />
+        </CardActions>
       </Card>
     )
   }
@@ -101,18 +212,30 @@ class CardTest extends React.Component {
     return (
       <div>
         <h2>Cards</h2>
-        <ul className={style.demoList}>
-          {demos.map((demo, i) => (
-            <li key={i} className={style.demoListItem}>
-              <div className={style.demo}>
-                {demo.component}
-              </div>
-              <div className={style.demoName}>
-                {demo.name}
-              </div>
-            </li>
+
+        <DemoList>
+          {basic.map((demo, i) => (
+            <DemoListItem key={i} {...demo}/>
+          ))}
+        </DemoList>
+
+        <DemoList>
+          {media.map((demo, i) => (
+            <DemoListItem key={i} {...demo}/>
+          ))}
+        </DemoList>
+
+        <DemoList>
+          {avatar.map((demo, i) => (
+            <DemoListItem key={i} {...demo}/>
+          ))}
+        </DemoList>
+
+        <DemoList>
+          {small.map((demo, i) => (
+            <DemoListItem key={i} {...demo}/>
           ))}
-        </ul>
+        </DemoList>
       </div>
     );
   }
diff --git a/spec/style.scss b/spec/style.scss
index efcd4b7fe..0374f3235 100644
--- a/spec/style.scss
+++ b/spec/style.scss
@@ -1,4 +1,4 @@
-@import "http://github.com/components/base";
+@import "http://github.com/components/commons";
 @import "http://github.com/components/app_bar/config";
 @import "http://github.com/components/button/config";
 
@@ -54,7 +54,7 @@ $offset: 1.8 * $unit;
 }
 
 .primary {
-  background-color: unquote("rgb(#{$color-primary})");
+  background-color: $color-primary;
 }
 
 .demoList {
@@ -92,3 +92,15 @@ $offset: 1.8 * $unit;
 .card {
   width: 345px;
 }
+
+.cardRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+
+  .media {
+    width: 80px;
+    height: 80px;
+    margin: 16px 16px 0 0;
+  }
+}

From eea0c0e61e97aae51674581167b240b7d6fe5644 Mon Sep 17 00:00:00 2001
From: Nathan Marks <nathan@poweredbysearch.com>
Date: Sun, 22 Nov 2015 01:03:01 -0500
Subject: [PATCH 0148/1024] Removed old file

---
 components/card/old.jsx | 1 -
 1 file changed, 1 deletion(-)
 delete mode 100644 components/card/old.jsx

diff --git a/components/card/old.jsx b/components/card/old.jsx
deleted file mode 100644
index de126c790..000000000
--- a/components/card/old.jsx
+++ /dev/null
@@ -1 +0,0 @@
-export default from './Card.jsx';

From 0d1d023d5b86b9ebf212f65573727e8b5f09ffc5 Mon Sep 17 00:00:00 2001
From: Nathan Marks <nathan@poweredbysearch.com>
Date: Sun, 22 Nov 2015 01:23:58 -0500
Subject: [PATCH 0149/1024] Few more variations added

---
 spec/components/card.jsx | 75 +++++++++++++++++++++++++++++++---------
 spec/style.scss          |  6 ++++
 2 files changed, 65 insertions(+), 16 deletions(-)

diff --git a/spec/components/card.jsx b/spec/components/card.jsx
index e620ab647..567a71a4f 100644
--- a/spec/components/card.jsx
+++ b/spec/components/card.jsx
@@ -165,6 +165,46 @@ const avatar = [
   }
 ];
 
+const horizontal = [
+  {
+    name: 'Alternative Layout Example',
+    component: (
+      <Card className={style.card}>
+        <div className={style.cardRow}>
+          <CardTitle
+            title="Title goes here"
+            subtitle="Subtitle here"
+          />
+          <CardMedia
+            className={style.media}
+            image="https://placeimg.com/400/400/nature"
+          />
+        </div>
+        <CardActions>
+          <Button label="Action 1" />
+          <Button label="Action 2" />
+        </CardActions>
+      </Card>
+    )
+  }, {
+    name: 'Another Variation',
+    component: (
+      <Card>
+        <div className={style.cardRow}>
+          <CardTitle
+            title="Title goes here"
+            subtitle="Subtitle here"
+          />
+          <CardMedia
+            className={style.mediaLarge}
+            image="https://placeimg.com/400/400/nature"
+          />
+        </div>
+      </Card>
+    )
+  }
+];
+
 const small = [
   {
     name: 'Small Media Card',
@@ -184,23 +224,20 @@ const small = [
       </Card>
     )
   }, {
-    name: 'Alternative Layout Example',
+    name: 'Small Media Controls',
     component: (
-      <Card className={style.card}>
-        <div className={style.cardRow}>
-          <CardTitle
-            title="Title goes here"
-            subtitle="Subtitle here"
-          />
-          <CardMedia
-            className={style.media}
-            image="https://placeimg.com/400/400/nature"
-          />
-        </div>
-        <CardActions>
-          <Button label="Action 1" />
-          <Button label="Action 2" />
-        </CardActions>
+      <Card style={{width: '140px'}}>
+        <CardMedia
+          contentOverlay
+          aspectRatio="square"
+          image="https://placeimg.com/280/280/people"
+        >
+          <CardActions style={{justifyContent: 'center'}}>
+            <Button inverse toggle icon="fast-rewind" />
+            <Button inverse toggle icon="play-arrow" />
+            <Button inverse toggle icon="fast-forward" />
+          </CardActions>
+        </CardMedia>
       </Card>
     )
   }
@@ -231,6 +268,12 @@ class CardTest extends React.Component {
           ))}
         </DemoList>
 
+        <DemoList>
+          {horizontal.map((demo, i) => (
+            <DemoListItem key={i} {...demo}/>
+          ))}
+        </DemoList>
+
         <DemoList>
           {small.map((demo, i) => (
             <DemoListItem key={i} {...demo}/>
diff --git a/spec/style.scss b/spec/style.scss
index 0374f3235..ca036ce4e 100644
--- a/spec/style.scss
+++ b/spec/style.scss
@@ -103,4 +103,10 @@ $offset: 1.8 * $unit;
     height: 80px;
     margin: 16px 16px 0 0;
   }
+
+  .mediaLarge {
+    width: 140px;
+    height: 140px;
+    margin: 16px;
+  }
 }

From c65ab37b576760f02aeee3922adfeb0a8abe706e Mon Sep 17 00:00:00 2001
From: Nathan Marks <nathan@poweredbysearch.com>
Date: Sun, 22 Nov 2015 17:33:44 -0500
Subject: [PATCH 0150/1024] Rebased branch on deep-restructure

---
 components/button/Button.jsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/components/button/Button.jsx b/components/button/Button.jsx
index 286710c90..48a922563 100644
--- a/components/button/Button.jsx
+++ b/components/button/Button.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import ClassNames from 'classnames';
 import FontIcon from '../font_icon';
 import Ripple from '../ripple';
 import Tooltip from '../tooltip';
@@ -8,13 +9,12 @@ import events from '../utils/events';
 class Button extends React.Component {
   static propTypes = {
     accent: React.PropTypes.bool,
-    children: React.PropTypes.node,
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
     flat: React.PropTypes.bool,
     floating: React.PropTypes.bool,
-    href: React.PropTypes.string,
     icon: React.PropTypes.string,
+    inverse: React.PropTypes.bool,
     label: React.PropTypes.string,
     loading: React.PropTypes.bool,
     mini: React.PropTypes.bool,
@@ -53,21 +53,22 @@ class Button extends React.Component {
   };
 
   render () {
-    const {accent, flat, floating, href, icon, label,
+    const {accent, className, flat, floating, href, icon, inverse, label,
            loading, mini, primary, raised, ripple, toggle,
            tooltip, tooltipDelay, ...others} = this.props;  //eslint-disable-line no-redeclare
     const element = href ? 'a' : 'button';
     const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
     const shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : toggle ? 'toggle' : 'flat';
-    let className = `${style[shape]} ${style[level]}`;
 
-    if (this.props.className) className += ` ${this.props.className}`;
-    if (mini) className += ` ${style.mini}`;
+    const classes = ClassNames([ style[shape], style[level] ], {
+      [style.mini]: mini,
+      [style.inverse]: inverse
+    }, className);
 
     const props = {
       ...others,
       href,
-      className,
+      className: classes,
       disabled: this.props.disabled || this.props.loading,
       onMouseDown: this.handleMouseDown,
       onTouchStart: this.handleTouchStart

From c9e3663f569c4db7fde57f124468e006286a1c4e Mon Sep 17 00:00:00 2001
From: Nathan Marks <nathan@poweredbysearch.com>
Date: Sun, 22 Nov 2015 09:43:30 -0500
Subject: [PATCH 0151/1024] Removed font icon style dependency, fixes #151

---
 components/font_icon/readme.md  |    7 +-
 components/font_icon/style.scss | 6379 -------------------------------
 2 files changed, 4 insertions(+), 6382 deletions(-)
 delete mode 100644 components/font_icon/style.scss

diff --git a/components/font_icon/readme.md b/components/font_icon/readme.md
index b5266e2ef..73bce67d3 100644
--- a/components/font_icon/readme.md
+++ b/components/font_icon/readme.md
@@ -1,6 +1,6 @@
 # Font Icon
 
-The font icon component is used to represent an icon from the [Google Material Design](https://www.google.com/design/icons/) icon font. React Toolbox automatically includes the font for you so you just need to specify the name of the icon. Every name corresponds with the original one but separated with dashes. The font icon is displayed with the current color so it can be inherited from the parent component.
+The font icon component is used to represent an icon from the [Google Material Design](https://www.google.com/design/icons/) icon font. React Toolbox automatically includes the font for you so you just need to specify the name of the icon. The font icon is displayed with the current color so it can be inherited from the parent component.
 
 <!-- example -->
 ```jsx
@@ -9,8 +9,8 @@ import FontIcon from 'react-toolbox/lib/font_icon';
 const FontIcons = () => (
   <span>
     <FontIcon value='add' />
-    <FontIcon value='add-circle-outline' />
-    <FontIcon value='star' />
+    <FontIcon value='add_circle_outline' />
+    <FontIcon>star</FontIcon>
   </span>
 );
 ```
@@ -19,5 +19,6 @@ const FontIcons = () => (
 
 | Name              | Type          | Default         | Description|
 |:-----|:-----|:-----|:-----|
+| `children`     | `String`        |                 | The key string for the icon you want to be displayed.|
 | `className`     | `String`        |                 | The class name to give custom styles such as sizing.|
 | `value`         | `String`        |                 | The key string for the icon you want be displayed.|
diff --git a/components/font_icon/style.scss b/components/font_icon/style.scss
deleted file mode 100644
index a6d4d1f28..000000000
--- a/components/font_icon/style.scss
+++ /dev/null
@@ -1,6379 +0,0 @@
-@import "http://github.com/base";
-@import url(http://github.com/$font-icon-url);
-
-%icon {
-  display: inline-block;
-  font-family: "Material Icons";
-  font-size: inherit;
-  font-style: normal;
-  font-weight: normal;
-  line-height: 1;
-  text-transform: none;
-  letter-spacing: normal;
-  word-wrap: normal;
-  transform: translate(0, 0);
-  text-rendering: auto;
-  font-feature-settings: "liga";
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.threed-rotation {
-  @extend %icon;
-
-  &::before {
-    content: "\e84d";
-  }
-}
-
-.access-alarm {
-  @extend %icon;
-
-  &::before {
-    content: "\e190";
-  }
-}
-
-.access-alarms {
-  @extend %icon;
-
-  &::before {
-    content: "\e191";
-  }
-}
-
-.access-time {
-  @extend %icon;
-
-  &::before {
-    content: "\e192";
-  }
-}
-
-.accessibility {
-  @extend %icon;
-
-  &::before {
-    content: "\e84e";
-  }
-}
-
-.account-balance {
-  @extend %icon;
-
-  &::before {
-    content: "\e84f";
-  }
-}
-
-.account-balance-wallet {
-  @extend %icon;
-
-  &::before {
-    content: "\e850";
-  }
-}
-
-.account-box {
-  @extend %icon;
-
-  &::before {
-    content: "\e851";
-  }
-}
-
-.account-circle {
-  @extend %icon;
-
-  &::before {
-    content: "\e853";
-  }
-}
-
-.adb {
-  @extend %icon;
-
-  &::before {
-    content: "\e60e";
-  }
-}
-
-.add {
-  @extend %icon;
-
-  &::before {
-    content: "\e145";
-  }
-}
-
-.add-alarm {
-  @extend %icon;
-
-  &::before {
-    content: "\e193";
-  }
-}
-
-.add-alert {
-  @extend %icon;
-
-  &::before {
-    content: "\e003";
-  }
-}
-
-.add-box {
-  @extend %icon;
-
-  &::before {
-    content: "\e146";
-  }
-}
-
-.add-circle {
-  @extend %icon;
-
-  &::before {
-    content: "\e147";
-  }
-}
-
-.add-circle-outline {
-  @extend %icon;
-
-  &::before {
-    content: "\e148";
-  }
-}
-
-.add-shopping-cart {
-  @extend %icon;
-
-  &::before {
-    content: "\e854";
-  }
-}
-
-.add-to-photos {
-  @extend %icon;
-
-  &::before {
-    content: "\e39d";
-  }
-}
-
-.adjust {
-  @extend %icon;
-
-  &::before {
-    content: "\e39e";
-  }
-}
-
-.airline-seat-flat {
-  @extend %icon;
-
-  &::before {
-    content: "\e630";
-  }
-}
-
-.airline-seat-flat-angled {
-  @extend %icon;
-
-  &::before {
-    content: "\e631";
-  }
-}
-
-.airline-seat-individual-suite {
-  @extend %icon;
-
-  &::before {
-    content: "\e632";
-  }
-}
-
-.airline-seat-legroom-extra {
-  @extend %icon;
-
-  &::before {
-    content: "\e633";
-  }
-}
-
-.airline-seat-legroom-normal {
-  @extend %icon;
-
-  &::before {
-    content: "\e634";
-  }
-}
-
-.airline-seat-legroom-reduced {
-  @extend %icon;
-
-  &::before {
-    content: "\e635";
-  }
-}
-
-.airline-seat-recline-extra {
-  @extend %icon;
-
-  &::before {
-    content: "\e636";
-  }
-}
-
-.airline-seat-recline-normal {
-  @extend %icon;
-
-  &::before {
-    content: "\e637";
-  }
-}
-
-.airplanemode-active {
-  @extend %icon;
-
-  &::before {
-    content: "\e195";
-  }
-}
-
-.airplanemode-inactive {
-  @extend %icon;
-
-  &::before {
-    content: "\e194";
-  }
-}
-
-.airplay {
-  @extend %icon;
-
-  &::before {
-    content: "\e055";
-  }
-}
-
-.alarm {
-  @extend %icon;
-
-  &::before {
-    content: "\e855";
-  }
-}
-
-.alarm-add {
-  @extend %icon;
-
-  &::before {
-    content: "\e856";
-  }
-}
-
-.alarm-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e857";
-  }
-}
-
-.alarm-on {
-  @extend %icon;
-
-  &::before {
-    content: "\e858";
-  }
-}
-
-.album {
-  @extend %icon;
-
-  &::before {
-    content: "\e019";
-  }
-}
-
-.android {
-  @extend %icon;
-
-  &::before {
-    content: "\e859";
-  }
-}
-
-.announcement {
-  @extend %icon;
-
-  &::before {
-    content: "\e85a";
-  }
-}
-
-.apps {
-  @extend %icon;
-
-  &::before {
-    content: "\e5c3";
-  }
-}
-
-.archive {
-  @extend %icon;
-
-  &::before {
-    content: "\e149";
-  }
-}
-
-.arrow-back {
-  @extend %icon;
-
-  &::before {
-    content: "\e5c4";
-  }
-}
-
-.arrow-drop-down {
-  @extend %icon;
-
-  &::before {
-    content: "\e5c5";
-  }
-}
-
-.arrow-drop-down-circle {
-  @extend %icon;
-
-  &::before {
-    content: "\e5c6";
-  }
-}
-
-.arrow-drop-up {
-  @extend %icon;
-
-  &::before {
-    content: "\e5c7";
-  }
-}
-
-.arrow-forward {
-  @extend %icon;
-
-  &::before {
-    content: "\e5c8";
-  }
-}
-
-.aspect-ratio {
-  @extend %icon;
-
-  &::before {
-    content: "\e85b";
-  }
-}
-
-.assessment {
-  @extend %icon;
-
-  &::before {
-    content: "\e85c";
-  }
-}
-
-.assignment {
-  @extend %icon;
-
-  &::before {
-    content: "\e85d";
-  }
-}
-
-.assignment-ind {
-  @extend %icon;
-
-  &::before {
-    content: "\e85e";
-  }
-}
-
-.assignment-late {
-  @extend %icon;
-
-  &::before {
-    content: "\e85f";
-  }
-}
-
-.assignment-return {
-  @extend %icon;
-
-  &::before {
-    content: "\e860";
-  }
-}
-
-.assignment-returned {
-  @extend %icon;
-
-  &::before {
-    content: "\e861";
-  }
-}
-
-.assignment-turned-in {
-  @extend %icon;
-
-  &::before {
-    content: "\e862";
-  }
-}
-
-.assistant {
-  @extend %icon;
-
-  &::before {
-    content: "\e39f";
-  }
-}
-
-.assistant-photo {
-  @extend %icon;
-
-  &::before {
-    content: "\e3a0";
-  }
-}
-
-.attach-file {
-  @extend %icon;
-
-  &::before {
-    content: "\e226";
-  }
-}
-
-.attach-money {
-  @extend %icon;
-
-  &::before {
-    content: "\e227";
-  }
-}
-
-.attachment {
-  @extend %icon;
-
-  &::before {
-    content: "\e2bc";
-  }
-}
-
-.audiotrack {
-  @extend %icon;
-
-  &::before {
-    content: "\e3a1";
-  }
-}
-
-.autorenew {
-  @extend %icon;
-
-  &::before {
-    content: "\e863";
-  }
-}
-
-.av-timer {
-  @extend %icon;
-
-  &::before {
-    content: "\e01b";
-  }
-}
-
-.backspace {
-  @extend %icon;
-
-  &::before {
-    content: "\e14a";
-  }
-}
-
-.backup {
-  @extend %icon;
-
-  &::before {
-    content: "\e864";
-  }
-}
-
-.battery-alert {
-  @extend %icon;
-
-  &::before {
-    content: "\e19c";
-  }
-}
-
-.battery-charging-full {
-  @extend %icon;
-
-  &::before {
-    content: "\e1a3";
-  }
-}
-
-.battery-full {
-  @extend %icon;
-
-  &::before {
-    content: "\e1a4";
-  }
-}
-
-.battery-std {
-  @extend %icon;
-
-  &::before {
-    content: "\e1a5";
-  }
-}
-
-.battery-unknown {
-  @extend %icon;
-
-  &::before {
-    content: "\e1a6";
-  }
-}
-
-.beenhere {
-  @extend %icon;
-
-  &::before {
-    content: "\e52d";
-  }
-}
-
-.block {
-  @extend %icon;
-
-  &::before {
-    content: "\e14b";
-  }
-}
-
-.bluetooth {
-  @extend %icon;
-
-  &::before {
-    content: "\e1a7";
-  }
-}
-
-.bluetooth-audio {
-  @extend %icon;
-
-  &::before {
-    content: "\e60f";
-  }
-}
-
-.bluetooth-connected {
-  @extend %icon;
-
-  &::before {
-    content: "\e1a8";
-  }
-}
-
-.bluetooth-disabled {
-  @extend %icon;
-
-  &::before {
-    content: "\e1a9";
-  }
-}
-
-.bluetooth-searching {
-  @extend %icon;
-
-  &::before {
-    content: "\e1aa";
-  }
-}
-
-.blur-circular {
-  @extend %icon;
-
-  &::before {
-    content: "\e3a2";
-  }
-}
-
-.blur-linear {
-  @extend %icon;
-
-  &::before {
-    content: "\e3a3";
-  }
-}
-
-.blur-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e3a4";
-  }
-}
-
-.blur-on {
-  @extend %icon;
-
-  &::before {
-    content: "\e3a5";
-  }
-}
-
-.book {
-  @extend %icon;
-
-  &::before {
-    content: "\e865";
-  }
-}
-
-.bookmark {
-  @extend %icon;
-
-  &::before {
-    content: "\e866";
-  }
-}
-
-.bookmark-border {
-  @extend %icon;
-
-  &::before {
-    content: "\e867";
-  }
-}
-
-.border-all {
-  @extend %icon;
-
-  &::before {
-    content: "\e228";
-  }
-}
-
-.border-bottom {
-  @extend %icon;
-
-  &::before {
-    content: "\e229";
-  }
-}
-
-.border-clear {
-  @extend %icon;
-
-  &::before {
-    content: "\e22a";
-  }
-}
-
-.border-color {
-  @extend %icon;
-
-  &::before {
-    content: "\e22b";
-  }
-}
-
-.border-horizontal {
-  @extend %icon;
-
-  &::before {
-    content: "\e22c";
-  }
-}
-
-.border-inner {
-  @extend %icon;
-
-  &::before {
-    content: "\e22d";
-  }
-}
-
-.border-left {
-  @extend %icon;
-
-  &::before {
-    content: "\e22e";
-  }
-}
-
-.border-outer {
-  @extend %icon;
-
-  &::before {
-    content: "\e22f";
-  }
-}
-
-.border-right {
-  @extend %icon;
-
-  &::before {
-    content: "\e230";
-  }
-}
-
-.border-style {
-  @extend %icon;
-
-  &::before {
-    content: "\e231";
-  }
-}
-
-.border-top {
-  @extend %icon;
-
-  &::before {
-    content: "\e232";
-  }
-}
-
-.border-vertical {
-  @extend %icon;
-
-  &::before {
-    content: "\e233";
-  }
-}
-
-.brightness-1 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3a6";
-  }
-}
-
-.brightness-2 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3a7";
-  }
-}
-
-.brightness-3 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3a8";
-  }
-}
-
-.brightness-4 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3a9";
-  }
-}
-
-.brightness-5 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3aa";
-  }
-}
-
-.brightness-6 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3ab";
-  }
-}
-
-.brightness-7 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3ac";
-  }
-}
-
-.brightness-auto {
-  @extend %icon;
-
-  &::before {
-    content: "\e1ab";
-  }
-}
-
-.brightness-high {
-  @extend %icon;
-
-  &::before {
-    content: "\e1ac";
-  }
-}
-
-.brightness-low {
-  @extend %icon;
-
-  &::before {
-    content: "\e1ad";
-  }
-}
-
-.brightness-medium {
-  @extend %icon;
-
-  &::before {
-    content: "\e1ae";
-  }
-}
-
-.broken-image {
-  @extend %icon;
-
-  &::before {
-    content: "\e3ad";
-  }
-}
-
-.brush {
-  @extend %icon;
-
-  &::before {
-    content: "\e3ae";
-  }
-}
-
-.bug-report {
-  @extend %icon;
-
-  &::before {
-    content: "\e868";
-  }
-}
-
-.build {
-  @extend %icon;
-
-  &::before {
-    content: "\e869";
-  }
-}
-
-.business {
-  @extend %icon;
-
-  &::before {
-    content: "\e0af";
-  }
-}
-
-.cached {
-  @extend %icon;
-
-  &::before {
-    content: "\e86a";
-  }
-}
-
-.cake {
-  @extend %icon;
-
-  &::before {
-    content: "\e7e9";
-  }
-}
-
-.call {
-  @extend %icon;
-
-  &::before {
-    content: "\e0b0";
-  }
-}
-
-.call-end {
-  @extend %icon;
-
-  &::before {
-    content: "\e0b1";
-  }
-}
-
-.call-made {
-  @extend %icon;
-
-  &::before {
-    content: "\e0b2";
-  }
-}
-
-.call-merge {
-  @extend %icon;
-
-  &::before {
-    content: "\e0b3";
-  }
-}
-
-.call-missed {
-  @extend %icon;
-
-  &::before {
-    content: "\e0b4";
-  }
-}
-
-.call-received {
-  @extend %icon;
-
-  &::before {
-    content: "\e0b5";
-  }
-}
-
-.call-split {
-  @extend %icon;
-
-  &::before {
-    content: "\e0b6";
-  }
-}
-
-.camera {
-  @extend %icon;
-
-  &::before {
-    content: "\e3af";
-  }
-}
-
-.camera-alt {
-  @extend %icon;
-
-  &::before {
-    content: "\e3b0";
-  }
-}
-
-.camera-enhance {
-  @extend %icon;
-
-  &::before {
-    content: "\e8fc";
-  }
-}
-
-.camera-front {
-  @extend %icon;
-
-  &::before {
-    content: "\e3b1";
-  }
-}
-
-.camera-rear {
-  @extend %icon;
-
-  &::before {
-    content: "\e3b2";
-  }
-}
-
-.camera-roll {
-  @extend %icon;
-
-  &::before {
-    content: "\e3b3";
-  }
-}
-
-.cancel {
-  @extend %icon;
-
-  &::before {
-    content: "\e5c9";
-  }
-}
-
-.card-giftcard {
-  @extend %icon;
-
-  &::before {
-    content: "\e8f6";
-  }
-}
-
-.card-membership {
-  @extend %icon;
-
-  &::before {
-    content: "\e8f7";
-  }
-}
-
-.card-travel {
-  @extend %icon;
-
-  &::before {
-    content: "\e8f8";
-  }
-}
-
-.cast {
-  @extend %icon;
-
-  &::before {
-    content: "\e307";
-  }
-}
-
-.cast-connected {
-  @extend %icon;
-
-  &::before {
-    content: "\e308";
-  }
-}
-
-.center-focus-strong {
-  @extend %icon;
-
-  &::before {
-    content: "\e3b4";
-  }
-}
-
-.center-focus-weak {
-  @extend %icon;
-
-  &::before {
-    content: "\e3b5";
-  }
-}
-
-.change-history {
-  @extend %icon;
-
-  &::before {
-    content: "\e86b";
-  }
-}
-
-.chat {
-  @extend %icon;
-
-  &::before {
-    content: "\e0b7";
-  }
-}
-
-.chat-bubble {
-  @extend %icon;
-
-  &::before {
-    content: "\e0ca";
-  }
-}
-
-.chat-bubble-outline {
-  @extend %icon;
-
-  &::before {
-    content: "\e0cb";
-  }
-}
-
-.check {
-  @extend %icon;
-
-  &::before {
-    content: "\e5ca";
-  }
-}
-
-.check-box {
-  @extend %icon;
-
-  &::before {
-    content: "\e834";
-  }
-}
-
-.check-box-outline-blank {
-  @extend %icon;
-
-  &::before {
-    content: "\e835";
-  }
-}
-
-.check-circle {
-  @extend %icon;
-
-  &::before {
-    content: "\e86c";
-  }
-}
-
-.chevron-left {
-  @extend %icon;
-
-  &::before {
-    content: "\e5cb";
-  }
-}
-
-.chevron-right {
-  @extend %icon;
-
-  &::before {
-    content: "\e5cc";
-  }
-}
-
-.chrome-reader-mode {
-  @extend %icon;
-
-  &::before {
-    content: "\e86d";
-  }
-}
-
-.class {
-  @extend %icon;
-
-  &::before {
-    content: "\e86e";
-  }
-}
-
-.clear {
-  @extend %icon;
-
-  &::before {
-    content: "\e14c";
-  }
-}
-
-.clear-all {
-  @extend %icon;
-
-  &::before {
-    content: "\e0b8";
-  }
-}
-
-.close {
-  @extend %icon;
-
-  &::before {
-    content: "\e5cd";
-  }
-}
-
-.closed-caption {
-  @extend %icon;
-
-  &::before {
-    content: "\e01c";
-  }
-}
-
-.cloud {
-  @extend %icon;
-
-  &::before {
-    content: "\e2bd";
-  }
-}
-
-.cloud-circle {
-  @extend %icon;
-
-  &::before {
-    content: "\e2be";
-  }
-}
-
-.cloud-done {
-  @extend %icon;
-
-  &::before {
-    content: "\e2bf";
-  }
-}
-
-.cloud-download {
-  @extend %icon;
-
-  &::before {
-    content: "\e2c0";
-  }
-}
-
-.cloud-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e2c1";
-  }
-}
-
-.cloud-queue {
-  @extend %icon;
-
-  &::before {
-    content: "\e2c2";
-  }
-}
-
-.cloud-upload {
-  @extend %icon;
-
-  &::before {
-    content: "\e2c3";
-  }
-}
-
-.code {
-  @extend %icon;
-
-  &::before {
-    content: "\e86f";
-  }
-}
-
-.collections {
-  @extend %icon;
-
-  &::before {
-    content: "\e3b6";
-  }
-}
-
-.collections-bookmark {
-  @extend %icon;
-
-  &::before {
-    content: "\e431";
-  }
-}
-
-.color-lens {
-  @extend %icon;
-
-  &::before {
-    content: "\e3b7";
-  }
-}
-
-.colorize {
-  @extend %icon;
-
-  &::before {
-    content: "\e3b8";
-  }
-}
-
-.comment {
-  @extend %icon;
-
-  &::before {
-    content: "\e0b9";
-  }
-}
-
-.compare {
-  @extend %icon;
-
-  &::before {
-    content: "\e3b9";
-  }
-}
-
-.computer {
-  @extend %icon;
-
-  &::before {
-    content: "\e30a";
-  }
-}
-
-.confirmation-number {
-  @extend %icon;
-
-  &::before {
-    content: "\e638";
-  }
-}
-
-.contact-phone {
-  @extend %icon;
-
-  &::before {
-    content: "\e0cf";
-  }
-}
-
-.contacts {
-  @extend %icon;
-
-  &::before {
-    content: "\e0ba";
-  }
-}
-
-.content-copy {
-  @extend %icon;
-
-  &::before {
-    content: "\e14d";
-  }
-}
-
-.content-cut {
-  @extend %icon;
-
-  &::before {
-    content: "\e14e";
-  }
-}
-
-.content-paste {
-  @extend %icon;
-
-  &::before {
-    content: "\e14f";
-  }
-}
-
-.control-point {
-  @extend %icon;
-
-  &::before {
-    content: "\e3ba";
-  }
-}
-
-.control-point-duplicate {
-  @extend %icon;
-
-  &::before {
-    content: "\e3bb";
-  }
-}
-
-.create {
-  @extend %icon;
-
-  &::before {
-    content: "\e150";
-  }
-}
-
-.credit-card {
-  @extend %icon;
-
-  &::before {
-    content: "\e870";
-  }
-}
-
-.crop {
-  @extend %icon;
-
-  &::before {
-    content: "\e3be";
-  }
-}
-
-.crop-16-9 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3bc";
-  }
-}
-
-.crop-3-2 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3bd";
-  }
-}
-
-.crop-5-4 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3bf";
-  }
-}
-
-.crop-7-5 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3c0";
-  }
-}
-
-.crop-din {
-  @extend %icon;
-
-  &::before {
-    content: "\e3c1";
-  }
-}
-
-.crop-free {
-  @extend %icon;
-
-  &::before {
-    content: "\e3c2";
-  }
-}
-
-.crop-landscape {
-  @extend %icon;
-
-  &::before {
-    content: "\e3c3";
-  }
-}
-
-.crop-original {
-  @extend %icon;
-
-  &::before {
-    content: "\e3c4";
-  }
-}
-
-.crop-portrait {
-  @extend %icon;
-
-  &::before {
-    content: "\e3c5";
-  }
-}
-
-.crop-square {
-  @extend %icon;
-
-  &::before {
-    content: "\e3c6";
-  }
-}
-
-.dashboard {
-  @extend %icon;
-
-  &::before {
-    content: "\e871";
-  }
-}
-
-.data-usage {
-  @extend %icon;
-
-  &::before {
-    content: "\e1af";
-  }
-}
-
-.dehaze {
-  @extend %icon;
-
-  &::before {
-    content: "\e3c7";
-  }
-}
-
-.delete {
-  @extend %icon;
-
-  &::before {
-    content: "\e872";
-  }
-}
-
-.description {
-  @extend %icon;
-
-  &::before {
-    content: "\e873";
-  }
-}
-
-.desktop-mac {
-  @extend %icon;
-
-  &::before {
-    content: "\e30b";
-  }
-}
-
-.desktop-windows {
-  @extend %icon;
-
-  &::before {
-    content: "\e30c";
-  }
-}
-
-.details {
-  @extend %icon;
-
-  &::before {
-    content: "\e3c8";
-  }
-}
-
-.developer-board {
-  @extend %icon;
-
-  &::before {
-    content: "\e30d";
-  }
-}
-
-.developer-mode {
-  @extend %icon;
-
-  &::before {
-    content: "\e1b0";
-  }
-}
-
-.device-hub {
-  @extend %icon;
-
-  &::before {
-    content: "\e335";
-  }
-}
-
-.devices {
-  @extend %icon;
-
-  &::before {
-    content: "\e1b1";
-  }
-}
-
-.dialer-sip {
-  @extend %icon;
-
-  &::before {
-    content: "\e0bb";
-  }
-}
-
-.dialpad {
-  @extend %icon;
-
-  &::before {
-    content: "\e0bc";
-  }
-}
-
-.directions {
-  @extend %icon;
-
-  &::before {
-    content: "\e52e";
-  }
-}
-
-.directions-bike {
-  @extend %icon;
-
-  &::before {
-    content: "\e52f";
-  }
-}
-
-.directions-boat {
-  @extend %icon;
-
-  &::before {
-    content: "\e532";
-  }
-}
-
-.directions-bus {
-  @extend %icon;
-
-  &::before {
-    content: "\e530";
-  }
-}
-
-.directions-car {
-  @extend %icon;
-
-  &::before {
-    content: "\e531";
-  }
-}
-
-.directions-railway {
-  @extend %icon;
-
-  &::before {
-    content: "\e534";
-  }
-}
-
-.directions-run {
-  @extend %icon;
-
-  &::before {
-    content: "\e566";
-  }
-}
-
-.directions-subway {
-  @extend %icon;
-
-  &::before {
-    content: "\e533";
-  }
-}
-
-.directions-transit {
-  @extend %icon;
-
-  &::before {
-    content: "\e535";
-  }
-}
-
-.directions-walk {
-  @extend %icon;
-
-  &::before {
-    content: "\e536";
-  }
-}
-
-.disc-full {
-  @extend %icon;
-
-  &::before {
-    content: "\e610";
-  }
-}
-
-.dns {
-  @extend %icon;
-
-  &::before {
-    content: "\e875";
-  }
-}
-
-.do-not-disturb {
-  @extend %icon;
-
-  &::before {
-    content: "\e612";
-  }
-}
-
-.do-not-disturb-alt {
-  @extend %icon;
-
-  &::before {
-    content: "\e611";
-  }
-}
-
-.dock {
-  @extend %icon;
-
-  &::before {
-    content: "\e30e";
-  }
-}
-
-.domain {
-  @extend %icon;
-
-  &::before {
-    content: "\e7ee";
-  }
-}
-
-.done {
-  @extend %icon;
-
-  &::before {
-    content: "\e876";
-  }
-}
-
-.done-all {
-  @extend %icon;
-
-  &::before {
-    content: "\e877";
-  }
-}
-
-.drafts {
-  @extend %icon;
-
-  &::before {
-    content: "\e151";
-  }
-}
-
-.drive-eta {
-  @extend %icon;
-
-  &::before {
-    content: "\e613";
-  }
-}
-
-.dvr {
-  @extend %icon;
-
-  &::before {
-    content: "\e1b2";
-  }
-}
-
-.edit {
-  @extend %icon;
-
-  &::before {
-    content: "\e3c9";
-  }
-}
-
-.eject {
-  @extend %icon;
-
-  &::before {
-    content: "\e8fb";
-  }
-}
-
-.email {
-  @extend %icon;
-
-  &::before {
-    content: "\e0be";
-  }
-}
-
-.equalizer {
-  @extend %icon;
-
-  &::before {
-    content: "\e01d";
-  }
-}
-
-.error {
-  @extend %icon;
-
-  &::before {
-    content: "\e000";
-  }
-}
-
-.error-outline {
-  @extend %icon;
-
-  &::before {
-    content: "\e001";
-  }
-}
-
-.event {
-  @extend %icon;
-
-  &::before {
-    content: "\e878";
-  }
-}
-
-.event-available {
-  @extend %icon;
-
-  &::before {
-    content: "\e614";
-  }
-}
-
-.event-busy {
-  @extend %icon;
-
-  &::before {
-    content: "\e615";
-  }
-}
-
-.event-note {
-  @extend %icon;
-
-  &::before {
-    content: "\e616";
-  }
-}
-
-.event-seat {
-  @extend %icon;
-
-  &::before {
-    content: "\e903";
-  }
-}
-
-.exit-to-app {
-  @extend %icon;
-
-  &::before {
-    content: "\e879";
-  }
-}
-
-.expand-less {
-  @extend %icon;
-
-  &::before {
-    content: "\e5ce";
-  }
-}
-
-.expand-more {
-  @extend %icon;
-
-  &::before {
-    content: "\e5cf";
-  }
-}
-
-.explicit {
-  @extend %icon;
-
-  &::before {
-    content: "\e01e";
-  }
-}
-
-.explore {
-  @extend %icon;
-
-  &::before {
-    content: "\e87a";
-  }
-}
-
-.exposure {
-  @extend %icon;
-
-  &::before {
-    content: "\e3ca";
-  }
-}
-
-.exposure-neg-1 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3cb";
-  }
-}
-
-.exposure-neg-2 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3cc";
-  }
-}
-
-.exposure-plus-1 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3cd";
-  }
-}
-
-.exposure-plus-2 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3ce";
-  }
-}
-
-.exposure-zero {
-  @extend %icon;
-
-  &::before {
-    content: "\e3cf";
-  }
-}
-
-.extension {
-  @extend %icon;
-
-  &::before {
-    content: "\e87b";
-  }
-}
-
-.face {
-  @extend %icon;
-
-  &::before {
-    content: "\e87c";
-  }
-}
-
-.fast-forward {
-  @extend %icon;
-
-  &::before {
-    content: "\e01f";
-  }
-}
-
-.fast-rewind {
-  @extend %icon;
-
-  &::before {
-    content: "\e020";
-  }
-}
-
-.favorite {
-  @extend %icon;
-
-  &::before {
-    content: "\e87d";
-  }
-}
-
-.favorite-border {
-  @extend %icon;
-
-  &::before {
-    content: "\e87e";
-  }
-}
-
-.feedback {
-  @extend %icon;
-
-  &::before {
-    content: "\e87f";
-  }
-}
-
-.file-download {
-  @extend %icon;
-
-  &::before {
-    content: "\e2c4";
-  }
-}
-
-.file-upload {
-  @extend %icon;
-
-  &::before {
-    content: "\e2c6";
-  }
-}
-
-.filter {
-  @extend %icon;
-
-  &::before {
-    content: "\e3d3";
-  }
-}
-
-.filter-1 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3d0";
-  }
-}
-
-.filter-2 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3d1";
-  }
-}
-
-.filter-3 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3d2";
-  }
-}
-
-.filter-4 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3d4";
-  }
-}
-
-.filter-5 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3d5";
-  }
-}
-
-.filter-6 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3d6";
-  }
-}
-
-.filter-7 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3d7";
-  }
-}
-
-.filter-8 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3d8";
-  }
-}
-
-.filter-9 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3d9";
-  }
-}
-
-.filter-9-plus {
-  @extend %icon;
-
-  &::before {
-    content: "\e3da";
-  }
-}
-
-.filter-b-and-w {
-  @extend %icon;
-
-  &::before {
-    content: "\e3db";
-  }
-}
-
-.filter-center-focus {
-  @extend %icon;
-
-  &::before {
-    content: "\e3dc";
-  }
-}
-
-.filter-drama {
-  @extend %icon;
-
-  &::before {
-    content: "\e3dd";
-  }
-}
-
-.filter-frames {
-  @extend %icon;
-
-  &::before {
-    content: "\e3de";
-  }
-}
-
-.filter-hdr {
-  @extend %icon;
-
-  &::before {
-    content: "\e3df";
-  }
-}
-
-.filter-list {
-  @extend %icon;
-
-  &::before {
-    content: "\e152";
-  }
-}
-
-.filter-none {
-  @extend %icon;
-
-  &::before {
-    content: "\e3e0";
-  }
-}
-
-.filter-tilt-shift {
-  @extend %icon;
-
-  &::before {
-    content: "\e3e2";
-  }
-}
-
-.filter-vintage {
-  @extend %icon;
-
-  &::before {
-    content: "\e3e3";
-  }
-}
-
-.find-in-page {
-  @extend %icon;
-
-  &::before {
-    content: "\e880";
-  }
-}
-
-.find-replace {
-  @extend %icon;
-
-  &::before {
-    content: "\e881";
-  }
-}
-
-.flag {
-  @extend %icon;
-
-  &::before {
-    content: "\e153";
-  }
-}
-
-.flare {
-  @extend %icon;
-
-  &::before {
-    content: "\e3e4";
-  }
-}
-
-.flash-auto {
-  @extend %icon;
-
-  &::before {
-    content: "\e3e5";
-  }
-}
-
-.flash-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e3e6";
-  }
-}
-
-.flash-on {
-  @extend %icon;
-
-  &::before {
-    content: "\e3e7";
-  }
-}
-
-.flight {
-  @extend %icon;
-
-  &::before {
-    content: "\e539";
-  }
-}
-
-.flight-land {
-  @extend %icon;
-
-  &::before {
-    content: "\e904";
-  }
-}
-
-.flight-takeoff {
-  @extend %icon;
-
-  &::before {
-    content: "\e905";
-  }
-}
-
-.flip {
-  @extend %icon;
-
-  &::before {
-    content: "\e3e8";
-  }
-}
-
-.flip-to-back {
-  @extend %icon;
-
-  &::before {
-    content: "\e882";
-  }
-}
-
-.flip-to-front {
-  @extend %icon;
-
-  &::before {
-    content: "\e883";
-  }
-}
-
-.folder {
-  @extend %icon;
-
-  &::before {
-    content: "\e2c7";
-  }
-}
-
-.folder-open {
-  @extend %icon;
-
-  &::before {
-    content: "\e2c8";
-  }
-}
-
-.folder-shared {
-  @extend %icon;
-
-  &::before {
-    content: "\e2c9";
-  }
-}
-
-.folder-special {
-  @extend %icon;
-
-  &::before {
-    content: "\e617";
-  }
-}
-
-.font-download {
-  @extend %icon;
-
-  &::before {
-    content: "\e167";
-  }
-}
-
-.format-align-center {
-  @extend %icon;
-
-  &::before {
-    content: "\e234";
-  }
-}
-
-.format-align-justify {
-  @extend %icon;
-
-  &::before {
-    content: "\e235";
-  }
-}
-
-.format-align-left {
-  @extend %icon;
-
-  &::before {
-    content: "\e236";
-  }
-}
-
-.format-align-right {
-  @extend %icon;
-
-  &::before {
-    content: "\e237";
-  }
-}
-
-.format-bold {
-  @extend %icon;
-
-  &::before {
-    content: "\e238";
-  }
-}
-
-.format-clear {
-  @extend %icon;
-
-  &::before {
-    content: "\e239";
-  }
-}
-
-.format-color-fill {
-  @extend %icon;
-
-  &::before {
-    content: "\e23a";
-  }
-}
-
-.format-color-reset {
-  @extend %icon;
-
-  &::before {
-    content: "\e23b";
-  }
-}
-
-.format-color-text {
-  @extend %icon;
-
-  &::before {
-    content: "\e23c";
-  }
-}
-
-.format-indent-decrease {
-  @extend %icon;
-
-  &::before {
-    content: "\e23d";
-  }
-}
-
-.format-indent-increase {
-  @extend %icon;
-
-  &::before {
-    content: "\e23e";
-  }
-}
-
-.format-italic {
-  @extend %icon;
-
-  &::before {
-    content: "\e23f";
-  }
-}
-
-.format-line-spacing {
-  @extend %icon;
-
-  &::before {
-    content: "\e240";
-  }
-}
-
-.format-list-bulleted {
-  @extend %icon;
-
-  &::before {
-    content: "\e241";
-  }
-}
-
-.format-list-numbered {
-  @extend %icon;
-
-  &::before {
-    content: "\e242";
-  }
-}
-
-.format-paint {
-  @extend %icon;
-
-  &::before {
-    content: "\e243";
-  }
-}
-
-.format-quote {
-  @extend %icon;
-
-  &::before {
-    content: "\e244";
-  }
-}
-
-.format-size {
-  @extend %icon;
-
-  &::before {
-    content: "\e245";
-  }
-}
-
-.format-strikethrough {
-  @extend %icon;
-
-  &::before {
-    content: "\e246";
-  }
-}
-
-.format-textdirection-l-to-r {
-  @extend %icon;
-
-  &::before {
-    content: "\e247";
-  }
-}
-
-.format-textdirection-r-to-l {
-  @extend %icon;
-
-  &::before {
-    content: "\e248";
-  }
-}
-
-.format-underlined {
-  @extend %icon;
-
-  &::before {
-    content: "\e249";
-  }
-}
-
-.forum {
-  @extend %icon;
-
-  &::before {
-    content: "\e0bf";
-  }
-}
-
-.forward {
-  @extend %icon;
-
-  &::before {
-    content: "\e154";
-  }
-}
-
-.forward-10 {
-  @extend %icon;
-
-  &::before {
-    content: "\e056";
-  }
-}
-
-.forward-30 {
-  @extend %icon;
-
-  &::before {
-    content: "\e057";
-  }
-}
-
-.forward-5 {
-  @extend %icon;
-
-  &::before {
-    content: "\e058";
-  }
-}
-
-.fullscreen {
-  @extend %icon;
-
-  &::before {
-    content: "\e5d0";
-  }
-}
-
-.fullscreen-exit {
-  @extend %icon;
-
-  &::before {
-    content: "\e5d1";
-  }
-}
-
-.functions {
-  @extend %icon;
-
-  &::before {
-    content: "\e24a";
-  }
-}
-
-.gamepad {
-  @extend %icon;
-
-  &::before {
-    content: "\e30f";
-  }
-}
-
-.games {
-  @extend %icon;
-
-  &::before {
-    content: "\e021";
-  }
-}
-
-.gesture {
-  @extend %icon;
-
-  &::before {
-    content: "\e155";
-  }
-}
-
-.get-app {
-  @extend %icon;
-
-  &::before {
-    content: "\e884";
-  }
-}
-
-.gif {
-  @extend %icon;
-
-  &::before {
-    content: "\e908";
-  }
-}
-
-.gps-fixed {
-  @extend %icon;
-
-  &::before {
-    content: "\e1b3";
-  }
-}
-
-.gps-not-fixed {
-  @extend %icon;
-
-  &::before {
-    content: "\e1b4";
-  }
-}
-
-.gps-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e1b5";
-  }
-}
-
-.grade {
-  @extend %icon;
-
-  &::before {
-    content: "\e885";
-  }
-}
-
-.gradient {
-  @extend %icon;
-
-  &::before {
-    content: "\e3e9";
-  }
-}
-
-.grain {
-  @extend %icon;
-
-  &::before {
-    content: "\e3ea";
-  }
-}
-
-.graphic-eq {
-  @extend %icon;
-
-  &::before {
-    content: "\e1b8";
-  }
-}
-
-.grid-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e3eb";
-  }
-}
-
-.grid-on {
-  @extend %icon;
-
-  &::before {
-    content: "\e3ec";
-  }
-}
-
-.group {
-  @extend %icon;
-
-  &::before {
-    content: "\e7ef";
-  }
-}
-
-.group-add {
-  @extend %icon;
-
-  &::before {
-    content: "\e7f0";
-  }
-}
-
-.group-work {
-  @extend %icon;
-
-  &::before {
-    content: "\e886";
-  }
-}
-
-.hd {
-  @extend %icon;
-
-  &::before {
-    content: "\e052";
-  }
-}
-
-.hdr-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e3ed";
-  }
-}
-
-.hdr-on {
-  @extend %icon;
-
-  &::before {
-    content: "\e3ee";
-  }
-}
-
-.hdr-strong {
-  @extend %icon;
-
-  &::before {
-    content: "\e3f1";
-  }
-}
-
-.hdr-weak {
-  @extend %icon;
-
-  &::before {
-    content: "\e3f2";
-  }
-}
-
-.headset {
-  @extend %icon;
-
-  &::before {
-    content: "\e310";
-  }
-}
-
-.headset-mic {
-  @extend %icon;
-
-  &::before {
-    content: "\e311";
-  }
-}
-
-.healing {
-  @extend %icon;
-
-  &::before {
-    content: "\e3f3";
-  }
-}
-
-.hearing {
-  @extend %icon;
-
-  &::before {
-    content: "\e023";
-  }
-}
-
-.help {
-  @extend %icon;
-
-  &::before {
-    content: "\e887";
-  }
-}
-
-.help-outline {
-  @extend %icon;
-
-  &::before {
-    content: "\e8fd";
-  }
-}
-
-.high-quality {
-  @extend %icon;
-
-  &::before {
-    content: "\e024";
-  }
-}
-
-.highlight-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e888";
-  }
-}
-
-.history {
-  @extend %icon;
-
-  &::before {
-    content: "\e889";
-  }
-}
-
-.home {
-  @extend %icon;
-
-  &::before {
-    content: "\e88a";
-  }
-}
-
-.hotel {
-  @extend %icon;
-
-  &::before {
-    content: "\e53a";
-  }
-}
-
-.hourglass-empty {
-  @extend %icon;
-
-  &::before {
-    content: "\e88b";
-  }
-}
-
-.hourglass-full {
-  @extend %icon;
-
-  &::before {
-    content: "\e88c";
-  }
-}
-
-.http {
-  @extend %icon;
-
-  &::before {
-    content: "\e902";
-  }
-}
-
-.https {
-  @extend %icon;
-
-  &::before {
-    content: "\e88d";
-  }
-}
-
-.image {
-  @extend %icon;
-
-  &::before {
-    content: "\e3f4";
-  }
-}
-
-.image-aspect-ratio {
-  @extend %icon;
-
-  &::before {
-    content: "\e3f5";
-  }
-}
-
-.import-export {
-  @extend %icon;
-
-  &::before {
-    content: "\e0c3";
-  }
-}
-
-.inbox {
-  @extend %icon;
-
-  &::before {
-    content: "\e156";
-  }
-}
-
-.indeterminate-check-box {
-  @extend %icon;
-
-  &::before {
-    content: "\e909";
-  }
-}
-
-.info {
-  @extend %icon;
-
-  &::before {
-    content: "\e88e";
-  }
-}
-
-.info-outline {
-  @extend %icon;
-
-  &::before {
-    content: "\e88f";
-  }
-}
-
-.input {
-  @extend %icon;
-
-  &::before {
-    content: "\e890";
-  }
-}
-
-.insert-chart {
-  @extend %icon;
-
-  &::before {
-    content: "\e24b";
-  }
-}
-
-.insert-comment {
-  @extend %icon;
-
-  &::before {
-    content: "\e24c";
-  }
-}
-
-.insert-drive-file {
-  @extend %icon;
-
-  &::before {
-    content: "\e24d";
-  }
-}
-
-.insert-emoticon {
-  @extend %icon;
-
-  &::before {
-    content: "\e24e";
-  }
-}
-
-.insert-invitation {
-  @extend %icon;
-
-  &::before {
-    content: "\e24f";
-  }
-}
-
-.insert-link {
-  @extend %icon;
-
-  &::before {
-    content: "\e250";
-  }
-}
-
-.insert-photo {
-  @extend %icon;
-
-  &::before {
-    content: "\e251";
-  }
-}
-
-.invert-colors {
-  @extend %icon;
-
-  &::before {
-    content: "\e891";
-  }
-}
-
-.invert-colors-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e0c4";
-  }
-}
-
-.iso {
-  @extend %icon;
-
-  &::before {
-    content: "\e3f6";
-  }
-}
-
-.keyboard {
-  @extend %icon;
-
-  &::before {
-    content: "\e312";
-  }
-}
-
-.keyboard-arrow-down {
-  @extend %icon;
-
-  &::before {
-    content: "\e313";
-  }
-}
-
-.keyboard-arrow-left {
-  @extend %icon;
-
-  &::before {
-    content: "\e314";
-  }
-}
-
-.keyboard-arrow-right {
-  @extend %icon;
-
-  &::before {
-    content: "\e315";
-  }
-}
-
-.keyboard-arrow-up {
-  @extend %icon;
-
-  &::before {
-    content: "\e316";
-  }
-}
-
-.keyboard-backspace {
-  @extend %icon;
-
-  &::before {
-    content: "\e317";
-  }
-}
-
-.keyboard-capslock {
-  @extend %icon;
-
-  &::before {
-    content: "\e318";
-  }
-}
-
-.keyboard-hide {
-  @extend %icon;
-
-  &::before {
-    content: "\e31a";
-  }
-}
-
-.keyboard-return {
-  @extend %icon;
-
-  &::before {
-    content: "\e31b";
-  }
-}
-
-.keyboard-tab {
-  @extend %icon;
-
-  &::before {
-    content: "\e31c";
-  }
-}
-
-.keyboard-voice {
-  @extend %icon;
-
-  &::before {
-    content: "\e31d";
-  }
-}
-
-.label {
-  @extend %icon;
-
-  &::before {
-    content: "\e892";
-  }
-}
-
-.label-outline {
-  @extend %icon;
-
-  &::before {
-    content: "\e893";
-  }
-}
-
-.landscape {
-  @extend %icon;
-
-  &::before {
-    content: "\e3f7";
-  }
-}
-
-.language {
-  @extend %icon;
-
-  &::before {
-    content: "\e894";
-  }
-}
-
-.laptop {
-  @extend %icon;
-
-  &::before {
-    content: "\e31e";
-  }
-}
-
-.laptop-chromebook {
-  @extend %icon;
-
-  &::before {
-    content: "\e31f";
-  }
-}
-
-.laptop-mac {
-  @extend %icon;
-
-  &::before {
-    content: "\e320";
-  }
-}
-
-.laptop-windows {
-  @extend %icon;
-
-  &::before {
-    content: "\e321";
-  }
-}
-
-.launch {
-  @extend %icon;
-
-  &::before {
-    content: "\e895";
-  }
-}
-
-.layers {
-  @extend %icon;
-
-  &::before {
-    content: "\e53b";
-  }
-}
-
-.layers-clear {
-  @extend %icon;
-
-  &::before {
-    content: "\e53c";
-  }
-}
-
-.leak-add {
-  @extend %icon;
-
-  &::before {
-    content: "\e3f8";
-  }
-}
-
-.leak-remove {
-  @extend %icon;
-
-  &::before {
-    content: "\e3f9";
-  }
-}
-
-.lens {
-  @extend %icon;
-
-  &::before {
-    content: "\e3fa";
-  }
-}
-
-.library-add {
-  @extend %icon;
-
-  &::before {
-    content: "\e02e";
-  }
-}
-
-.library-books {
-  @extend %icon;
-
-  &::before {
-    content: "\e02f";
-  }
-}
-
-.library-music {
-  @extend %icon;
-
-  &::before {
-    content: "\e030";
-  }
-}
-
-.link {
-  @extend %icon;
-
-  &::before {
-    content: "\e157";
-  }
-}
-
-.list {
-  @extend %icon;
-
-  &::before {
-    content: "\e896";
-  }
-}
-
-.live-help {
-  @extend %icon;
-
-  &::before {
-    content: "\e0c6";
-  }
-}
-
-.live-tv {
-  @extend %icon;
-
-  &::before {
-    content: "\e639";
-  }
-}
-
-.local-activity {
-  @extend %icon;
-
-  &::before {
-    content: "\e53f";
-  }
-}
-
-.local-airport {
-  @extend %icon;
-
-  &::before {
-    content: "\e53d";
-  }
-}
-
-.local-atm {
-  @extend %icon;
-
-  &::before {
-    content: "\e53e";
-  }
-}
-
-.local-bar {
-  @extend %icon;
-
-  &::before {
-    content: "\e540";
-  }
-}
-
-.local-cafe {
-  @extend %icon;
-
-  &::before {
-    content: "\e541";
-  }
-}
-
-.local-car-wash {
-  @extend %icon;
-
-  &::before {
-    content: "\e542";
-  }
-}
-
-.local-convenience-store {
-  @extend %icon;
-
-  &::before {
-    content: "\e543";
-  }
-}
-
-.local-dining {
-  @extend %icon;
-
-  &::before {
-    content: "\e556";
-  }
-}
-
-.local-drink {
-  @extend %icon;
-
-  &::before {
-    content: "\e544";
-  }
-}
-
-.local-florist {
-  @extend %icon;
-
-  &::before {
-    content: "\e545";
-  }
-}
-
-.local-gas-station {
-  @extend %icon;
-
-  &::before {
-    content: "\e546";
-  }
-}
-
-.local-grocery-store {
-  @extend %icon;
-
-  &::before {
-    content: "\e547";
-  }
-}
-
-.local-hospital {
-  @extend %icon;
-
-  &::before {
-    content: "\e548";
-  }
-}
-
-.local-hotel {
-  @extend %icon;
-
-  &::before {
-    content: "\e549";
-  }
-}
-
-.local-laundry-service {
-  @extend %icon;
-
-  &::before {
-    content: "\e54a";
-  }
-}
-
-.local-library {
-  @extend %icon;
-
-  &::before {
-    content: "\e54b";
-  }
-}
-
-.local-mall {
-  @extend %icon;
-
-  &::before {
-    content: "\e54c";
-  }
-}
-
-.local-movies {
-  @extend %icon;
-
-  &::before {
-    content: "\e54d";
-  }
-}
-
-.local-offer {
-  @extend %icon;
-
-  &::before {
-    content: "\e54e";
-  }
-}
-
-.local-parking {
-  @extend %icon;
-
-  &::before {
-    content: "\e54f";
-  }
-}
-
-.local-pharmacy {
-  @extend %icon;
-
-  &::before {
-    content: "\e550";
-  }
-}
-
-.local-phone {
-  @extend %icon;
-
-  &::before {
-    content: "\e551";
-  }
-}
-
-.local-pizza {
-  @extend %icon;
-
-  &::before {
-    content: "\e552";
-  }
-}
-
-.local-play {
-  @extend %icon;
-
-  &::before {
-    content: "\e553";
-  }
-}
-
-.local-post-office {
-  @extend %icon;
-
-  &::before {
-    content: "\e554";
-  }
-}
-
-.local-printshop {
-  @extend %icon;
-
-  &::before {
-    content: "\e555";
-  }
-}
-
-.local-see {
-  @extend %icon;
-
-  &::before {
-    content: "\e557";
-  }
-}
-
-.local-shipping {
-  @extend %icon;
-
-  &::before {
-    content: "\e558";
-  }
-}
-
-.local-taxi {
-  @extend %icon;
-
-  &::before {
-    content: "\e559";
-  }
-}
-
-.location-city {
-  @extend %icon;
-
-  &::before {
-    content: "\e7f1";
-  }
-}
-
-.location-disabled {
-  @extend %icon;
-
-  &::before {
-    content: "\e1b6";
-  }
-}
-
-.location-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e0c7";
-  }
-}
-
-.location-on {
-  @extend %icon;
-
-  &::before {
-    content: "\e0c8";
-  }
-}
-
-.location-searching {
-  @extend %icon;
-
-  &::before {
-    content: "\e1b7";
-  }
-}
-
-.lock {
-  @extend %icon;
-
-  &::before {
-    content: "\e897";
-  }
-}
-
-.lock-open {
-  @extend %icon;
-
-  &::before {
-    content: "\e898";
-  }
-}
-
-.lock-outline {
-  @extend %icon;
-
-  &::before {
-    content: "\e899";
-  }
-}
-
-.looks {
-  @extend %icon;
-
-  &::before {
-    content: "\e3fc";
-  }
-}
-
-.looks-3 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3fb";
-  }
-}
-
-.looks-4 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3fd";
-  }
-}
-
-.looks-5 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3fe";
-  }
-}
-
-.looks-6 {
-  @extend %icon;
-
-  &::before {
-    content: "\e3ff";
-  }
-}
-
-.looks-one {
-  @extend %icon;
-
-  &::before {
-    content: "\e400";
-  }
-}
-
-.looks-two {
-  @extend %icon;
-
-  &::before {
-    content: "\e401";
-  }
-}
-
-.loop {
-  @extend %icon;
-
-  &::before {
-    content: "\e028";
-  }
-}
-
-.loupe {
-  @extend %icon;
-
-  &::before {
-    content: "\e402";
-  }
-}
-
-.loyalty {
-  @extend %icon;
-
-  &::before {
-    content: "\e89a";
-  }
-}
-
-.mail {
-  @extend %icon;
-
-  &::before {
-    content: "\e158";
-  }
-}
-
-.map {
-  @extend %icon;
-
-  &::before {
-    content: "\e55b";
-  }
-}
-
-.markunread {
-  @extend %icon;
-
-  &::before {
-    content: "\e159";
-  }
-}
-
-.markunread-mailbox {
-  @extend %icon;
-
-  &::before {
-    content: "\e89b";
-  }
-}
-
-.memory {
-  @extend %icon;
-
-  &::before {
-    content: "\e322";
-  }
-}
-
-.menu {
-  @extend %icon;
-
-  &::before {
-    content: "\e5d2";
-  }
-}
-
-.merge-type {
-  @extend %icon;
-
-  &::before {
-    content: "\e252";
-  }
-}
-
-.message {
-  @extend %icon;
-
-  &::before {
-    content: "\e0c9";
-  }
-}
-
-.mic {
-  @extend %icon;
-
-  &::before {
-    content: "\e029";
-  }
-}
-
-.mic-none {
-  @extend %icon;
-
-  &::before {
-    content: "\e02a";
-  }
-}
-
-.mic-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e02b";
-  }
-}
-
-.mms {
-  @extend %icon;
-
-  &::before {
-    content: "\e618";
-  }
-}
-
-.mode-comment {
-  @extend %icon;
-
-  &::before {
-    content: "\e253";
-  }
-}
-
-.mode-edit {
-  @extend %icon;
-
-  &::before {
-    content: "\e254";
-  }
-}
-
-.money-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e25c";
-  }
-}
-
-.monochrome-photos {
-  @extend %icon;
-
-  &::before {
-    content: "\e403";
-  }
-}
-
-.mood {
-  @extend %icon;
-
-  &::before {
-    content: "\e7f2";
-  }
-}
-
-.mood-bad {
-  @extend %icon;
-
-  &::before {
-    content: "\e7f3";
-  }
-}
-
-.more {
-  @extend %icon;
-
-  &::before {
-    content: "\e619";
-  }
-}
-
-.more-horiz {
-  @extend %icon;
-
-  &::before {
-    content: "\e5d3";
-  }
-}
-
-.more-vert {
-  @extend %icon;
-
-  &::before {
-    content: "\e5d4";
-  }
-}
-
-.mouse {
-  @extend %icon;
-
-  &::before {
-    content: "\e323";
-  }
-}
-
-.movie {
-  @extend %icon;
-
-  &::before {
-    content: "\e02c";
-  }
-}
-
-.movie-creation {
-  @extend %icon;
-
-  &::before {
-    content: "\e404";
-  }
-}
-
-.music-note {
-  @extend %icon;
-
-  &::before {
-    content: "\e405";
-  }
-}
-
-.my-location {
-  @extend %icon;
-
-  &::before {
-    content: "\e55c";
-  }
-}
-
-.nature {
-  @extend %icon;
-
-  &::before {
-    content: "\e406";
-  }
-}
-
-.nature-people {
-  @extend %icon;
-
-  &::before {
-    content: "\e407";
-  }
-}
-
-.navigate-before {
-  @extend %icon;
-
-  &::before {
-    content: "\e408";
-  }
-}
-
-.navigate-next {
-  @extend %icon;
-
-  &::before {
-    content: "\e409";
-  }
-}
-
-.navigation {
-  @extend %icon;
-
-  &::before {
-    content: "\e55d";
-  }
-}
-
-.network-cell {
-  @extend %icon;
-
-  &::before {
-    content: "\e1b9";
-  }
-}
-
-.network-locked {
-  @extend %icon;
-
-  &::before {
-    content: "\e61a";
-  }
-}
-
-.network-wifi {
-  @extend %icon;
-
-  &::before {
-    content: "\e1ba";
-  }
-}
-
-.new-releases {
-  @extend %icon;
-
-  &::before {
-    content: "\e031";
-  }
-}
-
-.nfc {
-  @extend %icon;
-
-  &::before {
-    content: "\e1bb";
-  }
-}
-
-.no-sim {
-  @extend %icon;
-
-  &::before {
-    content: "\e0cc";
-  }
-}
-
-.not-interested {
-  @extend %icon;
-
-  &::before {
-    content: "\e033";
-  }
-}
-
-.note-add {
-  @extend %icon;
-
-  &::before {
-    content: "\e89c";
-  }
-}
-
-.notifications {
-  @extend %icon;
-
-  &::before {
-    content: "\e7f4";
-  }
-}
-
-.notifications-active {
-  @extend %icon;
-
-  &::before {
-    content: "\e7f7";
-  }
-}
-
-.notifications-none {
-  @extend %icon;
-
-  &::before {
-    content: "\e7f5";
-  }
-}
-
-.notifications-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e7f6";
-  }
-}
-
-.notifications-paused {
-  @extend %icon;
-
-  &::before {
-    content: "\e7f8";
-  }
-}
-
-.offline-pin {
-  @extend %icon;
-
-  &::before {
-    content: "\e90a";
-  }
-}
-
-.ondemand-video {
-  @extend %icon;
-
-  &::before {
-    content: "\e63a";
-  }
-}
-
-.open-in-browser {
-  @extend %icon;
-
-  &::before {
-    content: "\e89d";
-  }
-}
-
-.open-in-new {
-  @extend %icon;
-
-  &::before {
-    content: "\e89e";
-  }
-}
-
-.open-with {
-  @extend %icon;
-
-  &::before {
-    content: "\e89f";
-  }
-}
-
-.pages {
-  @extend %icon;
-
-  &::before {
-    content: "\e7f9";
-  }
-}
-
-.pageview {
-  @extend %icon;
-
-  &::before {
-    content: "\e8a0";
-  }
-}
-
-.palette {
-  @extend %icon;
-
-  &::before {
-    content: "\e40a";
-  }
-}
-
-.panorama {
-  @extend %icon;
-
-  &::before {
-    content: "\e40b";
-  }
-}
-
-.panorama-fish-eye {
-  @extend %icon;
-
-  &::before {
-    content: "\e40c";
-  }
-}
-
-.panorama-horizontal {
-  @extend %icon;
-
-  &::before {
-    content: "\e40d";
-  }
-}
-
-.panorama-vertical {
-  @extend %icon;
-
-  &::before {
-    content: "\e40e";
-  }
-}
-
-.panorama-wide-angle {
-  @extend %icon;
-
-  &::before {
-    content: "\e40f";
-  }
-}
-
-.party-mode {
-  @extend %icon;
-
-  &::before {
-    content: "\e7fa";
-  }
-}
-
-.pause {
-  @extend %icon;
-
-  &::before {
-    content: "\e034";
-  }
-}
-
-.pause-circle-filled {
-  @extend %icon;
-
-  &::before {
-    content: "\e035";
-  }
-}
-
-.pause-circle-outline {
-  @extend %icon;
-
-  &::before {
-    content: "\e036";
-  }
-}
-
-.payment {
-  @extend %icon;
-
-  &::before {
-    content: "\e8a1";
-  }
-}
-
-.people {
-  @extend %icon;
-
-  &::before {
-    content: "\e7fb";
-  }
-}
-
-.people-outline {
-  @extend %icon;
-
-  &::before {
-    content: "\e7fc";
-  }
-}
-
-.perm-camera-mic {
-  @extend %icon;
-
-  &::before {
-    content: "\e8a2";
-  }
-}
-
-.perm-contact-calendar {
-  @extend %icon;
-
-  &::before {
-    content: "\e8a3";
-  }
-}
-
-.perm-data-setting {
-  @extend %icon;
-
-  &::before {
-    content: "\e8a4";
-  }
-}
-
-.perm-device-information {
-  @extend %icon;
-
-  &::before {
-    content: "\e8a5";
-  }
-}
-
-.perm-identity {
-  @extend %icon;
-
-  &::before {
-    content: "\e8a6";
-  }
-}
-
-.perm-media {
-  @extend %icon;
-
-  &::before {
-    content: "\e8a7";
-  }
-}
-
-.perm-phone-msg {
-  @extend %icon;
-
-  &::before {
-    content: "\e8a8";
-  }
-}
-
-.perm-scan-wifi {
-  @extend %icon;
-
-  &::before {
-    content: "\e8a9";
-  }
-}
-
-.person {
-  @extend %icon;
-
-  &::before {
-    content: "\e7fd";
-  }
-}
-
-.person-add {
-  @extend %icon;
-
-  &::before {
-    content: "\e7fe";
-  }
-}
-
-.person-outline {
-  @extend %icon;
-
-  &::before {
-    content: "\e7ff";
-  }
-}
-
-.person-pin {
-  @extend %icon;
-
-  &::before {
-    content: "\e55a";
-  }
-}
-
-.personal-video {
-  @extend %icon;
-
-  &::before {
-    content: "\e63b";
-  }
-}
-
-.phone {
-  @extend %icon;
-
-  &::before {
-    content: "\e0cd";
-  }
-}
-
-.phone-android {
-  @extend %icon;
-
-  &::before {
-    content: "\e324";
-  }
-}
-
-.phone-bluetooth-speaker {
-  @extend %icon;
-
-  &::before {
-    content: "\e61b";
-  }
-}
-
-.phone-forwarded {
-  @extend %icon;
-
-  &::before {
-    content: "\e61c";
-  }
-}
-
-.phone-in-talk {
-  @extend %icon;
-
-  &::before {
-    content: "\e61d";
-  }
-}
-
-.phone-iphone {
-  @extend %icon;
-
-  &::before {
-    content: "\e325";
-  }
-}
-
-.phone-locked {
-  @extend %icon;
-
-  &::before {
-    content: "\e61e";
-  }
-}
-
-.phone-missed {
-  @extend %icon;
-
-  &::before {
-    content: "\e61f";
-  }
-}
-
-.phone-paused {
-  @extend %icon;
-
-  &::before {
-    content: "\e620";
-  }
-}
-
-.phonelink {
-  @extend %icon;
-
-  &::before {
-    content: "\e326";
-  }
-}
-
-.phonelink-erase {
-  @extend %icon;
-
-  &::before {
-    content: "\e0db";
-  }
-}
-
-.phonelink-lock {
-  @extend %icon;
-
-  &::before {
-    content: "\e0dc";
-  }
-}
-
-.phonelink-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e327";
-  }
-}
-
-.phonelink-ring {
-  @extend %icon;
-
-  &::before {
-    content: "\e0dd";
-  }
-}
-
-.phonelink-setup {
-  @extend %icon;
-
-  &::before {
-    content: "\e0de";
-  }
-}
-
-.photo {
-  @extend %icon;
-
-  &::before {
-    content: "\e410";
-  }
-}
-
-.photo-album {
-  @extend %icon;
-
-  &::before {
-    content: "\e411";
-  }
-}
-
-.photo-camera {
-  @extend %icon;
-
-  &::before {
-    content: "\e412";
-  }
-}
-
-.photo-library {
-  @extend %icon;
-
-  &::before {
-    content: "\e413";
-  }
-}
-
-.photo-size-select-actual {
-  @extend %icon;
-
-  &::before {
-    content: "\e432";
-  }
-}
-
-.photo-size-select-large {
-  @extend %icon;
-
-  &::before {
-    content: "\e433";
-  }
-}
-
-.photo-size-select-small {
-  @extend %icon;
-
-  &::before {
-    content: "\e434";
-  }
-}
-
-.picture-as-pdf {
-  @extend %icon;
-
-  &::before {
-    content: "\e415";
-  }
-}
-
-.picture-in-picture {
-  @extend %icon;
-
-  &::before {
-    content: "\e8aa";
-  }
-}
-
-.pin-drop {
-  @extend %icon;
-
-  &::before {
-    content: "\e55e";
-  }
-}
-
-.place {
-  @extend %icon;
-
-  &::before {
-    content: "\e55f";
-  }
-}
-
-.play-arrow {
-  @extend %icon;
-
-  &::before {
-    content: "\e037";
-  }
-}
-
-.play-circle-filled {
-  @extend %icon;
-
-  &::before {
-    content: "\e038";
-  }
-}
-
-.play-circle-outline {
-  @extend %icon;
-
-  &::before {
-    content: "\e039";
-  }
-}
-
-.play-for-work {
-  @extend %icon;
-
-  &::before {
-    content: "\e906";
-  }
-}
-
-.playlist-add {
-  @extend %icon;
-
-  &::before {
-    content: "\e03b";
-  }
-}
-
-.plus-one {
-  @extend %icon;
-
-  &::before {
-    content: "\e800";
-  }
-}
-
-.poll {
-  @extend %icon;
-
-  &::before {
-    content: "\e801";
-  }
-}
-
-.polymer {
-  @extend %icon;
-
-  &::before {
-    content: "\e8ab";
-  }
-}
-
-.portable-wifi-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e0ce";
-  }
-}
-
-.portrait {
-  @extend %icon;
-
-  &::before {
-    content: "\e416";
-  }
-}
-
-.power {
-  @extend %icon;
-
-  &::before {
-    content: "\e63c";
-  }
-}
-
-.power-input {
-  @extend %icon;
-
-  &::before {
-    content: "\e336";
-  }
-}
-
-.power-settings-new {
-  @extend %icon;
-
-  &::before {
-    content: "\e8ac";
-  }
-}
-
-.present-to-all {
-  @extend %icon;
-
-  &::before {
-    content: "\e0df";
-  }
-}
-
-.print {
-  @extend %icon;
-
-  &::before {
-    content: "\e8ad";
-  }
-}
-
-.public {
-  @extend %icon;
-
-  &::before {
-    content: "\e80b";
-  }
-}
-
-.publish {
-  @extend %icon;
-
-  &::before {
-    content: "\e255";
-  }
-}
-
-.query-builder {
-  @extend %icon;
-
-  &::before {
-    content: "\e8ae";
-  }
-}
-
-.question-answer {
-  @extend %icon;
-
-  &::before {
-    content: "\e8af";
-  }
-}
-
-.queue {
-  @extend %icon;
-
-  &::before {
-    content: "\e03c";
-  }
-}
-
-.queue-music {
-  @extend %icon;
-
-  &::before {
-    content: "\e03d";
-  }
-}
-
-.radio {
-  @extend %icon;
-
-  &::before {
-    content: "\e03e";
-  }
-}
-
-.radio-button-checked {
-  @extend %icon;
-
-  &::before {
-    content: "\e837";
-  }
-}
-
-.radio-button-unchecked {
-  @extend %icon;
-
-  &::before {
-    content: "\e836";
-  }
-}
-
-.rate-review {
-  @extend %icon;
-
-  &::before {
-    content: "\e560";
-  }
-}
-
-.receipt {
-  @extend %icon;
-
-  &::before {
-    content: "\e8b0";
-  }
-}
-
-.recent-actors {
-  @extend %icon;
-
-  &::before {
-    content: "\e03f";
-  }
-}
-
-.redeem {
-  @extend %icon;
-
-  &::before {
-    content: "\e8b1";
-  }
-}
-
-.redo {
-  @extend %icon;
-
-  &::before {
-    content: "\e15a";
-  }
-}
-
-.refresh {
-  @extend %icon;
-
-  &::before {
-    content: "\e5d5";
-  }
-}
-
-.remove {
-  @extend %icon;
-
-  &::before {
-    content: "\e15b";
-  }
-}
-
-.remove-circle {
-  @extend %icon;
-
-  &::before {
-    content: "\e15c";
-  }
-}
-
-.remove-circle-outline {
-  @extend %icon;
-
-  &::before {
-    content: "\e15d";
-  }
-}
-
-.remove-red-eye {
-  @extend %icon;
-
-  &::before {
-    content: "\e417";
-  }
-}
-
-.reorder {
-  @extend %icon;
-
-  &::before {
-    content: "\e8fe";
-  }
-}
-
-.repeat {
-  @extend %icon;
-
-  &::before {
-    content: "\e040";
-  }
-}
-
-.repeat-one {
-  @extend %icon;
-
-  &::before {
-    content: "\e041";
-  }
-}
-
-.replay {
-  @extend %icon;
-
-  &::before {
-    content: "\e042";
-  }
-}
-
-.replay-10 {
-  @extend %icon;
-
-  &::before {
-    content: "\e059";
-  }
-}
-
-.replay-30 {
-  @extend %icon;
-
-  &::before {
-    content: "\e05a";
-  }
-}
-
-.replay-5 {
-  @extend %icon;
-
-  &::before {
-    content: "\e05b";
-  }
-}
-
-.reply {
-  @extend %icon;
-
-  &::before {
-    content: "\e15e";
-  }
-}
-
-.reply-all {
-  @extend %icon;
-
-  &::before {
-    content: "\e15f";
-  }
-}
-
-.report {
-  @extend %icon;
-
-  &::before {
-    content: "\e160";
-  }
-}
-
-.report-problem {
-  @extend %icon;
-
-  &::before {
-    content: "\e8b2";
-  }
-}
-
-.restaurant-menu {
-  @extend %icon;
-
-  &::before {
-    content: "\e561";
-  }
-}
-
-.restore {
-  @extend %icon;
-
-  &::before {
-    content: "\e8b3";
-  }
-}
-
-.ring-volume {
-  @extend %icon;
-
-  &::before {
-    content: "\e0d1";
-  }
-}
-
-.room {
-  @extend %icon;
-
-  &::before {
-    content: "\e8b4";
-  }
-}
-
-.rotate-90-degrees-ccw {
-  @extend %icon;
-
-  &::before {
-    content: "\e418";
-  }
-}
-
-.rotate-left {
-  @extend %icon;
-
-  &::before {
-    content: "\e419";
-  }
-}
-
-.rotate-right {
-  @extend %icon;
-
-  &::before {
-    content: "\e41a";
-  }
-}
-
-.router {
-  @extend %icon;
-
-  &::before {
-    content: "\e328";
-  }
-}
-
-.satellite {
-  @extend %icon;
-
-  &::before {
-    content: "\e562";
-  }
-}
-
-.save {
-  @extend %icon;
-
-  &::before {
-    content: "\e161";
-  }
-}
-
-.scanner {
-  @extend %icon;
-
-  &::before {
-    content: "\e329";
-  }
-}
-
-.schedule {
-  @extend %icon;
-
-  &::before {
-    content: "\e8b5";
-  }
-}
-
-.school {
-  @extend %icon;
-
-  &::before {
-    content: "\e80c";
-  }
-}
-
-.screen-lock-landscape {
-  @extend %icon;
-
-  &::before {
-    content: "\e1be";
-  }
-}
-
-.screen-lock-portrait {
-  @extend %icon;
-
-  &::before {
-    content: "\e1bf";
-  }
-}
-
-.screen-lock-rotation {
-  @extend %icon;
-
-  &::before {
-    content: "\e1c0";
-  }
-}
-
-.screen-rotation {
-  @extend %icon;
-
-  &::before {
-    content: "\e1c1";
-  }
-}
-
-.sd-card {
-  @extend %icon;
-
-  &::before {
-    content: "\e623";
-  }
-}
-
-.sd-storage {
-  @extend %icon;
-
-  &::before {
-    content: "\e1c2";
-  }
-}
-
-.search {
-  @extend %icon;
-
-  &::before {
-    content: "\e8b6";
-  }
-}
-
-.security {
-  @extend %icon;
-
-  &::before {
-    content: "\e32a";
-  }
-}
-
-.select-all {
-  @extend %icon;
-
-  &::before {
-    content: "\e162";
-  }
-}
-
-.send {
-  @extend %icon;
-
-  &::before {
-    content: "\e163";
-  }
-}
-
-.settings {
-  @extend %icon;
-
-  &::before {
-    content: "\e8b8";
-  }
-}
-
-.settings-applications {
-  @extend %icon;
-
-  &::before {
-    content: "\e8b9";
-  }
-}
-
-.settings-backup-restore {
-  @extend %icon;
-
-  &::before {
-    content: "\e8ba";
-  }
-}
-
-.settings-bluetooth {
-  @extend %icon;
-
-  &::before {
-    content: "\e8bb";
-  }
-}
-
-.settings-brightness {
-  @extend %icon;
-
-  &::before {
-    content: "\e8bd";
-  }
-}
-
-.settings-cell {
-  @extend %icon;
-
-  &::before {
-    content: "\e8bc";
-  }
-}
-
-.settings-ethernet {
-  @extend %icon;
-
-  &::before {
-    content: "\e8be";
-  }
-}
-
-.settings-input-antenna {
-  @extend %icon;
-
-  &::before {
-    content: "\e8bf";
-  }
-}
-
-.settings-input-component {
-  @extend %icon;
-
-  &::before {
-    content: "\e8c0";
-  }
-}
-
-.settings-input-composite {
-  @extend %icon;
-
-  &::before {
-    content: "\e8c1";
-  }
-}
-
-.settings-input-hdmi {
-  @extend %icon;
-
-  &::before {
-    content: "\e8c2";
-  }
-}
-
-.settings-input-svideo {
-  @extend %icon;
-
-  &::before {
-    content: "\e8c3";
-  }
-}
-
-.settings-overscan {
-  @extend %icon;
-
-  &::before {
-    content: "\e8c4";
-  }
-}
-
-.settings-phone {
-  @extend %icon;
-
-  &::before {
-    content: "\e8c5";
-  }
-}
-
-.settings-power {
-  @extend %icon;
-
-  &::before {
-    content: "\e8c6";
-  }
-}
-
-.settings-remote {
-  @extend %icon;
-
-  &::before {
-    content: "\e8c7";
-  }
-}
-
-.settings-system-daydream {
-  @extend %icon;
-
-  &::before {
-    content: "\e1c3";
-  }
-}
-
-.settings-voice {
-  @extend %icon;
-
-  &::before {
-    content: "\e8c8";
-  }
-}
-
-.share {
-  @extend %icon;
-
-  &::before {
-    content: "\e80d";
-  }
-}
-
-.shop {
-  @extend %icon;
-
-  &::before {
-    content: "\e8c9";
-  }
-}
-
-.shop-two {
-  @extend %icon;
-
-  &::before {
-    content: "\e8ca";
-  }
-}
-
-.shopping-basket {
-  @extend %icon;
-
-  &::before {
-    content: "\e8cb";
-  }
-}
-
-.shopping-cart {
-  @extend %icon;
-
-  &::before {
-    content: "\e8cc";
-  }
-}
-
-.shuffle {
-  @extend %icon;
-
-  &::before {
-    content: "\e043";
-  }
-}
-
-.signal-cellular-4-bar {
-  @extend %icon;
-
-  &::before {
-    content: "\e1c8";
-  }
-}
-
-.signal-cellular-connected-no-internet-4-bar {
-  @extend %icon;
-
-  &::before {
-    content: "\e1cd";
-  }
-}
-
-.signal-cellular-no-sim {
-  @extend %icon;
-
-  &::before {
-    content: "\e1ce";
-  }
-}
-
-.signal-cellular-null {
-  @extend %icon;
-
-  &::before {
-    content: "\e1cf";
-  }
-}
-
-.signal-cellular-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e1d0";
-  }
-}
-
-.signal-wifi-4-bar {
-  @extend %icon;
-
-  &::before {
-    content: "\e1d8";
-  }
-}
-
-.signal-wifi-4-bar-lock {
-  @extend %icon;
-
-  &::before {
-    content: "\e1d9";
-  }
-}
-
-.signal-wifi-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e1da";
-  }
-}
-
-.sim-card {
-  @extend %icon;
-
-  &::before {
-    content: "\e32b";
-  }
-}
-
-.sim-card-alert {
-  @extend %icon;
-
-  &::before {
-    content: "\e624";
-  }
-}
-
-.skip-next {
-  @extend %icon;
-
-  &::before {
-    content: "\e044";
-  }
-}
-
-.skip-previous {
-  @extend %icon;
-
-  &::before {
-    content: "\e045";
-  }
-}
-
-.slideshow {
-  @extend %icon;
-
-  &::before {
-    content: "\e41b";
-  }
-}
-
-.smartphone {
-  @extend %icon;
-
-  &::before {
-    content: "\e32c";
-  }
-}
-
-.sms {
-  @extend %icon;
-
-  &::before {
-    content: "\e625";
-  }
-}
-
-.sms-failed {
-  @extend %icon;
-
-  &::before {
-    content: "\e626";
-  }
-}
-
-.snooze {
-  @extend %icon;
-
-  &::before {
-    content: "\e046";
-  }
-}
-
-.sort {
-  @extend %icon;
-
-  &::before {
-    content: "\e164";
-  }
-}
-
-.sort-by-alpha {
-  @extend %icon;
-
-  &::before {
-    content: "\e053";
-  }
-}
-
-.space-bar {
-  @extend %icon;
-
-  &::before {
-    content: "\e256";
-  }
-}
-
-.speaker {
-  @extend %icon;
-
-  &::before {
-    content: "\e32d";
-  }
-}
-
-.speaker-group {
-  @extend %icon;
-
-  &::before {
-    content: "\e32e";
-  }
-}
-
-.speaker-notes {
-  @extend %icon;
-
-  &::before {
-    content: "\e8cd";
-  }
-}
-
-.speaker-phone {
-  @extend %icon;
-
-  &::before {
-    content: "\e0d2";
-  }
-}
-
-.spellcheck {
-  @extend %icon;
-
-  &::before {
-    content: "\e8ce";
-  }
-}
-
-.star {
-  @extend %icon;
-
-  &::before {
-    content: "\e838";
-  }
-}
-
-.star-border {
-  @extend %icon;
-
-  &::before {
-    content: "\e83a";
-  }
-}
-
-.star-half {
-  @extend %icon;
-
-  &::before {
-    content: "\e839";
-  }
-}
-
-.stars {
-  @extend %icon;
-
-  &::before {
-    content: "\e8d0";
-  }
-}
-
-.stay-current-landscape {
-  @extend %icon;
-
-  &::before {
-    content: "\e0d3";
-  }
-}
-
-.stay-current-portrait {
-  @extend %icon;
-
-  &::before {
-    content: "\e0d4";
-  }
-}
-
-.stay-primary-landscape {
-  @extend %icon;
-
-  &::before {
-    content: "\e0d5";
-  }
-}
-
-.stay-primary-portrait {
-  @extend %icon;
-
-  &::before {
-    content: "\e0d6";
-  }
-}
-
-.stop {
-  @extend %icon;
-
-  &::before {
-    content: "\e047";
-  }
-}
-
-.storage {
-  @extend %icon;
-
-  &::before {
-    content: "\e1db";
-  }
-}
-
-.store {
-  @extend %icon;
-
-  &::before {
-    content: "\e8d1";
-  }
-}
-
-.store-mall-directory {
-  @extend %icon;
-
-  &::before {
-    content: "\e563";
-  }
-}
-
-.straighten {
-  @extend %icon;
-
-  &::before {
-    content: "\e41c";
-  }
-}
-
-.strikethrough-s {
-  @extend %icon;
-
-  &::before {
-    content: "\e257";
-  }
-}
-
-.style {
-  @extend %icon;
-
-  &::before {
-    content: "\e41d";
-  }
-}
-
-.subject {
-  @extend %icon;
-
-  &::before {
-    content: "\e8d2";
-  }
-}
-
-.subtitles {
-  @extend %icon;
-
-  &::before {
-    content: "\e048";
-  }
-}
-
-.supervisor-account {
-  @extend %icon;
-
-  &::before {
-    content: "\e8d3";
-  }
-}
-
-.surround-sound {
-  @extend %icon;
-
-  &::before {
-    content: "\e049";
-  }
-}
-
-.swap-calls {
-  @extend %icon;
-
-  &::before {
-    content: "\e0d7";
-  }
-}
-
-.swap-horiz {
-  @extend %icon;
-
-  &::before {
-    content: "\e8d4";
-  }
-}
-
-.swap-vert {
-  @extend %icon;
-
-  &::before {
-    content: "\e8d5";
-  }
-}
-
-.swap-vertical-circle {
-  @extend %icon;
-
-  &::before {
-    content: "\e8d6";
-  }
-}
-
-.switch-camera {
-  @extend %icon;
-
-  &::before {
-    content: "\e41e";
-  }
-}
-
-.switch-video {
-  @extend %icon;
-
-  &::before {
-    content: "\e41f";
-  }
-}
-
-.sync {
-  @extend %icon;
-
-  &::before {
-    content: "\e627";
-  }
-}
-
-.sync-disabled {
-  @extend %icon;
-
-  &::before {
-    content: "\e628";
-  }
-}
-
-.sync-problem {
-  @extend %icon;
-
-  &::before {
-    content: "\e629";
-  }
-}
-
-.system-update {
-  @extend %icon;
-
-  &::before {
-    content: "\e62a";
-  }
-}
-
-.system-update-alt {
-  @extend %icon;
-
-  &::before {
-    content: "\e8d7";
-  }
-}
-
-.tab {
-  @extend %icon;
-
-  &::before {
-    content: "\e8d8";
-  }
-}
-
-.tab-unselected {
-  @extend %icon;
-
-  &::before {
-    content: "\e8d9";
-  }
-}
-
-.tablet {
-  @extend %icon;
-
-  &::before {
-    content: "\e32f";
-  }
-}
-
-.tablet-android {
-  @extend %icon;
-
-  &::before {
-    content: "\e330";
-  }
-}
-
-.tablet-mac {
-  @extend %icon;
-
-  &::before {
-    content: "\e331";
-  }
-}
-
-.tag-faces {
-  @extend %icon;
-
-  &::before {
-    content: "\e420";
-  }
-}
-
-.tap-and-play {
-  @extend %icon;
-
-  &::before {
-    content: "\e62b";
-  }
-}
-
-.terrain {
-  @extend %icon;
-
-  &::before {
-    content: "\e564";
-  }
-}
-
-.text-format {
-  @extend %icon;
-
-  &::before {
-    content: "\e165";
-  }
-}
-
-.textsms {
-  @extend %icon;
-
-  &::before {
-    content: "\e0d8";
-  }
-}
-
-.texture {
-  @extend %icon;
-
-  &::before {
-    content: "\e421";
-  }
-}
-
-.theaters {
-  @extend %icon;
-
-  &::before {
-    content: "\e8da";
-  }
-}
-
-.thumb-down {
-  @extend %icon;
-
-  &::before {
-    content: "\e8db";
-  }
-}
-
-.thumb-up {
-  @extend %icon;
-
-  &::before {
-    content: "\e8dc";
-  }
-}
-
-.thumbs-up-down {
-  @extend %icon;
-
-  &::before {
-    content: "\e8dd";
-  }
-}
-
-.time-to-leave {
-  @extend %icon;
-
-  &::before {
-    content: "\e62c";
-  }
-}
-
-.timelapse {
-  @extend %icon;
-
-  &::before {
-    content: "\e422";
-  }
-}
-
-.timer {
-  @extend %icon;
-
-  &::before {
-    content: "\e425";
-  }
-}
-
-.timer-10 {
-  @extend %icon;
-
-  &::before {
-    content: "\e423";
-  }
-}
-
-.timer-3 {
-  @extend %icon;
-
-  &::before {
-    content: "\e424";
-  }
-}
-
-.timer-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e426";
-  }
-}
-
-.toc {
-  @extend %icon;
-
-  &::before {
-    content: "\e8de";
-  }
-}
-
-.today {
-  @extend %icon;
-
-  &::before {
-    content: "\e8df";
-  }
-}
-
-.toll {
-  @extend %icon;
-
-  &::before {
-    content: "\e8e0";
-  }
-}
-
-.tonality {
-  @extend %icon;
-
-  &::before {
-    content: "\e427";
-  }
-}
-
-.toys {
-  @extend %icon;
-
-  &::before {
-    content: "\e332";
-  }
-}
-
-.track-changes {
-  @extend %icon;
-
-  &::before {
-    content: "\e8e1";
-  }
-}
-
-.traffic {
-  @extend %icon;
-
-  &::before {
-    content: "\e565";
-  }
-}
-
-.transform {
-  @extend %icon;
-
-  &::before {
-    content: "\e428";
-  }
-}
-
-.translate {
-  @extend %icon;
-
-  &::before {
-    content: "\e8e2";
-  }
-}
-
-.trending-down {
-  @extend %icon;
-
-  &::before {
-    content: "\e8e3";
-  }
-}
-
-.trending-flat {
-  @extend %icon;
-
-  &::before {
-    content: "\e8e4";
-  }
-}
-
-.trending-up {
-  @extend %icon;
-
-  &::before {
-    content: "\e8e5";
-  }
-}
-
-.tune {
-  @extend %icon;
-
-  &::before {
-    content: "\e429";
-  }
-}
-
-.turned-in {
-  @extend %icon;
-
-  &::before {
-    content: "\e8e6";
-  }
-}
-
-.turned-in-not {
-  @extend %icon;
-
-  &::before {
-    content: "\e8e7";
-  }
-}
-
-.tv {
-  @extend %icon;
-
-  &::before {
-    content: "\e333";
-  }
-}
-
-.undo {
-  @extend %icon;
-
-  &::before {
-    content: "\e166";
-  }
-}
-
-.unfold-less {
-  @extend %icon;
-
-  &::before {
-    content: "\e5d6";
-  }
-}
-
-.unfold-more {
-  @extend %icon;
-
-  &::before {
-    content: "\e5d7";
-  }
-}
-
-.usb {
-  @extend %icon;
-
-  &::before {
-    content: "\e1e0";
-  }
-}
-
-.verified-user {
-  @extend %icon;
-
-  &::before {
-    content: "\e8e8";
-  }
-}
-
-.vertical-align-bottom {
-  @extend %icon;
-
-  &::before {
-    content: "\e258";
-  }
-}
-
-.vertical-align-center {
-  @extend %icon;
-
-  &::before {
-    content: "\e259";
-  }
-}
-
-.vertical-align-top {
-  @extend %icon;
-
-  &::before {
-    content: "\e25a";
-  }
-}
-
-.vibration {
-  @extend %icon;
-
-  &::before {
-    content: "\e62d";
-  }
-}
-
-.video-library {
-  @extend %icon;
-
-  &::before {
-    content: "\e04a";
-  }
-}
-
-.videocam {
-  @extend %icon;
-
-  &::before {
-    content: "\e04b";
-  }
-}
-
-.videocam-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e04c";
-  }
-}
-
-.view-agenda {
-  @extend %icon;
-
-  &::before {
-    content: "\e8e9";
-  }
-}
-
-.view-array {
-  @extend %icon;
-
-  &::before {
-    content: "\e8ea";
-  }
-}
-
-.view-carousel {
-  @extend %icon;
-
-  &::before {
-    content: "\e8eb";
-  }
-}
-
-.view-column {
-  @extend %icon;
-
-  &::before {
-    content: "\e8ec";
-  }
-}
-
-.view-comfy {
-  @extend %icon;
-
-  &::before {
-    content: "\e42a";
-  }
-}
-
-.view-compact {
-  @extend %icon;
-
-  &::before {
-    content: "\e42b";
-  }
-}
-
-.view-day {
-  @extend %icon;
-
-  &::before {
-    content: "\e8ed";
-  }
-}
-
-.view-headline {
-  @extend %icon;
-
-  &::before {
-    content: "\e8ee";
-  }
-}
-
-.view-list {
-  @extend %icon;
-
-  &::before {
-    content: "\e8ef";
-  }
-}
-
-.view-module {
-  @extend %icon;
-
-  &::before {
-    content: "\e8f0";
-  }
-}
-
-.view-quilt {
-  @extend %icon;
-
-  &::before {
-    content: "\e8f1";
-  }
-}
-
-.view-stream {
-  @extend %icon;
-
-  &::before {
-    content: "\e8f2";
-  }
-}
-
-.view-week {
-  @extend %icon;
-
-  &::before {
-    content: "\e8f3";
-  }
-}
-
-.vignette {
-  @extend %icon;
-
-  &::before {
-    content: "\e435";
-  }
-}
-
-.visibility {
-  @extend %icon;
-
-  &::before {
-    content: "\e8f4";
-  }
-}
-
-.visibility-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e8f5";
-  }
-}
-
-.voice-chat {
-  @extend %icon;
-
-  &::before {
-    content: "\e62e";
-  }
-}
-
-.voicemail {
-  @extend %icon;
-
-  &::before {
-    content: "\e0d9";
-  }
-}
-
-.volume-down {
-  @extend %icon;
-
-  &::before {
-    content: "\e04d";
-  }
-}
-
-.volume-mute {
-  @extend %icon;
-
-  &::before {
-    content: "\e04e";
-  }
-}
-
-.volume-off {
-  @extend %icon;
-
-  &::before {
-    content: "\e04f";
-  }
-}
-
-.volume-up {
-  @extend %icon;
-
-  &::before {
-    content: "\e050";
-  }
-}
-
-.vpn-key {
-  @extend %icon;
-
-  &::before {
-    content: "\e0da";
-  }
-}
-
-.vpn-lock {
-  @extend %icon;
-
-  &::before {
-    content: "\e62f";
-  }
-}
-
-.wallpaper {
-  @extend %icon;
-
-  &::before {
-    content: "\e1bc";
-  }
-}
-
-.warning {
-  @extend %icon;
-
-  &::before {
-    content: "\e002";
-  }
-}
-
-.watch {
-  @extend %icon;
-
-  &::before {
-    content: "\e334";
-  }
-}
-
-.wb-auto {
-  @extend %icon;
-
-  &::before {
-    content: "\e42c";
-  }
-}
-
-.wb-cloudy {
-  @extend %icon;
-
-  &::before {
-    content: "\e42d";
-  }
-}
-
-.wb-incandescent {
-  @extend %icon;
-
-  &::before {
-    content: "\e42e";
-  }
-}
-
-.wb-iridescent {
-  @extend %icon;
-
-  &::before {
-    content: "\e436";
-  }
-}
-
-.wb-sunny {
-  @extend %icon;
-
-  &::before {
-    content: "\e430";
-  }
-}
-
-.wc {
-  @extend %icon;
-
-  &::before {
-    content: "\e63d";
-  }
-}
-
-.web {
-  @extend %icon;
-
-  &::before {
-    content: "\e051";
-  }
-}
-
-.whatshot {
-  @extend %icon;
-
-  &::before {
-    content: "\e80e";
-  }
-}
-
-.widgets {
-  @extend %icon;
-
-  &::before {
-    content: "\e1bd";
-  }
-}
-
-.wifi {
-  @extend %icon;
-
-  &::before {
-    content: "\e63e";
-  }
-}
-
-.wifi-lock {
-  @extend %icon;
-
-  &::before {
-    content: "\e1e1";
-  }
-}
-
-.wifi-tethering {
-  @extend %icon;
-
-  &::before {
-    content: "\e1e2";
-  }
-}
-
-.work {
-  @extend %icon;
-
-  &::before {
-    content: "\e8f9";
-  }
-}
-
-.wrap-text {
-  @extend %icon;
-
-  &::before {
-    content: "\e25b";
-  }
-}
-
-.youtube-searched-for {
-  @extend %icon;
-
-  &::before {
-    content: "\e8fa";
-  }
-}
-
-.zoom-in {
-  @extend %icon;
-
-  &::before {
-    content: "\e8ff";
-  }
-}
-
-.zoom-out {
-  @extend %icon;
-
-  &::before {
-    content: "\e900";
-  }
-}

From 4cb7fe1f55f34a82206f406b2019dfabfa43b571 Mon Sep 17 00:00:00 2001
From: Nathan Marks <nathan@poweredbysearch.com>
Date: Sun, 22 Nov 2015 11:59:51 -0500
Subject: [PATCH 0152/1024] Added icon font stylesheet to index.html for docs
 and spec

---
 docs/www/index.html | 1 +
 spec/index.html     | 1 +
 2 files changed, 2 insertions(+)

diff --git a/docs/www/index.html b/docs/www/index.html
index 29b5b8fad..d31b206d5 100644
--- a/docs/www/index.html
+++ b/docs/www/index.html
@@ -27,6 +27,7 @@
     <meta name="og:type" content="app">
 
     <link rel="canonical" href="http://www.react-toolbox.com/">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link rel="stylesheet" href="http://github.com/docs.css">
   </head>
 
diff --git a/spec/index.html b/spec/index.html
index a5b808ba8..b4560da91 100644
--- a/spec/index.html
+++ b/spec/index.html
@@ -13,6 +13,7 @@
     <meta name="format-detection" content="telephone=no">
     <meta name="HandheldFriendly" content="True">
     <meta http-equiv="cleartype" content="on">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link rel="stylesheet" href="http://github.com/build/spec.css">
   </head>
   <body>

From 6206e70183ff63f4eb1a025332ee8037dc0ad0b2 Mon Sep 17 00:00:00 2001
From: Nathan Marks <nathan@poweredbysearch.com>
Date: Sun, 22 Nov 2015 17:41:00 -0500
Subject: [PATCH 0153/1024] Moved updated fonticon to new file

---
 components/font_icon/FontIcon.jsx | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/components/font_icon/FontIcon.jsx b/components/font_icon/FontIcon.jsx
index 3e7e6fdf4..357a322ea 100644
--- a/components/font_icon/FontIcon.jsx
+++ b/components/font_icon/FontIcon.jsx
@@ -1,18 +1,24 @@
 import React from 'react';
-import style from './style';
+import ClassNames from 'classnames';
+
+const FontIcon = ({
+  children,
+  className,
+  value,
+  ...otherProps
+}) => {
+
+  const classes = ClassNames('material-icons', className);
 
-const FontIcon = props => {
-  let className = style[props.value];
-  if (props.className) className += ` ${props.className}`;
   return (
-    <i data-react-toolbox='icon' {...props} className={className}>
-      {props.children}
-    </i>
+    <span className={classes} {...otherProps} >
+      {value ? value : children}
+    </span>
   );
 };
 
 FontIcon.propTypes = {
-  children: React.PropTypes.any,
+  children: React.PropTypes.string,
   className: React.PropTypes.string,
   value: React.PropTypes.string
 };

From f3d047e82037f2779e07b80ff0627d4804cdb9e8 Mon Sep 17 00:00:00 2001
From: Nathan Marks <nathan@poweredbysearch.com>
Date: Sun, 22 Nov 2015 17:49:46 -0500
Subject: [PATCH 0154/1024] Remove jsx extension from component index files,
 replace with js

---
 components/app/{index.jsx => index.js}          | 0
 components/app_bar/{index.jsx => index.js}      | 0
 components/autocomplete/{index.jsx => index.js} | 0
 components/button/{index.jsx => index.js}       | 0
 components/checkbox/{index.jsx => index.js}     | 0
 components/date_picker/{index.jsx => index.js}  | 0
 components/dialog/{index.jsx => index.js}       | 0
 components/drawer/{index.jsx => index.js}       | 0
 components/dropdown/{index.jsx => index.js}     | 0
 components/font_icon/{index.jsx => index.js}    | 0
 components/form/{index.jsx => index.js}         | 0
 components/input/{index.jsx => index.js}        | 0
 components/link/{index.jsx => index.js}         | 0
 components/list/{index.jsx => index.js}         | 0
 components/menu/{index.jsx => index.js}         | 0
 components/navigation/{index.jsx => index.js}   | 0
 components/overlay/{index.jsx => index.js}      | 0
 components/progress_bar/{index.jsx => index.js} | 0
 components/radio/{index.jsx => index.js}        | 0
 components/ripple/{index.jsx => index.js}       | 0
 components/slider/{index.jsx => index.js}       | 0
 components/snackbar/{index.jsx => index.js}     | 0
 components/switch/{index.jsx => index.js}       | 0
 components/table/{index.jsx => index.js}        | 0
 components/tabs/{index.jsx => index.js}         | 0
 components/time_picker/{index.jsx => index.js}  | 0
 components/tooltip/{index.jsx => index.js}      | 0
 27 files changed, 0 insertions(+), 0 deletions(-)
 rename components/app/{index.jsx => index.js} (100%)
 rename components/app_bar/{index.jsx => index.js} (100%)
 rename components/autocomplete/{index.jsx => index.js} (100%)
 rename components/button/{index.jsx => index.js} (100%)
 rename components/checkbox/{index.jsx => index.js} (100%)
 rename components/date_picker/{index.jsx => index.js} (100%)
 rename components/dialog/{index.jsx => index.js} (100%)
 rename components/drawer/{index.jsx => index.js} (100%)
 rename components/dropdown/{index.jsx => index.js} (100%)
 rename components/font_icon/{index.jsx => index.js} (100%)
 rename components/form/{index.jsx => index.js} (100%)
 rename components/input/{index.jsx => index.js} (100%)
 rename components/link/{index.jsx => index.js} (100%)
 rename components/list/{index.jsx => index.js} (100%)
 rename components/menu/{index.jsx => index.js} (100%)
 rename components/navigation/{index.jsx => index.js} (100%)
 rename components/overlay/{index.jsx => index.js} (100%)
 rename components/progress_bar/{index.jsx => index.js} (100%)
 rename components/radio/{index.jsx => index.js} (100%)
 rename components/ripple/{index.jsx => index.js} (100%)
 rename components/slider/{index.jsx => index.js} (100%)
 rename components/snackbar/{index.jsx => index.js} (100%)
 rename components/switch/{index.jsx => index.js} (100%)
 rename components/table/{index.jsx => index.js} (100%)
 rename components/tabs/{index.jsx => index.js} (100%)
 rename components/time_picker/{index.jsx => index.js} (100%)
 rename components/tooltip/{index.jsx => index.js} (100%)

diff --git a/components/app/index.jsx b/components/app/index.js
similarity index 100%
rename from components/app/index.jsx
rename to components/app/index.js
diff --git a/components/app_bar/index.jsx b/components/app_bar/index.js
similarity index 100%
rename from components/app_bar/index.jsx
rename to components/app_bar/index.js
diff --git a/components/autocomplete/index.jsx b/components/autocomplete/index.js
similarity index 100%
rename from components/autocomplete/index.jsx
rename to components/autocomplete/index.js
diff --git a/components/button/index.jsx b/components/button/index.js
similarity index 100%
rename from components/button/index.jsx
rename to components/button/index.js
diff --git a/components/checkbox/index.jsx b/components/checkbox/index.js
similarity index 100%
rename from components/checkbox/index.jsx
rename to components/checkbox/index.js
diff --git a/components/date_picker/index.jsx b/components/date_picker/index.js
similarity index 100%
rename from components/date_picker/index.jsx
rename to components/date_picker/index.js
diff --git a/components/dialog/index.jsx b/components/dialog/index.js
similarity index 100%
rename from components/dialog/index.jsx
rename to components/dialog/index.js
diff --git a/components/drawer/index.jsx b/components/drawer/index.js
similarity index 100%
rename from components/drawer/index.jsx
rename to components/drawer/index.js
diff --git a/components/dropdown/index.jsx b/components/dropdown/index.js
similarity index 100%
rename from components/dropdown/index.jsx
rename to components/dropdown/index.js
diff --git a/components/font_icon/index.jsx b/components/font_icon/index.js
similarity index 100%
rename from components/font_icon/index.jsx
rename to components/font_icon/index.js
diff --git a/components/form/index.jsx b/components/form/index.js
similarity index 100%
rename from components/form/index.jsx
rename to components/form/index.js
diff --git a/components/input/index.jsx b/components/input/index.js
similarity index 100%
rename from components/input/index.jsx
rename to components/input/index.js
diff --git a/components/link/index.jsx b/components/link/index.js
similarity index 100%
rename from components/link/index.jsx
rename to components/link/index.js
diff --git a/components/list/index.jsx b/components/list/index.js
similarity index 100%
rename from components/list/index.jsx
rename to components/list/index.js
diff --git a/components/menu/index.jsx b/components/menu/index.js
similarity index 100%
rename from components/menu/index.jsx
rename to components/menu/index.js
diff --git a/components/navigation/index.jsx b/components/navigation/index.js
similarity index 100%
rename from components/navigation/index.jsx
rename to components/navigation/index.js
diff --git a/components/overlay/index.jsx b/components/overlay/index.js
similarity index 100%
rename from components/overlay/index.jsx
rename to components/overlay/index.js
diff --git a/components/progress_bar/index.jsx b/components/progress_bar/index.js
similarity index 100%
rename from components/progress_bar/index.jsx
rename to components/progress_bar/index.js
diff --git a/components/radio/index.jsx b/components/radio/index.js
similarity index 100%
rename from components/radio/index.jsx
rename to components/radio/index.js
diff --git a/components/ripple/index.jsx b/components/ripple/index.js
similarity index 100%
rename from components/ripple/index.jsx
rename to components/ripple/index.js
diff --git a/components/slider/index.jsx b/components/slider/index.js
similarity index 100%
rename from components/slider/index.jsx
rename to components/slider/index.js
diff --git a/components/snackbar/index.jsx b/components/snackbar/index.js
similarity index 100%
rename from components/snackbar/index.jsx
rename to components/snackbar/index.js
diff --git a/components/switch/index.jsx b/components/switch/index.js
similarity index 100%
rename from components/switch/index.jsx
rename to components/switch/index.js
diff --git a/components/table/index.jsx b/components/table/index.js
similarity index 100%
rename from components/table/index.jsx
rename to components/table/index.js
diff --git a/components/tabs/index.jsx b/components/tabs/index.js
similarity index 100%
rename from components/tabs/index.jsx
rename to components/tabs/index.js
diff --git a/components/time_picker/index.jsx b/components/time_picker/index.js
similarity index 100%
rename from components/time_picker/index.jsx
rename to components/time_picker/index.js
diff --git a/components/tooltip/index.jsx b/components/tooltip/index.js
similarity index 100%
rename from components/tooltip/index.jsx
rename to components/tooltip/index.js

From 5c8330ac7d490239b8dc12d05c34b5f6aa9729a5 Mon Sep 17 00:00:00 2001
From: Nathan Marks <nathan@poweredbysearch.com>
Date: Sun, 22 Nov 2015 17:57:10 -0500
Subject: [PATCH 0155/1024] Reverted to previous spec root.jsx

---
 spec/components/card.jsx | 14 +++++++-------
 spec/root.jsx            | 21 +++++++++++++++++++--
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/spec/components/card.jsx b/spec/components/card.jsx
index 567a71a4f..6c5885590 100644
--- a/spec/components/card.jsx
+++ b/spec/components/card.jsx
@@ -155,7 +155,7 @@ const avatar = [
           <iframe width="1280" height="720" src="https://www.youtube.com/embed/sGbxmsDFVnE?rel=0&amp;showinfo=0" frameBorder="0" allowFullScreen></iframe>
         </CardMedia>
         <CardActions style={{ justifyContent: 'flex-end' }}>
-          <Button toggle icon="report-problem" />
+          <Button toggle icon="report_problem" />
           <Spacer/>
           <Button toggle icon="share" />
           <Button toggle icon="favorite" />
@@ -217,9 +217,9 @@ const small = [
           <CardTitle>Test</CardTitle>
         </CardMedia>
         <CardActions style={{justifyContent: 'center'}}>
-          <Button toggle icon="thumb-down" />
-          <Button toggle icon="thumb-up" />
-          <Button toggle icon="turned-in-not" />
+          <Button toggle icon="thumb_down" />
+          <Button toggle icon="thumb_up" />
+          <Button toggle icon="turned_in_not" />
         </CardActions>
       </Card>
     )
@@ -233,9 +233,9 @@ const small = [
           image="https://placeimg.com/280/280/people"
         >
           <CardActions style={{justifyContent: 'center'}}>
-            <Button inverse toggle icon="fast-rewind" />
-            <Button inverse toggle icon="play-arrow" />
-            <Button inverse toggle icon="fast-forward" />
+            <Button inverse toggle icon="fast_rewind" />
+            <Button inverse toggle icon="play_arrow" />
+            <Button inverse toggle icon="fast_forward" />
           </CardActions>
         </CardMedia>
       </Card>
diff --git a/spec/root.jsx b/spec/root.jsx
index 04dd63de0..e2b025e68 100644
--- a/spec/root.jsx
+++ b/spec/root.jsx
@@ -42,9 +42,26 @@ const Root = () => (
       />
     </AppBarToolbox>
 
-
+    <Autocomplete />
+    <Button />
     <Card />
-
+    <Checkbox />
+    <Dialog />
+    <Drawer />
+    <Dropdown />
+    <IconMenu />
+    <Input />
+    <List />
+    <Menu />
+    <Pickers />
+    <Progress />
+    <Radio />
+    <Slider />
+    <Snackbar />
+    <Switch />
+    <Table />
+    <Tabs />
+    <Tooltip />
   </App>
 );
 

From 4ceee8d0dca6736faff344a62578dce095379c9a Mon Sep 17 00:00:00 2001
From: Nathan Marks <nathan@poweredbysearch.com>
Date: Sun, 22 Nov 2015 21:43:15 -0500
Subject: [PATCH 0156/1024] Added script to auto add component definitions to
 bottom of readme

---
 components/card/Card.jsx  |  5 +++
 components/card/readme.md | 15 +------
 package.json              |  3 ++
 tools/buildReadme.js      | 87 +++++++++++++++++++++++++++++++++++++++
 tools/generateMarkdown.js | 75 +++++++++++++++++++++++++++++++++
 5 files changed, 171 insertions(+), 14 deletions(-)
 create mode 100755 tools/buildReadme.js
 create mode 100644 tools/generateMarkdown.js

diff --git a/components/card/Card.jsx b/components/card/Card.jsx
index 89c7d5fc4..96fef0082 100644
--- a/components/card/Card.jsx
+++ b/components/card/Card.jsx
@@ -2,6 +2,10 @@ import React, { PropTypes } from 'react';
 import ClassNames from 'classnames';
 import style from './style';
 
+/**
+ * The base card component. This acts as the main card element
+ * that all subcomponents are placed within.
+ */
 const Card = ({
     children,
     className,
@@ -23,6 +27,7 @@ const Card = ({
 Card.propTypes = {
   children: PropTypes.any,
   className: PropTypes.string,
+  /** Increases the shadow depth */
   raised: PropTypes.bool
 };
 
diff --git a/components/card/readme.md b/components/card/readme.md
index 30ba692f0..8d5fb774f 100644
--- a/components/card/readme.md
+++ b/components/card/readme.md
@@ -22,17 +22,4 @@ const TestCards = () => (
 );
 ```
 
-## Properties
-
-| Name              | Type          | Default         | Description|
-|:-----|:-----|:-----|:-----|
-| `actions`       | `Array`        |               | Array of objects describing actions. These actions will be rendered as buttons and the object fields will be transferred to those.|
-| `className`     | `String`        |     `''`            | Sets a class to give customized styles to the card.|
-| `color`         | `String`        |                 | Sets HEX or RGBA color to add a colored layer to the heading.|
-| `image`         | `String`        |                 | URL to sets a background image in the heading.|
-| `loading`       | `Boolean`       | `false`                | If true, component will be disabled and showing a loading animation.|
-| `onClick`       | `Function`      |                 | Callback function that is fired when the components's is clicked. It also will display a ripple effect on click. |
-| `subtitle`      | `String`        |                 | Sets a complementary smaller text under the title.|
-| `text`          | `String`        |                 | Sets a complementary text display as a card description.|
-| `title`         | `String`        |           | Sets the title of the card.|
-| `type`          | `String`        | `default`          | Type of the component to display general modifications. It can be `wide` for a larger card, `image` if it's an image card or `event` which shows just a title on top. |
+<!--component-docgen-start-->
diff --git a/package.json b/package.json
index 99b7f0331..4cc899ea9 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "babel-eslint": "^4.1.5",
     "babel-loader": "^5.3.2",
     "babel-plugin-react-transform": "^1.1.1",
+    "bluebird": "^3.0.5",
     "classnames": "^2.2.0",
     "core-js": "^1.2.6",
     "cpx": "^1.2.1",
@@ -67,6 +68,7 @@
     "expect": "^1.8.0",
     "express": "^4.13.3",
     "extract-text-webpack-plugin": "^0.8.2",
+    "glob": "^6.0.1",
     "karma": "^0.13.3",
     "karma-chrome-launcher": "^0.2.0",
     "karma-cli": "^0.1.0",
@@ -82,6 +84,7 @@
     "react": "^0.14",
     "react-addons-css-transition-group": "^0.14.0",
     "react-addons-test-utils": "^0.14.0",
+    "react-docgen": "^2.4.0",
     "react-dom": "^0.14.0",
     "react-transform-catch-errors": "^1.0.0",
     "react-transform-hmr": "^1.0.1",
diff --git a/tools/buildReadme.js b/tools/buildReadme.js
new file mode 100755
index 000000000..c2d43a81a
--- /dev/null
+++ b/tools/buildReadme.js
@@ -0,0 +1,87 @@
+import Fs from 'fs';
+import GenerateMarkdown from './generateMarkdown';
+import Glob from 'glob';
+import Path from 'path';
+import { parse as ParseComponent } from 'react-docgen';
+import Promise from 'bluebird';
+
+const getComponentName = (filepath) => {
+  let name = Path.basename(filepath);
+  let ext;
+  while ((ext = Path.extname(name))) {
+    name = name.substring(0, name.length - ext.length);
+  }
+  return name;
+};
+
+const componentGlob = Path.join(process.argv[2], '/*.jsx');
+
+new Promise((resolve, reject) => {
+  Glob(componentGlob, (err, files) => {
+    if (err) {
+      return reject(err);
+    }
+
+    return resolve(files);
+  });
+}).then(filePaths => {
+  const files = {};
+
+  filePaths.forEach(path => {
+    files[getComponentName(path)] = new Promise((resolveRead, rejectRead) => {
+      Fs.readFile(path, 'utf8', (err, data) => {
+        if (err) {
+          return rejectRead(err);
+        }
+
+        return resolveRead(data);
+      });
+    });
+  });
+
+  return Promise.props(files);
+}).then(fulfillments => {
+  for (const componentName in fulfillments) {
+    fulfillments[componentName] = ParseComponent(fulfillments[componentName]);
+  }
+
+  return fulfillments;
+}).then(fulfillments => {
+  let markdown = '';
+
+  for (const componentName in fulfillments) {
+    const reactAPI = fulfillments[componentName];
+    markdown = markdown.concat(GenerateMarkdown(componentName, reactAPI)).concat('\n\n');
+  }
+
+  return markdown;
+}).then(markdown => {
+  return new Promise((resolve, reject) => {
+
+    Fs.readFile(Path.join(process.argv[2], '/readme.md'), 'utf8', (err, contents) => {
+      if (err) {
+        return reject(err);
+      }
+
+      const contentLines = contents.split('\n');
+      const introLines = [];
+
+      contentLines.some(line => {
+        introLines.push(line);
+
+        if (line === '<!--component-docgen-start-->') {
+          introLines.push('\n');
+          return true;
+        }
+
+      });
+
+      const newMarkdown = introLines.join('\n').concat(markdown);
+
+      return resolve(newMarkdown);
+    });
+
+  });
+}).then(newMarkdown => {
+  Fs.writeFileSync(Path.join(process.argv[2], '/readme.md'), newMarkdown);
+});
diff --git a/tools/generateMarkdown.js b/tools/generateMarkdown.js
new file mode 100644
index 000000000..9b18389b8
--- /dev/null
+++ b/tools/generateMarkdown.js
@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) 2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * Converted to ES6 by Nathan Marks <info@nathanmarks.io>
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+// function stringOfLength (string, length) {
+//   let newString = '';
+//   for (let i = 0; i < length; i++) {
+//     newString += string;
+//   }
+//   return newString;
+// }
+
+function generateTitle (name) {
+  return `## ${name}`;
+}
+
+function generateDesciption (description) {
+  return description + '\n';
+}
+
+function generatePropType (type) {
+  let values;
+  if (Array.isArray(type.value)) {
+    values = '(' +
+      type.value.map(function (typeValue) {
+        return typeValue.name || typeValue.value;
+      }).join('|') +
+      ')';
+  } else {
+    values = type.value;
+  }
+
+  return '`' + type.name + (values ? values : '') + '`';
+}
+
+function generateProp (propName, prop) {
+  return (
+    `| \`${propName}\` ${prop.required ? '(required)' : ''}` +
+    `| ${(prop.type ? generatePropType(prop.type) : '')} ` +
+    `| ${(prop.defaultValue ? `\`${prop.defaultValue}\`` : '')} ` +
+    `| ${(prop.description ? prop.description : '')} ` +
+    '|'
+  );
+}
+
+function generateProps (props) {
+  const title = '##### Props';
+
+  return (
+    `${title}\n` +
+    '| Name | Type | Default | Description |\n' +
+    '|:-----|:-----|:-----|:-----|\n' +
+    Object.keys(props).sort().map(propName => {
+      return generateProp(propName, props[propName]);
+    }).join('\n')
+  );
+}
+
+function generateMarkdown (name, reactAPI) {
+  const markdownString =
+    generateTitle(name) + '\n' +
+    (reactAPI.description ? generateDesciption(reactAPI.description) + '\n' : '\n') +
+    generateProps(reactAPI.props);
+
+  return markdownString;
+}
+
+module.exports = generateMarkdown;

From 987feb8a028fe0a269412e378229348b58f56692 Mon Sep 17 00:00:00 2001
From: Nathan Marks <nathan@poweredbysearch.com>
Date: Sun, 22 Nov 2015 23:19:26 -0500
Subject: [PATCH 0157/1024] Working on card documentation

---
 components/card/Card.jsx                   |  5 +-
 components/card/CardActions.jsx            |  6 ++
 components/card/CardMedia.jsx              | 22 +++++-
 components/card/CardText.jsx               |  4 ++
 components/card/CardTitle.jsx              | 27 +++++---
 components/card/readme.md                  | 74 ++++++++++++++++++++
 components/index.js                        | 78 ++++++++++------------
 docs/app/components/layout/home/index.jsx  |  2 +-
 docs/app/components/layout/main/style.scss |  5 ++
 tools/buildReadme.js                       |  4 +-
 tools/generateMarkdown.js                  | 37 ++++------
 11 files changed, 182 insertions(+), 82 deletions(-)

diff --git a/components/card/Card.jsx b/components/card/Card.jsx
index 96fef0082..455c78840 100644
--- a/components/card/Card.jsx
+++ b/components/card/Card.jsx
@@ -3,7 +3,7 @@ import ClassNames from 'classnames';
 import style from './style';
 
 /**
- * The base card component. This acts as the main card element
+ * The base card component. This acts as the main card container
  * that all subcomponents are placed within.
  */
 const Card = ({
@@ -25,9 +25,10 @@ const Card = ({
 };
 
 Card.propTypes = {
+  /** Child components, usually Card subcomponents. */
   children: PropTypes.any,
   className: PropTypes.string,
-  /** Increases the shadow depth */
+  /** Increases the shadow depth to appear elevated. */
   raised: PropTypes.bool
 };
 
diff --git a/components/card/CardActions.jsx b/components/card/CardActions.jsx
index a71756c8a..38eefb358 100644
--- a/components/card/CardActions.jsx
+++ b/components/card/CardActions.jsx
@@ -2,6 +2,12 @@ import React, { PropTypes, Component } from 'react';
 import ClassNames from 'classnames';
 import style from './style';
 
+/**
+ * This component is used as a container for supplemental
+ * card actions. Supplemental actions within the card are
+ * explicitly called out using icons, text, and UI controls,
+ * typically placed at the bottom of the card.
+ */
 class CardActions extends Component {
 
   static propTypes = {
diff --git a/components/card/CardMedia.jsx b/components/card/CardMedia.jsx
index 7bac762d6..0be58c78a 100644
--- a/components/card/CardMedia.jsx
+++ b/components/card/CardMedia.jsx
@@ -2,17 +2,35 @@ import React, { PropTypes, Component } from 'react';
 import ClassNames from 'classnames';
 import style from './style';
 
+/**
+ * Used for displaying media such as images or videos
+ * on a card. Can also be used with a solid background
+ * color instead of an image.
+ */
 class CardMedia extends Component {
 
   static propTypes = {
+    /**
+     * Forces a 16:9 or 1:1 aspect ratio respectively. Unset, the media area will have a flexible height.
+     */
     aspectRatio: PropTypes.oneOf([ 'wide', 'square' ]),
-    children: PropTypes.node,
+    /**
+     * Usually an image/video element or a `<CardTitle>` component.
+     */
+    children: PropTypes.any,
     className: PropTypes.string,
+    /** Sets the background color */
     color: PropTypes.string,
+    /**
+     * Creates a dark overlay underneath the child components.
+     */
     contentOverlay: PropTypes.bool,
+    /**
+     * Can be used instead of children. Accepts an element or a URL string.
+     */
     image: PropTypes.oneOfType([
       PropTypes.string,
-      PropTypes.node
+      PropTypes.element
     ])
   }
 
diff --git a/components/card/CardText.jsx b/components/card/CardText.jsx
index 4fc38e01b..0a0b12bdb 100644
--- a/components/card/CardText.jsx
+++ b/components/card/CardText.jsx
@@ -2,6 +2,10 @@ import React, { PropTypes, Component } from 'react';
 import ClassNames from 'classnames';
 import style from './style';
 
+/**
+ * Basic card content container. Good for
+ * small descriptions or other supplementary text.
+ */
 class CardText extends Component {
 
   static propTypes = {
diff --git a/components/card/CardTitle.jsx b/components/card/CardTitle.jsx
index 1fd4c9171..268aa47c8 100644
--- a/components/card/CardTitle.jsx
+++ b/components/card/CardTitle.jsx
@@ -3,16 +3,20 @@ import ClassNames from 'classnames';
 import { Avatar } from '../avatar';
 import style from './style';
 
-const CardTitle = (props) => {
-
-  const {
-    avatar,
-    children,
-    className,
-    subtitle,
-    title,
-    ...otherProps
-  } = props;
+/**
+ * A versatile title block that can be used in
+ * various places on the card, including the media
+ * area. This component can also display an avatar next
+ * to the title content.
+ */
+const CardTitle = ({
+  avatar,
+  children,
+  className,
+  subtitle,
+  title,
+  ...otherProps
+}) => {
 
   const classes = ClassNames(style.cardTitle, {
     [style.small]: avatar,
@@ -53,7 +57,8 @@ CardTitle.propTypes = {
   ]),
   children: PropTypes.oneOfType([
     PropTypes.string,
-    PropTypes.element
+    PropTypes.element,
+    PropTypes.array
   ]),
   className: PropTypes.string,
   subtitle: PropTypes.string,
diff --git a/components/card/readme.md b/components/card/readme.md
index 8d5fb774f..0a5402ee8 100644
--- a/components/card/readme.md
+++ b/components/card/readme.md
@@ -23,3 +23,77 @@ const TestCards = () => (
 ```
 
 <!--component-docgen-start-->
+
+## Card `<Card/>`
+The base card component. This acts as the main card container
+that all subcomponents are placed within.
+
+### Properties
+| Name | Type | Default | Description |
+|:-----|:-----|:-----|:-----|
+| `children` | `any` |  | Child components, usually Card subcomponents. |
+| `className` | `string` |  | Additional class(es) for custom styling. |
+| `raised` | `bool` |  | Increases the shadow depth to appear elevated. |
+
+------------------------------------------------------------------
+
+## CardActions `<CardActions/>`
+This component is used as a container for supplemental
+card actions. Supplemental actions within the card are
+explicitly called out using icons, text, and UI controls,
+typically placed at the bottom of the card.
+
+### Properties
+| Name | Type | Default | Description |
+|:-----|:-----|:-----|:-----|
+| `children` | `any` |  | Children to pass through the component. |
+| `className` | `string` |  | Additional class(es) for custom styling. |
+
+------------------------------------------------------------------
+
+## CardMedia `<CardMedia/>`
+Used for displaying media such as images or videos
+on a card. Can also be used with a solid background
+color instead of an image.
+
+### Properties
+| Name | Type | Default | Description |
+|:-----|:-----|:-----|:-----|
+| `aspectRatio` | `enum`(`'wide'`,`'square'`) |  | Forces a 16:9 or 1:1 aspect ratio respectively. Unset, the media area will have a flexible height. |
+| `children` | `any` |  | Usually an image/video element or a `<CardTitle>` component. |
+| `className` | `string` |  | Additional class(es) for custom styling. |
+| `color` | `string` |  | Sets the background color |
+| `contentOverlay` | `bool` |  | Creates a dark overlay underneath the child components. |
+| `image` | `union`(`string`,`element`) |  | Can be used instead of children. Accepts an element or a URL string. |
+
+------------------------------------------------------------------
+
+## CardText `<CardText/>`
+Basic card content container. Good for
+small descriptions or other supplementary text.
+
+### Properties
+| Name | Type | Default | Description |
+|:-----|:-----|:-----|:-----|
+| `children` | `any` |  | Children to pass through the component. |
+| `className` | `string` |  | Additional class(es) for custom styling. |
+
+------------------------------------------------------------------
+
+## CardTitle `<CardTitle/>`
+A versatile title block that can be used in
+various places on the card, including the media
+area. This component can also display an avatar next
+to the title content.
+
+### Properties
+| Name | Type | Default | Description |
+|:-----|:-----|:-----|:-----|
+| `avatar` | `union`(`string`,`element`) |  |  |
+| `children` | `union`(`string`,`element`,`array`) |  | Children to pass through the component. |
+| `className` | `string` |  | Additional class(es) for custom styling. |
+| `subtitle` | `string` |  |  |
+| `title` | `string` |  |  |
+
+------------------------------------------------------------------
+
diff --git a/components/index.js b/components/index.js
index e429c8754..0ef64c859 100644
--- a/components/index.js
+++ b/components/index.js
@@ -1,43 +1,37 @@
 import './utils/polyfills'; // Import polyfills for IE11
-import App from './app';
-import AppBar from './app_bar';
-import Autocomplete from './autocomplete';
-import Button from './button';
-import Card from './card';
-import Checkbox from './checkbox';
-import DatePicker from './date_picker';
-import Dialog from './dialog';
-import Drawer from './drawer';
-import Dropdown from './dropdown';
-import FontIcon from './font_icon';
-import Form from './form';
-import Input from './input';
-import Link from './link';
-import List from './list/List';
-import ListItem from './list/ListItem';
-import ListDivider from './list/ListDivider';
-import ListCheckbox from './list/ListCheckbox';
-import ListSubHeader from './list/ListSubHeader';
-import Menu from './menu/Menu';
-import MenuItem from './menu/MenuItem';
-import MenuDivider from './menu/MenuDivider';
-import IconMenu from './menu/IconMenu';
-import Navigation from './navigation';
-import ProgressBar from './progress_bar';
-import RadioGroup from './radio/RadioGroup';
-import RadioButton from './radio/RadioButton';
-import Ripple from './ripple';
-import Slider from './slider';
-import Snackbar from './snackbar';
-import Switch from './switch';
-import Table from './table';
-import Tabs from './tabs/Tabs';
-import Tab from './tabs/Tab';
-import Tooltip from './tooltip';
-import TimePicker from './time_picker';
-
-export default { App, AppBar, Autocomplete, Button, Card, Checkbox, DatePicker,
-  Dialog, Drawer, Dropdown, FontIcon, Form, Input, Link, List, ListItem,
-  ListDivider, ListCheckbox, ListSubHeader, Menu, MenuItem, MenuDivider,
-  IconMenu, Navigation, ProgressBar, RadioGroup, RadioButton, Ripple, Slider,
-  Snackbar, Switch, Table, Tabs, Tab, Tooltip, TimePicker };
+export App from './app';
+export AppBar from './app_bar';
+export Autocomplete from './autocomplete';
+export Button from './button';
+export * from './card';
+export Checkbox from './checkbox';
+export DatePicker from './date_picker';
+export Dialog from './dialog';
+export Drawer from './drawer';
+export Dropdown from './dropdown';
+export FontIcon from './font_icon';
+export Form from './form';
+export Input from './input';
+export Link from './link';
+export List from './list/List';
+export ListItem from './list/ListItem';
+export ListDivider from './list/ListDivider';
+export ListCheckbox from './list/ListCheckbox';
+export ListSubHeader from './list/ListSubHeader';
+export Menu from './menu/Menu';
+export MenuItem from './menu/MenuItem';
+export MenuDivider from './menu/MenuDivider';
+export IconMenu from './menu/IconMenu';
+export Navigation from './navigation';
+export ProgressBar from './progress_bar';
+export RadioGroup from './radio/RadioGroup';
+export RadioButton from './radio/RadioButton';
+export Ripple from './ripple';
+export Slider from './slider';
+export Snackbar from './snackbar';
+export Switch from './switch';
+export Table from './table';
+export Tabs from './tabs/Tabs';
+export Tab from './tabs/Tab';
+export Tooltip from './tooltip';
+export TimePicker from './time_picker';
diff --git a/docs/app/components/layout/home/index.jsx b/docs/app/components/layout/home/index.jsx
index 8720d631b..713a210b6 100644
--- a/docs/app/components/layout/home/index.jsx
+++ b/docs/app/components/layout/home/index.jsx
@@ -4,7 +4,7 @@ import { Card, Button } from 'react-toolbox';
 import Logo from '../../logo';
 import Navigation from '../../navigation';
 import style from './style';
-import authors from './modules/authors';
+import authors from './modules/authors.jsx';
 
 const Home = () => (
   <article>
diff --git a/docs/app/components/layout/main/style.scss b/docs/app/components/layout/main/style.scss
index 74e82f3a9..154228177 100644
--- a/docs/app/components/layout/main/style.scss
+++ b/docs/app/components/layout/main/style.scss
@@ -2,6 +2,11 @@
 @import "http://github.com/~react-toolbox/app_bar/config";
 @import "http://github.com/~react-toolbox/button/config";
 
+hr {
+  margin: 4rem 0;
+  border-top: 1px solid $color-divider;
+}
+
 .appbar {
   padding-right: 8 * $unit;
 }
diff --git a/tools/buildReadme.js b/tools/buildReadme.js
index c2d43a81a..72afeb143 100755
--- a/tools/buildReadme.js
+++ b/tools/buildReadme.js
@@ -51,7 +51,9 @@ new Promise((resolve, reject) => {
 
   for (const componentName in fulfillments) {
     const reactAPI = fulfillments[componentName];
-    markdown = markdown.concat(GenerateMarkdown(componentName, reactAPI)).concat('\n\n');
+    markdown = markdown
+      .concat(GenerateMarkdown(componentName, reactAPI))
+      .concat('\n\n------------------------------------------------------------------\n\n');
   }
 
   return markdown;
diff --git a/tools/generateMarkdown.js b/tools/generateMarkdown.js
index 9b18389b8..660c7aaed 100644
--- a/tools/generateMarkdown.js
+++ b/tools/generateMarkdown.js
@@ -1,24 +1,7 @@
-/**
- * Copyright (c) 2015, Facebook, Inc.
- * All rights reserved.
- *
- * Converted to ES6 by Nathan Marks <info@nathanmarks.io>
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- */
 
-// function stringOfLength (string, length) {
-//   let newString = '';
-//   for (let i = 0; i < length; i++) {
-//     newString += string;
-//   }
-//   return newString;
-// }
 
 function generateTitle (name) {
-  return `## ${name}`;
+  return `## ${name} \`<${name}/>\``;
 }
 
 function generateDesciption (description) {
@@ -28,19 +11,27 @@ function generateDesciption (description) {
 function generatePropType (type) {
   let values;
   if (Array.isArray(type.value)) {
-    values = '(' +
+    values = '(`' +
       type.value.map(function (typeValue) {
         return typeValue.name || typeValue.value;
-      }).join('|') +
-      ')';
+      }).join('`,`') +
+      '`)';
   } else {
     values = type.value;
   }
 
-  return '`' + type.name + (values ? values : '') + '`';
+  return `\`${type.name}\`${(values ? values : '')}`;
 }
 
 function generateProp (propName, prop) {
+  if (!prop.description) {
+    if (propName === 'className') {
+      prop.description = 'Additional class(es) for custom styling.';
+    } else if (propName === 'children') {
+      prop.description = 'Children to pass through the component.';
+    }
+  }
+
   return (
     `| \`${propName}\` ${prop.required ? '(required)' : ''}` +
     `| ${(prop.type ? generatePropType(prop.type) : '')} ` +
@@ -51,7 +42,7 @@ function generateProp (propName, prop) {
 }
 
 function generateProps (props) {
-  const title = '##### Props';
+  const title = '### Properties';
 
   return (
     `${title}\n` +

From 52b8723e8917e629fb7727b3deb26bd3e126769c Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 23 Nov 2015 20:34:07 +0100
Subject: [PATCH 0158/1024] Adapt cards codestyle to the current constraints

---
 components/card/Card.jsx        | 17 +++----------
 components/card/CardActions.jsx | 17 +++----------
 components/card/CardMedia.jsx   | 33 +++---------------------
 components/card/CardText.jsx    | 15 +++--------
 components/card/CardTitle.jsx   | 19 +++-----------
 components/card/index.js        | 10 ++++----
 components/card/style.scss      | 45 ++++++---------------------------
 7 files changed, 28 insertions(+), 128 deletions(-)

diff --git a/components/card/Card.jsx b/components/card/Card.jsx
index 455c78840..a2dd8f0c4 100644
--- a/components/card/Card.jsx
+++ b/components/card/Card.jsx
@@ -1,34 +1,23 @@
+/* eslint-disable no-redeclare */
 import React, { PropTypes } from 'react';
 import ClassNames from 'classnames';
 import style from './style';
 
-/**
- * The base card component. This acts as the main card container
- * that all subcomponents are placed within.
- */
-const Card = ({
-    children,
-    className,
-    raised,
-    ...otherProps
-  }) => {
-
+const Card = ({children, className, raised, ...other}) => {
   const classes = ClassNames(style.card, {
     [style.raised]: raised
   }, className);
 
   return (
-    <div className={classes} {...otherProps}>
+    <div className={classes} {...other}>
       {children}
     </div>
   );
 };
 
 Card.propTypes = {
-  /** Child components, usually Card subcomponents. */
   children: PropTypes.any,
   className: PropTypes.string,
-  /** Increases the shadow depth to appear elevated. */
   raised: PropTypes.bool
 };
 
diff --git a/components/card/CardActions.jsx b/components/card/CardActions.jsx
index 38eefb358..a5fc802fc 100644
--- a/components/card/CardActions.jsx
+++ b/components/card/CardActions.jsx
@@ -1,31 +1,20 @@
+/* eslint-disable no-redeclare */
 import React, { PropTypes, Component } from 'react';
 import ClassNames from 'classnames';
 import style from './style';
 
-/**
- * This component is used as a container for supplemental
- * card actions. Supplemental actions within the card are
- * explicitly called out using icons, text, and UI controls,
- * typically placed at the bottom of the card.
- */
 class CardActions extends Component {
-
   static propTypes = {
     children: PropTypes.any,
     className: PropTypes.string
   }
 
   render () {
-    const {
-      children,
-      className,
-      ...otherProps
-    } = this.props;
-
+    const { children, className, ...other } = this.props;
     const classes = ClassNames(style.cardActions, className);
 
     return (
-      <div className={classes} {...otherProps}>
+      <div className={classes} {...other}>
         {children}
       </div>
     );
diff --git a/components/card/CardMedia.jsx b/components/card/CardMedia.jsx
index 0be58c78a..7b2a2411e 100644
--- a/components/card/CardMedia.jsx
+++ b/components/card/CardMedia.jsx
@@ -1,33 +1,15 @@
+/* eslint-disable no-redeclare */
 import React, { PropTypes, Component } from 'react';
 import ClassNames from 'classnames';
 import style from './style';
 
-/**
- * Used for displaying media such as images or videos
- * on a card. Can also be used with a solid background
- * color instead of an image.
- */
 class CardMedia extends Component {
-
   static propTypes = {
-    /**
-     * Forces a 16:9 or 1:1 aspect ratio respectively. Unset, the media area will have a flexible height.
-     */
     aspectRatio: PropTypes.oneOf([ 'wide', 'square' ]),
-    /**
-     * Usually an image/video element or a `<CardTitle>` component.
-     */
     children: PropTypes.any,
     className: PropTypes.string,
-    /** Sets the background color */
     color: PropTypes.string,
-    /**
-     * Creates a dark overlay underneath the child components.
-     */
     contentOverlay: PropTypes.bool,
-    /**
-     * Can be used instead of children. Accepts an element or a URL string.
-     */
     image: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.element
@@ -35,16 +17,7 @@ class CardMedia extends Component {
   }
 
   render () {
-    const {
-      aspectRatio,
-      children,
-      className,
-      color,
-      contentOverlay,
-      image,
-      ...otherProps
-    } = this.props;
-
+    const { aspectRatio, children, className, color, contentOverlay, image, ...other } = this.props;
     const classes = ClassNames(style.cardMedia, {
       [style[aspectRatio]]: aspectRatio
     }, className);
@@ -59,7 +32,7 @@ class CardMedia extends Component {
     };
 
     return (
-      <div style={bgStyle} className={classes} {...otherProps}>
+      <div style={bgStyle} className={classes} {...other}>
         <div className={innerClasses}>
           {children}
         </div>
diff --git a/components/card/CardText.jsx b/components/card/CardText.jsx
index 0a0b12bdb..59d128660 100644
--- a/components/card/CardText.jsx
+++ b/components/card/CardText.jsx
@@ -1,29 +1,20 @@
+/* eslint-disable no-redeclare */
 import React, { PropTypes, Component } from 'react';
 import ClassNames from 'classnames';
 import style from './style';
 
-/**
- * Basic card content container. Good for
- * small descriptions or other supplementary text.
- */
 class CardText extends Component {
-
   static propTypes = {
     children: PropTypes.any,
     className: PropTypes.string
   }
 
   render () {
-    const {
-      children,
-      className,
-      ...otherProps
-    } = this.props;
-
+    const { children, className, ...other } = this.props;
     const classes = ClassNames(style.cardText, className);
 
     return (
-      <div className={classes} {...otherProps}>
+      <div className={classes} {...other}>
         {typeof children === 'string' ? <p>{children}</p> : children}
       </div>
     );
diff --git a/components/card/CardTitle.jsx b/components/card/CardTitle.jsx
index 268aa47c8..bfe2deeb2 100644
--- a/components/card/CardTitle.jsx
+++ b/components/card/CardTitle.jsx
@@ -1,23 +1,10 @@
+/* eslint-disable no-redeclare */
 import React, { PropTypes } from 'react';
 import ClassNames from 'classnames';
 import { Avatar } from '../avatar';
 import style from './style';
 
-/**
- * A versatile title block that can be used in
- * various places on the card, including the media
- * area. This component can also display an avatar next
- * to the title content.
- */
-const CardTitle = ({
-  avatar,
-  children,
-  className,
-  subtitle,
-  title,
-  ...otherProps
-}) => {
-
+const CardTitle = ({avatar, children, className, subtitle, title, ...other}) => {
   const classes = ClassNames(style.cardTitle, {
     [style.small]: avatar,
     [style.large]: !avatar
@@ -32,7 +19,7 @@ const CardTitle = ({
   }
 
   return (
-    <div className={classes} {...otherProps}>
+    <div className={classes} {...other}>
       {avatarComponent && (
         <div className={style.avatar}>
           {avatarComponent}
diff --git a/components/card/index.js b/components/card/index.js
index 4935ce94d..0589e27da 100644
--- a/components/card/index.js
+++ b/components/card/index.js
@@ -1,5 +1,5 @@
-export Card from './Card.jsx';
-export CardActions from './CardActions.jsx';
-export CardMedia from './CardMedia.jsx';
-export CardText from './CardText.jsx';
-export CardTitle from './CardTitle.jsx';
+export Card from './Card';
+export CardActions from './CardActions';
+export CardMedia from './CardMedia';
+export CardText from './CardText';
+export CardTitle from './CardTitle';
diff --git a/components/card/style.scss b/components/card/style.scss
index 5a1e1f04d..6349ee0c4 100644
--- a/components/card/style.scss
+++ b/components/card/style.scss
@@ -2,23 +2,14 @@
 @import "http://github.com/config";
 
 .card {
-  // Box Model
   display: flex;
+  width: 100%;
   flex-direction: column;
-  border-radius: 2px;
   overflow: hidden;
-  width: 100%;
-
-  // Fonts
   font-size: $card-font-size;
-
-  // Colors
   background: $card-background-color;
-
-  // Elevation
+  border-radius: 2px;
   @include shadow-2dp();
-
-  // Raised Elevation as per spec
   &.raised {
     @include shadow-8dp();
   }
@@ -26,42 +17,35 @@
 
 .cardMedia {
   position: relative;
+  height: 0;
   background-repeat: no-repeat;
-  background-size: cover;
   background-position: center center;
-  height: 0;
-
+  background-size: cover;
   &.wide, &.square {
     width: 100%;
-
     .content > iframe, .content > video, .content > img {
       max-width: 100%;
     }
   }
-
   &.wide {
     padding-top: 56.25%;
   }
-
   &.square {
     padding-top: 100%;
   }
-
   .content {
     // Positioning
     position: absolute;
     top: 0;
     left: 0;
-
     // Box Model
     display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
     width: 100%;
     height: 100%;
+    flex-direction: column;
+    justify-content: flex-end;
     overflow: hidden;
   }
-
   .contentOverlay {
     .cardTitle, .cardActions, .cardText {
       background-color: $card-text-overlay;
@@ -72,27 +56,21 @@
 .cardTitle {
   display: flex;
   align-items: center;
-
   .avatar {
     margin-right: 13px;
   }
-
   .subtitle {
     color: $color-text-secondary;
   }
-
   &.large {
     padding: $card-padding-lg $card-padding ($card-padding - 2px);
-
     .title {
       @include typo-headline();
       line-height: 1.25;
     }
   }
-
   &.small {
     padding: $card-padding;
-
     .title {
       @include typo-body-2(false, true);
       line-height: 1.4;
@@ -102,7 +80,6 @@
       line-height: 1.4;
     }
   }
-
   .cardMedia & {
     .title, .subtitle {
       color: $card-color-white;
@@ -112,11 +89,9 @@
 
 .cardTitle, .cardText {
   padding: ($card-padding - 2px) $card-padding;
-
   &:last-child {
     padding-bottom: $card-padding-lg;
   }
-
   & + .cardText {
     padding-top: 0;
   }
@@ -126,20 +101,16 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  padding: $card-padding-sm $card-padding-sm;
-
+  padding: $card-padding-sm;
   button {
     min-width: 0;
-    margin: 0 $card-padding-sm/2;
     padding: 0 $card-padding-sm;
-
+    margin: 0 $card-padding-sm / 2;
     &:first-child {
       margin-left: 0;
     }
-
     &:last-child {
       margin-right: 0;
     }
   }
-
 }

From 6ed03ad00dc0e1cdbeb191a651bb90b4a50e1a4d Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 23 Nov 2015 20:34:32 +0100
Subject: [PATCH 0159/1024] Remove SelectorFormat to allow camelCase for
 CSSModules

---
 .scss-lint.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.scss-lint.yml b/.scss-lint.yml
index 2a87f8d42..aabb6e9e2 100644
--- a/.scss-lint.yml
+++ b/.scss-lint.yml
@@ -406,7 +406,7 @@ linters:
     enabled: false
 
   SelectorFormat:
-    enabled: true
+    enabled: false
     convention: hyphenated_lowercase # or 'BEM', or 'snake_case', or 'camel_case', or a regex pattern
 
   Shorthand:

From 6a644a4bcbf916b94dbb5bf73ccab541046dcb4f Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 23 Nov 2015 20:35:02 +0100
Subject: [PATCH 0160/1024] Remove extra lines

---
 components/card/_config.scss | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/components/card/_config.scss b/components/card/_config.scss
index b301bf006..58a73135d 100644
--- a/components/card/_config.scss
+++ b/components/card/_config.scss
@@ -1,10 +1,7 @@
 $card-color-white: $color-white !default;
 $card-text-overlay: rgba($color-black, 0.35) !default;
-
 $card-background-color: $card-color-white;
-
 $card-padding-sm: 8px;
 $card-padding: 16px;
 $card-padding-lg: 20px;
-
 $card-font-size: $font-size-small;

From 61ac76c630bd557c1431eaf419440e4fceec2595 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 23 Nov 2015 20:37:22 +0100
Subject: [PATCH 0161/1024] Adapt avatar to current linter constraints

---
 components/avatar/Avatar.jsx | 18 +++---------------
 components/avatar/index.js   |  2 +-
 2 files changed, 4 insertions(+), 16 deletions(-)

diff --git a/components/avatar/Avatar.jsx b/components/avatar/Avatar.jsx
index df7a0c491..d03cce395 100644
--- a/components/avatar/Avatar.jsx
+++ b/components/avatar/Avatar.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-redeclare */
 import React, { PropTypes, Component } from 'react';
 import ClassNames from 'classnames';
 import FontIcon from '../font_icon'; // ewww! :P @TODO
@@ -28,18 +29,8 @@ class Avatar extends Component {
   }
 
   render () {
-    const {
-      accent,
-      children,
-      className,
-      icon,
-      primary,
-      image,
-      ...otherProps
-    } = this.props;
-
     let component;
-
+    const { accent, children, className, icon, primary, image, ...other } = this.props;
     const classes = ClassNames(style.avatar, [
       primary ? style.primary : accent ? style.accent : null
     ], className);
@@ -52,11 +43,8 @@ class Avatar extends Component {
       component = <FontIcon value="icon" />;
     }
 
-    return (
-      <div className={classes}>{component ? component : children}</div>
-    );
+    return <div className={classes}>{component ? component : children}</div>;
   }
-
 }
 
 export default Avatar;
diff --git a/components/avatar/index.js b/components/avatar/index.js
index 2c1f2bf4d..735793c33 100644
--- a/components/avatar/index.js
+++ b/components/avatar/index.js
@@ -1 +1 @@
-export Avatar from './Avatar.jsx';
+export Avatar from './Avatar';

From 395ce5be4676b015a246f3f80aed1420789a1d74 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 23 Nov 2015 20:38:44 +0100
Subject: [PATCH 0162/1024] Pass linter errors for button

---
 components/button/Button.jsx | 5 ++++-
 components/button/index.js   | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/button/Button.jsx b/components/button/Button.jsx
index 48a922563..571e9e888 100644
--- a/components/button/Button.jsx
+++ b/components/button/Button.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-redeclare */
 import React from 'react';
 import ClassNames from 'classnames';
 import FontIcon from '../font_icon';
@@ -9,10 +10,12 @@ import events from '../utils/events';
 class Button extends React.Component {
   static propTypes = {
     accent: React.PropTypes.bool,
+    children: React.PropTypes.node,
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
     flat: React.PropTypes.bool,
     floating: React.PropTypes.bool,
+    href: React.PropTypes.string,
     icon: React.PropTypes.string,
     inverse: React.PropTypes.bool,
     label: React.PropTypes.string,
@@ -55,7 +58,7 @@ class Button extends React.Component {
   render () {
     const {accent, className, flat, floating, href, icon, inverse, label,
            loading, mini, primary, raised, ripple, toggle,
-           tooltip, tooltipDelay, ...others} = this.props;  //eslint-disable-line no-redeclare
+           tooltip, tooltipDelay, ...others} = this.props;
     const element = href ? 'a' : 'button';
     const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
     const shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : toggle ? 'toggle' : 'flat';
diff --git a/components/button/index.js b/components/button/index.js
index 7a4ebccc7..a546486c2 100644
--- a/components/button/index.js
+++ b/components/button/index.js
@@ -1 +1 @@
-export default from './Button.jsx';
+export default from './Button';

From 9769bfb51eaa6d5a36d6faec9044b8687c350e8e Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 24 Nov 2015 00:29:02 +0100
Subject: [PATCH 0163/1024] Extract IconButton and small fixes

---
 components/_globals.scss                      |  1 -
 components/button/IconButton.jsx              | 66 ++++++++++++++++++
 components/button/_config.scss                |  1 +
 components/button/index.js                    |  5 +-
 components/button/style.scss                  | 69 ++++++++-----------
 components/date_picker/Calendar.jsx           |  4 +-
 components/font_icon/FontIcon.jsx             | 14 ++--
 components/menu/IconMenu.jsx                  |  2 +-
 components/menu/menu.jsx                      |  8 +++
 components/menu/readme.md                     |  4 +-
 .../main/modules/examples/menu_example_1.txt  |  2 +-
 spec/components/button.jsx                    |  6 +-
 spec/components/icon_menu.jsx                 |  2 +-
 13 files changed, 123 insertions(+), 61 deletions(-)
 create mode 100644 components/button/IconButton.jsx

diff --git a/components/_globals.scss b/components/_globals.scss
index da054b365..0ee661c3e 100644
--- a/components/_globals.scss
+++ b/components/_globals.scss
@@ -18,7 +18,6 @@ $unit: 1rem;
 
 // -- Fonts
 $font-roboto-url: "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" !default;
-$font-icon-url: "https://fonts.googleapis.com/icon?family=Material+Icons" !default;
 $preferred-font: "Roboto", "Helvetica", "Arial", sans-serif !default;
 $font-size: 1.6 * $unit !default;
 $font-size-tiny: 1.2 * $unit !default;
diff --git a/components/button/IconButton.jsx b/components/button/IconButton.jsx
new file mode 100644
index 000000000..25c577afd
--- /dev/null
+++ b/components/button/IconButton.jsx
@@ -0,0 +1,66 @@
+/* eslint-disable no-redeclare */
+import React from 'react';
+import ClassNames from 'classnames';
+import FontIcon from '../font_icon';
+import Ripple from '../ripple';
+import Tooltip from '../tooltip';
+import style from './style';
+import events from '../utils/events';
+
+class Button extends React.Component {
+  static propTypes = {
+    accent: React.PropTypes.bool,
+    children: React.PropTypes.node,
+    className: React.PropTypes.string,
+    disabled: React.PropTypes.bool,
+    href: React.PropTypes.string,
+    icon: React.PropTypes.string,
+    inverse: React.PropTypes.bool,
+    primary: React.PropTypes.bool,
+    ripple: React.PropTypes.bool,
+    tooltip: React.PropTypes.string,
+    tooltipDelay: React.PropTypes.number,
+    type: React.PropTypes.string
+  };
+
+  static defaultProps = {
+    accent: false,
+    className: '',
+    primary: false,
+    raised: false,
+    ripple: true
+  };
+
+  handleMouseDown = (event) => {
+    events.pauseEvent(event);
+    if (this.refs.ripple) this.refs.ripple.start(event);
+    if (this.props.onMouseDown) this.props.onMouseDown(event);
+  };
+
+  render () {
+    const {accent, children, className, href, icon, inverse,
+           primary, ripple, tooltip, tooltipDelay, ...others} = this.props;
+    const element = href ? 'a' : 'button';
+    const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
+
+    const classes = ClassNames([ style.toggle, style[level] ], {
+      [style.inverse]: inverse
+    }, className);
+
+    const props = {
+      ...others,
+      href,
+      className: classes,
+      disabled: this.props.disabled,
+      onMouseDown: this.handleMouseDown
+    };
+
+    return React.createElement(element, props,
+      ripple ? <Ripple ref='ripple' centered /> : null,
+      tooltip ? <Tooltip className={style.tooltip} delay={tooltipDelay} label={tooltip}/> : null,
+      icon ? <FontIcon className={style.icon} value={icon}/> : children
+    );
+  }
+}
+
+export default Button;
diff --git a/components/button/_config.scss b/components/button/_config.scss
index e015b79d0..9243c9d71 100644
--- a/components/button/_config.scss
+++ b/components/button/_config.scss
@@ -21,3 +21,4 @@ $button-solid-disabled-background-color: rgba($color-black, 0.12) !default;
 $button-squared-icon-margin: $unit * .6;
 $button-squared-min-width: 9 * $unit;
 $button-squared-padding: 0 $unit * 1.2;
+$button-toggle-font-size: $unit * 2;
diff --git a/components/button/index.js b/components/button/index.js
index a546486c2..5ae0e49d9 100644
--- a/components/button/index.js
+++ b/components/button/index.js
@@ -1 +1,4 @@
-export default from './Button';
+import Button from './Button';
+export default Button;
+export { Button };
+export IconButton from './IconButton';
diff --git a/components/button/style.scss b/components/button/style.scss
index dde24b625..4caa16925 100644
--- a/components/button/style.scss
+++ b/components/button/style.scss
@@ -33,7 +33,6 @@
     display: inline-block;
     width: 1em;
     height: 1em;
-    font-size: 120%;
     vertical-align: middle;
     fill: currentColor;
   }
@@ -80,31 +79,6 @@
   }
 }
 
-.toggle {
-  @extend %button;
-  @extend %toggle;
-  width: $button-height;
-  background: transparent;
-  border-radius: 50%;
-  &:hover {
-    background: $button-flat-color-hover;
-  }
-  &:focus:not(:active) {
-    background: $button-flat-color-hover;
-  }
-  &[disabled] {
-    @extend %disabled;
-  }
-  .icon {
-    font-size: 120%;
-    line-height: $button-height;
-    vertical-align: middle;
-  }
-  [data-react-toolbox="ripple"] {
-    border-radius: 50%;
-  }
-}
-
 .raised {
   @extend %button;
   @extend %squared;
@@ -151,6 +125,24 @@
   }
 }
 
+.toggle {
+  @extend %button;
+  width: $button-height;
+  background: transparent;
+  border-radius: 50%;
+  &[disabled] {
+    @extend %disabled;
+  }
+  > .icon {
+    font-size: $button-toggle-font-size;
+    line-height: $button-height;
+    vertical-align: middle;
+  }
+  [data-react-toolbox="ripple"] {
+    border-radius: 50%;
+  }
+}
+
 .primary:not([disabled]) {
   &.raised, &.floating {
     color: $button-primary-color-contrast;
@@ -158,13 +150,13 @@
   }
   &.flat, &.toggle {
     color: $button-primary-color;
-    &:hover {
-      background: $button-primary-color-hover;
-    }
     &:focus:not(:active) {
       background: $button-primary-color-hover;
     }
   }
+  &.flat:hover {
+    background: $button-primary-color-hover;
+  }
 }
 
 .accent:not([disabled]) {
@@ -174,13 +166,13 @@
   }
   &.flat, &.toggle {
     color: $button-accent-color;
-    &:hover {
-      background: $button-accent-color-hover;
-    }
     &:focus:not(:active) {
       background: $button-accent-color-hover;
     }
   }
+  &.flat:hover {
+    background: $button-accent-color-hover;
+  }
 }
 
 .neutral:not([disabled]) {
@@ -191,13 +183,13 @@
     }
     &.flat, &.toggle {
       color: $button-neutral-color-contrast;
-      &:hover {
-        background: $button-neutral-color-hover;
-      }
       &:focus:not(:active) {
         background: $button-neutral-color-hover;
       }
     }
+    &.flat:hover {
+      background: $button-neutral-color-hover;
+    }
   }
 
   &.inverse {
@@ -207,15 +199,14 @@
     }
     &.flat, &.toggle {
       color: $button-neutral-color;
-      &:hover {
-        background: $button-neutral-color-hover;
-      }
       &:focus:not(:active) {
         background: $button-neutral-color-hover;
       }
     }
+    &.flat:hover {
+      background: $button-neutral-color-hover;
+    }
   }
-
 }
 
 .mini.floating {
diff --git a/components/date_picker/Calendar.jsx b/components/date_picker/Calendar.jsx
index a8aee1a2a..97c5b70d6 100644
--- a/components/date_picker/Calendar.jsx
+++ b/components/date_picker/Calendar.jsx
@@ -92,10 +92,10 @@ class Calendar extends React.Component {
     const animation = this.state.direction === 'left' ? SlideLeft : SlideRight;
     return (
       <div data-react-toolbox='calendar'>
-        <FontIcon className={style.prev} value='chevron-left' onMouseDown={this.decrementViewMonth}>
+        <FontIcon className={style.prev} value='chevron_left' onMouseDown={this.decrementViewMonth}>
           <Ripple ref='rippleLeft' className={style.ripple} spread={1.2} centered />
         </FontIcon>
-        <FontIcon className={style.next} value='chevron-right' onMouseDown={this.incrementViewMonth}>
+        <FontIcon className={style.next} value='chevron_right' onMouseDown={this.incrementViewMonth}>
           <Ripple ref='rippleRight' className={style.ripple} spread={1.2} centered />
         </FontIcon>
         <CssTransitionGroup transitionName={animation} transitionEnterTimeout={350} transitionLeaveTimeout={350}>
diff --git a/components/font_icon/FontIcon.jsx b/components/font_icon/FontIcon.jsx
index 357a322ea..ce8cc8f10 100644
--- a/components/font_icon/FontIcon.jsx
+++ b/components/font_icon/FontIcon.jsx
@@ -1,24 +1,18 @@
+/* eslint-disable no-redeclare */
 import React from 'react';
 import ClassNames from 'classnames';
 
-const FontIcon = ({
-  children,
-  className,
-  value,
-  ...otherProps
-}) => {
-
+const FontIcon = ({ children, className, value, ...other}) => {
   const classes = ClassNames('material-icons', className);
-
   return (
-    <span className={classes} {...otherProps} >
+    <span className={classes} {...other} >
       {value ? value : children}
     </span>
   );
 };
 
 FontIcon.propTypes = {
-  children: React.PropTypes.string,
+  children: React.PropTypes.any,
   className: React.PropTypes.string,
   value: React.PropTypes.string
 };
diff --git a/components/menu/IconMenu.jsx b/components/menu/IconMenu.jsx
index 0d875a3eb..685febadd 100644
--- a/components/menu/IconMenu.jsx
+++ b/components/menu/IconMenu.jsx
@@ -22,7 +22,7 @@ class IconMenu extends React.Component {
 
   static defaultProps = {
     className: '',
-    icon: 'more-vert',
+    icon: 'more_vert',
     iconRipple: true,
     menuRipple: true,
     position: 'auto',
diff --git a/components/menu/menu.jsx b/components/menu/menu.jsx
index 8f1507ec0..5b06be450 100644
--- a/components/menu/menu.jsx
+++ b/components/menu/menu.jsx
@@ -141,6 +141,14 @@ class Menu extends React.Component {
     });
   }
 
+  show () {
+    this.setState({active: true});
+  }
+
+  hide () {
+    this.setState({active: false});
+  }
+
   render () {
     const outlineStyle = { width: this.state.width, height: this.state.height };
     let className = `${style.root} ${style[this.state.position]}`;
diff --git a/components/menu/readme.md b/components/menu/readme.md
index f4fe43c5c..5d70b53e1 100644
--- a/components/menu/readme.md
+++ b/components/menu/readme.md
@@ -7,7 +7,7 @@ A [Menu](https://www.google.com/design/spec/components/menus.html) is a temporar
 import {IconMenu, MenuItem, MenuDivider } from 'react-toolbox';
  
 const MenuTest = () => (
-  <IconMenu icon='more-vert' position='top-left' menuRipple selectable>
+  <IconMenu icon='more_vert' position='top-left' menuRipple selectable>
     <MenuItem value='download' icon='get-app' caption='Download' />
     <MenuItem value='help' icon='favorite' caption='Favorite' />
     <MenuItem value='settings' icon='open-in-browser' caption='Open in app' />
@@ -47,7 +47,7 @@ As the most usual scenario will be to open the menu from a click in an Icon, we
 | Name              | Type          | Default         | Description|
 |:-----|:-----|:-----|:-----|
 | `className`   | `String`    |  `''`    | Set a class to give custom styles to the icon wrapper.| 
-| `icon`    | `String`    | `more-vert`  | Icon font key string to display the opener icon. |
+| `icon`    | `String`    | `more_vert`  | Icon font key string to display the opener icon. |
 | `iconRipple`    | `String`    | `true`  | If true, the icon will show a ripple when is clicked. |
 | `menuRipple`    | `String`    | `true`  | Transferred to the `Menu` component. |
 | `onClick`    | `Function`    |    | Callback that will be called when the icon is clicked. |
diff --git a/docs/app/components/layout/main/modules/examples/menu_example_1.txt b/docs/app/components/layout/main/modules/examples/menu_example_1.txt
index 6a234a95b..a44db3d64 100644
--- a/docs/app/components/layout/main/modules/examples/menu_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/menu_example_1.txt
@@ -1,5 +1,5 @@
 const MenuTest = () => (
-  <IconMenu icon='more-vert' position='top-left' menuRipple>
+  <IconMenu icon='more_vert' position='top-left' menuRipple>
     <MenuItem value='download' icon='get-app' caption='Download' />
     <MenuItem value='help' icon='favorite' caption='Favorite' />
     <MenuItem value='settings' icon='open-in-browser' caption='Open in app' />
diff --git a/spec/components/button.jsx b/spec/components/button.jsx
index 3d1f55718..ee218acca 100644
--- a/spec/components/button.jsx
+++ b/spec/components/button.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Button from '../../components/button';
+import { Button, IconButton } from '../../components/button';
 
 const GithubIcon = () => (
   <svg viewBox="0 0 284 277">
@@ -22,8 +22,8 @@ const ButtonTest = () => (
     <Button icon='add' floating primary />
     <Button icon='add' floating primary disabled />
     <Button icon='add' floating accent mini />
-    <Button icon='mood' toggle />
-    <Button toggle primary><GithubIcon /></Button>
+    <IconButton icon='favorite' accent />
+    <IconButton primary><GithubIcon/></IconButton>
     <Button icon='add' label='Add this' flat primary />
     <Button icon='add' label='Add this' flat disabled />
     <Button icon='bookmark' label='Bookmark' raised primary loading />
diff --git a/spec/components/icon_menu.jsx b/spec/components/icon_menu.jsx
index 21cd51b19..9d8c5f1f3 100644
--- a/spec/components/icon_menu.jsx
+++ b/spec/components/icon_menu.jsx
@@ -29,7 +29,7 @@ class IconMenuTest extends React.Component {
         <h5>Icon Menus</h5>
         <p>Although a menu can be used indepently with any component, we are providing a common use case with the icon menu.</p>
         <IconMenu
-          icon='more-vert'
+          icon='more_vert'
           position='auto'
           iconRipple
           menuRipple

From 2117354b3f3962f48826420236426c7c99987f92 Mon Sep 17 00:00:00 2001
From: Nathan Marks <nathan@poweredbysearch.com>
Date: Tue, 24 Nov 2015 00:49:04 -0500
Subject: [PATCH 0164/1024] Fixed docs component scope error and added card
 example

---
 components/card/index.js                      |  4 ++-
 components/card/readme.md                     | 36 ++++++++++++-------
 .../main/modules/examples/card_example_1.txt  | 33 ++++++++++-------
 docs/app/components/preview/index.jsx         |  4 +--
 spec/components/card.jsx                      |  3 +-
 5 files changed, 51 insertions(+), 29 deletions(-)

diff --git a/components/card/index.js b/components/card/index.js
index 0589e27da..5f9ceb938 100644
--- a/components/card/index.js
+++ b/components/card/index.js
@@ -1,4 +1,6 @@
-export Card from './Card';
+import Card from './Card';
+export default Card;
+export { Card };
 export CardActions from './CardActions';
 export CardMedia from './CardMedia';
 export CardText from './CardText';
diff --git a/components/card/readme.md b/components/card/readme.md
index 0a5402ee8..942ae049e 100644
--- a/components/card/readme.md
+++ b/components/card/readme.md
@@ -4,22 +4,34 @@ A [card](https://www.google.com/design/spec/components/cards.html) is a piece of
 
 <!-- example -->
 ```jsx
-import Card from 'react-toolbox/lib/card';
+import { Card, CardMedia, CardTitle, CardText, CardActions } from 'react-toolbox/lib/card';
 
-const actions = [
-  { label: 'Play', icon: 'play-arrow'},
-  { label: 'Close' }
-];
+const dummyText = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.';
 
 const TestCards = () => (
-  <Card
-    image='http://pitchfork-cdn.s3.amazonaws.com/longform/221/Deerhunter-Fading-Frontier640.jpg'
-    text='A Deerhunter album rollout usually coincides with some pithy and provocative statements from Bradford Cox on pop culture...'
-    title='Deerhunter - Fading Frontier'
-    color="rgba(0,0,0,.4)"
-    actions={actions}
-  />
+  <Card style={{width: '350px'}}>
+    <CardTitle
+      avatar="https://placeimg.com/80/80/animals"
+      title="Avatar style title"
+      subtitle="Subtitle here"
+    />
+    <CardMedia
+      aspectRatio="wide"
+      image="https://placeimg.com/800/450/nature"
+    />
+    <CardTitle
+      title="Title goes here"
+      subtitle="Subtitle here"
+    />
+    <CardText>{dummyText}</CardText>
+    <CardActions>
+      <Button label="Action 1" />
+      <Button label="Action 2" />
+    </CardActions>
+  </Card>
 );
+
+return <TestCards />;
 ```
 
 <!--component-docgen-start-->
diff --git a/docs/app/components/layout/main/modules/examples/card_example_1.txt b/docs/app/components/layout/main/modules/examples/card_example_1.txt
index 3238b889e..fe8cf7b46 100644
--- a/docs/app/components/layout/main/modules/examples/card_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/card_example_1.txt
@@ -1,17 +1,26 @@
-const actions = [
-  { label: 'Play', icon: 'play-arrow'},
-  { label: 'Close' }
-];
+const dummyText = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.';
 
 const TestCards = () => (
-  <Card
-    image='http://pitchfork-cdn.s3.amazonaws.com/longform/221/Deerhunter-Fading-Frontier640.jpg'
-    text='A Deerhunter album rollout usually coincides with some pithy and provocative statements from Bradford Cox on pop culture...'
-    title='Deerhunter'
-    subtitle='Fading Frontier'
-    color="rgba(0,0,0,.4)"
-    actions={actions}
-  />
+  <Card style={{width: '350px'}}>
+    <CardTitle
+      avatar="https://placeimg.com/80/80/animals"
+      title="Avatar style title"
+      subtitle="Subtitle here"
+    />
+    <CardMedia
+      aspectRatio="wide"
+      image="https://placeimg.com/800/450/nature"
+    />
+    <CardTitle
+      title="Title goes here"
+      subtitle="Subtitle here"
+    />
+    <CardText>{dummyText}</CardText>
+    <CardActions>
+      <Button label="Action 1" />
+      <Button label="Action 2" />
+    </CardActions>
+  </Card>
 );
 
 return <TestCards />;
diff --git a/docs/app/components/preview/index.jsx b/docs/app/components/preview/index.jsx
index f8e0a52d8..2dfebc3e6 100644
--- a/docs/app/components/preview/index.jsx
+++ b/docs/app/components/preview/index.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import babel from 'babel-core/browser';
-import ReactToolbox from 'react-toolbox';
+import * as ReactToolbox from 'react-toolbox';
 import style from './style';
 
 const ERROR_TIMEOUT = 500;
@@ -48,7 +48,7 @@ const Preview = React.createClass({
         ${this.props.code}
       });`;
     return babel.transform(code, {
-      optional: ['es7.classProperties']
+      optional: ['es7.classProperties', 'es7.exportExtensions']
     }).code;
   },
 
diff --git a/spec/components/card.jsx b/spec/components/card.jsx
index 6c5885590..5991b40b2 100644
--- a/spec/components/card.jsx
+++ b/spec/components/card.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import Button from '../../components/button';
-import {
-  Card,
+import Card, {
   CardActions,
   CardMedia,
   CardText,

From 726a7772eec76058188580bd09367d601058d7a0 Mon Sep 17 00:00:00 2001
From: Miguel Ping <miguel.ping@gmail.com>
Date: Tue, 24 Nov 2015 12:59:19 +0000
Subject: [PATCH 0165/1024] Fix array check on autocomplete

---
 components/autocomplete/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/autocomplete/index.jsx b/components/autocomplete/index.jsx
index 604c20f2b..b5aac9035 100644
--- a/components/autocomplete/index.jsx
+++ b/components/autocomplete/index.jsx
@@ -112,7 +112,7 @@ class Autocomplete extends React.Component {
 
   source () {
     const { source } = this.props;
-    if (source.hasOwnProperty(length)) {
+    if (source.hasOwnProperty('length')) {
       return new Map(source.map((item) => [item, item]));
     } else {
       return new Map(Object.keys(source).map((key) => [key, source[key]]));

From 6495af36bd35861fe941be6cb5138fe91ed363de Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 24 Nov 2015 20:26:10 +0100
Subject: [PATCH 0166/1024] Update babel-eslint to latest version

---
 components/avatar/Avatar.jsx      | 1 -
 components/button/Button.jsx      | 1 -
 components/button/IconButton.jsx  | 1 -
 components/card/Card.jsx          | 1 -
 components/card/CardActions.jsx   | 1 -
 components/card/CardMedia.jsx     | 1 -
 components/card/CardText.jsx      | 1 -
 components/card/CardTitle.jsx     | 1 -
 components/font_icon/FontIcon.jsx | 1 -
 package.json                      | 2 +-
 10 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/components/avatar/Avatar.jsx b/components/avatar/Avatar.jsx
index d03cce395..3bc9c4eec 100644
--- a/components/avatar/Avatar.jsx
+++ b/components/avatar/Avatar.jsx
@@ -1,4 +1,3 @@
-/* eslint-disable no-redeclare */
 import React, { PropTypes, Component } from 'react';
 import ClassNames from 'classnames';
 import FontIcon from '../font_icon'; // ewww! :P @TODO
diff --git a/components/button/Button.jsx b/components/button/Button.jsx
index 571e9e888..9cbe40c61 100644
--- a/components/button/Button.jsx
+++ b/components/button/Button.jsx
@@ -1,4 +1,3 @@
-/* eslint-disable no-redeclare */
 import React from 'react';
 import ClassNames from 'classnames';
 import FontIcon from '../font_icon';
diff --git a/components/button/IconButton.jsx b/components/button/IconButton.jsx
index 25c577afd..5b62ff140 100644
--- a/components/button/IconButton.jsx
+++ b/components/button/IconButton.jsx
@@ -1,4 +1,3 @@
-/* eslint-disable no-redeclare */
 import React from 'react';
 import ClassNames from 'classnames';
 import FontIcon from '../font_icon';
diff --git a/components/card/Card.jsx b/components/card/Card.jsx
index a2dd8f0c4..fcfad60e0 100644
--- a/components/card/Card.jsx
+++ b/components/card/Card.jsx
@@ -1,4 +1,3 @@
-/* eslint-disable no-redeclare */
 import React, { PropTypes } from 'react';
 import ClassNames from 'classnames';
 import style from './style';
diff --git a/components/card/CardActions.jsx b/components/card/CardActions.jsx
index a5fc802fc..c14c6c4e8 100644
--- a/components/card/CardActions.jsx
+++ b/components/card/CardActions.jsx
@@ -1,4 +1,3 @@
-/* eslint-disable no-redeclare */
 import React, { PropTypes, Component } from 'react';
 import ClassNames from 'classnames';
 import style from './style';
diff --git a/components/card/CardMedia.jsx b/components/card/CardMedia.jsx
index 7b2a2411e..f4978fa7b 100644
--- a/components/card/CardMedia.jsx
+++ b/components/card/CardMedia.jsx
@@ -1,4 +1,3 @@
-/* eslint-disable no-redeclare */
 import React, { PropTypes, Component } from 'react';
 import ClassNames from 'classnames';
 import style from './style';
diff --git a/components/card/CardText.jsx b/components/card/CardText.jsx
index 59d128660..2e09fa51f 100644
--- a/components/card/CardText.jsx
+++ b/components/card/CardText.jsx
@@ -1,4 +1,3 @@
-/* eslint-disable no-redeclare */
 import React, { PropTypes, Component } from 'react';
 import ClassNames from 'classnames';
 import style from './style';
diff --git a/components/card/CardTitle.jsx b/components/card/CardTitle.jsx
index bfe2deeb2..7918b5b3c 100644
--- a/components/card/CardTitle.jsx
+++ b/components/card/CardTitle.jsx
@@ -1,4 +1,3 @@
-/* eslint-disable no-redeclare */
 import React, { PropTypes } from 'react';
 import ClassNames from 'classnames';
 import { Avatar } from '../avatar';
diff --git a/components/font_icon/FontIcon.jsx b/components/font_icon/FontIcon.jsx
index ce8cc8f10..cb73cea1b 100644
--- a/components/font_icon/FontIcon.jsx
+++ b/components/font_icon/FontIcon.jsx
@@ -1,4 +1,3 @@
-/* eslint-disable no-redeclare */
 import React from 'react';
 import ClassNames from 'classnames';
 
diff --git a/package.json b/package.json
index 4cc899ea9..84fbdd8ee 100644
--- a/package.json
+++ b/package.json
@@ -53,7 +53,7 @@
     "autoprefixer": "^6.0.3",
     "babel": "^5.8.23",
     "babel-core": "^5.8.23",
-    "babel-eslint": "^4.1.5",
+    "babel-eslint": "^4.1.6",
     "babel-loader": "^5.3.2",
     "babel-plugin-react-transform": "^1.1.1",
     "bluebird": "^3.0.5",

From 69521f878f2b9483fed9f787ab58ef358b09093f Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 24 Nov 2015 22:18:00 +0100
Subject: [PATCH 0167/1024] Finish IconButton

---
 .eslintrc                                     |   2 +-
 components/button/Button.jsx                  |  17 +--
 components/button/IconButton.jsx              |   6 +-
 components/button/_config.scss                |   9 +-
 components/button/readme.md                   |  17 ++-
 components/button/style.scss                  | 132 +++++++-----------
 components/index.js                           |   3 +-
 .../modules/examples/button_example_1.txt     |   9 +-
 spec/components/button.jsx                    |   7 +-
 9 files changed, 78 insertions(+), 124 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 62ff84a8a..6f9f9cd88 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -225,7 +225,7 @@
     "react/no-danger": 0,
     "react/no-did-mount-set-state": 0,
     "react/no-did-update-set-state": 1,
-    "react/no-multi-comp": 1,
+    "react/no-multi-comp": 0,
     "react/no-unknown-property": 1,
     "react/prop-types": [2, {"ignore": ["onMouseDown", "onTouchStart"]}],
     "react/react-in-jsx-scope": 1,
diff --git a/components/button/Button.jsx b/components/button/Button.jsx
index 9cbe40c61..bd4aa90f9 100644
--- a/components/button/Button.jsx
+++ b/components/button/Button.jsx
@@ -23,7 +23,6 @@ class Button extends React.Component {
     primary: React.PropTypes.bool,
     raised: React.PropTypes.bool,
     ripple: React.PropTypes.bool,
-    toggle: React.PropTypes.bool,
     tooltip: React.PropTypes.string,
     tooltipDelay: React.PropTypes.number,
     type: React.PropTypes.string
@@ -38,8 +37,7 @@ class Button extends React.Component {
     mini: false,
     primary: false,
     raised: false,
-    ripple: true,
-    toggle: false
+    ripple: true
   };
 
   handleMouseDown = (event) => {
@@ -48,19 +46,13 @@ class Button extends React.Component {
     if (this.props.onMouseDown) this.props.onMouseDown(event);
   };
 
-  handleTouchStart = (event) => {
-    events.pauseEvent(event);
-    if (this.refs.ripple) this.refs.ripple.start(event.touches[0], true);
-    if (this.props.onTouchStart) this.props.onTouchStart(event);
-  };
-
   render () {
     const {accent, className, flat, floating, href, icon, inverse, label,
-           loading, mini, primary, raised, ripple, toggle,
+           loading, mini, primary, raised, ripple,
            tooltip, tooltipDelay, ...others} = this.props;
     const element = href ? 'a' : 'button';
     const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
-    const shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : toggle ? 'toggle' : 'flat';
+    const shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : 'flat';
 
     const classes = ClassNames([ style[shape], style[level] ], {
       [style.mini]: mini,
@@ -72,8 +64,7 @@ class Button extends React.Component {
       href,
       className: classes,
       disabled: this.props.disabled || this.props.loading,
-      onMouseDown: this.handleMouseDown,
-      onTouchStart: this.handleTouchStart
+      onMouseDown: this.handleMouseDown
     };
 
     return React.createElement(element, props,
diff --git a/components/button/IconButton.jsx b/components/button/IconButton.jsx
index 5b62ff140..41447077b 100644
--- a/components/button/IconButton.jsx
+++ b/components/button/IconButton.jsx
@@ -26,7 +26,6 @@ class Button extends React.Component {
     accent: false,
     className: '',
     primary: false,
-    raised: false,
     ripple: true
   };
 
@@ -41,10 +40,7 @@ class Button extends React.Component {
            primary, ripple, tooltip, tooltipDelay, ...others} = this.props;
     const element = href ? 'a' : 'button';
     const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
-
-    const classes = ClassNames([ style.toggle, style[level] ], {
-      [style.inverse]: inverse
-    }, className);
+    const classes = ClassNames([style.toggle, style[level]], {[style.inverse]: inverse}, className);
 
     const props = {
       ...others,
diff --git a/components/button/_config.scss b/components/button/_config.scss
index 9243c9d71..45ec2f956 100644
--- a/components/button/_config.scss
+++ b/components/button/_config.scss
@@ -7,17 +7,14 @@ $button-primary-color: $color-primary !default;
 $button-accent-color-contrast: $color-primary-contrast !default;
 $button-accent-color-hover: rgba($color-accent, 0.20) !default;
 $button-accent-color: $color-accent !default;
-$button-default-text-color: $color-black !default;
 $button-disabled-text-color: rgba($color-black, 0.26) !default;
-$button-flat-color-hover: rgba($color-black, 0.26) !default;
+$button-disabled-background-color: rgba($color-black, 0.12) !default;
 $button-border-radius: 0.2 * $unit;
 $button-floating-font-size: $unit * 2.4;
-$button-floating-height-mini: $unit * 4;
-$button-floating-mini-font-size: $button-floating-height-mini / 2.25;
 $button-floating-height: $unit * 5.6;
+$button-floating-mini-height: $unit * 4;
+$button-floating-mini-font-size: $button-floating-mini-height / 2.25;
 $button-height: $unit * 3.6;
-$button-solid-background-color: rgba($palette-grey-500, 0.20) !default;
-$button-solid-disabled-background-color: rgba($color-black, 0.12) !default;
 $button-squared-icon-margin: $unit * .6;
 $button-squared-min-width: 9 * $unit;
 $button-squared-padding: 0 $unit * 1.2;
diff --git a/components/button/readme.md b/components/button/readme.md
index 9e77ee295..82dc9a878 100644
--- a/components/button/readme.md
+++ b/components/button/readme.md
@@ -4,7 +4,7 @@ A [button](https://www.google.com/design/spec/components/buttons.html) clearly c
 
 <!-- example -->
 ```jsx
-import Button from 'react-toolbox/lib/button';
+import {Button, IconButton} from 'react-toolbox/lib/button';
 
 const GithubIcon = () => (
   <svg viewBox="0 0 284 277">
@@ -22,10 +22,8 @@ const TestButtons = () => (
     <Button icon='inbox' label='Inbox' flat />
     <Button icon='add' floating />
     <Button icon='add' floating accent mini />
-    <Button icon='mood' toggle />
-    <Button toggle primary>
-      <GithubIcon />
-    </Button>
+    <IconButton icon='favorite' accent />
+    <IconButton primary><GithubIcon /></IconButton>
     <Button icon='add' label='Add this' flat primary />
     <Button icon='add' label='Add this' flat disabled />
   </div>
@@ -42,17 +40,22 @@ const TestButtons = () => (
 | `flat`      | `Boolean`  | `false` | If true, the button will have a flat look. |
 | `floating`  | `Boolean`  | `false` | If true, the button will have a floating look. |
 | `icon`      | `String`  |  | Value of the icon (See icon component). |
+| `inverse`    | `Boolean`  |  | If true, the neutral colors are inverted. Useful to put a button over a dark background. |
 | `label`     | `String`  |  | The text string to use for the name of the button.|
 | `loading`   | `Boolean`  | `false` | If true, component will be disabled and show a loading animation.|
 | `mini`  | `Boolean` | `false`  | To be used with floating button. If true the button will be smaller.|
-| `onClick`  | `Function` |  | Callback called when the button is clicked.|
 | `primary`  | `false` | `false` | Indicates if the button should have primary color.|
 | `raised`   | `Boolean`  | `false` | If true, the button will have a raised look. |
 | `ripple`  | `Boolean`  | `true`    | If true, component will have a ripple effect on click.|
-| `toggle`   | `Boolean`  | `false` | If true, the button will have a toggle icon look. |
 | `tooptip`   | `String`  |  | The value will be shown as a tooltip when the button is hovered. |
 | `tooltipDelay`     | `Number`  |  | Amount of time in milliseconds before the tooltip is visible.|
 
 By default it will have neutral colors and a flat aspect even though the `flat` property is `false` by default. Also, some properties exclude others, for example a button cannot be `flat` and `raised` at the same time. 
 
 The `Button` component also accept children so if you want to provide a custom component and text instead of a `label` and `icon` you can do it too. Just check the examples.
+
+## Icon Button
+
+Icons are appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star to an item. They are best located in app bars, toolbars, action buttons or toggles.
+
+We provide an `IconButton` component bundled with `Button` component. They share a similar API excluding aspect properties.
diff --git a/components/button/style.scss b/components/button/style.scss
index 4caa16925..d92050f5d 100644
--- a/components/button/style.scss
+++ b/components/button/style.scss
@@ -11,7 +11,6 @@
   align-content: center;
   align-items: center;
   justify-content: center;
-  color: $button-default-text-color;
   text-align: center;
   text-decoration: none;
   white-space: nowrap;
@@ -33,6 +32,7 @@
     display: inline-block;
     width: 1em;
     height: 1em;
+    font-size: 120%;
     vertical-align: middle;
     fill: currentColor;
   }
@@ -42,6 +42,11 @@
   [data-react-toolbox="ripple"] {
     overflow: hidden;
   }
+  &[disabled] {
+    color: $button-disabled-text-color;
+    pointer-events: none;
+    cursor: auto;
+  }
 }
 
 %squared {
@@ -58,71 +63,55 @@
   }
 }
 
-%disabled {
-  color: $button-disabled-text-color;
-  pointer-events: none;
-  cursor: auto;
-}
-
-.flat {
-  @extend %button;
-  @extend %squared;
-  background: transparent;
-  &:hover {
-    background: $button-flat-color-hover;
+%solid {
+  &[disabled] {
+    @include shadow-2dp();
+    background-color: $button-disabled-background-color;
   }
-  &:focus:not(:active) {
-    background: $button-flat-color-hover;
+  &:active {
+    @include shadow-4dp();
   }
-  &[disabled] {
-    @extend %disabled;
+  &:focus:not(:active) {
+    @include focus-shadow();
   }
 }
 
 .raised {
   @extend %button;
   @extend %squared;
+  @extend %solid;
   @include shadow-2dp();
-  background: $button-solid-background-color;
-  &:active {
-    @include shadow-4dp();
-  }
-  &:focus:not(:active) {
-    @include focus-shadow();
-  }
-  &[disabled] {
-    @extend %disabled;
-    @include shadow-2dp();
-    background-color: $button-solid-disabled-background-color;
-  }
+}
+
+.flat {
+  @extend %button;
+  @extend %squared;
+  background: transparent;
 }
 
 .floating {
   @extend %button;
+  @extend %solid;
   width: $button-floating-height;
   height: $button-floating-height;
   font-size: $button-floating-font-size;
-  background: $button-solid-background-color;
   border-radius: 50%;
   box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12),
               0 1px 1px 0 rgba(0, 0, 0, .24);
-  &:active {
-    @include shadow-4dp();
-  }
-  &:focus:not(:active) {
-    @include focus-shadow();
-  }
-  &[disabled] {
-    @extend %disabled;
-    @include shadow-2dp();
-    background-color: $button-solid-disabled-background-color;
-  }
   .icon {
     line-height: $button-floating-height;
   }
   [data-react-toolbox="ripple"] {
     border-radius: 50%;
   }
+  &.mini {
+    width: $button-floating-mini-height;
+    height: $button-floating-mini-height;
+    font-size: $button-floating-mini-font-size;
+    .icon {
+      line-height: $button-floating-mini-height;
+    }
+  }
 }
 
 .toggle {
@@ -130,10 +119,7 @@
   width: $button-height;
   background: transparent;
   border-radius: 50%;
-  &[disabled] {
-    @extend %disabled;
-  }
-  > .icon {
+  > .icon, svg {
     font-size: $button-toggle-font-size;
     line-height: $button-height;
     vertical-align: middle;
@@ -143,38 +129,6 @@
   }
 }
 
-.primary:not([disabled]) {
-  &.raised, &.floating {
-    color: $button-primary-color-contrast;
-    background: $button-primary-color;
-  }
-  &.flat, &.toggle {
-    color: $button-primary-color;
-    &:focus:not(:active) {
-      background: $button-primary-color-hover;
-    }
-  }
-  &.flat:hover {
-    background: $button-primary-color-hover;
-  }
-}
-
-.accent:not([disabled]) {
-  &.raised, &.floating {
-    color: $button-accent-color-contrast;
-    background-color: $button-accent-color;
-  }
-  &.flat, &.toggle {
-    color: $button-accent-color;
-    &:focus:not(:active) {
-      background: $button-accent-color-hover;
-    }
-  }
-  &.flat:hover {
-    background: $button-accent-color-hover;
-  }
-}
-
 .neutral:not([disabled]) {
   &:not(.inverse) {
     &.raised, &.floating {
@@ -209,11 +163,23 @@
   }
 }
 
-.mini.floating {
-  width: $button-floating-height-mini;
-  height: $button-floating-height-mini;
-  font-size: $button-floating-mini-font-size;
-  .icon {
-    line-height: $button-floating-height-mini;
+@mixin btn-colors($name, $color, $background, $hover) {
+  .#{$name}:not([disabled]) {
+    &.raised, &.floating {
+      color: $color;
+      background: $background;
+    }
+    &.flat, &.toggle {
+      color: $background;
+      &:focus:not(:active) {
+        background: $hover;
+      }
+    }
+    &.flat:hover {
+      background: $hover;
+    }
   }
 }
+
+@include btn-colors('primary', $button-primary-color-contrast, $button-primary-color, $button-primary-color-hover);
+@include btn-colors('accent', $button-accent-color-contrast, $button-accent-color, $button-accent-color-hover);
diff --git a/components/index.js b/components/index.js
index 0ef64c859..04708dd98 100644
--- a/components/index.js
+++ b/components/index.js
@@ -2,7 +2,8 @@ import './utils/polyfills'; // Import polyfills for IE11
 export App from './app';
 export AppBar from './app_bar';
 export Autocomplete from './autocomplete';
-export Button from './button';
+export Button from './button/Button';
+export IconButton from './button/IconButton';
 export * from './card';
 export Checkbox from './checkbox';
 export DatePicker from './date_picker';
diff --git a/docs/app/components/layout/main/modules/examples/button_example_1.txt b/docs/app/components/layout/main/modules/examples/button_example_1.txt
index d929b5903..75d2a1681 100644
--- a/docs/app/components/layout/main/modules/examples/button_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/button_example_1.txt
@@ -13,16 +13,11 @@ const ButtonsTest = () => (
     <Button icon='bookmark' label='Bookmark' raised primary />
     <Button icon='inbox' label='Inbox' flat />
     <Button icon='add' floating />
-    <Button icon='add' floating primary />
-    <Button icon='add' floating primary disabled />
     <Button icon='add' floating accent mini />
-    <Button icon='mood' toggle />
-    <Button toggle primary>
-      <GithubIcon />
-    </Button>
+    <IconButton icon='favorite' accent />
+    <IconButton primary><GithubIcon /></IconButton>
     <Button icon='add' label='Add this' flat primary />
     <Button icon='add' label='Add this' flat disabled />
-    <Button icon='bookmark' label='Bookmark' raised primary loading />
   </div>
 );
 
diff --git a/spec/components/button.jsx b/spec/components/button.jsx
index ee218acca..806ca2473 100644
--- a/spec/components/button.jsx
+++ b/spec/components/button.jsx
@@ -23,7 +23,12 @@ const ButtonTest = () => (
     <Button icon='add' floating primary disabled />
     <Button icon='add' floating accent mini />
     <IconButton icon='favorite' accent />
-    <IconButton primary><GithubIcon/></IconButton>
+    <IconButton icon='favorite' inverse />
+    <IconButton icon='favorite' />
+    <IconButton icon='favorite' disabled />
+    <IconButton primary tooltip='Bookmark Tooltip' tooltipDelay={1000}>
+      <GithubIcon/>
+    </IconButton>
     <Button icon='add' label='Add this' flat primary />
     <Button icon='add' label='Add this' flat disabled />
     <Button icon='bookmark' label='Bookmark' raised primary loading />

From 404e2e44ce37f86cc27a9e070c082318e42527dc Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 24 Nov 2015 22:46:09 +0100
Subject: [PATCH 0168/1024] Use IconButton in card examples

---
 spec/components/card.jsx | 139 +++++++++++----------------------------
 1 file changed, 39 insertions(+), 100 deletions(-)

diff --git a/spec/components/card.jsx b/spec/components/card.jsx
index 5991b40b2..f7399694b 100644
--- a/spec/components/card.jsx
+++ b/spec/components/card.jsx
@@ -1,39 +1,21 @@
 import React from 'react';
-import Button from '../../components/button';
-import Card, {
-  CardActions,
-  CardMedia,
-  CardText,
-  CardTitle
-} from '../../components/card';
+import Button, { IconButton } from '../../components/button';
+import Card, { CardActions, CardMedia, CardText, CardTitle } from '../../components/card';
 import style from '../style';
 
 const dummyText = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.';
 
-const Spacer = () => {
-  return (
-    <div style={{
-      display: 'flex',
-      flex: '1 1 auto'
-    }}/>
-  );
-};
-
-const DemoList = (props) => <ul className={style.demoList}>{props.children}</ul>;
-
-const DemoListItem = (props) => (
+const Spacer = () => <div style={{display: 'flex', flex: '1 1 auto'}}/>;
+const DemoList = ({children}) => <ul className={style.demoList}>{children}</ul>;
+const DemoListItem = ({component, name}) => (
   <li className={style.demoListItem}>
-    <div className={style.demo}>
-      {props.component}
-    </div>
-    <div className={style.demoName}>
-      {props.name}
-    </div>
+    <div className={style.demo}>{component}</div>
+    <div className={style.demoName}>{name}</div>
   </li>
 );
 
-const basic = [
-  {
+const cards = {
+  basic: [{
     name: 'Basic Card',
     component: (
       <Card className={style.card}>
@@ -63,11 +45,8 @@ const basic = [
         </CardActions>
       </Card>
     )
-  }
-];
-
-const media = [
-  {
+  }],
+  media: [{
     name: '16:9 Card Media Area',
     component: (
       <Card className={style.card}>
@@ -116,11 +95,8 @@ const media = [
         </CardMedia>
       </Card>
     )
-  }
-];
-
-const avatar = [
-  {
+  }],
+  avatar: [{
     name: 'Avatar Card Title',
     component: (
       <Card className={style.card}>
@@ -134,8 +110,8 @@ const avatar = [
           image="https://placeimg.com/800/450/nature"
         />
         <CardActions style={{ justifyContent: 'flex-end' }}>
-          <Button toggle icon="share" />
-          <Button toggle icon="favorite" />
+          <IconButton icon="share" />
+          <IconButton icon="favorite" />
         </CardActions>
       </Card>
     )
@@ -154,18 +130,15 @@ const avatar = [
           <iframe width="1280" height="720" src="https://www.youtube.com/embed/sGbxmsDFVnE?rel=0&amp;showinfo=0" frameBorder="0" allowFullScreen></iframe>
         </CardMedia>
         <CardActions style={{ justifyContent: 'flex-end' }}>
-          <Button toggle icon="report_problem" />
+          <IconButton icon="report_problem" />
           <Spacer/>
-          <Button toggle icon="share" />
-          <Button toggle icon="favorite" />
+          <IconButton icon="share" />
+          <IconButton icon="favorite" />
         </CardActions>
       </Card>
     )
-  }
-];
-
-const horizontal = [
-  {
+  }],
+  horizontal: [{
     name: 'Alternative Layout Example',
     component: (
       <Card className={style.card}>
@@ -201,11 +174,8 @@ const horizontal = [
         </div>
       </Card>
     )
-  }
-];
-
-const small = [
-  {
+  }],
+  small: [{
     name: 'Small Media Card',
     component: (
       <Card>
@@ -216,9 +186,9 @@ const small = [
           <CardTitle>Test</CardTitle>
         </CardMedia>
         <CardActions style={{justifyContent: 'center'}}>
-          <Button toggle icon="thumb_down" />
-          <Button toggle icon="thumb_up" />
-          <Button toggle icon="turned_in_not" />
+          <IconButton icon="thumb_down" />
+          <IconButton icon="thumb_up" />
+          <IconButton icon="turned_in_not" />
         </CardActions>
       </Card>
     )
@@ -232,55 +202,24 @@ const small = [
           image="https://placeimg.com/280/280/people"
         >
           <CardActions style={{justifyContent: 'center'}}>
-            <Button inverse toggle icon="fast_rewind" />
-            <Button inverse toggle icon="play_arrow" />
-            <Button inverse toggle icon="fast_forward" />
+            <IconButton inverse icon="fast_rewind" />
+            <IconButton inverse icon="play_arrow" />
+            <IconButton inverse icon="fast_forward" />
           </CardActions>
         </CardMedia>
       </Card>
     )
-  }
-];
-
-class CardTest extends React.Component {
-
-  render () {
-    return (
-      <div>
-        <h2>Cards</h2>
-
-        <DemoList>
-          {basic.map((demo, i) => (
-            <DemoListItem key={i} {...demo}/>
-          ))}
-        </DemoList>
-
-        <DemoList>
-          {media.map((demo, i) => (
-            <DemoListItem key={i} {...demo}/>
-          ))}
-        </DemoList>
-
-        <DemoList>
-          {avatar.map((demo, i) => (
-            <DemoListItem key={i} {...demo}/>
-          ))}
-        </DemoList>
-
-        <DemoList>
-          {horizontal.map((demo, i) => (
-            <DemoListItem key={i} {...demo}/>
-          ))}
-        </DemoList>
+  }]
+};
 
-        <DemoList>
-          {small.map((demo, i) => (
-            <DemoListItem key={i} {...demo}/>
-          ))}
-        </DemoList>
-      </div>
-    );
-  }
-}
+const CardTest = () => (
+  <div>
+    {Object.keys(cards).map((key) => (
+      <DemoList key={key}>
+        {cards[key].map((demo, i) => <DemoListItem key={key + i} {...demo} />)}
+      </DemoList>
+    ))}
+  </div>
+);
 
 export default CardTest;

From 2e414e9443c27d6060d8afd4e423291dd4910d5b Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 24 Nov 2015 22:58:50 +0100
Subject: [PATCH 0169/1024] Use IconButton in Calendar

---
 components/date_picker/Calendar.jsx        | 25 ++++++----------------
 components/date_picker/style.calendar.scss |  9 +++-----
 2 files changed, 9 insertions(+), 25 deletions(-)

diff --git a/components/date_picker/Calendar.jsx b/components/date_picker/Calendar.jsx
index 97c5b70d6..086b5a8e0 100644
--- a/components/date_picker/Calendar.jsx
+++ b/components/date_picker/Calendar.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import CssTransitionGroup from 'react-addons-css-transition-group';
 import { SlideLeft, SlideRight } from '../animations';
-import FontIcon from '../font_icon';
+import { IconButton } from '../button';
 import Ripple from '../ripple';
 import CalendarMonth from './CalendarMonth';
 import time from '../utils/time';
@@ -50,19 +50,10 @@ class Calendar extends React.Component {
     this.props.onChange(viewDate);
   };
 
-  incrementViewMonth = () => {
-    this.refs.rippleRight.start(event);
+  changeViewMonth = (direction, step) => {
     this.setState({
-      direction: 'right',
-      viewDate: time.addMonths(this.state.viewDate, 1)
-    });
-  };
-
-  decrementViewMonth = () => {
-    this.refs.rippleLeft.start(event);
-    this.setState({
-      direction: 'left',
-      viewDate: time.addMonths(this.state.viewDate, -1)
+      direction,
+      viewDate: time.addMonths(this.state.viewDate, step)
     });
   };
 
@@ -92,12 +83,8 @@ class Calendar extends React.Component {
     const animation = this.state.direction === 'left' ? SlideLeft : SlideRight;
     return (
       <div data-react-toolbox='calendar'>
-        <FontIcon className={style.prev} value='chevron_left' onMouseDown={this.decrementViewMonth}>
-          <Ripple ref='rippleLeft' className={style.ripple} spread={1.2} centered />
-        </FontIcon>
-        <FontIcon className={style.next} value='chevron_right' onMouseDown={this.incrementViewMonth}>
-          <Ripple ref='rippleRight' className={style.ripple} spread={1.2} centered />
-        </FontIcon>
+        <IconButton className={style.prev} icon='chevron_left' onClick={this.changeViewMonth.bind(this, 'left', -1)} />
+        <IconButton className={style.next} icon='chevron_right' onClick={this.changeViewMonth.bind(this, 'right', 1)} />
         <CssTransitionGroup transitionName={animation} transitionEnterTimeout={350} transitionLeaveTimeout={350}>
           <CalendarMonth
             key={this.state.viewDate.getMonth()}
diff --git a/components/date_picker/style.calendar.scss b/components/date_picker/style.calendar.scss
index d5da9cc96..f7f9af682 100644
--- a/components/date_picker/style.calendar.scss
+++ b/components/date_picker/style.calendar.scss
@@ -12,14 +12,9 @@
     position: absolute;
     top: 0;
     z-index: $z-index-high;
-    width: $calendar-row-height;
-    height: $calendar-row-height;
-    font-size: $calendar-arrows-font-size;
-    line-height: $calendar-row-height;
-    color: $calendar-arrows-color;
-    text-align: center;
     cursor: pointer;
     opacity: .7;
+    height: 3.6 * $unit;
   }
   .prev {
     left: 0;
@@ -30,7 +25,9 @@
 }
 
 .title {
+  display: inline-block;
   font-weight: 500;
+  line-height: 3.6 * $unit;
 }
 
 .years {

From c42b3c614c128093965a84de9d8e5cf987db6989 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 24 Nov 2015 23:03:27 +0100
Subject: [PATCH 0170/1024] Use IconButton in IconMenu

---
 components/menu/IconMenu.jsx         | 16 ++++------------
 components/menu/style.icon_menu.scss |  7 -------
 2 files changed, 4 insertions(+), 19 deletions(-)

diff --git a/components/menu/IconMenu.jsx b/components/menu/IconMenu.jsx
index 685febadd..087e716c0 100644
--- a/components/menu/IconMenu.jsx
+++ b/components/menu/IconMenu.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import FontIcon from '../font_icon';
+import { IconButton } from '../button';
 import Menu from './Menu';
-import Ripple from '../ripple';
 import style from './style.icon_menu';
 
 class IconMenu extends React.Component {
@@ -34,23 +33,17 @@ class IconMenu extends React.Component {
     if (this.props.onClick) this.props.onClick();
   };
 
-  handleMouseDown = (event) => {
-    if (this.props.iconRipple) {
-      this.refs.ripple.start(event);
-    }
-  };
-
   render () {
     let className = style.root;
     if (this.props.className) className += ` ${this.props.className}`;
 
     return (
       <div className={className}>
-        <FontIcon
+        <IconButton
           className={style.icon}
+          icon={this.props.icon}
           onClick={this.handleButtonClick}
-          onMouseDown={this.handleMouseDown}
-          value={this.props.icon}
+          ripple={this.props.iconRipple}
         />
         <Menu
           ref='menu'
@@ -64,7 +57,6 @@ class IconMenu extends React.Component {
         >
           {this.props.children}
         </Menu>
-        {this.props.iconRipple ? <Ripple ref='ripple' className={style.ripple} spread={2.4} centered /> : null}
       </div>
     );
   }
diff --git a/components/menu/style.icon_menu.scss b/components/menu/style.icon_menu.scss
index 961680bfc..e45b61838 100644
--- a/components/menu/style.icon_menu.scss
+++ b/components/menu/style.icon_menu.scss
@@ -8,12 +8,5 @@
 }
 
 .icon {
-  font-size: $menu-icon-size;
-  vertical-align: middle;
   cursor: pointer;
 }
-
-.ripple {
-  opacity: .1;
-  transition-duration: $menu-icon-ripple-duration;
-}

From 87cf774a37729902c1754636124d73e74582352c Mon Sep 17 00:00:00 2001
From: andmilj <andrej.miljus@gmail.com>
Date: Tue, 24 Nov 2015 23:46:31 +0100
Subject: [PATCH 0171/1024] changing months in datepicker (Firefox) is failing
 as event object is undefined

---
 components/date_picker/calendar/index.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/date_picker/calendar/index.jsx b/components/date_picker/calendar/index.jsx
index deaded3fd..fda0403ff 100644
--- a/components/date_picker/calendar/index.jsx
+++ b/components/date_picker/calendar/index.jsx
@@ -50,7 +50,7 @@ class Calendar extends React.Component {
     this.props.onChange(viewDate);
   };
 
-  incrementViewMonth = () => {
+  incrementViewMonth = (event) => {
     this.refs.rippleRight.start(event);
     this.setState({
       direction: 'right',
@@ -58,7 +58,7 @@ class Calendar extends React.Component {
     });
   };
 
-  decrementViewMonth = () => {
+  decrementViewMonth = (event) => {
     this.refs.rippleLeft.start(event);
     this.setState({
       direction: 'left',

From b190ecc85727b341b064446aa5b88494352cd84b Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Wed, 25 Nov 2015 09:59:12 +0700
Subject: [PATCH 0172/1024] No abbr...

---
 components/table/Table.jsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/table/Table.jsx b/components/table/Table.jsx
index 93c492f91..ebcc2b2af 100644
--- a/components/table/Table.jsx
+++ b/components/table/Table.jsx
@@ -62,17 +62,17 @@ class Table extends React.Component {
   }
 
   renderBody () {
-    const rows = this.props.source.map((data, idx) => {
+    const rows = this.props.source.map((data, index) => {
       return (
         <TableRow
           data={data}
-          index={idx}
-          key={idx}
+          index={index}
+          key={index}
           model={this.props.model}
-          onChange={this.handleRowChange.bind(this, idx)}
-          onSelect={this.handleRowSelect.bind(this, idx)}
+          onChange={this.handleRowChange.bind(this, index)}
+          onSelect={this.handleRowSelect.bind(this, index)}
           selectable={this.props.selectable}
-          selected={this.props.selected.indexOf(idx) !== -1}
+          selected={this.props.selected.indexOf(index) !== -1}
         />
       );
     });

From 9de67a44bf375ab8027bd9d9f121355f73b8d14b Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Wed, 25 Nov 2015 11:26:33 +0700
Subject: [PATCH 0173/1024] First version of stateless form

---
 components/form/Form.jsx | 146 ++++++++-------------------------------
 1 file changed, 29 insertions(+), 117 deletions(-)

diff --git a/components/form/Form.jsx b/components/form/Form.jsx
index 532a2e2cb..afcb528aa 100644
--- a/components/form/Form.jsx
+++ b/components/form/Form.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import style from './style';
+import ReactDOM from 'react-dom';
 import Autocomplete from '../autocomplete';
 import Button from '../button';
 import Checkbox from '../checkbox';
@@ -10,12 +10,27 @@ import RadioGroup from '../radio/RadioGroup';
 import Slider from '../slider';
 import Switch from '../switch';
 import TimePicker from '../time_picker';
+import style from './style';
+
+const Component = {
+  'autocomplete': Autocomplete,
+  'button': Button,
+  'checkbox': Checkbox,
+  'datepicker': DatePicker,
+  'dropdown': Dropdown,
+  'input': Input,
+  'radioGroup': RadioGroup,
+  'slider': Slider,
+  'switch': Switch,
+  'timepicker': TimePicker
+};
 
 class Form extends React.Component {
   static propTypes = {
     attributes: React.PropTypes.array,
     children: React.PropTypes.node,
     className: React.PropTypes.string,
+    model: React.PropTypes.object,
     onChange: React.PropTypes.func,
     onError: React.PropTypes.func,
     onSubmit: React.PropTypes.func,
@@ -28,135 +43,32 @@ class Form extends React.Component {
     className: ''
   };
 
-  state = {
-    attributes: this.storage(this.props)
-  };
-
-  componentWillReceiveProps (next_props) {
-    if (next_props.attributes) {
-      const attributes = this.storage(next_props);
-      this.setState({attributes});
-      this.setValue(attributes.map((item) => { return item; }));
-    }
-  }
-
   onSubmit = (event) => {
     event.preventDefault();
-    if (this.props.onSubmit) {
-      this.props.onSubmit(event, this);
-    }
+    if (this.props.onSubmit) this.props.onSubmit(event);
   };
 
-  onChange = (event) => {
-    let is_valid = true;
-    const value = this.getValue();
-    for (const attr of this.state.attributes) {
-      if (attr.required && value[attr.ref] !== undefined && value[attr.ref].trim() === '') {
-        is_valid = false;
-        if (this.refs[attr.ref].setError) this.refs[attr.ref].setError('Requited field');
-        break;
-      }
-    }
-
-    if (this.props.onChange) this.props.onChange(event, this);
-    if (this.props.storage) this.storage(this.props, value);
-
-    if (is_valid) {
-      if (this.refs.submit) this.refs.submit.getDOMNode().removeAttribute('disabled');
-      if (this.props.onValid) this.props.onValid(event, this);
-    } else {
-      if (this.refs.submit) this.refs.submit.getDOMNode().setAttribute('disabled', true);
-      if (this.props.onError) this.props.onError(event, this);
+  onChange = (field, event) => {
+    if (this.props.onChange) {
+      const value = event.target.value;
+      this.props.onChange(field, value, event);
     }
   };
 
-  storage (props, value) {
-    const key = `react-toolbox-form-${props.storage}`;
-    if (value) {
-      const store = {};
-      for (const attr of props.attributes) {
-        if (attr.storage) store[attr.ref] = value[attr.ref];
-      }
-      window.localStorage.setItem(key, JSON.stringify(store));
-    } else if (props.storage) {
-      const store = JSON.parse(window.localStorage.getItem(key) || {});
-      for (const input of props.attributes) {
-        if (store && store[input.ref]) {
-          input.value = store[input.ref];
-        }
-      }
-    }
-
-    return props.attributes;
-  }
-
-  getValue () {
-    const value = {};
-    for (const ref of Object.keys(this.refs)) {
-      const el = this.refs[ref];
-      if (el.getValue) {
-        if (ref.indexOf('.') === -1) {
-          value[ref] = el.getValue();
-        } else {
-          let parent = value;
-          const hierarchy = ref.split('.');
-          hierarchy.forEach((attr, index) => {
-            if (index === hierarchy.length - 1) {
-              parent[attr] = el.getValue();
-            } else {
-              parent[attr] = parent[attr] || {};
-              parent = parent[attr];
-            }
-          });
-        }
-      }
-    }
-
-    return value;
-  }
-
-  setValue (data = {}) {
-    for (const field of data) {
-      if (this.refs[field.ref].setValue) {
-        this.refs[field.ref].setValue(field.value);
-      }
-    }
+  renderFields () {
+    return Object.keys(this.props.model).map((field, index) => {
+      const properties = this.props.model[field];
+      const Field = Component[properties.kind.toLowerCase()];
+      return <Field key={index} {...properties} onChange={this.onChange.bind(this, field)} />
+    });
   }
 
   render () {
     const className = `${style.root} ${this.props.className}`;
-    const attributes = this.state.attributes.map((attribute, index) => {
-      if (attribute.type === 'autocomplete') {
-        return <Autocomplete key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'submit') {
-        return <Button key={index} {...attribute} ref='submit' onClick={this.onSubmit} type='square' />;
-      } else if (attribute.type === 'checkbox') {
-        return <Checkbox key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'date_picker') {
-        return <DatePicker key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'dropdown') {
-        return <Dropdown key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'radio_group') {
-        return <RadioGroup key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'slider') {
-        return <Slider key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'switch') {
-        return <Switch key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'time_picker') {
-        return <TimePicker key={index} {...attribute} onChange={this.onChange}/>;
-      } else {
-        return <Input key={index} {...attribute} />;
-      }
-    });
 
     return (
-      <form
-        data-react-toolbox='form'
-        className={className}
-        onChange={this.onChange}
-        onSubmit={this.onSubmit}
-      >
-        {attributes}
+      <form data-react-toolbox='form' className={className} onSubmit={this.onSubmit}>
+        {this.renderFields()}
         {this.props.children}
       </form>
     );

From 4d520115804cd087a3a5128c0c5a2b9674475469 Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Wed, 25 Nov 2015 11:57:26 +0700
Subject: [PATCH 0174/1024] Fixed typo

---
 components/form/Form.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/form/Form.jsx b/components/form/Form.jsx
index afcb528aa..132bd5e79 100644
--- a/components/form/Form.jsx
+++ b/components/form/Form.jsx
@@ -59,7 +59,7 @@ class Form extends React.Component {
     return Object.keys(this.props.model).map((field, index) => {
       const properties = this.props.model[field];
       const Field = Component[properties.kind.toLowerCase()];
-      return <Field key={index} {...properties} onChange={this.onChange.bind(this, field)} />
+      return <Field key={index} {...properties} onChange={this.onChange.bind(this, field)} />;
     });
   }
 

From fd0e565013f62b9cbc14c54a502c5ba5c8c7ecfe Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Wed, 25 Nov 2015 17:24:06 +0700
Subject: [PATCH 0175/1024] New interface for onChange event (value, event)

---
 components/input/Input.jsx | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/components/input/Input.jsx b/components/input/Input.jsx
index e2ee34a6f..7c147f741 100644
--- a/components/input/Input.jsx
+++ b/components/input/Input.jsx
@@ -34,14 +34,23 @@ class Input extends React.Component {
     type: 'text'
   };
 
+  handleChange = (event) => {
+    if (this.props.onChange) this.props.onChange(event.target.value, event);
+  };
+
   renderInput () {
     let className = style.input;
     if (this.props.value && this.props.value.length > 0) className += ` ${style.filled}`;
-    if (this.props.multiline) {
-      return <textarea ref='input' role='input' {...this.props} className={className} />;
-    } else {
-      return <input ref='input' role='input' {...this.props} className={className} />;
-    }
+
+    const element = this.props.multiline ? 'textarea' : 'input';
+    return React.createElement(element, {
+      ...this.props,
+      className,
+      onChange: this.handleChange,
+      ref: 'input',
+      role: 'input',
+      onMouseDown: this.handleMouseDown
+    });
   }
 
   renderUnderline () {

From 9b1cb72e7cf975c4d3b94fd1dfbc792a5026f433 Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Wed, 25 Nov 2015 17:28:36 +0700
Subject: [PATCH 0176/1024] New interface for onChange event (value, event)

---
 components/checkbox/Checkbox.jsx                            | 3 ++-
 components/checkbox/readme.md                               | 6 ++----
 .../layout/main/modules/examples/checkbox_example_1.txt     | 4 +---
 spec/components/checkbox.jsx                                | 6 ++----
 4 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/components/checkbox/Checkbox.jsx b/components/checkbox/Checkbox.jsx
index 17d4ba987..3960d3d96 100644
--- a/components/checkbox/Checkbox.jsx
+++ b/components/checkbox/Checkbox.jsx
@@ -24,7 +24,8 @@ class Checkbox extends React.Component {
   handleClick = (event) => {
     events.pauseEvent(event);
     if (!this.props.disabled && this.props.onChange) {
-      this.props.onChange(event);
+      const value = !this.refs.input.checked;
+      this.props.onChange(value, event);
     }
   };
 
diff --git a/components/checkbox/readme.md b/components/checkbox/readme.md
index cdbd29215..371247ffc 100644
--- a/components/checkbox/readme.md
+++ b/components/checkbox/readme.md
@@ -12,10 +12,8 @@ class TestCheckbox extends React.Component {
     check2: false
   };
 
-  handleChange = (field) => {
-    const newState = {};
-    newState[field] = !this.state[field];
-    this.setState(newState);
+  handleChange = (field, value) => {
+    this.setState({ [field]: value });
   };
 
   render () {
diff --git a/docs/app/components/layout/main/modules/examples/checkbox_example_1.txt b/docs/app/components/layout/main/modules/examples/checkbox_example_1.txt
index 327478a70..9acebc1e9 100644
--- a/docs/app/components/layout/main/modules/examples/checkbox_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/checkbox_example_1.txt
@@ -5,9 +5,7 @@ class TestCheckbox extends React.Component {
   };
 
   handleChange = (field) => {
-    const newState = {};
-    newState[field] = !this.state[field];
-    this.setState(newState);
+    this.setState({ [key]: value });
   };
 
   render () {
diff --git a/spec/components/checkbox.jsx b/spec/components/checkbox.jsx
index db3abf525..da39fdd58 100644
--- a/spec/components/checkbox.jsx
+++ b/spec/components/checkbox.jsx
@@ -8,10 +8,8 @@ class CheckboxTest extends React.Component {
     checkbox_3: true
   };
 
-  handleChange = (key) => {
-    const state = this.state;
-    state[key] = !state[key];
-    this.setState(state);
+  handleChange = (field, value) => {
+    this.setState({ [field]: value });
   };
 
   handleFocus = () => {

From d7bd4f5e5825fc0897a7d37012564beaad6577cc Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Wed, 25 Nov 2015 17:31:59 +0700
Subject: [PATCH 0177/1024] New interface for onChange event (value, event)

---
 components/switch/Switch.jsx                                 | 5 ++++-
 components/switch/readme.md                                  | 4 ++--
 .../layout/main/modules/examples/switch_example_1.txt        | 4 ++--
 spec/components/switch.jsx                                   | 4 ++--
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/components/switch/Switch.jsx b/components/switch/Switch.jsx
index c27393afb..09175b014 100644
--- a/components/switch/Switch.jsx
+++ b/components/switch/Switch.jsx
@@ -23,7 +23,10 @@ class Switch extends React.Component {
 
   handleChange = (event) => {
     events.pauseEvent(event);
-    if (this.props.onChange && !this.props.disabled) this.props.onChange(event);
+    if (this.props.onChange && !this.props.disabled) {
+      const value = !this.refs.input.checked;
+      this.props.onChange(value, event);
+    }
   };
 
   handleInputClick = (event) => {
diff --git a/components/switch/readme.md b/components/switch/readme.md
index 2591e8e00..5f05e999e 100644
--- a/components/switch/readme.md
+++ b/components/switch/readme.md
@@ -11,9 +11,9 @@ class SwitchTest extends React.Component {
     switch: [true, false, false]
   };
 
-  handleChange = (index) => {
+  handleChange = (index, value) => {
     const state = this.state.switch;
-    state[index] = !state[index];
+    state[index] = value;
     this.setState({switch: state});
   };
 
diff --git a/docs/app/components/layout/main/modules/examples/switch_example_1.txt b/docs/app/components/layout/main/modules/examples/switch_example_1.txt
index ec41c31a4..fd99457ae 100644
--- a/docs/app/components/layout/main/modules/examples/switch_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/switch_example_1.txt
@@ -3,9 +3,9 @@ class SwitchTest extends React.Component {
     switch: [true, false, false]
   };
 
-  handleChange = (index) => {
+  handleChange = (index, value) => {
     const state = this.state.switch;
-    state[index] = !state[index];
+    state[index] = value;
     this.setState({switch: state});
   };
 
diff --git a/spec/components/switch.jsx b/spec/components/switch.jsx
index 238712080..b76688e05 100644
--- a/spec/components/switch.jsx
+++ b/spec/components/switch.jsx
@@ -6,9 +6,9 @@ class SwitchTest extends React.Component {
     switch: [true, false, false]
   };
 
-  handleChange = (index) => {
+  handleChange = (index, value) => {
     const state = this.state.switch;
-    state[index] = !state[index];
+    state[index] = value;
     this.setState({switch: state});
   };
 

From 05ec7a3227c8379df39609bbcf61429920de2fbf Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Wed, 25 Nov 2015 17:33:17 +0700
Subject: [PATCH 0178/1024] New interface for onChange event (key, value,
 event)

---
 components/form/Form.jsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/components/form/Form.jsx b/components/form/Form.jsx
index 132bd5e79..7bb05391d 100644
--- a/components/form/Form.jsx
+++ b/components/form/Form.jsx
@@ -48,11 +48,8 @@ class Form extends React.Component {
     if (this.props.onSubmit) this.props.onSubmit(event);
   };
 
-  onChange = (field, event) => {
-    if (this.props.onChange) {
-      const value = event.target.value;
-      this.props.onChange(field, value, event);
-    }
+  onChange = (field, value, event) => {
+    if (this.props.onChange) this.props.onChange(field, value, event);
   };
 
   renderFields () {

From e9566d0e5996cd596288c26c5337f26e406af6d6 Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Wed, 25 Nov 2015 17:40:14 +0700
Subject: [PATCH 0179/1024] New interface for onChange event (value, event)

---
 components/date_picker/DatePicker.jsx       | 4 ++--
 components/date_picker/DatePickerDialog.jsx | 4 ++--
 components/input/Input.jsx                  | 3 +--
 components/time_picker/TimePicker.jsx       | 4 ++--
 components/time_picker/TimePickerDialog.jsx | 4 ++--
 5 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/components/date_picker/DatePicker.jsx b/components/date_picker/DatePicker.jsx
index 632a08428..2debe2275 100644
--- a/components/date_picker/DatePicker.jsx
+++ b/components/date_picker/DatePicker.jsx
@@ -27,8 +27,8 @@ class DatePicker extends React.Component {
     this.setState({active: true});
   };
 
-  handleSelect = (value) => {
-    if (this.props.onChange) this.props.onChange(value);
+  handleSelect = (value, event) => {
+    if (this.props.onChange) this.props.onChange(value, event);
     this.setState({active: false});
   };
 
diff --git a/components/date_picker/DatePickerDialog.jsx b/components/date_picker/DatePickerDialog.jsx
index ab689110f..cb5881158 100644
--- a/components/date_picker/DatePickerDialog.jsx
+++ b/components/date_picker/DatePickerDialog.jsx
@@ -32,8 +32,8 @@ class CalendarDialog extends React.Component {
     this.setState(state);
   };
 
-  handleSelect = () => {
-    if (this.props.onSelect) this.props.onSelect(this.state.date);
+  handleSelect = (event) => {
+    if (this.props.onSelect) this.props.onSelect(this.state.date, event);
   };
 
   handleSwitchDisplay = (display) => {
diff --git a/components/input/Input.jsx b/components/input/Input.jsx
index 7c147f741..bb6617341 100644
--- a/components/input/Input.jsx
+++ b/components/input/Input.jsx
@@ -48,8 +48,7 @@ class Input extends React.Component {
       className,
       onChange: this.handleChange,
       ref: 'input',
-      role: 'input',
-      onMouseDown: this.handleMouseDown
+      role: 'input'
     });
   }
 
diff --git a/components/time_picker/TimePicker.jsx b/components/time_picker/TimePicker.jsx
index a0fd6d9e5..1fd7eb73e 100644
--- a/components/time_picker/TimePicker.jsx
+++ b/components/time_picker/TimePicker.jsx
@@ -32,8 +32,8 @@ class TimePicker extends React.Component {
     this.setState({active: true});
   };
 
-  handleSelect = (value) => {
-    if (this.props.onChange) this.props.onChange(value);
+  handleSelect = (value, event) => {
+    if (this.props.onChange) this.props.onChange(value, event);
     this.setState({active: false});
   };
 
diff --git a/components/time_picker/TimePickerDialog.jsx b/components/time_picker/TimePickerDialog.jsx
index 2dd84b323..9ca3083af 100644
--- a/components/time_picker/TimePickerDialog.jsx
+++ b/components/time_picker/TimePickerDialog.jsx
@@ -34,8 +34,8 @@ class TimePickerDialog extends React.Component {
     this.setState({displayTime: value});
   };
 
-  handleSelect = () => {
-    this.props.onSelect(this.state.displayTime);
+  handleSelect = (event) => {
+    this.props.onSelect(this.state.displayTime, event);
   };
 
   toggleTimeMode = () => {

From ee17dcf7aa690aeab5e0eeedcde425673cc6ac50 Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Wed, 25 Nov 2015 17:44:55 +0700
Subject: [PATCH 0180/1024] New interface for onChange event (value, event)

---
 components/slider/Slider.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/slider/Slider.jsx b/components/slider/Slider.jsx
index fbb0b8072..8d20cd756 100644
--- a/components/slider/Slider.jsx
+++ b/components/slider/Slider.jsx
@@ -67,10 +67,10 @@ class Slider extends React.Component {
     this.setState({inputValue: event.target.value});
   };
 
-  handleInputBlur = () => {
+  handleInputBlur = (event) => {
     const value = this.state.inputValue || 0;
     this.setState({inputFocused: false, inputValue: null}, () => {
-      this.props.onChange(this.trimValue(value));
+      this.props.onChange(this.trimValue(value), event);
     });
   };
 

From 0837999d08338785eb8fad574801c87fd08ff41f Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Wed, 25 Nov 2015 20:48:29 +0700
Subject: [PATCH 0181/1024] New interface for onChange event (value, event)

---
 components/dropdown/Dropdown.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/dropdown/Dropdown.jsx b/components/dropdown/Dropdown.jsx
index 866385287..2ece14237 100644
--- a/components/dropdown/Dropdown.jsx
+++ b/components/dropdown/Dropdown.jsx
@@ -31,9 +31,9 @@ class Dropdown extends React.Component {
     this.setState({active: true, up});
   };
 
-  handleSelect = (item) => {
+  handleSelect = (item, event) => {
     if (!this.props.disabled && this.props.onChange) {
-      this.props.onChange(item);
+      this.props.onChange(item, event);
       this.setState({active: false});
     }
   };

From 51ca0fab2069d8f3869cefcad77ad89a0f1dc4e7 Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Wed, 25 Nov 2015 20:56:12 +0700
Subject: [PATCH 0182/1024] New interface for onChange event (value, event)

---
 components/autocomplete/Autocomplete.jsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/autocomplete/Autocomplete.jsx b/components/autocomplete/Autocomplete.jsx
index 7a6bcbf4f..9e7cd1c2a 100644
--- a/components/autocomplete/Autocomplete.jsx
+++ b/components/autocomplete/Autocomplete.jsx
@@ -47,10 +47,10 @@ class Autocomplete extends React.Component {
     return true;
   }
 
-  handleChange = (keys) => {
+  handleChange = (keys, event) => {
     const key = this.props.multiple ? keys : keys[0];
     const query = this.query(key);
-    if (this.props.onChange) this.props.onChange(key);
+    if (this.props.onChange) this.props.onChange(key, event);
     this.setState({ focus: false, query }, () => { this.refs.input.blur(); });
   };
 
@@ -58,8 +58,8 @@ class Autocomplete extends React.Component {
     if (this.state.focus) this.setState({focus: false});
   };
 
-  handleQueryChange = (event) => {
-    this.setState({query: event.target.value});
+  handleQueryChange = (value) => {
+    this.setState({query: value});
   };
 
   handleQueryFocus = () => {
@@ -131,13 +131,13 @@ class Autocomplete extends React.Component {
   select (key, event) {
     events.pauseEvent(event);
     const values = this.values(this.props.value);
-    this.handleChange([key, ...values.keys()]);
+    this.handleChange([key, ...values.keys()], event);
   }
 
-  unselect (key) {
+  unselect (key, event) {
     const values = this.values(this.props.value);
     values.delete(key);
-    this.handleChange([...values.keys()]);
+    this.handleChange([...values.keys()], event);
   }
 
   renderSelected () {

From e9001c547385fee6007768b636d4953a0eb54b44 Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Wed, 25 Nov 2015 21:01:18 +0700
Subject: [PATCH 0183/1024] Using the new interface for all form fields
 components.

---
 components/form/Form.jsx |  1 -
 spec/components/form.jsx | 71 +++++++++++++++++++++++++++++-----------
 spec/root.jsx            |  2 ++
 3 files changed, 53 insertions(+), 21 deletions(-)

diff --git a/components/form/Form.jsx b/components/form/Form.jsx
index 7bb05391d..b7afcd83a 100644
--- a/components/form/Form.jsx
+++ b/components/form/Form.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import Autocomplete from '../autocomplete';
 import Button from '../button';
 import Checkbox from '../checkbox';
diff --git a/spec/components/form.jsx b/spec/components/form.jsx
index 815557284..bd65da812 100644
--- a/spec/components/form.jsx
+++ b/spec/components/form.jsx
@@ -1,39 +1,70 @@
 import React from 'react';
 import Form from '../../components/form';
 
+const countriesArray = ['Spain', 'England', 'USA', 'Thailand', 'France'];
+
+const countries = [
+  { value: 'EN-gb', label: 'England', img: 'http://' },
+  { value: 'ES-es', label: 'Spain', img: 'http://' },
+  { value: 'TH-th', label: 'Thailand', img: 'http://' },
+  { value: 'EN-en', label: 'USA', img: 'http://' },
+  { value: 'FR-fr', label: 'France', img: 'http://' }
+];
+
+const FormFields = {
+  autocomplete: {kind: 'Autocomplete', label: 'Autocomplete', source: countriesArray, value: ''},
+  input: {kind: 'Input', type: 'text', label: 'Input', value: '@soyjavi', required: true},
+  multiline: {kind: 'Input', type: 'text', label: 'Input (multiline)', multiline: true},
+  number: {kind: 'Input', type: 'number', label: 'Input (number)'},
+  checkbox: {kind: 'Checkbox', label: 'Checkbox'},
+  date: {kind: 'DatePicker', label: 'DatePicker', value: undefined},
+  dropdown: {kind: 'Dropdown', label: 'Dropdown', source: countries, value: countries[2].value},
+  time: {kind: 'TimePicker', label: 'TimePicker', value: undefined},
+  switch: {kind: 'Switch', label: 'Switch'},
+  slider: {kind: 'Slider', label: 'Slider', min: 0, max: 10, value: 4, pinned: true},
+  submit: {kind: 'Button', type: 'submit', label: 'Button () you a nomad?'}
+};
+
 class FormTest extends React.Component {
   state = {
-    attributes: [
-      { ref: 'name', label: 'Your Name', required: true, storage: true},
-      { ref: 'description', multiline: true, label: 'Description', value: 'Doer'},
-      { ref: 'birthdate', type: 'date', label: 'Birthdate'},
-      { ref: 'years', type: 'number', label: 'Years'},
-      { ref: 'twitter', label: 'Nickname', disabled: true},
-      { ref: 'nomad', type: 'checkbox', label: 'Are you a nomad?', value: true},
-      { ref: 'cow', type: 'checkbox', label: 'Are you a cow?', value: false},
-      { ref: 'girl', type: 'checkbox', label: 'Are you a girl?', value: false, disabled: true},
-      { ref: 'nomad_2', type: 'radio', label: 'Are you a nomad_2?', value: true},
-      { ref: 'cow_2', type: 'radio', label: 'Are you a cow_2?', value: false},
-      { ref: 'girl_2', type: 'radio', label: 'Are you a girl_2?', value: false, disabled: true},
-      { ref: 'type_user', type: 'dropdown', label: 'Type of user', dataSource: [{value: 1, label: 'Normal'}, {value: 2, label: 'Root'}]},
-      { type: 'submit', label: 'Send', style: 'primary anchor', disabled: true}
-    ]
+    model: {
+      autocomplete: countriesArray[3],
+      input: 'soyjavi',
+      multiline: 'Overwritten',
+      number: 0,
+      checkbox: true
+    }
   };
 
   handleEvent = (type, event, form) => {
-    console.log(`[FORM.${type}]`, form.getValue());
+    console.log(`[FORM.${type}]`, event, form);
+  };
+
+  handleChange = (field, value) => {
+    console.log('FORM.change', field, value);
+    const model = {
+      ...this.state.model,
+     [field]: value
+    };
+    this.setState({ model });
   };
 
   render () {
+    Object.keys(this.state.model).map((field) => {
+      const formField = FormFields[field];
+      formField[formField.hasOwnProperty('value') ? 'value' : 'checked'] = this.state.model[field];
+    });
+
+    console.log(FormFields);
+
     return (
       <section>
-        <h2>Form</h2>
+        <h5>Form</h5>
         <p>lorem ipsum...</p>
 
         <Form
-          attributes={this.state.attributes}
-          storage="example-form"
-          onChange={this.handleEvent.bind(this, 'change')}
+          model={FormFields}
+          onChange={this.handleChange}
           onError={this.handleEvent.bind(this, 'error')}
           onValid={this.handleEvent.bind(this, 'valid')}
           onSubmit={this.handleEvent.bind(this, 'submit')} />
diff --git a/spec/root.jsx b/spec/root.jsx
index e2b025e68..a0238aa57 100644
--- a/spec/root.jsx
+++ b/spec/root.jsx
@@ -10,6 +10,7 @@ import Checkbox from './components/checkbox';
 import Dialog from './components/dialog';
 import Drawer from './components/drawer';
 import Dropdown from './components/dropdown';
+import Form from './components/form';
 import IconMenu from './components/icon_menu';
 import Input from './components/input';
 import List from './components/list';
@@ -49,6 +50,7 @@ const Root = () => (
     <Dialog />
     <Drawer />
     <Dropdown />
+    <Form />
     <IconMenu />
     <Input />
     <List />

From a26a1cdadfc2dae7f281a03d5d5c2d0454bef6ea Mon Sep 17 00:00:00 2001
From: Mohan Kethees <mohan.kethees@vermeercanada.com>
Date: Wed, 25 Nov 2015 08:53:49 -0500
Subject: [PATCH 0184/1024] add .npmgnore

---
 .npmignore | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 .npmignore

diff --git a/.npmignore b/.npmignore
new file mode 100644
index 000000000..528c6b250
--- /dev/null
+++ b/.npmignore
@@ -0,0 +1,11 @@
+.*rc
+.eslintignore
+.csscomb.json
+.*.yml
+.editorconfig
+karma.conf.js
+server.js
+tests.webpack.js
+webpack.config.*
+docs
+spec

From ba70d60cbd03df381d238b02648ff8595d5aae69 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 25 Nov 2015 20:14:22 +0100
Subject: [PATCH 0185/1024] Move card sizes to rem units

---
 components/button/Button.jsx     |  3 ++-
 components/button/IconButton.jsx |  3 ++-
 components/card/_config.scss     |  6 +++---
 components/card/style.scss       | 16 +++++++---------
 4 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/components/button/Button.jsx b/components/button/Button.jsx
index bd4aa90f9..9f4706257 100644
--- a/components/button/Button.jsx
+++ b/components/button/Button.jsx
@@ -64,7 +64,8 @@ class Button extends React.Component {
       href,
       className: classes,
       disabled: this.props.disabled || this.props.loading,
-      onMouseDown: this.handleMouseDown
+      onMouseDown: this.handleMouseDown,
+      'data-react-toolbox': 'button'
     };
 
     return React.createElement(element, props,
diff --git a/components/button/IconButton.jsx b/components/button/IconButton.jsx
index 41447077b..e17768f5a 100644
--- a/components/button/IconButton.jsx
+++ b/components/button/IconButton.jsx
@@ -47,7 +47,8 @@ class Button extends React.Component {
       href,
       className: classes,
       disabled: this.props.disabled,
-      onMouseDown: this.handleMouseDown
+      onMouseDown: this.handleMouseDown,
+      'data-react-toolbox': 'button'
     };
 
     return React.createElement(element, props,
diff --git a/components/card/_config.scss b/components/card/_config.scss
index 58a73135d..3b142a0e4 100644
--- a/components/card/_config.scss
+++ b/components/card/_config.scss
@@ -1,7 +1,7 @@
 $card-color-white: $color-white !default;
 $card-text-overlay: rgba($color-black, 0.35) !default;
 $card-background-color: $card-color-white;
-$card-padding-sm: 8px;
-$card-padding: 16px;
-$card-padding-lg: 20px;
+$card-padding-sm: .8 * $unit;
+$card-padding: 1.6 * $unit;
+$card-padding-lg: 2 * $unit;
 $card-font-size: $font-size-small;
diff --git a/components/card/style.scss b/components/card/style.scss
index 6349ee0c4..aa69ad03d 100644
--- a/components/card/style.scss
+++ b/components/card/style.scss
@@ -2,14 +2,14 @@
 @import "http://github.com/config";
 
 .card {
+  @include shadow-2dp();
   display: flex;
   width: 100%;
   flex-direction: column;
   overflow: hidden;
   font-size: $card-font-size;
   background: $card-background-color;
-  border-radius: 2px;
-  @include shadow-2dp();
+  border-radius: .2 * $unit;
   &.raised {
     @include shadow-8dp();
   }
@@ -34,11 +34,9 @@
     padding-top: 100%;
   }
   .content {
-    // Positioning
     position: absolute;
     top: 0;
     left: 0;
-    // Box Model
     display: flex;
     width: 100%;
     height: 100%;
@@ -57,13 +55,13 @@
   display: flex;
   align-items: center;
   .avatar {
-    margin-right: 13px;
+    margin-right: 1.3 * $unit;
   }
   .subtitle {
     color: $color-text-secondary;
   }
   &.large {
-    padding: $card-padding-lg $card-padding ($card-padding - 2px);
+    padding: $card-padding-lg $card-padding ($card-padding - .2 * $unit);
     .title {
       @include typo-headline();
       line-height: 1.25;
@@ -88,11 +86,11 @@
 }
 
 .cardTitle, .cardText {
-  padding: ($card-padding - 2px) $card-padding;
+  padding: ($card-padding - .2 * $unit) $card-padding;
   &:last-child {
     padding-bottom: $card-padding-lg;
   }
-  & + .cardText {
+  + .cardText {
     padding-top: 0;
   }
 }
@@ -102,7 +100,7 @@
   align-items: center;
   justify-content: flex-start;
   padding: $card-padding-sm;
-  button {
+  [data-react-toolbox="button"] {
     min-width: 0;
     padding: 0 $card-padding-sm;
     margin: 0 $card-padding-sm / 2;

From db30db8e02953b1fb065b906adcabe5f9a0dfb4e Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 25 Nov 2015 20:30:28 +0100
Subject: [PATCH 0186/1024] Refactor app and app_bar

---
 components/animations/slide-left.scss  |  1 -
 components/animations/slide-right.scss |  1 -
 components/app/App.jsx                 | 30 +++++++++++---------------
 components/app/index.js                |  2 +-
 components/app_bar/AppBar.jsx          |  9 ++++----
 5 files changed, 18 insertions(+), 25 deletions(-)

diff --git a/components/animations/slide-left.scss b/components/animations/slide-left.scss
index 70d46ac4d..30fa9aecd 100644
--- a/components/animations/slide-left.scss
+++ b/components/animations/slide-left.scss
@@ -1,4 +1,3 @@
-// scss-lint:disable SelectorFormat
 @import "http://github.com/base";
 
 .enter, .leave {
diff --git a/components/animations/slide-right.scss b/components/animations/slide-right.scss
index 5ef840132..55b6ea3b1 100644
--- a/components/animations/slide-right.scss
+++ b/components/animations/slide-right.scss
@@ -1,4 +1,3 @@
-// scss-lint:disable SelectorFormat
 @import "http://github.com/base";
 
 .enter, .leave {
diff --git a/components/app/App.jsx b/components/app/App.jsx
index e02273267..41d283566 100644
--- a/components/app/App.jsx
+++ b/components/app/App.jsx
@@ -1,25 +1,19 @@
 import React from 'react';
 import style from './style';
 
-class App extends React.Component {
-  static propTypes = {
-    children: React.PropTypes.node,
-    className: React.PropTypes.string
-  };
+const App = ({className, children}) => (
+  <div data-react-toolbox='app' className={`${style.root} ${className}`}>
+    {children}
+  </div>
+);
 
-  static defaultProps = {
-    className: ''
-  };
+App.propTypes = {
+  children: React.PropTypes.node,
+  className: React.PropTypes.string
+};
 
-  render () {
-    let className = style.root;
-    if (this.props.className) className += ` ${this.props.className}`;
-    return (
-      <div data-react-toolbox='app' className={className}>
-        {this.props.children}
-      </div>
-    );
-  }
-}
+App.defaultProps = {
+  className: ''
+};
 
 export default App;
diff --git a/components/app/index.js b/components/app/index.js
index efe995487..e8ab2197c 100644
--- a/components/app/index.js
+++ b/components/app/index.js
@@ -1 +1 @@
-export default from './App.jsx';
+export default from './App';
diff --git a/components/app_bar/AppBar.jsx b/components/app_bar/AppBar.jsx
index 95d2832e3..c17d2d46f 100644
--- a/components/app_bar/AppBar.jsx
+++ b/components/app_bar/AppBar.jsx
@@ -1,11 +1,12 @@
 import React from 'react';
+import ClassNames from 'classnames';
 import style from './style';
 
 const AppBar = (props) => {
-  let className = style.root;
-  if (props.className) className += ` ${props.className}`;
-  if (props.fixed) className += ` ${style.fixed}`;
-  if (props.flat) className += ` ${style.flat}`;
+  const className = ClassNames(style.root, {
+    [style.fixed]: props.fixed,
+    [style.flat]: props.flat
+  }, props.className);
 
   return (
     <header className={className} data-react-toolbox='app-bar'>

From c9061e27e19be962356619b0704f3bfb542aff72 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 25 Nov 2015 20:35:56 +0100
Subject: [PATCH 0187/1024] Use classNames in Autocomplete

---
 components/autocomplete/Autocomplete.jsx | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/components/autocomplete/Autocomplete.jsx b/components/autocomplete/Autocomplete.jsx
index 7a6bcbf4f..e524ce997 100644
--- a/components/autocomplete/Autocomplete.jsx
+++ b/components/autocomplete/Autocomplete.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import ClassNames from 'classnames';
 import Input from '../input';
 import events from '../utils/events';
 import style from './style';
@@ -151,11 +152,8 @@ class Autocomplete extends React.Component {
   }
 
   renderSuggestions () {
-    let suggestionsClassName = style.suggestions;
-    if (this.state.direction === 'up') suggestionsClassName += ` ${style.up}`;
     const suggestions = [...this.suggestions()].map(([key, value]) => {
-      let className = style.suggestion;
-      if (this.state.active === key) className += ` ${style.active}`;
+      const className = ClassNames(style.suggestion, {[style.active]: this.state.active === key});
       return (
         <li
           key={key}
@@ -168,14 +166,15 @@ class Autocomplete extends React.Component {
       );
     });
 
-    return <ul ref='suggestions' className={suggestionsClassName}>{suggestions}</ul>;
+    const className = ClassNames(style.suggestions, {[style.up]: this.state.direction === 'up'});
+    return <ul ref='suggestions' className={className}>{suggestions}</ul>;
   }
 
   render () {
-    let className = style.root;
-    if (this.state.focus) className += ` ${style.focus}`;
-    if (this.props.error) className += ` ${style.errored}`;
-    if (this.props.className) className += ` ${this.props.className}`;
+    const className = ClassNames(style.root, {
+      [style.focus]: this.state.focus,
+      [style.errored]: this.props.error
+    }, this.props.className);
 
     return (
       <div data-react-toolbox='autocomplete' className={className}>

From 2106d0ee41752ba2b2433ba09729c03ad56839c2 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 26 Nov 2015 01:53:42 +0100
Subject: [PATCH 0188/1024] Complete implementation for Avatar

---
 components/avatar/Avatar.jsx    | 63 +++++++++++----------------------
 components/avatar/_config.scss  |  4 +++
 components/avatar/index.js      |  4 ++-
 components/avatar/style.scss    | 35 +++++++++++++++---
 spec/components/avatar.jsx      | 15 ++++++++
 spec/components/button.jsx      |  7 +---
 spec/components/github_icon.jsx |  9 +++++
 spec/root.jsx                   |  2 ++
 8 files changed, 85 insertions(+), 54 deletions(-)
 create mode 100644 components/avatar/_config.scss
 create mode 100644 spec/components/avatar.jsx
 create mode 100644 spec/components/github_icon.jsx

diff --git a/components/avatar/Avatar.jsx b/components/avatar/Avatar.jsx
index 3bc9c4eec..c887d3e54 100644
--- a/components/avatar/Avatar.jsx
+++ b/components/avatar/Avatar.jsx
@@ -1,49 +1,28 @@
-import React, { PropTypes, Component } from 'react';
+import React from 'react';
 import ClassNames from 'classnames';
-import FontIcon from '../font_icon'; // ewww! :P @TODO
+import FontIcon from '../font_icon';
 import style from './style';
 
-class Avatar extends Component {
+const Avatar = ({children, className, icon, image, title, ...other}) => {
+  const classes = ClassNames(style.avatar, [], className);
+  const avatarStyle = {backgroundImage: typeof image === 'string' ? `url(http://github.com/$%7Bimage%7D)` : null};
 
-  static propTypes = {
-    accent: PropTypes.bool,
-    children: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.node
-    ]),
-    className: PropTypes.string,
-    icon: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.element
-    ]),
-    image: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.element
-    ]),
-    primary: PropTypes.bool
-  }
+  return (
+    <div className={classes} {...other}>
+      {typeof icon === 'string' ? <FontIcon className={style.letter} value={icon} /> : icon}
+      {typeof image === 'string' && title ? <span className={style.letter}>{title[0]}</span> : null}
+      {typeof image === 'string' ? <span className={style.image} style={avatarStyle} /> : null}
+      {children}
+    </div>
+  );
+};
 
-  static defaultProps = {
-    size: 40
-  }
-
-  render () {
-    let component;
-    const { accent, children, className, icon, primary, image, ...other } = this.props;
-    const classes = ClassNames(style.avatar, [
-      primary ? style.primary : accent ? style.accent : null
-    ], className);
-
-    if (typeof image === 'string') {
-      component = <img className={style.avatarImg} src={image} />;
-    } else if (typeof image === 'string') {
-      component = <img className={style.avatarImg} src={image} />;
-    } else if (typeof icon === 'string') {
-      component = <FontIcon value="icon" />;
-    }
-
-    return <div className={classes}>{component ? component : children}</div>;
-  }
-}
+Avatar.propTypes = {
+  children: React.PropTypes.node,
+  className: React.PropTypes.string,
+  icon: React.PropTypes.string,
+  image: React.PropTypes.string,
+  title: React.PropTypes.string
+};
 
 export default Avatar;
diff --git a/components/avatar/_config.scss b/components/avatar/_config.scss
new file mode 100644
index 000000000..a2922fb60
--- /dev/null
+++ b/components/avatar/_config.scss
@@ -0,0 +1,4 @@
+$avatar-color: $color-white !default;
+$avatar-background: $palette-grey-500 !default;
+$avatar-size: 4 * $unit !default;
+$avatar-font-size: 2.4 * $unit !default;
diff --git a/components/avatar/index.js b/components/avatar/index.js
index 735793c33..c2e4cd6b9 100644
--- a/components/avatar/index.js
+++ b/components/avatar/index.js
@@ -1 +1,3 @@
-export Avatar from './Avatar';
+import Avatar from './Avatar.jsx';
+export { Avatar };
+export default Avatar;
diff --git a/components/avatar/style.scss b/components/avatar/style.scss
index 3f849d1b9..e41fbbe0c 100644
--- a/components/avatar/style.scss
+++ b/components/avatar/style.scss
@@ -1,11 +1,36 @@
+@import "http://github.com/base";
+@import "http://github.com/config";
+
 .avatar {
-  width: 40px;
-  height: 40px;
+  width: $avatar-size;
+  background-color: $avatar-background;
+  height: $avatar-size;
   overflow: hidden;
   border-radius: 50%;
+  position: relative;
+  color: $avatar-color;
+  text-align: center;
+  font-size: $avatar-font-size;
+  > svg {
+    width: 1em;
+    height: $avatar-size;
+    fill: currentColor;
+  }
+}
+
+.image {
+  position: absolute;
+  display: block;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  background-position: center;
+  background-size: cover;
+  border-radius: 50%;
 }
 
-.avatarImg {
-  max-width: 100%;
-  height: auto;
+.letter {
+  display: block;
+  width: 100%;
+  line-height: $avatar-size;
 }
diff --git a/spec/components/avatar.jsx b/spec/components/avatar.jsx
new file mode 100644
index 000000000..86fecb51b
--- /dev/null
+++ b/spec/components/avatar.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import Avatar from '../../components/avatar';
+import GithubIcon from './github_icon';
+
+const AvatarTest = () => (
+  <section>
+    <h5>Avatars</h5>
+    <Avatar image={"https://placeimg.com/80/80/animals"} />
+    <Avatar title="Javier Velasco" image={"https://javivelasco.com/avatar404"} />
+    <Avatar icon="folder" />
+    <Avatar><GithubIcon /></Avatar>
+  </section>
+);
+
+export default AvatarTest;
diff --git a/spec/components/button.jsx b/spec/components/button.jsx
index 806ca2473..23641ca0c 100644
--- a/spec/components/button.jsx
+++ b/spec/components/button.jsx
@@ -1,12 +1,7 @@
 import React from 'react';
+import GithubIcon from './github_icon';
 import { Button, IconButton } from '../../components/button';
 
-const GithubIcon = () => (
-  <svg viewBox="0 0 284 277">
-    <g><path d="M141.888675,0.0234927555 C63.5359948,0.0234927555 0,63.5477395 0,141.912168 C0,204.6023 40.6554239,257.788232 97.0321356,276.549924 C104.12328,277.86336 106.726656,273.471926 106.726656,269.724287 C106.726656,266.340838 106.595077,255.16371 106.533987,243.307542 C67.0604204,251.890693 58.7310279,226.56652 58.7310279,226.56652 C52.2766299,210.166193 42.9768456,205.805304 42.9768456,205.805304 C30.1032937,196.998939 43.9472374,197.17986 43.9472374,197.17986 C58.1953153,198.180797 65.6976425,211.801527 65.6976425,211.801527 C78.35268,233.493192 98.8906827,227.222064 106.987463,223.596605 C108.260955,214.426049 111.938106,208.166669 115.995895,204.623447 C84.4804813,201.035582 51.3508808,188.869264 51.3508808,134.501475 C51.3508808,119.01045 56.8936274,106.353063 65.9701981,96.4165325 C64.4969882,92.842765 59.6403297,78.411417 67.3447241,58.8673023 C67.3447241,58.8673023 79.2596322,55.0538738 106.374213,73.4114319 C117.692318,70.2676443 129.83044,68.6910512 141.888675,68.63701 C153.94691,68.6910512 166.09443,70.2676443 177.433682,73.4114319 C204.515368,55.0538738 216.413829,58.8673023 216.413829,58.8673023 C224.13702,78.411417 219.278012,92.842765 217.804802,96.4165325 C226.902519,106.353063 232.407672,119.01045 232.407672,134.501475 C232.407672,188.998493 199.214632,200.997988 167.619331,204.510665 C172.708602,208.913848 177.243363,217.54869 177.243363,230.786433 C177.243363,249.771339 177.078889,265.050898 177.078889,269.724287 C177.078889,273.500121 179.632923,277.92445 186.825101,276.531127 C243.171268,257.748288 283.775,204.581154 283.775,141.912168 C283.775,63.5477395 220.248404,0.0234927555 141.888675,0.0234927555" /></g>
-  </svg>
-);
-
 const ButtonTest = () => (
   <section>
     <h5>Buttons</h5>
diff --git a/spec/components/github_icon.jsx b/spec/components/github_icon.jsx
new file mode 100644
index 000000000..1dfd508ec
--- /dev/null
+++ b/spec/components/github_icon.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const GithubIcon = () => (
+  <svg viewBox="0 0 284 277">
+    <g><path d="M141.888675,0.0234927555 C63.5359948,0.0234927555 0,63.5477395 0,141.912168 C0,204.6023 40.6554239,257.788232 97.0321356,276.549924 C104.12328,277.86336 106.726656,273.471926 106.726656,269.724287 C106.726656,266.340838 106.595077,255.16371 106.533987,243.307542 C67.0604204,251.890693 58.7310279,226.56652 58.7310279,226.56652 C52.2766299,210.166193 42.9768456,205.805304 42.9768456,205.805304 C30.1032937,196.998939 43.9472374,197.17986 43.9472374,197.17986 C58.1953153,198.180797 65.6976425,211.801527 65.6976425,211.801527 C78.35268,233.493192 98.8906827,227.222064 106.987463,223.596605 C108.260955,214.426049 111.938106,208.166669 115.995895,204.623447 C84.4804813,201.035582 51.3508808,188.869264 51.3508808,134.501475 C51.3508808,119.01045 56.8936274,106.353063 65.9701981,96.4165325 C64.4969882,92.842765 59.6403297,78.411417 67.3447241,58.8673023 C67.3447241,58.8673023 79.2596322,55.0538738 106.374213,73.4114319 C117.692318,70.2676443 129.83044,68.6910512 141.888675,68.63701 C153.94691,68.6910512 166.09443,70.2676443 177.433682,73.4114319 C204.515368,55.0538738 216.413829,58.8673023 216.413829,58.8673023 C224.13702,78.411417 219.278012,92.842765 217.804802,96.4165325 C226.902519,106.353063 232.407672,119.01045 232.407672,134.501475 C232.407672,188.998493 199.214632,200.997988 167.619331,204.510665 C172.708602,208.913848 177.243363,217.54869 177.243363,230.786433 C177.243363,249.771339 177.078889,265.050898 177.078889,269.724287 C177.078889,273.500121 179.632923,277.92445 186.825101,276.531127 C243.171268,257.748288 283.775,204.581154 283.775,141.912168 C283.775,63.5477395 220.248404,0.0234927555 141.888675,0.0234927555" /></g>
+  </svg>
+);
+
+export default GithubIcon;
diff --git a/spec/root.jsx b/spec/root.jsx
index e2b025e68..033a9c6ef 100644
--- a/spec/root.jsx
+++ b/spec/root.jsx
@@ -2,6 +2,7 @@
 import React from 'react';
 import App from '../components/app';
 import AppBarToolbox from '../components/app_bar';
+import Avatar from './components/avatar';
 import ButtonToolbox from '../components/button';
 import Autocomplete from './components/autocomplete';
 import Button from './components/button';
@@ -43,6 +44,7 @@ const Root = () => (
     </AppBarToolbox>
 
     <Autocomplete />
+    <Avatar />
     <Button />
     <Card />
     <Checkbox />

From bf68c83ea7da390e7f589cf845451f94ad71f3f3 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Fri, 27 Nov 2015 18:32:19 +0100
Subject: [PATCH 0189/1024] Allow img as children for avatar

---
 components/avatar/style.scss | 6 +++++-
 spec/components/avatar.jsx   | 5 +++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/components/avatar/style.scss b/components/avatar/style.scss
index e41fbbe0c..c1c79e949 100644
--- a/components/avatar/style.scss
+++ b/components/avatar/style.scss
@@ -3,8 +3,8 @@
 
 .avatar {
   width: $avatar-size;
-  background-color: $avatar-background;
   height: $avatar-size;
+  background-color: $avatar-background;
   overflow: hidden;
   border-radius: 50%;
   position: relative;
@@ -16,6 +16,10 @@
     height: $avatar-size;
     fill: currentColor;
   }
+  > img {
+    max-width: 100%;
+    height: auto;
+  }
 }
 
 .image {
diff --git a/spec/components/avatar.jsx b/spec/components/avatar.jsx
index 86fecb51b..f959c16b1 100644
--- a/spec/components/avatar.jsx
+++ b/spec/components/avatar.jsx
@@ -5,10 +5,11 @@ import GithubIcon from './github_icon';
 const AvatarTest = () => (
   <section>
     <h5>Avatars</h5>
-    <Avatar image={"https://placeimg.com/80/80/animals"} />
-    <Avatar title="Javier Velasco" image={"https://javivelasco.com/avatar404"} />
+    <Avatar image="https://placeimg.com/80/80/animals" />
+    <Avatar title="Javier Velasco" image="https://javivelasco.com/avatar404" />
     <Avatar icon="folder" />
     <Avatar><GithubIcon /></Avatar>
+    <Avatar><img src="https://placeimg.com/80/80/animals" /></Avatar>
   </section>
 );
 

From a830c935a1e89432e00e587210b13bc94c56264b Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Fri, 27 Nov 2015 22:09:18 +0100
Subject: [PATCH 0190/1024] Better avatar component

---
 components/avatar/Avatar.jsx | 12 ++++--------
 components/avatar/style.scss |  9 +++++----
 components/card/style.scss   |  3 +++
 spec/components/avatar.jsx   | 11 ++++++-----
 4 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/components/avatar/Avatar.jsx b/components/avatar/Avatar.jsx
index c887d3e54..4f9af6e51 100644
--- a/components/avatar/Avatar.jsx
+++ b/components/avatar/Avatar.jsx
@@ -1,18 +1,14 @@
 import React from 'react';
-import ClassNames from 'classnames';
 import FontIcon from '../font_icon';
 import style from './style';
 
 const Avatar = ({children, className, icon, image, title, ...other}) => {
-  const classes = ClassNames(style.avatar, [], className);
-  const avatarStyle = {backgroundImage: typeof image === 'string' ? `url(http://github.com/$%7Bimage%7D)` : null};
-
   return (
-    <div className={classes} {...other}>
-      {typeof icon === 'string' ? <FontIcon className={style.letter} value={icon} /> : icon}
-      {typeof image === 'string' && title ? <span className={style.letter}>{title[0]}</span> : null}
-      {typeof image === 'string' ? <span className={style.image} style={avatarStyle} /> : null}
+    <div data-react-toolbox='avatar' className={`${style.avatar} ${className}`} {...other}>
       {children}
+      {typeof image === 'string' ? <img className={style.image} src={image} title={title} /> : image}
+      {typeof icon === 'string' ? <FontIcon className={style.letter} value={icon} /> : icon}
+      {title ? <span className={style.letter}>{title[0]}</span> : null}
     </div>
   );
 };
diff --git a/components/avatar/style.scss b/components/avatar/style.scss
index c1c79e949..29e796d30 100644
--- a/components/avatar/style.scss
+++ b/components/avatar/style.scss
@@ -2,15 +2,16 @@
 @import "http://github.com/config";
 
 .avatar {
+  position: relative;
+  display: inline-block;
   width: $avatar-size;
   height: $avatar-size;
-  background-color: $avatar-background;
   overflow: hidden;
-  border-radius: 50%;
-  position: relative;
+  font-size: $avatar-font-size;
   color: $avatar-color;
   text-align: center;
-  font-size: $avatar-font-size;
+  background-color: $avatar-background;
+  border-radius: 50%;
   > svg {
     width: 1em;
     height: $avatar-size;
diff --git a/components/card/style.scss b/components/card/style.scss
index aa69ad03d..9e950d346 100644
--- a/components/card/style.scss
+++ b/components/card/style.scss
@@ -13,6 +13,9 @@
   &.raised {
     @include shadow-8dp();
   }
+  [data-react-toolbox="avatar"] {
+    display: block;
+  }
 }
 
 .cardMedia {
diff --git a/spec/components/avatar.jsx b/spec/components/avatar.jsx
index f959c16b1..4cc1fc14f 100644
--- a/spec/components/avatar.jsx
+++ b/spec/components/avatar.jsx
@@ -5,11 +5,12 @@ import GithubIcon from './github_icon';
 const AvatarTest = () => (
   <section>
     <h5>Avatars</h5>
-    <Avatar image="https://placeimg.com/80/80/animals" />
-    <Avatar title="Javier Velasco" image="https://javivelasco.com/avatar404" />
-    <Avatar icon="folder" />
-    <Avatar><GithubIcon /></Avatar>
-    <Avatar><img src="https://placeimg.com/80/80/animals" /></Avatar>
+    <p>Provide an image source or object, a font icon, children or a title to use its first letter.</p>
+    <Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />
+    <Avatar icon={<GithubIcon />}/>
+    <Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
+    <Avatar title="Javier" img="https://placeimg.com/80/80/animals"/>
+    <Avatar style={{backgroundColor: 'yellowgreen'}}><GithubIcon /></Avatar>
   </section>
 );
 

From cdd7d773beec943f45688514ed83178e02e12571 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Fri, 27 Nov 2015 22:17:35 +0100
Subject: [PATCH 0191/1024] Improve Avatar validation

---
 components/avatar/Avatar.jsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/avatar/Avatar.jsx b/components/avatar/Avatar.jsx
index 4f9af6e51..f3ed1b709 100644
--- a/components/avatar/Avatar.jsx
+++ b/components/avatar/Avatar.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {PropTypes} from 'react';
 import FontIcon from '../font_icon';
 import style from './style';
 
@@ -14,11 +14,11 @@ const Avatar = ({children, className, icon, image, title, ...other}) => {
 };
 
 Avatar.propTypes = {
-  children: React.PropTypes.node,
-  className: React.PropTypes.string,
-  icon: React.PropTypes.string,
-  image: React.PropTypes.string,
-  title: React.PropTypes.string
+  children: PropTypes.node,
+  className: PropTypes.string,
+  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  image: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  title: PropTypes.string
 };
 
 export default Avatar;

From b249d5831350b4d1094fd0acc648c66babb3c434 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Fri, 27 Nov 2015 22:27:06 +0100
Subject: [PATCH 0192/1024] Add avatar to docs

---
 components/avatar/readme.md                   | 34 +++++++++++++++++++
 components/index.js                           |  1 +
 .../layout/main/modules/components.js         | 10 +++++-
 .../modules/examples/avatar_example_1.txt     | 17 ++++++++++
 4 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 components/avatar/readme.md
 create mode 100644 docs/app/components/layout/main/modules/examples/avatar_example_1.txt

diff --git a/components/avatar/readme.md b/components/avatar/readme.md
new file mode 100644
index 000000000..4f92f9bdd
--- /dev/null
+++ b/components/avatar/readme.md
@@ -0,0 +1,34 @@
+# Avatar
+
+Avatars can be used to represent people. For personal avatars, offer personalization options. As users may choose not to personalize an avatar, provide delightful defaults. When used with a specific logo, avatars can also be used to represent brand
+
+<!-- example -->
+```jsx
+import Avatar from 'react-toolbox/lib/avatar';
+
+const GithubIcon = () => (
+  <svg viewBox="0 0 284 277">
+    <g><path d="M141.888675,0.0234927555 C63.5359948,0.0234927555 0,63.5477395 0,141.912168 C0,204.6023 40.6554239,257.788232 97.0321356,276.549924 C104.12328,277.86336 106.726656,273.471926 106.726656,269.724287 C106.726656,266.340838 106.595077,255.16371 106.533987,243.307542 C67.0604204,251.890693 58.7310279,226.56652 58.7310279,226.56652 C52.2766299,210.166193 42.9768456,205.805304 42.9768456,205.805304 C30.1032937,196.998939 43.9472374,197.17986 43.9472374,197.17986 C58.1953153,198.180797 65.6976425,211.801527 65.6976425,211.801527 C78.35268,233.493192 98.8906827,227.222064 106.987463,223.596605 C108.260955,214.426049 111.938106,208.166669 115.995895,204.623447 C84.4804813,201.035582 51.3508808,188.869264 51.3508808,134.501475 C51.3508808,119.01045 56.8936274,106.353063 65.9701981,96.4165325 C64.4969882,92.842765 59.6403297,78.411417 67.3447241,58.8673023 C67.3447241,58.8673023 79.2596322,55.0538738 106.374213,73.4114319 C117.692318,70.2676443 129.83044,68.6910512 141.888675,68.63701 C153.94691,68.6910512 166.09443,70.2676443 177.433682,73.4114319 C204.515368,55.0538738 216.413829,58.8673023 216.413829,58.8673023 C224.13702,78.411417 219.278012,92.842765 217.804802,96.4165325 C226.902519,106.353063 232.407672,119.01045 232.407672,134.501475 C232.407672,188.998493 199.214632,200.997988 167.619331,204.510665 C172.708602,208.913848 177.243363,217.54869 177.243363,230.786433 C177.243363,249.771339 177.078889,265.050898 177.078889,269.724287 C177.078889,273.500121 179.632923,277.92445 186.825101,276.531127 C243.171268,257.748288 283.775,204.581154 283.775,141.912168 C283.775,63.5477395 220.248404,0.0234927555 141.888675,0.0234927555" /></g>
+  </svg>
+);
+
+const AvatarTest = () => (
+  <div>
+    <Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />
+    <Avatar icon={<GithubIcon />}/>
+    <Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
+    <Avatar title="Javier" img="https://placeimg.com/80/80/animals"/>
+    <Avatar style={{backgroundColor: 'yellowgreen'}}><GithubIcon /></Avatar>
+  </div>
+);
+```
+
+## Properties
+
+| Name      | Type      | Default         | Description|
+|:-----|:-----|:-----|:-----|
+| `children`    | `Node`   | | Children for the avatar. You can pass an SVG for a custom icon or, for example, an image.|
+| `className` | `String`  | `''` | Set a class to style the Component.|
+| `icon`  | `String` or `Element` |  | A key to identify an Icon from Material Design Icons or a custom Icon Element.|
+| `image`      | `String` or `Element`  |  | An image source or an image element. |
+| `title`  | `String`  | `false` | A title for the image. If there is image, the first letter will be displayed as avatar. |
diff --git a/components/index.js b/components/index.js
index 04708dd98..71a2fa1a0 100644
--- a/components/index.js
+++ b/components/index.js
@@ -2,6 +2,7 @@ import './utils/polyfills'; // Import polyfills for IE11
 export App from './app';
 export AppBar from './app_bar';
 export Autocomplete from './autocomplete';
+export Avatar from './avatar';
 export Button from './button/Button';
 export IconButton from './button/IconButton';
 export * from './card';
diff --git a/docs/app/components/layout/main/modules/components.js b/docs/app/components/layout/main/modules/components.js
index dce621c09..d0d5108e2 100644
--- a/docs/app/components/layout/main/modules/components.js
+++ b/docs/app/components/layout/main/modules/components.js
@@ -1,6 +1,7 @@
 // Documentation files
 import AppBar from 'react-toolbox/app_bar/readme';
 import Autocomplete from 'react-toolbox/autocomplete/readme';
+import Avatar from 'react-toolbox/avatar/readme';
 import Button from 'react-toolbox/button/readme';
 import Card from 'react-toolbox/card/readme';
 import Checkbox from 'react-toolbox/checkbox/readme';
@@ -25,8 +26,9 @@ import Tooltip from 'react-toolbox/tooltip/readme';
 import TimePicker from 'react-toolbox/time_picker/readme';
 
 // Examples for the Playground
-import ButtonExample1 from './examples/button_example_1.txt';
 import AutocompleteExample1 from './examples/autocomplete_example_1.txt';
+import AvatarExample1 from './examples/avatar_example_1.txt';
+import ButtonExample1 from './examples/button_example_1.txt';
 import CardExample1 from './examples/card_example_1.txt';
 import CheckboxExample1 from './examples/checkbox_example_1.txt';
 import DatePickerExample1 from './examples/datepicker_example_1.txt';
@@ -61,6 +63,12 @@ export default {
     path: '/components/autocomplete',
     examples: [AutocompleteExample1]
   },
+  avatar: {
+    name: 'Avatar',
+    docs: Avatar,
+    path: '/components/avatar',
+    examples: [AvatarExample1]
+  },
   button: {
     name: 'Button',
     docs: Button,
diff --git a/docs/app/components/layout/main/modules/examples/avatar_example_1.txt b/docs/app/components/layout/main/modules/examples/avatar_example_1.txt
new file mode 100644
index 000000000..1d9214d1e
--- /dev/null
+++ b/docs/app/components/layout/main/modules/examples/avatar_example_1.txt
@@ -0,0 +1,17 @@
+const GithubIcon = () => (
+  <svg viewBox="0 0 284 277">
+    <g><path d="M141.888675,0.0234927555 C63.5359948,0.0234927555 0,63.5477395 0,141.912168 C0,204.6023 40.6554239,257.788232 97.0321356,276.549924 C104.12328,277.86336 106.726656,273.471926 106.726656,269.724287 C106.726656,266.340838 106.595077,255.16371 106.533987,243.307542 C67.0604204,251.890693 58.7310279,226.56652 58.7310279,226.56652 C52.2766299,210.166193 42.9768456,205.805304 42.9768456,205.805304 C30.1032937,196.998939 43.9472374,197.17986 43.9472374,197.17986 C58.1953153,198.180797 65.6976425,211.801527 65.6976425,211.801527 C78.35268,233.493192 98.8906827,227.222064 106.987463,223.596605 C108.260955,214.426049 111.938106,208.166669 115.995895,204.623447 C84.4804813,201.035582 51.3508808,188.869264 51.3508808,134.501475 C51.3508808,119.01045 56.8936274,106.353063 65.9701981,96.4165325 C64.4969882,92.842765 59.6403297,78.411417 67.3447241,58.8673023 C67.3447241,58.8673023 79.2596322,55.0538738 106.374213,73.4114319 C117.692318,70.2676443 129.83044,68.6910512 141.888675,68.63701 C153.94691,68.6910512 166.09443,70.2676443 177.433682,73.4114319 C204.515368,55.0538738 216.413829,58.8673023 216.413829,58.8673023 C224.13702,78.411417 219.278012,92.842765 217.804802,96.4165325 C226.902519,106.353063 232.407672,119.01045 232.407672,134.501475 C232.407672,188.998493 199.214632,200.997988 167.619331,204.510665 C172.708602,208.913848 177.243363,217.54869 177.243363,230.786433 C177.243363,249.771339 177.078889,265.050898 177.078889,269.724287 C177.078889,273.500121 179.632923,277.92445 186.825101,276.531127 C243.171268,257.748288 283.775,204.581154 283.775,141.912168 C283.775,63.5477395 220.248404,0.0234927555 141.888675,0.0234927555" /></g>
+  </svg>
+);
+
+const AvatarTest = () => (
+  <div>
+    <Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />
+    <Avatar icon={<GithubIcon />}/>
+    <Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
+    <Avatar title="Javier" img="https://placeimg.com/80/80/animals"/>
+    <Avatar style={{backgroundColor: 'yellowgreen'}}><GithubIcon /></Avatar>
+  </div>
+);
+
+return <AvatarTest />

From a907ebfcf23f3f95b659a39b5cbce3e7ea9ec158 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Fri, 27 Nov 2015 22:35:32 +0100
Subject: [PATCH 0193/1024] Remove unneeded example from avatar example

---
 .../components/layout/main/modules/examples/avatar_example_1.txt | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/app/components/layout/main/modules/examples/avatar_example_1.txt b/docs/app/components/layout/main/modules/examples/avatar_example_1.txt
index 1d9214d1e..ffc9eb4cd 100644
--- a/docs/app/components/layout/main/modules/examples/avatar_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/avatar_example_1.txt
@@ -7,7 +7,6 @@ const GithubIcon = () => (
 const AvatarTest = () => (
   <div>
     <Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />
-    <Avatar icon={<GithubIcon />}/>
     <Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
     <Avatar title="Javier" img="https://placeimg.com/80/80/animals"/>
     <Avatar style={{backgroundColor: 'yellowgreen'}}><GithubIcon /></Avatar>

From 2742bf9bd091e15b08aec984a5a9828e71d037f6 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 28 Nov 2015 13:28:37 +0100
Subject: [PATCH 0194/1024] Change layout for cards in spec

---
 spec/components/card.jsx | 29 ++++++++++-------
 spec/style.scss          | 67 ++++++++++++++++++++--------------------
 2 files changed, 50 insertions(+), 46 deletions(-)

diff --git a/spec/components/card.jsx b/spec/components/card.jsx
index f7399694b..91addd6d0 100644
--- a/spec/components/card.jsx
+++ b/spec/components/card.jsx
@@ -6,11 +6,11 @@ import style from '../style';
 const dummyText = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.';
 
 const Spacer = () => <div style={{display: 'flex', flex: '1 1 auto'}}/>;
-const DemoList = ({children}) => <ul className={style.demoList}>{children}</ul>;
-const DemoListItem = ({component, name}) => (
-  <li className={style.demoListItem}>
-    <div className={style.demo}>{component}</div>
-    <div className={style.demoName}>{name}</div>
+const CardList = ({children}) => <ul className={style.cardsGroup}>{children}</ul>;
+const CardListItem = ({component, name}) => (
+  <li className={style.cardItem}>
+    <div className={style.cardItemContent}>{component}</div>
+    <div className={style.cardItemName}>{name}</div>
   </li>
 );
 
@@ -213,13 +213,18 @@ const cards = {
 };
 
 const CardTest = () => (
-  <div>
-    {Object.keys(cards).map((key) => (
-      <DemoList key={key}>
-        {cards[key].map((demo, i) => <DemoListItem key={key + i} {...demo} />)}
-      </DemoList>
-    ))}
-  </div>
+  <section>
+    <h5>Cards</h5>
+    <p>You have multiple options for cards. Combine different subcomponents to create your own:</p>
+
+    <div className={style.cards}>
+      {Object.keys(cards).map((key) => (
+        <CardList key={key}>
+          {cards[key].map((demo, i) => <CardListItem key={key + i} {...demo} />)}
+        </CardList>
+      ))}
+    </div>
+  </section>
 );
 
 export default CardTest;
diff --git a/spec/style.scss b/spec/style.scss
index ca036ce4e..4d4b78cd5 100644
--- a/spec/style.scss
+++ b/spec/style.scss
@@ -5,12 +5,12 @@
 $offset: 1.8 * $unit;
 
 .app {
-  padding: (8.2 * $unit) $offset $offset $offset;
+  padding: (8.2 * $unit) $offset $offset;
   background-color: #f5f5f5;
-  > section {
+  > section, > div > section {
     padding: $offset;
     margin-bottom: $offset;
-    background-color: white;
+    background-color: #fff;
     box-shadow: 0 1px 2px rgba(0,0,0, 0.25);
     > h5 {
       color: rgb(48, 63, 159);
@@ -49,17 +49,18 @@ $offset: 1.8 * $unit;
   }
 }
 
-.logo {
-  // height: $unit;
-}
-
 .primary {
   background-color: $color-primary;
 }
 
-.demoList {
-  margin: 20px 0;
-  padding: 20px 0;
+.cards {
+  background-color: #f8f8f8;
+  margin-top: 10px;
+  border: 1px solid #f4f4f4;
+}
+
+.cardsGroup {
+  padding: 20px;
   list-style: none;
   display: flex;
   flex-wrap: wrap;
@@ -68,22 +69,38 @@ $offset: 1.8 * $unit;
   align-items: stretch;
 }
 
-.demoListItem {
-  margin: 0 30px 100px;
+.cardRow {
   display: flex;
-  flex-direction: column;
+  align-items: flex-start;
   justify-content: space-between;
+  .media {
+    width: 80px;
+    height: 80px;
+    margin: 16px 16px 0 0;
+  }
+  .mediaLarge {
+    width: 140px;
+    height: 140px;
+    margin: 16px;
+  }
+}
+
+.cardItem {
+  display: flex;
+  flex-direction: column;
   align-items: center;
+  justify-content: space-between;
+  margin: 0 20px;
 }
 
-.demo {
+.cardItemContent {
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
 }
 
-.demoName {
+.cardItemName {
   display: block;
   margin: 20px 0 0;
   text-align: center;
@@ -92,21 +109,3 @@ $offset: 1.8 * $unit;
 .card {
   width: 345px;
 }
-
-.cardRow {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-
-  .media {
-    width: 80px;
-    height: 80px;
-    margin: 16px 16px 0 0;
-  }
-
-  .mediaLarge {
-    width: 140px;
-    height: 140px;
-    margin: 16px;
-  }
-}

From 387afcf6fdcee0c5e00692b7b68c59a0f8a2f968 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 28 Nov 2015 13:36:22 +0100
Subject: [PATCH 0195/1024] Remove unneeded ripple dependency in calendar

---
 components/date_picker/Calendar.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/date_picker/Calendar.jsx b/components/date_picker/Calendar.jsx
index 086b5a8e0..32bca1146 100644
--- a/components/date_picker/Calendar.jsx
+++ b/components/date_picker/Calendar.jsx
@@ -2,7 +2,6 @@ import React from 'react';
 import CssTransitionGroup from 'react-addons-css-transition-group';
 import { SlideLeft, SlideRight } from '../animations';
 import { IconButton } from '../button';
-import Ripple from '../ripple';
 import CalendarMonth from './CalendarMonth';
 import time from '../utils/time';
 import utils from '../utils/utils';

From 50544ab4132df7c7c90c07e5e5a3f71e41d01215 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 28 Nov 2015 13:42:17 +0100
Subject: [PATCH 0196/1024] Use ClassNames in Checkbox component

---
 components/checkbox/Checkbox.jsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/components/checkbox/Checkbox.jsx b/components/checkbox/Checkbox.jsx
index 3960d3d96..9379e6baf 100644
--- a/components/checkbox/Checkbox.jsx
+++ b/components/checkbox/Checkbox.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import ClassNames from 'classnames';
 import Ripple from '../ripple';
 import events from '../utils/events';
 import style from './style';
@@ -48,11 +49,13 @@ class Checkbox extends React.Component {
   }
 
   render () {
-    let fieldClassName = style.field;
-    let checkboxClassName = style.check;
-    if (this.props.checked) checkboxClassName += ` ${style.checked}`;
-    if (this.props.disabled) fieldClassName += ` ${style.disabled}`;
-    if (this.props.className) fieldClassName += ` ${this.props.className}`;
+    const fieldClassName = ClassNames(style.field, {
+      [style.disabled]: this.props.disabled
+    }, this.props.className);
+
+    const checkboxClassName = ClassNames(style.check, {
+      [style.checked]: this.props.checked
+    });
 
     return (
       <label

From eb8b83d6b3ea60fe8680496deaec91eaaef8dac1 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 28 Nov 2015 13:47:56 +0100
Subject: [PATCH 0197/1024] Pass scss lint

---
 components/date_picker/style.calendar.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/date_picker/style.calendar.scss b/components/date_picker/style.calendar.scss
index f7f9af682..5b6076548 100644
--- a/components/date_picker/style.calendar.scss
+++ b/components/date_picker/style.calendar.scss
@@ -12,9 +12,9 @@
     position: absolute;
     top: 0;
     z-index: $z-index-high;
+    height: 3.6 * $unit;
     cursor: pointer;
     opacity: .7;
-    height: 3.6 * $unit;
   }
   .prev {
     left: 0;

From fdeccdad02da675f9cb1a7655b2e7673695513e2 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 28 Nov 2015 13:55:25 +0100
Subject: [PATCH 0198/1024] Use ClassNames in CalendarDay

---
 components/date_picker/CalendarDay.jsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/date_picker/CalendarDay.jsx b/components/date_picker/CalendarDay.jsx
index 6b8768582..ce7674953 100644
--- a/components/date_picker/CalendarDay.jsx
+++ b/components/date_picker/CalendarDay.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import ClassNames from 'classnames';
 import time from '../utils/time';
 import style from './style.calendar';
 
@@ -27,8 +28,10 @@ class Day extends React.Component {
   }
 
   render () {
-    let className = this.isSelected() ? `${style.day} ${style.active}` : style.day;
-    if (this.props.disabled) className += ` ${style.disabled}`;
+    const className = ClassNames(style.day, {
+      [style.active]: this.isSelected(),
+      [style.disabled]: this.props.disabled
+    });
 
     return (
       <div className={className} style={this.dayStyle()}>

From 9286e1caa10b64cebe73844935a9fdb3af6a47b6 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 28 Nov 2015 15:31:04 +0100
Subject: [PATCH 0199/1024] Use ClassNames in Dialog component

---
 components/dialog/Dialog.jsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/dialog/Dialog.jsx b/components/dialog/Dialog.jsx
index 8a4cede45..0121e665b 100644
--- a/components/dialog/Dialog.jsx
+++ b/components/dialog/Dialog.jsx
@@ -1,18 +1,18 @@
 import React from 'react';
+import ClassNames from 'classnames';
 import Button from '../button';
 import Overlay from '../overlay';
 import style from './style.scss';
 
 const Dialog = (props) => {
   const actions = props.actions.map((action, idx) => {
-    let className = style.button;
-    if (action.className) className += ` ${action.className}`;
+    const className = ClassNames(style.button, {[action.className]: action.className});
     return <Button key={idx} {...action} className={className} />;
   });
 
-  let className = `${style.root} ${style[props.type]}`;
-  if (props.active) className += ` ${style.active}`;
-  if (props.className) className += ` ${props.className}`;
+  const className = ClassNames([ style.root, style[props.type] ], {
+    [style.active]: props.active
+  }, props.className);
 
   return (
     <Overlay active={props.active} onClick={props.onOverlayClick}>

From ee45186d9a059cac40974934e2ccb70782ccbc4d Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 28 Nov 2015 15:32:58 +0100
Subject: [PATCH 0200/1024] Use ClassNames in Drawer

---
 components/drawer/Drawer.jsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/components/drawer/Drawer.jsx b/components/drawer/Drawer.jsx
index ec74071fc..651e7ac00 100644
--- a/components/drawer/Drawer.jsx
+++ b/components/drawer/Drawer.jsx
@@ -1,11 +1,12 @@
 import React from 'react';
+import ClassNames from 'classnames';
 import Overlay from '../overlay';
 import style from './style';
 
 const Drawer = (props) => {
-  let className = `${style.root} ${style[props.type]}`;
-  if (props.active) className += ` ${style.active}`;
-  if (props.className) className += ` ${props.className}`;
+  const className = ClassNames([style.root, style[props.type]], {
+    [style.active]: props.active
+  }, props.className);
 
   return (
     <Overlay active={props.active} onClick={props.onOverlayClick}>

From 1370e2a2c9593c0b74d092141ef6407ed2b8e416 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 28 Nov 2015 15:39:09 +0100
Subject: [PATCH 0201/1024] Use ClassNames in Dropdown

---
 components/dropdown/Dropdown.jsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/components/dropdown/Dropdown.jsx b/components/dropdown/Dropdown.jsx
index 2ece14237..8ed8f30df 100644
--- a/components/dropdown/Dropdown.jsx
+++ b/components/dropdown/Dropdown.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import ClassNames from 'classnames';
 import style from './style';
 
 class Dropdown extends React.Component {
@@ -58,12 +59,12 @@ class Dropdown extends React.Component {
   }
 
   render () {
-    let className = style.root;
     const selected = this.getSelectedItem();
-    if (this.state.up) className += ` ${style.up}`;
-    if (this.state.active) className += ` ${style.active}`;
-    if (this.props.disabled) className += ` ${style.disabled}`;
-    if (this.props.className) className += ` ${this.props.className}`;
+    const className = ClassNames(style.root, {
+      [style.up]: this.state.up,
+      [style.active]: this.state.active,
+      [style.disabled]: this.props.disabled
+    }, this.props.className);
 
     return (
       <div data-react-toolbox='dropdown' className={className}>

From ad916fba6d5758db5e3a1c805e856e02c9f17196 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 28 Nov 2015 15:49:05 +0100
Subject: [PATCH 0202/1024] Remove flex attributes styling

---
 components/commons.scss      | 97 ------------------------------------
 spec/components/dropdown.jsx | 14 ++----
 spec/style.scss              | 20 ++++++++
 3 files changed, 24 insertions(+), 107 deletions(-)

diff --git a/components/commons.scss b/components/commons.scss
index ff4537526..c314c3cca 100644
--- a/components/commons.scss
+++ b/components/commons.scss
@@ -98,100 +98,3 @@ h6 {
 p {
   @include typo-body-1;
 }
-
-@if $import-flex-attributes != false {
-  //-- Flex
-  [data-flex] {
-    display: flex;
-  }
-
-  body[data-flex] {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    overflow: hidden;
-  }
-
-  // -- Direction
-  [data-flex^="horizontal"] {
-    flex-direction: row;
-  }
-
-  [data-flex^="vertical"] {
-    flex-direction: column;
-  }
-
-
-  // -- Size {
-  [data-flex*="grow"] {
-    > *:not([data-column]):not([data-flex-grow]) {
-      flex-grow: 1;
-    }
-  }
-
-  [data-flex-grow="min"] {
-    flex-grow: 0;
-  }
-
-  [data-flex-grow="max"] {
-    flex-grow: 2;
-  }
-
-  // -- Container properties
-  [data-flex*="wrap"] {
-    flex-wrap: wrap;
-  }
-
-  [data-flex*="center"] {
-    align-content: center;
-    align-items: center;
-    justify-content: center;
-  }
-
-  [data-flex-justify="start"] {
-    justify-content: flex-start;
-  }
-
-  [data-flex-justify="center"] {
-    justify-content: center;
-  }
-
-  [data-flex-justify="end"] {
-    justify-content: flex-end;
-  }
-
-  [data-flex-content="start"] {
-    align-content: flex-start;
-  }
-
-  [data-flex-content="center"] {
-    align-content: center;
-  }
-
-  [data-flex-content="end"] {
-    align-content: flex-end;
-  }
-
-  [data-flex-items="center"] {
-    align-items: center;
-  }
-
-  [data-flex-items="start"] {
-    align-items: flex-start;
-  }
-
-  [data-flex-items="end"] {
-    align-items: flex-end;
-  }
-
-  // -- Children properties
-  [data-flex-order="first"] {
-    order: -1;
-  }
-
-  [data-flex-order="last"] {
-    order: 999999;
-  }
-}
diff --git a/spec/components/dropdown.jsx b/spec/components/dropdown.jsx
index a87c1c559..a38797e74 100644
--- a/spec/components/dropdown.jsx
+++ b/spec/components/dropdown.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import Dropdown from '../../components/dropdown';
+import style from '../style';
 
 const countries = [
   { value: 'EN-gb', label: 'England', img: 'http://' },
@@ -22,17 +23,10 @@ class DropdownTest extends React.Component {
   };
 
   customDropdownItem (data) {
-    const style = {
-      width: 32,
-      height: 32,
-      backgroundColor: '#ccc',
-      marginRight: 8
-    };
-
     return (
-      <div data-flex="horizontal grow" data-flex-content="center">
-        <img src={data.img} data-flex-grow="min" style={style} />
-        <div data-flex-grow="max" data-flex="vertical" >
+      <div className={style.dropdownTemplate}>
+        <img className={style.dropdownTemplateImage} src={data.img} />
+        <div className={style.dropdownTemplateContent}>
           <strong>{data.label}</strong>
           <small>{data.value}</small>
         </div>
diff --git a/spec/style.scss b/spec/style.scss
index 4d4b78cd5..ae0851f28 100644
--- a/spec/style.scss
+++ b/spec/style.scss
@@ -109,3 +109,23 @@ $offset: 1.8 * $unit;
 .card {
   width: 345px;
 }
+
+.dropdownTemplate {
+  flex-direction: row;
+  display: flex;
+}
+
+.dropdownTemplateImage {
+  display: flex;
+  flex-grow: 0;
+  width: 32px;
+  height: 32px;
+  background-color: #ccc;
+  margin-right: 8px;
+}
+
+.dropdownTemplateContent {
+  display: flex;
+  flex-grow: 2;
+  flex-direction: column;
+}

From 2dae5b72fdf9a302ab394d7f911821f019947531 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 28 Nov 2015 15:51:53 +0100
Subject: [PATCH 0203/1024] Pass scss lint

---
 spec/style.scss | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/spec/style.scss b/spec/style.scss
index ae0851f28..b2fb10cfb 100644
--- a/spec/style.scss
+++ b/spec/style.scss
@@ -54,19 +54,19 @@ $offset: 1.8 * $unit;
 }
 
 .cards {
-  background-color: #f8f8f8;
   margin-top: 10px;
+  background-color: #f8f8f8;
   border: 1px solid #f4f4f4;
 }
 
 .cardsGroup {
-  padding: 20px;
-  list-style: none;
+  position: relative;
   display: flex;
   flex-wrap: wrap;
-  position: relative;
-  justify-content: center;
   align-items: stretch;
+  justify-content: center;
+  padding: 20px;
+  list-style: none;
 }
 
 .cardRow {
@@ -111,21 +111,21 @@ $offset: 1.8 * $unit;
 }
 
 .dropdownTemplate {
-  flex-direction: row;
   display: flex;
+  flex-direction: row;
 }
 
 .dropdownTemplateImage {
   display: flex;
-  flex-grow: 0;
   width: 32px;
   height: 32px;
-  background-color: #ccc;
+  flex-grow: 0;
   margin-right: 8px;
+  background-color: #ccc;
 }
 
 .dropdownTemplateContent {
   display: flex;
-  flex-grow: 2;
   flex-direction: column;
+  flex-grow: 2;
 }

From bf726ba088849f986d9328ce20566e134940ee7c Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 28 Nov 2015 15:55:09 +0100
Subject: [PATCH 0204/1024] Use Classnames in Link

---
 components/link/Link.jsx | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/components/link/Link.jsx b/components/link/Link.jsx
index 8dcae78cc..f0a2a1194 100644
--- a/components/link/Link.jsx
+++ b/components/link/Link.jsx
@@ -1,17 +1,12 @@
 import React from 'react';
+import ClassNames from 'classnames';
 import style from './style';
 import FontIcon from '../font_icon';
 
 const Link = (props) => {
-  let className = style.root;
-  if (props.className) className += ` ${props.className}`;
-
+  const className = ClassNames(style.root, props.className);
   return (
-    <a
-      {...props}
-      data-react-toolbox='link'
-      className={className}
-    >
+    <a {...props} data-react-toolbox='link'className={className}>
       {props.icon ? <FontIcon className={style.icon} value={props.icon} /> : null}
       {props.label ? <abbr>{props.label}</abbr> : null}
       {props.count && parseInt(props.count) !== 0 ? <small>{props.count}</small> : null}

From 3d9b92164cda4e208bb7b0525e9bb39303ff65c2 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 28 Nov 2015 15:58:51 +0100
Subject: [PATCH 0205/1024] Rename list to List and use ClassNames in ListItem

---
 components/list/ListItem.jsx | 11 ++++++-----
 components/list/style.scss   |  2 +-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/components/list/ListItem.jsx b/components/list/ListItem.jsx
index 96a7c4831..d8ec16c47 100644
--- a/components/list/ListItem.jsx
+++ b/components/list/ListItem.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import ClassNames from 'classnames';
 import FontIcon from '../font_icon';
 import ListItemContent from './ListItemContent';
 import Ripple from '../ripple';
@@ -38,11 +39,11 @@ class ListItem extends React.Component {
   };
 
   renderContent () {
-    let className = style.item;
-    if (this.props.legend) className += ` ${style['with-legend']}`;
-    if (this.props.disabled) className += ` ${style.disabled}`;
-    if (this.props.className) className += ` ${this.props.className}`;
-    if (this.props.selectable) className += ` ${style.selectable}`;
+    const className = ClassNames(style.item, {
+      [style.withLegend]: this.props.legend,
+      [style.disabled]: this.props.disabled,
+      [style.selectable]: this.props.selectable
+    }, this.props.className);
 
     return (
       <span className={className}>
diff --git a/components/list/style.scss b/components/list/style.scss
index e3eccd578..9d6f059cf 100644
--- a/components/list/style.scss
+++ b/components/list/style.scss
@@ -49,7 +49,7 @@
     cursor: pointer;
     background-color: $list-item-hover-color;
   }
-  &.with-legend {
+  &.withLegend {
     height: $list-item-min-height-legend;
   }
   &.disabled {

From 2b9c615af6f68c9058124a333a887f88e4daaa5c Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 28 Nov 2015 16:01:38 +0100
Subject: [PATCH 0206/1024] Bugfix: rename with-legend class to withLegend

---
 components/list/ListCheckbox.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/list/ListCheckbox.jsx b/components/list/ListCheckbox.jsx
index 615e04e22..1fd261da1 100644
--- a/components/list/ListCheckbox.jsx
+++ b/components/list/ListCheckbox.jsx
@@ -5,7 +5,7 @@ import style from './style';
 
 const ListCheckbox = (props) => {
   let className = `${style.item} ${style['checkbox-item']}`;
-  if (props.legend) className += ` ${style['with-legend']}`;
+  if (props.legend) className += ` ${style.withLegend}`;
   if (props.disabled) className += ` ${style.disabled}`;
   if (props.className) className += ` ${props.className}`;
 

From edcb7f5244cbed73575b314ac5a4141bfd7bbcb2 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 28 Nov 2015 16:04:09 +0100
Subject: [PATCH 0207/1024] Use ClassNames in ListItemCheckbox

---
 components/list/ListCheckbox.jsx | 9 +++++----
 components/list/style.scss       | 2 +-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/components/list/ListCheckbox.jsx b/components/list/ListCheckbox.jsx
index 1fd261da1..53ebb2841 100644
--- a/components/list/ListCheckbox.jsx
+++ b/components/list/ListCheckbox.jsx
@@ -1,13 +1,14 @@
 import React from 'react';
+import ClassNames from 'classnames';
 import Checkbox from '../checkbox';
 import ListItemContent from './ListItemContent';
 import style from './style';
 
 const ListCheckbox = (props) => {
-  let className = `${style.item} ${style['checkbox-item']}`;
-  if (props.legend) className += ` ${style.withLegend}`;
-  if (props.disabled) className += ` ${style.disabled}`;
-  if (props.className) className += ` ${props.className}`;
+  const className = ClassNames([style.item, style.checkboxItem], {
+    [style.withLegend]: props.legend,
+    [style.disabled]: props.disabled
+  }, props.className);
 
   return (
     <li className={className}>
diff --git a/components/list/style.scss b/components/list/style.scss
index 9d6f059cf..63548791e 100644
--- a/components/list/style.scss
+++ b/components/list/style.scss
@@ -54,7 +54,7 @@
   }
   &.disabled {
     pointer-events: none;
-    &:not(.checkbox-item) {
+    &:not(.checkboxItem) {
       opacity: .5;
     }
     > .checkbox > [data-role='label'] {

From 794a3858356d98df1e631e336df61070f892a285 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 28 Nov 2015 16:08:00 +0100
Subject: [PATCH 0208/1024] Use ClassNames in Menu

---
 components/menu/{menu.jsx => Menu.jsx} | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)
 rename components/menu/{menu.jsx => Menu.jsx} (95%)

diff --git a/components/menu/menu.jsx b/components/menu/Menu.jsx
similarity index 95%
rename from components/menu/menu.jsx
rename to components/menu/Menu.jsx
index 5b06be450..8a9f07d96 100644
--- a/components/menu/menu.jsx
+++ b/components/menu/Menu.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import ClassNames from 'classnames';
 import MenuItem from './MenuItem';
 import { events, utils } from '../utils';
 import style from './style.menu';
@@ -151,10 +152,10 @@ class Menu extends React.Component {
 
   render () {
     const outlineStyle = { width: this.state.width, height: this.state.height };
-    let className = `${style.root} ${style[this.state.position]}`;
-    if (this.state.active) className += ` ${style.active}`;
-    if (this.state.rippled) className += ` ${style.rippled}`;
-    if (this.props.className) className += ` ${this.props.className}`;
+    const className = ClassNames([style.root, style[this.state.position]], {
+      [style.active]: this.state.active,
+      [style.rippled]: this.state.rippled
+    }, this.props.className);
 
     return (
       <div className={className} style={this.getRootStyle()}>

From 7367964c86f46e1db41312a8cde4dffc69eda3b4 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 28 Nov 2015 16:08:20 +0100
Subject: [PATCH 0209/1024] Capitalize list component filename

---
 components/list/{list.jsx => List.jsx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename components/list/{list.jsx => List.jsx} (100%)

diff --git a/components/list/list.jsx b/components/list/List.jsx
similarity index 100%
rename from components/list/list.jsx
rename to components/list/List.jsx

From 215936f8562cc56a42ea60a10b6c2d9071c7c701 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 28 Nov 2015 16:17:11 +0100
Subject: [PATCH 0210/1024] Use ClassNames in ProgressBar

---
 components/progress_bar/ProgressBar.jsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/components/progress_bar/ProgressBar.jsx b/components/progress_bar/ProgressBar.jsx
index f01089ae6..7deaef32b 100644
--- a/components/progress_bar/ProgressBar.jsx
+++ b/components/progress_bar/ProgressBar.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import ClassNames from 'classnames';
 import style from './style';
 import prefixer from '../utils/prefixer';
 
@@ -10,7 +11,7 @@ class ProgressBar extends React.Component {
     min: React.PropTypes.number,
     mode: React.PropTypes.string,
     multicolor: React.PropTypes.bool,
-    type: React.PropTypes.string,
+    type: React.PropTypes.oneOf(['linear', 'circular']),
     value: React.PropTypes.number
   };
 
@@ -67,10 +68,10 @@ class ProgressBar extends React.Component {
   }
 
   render () {
-    let className = this.props.type === 'linear' ? style.linear : style.circular;
-    if (this.props.mode) className += ` ${style[this.props.mode]}`;
-    if (this.props.multicolor) className += ` ${style.multicolor}`;
-    if (this.props.className) className += ` ${this.props.className}`;
+    const className = ClassNames(style[this.props.type], {
+      [style[this.props.mode]]: this.props.mode,
+      [style.multicolor]: this.props.multicolor
+    }, this.props.className);
 
     return (
       <div

From 5a002b471246d5ecb3e082fdd8d89ef95a44d40a Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 28 Nov 2015 19:46:19 +0100
Subject: [PATCH 0211/1024] Fix icons in icon menu example

---
 components/menu/readme.md                                   | 6 +++---
 .../layout/main/modules/examples/menu_example_1.txt         | 4 ++--
 spec/components/icon_menu.jsx                               | 3 ++-
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/components/menu/readme.md b/components/menu/readme.md
index 5d70b53e1..2efbe3219 100644
--- a/components/menu/readme.md
+++ b/components/menu/readme.md
@@ -7,10 +7,10 @@ A [Menu](https://www.google.com/design/spec/components/menus.html) is a temporar
 import {IconMenu, MenuItem, MenuDivider } from 'react-toolbox';
  
 const MenuTest = () => (
-  <IconMenu icon='more_vert' position='top-left' menuRipple selectable>
-    <MenuItem value='download' icon='get-app' caption='Download' />
+  <IconMenu icon='more_vert' position='top-left' menuRipple>
+    <MenuItem value='download' icon='get_app' caption='Download' />
     <MenuItem value='help' icon='favorite' caption='Favorite' />
-    <MenuItem value='settings' icon='open-in-browser' caption='Open in app' />
+    <MenuItem value='settings' icon='open_in_browser' caption='Open in app' />
     <MenuDivider />
     <MenuItem value='signout' icon='delete' caption='Delete' disabled />
   </IconMenu>
diff --git a/docs/app/components/layout/main/modules/examples/menu_example_1.txt b/docs/app/components/layout/main/modules/examples/menu_example_1.txt
index a44db3d64..9b31278e9 100644
--- a/docs/app/components/layout/main/modules/examples/menu_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/menu_example_1.txt
@@ -1,8 +1,8 @@
 const MenuTest = () => (
   <IconMenu icon='more_vert' position='top-left' menuRipple>
-    <MenuItem value='download' icon='get-app' caption='Download' />
+    <MenuItem value='download' icon='get_app' caption='Download' />
     <MenuItem value='help' icon='favorite' caption='Favorite' />
-    <MenuItem value='settings' icon='open-in-browser' caption='Open in app' />
+    <MenuItem value='settings' icon='open_in_browser' caption='Open in app' />
     <MenuDivider />
     <MenuItem value='signout' icon='delete' caption='Delete' disabled />
   </IconMenu>
diff --git a/spec/components/icon_menu.jsx b/spec/components/icon_menu.jsx
index 9d8c5f1f3..146f9229c 100644
--- a/spec/components/icon_menu.jsx
+++ b/spec/components/icon_menu.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { MenuItem, IconMenu } from '../../components/menu';
+import { MenuItem, IconMenu, MenuDivider } from '../../components/menu';
 
 class IconMenuTest extends React.Component {
   state = {
@@ -42,6 +42,7 @@ class IconMenuTest extends React.Component {
           <MenuItem onClick={this.handleItem} value='refresh' caption='Refresh' />
           <MenuItem value='help' caption='Help & Feedback' />
           <MenuItem value='settings' caption='Settings' />
+          <MenuDivider />
           <MenuItem value='signout' caption='Sign out' disabled />
         </IconMenu>
       </section>

From 3b1e1f0b6ecafa69c05cecfa99a75b22c6a9af35 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 28 Nov 2015 19:54:45 +0100
Subject: [PATCH 0212/1024] Use ClassNames in Radio

---
 components/radio/RadioButton.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/radio/RadioButton.jsx b/components/radio/RadioButton.jsx
index 4c2d681b7..838199422 100644
--- a/components/radio/RadioButton.jsx
+++ b/components/radio/RadioButton.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import ClassNames from 'classnames';
 import Ripple from '../ripple';
 import style from './style';
 import events from '../utils/events';
@@ -50,9 +51,8 @@ class RadioButton extends React.Component {
   }
 
   render () {
-    let labelClassName = style[this.props.disabled ? 'disabled' : 'field'];
+    const labelClassName = ClassNames(style[this.props.disabled ? 'disabled' : 'field'], this.props.className);
     const radioClassName = style[this.props.checked ? 'radio-checked' : 'radio'];
-    if (this.props.className) labelClassName += ` ${this.props.className}`;
 
     return (
       <label className={labelClassName} onClick={this.handleClick}>

From e328ffc5dd1546de1159a8ebe732655e17916ed4 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 28 Nov 2015 20:03:08 +0100
Subject: [PATCH 0213/1024] Use ClassNames in Slider

---
 components/ripple/Ripple.jsx |  9 +++++----
 components/slider/Slider.jsx | 14 ++++++++------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/components/ripple/Ripple.jsx b/components/ripple/Ripple.jsx
index cf2d96f24..ca7547c99 100644
--- a/components/ripple/Ripple.jsx
+++ b/components/ripple/Ripple.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import ClassNames from 'classnames';
 import prefixer from '../utils/prefixer';
 import style from './style';
 
@@ -61,10 +62,10 @@ class Ripple extends React.Component {
       }, rippleStyle);
     }
 
-    let className = style[this.props.loading ? 'loading' : 'normal'];
-    if (this.state.active) className += ` ${style.active}`;
-    if (this.state.restarting) className += ` ${style.restarting}`;
-    if (this.props.className) className += ` ${this.props.className}`;
+    const className = ClassNames(style[this.props.loading ? 'loading' : 'normal'], {
+      [style.active]: this.state.active,
+      [style.restarting]: this.state.restarting
+    }, this.props.className);
 
     return (
       <span data-react-toolbox='ripple' className={style.wrapper}>
diff --git a/components/slider/Slider.jsx b/components/slider/Slider.jsx
index 8d20cd756..586172110 100644
--- a/components/slider/Slider.jsx
+++ b/components/slider/Slider.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import ClassNames from 'classnames';
 import style from './style';
 import events from '../utils/events';
 import prefixer from '../utils/prefixer';
@@ -227,15 +228,16 @@ class Slider extends React.Component {
 
   render () {
     const knobStyles = prefixer({transform: `translateX(${this.knobOffset()}px)`});
-    let className = this.props.className;
-    if (this.props.editable) className += ` ${style.editable}`;
-    if (this.props.pinned) className += ` ${style.pinned}`;
-    if (this.state.pressed) className += ` ${style.pressed}`;
-    if (this.props.value === this.props.min) className += ` ${style.ring}`;
+    const className = ClassNames(style.root, {
+      [style.editable]: this.props.editable,
+      [style.pinned]: this.props.pinned,
+      [style.pressed]: this.state.pressed,
+      [style.ring]: this.props.value === this.props.min
+    }, this.props.className);
 
     return (
       <div
-        className={style.root + className}
+        className={className}
         data-react-toolbox='slider'
         onBlur={this.handleSliderBlur}
         onFocus={this.handleSliderFocus}

From 95162002dece7d56c226f5f03fdf38fa9af09248 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 28 Nov 2015 20:15:26 +0100
Subject: [PATCH 0214/1024] Use ClassNames in Snackbar

---
 components/button/style.scss                  | 22 +++++++--------
 components/snackbar/Snackbar.jsx              | 28 ++++++-------------
 components/snackbar/readme.md                 |  2 +-
 .../modules/examples/snackbar_example_1.txt   |  2 +-
 spec/components/snackbar.jsx                  |  2 +-
 5 files changed, 22 insertions(+), 34 deletions(-)

diff --git a/components/button/style.scss b/components/button/style.scss
index d92050f5d..b06d5bfdf 100644
--- a/components/button/style.scss
+++ b/components/button/style.scss
@@ -130,21 +130,19 @@
 }
 
 .neutral:not([disabled]) {
-  &:not(.inverse) {
-    &.raised, &.floating {
-      color: $button-neutral-color-contrast;
-      background-color: $button-neutral-color;
-    }
-    &.flat, &.toggle {
-      color: $button-neutral-color-contrast;
-      &:focus:not(:active) {
-        background: $button-neutral-color-hover;
-      }
-    }
-    &.flat:hover {
+  &.raised, &.floating {
+    color: $button-neutral-color-contrast;
+    background-color: $button-neutral-color;
+  }
+  &.flat, &.toggle {
+    color: $button-neutral-color-contrast;
+    &:focus:not(:active) {
       background: $button-neutral-color-hover;
     }
   }
+  &.flat:hover {
+    background: $button-neutral-color-hover;
+  }
 
   &.inverse {
     &.raised, &.floating {
diff --git a/components/snackbar/Snackbar.jsx b/components/snackbar/Snackbar.jsx
index 2eeaaf060..1b9536d97 100644
--- a/components/snackbar/Snackbar.jsx
+++ b/components/snackbar/Snackbar.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import ClassNames from 'classnames';
 import Button from '../button';
 import FontIcon from '../font_icon';
 import Overlay from '../overlay';
@@ -25,29 +26,18 @@ class Snackbar extends React.Component {
     }
   }
 
-  renderButton () {
-    if (this.props.action) {
-      return (
-        <Button
-          className={style.button}
-          label={this.props.action}
-          onClick={this.props.onClick}
-        />
-      );
-    }
-  }
-
   render () {
-    let className = `${style.root} ${style[this.props.type]}`;
-    if (this.props.active) className += ` ${style.active}`;
-    if (this.props.className) className += ` ${this.props.className}`;
+    const {action, active, icon, label, onClick, type } = this.props;
+    const className = ClassNames([style.root, style[type]], {
+      [style.active]: active
+    }, this.props.className);
 
     return (
-      <Overlay active={this.props.active} opacity={0}>
+      <Overlay active={active} opacity={0}>
         <div data-react-toolbox='snackbar' className={className}>
-          {this.props.icon ? <FontIcon value={this.props.icon} className={style.icon} /> : null}
-          <span className={style.label}>{this.props.label}</span>
-          {this.renderButton()}
+          {icon ? <FontIcon value={icon} className={style.icon} /> : null}
+          <span className={style.label}>{label}</span>
+          {action ? <Button className={style.button} label={action} onClick={onClick}/> : null}
         </div>
       </Overlay>
     );
diff --git a/components/snackbar/readme.md b/components/snackbar/readme.md
index cb33e64f3..133416bab 100644
--- a/components/snackbar/readme.md
+++ b/components/snackbar/readme.md
@@ -21,7 +21,7 @@ class SnackbarTest extends React.Component {
         <Button label='Show Snackbar' raised onClick={this.handleClick} />
         <Snackbar
           action='http://github.com/Nice'
-          icon='question-answer'
+          icon='question_answer'
           label='A new developer started using React Toolbox'
           onClick={this.handleSnackbarClick}
           ref='snackbar'
diff --git a/docs/app/components/layout/main/modules/examples/snackbar_example_1.txt b/docs/app/components/layout/main/modules/examples/snackbar_example_1.txt
index bd1d7b455..1841ecb13 100644
--- a/docs/app/components/layout/main/modules/examples/snackbar_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/snackbar_example_1.txt
@@ -24,7 +24,7 @@ class SnackbarTest extends React.Component {
         <Snackbar
           action='http://github.com/Dismiss'
           active={this.state.active}
-          icon='question-answer'
+          icon='question_answer'
           label='Snackbar action cancel'
           timeout={2000}
           onClick={this.handleSnackbarClick}
diff --git a/spec/components/snackbar.jsx b/spec/components/snackbar.jsx
index fe923d2fb..e43d6fee4 100644
--- a/spec/components/snackbar.jsx
+++ b/spec/components/snackbar.jsx
@@ -28,7 +28,7 @@ class SnackbarTest extends React.Component {
         <Snackbar
           action='http://github.com/Hide'
           active={this.state.active}
-          icon='question-answer'
+          icon='question_answer'
           label='Snackbar action cancel'
           timeout={2000}
           onClick={this.handleSnackbarClick}

From c5d0d153b4960fce56f8b51a8dd0e4722ffa1631 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 28 Nov 2015 20:17:55 +0100
Subject: [PATCH 0215/1024] Use ClassNames in TableRow

---
 components/table/TableRow.jsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/components/table/TableRow.jsx b/components/table/TableRow.jsx
index 2d8f0bab6..1119a4bf4 100644
--- a/components/table/TableRow.jsx
+++ b/components/table/TableRow.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import ClassNames from 'classnames';
 import Checkbox from '../checkbox';
 import utils from '../utils/utils';
 import style from './style';
@@ -58,9 +59,10 @@ class TableRow extends React.Component {
   }
 
   render () {
-    let className = style.row;
-    if (this.props.onChange) className += ` ${style.editable}`;
-    if (this.props.selected) className += ` ${style.selected}`;
+    const className = ClassNames(style.row, {
+      [style.editable]: this.props.onChange,
+      [style.selected]: this.props.selected
+    });
 
     return (
       <tr data-react-toolbox-table='row' className={className}>

From 35f8f12ae6c683a7bca3b023da3daa81c644a234 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 28 Nov 2015 20:19:42 +0100
Subject: [PATCH 0216/1024] Use ClassNames in Tabs and rename files

---
 components/tabs/{tab.jsx => Tab.jsx}   | 11 ++++++-----
 components/tabs/{tabs.jsx => Tabs.jsx} |  0
 2 files changed, 6 insertions(+), 5 deletions(-)
 rename components/tabs/{tab.jsx => Tab.jsx} (76%)
 rename components/tabs/{tabs.jsx => Tabs.jsx} (100%)

diff --git a/components/tabs/tab.jsx b/components/tabs/Tab.jsx
similarity index 76%
rename from components/tabs/tab.jsx
rename to components/tabs/Tab.jsx
index 85579d98e..e011a3227 100644
--- a/components/tabs/tab.jsx
+++ b/components/tabs/Tab.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import ClassNames from 'classnames';
 import style from './style';
 
 class TabHeader extends React.Component {
@@ -32,11 +33,11 @@ class TabHeader extends React.Component {
   };
 
   render () {
-    let className = style.label;
-    if (this.props.active) className += ` ${style.active}`;
-    if (this.props.hidden) className += ` ${style.hidden}`;
-    if (this.props.disabled) className += ` ${style.disabled}`;
-    if (this.props.className) className += ` ${this.props.className}`;
+    const className = ClassNames(style.label, {
+      [style.active]: this.props.active,
+      [style.hidden]: this.props.hidden,
+      [style.disabled]: this.props.disabled
+    }, this.props.className);
 
     return (
       <label className={className} onClick={this.handleClick}>
diff --git a/components/tabs/tabs.jsx b/components/tabs/Tabs.jsx
similarity index 100%
rename from components/tabs/tabs.jsx
rename to components/tabs/Tabs.jsx

From db43b1948e8baee2bc85925e8104d0c739db955c Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 28 Nov 2015 20:21:52 +0100
Subject: [PATCH 0217/1024] Use ClassNames in Tooltip

---
 components/tooltip/Tooltip.jsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/components/tooltip/Tooltip.jsx b/components/tooltip/Tooltip.jsx
index f68dc4909..9ebcd429c 100644
--- a/components/tooltip/Tooltip.jsx
+++ b/components/tooltip/Tooltip.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import ClassNames from 'classnames';
 import style from './style';
 
 const HIDE_TIMEOUT = 100;
@@ -53,9 +54,9 @@ class Tooltip extends React.Component {
   };
 
   render () {
-    let className = style.root;
-    if (this.props.className) className += ` ${this.props.className}`;
-    if (this.state.active) className += ` ${style.active}`;
+    const className = ClassNames(style.root, {
+      [style.active]: this.state.active
+    }, this.props.className);
 
     return (
       <span data-react-toolbox='tooltip' className={className}>

From da0f1a631e0bb7dcf90fc949898ccdc9f9da89cd Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 28 Nov 2015 20:24:46 +0100
Subject: [PATCH 0218/1024] Remove jsx extension from imports in components

---
 components/app_bar/index.js      | 2 +-
 components/autocomplete/index.js | 2 +-
 components/avatar/index.js       | 2 +-
 components/checkbox/index.js     | 2 +-
 components/date_picker/index.js  | 2 +-
 components/dialog/index.js       | 2 +-
 components/drawer/index.js       | 2 +-
 components/dropdown/index.js     | 2 +-
 components/font_icon/index.js    | 2 +-
 components/form/index.js         | 2 +-
 components/input/index.js        | 2 +-
 components/link/index.js         | 2 +-
 components/navigation/index.js   | 2 +-
 components/overlay/index.js      | 2 +-
 components/progress_bar/index.js | 2 +-
 components/snackbar/index.js     | 2 +-
 components/switch/index.js       | 2 +-
 components/table/index.js        | 2 +-
 components/tabs/index.js         | 4 ++--
 components/time_picker/index.js  | 2 +-
 components/tooltip/index.js      | 2 +-
 21 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/components/app_bar/index.js b/components/app_bar/index.js
index f3e152c09..12719fb26 100644
--- a/components/app_bar/index.js
+++ b/components/app_bar/index.js
@@ -1 +1 @@
-export default from './AppBar.jsx';
+export default from './AppBar';
diff --git a/components/autocomplete/index.js b/components/autocomplete/index.js
index cd659a51c..63f423cf7 100644
--- a/components/autocomplete/index.js
+++ b/components/autocomplete/index.js
@@ -1 +1 @@
-export default from './Autocomplete.jsx';
+export default from './Autocomplete';
diff --git a/components/avatar/index.js b/components/avatar/index.js
index c2e4cd6b9..136e01f33 100644
--- a/components/avatar/index.js
+++ b/components/avatar/index.js
@@ -1,3 +1,3 @@
-import Avatar from './Avatar.jsx';
+import Avatar from './Avatar';
 export { Avatar };
 export default Avatar;
diff --git a/components/checkbox/index.js b/components/checkbox/index.js
index 626810b39..f3d29de1e 100644
--- a/components/checkbox/index.js
+++ b/components/checkbox/index.js
@@ -1 +1 @@
-export default from './Checkbox.jsx';
+export default from './Checkbox';
diff --git a/components/date_picker/index.js b/components/date_picker/index.js
index 38f9dabea..02d322e5e 100644
--- a/components/date_picker/index.js
+++ b/components/date_picker/index.js
@@ -1 +1 @@
-export default from './DatePicker.jsx';
+export default from './DatePicker';
diff --git a/components/dialog/index.js b/components/dialog/index.js
index 074f9e1f0..7faed16fa 100644
--- a/components/dialog/index.js
+++ b/components/dialog/index.js
@@ -1 +1 @@
-export default from './Dialog.jsx';
+export default from './Dialog';
diff --git a/components/drawer/index.js b/components/drawer/index.js
index 631e1dd3e..717461790 100644
--- a/components/drawer/index.js
+++ b/components/drawer/index.js
@@ -1 +1 @@
-export default from './Drawer.jsx';
+export default from './Drawer';
diff --git a/components/dropdown/index.js b/components/dropdown/index.js
index dccf96d9a..2640e262c 100644
--- a/components/dropdown/index.js
+++ b/components/dropdown/index.js
@@ -1 +1 @@
-export default from './Dropdown.jsx';
+export default from './Dropdown';
diff --git a/components/font_icon/index.js b/components/font_icon/index.js
index f4a63e7e9..29e818f60 100644
--- a/components/font_icon/index.js
+++ b/components/font_icon/index.js
@@ -1 +1 @@
-export default from './FontIcon.jsx';
+export default from './FontIcon';
diff --git a/components/form/index.js b/components/form/index.js
index a6a1f3a02..4516c6297 100644
--- a/components/form/index.js
+++ b/components/form/index.js
@@ -1 +1 @@
-export default from './Form.jsx';
+export default from './Form';
diff --git a/components/input/index.js b/components/input/index.js
index afc98883e..3d7b4980e 100644
--- a/components/input/index.js
+++ b/components/input/index.js
@@ -1 +1 @@
-export default from './Input.jsx';
+export default from './Input';
diff --git a/components/link/index.js b/components/link/index.js
index 283402972..5bda4e744 100644
--- a/components/link/index.js
+++ b/components/link/index.js
@@ -1 +1 @@
-export default from './Link.jsx';
+export default from './Link';
diff --git a/components/navigation/index.js b/components/navigation/index.js
index 71ba44354..173ff5a1c 100644
--- a/components/navigation/index.js
+++ b/components/navigation/index.js
@@ -1 +1 @@
-export default from './Navigation.jsx';
+export default from './Navigation';
diff --git a/components/overlay/index.js b/components/overlay/index.js
index 030b11847..5be89753e 100644
--- a/components/overlay/index.js
+++ b/components/overlay/index.js
@@ -1 +1 @@
-export default from './Overlay.jsx';
+export default from './Overlay';
diff --git a/components/progress_bar/index.js b/components/progress_bar/index.js
index 1b73e214d..f9d75e8cd 100644
--- a/components/progress_bar/index.js
+++ b/components/progress_bar/index.js
@@ -1 +1 @@
-export default from './ProgressBar.jsx';
+export default from './ProgressBar';
diff --git a/components/snackbar/index.js b/components/snackbar/index.js
index 29ff7c39d..43bbf46da 100644
--- a/components/snackbar/index.js
+++ b/components/snackbar/index.js
@@ -1 +1 @@
-export default from './Snackbar.jsx';
+export default from './Snackbar';
diff --git a/components/switch/index.js b/components/switch/index.js
index 4aa0029cb..bc6c05d20 100644
--- a/components/switch/index.js
+++ b/components/switch/index.js
@@ -1 +1 @@
-export default from './Switch.jsx';
+export default from './Switch';
diff --git a/components/table/index.js b/components/table/index.js
index 71fc37996..aa0f03a09 100644
--- a/components/table/index.js
+++ b/components/table/index.js
@@ -1 +1 @@
-export default from './Table.jsx';
+export default from './Table';
diff --git a/components/tabs/index.js b/components/tabs/index.js
index 3860bc2ab..f6619dd74 100644
--- a/components/tabs/index.js
+++ b/components/tabs/index.js
@@ -1,2 +1,2 @@
-export Tabs from './Tabs.jsx';
-export Tab from './Tab.jsx';
+export Tabs from './Tabs';
+export Tab from './Tab';
diff --git a/components/time_picker/index.js b/components/time_picker/index.js
index 81fb3d72f..57f9fc91c 100644
--- a/components/time_picker/index.js
+++ b/components/time_picker/index.js
@@ -1 +1 @@
-export default from './TimePicker.jsx';
+export default from './TimePicker';
diff --git a/components/tooltip/index.js b/components/tooltip/index.js
index e48b883d2..17f06b52b 100644
--- a/components/tooltip/index.js
+++ b/components/tooltip/index.js
@@ -1 +1 @@
-export default from './Tooltip.jsx';
+export default from './Tooltip';

From 5248f8746876ace8df487e7161796e4f1f334fc7 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 28 Nov 2015 20:34:07 +0100
Subject: [PATCH 0219/1024] Delete loading prop from buttons

---
 components/button/Button.jsx | 8 +++-----
 components/button/readme.md  | 1 -
 spec/components/button.jsx   | 1 -
 3 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/components/button/Button.jsx b/components/button/Button.jsx
index 9f4706257..ff4f25eca 100644
--- a/components/button/Button.jsx
+++ b/components/button/Button.jsx
@@ -18,7 +18,6 @@ class Button extends React.Component {
     icon: React.PropTypes.string,
     inverse: React.PropTypes.bool,
     label: React.PropTypes.string,
-    loading: React.PropTypes.bool,
     mini: React.PropTypes.bool,
     primary: React.PropTypes.bool,
     raised: React.PropTypes.bool,
@@ -33,7 +32,6 @@ class Button extends React.Component {
     className: '',
     flat: false,
     floating: false,
-    loading: false,
     mini: false,
     primary: false,
     raised: false,
@@ -48,7 +46,7 @@ class Button extends React.Component {
 
   render () {
     const {accent, className, flat, floating, href, icon, inverse, label,
-           loading, mini, primary, raised, ripple,
+           mini, primary, raised, ripple,
            tooltip, tooltipDelay, ...others} = this.props;
     const element = href ? 'a' : 'button';
     const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
@@ -63,13 +61,13 @@ class Button extends React.Component {
       ...others,
       href,
       className: classes,
-      disabled: this.props.disabled || this.props.loading,
+      disabled: this.props.disabled,
       onMouseDown: this.handleMouseDown,
       'data-react-toolbox': 'button'
     };
 
     return React.createElement(element, props,
-      ripple ? <Ripple ref='ripple' loading={loading}/> : null,
+      ripple ? <Ripple ref='ripple' /> : null,
       tooltip ? <Tooltip className={style.tooltip} delay={tooltipDelay} label={tooltip}/> : null,
       icon ? <FontIcon className={style.icon} value={icon}/> : null,
       label ? label : this.props.children
diff --git a/components/button/readme.md b/components/button/readme.md
index 82dc9a878..d59ad5fa4 100644
--- a/components/button/readme.md
+++ b/components/button/readme.md
@@ -42,7 +42,6 @@ const TestButtons = () => (
 | `icon`      | `String`  |  | Value of the icon (See icon component). |
 | `inverse`    | `Boolean`  |  | If true, the neutral colors are inverted. Useful to put a button over a dark background. |
 | `label`     | `String`  |  | The text string to use for the name of the button.|
-| `loading`   | `Boolean`  | `false` | If true, component will be disabled and show a loading animation.|
 | `mini`  | `Boolean` | `false`  | To be used with floating button. If true the button will be smaller.|
 | `primary`  | `false` | `false` | Indicates if the button should have primary color.|
 | `raised`   | `Boolean`  | `false` | If true, the button will have a raised look. |
diff --git a/spec/components/button.jsx b/spec/components/button.jsx
index 23641ca0c..0b881a92c 100644
--- a/spec/components/button.jsx
+++ b/spec/components/button.jsx
@@ -26,7 +26,6 @@ const ButtonTest = () => (
     </IconButton>
     <Button icon='add' label='Add this' flat primary />
     <Button icon='add' label='Add this' flat disabled />
-    <Button icon='bookmark' label='Bookmark' raised primary loading />
   </section>
 );
 

From f23a3c691f01950cd422e09ef22743c573929f6e Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 29 Nov 2015 01:25:21 +0100
Subject: [PATCH 0220/1024] Fixes in Input component

---
 components/input/Input.jsx  | 58 +++++++++++++++----------------------
 components/input/style.scss | 20 +++++--------
 spec/components/input.jsx   |  4 +--
 3 files changed, 32 insertions(+), 50 deletions(-)

diff --git a/components/input/Input.jsx b/components/input/Input.jsx
index bb6617341..d5cb19390 100644
--- a/components/input/Input.jsx
+++ b/components/input/Input.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import classNames from 'classnames';
-import style from './style';
+import ClassNames from 'classnames';
 import FontIcon from '../font_icon';
 import Tooltip from '../tooltip';
+import style from './style';
 
 class Input extends React.Component {
   static propTypes = {
@@ -39,29 +39,19 @@ class Input extends React.Component {
   };
 
   renderInput () {
-    let className = style.input;
-    if (this.props.value && this.props.value.length > 0) className += ` ${style.filled}`;
+    const {multiline, value, ...others} = this.props;
+    const className = ClassNames(style.input, {[style.filled]: value});
 
-    const element = this.props.multiline ? 'textarea' : 'input';
-    return React.createElement(element, {
-      ...this.props,
+    return React.createElement(multiline ? 'textarea' : 'input', {
+      ...others,
       className,
       onChange: this.handleChange,
       ref: 'input',
-      role: 'input'
+      role: 'input',
+      value
     });
   }
 
-  renderUnderline () {
-    const error = this.props.error ? <span className={style.error}>{this.props.error}</span> : null;
-    let counter = null;
-    if (this.props.maxLength) {
-      const length = this.props.value ? this.props.value.length : 0;
-      if (length > 0) counter = <span className={style.counter}>{length} / {this.props.maxLength}</span>;
-    }
-    if (error || counter) return <span className={style.underline}>{error}{counter}</span>;
-  }
-
   blur () {
     this.refs.input.blur();
   }
@@ -71,28 +61,26 @@ class Input extends React.Component {
   }
 
   render () {
-    const className = classNames({
-      [style.root]: true,
-      [style.errored]: this.props.error,
-      [style.disabled]: this.props.disabled,
-      [this.props.className]: this.props.className,
-      [style.hidden]: this.props.type === 'hidden',
-      [style['with-icon']]: this.props.icon
-    });
-
-    const labelClassName = classNames({
-      [style.label]: true,
-      [style.fixed]: !this.props.floating
-    });
+    const {disabled, error, icon, floating, label: labelText,
+           maxLength, tooltip, tooltipDelay, type, value} = this.props;
+    const length = maxLength && value ? value.length : 0;
+    const labelClassName = ClassNames(style.label, {[style.fixed]: !floating});
+    const className = ClassNames(style.root, {
+      [style.disabled]: disabled,
+      [style.errored]: error,
+      [style.hidden]: type === 'hidden',
+      [style.withIcon]: icon
+    }, this.props.className);
 
     return (
       <div data-react-toolbox='input' className={className}>
         {this.renderInput()}
-        {this.props.icon ? <FontIcon className={style.icon} value={this.props.icon} /> : null}
+        {icon ? <FontIcon className={style.icon} value={icon} /> : null}
         <span className={style.bar}></span>
-        {this.props.label ? <label className={labelClassName}>{this.props.label}</label> : null}
-        {this.renderUnderline()}
-        {this.props.tooltip ? <Tooltip label={this.props.tooltip} delay={this.props.tooltipDelay}/> : null}
+        {labelText ? <label className={labelClassName}>{labelText}</label> : null}
+        {error ? <span className={style.error}>{error}</span> : null}
+        {maxLength ? <span className={style.counter}>{length}/{maxLength}</span> : null}
+        {tooltip ? <Tooltip label={tooltip} delay={tooltipDelay}/> : null}
       </div>
     );
   }
diff --git a/components/input/style.scss b/components/input/style.scss
index 9c58a70ac..149370db4 100644
--- a/components/input/style.scss
+++ b/components/input/style.scss
@@ -4,7 +4,7 @@
 .root {
   position: relative;
   padding: $input-padding 0;
-  &.with-icon {
+  &.withIcon {
     margin-left: $input-icon-size;
   }
 }
@@ -90,23 +90,17 @@
   }
 }
 
-.underline {
-  display: flex;
+.error, .counter {
   margin-bottom: - $input-underline-height;
   font-size: $input-label-font-size;
   line-height: $input-underline-height;
-  color: $input-text-label-color;
-  .error, .counter {
-    flex-grow: 1;
-  }
-}
-
-.error {
-  text-align: left;
+  color: $input-text-error-color;
 }
 
 .counter {
-  text-align: right;
+  position: absolute;
+  right: 0;
+  color: $input-text-label-color;
 }
 
 .disabled > .input {
@@ -127,7 +121,7 @@
       }
     }
   }
-  > .underline {
+  > .counter {
     color: $input-text-error-color;
   }
 }
diff --git a/spec/components/input.jsx b/spec/components/input.jsx
index 0be843973..8e6fd1d17 100644
--- a/spec/components/input.jsx
+++ b/spec/components/input.jsx
@@ -8,9 +8,9 @@ class InputTest extends React.Component {
     withIcon: ''
   };
 
-  handleChange = (name, event) => {
+  handleChange = (name, value) => {
     const newState = {};
-    newState[`${name}`] = event.target.value;
+    newState[[name]] = value;
     this.setState(newState);
   };
 

From de921b043887f9e2b79443051fecd96d47628480 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 29 Nov 2015 01:31:40 +0100
Subject: [PATCH 0221/1024] Make label red in case of error for Input

---
 components/input/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/input/style.scss b/components/input/style.scss
index 149370db4..6d613fe55 100644
--- a/components/input/style.scss
+++ b/components/input/style.scss
@@ -121,7 +121,7 @@
       }
     }
   }
-  > .counter {
+  > .counter, > .label {
     color: $input-text-error-color;
   }
 }

From 1c5737065122cf93a19d564c98a4362f0fc24f92 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 29 Nov 2015 12:39:55 +0100
Subject: [PATCH 0222/1024] New approach for Tooltips

---
 components/button/Button.jsx                  | 20 ++---
 components/button/IconButton.jsx              | 15 ++--
 components/button/readme.md                   |  2 -
 components/button/style.scss                  |  2 +-
 components/input/Input.jsx                    | 22 ++++--
 components/input/readme.md                    |  2 -
 components/tooltip/Tooltip.jsx                | 78 +++++++++----------
 components/tooltip/_config.scss               | 16 ++--
 components/tooltip/readme.md                  | 18 +++--
 components/tooltip/style.scss                 | 32 +++-----
 .../modules/examples/tooltip_example_1.txt    |  8 +-
 spec/components/button.jsx                    |  4 +-
 spec/components/dialog.jsx                    |  3 +-
 spec/components/tooltip.jsx                   | 16 ++--
 14 files changed, 118 insertions(+), 120 deletions(-)

diff --git a/components/button/Button.jsx b/components/button/Button.jsx
index ff4f25eca..693292929 100644
--- a/components/button/Button.jsx
+++ b/components/button/Button.jsx
@@ -2,9 +2,7 @@ import React from 'react';
 import ClassNames from 'classnames';
 import FontIcon from '../font_icon';
 import Ripple from '../ripple';
-import Tooltip from '../tooltip';
 import style from './style';
-import events from '../utils/events';
 
 class Button extends React.Component {
   static propTypes = {
@@ -22,8 +20,6 @@ class Button extends React.Component {
     primary: React.PropTypes.bool,
     raised: React.PropTypes.bool,
     ripple: React.PropTypes.bool,
-    tooltip: React.PropTypes.string,
-    tooltipDelay: React.PropTypes.number,
     type: React.PropTypes.string
   };
 
@@ -39,15 +35,17 @@ class Button extends React.Component {
   };
 
   handleMouseDown = (event) => {
-    events.pauseEvent(event);
     if (this.refs.ripple) this.refs.ripple.start(event);
     if (this.props.onMouseDown) this.props.onMouseDown(event);
   };
 
+  handleMouseUp = () => {
+    this.refs.button.blur();
+  };
+
   render () {
-    const {accent, className, flat, floating, href, icon, inverse, label,
-           mini, primary, raised, ripple,
-           tooltip, tooltipDelay, ...others} = this.props;
+    const { accent, children, className, flat, floating, href, icon,
+            inverse, label, mini, primary, raised, ripple, ...others} = this.props;
     const element = href ? 'a' : 'button';
     const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
     const shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : 'flat';
@@ -60,17 +58,19 @@ class Button extends React.Component {
     const props = {
       ...others,
       href,
+      ref: 'button',
       className: classes,
       disabled: this.props.disabled,
       onMouseDown: this.handleMouseDown,
+      onMouseUp: this.handleMouseUp,
       'data-react-toolbox': 'button'
     };
 
     return React.createElement(element, props,
       ripple ? <Ripple ref='ripple' /> : null,
-      tooltip ? <Tooltip className={style.tooltip} delay={tooltipDelay} label={tooltip}/> : null,
       icon ? <FontIcon className={style.icon} value={icon}/> : null,
-      label ? label : this.props.children
+      label,
+      children
     );
   }
 }
diff --git a/components/button/IconButton.jsx b/components/button/IconButton.jsx
index e17768f5a..f642ae084 100644
--- a/components/button/IconButton.jsx
+++ b/components/button/IconButton.jsx
@@ -2,9 +2,7 @@ import React from 'react';
 import ClassNames from 'classnames';
 import FontIcon from '../font_icon';
 import Ripple from '../ripple';
-import Tooltip from '../tooltip';
 import style from './style';
-import events from '../utils/events';
 
 class Button extends React.Component {
   static propTypes = {
@@ -17,8 +15,6 @@ class Button extends React.Component {
     inverse: React.PropTypes.bool,
     primary: React.PropTypes.bool,
     ripple: React.PropTypes.bool,
-    tooltip: React.PropTypes.string,
-    tooltipDelay: React.PropTypes.number,
     type: React.PropTypes.string
   };
 
@@ -30,14 +26,16 @@ class Button extends React.Component {
   };
 
   handleMouseDown = (event) => {
-    events.pauseEvent(event);
     if (this.refs.ripple) this.refs.ripple.start(event);
     if (this.props.onMouseDown) this.props.onMouseDown(event);
   };
 
+  handleMouseUp = () => {
+    this.refs.button.blur();
+  };
+
   render () {
-    const {accent, children, className, href, icon, inverse,
-           primary, ripple, tooltip, tooltipDelay, ...others} = this.props;
+    const {accent, children, className, href, icon, inverse, primary, ripple, ...others} = this.props;
     const element = href ? 'a' : 'button';
     const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
     const classes = ClassNames([style.toggle, style[level]], {[style.inverse]: inverse}, className);
@@ -45,15 +43,16 @@ class Button extends React.Component {
     const props = {
       ...others,
       href,
+      ref: 'button',
       className: classes,
       disabled: this.props.disabled,
       onMouseDown: this.handleMouseDown,
+      onMouseUp: this.handleMouseUp,
       'data-react-toolbox': 'button'
     };
 
     return React.createElement(element, props,
       ripple ? <Ripple ref='ripple' centered /> : null,
-      tooltip ? <Tooltip className={style.tooltip} delay={tooltipDelay} label={tooltip}/> : null,
       icon ? <FontIcon className={style.icon} value={icon}/> : children
     );
   }
diff --git a/components/button/readme.md b/components/button/readme.md
index d59ad5fa4..91e4e3370 100644
--- a/components/button/readme.md
+++ b/components/button/readme.md
@@ -46,8 +46,6 @@ const TestButtons = () => (
 | `primary`  | `false` | `false` | Indicates if the button should have primary color.|
 | `raised`   | `Boolean`  | `false` | If true, the button will have a raised look. |
 | `ripple`  | `Boolean`  | `true`    | If true, component will have a ripple effect on click.|
-| `tooptip`   | `String`  |  | The value will be shown as a tooltip when the button is hovered. |
-| `tooltipDelay`     | `Number`  |  | Amount of time in milliseconds before the tooltip is visible.|
 
 By default it will have neutral colors and a flat aspect even though the `flat` property is `false` by default. Also, some properties exclude others, for example a button cannot be `flat` and `raised` at the same time. 
 
diff --git a/components/button/style.scss b/components/button/style.scss
index b06d5bfdf..1aa1f638a 100644
--- a/components/button/style.scss
+++ b/components/button/style.scss
@@ -23,7 +23,7 @@
   &::-moz-focus-inner {
     border: 0;
   }
-  > span:not(.tooltip) {
+  > span:not([data-react-toolbox="tooltip"]) {
     display: inline-block;
     line-height: $button-height;
     vertical-align: middle;
diff --git a/components/input/Input.jsx b/components/input/Input.jsx
index d5cb19390..2fe385908 100644
--- a/components/input/Input.jsx
+++ b/components/input/Input.jsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import ClassNames from 'classnames';
 import FontIcon from '../font_icon';
-import Tooltip from '../tooltip';
 import style from './style';
 
 class Input extends React.Component {
   static propTypes = {
+    children: React.PropTypes.any,
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
     error: React.PropTypes.string,
@@ -19,8 +19,6 @@ class Input extends React.Component {
     onFocus: React.PropTypes.func,
     onKeyPress: React.PropTypes.func,
     required: React.PropTypes.bool,
-    tooltip: React.PropTypes.string,
-    tooltipDelay: React.PropTypes.number,
     type: React.PropTypes.string,
     value: React.PropTypes.any
   };
@@ -61,10 +59,11 @@ class Input extends React.Component {
   }
 
   render () {
-    const {disabled, error, icon, floating, label: labelText,
-           maxLength, tooltip, tooltipDelay, type, value} = this.props;
+    const { children, disabled, error, floating, icon,
+            label: labelText, maxLength, multiline, type, value, ...others} = this.props;
     const length = maxLength && value ? value.length : 0;
     const labelClassName = ClassNames(style.label, {[style.fixed]: !floating});
+
     const className = ClassNames(style.root, {
       [style.disabled]: disabled,
       [style.errored]: error,
@@ -72,15 +71,24 @@ class Input extends React.Component {
       [style.withIcon]: icon
     }, this.props.className);
 
+    const InputElement = React.createElement(multiline ? 'textarea' : 'input', {
+      ...others,
+      className: ClassNames(style.input, {[style.filled]: value}),
+      onChange: this.handleChange,
+      ref: 'input',
+      role: 'input',
+      value
+    });
+
     return (
       <div data-react-toolbox='input' className={className}>
-        {this.renderInput()}
+        {InputElement}
         {icon ? <FontIcon className={style.icon} value={icon} /> : null}
         <span className={style.bar}></span>
         {labelText ? <label className={labelClassName}>{labelText}</label> : null}
         {error ? <span className={style.error}>{error}</span> : null}
         {maxLength ? <span className={style.counter}>{length}/{maxLength}</span> : null}
-        {tooltip ? <Tooltip label={tooltip} delay={tooltipDelay}/> : null}
+        {children}
       </div>
     );
   }
diff --git a/components/input/readme.md b/components/input/readme.md
index a79e02d77..11afe733f 100644
--- a/components/input/readme.md
+++ b/components/input/readme.md
@@ -45,8 +45,6 @@ class InputTest extends React.Component {
 | `onFocus`       | `Function`      |                 | Callback function that is fired when components is focused.|
 | `onKeyPress`    | `Function`      |                 | Callback function that is fired when a key is pressed.|
 | `required`      | `Boolean`       | `false`         | If true, the html input has a required value.|
-| `tooptip`   | `String`  |  | The value will be shown as a tooltip when the button is hovered. |
-| `tooltipDelay`     | `Number`  |  | Amount of time in milliseconds before the tooltip is visible.|
 | `type`          | `String`        | `text`        | Type of the input element. It can be a valid HTML5 input type|
 | `value`         | `String`        |              | Current value of the input element.|
 
diff --git a/components/tooltip/Tooltip.jsx b/components/tooltip/Tooltip.jsx
index 9ebcd429c..a79450814 100644
--- a/components/tooltip/Tooltip.jsx
+++ b/components/tooltip/Tooltip.jsx
@@ -1,69 +1,67 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import ClassNames from 'classnames';
 import style from './style';
 
-const HIDE_TIMEOUT = 100;
-
-class Tooltip extends React.Component {
+const Tooltip = (ComposedComponent) => class extends React.Component {
   static propTypes = {
+    children: React.PropTypes.any,
     className: React.PropTypes.string,
-    delay: React.PropTypes.number,
-    label: React.PropTypes.string
+    onClick: React.PropTypes.func,
+    onMouseEnter: React.PropTypes.func,
+    onMouseLeave: React.PropTypes.func,
+    tooltip: React.PropTypes.string,
+    tooltipDelay: React.PropTypes.number,
+    tooltipHideOnClick: React.PropTypes.bool
   };
 
   static defaultProps = {
     className: '',
-    delay: 0
+    tooltipDelay: 0,
+    tooltipHideOnClick: true
   };
 
   state = {
     active: false
   };
 
-  componentDidMount = () => {
-    const parent = ReactDOM.findDOMNode(this).parentNode;
-
-    if (parent.style.position !== 'relative' && parent.style.position !== 'absolute'){
-      parent.style.position = 'relative';
-    }
-
-    parent.onmouseover = this.handleParentMouseOver;
-    parent.onmouseout = this.handleParentMouseOut;
+  handleMouseEnter = () => {
+    if (this.timeout) clearTimeout(this.timeout);
+    this.timeout = setTimeout(() =>this.setState({active: true}), this.props.tooltipDelay);
+    if (this.props.onMouseEnter) this.props.onMouseEnter();
   };
 
-  handleParentMouseOver = () => {
-    setTimeout(() => {
-      if (this.deferredHide) clearTimeout(this.deferredHide);
-      const node = ReactDOM.findDOMNode(this);
-      const parent = node.parentNode;
-      const parentStyle = parent.currentStyle || window.getComputedStyle(parent);
-      const offset = parseFloat(parentStyle['margin-bottom']) + parseFloat(parentStyle['padding-bottom']);
-      const position = parent.getBoundingClientRect();
-
-      node.style.top = `${position.height - offset}px`;
-      node.style.left = `${parseInt((position.width / 2) - (node.offsetWidth / 2))}px`;
-      if (!this.state.active) this.setState({ active: true});
-    }, this.props.delay);
+  handleMouseLeave = () => {
+    if (this.timeout) clearTimeout(this.timeout);
+    if (this.state.active) this.setState({active: false});
+    if (this.props.onMouseLeave) this.props.onMouseLeave();
   };
 
-  handleParentMouseOut = () => {
-    if (this.state.active) {
-      this.deferredHide = setTimeout(() => { this.setState({active: false}); }, HIDE_TIMEOUT);
-    }
-  };
+  handleClick = () => {
+    if (this.timeout) clearTimeout(this.timeout);
+    if (this.props.tooltipHideOnClick) this.setState({active: false});
+    if (this.props.onClick) this.props.onClick();
+  }
 
   render () {
-    const className = ClassNames(style.root, {
+    const {children, className, tooltip, tooltipDelay, tooltipHideOnClick, ...other} = this.props;
+    const composedClassName = ClassNames(style.root, className);
+    const tooltipClassName = ClassNames(style.tooltip, {
       [style.active]: this.state.active
-    }, this.props.className);
+    });
 
     return (
-      <span data-react-toolbox='tooltip' className={className}>
-        {this.props.label}
-      </span>
+      <ComposedComponent
+        {...other}
+        className={composedClassName}
+        onClick={this.handleClick}
+        onMouseEnter={this.handleMouseEnter}
+        onMouseLeave={this.handleMouseLeave}
+      >
+        {children ? children : null}
+        <span data-react-toolbox="tooltip" className={tooltipClassName}>{tooltip}</span>
+      </ComposedComponent>
     );
   }
-}
+};
 
 export default Tooltip;
diff --git a/components/tooltip/_config.scss b/components/tooltip/_config.scss
index 497dee2f9..042410519 100644
--- a/components/tooltip/_config.scss
+++ b/components/tooltip/_config.scss
@@ -1,8 +1,8 @@
-$tooltip-background: rgba(97,97,97,.9);
-$tooltip-margin: 0.5 * $unit;
-$tooltip-border-radius: .2 * $unit;
-$tooltip-color: #fff;
-$tooltip-font-size: $unit;
-$tooltip-max-width: 17 * $unit;
-$tooltip-padding: .8 * $unit;
-$tooltip-animation-duration: 2000ms;
+$tooltip-background: rgba(97,97,97,.9) !default;
+$tooltip-margin: 0.5 * $unit !default;
+$tooltip-border-radius: .2 * $unit !default;
+$tooltip-color: #fff !default;
+$tooltip-font-size: $unit !default;
+$tooltip-max-width: 17 * $unit !default;
+$tooltip-padding: .8 * $unit !default;
+$tooltip-animation-duration: 200ms !default;
diff --git a/components/tooltip/readme.md b/components/tooltip/readme.md
index 01d01e335..e2beffbd3 100644
--- a/components/tooltip/readme.md
+++ b/components/tooltip/readme.md
@@ -1,24 +1,30 @@
 # Tooltip
 
-A tooltip is Useful for show information on hover in any kind of component. Out of the box react-toolbox offers you a property `tooltip` in the component `<Button>`.
+A Tooltip is useful to show information on hover in any kind of component. We have a component that can be used as a **decorator** for any kind of component. You just have to take into account that the overflow in the component should be visible.
 
 <!-- example -->
 ```jsx
 import Button from 'react-toolbox/lib/button';
 import Tooltip from 'react-toolbox/lib/tooltip';
 
+const TooltipButton = Tooltip(Button);
+const TooltipInput = Tooltip(Input);
+
 const TooltipTest = () => (
   <div>
-    <p>Lorem ipsum dolor sit amet, <strong>consectetur<Tooltip label='This is a auto show tooltip' /></strong> adipiscing elit.</p>
-    <Button label='Button with tooltip' raised accent tooltip='This is a tooltip by property' />
+    <TooltipButton label='Bookmark' icon='bookmark' raised primary tooltip='Bookmark Tooltip' tooltipDelay={1000} />
+    <TooltipButton icon='add' floating accent tooltip='Floating Tooltip' />
+    <TooltipInput tooltip='lorem ipsum...' />
   </div>
 );
 ```
 
 ## Properties
 
+In any component you decorate with the Tooltip you'd get some additional props:
+
 | Name      | Type      | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `className` | `String`  | `''` | Set a class to style the Component.|
-| `delay`     | `Number`  |  | Amount of time in miliseconds before the tooltip is visible.|
-| `label`     | `String`  |  | The text string to use for the tooltip.|
+| `tooltip`     | `String`  |  | The text string to use for the tooltip.|
+| `tooltipDelay`     | `Number`  |  | Amount of time in miliseconds spent before the tooltip is visible.|
+| `tooltipHideOnClick`     | `Boolean`  | `true` | If true, the Tooltip hides after a click in the host component. |
diff --git a/components/tooltip/style.scss b/components/tooltip/style.scss
index 6b657c28a..bf1696ad2 100644
--- a/components/tooltip/style.scss
+++ b/components/tooltip/style.scss
@@ -3,7 +3,13 @@
 @import "http://github.com/config";
 
 .root {
+  position: relative;
+}
+
+.tooltip {
   position: absolute;
+  top: 100%;
+  left: 50%;
   z-index: $z-index-higher;
   display: block;
   max-width: $tooltip-max-width;
@@ -17,28 +23,10 @@
   text-transform: none;
   background: $tooltip-background;
   border-radius: $tooltip-border-radius;
-  transform: scale(0);
-  transform-origin: top center;
-  animation-duration: $tooltip-animation-duration;
-  animation-timing-function: $animation-curve-default;
-  animation-iteration-count: 1;
-  animation-direction: forwards;
+  transition: $animation-curve-default $tooltip-animation-duration transform;
+  transform: scale(0) translateX(-50%);
+  transform-origin: top left;
   &.active {
-    animation-name: tooltip-animation;
-  }
-  &.large {
-    padding: 2 * $tooltip-padding;
-    font-size: $font-size-small;
-  }
-  @keyframes tooltip-animation {
-    0% {
-      transform: scale(0);
-    }
-    10%, 99% {
-      transform: scale(1);
-    }
-    100% {
-      transform: scale(0);
-    }
+    transform: scale(1) translateX(-50%);
   }
 }
diff --git a/docs/app/components/layout/main/modules/examples/tooltip_example_1.txt b/docs/app/components/layout/main/modules/examples/tooltip_example_1.txt
index b974394c3..d84964573 100644
--- a/docs/app/components/layout/main/modules/examples/tooltip_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/tooltip_example_1.txt
@@ -1,7 +1,11 @@
+const TooltipButton = Tooltip(Button);
+const TooltipInput = Tooltip(Input);
+
 const TooltipTest = () => (
   <div>
-    <p>Lorem ipsum dolor sit amet, <strong>consectetur<Tooltip label='This is a auto show tooltip' delay={500}/></strong> adipiscing elit.</p>
-    <Button label='Button with tooltip' raised accent tooltip='This is a tooltip by property' tooltipDelay={100}/>
+    <TooltipButton label='Bookmark' icon='bookmark' raised primary tooltip='Bookmark Tooltip' tooltipDelay={1000} />
+    <TooltipButton icon='add' floating accent tooltip='Floating Tooltip' />
+    <TooltipInput tooltip='lorem ipsum...' />
   </div>
 );
 
diff --git a/spec/components/button.jsx b/spec/components/button.jsx
index 0b881a92c..4cf434d95 100644
--- a/spec/components/button.jsx
+++ b/spec/components/button.jsx
@@ -21,9 +21,7 @@ const ButtonTest = () => (
     <IconButton icon='favorite' inverse />
     <IconButton icon='favorite' />
     <IconButton icon='favorite' disabled />
-    <IconButton primary tooltip='Bookmark Tooltip' tooltipDelay={1000}>
-      <GithubIcon/>
-    </IconButton>
+    <IconButton primary><GithubIcon/></IconButton>
     <Button icon='add' label='Add this' flat primary />
     <Button icon='add' label='Add this' flat disabled />
   </section>
diff --git a/spec/components/dialog.jsx b/spec/components/dialog.jsx
index 26cecff9f..c44eaf816 100644
--- a/spec/components/dialog.jsx
+++ b/spec/components/dialog.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import Button from '../../components/button';
 import Dialog from '../../components/dialog';
-import Tooltip from '../../components/tooltip';
 
 class DialogTest extends React.Component {
   state = {
@@ -31,7 +30,7 @@ class DialogTest extends React.Component {
           title="Use Google's location service?"
           onOverlayClick={this.handleToggle}
         >
-          <p>Let Google help apps <strong><Tooltip label='location' />determine location</strong>. This means sending anonymous location data to Google, even when no apps are running.</p>
+          <p>Let Google help apps <strong>determine location</strong>. This means sending anonymous location data to Google, even when no apps are running.</p>
         </Dialog>
       </section>
     );
diff --git a/spec/components/tooltip.jsx b/spec/components/tooltip.jsx
index a45b6f790..73013cffb 100644
--- a/spec/components/tooltip.jsx
+++ b/spec/components/tooltip.jsx
@@ -3,17 +3,19 @@ import Button from '../../components/button';
 import Input from '../../components/input';
 import Tooltip from '../../components/tooltip';
 
+const TooltipButton = Tooltip(Button);
+const TooltipInput = Tooltip(Input);
+const TooltipStrong = Tooltip(({children, ...other}) => <strong {...other}>{children}</strong>);
+
 const TooltipTest = () => (
   <section>
     <h5>Tooltip</h5>
     <p>Give information on :hover</p>
-    <Button label='Bookmark' icon='bookmark' raised primary tooltip='Bookmark Tooltip' tooltipDelay={1000} />
-    <Button icon='add' floating accent tooltip='Floating Tooltip'/>
-    <Button icon='add' floating disabled tooltip='Floating can not be shown' />
-    <Input tooltip='lorem ipsum...' />
-    <p>
-      Lorem ipsum dolor sit amet, <strong>consectetur<Tooltip label='This is a auto show tooltip' delay={300} /></strong> adipiscing elit.
-    </p>
+    <TooltipButton label='Bookmark' icon='bookmark' raised primary tooltip='Bookmark Tooltip' tooltipDelay={1000} />
+    <TooltipButton icon='add' floating accent tooltip='Floating Tooltip' />
+    <TooltipButton icon='add' floating disabled tooltip='Floating can not be shown' />
+    <TooltipInput tooltip='lorem ipsum...' />
+    <p>Lorem ipsum dolor sit amet, <TooltipStrong tooltip='This is a auto show tooltip'>consectetur</TooltipStrong> adipiscing elit.</p>
   </section>
 );
 

From d0e4135d0b34e0e491cdbcb6fe01f7628e101dac Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 29 Nov 2015 12:40:09 +0100
Subject: [PATCH 0223/1024] Better touch ripple handling

---
 components/ripple/Ripple.jsx | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/components/ripple/Ripple.jsx b/components/ripple/Ripple.jsx
index ca7547c99..c74908d39 100644
--- a/components/ripple/Ripple.jsx
+++ b/components/ripple/Ripple.jsx
@@ -33,15 +33,21 @@ class Ripple extends React.Component {
   };
 
   start = ({pageX, pageY}, touch = false) => {
-    this.touch = touch;
-    document.addEventListener(this.touch ? 'touchend' : 'mouseup', this.handleEnd);
-    const {top, left, width} = this._getDescriptor(pageX, pageY);
-    this.setState({active: false, restarting: true, top, left, width}, () => {
-      this.refs.ripple.offsetWidth;  //eslint-disable-line no-unused-expressions
-      this.setState({active: true, restarting: false});
-    });
+    if (!this._isTouchRippleReceivingMouseEvent(touch)) {
+      this.touch = touch;
+      document.addEventListener(this.touch ? 'touchend' : 'mouseup', this.handleEnd);
+      const {top, left, width} = this._getDescriptor(pageX, pageY);
+      this.setState({active: false, restarting: true, top, left, width}, () => {
+        this.refs.ripple.offsetWidth;  //eslint-disable-line no-unused-expressions
+        this.setState({active: true, restarting: false});
+      });
+    }
   };
 
+  _isTouchRippleReceivingMouseEvent (touch) {
+    return this.touch && !touch;
+  }
+
   _getDescriptor (pageX, pageY) {
     const {left, top, height, width} = ReactDOM.findDOMNode(this).getBoundingClientRect();
     return {

From 54c3af207de70512f12b02bdc24891e6be461ff2 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 29 Nov 2015 12:43:52 +0100
Subject: [PATCH 0224/1024] Remove Form from spec for now

---
 spec/root.jsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/spec/root.jsx b/spec/root.jsx
index 734697479..033a9c6ef 100644
--- a/spec/root.jsx
+++ b/spec/root.jsx
@@ -11,7 +11,6 @@ import Checkbox from './components/checkbox';
 import Dialog from './components/dialog';
 import Drawer from './components/drawer';
 import Dropdown from './components/dropdown';
-import Form from './components/form';
 import IconMenu from './components/icon_menu';
 import Input from './components/input';
 import List from './components/list';
@@ -52,7 +51,6 @@ const Root = () => (
     <Dialog />
     <Drawer />
     <Dropdown />
-    <Form />
     <IconMenu />
     <Input />
     <List />

From ca48169305f0b72ccbf771629eb261dc4cf58ee9 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 29 Nov 2015 12:45:10 +0100
Subject: [PATCH 0225/1024] Better spacing for cards layout

---
 spec/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spec/style.scss b/spec/style.scss
index b2fb10cfb..f029d9238 100644
--- a/spec/style.scss
+++ b/spec/style.scss
@@ -102,7 +102,7 @@ $offset: 1.8 * $unit;
 
 .cardItemName {
   display: block;
-  margin: 20px 0 0;
+  margin: 15px 0;
   text-align: center;
 }
 

From f2738a0e11772631381e2fd868e5aab0f89413ca Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 29 Nov 2015 18:41:52 +0100
Subject: [PATCH 0226/1024] Small changes in card readme

---
 components/card/readme.md | 50 +++++++++++++++++----------------------
 1 file changed, 22 insertions(+), 28 deletions(-)

diff --git a/components/card/readme.md b/components/card/readme.md
index 942ae049e..de7626de2 100644
--- a/components/card/readme.md
+++ b/components/card/readme.md
@@ -1,6 +1,8 @@
 # Card
 
-A [card](https://www.google.com/design/spec/components/cards.html) is a piece of paper with unique related data that serves as an entry point to more detailed information. For example, a card could contain a photo, text, and a link about a single subject.
+A [Card](https://www.google.com/design/spec/components/cards.html) is a piece of paper with unique related data that serves as an entry point to more detailed information. For example, a card could contain a photo, text, and a link about a single subject.
+
+Cards are composed of multiple subcomponents in React Toolbox. You can combine each of the subcomponents to create all different Material Design Cards given in the spec.
 
 <!-- example -->
 ```jsx
@@ -36,7 +38,8 @@ return <TestCards />;
 
 <!--component-docgen-start-->
 
-## Card `<Card/>`
+## Card
+
 The base card component. This acts as the main card container
 that all subcomponents are placed within.
 
@@ -47,23 +50,23 @@ that all subcomponents are placed within.
 | `className` | `string` |  | Additional class(es) for custom styling. |
 | `raised` | `bool` |  | Increases the shadow depth to appear elevated. |
 
-------------------------------------------------------------------
-
-## CardActions `<CardActions/>`
-This component is used as a container for supplemental
-card actions. Supplemental actions within the card are
-explicitly called out using icons, text, and UI controls,
-typically placed at the bottom of the card.
+## CardTitle
+A versatile title block that can be used in
+various places on the card, including the media
+area. This component can also display an avatar next
+to the title content.
 
 ### Properties
 | Name | Type | Default | Description |
 |:-----|:-----|:-----|:-----|
-| `children` | `any` |  | Children to pass through the component. |
+| `avatar` | `union`(`string`,`element`) |  |  |
+| `children` | `union`(`string`,`element`,`array`) |  | Children to pass through the component. |
 | `className` | `string` |  | Additional class(es) for custom styling. |
+| `subtitle` | `string` |  |  |
+| `title` | `string` |  |  |
 
-------------------------------------------------------------------
+## CardMedia
 
-## CardMedia `<CardMedia/>`
 Used for displaying media such as images or videos
 on a card. Can also be used with a solid background
 color instead of an image.
@@ -78,9 +81,7 @@ color instead of an image.
 | `contentOverlay` | `bool` |  | Creates a dark overlay underneath the child components. |
 | `image` | `union`(`string`,`element`) |  | Can be used instead of children. Accepts an element or a URL string. |
 
-------------------------------------------------------------------
-
-## CardText `<CardText/>`
+## CardText
 Basic card content container. Good for
 small descriptions or other supplementary text.
 
@@ -90,22 +91,15 @@ small descriptions or other supplementary text.
 | `children` | `any` |  | Children to pass through the component. |
 | `className` | `string` |  | Additional class(es) for custom styling. |
 
-------------------------------------------------------------------
+## CardActions
 
-## CardTitle `<CardTitle/>`
-A versatile title block that can be used in
-various places on the card, including the media
-area. This component can also display an avatar next
-to the title content.
+This component is used as a container for supplemental
+card actions. Supplemental actions within the card are
+explicitly called out using icons, text, and UI controls,
+typically placed at the bottom of the card.
 
 ### Properties
 | Name | Type | Default | Description |
 |:-----|:-----|:-----|:-----|
-| `avatar` | `union`(`string`,`element`) |  |  |
-| `children` | `union`(`string`,`element`,`array`) |  | Children to pass through the component. |
+| `children` | `any` |  | Children to pass through the component. |
 | `className` | `string` |  | Additional class(es) for custom styling. |
-| `subtitle` | `string` |  |  |
-| `title` | `string` |  |  |
-
-------------------------------------------------------------------
-

From a1a854663d7b6d4748e8c6e090f2349a05959f7e Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 29 Nov 2015 19:01:22 +0100
Subject: [PATCH 0227/1024] Update FontIcon docs

---
 components/font_icon/readme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/font_icon/readme.md b/components/font_icon/readme.md
index 73bce67d3..13ca3b562 100644
--- a/components/font_icon/readme.md
+++ b/components/font_icon/readme.md
@@ -1,6 +1,6 @@
 # Font Icon
 
-The font icon component is used to represent an icon from the [Google Material Design](https://www.google.com/design/icons/) icon font. React Toolbox automatically includes the font for you so you just need to specify the name of the icon. The font icon is displayed with the current color so it can be inherited from the parent component.
+The font icon component is used to represent an icon from the [Google Material Design](https://www.google.com/design/icons/) icon font. React Toolbox does **not** provide the font icon for you. You'd need to get the icons using whatever method you want. We recommend to import the font and the associated CSS from Google Fonts as is specified [here](http://google.github.io/material-design-icons/#getting-icons).
 
 <!-- example -->
 ```jsx

From 64b87d013a23fda83be2aeca7f9a20858b951845 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 29 Nov 2015 19:04:20 +0100
Subject: [PATCH 0228/1024] Remove font import from globals

---
 components/_globals.scss | 1 -
 components/commons.scss  | 7 -------
 docs/www/index.html      | 1 +
 spec/index.html          | 1 +
 4 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/components/_globals.scss b/components/_globals.scss
index 0ee661c3e..a1b9f3cdf 100644
--- a/components/_globals.scss
+++ b/components/_globals.scss
@@ -17,7 +17,6 @@ $color-accent-contrast: $color-dark-contrast !default;
 $unit: 1rem;
 
 // -- Fonts
-$font-roboto-url: "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" !default;
 $preferred-font: "Roboto", "Helvetica", "Arial", sans-serif !default;
 $font-size: 1.6 * $unit !default;
 $font-size-tiny: 1.2 * $unit !default;
diff --git a/components/commons.scss b/components/commons.scss
index c314c3cca..929d18708 100644
--- a/components/commons.scss
+++ b/components/commons.scss
@@ -1,13 +1,6 @@
 @import "http://github.com/base";
 @import "http://github.com/~normalize.css";
 
-$import-font: true !default;
-$import-flex-attributes: false !default;
-
-@if $import-font == true {
-  @import url(http://github.com/$font-roboto-url);
-}
-
 html {
   font-size: 62.5%;
 }
diff --git a/docs/www/index.html b/docs/www/index.html
index d31b206d5..a875ef4b5 100644
--- a/docs/www/index.html
+++ b/docs/www/index.html
@@ -28,6 +28,7 @@
 
     <link rel="canonical" href="http://www.react-toolbox.com/">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
     <link rel="stylesheet" href="http://github.com/docs.css">
   </head>
 
diff --git a/spec/index.html b/spec/index.html
index b4560da91..61f5c7ab8 100644
--- a/spec/index.html
+++ b/spec/index.html
@@ -14,6 +14,7 @@
     <meta name="HandheldFriendly" content="True">
     <meta http-equiv="cleartype" content="on">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
     <link rel="stylesheet" href="http://github.com/build/spec.css">
   </head>
   <body>

From bc81894c4df81ad44d50a99550203f4609463b2a Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 29 Nov 2015 20:03:59 +0100
Subject: [PATCH 0229/1024] Update Home Cards to new component version

---
 docs/app/components/layout/home/index.jsx     | 41 +++++++++++---
 .../layout/home/modules/authors.jsx           | 56 -------------------
 .../components/layout/home/modules/readme.md  | 18 ------
 docs/app/components/layout/home/style.scss    | 53 ++++++++++--------
 docs/webpack.config.development.js            |  5 ++
 5 files changed, 68 insertions(+), 105 deletions(-)
 delete mode 100644 docs/app/components/layout/home/modules/authors.jsx
 delete mode 100644 docs/app/components/layout/home/modules/readme.md

diff --git a/docs/app/components/layout/home/index.jsx b/docs/app/components/layout/home/index.jsx
index 713a210b6..8614b117a 100644
--- a/docs/app/components/layout/home/index.jsx
+++ b/docs/app/components/layout/home/index.jsx
@@ -1,10 +1,23 @@
 import React from 'react';
 import { Link } from 'react-router';
-import { Card, Button } from 'react-toolbox';
+import Button from 'react-toolbox/button';
+import {Card, CardTitle, CardMedia, CardText, CardActions} from 'react-toolbox/card';
 import Logo from '../../logo';
 import Navigation from '../../navigation';
 import style from './style';
-import authors from './modules/authors.jsx';
+
+const GithubIcon = () => (
+  <svg viewBox="0 0 284 277">
+    <g><path d="M141.888675,0.0234927555 C63.5359948,0.0234927555 0,63.5477395 0,141.912168 C0,204.6023 40.6554239,257.788232 97.0321356,276.549924 C104.12328,277.86336 106.726656,273.471926 106.726656,269.724287 C106.726656,266.340838 106.595077,255.16371 106.533987,243.307542 C67.0604204,251.890693 58.7310279,226.56652 58.7310279,226.56652 C52.2766299,210.166193 42.9768456,205.805304 42.9768456,205.805304 C30.1032937,196.998939 43.9472374,197.17986 43.9472374,197.17986 C58.1953153,198.180797 65.6976425,211.801527 65.6976425,211.801527 C78.35268,233.493192 98.8906827,227.222064 106.987463,223.596605 C108.260955,214.426049 111.938106,208.166669 115.995895,204.623447 C84.4804813,201.035582 51.3508808,188.869264 51.3508808,134.501475 C51.3508808,119.01045 56.8936274,106.353063 65.9701981,96.4165325 C64.4969882,92.842765 59.6403297,78.411417 67.3447241,58.8673023 C67.3447241,58.8673023 79.2596322,55.0538738 106.374213,73.4114319 C117.692318,70.2676443 129.83044,68.6910512 141.888675,68.63701 C153.94691,68.6910512 166.09443,70.2676443 177.433682,73.4114319 C204.515368,55.0538738 216.413829,58.8673023 216.413829,58.8673023 C224.13702,78.411417 219.278012,92.842765 217.804802,96.4165325 C226.902519,106.353063 232.407672,119.01045 232.407672,134.501475 C232.407672,188.998493 199.214632,200.997988 167.619331,204.510665 C172.708602,208.913848 177.243363,217.54869 177.243363,230.786433 C177.243363,249.771339 177.078889,265.050898 177.078889,269.724287 C177.078889,273.500121 179.632923,277.92445 186.825101,276.531127 C243.171268,257.748288 283.775,204.581154 283.775,141.912168 C283.775,63.5477395 220.248404,0.0234927555 141.888675,0.0234927555" /></g>
+  </svg>
+);
+
+const TwitterIcon = () => (
+  <svg viewBox="0 0 274 223">
+    <g><path d="M273.39,26.301 C263.331,30.762 252.521,33.777 241.175,35.133 C252.756,28.191 261.649,17.199 265.837,4.102 C255,10.529 242.996,15.197 230.22,17.713 C219.988,6.812 205.411,0 189.279,0 C158.302,0 133.188,25.113 133.188,56.088 C133.188,60.484 133.685,64.765 134.641,68.87 C88.025,66.531 46.696,44.201 19.032,10.267 C14.204,18.551 11.438,28.186 11.438,38.465 C11.438,57.924 21.341,75.092 36.391,85.15 C27.196,84.859 18.548,82.336 10.985,78.135 C10.981,78.369 10.981,78.604 10.981,78.84 C10.981,106.016 30.315,128.686 55.974,133.838 C51.267,135.12 46.312,135.805 41.196,135.805 C37.582,135.805 34.068,135.454 30.644,134.799 C37.781,157.083 58.495,173.299 83.039,173.752 C63.843,188.795 39.658,197.762 13.38,197.762 C8.853,197.762 4.388,197.497 0,196.979 C24.822,212.893 54.305,222.178 85.98,222.178 C189.148,222.178 245.564,136.711 245.564,62.592 C245.564,60.16 245.51,57.741 245.402,55.336 C256.36,47.428 265.87,37.549 273.39,26.301" /></g>
+  </svg>
+);
+
 
 const Home = () => (
   <article>
@@ -45,11 +58,25 @@ const Home = () => (
     <section className={`${style.content}`}>
       <h3>About the authors</h3>
       <ul className={style.authors}>
-      {
-        authors.map((author, index) => {
-          return <Card key={index} {...author} />;
-        })
-      }
+        <Card className={style.author}>
+          <CardMedia aspectRatio='wide' image='/images/javivelasco.jpg' />
+          <CardTitle title="Javi Velasco" subtitle="@javivelasco" />
+          <CardText>Software gardener • Film, music & comic lover • Frontend Engineer at SocialBro  • Any biographer in the room?</CardText>
+          <CardActions>
+            <Button href='http://github.com/javivelasco' target='_blank'><GithubIcon /> Github</Button>
+            <Button href='http://twitter.com/javivelasco' target='_blank' className={style.twitter}><TwitterIcon /> Twitter</Button>
+          </CardActions>
+        </Card>
+
+        <Card className={style.author}>
+          <CardMedia aspectRatio='wide' image='/images/soyjavi.jpg' />
+          <CardTitle title="Javi Jiménez" subtitle="@soyjavi" />
+          <CardText>Creative Doer · A complicated #human who builds stuff · #author · #opensource lover · #traveller · with a dark past being CEO & CTO</CardText>
+          <CardActions>
+            <Button href='http://github.com/soyjavi' target='_blank'><GithubIcon /> Github</Button>
+            <Button href='http://twitter.com/soyjavi' target='_blank' className={style.twitter}><TwitterIcon /> Twitter</Button>
+          </CardActions>
+        </Card>
       </ul>
     </section>
 
diff --git a/docs/app/components/layout/home/modules/authors.jsx b/docs/app/components/layout/home/modules/authors.jsx
deleted file mode 100644
index a56322eef..000000000
--- a/docs/app/components/layout/home/modules/authors.jsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from 'react';
-
-const GithubIcon = () => (
-  <svg viewBox="0 0 284 277">
-    <g><path d="M141.888675,0.0234927555 C63.5359948,0.0234927555 0,63.5477395 0,141.912168 C0,204.6023 40.6554239,257.788232 97.0321356,276.549924 C104.12328,277.86336 106.726656,273.471926 106.726656,269.724287 C106.726656,266.340838 106.595077,255.16371 106.533987,243.307542 C67.0604204,251.890693 58.7310279,226.56652 58.7310279,226.56652 C52.2766299,210.166193 42.9768456,205.805304 42.9768456,205.805304 C30.1032937,196.998939 43.9472374,197.17986 43.9472374,197.17986 C58.1953153,198.180797 65.6976425,211.801527 65.6976425,211.801527 C78.35268,233.493192 98.8906827,227.222064 106.987463,223.596605 C108.260955,214.426049 111.938106,208.166669 115.995895,204.623447 C84.4804813,201.035582 51.3508808,188.869264 51.3508808,134.501475 C51.3508808,119.01045 56.8936274,106.353063 65.9701981,96.4165325 C64.4969882,92.842765 59.6403297,78.411417 67.3447241,58.8673023 C67.3447241,58.8673023 79.2596322,55.0538738 106.374213,73.4114319 C117.692318,70.2676443 129.83044,68.6910512 141.888675,68.63701 C153.94691,68.6910512 166.09443,70.2676443 177.433682,73.4114319 C204.515368,55.0538738 216.413829,58.8673023 216.413829,58.8673023 C224.13702,78.411417 219.278012,92.842765 217.804802,96.4165325 C226.902519,106.353063 232.407672,119.01045 232.407672,134.501475 C232.407672,188.998493 199.214632,200.997988 167.619331,204.510665 C172.708602,208.913848 177.243363,217.54869 177.243363,230.786433 C177.243363,249.771339 177.078889,265.050898 177.078889,269.724287 C177.078889,273.500121 179.632923,277.92445 186.825101,276.531127 C243.171268,257.748288 283.775,204.581154 283.775,141.912168 C283.775,63.5477395 220.248404,0.0234927555 141.888675,0.0234927555" /></g>
-  </svg>
-);
-
-const TwitterIcon = () => (
-  <svg viewBox="0 0 274 223">
-    <g><path d="M273.39,26.301 C263.331,30.762 252.521,33.777 241.175,35.133 C252.756,28.191 261.649,17.199 265.837,4.102 C255,10.529 242.996,15.197 230.22,17.713 C219.988,6.812 205.411,0 189.279,0 C158.302,0 133.188,25.113 133.188,56.088 C133.188,60.484 133.685,64.765 134.641,68.87 C88.025,66.531 46.696,44.201 19.032,10.267 C14.204,18.551 11.438,28.186 11.438,38.465 C11.438,57.924 21.341,75.092 36.391,85.15 C27.196,84.859 18.548,82.336 10.985,78.135 C10.981,78.369 10.981,78.604 10.981,78.84 C10.981,106.016 30.315,128.686 55.974,133.838 C51.267,135.12 46.312,135.805 41.196,135.805 C37.582,135.805 34.068,135.454 30.644,134.799 C37.781,157.083 58.495,173.299 83.039,173.752 C63.843,188.795 39.658,197.762 13.38,197.762 C8.853,197.762 4.388,197.497 0,196.979 C24.822,212.893 54.305,222.178 85.98,222.178 C189.148,222.178 245.564,136.711 245.564,62.592 C245.564,60.16 245.51,57.741 245.402,55.336 C256.36,47.428 265.87,37.549 273.39,26.301" /></g>
-  </svg>
-);
-
-export default [
-  {
-    title: 'Javi Velasco',
-    subtitle: 'javivelasco',
-    actions: [
-      {
-        href: 'http://github.com/javivelasco',
-        children: [<GithubIcon key='gicon-javivelasco' />, <span key='glabel-javivelasco'>Github</span>],
-        target: '_blank'
-      },
-      {
-        href: 'http://twitter.com/javivelasco',
-        children: [<TwitterIcon key='ticon-javivelasco' />, <span key='tlabel-javivelasco'>Twitter</span>],
-        style: {color: '#55acee'},
-        target: '_blank'
-      }
-    ],
-    image: '/images/javivelasco.jpg',
-    text: 'Software gardener • Film, music & comic lover • Frontend Engineer at SocialBro  • Any biographer in the room?',
-    color: '#3f51b5'
-  },
-  {
-    title: 'Javi Jimenez',
-    subtitle: 'soyjavi',
-    actions: [
-      {
-        href: 'http://github.com/soyjavi',
-        children: [<GithubIcon key='gicon-soyjavi' />, <span key='glabel-soyjavi'>Github</span>],
-        target: '_blank'
-      },
-      {
-        href: 'http://twitter.com/soyjavi',
-        children: [<TwitterIcon key='ticon-soyjavi' />, <span key='tlabel-soyjavi'>Twitter</span>],
-        style: {color: '#55acee'},
-        target: '_blank'
-      }
-    ],
-    image: '/images/soyjavi.jpg',
-    text: 'Creative Doer · A complicated #human who builds stuff · #author · #opensource lover · #traveller · with a dark past being CEO & CTO',
-    color: '#3f51b5'
-  }
-];
diff --git a/docs/app/components/layout/home/modules/readme.md b/docs/app/components/layout/home/modules/readme.md
deleted file mode 100644
index 0e6303bde..000000000
--- a/docs/app/components/layout/home/modules/readme.md
+++ /dev/null
@@ -1,18 +0,0 @@
-# React Toolbox Components
-
-React Toolbox is a library of React Components based on Google's Material Design Guidelines. The main purpose of the documentation is to explore each of the components and to learn how to use them. To make the best possible experience and to experiment with the components properties and methods, we've created a playground to try components live.
-
-On the top right side of the screen you will see a rounded button with a code icon. It opens a the playground with a small in-browser editor and an area to render what you type in real time. Inside the documentation of each component you will see one or multiple example code boxes. Each of them can include a button to open the given code in the playground.
-
-Enjoy and remember that [feedback](https://github.com/react-toolbox/react-toolbox/issues) is really appreciated.
-
-# Lorem ipsum...
-
-Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-# Authors
diff --git a/docs/app/components/layout/home/style.scss b/docs/app/components/layout/home/style.scss
index dd9360905..078b551e5 100644
--- a/docs/app/components/layout/home/style.scss
+++ b/docs/app/components/layout/home/style.scss
@@ -1,5 +1,7 @@
 @import "http://github.com/globals";
 @import "http://github.com/config";
+
+$twitter-color: #55acee;
 $content-offset: 4.8 * $unit;
 $content-width: 740px;
 
@@ -29,10 +31,10 @@ $content-width: 740px;
     opacity: $hero-text-secondary-opacity;
   }
   .github {
-    z-index: $z-index-higher;
     position: fixed;
     top: 2 * $unit;
     left: 2 * $unit;
+    z-index: $z-index-higher;
     text-align: center;
     iframe {
       display: inline-block;
@@ -74,11 +76,10 @@ $content-width: 740px;
 .content {
   display: flex;
   flex-direction: column;
+  flex-wrap: wrap;
   align-items: center;
   padding: $content-offset;
   background-color: $color-content;
-
-  flex-wrap: wrap;
   &:nth-child(3) {
     background-color: darken($color-content, 5%);
   }
@@ -87,9 +88,13 @@ $content-width: 740px;
     align-items: flex-start;
     justify-content: center;
     > * {
+      max-width: 32 * $unit;
       flex: 1 auto;
       margin: 0 $unit;
     }
+    .twitter {
+      color: $twitter-color;
+    }
   }
   > p {
     max-width: $content-width;
@@ -125,6 +130,27 @@ $content-width: 740px;
   }
 }
 
+.donate {
+  display: inline-block;
+  overflow: hidden;
+  font-size: 1.1 * $unit;
+  color: #fff;
+  vertical-align: top;
+  border-radius: 3px;
+  .legend {
+    display: inline-block;
+    padding: 0 .5 * $unit;
+    line-height: 2 * $unit;
+    background-color: #555;
+  }
+  .paypal {
+    display: inline-block;
+    padding: 0 .5 * $unit;
+    line-height: 2 * $unit;
+    background-color: #007ec6;
+  }
+}
+
 @media all and (max-width: 768px) {
   .header {
     .github {
@@ -148,24 +174,3 @@ $content-width: 740px;
     background-color: transparent;
   }
 }
-
-.donate {
-  display: inline-block;
-  overflow: hidden;
-  font-size: 1.1 * $unit;
-  color: #fff;
-  vertical-align: top;
-  border-radius: 3px;
-  .legend {
-    display: inline-block;
-    padding: 0 .5 * $unit;
-    line-height: 2 * $unit;
-    background-color: #555;
-  }
-  .paypal {
-    display: inline-block;
-    padding: 0 .5 * $unit;
-    line-height: 2 * $unit;
-    background-color: #007ec6;
-  }
-}
diff --git a/docs/webpack.config.development.js b/docs/webpack.config.development.js
index efc2907c5..d37d9c358 100644
--- a/docs/webpack.config.development.js
+++ b/docs/webpack.config.development.js
@@ -2,6 +2,7 @@ const path = require('path');
 const webpack = require('webpack');
 const autoprefixer = require('autoprefixer');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const TransferWebpackPlugin = require('transfer-webpack-plugin');
 
 module.exports = {
   context: __dirname,
@@ -49,6 +50,10 @@ module.exports = {
   postcss: [autoprefixer],
   plugins: [
     new ExtractTextPlugin('docs.css', { allChunks: true }),
+    new TransferWebpackPlugin([{
+      from: 'www/images',
+      to: 'images'
+    }], path.resolve(__dirname, './')),
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoErrorsPlugin(),
     new webpack.DefinePlugin({

From 4ef730e553ddf12bbd5f497f654bf46994ecb13c Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 29 Nov 2015 20:13:38 +0100
Subject: [PATCH 0230/1024] Update documentation

---
 README.md                                     | 10 +++++++---
 docs/app/components/layout/install/install.md |  8 ++++++--
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 1ddc4ba62..70471e5a3 100644
--- a/README.md
+++ b/README.md
@@ -33,9 +33,13 @@ const CustomButton = () => (
 export default CustomButton;
 ```
 
-The previous code creates a React button component based on React toolbox button. It's important to notice that requiring a module from the exposed root of the package will import the **SASS** of the component. 
+The previous code creates a React button component based on React toolbox button. It's important to notice that requiring a module from the exposed root of the package will import the **SASS** of the component.
 
-We encourage you to work with webpack but if you want to use React Toolbox in an old fashioned way you must generate a build with all the css and javascript and include it in your `index.html`. Then you can use the components exposed in the `window` object.
+## Roboto Font and Material Design Icons
+
+React Toolbox assumes that you are importing [Roboto Font](https://www.google.com/fonts/specimen/Roboto) and [Material Design Icons](https://www.google.com/design/icons/).
+
+In order to import the fonts for you, we'd need to include them in the CSS which is considered a bad practice. If you are not including them in your app yo to the linked sites and follow the instructions. 
 
 ## App component
 
@@ -88,7 +92,7 @@ If you browse the resulting markup you will see *data attributes* like `data-rol
 
 The project is being initially developed and maintained by [Javier Velasco](http://javivelasco.com) and [Javier Jiménez](http://soyjavi.com) and the [contribution scene](https://github.com/react-toolbox/react-toolbox/graphs/contributors) is just getting warm. We want to create reference components so any contribution is very welcome.
 
-To work in the project you'd need a `node` version with ES6 syntax. Although the project is built using Babel we use some ES6 features in the development server. Also, the packages has been tested with `node 4.2.1`. Consider using [nvm](https://github.com/creationix/nvm) or [n](https://github.com/tj/n) to handle different node versions!
+To work in the project you'd need a `node` version supporting ES6 syntax. Although the project is built using Babel we use some ES6 features in the development server. Also, the packages has been tested with `node 4.2.1`. Consider using [nvm](https://github.com/creationix/nvm) or [n](https://github.com/tj/n) to handle different node versions!
 
 To start documentation site locally you'd need to install dependencies from the main package and also dependencies from the docs subproject:
 
diff --git a/docs/app/components/layout/install/install.md b/docs/app/components/layout/install/install.md
index f8842c43b..d1518f1e5 100644
--- a/docs/app/components/layout/install/install.md
+++ b/docs/app/components/layout/install/install.md
@@ -27,9 +27,13 @@ const CustomButton = () => (
 export default CustomButton;
 ```
 
-The previous code creates a React button component based on React toolbox button. It's important to notice that requiring a module from the exposed root of the package will import the **ES6 JSX** and **SASS** of the component. If you want to still use CSS Modules but avoiding [Babel](https://babeljs.io/) and [SASS](http://sass-lang.com/) you can require from `react-toolbox/lib`.
+The previous code creates a React button component based on React toolbox button. It's important to notice that requiring a module from the exposed root of the package will import the **SASS** of the component.
 
-We encourage you to work with webpack but if you want to use React Toolbox in an old fashioned way you must generate a build with all the css and javascript and include it in your `index.html`. Then you can use the components exposed in the `window` object.
+## Roboto Font and Material Design Icons
+
+React Toolbox assumes that you are importing [Roboto Font](https://www.google.com/fonts/specimen/Roboto) and [Material Design Icons](https://www.google.com/design/icons/).
+
+In order to import the fonts for you, we'd need to include them in the CSS which is considered a bad practice. If you are not including them in your app yo to the linked sites and follow the instructions. 
 
 ## App component
 

From def382bbd1d9c7c725b2d5a34553220805964ea3 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 29 Nov 2015 20:14:43 +0100
Subject: [PATCH 0231/1024] 0.13.0 release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 84fbdd8ee..fd8184aa5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-toolbox",
-  "version": "0.12.13",
+  "version": "0.13.0",
   "homepage": "http://www.react-toolbox.com/",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "author": "React Toolbox Team (http://github.com/react-toolbox)",

From 5994f5090a642425d6a71992a8f0268516840782 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 29 Nov 2015 20:25:39 +0100
Subject: [PATCH 0232/1024] Move classnames dependency to peerdependencies

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index fd8184aa5..07121e25b 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
   ],
   "license": "MIT",
   "peerDependencies": {
+    "classnames": "^2.2.0",
     "react": "^0.14",
     "react-dom": "^0.14.0",
     "react-addons-css-transition-group": "^0.14.0",
@@ -57,7 +58,6 @@
     "babel-loader": "^5.3.2",
     "babel-plugin-react-transform": "^1.1.1",
     "bluebird": "^3.0.5",
-    "classnames": "^2.2.0",
     "core-js": "^1.2.6",
     "cpx": "^1.2.1",
     "cross-env": "^1.0.4",

From 086047c0a957206676891989908d9395f3d152df Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 29 Nov 2015 20:28:10 +0100
Subject: [PATCH 0233/1024] 0.13.1 release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 07121e25b..5afbbec68 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-toolbox",
-  "version": "0.13.0",
+  "version": "0.13.1",
   "homepage": "http://www.react-toolbox.com/",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "author": "React Toolbox Team (http://github.com/react-toolbox)",

From 9b0e50e747392e0e547a83790a66412fea74b7c2 Mon Sep 17 00:00:00 2001
From: David Hayes <drhayes@gmail.com>
Date: Wed, 2 Dec 2015 15:24:22 -0600
Subject: [PATCH 0234/1024] Change capitalization to match the filesystem
 exactly.

---
 components/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/index.js b/components/index.js
index 71a2fa1a0..1cf11393b 100644
--- a/components/index.js
+++ b/components/index.js
@@ -19,7 +19,7 @@ export List from './list/List';
 export ListItem from './list/ListItem';
 export ListDivider from './list/ListDivider';
 export ListCheckbox from './list/ListCheckbox';
-export ListSubHeader from './list/ListSubHeader';
+export ListSubHeader from './list/ListSubheader';
 export Menu from './menu/Menu';
 export MenuItem from './menu/MenuItem';
 export MenuDivider from './menu/MenuDivider';

From 8620fd43be21e895d573425bfbee242ada90238d Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 3 Dec 2015 00:08:09 +0100
Subject: [PATCH 0235/1024] 0.13.2 release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 5afbbec68..03c67f742 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-toolbox",
-  "version": "0.13.1",
+  "version": "0.13.2",
   "homepage": "http://www.react-toolbox.com/",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "author": "React Toolbox Team (http://github.com/react-toolbox)",

From 7619c055a962d603dcbe90c3471f7ea7fe7c315b Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 3 Dec 2015 00:38:51 +0100
Subject: [PATCH 0236/1024] Add inline styles for dropdown example in docs

---
 .../modules/examples/dropdown_example_1.txt   | 30 +++++++++++++------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/docs/app/components/layout/main/modules/examples/dropdown_example_1.txt b/docs/app/components/layout/main/modules/examples/dropdown_example_1.txt
index 5645ba6ed..4eb7a2341 100644
--- a/docs/app/components/layout/main/modules/examples/dropdown_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/dropdown_example_1.txt
@@ -15,17 +15,30 @@ class DropdownTest extends React.Component {
   };
 
   customItem (item) {
-    const style = {
-      width: 36,
-      height: 36,
-      backgroundColor: '#ccc',
-      marginRight: 8
+    const containerStyle = {
+      display: 'flex',
+      flexDirection: 'row'
+    };
+
+    const imageStyle = {
+      display: 'flex',
+      width: '32px',
+      height: '32px',
+      flexGrow: 0,
+      marginRight: '8px',
+      backgroundColor: '#ccc'
+    };
+
+    const contentStyle = {
+      display: 'flex',
+      flexDirection: 'column',
+      flexGrow: 2
     };
 
     return (
-      <div data-flex="horizontal grow" data-flex-content="center">
-        <img src={item.img} data-flex-grow="min" style={style} />
-        <div data-flex-grow="max" data-flex="vertical" >
+      <div style={containerStyle}>
+        <img src={item.img} style={imageStyle}/>
+        <div style={contentStyle}>
           <strong>{item.artist}</strong>
           <small>{item.album}</small>
         </div>
@@ -48,4 +61,3 @@ class DropdownTest extends React.Component {
 }
 
 return <DropdownTest />;
-

From e2911203a4dbb928d12f8640ff823cc15ad11360 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 3 Dec 2015 00:48:12 +0100
Subject: [PATCH 0237/1024] Fix checkbox example

---
 .../layout/main/modules/examples/checkbox_example_1.txt       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/app/components/layout/main/modules/examples/checkbox_example_1.txt b/docs/app/components/layout/main/modules/examples/checkbox_example_1.txt
index 9acebc1e9..83d44be27 100644
--- a/docs/app/components/layout/main/modules/examples/checkbox_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/checkbox_example_1.txt
@@ -4,8 +4,8 @@ class TestCheckbox extends React.Component {
     check2: false
   };
 
-  handleChange = (field) => {
-    this.setState({ [key]: value });
+  handleChange = (field, value) => {
+    this.setState({...this.state, [field]: value});
   };
 
   render () {

From 083586304b652de0ca0dc64d403ac2448ab45bf0 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 3 Dec 2015 00:48:32 +0100
Subject: [PATCH 0238/1024] Fixes #180

---
 components/input/Input.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/input/Input.jsx b/components/input/Input.jsx
index 2fe385908..3ad72c5ac 100644
--- a/components/input/Input.jsx
+++ b/components/input/Input.jsx
@@ -77,6 +77,7 @@ class Input extends React.Component {
       onChange: this.handleChange,
       ref: 'input',
       role: 'input',
+      disabled,
       value
     });
 

From 26d7b8a6e8260ff80df7825815be9a7911b61718 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 3 Dec 2015 00:50:02 +0100
Subject: [PATCH 0239/1024] Add missing default to some globals

---
 components/_globals.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/_globals.scss b/components/_globals.scss
index a1b9f3cdf..5ae5fce78 100644
--- a/components/_globals.scss
+++ b/components/_globals.scss
@@ -3,8 +3,8 @@ $color-divider: $palette-grey-200 !default;
 $color-background: $color-white !default;
 $color-text: $palette-grey-900 !default;
 $color-text-secondary: $palette-grey-600 !default;
-$color-overlay: $color-black;
-$color-overlay-opacity: 0.5;
+$color-overlay: $color-black !default;
+$color-overlay-opacity: 0.5 !default;
 
 $color-primary: $palette-indigo-500 !default;
 $color-primary-dark: $palette-indigo-700 !default;
@@ -14,7 +14,7 @@ $color-primary-contrast: $color-dark-contrast !default;
 $color-accent-contrast: $color-dark-contrast !default;
 
 //-- Sizing
-$unit: 1rem;
+$unit: 1rem !default;
 
 // -- Fonts
 $preferred-font: "Roboto", "Helvetica", "Arial", sans-serif !default;

From 43f546f616b5362945ea05a4a771e44dc4c95313 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 3 Dec 2015 00:51:43 +0100
Subject: [PATCH 0240/1024] Fix input example

---
 .../layout/main/modules/examples/input_example_1.txt        | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/docs/app/components/layout/main/modules/examples/input_example_1.txt b/docs/app/components/layout/main/modules/examples/input_example_1.txt
index a30ff0a82..18f6d4a0e 100644
--- a/docs/app/components/layout/main/modules/examples/input_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/input_example_1.txt
@@ -1,10 +1,8 @@
 class InputTest extends React.Component {
   state = { name: '', phone: '', email: '' };
 
-  handleChange = (name, event) => {
-    const newState = {};
-    newState[`${name}`] = event.target.value;
-    this.setState(newState);
+  handleChange = (name, value) => {
+    this.setState({...this.state, [name]: value});
   };
 
   render () {

From 22bd7504f13140907357ecaf684220ffab60a0bc Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 3 Dec 2015 00:56:18 +0100
Subject: [PATCH 0241/1024] Fix timepicker example

---
 components/time_picker/readme.md              | 19 ++++++++++++------
 .../modules/examples/timepicker_example_1.txt | 20 +++++++++++++------
 2 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/components/time_picker/readme.md b/components/time_picker/readme.md
index e4d487fb9..6b771657c 100644
--- a/components/time_picker/readme.md
+++ b/components/time_picker/readme.md
@@ -5,14 +5,21 @@ A [dialog picker](https://www.google.com/design/spec/components/pickers.html#pic
 <!-- example -->
 ```jsx
 import TimePicker from 'react-toolbox/lib/time_picker';
+let time = new Date();
+time.setHours(17);
+time.setMinutes(28);
 
-let selectedTime = new Date();
-selectedTime.setHours(17);
-selectedTime.setMinutes(28);
+class TimePickerTest extends React.Component {
+	state = {time};
 
-const TimePickerTest = () => (
-  <TimePicker label='Finishing time' value={selectedTime} />
-);
+  handleChange = (time) => {
+  	this.setState({time});
+  };
+
+  render () {
+  	return <TimePicker label='Finishing time' onChange={this.handleChange} value={this.state.time} />;
+  }
+}
 ```
 
 ## Properties
diff --git a/docs/app/components/layout/main/modules/examples/timepicker_example_1.txt b/docs/app/components/layout/main/modules/examples/timepicker_example_1.txt
index b29784a40..3017b481a 100644
--- a/docs/app/components/layout/main/modules/examples/timepicker_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/timepicker_example_1.txt
@@ -1,9 +1,17 @@
-let selectedTime = new Date();
-selectedTime.setHours(17);
-selectedTime.setMinutes(28);
+let time = new Date();
+time.setHours(17);
+time.setMinutes(28);
 
-const TimePickerTest = () => (
-  <TimePicker label='Finishing time' value={selectedTime} />
-);
+class TimePickerTest extends React.Component {
+	state = {time};
+
+  handleChange = (time) => {
+  	this.setState({time});
+  };
+
+  render () {
+  	return <TimePicker label='Finishing time' onChange={this.handleChange} value={this.state.time} />;
+  }
+}
 
 return <TimePickerTest />

From 16de3b413964512c78361d83a897688ecbd26abe Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 3 Dec 2015 01:00:12 +0100
Subject: [PATCH 0242/1024] Fix icons for navigation examples

---
 .../layout/main/modules/examples/navigation_example_1.txt       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/app/components/layout/main/modules/examples/navigation_example_1.txt b/docs/app/components/layout/main/modules/examples/navigation_example_1.txt
index 151137d1f..5200bf532 100644
--- a/docs/app/components/layout/main/modules/examples/navigation_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/navigation_example_1.txt
@@ -4,7 +4,7 @@ const links = [
 ];
 
 const actions = [
-  { label: 'Alarm', raised: true, icon: 'access-alarm'},
+  { label: 'Alarm', raised: true, icon: 'access_alarm'},
   { label: 'Location', raised: true, accent: true, icon: 'room'}
 ];
 

From c8246f5c3b5bf5e637b99de8f75f667458b0daea Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 3 Dec 2015 01:00:59 +0100
Subject: [PATCH 0243/1024] Fix checkbox readme

---
 components/checkbox/readme.md | 31 ++++++++++++++-----------------
 1 file changed, 14 insertions(+), 17 deletions(-)

diff --git a/components/checkbox/readme.md b/components/checkbox/readme.md
index 371247ffc..9c7d409c9 100644
--- a/components/checkbox/readme.md
+++ b/components/checkbox/readme.md
@@ -7,36 +7,33 @@
 import Checkbox from 'react-toolbox/lib/checkbox';
 
 class TestCheckbox extends React.Component {
-  state = {
-    check1: true,
-    check2: false
-  };
+  state = { check1: true, check2: false };
 
   handleChange = (field, value) => {
-    this.setState({ [field]: value });
+    this.setState({...this.state, [field]: value});
   };
 
   render () {
     return (
       <div>
-        <Checkbox 
-          checked={this.state.check1} 
-          label="Checked option" 
-          onChange={this.handleChange.bind(this, 'check1')} 
+        <Checkbox
+          checked={this.state.check1}
+          label="Checked option"
+          onChange={this.handleChange.bind(this, 'check1')}
         />
-        <Checkbox 
-          checked={this.state.check2} 
-          label="Unchecked option" 
+        <Checkbox
+          checked={this.state.check2}
+          label="Unchecked option"
           onChange={this.handleChange.bind(this, 'check2')}
         />
-        <Checkbox 
-          checked 
-          disabled 
-          label="Disabled checkbox" 
+        <Checkbox
+          checked
+          disabled
+          label="Disabled checkbox"
         />
       </div>
     );
-  } 
+  }
 }
 ```
 

From 4696aa2a41df7c56e83fd7c27cac92842c8c667b Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 3 Dec 2015 01:05:13 +0100
Subject: [PATCH 0244/1024] 0.13.3 release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 03c67f742..dd901fab0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-toolbox",
-  "version": "0.13.2",
+  "version": "0.13.3",
   "homepage": "http://www.react-toolbox.com/",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "author": "React Toolbox Team (http://github.com/react-toolbox)",

From 0e13ae0740f2977546130d87bb37cf5b9396d463 Mon Sep 17 00:00:00 2001
From: Jakub Wojtczak <jakub.wojtczak@uxdream.com>
Date: Thu, 3 Dec 2015 14:54:45 +0100
Subject: [PATCH 0245/1024] Fix ripple positioning when page is scrolled

---
 components/ripple/Ripple.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/ripple/Ripple.jsx b/components/ripple/Ripple.jsx
index c74908d39..37f89ef8c 100644
--- a/components/ripple/Ripple.jsx
+++ b/components/ripple/Ripple.jsx
@@ -51,8 +51,8 @@ class Ripple extends React.Component {
   _getDescriptor (pageX, pageY) {
     const {left, top, height, width} = ReactDOM.findDOMNode(this).getBoundingClientRect();
     return {
-      left: this.props.centered ? 0 : pageX - left - width / 2 + window.scrollX,
-      top: this.props.centered ? 0 : pageY - top - height / 2 + window.scrollY,
+      left: this.props.centered ? 0 : pageX - left - width / 2 - window.scrollX,
+      top: this.props.centered ? 0 : pageY - top - height / 2 - window.scrollY,
       width: width * this.props.spread
     };
   }

From 27b7bef158daa209824f10499f3db82bbaf9ed21 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 3 Dec 2015 20:43:22 +0100
Subject: [PATCH 0246/1024] Fix typos in input examples and update example in
 input readme

---
 components/input/readme.md                           | 12 +++++-------
 .../layout/main/modules/examples/input_example_1.txt |  4 ++--
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/components/input/readme.md b/components/input/readme.md
index 11afe733f..0700f976c 100644
--- a/components/input/readme.md
+++ b/components/input/readme.md
@@ -9,19 +9,17 @@ import Input from 'react-toolbox/lib/input';
 class InputTest extends React.Component {
   state = { name: '', phone: '', email: '' };
 
-  handleChange = (name, event) => {
-    const newState = {};
-    newState[`${name}`] = event.target.value;
-    this.setState(newState);
+  handleChange = (name, value) => {
+    this.setState({...this.state, [name]: value});
   };
 
   render () {
     return (
       <section>
-        <Input type='text' label='Name' name='name' value={this.state.name} onChange={this.handleChange.bind(this, 'name')} />
+        <Input type='text' label='Name' name='name' value={this.state.name} onChange={this.handleChange.bind(this, 'name')} maxLength={16 } />
         <Input type='text' label='Disabled field' disabled />
-        <Input type='email' label='Email address' icon='email' />
-        <Input type='tel' label='Phone' name='phone' icon='phone' value={this.state.withIcon} onChange={this.handleChange.bind(this, 'phone')} />
+        <Input type='email' label='Email address' icon='email' value={this.state.email} onChange={this.handleChange.bind(this, 'email')} />
+        <Input type='tel' label='Phone' name='phone' icon='phone' value={this.state.phone} onChange={this.handleChange.bind(this, 'phone')} />
       </section>
     );
   }
diff --git a/docs/app/components/layout/main/modules/examples/input_example_1.txt b/docs/app/components/layout/main/modules/examples/input_example_1.txt
index 18f6d4a0e..9043f00f8 100644
--- a/docs/app/components/layout/main/modules/examples/input_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/input_example_1.txt
@@ -10,8 +10,8 @@ class InputTest extends React.Component {
       <section>
         <Input type='text' label='Name' name='name' value={this.state.name} onChange={this.handleChange.bind(this, 'name')} maxLength={16 } />
         <Input type='text' label='Disabled field' disabled />
-        <Input type='email' label='Email address' icon='email' />
-        <Input type='tel' label='Phone' name='phone' icon='phone' value={this.state.withIcon} onChange={this.handleChange.bind(this, 'phone')} />
+        <Input type='email' label='Email address' icon='email' value={this.state.email} onChange={this.handleChange.bind(this, 'email')} />
+        <Input type='tel' label='Phone' name='phone' icon='phone' value={this.state.phone} onChange={this.handleChange.bind(this, 'phone')} />
       </section>
     );
   }

From cfad0eae81e08e3f5bce1a4412fc8ab2be28c62f Mon Sep 17 00:00:00 2001
From: Matt Brookes <mbrookes@users.noreply.github.com>
Date: Thu, 3 Dec 2015 20:52:37 +0000
Subject: [PATCH 0247/1024] Typo

---
 components/input/readme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/input/readme.md b/components/input/readme.md
index 0700f976c..bdf748866 100644
--- a/components/input/readme.md
+++ b/components/input/readme.md
@@ -1,6 +1,6 @@
 # Input
 
-Although we are calling then Inputs they actually correspond to Material Design [Text fields](https://www.google.com/design/spec/components/text-fields.html). It allows a user to input text and it's the base for other components like the autocomplete.
+Although we are calling them Inputs they actually correspond to Material Design [Text fields](https://www.google.com/design/spec/components/text-fields.html). It allows a user to input text and it's the base for other components like the autocomplete.
 
 <!-- example -->
 ```jsx

From 89b41f3663683dce6c42777740541c8a246a4b4c Mon Sep 17 00:00:00 2001
From: Cem Turan <cem2ran@gmail.com>
Date: Sat, 5 Dec 2015 10:49:29 +0100
Subject: [PATCH 0248/1024] Input was missing html5 type property

---
 components/input/Input.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/input/Input.jsx b/components/input/Input.jsx
index 3ad72c5ac..b48e50054 100644
--- a/components/input/Input.jsx
+++ b/components/input/Input.jsx
@@ -78,6 +78,7 @@ class Input extends React.Component {
       ref: 'input',
       role: 'input',
       disabled,
+      type,
       value
     });
 

From 1189e309c501d1cbf201473adb152aab648e885b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ale=C5=A1=20Jir=C3=A1nek?=
 <AlesJiranek@users.noreply.github.com>
Date: Sat, 5 Dec 2015 13:36:35 +0100
Subject: [PATCH 0249/1024] Rename ListSubheader.jsx to ListSubHeader.jsx

---
 components/list/{ListSubheader.jsx => ListSubHeader.jsx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename components/list/{ListSubheader.jsx => ListSubHeader.jsx} (100%)

diff --git a/components/list/ListSubheader.jsx b/components/list/ListSubHeader.jsx
similarity index 100%
rename from components/list/ListSubheader.jsx
rename to components/list/ListSubHeader.jsx

From cc6e3fbdc63638ecb8d96b57f80fe8c212519608 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ale=C5=A1=20Jir=C3=A1nek?=
 <AlesJiranek@users.noreply.github.com>
Date: Sat, 5 Dec 2015 13:43:06 +0100
Subject: [PATCH 0250/1024] Fix ListSubHeader case

---
 components/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/index.js b/components/index.js
index 1cf11393b..71a2fa1a0 100644
--- a/components/index.js
+++ b/components/index.js
@@ -19,7 +19,7 @@ export List from './list/List';
 export ListItem from './list/ListItem';
 export ListDivider from './list/ListDivider';
 export ListCheckbox from './list/ListCheckbox';
-export ListSubHeader from './list/ListSubheader';
+export ListSubHeader from './list/ListSubHeader';
 export Menu from './menu/Menu';
 export MenuItem from './menu/MenuItem';
 export MenuDivider from './menu/MenuDivider';

From 6d7204db53c5ad4aa5770da5f0739c57672c0686 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 6 Dec 2015 14:35:10 +0100
Subject: [PATCH 0251/1024] Add ripple decorator and use it in button and
 checkbox

---
 components/button/Button.jsx          |  17 +---
 components/checkbox/Check.jsx         |  18 ++++
 components/checkbox/Checkbox.jsx      |  44 +++-------
 components/ripple/RippleDecorator.jsx | 120 ++++++++++++++++++++++++++
 components/ripple/_config.scss        |   6 +-
 components/ripple/style.scss          |  12 ---
 6 files changed, 157 insertions(+), 60 deletions(-)
 create mode 100644 components/checkbox/Check.jsx
 create mode 100644 components/ripple/RippleDecorator.jsx

diff --git a/components/button/Button.jsx b/components/button/Button.jsx
index 693292929..5e2e1b8ed 100644
--- a/components/button/Button.jsx
+++ b/components/button/Button.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ClassNames from 'classnames';
 import FontIcon from '../font_icon';
-import Ripple from '../ripple';
+import RippleDecorator from '../ripple/RippleDecorator';
 import style from './style';
 
 class Button extends React.Component {
@@ -19,7 +19,6 @@ class Button extends React.Component {
     mini: React.PropTypes.bool,
     primary: React.PropTypes.bool,
     raised: React.PropTypes.bool,
-    ripple: React.PropTypes.bool,
     type: React.PropTypes.string
   };
 
@@ -30,13 +29,7 @@ class Button extends React.Component {
     floating: false,
     mini: false,
     primary: false,
-    raised: false,
-    ripple: true
-  };
-
-  handleMouseDown = (event) => {
-    if (this.refs.ripple) this.refs.ripple.start(event);
-    if (this.props.onMouseDown) this.props.onMouseDown(event);
+    raised: false
   };
 
   handleMouseUp = () => {
@@ -45,7 +38,7 @@ class Button extends React.Component {
 
   render () {
     const { accent, children, className, flat, floating, href, icon,
-            inverse, label, mini, primary, raised, ripple, ...others} = this.props;
+            inverse, label, mini, primary, raised, ...others} = this.props;
     const element = href ? 'a' : 'button';
     const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
     const shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : 'flat';
@@ -61,13 +54,11 @@ class Button extends React.Component {
       ref: 'button',
       className: classes,
       disabled: this.props.disabled,
-      onMouseDown: this.handleMouseDown,
       onMouseUp: this.handleMouseUp,
       'data-react-toolbox': 'button'
     };
 
     return React.createElement(element, props,
-      ripple ? <Ripple ref='ripple' /> : null,
       icon ? <FontIcon className={style.icon} value={icon}/> : null,
       label,
       children
@@ -75,4 +66,4 @@ class Button extends React.Component {
   }
 }
 
-export default Button;
+export default RippleDecorator(Button, {centered: false});
diff --git a/components/checkbox/Check.jsx b/components/checkbox/Check.jsx
new file mode 100644
index 000000000..8d8e85f10
--- /dev/null
+++ b/components/checkbox/Check.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import ClassNames from 'classnames';
+import RippleDecorator from '../ripple/RippleDecorator';
+import style from './style';
+
+const Check = ({checked, children, onMouseDown}) => {
+  const className = ClassNames(style.check, {
+    [style.checked]: checked
+  });
+
+  return <div data-role='checkbox' onMouseDown={onMouseDown} className={className}>{children}</div>;
+};
+
+export default RippleDecorator(Check, {
+  className: style.ripple,
+  spread: 2.6,
+  centered: true
+});
diff --git a/components/checkbox/Checkbox.jsx b/components/checkbox/Checkbox.jsx
index 9379e6baf..8d5b7b35d 100644
--- a/components/checkbox/Checkbox.jsx
+++ b/components/checkbox/Checkbox.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import ClassNames from 'classnames';
-import Ripple from '../ripple';
-import events from '../utils/events';
+import Check from './Check';
 import style from './style';
 
 class Checkbox extends React.Component {
@@ -22,21 +21,10 @@ class Checkbox extends React.Component {
     disabled: false
   };
 
-  handleClick = (event) => {
-    events.pauseEvent(event);
+  handleToggle = (event) => {
+    if (event.pageX !== 0 && event.pageY !== 0) this.blur();
     if (!this.props.disabled && this.props.onChange) {
-      const value = !this.refs.input.checked;
-      this.props.onChange(value, event);
-    }
-  };
-
-  handleInputClick = (event) => {
-    events.pauseEvent(event);
-  };
-
-  handleMouseDown = (event) => {
-    if (!this.props.disabled) {
-      this.refs.ripple.start(event);
+      this.props.onChange(!this.props.checked, event);
     }
   };
 
@@ -49,30 +37,22 @@ class Checkbox extends React.Component {
   }
 
   render () {
-    const fieldClassName = ClassNames(style.field, {
+    const { onChange, ...others } = this.props;
+    const className = ClassNames(style.field, {
       [style.disabled]: this.props.disabled
     }, this.props.className);
 
-    const checkboxClassName = ClassNames(style.check, {
-      [style.checked]: this.props.checked
-    });
-
     return (
-      <label
-        data-react-toolbox='checkbox'
-        className={fieldClassName}
-        onClick={this.handleClick}
-      >
+      <label data-react-toolbox='checkbox' className={className}>
         <input
-          ref='input'
-          {...this.props}
+          {...others}
           className={style.input}
-          onClick={this.handleInputClick}
+          onClick={this.handleToggle}
+          readOnly
+          ref='input'
           type='checkbox'
         />
-        <span data-role='checkbox' className={checkboxClassName} onMouseDown={this.handleMouseDown}>
-          <Ripple ref='ripple' data-role='ripple' className={style.ripple} spread={3} centered />
-        </span>
+        <Check checked={this.props.checked} disabled={this.props.disabled}/>
         {this.props.label ? <span data-role='label' className={style.text}>{this.props.label}</span> : null}
       </label>
     );
diff --git a/components/ripple/RippleDecorator.jsx b/components/ripple/RippleDecorator.jsx
new file mode 100644
index 000000000..0655fec19
--- /dev/null
+++ b/components/ripple/RippleDecorator.jsx
@@ -0,0 +1,120 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ClassNames from 'classnames';
+import style from './style';
+import prefixer from '../utils/prefixer';
+
+const defaults = {
+  centered: false,
+  className: '',
+  spread: 2
+};
+
+const Ripple = (ComposedComponent, options = {}) => {
+  const {
+    centered: defaultCentered,
+    className: defaultClassName,
+    spread: defaultSpread
+  } = {...defaults, ...options};
+
+  return class RippledComponent extends React.Component {
+    static propTypes = {
+      children: React.PropTypes.any,
+      disabled: React.PropTypes.bool,
+      ripple: React.PropTypes.bool,
+      rippleCentered: React.PropTypes.bool,
+      rippleClassName: React.PropTypes.string,
+      rippleSpread: React.PropTypes.number
+    };
+
+    static defaultProps = {
+      disabled: false,
+      ripple: true,
+      rippleCentered: defaultCentered,
+      rippleClassName: defaultClassName,
+      rippleSpread: defaultSpread
+    };
+
+    state = {
+      active: false,
+      left: null,
+      restarting: false,
+      top: null,
+      width: null
+    };
+
+    handleEnd = () => {
+      document.removeEventListener(this.touch ? 'touchend' : 'mouseup', this.handleEnd);
+      this.setState({active: false});
+    };
+
+    start = ({pageX, pageY}, touch = false) => {
+      if (!this._isTouchRippleReceivingMouseEvent(touch)) {
+        this.touch = touch;
+        document.addEventListener(this.touch ? 'touchend' : 'mouseup', this.handleEnd);
+        const {top, left, width} = this._getDescriptor(pageX, pageY);
+        this.setState({active: false, restarting: true, top, left, width}, () => {
+          this.refs.ripple.offsetWidth;  //eslint-disable-line no-unused-expressions
+          this.setState({active: true, restarting: false});
+        });
+      }
+    };
+
+    _isTouchRippleReceivingMouseEvent (touch) {
+      return this.touch && !touch;
+    }
+
+    _getDescriptor (pageX, pageY) {
+      const {left, top, height, width} = ReactDOM.findDOMNode(this).getBoundingClientRect();
+      const {rippleCentered: centered, rippleSpread: spread} = this.props;
+      return {
+        left: centered ? 0 : pageX - left - width / 2 - window.scrollX,
+        top: centered ? 0 : pageY - top - height / 2 - window.scrollY,
+        width: width * spread
+      };
+    }
+
+    handleMouseDown = (event) => {
+      if (!this.props.disabled) this.start(event);
+      if (this.props.onMouseDown) this.props.onMouseDown(event);
+    };
+
+    render () {
+      if (!this.props.ripple) {
+        return <ComposedComponent {...this.props} />;
+      } else {
+        const {
+          children,
+          ripple,
+          rippleClassName: className,
+          rippleCentered: centered,
+          rippleSpread: spread,
+          ...other
+        } = this.props;
+
+        const rippleClassName = ClassNames(style.normal, {
+          [style.active]: this.state.active,
+          [style.restarting]: this.state.restarting
+        }, className);
+
+        const { left, top, width } = this.state;
+        const scale = this.state.restarting ? 0 : 1;
+        const rippleStyle = prefixer({
+            transform: `translate3d(${-width / 2 + left}px, ${-width / 2 + top}px, 0) scale(${scale})`
+          }, {width, height: width});
+
+
+        return (
+          <ComposedComponent {...other} onMouseDown={this.handleMouseDown}>
+            {children ? children : null}
+            <span data-react-toolbox='ripple' className={style.wrapper}>
+              <span ref='ripple' role='ripple' className={rippleClassName} style={rippleStyle} />
+            </span>
+          </ComposedComponent>
+        );
+      }
+    }
+  };
+};
+
+export default Ripple;
diff --git a/components/ripple/_config.scss b/components/ripple/_config.scss
index 5013d0eaf..8c26b6f10 100644
--- a/components/ripple/_config.scss
+++ b/components/ripple/_config.scss
@@ -1,3 +1,3 @@
-$ripple-duration: 1.2s;
-$ripple-final-opacity: .3;
-$ripple-size: 15 * $unit;
+$ripple-duration: 800ms !default;
+$ripple-final-opacity: .3 !default;
+$ripple-size: 15 * $unit !default;
diff --git a/components/ripple/style.scss b/components/ripple/style.scss
index bddf5afe8..00902d372 100644
--- a/components/ripple/style.scss
+++ b/components/ripple/style.scss
@@ -38,15 +38,3 @@
     transition-property: opacity, transform;
   }
 }
-
-.loading {
-  @extend %ripple;
-  @include ripple-loading(ripple, $ripple-size, $ripple-size);
-  width: $ripple-size;
-  height: $ripple-size;
-  opacity: $ripple-final-opacity;
-  animation-name: ripple;
-  animation-duration: $ripple-duration;
-  animation-timing-function: $animation-curve-linear-out-slow-in;
-  animation-iteration-count: infinite;
-}

From 43df57ab9d4e0eb1badf1ba58f35ed2843d14eee Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 7 Dec 2015 00:27:13 +0100
Subject: [PATCH 0252/1024] Use RippleDecorator in IconButton

---
 components/button/IconButton.jsx | 22 +++++++---------------
 1 file changed, 7 insertions(+), 15 deletions(-)

diff --git a/components/button/IconButton.jsx b/components/button/IconButton.jsx
index f642ae084..d6964ed78 100644
--- a/components/button/IconButton.jsx
+++ b/components/button/IconButton.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import ClassNames from 'classnames';
 import FontIcon from '../font_icon';
-import Ripple from '../ripple';
+import RippleDecorator from '../ripple/RippleDecorator';
 import style from './style';
 
-class Button extends React.Component {
+class IconButton extends React.Component {
   static propTypes = {
     accent: React.PropTypes.bool,
     children: React.PropTypes.node,
@@ -14,20 +14,13 @@ class Button extends React.Component {
     icon: React.PropTypes.string,
     inverse: React.PropTypes.bool,
     primary: React.PropTypes.bool,
-    ripple: React.PropTypes.bool,
     type: React.PropTypes.string
   };
 
   static defaultProps = {
     accent: false,
     className: '',
-    primary: false,
-    ripple: true
-  };
-
-  handleMouseDown = (event) => {
-    if (this.refs.ripple) this.refs.ripple.start(event);
-    if (this.props.onMouseDown) this.props.onMouseDown(event);
+    primary: false
   };
 
   handleMouseUp = () => {
@@ -35,7 +28,7 @@ class Button extends React.Component {
   };
 
   render () {
-    const {accent, children, className, href, icon, inverse, primary, ripple, ...others} = this.props;
+    const {accent, children, className, href, icon, inverse, primary, ...others} = this.props;
     const element = href ? 'a' : 'button';
     const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
     const classes = ClassNames([style.toggle, style[level]], {[style.inverse]: inverse}, className);
@@ -46,16 +39,15 @@ class Button extends React.Component {
       ref: 'button',
       className: classes,
       disabled: this.props.disabled,
-      onMouseDown: this.handleMouseDown,
       onMouseUp: this.handleMouseUp,
       'data-react-toolbox': 'button'
     };
 
     return React.createElement(element, props,
-      ripple ? <Ripple ref='ripple' centered /> : null,
-      icon ? <FontIcon className={style.icon} value={icon}/> : children
+      icon ? <FontIcon className={style.icon} value={icon}/> : null,
+      children
     );
   }
 }
 
-export default Button;
+export default RippleDecorator(IconButton, {centered: true});

From 5afbaf5c746c5fdcffe833b1c52eabf373d73b94 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 7 Dec 2015 00:46:00 +0100
Subject: [PATCH 0253/1024] Currying Ripple Decorator

---
 components/button/Button.jsx          |   2 +-
 components/button/IconButton.jsx      |   2 +-
 components/checkbox/Check.jsx         |   4 +-
 components/ripple/RippleDecorator.jsx | 180 +++++++++++++-------------
 4 files changed, 95 insertions(+), 93 deletions(-)

diff --git a/components/button/Button.jsx b/components/button/Button.jsx
index 5e2e1b8ed..67395532e 100644
--- a/components/button/Button.jsx
+++ b/components/button/Button.jsx
@@ -66,4 +66,4 @@ class Button extends React.Component {
   }
 }
 
-export default RippleDecorator(Button, {centered: false});
+export default RippleDecorator({centered: false})(Button);
diff --git a/components/button/IconButton.jsx b/components/button/IconButton.jsx
index d6964ed78..fd86d9f26 100644
--- a/components/button/IconButton.jsx
+++ b/components/button/IconButton.jsx
@@ -50,4 +50,4 @@ class IconButton extends React.Component {
   }
 }
 
-export default RippleDecorator(IconButton, {centered: true});
+export default RippleDecorator({centered: true})(IconButton);
diff --git a/components/checkbox/Check.jsx b/components/checkbox/Check.jsx
index 8d8e85f10..a0f234f58 100644
--- a/components/checkbox/Check.jsx
+++ b/components/checkbox/Check.jsx
@@ -11,8 +11,8 @@ const Check = ({checked, children, onMouseDown}) => {
   return <div data-role='checkbox' onMouseDown={onMouseDown} className={className}>{children}</div>;
 };
 
-export default RippleDecorator(Check, {
+export default RippleDecorator({
   className: style.ripple,
   spread: 2.6,
   centered: true
-});
+})(Check);
diff --git a/components/ripple/RippleDecorator.jsx b/components/ripple/RippleDecorator.jsx
index 0655fec19..b869bcbe8 100644
--- a/components/ripple/RippleDecorator.jsx
+++ b/components/ripple/RippleDecorator.jsx
@@ -10,110 +10,112 @@ const defaults = {
   spread: 2
 };
 
-const Ripple = (ComposedComponent, options = {}) => {
+const Ripple = (options = {}) => {
   const {
     centered: defaultCentered,
     className: defaultClassName,
     spread: defaultSpread
   } = {...defaults, ...options};
 
-  return class RippledComponent extends React.Component {
-    static propTypes = {
-      children: React.PropTypes.any,
-      disabled: React.PropTypes.bool,
-      ripple: React.PropTypes.bool,
-      rippleCentered: React.PropTypes.bool,
-      rippleClassName: React.PropTypes.string,
-      rippleSpread: React.PropTypes.number
-    };
+  return ComposedComponent => {
+    return class RippledComponent extends React.Component {
+      static propTypes = {
+        children: React.PropTypes.any,
+        disabled: React.PropTypes.bool,
+        ripple: React.PropTypes.bool,
+        rippleCentered: React.PropTypes.bool,
+        rippleClassName: React.PropTypes.string,
+        rippleSpread: React.PropTypes.number
+      };
 
-    static defaultProps = {
-      disabled: false,
-      ripple: true,
-      rippleCentered: defaultCentered,
-      rippleClassName: defaultClassName,
-      rippleSpread: defaultSpread
-    };
+      static defaultProps = {
+        disabled: false,
+        ripple: true,
+        rippleCentered: defaultCentered,
+        rippleClassName: defaultClassName,
+        rippleSpread: defaultSpread
+      };
 
-    state = {
-      active: false,
-      left: null,
-      restarting: false,
-      top: null,
-      width: null
-    };
+      state = {
+        active: false,
+        left: null,
+        restarting: false,
+        top: null,
+        width: null
+      };
 
-    handleEnd = () => {
-      document.removeEventListener(this.touch ? 'touchend' : 'mouseup', this.handleEnd);
-      this.setState({active: false});
-    };
+      handleEnd = () => {
+        document.removeEventListener(this.touch ? 'touchend' : 'mouseup', this.handleEnd);
+        this.setState({active: false});
+      };
 
-    start = ({pageX, pageY}, touch = false) => {
-      if (!this._isTouchRippleReceivingMouseEvent(touch)) {
-        this.touch = touch;
-        document.addEventListener(this.touch ? 'touchend' : 'mouseup', this.handleEnd);
-        const {top, left, width} = this._getDescriptor(pageX, pageY);
-        this.setState({active: false, restarting: true, top, left, width}, () => {
-          this.refs.ripple.offsetWidth;  //eslint-disable-line no-unused-expressions
-          this.setState({active: true, restarting: false});
-        });
+      start = ({pageX, pageY}, touch = false) => {
+        if (!this._isTouchRippleReceivingMouseEvent(touch)) {
+          this.touch = touch;
+          document.addEventListener(this.touch ? 'touchend' : 'mouseup', this.handleEnd);
+          const {top, left, width} = this._getDescriptor(pageX, pageY);
+          this.setState({active: false, restarting: true, top, left, width}, () => {
+            this.refs.ripple.offsetWidth;  //eslint-disable-line no-unused-expressions
+            this.setState({active: true, restarting: false});
+          });
+        }
+      };
+
+      _isTouchRippleReceivingMouseEvent (touch) {
+        return this.touch && !touch;
       }
-    };
 
-    _isTouchRippleReceivingMouseEvent (touch) {
-      return this.touch && !touch;
-    }
-
-    _getDescriptor (pageX, pageY) {
-      const {left, top, height, width} = ReactDOM.findDOMNode(this).getBoundingClientRect();
-      const {rippleCentered: centered, rippleSpread: spread} = this.props;
-      return {
-        left: centered ? 0 : pageX - left - width / 2 - window.scrollX,
-        top: centered ? 0 : pageY - top - height / 2 - window.scrollY,
-        width: width * spread
-      };
-    }
+      _getDescriptor (pageX, pageY) {
+        const {left, top, height, width} = ReactDOM.findDOMNode(this).getBoundingClientRect();
+        const {rippleCentered: centered, rippleSpread: spread} = this.props;
+        return {
+          left: centered ? 0 : pageX - left - width / 2 - window.scrollX,
+          top: centered ? 0 : pageY - top - height / 2 - window.scrollY,
+          width: width * spread
+        };
+      }
 
-    handleMouseDown = (event) => {
-      if (!this.props.disabled) this.start(event);
-      if (this.props.onMouseDown) this.props.onMouseDown(event);
-    };
+      handleMouseDown = (event) => {
+        if (!this.props.disabled) this.start(event);
+        if (this.props.onMouseDown) this.props.onMouseDown(event);
+      };
 
-    render () {
-      if (!this.props.ripple) {
-        return <ComposedComponent {...this.props} />;
-      } else {
-        const {
-          children,
-          ripple,
-          rippleClassName: className,
-          rippleCentered: centered,
-          rippleSpread: spread,
-          ...other
-        } = this.props;
-
-        const rippleClassName = ClassNames(style.normal, {
-          [style.active]: this.state.active,
-          [style.restarting]: this.state.restarting
-        }, className);
-
-        const { left, top, width } = this.state;
-        const scale = this.state.restarting ? 0 : 1;
-        const rippleStyle = prefixer({
-            transform: `translate3d(${-width / 2 + left}px, ${-width / 2 + top}px, 0) scale(${scale})`
-          }, {width, height: width});
-
-
-        return (
-          <ComposedComponent {...other} onMouseDown={this.handleMouseDown}>
-            {children ? children : null}
-            <span data-react-toolbox='ripple' className={style.wrapper}>
-              <span ref='ripple' role='ripple' className={rippleClassName} style={rippleStyle} />
-            </span>
-          </ComposedComponent>
-        );
+      render () {
+        if (!this.props.ripple) {
+          return <ComposedComponent {...this.props} />;
+        } else {
+          const {
+            children,
+            ripple,
+            rippleClassName: className,
+            rippleCentered: centered,
+            rippleSpread: spread,
+            ...other
+          } = this.props;
+
+          const rippleClassName = ClassNames(style.normal, {
+            [style.active]: this.state.active,
+            [style.restarting]: this.state.restarting
+          }, className);
+
+          const { left, top, width } = this.state;
+          const scale = this.state.restarting ? 0 : 1;
+          const rippleStyle = prefixer({
+              transform: `translate3d(${-width / 2 + left}px, ${-width / 2 + top}px, 0) scale(${scale})`
+            }, {width, height: width});
+
+
+          return (
+            <ComposedComponent {...other} onMouseDown={this.handleMouseDown}>
+              {children ? children : null}
+              <span data-react-toolbox='ripple' className={style.wrapper}>
+                <span ref='ripple' role='ripple' className={rippleClassName} style={rippleStyle} />
+              </span>
+            </ComposedComponent>
+          );
+        }
       }
-    }
+    };
   };
 };
 

From a2e504f8f27bdb8c18d60ecf2b44989722a94d8e Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 7 Dec 2015 00:47:07 +0100
Subject: [PATCH 0254/1024] Remove ripple loading mixin

---
 components/_mixins.scss | 21 ---------------------
 1 file changed, 21 deletions(-)

diff --git a/components/_mixins.scss b/components/_mixins.scss
index f67f01ac0..96f9af129 100644
--- a/components/_mixins.scss
+++ b/components/_mixins.scss
@@ -251,24 +251,3 @@
   transition-timing-function: $animation-curve-default;
   transition-duration: $duration;
 }
-
-// The frames are this way to prevent a flicker in Safari
-// See https://goo.gl/5luFDk
-@mixin ripple-loading($name, $width, $height, $opacity: 0.3) {
-  @keyframes #{$name} {
-    0% {
-      opacity: $opacity;
-      transform: translate3d(-50%, -50%, 0) scale(0);
-    }
-
-    95% {
-      opacity: 0;
-      transform: translate3d(-50%, -50%, 0) scale(1);
-    }
-
-    100% {
-      opacity: 0;
-      transform: translate3d(-50%, -50%, 0) scale(0);
-    }
-  }
-}

From 8edf4923340235e664095f68296bd43c74787d7b Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 7 Dec 2015 01:13:59 +0100
Subject: [PATCH 0255/1024] Use RippleDecorator in ListItem

---
 components/list/ListItem.jsx | 18 ++++++++----------
 components/list/style.scss   |  9 +++++++--
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/components/list/ListItem.jsx b/components/list/ListItem.jsx
index d8ec16c47..a5ae8c3b8 100644
--- a/components/list/ListItem.jsx
+++ b/components/list/ListItem.jsx
@@ -2,13 +2,14 @@ import React from 'react';
 import ClassNames from 'classnames';
 import FontIcon from '../font_icon';
 import ListItemContent from './ListItemContent';
-import Ripple from '../ripple';
+import RippleDecorator from '../ripple/RippleDecorator';
 import style from './style';
 
 class ListItem extends React.Component {
   static propTypes = {
     avatar: React.PropTypes.string,
     caption: React.PropTypes.string.isRequired,
+    children: React.PropTypes.any,
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
     leftIcon: React.PropTypes.string,
@@ -32,12 +33,6 @@ class ListItem extends React.Component {
     }
   };
 
-  handleMouseDown = (event) => {
-    if (this.refs.ripple && !this.props.disabled) {
-      this.refs.ripple.start(event);
-    }
-  };
-
   renderContent () {
     const className = ClassNames(style.item, {
       [style.withLegend]: this.props.legend,
@@ -50,7 +45,6 @@ class ListItem extends React.Component {
         {this.props.leftIcon ? <FontIcon className={`${style.icon} ${style.left}`} value={this.props.leftIcon} /> : null}
         {this.props.avatar ? <img className={style.avatar} src={this.props.avatar} /> : null}
         <ListItemContent caption={this.props.caption} legend={this.props.legend} />
-        {this.props.ripple ? <Ripple ref='ripple' className={style.ripple} spread={2} /> : null}
         {this.props.rightIcon ? <FontIcon className={`${style.icon} ${style.right}`} value={this.props.rightIcon} /> : null}
       </span>
     );
@@ -58,11 +52,15 @@ class ListItem extends React.Component {
 
   render () {
     return (
-      <li className={style['list-item']} onClick={this.handleClick} onMouseDown={this.handleMouseDown}>
+      <li className={style.listItem} onClick={this.handleClick} onMouseDown={this.props.onMouseDown}>
         {this.props.to ? <a href={this.props.to}>{this.renderContent()}</a> : this.renderContent()}
+        {this.props.children}
       </li>
     );
   }
 }
 
-export default ListItem;
+export default RippleDecorator({
+  className: style.ripple,
+  centered: false
+})(ListItem);
diff --git a/components/list/style.scss b/components/list/style.scss
index 63548791e..2827ca57f 100644
--- a/components/list/style.scss
+++ b/components/list/style.scss
@@ -32,11 +32,16 @@
   .list + & {
     margin-top: - $list-vertical-padding;
   }
-  .list-item ~ & {
+  .listItem ~ & {
     margin: $list-vertical-padding 0;
   }
 }
 
+.listItem {
+  position: relative;
+  overflow: hidden;
+}
+
 .item {
   position: relative;
   display: flex;
@@ -79,7 +84,7 @@
 }
 
 .ripple {
-  opacity: .1;
+  color: $color-text-secondary;
 }
 
 .text {

From 4c986e4f3cce7680516b135293d746842f9ff6c0 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 7 Dec 2015 01:14:10 +0100
Subject: [PATCH 0256/1024] Remove unused css in calendar

---
 components/date_picker/_config.scss        | 1 -
 components/date_picker/style.calendar.scss | 5 -----
 2 files changed, 6 deletions(-)

diff --git a/components/date_picker/_config.scss b/components/date_picker/_config.scss
index 7f6b7d780..5308a9f0a 100644
--- a/components/date_picker/_config.scss
+++ b/components/date_picker/_config.scss
@@ -21,7 +21,6 @@ $calendar-primary-contrast-color: $calendar-primary-contrast !default;
 $calendar-primary-hover-color: rgba($calendar-primary, 0.21) !default;
 $calendar-arrows-color: $palette-grey-600 !default;
 $calendar-arrows-font-size: 2 * $unit;
-$calendar-arrows-ripple-duration: 450ms;
 $calendar-year-font-size: 2.4;
 $calendar-day-font-size: 1.3 * $unit;
 $calendar-day-disable-opacity: 0.25;
diff --git a/components/date_picker/style.calendar.scss b/components/date_picker/style.calendar.scss
index 5b6076548..6e8a92d23 100644
--- a/components/date_picker/style.calendar.scss
+++ b/components/date_picker/style.calendar.scss
@@ -91,8 +91,3 @@
 .month {
   background-color: $calendar-primary-contrast-color;
 }
-
-.ripple {
-  opacity: .5;
-  transition-duration: $calendar-arrows-ripple-duration;
-}

From fa76723ffda7f72b2fff6352f1dc8095f23dc70c Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 7 Dec 2015 01:40:59 +0100
Subject: [PATCH 0257/1024] Use ripple decorator in Radio buttons

---
 components/radio/Radio.jsx       | 14 ++++++++++++
 components/radio/RadioButton.jsx | 39 +++++++++-----------------------
 components/radio/style.scss      | 13 ++++-------
 3 files changed, 30 insertions(+), 36 deletions(-)
 create mode 100644 components/radio/Radio.jsx

diff --git a/components/radio/Radio.jsx b/components/radio/Radio.jsx
new file mode 100644
index 000000000..3b0e5c268
--- /dev/null
+++ b/components/radio/Radio.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import RippleDecorator from '../ripple/RippleDecorator';
+import style from './style';
+
+const Radio = ({checked, children, onMouseDown}) => {
+  const className = style[checked ? 'radio-checked' : 'radio'];
+  return <div data-role='radio' onMouseDown={onMouseDown} className={className}>{children}</div>;
+};
+
+export default RippleDecorator({
+  className: style.ripple,
+  spread: 2.6,
+  centered: true
+})(Radio);
diff --git a/components/radio/RadioButton.jsx b/components/radio/RadioButton.jsx
index 838199422..56322a111 100644
--- a/components/radio/RadioButton.jsx
+++ b/components/radio/RadioButton.jsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import ClassNames from 'classnames';
-import Ripple from '../ripple';
+import Radio from './Radio';
 import style from './style';
-import events from '../utils/events';
 
 class RadioButton extends React.Component {
   static propTypes = {
@@ -23,23 +22,10 @@ class RadioButton extends React.Component {
     disabled: false
   };
 
-  handleChange = (event) => {
-    if (!this.props.checked && this.props.onChange) {
-      this.props.onChange(event, this);
-    }
-  };
-
   handleClick = (event) => {
-    events.pauseEvent(event);
-    if (!this.props.disabled) this.handleChange(event);
-  };
-
-  handleInputClick = (event) => {
-    events.pauseEvent(event);
-  };
-
-  handleMouseDown = (event) => {
-    if (!this.props.disabled) this.refs.ripple.start(event);
+    const {checked, disabled, onChange} = this.props;
+    if (event.pageX !== 0 && event.pageY !== 0) this.blur();
+    if (!disabled && !checked && onChange) onChange(event, this);
   };
 
   blur () {
@@ -51,22 +37,19 @@ class RadioButton extends React.Component {
   }
 
   render () {
-    const labelClassName = ClassNames(style[this.props.disabled ? 'disabled' : 'field'], this.props.className);
-    const radioClassName = style[this.props.checked ? 'radio-checked' : 'radio'];
+    const className = ClassNames(style[this.props.disabled ? 'disabled' : 'field'], this.props.className);
+    const { onChange, ...others } = this.props;
 
     return (
-      <label className={labelClassName} onClick={this.handleClick}>
+      <label className={className}>
         <input
-          {...this.props}
-          ref='input'
+          {...others}
           className={style.input}
-          onChange={this.handleChange}
-          onClick={this.handleInputClick}
+          onClick={this.handleClick}
+          ref='input'
           type='radio'
         />
-        <span role='radio' className={radioClassName} onMouseDown={this.handleMouseDown}>
-          <Ripple ref='ripple' role='ripple' className={style.ripple} spread={3} centered />
-        </span>
+        <Radio checked={this.props.checked} disabled={this.props.disabled}/>
         {this.props.label ? <span className={style.text}>{this.props.label}</span> : null}
       </label>
     );
diff --git a/components/radio/style.scss b/components/radio/style.scss
index fcd206e19..ed0a9e879 100644
--- a/components/radio/style.scss
+++ b/components/radio/style.scss
@@ -28,15 +28,12 @@
   margin: 0;
   border: 0;
   opacity: 0;
-
   appearance: none;
-  &:focus:not(&:active) {
-    + .radio {
-      box-shadow: 0 0 0 $unit $radio-focus-color;
-    }
-    + .radio-checked {
-      box-shadow: 0 0 0 $unit $radio-checked-focus-color;
-    }
+  &:focus ~ .radio {
+    box-shadow: 0 0 0 $unit $radio-focus-color;
+  }
+  &:focus ~ .radio-checked {
+    box-shadow: 0 0 0 $unit $radio-checked-focus-color;
   }
 }
 

From b5606ebb15e9d11de58955c6b13e352293c746f9 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 7 Dec 2015 02:14:10 +0100
Subject: [PATCH 0258/1024] Use ripple decorator in switch

---
 components/radio/RadioButton.jsx |  1 +
 components/switch/Switch.jsx     | 43 +++++++++++---------------------
 components/switch/Thumb.jsx      | 13 ++++++++++
 components/switch/style.scss     |  2 +-
 4 files changed, 29 insertions(+), 30 deletions(-)
 create mode 100644 components/switch/Thumb.jsx

diff --git a/components/radio/RadioButton.jsx b/components/radio/RadioButton.jsx
index 56322a111..80bfb5929 100644
--- a/components/radio/RadioButton.jsx
+++ b/components/radio/RadioButton.jsx
@@ -46,6 +46,7 @@ class RadioButton extends React.Component {
           {...others}
           className={style.input}
           onClick={this.handleClick}
+          readOnly
           ref='input'
           type='radio'
         />
diff --git a/components/switch/Switch.jsx b/components/switch/Switch.jsx
index 09175b014..dd989605f 100644
--- a/components/switch/Switch.jsx
+++ b/components/switch/Switch.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import Ripple from '../ripple';
+import Thumb from './Thumb';
 import style from './style';
-import events from '../utils/events';
 
 class Switch extends React.Component {
   static propTypes = {
@@ -21,22 +20,13 @@ class Switch extends React.Component {
     disabled: false
   };
 
-  handleChange = (event) => {
-    events.pauseEvent(event);
-    if (this.props.onChange && !this.props.disabled) {
-      const value = !this.refs.input.checked;
-      this.props.onChange(value, event);
+  handleToggle = (event) => {
+    if (event.pageX !== 0 && event.pageY !== 0) this.blur();
+    if (!this.props.disabled && this.props.onChange) {
+      this.props.onChange(!this.props.checked, event);
     }
   };
 
-  handleInputClick = (event) => {
-    events.pauseEvent(event);
-  };
-
-  handleMouseDown = (event) => {
-    if (!this.props.disabled) this.refs.ripple.start(event);
-  };
-
   blur () {
     this.refs.input.blur();
   }
@@ -46,29 +36,24 @@ class Switch extends React.Component {
   }
 
   render () {
-    let labelClassName = style[this.props.disabled ? 'disabled' : 'field'];
+    let className = style[this.props.disabled ? 'disabled' : 'field'];
     const switchClassName = style[this.props.checked ? 'on' : 'off'];
-    if (this.props.className) labelClassName += ` ${this.props.className}`;
+    const { onChange, ...others } = this.props;
+    if (this.props.className) className += ` ${this.props.className}`;
 
     return (
-      <label
-        data-react-toolbox='checkbox'
-        className={labelClassName}
-        onClick={this.handleChange}
-      >
+      <label data-react-toolbox='checkbox' className={className}>
         <input
-          {...this.props}
-          ref='input'
+          {...others}
           checked={this.props.checked}
           className={style.input}
-          onChange={this.handleChange}
-          onClick={this.handleInputClick}
+          onClick={this.handleToggle}
+          readOnly
+          ref='input'
           type='checkbox'
         />
         <span role='switch' className={switchClassName}>
-          <span role='thumb' className={style.thumb} onMouseDown={this.handleMouseDown}>
-            <Ripple ref='ripple' role='ripple' className={style.ripple} spread={2.4} centered />
-          </span>
+          <Thumb disabled={this.props.disabled} />
         </span>
         {this.props.label ? <span className={style.text}>{this.props.label}</span> : null}
       </label>
diff --git a/components/switch/Thumb.jsx b/components/switch/Thumb.jsx
new file mode 100644
index 000000000..f58f115ad
--- /dev/null
+++ b/components/switch/Thumb.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import RippleDecorator from '../ripple/RippleDecorator';
+import style from './style';
+
+const Check = ({children, onMouseDown}) => (
+  <span role='thumb' className={style.thumb} onMouseDown={onMouseDown}>{children}</span>
+);
+
+export default RippleDecorator({
+  className: style.ripple,
+  spread: 2.6,
+  centered: true
+})(Check);
diff --git a/components/switch/style.scss b/components/switch/style.scss
index 4716a1bf7..066760f76 100644
--- a/components/switch/style.scss
+++ b/components/switch/style.scss
@@ -109,7 +109,7 @@
   .text {
     color: $switch-disabled-text-color;
   }
-  .switch-on, .switch-off {
+  .on, .off {
     cursor: auto;
     background: $switch-disabled-track-color;
   }

From 947c22d752afa0c75d8cdb237025bed21e88fc93 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 7 Dec 2015 02:25:58 +0100
Subject: [PATCH 0259/1024] Use ripple decorator in menus

---
 components/menu/MenuItem.jsx         | 40 +++++++++++-----------------
 components/menu/style.menu_item.scss |  2 +-
 2 files changed, 17 insertions(+), 25 deletions(-)

diff --git a/components/menu/MenuItem.jsx b/components/menu/MenuItem.jsx
index 221ab111c..85e3ea7c6 100644
--- a/components/menu/MenuItem.jsx
+++ b/components/menu/MenuItem.jsx
@@ -1,16 +1,17 @@
 import React from 'react';
 import FontIcon from '../font_icon';
-import Ripple from '../ripple';
+import ClassNames from 'classnames';
+import RippleDecorator from '../ripple/RippleDecorator';
 import style from './style.menu_item';
 
 class MenuItem extends React.Component {
   static propTypes = {
     caption: React.PropTypes.string.isRequired,
+    children: React.PropTypes.any,
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
     icon: React.PropTypes.string,
     onClick: React.PropTypes.func,
-    ripple: React.PropTypes.bool,
     selected: React.PropTypes.bool,
     shortcut: React.PropTypes.string
   };
@@ -18,7 +19,6 @@ class MenuItem extends React.Component {
   static defaultProps = {
     className: '',
     disabled: false,
-    ripple: false,
     selected: false
   };
 
@@ -28,32 +28,24 @@ class MenuItem extends React.Component {
     }
   };
 
-  handleMouseDown = (event) => {
-    if (this.props.ripple && !this.props.disabled) {
-      this.refs.ripple.start(event);
-    }
-  };
-
   render () {
-    let className = style.root;
-    if (this.props.selected) className += ` ${style.selected}`;
-    if (this.props.disabled) className += ` ${style.disabled}`;
-    if (this.props.className) className += ` ${this.props.className}`;
+    const {icon, caption, children, shortcut, selected, disabled, ...others} = this.props;
+    const className = ClassNames(style.root, {
+      [style.selected]: selected,
+      [style.disabled]: disabled
+    }, this.props.className);
 
     return (
-      <li
-        data-react-toolbox='menu-item'
-        className={className}
-        onClick={this.handleClick}
-        onMouseDown={this.handleMouseDown}
-      >
-        {this.props.icon ? <FontIcon value={this.props.icon} className={style.icon}/> : null}
-        <span className={style.caption}>{this.props.caption}</span>
-        {this.props.shortcut ? <small className={style.shortcut}>{this.props.shortcut}</small> : null}
-        {this.props.ripple ? <Ripple ref='ripple' className={style.ripple} spread={2.5} /> : null}
+      <li {...others} data-react-toolbox='menu-item' className={className} onClick={this.handleClick}>
+        {icon ? <FontIcon value={icon} className={style.icon}/> : null}
+        <span className={style.caption}>{caption}</span>
+        {shortcut ? <small className={style.shortcut}>{shortcut}</small> : null}
+        {children}
       </li>
     );
   }
 }
 
-export default MenuItem;
+export default RippleDecorator({
+  className: style.ripple
+})(MenuItem);
diff --git a/components/menu/style.menu_item.scss b/components/menu/style.menu_item.scss
index 7445b64b5..3e4a90af8 100644
--- a/components/menu/style.menu_item.scss
+++ b/components/menu/style.menu_item.scss
@@ -38,5 +38,5 @@
 }
 
 .ripple {
-  opacity: .1;
+  color: $color-text-secondary;
 }

From 1139fa6a62395eda8de89f2a62878b093a06fe2a Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 7 Dec 2015 02:34:12 +0100
Subject: [PATCH 0260/1024] Move Ripple main to Decorator approach

---
 components/button/Button.jsx          |   4 +-
 components/button/IconButton.jsx      |   4 +-
 components/checkbox/Check.jsx         |   4 +-
 components/list/ListItem.jsx          |   4 +-
 components/menu/MenuItem.jsx          |   4 +-
 components/radio/Radio.jsx            |   4 +-
 components/ripple/Ripple.jsx          | 178 ++++++++++++++++----------
 components/ripple/RippleDecorator.jsx | 122 ------------------
 components/switch/Thumb.jsx           |   4 +-
 9 files changed, 122 insertions(+), 206 deletions(-)
 delete mode 100644 components/ripple/RippleDecorator.jsx

diff --git a/components/button/Button.jsx b/components/button/Button.jsx
index 67395532e..9ab117a53 100644
--- a/components/button/Button.jsx
+++ b/components/button/Button.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ClassNames from 'classnames';
 import FontIcon from '../font_icon';
-import RippleDecorator from '../ripple/RippleDecorator';
+import Ripple from '../ripple';
 import style from './style';
 
 class Button extends React.Component {
@@ -66,4 +66,4 @@ class Button extends React.Component {
   }
 }
 
-export default RippleDecorator({centered: false})(Button);
+export default Ripple({centered: false})(Button);
diff --git a/components/button/IconButton.jsx b/components/button/IconButton.jsx
index fd86d9f26..9c30ff939 100644
--- a/components/button/IconButton.jsx
+++ b/components/button/IconButton.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ClassNames from 'classnames';
 import FontIcon from '../font_icon';
-import RippleDecorator from '../ripple/RippleDecorator';
+import Ripple from '../ripple';
 import style from './style';
 
 class IconButton extends React.Component {
@@ -50,4 +50,4 @@ class IconButton extends React.Component {
   }
 }
 
-export default RippleDecorator({centered: true})(IconButton);
+export default Ripple({centered: true})(IconButton);
diff --git a/components/checkbox/Check.jsx b/components/checkbox/Check.jsx
index a0f234f58..37b631c34 100644
--- a/components/checkbox/Check.jsx
+++ b/components/checkbox/Check.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ClassNames from 'classnames';
-import RippleDecorator from '../ripple/RippleDecorator';
+import Ripple from '../ripple';
 import style from './style';
 
 const Check = ({checked, children, onMouseDown}) => {
@@ -11,7 +11,7 @@ const Check = ({checked, children, onMouseDown}) => {
   return <div data-role='checkbox' onMouseDown={onMouseDown} className={className}>{children}</div>;
 };
 
-export default RippleDecorator({
+export default Ripple({
   className: style.ripple,
   spread: 2.6,
   centered: true
diff --git a/components/list/ListItem.jsx b/components/list/ListItem.jsx
index a5ae8c3b8..65a908133 100644
--- a/components/list/ListItem.jsx
+++ b/components/list/ListItem.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import ClassNames from 'classnames';
 import FontIcon from '../font_icon';
 import ListItemContent from './ListItemContent';
-import RippleDecorator from '../ripple/RippleDecorator';
+import Ripple from '../ripple';
 import style from './style';
 
 class ListItem extends React.Component {
@@ -60,7 +60,7 @@ class ListItem extends React.Component {
   }
 }
 
-export default RippleDecorator({
+export default Ripple({
   className: style.ripple,
   centered: false
 })(ListItem);
diff --git a/components/menu/MenuItem.jsx b/components/menu/MenuItem.jsx
index 85e3ea7c6..f6b6e2cd4 100644
--- a/components/menu/MenuItem.jsx
+++ b/components/menu/MenuItem.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import FontIcon from '../font_icon';
 import ClassNames from 'classnames';
-import RippleDecorator from '../ripple/RippleDecorator';
+import Ripple from '../ripple';
 import style from './style.menu_item';
 
 class MenuItem extends React.Component {
@@ -46,6 +46,6 @@ class MenuItem extends React.Component {
   }
 }
 
-export default RippleDecorator({
+export default Ripple({
   className: style.ripple
 })(MenuItem);
diff --git a/components/radio/Radio.jsx b/components/radio/Radio.jsx
index 3b0e5c268..4374993b4 100644
--- a/components/radio/Radio.jsx
+++ b/components/radio/Radio.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import RippleDecorator from '../ripple/RippleDecorator';
+import Ripple from '../ripple';
 import style from './style';
 
 const Radio = ({checked, children, onMouseDown}) => {
@@ -7,7 +7,7 @@ const Radio = ({checked, children, onMouseDown}) => {
   return <div data-role='radio' onMouseDown={onMouseDown} className={className}>{children}</div>;
 };
 
-export default RippleDecorator({
+export default Ripple({
   className: style.ripple,
   spread: 2.6,
   centered: true
diff --git a/components/ripple/Ripple.jsx b/components/ripple/Ripple.jsx
index 37f89ef8c..b869bcbe8 100644
--- a/components/ripple/Ripple.jsx
+++ b/components/ripple/Ripple.jsx
@@ -1,84 +1,122 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import ClassNames from 'classnames';
-import prefixer from '../utils/prefixer';
 import style from './style';
+import prefixer from '../utils/prefixer';
 
-class Ripple extends React.Component {
-  static propTypes = {
-    centered: React.PropTypes.bool,
-    className: React.PropTypes.string,
-    loading: React.PropTypes.bool,
-    spread: React.PropTypes.number
-  };
+const defaults = {
+  centered: false,
+  className: '',
+  spread: 2
+};
 
-  static defaultProps = {
-    centered: false,
-    className: '',
-    loading: false,
-    spread: 2
-  };
+const Ripple = (options = {}) => {
+  const {
+    centered: defaultCentered,
+    className: defaultClassName,
+    spread: defaultSpread
+  } = {...defaults, ...options};
 
-  state = {
-    active: false,
-    left: null,
-    restarting: false,
-    top: null,
-    width: null
-  };
+  return ComposedComponent => {
+    return class RippledComponent extends React.Component {
+      static propTypes = {
+        children: React.PropTypes.any,
+        disabled: React.PropTypes.bool,
+        ripple: React.PropTypes.bool,
+        rippleCentered: React.PropTypes.bool,
+        rippleClassName: React.PropTypes.string,
+        rippleSpread: React.PropTypes.number
+      };
 
-  handleEnd = () => {
-    document.removeEventListener(this.touch ? 'touchend' : 'mouseup', this.handleEnd);
-    this.setState({active: false});
-  };
+      static defaultProps = {
+        disabled: false,
+        ripple: true,
+        rippleCentered: defaultCentered,
+        rippleClassName: defaultClassName,
+        rippleSpread: defaultSpread
+      };
 
-  start = ({pageX, pageY}, touch = false) => {
-    if (!this._isTouchRippleReceivingMouseEvent(touch)) {
-      this.touch = touch;
-      document.addEventListener(this.touch ? 'touchend' : 'mouseup', this.handleEnd);
-      const {top, left, width} = this._getDescriptor(pageX, pageY);
-      this.setState({active: false, restarting: true, top, left, width}, () => {
-        this.refs.ripple.offsetWidth;  //eslint-disable-line no-unused-expressions
-        this.setState({active: true, restarting: false});
-      });
-    }
-  };
+      state = {
+        active: false,
+        left: null,
+        restarting: false,
+        top: null,
+        width: null
+      };
+
+      handleEnd = () => {
+        document.removeEventListener(this.touch ? 'touchend' : 'mouseup', this.handleEnd);
+        this.setState({active: false});
+      };
 
-  _isTouchRippleReceivingMouseEvent (touch) {
-    return this.touch && !touch;
-  }
+      start = ({pageX, pageY}, touch = false) => {
+        if (!this._isTouchRippleReceivingMouseEvent(touch)) {
+          this.touch = touch;
+          document.addEventListener(this.touch ? 'touchend' : 'mouseup', this.handleEnd);
+          const {top, left, width} = this._getDescriptor(pageX, pageY);
+          this.setState({active: false, restarting: true, top, left, width}, () => {
+            this.refs.ripple.offsetWidth;  //eslint-disable-line no-unused-expressions
+            this.setState({active: true, restarting: false});
+          });
+        }
+      };
 
-  _getDescriptor (pageX, pageY) {
-    const {left, top, height, width} = ReactDOM.findDOMNode(this).getBoundingClientRect();
-    return {
-      left: this.props.centered ? 0 : pageX - left - width / 2 - window.scrollX,
-      top: this.props.centered ? 0 : pageY - top - height / 2 - window.scrollY,
-      width: width * this.props.spread
+      _isTouchRippleReceivingMouseEvent (touch) {
+        return this.touch && !touch;
+      }
+
+      _getDescriptor (pageX, pageY) {
+        const {left, top, height, width} = ReactDOM.findDOMNode(this).getBoundingClientRect();
+        const {rippleCentered: centered, rippleSpread: spread} = this.props;
+        return {
+          left: centered ? 0 : pageX - left - width / 2 - window.scrollX,
+          top: centered ? 0 : pageY - top - height / 2 - window.scrollY,
+          width: width * spread
+        };
+      }
+
+      handleMouseDown = (event) => {
+        if (!this.props.disabled) this.start(event);
+        if (this.props.onMouseDown) this.props.onMouseDown(event);
+      };
+
+      render () {
+        if (!this.props.ripple) {
+          return <ComposedComponent {...this.props} />;
+        } else {
+          const {
+            children,
+            ripple,
+            rippleClassName: className,
+            rippleCentered: centered,
+            rippleSpread: spread,
+            ...other
+          } = this.props;
+
+          const rippleClassName = ClassNames(style.normal, {
+            [style.active]: this.state.active,
+            [style.restarting]: this.state.restarting
+          }, className);
+
+          const { left, top, width } = this.state;
+          const scale = this.state.restarting ? 0 : 1;
+          const rippleStyle = prefixer({
+              transform: `translate3d(${-width / 2 + left}px, ${-width / 2 + top}px, 0) scale(${scale})`
+            }, {width, height: width});
+
+
+          return (
+            <ComposedComponent {...other} onMouseDown={this.handleMouseDown}>
+              {children ? children : null}
+              <span data-react-toolbox='ripple' className={style.wrapper}>
+                <span ref='ripple' role='ripple' className={rippleClassName} style={rippleStyle} />
+              </span>
+            </ComposedComponent>
+          );
+        }
+      }
     };
-  }
-
-  render () {
-    const { left, top, width } = this.state;
-    const scale = this.state.restarting ? 0 : 1;
-    let rippleStyle = {width, height: width};
-
-    if (!this.props.loading) {
-      rippleStyle = prefixer({
-        transform: `translate3d(${-width / 2 + left}px, ${-width / 2 + top}px, 0) scale(${scale})`
-      }, rippleStyle);
-    }
-
-    const className = ClassNames(style[this.props.loading ? 'loading' : 'normal'], {
-      [style.active]: this.state.active,
-      [style.restarting]: this.state.restarting
-    }, this.props.className);
-
-    return (
-      <span data-react-toolbox='ripple' className={style.wrapper}>
-        <span ref='ripple' role='ripple' className={className} style={rippleStyle} />
-      </span>
-    );
-  }
-}
+  };
+};
 
 export default Ripple;
diff --git a/components/ripple/RippleDecorator.jsx b/components/ripple/RippleDecorator.jsx
deleted file mode 100644
index b869bcbe8..000000000
--- a/components/ripple/RippleDecorator.jsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import ClassNames from 'classnames';
-import style from './style';
-import prefixer from '../utils/prefixer';
-
-const defaults = {
-  centered: false,
-  className: '',
-  spread: 2
-};
-
-const Ripple = (options = {}) => {
-  const {
-    centered: defaultCentered,
-    className: defaultClassName,
-    spread: defaultSpread
-  } = {...defaults, ...options};
-
-  return ComposedComponent => {
-    return class RippledComponent extends React.Component {
-      static propTypes = {
-        children: React.PropTypes.any,
-        disabled: React.PropTypes.bool,
-        ripple: React.PropTypes.bool,
-        rippleCentered: React.PropTypes.bool,
-        rippleClassName: React.PropTypes.string,
-        rippleSpread: React.PropTypes.number
-      };
-
-      static defaultProps = {
-        disabled: false,
-        ripple: true,
-        rippleCentered: defaultCentered,
-        rippleClassName: defaultClassName,
-        rippleSpread: defaultSpread
-      };
-
-      state = {
-        active: false,
-        left: null,
-        restarting: false,
-        top: null,
-        width: null
-      };
-
-      handleEnd = () => {
-        document.removeEventListener(this.touch ? 'touchend' : 'mouseup', this.handleEnd);
-        this.setState({active: false});
-      };
-
-      start = ({pageX, pageY}, touch = false) => {
-        if (!this._isTouchRippleReceivingMouseEvent(touch)) {
-          this.touch = touch;
-          document.addEventListener(this.touch ? 'touchend' : 'mouseup', this.handleEnd);
-          const {top, left, width} = this._getDescriptor(pageX, pageY);
-          this.setState({active: false, restarting: true, top, left, width}, () => {
-            this.refs.ripple.offsetWidth;  //eslint-disable-line no-unused-expressions
-            this.setState({active: true, restarting: false});
-          });
-        }
-      };
-
-      _isTouchRippleReceivingMouseEvent (touch) {
-        return this.touch && !touch;
-      }
-
-      _getDescriptor (pageX, pageY) {
-        const {left, top, height, width} = ReactDOM.findDOMNode(this).getBoundingClientRect();
-        const {rippleCentered: centered, rippleSpread: spread} = this.props;
-        return {
-          left: centered ? 0 : pageX - left - width / 2 - window.scrollX,
-          top: centered ? 0 : pageY - top - height / 2 - window.scrollY,
-          width: width * spread
-        };
-      }
-
-      handleMouseDown = (event) => {
-        if (!this.props.disabled) this.start(event);
-        if (this.props.onMouseDown) this.props.onMouseDown(event);
-      };
-
-      render () {
-        if (!this.props.ripple) {
-          return <ComposedComponent {...this.props} />;
-        } else {
-          const {
-            children,
-            ripple,
-            rippleClassName: className,
-            rippleCentered: centered,
-            rippleSpread: spread,
-            ...other
-          } = this.props;
-
-          const rippleClassName = ClassNames(style.normal, {
-            [style.active]: this.state.active,
-            [style.restarting]: this.state.restarting
-          }, className);
-
-          const { left, top, width } = this.state;
-          const scale = this.state.restarting ? 0 : 1;
-          const rippleStyle = prefixer({
-              transform: `translate3d(${-width / 2 + left}px, ${-width / 2 + top}px, 0) scale(${scale})`
-            }, {width, height: width});
-
-
-          return (
-            <ComposedComponent {...other} onMouseDown={this.handleMouseDown}>
-              {children ? children : null}
-              <span data-react-toolbox='ripple' className={style.wrapper}>
-                <span ref='ripple' role='ripple' className={rippleClassName} style={rippleStyle} />
-              </span>
-            </ComposedComponent>
-          );
-        }
-      }
-    };
-  };
-};
-
-export default Ripple;
diff --git a/components/switch/Thumb.jsx b/components/switch/Thumb.jsx
index f58f115ad..514aee39a 100644
--- a/components/switch/Thumb.jsx
+++ b/components/switch/Thumb.jsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import RippleDecorator from '../ripple/RippleDecorator';
+import Ripple from '../ripple';
 import style from './style';
 
 const Check = ({children, onMouseDown}) => (
   <span role='thumb' className={style.thumb} onMouseDown={onMouseDown}>{children}</span>
 );
 
-export default RippleDecorator({
+export default Ripple({
   className: style.ripple,
   spread: 2.6,
   centered: true

From b63d9da0c27aed4778419988d774d999aa974160 Mon Sep 17 00:00:00 2001
From: aeickhoff <anselm.eickhoff@gmail.com>
Date: Mon, 7 Dec 2015 16:32:05 +0100
Subject: [PATCH 0261/1024] Prevent avatar from getting squeezed

If caption or legend of a list item with an avatar are very long it got squeezed, because it was allowed to shrink in its flex container.
---
 components/list/style.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/list/style.scss b/components/list/style.scss
index 63548791e..6efc0b6a3 100644
--- a/components/list/style.scss
+++ b/components/list/style.scss
@@ -102,6 +102,7 @@
 
 .avatar {
   display: flex;
+  flex: 0 0 auto;
   width: $list-item-avatar-height;
   height: $list-item-avatar-height;
   margin: $list-item-avatar-margin $list-horizontal-padding $list-item-avatar-margin 0;

From 9e3ad3b88ce20e6e71f4fc012b0249309db2e6bf Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 7 Dec 2015 17:27:01 +0100
Subject: [PATCH 0262/1024] Fixes #182

---
 components/list/readme.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/list/readme.md b/components/list/readme.md
index 543b883a0..032466b8a 100644
--- a/components/list/readme.md
+++ b/components/list/readme.md
@@ -59,9 +59,11 @@ Represents a list item that can have avatar, icons, title and subtitle, etc. It'
 | `disabled`   | `String`    |  `false`    | If true, the item is displayed as disabled and it's not clickable.| 
 | `leftIcon`    | `String`       |    | A string key of a font icon to display an icon in the left side of the item. |
 | `legend`   | `String`      |       | Secondary text to display under the caption.|
+| `onClick`   | `Function`      |       | Callback the is invoked when the item is clicked if it's not disabled. |
 | `rightIcon`  | `String`      |       | The same as the `leftIcon` but in this case the icon is displayed in the right side.|
 | `ripple` | `Boolean`      |   `false`  | If true, the item displays a ripple effect on click. By default it's inherited from the parent element.|
 | `selectable` | `Boolean`      |   `false`    | If true, the elements in the list will display a hover effect and a pointer cursor. Inherited from the parent |
+| `to` | `String`      |       | In case you want to provide the item as a link, you can pass this property to specify the href. |
 
 ## List Checkbox
 

From 1951b641b8cf860bd646b16d95ee6bc8d47502c2 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 7 Dec 2015 17:27:48 +0100
Subject: [PATCH 0263/1024] Use immutable objects in input and checkbox specs

---
 spec/components/checkbox.jsx | 2 +-
 spec/components/input.jsx    | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/spec/components/checkbox.jsx b/spec/components/checkbox.jsx
index da39fdd58..7c88376db 100644
--- a/spec/components/checkbox.jsx
+++ b/spec/components/checkbox.jsx
@@ -9,7 +9,7 @@ class CheckboxTest extends React.Component {
   };
 
   handleChange = (field, value) => {
-    this.setState({ [field]: value });
+    this.setState({...this.state, [field]: value});
   };
 
   handleFocus = () => {
diff --git a/spec/components/input.jsx b/spec/components/input.jsx
index 8e6fd1d17..22f83aefe 100644
--- a/spec/components/input.jsx
+++ b/spec/components/input.jsx
@@ -9,9 +9,7 @@ class InputTest extends React.Component {
   };
 
   handleChange = (name, value) => {
-    const newState = {};
-    newState[[name]] = value;
-    this.setState(newState);
+    this.setState({...this.state, [name]: value});
   };
 
   render () {

From 758975c443f7a03421d409f569c72e4857d2bdeb Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 9 Dec 2015 14:08:46 +0100
Subject: [PATCH 0264/1024] 0.13.4 release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index dd901fab0..17a49e879 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-toolbox",
-  "version": "0.13.3",
+  "version": "0.13.4",
   "homepage": "http://www.react-toolbox.com/",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "author": "React Toolbox Team (http://github.com/react-toolbox)",

From 312ec91fcc26dc32123346432576c046c4ce0f60 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Fri, 11 Dec 2015 18:01:24 +0100
Subject: [PATCH 0265/1024] Remove opacity prop from Overlay and add invisible.
 Fixes #183, #178

---
 components/_globals.scss         |  2 --
 components/drawer/_config.scss   |  1 -
 components/overlay/Overlay.jsx   | 25 +++++++++----------------
 components/overlay/_config.scss  |  1 +
 components/overlay/style.scss    |  6 ++++++
 components/snackbar/Snackbar.jsx |  2 +-
 6 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/components/_globals.scss b/components/_globals.scss
index 5ae5fce78..8dbaf1234 100644
--- a/components/_globals.scss
+++ b/components/_globals.scss
@@ -3,8 +3,6 @@ $color-divider: $palette-grey-200 !default;
 $color-background: $color-white !default;
 $color-text: $palette-grey-900 !default;
 $color-text-secondary: $palette-grey-600 !default;
-$color-overlay: $color-black !default;
-$color-overlay-opacity: 0.5 !default;
 
 $color-primary: $palette-indigo-500 !default;
 $color-primary-dark: $palette-indigo-700 !default;
diff --git a/components/drawer/_config.scss b/components/drawer/_config.scss
index 5a164bac4..220125048 100644
--- a/components/drawer/_config.scss
+++ b/components/drawer/_config.scss
@@ -1,5 +1,4 @@
 $drawer-background-color: $palette-grey-50 !default;
 $drawer-border-color: $palette-grey-300 !default;
-$drawer-overlay-color: $color-overlay;
 $drawer-text-color: $palette-grey-800 !default;
 $drawer-width: 24 * $unit;
diff --git a/components/overlay/Overlay.jsx b/components/overlay/Overlay.jsx
index 09c9cf124..d00bef8ee 100644
--- a/components/overlay/Overlay.jsx
+++ b/components/overlay/Overlay.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import ClassNames from 'classnames';
 import style from './style';
 
 class Overlay extends React.Component {
@@ -7,12 +8,12 @@ class Overlay extends React.Component {
     active: React.PropTypes.bool,
     children: React.PropTypes.node,
     className: React.PropTypes.string,
-    onClick: React.PropTypes.func,
-    opacity: React.PropTypes.number
+    invisible: React.PropTypes.bool,
+    onClick: React.PropTypes.func
   };
 
   static defaultProps = {
-    opacity: 0.5
+    invisible: false
   };
 
   componentDidMount () {
@@ -33,22 +34,14 @@ class Overlay extends React.Component {
   }
 
   handleRender () {
-    let className = style.root;
-    const overlayStyle = {};
-
-    if (this.props.active) {
-      className += ` ${style.active}`;
-      overlayStyle.opacity = this.props.opacity;
-    }
-    if (this.props.className) className += ` ${className}`;
+    const className = ClassNames(style.root, {
+      [style.active]: this.props.active,
+      [style.invisible]: this.props.invisible
+    }, this.props.className);
 
     ReactDOM.render(
       <div className={className}>
-        <div
-          className={style.overlay}
-          onClick={this.props.onClick}
-          style={overlayStyle}
-        />
+        <div className={style.overlay} onClick={this.props.onClick} />
         {this.props.children}
       </div>
     , this.node);
diff --git a/components/overlay/_config.scss b/components/overlay/_config.scss
index fd75dac5e..ccba4d3c7 100644
--- a/components/overlay/_config.scss
+++ b/components/overlay/_config.scss
@@ -1 +1,2 @@
 $overlay-color: $color-black !default;
+$overlay-opacity: .6 !default;
diff --git a/components/overlay/style.scss b/components/overlay/style.scss
index 59e940afd..60395fb7f 100644
--- a/components/overlay/style.scss
+++ b/components/overlay/style.scss
@@ -14,6 +14,9 @@
   align-items: center;
   justify-content: center;
   pointer-events: none;
+  &.invisible > *:not(.overlay) {
+    pointer-events: all;
+  }
 }
 
 .overlay {
@@ -31,4 +34,7 @@
 
 .active {
   pointer-events: all;
+  > .overlay {
+    opacity: $overlay-opacity;
+  }
 }
diff --git a/components/snackbar/Snackbar.jsx b/components/snackbar/Snackbar.jsx
index 1b9536d97..a7d727db7 100644
--- a/components/snackbar/Snackbar.jsx
+++ b/components/snackbar/Snackbar.jsx
@@ -33,7 +33,7 @@ class Snackbar extends React.Component {
     }, this.props.className);
 
     return (
-      <Overlay active={active} opacity={0}>
+      <Overlay invisible>
         <div data-react-toolbox='snackbar' className={className}>
           {icon ? <FontIcon value={icon} className={style.icon} /> : null}
           <span className={style.label}>{label}</span>

From b963be79eafb71d985327d41737ea6413dca7186 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Fri, 11 Dec 2015 18:53:37 +0100
Subject: [PATCH 0266/1024] Better styles for navigation. Fixes #205

---
 components/link/Link.jsx                      |  7 +++-
 components/navigation/_config.scss            |  3 +-
 components/navigation/readme.md               | 13 +++---
 components/navigation/style.scss              | 42 ++++++-------------
 .../modules/examples/navigation_example_1.txt | 10 ++---
 spec/components/navigation.jsx                | 34 +++++++--------
 6 files changed, 45 insertions(+), 64 deletions(-)

diff --git a/components/link/Link.jsx b/components/link/Link.jsx
index f0a2a1194..1b2199376 100644
--- a/components/link/Link.jsx
+++ b/components/link/Link.jsx
@@ -4,7 +4,10 @@ import style from './style';
 import FontIcon from '../font_icon';
 
 const Link = (props) => {
-  const className = ClassNames(style.root, props.className);
+  const className = ClassNames(style.root, {
+    [style.active]: props.active
+  }, props.className);
+
   return (
     <a {...props} data-react-toolbox='link'className={className}>
       {props.icon ? <FontIcon className={style.icon} value={props.icon} /> : null}
@@ -15,6 +18,7 @@ const Link = (props) => {
 };
 
 Link.propTypes = {
+  active: React.PropTypes.bool,
   className: React.PropTypes.string,
   count: React.PropTypes.number,
   icon: React.PropTypes.string,
@@ -22,6 +26,7 @@ Link.propTypes = {
 };
 
 Link.defaultProps = {
+  active: false,
   className: ''
 };
 
diff --git a/components/navigation/_config.scss b/components/navigation/_config.scss
index 0375d1567..6b654ac73 100644
--- a/components/navigation/_config.scss
+++ b/components/navigation/_config.scss
@@ -1,3 +1,2 @@
-$navigation-space: $unit;
+$navigation-space: $unit !default;
 $navigation-color: $color-black !default;
-$navigation-background: $color-white !default;
diff --git a/components/navigation/readme.md b/components/navigation/readme.md
index 72c0b9df8..d8e8f5439 100644
--- a/components/navigation/readme.md
+++ b/components/navigation/readme.md
@@ -5,21 +5,20 @@ This component is intended to be a common wrapper for a group of links or button
 <!-- example -->
 ```jsx
 import Navigation from 'react-toolbox/lib/navigation';
-
-const links = [
-  { href: 'http://', icon: 'person', label: 'Profile' },
-  { href: 'http://', icon: 'inbox', label: 'Inbox'}
-];
+import Link from 'react-toolbox/lib/link';
 
 const actions = [
-  { label: 'Alarm', raised: true, icon: 'access-alarm'},
+  { label: 'Alarm', raised: true, icon: 'access_alarm'},
   { label: 'Location', raised: true, accent: true, icon: 'room'}
 ];
 
 const NavigationTest = () => (
   <div>
     <Navigation type='horizontal' actions={actions} />
-    <Navigation type='horizontal' routes={links} />
+    <Navigation type='vertical'>
+      <Link href='http://' label='Inbox' icon='inbox' />
+      <Link href='http://' active label='Profile' icon='person' />
+    </Navigation>
   </div>
 );
 ```
diff --git a/components/navigation/style.scss b/components/navigation/style.scss
index 867d0c32d..1d8bf2e13 100644
--- a/components/navigation/style.scss
+++ b/components/navigation/style.scss
@@ -2,41 +2,23 @@
 @import "http://github.com/config";
 
 .horizontal {
-  padding-top: $navigation-space;
-  padding-bottom: $navigation-space;
-
-  > .link, > .button {
+  > [data-react-toolbox='button'], > [data-react-toolbox='link'] {
     display: inline-block;
-    margin-right: $navigation-space;
-    font-size: $font-size-normal;
-    font-weight: $font-weight-normal;
-    color: $navigation-color;
-    > small {
-      padding: 0 $navigation-space;
-      margin-left: $navigation-space;
-      font-weight: $font-weight-bold;
-      color: $navigation-color;
-      background-color: $navigation-background;
-      border-radius: $navigation-space;
-    }
+    margin: 0 $navigation-space / 2;
   }
 }
 
 .vertical {
-  padding-top: $navigation-space;
-  padding-bottom: $navigation-space;
-
-  > .link, > .button {
+  > [data-react-toolbox='button'], > [data-react-toolbox='link'] {
     display: block;
-    padding: 0 $navigation-space;
-    line-height: $unit;
-    transition-property: box-shadow, opacity;
-    &.active {
-      box-shadow: inset 10 * $unit 0 $navigation-background;
-    }
-    > small {
-      float: right;
-      opacity: .5;
-    }
+    margin: $navigation-space / 2;
+  }
+}
+
+.vertical, .horizontal {
+  padding: $navigation-space / 2;
+
+  > [data-react-toolbox='link'] {
+    color: $navigation-color;
   }
 }
diff --git a/docs/app/components/layout/main/modules/examples/navigation_example_1.txt b/docs/app/components/layout/main/modules/examples/navigation_example_1.txt
index 5200bf532..c521db973 100644
--- a/docs/app/components/layout/main/modules/examples/navigation_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/navigation_example_1.txt
@@ -1,8 +1,3 @@
-const links = [
-  { href: '#/components/navigation', icon: 'person', label: 'Profile' },
-    { href: '#/components/navigation', icon: 'inbox', label: 'Inbox'}
-];
-
 const actions = [
   { label: 'Alarm', raised: true, icon: 'access_alarm'},
   { label: 'Location', raised: true, accent: true, icon: 'room'}
@@ -11,7 +6,10 @@ const actions = [
 const NavigationTest = () => (
   <div>
     <Navigation type='horizontal' actions={actions} />
-    <Navigation type='horizontal' routes={links} />
+    <Navigation type='vertical'>
+      <Link href='http://' label='Inbox' icon='inbox' />
+      <Link href='http://' active label='Profile' icon='person' />
+    </Navigation>
   </div>
 );
 
diff --git a/spec/components/navigation.jsx b/spec/components/navigation.jsx
index 50e2462da..8a7def39e 100644
--- a/spec/components/navigation.jsx
+++ b/spec/components/navigation.jsx
@@ -1,24 +1,22 @@
 import React from 'react';
 import Navigation from '../../components/navigation';
+import Link from '../../components/link';
 
-class NavigationTest extends React.Component {
-  state = {
-    routes: [
-      { label: 'Github', route: 'http://www.github.com/', icon: 'bookmark' },
-      { label: 'Mail', route: 'http://mail.google.com/', icon: 'inbox' }
-    ]
-  };
+const actions = [
+  { label: 'Alarm', raised: true, icon: 'access_alarm'},
+  { label: 'Location', raised: true, accent: true, icon: 'room'}
+];
 
-  render () {
-    return (
-      <section>
-        <h5>Navigation</h5>
-        <p>lorem ipsum...</p>
-
-        <Navigation type='vertical' routes={this.state.routes} />
-      </section>
-    );
-  }
-}
+const NavigationTest = () => (
+  <section>
+    <h5>Navigation</h5>
+    <p>lorem ipsum...</p>
+    <Navigation type='horizontal' actions={actions} />
+    <Navigation type='vertical'>
+      <Link href='http://' label='Inbox' icon='inbox' />
+      <Link href='http://' active label='Profile' icon='person' />
+    </Navigation>
+  </section>
+);
 
 export default NavigationTest;

From 85ff089e460aa6aa164780e9e468dde2337aa406 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Fri, 11 Dec 2015 19:11:55 +0100
Subject: [PATCH 0267/1024] Update switch examples

---
 components/switch/readme.md                   | 22 +++++++++----------
 .../modules/examples/switch_example_1.txt     | 22 +++++++++----------
 spec/components/switch.jsx                    | 22 +++++++++----------
 3 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/components/switch/readme.md b/components/switch/readme.md
index 5f05e999e..8d1cc9053 100644
--- a/components/switch/readme.md
+++ b/components/switch/readme.md
@@ -8,33 +8,33 @@ import Switch from 'react-toolbox/lib/switch';
 
 class SwitchTest extends React.Component {
   state = {
-    switch: [true, false, false]
+    switch_1: true,
+    switch_2: false,
+    switch_3: true
   };
 
-  handleChange = (index, value) => {
-    const state = this.state.switch;
-    state[index] = value;
-    this.setState({switch: state});
+  handleChange = (field, value) => {
+    this.setState({...this.state, [field]: value});
   };
 
   render () {
     return (
       <section>
         <Switch
-          checked={this.state.switch[0]}
+          checked={this.state.switch_1}
           label="Push notifications"
-          onChange={this.handleChange.bind(this, 0)}
+          onChange={this.handleChange.bind(this, 'switch_1')}
         />
         <Switch
-          checked={this.state.switch[1]}
+          checked={this.state.switch_2}
           label="Mail notifications"
-          onChange={this.handleChange.bind(this, 1)}
+          onChange={this.handleChange.bind(this, 'switch_2')}
         />
         <Switch
-          checked={this.state.switch[2]}
+          checked={this.state.switch_3}
           disabled
           label="Nothing, thanks"
-          onChange={this.handleChange.bind(this, 2)}
+          onChange={this.handleChange.bind(this, 'switch_3')}
         />
       </section>
     );
diff --git a/docs/app/components/layout/main/modules/examples/switch_example_1.txt b/docs/app/components/layout/main/modules/examples/switch_example_1.txt
index fd99457ae..5f7126fcf 100644
--- a/docs/app/components/layout/main/modules/examples/switch_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/switch_example_1.txt
@@ -1,32 +1,32 @@
 class SwitchTest extends React.Component {
   state = {
-    switch: [true, false, false]
+    switch_1: true,
+    switch_2: false,
+    switch_3: true
   };
 
-  handleChange = (index, value) => {
-    const state = this.state.switch;
-    state[index] = value;
-    this.setState({switch: state});
+  handleChange = (field, value) => {
+    this.setState({...this.state, [field]: value});
   };
 
   render () {
     return (
       <section>
         <Switch
-          checked={this.state.switch[0]}
+          checked={this.state.switch_1}
           label="Push notifications"
-          onChange={this.handleChange.bind(this, 0)}
+          onChange={this.handleChange.bind(this, 'switch_1')}
         />
         <Switch
-          checked={this.state.switch[1]}
+          checked={this.state.switch_2}
           label="Mail notifications"
-          onChange={this.handleChange.bind(this, 1)}
+          onChange={this.handleChange.bind(this, 'switch_2')}
         />
         <Switch
-          checked={this.state.switch[2]}
+          checked={this.state.switch_3}
           disabled
           label="Nothing, thanks"
-          onChange={this.handleChange.bind(this, 2)}
+          onChange={this.handleChange.bind(this, 'switch_3')}
         />
       </section>
     );
diff --git a/spec/components/switch.jsx b/spec/components/switch.jsx
index b76688e05..7a8a23f93 100644
--- a/spec/components/switch.jsx
+++ b/spec/components/switch.jsx
@@ -3,13 +3,13 @@ import Switch from '../../components/switch';
 
 class SwitchTest extends React.Component {
   state = {
-    switch: [true, false, false]
+    switch_1: true,
+    switch_2: false,
+    switch_3: true
   };
 
-  handleChange = (index, value) => {
-    const state = this.state.switch;
-    state[index] = value;
-    this.setState({switch: state});
+  handleChange = (field, value) => {
+    this.setState({...this.state, [field]: value});
   };
 
   render () {
@@ -18,20 +18,20 @@ class SwitchTest extends React.Component {
         <h5>Switches</h5>
         <p style={{marginBottom: '10px'}}>This is more beautiful than the old fashion checkboxes...</p>
         <Switch
-          checked={this.state.switch[0]}
+          checked={this.state.switch_1}
           label="Push notifications"
-          onChange={this.handleChange.bind(this, 0)}
+          onChange={this.handleChange.bind(this, 'switch_1')}
         />
         <Switch
-          checked={this.state.switch[1]}
+          checked={this.state.switch_2}
           label="Mail notifications"
-          onChange={this.handleChange.bind(this, 1)}
+          onChange={this.handleChange.bind(this, 'switch_2')}
         />
         <Switch
-          checked={this.state.switch[2]}
+          checked={this.state.switch_3}
           disabled
           label="Nothing, thanks"
-          onChange={this.handleChange.bind(this, 2)}
+          onChange={this.handleChange.bind(this, 'switch_3')}
         />
       </section>
     );

From a88868a5fad1b047b2eadab55510069185303b21 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Fri, 11 Dec 2015 19:20:58 +0100
Subject: [PATCH 0268/1024] Fixes #203

---
 components/button/Button.jsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/components/button/Button.jsx b/components/button/Button.jsx
index 9ab117a53..8d9f3b472 100644
--- a/components/button/Button.jsx
+++ b/components/button/Button.jsx
@@ -17,6 +17,8 @@ class Button extends React.Component {
     inverse: React.PropTypes.bool,
     label: React.PropTypes.string,
     mini: React.PropTypes.bool,
+    onMouseLeave: React.PropTypes.func,
+    onMouseUp: React.PropTypes.func,
     primary: React.PropTypes.bool,
     raised: React.PropTypes.bool,
     type: React.PropTypes.string
@@ -34,6 +36,12 @@ class Button extends React.Component {
 
   handleMouseUp = () => {
     this.refs.button.blur();
+    if (this.props.onMouseUp) this.props.onMouseUp();
+  };
+
+  handleMouseLeave = () => {
+    this.refs.button.blur();
+    if (this.props.onMouseLeave) this.props.onMouseLeave();
   };
 
   render () {
@@ -55,6 +63,7 @@ class Button extends React.Component {
       className: classes,
       disabled: this.props.disabled,
       onMouseUp: this.handleMouseUp,
+      onMouseLeave: this.handleMouseLeave,
       'data-react-toolbox': 'button'
     };
 

From 211d542b7f39bd0276464951f767323d8ab8a3bb Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 12 Dec 2015 11:35:31 +0100
Subject: [PATCH 0269/1024] Add animated auto transition from hours to minutes
 in TimePicker

---
 components/animations/index.js              |  2 ++
 components/animations/slide-left.scss       |  2 --
 components/animations/slide-right.scss      | 15 +++++-----
 components/animations/zoom-in.scss          | 31 +++++++++++++++++++++
 components/animations/zoom-out.scss         | 31 +++++++++++++++++++++
 components/time_picker/Clock.jsx            | 18 +++++++++---
 components/time_picker/TimePickerDialog.jsx |  7 ++++-
 components/time_picker/style.clock.scss     |  7 ++++-
 components/time_picker/style.scss           |  1 +
 9 files changed, 99 insertions(+), 15 deletions(-)
 create mode 100644 components/animations/zoom-in.scss
 create mode 100644 components/animations/zoom-out.scss

diff --git a/components/animations/index.js b/components/animations/index.js
index 3fb4f3f73..c77b378e3 100644
--- a/components/animations/index.js
+++ b/components/animations/index.js
@@ -1,2 +1,4 @@
 export SlideLeft from './slide-left';
 export SlideRight from './slide-right';
+export ZoomIn from './zoom-in';
+export ZoomOut from './zoom-out';
diff --git a/components/animations/slide-left.scss b/components/animations/slide-left.scss
index 30fa9aecd..aba039958 100644
--- a/components/animations/slide-left.scss
+++ b/components/animations/slide-left.scss
@@ -1,5 +1,3 @@
-@import "http://github.com/base";
-
 .enter, .leave {
   position: absolute;
   transition-timing-function: ease-in-out;
diff --git a/components/animations/slide-right.scss b/components/animations/slide-right.scss
index 55b6ea3b1..95d0e15d9 100644
--- a/components/animations/slide-right.scss
+++ b/components/animations/slide-right.scss
@@ -1,28 +1,29 @@
-@import "http://github.com/base";
-
 .enter, .leave {
   position: absolute;
+}
+
+.enterActive, .leaveActive {
   transition-timing-function: ease-in-out;
-  transition-duration: .35s;
+  transition-duration: 350ms;
   transition-property: transform, opacity;
 }
 
 .enter {
   opacity: 0;
-  transform: translate3d(100%, 0, 0);
+  transform: translateX(100%);
 
   &.enterActive {
     opacity: 1;
-    transform: translate3d(0, 0, 0);
+    transform: translateX(0);
   }
 }
 
 .leave {
   opacity: 1;
-  transform: translate3d(0, 0, 0);
+  transform: translateX(0);
 
   &.leaveActive {
     opacity: 0;
-    transform: translate3d(-100%, 0, 0);
+    transform: translateX(-100%);
   }
 }
diff --git a/components/animations/zoom-in.scss b/components/animations/zoom-in.scss
new file mode 100644
index 000000000..f00153831
--- /dev/null
+++ b/components/animations/zoom-in.scss
@@ -0,0 +1,31 @@
+@import "http://github.com/base";
+
+.enter, .leave {
+  position: absolute;
+}
+
+.enterActive, .leaveActive {
+  transition-timing-function: $animation-curve-fast-out-slow-in;
+  transition-duration: 500ms;
+  transition-property: transform, opacity;
+}
+
+.enter {
+  opacity: 0;
+  transform: scale(0.85);
+
+  &.enterActive {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.leave {
+  opacity: 1;
+  transform: scale(1);
+
+  &.leaveActive {
+    opacity: 0;
+    transform: scale(1.25);
+  }
+}
diff --git a/components/animations/zoom-out.scss b/components/animations/zoom-out.scss
new file mode 100644
index 000000000..0437a447a
--- /dev/null
+++ b/components/animations/zoom-out.scss
@@ -0,0 +1,31 @@
+@import "http://github.com/base";
+
+.enter, .leave {
+  position: absolute;
+}
+
+.enterActive, .leaveActive {
+  transition-timing-function: $animation-curve-fast-out-slow-in;
+  transition-duration: 500ms;
+  transition-property: transform, opacity;
+}
+
+.enter {
+  opacity: 0;
+  transform: scale(1.25);
+
+  &.enterActive {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.leave {
+  opacity: 1;
+  transform: scale(1);
+
+  &.leaveActive {
+    opacity: 0;
+    transform: scale(0.85);
+  }
+}
diff --git a/components/time_picker/Clock.jsx b/components/time_picker/Clock.jsx
index a56e7bf10..eede27ece 100644
--- a/components/time_picker/Clock.jsx
+++ b/components/time_picker/Clock.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import CssTransitionGroup from 'react-addons-css-transition-group';
+import { ZoomIn, ZoomOut } from '../animations';
 import style from './style.clock';
 import time from '../utils/time';
 import Hours from './ClockHours';
@@ -10,6 +12,7 @@ class Clock extends React.Component {
     display: React.PropTypes.oneOf(['hours', 'minutes']),
     format: React.PropTypes.oneOf(['24hr', 'ampm']),
     onChange: React.PropTypes.func,
+    onHandMoved: React.PropTypes.func,
     time: React.PropTypes.object
   };
 
@@ -47,7 +50,7 @@ class Clock extends React.Component {
   };
 
   handleCalculateShape = () => {
-    const { top, left, width } = this.refs.wrapper.getBoundingClientRect();
+    const { top, left, width } = this.refs.placeholder.getBoundingClientRect();
     this.setState({
       center: { x: left + width / 2, y: top + width / 2 },
       radius: width / 2
@@ -75,6 +78,7 @@ class Clock extends React.Component {
         radius={this.state.radius}
         selected={this.props.time.getHours()}
         spacing={this.state.radius * 0.18}
+        onHandMoved={this.props.onHandMoved}
       />
     );
   }
@@ -87,16 +91,22 @@ class Clock extends React.Component {
         radius={this.state.radius}
         selected={this.props.time.getMinutes()}
         spacing={this.state.radius * 0.18}
+        onHandMoved={this.props.onHandMoved}
       />
     );
   }
 
   render () {
+    const animation = this.props.display === 'hours' ? ZoomOut : ZoomIn;
     return (
       <div data-react-toolbox='clock' className={style.root}>
-        <div ref='wrapper' className={style.wrapper} style={{height: this.state.radius * 2}}>
-          {this.props.display === 'hours' ? this.renderHours() : null}
-          {this.props.display === 'minutes' ? this.renderMinutes() : null}
+        <div ref='placeholder' className={style.placeholder} style={{height: this.state.radius * 2}}>
+          <CssTransitionGroup transitionName={animation} transitionEnterTimeout={500} transitionLeaveTimeout={500}>
+            <div key={this.props.display} className={style.wrapper} style={{height: this.state.radius * 2}}>
+              {this.props.display === 'hours' ? this.renderHours() : null}
+              {this.props.display === 'minutes' ? this.renderMinutes() : null}
+            </div>
+          </CssTransitionGroup>
         </div>
       </div>
     );
diff --git a/components/time_picker/TimePickerDialog.jsx b/components/time_picker/TimePickerDialog.jsx
index 9ca3083af..6465fe9d6 100644
--- a/components/time_picker/TimePickerDialog.jsx
+++ b/components/time_picker/TimePickerDialog.jsx
@@ -42,6 +42,10 @@ class TimePickerDialog extends React.Component {
     this.setState({displayTime: time.toggleTimeMode(this.state.displayTime)});
   };
 
+  handleHandMoved = () => {
+    if (this.state.display === 'hours') this.setState({display: 'minutes'});
+  };
+
   switchDisplay = (display) => {
     this.setState({display});
   };
@@ -90,8 +94,9 @@ class TimePickerDialog extends React.Component {
           ref='clock'
           display={this.state.display}
           format={this.props.format}
-          time={this.state.displayTime}
           onChange={this.handleClockChange}
+          onHandMoved={this.handleHandMoved}
+          time={this.state.displayTime}
         />
       </Dialog>
     );
diff --git a/components/time_picker/style.clock.scss b/components/time_picker/style.clock.scss
index 051a0c1f3..e89bd53b9 100644
--- a/components/time_picker/style.clock.scss
+++ b/components/time_picker/style.clock.scss
@@ -5,9 +5,14 @@
   padding: $clock-padding;
 }
 
-.wrapper {
+.placeholder {
   position: relative;
   z-index: $z-index-high;
+}
+
+.wrapper {
+  position: absolute;
+  width: 100%;
   background-color: $color-divider;
   border-radius: 50%;
 }
diff --git a/components/time_picker/style.scss b/components/time_picker/style.scss
index dac9a4254..7bead8753 100644
--- a/components/time_picker/style.scss
+++ b/components/time_picker/style.scss
@@ -48,6 +48,7 @@
   width: $timepicker-dialog-width;
   > [role="body"] {
     padding: 0;
+    overflow-y: visible;
   }
   > [role="navigation"] > .button {
     color: $timepicker-primary-color;

From 5ed9184c12c241c4af385c4226d99d37374008a8 Mon Sep 17 00:00:00 2001
From: Jackie Li <jackie.li@fuseim.com>
Date: Tue, 15 Dec 2015 17:07:41 +0000
Subject: [PATCH 0270/1024] handle mouse leave in IconButton like Button does,
 fixes #208

---
 components/button/IconButton.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/button/IconButton.jsx b/components/button/IconButton.jsx
index 9c30ff939..35c1f0983 100644
--- a/components/button/IconButton.jsx
+++ b/components/button/IconButton.jsx
@@ -40,6 +40,7 @@ class IconButton extends React.Component {
       className: classes,
       disabled: this.props.disabled,
       onMouseUp: this.handleMouseUp,
+      onMouseLeave: this.handleMouseUp,
       'data-react-toolbox': 'button'
     };
 

From 3e7d75ca49cb05e35e236b2679b376129dc02bd7 Mon Sep 17 00:00:00 2001
From: Jackie Li <jackie.li@fuseim.com>
Date: Tue, 15 Dec 2015 17:09:35 +0000
Subject: [PATCH 0271/1024] add classnames dependecies, fixes #209

---
 docs/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/package.json b/docs/package.json
index 0168ce5af..4f4dfc187 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -9,6 +9,7 @@
     "deploy": "gh-pages -d build"
   },
   "dependencies": {
+    "classnames": "^2.2.1",
     "codemirror": "^5.8.0",
     "history": "^1.12.6",
     "react": "^0.14.0",

From ae3f4a51aaa676970cf4430c2851aa57f3c7ec62 Mon Sep 17 00:00:00 2001
From: Peter Fern <github@obfusc8.org>
Date: Wed, 16 Dec 2015 10:23:44 +1100
Subject: [PATCH 0272/1024] Allow CardMedia to have flexible height per
 documentation

The documentation for CardMedia specifies that if the `aspectRatio`
property is not set, the media will have a flexible height.  The
existing implementation did not provide this, and would instead always
render with a height of `0`, effectively hiding the element.

This change should bring the component into line with the documentation.
---
 components/card/style.scss | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/components/card/style.scss b/components/card/style.scss
index 9e950d346..912c5952e 100644
--- a/components/card/style.scss
+++ b/components/card/style.scss
@@ -20,12 +20,16 @@
 
 .cardMedia {
   position: relative;
-  height: 0;
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
   &.wide, &.square {
+    height: 0;
     width: 100%;
+    .content {
+      position: absolute;
+      height: 100%;
+    }
     .content > iframe, .content > video, .content > img {
       max-width: 100%;
     }
@@ -37,12 +41,11 @@
     padding-top: 100%;
   }
   .content {
-    position: absolute;
+    position: relative;
     top: 0;
     left: 0;
     display: flex;
     width: 100%;
-    height: 100%;
     flex-direction: column;
     justify-content: flex-end;
     overflow: hidden;

From ffa5044e20cc0b74d375c69420ab161081eaa1bb Mon Sep 17 00:00:00 2001
From: avijohnson <avibenjohnson@gmail.com>
Date: Wed, 16 Dec 2015 14:25:01 -0800
Subject: [PATCH 0273/1024] Add maxLength attribute to input component

---
 components/input/Input.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/input/Input.jsx b/components/input/Input.jsx
index b48e50054..bf2e11d37 100644
--- a/components/input/Input.jsx
+++ b/components/input/Input.jsx
@@ -79,7 +79,8 @@ class Input extends React.Component {
       role: 'input',
       disabled,
       type,
-      value
+      value,
+      maxLength
     });
 
     return (

From 58e4e1e46c9ca340770b7e95dec74ce381e30567 Mon Sep 17 00:00:00 2001
From: Peter Fern <github@obfusc8.org>
Date: Sat, 19 Dec 2015 08:13:10 +1100
Subject: [PATCH 0274/1024] Replace `overflow-y: scroll` with `overflow-y:
 auto`

A number of components used `overflow-y`: scroll, which forces
scrollbars to be always visible. To work around this, `commons.scss` hid
webkit scrollbars globally. There are two problems with this: on
non-webkit browsers, scrollbars are visible even when they are
unnecessary; and scrollbars are hidden in webkit browsers, even on
elements where they may be desirable.

Instead, we use `overflow-y: auto`, and hide webkit scrollbars on
specific components when necessary.  Unfortunately, this requires using
element selectors, but this is the trade-off for better supporting
non-webkit browsers and allowing scrollbars on regular elements (like
body).

Fixes #218
---
 components/autocomplete/style.scss                         | 6 +++++-
 components/commons.scss                                    | 5 -----
 components/date_picker/style.calendar.scss                 | 4 +++-
 components/drawer/style.scss                               | 3 ++-
 components/dropdown/style.scss                             | 6 +++++-
 docs/app/components/layout/main/components/playground.scss | 2 +-
 docs/app/components/markdown/style.scss                    | 2 +-
 7 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/components/autocomplete/style.scss b/components/autocomplete/style.scss
index 853f0947e..c71bb9662 100644
--- a/components/autocomplete/style.scss
+++ b/components/autocomplete/style.scss
@@ -20,6 +20,10 @@
       margin-top: - $input-underline-height;
     }
   }
+  ul.suggestions::-webkit-scrollbar {
+    height: 0;
+    width: 0;
+  }
 }
 
 .label {
@@ -51,7 +55,7 @@
   width: 100%;
   max-height: 0;
   overflow-x: hidden;
-  overflow-y: scroll;
+  overflow-y: auto;
   visibility: hidden;
   background-color: $autocomplete-suggestions-background;
   transition-timing-function: $animation-curve-default;
diff --git a/components/commons.scss b/components/commons.scss
index 929d18708..4c2556303 100644
--- a/components/commons.scss
+++ b/components/commons.scss
@@ -47,11 +47,6 @@ a {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-}
-
 input:not([type="checkbox"]):not([type="radio"]), button {
   outline: none;
   appearance: none;
diff --git a/components/date_picker/style.calendar.scss b/components/date_picker/style.calendar.scss
index 6e8a92d23..61eb19c3f 100644
--- a/components/date_picker/style.calendar.scss
+++ b/components/date_picker/style.calendar.scss
@@ -8,6 +8,7 @@
   line-height: $calendar-row-height;
   text-align: center;
   background: $calendar-primary-contrast-color;
+  overflow-x: hidden;
   .prev, .next {
     position: absolute;
     top: 0;
@@ -32,7 +33,8 @@
 
 .years {
   height: 100%;
-  overflow: scroll;
+  overflow-x: hidden;
+  overflow-y: auto;
   font-size: $font-size-big;
   > li {
     line-height: 2.4;
diff --git a/components/drawer/style.scss b/components/drawer/style.scss
index 590e4d26c..e58ddff0f 100644
--- a/components/drawer/style.scss
+++ b/components/drawer/style.scss
@@ -8,7 +8,8 @@
   display: block;
   width: $drawer-width;
   height: 100%;
-  overflow-y: scroll;
+  overflow-x: hidden;
+  overflow-y: auto;
   color: $drawer-text-color;
   pointer-events: none;
   background-color: $drawer-background-color;
diff --git a/components/dropdown/style.scss b/components/dropdown/style.scss
index 82482fe4c..40063132e 100644
--- a/components/dropdown/style.scss
+++ b/components/dropdown/style.scss
@@ -42,6 +42,10 @@
     top: auto;
     bottom: 0;
   }
+  ul.values::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
 }
 
 .label {
@@ -54,7 +58,7 @@
   z-index: 2;
   width: 100%;
   overflow-x: hidden;
-  overflow-y: scroll;
+  overflow-y: auto;
   list-style: none;
   background-color: $dropdown-color-white;
   border-radius: $dropdown-value-border-radius;
diff --git a/docs/app/components/layout/main/components/playground.scss b/docs/app/components/layout/main/components/playground.scss
index 14c41ded1..c3a27d99f 100644
--- a/docs/app/components/layout/main/components/playground.scss
+++ b/docs/app/components/layout/main/components/playground.scss
@@ -3,7 +3,7 @@
 .editor, .preview {
   position: absolute;
   right: 0;
-  overflow-y: scroll;
+  overflow-y: auto;
 }
 
 .editor {
diff --git a/docs/app/components/markdown/style.scss b/docs/app/components/markdown/style.scss
index f3fecbc4a..21735434b 100644
--- a/docs/app/components/markdown/style.scss
+++ b/docs/app/components/markdown/style.scss
@@ -19,7 +19,7 @@ $documentation-table-font-size: 1.4 * $unit;
   max-height: 100%;
   flex-grow: 1;
   padding-bottom: 4 * $unit;
-  overflow-y: scroll;
+  overflow-y: auto;
   font-size: $font-size-normal;
   color: $color-text;
   > *:not(pre) {

From 8b2316e9472e12073c1197b3cd05c510eae3c1ad Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 19 Dec 2015 13:27:43 +0100
Subject: [PATCH 0275/1024] Improve layout for calendar in firefox

---
 components/date_picker/_config.scss        | 3 ++-
 components/date_picker/style.calendar.scss | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/components/date_picker/_config.scss b/components/date_picker/_config.scss
index 5308a9f0a..17e909456 100644
--- a/components/date_picker/_config.scss
+++ b/components/date_picker/_config.scss
@@ -26,4 +26,5 @@ $calendar-day-font-size: 1.3 * $unit;
 $calendar-day-disable-opacity: 0.25;
 $calendar-row-height: 3 * $unit;
 $calendar-day-padding: .2 * $unit;
-$calendar-total-height: $calendar-row-height * 8 + $calendar-day-padding * 12;
+$calendar-title-height: 3.6 * $unit;
+$calendar-total-height: $calendar-row-height * 7 + $calendar-title-height + $calendar-day-padding * 12;
diff --git a/components/date_picker/style.calendar.scss b/components/date_picker/style.calendar.scss
index 61eb19c3f..d12df367d 100644
--- a/components/date_picker/style.calendar.scss
+++ b/components/date_picker/style.calendar.scss
@@ -4,11 +4,11 @@
 .root {
   position: relative;
   height: $calendar-total-height;
+  overflow: hidden;
   font-size: $font-size-small;
   line-height: $calendar-row-height;
   text-align: center;
   background: $calendar-primary-contrast-color;
-  overflow-x: hidden;
   .prev, .next {
     position: absolute;
     top: 0;
@@ -28,7 +28,7 @@
 .title {
   display: inline-block;
   font-weight: 500;
-  line-height: 3.6 * $unit;
+  line-height: $calendar-row-height;
 }
 
 .years {

From 3505941ef6b2b8380f2a113613e93f9202f01966 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 19 Dec 2015 13:36:34 +0100
Subject: [PATCH 0276/1024] Hide scrollbars in playground for webkit

---
 docs/app/components/layout/main/components/playground.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/app/components/layout/main/components/playground.scss b/docs/app/components/layout/main/components/playground.scss
index c3a27d99f..1e1ca9011 100644
--- a/docs/app/components/layout/main/components/playground.scss
+++ b/docs/app/components/layout/main/components/playground.scss
@@ -4,6 +4,10 @@
   position: absolute;
   right: 0;
   overflow-y: auto;
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
 }
 
 .editor {

From da1c109068da2f6b480aa1d0b30d7a842f926ea0 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 19 Dec 2015 13:44:01 +0100
Subject: [PATCH 0277/1024] Remove scrollbars in list items and remove unneeded
 overflows

---
 components/list/style.scss                                 | 5 +++--
 docs/app/components/layout/main/components/navigation.scss | 4 ++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/components/list/style.scss b/components/list/style.scss
index 32c5634a0..13847628c 100644
--- a/components/list/style.scss
+++ b/components/list/style.scss
@@ -39,7 +39,9 @@
 
 .listItem {
   position: relative;
-  overflow: hidden;
+  > [data-react-toolbox='ripple'] {
+    overflow: hidden;
+  }
 }
 
 .item {
@@ -48,7 +50,6 @@
   min-height: $list-item-min-height;
   align-items: center;
   padding: 0 $list-horizontal-padding;
-  overflow: hidden;
   color: $color-text;
   &.selectable:not(.disabled):hover {
     cursor: pointer;
diff --git a/docs/app/components/layout/main/components/navigation.scss b/docs/app/components/layout/main/components/navigation.scss
index 56632441b..242a2a192 100644
--- a/docs/app/components/layout/main/components/navigation.scss
+++ b/docs/app/components/layout/main/components/navigation.scss
@@ -10,6 +10,10 @@
 .list {
   flex-grow: 1;
   overflow-y: auto;
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
 }
 
 .item {

From 40888bbb1da362527927d66249c751253131be31 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 19 Dec 2015 13:50:39 +0100
Subject: [PATCH 0278/1024] Change webkit scrollbar removal for a mixin

---
 components/_mixins.scss                                    | 7 +++++++
 components/autocomplete/style.scss                         | 5 +----
 components/dropdown/style.scss                             | 5 +----
 docs/app/components/layout/main/components/navigation.scss | 5 +----
 docs/app/components/layout/main/components/playground.scss | 5 +----
 5 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/components/_mixins.scss b/components/_mixins.scss
index 96f9af129..e3b2d8c3a 100644
--- a/components/_mixins.scss
+++ b/components/_mixins.scss
@@ -251,3 +251,10 @@
   transition-timing-function: $animation-curve-default;
   transition-duration: $duration;
 }
+
+@mixin no-webkit-scrollbar {
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+}
diff --git a/components/autocomplete/style.scss b/components/autocomplete/style.scss
index c71bb9662..caf38d0ce 100644
--- a/components/autocomplete/style.scss
+++ b/components/autocomplete/style.scss
@@ -20,10 +20,6 @@
       margin-top: - $input-underline-height;
     }
   }
-  ul.suggestions::-webkit-scrollbar {
-    height: 0;
-    width: 0;
-  }
 }
 
 .label {
@@ -50,6 +46,7 @@
 }
 
 .suggestions {
+  @include no-webkit-scrollbar;
   position: absolute;
   z-index: $z-index-high;
   width: 100%;
diff --git a/components/dropdown/style.scss b/components/dropdown/style.scss
index 40063132e..b32acdd38 100644
--- a/components/dropdown/style.scss
+++ b/components/dropdown/style.scss
@@ -42,10 +42,6 @@
     top: auto;
     bottom: 0;
   }
-  ul.values::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-  }
 }
 
 .label {
@@ -54,6 +50,7 @@
 }
 
 .values {
+  @include no-webkit-scrollbar;
   position: absolute;
   z-index: 2;
   width: 100%;
diff --git a/docs/app/components/layout/main/components/navigation.scss b/docs/app/components/layout/main/components/navigation.scss
index 242a2a192..31fc841f5 100644
--- a/docs/app/components/layout/main/components/navigation.scss
+++ b/docs/app/components/layout/main/components/navigation.scss
@@ -8,12 +8,9 @@
 }
 
 .list {
+  @include no-webkit-scrollbar;
   flex-grow: 1;
   overflow-y: auto;
-  &::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-  }
 }
 
 .item {
diff --git a/docs/app/components/layout/main/components/playground.scss b/docs/app/components/layout/main/components/playground.scss
index 1e1ca9011..b10e79879 100644
--- a/docs/app/components/layout/main/components/playground.scss
+++ b/docs/app/components/layout/main/components/playground.scss
@@ -1,13 +1,10 @@
 @import "http://github.com/config";
 
 .editor, .preview {
+  @include no-webkit-scrollbar;
   position: absolute;
   right: 0;
   overflow-y: auto;
-  &::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-  }
 }
 
 .editor {

From 5293585cf0a8919f9669ae1689e55ad3901b6f41 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 19 Dec 2015 13:54:55 +0100
Subject: [PATCH 0279/1024] Remove unneded scroll-x hidden

---
 components/date_picker/style.calendar.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/date_picker/style.calendar.scss b/components/date_picker/style.calendar.scss
index d12df367d..dfcea1dd6 100644
--- a/components/date_picker/style.calendar.scss
+++ b/components/date_picker/style.calendar.scss
@@ -33,7 +33,6 @@
 
 .years {
   height: 100%;
-  overflow-x: hidden;
   overflow-y: auto;
   font-size: $font-size-big;
   > li {

From e788a21227f4dd88d3434fe76e9a7d767f07ed42 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 19 Dec 2015 14:03:30 +0100
Subject: [PATCH 0280/1024] Remove scrollbar in default app spec wrapper

---
 spec/style.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/spec/style.scss b/spec/style.scss
index f029d9238..70c1ad433 100644
--- a/spec/style.scss
+++ b/spec/style.scss
@@ -5,6 +5,7 @@
 $offset: 1.8 * $unit;
 
 .app {
+  @include no-webkit-scrollbar;
   padding: (8.2 * $unit) $offset $offset;
   background-color: #f5f5f5;
   > section, > div > section {

From 5fea2e3f1701beb5c6a3c5ef9f1152b0af6fc328 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 19 Dec 2015 14:14:40 +0100
Subject: [PATCH 0281/1024] Import commons.scss once. Fixes #220

---
 docs/app/components/_globals.scss | 1 -
 docs/app/index.jsx                | 2 ++
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/app/components/_globals.scss b/docs/app/components/_globals.scss
index a6fe84233..2cfef2640 100644
--- a/docs/app/components/_globals.scss
+++ b/docs/app/components/_globals.scss
@@ -1,7 +1,6 @@
 $import-flex-attributes: true;
 
 @import "http://github.com/~react-toolbox/base";
-@import "http://github.com/~react-toolbox/commons";
 
 $unit: 1rem;
 $color-primary-dark: $color-primary-dark;
diff --git a/docs/app/index.jsx b/docs/app/index.jsx
index 637bda104..418acd1f0 100644
--- a/docs/app/index.jsx
+++ b/docs/app/index.jsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Router, Route, IndexRoute } from 'react-router';
+
+import 'react-toolbox/commons';
 import { App } from 'react-toolbox';
 import { createHashHistory } from 'history';
 

From 2349d692ae76ad5ef22e88786159cb98ba5bfd2a Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 19 Dec 2015 20:36:35 +0100
Subject: [PATCH 0282/1024] Make level depend on className for buttons

---
 components/_mixins.scss          | 18 ++++++++++++++++++
 components/button/Button.jsx     |  3 ++-
 components/button/IconButton.jsx |  5 ++++-
 components/button/style.scss     | 18 ------------------
 4 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/components/_mixins.scss b/components/_mixins.scss
index e3b2d8c3a..a4d9dfebc 100644
--- a/components/_mixins.scss
+++ b/components/_mixins.scss
@@ -258,3 +258,21 @@
     height: 0;
   }
 }
+
+@mixin btn-colors($name, $color, $background, $hover) {
+  .#{$name}:not([disabled]) {
+    &.raised, &.floating {
+      color: $color;
+      background: $background;
+    }
+    &.flat, &.toggle {
+      color: $background;
+      &:focus:not(:active) {
+        background: $hover;
+      }
+    }
+    &.flat:hover {
+      background: $hover;
+    }
+  }
+}
diff --git a/components/button/Button.jsx b/components/button/Button.jsx
index 8d9f3b472..7f6b78786 100644
--- a/components/button/Button.jsx
+++ b/components/button/Button.jsx
@@ -51,7 +51,8 @@ class Button extends React.Component {
     const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
     const shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : 'flat';
 
-    const classes = ClassNames([ style[shape], style[level] ], {
+    const classes = ClassNames([style[shape]], {
+      [style[level]]: className === '',
       [style.mini]: mini,
       [style.inverse]: inverse
     }, className);
diff --git a/components/button/IconButton.jsx b/components/button/IconButton.jsx
index 35c1f0983..15058a39f 100644
--- a/components/button/IconButton.jsx
+++ b/components/button/IconButton.jsx
@@ -31,7 +31,10 @@ class IconButton extends React.Component {
     const {accent, children, className, href, icon, inverse, primary, ...others} = this.props;
     const element = href ? 'a' : 'button';
     const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
-    const classes = ClassNames([style.toggle, style[level]], {[style.inverse]: inverse}, className);
+    const classes = ClassNames([style.toggle], {
+      [style[level]]: className === '',
+      [style.inverse]: inverse
+    }, className);
 
     const props = {
       ...others,
diff --git a/components/button/style.scss b/components/button/style.scss
index 1aa1f638a..2adb06a6b 100644
--- a/components/button/style.scss
+++ b/components/button/style.scss
@@ -161,23 +161,5 @@
   }
 }
 
-@mixin btn-colors($name, $color, $background, $hover) {
-  .#{$name}:not([disabled]) {
-    &.raised, &.floating {
-      color: $color;
-      background: $background;
-    }
-    &.flat, &.toggle {
-      color: $background;
-      &:focus:not(:active) {
-        background: $hover;
-      }
-    }
-    &.flat:hover {
-      background: $hover;
-    }
-  }
-}
-
 @include btn-colors('primary', $button-primary-color-contrast, $button-primary-color, $button-primary-color-hover);
 @include btn-colors('accent', $button-accent-color-contrast, $button-accent-color, $button-accent-color-hover);

From 440300389517a1959ab66077a5051703598e1bcd Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 19 Dec 2015 20:55:30 +0100
Subject: [PATCH 0283/1024] Add neutral prop to avoid to inherit neutral styles

---
 components/button/Button.jsx     | 6 ++++--
 components/button/IconButton.jsx | 6 ++++--
 components/button/readme.md      | 1 +
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/components/button/Button.jsx b/components/button/Button.jsx
index 7f6b78786..9de384cae 100644
--- a/components/button/Button.jsx
+++ b/components/button/Button.jsx
@@ -17,6 +17,7 @@ class Button extends React.Component {
     inverse: React.PropTypes.bool,
     label: React.PropTypes.string,
     mini: React.PropTypes.bool,
+    neutral: React.PropTypes.bool,
     onMouseLeave: React.PropTypes.func,
     onMouseUp: React.PropTypes.func,
     primary: React.PropTypes.bool,
@@ -30,6 +31,7 @@ class Button extends React.Component {
     flat: false,
     floating: false,
     mini: false,
+    neutral: true,
     primary: false,
     raised: false
   };
@@ -46,13 +48,13 @@ class Button extends React.Component {
 
   render () {
     const { accent, children, className, flat, floating, href, icon,
-            inverse, label, mini, primary, raised, ...others} = this.props;
+            inverse, label, mini, neutral, primary, raised, ...others} = this.props;
     const element = href ? 'a' : 'button';
     const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
     const shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : 'flat';
 
     const classes = ClassNames([style[shape]], {
-      [style[level]]: className === '',
+      [style[level]]: neutral,
       [style.mini]: mini,
       [style.inverse]: inverse
     }, className);
diff --git a/components/button/IconButton.jsx b/components/button/IconButton.jsx
index 15058a39f..ae0105e66 100644
--- a/components/button/IconButton.jsx
+++ b/components/button/IconButton.jsx
@@ -13,6 +13,7 @@ class IconButton extends React.Component {
     href: React.PropTypes.string,
     icon: React.PropTypes.string,
     inverse: React.PropTypes.bool,
+    neutral: React.PropTypes.bool,
     primary: React.PropTypes.bool,
     type: React.PropTypes.string
   };
@@ -20,6 +21,7 @@ class IconButton extends React.Component {
   static defaultProps = {
     accent: false,
     className: '',
+    neutral: true,
     primary: false
   };
 
@@ -28,11 +30,11 @@ class IconButton extends React.Component {
   };
 
   render () {
-    const {accent, children, className, href, icon, inverse, primary, ...others} = this.props;
+    const {accent, children, className, href, icon, inverse, neutral, primary, ...others} = this.props;
     const element = href ? 'a' : 'button';
     const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
     const classes = ClassNames([style.toggle], {
-      [style[level]]: className === '',
+      [style[level]]: neutral,
       [style.inverse]: inverse
     }, className);
 
diff --git a/components/button/readme.md b/components/button/readme.md
index 91e4e3370..5def51952 100644
--- a/components/button/readme.md
+++ b/components/button/readme.md
@@ -43,6 +43,7 @@ const TestButtons = () => (
 | `inverse`    | `Boolean`  |  | If true, the neutral colors are inverted. Useful to put a button over a dark background. |
 | `label`     | `String`  |  | The text string to use for the name of the button.|
 | `mini`  | `Boolean` | `false`  | To be used with floating button. If true the button will be smaller.|
+| `neutral`  | `Boolean` | `true`  | Set it to `false` if you don't want the neutral styles to be included.|
 | `primary`  | `false` | `false` | Indicates if the button should have primary color.|
 | `raised`   | `Boolean`  | `false` | If true, the button will have a raised look. |
 | `ripple`  | `Boolean`  | `true`    | If true, component will have a ripple effect on click.|

From abcd09783098602e640c9013f808235547cdd43a Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 19 Dec 2015 20:59:49 +0100
Subject: [PATCH 0284/1024] Fixes #214

---
 components/font_icon/FontIcon.jsx | 3 ++-
 components/tooltip/style.scss     | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/font_icon/FontIcon.jsx b/components/font_icon/FontIcon.jsx
index cb73cea1b..8adc581a4 100644
--- a/components/font_icon/FontIcon.jsx
+++ b/components/font_icon/FontIcon.jsx
@@ -5,7 +5,8 @@ const FontIcon = ({ children, className, value, ...other}) => {
   const classes = ClassNames('material-icons', className);
   return (
     <span className={classes} {...other} >
-      {value ? value : children}
+      {value}
+      {children}
     </span>
   );
 };
diff --git a/components/tooltip/style.scss b/components/tooltip/style.scss
index bf1696ad2..58903b3a2 100644
--- a/components/tooltip/style.scss
+++ b/components/tooltip/style.scss
@@ -15,6 +15,7 @@
   max-width: $tooltip-max-width;
   padding: $tooltip-padding;
   margin: $tooltip-margin 0;
+  font-family: Roboto, sans-serif;
   font-size: $tooltip-font-size;
   font-weight: $font-weight-bold;
   line-height: $font-size-small;

From 60f55ebfef677db0106bc4d824caf6f5a77ee0bd Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 19 Dec 2015 22:07:49 +0100
Subject: [PATCH 0285/1024] Fixes #188

---
 components/dropdown/style.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/dropdown/style.scss b/components/dropdown/style.scss
index b32acdd38..2a7390ca5 100644
--- a/components/dropdown/style.scss
+++ b/components/dropdown/style.scss
@@ -8,7 +8,7 @@
   margin-bottom: $dropdown-offset;
   color: $color-text;
   cursor: pointer;
-  border-bottom: 1px solid $color-divider;
+  border-bottom: 1px solid $input-text-bottom-border-color;
   &:not(.active) {
     > .values {
       max-height: 0;
@@ -96,7 +96,7 @@
     width: 0;
     height: 0;
     content: "";
-    border-top: $size solid $color-divider;
+    border-top: $size solid $input-text-bottom-border-color;
     border-right: $border;
     border-left: $border;
     transition: transform $animation-duration $animation-curve-default;

From f3bcbf9d3b916644326fabb65b8892cb1362593f Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 19 Dec 2015 22:47:00 +0100
Subject: [PATCH 0286/1024] Add react-toolbox attributes and className to
 DatePicker

---
 components/date_picker/Calendar.jsx         | 2 +-
 components/date_picker/CalendarDay.jsx      | 8 ++++----
 components/date_picker/CalendarMonth.jsx    | 2 +-
 components/date_picker/DatePickerDialog.jsx | 8 ++++++--
 4 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/components/date_picker/Calendar.jsx b/components/date_picker/Calendar.jsx
index 32bca1146..4e0164586 100644
--- a/components/date_picker/Calendar.jsx
+++ b/components/date_picker/Calendar.jsx
@@ -72,7 +72,7 @@ class Calendar extends React.Component {
 
   renderYears () {
     return (
-      <ul ref="years" className={style.years}>
+      <ul data-react-toolbox='years' ref="years" className={style.years}>
         {utils.range(1900, 2100).map((i) => { return this.renderYear(i); })}
       </ul>
     );
diff --git a/components/date_picker/CalendarDay.jsx b/components/date_picker/CalendarDay.jsx
index ce7674953..38b083193 100644
--- a/components/date_picker/CalendarDay.jsx
+++ b/components/date_picker/CalendarDay.jsx
@@ -34,10 +34,10 @@ class Day extends React.Component {
     });
 
     return (
-      <div className={className} style={this.dayStyle()}>
-          <span onClick={this.props.onClick}>
-            {this.props.day}
-          </span>
+      <div data-react-toolbox='day' className={className} style={this.dayStyle()}>
+        <span onClick={this.props.onClick}>
+          {this.props.day}
+        </span>
       </div>
     );
   }
diff --git a/components/date_picker/CalendarMonth.jsx b/components/date_picker/CalendarMonth.jsx
index 65000c376..83ce76c01 100644
--- a/components/date_picker/CalendarMonth.jsx
+++ b/components/date_picker/CalendarMonth.jsx
@@ -43,7 +43,7 @@ class Month extends React.Component {
 
   render () {
     return (
-      <div className={style.month}>
+      <div data-react-toolbox='month' className={style.month}>
         <span className={style.title}>
           {time.getFullMonth(this.props.viewDate)} {this.props.viewDate.getFullYear()}
         </span>
diff --git a/components/date_picker/DatePickerDialog.jsx b/components/date_picker/DatePickerDialog.jsx
index cb5881158..a7799b9cf 100644
--- a/components/date_picker/DatePickerDialog.jsx
+++ b/components/date_picker/DatePickerDialog.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import ClassNames from 'classnames';
 import Calendar from './Calendar';
 import Dialog from '../dialog';
 import style from './style';
@@ -7,6 +8,7 @@ import time from '../utils/time';
 class CalendarDialog extends React.Component {
   static propTypes = {
     active: React.PropTypes.bool,
+    className: React.PropTypes.string,
     maxDate: React.PropTypes.object,
     minDate: React.PropTypes.object,
     onDismiss: React.PropTypes.func,
@@ -16,6 +18,7 @@ class CalendarDialog extends React.Component {
 
   static defaultProps = {
     active: false,
+    className: '',
     value: new Date()
   };
 
@@ -47,10 +50,11 @@ class CalendarDialog extends React.Component {
 
   render () {
     const display = `display-${this.state.display}`;
-    const headerClassName = `${style.header} ${style[display]}`;
+    const className = ClassNames(style.dialog, this.props.className);
+    const headerClassName = ClassNames(style.header, style[display]);
 
     return (
-      <Dialog active={this.props.active} type="custom" className={style.dialog} actions={this.actions}>
+      <Dialog active={this.props.active} type="custom" className={className} actions={this.actions}>
           <header className={headerClassName}>
             <span className={style.year} onClick={this.handleSwitchDisplay.bind(this, 'years')}>
               {this.state.date.getFullYear()}

From 2c7d3082712f894ca1f36e3fb50abcf2cac86d2e Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 20 Dec 2015 17:01:02 +0100
Subject: [PATCH 0287/1024] Use Input component in dropdowns and make it
 homogeneous

---
 components/dropdown/Dropdown.jsx |  45 +++++++++---
 components/dropdown/readme.md    |   1 +
 components/dropdown/style.scss   | 114 +++++++++++++++++++------------
 components/input/_config.scss    |   2 +-
 components/input/style.scss      |   1 +
 spec/components/dropdown.jsx     |  11 ++-
 6 files changed, 111 insertions(+), 63 deletions(-)

diff --git a/components/dropdown/Dropdown.jsx b/components/dropdown/Dropdown.jsx
index 8ed8f30df..97b66f72e 100644
--- a/components/dropdown/Dropdown.jsx
+++ b/components/dropdown/Dropdown.jsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import ClassNames from 'classnames';
+import Input from '../input';
+import events from '../utils/events';
 import style from './style';
 
 class Dropdown extends React.Component {
@@ -7,6 +9,7 @@ class Dropdown extends React.Component {
     auto: React.PropTypes.bool,
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
+    error: React.PropTypes.string,
     label: React.PropTypes.string,
     onChange: React.PropTypes.func,
     source: React.PropTypes.array.isRequired,
@@ -25,7 +28,8 @@ class Dropdown extends React.Component {
     up: false
   };
 
-  handleClick = (event) => {
+  handleMouseDown = (event) => {
+    events.pauseEvent(event);
     const client = event.target.getBoundingClientRect();
     const screen_height = window.innerHeight || document.documentElement.offsetHeight;
     const up = this.props.auto ? client.top > ((screen_height / 2) + client.height) : false;
@@ -49,7 +53,24 @@ class Dropdown extends React.Component {
     }
   };
 
-  renderItem (item, idx) {
+  renderTemplateValue (selected) {
+    const className = ClassNames(style.field, {
+      [style.errored]: this.props.error,
+      [style.disabled]: this.props.disabled
+    });
+
+    return (
+      <div className={className} onMouseDown={this.handleMouseDown}>
+        <div className={`${style.templateValue} ${style.value}`}>
+          {this.props.template(selected)}
+        </div>
+        {this.props.label ? <label className={style.label}>{this.props.label}</label> : null}
+        {this.props.error ? <span className={style.error}>{this.props.error}</span> : null}
+      </div>
+    );
+  }
+
+  renderValue (item, idx) {
     const className = item.value === this.props.value ? style.selected : null;
     return (
       <li key={idx} className={className} onMouseDown={this.handleSelect.bind(this, item.value)}>
@@ -59,6 +80,7 @@ class Dropdown extends React.Component {
   }
 
   render () {
+    const {template, source, ...others} = this.props;
     const selected = this.getSelectedItem();
     const className = ClassNames(style.root, {
       [style.up]: this.state.up,
@@ -68,15 +90,18 @@ class Dropdown extends React.Component {
 
     return (
       <div data-react-toolbox='dropdown' className={className}>
-        {this.props.label ? <label className={style.label}>{this.props.label}</label> : null}
-
-        <ul ref='values' className={style.values}>
-          {this.props.source.map(this.renderItem.bind(this))}
+        <Input
+          {...others}
+          className={style.value}
+          onMouseDown={this.handleMouseDown}
+          readOnly
+          type={template ? 'hidden' : null}
+          value={selected.label}
+        />
+        {template ? this.renderTemplateValue(selected) : null}
+        <ul className={style.values} ref='values'>
+          {source.map(this.renderValue.bind(this))}
         </ul>
-
-        <div ref='value' className={style.value} onClick={this.handleClick}>
-          {this.props.template ? this.props.template(selected) : <span>{selected.label}</span>}
-        </div>
       </div>
     );
   }
diff --git a/components/dropdown/readme.md b/components/dropdown/readme.md
index 39609dfe6..89f3f71d7 100644
--- a/components/dropdown/readme.md
+++ b/components/dropdown/readme.md
@@ -42,6 +42,7 @@ class DropdownTest extends React.Component {
 | `auto`        | `Boolean`       |  `true`        | If true, the dropdown will open up or down depending on the position in the screen .|
 | `className`     | `String`        |  `''`               | Set the class to give custom styles to the dropdown.
 | `disabled`      | `Boolean`       | `false`         | Set the component as disabled.
+| `error`         | `String`        |                 | Give an error string to display under the field.|
 | `label`         | `String`        |                 | The text string to use for the floating label element.
 | `onChange`      | `Function`      |                 | Callback function that is fired when the component's value changes.
 | `source`    | `Array`         |                 | Array of data objects with the data to represent in the dropdown.
diff --git a/components/dropdown/style.scss b/components/dropdown/style.scss
index 2a7390ca5..3e370fcee 100644
--- a/components/dropdown/style.scss
+++ b/components/dropdown/style.scss
@@ -4,11 +4,6 @@
 
 .root {
   position: relative;
-  width: inherit;
-  margin-bottom: $dropdown-offset;
-  color: $color-text;
-  cursor: pointer;
-  border-bottom: 1px solid $input-text-bottom-border-color;
   &:not(.active) {
     > .values {
       max-height: 0;
@@ -25,15 +20,6 @@
       box-shadow: $zdepth-shadow-1;
     }
   }
-  &.disabled {
-    color: $color-text-secondary;
-    pointer-events: none;
-    cursor: normal;
-    border-bottom-style: dotted;
-    > .value:after {
-      transform: scale(0);
-    }
-  }
   &:not(.up) > .values {
     top: 0;
     bottom: auto;
@@ -42,19 +28,84 @@
     top: auto;
     bottom: 0;
   }
+  &.disabled {
+    pointer-events: none;
+    cursor: normal;
+  }
+}
+
+.value {
+  > input {
+    cursor: pointer;
+  }
+  &:after {
+    $size: ($input-field-height / 7);
+    $border: $size solid transparent;
+    position: absolute;
+    right: ($dropdown-offset / 2);
+    top: 50%;
+    width: 0;
+    height: 0;
+    content: "";
+    border-top: $size solid $input-text-bottom-border-color;
+    border-right: $border;
+    border-left: $border;
+    transition: transform $animation-duration $animation-curve-default;
+  }
+}
+.field {
+  position: relative;
+  padding: $input-padding 0;
+  cursor: pointer;
+  &.errored {
+    padding-bottom: 0;
+    > .label {
+      color: $input-text-error-color;
+    }
+    > .valueWrapper {
+      border-bottom: 1px solid $input-text-error-color;
+    }
+  }
+  &.disabled {
+    cursor: normal;
+    pointer-events: none;
+    > .templateValue {
+      opacity: .7;
+      border-bottom-style: dotted;
+    }
+  }
+}
+
+.templateValue {
+  border-bottom: 1px solid $input-text-bottom-border-color;
+  color: $color-text;
+  min-height: $input-field-height;
+  background-color: $input-text-background-color;
+  padding: $input-field-padding 0;
+  position: relative;
 }
 
 .label {
-  font-size: $font-size-tiny;
-  color: $color-text-secondary;
+  position: absolute;
+  left: 0;
+  font-size: $input-label-font-size;
+  line-height: $input-field-font-size;
+  color: $input-text-label-color;
+  top: $input-focus-label-top;
+}
+
+.error {
+  margin-bottom: - $input-underline-height;
+  font-size: $input-label-font-size;
+  line-height: $input-underline-height;
+  color: $input-text-error-color;
 }
 
 .values {
   @include no-webkit-scrollbar;
+  z-index: $z-index-high;
   position: absolute;
-  z-index: 2;
   width: 100%;
-  overflow-x: hidden;
   overflow-y: auto;
   list-style: none;
   background-color: $dropdown-color-white;
@@ -75,30 +126,3 @@
     }
   }
 }
-
-.value {
-  display: block;
-  > span {
-    display: inline-block;
-    height: $input-field-height;
-    font-size: $input-field-font-size;
-    line-height: $input-field-height;
-  }
-  > :not(span) {
-    margin: ($dropdown-offset / 2) 0;
-  }
-  &:after {
-    $size: ($input-field-height / 7);
-    $border: $size solid transparent;
-    position: absolute;
-    right: ($dropdown-offset / 2);
-    bottom: $dropdown-offset;
-    width: 0;
-    height: 0;
-    content: "";
-    border-top: $size solid $input-text-bottom-border-color;
-    border-right: $border;
-    border-left: $border;
-    transition: transform $animation-duration $animation-curve-default;
-  }
-}
diff --git a/components/input/_config.scss b/components/input/_config.scss
index bc7c5450b..81f78e0a5 100644
--- a/components/input/_config.scss
+++ b/components/input/_config.scss
@@ -1,7 +1,7 @@
 $input-padding: 2 * $unit;
 $input-field-padding: .8 * $unit;
 $input-field-font-size: 1.6 * $unit;
-$input-field-height: $input-field-padding * 2 + $input-field-font-size;
+$input-field-height: $input-field-padding * 2 + $input-field-font-size * 1.4;
 $input-label-font-size: 1.2 * $unit;
 $input-focus-label-top: .6 * $unit;
 $input-text-background-color: transparent !default;
diff --git a/components/input/style.scss b/components/input/style.scss
index 6d613fe55..f77b58967 100644
--- a/components/input/style.scss
+++ b/components/input/style.scss
@@ -111,6 +111,7 @@
 .errored {
   padding-bottom: 0;
   > .input {
+    margin-top: 1px;
     border-bottom-color: $input-text-error-color;
     &:focus {
       ~ .label:not(.fixed) {
diff --git a/spec/components/dropdown.jsx b/spec/components/dropdown.jsx
index a38797e74..14dc6112a 100644
--- a/spec/components/dropdown.jsx
+++ b/spec/components/dropdown.jsx
@@ -41,6 +41,7 @@ class DropdownTest extends React.Component {
         <p>lorem ipsum...</p>
 
         <Dropdown
+          label="Country"
           onChange={this.handleChange.bind(this, 'dropdown1')}
           source={countries}
           template={this.customDropdownItem}
@@ -48,21 +49,17 @@ class DropdownTest extends React.Component {
         />
 
         <Dropdown
-          label="Countries"
-          onChange={this.handleChange.bind(this, 'dropdown2')}
-          source={countries}
-        />
-
-        <Dropdown
+          label="Country"
           onChange={this.handleChange.bind(this, 'dropdown4')}
           source={countries}
           value={this.state.dropdown4}
         />
 
         <Dropdown
-          source={countries}
           disabled
+          label="Country"
           onChange={this.handleChange.bind(this, 'dropdown3')}
+          source={countries}
         />
       </section>
     );

From 802f50f4b3016a8ef1ea4baece9a167f6fe5b6dc Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 20 Dec 2015 17:39:10 +0100
Subject: [PATCH 0288/1024] Use full Toolbox input in autocomplete

---
 components/autocomplete/Autocomplete.jsx      | 16 +++++++++----
 components/autocomplete/readme.md             |  1 -
 components/autocomplete/style.scss            | 24 ++++++++++++-------
 components/dropdown/_config.scss              |  1 -
 components/dropdown/style.scss                | 18 +++++++-------
 .../examples/autocomplete_example_1.txt       |  1 -
 spec/components/autocomplete.jsx              |  3 +--
 7 files changed, 37 insertions(+), 27 deletions(-)

diff --git a/components/autocomplete/Autocomplete.jsx b/components/autocomplete/Autocomplete.jsx
index 11a6248ed..4ddac8d91 100644
--- a/components/autocomplete/Autocomplete.jsx
+++ b/components/autocomplete/Autocomplete.jsx
@@ -37,6 +37,12 @@ class Autocomplete extends React.Component {
     query: this.query(this.props.value)
   };
 
+  componentWillReceiveProps (nextProps) {
+    if (!this.props.multiple) {
+      this.setState({query: nextProps.value});
+    }
+  }
+
   shouldComponentUpdate (nextProps, nextState) {
     if (!this.state.focus && nextState.focus && this.props.direction === POSITION.AUTO) {
       const direction = this.calculateDirection();
@@ -171,20 +177,20 @@ class Autocomplete extends React.Component {
   }
 
   render () {
+    const {error, label, ...other} = this.props;
     const className = ClassNames(style.root, {
-      [style.focus]: this.state.focus,
-      [style.errored]: this.props.error
+      [style.focus]: this.state.focus
     }, this.props.className);
 
     return (
       <div data-react-toolbox='autocomplete' className={className}>
-        {this.props.label ? <label className={style.label}>{this.props.label}</label> : null}
         {this.renderSelected()}
         <Input
+          {...other}
           ref='input'
-          {...this.props}
           className={style.input}
-          label=''
+          error={error}
+          label={label}
           onBlur={this.handleQueryBlur}
           onChange={this.handleQueryChange}
           onFocus={this.handleQueryFocus}
diff --git a/components/autocomplete/readme.md b/components/autocomplete/readme.md
index ff4bb7436..43b72f99e 100644
--- a/components/autocomplete/readme.md
+++ b/components/autocomplete/readme.md
@@ -28,7 +28,6 @@ class AutocompleteTest extends React.Component {
         direction="down"
         label="Choose countries"
         onChange={this.handleChange}
-        placeholder="Pick multiple elements..."
         source={source}
         value={this.state.value}
       />
diff --git a/components/autocomplete/style.scss b/components/autocomplete/style.scss
index caf38d0ce..78d462404 100644
--- a/components/autocomplete/style.scss
+++ b/components/autocomplete/style.scss
@@ -15,11 +15,6 @@
       box-shadow: $zdepth-shadow-1;
     }
   }
-  &.errored {
-    .suggestions {
-      margin-top: - $input-underline-height;
-    }
-  }
 }
 
 .label {
@@ -59,7 +54,7 @@
   transition-duration: $animation-duration;
   transition-property: max-height, box-shadow;
   &:not(.up) {
-    bottom: auto;
+    margin-top: - $input-padding;
   }
   &.up {
     bottom: 0;
@@ -75,6 +70,19 @@
 }
 
 .input {
-  padding-top: 0;
-  padding-bottom: 0;
+  position: relative;
+  &:after {
+    $size: ($input-field-height / 7);
+    $border: $size solid transparent;
+    position: absolute;
+    top: 50%;
+    right: $input-chevron-offset;
+    width: 0;
+    height: 0;
+    content: "";
+    border-top: $size solid $input-text-bottom-border-color;
+    border-right: $border;
+    border-left: $border;
+    transition: transform $animation-duration $animation-curve-default;
+  }
 }
diff --git a/components/dropdown/_config.scss b/components/dropdown/_config.scss
index 58a2ab265..4aea80a20 100644
--- a/components/dropdown/_config.scss
+++ b/components/dropdown/_config.scss
@@ -1,4 +1,3 @@
-$dropdown-offset: 1.6 * $unit;
 $dropdown-color-white: $color-white;
 $dropdown-color-primary: $color-primary;
 $dropdown-color-primary-contrast: $color-primary-contrast;
diff --git a/components/dropdown/style.scss b/components/dropdown/style.scss
index 3e370fcee..89f1053ce 100644
--- a/components/dropdown/style.scss
+++ b/components/dropdown/style.scss
@@ -42,8 +42,8 @@
     $size: ($input-field-height / 7);
     $border: $size solid transparent;
     position: absolute;
-    right: ($dropdown-offset / 2);
     top: 50%;
+    right: $input-chevron-offset;
     width: 0;
     height: 0;
     content: "";
@@ -67,31 +67,31 @@
     }
   }
   &.disabled {
-    cursor: normal;
     pointer-events: none;
+    cursor: normal;
     > .templateValue {
-      opacity: .7;
       border-bottom-style: dotted;
+      opacity: .7;
     }
   }
 }
 
 .templateValue {
-  border-bottom: 1px solid $input-text-bottom-border-color;
-  color: $color-text;
+  position: relative;
   min-height: $input-field-height;
-  background-color: $input-text-background-color;
   padding: $input-field-padding 0;
-  position: relative;
+  color: $color-text;
+  background-color: $input-text-background-color;
+  border-bottom: 1px solid $input-text-bottom-border-color;
 }
 
 .label {
   position: absolute;
+  top: $input-focus-label-top;
   left: 0;
   font-size: $input-label-font-size;
   line-height: $input-field-font-size;
   color: $input-text-label-color;
-  top: $input-focus-label-top;
 }
 
 .error {
@@ -103,8 +103,8 @@
 
 .values {
   @include no-webkit-scrollbar;
-  z-index: $z-index-high;
   position: absolute;
+  z-index: $z-index-high;
   width: 100%;
   overflow-y: auto;
   list-style: none;
diff --git a/docs/app/components/layout/main/modules/examples/autocomplete_example_1.txt b/docs/app/components/layout/main/modules/examples/autocomplete_example_1.txt
index 8ecf4a2d9..a4b93a82e 100644
--- a/docs/app/components/layout/main/modules/examples/autocomplete_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/autocomplete_example_1.txt
@@ -16,7 +16,6 @@ class AutocompleteTest extends React.Component {
         label="Choose countries"
         name="countries"
         onChange={this.handleChange}
-        placeholder="Pick multiple elements..."
         source={source}
         value={this.state.countries}
       />
diff --git a/spec/components/autocomplete.jsx b/spec/components/autocomplete.jsx
index 8d56a78d0..c255d40a8 100644
--- a/spec/components/autocomplete.jsx
+++ b/spec/components/autocomplete.jsx
@@ -25,9 +25,8 @@ class AutocompleteTest extends React.Component {
         <p>You can have a multiple or simple autocomplete.</p>
 
         <Autocomplete
-          label="Choose countries"
           onChange={this.handleMultipleChange}
-          placeholder="Pick multiple elements..."
+          label="Pick multiple elements..."
           source={countriesObject}
           value={this.state.multiple}
         />

From 3479f5b54e0c4d201de0efa81e4ccbfc90c486c2 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 20 Dec 2015 17:51:18 +0100
Subject: [PATCH 0289/1024] Add error field to date picker

---
 components/date_picker/DatePicker.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/date_picker/DatePicker.jsx b/components/date_picker/DatePicker.jsx
index 2debe2275..c2589f5b4 100644
--- a/components/date_picker/DatePicker.jsx
+++ b/components/date_picker/DatePicker.jsx
@@ -7,6 +7,7 @@ import time from '../utils/time';
 
 class DatePicker extends React.Component {
   static propTypes = {
+    error: React.PropTypes.string,
     label: React.PropTypes.string,
     maxDate: React.PropTypes.object,
     minDate: React.PropTypes.object,
@@ -40,6 +41,7 @@ class DatePicker extends React.Component {
       <div data-toolbox='date-picker'>
         <Input
           className={style.input}
+          error={this.props.error}
           onMouseDown={this.handleInputMouseDown}
           label={this.props.label}
           readOnly

From 027fc12600aab6f9e46042e8394a8541a91f950a Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 20 Dec 2015 17:51:46 +0100
Subject: [PATCH 0290/1024] Add missing variable for chevron

---
 components/input/_config.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/input/_config.scss b/components/input/_config.scss
index 81f78e0a5..e3d9fb92f 100644
--- a/components/input/_config.scss
+++ b/components/input/_config.scss
@@ -15,3 +15,4 @@ $input-underline-height:  2 * $unit;
 $input-icon-font-size: 2.4 * $unit;
 $input-icon-size: 2 * $input-icon-font-size;
 $input-icon-offset: 1.6 * $unit;
+$input-chevron-offset: .8 * $unit;

From 20d6787cb007aeaf8eeddc2dec40a096b952bd3c Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 20 Dec 2015 17:52:01 +0100
Subject: [PATCH 0291/1024] Add error field to timepicker

---
 components/time_picker/TimePicker.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/time_picker/TimePicker.jsx b/components/time_picker/TimePicker.jsx
index 1fd7eb73e..86dc1981b 100644
--- a/components/time_picker/TimePicker.jsx
+++ b/components/time_picker/TimePicker.jsx
@@ -8,6 +8,7 @@ import TimePickerDialog from './TimePickerDialog';
 class TimePicker extends React.Component {
   static propTypes = {
     className: React.PropTypes.string,
+    error: React.PropTypes.string,
     format: React.PropTypes.oneOf(['24hr', 'ampm']),
     label: React.PropTypes.string,
     onChange: React.PropTypes.func,
@@ -44,6 +45,7 @@ class TimePicker extends React.Component {
       <div data-react-toolbox='time-picker'>
         <Input
           className={style.input}
+          error={this.props.error}
           label={this.props.label}
           onMouseDown={this.handleInputMouseDown}
           readOnly

From 515169dc360c6e75bdaf46b70e07bc9e4c77f292 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 20 Dec 2015 17:55:34 +0100
Subject: [PATCH 0292/1024] Improve datepicker example

---
 components/date_picker/readme.md                          | 8 ++------
 .../layout/main/modules/examples/datepicker_example_1.txt | 8 ++------
 2 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/components/date_picker/readme.md b/components/date_picker/readme.md
index b48d65f6b..28e6e5dcf 100644
--- a/components/date_picker/readme.md
+++ b/components/date_picker/readme.md
@@ -12,14 +12,10 @@ datetime.setHours(17);
 datetime.setMinutes(28);
 
 class DatePickerTest extends React.Component {
-  state = {
-    date2: datetime
-  };
+  state = {date2: datetime};
 
   handleChange = (item, value) => {
-    const newState = {};
-    newState[item] = value;
-    this.setState(newState);
+    this.setState({...this.state, [item]: value});
   };
 
   render () {
diff --git a/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt b/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt
index e44e507ca..cf1960197 100644
--- a/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt
@@ -5,14 +5,10 @@ datetime.setHours(17);
 datetime.setMinutes(28);
 
 class DatePickerTest extends React.Component {
-  state = {
-    date2: datetime
-  };
+  state = {date2: datetime};
 
   handleChange = (item, value) => {
-    const newState = {};
-    newState[item] = value;
-    this.setState(newState);
+    this.setState({...this.state, [item]: value});
   };
 
   render () {

From 2d931ce7167cd87de2e325abe6d22b3cf68f090a Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 20 Dec 2015 17:57:04 +0100
Subject: [PATCH 0293/1024] Fix scss-lint errors

---
 components/card/style.scss | 2 +-
 components/list/style.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/card/style.scss b/components/card/style.scss
index 912c5952e..c2ca9fd07 100644
--- a/components/card/style.scss
+++ b/components/card/style.scss
@@ -24,8 +24,8 @@
   background-position: center center;
   background-size: cover;
   &.wide, &.square {
-    height: 0;
     width: 100%;
+    height: 0;
     .content {
       position: absolute;
       height: 100%;
diff --git a/components/list/style.scss b/components/list/style.scss
index 13847628c..867f517bd 100644
--- a/components/list/style.scss
+++ b/components/list/style.scss
@@ -108,9 +108,9 @@
 
 .avatar {
   display: flex;
-  flex: 0 0 auto;
   width: $list-item-avatar-height;
   height: $list-item-avatar-height;
+  flex: 0 0 auto;
   margin: $list-item-avatar-margin $list-horizontal-padding $list-item-avatar-margin 0;
   overflow: hidden;
   border-radius: 50%;

From aead7f0a8fe7300e1ce6ad21abafd298cd8f5ab5 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 20 Dec 2015 18:08:26 +0100
Subject: [PATCH 0294/1024] Add pickers classNames to customize appereance

---
 components/date_picker/DatePicker.jsx       | 2 ++
 components/date_picker/readme.md            | 1 +
 components/time_picker/TimePicker.jsx       | 1 +
 components/time_picker/TimePickerDialog.jsx | 4 +++-
 components/time_picker/readme.md            | 2 +-
 5 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/components/date_picker/DatePicker.jsx b/components/date_picker/DatePicker.jsx
index c2589f5b4..8243a02cc 100644
--- a/components/date_picker/DatePicker.jsx
+++ b/components/date_picker/DatePicker.jsx
@@ -7,6 +7,7 @@ import time from '../utils/time';
 
 class DatePicker extends React.Component {
   static propTypes = {
+    className: React.PropTypes.string,
     error: React.PropTypes.string,
     label: React.PropTypes.string,
     maxDate: React.PropTypes.object,
@@ -50,6 +51,7 @@ class DatePicker extends React.Component {
         />
         <DatePickerDialog
           active={this.state.active}
+          className={this.props.className}
           maxDate={this.props.maxDate}
           minDate={this.props.minDate}
           onDismiss={this.handleDismiss}
diff --git a/components/date_picker/readme.md b/components/date_picker/readme.md
index 28e6e5dcf..629a91e90 100644
--- a/components/date_picker/readme.md
+++ b/components/date_picker/readme.md
@@ -33,6 +33,7 @@ class DatePickerTest extends React.Component {
 
 | Name          | Type    | Default         | Description|
 |:-----|:-----|:-----|:-----|
+| `className`         | `String`        |             | This class will be placed at the top of the `DatePickerDialog` component so you can provide custom styles.|
 | `label`         | `String`        |             | The text string to use for the floating label element in the input component.|
 | `maxDate`         | `Date`    |                 | Date object with the maximum selectable date. |
 | `minDate`         | `Date`    |                 | Date object with the minimum selectable date. |
diff --git a/components/time_picker/TimePicker.jsx b/components/time_picker/TimePicker.jsx
index 86dc1981b..591ca9d35 100644
--- a/components/time_picker/TimePicker.jsx
+++ b/components/time_picker/TimePicker.jsx
@@ -54,6 +54,7 @@ class TimePicker extends React.Component {
         />
         <TimePickerDialog
           active={this.state.active}
+          className={this.props.className}
           format={format}
           onDismiss={this.handleDismiss}
           onSelect={this.handleSelect}
diff --git a/components/time_picker/TimePickerDialog.jsx b/components/time_picker/TimePickerDialog.jsx
index 6465fe9d6..c4ec76c9c 100644
--- a/components/time_picker/TimePickerDialog.jsx
+++ b/components/time_picker/TimePickerDialog.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import ClassNames from 'classnames';
 import style from './style';
 import time from '../utils/time';
 import Clock from './Clock';
@@ -7,6 +8,7 @@ import Dialog from '../dialog';
 class TimePickerDialog extends React.Component {
   static propTypes = {
     active: React.PropTypes.bool,
+    className: React.PropTypes.string,
     format: React.PropTypes.oneOf(['24hr', 'ampm']),
     onDismiss: React.PropTypes.func,
     onSelect: React.PropTypes.func,
@@ -77,7 +79,7 @@ class TimePickerDialog extends React.Component {
   render () {
     const display = `display-${this.state.display}`;
     const format = `format-${time.getTimeMode(this.state.displayTime)}`;
-    const className = `${style.dialog} ${style[display]} ${style[format]}`;
+    const className = ClassNames([style.dialog, style[display], style[format]], this.props.className);
     return (
       <Dialog active={this.props.active} className={className} actions={this.actions}>
         <header className={style.header}>
diff --git a/components/time_picker/readme.md b/components/time_picker/readme.md
index 6b771657c..de564f8c4 100644
--- a/components/time_picker/readme.md
+++ b/components/time_picker/readme.md
@@ -26,7 +26,7 @@ class TimePickerTest extends React.Component {
 
 | Name          | Type    | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `className`  | `String`    |     `''`            | Sets a class to give customized styles.|
+| `className`         | `String`        |             | This class will be placed at the top of the `TimePickerDialog` component so you can provide custom styles.|
 | `format`    | `String`  | `24hr`          | Format to display the clock. It can be `24hr` or `ampm`.|
 | `label`         | `String`        |             | The text string to use for the floating label element in the input component.|
 | `onChange`       | `Function`       |                | Callback called when the picker value is changed.|

From b037994375249efd7e79ab983f43828c72188b04 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 20 Dec 2015 18:17:50 +0100
Subject: [PATCH 0295/1024] Fixes #157

---
 components/dropdown/Dropdown.jsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/components/dropdown/Dropdown.jsx b/components/dropdown/Dropdown.jsx
index 97b66f72e..7c1cd159b 100644
--- a/components/dropdown/Dropdown.jsx
+++ b/components/dropdown/Dropdown.jsx
@@ -11,7 +11,9 @@ class Dropdown extends React.Component {
     disabled: React.PropTypes.bool,
     error: React.PropTypes.string,
     label: React.PropTypes.string,
+    onBlur: React.PropTypes.func,
     onChange: React.PropTypes.func,
+    onFocus: React.PropTypes.func,
     source: React.PropTypes.array.isRequired,
     template: React.PropTypes.func,
     value: React.PropTypes.string
@@ -33,10 +35,12 @@ class Dropdown extends React.Component {
     const client = event.target.getBoundingClientRect();
     const screen_height = window.innerHeight || document.documentElement.offsetHeight;
     const up = this.props.auto ? client.top > ((screen_height / 2) + client.height) : false;
+    if (this.props.onFocus) this.props.onFocus();
     this.setState({active: true, up});
   };
 
   handleSelect = (item, event) => {
+    if (this.props.onBlur) this.props.onBlur();
     if (!this.props.disabled && this.props.onChange) {
       this.props.onChange(item, event);
       this.setState({active: false});

From 086a0ae15daddcd1da0609af9f2cdfb504931a1c Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 20 Dec 2015 18:48:17 +0100
Subject: [PATCH 0296/1024] Fix icon for link demo

---
 components/link/readme.md                                       | 2 +-
 .../components/layout/main/modules/examples/link_example_1.txt  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/link/readme.md b/components/link/readme.md
index 4589c487b..60d8e3239 100644
--- a/components/link/readme.md
+++ b/components/link/readme.md
@@ -9,7 +9,7 @@ import Link from 'react-toolbox/lib/link';
 const LinksTest = () => (
   <nav>
     <Link href="http://github.com/#/components/link" label="Work" count={4} icon='business' />
-    <Link href="http://github.com/#/components/link" label="Blog" icon='speaker-notes' />
+    <Link href="http://github.com/#/components/link" label="Blog" icon='speaker_notes' />
     <Link href="http://github.com/#/components/link" label="Explore" icon='explore' />
   </nav>
 );
diff --git a/docs/app/components/layout/main/modules/examples/link_example_1.txt b/docs/app/components/layout/main/modules/examples/link_example_1.txt
index 4b5af365f..fd10593a1 100644
--- a/docs/app/components/layout/main/modules/examples/link_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/link_example_1.txt
@@ -1,7 +1,7 @@
 const LinksTest = () => (
   <nav>
     <Link href="#/components/link" label="Work" count={4} icon='business' />
-    <Link href="#/components/link" label="Blog" icon='speaker-notes' />
+    <Link href="#/components/link" label="Blog" icon='speaker_notes' />
     <Link href="#/components/link" label="Explore" icon='explore' />
   </nav>
 );

From 6cc95c5bc1e59f6b739ea46f791f2ad053558740 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 20 Dec 2015 18:50:25 +0100
Subject: [PATCH 0297/1024] Bugfix in dropdown errored styling

---
 components/dropdown/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/dropdown/style.scss b/components/dropdown/style.scss
index 89f1053ce..6e8a65297 100644
--- a/components/dropdown/style.scss
+++ b/components/dropdown/style.scss
@@ -62,7 +62,7 @@
     > .label {
       color: $input-text-error-color;
     }
-    > .valueWrapper {
+    > .templateValue {
       border-bottom: 1px solid $input-text-error-color;
     }
   }

From 055c6e37a900703de5ff4898a07e06c6394f864f Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 20 Dec 2015 19:18:31 +0100
Subject: [PATCH 0298/1024] Add ripple documentation

---
 components/ripple/readme.md                   | 27 +++++++++++++++++++
 .../layout/main/modules/components.js         |  8 ++++++
 .../modules/examples/ripple_example_1.txt     | 10 +++++++
 3 files changed, 45 insertions(+)
 create mode 100644 components/ripple/readme.md
 create mode 100644 docs/app/components/layout/main/modules/examples/ripple_example_1.txt

diff --git a/components/ripple/readme.md b/components/ripple/readme.md
new file mode 100644
index 000000000..ddeacba21
--- /dev/null
+++ b/components/ripple/readme.md
@@ -0,0 +1,27 @@
+# Ripple
+
+The ripple is a surface reaction that happens when the user interacts with the component. It's useful to provide feedback about a click or touch action. In React Toolbox it's implemented as an higher order component (HOC) being a requirement for the child to implement `children` and `onMouseDown` props. Also it should be placed as relative. Hiding the overflow is up to you.
+
+<!-- example -->
+```jsx
+import Ripple from 'react-toolbox/lib/ripple';
+
+const Link = (props) => (
+  <a {...props} style={{position: 'relative'}}>
+    {props.children}
+  </a>
+);
+
+const RippleLink = Ripple({spread: 3})(Link);
+const RippleTest = () => <RippleLink href='#'>Test</RippleLink>;
+```
+
+## Properties
+
+In any component you decorate with the Ripple you'd get some additional props:
+
+| Name      | Type      | Default         | Description|
+|:-----|:-----|:-----|:-----|
+| `centered`     | `Boolean`  | `false` | True in case you want a centered ripple.|
+| `className`     | `String`  | `''` | String to customize appearance (color and opacity for example).|
+| `spread`     | `Number`  | `2` | Factor to indicate how much should the ripple spread under the component. |
diff --git a/docs/app/components/layout/main/modules/components.js b/docs/app/components/layout/main/modules/components.js
index d0d5108e2..654f2de7a 100644
--- a/docs/app/components/layout/main/modules/components.js
+++ b/docs/app/components/layout/main/modules/components.js
@@ -17,6 +17,7 @@ import Menu from 'react-toolbox/menu/readme';
 import Navigation from 'react-toolbox/navigation/readme';
 import ProgressBar from 'react-toolbox/progress_bar/readme';
 import RadioGroup from 'react-toolbox/radio/readme';
+import Ripple from 'react-toolbox/ripple/readme';
 import Slider from 'react-toolbox/slider/readme';
 import Snackbar from 'react-toolbox/snackbar/readme';
 import Switch from 'react-toolbox/switch/readme';
@@ -44,6 +45,7 @@ import NavigationExample1 from './examples/navigation_example_1.txt';
 import ProgressBarExample1 from './examples/progressbar_example_1.txt';
 import RadioExample1 from './examples/radio_example_1.txt';
 import SliderExample1 from './examples/slider_example_1.txt';
+import RippleExample1 from './examples/ripple_example_1.txt';
 import SnackbarExample1 from './examples/snackbar_example_1.txt';
 import SwitchExample1 from './examples/switch_example_1.txt';
 import TableExample1 from './examples/table_example_1.txt';
@@ -159,6 +161,12 @@ export default {
     path: '/components/radio_group',
     examples: [RadioExample1]
   },
+  ripple: {
+    name: 'Ripple',
+    docs: Ripple,
+    path: '/components/ripple',
+    examples: [RippleExample1]
+  },
   slider: {
     name: 'Slider',
     docs: Slider,
diff --git a/docs/app/components/layout/main/modules/examples/ripple_example_1.txt b/docs/app/components/layout/main/modules/examples/ripple_example_1.txt
new file mode 100644
index 000000000..4fb40987d
--- /dev/null
+++ b/docs/app/components/layout/main/modules/examples/ripple_example_1.txt
@@ -0,0 +1,10 @@
+const CustomLink = (props) => (
+  <a {...props} style={{position: 'relative'}}>
+    {props.children}
+  </a>
+);
+
+const RippleLink = Ripple({spread: 3})(CustomLink);
+const RippleTest = () => <RippleLink>Test</RippleLink>;
+
+return <RippleTest />;

From 794912990afdc0e6c7c6ad691a016a40462051c9 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 20 Dec 2015 19:24:02 +0100
Subject: [PATCH 0299/1024] 0.14.0 release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 17a49e879..46b9fde70 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-toolbox",
-  "version": "0.13.4",
+  "version": "0.14.0",
   "homepage": "http://www.react-toolbox.com/",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "author": "React Toolbox Team (http://github.com/react-toolbox)",

From f6047f880fa59e3179993183762eb970602e455b Mon Sep 17 00:00:00 2001
From: Araphel <bartekus@gmail.com>
Date: Wed, 23 Dec 2015 14:21:41 -0700
Subject: [PATCH 0300/1024] Bebel 6 Integrated, Stage-0 added, React updated

---
 .babelrc                                  |  14 +-
 components/autocomplete/Autocomplete.jsx  | 412 +++++++++++-----------
 components/slider/Slider.jsx              |   2 +-
 docs/.babelrc                             |  19 +
 docs/.eslintrc                            | 237 +++++++++++++
 docs/app/components/layout/main/index.jsx |   2 +
 docs/package.json                         |  25 +-
 docs/server.js                            |  17 +-
 docs/webpack.config.development.js        |  10 +-
 docs/webpack.config.production.js         |   8 +-
 package.json                              |  34 +-
 server.js                                 |  19 +-
 webpack.config.development.js             |  10 +-
 webpack.config.test.js                    |   4 +-
 14 files changed, 540 insertions(+), 273 deletions(-)
 create mode 100644 docs/.babelrc
 create mode 100644 docs/.eslintrc

diff --git a/.babelrc b/.babelrc
index 06454b6f8..a4ac5ba84 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,11 +1,9 @@
 {
-  "stage": 2,
-  "optional": ["es7.classProperties", "es7.exportExtensions"],
+  "presets": ["react", "es2015", "stage-0"],
   "env": {
     "development": {
-      "plugins": ["react-transform"],
-      "extra": {
-        "react-transform": {
+      "plugins": [
+        ["react-transform", {
           "transforms": [{
             "transform": "react-transform-hmr",
             "imports": ["react"],
@@ -14,8 +12,8 @@
             "transform": "react-transform-catch-errors",
             "imports": ["react", "redbox-react"]
           }]
-        }
-      }
+        }]
+      ]
     }
   }
-}
+}
\ No newline at end of file
diff --git a/components/autocomplete/Autocomplete.jsx b/components/autocomplete/Autocomplete.jsx
index 4ddac8d91..e340298c0 100644
--- a/components/autocomplete/Autocomplete.jsx
+++ b/components/autocomplete/Autocomplete.jsx
@@ -1,206 +1,206 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import ClassNames from 'classnames';
-import Input from '../input';
-import events from '../utils/events';
-import style from './style';
-
-const POSITION = {
-  AUTO: 'auto',
-  DOWN: 'down',
-  UP: 'up'
-};
-
-class Autocomplete extends React.Component {
-  static propTypes = {
-    className: React.PropTypes.string,
-    direction: React.PropTypes.oneOf(['auto', 'up', 'down']),
-    disabled: React.PropTypes.bool,
-    error: React.PropTypes.string,
-    label: React.PropTypes.string,
-    multiple: React.PropTypes.bool,
-    onChange: React.PropTypes.func,
-    source: React.PropTypes.any,
-    value: React.PropTypes.any
-  };
-
-  static defaultProps = {
-    className: '',
-    direction: 'auto',
-    multiple: true,
-    source: {}
-  };
-
-  state = {
-    direction: this.props.direction,
-    focus: false,
-    query: this.query(this.props.value)
-  };
-
-  componentWillReceiveProps (nextProps) {
-    if (!this.props.multiple) {
-      this.setState({query: nextProps.value});
-    }
-  }
-
-  shouldComponentUpdate (nextProps, nextState) {
-    if (!this.state.focus && nextState.focus && this.props.direction === POSITION.AUTO) {
-      const direction = this.calculateDirection();
-      if (this.state.direction !== direction) {
-        this.setState({ direction });
-        return false;
-      }
-    }
-    return true;
-  }
-
-  handleChange = (keys, event) => {
-    const key = this.props.multiple ? keys : keys[0];
-    const query = this.query(key);
-    if (this.props.onChange) this.props.onChange(key, event);
-    this.setState({ focus: false, query }, () => { this.refs.input.blur(); });
-  };
-
-  handleQueryBlur = () => {
-    if (this.state.focus) this.setState({focus: false});
-  };
-
-  handleQueryChange = (value) => {
-    this.setState({query: value});
-  };
-
-  handleQueryFocus = () => {
-    this.refs.suggestions.scrollTop = 0;
-    this.setState({active: '', focus: true});
-  };
-
-  handleQueryKeyUp = (event) => {
-    if (event.which === 13 && this.state.active) this.select(this.state.active, event);
-    if (event.which === 27) this.refs.input.blur();
-    if ([40, 38].indexOf(event.which) !== -1) {
-      const suggestionsKeys = [...this.suggestions().keys()];
-      let index = suggestionsKeys.indexOf(this.state.active) + (event.which === 40 ? +1 : -1);
-      if (index < 0) index = suggestionsKeys.length - 1;
-      if (index >= suggestionsKeys.length) index = 0;
-      this.setState({active: suggestionsKeys[index]});
-    }
-  };
-
-  handleSuggestionHover = (key) => {
-    this.setState({active: key});
-  };
-
-  calculateDirection () {
-    if (this.props.direction === 'auto') {
-      const client = ReactDOM.findDOMNode(this.refs.input).getBoundingClientRect();
-      const screen_height = window.innerHeight || document.documentElement.offsetHeight;
-      const up = client.top > ((screen_height / 2) + client.height);
-      return up ? 'up' : 'down';
-    } else {
-      return this.props.direction;
-    }
-  }
-
-  query (key) {
-    return !this.props.multiple && this.props.value ? this.source().get(key) : '';
-  }
-
-  suggestions () {
-    const suggestions = new Map();
-    const query = this.state.query.toLowerCase().trim() || '';
-    const values = this.values();
-    for (const [key, value] of this.source()) {
-      if (!values.has(key) && value.toLowerCase().trim().startsWith(query)) {
-        suggestions.set(key, value);
-      }
-    }
-    return suggestions;
-  }
-
-  source () {
-    const { source } = this.props;
-    if (source.hasOwnProperty('length')) {
-      return new Map(source.map((item) => [item, item]));
-    } else {
-      return new Map(Object.keys(source).map((key) => [key, source[key]]));
-    }
-  }
-
-  values () {
-    const valueMap = new Map();
-    const values = this.props.multiple ? this.props.value : [this.props.value];
-    for (const [k, v] of this.source()) {
-      if (values.indexOf(k) !== -1) valueMap.set(k, v);
-    }
-    return valueMap;
-  }
-
-  select (key, event) {
-    events.pauseEvent(event);
-    const values = this.values(this.props.value);
-    this.handleChange([key, ...values.keys()], event);
-  }
-
-  unselect (key, event) {
-    const values = this.values(this.props.value);
-    values.delete(key);
-    this.handleChange([...values.keys()], event);
-  }
-
-  renderSelected () {
-    if (this.props.multiple) {
-      const selectedItems = [...this.values()].map(([key, value]) => {
-        return <li key={key} className={style.value} onClick={this.unselect.bind(this, key)}>{value}</li>;
-      });
-
-      return <ul className={style.values}>{selectedItems}</ul>;
-    }
-  }
-
-  renderSuggestions () {
-    const suggestions = [...this.suggestions()].map(([key, value]) => {
-      const className = ClassNames(style.suggestion, {[style.active]: this.state.active === key});
-      return (
-        <li
-          key={key}
-          className={className}
-          onMouseDown={this.select.bind(this, key)}
-          onMouseOver={this.handleSuggestionHover.bind(this, key)}
-        >
-          {value}
-        </li>
-      );
-    });
-
-    const className = ClassNames(style.suggestions, {[style.up]: this.state.direction === 'up'});
-    return <ul ref='suggestions' className={className}>{suggestions}</ul>;
-  }
-
-  render () {
-    const {error, label, ...other} = this.props;
-    const className = ClassNames(style.root, {
-      [style.focus]: this.state.focus
-    }, this.props.className);
-
-    return (
-      <div data-react-toolbox='autocomplete' className={className}>
-        {this.renderSelected()}
-        <Input
-          {...other}
-          ref='input'
-          className={style.input}
-          error={error}
-          label={label}
-          onBlur={this.handleQueryBlur}
-          onChange={this.handleQueryChange}
-          onFocus={this.handleQueryFocus}
-          onKeyUp={this.handleQueryKeyUp}
-          value={this.state.query}
-        />
-        {this.renderSuggestions()}
-      </div>
-    );
-  }
-}
-
-export default Autocomplete;
+//import React from 'react';
+//import ReactDOM from 'react-dom';
+//import ClassNames from 'classnames';
+//import Input from '../input';
+//import events from '../utils/events';
+//import style from './style';
+//
+//const POSITION = {
+//  AUTO: 'auto',
+//  DOWN: 'down',
+//  UP: 'up'
+//};
+//
+//class Autocomplete extends React.Component {
+//  static propTypes = {
+//    className: React.PropTypes.string,
+//    direction: React.PropTypes.oneOf(['auto', 'up', 'down']),
+//    disabled: React.PropTypes.bool,
+//    error: React.PropTypes.string,
+//    label: React.PropTypes.string,
+//    multiple: React.PropTypes.bool,
+//    onChange: React.PropTypes.func,
+//    source: React.PropTypes.any,
+//    value: React.PropTypes.any
+//  };
+//
+//  static defaultProps = {
+//    className: '',
+//    direction: 'auto',
+//    multiple: true,
+//    source: {}
+//  };
+//
+//  state = {
+//    direction: this.props.direction,
+//    focus: false,
+//    query: this.query(this.props.value)
+//  };
+//
+//  componentWillReceiveProps (nextProps) {
+//    if (!this.props.multiple) {
+//      this.setState({query: nextProps.value});
+//    }
+//  }
+//
+//  shouldComponentUpdate (nextProps, nextState) {
+//    if (!this.state.focus && nextState.focus && this.props.direction === POSITION.AUTO) {
+//      const direction = this.calculateDirection();
+//      if (this.state.direction !== direction) {
+//        this.setState({ direction });
+//        return false;
+//      }
+//    }
+//    return true;
+//  }
+//
+//  handleChange = (keys, event) => {
+//    const key = this.props.multiple ? keys : keys[0];
+//    const query = this.query(key);
+//    if (this.props.onChange) this.props.onChange(key, event);
+//    this.setState({ focus: false, query }, () => { this.refs.input.blur(); });
+//  };
+//
+//  handleQueryBlur = () => {
+//    if (this.state.focus) this.setState({focus: false});
+//  };
+//
+//  handleQueryChange = (value) => {
+//    this.setState({query: value});
+//  };
+//
+//  handleQueryFocus = () => {
+//    this.refs.suggestions.scrollTop = 0;
+//    this.setState({active: '', focus: true});
+//  };
+//
+//  handleQueryKeyUp = (event) => {
+//    if (event.which === 13 && this.state.active) this.select(this.state.active, event);
+//    if (event.which === 27) this.refs.input.blur();
+//    if ([40, 38].indexOf(event.which) !== -1) {
+//      const suggestionsKeys = [...this.suggestions().keys()];
+//      let index = suggestionsKeys.indexOf(this.state.active) + (event.which === 40 ? +1 : -1);
+//      if (index < 0) index = suggestionsKeys.length - 1;
+//      if (index >= suggestionsKeys.length) index = 0;
+//      this.setState({active: suggestionsKeys[index]});
+//    }
+//  };
+//
+//  handleSuggestionHover = (key) => {
+//    this.setState({active: key});
+//  };
+//
+//  calculateDirection () {
+//    if (this.props.direction === 'auto') {
+//      const client = ReactDOM.findDOMNode(this.refs.input).getBoundingClientRect();
+//      const screen_height = window.innerHeight || document.documentElement.offsetHeight;
+//      const up = client.top > ((screen_height / 2) + client.height);
+//      return up ? 'up' : 'down';
+//    } else {
+//      return this.props.direction;
+//    }
+//  }
+//
+//  query (key) {
+//    return !this.props.multiple && this.props.value ? this.source().get(key) : '';
+//  }
+//
+//  suggestions2 () {
+//    const suggestions2 = new Map();
+//    const query = this.state.query.toLowerCase().trim() || '';
+//    const values = this.values();
+//    for (const [key, value] of this.source()) {
+//      if (!values.has(key) && value.toLowerCase().trim().startsWith(query)) {
+//        suggestions2.set(key, value);
+//      }
+//    }
+//    return suggestions2;
+//  }
+//
+//  source () {
+//    const { source } = this.props;
+//    if (source.hasOwnProperty('length')) {
+//      return new Map(source.map((item) => [item, item]));
+//    } else {
+//      return new Map(Object.keys(source).map((key) => [key, source[key]]));
+//    }
+//  }
+//
+//  values () {
+//    const valueMap = new Map();
+//    const values = this.props.multiple ? this.props.value : [this.props.value];
+//    for (const [k, v] of this.source()) {
+//      if (values.indexOf(k) !== -1) valueMap.set(k, v);
+//    }
+//    return valueMap;
+//  }
+//
+//  select (key, event) {
+//    events.pauseEvent(event);
+//    const values = this.values(this.props.value);
+//    this.handleChange([key, ...values.keys()], event);
+//  }
+//
+//  unselect (key, event) {
+//    const values = this.values(this.props.value);
+//    values.delete(key);
+//    this.handleChange([...values.keys()], event);
+//  }
+//
+//  renderSelected () {
+//    if (this.props.multiple) {
+//      const selectedItems = [...this.values()].map(([key, value]) => {
+//        return <li key={key} className={style.value} onClick={this.unselect.bind(this, key)}>{value}</li>;
+//      });
+//
+//      return <ul className={style.values}>{selectedItems}</ul>;
+//    }
+//  }
+//
+//  renderSuggestions () {
+//    const suggestions2 = [...this.suggestions2()].map(([key, value]) => {
+//      const className = ClassNames(style.suggestion, {[style.active]: this.state.active === key});
+//      return (
+//        <li
+//          key={key}
+//          className={className}
+//          onMouseDown={this.select.bind(this, key)}
+//          onMouseOver={this.handleSuggestionHover.bind(this, key)}
+//        >
+//          {value}
+//        </li>
+//      );
+//    });
+//
+//    const className = ClassNames(style.suggestions2, {[style.up]: this.state.direction === 'up'});
+//    return <ul ref='suggestions' className={className}>{suggestions}</ul>;
+//  }
+//
+//  render () {
+//    const {error, label, ...other} = this.props;
+//    const className = ClassNames(style.root, {
+//      [style.focus]: this.state.focus
+//    }, this.props.className);
+//
+//    return (
+//      <div data-react-toolbox='autocomplete' className={className}>
+//        {this.renderSelected()}
+//        <Input
+//          {...other}
+//          ref='input'
+//          className={style.input}
+//          error={error}
+//          label={label}
+//          onBlur={this.handleQueryBlur}
+//          onChange={this.handleQueryChange}
+//          onFocus={this.handleQueryFocus}
+//          onKeyUp={this.handleQueryKeyUp}
+//          value={this.state.query}
+//        />
+//        {this.renderSuggestions()}
+//      </div>
+//    );
+//  }
+//}
+//
+//export default Autocomplete;
diff --git a/components/slider/Slider.jsx b/components/slider/Slider.jsx
index 586172110..34ecef81a 100644
--- a/components/slider/Slider.jsx
+++ b/components/slider/Slider.jsx
@@ -102,7 +102,7 @@ class Slider extends React.Component {
 
   handleResize = (event, callback) => {
     const {left, right} = ReactDOM.findDOMNode(this.refs.progressbar).getBoundingClientRect();
-    const cb = callback || () => {};
+    const cb = (callback) || (() => {});
     this.setState({sliderStart: left, sliderLength: right - left}, cb);
   };
 
diff --git a/docs/.babelrc b/docs/.babelrc
new file mode 100644
index 000000000..a4ac5ba84
--- /dev/null
+++ b/docs/.babelrc
@@ -0,0 +1,19 @@
+{
+  "presets": ["react", "es2015", "stage-0"],
+  "env": {
+    "development": {
+      "plugins": [
+        ["react-transform", {
+          "transforms": [{
+            "transform": "react-transform-hmr",
+            "imports": ["react"],
+            "locals": ["module"]
+          }, {
+            "transform": "react-transform-catch-errors",
+            "imports": ["react", "redbox-react"]
+          }]
+        }]
+      ]
+    }
+  }
+}
\ No newline at end of file
diff --git a/docs/.eslintrc b/docs/.eslintrc
new file mode 100644
index 000000000..6f9f9cd88
--- /dev/null
+++ b/docs/.eslintrc
@@ -0,0 +1,237 @@
+{
+  "env": {
+    "browser": true,
+    "node": true,
+    "mocha": true,
+    "es6": true
+  },
+
+  "ecmaFeatures": {
+    "jsx": true,
+    "templateStrings": true,
+    "superInFunctions": false,
+    "classes": true,
+    "modules": true
+  },
+
+  "parser": "babel-eslint",
+
+  "plugins": [
+    "babel",
+    "react"
+  ],
+
+  "rules": {
+    "block-scoped-var": [0],
+    "brace-style": [2, "1tbs", {
+      "allowSingleLine": true
+    }],
+    "camelcase": [0],
+    "comma-dangle": [2, "never"],
+    "comma-spacing": [2],
+    "comma-style": [2, "last"],
+    "complexity": [0, 11],
+    "constructor-super": [2],
+    "consistent-return": [2],
+    "consistent-this": [0, "that"],
+    "curly": [2, "multi-line"],
+    "default-case": [2],
+    "dot-notation": [2, {
+      "allowKeywords": true
+    }],
+    "eol-last": [2],
+    "eqeqeq": [2],
+    "func-names": [0],
+    "func-style": [0, "declaration"],
+    "generator-star-spacing": [2, "after"],
+    "strict": [2, "always"],
+    "guard-for-in": [0],
+    "handle-callback-err": [0],
+    "key-spacing": [2, {
+      "beforeColon": false,
+      "afterColon": true
+    }],
+    "quotes": [2, "single", "avoid-escape"],
+    "max-depth": [0, 4],
+    "max-len": [0, 80, 4],
+    "max-nested-callbacks": [0, 2],
+    "max-params": [0, 3],
+    "max-statements": [0, 10],
+    "new-parens": [2],
+    "new-cap": [0],
+    "newline-after-var": [0],
+    "no-alert": [2],
+    "no-array-constructor": [2],
+    "no-bitwise": [0],
+    "no-caller": [2],
+    "no-catch-shadow": [2],
+    "no-cond-assign": [2],
+    "no-console": [0],
+    "no-constant-condition": [1],
+    "no-continue": [2],
+    "no-control-regex": [2],
+    "no-debugger": [2],
+    "no-delete-var": [2],
+    "no-div-regex": [0],
+    "no-dupe-args": [2],
+    "no-dupe-keys": [2],
+    "no-duplicate-case": [2],
+    "no-else-return": [0],
+    "no-empty": [2],
+    "no-empty-character-class": [2],
+    "no-empty-label": [2],
+    "no-eq-null": [0],
+    "no-eval": [2],
+    "no-ex-assign": [2],
+    "no-extend-native": [1],
+    "no-extra-bind": [2],
+    "no-extra-boolean-cast": [2],
+    "no-extra-parens": [0],
+    "no-extra-semi": [1],
+    "no-fallthrough": [2],
+    "no-floating-decimal": [2],
+    "no-func-assign": [2],
+    "no-implied-eval": [2],
+    "no-inline-comments": [0],
+    "no-inner-declarations": [2, "functions"],
+    "no-invalid-regexp": [2],
+    "no-irregular-whitespace": [2],
+    "no-iterator": [2],
+    "no-label-var": [2],
+    "no-labels": [2],
+    "no-lone-blocks": [2],
+    "no-lonely-if": [2],
+    "no-loop-func": [2],
+    "no-mixed-requires": [0, false],
+    "no-mixed-spaces-and-tabs": [2, false],
+    "no-multi-spaces": [2],
+    "no-multi-str": [2],
+    "no-multiple-empty-lines": [2, {
+      "max": 2
+    }],
+    "no-native-reassign": [1],
+    "no-negated-in-lhs": [2],
+    "no-nested-ternary": [0],
+    "no-new": [2],
+    "no-new-func": [2],
+    "no-new-object": [2],
+    "no-new-require": [0],
+    "no-new-wrappers": [2],
+    "no-obj-calls": [2],
+    "no-octal": [2],
+    "no-octal-escape": [2],
+    "no-path-concat": [0],
+    "no-param-reassign": [2],
+    "no-plusplus": [0],
+    "no-process-env": [0],
+    "no-process-exit": [2],
+    "no-proto": [2],
+    "no-redeclare": [2],
+    "no-regex-spaces": [2],
+    "no-reserved-keys": [0],
+    "no-restricted-modules": [0],
+    "no-return-assign": [2],
+    "no-script-url": [2],
+    "no-self-compare": [0],
+    "no-sequences": [2],
+    "no-shadow": [2],
+    "no-shadow-restricted-names": [2],
+    "semi-spacing": [2],
+    "no-spaced-func": [2],
+    "no-sparse-arrays": [2],
+    "no-sync": [0],
+    "no-ternary": [0],
+    "no-this-before-super": [2],
+    "no-throw-literal": [2],
+    "no-trailing-spaces": [2],
+    "no-undef": [2],
+    "no-undef-init": [2],
+    "no-undefined": [0],
+    "no-underscore-dangle": [0],
+    "no-unreachable": [2],
+    "no-unused-expressions": [2],
+    "no-unused-vars": [1, {
+      "vars": "all",
+      "args": "after-used"
+    }],
+    "no-use-before-define": [2, "nofunc"],
+    "no-var": [2],
+    "no-void": [0],
+    "no-warning-comments": [0, {
+      "terms": ["todo", "fixme", "xxx"],
+      "location": "start"
+    }],
+    "no-with": [2],
+    "one-var": [0],
+    "operator-assignment": [0, "always"],
+    "operator-linebreak": [2, "after"],
+    "padded-blocks": [0],
+    "prefer-const": [2],
+    "prefer-spread": [2],
+    "quote-props": [0],
+    "radix": [0],
+    "semi": [2],
+    "semi-spacing": [2, {
+      "before": false,
+      "after": true
+    }],
+    "sort-vars": [0],
+    "space-after-keywords": [2, "always"],
+    "space-before-function-paren": [2, {
+      "anonymous": "always",
+      "named": "always"
+    }],
+    "space-before-blocks": [0, "always"],
+    "space-in-brackets": [0, "never", {
+      "singleValue": true,
+      "arraysInArrays": false,
+      "arraysInObjects": false,
+      "objectsInArrays": true,
+      "objectsInObjects": true,
+      "propertyName": false
+    }],
+    "space-in-parens": [2, "never"],
+    "space-infix-ops": [2],
+    "space-return-throw-case": [2],
+    "space-unary-ops": [2, {
+      "words": true,
+      "nonwords": false
+    }],
+    "spaced-line-comment": [0, "always"],
+    "strict": [1],
+    "use-isnan": [2],
+    "valid-jsdoc": [0],
+    "valid-typeof": [2],
+    "vars-on-top": [0],
+    "wrap-iife": [2],
+    "wrap-regex": [2],
+    "yoda": [2, "never", {
+      "exceptRange": true
+    }],
+    "babel/object-shorthand": [2],
+    "react/display-name": 0,
+    "react/jsx-boolean-value": 1,
+    "react/jsx-closing-bracket-location": 0,
+    "react/jsx-curly-spacing": 1,
+    "react/jsx-max-props-per-line": 0,
+    "react/jsx-indent-props": 0,
+    "react/jsx-no-duplicate-props": 1,
+    "react/jsx-no-undef": 1,
+    "react/jsx-pascal-case": 1,
+    "react/jsx-sort-prop-types": 1,
+    "react/jsx-sort-props": 0,
+    "react/jsx-uses-react": 1,
+    "react/jsx-uses-vars": 1,
+    "react/no-danger": 0,
+    "react/no-did-mount-set-state": 0,
+    "react/no-did-update-set-state": 1,
+    "react/no-multi-comp": 0,
+    "react/no-unknown-property": 1,
+    "react/prop-types": [2, {"ignore": ["onMouseDown", "onTouchStart"]}],
+    "react/react-in-jsx-scope": 1,
+    "react/require-extension": 1,
+    "react/self-closing-comp": 1,
+    "react/sort-comp": 1,
+    "react/wrap-multilines": 1
+  }
+}
diff --git a/docs/app/components/layout/main/index.jsx b/docs/app/components/layout/main/index.jsx
index 84e40e5d7..054813c00 100644
--- a/docs/app/components/layout/main/index.jsx
+++ b/docs/app/components/layout/main/index.jsx
@@ -1,3 +1,5 @@
+"use strict";
+
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Button } from 'react-toolbox';
diff --git a/docs/package.json b/docs/package.json
index 4f4dfc187..3141e5b96 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -11,18 +11,21 @@
   "dependencies": {
     "classnames": "^2.2.1",
     "codemirror": "^5.8.0",
-    "history": "^1.12.6",
-    "react": "^0.14.0",
-    "react-dom": "^0.14.0",
+    "history": "^1.17.0",
+    "react": "^0.14.3",
+    "react-dom": "^0.14.3",
     "react-router": "^1.0.0-rc3"
   },
   "devDependencies": {
     "autoprefixer": "^6.0.3",
-    "babel": "^5.8.23",
-    "babel-core": "^5.8.23",
-    "babel-eslint": "^4.1.3",
-    "babel-loader": "^5.3.2",
-    "babel-plugin-react-transform": "^1.1.1",
+    "babel-core": "^6.3.15",
+    "babel-eslint": "^5.0.0-beta4",
+    "babel-loader": "^6.2.0",
+    "babel-plugin-react-transform": "^2.0.0-beta1",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
+    "babel-preset-stage-0": "^6.3.13",
+    "babel-preset-stage-2": "^6.3.13",
     "cross-env": "^1.0.4",
     "css-loader": "^0.21.0",
     "express": "^4.13.3",
@@ -43,9 +46,9 @@
     "style-loader": "^0.13.0",
     "toolbox-loader": "0.0.2",
     "transfer-webpack-plugin": "^0.1.4",
-    "webpack": "^1.12.0",
-    "webpack-dev-middleware": "^1.2.0",
-    "webpack-hot-middleware": "^2.4.1"
+    "webpack": "^1.12.9",
+    "webpack-dev-middleware": "^1.4.0",
+    "webpack-hot-middleware": "^2.6.0"
   },
   "repository": "github:react-toolbox/react-toolbox",
   "license": "MIT"
diff --git a/docs/server.js b/docs/server.js
index 146b6d974..ab9d227f3 100644
--- a/docs/server.js
+++ b/docs/server.js
@@ -7,6 +7,7 @@ const app = express();
 const compiler = webpack(config);
 
 app.use(require('webpack-dev-middleware')(compiler, {
+	noInfo: true,
   publicPath: config.output.publicPath,
   stats: {
     colors: true
@@ -15,15 +16,15 @@ app.use(require('webpack-dev-middleware')(compiler, {
 
 app.use(require('webpack-hot-middleware')(compiler));
 
-app.get('*', (req, res) => {
-  res.sendFile(path.join(__dirname, './www/index.html'));
+app.get('*', function(req, res) {
+	res.sendFile(path.join(__dirname, './www/index.html'));
 });
 
-app.listen(8081, '0.0.0.0', (err) => {
-  if (err) {
-    console.log(err);
-    return;
-  }
+app.listen(8081, '0.0.0.0', function(err) {
+	if (err) {
+		console.log(err);
+		return;
+	}
 
-  console.log('Listening at http://0.0.0.0:8081');
+	console.log('Listening at http://0.0.0.0:8081');
 });
diff --git a/docs/webpack.config.development.js b/docs/webpack.config.development.js
index d37d9c358..1e0d0de25 100644
--- a/docs/webpack.config.development.js
+++ b/docs/webpack.config.development.js
@@ -6,7 +6,7 @@ const TransferWebpackPlugin = require('transfer-webpack-plugin');
 
 module.exports = {
   context: __dirname,
-  devtool: 'inline-source-map',
+	devtool: 'inline-source-map',
   entry: [
     'webpack-hot-middleware/client',
     './app/index.jsx'
@@ -31,18 +31,18 @@ module.exports = {
   module: {
     loaders: [
       {
-        test: /(\.js|\.jsx)$/,
+        test: /\.(js|jsx)$/,
         exclude: /(node_modules)/,
         loader: 'babel'
       }, {
-        test: /(\.scss|\.css)$/,
+        test: /\.(scss|css)$/,
         loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap!toolbox')
       }, {
-        test: /(\.txt)$/,
+        test: /\.(txt)$/,
         loader: 'raw',
         include: path.resolve(__dirname, './app/components/layout/main/modules')
       }, {
-        test: /(\.md)$/,
+        test: /\.(md)$/,
         loader: 'html!highlight!markdown'
       }
     ]
diff --git a/docs/webpack.config.production.js b/docs/webpack.config.production.js
index 4ecbc7826..ad739ec9b 100644
--- a/docs/webpack.config.production.js
+++ b/docs/webpack.config.production.js
@@ -27,18 +27,18 @@ module.exports = {
   module: {
     loaders: [
       {
-        test: /(\.js|\.jsx)$/,
+        test: /\.(js|jsx)$/,
         exclude: /(node_modules)/,
         loader: 'babel'
       }, {
-        test: /(\.scss|\.css)$/,
+        test: /\.(scss|css)$/,
         loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass!toolbox')
       }, {
-        test: /(\.txt)$/,
+        test: /\.(txt)$/,
         loader: 'raw',
         include: path.resolve(__dirname, './app/components/layout/main/modules')
       }, {
-        test: /(\.md)$/,
+        test: /\.(md)$/,
         loader: 'html?removeComments=false!highlight!markdown'
       }
     ]
diff --git a/package.json b/package.json
index 46b9fde70..b05e4ca65 100644
--- a/package.json
+++ b/package.json
@@ -52,19 +52,22 @@
   },
   "devDependencies": {
     "autoprefixer": "^6.0.3",
-    "babel": "^5.8.23",
-    "babel-core": "^5.8.23",
-    "babel-eslint": "^4.1.6",
-    "babel-loader": "^5.3.2",
-    "babel-plugin-react-transform": "^1.1.1",
+    "babel-core": "^6.3.15",
+    "babel-eslint": "^5.0.0-beta4",
+    "babel-loader": "^6.2.0",
+    "babel-plugin-react-transform": "^2.0.0-beta1",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
+    "babel-preset-stage-0": "^6.3.13",
+    "babel-preset-stage-2": "^6.3.13",
     "bluebird": "^3.0.5",
     "core-js": "^1.2.6",
     "cpx": "^1.2.1",
     "cross-env": "^1.0.4",
     "css-loader": "^0.21.0",
-    "eslint": "^1.10.1",
-    "eslint-plugin-babel": "^2.1.1",
-    "eslint-plugin-react": "^3.10.0",
+    "eslint": "^1.10.3",
+    "eslint-plugin-babel": "^3.0.0",
+    "eslint-plugin-react": "^3.11.3",
     "expect": "^1.8.0",
     "express": "^4.13.3",
     "extract-text-webpack-plugin": "^0.8.2",
@@ -81,11 +84,11 @@
     "phantomjs": "^1.9.18",
     "phantomjs-polyfill": "0.0.1",
     "postcss-loader": "^0.7.0",
-    "react": "^0.14",
+    "react": "^0.14.3",
     "react-addons-css-transition-group": "^0.14.0",
     "react-addons-test-utils": "^0.14.0",
     "react-docgen": "^2.4.0",
-    "react-dom": "^0.14.0",
+    "react-dom": "^0.14.3",
     "react-transform-catch-errors": "^1.0.0",
     "react-transform-hmr": "^1.0.1",
     "redbox-react": "^1.1.1",
@@ -94,9 +97,12 @@
     "sinon": "git://github.com/sinonjs/sinon.git#b672042043517b9f84e14ed0fb8265126168778a",
     "style-loader": "^0.13.0",
     "toolbox-loader": "0.0.2",
-    "webpack": "^1.12.0",
-    "webpack-dev-middleware": "^1.2.0",
-    "webpack-hot-middleware": "^2.4.1"
+    "webpack": "^1.12.9",
+    "webpack-dev-middleware": "^1.4.0",
+    "webpack-hot-middleware": "^2.6.0"
   },
-  "repository": "github:react-toolbox/react-toolbox"
+  "repository": "github:react-toolbox/react-toolbox",
+  "dependencies": {
+    "classnames": "^2.2.1"
+  }
 }
diff --git a/server.js b/server.js
index faac4f9ac..c113df808 100644
--- a/server.js
+++ b/server.js
@@ -7,7 +7,8 @@ const app = express();
 const compiler = webpack(config);
 
 app.use(require('webpack-dev-middleware')(compiler, {
-  publicPath: config.output.publicPath,
+	noInfo: true,
+	publicPath: config.output.publicPath,
   stats: {
     colors: true
   }
@@ -15,15 +16,15 @@ app.use(require('webpack-dev-middleware')(compiler, {
 
 app.use(require('webpack-hot-middleware')(compiler));
 
-app.get('*', (req, res) => {
-  res.sendFile(path.join(__dirname, './spec/index.html'));
+app.get('*', function(req, res) {
+	res.sendFile(path.join(__dirname, './www/index.html'));
 });
 
-app.listen(8080, '0.0.0.0', (err) => {
-  if (err) {
-    console.log(err);
-    return;
-  }
+app.listen(8081, '0.0.0.0', function(err) {
+	if (err) {
+		console.log(err);
+		return;
+	}
 
-  console.log('Listening at http://0.0.0.0:8080');
+	console.log('Listening at http://0.0.0.0:8081');
 });
diff --git a/webpack.config.development.js b/webpack.config.development.js
index 05b9397e9..a42308458 100644
--- a/webpack.config.development.js
+++ b/webpack.config.development.js
@@ -6,7 +6,7 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 module.exports = {
   context: __dirname,
-  devtool: 'inline-source-map',
+	devtool: 'inline-source-map',
   entry: [
     'webpack-hot-middleware/client',
     './spec/index.jsx'
@@ -22,11 +22,11 @@ module.exports = {
   module: {
     loaders: [
       {
-        test: /(\.js|\.jsx)$/,
-        exclude: /(node_modules)/,
-        loader: 'babel'
+	      test: /\.(js|jsx)$/,
+	      loader: ['babel'],
+	      include: path.join(__dirname, 'spec'),
       }, {
-        test: /(\.scss|\.css)$/,
+        test: /\.(scss|css)$/,
         loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap')
       }
     ]
diff --git a/webpack.config.test.js b/webpack.config.test.js
index cbf4e50ec..93ad78c02 100644
--- a/webpack.config.test.js
+++ b/webpack.config.test.js
@@ -5,11 +5,11 @@ module.exports = {
   module: {
     loaders: [
       {
-        test: /(\.js|\.jsx)$/,
+        test: /\.(js|jsx)$/,
         exclude: /(node_modules)/,
         loader: 'babel'
       }, {
-        test: /(\.scss|\.css)$/,
+        test: /\.(scss|css)$/,
         loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass'
       }
     ]

From 20e41fb9e74b09e156dabc899976e8e3ebc796b1 Mon Sep 17 00:00:00 2001
From: Araphel <bartekus@gmail.com>
Date: Wed, 23 Dec 2015 14:28:21 -0700
Subject: [PATCH 0301/1024] retracted unnecessary addition

---
 docs/app/components/layout/main/index.jsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/docs/app/components/layout/main/index.jsx b/docs/app/components/layout/main/index.jsx
index 054813c00..84e40e5d7 100644
--- a/docs/app/components/layout/main/index.jsx
+++ b/docs/app/components/layout/main/index.jsx
@@ -1,5 +1,3 @@
-"use strict";
-
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Button } from 'react-toolbox';

From 25a9e656048dfa4e07f952fa6009d5276fa573ae Mon Sep 17 00:00:00 2001
From: Araphel <bartekus@gmail.com>
Date: Wed, 23 Dec 2015 23:47:29 -0700
Subject: [PATCH 0302/1024] Replace transition-property to transition for
 Issue#230

---
 .babelrc                            |  2 +-
 components/animations/zoom-in.scss  |  2 +-
 components/animations/zoom-out.scss |  2 +-
 components/radio/style.scss         |  2 +-
 docs/.babelrc                       |  2 +-
 docs/package.json                   |  6 +++---
 karma.conf.js                       |  3 ++-
 package.json                        | 29 +++++++++++++++--------------
 8 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/.babelrc b/.babelrc
index a4ac5ba84..4ef551af4 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,5 +1,5 @@
 {
-  "presets": ["react", "es2015", "stage-0"],
+  "presets": ["es2015", "stage-0", "react"],
   "env": {
     "development": {
       "plugins": [
diff --git a/components/animations/zoom-in.scss b/components/animations/zoom-in.scss
index f00153831..5303756a5 100644
--- a/components/animations/zoom-in.scss
+++ b/components/animations/zoom-in.scss
@@ -7,7 +7,7 @@
 .enterActive, .leaveActive {
   transition-timing-function: $animation-curve-fast-out-slow-in;
   transition-duration: 500ms;
-  transition-property: transform, opacity;
+  transition: transform, opacity;
 }
 
 .enter {
diff --git a/components/animations/zoom-out.scss b/components/animations/zoom-out.scss
index 0437a447a..9a09cf273 100644
--- a/components/animations/zoom-out.scss
+++ b/components/animations/zoom-out.scss
@@ -7,7 +7,7 @@
 .enterActive, .leaveActive {
   transition-timing-function: $animation-curve-fast-out-slow-in;
   transition-duration: 500ms;
-  transition-property: transform, opacity;
+  transition: transform, opacity;
 }
 
 .enter {
diff --git a/components/radio/style.scss b/components/radio/style.scss
index ed0a9e879..21567db06 100644
--- a/components/radio/style.scss
+++ b/components/radio/style.scss
@@ -56,7 +56,7 @@
     content: "";
     background-color: $radio-inner-color;
     border-radius: 50%;
-    transition-property: transform;
+    transition: transform;
     transform: scale(0);
   }
 }
diff --git a/docs/.babelrc b/docs/.babelrc
index a4ac5ba84..4ef551af4 100644
--- a/docs/.babelrc
+++ b/docs/.babelrc
@@ -1,5 +1,5 @@
 {
-  "presets": ["react", "es2015", "stage-0"],
+  "presets": ["es2015", "stage-0", "react"],
   "env": {
     "development": {
       "plugins": [
diff --git a/docs/package.json b/docs/package.json
index 3141e5b96..08cf64254 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "classnames": "^2.2.1",
-    "codemirror": "^5.8.0",
+    "codemirror": "^5.10.0",
     "history": "^1.17.0",
     "react": "^0.14.3",
     "react-dom": "^0.14.3",
@@ -18,7 +18,7 @@
   },
   "devDependencies": {
     "autoprefixer": "^6.0.3",
-    "babel-core": "^6.3.15",
+    "babel-core": "^6.3.26",
     "babel-eslint": "^5.0.0-beta4",
     "babel-loader": "^6.2.0",
     "babel-plugin-react-transform": "^2.0.0-beta1",
@@ -26,7 +26,7 @@
     "babel-preset-react": "^6.3.13",
     "babel-preset-stage-0": "^6.3.13",
     "babel-preset-stage-2": "^6.3.13",
-    "cross-env": "^1.0.4",
+    "cross-env": "^1.0.5",
     "css-loader": "^0.21.0",
     "express": "^4.13.3",
     "extract-text-webpack-plugin": "^0.8.2",
diff --git a/karma.conf.js b/karma.conf.js
index ba434c835..8128a2d20 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -1,3 +1,4 @@
+require("babel-polyfill");
 const webpackConfig = require('./webpack.config.test');
 
 module.exports = function (config) {
@@ -7,7 +8,7 @@ module.exports = function (config) {
     frameworks: ['mocha'],
     files: [
       './node_modules/phantomjs-polyfill/bind-polyfill.js',
-      './node_modules/babel-core/browser-polyfill.js',
+      './node_modules/babel-polyfill/dist/polyfill.js',
       'tests.webpack.js'
     ],
     reporters: ['dots'],
diff --git a/package.json b/package.json
index b05e4ca65..753ce1585 100644
--- a/package.json
+++ b/package.json
@@ -52,41 +52,42 @@
   },
   "devDependencies": {
     "autoprefixer": "^6.0.3",
-    "babel-core": "^6.3.15",
+    "babel-cli": "^6.3.17",
+    "babel-core": "^6.3.26",
     "babel-eslint": "^5.0.0-beta4",
     "babel-loader": "^6.2.0",
     "babel-plugin-react-transform": "^2.0.0-beta1",
+    "babel-polyfill": "^6.3.14",
     "babel-preset-es2015": "^6.3.13",
     "babel-preset-react": "^6.3.13",
     "babel-preset-stage-0": "^6.3.13",
-    "babel-preset-stage-2": "^6.3.13",
     "bluebird": "^3.0.5",
     "core-js": "^1.2.6",
     "cpx": "^1.2.1",
-    "cross-env": "^1.0.4",
+    "cross-env": "^1.0.5",
     "css-loader": "^0.21.0",
     "eslint": "^1.10.3",
     "eslint-plugin-babel": "^3.0.0",
     "eslint-plugin-react": "^3.11.3",
-    "expect": "^1.8.0",
+    "expect": "^1.13.4",
     "express": "^4.13.3",
     "extract-text-webpack-plugin": "^0.8.2",
-    "glob": "^6.0.1",
-    "karma": "^0.13.3",
-    "karma-chrome-launcher": "^0.2.0",
-    "karma-cli": "^0.1.0",
-    "karma-mocha": "^0.2.0",
-    "karma-phantomjs-launcher": "~0.2",
+    "glob": "^6.0.2",
+    "karma": "^0.13.15",
+    "karma-chrome-launcher": "^0.2.2",
+    "karma-cli": "^0.1.2",
+    "karma-mocha": "^0.2.1",
+    "karma-phantomjs-launcher": "~0.2.1",
     "karma-webpack": "^1.7.0",
-    "mocha": "^2.3.3",
+    "mocha": "^2.3.4",
     "node-sass": "^3.3.3",
     "normalize.css": "^3.0.3",
-    "phantomjs": "^1.9.18",
+    "phantomjs": "^1.9.19",
     "phantomjs-polyfill": "0.0.1",
     "postcss-loader": "^0.7.0",
     "react": "^0.14.3",
-    "react-addons-css-transition-group": "^0.14.0",
-    "react-addons-test-utils": "^0.14.0",
+    "react-addons-css-transition-group": "^0.14.3",
+    "react-addons-test-utils": "^0.14.3",
     "react-docgen": "^2.4.0",
     "react-dom": "^0.14.3",
     "react-transform-catch-errors": "^1.0.0",

From 7c27b094c63594bc28653828f2c78c5a14b4390d Mon Sep 17 00:00:00 2001
From: Araphel <bartekus@gmail.com>
Date: Wed, 23 Dec 2015 23:58:43 -0700
Subject: [PATCH 0303/1024] Fixed linting issues

---
 docs/server.js                | 4 ++--
 karma.conf.js                 | 2 +-
 server.js                     | 4 ++--
 webpack.config.development.js | 6 +++---
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/server.js b/docs/server.js
index ab9d227f3..fd1a457b7 100644
--- a/docs/server.js
+++ b/docs/server.js
@@ -16,11 +16,11 @@ app.use(require('webpack-dev-middleware')(compiler, {
 
 app.use(require('webpack-hot-middleware')(compiler));
 
-app.get('*', function(req, res) {
+app.get('*', function (req, res) {
 	res.sendFile(path.join(__dirname, './www/index.html'));
 });
 
-app.listen(8081, '0.0.0.0', function(err) {
+app.listen(8081, '0.0.0.0', function (err) {
 	if (err) {
 		console.log(err);
 		return;
diff --git a/karma.conf.js b/karma.conf.js
index 8128a2d20..f0d933e76 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -1,4 +1,4 @@
-require("babel-polyfill");
+require('babel-polyfill');
 const webpackConfig = require('./webpack.config.test');
 
 module.exports = function (config) {
diff --git a/server.js b/server.js
index c113df808..5c2ad4832 100644
--- a/server.js
+++ b/server.js
@@ -16,11 +16,11 @@ app.use(require('webpack-dev-middleware')(compiler, {
 
 app.use(require('webpack-hot-middleware')(compiler));
 
-app.get('*', function(req, res) {
+app.get('*', function (req, res) {
 	res.sendFile(path.join(__dirname, './www/index.html'));
 });
 
-app.listen(8081, '0.0.0.0', function(err) {
+app.listen(8081, '0.0.0.0', function (err) {
 	if (err) {
 		console.log(err);
 		return;
diff --git a/webpack.config.development.js b/webpack.config.development.js
index a42308458..8c84b1227 100644
--- a/webpack.config.development.js
+++ b/webpack.config.development.js
@@ -22,9 +22,9 @@ module.exports = {
   module: {
     loaders: [
       {
-	      test: /\.(js|jsx)$/,
-	      loader: ['babel'],
-	      include: path.join(__dirname, 'spec'),
+        test: /\.(js|jsx)$/,
+        loader: ['babel'],
+        include: path.join(__dirname, 'spec')
       }, {
         test: /\.(scss|css)$/,
         loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap')

From c044a2254a8af2907705c3e2b4c2aa97dbe76ab3 Mon Sep 17 00:00:00 2001
From: Araphel <bartekus@gmail.com>
Date: Thu, 24 Dec 2015 00:22:16 -0700
Subject: [PATCH 0304/1024] Upgrading the rest of the dependencies

---
 package.json | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 753ce1585..ddaa0084f 100644
--- a/package.json
+++ b/package.json
@@ -61,14 +61,14 @@
     "babel-preset-es2015": "^6.3.13",
     "babel-preset-react": "^6.3.13",
     "babel-preset-stage-0": "^6.3.13",
-    "bluebird": "^3.0.5",
+    "bluebird": "^3.1.1",
     "core-js": "^1.2.6",
     "cpx": "^1.2.1",
     "cross-env": "^1.0.5",
-    "css-loader": "^0.21.0",
+    "css-loader": "^0.23.1",
     "eslint": "^1.10.3",
     "eslint-plugin-babel": "^3.0.0",
-    "eslint-plugin-react": "^3.11.3",
+    "eslint-plugin-react": "^3.12.0",
     "expect": "^1.13.4",
     "express": "^4.13.3",
     "extract-text-webpack-plugin": "^0.8.2",
@@ -80,11 +80,11 @@
     "karma-phantomjs-launcher": "~0.2.1",
     "karma-webpack": "^1.7.0",
     "mocha": "^2.3.4",
-    "node-sass": "^3.3.3",
+    "node-sass": "^3.4.2",
     "normalize.css": "^3.0.3",
     "phantomjs": "^1.9.19",
     "phantomjs-polyfill": "0.0.1",
-    "postcss-loader": "^0.7.0",
+    "postcss-loader": "^0.8.0",
     "react": "^0.14.3",
     "react-addons-css-transition-group": "^0.14.3",
     "react-addons-test-utils": "^0.14.3",
@@ -92,9 +92,9 @@
     "react-dom": "^0.14.3",
     "react-transform-catch-errors": "^1.0.0",
     "react-transform-hmr": "^1.0.1",
-    "redbox-react": "^1.1.1",
-    "rimraf": "^2.4.3",
-    "sass-loader": "^3.0.0",
+    "redbox-react": "^1.2.0",
+    "rimraf": "^2.5.0",
+    "sass-loader": "^3.1.2",
     "sinon": "git://github.com/sinonjs/sinon.git#b672042043517b9f84e14ed0fb8265126168778a",
     "style-loader": "^0.13.0",
     "toolbox-loader": "0.0.2",

From bbce96c98e953d5a1c38884dd7b7c08c15fe31a8 Mon Sep 17 00:00:00 2001
From: Araphel <bartekus@gmail.com>
Date: Thu, 24 Dec 2015 00:53:41 -0700
Subject: [PATCH 0305/1024] Everything but toolbox-loader has been updated

---
 docs/package.json | 22 +++++++++++-----------
 package.json      |  4 ++--
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index 08cf64254..2e2eb906c 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -17,7 +17,7 @@
     "react-router": "^1.0.0-rc3"
   },
   "devDependencies": {
-    "autoprefixer": "^6.0.3",
+    "autoprefixer": "^6.2.1",
     "babel-core": "^6.3.26",
     "babel-eslint": "^5.0.0-beta4",
     "babel-loader": "^6.2.0",
@@ -27,22 +27,22 @@
     "babel-preset-stage-0": "^6.3.13",
     "babel-preset-stage-2": "^6.3.13",
     "cross-env": "^1.0.5",
-    "css-loader": "^0.21.0",
+    "css-loader": "^0.23.1",
     "express": "^4.13.3",
-    "extract-text-webpack-plugin": "^0.8.2",
-    "gh-pages": "^0.5.0",
+    "extract-text-webpack-plugin": "^0.9.1",
+    "gh-pages": "^0.8.0",
     "highlight-loader": "git://github.com/javivelasco/highlight-loader.git#master",
-    "highlight.js": "^8.9.1",
-    "html-loader": "^0.3.0",
-    "html-webpack-plugin": "^1.6.2",
+    "highlight.js": "^9.0.0",
+    "html-loader": "^0.4.0",
+    "html-webpack-plugin": "^1.7.0",
     "markdown-loader": "^0.1.7",
-    "node-sass": "^3.3.3",
-    "postcss-loader": "^0.7.0",
+    "node-sass": "^3.4.2",
+    "postcss-loader": "^0.8.0",
     "raw-loader": "^0.5.1",
     "react-transform-catch-errors": "^1.0.0",
     "react-transform-hmr": "^1.0.1",
-    "redbox-react": "^1.1.1",
-    "sass-loader": "^3.0.0",
+    "redbox-react": "^1.2.0",
+    "sass-loader": "^3.1.2",
     "style-loader": "^0.13.0",
     "toolbox-loader": "0.0.2",
     "transfer-webpack-plugin": "^0.1.4",
diff --git a/package.json b/package.json
index ddaa0084f..85c6933ec 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,7 @@
     "normalize.css": "^3.0.3"
   },
   "devDependencies": {
-    "autoprefixer": "^6.0.3",
+    "autoprefixer": "^6.2.1",
     "babel-cli": "^6.3.17",
     "babel-core": "^6.3.26",
     "babel-eslint": "^5.0.0-beta4",
@@ -71,7 +71,7 @@
     "eslint-plugin-react": "^3.12.0",
     "expect": "^1.13.4",
     "express": "^4.13.3",
-    "extract-text-webpack-plugin": "^0.8.2",
+    "extract-text-webpack-plugin": "^0.9.1",
     "glob": "^6.0.2",
     "karma": "^0.13.15",
     "karma-chrome-launcher": "^0.2.2",

From 3b3beaf89af2a351b3f37f399d14bf00c75d31eb Mon Sep 17 00:00:00 2001
From: Dale Hille <dalehill@us.ibm.com>
Date: Thu, 31 Dec 2015 14:15:34 -0500
Subject: [PATCH 0306/1024] fixing a typo for the List component

---
 components/list/readme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/list/readme.md b/components/list/readme.md
index 032466b8a..707bc632d 100644
--- a/components/list/readme.md
+++ b/components/list/readme.md
@@ -6,7 +6,7 @@ Lists are best suited to presenting a homogeneous data type or sets of data type
 
 <!-- example -->
 ```jsx
-import { List, ListItem, ListSubHeader, ListDivider, ListCheckbox } from 'react-toobox';
+import { List, ListItem, ListSubHeader, ListDivider, ListCheckbox } from 'react-toolbox';
 
 const ListTest = () => (
   <List selectable ripple>

From f0d5f1999c154380132eee7f809732fd2db4e9db Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 5 Jan 2016 10:51:32 +0100
Subject: [PATCH 0307/1024] Fixes for autocomplete and tests

---
 components/button/Button.jsx               | 1 +
 components/button/__test__/index.spec.jsx  | 2 +-
 components/slider/Slider.jsx               | 4 ++--
 components/slider/__tests__/index.spec.jsx | 2 +-
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/components/button/Button.jsx b/components/button/Button.jsx
index 9de384cae..ecd57fcd6 100644
--- a/components/button/Button.jsx
+++ b/components/button/Button.jsx
@@ -79,3 +79,4 @@ class Button extends React.Component {
 }
 
 export default Ripple({centered: false})(Button);
+export { Button as RegularButton };
diff --git a/components/button/__test__/index.spec.jsx b/components/button/__test__/index.spec.jsx
index e540b9f08..a2d55391f 100644
--- a/components/button/__test__/index.spec.jsx
+++ b/components/button/__test__/index.spec.jsx
@@ -1,7 +1,7 @@
 import expect from 'expect';
 import style from '../../button/style';
 import utils from '../../utils/testing';
-import Button from '../index';
+import {RegularButton as Button} from '../Button';
 
 describe('Button', function () {
   let button;
diff --git a/components/slider/Slider.jsx b/components/slider/Slider.jsx
index 34ecef81a..570e9961e 100644
--- a/components/slider/Slider.jsx
+++ b/components/slider/Slider.jsx
@@ -64,8 +64,8 @@ class Slider extends React.Component {
     });
   };
 
-  handleInputChange = (event) => {
-    this.setState({inputValue: event.target.value});
+  handleInputChange = (value) => {
+    this.setState({inputValue: value});
   };
 
   handleInputBlur = (event) => {
diff --git a/components/slider/__tests__/index.spec.jsx b/components/slider/__tests__/index.spec.jsx
index 07011034a..7fe605e00 100644
--- a/components/slider/__tests__/index.spec.jsx
+++ b/components/slider/__tests__/index.spec.jsx
@@ -88,7 +88,7 @@ describe('Slider', function () {
     it('contains an input component if its editable', function () {
       slider = utils.renderComponent(Slider, {editable: true, value: 130});
       input = TestUtils.findRenderedComponentWithType(slider, Input);
-      expect(input.props.value).toEqual(slider.props.value);
+      expect(parseInt(input.props.value)).toEqual(slider.props.value);
     });
 
     it('contains the proper number of snaps when snapped', function () {

From 9ec5652b76a4ffc7002172e0babadbd86ed330c3 Mon Sep 17 00:00:00 2001
From: Karl Macklin <tacklemcclean@gmail.com>
Date: Tue, 5 Jan 2016 23:01:35 +0100
Subject: [PATCH 0308/1024] Added required normalize.css package to
 package.json

---
 docs/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/package.json b/docs/package.json
index 4f4dfc187..1059871e2 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -34,6 +34,7 @@
     "html-webpack-plugin": "^1.6.2",
     "markdown-loader": "^0.1.7",
     "node-sass": "^3.3.3",
+    "normalize.css": "^3.0.3",
     "postcss-loader": "^0.7.0",
     "raw-loader": "^0.5.1",
     "react-transform-catch-errors": "^1.0.0",

From 9da237834b66aeba6c6a8c45c3b9386faa140e18 Mon Sep 17 00:00:00 2001
From: Karl Macklin <tacklemcclean@gmail.com>
Date: Tue, 5 Jan 2016 23:32:38 +0100
Subject: [PATCH 0309/1024] Allow Link to render Tooltips via children prop

---
 components/link/Link.jsx                                      | 4 +++-
 components/link/style.scss                                    | 1 -
 components/tooltip/readme.md                                  | 3 +++
 .../layout/main/modules/examples/tooltip_example_1.txt        | 2 ++
 4 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/components/link/Link.jsx b/components/link/Link.jsx
index 1b2199376..73e12425a 100644
--- a/components/link/Link.jsx
+++ b/components/link/Link.jsx
@@ -3,7 +3,7 @@ import ClassNames from 'classnames';
 import style from './style';
 import FontIcon from '../font_icon';
 
-const Link = (props) => {
+const Link = ({children, ...props}) => {
   const className = ClassNames(style.root, {
     [style.active]: props.active
   }, props.className);
@@ -13,12 +13,14 @@ const Link = (props) => {
       {props.icon ? <FontIcon className={style.icon} value={props.icon} /> : null}
       {props.label ? <abbr>{props.label}</abbr> : null}
       {props.count && parseInt(props.count) !== 0 ? <small>{props.count}</small> : null}
+      {children ? children : null}
     </a>
   );
 };
 
 Link.propTypes = {
   active: React.PropTypes.bool,
+  children: React.PropTypes.node,
   className: React.PropTypes.string,
   count: React.PropTypes.number,
   icon: React.PropTypes.string,
diff --git a/components/link/style.scss b/components/link/style.scss
index a1a1ac8eb..4981c596d 100644
--- a/components/link/style.scss
+++ b/components/link/style.scss
@@ -12,7 +12,6 @@
   align-content: center;
   align-items: center;
   justify-content: center;
-  overflow: hidden;
   line-height: 1.5;
   cursor: pointer;
   transition: opacity $animation-duration $animation-curve-default;
diff --git a/components/tooltip/readme.md b/components/tooltip/readme.md
index e2beffbd3..9aed676ae 100644
--- a/components/tooltip/readme.md
+++ b/components/tooltip/readme.md
@@ -6,14 +6,17 @@ A Tooltip is useful to show information on hover in any kind of component. We ha
 ```jsx
 import Button from 'react-toolbox/lib/button';
 import Tooltip from 'react-toolbox/lib/tooltip';
+import Link from 'react-toolbox/lib/link';
 
 const TooltipButton = Tooltip(Button);
 const TooltipInput = Tooltip(Input);
+const TooltipLink = Tooltip(Link);
 
 const TooltipTest = () => (
   <div>
     <TooltipButton label='Bookmark' icon='bookmark' raised primary tooltip='Bookmark Tooltip' tooltipDelay={1000} />
     <TooltipButton icon='add' floating accent tooltip='Floating Tooltip' />
+    <TooltipLink count={42} href="#" label="The answer is" icon='speaker_notes' tooltip='Question - universe?'/>
     <TooltipInput tooltip='lorem ipsum...' />
   </div>
 );
diff --git a/docs/app/components/layout/main/modules/examples/tooltip_example_1.txt b/docs/app/components/layout/main/modules/examples/tooltip_example_1.txt
index d84964573..abc2fde09 100644
--- a/docs/app/components/layout/main/modules/examples/tooltip_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/tooltip_example_1.txt
@@ -1,10 +1,12 @@
 const TooltipButton = Tooltip(Button);
 const TooltipInput = Tooltip(Input);
+const TooltipLink = Tooltip(Link);
 
 const TooltipTest = () => (
   <div>
     <TooltipButton label='Bookmark' icon='bookmark' raised primary tooltip='Bookmark Tooltip' tooltipDelay={1000} />
     <TooltipButton icon='add' floating accent tooltip='Floating Tooltip' />
+    <TooltipLink count={42} href="#" label="The answer is" icon='speaker_notes' tooltip='Question - universe?'/>
     <TooltipInput tooltip='lorem ipsum...' />
   </div>
 );

From 222a4bf36add9826cd05ebd1a95026c15dd786df Mon Sep 17 00:00:00 2001
From: Karl Macklin <tacklemcclean@gmail.com>
Date: Tue, 5 Jan 2016 23:48:02 +0100
Subject: [PATCH 0310/1024] Revert "Added required normalize.css package to
 package.json"

This reverts commit 9ec5652b76a4ffc7002172e0babadbd86ed330c3.
---
 docs/package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/package.json b/docs/package.json
index 1059871e2..4f4dfc187 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -34,7 +34,6 @@
     "html-webpack-plugin": "^1.6.2",
     "markdown-loader": "^0.1.7",
     "node-sass": "^3.3.3",
-    "normalize.css": "^3.0.3",
     "postcss-loader": "^0.7.0",
     "raw-loader": "^0.5.1",
     "react-transform-catch-errors": "^1.0.0",

From 0037210edb273f5c1e4b38e12a76925b1a7a96d6 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 6 Jan 2016 02:12:07 +0100
Subject: [PATCH 0311/1024] Add babel standalone for the playground live editor

---
 docs/app/components/preview/index.jsx | 7 ++++---
 docs/package.json                     | 1 +
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/docs/app/components/preview/index.jsx b/docs/app/components/preview/index.jsx
index 2dfebc3e6..e7b6cd492 100644
--- a/docs/app/components/preview/index.jsx
+++ b/docs/app/components/preview/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import babel from 'babel-core/browser';
+import { transform } from 'babel-standalone';
 import * as ReactToolbox from 'react-toolbox';
 import style from './style';
 
@@ -47,8 +47,9 @@ const Preview = React.createClass({
       (function (${Object.keys(this.props.scope).join(', ')}, mountNode) {
         ${this.props.code}
       });`;
-    return babel.transform(code, {
-      optional: ['es7.classProperties', 'es7.exportExtensions']
+
+    return transform(code, {
+      presets: ['es2015', 'stage-0', 'react']
     }).code;
   },
 
diff --git a/docs/package.json b/docs/package.json
index 2e2eb906c..68e70ffc4 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -9,6 +9,7 @@
     "deploy": "gh-pages -d build"
   },
   "dependencies": {
+    "babel-standalone": "^1.0.0",
     "classnames": "^2.2.1",
     "codemirror": "^5.10.0",
     "history": "^1.17.0",

From 3c6b7afcc1181de1e135fab342a8f6118e82cc4c Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 6 Jan 2016 12:56:30 +0100
Subject: [PATCH 0312/1024] Fixe autocomplete

---
 components/autocomplete/Autocomplete.jsx | 412 +++++++++++------------
 components/utils/index.js                |   4 +
 server.js                                |   6 +-
 webpack.config.development.js            |   4 +-
 4 files changed, 215 insertions(+), 211 deletions(-)

diff --git a/components/autocomplete/Autocomplete.jsx b/components/autocomplete/Autocomplete.jsx
index e340298c0..8845e8345 100644
--- a/components/autocomplete/Autocomplete.jsx
+++ b/components/autocomplete/Autocomplete.jsx
@@ -1,206 +1,206 @@
-//import React from 'react';
-//import ReactDOM from 'react-dom';
-//import ClassNames from 'classnames';
-//import Input from '../input';
-//import events from '../utils/events';
-//import style from './style';
-//
-//const POSITION = {
-//  AUTO: 'auto',
-//  DOWN: 'down',
-//  UP: 'up'
-//};
-//
-//class Autocomplete extends React.Component {
-//  static propTypes = {
-//    className: React.PropTypes.string,
-//    direction: React.PropTypes.oneOf(['auto', 'up', 'down']),
-//    disabled: React.PropTypes.bool,
-//    error: React.PropTypes.string,
-//    label: React.PropTypes.string,
-//    multiple: React.PropTypes.bool,
-//    onChange: React.PropTypes.func,
-//    source: React.PropTypes.any,
-//    value: React.PropTypes.any
-//  };
-//
-//  static defaultProps = {
-//    className: '',
-//    direction: 'auto',
-//    multiple: true,
-//    source: {}
-//  };
-//
-//  state = {
-//    direction: this.props.direction,
-//    focus: false,
-//    query: this.query(this.props.value)
-//  };
-//
-//  componentWillReceiveProps (nextProps) {
-//    if (!this.props.multiple) {
-//      this.setState({query: nextProps.value});
-//    }
-//  }
-//
-//  shouldComponentUpdate (nextProps, nextState) {
-//    if (!this.state.focus && nextState.focus && this.props.direction === POSITION.AUTO) {
-//      const direction = this.calculateDirection();
-//      if (this.state.direction !== direction) {
-//        this.setState({ direction });
-//        return false;
-//      }
-//    }
-//    return true;
-//  }
-//
-//  handleChange = (keys, event) => {
-//    const key = this.props.multiple ? keys : keys[0];
-//    const query = this.query(key);
-//    if (this.props.onChange) this.props.onChange(key, event);
-//    this.setState({ focus: false, query }, () => { this.refs.input.blur(); });
-//  };
-//
-//  handleQueryBlur = () => {
-//    if (this.state.focus) this.setState({focus: false});
-//  };
-//
-//  handleQueryChange = (value) => {
-//    this.setState({query: value});
-//  };
-//
-//  handleQueryFocus = () => {
-//    this.refs.suggestions.scrollTop = 0;
-//    this.setState({active: '', focus: true});
-//  };
-//
-//  handleQueryKeyUp = (event) => {
-//    if (event.which === 13 && this.state.active) this.select(this.state.active, event);
-//    if (event.which === 27) this.refs.input.blur();
-//    if ([40, 38].indexOf(event.which) !== -1) {
-//      const suggestionsKeys = [...this.suggestions().keys()];
-//      let index = suggestionsKeys.indexOf(this.state.active) + (event.which === 40 ? +1 : -1);
-//      if (index < 0) index = suggestionsKeys.length - 1;
-//      if (index >= suggestionsKeys.length) index = 0;
-//      this.setState({active: suggestionsKeys[index]});
-//    }
-//  };
-//
-//  handleSuggestionHover = (key) => {
-//    this.setState({active: key});
-//  };
-//
-//  calculateDirection () {
-//    if (this.props.direction === 'auto') {
-//      const client = ReactDOM.findDOMNode(this.refs.input).getBoundingClientRect();
-//      const screen_height = window.innerHeight || document.documentElement.offsetHeight;
-//      const up = client.top > ((screen_height / 2) + client.height);
-//      return up ? 'up' : 'down';
-//    } else {
-//      return this.props.direction;
-//    }
-//  }
-//
-//  query (key) {
-//    return !this.props.multiple && this.props.value ? this.source().get(key) : '';
-//  }
-//
-//  suggestions2 () {
-//    const suggestions2 = new Map();
-//    const query = this.state.query.toLowerCase().trim() || '';
-//    const values = this.values();
-//    for (const [key, value] of this.source()) {
-//      if (!values.has(key) && value.toLowerCase().trim().startsWith(query)) {
-//        suggestions2.set(key, value);
-//      }
-//    }
-//    return suggestions2;
-//  }
-//
-//  source () {
-//    const { source } = this.props;
-//    if (source.hasOwnProperty('length')) {
-//      return new Map(source.map((item) => [item, item]));
-//    } else {
-//      return new Map(Object.keys(source).map((key) => [key, source[key]]));
-//    }
-//  }
-//
-//  values () {
-//    const valueMap = new Map();
-//    const values = this.props.multiple ? this.props.value : [this.props.value];
-//    for (const [k, v] of this.source()) {
-//      if (values.indexOf(k) !== -1) valueMap.set(k, v);
-//    }
-//    return valueMap;
-//  }
-//
-//  select (key, event) {
-//    events.pauseEvent(event);
-//    const values = this.values(this.props.value);
-//    this.handleChange([key, ...values.keys()], event);
-//  }
-//
-//  unselect (key, event) {
-//    const values = this.values(this.props.value);
-//    values.delete(key);
-//    this.handleChange([...values.keys()], event);
-//  }
-//
-//  renderSelected () {
-//    if (this.props.multiple) {
-//      const selectedItems = [...this.values()].map(([key, value]) => {
-//        return <li key={key} className={style.value} onClick={this.unselect.bind(this, key)}>{value}</li>;
-//      });
-//
-//      return <ul className={style.values}>{selectedItems}</ul>;
-//    }
-//  }
-//
-//  renderSuggestions () {
-//    const suggestions2 = [...this.suggestions2()].map(([key, value]) => {
-//      const className = ClassNames(style.suggestion, {[style.active]: this.state.active === key});
-//      return (
-//        <li
-//          key={key}
-//          className={className}
-//          onMouseDown={this.select.bind(this, key)}
-//          onMouseOver={this.handleSuggestionHover.bind(this, key)}
-//        >
-//          {value}
-//        </li>
-//      );
-//    });
-//
-//    const className = ClassNames(style.suggestions2, {[style.up]: this.state.direction === 'up'});
-//    return <ul ref='suggestions' className={className}>{suggestions}</ul>;
-//  }
-//
-//  render () {
-//    const {error, label, ...other} = this.props;
-//    const className = ClassNames(style.root, {
-//      [style.focus]: this.state.focus
-//    }, this.props.className);
-//
-//    return (
-//      <div data-react-toolbox='autocomplete' className={className}>
-//        {this.renderSelected()}
-//        <Input
-//          {...other}
-//          ref='input'
-//          className={style.input}
-//          error={error}
-//          label={label}
-//          onBlur={this.handleQueryBlur}
-//          onChange={this.handleQueryChange}
-//          onFocus={this.handleQueryFocus}
-//          onKeyUp={this.handleQueryKeyUp}
-//          value={this.state.query}
-//        />
-//        {this.renderSuggestions()}
-//      </div>
-//    );
-//  }
-//}
-//
-//export default Autocomplete;
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ClassNames from 'classnames';
+import Input from '../input';
+import events from '../utils/events';
+import style from './style';
+
+const POSITION = {
+ AUTO: 'auto',
+ DOWN: 'down',
+ UP: 'up'
+};
+
+class Autocomplete extends React.Component {
+ static propTypes = {
+   className: React.PropTypes.string,
+   direction: React.PropTypes.oneOf(['auto', 'up', 'down']),
+   disabled: React.PropTypes.bool,
+   error: React.PropTypes.string,
+   label: React.PropTypes.string,
+   multiple: React.PropTypes.bool,
+   onChange: React.PropTypes.func,
+   source: React.PropTypes.any,
+   value: React.PropTypes.any
+ };
+
+ static defaultProps = {
+   className: '',
+   direction: 'auto',
+   multiple: true,
+   source: {}
+ };
+
+ state = {
+   direction: this.props.direction,
+   focus: false,
+   query: this.query(this.props.value)
+ };
+
+ componentWillReceiveProps (nextProps) {
+   if (!this.props.multiple) {
+     this.setState({query: nextProps.value});
+   }
+ }
+
+ shouldComponentUpdate (nextProps, nextState) {
+   if (!this.state.focus && nextState.focus && this.props.direction === POSITION.AUTO) {
+     const direction = this.calculateDirection();
+     if (this.state.direction !== direction) {
+       this.setState({ direction });
+       return false;
+     }
+   }
+   return true;
+ }
+
+ handleChange = (keys, event) => {
+   const key = this.props.multiple ? keys : keys[0];
+   const query = this.query(key);
+   if (this.props.onChange) this.props.onChange(key, event);
+   this.setState({ focus: false, query }, () => { this.refs.input.blur(); });
+ };
+
+ handleQueryBlur = () => {
+   if (this.state.focus) this.setState({focus: false});
+ };
+
+ handleQueryChange = (value) => {
+   this.setState({query: value});
+ };
+
+ handleQueryFocus = () => {
+   this.refs.suggestions.scrollTop = 0;
+   this.setState({active: '', focus: true});
+ };
+
+ handleQueryKeyUp = (event) => {
+   if (event.which === 13 && this.state.active) this.select(this.state.active, event);
+   if (event.which === 27) this.refs.input.blur();
+   if ([40, 38].indexOf(event.which) !== -1) {
+     const suggestionsKeys = [...this.suggestions().keys()];
+     let index = suggestionsKeys.indexOf(this.state.active) + (event.which === 40 ? +1 : -1);
+     if (index < 0) index = suggestionsKeys.length - 1;
+     if (index >= suggestionsKeys.length) index = 0;
+     this.setState({active: suggestionsKeys[index]});
+   }
+ };
+
+ handleSuggestionHover = (key) => {
+   this.setState({active: key});
+ };
+
+ calculateDirection () {
+   if (this.props.direction === 'auto') {
+     const client = ReactDOM.findDOMNode(this.refs.input).getBoundingClientRect();
+     const screen_height = window.innerHeight || document.documentElement.offsetHeight;
+     const up = client.top > ((screen_height / 2) + client.height);
+     return up ? 'up' : 'down';
+   } else {
+     return this.props.direction;
+   }
+ }
+
+ query (key) {
+   return !this.props.multiple && this.props.value ? this.source().get(key) : '';
+ }
+
+ suggestions () {
+   const suggest = new Map();
+   const query = this.state.query.toLowerCase().trim() || '';
+   const values = this.values();
+   for (const [key, value] of this.source()) {
+     if (!values.has(key) && value.toLowerCase().trim().startsWith(query)) {
+       suggest.set(key, value);
+     }
+   }
+   return suggest;
+ }
+
+ source () {
+   const { source: src } = this.props;
+   if (src.hasOwnProperty('length')) {
+     return new Map(src.map((item) => [item, item]));
+   } else {
+     return new Map(Object.keys(src).map((key) => [key, src[key]]));
+   }
+ }
+
+ values () {
+   const valueMap = new Map();
+   const vals = this.props.multiple ? this.props.value : [this.props.value];
+   for (const [k, v] of this.source()) {
+     if (vals.indexOf(k) !== -1) valueMap.set(k, v);
+   }
+   return valueMap;
+ }
+
+ select (key, event) {
+   events.pauseEvent(event);
+   const values = this.values(this.props.value);
+   this.handleChange([key, ...values.keys()], event);
+ }
+
+ unselect (key, event) {
+   const values = this.values(this.props.value);
+   values.delete(key);
+   this.handleChange([...values.keys()], event);
+ }
+
+ renderSelected () {
+   if (this.props.multiple) {
+     const selectedItems = [...this.values()].map(([key, value]) => {
+       return <li key={key} className={style.value} onClick={this.unselect.bind(this, key)}>{value}</li>;
+     });
+
+     return <ul className={style.values}>{selectedItems}</ul>;
+   }
+ }
+
+ renderSuggestions () {
+   const suggestions = [...this.suggestions()].map(([key, value]) => {
+     const className = ClassNames(style.suggestion, {[style.active]: this.state.active === key});
+     return (
+       <li
+         key={key}
+         className={className}
+         onMouseDown={this.select.bind(this, key)}
+         onMouseOver={this.handleSuggestionHover.bind(this, key)}
+       >
+         {value}
+       </li>
+     );
+   });
+
+   const className = ClassNames(style.suggestions, {[style.up]: this.state.direction === 'up'});
+   return <ul ref='suggestions' className={className}>{suggestions}</ul>;
+ }
+
+ render () {
+   const {error, label, ...other} = this.props;
+   const className = ClassNames(style.root, {
+     [style.focus]: this.state.focus
+   }, this.props.className);
+
+   return (
+     <div data-react-toolbox='autocomplete' className={className}>
+       {this.renderSelected()}
+       <Input
+         {...other}
+         ref='input'
+         className={style.input}
+         error={error}
+         label={label}
+         onBlur={this.handleQueryBlur}
+         onChange={this.handleQueryChange}
+         onFocus={this.handleQueryFocus}
+         onKeyUp={this.handleQueryKeyUp}
+         value={this.state.query}
+       />
+       {this.renderSuggestions()}
+     </div>
+   );
+ }
+}
+
+export default Autocomplete;
diff --git a/components/utils/index.js b/components/utils/index.js
index c48fd6474..c4b256034 100644
--- a/components/utils/index.js
+++ b/components/utils/index.js
@@ -4,3 +4,7 @@ import time from './time';
 import utils from './utils';
 
 export default {events, prefixer, time, utils};
+export {events};
+export {prefixer};
+export {time};
+export {utils};
diff --git a/server.js b/server.js
index 5c2ad4832..a0942f30f 100644
--- a/server.js
+++ b/server.js
@@ -17,14 +17,14 @@ app.use(require('webpack-dev-middleware')(compiler, {
 app.use(require('webpack-hot-middleware')(compiler));
 
 app.get('*', function (req, res) {
-	res.sendFile(path.join(__dirname, './www/index.html'));
+	res.sendFile(path.join(__dirname, './spec/index.html'));
 });
 
-app.listen(8081, '0.0.0.0', function (err) {
+app.listen(8080, '0.0.0.0', function (err) {
 	if (err) {
 		console.log(err);
 		return;
 	}
 
-	console.log('Listening at http://0.0.0.0:8081');
+	console.log('Listening at http://0.0.0.0:8080');
 });
diff --git a/webpack.config.development.js b/webpack.config.development.js
index 8c84b1227..24d0da982 100644
--- a/webpack.config.development.js
+++ b/webpack.config.development.js
@@ -23,8 +23,8 @@ module.exports = {
     loaders: [
       {
         test: /\.(js|jsx)$/,
-        loader: ['babel'],
-        include: path.join(__dirname, 'spec')
+        loader: 'babel',
+        exclude: /(node_modules)/
       }, {
         test: /\.(scss|css)$/,
         loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap')

From 6eb58380c41fef1691dd97df340a1f8134c964f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rau=CC=81l=20Garci=CC=81a?= <serulo@gmail.com>
Date: Fri, 8 Jan 2016 16:50:07 +0100
Subject: [PATCH 0313/1024] Add missing semicolons

---
 components/card/CardActions.jsx | 2 +-
 components/card/CardMedia.jsx   | 2 +-
 components/card/CardText.jsx    | 2 +-
 components/tooltip/Tooltip.jsx  | 2 +-
 spec/components/dialog.jsx      | 2 +-
 spec/components/drawer.jsx      | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/card/CardActions.jsx b/components/card/CardActions.jsx
index c14c6c4e8..9ad7ff7bf 100644
--- a/components/card/CardActions.jsx
+++ b/components/card/CardActions.jsx
@@ -6,7 +6,7 @@ class CardActions extends Component {
   static propTypes = {
     children: PropTypes.any,
     className: PropTypes.string
-  }
+  };
 
   render () {
     const { children, className, ...other } = this.props;
diff --git a/components/card/CardMedia.jsx b/components/card/CardMedia.jsx
index f4978fa7b..370c70346 100644
--- a/components/card/CardMedia.jsx
+++ b/components/card/CardMedia.jsx
@@ -13,7 +13,7 @@ class CardMedia extends Component {
       PropTypes.string,
       PropTypes.element
     ])
-  }
+  };
 
   render () {
     const { aspectRatio, children, className, color, contentOverlay, image, ...other } = this.props;
diff --git a/components/card/CardText.jsx b/components/card/CardText.jsx
index 2e09fa51f..2a3d8cafb 100644
--- a/components/card/CardText.jsx
+++ b/components/card/CardText.jsx
@@ -6,7 +6,7 @@ class CardText extends Component {
   static propTypes = {
     children: PropTypes.any,
     className: PropTypes.string
-  }
+  };
 
   render () {
     const { children, className, ...other } = this.props;
diff --git a/components/tooltip/Tooltip.jsx b/components/tooltip/Tooltip.jsx
index a79450814..2719f9c0a 100644
--- a/components/tooltip/Tooltip.jsx
+++ b/components/tooltip/Tooltip.jsx
@@ -40,7 +40,7 @@ const Tooltip = (ComposedComponent) => class extends React.Component {
     if (this.timeout) clearTimeout(this.timeout);
     if (this.props.tooltipHideOnClick) this.setState({active: false});
     if (this.props.onClick) this.props.onClick();
-  }
+  };
 
   render () {
     const {children, className, tooltip, tooltipDelay, tooltipHideOnClick, ...other} = this.props;
diff --git a/spec/components/dialog.jsx b/spec/components/dialog.jsx
index c44eaf816..27848511f 100644
--- a/spec/components/dialog.jsx
+++ b/spec/components/dialog.jsx
@@ -11,7 +11,7 @@ class DialogTest extends React.Component {
     this.setState({
       active: !this.state.active
     });
-  }
+  };
 
   actions = [
     { label: 'Disagree', primary: true, onClick: this.handleToggle },
diff --git a/spec/components/drawer.jsx b/spec/components/drawer.jsx
index f76fea7ae..2ae7ab5ea 100644
--- a/spec/components/drawer.jsx
+++ b/spec/components/drawer.jsx
@@ -14,7 +14,7 @@ class DrawerTest extends React.Component {
 
   handleToggleRight = () => {
     this.setState({rightActive: !this.state.rightActive});
-  }
+  };
 
   render () {
     return (

From d7b6c6b2c3dcf51721143eada459b764962eb15e Mon Sep 17 00:00:00 2001
From: Robert Parker <robert@flavorus.com>
Date: Wed, 13 Jan 2016 16:51:16 -0800
Subject: [PATCH 0314/1024] Add TypeScript definition file and typings entry to
 package.json, as well as a blurb in README.md

---
 README.md          |    4 +
 package.json       |    1 +
 react-toolbox.d.ts | 1222 ++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 1227 insertions(+)
 create mode 100644 react-toolbox.d.ts

diff --git a/README.md b/README.md
index 70471e5a3..c005c7cf1 100644
--- a/README.md
+++ b/README.md
@@ -88,6 +88,10 @@ If you browse the resulting markup you will see *data attributes* like `data-rol
 }
 ```
 
+## TypeScript
+
+A TypeScript definition file `react-toolbox.d.ts` is available. It is referenced in `package.json` and should be picked up by the TypeScript compiler when importing from the npm package.
+
 ## Authors and Contributors
 
 The project is being initially developed and maintained by [Javier Velasco](http://javivelasco.com) and [Javier Jiménez](http://soyjavi.com) and the [contribution scene](https://github.com/react-toolbox/react-toolbox/graphs/contributors) is just getting warm. We want to create reference components so any contribution is very welcome.
diff --git a/package.json b/package.json
index 46b9fde70..f67dd2dd6 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "react-addons-css-transition-group": "^0.14.0",
     "normalize.css": "^3.0.3"
   },
+  "typings": "./react-toolbox.d.ts",
   "devDependencies": {
     "autoprefixer": "^6.0.3",
     "babel": "^5.8.23",
diff --git a/react-toolbox.d.ts b/react-toolbox.d.ts
new file mode 100644
index 000000000..76185f343
--- /dev/null
+++ b/react-toolbox.d.ts
@@ -0,0 +1,1222 @@
+// Type definitions for react-toolbox 0.14.0
+// Project: http://react-toolbox.com/
+// Definitions by: @xogeny (Michael M. Tiller), @hsrobflavorus (Robert Parker)
+/*  CHANGES
+    * 01/13/2016: Minor changes, add a few missing props, add IconButton to react-toolbox/lib/button
+    * 12/21/2015: Fix "import * as Input from 'react-toolbox/lib/input'" style imports, which now correctly import only the necessary component(s).
+        * NOTE that you must use "import * as {Component Name}" not just "import {Component Name}" for this to work.
+    * 12/20/2015: Should be compatible with 0.14.0. Refactor modules into 'react-toolbox/lib/*' format. 
+        Unfortunately importing them directly in that manner doesn't seem to work
+        i.e. "import Input from 'react-toolbox/lib/input'" resolves to undefined, whereas "import { Input } from 'react-toolbox'" works fine!
+        ... Any ideas welcome!
+    * 12/20/2015: Add AppBar, Avatar, and refactor Card and its child Components to match the documentation.
+    * 12/18/2015: Update to react-toolbox 0.13.1 (from 0.12.11)
+    * 12/18/2015: Use JSDoc-style comments to provide Intellisense where supported
+*/
+/*
+    MISSING COMPONENTS (Contributions welcome)
+    * Ripple HOC
+*/
+///<reference path='../react/react.d.ts' />
+
+declare namespace __RT {
+    import React = __React;
+
+    // Properties that all components have
+    export interface Props {
+        /**
+         * Sets a CSS class on the component.
+         */
+        className?: string,
+        /**
+         * A key used to uniquely identify the element within an Array
+         */
+        key?: string,
+        /**
+         * Inline style
+         */
+        style?: any,
+        /**
+         * Tooltip text
+         * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+         * @see http://react-toolbox.com/#/components/tooltip
+         */
+        tooltip?: string,
+        /**
+         * Amount of time in miliseconds spent before the tooltip is visible.
+         * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+         * @see http://react-toolbox.com/#/components/tooltip
+         */
+        tooltipDelay?: number,
+        /**
+         * If true, the Tooltip hides after a click in the host component.
+         * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+         * @default true
+         * @see http://react-toolbox.com/#/components/tooltip
+         */
+        tooltipHideOnClick?: boolean,
+    }
+
+    /**
+     * Properties of modal components (Drawer, Dialog)
+     */
+    export interface Modal {
+        /**
+         * If true, the dialog will be active.
+         */
+        active: boolean,
+        /**
+         * Callback to be invoked when the dialog overlay is clicked.
+         */
+        onOverlayClick?: Function,
+    }
+
+    // Interface for components with icons
+    export interface Iconic {
+        /**
+         * Value of the icon (See icon component).
+         */
+        icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement,
+    }
+
+    export interface Conditional {
+        /**
+         * If true, component will be disabled
+         * @default false
+         */
+        disabled?: boolean
+    }
+
+    /**
+     * Properties of components that have values that can be changed (T is the type of the value)
+     */
+    export interface Changeable<T> {
+        /**
+         * Callback called when the picker value is changed.
+         * @param v Type of the value
+         */
+        onChange?: (v: T) => void
+    }
+
+    /**
+     * Properties of components that can be clicked
+     */
+    export interface Clickable {
+        /**
+         *  Callback called when the button is clicked.
+         */
+        onClick?: Function
+    }
+
+    export interface Option<T> {
+        label: string,
+        value: T,
+    }
+
+    ////////////////////////////////
+    /// Component definitions
+    ////////////////////////////////
+    export interface AppBarProps extends Props {
+        /**
+         * If true, the AppBar shows a shadow.
+         * @default false
+         */
+        flat?: boolean,
+        /**
+         * Determine if the bar should have position fixed (true) or relative (false)
+         * @default false
+         */
+        fixed?: boolean,
+    }
+    /**
+     * The app bar is a special kind of toolbar that’s used for branding, navigation, search, and actions. 
+     * Usually it contains controls on the right and left side and a title with the current section or app name. 
+     * You should give the content with children elements.
+     */
+    class AppBar extends React.Component<AppBarProps, {}> {
+        render(): React.DOMElement<any>;
+    }
+    export interface AvatarProps extends Props, Iconic {
+        children?: any,
+        image?: string | __React.ReactElement<any> | __React.ReactHTMLElement | __React.ClassicComponent<any, any>,
+        title?: string | boolean,
+    }
+    /**
+     * Avatars can be used to represent people. 
+     * For personal avatars, offer personalization options. 
+     * As users may choose not to personalize an avatar, provide delightful defaults. 
+     * When used with a specific logo, avatars can also be used to represent brand.
+     */
+    class Avatar extends React.Component<AvatarProps, {}> {
+        render(): React.DOMElement<any>;
+    }
+    interface AutocompleteProps extends Props, Conditional, Changeable<string | Array<any>> {
+        /**
+         * Sets the error string for the internal input element.
+         */
+        error?: string,
+        /**
+         * The text string to use for the floating label element.
+         */
+        label?: string,
+        /**
+         * If true, component can hold multiple values.
+         * @default true
+         */
+        multiple?: boolean,
+        /**
+         * 	Object of key/values or array representing all items suggested.
+         */
+        source: Object | Array<any>,
+        /**
+         * Type of the input element. It can be a valid HTML5 input type
+         * @default text
+         */
+        type?: string,
+        /**
+         * 	Value or array of values currently selected component.Current value of the input element.
+         */
+        value?: string | Array<any>,
+    }
+    /**
+     * An input field with a set of predeterminated labeled values. When it's focused it shows a list of hints that are filtered by label as the user types. 
+     * They can be simple or multiple depending on the amount of values that can be selected. 
+     * The opening direction is determined at opening time depending on the current position.
+     */
+    class Autocomplete extends React.Component<AutocompleteProps, {}> {
+        render(): React.DOMElement<any>;
+    }
+    interface ButtonProps extends Props, Clickable, Conditional, Iconic {
+        /**
+         * Indicates if the button should have accent color.
+         * @default false
+         */
+        accent?: boolean,
+        /**
+         * If true, the button will have a flat look.
+         * @default false
+         */
+        flat?: boolean,
+        /**
+         * If true, the button will have a floating look.
+         * @default false
+         */
+        floating?: boolean,
+        /**
+         * If specified, the button will be rendered as an <a>
+         */
+        href?: string,
+        /**
+         * The text string to use for the name of the button.
+         */
+        label?: string,
+        /**
+         * If true, component will be disabled and show a loading animation.
+         * @default false
+         */
+        loading?: boolean,
+        /**
+         * To be used with floating button. If true the button will be smaller. 
+         * @default false
+         */
+        mini?: boolean,
+        /**
+         * Indicates if the button should have primary color.
+         * @default false
+         */
+        primary?: boolean,
+        /**
+         * If true, the button will have a raised look.
+         * @default false
+         */
+        raised?: boolean,
+        /**
+         * If true, component will have a ripple effect on click.
+         * @default true
+         */
+        ripple?: boolean,
+    }
+    /**
+     * A button clearly communicates what action will occur when the user touches it. 
+     * It consists of text, an image, or both, designed in accordance with your app’s color theme.
+     */
+    class Button extends React.Component<ButtonProps, {}> {
+        render(): React.DOMElement<any>;
+    }
+    class IconButton extends React.Component<ButtonProps, {}> {
+        render(): React.DOMElement<any>;
+    }
+    interface CardProps extends Props, Clickable {
+        /**
+         * Child components, usually Card subcomponents.
+         */
+        children?: any,
+        /**
+         * Increases the shadow depth to appear elevated.
+         */
+        raised?: boolean,
+        /**
+         * Array of objects describing actions. These actions will be rendered as buttons and the object fields will be transferred to those.
+         * @default []
+         */
+        actions?: Array<ButtonProps>,
+        /**
+         * Sets HEX or RGBA color to add a colored layer to the heading.
+         */
+        color?: string,
+        /**
+         * URL to set as a background image in the heading.
+         */
+        image?: string,
+        
+        /**
+         * Type of the component to display general modifications. It can be 'wide' for a larger card, 'image' if it's an image card or 'event' which shows just a title on top.
+         */
+        type?: string,
+    }
+    /**
+     * A Card is a piece of paper with unique related data that serves as an entry point to more detailed information. 
+     * For example, a card could contain a photo, text, and a link about a single subject.
+     * Cards are composed of multiple subcomponents in React Toolbox. 
+     * You can combine each of the subcomponents to create all different Material Design Cards given in the spec.
+     */
+    export class Card extends React.Component<CardProps, {}> {
+        render(): React.DOMElement<any>;
+    }
+    export interface CardTitleProps extends Props {
+        avatar?: string | __React.ReactElement<any> | __React.ReactHTMLElement | __React.ClassicComponent<any, any>,
+        /**
+         * Children to pass through the component.
+         */
+        children?: any,
+        /**
+         * Sets a complementary smaller text under the title.
+         */
+        subtitle?: string,
+        /**
+         * Sets the title of the card.
+         */
+        title?: string | boolean,
+    }
+    /**
+     * A versatile title block that can be used in various places on the card, including the media area. 
+     * This component can also display an avatar next to the title content.
+     */
+    export class CardTitle extends React.Component<CardTitleProps, {}> {
+        render(): React.DOMElement<any>;
+    }
+    export interface CardMediaProps extends Props {
+        /**
+         * Forces a ('wide' 16:9) or ('square' 1:1) aspect ratio respectively. 
+         * Unset, the media area will have a flexible height.
+         * @default ''
+         */
+        aspectRatio?: string,
+        /**
+         * Usually an image/video element or a <CardTitle> component.
+         */
+        children?: any,
+        /**
+         * Sets the background color
+         */
+        color?: string,
+        /**
+         * Creates a dark overlay underneath the child components.
+         */
+        contentOverlay?: boolean,
+        /**
+         * Can be used instead of children. Accepts an element or a URL string.
+         */
+        image?: string | __React.ReactElement<any> | __React.ReactHTMLElement | __React.ClassicComponent<any, any>,
+    }
+    /**
+     * Used for displaying media such as images or videos on a card. 
+     * Can also be used with a solid background color instead of an image.
+     */
+    export class CardMedia extends React.Component<CardMediaProps, {}> {
+        render(): React.DOMElement<any>;
+    }
+    export interface CardTextProps extends Props {
+        /**
+         * Children to pass through the component.
+         */
+        children?: any,
+    }
+    /**
+     * Basic card content container. 
+     * Good for small descriptions or other supplementary text.
+     */
+    export class CardText extends React.Component<CardTextProps, {}> {
+        render(): React.DOMElement<any>;
+    }
+    export interface CardActionsProps extends Props {
+        /**
+         * Children to pass through the component.
+         */
+        children?: any,
+    }
+    /**
+     * This component is used as a container for supplemental card actions. 
+     * Supplemental actions within the card are explicitly called out using icons, text, and UI controls, typically placed at the bottom of the card.
+     */
+    export class CardActions extends React.Component<CardActionsProps, {}> {
+        render(): React.DOMElement<any>;
+    }
+    export interface CheckboxProps extends Props, Changeable<boolean>, Conditional {
+        /**
+         * Value for the checkbox, can be true or false.
+         * @default false
+         */
+        checked: boolean,
+        /**
+         * Text label to attach next to the checkbox element.
+         */
+        label?: string,
+        /**
+         * The name of the field to set in the input checkbox.
+         */
+        name?: string,
+        /**
+         * Callback called when the checkbox is blurred.
+         */
+        onBlur?: Function,
+        /**
+         * Callback called when the checkbox is focused
+         */
+        onFocus?: Function,
+    }
+    export class Checkbox extends React.Component<CheckboxProps, {}> {
+        render(): React.DOMElement<any>;
+    }
+    export interface DatePickerProps extends Changeable<Date> {
+        /**
+         * Date object with the maximum selectable date.
+         */
+        maxDate?: Date,
+        /**
+         * Date object with the minimum selectable date.
+         */
+        minDate?: Date,
+        /**
+         * The text string to use like a input placeholder.
+         */
+        placeholder?: string,
+        /**
+         * Date object with the currently selected date.
+         */
+        value?: Date,
+    }
+    export class DatePicker extends React.Component<DatePickerProps, {}> {
+        render(): React.DOMElement<any>;
+    }
+    export interface DialogProps extends Props, Modal {
+        /**
+         * An array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons.
+         * @default []
+         */
+        actions?: Array<ButtonProps>,
+        /**
+         * The text string to use as standar title of the dialog.
+         */
+        title?: string | boolean,
+        /**
+         * Used to determine the size of the dialog. It can be small, normal or large.
+         * @default normal
+         */
+        type?: string,
+    }
+    export class Dialog extends React.Component<DialogProps, {}> {
+        render(): React.DOMElement<any>;
+    }
+    export interface DrawerProps extends Props, Modal {
+        /**
+         * Type of drawer. It can be 'left' or 'right' to display the drawer on the left or right side of the screen.
+         * @default left
+         */
+        type?: string
+    }
+    export class Drawer extends React.Component<DrawerProps, {}> {
+        render(): React.DOMElement<any>;
+    }
+
+    export interface DropdownProps extends Props, Changeable<any>, Conditional {
+        /**
+         * If true, the dropdown will open up or down depending on the position in the screen.
+         */
+        auto?: boolean,
+        /**
+         * The text string to use for the floating label element.
+         */
+        label?: string,
+        /**
+         * Array of data objects with the data to represent in the dropdown.
+         */
+        source: Array<Option<any>>,
+        /**
+         * Callback function that returns a JSX template to represent the element.
+         */
+        template?: Function,
+        /**
+         * Default value using JSON data.
+         */
+        value: string,
+    }
+    class Dropdown extends React.Component<DropdownProps, {}> {
+        render(): React.DOMElement<any>;
+    }
+
+    interface FontIconProps extends Props {
+        value: string
+    }
+    class FontIcon extends React.Component<FontIconProps, {}> {
+        render(): React.DOMElement<any>;
+    }
+
+    interface InputProps extends Props, Conditional, Changeable<string>, Iconic {
+        /**
+         * Give an error string to display under the field.
+         */
+        error?: string,
+        /**
+         * Indicates if the label is floating in the input field or not.
+         * @default true
+         */
+        floating?: boolean,
+        /**
+         * The text string to use for the floating label element.
+         */
+        label?: string,
+        /**
+         * Specifies the maximum number of characters allowed in the component.
+         */
+        maxLength?: number,
+        /**
+         * If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.
+         * @default false
+         */
+        multiline?: boolean,
+        /**
+         * Callback function that is fired when components is blurred.
+         */
+        onBlur?: Function,
+        /**
+         * Callback function that is fired when components is focused.
+         */
+        onFocus?: Function,
+        /**
+         * Callback function that is fired when a key is pressed.
+         */
+        onKeyPress?: Function,
+        /**
+         * If true, the html input has a required value.
+         * @default false
+         */
+        required?: boolean,
+        /**
+         * Type of the input element. It can be a valid HTML5 input type
+         * @default text
+         */
+        type?: string,
+        /**
+         * Current value of the input element.
+         */
+        value?: string,
+    }
+    class Input extends React.Component<InputProps, {}> {
+        render(): React.DOMElement<any>;
+    }
+
+    interface LinkProps extends React.Props<Link>, Iconic {
+        href: string,
+        /**
+         * The text string used for the text content of the link.
+         */
+        label: string,
+        /**
+         * Sets a count number useful to display in the page how many times was visited for example.
+         */
+        count?: number,
+    }
+    class Link extends React.Component<LinkProps, {}> {
+        render(): React.DOMElement<any>;
+    }
+
+    interface ListProps extends Props {
+        /**
+         * If true, each element in the list will have a ripple effect on click
+         * @default false
+         */
+        ripple?: boolean,
+        /**
+         * If true, the elements in the list will display a hover effect and a pointer cursor.
+         * @default false
+         */
+        selectable?: boolean,
+    }
+    class List extends React.Component<ListProps, {}> {
+        render(): React.DOMElement<any>;
+    }
+    interface ListItemProps extends Props, Conditional, Clickable {
+        /**
+         * A string URL to specify an avatar in the left side of the item.
+         */
+        avatar?: string,
+        /**
+         * Main text of the item. Required.
+         */
+        caption?: string,
+        /**
+         * A string key of a font icon to display an icon in the left side of the item.
+         */
+        leftIcon?: string,
+        /**
+         * Secondary text to display under the caption.
+         */
+        legend?: string,
+        /**
+         * The same as the leftIcon but in this case the icon is displayed in the right side.
+         */
+        rightIcon?: string,
+        /**
+         * If true, the item displays a ripple effect on click. By default it's inherited from the parent element.
+         * @default false
+         */
+        ripple?: boolean,
+        /**
+         * If true, the elements in the list will display a hover effect and a pointer cursor. Inherited from the parent
+         * @default false
+         */
+        selectable?: boolean,
+    }
+    class ListItem extends React.Component<ListItemProps, {}> {
+        render(): React.DOMElement<any>;
+    }
+    interface ListCheckboxProps extends Props, Conditional, Changeable<boolean> {
+        /**
+         * Main text of the item. Required.
+         */
+        caption?: string,
+        /**
+         * If true the checkbox appears checked by default.
+         * @default false
+         */
+        checked: boolean,
+        /**
+         * Secondary text to display under the caption.
+         */
+        legend?: string,
+        /**
+         * Name for the checkbox input item.
+         */
+        name?: string,
+        /**
+         * Callback called when the input element is blurred.
+         */
+        onBlur?: Function,
+        /**
+         * Callback called when the input element is focused.
+         */
+        onFocus?: Function,
+    }
+    class ListCheckbox extends React.Component<ListCheckboxProps, {}> {
+        render(): React.DOMElement<any>;
+    }
+    export interface ListSubHeaderProps extends Props {
+        /**
+         * List header caption.
+         */
+        caption: string;
+    }
+    class ListSubHeader extends React.Component<ListSubHeaderProps, {}> {
+        render(): React.DOMElement<any>;
+    }
+    interface ListDividerProps extends Props {
+        /**
+         * Indicates if the divider should be full width or should leave a space on the left side.
+         */
+        inset: boolean;
+    }
+    class ListDivider extends React.Component<ListDividerProps, {}> {
+        render(): React.DOMElement<any>;
+    }
+    interface MenuProps extends Props {
+        /**
+         * If true, the menu will be displayed as opened by default.
+         * @default false
+         */
+        active?: boolean,
+        /**
+         * Callback that will be called when the menu is being hidden.
+         */
+        onHide?: Function,
+        /**
+         * Callback that will be called when the menu is being shown.
+         */
+        onShow?: Function,
+        /**
+         * If true the menu wrapper will show an outline with a soft shadow.
+         * @default true
+         */
+        outline?: boolean,
+        /**
+         * Determine the position of the menu. 
+         * With static value the menu will be always shown, auto means that the it will decide the opening direction based on the current position. 
+         * To force a position use top-left, top-right, bottom-left, bottom-right.
+         * @default static
+         */
+        position?: string,
+        /**
+         * If true, the menu items will show a ripple effect on click.
+         */
+        ripple?: boolean,
+        /**
+         * If true, the menu will keep a value to highlight the active child item.
+         */
+        selectable?: boolean,
+        /**
+         *  Used for selectable menus and indicates the initial value so the child item with this value can be highlighted.
+         */
+        value?: boolean,
+    }
+    class Menu extends React.Component<MenuProps, {}> {
+        render(): React.DOMElement<any>;
+    }
+    interface IconMenuProps extends Props, Iconic {
+        /**
+         * If true, the icon will show a ripple when is clicked.
+         */
+        iconRipple?: boolean,
+        /**
+         * Transferred to the Menu component.
+         * @default true
+         */
+        menuRipple?: boolean,
+        /**
+         * Callback that will be called when the icon is clicked.
+         */
+        onClick?: Function,
+        /**
+         * Callback that will be called when the menu is being hidden.
+         */
+        onHide?: Function, 
+        /**
+         * Callback that will be called when the menu is being shown.
+         */
+        onShow?: Function,
+        /**
+         * Callback that will be called when a menu item is selected.
+         */
+        onSelect?: Function,
+        /**
+         * Determine the position of the menu. This property is transferred to the inner Menu component.
+         * @default auto
+         */
+        position?: string,
+        /**
+         * If true, the menu will keep a value to highlight the active child item. Transferred to the Menu
+         */
+        selectable?: boolean,
+    }
+    class IconMenu extends React.Component<IconMenuProps, {}> {
+        render(): React.DOMElement<any>;
+    }
+    interface MenuItemProps extends Props, Conditional, Iconic {
+        /**
+         * The text to include in the menu item.
+         */
+        caption?: string,
+        /**
+         * If true, the item will show a ripple effect when it's clicked. Inherited from the parent.
+         */
+        ripple?: boolean,
+        /**
+         * Transferred from the Menu component for selectable menus. Indicates if it's the current active option.
+         */
+        selected?: boolean,
+    }
+    class MenuItem extends React.Component<MenuItemProps, {}> {
+        render(): React.DOMElement<any>;
+    }
+    class MenuDivider extends React.Component<any, {}> {
+        render(): React.DOMElement<any>;
+    }
+    interface NavigationProps extends Props {
+        /**
+         * Array of objects that represent buttons so the keys will be transferred as properties to those.
+         */
+        actions?: Array<ButtonProps>,
+        /**
+         * Array of objects similar to actions but that will be rendered as <Link/> component definition.
+         */
+        routes?: Array<LinkProps>,
+        /**
+         * Type of the navigation, it can be 'vertical' or 'horizontal'.
+         */
+        type?: string,
+    }
+    class Navigation extends React.Component<NavigationProps, {}> {
+        render(): React.DOMElement<any>;
+    }
+    interface ProgressBarProps extends Props {
+        /**
+         * Value of a secondary progress bar useful for buffering.
+         */
+        buffer?: number,
+        /**
+         * Maximum value permitted.
+         */
+        max?: number, // 
+        /**
+         * minimum value permitted.
+         */
+        min?: number, // 
+        /**
+         * Mode of the progress bar, it can be determinate or indeterminate.
+         */
+        mode?: string, // 
+        /**
+         * If true, the circular progress bar will be changing its color.
+         */
+        multicolor?: boolean, // 
+        /**
+         * Type of the progress bar, it can be circular or linear.
+         * @default linear
+         */
+        type?: string,
+        /**
+         * Value of the current progress.
+         */
+        value?: number,
+    }
+    class ProgressBar extends React.Component<ProgressBarProps, {}> {
+        render(): React.DOMElement<any>;
+    }
+    interface RadioGroupProps extends Props, Conditional, Changeable<any> {
+        /**
+         * Name for the input element group.
+         */
+        name?: string,
+        /**
+         * Default value selected in the radio group.
+         */
+        value?: any,
+    }
+    class RadioGroup extends React.Component<RadioGroupProps, {}> {
+        render(): React.DOMElement<any>;
+    }
+    interface RadioButtonProps extends Props, Conditional {
+        /**
+         * If true, the input element will be selected by default. Transferred from the parent.
+         */
+        checked: boolean,
+        /**
+         * Name for the input element.
+         */
+        name?: string,
+        /**
+         * Callback function that will be invoked when the input is blurred.
+         */
+        onBlur?: Function,
+        /**
+         * Callback function that will be invoked when the value changes.
+         */
+        onChange?: Function,
+        /**
+         * Callback function that will be invoked when the input is focused.
+         */
+        onFocus?: Function,
+        /**
+         * Value for the radio button.
+         */
+        value: any,
+    }
+    class RadioButton extends React.Component<RadioButtonProps, {}> {
+        render(): React.DOMElement<any>;
+    }
+    interface SliderProps extends Props {
+        /**
+         * If true, an input is shown and the user can set the slider from keyboard value.
+         */
+        editable?: boolean,
+        /**
+         * Maximum value permitted.
+         */
+        max?: number,
+        /**
+         * Minimum value permitted.
+         */
+        min?: number,
+        /**
+         * Callback function that will be invoked when the slider value changes.
+         */
+        onChange?: Function,
+        /**
+         * If true, a pin with numeric value label is shown when the slider thumb is pressed. Use for settings for which users need to know the exact value of the setting.
+         */
+        pinned?: boolean,
+        /**
+         * If true, the slider thumb snaps to tick marks evenly spaced based on the step property value.
+         */
+        snaps?: boolean,
+        /**
+         * Amount to vary the value when the knob is moved or increase/decrease is called.
+         */
+        step?: number,
+        /**
+         * Current value of the slider.
+         */
+        value: number,
+    }
+    class Slider extends React.Component<SliderProps, {}> {
+        render(): React.DOMElement<any>;
+    }
+    interface SnackbarProps extends Props, Modal, Iconic {
+        /**
+         * For the action component inside the Snackbar.
+         */
+        action?: string,
+        /**
+         * Text to display in the content.
+         */
+        label?: string,
+        /**
+         * Callback function that will be called when the button action is clicked.
+         */
+        onClick?: Function,
+        /**
+         * Callback function when finish the set timeout.
+         */
+        onTimeout?: Function, 
+        /**
+         * amount of time after the Snackbar will be automatically hidden.
+         */
+        timeout?: number,
+        /**
+         * Indicates the action type. Can be 'accept', 'warning' or 'cancel'
+         */
+        type?: string,
+    }
+    class Snackbar extends React.Component<SnackbarProps, {}> {
+        render(): React.DOMElement<any>;
+    }
+    interface SwitchProps extends Props, Conditional {
+        /**
+         * If true, the switch will be enabled.
+         */
+        checked: boolean,
+        /**
+         * If true, component will be disabled.
+         */
+        disabled: boolean,
+        /**
+         * The text string to use for the floating label element.
+         */
+        label?: string,
+        /**
+         * The text string used as name of the input.
+         */
+        name?: string,
+        /**
+         * Callback function that is fired when when the switch is blurred.
+         */
+        onBlur?: Function,
+        /**
+         * Callback function that is fired when the components's value changes.
+         */
+        onChange?: Function,
+        /**
+         * Callback function fire when the switch is focused.
+         */
+        onFocus?: Function,
+    }
+    class Switch extends React.Component<SwitchProps, {}> {
+        render(): React.DOMElement<any>;
+    }
+    interface TableProps extends Props {
+        /**
+         * If true, component will show a heading using model field names.
+         */
+        heading?: boolean,
+        /**
+         * Object describing the data model that represents each object in the source.
+         */
+        model?: { [key: string]: string },
+        /**
+         * Callback function that is fired when an item in a row changes. If set, rows are editable.
+         */
+        onChange?: Function,
+        /**
+         * Callback function invoked when the row selection changes.
+         */
+        onSelect?: Function,
+        /**
+         * Array of indexes of the items in the source that should appear as selected.
+         */
+        selected?: Array<number>,
+        /**
+         * Array of objects representing each item to show.
+         */
+        source?: Array<{ [key: string]: any }>,
+    }
+    class Table extends React.Component<TableProps, {}> {
+        render(): React.DOMElement<any>;
+    }
+    interface TabsProps extends Props, Changeable<number> {
+        /**
+         * Current
+         */
+        index: number,
+    }
+    class Tabs extends React.Component<TabsProps, {}> {
+        render(): React.DOMElement<any>;
+    }
+    interface TabProps extends Props, Conditional {
+        /**
+         * If true, the current component is visible.
+         * @default false
+         */
+        active?: boolean,
+        /**
+         * If true, the current component is not visible.
+         * @default false
+         */
+        hidden?: boolean,
+        /**
+         * Label text for navigation header
+         */
+        label?: string,
+        /**
+         * Callback function that is fired when the tab is activated.
+         */
+        onActive?: Function,
+    }
+    class Tab extends React.Component<TabProps, {}> {
+        render(): React.DOMElement<any>;
+    }
+    interface TimePickerProps extends Props {
+        /**
+         * Format to display the clock. It can be 24hr or ampm.
+         * @default 24hr
+         */
+        format?: string,
+        /**
+         * Callback called when the picker value is changed.
+         */
+        onChange?: Function,
+        /**
+         * Datetime object with currrently selected time
+         */
+        value: Date,
+    }
+    class TimePicker extends React.Component<TimePickerProps, {}> {
+        render(): React.DOMElement<any>;
+    }
+    /*interface TooltipProps extends Props {
+        /**
+         * The text string to use for the tooltip.
+         *
+        label: string,
+    }
+
+    class Tooltip extends React.Component<TooltipProps, {}> {
+        render(): React.DOMElement<any>;
+    }*/
+
+    class TooltipComponent<P, S> extends React.Component<P, S> {
+        getDecoratedComponentInstance(): React.Component<P, S>;
+    }
+
+    interface TooltipComponentClass<P> extends React.ComponentClass<P> {
+        new (props?: P, context?: any): TooltipComponent<P, any>;
+    }
+
+    function Tooltip<P> (componentClass: React.ComponentClass<P>): TooltipComponentClass<P>;
+}
+
+declare var AppBar: typeof __RT.AppBar;
+declare module 'react-toolbox/lib/app_bar' {
+    export = AppBar;
+}
+declare var Autocomplete: typeof __RT.Autocomplete;
+declare module 'react-toolbox/lib/autocomplete' {
+    export = Autocomplete;
+}
+declare var Avatar: typeof __RT.Avatar;
+declare module 'react-toolbox/lib/avatar' {
+    export = Avatar;
+}
+declare var Button: typeof __RT.Button;
+declare var IconButton: typeof __RT.IconButton;
+declare module 'react-toolbox/lib/button' {
+    export { Button, IconButton };
+}
+declare var Card: typeof __RT.Card;
+declare var CardActions: typeof __RT.CardActions;
+declare var CardMedia: typeof __RT.CardMedia;
+declare var CardText: typeof __RT.CardText;
+declare var CardTitle: typeof __RT.CardTitle;
+declare module 'react-toolbox/lib/card' {
+    export {
+    Card,
+    CardActions,
+    CardMedia,
+    CardText,
+    CardTitle
+    }
+}
+declare var Checkbox: typeof __RT.Checkbox;
+declare module 'react-toolbox/lib/checkbox' {
+    export = Checkbox;
+}
+declare var DatePicker: typeof __RT.DatePicker;
+declare module 'react-toolbox/lib/date_picker' {
+    export = DatePicker;
+}
+declare var Dialog: typeof __RT.Dialog;
+declare module 'react-toolbox/lib/dialog' {
+    export = Dialog;
+}
+declare var Drawer: typeof __RT.Drawer;
+declare module 'react-toolbox/lib/drawer' {
+    export = Drawer;
+}
+declare var Dropdown: typeof __RT.Dropdown;
+declare module 'react-toolbox/lib/dropdown' {
+    export = Dropdown;
+}
+declare var FontIcon: typeof __RT.FontIcon;
+declare module 'react-toolbox/lib/font_icon' {
+    export = FontIcon;
+}
+declare var Input: typeof __RT.Input;
+declare module 'react-toolbox/lib/input' {
+    export = Input;
+}
+declare var Link: typeof __RT.Link;
+declare module 'react-toolbox/lib/link' {
+    export = Link;
+}
+declare var List: typeof __RT.List;
+declare var ListItem: typeof __RT.ListItem;
+declare var ListCheckbox: typeof __RT.ListCheckbox;
+declare var ListSubHeader: typeof __RT.ListSubHeader;
+declare var ListDivider: typeof __RT.ListDivider;
+declare module 'react-toolbox/lib/list' {
+    export {
+    List,
+    ListItem,
+    ListCheckbox,
+    ListSubHeader,
+    ListDivider
+    }
+}
+declare var Menu: typeof __RT.Menu;
+declare var IconMenu: typeof __RT.IconMenu;
+declare var MenuItem: typeof __RT.MenuItem;
+declare var MenuDivider: typeof __RT.MenuDivider;
+declare module 'react-toolbox/lib/menu' {
+    export {
+    Menu,
+    IconMenu,
+    MenuItem,
+    MenuDivider
+    }
+}
+declare var Navigation: typeof __RT.Navigation;
+declare module 'react-toolbox/lib/navigation' {
+    export = Navigation;
+}
+declare var ProgressBar: typeof __RT.ProgressBar;
+declare module 'react-toolbox/lib/progress_bar' {
+    export = ProgressBar;
+}
+declare var RadioGroup: typeof __RT.RadioGroup;
+declare var RadioButton: typeof __RT.RadioButton;
+declare module 'react-toolbox/lib/radio' {
+    export {
+    RadioGroup,
+    RadioButton
+    }
+}
+declare var Slider: typeof __RT.Slider;
+declare module 'react-toolbox/lib/slider' {
+    export = Slider;
+}
+declare var Snackbar: typeof __RT.Snackbar;
+declare module 'react-toolbox/lib/snackbar' {
+    export = Snackbar;
+}
+declare var Switch: typeof __RT.Switch;
+declare module 'react-toolbox/lib/switch' {
+    export = Switch;
+}
+declare var Table: typeof __RT.Table;
+declare module 'react-toolbox/lib/table' {
+    export = Table;
+}
+declare var Tab: typeof __RT.Tab;
+declare var Tabs: typeof __RT.Tabs;
+declare module 'react-toolbox/lib/tabs' {
+    export { Tab, Tabs }
+}
+declare var TimePicker: typeof __RT.TimePicker;
+declare module 'react-toolbox/lib/time_picker' {
+    export = TimePicker;
+}
+declare var Tooltip: typeof __RT.Tooltip;
+declare module 'react-toolbox/lib/tooltip' {
+    export = Tooltip;
+}
+declare module 'react-toolbox' {
+    import * as AppBar from 'react-toolbox/lib/app_bar';
+    import * as Autocomplete from 'react-toolbox/lib/autocomplete';
+    import * as Avatar from 'react-toolbox/lib/avatar';
+    import { Button }from 'react-toolbox/lib/button';
+    import { Card, CardActions, CardMedia, CardText, CardTitle} from 'react-toolbox/lib/card';
+    import * as Checkbox from 'react-toolbox/lib/checkbox';
+    import * as DatePicker from 'react-toolbox/lib/date_picker';
+    import * as Dialog from 'react-toolbox/lib/dialog';
+    import * as Drawer from 'react-toolbox/lib/drawer';
+    import * as Dropdown from 'react-toolbox/lib/dropdown';
+    import * as FontIcon from 'react-toolbox/lib/font_icon';
+    import * as Input from 'react-toolbox/lib/input';
+    import * as Link from 'react-toolbox/lib/link';
+    import {List, ListItem, ListCheckbox, ListSubHeader, ListDivider} from 'react-toolbox/lib/list';
+    import {Menu, IconMenu, MenuItem, MenuDivider} from 'react-toolbox/lib/menu';
+    import * as Navigation from 'react-toolbox/lib/navigation';
+    import * as ProgressBar from 'react-toolbox/lib/progress_bar';
+    import {RadioGroup, RadioButton} from 'react-toolbox/lib/radio';
+    import * as Slider from 'react-toolbox/lib/slider';
+    import * as Snackbar from 'react-toolbox/lib/snackbar';
+    import * as Switch from 'react-toolbox/lib/switch';
+    import { Tab, Tabs } from 'react-toolbox/lib/tabs';
+    import * as TimePicker from 'react-toolbox/lib/time_picker';
+    import * as Tooltip from 'react-toolbox/lib/tooltip';
+
+    export {
+    AppBar,
+    Autocomplete,
+    Avatar,
+    Button,
+    Card, CardActions, CardMedia, CardText, CardTitle,
+    Checkbox,
+    DatePicker,
+    Dialog,
+    Drawer,
+    Dropdown,
+    FontIcon,
+    Input,
+    Link,
+    List, ListItem, ListCheckbox, ListSubHeader, ListDivider,
+    Menu, IconMenu, MenuItem, MenuDivider,
+    Navigation,
+    ProgressBar,
+    RadioGroup, RadioButton,
+    Slider,
+    Snackbar,
+    Switch,
+    Tab, Tabs,
+    TimePicker,
+    Tooltip
+    }
+}
\ No newline at end of file

From 998b5a44b73026f10eac62439f8156734eaf96c4 Mon Sep 17 00:00:00 2001
From: Juan Peri <eternoperegrino@gmail.com>
Date: Tue, 19 Jan 2016 23:14:17 +0100
Subject: [PATCH 0315/1024] Enable Element to behave as Icon

---
 components/font_icon/FontIcon.jsx | 7 +++++--
 components/input/Input.jsx        | 2 +-
 spec/components/input.jsx         | 4 +++-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/components/font_icon/FontIcon.jsx b/components/font_icon/FontIcon.jsx
index 8adc581a4..84d3d03f0 100644
--- a/components/font_icon/FontIcon.jsx
+++ b/components/font_icon/FontIcon.jsx
@@ -2,7 +2,10 @@ import React from 'react';
 import ClassNames from 'classnames';
 
 const FontIcon = ({ children, className, value, ...other}) => {
-  const classes = ClassNames('material-icons', className);
+  const classes = ClassNames(
+    {'material-icons': !React.isValidElement(value)},
+    className
+  );
   return (
     <span className={classes} {...other} >
       {value}
@@ -14,7 +17,7 @@ const FontIcon = ({ children, className, value, ...other}) => {
 FontIcon.propTypes = {
   children: React.PropTypes.any,
   className: React.PropTypes.string,
-  value: React.PropTypes.string
+  value: React.PropTypes.any
 };
 
 FontIcon.defaultProps = {
diff --git a/components/input/Input.jsx b/components/input/Input.jsx
index bf2e11d37..4e747ec06 100644
--- a/components/input/Input.jsx
+++ b/components/input/Input.jsx
@@ -10,7 +10,7 @@ class Input extends React.Component {
     disabled: React.PropTypes.bool,
     error: React.PropTypes.string,
     floating: React.PropTypes.bool,
-    icon: React.PropTypes.string,
+    icon: React.PropTypes.any,
     label: React.PropTypes.string,
     maxLength: React.PropTypes.number,
     multiline: React.PropTypes.bool,
diff --git a/spec/components/input.jsx b/spec/components/input.jsx
index 22f83aefe..38a845293 100644
--- a/spec/components/input.jsx
+++ b/spec/components/input.jsx
@@ -5,7 +5,8 @@ class InputTest extends React.Component {
   state = {
     normal: 'Tony Stark',
     fixedLabel: '',
-    withIcon: ''
+    withIcon: '',
+    withCustomIcon: ''
   };
 
   handleChange = (name, value) => {
@@ -27,6 +28,7 @@ class InputTest extends React.Component {
         <Input type='text' value='Read only' readOnly label='Phone Number' />
         <Input type='text' label='Disabled field' disabled />
         <Input type='tel' value={this.state.withIcon} label='With icon' onChange={this.handleChange.bind(this, 'withIcon')} icon='phone' />
+        <Input type='tel' value={this.state.withCustomIcon} label='With custom icon' onChange={this.handleChange.bind(this, 'withCustomIcon')} icon={<span>A</span>} />
       </section>
     );
   }

From 08c0907a3c87ca5ee8e4c757e4f03225e61c09ef Mon Sep 17 00:00:00 2001
From: Boris Mikhaylov <kaguxmail@gmail.com>
Date: Fri, 22 Jan 2016 13:31:55 +0100
Subject: [PATCH 0316/1024] allow passing components to card title and subtitle

---
 components/card/CardTitle.jsx | 10 ++++++++--
 spec/components/card.jsx      | 15 +++++++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/components/card/CardTitle.jsx b/components/card/CardTitle.jsx
index 7918b5b3c..f5a550a2d 100644
--- a/components/card/CardTitle.jsx
+++ b/components/card/CardTitle.jsx
@@ -47,8 +47,14 @@ CardTitle.propTypes = {
     PropTypes.array
   ]),
   className: PropTypes.string,
-  subtitle: PropTypes.string,
-  title: PropTypes.string
+  subtitle: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element
+  ]),
+  title: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element
+  ])
 };
 
 export default CardTitle;
diff --git a/spec/components/card.jsx b/spec/components/card.jsx
index 91addd6d0..194878377 100644
--- a/spec/components/card.jsx
+++ b/spec/components/card.jsx
@@ -45,6 +45,21 @@ const cards = {
         </CardActions>
       </Card>
     )
+  }, {
+    name: 'Customized header',
+    component: (
+      <Card className={style.card}>
+        <CardTitle
+          title={<u>Title component</u>}
+          subtitle={<u>Subtitle component</u>}
+        />
+        <CardText>{dummyText}</CardText>
+        <CardActions>
+          <Button label="Action 1" />
+          <Button label="Action 2" />
+        </CardActions>
+      </Card>
+    )
   }],
   media: [{
     name: '16:9 Card Media Area',

From 678bd817450bd2e2ac96c11a29ee19e64e66c02d Mon Sep 17 00:00:00 2001
From: Boris Mikhaylov <kaguxmail@gmail.com>
Date: Fri, 22 Jan 2016 14:12:53 +0100
Subject: [PATCH 0317/1024] export raw components

---
 components/button/Button.jsx     | 2 +-
 components/button/IconButton.jsx | 1 +
 components/checkbox/Check.jsx    | 1 +
 components/list/ListItem.jsx     | 1 +
 components/menu/MenuItem.jsx     | 1 +
 components/radio/Radio.jsx       | 1 +
 components/switch/Thumb.jsx      | 5 +++--
 7 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/components/button/Button.jsx b/components/button/Button.jsx
index ecd57fcd6..43bd8c775 100644
--- a/components/button/Button.jsx
+++ b/components/button/Button.jsx
@@ -79,4 +79,4 @@ class Button extends React.Component {
 }
 
 export default Ripple({centered: false})(Button);
-export { Button as RegularButton };
+export { Button as RawButton };
diff --git a/components/button/IconButton.jsx b/components/button/IconButton.jsx
index ae0105e66..8f9908cfd 100644
--- a/components/button/IconButton.jsx
+++ b/components/button/IconButton.jsx
@@ -57,3 +57,4 @@ class IconButton extends React.Component {
 }
 
 export default Ripple({centered: true})(IconButton);
+export { IconButton as RawIconButton };
diff --git a/components/checkbox/Check.jsx b/components/checkbox/Check.jsx
index 37b631c34..00f054744 100644
--- a/components/checkbox/Check.jsx
+++ b/components/checkbox/Check.jsx
@@ -16,3 +16,4 @@ export default Ripple({
   spread: 2.6,
   centered: true
 })(Check);
+export {Check as RawCheck};
diff --git a/components/list/ListItem.jsx b/components/list/ListItem.jsx
index 65a908133..e71e49e66 100644
--- a/components/list/ListItem.jsx
+++ b/components/list/ListItem.jsx
@@ -64,3 +64,4 @@ export default Ripple({
   className: style.ripple,
   centered: false
 })(ListItem);
+export {ListItem as RawListItem};
diff --git a/components/menu/MenuItem.jsx b/components/menu/MenuItem.jsx
index f6b6e2cd4..77ff2f285 100644
--- a/components/menu/MenuItem.jsx
+++ b/components/menu/MenuItem.jsx
@@ -49,3 +49,4 @@ class MenuItem extends React.Component {
 export default Ripple({
   className: style.ripple
 })(MenuItem);
+export {MenuItem as RawMenuItem};
diff --git a/components/radio/Radio.jsx b/components/radio/Radio.jsx
index 4374993b4..645585029 100644
--- a/components/radio/Radio.jsx
+++ b/components/radio/Radio.jsx
@@ -12,3 +12,4 @@ export default Ripple({
   spread: 2.6,
   centered: true
 })(Radio);
+export {Radio as RawRadio};
diff --git a/components/switch/Thumb.jsx b/components/switch/Thumb.jsx
index 514aee39a..a1728b7ab 100644
--- a/components/switch/Thumb.jsx
+++ b/components/switch/Thumb.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import Ripple from '../ripple';
 import style from './style';
 
-const Check = ({children, onMouseDown}) => (
+const Thumb = ({children, onMouseDown}) => (
   <span role='thumb' className={style.thumb} onMouseDown={onMouseDown}>{children}</span>
 );
 
@@ -10,4 +10,5 @@ export default Ripple({
   className: style.ripple,
   spread: 2.6,
   centered: true
-})(Check);
+})(Thumb);
+export {Thumb as RawThumb};

From a11d1527c2a2315bf1af6c56a21fcc19a859f426 Mon Sep 17 00:00:00 2001
From: Boris Mikhaylov <kaguxmail@gmail.com>
Date: Fri, 22 Jan 2016 14:20:22 +0100
Subject: [PATCH 0318/1024] propagate events in Tooltip

---
 components/tooltip/Tooltip.jsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/tooltip/Tooltip.jsx b/components/tooltip/Tooltip.jsx
index 2719f9c0a..967f14c19 100644
--- a/components/tooltip/Tooltip.jsx
+++ b/components/tooltip/Tooltip.jsx
@@ -24,22 +24,22 @@ const Tooltip = (ComposedComponent) => class extends React.Component {
     active: false
   };
 
-  handleMouseEnter = () => {
+  handleMouseEnter = (event) => {
     if (this.timeout) clearTimeout(this.timeout);
     this.timeout = setTimeout(() =>this.setState({active: true}), this.props.tooltipDelay);
-    if (this.props.onMouseEnter) this.props.onMouseEnter();
+    if (this.props.onMouseEnter) this.props.onMouseEnter(event);
   };
 
-  handleMouseLeave = () => {
+  handleMouseLeave = (event) => {
     if (this.timeout) clearTimeout(this.timeout);
     if (this.state.active) this.setState({active: false});
-    if (this.props.onMouseLeave) this.props.onMouseLeave();
+    if (this.props.onMouseLeave) this.props.onMouseLeave(event);
   };
 
-  handleClick = () => {
+  handleClick = (event) => {
     if (this.timeout) clearTimeout(this.timeout);
     if (this.props.tooltipHideOnClick) this.setState({active: false});
-    if (this.props.onClick) this.props.onClick();
+    if (this.props.onClick) this.props.onClick(event);
   };
 
   render () {

From 8dad57e45692ad60d995e07b9fd2624ddd315489 Mon Sep 17 00:00:00 2001
From: Boris Mikhaylov <kaguxmail@gmail.com>
Date: Fri, 22 Jan 2016 14:22:35 +0100
Subject: [PATCH 0319/1024] propagate events in Button

---
 components/button/Button.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/button/Button.jsx b/components/button/Button.jsx
index ecd57fcd6..d86a310d0 100644
--- a/components/button/Button.jsx
+++ b/components/button/Button.jsx
@@ -36,14 +36,14 @@ class Button extends React.Component {
     raised: false
   };
 
-  handleMouseUp = () => {
+  handleMouseUp = (event) => {
     this.refs.button.blur();
-    if (this.props.onMouseUp) this.props.onMouseUp();
+    if (this.props.onMouseUp) this.props.onMouseUp(event);
   };
 
-  handleMouseLeave = () => {
+  handleMouseLeave = (event) => {
     this.refs.button.blur();
-    if (this.props.onMouseLeave) this.props.onMouseLeave();
+    if (this.props.onMouseLeave) this.props.onMouseLeave(event);
   };
 
   render () {

From 39c7c6102f840d4084d9145715ae300534dab2e2 Mon Sep 17 00:00:00 2001
From: Boris Mikhaylov <kaguxmail@gmail.com>
Date: Fri, 22 Jan 2016 14:40:37 +0100
Subject: [PATCH 0320/1024] removed unused checkbox validations

---
 components/checkbox/Checkbox.jsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/components/checkbox/Checkbox.jsx b/components/checkbox/Checkbox.jsx
index 8d5b7b35d..3a2fa38e6 100644
--- a/components/checkbox/Checkbox.jsx
+++ b/components/checkbox/Checkbox.jsx
@@ -9,10 +9,7 @@ class Checkbox extends React.Component {
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
     label: React.PropTypes.any,
-    name: React.PropTypes.string,
-    onBlur: React.PropTypes.func,
-    onChange: React.PropTypes.func,
-    onFocus: React.PropTypes.func
+    onChange: React.PropTypes.func
   };
 
   static defaultProps = {

From 9ce68aeceba90a0c3c80452b2adbc5c5d5bfac28 Mon Sep 17 00:00:00 2001
From: Boris Mikhaylov <kaguxmail@gmail.com>
Date: Fri, 22 Jan 2016 14:43:33 +0100
Subject: [PATCH 0321/1024] propagate events in Dropdown

---
 components/dropdown/Dropdown.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/dropdown/Dropdown.jsx b/components/dropdown/Dropdown.jsx
index 7c1cd159b..2d4d7ecaf 100644
--- a/components/dropdown/Dropdown.jsx
+++ b/components/dropdown/Dropdown.jsx
@@ -35,12 +35,12 @@ class Dropdown extends React.Component {
     const client = event.target.getBoundingClientRect();
     const screen_height = window.innerHeight || document.documentElement.offsetHeight;
     const up = this.props.auto ? client.top > ((screen_height / 2) + client.height) : false;
-    if (this.props.onFocus) this.props.onFocus();
+    if (this.props.onFocus) this.props.onFocus(event);
     this.setState({active: true, up});
   };
 
   handleSelect = (item, event) => {
-    if (this.props.onBlur) this.props.onBlur();
+    if (this.props.onBlur) this.props.onBlur(event);
     if (!this.props.disabled && this.props.onChange) {
       this.props.onChange(item, event);
       this.setState({active: false});

From d92350ff3ac52a1f5f2866fd208828908ec8e59e Mon Sep 17 00:00:00 2001
From: Boris Mikhaylov <kaguxmail@gmail.com>
Date: Fri, 22 Jan 2016 14:45:45 +0100
Subject: [PATCH 0322/1024] propagate events in IconMenu

---
 components/menu/IconMenu.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/menu/IconMenu.jsx b/components/menu/IconMenu.jsx
index 087e716c0..ed4381803 100644
--- a/components/menu/IconMenu.jsx
+++ b/components/menu/IconMenu.jsx
@@ -28,9 +28,9 @@ class IconMenu extends React.Component {
     selectable: false
   };
 
-  handleButtonClick = () => {
+  handleButtonClick = (event) => {
     this.refs.menu.show();
-    if (this.props.onClick) this.props.onClick();
+    if (this.props.onClick) this.props.onClick(event);
   };
 
   render () {

From 0a944994a116389dd4412bbb57d7551ee8af4e22 Mon Sep 17 00:00:00 2001
From: Boris Mikhaylov <kaguxmail@gmail.com>
Date: Fri, 22 Jan 2016 14:49:06 +0100
Subject: [PATCH 0323/1024] propagate events in Tab

---
 components/tabs/Tab.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/tabs/Tab.jsx b/components/tabs/Tab.jsx
index e011a3227..dfde112bb 100644
--- a/components/tabs/Tab.jsx
+++ b/components/tabs/Tab.jsx
@@ -26,9 +26,9 @@ class TabHeader extends React.Component {
     }
   }
 
-  handleClick = () => {
+  handleClick = (event) => {
     if (!this.props.disabled && this.props.onClick) {
-      this.props.onClick();
+      this.props.onClick(event);
     }
   };
 

From 485be5e05ae569c2ac2f4550290d6ab98764fa28 Mon Sep 17 00:00:00 2001
From: Boris Mikhaylov <kaguxmail@gmail.com>
Date: Fri, 22 Jan 2016 14:57:31 +0100
Subject: [PATCH 0324/1024] fixed button test

---
 components/button/__test__/index.spec.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/button/__test__/index.spec.jsx b/components/button/__test__/index.spec.jsx
index a2d55391f..a926c233f 100644
--- a/components/button/__test__/index.spec.jsx
+++ b/components/button/__test__/index.spec.jsx
@@ -1,7 +1,7 @@
 import expect from 'expect';
 import style from '../../button/style';
 import utils from '../../utils/testing';
-import {RegularButton as Button} from '../Button';
+import {RawButton as Button} from '../Button';
 
 describe('Button', function () {
   let button;

From 80b5b7a891ea2951faf6fe63b0a5f83eda983b0e Mon Sep 17 00:00:00 2001
From: Juan Peri <eternoperegrino@gmail.com>
Date: Fri, 22 Jan 2016 17:18:59 +0100
Subject: [PATCH 0325/1024] Enabling passing components as icons in all the
 components

---
 components/button/Button.jsx      | 2 +-
 components/button/IconButton.jsx  | 2 +-
 components/font_icon/FontIcon.jsx | 7 +++++--
 components/link/Link.jsx          | 2 +-
 components/list/ListItem.jsx      | 4 ++--
 components/menu/IconMenu.jsx      | 2 +-
 components/menu/MenuItem.jsx      | 2 +-
 components/snackbar/Snackbar.jsx  | 2 +-
 spec/components/input.jsx         | 2 +-
 9 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/components/button/Button.jsx b/components/button/Button.jsx
index ecd57fcd6..3a6bd54dd 100644
--- a/components/button/Button.jsx
+++ b/components/button/Button.jsx
@@ -13,7 +13,7 @@ class Button extends React.Component {
     flat: React.PropTypes.bool,
     floating: React.PropTypes.bool,
     href: React.PropTypes.string,
-    icon: React.PropTypes.string,
+    icon: React.PropTypes.any,
     inverse: React.PropTypes.bool,
     label: React.PropTypes.string,
     mini: React.PropTypes.bool,
diff --git a/components/button/IconButton.jsx b/components/button/IconButton.jsx
index ae0105e66..c257900a7 100644
--- a/components/button/IconButton.jsx
+++ b/components/button/IconButton.jsx
@@ -11,7 +11,7 @@ class IconButton extends React.Component {
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
     href: React.PropTypes.string,
-    icon: React.PropTypes.string,
+    icon: React.PropTypes.any,
     inverse: React.PropTypes.bool,
     neutral: React.PropTypes.bool,
     primary: React.PropTypes.bool,
diff --git a/components/font_icon/FontIcon.jsx b/components/font_icon/FontIcon.jsx
index 84d3d03f0..501ffac59 100644
--- a/components/font_icon/FontIcon.jsx
+++ b/components/font_icon/FontIcon.jsx
@@ -3,7 +3,7 @@ import ClassNames from 'classnames';
 
 const FontIcon = ({ children, className, value, ...other}) => {
   const classes = ClassNames(
-    {'material-icons': !React.isValidElement(value)},
+    {'material-icons': typeof value === 'string'},
     className
   );
   return (
@@ -17,7 +17,10 @@ const FontIcon = ({ children, className, value, ...other}) => {
 FontIcon.propTypes = {
   children: React.PropTypes.any,
   className: React.PropTypes.string,
-  value: React.PropTypes.any
+  value: React.PropTypes.oneOfType([
+    React.PropTypes.string,
+    React.PropTypes.element
+  ])
 };
 
 FontIcon.defaultProps = {
diff --git a/components/link/Link.jsx b/components/link/Link.jsx
index 73e12425a..9b427a107 100644
--- a/components/link/Link.jsx
+++ b/components/link/Link.jsx
@@ -23,7 +23,7 @@ Link.propTypes = {
   children: React.PropTypes.node,
   className: React.PropTypes.string,
   count: React.PropTypes.number,
-  icon: React.PropTypes.string,
+  icon: React.PropTypes.any,
   label: React.PropTypes.string
 };
 
diff --git a/components/list/ListItem.jsx b/components/list/ListItem.jsx
index 65a908133..4eee155f4 100644
--- a/components/list/ListItem.jsx
+++ b/components/list/ListItem.jsx
@@ -12,10 +12,10 @@ class ListItem extends React.Component {
     children: React.PropTypes.any,
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
-    leftIcon: React.PropTypes.string,
+    leftIcon: React.PropTypes.any,
     legend: React.PropTypes.string,
     onClick: React.PropTypes.func,
-    rightIcon: React.PropTypes.string,
+    rightIcon: React.PropTypes.any,
     ripple: React.PropTypes.bool,
     selectable: React.PropTypes.bool,
     to: React.PropTypes.string
diff --git a/components/menu/IconMenu.jsx b/components/menu/IconMenu.jsx
index 087e716c0..366eae143 100644
--- a/components/menu/IconMenu.jsx
+++ b/components/menu/IconMenu.jsx
@@ -7,7 +7,7 @@ class IconMenu extends React.Component {
   static propTypes = {
     children: React.PropTypes.node,
     className: React.PropTypes.string,
-    icon: React.PropTypes.string,
+    icon: React.PropTypes.any,
     iconRipple: React.PropTypes.bool,
     menuRipple: React.PropTypes.bool,
     onClick: React.PropTypes.func,
diff --git a/components/menu/MenuItem.jsx b/components/menu/MenuItem.jsx
index f6b6e2cd4..c4e3d2463 100644
--- a/components/menu/MenuItem.jsx
+++ b/components/menu/MenuItem.jsx
@@ -10,7 +10,7 @@ class MenuItem extends React.Component {
     children: React.PropTypes.any,
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
-    icon: React.PropTypes.string,
+    icon: React.PropTypes.any,
     onClick: React.PropTypes.func,
     selected: React.PropTypes.bool,
     shortcut: React.PropTypes.string
diff --git a/components/snackbar/Snackbar.jsx b/components/snackbar/Snackbar.jsx
index a7d727db7..82377c03b 100644
--- a/components/snackbar/Snackbar.jsx
+++ b/components/snackbar/Snackbar.jsx
@@ -10,7 +10,7 @@ class Snackbar extends React.Component {
     action: React.PropTypes.string,
     active: React.PropTypes.bool,
     className: React.PropTypes.string,
-    icon: React.PropTypes.string,
+    icon: React.PropTypes.any,
     label: React.PropTypes.string.isRequired,
     onClick: React.PropTypes.func,
     onTimeout: React.PropTypes.func,
diff --git a/spec/components/input.jsx b/spec/components/input.jsx
index 38a845293..5c0315982 100644
--- a/spec/components/input.jsx
+++ b/spec/components/input.jsx
@@ -28,7 +28,7 @@ class InputTest extends React.Component {
         <Input type='text' value='Read only' readOnly label='Phone Number' />
         <Input type='text' label='Disabled field' disabled />
         <Input type='tel' value={this.state.withIcon} label='With icon' onChange={this.handleChange.bind(this, 'withIcon')} icon='phone' />
-        <Input type='tel' value={this.state.withCustomIcon} label='With custom icon' onChange={this.handleChange.bind(this, 'withCustomIcon')} icon={<span>A</span>} />
+        <Input type='tel' value={this.state.withCustomIcon} label='With custom icon' onChange={this.handleChange.bind(this, 'withCustomIcon')} icon={<span>P</span>} />
       </section>
     );
   }

From 21a68606b1166b1470f07c6e66f54d3f5fdff8a9 Mon Sep 17 00:00:00 2001
From: Juan Peri <eternoperegrino@gmail.com>
Date: Fri, 22 Jan 2016 18:06:32 +0100
Subject: [PATCH 0326/1024] close dropdown when click event is triggered
 outside the component

---
 components/dropdown/Dropdown.jsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/components/dropdown/Dropdown.jsx b/components/dropdown/Dropdown.jsx
index 7c1cd159b..4e56f5d03 100644
--- a/components/dropdown/Dropdown.jsx
+++ b/components/dropdown/Dropdown.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import ClassNames from 'classnames';
 import Input from '../input';
 import events from '../utils/events';
@@ -30,6 +31,18 @@ class Dropdown extends React.Component {
     up: false
   };
 
+  componentWillUpdate (prevState, nextState) {
+    if (!prevState.active && nextState.active) {
+      events.addEventsToDocument({click: this.handleDocumentClick});
+    }
+  }
+
+  handleDocumentClick = (event) => {
+    if (this.state.active && !events.targetIsDescendant(event, ReactDOM.findDOMNode(this))) {
+      this.setState({active: false});
+    }
+  };
+
   handleMouseDown = (event) => {
     events.pauseEvent(event);
     const client = event.target.getBoundingClientRect();

From 160fb47fb1bdd5fabeded122265f9b40d1ad155c Mon Sep 17 00:00:00 2001
From: Juan Peri <eternoperegrino@gmail.com>
Date: Sat, 23 Jan 2016 09:42:56 +0100
Subject: [PATCH 0327/1024] Removing event from dropdown when not active
 anymore

---
 components/dropdown/Dropdown.jsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/components/dropdown/Dropdown.jsx b/components/dropdown/Dropdown.jsx
index 4e56f5d03..b55fee306 100644
--- a/components/dropdown/Dropdown.jsx
+++ b/components/dropdown/Dropdown.jsx
@@ -37,6 +37,12 @@ class Dropdown extends React.Component {
     }
   }
 
+  componentDidUpdate (prevProps, prevState) {
+    if (prevState.active && !this.state.active) {
+      events.removeEventsFromDocument({click: this.handleDocumentClick});
+    }
+  }
+
   handleDocumentClick = (event) => {
     if (this.state.active && !events.targetIsDescendant(event, ReactDOM.findDOMNode(this))) {
       this.setState({active: false});

From f16934c95ec251e8893c81d7291efe4c1c9ac8d9 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 23 Jan 2016 16:38:12 +0100
Subject: [PATCH 0328/1024] Fixes #270

---
 components/list/style.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/list/style.scss b/components/list/style.scss
index 867f517bd..bef91ca8e 100644
--- a/components/list/style.scss
+++ b/components/list/style.scss
@@ -33,7 +33,8 @@
     margin-top: - $list-vertical-padding;
   }
   .listItem ~ & {
-    margin: $list-vertical-padding 0;
+    margin-top: $list-vertical-padding;
+    margin-bottom: $list-vertical-padding;
   }
 }
 

From 0e60fd2a5ebfd0a5412bdcad27012056450dfac8 Mon Sep 17 00:00:00 2001
From: Boris Mikhaylov <kaguxmail@gmail.com>
Date: Mon, 25 Jan 2016 15:49:30 +0100
Subject: [PATCH 0329/1024] update avatar example to use `image` instead of
 `img` property

---
 components/avatar/readme.md                                     | 2 +-
 .../layout/main/modules/examples/avatar_example_1.txt           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/avatar/readme.md b/components/avatar/readme.md
index 4f92f9bdd..34ca7ca3d 100644
--- a/components/avatar/readme.md
+++ b/components/avatar/readme.md
@@ -17,7 +17,7 @@ const AvatarTest = () => (
     <Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />
     <Avatar icon={<GithubIcon />}/>
     <Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
-    <Avatar title="Javier" img="https://placeimg.com/80/80/animals"/>
+    <Avatar title="Javier" image="https://placeimg.com/80/80/animals"/>
     <Avatar style={{backgroundColor: 'yellowgreen'}}><GithubIcon /></Avatar>
   </div>
 );
diff --git a/docs/app/components/layout/main/modules/examples/avatar_example_1.txt b/docs/app/components/layout/main/modules/examples/avatar_example_1.txt
index ffc9eb4cd..73464d251 100644
--- a/docs/app/components/layout/main/modules/examples/avatar_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/avatar_example_1.txt
@@ -8,7 +8,7 @@ const AvatarTest = () => (
   <div>
     <Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />
     <Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
-    <Avatar title="Javier" img="https://placeimg.com/80/80/animals"/>
+    <Avatar title="Javier" image="https://placeimg.com/80/80/animals"/>
     <Avatar style={{backgroundColor: 'yellowgreen'}}><GithubIcon /></Avatar>
   </div>
 );

From 30c277b6d317620e1b964c3209222cd5c47199e0 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 26 Jan 2016 14:10:04 +0100
Subject: [PATCH 0330/1024] Fix state changes in slider spec example

---
 spec/components/slider.jsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/spec/components/slider.jsx b/spec/components/slider.jsx
index 458d9295a..43bcb5e75 100644
--- a/spec/components/slider.jsx
+++ b/spec/components/slider.jsx
@@ -8,9 +8,7 @@ class SliderTest extends React.Component {
   };
 
   handleChange = (slider, value) => {
-    const newState = {};
-    newState[slider] = value;
-    this.setState(newState);
+    this.setState({...this.state, [slider]: value});
   };
 
   render () {

From b736a5f87c9ab6230d01b9d9fe1b2726e7935265 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 26 Jan 2016 14:10:47 +0100
Subject: [PATCH 0331/1024] 0.14.1 release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a8ae4af12..90053f5e9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-toolbox",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "homepage": "http://www.react-toolbox.com/",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "author": "React Toolbox Team (http://github.com/react-toolbox)",

From 0deee32dd3048dea2d13c792fa04a191ac50d8be Mon Sep 17 00:00:00 2001
From: Boris Mikhaylov <kaguxmail@gmail.com>
Date: Tue, 26 Jan 2016 14:58:28 +0100
Subject: [PATCH 0332/1024] pass through props in Ripple

---
 components/ripple/Ripple.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/ripple/Ripple.jsx b/components/ripple/Ripple.jsx
index b869bcbe8..05dfd550a 100644
--- a/components/ripple/Ripple.jsx
+++ b/components/ripple/Ripple.jsx
@@ -14,7 +14,8 @@ const Ripple = (options = {}) => {
   const {
     centered: defaultCentered,
     className: defaultClassName,
-    spread: defaultSpread
+    spread: defaultSpread,
+    ...props
   } = {...defaults, ...options};
 
   return ComposedComponent => {
@@ -108,7 +109,7 @@ const Ripple = (options = {}) => {
           return (
             <ComposedComponent {...other} onMouseDown={this.handleMouseDown}>
               {children ? children : null}
-              <span data-react-toolbox='ripple' className={style.wrapper}>
+              <span data-react-toolbox='ripple' className={style.wrapper} {...props}>
                 <span ref='ripple' role='ripple' className={rippleClassName} style={rippleStyle} />
               </span>
             </ComposedComponent>

From a82595b6132aa726d72a8ae691962bf0a0251df6 Mon Sep 17 00:00:00 2001
From: Boris Mikhaylov <kaguxmail@gmail.com>
Date: Tue, 26 Jan 2016 14:58:51 +0100
Subject: [PATCH 0333/1024] added data-react-toolbox attribute to FontIcon

---
 components/font_icon/FontIcon.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/font_icon/FontIcon.jsx b/components/font_icon/FontIcon.jsx
index 501ffac59..b68dc7ebb 100644
--- a/components/font_icon/FontIcon.jsx
+++ b/components/font_icon/FontIcon.jsx
@@ -7,7 +7,7 @@ const FontIcon = ({ children, className, value, ...other}) => {
     className
   );
   return (
-    <span className={classes} {...other} >
+    <span className={classes} {...other} data-react-toolbox='font-icon'>
       {value}
       {children}
     </span>

From a2745c8c3900f08ea04d7bbad58d4f0392ba5976 Mon Sep 17 00:00:00 2001
From: Boris Mikhaylov <kaguxmail@gmail.com>
Date: Tue, 26 Jan 2016 14:59:57 +0100
Subject: [PATCH 0334/1024] list item can be customized by passing in children
 commponents

---
 components/list/ListItem.jsx        |  63 +++++++++-------
 components/list/ListItemActions.jsx |  23 ++++++
 components/list/ListItemContent.jsx |  45 ++++++++---
 components/list/ListItemLayout.jsx  |  56 ++++++++++++++
 components/list/ListItemText.jsx    |  25 ++++++
 components/list/_config.scss        |   4 +-
 components/list/index.js            |   2 +
 components/list/style.scss          | 113 +++++++++++++++++-----------
 spec/components/list.jsx            |  38 +++++++++-
 9 files changed, 283 insertions(+), 86 deletions(-)
 create mode 100644 components/list/ListItemActions.jsx
 create mode 100644 components/list/ListItemLayout.jsx
 create mode 100644 components/list/ListItemText.jsx

diff --git a/components/list/ListItem.jsx b/components/list/ListItem.jsx
index 897ad34f2..afaa4f009 100644
--- a/components/list/ListItem.jsx
+++ b/components/list/ListItem.jsx
@@ -1,30 +1,21 @@
 import React from 'react';
-import ClassNames from 'classnames';
-import FontIcon from '../font_icon';
 import ListItemContent from './ListItemContent';
+import ListItemLayout from './ListItemLayout';
 import Ripple from '../ripple';
 import style from './style';
 
 class ListItem extends React.Component {
   static propTypes = {
-    avatar: React.PropTypes.string,
-    caption: React.PropTypes.string.isRequired,
     children: React.PropTypes.any,
-    className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
-    leftIcon: React.PropTypes.any,
-    legend: React.PropTypes.string,
     onClick: React.PropTypes.func,
-    rightIcon: React.PropTypes.any,
     ripple: React.PropTypes.bool,
-    selectable: React.PropTypes.bool,
     to: React.PropTypes.string
   };
 
   static defaultProps = {
     disabled: false,
-    ripple: false,
-    selectable: false
+    ripple: false
   };
 
   handleClick = (event) => {
@@ -33,28 +24,41 @@ class ListItem extends React.Component {
     }
   };
 
-  renderContent () {
-    const className = ClassNames(style.item, {
-      [style.withLegend]: this.props.legend,
-      [style.disabled]: this.props.disabled,
-      [style.selectable]: this.props.selectable
-    }, this.props.className);
+  groupChildren () {
+    const children = {
+      leftActions: [],
+      rightActions: [],
+      ignored: []
+    };
 
-    return (
-      <span className={className}>
-        {this.props.leftIcon ? <FontIcon className={`${style.icon} ${style.left}`} value={this.props.leftIcon} /> : null}
-        {this.props.avatar ? <img className={style.avatar} src={this.props.avatar} /> : null}
-        <ListItemContent caption={this.props.caption} legend={this.props.legend} />
-        {this.props.rightIcon ? <FontIcon className={`${style.icon} ${style.right}`} value={this.props.rightIcon} /> : null}
-      </span>
-    );
+    React.Children.forEach(this.props.children, (child, i) => {
+      if (!React.isValidElement(child)) {
+        return;
+      }
+      if (child.props.listItemIgnore) {
+        children.ignored.push(child);
+        return;
+      }
+      if (child.type === ListItemContent) {
+        children.itemContent = child;
+        return;
+      }
+      const bucket = children.itemContent ? 'rightActions' : 'leftActions';
+      children[bucket].push({...child, key: i});
+    });
+
+    return children;
   }
 
   render () {
+    const {onMouseDown, to, onClick, ripple, ...other} = this.props;
+    const children = this.groupChildren();
+    const content = <ListItemLayout {...children} {...other}/>;
+
     return (
-      <li className={style.listItem} onClick={this.handleClick} onMouseDown={this.props.onMouseDown}>
-        {this.props.to ? <a href={this.props.to}>{this.renderContent()}</a> : this.renderContent()}
-        {this.props.children}
+      <li className={style.listItem} onClick={this.handleClick} onMouseDown={onMouseDown}>
+        {to ? <a href={this.props.to}>{content}</a> : content}
+        {children.ignored}
       </li>
     );
   }
@@ -62,6 +66,7 @@ class ListItem extends React.Component {
 
 export default Ripple({
   className: style.ripple,
-  centered: false
+  centered: false,
+  listItemIgnore: true
 })(ListItem);
 export {ListItem as RawListItem};
diff --git a/components/list/ListItemActions.jsx b/components/list/ListItemActions.jsx
new file mode 100644
index 000000000..48891ffa1
--- /dev/null
+++ b/components/list/ListItemActions.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import style from './style';
+
+const ListItemActions = ({type, children}) => {
+  const validChildren = React.Children.toArray(children).filter(c => (
+    React.isValidElement(c)
+  ));
+
+  return (
+    <span className={style[type]}>
+      {validChildren.map((child, i) => {
+        return <span className={style.itemChild} key={i}> {child} </span>;
+      })}
+    </span>
+  );
+};
+
+ListItemActions.propTypes = {
+  children: React.PropTypes.any,
+  type: React.PropTypes.oneOf(['left', 'right'])
+};
+
+export default ListItemActions;
diff --git a/components/list/ListItemContent.jsx b/components/list/ListItemContent.jsx
index 6fdd5cf5d..35db9b0f4 100644
--- a/components/list/ListItemContent.jsx
+++ b/components/list/ListItemContent.jsx
@@ -1,16 +1,41 @@
 import React from 'react';
 import style from './style';
+import ListItemText from './ListItemText';
 
-const ListItemContent = ({caption, legend}) => (
-  <span className={style.text}>
-    <span className={style.caption}>{caption}</span>
-    <span className={style.legend}>{legend}</span>
-  </span>
-);
+const types = ['auto', 'normal', 'large'];
 
-ListItemContent.propTypes = {
-  caption: React.PropTypes.string.isRequired,
-  legend: React.PropTypes.any
-};
+class ListItemContent extends React.Component {
+  static propTypes = {
+    caption: React.PropTypes.string,
+    children: React.PropTypes.any,
+    legend: React.PropTypes.string,
+    type: React.PropTypes.oneOf(types)
+  };
 
+  type () {
+    const {type, children, caption, legend} = this.props;
+
+    let count = React.Children.count(children);
+    [caption, legend].forEach(s => count += s ? 1 : 0);
+    const typeIndex = Math.min(count, types.length);
+
+    return type || types[typeIndex];
+  }
+
+  render () {
+    const {children, caption, legend} = this.props;
+
+    const className = `${style.itemContentRoot} ${style[this.type()]}`;
+
+    return (
+      <span className={className}>
+        <span className={style.itemContent}>
+          {caption && <ListItemText primary>{caption}</ListItemText>}
+          {legend && <ListItemText>{legend}</ListItemText>}
+          {children}
+        </span>
+      </span>
+    );
+  }
+}
 export default ListItemContent;
diff --git a/components/list/ListItemLayout.jsx b/components/list/ListItemLayout.jsx
new file mode 100644
index 000000000..db0438953
--- /dev/null
+++ b/components/list/ListItemLayout.jsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import ClassNames from 'classnames';
+import FontIcon from '../font_icon';
+import Avatar from '../avatar';
+import ListItemContent from './ListItemContent';
+import ListItemActions from './ListItemActions';
+import style from './style';
+
+const ListItemLayout = (props) => {
+  const className = ClassNames(style.item, {
+    [style.disabled]: props.disabled,
+    [style.selectable]: props.selectable
+  }, props.className);
+
+  const leftActions = [
+    props.leftIcon && <FontIcon value={props.leftIcon} key='leftIcon'/>,
+    props.avatar && <Avatar image={props.avatar} key='avatar'/>,
+    ...props.leftActions
+  ];
+  const rightActions = [
+    props.rightIcon && <FontIcon value={props.rightIcon} key='rightIcon'/>,
+    ...props.rightActions
+  ];
+  const content = props.itemContent || <ListItemContent caption={props.caption} legend={props.legend} />;
+
+  return (
+    <span className={className}>
+      <ListItemActions type='left'>{leftActions}</ListItemActions>
+      {content}
+      <ListItemActions type='right'>{rightActions}</ListItemActions>
+    </span>
+  );
+};
+
+ListItemLayout.propTypes = {
+  avatar: React.PropTypes.string,
+  caption: React.PropTypes.string,
+  children: React.PropTypes.any,
+  className: React.PropTypes.string,
+  disabled: React.PropTypes.bool,
+  itemContent: React.PropTypes.element,
+  leftActions: React.PropTypes.array,
+  leftIcon: React.PropTypes.any,
+  legend: React.PropTypes.string,
+  rightActions: React.PropTypes.array,
+  rightIcon: React.PropTypes.any,
+  selectable: React.PropTypes.bool,
+  to: React.PropTypes.string
+};
+
+ListItemLayout.defaultProps = {
+  disabled: false,
+  selectable: false
+};
+
+export default ListItemLayout;
diff --git a/components/list/ListItemText.jsx b/components/list/ListItemText.jsx
new file mode 100644
index 000000000..6e240a574
--- /dev/null
+++ b/components/list/ListItemText.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import ClassNames from 'classnames';
+import style from './style';
+
+const ListItemText = ({className, primary, children, ...other}) => {
+  const _className = ClassNames(style.itemText, {[style.primary]: primary}, className);
+
+  return (
+    <span className={_className} {...other}>
+      {children}
+    </span>
+  );
+};
+
+ListItemText.propTypes = {
+  children: React.PropTypes.any,
+  className: React.PropTypes.string,
+  primary: React.PropTypes.bool
+};
+
+ListItemText.defaultProps = {
+  primary: false
+};
+
+export default ListItemText;
diff --git a/components/list/_config.scss b/components/list/_config.scss
index 49c57c8ff..bb7604146 100644
--- a/components/list/_config.scss
+++ b/components/list/_config.scss
@@ -11,6 +11,8 @@ $list-item-hover-color: $palette-grey-200;
 $list-item-legend-margin-top: .3 * $unit;
 $list-item-icon-font-size: 2.4 * $unit;
 $list-item-icon-size: 1.8 * $unit;
-$list-item-right-icon-margin: $list-content-left-spacing - $list-horizontal-padding - $list-item-icon-size;
+$list-item-right-icon-margin: $list-content-left-spacing - 2 * $list-horizontal-padding - $list-item-icon-size;
+$list-item-right-checkbox-margin: $list-item-right-icon-margin + $list-horizontal-padding;
 $list-item-avatar-height: 4 * $unit;
 $list-item-avatar-margin: .8 * $unit;
+$list-item-child-margin: .8 * $unit;
diff --git a/components/list/index.js b/components/list/index.js
index 371643cf8..38d0ddafb 100644
--- a/components/list/index.js
+++ b/components/list/index.js
@@ -3,3 +3,5 @@ export ListItem from './ListItem';
 export ListDivider from './ListDivider';
 export ListCheckbox from './ListCheckbox';
 export ListSubHeader from './ListSubHeader';
+export ListItemText from './ListItemText';
+export ListItemContent from './ListItemContent';
diff --git a/components/list/style.scss b/components/list/style.scss
index bef91ca8e..b1c563edb 100644
--- a/components/list/style.scss
+++ b/components/list/style.scss
@@ -56,9 +56,6 @@
     cursor: pointer;
     background-color: $list-item-hover-color;
   }
-  &.withLegend {
-    height: $list-item-min-height-legend;
-  }
   &.disabled {
     pointer-events: none;
     &:not(.checkboxItem) {
@@ -70,15 +67,74 @@
   }
 }
 
+.left {
+  [data-react-toolbox='font-icon'] {
+    width: $list-item-icon-size;
+  }
+  & :last-child {
+    > [data-react-toolbox='font-icon'] {
+      margin-right: $list-item-right-icon-margin;
+    }
+  }
+}
+
+.right {
+  > :last-child  {
+    margin-right: 0;
+  }
+
+  > :first-child {
+    margin-left: $list-horizontal-padding;
+  }
+}
+
+.left, .right {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  vertical-align: middle;
+}
+
+.itemChild {
+  display: flex;
+  margin: $list-item-child-margin $list-horizontal-padding $list-item-child-margin 0;
+
+  > * {
+    padding: 0;
+  }
+
+  > [data-react-toolbox='font-icon'] {
+    font-size: $list-item-icon-font-size;
+    color: $color-text-secondary;
+  }
+}
+
+.itemContentRoot {
+  display: block;
+  flex-grow: 1;
+  &.large {
+    height: $list-item-min-height-legend;
+
+    .itemContent {
+      display: block;
+      position: relative;
+      top: 50%;
+      transform: translateY(-50%)
+    }
+  }
+}
+
+
 .checkbox {
   display: flex;
   width: 100%;
+  height: 100%;
   min-height: $list-item-min-height;
   align-items: center;
   margin: 0;
   cursor: pointer;
   > [data-role='checkbox'] {
-    margin-right: $list-item-right-icon-margin;
+    margin-right: $list-item-right-checkbox-margin;
   }
   > [data-role='label'] {
     padding-left: 0;
@@ -89,51 +145,18 @@
   color: $color-text-secondary;
 }
 
-.text {
-  flex-grow: 1;
-}
-
-.caption {
+.itemText {
   display: block;
-  font-size: $font-size-normal;
-  color: $color-text;
-}
 
-.legend {
-  display: block;
-  padding-top: $list-item-legend-margin-top;
-  font-size: $font-size-small;
-  color: $color-text-secondary;
-  white-space: normal;
-}
-
-.avatar {
-  display: flex;
-  width: $list-item-avatar-height;
-  height: $list-item-avatar-height;
-  flex: 0 0 auto;
-  margin: $list-item-avatar-margin $list-horizontal-padding $list-item-avatar-margin 0;
-  overflow: hidden;
-  border-radius: 50%;
-}
-
-.right, .left {
-  display: flex;
-  align-items: center;
-  vertical-align: middle;
-  &.icon {
-    font-size: $list-item-icon-font-size;
+  &:not(.primary) {
+    font-size: $font-size-small;
     color: $color-text-secondary;
+    padding-top: $list-item-legend-margin-top;
+    white-space: normal;
   }
-}
 
-.right {
-  margin-left: $list-horizontal-padding;
-}
-
-.left {
-  &.icon {
-    width: $list-item-icon-size;
-    margin-right: $list-item-right-icon-margin;
+  &.primary {
+    font-size: $font-size-normal;
+    color: $color-text;
   }
 }
diff --git a/spec/components/list.jsx b/spec/components/list.jsx
index eebe79026..290b6313d 100644
--- a/spec/components/list.jsx
+++ b/spec/components/list.jsx
@@ -1,5 +1,8 @@
 import React from 'react';
-import { ListCheckbox, ListSubHeader, List, ListItem, ListDivider } from '../../components/list';
+import { ListCheckbox, ListSubHeader, List, ListItem, ListDivider, ListItemText, ListItemContent } from '../../components/list';
+import Avatar from '../../components/avatar';
+import FontIcon from '../../components/font_icon';
+import {Button} from '../../components/button';
 
 const listStyle = {
   border: '1px solid #EEE',
@@ -138,6 +141,39 @@ class ListTest extends React.Component {
             <ListItem caption='Other people' />
           </List>
         </div>
+
+        <h5> List with custom components </h5>
+        <p> Using custom components in list item </p>
+        <div style={listStyle}>
+          <List>
+            <ListItem leftIcon='send' rightIcon='done' caption='Reference item'/>
+            <ListItem rightIcon='done' caption='Item with custom left icons'>
+              <FontIcon value='send' />
+              <Avatar image='https://pbs.twimg.com/profile_images/459485216499720192/ufS4YGOY_400x400.png'/>
+            </ListItem>
+            <ListItem leftIcon='send'>
+              <ListItemContent caption='custom right icons' legend='ListItemContent acts as a divider'/>
+              <FontIcon value='done' />
+              <FontIcon value='undo' />
+            </ListItem>
+            <ListItem leftIcon='mail' rightIcon='create'>
+              <ListItemContent>
+                <ListItemText primary> Custom Caption </ListItemText>
+              </ListItemContent>
+            </ListItem>
+            <ListItem leftIcon='save' rightIcon='delete'>
+              <ListItemContent>
+                <ListItemText primary onClick={() => {console.log('clicked caption');}}>
+                  Custom caption with events
+                </ListItemText>
+                <ListItemText> Custom legend with correct height </ListItemText>
+              </ListItemContent>
+            </ListItem>
+            <ListItem caption='Item with a button'>
+              <Button icon='save' label='save'/>
+            </ListItem>
+          </List>
+        </div>
       </section>
     );
   }

From 14cbf9c877452c497713c9300c9cedb29368da9b Mon Sep 17 00:00:00 2001
From: Boris Mikhaylov <kaguxmail@gmail.com>
Date: Wed, 27 Jan 2016 11:21:03 +0100
Subject: [PATCH 0335/1024] if list item action defined onClick we stop click
 and mouse down propagation

---
 components/list/ListItemAction.jsx  | 21 +++++++++++++++++++++
 components/list/ListItemActions.jsx |  5 ++---
 components/list/style.scss          |  2 +-
 components/ripple/Ripple.jsx        |  2 ++
 spec/components/list.jsx            | 12 ++++++++++--
 5 files changed, 36 insertions(+), 6 deletions(-)
 create mode 100644 components/list/ListItemAction.jsx

diff --git a/components/list/ListItemAction.jsx b/components/list/ListItemAction.jsx
new file mode 100644
index 000000000..82388b26f
--- /dev/null
+++ b/components/list/ListItemAction.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import style from './style';
+
+const ListItemAction = ({action}) => {
+  const {onClick, onMouseDown} = action.props;
+  const stopRipple = onClick && !onMouseDown;
+  const stop = e => e.stopPropagation();
+  return (
+    <span className={style.itemAction} onMouseDown={stopRipple && stop} onClick={onClick && stop}>
+      {action}
+    </span>
+  );
+};
+
+ListItemAction.propTypes = {
+};
+
+ListItemAction.defaultProps = {
+};
+
+export default ListItemAction;
diff --git a/components/list/ListItemActions.jsx b/components/list/ListItemActions.jsx
index 48891ffa1..d6df1aff8 100644
--- a/components/list/ListItemActions.jsx
+++ b/components/list/ListItemActions.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import style from './style';
+import ListItemAction from './ListItemAction';
 
 const ListItemActions = ({type, children}) => {
   const validChildren = React.Children.toArray(children).filter(c => (
@@ -8,9 +9,7 @@ const ListItemActions = ({type, children}) => {
 
   return (
     <span className={style[type]}>
-      {validChildren.map((child, i) => {
-        return <span className={style.itemChild} key={i}> {child} </span>;
-      })}
+      {validChildren.map((action, i) => <ListItemAction key={i} action={action} />)}
     </span>
   );
 };
diff --git a/components/list/style.scss b/components/list/style.scss
index b1c563edb..7f03ebeb6 100644
--- a/components/list/style.scss
+++ b/components/list/style.scss
@@ -95,7 +95,7 @@
   vertical-align: middle;
 }
 
-.itemChild {
+.itemAction {
   display: flex;
   margin: $list-item-child-margin $list-horizontal-padding $list-item-child-margin 0;
 
diff --git a/components/ripple/Ripple.jsx b/components/ripple/Ripple.jsx
index 05dfd550a..1bc814e59 100644
--- a/components/ripple/Ripple.jsx
+++ b/components/ripple/Ripple.jsx
@@ -77,6 +77,7 @@ const Ripple = (options = {}) => {
       }
 
       handleMouseDown = (event) => {
+        console.log('ripple');
         if (!this.props.disabled) this.start(event);
         if (this.props.onMouseDown) this.props.onMouseDown(event);
       };
@@ -104,6 +105,7 @@ const Ripple = (options = {}) => {
           const rippleStyle = prefixer({
               transform: `translate3d(${-width / 2 + left}px, ${-width / 2 + top}px, 0) scale(${scale})`
             }, {width, height: width});
+          // const shouldComponentRipplegcc
 
 
           return (
diff --git a/spec/components/list.jsx b/spec/components/list.jsx
index 290b6313d..c77b3470f 100644
--- a/spec/components/list.jsx
+++ b/spec/components/list.jsx
@@ -145,7 +145,7 @@ class ListTest extends React.Component {
         <h5> List with custom components </h5>
         <p> Using custom components in list item </p>
         <div style={listStyle}>
-          <List>
+          <List ripple selectable>
             <ListItem leftIcon='send' rightIcon='done' caption='Reference item'/>
             <ListItem rightIcon='done' caption='Item with custom left icons'>
               <FontIcon value='send' />
@@ -170,7 +170,15 @@ class ListTest extends React.Component {
               </ListItemContent>
             </ListItem>
             <ListItem caption='Item with a button'>
-              <Button icon='save' label='save'/>
+              <Button icon='save' label='save' onMouseDown={e => e.stopPropagation()}/>
+            </ListItem>
+            <ListItem caption='Item with overlayed click events' onClick={() => console.log('clicked row')}>
+              <FontIcon value='send' onClick={() => console.log('clicked icon')}/>
+              <Avatar
+                image='https://pbs.twimg.com/profile_images/459485216499720192/ufS4YGOY_400x400.png'
+                onMouseDown={() => console.log('avatar mouse down, should see ripple')}
+                onClick={() => console.log('clicked avatar')}
+              />
             </ListItem>
           </List>
         </div>

From 32ff655fd3fe93e199bb816c6dc16a9495836419 Mon Sep 17 00:00:00 2001
From: Boris Mikhaylov <kaguxmail@gmail.com>
Date: Wed, 27 Jan 2016 11:22:38 +0100
Subject: [PATCH 0336/1024] removed commented out code

---
 components/ripple/Ripple.jsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/components/ripple/Ripple.jsx b/components/ripple/Ripple.jsx
index 1bc814e59..5c98ba0ce 100644
--- a/components/ripple/Ripple.jsx
+++ b/components/ripple/Ripple.jsx
@@ -105,8 +105,6 @@ const Ripple = (options = {}) => {
           const rippleStyle = prefixer({
               transform: `translate3d(${-width / 2 + left}px, ${-width / 2 + top}px, 0) scale(${scale})`
             }, {width, height: width});
-          // const shouldComponentRipplegcc
-
 
           return (
             <ComposedComponent {...other} onMouseDown={this.handleMouseDown}>

From ccd4bbb0a7efd0816cb2bda3947f6fbb8d3fe56f Mon Sep 17 00:00:00 2001
From: Boris Mikhaylov <kaguxmail@gmail.com>
Date: Wed, 27 Jan 2016 11:31:35 +0100
Subject: [PATCH 0337/1024] updated list item spec with button

---
 spec/components/list.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spec/components/list.jsx b/spec/components/list.jsx
index c77b3470f..9f42ea392 100644
--- a/spec/components/list.jsx
+++ b/spec/components/list.jsx
@@ -170,7 +170,7 @@ class ListTest extends React.Component {
               </ListItemContent>
             </ListItem>
             <ListItem caption='Item with a button'>
-              <Button icon='save' label='save' onMouseDown={e => e.stopPropagation()}/>
+              <Button icon='save' label='save' onClick={() => console.log('clicked button')}/>
             </ListItem>
             <ListItem caption='Item with overlayed click events' onClick={() => console.log('clicked row')}>
               <FontIcon value='send' onClick={() => console.log('clicked icon')}/>

From ac6834f1e987312608db1432017f1913f725872f Mon Sep 17 00:00:00 2001
From: Robert Parker <robert@flavorus.com>
Date: Wed, 3 Feb 2016 16:31:26 -0800
Subject: [PATCH 0338/1024] Update TS definition file to work properly with
 TypeScript >= 1.8, README blurb

---
 README.md          |   2 +
 react-toolbox.d.ts | 148 +++++++++++++++++++++++++--------------------
 2 files changed, 83 insertions(+), 67 deletions(-)

diff --git a/README.md b/README.md
index c005c7cf1..f6393d219 100644
--- a/README.md
+++ b/README.md
@@ -92,6 +92,8 @@ If you browse the resulting markup you will see *data attributes* like `data-rol
 
 A TypeScript definition file `react-toolbox.d.ts` is available. It is referenced in `package.json` and should be picked up by the TypeScript compiler when importing from the npm package.
 
+Note that to comply with the typings requirement, a triple-slash reference to `react.d.ts` is *NOT included*. You will need to reference [react.d.ts](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/react/react.d.ts) somewhere in your project.
+
 ## Authors and Contributors
 
 The project is being initially developed and maintained by [Javier Velasco](http://javivelasco.com) and [Javier Jiménez](http://soyjavi.com) and the [contribution scene](https://github.com/react-toolbox/react-toolbox/graphs/contributors) is just getting warm. We want to create reference components so any contribution is very welcome.
diff --git a/react-toolbox.d.ts b/react-toolbox.d.ts
index 76185f343..c759808e3 100644
--- a/react-toolbox.d.ts
+++ b/react-toolbox.d.ts
@@ -1,7 +1,11 @@
-// Type definitions for react-toolbox 0.14.0
+// Type definitions for react-toolbox 0.14.1
 // Project: http://react-toolbox.com/
 // Definitions by: @xogeny (Michael M. Tiller), @hsrobflavorus (Robert Parker)
 /*  CHANGES
+    * 02/03/2016:
+        * Fixed for TypeScript 1.8.0 stricter var declaration requirements (move `declare var ...` inside each individual module).
+        * Removed triple-slash reference to React to fix npm install compatibility (you'll need to make sure you're referencing react.d.ts somewhere in your project!).
+        * Hopefully fixed the default exports where applicable
     * 01/13/2016: Minor changes, add a few missing props, add IconButton to react-toolbox/lib/button
     * 12/21/2015: Fix "import * as Input from 'react-toolbox/lib/input'" style imports, which now correctly import only the necessary component(s).
         * NOTE that you must use "import * as {Component Name}" not just "import {Component Name}" for this to work.
@@ -17,7 +21,6 @@
     MISSING COMPONENTS (Contributions welcome)
     * Ripple HOC
 */
-///<reference path='../react/react.d.ts' />
 
 declare namespace __RT {
     import React = __React;
@@ -388,7 +391,7 @@ declare namespace __RT {
     export class Checkbox extends React.Component<CheckboxProps, {}> {
         render(): React.DOMElement<any>;
     }
-    export interface DatePickerProps extends Changeable<Date> {
+    export interface DatePickerProps extends Props, Changeable<Date> {
         /**
          * Date object with the maximum selectable date.
          */
@@ -503,10 +506,18 @@ declare namespace __RT {
          * Callback function that is fired when components is focused.
          */
         onFocus?: Function,
+        /**
+         * Callback function that is fired when a key is pressed down.
+         */
+        onKeyDown?: Function,
         /**
          * Callback function that is fired when a key is pressed.
          */
         onKeyPress?: Function,
+        /**
+         * Callback function that is fired when a key is released.
+         */
+        onKeyUp?: Function,
         /**
          * If true, the html input has a required value.
          * @default false
@@ -993,20 +1004,16 @@ declare namespace __RT {
     class Tab extends React.Component<TabProps, {}> {
         render(): React.DOMElement<any>;
     }
-    interface TimePickerProps extends Props {
+    interface TimePickerProps extends Props, Changeable<Date> {
         /**
          * Format to display the clock. It can be 24hr or ampm.
          * @default 24hr
          */
         format?: string,
-        /**
-         * Callback called when the picker value is changed.
-         */
-        onChange?: Function,
         /**
          * Datetime object with currrently selected time
          */
-        value: Date,
+        value?: Date,
     }
     class TimePicker extends React.Component<TimePickerProps, {}> {
         render(): React.DOMElement<any>;
@@ -1030,32 +1037,35 @@ declare namespace __RT {
         new (props?: P, context?: any): TooltipComponent<P, any>;
     }
 
-    function Tooltip<P> (componentClass: React.ComponentClass<P>): TooltipComponentClass<P>;
+    function Tooltip<P>(componentClass: React.ComponentClass<P>): TooltipComponentClass<P>;
 }
 
 declare var AppBar: typeof __RT.AppBar;
 declare module 'react-toolbox/lib/app_bar' {
-    export = AppBar;
+    export default AppBar;
 }
 declare var Autocomplete: typeof __RT.Autocomplete;
 declare module 'react-toolbox/lib/autocomplete' {
-    export = Autocomplete;
+    export default Autocomplete;
 }
 declare var Avatar: typeof __RT.Avatar;
 declare module 'react-toolbox/lib/avatar' {
-    export = Avatar;
+    export default Avatar;
 }
-declare var Button: typeof __RT.Button;
-declare var IconButton: typeof __RT.IconButton;
+
 declare module 'react-toolbox/lib/button' {
+    var Button: typeof __RT.Button;
+    var IconButton: typeof __RT.IconButton;
     export { Button, IconButton };
 }
-declare var Card: typeof __RT.Card;
-declare var CardActions: typeof __RT.CardActions;
-declare var CardMedia: typeof __RT.CardMedia;
-declare var CardText: typeof __RT.CardText;
-declare var CardTitle: typeof __RT.CardTitle;
+
 declare module 'react-toolbox/lib/card' {
+    var Card: typeof __RT.Card;
+    var CardActions: typeof __RT.CardActions;
+    var CardMedia: typeof __RT.CardMedia;
+    var CardText: typeof __RT.CardText;
+    var CardTitle: typeof __RT.CardTitle;
+
     export {
     Card,
     CardActions,
@@ -1066,42 +1076,43 @@ declare module 'react-toolbox/lib/card' {
 }
 declare var Checkbox: typeof __RT.Checkbox;
 declare module 'react-toolbox/lib/checkbox' {
-    export = Checkbox;
+    export default Checkbox;
 }
 declare var DatePicker: typeof __RT.DatePicker;
 declare module 'react-toolbox/lib/date_picker' {
-    export = DatePicker;
+    export default DatePicker;
 }
 declare var Dialog: typeof __RT.Dialog;
 declare module 'react-toolbox/lib/dialog' {
-    export = Dialog;
+    export default Dialog;
 }
 declare var Drawer: typeof __RT.Drawer;
 declare module 'react-toolbox/lib/drawer' {
-    export = Drawer;
+    export default Drawer;
 }
 declare var Dropdown: typeof __RT.Dropdown;
 declare module 'react-toolbox/lib/dropdown' {
-    export = Dropdown;
+    export default Dropdown;
 }
 declare var FontIcon: typeof __RT.FontIcon;
 declare module 'react-toolbox/lib/font_icon' {
-    export = FontIcon;
+    export default FontIcon;
 }
 declare var Input: typeof __RT.Input;
 declare module 'react-toolbox/lib/input' {
-    export = Input;
+    export default Input;
 }
 declare var Link: typeof __RT.Link;
 declare module 'react-toolbox/lib/link' {
-    export = Link;
+    export default Link;
 }
-declare var List: typeof __RT.List;
-declare var ListItem: typeof __RT.ListItem;
-declare var ListCheckbox: typeof __RT.ListCheckbox;
-declare var ListSubHeader: typeof __RT.ListSubHeader;
-declare var ListDivider: typeof __RT.ListDivider;
+
 declare module 'react-toolbox/lib/list' {
+    var List: typeof __RT.List;
+    var ListItem: typeof __RT.ListItem;
+    var ListCheckbox: typeof __RT.ListCheckbox;
+    var ListSubHeader: typeof __RT.ListSubHeader;
+    var ListDivider: typeof __RT.ListDivider;
     export {
     List,
     ListItem,
@@ -1110,11 +1121,12 @@ declare module 'react-toolbox/lib/list' {
     ListDivider
     }
 }
-declare var Menu: typeof __RT.Menu;
-declare var IconMenu: typeof __RT.IconMenu;
-declare var MenuItem: typeof __RT.MenuItem;
-declare var MenuDivider: typeof __RT.MenuDivider;
+
 declare module 'react-toolbox/lib/menu' {
+    var Menu: typeof __RT.Menu;
+    var IconMenu: typeof __RT.IconMenu;
+    var MenuItem: typeof __RT.MenuItem;
+    var MenuDivider: typeof __RT.MenuDivider;
     export {
     Menu,
     IconMenu,
@@ -1124,15 +1136,16 @@ declare module 'react-toolbox/lib/menu' {
 }
 declare var Navigation: typeof __RT.Navigation;
 declare module 'react-toolbox/lib/navigation' {
-    export = Navigation;
+    export default Navigation;
 }
 declare var ProgressBar: typeof __RT.ProgressBar;
 declare module 'react-toolbox/lib/progress_bar' {
-    export = ProgressBar;
+    export default ProgressBar;
 }
-declare var RadioGroup: typeof __RT.RadioGroup;
-declare var RadioButton: typeof __RT.RadioButton;
+
 declare module 'react-toolbox/lib/radio' {
+    var RadioGroup: typeof __RT.RadioGroup;
+    var RadioButton: typeof __RT.RadioButton;
     export {
     RadioGroup,
     RadioButton
@@ -1140,58 +1153,59 @@ declare module 'react-toolbox/lib/radio' {
 }
 declare var Slider: typeof __RT.Slider;
 declare module 'react-toolbox/lib/slider' {
-    export = Slider;
+    export default Slider;
 }
 declare var Snackbar: typeof __RT.Snackbar;
 declare module 'react-toolbox/lib/snackbar' {
-    export = Snackbar;
+    export default Snackbar;
 }
 declare var Switch: typeof __RT.Switch;
 declare module 'react-toolbox/lib/switch' {
-    export = Switch;
+    export default Switch;
 }
 declare var Table: typeof __RT.Table;
 declare module 'react-toolbox/lib/table' {
-    export = Table;
+    export default Table;
 }
-declare var Tab: typeof __RT.Tab;
-declare var Tabs: typeof __RT.Tabs;
+
 declare module 'react-toolbox/lib/tabs' {
+    var Tab: typeof __RT.Tab;
+    var Tabs: typeof __RT.Tabs;
     export { Tab, Tabs }
 }
 declare var TimePicker: typeof __RT.TimePicker;
 declare module 'react-toolbox/lib/time_picker' {
-    export = TimePicker;
+    export default TimePicker;
 }
 declare var Tooltip: typeof __RT.Tooltip;
 declare module 'react-toolbox/lib/tooltip' {
-    export = Tooltip;
+    export default Tooltip;
 }
 declare module 'react-toolbox' {
-    import * as AppBar from 'react-toolbox/lib/app_bar';
-    import * as Autocomplete from 'react-toolbox/lib/autocomplete';
-    import * as Avatar from 'react-toolbox/lib/avatar';
+    import AppBar from 'react-toolbox/lib/app_bar';
+    import Autocomplete from 'react-toolbox/lib/autocomplete';
+    import Avatar from 'react-toolbox/lib/avatar';
     import { Button }from 'react-toolbox/lib/button';
     import { Card, CardActions, CardMedia, CardText, CardTitle} from 'react-toolbox/lib/card';
-    import * as Checkbox from 'react-toolbox/lib/checkbox';
-    import * as DatePicker from 'react-toolbox/lib/date_picker';
-    import * as Dialog from 'react-toolbox/lib/dialog';
-    import * as Drawer from 'react-toolbox/lib/drawer';
-    import * as Dropdown from 'react-toolbox/lib/dropdown';
-    import * as FontIcon from 'react-toolbox/lib/font_icon';
-    import * as Input from 'react-toolbox/lib/input';
-    import * as Link from 'react-toolbox/lib/link';
+    import Checkbox from 'react-toolbox/lib/checkbox';
+    import DatePicker from 'react-toolbox/lib/date_picker';
+    import Dialog from 'react-toolbox/lib/dialog';
+    import Drawer from 'react-toolbox/lib/drawer';
+    import Dropdown from 'react-toolbox/lib/dropdown';
+    import FontIcon from 'react-toolbox/lib/font_icon';
+    import Input from 'react-toolbox/lib/input';
+    import Link from 'react-toolbox/lib/link';
     import {List, ListItem, ListCheckbox, ListSubHeader, ListDivider} from 'react-toolbox/lib/list';
     import {Menu, IconMenu, MenuItem, MenuDivider} from 'react-toolbox/lib/menu';
-    import * as Navigation from 'react-toolbox/lib/navigation';
-    import * as ProgressBar from 'react-toolbox/lib/progress_bar';
+    import Navigation from 'react-toolbox/lib/navigation';
+    import ProgressBar from 'react-toolbox/lib/progress_bar';
     import {RadioGroup, RadioButton} from 'react-toolbox/lib/radio';
-    import * as Slider from 'react-toolbox/lib/slider';
-    import * as Snackbar from 'react-toolbox/lib/snackbar';
-    import * as Switch from 'react-toolbox/lib/switch';
+    import Slider from 'react-toolbox/lib/slider';
+    import Snackbar from 'react-toolbox/lib/snackbar';
+    import Switch from 'react-toolbox/lib/switch';
     import { Tab, Tabs } from 'react-toolbox/lib/tabs';
-    import * as TimePicker from 'react-toolbox/lib/time_picker';
-    import * as Tooltip from 'react-toolbox/lib/tooltip';
+    import TimePicker from 'react-toolbox/lib/time_picker';
+    import Tooltip from 'react-toolbox/lib/tooltip';
 
     export {
     AppBar,

From c0e0b5679c3f934b7d858c347db67768112f0ae3 Mon Sep 17 00:00:00 2001
From: Fred Guest <fredguest@mac.com>
Date: Sat, 6 Feb 2016 00:35:08 -0800
Subject: [PATCH 0339/1024] Use consistent data attributes

data-toolbox should be data-react-toolbox to be consistent with the rest of the components.
---
 components/date_picker/DatePicker.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/date_picker/DatePicker.jsx b/components/date_picker/DatePicker.jsx
index 8243a02cc..2fab6b3d9 100644
--- a/components/date_picker/DatePicker.jsx
+++ b/components/date_picker/DatePicker.jsx
@@ -39,7 +39,7 @@ class DatePicker extends React.Component {
     const date = value ? `${value.getDate()} ${time.getFullMonth(value)} ${value.getFullYear()}` : null;
 
     return (
-      <div data-toolbox='date-picker'>
+      <div data-react-toolbox='date-picker'>
         <Input
           className={style.input}
           error={this.props.error}

From 7ad91897b2bf0b0b75cdc56bf0925905c4ad48b9 Mon Sep 17 00:00:00 2001
From: Anton Huck <antonhuck@gmail.com>
Date: Sun, 7 Feb 2016 19:51:04 +0100
Subject: [PATCH 0340/1024] allow app-bar height override

---
 components/app_bar/_config.scss | 2 +-
 spec/style.scss                 | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/app_bar/_config.scss b/components/app_bar/_config.scss
index cf79769f1..b787db5e3 100644
--- a/components/app_bar/_config.scss
+++ b/components/app_bar/_config.scss
@@ -1,6 +1,6 @@
 $appbar-color: $color-primary-dark !default;
 $appbar-contrast: $color-primary-contrast !default;
 $appbar-title-total-distance: 8 * $unit;
-$appbar-height: 6.4 * $unit;
+$appbar-height: 6.4 * $unit !default;
 $appbar-h-padding: 2.4 * $unit;
 $appbar-title-distance: $appbar-title-total-distance - $appbar-h-padding;
diff --git a/spec/style.scss b/spec/style.scss
index 70c1ad433..558ee6502 100644
--- a/spec/style.scss
+++ b/spec/style.scss
@@ -6,7 +6,7 @@ $offset: 1.8 * $unit;
 
 .app {
   @include no-webkit-scrollbar;
-  padding: (8.2 * $unit) $offset $offset;
+  padding: ($appbar-height + 2) $offset $offset;
   background-color: #f5f5f5;
   > section, > div > section {
     padding: $offset;

From cacc7d9cab8cd4d5066f87ed50e88b0d2440d944 Mon Sep 17 00:00:00 2001
From: Fred Guest <fred.guest@formsdirect.net>
Date: Mon, 8 Feb 2016 10:32:37 -0800
Subject: [PATCH 0341/1024] update Card.jsx

---
 components/card/Card.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/card/Card.jsx b/components/card/Card.jsx
index fcfad60e0..9dd790599 100644
--- a/components/card/Card.jsx
+++ b/components/card/Card.jsx
@@ -8,7 +8,7 @@ const Card = ({children, className, raised, ...other}) => {
   }, className);
 
   return (
-    <div className={classes} {...other}>
+    <div data-react-toolbox='card' className={classes} {...other}>
       {children}
     </div>
   );

From b898d7f85458c7045b59b7268cd01a31ba41cd55 Mon Sep 17 00:00:00 2001
From: Fred Guest <fred.guest@formsdirect.net>
Date: Mon, 8 Feb 2016 10:35:29 -0800
Subject: [PATCH 0342/1024] update List.jsx

---
 components/list/List.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/list/List.jsx b/components/list/List.jsx
index bc3936a12..43bc560f8 100644
--- a/components/list/List.jsx
+++ b/components/list/List.jsx
@@ -33,7 +33,7 @@ class List extends React.Component {
     let className = style.list;
     if (this.props.className) className += ` ${this.props.className}`;
     return (
-      <ul className={className}>
+      <ul data-react-toolbox='list' className={className}>
         {this.renderItems()}
       </ul>
     );

From 542528d43597cfe35c2ff7763645d48be69ad5b6 Mon Sep 17 00:00:00 2001
From: Fred Guest <fred.guest@formsdirect.net>
Date: Mon, 8 Feb 2016 10:36:42 -0800
Subject: [PATCH 0343/1024] update Menu.jsx

---
 components/menu/Menu.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/menu/Menu.jsx b/components/menu/Menu.jsx
index 8a9f07d96..cdcd95320 100644
--- a/components/menu/Menu.jsx
+++ b/components/menu/Menu.jsx
@@ -158,7 +158,7 @@ class Menu extends React.Component {
     }, this.props.className);
 
     return (
-      <div className={className} style={this.getRootStyle()}>
+      <div data-react-toolbox='menu' className={className} style={this.getRootStyle()}>
         {this.props.outline ? <div className={style.outline} style={outlineStyle}></div> : null}
         <ul ref='menu' className={style.menu} style={this.getMenuStyle()}>
           {this.renderItems()}

From 692ed24d6b655a740ee7c87d1d67a13438bc4eb6 Mon Sep 17 00:00:00 2001
From: Fred Guest <fred.guest@formsdirect.net>
Date: Mon, 8 Feb 2016 10:42:00 -0800
Subject: [PATCH 0344/1024] update RadioGroup.jsx

---
 components/radio/RadioGroup.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/radio/RadioGroup.jsx b/components/radio/RadioGroup.jsx
index 9dae4c2e6..48dee7c3f 100644
--- a/components/radio/RadioGroup.jsx
+++ b/components/radio/RadioGroup.jsx
@@ -38,7 +38,7 @@ class RadioGroup extends React.Component {
 
   render () {
     return (
-      <div className={this.props.className}>
+      <div data-react-toolbox='radio-group' className={this.props.className}>
         {this.renderRadioButtons()}
       </div>
     );

From dba62cf913f842f19bffef8cc332aeac29c07361 Mon Sep 17 00:00:00 2001
From: Fred Guest <fred.guest@formsdirect.net>
Date: Mon, 8 Feb 2016 10:43:14 -0800
Subject: [PATCH 0345/1024] update RadioButton.jsx

---
 components/radio/RadioButton.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/radio/RadioButton.jsx b/components/radio/RadioButton.jsx
index 80bfb5929..31bc6ad7d 100644
--- a/components/radio/RadioButton.jsx
+++ b/components/radio/RadioButton.jsx
@@ -41,7 +41,7 @@ class RadioButton extends React.Component {
     const { onChange, ...others } = this.props;
 
     return (
-      <label className={className}>
+      <label data-react-toolbox='radio-button' className={className}>
         <input
           {...others}
           className={style.input}

From 413ddb7ca8cc992c61857061f5b71527e373d088 Mon Sep 17 00:00:00 2001
From: Fred Guest <fred.guest@formsdirect.net>
Date: Mon, 8 Feb 2016 10:45:47 -0800
Subject: [PATCH 0346/1024] update Switch.jsx

---
 components/switch/Switch.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/switch/Switch.jsx b/components/switch/Switch.jsx
index dd989605f..59e63a5d1 100644
--- a/components/switch/Switch.jsx
+++ b/components/switch/Switch.jsx
@@ -42,7 +42,7 @@ class Switch extends React.Component {
     if (this.props.className) className += ` ${this.props.className}`;
 
     return (
-      <label data-react-toolbox='checkbox' className={className}>
+      <label data-react-toolbox='switch' className={className}>
         <input
           {...others}
           checked={this.props.checked}
@@ -52,7 +52,7 @@ class Switch extends React.Component {
           ref='input'
           type='checkbox'
         />
-        <span role='switch' className={switchClassName}>
+        <span className={switchClassName}>
           <Thumb disabled={this.props.disabled} />
         </span>
         {this.props.label ? <span className={style.text}>{this.props.label}</span> : null}

From 99b4fcac23477942e7365f3f510188eb6b743f10 Mon Sep 17 00:00:00 2001
From: Fred Guest <fred.guest@formsdirect.net>
Date: Mon, 8 Feb 2016 10:48:31 -0800
Subject: [PATCH 0347/1024] update Tabs.jsx

---
 components/tabs/Tabs.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/tabs/Tabs.jsx b/components/tabs/Tabs.jsx
index f066c711b..2cc187e8f 100644
--- a/components/tabs/Tabs.jsx
+++ b/components/tabs/Tabs.jsx
@@ -89,7 +89,7 @@ class Tabs extends React.Component {
     if (this.props.className) className += ` ${this.props.className}`;
 
     return (
-      <div ref='tabs' className={className}>
+      <div ref='tabs' data-react-toolbox='tabs' className={className}>
         <nav className={style.navigation} ref='navigation'>
           {this.renderHeaders(headers)}
         </nav>

From 52f324d53a40bc92671cfad5c98086b5c14d5934 Mon Sep 17 00:00:00 2001
From: Fred Guest <fred.guest@formsdirect.net>
Date: Mon, 8 Feb 2016 10:51:57 -0800
Subject: [PATCH 0348/1024] update Tab.jsx

---
 components/tabs/Tab.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/tabs/Tab.jsx b/components/tabs/Tab.jsx
index dfde112bb..954d32ec3 100644
--- a/components/tabs/Tab.jsx
+++ b/components/tabs/Tab.jsx
@@ -40,7 +40,7 @@ class TabHeader extends React.Component {
     }, this.props.className);
 
     return (
-      <label className={className} onClick={this.handleClick}>
+      <label data-react-toolbox='tab' className={className} onClick={this.handleClick}>
         {this.props.label}
       </label>
     );

From 43bfd3f05ba2d160ae9656110ee23f00de6cf0e3 Mon Sep 17 00:00:00 2001
From: Fred Guest <fred.guest@formsdirect.net>
Date: Mon, 8 Feb 2016 11:01:41 -0800
Subject: [PATCH 0349/1024] replace data-role with data-react-toolbox

---
 README.md                                     | 4 ++--
 components/checkbox/Check.jsx                 | 2 +-
 components/checkbox/Checkbox.jsx              | 2 +-
 components/list/style.scss                    | 6 +++---
 components/radio/Radio.jsx                    | 2 +-
 docs/app/components/layout/install/install.md | 4 ++--
 6 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index f6393d219..09710da86 100644
--- a/README.md
+++ b/README.md
@@ -79,10 +79,10 @@ const CustomButton = () => (
 );
 ```
 
-If you browse the resulting markup you will see *data attributes* like `data-role="label"` so you can avoid styling directly tag names. You can now write your CSS:
+If you browse the resulting markup you will see *data attributes* like `data-react-toolbox="label"` so you can avoid styling directly tag names. You can now write your CSS:
 
 ```css
-.customized > [data-role="label"] {
+.customized > [data-react-toolbox="label"] {
   color: green;
   font-weight: bold;
 }
diff --git a/components/checkbox/Check.jsx b/components/checkbox/Check.jsx
index 00f054744..c4f56ec69 100644
--- a/components/checkbox/Check.jsx
+++ b/components/checkbox/Check.jsx
@@ -8,7 +8,7 @@ const Check = ({checked, children, onMouseDown}) => {
     [style.checked]: checked
   });
 
-  return <div data-role='checkbox' onMouseDown={onMouseDown} className={className}>{children}</div>;
+  return <div data-react-toolbox='check' onMouseDown={onMouseDown} className={className}>{children}</div>;
 };
 
 export default Ripple({
diff --git a/components/checkbox/Checkbox.jsx b/components/checkbox/Checkbox.jsx
index 3a2fa38e6..9f697839e 100644
--- a/components/checkbox/Checkbox.jsx
+++ b/components/checkbox/Checkbox.jsx
@@ -50,7 +50,7 @@ class Checkbox extends React.Component {
           type='checkbox'
         />
         <Check checked={this.props.checked} disabled={this.props.disabled}/>
-        {this.props.label ? <span data-role='label' className={style.text}>{this.props.label}</span> : null}
+        {this.props.label ? <span data-react-toolbox='label' className={style.text}>{this.props.label}</span> : null}
       </label>
     );
   }
diff --git a/components/list/style.scss b/components/list/style.scss
index 7f03ebeb6..976b72ffd 100644
--- a/components/list/style.scss
+++ b/components/list/style.scss
@@ -61,7 +61,7 @@
     &:not(.checkboxItem) {
       opacity: .5;
     }
-    > .checkbox > [data-role='label'] {
+    > .checkbox > [data-react-toolbox='label'] {
       opacity: .5;
     }
   }
@@ -133,10 +133,10 @@
   align-items: center;
   margin: 0;
   cursor: pointer;
-  > [data-role='checkbox'] {
+  > [data-react-toolbox='check'] {
     margin-right: $list-item-right-checkbox-margin;
   }
-  > [data-role='label'] {
+  > [data-react-toolbox='label'] {
     padding-left: 0;
   }
 }
diff --git a/components/radio/Radio.jsx b/components/radio/Radio.jsx
index 645585029..2f6575718 100644
--- a/components/radio/Radio.jsx
+++ b/components/radio/Radio.jsx
@@ -4,7 +4,7 @@ import style from './style';
 
 const Radio = ({checked, children, onMouseDown}) => {
   const className = style[checked ? 'radio-checked' : 'radio'];
-  return <div data-role='radio' onMouseDown={onMouseDown} className={className}>{children}</div>;
+  return <div data-react-toolbox='radio' onMouseDown={onMouseDown} className={className}>{children}</div>;
 };
 
 export default Ripple({
diff --git a/docs/app/components/layout/install/install.md b/docs/app/components/layout/install/install.md
index d1518f1e5..38ab7e4a8 100644
--- a/docs/app/components/layout/install/install.md
+++ b/docs/app/components/layout/install/install.md
@@ -73,10 +73,10 @@ const CustomButton = () => (
 );
 ```
 
-If you browse the resulting markup you will see *data attributes* like `data-role="label"` so you can avoid styling directly tag names. You can now write your CSS:
+If you browse the resulting markup you will see *data attributes* like `data-react-toolbox="label"` so you can avoid styling directly tag names. You can now write your CSS:
 
 ```css
-.customized > [data-role="label"] {
+.customized > [data-react-toolbox="label"] {
   color: green;
   font-weight: bold;
 }

From 96e868bd9c3eccd889f19301822023b0cc36a895 Mon Sep 17 00:00:00 2001
From: Juan Peri <eternoperegrino@gmail.com>
Date: Tue, 9 Feb 2016 10:43:00 +0100
Subject: [PATCH 0350/1024] Allowing array of pairs key-value as input for
 autocomplete

---
 components/autocomplete/Autocomplete.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/autocomplete/Autocomplete.jsx b/components/autocomplete/Autocomplete.jsx
index 8845e8345..e4a4fad4b 100644
--- a/components/autocomplete/Autocomplete.jsx
+++ b/components/autocomplete/Autocomplete.jsx
@@ -120,7 +120,7 @@ class Autocomplete extends React.Component {
  source () {
    const { source: src } = this.props;
    if (src.hasOwnProperty('length')) {
-     return new Map(src.map((item) => [item, item]));
+     return new Map(src.map((item) => Array.isArray(item) ? [...item] : [item, item]));
    } else {
      return new Map(Object.keys(src).map((key) => [key, src[key]]));
    }

From 68b23d291994794def770b6007c23b87c489ed33 Mon Sep 17 00:00:00 2001
From: Cyril Sobierajewicz <sobierajewicz.cyril@gmail.com>
Date: Wed, 10 Feb 2016 17:48:14 +0100
Subject: [PATCH 0351/1024] cleanup listeners on document before unmount

---
 components/dropdown/Dropdown.jsx     | 6 ++++++
 components/menu/Menu.jsx             | 6 ++++++
 components/slider/Slider.jsx         | 3 +++
 components/time_picker/ClockHand.jsx | 5 +++++
 4 files changed, 20 insertions(+)

diff --git a/components/dropdown/Dropdown.jsx b/components/dropdown/Dropdown.jsx
index 844564e24..ab51668c5 100644
--- a/components/dropdown/Dropdown.jsx
+++ b/components/dropdown/Dropdown.jsx
@@ -43,6 +43,12 @@ class Dropdown extends React.Component {
     }
   }
 
+  componentWillUnmount () {
+    if (this.state.active) {
+      events.removeEventsFromDocument({click: this.handleDocumentClick});
+    }
+  }
+
   handleDocumentClick = (event) => {
     if (this.state.active && !events.targetIsDescendant(event, ReactDOM.findDOMNode(this))) {
       this.setState({active: false});
diff --git a/components/menu/Menu.jsx b/components/menu/Menu.jsx
index cdcd95320..53178bd6f 100644
--- a/components/menu/Menu.jsx
+++ b/components/menu/Menu.jsx
@@ -83,6 +83,12 @@ class Menu extends React.Component {
     }
   }
 
+  componentWillUnmount () {
+    if (this.state.active) {
+      events.removeEventsFromDocument({click: this.handleDocumentClick});
+    }
+  }
+
   handleDocumentClick = (event) => {
     if (this.state.active && !events.targetIsDescendant(event, ReactDOM.findDOMNode(this))) {
       this.setState({active: false, rippled: false});
diff --git a/components/slider/Slider.jsx b/components/slider/Slider.jsx
index 570e9961e..a5ea2f4bf 100644
--- a/components/slider/Slider.jsx
+++ b/components/slider/Slider.jsx
@@ -55,6 +55,9 @@ class Slider extends React.Component {
 
   componentWillUnmount () {
     window.removeEventListener('resize', this.handleResize);
+    events.removeEventsFromDocument(this.getMouseEventMap());
+    events.removeEventsFromDocument(this.getTouchEventMap());
+    events.removeEventsFromDocument(this.getKeyboardEvents());
   }
 
   handleInputFocus = () => {
diff --git a/components/time_picker/ClockHand.jsx b/components/time_picker/ClockHand.jsx
index 6dea2f2ce..88576df0a 100644
--- a/components/time_picker/ClockHand.jsx
+++ b/components/time_picker/ClockHand.jsx
@@ -30,6 +30,11 @@ class Hand extends React.Component {
     this.setState({knobWidth: this.refs.knob.offsetWidth});
   }
 
+  componentWillUnmount () {
+    events.removeEventsFromDocument(this.getMouseEventMap());
+    events.removeEventsFromDocument(this.getTouchEventMap());
+  }
+
   getMouseEventMap () {
     return {
       mousemove: this.handleMouseMove,

From 7b2347aba8e9c08b5974b873e52ca088797b4df2 Mon Sep 17 00:00:00 2001
From: Jackie Li <jackie.li@fuseim.com>
Date: Fri, 12 Feb 2016 10:23:27 +0000
Subject: [PATCH 0352/1024] type -> getType as `type` seems to be a keyword in
 node 5.1

---
 components/list/ListItemContent.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/list/ListItemContent.jsx b/components/list/ListItemContent.jsx
index 35db9b0f4..22e0b517c 100644
--- a/components/list/ListItemContent.jsx
+++ b/components/list/ListItemContent.jsx
@@ -12,7 +12,7 @@ class ListItemContent extends React.Component {
     type: React.PropTypes.oneOf(types)
   };
 
-  type () {
+  getType () {
     const {type, children, caption, legend} = this.props;
 
     let count = React.Children.count(children);
@@ -25,7 +25,7 @@ class ListItemContent extends React.Component {
   render () {
     const {children, caption, legend} = this.props;
 
-    const className = `${style.itemContentRoot} ${style[this.type()]}`;
+    const className = `${style.itemContentRoot} ${style[this.getType()]}`;
 
     return (
       <span className={className}>

From a60975301ec87855db22a751810be28a312bf3e3 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 14 Feb 2016 20:45:39 +0100
Subject: [PATCH 0353/1024] Update to node 4.3.0

---
 .nvmrc | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.nvmrc b/.nvmrc
index fae6e3d04..80895903a 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-4.2.1
+4.3.0

From 29edd204a5644499c39941c20d9c529aadf59733 Mon Sep 17 00:00:00 2001
From: Juan Peri <eternoperegrino@gmail.com>
Date: Mon, 15 Feb 2016 18:18:16 +0100
Subject: [PATCH 0354/1024] dropdown accepts string or number as value

---
 components/dropdown/Dropdown.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/components/dropdown/Dropdown.jsx b/components/dropdown/Dropdown.jsx
index ab51668c5..de20bd425 100644
--- a/components/dropdown/Dropdown.jsx
+++ b/components/dropdown/Dropdown.jsx
@@ -17,7 +17,10 @@ class Dropdown extends React.Component {
     onFocus: React.PropTypes.func,
     source: React.PropTypes.array.isRequired,
     template: React.PropTypes.func,
-    value: React.PropTypes.string
+    value: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.number
+    ])
   };
 
   static defaultProps = {

From b2538d843a4fe091dcad53c34626018cf5446442 Mon Sep 17 00:00:00 2001
From: Blechhirn <manuel.wellmann@blechhirn.de>
Date: Wed, 17 Feb 2016 17:26:04 +0100
Subject: [PATCH 0355/1024] Workaround race condition between menu item layout
 and container size assessment.

---
 components/menu/Menu.jsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/components/menu/Menu.jsx b/components/menu/Menu.jsx
index 53178bd6f..ea022a3fd 100644
--- a/components/menu/Menu.jsx
+++ b/components/menu/Menu.jsx
@@ -43,9 +43,11 @@ class Menu extends React.Component {
   };
 
   componentDidMount () {
-    const { width, height } = this.refs.menu.getBoundingClientRect();
-    const position = this.props.position === POSITION.AUTO ? this.calculatePosition() : this.props.position;
-    this.setState({ position, width, height });
+    setTimeout(() => {
+      const { width, height } = this.refs.menu.getBoundingClientRect();
+      const position = this.props.position === POSITION.AUTO ? this.calculatePosition() : this.props.position;
+      this.setState({ position, width, height });
+    });
   }
 
   componentWillReceiveProps (nextProps) {

From c5b19c2a3d5cc2193b4e940dfded4104704ba5f0 Mon Sep 17 00:00:00 2001
From: Konstantin Baumann <konstantin.baumann@autodesk.com>
Date: Wed, 17 Feb 2016 14:01:06 +0100
Subject: [PATCH 0356/1024] [Table] enhancements

- allow usage of `react` components in table cells (header and rows): https://github.com/react-toolbox/react-toolbox/issues/268
- allow changing table header titles (via `title` prop in `model`): https://github.com/react-toolbox/react-toolbox/issues/296
- allow specifying `onChange` handler per column (via `model`) in order to make onyl certain columns editable instead of the whole table

Sample usage can be seen in the update `Table` test file.
---
 components/table/Table.jsx     |  2 +-
 components/table/TableHead.jsx |  3 ++-
 components/table/TableRow.jsx  | 17 +++++++++++++----
 spec/components/table.jsx      |  9 +++++----
 4 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/components/table/Table.jsx b/components/table/Table.jsx
index ebcc2b2af..bb6448a17 100644
--- a/components/table/Table.jsx
+++ b/components/table/Table.jsx
@@ -69,7 +69,7 @@ class Table extends React.Component {
           index={index}
           key={index}
           model={this.props.model}
-          onChange={this.handleRowChange.bind(this, index)}
+          onChange={this.props.onChange ? this.handleRowChange.bind(this) : undefined}
           onSelect={this.handleRowSelect.bind(this, index)}
           selectable={this.props.selectable}
           selected={this.props.selected.indexOf(index) !== -1}
diff --git a/components/table/TableHead.jsx b/components/table/TableHead.jsx
index e58962ad5..17b1cf3b8 100644
--- a/components/table/TableHead.jsx
+++ b/components/table/TableHead.jsx
@@ -5,7 +5,8 @@ import style from './style';
 const TableHead = ({model, onSelect, selectable, selected}) => {
   let selectCell;
   const contentCells = Object.keys(model).map((key) => {
-    return <th key={key}>{key}</th>;
+    const name = model[key].title || key;
+    return <th key={key}>{name}</th>;
   });
 
   if (selectable) {
diff --git a/components/table/TableRow.jsx b/components/table/TableRow.jsx
index 1119a4bf4..5d08be30d 100644
--- a/components/table/TableRow.jsx
+++ b/components/table/TableRow.jsx
@@ -7,6 +7,7 @@ import style from './style';
 class TableRow extends React.Component {
   static propTypes = {
     data: React.PropTypes.object,
+    index: React.PropTypes.number,
     model: React.PropTypes.object,
     onChange: React.PropTypes.func,
     onSelect: React.PropTypes.func,
@@ -14,9 +15,10 @@ class TableRow extends React.Component {
     selected: React.PropTypes.bool
   };
 
-  handleInputChange = (key, type, event) => {
+  handleInputChange = (index, key, type, event) => {
     const value = type === 'checkbox' ? event.target.checked : event.target.value;
-    this.props.onChange(key, value);
+    const onChange = this.props.model[key].onChange || this.props.onChange;
+    onChange(index, key, value);
   };
 
   renderSelectCell () {
@@ -37,7 +39,13 @@ class TableRow extends React.Component {
 
   renderCell (key) {
     const value = this.props.data[key];
-    if (this.props.onChange) {
+
+    // if the value is a valid React element return it directly, since it
+    // cannot be edited and should not be converted to a string...
+    if (React.isValidElement(value)) { return value; }
+
+    const onChange = this.props.model[key].onChange || this.props.onChange;
+    if (onChange) {
       return this.renderInput(key, value);
     } else if (value) {
       return value.toString();
@@ -45,13 +53,14 @@ class TableRow extends React.Component {
   }
 
   renderInput (key, value) {
+    const index = this.props.index;
     const inputType = utils.inputTypeForPrototype(this.props.model[key].type);
     const inputValue = utils.prepareValueForInput(value, inputType);
     const checked = inputType === 'checkbox' && value ? true : null;
     return (
       <input
         checked={checked}
-        onChange={this.handleInputChange.bind(null, key, inputType)}
+        onChange={this.handleInputChange.bind(null, index, key, inputType)}
         type={inputType}
         value={inputValue}
       />
diff --git a/spec/components/table.jsx b/spec/components/table.jsx
index e6c8739d4..1b17cb61d 100644
--- a/spec/components/table.jsx
+++ b/spec/components/table.jsx
@@ -3,15 +3,16 @@ import Table from '../../components/table';
 
 const UserModel = {
   name: {type: String},
-  twitter: {type: String},
+  twitter: {type: String, title: '@twitter'},
   birthdate: {type: Date},
-  cats: {type: Number},
+  cats: {type: Number, onChange (...args) { console.log('changes:', ...args); } },
   dogs: {type: Number},
-  owner: {type: Boolean}
+  owner: {type: Boolean },
+  image: {title: <img src='https://pbs.twimg.com/profile_images/579415786994839552/aE3uhPPr.jpg' width={50} height={50}/>}
 };
 
 const users = [
-  {name: 'Javi Jimenez', twitter: '@soyjavi', birthdate: new Date(1980, 3, 11), cats: 1},
+  {name: 'Javi Jimenez', twitter: '@soyjavi', birthdate: new Date(1980, 3, 11), cats: 1, image: <img src='http://www.planwallpaper.com/static/images/Winter-Tiger-Wild-Cat-Images.jpg' width={50} height={50}/>},
   {name: 'Javi Velasco', twitter: '@javivelasco', birthdate: new Date(1987, 1, 1), dogs: 1, owner: true}
 ];
 

From bc6ae1fe92a031340bc9fcef7595b6ded5f02cd9 Mon Sep 17 00:00:00 2001
From: Rodion <i6@bk.ru>
Date: Thu, 18 Feb 2016 20:15:13 +0200
Subject: [PATCH 0357/1024] Dropdown doesn't close on click outside fix

Hi there,

Dropdown component doesn't close on click outside in my app.
I debugged a little bit problem and found that componentWillUpdate uses incorrect.
It accepts nextProps and nextState and not prevState and nextState
https://facebook.github.io/react/docs/component-specs.html#updating-componentwillupdate
---
 components/dropdown/Dropdown.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/dropdown/Dropdown.jsx b/components/dropdown/Dropdown.jsx
index 844564e24..e2a9e61d2 100644
--- a/components/dropdown/Dropdown.jsx
+++ b/components/dropdown/Dropdown.jsx
@@ -31,8 +31,8 @@ class Dropdown extends React.Component {
     up: false
   };
 
-  componentWillUpdate (prevState, nextState) {
-    if (!prevState.active && nextState.active) {
+  componentWillUpdate (nextProps, nextState) {
+    if (!this.state.active && nextState.active) {
       events.addEventsToDocument({click: this.handleDocumentClick});
     }
   }

From f4541eecbc9cc50e6bfb9e958de5351b7a3283e6 Mon Sep 17 00:00:00 2001
From: Rodion <i6@bk.ru>
Date: Thu, 18 Feb 2016 22:42:53 +0200
Subject: [PATCH 0358/1024] renderInput() method never used

removing unused method
---
 components/input/Input.jsx | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/components/input/Input.jsx b/components/input/Input.jsx
index 4e747ec06..16571ddbf 100644
--- a/components/input/Input.jsx
+++ b/components/input/Input.jsx
@@ -36,20 +36,6 @@ class Input extends React.Component {
     if (this.props.onChange) this.props.onChange(event.target.value, event);
   };
 
-  renderInput () {
-    const {multiline, value, ...others} = this.props;
-    const className = ClassNames(style.input, {[style.filled]: value});
-
-    return React.createElement(multiline ? 'textarea' : 'input', {
-      ...others,
-      className,
-      onChange: this.handleChange,
-      ref: 'input',
-      role: 'input',
-      value
-    });
-  }
-
   blur () {
     this.refs.input.blur();
   }

From c2283c0f1c50a50d1a319dafe1ac6dec31cb5f8d Mon Sep 17 00:00:00 2001
From: rodik <i6@bk.ru>
Date: Fri, 19 Feb 2016 13:48:01 +0200
Subject: [PATCH 0359/1024] nextState in componentWillUpdate of Menu.js fix

---
 components/menu/Menu.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/menu/Menu.jsx b/components/menu/Menu.jsx
index 8a9f07d96..33e746a23 100644
--- a/components/menu/Menu.jsx
+++ b/components/menu/Menu.jsx
@@ -68,8 +68,8 @@ class Menu extends React.Component {
     return true;
   }
 
-  componentWillUpdate (prevState, nextState) {
-    if (!prevState.active && nextState.active) {
+  componentWillUpdate (nextProps, nextState) {
+    if (!this.state.active && nextState.active) {
       events.addEventsToDocument({click: this.handleDocumentClick});
     }
   }

From 6173e9b4083eb9ec34e4a268db6c69d380a98080 Mon Sep 17 00:00:00 2001
From: rodik <i6@bk.ru>
Date: Fri, 19 Feb 2016 15:43:29 +0200
Subject: [PATCH 0360/1024] Clock SSR fix

---
 components/time_picker/Clock.jsx     | 4 +++-
 components/time_picker/ClockHand.jsx | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/components/time_picker/Clock.jsx b/components/time_picker/Clock.jsx
index eede27ece..b56e8efee 100644
--- a/components/time_picker/Clock.jsx
+++ b/components/time_picker/Clock.jsx
@@ -30,7 +30,9 @@ class Clock extends React.Component {
 
   componentDidMount () {
     window.addEventListener('resize', this.handleCalculateShape);
-    this.handleCalculateShape();
+    setTimeout(() => {
+      this.handleCalculateShape();
+    });
   }
 
   componentWillUnmount () {
diff --git a/components/time_picker/ClockHand.jsx b/components/time_picker/ClockHand.jsx
index 6dea2f2ce..a5d099e5c 100644
--- a/components/time_picker/ClockHand.jsx
+++ b/components/time_picker/ClockHand.jsx
@@ -27,7 +27,9 @@ class Hand extends React.Component {
   };
 
   componentDidMount () {
-    this.setState({knobWidth: this.refs.knob.offsetWidth});
+    setTimeout(() => {
+      this.setState({knobWidth: this.refs.knob.offsetWidth});
+    });
   }
 
   getMouseEventMap () {

From 191201e8e7a2b23026c604e23ed765da1f1305b2 Mon Sep 17 00:00:00 2001
From: tanem <tane.morgan@gmail.com>
Date: Mon, 22 Feb 2016 07:47:52 +1300
Subject: [PATCH 0361/1024] Some minor typo fixes for the README

---
 README.md | 27 ++++++++++++++-------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index 09710da86..1a6ce9b45 100644
--- a/README.md
+++ b/README.md
@@ -6,11 +6,11 @@
 [![react-toolbox channel on discord](https://img.shields.io/badge/discord-%23react--toolbox%20%40%20reactiflux-61dafb.svg?style=flat-square)](https://discord.gg/0ZcbPKXt5bW9FLzM)
 [![Donate](https://img.shields.io/badge/donate-paypal-blue.svg?style=flat-square)](https://paypal.me/javivelasco)
 
-React Toolbox is a set of [React](http://facebook.github.io/react/) components that implement [Google's Material Design specification](https://www.google.com/design/spec/material-design/introduction.html). It's powered by [CSS Modules](https://github.com/css-modules/css-modules) and harmoniously integrates with your [Webpack](http://webpack.github.io/) workflow. You can take a tour through our documentation website and try the components live!
+React Toolbox is a set of [React](http://facebook.github.io/react/) components that implement [Google's Material Design specification](https://www.google.com/design/spec/material-design/introduction.html). It's powered by [CSS Modules](https://github.com/css-modules/css-modules) and harmoniously integrates with your [webpack](http://webpack.github.io/) workflow. You can take a tour through our documentation website and try the components live!
 
 ## Installation
 
-React Toolbox can be installed as an [npm package](https://www.npmjs.org/package/react-toolbox);
+React Toolbox can be installed as an [npm package](https://www.npmjs.org/package/react-toolbox):
 
 ```
 npm install --save react-toolbox
@@ -18,7 +18,7 @@ npm install --save react-toolbox
 
 ## Usage
 
-Although there are other ways to use React Toolbox, the recommended way is to create a Webpack workflow with [Babel Loader](https://github.com/babel/babel-loader), [CSS Loader](https://github.com/webpack/css-loader) and [SASS Loader](https://github.com/jtangelder/sass-loader). A good starting point is [React Hot Webpack Boilerplate](https://github.com/gaearon/react-hot-boilerplate).
+Although there are other ways to use React Toolbox, the recommended way is to create a webpack workflow with [babel-loader](https://github.com/babel/babel-loader), [css-loader](https://github.com/webpack/css-loader) and [sass-loader](https://github.com/jtangelder/sass-loader). A good starting point is [React Hot Webpack Boilerplate](https://github.com/gaearon/react-hot-boilerplate).
 
 Once you have the workflow ready, you can just require and use the components:
 
@@ -33,17 +33,17 @@ const CustomButton = () => (
 export default CustomButton;
 ```
 
-The previous code creates a React button component based on React toolbox button. It's important to notice that requiring a module from the exposed root of the package will import the **SASS** of the component.
+The previous code creates a React button component based on React Toolbox button. It's important to notice that requiring a module from the exposed root of the package will also import the **SASS** of the component.
 
 ## Roboto Font and Material Design Icons
 
 React Toolbox assumes that you are importing [Roboto Font](https://www.google.com/fonts/specimen/Roboto) and [Material Design Icons](https://www.google.com/design/icons/).
 
-In order to import the fonts for you, we'd need to include them in the CSS which is considered a bad practice. If you are not including them in your app yo to the linked sites and follow the instructions. 
+In order to import the fonts for you, we'd need to include them in the CSS which is considered a bad practice. If you are not including them in your app, go to the linked sites and follow the instructions. 
 
 ## App component
 
-There are some components in React Toolbox that requires special positioning. For example, `Dialog` and `Drawer` components block the scroll showing a fixed positioned overlay. To handle these cases, React Toolbox needs some styling in your root node. This can be achieved wrapping your app with a non intrusive `App` wrapper component:
+There are some components in React Toolbox that require special positioning. For example, `Dialog` and `Drawer` components block the scroll showing a fixed positioned overlay. To handle these cases, React Toolbox needs some styling in your root node. This can be achieved by wrapping your app with a non intrusive `App` wrapper component:
 
 ```jsx
 import React from 'react';
@@ -61,7 +61,7 @@ ReactDOM.render(
 
 ## Customization
 
-Since React Toolbox styles are written in CSS it's pretty easy to customize your components. We have several ways:
+Since React Toolbox styles are written in CSS, it's pretty easy to customize your components. We have several ways:
 
 ### Via React Toolbox Loader
 
@@ -71,7 +71,7 @@ With [toolbox-loader](https://github.com/react-toolbox/toolbox-loader) you can t
 
 ### Via `className` property
 
-Generally each component will have a `className` prop so you can tell the class name you want to keep in the root node of the resulting markup. All markup is style with the lowest specificity level so you can just nest one level in your CSS and the result will be applied. Consider this example:
+Generally each component will have a `className` prop so you can pass the class name you want to keep in the root node of the resulting markup. All markup is styled with the lowest specificity level so you can just nest one level in your CSS and the result will be applied. Consider this example:
 
 ```jsx
 const CustomButton = () => (
@@ -79,7 +79,7 @@ const CustomButton = () => (
 );
 ```
 
-If you browse the resulting markup you will see *data attributes* like `data-react-toolbox="label"` so you can avoid styling directly tag names. You can now write your CSS:
+If you browse the resulting markup you will see *data attributes* like `data-react-toolbox="label"` so you can avoid directly styling tag names. You can now write your CSS:
 
 ```css
 .customized > [data-react-toolbox="label"] {
@@ -98,9 +98,9 @@ Note that to comply with the typings requirement, a triple-slash reference to `r
 
 The project is being initially developed and maintained by [Javier Velasco](http://javivelasco.com) and [Javier Jiménez](http://soyjavi.com) and the [contribution scene](https://github.com/react-toolbox/react-toolbox/graphs/contributors) is just getting warm. We want to create reference components so any contribution is very welcome.
 
-To work in the project you'd need a `node` version supporting ES6 syntax. Although the project is built using Babel we use some ES6 features in the development server. Also, the packages has been tested with `node 4.2.1`. Consider using [nvm](https://github.com/creationix/nvm) or [n](https://github.com/tj/n) to handle different node versions!
+To work in the project you'd need a `node` version supporting ES6 syntax. Although the project is built using Babel we use some ES6 features in the development server. Also, the package has been tested with `node 4.2.1`. Consider using [nvm](https://github.com/creationix/nvm) or [n](https://github.com/tj/n) to handle different node versions!
 
-To start documentation site locally you'd need to install dependencies from the main package and also dependencies from the docs subproject:
+To start the documentation site locally, you'll need to install the dependencies from both the main package and the docs subproject:
 
 ```
 git clone https://github.com/react-toolbox/react-toolbox.git
@@ -110,7 +110,8 @@ npm install
 npm start
 ```
 
-Local documentation will be available at http://localhost:8081/
+Local documentation will then be available at `http://localhost:8081/`.
+
+## License
 
-## License 
 This project is licensed under the terms of the [MIT license](https://github.com/react-toolbox/react-toolbox/blob/master/LICENSE).

From 542f54d77d812a44b85534150a4f1b502de2be39 Mon Sep 17 00:00:00 2001
From: Max Vyznyuk <mvyznyuk@gmail.com>
Date: Mon, 22 Feb 2016 11:35:36 +0200
Subject: [PATCH 0362/1024] Added a few more events to Dialog's overlay

---
 components/dialog/Dialog.jsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/components/dialog/Dialog.jsx b/components/dialog/Dialog.jsx
index 0121e665b..a2dd644c3 100644
--- a/components/dialog/Dialog.jsx
+++ b/components/dialog/Dialog.jsx
@@ -15,7 +15,13 @@ const Dialog = (props) => {
   }, props.className);
 
   return (
-    <Overlay active={props.active} onClick={props.onOverlayClick}>
+    <Overlay
+      active={props.active}
+      onClick={props.onOverlayClick}
+      onMouseDown={props.onOverlayMouseDown}
+      onMouseUp={props.onOverlayMouseUp}
+      onMouseMove={props.onOverlayMouseMove}
+    >
       <div data-react-toolbox='dialog' className={className}>
         <section role='body' className={style.body}>
           {props.title ? <h6 className={style.title}>{props.title}</h6> : null}
@@ -35,6 +41,9 @@ Dialog.propTypes = {
   children: React.PropTypes.node,
   className: React.PropTypes.string,
   onOverlayClick: React.PropTypes.func,
+  onOverlayMouseDown: React.PropTypes.func,
+  onOverlayMouseUp: React.PropTypes.func,
+  onOverlayMouseMove: React.PropTypes.func,
   title: React.PropTypes.string,
   type: React.PropTypes.string
 };

From 0227b0d2d0f800757760c49e2e091ccb195c8a4b Mon Sep 17 00:00:00 2001
From: Tucker Connelly <web@tuckerconnelly.com>
Date: Tue, 23 Feb 2016 17:55:27 -0500
Subject: [PATCH 0363/1024] Change error PropType to node on Input

---
 components/input/Input.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/input/Input.jsx b/components/input/Input.jsx
index 4e747ec06..f77072116 100644
--- a/components/input/Input.jsx
+++ b/components/input/Input.jsx
@@ -8,7 +8,7 @@ class Input extends React.Component {
     children: React.PropTypes.any,
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
-    error: React.PropTypes.string,
+    error: React.PropTypes.node,
     floating: React.PropTypes.bool,
     icon: React.PropTypes.any,
     label: React.PropTypes.string,

From f77a80653900cfad12c4b71eb0c33e25e7448266 Mon Sep 17 00:00:00 2001
From: Kye Hohenberger <kye@sideway.com>
Date: Wed, 24 Feb 2016 12:47:44 -0600
Subject: [PATCH 0364/1024] Typos and grammar corrections for install document

---
 docs/app/components/layout/install/install.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/app/components/layout/install/install.md b/docs/app/components/layout/install/install.md
index d1518f1e5..9ac40ba07 100644
--- a/docs/app/components/layout/install/install.md
+++ b/docs/app/components/layout/install/install.md
@@ -33,11 +33,11 @@ The previous code creates a React button component based on React toolbox button
 
 React Toolbox assumes that you are importing [Roboto Font](https://www.google.com/fonts/specimen/Roboto) and [Material Design Icons](https://www.google.com/design/icons/).
 
-In order to import the fonts for you, we'd need to include them in the CSS which is considered a bad practice. If you are not including them in your app yo to the linked sites and follow the instructions. 
+In order to import the fonts for you, we'd need to include them in the CSS which is considered a bad practice. If you are not including them in your app to the linked sites and follow the instructions. 
 
 ## App component
 
-There are some components in React Toolbox that requires special positioning. For example, `Dialog` and `Drawer` components block the scroll showing a fixed positioned overlay. To handle these cases, React Toolbox needs some styling in your root node. This can be achieved wrapping your app with a non intrusive `App` wrapper component:
+There are some components in React Toolbox that requires special positioning. For example, `Dialog` and `Drawer` components block the scroll showing a fixed positioned overlay. To handle these cases, React Toolbox needs some styling in your root node. This can be achieved wrapping your app with a nonintrusive `App` wrapper component:
 
 ```jsx
 import React from 'react';
@@ -65,7 +65,7 @@ With [toolbox-loader](https://github.com/react-toolbox/toolbox-loader) you can t
 
 ### Via `className` property
 
-Generally each component will have a `className` prop so you can tell the class name you want to keep in the root node of the resulting markup. All markup is style with the lowest specificity level so you can just nest one level in your CSS and the result will be applied. Consider this example:
+Generally each component will have a `className` prop so that you can apply a class name to the root node of the resulting markup. All markup is styled with the lowest specificity level so you can just nest one level in your CSS and the result will be applied. Consider this example:
 
 ```jsx
 const CustomButton = () => (
@@ -73,7 +73,7 @@ const CustomButton = () => (
 );
 ```
 
-If you browse the resulting markup you will see *data attributes* like `data-role="label"` so you can avoid styling directly tag names. You can now write your CSS:
+If you browse the resulting markup you will see *data attributes* like `data-role="label"` which can be used to style components without using tag name selectors. You can now write your CSS:
 
 ```css
 .customized > [data-role="label"] {

From a78ec39df170c419edec32a49b710aca9a4c8b25 Mon Sep 17 00:00:00 2001
From: Mihail Diordiev <zalmoxisus@gmail.com>
Date: Thu, 3 Mar 2016 14:34:31 +0200
Subject: [PATCH 0365/1024] When the font-size (or $unit) is small, there's no
 difference between selected and unselected item

---
 components/menu/style.menu_item.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/menu/style.menu_item.scss b/components/menu/style.menu_item.scss
index 3e4a90af8..de9f2bec7 100644
--- a/components/menu/style.menu_item.scss
+++ b/components/menu/style.menu_item.scss
@@ -20,6 +20,7 @@
   }
   &.selected {
     font-weight: 500;
+    background-color: $color-primary-light;
   }
 }
 

From c2c0ac74668cf0047d5594fa0ab79b9a92a75ef9 Mon Sep 17 00:00:00 2001
From: Mihail Diordiev <zalmoxisus@gmail.com>
Date: Thu, 3 Mar 2016 14:44:42 +0200
Subject: [PATCH 0366/1024] Support `0` value as being numeric

---
 components/menu/Menu.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/menu/Menu.jsx b/components/menu/Menu.jsx
index ea022a3fd..fc56d0abf 100644
--- a/components/menu/Menu.jsx
+++ b/components/menu/Menu.jsx
@@ -141,7 +141,7 @@ class Menu extends React.Component {
       if (item.type === MenuItem) {
         return React.cloneElement(item, {
           ripple: item.props.ripple || this.props.ripple,
-          selected: item.props.value && this.props.selectable && item.props.value === this.props.selected,
+          selected: typeof item.props.value !== 'undefined' && this.props.selectable && item.props.value === this.props.selected,
           onClick: this.handleSelect.bind(this, item)
         });
       } else {

From d8a58bd22516a0b6e1089bec692bd7556057ca1c Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 26 Jan 2016 14:10:47 +0100
Subject: [PATCH 0367/1024] 0.14.1 release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a8ae4af12..90053f5e9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-toolbox",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "homepage": "http://www.react-toolbox.com/",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "author": "React Toolbox Team (http://github.com/react-toolbox)",

From c1f2b83865d145b3c7f8e9dc2c325dcb15b908fb Mon Sep 17 00:00:00 2001
From: Rodion <i6@bk.ru>
Date: Thu, 18 Feb 2016 20:15:13 +0200
Subject: [PATCH 0368/1024] Dropdown doesn't close on click outside fix

Hi there,

Dropdown component doesn't close on click outside in my app.
I debugged a little bit problem and found that componentWillUpdate uses incorrect.
It accepts nextProps and nextState and not prevState and nextState
https://facebook.github.io/react/docs/component-specs.html#updating-componentwillupdate
---
 components/dropdown/Dropdown.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/dropdown/Dropdown.jsx b/components/dropdown/Dropdown.jsx
index de20bd425..d3ce01b6f 100644
--- a/components/dropdown/Dropdown.jsx
+++ b/components/dropdown/Dropdown.jsx
@@ -34,8 +34,8 @@ class Dropdown extends React.Component {
     up: false
   };
 
-  componentWillUpdate (prevState, nextState) {
-    if (!prevState.active && nextState.active) {
+  componentWillUpdate (nextProps, nextState) {
+    if (!this.state.active && nextState.active) {
       events.addEventsToDocument({click: this.handleDocumentClick});
     }
   }

From ef0fe1108ee1c68fccb4dffe7ba605b972d88285 Mon Sep 17 00:00:00 2001
From: Rodion <i6@bk.ru>
Date: Thu, 18 Feb 2016 22:42:53 +0200
Subject: [PATCH 0369/1024] renderInput() method never used

removing unused method
---
 components/input/Input.jsx | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/components/input/Input.jsx b/components/input/Input.jsx
index f77072116..7e98ad96c 100644
--- a/components/input/Input.jsx
+++ b/components/input/Input.jsx
@@ -36,20 +36,6 @@ class Input extends React.Component {
     if (this.props.onChange) this.props.onChange(event.target.value, event);
   };
 
-  renderInput () {
-    const {multiline, value, ...others} = this.props;
-    const className = ClassNames(style.input, {[style.filled]: value});
-
-    return React.createElement(multiline ? 'textarea' : 'input', {
-      ...others,
-      className,
-      onChange: this.handleChange,
-      ref: 'input',
-      role: 'input',
-      value
-    });
-  }
-
   blur () {
     this.refs.input.blur();
   }

From 7adfc59772dae64b9a6113c33c39c26895694234 Mon Sep 17 00:00:00 2001
From: rodik <i6@bk.ru>
Date: Fri, 19 Feb 2016 13:48:01 +0200
Subject: [PATCH 0370/1024] nextState in componentWillUpdate of Menu.js fix

---
 components/menu/Menu.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/menu/Menu.jsx b/components/menu/Menu.jsx
index fc56d0abf..78c4e7ae4 100644
--- a/components/menu/Menu.jsx
+++ b/components/menu/Menu.jsx
@@ -70,8 +70,8 @@ class Menu extends React.Component {
     return true;
   }
 
-  componentWillUpdate (prevState, nextState) {
-    if (!prevState.active && nextState.active) {
+  componentWillUpdate (nextProps, nextState) {
+    if (!this.state.active && nextState.active) {
       events.addEventsToDocument({click: this.handleDocumentClick});
     }
   }

From 3a3dea665c1b30bce16e11192272258d3e86c26d Mon Sep 17 00:00:00 2001
From: Max Vyznyuk <mvyznyuk@gmail.com>
Date: Sat, 5 Mar 2016 12:24:03 +0200
Subject: [PATCH 0371/1024] Update Dialog's documentation.

---
 components/dialog/readme.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/components/dialog/readme.md b/components/dialog/readme.md
index 51f287434..6d569622a 100644
--- a/components/dialog/readme.md
+++ b/components/dialog/readme.md
@@ -41,5 +41,8 @@ class DialogTest extends React.Component {
 | `actions`       | `Array`         |    `[]`         | A array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons.|
 | `className`     | `String`        |     `''`        | Sets a class to give customized styles to the dialog.|
 | `onOverlayClick`   | `Function`   |             | Callback to be invoked when the dialog overlay is clicked.|
+| `onOverlayMouseDown` | `Function` |             | Callback called when the mouse button is pressed on the overlay. |
+| `onOverlayMouseUp` | `Function` |               | Callback called when the mouse button is released over the overlay. |
+| `onOverlayMouseMove` | `Function` |             | Callback called when the mouse is moving over the overlay. |
 | `title`         | `String`        |                 | The text string to use as standar title of the dialog.|
 | `type`          | `String`        |  `normal`       | Used to determine the size of the dialog. It can be `small`, `normal` or `large`. |

From ddeb44f8db8936b8bf90253dd7d2de253a5a9a54 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 5 Mar 2016 20:29:42 +0100
Subject: [PATCH 0372/1024] Fixes #304

---
 components/overlay/Overlay.jsx |  6 ++--
 spec/components/dialog.jsx     | 51 ++++++++++++++++++++++++++++------
 2 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/components/overlay/Overlay.jsx b/components/overlay/Overlay.jsx
index d00bef8ee..c60d31463 100644
--- a/components/overlay/Overlay.jsx
+++ b/components/overlay/Overlay.jsx
@@ -39,12 +39,14 @@ class Overlay extends React.Component {
       [style.invisible]: this.props.invisible
     }, this.props.className);
 
-    ReactDOM.render(
+    const overlay = (
       <div className={className}>
         <div className={style.overlay} onClick={this.props.onClick} />
         {this.props.children}
       </div>
-    , this.node);
+    );
+
+    ReactDOM.unstable_renderSubtreeIntoContainer(this, overlay, this.node);
   }
 
   render () {
diff --git a/spec/components/dialog.jsx b/spec/components/dialog.jsx
index 27848511f..b4de8c516 100644
--- a/spec/components/dialog.jsx
+++ b/spec/components/dialog.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import Button from '../../components/button';
 import Dialog from '../../components/dialog';
 
@@ -24,17 +24,50 @@ class DialogTest extends React.Component {
         <h5>Dialog</h5>
         <p>lorem ipsum...</p>
         <Button label='Show Dialog' raised primary onClick={this.handleToggle} />
-        <Dialog
-          actions={this.actions}
-          active={this.state.active}
-          title="Use Google's location service?"
-          onOverlayClick={this.handleToggle}
-        >
-          <p>Let Google help apps <strong>determine location</strong>. This means sending anonymous location data to Google, even when no apps are running.</p>
-        </Dialog>
+        <ContextComponent>
+          <Dialog
+            actions={this.actions}
+            active={this.state.active}
+            title="Use Google's location service?"
+            onOverlayClick={this.handleToggle}
+          >
+            <p>Let Google help apps <strong>determine location</strong>. This means sending anonymous location data to Google, even when no apps are running.</p>
+            <DialogChild />
+          </Dialog>
+        </ContextComponent>
       </section>
     );
   }
 }
 
+class ContextComponent extends React.Component {
+  static propTypes = {
+    children: PropTypes.any
+  };
+
+  static childContextTypes = {
+    message: PropTypes.string
+  }
+
+  getChildContext () {
+    return {
+      message: 'Hi, I\'m the top container'
+    };
+  }
+
+  render () {
+    return this.props.children;
+  }
+}
+
+class DialogChild extends React.Component {
+  static contextTypes = {
+    message: PropTypes.string
+  }
+
+  render () {
+    return <span>This message comes from a parent {this.context.message}</span>;
+  }
+}
+
 export default DialogTest;

From 4fba76e7fb6ec9c2ae9427386474da90756b97f5 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 5 Mar 2016 20:32:45 +0100
Subject: [PATCH 0373/1024] More beauty in the dialog spec

---
 spec/components/dialog.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spec/components/dialog.jsx b/spec/components/dialog.jsx
index b4de8c516..34328c0ae 100644
--- a/spec/components/dialog.jsx
+++ b/spec/components/dialog.jsx
@@ -66,7 +66,7 @@ class DialogChild extends React.Component {
   }
 
   render () {
-    return <span>This message comes from a parent {this.context.message}</span>;
+    return <p>This message comes from a parent: <strong>{this.context.message}</strong></p>;
   }
 }
 

From b45c8f7ced90e44f51c5a614d809f2f4788ce8be Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 5 Mar 2016 20:35:13 +0100
Subject: [PATCH 0374/1024] =?UTF-8?q?=F0=9F=98=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/ripple/Ripple.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/ripple/Ripple.jsx b/components/ripple/Ripple.jsx
index 5c98ba0ce..4059141bc 100644
--- a/components/ripple/Ripple.jsx
+++ b/components/ripple/Ripple.jsx
@@ -77,7 +77,6 @@ const Ripple = (options = {}) => {
       }
 
       handleMouseDown = (event) => {
-        console.log('ripple');
         if (!this.props.disabled) this.start(event);
         if (this.props.onMouseDown) this.props.onMouseDown(event);
       };

From 22b46d92944c725eabd513ea4fd48b56a42d58d1 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 5 Mar 2016 21:20:36 +0100
Subject: [PATCH 0375/1024] Fix #357

---
 components/menu/readme.md | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/components/menu/readme.md b/components/menu/readme.md
index 2efbe3219..78f397654 100644
--- a/components/menu/readme.md
+++ b/components/menu/readme.md
@@ -1,11 +1,11 @@
 # Menu
- 
+
 A [Menu](https://www.google.com/design/spec/components/menus.html) is a temporary piece of material emitted from a button, an action, a pointer, or another control that contains at least two menu items. Each menu item is a discrete option or action that can affect the app, the view, or selected elements within a view. Menus should not be used as a primary method for navigation within an app. You can compose a menu based on a few subcomponents, same as for Lists.
 
 <!-- example -->
 ```jsx
 import {IconMenu, MenuItem, MenuDivider } from 'react-toolbox';
- 
+
 const MenuTest = () => (
   <IconMenu icon='more_vert' position='top-left' menuRipple>
     <MenuItem value='download' icon='get_app' caption='Download' />
@@ -23,15 +23,15 @@ This subcomponent is the default wrapper for a menu and is responsible for the o
 
 | Name              | Type          | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `active`   | `Boolean`    | `false`    | If true, the menu will be displayed as opened by default.| 
-| `className`   | `String`    |  `''`    | Set a class to give custom styles to the menu wrapper.| 
+| `active`   | `Boolean`    | `false`    | If true, the menu will be displayed as opened by default.|
+| `className`   | `String`    |  `''`    | Set a class to give custom styles to the menu wrapper.|
 | `onHide`    | `Function`    |    | Callback that will be called when the menu is being hid. |
 | `onShow`    | `Function`    |    | Callback that will be invoked when the menu is being shown. |
 | `outline`    | `Boolean`    | `true`  | If true the menu wrapper will show an outline with a soft shadow. |
 | `position`    | `String`    | `static`  | Determine the position of the menu. With `static` value the menu will be always shown, `auto` means that the it will decide the opening direction based on the current position. To force a position use `top-left`, `top-right`, `bottom-left`, `bottom-right`. |
 | `ripple`    | `Boolean`    | `true`  | If true, the menu items will show a ripple effect on click. |
-| `selectable`    | `Boolean`    | `true`  | If true, the menu will keep a value to highlight the active child item. |
-| `value`    | `Boolean`    |  | Used for selectable menus and indicates the initial value so the child item with this value can be highlighted. |
+| `selectable`    | `Boolean`    | `false`  | If true, the menu will keep a value to highlight the active child item. |
+| `selected`    | `Any`    |  | Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted. |
 
 The menu has state to keep a value with the currently selected item. It also exposes methods to show and hide the menu from the code:
 
@@ -46,7 +46,7 @@ As the most usual scenario will be to open the menu from a click in an Icon, we
 
 | Name              | Type          | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `className`   | `String`    |  `''`    | Set a class to give custom styles to the icon wrapper.| 
+| `className`   | `String`    |  `''`    | Set a class to give custom styles to the icon wrapper.|
 | `icon`    | `String`    | `more_vert`  | Icon font key string to display the opener icon. |
 | `iconRipple`    | `String`    | `true`  | If true, the icon will show a ripple when is clicked. |
 | `menuRipple`    | `String`    | `true`  | Transferred to the `Menu` component. |
@@ -55,7 +55,8 @@ As the most usual scenario will be to open the menu from a click in an Icon, we
 | `onShow`    | `Function`    |    | Callback that will be invoked when the menu is being shown. |
 | `onSelect`    | `Function`    |    | Callback that will be invoked when a menu item is selected. |
 | `position`    | `String`    | `auto`  | Determine the position of the menu. This property is transferred to the inner `Menu` component. |
-| `selectable`    | `Boolean`    | `false`  | If true, the menu will keep a value to highlight the active child item. Transferred to the `Menu` |
+| `selectable`    | `Boolean`    | `false`  | If true, the menu will keep a value to highlight the active child item. |
+| `selected`    | `Any`    |  | Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted. |
 
 ## Menu Item
 
@@ -63,9 +64,9 @@ Is the inner component for menus and describes the content of each option. It be
 
 | Name              | Type          | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `caption`   | `String`    |    | The text to include in the menu item.| 
-| `className`   | `String`    |  `''`    | Set a class to give custom styles to the item.| 
-| `disabled`   | `Boolean`    |  `false`    | If true, the item will be displayed as disabled and is not selectable.| 
+| `caption`   | `String`    |    | The text to include in the menu item.|
+| `className`   | `String`    |  `''`    | Set a class to give custom styles to the item.|
+| `disabled`   | `Boolean`    |  `false`    | If true, the item will be displayed as disabled and is not selectable.|
 | `icon`    | `String`    |  | Icon font key string to display in the right side of the option. |
 | `ripple`    | `Boolean`    | `false`  | If true, the item will show a ripple effect when it's clicked. Inherited from the parent. |
 | `selected`    | `Boolean`    | `false`  | Transferred from the `Menu` component for selectable menus. Indicates if it's the current active option. |

From dce92d3a33f1b077352744787af8a808ceac914a Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 5 Mar 2016 21:25:21 +0100
Subject: [PATCH 0376/1024] Set background to transparent by default

---
 components/menu/_config.scss         | 1 +
 components/menu/style.menu_item.scss | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/menu/_config.scss b/components/menu/_config.scss
index 02b06d470..05a5c6d03 100644
--- a/components/menu/_config.scss
+++ b/components/menu/_config.scss
@@ -5,6 +5,7 @@ $menu-background-color: $color-white;
 $menu-padding: .8 * $unit 0;
 $menu-outline-border-radius: .2 * $unit;
 $menu-item-hover-background: $palette-grey-200;
+$menu-item-selected-background: transparent !default;
 $menu-item-icon-font-size: 2.4 * $unit;
 $menu-item-icon-size: 1.6 * $menu-item-icon-font-size;
 $menu-item-height: 4.8 * $unit;
diff --git a/components/menu/style.menu_item.scss b/components/menu/style.menu_item.scss
index de9f2bec7..33c9c724b 100644
--- a/components/menu/style.menu_item.scss
+++ b/components/menu/style.menu_item.scss
@@ -20,7 +20,7 @@
   }
   &.selected {
     font-weight: 500;
-    background-color: $color-primary-light;
+    background-color: $menu-item-selected-background;
   }
 }
 

From 993afbce39438ef6dce37d40f20de3d1ff7c3ec7 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 5 Mar 2016 21:37:07 +0100
Subject: [PATCH 0377/1024] Fix #356

---
 components/dropdown/Dropdown.jsx | 8 +++-----
 spec/components/dropdown.jsx     | 1 -
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/components/dropdown/Dropdown.jsx b/components/dropdown/Dropdown.jsx
index d3ce01b6f..cb8dc3995 100644
--- a/components/dropdown/Dropdown.jsx
+++ b/components/dropdown/Dropdown.jsx
@@ -80,8 +80,6 @@ class Dropdown extends React.Component {
       for (const item of this.props.source) {
         if (item.value === this.props.value) return item;
       }
-    } else {
-      return this.props.source[0];
     }
   };
 
@@ -127,10 +125,10 @@ class Dropdown extends React.Component {
           className={style.value}
           onMouseDown={this.handleMouseDown}
           readOnly
-          type={template ? 'hidden' : null}
-          value={selected.label}
+          type={template && selected ? 'hidden' : null}
+          value={selected && selected.label}
         />
-        {template ? this.renderTemplateValue(selected) : null}
+      {template && selected ? this.renderTemplateValue(selected) : null}
         <ul className={style.values} ref='values'>
           {source.map(this.renderValue.bind(this))}
         </ul>
diff --git a/spec/components/dropdown.jsx b/spec/components/dropdown.jsx
index 14dc6112a..5351f555f 100644
--- a/spec/components/dropdown.jsx
+++ b/spec/components/dropdown.jsx
@@ -12,7 +12,6 @@ const countries = [
 
 class DropdownTest extends React.Component {
   state = {
-    dropdown1: 'ES-es',
     dropdown4: 'TH-th'
   };
 

From a64d5e4c5005294bb4cc797bcb22751b8a29a84a Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 5 Mar 2016 21:43:17 +0100
Subject: [PATCH 0378/1024] Fix #302

---
 components/menu/Menu.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/menu/Menu.jsx b/components/menu/Menu.jsx
index 78c4e7ae4..7220b12cb 100644
--- a/components/menu/Menu.jsx
+++ b/components/menu/Menu.jsx
@@ -138,6 +138,7 @@ class Menu extends React.Component {
 
   renderItems () {
     return React.Children.map(this.props.children, (item) => {
+      if (item === null) return item;
       if (item.type === MenuItem) {
         return React.cloneElement(item, {
           ripple: item.props.ripple || this.props.ripple,

From f1a098d9fad758dd5782655b8ffae3c123f97fdf Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 5 Mar 2016 21:53:52 +0100
Subject: [PATCH 0379/1024] Fix #290

---
 components/tabs/Tabs.jsx | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/components/tabs/Tabs.jsx b/components/tabs/Tabs.jsx
index 2cc187e8f..fd3b1ab53 100644
--- a/components/tabs/Tabs.jsx
+++ b/components/tabs/Tabs.jsx
@@ -20,9 +20,7 @@ class Tabs extends React.Component {
   };
 
   componentDidMount () {
-    setTimeout(() => {
-      this.updatePointer(this.props.index);
-    }, 100);
+    this.updatePointer(this.props.index);
   }
 
   componentWillReceiveProps (nextProps) {
@@ -52,15 +50,17 @@ class Tabs extends React.Component {
   }
 
   updatePointer (idx) {
-    const startPoint = this.refs.tabs.getBoundingClientRect().left;
-    const label = this.refs.navigation.children[idx].getBoundingClientRect();
-    this.setState({
-      pointer: {
-        top: `${this.refs.navigation.getBoundingClientRect().height}px`,
-        left: `${label.left - startPoint}px`,
-        width: `${label.width}px`
-      }
-    });
+    setTimeout(() => {
+      const startPoint = this.refs.tabs.getBoundingClientRect().left;
+      const label = this.refs.navigation.children[idx].getBoundingClientRect();
+      this.setState({
+        pointer: {
+          top: `${this.refs.navigation.getBoundingClientRect().height}px`,
+          left: `${label.left - startPoint}px`,
+          width: `${label.width}px`
+        }
+      });
+    }, 20);
   }
 
   renderHeaders (headers) {

From e2634998af13a9b4eb4b9afc9730487f5367f80e Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 5 Mar 2016 22:00:38 +0100
Subject: [PATCH 0380/1024] Fix #248

---
 docs/app/components/layout/home/style.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/app/components/layout/home/style.scss b/docs/app/components/layout/home/style.scss
index 078b551e5..b7da9730f 100644
--- a/docs/app/components/layout/home/style.scss
+++ b/docs/app/components/layout/home/style.scss
@@ -53,6 +53,7 @@ $content-width: 740px;
         display: inline-block;
         margin: 0 10px;
         font-size: 50px;
+        line-height: 60px;
         vertical-align: middle;
         content: "·";
       }
@@ -61,7 +62,7 @@ $content-width: 740px;
         position: relative;
         display: inline-block;
         font-weight: 400;
-        line-height: 1.2;
+        line-height: 60px;
         color: $hero-text-color;
         vertical-align: middle;
         opacity: $hero-text-secondary-opacity;

From 10758163be05b308621f690d44500d7c4562f3a7 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 6 Mar 2016 12:13:47 +0100
Subject: [PATCH 0381/1024] Use falsy when cloning menuitems to check if
 element should be treated

---
 components/menu/Menu.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/menu/Menu.jsx b/components/menu/Menu.jsx
index 7220b12cb..477b3d550 100644
--- a/components/menu/Menu.jsx
+++ b/components/menu/Menu.jsx
@@ -138,7 +138,7 @@ class Menu extends React.Component {
 
   renderItems () {
     return React.Children.map(this.props.children, (item) => {
-      if (item === null) return item;
+      if (!item) return item;
       if (item.type === MenuItem) {
         return React.cloneElement(item, {
           ripple: item.props.ripple || this.props.ripple,

From 5029b0d03ed89509a540169ad3574c4ecd468494 Mon Sep 17 00:00:00 2001
From: Tobias Bales <tobias.bales@gmail.com>
Date: Sun, 6 Mar 2016 13:56:35 +0100
Subject: [PATCH 0382/1024] Fix label for number inputs with 0 as value

For an

   <Input type="number" label="label text"/>

the label would overlay the value when it was set to 0 (the integer)
since the checking logic checked for javascript "trueishness".
Now the check is explicit against null, undefined, empty string and NaN.
---
 components/input/Input.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/input/Input.jsx b/components/input/Input.jsx
index 7e98ad96c..46c180053 100644
--- a/components/input/Input.jsx
+++ b/components/input/Input.jsx
@@ -57,9 +57,11 @@ class Input extends React.Component {
       [style.withIcon]: icon
     }, this.props.className);
 
+    const valuePresent = value !== null && value !== undefined && value !== '' && !Number.isNaN(value);
+
     const InputElement = React.createElement(multiline ? 'textarea' : 'input', {
       ...others,
-      className: ClassNames(style.input, {[style.filled]: value}),
+      className: ClassNames(style.input, {[style.filled]: valuePresent}),
       onChange: this.handleChange,
       ref: 'input',
       role: 'input',

From 852c3ea4f2d4f5fa052f704b2651384ed1dd9d6e Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 6 Mar 2016 20:25:39 +0100
Subject: [PATCH 0383/1024] Fix #316

---
 components/menu/Menu.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/menu/Menu.jsx b/components/menu/Menu.jsx
index 477b3d550..b0dfbaf60 100644
--- a/components/menu/Menu.jsx
+++ b/components/menu/Menu.jsx
@@ -152,7 +152,8 @@ class Menu extends React.Component {
   }
 
   show () {
-    this.setState({active: true});
+    const { width, height } = this.refs.menu.getBoundingClientRect();
+    this.setState({active: true, width, height});
   }
 
   hide () {

From 01e2eabd6f0be6cd18c6704858f5e8b37f9b2f43 Mon Sep 17 00:00:00 2001
From: Juan Carlos Sanchez Cardenas <jcsanchezcardenas@gmail.com>
Date: Tue, 8 Mar 2016 14:50:05 +0100
Subject: [PATCH 0384/1024] Fixes small typos in AutoComplete documentation

---
 components/autocomplete/readme.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/autocomplete/readme.md b/components/autocomplete/readme.md
index 43b72f99e..dfd9a70a7 100644
--- a/components/autocomplete/readme.md
+++ b/components/autocomplete/readme.md
@@ -15,7 +15,7 @@ const source = {
 
 class AutocompleteTest extends React.Component {
   state = { 
-    countries: ['EN-es', 'TH-th']
+    countries: ['ES-es', 'TH-th']
   }
 
   handleChange = (value) => {
@@ -29,7 +29,7 @@ class AutocompleteTest extends React.Component {
         label="Choose countries"
         onChange={this.handleChange}
         source={source}
-        value={this.state.value}
+        value={this.state.countries}
       />
     );
   }

From 953c2098a63c338ac089853c6effef5fc7e4830d Mon Sep 17 00:00:00 2001
From: Keren Chandran <keren.chandran@gmail.com>
Date: Tue, 8 Mar 2016 09:22:58 -0500
Subject: [PATCH 0385/1024] Modified z-index to include default

---
 components/_globals.scss | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/_globals.scss b/components/_globals.scss
index 8dbaf1234..53a2ac015 100644
--- a/components/_globals.scss
+++ b/components/_globals.scss
@@ -47,9 +47,9 @@ $animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
 $animation-curve-default: $animation-curve-fast-out-slow-in !default;
 
 //-- Indexes
-$z-index-highest: 300;
-$z-index-higher: 200;
-$z-index-high: 100;
-$z-index-normal: 1;
-$z-index-low: -100;
-$z-index-lower: -200;
+$z-index-highest: 300 !default;
+$z-index-higher: 200 !default;
+$z-index-high: 100 !default;
+$z-index-normal: 1 !default;
+$z-index-low: -100 !default;
+$z-index-lower: -200 !default;

From 16ed92693ae56e1b1fbfdf88c942e59f515d3f7b Mon Sep 17 00:00:00 2001
From: Felipe Amorim <felipe.leusin@gmail.com>
Date: Tue, 8 Mar 2016 17:40:16 -0300
Subject: [PATCH 0386/1024] allows to format the date displayed on datepickers
 input

---
 components/date_picker/DatePicker.jsx                  |  6 ++++--
 components/date_picker/readme.md                       |  2 ++
 components/utils/time.js                               | 10 ++++++++--
 .../main/modules/examples/datepicker_example_1.txt     |  7 +++++++
 spec/components/pickers.jsx                            |  7 +++++++
 5 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/components/date_picker/DatePicker.jsx b/components/date_picker/DatePicker.jsx
index 2fab6b3d9..fef353b74 100644
--- a/components/date_picker/DatePicker.jsx
+++ b/components/date_picker/DatePicker.jsx
@@ -13,7 +13,8 @@ class DatePicker extends React.Component {
     maxDate: React.PropTypes.object,
     minDate: React.PropTypes.object,
     onChange: React.PropTypes.func,
-    value: React.PropTypes.object
+    value: React.PropTypes.object,
+    inputFormat: React.PropTypes.func
   };
 
   state = {
@@ -36,7 +37,8 @@ class DatePicker extends React.Component {
 
   render () {
     const { value } = this.props;
-    const date = value ? `${value.getDate()} ${time.getFullMonth(value)} ${value.getFullYear()}` : null;
+    const inputFormat = this.props.inputFormat || time.formatDate;
+    const date = value ? inputFormat(value) : null;
 
     return (
       <div data-react-toolbox='date-picker'>
diff --git a/components/date_picker/readme.md b/components/date_picker/readme.md
index 629a91e90..e9c7aa03e 100644
--- a/components/date_picker/readme.md
+++ b/components/date_picker/readme.md
@@ -23,6 +23,7 @@ class DatePickerTest extends React.Component {
       <section>
         <DatePicker label='Birthdate' onChange={this.handleChange.bind(this, 'date1')} value={this.state.date1} />
         <DatePicker label='Expiration date' minDate={min_datetime} onChange={this.handleChange.bind(this, 'date2')} value={this.state.date2} />
+        <DatePicker label='Formatted date' inputFormat={(value) => `${value.getDate()}/${value.getMonth()}/${value.getFullYear()}`} onChange={this.handleChange.bind(this, 'date3')} value={this.state.date3} />
       </section>
     );
   }
@@ -40,3 +41,4 @@ class DatePickerTest extends React.Component {
 | `onChange`       | `Function`       |                | Callback called when the picker value is changed.|
 | `placeholder`     | `String`        |             | The text string to use like a input placeholder.|
 | `value`         | `Date`    |                 | Date object with the currently selected date. |
+| `inputFormat`         | `Function`    |                 | Function to format the date displayed on the input. |
diff --git a/components/utils/time.js b/components/utils/time.js
index ecc53c4c6..53522794a 100644
--- a/components/utils/time.js
+++ b/components/utils/time.js
@@ -1,4 +1,4 @@
-export default {
+const time = {
   getDaysInMonth (d) {
     const resultDate = this.getFirstDayOfMonth(d);
     resultDate.setMonth(resultDate.getMonth() + 1);
@@ -175,5 +175,11 @@ export default {
 
   dateOutOfRange (date, minDate, maxDate) {
     return ((minDate && !(date >= minDate)) || (maxDate && !(date <= maxDate)));
-  }
+  },
+
+  formatDate (date) {
+    return `${date.getDate()} ${time.getFullMonth(date)} ${date.getFullYear()}`;
+  },
 };
+
+export default time;
diff --git a/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt b/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt
index cf1960197..877bd7fb2 100644
--- a/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt
@@ -26,6 +26,13 @@ class DatePickerTest extends React.Component {
           onChange={this.handleChange.bind(this, 'date2')}
           value={this.state.date2}
         />
+
+        <DatePicker
+          label='Formatted Date'
+          inputFormat={(value) => `${value.getDate()}/${value.getMonth()}/${value.getFullYear()}`}
+          onChange={this.handleChange.bind(this, 'date3')}
+          value={this.state.date3}
+        />
       </section>
     );
   }
diff --git a/spec/components/pickers.jsx b/spec/components/pickers.jsx
index 02c5dd0cc..fbe2d1b41 100644
--- a/spec/components/pickers.jsx
+++ b/spec/components/pickers.jsx
@@ -41,6 +41,13 @@ class PickersTest extends React.Component {
           value={this.state.date2}
         />
 
+        <DatePicker
+          label='Formatted Date'
+          inputFormat={(value) => `${value.getDate()}/${value.getMonth()}/${value.getFullYear()}`}
+          onChange={this.handleChange.bind(this, 'date3')}
+          value={this.state.date3}
+        />
+
         <TimePicker
           label='Start time'
           onChange={this.handleChange.bind(this, 'time1')}

From f81056f21b6b5df5191630bb5ceb008838634250 Mon Sep 17 00:00:00 2001
From: Juan Carlos Sanchez Cardenas <jcsanchezcardenas@gmail.com>
Date: Wed, 9 Mar 2016 11:57:31 +0100
Subject: [PATCH 0387/1024] Changed the set state key to countries instead of
 value

---
 components/autocomplete/readme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/autocomplete/readme.md b/components/autocomplete/readme.md
index dfd9a70a7..12200f368 100644
--- a/components/autocomplete/readme.md
+++ b/components/autocomplete/readme.md
@@ -19,7 +19,7 @@ class AutocompleteTest extends React.Component {
   }
 
   handleChange = (value) => {
-    this.setState({value: value});
+    this.setState({countries: value});
   };
 
   render () {

From 756a3a9731b31d245e77f0056cbe4c02d1038498 Mon Sep 17 00:00:00 2001
From: Felipe Amorim <felipe.leusin@gmail.com>
Date: Wed, 9 Mar 2016 11:07:16 -0300
Subject: [PATCH 0388/1024] fixed linting errors on utils/time.js

---
 components/date_picker/DatePicker.jsx | 4 ++--
 components/utils/time.js              | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/date_picker/DatePicker.jsx b/components/date_picker/DatePicker.jsx
index fef353b74..a80f81d8e 100644
--- a/components/date_picker/DatePicker.jsx
+++ b/components/date_picker/DatePicker.jsx
@@ -9,12 +9,12 @@ class DatePicker extends React.Component {
   static propTypes = {
     className: React.PropTypes.string,
     error: React.PropTypes.string,
+    inputFormat: React.PropTypes.func,
     label: React.PropTypes.string,
     maxDate: React.PropTypes.object,
     minDate: React.PropTypes.object,
     onChange: React.PropTypes.func,
-    value: React.PropTypes.object,
-    inputFormat: React.PropTypes.func
+    value: React.PropTypes.object
   };
 
   state = {
diff --git a/components/utils/time.js b/components/utils/time.js
index 53522794a..da5f44108 100644
--- a/components/utils/time.js
+++ b/components/utils/time.js
@@ -179,7 +179,7 @@ const time = {
 
   formatDate (date) {
     return `${date.getDate()} ${time.getFullMonth(date)} ${date.getFullYear()}`;
-  },
+  }
 };
 
 export default time;

From 0b16eefabcd94609a29739a95d5c2515b4b53936 Mon Sep 17 00:00:00 2001
From: Arham Ahmed <a.arhamIT@gmail.com>
Date: Wed, 9 Mar 2016 11:52:36 -0500
Subject: [PATCH 0389/1024] fixes #369

---
 components/autocomplete/Autocomplete.jsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/components/autocomplete/Autocomplete.jsx b/components/autocomplete/Autocomplete.jsx
index e4a4fad4b..6c44250a0 100644
--- a/components/autocomplete/Autocomplete.jsx
+++ b/components/autocomplete/Autocomplete.jsx
@@ -142,9 +142,11 @@ class Autocomplete extends React.Component {
  }
 
  unselect (key, event) {
-   const values = this.values(this.props.value);
-   values.delete(key);
-   this.handleChange([...values.keys()], event);
+   if (!this.props.disabled) {
+     const values = this.values(this.props.value);
+     values.delete(key);
+     this.handleChange([...values.keys()], event);
+   }
  }
 
  renderSelected () {

From 240864f950463f8d29953ecd086dec1e497a777f Mon Sep 17 00:00:00 2001
From: Felipe Amorim <felipe.leusin@gmail.com>
Date: Wed, 9 Mar 2016 11:56:10 -0300
Subject: [PATCH 0390/1024] DatePicker autoOk prop

---
 components/date_picker/Calendar.jsx                        | 4 ++--
 components/date_picker/DatePicker.jsx                      | 2 ++
 components/date_picker/DatePickerDialog.jsx                | 6 +++++-
 components/date_picker/readme.md                           | 1 +
 components/dialog/Dialog.jsx                               | 2 +-
 .../layout/main/modules/examples/datepicker_example_1.txt  | 1 +
 spec/components/pickers.jsx                                | 7 +++++++
 7 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/components/date_picker/Calendar.jsx b/components/date_picker/Calendar.jsx
index 4e0164586..610731b5d 100644
--- a/components/date_picker/Calendar.jsx
+++ b/components/date_picker/Calendar.jsx
@@ -40,13 +40,13 @@ class Calendar extends React.Component {
   }
 
   handleDayClick = (day) => {
-    this.props.onChange(time.setDay(this.state.viewDate, day));
+    this.props.onChange(time.setDay(this.state.viewDate, day), true);
   };
 
   handleYearClick = (year) => {
     const viewDate = time.setYear(this.props.selectedDate, year);
     this.setState({viewDate});
-    this.props.onChange(viewDate);
+    this.props.onChange(viewDate, false);
   };
 
   changeViewMonth = (direction, step) => {
diff --git a/components/date_picker/DatePicker.jsx b/components/date_picker/DatePicker.jsx
index a80f81d8e..721586287 100644
--- a/components/date_picker/DatePicker.jsx
+++ b/components/date_picker/DatePicker.jsx
@@ -7,6 +7,7 @@ import time from '../utils/time';
 
 class DatePicker extends React.Component {
   static propTypes = {
+    autoOk: React.PropTypes.boolean,
     className: React.PropTypes.string,
     error: React.PropTypes.string,
     inputFormat: React.PropTypes.func,
@@ -52,6 +53,7 @@ class DatePicker extends React.Component {
           value={date}
         />
         <DatePickerDialog
+          autoOk={this.props.autoOk}
           active={this.state.active}
           className={this.props.className}
           maxDate={this.props.maxDate}
diff --git a/components/date_picker/DatePickerDialog.jsx b/components/date_picker/DatePickerDialog.jsx
index a7799b9cf..bfb824b57 100644
--- a/components/date_picker/DatePickerDialog.jsx
+++ b/components/date_picker/DatePickerDialog.jsx
@@ -8,6 +8,7 @@ import time from '../utils/time';
 class CalendarDialog extends React.Component {
   static propTypes = {
     active: React.PropTypes.bool,
+    autoOk: React.PropTypes.bool,
     className: React.PropTypes.string,
     maxDate: React.PropTypes.object,
     minDate: React.PropTypes.object,
@@ -27,12 +28,15 @@ class CalendarDialog extends React.Component {
     display: 'months'
   };
 
-  handleCalendarChange = (value) => {
+  handleCalendarChange = (value, dayClick) => {
     const state = {display: 'months', date: value};
     if (time.dateOutOfRange(value, this.props.minDate, this.props.maxDate)) {
       state.date = this.props.maxDate || this.props.minDate;
     }
     this.setState(state);
+    if (dayClick && this.props.autoOk && this.props.onSelect) {
+      this.props.onSelect(value);
+    }
   };
 
   handleSelect = (event) => {
diff --git a/components/date_picker/readme.md b/components/date_picker/readme.md
index e9c7aa03e..3eb48672c 100644
--- a/components/date_picker/readme.md
+++ b/components/date_picker/readme.md
@@ -34,6 +34,7 @@ class DatePickerTest extends React.Component {
 
 | Name          | Type    | Default         | Description|
 |:-----|:-----|:-----|:-----|
+| `autoOk`         | `boolean`        |  false      | Automatically selects a date upon clicking on a day|
 | `className`         | `String`        |             | This class will be placed at the top of the `DatePickerDialog` component so you can provide custom styles.|
 | `label`         | `String`        |             | The text string to use for the floating label element in the input component.|
 | `maxDate`         | `Date`    |                 | Date object with the maximum selectable date. |
diff --git a/components/dialog/Dialog.jsx b/components/dialog/Dialog.jsx
index a2dd644c3..3c9154ad7 100644
--- a/components/dialog/Dialog.jsx
+++ b/components/dialog/Dialog.jsx
@@ -42,8 +42,8 @@ Dialog.propTypes = {
   className: React.PropTypes.string,
   onOverlayClick: React.PropTypes.func,
   onOverlayMouseDown: React.PropTypes.func,
-  onOverlayMouseUp: React.PropTypes.func,
   onOverlayMouseMove: React.PropTypes.func,
+  onOverlayMouseUp: React.PropTypes.func,
   title: React.PropTypes.string,
   type: React.PropTypes.string
 };
diff --git a/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt b/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt
index 877bd7fb2..7776b880b 100644
--- a/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt
@@ -29,6 +29,7 @@ class DatePickerTest extends React.Component {
 
         <DatePicker
           label='Formatted Date'
+          autoOk
           inputFormat={(value) => `${value.getDate()}/${value.getMonth()}/${value.getFullYear()}`}
           onChange={this.handleChange.bind(this, 'date3')}
           value={this.state.date3}
diff --git a/spec/components/pickers.jsx b/spec/components/pickers.jsx
index fbe2d1b41..552d88b53 100644
--- a/spec/components/pickers.jsx
+++ b/spec/components/pickers.jsx
@@ -48,6 +48,13 @@ class PickersTest extends React.Component {
           value={this.state.date3}
         />
 
+        <DatePicker
+          label='Auto Picker'
+          autoOk
+          onChange={this.handleChange.bind(this, 'date4')}
+          value={this.state.date4}
+        />
+
         <TimePicker
           label='Start time'
           onChange={this.handleChange.bind(this, 'time1')}

From d2202e1a9fb7cb781f16914eee2ef773f2923fd7 Mon Sep 17 00:00:00 2001
From: Keren Chandran <keren.chandran@gmail.com>
Date: Wed, 9 Mar 2016 23:23:35 -0500
Subject: [PATCH 0391/1024] Added hint attribute to input field.

---
 components/input/Input.jsx    |  5 ++++-
 components/input/_config.scss |  1 +
 components/input/readme.md    |  2 ++
 components/input/style.scss   | 22 +++++++++++++++++++++-
 spec/components/input.jsx     |  6 +++++-
 5 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/components/input/Input.jsx b/components/input/Input.jsx
index 46c180053..ca657d2ae 100644
--- a/components/input/Input.jsx
+++ b/components/input/Input.jsx
@@ -10,6 +10,7 @@ class Input extends React.Component {
     disabled: React.PropTypes.bool,
     error: React.PropTypes.node,
     floating: React.PropTypes.bool,
+    hint: React.PropTypes.string,
     icon: React.PropTypes.any,
     label: React.PropTypes.string,
     maxLength: React.PropTypes.number,
@@ -25,6 +26,7 @@ class Input extends React.Component {
 
   static defaultProps = {
     className: '',
+    hint: '',
     disabled: false,
     floating: true,
     multiline: false,
@@ -45,7 +47,7 @@ class Input extends React.Component {
   }
 
   render () {
-    const { children, disabled, error, floating, icon,
+    const { children, disabled, error, floating, hint, icon,
             label: labelText, maxLength, multiline, type, value, ...others} = this.props;
     const length = maxLength && value ? value.length : 0;
     const labelClassName = ClassNames(style.label, {[style.fixed]: !floating});
@@ -77,6 +79,7 @@ class Input extends React.Component {
         {icon ? <FontIcon className={style.icon} value={icon} /> : null}
         <span className={style.bar}></span>
         {labelText ? <label className={labelClassName}>{labelText}</label> : null}
+        {hint ? <label className={style.hint}>{hint}</label> : null}
         {error ? <span className={style.error}>{error}</span> : null}
         {maxLength ? <span className={style.counter}>{length}/{maxLength}</span> : null}
         {children}
diff --git a/components/input/_config.scss b/components/input/_config.scss
index e3d9fb92f..fcca0284c 100644
--- a/components/input/_config.scss
+++ b/components/input/_config.scss
@@ -16,3 +16,4 @@ $input-icon-font-size: 2.4 * $unit;
 $input-icon-size: 2 * $input-icon-font-size;
 $input-icon-offset: 1.6 * $unit;
 $input-chevron-offset: .8 * $unit;
+$input-hint-opacity: 1 !default;
diff --git a/components/input/readme.md b/components/input/readme.md
index bdf748866..fe4384ef2 100644
--- a/components/input/readme.md
+++ b/components/input/readme.md
@@ -20,6 +20,7 @@ class InputTest extends React.Component {
         <Input type='text' label='Disabled field' disabled />
         <Input type='email' label='Email address' icon='email' value={this.state.email} onChange={this.handleChange.bind(this, 'email')} />
         <Input type='tel' label='Phone' name='phone' icon='phone' value={this.state.phone} onChange={this.handleChange.bind(this, 'phone')} />
+        <Input type='text' value={this.state.withHintCustomIcon} label='With Hint Text Icon' hint='Hint Text' onChange={this.handleChange.bind(this, 'withHintCustomIcon')} icon={<span>J</span>} />
       </section>
     );
   }
@@ -33,6 +34,7 @@ class InputTest extends React.Component {
 | `className`     | `String`        |`''`              | Sets a class name to give custom styles.|
 | `disabled`      | `Boolean`       | `false`         | If true, component will be disabled.|
 | `error`         | `String`        |                 | Give an error string to display under the field.|
+| `hint`      | `String`        |`''`             | The text string to use for hint text element.|
 | `icon`         | `String`        |                 | Name of an icon to use as a label for the input.|
 | `floating`     | `Boolean`       | `true`         | Indicates if the label is floating in the input field or not.|
 | `label`         | `String`        |             | The text string to use for the floating label element.|
diff --git a/components/input/style.scss b/components/input/style.scss
index f77b58967..d5fd5ad21 100644
--- a/components/input/style.scss
+++ b/components/input/style.scss
@@ -40,6 +40,9 @@
     ~ .label:not(.fixed) {
       color: $input-text-highlight-color;
     }
+    ~ .hint {
+      opacity: $input-hint-opacity;
+    }
     ~ .icon {
       color: $input-text-highlight-color;
     }
@@ -50,7 +53,7 @@
       font-size: $input-label-font-size;
     }
   }
-  &.filled ~ .label.fixed {
+  &.filled ~ .label.fixed, &.filled ~ .hint {
     display: none;
   }
 }
@@ -66,6 +69,23 @@
   transition-timing-function: $animation-curve-default;
   transition-duration: $animation-duration;
   transition-property: top, font-size, color;
+  &.fixed ~ .hint {
+    display: none
+  }
+}
+
+.hint {
+  position: absolute;
+  top: $input-padding + (1.5 * $input-field-padding);
+  left: 0;
+  font-size: $input-field-font-size;
+  line-height: $input-field-font-size;
+  color: $input-text-label-color;
+  pointer-events: none;
+  opacity: 0;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transition-property: opacity;
 }
 
 .bar {
diff --git a/spec/components/input.jsx b/spec/components/input.jsx
index 5c0315982..fadb49d0d 100644
--- a/spec/components/input.jsx
+++ b/spec/components/input.jsx
@@ -6,7 +6,9 @@ class InputTest extends React.Component {
     normal: 'Tony Stark',
     fixedLabel: '',
     withIcon: '',
-    withCustomIcon: ''
+    withCustomIcon: '',
+    withHintCustomIcon: '',
+    multilineHint: 'Long Description here'
   };
 
   handleChange = (name, value) => {
@@ -26,9 +28,11 @@ class InputTest extends React.Component {
         />
         <Input type='email' value={this.state.fixedLabel} label='Label fixed' floating={false} onChange={this.handleChange.bind(this, 'fixedLabel')} />
         <Input type='text' value='Read only' readOnly label='Phone Number' />
+        <Input type='email' value={this.state.multilineHint} label='Description' hint='Enter Description' multiline onChange={this.handleChange.bind(this, 'multilineHint')} />
         <Input type='text' label='Disabled field' disabled />
         <Input type='tel' value={this.state.withIcon} label='With icon' onChange={this.handleChange.bind(this, 'withIcon')} icon='phone' />
         <Input type='tel' value={this.state.withCustomIcon} label='With custom icon' onChange={this.handleChange.bind(this, 'withCustomIcon')} icon={<span>P</span>} />
+        <Input type='text' value={this.state.withHintCustomIcon} label='With Hint Text Icon' hint='Hint Text' onChange={this.handleChange.bind(this, 'withHintCustomIcon')} icon={<span>J</span>} />
       </section>
     );
   }

From c812d4c1761b88323e84e3224d1cbd01d382844f Mon Sep 17 00:00:00 2001
From: Tobias Bales <tobias.bales@gmail.com>
Date: Thu, 10 Mar 2016 11:09:27 +0100
Subject: [PATCH 0392/1024] Correctly handle zero as dropdown value

This is only an issue if the dropdown item with the value 0
is not the first item still better to properly handle it I think.
---
 components/dropdown/Dropdown.jsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/components/dropdown/Dropdown.jsx b/components/dropdown/Dropdown.jsx
index cb8dc3995..2020ae59d 100644
--- a/components/dropdown/Dropdown.jsx
+++ b/components/dropdown/Dropdown.jsx
@@ -52,6 +52,11 @@ class Dropdown extends React.Component {
     }
   }
 
+  valueIsPresent () {
+    const value = this.props.value;
+    return value !== null && value !== undefined && value !== '' && !Number.isNaN(value);
+  }
+
   handleDocumentClick = (event) => {
     if (this.state.active && !events.targetIsDescendant(event, ReactDOM.findDOMNode(this))) {
       this.setState({active: false});
@@ -76,7 +81,7 @@ class Dropdown extends React.Component {
   };
 
   getSelectedItem = () => {
-    if (this.props.value) {
+    if (this.valueIsPresent()) {
       for (const item of this.props.source) {
         if (item.value === this.props.value) return item;
       }

From 4dcb2d0b61086269ecdb508d723b0241c2ba6787 Mon Sep 17 00:00:00 2001
From: Keren Chandran <keren.chandran@gmail.com>
Date: Thu, 10 Mar 2016 08:45:51 -0500
Subject: [PATCH 0393/1024] Changed HTML element from label to span

---
 components/input/Input.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/input/Input.jsx b/components/input/Input.jsx
index ca657d2ae..540688c37 100644
--- a/components/input/Input.jsx
+++ b/components/input/Input.jsx
@@ -79,7 +79,7 @@ class Input extends React.Component {
         {icon ? <FontIcon className={style.icon} value={icon} /> : null}
         <span className={style.bar}></span>
         {labelText ? <label className={labelClassName}>{labelText}</label> : null}
-        {hint ? <label className={style.hint}>{hint}</label> : null}
+        {hint ? <span className={style.hint}>{hint}</span> : null}
         {error ? <span className={style.error}>{error}</span> : null}
         {maxLength ? <span className={style.counter}>{length}/{maxLength}</span> : null}
         {children}

From cc32e5a1bd590c2455eef5013bb370ee9ffd8994 Mon Sep 17 00:00:00 2001
From: Keren Chandran <keren.chandran@gmail.com>
Date: Sat, 12 Mar 2016 19:05:19 -0500
Subject: [PATCH 0394/1024] Created required behaviour for input

---
 components/input/Input.jsx    | 9 +++++++--
 components/input/_config.scss | 3 ++-
 components/input/style.scss   | 6 ++++++
 spec/components/input.jsx     | 4 ++--
 4 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/components/input/Input.jsx b/components/input/Input.jsx
index 46c180053..23832ce61 100644
--- a/components/input/Input.jsx
+++ b/components/input/Input.jsx
@@ -46,7 +46,8 @@ class Input extends React.Component {
 
   render () {
     const { children, disabled, error, floating, icon,
-            label: labelText, maxLength, multiline, type, value, ...others} = this.props;
+            label: labelText, maxLength, multiline, required,
+            type, value, ...others} = this.props;
     const length = maxLength && value ? value.length : 0;
     const labelClassName = ClassNames(style.label, {[style.fixed]: !floating});
 
@@ -76,7 +77,11 @@ class Input extends React.Component {
         {InputElement}
         {icon ? <FontIcon className={style.icon} value={icon} /> : null}
         <span className={style.bar}></span>
-        {labelText ? <label className={labelClassName}>{labelText}</label> : null}
+        {labelText ?
+          <label className={labelClassName}>
+            {labelText}
+            {required ? <span className={style.required}> * </span> : null}
+          </label> : null}
         {error ? <span className={style.error}>{error}</span> : null}
         {maxLength ? <span className={style.counter}>{length}/{maxLength}</span> : null}
         {children}
diff --git a/components/input/_config.scss b/components/input/_config.scss
index e3d9fb92f..2061d772b 100644
--- a/components/input/_config.scss
+++ b/components/input/_config.scss
@@ -10,7 +10,8 @@ $input-text-bottom-border-color: rgba($color-black, 0.12) !default;
 $input-text-highlight-color: $color-primary !default;
 $input-text-disabled-color: $input-text-bottom-border-color !default;
 $input-text-disabled-text-color: $input-text-label-color !default;
-$input-text-error-color: rgb(222, 50, 38) !default;
+$input-text-error-color: rgb(222, 230, 38) !default;
+$input-text-required-color: rgb(222, 50, 38) !default;
 $input-underline-height:  2 * $unit;
 $input-icon-font-size: 2.4 * $unit;
 $input-icon-size: 2 * $input-icon-font-size;
diff --git a/components/input/style.scss b/components/input/style.scss
index f77b58967..623e06011 100644
--- a/components/input/style.scss
+++ b/components/input/style.scss
@@ -40,6 +40,9 @@
     ~ .label:not(.fixed) {
       color: $input-text-highlight-color;
     }
+    ~ .label > .required {
+      color: $input-text-required-color;
+    }
     ~ .icon {
       color: $input-text-highlight-color;
     }
@@ -125,6 +128,9 @@
   > .counter, > .label {
     color: $input-text-error-color;
   }
+  > .label > .required {
+    color: $input-text-required-color;
+  }
 }
 
 .hidden {
diff --git a/spec/components/input.jsx b/spec/components/input.jsx
index 5c0315982..a6e26ca03 100644
--- a/spec/components/input.jsx
+++ b/spec/components/input.jsx
@@ -21,13 +21,13 @@ class InputTest extends React.Component {
         <Input
           type='text'
           value={this.state.normal}
-          label='Firstname' onChange={this.handleChange.bind(this, 'normal')}
+          label='First Name' onChange={this.handleChange.bind(this, 'normal')}
           maxLength={12}
         />
         <Input type='email' value={this.state.fixedLabel} label='Label fixed' floating={false} onChange={this.handleChange.bind(this, 'fixedLabel')} />
         <Input type='text' value='Read only' readOnly label='Phone Number' />
         <Input type='text' label='Disabled field' disabled />
-        <Input type='tel' value={this.state.withIcon} label='With icon' onChange={this.handleChange.bind(this, 'withIcon')} icon='phone' />
+        <Input type='tel' value={this.state.withIcon} required label='With icon' onChange={this.handleChange.bind(this, 'withIcon')} icon='phone' />
         <Input type='tel' value={this.state.withCustomIcon} label='With custom icon' onChange={this.handleChange.bind(this, 'withCustomIcon')} icon={<span>P</span>} />
       </section>
     );

From c2374ad29f688d0273ebe35ae5c9b68f0035b8f9 Mon Sep 17 00:00:00 2001
From: Keren Chandran <keren.chandran@gmail.com>
Date: Sat, 12 Mar 2016 19:33:18 -0500
Subject: [PATCH 0395/1024] Removed Error styling when input field is in focus

---
 components/input/style.scss | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/components/input/style.scss b/components/input/style.scss
index f77b58967..24b5fd409 100644
--- a/components/input/style.scss
+++ b/components/input/style.scss
@@ -113,14 +113,6 @@
   > .input {
     margin-top: 1px;
     border-bottom-color: $input-text-error-color;
-    &:focus {
-      ~ .label:not(.fixed) {
-        color: $input-text-error-color;
-      }
-      ~ .bar:before, ~ .bar:after {
-        background-color: $input-text-error-color;
-      }
-    }
   }
   > .counter, > .label {
     color: $input-text-error-color;

From 380da26db96c52fcd398cfa4ea17b01b392ec796 Mon Sep 17 00:00:00 2001
From: Jesse Smith <sosaucily@gmail.com>
Date: Wed, 16 Mar 2016 10:49:12 -0700
Subject: [PATCH 0396/1024] Fix #361 cancel timer when tabs component unmounts

---
 components/tabs/Tabs.jsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/components/tabs/Tabs.jsx b/components/tabs/Tabs.jsx
index fd3b1ab53..1a95c4117 100644
--- a/components/tabs/Tabs.jsx
+++ b/components/tabs/Tabs.jsx
@@ -27,6 +27,10 @@ class Tabs extends React.Component {
     this.updatePointer(nextProps.index);
   }
 
+  componentWillUnmount () {
+    clearTimeout(this.pointerTimeout);
+  }
+
   handleHeaderClick = (idx) => {
     if (this.props.onChange) this.props.onChange(idx);
   };
@@ -50,7 +54,8 @@ class Tabs extends React.Component {
   }
 
   updatePointer (idx) {
-    setTimeout(() => {
+    clearTimeout(this.pointerTimeout);
+    this.pointerTimeout = setTimeout(() => {
       const startPoint = this.refs.tabs.getBoundingClientRect().left;
       const label = this.refs.navigation.children[idx].getBoundingClientRect();
       this.setState({

From 52682c57745980e564703824b4fa0f30ed56e870 Mon Sep 17 00:00:00 2001
From: Jesse Smith <sosaucily@gmail.com>
Date: Wed, 16 Mar 2016 14:36:27 -0700
Subject: [PATCH 0397/1024] add activeClassName to tab component

---
 components/tabs/Tab.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/tabs/Tab.jsx b/components/tabs/Tab.jsx
index 954d32ec3..b7d8c3c35 100644
--- a/components/tabs/Tab.jsx
+++ b/components/tabs/Tab.jsx
@@ -5,6 +5,7 @@ import style from './style';
 class TabHeader extends React.Component {
   static propTypes = {
     active: React.PropTypes.bool,
+    activeClassName: React.PropTypes.string,
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
     hidden: React.PropTypes.bool,
@@ -36,7 +37,8 @@ class TabHeader extends React.Component {
     const className = ClassNames(style.label, {
       [style.active]: this.props.active,
       [style.hidden]: this.props.hidden,
-      [style.disabled]: this.props.disabled
+      [style.disabled]: this.props.disabled,
+      [this.props.activeClassName]: this.props.active
     }, this.props.className);
 
     return (

From a2543d4a11e7ad68134c965cd4744d5a24eeaf20 Mon Sep 17 00:00:00 2001
From: Jesse Smith <sosaucily@gmail.com>
Date: Wed, 16 Mar 2016 14:56:20 -0700
Subject: [PATCH 0398/1024] Allow disabling animated bottom border on tabs

---
 components/tabs/Tabs.jsx  | 7 +++++--
 components/tabs/readme.md | 7 ++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/components/tabs/Tabs.jsx b/components/tabs/Tabs.jsx
index fd3b1ab53..33544ff85 100644
--- a/components/tabs/Tabs.jsx
+++ b/components/tabs/Tabs.jsx
@@ -7,6 +7,7 @@ class Tabs extends React.Component {
   static propTypes = {
     children: React.PropTypes.node,
     className: React.PropTypes.string,
+    disableAnimatedBottomBorder: React.PropTypes.bool,
     index: React.PropTypes.number,
     onChange: React.PropTypes.func
   };
@@ -20,11 +21,13 @@ class Tabs extends React.Component {
   };
 
   componentDidMount () {
-    this.updatePointer(this.props.index);
+    !this.props.disableAnimatedBottomBorder &&
+      this.updatePointer(this.props.index);
   }
 
   componentWillReceiveProps (nextProps) {
-    this.updatePointer(nextProps.index);
+    !this.props.disableAnimatedBottomBorder &&
+      this.updatePointer(nextProps.index);
   }
 
   handleHeaderClick = (idx) => {
diff --git a/components/tabs/readme.md b/components/tabs/readme.md
index a93baccb5..2a55f0b14 100644
--- a/components/tabs/readme.md
+++ b/components/tabs/readme.md
@@ -39,9 +39,10 @@ This component acts as the wrapper and the main controller of the content that i
 
 | Name              | Type          | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `className`     | `String`        | `''`            | Additional class name to provide custom styling.|
-| `index`         | `Number`        | `0`             | Current <Tab> |
-| `onChange`      | `Function`      |                 | Callback function that is fired when the tab changes.
+| `className`                   | `String`        | `''`            | Additional class name to provide custom styling.|
+| `index`                       | `Number`        | `0`             | Current <Tab> |
+| `onChange`                    | `Function`      |                 | Callback function that is fired when the tab changes.|
+| `disableAnimatedBottomBorder` | `Boolean`       | `false`         | Disable the animation below the active tab
 
 ## Tab
 

From 1cda333723c56862e6b7aedb9d1971c8c4bdb51c Mon Sep 17 00:00:00 2001
From: Jesse Smith <sosaucily@gmail.com>
Date: Wed, 16 Mar 2016 14:59:20 -0700
Subject: [PATCH 0399/1024] update readme for tabs

---
 components/tabs/readme.md | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/components/tabs/readme.md b/components/tabs/readme.md
index a93baccb5..5f1506b44 100644
--- a/components/tabs/readme.md
+++ b/components/tabs/readme.md
@@ -49,9 +49,10 @@ Represent a single tab element and it should include some properties to describe
 
 | Name              | Type          | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `active`        | `Boolean`       | `false`         | If true, the current component is visible.|
-| `className`     | `String`        | `''`            | Additional class name to provide custom styling.|
-| `disabled`      | `Boolean`       | `false`         | If true, the current component is not clickable.|
-| `hidden`        | `Boolean`       | `false`         | If true, the current component is not visible.|
-| `label`         | `String`        |                 | Label text for navigation header |
-| `onActive`      | `Function`      |                 | Callback function that is fired when the tab is activated. |
+| `active`          | `Boolean`       | `false`         | If true, the current component is visible.|
+| `activeClassName` | `String`        | `''`            | Additional class name to provide custom styling for the active tab.|
+| `className`       | `String`        | `''`            | Additional class name to provide custom styling for each tab.|
+| `disabled`        | `Boolean`       | `false`         | If true, the current component is not clickable.|
+| `hidden`          | `Boolean`       | `false`         | If true, the current component is not visible.|
+| `label`           | `String`        |                 | Label text for navigation header |
+| `onActive`        | `Function`      |                 | Callback function that is fired when the tab is activated. |

From e6c5be228db186930a494dca167880284b5f63c1 Mon Sep 17 00:00:00 2001
From: Jesse Smith <sosaucily@gmail.com>
Date: Wed, 16 Mar 2016 15:21:18 -0700
Subject: [PATCH 0400/1024] fix lint issue by ammending rule

---
 .eslintrc | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/.eslintrc b/.eslintrc
index 6f9f9cd88..34a4aabbd 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -149,7 +149,9 @@
     "no-undefined": [0],
     "no-underscore-dangle": [0],
     "no-unreachable": [2],
-    "no-unused-expressions": [2],
+    "no-unused-expressions": [2, {
+      "allowShortCircuit": true
+    }],
     "no-unused-vars": [1, {
       "vars": "all",
       "args": "after-used"

From 6670e79903e0464ad7579b3ebcf0019a0ab0d035 Mon Sep 17 00:00:00 2001
From: Olivier Louvignes <olivier@mg-crea.com>
Date: Thu, 17 Mar 2016 19:57:48 +0100
Subject: [PATCH 0401/1024] feat(ListItem): add className prop support

---
 components/list/ListItem.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/components/list/ListItem.jsx b/components/list/ListItem.jsx
index afaa4f009..138f8487c 100644
--- a/components/list/ListItem.jsx
+++ b/components/list/ListItem.jsx
@@ -7,6 +7,7 @@ import style from './style';
 class ListItem extends React.Component {
   static propTypes = {
     children: React.PropTypes.any,
+    className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
     onClick: React.PropTypes.func,
     ripple: React.PropTypes.bool,
@@ -54,9 +55,11 @@ class ListItem extends React.Component {
     const {onMouseDown, to, onClick, ripple, ...other} = this.props;
     const children = this.groupChildren();
     const content = <ListItemLayout {...children} {...other}/>;
+    let className = style.listItem;
+    if (this.props.className) className += ` ${this.props.className}`;
 
     return (
-      <li className={style.listItem} onClick={this.handleClick} onMouseDown={onMouseDown}>
+      <li className={className} onClick={this.handleClick} onMouseDown={onMouseDown}>
         {to ? <a href={this.props.to}>{content}</a> : content}
         {children.ignored}
       </li>

From 1aa67d5b3ad266f28417072136e6f6be9a5a40ca Mon Sep 17 00:00:00 2001
From: Arham Ahmed <a.arhamIT@gmail.com>
Date: Sat, 19 Mar 2016 22:24:57 -0400
Subject: [PATCH 0402/1024] fixes #389

---
 components/button/IconButton.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/button/IconButton.jsx b/components/button/IconButton.jsx
index 6535d8781..401270454 100644
--- a/components/button/IconButton.jsx
+++ b/components/button/IconButton.jsx
@@ -45,7 +45,7 @@ class IconButton extends React.Component {
       className: classes,
       disabled: this.props.disabled,
       onMouseUp: this.handleMouseUp,
-      onMouseLeave: this.handleMouseUp,
+      onMouseLeave: this.handleMouseLeave,
       'data-react-toolbox': 'button'
     };
 

From 6e586a935319d78ac505b9928bc6ca6e9d01880f Mon Sep 17 00:00:00 2001
From: Patrick Jones <patrick.jones@amosstrading.com>
Date: Mon, 8 Feb 2016 16:07:12 -0600
Subject: [PATCH 0403/1024] Make drawer compliant with material design
 guidelines.

Fixes #283
---
 components/_globals.scss                      |  28 ++
 components/index.js                           |   1 +
 components/layout/Layout.jsx                  |  60 ++++
 components/layout/NavDrawer.jsx               |  47 +++
 components/layout/Panel.jsx                   |  28 ++
 components/layout/Sidebar.jsx                 |  38 +++
 components/layout/_config.scss                |  17 +
 components/layout/_mixins.scss                |  30 ++
 components/layout/index.js                    |   4 +
 components/layout/readme.md                   | 193 +++++++++++
 components/layout/style.scss                  | 318 ++++++++++++++++++
 .../layout/main/modules/components.js         |   8 +
 .../modules/examples/layout_example_1.txt     |  50 +++
 spec/components/layout.jsx                    | 157 +++++++++
 spec/root.jsx                                 |   2 +
 15 files changed, 981 insertions(+)
 create mode 100644 components/layout/Layout.jsx
 create mode 100644 components/layout/NavDrawer.jsx
 create mode 100644 components/layout/Panel.jsx
 create mode 100644 components/layout/Sidebar.jsx
 create mode 100644 components/layout/_config.scss
 create mode 100644 components/layout/_mixins.scss
 create mode 100644 components/layout/index.js
 create mode 100644 components/layout/readme.md
 create mode 100644 components/layout/style.scss
 create mode 100644 docs/app/components/layout/main/modules/examples/layout_example_1.txt
 create mode 100644 spec/components/layout.jsx

diff --git a/components/_globals.scss b/components/_globals.scss
index 53a2ac015..07d1ec873 100644
--- a/components/_globals.scss
+++ b/components/_globals.scss
@@ -53,3 +53,31 @@ $z-index-high: 100 !default;
 $z-index-normal: 1 !default;
 $z-index-low: -100 !default;
 $z-index-lower: -200 !default;
+
+
+//-- Breakpoints
+// height of app bar
+// https://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-keylines-spacing
+$standard-increment-mobile:                          (5.6 * $unit) !default;
+$standard-increment-desktop:                         (6.4 * $unit) !default;
+
+// https://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-baseline-grids
+$baseline-grid:                                      (0.8 * $unit) !default;
+$layout-gutter-width-sm:                      ($baseline-grid * 2) !default;
+$layout-gutter-width:                         ($baseline-grid * 3) !default;
+
+
+// https://www.google.com/design/spec/layout/responsive-ui.html#responsive-ui-breakpoints
+// 4 columns
+$layout-breakpoint-xxs:                               480px !default;
+// 8 columns
+$layout-breakpoint-xs:                                600px !default;
+// 12 columns
+$layout-breakpoint-sm-tablet:                         720px !default;
+$layout-breakpoint-sm:                                840px !default;
+$layout-breakpoint-md:                                960px !default;
+$layout-breakpoint-lg-tablet:                        1024px !default;
+$layout-breakpoint-lg:                               1280px !default;
+$layout-breakpoint-xl:                               1440px !default;
+$layout-breakpoint-xxl:                              1600px !default;
+$layout-breakpoint-xxxl:                             1920px !default;
diff --git a/components/index.js b/components/index.js
index 71a2fa1a0..506840c05 100644
--- a/components/index.js
+++ b/components/index.js
@@ -14,6 +14,7 @@ export Dropdown from './dropdown';
 export FontIcon from './font_icon';
 export Form from './form';
 export Input from './input';
+export { Layout, NavDrawer, Panel, Sidebar } from './layout';
 export Link from './link';
 export List from './list/List';
 export ListItem from './list/ListItem';
diff --git a/components/layout/Layout.jsx b/components/layout/Layout.jsx
new file mode 100644
index 000000000..24589e575
--- /dev/null
+++ b/components/layout/Layout.jsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import ClassNames from 'classnames';
+import style from './style';
+
+
+const Layout = (props) => {
+    const className = ClassNames(style.root, props.className);
+
+    return (
+        <div data-react-toolbox='layout' className={className}>
+            {props.children}
+        </div>
+    );
+};
+
+const ALLOWED = [
+    'Panel',
+    'NavDrawer|Panel',
+    'NavDrawer|Panel|Sidebar',
+    'Panel|Sidebar'
+];
+
+function getChildName (child) {
+    if (child.type) {
+        return child.type.name || child.type;
+    }
+    if (!child.constructor || !child.constructor.name) {
+        return 'UNKNOWN';
+    }
+    return child.constructor.name;
+}
+
+Layout.propTypes = {
+    children (props, propName, componentName) {
+        // Accept only [NavDrawer]Pane[Sidebar]
+        const children = props[propName];
+        if (React.Children.count(children) > 3) {
+            return new Error(
+                '`' + componentName + '` ' +
+                    'should have a Pane for a child, optionally preceded and/or followed by a Drawer.'
+            );
+        }
+
+        const names = React.Children.map(children, getChildName).join('|');
+
+        if (!(~ALLOWED.indexOf(names))) {
+            return new Error(
+                '`' + componentName + '` ' +
+                'should have a Panel for a child, optionally preceded by a NavDrawer and/or followed by a Sidebar.'
+            );
+        }
+    },
+    className: React.PropTypes.string
+};
+
+Layout.defaultProps = {
+    className: ''
+};
+
+export default Layout;
diff --git a/components/layout/NavDrawer.jsx b/components/layout/NavDrawer.jsx
new file mode 100644
index 000000000..6c7191222
--- /dev/null
+++ b/components/layout/NavDrawer.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import ClassNames from 'classnames';
+import style from './style';
+
+const NavDrawer = (props) => {
+
+    const rootClasses = ClassNames([style.navDrawer], {
+        [style['permanent-' + props.permanentAt]]: props.permanentAt,
+        [style.wide]: (props.width === 'wide'),
+        [style.active]: props.active,
+        [style.pinned]: props.pinned
+    }, props.className);
+
+    const drawerClasses = ClassNames(style.drawerContent, {
+        [style.scrollY]: props.scrollY
+    });
+
+    return (
+        <div data-react-toolbox='nav-drawer' className={rootClasses} onClick={props.onOverlayClick}>
+            <div data-react-toolbox='nav-drawer-scrim' className={style.scrim}>
+                <aside data-react-toolbox='nav-drawer-content' className={drawerClasses}>
+                    {props.children}
+                </aside>
+            </div>
+        </div>
+    );
+};
+
+NavDrawer.propTypes = {
+    active: React.PropTypes.bool,
+    children: React.PropTypes.any,
+    className: React.PropTypes.string,
+    onOverlayClick: React.PropTypes.func,
+    permanentAt: React.PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'xxl', 'xxxl']),
+    pinned: React.PropTypes.bool,
+    scrollY: React.PropTypes.bool,
+    width: React.PropTypes.oneOf(['normal', 'wide'])
+};
+
+NavDrawer.defaultProps = {
+    active: false,
+    className: '',
+    scrollY: false,
+    width: 'normal'
+};
+
+export default NavDrawer;
diff --git a/components/layout/Panel.jsx b/components/layout/Panel.jsx
new file mode 100644
index 000000000..4a8182b54
--- /dev/null
+++ b/components/layout/Panel.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import ClassNames from 'classnames';
+import style from './style';
+
+const Panel = (props) => {
+    const className = ClassNames(style.panel, {
+        [style.scrollY]: props.scrollY
+    }, props.className);
+
+    return (
+        <div data-react-toolbox='panel' className={className}>
+            {props.children}
+        </div>
+    );
+};
+
+Panel.propTypes = {
+    children: React.PropTypes.any,
+    className: React.PropTypes.string,
+    scrollY: React.PropTypes.bool
+};
+
+Panel.defaultProps = {
+    className: '',
+    scrollY: false
+};
+
+export default Panel;
diff --git a/components/layout/Sidebar.jsx b/components/layout/Sidebar.jsx
new file mode 100644
index 000000000..570d601fb
--- /dev/null
+++ b/components/layout/Sidebar.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import ClassNames from 'classnames';
+import style from './style';
+
+const Sidebar = (props) => {
+    const wrapperClasses = ClassNames(style.sidebar, style[`width-${props.width}`], {
+        [style.pinned]: props.pinned
+    }, props.className);
+
+    const innerClasses = ClassNames(style.sidebarContent, {
+        [style.scrollY]: props.scrollY
+    });
+
+    return (
+        <div data-react-toolbox='sidebar' className={wrapperClasses}>
+            <aside data-react-toolbox='sidebar-content' className={innerClasses}>
+                {props.children}
+            </aside>
+        </div>
+    );
+};
+
+Sidebar.propTypes = {
+    children: React.PropTypes.any,
+    className: React.PropTypes.string,
+    pinned: React.PropTypes.bool,
+    scrollY: React.PropTypes.bool,
+    width: React.PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 25, 33, 50, 66, 75, 100])
+};
+
+Sidebar.defaultProps = {
+    className: '',
+    pinned: false,
+    scrollY: false,
+    width: 5
+};
+
+export default Sidebar;
diff --git a/components/layout/_config.scss b/components/layout/_config.scss
new file mode 100644
index 000000000..63c0ef25a
--- /dev/null
+++ b/components/layout/_config.scss
@@ -0,0 +1,17 @@
+$drawer-background-color: $palette-grey-50 !default;
+$drawer-border-color: $palette-grey-300 !default;
+$drawer-text-color: $palette-grey-800 !default;
+
+$drawer-overlay-color: $color-black !default;
+$drawer-overlay-opacity: .6 !default;
+
+
+// from: https://www.google.com/design/spec/layout/structure.html#structure-side-nav
+$navigation-drawer-desktop-width:                                 5 * $standard-increment-desktop !default;
+$navigation-drawer-max-desktop-width:                             40 * $unit !default;
+// Mobile:
+// Width = Screen width − 56 dp
+// Maximum width: 320dp
+$navigation-drawer-mobile-width:                                  5 * $standard-increment-mobile !default;
+// sass doesn't like use of variable here: calc(100% - $standard-increment-mobile);
+$navigation-drawer-max-mobile-width:                              calc(100% - 5.6rem) !default;
diff --git a/components/layout/_mixins.scss b/components/layout/_mixins.scss
new file mode 100644
index 000000000..5ea572ece
--- /dev/null
+++ b/components/layout/_mixins.scss
@@ -0,0 +1,30 @@
+
+@mixin open() {
+    transition-delay: $animation-delay;
+    & > .scrim {
+        & > .drawerContent {
+            pointer-events: all;
+            transition-delay: $animation-delay;
+            transform: translateX(0);
+        }
+    }
+}
+
+@mixin permanent() {
+    @include open();
+
+    width: $navigation-drawer-desktop-width;
+    max-width: $navigation-drawer-desktop-width;
+
+    &.wide {
+        width: $navigation-drawer-max-desktop-width;
+        max-width: $navigation-drawer-max-desktop-width;
+    }
+
+    &.active {
+        & > .scrim {
+            width: 0;
+            background-color: rgba($drawer-overlay-color, 0);
+        }
+    }
+}
diff --git a/components/layout/index.js b/components/layout/index.js
new file mode 100644
index 000000000..9ece06a45
--- /dev/null
+++ b/components/layout/index.js
@@ -0,0 +1,4 @@
+export { default as Layout } from './Layout.jsx';
+export { default as Panel } from './Panel.jsx';
+export { default as NavDrawer } from './NavDrawer.jsx';
+export { default as Sidebar } from './Sidebar.jsx';
diff --git a/components/layout/readme.md b/components/layout/readme.md
new file mode 100644
index 000000000..2b74ed2e8
--- /dev/null
+++ b/components/layout/readme.md
@@ -0,0 +1,193 @@
+# Layout
+
+A Layout is a container that can hold a main content area with an optional
+navigation drawer (on the left) and/or sidebar (on the right). According to
+the [material design spec](https://www.google.com/design/spec/layout/structure.html#structure-side-nav),
+the left drawer is typically used for navigation or identity-based content,
+while the right sidebar is secondary content related to the main content.
+
+<!-- example -->
+```jsx
+import { AppBar, Checkbox, IconButton } from 'react-toolbox';
+import { Layout, NavDrawer, Panel, Sidebar } from 'react-toolbox';
+
+class LayoutTest extends React.Component {
+    state = {
+        drawerActive: false,
+        drawerPinned: false,
+        sidebarPinned: false
+    };
+
+    toggleDrawerActive = () => {
+        this.setState({ drawerActive: !this.state.drawerActive });
+    };
+
+    toggleDrawerPinned = () => {
+        this.setState({ drawerPinned: !this.state.drawerPinned });
+    }
+
+    toggleSidebar = () => {
+        this.setState({ sidebarPinned: !this.state.sidebarPinned });
+    };
+
+    render() {
+        return (
+            <Layout>
+                <NavDrawer active={this.state.drawerActive}
+                    pinned={this.state.drawerPinned} permanentAt='xxxl'
+                    onOverlayClick={ this.toggleDrawerActive }>
+                    <p>
+                        Navigation, account switcher, etc. go here.
+                    </p>
+                </NavDrawer>
+                <Panel>
+                    <AppBar><IconButton icon='menu' inverse={ true } onClick={ this.toggleDrawerActive }/></AppBar>
+                    <div style={{ flex: 1, overflowY: 'auto', padding: '1.8rem' }}>
+                        <h1>Main Content</h1>
+                        <p>Main content goes here.</p>
+                        <Checkbox label='Pin drawer' checked={this.state.drawerPinned} onChange={this.toggleDrawerPinned} />
+                        <Checkbox label='Show sidebar' checked={this.state.sidebarPinned} onChange={this.toggleSidebar} />
+                    </div>
+                </Panel>
+                <Sidebar pinned={ this.state.sidebarPinned } width={ 5 }>
+                    <div><IconButton icon='close' onClick={ this.toggleSidebar }/></div>
+                    <div style={{ flex: 1 }}>
+                        <p>Supplemental content goes here.</p>
+                    </div>
+                </Sidebar>
+            </Layout>
+        );
+    }
+}
+```
+
+<!--component-docgen-start-->
+
+## Layout
+
+The primary layout component. This acts as the main container
+that all subcomponents are placed within. The layout is typically placed
+so as to fill the entire screen, although it does not have to be.
+
+### Breakpoints and Increments
+
+The Layout's subcomponents can alter their appearance and behavior based
+on the current screen size. The layout uses the screen breakpoints described
+in the [material design spec](https://www.google.com/design/spec/layout/responsive-ui.html#responsive-ui-breakpoints),
+namely:
+
+| Width | Abreviation | Typical Device |
+|:-----|:-----|:-----|
+| 480px | `xxs` | Phone (portrait) |
+| 600px | `xs` | Small tablet, phone (landscape) |
+| 720px | `sm-tablet` | Small tablet (portrait) |
+| 840px | `sm` | Large tablet (portrait) |
+| 960px | `md` | Small tablet (landscape) |
+| 1024px | `lg-tablet` | Large tablet (landscape) |
+| 1280px | `lg` | Large tablet (landscape), desktop |
+| 1440px | `xl` | desktop |
+| 1600px | `xxl` | desktop |
+| 1920px | `xxxl` | desktop |
+
+The components also make use of [standard increments](https://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-sizing-by-increments),
+which is a unit equal to the height of the action bar. At mobile sizes (< `xs`) the increment is
+56px. On larger screens, it is 64px.
+
+### Content Area Layout
+
+The content areas of all three of the subcomponents (`NavDrawer`, `Panel`, and `Sidebar`)
+use flexbox column layouts set to fill the entire height of the containing `Layout`.
+The column layout lends itself well to the fixed header/scrolling content that will frequently
+inhabit these components. By default, these components also do not scroll content vertically
+so that you can control where scrolling occurs. (For example, see the content of the `Panel`
+in the sample.)
+
+If the column layout does not suit your needs, simply fill the content area with an element
+with `flex` set to 1, and use whatever layout you like within it.
+
+### Properties
+| Name | Type | Default | Description |
+|:-----|:-----|:-----|:-----|
+| `children` | `Nodes` |  | A `Panel`, optionally preceded by a `NavDrawer` and/or followed by a `Sidebar` |
+| `className` | `string` |  | Additional class(es) for custom styling. |
+
+## NavDrawer
+
+The [navigation drawer](https://www.google.com/design/spec/patterns/navigation-drawer.html) slides
+in from the left and usually holds [the application's main navigation](https://www.google.com/design/spec/layout/structure.html#structure-side-nav).
+The drawer's width is based on the screen size:
+
+| Breakpoint | Drawer Width | Notes |
+|:-----|:-----|:-----|
+| < `xs` | 280px or (Screen width - 85px) | whichever is smaller |
+| > `xs` | 320px | |
+| > `xs` | 400px | If property `width` is set to `wide` |
+
+The drawer can be docked to the left side of the screen or can float temporarily
+as an overlay. You can control the drawer's display manually `active` and `pinned` properties,
+and can also specify a breakpoint at which the drawer automatically becomes permanently docked.
+
+### Properties
+| Name | Type | Default | Description |
+|:-----|:-----|:-----|:-----|
+| `width` | `enum`(`'normal'`,`'wide'`) | `normal` | 320px or 400px. Only applicable above the `sm` breakpoint. |
+| `active` | `bool` | `false` | If true, the drawer will be shown as an overlay. |
+| `pinned` | `bool` | `false` | If true, the drawer will be pinned open. `pinned` takes precedence over `active`. |
+| `permanentAt` | `enum`(`'sm'`,`'md'`,`'lg'`,`'xl'`,`'xxl'`,`'xxxl'`) |  | The breakpoint at which the drawer is automatically pinned. |
+| `scrollY` | `bool` | `false` | If true, the drawer will vertically scroll all content. |
+| `onOverlayClick` | `Function`     |            | Callback function to be invoked when the overlay is clicked.|
+| `className` | `string` |  | Additional class(es) for custom styling. |
+
+## Panel
+
+The `Panel` is the main content area within a `Layout`.  It is a full-height
+flexbox column that takes up all remaining horizontal space after the `NavDrawer`
+and `Sidebar` are laid out.
+
+### Properties
+| Name | Type | Default | Description |
+|:-----|:-----|:-----|:-----|
+| `scrollY` | `bool` | `false` | If true, the panel will vertically scroll all content. |
+| `className` | `string` |  | Additional class(es) for custom styling. |
+
+## Sidebar
+
+The `Sidebar` is an extra drawer that docks to the right side of the `Layout`.
+The sidebar's width can be set either to a multiple of the "standard increment"
+(1 - 12 increments) or as a percentage of the parent `Layout` width (25%, 33%, 50%, 66%, 75%, 100%).
+Regardless of the width set, at mobile screen sizes the sidebar acts like a full-screen dialog that
+covers the entire screen (see [examples](https://www.google.com/design/spec/layout/structure.html#structure-side-nav)).
+
+### Properties
+| Name | Type | Default | Description |
+|:-----|:-----|:-----|:-----|
+| `width` | `enum`(`1`,`2`,`3`,`4`,`5`,`6`,`7`,`8`,`9`,`10`,`11`,`12`,`25`,`33`,`50`,`66`,`75`,`100`) | `5` | Width in standard increments (1-12) or percentage (25, 33, 50, 66, 75, 100) |
+| `pinned` | `bool` | `false` | If true, the sidebar will be pinned open. |
+| `scrollY` | `bool` | `false` | If true, the sidebar will vertically scroll all content. |
+| `className` | `string` |  | Additional class(es) for custom styling. |
+
+## Nesting Layouts
+
+The `Layout` is meant to be used near the top level of your application,
+so that it occupies the entire screen. However, it is possible to nest one
+layout inside another:
+
+```jsx
+<Layout>
+    <NavDrawer>[navigation here]<NavDrawer>
+    <Panel>
+        <Layout>
+            <Panel>
+                [main content here]
+            </Panel>
+            <Sidebar>
+                [supplemental info here]
+            </Sidebar>
+        </Layout>
+    </Panel>
+</Layout>
+```
+
+The main reason you would want to do something like this would be so that
+the navigation could be rendered at a high level, while the contents of the
+inner `Layout` would be controlled by react-router or something like that.
diff --git a/components/layout/style.scss b/components/layout/style.scss
new file mode 100644
index 000000000..06ac1c607
--- /dev/null
+++ b/components/layout/style.scss
@@ -0,0 +1,318 @@
+@import "http://github.com/base";
+@import "http://github.com/config";
+@import "http://github.com/mixins";
+
+.root {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: stretch;
+    overflow-y: hidden;
+    position: relative;
+
+    width: 100%;
+    height: 100%;
+
+    .navDrawer {
+        height: 100%;
+        width: 0px;
+        min-width: 0px;
+        overflow-y: hidden;
+        overflow-x: hidden;
+        transition-timing-function: $animation-curve-default;
+        transition-duration: $animation-duration;
+        transition-property: width, min-width;
+
+
+        .scrim {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            width: 0;
+            height: 100%;
+            background-color: rgba($drawer-overlay-color, 0);
+            transition: background-color $animation-duration $animation-curve-default,
+                width 10ms linear $animation-duration;
+            z-index: $z-index-highest;
+        }
+
+        .drawerContent {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            align-items: stretch;
+            overflow-x: hidden;
+            overflow-y: hidden;
+
+            @include shadow-2dp();
+            background-color: $drawer-background-color;
+            border-right: 1px solid $drawer-border-color;
+            color: $drawer-text-color;
+
+            width: $navigation-drawer-mobile-width;
+            max-width: $navigation-drawer-max-mobile-width;
+
+            pointer-events: none;
+
+            transform: translateX(-100%);
+            transition: transform $animation-duration $animation-curve-default;
+
+            &.scrollY {
+                overflow-y: auto;
+            }
+        }
+
+        &.pinned {
+            width: $navigation-drawer-mobile-width;
+            max-width: $navigation-drawer-max-mobile-width;
+
+            @include open();
+        }
+
+        &.active {
+            &:not(.pinned) {
+                .scrim {
+                    width: 100%;
+                    background-color: rgba($drawer-overlay-color, $drawer-overlay-opacity);
+                    transition: background-color $animation-duration $animation-curve-default;
+                }
+
+                @include open();
+            }
+        }
+
+        // larger than mobile width drawer
+        @media screen and (min-width: $layout-breakpoint-xs) {
+
+            &.pinned {
+                width: $navigation-drawer-desktop-width;
+                max-width: $navigation-drawer-desktop-width;
+            }
+
+            .drawerContent {
+                width: $navigation-drawer-desktop-width;
+                max-width: $navigation-drawer-desktop-width;
+            }
+
+            &.wide {
+
+                &.pinned {
+                    width: $navigation-drawer-max-desktop-width;
+                    max-width: $navigation-drawer-max-desktop-width;
+                }
+
+                .drawerContent {
+                    width: $navigation-drawer-max-desktop-width;
+                    max-width: $navigation-drawer-max-desktop-width;
+                }
+            }
+        }
+
+        // permanent screen, ignore .active and make part of layout
+        @media screen and (min-width: $layout-breakpoint-sm) {
+            &.permanent-sm {
+                @include permanent();
+            }
+        }
+
+        @media screen and (min-width: $layout-breakpoint-md) {
+            &.permanent-md {
+                @include permanent();
+            }
+        }
+
+        @media screen and (min-width: $layout-breakpoint-lg) {
+            &.permanent-lg {
+                @include permanent();
+            }
+        }
+
+        @media screen and (min-width: $layout-breakpoint-xl) {
+            &.permanent-xl {
+                @include permanent();
+            }
+        }
+
+        @media screen and (min-width: $layout-breakpoint-xxl) {
+            &.permanent-xxl {
+                @include permanent();
+            }
+        }
+
+        @media screen and (min-width: $layout-breakpoint-xxxl) {
+            &.permanent-xxxl {
+                @include permanent();
+            }
+        }
+    }
+
+    & .root {
+        .scrim {
+            z-index: $z-index-highest - 1;
+        }
+        & .root {
+            .scrim {
+                z-index: $z-index-highest - 2;
+            }
+        }
+    }
+
+    .panel {
+        flex: 1;
+        height: 100%;
+        overflow-y: hidden;
+        position: relative;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: stretch;
+
+        &.scrollY {
+            overflow-y: auto;
+        }
+    }
+
+    .sidebar {
+        height: 100%;
+        overflow-y: hidden;
+        overflow-x: hidden;
+        width: 0;
+        transition-timing-function: $animation-curve-default;
+        transition-duration: $animation-duration;
+        transition-property: width;
+
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        z-index: $z-index-highest - 1;
+
+        background-color: $drawer-background-color;
+        color: $drawer-text-color;
+
+        .sidebarContent {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            align-items: stretch;
+            height: 100%;
+
+            overflow-y: hidden;
+            &.scrollY {
+                overflow-y: auto;
+            }
+        }
+
+        $increments: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12);
+
+        @each $increment in $increments {
+            &.width-#{$increment} {
+                $mobile: $standard-increment-mobile * $increment;
+                $desktop: $standard-increment-desktop * $increment;
+
+                .sidebarContent {
+                    min-width: 100%;
+                }
+
+                &.pinned {
+                    width: 100%;
+                }
+
+                @if $increment < 10 {
+                    @media screen and (min-width: $layout-breakpoint-xs) and (orientation: landscape) {
+                        position: relative;
+                        .sidebarContent {
+                            min-width: $mobile;
+                        }
+
+                        &.pinned {
+                            width: $mobile;
+                        }
+                    }
+
+                    @media screen and (min-width: $layout-breakpoint-xs) and (orientation: portrait) {
+                        position: relative;
+                        .sidebarContent {
+                            min-width: $desktop;
+                        }
+
+                        &.pinned {
+                            width: $desktop;
+                        }
+                    }
+                }
+
+                @if $increment < 11 {
+                    @media screen and (min-width: $layout-breakpoint-sm-tablet) {
+                        position: relative;
+
+                        .sidebarContent {
+                            min-width: $desktop;
+                        }
+
+                        &.pinned {
+                            width: $desktop;
+                        }
+                    }
+                }
+
+                @media screen and (min-width: $layout-breakpoint-sm) {
+                    position: relative;
+
+                    .sidebarContent {
+                        min-width: $desktop;
+                    }
+
+                    &.pinned {
+                        width: $desktop;
+                    }
+                }
+            }
+        }
+
+
+        $percentages: (25, 33, 50, 66, 75);
+        &.width-100 {
+            position: absolute;
+
+            .sidebarContent {
+                min-width: 100%;
+            }
+
+            &.pinned {
+                width: 100%;
+            }
+        }
+        @each $pct in $percentages {
+            &.width-#{$pct} {
+                position: absolute;
+
+                .sidebarContent {
+                    min-width: 100%;
+                }
+
+                &.pinned {
+                    width: 100%;
+                }
+            }
+        }
+        @media screen and (min-width: $layout-breakpoint-sm-tablet) {
+            @each $pct in $percentages {
+                &.width-#{$pct} {
+                    position: relative;
+
+                    .sidebarContent {
+                        min-width: $pct * 1%;
+                    }
+
+                    &.pinned {
+                        width: $pct * 1%;
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/docs/app/components/layout/main/modules/components.js b/docs/app/components/layout/main/modules/components.js
index 654f2de7a..9b5a647bd 100644
--- a/docs/app/components/layout/main/modules/components.js
+++ b/docs/app/components/layout/main/modules/components.js
@@ -11,6 +11,7 @@ import Drawer from 'react-toolbox/drawer/readme';
 import Dropdown from 'react-toolbox/dropdown/readme';
 import FontIcon from 'react-toolbox/font_icon/readme';
 import Input from 'react-toolbox/input/readme';
+import Layout from 'react-toolbox/layout/readme';
 import Link from 'react-toolbox/link/readme';
 import List from 'react-toolbox/list/readme';
 import Menu from 'react-toolbox/menu/readme';
@@ -38,6 +39,7 @@ import DrawerExample1 from './examples/drawer_example_1.txt';
 import DrodpownExample1 from './examples/dropdown_example_1.txt';
 import FontIconExample1 from './examples/font_icon_example_1.txt';
 import InputExample1 from './examples/input_example_1.txt';
+import LayoutExample1 from './examples/layout_example_1.txt';
 import LinkExample1 from './examples/link_example_1.txt';
 import ListExample1 from './examples/list_example_1.txt';
 import MenuExample1 from './examples/menu_example_1.txt';
@@ -125,6 +127,12 @@ export default {
     path: '/components/input',
     examples: [InputExample1]
   },
+  layout: {
+    name: 'Layout',
+    docs: Layout,
+    path: '/components/layout',
+    examples: [LayoutExample1]
+  },
   link: {
     name: 'Link',
     docs: Link,
diff --git a/docs/app/components/layout/main/modules/examples/layout_example_1.txt b/docs/app/components/layout/main/modules/examples/layout_example_1.txt
new file mode 100644
index 000000000..0844289cc
--- /dev/null
+++ b/docs/app/components/layout/main/modules/examples/layout_example_1.txt
@@ -0,0 +1,50 @@
+class LayoutTest extends React.Component {
+    state = {
+        drawerActive: false,
+        drawerPinned: false,
+        sidebarPinned: false
+    };
+
+    toggleDrawerActive = () => {
+        this.setState({ drawerActive: !this.state.drawerActive });
+    };
+
+    toggleDrawerPinned = () => {
+        this.setState({ drawerPinned: !this.state.drawerPinned });
+    }
+
+    toggleSidebar = () => {
+        this.setState({ sidebarPinned: !this.state.sidebarPinned });
+    };
+
+    render() {
+        return (
+            <Layout>
+                <NavDrawer active={this.state.drawerActive}
+                    pinned={this.state.drawerPinned} permanentAt='xxxl'
+                    onOverlayClick={ this.toggleDrawerActive }>
+                    <p>
+                        Navigation, account switcher, etc. go here.
+                    </p>
+                </NavDrawer>
+                <Panel>
+                    <AppBar><IconButton icon='menu' inverse={ true } onClick={ this.toggleDrawerActive }/></AppBar>
+                    <div style={{ flex: 1, overflowY: 'auto', padding: '1.8rem' }}>
+                        <h1>Main Content</h1>
+                        <p>Main content goes here.</p>
+                        <Checkbox label='Pin drawer' checked={this.state.drawerPinned} onChange={this.toggleDrawerPinned} />
+                        <Checkbox label='Show sidebar' checked={this.state.sidebarPinned} onChange={this.toggleSidebar} />
+                    </div>
+                </Panel>
+                <Sidebar pinned={ this.state.sidebarPinned } width={ 5 }>
+                    <div><IconButton icon='close' onClick={ this.toggleSidebar }/></div>
+                    <div style={{ flex: 1 }}>
+                        <p>Supplemental content goes here.</p>
+                    </div>
+                </Sidebar>
+            </Layout>
+        );
+    }
+}
+
+return <LayoutTest />;
diff --git a/spec/components/layout.jsx b/spec/components/layout.jsx
new file mode 100644
index 000000000..f975c7164
--- /dev/null
+++ b/spec/components/layout.jsx
@@ -0,0 +1,157 @@
+import React from 'react';
+import { AppBar, Checkbox, Dropdown, IconButton, RadioGroup, RadioButton } from '../../components';
+import { Layout, NavDrawer, Panel, Sidebar } from '../../components';
+
+const dummyText = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.';
+
+const drawerItems = dummyText.split(/\s/).map(function (word, index) {
+    return (<li key={index}>{word}</li>);
+});
+
+const sidebarWidths = [
+    { value: 4, label: '4 incr' },
+    { value: 5, label: '5 incr' },
+    { value: 6, label: '6 incr' },
+    { value: 7, label: '7 incr' },
+    { value: 8, label: '8 incr' },
+    { value: 9, label: '9 incr' },
+    { value: 10, label: '10 incr' },
+    { value: 25, label: '25%'},
+    { value: 33, label: '33%'},
+    { value: 50, label: '50%'},
+    { value: 66, label: '66%'},
+    { value: 75, label: '75%'}
+];
+
+class LayoutTest extends React.Component {
+
+    state = {
+        permanentAt: 'lg',
+        drawerOpen: false,
+        drawerPinned: false,
+        sidebarPinned: false,
+        sidebarWidth: 5,
+        loremIpsums: 1
+    };
+
+    toggleDrawer = (event) => {
+        event.stopPropagation();
+        this.setState({ drawerOpen: !this.state.drawerOpen });
+    };
+
+    toggleDrawerPinned = () => {
+        this.setState({ drawerPinned: !this.state.drawerPinned });
+    };
+
+    changeDrawerPermanentAt = (value) => {
+        this.setState({ permanentAt: value });
+    };
+
+    toggleSidebar = (value) => {
+        this.setState({ sidebarPinned: (value === true) });
+    };
+
+    changeSidebarWidth = (value) => {
+        this.setState({ sidebarWidth: value });
+    };
+
+    fewer = (event) => {
+        event.preventDefault();
+        this.setState({ loremIpsums: Math.max(0, this.state.loremIpsums - 1) });
+    };
+
+    more = (event) => {
+        event.preventDefault();
+        this.setState({ loremIpsums: this.state.loremIpsums + 1 });
+    };
+
+    render () {
+
+        const rng = Array.from(new Array(this.state.loremIpsums), (x, i) => i);
+
+        return (
+            <section>
+                <h5>Layout</h5>
+                <div style={{ width: '100%', height: '60rem', margin: '1.8rem 0' }}>
+                    <Layout>
+                        <NavDrawer active={this.state.drawerOpen} pinned={this.state.drawerPinned} permanentAt={this.state.permanentAt} onOverlayClick={this.toggleDrawer}>
+                            <AppBar>
+                                <h5>Drawer</h5>
+                            </AppBar>
+                            <ul style={{ listStyle: 'none', overflowY: 'auto', flex: 1, padding: '1.6rem' }}>
+                                {drawerItems}
+                            </ul>
+                        </NavDrawer>
+                        <Panel>
+                            <AppBar>
+                                <IconButton icon='menu' inverse onClick={this.toggleDrawer}/>
+                            </AppBar>
+                            <div style={{ flex: 1, overflowY: 'auto' }}>
+                                <div style={{ display: 'flex', flexDirection: 'row' }}>
+                                    <section style={{ margin: '1.8rem'}}>
+                                        <h5>NavDrawer State</h5>
+                                        <p>Drawer becomes permanent when window is....</p>
+                                        <RadioGroup name='permanentAt' value={this.state.permanentAt} onChange={this.changeDrawerPermanentAt}>
+                                          <RadioButton label='Small' value='sm'/>
+                                          <RadioButton label='Medium' value='md' />
+                                          <RadioButton label='Large' value='lg' />
+                                          <RadioButton label='Extra Large' value='xl' />
+                                          <RadioButton label='Never' value={null} />
+                                        </RadioGroup>
+                                        <Checkbox label='Pin drawer' checked={this.state.drawerPinned} onChange={this.toggleDrawerPinned} />
+                                    </section>
+
+                                    <section style={{ margin: '1.8rem'}}>
+                                        <h5>Sidebar State</h5>
+                                        <RadioGroup name='sidebarPinned' value={this.state.sidebarPinned} onChange={this.toggleSidebar}>
+                                            <RadioButton label='Pinned' value />
+                                            <RadioButton label='Unpinned' value={false} />
+                                        </RadioGroup>
+                                        <h5>Sidebar Width</h5>
+                                            <Dropdown
+                                                auto
+                                                onChange={this.changeSidebarWidth}
+                                                source={sidebarWidths}
+                                                value={this.state.sidebarWidth}
+                                              />
+                                    </section>
+                                </div>
+
+                                <section style={{ margin: '1.8rem' }}>
+                                    <h5>Scrollable Content</h5>
+                                    <p>
+                                        The center pane should scroll independently from
+                                        the sides. Show
+                                        [<a href='#' onClick={this.fewer}>-</a>]
+                                        {`${this.state.loremIpsums}`}
+                                        [<a href='#' onClick={this.more}>+</a>] paragraph(s) below this one.
+                                    </p>
+                                    {rng.map((x, i) => <p key={i}>{dummyText}</p>)}
+                                </section>
+                            </div>
+                        </Panel>
+                        <Sidebar pinned={this.state.sidebarPinned} width={Number(this.state.sidebarWidth)}>
+                            <div><IconButton icon='close' onClick={this.toggleSidebar}/></div>
+                            <div style={{ flex: 1, margin: '1.8rem' }}>
+                                <h5>Sidebar</h5>
+                                <p>
+                                    Sidebar content should be secondary to the main content on a page.
+                                </p>
+                                <p>
+                                    The width of the sidebar can be set either in <em>increments</em>
+                                    (where 1 increment = height of the app bar) or in percentages.
+                                </p>
+                                <p>
+                                    As per the spec, the right sidebar expands to cover the entire
+                                    screen at small screen sizes.
+                                </p>
+                            </div>
+                        </Sidebar>
+                    </Layout>
+                </div>
+            </section>
+        );
+    }
+}
+
+export default LayoutTest;
diff --git a/spec/root.jsx b/spec/root.jsx
index 033a9c6ef..6517331b0 100644
--- a/spec/root.jsx
+++ b/spec/root.jsx
@@ -13,6 +13,7 @@ import Drawer from './components/drawer';
 import Dropdown from './components/dropdown';
 import IconMenu from './components/icon_menu';
 import Input from './components/input';
+import Layout from './components/layout';
 import List from './components/list';
 import Menu from './components/menu';
 import Pickers from './components/pickers';
@@ -53,6 +54,7 @@ const Root = () => (
     <Dropdown />
     <IconMenu />
     <Input />
+    <Layout />
     <List />
     <Menu />
     <Pickers />

From 04c7b04ec6e12831c647582ef2bc5219a5ea5978 Mon Sep 17 00:00:00 2001
From: Felipe Amorim <felipe.leusin@gmail.com>
Date: Sun, 20 Mar 2016 18:27:36 -0300
Subject: [PATCH 0404/1024] allows to close dialog (and all overlays) when
 pressing esc

---
 components/dialog/Dialog.jsx   |  2 ++
 components/dialog/readme.md    |  1 +
 components/overlay/Overlay.jsx | 19 ++++++++++++++++++-
 spec/components/dialog.jsx     |  1 +
 4 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/components/dialog/Dialog.jsx b/components/dialog/Dialog.jsx
index 3c9154ad7..ea415174e 100644
--- a/components/dialog/Dialog.jsx
+++ b/components/dialog/Dialog.jsx
@@ -21,6 +21,7 @@ const Dialog = (props) => {
       onMouseDown={props.onOverlayMouseDown}
       onMouseUp={props.onOverlayMouseUp}
       onMouseMove={props.onOverlayMouseMove}
+      onEscKeyDown={props.onOverlayEscKeyDown}
     >
       <div data-react-toolbox='dialog' className={className}>
         <section role='body' className={style.body}>
@@ -41,6 +42,7 @@ Dialog.propTypes = {
   children: React.PropTypes.node,
   className: React.PropTypes.string,
   onOverlayClick: React.PropTypes.func,
+  onOverlayEscKeyDown: React.PropTypes.func,
   onOverlayMouseDown: React.PropTypes.func,
   onOverlayMouseMove: React.PropTypes.func,
   onOverlayMouseUp: React.PropTypes.func,
diff --git a/components/dialog/readme.md b/components/dialog/readme.md
index 6d569622a..14283bd82 100644
--- a/components/dialog/readme.md
+++ b/components/dialog/readme.md
@@ -44,5 +44,6 @@ class DialogTest extends React.Component {
 | `onOverlayMouseDown` | `Function` |             | Callback called when the mouse button is pressed on the overlay. |
 | `onOverlayMouseUp` | `Function` |               | Callback called when the mouse button is released over the overlay. |
 | `onOverlayMouseMove` | `Function` |             | Callback called when the mouse is moving over the overlay. |
+| `onOverlayEscKeyDown` | `Function` |             | Callback called when the ESC is pressed with the overlay active. |
 | `title`         | `String`        |                 | The text string to use as standar title of the dialog.|
 | `type`          | `String`        |  `normal`       | Used to determine the size of the dialog. It can be `small`, `normal` or `large`. |
diff --git a/components/overlay/Overlay.jsx b/components/overlay/Overlay.jsx
index c60d31463..4e012b63b 100644
--- a/components/overlay/Overlay.jsx
+++ b/components/overlay/Overlay.jsx
@@ -9,7 +9,8 @@ class Overlay extends React.Component {
     children: React.PropTypes.node,
     className: React.PropTypes.string,
     invisible: React.PropTypes.bool,
-    onClick: React.PropTypes.func
+    onClick: React.PropTypes.func,
+    onEscKeyDown: React.PropTypes.func
   };
 
   static defaultProps = {
@@ -22,15 +23,31 @@ class Overlay extends React.Component {
     this.node.setAttribute('data-react-toolbox', 'overlay');
     this.app.appendChild(this.node);
     this.handleRender();
+    if (this.props.active) {
+      this.escKeyListener = document.body.addEventListener('keydown', this.handleEscKey.bind(this));
+    }
   }
 
   componentDidUpdate () {
     this.handleRender();
+    if (this.props.active && !this.escKeyListener) {
+      this.escKeyListener = document.body.addEventListener('keydown', this.handleEscKey.bind(this));
+    }
   }
 
   componentWillUnmount () {
     ReactDOM.unmountComponentAtNode(this.node);
     this.app.removeChild(this.node);
+    if (this.escKeyListener) {
+      document.body.removeEventListener('keydown', this.handleEscKey)
+      this.escKeyListener = null;
+    }
+  }
+
+  handleEscKey (e) {
+    if (this.props.active && this.props.onEscKeyDown && e.which == 27) {
+      this.props.onEscKeyDown(e);
+    }
   }
 
   handleRender () {
diff --git a/spec/components/dialog.jsx b/spec/components/dialog.jsx
index 34328c0ae..e70b811ab 100644
--- a/spec/components/dialog.jsx
+++ b/spec/components/dialog.jsx
@@ -30,6 +30,7 @@ class DialogTest extends React.Component {
             active={this.state.active}
             title="Use Google's location service?"
             onOverlayClick={this.handleToggle}
+            onOverlayEscKeyDown={this.handleToggle}
           >
             <p>Let Google help apps <strong>determine location</strong>. This means sending anonymous location data to Google, even when no apps are running.</p>
             <DialogChild />

From 19249d87562c0bc30c26197a0e0e3a4d77887f9b Mon Sep 17 00:00:00 2001
From: Keren Chandran <keren.chandran@gmail.com>
Date: Sun, 20 Mar 2016 17:35:40 -0400
Subject: [PATCH 0405/1024] Forgot to add required attribute to actual input
 element

---
 components/input/Input.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/input/Input.jsx b/components/input/Input.jsx
index 9e073c5c3..0c1a20ab9 100644
--- a/components/input/Input.jsx
+++ b/components/input/Input.jsx
@@ -69,6 +69,7 @@ class Input extends React.Component {
       ref: 'input',
       role: 'input',
       disabled,
+      required,
       type,
       value,
       maxLength

From db752d2266ed176c2830ada01f543d05a0a4acd1 Mon Sep 17 00:00:00 2001
From: Felipe Amorim <felipe.leusin@gmail.com>
Date: Sun, 20 Mar 2016 18:49:11 -0300
Subject: [PATCH 0406/1024] (feat) renamed to onEscKeyDown and fixed linting
 errors

---
 components/dialog/Dialog.jsx   | 4 ++--
 components/dialog/readme.md    | 2 +-
 components/overlay/Overlay.jsx | 4 ++--
 spec/components/dialog.jsx     | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/dialog/Dialog.jsx b/components/dialog/Dialog.jsx
index ea415174e..6cd57799f 100644
--- a/components/dialog/Dialog.jsx
+++ b/components/dialog/Dialog.jsx
@@ -21,7 +21,7 @@ const Dialog = (props) => {
       onMouseDown={props.onOverlayMouseDown}
       onMouseUp={props.onOverlayMouseUp}
       onMouseMove={props.onOverlayMouseMove}
-      onEscKeyDown={props.onOverlayEscKeyDown}
+      onEscKeyDown={props.onEscKeyDown}
     >
       <div data-react-toolbox='dialog' className={className}>
         <section role='body' className={style.body}>
@@ -41,8 +41,8 @@ Dialog.propTypes = {
   active: React.PropTypes.bool,
   children: React.PropTypes.node,
   className: React.PropTypes.string,
+  onEscKeyDown: React.PropTypes.func,
   onOverlayClick: React.PropTypes.func,
-  onOverlayEscKeyDown: React.PropTypes.func,
   onOverlayMouseDown: React.PropTypes.func,
   onOverlayMouseMove: React.PropTypes.func,
   onOverlayMouseUp: React.PropTypes.func,
diff --git a/components/dialog/readme.md b/components/dialog/readme.md
index 14283bd82..570e83ac2 100644
--- a/components/dialog/readme.md
+++ b/components/dialog/readme.md
@@ -44,6 +44,6 @@ class DialogTest extends React.Component {
 | `onOverlayMouseDown` | `Function` |             | Callback called when the mouse button is pressed on the overlay. |
 | `onOverlayMouseUp` | `Function` |               | Callback called when the mouse button is released over the overlay. |
 | `onOverlayMouseMove` | `Function` |             | Callback called when the mouse is moving over the overlay. |
-| `onOverlayEscKeyDown` | `Function` |             | Callback called when the ESC is pressed with the overlay active. |
+| `onEscKeyDown` | `Function` |             | Callback called when the ESC is pressed with the overlay active. |
 | `title`         | `String`        |                 | The text string to use as standar title of the dialog.|
 | `type`          | `String`        |  `normal`       | Used to determine the size of the dialog. It can be `small`, `normal` or `large`. |
diff --git a/components/overlay/Overlay.jsx b/components/overlay/Overlay.jsx
index 4e012b63b..3856ce02c 100644
--- a/components/overlay/Overlay.jsx
+++ b/components/overlay/Overlay.jsx
@@ -39,13 +39,13 @@ class Overlay extends React.Component {
     ReactDOM.unmountComponentAtNode(this.node);
     this.app.removeChild(this.node);
     if (this.escKeyListener) {
-      document.body.removeEventListener('keydown', this.handleEscKey)
+      document.body.removeEventListener('keydown', this.handleEscKey);
       this.escKeyListener = null;
     }
   }
 
   handleEscKey (e) {
-    if (this.props.active && this.props.onEscKeyDown && e.which == 27) {
+    if (this.props.active && this.props.onEscKeyDown && e.which === 27) {
       this.props.onEscKeyDown(e);
     }
   }
diff --git a/spec/components/dialog.jsx b/spec/components/dialog.jsx
index e70b811ab..b9ac2c4c7 100644
--- a/spec/components/dialog.jsx
+++ b/spec/components/dialog.jsx
@@ -30,7 +30,7 @@ class DialogTest extends React.Component {
             active={this.state.active}
             title="Use Google's location service?"
             onOverlayClick={this.handleToggle}
-            onOverlayEscKeyDown={this.handleToggle}
+            onEscKeyDown={this.handleToggle}
           >
             <p>Let Google help apps <strong>determine location</strong>. This means sending anonymous location data to Google, even when no apps are running.</p>
             <DialogChild />

From acde309b3b9a4683c49cff3fc6b05b98fb7117b6 Mon Sep 17 00:00:00 2001
From: Lucas Correia <lucas.correia@ftrack.com>
Date: Tue, 22 Mar 2016 14:25:26 +0100
Subject: [PATCH 0407/1024] Add default statements to color variables

This is necessary for them to be configurable via toolbox-loader
---
 components/autocomplete/_config.scss |  8 ++++----
 components/card/_config.scss         |  2 +-
 components/date_picker/_config.scss  | 10 +++++-----
 components/dropdown/_config.scss     |  8 ++++----
 components/list/_config.scss         |  2 +-
 components/menu/_config.scss         |  4 ++--
 components/table/_config.scss        |  6 +++---
 components/tabs/_config.scss         |  2 +-
 components/time_picker/_config.scss  | 12 ++++++------
 9 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/components/autocomplete/_config.scss b/components/autocomplete/_config.scss
index 277d4f1b1..ccd8a81da 100644
--- a/components/autocomplete/_config.scss
+++ b/components/autocomplete/_config.scss
@@ -1,9 +1,9 @@
-$autocomplete-color-primary-contrast: $color-primary-contrast;
-$autocomplete-color-primary: $color-primary;
+$autocomplete-color-primary-contrast: $color-primary-contrast !default;
+$autocomplete-color-primary: $color-primary !default;
 $autocomplete-overflow-max-height: 45vh;
-$autocomplete-suggestion-active-background: $palette-grey-200;
+$autocomplete-suggestion-active-background: $palette-grey-200 !default;
 $autocomplete-suggestion-padding: $unit;
-$autocomplete-suggestions-background: $color-white;
+$autocomplete-suggestions-background: $color-white !default;
 $autocomplete-value-border-radius: .2 * $unit;
 $autocomplete-value-margin: $unit * .25 $unit * .5 $unit * .25 0;
 $autocomplete-value-padding: $unit * .5 $unit * .75;
diff --git a/components/card/_config.scss b/components/card/_config.scss
index 3b142a0e4..7483abecb 100644
--- a/components/card/_config.scss
+++ b/components/card/_config.scss
@@ -1,6 +1,6 @@
 $card-color-white: $color-white !default;
 $card-text-overlay: rgba($color-black, 0.35) !default;
-$card-background-color: $card-color-white;
+$card-background-color: $card-color-white !default;
 $card-padding-sm: .8 * $unit;
 $card-padding: 1.6 * $unit;
 $card-padding-lg: 2 * $unit;
diff --git a/components/date_picker/_config.scss b/components/date_picker/_config.scss
index 17e909456..857dd3665 100644
--- a/components/date_picker/_config.scss
+++ b/components/date_picker/_config.scss
@@ -1,6 +1,6 @@
-$datepicker-primary: $color-primary;
-$datepicker-primary-contrast: $color-primary-contrast;
-$datepicker-primary-dark: $color-primary-dark;
+$datepicker-primary: $color-primary !default;
+$datepicker-primary-contrast: $color-primary-contrast !default;
+$datepicker-primary-dark: $color-primary-dark !default;
 $datepicker-primary-color: $datepicker-primary !default;
 $datepicker-primary-hover-color: rgba($datepicker-primary, 0.20) !default;
 $datepicker-primary-contrast-color: $datepicker-primary-contrast !default;
@@ -14,8 +14,8 @@ $datepicker-day-font-size: 5 * $unit;
 $datepicker-day-line-height: 4 * $unit;
 $datepicker-year-font-size: $font-size-small;
 
-$calendar-primary: $color-primary;
-$calendar-primary-contrast: $color-primary-contrast;
+$calendar-primary: $color-primary !default;
+$calendar-primary-contrast: $color-primary-contrast !default;
 $calendar-primary-color: $calendar-primary !default;
 $calendar-primary-contrast-color: $calendar-primary-contrast !default;
 $calendar-primary-hover-color: rgba($calendar-primary, 0.21) !default;
diff --git a/components/dropdown/_config.scss b/components/dropdown/_config.scss
index 4aea80a20..9fab84376 100644
--- a/components/dropdown/_config.scss
+++ b/components/dropdown/_config.scss
@@ -1,6 +1,6 @@
-$dropdown-color-white: $color-white;
-$dropdown-color-primary: $color-primary;
-$dropdown-color-primary-contrast: $color-primary-contrast;
-$dropdown-value-hover-background: $palette-grey-200;
+$dropdown-color-white: $color-white !default;
+$dropdown-color-primary: $color-primary !default;
+$dropdown-color-primary-contrast: $color-primary-contrast !default;
+$dropdown-value-hover-background: $palette-grey-200 !default;
 $dropdown-overflow-max-height: 45vh;
 $dropdown-value-border-radius: .2 * $unit;
diff --git a/components/list/_config.scss b/components/list/_config.scss
index bb7604146..3fef370a1 100644
--- a/components/list/_config.scss
+++ b/components/list/_config.scss
@@ -7,7 +7,7 @@ $list-subheader-font-weight: 500;
 $list-divider-height: .1 * $unit;
 $list-item-min-height: 4.8 * $unit;
 $list-item-min-height-legend: 7.2 * $unit;
-$list-item-hover-color: $palette-grey-200;
+$list-item-hover-color: $palette-grey-200 !default;
 $list-item-legend-margin-top: .3 * $unit;
 $list-item-icon-font-size: 2.4 * $unit;
 $list-item-icon-size: 1.8 * $unit;
diff --git a/components/menu/_config.scss b/components/menu/_config.scss
index 05a5c6d03..ca1f986f6 100644
--- a/components/menu/_config.scss
+++ b/components/menu/_config.scss
@@ -1,10 +1,10 @@
 $menu-expand-duration: .3s !default;
 $menu-fade-duration: .2s !default;
 $menu-ripple-delay: .3s !default;
-$menu-background-color: $color-white;
+$menu-background-color: $color-white !default;
 $menu-padding: .8 * $unit 0;
 $menu-outline-border-radius: .2 * $unit;
-$menu-item-hover-background: $palette-grey-200;
+$menu-item-hover-background: $palette-grey-200 !default;
 $menu-item-selected-background: transparent !default;
 $menu-item-icon-font-size: 2.4 * $unit;
 $menu-item-icon-size: 1.6 * $menu-item-icon-font-size;
diff --git a/components/table/_config.scss b/components/table/_config.scss
index 07e90ec3f..d08114f08 100644
--- a/components/table/_config.scss
+++ b/components/table/_config.scss
@@ -1,5 +1,5 @@
 $table-row-height: 48px;
-$table-row-divider: solid 1px rgba(0,0,0,.12);
+$table-row-divider: solid 1px rgba(0,0,0,.12) !default;
 $table-row-offset: 1.8 * $unit;
-$table-row-highlight: #eee;
-$table-text-color: #757575;
+$table-row-highlight: #eee !default;
+$table-text-color: #757575 !default;
diff --git a/components/tabs/_config.scss b/components/tabs/_config.scss
index 64f02c950..29c4e9432 100644
--- a/components/tabs/_config.scss
+++ b/components/tabs/_config.scss
@@ -3,7 +3,7 @@ $tab-label-h-padding: 1.2 * $unit;
 $tab-label-height: 4.8 * $unit;
 $tab-text-height: 1.4 * $unit;
 $tab-label-v-padding: ($tab-label-height - $tab-text-height) / 2;
-$tab-navigation-border-color: $color-divider;
+$tab-navigation-border-color: $color-divider !default;
 $tab-pointer-color: $color-primary !default;
 $tab-pointer-height: .2 * $unit;
 $tab-text: $color-black !default;
diff --git a/components/time_picker/_config.scss b/components/time_picker/_config.scss
index 568202839..3ae81a875 100644
--- a/components/time_picker/_config.scss
+++ b/components/time_picker/_config.scss
@@ -1,9 +1,9 @@
 $timepicker-header-font-size: 5.2 * $unit;
 $timepicker-header-padding: $unit;
 $timepicker-ampm-font-size: 1.6 * $unit;
-$timepicker-primary: $color-primary;
-$timepicker-primary-contrast: $color-primary-contrast;
-$timepicker-primary-dark: $color-primary-dark;
+$timepicker-primary: $color-primary !default;
+$timepicker-primary-contrast: $color-primary-contrast !default;
+$timepicker-primary-dark: $color-primary-dark !default;
 $timepicker-primary-color: $timepicker-primary !default;
 $timepicker-primary-hover-color: rgba($timepicker-primary, 0.20) !default;
 $timepicker-primary-contrast-color: $timepicker-primary-contrast !default;
@@ -13,9 +13,9 @@ $timepicker-ampm-width: 4 * $unit;
 $timepicker-dialog-width: 30 * $unit;
 
 $clock-padding: 1.5 * $unit 2 * $unit;
-$clock-primary: $color-primary;
-$clock-primary-contrast: $color-primary-contrast;
-$clock-primary-dark: $color-primary-dark;
+$clock-primary: $color-primary !default;
+$clock-primary-contrast: $color-primary-contrast !default;
+$clock-primary-dark: $color-primary-dark !default;
 $clock-primary-color: $clock-primary !default;
 $clock-primary-hover-color: rgba($clock-primary, 0.20) !default;
 $clock-primary-contrast-color: $clock-primary-contrast !default;

From bef1adf8fc861e2b2b4fda1afa6d7784481e6528 Mon Sep 17 00:00:00 2001
From: Keren Chandran <keren.chandran@gmail.com>
Date: Tue, 22 Mar 2016 21:52:32 -0400
Subject: [PATCH 0408/1024] Renders Selected Item when multiple=false

---
 components/autocomplete/Autocomplete.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/autocomplete/Autocomplete.jsx b/components/autocomplete/Autocomplete.jsx
index 6c44250a0..6541aac5a 100644
--- a/components/autocomplete/Autocomplete.jsx
+++ b/components/autocomplete/Autocomplete.jsx
@@ -110,7 +110,8 @@ class Autocomplete extends React.Component {
    const query = this.state.query.toLowerCase().trim() || '';
    const values = this.values();
    for (const [key, value] of this.source()) {
-     if (!values.has(key) && value.toLowerCase().trim().startsWith(query)) {
+     if (value.toLowerCase().trim().startsWith(query) &&
+         (!values.has(key) || !this.props.multiple)) {
        suggest.set(key, value);
      }
    }

From 9dcd1d675063d434540e6a7929fe9a235b9c8673 Mon Sep 17 00:00:00 2001
From: Tomasz Kasperek <kasperekt@gmail.com>
Date: Wed, 23 Mar 2016 12:35:24 +0100
Subject: [PATCH 0409/1024] Introduce close() method

---
 components/dropdown/Dropdown.jsx |  6 ++++++
 spec/components/dropdown.jsx     | 12 ++++++++++++
 2 files changed, 18 insertions(+)

diff --git a/components/dropdown/Dropdown.jsx b/components/dropdown/Dropdown.jsx
index 2020ae59d..806215d55 100644
--- a/components/dropdown/Dropdown.jsx
+++ b/components/dropdown/Dropdown.jsx
@@ -57,6 +57,12 @@ class Dropdown extends React.Component {
     return value !== null && value !== undefined && value !== '' && !Number.isNaN(value);
   }
 
+  close = () => {
+    if (this.state.active) {
+      this.setState({active: false});
+    }
+  }
+
   handleDocumentClick = (event) => {
     if (this.state.active && !events.targetIsDescendant(event, ReactDOM.findDOMNode(this))) {
       this.setState({active: false});
diff --git a/spec/components/dropdown.jsx b/spec/components/dropdown.jsx
index 5351f555f..01f454adf 100644
--- a/spec/components/dropdown.jsx
+++ b/spec/components/dropdown.jsx
@@ -33,6 +33,12 @@ class DropdownTest extends React.Component {
     );
   }
 
+  handleFocus = (dropdowns) => {
+    dropdowns.forEach((dropdown) => {
+      this.refs[dropdown].close();
+    });
+  }
+
   render () {
     return (
       <section>
@@ -41,6 +47,8 @@ class DropdownTest extends React.Component {
 
         <Dropdown
           label="Country"
+          ref="dropdown1"
+          onFocus={this.handleFocus.bind(this, ['dropdown3', 'dropdown4'])}
           onChange={this.handleChange.bind(this, 'dropdown1')}
           source={countries}
           template={this.customDropdownItem}
@@ -49,6 +57,8 @@ class DropdownTest extends React.Component {
 
         <Dropdown
           label="Country"
+          ref="dropdown4"
+          onFocus={this.handleFocus.bind(this, ['dropdown1', 'dropdown4'])}
           onChange={this.handleChange.bind(this, 'dropdown4')}
           source={countries}
           value={this.state.dropdown4}
@@ -56,7 +66,9 @@ class DropdownTest extends React.Component {
 
         <Dropdown
           disabled
+          ref="dropdown3"
           label="Country"
+          onFocus={this.handleFocus.bind(this, ['dropdown1', 'dropdown4'])}
           onChange={this.handleChange.bind(this, 'dropdown3')}
           source={countries}
         />

From 1d5970f42fe549a3e2e4bed8481e3bb1564a454a Mon Sep 17 00:00:00 2001
From: Maksim Karpychev <kodermax@gmail.com>
Date: Wed, 23 Mar 2016 17:20:29 +0300
Subject: [PATCH 0410/1024] this is correct

---
 components/date_picker/DatePicker.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/date_picker/DatePicker.jsx b/components/date_picker/DatePicker.jsx
index 721586287..43f89abad 100644
--- a/components/date_picker/DatePicker.jsx
+++ b/components/date_picker/DatePicker.jsx
@@ -7,7 +7,7 @@ import time from '../utils/time';
 
 class DatePicker extends React.Component {
   static propTypes = {
-    autoOk: React.PropTypes.boolean,
+    autoOk: React.PropTypes.bool,
     className: React.PropTypes.string,
     error: React.PropTypes.string,
     inputFormat: React.PropTypes.func,

From f3ffd85ff6ff9940b8c0ff86630e082d1df0684e Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 7 Mar 2016 09:53:50 +0100
Subject: [PATCH 0411/1024] 0.14.2 release

---
 package.json | 78 ++++++++++++++++++++++++++++------------------------
 1 file changed, 42 insertions(+), 36 deletions(-)

diff --git a/package.json b/package.json
index 90053f5e9..785d2a9d8 100644
--- a/package.json
+++ b/package.json
@@ -1,56 +1,43 @@
 {
   "name": "react-toolbox",
-  "version": "0.14.1",
-  "homepage": "http://www.react-toolbox.com/",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
-  "author": "React Toolbox Team (http://github.com/react-toolbox)",
+  "homepage": "http://www.react-toolbox.com/",
+  "version": "0.14.2",
+  "main": "./lib",
+  "author": {
+    "name": "React Toolbox Team",
+    "url": "http://github.com/react-toolbox"
+  },
   "contributors": [
     {
       "name": "Javi Jimenez Villar",
-      "url": "http://soyjavi.com/",
-      "email": "javi.jimenez.villar@gmail.com"
+      "email": "javi.jimenez.villar@gmail.com",
+      "url": "http://soyjavi.com/"
     },
     {
       "name": "Javi Velasco Arjona",
-      "url": "http://javivelasco.com/",
-      "email": "javier.velasco86@gmail.com"
+      "email": "javier.velasco86@gmail.com",
+      "url": "http://javivelasco.com/"
     }
   ],
-  "main": "./lib",
-  "scripts": {
-    "start": "cross-env NODE_ENV=development UV_THREADPOOL_SIZE=100 node ./server",
-    "lint": "eslint ./ --ext .js,.jsx",
-    "babel": "babel ./components --out-dir ./lib",
-    "sass": "cpx './components/**/*.scss' ./lib",
-    "build": "cross-env NODE_ENV=production npm run babel && npm run sass",
-    "clean": "rimraf ./lib",
-    "prebuild": "npm run clean",
-    "prepublish": "npm run build",
-    "test": "cross-env NODE_ENV=test karma start",
-    "test:watch": "cross-env NODE_ENV=test karma start --no-single-run",
-    "release": "bumped release",
-    "patch": "bumped release patch"
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/react-toolbox/react-toolbox.git"
   },
   "bugs": {
     "url": "https://github.com/react-toolbox/react-toolbox/issues",
     "email": "issues@react-toolbox.com"
   },
   "keywords": [
+    "components",
+    "material design",
     "react",
     "react-component",
-    "material design",
-    "toolkit",
-    "components"
+    "toolkit"
   ],
-  "license": "MIT",
-  "peerDependencies": {
-    "classnames": "^2.2.0",
-    "react": "^0.14",
-    "react-dom": "^0.14.0",
-    "react-addons-css-transition-group": "^0.14.0",
-    "normalize.css": "^3.0.3"
+  "dependencies": {
+    "classnames": "^2.2.1"
   },
-  "typings": "./react-toolbox.d.ts",
   "devDependencies": {
     "autoprefixer": "^6.2.1",
     "babel-cli": "^6.3.17",
@@ -103,8 +90,27 @@
     "webpack-dev-middleware": "^1.4.0",
     "webpack-hot-middleware": "^2.6.0"
   },
-  "repository": "github:react-toolbox/react-toolbox",
-  "dependencies": {
-    "classnames": "^2.2.1"
-  }
+  "scripts": {
+    "babel": "babel ./components --out-dir ./lib",
+    "build": "cross-env NODE_ENV=production npm run babel && npm run sass",
+    "clean": "rimraf ./lib",
+    "lint": "eslint ./ --ext .js,.jsx",
+    "patch": "bumped release patch",
+    "prebuild": "npm run clean",
+    "prepublish": "npm run build",
+    "release": "bumped release",
+    "sass": "cpx './components/**/*.scss' ./lib",
+    "start": "cross-env NODE_ENV=development UV_THREADPOOL_SIZE=100 node ./server",
+    "test": "cross-env NODE_ENV=test karma start",
+    "test:watch": "cross-env NODE_ENV=test karma start --no-single-run"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "classnames": "^2.2.0",
+    "normalize.css": "^3.0.3",
+    "react": "^0.14",
+    "react-addons-css-transition-group": "^0.14.0",
+    "react-dom": "^0.14.0"
+  },
+  "typings": "./react-toolbox.d.ts"
 }

From b182c091650dbb11fcf1ae2cef6c1e941210ea40 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 24 Mar 2016 18:21:26 +0100
Subject: [PATCH 0412/1024] 0.15.0 release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 785d2a9d8..a18e53df3 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "react-toolbox",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "homepage": "http://www.react-toolbox.com/",
-  "version": "0.14.2",
+  "version": "0.15.0",
   "main": "./lib",
   "author": {
     "name": "React Toolbox Team",

From 9d2fe8fd9816f4cd0cf8ee2a7ee6f01b562e8652 Mon Sep 17 00:00:00 2001
From: Keren Chandran <keren.chandran@gmail.com>
Date: Thu, 24 Mar 2016 20:31:36 -0400
Subject: [PATCH 0413/1024] Fixed Object Single Selection Bug

---
 components/autocomplete/Autocomplete.jsx | 2 +-
 spec/components/autocomplete.jsx         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/autocomplete/Autocomplete.jsx b/components/autocomplete/Autocomplete.jsx
index 6541aac5a..8d2e7d617 100644
--- a/components/autocomplete/Autocomplete.jsx
+++ b/components/autocomplete/Autocomplete.jsx
@@ -39,7 +39,7 @@ class Autocomplete extends React.Component {
 
  componentWillReceiveProps (nextProps) {
    if (!this.props.multiple) {
-     this.setState({query: nextProps.value});
+     this.setState({query: this.query(nextProps.value)});
    }
  }
 
diff --git a/spec/components/autocomplete.jsx b/spec/components/autocomplete.jsx
index c255d40a8..a2b11484d 100644
--- a/spec/components/autocomplete.jsx
+++ b/spec/components/autocomplete.jsx
@@ -33,9 +33,9 @@ class AutocompleteTest extends React.Component {
 
         <Autocomplete
           label="Choose a country"
+          hint="Elements up to you..."
           multiple={false}
           onChange={this.handleSimpleChange}
-          placeholder="Elements up to you..."
           source={countriesArray}
           value={this.state.simple}
         />

From 233bb670bb1ef3c67a2db63bc09227c1e9eb2493 Mon Sep 17 00:00:00 2001
From: Keren Chandran <keren.chandran@gmail.com>
Date: Fri, 25 Mar 2016 07:50:40 -0400
Subject: [PATCH 0414/1024] Fixed grammar mistake on component page. Updated
 Sidebar's CSS

---
 docs/app/components/layout/main/components/navigation.scss | 4 +++-
 docs/app/components/layout/main/modules/components.md      | 4 ++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/docs/app/components/layout/main/components/navigation.scss b/docs/app/components/layout/main/components/navigation.scss
index 31fc841f5..539312349 100644
--- a/docs/app/components/layout/main/components/navigation.scss
+++ b/docs/app/components/layout/main/components/navigation.scss
@@ -14,7 +14,9 @@
 }
 
 .item {
-  padding: $navigation-v-padding $navigation-h-padding;
+  a > span{
+    padding: $navigation-v-padding $navigation-h-padding;
+  }
   > span > span {
     font-size: $font-size-small;
     font-weight: $font-weight-semi-bold;
diff --git a/docs/app/components/layout/main/modules/components.md b/docs/app/components/layout/main/modules/components.md
index 675a940b2..cf55b6f90 100644
--- a/docs/app/components/layout/main/modules/components.md
+++ b/docs/app/components/layout/main/modules/components.md
@@ -1,7 +1,7 @@
 # React Toolbox Components
 
-React Toolbox is a library of [React](http://facebook.github.io/react/) Components based on [Google's Material Design specification](https://www.google.com/design/spec/material-design/introduction.html). The main purpose of this documentation is to explore each of the components and to learn how to use them. To make the best possible experience and to experiment with the components properties and methods, we've created a playground to try components live.
+React Toolbox is a library of [React](http://facebook.github.io/react/) Components based on [Google's Material Design specification](https://www.google.com/design/spec/material-design/introduction.html). The main purpose of this documentation is to explore each of the components and learn how to use them. To make the best possible experience and to experiment with the components' properties and methods, we've created a playground to try the components live.
 
-On the top right side of the screen you will see a rounded button with a code icon. It opens a the playground with a small in-browser editor and an area to render what you type in real time. Inside the documentation of each component you will see one or multiple example code boxes. Each of them can include a button to open the given code in the playground.
+On the top right side of the screen you will see a round button with a code icon. It opens a playground with a small in-browser editor and an area to render what you type in real time. Inside the documentation of each component you will see one or multiple example code boxes. Each of them can include a button to open the given code in the playground.
 
 Enjoy and remember that [feedback](https://github.com/react-toolbox/react-toolbox/issues) is really appreciated.

From 84946681f02e9ce5cd88bfe6fec6338895cd6044 Mon Sep 17 00:00:00 2001
From: Keren Chandran <keren.chandran@gmail.com>
Date: Fri, 25 Mar 2016 08:12:57 -0400
Subject: [PATCH 0415/1024] Sorted Appbar's properties. Updated Autocomplete's
 doc and example

---
 components/app_bar/readme.md                  |  2 +-
 components/autocomplete/readme.md             | 34 +++++++--------
 .../examples/autocomplete_example_1.txt       | 43 +++++++++++++------
 3 files changed, 48 insertions(+), 31 deletions(-)

diff --git a/components/app_bar/readme.md b/components/app_bar/readme.md
index 5cf04c9c2..6e41073c3 100644
--- a/components/app_bar/readme.md
+++ b/components/app_bar/readme.md
@@ -20,5 +20,5 @@ Coming soon, the `AppBar` component will support arbitrary content attributes fo
 | Name          | Type    | Default  | Description|
 |:-----|:-----|:-----|:-----|
 | `className` | `String`  | `''`     | Set a class for the root component.|
-| `flat`      | `Bool`    | `false`  | If true, the AppBar shows a shadow.|
 | `fixed`     | `Bool`    | `false`  | Determine if the bar should have position `fixed` or `relative`.|
+| `flat`      | `Bool`    | `false`  | If true, the AppBar shows a shadow.|
diff --git a/components/autocomplete/readme.md b/components/autocomplete/readme.md
index 12200f368..5859b7ec1 100644
--- a/components/autocomplete/readme.md
+++ b/components/autocomplete/readme.md
@@ -1,20 +1,20 @@
 # Autocomplete
 
-An input field with a set of predeterminated labeled values. When it's focused it shows a list of hints that are filtered by label as the user types. They can be simple or multiple depending on the amount of values that can be selected. The opening direction is determined at opening time depending on the current position.
+An input field with a set of predeterminated labeled values. When it's focused it shows a list of options that are filtered by label as the user types. They can be simple or multiple depending on the amount of values that can be selected. The opening direction is determined by its current position at opening time.
 
 <!-- example -->
 ```jsx
 import Autocomplete from 'react-toolbox/lib/autocomplete';
 
 const source = {
-  'ES-es': 'Spain', 
-  'TH-th': 'Thailand', 
-  'EN-gb': 'England', 
+  'ES-es': 'Spain',
+  'TH-th': 'Thailand',
+  'EN-gb': 'England',
   'EN-en': 'USA'
 };
 
 class AutocompleteTest extends React.Component {
-  state = { 
+  state = {
     countries: ['ES-es', 'TH-th']
   }
 
@@ -38,16 +38,16 @@ class AutocompleteTest extends React.Component {
 
 ## Properties
 
-| Name              | Type          | Default         | Description|
+| Name           | Type                   | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `className`     | `String`      | `''`            | Sets a class to style of the Component.|
-| `direction`    | `String`       |  `auto`        | Determines the opening direction. It can be `auto`, `top` or `bottom`. |
-| `disabled`      | `Bool`        |  `false`         | If true, component will be disabled.|
-| `error`         | `String`      |         | Sets the error string for the internal input element.|
-| `label`         | `String`      |         | The text string to use for the floating label element.|
-| `multiple`      | `Bool`        | `true`          | If true, component can hold multiple values.|
-| `onChange`      | `Function`    |                 | Callback function that is fired when the components's value changes.|
-| `source`    | `Object` or `Array`   |           | Object of key/values or array representing all items suggested. |
-| `value`         | `String` or `Array`    |        | Value or array of values currently selected component.|
-
-Additional properties will be passed to the input element so you can use `name`, `type`... etc.
+| `className`    | `String`               | `''`            | Sets a class to style of the Component.|
+| `direction`    | `String`               |  `auto`         | Determines the opening direction. It can be `auto`, `top` or `bottom`.|
+| `disabled`     | `Bool`                 |  `false`        | If true, component will be disabled.|
+| `error`        | `String`               |                 | Sets the error string for the internal input element.|
+| `label`        | `String`               |                 | The text string to use for the floating label element.|
+| `multiple`     | `Bool`                 | `true`          | If true, component can hold multiple values.|
+| `onChange`     | `Function`             |                 | Callback function that is fired when the components's value changes.|
+| `source`       | `Object` or `Array`    |                 | Object of key/values or array representing all items suggested. |
+| `value`        | `String` or `Array`    |                 | Value or array of values currently selected component.|
+
+Additional properties will be passed to the Input Component so you can use `hint`, `name` ... etc.
diff --git a/docs/app/components/layout/main/modules/examples/autocomplete_example_1.txt b/docs/app/components/layout/main/modules/examples/autocomplete_example_1.txt
index a4b93a82e..41a96580a 100644
--- a/docs/app/components/layout/main/modules/examples/autocomplete_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/autocomplete_example_1.txt
@@ -1,24 +1,41 @@
-const source = {'ES-es': 'Spain', 'TH-th': 'Thailand', 'EN-gb': 'England', 'EN-en': 'USA'};
+const countriesArray = ['Spain', 'England', 'USA', 'Thailand', 'Tongo', 'Slovenia'];
+const countriesObject = {'ES-es': 'Spain', 'TH-th': 'Thailand', 'EN-gb': 'England', 'EN-en': 'USA'};
 
 class AutocompleteTest extends React.Component {
   state = {
-    countries: ['ES-es', 'TH-th']
-  }
+    simple: 'Spain',
+    multiple: ['ES-es', 'TH-th']
+  };
 
-  handleChange = (value) => {
-    this.setState({countries: value});
+  handleSimpleChange = (value) => {
+    this.setState({simple: value});
+  };
+
+  handleMultipleChange = (value) => {
+    this.setState({multiple: value});
   };
 
   render () {
     return (
-      <Autocomplete
-        direction="down"
-        label="Choose countries"
-        name="countries"
-        onChange={this.handleChange}
-        source={source}
-        value={this.state.countries}
-      />
+      <div>
+        <Autocomplete
+          direction="down"
+          onChange={this.handleMultipleChange}
+          label="Choose countries"
+          source={countriesObject}
+          value={this.state.multiple}
+        />
+
+        <Autocomplete
+          direction="down"
+          label="Choose a country"
+          hint="You can only choose one..."
+          multiple={false}
+          onChange={this.handleSimpleChange}
+          source={countriesArray}
+          value={this.state.simple}
+        />
+      </div>
     );
   }
 }

From d3fcaef4c953921ec84c20b410a93d191bb858e1 Mon Sep 17 00:00:00 2001
From: Keren Chandran <keren.chandran@gmail.com>
Date: Fri, 25 Mar 2016 08:34:47 -0400
Subject: [PATCH 0416/1024] Updated Avatar readme and example

---
 components/avatar/readme.md                        | 14 +++++++-------
 .../main/modules/examples/avatar_example_1.txt     |  1 +
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/components/avatar/readme.md b/components/avatar/readme.md
index 34ca7ca3d..c7a8b64b3 100644
--- a/components/avatar/readme.md
+++ b/components/avatar/readme.md
@@ -1,6 +1,6 @@
 # Avatar
 
-Avatars can be used to represent people. For personal avatars, offer personalization options. As users may choose not to personalize an avatar, provide delightful defaults. When used with a specific logo, avatars can also be used to represent brand
+Avatars can be used to represent people. This offer users the ability to personalize their avatar or provide delightful defaults. When used with a specific logo, avatars can also be used to represent brand.
 
 <!-- example -->
 ```jsx
@@ -25,10 +25,10 @@ const AvatarTest = () => (
 
 ## Properties
 
-| Name      | Type      | Default         | Description|
+| Name          | Type                    | Default     | Description|
 |:-----|:-----|:-----|:-----|
-| `children`    | `Node`   | | Children for the avatar. You can pass an SVG for a custom icon or, for example, an image.|
-| `className` | `String`  | `''` | Set a class to style the Component.|
-| `icon`  | `String` or `Element` |  | A key to identify an Icon from Material Design Icons or a custom Icon Element.|
-| `image`      | `String` or `Element`  |  | An image source or an image element. |
-| `title`  | `String`  | `false` | A title for the image. If there is image, the first letter will be displayed as avatar. |
+| `children`    | `Node`                  |             | Children for the avatar. You can pass an SVG for a custom icon or, for example, an image.|
+| `className`   | `String`                | `''`        | Set a class to style the Component.|
+| `icon`        | `String` or `Element`   |             | A key to identify an Icon from Material Design Icons or a custom Icon Element.|
+| `image`       | `String` or `Element`   |             | An image source or an image element. |
+| `title`       | `String`                | `''`        | A title for the image. If no image is provided, the first letter will be displayed as the avatar. |
diff --git a/docs/app/components/layout/main/modules/examples/avatar_example_1.txt b/docs/app/components/layout/main/modules/examples/avatar_example_1.txt
index 73464d251..294c9c41d 100644
--- a/docs/app/components/layout/main/modules/examples/avatar_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/avatar_example_1.txt
@@ -7,6 +7,7 @@ const GithubIcon = () => (
 const AvatarTest = () => (
   <div>
     <Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />
+    <Avatar icon={<GithubIcon />}/>
     <Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
     <Avatar title="Javier" image="https://placeimg.com/80/80/animals"/>
     <Avatar style={{backgroundColor: 'yellowgreen'}}><GithubIcon /></Avatar>

From b5f21234c798c94164c9a297ff1898ef43fc1c8e Mon Sep 17 00:00:00 2001
From: Keren Chandran <keren.chandran@gmail.com>
Date: Fri, 25 Mar 2016 09:20:24 -0400
Subject: [PATCH 0417/1024] Updated Button and Checkbox doc

---
 components/button/readme.md   | 39 +++++++++++++++++++----------------
 components/checkbox/readme.md | 16 +++++++-------
 2 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/components/button/readme.md b/components/button/readme.md
index 5def51952..60c6947d3 100644
--- a/components/button/readme.md
+++ b/components/button/readme.md
@@ -1,6 +1,6 @@
 # Button
 
-A [button](https://www.google.com/design/spec/components/buttons.html) clearly communicates what action will occur when the user touches it. It consists of text, an image, or both, designed in accordance with your app’s color theme.
+A [Button](https://www.google.com/design/spec/components/buttons.html) clearly communicates what action will occur when the user touches it. It consists of text, an image, or both, designed in accordance with your app’s color theme.
 
 <!-- example -->
 ```jsx
@@ -32,23 +32,26 @@ const TestButtons = () => (
 
 ## Properties
 
-| Name      | Type      | Default         | Description|
+| Name              | Type            | Default     | Description|
 |:-----|:-----|:-----|:-----|
-| `accent`    | `Boolean`   | `false` | Indicates if the button should have accent color.|
-| `className` | `String`  | `''` | Set a class to style the Component.|
-| `disabled`  | `Boolean` | `false` | If true, component will be disabled.|
-| `flat`      | `Boolean`  | `false` | If true, the button will have a flat look. |
-| `floating`  | `Boolean`  | `false` | If true, the button will have a floating look. |
-| `icon`      | `String`  |  | Value of the icon (See icon component). |
-| `inverse`    | `Boolean`  |  | If true, the neutral colors are inverted. Useful to put a button over a dark background. |
-| `label`     | `String`  |  | The text string to use for the name of the button.|
-| `mini`  | `Boolean` | `false`  | To be used with floating button. If true the button will be smaller.|
-| `neutral`  | `Boolean` | `true`  | Set it to `false` if you don't want the neutral styles to be included.|
-| `primary`  | `false` | `false` | Indicates if the button should have primary color.|
-| `raised`   | `Boolean`  | `false` | If true, the button will have a raised look. |
-| `ripple`  | `Boolean`  | `true`    | If true, component will have a ripple effect on click.|
-
-By default it will have neutral colors and a flat aspect even though the `flat` property is `false` by default. Also, some properties exclude others, for example a button cannot be `flat` and `raised` at the same time. 
+| `accent`          | `Boolean`       | `false`     | Indicates if the button should have accent color.|
+| `className`       | `String`        | `''`        | Set a class to style the Component.|
+| `disabled`        | `Boolean`       | `false`     | If true, component will be disabled.|
+| `flat`            | `Boolean`       | `false`     | If true, the button will have a flat look. |
+| `floating`        | `Boolean`       | `false`     | If true, the button will have a floating look. |
+| `href`            | `String`        |             | Creates a link for the button. |
+| `icon`            | `Any`           |             | Value of the icon (See Font Icon Component). |
+| `inverse`         | `Boolean`       |             | If true, the neutral colors are inverted. Useful to put a button over a dark background. |
+| `label`           | `String`        |             | The text string to use for the name of the button.|
+| `mini`            | `Boolean`       | `false`     | To be used with floating button. If true, the button will be smaller.|
+| `neutral`         | `Boolean`       | `true`      | Set it to `false` if you don't want the neutral styles to be included.|
+| `onMouseLeave`    | `Function`      |             | Fires after the mouse leaves the Component.|
+| `onMouseUp`       | `Function`      |             | Fires after the mouse is released from the Component.|
+| `primary`         | `Boolean`       | `false`     | Indicates if the button should have primary color.|
+| `raised`          | `Boolean`       | `false`     | If true, the button will have a raised look. |
+| `ripple`          | `Boolean`       | `true`      | If true, component will have a ripple effect on click.|
+
+By default it will have neutral colors and a flat aspect even though the `flat` property is `false` by default. Also, some properties exclude others, for example a button cannot be `flat` and `raised` at the same time.
 
 The `Button` component also accept children so if you want to provide a custom component and text instead of a `label` and `icon` you can do it too. Just check the examples.
 
@@ -56,4 +59,4 @@ The `Button` component also accept children so if you want to provide a custom c
 
 Icons are appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star to an item. They are best located in app bars, toolbars, action buttons or toggles.
 
-We provide an `IconButton` component bundled with `Button` component. They share a similar API excluding aspect properties.
+We provide an `IconButton` component bundled with `Button` component. They share a similar API excluding onMouseLeave, onMouseUp and aspect properties.
diff --git a/components/checkbox/readme.md b/components/checkbox/readme.md
index 9c7d409c9..7208d8742 100644
--- a/components/checkbox/readme.md
+++ b/components/checkbox/readme.md
@@ -41,14 +41,14 @@ class TestCheckbox extends React.Component {
 
 | Name              | Type          | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `checked`       | `Bool`        |   `false`        | Value for the checkbox, can be `true` or `false`. |
-| `className`     | `String`        |     `''`            | Sets a class to give customized styles to the checkbox field.|
-| `disabled`         | `Bool`        |     `false`          | If true, the checkbox shown as disabled and is not possible to modify it.|
-| `label`         | `String`        |              | Text label to attach next to the checkbox element.|
-| `name`       | `String`       | `false`         | The name of the field to set in the input checkbox.|
-| `onBlur`       | `Function`       |                | Callback called when the checkbox is blurred.|
-| `onChange`       | `Function`       |                | Callback called when the checkbox value is changed.|
-| `onFocus`       | `Function`       |                | Callback called when the checkbox is focused |
+| `checked`       | `Boolean`       | `false`         | Value for the checkbox, can be `true` or `false`. |
+| `className`     | `String`        | `''`            | Sets a class to give customized styles to the checkbox field.|
+| `disabled`      | `Boolean`       | `false`         | If true, the checkbox shown as disabled and cannot be modified.|
+| `label`         | `String`        |                 | Text label to attach next to the checkbox element.|
+| `name`          | `String`        | `false`         | The name of the field to set in the input checkbox.|
+| `onBlur`        | `Function`      |                 | Callback called when the checkbox is blurred.|
+| `onChange`      | `Function`      |                 | Callback called when the checkbox value is changed.|
+| `onFocus`       | `Function`      |                 | Callback called when the checkbox is focused |
 
 ## Methods
 

From 4917bf741b024b000db23589ed07433ebf4ed6b2 Mon Sep 17 00:00:00 2001
From: Keren Chandran <keren.chandran@gmail.com>
Date: Fri, 25 Mar 2016 09:43:57 -0400
Subject: [PATCH 0418/1024] Sorted Date Picker Properties

---
 components/button/readme.md      |  2 +-
 components/date_picker/readme.md | 19 +++++++++----------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/components/button/readme.md b/components/button/readme.md
index 60c6947d3..d7651c694 100644
--- a/components/button/readme.md
+++ b/components/button/readme.md
@@ -1,6 +1,6 @@
 # Button
 
-A [Button](https://www.google.com/design/spec/components/buttons.html) clearly communicates what action will occur when the user touches it. It consists of text, an image, or both, designed in accordance with your app’s color theme.
+A [button](https://www.google.com/design/spec/components/buttons.html) clearly communicates what action will occur when the user touches it. It consists of text, an image, or both, designed in accordance with your app’s color theme.
 
 <!-- example -->
 ```jsx
diff --git a/components/date_picker/readme.md b/components/date_picker/readme.md
index 3eb48672c..1f38edee4 100644
--- a/components/date_picker/readme.md
+++ b/components/date_picker/readme.md
@@ -32,14 +32,13 @@ class DatePickerTest extends React.Component {
 
 ## Properties
 
-| Name          | Type    | Default         | Description|
+| Name            | Type            | Default       | Description|
 |:-----|:-----|:-----|:-----|
-| `autoOk`         | `boolean`        |  false      | Automatically selects a date upon clicking on a day|
-| `className`         | `String`        |             | This class will be placed at the top of the `DatePickerDialog` component so you can provide custom styles.|
-| `label`         | `String`        |             | The text string to use for the floating label element in the input component.|
-| `maxDate`         | `Date`    |                 | Date object with the maximum selectable date. |
-| `minDate`         | `Date`    |                 | Date object with the minimum selectable date. |
-| `onChange`       | `Function`       |                | Callback called when the picker value is changed.|
-| `placeholder`     | `String`        |             | The text string to use like a input placeholder.|
-| `value`         | `Date`    |                 | Date object with the currently selected date. |
-| `inputFormat`         | `Function`    |                 | Function to format the date displayed on the input. |
+| `autoOk`        | `Boolean`       | `false`       | Automatically selects a date upon clicking on a day|
+| `className`     | `String`        |               | This class will be placed at the top of the `DatePickerDialog` component so you can provide custom styles.|
+| `inputFormat`   | `Function`      |               | Function to format the date displayed on the input. |
+| `label`         | `String`        |               | The text string to use for the floating label element in the input component.|
+| `maxDate`       | `Date`          |               | Date object with the maximum selectable date. |
+| `minDate`       | `Date`          |               | Date object with the minimum selectable date. |
+| `onChange`      | `Function`      |               | Callback called when the picker value is changed.|
+| `value`         | `Date`          |               | Date object with the currently selected date. |

From 94280ce85a783f373b1c0944405e174143bcf69b Mon Sep 17 00:00:00 2001
From: Keren Chandran <keren.chandran@gmail.com>
Date: Fri, 25 Mar 2016 09:53:24 -0400
Subject: [PATCH 0419/1024] Updated Input doc and Example

---
 components/input/readme.md                    | 38 +++++++++----------
 .../main/modules/examples/input_example_1.txt |  3 +-
 2 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/components/input/readme.md b/components/input/readme.md
index fe4384ef2..89b57575b 100644
--- a/components/input/readme.md
+++ b/components/input/readme.md
@@ -7,7 +7,7 @@ Although we are calling them Inputs they actually correspond to Material Design
 import Input from 'react-toolbox/lib/input';
 
 class InputTest extends React.Component {
-  state = { name: '', phone: '', email: '' };
+  state = { name: '', phone: '', email: '', hint: '' };
 
   handleChange = (name, value) => {
     this.setState({...this.state, [name]: value});
@@ -20,7 +20,7 @@ class InputTest extends React.Component {
         <Input type='text' label='Disabled field' disabled />
         <Input type='email' label='Email address' icon='email' value={this.state.email} onChange={this.handleChange.bind(this, 'email')} />
         <Input type='tel' label='Phone' name='phone' icon='phone' value={this.state.phone} onChange={this.handleChange.bind(this, 'phone')} />
-        <Input type='text' value={this.state.withHintCustomIcon} label='With Hint Text Icon' hint='Hint Text' onChange={this.handleChange.bind(this, 'withHintCustomIcon')} icon={<span>J</span>} />
+        <Input type='text' value={this.state.hint} label='Required Field' hint='With Hint' required onChange={this.handleChange.bind(this, 'hint')} icon={<span>J</span>} />
       </section>
     );
   }
@@ -29,24 +29,24 @@ class InputTest extends React.Component {
 
 ## Properties
 
-| Name              | Type          | Default         | Description|
+| Name            | Type          | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `className`     | `String`        |`''`              | Sets a class name to give custom styles.|
-| `disabled`      | `Boolean`       | `false`         | If true, component will be disabled.|
-| `error`         | `String`        |                 | Give an error string to display under the field.|
-| `hint`      | `String`        |`''`             | The text string to use for hint text element.|
-| `icon`         | `String`        |                 | Name of an icon to use as a label for the input.|
-| `floating`     | `Boolean`       | `true`         | Indicates if the label is floating in the input field or not.|
-| `label`         | `String`        |             | The text string to use for the floating label element.|
-| `maxLength`     | `number`       |             |Specifies the maximum number of characters allowed in the component.|
-| `multiline`     | `Boolean`       | `false`        | If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.|
-| `onBlur`        | `Function`      |                 | Callback function that is fired when components is blured.|
-| `onChange`      | `Function`      |                 | Callback function that is fired when the components's value changes.|
-| `onFocus`       | `Function`      |                 | Callback function that is fired when components is focused.|
-| `onKeyPress`    | `Function`      |                 | Callback function that is fired when a key is pressed.|
-| `required`      | `Boolean`       | `false`         | If true, the html input has a required value.|
-| `type`          | `String`        | `text`        | Type of the input element. It can be a valid HTML5 input type|
-| `value`         | `String`        |              | Current value of the input element.|
+| `className`     | `String`      | `''`            | Sets a class name to give custom styles.|
+| `disabled`      | `Boolean`     | `false`         | If true, component will be disabled.|
+| `error`         | `Node`        |                 | Give an error node to display under the field.|
+| `floating`      | `Boolean`     | `true`          | Indicates if the label is floating in the input field or not.|
+| `hint`          | `String`      | `''`            | The text string to use for hint text element.|
+| `icon`          | `Any`         |                 | Name of an icon to use as a label for the input.|
+| `label`         | `String`      |                 | The text string to use for the floating label element.|
+| `maxLength`     | `Number`      |                 |Specifies the maximum number of characters allowed in the component.|
+| `multiline`     | `Boolean`     | `false`         | If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.|
+| `onBlur`        | `Function`    |                 | Callback function that is fired when component is blured.|
+| `onChange`      | `Function`    |                 | Callback function that is fired when the component's value changes.|
+| `onFocus`       | `Function`    |                 | Callback function that is fired when component is focused.|
+| `onKeyPress`    | `Function`    |                 | Callback function that is fired when a key is pressed.|
+| `required`      | `Boolean`     | `false`         | If true, the html input has a required attribute.|
+| `type`          | `String`      | `text`          | Type of the input element. It can be a valid HTML5 input type|
+| `value`         | `Any`         |                 | Current value of the input element.|
 
 ## Methods
 
diff --git a/docs/app/components/layout/main/modules/examples/input_example_1.txt b/docs/app/components/layout/main/modules/examples/input_example_1.txt
index 9043f00f8..9cc017dc9 100644
--- a/docs/app/components/layout/main/modules/examples/input_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/input_example_1.txt
@@ -1,5 +1,5 @@
 class InputTest extends React.Component {
-  state = { name: '', phone: '', email: '' };
+  state = { name: '', phone: '', email: '', hint: '' };
 
   handleChange = (name, value) => {
     this.setState({...this.state, [name]: value});
@@ -12,6 +12,7 @@ class InputTest extends React.Component {
         <Input type='text' label='Disabled field' disabled />
         <Input type='email' label='Email address' icon='email' value={this.state.email} onChange={this.handleChange.bind(this, 'email')} />
         <Input type='tel' label='Phone' name='phone' icon='phone' value={this.state.phone} onChange={this.handleChange.bind(this, 'phone')} />
+        <Input type='text' value={this.state.hint} label='Required Field' hint='With Hint' required onChange={this.handleChange.bind(this, 'hint')} icon={<span>J</span>} />
       </section>
     );
   }

From 6b81440425c00a5ad3d30d5cc81e42652804729f Mon Sep 17 00:00:00 2001
From: Keren Chandran <keren.chandran@gmail.com>
Date: Fri, 25 Mar 2016 10:11:13 -0400
Subject: [PATCH 0420/1024] Updated Dialog Example and sorted properties.

---
 components/dialog/readme.md                   | 30 +++++++++++--------
 .../modules/examples/dialog_example_1.txt     |  3 +-
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/components/dialog/readme.md b/components/dialog/readme.md
index 570e83ac2..ebf3299b7 100644
--- a/components/dialog/readme.md
+++ b/components/dialog/readme.md
@@ -24,7 +24,13 @@ class DialogTest extends React.Component {
     return (
       <div>
         <Button label='Show my dialog' onClick={this.handleToggle} />
-        <Dialog actions={this.actions} active={this.state.active} title='My awesome dialog'>
+        <Dialog
+          actions={this.actions}
+          active={this.state.active}
+          onEscKeyDown={this.handleToggle}
+          onOverlayClick={this.handleToggle}
+          title='My awesome dialog'
+        >
           <p>Here you can add arbitrary content. Components like Pickers are using dialogs now.</p>
         </Dialog>
       </div>
@@ -35,15 +41,15 @@ class DialogTest extends React.Component {
 
 ## Properties
 
-| Name              | Type          | Default         | Description|
+| Name                    | Type            | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `active`        | `Boolean`       |  `false`        | If true, the dialog will be active.|
-| `actions`       | `Array`         |    `[]`         | A array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons.|
-| `className`     | `String`        |     `''`        | Sets a class to give customized styles to the dialog.|
-| `onOverlayClick`   | `Function`   |             | Callback to be invoked when the dialog overlay is clicked.|
-| `onOverlayMouseDown` | `Function` |             | Callback called when the mouse button is pressed on the overlay. |
-| `onOverlayMouseUp` | `Function` |               | Callback called when the mouse button is released over the overlay. |
-| `onOverlayMouseMove` | `Function` |             | Callback called when the mouse is moving over the overlay. |
-| `onEscKeyDown` | `Function` |             | Callback called when the ESC is pressed with the overlay active. |
-| `title`         | `String`        |                 | The text string to use as standar title of the dialog.|
-| `type`          | `String`        |  `normal`       | Used to determine the size of the dialog. It can be `small`, `normal` or `large`. |
+| `actions`               | `Array`         | `[]`            | A array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons.|
+| `active`                | `Boolean`       | `false`         | If true, the dialog will be active.|
+| `className`             | `String`        | `''`            | Sets a class to give customized styles to the dialog.|
+| `onEscKeyDown`          | `Function`      |                 | Callback called when the ESC key is pressed with the overlay active. |
+| `onOverlayClick`        | `Function`      |                 | Callback to be invoked when the dialog overlay is clicked.|
+| `onOverlayMouseDown`    | `Function`      |                 | Callback called when the mouse button is pressed on the overlay. |
+| `onOverlayMouseMove`    | `Function`      |                 | Callback called when the mouse is moving over the overlay. |
+| `onOverlayMouseUp`      | `Function`      |                 | Callback called when the mouse button is released over the overlay. |
+| `title`                 | `String`        |                 | The text string to use as standar title of the dialog.|
+| `type`                  | `String`        | `normal`        | Used to determine the size of the dialog. It can be `small`, `normal` or `large`. |
diff --git a/docs/app/components/layout/main/modules/examples/dialog_example_1.txt b/docs/app/components/layout/main/modules/examples/dialog_example_1.txt
index f453e6216..71fe73798 100644
--- a/docs/app/components/layout/main/modules/examples/dialog_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/dialog_example_1.txt
@@ -19,8 +19,9 @@ class DialogTest extends React.Component {
         <Dialog
           actions={this.actions}
           active={this.state.active}
-          title='My awesome dialog'
+          onEscKeyDown={this.handleToggle}
           onOverlayClick={this.handleToggle}
+          title='My awesome dialog'
         >
           <p>Here you can add arbitrary content. Components like Pickers are using dialogs now.</p>
         </Dialog>

From 368335864cb6d1db69ecb7ee5ad4d07d8fbf71a4 Mon Sep 17 00:00:00 2001
From: Keren Chandran <keren.chandran@gmail.com>
Date: Fri, 25 Mar 2016 10:16:59 -0400
Subject: [PATCH 0421/1024] Fixed spacing on drawer readme

---
 components/drawer/readme.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/drawer/readme.md b/components/drawer/readme.md
index e1add337c..13dfd6e6f 100644
--- a/components/drawer/readme.md
+++ b/components/drawer/readme.md
@@ -10,7 +10,7 @@ class DrawerTest extends React.Component {
   state = {
     active: false
   };
-  
+
   handleToggle = () => {
     this.setState({active: !this.state.active});
   };
@@ -33,7 +33,7 @@ class DrawerTest extends React.Component {
 
 | Name              | Type          | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `active`        | `Boolean`       |  `false`        | If true, the drawer will be visible.|
-| `className`     | `String`        |     `''`        | Sets a class to give customized styles to the drawer.|
-| `onOverlayClick` | `Function`     |            | Callback function to be invoked when the overlay is clicked.|
-| `type`          | `String`        | `left`          | Type of drawer. It can be left or right to display the drawer on the left or right side of the screen.|
+| `active`          | `Boolean`       | `false`       | If true, the drawer will be visible.|
+| `className`       | `String`        | `''`          | Sets a class to give customized styles to the drawer.|
+| `onOverlayClick`  | `Function`      |               | Callback function to be invoked when the overlay is clicked.|
+| `type`            | `String`        | `left`        | Type of drawer. It can be `left` or `right` to display the drawer on the left or right side of the screen.|

From fe9312aad0ec8b72b975f15dae65ee0c26eaacba Mon Sep 17 00:00:00 2001
From: Keren Chandran <keren.chandran@gmail.com>
Date: Fri, 25 Mar 2016 10:27:53 -0400
Subject: [PATCH 0422/1024] Fixed Dropdown readme example and updated
 properties.

---
 components/dropdown/readme.md | 22 ++++++++++++----------
 components/input/readme.md    |  2 +-
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/components/dropdown/readme.md b/components/dropdown/readme.md
index 89f3f71d7..e64c6de87 100644
--- a/components/dropdown/readme.md
+++ b/components/dropdown/readme.md
@@ -6,7 +6,7 @@ The Dropdown selects an option between multiple selections. The element displays
 ```jsx
 import Dropdown from 'react-toolbox/lib/dropdown';
 
-const countries: [
+const countries = [
   { value: 'EN-gb', label: 'England' },
   { value: 'ES-es', label: 'Spain'},
   { value: 'TH-th', label: 'Thailand' },
@@ -37,14 +37,16 @@ class DropdownTest extends React.Component {
 
 ## Properties
 
-| Name              | Type          | Default         | Description |
+| Name            | Type            | Default         | Description |
 |:-----|:-----|:-----|:-----|
-| `auto`        | `Boolean`       |  `true`        | If true, the dropdown will open up or down depending on the position in the screen .|
-| `className`     | `String`        |  `''`               | Set the class to give custom styles to the dropdown.
-| `disabled`      | `Boolean`       | `false`         | Set the component as disabled.
+| `auto`          | `Boolean`       | `true`          | If true, the dropdown will open up or down depending on the position in the screen .|
+| `className`     | `String`        | `''`            | Set the class to give custom styles to the dropdown.|
+| `disabled`      | `Boolean`       | `false`         | Set the component as disabled.|
 | `error`         | `String`        |                 | Give an error string to display under the field.|
-| `label`         | `String`        |                 | The text string to use for the floating label element.
-| `onChange`      | `Function`      |                 | Callback function that is fired when the component's value changes.
-| `source`    | `Array`         |                 | Array of data objects with the data to represent in the dropdown.
-| `template`      | `Function`      |                 | Callback function that returns a JSX template to represent the element.
-| `value`         | `String`        |                 | Default value using JSON data.
+| `label`         | `String`        |                 | The text string to use for the floating label element.|
+| `onBlur`        | `Function`      |                 | Callback function that is fired when the component is blurred.|
+| `onChange`      | `Function`      |                 | Callback function that is fired when the component's value changes.|
+| `onFocus`       | `Function`      |                 | Callback function that is fired when the component is focused.|
+| `source`        | `Array`         |                 | Array of data objects with the data to represent in the dropdown.|
+| `template`      | `Function`      |                 | Callback function that returns a JSX template to represent the element.|
+| `value`         | `String`        |                 | Default value using JSON data.|
diff --git a/components/input/readme.md b/components/input/readme.md
index 89b57575b..299848ac7 100644
--- a/components/input/readme.md
+++ b/components/input/readme.md
@@ -40,7 +40,7 @@ class InputTest extends React.Component {
 | `label`         | `String`      |                 | The text string to use for the floating label element.|
 | `maxLength`     | `Number`      |                 |Specifies the maximum number of characters allowed in the component.|
 | `multiline`     | `Boolean`     | `false`         | If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.|
-| `onBlur`        | `Function`    |                 | Callback function that is fired when component is blured.|
+| `onBlur`        | `Function`    |                 | Callback function that is fired when component is blurred.|
 | `onChange`      | `Function`    |                 | Callback function that is fired when the component's value changes.|
 | `onFocus`       | `Function`    |                 | Callback function that is fired when component is focused.|
 | `onKeyPress`    | `Function`    |                 | Callback function that is fired when a key is pressed.|

From 21dc421d73cfcb7bbff3c1476780c3944b601b82 Mon Sep 17 00:00:00 2001
From: Keren Chandran <keren.chandran@gmail.com>
Date: Fri, 25 Mar 2016 10:35:44 -0400
Subject: [PATCH 0423/1024] Updated Font Icon Examples. Also updated value type

---
 components/font_icon/readme.md                       | 12 ++++++------
 .../main/modules/examples/font_icon_example_1.txt    |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/font_icon/readme.md b/components/font_icon/readme.md
index 13ca3b562..eb28a7b0c 100644
--- a/components/font_icon/readme.md
+++ b/components/font_icon/readme.md
@@ -1,6 +1,6 @@
 # Font Icon
 
-The font icon component is used to represent an icon from the [Google Material Design](https://www.google.com/design/icons/) icon font. React Toolbox does **not** provide the font icon for you. You'd need to get the icons using whatever method you want. We recommend to import the font and the associated CSS from Google Fonts as is specified [here](http://google.github.io/material-design-icons/#getting-icons).
+The font icon component is used to represent an icon from the [Google Material Design](https://www.google.com/design/icons/) icon font. React Toolbox does **not** provide the font icon for you. You need to get the icons using whatever method you want. We recommend to import the font and the associated CSS from Google Fonts as is specified [here](http://google.github.io/material-design-icons/#getting-icons).
 
 <!-- example -->
 ```jsx
@@ -9,7 +9,7 @@ import FontIcon from 'react-toolbox/lib/font_icon';
 const FontIcons = () => (
   <span>
     <FontIcon value='add' />
-    <FontIcon value='add_circle_outline' />
+    <FontIcon value='favorite' />
     <FontIcon>star</FontIcon>
   </span>
 );
@@ -17,8 +17,8 @@ const FontIcons = () => (
 
 ## Properties
 
-| Name              | Type          | Default         | Description|
+| Name            | Type                    | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `children`     | `String`        |                 | The key string for the icon you want to be displayed.|
-| `className`     | `String`        |                 | The class name to give custom styles such as sizing.|
-| `value`         | `String`        |                 | The key string for the icon you want be displayed.|
+| `children`      | `String`                |                 | The key string for the icon you want to be displayed.|
+| `className`     | `String`                | `''`            | The class name to give custom styles such as sizing.|
+| `value`         | `String` or `Element`   |                 | The key string for the icon you want be displayed.|
diff --git a/docs/app/components/layout/main/modules/examples/font_icon_example_1.txt b/docs/app/components/layout/main/modules/examples/font_icon_example_1.txt
index b6dfc9e9e..dfaebaf96 100644
--- a/docs/app/components/layout/main/modules/examples/font_icon_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/font_icon_example_1.txt
@@ -2,7 +2,7 @@ const FontIcons = () => (
   <span>
     <FontIcon value='add' />
     <FontIcon value='favorite' />
-    <FontIcon value='add-circle-outline' />
+    <FontIcon>star</FontIcon>
   </span>
 );
 

From 588ff398bca5c76ddd4a80e245904d35ca8f74b7 Mon Sep 17 00:00:00 2001
From: Keren Chandran <keren.chandran@gmail.com>
Date: Fri, 25 Mar 2016 10:48:39 -0400
Subject: [PATCH 0424/1024] Updated Link readme and example to include active
 element. Also changed icon type from string to any.

---
 components/link/readme.md                          | 14 +++++++-------
 .../main/modules/examples/link_example_1.txt       |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/components/link/readme.md b/components/link/readme.md
index 60d8e3239..04868b64d 100644
--- a/components/link/readme.md
+++ b/components/link/readme.md
@@ -8,7 +8,7 @@ import Link from 'react-toolbox/lib/link';
 
 const LinksTest = () => (
   <nav>
-    <Link href="http://github.com/#/components/link" label="Work" count={4} icon='business' />
+    <Link active href="http://github.com/#/components/link" label="Work" count={4} icon='business' />
     <Link href="http://github.com/#/components/link" label="Blog" icon='speaker_notes' />
     <Link href="http://github.com/#/components/link" label="Explore" icon='explore' />
   </nav>
@@ -19,10 +19,10 @@ const LinksTest = () => (
 
 You can add as many properties as you want to be directly transferred to the output anchor element. Apart from them you have the following properties:
 
-| Name              | Type          | Default         | Description|
+| Name            | Type            | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `label`       | `String`        |         | The text string used for the text content of the link.|
-| `className`     | `String`      | `''`            | Sets a custom class name to add styles to the link.|
-| `count`         | `Number`        |                 | Sets a count number useful to display in the page how many times was visited for example.|
-| `icon`          | `String`        |                 | An icon key string to include a `FontIcon` component in front of the text.|
-
+| `active`        | `Boolean`       | `false`         | If true, adds active style to link.|
+| `className`     | `String`        | `''`            | Sets a custom class name to add styles to the link.|
+| `count`         | `Number`        |                 | Sets a count number.|
+| `icon`          | `Any`           |                 | An icon key string to include a `FontIcon` component in front of the text.|
+| `label`         | `String`        |                 | The text string used for the text content of the link.|
diff --git a/docs/app/components/layout/main/modules/examples/link_example_1.txt b/docs/app/components/layout/main/modules/examples/link_example_1.txt
index fd10593a1..aea0ef1cf 100644
--- a/docs/app/components/layout/main/modules/examples/link_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/link_example_1.txt
@@ -1,6 +1,6 @@
 const LinksTest = () => (
   <nav>
-    <Link href="#/components/link" label="Work" count={4} icon='business' />
+    <Link active href="#/components/link" label="Work" count={4} icon='business' />
     <Link href="#/components/link" label="Blog" icon='speaker_notes' />
     <Link href="#/components/link" label="Explore" icon='explore' />
   </nav>

From e7a26226563a369dfe1f2f2d956e5dc18283c4e0 Mon Sep 17 00:00:00 2001
From: Keren Chandran <keren.chandran@gmail.com>
Date: Fri, 25 Mar 2016 11:37:12 -0400
Subject: [PATCH 0425/1024] Updated List Documentation and example to include
 list divider

---
 components/list/readme.md                     | 46 +++++++++++--------
 .../main/modules/examples/list_example_1.txt  |  1 +
 2 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/components/list/readme.md b/components/list/readme.md
index 707bc632d..14eaba466 100644
--- a/components/list/readme.md
+++ b/components/list/readme.md
@@ -1,12 +1,12 @@
 # List
 
-A [list component](https://www.google.com/design/spec/components/lists.html) consists of a single continuous column of tessellated sub-divisions of equal width called rows that function as containers for tiles. Tiles hold content, and can vary in height within a list. 
+A [list component](https://www.google.com/design/spec/components/lists.html) consists of a single continuous column of tessellated sub-divisions of equal width called rows that function as containers for tiles. Tiles hold content, and can vary in height within a list.
 
 Lists are best suited to presenting a homogeneous data type or sets of data types, such as images and text, optimized for reading comprehension with the goal of differentiating between like data types or qualities within a single data type. You can compose lists based on subcomponents.
 
 <!-- example -->
 ```jsx
-import { List, ListItem, ListSubHeader, ListDivider, ListCheckbox } from 'react-toolbox';
+import { List, ListItem, ListSubHeader, ListDivider, ListCheckbox } from 'react-toolbox/lib/list';
 
 const ListTest = () => (
   <List selectable ripple>
@@ -31,6 +31,7 @@ const ListTest = () => (
     />
     <ListSubHeader caption='Configuration' />
     <ListCheckbox checked caption='Notify new comics' legend='You will receive a notification when a new one is published' />
+    <ListDivider />
     <ListItem caption='Contact the publisher' leftIcon='send' />
     <ListItem caption='Remove this publication' leftIcon='delete' />
   </List>
@@ -39,30 +40,33 @@ const ListTest = () => (
 
 ## List
 
-Is used as a wrapper for the list. It can hold properties that affect to the whole list and also it can get styles for the wrapper.
+Is used as a wrapper for the list. It can hold properties that affect to the whole list and get styles for the wrapper.
 
 | Name          | Type        | Default    | Description|
 |:-----|:-----|:-----|:-----|
-| `className`   | `String`    |  `''`      | Sets a class to give custom styles to the list wrapper.| 
-| `ripple`      | `Boolean`   | `false`    | If true, each element in the list will have a ripple effect on click | 
+| `className`   | `String`    |  `''`      | Sets a class to give custom styles to the list wrapper.|
+| `ripple`      | `Boolean`   | `false`    | If true, each element in the list will have a ripple effect on click |
 | `selectable`  | `Boolean`   | `false`    | If true, the elements in the list will display a hover effect and a pointer cursor. |
 
 ## List Item
 
-Represents a list item that can have avatar, icons, title and subtitle, etc. It's important to notice that you have to set it as an inmediate child of `List` component.
+Represents a list item that can have avatar, icons, title, subtitle, etc. Note: you have to set it as an inmediate child of `List` component.
 
 | Name              | Type          | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `avatar`   | `String`    |        | A string URL to specify an avatar in the left side of the item.| 
-| `caption`   | `String`    |       | Main text of the item. Required.| 
-| `className`   | `String`    |  `''`    | Set a class to give custom styles to the list item.| 
-| `disabled`   | `String`    |  `false`    | If true, the item is displayed as disabled and it's not clickable.| 
-| `leftIcon`    | `String`       |    | A string key of a font icon to display an icon in the left side of the item. |
+| `avatar`   | `String`    |        | A string URL to specify an avatar in the left side of the item.|
+| `caption`   | `String`    |       | Main text of the item.|
+| `className`   | `String`    |  `''`    | Set a class to give custom styles to the list item.|
+| `disabled`   | `String`    |  `false`    | If true, the item is displayed as disabled and is not clickable.|
+| `itemContent`    | `Element`       |    | An element that will be displayed as the item. If set, this will override `caption` and `legend`.|
+| `leftActions`    | `Array of Elements`       |    | A list of elements that are placed on the left side of the item and after the avatar attribute.|
+| `leftIcon`    | `Any`       |    | A string key of a font icon or element to display an icon in the left side of the item. |
 | `legend`   | `String`      |       | Secondary text to display under the caption.|
 | `onClick`   | `Function`      |       | Callback the is invoked when the item is clicked if it's not disabled. |
-| `rightIcon`  | `String`      |       | The same as the `leftIcon` but in this case the icon is displayed in the right side.|
+| `rightIcon`  | `Any`      |       | The same as the `leftIcon` but in this case the icon is displayed in the right side.|
+| `rightActions`    | `Array of Elements`       |    | A list of elements that are placed on the right side of the item and after the rightIcon attribute.|
 | `ripple` | `Boolean`      |   `false`  | If true, the item displays a ripple effect on click. By default it's inherited from the parent element.|
-| `selectable` | `Boolean`      |   `false`    | If true, the elements in the list will display a hover effect and a pointer cursor. Inherited from the parent |
+| `selectable` | `Boolean`      |   `false`    | If true, the elements in the list will display a hover effect and a pointer cursor. Inherited from the parent.|
 | `to` | `String`      |       | In case you want to provide the item as a link, you can pass this property to specify the href. |
 
 ## List Checkbox
@@ -71,18 +75,24 @@ A special type of item that has a checkbox control on the left side. It implemen
 
 | Name              | Type          | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `caption`   | `String`    |       | Main text of the item. Required.| 
-| `checked`   | `Boolean`    |  `false`    | If true the checkbox appears checked by default.| 
-| `disabled`   | `String`    |  `false`    | If true, the item is displayed as disabled and it's not clickable.| 
+| `caption`   | `String`    |       | Main text of the item. Required.|
+| `className`   | `String`    |     | Set a class to give custom styles to Component.|
+| `checked`   | `Boolean`    |  `false`    | If true the checkbox appears checked by default.|
+| `disabled`   | `String`    |  `false`    | If true, the item is displayed as disabled and it's not clickable.|
 | `legend`   | `String`      |       | Secondary text to display under the caption.|
 | `name`  | `String`      |       | Name for the checkbox input item.|
 | `onBlur` | `Function`      |    | Callback called when the input element is blurred.|
-| `onFocus` | `Function`      |    | Callback called when the input element is focused.|
 | `onChange` | `Function`      |    | Callback called when the input element is changed.|
+| `onFocus` | `Function`      |    | Callback called when the input element is focused.|
 
 ## List Subheader
 
-Simple subcomponent used to give a title to a list area. It only have a property `caption` which is a `String` to set the text that should be displayed.
+Simple subcomponent used to give a title to a list area.
+
+| Name          | Type        | Default       | Description|
+|:-----|:-----|:-----|:-----|
+| `caption`     | `String`    |               | Text that will be displayed.|
+| `className`   | `String`    | `''`          | Set a class to give custom styles to the list subheader.|
 
 ## List Divider
 
diff --git a/docs/app/components/layout/main/modules/examples/list_example_1.txt b/docs/app/components/layout/main/modules/examples/list_example_1.txt
index 8d087ec39..1df5482bd 100644
--- a/docs/app/components/layout/main/modules/examples/list_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/list_example_1.txt
@@ -36,6 +36,7 @@ class ListTest extends React.Component {
           legend='You will receive a notification when a new one is published'
           onChange={this.handleCheckboxChange}
         />
+        <ListDivider />
         <ListItem caption='Contact the publisher' leftIcon='send' />
         <ListItem caption='Remove this publication' leftIcon='delete' />
       </List>

From 1a9fe2476265a0fe5c19013fff5e014160e94bf2 Mon Sep 17 00:00:00 2001
From: Keren Chandran <keren.chandran@gmail.com>
Date: Fri, 25 Mar 2016 11:42:17 -0400
Subject: [PATCH 0426/1024] Fixed spacing for list readme

---
 components/list/readme.md | 50 +++++++++++++++++++--------------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/components/list/readme.md b/components/list/readme.md
index 14eaba466..080ad32d3 100644
--- a/components/list/readme.md
+++ b/components/list/readme.md
@@ -52,38 +52,38 @@ Is used as a wrapper for the list. It can hold properties that affect to the who
 
 Represents a list item that can have avatar, icons, title, subtitle, etc. Note: you have to set it as an inmediate child of `List` component.
 
-| Name              | Type          | Default         | Description|
+| Name              | Type                  | Default       | Description|
 |:-----|:-----|:-----|:-----|
-| `avatar`   | `String`    |        | A string URL to specify an avatar in the left side of the item.|
-| `caption`   | `String`    |       | Main text of the item.|
-| `className`   | `String`    |  `''`    | Set a class to give custom styles to the list item.|
-| `disabled`   | `String`    |  `false`    | If true, the item is displayed as disabled and is not clickable.|
-| `itemContent`    | `Element`       |    | An element that will be displayed as the item. If set, this will override `caption` and `legend`.|
-| `leftActions`    | `Array of Elements`       |    | A list of elements that are placed on the left side of the item and after the avatar attribute.|
-| `leftIcon`    | `Any`       |    | A string key of a font icon or element to display an icon in the left side of the item. |
-| `legend`   | `String`      |       | Secondary text to display under the caption.|
-| `onClick`   | `Function`      |       | Callback the is invoked when the item is clicked if it's not disabled. |
-| `rightIcon`  | `Any`      |       | The same as the `leftIcon` but in this case the icon is displayed in the right side.|
-| `rightActions`    | `Array of Elements`       |    | A list of elements that are placed on the right side of the item and after the rightIcon attribute.|
-| `ripple` | `Boolean`      |   `false`  | If true, the item displays a ripple effect on click. By default it's inherited from the parent element.|
-| `selectable` | `Boolean`      |   `false`    | If true, the elements in the list will display a hover effect and a pointer cursor. Inherited from the parent.|
-| `to` | `String`      |       | In case you want to provide the item as a link, you can pass this property to specify the href. |
+| `avatar`          | `String`              |               | A string URL to specify an avatar in the left side of the item.|
+| `caption`         | `String`              |               | Main text of the item.|
+| `className`       | `String`              | `''`          | Set a class to give custom styles to the list item.|
+| `disabled`        | `String`              | `false`       | If true, the item is displayed as disabled and is not clickable.|
+| `itemContent`     | `Element`             |               | An element that will be displayed as the item. If set, this will override `caption` and `legend`.|
+| `leftActions`     | `Array of Elements`   |               | A list of elements that are placed on the left side of the item and after the avatar attribute.|
+| `leftIcon`        | `Any`                 |               | A string key of a font icon or element to display an icon in the left side of the item. |
+| `legend`          | `String`              |               | Secondary text to display under the caption.|
+| `onClick`         | `Function`            |               | Callback the is invoked when the item is clicked if it's not disabled. |
+| `rightIcon`       | `Any`                 |               | The same as the `leftIcon` but in this case the icon is displayed in the right side.|
+| `rightActions`    | `Array of Elements`   |               | A list of elements that are placed on the right side of the item and after the rightIcon attribute.|
+| `ripple`          | `Boolean`             | `false`       | If true, the item displays a ripple effect on click. By default it's inherited from the parent element.|
+| `selectable`      | `Boolean`             | `false`       | If true, the elements in the list will display a hover effect and a pointer cursor. Inherited from the parent.|
+| `to`              | `String`              |               | In case you want to provide the item as a link, you can pass this property to specify the href. |
 
 ## List Checkbox
 
 A special type of item that has a checkbox control on the left side. It implements similar methods to the `ListItem` component and some additional to control the checkbox.
 
-| Name              | Type          | Default         | Description|
+| Name            | Type            | Default       | Description|
 |:-----|:-----|:-----|:-----|
-| `caption`   | `String`    |       | Main text of the item. Required.|
-| `className`   | `String`    |     | Set a class to give custom styles to Component.|
-| `checked`   | `Boolean`    |  `false`    | If true the checkbox appears checked by default.|
-| `disabled`   | `String`    |  `false`    | If true, the item is displayed as disabled and it's not clickable.|
-| `legend`   | `String`      |       | Secondary text to display under the caption.|
-| `name`  | `String`      |       | Name for the checkbox input item.|
-| `onBlur` | `Function`      |    | Callback called when the input element is blurred.|
-| `onChange` | `Function`      |    | Callback called when the input element is changed.|
-| `onFocus` | `Function`      |    | Callback called when the input element is focused.|
+| `caption`       | `String`        |               | Main text of the item. Required.|
+| `className`     | `String`        |               | Set a class to give custom styles to Component.|
+| `checked`       | `Boolean`       | `false`       | If true the checkbox appears checked by default.|
+| `disabled`      | `String`        | `false`       | If true, the item is displayed as disabled and it's not clickable.|
+| `legend`        | `String`        |               | Secondary text to display under the caption.|
+| `name`          | `String`        |               | Name for the checkbox input item.|
+| `onBlur`        | `Function`      |               | Callback called when the input element is blurred.|
+| `onChange`      | `Function`      |               | Callback called when the input element is changed.|
+| `onFocus`       | `Function`      |               | Callback called when the input element is focused.|
 
 ## List Subheader
 

From 2f113872b22b8e0a09bcaf2925c32abf1158a4b6 Mon Sep 17 00:00:00 2001
From: Keren Chandran <keren.chandran@gmail.com>
Date: Fri, 25 Mar 2016 12:03:30 -0400
Subject: [PATCH 0427/1024] Updated Menu readme to include new properties and
 changed import statement to match other components

---
 components/menu/readme.md | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/components/menu/readme.md b/components/menu/readme.md
index 78f397654..ba4a4928e 100644
--- a/components/menu/readme.md
+++ b/components/menu/readme.md
@@ -4,7 +4,7 @@ A [Menu](https://www.google.com/design/spec/components/menus.html) is a temporar
 
 <!-- example -->
 ```jsx
-import {IconMenu, MenuItem, MenuDivider } from 'react-toolbox';
+import {IconMenu, MenuItem, MenuDivider } from 'react-toolbox/lib/menu';
 
 const MenuTest = () => (
   <IconMenu icon='more_vert' position='top-left' menuRipple>
@@ -26,6 +26,7 @@ This subcomponent is the default wrapper for a menu and is responsible for the o
 | `active`   | `Boolean`    | `false`    | If true, the menu will be displayed as opened by default.|
 | `className`   | `String`    |  `''`    | Set a class to give custom styles to the menu wrapper.|
 | `onHide`    | `Function`    |    | Callback that will be called when the menu is being hid. |
+| `onSelect`    | `Function`    |    | Callback that will be invoked when a menu item is selected. |
 | `onShow`    | `Function`    |    | Callback that will be invoked when the menu is being shown. |
 | `outline`    | `Boolean`    | `true`  | If true the menu wrapper will show an outline with a soft shadow. |
 | `position`    | `String`    | `static`  | Determine the position of the menu. With `static` value the menu will be always shown, `auto` means that the it will decide the opening direction based on the current position. To force a position use `top-left`, `top-right`, `bottom-left`, `bottom-right`. |
@@ -47,29 +48,30 @@ As the most usual scenario will be to open the menu from a click in an Icon, we
 | Name              | Type          | Default         | Description|
 |:-----|:-----|:-----|:-----|
 | `className`   | `String`    |  `''`    | Set a class to give custom styles to the icon wrapper.|
-| `icon`    | `String`    | `more_vert`  | Icon font key string to display the opener icon. |
-| `iconRipple`    | `String`    | `true`  | If true, the icon will show a ripple when is clicked. |
-| `menuRipple`    | `String`    | `true`  | Transferred to the `Menu` component. |
+| `icon`    | `Any`    | `more_vert`  | Icon font key string or Element to display the opener icon. |
+| `iconRipple`    | `Boolean`    | `true`  | If true, the icon will show a ripple when is clicked. |
+| `menuRipple`    | `Boolean`    | `true`  | Transferred to the `Menu` component. |
 | `onClick`    | `Function`    |    | Callback that will be called when the icon is clicked. |
-| `onHide`    | `Function`    |    | Callback that will be called when the menu is being hid. |
-| `onShow`    | `Function`    |    | Callback that will be invoked when the menu is being shown. |
+| `onHide`    | `Function`    |    | Callback that will be called when the menu is being hidden. |
 | `onSelect`    | `Function`    |    | Callback that will be invoked when a menu item is selected. |
-| `position`    | `String`    | `auto`  | Determine the position of the menu. This property is transferred to the inner `Menu` component. |
+| `onShow`    | `Function`    |    | Callback that will be invoked when the menu is being shown. |
+| `position`    | `String`    | `auto`  | Determines the position of the menu. This property is transferred to the inner `Menu` component. |
 | `selectable`    | `Boolean`    | `false`  | If true, the menu will keep a value to highlight the active child item. |
 | `selected`    | `Any`    |  | Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted. |
 
 ## Menu Item
 
-Is the inner component for menus and describes the content of each option. It behaves in a similar way to List Items but simpler.
+The inner component for menus and describes the content of each option. It behaves in a similar way to List Items but simpler.
 
 | Name              | Type          | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `caption`   | `String`    |    | The text to include in the menu item.|
+| `caption`   | `String`    |    | The text to include in the menu item. Required.|
 | `className`   | `String`    |  `''`    | Set a class to give custom styles to the item.|
 | `disabled`   | `Boolean`    |  `false`    | If true, the item will be displayed as disabled and is not selectable.|
-| `icon`    | `String`    |  | Icon font key string to display in the right side of the option. |
-| `ripple`    | `Boolean`    | `false`  | If true, the item will show a ripple effect when it's clicked. Inherited from the parent. |
+| `icon`    | `Any`    |  | Icon font key string or Element to display in the right side of the option. |
+| `onClick`    | `Function`    |    | Callback that will be called when Component is clicked. |
 | `selected`    | `Boolean`    | `false`  | Transferred from the `Menu` component for selectable menus. Indicates if it's the current active option. |
+| `shortcut`    | `String`    | `''`  | Displays shortcut text on the right side of the `caption` attribute. |
 
 ## Menu Divider
 

From 324cce3dcc2cbfb44945ed00bbd3744587624f83 Mon Sep 17 00:00:00 2001
From: Keren Chandran <keren.chandran@gmail.com>
Date: Fri, 25 Mar 2016 12:09:56 -0400
Subject: [PATCH 0428/1024] Aligned Menu Readme properties

---
 components/menu/readme.md | 62 +++++++++++++++++++--------------------
 1 file changed, 31 insertions(+), 31 deletions(-)

diff --git a/components/menu/readme.md b/components/menu/readme.md
index ba4a4928e..bb12d8d68 100644
--- a/components/menu/readme.md
+++ b/components/menu/readme.md
@@ -21,18 +21,18 @@ const MenuTest = () => (
 
 This subcomponent is the default wrapper for a menu and is responsible for the opening behavior. Its properties can affect to the Item children.
 
-| Name              | Type          | Default         | Description|
+| Name          | Type          | Default     | Description|
 |:-----|:-----|:-----|:-----|
-| `active`   | `Boolean`    | `false`    | If true, the menu will be displayed as opened by default.|
-| `className`   | `String`    |  `''`    | Set a class to give custom styles to the menu wrapper.|
-| `onHide`    | `Function`    |    | Callback that will be called when the menu is being hid. |
-| `onSelect`    | `Function`    |    | Callback that will be invoked when a menu item is selected. |
-| `onShow`    | `Function`    |    | Callback that will be invoked when the menu is being shown. |
-| `outline`    | `Boolean`    | `true`  | If true the menu wrapper will show an outline with a soft shadow. |
-| `position`    | `String`    | `static`  | Determine the position of the menu. With `static` value the menu will be always shown, `auto` means that the it will decide the opening direction based on the current position. To force a position use `top-left`, `top-right`, `bottom-left`, `bottom-right`. |
-| `ripple`    | `Boolean`    | `true`  | If true, the menu items will show a ripple effect on click. |
-| `selectable`    | `Boolean`    | `false`  | If true, the menu will keep a value to highlight the active child item. |
-| `selected`    | `Any`    |  | Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted. |
+| `active`      | `Boolean`     | `false`     | If true, the menu will be displayed as opened by default.|
+| `className`   | `String`      | `''`        | Set a class to give custom styles to the menu wrapper.|
+| `onHide`      | `Function`    |             | Callback that will be called when the menu is being hidden. |
+| `onSelect`    | `Function`    |             | Callback that will be invoked when a menu item is selected. |
+| `onShow`      | `Function`    |             | Callback that will be invoked when the menu is being shown. |
+| `outline`     | `Boolean`     | `true`      | If true the menu wrapper will show an outline with a soft shadow. |
+| `position`    | `String`      | `static`    | Determine the position of the menu. With `static` value the menu will be always shown, `auto` means that the it will decide the opening direction based on the current position. To force a position use `top-left`, `top-right`, `bottom-left`, `bottom-right`. |
+| `ripple`      | `Boolean`     | `true`      | If true, the menu items will show a ripple effect on click. |
+| `selectable`  | `Boolean`     | `false`     | If true, the menu will keep a value to highlight the active child item. |
+| `selected`    | `Any`         |             | Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted. |
 
 The menu has state to keep a value with the currently selected item. It also exposes methods to show and hide the menu from the code:
 
@@ -45,33 +45,33 @@ The menu has state to keep a value with the currently selected item. It also exp
 
 As the most usual scenario will be to open the menu from a click in an Icon, we provide this subcomponent implementing this behavior. The `IconMenu` shows an icon and implements a `Menu` under the covers that is shown when is clicked. Some of its properties are transferred to the menu, others to the children:
 
-| Name              | Type          | Default         | Description|
+| Name            | Type          | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `className`   | `String`    |  `''`    | Set a class to give custom styles to the icon wrapper.|
-| `icon`    | `Any`    | `more_vert`  | Icon font key string or Element to display the opener icon. |
-| `iconRipple`    | `Boolean`    | `true`  | If true, the icon will show a ripple when is clicked. |
-| `menuRipple`    | `Boolean`    | `true`  | Transferred to the `Menu` component. |
-| `onClick`    | `Function`    |    | Callback that will be called when the icon is clicked. |
-| `onHide`    | `Function`    |    | Callback that will be called when the menu is being hidden. |
-| `onSelect`    | `Function`    |    | Callback that will be invoked when a menu item is selected. |
-| `onShow`    | `Function`    |    | Callback that will be invoked when the menu is being shown. |
-| `position`    | `String`    | `auto`  | Determines the position of the menu. This property is transferred to the inner `Menu` component. |
-| `selectable`    | `Boolean`    | `false`  | If true, the menu will keep a value to highlight the active child item. |
-| `selected`    | `Any`    |  | Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted. |
+| `className`     | `String`      |  `''`           | Set a class to give custom styles to the icon wrapper.|
+| `icon`          | `Any`         | `more_vert`     | Icon font key string or Element to display the opener icon. |
+| `iconRipple`    | `Boolean`     | `true`          | If true, the icon will show a ripple when is clicked. |
+| `menuRipple`    | `Boolean`     | `true`          | Transferred to the `Menu` component. |
+| `onClick`       | `Function`    |                 | Callback that will be called when the icon is clicked. |
+| `onHide`        | `Function`    |                 | Callback that will be called when the menu is being hidden. |
+| `onSelect`      | `Function`    |                 | Callback that will be invoked when a menu item is selected. |
+| `onShow`        | `Function`    |                 | Callback that will be invoked when the menu is being shown. |
+| `position`      | `String`      | `auto`          | Determines the position of the menu. This property is transferred to the inner `Menu` component. |
+| `selectable`    | `Boolean`     | `false`         | If true, the menu will keep a value to highlight the active child item. |
+| `selected`      | `Any`         |                 | Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted. |
 
 ## Menu Item
 
 The inner component for menus and describes the content of each option. It behaves in a similar way to List Items but simpler.
 
-| Name              | Type          | Default         | Description|
+| Name              | Type          | Default   | Description|
 |:-----|:-----|:-----|:-----|
-| `caption`   | `String`    |    | The text to include in the menu item. Required.|
-| `className`   | `String`    |  `''`    | Set a class to give custom styles to the item.|
-| `disabled`   | `Boolean`    |  `false`    | If true, the item will be displayed as disabled and is not selectable.|
-| `icon`    | `Any`    |  | Icon font key string or Element to display in the right side of the option. |
-| `onClick`    | `Function`    |    | Callback that will be called when Component is clicked. |
-| `selected`    | `Boolean`    | `false`  | Transferred from the `Menu` component for selectable menus. Indicates if it's the current active option. |
-| `shortcut`    | `String`    | `''`  | Displays shortcut text on the right side of the `caption` attribute. |
+| `caption`     | `String`        |             | The text to include in the menu item. Required.|
+| `className`   | `String`        | `''`        | Set a class to give custom styles to the item.|
+| `disabled`    | `Boolean`       | `false`     | If true, the item will be displayed as disabled and is not selectable.|
+| `icon`        | `Any`           |             | Icon font key string or Element to display in the right side of the option. |
+| `onClick`     | `Function`      |             | Callback that will be called when Component is clicked. |
+| `selected`    | `Boolean`       | `false`     | Transferred from the `Menu` component for selectable menus. Indicates if it's the current active option. |
+| `shortcut`    | `String`        | `''`        | Displays shortcut text on the right side of the `caption` attribute. |
 
 ## Menu Divider
 

From c57b751ab426480600024c9d5b8cceac28018a05 Mon Sep 17 00:00:00 2001
From: Keren Chandran <keren.chandran@gmail.com>
Date: Fri, 25 Mar 2016 12:13:23 -0400
Subject: [PATCH 0429/1024] Updated Navigation Readme. Aligned properties and
 added quotes around horizontal and vertical for type description.

---
 components/navigation/readme.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/navigation/readme.md b/components/navigation/readme.md
index d8e8f5439..0540ca8c1 100644
--- a/components/navigation/readme.md
+++ b/components/navigation/readme.md
@@ -25,9 +25,9 @@ const NavigationTest = () => (
 
 ## Properties
 
-| Name              | Type          | Default         | Description|
+| Name            | Type          | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `actions`      | `Array`         |                 | Array of objects that represent buttons so the keys will be transferred as properties to those.|
-| `className`     | `String`        |                 | Set a custom class styles to style the navigation.|
-| `routes`        | `Array`         |                 | Array of objects similar to actions but that will be rendered as `<Link/>` component definition. |
-| `type`          | `String`        | `horizontal`        | Type of the navigation, it can be vertical or horizontal.|
+| `actions`       | `Array`       |                 | Array of objects that will be represented as `<Button/>` so the keys will be transferred as properties the Button Component.|
+| `className`     | `String`      |                 | Set a custom class styles to style the navigation.|
+| `routes`        | `Array`       |                 | Array of objects similar to actions but that will be rendered as `<Link/>` component definition. |
+| `type`          | `String`      | `horizontal`    | Type of the navigation, it can be `vertical` or `horizontal`.|

From 86e1dcada4d92893836d8e694478a9e9bd084437 Mon Sep 17 00:00:00 2001
From: Keren Chandran <keren.chandran@gmail.com>
Date: Fri, 25 Mar 2016 13:06:09 -0400
Subject: [PATCH 0430/1024] Updated Progress, Radio and Tooltip Readme. Aligned
 properties for ripple.

---
 components/progress_bar/readme.md | 20 +++++-----
 components/radio/readme.md        | 63 +++++++++++++++++++------------
 components/ripple/readme.md       |  8 ++--
 components/tooltip/readme.md      | 12 ++++--
 4 files changed, 60 insertions(+), 43 deletions(-)

diff --git a/components/progress_bar/readme.md b/components/progress_bar/readme.md
index 45f54fdb0..9df82588d 100644
--- a/components/progress_bar/readme.md
+++ b/components/progress_bar/readme.md
@@ -9,21 +9,21 @@ import ProgressBar from 'react-toolbox/lib/progress_bar';
 const ProgressTest = () => (
   <div>
     <ProgressBar type="circular" mode="indeterminate" />
-    <ProgressBar type="linear" mode="determinate" value={83} buffer={90}/>    
+    <ProgressBar type="linear" mode="determinate" value={83} buffer={90}/>
   </div>
 );
 ```
 
 ## Properties
 
-| Name          | Type    | Default         | Description|
+| Name          | Type        | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `buffer`    | `Number`  | `0`             | Value of a secondary progress bar useful for buffering.|
-| `className` | `String`  | `''`            | Additional class name to provide custom styling.|
-| `max`       | `Number`  | `100`           | Maximum value permitted.|
-| `min`       | `Number`  | `0`             | Minimum value permitted.|
-| `mode`      | `String`  | `indeterminate` | Mode of the progress bar, it can be *determinate* or *indeterminate*.|
-| `multicolor`  | `Boolean`  | `false` | If true, the circular progress bar will be changing its color.|
-| `type`      | `String`  | `linear`        | Type of the progress bar, it can be *circular* or *linear*.|
-| `value`     | `Number`  | `0`             | Value of the current progress.|
+| `buffer`      | `Number`    | `0`             | Value of a secondary progress bar useful for buffering.|
+| `className`   | `String`    | `''`            | Additional class name to provide custom styling.|
+| `max`         | `Number`    | `100`           | Maximum value permitted.|
+| `min`         | `Number`    | `0`             | Minimum value permitted.|
+| `mode`        | `String`    | `indeterminate` | Mode of the progress bar, it can be `determinate` or `indeterminate`.|
+| `multicolor`  | `Boolean`   | `false`         | If true, the circular progress bar will be changing its color.|
+| `type`        | `String`    | `linear`        | Type of the progress bar, it can be `circular` or `linear`.|
+| `value`       | `Number`    | `0`             | Value of the current progress.|
 
diff --git a/components/radio/readme.md b/components/radio/readme.md
index 7f9d3fa31..87ac159b9 100644
--- a/components/radio/readme.md
+++ b/components/radio/readme.md
@@ -4,29 +4,41 @@
 
 <!-- example -->
 ```jsx
-import { RadioGroup, RadioButton } from 'react-toolbox';
-
-const RadioTest = () => (
-  <RadioGroup ref='group' name='comic' value='vvendetta'>
-    <RadioButton label='The Walking Dead' value='thewalkingdead'/>
-    <RadioButton label='From Hell' value='fromhell' disabled/>
-    <RadioButton label='V for a Vendetta' value='vvendetta'/>
-    <RadioButton label='Watchmen' value='watchmen'/>
-  </RadioGroup>
-);
+import { RadioGroup, RadioButton } from 'react-toolbox/lib/radio';
+
+class RadioTest extends React.Component {
+  state = {
+    value: 'vvendetta'
+  };
+
+  handleChange = (value) => {
+    this.setState({value});
+  };
+
+  render () {
+    return (
+      <RadioGroup name='comic' value={this.state.value} onChange={this.handleChange}>
+        <RadioButton label='The Walking Dead' value='thewalkingdead'/>
+        <RadioButton label='From Hell' value='fromhell' disabled/>
+        <RadioButton label='V for a Vendetta' value='vvendetta'/>
+        <RadioButton label='Watchmen' value='watchmen'/>
+      </RadioGroup>
+    );
+  }
+}
 ```
 
 ## Radio Group
 
 A radio selector is mean to get a value from a set of choices, that's why a radio group is needed. It can take some properties and actions that will be transferred to the children, but they also can behave independently.
 
-| Name              | Type          | Default         | Description|
+| Name          | Type          | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `className`   | `String`    |  `''`    | Set a class to give custom styles to the group.| 
-| `disabled`   | `Boolean`    |  `false`    | If true, the group will be displayed as disabled.| 
-| `name`    | `String`    |  | Name for the input element group. |
-| `onChange`    | `Function`    |   | Callback function that will be invoked when the value changes. |
-| `value`    | `Any`    |  | Default value selected in the radio group. |
+| `className`   | `String`      | `''`        | Set a class to give custom styles to the group.|
+| `disabled`    | `Boolean`     | `false`     | If true, the group will be displayed as disabled.|
+| `name`        | `String`      |             | Name for the input element group. |
+| `onChange`    | `Function`    |             | Callback function that will be invoked when the value changes. |
+| `value`       | `Any`         |             | Default value selected in the radio group. |
 
 This component has state to keep the currently selected value and that's why it exposes to methods to work from the code with it:
 - `getValue` used to retrieve the currently selected value.
@@ -36,13 +48,14 @@ This component has state to keep the currently selected value and that's why it
 
 The inner component to compose radio selectors. They will be rendered as radio input elements of HTML transferring the given properties that concerns to them.
 
-| Name              | Type          | Default         | Description|
+| Name          | Type          | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `checked`   | `Boolean`    |  `false`    | If true, the input element will be selected by default. Transferred from the parent. | 
-| `className`   | `String`    |  `''`    | Set a class to give custom styles to the radio button.| 
-| `disabled`   | `Boolean`    |  `false`    | If true, the item will be displayed as disabled.| 
-| `name`    | `String`    |  | Name for the input element. |
-| `onBlur`    | `Function`    |   | Callback function that will be invoked when the input is blurred. |
-| `onChange`    | `Function`    |   | Callback function that will be invoked when the value changes. |
-| `onFocus`    | `Function`    |   | Callback function that will be invoked when the input is focused. |
-| `value`    | `Any`    |  | Value for the radio button. |
+| `checked`     | `Boolean`     | `false`     | If true, the input element will be selected by default. Transferred from the parent. |
+| `className`   | `String`      | `''`        | Set a class to give custom styles to the radio button.|
+| `disabled`    | `Boolean`     | `false`     | If true, the item will be displayed as disabled.|
+| `label`       | `String`      | `''`        | Label for the radio button.|
+| `name`        | `String`      |             | Name for the input element. |
+| `onBlur`      | `Function`    |             | Callback function that will be invoked when the input is blurred. |
+| `onChange`    | `Function`    |             | Callback function that will be invoked when the value changes. |
+| `onFocus`     | `Function`    |             | Callback function that will be invoked when the input is focused. |
+| `value`       | `Any`         |             | Value for the radio button. |
diff --git a/components/ripple/readme.md b/components/ripple/readme.md
index ddeacba21..05c2861ff 100644
--- a/components/ripple/readme.md
+++ b/components/ripple/readme.md
@@ -20,8 +20,8 @@ const RippleTest = () => <RippleLink href='#'>Test</RippleLink>;
 
 In any component you decorate with the Ripple you'd get some additional props:
 
-| Name      | Type      | Default         | Description|
+| Name          | Type        | Default     | Description|
 |:-----|:-----|:-----|:-----|
-| `centered`     | `Boolean`  | `false` | True in case you want a centered ripple.|
-| `className`     | `String`  | `''` | String to customize appearance (color and opacity for example).|
-| `spread`     | `Number`  | `2` | Factor to indicate how much should the ripple spread under the component. |
+| `centered`    | `Boolean`   | `false`     | True in case you want a centered ripple.|
+| `className`   | `String`    | `''`        | String to customize appearance (color and opacity for example).|
+| `spread`      | `Number`    | `2`         | Factor to indicate how much should the ripple spread under the component.|
diff --git a/components/tooltip/readme.md b/components/tooltip/readme.md
index 9aed676ae..e5f27bf29 100644
--- a/components/tooltip/readme.md
+++ b/components/tooltip/readme.md
@@ -26,8 +26,12 @@ const TooltipTest = () => (
 
 In any component you decorate with the Tooltip you'd get some additional props:
 
-| Name      | Type      | Default         | Description|
+| Name                  | Type          | Default       | Description|
 |:-----|:-----|:-----|:-----|
-| `tooltip`     | `String`  |  | The text string to use for the tooltip.|
-| `tooltipDelay`     | `Number`  |  | Amount of time in miliseconds spent before the tooltip is visible.|
-| `tooltipHideOnClick`     | `Boolean`  | `true` | If true, the Tooltip hides after a click in the host component. |
+| `className`           | `String`      | `''`          | Sets a class to give customized styles to the tooltip.|
+| `onClick`             | `Function`    |               | Callback to be invoked when Component is clicked.|
+| `onMouseEnter`        | `Function`    |               | Callback called when the mouse enters the Component.|
+| `onMouseLeave`        | `Function`    |               | Callback called when the mouse leaves the Component.|
+| `tooltip`             | `String`      |               | The text string to use for the tooltip.|
+| `tooltipDelay`        | `Number`      |               | Amount of time in miliseconds spent before the tooltip is visible.|
+| `tooltipHideOnClick`  | `Boolean`     | `true`        | If true, the Tooltip hides after a click in the host component.|

From 3649ab18b81b724c6002e60415b4861ee86a20b6 Mon Sep 17 00:00:00 2001
From: Keren Chandran <keren.chandran@gmail.com>
Date: Sat, 26 Mar 2016 18:21:17 -0400
Subject: [PATCH 0431/1024] Updated docs for slider, snacker, switch, table,
 tabs and time picker

---
 components/slider/readme.md      | 2 +-
 components/snackbar/readme.md    | 4 ++--
 components/switch/readme.md      | 4 ++--
 components/table/readme.md       | 4 ++--
 components/tabs/readme.md        | 7 ++++---
 components/time_picker/readme.md | 1 +
 6 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/components/slider/readme.md b/components/slider/readme.md
index 6d94e62d9..c2b8a6edf 100644
--- a/components/slider/readme.md
+++ b/components/slider/readme.md
@@ -45,4 +45,4 @@ class SliderTest extends React.Component {
 | `pinned`    | `Boolean` | `false`   | If true, a pin with numeric value label is shown when the slider thumb is pressed. Use for settings for which users need to know the exact value of the setting.|
 | `snaps`     | `Boolean` | `false` | If true, the slider thumb snaps to tick marks evenly spaced based on the step property value.|
 | `step`      | `Number`  | `0.01`    | Amount to vary the value when the knob is moved or increase/decrease is called.|
-| `value`     | `Number`  | `0`       | Current valud of the slider.|
+| `value`     | `Number`  | `0`       | Current value of the slider.|
diff --git a/components/snackbar/readme.md b/components/snackbar/readme.md
index 133416bab..a6db127e5 100644
--- a/components/snackbar/readme.md
+++ b/components/snackbar/readme.md
@@ -40,8 +40,8 @@ class SnackbarTest extends React.Component {
 | `action`  | `String` |   | Label for the action component inside the Snackbar.|
 | `active`        | `Boolean`       |  `false`        | If true, the snackbar will be active.|
 | `className` | `String`  | `''`      | Additional class name to provide custom styling.|
-| `icon` | `String`  |       | String key for an icon displayed in left side of the snackbar.|
-| `label` | `String`  |       | Text to display in the content.|
+| `icon` | `Any`  |       | String key for an icon or Element which will be displayed in left side of the snackbar.|
+| `label` | `String`  |       | Text to display in the content. Required.|
 | `onClick` | `Function`  |       | Callback function that will be called when the button action is clicked.|
 | `onTimeout` | `Function`  |       | Callback function when finish the set timeout.|
 | `timeout` | `Number`  |       | Amount of time in milliseconds after the Snackbar will be automatically hidden.|
diff --git a/components/switch/readme.md b/components/switch/readme.md
index 8d1cc9053..dbf133e8b 100644
--- a/components/switch/readme.md
+++ b/components/switch/readme.md
@@ -52,5 +52,5 @@ class SwitchTest extends React.Component {
 | `label`        | `String`   |       | The text string to use for the floating label element.|
 | `name`         | `String`   |        | The text string used as name of the input.|
 | `onBlur`       | `Function` |        | Callback function that is fired when when the switch is blurred.|
-| `onChange`     | `Function` |        | Callback function that is fired when the components's value changes.|
-| `onFocus`      | `Function`  |        | Callback function fire when the switch is focused.|
+| `onChange`     | `Function` |        | Callback function that is fired when the component's value changes.|
+| `onFocus`      | `Function`  |        | Callback function that is fired when the switch is focused.|
diff --git a/components/table/readme.md b/components/table/readme.md
index d1418b862..7542cbdf7 100644
--- a/components/table/readme.md
+++ b/components/table/readme.md
@@ -53,10 +53,10 @@ class TableTest extends React.Component {
 | Name              | Type          | Default         | Description|
 |:-----|:-----|:-----|:-----|
 | `className`     | `String`      | `''`            | Sets a custom class to style the Component.|
-| `heading`       | `Bool`        | `true`          | If true, component will show a heading using model field names.|
+| `heading`       | `Boolean`        | `true`          | If true, component will show a heading using model field names.|
 | `model`         | `Object`      |                 | Object describing the data model that represents each object in the `source`.|
 | `onChange`      | `Function`    |                 | Callback function that is fired when an item in a row changes. If set, rows are editable. |
 | `onSelect`      | `Function`    |                 | Callback function invoked when the row selection changes.|
-| `selectable`    | `Bool`       | `true`           | If true, the header and each row will display a checkbox to allow the user to select them.|
+| `selectable`    | `Boolean`       | `true`           | If true, the header and each row will display a checkbox to allow the user to select them.|
 | `selected`    | `Array`       |                  | Array of indexes of the items in the source that should appear as selected.|
 | `source`    | `Array`       |                  | Array of objects representing each item to show.|
diff --git a/components/tabs/readme.md b/components/tabs/readme.md
index d3b7995b3..118fa0178 100644
--- a/components/tabs/readme.md
+++ b/components/tabs/readme.md
@@ -40,20 +40,21 @@ This component acts as the wrapper and the main controller of the content that i
 | Name              | Type          | Default         | Description|
 |:-----|:-----|:-----|:-----|
 | `className`                   | `String`        | `''`            | Additional class name to provide custom styling.|
+| `disableAnimatedBottomBorder` | `Boolean`       | `false`         | Disable the animation below the active tab.|
 | `index`                       | `Number`        | `0`             | Current <Tab> |
 | `onChange`                    | `Function`      |                 | Callback function that is fired when the tab changes.|
-| `disableAnimatedBottomBorder` | `Boolean`       | `false`         | Disable the animation below the active tab
 
 ## Tab
 
 Represent a single tab element and it should include some properties to describe the tab itself and get children elements as content.
 
-| Name              | Type          | Default         | Description|
+| Name              | Type            | Default         | Description|
 |:-----|:-----|:-----|:-----|
 | `active`          | `Boolean`       | `false`         | If true, the current component is visible.|
 | `activeClassName` | `String`        | `''`            | Additional class name to provide custom styling for the active tab.|
 | `className`       | `String`        | `''`            | Additional class name to provide custom styling for each tab.|
 | `disabled`        | `Boolean`       | `false`         | If true, the current component is not clickable.|
 | `hidden`          | `Boolean`       | `false`         | If true, the current component is not visible.|
-| `label`           | `String`        |                 | Label text for navigation header |
+| `label`           | `String`        |                 | Label text for navigation header. Required. |
 | `onActive`        | `Function`      |                 | Callback function that is fired when the tab is activated. |
+| `onClick`         | `Function`      |                 | Callback function that is fired when the tab is clicked. |
diff --git a/components/time_picker/readme.md b/components/time_picker/readme.md
index de564f8c4..d07587328 100644
--- a/components/time_picker/readme.md
+++ b/components/time_picker/readme.md
@@ -27,6 +27,7 @@ class TimePickerTest extends React.Component {
 | Name          | Type    | Default         | Description|
 |:-----|:-----|:-----|:-----|
 | `className`         | `String`        |             | This class will be placed at the top of the `TimePickerDialog` component so you can provide custom styles.|
+| `error`         | `String`        |                 | Provide error text which will be displayed under the field.|
 | `format`    | `String`  | `24hr`          | Format to display the clock. It can be `24hr` or `ampm`.|
 | `label`         | `String`        |             | The text string to use for the floating label element in the input component.|
 | `onChange`       | `Function`       |                | Callback called when the picker value is changed.|

From a841408a852bae73b1ffd35fe2cebc6e051d2624 Mon Sep 17 00:00:00 2001
From: Keren Chandran <keren.chandran@gmail.com>
Date: Sat, 26 Mar 2016 18:28:20 -0400
Subject: [PATCH 0432/1024] Fixed Spacing Issues for items in last commit.

---
 components/slider/readme.md      | 20 ++++++++++----------
 components/snackbar/readme.md    | 20 ++++++++++----------
 components/switch/readme.md      | 18 +++++++++---------
 components/table/readme.md       | 18 +++++++++---------
 components/tabs/readme.md        |  2 +-
 components/time_picker/readme.md | 14 +++++++-------
 6 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/components/slider/readme.md b/components/slider/readme.md
index c2b8a6edf..02da62d86 100644
--- a/components/slider/readme.md
+++ b/components/slider/readme.md
@@ -35,14 +35,14 @@ class SliderTest extends React.Component {
 
 ## Properties
 
-| Name          | Type    | Default   | Description|
+| Name          | Type          | Default   | Description|
 |:-----|:-----|:-----|:-----|
-| `className` | `String`  | `''`      | Additional class name to provide custom styling.|
-| `editable`  | `Boolean` | `false`   | If true, an input is shown and the user can set the slider from keyboard value.|
-| `max`       | `Number`  | `100`     | Maximum value permitted.|
-| `min`       | `Number`  | `0`       | Minimum value permitted.|
-| `onChange`   | `Function` |   | Callback function that will be invoked when the slider value changes.|
-| `pinned`    | `Boolean` | `false`   | If true, a pin with numeric value label is shown when the slider thumb is pressed. Use for settings for which users need to know the exact value of the setting.|
-| `snaps`     | `Boolean` | `false` | If true, the slider thumb snaps to tick marks evenly spaced based on the step property value.|
-| `step`      | `Number`  | `0.01`    | Amount to vary the value when the knob is moved or increase/decrease is called.|
-| `value`     | `Number`  | `0`       | Current value of the slider.|
+| `className`   | `String`      | `''`      | Additional class name to provide custom styling.|
+| `editable`    | `Boolean`     | `false`   | If true, an input is shown and the user can set the slider from keyboard value.|
+| `max`         | `Number`      | `100`     | Maximum value permitted.|
+| `min`         | `Number`      | `0`       | Minimum value permitted.|
+| `onChange`    | `Function`    |           | Callback function that will be invoked when the slider value changes.|
+| `pinned`      | `Boolean`     | `false`   | If true, a pin with numeric value label is shown when the slider thumb is pressed. Use for settings for which users need to know the exact value of the setting.|
+| `snaps`       | `Boolean`     | `false`   | If true, the slider thumb snaps to tick marks evenly spaced based on the step property value.|
+| `step`        | `Number`      | `0.01`    | Amount to vary the value when the knob is moved or increase/decrease is called.|
+| `value`       | `Number`      | `0`       | Current value of the slider.|
diff --git a/components/snackbar/readme.md b/components/snackbar/readme.md
index a6db127e5..7d04d8339 100644
--- a/components/snackbar/readme.md
+++ b/components/snackbar/readme.md
@@ -35,14 +35,14 @@ class SnackbarTest extends React.Component {
 
 ## Properties
 
-| Name          | Type    | Default   | Description|
+| Name          | Type          | Default       | Description|
 |:-----|:-----|:-----|:-----|
-| `action`  | `String` |   | Label for the action component inside the Snackbar.|
-| `active`        | `Boolean`       |  `false`        | If true, the snackbar will be active.|
-| `className` | `String`  | `''`      | Additional class name to provide custom styling.|
-| `icon` | `Any`  |       | String key for an icon or Element which will be displayed in left side of the snackbar.|
-| `label` | `String`  |       | Text to display in the content. Required.|
-| `onClick` | `Function`  |       | Callback function that will be called when the button action is clicked.|
-| `onTimeout` | `Function`  |       | Callback function when finish the set timeout.|
-| `timeout` | `Number`  |       | Amount of time in milliseconds after the Snackbar will be automatically hidden.|
-| `type` | `String`  |       | Indicates the action type. Can be `accept`, `warning` or `cancel`|
+| `action`      | `String`      |               | Label for the action component inside the Snackbar.|
+| `active`      | `Boolean`     |  `false`      | If true, the snackbar will be active.|
+| `className`   | `String`      | `''`          | Additional class name to provide custom styling.|
+| `icon`        | `Any`         |               | String key for an icon or Element which will be displayed in left side of the snackbar.|
+| `label`       | `String`      |               | Text to display in the content. Required.|
+| `onClick`     | `Function`    |               | Callback function that will be called when the button action is clicked.|
+| `onTimeout`   | `Function`    |               | Callback function when finish the set timeout.|
+| `timeout`     | `Number`      |               | Amount of time in milliseconds after the Snackbar will be automatically hidden.|
+| `type`        | `String`      |               | Indicates the action type. Can be `accept`, `warning` or `cancel`|
diff --git a/components/switch/readme.md b/components/switch/readme.md
index dbf133e8b..00e7c67c9 100644
--- a/components/switch/readme.md
+++ b/components/switch/readme.md
@@ -44,13 +44,13 @@ class SwitchTest extends React.Component {
 
 ## Properties
 
-| Name              | Type          | Default         | Description|
+| Name              | Type          | Default       | Description|
 |:-----|:-----|:-----|:-----|
-| `checked`      | `Boolean`   | `false` | If true, the switch will be enabled.|
-| `className`    | `String`   | `''`  | Sets a class to give custom styles to the switch.|
-| `disabled`     | `Boolean`  | `false`  | If true, component will be disabled.|
-| `label`        | `String`   |       | The text string to use for the floating label element.|
-| `name`         | `String`   |        | The text string used as name of the input.|
-| `onBlur`       | `Function` |        | Callback function that is fired when when the switch is blurred.|
-| `onChange`     | `Function` |        | Callback function that is fired when the component's value changes.|
-| `onFocus`      | `Function`  |        | Callback function that is fired when the switch is focused.|
+| `checked`      | `Boolean`        | `false`       | If true, the switch will be enabled.|
+| `className`    | `String`         | `''`          | Sets a class to give custom styles to the switch.|
+| `disabled`     | `Boolean`        | `false`       | If true, component will be disabled.|
+| `label`        | `String`         |               | The text string to use for the floating label element.|
+| `name`         | `String`         |               | The text string used as name of the input.|
+| `onBlur`       | `Function`       |               | Callback function that is fired when when the switch is blurred.|
+| `onChange`     | `Function`       |               | Callback function that is fired when the component's value changes.|
+| `onFocus`      | `Function`       |               | Callback function that is fired when the switch is focused.|
diff --git a/components/table/readme.md b/components/table/readme.md
index 7542cbdf7..6ca625db4 100644
--- a/components/table/readme.md
+++ b/components/table/readme.md
@@ -50,13 +50,13 @@ class TableTest extends React.Component {
 
 ## Properties
 
-| Name              | Type          | Default         | Description|
+| Name              | Type            | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `className`     | `String`      | `''`            | Sets a custom class to style the Component.|
-| `heading`       | `Boolean`        | `true`          | If true, component will show a heading using model field names.|
-| `model`         | `Object`      |                 | Object describing the data model that represents each object in the `source`.|
-| `onChange`      | `Function`    |                 | Callback function that is fired when an item in a row changes. If set, rows are editable. |
-| `onSelect`      | `Function`    |                 | Callback function invoked when the row selection changes.|
-| `selectable`    | `Boolean`       | `true`           | If true, the header and each row will display a checkbox to allow the user to select them.|
-| `selected`    | `Array`       |                  | Array of indexes of the items in the source that should appear as selected.|
-| `source`    | `Array`       |                  | Array of objects representing each item to show.|
+| `className`       | `String`        | `''`            | Sets a custom class to style the Component.|
+| `heading`         | `Boolean`       | `true`          | If true, component will show a heading using model field names.|
+| `model`           | `Object`        |                 | Object describing the data model that represents each object in the `source`.|
+| `onChange`        | `Function`      |                 | Callback function that is fired when an item in a row changes. If set, rows are editable. |
+| `onSelect`        | `Function`      |                 | Callback function invoked when the row selection changes.|
+| `selectable`      | `Boolean`       | `true`          | If true, the header and each row will display a checkbox to allow the user to select them.|
+| `selected`        | `Array`         |                 | Array of indexes of the items in the source that should appear as selected.|
+| `source`          | `Array`         |                 | Array of objects representing each item to show.|
diff --git a/components/tabs/readme.md b/components/tabs/readme.md
index 118fa0178..3d33456bb 100644
--- a/components/tabs/readme.md
+++ b/components/tabs/readme.md
@@ -37,7 +37,7 @@ class TabsTest extends React.Component {
 
 This component acts as the wrapper and the main controller of the content that is being displayed. It gets some properties that can be spread to the children.
 
-| Name              | Type          | Default         | Description|
+| Name                          | Type            | Default         | Description|
 |:-----|:-----|:-----|:-----|
 | `className`                   | `String`        | `''`            | Additional class name to provide custom styling.|
 | `disableAnimatedBottomBorder` | `Boolean`       | `false`         | Disable the animation below the active tab.|
diff --git a/components/time_picker/readme.md b/components/time_picker/readme.md
index d07587328..ed792a36f 100644
--- a/components/time_picker/readme.md
+++ b/components/time_picker/readme.md
@@ -24,11 +24,11 @@ class TimePickerTest extends React.Component {
 
 ## Properties
 
-| Name          | Type    | Default         | Description|
+| Name            | Type        | Default     | Description|
 |:-----|:-----|:-----|:-----|
-| `className`         | `String`        |             | This class will be placed at the top of the `TimePickerDialog` component so you can provide custom styles.|
-| `error`         | `String`        |                 | Provide error text which will be displayed under the field.|
-| `format`    | `String`  | `24hr`          | Format to display the clock. It can be `24hr` or `ampm`.|
-| `label`         | `String`        |             | The text string to use for the floating label element in the input component.|
-| `onChange`       | `Function`       |                | Callback called when the picker value is changed.|
-| `value`     | `Date`    |   | Datetime object with currrently selected time |
+| `className`     | `String`    |             | This class will be placed at the top of the `TimePickerDialog` component so you can provide custom styles.|
+| `error`         | `String`    |             | Provide error text which will be displayed under the field.|
+| `format`        | `String`    | `24hr`      | Format to display the clock. It can be `24hr` or `ampm`.|
+| `label`         | `String`    |             | The text string to use for the floating label element in the input component.|
+| `onChange`      | `Function`  |             | Callback called when the picker value is changed.|
+| `value`         | `Date`      |             | Datetime object with currrently selected time. |

From 6cf753b767149308fd83b007bcb4659dffa81dda Mon Sep 17 00:00:00 2001
From: Keren Chandran <keren.chandran@gmail.com>
Date: Sat, 26 Mar 2016 18:37:29 -0400
Subject: [PATCH 0433/1024] Cleaned up Card documentation.

---
 components/card/readme.md | 34 +++++++++++++++++-----------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/components/card/readme.md b/components/card/readme.md
index de7626de2..633fcf82f 100644
--- a/components/card/readme.md
+++ b/components/card/readme.md
@@ -46,9 +46,9 @@ that all subcomponents are placed within.
 ### Properties
 | Name | Type | Default | Description |
 |:-----|:-----|:-----|:-----|
-| `children` | `any` |  | Child components, usually Card subcomponents. |
-| `className` | `string` |  | Additional class(es) for custom styling. |
-| `raised` | `bool` |  | Increases the shadow depth to appear elevated. |
+| `children` | `Any` |  | Child components, usually Card subcomponents. |
+| `className` | `String` |  | Additional class(es) for custom styling. |
+| `raised` | `Boolean` |  | Increases the shadow depth to appear elevated. |
 
 ## CardTitle
 A versatile title block that can be used in
@@ -59,11 +59,11 @@ to the title content.
 ### Properties
 | Name | Type | Default | Description |
 |:-----|:-----|:-----|:-----|
-| `avatar` | `union`(`string`,`element`) |  |  |
-| `children` | `union`(`string`,`element`,`array`) |  | Children to pass through the component. |
-| `className` | `string` |  | Additional class(es) for custom styling. |
-| `subtitle` | `string` |  |  |
-| `title` | `string` |  |  |
+| `avatar` | `String` or `Element` |  | A string URL or Element to specify an avatar in the left side of the title. |
+| `children` | `String`, `Element` or `Array` |  | Children to pass through the component. |
+| `className` | `String` |  | Additional class(es) for custom styling. |
+| `subtitle` | `String` |  | Text used for the sub header of the card. |
+| `title` | `String` |  | Text used for the title of the card.  |
 
 ## CardMedia
 
@@ -75,11 +75,11 @@ color instead of an image.
 | Name | Type | Default | Description |
 |:-----|:-----|:-----|:-----|
 | `aspectRatio` | `enum`(`'wide'`,`'square'`) |  | Forces a 16:9 or 1:1 aspect ratio respectively. Unset, the media area will have a flexible height. |
-| `children` | `any` |  | Usually an image/video element or a `<CardTitle>` component. |
-| `className` | `string` |  | Additional class(es) for custom styling. |
-| `color` | `string` |  | Sets the background color |
-| `contentOverlay` | `bool` |  | Creates a dark overlay underneath the child components. |
-| `image` | `union`(`string`,`element`) |  | Can be used instead of children. Accepts an element or a URL string. |
+| `children` | `Any` |  | Usually an image/video element or a `<CardTitle>` component. |
+| `className` | `String` |  | Additional class(es) for custom styling. |
+| `color` | `String` |  | Sets the background color |
+| `contentOverlay` | `Boolean` |  | Creates a dark overlay underneath the child components. |
+| `image` | `String`, `Element` |  | Can be used instead of children. Accepts an element or a URL string. |
 
 ## CardText
 Basic card content container. Good for
@@ -88,8 +88,8 @@ small descriptions or other supplementary text.
 ### Properties
 | Name | Type | Default | Description |
 |:-----|:-----|:-----|:-----|
-| `children` | `any` |  | Children to pass through the component. |
-| `className` | `string` |  | Additional class(es) for custom styling. |
+| `children` | `Any` |  | Children to pass through the component. |
+| `className` | `String` |  | Additional class(es) for custom styling. |
 
 ## CardActions
 
@@ -101,5 +101,5 @@ typically placed at the bottom of the card.
 ### Properties
 | Name | Type | Default | Description |
 |:-----|:-----|:-----|:-----|
-| `children` | `any` |  | Children to pass through the component. |
-| `className` | `string` |  | Additional class(es) for custom styling. |
+| `children` | `Any` |  | Children to pass through the component. |
+| `className` | `String` |  | Additional class(es) for custom styling. |

From 16fac7a5c4545e1bb29ab90f98b1502e5bea37cd Mon Sep 17 00:00:00 2001
From: Keren Chandran <keren.chandran@gmail.com>
Date: Sat, 26 Mar 2016 19:30:19 -0400
Subject: [PATCH 0434/1024] Updated Babel Standalone to latest version

---
 docs/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/package.json b/docs/package.json
index 68e70ffc4..56e7c075d 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -9,7 +9,7 @@
     "deploy": "gh-pages -d build"
   },
   "dependencies": {
-    "babel-standalone": "^1.0.0",
+    "babel-standalone": "^6.7.4",
     "classnames": "^2.2.1",
     "codemirror": "^5.10.0",
     "history": "^1.17.0",

From 7b7b0426efcbbda929182a43aca293ef8c212497 Mon Sep 17 00:00:00 2001
From: Keren Chandran <keren.chandran@gmail.com>
Date: Sat, 26 Mar 2016 19:54:30 -0400
Subject: [PATCH 0435/1024] Added onMouseUp and onMouseLeave props to Icon
 Button to make it similar to Button Component.

---
 components/button/IconButton.jsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/components/button/IconButton.jsx b/components/button/IconButton.jsx
index 401270454..f8e116276 100644
--- a/components/button/IconButton.jsx
+++ b/components/button/IconButton.jsx
@@ -14,6 +14,8 @@ class IconButton extends React.Component {
     icon: React.PropTypes.any,
     inverse: React.PropTypes.bool,
     neutral: React.PropTypes.bool,
+    onMouseLeave: React.PropTypes.func,
+    onMouseUp: React.PropTypes.func,
     primary: React.PropTypes.bool,
     type: React.PropTypes.string
   };
@@ -25,8 +27,14 @@ class IconButton extends React.Component {
     primary: false
   };
 
-  handleMouseUp = () => {
+  handleMouseUp = (event) => {
     this.refs.button.blur();
+    if (this.props.onMouseUp) this.props.onMouseUp(event);
+  };
+
+  handleMouseLeave = (event) => {
+    this.refs.button.blur();
+    if (this.props.onMouseLeave) this.props.onMouseLeave(event);
   };
 
   render () {

From 6470b44d5a4969655b1c6459ecfac80022cfe027 Mon Sep 17 00:00:00 2001
From: James Hycner <hycner@gmail.com>
Date: Sun, 27 Mar 2016 16:29:08 -0700
Subject: [PATCH 0436/1024] Change snackbar to fix issue where lingering
 timeouts would effect new activations

---
 components/snackbar/Snackbar.jsx | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/components/snackbar/Snackbar.jsx b/components/snackbar/Snackbar.jsx
index 82377c03b..c2842d40b 100644
--- a/components/snackbar/Snackbar.jsx
+++ b/components/snackbar/Snackbar.jsx
@@ -18,11 +18,24 @@ class Snackbar extends React.Component {
     type: React.PropTypes.string
   };
 
-  componentDidUpdate () {
-    if (this.props.active && this.props.timeout) {
-      setTimeout(() => {
-        this.props.onTimeout();
-      }, this.props.timeout);
+  state = {
+    curTimeout: null
+  };
+
+  componentWillReceiveProps (nextProps) {
+    if (nextProps.active && nextProps.timeout) {
+      if(this.state.curTimeout) clearTimeout(this.state.curTimeout);
+
+      let curTimeout = setTimeout(() => {
+        nextProps.onTimeout();
+        this.setState({
+          curTimeout: null
+        });
+      }, nextProps.timeout);
+
+      this.setState({
+        curTimeout
+      });
     }
   }
 

From d5eebd9fa9ad4dea67cb219a5fbf7a52e6b644e1 Mon Sep 17 00:00:00 2001
From: James Hycner <hycner@gmail.com>
Date: Sun, 27 Mar 2016 17:10:49 -0700
Subject: [PATCH 0437/1024] Fix style changes from TravisCI build

---
 components/snackbar/Snackbar.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/snackbar/Snackbar.jsx b/components/snackbar/Snackbar.jsx
index c2842d40b..3f214dfb2 100644
--- a/components/snackbar/Snackbar.jsx
+++ b/components/snackbar/Snackbar.jsx
@@ -24,9 +24,9 @@ class Snackbar extends React.Component {
 
   componentWillReceiveProps (nextProps) {
     if (nextProps.active && nextProps.timeout) {
-      if(this.state.curTimeout) clearTimeout(this.state.curTimeout);
+      if (this.state.curTimeout) clearTimeout(this.state.curTimeout);
 
-      let curTimeout = setTimeout(() => {
+      const curTimeout = setTimeout(() => {
         nextProps.onTimeout();
         this.setState({
           curTimeout: null

From 125cac1b5ef5d28d1184139d49bd01844a40a4ee Mon Sep 17 00:00:00 2001
From: Olivier Louvignes <olivier@mg-crea.com>
Date: Wed, 30 Mar 2016 18:13:28 +0200
Subject: [PATCH 0438/1024] docs(media): keep navigation for wider screens

---
 docs/app/components/layout/main/_config.scss |  2 ++
 docs/app/components/layout/main/style.scss   | 17 +++++++++++++++++
 2 files changed, 19 insertions(+)

diff --git a/docs/app/components/layout/main/_config.scss b/docs/app/components/layout/main/_config.scss
index ca774b3d2..d564a848c 100644
--- a/docs/app/components/layout/main/_config.scss
+++ b/docs/app/components/layout/main/_config.scss
@@ -1,5 +1,7 @@
 @import "http://github.com/globals";
 
+$media-min-width: 1440px;
+$playground-max-width: $media-min-width / 2;
 $playground-width: 50%;
 $navigation-width: 22 * $unit;
 $navigation-h-padding: 2.4 * $unit;
diff --git a/docs/app/components/layout/main/style.scss b/docs/app/components/layout/main/style.scss
index 154228177..c8506d430 100644
--- a/docs/app/components/layout/main/style.scss
+++ b/docs/app/components/layout/main/style.scss
@@ -80,3 +80,20 @@ hr {
 .load-button {
   display: inline-block;
 }
+
+@media(min-width: $media-min-width) {
+  .root {
+    .playground {
+      width: $playground-max-width;
+    }
+    &.with-playground {
+      > .documentation {
+        padding-right: $playground-max-width;
+        padding-left: $navigation-width;
+      }
+      > .navigation {
+        transform: translateX(0);
+      }
+    }
+  }
+}

From 3ee2e9438c52126d3b0503fa455e5a40fb0ac686 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 7 Mar 2016 09:53:50 +0100
Subject: [PATCH 0439/1024] 0.14.2 release

---
 package.json | 78 ++++++++++++++++++++++++++++------------------------
 1 file changed, 42 insertions(+), 36 deletions(-)

diff --git a/package.json b/package.json
index 90053f5e9..785d2a9d8 100644
--- a/package.json
+++ b/package.json
@@ -1,56 +1,43 @@
 {
   "name": "react-toolbox",
-  "version": "0.14.1",
-  "homepage": "http://www.react-toolbox.com/",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
-  "author": "React Toolbox Team (http://github.com/react-toolbox)",
+  "homepage": "http://www.react-toolbox.com/",
+  "version": "0.14.2",
+  "main": "./lib",
+  "author": {
+    "name": "React Toolbox Team",
+    "url": "http://github.com/react-toolbox"
+  },
   "contributors": [
     {
       "name": "Javi Jimenez Villar",
-      "url": "http://soyjavi.com/",
-      "email": "javi.jimenez.villar@gmail.com"
+      "email": "javi.jimenez.villar@gmail.com",
+      "url": "http://soyjavi.com/"
     },
     {
       "name": "Javi Velasco Arjona",
-      "url": "http://javivelasco.com/",
-      "email": "javier.velasco86@gmail.com"
+      "email": "javier.velasco86@gmail.com",
+      "url": "http://javivelasco.com/"
     }
   ],
-  "main": "./lib",
-  "scripts": {
-    "start": "cross-env NODE_ENV=development UV_THREADPOOL_SIZE=100 node ./server",
-    "lint": "eslint ./ --ext .js,.jsx",
-    "babel": "babel ./components --out-dir ./lib",
-    "sass": "cpx './components/**/*.scss' ./lib",
-    "build": "cross-env NODE_ENV=production npm run babel && npm run sass",
-    "clean": "rimraf ./lib",
-    "prebuild": "npm run clean",
-    "prepublish": "npm run build",
-    "test": "cross-env NODE_ENV=test karma start",
-    "test:watch": "cross-env NODE_ENV=test karma start --no-single-run",
-    "release": "bumped release",
-    "patch": "bumped release patch"
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/react-toolbox/react-toolbox.git"
   },
   "bugs": {
     "url": "https://github.com/react-toolbox/react-toolbox/issues",
     "email": "issues@react-toolbox.com"
   },
   "keywords": [
+    "components",
+    "material design",
     "react",
     "react-component",
-    "material design",
-    "toolkit",
-    "components"
+    "toolkit"
   ],
-  "license": "MIT",
-  "peerDependencies": {
-    "classnames": "^2.2.0",
-    "react": "^0.14",
-    "react-dom": "^0.14.0",
-    "react-addons-css-transition-group": "^0.14.0",
-    "normalize.css": "^3.0.3"
+  "dependencies": {
+    "classnames": "^2.2.1"
   },
-  "typings": "./react-toolbox.d.ts",
   "devDependencies": {
     "autoprefixer": "^6.2.1",
     "babel-cli": "^6.3.17",
@@ -103,8 +90,27 @@
     "webpack-dev-middleware": "^1.4.0",
     "webpack-hot-middleware": "^2.6.0"
   },
-  "repository": "github:react-toolbox/react-toolbox",
-  "dependencies": {
-    "classnames": "^2.2.1"
-  }
+  "scripts": {
+    "babel": "babel ./components --out-dir ./lib",
+    "build": "cross-env NODE_ENV=production npm run babel && npm run sass",
+    "clean": "rimraf ./lib",
+    "lint": "eslint ./ --ext .js,.jsx",
+    "patch": "bumped release patch",
+    "prebuild": "npm run clean",
+    "prepublish": "npm run build",
+    "release": "bumped release",
+    "sass": "cpx './components/**/*.scss' ./lib",
+    "start": "cross-env NODE_ENV=development UV_THREADPOOL_SIZE=100 node ./server",
+    "test": "cross-env NODE_ENV=test karma start",
+    "test:watch": "cross-env NODE_ENV=test karma start --no-single-run"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "classnames": "^2.2.0",
+    "normalize.css": "^3.0.3",
+    "react": "^0.14",
+    "react-addons-css-transition-group": "^0.14.0",
+    "react-dom": "^0.14.0"
+  },
+  "typings": "./react-toolbox.d.ts"
 }

From e3a805b51bd61a421865b65429dfb9af6535f121 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 24 Mar 2016 18:21:26 +0100
Subject: [PATCH 0440/1024] 0.15.0 release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 785d2a9d8..a18e53df3 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "react-toolbox",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "homepage": "http://www.react-toolbox.com/",
-  "version": "0.14.2",
+  "version": "0.15.0",
   "main": "./lib",
   "author": {
     "name": "React Toolbox Team",

From b26e1f6fdc81d1a98a69a306e1e72c1cf045fba8 Mon Sep 17 00:00:00 2001
From: Gadi Cohen <dragon@wastelands.net>
Date: Thu, 31 Mar 2016 08:02:00 +0200
Subject: [PATCH 0441/1024] have Dialog.jsx import from './style' and not
 './style.scss'

---
 components/dialog/Dialog.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/dialog/Dialog.jsx b/components/dialog/Dialog.jsx
index 6cd57799f..08260effc 100644
--- a/components/dialog/Dialog.jsx
+++ b/components/dialog/Dialog.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import ClassNames from 'classnames';
 import Button from '../button';
 import Overlay from '../overlay';
-import style from './style.scss';
+import style from './style';
 
 const Dialog = (props) => {
   const actions = props.actions.map((action, idx) => {

From b6b51a41fc7378b0b736ccf89e516c3cb2285db9 Mon Sep 17 00:00:00 2001
From: Gadi Cohen <dragon@wastelands.net>
Date: Mon, 28 Mar 2016 17:29:25 +0200
Subject: [PATCH 0442/1024] only render content of current tab + linting, docs,
 test

---
 components/tabs/Tabs.jsx                 | 14 ++++---
 components/tabs/__tests__/index.spec.jsx | 51 ++++++++++++++++++++++++
 components/tabs/readme.md                |  2 +-
 3 files changed, 60 insertions(+), 7 deletions(-)
 create mode 100644 components/tabs/__tests__/index.spec.jsx

diff --git a/components/tabs/Tabs.jsx b/components/tabs/Tabs.jsx
index 561f4a891..ad73e249e 100644
--- a/components/tabs/Tabs.jsx
+++ b/components/tabs/Tabs.jsx
@@ -82,12 +82,14 @@ class Tabs extends React.Component {
   }
 
   renderContents (contents) {
-    return contents.map((item, idx) => {
-      return React.cloneElement(item, {
-        key: idx,
-        active: this.props.index === idx,
-        tabIndex: idx
-      });
+    const activeIdx = contents.findIndex((item, idx) => {
+      return this.props.index === idx;
+    });
+
+    return React.cloneElement(contents[activeIdx], {
+      key: activeIdx,
+      active: true,
+      tabIndex: activeIdx
     });
   }
 
diff --git a/components/tabs/__tests__/index.spec.jsx b/components/tabs/__tests__/index.spec.jsx
new file mode 100644
index 000000000..311c63310
--- /dev/null
+++ b/components/tabs/__tests__/index.spec.jsx
@@ -0,0 +1,51 @@
+import expect from 'expect';
+import utils from '../../utils/testing';
+import ReactTestUtils from 'react-addons-test-utils';
+
+import React, { Component } from 'react';
+
+import Tabs from '../Tabs';
+import Tab from '../Tab';
+import TabContent from '../TabContent';
+
+describe('Tabs', function () {
+  let tabContents, composition;
+
+  it('only renders the current tab', function () {
+    class Composition extends Component {
+      constructor () {
+        super();
+        this.state = { index: 0 };
+      }
+
+      render () {
+        return (
+          <Tabs index={this.state.index}>
+            <Tab label="tab1">tab1</Tab>
+            <Tab label="tab2">tab2</Tab>
+          </Tabs>
+        );
+      }
+    }
+
+    // initial render
+    composition = utils.renderComponent(Composition);
+
+    tabContents = ReactTestUtils
+      .scryRenderedComponentsWithType(composition, TabContent);
+
+    expect(tabContents.length).toEqual(1);
+    expect(tabContents[0].props.tabIndex).toEqual(0);
+
+    // after tab change
+    composition.setState({ index: 1 });
+    composition.forceUpdate();
+
+    tabContents = ReactTestUtils
+      .scryRenderedComponentsWithType(composition, TabContent);
+
+    expect(tabContents.length).toEqual(1);
+    expect(tabContents[0].props.tabIndex).toEqual(1);
+  });
+
+});
diff --git a/components/tabs/readme.md b/components/tabs/readme.md
index d3b7995b3..c7fc006f0 100644
--- a/components/tabs/readme.md
+++ b/components/tabs/readme.md
@@ -1,6 +1,6 @@
 # Tabs
 
-[Tabs](https://www.google.com/design/spec/components/tabs.html) make it easy to explore and switch between different views or functional aspects of an app or to browse categorized data sets. For now we are using tabs along with content so it's not possible to render just the tab headers with event listeners. In the future we will add this feature but for now you can compose your tabs with content:
+[Tabs](https://www.google.com/design/spec/components/tabs.html) make it easy to explore and switch between different views or functional aspects of an app or to browse categorized data sets.  Tabs are composed with their content, but only the active tab's content is rendered.  In the future, we may add the ability to render headers only, with event listeners.
 
 <!-- example -->
 ```jsx

From f7ef77b1f0a065b93b8a0cd3d373e1b4dc4232f9 Mon Sep 17 00:00:00 2001
From: Gadi Cohen <dragon@wastelands.net>
Date: Thu, 31 Mar 2016 11:08:57 +0200
Subject: [PATCH 0443/1024] keepachangelog.com :)

---
 CHANGELOG.md | 44 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 CHANGELOG.md

diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 000000000..451204539
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,44 @@
+# Change Log
+All notable changes to this project will be documented in this file.
+This project adheres to [Semantic Versioning](http://semver.org/).
+
+## [Unreleased]
+### Changed
+- Tabs now only render the contents of the currently active tab.
+
+## [0.15.0] - 2016-03-24
+
+Click on the link above for this release's commit history.
+
+## [0.14.2] - 2016-03-07
+
+Click on the link above for this release's commit history.
+
+## [0.14.1] - 2016-01-26
+
+Click on the link above for this release's commit history.
+
+## [0.14.0] - 2015-12-20
+### Added
+- A `Ripple` HOC that can be used with your custom components.
+
+### Changed
+- Added `className` for the pickers to customize them.
+- Animated auto-transition in `DatePicker` component.
+- All `Input` components have now an error prop.
+- `Dropdown` improvements and normalization with `Input` component.
+- More `react-toolbox` attributes to easy customize picker components.
+- `btn-colors` mixin extracted to easily define custom `Buttons`.
+- New `neutral` boolean property to avoid taking default styles in `Button`.
+- Remove hidden scroll from webkit browsers by `commons.scss`.
+- Better `Navigation` styles.
+- `Overlay` opacity can now be styled from CSS.
+
+**For previous changes, please see the commit messages in
+https://github.com/react-toolbox/react-toolbox/releases.**
+
+[Unreleased]: https://github.com/react-toolbox/react-toolbox/compare/0.15.0...dev
+[0.15.0]: https://github.com/react-toolbox/react-toolbox/compare/0.14.2...0.15.0
+[0.14.2]: https://github.com/react-toolbox/react-toolbox/compare/0.14.1...0.14.2
+[0.14.1]: https://github.com/react-toolbox/react-toolbox/compare/0.14.0...0.14.1
+[0.14.0]: https://github.com/react-toolbox/react-toolbox/compare/0.13.4...0.14.0

From ed1f3c65d84c154d5ba441917248ccb26558e678 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Emil=20O=CC=88berg?= <emil.oberg@monator.com>
Date: Thu, 31 Mar 2016 16:29:26 +0200
Subject: [PATCH 0444/1024] Don't show actions container in dialog if no
 actions exist

---
 components/dialog/Dialog.jsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/components/dialog/Dialog.jsx b/components/dialog/Dialog.jsx
index 08260effc..eae2aa200 100644
--- a/components/dialog/Dialog.jsx
+++ b/components/dialog/Dialog.jsx
@@ -28,9 +28,12 @@ const Dialog = (props) => {
           {props.title ? <h6 className={style.title}>{props.title}</h6> : null}
           {props.children}
         </section>
-        <nav role='navigation' className={style.navigation}>
-          {actions}
-        </nav>
+        {actions ?
+          <nav role='navigation' className={style.navigation}>
+            {actions}
+          </nav> :
+          null
+        }
       </div>
     </Overlay>
   );

From 37f8f4c992274894698c13bf0a7c8b1057f71905 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Emil=20O=CC=88berg?= <emil.oberg@monator.com>
Date: Sat, 2 Apr 2016 00:47:39 +0200
Subject: [PATCH 0445/1024] Added !default to all config values as per #424

This way, all config values can be overridden with custom style
---
 components/app_bar/_config.scss      |  6 ++---
 components/autocomplete/_config.scss | 10 ++++----
 components/button/_config.scss       | 20 ++++++++--------
 components/card/_config.scss         |  8 +++----
 components/date_picker/_config.scss  | 32 +++++++++++++-------------
 components/dialog/_config.scss       |  8 +++----
 components/drawer/_config.scss       |  2 +-
 components/dropdown/_config.scss     |  4 ++--
 components/input/_config.scss        | 22 +++++++++---------
 components/list/_config.scss         | 34 ++++++++++++++--------------
 components/menu/_config.scss         | 20 ++++++++--------
 components/progress_bar/_config.scss |  8 +++----
 components/radio/_config.scss        |  6 ++---
 components/slider/_config.scss       | 18 +++++++--------
 components/switch/_config.scss       |  2 +-
 components/table/_config.scss        |  4 ++--
 components/tabs/_config.scss         | 12 +++++-----
 components/time_picker/_config.scss  | 24 ++++++++++----------
 18 files changed, 120 insertions(+), 120 deletions(-)

diff --git a/components/app_bar/_config.scss b/components/app_bar/_config.scss
index b787db5e3..067be3376 100644
--- a/components/app_bar/_config.scss
+++ b/components/app_bar/_config.scss
@@ -1,6 +1,6 @@
 $appbar-color: $color-primary-dark !default;
 $appbar-contrast: $color-primary-contrast !default;
-$appbar-title-total-distance: 8 * $unit;
+$appbar-title-total-distance: 8 * $unit !default;
 $appbar-height: 6.4 * $unit !default;
-$appbar-h-padding: 2.4 * $unit;
-$appbar-title-distance: $appbar-title-total-distance - $appbar-h-padding;
+$appbar-h-padding: 2.4 * $unit !default;
+$appbar-title-distance: $appbar-title-total-distance - $appbar-h-padding !default;
diff --git a/components/autocomplete/_config.scss b/components/autocomplete/_config.scss
index ccd8a81da..65172e41a 100644
--- a/components/autocomplete/_config.scss
+++ b/components/autocomplete/_config.scss
@@ -1,9 +1,9 @@
 $autocomplete-color-primary-contrast: $color-primary-contrast !default;
 $autocomplete-color-primary: $color-primary !default;
-$autocomplete-overflow-max-height: 45vh;
+$autocomplete-overflow-max-height: 45vh !default;
 $autocomplete-suggestion-active-background: $palette-grey-200 !default;
-$autocomplete-suggestion-padding: $unit;
+$autocomplete-suggestion-padding: $unit !default;
 $autocomplete-suggestions-background: $color-white !default;
-$autocomplete-value-border-radius: .2 * $unit;
-$autocomplete-value-margin: $unit * .25 $unit * .5 $unit * .25 0;
-$autocomplete-value-padding: $unit * .5 $unit * .75;
+$autocomplete-value-border-radius: .2 * $unit !default;
+$autocomplete-value-margin: $unit * .25 $unit * .5 $unit * .25 0 !default;
+$autocomplete-value-padding: $unit * .5 $unit * .75 !default;
diff --git a/components/button/_config.scss b/components/button/_config.scss
index 45ec2f956..8dc4f510a 100644
--- a/components/button/_config.scss
+++ b/components/button/_config.scss
@@ -9,13 +9,13 @@ $button-accent-color-hover: rgba($color-accent, 0.20) !default;
 $button-accent-color: $color-accent !default;
 $button-disabled-text-color: rgba($color-black, 0.26) !default;
 $button-disabled-background-color: rgba($color-black, 0.12) !default;
-$button-border-radius: 0.2 * $unit;
-$button-floating-font-size: $unit * 2.4;
-$button-floating-height: $unit * 5.6;
-$button-floating-mini-height: $unit * 4;
-$button-floating-mini-font-size: $button-floating-mini-height / 2.25;
-$button-height: $unit * 3.6;
-$button-squared-icon-margin: $unit * .6;
-$button-squared-min-width: 9 * $unit;
-$button-squared-padding: 0 $unit * 1.2;
-$button-toggle-font-size: $unit * 2;
+$button-border-radius: 0.2 * $unit !default;
+$button-floating-font-size: $unit * 2.4 !default;
+$button-floating-height: $unit * 5.6 !default;
+$button-floating-mini-height: $unit * 4 !default;
+$button-floating-mini-font-size: $button-floating-mini-height / 2.25 !default;
+$button-height: $unit * 3.6 !default;
+$button-squared-icon-margin: $unit * .6 !default;
+$button-squared-min-width: 9 * $unit !default;
+$button-squared-padding: 0 $unit * 1.2 !default;
+$button-toggle-font-size: $unit * 2 !default;
diff --git a/components/card/_config.scss b/components/card/_config.scss
index 7483abecb..c89b3cb53 100644
--- a/components/card/_config.scss
+++ b/components/card/_config.scss
@@ -1,7 +1,7 @@
 $card-color-white: $color-white !default;
 $card-text-overlay: rgba($color-black, 0.35) !default;
 $card-background-color: $card-color-white !default;
-$card-padding-sm: .8 * $unit;
-$card-padding: 1.6 * $unit;
-$card-padding-lg: 2 * $unit;
-$card-font-size: $font-size-small;
+$card-padding-sm: .8 * $unit !default;
+$card-padding: 1.6 * $unit !default;
+$card-padding-lg: 2 * $unit !default;
+$card-font-size: $font-size-small !default;
diff --git a/components/date_picker/_config.scss b/components/date_picker/_config.scss
index 857dd3665..50242fffe 100644
--- a/components/date_picker/_config.scss
+++ b/components/date_picker/_config.scss
@@ -5,14 +5,14 @@ $datepicker-primary-color: $datepicker-primary !default;
 $datepicker-primary-hover-color: rgba($datepicker-primary, 0.20) !default;
 $datepicker-primary-contrast-color: $datepicker-primary-contrast !default;
 $datepicker-primary-dark-color: $datepicker-primary-dark !default;
-$datepicker-dialog-width: 33 * $unit;
-$datepicker-inactive-opacity: .6;
-$datepicker-weekday-line-height: 2 * $unit;
-$datepicker-weekday-font-size: $font-size-small;
-$datepicker-month-font-size: $font-size-big;
-$datepicker-day-font-size: 5 * $unit;
-$datepicker-day-line-height: 4 * $unit;
-$datepicker-year-font-size: $font-size-small;
+$datepicker-dialog-width: 33 * $unit !default;
+$datepicker-inactive-opacity: .6 !default;
+$datepicker-weekday-line-height: 2 * $unit !default;
+$datepicker-weekday-font-size: $font-size-small !default;
+$datepicker-month-font-size: $font-size-big !default;
+$datepicker-day-font-size: 5 * $unit !default;
+$datepicker-day-line-height: 4 * $unit !default;
+$datepicker-year-font-size: $font-size-small !default;
 
 $calendar-primary: $color-primary !default;
 $calendar-primary-contrast: $color-primary-contrast !default;
@@ -20,11 +20,11 @@ $calendar-primary-color: $calendar-primary !default;
 $calendar-primary-contrast-color: $calendar-primary-contrast !default;
 $calendar-primary-hover-color: rgba($calendar-primary, 0.21) !default;
 $calendar-arrows-color: $palette-grey-600 !default;
-$calendar-arrows-font-size: 2 * $unit;
-$calendar-year-font-size: 2.4;
-$calendar-day-font-size: 1.3 * $unit;
-$calendar-day-disable-opacity: 0.25;
-$calendar-row-height: 3 * $unit;
-$calendar-day-padding: .2 * $unit;
-$calendar-title-height: 3.6 * $unit;
-$calendar-total-height: $calendar-row-height * 7 + $calendar-title-height + $calendar-day-padding * 12;
+$calendar-arrows-font-size: 2 * $unit !default;
+$calendar-year-font-size: 2.4 !default;
+$calendar-day-font-size: 1.3 * $unit !default;
+$calendar-day-disable-opacity: 0.25 !default;
+$calendar-row-height: 3 * $unit !default;
+$calendar-day-padding: .2 * $unit !default;
+$calendar-title-height: 3.6 * $unit !default;
+$calendar-total-height: $calendar-row-height * 7 + $calendar-title-height + $calendar-day-padding * 12 !default;
diff --git a/components/dialog/_config.scss b/components/dialog/_config.scss
index cc1d68849..c522075c9 100644
--- a/components/dialog/_config.scss
+++ b/components/dialog/_config.scss
@@ -1,6 +1,6 @@
-$dialog-border-radius: .2 * $unit;
+$dialog-border-radius: .2 * $unit !default;
 $dialog-color-title: $color-black !default;
 $dialog-color-white: $color-white !default;
-$dialog-content-padding: 2.4 * $unit;
-$dialog-navigation-padding: .8 * $unit;
-$dialog-translate-y: 4 * $unit;
+$dialog-content-padding: 2.4 * $unit !default;
+$dialog-navigation-padding: .8 * $unit !default;
+$dialog-translate-y: 4 * $unit !default;
diff --git a/components/drawer/_config.scss b/components/drawer/_config.scss
index 220125048..2401bc696 100644
--- a/components/drawer/_config.scss
+++ b/components/drawer/_config.scss
@@ -1,4 +1,4 @@
 $drawer-background-color: $palette-grey-50 !default;
 $drawer-border-color: $palette-grey-300 !default;
 $drawer-text-color: $palette-grey-800 !default;
-$drawer-width: 24 * $unit;
+$drawer-width: 24 * $unit !default;
diff --git a/components/dropdown/_config.scss b/components/dropdown/_config.scss
index 9fab84376..364815c0b 100644
--- a/components/dropdown/_config.scss
+++ b/components/dropdown/_config.scss
@@ -2,5 +2,5 @@ $dropdown-color-white: $color-white !default;
 $dropdown-color-primary: $color-primary !default;
 $dropdown-color-primary-contrast: $color-primary-contrast !default;
 $dropdown-value-hover-background: $palette-grey-200 !default;
-$dropdown-overflow-max-height: 45vh;
-$dropdown-value-border-radius: .2 * $unit;
+$dropdown-overflow-max-height: 45vh !default;
+$dropdown-value-border-radius: .2 * $unit !default;
diff --git a/components/input/_config.scss b/components/input/_config.scss
index a13dab4d1..4c76f14b7 100644
--- a/components/input/_config.scss
+++ b/components/input/_config.scss
@@ -1,9 +1,9 @@
-$input-padding: 2 * $unit;
-$input-field-padding: .8 * $unit;
-$input-field-font-size: 1.6 * $unit;
-$input-field-height: $input-field-padding * 2 + $input-field-font-size * 1.4;
-$input-label-font-size: 1.2 * $unit;
-$input-focus-label-top: .6 * $unit;
+$input-padding: 2 * $unit !default;
+$input-field-padding: .8 * $unit !default;
+$input-field-font-size: 1.6 * $unit !default;
+$input-field-height: $input-field-padding * 2 + $input-field-font-size * 1.4 !default;
+$input-label-font-size: 1.2 * $unit !default;
+$input-focus-label-top: .6 * $unit !default;
 $input-text-background-color: transparent !default;
 $input-text-label-color: rgba($color-black, 0.26) !default;
 $input-text-bottom-border-color: rgba($color-black, 0.12) !default;
@@ -12,9 +12,9 @@ $input-text-disabled-color: $input-text-bottom-border-color !default;
 $input-text-disabled-text-color: $input-text-label-color !default;
 $input-text-error-color: rgb(222, 230, 38) !default;
 $input-text-required-color: rgb(222, 50, 38) !default;
-$input-underline-height:  2 * $unit;
-$input-icon-font-size: 2.4 * $unit;
-$input-icon-size: 2 * $input-icon-font-size;
-$input-icon-offset: 1.6 * $unit;
-$input-chevron-offset: .8 * $unit;
+$input-underline-height:  2 * $unit !default;
+$input-icon-font-size: 2.4 * $unit !default;
+$input-icon-size: 2 * $input-icon-font-size !default;
+$input-icon-offset: 1.6 * $unit !default;
+$input-chevron-offset: .8 * $unit !default;
 $input-hint-opacity: 1 !default;
diff --git a/components/list/_config.scss b/components/list/_config.scss
index 3fef370a1..a8814551f 100644
--- a/components/list/_config.scss
+++ b/components/list/_config.scss
@@ -1,18 +1,18 @@
-$list-vertical-padding: .8 * $unit;
-$list-horizontal-padding: 1.6 * $unit;
-$list-content-left-spacing: 7.2 * $unit;
-$list-subheader-height: 4.8 * $unit;
-$list-subheader-font-size: 1.4 * $unit;
-$list-subheader-font-weight: 500;
-$list-divider-height: .1 * $unit;
-$list-item-min-height: 4.8 * $unit;
-$list-item-min-height-legend: 7.2 * $unit;
+$list-vertical-padding: .8 * $unit !default;
+$list-horizontal-padding: 1.6 * $unit !default;
+$list-content-left-spacing: 7.2 * $unit !default;
+$list-subheader-height: 4.8 * $unit !default;
+$list-subheader-font-size: 1.4 * $unit !default;
+$list-subheader-font-weight: 500 !default;
+$list-divider-height: .1 * $unit !default;
+$list-item-min-height: 4.8 * $unit !default;
+$list-item-min-height-legend: 7.2 * $unit !default;
 $list-item-hover-color: $palette-grey-200 !default;
-$list-item-legend-margin-top: .3 * $unit;
-$list-item-icon-font-size: 2.4 * $unit;
-$list-item-icon-size: 1.8 * $unit;
-$list-item-right-icon-margin: $list-content-left-spacing - 2 * $list-horizontal-padding - $list-item-icon-size;
-$list-item-right-checkbox-margin: $list-item-right-icon-margin + $list-horizontal-padding;
-$list-item-avatar-height: 4 * $unit;
-$list-item-avatar-margin: .8 * $unit;
-$list-item-child-margin: .8 * $unit;
+$list-item-legend-margin-top: .3 * $unit !default;
+$list-item-icon-font-size: 2.4 * $unit !default;
+$list-item-icon-size: 1.8 * $unit !default;
+$list-item-right-icon-margin: $list-content-left-spacing - 2 * $list-horizontal-padding - $list-item-icon-size !default;
+$list-item-right-checkbox-margin: $list-item-right-icon-margin + $list-horizontal-padding !default;
+$list-item-avatar-height: 4 * $unit !default;
+$list-item-avatar-margin: .8 * $unit !default;
+$list-item-child-margin: .8 * $unit !default;
diff --git a/components/menu/_config.scss b/components/menu/_config.scss
index ca1f986f6..0b5343661 100644
--- a/components/menu/_config.scss
+++ b/components/menu/_config.scss
@@ -2,15 +2,15 @@ $menu-expand-duration: .3s !default;
 $menu-fade-duration: .2s !default;
 $menu-ripple-delay: .3s !default;
 $menu-background-color: $color-white !default;
-$menu-padding: .8 * $unit 0;
-$menu-outline-border-radius: .2 * $unit;
+$menu-padding: .8 * $unit 0 !default;
+$menu-outline-border-radius: .2 * $unit !default;
 $menu-item-hover-background: $palette-grey-200 !default;
 $menu-item-selected-background: transparent !default;
-$menu-item-icon-font-size: 2.4 * $unit;
-$menu-item-icon-size: 1.6 * $menu-item-icon-font-size;
-$menu-item-height: 4.8 * $unit;
-$menu-item-padding: 1.6 * $unit;
-$menu-item-font-size: 1.6 * $unit;
-$menu-divider-height: (4.8 * $unit) / 4;
-$menu-icon-size: 2.3 * $unit;
-$menu-icon-ripple-duration: 650ms;
+$menu-item-icon-font-size: 2.4 * $unit !default;
+$menu-item-icon-size: 1.6 * $menu-item-icon-font-size !default;
+$menu-item-height: 4.8 * $unit !default;
+$menu-item-padding: 1.6 * $unit !default;
+$menu-item-font-size: 1.6 * $unit !default;
+$menu-divider-height: (4.8 * $unit) / 4 !default;
+$menu-icon-size: 2.3 * $unit !default;
+$menu-icon-ripple-duration: 650ms !default;
diff --git a/components/progress_bar/_config.scss b/components/progress_bar/_config.scss
index 2d9d5d2b2..f554b346b 100644
--- a/components/progress_bar/_config.scss
+++ b/components/progress_bar/_config.scss
@@ -1,6 +1,6 @@
-$progress-height: .4 * $unit;
+$progress-height: .4 * $unit !default;
 $progress-main-color: $color-primary !default;
 $progress-secondary-color: rgba($color-primary-contrast, 0.7) !default;
-$circle-wrapper-width: 60;
-$circle-radius: 25;
-$scale-ratio: $circle-radius / 20;
+$circle-wrapper-width: 60 !default;
+$circle-radius: 25 !default;
+$scale-ratio: $circle-radius / 20 !default;
diff --git a/components/radio/_config.scss b/components/radio/_config.scss
index 67de4b873..42bc3e9dd 100644
--- a/components/radio/_config.scss
+++ b/components/radio/_config.scss
@@ -1,9 +1,9 @@
-$radio-field-margin-bottom: 1.5 * $unit;
+$radio-field-margin-bottom: 1.5 * $unit !default;
 $radio-button-size: 1.6 * $unit !default;
-$radio-inner-margin: $radio-button-size / 4;
+$radio-inner-margin: $radio-button-size / 4 !default;
 $radio-inner-color: $color-primary !default;
 $radio-focus-color: rgba($color-black, 0.1) !default;
 $radio-checked-focus-color: rgba($color-primary, 0.26) !default;
 $radio-text-color: $color-black !default;
 $radio-disabled-color: rgba($color-black, 0.26) !default;
-$radio-text-font-size: 1.4 * $unit;
+$radio-text-font-size: 1.4 * $unit !default;
diff --git a/components/slider/_config.scss b/components/slider/_config.scss
index 30c82699c..a5b0799b2 100644
--- a/components/slider/_config.scss
+++ b/components/slider/_config.scss
@@ -1,12 +1,12 @@
 $slider-main-color: $color-primary !default;
 $slider-main-color-contrast: $color-primary-contrast !default;
 $slider-snap-color: $color-black !default;
-$slider-knob-size: 3.2 * $unit;
-$slider-inner-knob-size: 1.2 * $unit;
-$slider-snap-size: .2 * $unit;
-$slider-input-width: 5 * $unit;
-$slider-bar-height: .2 * $unit;
-$slider-pin-size: 2.6 * $unit;
-$slider-pin-elevation: 1.7 * $unit;
-$slider-side-separation: 1 * $unit;
-$slider-empty-knob-border: .2 * $unit;
+$slider-knob-size: 3.2 * $unit !default;
+$slider-inner-knob-size: 1.2 * $unit !default;
+$slider-snap-size: .2 * $unit !default;
+$slider-input-width: 5 * $unit !default;
+$slider-bar-height: .2 * $unit !default;
+$slider-pin-size: 2.6 * $unit !default;
+$slider-pin-elevation: 1.7 * $unit !default;
+$slider-side-separation: 1 * $unit !default;
+$slider-empty-knob-border: .2 * $unit !default;
diff --git a/components/switch/_config.scss b/components/switch/_config.scss
index 31319bc24..784084717 100644
--- a/components/switch/_config.scss
+++ b/components/switch/_config.scss
@@ -16,7 +16,7 @@ $switch-thumb-size: 2 * $unit !default;
 $switch-thumb-on-color: $switch-color !default;
 $switch-focus-init-size: .8 * $unit !default;
 $switch-focus-size: $switch-total-height * 2 !default;
-$switch-focus-diff: ($switch-focus-size - $switch-focus-init-size) / 2;
+$switch-focus-diff: ($switch-focus-size - $switch-focus-init-size) / 2 !default;
 $switch-ripple-duration: 650ms !default;
 $switch-font-size: $font-size-small !default;
 $switch-field-margin-bottom: 1.5 * $unit !default;
diff --git a/components/table/_config.scss b/components/table/_config.scss
index d08114f08..7ec3b5a2b 100644
--- a/components/table/_config.scss
+++ b/components/table/_config.scss
@@ -1,5 +1,5 @@
-$table-row-height: 48px;
+$table-row-height: 48px !default;
 $table-row-divider: solid 1px rgba(0,0,0,.12) !default;
-$table-row-offset: 1.8 * $unit;
+$table-row-offset: 1.8 * $unit !default;
 $table-row-highlight: #eee !default;
 $table-text-color: #757575 !default;
diff --git a/components/tabs/_config.scss b/components/tabs/_config.scss
index 29c4e9432..09ad76cb4 100644
--- a/components/tabs/_config.scss
+++ b/components/tabs/_config.scss
@@ -1,11 +1,11 @@
-$tab-label-disabled-opacity: .2;
-$tab-label-h-padding: 1.2 * $unit;
-$tab-label-height: 4.8 * $unit;
-$tab-text-height: 1.4 * $unit;
-$tab-label-v-padding: ($tab-label-height - $tab-text-height) / 2;
+$tab-label-disabled-opacity: .2 !default;
+$tab-label-h-padding: 1.2 * $unit !default;
+$tab-label-height: 4.8 * $unit !default;
+$tab-text-height: 1.4 * $unit !default;
+$tab-label-v-padding: ($tab-label-height - $tab-text-height) / 2 !default;
 $tab-navigation-border-color: $color-divider !default;
 $tab-pointer-color: $color-primary !default;
-$tab-pointer-height: .2 * $unit;
+$tab-pointer-height: .2 * $unit !default;
 $tab-text: $color-black !default;
 $tab-text-color: $tab-text !default;
 $tab-text-inactive-color: rgba($tab-text, 0.70) !default;
diff --git a/components/time_picker/_config.scss b/components/time_picker/_config.scss
index 3ae81a875..b0fffb858 100644
--- a/components/time_picker/_config.scss
+++ b/components/time_picker/_config.scss
@@ -1,6 +1,6 @@
-$timepicker-header-font-size: 5.2 * $unit;
-$timepicker-header-padding: $unit;
-$timepicker-ampm-font-size: 1.6 * $unit;
+$timepicker-header-font-size: 5.2 * $unit !default;
+$timepicker-header-padding: $unit !default;
+$timepicker-ampm-font-size: 1.6 * $unit !default;
 $timepicker-primary: $color-primary !default;
 $timepicker-primary-contrast: $color-primary-contrast !default;
 $timepicker-primary-dark: $color-primary-dark !default;
@@ -8,11 +8,11 @@ $timepicker-primary-color: $timepicker-primary !default;
 $timepicker-primary-hover-color: rgba($timepicker-primary, 0.20) !default;
 $timepicker-primary-contrast-color: $timepicker-primary-contrast !default;
 $timepicker-primary-dark-color: $timepicker-primary-dark !default;
-$timepicker-ampm-height: 2.2 * $unit;
-$timepicker-ampm-width: 4 * $unit;
-$timepicker-dialog-width: 30 * $unit;
+$timepicker-ampm-height: 2.2 * $unit !default;
+$timepicker-ampm-width: 4 * $unit !default;
+$timepicker-dialog-width: 30 * $unit !default;
 
-$clock-padding: 1.5 * $unit 2 * $unit;
+$clock-padding: 1.5 * $unit 2 * $unit !default;
 $clock-primary: $color-primary !default;
 $clock-primary-contrast: $color-primary-contrast !default;
 $clock-primary-dark: $color-primary-dark !default;
@@ -20,8 +20,8 @@ $clock-primary-color: $clock-primary !default;
 $clock-primary-hover-color: rgba($clock-primary, 0.20) !default;
 $clock-primary-contrast-color: $clock-primary-contrast !default;
 $clock-primary-dark-color: $clock-primary-dark !default;
-$clock-number-size: 2 * $unit;
-$clock-hand-width: .4 * $unit;
-$clock-hand-dot-size: 1 * $unit;
-$clock-knob-size: 3.4 * $unit;
-$clock-knob-small-size: 1.2 * $unit;
+$clock-number-size: 2 * $unit !default;
+$clock-hand-width: .4 * $unit !default;
+$clock-hand-dot-size: 1 * $unit !default;
+$clock-knob-size: 3.4 * $unit !default;
+$clock-knob-small-size: 1.2 * $unit !default;

From 821c3e1223b9964f157645fdc868eb2597d9bee6 Mon Sep 17 00:00:00 2001
From: Lucas Correia <lucas.correia@ftrack.com>
Date: Sat, 2 Apr 2016 13:37:21 +0200
Subject: [PATCH 0446/1024] Add chip component

---
 components/chip/Chip.jsx     | 41 +++++++++++++++++++++++
 components/chip/_config.scss | 20 +++++++++++
 components/chip/index.js     |  3 ++
 components/chip/readme.md    | 37 ++++++++++++++++++++
 components/chip/style.scss   | 65 ++++++++++++++++++++++++++++++++++++
 spec/components/chip.jsx     | 32 ++++++++++++++++++
 spec/root.jsx                |  2 ++
 7 files changed, 200 insertions(+)
 create mode 100644 components/chip/Chip.jsx
 create mode 100644 components/chip/_config.scss
 create mode 100644 components/chip/index.js
 create mode 100644 components/chip/readme.md
 create mode 100644 components/chip/style.scss
 create mode 100644 spec/components/chip.jsx

diff --git a/components/chip/Chip.jsx b/components/chip/Chip.jsx
new file mode 100644
index 000000000..19966a590
--- /dev/null
+++ b/components/chip/Chip.jsx
@@ -0,0 +1,41 @@
+import React, {PropTypes} from 'react';
+import FontIcon from '../font_icon';
+import style from './style';
+import ClassNames from 'classnames';
+
+const Chip = ({className, deletable, avatar, label, ...other}) => {
+  const classes = ClassNames(style.chip, {
+      [style.deletable]: !!deletable,
+      [style.contactChip]: !!avatar
+  }, className);
+
+  return (
+    <div data-react-toolbox='chip' className={classes} {...other}>
+      {avatar ? avatar : null}
+      <span className={style.label}>{label}</span>
+      {
+        deletable ? (
+          <span className={style.delete}>
+            <FontIcon value="close" />
+          </span>
+        ) : null
+      }
+    </div>
+  );
+};
+
+Chip.propTypes = {
+  avatar: PropTypes.element,
+  className: PropTypes.string,
+  deletable: PropTypes.bool,
+  label: PropTypes.string
+};
+
+Chip.defaultProps = {
+  avatar: null,
+  className: '',
+  deletable: false,
+  label: ''
+};
+
+export default Chip;
diff --git a/components/chip/_config.scss b/components/chip/_config.scss
new file mode 100644
index 000000000..b2e4dbf07
--- /dev/null
+++ b/components/chip/_config.scss
@@ -0,0 +1,20 @@
+$chip-height: 3.2 * $unit !default;
+$chip-padding: 1.2 * $unit !default;
+$chip-margin-right: 0.25 * $unit !default;
+$chip-font-size: 2.4 * $unit !default;
+$chip-background: $palette-grey-200 !default;
+$chip-background-hover: $palette-grey-300 !default;
+
+$chip-icon-font-size: 2.0 * $unit !default;
+$chip-icon-margin-right: 0.8 * $unit !default;
+
+$chip-label-color: $color-text-secondary !default;
+$chip-label-font-size: $font-size-small !default;
+
+$chip-remove-size: 2.4 * $unit !default;
+$chip-remove-margin: 0.4 * $unit !default;
+$chip-remove-line-height: 3.0 * $unit !default;
+$chip-remove-font-size: 1.6 * $unit !default;
+$chip-remove-background: $palette-grey-400 !default;
+$chip-remove-background-hover: $palette-grey-500 !default;
+$chip-remove-color: $color-white !default;
diff --git a/components/chip/index.js b/components/chip/index.js
new file mode 100644
index 000000000..c515b6395
--- /dev/null
+++ b/components/chip/index.js
@@ -0,0 +1,3 @@
+import Chip from './Chip';
+export { Chip };
+export default Chip;
diff --git a/components/chip/readme.md b/components/chip/readme.md
new file mode 100644
index 000000000..2a9cb97a1
--- /dev/null
+++ b/components/chip/readme.md
@@ -0,0 +1,37 @@
+# Chip
+
+Chips represent complex entities in small blocks, such as a contact. Chips can be used for various types of entities, including free form text, predefined text, rules, or contacts. Chips may also contain icons.
+
+<!-- example -->
+```jsx
+import Chip from 'react-toolbox/lib/chip';
+
+const ChipTest = () => (
+  <div>
+        <Chip label="Example Chip" />
+        <Chip label="Deletable Chip" deletable />
+        <Chip
+          label="Avatar Chip"
+          avatar={<Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />}
+        />
+        <Chip
+          label="Initial chip"
+          avatar={<Avatar title="A" />}
+          deletable
+        />
+        <Chip
+          label="Image contact chip"
+          avatar={<Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>}
+        />
+  </div>
+);
+```
+
+## Properties
+
+| Name          | Type        | Default         | Description|
+|:--------------|:------------|:----------------|:-----------|
+| `avatar`      | `element`   |                 | An `Avatar` component to use in a contact chip. |
+| `className`   | `String`    | `''`            | Additional class name to provide custom styling.|
+| `deletable`   | `Boolean`   | `false`         | If true, the chip will be rendered with a delete icon.|
+| `label`       | `String`    | `''`            | label for the chip. |
diff --git a/components/chip/style.scss b/components/chip/style.scss
new file mode 100644
index 000000000..6e116191b
--- /dev/null
+++ b/components/chip/style.scss
@@ -0,0 +1,65 @@
+@import "http://github.com/base";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+
+.chip {
+  display: inline-block;
+  background-color: $chip-background;
+  border-radius: $chip-height;
+  line-height: $chip-height;
+  padding: 0 $chip-padding;
+  margin-right: $chip-margin-right;
+}
+
+.contactChip {
+  padding-left: 0;
+
+  > [data-react-toolbox="avatar"] {
+    width: $chip-height;
+    height: $chip-height;
+    vertical-align: middle;
+    margin-right: $chip-icon-margin-right;
+
+    > span {
+      line-height: $chip-height;
+      font-size: $chip-icon-font-size;
+    }
+  }
+}
+
+.label {
+  color: $chip-label-color;
+  font-size: $chip-label-font-size;
+}
+
+.deletable {
+  padding-right: 0;
+  cursor: pointer;
+  &:hover {
+    background: $chip-background-hover;
+  }
+  &:active {
+    @include shadow-2dp();
+  }
+}
+
+.delete {
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 $chip-remove-margin;
+  line-height: $chip-remove-line-height;
+  text-align: center;
+  width: $chip-remove-size;
+  height: $chip-remove-size;
+  border-radius: $chip-remove-size;
+  background: $chip-remove-background;
+  color: $chip-remove-color;
+
+  > [data-react-toolbox="font-icon"] {
+    font-size: $chip-remove-font-size;
+  }
+
+  &:hover {
+    background: $chip-remove-background-hover;
+  }
+}
diff --git a/spec/components/chip.jsx b/spec/components/chip.jsx
new file mode 100644
index 000000000..464cae912
--- /dev/null
+++ b/spec/components/chip.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import Avatar from '../../components/avatar';
+import Chip from '../../components/chip';
+
+class ChipTest extends React.Component {
+  render () {
+    return (
+      <section>
+        <h5>Chips</h5>
+        <p>Chips can be deletable and have an avatar.</p>
+
+        <Chip label="Example Chip" />
+        <Chip label="Deletable Chip" deletable />
+        <Chip
+          label="Avatar Chip"
+          avatar={<Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />}
+        />
+        <Chip
+          label="Initial chip"
+          avatar={<Avatar title="A" />}
+          deletable
+        />
+        <Chip
+          label="Image contact chip"
+          avatar={<Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>}
+        />
+      </section>
+    );
+  }
+}
+
+export default ChipTest;
diff --git a/spec/root.jsx b/spec/root.jsx
index 033a9c6ef..41dd37675 100644
--- a/spec/root.jsx
+++ b/spec/root.jsx
@@ -8,6 +8,7 @@ import Autocomplete from './components/autocomplete';
 import Button from './components/button';
 import Card from './components/card';
 import Checkbox from './components/checkbox';
+import Chip from './components/chip';
 import Dialog from './components/dialog';
 import Drawer from './components/drawer';
 import Dropdown from './components/dropdown';
@@ -48,6 +49,7 @@ const Root = () => (
     <Button />
     <Card />
     <Checkbox />
+    <Chip />
     <Dialog />
     <Drawer />
     <Dropdown />

From 620b494574461c58eec15f3988355b23709bd1fb Mon Sep 17 00:00:00 2001
From: Lucas Correia <lucas.correia@ftrack.com>
Date: Sat, 2 Apr 2016 13:41:58 +0200
Subject: [PATCH 0447/1024] Update autocomplete component to use chips

---
 components/autocomplete/Autocomplete.jsx | 3 ++-
 components/autocomplete/_config.scss     | 2 --
 components/autocomplete/style.scss       | 7 -------
 3 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/components/autocomplete/Autocomplete.jsx b/components/autocomplete/Autocomplete.jsx
index 6541aac5a..ddc9ccbf6 100644
--- a/components/autocomplete/Autocomplete.jsx
+++ b/components/autocomplete/Autocomplete.jsx
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import ClassNames from 'classnames';
 import Input from '../input';
 import events from '../utils/events';
+import Chip from '../chip';
 import style from './style';
 
 const POSITION = {
@@ -153,7 +154,7 @@ class Autocomplete extends React.Component {
  renderSelected () {
    if (this.props.multiple) {
      const selectedItems = [...this.values()].map(([key, value]) => {
-       return <li key={key} className={style.value} onClick={this.unselect.bind(this, key)}>{value}</li>;
+       return <Chip key={key} className={style.value} onClick={this.unselect.bind(this, key)} label={value} deletable />;
      });
 
      return <ul className={style.values}>{selectedItems}</ul>;
diff --git a/components/autocomplete/_config.scss b/components/autocomplete/_config.scss
index ccd8a81da..4e06dc084 100644
--- a/components/autocomplete/_config.scss
+++ b/components/autocomplete/_config.scss
@@ -4,6 +4,4 @@ $autocomplete-overflow-max-height: 45vh;
 $autocomplete-suggestion-active-background: $palette-grey-200 !default;
 $autocomplete-suggestion-padding: $unit;
 $autocomplete-suggestions-background: $color-white !default;
-$autocomplete-value-border-radius: .2 * $unit;
 $autocomplete-value-margin: $unit * .25 $unit * .5 $unit * .25 0;
-$autocomplete-value-padding: $unit * .5 $unit * .75;
diff --git a/components/autocomplete/style.scss b/components/autocomplete/style.scss
index 78d462404..053d95815 100644
--- a/components/autocomplete/style.scss
+++ b/components/autocomplete/style.scss
@@ -30,14 +30,7 @@
 }
 
 .value {
-  display: inline-block;
-  padding: $autocomplete-value-padding;
   margin: $autocomplete-value-margin;
-  font-size: $font-size-tiny;
-  color: $autocomplete-color-primary-contrast;
-  cursor: pointer;
-  background-color: $autocomplete-color-primary;
-  border-radius: $autocomplete-value-border-radius;
 }
 
 .suggestions {

From 08675d69d2d9cacd47101f9d7026aa0c31a5a390 Mon Sep 17 00:00:00 2001
From: Lucas Correia <lucas.correia@ftrack.com>
Date: Mon, 4 Apr 2016 10:27:41 +0200
Subject: [PATCH 0448/1024] Add onDeleteClick property

---
 components/autocomplete/Autocomplete.jsx |  2 +-
 components/chip/Chip.jsx                 |  7 ++++---
 components/chip/readme.md                | 13 +++++++------
 spec/components/chip.jsx                 | 20 +++++++++++++++++++-
 4 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/components/autocomplete/Autocomplete.jsx b/components/autocomplete/Autocomplete.jsx
index ddc9ccbf6..a1c2b6f82 100644
--- a/components/autocomplete/Autocomplete.jsx
+++ b/components/autocomplete/Autocomplete.jsx
@@ -154,7 +154,7 @@ class Autocomplete extends React.Component {
  renderSelected () {
    if (this.props.multiple) {
      const selectedItems = [...this.values()].map(([key, value]) => {
-       return <Chip key={key} className={style.value} onClick={this.unselect.bind(this, key)} label={value} deletable />;
+       return <Chip key={key} className={style.value} onDeleteClick={this.unselect.bind(this, key)} label={value} deletable />;
      });
 
      return <ul className={style.values}>{selectedItems}</ul>;
diff --git a/components/chip/Chip.jsx b/components/chip/Chip.jsx
index 19966a590..481ee39d7 100644
--- a/components/chip/Chip.jsx
+++ b/components/chip/Chip.jsx
@@ -3,7 +3,7 @@ import FontIcon from '../font_icon';
 import style from './style';
 import ClassNames from 'classnames';
 
-const Chip = ({className, deletable, avatar, label, ...other}) => {
+const Chip = ({className, deletable, avatar, label, onDeleteClick, ...other}) => {
   const classes = ClassNames(style.chip, {
       [style.deletable]: !!deletable,
       [style.contactChip]: !!avatar
@@ -15,7 +15,7 @@ const Chip = ({className, deletable, avatar, label, ...other}) => {
       <span className={style.label}>{label}</span>
       {
         deletable ? (
-          <span className={style.delete}>
+          <span className={style.delete} onClick={onDeleteClick}>
             <FontIcon value="close" />
           </span>
         ) : null
@@ -28,7 +28,8 @@ Chip.propTypes = {
   avatar: PropTypes.element,
   className: PropTypes.string,
   deletable: PropTypes.bool,
-  label: PropTypes.string
+  label: PropTypes.string,
+  onDeleteClick: PropTypes.func
 };
 
 Chip.defaultProps = {
diff --git a/components/chip/readme.md b/components/chip/readme.md
index 2a9cb97a1..8218ee11d 100644
--- a/components/chip/readme.md
+++ b/components/chip/readme.md
@@ -29,9 +29,10 @@ const ChipTest = () => (
 
 ## Properties
 
-| Name          | Type        | Default         | Description|
-|:--------------|:------------|:----------------|:-----------|
-| `avatar`      | `element`   |                 | An `Avatar` component to use in a contact chip. |
-| `className`   | `String`    | `''`            | Additional class name to provide custom styling.|
-| `deletable`   | `Boolean`   | `false`         | If true, the chip will be rendered with a delete icon.|
-| `label`       | `String`    | `''`            | label for the chip. |
+| Name            | Type        | Default         | Description|
+|:----------------|:------------|:----------------|:-----------|
+| `avatar`        | `element`   |                 | An `Avatar` component to use in a contact chip. |
+| `className`     | `String`    | `''`            | Additional class name to provide custom styling.|
+| `deletable`     | `Boolean`   | `false`         | If true, the chip will be rendered with a delete icon.|
+| `label`         | `String`    | `''`            | label for the chip. |
+| `onDeleteClick` | `Function`  |                 | Callback to be invoked when the delete icon is clicked. |
diff --git a/spec/components/chip.jsx b/spec/components/chip.jsx
index 464cae912..6621566e8 100644
--- a/spec/components/chip.jsx
+++ b/spec/components/chip.jsx
@@ -3,6 +3,16 @@ import Avatar from '../../components/avatar';
 import Chip from '../../components/chip';
 
 class ChipTest extends React.Component {
+  state = {
+    deleted: false
+  };
+
+  handleDeleteClick = () => {
+    this.setState({
+      deleted: true
+    });
+  };
+
   render () {
     return (
       <section>
@@ -10,7 +20,15 @@ class ChipTest extends React.Component {
         <p>Chips can be deletable and have an avatar.</p>
 
         <Chip label="Example Chip" />
-        <Chip label="Deletable Chip" deletable />
+        {
+          this.state.deleted ? null : (
+            <Chip
+              label="Deletable Chip"
+              deletable
+              onDeleteClick={this.handleDeleteClick}
+            />
+          )
+        }
         <Chip
           label="Avatar Chip"
           avatar={<Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />}

From dff8a07949e83ed062dbf27f15b34ae2df0bf899 Mon Sep 17 00:00:00 2001
From: Lucas Correia <lucas.correia@ftrack.com>
Date: Mon, 4 Apr 2016 11:24:30 +0200
Subject: [PATCH 0449/1024] Use children instead of special label and avatar
 props in Chip component

---
 components/autocomplete/Autocomplete.jsx | 11 ++++++-
 components/chip/Chip.jsx                 | 20 ++++++-----
 components/chip/readme.md                | 42 ++++++++++++++----------
 components/chip/style.scss               | 10 +++---
 spec/components/chip.jsx                 | 40 +++++++++++++---------
 5 files changed, 74 insertions(+), 49 deletions(-)

diff --git a/components/autocomplete/Autocomplete.jsx b/components/autocomplete/Autocomplete.jsx
index a1c2b6f82..f0aecc647 100644
--- a/components/autocomplete/Autocomplete.jsx
+++ b/components/autocomplete/Autocomplete.jsx
@@ -154,7 +154,16 @@ class Autocomplete extends React.Component {
  renderSelected () {
    if (this.props.multiple) {
      const selectedItems = [...this.values()].map(([key, value]) => {
-       return <Chip key={key} className={style.value} onDeleteClick={this.unselect.bind(this, key)} label={value} deletable />;
+       return (
+         <Chip
+           key={key}
+           className={style.value}
+           deletable
+           onDeleteClick={this.unselect.bind(this, key)}
+         >
+           {value}
+         </Chip>
+       );
      });
 
      return <ul className={style.values}>{selectedItems}</ul>;
diff --git a/components/chip/Chip.jsx b/components/chip/Chip.jsx
index 481ee39d7..6ae151edc 100644
--- a/components/chip/Chip.jsx
+++ b/components/chip/Chip.jsx
@@ -3,16 +3,21 @@ import FontIcon from '../font_icon';
 import style from './style';
 import ClassNames from 'classnames';
 
-const Chip = ({className, deletable, avatar, label, onDeleteClick, ...other}) => {
+const Chip = ({children, className, deletable, onDeleteClick, ...other}) => {
+  let hasAvatar = false;
+  if (React.Children.count(children)) {
+    const firstChild = children[0];
+    hasAvatar = firstChild && firstChild.type && firstChild.type.name === 'Avatar';
+  }
+
   const classes = ClassNames(style.chip, {
       [style.deletable]: !!deletable,
-      [style.contactChip]: !!avatar
+      [style.avatar]: !!hasAvatar
   }, className);
 
   return (
     <div data-react-toolbox='chip' className={classes} {...other}>
-      {avatar ? avatar : null}
-      <span className={style.label}>{label}</span>
+      {typeof children === 'string' ? <span>{children}</span> : children}
       {
         deletable ? (
           <span className={style.delete} onClick={onDeleteClick}>
@@ -25,18 +30,15 @@ const Chip = ({className, deletable, avatar, label, onDeleteClick, ...other}) =>
 };
 
 Chip.propTypes = {
-  avatar: PropTypes.element,
+  children: PropTypes.string,
   className: PropTypes.string,
   deletable: PropTypes.bool,
-  label: PropTypes.string,
   onDeleteClick: PropTypes.func
 };
 
 Chip.defaultProps = {
-  avatar: null,
   className: '',
-  deletable: false,
-  label: ''
+  deletable: false
 };
 
 export default Chip;
diff --git a/components/chip/readme.md b/components/chip/readme.md
index 8218ee11d..a4b22250a 100644
--- a/components/chip/readme.md
+++ b/components/chip/readme.md
@@ -2,27 +2,36 @@
 
 Chips represent complex entities in small blocks, such as a contact. Chips can be used for various types of entities, including free form text, predefined text, rules, or contacts. Chips may also contain icons.
 
+To add an icon or contact image to a chip, include an `Avatar` element as the first child.
+
 <!-- example -->
 ```jsx
+import Avatar from 'react-toolbox/lib/avatar';
 import Chip from 'react-toolbox/lib/chip';
 
 const ChipTest = () => (
   <div>
-        <Chip label="Example Chip" />
-        <Chip label="Deletable Chip" deletable />
-        <Chip
-          label="Avatar Chip"
-          avatar={<Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />}
-        />
-        <Chip
-          label="Initial chip"
-          avatar={<Avatar title="A" />}
-          deletable
-        />
-        <Chip
-          label="Image contact chip"
-          avatar={<Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>}
-        />
+    <Chip>Example chip</Chip>
+    <Chip>
+      <span style={{textDecoration: 'line-through'}}>Standard</span>
+      <strong>Custom</strong> chip <small>(custom markup)</small>
+    </Chip>
+
+    <Chip deletable>Deletable Chip</Chip>
+
+    <Chip avatar>
+      <Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />
+      <span>Avatar Chip</span>
+    </Chip>
+
+    <Chip avatar>
+      <Avatar title="A" /><span>Initial chip</span>
+    </Chip>
+
+    <Chip avatar>
+      <Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
+      <span>Image contact chip</span>
+    </Chip>
   </div>
 );
 ```
@@ -31,8 +40,7 @@ const ChipTest = () => (
 
 | Name            | Type        | Default         | Description|
 |:----------------|:------------|:----------------|:-----------|
-| `avatar`        | `element`   |                 | An `Avatar` component to use in a contact chip. |
+| `avatar`        | `Boolean`   | `false`         | If true, the chip will include styles to accommodate an `Avatar`. |
 | `className`     | `String`    | `''`            | Additional class name to provide custom styling.|
 | `deletable`     | `Boolean`   | `false`         | If true, the chip will be rendered with a delete icon.|
-| `label`         | `String`    | `''`            | label for the chip. |
 | `onDeleteClick` | `Function`  |                 | Callback to be invoked when the delete icon is clicked. |
diff --git a/components/chip/style.scss b/components/chip/style.scss
index 6e116191b..ecb88e76f 100644
--- a/components/chip/style.scss
+++ b/components/chip/style.scss
@@ -9,9 +9,12 @@
   line-height: $chip-height;
   padding: 0 $chip-padding;
   margin-right: $chip-margin-right;
+
+  color: $chip-label-color;
+  font-size: $chip-label-font-size;
 }
 
-.contactChip {
+.avatar {
   padding-left: 0;
 
   > [data-react-toolbox="avatar"] {
@@ -27,11 +30,6 @@
   }
 }
 
-.label {
-  color: $chip-label-color;
-  font-size: $chip-label-font-size;
-}
-
 .deletable {
   padding-right: 0;
   cursor: pointer;
diff --git a/spec/components/chip.jsx b/spec/components/chip.jsx
index 6621566e8..054ceb643 100644
--- a/spec/components/chip.jsx
+++ b/spec/components/chip.jsx
@@ -19,32 +19,40 @@ class ChipTest extends React.Component {
         <h5>Chips</h5>
         <p>Chips can be deletable and have an avatar.</p>
 
-        <Chip label="Example Chip" />
+        <Chip>Example chip</Chip>
+        <Chip>
+          <span style={{textDecoration: 'line-through'}}>Standard</span>
+          <strong>Custom</strong> chip <small>(custom markup)</small>
+        </Chip>
+
         {
           this.state.deleted ? null : (
             <Chip
-              label="Deletable Chip"
               deletable
               onDeleteClick={this.handleDeleteClick}
-            />
+            >
+              Deletable Chip
+            </Chip>
           )
         }
-        <Chip
-          label="Avatar Chip"
-          avatar={<Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />}
-        />
-        <Chip
-          label="Initial chip"
-          avatar={<Avatar title="A" />}
-          deletable
-        />
-        <Chip
-          label="Image contact chip"
-          avatar={<Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>}
-        />
+
+        <Chip>
+          <Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />
+          <span>Avatar Chip</span>
+        </Chip>
+
+        <Chip>
+          <Avatar title="A" /><span>Initial chip</span>
+        </Chip>
+
+        <Chip>
+          <Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
+          <span>Image contact chip</span>
+        </Chip>
       </section>
     );
   }
 }
 
 export default ChipTest;
+

From 1a4d3639a562cfbeeb27a0ae3d22ff14cf6d427b Mon Sep 17 00:00:00 2001
From: Lucas Correia <lucas.correia@ftrack.com>
Date: Mon, 4 Apr 2016 11:34:48 +0200
Subject: [PATCH 0450/1024] Update chip children prop type, readme

---
 components/chip/Chip.jsx  | 2 +-
 components/chip/readme.md | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/chip/Chip.jsx b/components/chip/Chip.jsx
index 6ae151edc..e01f2c11d 100644
--- a/components/chip/Chip.jsx
+++ b/components/chip/Chip.jsx
@@ -30,7 +30,7 @@ const Chip = ({children, className, deletable, onDeleteClick, ...other}) => {
 };
 
 Chip.propTypes = {
-  children: PropTypes.string,
+  children: PropTypes.node,
   className: PropTypes.string,
   deletable: PropTypes.bool,
   onDeleteClick: PropTypes.func
diff --git a/components/chip/readme.md b/components/chip/readme.md
index a4b22250a..c9e0b2f45 100644
--- a/components/chip/readme.md
+++ b/components/chip/readme.md
@@ -19,16 +19,16 @@ const ChipTest = () => (
 
     <Chip deletable>Deletable Chip</Chip>
 
-    <Chip avatar>
+    <Chip>
       <Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />
       <span>Avatar Chip</span>
     </Chip>
 
-    <Chip avatar>
+    <Chip>
       <Avatar title="A" /><span>Initial chip</span>
     </Chip>
 
-    <Chip avatar>
+    <Chip>
       <Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
       <span>Image contact chip</span>
     </Chip>
@@ -40,7 +40,7 @@ const ChipTest = () => (
 
 | Name            | Type        | Default         | Description|
 |:----------------|:------------|:----------------|:-----------|
-| `avatar`        | `Boolean`   | `false`         | If true, the chip will include styles to accommodate an `Avatar`. |
+| `children`      | `Node`      |                 | Child components, usually `Avatar` and inline elements. |
 | `className`     | `String`    | `''`            | Additional class name to provide custom styling.|
 | `deletable`     | `Boolean`   | `false`         | If true, the chip will be rendered with a delete icon.|
 | `onDeleteClick` | `Function`  |                 | Callback to be invoked when the delete icon is clicked. |

From f96d00e52389f0d979e315cf77248358da858350 Mon Sep 17 00:00:00 2001
From: Lucas Correia <lucas.correia@ftrack.com>
Date: Mon, 4 Apr 2016 11:35:38 +0200
Subject: [PATCH 0451/1024] Clean up chip styling, remove hover and pressed
 styles

---
 components/chip/_config.scss |  6 ++----
 components/chip/style.scss   | 35 ++++++++++++++---------------------
 2 files changed, 16 insertions(+), 25 deletions(-)

diff --git a/components/chip/_config.scss b/components/chip/_config.scss
index b2e4dbf07..2a2a6a9a1 100644
--- a/components/chip/_config.scss
+++ b/components/chip/_config.scss
@@ -1,15 +1,13 @@
 $chip-height: 3.2 * $unit !default;
 $chip-padding: 1.2 * $unit !default;
 $chip-margin-right: 0.25 * $unit !default;
-$chip-font-size: 2.4 * $unit !default;
 $chip-background: $palette-grey-200 !default;
-$chip-background-hover: $palette-grey-300 !default;
 
 $chip-icon-font-size: 2.0 * $unit !default;
 $chip-icon-margin-right: 0.8 * $unit !default;
 
-$chip-label-color: $color-text-secondary !default;
-$chip-label-font-size: $font-size-small !default;
+$chip-color: $color-text-secondary !default;
+$chip-font-size: $font-size-small !default;
 
 $chip-remove-size: 2.4 * $unit !default;
 $chip-remove-margin: 0.4 * $unit !default;
diff --git a/components/chip/style.scss b/components/chip/style.scss
index ecb88e76f..1286b5b96 100644
--- a/components/chip/style.scss
+++ b/components/chip/style.scss
@@ -3,55 +3,48 @@
 @import "http://github.com/config";
 
 .chip {
-  display: inline-block;
   background-color: $chip-background;
   border-radius: $chip-height;
+  color: $chip-color;
+  display: inline-block;
+  font-size: $chip-font-size;
   line-height: $chip-height;
-  padding: 0 $chip-padding;
   margin-right: $chip-margin-right;
-
-  color: $chip-label-color;
-  font-size: $chip-label-font-size;
+  padding: 0 $chip-padding;
 }
 
 .avatar {
   padding-left: 0;
 
   > [data-react-toolbox="avatar"] {
-    width: $chip-height;
     height: $chip-height;
-    vertical-align: middle;
     margin-right: $chip-icon-margin-right;
+    vertical-align: middle;
+    width: $chip-height;
 
     > span {
-      line-height: $chip-height;
       font-size: $chip-icon-font-size;
+      line-height: $chip-height;
     }
   }
 }
 
 .deletable {
   padding-right: 0;
-  cursor: pointer;
-  &:hover {
-    background: $chip-background-hover;
-  }
-  &:active {
-    @include shadow-2dp();
-  }
 }
 
 .delete {
+  background: $chip-remove-background;
+  border-radius: $chip-remove-size;
+  color: $chip-remove-color;
+  cursor: pointer;
   display: inline-block;
-  vertical-align: middle;
-  margin: 0 $chip-remove-margin;
+  height: $chip-remove-size;
   line-height: $chip-remove-line-height;
+  margin: 0 $chip-remove-margin;
   text-align: center;
+  vertical-align: middle;
   width: $chip-remove-size;
-  height: $chip-remove-size;
-  border-radius: $chip-remove-size;
-  background: $chip-remove-background;
-  color: $chip-remove-color;
 
   > [data-react-toolbox="font-icon"] {
     font-size: $chip-remove-font-size;

From d41a77cf37a89cf6579d86a88226b914e214ff53 Mon Sep 17 00:00:00 2001
From: Ro Savage <rowan.savage@gmail.com>
Date: Tue, 5 Apr 2016 17:26:37 +1200
Subject: [PATCH 0452/1024] Add prop to autocomplete to place labels below or
 above input

---
 components/autocomplete/Autocomplete.jsx | 12 ++++++++++--
 components/autocomplete/readme.md        |  2 ++
 react-toolbox.d.ts                       |  4 ++--
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/components/autocomplete/Autocomplete.jsx b/components/autocomplete/Autocomplete.jsx
index 8d2e7d617..8a699f048 100644
--- a/components/autocomplete/Autocomplete.jsx
+++ b/components/autocomplete/Autocomplete.jsx
@@ -11,10 +11,16 @@ const POSITION = {
  UP: 'up'
 };
 
+const SELECTEDPOSITION = {
+  ABOVE: 'above',
+  BELOW: 'below'
+};
+
 class Autocomplete extends React.Component {
  static propTypes = {
    className: React.PropTypes.string,
    direction: React.PropTypes.oneOf(['auto', 'up', 'down']),
+   selectedPosition: React.PropTypes.oneOf(['above', 'below']),
    disabled: React.PropTypes.bool,
    error: React.PropTypes.string,
    label: React.PropTypes.string,
@@ -27,6 +33,7 @@ class Autocomplete extends React.Component {
  static defaultProps = {
    className: '',
    direction: 'auto',
+   selectedPosition: 'above',
    multiple: true,
    source: {}
  };
@@ -39,7 +46,7 @@ class Autocomplete extends React.Component {
 
  componentWillReceiveProps (nextProps) {
    if (!this.props.multiple) {
-     this.setState({query: this.query(nextProps.value)});
+     this.setState({query: nextProps.value});
    }
  }
 
@@ -187,7 +194,7 @@ class Autocomplete extends React.Component {
 
    return (
      <div data-react-toolbox='autocomplete' className={className}>
-       {this.renderSelected()}
+       {this.props.selectedPosition === 'above' ? this.renderSelected() : null}
        <Input
          {...other}
          ref='input'
@@ -201,6 +208,7 @@ class Autocomplete extends React.Component {
          value={this.state.query}
        />
        {this.renderSuggestions()}
+       {this.props.selectedPosition === 'below' ? this.renderSelected() : null}
      </div>
    );
  }
diff --git a/components/autocomplete/readme.md b/components/autocomplete/readme.md
index 12200f368..78fdda9ae 100644
--- a/components/autocomplete/readme.md
+++ b/components/autocomplete/readme.md
@@ -26,6 +26,7 @@ class AutocompleteTest extends React.Component {
     return (
       <Autocomplete
         direction="down"
+        selectedPosition="above"
         label="Choose countries"
         onChange={this.handleChange}
         source={source}
@@ -42,6 +43,7 @@ class AutocompleteTest extends React.Component {
 |:-----|:-----|:-----|:-----|
 | `className`     | `String`      | `''`            | Sets a class to style of the Component.|
 | `direction`    | `String`       |  `auto`        | Determines the opening direction. It can be `auto`, `top` or `bottom`. |
+| `selectedPosition`    | `String`       |  `above`        | Determines if the selected list is shown above or below input. It can be `above` or `below`. |
 | `disabled`      | `Bool`        |  `false`         | If true, component will be disabled.|
 | `error`         | `String`      |         | Sets the error string for the internal input element.|
 | `label`         | `String`      |         | The text string to use for the floating label element.|
diff --git a/react-toolbox.d.ts b/react-toolbox.d.ts
index c759808e3..be6d3e67d 100644
--- a/react-toolbox.d.ts
+++ b/react-toolbox.d.ts
@@ -168,7 +168,7 @@ declare namespace __RT {
          */
         multiple?: boolean,
         /**
-         * 	Object of key/values or array representing all items suggested.
+         *  Object of key/values or array representing all items suggested.
          */
         source: Object | Array<any>,
         /**
@@ -177,7 +177,7 @@ declare namespace __RT {
          */
         type?: string,
         /**
-         * 	Value or array of values currently selected component.Current value of the input element.
+         *  Value or array of values currently selected component.Current value of the input element.
          */
         value?: string | Array<any>,
     }

From 703ed2767be5b6b47e29d03a6e9166e59981f2d2 Mon Sep 17 00:00:00 2001
From: Lucas Correia <lucas.correia@ftrack.com>
Date: Tue, 5 Apr 2016 10:54:30 +0200
Subject: [PATCH 0453/1024] Chip - Replace fonticon with inline SVG, tweak size
 and position

---
 components/chip/Chip.jsx     |  7 ++++---
 components/chip/_config.scss |  1 -
 components/chip/style.scss   | 30 ++++++++++++++++++------------
 3 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/components/chip/Chip.jsx b/components/chip/Chip.jsx
index e01f2c11d..8e7e9f0ce 100644
--- a/components/chip/Chip.jsx
+++ b/components/chip/Chip.jsx
@@ -1,7 +1,6 @@
 import React, {PropTypes} from 'react';
-import FontIcon from '../font_icon';
-import style from './style';
 import ClassNames from 'classnames';
+import style from './style';
 
 const Chip = ({children, className, deletable, onDeleteClick, ...other}) => {
   let hasAvatar = false;
@@ -21,7 +20,9 @@ const Chip = ({children, className, deletable, onDeleteClick, ...other}) => {
       {
         deletable ? (
           <span className={style.delete} onClick={onDeleteClick}>
-            <FontIcon value="close" />
+            <svg viewBox="0 0 40 40" className={style.deleteIcon}>
+              <path className={style.deleteX} d="M 12,12 L 28,28 M 28,12 L 12,28" />
+            </svg>
           </span>
         ) : null
       }
diff --git a/components/chip/_config.scss b/components/chip/_config.scss
index 2a2a6a9a1..d2ab276e2 100644
--- a/components/chip/_config.scss
+++ b/components/chip/_config.scss
@@ -12,7 +12,6 @@ $chip-font-size: $font-size-small !default;
 $chip-remove-size: 2.4 * $unit !default;
 $chip-remove-margin: 0.4 * $unit !default;
 $chip-remove-line-height: 3.0 * $unit !default;
-$chip-remove-font-size: 1.6 * $unit !default;
 $chip-remove-background: $palette-grey-400 !default;
 $chip-remove-background-hover: $palette-grey-500 !default;
 $chip-remove-color: $color-white !default;
diff --git a/components/chip/style.scss b/components/chip/style.scss
index 1286b5b96..b752c420f 100644
--- a/components/chip/style.scss
+++ b/components/chip/style.scss
@@ -30,27 +30,33 @@
 }
 
 .deletable {
-  padding-right: 0;
+  padding-right: $chip-remove-size + 2 * $chip-remove-margin;
 }
 
 .delete {
-  background: $chip-remove-background;
-  border-radius: $chip-remove-size;
-  color: $chip-remove-color;
   cursor: pointer;
   display: inline-block;
   height: $chip-remove-size;
-  line-height: $chip-remove-line-height;
-  margin: 0 $chip-remove-margin;
-  text-align: center;
+  margin: $chip-remove-margin;
+  padding: $chip-remove-margin;
+  position: absolute;
   vertical-align: middle;
   width: $chip-remove-size;
+}
 
-  > [data-react-toolbox="font-icon"] {
-    font-size: $chip-remove-font-size;
-  }
+.delete:hover .deleteIcon {
+  background: $chip-remove-background-hover;
+}
+
+.deleteIcon {
+  background: $chip-remove-background;
+  border-radius: $chip-remove-size;
+  vertical-align: top;
 
-  &:hover {
-    background: $chip-remove-background-hover;
+  .deleteX {
+    fill: transparent;
+    stroke-linecap: round;
+    stroke-width: 3;
+    stroke: $chip-remove-color;
   }
 }

From cbeef76230d365234ce98cd912e04fda948786ab Mon Sep 17 00:00:00 2001
From: Lucas Correia <lucas.correia@ftrack.com>
Date: Tue, 5 Apr 2016 11:28:56 +0200
Subject: [PATCH 0454/1024] Chip - tweak stroke width

---
 components/chip/_config.scss | 2 +-
 components/chip/style.scss   | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/components/chip/_config.scss b/components/chip/_config.scss
index d2ab276e2..f8880621f 100644
--- a/components/chip/_config.scss
+++ b/components/chip/_config.scss
@@ -11,7 +11,7 @@ $chip-font-size: $font-size-small !default;
 
 $chip-remove-size: 2.4 * $unit !default;
 $chip-remove-margin: 0.4 * $unit !default;
-$chip-remove-line-height: 3.0 * $unit !default;
+$chip-remove-stroke-width: 0.4 * $unit !default;
 $chip-remove-background: $palette-grey-400 !default;
 $chip-remove-background-hover: $palette-grey-500 !default;
 $chip-remove-color: $color-white !default;
diff --git a/components/chip/style.scss b/components/chip/style.scss
index b752c420f..768bb12e9 100644
--- a/components/chip/style.scss
+++ b/components/chip/style.scss
@@ -55,8 +55,7 @@
 
   .deleteX {
     fill: transparent;
-    stroke-linecap: round;
-    stroke-width: 3;
+    stroke-width: $chip-remove-stroke-width;
     stroke: $chip-remove-color;
   }
 }

From 542b58ade619e9c8ef939e9b495ac6738127dec0 Mon Sep 17 00:00:00 2001
From: Tobias Bales <tobias.bales@gmail.com>
Date: Fri, 1 Apr 2016 23:22:34 +0200
Subject: [PATCH 0455/1024] Add allowBlank to Dropdown

Since @nickw was having issues with the dropdown not defaulting to the
first entry if the value was null (even though the options had a null value in it)
this seems like a good time to add an option to default to the first element of the supplied options
(the prop is called allowBlank) in case the value is not found in the options.

The handling of null/undefined values has been fixed too and if there actually is a value of null
in the options it is correctly selected now.
---
 components/dropdown/Dropdown.jsx | 16 +++++++---------
 components/dropdown/readme.md    |  1 +
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/components/dropdown/Dropdown.jsx b/components/dropdown/Dropdown.jsx
index 806215d55..c6cce59c7 100644
--- a/components/dropdown/Dropdown.jsx
+++ b/components/dropdown/Dropdown.jsx
@@ -7,6 +7,7 @@ import style from './style';
 
 class Dropdown extends React.Component {
   static propTypes = {
+    allowBlank: React.PropTypes.bool,
     auto: React.PropTypes.bool,
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
@@ -26,6 +27,7 @@ class Dropdown extends React.Component {
   static defaultProps = {
     auto: true,
     className: '',
+    allowBlank: true,
     disabled: false
   };
 
@@ -52,11 +54,6 @@ class Dropdown extends React.Component {
     }
   }
 
-  valueIsPresent () {
-    const value = this.props.value;
-    return value !== null && value !== undefined && value !== '' && !Number.isNaN(value);
-  }
-
   close = () => {
     if (this.state.active) {
       this.setState({active: false});
@@ -87,10 +84,11 @@ class Dropdown extends React.Component {
   };
 
   getSelectedItem = () => {
-    if (this.valueIsPresent()) {
-      for (const item of this.props.source) {
-        if (item.value === this.props.value) return item;
-      }
+    for (const item of this.props.source) {
+      if (item.value === this.props.value) return item;
+    }
+    if (!this.props.allowBlank) {
+      return this.props.source[0];
     }
   };
 
diff --git a/components/dropdown/readme.md b/components/dropdown/readme.md
index 89f3f71d7..069de015d 100644
--- a/components/dropdown/readme.md
+++ b/components/dropdown/readme.md
@@ -48,3 +48,4 @@ class DropdownTest extends React.Component {
 | `source`    | `Array`         |                 | Array of data objects with the data to represent in the dropdown.
 | `template`      | `Function`      |                 | Callback function that returns a JSX template to represent the element.
 | `value`         | `String`        |                 | Default value using JSON data.
+| `allowBlank`    | `Boolean`       | `true`            | If true the dropdown will preselect the first item if the supplied value matches none of the options' values

From 5db11d3a9e3946a09b124196e22c9e6d6e855dfb Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 5 Apr 2016 21:52:32 +0200
Subject: [PATCH 0456/1024] Proper property sorting

---
 components/dropdown/readme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/dropdown/readme.md b/components/dropdown/readme.md
index 069de015d..b923833ab 100644
--- a/components/dropdown/readme.md
+++ b/components/dropdown/readme.md
@@ -39,6 +39,7 @@ class DropdownTest extends React.Component {
 
 | Name              | Type          | Default         | Description |
 |:-----|:-----|:-----|:-----|
+| `allowBlank`    | `Boolean`       | `true`            | If true the dropdown will preselect the first item if the supplied value matches none of the options' values
 | `auto`        | `Boolean`       |  `true`        | If true, the dropdown will open up or down depending on the position in the screen .|
 | `className`     | `String`        |  `''`               | Set the class to give custom styles to the dropdown.
 | `disabled`      | `Boolean`       | `false`         | Set the component as disabled.
@@ -48,4 +49,3 @@ class DropdownTest extends React.Component {
 | `source`    | `Array`         |                 | Array of data objects with the data to represent in the dropdown.
 | `template`      | `Function`      |                 | Callback function that returns a JSX template to represent the element.
 | `value`         | `String`        |                 | Default value using JSON data.
-| `allowBlank`    | `Boolean`       | `true`            | If true the dropdown will preselect the first item if the supplied value matches none of the options' values

From 27e59dfdc7d2d171e54ba1d8e838c43dd127caee Mon Sep 17 00:00:00 2001
From: Calvin McAnarney <calvin@mcanarney.org>
Date: Wed, 6 Apr 2016 22:04:57 +0200
Subject: [PATCH 0457/1024] Revert input error color

---
 components/input/_config.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/input/_config.scss b/components/input/_config.scss
index a13dab4d1..03c492810 100644
--- a/components/input/_config.scss
+++ b/components/input/_config.scss
@@ -10,7 +10,7 @@ $input-text-bottom-border-color: rgba($color-black, 0.12) !default;
 $input-text-highlight-color: $color-primary !default;
 $input-text-disabled-color: $input-text-bottom-border-color !default;
 $input-text-disabled-text-color: $input-text-label-color !default;
-$input-text-error-color: rgb(222, 230, 38) !default;
+$input-text-error-color: rgb(222, 50, 38) !default;
 $input-text-required-color: rgb(222, 50, 38) !default;
 $input-underline-height:  2 * $unit;
 $input-icon-font-size: 2.4 * $unit;

From ccf88af87d405cbc875fcdadb64a776eb8bb80e8 Mon Sep 17 00:00:00 2001
From: Keren Chandran <keren.chandran@gmail.com>
Date: Wed, 6 Apr 2016 21:24:31 -0400
Subject: [PATCH 0458/1024] Changed Icon Prop type to String or Element instead
 of Any. Also fixed an inappropriate example for checkbox.

---
 components/autocomplete/Autocomplete.jsx |  7 +----
 components/button/Button.jsx             |  5 ++-
 components/button/IconButton.jsx         |  5 ++-
 components/button/readme.md              | 34 ++++++++++----------
 components/input/Input.jsx               |  7 +++--
 components/input/readme.md               | 34 ++++++++++----------
 components/link/Link.jsx                 |  5 ++-
 components/link/readme.md                | 12 +++----
 components/list/ListItemLayout.jsx       | 15 +++++++--
 components/list/readme.md                |  6 ++--
 components/menu/IconMenu.jsx             |  5 ++-
 components/menu/MenuItem.jsx             |  5 ++-
 components/menu/readme.md                | 40 ++++++++++++------------
 components/snackbar/Snackbar.jsx         |  5 ++-
 components/snackbar/readme.md            | 20 ++++++------
 spec/components/checkbox.jsx             |  2 +-
 16 files changed, 116 insertions(+), 91 deletions(-)

diff --git a/components/autocomplete/Autocomplete.jsx b/components/autocomplete/Autocomplete.jsx
index b9e7f4a3c..2dd75a980 100644
--- a/components/autocomplete/Autocomplete.jsx
+++ b/components/autocomplete/Autocomplete.jsx
@@ -12,21 +12,16 @@ const POSITION = {
  UP: 'up'
 };
 
-const SELECTEDPOSITION = {
-  ABOVE: 'above',
-  BELOW: 'below'
-};
-
 class Autocomplete extends React.Component {
  static propTypes = {
    className: React.PropTypes.string,
    direction: React.PropTypes.oneOf(['auto', 'up', 'down']),
-   selectedPosition: React.PropTypes.oneOf(['above', 'below']),
    disabled: React.PropTypes.bool,
    error: React.PropTypes.string,
    label: React.PropTypes.string,
    multiple: React.PropTypes.bool,
    onChange: React.PropTypes.func,
+   selectedPosition: React.PropTypes.oneOf(['above', 'below']),
    source: React.PropTypes.any,
    value: React.PropTypes.any
  };
diff --git a/components/button/Button.jsx b/components/button/Button.jsx
index 0bb82a16e..68574583d 100644
--- a/components/button/Button.jsx
+++ b/components/button/Button.jsx
@@ -13,7 +13,10 @@ class Button extends React.Component {
     flat: React.PropTypes.bool,
     floating: React.PropTypes.bool,
     href: React.PropTypes.string,
-    icon: React.PropTypes.any,
+    icon: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.element
+    ]),
     inverse: React.PropTypes.bool,
     label: React.PropTypes.string,
     mini: React.PropTypes.bool,
diff --git a/components/button/IconButton.jsx b/components/button/IconButton.jsx
index f8e116276..48392bcde 100644
--- a/components/button/IconButton.jsx
+++ b/components/button/IconButton.jsx
@@ -11,7 +11,10 @@ class IconButton extends React.Component {
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
     href: React.PropTypes.string,
-    icon: React.PropTypes.any,
+    icon: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.element
+    ]),
     inverse: React.PropTypes.bool,
     neutral: React.PropTypes.bool,
     onMouseLeave: React.PropTypes.func,
diff --git a/components/button/readme.md b/components/button/readme.md
index d7651c694..3164c533b 100644
--- a/components/button/readme.md
+++ b/components/button/readme.md
@@ -32,24 +32,24 @@ const TestButtons = () => (
 
 ## Properties
 
-| Name              | Type            | Default     | Description|
+| Name              | Type                  | Default     | Description|
 |:-----|:-----|:-----|:-----|
-| `accent`          | `Boolean`       | `false`     | Indicates if the button should have accent color.|
-| `className`       | `String`        | `''`        | Set a class to style the Component.|
-| `disabled`        | `Boolean`       | `false`     | If true, component will be disabled.|
-| `flat`            | `Boolean`       | `false`     | If true, the button will have a flat look. |
-| `floating`        | `Boolean`       | `false`     | If true, the button will have a floating look. |
-| `href`            | `String`        |             | Creates a link for the button. |
-| `icon`            | `Any`           |             | Value of the icon (See Font Icon Component). |
-| `inverse`         | `Boolean`       |             | If true, the neutral colors are inverted. Useful to put a button over a dark background. |
-| `label`           | `String`        |             | The text string to use for the name of the button.|
-| `mini`            | `Boolean`       | `false`     | To be used with floating button. If true, the button will be smaller.|
-| `neutral`         | `Boolean`       | `true`      | Set it to `false` if you don't want the neutral styles to be included.|
-| `onMouseLeave`    | `Function`      |             | Fires after the mouse leaves the Component.|
-| `onMouseUp`       | `Function`      |             | Fires after the mouse is released from the Component.|
-| `primary`         | `Boolean`       | `false`     | Indicates if the button should have primary color.|
-| `raised`          | `Boolean`       | `false`     | If true, the button will have a raised look. |
-| `ripple`          | `Boolean`       | `true`      | If true, component will have a ripple effect on click.|
+| `accent`          | `Boolean`             | `false`     | Indicates if the button should have accent color.|
+| `className`       | `String`              | `''`        | Set a class to style the Component.|
+| `disabled`        | `Boolean`             | `false`     | If true, component will be disabled.|
+| `flat`            | `Boolean`             | `false`     | If true, the button will have a flat look. |
+| `floating`        | `Boolean`             | `false`     | If true, the button will have a floating look. |
+| `href`            | `String`              |             | Creates a link for the button. |
+| `icon`            | `String` or `Element` |             | Value of the icon (See Font Icon Component). |
+| `inverse`         | `Boolean`             |             | If true, the neutral colors are inverted. Useful to put a button over a dark background. |
+| `label`           | `String`              |             | The text string to use for the name of the button.|
+| `mini`            | `Boolean`             | `false`     | To be used with floating button. If true, the button will be smaller.|
+| `neutral`         | `Boolean`             | `true`      | Set it to `false` if you don't want the neutral styles to be included.|
+| `onMouseLeave`    | `Function`            |             | Fires after the mouse leaves the Component.|
+| `onMouseUp`       | `Function`            |             | Fires after the mouse is released from the Component.|
+| `primary`         | `Boolean`             | `false`     | Indicates if the button should have primary color.|
+| `raised`          | `Boolean`             | `false`     | If true, the button will have a raised look. |
+| `ripple`          | `Boolean`             | `true`      | If true, component will have a ripple effect on click.|
 
 By default it will have neutral colors and a flat aspect even though the `flat` property is `false` by default. Also, some properties exclude others, for example a button cannot be `flat` and `raised` at the same time.
 
diff --git a/components/input/Input.jsx b/components/input/Input.jsx
index 0c1a20ab9..03b04d520 100644
--- a/components/input/Input.jsx
+++ b/components/input/Input.jsx
@@ -8,10 +8,13 @@ class Input extends React.Component {
     children: React.PropTypes.any,
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
-    error: React.PropTypes.node,
+    error: React.PropTypes.string,
     floating: React.PropTypes.bool,
     hint: React.PropTypes.string,
-    icon: React.PropTypes.any,
+    icon: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.element
+    ]),
     label: React.PropTypes.string,
     maxLength: React.PropTypes.number,
     multiline: React.PropTypes.bool,
diff --git a/components/input/readme.md b/components/input/readme.md
index c71b295e0..630c2ebca 100644
--- a/components/input/readme.md
+++ b/components/input/readme.md
@@ -29,24 +29,24 @@ class InputTest extends React.Component {
 
 ## Properties
 
-| Name            | Type          | Default         | Description|
+| Name            | Type                    | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `className`     | `String`      | `''`            | Sets a class name to give custom styles.|
-| `disabled`      | `Boolean`     | `false`         | If true, component will be disabled.|
-| `error`         | `String`      |                 | Give an error node to display under the field.|
-| `floating`      | `Boolean`     | `true`          | Indicates if the label is floating in the input field or not.|
-| `hint`          | `String`      | `''`            | The text string to use for hint text element.|
-| `icon`          | `Any`         |                 | Name of an icon to use as a label for the input.|
-| `label`         | `String`      |                 | The text string to use for the floating label element.|
-| `maxLength`     | `Number`      |                 |Specifies the maximum number of characters allowed in the component.|
-| `multiline`     | `Boolean`     | `false`         | If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.|
-| `onBlur`        | `Function`    |                 | Callback function that is fired when component is blurred.|
-| `onChange`      | `Function`    |                 | Callback function that is fired when the component's value changes.|
-| `onFocus`       | `Function`    |                 | Callback function that is fired when component is focused.|
-| `onKeyPress`    | `Function`    |                 | Callback function that is fired when a key is pressed.|
-| `required`      | `Boolean`     | `false`         | If true, the html input has a required attribute.|
-| `type`          | `String`      | `text`          | Type of the input element. It can be a valid HTML5 input type|
-| `value`         | `Any`         |                 | Current value of the input element.|
+| `className`     | `String`                | `''`            | Sets a class name to give custom styles.|
+| `disabled`      | `Boolean`               | `false`         | If true, component will be disabled.|
+| `error`         | `String`                |                 | Give an error node to display under the field.|
+| `floating`      | `Boolean`               | `true`          | Indicates if the label is floating in the input field or not.|
+| `hint`          | `String`                | `''`            | The text string to use for hint text element.|
+| `icon`          | `String` or `Element`   |                 | Name of an icon to use as a label for the input.|
+| `label`         | `String`                |                 | The text string to use for the floating label element.|
+| `maxLength`     | `Number`                |                 |Specifies the maximum number of characters allowed in the component.|
+| `multiline`     | `Boolean`               | `false`         | If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.|
+| `onBlur`        | `Function`              |                 | Callback function that is fired when component is blurred.|
+| `onChange`      | `Function`              |                 | Callback function that is fired when the component's value changes.|
+| `onFocus`       | `Function`              |                 | Callback function that is fired when component is focused.|
+| `onKeyPress`    | `Function`              |                 | Callback function that is fired when a key is pressed.|
+| `required`      | `Boolean`               | `false`         | If true, the html input has a required attribute.|
+| `type`          | `String`                | `text`          | Type of the input element. It can be a valid HTML5 input type|
+| `value`         | `Any`                   |                 | Current value of the input element.|
 
 ## Methods
 
diff --git a/components/link/Link.jsx b/components/link/Link.jsx
index 9b427a107..8500bd1d0 100644
--- a/components/link/Link.jsx
+++ b/components/link/Link.jsx
@@ -23,7 +23,10 @@ Link.propTypes = {
   children: React.PropTypes.node,
   className: React.PropTypes.string,
   count: React.PropTypes.number,
-  icon: React.PropTypes.any,
+  icon: React.PropTypes.oneOfType([
+    React.PropTypes.string,
+    React.PropTypes.element
+  ]),
   label: React.PropTypes.string
 };
 
diff --git a/components/link/readme.md b/components/link/readme.md
index 04868b64d..fa8dff1b6 100644
--- a/components/link/readme.md
+++ b/components/link/readme.md
@@ -19,10 +19,10 @@ const LinksTest = () => (
 
 You can add as many properties as you want to be directly transferred to the output anchor element. Apart from them you have the following properties:
 
-| Name            | Type            | Default         | Description|
+| Name            | Type                  | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `active`        | `Boolean`       | `false`         | If true, adds active style to link.|
-| `className`     | `String`        | `''`            | Sets a custom class name to add styles to the link.|
-| `count`         | `Number`        |                 | Sets a count number.|
-| `icon`          | `Any`           |                 | An icon key string to include a `FontIcon` component in front of the text.|
-| `label`         | `String`        |                 | The text string used for the text content of the link.|
+| `active`        | `Boolean`             | `false`         | If true, adds active style to link.|
+| `className`     | `String`              | `''`            | Sets a custom class name to add styles to the link.|
+| `count`         | `Number`              |                 | Sets a count number.|
+| `icon`          | `String` or `Element` |                 | An icon key string to include a `FontIcon` component in front of the text.|
+| `label`         | `String`              |                 | The text string used for the text content of the link.|
diff --git a/components/list/ListItemLayout.jsx b/components/list/ListItemLayout.jsx
index db0438953..5f46ff0ce 100644
--- a/components/list/ListItemLayout.jsx
+++ b/components/list/ListItemLayout.jsx
@@ -33,17 +33,26 @@ const ListItemLayout = (props) => {
 };
 
 ListItemLayout.propTypes = {
-  avatar: React.PropTypes.string,
+  avatar: React.PropTypes.oneOfType([
+    React.PropTypes.string,
+    React.PropTypes.element
+  ]),
   caption: React.PropTypes.string,
   children: React.PropTypes.any,
   className: React.PropTypes.string,
   disabled: React.PropTypes.bool,
   itemContent: React.PropTypes.element,
   leftActions: React.PropTypes.array,
-  leftIcon: React.PropTypes.any,
+  leftIcon: React.PropTypes.oneOfType([
+    React.PropTypes.string,
+    React.PropTypes.element
+  ]),
   legend: React.PropTypes.string,
   rightActions: React.PropTypes.array,
-  rightIcon: React.PropTypes.any,
+  rightIcon: React.PropTypes.oneOfType([
+    React.PropTypes.string,
+    React.PropTypes.element
+  ]),
   selectable: React.PropTypes.bool,
   to: React.PropTypes.string
 };
diff --git a/components/list/readme.md b/components/list/readme.md
index 080ad32d3..7b85e4401 100644
--- a/components/list/readme.md
+++ b/components/list/readme.md
@@ -54,16 +54,16 @@ Represents a list item that can have avatar, icons, title, subtitle, etc. Note:
 
 | Name              | Type                  | Default       | Description|
 |:-----|:-----|:-----|:-----|
-| `avatar`          | `String`              |               | A string URL to specify an avatar in the left side of the item.|
+| `avatar`          | `String` or `Element` |               | A string URL to specify an avatar in the left side of the item.|
 | `caption`         | `String`              |               | Main text of the item.|
 | `className`       | `String`              | `''`          | Set a class to give custom styles to the list item.|
 | `disabled`        | `String`              | `false`       | If true, the item is displayed as disabled and is not clickable.|
 | `itemContent`     | `Element`             |               | An element that will be displayed as the item. If set, this will override `caption` and `legend`.|
 | `leftActions`     | `Array of Elements`   |               | A list of elements that are placed on the left side of the item and after the avatar attribute.|
-| `leftIcon`        | `Any`                 |               | A string key of a font icon or element to display an icon in the left side of the item. |
+| `leftIcon`        | `String` or `Element` |               | A string key of a font icon or element to display an icon in the left side of the item. |
 | `legend`          | `String`              |               | Secondary text to display under the caption.|
 | `onClick`         | `Function`            |               | Callback the is invoked when the item is clicked if it's not disabled. |
-| `rightIcon`       | `Any`                 |               | The same as the `leftIcon` but in this case the icon is displayed in the right side.|
+| `rightIcon`       | `String` or `Element` |               | The same as the `leftIcon` but in this case the icon is displayed in the right side.|
 | `rightActions`    | `Array of Elements`   |               | A list of elements that are placed on the right side of the item and after the rightIcon attribute.|
 | `ripple`          | `Boolean`             | `false`       | If true, the item displays a ripple effect on click. By default it's inherited from the parent element.|
 | `selectable`      | `Boolean`             | `false`       | If true, the elements in the list will display a hover effect and a pointer cursor. Inherited from the parent.|
diff --git a/components/menu/IconMenu.jsx b/components/menu/IconMenu.jsx
index a31f8d0ed..68c908c80 100644
--- a/components/menu/IconMenu.jsx
+++ b/components/menu/IconMenu.jsx
@@ -7,7 +7,10 @@ class IconMenu extends React.Component {
   static propTypes = {
     children: React.PropTypes.node,
     className: React.PropTypes.string,
-    icon: React.PropTypes.any,
+    icon: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.element
+    ]),
     iconRipple: React.PropTypes.bool,
     menuRipple: React.PropTypes.bool,
     onClick: React.PropTypes.func,
diff --git a/components/menu/MenuItem.jsx b/components/menu/MenuItem.jsx
index 84301ab73..76a4d426a 100644
--- a/components/menu/MenuItem.jsx
+++ b/components/menu/MenuItem.jsx
@@ -10,7 +10,10 @@ class MenuItem extends React.Component {
     children: React.PropTypes.any,
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
-    icon: React.PropTypes.any,
+    icon: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.element
+    ]),
     onClick: React.PropTypes.func,
     selected: React.PropTypes.bool,
     shortcut: React.PropTypes.string
diff --git a/components/menu/readme.md b/components/menu/readme.md
index bb12d8d68..52bd9d870 100644
--- a/components/menu/readme.md
+++ b/components/menu/readme.md
@@ -45,33 +45,33 @@ The menu has state to keep a value with the currently selected item. It also exp
 
 As the most usual scenario will be to open the menu from a click in an Icon, we provide this subcomponent implementing this behavior. The `IconMenu` shows an icon and implements a `Menu` under the covers that is shown when is clicked. Some of its properties are transferred to the menu, others to the children:
 
-| Name            | Type          | Default         | Description|
+| Name            | Type                  | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `className`     | `String`      |  `''`           | Set a class to give custom styles to the icon wrapper.|
-| `icon`          | `Any`         | `more_vert`     | Icon font key string or Element to display the opener icon. |
-| `iconRipple`    | `Boolean`     | `true`          | If true, the icon will show a ripple when is clicked. |
-| `menuRipple`    | `Boolean`     | `true`          | Transferred to the `Menu` component. |
-| `onClick`       | `Function`    |                 | Callback that will be called when the icon is clicked. |
-| `onHide`        | `Function`    |                 | Callback that will be called when the menu is being hidden. |
-| `onSelect`      | `Function`    |                 | Callback that will be invoked when a menu item is selected. |
-| `onShow`        | `Function`    |                 | Callback that will be invoked when the menu is being shown. |
-| `position`      | `String`      | `auto`          | Determines the position of the menu. This property is transferred to the inner `Menu` component. |
-| `selectable`    | `Boolean`     | `false`         | If true, the menu will keep a value to highlight the active child item. |
-| `selected`      | `Any`         |                 | Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted. |
+| `className`     | `String`              |  `''`           | Set a class to give custom styles to the icon wrapper.|
+| `icon`          | `String` or `Element` | `more_vert`     | Icon font key string or Element to display the opener icon. |
+| `iconRipple`    | `Boolean`             | `true`          | If true, the icon will show a ripple when is clicked. |
+| `menuRipple`    | `Boolean`             | `true`          | Transferred to the `Menu` component. |
+| `onClick`       | `Function`            |                 | Callback that will be called when the icon is clicked. |
+| `onHide`        | `Function`            |                 | Callback that will be called when the menu is being hidden. |
+| `onSelect`      | `Function`            |                 | Callback that will be invoked when a menu item is selected. |
+| `onShow`        | `Function`            |                 | Callback that will be invoked when the menu is being shown. |
+| `position`      | `String`              | `auto`          | Determines the position of the menu. This property is transferred to the inner `Menu` component. |
+| `selectable`    | `Boolean`             | `false`         | If true, the menu will keep a value to highlight the active child item. |
+| `selected`      | `Any`                 |                 | Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted. |
 
 ## Menu Item
 
 The inner component for menus and describes the content of each option. It behaves in a similar way to List Items but simpler.
 
-| Name              | Type          | Default   | Description|
+| Name              | Type              | Default     | Description|
 |:-----|:-----|:-----|:-----|
-| `caption`     | `String`        |             | The text to include in the menu item. Required.|
-| `className`   | `String`        | `''`        | Set a class to give custom styles to the item.|
-| `disabled`    | `Boolean`       | `false`     | If true, the item will be displayed as disabled and is not selectable.|
-| `icon`        | `Any`           |             | Icon font key string or Element to display in the right side of the option. |
-| `onClick`     | `Function`      |             | Callback that will be called when Component is clicked. |
-| `selected`    | `Boolean`       | `false`     | Transferred from the `Menu` component for selectable menus. Indicates if it's the current active option. |
-| `shortcut`    | `String`        | `''`        | Displays shortcut text on the right side of the `caption` attribute. |
+| `caption`     | `String`              |             | The text to include in the menu item. Required.|
+| `className`   | `String`              | `''`        | Set a class to give custom styles to the item.|
+| `disabled`    | `Boolean`             | `false`     | If true, the item will be displayed as disabled and is not selectable.|
+| `icon`        | `String` or `Element` |             | Icon font key string or Element to display in the right side of the option. |
+| `onClick`     | `Function`            |             | Callback that will be called when Component is clicked. |
+| `selected`    | `Boolean`             | `false`     | Transferred from the `Menu` component for selectable menus. Indicates if it's the current active option. |
+| `shortcut`    | `String`              | `''`        | Displays shortcut text on the right side of the `caption` attribute. |
 
 ## Menu Divider
 
diff --git a/components/snackbar/Snackbar.jsx b/components/snackbar/Snackbar.jsx
index 3f214dfb2..cbadec596 100644
--- a/components/snackbar/Snackbar.jsx
+++ b/components/snackbar/Snackbar.jsx
@@ -10,7 +10,10 @@ class Snackbar extends React.Component {
     action: React.PropTypes.string,
     active: React.PropTypes.bool,
     className: React.PropTypes.string,
-    icon: React.PropTypes.any,
+    icon: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.element
+    ]),
     label: React.PropTypes.string.isRequired,
     onClick: React.PropTypes.func,
     onTimeout: React.PropTypes.func,
diff --git a/components/snackbar/readme.md b/components/snackbar/readme.md
index 7d04d8339..620f12233 100644
--- a/components/snackbar/readme.md
+++ b/components/snackbar/readme.md
@@ -35,14 +35,14 @@ class SnackbarTest extends React.Component {
 
 ## Properties
 
-| Name          | Type          | Default       | Description|
+| Name          | Type                    | Default       | Description|
 |:-----|:-----|:-----|:-----|
-| `action`      | `String`      |               | Label for the action component inside the Snackbar.|
-| `active`      | `Boolean`     |  `false`      | If true, the snackbar will be active.|
-| `className`   | `String`      | `''`          | Additional class name to provide custom styling.|
-| `icon`        | `Any`         |               | String key for an icon or Element which will be displayed in left side of the snackbar.|
-| `label`       | `String`      |               | Text to display in the content. Required.|
-| `onClick`     | `Function`    |               | Callback function that will be called when the button action is clicked.|
-| `onTimeout`   | `Function`    |               | Callback function when finish the set timeout.|
-| `timeout`     | `Number`      |               | Amount of time in milliseconds after the Snackbar will be automatically hidden.|
-| `type`        | `String`      |               | Indicates the action type. Can be `accept`, `warning` or `cancel`|
+| `action`      | `String`                |               | Label for the action component inside the Snackbar.|
+| `active`      | `Boolean`               |  `false`      | If true, the snackbar will be active.|
+| `className`   | `String`                | `''`          | Additional class name to provide custom styling.|
+| `icon`        | `String` or `Element`   |               | String key for an icon or Element which will be displayed in left side of the snackbar.|
+| `label`       | `String`                |               | Text to display in the content. Required.|
+| `onClick`     | `Function`              |               | Callback function that will be called when the button action is clicked.|
+| `onTimeout`   | `Function`              |               | Callback function when finish the set timeout.|
+| `timeout`     | `Number`                |               | Amount of time in milliseconds after the Snackbar will be automatically hidden.|
+| `type`        | `String`                |               | Indicates the action type. Can be `accept`, `warning` or `cancel`|
diff --git a/spec/components/checkbox.jsx b/spec/components/checkbox.jsx
index 7c88376db..5e395f109 100644
--- a/spec/components/checkbox.jsx
+++ b/spec/components/checkbox.jsx
@@ -35,7 +35,7 @@ class CheckboxTest extends React.Component {
         />
         <Checkbox
           checked={this.state.checkbox_2}
-          label="Not checked biatch"
+          label="Not checked checkbox"
           onChange={this.handleChange.bind(this, 'checkbox_2')}
           onFocus={this.handleFocus}
           onBlur={this.handleBlur}

From 436d4b423a33c477b202161a88d814bf309918d9 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 7 Apr 2016 20:33:41 +0200
Subject: [PATCH 0459/1024] 0.15.1 release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a18e53df3..e0534902f 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "react-toolbox",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "homepage": "http://www.react-toolbox.com/",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "main": "./lib",
   "author": {
     "name": "React Toolbox Team",

From 3812686fe3f53d8a76625d50f49a08e40ee83f10 Mon Sep 17 00:00:00 2001
From: Felipe Amorim <felipe.leusin@gmail.com>
Date: Thu, 7 Apr 2016 18:51:18 -0300
Subject: [PATCH 0460/1024] updates package.json to work with react 15

---
 package.json | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index a18e53df3..bf14b8a72 100644
--- a/package.json
+++ b/package.json
@@ -73,14 +73,14 @@
     "phantomjs": "^1.9.19",
     "phantomjs-polyfill": "0.0.1",
     "postcss-loader": "^0.8.0",
-    "react": "^0.14.3",
-    "react-addons-css-transition-group": "^0.14.3",
-    "react-addons-test-utils": "^0.14.3",
+    "react": "^15.0.0",
+    "react-addons-css-transition-group": "^15.0.0",
+    "react-addons-test-utils": "^15.0.0",
     "react-docgen": "^2.4.0",
-    "react-dom": "^0.14.3",
+    "react-dom": "^15.0.0",
     "react-transform-catch-errors": "^1.0.0",
     "react-transform-hmr": "^1.0.1",
-    "redbox-react": "^1.2.0",
+    "redbox-react": "^1.2.3",
     "rimraf": "^2.5.0",
     "sass-loader": "^3.1.2",
     "sinon": "git://github.com/sinonjs/sinon.git#b672042043517b9f84e14ed0fb8265126168778a",
@@ -108,9 +108,9 @@
   "peerDependencies": {
     "classnames": "^2.2.0",
     "normalize.css": "^3.0.3",
-    "react": "^0.14",
-    "react-addons-css-transition-group": "^0.14.0",
-    "react-dom": "^0.14.0"
+    "react": "^0.14 || ^15.0.0",
+    "react-addons-css-transition-group": "^0.14.0 || ^15.0.0",
+    "react-dom": "^0.14.0 || ^15.0.0"
   },
   "typings": "./react-toolbox.d.ts"
 }

From 516a0a3c132e6c745455e3bfcd8f08b99ec55f00 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 9 Apr 2016 20:34:34 +0200
Subject: [PATCH 0461/1024] Update dependencies, linter and rules

---
 .eslintrc                           | 18 ++------
 .nvmrc                              |  2 +-
 .travis.yml                         |  2 +-
 components/checkbox/Check.jsx       |  8 +++-
 components/checkbox/Checkbox.jsx    |  2 +-
 components/list/ListItem.jsx        |  2 +-
 components/list/ListItemAction.jsx  |  3 +-
 components/list/ListItemContent.jsx |  2 +-
 components/menu/Menu.jsx            |  2 +-
 components/radio/Radio.jsx          |  8 +++-
 components/radio/RadioButton.jsx    |  2 +-
 components/ripple/Ripple.jsx        |  6 +--
 components/switch/Switch.jsx        |  2 +-
 components/switch/Thumb.jsx         |  6 ++-
 components/table/TableHead.jsx      |  1 +
 components/tooltip/Tooltip.jsx      |  2 +-
 package.json                        | 68 ++++++++++++++---------------
 spec/components/list.jsx            |  8 ++--
 webpack.config.development.js       |  3 +-
 webpack.config.test.js              |  3 +-
 20 files changed, 80 insertions(+), 70 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 34a4aabbd..03a58a799 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -32,7 +32,7 @@
     "comma-style": [2, "last"],
     "complexity": [0, 11],
     "constructor-super": [2],
-    "consistent-return": [2],
+    "consistent-return": [0],
     "consistent-this": [0, "that"],
     "curly": [2, "multi-line"],
     "default-case": [2],
@@ -44,7 +44,6 @@
     "func-names": [0],
     "func-style": [0, "declaration"],
     "generator-star-spacing": [2, "after"],
-    "strict": [2, "always"],
     "guard-for-in": [0],
     "handle-callback-err": [0],
     "key-spacing": [2, {
@@ -79,7 +78,6 @@
     "no-else-return": [0],
     "no-empty": [2],
     "no-empty-character-class": [2],
-    "no-empty-label": [2],
     "no-eq-null": [0],
     "no-eval": [2],
     "no-ex-assign": [2],
@@ -173,16 +171,9 @@
     "quote-props": [0],
     "radix": [0],
     "semi": [2],
-    "semi-spacing": [2, {
-      "before": false,
-      "after": true
-    }],
     "sort-vars": [0],
-    "space-after-keywords": [2, "always"],
-    "space-before-function-paren": [2, {
-      "anonymous": "always",
-      "named": "always"
-    }],
+    "keyword-spacing": [2, {"after": true}],
+    "space-before-function-paren": [2, { "anonymous": "always", "named": "always" }],
     "space-before-blocks": [0, "always"],
     "space-in-brackets": [0, "never", {
       "singleValue": true,
@@ -194,7 +185,6 @@
     }],
     "space-in-parens": [2, "never"],
     "space-infix-ops": [2],
-    "space-return-throw-case": [2],
     "space-unary-ops": [2, {
       "words": true,
       "nonwords": false
@@ -220,7 +210,7 @@
     "react/jsx-no-duplicate-props": 1,
     "react/jsx-no-undef": 1,
     "react/jsx-pascal-case": 1,
-    "react/jsx-sort-prop-types": 1,
+    "react/sort-prop-types": 1,
     "react/jsx-sort-props": 0,
     "react/jsx-uses-react": 1,
     "react/jsx-uses-vars": 1,
diff --git a/.nvmrc b/.nvmrc
index 80895903a..cc2fbe89b 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-4.3.0
+4.3.2
diff --git a/.travis.yml b/.travis.yml
index 697d35da4..18457a66c 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-  - "4.2.1"
+  - "4.3.2"
 script:
   - npm run lint
   - npm test
diff --git a/components/checkbox/Check.jsx b/components/checkbox/Check.jsx
index c4f56ec69..9dc9a7be7 100644
--- a/components/checkbox/Check.jsx
+++ b/components/checkbox/Check.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import ClassNames from 'classnames';
 import Ripple from '../ripple';
 import style from './style';
@@ -11,6 +11,12 @@ const Check = ({checked, children, onMouseDown}) => {
   return <div data-react-toolbox='check' onMouseDown={onMouseDown} className={className}>{children}</div>;
 };
 
+Check.propTypes = {
+  checked: PropTypes.bool,
+  children: PropTypes.any,
+  onMouseDown: PropTypes.func
+};
+
 export default Ripple({
   className: style.ripple,
   spread: 2.6,
diff --git a/components/checkbox/Checkbox.jsx b/components/checkbox/Checkbox.jsx
index 9f697839e..803fb11b2 100644
--- a/components/checkbox/Checkbox.jsx
+++ b/components/checkbox/Checkbox.jsx
@@ -34,7 +34,7 @@ class Checkbox extends React.Component {
   }
 
   render () {
-    const { onChange, ...others } = this.props;
+    const { onChange, ...others } = this.props; //eslint-disable-line no-unused-vars
     const className = ClassNames(style.field, {
       [style.disabled]: this.props.disabled
     }, this.props.className);
diff --git a/components/list/ListItem.jsx b/components/list/ListItem.jsx
index 138f8487c..abb578499 100644
--- a/components/list/ListItem.jsx
+++ b/components/list/ListItem.jsx
@@ -52,7 +52,7 @@ class ListItem extends React.Component {
   }
 
   render () {
-    const {onMouseDown, to, onClick, ripple, ...other} = this.props;
+    const {onMouseDown, to, onClick, ripple, ...other} = this.props; //eslint-disable-line no-unused-vars
     const children = this.groupChildren();
     const content = <ListItemLayout {...children} {...other}/>;
     let className = style.listItem;
diff --git a/components/list/ListItemAction.jsx b/components/list/ListItemAction.jsx
index 82388b26f..9ecdea068 100644
--- a/components/list/ListItemAction.jsx
+++ b/components/list/ListItemAction.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import style from './style';
 
 const ListItemAction = ({action}) => {
@@ -13,6 +13,7 @@ const ListItemAction = ({action}) => {
 };
 
 ListItemAction.propTypes = {
+  action: PropTypes.object
 };
 
 ListItemAction.defaultProps = {
diff --git a/components/list/ListItemContent.jsx b/components/list/ListItemContent.jsx
index 22e0b517c..da9c05048 100644
--- a/components/list/ListItemContent.jsx
+++ b/components/list/ListItemContent.jsx
@@ -16,7 +16,7 @@ class ListItemContent extends React.Component {
     const {type, children, caption, legend} = this.props;
 
     let count = React.Children.count(children);
-    [caption, legend].forEach(s => count += s ? 1 : 0);
+    [caption, legend].forEach(s => { count += s ? 1 : 0; });
     const typeIndex = Math.min(count, types.length);
 
     return type || types[typeIndex];
diff --git a/components/menu/Menu.jsx b/components/menu/Menu.jsx
index b0dfbaf60..992ac4a2d 100644
--- a/components/menu/Menu.jsx
+++ b/components/menu/Menu.jsx
@@ -125,7 +125,7 @@ class Menu extends React.Component {
       } else if (position === POSITION.BOTTOM_LEFT) {
         return { clip: `rect(${height}px 0 ${height}px 0)` };
       } else if (position === POSITION.TOP_LEFT) {
-        return { clip: `rect(0 0 0 0)` };
+        return { clip: 'rect(0 0 0 0)' };
       }
     }
   }
diff --git a/components/radio/Radio.jsx b/components/radio/Radio.jsx
index 2f6575718..872dc7420 100644
--- a/components/radio/Radio.jsx
+++ b/components/radio/Radio.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import Ripple from '../ripple';
 import style from './style';
 
@@ -7,6 +7,12 @@ const Radio = ({checked, children, onMouseDown}) => {
   return <div data-react-toolbox='radio' onMouseDown={onMouseDown} className={className}>{children}</div>;
 };
 
+Radio.propTypes = {
+  checked: PropTypes.bool,
+  children: PropTypes.any,
+  onMouseDown: PropTypes.func
+};
+
 export default Ripple({
   className: style.ripple,
   spread: 2.6,
diff --git a/components/radio/RadioButton.jsx b/components/radio/RadioButton.jsx
index 31bc6ad7d..ca7eefe59 100644
--- a/components/radio/RadioButton.jsx
+++ b/components/radio/RadioButton.jsx
@@ -38,7 +38,7 @@ class RadioButton extends React.Component {
 
   render () {
     const className = ClassNames(style[this.props.disabled ? 'disabled' : 'field'], this.props.className);
-    const { onChange, ...others } = this.props;
+    const { onChange, ...others } = this.props; //eslint-disable-line no-unused-vars
 
     return (
       <label data-react-toolbox='radio-button' className={className}>
diff --git a/components/ripple/Ripple.jsx b/components/ripple/Ripple.jsx
index 4059141bc..6f3de37e9 100644
--- a/components/ripple/Ripple.jsx
+++ b/components/ripple/Ripple.jsx
@@ -87,10 +87,10 @@ const Ripple = (options = {}) => {
         } else {
           const {
             children,
-            ripple,
+            ripple, //eslint-disable-line no-unused-vars
             rippleClassName: className,
-            rippleCentered: centered,
-            rippleSpread: spread,
+            rippleCentered: centered, //eslint-disable-line no-unused-vars
+            rippleSpread: spread, //eslint-disable-line no-unused-vars
             ...other
           } = this.props;
 
diff --git a/components/switch/Switch.jsx b/components/switch/Switch.jsx
index 59e63a5d1..c6539f024 100644
--- a/components/switch/Switch.jsx
+++ b/components/switch/Switch.jsx
@@ -38,7 +38,7 @@ class Switch extends React.Component {
   render () {
     let className = style[this.props.disabled ? 'disabled' : 'field'];
     const switchClassName = style[this.props.checked ? 'on' : 'off'];
-    const { onChange, ...others } = this.props;
+    const { onChange, ...others } = this.props; //eslint-disable-line no-unused-vars
     if (this.props.className) className += ` ${this.props.className}`;
 
     return (
diff --git a/components/switch/Thumb.jsx b/components/switch/Thumb.jsx
index a1728b7ab..73adff1ae 100644
--- a/components/switch/Thumb.jsx
+++ b/components/switch/Thumb.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import Ripple from '../ripple';
 import style from './style';
 
@@ -6,6 +6,10 @@ const Thumb = ({children, onMouseDown}) => (
   <span role='thumb' className={style.thumb} onMouseDown={onMouseDown}>{children}</span>
 );
 
+Thumb.propTypes = {
+  children: PropTypes.any
+};
+
 export default Ripple({
   className: style.ripple,
   spread: 2.6,
diff --git a/components/table/TableHead.jsx b/components/table/TableHead.jsx
index 17b1cf3b8..06a166dce 100644
--- a/components/table/TableHead.jsx
+++ b/components/table/TableHead.jsx
@@ -28,6 +28,7 @@ TableHead.propTypes = {
   className: React.PropTypes.string,
   model: React.PropTypes.object,
   onSelect: React.PropTypes.func,
+  selectable: React.PropTypes.bool,
   selected: React.PropTypes.bool
 };
 
diff --git a/components/tooltip/Tooltip.jsx b/components/tooltip/Tooltip.jsx
index 967f14c19..6694aa90b 100644
--- a/components/tooltip/Tooltip.jsx
+++ b/components/tooltip/Tooltip.jsx
@@ -43,7 +43,7 @@ const Tooltip = (ComposedComponent) => class extends React.Component {
   };
 
   render () {
-    const {children, className, tooltip, tooltipDelay, tooltipHideOnClick, ...other} = this.props;
+    const {children, className, tooltip, tooltipDelay, tooltipHideOnClick, ...other} = this.props; //eslint-disable-line no-unused-vars
     const composedClassName = ClassNames(style.root, className);
     const tooltipClassName = ClassNames(style.tooltip, {
       [style.active]: this.state.active
diff --git a/package.json b/package.json
index bf14b8a72..1c42263c0 100644
--- a/package.json
+++ b/package.json
@@ -39,62 +39,62 @@
     "classnames": "^2.2.1"
   },
   "devDependencies": {
-    "autoprefixer": "^6.2.1",
-    "babel-cli": "^6.3.17",
-    "babel-core": "^6.3.26",
-    "babel-eslint": "^5.0.0-beta4",
-    "babel-loader": "^6.2.0",
-    "babel-plugin-react-transform": "^2.0.0-beta1",
-    "babel-polyfill": "^6.3.14",
-    "babel-preset-es2015": "^6.3.13",
+    "autoprefixer": "^6.3.6",
+    "babel-cli": "^6.7.5",
+    "babel-core": "^6.7.6",
+    "babel-eslint": "^6.0.2",
+    "babel-loader": "^6.2.4",
+    "babel-plugin-react-transform": "^2.0.2",
+    "babel-polyfill": "^6.7.4",
+    "babel-preset-es2015": "^6.6.0",
     "babel-preset-react": "^6.3.13",
     "babel-preset-stage-0": "^6.3.13",
-    "bluebird": "^3.1.1",
-    "core-js": "^1.2.6",
-    "cpx": "^1.2.1",
+    "bluebird": "^3.3.4",
+    "core-js": "^2.2.2",
+    "cpx": "^1.3.1",
     "cross-env": "^1.0.5",
     "css-loader": "^0.23.1",
-    "eslint": "^1.10.3",
-    "eslint-plugin-babel": "^3.0.0",
-    "eslint-plugin-react": "^3.12.0",
-    "expect": "^1.13.4",
+    "eslint": "^2.7.0",
+    "eslint-plugin-babel": "^3.2.0",
+    "eslint-plugin-react": "^4.3.0",
+    "expect": "^1.16.0",
     "express": "^4.13.3",
-    "extract-text-webpack-plugin": "^0.9.1",
-    "glob": "^6.0.2",
-    "karma": "^0.13.15",
-    "karma-chrome-launcher": "^0.2.2",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "glob": "^7.0.3",
+    "karma": "^0.13.22",
+    "karma-chrome-launcher": "^0.2.3",
     "karma-cli": "^0.1.2",
-    "karma-mocha": "^0.2.1",
-    "karma-phantomjs-launcher": "~0.2.1",
+    "karma-mocha": "^0.2.2",
+    "karma-phantomjs-launcher": "^1.0.0",
     "karma-webpack": "^1.7.0",
     "mocha": "^2.3.4",
     "node-sass": "^3.4.2",
-    "normalize.css": "^3.0.3",
-    "phantomjs": "^1.9.19",
-    "phantomjs-polyfill": "0.0.1",
-    "postcss-loader": "^0.8.0",
+    "normalize.css": "^4.0.0",
+    "phantomjs": "^2.1.7",
+    "phantomjs-polyfill": "0.0.2",
+    "postcss-loader": "^0.8.2",
     "react": "^15.0.0",
     "react-addons-css-transition-group": "^15.0.0",
     "react-addons-test-utils": "^15.0.0",
-    "react-docgen": "^2.4.0",
+    "react-docgen": "^2.8.1",
     "react-dom": "^15.0.0",
     "react-transform-catch-errors": "^1.0.0",
-    "react-transform-hmr": "^1.0.1",
+    "react-transform-hmr": "^1.0.4",
     "redbox-react": "^1.2.3",
     "rimraf": "^2.5.0",
-    "sass-loader": "^3.1.2",
+    "sass-loader": "^3.2.0",
     "sinon": "git://github.com/sinonjs/sinon.git#b672042043517b9f84e14ed0fb8265126168778a",
-    "style-loader": "^0.13.0",
+    "style-loader": "^0.13.1",
     "toolbox-loader": "0.0.2",
-    "webpack": "^1.12.9",
-    "webpack-dev-middleware": "^1.4.0",
-    "webpack-hot-middleware": "^2.6.0"
+    "webpack": "^1.12.14",
+    "webpack-dev-middleware": "^1.6.1",
+    "webpack-hot-middleware": "^2.10.0"
   },
   "scripts": {
     "babel": "babel ./components --out-dir ./lib",
     "build": "cross-env NODE_ENV=production npm run babel && npm run sass",
     "clean": "rimraf ./lib",
-    "lint": "eslint ./ --ext .js,.jsx",
+    "lint": "eslint ./components --ext .js,.jsx",
     "patch": "bumped release patch",
     "prebuild": "npm run clean",
     "prepublish": "npm run build",
@@ -107,7 +107,7 @@
   "license": "MIT",
   "peerDependencies": {
     "classnames": "^2.2.0",
-    "normalize.css": "^3.0.3",
+    "normalize.css": "^4.0.0",
     "react": "^0.14 || ^15.0.0",
     "react-addons-css-transition-group": "^0.14.0 || ^15.0.0",
     "react-dom": "^0.14.0 || ^15.0.0"
diff --git a/spec/components/list.jsx b/spec/components/list.jsx
index 9f42ea392..da780b046 100644
--- a/spec/components/list.jsx
+++ b/spec/components/list.jsx
@@ -50,7 +50,7 @@ class ListTest extends React.Component {
               rightIcon='star'
             />
             <ListItem
-              avatar='https://pbs.twimg.com/profile_images/459485216499720192/ufS4YGOY_400x400.png'
+              avatar='https://pbs.twimg.com/profile_images/693578804808278017/a5y4h8MN_400x400.png'
               caption='Javi Velasco'
               legend='Frontend engineer at Socialbro'
               rightIcon='star'
@@ -112,7 +112,7 @@ class ListTest extends React.Component {
               rightIcon='mail'
             />
             <ListItem
-              avatar='https://pbs.twimg.com/profile_images/459485216499720192/ufS4YGOY_400x400.png'
+              avatar='https://pbs.twimg.com/profile_images/693578804808278017/a5y4h8MN_400x400.png'
               caption='Javi Velasco'
               rightIcon='mail'
             />
@@ -149,7 +149,7 @@ class ListTest extends React.Component {
             <ListItem leftIcon='send' rightIcon='done' caption='Reference item'/>
             <ListItem rightIcon='done' caption='Item with custom left icons'>
               <FontIcon value='send' />
-              <Avatar image='https://pbs.twimg.com/profile_images/459485216499720192/ufS4YGOY_400x400.png'/>
+              <Avatar image='https://pbs.twimg.com/profile_images/693578804808278017/a5y4h8MN_400x400.png'/>
             </ListItem>
             <ListItem leftIcon='send'>
               <ListItemContent caption='custom right icons' legend='ListItemContent acts as a divider'/>
@@ -175,7 +175,7 @@ class ListTest extends React.Component {
             <ListItem caption='Item with overlayed click events' onClick={() => console.log('clicked row')}>
               <FontIcon value='send' onClick={() => console.log('clicked icon')}/>
               <Avatar
-                image='https://pbs.twimg.com/profile_images/459485216499720192/ufS4YGOY_400x400.png'
+                image='https://pbs.twimg.com/profile_images/693578804808278017/a5y4h8MN_400x400.png'
                 onMouseDown={() => console.log('avatar mouse down, should see ripple')}
                 onClick={() => console.log('clicked avatar')}
               />
diff --git a/webpack.config.development.js b/webpack.config.development.js
index 24d0da982..ed1a5ef1b 100644
--- a/webpack.config.development.js
+++ b/webpack.config.development.js
@@ -17,7 +17,8 @@ module.exports = {
     publicPath: '/build/'
   },
   resolve: {
-    extensions: ['', '.jsx', '.scss', '.js', '.json']
+    extensions: ['', '.jsx', '.scss', '.js', '.json'],
+    packageMains: ['browser', 'web', 'browserify', 'main', 'style']
   },
   module: {
     loaders: [
diff --git a/webpack.config.test.js b/webpack.config.test.js
index 93ad78c02..957e3448e 100644
--- a/webpack.config.test.js
+++ b/webpack.config.test.js
@@ -15,7 +15,8 @@ module.exports = {
     ]
   },
   resolve: {
-    extensions: ['', '.jsx', '.scss', '.js', '.json']
+    extensions: ['', '.jsx', '.scss', '.js', '.json'],
+    packageMains: ['browser', 'web', 'browserify', 'main', 'style']
   },
   watch: true,
   postcss: [autoprefixer],

From a6e162ec9e1223626ec5169e104d9077b7fc39f5 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 10 Apr 2016 11:38:42 +0200
Subject: [PATCH 0462/1024] Update documentation dependencies

---
 docs/.eslintrc                                | 24 ++----
 docs/app/components/layout/home/index.jsx     |  2 +-
 .../layout/main/components/navigation.jsx     | 76 ++++++++-----------
 .../layout/main/components/navigation.scss    |  4 +-
 docs/app/components/layout/main/index.jsx     | 20 +++--
 docs/app/components/markdown/style.scss       |  3 +-
 docs/app/index.jsx                            |  5 +-
 docs/package.json                             | 52 ++++++-------
 docs/server.js                                | 14 ++--
 docs/webpack.config.development.js            |  1 +
 docs/webpack.config.production.js             |  1 +
 docs/www/index.html                           |  4 +-
 package.json                                  | 14 ++--
 13 files changed, 100 insertions(+), 120 deletions(-)

diff --git a/docs/.eslintrc b/docs/.eslintrc
index 6f9f9cd88..1b11bd11f 100644
--- a/docs/.eslintrc
+++ b/docs/.eslintrc
@@ -32,7 +32,7 @@
     "comma-style": [2, "last"],
     "complexity": [0, 11],
     "constructor-super": [2],
-    "consistent-return": [2],
+    "consistent-return": [0],
     "consistent-this": [0, "that"],
     "curly": [2, "multi-line"],
     "default-case": [2],
@@ -44,7 +44,6 @@
     "func-names": [0],
     "func-style": [0, "declaration"],
     "generator-star-spacing": [2, "after"],
-    "strict": [2, "always"],
     "guard-for-in": [0],
     "handle-callback-err": [0],
     "key-spacing": [2, {
@@ -79,7 +78,6 @@
     "no-else-return": [0],
     "no-empty": [2],
     "no-empty-character-class": [2],
-    "no-empty-label": [2],
     "no-eq-null": [0],
     "no-eval": [2],
     "no-ex-assign": [2],
@@ -149,7 +147,9 @@
     "no-undefined": [0],
     "no-underscore-dangle": [0],
     "no-unreachable": [2],
-    "no-unused-expressions": [2],
+    "no-unused-expressions": [2, {
+      "allowShortCircuit": true
+    }],
     "no-unused-vars": [1, {
       "vars": "all",
       "args": "after-used"
@@ -164,23 +164,16 @@
     "no-with": [2],
     "one-var": [0],
     "operator-assignment": [0, "always"],
-    "operator-linebreak": [2, "after"],
+    "operator-linebreak": [2, "before"],
     "padded-blocks": [0],
     "prefer-const": [2],
     "prefer-spread": [2],
     "quote-props": [0],
     "radix": [0],
     "semi": [2],
-    "semi-spacing": [2, {
-      "before": false,
-      "after": true
-    }],
     "sort-vars": [0],
-    "space-after-keywords": [2, "always"],
-    "space-before-function-paren": [2, {
-      "anonymous": "always",
-      "named": "always"
-    }],
+    "keyword-spacing": [2, {"after": true}],
+    "space-before-function-paren": [2, { "anonymous": "always", "named": "always" }],
     "space-before-blocks": [0, "always"],
     "space-in-brackets": [0, "never", {
       "singleValue": true,
@@ -192,7 +185,6 @@
     }],
     "space-in-parens": [2, "never"],
     "space-infix-ops": [2],
-    "space-return-throw-case": [2],
     "space-unary-ops": [2, {
       "words": true,
       "nonwords": false
@@ -218,7 +210,7 @@
     "react/jsx-no-duplicate-props": 1,
     "react/jsx-no-undef": 1,
     "react/jsx-pascal-case": 1,
-    "react/jsx-sort-prop-types": 1,
+    "react/sort-prop-types": 1,
     "react/jsx-sort-props": 0,
     "react/jsx-uses-react": 1,
     "react/jsx-uses-vars": 1,
diff --git a/docs/app/components/layout/home/index.jsx b/docs/app/components/layout/home/index.jsx
index 8614b117a..86b011518 100644
--- a/docs/app/components/layout/home/index.jsx
+++ b/docs/app/components/layout/home/index.jsx
@@ -81,7 +81,7 @@ const Home = () => (
     </section>
 
     <footer className={style.footer}>
-      <p>React Toolbox © 2015</p>
+      <p>React Toolbox © 2016</p>
       <small>Crafted with <span className={style.love}>ღ</span> between Spain and Thailand</small>
     </footer>
   </article>
diff --git a/docs/app/components/layout/main/components/navigation.jsx b/docs/app/components/layout/main/components/navigation.jsx
index facb3ff65..8d6a5a245 100644
--- a/docs/app/components/layout/main/components/navigation.jsx
+++ b/docs/app/components/layout/main/components/navigation.jsx
@@ -1,53 +1,41 @@
-import React from 'react';
-import { History } from 'react-router';
+import React, { PropTypes } from 'react';
 import { List, ListItem } from 'react-toolbox';
+import classnames from 'classnames';
 import components from '../modules/components';
 import style from './navigation.scss';
 
-const MainNavigation = React.createClass({
-  propTypes: {
-    active: React.PropTypes.bool,
-    className: React.PropTypes.string
-  },
-
-  mixins: [History],
-
-  renderDrawerItems () {
-    return Object.keys(components).map((key) => {
-      const ToolboxComponent = components[key];
-      const to = this.context.history.createHref(ToolboxComponent.path);
-      let className = style.item;
-      if (this.context.history.isActive(ToolboxComponent.path)) {
-        className += ` ${style.active}`;
-      }
+const MainNavigation = ({ className }, { router }) => {
+  const drawerItems = Object.keys(components).map((key) => {
+    const isActive = router.isActive(components[key].path);
+    return (
+      <ListItem
+        key={key}
+        caption={components[key].name}
+        className={classnames(style.item, { [style.active]: isActive })}
+        selectable
+        onClick={() => { router.push(components[key].path);}}
+      />
+    );
+  });
 
-      return (
-        <ListItem
-          key={key}
-          caption={ToolboxComponent.name}
-          className={className}
-          selectable
-          to={to}
-        />
-      );
-    });
-  },
+  return (
+    <aside className={classnames(style.root, { [className]: className })}>
+      <List className={style.list} selectable ripple>
+        {drawerItems}
+      </List>
+      <footer className={style.footer}>
+        <span>React Toolbox © 2016</span>
+      </footer>
+    </aside>
+  );
+};
 
-  render () {
-    let className = style.root;
-    if (this.props.className) className += ` ${this.props.className}`;
+MainNavigation.propTypes = {
+  className: PropTypes.string
+};
 
-    return (
-      <aside className={className}>
-        <List className={style.list} selectable ripple>
-          {this.renderDrawerItems()}
-        </List>
-        <footer className={style.footer}>
-          <span>React Toolbox © 2015</span>
-        </footer>
-      </aside>
-    );
-  }
-});
+MainNavigation.contextTypes = {
+  router: PropTypes.object
+};
 
 export default MainNavigation;
diff --git a/docs/app/components/layout/main/components/navigation.scss b/docs/app/components/layout/main/components/navigation.scss
index 539312349..37203cc20 100644
--- a/docs/app/components/layout/main/components/navigation.scss
+++ b/docs/app/components/layout/main/components/navigation.scss
@@ -14,10 +14,10 @@
 }
 
 .item {
-  a > span{
+  > span{
     padding: $navigation-v-padding $navigation-h-padding;
   }
-  > span > span {
+  [data-react-toolbox="list-item-text"] {
     font-size: $font-size-small;
     font-weight: $font-weight-semi-bold;
   }
diff --git a/docs/app/components/layout/main/index.jsx b/docs/app/components/layout/main/index.jsx
index 84e40e5d7..66d9b2fb1 100644
--- a/docs/app/components/layout/main/index.jsx
+++ b/docs/app/components/layout/main/index.jsx
@@ -9,17 +9,15 @@ import BaseDocs from './modules/components.md';
 import components from './modules/components.js';
 import style from './style';
 
-const LoadExampleButton = (props) => {
-  return (
-    <Button
-      raised
-      accent
-      icon='code'
-      label='Load in playground'
-      onClick={props.onClick}
-    />
-  );
-};
+const LoadExampleButton = (props) => (
+  <Button
+    accent
+    icon='code'
+    label="Load in playground"
+    onClick={props.onClick}
+    raised
+  />
+);
 
 LoadExampleButton.propTypes = {
   onClick: React.PropTypes.func
diff --git a/docs/app/components/markdown/style.scss b/docs/app/components/markdown/style.scss
index 21735434b..14f503e1d 100644
--- a/docs/app/components/markdown/style.scss
+++ b/docs/app/components/markdown/style.scss
@@ -63,8 +63,9 @@ $documentation-table-font-size: 1.4 * $unit;
     text-align: left;
     > button {
       height: $documentation-playground-button-height;
+      font-size: $documentation-playground-button-font-size;
+      line-height: $documentation-playground-button-height;
       > span {
-        font-size: $documentation-playground-button-font-size;
         line-height: $documentation-playground-button-height;
       }
     }
diff --git a/docs/app/index.jsx b/docs/app/index.jsx
index 418acd1f0..ebc9cb46d 100644
--- a/docs/app/index.jsx
+++ b/docs/app/index.jsx
@@ -1,17 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Router, Route, IndexRoute } from 'react-router';
+import { Router, Route, IndexRoute, browserHistory } from 'react-router';
 
 import 'react-toolbox/commons';
 import { App } from 'react-toolbox';
-import { createHashHistory } from 'history';
 
 import Home from './components/layout/home';
 import Install from './components/layout/install';
 import Main from './components/layout/main';
 
 ReactDOM.render((
-  <Router history={createHashHistory({queryKey: false})}>
+  <Router history={browserHistory}>
     <Route component={App}>
       <Route path="/" component={Home} />
       <Route path="/install" component={Install} />
diff --git a/docs/package.json b/docs/package.json
index 56e7c075d..942bc44ca 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -10,46 +10,46 @@
   },
   "dependencies": {
     "babel-standalone": "^6.7.4",
-    "classnames": "^2.2.1",
+    "classnames": "^2.2.3",
     "codemirror": "^5.10.0",
-    "history": "^1.17.0",
-    "react": "^0.14.3",
-    "react-dom": "^0.14.3",
-    "react-router": "^1.0.0-rc3"
+    "history": "^2.0.1",
+    "react": "^15.0.1",
+    "react-dom": "^15.0.1",
+    "react-router": "^2.0.1"
   },
   "devDependencies": {
-    "autoprefixer": "^6.2.1",
-    "babel-core": "^6.3.26",
-    "babel-eslint": "^5.0.0-beta4",
-    "babel-loader": "^6.2.0",
-    "babel-plugin-react-transform": "^2.0.0-beta1",
-    "babel-preset-es2015": "^6.3.13",
-    "babel-preset-react": "^6.3.13",
-    "babel-preset-stage-0": "^6.3.13",
-    "babel-preset-stage-2": "^6.3.13",
+    "autoprefixer": "^6.3.6",
+    "babel-core": "^6.7.6",
+    "babel-eslint": "^6.0.2",
+    "babel-loader": "^6.2.4",
+    "babel-plugin-react-transform": "^2.0.2",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-0": "^6.5.0",
+    "babel-preset-stage-2": "^6.5.0",
     "cross-env": "^1.0.5",
     "css-loader": "^0.23.1",
     "express": "^4.13.3",
-    "extract-text-webpack-plugin": "^0.9.1",
-    "gh-pages": "^0.8.0",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "gh-pages": "^0.11.0",
     "highlight-loader": "git://github.com/javivelasco/highlight-loader.git#master",
-    "highlight.js": "^9.0.0",
+    "highlight.js": "^9.3.0",
     "html-loader": "^0.4.0",
-    "html-webpack-plugin": "^1.7.0",
+    "html-webpack-plugin": "^2.15.0",
     "markdown-loader": "^0.1.7",
     "node-sass": "^3.4.2",
-    "postcss-loader": "^0.8.0",
+    "postcss-loader": "^0.8.2",
     "raw-loader": "^0.5.1",
-    "react-transform-catch-errors": "^1.0.0",
+    "react-transform-catch-errors": "^1.0.2",
     "react-transform-hmr": "^1.0.1",
-    "redbox-react": "^1.2.0",
-    "sass-loader": "^3.1.2",
-    "style-loader": "^0.13.0",
+    "redbox-react": "^1.2.3",
+    "sass-loader": "^3.2.0",
+    "style-loader": "^0.13.1",
     "toolbox-loader": "0.0.2",
     "transfer-webpack-plugin": "^0.1.4",
-    "webpack": "^1.12.9",
-    "webpack-dev-middleware": "^1.4.0",
-    "webpack-hot-middleware": "^2.6.0"
+    "webpack": "^1.12.14",
+    "webpack-dev-middleware": "^1.6.1",
+    "webpack-hot-middleware": "^2.10.0"
   },
   "repository": "github:react-toolbox/react-toolbox",
   "license": "MIT"
diff --git a/docs/server.js b/docs/server.js
index fd1a457b7..85eabda26 100644
--- a/docs/server.js
+++ b/docs/server.js
@@ -7,7 +7,7 @@ const app = express();
 const compiler = webpack(config);
 
 app.use(require('webpack-dev-middleware')(compiler, {
-	noInfo: true,
+  noInfo: true,
   publicPath: config.output.publicPath,
   stats: {
     colors: true
@@ -17,14 +17,14 @@ app.use(require('webpack-dev-middleware')(compiler, {
 app.use(require('webpack-hot-middleware')(compiler));
 
 app.get('*', function (req, res) {
-	res.sendFile(path.join(__dirname, './www/index.html'));
+  res.sendFile(path.join(__dirname, './www/index.html'));
 });
 
 app.listen(8081, '0.0.0.0', function (err) {
-	if (err) {
-		console.log(err);
-		return;
-	}
+  if (err) {
+    console.log(err);
+    return;
+  }
 
-	console.log('Listening at http://0.0.0.0:8081');
+  console.log('Listening at http://0.0.0.0:8081');
 });
diff --git a/docs/webpack.config.development.js b/docs/webpack.config.development.js
index 1e0d0de25..b9d728319 100644
--- a/docs/webpack.config.development.js
+++ b/docs/webpack.config.development.js
@@ -18,6 +18,7 @@ module.exports = {
   },
   resolve: {
     extensions: ['', '.jsx', '.scss', '.js', '.json', '.md'],
+    packageMains: ['browser', 'web', 'browserify', 'main', 'style'],
     alias: {
       'react-toolbox': path.resolve(__dirname + './../components')
     },
diff --git a/docs/webpack.config.production.js b/docs/webpack.config.production.js
index ad739ec9b..0253d450a 100644
--- a/docs/webpack.config.production.js
+++ b/docs/webpack.config.production.js
@@ -14,6 +14,7 @@ module.exports = {
   },
   resolve: {
     extensions: ['', '.jsx', '.scss', '.js', '.json', '.md'],
+    packageMains: ['browser', 'web', 'browserify', 'main', 'style'],
     alias: {
       'react-toolbox': path.resolve(__dirname + './../components')
     },
diff --git a/docs/www/index.html b/docs/www/index.html
index a875ef4b5..ae3105bc9 100644
--- a/docs/www/index.html
+++ b/docs/www/index.html
@@ -29,7 +29,7 @@
     <link rel="canonical" href="http://www.react-toolbox.com/">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
-    <link rel="stylesheet" href="http://github.com/docs.css">
+    <link rel="stylesheet" href="http://github.com/docs.css">
   </head>
 
   <body>
@@ -44,6 +44,6 @@
 
     </script>
     <div id="app"></div>
-    <script src="http://github.com/docs.js"></script>
+    <script src="http://github.com/docs.js"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
index 1c42263c0..a8f25880e 100644
--- a/package.json
+++ b/package.json
@@ -73,11 +73,11 @@
     "phantomjs": "^2.1.7",
     "phantomjs-polyfill": "0.0.2",
     "postcss-loader": "^0.8.2",
-    "react": "^15.0.0",
-    "react-addons-css-transition-group": "^15.0.0",
-    "react-addons-test-utils": "^15.0.0",
+    "react": "^15.0.1",
+    "react-addons-css-transition-group": "^15.0.1",
+    "react-addons-test-utils": "^15.0.1",
     "react-docgen": "^2.8.1",
-    "react-dom": "^15.0.0",
+    "react-dom": "^15.0.1",
     "react-transform-catch-errors": "^1.0.0",
     "react-transform-hmr": "^1.0.4",
     "redbox-react": "^1.2.3",
@@ -108,9 +108,9 @@
   "peerDependencies": {
     "classnames": "^2.2.0",
     "normalize.css": "^4.0.0",
-    "react": "^0.14 || ^15.0.0",
-    "react-addons-css-transition-group": "^0.14.0 || ^15.0.0",
-    "react-dom": "^0.14.0 || ^15.0.0"
+    "react": "^0.14 || ^15.0.1",
+    "react-addons-css-transition-group": "^0.14.0 || ^15.0.1",
+    "react-dom": "^0.14.0 || ^15.0.1"
   },
   "typings": "./react-toolbox.d.ts"
 }

From f6c8304a808c161264b8075b2d9e2f56abada2a4 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 10 Apr 2016 11:39:04 +0200
Subject: [PATCH 0463/1024] Reduce list unneeded markup

---
 components/list/ListItem.jsx        |  8 ++++----
 components/list/ListItemContent.jsx | 14 +++++++-------
 components/list/ListItemLayout.jsx  |  5 +++--
 components/list/ListItemText.jsx    |  2 +-
 components/list/style.scss          | 10 +++-------
 5 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/components/list/ListItem.jsx b/components/list/ListItem.jsx
index abb578499..ee6864406 100644
--- a/components/list/ListItem.jsx
+++ b/components/list/ListItem.jsx
@@ -52,14 +52,14 @@ class ListItem extends React.Component {
   }
 
   render () {
-    const {onMouseDown, to, onClick, ripple, ...other} = this.props; //eslint-disable-line no-unused-vars
+    const {className, onMouseDown, to, onClick, ripple, ...other} = this.props; //eslint-disable-line no-unused-vars
     const children = this.groupChildren();
     const content = <ListItemLayout {...children} {...other}/>;
-    let className = style.listItem;
-    if (this.props.className) className += ` ${this.props.className}`;
+    let finalClassName = style.listItem;
+    if (className) finalClassName += ` ${className}`;
 
     return (
-      <li className={className} onClick={this.handleClick} onMouseDown={onMouseDown}>
+      <li className={finalClassName} onClick={this.handleClick} onMouseDown={onMouseDown}>
         {to ? <a href={this.props.to}>{content}</a> : content}
         {children.ignored}
       </li>
diff --git a/components/list/ListItemContent.jsx b/components/list/ListItemContent.jsx
index da9c05048..f6a028b52 100644
--- a/components/list/ListItemContent.jsx
+++ b/components/list/ListItemContent.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import style from './style';
+import classnames from 'classnames';
 import ListItemText from './ListItemText';
 
 const types = ['auto', 'normal', 'large'];
@@ -24,16 +25,15 @@ class ListItemContent extends React.Component {
 
   render () {
     const {children, caption, legend} = this.props;
-
-    const className = `${style.itemContentRoot} ${style[this.getType()]}`;
+    const className = classnames(style.itemContentRoot, {
+      [style[this.getType()]]: style[this.getType()]
+    });
 
     return (
       <span className={className}>
-        <span className={style.itemContent}>
-          {caption && <ListItemText primary>{caption}</ListItemText>}
-          {legend && <ListItemText>{legend}</ListItemText>}
-          {children}
-        </span>
+        {caption && <ListItemText primary>{caption}</ListItemText>}
+        {legend && <ListItemText>{legend}</ListItemText>}
+        {children}
       </span>
     );
   }
diff --git a/components/list/ListItemLayout.jsx b/components/list/ListItemLayout.jsx
index 5f46ff0ce..bb0092a45 100644
--- a/components/list/ListItemLayout.jsx
+++ b/components/list/ListItemLayout.jsx
@@ -22,12 +22,13 @@ const ListItemLayout = (props) => {
     ...props.rightActions
   ];
   const content = props.itemContent || <ListItemContent caption={props.caption} legend={props.legend} />;
+  const emptyActions = (item) => !item[0] && !item[1];
 
   return (
     <span className={className}>
-      <ListItemActions type='left'>{leftActions}</ListItemActions>
+      {!emptyActions(leftActions) > 0 && <ListItemActions type='left'>{leftActions}</ListItemActions>}
       {content}
-      <ListItemActions type='right'>{rightActions}</ListItemActions>
+      {!emptyActions(leftActions) > 0 && <ListItemActions type='right'>{rightActions}</ListItemActions>}
     </span>
   );
 };
diff --git a/components/list/ListItemText.jsx b/components/list/ListItemText.jsx
index 6e240a574..a8123c549 100644
--- a/components/list/ListItemText.jsx
+++ b/components/list/ListItemText.jsx
@@ -6,7 +6,7 @@ const ListItemText = ({className, primary, children, ...other}) => {
   const _className = ClassNames(style.itemText, {[style.primary]: primary}, className);
 
   return (
-    <span className={_className} {...other}>
+    <span data-react-toolbox="list-item-text" className={_className} {...other}>
       {children}
     </span>
   );
diff --git a/components/list/style.scss b/components/list/style.scss
index 976b72ffd..18ae0ecab 100644
--- a/components/list/style.scss
+++ b/components/list/style.scss
@@ -114,13 +114,9 @@
   flex-grow: 1;
   &.large {
     height: $list-item-min-height-legend;
-
-    .itemContent {
-      display: block;
-      position: relative;
-      top: 50%;
-      transform: translateY(-50%)
-    }
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
   }
 }
 

From 3a206769f347d89efe6f120bebc1985cc6a6a6a1 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 10 Apr 2016 11:39:25 +0200
Subject: [PATCH 0464/1024] Bugfix: style for svg icons in button

---
 components/button/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/button/style.scss b/components/button/style.scss
index 2adb06a6b..8ba2b15e2 100644
--- a/components/button/style.scss
+++ b/components/button/style.scss
@@ -31,7 +31,7 @@
   > svg {
     display: inline-block;
     width: 1em;
-    height: 1em;
+    height: $button-height;
     font-size: 120%;
     vertical-align: middle;
     fill: currentColor;

From 2039a123a360135584aeb6c3152d659aee885cfa Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 10 Apr 2016 11:45:32 +0200
Subject: [PATCH 0465/1024] Lint spec files

---
 package.json             | 2 +-
 spec/components/card.jsx | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a8f25880e..ef469cc88 100644
--- a/package.json
+++ b/package.json
@@ -94,7 +94,7 @@
     "babel": "babel ./components --out-dir ./lib",
     "build": "cross-env NODE_ENV=production npm run babel && npm run sass",
     "clean": "rimraf ./lib",
-    "lint": "eslint ./components --ext .js,.jsx",
+    "lint": "eslint ./ --ext .js,.jsx",
     "patch": "bumped release patch",
     "prebuild": "npm run clean",
     "prepublish": "npm run build",
diff --git a/spec/components/card.jsx b/spec/components/card.jsx
index 194878377..1d8769b17 100644
--- a/spec/components/card.jsx
+++ b/spec/components/card.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 import Button, { IconButton } from '../../components/button';
 import Card, { CardActions, CardMedia, CardText, CardTitle } from '../../components/card';

From beeb6ab40a762a854fed53f33cb1be8bd7ea4f4b Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 10 Apr 2016 12:20:30 +0200
Subject: [PATCH 0466/1024] Use sass lint

---
 .csscomb.json                       | 318 -------------------
 .sass-lint.yml                      | 401 +++++++++++++++++++++++
 .scss-lint.yml                      | 473 ----------------------------
 components/animations/zoom-in.scss  |   2 +-
 components/animations/zoom-out.scss |   2 +-
 components/button/_config.scss      |   6 +-
 components/button/style.scss        |  11 +-
 components/chip/_config.scss        |   2 +-
 components/chip/style.scss          |  22 +-
 components/date_picker/_config.scss |   4 +-
 components/input/style.scss         |   4 +-
 components/list/style.scss          |  19 +-
 components/navigation/style.scss    |   6 +-
 components/slider/style.scss        |   2 +-
 components/tabs/_config.scss        |   2 +-
 components/time_picker/_config.scss |   4 +-
 package.json                        |   5 +-
 17 files changed, 446 insertions(+), 837 deletions(-)
 delete mode 100644 .csscomb.json
 create mode 100644 .sass-lint.yml
 delete mode 100644 .scss-lint.yml

diff --git a/.csscomb.json b/.csscomb.json
deleted file mode 100644
index 219133445..000000000
--- a/.csscomb.json
+++ /dev/null
@@ -1,318 +0,0 @@
-{
-  "always-semicolon": true,
-  "block-indent": 2,
-  "color-case": "lower",
-  "color-shorthand": true,
-  "element-case": "lower",
-  "eof-newline": true,
-  "leading-zero": false,
-  "remove-empty-rulesets": true,
-  "space-after-colon": 1,
-  "space-after-combinator": 1,
-  "space-before-selector-delimiter": 0,
-  "space-between-declarations": "\n",
-  "space-after-opening-brace": "\n",
-  "space-before-closing-brace": "\n",
-  "space-before-colon": 0,
-  "space-before-combinator": 1,
-  "space-before-opening-brace": 1,
-  "strip-spaces": true,
-  "unitless-zero": true,
-  "vendor-prefix-align": false,
-  "sort-order": [
-    [
-      "$variable",
-      "$extend",
-      "$include",
-      "composes",
-      "position",
-      "top",
-      "right",
-      "bottom",
-      "left",
-      "z-index",
-      "-webkit-box-sizing",
-      "-moz-box-sizing",
-      "box-sizing",
-      "display",
-      "float",
-      "width",
-      "min-width",
-      "max-width",
-      "height",
-      "min-height",
-      "max-height",
-      "flex",
-      "flex-align",
-      "flex-direction",
-      "flex-flow",
-      "flex-grow",
-      "flex-order",
-      "flex-pack",
-      "flex-wrap",
-      "align-content",
-      "align-items",
-      "justify-content",
-      "padding",
-      "padding-top",
-      "padding-right",
-      "padding-bottom",
-      "padding-left",
-      "margin",
-      "margin-top",
-      "margin-right",
-      "margin-bottom",
-      "margin-left",
-      "overflow",
-      "overflow-x",
-      "overflow-y",
-      "-webkit-overflow-scrolling",
-      "-ms-overflow-x",
-      "-ms-overflow-y",
-      "-ms-overflow-style",
-      "clip",
-      "clear",
-      "font",
-      "font-family",
-      "font-size",
-      "font-style",
-      "font-weight",
-      "font-variant",
-      "font-size-adjust",
-      "font-stretch",
-      "font-effect",
-      "font-emphasize",
-      "font-emphasize-position",
-      "font-emphasize-style",
-      "font-smooth",
-      "-webkit-hyphens",
-      "-moz-hyphens",
-      "hyphens",
-      "line-height",
-      "color",
-      "text-align",
-      "-webkit-text-align-last",
-      "-moz-text-align-last",
-      "-ms-text-align-last",
-      "text-align-last",
-      "text-emphasis",
-      "text-emphasis-color",
-      "text-emphasis-style",
-      "text-emphasis-position",
-      "text-decoration",
-      "text-indent",
-      "text-justify",
-      "text-outline",
-      "-ms-text-overflow",
-      "text-overflow",
-      "text-overflow-ellipsis",
-      "text-overflow-mode",
-      "text-shadow",
-      "text-transform",
-      "text-wrap",
-      "-webkit-text-size-adjust",
-      "-ms-text-size-adjust",
-      "letter-spacing",
-      "-ms-word-break",
-      "word-break",
-      "word-spacing",
-      "-ms-word-wrap",
-      "word-wrap",
-      "-moz-tab-size",
-      "-o-tab-size",
-      "tab-size",
-      "white-space",
-      "vertical-align",
-      "list-style",
-      "list-style-position",
-      "list-style-type",
-      "list-style-image",
-      "pointer-events",
-      "-ms-touch-action",
-      "touch-action",
-      "cursor",
-      "visibility",
-      "zoom",
-      "table-layout",
-      "empty-cells",
-      "caption-side",
-      "border-spacing",
-      "border-collapse",
-      "content",
-      "quotes",
-      "counter-reset",
-      "counter-increment",
-      "resize",
-      "-webkit-user-select",
-      "-moz-user-select",
-      "-ms-user-select",
-      "-o-user-select",
-      "user-select",
-      "nav-index",
-      "nav-up",
-      "nav-right",
-      "nav-down",
-      "nav-left",
-      "background",
-      "background-color",
-      "background-image",
-      "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
-      "filter:progid:DXImageTransform.Microsoft.gradient",
-      "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
-      "filter",
-      "background-repeat",
-      "background-attachment",
-      "background-position",
-      "background-position-x",
-      "background-position-y",
-      "-webkit-background-clip",
-      "-moz-background-clip",
-      "background-clip",
-      "background-origin",
-      "-webkit-background-size",
-      "-moz-background-size",
-      "-o-background-size",
-      "background-size",
-      "border",
-      "border-color",
-      "border-style",
-      "border-width",
-      "border-top",
-      "border-top-color",
-      "border-top-style",
-      "border-top-width",
-      "border-right",
-      "border-right-color",
-      "border-right-style",
-      "border-right-width",
-      "border-bottom",
-      "border-bottom-color",
-      "border-bottom-style",
-      "border-bottom-width",
-      "border-left",
-      "border-left-color",
-      "border-left-style",
-      "border-left-width",
-      "border-radius",
-      "border-top-left-radius",
-      "border-top-right-radius",
-      "border-bottom-right-radius",
-      "border-bottom-left-radius",
-      "-webkit-border-image",
-      "-moz-border-image",
-      "-o-border-image",
-      "border-image",
-      "-webkit-border-image-source",
-      "-moz-border-image-source",
-      "-o-border-image-source",
-      "border-image-source",
-      "-webkit-border-image-slice",
-      "-moz-border-image-slice",
-      "-o-border-image-slice",
-      "border-image-slice",
-      "-webkit-border-image-width",
-      "-moz-border-image-width",
-      "-o-border-image-width",
-      "border-image-width",
-      "-webkit-border-image-outset",
-      "-moz-border-image-outset",
-      "-o-border-image-outset",
-      "border-image-outset",
-      "-webkit-border-image-repeat",
-      "-moz-border-image-repeat",
-      "-o-border-image-repeat",
-      "border-image-repeat",
-      "outline",
-      "outline-width",
-      "outline-style",
-      "outline-color",
-      "outline-offset",
-      "-webkit-box-shadow",
-      "-moz-box-shadow",
-      "box-shadow",
-      "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
-      "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
-      "opacity",
-      "-ms-interpolation-mode",
-      "-webkit-transition",
-      "-moz-transition",
-      "-ms-transition",
-      "-o-transition",
-      "transition",
-      "-webkit-transition-delay",
-      "-moz-transition-delay",
-      "-ms-transition-delay",
-      "-o-transition-delay",
-      "transition-delay",
-      "-webkit-transition-timing-function",
-      "-moz-transition-timing-function",
-      "-ms-transition-timing-function",
-      "-o-transition-timing-function",
-      "transition-timing-function",
-      "-webkit-transition-duration",
-      "-moz-transition-duration",
-      "-ms-transition-duration",
-      "-o-transition-duration",
-      "transition-duration",
-      "-webkit-transition-property",
-      "-moz-transition-property",
-      "-ms-transition-property",
-      "-o-transition-property",
-      "transition-property",
-      "transform-style",
-      "-webkit-transform",
-      "-moz-transform",
-      "-ms-transform",
-      "-o-transform",
-      "transform",
-      "-webkit-transform-origin",
-      "-moz-transform-origin",
-      "-ms-transform-origin",
-      "-o-transform-origin",
-      "transform-origin",
-      "-webkit-animation",
-      "-moz-animation",
-      "-ms-animation",
-      "-o-animation",
-      "animation",
-      "-webkit-animation-name",
-      "-moz-animation-name",
-      "-ms-animation-name",
-      "-o-animation-name",
-      "animation-name",
-      "-webkit-animation-duration",
-      "-moz-animation-duration",
-      "-ms-animation-duration",
-      "-o-animation-duration",
-      "animation-duration",
-      "-webkit-animation-play-state",
-      "-moz-animation-play-state",
-      "-ms-animation-play-state",
-      "-o-animation-play-state",
-      "animation-play-state",
-      "-webkit-animation-timing-function",
-      "-moz-animation-timing-function",
-      "-ms-animation-timing-function",
-      "-o-animation-timing-function",
-      "animation-timing-function",
-      "-webkit-animation-delay",
-      "-moz-animation-delay",
-      "-ms-animation-delay",
-      "-o-animation-delay",
-      "animation-delay",
-      "-webkit-animation-iteration-count",
-      "-moz-animation-iteration-count",
-      "-ms-animation-iteration-count",
-      "-o-animation-iteration-count",
-      "animation-iteration-count",
-      "-webkit-animation-direction",
-      "-moz-animation-direction",
-      "-ms-animation-direction",
-      "-o-animation-direction",
-      "animation-direction",
-      "backface-visibility",
-      "will-change",
-      "fill"
-    ]
-  ]
-}
diff --git a/.sass-lint.yml b/.sass-lint.yml
new file mode 100644
index 000000000..2d330c768
--- /dev/null
+++ b/.sass-lint.yml
@@ -0,0 +1,401 @@
+options:
+  formatter: stylish
+  merge-default-rules: false
+rules:
+  border-zero: 1
+  brace-style:
+    - 1
+    - allow-single-line: true
+  class-name-format:
+    - 0
+    - convention: hyphenatedlowercase
+  clean-import-paths:
+    - 1
+    - filename-extension: false
+      leading-underscore: false
+  empty-line-between-blocks:
+    - 0
+    - ignore-single-line-rulesets: true
+  extends-before-declarations: 0
+  extends-before-mixins: 0
+  final-newline:
+    - 1
+    - include: true
+  force-attribute-nesting: 0
+  force-element-nesting: 0
+  force-pseudo-nesting: 0
+  function-name-format:
+    - 1
+    - allow-leading-underscore: true
+      convention: hyphenatedlowercase
+  hex-length:
+    - 1
+    - style: short
+  hex-notation:
+    - 1
+    - style: lowercase
+  id-name-format:
+    - 0
+    - convention: hyphenatedlowercase
+  indentation:
+    - 1
+    - size: 2
+  leading-zero:
+    - 0
+    - include: false
+  mixin-name-format:
+    - 1
+    - allow-leading-underscore: true
+      convention: hyphenatedlowercase
+  mixins-before-declarations: 0
+  nesting-depth: 0
+  no-color-keyword: 1
+  no-color-literals: 0
+  no-css-comments: 1
+  no-debug: 1
+  no-duplicate-properties:
+    - 1
+    - exclude: []
+  no-empty-rulesets: 1
+  no-ids: 1
+  no-important: 0
+  no-invalid-hex: 1
+  no-mergeable-selectors: 0
+  no-misspelled-properties:
+    - 1
+    - extra-properties:
+        - composes
+  no-qualifying-elements:
+    - 0
+    - allow-element-with-attribute: false
+      allow-element-with-class: false
+      allow-element-with-id: false
+  no-trailing-zero: 1
+  no-url-protocols: 1
+  placeholder-in-extend: 0
+  placeholder-name-format:
+    - 0
+    - convention: hyphenatedlowercase
+  property-sort-order:
+    - 1
+    - ignore-custom-properties: false
+      order:
+        - $variable
+        - $extend
+        - $include
+        - composes
+        - position
+        - top
+        - right
+        - bottom
+        - left
+        - z-index
+        - '-webkit-box-sizing'
+        - '-moz-box-sizing'
+        - box-sizing
+        - display
+        - float
+        - width
+        - min-width
+        - max-width
+        - height
+        - min-height
+        - max-height
+        - flex
+        - flex-align
+        - flex-direction
+        - flex-flow
+        - flex-grow
+        - flex-order
+        - flex-pack
+        - flex-wrap
+        - align-content
+        - align-items
+        - justify-content
+        - padding
+        - padding-top
+        - padding-right
+        - padding-bottom
+        - padding-left
+        - margin
+        - margin-top
+        - margin-right
+        - margin-bottom
+        - margin-left
+        - overflow
+        - overflow-x
+        - overflow-y
+        - '-webkit-overflow-scrolling'
+        - '-ms-overflow-x'
+        - '-ms-overflow-y'
+        - '-ms-overflow-style'
+        - clip
+        - clear
+        - font
+        - font-family
+        - font-size
+        - font-style
+        - font-weight
+        - font-variant
+        - font-size-adjust
+        - font-stretch
+        - font-effect
+        - font-emphasize
+        - font-emphasize-position
+        - font-emphasize-style
+        - font-smooth
+        - '-webkit-hyphens'
+        - '-moz-hyphens'
+        - hyphens
+        - line-height
+        - color
+        - text-align
+        - '-webkit-text-align-last'
+        - '-moz-text-align-last'
+        - '-ms-text-align-last'
+        - text-align-last
+        - text-emphasis
+        - text-emphasis-color
+        - text-emphasis-style
+        - text-emphasis-position
+        - text-decoration
+        - text-indent
+        - text-justify
+        - text-outline
+        - '-ms-text-overflow'
+        - text-overflow
+        - text-overflow-ellipsis
+        - text-overflow-mode
+        - text-shadow
+        - text-transform
+        - text-wrap
+        - '-webkit-text-size-adjust'
+        - '-ms-text-size-adjust'
+        - letter-spacing
+        - '-ms-word-break'
+        - word-break
+        - word-spacing
+        - '-ms-word-wrap'
+        - word-wrap
+        - '-moz-tab-size'
+        - '-o-tab-size'
+        - tab-size
+        - white-space
+        - vertical-align
+        - list-style
+        - list-style-position
+        - list-style-type
+        - list-style-image
+        - pointer-events
+        - '-ms-touch-action'
+        - touch-action
+        - cursor
+        - visibility
+        - zoom
+        - table-layout
+        - empty-cells
+        - caption-side
+        - border-spacing
+        - border-collapse
+        - content
+        - quotes
+        - counter-reset
+        - counter-increment
+        - resize
+        - '-webkit-user-select'
+        - '-moz-user-select'
+        - '-ms-user-select'
+        - '-o-user-select'
+        - user-select
+        - nav-index
+        - nav-up
+        - nav-right
+        - nav-down
+        - nav-left
+        - background
+        - background-color
+        - background-image
+        - "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient"
+        - 'filter:progid:DXImageTransform.Microsoft.gradient'
+        - 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader'
+        - filter
+        - background-repeat
+        - background-attachment
+        - background-position
+        - background-position-x
+        - background-position-y
+        - '-webkit-background-clip'
+        - '-moz-background-clip'
+        - background-clip
+        - background-origin
+        - '-webkit-background-size'
+        - '-moz-background-size'
+        - '-o-background-size'
+        - background-size
+        - border
+        - border-color
+        - border-style
+        - border-width
+        - border-top
+        - border-top-color
+        - border-top-style
+        - border-top-width
+        - border-right
+        - border-right-color
+        - border-right-style
+        - border-right-width
+        - border-bottom
+        - border-bottom-color
+        - border-bottom-style
+        - border-bottom-width
+        - border-left
+        - border-left-color
+        - border-left-style
+        - border-left-width
+        - border-radius
+        - border-top-left-radius
+        - border-top-right-radius
+        - border-bottom-right-radius
+        - border-bottom-left-radius
+        - '-webkit-border-image'
+        - '-moz-border-image'
+        - '-o-border-image'
+        - border-image
+        - '-webkit-border-image-source'
+        - '-moz-border-image-source'
+        - '-o-border-image-source'
+        - border-image-source
+        - '-webkit-border-image-slice'
+        - '-moz-border-image-slice'
+        - '-o-border-image-slice'
+        - border-image-slice
+        - '-webkit-border-image-width'
+        - '-moz-border-image-width'
+        - '-o-border-image-width'
+        - border-image-width
+        - '-webkit-border-image-outset'
+        - '-moz-border-image-outset'
+        - '-o-border-image-outset'
+        - border-image-outset
+        - '-webkit-border-image-repeat'
+        - '-moz-border-image-repeat'
+        - '-o-border-image-repeat'
+        - border-image-repeat
+        - outline
+        - outline-width
+        - outline-style
+        - outline-color
+        - outline-offset
+        - '-webkit-box-shadow'
+        - '-moz-box-shadow'
+        - box-shadow
+        - 'filter:progid:DXImageTransform.Microsoft.Alpha(Opacity'
+        - "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha"
+        - opacity
+        - '-ms-interpolation-mode'
+        - '-webkit-transition'
+        - '-moz-transition'
+        - '-ms-transition'
+        - '-o-transition'
+        - transition
+        - '-webkit-transition-delay'
+        - '-moz-transition-delay'
+        - '-ms-transition-delay'
+        - '-o-transition-delay'
+        - transition-delay
+        - '-webkit-transition-timing-function'
+        - '-moz-transition-timing-function'
+        - '-ms-transition-timing-function'
+        - '-o-transition-timing-function'
+        - transition-timing-function
+        - '-webkit-transition-duration'
+        - '-moz-transition-duration'
+        - '-ms-transition-duration'
+        - '-o-transition-duration'
+        - transition-duration
+        - '-webkit-transition-property'
+        - '-moz-transition-property'
+        - '-ms-transition-property'
+        - '-o-transition-property'
+        - transition-property
+        - transform-style
+        - '-webkit-transform'
+        - '-moz-transform'
+        - '-ms-transform'
+        - '-o-transform'
+        - transform
+        - '-webkit-transform-origin'
+        - '-moz-transform-origin'
+        - '-ms-transform-origin'
+        - '-o-transform-origin'
+        - transform-origin
+        - '-webkit-animation'
+        - '-moz-animation'
+        - '-ms-animation'
+        - '-o-animation'
+        - animation
+        - '-webkit-animation-name'
+        - '-moz-animation-name'
+        - '-ms-animation-name'
+        - '-o-animation-name'
+        - animation-name
+        - '-webkit-animation-duration'
+        - '-moz-animation-duration'
+        - '-ms-animation-duration'
+        - '-o-animation-duration'
+        - animation-duration
+        - '-webkit-animation-play-state'
+        - '-moz-animation-play-state'
+        - '-ms-animation-play-state'
+        - '-o-animation-play-state'
+        - animation-play-state
+        - '-webkit-animation-timing-function'
+        - '-moz-animation-timing-function'
+        - '-ms-animation-timing-function'
+        - '-o-animation-timing-function'
+        - animation-timing-function
+        - '-webkit-animation-delay'
+        - '-moz-animation-delay'
+        - '-ms-animation-delay'
+        - '-o-animation-delay'
+        - animation-delay
+        - '-webkit-animation-iteration-count'
+        - '-moz-animation-iteration-count'
+        - '-ms-animation-iteration-count'
+        - '-o-animation-iteration-count'
+        - animation-iteration-count
+        - '-webkit-animation-direction'
+        - '-moz-animation-direction'
+        - '-ms-animation-direction'
+        - '-o-animation-direction'
+        - animation-direction
+        - backface-visibility
+        - will-change
+        - fill
+  quotes:
+    - 1
+    - style: double
+  shorthand-values: 1
+  single-line-per-selector: 0
+  space-after-bang:
+    - 1
+    - include: false
+  space-after-colon: 1
+  space-after-comma: 0
+  space-before-bang:
+    - 1
+    - include: true
+  space-before-brace:
+    - 1
+    - include: true
+  space-before-colon: 1
+  space-between-parens:
+    - 1
+    - include: false
+  trailing-semicolon: 1
+  url-quotes: 1
+  variable-name-format:
+    - 1
+    - allow-leading-underscore: true
+      convention: hyphenatedlowercase
+  zero-unit: 1
diff --git a/.scss-lint.yml b/.scss-lint.yml
deleted file mode 100644
index aabb6e9e2..000000000
--- a/.scss-lint.yml
+++ /dev/null
@@ -1,473 +0,0 @@
-scss_files: "./components/**/*.scss"
-
-exclude: "./node_modules"
-
-linters:
-  BangFormat:
-    enabled: true
-    space_before_bang: true
-    space_after_bang: false
-
-  BorderZero:
-    enabled: true
-
-  ColorKeyword:
-    enabled: true
-
-  ColorVariable:
-    enabled: false
-
-  Comment:
-    enabled: true
-    exclude: []
-
-  DebugStatement:
-    enabled: true
-
-  DeclarationOrder:
-    enabled: false
-
-  DuplicateProperty:
-    enabled: true
-    exclude: []
-
-  ElsePlacement:
-    enabled: true
-    style: same_line # or 'new_line'
-
-  EmptyLineBetweenBlocks:
-    enabled: false
-    ignore_single_line_blocks: true
-
-  EmptyRule:
-    enabled: true
-
-  FinalNewline:
-    enabled: true
-    present: true
-
-  HexLength:
-    enabled: true
-    style: short # or 'long'
-
-  HexNotation:
-    enabled: true
-    style: lowercase # or 'uppercase'
-
-  HexValidation:
-    enabled: true
-
-  IdSelector:
-    enabled: true
-
-  ImportantRule:
-    enabled: false
-
-  ImportPath:
-    enabled: true
-    leading_underscore: false
-    filename_extension: false
-
-  Indentation:
-    enabled: true
-    character: space # or 'tab'
-    width: 2
-
-  LeadingZero:
-    enabled: false
-    style: exclude_zero # or 'include_zero'
-
-  MergeableSelector:
-    enabled: false
-    force_nesting: true
-
-  NameFormat:
-    enabled: true
-    allow_leading_underscore: true
-    convention: hyphenated_lowercase # or 'BEM', or a regex pattern
-
-  NestingDepth:
-    enabled: false
-
-  PlaceholderInExtend:
-    enabled: false
-
-  PropertySortOrder:
-    enabled: true
-    ignore_unspecified: false
-    severity: warning
-    exclude: []
-    order: [
-      "$variable",
-      "$extend",
-      "$include",
-      "composes",
-      "position",
-      "top",
-      "right",
-      "bottom",
-      "left",
-      "z-index",
-      "-webkit-box-sizing",
-      "-moz-box-sizing",
-      "box-sizing",
-      "display",
-      "float",
-      "width",
-      "min-width",
-      "max-width",
-      "height",
-      "min-height",
-      "max-height",
-      "flex",
-      "flex-align",
-      "flex-direction",
-      "flex-flow",
-      "flex-grow",
-      "flex-order",
-      "flex-pack",
-      "flex-wrap",
-      "align-content",
-      "align-items",
-      "justify-content",
-      "padding",
-      "padding-top",
-      "padding-right",
-      "padding-bottom",
-      "padding-left",
-      "margin",
-      "margin-top",
-      "margin-right",
-      "margin-bottom",
-      "margin-left",
-      "overflow",
-      "overflow-x",
-      "overflow-y",
-      "-webkit-overflow-scrolling",
-      "-ms-overflow-x",
-      "-ms-overflow-y",
-      "-ms-overflow-style",
-      "clip",
-      "clear",
-      "font",
-      "font-family",
-      "font-size",
-      "font-style",
-      "font-weight",
-      "font-variant",
-      "font-size-adjust",
-      "font-stretch",
-      "font-effect",
-      "font-emphasize",
-      "font-emphasize-position",
-      "font-emphasize-style",
-      "font-smooth",
-      "-webkit-hyphens",
-      "-moz-hyphens",
-      "hyphens",
-      "line-height",
-      "color",
-      "text-align",
-      "-webkit-text-align-last",
-      "-moz-text-align-last",
-      "-ms-text-align-last",
-      "text-align-last",
-      "text-emphasis",
-      "text-emphasis-color",
-      "text-emphasis-style",
-      "text-emphasis-position",
-      "text-decoration",
-      "text-indent",
-      "text-justify",
-      "text-outline",
-      "-ms-text-overflow",
-      "text-overflow",
-      "text-overflow-ellipsis",
-      "text-overflow-mode",
-      "text-shadow",
-      "text-transform",
-      "text-wrap",
-      "-webkit-text-size-adjust",
-      "-ms-text-size-adjust",
-      "letter-spacing",
-      "-ms-word-break",
-      "word-break",
-      "word-spacing",
-      "-ms-word-wrap",
-      "word-wrap",
-      "-moz-tab-size",
-      "-o-tab-size",
-      "tab-size",
-      "white-space",
-      "vertical-align",
-      "list-style",
-      "list-style-position",
-      "list-style-type",
-      "list-style-image",
-      "pointer-events",
-      "-ms-touch-action",
-      "touch-action",
-      "cursor",
-      "visibility",
-      "zoom",
-      "table-layout",
-      "empty-cells",
-      "caption-side",
-      "border-spacing",
-      "border-collapse",
-      "content",
-      "quotes",
-      "counter-reset",
-      "counter-increment",
-      "resize",
-      "-webkit-user-select",
-      "-moz-user-select",
-      "-ms-user-select",
-      "-o-user-select",
-      "user-select",
-      "nav-index",
-      "nav-up",
-      "nav-right",
-      "nav-down",
-      "nav-left",
-      "background",
-      "background-color",
-      "background-image",
-      "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
-      "filter:progid:DXImageTransform.Microsoft.gradient",
-      "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
-      "filter",
-      "background-repeat",
-      "background-attachment",
-      "background-position",
-      "background-position-x",
-      "background-position-y",
-      "-webkit-background-clip",
-      "-moz-background-clip",
-      "background-clip",
-      "background-origin",
-      "-webkit-background-size",
-      "-moz-background-size",
-      "-o-background-size",
-      "background-size",
-      "border",
-      "border-color",
-      "border-style",
-      "border-width",
-      "border-top",
-      "border-top-color",
-      "border-top-style",
-      "border-top-width",
-      "border-right",
-      "border-right-color",
-      "border-right-style",
-      "border-right-width",
-      "border-bottom",
-      "border-bottom-color",
-      "border-bottom-style",
-      "border-bottom-width",
-      "border-left",
-      "border-left-color",
-      "border-left-style",
-      "border-left-width",
-      "border-radius",
-      "border-top-left-radius",
-      "border-top-right-radius",
-      "border-bottom-right-radius",
-      "border-bottom-left-radius",
-      "-webkit-border-image",
-      "-moz-border-image",
-      "-o-border-image",
-      "border-image",
-      "-webkit-border-image-source",
-      "-moz-border-image-source",
-      "-o-border-image-source",
-      "border-image-source",
-      "-webkit-border-image-slice",
-      "-moz-border-image-slice",
-      "-o-border-image-slice",
-      "border-image-slice",
-      "-webkit-border-image-width",
-      "-moz-border-image-width",
-      "-o-border-image-width",
-      "border-image-width",
-      "-webkit-border-image-outset",
-      "-moz-border-image-outset",
-      "-o-border-image-outset",
-      "border-image-outset",
-      "-webkit-border-image-repeat",
-      "-moz-border-image-repeat",
-      "-o-border-image-repeat",
-      "border-image-repeat",
-      "outline",
-      "outline-width",
-      "outline-style",
-      "outline-color",
-      "outline-offset",
-      "-webkit-box-shadow",
-      "-moz-box-shadow",
-      "box-shadow",
-      "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
-      "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
-      "opacity",
-      "-ms-interpolation-mode",
-      "-webkit-transition",
-      "-moz-transition",
-      "-ms-transition",
-      "-o-transition",
-      "transition",
-      "-webkit-transition-delay",
-      "-moz-transition-delay",
-      "-ms-transition-delay",
-      "-o-transition-delay",
-      "transition-delay",
-      "-webkit-transition-timing-function",
-      "-moz-transition-timing-function",
-      "-ms-transition-timing-function",
-      "-o-transition-timing-function",
-      "transition-timing-function",
-      "-webkit-transition-duration",
-      "-moz-transition-duration",
-      "-ms-transition-duration",
-      "-o-transition-duration",
-      "transition-duration",
-      "-webkit-transition-property",
-      "-moz-transition-property",
-      "-ms-transition-property",
-      "-o-transition-property",
-      "transition-property",
-      "transform-style",
-      "-webkit-transform",
-      "-moz-transform",
-      "-ms-transform",
-      "-o-transform",
-      "transform",
-      "-webkit-transform-origin",
-      "-moz-transform-origin",
-      "-ms-transform-origin",
-      "-o-transform-origin",
-      "transform-origin",
-      "-webkit-animation",
-      "-moz-animation",
-      "-ms-animation",
-      "-o-animation",
-      "animation",
-      "-webkit-animation-name",
-      "-moz-animation-name",
-      "-ms-animation-name",
-      "-o-animation-name",
-      "animation-name",
-      "-webkit-animation-duration",
-      "-moz-animation-duration",
-      "-ms-animation-duration",
-      "-o-animation-duration",
-      "animation-duration",
-      "-webkit-animation-play-state",
-      "-moz-animation-play-state",
-      "-ms-animation-play-state",
-      "-o-animation-play-state",
-      "animation-play-state",
-      "-webkit-animation-timing-function",
-      "-moz-animation-timing-function",
-      "-ms-animation-timing-function",
-      "-o-animation-timing-function",
-      "animation-timing-function",
-      "-webkit-animation-delay",
-      "-moz-animation-delay",
-      "-ms-animation-delay",
-      "-o-animation-delay",
-      "animation-delay",
-      "-webkit-animation-iteration-count",
-      "-moz-animation-iteration-count",
-      "-ms-animation-iteration-count",
-      "-o-animation-iteration-count",
-      "animation-iteration-count",
-      "-webkit-animation-direction",
-      "-moz-animation-direction",
-      "-ms-animation-direction",
-      "-o-animation-direction",
-      "animation-direction",
-      "backface-visibility",
-      "will-change",
-      "fill"
-    ]
-
-  PropertySpelling:
-    enabled: true
-    extra_properties: [composes]
-
-  QualifyingElement:
-    enabled: false
-    allow_element_with_attribute: false
-    allow_element_with_class: false
-    allow_element_with_id: false
-
-  SelectorDepth:
-    enabled: false
-
-  SelectorFormat:
-    enabled: false
-    convention: hyphenated_lowercase # or 'BEM', or 'snake_case', or 'camel_case', or a regex pattern
-
-  Shorthand:
-    enabled: true
-
-  SingleLinePerProperty:
-    enabled: true
-    allow_single_line_rule_sets: true
-
-  SingleLinePerSelector:
-    enabled: false
-
-  SpaceAfterComma:
-    enabled: false
-
-  SpaceAfterPropertyColon:
-    enabled: true
-    style: at_least_one_space # or 'no_space', or 'at_least_one_space', or 'aligned'
-
-  SpaceAfterPropertyName:
-    enabled: true
-
-  SpaceBeforeBrace:
-    enabled: true
-    style: space
-    allow_single_line_padding: true
-
-  SpaceBetweenParens:
-    enabled: true
-    spaces: 0
-
-  StringQuotes:
-    enabled: true
-    style: double_quotes
-
-  TrailingSemicolon:
-    enabled: true
-
-  TrailingZero:
-    enabled: false
-
-  UnnecessaryMantissa:
-    enabled: true
-
-  UnnecessaryParentReference:
-    enabled: true
-
-  UrlFormat:
-    enabled: true
-
-  UrlQuotes:
-    enabled: true
-
-  VendorPrefixes:
-    enabled: true
-    identifier_list: base
-    include: []
-    exclude: []
-
-  ZeroUnit:
-    enabled: true
-
-  Compass::*:
-    enabled: false
diff --git a/components/animations/zoom-in.scss b/components/animations/zoom-in.scss
index 5303756a5..40087e850 100644
--- a/components/animations/zoom-in.scss
+++ b/components/animations/zoom-in.scss
@@ -5,9 +5,9 @@
 }
 
 .enterActive, .leaveActive {
+  transition: transform, opacity;
   transition-timing-function: $animation-curve-fast-out-slow-in;
   transition-duration: 500ms;
-  transition: transform, opacity;
 }
 
 .enter {
diff --git a/components/animations/zoom-out.scss b/components/animations/zoom-out.scss
index 9a09cf273..759e088c0 100644
--- a/components/animations/zoom-out.scss
+++ b/components/animations/zoom-out.scss
@@ -5,9 +5,9 @@
 }
 
 .enterActive, .leaveActive {
+  transition: transform, opacity;
   transition-timing-function: $animation-curve-fast-out-slow-in;
   transition-duration: 500ms;
-  transition: transform, opacity;
 }
 
 .enter {
diff --git a/components/button/_config.scss b/components/button/_config.scss
index 8dc4f510a..4a37d8b0c 100644
--- a/components/button/_config.scss
+++ b/components/button/_config.scss
@@ -1,11 +1,11 @@
 $button-neutral-color: $color-white !default;
 $button-neutral-color-contrast: $palette-grey-900 !default;
-$button-neutral-color-hover: rgba($palette-grey-900, 0.20) !default;
+$button-neutral-color-hover: rgba($palette-grey-900, .2) !default;
 $button-primary-color-contrast: $color-primary-contrast !default;
-$button-primary-color-hover: rgba($color-primary, 0.20) !default;
+$button-primary-color-hover: rgba($color-primary, .2) !default;
 $button-primary-color: $color-primary !default;
 $button-accent-color-contrast: $color-primary-contrast !default;
-$button-accent-color-hover: rgba($color-accent, 0.20) !default;
+$button-accent-color-hover: rgba($color-accent, .2) !default;
 $button-accent-color: $color-accent !default;
 $button-disabled-text-color: rgba($color-black, 0.26) !default;
 $button-disabled-background-color: rgba($color-black, 0.12) !default;
diff --git a/components/button/style.scss b/components/button/style.scss
index 8ba2b15e2..0fd3ec151 100644
--- a/components/button/style.scss
+++ b/components/button/style.scss
@@ -17,9 +17,7 @@
   cursor: pointer;
   border: 0;
   outline: none;
-  transition: box-shadow .2s $animation-curve-fast-out-linear-in,
-              background-color .2s $animation-curve-default,
-              color .2s $animation-curve-default;
+  transition: box-shadow .2s $animation-curve-fast-out-linear-in, background-color .2s $animation-curve-default, color .2s $animation-curve-default;
   &::-moz-focus-inner {
     border: 0;
   }
@@ -96,8 +94,7 @@
   height: $button-floating-height;
   font-size: $button-floating-font-size;
   border-radius: 50%;
-  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12),
-              0 1px 1px 0 rgba(0, 0, 0, .24);
+  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);
   .icon {
     line-height: $button-floating-height;
   }
@@ -161,5 +158,5 @@
   }
 }
 
-@include btn-colors('primary', $button-primary-color-contrast, $button-primary-color, $button-primary-color-hover);
-@include btn-colors('accent', $button-accent-color-contrast, $button-accent-color, $button-accent-color-hover);
+@include btn-colors("primary", $button-primary-color-contrast, $button-primary-color, $button-primary-color-hover);
+@include btn-colors("accent", $button-accent-color-contrast, $button-accent-color, $button-accent-color-hover);
diff --git a/components/chip/_config.scss b/components/chip/_config.scss
index f8880621f..a335b2f66 100644
--- a/components/chip/_config.scss
+++ b/components/chip/_config.scss
@@ -3,7 +3,7 @@ $chip-padding: 1.2 * $unit !default;
 $chip-margin-right: 0.25 * $unit !default;
 $chip-background: $palette-grey-200 !default;
 
-$chip-icon-font-size: 2.0 * $unit !default;
+$chip-icon-font-size: 2 * $unit !default;
 $chip-icon-margin-right: 0.8 * $unit !default;
 
 $chip-color: $color-text-secondary !default;
diff --git a/components/chip/style.scss b/components/chip/style.scss
index 768bb12e9..d7d9d7ff5 100644
--- a/components/chip/style.scss
+++ b/components/chip/style.scss
@@ -3,24 +3,24 @@
 @import "http://github.com/config";
 
 .chip {
-  background-color: $chip-background;
-  border-radius: $chip-height;
-  color: $chip-color;
   display: inline-block;
+  padding: 0 $chip-padding;
+  margin-right: $chip-margin-right;
   font-size: $chip-font-size;
   line-height: $chip-height;
-  margin-right: $chip-margin-right;
-  padding: 0 $chip-padding;
+  color: $chip-color;
+  background-color: $chip-background;
+  border-radius: $chip-height;
 }
 
 .avatar {
   padding-left: 0;
 
   > [data-react-toolbox="avatar"] {
+    width: $chip-height;
     height: $chip-height;
     margin-right: $chip-icon-margin-right;
     vertical-align: middle;
-    width: $chip-height;
 
     > span {
       font-size: $chip-icon-font-size;
@@ -34,14 +34,14 @@
 }
 
 .delete {
-  cursor: pointer;
+  position: absolute;
   display: inline-block;
+  width: $chip-remove-size;
   height: $chip-remove-size;
-  margin: $chip-remove-margin;
   padding: $chip-remove-margin;
-  position: absolute;
+  margin: $chip-remove-margin;
   vertical-align: middle;
-  width: $chip-remove-size;
+  cursor: pointer;
 }
 
 .delete:hover .deleteIcon {
@@ -49,9 +49,9 @@
 }
 
 .deleteIcon {
+  vertical-align: top;
   background: $chip-remove-background;
   border-radius: $chip-remove-size;
-  vertical-align: top;
 
   .deleteX {
     fill: transparent;
diff --git a/components/date_picker/_config.scss b/components/date_picker/_config.scss
index 50242fffe..c7925211a 100644
--- a/components/date_picker/_config.scss
+++ b/components/date_picker/_config.scss
@@ -2,7 +2,7 @@ $datepicker-primary: $color-primary !default;
 $datepicker-primary-contrast: $color-primary-contrast !default;
 $datepicker-primary-dark: $color-primary-dark !default;
 $datepicker-primary-color: $datepicker-primary !default;
-$datepicker-primary-hover-color: rgba($datepicker-primary, 0.20) !default;
+$datepicker-primary-hover-color: rgba($datepicker-primary, .2) !default;
 $datepicker-primary-contrast-color: $datepicker-primary-contrast !default;
 $datepicker-primary-dark-color: $datepicker-primary-dark !default;
 $datepicker-dialog-width: 33 * $unit !default;
@@ -18,7 +18,7 @@ $calendar-primary: $color-primary !default;
 $calendar-primary-contrast: $color-primary-contrast !default;
 $calendar-primary-color: $calendar-primary !default;
 $calendar-primary-contrast-color: $calendar-primary-contrast !default;
-$calendar-primary-hover-color: rgba($calendar-primary, 0.21) !default;
+$calendar-primary-hover-color: rgba($calendar-primary, .21) !default;
 $calendar-arrows-color: $palette-grey-600 !default;
 $calendar-arrows-font-size: 2 * $unit !default;
 $calendar-year-font-size: 2.4 !default;
diff --git a/components/input/style.scss b/components/input/style.scss
index 55dd55a8f..0e5f9b641 100644
--- a/components/input/style.scss
+++ b/components/input/style.scss
@@ -50,7 +50,7 @@
       color: $input-text-highlight-color;
     }
   }
-  &:focus, &.filled, &[type='date'], &[type='time'] {
+  &:focus, &.filled, &[type="date"], &[type="time"] {
     ~ .label:not(.fixed) {
       top: $input-focus-label-top;
       font-size: $input-label-font-size;
@@ -73,7 +73,7 @@
   transition-duration: $animation-duration;
   transition-property: top, font-size, color;
   &.fixed ~ .hint {
-    display: none
+    display: none;
   }
 }
 
diff --git a/components/list/style.scss b/components/list/style.scss
index 18ae0ecab..d1b6e8d64 100644
--- a/components/list/style.scss
+++ b/components/list/style.scss
@@ -40,7 +40,7 @@
 
 .listItem {
   position: relative;
-  > [data-react-toolbox='ripple'] {
+  > [data-react-toolbox="ripple"] {
     overflow: hidden;
   }
 }
@@ -61,18 +61,18 @@
     &:not(.checkboxItem) {
       opacity: .5;
     }
-    > .checkbox > [data-react-toolbox='label'] {
+    > .checkbox > [data-react-toolbox="label"] {
       opacity: .5;
     }
   }
 }
 
 .left {
-  [data-react-toolbox='font-icon'] {
+  [data-react-toolbox="font-icon"] {
     width: $list-item-icon-size;
   }
   & :last-child {
-    > [data-react-toolbox='font-icon'] {
+    > [data-react-toolbox="font-icon"] {
       margin-right: $list-item-right-icon-margin;
     }
   }
@@ -103,7 +103,7 @@
     padding: 0;
   }
 
-  > [data-react-toolbox='font-icon'] {
+  > [data-react-toolbox="font-icon"] {
     font-size: $list-item-icon-font-size;
     color: $color-text-secondary;
   }
@@ -113,14 +113,13 @@
   display: block;
   flex-grow: 1;
   &.large {
-    height: $list-item-min-height-legend;
     display: flex;
+    height: $list-item-min-height-legend;
     flex-direction: column;
     justify-content: center;
   }
 }
 
-
 .checkbox {
   display: flex;
   width: 100%;
@@ -129,10 +128,10 @@
   align-items: center;
   margin: 0;
   cursor: pointer;
-  > [data-react-toolbox='check'] {
+  > [data-react-toolbox="check"] {
     margin-right: $list-item-right-checkbox-margin;
   }
-  > [data-react-toolbox='label'] {
+  > [data-react-toolbox="label"] {
     padding-left: 0;
   }
 }
@@ -145,9 +144,9 @@
   display: block;
 
   &:not(.primary) {
+    padding-top: $list-item-legend-margin-top;
     font-size: $font-size-small;
     color: $color-text-secondary;
-    padding-top: $list-item-legend-margin-top;
     white-space: normal;
   }
 
diff --git a/components/navigation/style.scss b/components/navigation/style.scss
index 1d8bf2e13..b8066c0c9 100644
--- a/components/navigation/style.scss
+++ b/components/navigation/style.scss
@@ -2,14 +2,14 @@
 @import "http://github.com/config";
 
 .horizontal {
-  > [data-react-toolbox='button'], > [data-react-toolbox='link'] {
+  > [data-react-toolbox="button"], > [data-react-toolbox="link"] {
     display: inline-block;
     margin: 0 $navigation-space / 2;
   }
 }
 
 .vertical {
-  > [data-react-toolbox='button'], > [data-react-toolbox='link'] {
+  > [data-react-toolbox="button"], > [data-react-toolbox="link"] {
     display: block;
     margin: $navigation-space / 2;
   }
@@ -18,7 +18,7 @@
 .vertical, .horizontal {
   padding: $navigation-space / 2;
 
-  > [data-react-toolbox='link'] {
+  > [data-react-toolbox="link"] {
     color: $navigation-color;
   }
 }
diff --git a/components/slider/style.scss b/components/slider/style.scss
index 4b0276316..53b824712 100644
--- a/components/slider/style.scss
+++ b/components/slider/style.scss
@@ -4,8 +4,8 @@
 .container {
   position: relative;
   width: calc(100% - #{$slider-knob-size});
-  height: $slider-knob-size;
   margin-right: $slider-knob-size;
+  height: $slider-knob-size;
   user-select: none;
   &:not(:last-child) {
     margin-right: $slider-side-separation + $slider-knob-size;
diff --git a/components/tabs/_config.scss b/components/tabs/_config.scss
index 09ad76cb4..f67e55875 100644
--- a/components/tabs/_config.scss
+++ b/components/tabs/_config.scss
@@ -8,4 +8,4 @@ $tab-pointer-color: $color-primary !default;
 $tab-pointer-height: .2 * $unit !default;
 $tab-text: $color-black !default;
 $tab-text-color: $tab-text !default;
-$tab-text-inactive-color: rgba($tab-text, 0.70) !default;
+$tab-text-inactive-color: rgba($tab-text, .7) !default;
diff --git a/components/time_picker/_config.scss b/components/time_picker/_config.scss
index b0fffb858..51fbd509b 100644
--- a/components/time_picker/_config.scss
+++ b/components/time_picker/_config.scss
@@ -5,7 +5,7 @@ $timepicker-primary: $color-primary !default;
 $timepicker-primary-contrast: $color-primary-contrast !default;
 $timepicker-primary-dark: $color-primary-dark !default;
 $timepicker-primary-color: $timepicker-primary !default;
-$timepicker-primary-hover-color: rgba($timepicker-primary, 0.20) !default;
+$timepicker-primary-hover-color: rgba($timepicker-primary, .2) !default;
 $timepicker-primary-contrast-color: $timepicker-primary-contrast !default;
 $timepicker-primary-dark-color: $timepicker-primary-dark !default;
 $timepicker-ampm-height: 2.2 * $unit !default;
@@ -17,7 +17,7 @@ $clock-primary: $color-primary !default;
 $clock-primary-contrast: $color-primary-contrast !default;
 $clock-primary-dark: $color-primary-dark !default;
 $clock-primary-color: $clock-primary !default;
-$clock-primary-hover-color: rgba($clock-primary, 0.20) !default;
+$clock-primary-hover-color: rgba($clock-primary, .2) !default;
 $clock-primary-contrast-color: $clock-primary-contrast !default;
 $clock-primary-dark-color: $clock-primary-dark !default;
 $clock-number-size: 2 * $unit !default;
diff --git a/package.json b/package.json
index ef469cc88..c10407383 100644
--- a/package.json
+++ b/package.json
@@ -82,6 +82,7 @@
     "react-transform-hmr": "^1.0.4",
     "redbox-react": "^1.2.3",
     "rimraf": "^2.5.0",
+    "sass-lint": "^1.5.1",
     "sass-loader": "^3.2.0",
     "sinon": "git://github.com/sinonjs/sinon.git#b672042043517b9f84e14ed0fb8265126168778a",
     "style-loader": "^0.13.1",
@@ -94,7 +95,9 @@
     "babel": "babel ./components --out-dir ./lib",
     "build": "cross-env NODE_ENV=production npm run babel && npm run sass",
     "clean": "rimraf ./lib",
-    "lint": "eslint ./ --ext .js,.jsx",
+    "lint": "npm run lint:js && npm run lint:scss",
+    "lint:js": "eslint ./ --ext .js,.jsx",
+    "lint:scss": "sass-lint ./components/**/*.scss -v -i ./components/slider/style.scss",
     "patch": "bumped release patch",
     "prebuild": "npm run clean",
     "prepublish": "npm run build",

From 958cbb9539cb622e434095a8c01d9ea1c0d67de7 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 10 Apr 2016 17:43:46 +0200
Subject: [PATCH 0467/1024] Refactor Overlay into two components and make
 activable components render only when needed

---
 components/dialog/Dialog.jsx        |  13 ++--
 components/drawer/Drawer.jsx        |   3 +-
 components/hoc/ActivableRenderer.js |  51 +++++++++++++
 components/hoc/Portal.js            | 108 ++++++++++++++++++++++++++++
 components/overlay/Overlay.jsx      |  30 +++-----
 components/snackbar/Snackbar.jsx    |  20 ++----
 6 files changed, 182 insertions(+), 43 deletions(-)
 create mode 100644 components/hoc/ActivableRenderer.js
 create mode 100644 components/hoc/Portal.js

diff --git a/components/dialog/Dialog.jsx b/components/dialog/Dialog.jsx
index eae2aa200..3e56d9d1d 100644
--- a/components/dialog/Dialog.jsx
+++ b/components/dialog/Dialog.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import ClassNames from 'classnames';
+import ActivableRenderer from '../hoc/ActivableRenderer';
 import Button from '../button';
 import Overlay from '../overlay';
 import style from './style';
@@ -28,11 +29,11 @@ const Dialog = (props) => {
           {props.title ? <h6 className={style.title}>{props.title}</h6> : null}
           {props.children}
         </section>
-        {actions ?
-          <nav role='navigation' className={style.navigation}>
-            {actions}
-          </nav> :
-          null
+        {actions
+          ? <nav role='navigation' className={style.navigation}>
+              {actions}
+            </nav>
+          : null
         }
       </div>
     </Overlay>
@@ -59,4 +60,4 @@ Dialog.defaultProps = {
   type: 'normal'
 };
 
-export default Dialog;
+export default ActivableRenderer()(Dialog);
diff --git a/components/drawer/Drawer.jsx b/components/drawer/Drawer.jsx
index 651e7ac00..76ddaecad 100644
--- a/components/drawer/Drawer.jsx
+++ b/components/drawer/Drawer.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import ClassNames from 'classnames';
+import ActivableRenderer from '../hoc/ActivableRenderer';
 import Overlay from '../overlay';
 import style from './style';
 
@@ -33,4 +34,4 @@ Drawer.defaultProps = {
   type: 'left'
 };
 
-export default Drawer;
+export default ActivableRenderer()(Drawer);
diff --git a/components/hoc/ActivableRenderer.js b/components/hoc/ActivableRenderer.js
new file mode 100644
index 000000000..6eccf6680
--- /dev/null
+++ b/components/hoc/ActivableRenderer.js
@@ -0,0 +1,51 @@
+import React, { Component, PropTypes } from 'react';
+
+const ActivableRendererFactory = (options = {delay: 500}) => (ActivableComponent) => {
+  return class ActivableRenderer extends Component {
+    static propTypes = {
+      active: PropTypes.bool.isRequired,
+      children: PropTypes.any,
+      delay: PropTypes.number
+    };
+
+    static defaultProps = {
+      delay: options.delay
+    }
+
+    state = {
+      active: this.props.active,
+      rendered: this.props.active
+    };
+
+    componentWillReceiveProps (nextProps) {
+      if (nextProps.active && !this.props.active) this.renderAndActivate();
+      if (!nextProps.active && this.props.active) this.deactivateAndUnrender();
+    }
+
+    renderAndActivate () {
+      if (this.unrenderTimeout) clearTimeout(this.unrenderTimeout);
+      this.setState({ rendered: true, active: false }, () => {
+        setTimeout(() => this.setState({ active: true }), 20);
+      });
+    }
+
+    deactivateAndUnrender () {
+      this.setState({ rendered: true, active: false }, () => {
+        this.unrenderTimeout = setTimeout(() => {
+          this.setState({ rendered: false });
+          this.unrenderTimeout = null;
+        }, this.props.delay);
+      });
+    }
+
+    render () {
+      const { delay, ...others } = this.props; // eslint-disable-line no-unused-vars
+      const { active, rendered } = this.state;
+      return rendered
+        ? <ActivableComponent {...others} active={active} />
+        : null;
+    }
+  };
+};
+
+export default ActivableRendererFactory;
diff --git a/components/hoc/Portal.js b/components/hoc/Portal.js
new file mode 100644
index 000000000..b9dc5c723
--- /dev/null
+++ b/components/hoc/Portal.js
@@ -0,0 +1,108 @@
+import React, { Component, PropTypes } from 'react';
+import ReactDOM from 'react-dom';
+
+class Portal extends Component {
+  static propTypes = {
+    children: PropTypes.any,
+    container: PropTypes.any,
+    lockBody: PropTypes.bool
+  }
+
+  static defaultProps = {
+    lockBody: true
+  }
+
+  componentDidMount () {
+    this._renderOverlay();
+  }
+
+  componentWillReceiveProps (nextProps) {
+    if (this._overlayTarget && nextProps.container !== this.props.container) {
+      this._portalContainerNode.removeChild(this._overlayTarget);
+      this._portalContainerNode = getContainer(nextProps.container);
+      this._portalContainerNode.appendChild(this._overlayTarget);
+    }
+  }
+
+  componentDidUpdate () {
+    this._renderOverlay();
+  }
+
+  componentWillUnmount () {
+    this._unrenderOverlay();
+    this._unmountOverlayTarget();
+  }
+
+  _mountOverlayTarget () {
+    if (!this._overlayTarget) {
+      this._overlayTarget = document.createElement('div');
+      this._portalContainerNode = getContainer(this.props.container);
+      this._portalContainerNode.appendChild(this._overlayTarget);
+    }
+  }
+
+  _unmountOverlayTarget () {
+    if (this._overlayTarget) {
+      this._portalContainerNode.removeChild(this._overlayTarget);
+      this._overlayTarget = null;
+    }
+    this._portalContainerNode = null;
+  }
+
+  _renderOverlay () {
+    const overlay = !this.props.children
+      ? null
+      : React.Children.only(this.props.children);
+
+    if (overlay !== null) {
+      if (this.props.lockBody) document.body.style.overflow = 'hidden';
+      this._mountOverlayTarget();
+      this._overlayInstance = ReactDOM.unstable_renderSubtreeIntoContainer(
+        this, overlay, this._overlayTarget
+      );
+    } else {
+      this._unrenderOverlay();
+      this._unmountOverlayTarget();
+    }
+  }
+
+  _unrenderOverlay () {
+    if (this._overlayTarget) {
+      if (this.props.lockBody) document.body.style.overflow = 'scroll';
+      ReactDOM.unmountComponentAtNode(this._overlayTarget);
+      this._overlayInstance = null;
+    }
+  }
+
+  getMountNode () {
+    return this._overlayTarget;
+  }
+
+  getOverlayDOMNode () {
+    if (!this.isMounted()) {
+      throw new Error('getOverlayDOMNode(): A component must be mounted to have a DOM node.');
+    }
+
+    if (this._overlayInstance) {
+      if (this._overlayInstance.getWrappedDOMNode) {
+        return this._overlayInstance.getWrappedDOMNode();
+      } else {
+        return ReactDOM.findDOMNode(this._overlayInstance);
+      }
+    }
+
+    return null;
+  }
+
+  render () {
+    return null;
+  }
+
+}
+
+function getContainer (container) {
+  const _container = typeof container === 'function' ? container() : container;
+  return ReactDOM.findDOMNode(_container) || document.body;
+}
+
+export default Portal;
diff --git a/components/overlay/Overlay.jsx b/components/overlay/Overlay.jsx
index 3856ce02c..5f5a45e58 100644
--- a/components/overlay/Overlay.jsx
+++ b/components/overlay/Overlay.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import Portal from '../hoc/Portal';
 import ClassNames from 'classnames';
 import style from './style';
 
@@ -18,26 +18,18 @@ class Overlay extends React.Component {
   };
 
   componentDidMount () {
-    this.app = document.querySelector('[data-react-toolbox="app"]') || document.body;
-    this.node = document.createElement('div');
-    this.node.setAttribute('data-react-toolbox', 'overlay');
-    this.app.appendChild(this.node);
-    this.handleRender();
     if (this.props.active) {
       this.escKeyListener = document.body.addEventListener('keydown', this.handleEscKey.bind(this));
     }
   }
 
   componentDidUpdate () {
-    this.handleRender();
     if (this.props.active && !this.escKeyListener) {
       this.escKeyListener = document.body.addEventListener('keydown', this.handleEscKey.bind(this));
     }
   }
 
   componentWillUnmount () {
-    ReactDOM.unmountComponentAtNode(this.node);
-    this.app.removeChild(this.node);
     if (this.escKeyListener) {
       document.body.removeEventListener('keydown', this.handleEscKey);
       this.escKeyListener = null;
@@ -50,24 +42,20 @@ class Overlay extends React.Component {
     }
   }
 
-  handleRender () {
+  render () {
     const className = ClassNames(style.root, {
       [style.active]: this.props.active,
       [style.invisible]: this.props.invisible
     }, this.props.className);
 
-    const overlay = (
-      <div className={className}>
-        <div className={style.overlay} onClick={this.props.onClick} />
-        {this.props.children}
-      </div>
+    return (
+      <Portal>
+        <div className={className}>
+          <div className={style.overlay} onClick={this.props.onClick} />
+          {this.props.children}
+        </div>
+      </Portal>
     );
-
-    ReactDOM.unstable_renderSubtreeIntoContainer(this, overlay, this.node);
-  }
-
-  render () {
-    return React.DOM.noscript();
   }
 }
 
diff --git a/components/snackbar/Snackbar.jsx b/components/snackbar/Snackbar.jsx
index cbadec596..f96342d38 100644
--- a/components/snackbar/Snackbar.jsx
+++ b/components/snackbar/Snackbar.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import ClassNames from 'classnames';
+import ActivableRenderer from '../hoc/ActivableRenderer';
 import Button from '../button';
 import FontIcon from '../font_icon';
 import Overlay from '../overlay';
@@ -21,24 +22,13 @@ class Snackbar extends React.Component {
     type: React.PropTypes.string
   };
 
-  state = {
-    curTimeout: null
-  };
-
   componentWillReceiveProps (nextProps) {
     if (nextProps.active && nextProps.timeout) {
-      if (this.state.curTimeout) clearTimeout(this.state.curTimeout);
-
-      const curTimeout = setTimeout(() => {
+      if (this.curTimeout) clearTimeout(this.curTimeout);
+      this.curTimeout = setTimeout(() => {
         nextProps.onTimeout();
-        this.setState({
-          curTimeout: null
-        });
+        this.curTimeout = null;
       }, nextProps.timeout);
-
-      this.setState({
-        curTimeout
-      });
     }
   }
 
@@ -60,4 +50,4 @@ class Snackbar extends React.Component {
   }
 }
 
-export default Snackbar;
+export default ActivableRenderer()(Snackbar);

From baf441471975ba9b93e22b99c01908e80d1c4065 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 10 Apr 2016 17:44:42 +0200
Subject: [PATCH 0468/1024] Remove unneeded App

---
 README.md                                     | 24 +++----------------
 components/app/App.jsx                        | 19 ---------------
 components/app/index.js                       |  1 -
 components/app/style.scss                     |  8 -------
 docs/app/components/layout/install/install.md | 18 --------------
 docs/app/index.jsx                            | 14 ++++-------
 spec/root.jsx                                 |  5 ++--
 7 files changed, 10 insertions(+), 79 deletions(-)
 delete mode 100644 components/app/App.jsx
 delete mode 100644 components/app/index.js
 delete mode 100644 components/app/style.scss

diff --git a/README.md b/README.md
index 1a6ce9b45..6413ab242 100644
--- a/README.md
+++ b/README.md
@@ -39,25 +39,7 @@ The previous code creates a React button component based on React Toolbox button
 
 React Toolbox assumes that you are importing [Roboto Font](https://www.google.com/fonts/specimen/Roboto) and [Material Design Icons](https://www.google.com/design/icons/).
 
-In order to import the fonts for you, we'd need to include them in the CSS which is considered a bad practice. If you are not including them in your app, go to the linked sites and follow the instructions. 
-
-## App component
-
-There are some components in React Toolbox that require special positioning. For example, `Dialog` and `Drawer` components block the scroll showing a fixed positioned overlay. To handle these cases, React Toolbox needs some styling in your root node. This can be achieved by wrapping your app with a non intrusive `App` wrapper component:
-
-```jsx
-import React from 'react';
-import ReactDOM from 'react-dom';
-import ToolboxApp from 'react-toolbox/lib/app';
-import App from './my-app';
-
-ReactDOM.render(
-  <ToolboxApp>
-    <App />
-  </ToolboxApp>
-, document.getElementById('app'));
-
-```
+In order to import the fonts for you, we'd need to include them in the CSS which is considered a bad practice. If you are not including them in your app, go to the linked sites and follow the instructions.
 
 ## Customization
 
@@ -67,7 +49,7 @@ Since React Toolbox styles are written in CSS, it's pretty easy to customize you
 
 Thanks to the power of SASS, all components in React Toolbox are configured from a variables file. The best way to customize your build is to create a custom configuration SASS file overriding configuration variables like colors or sizes.
 
-With [toolbox-loader](https://github.com/react-toolbox/toolbox-loader) you can tell webpack where your configuration file is and it will prepend your config to each SASS build. This will result in your customized CSS for React Toolbox Components. For now you can browse the configuration files and override what you want. 
+With [toolbox-loader](https://github.com/react-toolbox/toolbox-loader) you can tell webpack where your configuration file is and it will prepend your config to each SASS build. This will result in your customized CSS for React Toolbox Components. For now you can browse the configuration files and override what you want.
 
 ### Via `className` property
 
@@ -106,7 +88,7 @@ To start the documentation site locally, you'll need to install the dependencies
 git clone https://github.com/react-toolbox/react-toolbox.git
 npm install
 cd docs/
-npm install 
+npm install
 npm start
 ```
 
diff --git a/components/app/App.jsx b/components/app/App.jsx
deleted file mode 100644
index 41d283566..000000000
--- a/components/app/App.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import style from './style';
-
-const App = ({className, children}) => (
-  <div data-react-toolbox='app' className={`${style.root} ${className}`}>
-    {children}
-  </div>
-);
-
-App.propTypes = {
-  children: React.PropTypes.node,
-  className: React.PropTypes.string
-};
-
-App.defaultProps = {
-  className: ''
-};
-
-export default App;
diff --git a/components/app/index.js b/components/app/index.js
deleted file mode 100644
index e8ab2197c..000000000
--- a/components/app/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export default from './App';
diff --git a/components/app/style.scss b/components/app/style.scss
deleted file mode 100644
index 1de449412..000000000
--- a/components/app/style.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.root {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  overflow-y: auto;
-}
diff --git a/docs/app/components/layout/install/install.md b/docs/app/components/layout/install/install.md
index a373f9d35..c3fde6bde 100644
--- a/docs/app/components/layout/install/install.md
+++ b/docs/app/components/layout/install/install.md
@@ -35,24 +35,6 @@ React Toolbox assumes that you are importing [Roboto Font](https://www.google.co
 
 In order to import the fonts for you, we'd need to include them in the CSS which is considered a bad practice. If you are not including them in your app to the linked sites and follow the instructions.
 
-## App component
-
-There are some components in React Toolbox that requires special positioning. For example, `Dialog` and `Drawer` components block the scroll showing a fixed positioned overlay. To handle these cases, React Toolbox needs some styling in your root node. This can be achieved wrapping your app with a nonintrusive `App` wrapper component:
-
-```jsx
-import React from 'react';
-import ReactDOM from 'react-dom';
-import ToolboxApp from 'react-toolbox/lib/app';
-import App from './my-app';
-
-ReactDOM.render(
-  <ToolboxApp>
-    <App />
-  </ToolboxApp>
-, document.getElementById('app'));
-
-```
-
 ## Customization
 
 Since React Toolbox styles are written in CSS it's pretty easy to customize your components. We have several ways:
diff --git a/docs/app/index.jsx b/docs/app/index.jsx
index ebc9cb46d..52f74fe57 100644
--- a/docs/app/index.jsx
+++ b/docs/app/index.jsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Router, Route, IndexRoute, browserHistory } from 'react-router';
+import { Router, Route, browserHistory } from 'react-router';
 
 import 'react-toolbox/commons';
-import { App } from 'react-toolbox';
 
 import Home from './components/layout/home';
 import Install from './components/layout/install';
@@ -11,13 +10,10 @@ import Main from './components/layout/main';
 
 ReactDOM.render((
   <Router history={browserHistory}>
-    <Route component={App}>
-      <Route path="/" component={Home} />
-      <Route path="/install" component={Install} />
-      <Route path="/components" component={Main}>
-        <Route path=":component" />
-      </Route>
-      <IndexRoute component={Home}/>
+    <Route path="/" component={Home} />
+    <Route path="/install" component={Install} />
+    <Route path="/components" component={Main}>
+      <Route path=":component" />
     </Route>
   </Router>
 ), document.getElementById('app'));
diff --git a/spec/root.jsx b/spec/root.jsx
index 41dd37675..e4f224c9e 100644
--- a/spec/root.jsx
+++ b/spec/root.jsx
@@ -1,6 +1,5 @@
 /* global VERSION */
 import React from 'react';
-import App from '../components/app';
 import AppBarToolbox from '../components/app_bar';
 import Avatar from './components/avatar';
 import ButtonToolbox from '../components/button';
@@ -32,7 +31,7 @@ const _hrefProject = () => {
 };
 
 const Root = () => (
-  <App className={style.app}>
+  <div className={style.app}>
     <AppBarToolbox fixed flat className={style.appbar}>
       <h1>React Toolbox <small>Spec {VERSION}</small></h1>
       <ButtonToolbox
@@ -66,7 +65,7 @@ const Root = () => (
     <Table />
     <Tabs />
     <Tooltip />
-  </App>
+  </div>
 );
 
 export default Root;

From c3ef6bd25aedc9fa94729495c30f564ce5d8b4e3 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 10 Apr 2016 17:49:23 +0200
Subject: [PATCH 0469/1024] Update linting

---
 .eslintrc                                |  2 +-
 components/_globals.scss                 | 10 +++----
 components/autocomplete/Autocomplete.jsx |  4 +--
 components/date_picker/Calendar.jsx      |  7 +++--
 components/input/Input.jsx               | 11 ++++----
 components/tabs/Tabs.jsx                 |  6 ++---
 tools/generateMarkdown.js                | 33 ++++++++++++------------
 7 files changed, 35 insertions(+), 38 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 03a58a799..1b11bd11f 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -164,7 +164,7 @@
     "no-with": [2],
     "one-var": [0],
     "operator-assignment": [0, "always"],
-    "operator-linebreak": [2, "after"],
+    "operator-linebreak": [2, "before"],
     "padded-blocks": [0],
     "prefer-const": [2],
     "prefer-spread": [2],
diff --git a/components/_globals.scss b/components/_globals.scss
index 53a2ac015..1759ac612 100644
--- a/components/_globals.scss
+++ b/components/_globals.scss
@@ -32,11 +32,11 @@ $shadow-key-penumbra-opacity: 0.14 !default;
 $shadow-ambient-shadow-opacity: 0.12 !default;
 
 //-- Depth Shadows
-$zdepth-shadow-1: 0 1px 6px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.24);
-$zdepth-shadow-2: 0 3px 10px rgba(0,0,0,0.16), 0 3px 10px rgba(0,0,0,0.23);
-$zdepth-shadow-3: 0 10px 30px rgba(0,0,0,0.19), 0 6px 10px rgba(0,0,0,0.23);
-$zdepth-shadow-4: 0 14px 45px rgba(0,0,0,0.25), 0 10px 18px rgba(0,0,0,0.22);
-$zdepth-shadow-5: 0 19px 60px rgba(0,0,0,0.30), 0 15px 20px rgba(0,0,0,0.22);
+$zdepth-shadow-1: 0 1px 6px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.24);
+$zdepth-shadow-2: 0 3px 10px rgba(0,0,0,.16), 0 3px 10px rgba(0,0,0,.23);
+$zdepth-shadow-3: 0 10px 30px rgba(0,0,0,.19), 0 6px 10px rgba(0,0,0,.23);
+$zdepth-shadow-4: 0 14px 45px rgba(0,0,0,.25), 0 10px 18px rgba(0,0,0,.22);
+$zdepth-shadow-5: 0 19px 60px rgba(0,0,0,.3), 0 15px 20px rgba(0,0,0,.22);
 
 //-- Animation
 $animation-duration: .35s;
diff --git a/components/autocomplete/Autocomplete.jsx b/components/autocomplete/Autocomplete.jsx
index 2dd75a980..3897b1b11 100644
--- a/components/autocomplete/Autocomplete.jsx
+++ b/components/autocomplete/Autocomplete.jsx
@@ -113,8 +113,8 @@ class Autocomplete extends React.Component {
    const query = this.state.query.toLowerCase().trim() || '';
    const values = this.values();
    for (const [key, value] of this.source()) {
-     if (value.toLowerCase().trim().startsWith(query) &&
-         (!values.has(key) || !this.props.multiple)) {
+     if (value.toLowerCase().trim().startsWith(query)
+          && (!values.has(key) || !this.props.multiple)) {
        suggest.set(key, value);
      }
    }
diff --git a/components/date_picker/Calendar.jsx b/components/date_picker/Calendar.jsx
index 610731b5d..a204550b0 100644
--- a/components/date_picker/Calendar.jsx
+++ b/components/date_picker/Calendar.jsx
@@ -33,10 +33,9 @@ class Calendar extends React.Component {
   }
 
   scrollToActive () {
-    this.refs.years.scrollTop =
-      this.refs.activeYear.offsetTop -
-      this.refs.years.offsetHeight / 2 +
-      this.refs.activeYear.offsetHeight / 2;
+    this.refs.years.scrollTop = this.refs.activeYear.offsetTop
+      - this.refs.years.offsetHeight / 2
+      + this.refs.activeYear.offsetHeight / 2;
   }
 
   handleDayClick = (day) => {
diff --git a/components/input/Input.jsx b/components/input/Input.jsx
index 03b04d520..13f5d646d 100644
--- a/components/input/Input.jsx
+++ b/components/input/Input.jsx
@@ -83,11 +83,12 @@ class Input extends React.Component {
         {InputElement}
         {icon ? <FontIcon className={style.icon} value={icon} /> : null}
         <span className={style.bar}></span>
-        {labelText ?
-          <label className={labelClassName}>
-            {labelText}
-            {required ? <span className={style.required}> * </span> : null}
-          </label> : null}
+        {labelText
+          ? <label className={labelClassName}>
+              {labelText}
+              {required ? <span className={style.required}> * </span> : null}
+            </label>
+          : null}
         {hint ? <span className={style.hint}>{hint}</span> : null}
         {error ? <span className={style.error}>{error}</span> : null}
         {maxLength ? <span className={style.counter}>{length}/{maxLength}</span> : null}
diff --git a/components/tabs/Tabs.jsx b/components/tabs/Tabs.jsx
index ad73e249e..f0ae68729 100644
--- a/components/tabs/Tabs.jsx
+++ b/components/tabs/Tabs.jsx
@@ -21,13 +21,11 @@ class Tabs extends React.Component {
   };
 
   componentDidMount () {
-    !this.props.disableAnimatedBottomBorder &&
-      this.updatePointer(this.props.index);
+    !this.props.disableAnimatedBottomBorder && this.updatePointer(this.props.index);
   }
 
   componentWillReceiveProps (nextProps) {
-    !this.props.disableAnimatedBottomBorder &&
-      this.updatePointer(nextProps.index);
+    !this.props.disableAnimatedBottomBorder && this.updatePointer(nextProps.index);
   }
 
   componentWillUnmount () {
diff --git a/tools/generateMarkdown.js b/tools/generateMarkdown.js
index 660c7aaed..8fe93782b 100644
--- a/tools/generateMarkdown.js
+++ b/tools/generateMarkdown.js
@@ -11,11 +11,11 @@ function generateDesciption (description) {
 function generatePropType (type) {
   let values;
   if (Array.isArray(type.value)) {
-    values = '(`' +
-      type.value.map(function (typeValue) {
+    values = '(`'
+      + type.value.map(function (typeValue) {
         return typeValue.name || typeValue.value;
-      }).join('`,`') +
-      '`)';
+      }).join('`,`')
+      + '`)';
   } else {
     values = type.value;
   }
@@ -33,11 +33,11 @@ function generateProp (propName, prop) {
   }
 
   return (
-    `| \`${propName}\` ${prop.required ? '(required)' : ''}` +
-    `| ${(prop.type ? generatePropType(prop.type) : '')} ` +
-    `| ${(prop.defaultValue ? `\`${prop.defaultValue}\`` : '')} ` +
-    `| ${(prop.description ? prop.description : '')} ` +
-    '|'
+      `| \`${propName}\` ${prop.required ? '(required)' : ''}`
+    + `| ${(prop.type ? generatePropType(prop.type) : '')} `
+    + `| ${(prop.defaultValue ? `\`${prop.defaultValue}\`` : '')} `
+    + `| ${(prop.description ? prop.description : '')} `
+    + '|'
   );
 }
 
@@ -45,20 +45,19 @@ function generateProps (props) {
   const title = '### Properties';
 
   return (
-    `${title}\n` +
-    '| Name | Type | Default | Description |\n' +
-    '|:-----|:-----|:-----|:-----|\n' +
-    Object.keys(props).sort().map(propName => {
+    `${title}\n`
+    + '| Name | Type | Default | Description |\n'
+    + '|:-----|:-----|:-----|:-----|\n'
+    + Object.keys(props).sort().map(propName => {
       return generateProp(propName, props[propName]);
     }).join('\n')
   );
 }
 
 function generateMarkdown (name, reactAPI) {
-  const markdownString =
-    generateTitle(name) + '\n' +
-    (reactAPI.description ? generateDesciption(reactAPI.description) + '\n' : '\n') +
-    generateProps(reactAPI.props);
+  const markdownString = generateTitle(name) + '\n'
+    + (reactAPI.description ? generateDesciption(reactAPI.description) + '\n' : '\n')
+    + generateProps(reactAPI.props);
 
   return markdownString;
 }

From 0d1265e5a1a0785434c9e919c2476b64e1532a3e Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 10 Apr 2016 18:33:20 +0200
Subject: [PATCH 0470/1024] Adapt pickers to calculate position with scroll

---
 components/time_picker/Clock.jsx            |  2 +-
 components/time_picker/TimePickerDialog.jsx |  4 ++--
 components/utils/events.js                  | 10 ++++------
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/components/time_picker/Clock.jsx b/components/time_picker/Clock.jsx
index b56e8efee..b5bae57ea 100644
--- a/components/time_picker/Clock.jsx
+++ b/components/time_picker/Clock.jsx
@@ -54,7 +54,7 @@ class Clock extends React.Component {
   handleCalculateShape = () => {
     const { top, left, width } = this.refs.placeholder.getBoundingClientRect();
     this.setState({
-      center: { x: left + width / 2, y: top + width / 2 },
+      center: { x: left + width / 2 - window.scrollX, y: top + width / 2 - window.scrollX },
       radius: width / 2
     });
   };
diff --git a/components/time_picker/TimePickerDialog.jsx b/components/time_picker/TimePickerDialog.jsx
index c4ec76c9c..ad52d9529 100644
--- a/components/time_picker/TimePickerDialog.jsx
+++ b/components/time_picker/TimePickerDialog.jsx
@@ -26,8 +26,8 @@ class TimePickerDialog extends React.Component {
     displayTime: this.props.value
   };
 
-  componentWillUpdate (nextProps) {
-    if (!this.props.active && nextProps.active) {
+  componentDidUpdate (prevProps) {
+    if (!prevProps.active && this.props.active) {
       setTimeout(this.refs.clock.handleCalculateShape, 1000);
     }
   }
diff --git a/components/utils/events.js b/components/utils/events.js
index 731879217..47d805518 100644
--- a/components/utils/events.js
+++ b/components/utils/events.js
@@ -1,23 +1,21 @@
 export default {
   getMousePosition (event) {
     return {
-      x: event.pageX,
-      y: event.pageY
+      x: event.pageX - window.scrollX,
+      y: event.pageY - window.scrollY
     };
   },
 
   getTouchPosition (event) {
     return {
-      x: event.touches[0].pageX,
-      y: event.touches[0].pageY
+      x: event.touches[0].pageX - window.scrollX,
+      y: event.touches[0].pageY - window.scrollY
     };
   },
 
   pauseEvent (event) {
     event.stopPropagation();
     event.preventDefault();
-    event.returnValue = false;
-    event.cancelBubble = true;
   },
 
   addEventsToDocument (eventMap) {

From 47fba118577289ebe592aab373c718f920599f40 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 10 Apr 2016 18:53:44 +0200
Subject: [PATCH 0471/1024] Add inputClassName prop to DatePicker and
 TimePicker

---
 components/date_picker/DatePicker.jsx | 6 ++++--
 components/date_picker/readme.md      | 1 +
 components/time_picker/TimePicker.jsx | 6 ++++--
 components/time_picker/readme.md      | 1 +
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/components/date_picker/DatePicker.jsx b/components/date_picker/DatePicker.jsx
index 43f89abad..0ccc56e24 100644
--- a/components/date_picker/DatePicker.jsx
+++ b/components/date_picker/DatePicker.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import classnames from 'classnames';
 import DatePickerDialog from './DatePickerDialog';
 import events from '../utils/events';
 import Input from '../input';
@@ -10,6 +11,7 @@ class DatePicker extends React.Component {
     autoOk: React.PropTypes.bool,
     className: React.PropTypes.string,
     error: React.PropTypes.string,
+    inputClassName: React.PropTypes.string,
     inputFormat: React.PropTypes.func,
     label: React.PropTypes.string,
     maxDate: React.PropTypes.object,
@@ -37,14 +39,14 @@ class DatePicker extends React.Component {
   };
 
   render () {
-    const { value } = this.props;
+    const { inputClassName, value } = this.props;
     const inputFormat = this.props.inputFormat || time.formatDate;
     const date = value ? inputFormat(value) : null;
 
     return (
       <div data-react-toolbox='date-picker'>
         <Input
-          className={style.input}
+          className={classnames(style.input, {[inputClassName]: inputClassName })}
           error={this.props.error}
           onMouseDown={this.handleInputMouseDown}
           label={this.props.label}
diff --git a/components/date_picker/readme.md b/components/date_picker/readme.md
index 1f38edee4..8241eadf9 100644
--- a/components/date_picker/readme.md
+++ b/components/date_picker/readme.md
@@ -36,6 +36,7 @@ class DatePickerTest extends React.Component {
 |:-----|:-----|:-----|:-----|
 | `autoOk`        | `Boolean`       | `false`       | Automatically selects a date upon clicking on a day|
 | `className`     | `String`        |               | This class will be placed at the top of the `DatePickerDialog` component so you can provide custom styles.|
+| `inputClassName`| `String`        |               | This class will be applied to `Input` component of `DatePicker`. |
 | `inputFormat`   | `Function`      |               | Function to format the date displayed on the input. |
 | `label`         | `String`        |               | The text string to use for the floating label element in the input component.|
 | `maxDate`       | `Date`          |               | Date object with the maximum selectable date. |
diff --git a/components/time_picker/TimePicker.jsx b/components/time_picker/TimePicker.jsx
index 591ca9d35..6fa5bd0d6 100644
--- a/components/time_picker/TimePicker.jsx
+++ b/components/time_picker/TimePicker.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import classnames from 'classnames';
 import events from '../utils/events';
 import time from '../utils/time';
 import style from './style';
@@ -10,6 +11,7 @@ class TimePicker extends React.Component {
     className: React.PropTypes.string,
     error: React.PropTypes.string,
     format: React.PropTypes.oneOf(['24hr', 'ampm']),
+    inputClassName: React.PropTypes.string,
     label: React.PropTypes.string,
     onChange: React.PropTypes.func,
     value: React.PropTypes.object
@@ -39,12 +41,12 @@ class TimePicker extends React.Component {
   };
 
   render () {
-    const { value, format } = this.props;
+    const { value, format, inputClassName } = this.props;
     const formattedTime = value ? time.formatTime(value, format) : null;
     return (
       <div data-react-toolbox='time-picker'>
         <Input
-          className={style.input}
+          className={classnames(style.input, {[inputClassName]: inputClassName })}
           error={this.props.error}
           label={this.props.label}
           onMouseDown={this.handleInputMouseDown}
diff --git a/components/time_picker/readme.md b/components/time_picker/readme.md
index ed792a36f..de3ce67a4 100644
--- a/components/time_picker/readme.md
+++ b/components/time_picker/readme.md
@@ -28,6 +28,7 @@ class TimePickerTest extends React.Component {
 |:-----|:-----|:-----|:-----|
 | `className`     | `String`    |             | This class will be placed at the top of the `TimePickerDialog` component so you can provide custom styles.|
 | `error`         | `String`    |             | Provide error text which will be displayed under the field.|
+| `inputClassName`| `String`        |         | This class will be applied to `Input` component of `TimePicker`. |
 | `format`        | `String`    | `24hr`      | Format to display the clock. It can be `24hr` or `ampm`.|
 | `label`         | `String`    |             | The text string to use for the floating label element in the input component.|
 | `onChange`      | `Function`  |             | Callback called when the picker value is changed.|

From 7e2d4dea9f94b7ed070245b1d9a84014382cd9b5 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 10 Apr 2016 18:56:35 +0200
Subject: [PATCH 0472/1024] Remove App from components index

---
 components/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/index.js b/components/index.js
index 71a2fa1a0..ab0ca7f60 100644
--- a/components/index.js
+++ b/components/index.js
@@ -1,5 +1,4 @@
 import './utils/polyfills'; // Import polyfills for IE11
-export App from './app';
 export AppBar from './app_bar';
 export Autocomplete from './autocomplete';
 export Avatar from './avatar';

From e45b0cbff838334d1a7f82b6170c819671c0661d Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 10 Apr 2016 19:00:13 +0200
Subject: [PATCH 0473/1024] Fix checking if key exists in Autocomplete

---
 components/autocomplete/Autocomplete.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/autocomplete/Autocomplete.jsx b/components/autocomplete/Autocomplete.jsx
index 3897b1b11..f642f7215 100644
--- a/components/autocomplete/Autocomplete.jsx
+++ b/components/autocomplete/Autocomplete.jsx
@@ -105,7 +105,7 @@ class Autocomplete extends React.Component {
  }
 
  query (key) {
-   return !this.props.multiple && this.props.value ? this.source().get(key) : '';
+   return !this.props.multiple && key ? this.source().get(key) : '';
  }
 
  suggestions () {

From 7d73fb42162d6a8a626e02df88c38cbb7b44dd9f Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 10 Apr 2016 19:08:21 +0200
Subject: [PATCH 0474/1024] Fix #442

---
 components/tabs/Tabs.jsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/components/tabs/Tabs.jsx b/components/tabs/Tabs.jsx
index f0ae68729..a858028ca 100644
--- a/components/tabs/Tabs.jsx
+++ b/components/tabs/Tabs.jsx
@@ -84,11 +84,13 @@ class Tabs extends React.Component {
       return this.props.index === idx;
     });
 
-    return React.cloneElement(contents[activeIdx], {
-      key: activeIdx,
-      active: true,
-      tabIndex: activeIdx
-    });
+    if (contents && contents[activeIdx]) {
+      return React.cloneElement(contents[activeIdx], {
+        key: activeIdx,
+        active: true,
+        tabIndex: activeIdx
+      });
+    }
   }
 
   render () {

From ee4cc5437d3c31b5b6ec00eff5fb01d70ce96fe7 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 10 Apr 2016 19:15:29 +0200
Subject: [PATCH 0475/1024] Fix #425

---
 components/autocomplete/style.scss | 1 +
 components/dropdown/style.scss     | 1 +
 2 files changed, 2 insertions(+)

diff --git a/components/autocomplete/style.scss b/components/autocomplete/style.scss
index 053d95815..0a6cb65e0 100644
--- a/components/autocomplete/style.scss
+++ b/components/autocomplete/style.scss
@@ -72,6 +72,7 @@
     right: $input-chevron-offset;
     width: 0;
     height: 0;
+    pointer-events: none;
     content: "";
     border-top: $size solid $input-text-bottom-border-color;
     border-right: $border;
diff --git a/components/dropdown/style.scss b/components/dropdown/style.scss
index 6e8a65297..6f0be32f6 100644
--- a/components/dropdown/style.scss
+++ b/components/dropdown/style.scss
@@ -46,6 +46,7 @@
     right: $input-chevron-offset;
     width: 0;
     height: 0;
+    pointer-events: none;
     content: "";
     border-top: $size solid $input-text-bottom-border-color;
     border-right: $border;

From 48e5c484c46278b372c5e4d2639f227b244bc7cd Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 10 Apr 2016 19:22:15 +0200
Subject: [PATCH 0476/1024] Fix #407

---
 components/menu/Menu.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/menu/Menu.jsx b/components/menu/Menu.jsx
index 992ac4a2d..794a52e58 100644
--- a/components/menu/Menu.jsx
+++ b/components/menu/Menu.jsx
@@ -106,7 +106,9 @@ class Menu extends React.Component {
   };
 
   calculatePosition () {
-    const {top, left, height, width} = ReactDOM.findDOMNode(this).parentNode.getBoundingClientRect();
+    const parentNode = ReactDOM.findDOMNode(this).parentNode;
+    if (!parentNode) return;
+    const {top, left, height, width} = parentNode.getBoundingClientRect();
     const {height: wh, width: ww} = utils.getViewport();
     const toTop = top < ((wh / 2) - height / 2);
     const toLeft = left < ((ww / 2) - width / 2);

From b0437cd089bdefb64ec67d3c4bc083f32278931c Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 10 Apr 2016 20:45:37 +0200
Subject: [PATCH 0477/1024] Fix linter error for layouts

---
 components/layout/Layout.jsx    |  78 +++--
 components/layout/NavDrawer.jsx |  63 ++--
 components/layout/Panel.jsx     |  30 +-
 components/layout/Sidebar.jsx   |  46 +--
 components/layout/_config.scss  |  11 +-
 components/layout/_mixins.scss  |  39 ++-
 components/layout/index.js      |   8 +-
 components/layout/style.scss    | 501 ++++++++++++++++----------------
 8 files changed, 380 insertions(+), 396 deletions(-)

diff --git a/components/layout/Layout.jsx b/components/layout/Layout.jsx
index 24589e575..9b83d3f3d 100644
--- a/components/layout/Layout.jsx
+++ b/components/layout/Layout.jsx
@@ -1,60 +1,54 @@
 import React from 'react';
-import ClassNames from 'classnames';
+import classnames from 'classnames';
 import style from './style';
 
-
-const Layout = (props) => {
-    const className = ClassNames(style.root, props.className);
-
-    return (
-        <div data-react-toolbox='layout' className={className}>
-            {props.children}
-        </div>
-    );
-};
+const Layout = ({ className, children }) => (
+  <div data-react-toolbox='layout' className={classnames(style.root, className)}>
+    {children}
+  </div>
+);
 
 const ALLOWED = [
-    'Panel',
-    'NavDrawer|Panel',
-    'NavDrawer|Panel|Sidebar',
-    'Panel|Sidebar'
+  'Panel',
+  'NavDrawer|Panel',
+  'NavDrawer|Panel|Sidebar',
+  'Panel|Sidebar'
 ];
 
 function getChildName (child) {
-    if (child.type) {
-        return child.type.name || child.type;
-    }
-    if (!child.constructor || !child.constructor.name) {
-        return 'UNKNOWN';
-    }
-    return child.constructor.name;
+  if (child.type) {
+    return child.type.name || child.type;
+  }
+  if (!child.constructor || !child.constructor.name) {
+    return 'UNKNOWN';
+  }
+  return child.constructor.name;
 }
 
 Layout.propTypes = {
-    children (props, propName, componentName) {
-        // Accept only [NavDrawer]Pane[Sidebar]
-        const children = props[propName];
-        if (React.Children.count(children) > 3) {
-            return new Error(
-                '`' + componentName + '` ' +
-                    'should have a Pane for a child, optionally preceded and/or followed by a Drawer.'
-            );
-        }
-
-        const names = React.Children.map(children, getChildName).join('|');
+  children (props, propName, componentName) {
+    // Accept only [NavDrawer]Pane[Sidebar]
+    const children = props[propName];
+    if (React.Children.count(children) > 3) {
+      return new Error(
+        '`' + componentName + '` '
+        + 'should have a Pane for a child, optionally preceded and/or followed by a Drawer.'
+      );
+    }
 
-        if (!(~ALLOWED.indexOf(names))) {
-            return new Error(
-                '`' + componentName + '` ' +
-                'should have a Panel for a child, optionally preceded by a NavDrawer and/or followed by a Sidebar.'
-            );
-        }
-    },
-    className: React.PropTypes.string
+    const names = React.Children.map(children, getChildName).join('|');
+    if (!(~ALLOWED.indexOf(names))) {
+      return new Error(
+        '`' + componentName + '` '
+        + 'should have a Panel for a child, optionally preceded by a NavDrawer and/or followed by a Sidebar.'
+      );
+    }
+  },
+  className: React.PropTypes.string
 };
 
 Layout.defaultProps = {
-    className: ''
+  className: ''
 };
 
 export default Layout;
diff --git a/components/layout/NavDrawer.jsx b/components/layout/NavDrawer.jsx
index 6c7191222..0504cfb24 100644
--- a/components/layout/NavDrawer.jsx
+++ b/components/layout/NavDrawer.jsx
@@ -1,47 +1,46 @@
 import React from 'react';
-import ClassNames from 'classnames';
+import classnames from 'classnames';
 import style from './style';
 
 const NavDrawer = (props) => {
+  const rootClasses = classnames([style.navDrawer], {
+    [style['permanent-' + props.permanentAt]]: props.permanentAt,
+    [style.wide]: (props.width === 'wide'),
+    [style.active]: props.active,
+    [style.pinned]: props.pinned
+  }, props.className);
 
-    const rootClasses = ClassNames([style.navDrawer], {
-        [style['permanent-' + props.permanentAt]]: props.permanentAt,
-        [style.wide]: (props.width === 'wide'),
-        [style.active]: props.active,
-        [style.pinned]: props.pinned
-    }, props.className);
+  const drawerClasses = classnames(style.drawerContent, {
+      [style.scrollY]: props.scrollY
+  });
 
-    const drawerClasses = ClassNames(style.drawerContent, {
-        [style.scrollY]: props.scrollY
-    });
-
-    return (
-        <div data-react-toolbox='nav-drawer' className={rootClasses} onClick={props.onOverlayClick}>
-            <div data-react-toolbox='nav-drawer-scrim' className={style.scrim}>
-                <aside data-react-toolbox='nav-drawer-content' className={drawerClasses}>
-                    {props.children}
-                </aside>
-            </div>
-        </div>
-    );
+  return (
+    <div data-react-toolbox='nav-drawer' className={rootClasses} onClick={props.onOverlayClick}>
+      <div data-react-toolbox='nav-drawer-scrim' className={style.scrim}>
+        <aside data-react-toolbox='nav-drawer-content' className={drawerClasses}>
+          {props.children}
+        </aside>
+      </div>
+    </div>
+  );
 };
 
 NavDrawer.propTypes = {
-    active: React.PropTypes.bool,
-    children: React.PropTypes.any,
-    className: React.PropTypes.string,
-    onOverlayClick: React.PropTypes.func,
-    permanentAt: React.PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'xxl', 'xxxl']),
-    pinned: React.PropTypes.bool,
-    scrollY: React.PropTypes.bool,
-    width: React.PropTypes.oneOf(['normal', 'wide'])
+  active: React.PropTypes.bool,
+  children: React.PropTypes.any,
+  className: React.PropTypes.string,
+  onOverlayClick: React.PropTypes.func,
+  permanentAt: React.PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'xxl', 'xxxl']),
+  pinned: React.PropTypes.bool,
+  scrollY: React.PropTypes.bool,
+  width: React.PropTypes.oneOf(['normal', 'wide'])
 };
 
 NavDrawer.defaultProps = {
-    active: false,
-    className: '',
-    scrollY: false,
-    width: 'normal'
+  active: false,
+  className: '',
+  scrollY: false,
+  width: 'normal'
 };
 
 export default NavDrawer;
diff --git a/components/layout/Panel.jsx b/components/layout/Panel.jsx
index 4a8182b54..a65005842 100644
--- a/components/layout/Panel.jsx
+++ b/components/layout/Panel.jsx
@@ -1,28 +1,28 @@
 import React from 'react';
-import ClassNames from 'classnames';
+import classnames from 'classnames';
 import style from './style';
 
-const Panel = (props) => {
-    const className = ClassNames(style.panel, {
-        [style.scrollY]: props.scrollY
-    }, props.className);
+const Panel = ({ children, className, scrollY }) => {
+  const _className = classnames(style.panel, {
+    [style.scrollY]: scrollY
+  }, className);
 
-    return (
-        <div data-react-toolbox='panel' className={className}>
-            {props.children}
-        </div>
-    );
+  return (
+    <div data-react-toolbox='panel' className={_className}>
+      {children}
+    </div>
+  );
 };
 
 Panel.propTypes = {
-    children: React.PropTypes.any,
-    className: React.PropTypes.string,
-    scrollY: React.PropTypes.bool
+  children: React.PropTypes.any,
+  className: React.PropTypes.string,
+  scrollY: React.PropTypes.bool
 };
 
 Panel.defaultProps = {
-    className: '',
-    scrollY: false
+  className: '',
+  scrollY: false
 };
 
 export default Panel;
diff --git a/components/layout/Sidebar.jsx b/components/layout/Sidebar.jsx
index 570d601fb..5b3567304 100644
--- a/components/layout/Sidebar.jsx
+++ b/components/layout/Sidebar.jsx
@@ -1,38 +1,38 @@
 import React from 'react';
-import ClassNames from 'classnames';
+import classnames from 'classnames';
 import style from './style';
 
 const Sidebar = (props) => {
-    const wrapperClasses = ClassNames(style.sidebar, style[`width-${props.width}`], {
-        [style.pinned]: props.pinned
-    }, props.className);
+  const wrapperClasses = classnames(style.sidebar, style[`width-${props.width}`], {
+    [style.pinned]: props.pinned
+  }, props.className);
 
-    const innerClasses = ClassNames(style.sidebarContent, {
-        [style.scrollY]: props.scrollY
-    });
+  const innerClasses = classnames(style.sidebarContent, {
+    [style.scrollY]: props.scrollY
+  });
 
-    return (
-        <div data-react-toolbox='sidebar' className={wrapperClasses}>
-            <aside data-react-toolbox='sidebar-content' className={innerClasses}>
-                {props.children}
-            </aside>
-        </div>
-    );
+  return (
+    <div data-react-toolbox='sidebar' className={wrapperClasses}>
+      <aside data-react-toolbox='sidebar-content' className={innerClasses}>
+        {props.children}
+      </aside>
+    </div>
+  );
 };
 
 Sidebar.propTypes = {
-    children: React.PropTypes.any,
-    className: React.PropTypes.string,
-    pinned: React.PropTypes.bool,
-    scrollY: React.PropTypes.bool,
-    width: React.PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 25, 33, 50, 66, 75, 100])
+  children: React.PropTypes.any,
+  className: React.PropTypes.string,
+  pinned: React.PropTypes.bool,
+  scrollY: React.PropTypes.bool,
+  width: React.PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 25, 33, 50, 66, 75, 100])
 };
 
 Sidebar.defaultProps = {
-    className: '',
-    pinned: false,
-    scrollY: false,
-    width: 5
+  className: '',
+  pinned: false,
+  scrollY: false,
+  width: 5
 };
 
 export default Sidebar;
diff --git a/components/layout/_config.scss b/components/layout/_config.scss
index 63c0ef25a..a1b318f7a 100644
--- a/components/layout/_config.scss
+++ b/components/layout/_config.scss
@@ -5,13 +5,14 @@ $drawer-text-color: $palette-grey-800 !default;
 $drawer-overlay-color: $color-black !default;
 $drawer-overlay-opacity: .6 !default;
 
-
 // from: https://www.google.com/design/spec/layout/structure.html#structure-side-nav
-$navigation-drawer-desktop-width:                                 5 * $standard-increment-desktop !default;
-$navigation-drawer-max-desktop-width:                             40 * $unit !default;
+$navigation-drawer-desktop-width: 5 * $standard-increment-desktop !default;
+$navigation-drawer-max-desktop-width: 40 * $unit !default;
+
 // Mobile:
 // Width = Screen width − 56 dp
 // Maximum width: 320dp
-$navigation-drawer-mobile-width:                                  5 * $standard-increment-mobile !default;
+$navigation-drawer-mobile-width: 5 * $standard-increment-mobile !default;
+
 // sass doesn't like use of variable here: calc(100% - $standard-increment-mobile);
-$navigation-drawer-max-mobile-width:                              calc(100% - 5.6rem) !default;
+$navigation-drawer-max-mobile-width: calc(100% - 5.6rem) !default;
diff --git a/components/layout/_mixins.scss b/components/layout/_mixins.scss
index 5ea572ece..1ace8de42 100644
--- a/components/layout/_mixins.scss
+++ b/components/layout/_mixins.scss
@@ -1,30 +1,29 @@
-
 @mixin open() {
-    transition-delay: $animation-delay;
-    & > .scrim {
-        & > .drawerContent {
-            pointer-events: all;
-            transition-delay: $animation-delay;
-            transform: translateX(0);
-        }
+  transition-delay: $animation-delay;
+  & > .scrim {
+    & > .drawerContent {
+      pointer-events: all;
+      transition-delay: $animation-delay;
+      transform: translateX(0);
     }
+  }
 }
 
 @mixin permanent() {
-    @include open();
+  @include open();
 
-    width: $navigation-drawer-desktop-width;
-    max-width: $navigation-drawer-desktop-width;
+  width: $navigation-drawer-desktop-width;
+  max-width: $navigation-drawer-desktop-width;
 
-    &.wide {
-        width: $navigation-drawer-max-desktop-width;
-        max-width: $navigation-drawer-max-desktop-width;
-    }
+  &.wide {
+    width: $navigation-drawer-max-desktop-width;
+    max-width: $navigation-drawer-max-desktop-width;
+  }
 
-    &.active {
-        & > .scrim {
-            width: 0;
-            background-color: rgba($drawer-overlay-color, 0);
-        }
+  &.active {
+    & > .scrim {
+      width: 0;
+      background-color: rgba($drawer-overlay-color, 0);
     }
+  }
 }
diff --git a/components/layout/index.js b/components/layout/index.js
index 9ece06a45..88fc67a6c 100644
--- a/components/layout/index.js
+++ b/components/layout/index.js
@@ -1,4 +1,4 @@
-export { default as Layout } from './Layout.jsx';
-export { default as Panel } from './Panel.jsx';
-export { default as NavDrawer } from './NavDrawer.jsx';
-export { default as Sidebar } from './Sidebar.jsx';
+export { default as Layout } from './Layout';
+export { default as Panel } from './Panel';
+export { default as NavDrawer } from './NavDrawer';
+export { default as Sidebar } from './Sidebar';
diff --git a/components/layout/style.scss b/components/layout/style.scss
index 06ac1c607..16e16221b 100644
--- a/components/layout/style.scss
+++ b/components/layout/style.scss
@@ -3,316 +3,307 @@
 @import "http://github.com/mixins";
 
 .root {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: stretch;
-    overflow-y: hidden;
-    position: relative;
-
-    width: 100%;
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: row;
+  align-items: stretch;
+  justify-content: space-between;
+  overflow-y: hidden;
+
+  .navDrawer {
+    width: 0;
+    min-width: 0;
     height: 100%;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    transition-timing-function: $animation-curve-default;
+    transition-duration: $animation-duration;
+    transition-property: width, min-width;
+
+    .scrim {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      z-index: $z-index-highest;
+      width: 0;
+      height: 100%;
+      background-color: rgba($drawer-overlay-color, 0);
+      transition: background-color $animation-duration $animation-curve-default, width 10ms linear $animation-duration;
+    }
 
-    .navDrawer {
-        height: 100%;
-        width: 0px;
-        min-width: 0px;
-        overflow-y: hidden;
-        overflow-x: hidden;
-        transition-timing-function: $animation-curve-default;
-        transition-duration: $animation-duration;
-        transition-property: width, min-width;
+    .drawerContent {
+      @include shadow-2dp();
+      display: flex;
+      width: $navigation-drawer-mobile-width;
+      max-width: $navigation-drawer-max-mobile-width;
+      height: 100%;
+      flex-direction: column;
+      align-items: stretch;
+      justify-content: space-between;
+      overflow-x: hidden;
+      overflow-y: hidden;
+      color: $drawer-text-color;
+      pointer-events: none;
+      background-color: $drawer-background-color;
+      border-right: 1px solid $drawer-border-color;
+      transition: transform $animation-duration $animation-curve-default;
+      transform: translateX(-100%);
+
+      &.scrollY {
+        overflow-y: auto;
+      }
+    }
 
+    &.pinned {
+      @include open();
+      width: $navigation-drawer-mobile-width;
+      max-width: $navigation-drawer-max-mobile-width;
+    }
 
+    &.active {
+      &:not(.pinned) {
+        @include open();
         .scrim {
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            width: 0;
-            height: 100%;
-            background-color: rgba($drawer-overlay-color, 0);
-            transition: background-color $animation-duration $animation-curve-default,
-                width 10ms linear $animation-duration;
-            z-index: $z-index-highest;
+          width: 100%;
+          background-color: rgba($drawer-overlay-color, $drawer-overlay-opacity);
+          transition: background-color $animation-duration $animation-curve-default;
         }
+      }
+    }
 
-        .drawerContent {
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            align-items: stretch;
-            overflow-x: hidden;
-            overflow-y: hidden;
+    // Larger than mobile width drawer
+    @media screen and (min-width: $layout-breakpoint-xs) {
+      &.pinned {
+        width: $navigation-drawer-desktop-width;
+        max-width: $navigation-drawer-desktop-width;
+      }
 
-            @include shadow-2dp();
-            background-color: $drawer-background-color;
-            border-right: 1px solid $drawer-border-color;
-            color: $drawer-text-color;
+      .drawerContent {
+        width: $navigation-drawer-desktop-width;
+        max-width: $navigation-drawer-desktop-width;
+      }
 
-            width: $navigation-drawer-mobile-width;
-            max-width: $navigation-drawer-max-mobile-width;
+      &.wide {
+        &.pinned {
+          width: $navigation-drawer-max-desktop-width;
+          max-width: $navigation-drawer-max-desktop-width;
+        }
 
-            pointer-events: none;
+        .drawerContent {
+          width: $navigation-drawer-max-desktop-width;
+          max-width: $navigation-drawer-max-desktop-width;
+        }
+      }
+    }
 
-            transform: translateX(-100%);
-            transition: transform $animation-duration $animation-curve-default;
+    // Permanent screen, ignore .active and make part of layout
+    @media screen and (min-width: $layout-breakpoint-sm) {
+      &.permanent-sm {
+        @include permanent();
+      }
+    }
 
-            &.scrollY {
-                overflow-y: auto;
-            }
-        }
+    @media screen and (min-width: $layout-breakpoint-md) {
+      &.permanent-md {
+        @include permanent();
+      }
+    }
 
-        &.pinned {
-            width: $navigation-drawer-mobile-width;
-            max-width: $navigation-drawer-max-mobile-width;
+    @media screen and (min-width: $layout-breakpoint-lg) {
+      &.permanent-lg {
+        @include permanent();
+      }
+    }
 
-            @include open();
-        }
+    @media screen and (min-width: $layout-breakpoint-xl) {
+      &.permanent-xl {
+        @include permanent();
+      }
+    }
 
-        &.active {
-            &:not(.pinned) {
-                .scrim {
-                    width: 100%;
-                    background-color: rgba($drawer-overlay-color, $drawer-overlay-opacity);
-                    transition: background-color $animation-duration $animation-curve-default;
-                }
+    @media screen and (min-width: $layout-breakpoint-xxl) {
+      &.permanent-xxl {
+        @include permanent();
+      }
+    }
 
-                @include open();
-            }
-        }
+    @media screen and (min-width: $layout-breakpoint-xxxl) {
+      &.permanent-xxxl {
+        @include permanent();
+      }
+    }
+  }
 
-        // larger than mobile width drawer
-        @media screen and (min-width: $layout-breakpoint-xs) {
+  & .root {
+    .scrim {
+      z-index: $z-index-highest - 1;
+    }
+    & .root {
+      .scrim {
+        z-index: $z-index-highest - 2;
+      }
+    }
+  }
 
-            &.pinned {
-                width: $navigation-drawer-desktop-width;
-                max-width: $navigation-drawer-desktop-width;
-            }
+  .panel {
+    position: relative;
+    display: flex;
+    height: 100%;
+    flex: 1;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: space-between;
+    overflow-y: hidden;
 
-            .drawerContent {
-                width: $navigation-drawer-desktop-width;
-                max-width: $navigation-drawer-desktop-width;
-            }
+    &.scrollY {
+      overflow-y: auto;
+    }
+  }
+
+  .sidebar {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: $z-index-highest - 1;
+    width: 0;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    color: $drawer-text-color;
+    background-color: $drawer-background-color;
+    transition-timing-function: $animation-curve-default;
+    transition-duration: $animation-duration;
+    transition-property: width;
+
+    .sidebarContent {
+      display: flex;
+      height: 100%;
+      flex-direction: column;
+      align-items: stretch;
+      justify-content: space-between;
+      overflow-y: hidden;
+
+      &.scrollY {
+        overflow-y: auto;
+      }
+    }
 
-            &.wide {
+    $increments: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12);
 
-                &.pinned {
-                    width: $navigation-drawer-max-desktop-width;
-                    max-width: $navigation-drawer-max-desktop-width;
-                }
+    @each $increment in $increments {
+      &.width-#{$increment} {
+        $mobile: $standard-increment-mobile * $increment;
+        $desktop: $standard-increment-desktop * $increment;
 
-                .drawerContent {
-                    width: $navigation-drawer-max-desktop-width;
-                    max-width: $navigation-drawer-max-desktop-width;
-                }
-            }
+        .sidebarContent {
+          min-width: 100%;
         }
 
-        // permanent screen, ignore .active and make part of layout
-        @media screen and (min-width: $layout-breakpoint-sm) {
-            &.permanent-sm {
-                @include permanent();
-            }
+        &.pinned {
+          width: 100%;
         }
 
-        @media screen and (min-width: $layout-breakpoint-md) {
-            &.permanent-md {
-                @include permanent();
+        @if $increment < 10 {
+          @media screen and (min-width: $layout-breakpoint-xs) and (orientation: landscape) {
+            position: relative;
+
+            .sidebarContent {
+              min-width: $mobile;
             }
-        }
 
-        @media screen and (min-width: $layout-breakpoint-lg) {
-            &.permanent-lg {
-                @include permanent();
+            &.pinned {
+              width: $mobile;
             }
-        }
+          }
+
+          @media screen and (min-width: $layout-breakpoint-xs) and (orientation: portrait) {
+            position: relative;
 
-        @media screen and (min-width: $layout-breakpoint-xl) {
-            &.permanent-xl {
-                @include permanent();
+            .sidebarContent {
+              min-width: $desktop;
             }
-        }
 
-        @media screen and (min-width: $layout-breakpoint-xxl) {
-            &.permanent-xxl {
-                @include permanent();
+            &.pinned {
+              width: $desktop;
             }
+          }
         }
 
-        @media screen and (min-width: $layout-breakpoint-xxxl) {
-            &.permanent-xxxl {
-                @include permanent();
+        @if $increment < 11 {
+          @media screen and (min-width: $layout-breakpoint-sm-tablet) {
+            position: relative;
+
+            .sidebarContent {
+              min-width: $desktop;
             }
-        }
-    }
 
-    & .root {
-        .scrim {
-            z-index: $z-index-highest - 1;
-        }
-        & .root {
-            .scrim {
-                z-index: $z-index-highest - 2;
+            &.pinned {
+              width: $desktop;
             }
+          }
         }
-    }
 
-    .panel {
-        flex: 1;
-        height: 100%;
-        overflow-y: hidden;
-        position: relative;
+        @media screen and (min-width: $layout-breakpoint-sm) {
+          position: relative;
 
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        align-items: stretch;
+          .sidebarContent {
+            min-width: $desktop;
+          }
 
-        &.scrollY {
-            overflow-y: auto;
+          &.pinned {
+            width: $desktop;
+          }
         }
+      }
     }
 
-    .sidebar {
-        height: 100%;
-        overflow-y: hidden;
-        overflow-x: hidden;
-        width: 0;
-        transition-timing-function: $animation-curve-default;
-        transition-duration: $animation-duration;
-        transition-property: width;
 
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        z-index: $z-index-highest - 1;
+    $percentages: (25, 33, 50, 66, 75);
 
-        background-color: $drawer-background-color;
-        color: $drawer-text-color;
+    &.width-100 {
+      position: absolute;
 
-        .sidebarContent {
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            align-items: stretch;
-            height: 100%;
-
-            overflow-y: hidden;
-            &.scrollY {
-                overflow-y: auto;
-            }
-        }
-
-        $increments: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12);
-
-        @each $increment in $increments {
-            &.width-#{$increment} {
-                $mobile: $standard-increment-mobile * $increment;
-                $desktop: $standard-increment-desktop * $increment;
-
-                .sidebarContent {
-                    min-width: 100%;
-                }
-
-                &.pinned {
-                    width: 100%;
-                }
-
-                @if $increment < 10 {
-                    @media screen and (min-width: $layout-breakpoint-xs) and (orientation: landscape) {
-                        position: relative;
-                        .sidebarContent {
-                            min-width: $mobile;
-                        }
-
-                        &.pinned {
-                            width: $mobile;
-                        }
-                    }
-
-                    @media screen and (min-width: $layout-breakpoint-xs) and (orientation: portrait) {
-                        position: relative;
-                        .sidebarContent {
-                            min-width: $desktop;
-                        }
-
-                        &.pinned {
-                            width: $desktop;
-                        }
-                    }
-                }
-
-                @if $increment < 11 {
-                    @media screen and (min-width: $layout-breakpoint-sm-tablet) {
-                        position: relative;
-
-                        .sidebarContent {
-                            min-width: $desktop;
-                        }
-
-                        &.pinned {
-                            width: $desktop;
-                        }
-                    }
-                }
-
-                @media screen and (min-width: $layout-breakpoint-sm) {
-                    position: relative;
-
-                    .sidebarContent {
-                        min-width: $desktop;
-                    }
-
-                    &.pinned {
-                        width: $desktop;
-                    }
-                }
-            }
-        }
+      .sidebarContent {
+        min-width: 100%;
+      }
 
+      &.pinned {
+        width: 100%;
+      }
+    }
 
-        $percentages: (25, 33, 50, 66, 75);
-        &.width-100 {
-            position: absolute;
+    @each $pct in $percentages {
+      &.width-#{$pct} {
+        position: absolute;
 
-            .sidebarContent {
-                min-width: 100%;
-            }
+        .sidebarContent {
+          min-width: 100%;
+        }
 
-            &.pinned {
-                width: 100%;
-            }
+        &.pinned {
+          width: 100%;
         }
-        @each $pct in $percentages {
-            &.width-#{$pct} {
-                position: absolute;
+      }
+    }
 
-                .sidebarContent {
-                    min-width: 100%;
-                }
+    @media screen and (min-width: $layout-breakpoint-sm-tablet) {
+      @each $pct in $percentages {
+        &.width-#{$pct} {
+          position: relative;
 
-                &.pinned {
-                    width: 100%;
-                }
-            }
-        }
-        @media screen and (min-width: $layout-breakpoint-sm-tablet) {
-            @each $pct in $percentages {
-                &.width-#{$pct} {
-                    position: relative;
-
-                    .sidebarContent {
-                        min-width: $pct * 1%;
-                    }
-
-                    &.pinned {
-                        width: $pct * 1%;
-                    }
-                }
-            }
+          .sidebarContent {
+            min-width: $pct * 1%;
+          }
+
+          &.pinned {
+            width: $pct * 1%;
+          }
         }
+      }
     }
+  }
 }

From 0cb8d8bdb2f7587f2d4a4770c10346a9d2ef43ad Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 10 Apr 2016 21:04:49 +0200
Subject: [PATCH 0478/1024] =?UTF-8?q?Get=20rid=20of=20jsx=20extensions=20?=
 =?UTF-8?q?=F0=9F=94=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .bumpedrc                                     |  3 --
 components/_globals.scss                      | 32 +++++++++----------
 components/app_bar/{AppBar.jsx => AppBar.js}  |  0
 components/app_bar/style.scss                 |  2 +-
 .../{Autocomplete.jsx => Autocomplete.js}     |  0
 components/avatar/{Avatar.jsx => Avatar.js}   |  0
 components/button/{Button.jsx => Button.js}   |  0
 .../button/{IconButton.jsx => IconButton.js}  |  0
 .../{index.spec.jsx => index.spec.js}         |  0
 components/card/{Card.jsx => Card.js}         |  0
 .../card/{CardActions.jsx => CardActions.js}  |  0
 .../card/{CardMedia.jsx => CardMedia.js}      |  0
 components/card/{CardText.jsx => CardText.js} |  0
 .../card/{CardTitle.jsx => CardTitle.js}      |  0
 components/checkbox/{Check.jsx => Check.js}   |  0
 .../checkbox/{Checkbox.jsx => Checkbox.js}    |  0
 components/chip/{Chip.jsx => Chip.js}         |  0
 .../date_picker/{Calendar.jsx => Calendar.js} |  0
 .../{CalendarDay.jsx => CalendarDay.js}       |  0
 .../{CalendarMonth.jsx => CalendarMonth.js}   |  0
 .../{DatePicker.jsx => DatePicker.js}         |  0
 ...tePickerDialog.jsx => DatePickerDialog.js} |  0
 components/dialog/{Dialog.jsx => Dialog.js}   |  0
 components/drawer/{Drawer.jsx => Drawer.js}   |  0
 .../dropdown/{Dropdown.jsx => Dropdown.js}    |  0
 .../font_icon/{FontIcon.jsx => FontIcon.js}   |  0
 components/form/{Form.jsx => Form.js}         |  0
 components/input/{Input.jsx => Input.js}      |  0
 components/layout/{Layout.jsx => Layout.js}   |  0
 .../layout/{NavDrawer.jsx => NavDrawer.js}    |  0
 components/layout/{Panel.jsx => Panel.js}     |  0
 components/layout/{Sidebar.jsx => Sidebar.js} |  0
 components/link/{Link.jsx => Link.js}         |  0
 components/list/{List.jsx => List.js}         |  0
 .../{ListCheckbox.jsx => ListCheckbox.js}     |  0
 .../list/{ListDivider.jsx => ListDivider.js}  |  0
 components/list/{ListItem.jsx => ListItem.js} |  0
 .../{ListItemAction.jsx => ListItemAction.js} |  0
 ...ListItemActions.jsx => ListItemActions.js} |  0
 ...ListItemContent.jsx => ListItemContent.js} |  0
 .../{ListItemLayout.jsx => ListItemLayout.js} |  0
 .../{ListItemText.jsx => ListItemText.js}     |  0
 .../{ListSubHeader.jsx => ListSubHeader.js}   |  0
 components/menu/{IconMenu.jsx => IconMenu.js} |  0
 components/menu/{Menu.jsx => Menu.js}         |  0
 .../menu/{MenuDivider.jsx => MenuDivider.js}  |  0
 components/menu/{MenuItem.jsx => MenuItem.js} |  0
 .../{Navigation.jsx => Navigation.js}         |  0
 .../overlay/{Overlay.jsx => Overlay.js}       |  0
 .../{ProgressBar.jsx => ProgressBar.js}       |  0
 .../{index.spec.jsx => index.spec.js}         |  0
 components/radio/{Radio.jsx => Radio.js}      |  0
 .../radio/{RadioButton.jsx => RadioButton.js} |  0
 .../radio/{RadioGroup.jsx => RadioGroup.js}   |  0
 components/ripple/{Ripple.jsx => Ripple.js}   |  0
 components/slider/{Slider.jsx => Slider.js}   |  0
 .../{index.spec.jsx => index.spec.js}         |  0
 .../snackbar/{Snackbar.jsx => Snackbar.js}    |  0
 components/switch/{Switch.jsx => Switch.js}   |  0
 components/switch/{Thumb.jsx => Thumb.js}     |  0
 components/table/{Table.jsx => Table.js}      |  0
 .../table/{TableHead.jsx => TableHead.js}     |  0
 .../table/{TableRow.jsx => TableRow.js}       |  0
 components/tabs/{Tab.jsx => Tab.js}           |  0
 .../tabs/{TabContent.jsx => TabContent.js}    |  0
 components/tabs/{Tabs.jsx => Tabs.js}         |  0
 .../{index.spec.jsx => index.spec.js}         |  0
 .../time_picker/{Clock.jsx => Clock.js}       |  0
 .../{ClockFace.jsx => ClockFace.js}           |  0
 .../{ClockHand.jsx => ClockHand.js}           |  0
 .../{ClockHours.jsx => ClockHours.js}         |  0
 .../{ClockMinutes.jsx => ClockMinutes.js}     |  0
 .../{TimePicker.jsx => TimePicker.js}         |  0
 ...mePickerDialog.jsx => TimePickerDialog.js} |  0
 .../tooltip/{Tooltip.jsx => Tooltip.js}       |  0
 .../components/appbar/{index.jsx => index.js} |  0
 .../components/editor/{index.jsx => index.js} |  0
 .../layout/home/{index.jsx => index.js}       |  0
 .../layout/install/{index.jsx => index.js}    |  0
 .../{navigation.jsx => navigation.js}         |  0
 .../{playground.jsx => playground.js}         |  0
 .../layout/main/{index.jsx => index.js}       |  4 +--
 docs/app/components/layout/main/style.scss    |  2 +-
 .../components/logo/{index.jsx => index.js}   |  0
 .../markdown/{index.jsx => index.js}          |  0
 .../navigation/{index.jsx => index.js}        |  0
 .../preview/{index.jsx => index.js}           |  0
 docs/app/{index.jsx => index.js}              |  0
 docs/webpack.config.development.js            |  6 ++--
 docs/webpack.config.production.js             |  6 ++--
 package.json                                  |  2 +-
 .../{autocomplete.jsx => autocomplete.js}     |  0
 spec/components/{avatar.jsx => avatar.js}     |  0
 spec/components/{button.jsx => button.js}     |  0
 spec/components/{card.jsx => card.js}         |  0
 spec/components/{checkbox.jsx => checkbox.js} |  0
 spec/components/{chip.jsx => chip.js}         |  0
 spec/components/{dialog.jsx => dialog.js}     |  0
 spec/components/{drawer.jsx => drawer.js}     |  0
 spec/components/{dropdown.jsx => dropdown.js} |  0
 .../{font_icon.jsx => font_icon.js}           |  0
 spec/components/{form.jsx => form.js}         |  0
 .../{github_icon.jsx => github_icon.js}       |  0
 .../{icon_menu.jsx => icon_menu.js}           |  0
 spec/components/{input.jsx => input.js}       |  0
 spec/components/{layout.jsx => layout.js}     |  0
 spec/components/{link.jsx => link.js}         |  0
 spec/components/{list.jsx => list.js}         |  0
 spec/components/{menu.jsx => menu.js}         |  0
 .../{navigation.jsx => navigation.js}         |  0
 spec/components/{pickers.jsx => pickers.js}   |  0
 spec/components/{progress.jsx => progress.js} |  0
 spec/components/{radio.jsx => radio.js}       |  0
 spec/components/{slider.jsx => slider.js}     |  0
 spec/components/{snackbar.jsx => snackbar.js} |  0
 spec/components/{switch.jsx => switch.js}     |  0
 spec/components/{table.jsx => table.js}       |  0
 spec/components/{tabs.jsx => tabs.js}         |  0
 spec/components/{tooltip.jsx => tooltip.js}   |  0
 spec/{index.jsx => index.js}                  |  0
 spec/{root.jsx => root.js}                    |  0
 spec/style.scss                               |  3 +-
 tests.webpack.js                              |  2 +-
 tools/buildReadme.js                          |  2 +-
 webpack.config.development.js                 |  6 ++--
 webpack.config.test.js                        |  4 +--
 126 files changed, 35 insertions(+), 39 deletions(-)
 rename components/app_bar/{AppBar.jsx => AppBar.js} (100%)
 rename components/autocomplete/{Autocomplete.jsx => Autocomplete.js} (100%)
 rename components/avatar/{Avatar.jsx => Avatar.js} (100%)
 rename components/button/{Button.jsx => Button.js} (100%)
 rename components/button/{IconButton.jsx => IconButton.js} (100%)
 rename components/button/__test__/{index.spec.jsx => index.spec.js} (100%)
 rename components/card/{Card.jsx => Card.js} (100%)
 rename components/card/{CardActions.jsx => CardActions.js} (100%)
 rename components/card/{CardMedia.jsx => CardMedia.js} (100%)
 rename components/card/{CardText.jsx => CardText.js} (100%)
 rename components/card/{CardTitle.jsx => CardTitle.js} (100%)
 rename components/checkbox/{Check.jsx => Check.js} (100%)
 rename components/checkbox/{Checkbox.jsx => Checkbox.js} (100%)
 rename components/chip/{Chip.jsx => Chip.js} (100%)
 rename components/date_picker/{Calendar.jsx => Calendar.js} (100%)
 rename components/date_picker/{CalendarDay.jsx => CalendarDay.js} (100%)
 rename components/date_picker/{CalendarMonth.jsx => CalendarMonth.js} (100%)
 rename components/date_picker/{DatePicker.jsx => DatePicker.js} (100%)
 rename components/date_picker/{DatePickerDialog.jsx => DatePickerDialog.js} (100%)
 rename components/dialog/{Dialog.jsx => Dialog.js} (100%)
 rename components/drawer/{Drawer.jsx => Drawer.js} (100%)
 rename components/dropdown/{Dropdown.jsx => Dropdown.js} (100%)
 rename components/font_icon/{FontIcon.jsx => FontIcon.js} (100%)
 rename components/form/{Form.jsx => Form.js} (100%)
 rename components/input/{Input.jsx => Input.js} (100%)
 rename components/layout/{Layout.jsx => Layout.js} (100%)
 rename components/layout/{NavDrawer.jsx => NavDrawer.js} (100%)
 rename components/layout/{Panel.jsx => Panel.js} (100%)
 rename components/layout/{Sidebar.jsx => Sidebar.js} (100%)
 rename components/link/{Link.jsx => Link.js} (100%)
 rename components/list/{List.jsx => List.js} (100%)
 rename components/list/{ListCheckbox.jsx => ListCheckbox.js} (100%)
 rename components/list/{ListDivider.jsx => ListDivider.js} (100%)
 rename components/list/{ListItem.jsx => ListItem.js} (100%)
 rename components/list/{ListItemAction.jsx => ListItemAction.js} (100%)
 rename components/list/{ListItemActions.jsx => ListItemActions.js} (100%)
 rename components/list/{ListItemContent.jsx => ListItemContent.js} (100%)
 rename components/list/{ListItemLayout.jsx => ListItemLayout.js} (100%)
 rename components/list/{ListItemText.jsx => ListItemText.js} (100%)
 rename components/list/{ListSubHeader.jsx => ListSubHeader.js} (100%)
 rename components/menu/{IconMenu.jsx => IconMenu.js} (100%)
 rename components/menu/{Menu.jsx => Menu.js} (100%)
 rename components/menu/{MenuDivider.jsx => MenuDivider.js} (100%)
 rename components/menu/{MenuItem.jsx => MenuItem.js} (100%)
 rename components/navigation/{Navigation.jsx => Navigation.js} (100%)
 rename components/overlay/{Overlay.jsx => Overlay.js} (100%)
 rename components/progress_bar/{ProgressBar.jsx => ProgressBar.js} (100%)
 rename components/progress_bar/__test__/{index.spec.jsx => index.spec.js} (100%)
 rename components/radio/{Radio.jsx => Radio.js} (100%)
 rename components/radio/{RadioButton.jsx => RadioButton.js} (100%)
 rename components/radio/{RadioGroup.jsx => RadioGroup.js} (100%)
 rename components/ripple/{Ripple.jsx => Ripple.js} (100%)
 rename components/slider/{Slider.jsx => Slider.js} (100%)
 rename components/slider/__tests__/{index.spec.jsx => index.spec.js} (100%)
 rename components/snackbar/{Snackbar.jsx => Snackbar.js} (100%)
 rename components/switch/{Switch.jsx => Switch.js} (100%)
 rename components/switch/{Thumb.jsx => Thumb.js} (100%)
 rename components/table/{Table.jsx => Table.js} (100%)
 rename components/table/{TableHead.jsx => TableHead.js} (100%)
 rename components/table/{TableRow.jsx => TableRow.js} (100%)
 rename components/tabs/{Tab.jsx => Tab.js} (100%)
 rename components/tabs/{TabContent.jsx => TabContent.js} (100%)
 rename components/tabs/{Tabs.jsx => Tabs.js} (100%)
 rename components/tabs/__tests__/{index.spec.jsx => index.spec.js} (100%)
 rename components/time_picker/{Clock.jsx => Clock.js} (100%)
 rename components/time_picker/{ClockFace.jsx => ClockFace.js} (100%)
 rename components/time_picker/{ClockHand.jsx => ClockHand.js} (100%)
 rename components/time_picker/{ClockHours.jsx => ClockHours.js} (100%)
 rename components/time_picker/{ClockMinutes.jsx => ClockMinutes.js} (100%)
 rename components/time_picker/{TimePicker.jsx => TimePicker.js} (100%)
 rename components/time_picker/{TimePickerDialog.jsx => TimePickerDialog.js} (100%)
 rename components/tooltip/{Tooltip.jsx => Tooltip.js} (100%)
 rename docs/app/components/appbar/{index.jsx => index.js} (100%)
 rename docs/app/components/editor/{index.jsx => index.js} (100%)
 rename docs/app/components/layout/home/{index.jsx => index.js} (100%)
 rename docs/app/components/layout/install/{index.jsx => index.js} (100%)
 rename docs/app/components/layout/main/components/{navigation.jsx => navigation.js} (100%)
 rename docs/app/components/layout/main/components/{playground.jsx => playground.js} (100%)
 rename docs/app/components/layout/main/{index.jsx => index.js} (95%)
 rename docs/app/components/logo/{index.jsx => index.js} (100%)
 rename docs/app/components/markdown/{index.jsx => index.js} (100%)
 rename docs/app/components/navigation/{index.jsx => index.js} (100%)
 rename docs/app/components/preview/{index.jsx => index.js} (100%)
 rename docs/app/{index.jsx => index.js} (100%)
 rename spec/components/{autocomplete.jsx => autocomplete.js} (100%)
 rename spec/components/{avatar.jsx => avatar.js} (100%)
 rename spec/components/{button.jsx => button.js} (100%)
 rename spec/components/{card.jsx => card.js} (100%)
 rename spec/components/{checkbox.jsx => checkbox.js} (100%)
 rename spec/components/{chip.jsx => chip.js} (100%)
 rename spec/components/{dialog.jsx => dialog.js} (100%)
 rename spec/components/{drawer.jsx => drawer.js} (100%)
 rename spec/components/{dropdown.jsx => dropdown.js} (100%)
 rename spec/components/{font_icon.jsx => font_icon.js} (100%)
 rename spec/components/{form.jsx => form.js} (100%)
 rename spec/components/{github_icon.jsx => github_icon.js} (100%)
 rename spec/components/{icon_menu.jsx => icon_menu.js} (100%)
 rename spec/components/{input.jsx => input.js} (100%)
 rename spec/components/{layout.jsx => layout.js} (100%)
 rename spec/components/{link.jsx => link.js} (100%)
 rename spec/components/{list.jsx => list.js} (100%)
 rename spec/components/{menu.jsx => menu.js} (100%)
 rename spec/components/{navigation.jsx => navigation.js} (100%)
 rename spec/components/{pickers.jsx => pickers.js} (100%)
 rename spec/components/{progress.jsx => progress.js} (100%)
 rename spec/components/{radio.jsx => radio.js} (100%)
 rename spec/components/{slider.jsx => slider.js} (100%)
 rename spec/components/{snackbar.jsx => snackbar.js} (100%)
 rename spec/components/{switch.jsx => switch.js} (100%)
 rename spec/components/{table.jsx => table.js} (100%)
 rename spec/components/{tabs.jsx => tabs.js} (100%)
 rename spec/components/{tooltip.jsx => tooltip.js} (100%)
 rename spec/{index.jsx => index.js} (100%)
 rename spec/{root.jsx => root.js} (100%)

diff --git a/.bumpedrc b/.bumpedrc
index 023de6484..895c21575 100644
--- a/.bumpedrc
+++ b/.bumpedrc
@@ -3,9 +3,7 @@ files: [
 ]
 
 plugins:
-
   prerelease:
-
     'Linting config files':
       plugin: 'bumped-finepack'
 
@@ -18,7 +16,6 @@ plugins:
       command: 'npm run prepublish'
 
   postrelease:
-
     'Commiting new version':
       plugin: 'bumped-terminal'
       command: 'git add package.json && git commit package.json -m "$newVersion release" && git push origin master'
diff --git a/components/_globals.scss b/components/_globals.scss
index 24d9906b5..191881082 100644
--- a/components/_globals.scss
+++ b/components/_globals.scss
@@ -54,30 +54,28 @@ $z-index-normal: 1 !default;
 $z-index-low: -100 !default;
 $z-index-lower: -200 !default;
 
-
 //-- Breakpoints
 // height of app bar
 // https://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-keylines-spacing
-$standard-increment-mobile:                          (5.6 * $unit) !default;
-$standard-increment-desktop:                         (6.4 * $unit) !default;
+$standard-increment-mobile: (5.6 * $unit) !default;
+$standard-increment-desktop: (6.4 * $unit) !default;
 
 // https://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-baseline-grids
-$baseline-grid:                                      (0.8 * $unit) !default;
-$layout-gutter-width-sm:                      ($baseline-grid * 2) !default;
-$layout-gutter-width:                         ($baseline-grid * 3) !default;
-
+$baseline-grid: (0.8 * $unit) !default;
+$layout-gutter-width-sm: ($baseline-grid * 2) !default;
+$layout-gutter-width: ($baseline-grid * 3) !default;
 
 // https://www.google.com/design/spec/layout/responsive-ui.html#responsive-ui-breakpoints
 // 4 columns
-$layout-breakpoint-xxs:                               480px !default;
+$layout-breakpoint-xxs: 480px !default;
 // 8 columns
-$layout-breakpoint-xs:                                600px !default;
+$layout-breakpoint-xs: 600px !default;
 // 12 columns
-$layout-breakpoint-sm-tablet:                         720px !default;
-$layout-breakpoint-sm:                                840px !default;
-$layout-breakpoint-md:                                960px !default;
-$layout-breakpoint-lg-tablet:                        1024px !default;
-$layout-breakpoint-lg:                               1280px !default;
-$layout-breakpoint-xl:                               1440px !default;
-$layout-breakpoint-xxl:                              1600px !default;
-$layout-breakpoint-xxxl:                             1920px !default;
+$layout-breakpoint-sm-tablet: 720px !default;
+$layout-breakpoint-sm: 840px !default;
+$layout-breakpoint-md: 960px !default;
+$layout-breakpoint-lg-tablet: 1024px !default;
+$layout-breakpoint-lg: 1280px !default;
+$layout-breakpoint-xl: 1440px !default;
+$layout-breakpoint-xxl: 1600px !default;
+$layout-breakpoint-xxxl: 1920px !default;
diff --git a/components/app_bar/AppBar.jsx b/components/app_bar/AppBar.js
similarity index 100%
rename from components/app_bar/AppBar.jsx
rename to components/app_bar/AppBar.js
diff --git a/components/app_bar/style.scss b/components/app_bar/style.scss
index 6b17471ab..762232af2 100644
--- a/components/app_bar/style.scss
+++ b/components/app_bar/style.scss
@@ -19,7 +19,7 @@
     top: 0;
     right: 0;
     left: 0;
-    z-index: $z-index-high;
+    z-index: $z-index-highest;
   }
 
   a {
diff --git a/components/autocomplete/Autocomplete.jsx b/components/autocomplete/Autocomplete.js
similarity index 100%
rename from components/autocomplete/Autocomplete.jsx
rename to components/autocomplete/Autocomplete.js
diff --git a/components/avatar/Avatar.jsx b/components/avatar/Avatar.js
similarity index 100%
rename from components/avatar/Avatar.jsx
rename to components/avatar/Avatar.js
diff --git a/components/button/Button.jsx b/components/button/Button.js
similarity index 100%
rename from components/button/Button.jsx
rename to components/button/Button.js
diff --git a/components/button/IconButton.jsx b/components/button/IconButton.js
similarity index 100%
rename from components/button/IconButton.jsx
rename to components/button/IconButton.js
diff --git a/components/button/__test__/index.spec.jsx b/components/button/__test__/index.spec.js
similarity index 100%
rename from components/button/__test__/index.spec.jsx
rename to components/button/__test__/index.spec.js
diff --git a/components/card/Card.jsx b/components/card/Card.js
similarity index 100%
rename from components/card/Card.jsx
rename to components/card/Card.js
diff --git a/components/card/CardActions.jsx b/components/card/CardActions.js
similarity index 100%
rename from components/card/CardActions.jsx
rename to components/card/CardActions.js
diff --git a/components/card/CardMedia.jsx b/components/card/CardMedia.js
similarity index 100%
rename from components/card/CardMedia.jsx
rename to components/card/CardMedia.js
diff --git a/components/card/CardText.jsx b/components/card/CardText.js
similarity index 100%
rename from components/card/CardText.jsx
rename to components/card/CardText.js
diff --git a/components/card/CardTitle.jsx b/components/card/CardTitle.js
similarity index 100%
rename from components/card/CardTitle.jsx
rename to components/card/CardTitle.js
diff --git a/components/checkbox/Check.jsx b/components/checkbox/Check.js
similarity index 100%
rename from components/checkbox/Check.jsx
rename to components/checkbox/Check.js
diff --git a/components/checkbox/Checkbox.jsx b/components/checkbox/Checkbox.js
similarity index 100%
rename from components/checkbox/Checkbox.jsx
rename to components/checkbox/Checkbox.js
diff --git a/components/chip/Chip.jsx b/components/chip/Chip.js
similarity index 100%
rename from components/chip/Chip.jsx
rename to components/chip/Chip.js
diff --git a/components/date_picker/Calendar.jsx b/components/date_picker/Calendar.js
similarity index 100%
rename from components/date_picker/Calendar.jsx
rename to components/date_picker/Calendar.js
diff --git a/components/date_picker/CalendarDay.jsx b/components/date_picker/CalendarDay.js
similarity index 100%
rename from components/date_picker/CalendarDay.jsx
rename to components/date_picker/CalendarDay.js
diff --git a/components/date_picker/CalendarMonth.jsx b/components/date_picker/CalendarMonth.js
similarity index 100%
rename from components/date_picker/CalendarMonth.jsx
rename to components/date_picker/CalendarMonth.js
diff --git a/components/date_picker/DatePicker.jsx b/components/date_picker/DatePicker.js
similarity index 100%
rename from components/date_picker/DatePicker.jsx
rename to components/date_picker/DatePicker.js
diff --git a/components/date_picker/DatePickerDialog.jsx b/components/date_picker/DatePickerDialog.js
similarity index 100%
rename from components/date_picker/DatePickerDialog.jsx
rename to components/date_picker/DatePickerDialog.js
diff --git a/components/dialog/Dialog.jsx b/components/dialog/Dialog.js
similarity index 100%
rename from components/dialog/Dialog.jsx
rename to components/dialog/Dialog.js
diff --git a/components/drawer/Drawer.jsx b/components/drawer/Drawer.js
similarity index 100%
rename from components/drawer/Drawer.jsx
rename to components/drawer/Drawer.js
diff --git a/components/dropdown/Dropdown.jsx b/components/dropdown/Dropdown.js
similarity index 100%
rename from components/dropdown/Dropdown.jsx
rename to components/dropdown/Dropdown.js
diff --git a/components/font_icon/FontIcon.jsx b/components/font_icon/FontIcon.js
similarity index 100%
rename from components/font_icon/FontIcon.jsx
rename to components/font_icon/FontIcon.js
diff --git a/components/form/Form.jsx b/components/form/Form.js
similarity index 100%
rename from components/form/Form.jsx
rename to components/form/Form.js
diff --git a/components/input/Input.jsx b/components/input/Input.js
similarity index 100%
rename from components/input/Input.jsx
rename to components/input/Input.js
diff --git a/components/layout/Layout.jsx b/components/layout/Layout.js
similarity index 100%
rename from components/layout/Layout.jsx
rename to components/layout/Layout.js
diff --git a/components/layout/NavDrawer.jsx b/components/layout/NavDrawer.js
similarity index 100%
rename from components/layout/NavDrawer.jsx
rename to components/layout/NavDrawer.js
diff --git a/components/layout/Panel.jsx b/components/layout/Panel.js
similarity index 100%
rename from components/layout/Panel.jsx
rename to components/layout/Panel.js
diff --git a/components/layout/Sidebar.jsx b/components/layout/Sidebar.js
similarity index 100%
rename from components/layout/Sidebar.jsx
rename to components/layout/Sidebar.js
diff --git a/components/link/Link.jsx b/components/link/Link.js
similarity index 100%
rename from components/link/Link.jsx
rename to components/link/Link.js
diff --git a/components/list/List.jsx b/components/list/List.js
similarity index 100%
rename from components/list/List.jsx
rename to components/list/List.js
diff --git a/components/list/ListCheckbox.jsx b/components/list/ListCheckbox.js
similarity index 100%
rename from components/list/ListCheckbox.jsx
rename to components/list/ListCheckbox.js
diff --git a/components/list/ListDivider.jsx b/components/list/ListDivider.js
similarity index 100%
rename from components/list/ListDivider.jsx
rename to components/list/ListDivider.js
diff --git a/components/list/ListItem.jsx b/components/list/ListItem.js
similarity index 100%
rename from components/list/ListItem.jsx
rename to components/list/ListItem.js
diff --git a/components/list/ListItemAction.jsx b/components/list/ListItemAction.js
similarity index 100%
rename from components/list/ListItemAction.jsx
rename to components/list/ListItemAction.js
diff --git a/components/list/ListItemActions.jsx b/components/list/ListItemActions.js
similarity index 100%
rename from components/list/ListItemActions.jsx
rename to components/list/ListItemActions.js
diff --git a/components/list/ListItemContent.jsx b/components/list/ListItemContent.js
similarity index 100%
rename from components/list/ListItemContent.jsx
rename to components/list/ListItemContent.js
diff --git a/components/list/ListItemLayout.jsx b/components/list/ListItemLayout.js
similarity index 100%
rename from components/list/ListItemLayout.jsx
rename to components/list/ListItemLayout.js
diff --git a/components/list/ListItemText.jsx b/components/list/ListItemText.js
similarity index 100%
rename from components/list/ListItemText.jsx
rename to components/list/ListItemText.js
diff --git a/components/list/ListSubHeader.jsx b/components/list/ListSubHeader.js
similarity index 100%
rename from components/list/ListSubHeader.jsx
rename to components/list/ListSubHeader.js
diff --git a/components/menu/IconMenu.jsx b/components/menu/IconMenu.js
similarity index 100%
rename from components/menu/IconMenu.jsx
rename to components/menu/IconMenu.js
diff --git a/components/menu/Menu.jsx b/components/menu/Menu.js
similarity index 100%
rename from components/menu/Menu.jsx
rename to components/menu/Menu.js
diff --git a/components/menu/MenuDivider.jsx b/components/menu/MenuDivider.js
similarity index 100%
rename from components/menu/MenuDivider.jsx
rename to components/menu/MenuDivider.js
diff --git a/components/menu/MenuItem.jsx b/components/menu/MenuItem.js
similarity index 100%
rename from components/menu/MenuItem.jsx
rename to components/menu/MenuItem.js
diff --git a/components/navigation/Navigation.jsx b/components/navigation/Navigation.js
similarity index 100%
rename from components/navigation/Navigation.jsx
rename to components/navigation/Navigation.js
diff --git a/components/overlay/Overlay.jsx b/components/overlay/Overlay.js
similarity index 100%
rename from components/overlay/Overlay.jsx
rename to components/overlay/Overlay.js
diff --git a/components/progress_bar/ProgressBar.jsx b/components/progress_bar/ProgressBar.js
similarity index 100%
rename from components/progress_bar/ProgressBar.jsx
rename to components/progress_bar/ProgressBar.js
diff --git a/components/progress_bar/__test__/index.spec.jsx b/components/progress_bar/__test__/index.spec.js
similarity index 100%
rename from components/progress_bar/__test__/index.spec.jsx
rename to components/progress_bar/__test__/index.spec.js
diff --git a/components/radio/Radio.jsx b/components/radio/Radio.js
similarity index 100%
rename from components/radio/Radio.jsx
rename to components/radio/Radio.js
diff --git a/components/radio/RadioButton.jsx b/components/radio/RadioButton.js
similarity index 100%
rename from components/radio/RadioButton.jsx
rename to components/radio/RadioButton.js
diff --git a/components/radio/RadioGroup.jsx b/components/radio/RadioGroup.js
similarity index 100%
rename from components/radio/RadioGroup.jsx
rename to components/radio/RadioGroup.js
diff --git a/components/ripple/Ripple.jsx b/components/ripple/Ripple.js
similarity index 100%
rename from components/ripple/Ripple.jsx
rename to components/ripple/Ripple.js
diff --git a/components/slider/Slider.jsx b/components/slider/Slider.js
similarity index 100%
rename from components/slider/Slider.jsx
rename to components/slider/Slider.js
diff --git a/components/slider/__tests__/index.spec.jsx b/components/slider/__tests__/index.spec.js
similarity index 100%
rename from components/slider/__tests__/index.spec.jsx
rename to components/slider/__tests__/index.spec.js
diff --git a/components/snackbar/Snackbar.jsx b/components/snackbar/Snackbar.js
similarity index 100%
rename from components/snackbar/Snackbar.jsx
rename to components/snackbar/Snackbar.js
diff --git a/components/switch/Switch.jsx b/components/switch/Switch.js
similarity index 100%
rename from components/switch/Switch.jsx
rename to components/switch/Switch.js
diff --git a/components/switch/Thumb.jsx b/components/switch/Thumb.js
similarity index 100%
rename from components/switch/Thumb.jsx
rename to components/switch/Thumb.js
diff --git a/components/table/Table.jsx b/components/table/Table.js
similarity index 100%
rename from components/table/Table.jsx
rename to components/table/Table.js
diff --git a/components/table/TableHead.jsx b/components/table/TableHead.js
similarity index 100%
rename from components/table/TableHead.jsx
rename to components/table/TableHead.js
diff --git a/components/table/TableRow.jsx b/components/table/TableRow.js
similarity index 100%
rename from components/table/TableRow.jsx
rename to components/table/TableRow.js
diff --git a/components/tabs/Tab.jsx b/components/tabs/Tab.js
similarity index 100%
rename from components/tabs/Tab.jsx
rename to components/tabs/Tab.js
diff --git a/components/tabs/TabContent.jsx b/components/tabs/TabContent.js
similarity index 100%
rename from components/tabs/TabContent.jsx
rename to components/tabs/TabContent.js
diff --git a/components/tabs/Tabs.jsx b/components/tabs/Tabs.js
similarity index 100%
rename from components/tabs/Tabs.jsx
rename to components/tabs/Tabs.js
diff --git a/components/tabs/__tests__/index.spec.jsx b/components/tabs/__tests__/index.spec.js
similarity index 100%
rename from components/tabs/__tests__/index.spec.jsx
rename to components/tabs/__tests__/index.spec.js
diff --git a/components/time_picker/Clock.jsx b/components/time_picker/Clock.js
similarity index 100%
rename from components/time_picker/Clock.jsx
rename to components/time_picker/Clock.js
diff --git a/components/time_picker/ClockFace.jsx b/components/time_picker/ClockFace.js
similarity index 100%
rename from components/time_picker/ClockFace.jsx
rename to components/time_picker/ClockFace.js
diff --git a/components/time_picker/ClockHand.jsx b/components/time_picker/ClockHand.js
similarity index 100%
rename from components/time_picker/ClockHand.jsx
rename to components/time_picker/ClockHand.js
diff --git a/components/time_picker/ClockHours.jsx b/components/time_picker/ClockHours.js
similarity index 100%
rename from components/time_picker/ClockHours.jsx
rename to components/time_picker/ClockHours.js
diff --git a/components/time_picker/ClockMinutes.jsx b/components/time_picker/ClockMinutes.js
similarity index 100%
rename from components/time_picker/ClockMinutes.jsx
rename to components/time_picker/ClockMinutes.js
diff --git a/components/time_picker/TimePicker.jsx b/components/time_picker/TimePicker.js
similarity index 100%
rename from components/time_picker/TimePicker.jsx
rename to components/time_picker/TimePicker.js
diff --git a/components/time_picker/TimePickerDialog.jsx b/components/time_picker/TimePickerDialog.js
similarity index 100%
rename from components/time_picker/TimePickerDialog.jsx
rename to components/time_picker/TimePickerDialog.js
diff --git a/components/tooltip/Tooltip.jsx b/components/tooltip/Tooltip.js
similarity index 100%
rename from components/tooltip/Tooltip.jsx
rename to components/tooltip/Tooltip.js
diff --git a/docs/app/components/appbar/index.jsx b/docs/app/components/appbar/index.js
similarity index 100%
rename from docs/app/components/appbar/index.jsx
rename to docs/app/components/appbar/index.js
diff --git a/docs/app/components/editor/index.jsx b/docs/app/components/editor/index.js
similarity index 100%
rename from docs/app/components/editor/index.jsx
rename to docs/app/components/editor/index.js
diff --git a/docs/app/components/layout/home/index.jsx b/docs/app/components/layout/home/index.js
similarity index 100%
rename from docs/app/components/layout/home/index.jsx
rename to docs/app/components/layout/home/index.js
diff --git a/docs/app/components/layout/install/index.jsx b/docs/app/components/layout/install/index.js
similarity index 100%
rename from docs/app/components/layout/install/index.jsx
rename to docs/app/components/layout/install/index.js
diff --git a/docs/app/components/layout/main/components/navigation.jsx b/docs/app/components/layout/main/components/navigation.js
similarity index 100%
rename from docs/app/components/layout/main/components/navigation.jsx
rename to docs/app/components/layout/main/components/navigation.js
diff --git a/docs/app/components/layout/main/components/playground.jsx b/docs/app/components/layout/main/components/playground.js
similarity index 100%
rename from docs/app/components/layout/main/components/playground.jsx
rename to docs/app/components/layout/main/components/playground.js
diff --git a/docs/app/components/layout/main/index.jsx b/docs/app/components/layout/main/index.js
similarity index 95%
rename from docs/app/components/layout/main/index.jsx
rename to docs/app/components/layout/main/index.js
index 66d9b2fb1..7f81cdf1a 100644
--- a/docs/app/components/layout/main/index.jsx
+++ b/docs/app/components/layout/main/index.js
@@ -3,8 +3,8 @@ import ReactDOM from 'react-dom';
 import { Button } from 'react-toolbox';
 import Appbar from '../../../components/appbar';
 import Markdown from '../../../components/markdown';
-import Playground from './components/playground';
-import MainNavigation from './components/navigation';
+import Playground from './components/playground.js';
+import MainNavigation from './components/navigation.js';
 import BaseDocs from './modules/components.md';
 import components from './modules/components.js';
 import style from './style';
diff --git a/docs/app/components/layout/main/style.scss b/docs/app/components/layout/main/style.scss
index c8506d430..764d0e50a 100644
--- a/docs/app/components/layout/main/style.scss
+++ b/docs/app/components/layout/main/style.scss
@@ -15,7 +15,7 @@ hr {
   position: fixed;
   top: $appbar-height - ($button-floating-height / 2);
   right: $button-floating-height / 2;
-  z-index: $z-index-higher;
+  z-index: $z-index-highest;
 }
 
 .documentation {
diff --git a/docs/app/components/logo/index.jsx b/docs/app/components/logo/index.js
similarity index 100%
rename from docs/app/components/logo/index.jsx
rename to docs/app/components/logo/index.js
diff --git a/docs/app/components/markdown/index.jsx b/docs/app/components/markdown/index.js
similarity index 100%
rename from docs/app/components/markdown/index.jsx
rename to docs/app/components/markdown/index.js
diff --git a/docs/app/components/navigation/index.jsx b/docs/app/components/navigation/index.js
similarity index 100%
rename from docs/app/components/navigation/index.jsx
rename to docs/app/components/navigation/index.js
diff --git a/docs/app/components/preview/index.jsx b/docs/app/components/preview/index.js
similarity index 100%
rename from docs/app/components/preview/index.jsx
rename to docs/app/components/preview/index.js
diff --git a/docs/app/index.jsx b/docs/app/index.js
similarity index 100%
rename from docs/app/index.jsx
rename to docs/app/index.js
diff --git a/docs/webpack.config.development.js b/docs/webpack.config.development.js
index b9d728319..906bf0bc7 100644
--- a/docs/webpack.config.development.js
+++ b/docs/webpack.config.development.js
@@ -9,7 +9,7 @@ module.exports = {
 	devtool: 'inline-source-map',
   entry: [
     'webpack-hot-middleware/client',
-    './app/index.jsx'
+    './app/index.js'
   ],
   output: {
     path: path.join(__dirname, 'build'),
@@ -17,7 +17,7 @@ module.exports = {
     publicPath: '/'
   },
   resolve: {
-    extensions: ['', '.jsx', '.scss', '.js', '.json', '.md'],
+    extensions: ['', '.scss', '.js', '.json', '.md'],
     packageMains: ['browser', 'web', 'browserify', 'main', 'style'],
     alias: {
       'react-toolbox': path.resolve(__dirname + './../components')
@@ -32,7 +32,7 @@ module.exports = {
   module: {
     loaders: [
       {
-        test: /\.(js|jsx)$/,
+        test: /\.js$/,
         exclude: /(node_modules)/,
         loader: 'babel'
       }, {
diff --git a/docs/webpack.config.production.js b/docs/webpack.config.production.js
index 0253d450a..5f0442c32 100644
--- a/docs/webpack.config.production.js
+++ b/docs/webpack.config.production.js
@@ -7,13 +7,13 @@ const TransferWebpackPlugin = require('transfer-webpack-plugin');
 
 module.exports = {
   context: __dirname,
-  entry: ['./app/index.jsx'],
+  entry: ['./app/index.js'],
   output: {
     path: path.join(__dirname, 'build'),
     filename: 'docs.js'
   },
   resolve: {
-    extensions: ['', '.jsx', '.scss', '.js', '.json', '.md'],
+    extensions: ['', '.scss', '.js', '.json', '.md'],
     packageMains: ['browser', 'web', 'browserify', 'main', 'style'],
     alias: {
       'react-toolbox': path.resolve(__dirname + './../components')
@@ -28,7 +28,7 @@ module.exports = {
   module: {
     loaders: [
       {
-        test: /\.(js|jsx)$/,
+        test: /\.js$/,
         exclude: /(node_modules)/,
         loader: 'babel'
       }, {
diff --git a/package.json b/package.json
index c10407383..d53279124 100644
--- a/package.json
+++ b/package.json
@@ -96,7 +96,7 @@
     "build": "cross-env NODE_ENV=production npm run babel && npm run sass",
     "clean": "rimraf ./lib",
     "lint": "npm run lint:js && npm run lint:scss",
-    "lint:js": "eslint ./ --ext .js,.jsx",
+    "lint:js": "eslint ./ --ext .js",
     "lint:scss": "sass-lint ./components/**/*.scss -v -i ./components/slider/style.scss",
     "patch": "bumped release patch",
     "prebuild": "npm run clean",
diff --git a/spec/components/autocomplete.jsx b/spec/components/autocomplete.js
similarity index 100%
rename from spec/components/autocomplete.jsx
rename to spec/components/autocomplete.js
diff --git a/spec/components/avatar.jsx b/spec/components/avatar.js
similarity index 100%
rename from spec/components/avatar.jsx
rename to spec/components/avatar.js
diff --git a/spec/components/button.jsx b/spec/components/button.js
similarity index 100%
rename from spec/components/button.jsx
rename to spec/components/button.js
diff --git a/spec/components/card.jsx b/spec/components/card.js
similarity index 100%
rename from spec/components/card.jsx
rename to spec/components/card.js
diff --git a/spec/components/checkbox.jsx b/spec/components/checkbox.js
similarity index 100%
rename from spec/components/checkbox.jsx
rename to spec/components/checkbox.js
diff --git a/spec/components/chip.jsx b/spec/components/chip.js
similarity index 100%
rename from spec/components/chip.jsx
rename to spec/components/chip.js
diff --git a/spec/components/dialog.jsx b/spec/components/dialog.js
similarity index 100%
rename from spec/components/dialog.jsx
rename to spec/components/dialog.js
diff --git a/spec/components/drawer.jsx b/spec/components/drawer.js
similarity index 100%
rename from spec/components/drawer.jsx
rename to spec/components/drawer.js
diff --git a/spec/components/dropdown.jsx b/spec/components/dropdown.js
similarity index 100%
rename from spec/components/dropdown.jsx
rename to spec/components/dropdown.js
diff --git a/spec/components/font_icon.jsx b/spec/components/font_icon.js
similarity index 100%
rename from spec/components/font_icon.jsx
rename to spec/components/font_icon.js
diff --git a/spec/components/form.jsx b/spec/components/form.js
similarity index 100%
rename from spec/components/form.jsx
rename to spec/components/form.js
diff --git a/spec/components/github_icon.jsx b/spec/components/github_icon.js
similarity index 100%
rename from spec/components/github_icon.jsx
rename to spec/components/github_icon.js
diff --git a/spec/components/icon_menu.jsx b/spec/components/icon_menu.js
similarity index 100%
rename from spec/components/icon_menu.jsx
rename to spec/components/icon_menu.js
diff --git a/spec/components/input.jsx b/spec/components/input.js
similarity index 100%
rename from spec/components/input.jsx
rename to spec/components/input.js
diff --git a/spec/components/layout.jsx b/spec/components/layout.js
similarity index 100%
rename from spec/components/layout.jsx
rename to spec/components/layout.js
diff --git a/spec/components/link.jsx b/spec/components/link.js
similarity index 100%
rename from spec/components/link.jsx
rename to spec/components/link.js
diff --git a/spec/components/list.jsx b/spec/components/list.js
similarity index 100%
rename from spec/components/list.jsx
rename to spec/components/list.js
diff --git a/spec/components/menu.jsx b/spec/components/menu.js
similarity index 100%
rename from spec/components/menu.jsx
rename to spec/components/menu.js
diff --git a/spec/components/navigation.jsx b/spec/components/navigation.js
similarity index 100%
rename from spec/components/navigation.jsx
rename to spec/components/navigation.js
diff --git a/spec/components/pickers.jsx b/spec/components/pickers.js
similarity index 100%
rename from spec/components/pickers.jsx
rename to spec/components/pickers.js
diff --git a/spec/components/progress.jsx b/spec/components/progress.js
similarity index 100%
rename from spec/components/progress.jsx
rename to spec/components/progress.js
diff --git a/spec/components/radio.jsx b/spec/components/radio.js
similarity index 100%
rename from spec/components/radio.jsx
rename to spec/components/radio.js
diff --git a/spec/components/slider.jsx b/spec/components/slider.js
similarity index 100%
rename from spec/components/slider.jsx
rename to spec/components/slider.js
diff --git a/spec/components/snackbar.jsx b/spec/components/snackbar.js
similarity index 100%
rename from spec/components/snackbar.jsx
rename to spec/components/snackbar.js
diff --git a/spec/components/switch.jsx b/spec/components/switch.js
similarity index 100%
rename from spec/components/switch.jsx
rename to spec/components/switch.js
diff --git a/spec/components/table.jsx b/spec/components/table.js
similarity index 100%
rename from spec/components/table.jsx
rename to spec/components/table.js
diff --git a/spec/components/tabs.jsx b/spec/components/tabs.js
similarity index 100%
rename from spec/components/tabs.jsx
rename to spec/components/tabs.js
diff --git a/spec/components/tooltip.jsx b/spec/components/tooltip.js
similarity index 100%
rename from spec/components/tooltip.jsx
rename to spec/components/tooltip.js
diff --git a/spec/index.jsx b/spec/index.js
similarity index 100%
rename from spec/index.jsx
rename to spec/index.js
diff --git a/spec/root.jsx b/spec/root.js
similarity index 100%
rename from spec/root.jsx
rename to spec/root.js
diff --git a/spec/style.scss b/spec/style.scss
index 558ee6502..6f77fc9fb 100644
--- a/spec/style.scss
+++ b/spec/style.scss
@@ -23,7 +23,7 @@ $offset: 1.8 * $unit;
       margin: ($offset / 4) 0;
       opacity: .6;
     }
-    [data-react-toolbox='card'] {
+    [data-react-toolbox="card"] {
       display: inline-block;
       margin: $offset $offset 0 0;
     }
@@ -38,6 +38,7 @@ $offset: 1.8 * $unit;
 }
 
 .appbar {
+  z-index: 999999 !important;
   display: flex;
   > h1 {
     flex-grow: 1;
diff --git a/tests.webpack.js b/tests.webpack.js
index b1e86b88b..f837e2e06 100644
--- a/tests.webpack.js
+++ b/tests.webpack.js
@@ -1,2 +1,2 @@
-const context = require.context('./components', true, /(.spec\.cjsx?|.spec\.jsx?)$/);
+const context = require.context('./components', true, /.spec\.js$/);
 context.keys().forEach(context);
diff --git a/tools/buildReadme.js b/tools/buildReadme.js
index 72afeb143..61934a20f 100755
--- a/tools/buildReadme.js
+++ b/tools/buildReadme.js
@@ -14,7 +14,7 @@ const getComponentName = (filepath) => {
   return name;
 };
 
-const componentGlob = Path.join(process.argv[2], '/*.jsx');
+const componentGlob = Path.join(process.argv[2], '/*.js');
 
 new Promise((resolve, reject) => {
   Glob(componentGlob, (err, files) => {
diff --git a/webpack.config.development.js b/webpack.config.development.js
index ed1a5ef1b..90127281e 100644
--- a/webpack.config.development.js
+++ b/webpack.config.development.js
@@ -9,7 +9,7 @@ module.exports = {
 	devtool: 'inline-source-map',
   entry: [
     'webpack-hot-middleware/client',
-    './spec/index.jsx'
+    './spec/index.js'
   ],
   output: {
     path: path.join(__dirname, 'build'),
@@ -17,13 +17,13 @@ module.exports = {
     publicPath: '/build/'
   },
   resolve: {
-    extensions: ['', '.jsx', '.scss', '.js', '.json'],
+    extensions: ['', '.scss', '.js', '.json'],
     packageMains: ['browser', 'web', 'browserify', 'main', 'style']
   },
   module: {
     loaders: [
       {
-        test: /\.(js|jsx)$/,
+        test: /\.js$/,
         loader: 'babel',
         exclude: /(node_modules)/
       }, {
diff --git a/webpack.config.test.js b/webpack.config.test.js
index 957e3448e..50c473632 100644
--- a/webpack.config.test.js
+++ b/webpack.config.test.js
@@ -5,7 +5,7 @@ module.exports = {
   module: {
     loaders: [
       {
-        test: /\.(js|jsx)$/,
+        test: /\.js$/,
         exclude: /(node_modules)/,
         loader: 'babel'
       }, {
@@ -15,7 +15,7 @@ module.exports = {
     ]
   },
   resolve: {
-    extensions: ['', '.jsx', '.scss', '.js', '.json'],
+    extensions: ['', '.scss', '.js', '.json'],
     packageMains: ['browser', 'web', 'browserify', 'main', 'style']
   },
   watch: true,

From 410cd6bfe3151121bc796ac6bc462262ccbdcbf7 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 10 Apr 2016 21:56:48 +0200
Subject: [PATCH 0479/1024] =?UTF-8?q?Now=20we=20are=20Audiense=20?=
 =?UTF-8?q?=F0=9F=92=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/app/components/layout/home/index.js | 2 +-
 spec/components/list.js                  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/app/components/layout/home/index.js b/docs/app/components/layout/home/index.js
index 86b011518..561bed46a 100644
--- a/docs/app/components/layout/home/index.js
+++ b/docs/app/components/layout/home/index.js
@@ -61,7 +61,7 @@ const Home = () => (
         <Card className={style.author}>
           <CardMedia aspectRatio='wide' image='/images/javivelasco.jpg' />
           <CardTitle title="Javi Velasco" subtitle="@javivelasco" />
-          <CardText>Software gardener • Film, music & comic lover • Frontend Engineer at SocialBro  • Any biographer in the room?</CardText>
+          <CardText>Software gardener • Film, music & comic lover • Frontend Engineer at Audiense  • Any biographer in the room?</CardText>
           <CardActions>
             <Button href='http://github.com/javivelasco' target='_blank'><GithubIcon /> Github</Button>
             <Button href='http://twitter.com/javivelasco' target='_blank' className={style.twitter}><TwitterIcon /> Twitter</Button>
diff --git a/spec/components/list.js b/spec/components/list.js
index da780b046..0bd002a9f 100644
--- a/spec/components/list.js
+++ b/spec/components/list.js
@@ -52,7 +52,7 @@ class ListTest extends React.Component {
             <ListItem
               avatar='https://pbs.twimg.com/profile_images/693578804808278017/a5y4h8MN_400x400.png'
               caption='Javi Velasco'
-              legend='Frontend engineer at Socialbro'
+              legend='Frontend engineer at Audiense'
               rightIcon='star'
             />
             <ListItem

From 8e571043bf124e030be1307a00c8eeb534a0c33d Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 10 Apr 2016 21:57:27 +0200
Subject: [PATCH 0480/1024] 0.16.0 release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index fc3dd833c..fa77ae4f8 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "react-toolbox",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "homepage": "http://www.react-toolbox.com/",
-  "version": "0.15.1",
+  "version": "0.16.0",
   "main": "./lib",
   "author": {
     "name": "React Toolbox Team",

From cb80113d7a12a27b85cc4ade8a139fd07d08b1cd Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 10 Apr 2016 22:13:48 +0200
Subject: [PATCH 0481/1024] Bugfix: use hash history

---
 docs/app/index.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/docs/app/index.js b/docs/app/index.js
index 52f74fe57..56dcdcb2d 100644
--- a/docs/app/index.js
+++ b/docs/app/index.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Router, Route, browserHistory } from 'react-router';
+import { Router, Route, useRouterHistory } from 'react-router';
+import createHashHistory from 'history/lib/createHashHistory';
 
 import 'react-toolbox/commons';
 
@@ -9,7 +10,7 @@ import Install from './components/layout/install';
 import Main from './components/layout/main';
 
 ReactDOM.render((
-  <Router history={browserHistory}>
+  <Router history={useRouterHistory(createHashHistory)({ queryKey: false })}>
     <Route path="/" component={Home} />
     <Route path="/install" component={Install} />
     <Route path="/components" component={Main}>

From 84130d4a4d2dff94c58ad261d4ad555736b759ed Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 10 Apr 2016 22:14:03 +0200
Subject: [PATCH 0482/1024] Include Chip in docs

---
 .../layout/main/modules/components.js         |  8 ++++
 .../main/modules/examples/chip_example_1.txt  | 47 +++++++++++++++++++
 2 files changed, 55 insertions(+)
 create mode 100644 docs/app/components/layout/main/modules/examples/chip_example_1.txt

diff --git a/docs/app/components/layout/main/modules/components.js b/docs/app/components/layout/main/modules/components.js
index 9b5a647bd..41a7ad780 100644
--- a/docs/app/components/layout/main/modules/components.js
+++ b/docs/app/components/layout/main/modules/components.js
@@ -5,6 +5,7 @@ import Avatar from 'react-toolbox/avatar/readme';
 import Button from 'react-toolbox/button/readme';
 import Card from 'react-toolbox/card/readme';
 import Checkbox from 'react-toolbox/checkbox/readme';
+import Chip from 'react-toolbox/chip/readme';
 import DatePicker from 'react-toolbox/date_picker/readme';
 import Dialog from 'react-toolbox/dialog/readme';
 import Drawer from 'react-toolbox/drawer/readme';
@@ -32,6 +33,7 @@ import AutocompleteExample1 from './examples/autocomplete_example_1.txt';
 import AvatarExample1 from './examples/avatar_example_1.txt';
 import ButtonExample1 from './examples/button_example_1.txt';
 import CardExample1 from './examples/card_example_1.txt';
+import ChipExample1 from './examples/chip_example_1.txt';
 import CheckboxExample1 from './examples/checkbox_example_1.txt';
 import DatePickerExample1 from './examples/datepicker_example_1.txt';
 import DialogExample1 from './examples/dialog_example_1.txt';
@@ -85,6 +87,12 @@ export default {
     path: '/components/card',
     examples: [CardExample1]
   },
+  chip: {
+    name: 'Chip',
+    docs: Chip,
+    path: '/components/chip',
+    examples: [ChipExample1]
+  },
   checkbox: {
     name: 'Checkbox',
     docs: Checkbox,
diff --git a/docs/app/components/layout/main/modules/examples/chip_example_1.txt b/docs/app/components/layout/main/modules/examples/chip_example_1.txt
new file mode 100644
index 000000000..1f36f335b
--- /dev/null
+++ b/docs/app/components/layout/main/modules/examples/chip_example_1.txt
@@ -0,0 +1,47 @@
+class ChipTest extends React.Component {
+  state = {
+    deleted: false
+  };
+
+  handleDeleteClick = () => {
+    this.setState({
+      deleted: true
+    });
+  };
+
+  render () {
+    return (
+      <section>
+        <Chip>Example chip</Chip>
+        <Chip>
+          <span style={{textDecoration: 'line-through'}}>Standard</span>
+          <strong>Custom</strong> chip <small>(custom markup)</small>
+        </Chip>
+
+        {
+          this.state.deleted ? null : (
+            <Chip deletable onDeleteClick={this.handleDeleteClick}>
+              Deletable Chip
+            </Chip>
+          )
+        }
+
+        <Chip>
+          <Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />
+          <span>Avatar Chip</span>
+        </Chip>
+
+        <Chip>
+          <Avatar title="A" /><span>Initial chip</span>
+        </Chip>
+
+        <Chip>
+          <Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
+          <span>Image contact chip</span>
+        </Chip>
+      </section>
+    );
+  }
+}
+
+return <ChipTest />

From 0cb220544e19f6b0a505b858462c15fb7050b108 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 10 Apr 2016 22:14:19 +0200
Subject: [PATCH 0483/1024] Add Chip to component index

---
 components/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/index.js b/components/index.js
index 170bcb595..51516acd3 100644
--- a/components/index.js
+++ b/components/index.js
@@ -5,6 +5,7 @@ export Avatar from './avatar';
 export Button from './button/Button';
 export IconButton from './button/IconButton';
 export * from './card';
+export Chip from './chip';
 export Checkbox from './checkbox';
 export DatePicker from './date_picker';
 export Dialog from './dialog';

From eb483dddac97b3b3d4585aefcfa43bc19722a286 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 10 Apr 2016 22:16:01 +0200
Subject: [PATCH 0484/1024] 0.16.1 release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index fa77ae4f8..1835161f2 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "react-toolbox",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "homepage": "http://www.react-toolbox.com/",
-  "version": "0.16.0",
+  "version": "0.16.1",
   "main": "./lib",
   "author": {
     "name": "React Toolbox Team",

From 6665753a7a508887acd46102d5d23e4c3bcf552b Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 10 Apr 2016 22:31:28 +0200
Subject: [PATCH 0485/1024] Indentify Avatar by constructur in Chip

---
 components/chip/Chip.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/chip/Chip.js b/components/chip/Chip.js
index 8e7e9f0ce..27162a653 100644
--- a/components/chip/Chip.js
+++ b/components/chip/Chip.js
@@ -1,12 +1,13 @@
 import React, {PropTypes} from 'react';
 import ClassNames from 'classnames';
+import Avatar from '../avatar';
 import style from './style';
 
 const Chip = ({children, className, deletable, onDeleteClick, ...other}) => {
   let hasAvatar = false;
   if (React.Children.count(children)) {
     const firstChild = children[0];
-    hasAvatar = firstChild && firstChild.type && firstChild.type.name === 'Avatar';
+    hasAvatar = firstChild && firstChild.type && firstChild.type === Avatar;
   }
 
   const classes = ClassNames(style.chip, {

From 473d1fa1febef62ada45b05325fe988660b16b04 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 10 Apr 2016 22:35:52 +0200
Subject: [PATCH 0486/1024] 0.16.2 release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 1835161f2..cab4bfac2 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "react-toolbox",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "homepage": "http://www.react-toolbox.com/",
-  "version": "0.16.1",
+  "version": "0.16.2",
   "main": "./lib",
   "author": {
     "name": "React Toolbox Team",

From 29aece70941233a7b20355a7be1238cd2b8e14f2 Mon Sep 17 00:00:00 2001
From: Mauro <mauro@jurincic.net>
Date: Tue, 12 Apr 2016 11:42:10 +0200
Subject: [PATCH 0487/1024] added ability to select only one row at the time

---
 components/table/Table.js                     | 23 ++++++++++++++-----
 components/table/TableHead.js                 | 14 +++++++----
 components/table/readme.md                    |  4 +++-
 .../main/modules/examples/table_example_1.txt |  1 +
 4 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/components/table/Table.js b/components/table/Table.js
index bb6448a17..8ced4366c 100644
--- a/components/table/Table.js
+++ b/components/table/Table.js
@@ -11,6 +11,7 @@ class Table extends React.Component {
     onChange: React.PropTypes.func,
     onSelect: React.PropTypes.func,
     selectable: React.PropTypes.bool,
+    multiSelectable: React.PropTypes.bool,
     selected: React.PropTypes.array,
     source: React.PropTypes.array
   };
@@ -19,6 +20,7 @@ class Table extends React.Component {
     className: '',
     heading: true,
     selectable: true,
+    multiSelectable: true,
     selected: [],
     source: []
   };
@@ -34,8 +36,16 @@ class Table extends React.Component {
   handleRowSelect = (index) => {
     if (this.props.onSelect) {
       const position = this.props.selected.indexOf(index);
-      const newSelected = [...this.props.selected];
-      if (position !== -1) newSelected.splice(position, 1); else newSelected.push(index);
+      let newSelected = [...this.props.selected];
+
+      if (position !== -1) {
+        newSelected.splice(position, 1);
+      }
+      else if (this.props.multiSelectable) {
+        newSelected.push(index);
+      } else {
+        newSelected = [index];
+      }
       this.props.onSelect(newSelected);
     }
   };
@@ -46,22 +56,23 @@ class Table extends React.Component {
     }
   };
 
-  renderHead () {
+  renderHead() {
     if (this.props.heading) {
-      const {model, selected, source, selectable} = this.props;
+      const {model, selected, source, selectable, multiSelectable} = this.props;
       const isSelected = selected.length === source.length;
       return (
         <TableHead
           model={model}
           onSelect={this.handleFullSelect}
           selectable={selectable}
+          multiSelectable={multiSelectable}
           selected={isSelected}
         />
       );
     }
   }
 
-  renderBody () {
+  renderBody() {
     const rows = this.props.source.map((data, index) => {
       return (
         <TableRow
@@ -80,7 +91,7 @@ class Table extends React.Component {
     return <tbody>{rows}</tbody>;
   }
 
-  render () {
+  render() {
     let className = style.root;
     if (this.props.className) className += ` ${this.props.className}`;
     return (
diff --git a/components/table/TableHead.js b/components/table/TableHead.js
index 06a166dce..55b4638a3 100644
--- a/components/table/TableHead.js
+++ b/components/table/TableHead.js
@@ -2,24 +2,27 @@ import React from 'react';
 import Checkbox from '../checkbox';
 import style from './style';
 
-const TableHead = ({model, onSelect, selectable, selected}) => {
+const TableHead = ({model, onSelect, selectable, multiSelectable, selected}) => {
   let selectCell;
   const contentCells = Object.keys(model).map((key) => {
     const name = model[key].title || key;
     return <th key={key}>{name}</th>;
   });
 
-  if (selectable) {
+  if (selectable && multiSelectable) {
     selectCell = (
       <th key='select' className={style.selectable}>
-        <Checkbox onChange={onSelect} checked={selected} />
+        <Checkbox onChange={onSelect} checked={selected}/>
       </th>
     );
+  } else if (selectable) {
+    selectCell = (
+      <th key='select' className={style.selectable}></th>
+    );
   }
-
   return (
     <thead>
-      <tr>{[selectCell, ...contentCells]}</tr>
+    <tr>{[selectCell, ...contentCells]}</tr>
     </thead>
   );
 };
@@ -29,6 +32,7 @@ TableHead.propTypes = {
   model: React.PropTypes.object,
   onSelect: React.PropTypes.func,
   selectable: React.PropTypes.bool,
+  multiSelectable: React.PropTypes.bool,
   selected: React.PropTypes.bool
 };
 
diff --git a/components/table/readme.md b/components/table/readme.md
index 6ca625db4..063e04f41 100644
--- a/components/table/readme.md
+++ b/components/table/readme.md
@@ -40,6 +40,7 @@ class TableTest extends React.Component {
         onChange={this.handleChange}
         onSelect={this.handleSelect}
         selectable
+        multiSelectable
         selected={this.state.selected}
         source={this.state.source}
       />
@@ -57,6 +58,7 @@ class TableTest extends React.Component {
 | `model`           | `Object`        |                 | Object describing the data model that represents each object in the `source`.|
 | `onChange`        | `Function`      |                 | Callback function that is fired when an item in a row changes. If set, rows are editable. |
 | `onSelect`        | `Function`      |                 | Callback function invoked when the row selection changes.|
-| `selectable`      | `Boolean`       | `true`          | If true, the header and each row will display a checkbox to allow the user to select them.|
+| `selectable`      | `Boolean`       | `true`          | If true, each row will display a checkbox to allow the user to select that one row.|
+| `multiSelectable` | `Boolean`       | `true`          | If true, the header and each row will display a checkbox to allow the user to select multiple rows.|
 | `selected`        | `Array`         |                 | Array of indexes of the items in the source that should appear as selected.|
 | `source`          | `Array`         |                 | Array of objects representing each item to show.|
diff --git a/docs/app/components/layout/main/modules/examples/table_example_1.txt b/docs/app/components/layout/main/modules/examples/table_example_1.txt
index bee3dd480..f2aee1442 100644
--- a/docs/app/components/layout/main/modules/examples/table_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/table_example_1.txt
@@ -32,6 +32,7 @@ class TableTest extends React.Component {
         onChange={this.handleChange}
         onSelect={this.handleSelect}
         selectable
+        multiSelectable
         selected={this.state.selected}
         source={this.state.source}
       />

From 6a0d861dfdcdbdb353a514ac8465707e4c23c033 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 12 Apr 2016 20:34:11 +0200
Subject: [PATCH 0488/1024] Update dependencies

---
 docs/package.json | 4 ++--
 package.json      | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index 942bc44ca..5e8d8e3e3 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -15,7 +15,7 @@
     "history": "^2.0.1",
     "react": "^15.0.1",
     "react-dom": "^15.0.1",
-    "react-router": "^2.0.1"
+    "react-router": "^2.1.1"
   },
   "devDependencies": {
     "autoprefixer": "^6.3.6",
@@ -47,7 +47,7 @@
     "style-loader": "^0.13.1",
     "toolbox-loader": "0.0.2",
     "transfer-webpack-plugin": "^0.1.4",
-    "webpack": "^1.12.14",
+    "webpack": "^1.12.15",
     "webpack-dev-middleware": "^1.6.1",
     "webpack-hot-middleware": "^2.10.0"
   },
diff --git a/package.json b/package.json
index cab4bfac2..add0297dd 100644
--- a/package.json
+++ b/package.json
@@ -69,14 +69,14 @@
     "karma-webpack": "^1.7.0",
     "mocha": "^2.3.4",
     "node-sass": "^3.4.2",
-    "normalize.css": "^4.0.0",
+    "normalize.css": "^4.1.1",
     "phantomjs": "^2.1.7",
     "phantomjs-polyfill": "0.0.2",
     "postcss-loader": "^0.8.2",
     "react": "^15.0.1",
     "react-addons-css-transition-group": "^15.0.1",
     "react-addons-test-utils": "^15.0.1",
-    "react-docgen": "^2.8.1",
+    "react-docgen": "^2.8.2",
     "react-dom": "^15.0.1",
     "react-transform-catch-errors": "^1.0.0",
     "react-transform-hmr": "^1.0.4",
@@ -87,7 +87,7 @@
     "sinon": "git://github.com/sinonjs/sinon.git#b672042043517b9f84e14ed0fb8265126168778a",
     "style-loader": "^0.13.1",
     "toolbox-loader": "0.0.2",
-    "webpack": "^1.12.14",
+    "webpack": "^1.12.15",
     "webpack-dev-middleware": "^1.6.1",
     "webpack-hot-middleware": "^2.10.0"
   },

From c612fdf83d873e029f006d86a38c02c752f7de81 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 12 Apr 2016 21:41:28 +0200
Subject: [PATCH 0489/1024] Add onRippleEnded. Fixes #289

---
 components/ripple/Ripple.js | 16 ++++++++++++++++
 components/ripple/readme.md |  9 +++++----
 components/utils/events.js  | 29 +++++++++++++++++++++++++++++
 spec/components/button.js   |  6 +++++-
 spec/style.scss             |  2 +-
 5 files changed, 56 insertions(+), 6 deletions(-)

diff --git a/components/ripple/Ripple.js b/components/ripple/Ripple.js
index 6f3de37e9..382b53cc8 100644
--- a/components/ripple/Ripple.js
+++ b/components/ripple/Ripple.js
@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import ClassNames from 'classnames';
 import style from './style';
+import events from '../utils/events';
 import prefixer from '../utils/prefixer';
 
 const defaults = {
@@ -23,6 +24,7 @@ const Ripple = (options = {}) => {
       static propTypes = {
         children: React.PropTypes.any,
         disabled: React.PropTypes.bool,
+        onRippleEnded: React.PropTypes.func,
         ripple: React.PropTypes.bool,
         rippleCentered: React.PropTypes.bool,
         rippleClassName: React.PropTypes.string,
@@ -45,6 +47,20 @@ const Ripple = (options = {}) => {
         width: null
       };
 
+      componentDidMount () {
+        if (this.props.onRippleEnded) {
+          events.addEventListenerOnTransitionEnded(this.refs.ripple, (evt) => {
+            if (evt.propertyName === 'transform') this.props.onRippleEnded(evt);
+          });
+        }
+      }
+
+      componentWillUnmount () {
+        if (this.props.onRippleEnded) {
+          events.removeEventListenerOnTransitionEnded(this.refs.ripple);
+        }
+      }
+
       handleEnd = () => {
         document.removeEventListener(this.touch ? 'touchend' : 'mouseup', this.handleEnd);
         this.setState({active: false});
diff --git a/components/ripple/readme.md b/components/ripple/readme.md
index 05c2861ff..c9bac5f52 100644
--- a/components/ripple/readme.md
+++ b/components/ripple/readme.md
@@ -20,8 +20,9 @@ const RippleTest = () => <RippleLink href='#'>Test</RippleLink>;
 
 In any component you decorate with the Ripple you'd get some additional props:
 
-| Name          | Type        | Default     | Description|
+| Name            | Type        | Default     | Description|
 |:-----|:-----|:-----|:-----|
-| `centered`    | `Boolean`   | `false`     | True in case you want a centered ripple.|
-| `className`   | `String`    | `''`        | String to customize appearance (color and opacity for example).|
-| `spread`      | `Number`    | `2`         | Factor to indicate how much should the ripple spread under the component.|
+| `centered`      | `Boolean`   | `false`     | True in case you want a centered ripple.|
+| `className`     | `String`    | `''`        | String to customize appearance (color and opacity for example).|
+| `onRippleEnded` | `Function`  |             | Function that will be called when the ripple animation ends. |
+| `spread`        | `Number`    | `2`         | Factor to indicate how much should the ripple spread under the component.|
diff --git a/components/utils/events.js b/components/utils/events.js
index 47d805518..52d4b8d4b 100644
--- a/components/utils/events.js
+++ b/components/utils/events.js
@@ -37,5 +37,34 @@ export default {
       node = node.parentNode;
     }
     return false;
+  },
+
+  addEventListenerOnTransitionEnded (element, fn) {
+    const eventName = transitionEventNamesFor(element);
+    if (!eventName) return false;
+    element.addEventListener(eventName, fn);
+    return true;
+  },
+
+  removeEventListenerOnTransitionEnded (element) {
+    const eventName = transitionEventNamesFor(element);
+    if (!eventName) return false;
+    element.removeEventListener(eventName);
+    return true;
   }
 };
+
+const TRANSITIONS = {
+  'transition': 'transitionend',
+  'OTransition': 'oTransitionEnd',
+  'MozTransition': 'transitionend',
+  'WebkitTransition': 'webkitTransitionEnd'
+};
+
+function transitionEventNamesFor (element) {
+  for (const transition in TRANSITIONS) {
+    if (element.style[transition] !== undefined) {
+      return TRANSITIONS[transition];
+    }
+  }
+}
diff --git a/spec/components/button.js b/spec/components/button.js
index 4cf434d95..97a69c070 100644
--- a/spec/components/button.js
+++ b/spec/components/button.js
@@ -10,7 +10,7 @@ const ButtonTest = () => (
     <Button href='http://github.com/javivelasco' target='_blank' raised>
       <GithubIcon /> Github
     </Button>
-    <Button icon='bookmark' label='Bookmark' accent />
+    <Button icon='bookmark' label='Bookmark' accent onRippleEnded={rippleEnded} />
     <Button icon='bookmark' label='Bookmark' raised primary />
     <Button icon='inbox' label='Inbox' flat />
     <Button icon='add' floating />
@@ -27,4 +27,8 @@ const ButtonTest = () => (
   </section>
 );
 
+function rippleEnded () {
+  console.log('Ripple animation ended!');
+}
+
 export default ButtonTest;
diff --git a/spec/style.scss b/spec/style.scss
index 6f77fc9fb..8246330ef 100644
--- a/spec/style.scss
+++ b/spec/style.scss
@@ -38,7 +38,7 @@ $offset: 1.8 * $unit;
 }
 
 .appbar {
-  z-index: 999999 !important;
+  z-index: 999 !important;
   display: flex;
   > h1 {
     flex-grow: 1;

From d83951503b46555496150fc382abfba21c601777 Mon Sep 17 00:00:00 2001
From: Magica <magicae@users.noreply.github.com>
Date: Wed, 13 Apr 2016 09:59:44 +0800
Subject: [PATCH 0490/1024] Fix the value of month in datepicker example

The value `date.getMonth()` returns is from 0 to 11.
---
 components/date_picker/readme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/date_picker/readme.md b/components/date_picker/readme.md
index 8241eadf9..96fb65eaa 100644
--- a/components/date_picker/readme.md
+++ b/components/date_picker/readme.md
@@ -23,7 +23,7 @@ class DatePickerTest extends React.Component {
       <section>
         <DatePicker label='Birthdate' onChange={this.handleChange.bind(this, 'date1')} value={this.state.date1} />
         <DatePicker label='Expiration date' minDate={min_datetime} onChange={this.handleChange.bind(this, 'date2')} value={this.state.date2} />
-        <DatePicker label='Formatted date' inputFormat={(value) => `${value.getDate()}/${value.getMonth()}/${value.getFullYear()}`} onChange={this.handleChange.bind(this, 'date3')} value={this.state.date3} />
+        <DatePicker label='Formatted date' inputFormat={(value) => `${value.getDate()}/${value.getMonth() + 1}/${value.getFullYear()}`} onChange={this.handleChange.bind(this, 'date3')} value={this.state.date3} />
       </section>
     );
   }

From 81823483f64141bf1b5f51f67eabe1910a04a8b9 Mon Sep 17 00:00:00 2001
From: Matt Kauffman <mattkauffman@rocketmail.com>
Date: Fri, 15 Apr 2016 12:39:37 -0700
Subject: [PATCH 0491/1024] Cleanup timers when Menu component unmounts to
 prevent calls on undefined objects

---
 components/menu/Menu.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/menu/Menu.js b/components/menu/Menu.js
index 794a52e58..06bf907d2 100644
--- a/components/menu/Menu.js
+++ b/components/menu/Menu.js
@@ -43,7 +43,7 @@ class Menu extends React.Component {
   };
 
   componentDidMount () {
-    setTimeout(() => {
+    this.positionTimeoutHandle = setTimeout(() => {
       const { width, height } = this.refs.menu.getBoundingClientRect();
       const position = this.props.position === POSITION.AUTO ? this.calculatePosition() : this.props.position;
       this.setState({ position, width, height });
@@ -62,7 +62,7 @@ class Menu extends React.Component {
       const position = this.calculatePosition();
       if (this.state.position !== position) {
         this.setState({ position, active: false }, () => {
-          setTimeout(() => {this.setState({active: true}); }, 20);
+          this.activateTimeoutHandle = setTimeout(() => {this.setState({active: true}); }, 20);
         });
         return false;
       }
@@ -89,6 +89,8 @@ class Menu extends React.Component {
     if (this.state.active) {
       events.removeEventsFromDocument({click: this.handleDocumentClick});
     }
+    clearTimeout(this.positionTimeoutHandle)
+    clearTimeout(this.activateTimeoutHandle)
   }
 
   handleDocumentClick = (event) => {

From fe390faff3077aaef2cc7a8eb881ddc7e6571cbc Mon Sep 17 00:00:00 2001
From: Matt Kauffman <mattkauffman@rocketmail.com>
Date: Fri, 15 Apr 2016 13:27:22 -0700
Subject: [PATCH 0492/1024] Add missing semicolons

---
 components/menu/Menu.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/menu/Menu.js b/components/menu/Menu.js
index 06bf907d2..3e0371d79 100644
--- a/components/menu/Menu.js
+++ b/components/menu/Menu.js
@@ -89,8 +89,8 @@ class Menu extends React.Component {
     if (this.state.active) {
       events.removeEventsFromDocument({click: this.handleDocumentClick});
     }
-    clearTimeout(this.positionTimeoutHandle)
-    clearTimeout(this.activateTimeoutHandle)
+    clearTimeout(this.positionTimeoutHandle);
+    clearTimeout(this.activateTimeoutHandle);
   }
 
   handleDocumentClick = (event) => {

From 4d3e2e06075182b772d0727eda0232a83a70a0a2 Mon Sep 17 00:00:00 2001
From: lupino <lmjubuntu@gmail.com>
Date: Tue, 19 Apr 2016 22:20:53 +0800
Subject: [PATCH 0493/1024] Fixed. wrong check empty actions

---
 components/list/ListItemLayout.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/list/ListItemLayout.js b/components/list/ListItemLayout.js
index bb0092a45..01c7f4737 100644
--- a/components/list/ListItemLayout.js
+++ b/components/list/ListItemLayout.js
@@ -22,7 +22,7 @@ const ListItemLayout = (props) => {
     ...props.rightActions
   ];
   const content = props.itemContent || <ListItemContent caption={props.caption} legend={props.legend} />;
-  const emptyActions = (item) => !item[0] && !item[1];
+  const emptyActions = (item) => !item[0] && !item[1] && !item[2];
 
   return (
     <span className={className}>

From facf4a37363ea097d27ff37741c9fb290f34c45b Mon Sep 17 00:00:00 2001
From: Nick Retallack <nretallack@google.com>
Date: Thu, 21 Apr 2016 13:44:55 -0700
Subject: [PATCH 0494/1024] Remove conditional import since SASS does not
 support them.

---
 components/_base.scss | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/components/_base.scss b/components/_base.scss
index 578c2892a..1ab106aa3 100644
--- a/components/_base.scss
+++ b/components/_base.scss
@@ -1,8 +1,3 @@
-$theme-building: false !default;
-
-@if $theme-building != true {
-  @import "http://github.com/colors";
-}
-
+@import "http://github.com/colors";
 @import "http://github.com/globals";
 @import "http://github.com/mixins";

From 41189e2c3b8d02f6c3d68bf37047c8104bb32ca0 Mon Sep 17 00:00:00 2001
From: Ro Savage <rowan.savage@gmail.com>
Date: Fri, 22 Apr 2016 15:00:19 +1200
Subject: [PATCH 0495/1024] Fixed sass-lint to 1.5.1 to avoid linting errors

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index add0297dd..af3bf724a 100644
--- a/package.json
+++ b/package.json
@@ -82,7 +82,7 @@
     "react-transform-hmr": "^1.0.4",
     "redbox-react": "^1.2.3",
     "rimraf": "^2.5.0",
-    "sass-lint": "^1.5.1",
+    "sass-lint": "1.5.1",
     "sass-loader": "^3.2.0",
     "sinon": "git://github.com/sinonjs/sinon.git#b672042043517b9f84e14ed0fb8265126168778a",
     "style-loader": "^0.13.1",

From 62e532218bf9bcae13a2a8d9446fc70de42a9a0d Mon Sep 17 00:00:00 2001
From: Ro Savage <rowan.savage@gmail.com>
Date: Fri, 22 Apr 2016 15:34:48 +1200
Subject: [PATCH 0496/1024] Update DatePicker to handle being passed a value of
 an empty stirng

---
 components/date_picker/DatePicker.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/components/date_picker/DatePicker.js b/components/date_picker/DatePicker.js
index 0ccc56e24..799e52ea0 100644
--- a/components/date_picker/DatePicker.js
+++ b/components/date_picker/DatePicker.js
@@ -17,7 +17,10 @@ class DatePicker extends React.Component {
     maxDate: React.PropTypes.object,
     minDate: React.PropTypes.object,
     onChange: React.PropTypes.func,
-    value: React.PropTypes.object
+    value: React.PropTypes.oneOfType([
+      React.PropTypes.instanceOf(Date),
+      React.PropTypes.string
+    ])
   };
 
   state = {
@@ -41,7 +44,8 @@ class DatePicker extends React.Component {
   render () {
     const { inputClassName, value } = this.props;
     const inputFormat = this.props.inputFormat || time.formatDate;
-    const date = value ? inputFormat(value) : null;
+    const date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined;
+    const formattedDate = date === undefined ? inputFormat(value) : '';
 
     return (
       <div data-react-toolbox='date-picker'>
@@ -52,7 +56,7 @@ class DatePicker extends React.Component {
           label={this.props.label}
           readOnly
           type='text'
-          value={date}
+          value={formattedDate}
         />
         <DatePickerDialog
           autoOk={this.props.autoOk}
@@ -62,7 +66,7 @@ class DatePicker extends React.Component {
           minDate={this.props.minDate}
           onDismiss={this.handleDismiss}
           onSelect={this.handleSelect}
-          value={this.props.value}
+          value={date}
         />
       </div>
     );

From a4de34ece1b2f6bc7805612e3a858ed5515460ef Mon Sep 17 00:00:00 2001
From: Justin Rainbow <justin.rainbow@gmail.com>
Date: Mon, 25 Apr 2016 16:06:08 -0700
Subject: [PATCH 0497/1024] Fixes typo in ListItemLayout

If no "leftActions" were defined on a ListItem, the "rightActions" will
not be rendered due to a typo.
---
 components/list/ListItemLayout.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/list/ListItemLayout.js b/components/list/ListItemLayout.js
index bb0092a45..c37d9bc45 100644
--- a/components/list/ListItemLayout.js
+++ b/components/list/ListItemLayout.js
@@ -28,7 +28,7 @@ const ListItemLayout = (props) => {
     <span className={className}>
       {!emptyActions(leftActions) > 0 && <ListItemActions type='left'>{leftActions}</ListItemActions>}
       {content}
-      {!emptyActions(leftActions) > 0 && <ListItemActions type='right'>{rightActions}</ListItemActions>}
+      {!emptyActions(rightActions) > 0 && <ListItemActions type='right'>{rightActions}</ListItemActions>}
     </span>
   );
 };

From 60b8e5518fd5478816c62b2469eed06d66545c72 Mon Sep 17 00:00:00 2001
From: Lucas Correia <lucas.correia@ftrack.com>
Date: Wed, 27 Apr 2016 11:51:18 +0200
Subject: [PATCH 0498/1024] Fix #454: Chip component unable to display nicely
 on small screen

---
 components/chip/style.scss | 6 ++++++
 spec/components/chip.js    | 8 ++++++++
 spec/style.scss            | 7 +++++++
 3 files changed, 21 insertions(+)

diff --git a/components/chip/style.scss b/components/chip/style.scss
index d7d9d7ff5..1b3002555 100644
--- a/components/chip/style.scss
+++ b/components/chip/style.scss
@@ -3,12 +3,17 @@
 @import "http://github.com/config";
 
 .chip {
+  position: relative;
   display: inline-block;
+  max-width: 100%;
   padding: 0 $chip-padding;
   margin-right: $chip-margin-right;
+  overflow: hidden;
   font-size: $chip-font-size;
   line-height: $chip-height;
   color: $chip-color;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   background-color: $chip-background;
   border-radius: $chip-height;
 }
@@ -35,6 +40,7 @@
 
 .delete {
   position: absolute;
+  right: 0;
   display: inline-block;
   width: $chip-remove-size;
   height: $chip-remove-size;
diff --git a/spec/components/chip.js b/spec/components/chip.js
index 054ceb643..de554a07e 100644
--- a/spec/components/chip.js
+++ b/spec/components/chip.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import Avatar from '../../components/avatar';
 import Chip from '../../components/chip';
+import style from '../style';
 
 class ChipTest extends React.Component {
   state = {
@@ -49,6 +50,13 @@ class ChipTest extends React.Component {
           <Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
           <span>Image contact chip</span>
         </Chip>
+
+        <div className={style.chipTruncateWrapper}>
+          <Chip deletable>
+            Truncated chip with long label. Lorem ipsum Amet quis mollit Excepteur id dolore.
+          </Chip>
+        </div>
+
       </section>
     );
   }
diff --git a/spec/style.scss b/spec/style.scss
index 8246330ef..3eb00af99 100644
--- a/spec/style.scss
+++ b/spec/style.scss
@@ -112,6 +112,13 @@ $offset: 1.8 * $unit;
   width: 345px;
 }
 
+.chipTruncateWrapper {
+  width: 20rem;
+  padding: $offset / 2;
+  margin-top: $offset;
+  border: 1px solid #f4f4f4;
+}
+
 .dropdownTemplate {
   display: flex;
   flex-direction: row;

From a4810d8e73b1f7313bf0c2437261de42388d7204 Mon Sep 17 00:00:00 2001
From: Lucas Correia <lucas.correia@ftrack.com>
Date: Wed, 27 Apr 2016 15:50:26 +0200
Subject: [PATCH 0499/1024] Change autocomplete filter behaviour when
 multiple=false

Adds a showAllSuggestions state, which is set to true initially.
It is set to false when the input is changed, and is used to control if
the shown suggestions should be filtered based when the multiple prop is false.
Once a value is set, the state will be reset to true.
---
 components/autocomplete/Autocomplete.js | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index f642f7215..4c249a314 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -37,6 +37,7 @@ class Autocomplete extends React.Component {
  state = {
    direction: this.props.direction,
    focus: false,
+   showAllSuggestions: true,
    query: this.query(this.props.value)
  };
 
@@ -61,7 +62,10 @@ class Autocomplete extends React.Component {
    const key = this.props.multiple ? keys : keys[0];
    const query = this.query(key);
    if (this.props.onChange) this.props.onChange(key, event);
-   this.setState({ focus: false, query }, () => { this.refs.input.blur(); });
+   this.setState(
+     {focus: false, query, showAllSuggestions: true},
+     () => { this.refs.input.blur(); }
+   );
  };
 
  handleQueryBlur = () => {
@@ -69,7 +73,7 @@ class Autocomplete extends React.Component {
  };
 
  handleQueryChange = (value) => {
-   this.setState({query: value});
+   this.setState({query: value, showAllSuggestions: false});
  };
 
  handleQueryFocus = () => {
@@ -113,8 +117,11 @@ class Autocomplete extends React.Component {
    const query = this.state.query.toLowerCase().trim() || '';
    const values = this.values();
    for (const [key, value] of this.source()) {
-     if (value.toLowerCase().trim().startsWith(query)
-          && (!values.has(key) || !this.props.multiple)) {
+     const valueMatchesQuery = value.toLowerCase().trim().startsWith(query);
+     if (
+       (valueMatchesQuery && !values.has(key))
+       || (!this.props.multiple && (this.state.showAllSuggestions || valueMatchesQuery))
+     ) {
        suggest.set(key, value);
      }
    }

From b8feb9ab38e135842eb7d836148d48340de9cd99 Mon Sep 17 00:00:00 2001
From: Robert Parker <robert@flavorus.com>
Date: Wed, 27 Apr 2016 12:47:39 -0700
Subject: [PATCH 0500/1024] Update Typescript definition to 0.16.2, added
 <Chip>, <Overlay>, and ActivableRendererFactory definitions, misc. tweaks and
 fixes.

---
 react-toolbox.d.ts | 202 +++++++++++++++++++++++++++++++++------------
 1 file changed, 147 insertions(+), 55 deletions(-)

diff --git a/react-toolbox.d.ts b/react-toolbox.d.ts
index be6d3e67d..458775b52 100644
--- a/react-toolbox.d.ts
+++ b/react-toolbox.d.ts
@@ -1,7 +1,8 @@
-// Type definitions for react-toolbox 0.14.1
+// Type definitions for react-toolbox 0.16.2
 // Project: http://react-toolbox.com/
 // Definitions by: @xogeny (Michael M. Tiller), @hsrobflavorus (Robert Parker)
 /*  CHANGES
+    * 04/27/2016: Updates for 0.16.2, added <Chip>, <Overlay>, and ActivableRendererFactory definitions, misc. tweaks and fixes.
     * 02/03/2016:
         * Fixed for TypeScript 1.8.0 stricter var declaration requirements (move `declare var ...` inside each individual module).
         * Removed triple-slash reference to React to fix npm install compatibility (you'll need to make sure you're referencing react.d.ts somewhere in your project!).
@@ -31,6 +32,7 @@ declare namespace __RT {
          * Sets a CSS class on the component.
          */
         className?: string,
+        id?: string;
         /**
          * A key used to uniquely identify the element within an Array
          */
@@ -68,10 +70,26 @@ declare namespace __RT {
          * If true, the dialog will be active.
          */
         active: boolean,
+        /**
+         * Callback called when the ESC key is pressed with the overlay active.
+         */
+        onEscKeyDown?: Function,
         /**
          * Callback to be invoked when the dialog overlay is clicked.
          */
         onOverlayClick?: Function,
+        /**
+         * Callback called when the mouse button is pressed on the overlay.
+         */
+        onOverlayMouseDown?: Function,
+        /**
+         * Callback called when the mouse is moving over the overlay.
+         */
+        onOverlayMouseMove?: Function,
+        /**
+         * Callback called when the mouse button is released over the overlay.
+         */
+        onOverlayMouseUp?: Function,
     }
 
     // Interface for components with icons
@@ -79,7 +97,7 @@ declare namespace __RT {
         /**
          * Value of the icon (See icon component).
          */
-        icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement,
+        icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
     }
 
     export interface Conditional {
@@ -137,11 +155,11 @@ declare namespace __RT {
      * You should give the content with children elements.
      */
     class AppBar extends React.Component<AppBarProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     export interface AvatarProps extends Props, Iconic {
         children?: any,
-        image?: string | __React.ReactElement<any> | __React.ReactHTMLElement | __React.ClassicComponent<any, any>,
+        image?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any> | __React.ClassicComponent<any, any>,
         title?: string | boolean,
     }
     /**
@@ -151,7 +169,7 @@ declare namespace __RT {
      * When used with a specific logo, avatars can also be used to represent brand.
      */
     class Avatar extends React.Component<AvatarProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     interface AutocompleteProps extends Props, Conditional, Changeable<string | Array<any>> {
         /**
@@ -168,7 +186,7 @@ declare namespace __RT {
          */
         multiple?: boolean,
         /**
-         *  Object of key/values or array representing all items suggested.
+         * 	Object of key/values or array representing all items suggested.
          */
         source: Object | Array<any>,
         /**
@@ -177,7 +195,7 @@ declare namespace __RT {
          */
         type?: string,
         /**
-         *  Value or array of values currently selected component.Current value of the input element.
+         * 	Value or array of values currently selected component.Current value of the input element.
          */
         value?: string | Array<any>,
     }
@@ -187,7 +205,7 @@ declare namespace __RT {
      * The opening direction is determined at opening time depending on the current position.
      */
     class Autocomplete extends React.Component<AutocompleteProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     interface ButtonProps extends Props, Clickable, Conditional, Iconic {
         /**
@@ -244,10 +262,10 @@ declare namespace __RT {
      * It consists of text, an image, or both, designed in accordance with your app’s color theme.
      */
     class Button extends React.Component<ButtonProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     class IconButton extends React.Component<ButtonProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     interface CardProps extends Props, Clickable {
         /**
@@ -284,10 +302,10 @@ declare namespace __RT {
      * You can combine each of the subcomponents to create all different Material Design Cards given in the spec.
      */
     export class Card extends React.Component<CardProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     export interface CardTitleProps extends Props {
-        avatar?: string | __React.ReactElement<any> | __React.ReactHTMLElement | __React.ClassicComponent<any, any>,
+        avatar?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any> | __React.ClassicComponent<any, any>,
         /**
          * Children to pass through the component.
          */
@@ -306,7 +324,7 @@ declare namespace __RT {
      * This component can also display an avatar next to the title content.
      */
     export class CardTitle extends React.Component<CardTitleProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     export interface CardMediaProps extends Props {
         /**
@@ -330,14 +348,14 @@ declare namespace __RT {
         /**
          * Can be used instead of children. Accepts an element or a URL string.
          */
-        image?: string | __React.ReactElement<any> | __React.ReactHTMLElement | __React.ClassicComponent<any, any>,
+        image?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any> | __React.ClassicComponent<any, any>,
     }
     /**
      * Used for displaying media such as images or videos on a card. 
      * Can also be used with a solid background color instead of an image.
      */
     export class CardMedia extends React.Component<CardMediaProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     export interface CardTextProps extends Props {
         /**
@@ -350,7 +368,7 @@ declare namespace __RT {
      * Good for small descriptions or other supplementary text.
      */
     export class CardText extends React.Component<CardTextProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     export interface CardActionsProps extends Props {
         /**
@@ -363,14 +381,14 @@ declare namespace __RT {
      * Supplemental actions within the card are explicitly called out using icons, text, and UI controls, typically placed at the bottom of the card.
      */
     export class CardActions extends React.Component<CardActionsProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     export interface CheckboxProps extends Props, Changeable<boolean>, Conditional {
         /**
          * Value for the checkbox, can be true or false.
          * @default false
          */
-        checked: boolean,
+        checked?: boolean,
         /**
          * Text label to attach next to the checkbox element.
          */
@@ -389,7 +407,31 @@ declare namespace __RT {
         onFocus?: Function,
     }
     export class Checkbox extends React.Component<CheckboxProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
+    }
+
+    export interface ChipProps extends Props {
+        /**
+         * 	Child components, usually Avatar and inline elements
+         */
+        children?: React.ReactNode;
+        /**
+         * If true, the chip will be rendered with a delete icon.
+         */
+        deletable?: boolean;
+        /**
+         * Callback to be invoked when the delete icon is clicked.
+         */
+        onDeleteClick?: React.MouseEventHandler
+    }
+    /**
+     * Avatars can be used to represent people. 
+     * For personal avatars, offer personalization options. 
+     * As users may choose not to personalize an avatar, provide delightful defaults. 
+     * When used with a specific logo, avatars can also be used to represent brand.
+     */
+    class Chip extends React.Component<ChipProps, {}> {
+        render(): React.ReactElement<any>;
     }
     export interface DatePickerProps extends Props, Changeable<Date> {
         /**
@@ -410,7 +452,7 @@ declare namespace __RT {
         value?: Date,
     }
     export class DatePicker extends React.Component<DatePickerProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     export interface DialogProps extends Props, Modal {
         /**
@@ -429,7 +471,7 @@ declare namespace __RT {
         type?: string,
     }
     export class Dialog extends React.Component<DialogProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     export interface DrawerProps extends Props, Modal {
         /**
@@ -439,7 +481,7 @@ declare namespace __RT {
         type?: string
     }
     export class Drawer extends React.Component<DrawerProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
 
     export interface DropdownProps extends Props, Changeable<any>, Conditional {
@@ -465,14 +507,14 @@ declare namespace __RT {
         value: string,
     }
     class Dropdown extends React.Component<DropdownProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
 
     interface FontIconProps extends Props {
         value: string
     }
     class FontIcon extends React.Component<FontIconProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
 
     interface InputProps extends Props, Conditional, Changeable<string>, Iconic {
@@ -534,7 +576,7 @@ declare namespace __RT {
         value?: string,
     }
     class Input extends React.Component<InputProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
 
     interface LinkProps extends React.Props<Link>, Iconic {
@@ -549,7 +591,7 @@ declare namespace __RT {
         count?: number,
     }
     class Link extends React.Component<LinkProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
 
     interface ListProps extends Props {
@@ -565,7 +607,7 @@ declare namespace __RT {
         selectable?: boolean,
     }
     class List extends React.Component<ListProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     interface ListItemProps extends Props, Conditional, Clickable {
         /**
@@ -576,6 +618,14 @@ declare namespace __RT {
          * Main text of the item. Required.
          */
         caption?: string,
+        /**
+         * An element that will be displayed as the item. If set, this will override `caption` and `legend`.
+         */
+        itemContent?: React.ReactElement<any>,
+        /**
+         * 	A list of elements that are placed on the left side of the item and after the avatar attribute.
+         */
+        leftActions?: React.ReactElement<any>[],
         /**
          * A string key of a font icon to display an icon in the left side of the item.
          */
@@ -584,6 +634,10 @@ declare namespace __RT {
          * Secondary text to display under the caption.
          */
         legend?: string,
+        /**
+         * 	A list of elements that are placed on the right side of the item and after the rightIcon attribute.
+         */
+        rightActions?: React.ReactElement<any>[],
         /**
          * The same as the leftIcon but in this case the icon is displayed in the right side.
          */
@@ -598,9 +652,13 @@ declare namespace __RT {
          * @default false
          */
         selectable?: boolean,
+        /**
+         * In case you want to provide the item as a link, you can pass this property to specify the href.
+         */
+        to?: string;
     }
     class ListItem extends React.Component<ListItemProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     interface ListCheckboxProps extends Props, Conditional, Changeable<boolean> {
         /**
@@ -630,7 +688,7 @@ declare namespace __RT {
         onFocus?: Function,
     }
     class ListCheckbox extends React.Component<ListCheckboxProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     export interface ListSubHeaderProps extends Props {
         /**
@@ -639,7 +697,7 @@ declare namespace __RT {
         caption: string;
     }
     class ListSubHeader extends React.Component<ListSubHeaderProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     interface ListDividerProps extends Props {
         /**
@@ -648,7 +706,7 @@ declare namespace __RT {
         inset: boolean;
     }
     class ListDivider extends React.Component<ListDividerProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     interface MenuProps extends Props {
         /**
@@ -690,7 +748,7 @@ declare namespace __RT {
         value?: boolean,
     }
     class Menu extends React.Component<MenuProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     interface IconMenuProps extends Props, Iconic {
         /**
@@ -729,7 +787,7 @@ declare namespace __RT {
         selectable?: boolean,
     }
     class IconMenu extends React.Component<IconMenuProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     interface MenuItemProps extends Props, Conditional, Iconic {
         /**
@@ -746,10 +804,10 @@ declare namespace __RT {
         selected?: boolean,
     }
     class MenuItem extends React.Component<MenuItemProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     class MenuDivider extends React.Component<any, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     interface NavigationProps extends Props {
         /**
@@ -766,8 +824,24 @@ declare namespace __RT {
         type?: string,
     }
     class Navigation extends React.Component<NavigationProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
+
+    interface OverlayProps extends Props {
+        active?: boolean;
+        children?: any;
+        /**
+         * Sets a CSS class on the component.
+         */
+        className?: string;
+        invisible?: boolean;
+        onClick?: Function;
+        onEscKeyDown?: Function
+    }
+    class Overlay extends React.Component<OverlayProps, {}> {
+        render(): React.DOMElement<any, any>;
+    }
+
     interface ProgressBarProps extends Props {
         /**
          * Value of a secondary progress bar useful for buffering.
@@ -800,7 +874,7 @@ declare namespace __RT {
         value?: number,
     }
     class ProgressBar extends React.Component<ProgressBarProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     interface RadioGroupProps extends Props, Conditional, Changeable<any> {
         /**
@@ -813,7 +887,7 @@ declare namespace __RT {
         value?: any,
     }
     class RadioGroup extends React.Component<RadioGroupProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     interface RadioButtonProps extends Props, Conditional {
         /**
@@ -842,7 +916,7 @@ declare namespace __RT {
         value: any,
     }
     class RadioButton extends React.Component<RadioButtonProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     interface SliderProps extends Props {
         /**
@@ -879,7 +953,7 @@ declare namespace __RT {
         value: number,
     }
     class Slider extends React.Component<SliderProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     interface SnackbarProps extends Props, Modal, Iconic {
         /**
@@ -908,7 +982,7 @@ declare namespace __RT {
         type?: string,
     }
     class Snackbar extends React.Component<SnackbarProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     interface SwitchProps extends Props, Conditional {
         /**
@@ -918,7 +992,7 @@ declare namespace __RT {
         /**
          * If true, component will be disabled.
          */
-        disabled: boolean,
+        disabled?: boolean,
         /**
          * The text string to use for the floating label element.
          */
@@ -941,7 +1015,7 @@ declare namespace __RT {
         onFocus?: Function,
     }
     class Switch extends React.Component<SwitchProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     interface TableProps extends Props {
         /**
@@ -970,7 +1044,7 @@ declare namespace __RT {
         source?: Array<{ [key: string]: any }>,
     }
     class Table extends React.Component<TableProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     interface TabsProps extends Props, Changeable<number> {
         /**
@@ -979,7 +1053,7 @@ declare namespace __RT {
         index: number,
     }
     class Tabs extends React.Component<TabsProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     interface TabProps extends Props, Conditional {
         /**
@@ -1002,7 +1076,7 @@ declare namespace __RT {
         onActive?: Function,
     }
     class Tab extends React.Component<TabProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
     interface TimePickerProps extends Props, Changeable<Date> {
         /**
@@ -1016,18 +1090,22 @@ declare namespace __RT {
         value?: Date,
     }
     class TimePicker extends React.Component<TimePickerProps, {}> {
-        render(): React.DOMElement<any>;
+        render(): React.DOMElement<any, any>;
     }
-    /*interface TooltipProps extends Props {
+
+    //#region HOC
+    interface ActivableRendererOptions {
         /**
-         * The text string to use for the tooltip.
-         *
-        label: string,
+         * @default 500
+         */
+        delay?: number;
     }
-
-    class Tooltip extends React.Component<TooltipProps, {}> {
-        render(): React.DOMElement<any>;
-    }*/
+    interface ActivableRendererProps {
+        active: boolean;
+        children?: any;
+        delay?: number
+    }
+    function ActivableRendererFactory<P>(options?: ActivableRendererOptions): (componentClass: React.ComponentClass<P>) => React.ComponentClass<P & ActivableRendererProps>
 
     class TooltipComponent<P, S> extends React.Component<P, S> {
         getDecoratedComponentInstance(): React.Component<P, S>;
@@ -1038,6 +1116,12 @@ declare namespace __RT {
     }
 
     function Tooltip<P>(componentClass: React.ComponentClass<P>): TooltipComponentClass<P>;
+    //#endregion
+}
+
+declare var ActivableRendererFactory: typeof __RT.ActivableRendererFactory;
+declare module 'react-toolbox/lib/hoc/ActivableRenderer' {
+    export default ActivableRendererFactory;
 }
 
 declare var AppBar: typeof __RT.AppBar;
@@ -1138,6 +1222,10 @@ declare var Navigation: typeof __RT.Navigation;
 declare module 'react-toolbox/lib/navigation' {
     export default Navigation;
 }
+declare var Overlay: typeof __RT.Overlay;
+declare module 'react-toolbox/lib/overlay' {
+    export default Overlay;
+}
 declare var ProgressBar: typeof __RT.ProgressBar;
 declare module 'react-toolbox/lib/progress_bar' {
     export default ProgressBar;
@@ -1182,6 +1270,7 @@ declare module 'react-toolbox/lib/tooltip' {
     export default Tooltip;
 }
 declare module 'react-toolbox' {
+    import ActivableRendererFactory from 'react-toolbox/lib/hoc/ActivableRenderer';
     import AppBar from 'react-toolbox/lib/app_bar';
     import Autocomplete from 'react-toolbox/lib/autocomplete';
     import Avatar from 'react-toolbox/lib/avatar';
@@ -1198,6 +1287,7 @@ declare module 'react-toolbox' {
     import {List, ListItem, ListCheckbox, ListSubHeader, ListDivider} from 'react-toolbox/lib/list';
     import {Menu, IconMenu, MenuItem, MenuDivider} from 'react-toolbox/lib/menu';
     import Navigation from 'react-toolbox/lib/navigation';
+    import Overlay from 'react-toolbox/lib/overlay';
     import ProgressBar from 'react-toolbox/lib/progress_bar';
     import {RadioGroup, RadioButton} from 'react-toolbox/lib/radio';
     import Slider from 'react-toolbox/lib/slider';
@@ -1208,6 +1298,7 @@ declare module 'react-toolbox' {
     import Tooltip from 'react-toolbox/lib/tooltip';
 
     export {
+    ActivableRendererFactory,
     AppBar,
     Autocomplete,
     Avatar,
@@ -1224,6 +1315,7 @@ declare module 'react-toolbox' {
     List, ListItem, ListCheckbox, ListSubHeader, ListDivider,
     Menu, IconMenu, MenuItem, MenuDivider,
     Navigation,
+    Overlay,
     ProgressBar,
     RadioGroup, RadioButton,
     Slider,

From d68340e541ba691db456164232fdf36bf76f9d97 Mon Sep 17 00:00:00 2001
From: Robert Parker <robert@flavorus.com>
Date: Wed, 27 Apr 2016 12:49:39 -0700
Subject: [PATCH 0501/1024] Add <Chip> export

---
 react-toolbox.d.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/react-toolbox.d.ts b/react-toolbox.d.ts
index 458775b52..b032dd0f2 100644
--- a/react-toolbox.d.ts
+++ b/react-toolbox.d.ts
@@ -1162,6 +1162,10 @@ declare var Checkbox: typeof __RT.Checkbox;
 declare module 'react-toolbox/lib/checkbox' {
     export default Checkbox;
 }
+declare var Chip: typeof __RT.Chip;
+declare module 'react-toolbox/lib/chip' {
+    export default Chip;
+}
 declare var DatePicker: typeof __RT.DatePicker;
 declare module 'react-toolbox/lib/date_picker' {
     export default DatePicker;

From 39ad60a11482c8691a258bb1d1d971128f2bef5b Mon Sep 17 00:00:00 2001
From: Ro Savage <rowan.savage@gmail.com>
Date: Fri, 22 Apr 2016 16:24:37 +1200
Subject: [PATCH 0502/1024] Fix DatePickerDialog to correctly display the
 previously selected date

---
 components/date_picker/DatePickerDialog.js | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/components/date_picker/DatePickerDialog.js b/components/date_picker/DatePickerDialog.js
index bfb824b57..7181c45da 100644
--- a/components/date_picker/DatePickerDialog.js
+++ b/components/date_picker/DatePickerDialog.js
@@ -24,10 +24,19 @@ class CalendarDialog extends React.Component {
   };
 
   state = {
-    date: this.props.value,
-    display: 'months'
+    display: 'months',
+    date: this.props.value
   };
 
+  componentWillMount () {
+    this.updateStateDate(this.props.value);
+
+  }
+
+  componentWillReceiveProps (nextProps) {
+    this.updateStateDate(nextProps.value);
+  }
+
   handleCalendarChange = (value, dayClick) => {
     const state = {display: 'months', date: value};
     if (time.dateOutOfRange(value, this.props.minDate, this.props.maxDate)) {
@@ -47,6 +56,14 @@ class CalendarDialog extends React.Component {
     this.setState({ display });
   };
 
+  updateStateDate = (date) => {
+    if (Object.prototype.toString.call(date) === '[object Date]') {
+      this.setState({
+        date
+      });
+    }
+  }
+
   actions = [
     { label: 'Cancel', className: style.button, onClick: this.props.onDismiss },
     { label: 'Ok', className: style.button, onClick: this.handleSelect }

From 12e572f7feef301516990dd20bf0d21f1a076748 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lauri=20L=C3=BC=C3=BCs?= <lyys.lauri@gmail.com>
Date: Thu, 28 Apr 2016 02:09:27 +0300
Subject: [PATCH 0503/1024] Autocomplete element size

Suggestion element will render font size based on body size, so these elements getting to small.
This change will make suggestion element to be consistent size of other elements.
---
 components/autocomplete/style.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/autocomplete/style.scss b/components/autocomplete/style.scss
index 0a6cb65e0..93928f26d 100644
--- a/components/autocomplete/style.scss
+++ b/components/autocomplete/style.scss
@@ -56,6 +56,7 @@
 
 .suggestion {
   padding: $autocomplete-suggestion-padding;
+  font-size: $input-field-font-size;
   cursor: pointer;
   &.active {
     background-color: $autocomplete-suggestion-active-background;

From d7b820a7cf8d636fbe1d85686db32d618d024b4a Mon Sep 17 00:00:00 2001
From: Ro Savage <rowan.savage@gmail.com>
Date: Thu, 28 Apr 2016 12:12:59 +1200
Subject: [PATCH 0504/1024] Hotfix for incorrect ternary statement in
 DatePicker

---
 components/date_picker/DatePicker.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/date_picker/DatePicker.js b/components/date_picker/DatePicker.js
index 799e52ea0..721045857 100644
--- a/components/date_picker/DatePicker.js
+++ b/components/date_picker/DatePicker.js
@@ -45,7 +45,7 @@ class DatePicker extends React.Component {
     const { inputClassName, value } = this.props;
     const inputFormat = this.props.inputFormat || time.formatDate;
     const date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined;
-    const formattedDate = date === undefined ? inputFormat(value) : '';
+    const formattedDate = date === undefined ? '' : inputFormat(value);
 
     return (
       <div data-react-toolbox='date-picker'>

From 77c74bfb555f0e4bbd8209b1aa788200e107bf4d Mon Sep 17 00:00:00 2001
From: Hamza M Purra <gm00cell@gmail.com>
Date: Thu, 28 Apr 2016 17:15:40 +0400
Subject: [PATCH 0505/1024] Add icon prop to DatePicker

---
 components/date_picker/DatePicker.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/components/date_picker/DatePicker.js b/components/date_picker/DatePicker.js
index 799e52ea0..67b578a52 100644
--- a/components/date_picker/DatePicker.js
+++ b/components/date_picker/DatePicker.js
@@ -20,6 +20,10 @@ class DatePicker extends React.Component {
     value: React.PropTypes.oneOfType([
       React.PropTypes.instanceOf(Date),
       React.PropTypes.string
+    ]),
+    icon: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.element
     ])
   };
 
@@ -56,6 +60,7 @@ class DatePicker extends React.Component {
           label={this.props.label}
           readOnly
           type='text'
+          icon={this.props.icon}
           value={formattedDate}
         />
         <DatePickerDialog

From aaa1cfa9733b03358ca55acafaa0f193e79b8634 Mon Sep 17 00:00:00 2001
From: Luis Merino <mail@luismerino.name>
Date: Tue, 3 May 2016 12:01:00 +0200
Subject: [PATCH 0506/1024] Exclude JSX navigation div if there are no actions

Due to the navigation padding, the layout of the parent dialog is altered. When there are no actions, the layout fits if we leave out the <nav> element when rendering..
---
 components/dialog/Dialog.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/dialog/Dialog.js b/components/dialog/Dialog.js
index 3e56d9d1d..e92f828fd 100644
--- a/components/dialog/Dialog.js
+++ b/components/dialog/Dialog.js
@@ -29,7 +29,7 @@ const Dialog = (props) => {
           {props.title ? <h6 className={style.title}>{props.title}</h6> : null}
           {props.children}
         </section>
-        {actions
+        {actions.length
           ? <nav role='navigation' className={style.navigation}>
               {actions}
             </nav>

From ec84e6c3b31a4d9673fc9677f0d0038cf5d71f2b Mon Sep 17 00:00:00 2001
From: Tyrone Tudehope <tyrone.tudehope@lamacs.co.za>
Date: Tue, 10 May 2016 09:53:35 +0200
Subject: [PATCH 0507/1024] Media queries for dialogs to set wider widths for
 smaller screens

---
 components/dialog/style.scss | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/components/dialog/style.scss b/components/dialog/style.scss
index 13074510e..194ee7714 100644
--- a/components/dialog/style.scss
+++ b/components/dialog/style.scss
@@ -23,10 +23,22 @@
 
 .small {
   width: 30vw;
+  
+  @media screen and (max-width: $layout-breakpoint-sm-tablet) {
+	width: 50vw;
+  }
+  
+  @media screen and (max-width: $layout-breakpoint-xs) {
+	width: 75vw;
+  }
 }
 
 .normal {
   width: 50vw;
+  
+  @media screen and (max-width: $layout-breakpoint-xs) {
+	width: 96vw;
+  }
 }
 
 .large {

From 85048a39a8e6427f64f01d55d71bdf02ba36ba63 Mon Sep 17 00:00:00 2001
From: Galeel <gbhasha@gmail.com>
Date: Tue, 10 May 2016 18:41:35 +0530
Subject: [PATCH 0508/1024] mixins is already imported in base, hence removed
 the redundant import | Galeel

---
 components/button/style.scss  | 1 -
 components/chip/style.scss    | 1 -
 components/tooltip/style.scss | 1 -
 3 files changed, 3 deletions(-)

diff --git a/components/button/style.scss b/components/button/style.scss
index 0fd3ec151..a8731204a 100644
--- a/components/button/style.scss
+++ b/components/button/style.scss
@@ -1,5 +1,4 @@
 @import "http://github.com/base";
-@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 %button {
diff --git a/components/chip/style.scss b/components/chip/style.scss
index 1b3002555..5033f0d06 100644
--- a/components/chip/style.scss
+++ b/components/chip/style.scss
@@ -1,5 +1,4 @@
 @import "http://github.com/base";
-@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .chip {
diff --git a/components/tooltip/style.scss b/components/tooltip/style.scss
index 58903b3a2..85b9867a0 100644
--- a/components/tooltip/style.scss
+++ b/components/tooltip/style.scss
@@ -1,5 +1,4 @@
 @import "http://github.com/base";
-@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .root {

From b84a07f76d526ba79c753df70d54151d0990eebf Mon Sep 17 00:00:00 2001
From: Galeel <gbhasha@gmail.com>
Date: Tue, 10 May 2016 19:02:02 +0530
Subject: [PATCH 0509/1024] Update dependencies

---
 docs/package.json | 38 ++++++++++++++---------------
 package.json      | 61 ++++++++++++++++++++++++-----------------------
 2 files changed, 50 insertions(+), 49 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index 5e8d8e3e3..21a3335f0 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -9,45 +9,45 @@
     "deploy": "gh-pages -d build"
   },
   "dependencies": {
-    "babel-standalone": "^6.7.4",
-    "classnames": "^2.2.3",
-    "codemirror": "^5.10.0",
-    "history": "^2.0.1",
-    "react": "^15.0.1",
-    "react-dom": "^15.0.1",
-    "react-router": "^2.1.1"
+    "babel-standalone": "^6.7.7",
+    "classnames": "^2.2.5",
+    "codemirror": "^5.14.2",
+    "history": "^2.1.1",
+    "react": "^15.0.2",
+    "react-dom": "^15.0.2",
+    "react-router": "^2.4.0"
   },
   "devDependencies": {
     "autoprefixer": "^6.3.6",
-    "babel-core": "^6.7.6",
-    "babel-eslint": "^6.0.2",
+    "babel-core": "^6.8.0",
+    "babel-eslint": "^6.0.4",
     "babel-loader": "^6.2.4",
     "babel-plugin-react-transform": "^2.0.2",
     "babel-preset-es2015": "^6.6.0",
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-0": "^6.5.0",
     "babel-preset-stage-2": "^6.5.0",
-    "cross-env": "^1.0.5",
+    "cross-env": "^1.0.7",
     "css-loader": "^0.23.1",
-    "express": "^4.13.3",
+    "express": "^4.13.4",
     "extract-text-webpack-plugin": "^1.0.1",
     "gh-pages": "^0.11.0",
     "highlight-loader": "git://github.com/javivelasco/highlight-loader.git#master",
     "highlight.js": "^9.3.0",
-    "html-loader": "^0.4.0",
-    "html-webpack-plugin": "^2.15.0",
+    "html-loader": "^0.4.3",
+    "html-webpack-plugin": "^2.16.1",
     "markdown-loader": "^0.1.7",
-    "node-sass": "^3.4.2",
-    "postcss-loader": "^0.8.2",
+    "node-sass": "^3.7.0",
+    "postcss-loader": "^0.9.1",
     "raw-loader": "^0.5.1",
     "react-transform-catch-errors": "^1.0.2",
-    "react-transform-hmr": "^1.0.1",
-    "redbox-react": "^1.2.3",
+    "react-transform-hmr": "^1.0.4",
+    "redbox-react": "^1.2.4",
     "sass-loader": "^3.2.0",
     "style-loader": "^0.13.1",
-    "toolbox-loader": "0.0.2",
+    "toolbox-loader": "0.0.3",
     "transfer-webpack-plugin": "^0.1.4",
-    "webpack": "^1.12.15",
+    "webpack": "^1.13.0",
     "webpack-dev-middleware": "^1.6.1",
     "webpack-hot-middleware": "^2.10.0"
   },
diff --git a/package.json b/package.json
index af3bf724a..45446e005 100644
--- a/package.json
+++ b/package.json
@@ -36,58 +36,59 @@
     "toolkit"
   ],
   "dependencies": {
-    "classnames": "^2.2.1"
+    "classnames": "^2.2.5"
   },
   "devDependencies": {
     "autoprefixer": "^6.3.6",
-    "babel-cli": "^6.7.5",
-    "babel-core": "^6.7.6",
-    "babel-eslint": "^6.0.2",
+    "babel-cli": "^6.8.0",
+    "babel-core": "^6.8.0",
+    "babel-eslint": "^6.0.4",
     "babel-loader": "^6.2.4",
     "babel-plugin-react-transform": "^2.0.2",
-    "babel-polyfill": "^6.7.4",
+    "babel-polyfill": "^6.8.0",
     "babel-preset-es2015": "^6.6.0",
-    "babel-preset-react": "^6.3.13",
-    "babel-preset-stage-0": "^6.3.13",
-    "bluebird": "^3.3.4",
-    "core-js": "^2.2.2",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-0": "^6.5.0",
+    "bluebird": "^3.3.5",
+    "core-js": "^2.4.0",
     "cpx": "^1.3.1",
-    "cross-env": "^1.0.5",
+    "cross-env": "^1.0.7",
     "css-loader": "^0.23.1",
-    "eslint": "^2.7.0",
+    "eslint": "^2.9.0",
     "eslint-plugin-babel": "^3.2.0",
-    "eslint-plugin-react": "^4.3.0",
-    "expect": "^1.16.0",
-    "express": "^4.13.3",
+    "eslint-plugin-react": "^5.1.1",
+    "expect": "^1.20.1",
+    "express": "^4.13.4",
     "extract-text-webpack-plugin": "^1.0.1",
     "glob": "^7.0.3",
     "karma": "^0.13.22",
-    "karma-chrome-launcher": "^0.2.3",
-    "karma-cli": "^0.1.2",
-    "karma-mocha": "^0.2.2",
+    "karma-chrome-launcher": "^1.0.1",
+    "karma-cli": "^1.0.0",
+    "karma-mocha": "^1.0.1",
     "karma-phantomjs-launcher": "^1.0.0",
     "karma-webpack": "^1.7.0",
-    "mocha": "^2.3.4",
-    "node-sass": "^3.4.2",
+    "mocha": "^2.4.5",
+    "node-sass": "^3.7.0",
     "normalize.css": "^4.1.1",
     "phantomjs": "^2.1.7",
     "phantomjs-polyfill": "0.0.2",
-    "postcss-loader": "^0.8.2",
-    "react": "^15.0.1",
-    "react-addons-css-transition-group": "^15.0.1",
-    "react-addons-test-utils": "^15.0.1",
+    "phantomjs-prebuilt": "^2.1.7",
+    "postcss-loader": "^0.9.1",
+    "react": "^15.0.2",
+    "react-addons-css-transition-group": "^15.0.2",
+    "react-addons-test-utils": "^15.0.2",
     "react-docgen": "^2.8.2",
-    "react-dom": "^15.0.1",
-    "react-transform-catch-errors": "^1.0.0",
+    "react-dom": "^15.0.2",
+    "react-transform-catch-errors": "^1.0.2",
     "react-transform-hmr": "^1.0.4",
-    "redbox-react": "^1.2.3",
-    "rimraf": "^2.5.0",
-    "sass-lint": "1.5.1",
+    "redbox-react": "^1.2.4",
+    "rimraf": "^2.5.2",
+    "sass-lint": "1.7.0",
     "sass-loader": "^3.2.0",
     "sinon": "git://github.com/sinonjs/sinon.git#b672042043517b9f84e14ed0fb8265126168778a",
     "style-loader": "^0.13.1",
-    "toolbox-loader": "0.0.2",
-    "webpack": "^1.12.15",
+    "toolbox-loader": "0.0.3",
+    "webpack": "^1.13.0",
     "webpack-dev-middleware": "^1.6.1",
     "webpack-hot-middleware": "^2.10.0"
   },

From 8a7ddc7b96f14a87b8f1e5f4e8ed07ceb79a13ae Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 20 Apr 2016 20:02:38 +0200
Subject: [PATCH 0510/1024] Move body locker from Portal to Overlay

---
 components/hoc/Portal.js      | 2 --
 components/overlay/Overlay.js | 6 ++++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/components/hoc/Portal.js b/components/hoc/Portal.js
index b9dc5c723..015dcba8d 100644
--- a/components/hoc/Portal.js
+++ b/components/hoc/Portal.js
@@ -55,7 +55,6 @@ class Portal extends Component {
       : React.Children.only(this.props.children);
 
     if (overlay !== null) {
-      if (this.props.lockBody) document.body.style.overflow = 'hidden';
       this._mountOverlayTarget();
       this._overlayInstance = ReactDOM.unstable_renderSubtreeIntoContainer(
         this, overlay, this._overlayTarget
@@ -68,7 +67,6 @@ class Portal extends Component {
 
   _unrenderOverlay () {
     if (this._overlayTarget) {
-      if (this.props.lockBody) document.body.style.overflow = 'scroll';
       ReactDOM.unmountComponentAtNode(this._overlayTarget);
       this._overlayInstance = null;
     }
diff --git a/components/overlay/Overlay.js b/components/overlay/Overlay.js
index 5f5a45e58..467221f36 100644
--- a/components/overlay/Overlay.js
+++ b/components/overlay/Overlay.js
@@ -20,9 +20,15 @@ class Overlay extends React.Component {
   componentDidMount () {
     if (this.props.active) {
       this.escKeyListener = document.body.addEventListener('keydown', this.handleEscKey.bind(this));
+      document.body.style.overflow = 'hidden';
     }
   }
 
+  componentWillUpdate (nextProps) {
+    if (nextProps.active && !this.props.active) document.body.style.overflow = 'hidden';
+    if (!nextProps.active && this.props.active) document.body.style.overflow = null;
+  }
+
   componentDidUpdate () {
     if (this.props.active && !this.escKeyListener) {
       this.escKeyListener = document.body.addEventListener('keydown', this.handleEscKey.bind(this));

From 91bd684ec6c7ebb6202d9fa91a4106661a667c63 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 20 Apr 2016 20:02:54 +0200
Subject: [PATCH 0511/1024] Reduce z-index for spec page

---
 spec/style.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/spec/style.scss b/spec/style.scss
index 3eb00af99..60208e2e2 100644
--- a/spec/style.scss
+++ b/spec/style.scss
@@ -38,7 +38,6 @@ $offset: 1.8 * $unit;
 }
 
 .appbar {
-  z-index: 999 !important;
   display: flex;
   > h1 {
     flex-grow: 1;

From 33ff49119b49227d269b28cbc2caf1d57c31939e Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 10 May 2016 21:33:34 +0200
Subject: [PATCH 0512/1024] Fix linter errors

---
 components/date_picker/DatePicker.js |  8 ++++----
 components/table/Table.js            | 15 ++++++---------
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/components/date_picker/DatePicker.js b/components/date_picker/DatePicker.js
index def5ab162..7ca0dcf43 100644
--- a/components/date_picker/DatePicker.js
+++ b/components/date_picker/DatePicker.js
@@ -11,6 +11,10 @@ class DatePicker extends React.Component {
     autoOk: React.PropTypes.bool,
     className: React.PropTypes.string,
     error: React.PropTypes.string,
+    icon: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.element
+    ]),
     inputClassName: React.PropTypes.string,
     inputFormat: React.PropTypes.func,
     label: React.PropTypes.string,
@@ -20,10 +24,6 @@ class DatePicker extends React.Component {
     value: React.PropTypes.oneOfType([
       React.PropTypes.instanceOf(Date),
       React.PropTypes.string
-    ]),
-    icon: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.element
     ])
   };
 
diff --git a/components/table/Table.js b/components/table/Table.js
index 8ced4366c..18bd50925 100644
--- a/components/table/Table.js
+++ b/components/table/Table.js
@@ -8,10 +8,10 @@ class Table extends React.Component {
     className: React.PropTypes.string,
     heading: React.PropTypes.bool,
     model: React.PropTypes.object,
+    multiSelectable: React.PropTypes.bool,
     onChange: React.PropTypes.func,
     onSelect: React.PropTypes.func,
     selectable: React.PropTypes.bool,
-    multiSelectable: React.PropTypes.bool,
     selected: React.PropTypes.array,
     source: React.PropTypes.array
   };
@@ -37,11 +37,8 @@ class Table extends React.Component {
     if (this.props.onSelect) {
       const position = this.props.selected.indexOf(index);
       let newSelected = [...this.props.selected];
-
-      if (position !== -1) {
-        newSelected.splice(position, 1);
-      }
-      else if (this.props.multiSelectable) {
+      if (position !== -1) { newSelected.splice(position, 1); }
+      if (position !== -1 && this.props.multiSelectable) {
         newSelected.push(index);
       } else {
         newSelected = [index];
@@ -56,7 +53,7 @@ class Table extends React.Component {
     }
   };
 
-  renderHead() {
+  renderHead () {
     if (this.props.heading) {
       const {model, selected, source, selectable, multiSelectable} = this.props;
       const isSelected = selected.length === source.length;
@@ -72,7 +69,7 @@ class Table extends React.Component {
     }
   }
 
-  renderBody() {
+  renderBody () {
     const rows = this.props.source.map((data, index) => {
       return (
         <TableRow
@@ -91,7 +88,7 @@ class Table extends React.Component {
     return <tbody>{rows}</tbody>;
   }
 
-  render() {
+  render () {
     let className = style.root;
     if (this.props.className) className += ` ${this.props.className}`;
     return (

From c7f8d8357a0cdf73b0e77bd333683606a57c0e1e Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 15 May 2016 13:23:55 +0200
Subject: [PATCH 0513/1024] Add themr to AppBar

---
 .babelrc                                      |  2 +-
 components/app_bar/AppBar.js                  | 21 +++--
 components/app_bar/readme.md                  | 14 +++-
 components/app_bar/{style.scss => theme.scss} |  2 +-
 package.json                                  |  3 +-
 spec/root.js                                  | 79 ++++++++++---------
 spec/theme.js                                 |  3 +
 webpack.config.development.js                 |  4 +-
 8 files changed, 73 insertions(+), 55 deletions(-)
 rename components/app_bar/{style.scss => theme.scss} (97%)
 create mode 100644 spec/theme.js

diff --git a/.babelrc b/.babelrc
index 4ef551af4..420173781 100644
--- a/.babelrc
+++ b/.babelrc
@@ -16,4 +16,4 @@
       ]
     }
   }
-}
\ No newline at end of file
+}
diff --git a/components/app_bar/AppBar.js b/components/app_bar/AppBar.js
index c17d2d46f..fe6253685 100644
--- a/components/app_bar/AppBar.js
+++ b/components/app_bar/AppBar.js
@@ -1,11 +1,11 @@
 import React from 'react';
-import ClassNames from 'classnames';
-import style from './style';
+import { themr } from 'react-css-themr';
+import classnames from 'classnames';
 
-const AppBar = (props) => {
-  const className = ClassNames(style.root, {
-    [style.fixed]: props.fixed,
-    [style.flat]: props.flat
+const AppBar = ({ theme, ...props }) => {
+  const className = classnames(theme.appBar, {
+    [theme.fixed]: props.fixed,
+    [theme.flat]: props.flat
   }, props.className);
 
   return (
@@ -19,7 +19,12 @@ AppBar.propTypes = {
   children: React.PropTypes.node,
   className: React.PropTypes.string,
   fixed: React.PropTypes.bool,
-  flat: React.PropTypes.bool
+  flat: React.PropTypes.bool,
+  theme: React.PropTypes.shape({
+    appBar: React.PropTypes.string.isRequired,
+    fixed: React.PropTypes.string.isRequired,
+    flat: React.PropTypes.string.isRequired
+  })
 };
 
 AppBar.defaultProps = {
@@ -28,4 +33,4 @@ AppBar.defaultProps = {
   flat: false
 };
 
-export default AppBar;
+export default themr('ToolboxAppBar')(AppBar);
diff --git a/components/app_bar/readme.md b/components/app_bar/readme.md
index 6e41073c3..706c72e7d 100644
--- a/components/app_bar/readme.md
+++ b/components/app_bar/readme.md
@@ -4,17 +4,16 @@ The app bar is a special kind of toolbar that’s used for branding, navigation,
 
 ```jsx
 import AppBar from 'react-toolbox/lib/app_bar';
+import theme from 'react-toolbox/lib/app_bar/style';
 
 const AppBarTest = () => (
-  <AppBar fixed flat>
+  <AppBar theme={theme} fixed flat>
     <a href="http://github.com/home">React Toolbox Docs</a>
     <Navigation />
   </AppBar>
 );
 ```
 
-Coming soon, the `AppBar` component will support arbitrary content attributes for left and right content and a title, for now it's just a wrapper.
-
 ## Properties
 
 | Name          | Type    | Default  | Description|
@@ -22,3 +21,12 @@ Coming soon, the `AppBar` component will support arbitrary content attributes fo
 | `className` | `String`  | `''`     | Set a class for the root component.|
 | `fixed`     | `Bool`    | `false`  | Determine if the bar should have position `fixed` or `relative`.|
 | `flat`      | `Bool`    | `false`  | If true, the AppBar shows a shadow.|
+| `theme`     | `Object`  | `null`   | Classnames object defining the component style.|
+
+## Theme interface
+
+| Name     | Description|
+|:---------|:-----------|
+| `appBar` | Root class.|
+| `fixed`  | Implemented when the app bar is fixed.|
+| `flat`   | Implemented when the app bar is flat.|
diff --git a/components/app_bar/style.scss b/components/app_bar/theme.scss
similarity index 97%
rename from components/app_bar/style.scss
rename to components/app_bar/theme.scss
index 762232af2..50ad328b6 100644
--- a/components/app_bar/style.scss
+++ b/components/app_bar/theme.scss
@@ -1,7 +1,7 @@
 @import "http://github.com/base";
 @import "http://github.com/config";
 
-.root {
+.appBar {
   display: flex;
   height: $appbar-height;
   align-items: center;
diff --git a/package.json b/package.json
index 45446e005..ba10456f3 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,8 @@
     "toolkit"
   ],
   "dependencies": {
-    "classnames": "^2.2.5"
+    "classnames": "^2.2.5",
+    "react-css-themr": "^1.0.0"
   },
   "devDependencies": {
     "autoprefixer": "^6.3.6",
diff --git a/spec/root.js b/spec/root.js
index 9757351dc..ac2d4a303 100644
--- a/spec/root.js
+++ b/spec/root.js
@@ -1,5 +1,8 @@
 /* global VERSION */
 import React from 'react';
+import { ThemeProvider } from 'react-css-themr';
+import theme from './theme';
+
 import AppBarToolbox from '../components/app_bar';
 import Avatar from './components/avatar';
 import ButtonToolbox from '../components/button';
@@ -27,47 +30,45 @@ import Tabs from './components/tabs';
 import Tooltip from './components/tooltip';
 import style from './style';
 
-const _hrefProject = () => {
-  window.href = 'http://react-toolbox/';
-};
-
 const Root = () => (
-  <div className={style.app}>
-    <AppBarToolbox fixed flat className={style.appbar}>
-      <h1>React Toolbox <small>Spec {VERSION}</small></h1>
-      <ButtonToolbox
-        accent
-        className={style.github}
-        icon='web'
-        floating
-        onClick={_hrefProject}
-      />
-    </AppBarToolbox>
+  <ThemeProvider theme={theme}>
+    <div className={style.app}>
+      <AppBarToolbox className={style.appbar} fixed flat>
+        <h1>React Toolbox <small>Spec {VERSION}</small></h1>
+        <ButtonToolbox
+          accent
+          className={style.github}
+          icon='web'
+          floating
+          onClick={() => {window.href = 'http://react-toolbox/';}}
+        />
+      </AppBarToolbox>
 
-    <Autocomplete />
-    <Avatar />
-    <Button />
-    <Card />
-    <Checkbox />
-    <Chip />
-    <Dialog />
-    <Drawer />
-    <Dropdown />
-    <IconMenu />
-    <Input />
-    <Layout />
-    <List />
-    <Menu />
-    <Pickers />
-    <Progress />
-    <Radio />
-    <Slider />
-    <Snackbar />
-    <Switch />
-    <Table />
-    <Tabs />
-    <Tooltip />
-  </div>
+      <Autocomplete />
+      <Avatar />
+      <Button />
+      <Card />
+      <Checkbox />
+      <Chip />
+      <Dialog />
+      <Drawer />
+      <Dropdown />
+      <IconMenu />
+      <Input />
+      <Layout />
+      <List />
+      <Menu />
+      <Pickers />
+      <Progress />
+      <Radio />
+      <Slider />
+      <Snackbar />
+      <Switch />
+      <Table />
+      <Tabs />
+      <Tooltip />
+    </div>
+  </ThemeProvider>
 );
 
 export default Root;
diff --git a/spec/theme.js b/spec/theme.js
new file mode 100644
index 000000000..be42f46e9
--- /dev/null
+++ b/spec/theme.js
@@ -0,0 +1,3 @@
+import ToolboxAppBar from '../components/app_bar/theme.scss';
+
+export default { ToolboxAppBar };
diff --git a/webpack.config.development.js b/webpack.config.development.js
index 90127281e..95fecdcfb 100644
--- a/webpack.config.development.js
+++ b/webpack.config.development.js
@@ -6,7 +6,7 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 module.exports = {
   context: __dirname,
-	devtool: 'inline-source-map',
+  devtool: 'inline-source-map',
   entry: [
     'webpack-hot-middleware/client',
     './spec/index.js'
@@ -25,7 +25,7 @@ module.exports = {
       {
         test: /\.js$/,
         loader: 'babel',
-        exclude: /(node_modules)/
+        exclude: [/(node_modules)/, /react-css-themr/]
       }, {
         test: /\.(scss|css)$/,
         loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap')

From fc6b702bb9c115b381c9646f9e4d69cb8454d117 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 15 May 2016 13:36:13 +0200
Subject: [PATCH 0514/1024] =?UTF-8?q?=F0=9F=98=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/app_bar/AppBar.js | 2 +-
 components/app_bar/readme.md | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/app_bar/AppBar.js b/components/app_bar/AppBar.js
index fe6253685..364da06c3 100644
--- a/components/app_bar/AppBar.js
+++ b/components/app_bar/AppBar.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import { themr } from 'react-css-themr';
 import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 
 const AppBar = ({ theme, ...props }) => {
   const className = classnames(theme.appBar, {
diff --git a/components/app_bar/readme.md b/components/app_bar/readme.md
index 706c72e7d..88cf89148 100644
--- a/components/app_bar/readme.md
+++ b/components/app_bar/readme.md
@@ -23,7 +23,9 @@ const AppBarTest = () => (
 | `flat`      | `Bool`    | `false`  | If true, the AppBar shows a shadow.|
 | `theme`     | `Object`  | `null`   | Classnames object defining the component style.|
 
-## Theme interface
+## Theming
+
+You can take a look to the `_config.scss` variables. The theme should implement the following interface:
 
 | Name     | Description|
 |:---------|:-----------|

From 1974336a56b7fa7707e18b959ce05da01bc0caa4 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 16 May 2016 13:39:59 +0200
Subject: [PATCH 0515/1024] Migrate Avatar to themr

---
 components/avatar/Avatar.js                  | 27 +++++++++++---------
 components/avatar/readme.md                  | 22 ++++++++++++----
 components/avatar/{style.scss => theme.scss} |  1 +
 spec/theme.js                                |  6 ++++-
 4 files changed, 38 insertions(+), 18 deletions(-)
 rename components/avatar/{style.scss => theme.scss} (96%)

diff --git a/components/avatar/Avatar.js b/components/avatar/Avatar.js
index f3ed1b709..f6813b696 100644
--- a/components/avatar/Avatar.js
+++ b/components/avatar/Avatar.js
@@ -1,24 +1,27 @@
 import React, {PropTypes} from 'react';
+import { themr } from 'react-css-themr';
 import FontIcon from '../font_icon';
-import style from './style';
 
-const Avatar = ({children, className, icon, image, title, ...other}) => {
-  return (
-    <div data-react-toolbox='avatar' className={`${style.avatar} ${className}`} {...other}>
-      {children}
-      {typeof image === 'string' ? <img className={style.image} src={image} title={title} /> : image}
-      {typeof icon === 'string' ? <FontIcon className={style.letter} value={icon} /> : icon}
-      {title ? <span className={style.letter}>{title[0]}</span> : null}
-    </div>
-  );
-};
+const Avatar = ({children, className, icon, image, theme, title, ...other}) => (
+  <div data-react-toolbox='avatar' className={`${theme.avatar} ${className}`} {...other}>
+    {children}
+    {typeof image === 'string' ? <img className={theme.image} src={image} title={title} /> : image}
+    {typeof icon === 'string' ? <FontIcon className={theme.letter} value={icon} /> : icon}
+    {title ? <span className={theme.letter}>{title[0]}</span> : null}
+  </div>
+);
 
 Avatar.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   icon: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   image: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  theme: React.PropTypes.shape({
+    avatar: React.PropTypes.string.isRequired,
+    image: React.PropTypes.string.isRequired,
+    letter: React.PropTypes.string.isRequired
+  }),
   title: PropTypes.string
 };
 
-export default Avatar;
+export default themr('ToolboxAvatar')(Avatar);
diff --git a/components/avatar/readme.md b/components/avatar/readme.md
index c7a8b64b3..031bff8f3 100644
--- a/components/avatar/readme.md
+++ b/components/avatar/readme.md
@@ -5,6 +5,7 @@ Avatars can be used to represent people. This offer users the ability to persona
 <!-- example -->
 ```jsx
 import Avatar from 'react-toolbox/lib/avatar';
+import theme from 'react-toolbox/lib/avatar/theme';
 
 const GithubIcon = () => (
   <svg viewBox="0 0 284 277">
@@ -14,11 +15,11 @@ const GithubIcon = () => (
 
 const AvatarTest = () => (
   <div>
-    <Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />
-    <Avatar icon={<GithubIcon />}/>
-    <Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
-    <Avatar title="Javier" image="https://placeimg.com/80/80/animals"/>
-    <Avatar style={{backgroundColor: 'yellowgreen'}}><GithubIcon /></Avatar>
+    <Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" theme={theme} />
+    <Avatar icon={<GithubIcon />} theme={theme} />
+    <Avatar theme={theme}><img src="https://placeimg.com/80/80/animals"/></Avatar>
+    <Avatar title="Javier" image="https://placeimg.com/80/80/animals" theme={theme} />
+    <Avatar style={{backgroundColor: 'yellowgreen'}} theme={theme}><GithubIcon /></Avatar>
   </div>
 );
 ```
@@ -32,3 +33,14 @@ const AvatarTest = () => (
 | `icon`        | `String` or `Element`   |             | A key to identify an Icon from Material Design Icons or a custom Icon Element.|
 | `image`       | `String` or `Element`   |             | An image source or an image element. |
 | `title`       | `String`                | `''`        | A title for the image. If no image is provided, the first letter will be displayed as the avatar. |
+| `theme`       | `Object`  | `null`   | Classnames object defining the component style.|
+
+## Theming
+
+You can take a look to the `_config.scss` variables. The theme should implement the following interface:
+
+| Name     | Description|
+|:---------|:-----------|
+| `avatar` | Root class.|
+| `image`  | Used for the image if the avatar has image.|
+| `letter` | Used for the letter in case the avatar has no image.|
diff --git a/components/avatar/style.scss b/components/avatar/theme.scss
similarity index 96%
rename from components/avatar/style.scss
rename to components/avatar/theme.scss
index 29e796d30..714cc2f37 100644
--- a/components/avatar/style.scss
+++ b/components/avatar/theme.scss
@@ -10,6 +10,7 @@
   font-size: $avatar-font-size;
   color: $avatar-color;
   text-align: center;
+  vertical-align: middle;
   background-color: $avatar-background;
   border-radius: 50%;
   > svg {
diff --git a/spec/theme.js b/spec/theme.js
index be42f46e9..28288b53b 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -1,3 +1,7 @@
 import ToolboxAppBar from '../components/app_bar/theme.scss';
+import ToolboxAvatar from '../components/avatar/theme.scss';
 
-export default { ToolboxAppBar };
+export default {
+  ToolboxAppBar,
+  ToolboxAvatar
+};

From 34952ceb2b74c96c4d6bf5591670a08808d9ac03 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 16 May 2016 13:40:22 +0200
Subject: [PATCH 0516/1024] Fix typo in AppBar readme

---
 components/app_bar/readme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/app_bar/readme.md b/components/app_bar/readme.md
index 88cf89148..fdd9a48fb 100644
--- a/components/app_bar/readme.md
+++ b/components/app_bar/readme.md
@@ -4,7 +4,7 @@ The app bar is a special kind of toolbar that’s used for branding, navigation,
 
 ```jsx
 import AppBar from 'react-toolbox/lib/app_bar';
-import theme from 'react-toolbox/lib/app_bar/style';
+import theme from 'react-toolbox/lib/app_bar/theme';
 
 const AppBarTest = () => (
   <AppBar theme={theme} fixed flat>

From f4e74e95e766cbc35763875160881d30a3d0fa5f Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 16 May 2016 14:17:26 +0200
Subject: [PATCH 0517/1024] Migrate Ripple to themr

---
 components/ripple/Ripple.js                  | 26 +++++++++++++-------
 components/ripple/readme.md                  | 15 ++++++++++-
 components/ripple/{style.scss => theme.scss} |  2 +-
 spec/theme.js                                |  4 ++-
 4 files changed, 35 insertions(+), 12 deletions(-)
 rename components/ripple/{style.scss => theme.scss} (98%)

diff --git a/components/ripple/Ripple.js b/components/ripple/Ripple.js
index 382b53cc8..bb1f0f95a 100644
--- a/components/ripple/Ripple.js
+++ b/components/ripple/Ripple.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import ClassNames from 'classnames';
-import style from './style';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 import events from '../utils/events';
 import prefixer from '../utils/prefixer';
 
@@ -20,7 +20,7 @@ const Ripple = (options = {}) => {
   } = {...defaults, ...options};
 
   return ComposedComponent => {
-    return class RippledComponent extends React.Component {
+    class RippledComponent extends React.Component {
       static propTypes = {
         children: React.PropTypes.any,
         disabled: React.PropTypes.bool,
@@ -28,7 +28,13 @@ const Ripple = (options = {}) => {
         ripple: React.PropTypes.bool,
         rippleCentered: React.PropTypes.bool,
         rippleClassName: React.PropTypes.string,
-        rippleSpread: React.PropTypes.number
+        rippleSpread: React.PropTypes.number,
+        theme: React.PropTypes.shape({
+          active: React.PropTypes.string.isRequired,
+          ripple: React.PropTypes.string.isRequired,
+          restarting: React.PropTypes.string.isRequired,
+          wrapper: React.PropTypes.string.isRequired
+        })
       };
 
       static defaultProps = {
@@ -110,9 +116,9 @@ const Ripple = (options = {}) => {
             ...other
           } = this.props;
 
-          const rippleClassName = ClassNames(style.normal, {
-            [style.active]: this.state.active,
-            [style.restarting]: this.state.restarting
+          const rippleClassName = classnames(this.props.theme.ripple, {
+            [this.props.theme.active]: this.state.active,
+            [this.props.theme.restarting]: this.state.restarting
           }, className);
 
           const { left, top, width } = this.state;
@@ -124,14 +130,16 @@ const Ripple = (options = {}) => {
           return (
             <ComposedComponent {...other} onMouseDown={this.handleMouseDown}>
               {children ? children : null}
-              <span data-react-toolbox='ripple' className={style.wrapper} {...props}>
+              <span data-react-toolbox='ripple' className={this.props.theme.wrapper} {...props}>
                 <span ref='ripple' role='ripple' className={rippleClassName} style={rippleStyle} />
               </span>
             </ComposedComponent>
           );
         }
       }
-    };
+    }
+
+    return themr('ToolboxRipple')(RippledComponent);
   };
 };
 
diff --git a/components/ripple/readme.md b/components/ripple/readme.md
index c9bac5f52..9492dbdcf 100644
--- a/components/ripple/readme.md
+++ b/components/ripple/readme.md
@@ -5,6 +5,7 @@ The ripple is a surface reaction that happens when the user interacts with the c
 <!-- example -->
 ```jsx
 import Ripple from 'react-toolbox/lib/ripple';
+import theme from 'react-toolbox/lib/ripple/theme';
 
 const Link = (props) => (
   <a {...props} style={{position: 'relative'}}>
@@ -13,7 +14,7 @@ const Link = (props) => (
 );
 
 const RippleLink = Ripple({spread: 3})(Link);
-const RippleTest = () => <RippleLink href='#'>Test</RippleLink>;
+const RippleTest = () => <RippleLink href='#' theme={theme}>Test</RippleLink>;
 ```
 
 ## Properties
@@ -26,3 +27,15 @@ In any component you decorate with the Ripple you'd get some additional props:
 | `className`     | `String`    | `''`        | String to customize appearance (color and opacity for example).|
 | `onRippleEnded` | `Function`  |             | Function that will be called when the ripple animation ends. |
 | `spread`        | `Number`    | `2`         | Factor to indicate how much should the ripple spread under the component.|
+| `theme`         | `Object`    | `null`      | Classnames object defining the ripple style.|
+
+## Theming
+
+You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxRipple`, it should implement the following interface:
+
+| Name         | Description|
+|:-------------|:-----------|
+| `active`     | Applied when the ripple is active.|
+| `ripple`     | Root classname for the ripple.|
+| `restarting` | Applied when the ripple is restarting.|
+| `wrapper`    | Wrapper class to fit to the parent element.|
diff --git a/components/ripple/style.scss b/components/ripple/theme.scss
similarity index 98%
rename from components/ripple/style.scss
rename to components/ripple/theme.scss
index 00902d372..cfaf1d7d3 100644
--- a/components/ripple/style.scss
+++ b/components/ripple/theme.scss
@@ -22,7 +22,7 @@
   pointer-events: none;
 }
 
-.normal {
+.ripple {
   @extend %ripple;
   transition-duration: $ripple-duration;
   &.restarting {
diff --git a/spec/theme.js b/spec/theme.js
index 28288b53b..36a731f5a 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -1,7 +1,9 @@
 import ToolboxAppBar from '../components/app_bar/theme.scss';
 import ToolboxAvatar from '../components/avatar/theme.scss';
+import ToolboxRipple from '../components/ripple/theme.scss';
 
 export default {
   ToolboxAppBar,
-  ToolboxAvatar
+  ToolboxAvatar,
+  ToolboxRipple
 };

From cd83d8341fa7a85e036a6d2632fcdac846b58053 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 16 May 2016 14:18:30 +0200
Subject: [PATCH 0518/1024] Add themed key for avatar and appbar in readme

---
 components/app_bar/readme.md | 2 +-
 components/avatar/readme.md  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/app_bar/readme.md b/components/app_bar/readme.md
index fdd9a48fb..6012c6a3f 100644
--- a/components/app_bar/readme.md
+++ b/components/app_bar/readme.md
@@ -25,7 +25,7 @@ const AppBarTest = () => (
 
 ## Theming
 
-You can take a look to the `_config.scss` variables. The theme should implement the following interface:
+You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxAppBar`, it should implement the following interface:
 
 | Name     | Description|
 |:---------|:-----------|
diff --git a/components/avatar/readme.md b/components/avatar/readme.md
index 031bff8f3..3f76decc5 100644
--- a/components/avatar/readme.md
+++ b/components/avatar/readme.md
@@ -37,7 +37,7 @@ const AvatarTest = () => (
 
 ## Theming
 
-You can take a look to the `_config.scss` variables. The theme should implement the following interface:
+You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxAvatar`, it should implement the following interface:
 
 | Name     | Description|
 |:---------|:-----------|

From 3ba5c110fb7d1d18bab1a84319558334916ae740 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 16 May 2016 14:18:53 +0200
Subject: [PATCH 0519/1024] Simpler FontIcon component

---
 components/font_icon/FontIcon.js | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/components/font_icon/FontIcon.js b/components/font_icon/FontIcon.js
index b68dc7ebb..d5c00e393 100644
--- a/components/font_icon/FontIcon.js
+++ b/components/font_icon/FontIcon.js
@@ -1,18 +1,16 @@
 import React from 'react';
-import ClassNames from 'classnames';
+import classnames from 'classnames';
 
-const FontIcon = ({ children, className, value, ...other}) => {
-  const classes = ClassNames(
-    {'material-icons': typeof value === 'string'},
-    className
-  );
-  return (
-    <span className={classes} {...other} data-react-toolbox='font-icon'>
-      {value}
-      {children}
-    </span>
-  );
-};
+const FontIcon = ({ children, className, value, ...other}) => (
+  <span
+    data-react-toolbox='font-icon'
+    className={classnames({'material-icons': typeof value === 'string'}, className)}
+    {...other}
+  >
+    {value}
+    {children}
+  </span>
+);
 
 FontIcon.propTypes = {
   children: React.PropTypes.any,

From 29f89fe44d88129780d9cabd1a7597b71ec35262 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 16 May 2016 14:40:03 +0200
Subject: [PATCH 0520/1024] Migrate button to themr

---
 components/button/Button.js                  | 22 ++++++-----
 components/button/IconButton.js              | 21 +++++-----
 components/button/readme.md                  | 41 +++++++++++++++-----
 components/button/{style.scss => theme.scss} |  0
 spec/theme.js                                |  4 +-
 5 files changed, 58 insertions(+), 30 deletions(-)
 rename components/button/{style.scss => theme.scss} (100%)

diff --git a/components/button/Button.js b/components/button/Button.js
index 68574583d..d61fe0a66 100644
--- a/components/button/Button.js
+++ b/components/button/Button.js
@@ -1,8 +1,8 @@
 import React from 'react';
-import ClassNames from 'classnames';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 import FontIcon from '../font_icon';
 import Ripple from '../ripple';
-import style from './style';
 
 class Button extends React.Component {
   static propTypes = {
@@ -25,6 +25,7 @@ class Button extends React.Component {
     onMouseUp: React.PropTypes.func,
     primary: React.PropTypes.bool,
     raised: React.PropTypes.bool,
+    theme: React.PropTypes.object,
     type: React.PropTypes.string
   };
 
@@ -51,15 +52,15 @@ class Button extends React.Component {
 
   render () {
     const { accent, children, className, flat, floating, href, icon,
-            inverse, label, mini, neutral, primary, raised, ...others} = this.props;
+      inverse, label, mini, neutral, primary, theme, raised, ...others} = this.props;
     const element = href ? 'a' : 'button';
     const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
     const shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : 'flat';
 
-    const classes = ClassNames([style[shape]], {
-      [style[level]]: neutral,
-      [style.mini]: mini,
-      [style.inverse]: inverse
+    const classes = classnames([theme[shape]], {
+      [theme[level]]: neutral,
+      [theme.mini]: mini,
+      [theme.inverse]: inverse
     }, className);
 
     const props = {
@@ -74,12 +75,13 @@ class Button extends React.Component {
     };
 
     return React.createElement(element, props,
-      icon ? <FontIcon className={style.icon} value={icon}/> : null,
+      icon ? <FontIcon className={theme.icon} value={icon}/> : null,
       label,
       children
     );
   }
 }
 
-export default Ripple({centered: false})(Button);
-export { Button as RawButton };
+const RawButton = themr('ToolboxButton')(Button);
+export default themr('ToolboxButton')(Ripple({centered: false})(Button));
+export { RawButton as RawButton };
diff --git a/components/button/IconButton.js b/components/button/IconButton.js
index 48392bcde..e448960aa 100644
--- a/components/button/IconButton.js
+++ b/components/button/IconButton.js
@@ -1,8 +1,8 @@
 import React from 'react';
-import ClassNames from 'classnames';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 import FontIcon from '../font_icon';
 import Ripple from '../ripple';
-import style from './style';
 
 class IconButton extends React.Component {
   static propTypes = {
@@ -20,6 +20,7 @@ class IconButton extends React.Component {
     onMouseLeave: React.PropTypes.func,
     onMouseUp: React.PropTypes.func,
     primary: React.PropTypes.bool,
+    theme: React.PropTypes.object,
     type: React.PropTypes.string
   };
 
@@ -41,12 +42,13 @@ class IconButton extends React.Component {
   };
 
   render () {
-    const {accent, children, className, href, icon, inverse, neutral, primary, ...others} = this.props;
+    const {accent, children, className, href, icon, inverse, neutral,
+      primary, theme, ...others} = this.props;
     const element = href ? 'a' : 'button';
     const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
-    const classes = ClassNames([style.toggle], {
-      [style[level]]: neutral,
-      [style.inverse]: inverse
+    const classes = classnames([theme.toggle], {
+      [theme[level]]: neutral,
+      [theme.inverse]: inverse
     }, className);
 
     const props = {
@@ -61,11 +63,12 @@ class IconButton extends React.Component {
     };
 
     return React.createElement(element, props,
-      icon ? <FontIcon className={style.icon} value={icon}/> : null,
+      icon ? <FontIcon className={theme.icon} value={icon}/> : null,
       children
     );
   }
 }
 
-export default Ripple({centered: true})(IconButton);
-export { IconButton as RawIconButton };
+const RawIconButton = themr('ToolboxButton')(IconButton);
+export default themr('ToolboxButton')(Ripple({centered: true})(IconButton));
+export { RawIconButton as RawIconButton };
diff --git a/components/button/readme.md b/components/button/readme.md
index 3164c533b..9b917f868 100644
--- a/components/button/readme.md
+++ b/components/button/readme.md
@@ -5,6 +5,7 @@ A [button](https://www.google.com/design/spec/components/buttons.html) clearly c
 <!-- example -->
 ```jsx
 import {Button, IconButton} from 'react-toolbox/lib/button';
+import theme from 'react-toolbox/lib/button/theme';
 
 const GithubIcon = () => (
   <svg viewBox="0 0 284 277">
@@ -14,18 +15,18 @@ const GithubIcon = () => (
 
 const TestButtons = () => (
   <div>
-    <Button href='http://github.com/javivelasco' target='_blank' raised>
+    <Button href='http://github.com/javivelasco' target='_blank' raised theme={theme}>
       <GithubIcon /> Github
     </Button>
-    <Button icon='bookmark' label='Bookmark' accent />
-    <Button icon='bookmark' label='Bookmark' raised primary />
-    <Button icon='inbox' label='Inbox' flat />
-    <Button icon='add' floating />
-    <Button icon='add' floating accent mini />
-    <IconButton icon='favorite' accent />
-    <IconButton primary><GithubIcon /></IconButton>
-    <Button icon='add' label='Add this' flat primary />
-    <Button icon='add' label='Add this' flat disabled />
+    <Button icon='bookmark' label='Bookmark' accent theme={theme} />
+    <Button icon='bookmark' label='Bookmark' raised primary theme={theme} />
+    <Button icon='inbox' label='Inbox' flat theme={theme} />
+    <Button icon='add' floating theme={theme} />
+    <Button icon='add' floating accent mini theme={theme} />
+    <IconButton icon='favorite' accent theme={theme} />
+    <IconButton primary theme={theme}><GithubIcon /></IconButton>
+    <Button icon='add' label='Add this' flat primary theme={theme} />
+    <Button icon='add' label='Add this' flat disabled theme={theme} />
   </div>
 );
 ```
@@ -50,11 +51,31 @@ const TestButtons = () => (
 | `primary`         | `Boolean`             | `false`     | Indicates if the button should have primary color.|
 | `raised`          | `Boolean`             | `false`     | If true, the button will have a raised look. |
 | `ripple`          | `Boolean`             | `true`      | If true, component will have a ripple effect on click.|
+| `theme`           | `Object`              |             | Theme object will classnames that will be used to style the component.|
 
 By default it will have neutral colors and a flat aspect even though the `flat` property is `false` by default. Also, some properties exclude others, for example a button cannot be `flat` and `raised` at the same time.
 
 The `Button` component also accept children so if you want to provide a custom component and text instead of a `label` and `icon` you can do it too. Just check the examples.
 
+## Theming
+
+You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxButton`, theme should implement the following interface:
+
+| Name       | Description|
+|:-----------|:-----------|
+| `accent`   | Used for accent button.|
+| `flat`     | Used when the button is flat.|
+| `floating` | Used when the button is floating.|
+| `icon`     | For the icon inside a button.|
+| `inverse`  | Used when colors are inverted.|
+| `mini`     | Used for mini floating buttons.|
+| `neutral`  | For neutral colored buttons.|
+| `primary`  | For primary buttons.|
+| `raised`   | Used when the button is raised.|
+| `toggle`   | Used for toggle buttons.|
+
+Since the `Button` implements a ripple, it accepts theme properties for the ripple as well. If you want to compose the default style for the ripple, you just have to provide Ripple keys with custom styles in the theme object.
+
 ## Icon Button
 
 Icons are appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star to an item. They are best located in app bars, toolbars, action buttons or toggles.
diff --git a/components/button/style.scss b/components/button/theme.scss
similarity index 100%
rename from components/button/style.scss
rename to components/button/theme.scss
diff --git a/spec/theme.js b/spec/theme.js
index 36a731f5a..6b7ffac62 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -1,9 +1,11 @@
 import ToolboxAppBar from '../components/app_bar/theme.scss';
 import ToolboxAvatar from '../components/avatar/theme.scss';
 import ToolboxRipple from '../components/ripple/theme.scss';
+import ToolboxButton from '../components/button/theme.scss'; // Should import ToolboxRipple too
 
 export default {
   ToolboxAppBar,
   ToolboxAvatar,
-  ToolboxRipple
+  ToolboxRipple,
+  ToolboxButton
 };

From 4e28d4a21ac12b66612d9d3ce6327c1cac4ab33d Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 16 May 2016 14:50:26 +0200
Subject: [PATCH 0521/1024] Modify ripple theme interface to avoid collisions

---
 components/button/theme.scss |  6 +++---
 components/ripple/Ripple.js  | 12 ++++++------
 components/ripple/readme.md  | 12 ++++++------
 components/ripple/theme.scss |  8 ++++----
 4 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/components/button/theme.scss b/components/button/theme.scss
index a8731204a..26e7080aa 100644
--- a/components/button/theme.scss
+++ b/components/button/theme.scss
@@ -36,7 +36,7 @@
   > * {
     pointer-events: none;
   }
-  [data-react-toolbox="ripple"] {
+  > .rippleWrapper {
     overflow: hidden;
   }
   &[disabled] {
@@ -97,7 +97,7 @@
   .icon {
     line-height: $button-floating-height;
   }
-  [data-react-toolbox="ripple"] {
+  > .rippleWrapper {
     border-radius: 50%;
   }
   &.mini {
@@ -120,7 +120,7 @@
     line-height: $button-height;
     vertical-align: middle;
   }
-  [data-react-toolbox="ripple"] {
+  > .rippleWrapper {
     border-radius: 50%;
   }
 }
diff --git a/components/ripple/Ripple.js b/components/ripple/Ripple.js
index bb1f0f95a..c7ee66be4 100644
--- a/components/ripple/Ripple.js
+++ b/components/ripple/Ripple.js
@@ -30,10 +30,10 @@ const Ripple = (options = {}) => {
         rippleClassName: React.PropTypes.string,
         rippleSpread: React.PropTypes.number,
         theme: React.PropTypes.shape({
-          active: React.PropTypes.string.isRequired,
           ripple: React.PropTypes.string.isRequired,
-          restarting: React.PropTypes.string.isRequired,
-          wrapper: React.PropTypes.string.isRequired
+          rippleActive: React.PropTypes.string.isRequired,
+          rippleRestarting: React.PropTypes.string.isRequired,
+          rippleWrapper: React.PropTypes.string.isRequired
         })
       };
 
@@ -117,8 +117,8 @@ const Ripple = (options = {}) => {
           } = this.props;
 
           const rippleClassName = classnames(this.props.theme.ripple, {
-            [this.props.theme.active]: this.state.active,
-            [this.props.theme.restarting]: this.state.restarting
+            [this.props.theme.rippleActive]: this.state.active,
+            [this.props.theme.rippleRestarting]: this.state.restarting
           }, className);
 
           const { left, top, width } = this.state;
@@ -130,7 +130,7 @@ const Ripple = (options = {}) => {
           return (
             <ComposedComponent {...other} onMouseDown={this.handleMouseDown}>
               {children ? children : null}
-              <span data-react-toolbox='ripple' className={this.props.theme.wrapper} {...props}>
+              <span data-react-toolbox='ripple' className={this.props.theme.rippleWrapper} {...props}>
                 <span ref='ripple' role='ripple' className={rippleClassName} style={rippleStyle} />
               </span>
             </ComposedComponent>
diff --git a/components/ripple/readme.md b/components/ripple/readme.md
index 9492dbdcf..b7d723155 100644
--- a/components/ripple/readme.md
+++ b/components/ripple/readme.md
@@ -33,9 +33,9 @@ In any component you decorate with the Ripple you'd get some additional props:
 
 You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxRipple`, it should implement the following interface:
 
-| Name         | Description|
-|:-------------|:-----------|
-| `active`     | Applied when the ripple is active.|
-| `ripple`     | Root classname for the ripple.|
-| `restarting` | Applied when the ripple is restarting.|
-| `wrapper`    | Wrapper class to fit to the parent element.|
+| Name               | Description|
+|:-------------------|:-----------|
+| `ripple`           | Root classname for the ripple.|
+| `rippleActive`     | Applied when the ripple is active.|
+| `rippleRestarting` | Applied when the ripple is restarting.|
+| `rippleWrapper`    | Wrapper class to fit to the parent element.|
diff --git a/components/ripple/theme.scss b/components/ripple/theme.scss
index cfaf1d7d3..90be70f54 100644
--- a/components/ripple/theme.scss
+++ b/components/ripple/theme.scss
@@ -12,7 +12,7 @@
   transform-origin: 50% 50%;
 }
 
-.wrapper {
+.rippleWrapper {
   position: absolute;
   top: 0;
   right: 0;
@@ -25,15 +25,15 @@
 .ripple {
   @extend %ripple;
   transition-duration: $ripple-duration;
-  &.restarting {
+  &.rippleRestarting {
     opacity: $ripple-final-opacity;
     transition-property: none;
   }
-  &.active {
+  &.rippleActive {
     opacity: $ripple-final-opacity;
     transition-property: transform;
   }
-  &:not(.active):not(.restarting) {
+  &:not(.rippleActive):not(.rippleRestarting) {
     opacity: 0;
     transition-property: opacity, transform;
   }

From 7ad9594b9b1310a1326f610b755ebf0eeb084cdf Mon Sep 17 00:00:00 2001
From: Felipe Amorim <felipe.leusin@gmail.com>
Date: Wed, 18 May 2016 19:19:35 -0300
Subject: [PATCH 0522/1024] (feat) set corejs as a dependency

closes issue #382
---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 45446e005..d8ae44e7d 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,8 @@
     "toolkit"
   ],
   "dependencies": {
-    "classnames": "^2.2.5"
+    "classnames": "^2.2.5",
+    "core-js": "^2.4.0"
   },
   "devDependencies": {
     "autoprefixer": "^6.3.6",
@@ -50,7 +51,6 @@
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-0": "^6.5.0",
     "bluebird": "^3.3.5",
-    "core-js": "^2.4.0",
     "cpx": "^1.3.1",
     "cross-env": "^1.0.7",
     "css-loader": "^0.23.1",

From 5dfee6663289cd6bc3016eb16d6166b2e5de481d Mon Sep 17 00:00:00 2001
From: Lucas Correia <lucas.correia@ftrack.com>
Date: Fri, 20 May 2016 15:24:06 +0200
Subject: [PATCH 0523/1024] Add showSuggestionsWhenValueIsSet prop, used to
 control autocomplete filter behaviour when multiple=false

---
 components/autocomplete/Autocomplete.js | 6 ++++--
 components/autocomplete/readme.md       | 1 +
 react-toolbox.d.ts                      | 5 +++++
 spec/components/autocomplete.js         | 1 +
 4 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index 4c249a314..56678c1fe 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -22,6 +22,7 @@ class Autocomplete extends React.Component {
    multiple: React.PropTypes.bool,
    onChange: React.PropTypes.func,
    selectedPosition: React.PropTypes.oneOf(['above', 'below']),
+   showSuggestionsWhenValueIsSet: React.PropTypes.bool,
    source: React.PropTypes.any,
    value: React.PropTypes.any
  };
@@ -31,13 +32,14 @@ class Autocomplete extends React.Component {
    direction: 'auto',
    selectedPosition: 'above',
    multiple: true,
+   showSuggestionsWhenValueIsSet: false,
    source: {}
  };
 
  state = {
    direction: this.props.direction,
    focus: false,
-   showAllSuggestions: true,
+   showAllSuggestions: this.props.showSuggestionsWhenValueIsSet,
    query: this.query(this.props.value)
  };
 
@@ -63,7 +65,7 @@ class Autocomplete extends React.Component {
    const query = this.query(key);
    if (this.props.onChange) this.props.onChange(key, event);
    this.setState(
-     {focus: false, query, showAllSuggestions: true},
+     {focus: false, query, showAllSuggestions: this.props.showSuggestionsWhenValueIsSet},
      () => { this.refs.input.blur(); }
    );
  };
diff --git a/components/autocomplete/readme.md b/components/autocomplete/readme.md
index 95524c948..64d586372 100644
--- a/components/autocomplete/readme.md
+++ b/components/autocomplete/readme.md
@@ -50,6 +50,7 @@ class AutocompleteTest extends React.Component {
 | `onChange`          | `Function`             |                 | Callback function that is fired when the components's value changes.|
 | `source`            | `Object` or `Array`    |                 | Object of key/values or array representing all items suggested. |
 | `selectedPosition`  | `String`               |  `above`        | Determines if the selected list is shown above or below input. It can be `above` or `below`. |
+| `showSuggestionsWhenValueIsSet` | `Bool`     | `false`         | If true, the list of suggestions will not be filtered when a value is selected, until the query is modified. |
 | `value`             | `String` or `Array`    |                 | Value or array of values currently selected component.|
 
 Additional properties will be passed to the Input Component so you can use `hint`, `name` ... etc.
diff --git a/react-toolbox.d.ts b/react-toolbox.d.ts
index be6d3e67d..8e5e2304a 100644
--- a/react-toolbox.d.ts
+++ b/react-toolbox.d.ts
@@ -171,6 +171,11 @@ declare namespace __RT {
          *  Object of key/values or array representing all items suggested.
          */
         source: Object | Array<any>,
+        /**
+         * If true, the list of suggestions will not be filtered when a value is selected, until the query is modified.
+         * @default false
+         */
+        showSuggestionsWhenValueIsSet?: boolean,
         /**
          * Type of the input element. It can be a valid HTML5 input type
          * @default text
diff --git a/spec/components/autocomplete.js b/spec/components/autocomplete.js
index a2b11484d..ed2bf0488 100644
--- a/spec/components/autocomplete.js
+++ b/spec/components/autocomplete.js
@@ -38,6 +38,7 @@ class AutocompleteTest extends React.Component {
           onChange={this.handleSimpleChange}
           source={countriesArray}
           value={this.state.simple}
+          showSuggestionsWhenValueIsSet
         />
       </section>
     );

From c70618471cdd6c1a06c6528ba0a92635dc53f4cc Mon Sep 17 00:00:00 2001
From: Lucas Correia <lucas.correia@ftrack.com>
Date: Fri, 20 May 2016 15:35:20 +0200
Subject: [PATCH 0524/1024] Clear autocomplete query input when pressing
 backspace and showing all suggestions

---
 components/autocomplete/Autocomplete.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index 56678c1fe..a38e19ccd 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -83,6 +83,18 @@ class Autocomplete extends React.Component {
    this.setState({active: '', focus: true});
  };
 
+ handleQueryKeyDown = (event) => {
+   // Clear query when pressing backspace and showing all suggestions.
+   const shouldClearQuery = (
+     event.which === 8
+     && this.props.showSuggestionsWhenValueIsSet
+     && this.state.showAllSuggestions
+   );
+   if (shouldClearQuery) {
+     this.setState({query: ''});
+   }
+ };
+
  handleQueryKeyUp = (event) => {
    if (event.which === 13 && this.state.active) this.select(this.state.active, event);
    if (event.which === 27) this.refs.input.blur();
@@ -218,6 +230,7 @@ class Autocomplete extends React.Component {
          onBlur={this.handleQueryBlur}
          onChange={this.handleQueryChange}
          onFocus={this.handleQueryFocus}
+         onKeyDown={this.handleQueryKeyDown}
          onKeyUp={this.handleQueryKeyUp}
          value={this.state.query}
        />

From cb4b73647f16e1055006b92c4e58405fbaffb581 Mon Sep 17 00:00:00 2001
From: Lucas Correia <lucas.correia@ftrack.com>
Date: Fri, 20 May 2016 16:23:43 +0200
Subject: [PATCH 0525/1024] Refactor autocomplete suggestions method to make it
 more readable

---
 components/autocomplete/Autocomplete.js | 30 ++++++++++++++++++-------
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index a38e19ccd..479f864b7 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -127,18 +127,32 @@ class Autocomplete extends React.Component {
  }
 
  suggestions () {
-   const suggest = new Map();
+   let suggest = new Map();
    const query = this.state.query.toLowerCase().trim() || '';
    const values = this.values();
-   for (const [key, value] of this.source()) {
-     const valueMatchesQuery = value.toLowerCase().trim().startsWith(query);
-     if (
-       (valueMatchesQuery && !values.has(key))
-       || (!this.props.multiple && (this.state.showAllSuggestions || valueMatchesQuery))
-     ) {
-       suggest.set(key, value);
+   const source = this.source();
+
+   // Suggest any non-set value which matches the query
+   if (this.props.multiple) {
+     for (const [key, value] of source) {
+       if (!values.has(key) && value.toLowerCase().trim().startsWith(query)) {
+         suggest.set(key, value);
+       }
+     }
+
+   // When multiple is false, suggest any value which matches the query if showAllSuggestions is false
+   } else if (query && !this.state.showAllSuggestions) {
+     for (const [key, value] of source) {
+       if (value.toLowerCase().trim().startsWith(query)) {
+         suggest.set(key, value);
+       }
      }
+
+   // When multiple is false, suggest all values when showAllSuggestions is true
+   } else {
+     suggest = source;
    }
+
    return suggest;
  }
 

From 8f2579ed3d25bd9d4a09ae7c05483a0fb6f0709c Mon Sep 17 00:00:00 2001
From: Lucas Correia <lucas.correia@ftrack.com>
Date: Fri, 20 May 2016 16:24:17 +0200
Subject: [PATCH 0526/1024] Add seperate autocomplete with
 showSuggestionsWhenValueIsSet to spec

---
 spec/components/autocomplete.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/spec/components/autocomplete.js b/spec/components/autocomplete.js
index ed2bf0488..b3577859d 100644
--- a/spec/components/autocomplete.js
+++ b/spec/components/autocomplete.js
@@ -7,6 +7,7 @@ const countriesObject = {'ES-es': 'Spain', 'TH-th': 'Thailand', 'EN-gb': 'Englan
 class AutocompleteTest extends React.Component {
   state = {
     simple: 'Spain',
+    simpleShowAll: 'England',
     multiple: ['ES-es', 'TH-th']
   };
 
@@ -18,6 +19,10 @@ class AutocompleteTest extends React.Component {
     this.setState({simple: value});
   };
 
+  handleSimpleShowAllChange = (value) => {
+    this.setState({simpleShowAll: value});
+  };
+
   render () {
     return (
       <section>
@@ -38,6 +43,15 @@ class AutocompleteTest extends React.Component {
           onChange={this.handleSimpleChange}
           source={countriesArray}
           value={this.state.simple}
+        />
+
+        <Autocomplete
+          label="Choose a country (showing all suggestions)"
+          hint="Elements up to you..."
+          multiple={false}
+          onChange={this.handleSimpleShowAllChange}
+          source={countriesArray}
+          value={this.state.simpleShowAll}
           showSuggestionsWhenValueIsSet
         />
       </section>

From c937673a026448d1ad3dc809d2405800fd62d9d2 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Fri, 20 May 2016 19:53:03 +0200
Subject: [PATCH 0527/1024] Add base class for buttons

---
 components/button/Button.js  |   2 +-
 components/button/readme.md  |   1 +
 components/button/theme.scss |   4 ++
 components/card/Card.js      |  18 ++++--
 components/card/theme.scss   | 120 +++++++++++++++++++++++++++++++++++
 5 files changed, 137 insertions(+), 8 deletions(-)
 create mode 100644 components/card/theme.scss

diff --git a/components/button/Button.js b/components/button/Button.js
index d61fe0a66..cada0f582 100644
--- a/components/button/Button.js
+++ b/components/button/Button.js
@@ -57,7 +57,7 @@ class Button extends React.Component {
     const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
     const shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : 'flat';
 
-    const classes = classnames([theme[shape]], {
+    const classes = classnames(theme.button, [theme[shape]], {
       [theme[level]]: neutral,
       [theme.mini]: mini,
       [theme.inverse]: inverse
diff --git a/components/button/readme.md b/components/button/readme.md
index 9b917f868..604c608eb 100644
--- a/components/button/readme.md
+++ b/components/button/readme.md
@@ -64,6 +64,7 @@ You can take a look to the `_config.scss` variables. The themed key for this com
 | Name       | Description|
 |:-----------|:-----------|
 | `accent`   | Used for accent button.|
+| `button`   | Used for the root element.|
 | `flat`     | Used when the button is flat.|
 | `floating` | Used when the button is floating.|
 | `icon`     | For the icon inside a button.|
diff --git a/components/button/theme.scss b/components/button/theme.scss
index 26e7080aa..e28fb5ca1 100644
--- a/components/button/theme.scss
+++ b/components/button/theme.scss
@@ -1,6 +1,10 @@
 @import "http://github.com/base";
 @import "http://github.com/config";
 
+.button {
+  position: relative;
+}
+
 %button {
   @include typo-button();
   position: relative;
diff --git a/components/card/Card.js b/components/card/Card.js
index 9dd790599..0fa04ee74 100644
--- a/components/card/Card.js
+++ b/components/card/Card.js
@@ -1,10 +1,10 @@
 import React, { PropTypes } from 'react';
-import ClassNames from 'classnames';
-import style from './style';
+import { themr } from 'react-css-themr';
+import classnames from 'classnames';
 
-const Card = ({children, className, raised, ...other}) => {
-  const classes = ClassNames(style.card, {
-    [style.raised]: raised
+const Card = ({children, className, raised, theme, ...other}) => {
+  const classes = classnames(theme.card, {
+    [theme.raised]: raised
   }, className);
 
   return (
@@ -17,7 +17,11 @@ const Card = ({children, className, raised, ...other}) => {
 Card.propTypes = {
   children: PropTypes.any,
   className: PropTypes.string,
-  raised: PropTypes.bool
+  raised: PropTypes.bool,
+  theme: React.PropTypes.shape({
+    card: React.PropTypes.string.isRequired,
+    raised: React.PropTypes.string.isRequired
+  })
 };
 
-export default Card;
+export default themr('ToolboxCard')(Card);
diff --git a/components/card/theme.scss b/components/card/theme.scss
new file mode 100644
index 000000000..f3180b09f
--- /dev/null
+++ b/components/card/theme.scss
@@ -0,0 +1,120 @@
+@import "http://github.com/base";
+@import "http://github.com/config";
+
+.card {
+  @include shadow-2dp();
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  overflow: hidden;
+  font-size: $card-font-size;
+  background: $card-background-color;
+  border-radius: .2 * $unit;
+  &.raised {
+    @include shadow-8dp();
+  }
+  .avatar {
+    display: block;
+  }
+}
+
+.cardMedia {
+  position: relative;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: cover;
+  &.wide, &.square {
+    width: 100%;
+    height: 0;
+    .content {
+      position: absolute;
+      height: 100%;
+    }
+    .content > iframe, .content > video, .content > img {
+      max-width: 100%;
+    }
+  }
+  &.wide {
+    padding-top: 56.25%;
+  }
+  &.square {
+    padding-top: 100%;
+  }
+  .content {
+    position: relative;
+    top: 0;
+    left: 0;
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    justify-content: flex-end;
+    overflow: hidden;
+  }
+  .contentOverlay {
+    .cardTitle, .cardActions, .cardText {
+      background-color: $card-text-overlay;
+    }
+  }
+}
+
+.cardTitle {
+  display: flex;
+  align-items: center;
+  .avatar {
+    margin-right: 1.3 * $unit;
+  }
+  .subtitle {
+    color: $color-text-secondary;
+  }
+  &.large {
+    padding: $card-padding-lg $card-padding ($card-padding - .2 * $unit);
+    .title {
+      @include typo-headline();
+      line-height: 1.25;
+    }
+  }
+  &.small {
+    padding: $card-padding;
+    .title {
+      @include typo-body-2(false, true);
+      line-height: 1.4;
+    }
+    .subtitle {
+      font-weight: 500;
+      line-height: 1.4;
+    }
+  }
+  .cardMedia & {
+    .title, .subtitle {
+      color: $card-color-white;
+    }
+  }
+}
+
+.cardTitle, .cardText {
+  padding: ($card-padding - .2 * $unit) $card-padding;
+  &:last-child {
+    padding-bottom: $card-padding-lg;
+  }
+  + .cardText {
+    padding-top: 0;
+  }
+}
+
+.cardActions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: $card-padding-sm;
+  .button {
+    min-width: 0;
+    padding: 0 $card-padding-sm;
+    margin: 0 $card-padding-sm / 2;
+    &:first-child {
+      margin-left: 0;
+    }
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}

From bc26c3fd8696f4d37e53fc891833f277955c5c0c Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Fri, 20 May 2016 21:05:03 +0200
Subject: [PATCH 0528/1024] =?UTF-8?q?Migrate=20Card=20+=20refactoring=20+?=
 =?UTF-8?q?=20add=20defineTheme=20=F0=9F=8E=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/card/CardActions.js |  36 +++++-----
 components/card/CardMedia.js   |  78 +++++++++++----------
 components/card/CardText.js    |  36 +++++-----
 components/card/CardTitle.js   |  32 ++++-----
 components/card/readme.md      |  36 +++++++++-
 components/card/style.scss     | 120 ---------------------------------
 components/define-theme.js     |  48 +++++++++++++
 spec/theme.js                  |  13 ++--
 8 files changed, 179 insertions(+), 220 deletions(-)
 delete mode 100644 components/card/style.scss
 create mode 100644 components/define-theme.js

diff --git a/components/card/CardActions.js b/components/card/CardActions.js
index 9ad7ff7bf..e2e09145f 100644
--- a/components/card/CardActions.js
+++ b/components/card/CardActions.js
@@ -1,23 +1,19 @@
-import React, { PropTypes, Component } from 'react';
-import ClassNames from 'classnames';
-import style from './style';
+import React, { PropTypes } from 'react';
+import { themr } from 'react-css-themr';
+import classnames from 'classnames';
 
-class CardActions extends Component {
-  static propTypes = {
-    children: PropTypes.any,
-    className: PropTypes.string
-  };
+const CardActions = ({ children, className, theme, ...other }) => (
+  <div className={classnames(theme.cardActions, className)} {...other}>
+    {children}
+  </div>
+);
 
-  render () {
-    const { children, className, ...other } = this.props;
-    const classes = ClassNames(style.cardActions, className);
+CardActions.propTypes = {
+  children: PropTypes.any,
+  className: PropTypes.string,
+  theme: React.PropTypes.shape({
+    cardActions: React.PropTypes.string.isRequired
+  })
+};
 
-    return (
-      <div className={classes} {...other}>
-        {children}
-      </div>
-    );
-  }
-}
-
-export default CardActions;
+export default themr('ToolboxCard')(CardActions);
diff --git a/components/card/CardMedia.js b/components/card/CardMedia.js
index 370c70346..ecaba7d38 100644
--- a/components/card/CardMedia.js
+++ b/components/card/CardMedia.js
@@ -1,43 +1,47 @@
-import React, { PropTypes, Component } from 'react';
-import ClassNames from 'classnames';
-import style from './style';
+import React, { PropTypes } from 'react';
+import { themr } from 'react-css-themr';
+import classnames from 'classnames';
 
-class CardMedia extends Component {
-  static propTypes = {
-    aspectRatio: PropTypes.oneOf([ 'wide', 'square' ]),
-    children: PropTypes.any,
-    className: PropTypes.string,
-    color: PropTypes.string,
-    contentOverlay: PropTypes.bool,
-    image: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.element
-    ])
-  };
-
-  render () {
-    const { aspectRatio, children, className, color, contentOverlay, image, ...other } = this.props;
-    const classes = ClassNames(style.cardMedia, {
-      [style[aspectRatio]]: aspectRatio
-    }, className);
+const CardMedia = ({ aspectRatio, children, className, color, contentOverlay, image, theme, ...other }) => {
+  const classes = classnames(theme.cardMedia, {
+    [theme[aspectRatio]]: aspectRatio
+  }, className);
 
-    const innerClasses = ClassNames(style.content, {
-      [style.contentOverlay]: contentOverlay
-    });
+  const innerClasses = classnames(theme.content, {
+    [theme.contentOverlay]: contentOverlay
+  });
 
-    const bgStyle = {
-      backgroundColor: color ? color : undefined,
-      backgroundImage: typeof image === 'string' ? `url('http://github.com/$%7Bimage%7D')` : undefined
-    };
+  const bgStyle = {
+    backgroundColor: color ? color : undefined,
+    backgroundImage: typeof image === 'string' ? `url('http://github.com/$%7Bimage%7D')` : undefined
+  };
 
-    return (
-      <div style={bgStyle} className={classes} {...other}>
-        <div className={innerClasses}>
-          {children}
-        </div>
+  return (
+    <div style={bgStyle} className={classes} {...other}>
+      <div className={innerClasses}>
+        {children}
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
+
+CardMedia.propTypes = {
+  aspectRatio: PropTypes.oneOf([ 'wide', 'square' ]),
+  children: PropTypes.any,
+  className: PropTypes.string,
+  color: PropTypes.string,
+  contentOverlay: PropTypes.bool,
+  image: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element
+  ]),
+  theme: React.PropTypes.shape({
+    cardMedia: React.PropTypes.string.isRequired,
+    content: React.PropTypes.string.isRequired,
+    contentOverlay: React.PropTypes.string.isRequired,
+    square: React.PropTypes.string.isRequired,
+    wide: React.PropTypes.string.isRequired
+  })
+};
 
-export default CardMedia;
+export default themr('ToolboxCard')(CardMedia);
diff --git a/components/card/CardText.js b/components/card/CardText.js
index 2a3d8cafb..14c4683d7 100644
--- a/components/card/CardText.js
+++ b/components/card/CardText.js
@@ -1,23 +1,19 @@
-import React, { PropTypes, Component } from 'react';
-import ClassNames from 'classnames';
-import style from './style';
+import React, { PropTypes } from 'react';
+import { themr } from 'react-css-themr';
+import classnames from 'classnames';
 
-class CardText extends Component {
-  static propTypes = {
-    children: PropTypes.any,
-    className: PropTypes.string
-  };
+const CardText = ({ children, className, theme, ...other }) => (
+  <div className={classnames(theme.cardText, className)} {...other}>
+    {typeof children === 'string' ? <p>{children}</p> : children}
+  </div>
+);
 
-  render () {
-    const { children, className, ...other } = this.props;
-    const classes = ClassNames(style.cardText, className);
+CardText.propTypes = {
+  children: PropTypes.any,
+  className: PropTypes.string,
+  theme: React.PropTypes.shape({
+    cardText: React.PropTypes.string.isRequired
+  })
+};
 
-    return (
-      <div className={classes} {...other}>
-        {typeof children === 'string' ? <p>{children}</p> : children}
-      </div>
-    );
-  }
-}
-
-export default CardText;
+export default themr('ToolboxCard')(CardText);
diff --git a/components/card/CardTitle.js b/components/card/CardTitle.js
index f5a550a2d..287c6ba9b 100644
--- a/components/card/CardTitle.js
+++ b/components/card/CardTitle.js
@@ -1,12 +1,12 @@
 import React, { PropTypes } from 'react';
-import ClassNames from 'classnames';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 import { Avatar } from '../avatar';
-import style from './style';
 
-const CardTitle = ({avatar, children, className, subtitle, title, ...other}) => {
-  const classes = ClassNames(style.cardTitle, {
-    [style.small]: avatar,
-    [style.large]: !avatar
+const CardTitle = ({avatar, children, className, subtitle, theme, title, ...other}) => {
+  const classes = classnames(theme.cardTitle, {
+    [theme.small]: avatar,
+    [theme.large]: !avatar
   }, className);
 
   let avatarComponent;
@@ -19,17 +19,13 @@ const CardTitle = ({avatar, children, className, subtitle, title, ...other}) =>
 
   return (
     <div className={classes} {...other}>
-      {avatarComponent && (
-        <div className={style.avatar}>
-          {avatarComponent}
-        </div>
-      )}
+      {avatarComponent}
       <div>
-        {title && <h5 className={style.title}>{title}</h5>}
+        {title && <h5 className={theme.title}>{title}</h5>}
         {children && typeof children === 'string' && (
-          <h5 className={style.title}>{children}</h5>
+          <h5 className={theme.title}>{children}</h5>
         )}
-        {subtitle && <p className={style.subtitle}>{subtitle}</p>}
+        {subtitle && <p className={theme.subtitle}>{subtitle}</p>}
         {children && typeof children !== 'string' && children}
       </div>
     </div>
@@ -51,10 +47,16 @@ CardTitle.propTypes = {
     PropTypes.string,
     PropTypes.element
   ]),
+  theme: React.PropTypes.shape({
+    large: React.PropTypes.string.isRequired,
+    title: React.PropTypes.string.isRequired,
+    small: React.PropTypes.string.isRequired,
+    subtitle: React.PropTypes.string.isRequired
+  }),
   title: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.element
   ])
 };
 
-export default CardTitle;
+export default themr('ToolboxCard')(CardTitle);
diff --git a/components/card/readme.md b/components/card/readme.md
index 633fcf82f..d38bcc539 100644
--- a/components/card/readme.md
+++ b/components/card/readme.md
@@ -7,26 +7,30 @@ Cards are composed of multiple subcomponents in React Toolbox. You can combine e
 <!-- example -->
 ```jsx
 import { Card, CardMedia, CardTitle, CardText, CardActions } from 'react-toolbox/lib/card';
+import theme from 'react-toolbox/lib/card/theme';
 
 const dummyText = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.';
 
 const TestCards = () => (
-  <Card style={{width: '350px'}}>
+  <Card theme={theme} style={{width: '350px'}}>
     <CardTitle
       avatar="https://placeimg.com/80/80/animals"
       title="Avatar style title"
       subtitle="Subtitle here"
+      theme={theme}
     />
     <CardMedia
       aspectRatio="wide"
       image="https://placeimg.com/800/450/nature"
+      theme={theme}
     />
     <CardTitle
       title="Title goes here"
       subtitle="Subtitle here"
+      theme={theme}
     />
-    <CardText>{dummyText}</CardText>
-    <CardActions>
+    <CardText theme={theme}>{dummyText}</CardText>
+    <CardActions theme={theme}>
       <Button label="Action 1" />
       <Button label="Action 2" />
     </CardActions>
@@ -50,6 +54,10 @@ that all subcomponents are placed within.
 | `className` | `String` |  | Additional class(es) for custom styling. |
 | `raised` | `Boolean` |  | Increases the shadow depth to appear elevated. |
 
+
+Since the `Button` implements a ripple, it accepts theme properties for the ripple as well. If you want to compose the default style for the ripple, you just have to provide Ripple keys with custom styles in the theme object.
+
+
 ## CardTitle
 A versatile title block that can be used in
 various places on the card, including the media
@@ -103,3 +111,25 @@ typically placed at the bottom of the card.
 |:-----|:-----|:-----|:-----|
 | `children` | `Any` |  | Children to pass through the component. |
 | `className` | `String` |  | Additional class(es) for custom styling. |
+
+## Theming
+
+Each subcomponent takes it's own classes but since usually you'd want to include every card subcomponent, we use the same themed key `ToolboxCard` for your context styles. The interface is as follows:
+
+| Name       | Description|
+|:-----------|:-----------|
+| `card`     | Used in `Card` as root class.|
+| `cardActions` | Used in `CardActions` for the wrapper.|
+| `cardMedia` | Used in `CardMedia` for the wrapper.|
+| `cardText` | Used in `CardText` for text wrapper.|
+| `content` | Used in `CardMedia` for inner content.|
+| `contentOverlay` | Used in `CardMedia` for inner content if its overlayed.|
+| `large` | Used in `CardTitle` when the card has avatar.|
+| `raised`   | Used in `Card` for raised cards.|
+| `small` | Used in `CardTitle` when the card has no avatar.|
+| `square` | Used in `CardMedia` for square content.|
+| `subtitle` | Used in `CardTitle` for subtitle.|
+| `title` | Used in `CardTitle` for title main wrapper.|
+| `wide` | Used in `CardMedia` for wide content.|
+
+This component theme also includes modifiers for buttons used in `CardActions` and for `Avatar` component.
diff --git a/components/card/style.scss b/components/card/style.scss
deleted file mode 100644
index c2ca9fd07..000000000
--- a/components/card/style.scss
+++ /dev/null
@@ -1,120 +0,0 @@
-@import "http://github.com/base";
-@import "http://github.com/config";
-
-.card {
-  @include shadow-2dp();
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  overflow: hidden;
-  font-size: $card-font-size;
-  background: $card-background-color;
-  border-radius: .2 * $unit;
-  &.raised {
-    @include shadow-8dp();
-  }
-  [data-react-toolbox="avatar"] {
-    display: block;
-  }
-}
-
-.cardMedia {
-  position: relative;
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: cover;
-  &.wide, &.square {
-    width: 100%;
-    height: 0;
-    .content {
-      position: absolute;
-      height: 100%;
-    }
-    .content > iframe, .content > video, .content > img {
-      max-width: 100%;
-    }
-  }
-  &.wide {
-    padding-top: 56.25%;
-  }
-  &.square {
-    padding-top: 100%;
-  }
-  .content {
-    position: relative;
-    top: 0;
-    left: 0;
-    display: flex;
-    width: 100%;
-    flex-direction: column;
-    justify-content: flex-end;
-    overflow: hidden;
-  }
-  .contentOverlay {
-    .cardTitle, .cardActions, .cardText {
-      background-color: $card-text-overlay;
-    }
-  }
-}
-
-.cardTitle {
-  display: flex;
-  align-items: center;
-  .avatar {
-    margin-right: 1.3 * $unit;
-  }
-  .subtitle {
-    color: $color-text-secondary;
-  }
-  &.large {
-    padding: $card-padding-lg $card-padding ($card-padding - .2 * $unit);
-    .title {
-      @include typo-headline();
-      line-height: 1.25;
-    }
-  }
-  &.small {
-    padding: $card-padding;
-    .title {
-      @include typo-body-2(false, true);
-      line-height: 1.4;
-    }
-    .subtitle {
-      font-weight: 500;
-      line-height: 1.4;
-    }
-  }
-  .cardMedia & {
-    .title, .subtitle {
-      color: $card-color-white;
-    }
-  }
-}
-
-.cardTitle, .cardText {
-  padding: ($card-padding - .2 * $unit) $card-padding;
-  &:last-child {
-    padding-bottom: $card-padding-lg;
-  }
-  + .cardText {
-    padding-top: 0;
-  }
-}
-
-.cardActions {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  padding: $card-padding-sm;
-  [data-react-toolbox="button"] {
-    min-width: 0;
-    padding: 0 $card-padding-sm;
-    margin: 0 $card-padding-sm / 2;
-    &:first-child {
-      margin-left: 0;
-    }
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-}
diff --git a/components/define-theme.js b/components/define-theme.js
new file mode 100644
index 000000000..582f175a9
--- /dev/null
+++ b/components/define-theme.js
@@ -0,0 +1,48 @@
+const DEPENDENCIES = {
+  ToolboxButton: [ 'ToolboxRipple' ],
+  ToolboxCard: [ 'ToolboxAvatar', 'ToolboxButton' ]
+};
+
+export default function defineTheme (theme) {
+  return generateModifiers(theme)(theme);
+}
+
+function generateModifiers (components) {
+  return compose(Object.keys(components).map(function (component) {
+    return compose(getDependencies(component).map(function (dependency) {
+      return getModifier(component, dependency);
+    }));
+  }, idp));
+}
+
+function getDependencies (component) {
+  return DEPENDENCIES[component] || [];
+}
+
+function idp (x) {
+  return x;
+}
+
+
+function compose (fns) {
+  return fns.reduce(function (f, g) {
+    return function (x) {
+      return f(g(x));
+    };
+  }, idp);
+}
+
+function getModifier (component, dependency) {
+  return function dependencyThemeModifier (theme) {
+    return { ...theme, [dependency]: modifyClasses(theme[dependency], theme[component])
+    };
+  };
+}
+
+function modifyClasses (baseTheme = {}, dependentTheme) {
+  return Object.keys(baseTheme).reduce((result, baseKey) => (
+    dependentTheme[baseKey]
+      ? { ...result, [baseKey]: `${baseTheme[baseKey]} ${dependentTheme[baseKey]}` }
+      : result
+  ), baseTheme);
+}
diff --git a/spec/theme.js b/spec/theme.js
index 6b7ffac62..afffcb2ec 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -1,11 +1,14 @@
+import defineTheme from '../components/define-theme';
 import ToolboxAppBar from '../components/app_bar/theme.scss';
 import ToolboxAvatar from '../components/avatar/theme.scss';
+import ToolboxButton from '../components/button/theme.scss';
+import ToolboxCard from '../components/card/theme.scss';
 import ToolboxRipple from '../components/ripple/theme.scss';
-import ToolboxButton from '../components/button/theme.scss'; // Should import ToolboxRipple too
 
-export default {
+export default defineTheme({
   ToolboxAppBar,
   ToolboxAvatar,
-  ToolboxRipple,
-  ToolboxButton
-};
+  ToolboxButton,
+  ToolboxCard,
+  ToolboxRipple
+});

From 9593e03fd0d70c60acac355448740804405c5eea Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 21 May 2016 17:59:22 +0200
Subject: [PATCH 0529/1024] Remove style dependency in cards

---
 components/card/readme.md  | 4 ++--
 components/card/theme.scss | 6 +++---
 components/define-theme.js | 5 +----
 3 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/components/card/readme.md b/components/card/readme.md
index d38bcc539..68518a54d 100644
--- a/components/card/readme.md
+++ b/components/card/readme.md
@@ -114,7 +114,7 @@ typically placed at the bottom of the card.
 
 ## Theming
 
-Each subcomponent takes it's own classes but since usually you'd want to include every card subcomponent, we use the same themed key `ToolboxCard` for your context styles. The interface is as follows:
+Each subcomponent takes it's own classes but since usually you'd want to include every card subcomponent, and also those styles are related to each other, we use the same themed key `ToolboxCard` for context styles. The interface is as follows:
 
 | Name       | Description|
 |:-----------|:-----------|
@@ -132,4 +132,4 @@ Each subcomponent takes it's own classes but since usually you'd want to include
 | `title` | Used in `CardTitle` for title main wrapper.|
 | `wide` | Used in `CardMedia` for wide content.|
 
-This component theme also includes modifiers for buttons used in `CardActions` and for `Avatar` component.
+This component theme also includes modifiers for `Button` and for `Avatar` component.
diff --git a/components/card/theme.scss b/components/card/theme.scss
index f3180b09f..a435c7d8b 100644
--- a/components/card/theme.scss
+++ b/components/card/theme.scss
@@ -13,7 +13,7 @@
   &.raised {
     @include shadow-8dp();
   }
-  .avatar {
+  [data-react-toolbox="avatar"] {
     display: block;
   }
 }
@@ -60,7 +60,7 @@
 .cardTitle {
   display: flex;
   align-items: center;
-  .avatar {
+  [data-react-toolbox="avatar"] {
     margin-right: 1.3 * $unit;
   }
   .subtitle {
@@ -106,7 +106,7 @@
   align-items: center;
   justify-content: flex-start;
   padding: $card-padding-sm;
-  .button {
+  [data-react-toolbox="button"] {
     min-width: 0;
     padding: 0 $card-padding-sm;
     margin: 0 $card-padding-sm / 2;
diff --git a/components/define-theme.js b/components/define-theme.js
index 582f175a9..57ca5008e 100644
--- a/components/define-theme.js
+++ b/components/define-theme.js
@@ -1,7 +1,4 @@
-const DEPENDENCIES = {
-  ToolboxButton: [ 'ToolboxRipple' ],
-  ToolboxCard: [ 'ToolboxAvatar', 'ToolboxButton' ]
-};
+const DEPENDENCIES = {};
 
 export default function defineTheme (theme) {
   return generateModifiers(theme)(theme);

From 42125fcc50fe643e47ed877effeceac3f61da417 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 21 May 2016 18:00:25 +0200
Subject: [PATCH 0530/1024] Update node version

---
 .nvmrc | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.nvmrc b/.nvmrc
index cc2fbe89b..9e3a93350 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-4.3.2
+4.4.3

From b2be1cbc8db779b53db98ceaea6526e5fd5b368b Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 21 May 2016 18:17:01 +0200
Subject: [PATCH 0531/1024] Migrate Chip to themr

---
 components/chip/Chip.js                    | 30 ++++++++++++++--------
 components/chip/readme.md                  | 13 ++++++++++
 components/chip/{style.scss => theme.scss} |  0
 spec/theme.js                              |  2 ++
 4 files changed, 34 insertions(+), 11 deletions(-)
 rename components/chip/{style.scss => theme.scss} (100%)

diff --git a/components/chip/Chip.js b/components/chip/Chip.js
index 27162a653..ae50e4dc2 100644
--- a/components/chip/Chip.js
+++ b/components/chip/Chip.js
@@ -1,18 +1,18 @@
 import React, {PropTypes} from 'react';
-import ClassNames from 'classnames';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 import Avatar from '../avatar';
-import style from './style';
 
-const Chip = ({children, className, deletable, onDeleteClick, ...other}) => {
+const Chip = ({children, className, deletable, onDeleteClick, theme, ...other}) => {
   let hasAvatar = false;
   if (React.Children.count(children)) {
     const firstChild = children[0];
     hasAvatar = firstChild && firstChild.type && firstChild.type === Avatar;
   }
 
-  const classes = ClassNames(style.chip, {
-      [style.deletable]: !!deletable,
-      [style.avatar]: !!hasAvatar
+  const classes = classnames(theme.chip, {
+      [theme.deletable]: !!deletable,
+      [theme.avatar]: !!hasAvatar
   }, className);
 
   return (
@@ -20,9 +20,9 @@ const Chip = ({children, className, deletable, onDeleteClick, ...other}) => {
       {typeof children === 'string' ? <span>{children}</span> : children}
       {
         deletable ? (
-          <span className={style.delete} onClick={onDeleteClick}>
-            <svg viewBox="0 0 40 40" className={style.deleteIcon}>
-              <path className={style.deleteX} d="M 12,12 L 28,28 M 28,12 L 12,28" />
+          <span className={theme.delete} onClick={onDeleteClick}>
+            <svg viewBox="0 0 40 40" className={theme.deleteIcon}>
+              <path className={theme.deleteX} d="M 12,12 L 28,28 M 28,12 L 12,28" />
             </svg>
           </span>
         ) : null
@@ -35,7 +35,15 @@ Chip.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   deletable: PropTypes.bool,
-  onDeleteClick: PropTypes.func
+  onDeleteClick: PropTypes.func,
+  theme: React.PropTypes.shape({
+    avatar: React.PropTypes.string.isRequired,
+    chip: React.PropTypes.string.isRequired,
+    deletable: React.PropTypes.string.isRequired,
+    delete: React.PropTypes.string.isRequired,
+    deleteIcon: React.PropTypes.string.isRequired,
+    deleteX: React.PropTypes.string.isRequired
+  })
 };
 
 Chip.defaultProps = {
@@ -43,4 +51,4 @@ Chip.defaultProps = {
   deletable: false
 };
 
-export default Chip;
+export default themr('ToolboxChip')(Chip);
diff --git a/components/chip/readme.md b/components/chip/readme.md
index c9e0b2f45..516284c55 100644
--- a/components/chip/readme.md
+++ b/components/chip/readme.md
@@ -44,3 +44,16 @@ const ChipTest = () => (
 | `className`     | `String`    | `''`            | Additional class name to provide custom styling.|
 | `deletable`     | `Boolean`   | `false`         | If true, the chip will be rendered with a delete icon.|
 | `onDeleteClick` | `Function`  |                 | Callback to be invoked when the delete icon is clicked. |
+
+## Theming
+
+You can take a look to the configuration variables at the `_config.scss` file. The component implements the following class interface:
+
+| Name       | Description|
+|:-----------|:-----------|
+| `avatar`     | Used in the root when the component includes an avatar.|
+| `chip` | Root class.|
+| `deletable` | Used in the root when the component is deletable.|
+| `delete` | Used for the delete element wrapper.|
+| `deleteIcon` | Used for the delete icon wrapper.|
+| `deleteX` | Used for the delete svg inner layer.|
diff --git a/components/chip/style.scss b/components/chip/theme.scss
similarity index 100%
rename from components/chip/style.scss
rename to components/chip/theme.scss
diff --git a/spec/theme.js b/spec/theme.js
index afffcb2ec..106ba92f4 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -3,6 +3,7 @@ import ToolboxAppBar from '../components/app_bar/theme.scss';
 import ToolboxAvatar from '../components/avatar/theme.scss';
 import ToolboxButton from '../components/button/theme.scss';
 import ToolboxCard from '../components/card/theme.scss';
+import ToolboxChip from '../components/chip/theme.scss';
 import ToolboxRipple from '../components/ripple/theme.scss';
 
 export default defineTheme({
@@ -10,5 +11,6 @@ export default defineTheme({
   ToolboxAvatar,
   ToolboxButton,
   ToolboxCard,
+  ToolboxChip,
   ToolboxRipple
 });

From d8a5dc371fb2273651ae8f9afd54b24c7e6cd173 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 21 May 2016 18:27:33 +0200
Subject: [PATCH 0532/1024] Add note about theming in chip readme

---
 components/chip/readme.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/chip/readme.md b/components/chip/readme.md
index 516284c55..d9535293e 100644
--- a/components/chip/readme.md
+++ b/components/chip/readme.md
@@ -6,6 +6,7 @@ To add an icon or contact image to a chip, include an `Avatar` element as the fi
 
 <!-- example -->
 ```jsx
+// Import theme using `ThemeProvider`
 import Avatar from 'react-toolbox/lib/avatar';
 import Chip from 'react-toolbox/lib/chip';
 

From 40be14660fb78fd2e4bd46483f841cfdfdb2264e Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 21 May 2016 18:42:22 +0200
Subject: [PATCH 0533/1024] Migrate checkbox to themr

---
 components/checkbox/Check.js                  | 35 +++++++++++--------
 components/checkbox/Checkbox.js               | 26 ++++++++------
 components/checkbox/readme.md                 | 19 +++++++---
 .../checkbox/{style.scss => theme.scss}       | 11 +++---
 spec/theme.js                                 |  2 ++
 5 files changed, 59 insertions(+), 34 deletions(-)
 rename components/checkbox/{style.scss => theme.scss} (95%)

diff --git a/components/checkbox/Check.js b/components/checkbox/Check.js
index 9dc9a7be7..29a7433c8 100644
--- a/components/checkbox/Check.js
+++ b/components/checkbox/Check.js
@@ -1,25 +1,32 @@
 import React, { PropTypes } from 'react';
-import ClassNames from 'classnames';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 import Ripple from '../ripple';
-import style from './style';
 
-const Check = ({checked, children, onMouseDown}) => {
-  const className = ClassNames(style.check, {
-    [style.checked]: checked
-  });
-
-  return <div data-react-toolbox='check' onMouseDown={onMouseDown} className={className}>{children}</div>;
-};
+const Check = ({checked, children, onMouseDown, theme}) => (
+  <div
+    data-react-toolbox='check'
+    className={classnames(theme.check, { [theme.checked]: checked })}
+    onMouseDown={onMouseDown}
+  >
+    {children}
+  </div>
+);
 
 Check.propTypes = {
   checked: PropTypes.bool,
   children: PropTypes.any,
-  onMouseDown: PropTypes.func
+  onMouseDown: PropTypes.func,
+  theme: React.PropTypes.shape({
+    check: React.PropTypes.string.isRequired,
+    checked: React.PropTypes.string.isRequired
+  })
 };
 
-export default Ripple({
-  className: style.ripple,
+const RawCheck = themr('ToolboxCheckbox')(Check);
+export default themr('ToolboxCheckbox')(Ripple({
   spread: 2.6,
   centered: true
-})(Check);
-export {Check as RawCheck};
+})(Check));
+
+export {RawCheck as RawCheck};
diff --git a/components/checkbox/Checkbox.js b/components/checkbox/Checkbox.js
index 803fb11b2..285b5e867 100644
--- a/components/checkbox/Checkbox.js
+++ b/components/checkbox/Checkbox.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import ClassNames from 'classnames';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 import Check from './Check';
-import style from './style';
 
 class Checkbox extends React.Component {
   static propTypes = {
@@ -9,7 +9,13 @@ class Checkbox extends React.Component {
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
     label: React.PropTypes.any,
-    onChange: React.PropTypes.func
+    onChange: React.PropTypes.func,
+    theme: React.PropTypes.shape({
+      disabled: React.PropTypes.string.isRequired,
+      field: React.PropTypes.string.isRequired,
+      input: React.PropTypes.string.isRequired,
+      ripple: React.PropTypes.string.isRequired
+    })
   };
 
   static defaultProps = {
@@ -34,26 +40,26 @@ class Checkbox extends React.Component {
   }
 
   render () {
-    const { onChange, ...others } = this.props; //eslint-disable-line no-unused-vars
-    const className = ClassNames(style.field, {
-      [style.disabled]: this.props.disabled
+    const { onChange, theme, ...others } = this.props; //eslint-disable-line no-unused-vars
+    const className = classnames(theme.field, {
+      [theme.disabled]: this.props.disabled
     }, this.props.className);
 
     return (
       <label data-react-toolbox='checkbox' className={className}>
         <input
           {...others}
-          className={style.input}
+          className={theme.input}
           onClick={this.handleToggle}
           readOnly
           ref='input'
           type='checkbox'
         />
-        <Check checked={this.props.checked} disabled={this.props.disabled}/>
-        {this.props.label ? <span data-react-toolbox='label' className={style.text}>{this.props.label}</span> : null}
+        <Check rippleClassName={theme.ripple} checked={this.props.checked} disabled={this.props.disabled}/>
+        {this.props.label ? <span data-react-toolbox='label' className={theme.text}>{this.props.label}</span> : null}
       </label>
     );
   }
 }
 
-export default Checkbox;
+export default themr('ToolboxCheckbox')(Checkbox);
diff --git a/components/checkbox/readme.md b/components/checkbox/readme.md
index 7208d8742..deff23e72 100644
--- a/components/checkbox/readme.md
+++ b/components/checkbox/readme.md
@@ -5,6 +5,7 @@
 <!-- example -->
 ```jsx
 import Checkbox from 'react-toolbox/lib/checkbox';
+import theme from 'react-toolbox/lib/checkbox/theme';
 
 class TestCheckbox extends React.Component {
   state = { check1: true, check2: false };
@@ -20,16 +21,19 @@ class TestCheckbox extends React.Component {
           checked={this.state.check1}
           label="Checked option"
           onChange={this.handleChange.bind(this, 'check1')}
+          theme={theme}
         />
         <Checkbox
           checked={this.state.check2}
           label="Unchecked option"
           onChange={this.handleChange.bind(this, 'check2')}
+          theme={theme}
         />
         <Checkbox
           checked
           disabled
           label="Disabled checkbox"
+          theme={theme}
         />
       </div>
     );
@@ -50,9 +54,16 @@ class TestCheckbox extends React.Component {
 | `onChange`      | `Function`      |                 | Callback called when the checkbox value is changed.|
 | `onFocus`       | `Function`      |                 | Callback called when the checkbox is focused |
 
-## Methods
+## Theming
 
-This component exposes methods to communicate with the `input` DOM component:
+You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxCheckbox`, it should implement the following interface:
 
-- `blur` to blur the input.
-- `focus` to focus the input.
+| Name     | Description|
+|:---------|:-----------|
+| `check`  | Used as root in the check element.|
+| `checked`  | Used for the check element when it's checked.|
+| `disabled`   | Used when the component is disabled.|
+| `field`   | Used as the root class of the component.|
+| `input`   | Used for the input element.|
+| `ripple`   | Used for the ripple component.|
+| `text`   | Used for the text label.|
diff --git a/components/checkbox/style.scss b/components/checkbox/theme.scss
similarity index 95%
rename from components/checkbox/style.scss
rename to components/checkbox/theme.scss
index 29075defa..da0cfb7cd 100644
--- a/components/checkbox/style.scss
+++ b/components/checkbox/theme.scss
@@ -8,6 +8,11 @@
   margin-bottom: $checkbox-field-margin-bottom;
   white-space: nowrap;
   vertical-align: middle;
+  .ripple {
+    background-color: $checkbox-color;
+    opacity: .3;
+    transition-duration: $checkbox-ripple-duration;
+  }
 }
 
 .text {
@@ -81,12 +86,6 @@
   }
 }
 
-.ripple {
-  background-color: $checkbox-color;
-  opacity: .3;
-  transition-duration: $checkbox-ripple-duration;
-}
-
 .disabled {
   > .text {
     color: $checkbox-disabled-color;
diff --git a/spec/theme.js b/spec/theme.js
index 106ba92f4..a3cbf8c7d 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -3,6 +3,7 @@ import ToolboxAppBar from '../components/app_bar/theme.scss';
 import ToolboxAvatar from '../components/avatar/theme.scss';
 import ToolboxButton from '../components/button/theme.scss';
 import ToolboxCard from '../components/card/theme.scss';
+import ToolboxCheckbox from '../components/checkbox/theme.scss';
 import ToolboxChip from '../components/chip/theme.scss';
 import ToolboxRipple from '../components/ripple/theme.scss';
 
@@ -11,6 +12,7 @@ export default defineTheme({
   ToolboxAvatar,
   ToolboxButton,
   ToolboxCard,
+  ToolboxCheckbox,
   ToolboxChip,
   ToolboxRipple
 });

From 243644c144e70b9b9b8fab9010e79a2f1739a145 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 21 May 2016 18:57:49 +0200
Subject: [PATCH 0534/1024] Migrate input to themr

---
 components/input/Input.js                   | 48 +++++++++++++--------
 components/input/readme.md                  | 20 +++++++--
 components/input/{style.scss => theme.scss} |  8 ++--
 spec/components/input.js                    |  4 +-
 4 files changed, 53 insertions(+), 27 deletions(-)
 rename components/input/{style.scss => theme.scss} (98%)

diff --git a/components/input/Input.js b/components/input/Input.js
index 13f5d646d..a587eb3e5 100644
--- a/components/input/Input.js
+++ b/components/input/Input.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import ClassNames from 'classnames';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 import FontIcon from '../font_icon';
-import style from './style';
 
 class Input extends React.Component {
   static propTypes = {
@@ -23,6 +23,20 @@ class Input extends React.Component {
     onFocus: React.PropTypes.func,
     onKeyPress: React.PropTypes.func,
     required: React.PropTypes.bool,
+    theme: React.PropTypes.shape({
+      bar: React.PropTypes.string.isRequired,
+      counter: React.PropTypes.string.isRequired,
+      disabled: React.PropTypes.string.isRequired,
+      error: React.PropTypes.string.isRequired,
+      errored: React.PropTypes.string.isRequired,
+      hidden: React.PropTypes.string.isRequired,
+      hint: React.PropTypes.string.isRequired,
+      icon: React.PropTypes.string.isRequired,
+      input: React.PropTypes.string.isRequired,
+      inputElement: React.PropTypes.string.isRequired,
+      required: React.PropTypes.string.isRequired,
+      withIcon: React.PropTypes.string.isRequired
+    }),
     type: React.PropTypes.string,
     value: React.PropTypes.any
   };
@@ -52,22 +66,22 @@ class Input extends React.Component {
   render () {
     const { children, disabled, error, floating, hint, icon,
             label: labelText, maxLength, multiline, required,
-            type, value, ...others} = this.props;
+            theme, type, value, ...others} = this.props;
     const length = maxLength && value ? value.length : 0;
-    const labelClassName = ClassNames(style.label, {[style.fixed]: !floating});
+    const labelClassName = classnames(theme.label, {[theme.fixed]: !floating});
 
-    const className = ClassNames(style.root, {
-      [style.disabled]: disabled,
-      [style.errored]: error,
-      [style.hidden]: type === 'hidden',
-      [style.withIcon]: icon
+    const className = classnames(theme.input, {
+      [theme.disabled]: disabled,
+      [theme.errored]: error,
+      [theme.hidden]: type === 'hidden',
+      [theme.withIcon]: icon
     }, this.props.className);
 
     const valuePresent = value !== null && value !== undefined && value !== '' && !Number.isNaN(value);
 
     const InputElement = React.createElement(multiline ? 'textarea' : 'input', {
       ...others,
-      className: ClassNames(style.input, {[style.filled]: valuePresent}),
+      className: classnames(theme.inputElement, {[theme.filled]: valuePresent}),
       onChange: this.handleChange,
       ref: 'input',
       role: 'input',
@@ -81,21 +95,21 @@ class Input extends React.Component {
     return (
       <div data-react-toolbox='input' className={className}>
         {InputElement}
-        {icon ? <FontIcon className={style.icon} value={icon} /> : null}
-        <span className={style.bar}></span>
+        {icon ? <FontIcon className={theme.icon} value={icon} /> : null}
+        <span className={theme.bar}></span>
         {labelText
           ? <label className={labelClassName}>
               {labelText}
-              {required ? <span className={style.required}> * </span> : null}
+              {required ? <span className={theme.required}> * </span> : null}
             </label>
           : null}
-        {hint ? <span className={style.hint}>{hint}</span> : null}
-        {error ? <span className={style.error}>{error}</span> : null}
-        {maxLength ? <span className={style.counter}>{length}/{maxLength}</span> : null}
+        {hint ? <span className={theme.hint}>{hint}</span> : null}
+        {error ? <span className={theme.error}>{error}</span> : null}
+        {maxLength ? <span className={theme.counter}>{length}/{maxLength}</span> : null}
         {children}
       </div>
     );
   }
 }
 
-export default Input;
+export default themr('ToolboxInput')(Input);
diff --git a/components/input/readme.md b/components/input/readme.md
index 630c2ebca..b57111381 100644
--- a/components/input/readme.md
+++ b/components/input/readme.md
@@ -48,9 +48,21 @@ class InputTest extends React.Component {
 | `type`          | `String`                | `text`          | Type of the input element. It can be a valid HTML5 input type|
 | `value`         | `Any`                   |                 | Current value of the input element.|
 
-## Methods
+## Theming
 
-The input is stateless but it includes two methods to be able to communicate with the DOM input node:
+The input component uses `ToolboxInput` as theme context id and the configuration is available in the `_config.scss` as usual. Here is the class interface:
 
-- `blur` to blur the input field.
-- `focus` to focus the input field.
+| Name       | Description|
+|:-----------|:-----------|
+| `bar`     | Used for the bar under the input.|
+| `counter` | Used for the counter element.|
+| `disabled` | Added to the root class when input is disabled.|
+| `error` | Used for the text error.|
+| `errored` | Added to the root class when input is errored.|
+| `hidden` | Used when the input is hidden.|
+| `hint` | Used for the hint text.|
+| `icon`   | Used for the icon in case the input has icon.|
+| `input` | Used as root class for the component.|
+| `inputElement` | Used for the HTML input element.|
+| `required` | Used in case the input is required.|
+| `withIcon` | Added to the root class if the input has icon.|
diff --git a/components/input/style.scss b/components/input/theme.scss
similarity index 98%
rename from components/input/style.scss
rename to components/input/theme.scss
index 0e5f9b641..06913179e 100644
--- a/components/input/style.scss
+++ b/components/input/theme.scss
@@ -1,7 +1,7 @@
 @import "http://github.com/base";
 @import "http://github.com/config";
 
-.root {
+.input {
   position: relative;
   padding: $input-padding 0;
   &.withIcon {
@@ -23,7 +23,7 @@
   transition: color $animation-duration $animation-curve-default;
 }
 
-.input {
+.inputElement {
   display: block;
   width: 100%;
   padding: $input-field-padding 0;
@@ -126,14 +126,14 @@
   color: $input-text-label-color;
 }
 
-.disabled > .input {
+.disabled > .inputElement {
   color: $input-text-disabled-text-color;
   border-bottom-style: dotted;
 }
 
 .errored {
   padding-bottom: 0;
-  > .input {
+  > .inputElement {
     margin-top: 1px;
     border-bottom-color: $input-text-error-color;
   }
diff --git a/spec/components/input.js b/spec/components/input.js
index ecbe42d6a..88da57c75 100644
--- a/spec/components/input.js
+++ b/spec/components/input.js
@@ -31,8 +31,8 @@ class InputTest extends React.Component {
         <Input type='email' value={this.state.multilineHint} label='Description' hint='Enter Description' multiline onChange={this.handleChange.bind(this, 'multilineHint')} />
         <Input type='text' label='Disabled field' disabled />
         <Input type='tel' value={this.state.withIcon} required label='With icon' onChange={this.handleChange.bind(this, 'withIcon')} icon='phone' />
-        <Input type='tel' value={this.state.withCustomIcon} label='With custom icon' onChange={this.handleChange.bind(this, 'withCustomIcon')} icon={<span>P</span>} />
-        <Input type='text' value={this.state.withHintCustomIcon} label='With Hint Text Icon' hint='Hint Text' onChange={this.handleChange.bind(this, 'withHintCustomIcon')} icon={<span>J</span>} />
+        <Input type='tel' value={this.state.withCustomIcon} label='With custom icon' onChange={this.handleChange.bind(this, 'withCustomIcon')} icon='favorite' />
+        <Input type='text' value={this.state.withHintCustomIcon} label='With Hint Text Icon' hint='Hint Text' onChange={this.handleChange.bind(this, 'withHintCustomIcon')} icon='share' />
       </section>
     );
   }

From 92b170fce59daae615c9defbb3efb321d562b6d9 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 21 May 2016 19:48:53 +0200
Subject: [PATCH 0535/1024] Migrate autocomplete

---
 components/autocomplete/Autocomplete.js       | 39 ++++++++++++-------
 components/autocomplete/readme.md             | 19 +++++++++
 .../autocomplete/{style.scss => theme.scss}   |  2 +-
 spec/theme.js                                 |  4 ++
 4 files changed, 50 insertions(+), 14 deletions(-)
 rename components/autocomplete/{style.scss => theme.scss} (99%)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index 479f864b7..e4fc4fc31 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import ClassNames from 'classnames';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 import Input from '../input';
 import events from '../utils/events';
 import Chip from '../chip';
-import style from './style';
 
 const POSITION = {
  AUTO: 'auto',
@@ -24,6 +24,18 @@ class Autocomplete extends React.Component {
    selectedPosition: React.PropTypes.oneOf(['above', 'below']),
    showSuggestionsWhenValueIsSet: React.PropTypes.bool,
    source: React.PropTypes.any,
+   theme: React.PropTypes.shape({
+     active: React.PropTypes.string.isRequired,
+     autocomplete: React.PropTypes.string.isRequired,
+     focus: React.PropTypes.string.isRequired,
+     input: React.PropTypes.string.isRequired,
+     label: React.PropTypes.string.isRequired,
+     suggestion: React.PropTypes.string.isRequired,
+     suggestions: React.PropTypes.string.isRequired,
+     up: React.PropTypes.string.isRequired,
+     value: React.PropTypes.string.isRequired,
+     values: React.PropTypes.string.isRequired
+   }),
    value: React.PropTypes.any
  };
 
@@ -66,7 +78,7 @@ class Autocomplete extends React.Component {
    if (this.props.onChange) this.props.onChange(key, event);
    this.setState(
      {focus: false, query, showAllSuggestions: this.props.showSuggestionsWhenValueIsSet},
-     () => { this.refs.input.blur(); }
+     () => { ReactDOM.findDOMNode(this).querySelector('input').blur(); }
    );
  };
 
@@ -97,7 +109,7 @@ class Autocomplete extends React.Component {
 
  handleQueryKeyUp = (event) => {
    if (event.which === 13 && this.state.active) this.select(this.state.active, event);
-   if (event.which === 27) this.refs.input.blur();
+   if (event.which === 27) ReactDOM.findDOMNode(this).querySelector('input').blur();
    if ([40, 38].indexOf(event.which) !== -1) {
      const suggestionsKeys = [...this.suggestions().keys()];
      let index = suggestionsKeys.indexOf(this.state.active) + (event.which === 40 ? +1 : -1);
@@ -194,7 +206,7 @@ class Autocomplete extends React.Component {
        return (
          <Chip
            key={key}
-           className={style.value}
+           className={this.props.theme.value}
            deletable
            onDeleteClick={this.unselect.bind(this, key)}
          >
@@ -203,13 +215,14 @@ class Autocomplete extends React.Component {
        );
      });
 
-     return <ul className={style.values}>{selectedItems}</ul>;
+     return <ul className={this.props.theme.values}>{selectedItems}</ul>;
    }
  }
 
  renderSuggestions () {
+   const { theme } = this.props;
    const suggestions = [...this.suggestions()].map(([key, value]) => {
-     const className = ClassNames(style.suggestion, {[style.active]: this.state.active === key});
+     const className = classnames(theme.suggestion, {[theme.active]: this.state.active === key});
      return (
        <li
          key={key}
@@ -222,14 +235,14 @@ class Autocomplete extends React.Component {
      );
    });
 
-   const className = ClassNames(style.suggestions, {[style.up]: this.state.direction === 'up'});
+   const className = classnames(theme.suggestions, {[theme.up]: this.state.direction === 'up'});
    return <ul ref='suggestions' className={className}>{suggestions}</ul>;
  }
 
  render () {
-   const {error, label, ...other} = this.props;
-   const className = ClassNames(style.root, {
-     [style.focus]: this.state.focus
+   const {error, label, theme, ...other} = this.props;
+   const className = classnames(theme.autocomplete, {
+     [theme.focus]: this.state.focus
    }, this.props.className);
 
    return (
@@ -238,7 +251,7 @@ class Autocomplete extends React.Component {
        <Input
          {...other}
          ref='input'
-         className={style.input}
+         className={theme.input}
          error={error}
          label={label}
          onBlur={this.handleQueryBlur}
@@ -255,4 +268,4 @@ class Autocomplete extends React.Component {
  }
 }
 
-export default Autocomplete;
+export default themr('ToolboxAutocomplete')(Autocomplete);
diff --git a/components/autocomplete/readme.md b/components/autocomplete/readme.md
index 64d586372..e14b9a519 100644
--- a/components/autocomplete/readme.md
+++ b/components/autocomplete/readme.md
@@ -5,6 +5,7 @@ An input field with a set of predeterminated labeled values. When it's focused i
 <!-- example -->
 ```jsx
 import Autocomplete from 'react-toolbox/lib/autocomplete';
+import theme from 'react-toolbox/lib/autocomplete/theme';
 
 const source = {
   'ES-es': 'Spain',
@@ -30,6 +31,7 @@ class AutocompleteTest extends React.Component {
         label="Choose countries"
         onChange={this.handleChange}
         source={source}
+        theme={theme}
         value={this.state.countries}
       />
     );
@@ -54,3 +56,20 @@ class AutocompleteTest extends React.Component {
 | `value`             | `String` or `Array`    |                 | Value or array of values currently selected component.|
 
 Additional properties will be passed to the Input Component so you can use `hint`, `name` ... etc.
+
+## Theming
+
+You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxAutocomplete`, it should implement the following interface:
+
+| Name     | Description|
+|:---------|:-----------|
+| `active` | Used for a suggestion when it's active.|
+| `autocomplete`  | Used for the root element.|
+| `focus`   | Used when the input is focused.|
+| `input`   | Used to style the `Input` component.|
+| `label`   | Used for the label.|
+| `suggestion`   | Used to style each suggestion.|
+| `suggestions`   | Used to style the suggestions container.|
+| `up`   | Used for the suggestions when it's opening to the top.|
+| `value`   | Classname used for a single value.|
+| `values`   | Classname used for the values container.|
diff --git a/components/autocomplete/style.scss b/components/autocomplete/theme.scss
similarity index 99%
rename from components/autocomplete/style.scss
rename to components/autocomplete/theme.scss
index 93928f26d..cb4854dbe 100644
--- a/components/autocomplete/style.scss
+++ b/components/autocomplete/theme.scss
@@ -2,7 +2,7 @@
 @import "http://github.com/config";
 @import "http://github.com/input/config";
 
-.root {
+.autocomplete {
   position: relative;
   padding: $unit 0;
   &.focus {
diff --git a/spec/theme.js b/spec/theme.js
index a3cbf8c7d..8be412577 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -1,18 +1,22 @@
 import defineTheme from '../components/define-theme';
 import ToolboxAppBar from '../components/app_bar/theme.scss';
+import ToolboxAutocomplete from '../components/autocomplete/theme.scss';
 import ToolboxAvatar from '../components/avatar/theme.scss';
 import ToolboxButton from '../components/button/theme.scss';
 import ToolboxCard from '../components/card/theme.scss';
 import ToolboxCheckbox from '../components/checkbox/theme.scss';
 import ToolboxChip from '../components/chip/theme.scss';
+import ToolboxInput from '../components/input/theme.scss';
 import ToolboxRipple from '../components/ripple/theme.scss';
 
 export default defineTheme({
   ToolboxAppBar,
+  ToolboxAutocomplete,
   ToolboxAvatar,
   ToolboxButton,
   ToolboxCard,
   ToolboxCheckbox,
   ToolboxChip,
+  ToolboxInput,
   ToolboxRipple
 });

From 2fb2de818676353fb9742c24417e9bc04564c3bd Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 21 May 2016 20:48:55 +0200
Subject: [PATCH 0536/1024] Migrate dialog to themr

---
 components/dialog/Dialog.js                  | 26 +++++++++++++-------
 components/dialog/readme.md                  | 18 ++++++++++++--
 components/dialog/{style.scss => theme.scss} | 14 +++++------
 spec/theme.js                                |  2 ++
 4 files changed, 42 insertions(+), 18 deletions(-)
 rename components/dialog/{style.scss => theme.scss} (95%)

diff --git a/components/dialog/Dialog.js b/components/dialog/Dialog.js
index e92f828fd..ddeec15f9 100644
--- a/components/dialog/Dialog.js
+++ b/components/dialog/Dialog.js
@@ -1,18 +1,18 @@
 import React from 'react';
-import ClassNames from 'classnames';
+import { themr } from 'react-css-themr';
+import classnames from 'classnames';
 import ActivableRenderer from '../hoc/ActivableRenderer';
 import Button from '../button';
 import Overlay from '../overlay';
-import style from './style';
 
 const Dialog = (props) => {
   const actions = props.actions.map((action, idx) => {
-    const className = ClassNames(style.button, {[action.className]: action.className});
+    const className = classnames(props.theme.button, {[action.className]: action.className});
     return <Button key={idx} {...action} className={className} />;
   });
 
-  const className = ClassNames([ style.root, style[props.type] ], {
-    [style.active]: props.active
+  const className = classnames([props.theme.dialog, props.theme[props.type]], {
+    [props.theme.active]: props.active
   }, props.className);
 
   return (
@@ -25,12 +25,12 @@ const Dialog = (props) => {
       onEscKeyDown={props.onEscKeyDown}
     >
       <div data-react-toolbox='dialog' className={className}>
-        <section role='body' className={style.body}>
-          {props.title ? <h6 className={style.title}>{props.title}</h6> : null}
+        <section role='body' className={props.theme.body}>
+          {props.title ? <h6 className={props.theme.title}>{props.title}</h6> : null}
           {props.children}
         </section>
         {actions.length
-          ? <nav role='navigation' className={style.navigation}>
+          ? <nav role='navigation' className={props.theme.navigation}>
               {actions}
             </nav>
           : null
@@ -50,6 +50,14 @@ Dialog.propTypes = {
   onOverlayMouseDown: React.PropTypes.func,
   onOverlayMouseMove: React.PropTypes.func,
   onOverlayMouseUp: React.PropTypes.func,
+  theme: React.PropTypes.shape({
+    active: React.PropTypes.string.isRequired,
+    body: React.PropTypes.string.isRequired,
+    button: React.PropTypes.string.isRequired,
+    dialog: React.PropTypes.string.isRequired,
+    navigation: React.PropTypes.string.isRequired,
+    title: React.PropTypes.string.isRequired
+  }),
   title: React.PropTypes.string,
   type: React.PropTypes.string
 };
@@ -60,4 +68,4 @@ Dialog.defaultProps = {
   type: 'normal'
 };
 
-export default ActivableRenderer()(Dialog);
+export default themr('ToolboxDialog')(ActivableRenderer()(Dialog));
diff --git a/components/dialog/readme.md b/components/dialog/readme.md
index ebf3299b7..e12c9d0dd 100644
--- a/components/dialog/readme.md
+++ b/components/dialog/readme.md
@@ -4,11 +4,12 @@
 
 <!-- example -->
 ```jsx
+// Remember to provide default styles with ThemeProvider
 import Dialog from 'react-toolbox/lib/dialog';
 
 class DialogTest extends React.Component {
-  state = { 
-    active: false 
+  state = {
+    active: false
   };
 
   handleToggle = () => {
@@ -53,3 +54,16 @@ class DialogTest extends React.Component {
 | `onOverlayMouseUp`      | `Function`      |                 | Callback called when the mouse button is released over the overlay. |
 | `title`                 | `String`        |                 | The text string to use as standar title of the dialog.|
 | `type`                  | `String`        | `normal`        | Used to determine the size of the dialog. It can be `small`, `normal` or `large`. |
+
+## Theming
+
+You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxDialog`, it should implement the following interface:
+
+| Name     | Description|
+|:---------|:-----------|
+| `active` | Used for the root when the dialog is active.|
+| `body`  | Used to wrap the dialog body.|
+| `button` | Used in buttons when the dialog implements actions.|
+| `dialog` | Used for the root element.|
+| `navigation` | Used for the navigation element when it implements actions.|
+| `title`   | Used for the title element of the dialog.|
diff --git a/components/dialog/style.scss b/components/dialog/theme.scss
similarity index 95%
rename from components/dialog/style.scss
rename to components/dialog/theme.scss
index 194ee7714..e50e2c01d 100644
--- a/components/dialog/style.scss
+++ b/components/dialog/theme.scss
@@ -1,7 +1,7 @@
 @import "http://github.com/base";
 @import "http://github.com/config";
 
-.root {
+.dialog {
   display: flex;
   max-width: 96vw;
   max-height: 96vh;
@@ -23,21 +23,21 @@
 
 .small {
   width: 30vw;
-  
+
   @media screen and (max-width: $layout-breakpoint-sm-tablet) {
-	width: 50vw;
+    width: 50vw;
   }
-  
+
   @media screen and (max-width: $layout-breakpoint-xs) {
-	width: 75vw;
+    width: 75vw;
   }
 }
 
 .normal {
   width: 50vw;
-  
+
   @media screen and (max-width: $layout-breakpoint-xs) {
-	width: 96vw;
+    width: 96vw;
   }
 }
 
diff --git a/spec/theme.js b/spec/theme.js
index 8be412577..62a7b524b 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -6,6 +6,7 @@ import ToolboxButton from '../components/button/theme.scss';
 import ToolboxCard from '../components/card/theme.scss';
 import ToolboxCheckbox from '../components/checkbox/theme.scss';
 import ToolboxChip from '../components/chip/theme.scss';
+import ToolboxDialog from '../components/dialog/theme.scss';
 import ToolboxInput from '../components/input/theme.scss';
 import ToolboxRipple from '../components/ripple/theme.scss';
 
@@ -17,6 +18,7 @@ export default defineTheme({
   ToolboxCard,
   ToolboxCheckbox,
   ToolboxChip,
+  ToolboxDialog,
   ToolboxInput,
   ToolboxRipple
 });

From 709f4b1ba58ad5413b963846a94b1724281c7f18 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 21 May 2016 20:52:48 +0200
Subject: [PATCH 0537/1024] Migrate DatePicker to themr

---
 components/date_picker/Calendar.js            | 22 ++++---
 components/date_picker/CalendarDay.js         | 17 ++++--
 components/date_picker/CalendarMonth.js       | 18 ++++--
 components/date_picker/DatePicker.js          |  9 ++-
 components/date_picker/DatePickerDialog.js    | 33 ++++++----
 components/date_picker/readme.md              | 27 ++++++++
 components/date_picker/style.scss             | 61 -------------------
 .../{style.calendar.scss => theme.scss}       | 61 ++++++++++++++++++-
 spec/theme.js                                 |  2 +
 9 files changed, 155 insertions(+), 95 deletions(-)
 delete mode 100644 components/date_picker/style.scss
 rename components/date_picker/{style.calendar.scss => theme.scss} (61%)

diff --git a/components/date_picker/Calendar.js b/components/date_picker/Calendar.js
index a204550b0..b00308d77 100644
--- a/components/date_picker/Calendar.js
+++ b/components/date_picker/Calendar.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import CssTransitionGroup from 'react-addons-css-transition-group';
+import { themr } from 'react-css-themr';
 import { SlideLeft, SlideRight } from '../animations';
 import { IconButton } from '../button';
 import CalendarMonth from './CalendarMonth';
 import time from '../utils/time';
 import utils from '../utils/utils';
-import style from './style.calendar';
 
 class Calendar extends React.Component {
   static propTypes = {
@@ -14,6 +14,13 @@ class Calendar extends React.Component {
     minDate: React.PropTypes.object,
     onChange: React.PropTypes.func,
     selectedDate: React.PropTypes.object,
+    theme: React.PropTypes.shape({
+      active: React.PropTypes.string.isRequired,
+      calendar: React.PropTypes.string.isRequired,
+      next: React.PropTypes.string.isRequired,
+      prev: React.PropTypes.string.isRequired,
+      years: React.PropTypes.string.isRequired
+    }),
     viewDate: React.PropTypes.object
   };
 
@@ -57,7 +64,7 @@ class Calendar extends React.Component {
 
   renderYear (year) {
     const props = {
-      className: year === this.state.viewDate.getFullYear() ? style.active : '',
+      className: year === this.state.viewDate.getFullYear() ? this.props.theme.active : '',
       key: year,
       onClick: this.handleYearClick.bind(this, year)
     };
@@ -71,18 +78,19 @@ class Calendar extends React.Component {
 
   renderYears () {
     return (
-      <ul data-react-toolbox='years' ref="years" className={style.years}>
+      <ul data-react-toolbox='years' ref="years" className={this.props.theme.years}>
         {utils.range(1900, 2100).map((i) => { return this.renderYear(i); })}
       </ul>
     );
   }
 
   renderMonths () {
+    const { theme } = this.props;
     const animation = this.state.direction === 'left' ? SlideLeft : SlideRight;
     return (
       <div data-react-toolbox='calendar'>
-        <IconButton className={style.prev} icon='chevron_left' onClick={this.changeViewMonth.bind(this, 'left', -1)} />
-        <IconButton className={style.next} icon='chevron_right' onClick={this.changeViewMonth.bind(this, 'right', 1)} />
+        <IconButton className={theme.prev} icon='chevron_left' onClick={this.changeViewMonth.bind(this, 'left', -1)} />
+        <IconButton className={theme.next} icon='chevron_right' onClick={this.changeViewMonth.bind(this, 'right', 1)} />
         <CssTransitionGroup transitionName={animation} transitionEnterTimeout={350} transitionLeaveTimeout={350}>
           <CalendarMonth
             key={this.state.viewDate.getMonth()}
@@ -99,11 +107,11 @@ class Calendar extends React.Component {
 
   render () {
     return (
-      <div className={style.root}>
+      <div className={this.props.theme.calendar}>
         {this.props.display === 'months' ? this.renderMonths() : this.renderYears()}
       </div>
     );
   }
 }
 
-export default Calendar;
+export default themr('ToolboxDatePicker')(Calendar);
diff --git a/components/date_picker/CalendarDay.js b/components/date_picker/CalendarDay.js
index 38b083193..6a278e55a 100644
--- a/components/date_picker/CalendarDay.js
+++ b/components/date_picker/CalendarDay.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import ClassNames from 'classnames';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 import time from '../utils/time';
-import style from './style.calendar';
 
 class Day extends React.Component {
   static propTypes = {
@@ -9,6 +9,11 @@ class Day extends React.Component {
     disabled: React.PropTypes.bool,
     onClick: React.PropTypes.func,
     selectedDate: React.PropTypes.object,
+    theme: React.PropTypes.shape({
+      active: React.PropTypes.string.isRequired,
+      day: React.PropTypes.string.isRequired,
+      disabled: React.PropTypes.string.isRequired
+    }),
     viewDate: React.PropTypes.object
   };
 
@@ -28,9 +33,9 @@ class Day extends React.Component {
   }
 
   render () {
-    const className = ClassNames(style.day, {
-      [style.active]: this.isSelected(),
-      [style.disabled]: this.props.disabled
+    const className = classnames(this.props.theme.day, {
+      [this.props.theme.active]: this.isSelected(),
+      [this.props.theme.disabled]: this.props.disabled
     });
 
     return (
@@ -43,4 +48,4 @@ class Day extends React.Component {
   }
 }
 
-export default Day;
+export default themr('ToolboxDatePicker')(Day);
diff --git a/components/date_picker/CalendarMonth.js b/components/date_picker/CalendarMonth.js
index 83ce76c01..e3d2016dd 100644
--- a/components/date_picker/CalendarMonth.js
+++ b/components/date_picker/CalendarMonth.js
@@ -1,8 +1,8 @@
 import React from 'react';
+import { themr } from 'react-css-themr';
 import CalendarDay from './CalendarDay';
 import time from '../utils/time';
 import utils from '../utils/utils';
-import style from './style.calendar';
 
 class Month extends React.Component {
   static propTypes = {
@@ -10,6 +10,12 @@ class Month extends React.Component {
     minDate: React.PropTypes.object,
     onDayClick: React.PropTypes.func,
     selectedDate: React.PropTypes.object,
+    theme: React.PropTypes.shape({
+      days: React.PropTypes.string.isRequired,
+      month: React.PropTypes.string.isRequired,
+      title: React.PropTypes.string.isRequired,
+      week: React.PropTypes.string.isRequired
+    }),
     viewDate: React.PropTypes.object
   };
 
@@ -43,15 +49,15 @@ class Month extends React.Component {
 
   render () {
     return (
-      <div data-react-toolbox='month' className={style.month}>
-        <span className={style.title}>
+      <div data-react-toolbox='month' className={this.props.theme.month}>
+        <span className={this.props.theme.title}>
           {time.getFullMonth(this.props.viewDate)} {this.props.viewDate.getFullYear()}
         </span>
-        <div className={style.week}>{this.renderWeeks()}</div>
-        <div className={style.days}>{this.renderDays()}</div>
+        <div className={this.props.theme.week}>{this.renderWeeks()}</div>
+        <div className={this.props.theme.days}>{this.renderDays()}</div>
       </div>
     );
   }
 }
 
-export default Month;
+export default themr('ToolboxDatePicker')(Month);
diff --git a/components/date_picker/DatePicker.js b/components/date_picker/DatePicker.js
index 7ca0dcf43..bf85a0968 100644
--- a/components/date_picker/DatePicker.js
+++ b/components/date_picker/DatePicker.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 import DatePickerDialog from './DatePickerDialog';
 import events from '../utils/events';
 import Input from '../input';
-import style from './style';
 import time from '../utils/time';
 
 class DatePicker extends React.Component {
@@ -21,6 +21,9 @@ class DatePicker extends React.Component {
     maxDate: React.PropTypes.object,
     minDate: React.PropTypes.object,
     onChange: React.PropTypes.func,
+    theme: React.PropTypes.shape({
+      input: React.PropTypes.string.isRequired
+    }),
     value: React.PropTypes.oneOfType([
       React.PropTypes.instanceOf(Date),
       React.PropTypes.string
@@ -54,7 +57,7 @@ class DatePicker extends React.Component {
     return (
       <div data-react-toolbox='date-picker'>
         <Input
-          className={classnames(style.input, {[inputClassName]: inputClassName })}
+          className={classnames(this.props.theme.input, {[inputClassName]: inputClassName })}
           error={this.props.error}
           onMouseDown={this.handleInputMouseDown}
           label={this.props.label}
@@ -78,4 +81,4 @@ class DatePicker extends React.Component {
   }
 }
 
-export default DatePicker;
+export default themr('ToolboxDatePicker')(DatePicker);
diff --git a/components/date_picker/DatePickerDialog.js b/components/date_picker/DatePickerDialog.js
index 7181c45da..3247fec10 100644
--- a/components/date_picker/DatePickerDialog.js
+++ b/components/date_picker/DatePickerDialog.js
@@ -1,8 +1,8 @@
 import React from 'react';
-import ClassNames from 'classnames';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 import Calendar from './Calendar';
 import Dialog from '../dialog';
-import style from './style';
 import time from '../utils/time';
 
 class CalendarDialog extends React.Component {
@@ -14,6 +14,16 @@ class CalendarDialog extends React.Component {
     minDate: React.PropTypes.object,
     onDismiss: React.PropTypes.func,
     onSelect: React.PropTypes.func,
+    theme: React.PropTypes.shape({
+      button: React.PropTypes.string.isRequired,
+      calendarWrapper: React.PropTypes.string.isRequired,
+      date: React.PropTypes.string.isRequired,
+      dialog: React.PropTypes.string.isRequired,
+      header: React.PropTypes.string.isRequired,
+      monthsDisplay: React.PropTypes.string.isRequired,
+      year: React.PropTypes.string.isRequired,
+      yearsDisplay: React.PropTypes.string.isRequired
+    }),
     value: React.PropTypes.object
   };
 
@@ -65,27 +75,28 @@ class CalendarDialog extends React.Component {
   }
 
   actions = [
-    { label: 'Cancel', className: style.button, onClick: this.props.onDismiss },
-    { label: 'Ok', className: style.button, onClick: this.handleSelect }
+    { label: 'Cancel', className: this.props.theme.button, onClick: this.props.onDismiss },
+    { label: 'Ok', className: this.props.theme.button, onClick: this.handleSelect }
   ];
 
   render () {
-    const display = `display-${this.state.display}`;
-    const className = ClassNames(style.dialog, this.props.className);
-    const headerClassName = ClassNames(style.header, style[display]);
+    const { theme } = this.props;
+    const display = `${this.state.display}Display`;
+    const className = classnames(theme.dialog, this.props.className);
+    const headerClassName = classnames(theme.header, theme[display]);
 
     return (
       <Dialog active={this.props.active} type="custom" className={className} actions={this.actions}>
           <header className={headerClassName}>
-            <span className={style.year} onClick={this.handleSwitchDisplay.bind(this, 'years')}>
+            <span className={theme.year} onClick={this.handleSwitchDisplay.bind(this, 'years')}>
               {this.state.date.getFullYear()}
             </span>
-            <h3 className={style.date} onClick={this.handleSwitchDisplay.bind(this, 'months')}>
+            <h3 className={theme.date} onClick={this.handleSwitchDisplay.bind(this, 'months')}>
               {time.getShortDayOfWeek(this.state.date.getDay())}, {time.getShortMonth(this.state.date)} {this.state.date.getDate()}
             </h3>
           </header>
 
-          <div className={style.wrapper}>
+          <div className={theme.calendarWrapper}>
             <Calendar
               display={this.state.display}
               maxDate={this.props.maxDate}
@@ -98,4 +109,4 @@ class CalendarDialog extends React.Component {
   }
 }
 
-export default CalendarDialog;
+export default themr('ToolboxDatePicker')(CalendarDialog);
diff --git a/components/date_picker/readme.md b/components/date_picker/readme.md
index 96fb65eaa..4de27156c 100644
--- a/components/date_picker/readme.md
+++ b/components/date_picker/readme.md
@@ -43,3 +43,30 @@ class DatePickerTest extends React.Component {
 | `minDate`       | `Date`          |               | Date object with the minimum selectable date. |
 | `onChange`      | `Function`      |               | Callback called when the picker value is changed.|
 | `value`         | `Date`          |               | Date object with the currently selected date. |
+
+## Theming
+
+You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxDatePicker`, it should implement the following interface:
+
+| Name     | Description|
+|:---------|:-----------|
+| `active` | Used for the active day and year.|
+| `button` | Used for the buttons in the dialog.|
+| `calendar` | Used for the calendar root element.|
+| `calendarWrapper` | Used as wrapper for the calendar component inside dialog.|
+| `date` | Used for the date element inside header.|
+| `day` | Used for the day element inside the calendar.|
+| `days` | Used for the list of days inside a month.|
+| `dialog` | Used for the dialog component.|
+| `disabled` | Added to day element when day is disabled.|
+| `header` | Used for the dialog header,.|
+| `input` | Used for Input element that opens the picker.|
+| `month` | Used for the month root element.|
+| `monthsDisplay` | Added to the root dialog when months are displayed.|
+| `next` | Used for the next month icon.|
+| `prev` | Used for the prev month icon.|
+| `title` | Used for the month title element.|
+| `week` | Used for the weekdays wrapper.|
+| `year` | Used for the year element inside header.|
+| `years` | Used for the years list in years view.|
+| `yearsDisplay` | Added to the root dialog when years are displayed.|
diff --git a/components/date_picker/style.scss b/components/date_picker/style.scss
deleted file mode 100644
index e3fcb3461..000000000
--- a/components/date_picker/style.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-@import "http://github.com/base";
-@import "http://github.com/config";
-
-.input > [role="input"] {
-  cursor: pointer;
-}
-
-.header {
-  padding: 1.6 * $unit 2 * $unit;
-  color: $datepicker-primary-contrast-color;
-  cursor: pointer;
-  background-color: $datepicker-primary-color;
-}
-
-.year {
-  display: inline-block;
-  font-size: $datepicker-year-font-size;
-  transition: opacity, font-size $animation-duration $animation-curve-default;
-}
-
-.date {
-  display: block;
-  font-weight: $font-weight-semi-bold;
-  text-transform: capitalize;
-  transition: opacity $animation-duration $animation-curve-default;
-}
-
-.wrapper {
-  padding: $unit .5 * $unit 0;
-}
-
-.display-years {
-  .date {
-    opacity: $datepicker-inactive-opacity;
-  }
-  .year {
-    font-size: $font-size-normal;
-  }
-}
-
-.display-months {
-  .year {
-    opacity: $datepicker-inactive-opacity;
-  }
-}
-
-.dialog {
-  width: $datepicker-dialog-width;
-  > [role="body"] {
-    padding: 0;
-  }
-  > [role="navigation"] > .button {
-    color: $datepicker-primary-color;
-    &:hover {
-      background: $datepicker-primary-hover-color;
-    }
-    &:focus:not(:active) {
-      background: $datepicker-primary-hover-color;
-    }
-  }
-}
diff --git a/components/date_picker/style.calendar.scss b/components/date_picker/theme.scss
similarity index 61%
rename from components/date_picker/style.calendar.scss
rename to components/date_picker/theme.scss
index dfcea1dd6..dbce4dfc7 100644
--- a/components/date_picker/style.calendar.scss
+++ b/components/date_picker/theme.scss
@@ -1,7 +1,66 @@
 @import "http://github.com/base";
 @import "http://github.com/config";
 
-.root {
+.input > [role="input"] {
+  cursor: pointer;
+}
+
+.header {
+  padding: 1.6 * $unit 2 * $unit;
+  color: $datepicker-primary-contrast-color;
+  cursor: pointer;
+  background-color: $datepicker-primary-color;
+}
+
+.year {
+  display: inline-block;
+  font-size: $datepicker-year-font-size;
+  transition: opacity, font-size $animation-duration $animation-curve-default;
+}
+
+.date {
+  display: block;
+  font-weight: $font-weight-semi-bold;
+  text-transform: capitalize;
+  transition: opacity $animation-duration $animation-curve-default;
+}
+
+.calendarWrapper {
+  padding: $unit .5 * $unit 0;
+}
+
+.yearsDisplay {
+  .date {
+    opacity: $datepicker-inactive-opacity;
+  }
+  .year {
+    font-size: $font-size-normal;
+  }
+}
+
+.monthsDisplay {
+  .year {
+    opacity: $datepicker-inactive-opacity;
+  }
+}
+
+.dialog {
+  width: $datepicker-dialog-width;
+  > [role="body"] {
+    padding: 0;
+  }
+  > [role="navigation"] > .button {
+    color: $datepicker-primary-color;
+    &:hover {
+      background: $datepicker-primary-hover-color;
+    }
+    &:focus:not(:active) {
+      background: $datepicker-primary-hover-color;
+    }
+  }
+}
+
+.calendar {
   position: relative;
   height: $calendar-total-height;
   overflow: hidden;
diff --git a/spec/theme.js b/spec/theme.js
index 62a7b524b..bb1fed67a 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -6,6 +6,7 @@ import ToolboxButton from '../components/button/theme.scss';
 import ToolboxCard from '../components/card/theme.scss';
 import ToolboxCheckbox from '../components/checkbox/theme.scss';
 import ToolboxChip from '../components/chip/theme.scss';
+import ToolboxDatePicker from '../components/date_picker/theme.scss';
 import ToolboxDialog from '../components/dialog/theme.scss';
 import ToolboxInput from '../components/input/theme.scss';
 import ToolboxRipple from '../components/ripple/theme.scss';
@@ -18,6 +19,7 @@ export default defineTheme({
   ToolboxCard,
   ToolboxCheckbox,
   ToolboxChip,
+  ToolboxDatePicker,
   ToolboxDialog,
   ToolboxInput,
   ToolboxRipple

From 6f2d17d5d2d12cb89e16b08cda2b3053e5228f8f Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 22 May 2016 13:25:56 +0200
Subject: [PATCH 0538/1024] Migrate TimePicker to themr

---
 components/time_picker/ClockFace.js           | 25 ++++---
 components/time_picker/ClockHand.js           | 12 ++--
 components/time_picker/ClockMinutes.js        | 12 ++--
 components/time_picker/TimePicker.js          | 12 ++--
 components/time_picker/TimePickerDialog.js    | 45 ++++++++----
 components/time_picker/readme.md              | 45 +++++++++++-
 components/time_picker/style.scss             | 66 ------------------
 .../{style.clock.scss => theme.scss}          | 68 ++++++++++++++++++-
 spec/theme.js                                 |  4 +-
 9 files changed, 181 insertions(+), 108 deletions(-)
 delete mode 100644 components/time_picker/style.scss
 rename components/time_picker/{style.clock.scss => theme.scss} (63%)

diff --git a/components/time_picker/ClockFace.js b/components/time_picker/ClockFace.js
index ae1821325..58dffdc83 100644
--- a/components/time_picker/ClockFace.js
+++ b/components/time_picker/ClockFace.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import style from './style.clock';
+import classnames from 'classnames';
 
 class Face extends React.Component {
   static propTypes = {
@@ -7,6 +7,11 @@ class Face extends React.Component {
     numbers: React.PropTypes.array,
     radius: React.PropTypes.number,
     spacing: React.PropTypes.number,
+    theme: React.PropTypes.shape({
+      active: React.PropTypes.string.isRequired,
+      face: React.PropTypes.string.isRequired,
+      number: React.PropTypes.string.isRequired
+    }),
     twoDigits: React.PropTypes.bool
   };
 
@@ -33,29 +38,29 @@ class Face extends React.Component {
   }
 
   renderNumber (number, idx) {
-    let className = style.number;
-    if (number === this.props.active) className += ` ${style.active}`;
+    const { active, radius, spacing, theme, twoDigits } = this.props;
     return (
       <span
-        className={className}
-        style={this.numberStyle(this.props.radius - this.props.spacing, idx + 1)}
+        className={classnames(theme.number, {[theme.active]: number === active})}
+        style={this.numberStyle(radius - spacing, idx + 1)}
         key={number}
       >
-        {this.props.twoDigits ? ('0' + number).slice(-2) : number}
+        {twoDigits ? ('0' + number).slice(-2) : number}
       </span>
     );
   }
 
   render () {
+    const { numbers, onTouchStart, onMouseDown, theme } = this.props;
     return (
       <div
         ref='root'
-        className={style.face}
-        onTouchStart={this.props.onTouchStart}
-        onMouseDown={this.props.onMouseDown}
+        className={theme.face}
+        onTouchStart={onTouchStart}
+        onMouseDown={onMouseDown}
         style={this.faceStyle()}
       >
-        {this.props.numbers.map(this.renderNumber.bind(this))}
+        {numbers.map(this.renderNumber.bind(this))}
       </div>
     );
   }
diff --git a/components/time_picker/ClockHand.js b/components/time_picker/ClockHand.js
index 8e4653132..8dbd0dd35 100644
--- a/components/time_picker/ClockHand.js
+++ b/components/time_picker/ClockHand.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import style from './style.clock';
 import events from '../utils/events';
 import prefixer from '../utils/prefixer';
 import utils from '../utils/utils';
@@ -12,7 +11,11 @@ class Hand extends React.Component {
     onMove: React.PropTypes.func,
     onMoved: React.PropTypes.func,
     origin: React.PropTypes.object,
-    step: React.PropTypes.number
+    step: React.PropTypes.number,
+    theme: React.PropTypes.shape({
+      hand: React.PropTypes.string.isRequired,
+      knob: React.PropTypes.string.isRequired
+    })
   };
 
   static defaultProps = {
@@ -104,7 +107,8 @@ class Hand extends React.Component {
   }
 
   render () {
-    const className = `${style.hand} ${this.props.className}`;
+    const { theme } = this.props;
+    const className = `${theme.hand} ${this.props.className}`;
     const handStyle = prefixer({
       height: this.props.length - this.state.knobWidth / 2,
       transform: `rotate(${this.props.angle}deg)`
@@ -112,7 +116,7 @@ class Hand extends React.Component {
 
     return (
       <div className={className} style={handStyle}>
-        <div ref='knob' className={style.knob}></div>
+        <div ref='knob' className={theme.knob}></div>
       </div>
     );
   }
diff --git a/components/time_picker/ClockMinutes.js b/components/time_picker/ClockMinutes.js
index 096ff6ea8..127fa882e 100644
--- a/components/time_picker/ClockMinutes.js
+++ b/components/time_picker/ClockMinutes.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import utils from '../utils/utils';
-import style from './style.clock';
 import Face from './ClockFace';
 import Hand from './ClockHand';
 
@@ -13,7 +12,10 @@ class Minutes extends React.Component {
     onChange: React.PropTypes.func,
     radius: React.PropTypes.number,
     selected: React.PropTypes.number,
-    spacing: React.PropTypes.number
+    spacing: React.PropTypes.number,
+    theme: React.PropTypes.shape({
+      small: React.PropTypes.string.isRequired
+    })
   };
 
   static defaultProps = {
@@ -42,15 +44,17 @@ class Minutes extends React.Component {
           numbers={minutes}
           spacing={this.props.spacing}
           radius={this.props.radius}
-          twoDigits
           active={this.props.selected}
+          theme={this.props.theme}
+          twoDigits
         />
         <Hand ref='hand'
-          className={minutes.indexOf(this.props.selected) === -1 ? style.small : ''}
+          className={minutes.indexOf(this.props.selected) === -1 ? this.props.theme.small : ''}
           angle={this.props.selected * step}
           length={this.props.radius - this.props.spacing}
           onMove={this.handleHandMove}
           origin={this.props.center}
+          theme={this.props.theme}
           step={step}
         />
       </div>
diff --git a/components/time_picker/TimePicker.js b/components/time_picker/TimePicker.js
index 6fa5bd0d6..95ca6f805 100644
--- a/components/time_picker/TimePicker.js
+++ b/components/time_picker/TimePicker.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 import events from '../utils/events';
 import time from '../utils/time';
-import style from './style';
 import Input from '../input';
 import TimePickerDialog from './TimePickerDialog';
 
@@ -14,6 +14,9 @@ class TimePicker extends React.Component {
     inputClassName: React.PropTypes.string,
     label: React.PropTypes.string,
     onChange: React.PropTypes.func,
+    theme: React.PropTypes.shape({
+      input: React.PropTypes.string.isRequired
+    }),
     value: React.PropTypes.object
   };
 
@@ -41,12 +44,12 @@ class TimePicker extends React.Component {
   };
 
   render () {
-    const { value, format, inputClassName } = this.props;
+    const { value, format, inputClassName, theme } = this.props;
     const formattedTime = value ? time.formatTime(value, format) : null;
     return (
       <div data-react-toolbox='time-picker'>
         <Input
-          className={classnames(style.input, {[inputClassName]: inputClassName })}
+          className={classnames(theme.input, {[inputClassName]: inputClassName })}
           error={this.props.error}
           label={this.props.label}
           onMouseDown={this.handleInputMouseDown}
@@ -60,6 +63,7 @@ class TimePicker extends React.Component {
           format={format}
           onDismiss={this.handleDismiss}
           onSelect={this.handleSelect}
+          theme={this.props.theme}
           value={this.props.value}
         />
       </div>
@@ -67,4 +71,4 @@ class TimePicker extends React.Component {
   }
 }
 
-export default TimePicker;
+export default themr('ToolboxTimePicker')(TimePicker);
diff --git a/components/time_picker/TimePickerDialog.js b/components/time_picker/TimePickerDialog.js
index ad52d9529..fbe2f94df 100644
--- a/components/time_picker/TimePickerDialog.js
+++ b/components/time_picker/TimePickerDialog.js
@@ -1,6 +1,5 @@
 import React from 'react';
-import ClassNames from 'classnames';
-import style from './style';
+import classnames from 'classnames';
 import time from '../utils/time';
 import Clock from './Clock';
 import Dialog from '../dialog';
@@ -12,6 +11,21 @@ class TimePickerDialog extends React.Component {
     format: React.PropTypes.oneOf(['24hr', 'ampm']),
     onDismiss: React.PropTypes.func,
     onSelect: React.PropTypes.func,
+    theme: React.PropTypes.shape({
+      am: React.PropTypes.string.isRequired,
+      amFormat: React.PropTypes.string.isRequired,
+      ampm: React.PropTypes.string.isRequired,
+      button: React.PropTypes.string.isRequired,
+      dialog: React.PropTypes.string.isRequired,
+      header: React.PropTypes.string.isRequired,
+      hours: React.PropTypes.string.isRequired,
+      hoursDisplay: React.PropTypes.string.isRequired,
+      minutes: React.PropTypes.string.isRequired,
+      minutessDisplay: React.PropTypes.string.isRequired,
+      pm: React.PropTypes.string.isRequired,
+      pmFormat: React.PropTypes.string.isRequired,
+      separator: React.PropTypes.string.isRequired
+    }),
     value: React.PropTypes.object
   };
 
@@ -53,8 +67,8 @@ class TimePickerDialog extends React.Component {
   };
 
   actions = [
-    { label: 'Cancel', className: style.button, onClick: this.props.onDismiss },
-    { label: 'Ok', className: style.button, onClick: this.handleSelect }
+    { label: 'Cancel', className: this.props.theme.button, onClick: this.props.onDismiss },
+    { label: 'Ok', className: this.props.theme.button, onClick: this.handleSelect }
   ];
 
   formatHours () {
@@ -66,28 +80,30 @@ class TimePickerDialog extends React.Component {
   }
 
   renderAMPMLabels () {
+    const { theme } = this.props;
     if (this.props.format === 'ampm') {
       return (
-        <div className={style.ampm}>
-          <span className={style.am} onClick={this.toggleTimeMode}>AM</span>
-          <span className={style.pm} onClick={this.toggleTimeMode}>PM</span>
+        <div className={theme.ampm}>
+          <span className={theme.am} onClick={this.toggleTimeMode}>AM</span>
+          <span className={theme.pm} onClick={this.toggleTimeMode}>PM</span>
         </div>
       );
     }
   }
 
   render () {
-    const display = `display-${this.state.display}`;
-    const format = `format-${time.getTimeMode(this.state.displayTime)}`;
-    const className = ClassNames([style.dialog, style[display], style[format]], this.props.className);
+    const { theme } = this.props;
+    const display = `${this.state.display}Display`;
+    const format = `${time.getTimeMode(this.state.displayTime)}Format`;
+    const className = classnames([theme.dialog, theme[display], theme[format]], this.props.className);
     return (
       <Dialog active={this.props.active} className={className} actions={this.actions}>
-        <header className={style.header}>
-          <span className={style.hours} onClick={this.switchDisplay.bind(this, 'hours')}>
+        <header className={theme.header}>
+          <span className={theme.hours} onClick={this.switchDisplay.bind(this, 'hours')}>
             {('0' + this.formatHours()).slice(-2)}
           </span>
-          <span className={style.separator}>:</span>
-          <span className={style.minutes} onClick={this.switchDisplay.bind(this, 'minutes')}>
+          <span className={theme.separator}>:</span>
+          <span className={theme.minutes} onClick={this.switchDisplay.bind(this, 'minutes')}>
             {('0' + this.state.displayTime.getMinutes()).slice(-2)}
           </span>
           {this.renderAMPMLabels()}
@@ -98,6 +114,7 @@ class TimePickerDialog extends React.Component {
           format={this.props.format}
           onChange={this.handleClockChange}
           onHandMoved={this.handleHandMoved}
+          theme={this.props.theme}
           time={this.state.displayTime}
         />
       </Dialog>
diff --git a/components/time_picker/readme.md b/components/time_picker/readme.md
index de3ce67a4..59987a238 100644
--- a/components/time_picker/readme.md
+++ b/components/time_picker/readme.md
@@ -5,19 +5,28 @@ A [dialog picker](https://www.google.com/design/spec/components/pickers.html#pic
 <!-- example -->
 ```jsx
 import TimePicker from 'react-toolbox/lib/time_picker';
+import theme from 'react-toolbox/lib/time_picker/theme'
+
 let time = new Date();
 time.setHours(17);
 time.setMinutes(28);
 
 class TimePickerTest extends React.Component {
-	state = {time};
+  state = {time};
 
   handleChange = (time) => {
-  	this.setState({time});
+    this.setState({time});
   };
 
   render () {
-  	return <TimePicker label='Finishing time' onChange={this.handleChange} value={this.state.time} />;
+    return (
+      <TimePicker
+        label='Finishing time'
+        onChange={this.handleChange}
+        value={this.state.time}
+        theme={theme}
+      />
+    );
   }
 }
 ```
@@ -33,3 +42,33 @@ class TimePickerTest extends React.Component {
 | `label`         | `String`    |             | The text string to use for the floating label element in the input component.|
 | `onChange`      | `Function`  |             | Callback called when the picker value is changed.|
 | `value`         | `Date`      |             | Datetime object with currrently selected time. |
+
+## Theming
+
+You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxTimePicker`, it should implement the following interface:
+
+| Name     | Description|
+|:---------|:-----------|
+| `active` | Added to the number which is active in clock face.|
+| `am` | AM label in dialog header when mode is AM/PM.|
+| `amFormat` | Added to the dialog when the selected format is AM.|
+| `ampm` | Wrapper for AM and PM labels in header when mode is AM/PM.|
+| `button` | Used for buttons inside the dialog of the picker.|
+| `clock` | Clock root class element.|
+| `clockWrapper` | Wrapper for the proper positioning of the clock.|
+| `dialog` | Used for the dialog component.|
+| `face` | Used to style the clock face.|
+| `hand` | Used for the clock's hand.|
+| `header` | Dialog header wrapper class.|
+| `hours` | Used for hours in dialog header.|
+| `hoursDisplay` | Added to the dialog hours are displayed.|
+| `input` | Used for Input element that opens the picker.|
+| `knob` | Used for the knob of the hand.|
+| `minutes` | Used for minutes in dialog header.|
+| `minutesDisplay` | Added to the dialog minutes are displayed.|
+| `number` | Each of the numbers in the clock's face.|
+| `placeholder` | Placeholder for the clock inside the dialog (inner wrapper).|
+| `pm` | PM label in dialog header when mode is AM/PM.|
+| `pmFormat` | Added to the dialog when the selected format is PM.|
+| `separator` | Is the `:` separator between hours and minutes in dialog header.|
+| `small` | Added to the knob when no round number is selected.|
diff --git a/components/time_picker/style.scss b/components/time_picker/style.scss
deleted file mode 100644
index 7bead8753..000000000
--- a/components/time_picker/style.scss
+++ /dev/null
@@ -1,66 +0,0 @@
-@import "http://github.com/base";
-@import "http://github.com/config";
-
-.input > [role="input"] {
-  cursor: pointer;
-}
-
-.header {
-  position: relative;
-  width: 100%;
-  padding: $timepicker-header-padding;
-  font-size: $timepicker-header-font-size;
-  color: $timepicker-primary-contrast-color;
-  text-align: center;
-  background: $timepicker-primary-color;
-}
-
-.hours, .minutes {
-  display: inline-block;
-  cursor: pointer;
-  opacity: .6;
-}
-
-.separator {
-  margin: 0 $timepicker-header-padding / 2;
-  opacity: .6;
-}
-
-.ampm {
-  position: absolute;
-  top: 50%;
-  right: 2 * $unit;
-  width: $timepicker-ampm-width;
-  height: $timepicker-ampm-height * 2;
-  margin-top: - $timepicker-ampm-height;
-  font-size: $timepicker-ampm-font-size;
-  line-height: $timepicker-ampm-height;
-  text-align: center;
-}
-
-.am, .pm {
-  display: block;
-  cursor: pointer;
-  opacity: .6;
-}
-
-.dialog {
-  width: $timepicker-dialog-width;
-  > [role="body"] {
-    padding: 0;
-    overflow-y: visible;
-  }
-  > [role="navigation"] > .button {
-    color: $timepicker-primary-color;
-    &:hover {
-      background: $timepicker-primary-hover-color;
-    }
-    &:focus:not(:active) {
-      background: $timepicker-primary-hover-color;
-    }
-  }
-  &.display-hours .hours, &.display-minutes .minutes, &.format-am .am,
-  &.format-pm .pm {
-    opacity: 1;
-  }
-}
diff --git a/components/time_picker/style.clock.scss b/components/time_picker/theme.scss
similarity index 63%
rename from components/time_picker/style.clock.scss
rename to components/time_picker/theme.scss
index e89bd53b9..ade3a0381 100644
--- a/components/time_picker/style.clock.scss
+++ b/components/time_picker/theme.scss
@@ -1,7 +1,71 @@
 @import "http://github.com/base";
 @import "http://github.com/config";
 
-.root {
+.input > [role="input"] {
+  cursor: pointer;
+}
+
+.header {
+  position: relative;
+  width: 100%;
+  padding: $timepicker-header-padding;
+  font-size: $timepicker-header-font-size;
+  color: $timepicker-primary-contrast-color;
+  text-align: center;
+  background: $timepicker-primary-color;
+}
+
+.hours, .minutes {
+  display: inline-block;
+  cursor: pointer;
+  opacity: .6;
+}
+
+.separator {
+  margin: 0 $timepicker-header-padding / 2;
+  opacity: .6;
+}
+
+.ampm {
+  position: absolute;
+  top: 50%;
+  right: 2 * $unit;
+  width: $timepicker-ampm-width;
+  height: $timepicker-ampm-height * 2;
+  margin-top: - $timepicker-ampm-height;
+  font-size: $timepicker-ampm-font-size;
+  line-height: $timepicker-ampm-height;
+  text-align: center;
+}
+
+.am, .pm {
+  display: block;
+  cursor: pointer;
+  opacity: .6;
+}
+
+.dialog {
+  width: $timepicker-dialog-width;
+  > [role="body"] {
+    padding: 0;
+    overflow-y: visible;
+  }
+  > [role="navigation"] > .button {
+    color: $timepicker-primary-color;
+    &:hover {
+      background: $timepicker-primary-hover-color;
+    }
+    &:focus:not(:active) {
+      background: $timepicker-primary-hover-color;
+    }
+  }
+  &.hoursDisplay .hours, &.minutesDisplay .minutes, &.amFormat .am,
+  &.pmFormat .pm {
+    opacity: 1;
+  }
+}
+
+.clock {
   padding: $clock-padding;
 }
 
@@ -10,7 +74,7 @@
   z-index: $z-index-high;
 }
 
-.wrapper {
+.clockWrapper {
   position: absolute;
   width: 100%;
   background-color: $color-divider;
diff --git a/spec/theme.js b/spec/theme.js
index bb1fed67a..ad251ec69 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -10,6 +10,7 @@ import ToolboxDatePicker from '../components/date_picker/theme.scss';
 import ToolboxDialog from '../components/dialog/theme.scss';
 import ToolboxInput from '../components/input/theme.scss';
 import ToolboxRipple from '../components/ripple/theme.scss';
+import ToolboxTimePicker from '../components/time_picker/theme.scss';
 
 export default defineTheme({
   ToolboxAppBar,
@@ -22,5 +23,6 @@ export default defineTheme({
   ToolboxDatePicker,
   ToolboxDialog,
   ToolboxInput,
-  ToolboxRipple
+  ToolboxRipple,
+  ToolboxTimePicker
 });

From a2cc04cff466607d12080c688fcde3d655089b46 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 22 May 2016 13:26:30 +0200
Subject: [PATCH 0539/1024] Add Clock and ClockHours to TimePicker migration

---
 components/time_picker/Clock.js      | 15 +++++++++++----
 components/time_picker/ClockHours.js |  6 +++++-
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/components/time_picker/Clock.js b/components/time_picker/Clock.js
index b5bae57ea..ecc0fad14 100644
--- a/components/time_picker/Clock.js
+++ b/components/time_picker/Clock.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import CssTransitionGroup from 'react-addons-css-transition-group';
 import { ZoomIn, ZoomOut } from '../animations';
-import style from './style.clock';
 import time from '../utils/time';
 import Hours from './ClockHours';
 import Minutes from './ClockMinutes';
@@ -13,6 +12,11 @@ class Clock extends React.Component {
     format: React.PropTypes.oneOf(['24hr', 'ampm']),
     onChange: React.PropTypes.func,
     onHandMoved: React.PropTypes.func,
+    theme: React.PropTypes.shape({
+      clock: React.PropTypes.string.isRequired,
+      clockWrapper: React.PropTypes.string.isRequired,
+      placeholder: React.PropTypes.string.isRequired
+    }),
     time: React.PropTypes.object
   };
 
@@ -81,6 +85,7 @@ class Clock extends React.Component {
         selected={this.props.time.getHours()}
         spacing={this.state.radius * 0.18}
         onHandMoved={this.props.onHandMoved}
+        theme={this.props.theme}
       />
     );
   }
@@ -94,17 +99,19 @@ class Clock extends React.Component {
         selected={this.props.time.getMinutes()}
         spacing={this.state.radius * 0.18}
         onHandMoved={this.props.onHandMoved}
+        theme={this.props.theme}
       />
     );
   }
 
   render () {
+    const { theme } = this.props;
     const animation = this.props.display === 'hours' ? ZoomOut : ZoomIn;
     return (
-      <div data-react-toolbox='clock' className={style.root}>
-        <div ref='placeholder' className={style.placeholder} style={{height: this.state.radius * 2}}>
+      <div data-react-toolbox='clock' className={theme.clock}>
+        <div ref='placeholder' className={theme.placeholder} style={{height: this.state.radius * 2}}>
           <CssTransitionGroup transitionName={animation} transitionEnterTimeout={500} transitionLeaveTimeout={500}>
-            <div key={this.props.display} className={style.wrapper} style={{height: this.state.radius * 2}}>
+            <div key={this.props.display} className={theme.clockWrapper} style={{height: this.state.radius * 2}}>
               {this.props.display === 'hours' ? this.renderHours() : null}
               {this.props.display === 'minutes' ? this.renderMinutes() : null}
             </div>
diff --git a/components/time_picker/ClockHours.js b/components/time_picker/ClockHours.js
index a1c2491fb..50a6a214c 100644
--- a/components/time_picker/ClockHours.js
+++ b/components/time_picker/ClockHours.js
@@ -16,7 +16,8 @@ class Hours extends React.Component {
     onHandMoved: React.PropTypes.func,
     radius: React.PropTypes.number,
     selected: React.PropTypes.number,
-    spacing: React.PropTypes.number
+    spacing: React.PropTypes.number,
+    theme: React.PropTypes.object
   };
 
   state = {
@@ -59,6 +60,7 @@ class Hours extends React.Component {
           numbers={innerNumbers}
           spacing={this.props.spacing}
           radius={innerRadius}
+          theme={this.props.theme}
           active={this.props.selected}
         />
       );
@@ -79,12 +81,14 @@ class Hours extends React.Component {
             radius={radius}
             twoDigits={is24hr}
             active={is24hr ? selected : (selected % 12 || 12)}
+            theme={this.props.theme}
           />
           {this.renderInnerFace(radius - spacing * innerSpacing)}
           <Hand ref='hand'
             angle={selected * step}
             length={(this.state.inner ? radius - spacing * innerSpacing : radius) - spacing}
             onMove={this.handleHandMove}
+            theme={this.props.theme}
             onMoved={onHandMoved}
             origin={center}
             step={step}

From f6d2d3f95d2c2771b4ebd7fe2e7f992a46dd6a39 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 22 May 2016 13:42:52 +0200
Subject: [PATCH 0540/1024] Migrate Drawer and Overlay to themr

---
 components/drawer/Drawer.js                   | 29 ++++++++++++-------
 components/drawer/readme.md                   | 16 +++++++++-
 components/drawer/{style.scss => theme.scss}  |  2 +-
 components/overlay/Overlay.js                 | 29 ++++++++++++-------
 components/overlay/{style.scss => theme.scss} |  6 ++--
 spec/theme.js                                 |  4 +++
 6 files changed, 59 insertions(+), 27 deletions(-)
 rename components/drawer/{style.scss => theme.scss} (98%)
 rename components/overlay/{style.scss => theme.scss} (96%)

diff --git a/components/drawer/Drawer.js b/components/drawer/Drawer.js
index 76ddaecad..5f0894674 100644
--- a/components/drawer/Drawer.js
+++ b/components/drawer/Drawer.js
@@ -1,19 +1,19 @@
 import React from 'react';
-import ClassNames from 'classnames';
+import { themr } from 'react-css-themr';
+import classnames from 'classnames';
 import ActivableRenderer from '../hoc/ActivableRenderer';
 import Overlay from '../overlay';
-import style from './style';
 
-const Drawer = (props) => {
-  const className = ClassNames([style.root, style[props.type]], {
-    [style.active]: props.active
-  }, props.className);
+const Drawer = ({ active, children, className, onOverlayClick, theme, type }) => {
+  const _className = classnames([theme.drawer, theme[type]], {
+    [theme.active]: active
+  }, className);
 
   return (
-    <Overlay active={props.active} onClick={props.onOverlayClick}>
-      <div data-react-toolbox='drawer' className={className}>
-        <aside className={style.content}>
-          {props.children}
+    <Overlay active={active} onClick={onOverlayClick}>
+      <div data-react-toolbox='drawer' className={_className}>
+        <aside className={theme.content}>
+          {children}
         </aside>
       </div>
     </Overlay>
@@ -25,6 +25,13 @@ Drawer.propTypes = {
   children: React.PropTypes.node,
   className: React.PropTypes.string,
   onOverlayClick: React.PropTypes.func,
+  theme: React.PropTypes.shape({
+    active: React.PropTypes.string.isRequired,
+    content: React.PropTypes.string.isRequired,
+    drawer: React.PropTypes.string.isRequired,
+    left: React.PropTypes.string.isRequired,
+    right: React.PropTypes.string.isRequired
+  }),
   type: React.PropTypes.oneOf(['left', 'right'])
 };
 
@@ -34,4 +41,4 @@ Drawer.defaultProps = {
   type: 'left'
 };
 
-export default ActivableRenderer()(Drawer);
+export default themr('ToolboxDrawer')(ActivableRenderer()(Drawer));
diff --git a/components/drawer/readme.md b/components/drawer/readme.md
index 13dfd6e6f..1ba97bfbc 100644
--- a/components/drawer/readme.md
+++ b/components/drawer/readme.md
@@ -5,6 +5,8 @@ The [navigation drawer](https://www.google.com/design/spec/patterns/navigation-d
 <!-- example -->
 ```jsx
 import Drawer from 'react-toolbox/lib/drawer';
+import theme from 'react-toolbox/lib/drawer/theme';
+// Remember you can add styles using ThemeProvider
 
 class DrawerTest extends React.Component {
   state = {
@@ -19,7 +21,7 @@ class DrawerTest extends React.Component {
     return (
       <div>
         <Button label='Show Drawer' raised accent onClick={this.handleToggle} />
-        <Drawer active={this.state.active} onOverlayClick={this.handleToggle}>
+        <Drawer active={this.state.active} onOverlayClick={this.handleToggle} theme={theme}>
           <h5>This is your Drawer.</h5>
           <p>You can embed any content you want, for example a Menu.</p>
         </Drawer>
@@ -37,3 +39,15 @@ class DrawerTest extends React.Component {
 | `className`       | `String`        | `''`          | Sets a class to give customized styles to the drawer.|
 | `onOverlayClick`  | `Function`      |               | Callback function to be invoked when the overlay is clicked.|
 | `type`            | `String`        | `left`        | Type of drawer. It can be `left` or `right` to display the drawer on the left or right side of the screen.|
+
+## Theming
+
+You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxDrawer`, it should implement the following interface:
+
+| Name     | Description|
+|:---------|:-----------|
+| `active` | Used for the root class when the drawer is active.|
+| `content`  | Used for the drawer content.|
+| `drawer`   | Root class.|
+| `left`   | Added to the root class when drawer is to the left.|
+| `right`   | Added to the root class when drawer is to the right.|
diff --git a/components/drawer/style.scss b/components/drawer/theme.scss
similarity index 98%
rename from components/drawer/style.scss
rename to components/drawer/theme.scss
index e58ddff0f..3c2c2a1c4 100644
--- a/components/drawer/style.scss
+++ b/components/drawer/theme.scss
@@ -1,7 +1,7 @@
 @import "http://github.com/base";
 @import "http://github.com/config";
 
-.root {
+.drawer {
   @include shadow-2dp();
   position: absolute;
   top: 0;
diff --git a/components/overlay/Overlay.js b/components/overlay/Overlay.js
index 467221f36..f38ab5bb2 100644
--- a/components/overlay/Overlay.js
+++ b/components/overlay/Overlay.js
@@ -1,7 +1,7 @@
 import React from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 import Portal from '../hoc/Portal';
-import ClassNames from 'classnames';
-import style from './style';
 
 class Overlay extends React.Component {
   static propTypes = {
@@ -10,7 +10,13 @@ class Overlay extends React.Component {
     className: React.PropTypes.string,
     invisible: React.PropTypes.bool,
     onClick: React.PropTypes.func,
-    onEscKeyDown: React.PropTypes.func
+    onEscKeyDown: React.PropTypes.func,
+    theme: React.PropTypes.shape({
+      active: React.PropTypes.string.isRequired,
+      backdrop: React.PropTypes.string.isRequired,
+      invisible: React.PropTypes.string.isRequired,
+      overlay: React.PropTypes.string.isRequired
+    })
   };
 
   static defaultProps = {
@@ -49,20 +55,21 @@ class Overlay extends React.Component {
   }
 
   render () {
-    const className = ClassNames(style.root, {
-      [style.active]: this.props.active,
-      [style.invisible]: this.props.invisible
-    }, this.props.className);
+    const { active, className, children, invisible, onClick, theme } = this.props;
+    const _className = classnames(theme.overlay, {
+      [theme.active]: active,
+      [theme.invisible]: invisible
+    }, className);
 
     return (
       <Portal>
-        <div className={className}>
-          <div className={style.overlay} onClick={this.props.onClick} />
-          {this.props.children}
+        <div className={_className}>
+          <div className={theme.backdrop} onClick={onClick} />
+          {children}
         </div>
       </Portal>
     );
   }
 }
 
-export default Overlay;
+export default themr('ToolboxOverlay')(Overlay);
diff --git a/components/overlay/style.scss b/components/overlay/theme.scss
similarity index 96%
rename from components/overlay/style.scss
rename to components/overlay/theme.scss
index 60395fb7f..f107b466c 100644
--- a/components/overlay/style.scss
+++ b/components/overlay/theme.scss
@@ -1,7 +1,7 @@
 @import "http://github.com/base";
 @import "http://github.com/config";
 
-.root {
+.overlay {
   position: fixed;
   top: 0;
   left: 0;
@@ -19,7 +19,7 @@
   }
 }
 
-.overlay {
+.backdrop {
   position: absolute;
   top: 0;
   left: 0;
@@ -34,7 +34,7 @@
 
 .active {
   pointer-events: all;
-  > .overlay {
+  > .backdrop {
     opacity: $overlay-opacity;
   }
 }
diff --git a/spec/theme.js b/spec/theme.js
index ad251ec69..eddb7c355 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -8,7 +8,9 @@ import ToolboxCheckbox from '../components/checkbox/theme.scss';
 import ToolboxChip from '../components/chip/theme.scss';
 import ToolboxDatePicker from '../components/date_picker/theme.scss';
 import ToolboxDialog from '../components/dialog/theme.scss';
+import ToolboxDrawer from '../components/drawer/theme.scss';
 import ToolboxInput from '../components/input/theme.scss';
+import ToolboxOverlay from '../components/overlay/theme.scss';
 import ToolboxRipple from '../components/ripple/theme.scss';
 import ToolboxTimePicker from '../components/time_picker/theme.scss';
 
@@ -22,7 +24,9 @@ export default defineTheme({
   ToolboxChip,
   ToolboxDatePicker,
   ToolboxDialog,
+  ToolboxDrawer,
   ToolboxInput,
+  ToolboxOverlay,
   ToolboxRipple,
   ToolboxTimePicker
 });

From fee4a1931c69856b8a4d82a6ce5dfd2c1ff251cb Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 22 May 2016 13:45:01 +0200
Subject: [PATCH 0541/1024] Remove style for form

---
 components/form/Form.js    | 1 -
 components/form/style.scss | 3 ---
 2 files changed, 4 deletions(-)
 delete mode 100644 components/form/style.scss

diff --git a/components/form/Form.js b/components/form/Form.js
index b7afcd83a..bd0abe7af 100644
--- a/components/form/Form.js
+++ b/components/form/Form.js
@@ -9,7 +9,6 @@ import RadioGroup from '../radio/RadioGroup';
 import Slider from '../slider';
 import Switch from '../switch';
 import TimePicker from '../time_picker';
-import style from './style';
 
 const Component = {
   'autocomplete': Autocomplete,
diff --git a/components/form/style.scss b/components/form/style.scss
deleted file mode 100644
index 86ed935cc..000000000
--- a/components/form/style.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.root > :last-child {
-  margin-bottom: 0;
-}

From 58f8d61598a83f36eb70f531a98532a2bf2919a5 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 22 May 2016 18:11:27 +0200
Subject: [PATCH 0542/1024] Migrate Layout to themr

---
 components/layout/Layout.js                  | 13 +++---
 components/layout/NavDrawer.js               | 44 +++++++++++++------
 components/layout/Panel.js                   | 16 ++++---
 components/layout/Sidebar.js                 | 24 +++++++----
 components/layout/readme.md                  | 45 ++++++++++++++++++++
 components/layout/{style.scss => theme.scss} |  2 +-
 spec/theme.js                                |  2 +
 7 files changed, 111 insertions(+), 35 deletions(-)
 rename components/layout/{style.scss => theme.scss} (99%)

diff --git a/components/layout/Layout.js b/components/layout/Layout.js
index 9b83d3f3d..e63f4451f 100644
--- a/components/layout/Layout.js
+++ b/components/layout/Layout.js
@@ -1,9 +1,9 @@
 import React from 'react';
+import { themr } from 'react-css-themr';
 import classnames from 'classnames';
-import style from './style';
 
-const Layout = ({ className, children }) => (
-  <div data-react-toolbox='layout' className={classnames(style.root, className)}>
+const Layout = ({ className, children, theme }) => (
+  <div data-react-toolbox='layout' className={classnames(theme.layout, className)}>
     {children}
   </div>
 );
@@ -44,11 +44,14 @@ Layout.propTypes = {
       );
     }
   },
-  className: React.PropTypes.string
+  className: React.PropTypes.string,
+  theme: React.PropTypes.shape({
+    layout: React.PropTypes.string.isRequired
+  })
 };
 
 Layout.defaultProps = {
   className: ''
 };
 
-export default Layout;
+export default themr('ToolboxLayout')(Layout);
diff --git a/components/layout/NavDrawer.js b/components/layout/NavDrawer.js
index 0504cfb24..5a927d702 100644
--- a/components/layout/NavDrawer.js
+++ b/components/layout/NavDrawer.js
@@ -1,24 +1,24 @@
 import React from 'react';
 import classnames from 'classnames';
-import style from './style';
+import { themr } from 'react-css-themr';
 
-const NavDrawer = (props) => {
-  const rootClasses = classnames([style.navDrawer], {
-    [style['permanent-' + props.permanentAt]]: props.permanentAt,
-    [style.wide]: (props.width === 'wide'),
-    [style.active]: props.active,
-    [style.pinned]: props.pinned
-  }, props.className);
+const NavDrawer = ({ active, children, className, onOverlayClick, permanentAt, pinned, scrollY, theme, width }) => {
+  const rootClasses = classnames([theme.navDrawer], {
+    [theme['permanent-' + permanentAt]]: permanentAt,
+    [theme.wide]: (width === 'wide'),
+    [theme.active]: active,
+    [theme.pinned]: pinned
+  }, className);
 
-  const drawerClasses = classnames(style.drawerContent, {
-      [style.scrollY]: props.scrollY
+  const drawerClasses = classnames(theme.drawerContent, {
+      [theme.scrollY]: scrollY
   });
 
   return (
-    <div data-react-toolbox='nav-drawer' className={rootClasses} onClick={props.onOverlayClick}>
-      <div data-react-toolbox='nav-drawer-scrim' className={style.scrim}>
+    <div data-react-toolbox='nav-drawer' className={rootClasses} onClick={onOverlayClick}>
+      <div data-react-toolbox='nav-drawer-scrim' className={theme.scrim}>
         <aside data-react-toolbox='nav-drawer-content' className={drawerClasses}>
-          {props.children}
+          {children}
         </aside>
       </div>
     </div>
@@ -33,6 +33,22 @@ NavDrawer.propTypes = {
   permanentAt: React.PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'xxl', 'xxxl']),
   pinned: React.PropTypes.bool,
   scrollY: React.PropTypes.bool,
+  theme: React.PropTypes.shape({
+    active: React.PropTypes.string.isRequired,
+    drawerContent: React.PropTypes.string.isRequired,
+    lgPermanent: React.PropTypes.string.isRequired,
+    mdPermanent: React.PropTypes.string.isRequired,
+    navDrawer: React.PropTypes.string.isRequired,
+    normal: React.PropTypes.string.isRequired,
+    pinned: React.PropTypes.string.isRequired,
+    scrim: React.PropTypes.string.isRequired,
+    scrollY: React.PropTypes.string.isRequired,
+    smPermanent: React.PropTypes.string.isRequired,
+    wide: React.PropTypes.string.isRequired,
+    xlPermanent: React.PropTypes.string.isRequired,
+    xxlPermanent: React.PropTypes.string.isRequired,
+    xxxlPermanent: React.PropTypes.string.isRequired
+  }),
   width: React.PropTypes.oneOf(['normal', 'wide'])
 };
 
@@ -43,4 +59,4 @@ NavDrawer.defaultProps = {
   width: 'normal'
 };
 
-export default NavDrawer;
+export default themr('ToolboxLayout')(NavDrawer);
diff --git a/components/layout/Panel.js b/components/layout/Panel.js
index a65005842..92507055e 100644
--- a/components/layout/Panel.js
+++ b/components/layout/Panel.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import classnames from 'classnames';
-import style from './style';
+import { themr } from 'react-css-themr';
 
-const Panel = ({ children, className, scrollY }) => {
-  const _className = classnames(style.panel, {
-    [style.scrollY]: scrollY
+const Panel = ({ children, className, scrollY, theme }) => {
+  const _className = classnames(theme.panel, {
+    [theme.scrollY]: scrollY
   }, className);
 
   return (
@@ -17,7 +17,11 @@ const Panel = ({ children, className, scrollY }) => {
 Panel.propTypes = {
   children: React.PropTypes.any,
   className: React.PropTypes.string,
-  scrollY: React.PropTypes.bool
+  scrollY: React.PropTypes.bool,
+  theme: React.PropTypes.shape({
+    panel: React.PropTypes.string.isRequired,
+    scrollY: React.PropTypes.string.isRequired
+  })
 };
 
 Panel.defaultProps = {
@@ -25,4 +29,4 @@ Panel.defaultProps = {
   scrollY: false
 };
 
-export default Panel;
+export default themr('ToolboxLayout')(Panel);
diff --git a/components/layout/Sidebar.js b/components/layout/Sidebar.js
index 5b3567304..800d9a509 100644
--- a/components/layout/Sidebar.js
+++ b/components/layout/Sidebar.js
@@ -1,20 +1,20 @@
 import React from 'react';
 import classnames from 'classnames';
-import style from './style';
+import { themr } from 'react-css-themr';
 
-const Sidebar = (props) => {
-  const wrapperClasses = classnames(style.sidebar, style[`width-${props.width}`], {
-    [style.pinned]: props.pinned
-  }, props.className);
+const Sidebar = ({ children, className, pinned, scrollY, theme, width }) => {
+  const wrapperClasses = classnames(theme.sidebar, theme[`width-${width}`], {
+    [theme.pinned]: pinned
+  }, className);
 
-  const innerClasses = classnames(style.sidebarContent, {
-    [style.scrollY]: props.scrollY
+  const innerClasses = classnames(theme.sidebarContent, {
+    [theme.scrollY]: scrollY
   });
 
   return (
     <div data-react-toolbox='sidebar' className={wrapperClasses}>
       <aside data-react-toolbox='sidebar-content' className={innerClasses}>
-        {props.children}
+        {children}
       </aside>
     </div>
   );
@@ -25,6 +25,12 @@ Sidebar.propTypes = {
   className: React.PropTypes.string,
   pinned: React.PropTypes.bool,
   scrollY: React.PropTypes.bool,
+  theme: React.PropTypes.shape({
+    pinned: React.PropTypes.string.isRequired,
+    scrollY: React.PropTypes.string.isRequired,
+    sidebar: React.PropTypes.string.isRequired,
+    sidebarContent: React.PropTypes.string.isRequired
+  }),
   width: React.PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 25, 33, 50, 66, 75, 100])
 };
 
@@ -35,4 +41,4 @@ Sidebar.defaultProps = {
   width: 5
 };
 
-export default Sidebar;
+export default themr('ToolboxLayout')(Sidebar);
diff --git a/components/layout/readme.md b/components/layout/readme.md
index 2b74ed2e8..fa66d8a0f 100644
--- a/components/layout/readme.md
+++ b/components/layout/readme.md
@@ -111,6 +111,13 @@ with `flex` set to 1, and use whatever layout you like within it.
 | `children` | `Nodes` |  | A `Panel`, optionally preceded by a `NavDrawer` and/or followed by a `Sidebar` |
 | `className` | `string` |  | Additional class(es) for custom styling. |
 
+### Theme
+The themed key the `Layout` in general is `ToolboxLayout`. For the `Layout` wrapper it should only provide one class interface:
+
+| Name     | Description|
+|:---------|:-----------|
+| `layout` | Class used in the container to position and align inner items.|
+
 ## NavDrawer
 
 The [navigation drawer](https://www.google.com/design/spec/patterns/navigation-drawer.html) slides
@@ -138,6 +145,26 @@ and can also specify a breakpoint at which the drawer automatically becomes perm
 | `onOverlayClick` | `Function`     |            | Callback function to be invoked when the overlay is clicked.|
 | `className` | `string` |  | Additional class(es) for custom styling. |
 
+### Theme
+You can use `ToolboxLayout` as themed key for this component. The class interface is as follows:
+
+| Name     | Description|
+|:---------|:-----------|
+| `active` | Used when the drawer is active.|
+| `drawerContent` | Used for the content of the drawer.|
+| `lgPermanent` | Added to the root class for large drawer.|
+| `mdPermanent` | Added to the root class for medium drawer.|
+| `navDrawer` | Root class for the drawer.|
+| `normal` | Added to the root class if width is normal.|
+| `pinned` | Added to the root class if positioning is pinned.|
+| `scrim` | Used as a wrapper for the drawer content.|
+| `scrollY` | Added to the drawer content if its scrollable.|
+| `smPermanent` | Added to the root class for small drawer.|
+| `wide` | Added to the root class if width is wide.|
+| `xlPermanent` | Added to the root class for extra big drawer.|
+| `xxlPermanent` | Added to the root class for super big drawer.|
+| `xxxlPermanent` | Added to the root class for largest possible drawer.|
+
 ## Panel
 
 The `Panel` is the main content area within a `Layout`.  It is a full-height
@@ -150,6 +177,14 @@ and `Sidebar` are laid out.
 | `scrollY` | `bool` | `false` | If true, the panel will vertically scroll all content. |
 | `className` | `string` |  | Additional class(es) for custom styling. |
 
+### Theme
+You can use `ToolboxLayout` as themed key for this component. The class interface is as follows:
+
+| Name     | Description|
+|:---------|:-----------|
+| `panel` | Used as the root class of the panel component.|
+| `scrollY` | Used in case the panel is scrollable.|
+
 ## Sidebar
 
 The `Sidebar` is an extra drawer that docks to the right side of the `Layout`.
@@ -166,6 +201,16 @@ covers the entire screen (see [examples](https://www.google.com/design/spec/layo
 | `scrollY` | `bool` | `false` | If true, the sidebar will vertically scroll all content. |
 | `className` | `string` |  | Additional class(es) for custom styling. |
 
+### Theme
+You can use `ToolboxLayout` as themed key for this component. The class interface is as follows:
+
+| Name     | Description|
+|:---------|:-----------|
+| `pinned` | Added to the root class if sidebar is pinned.|
+| `scrollY` | Add to the content of sidebar if its scrollable.|
+| `sidebar` | Root class of the sidebar.|
+| `sidebarContent` | Used in for the content element of the sidebar.|
+
 ## Nesting Layouts
 
 The `Layout` is meant to be used near the top level of your application,
diff --git a/components/layout/style.scss b/components/layout/theme.scss
similarity index 99%
rename from components/layout/style.scss
rename to components/layout/theme.scss
index 16e16221b..2404b2f3a 100644
--- a/components/layout/style.scss
+++ b/components/layout/theme.scss
@@ -2,7 +2,7 @@
 @import "http://github.com/config";
 @import "http://github.com/mixins";
 
-.root {
+.layout {
   position: relative;
   display: flex;
   width: 100%;
diff --git a/spec/theme.js b/spec/theme.js
index eddb7c355..3219a380c 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -10,6 +10,7 @@ import ToolboxDatePicker from '../components/date_picker/theme.scss';
 import ToolboxDialog from '../components/dialog/theme.scss';
 import ToolboxDrawer from '../components/drawer/theme.scss';
 import ToolboxInput from '../components/input/theme.scss';
+import ToolboxLayout from '../components/layout/theme.scss';
 import ToolboxOverlay from '../components/overlay/theme.scss';
 import ToolboxRipple from '../components/ripple/theme.scss';
 import ToolboxTimePicker from '../components/time_picker/theme.scss';
@@ -26,6 +27,7 @@ export default defineTheme({
   ToolboxDialog,
   ToolboxDrawer,
   ToolboxInput,
+  ToolboxLayout,
   ToolboxOverlay,
   ToolboxRipple,
   ToolboxTimePicker

From 36869cb9133754887ab076773572d091fddec8d7 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 22 May 2016 18:18:47 +0200
Subject: [PATCH 0543/1024] Migrate Link to themr

---
 components/link/Link.js                    | 31 +++++++++++++---------
 components/link/readme.md                  | 17 +++++++++---
 components/link/{style.scss => theme.scss} |  2 +-
 spec/theme.js                              |  2 ++
 4 files changed, 35 insertions(+), 17 deletions(-)
 rename components/link/{style.scss => theme.scss} (98%)

diff --git a/components/link/Link.js b/components/link/Link.js
index 8500bd1d0..15810dcbf 100644
--- a/components/link/Link.js
+++ b/components/link/Link.js
@@ -1,19 +1,19 @@
 import React from 'react';
-import ClassNames from 'classnames';
-import style from './style';
+import classnames from 'classnames';
 import FontIcon from '../font_icon';
+import { themr } from 'react-css-themr';
 
-const Link = ({children, ...props}) => {
-  const className = ClassNames(style.root, {
-    [style.active]: props.active
-  }, props.className);
+const Link = ({active, children, className, count, icon, label, theme, ...others}) => {
+  const _className = classnames(theme.link, {
+    [theme.active]: active
+  }, className);
 
   return (
-    <a {...props} data-react-toolbox='link'className={className}>
-      {props.icon ? <FontIcon className={style.icon} value={props.icon} /> : null}
-      {props.label ? <abbr>{props.label}</abbr> : null}
-      {props.count && parseInt(props.count) !== 0 ? <small>{props.count}</small> : null}
-      {children ? children : null}
+    <a data-react-toolbox='link' className={_className} {...others}>
+      {icon ? <FontIcon className={theme.icon} value={icon} /> : null}
+      {label ? <abbr>{label}</abbr> : null}
+      {count && parseInt(count) !== 0 ? <small>{count}</small> : null}
+      {children}
     </a>
   );
 };
@@ -27,7 +27,12 @@ Link.propTypes = {
     React.PropTypes.string,
     React.PropTypes.element
   ]),
-  label: React.PropTypes.string
+  label: React.PropTypes.string,
+  theme: React.PropTypes.shape({
+    active: React.PropTypes.string.isRequired,
+    icon: React.PropTypes.string.isRequired,
+    link: React.PropTypes.string.isRequired
+  })
 };
 
 Link.defaultProps = {
@@ -35,4 +40,4 @@ Link.defaultProps = {
   className: ''
 };
 
-export default Link;
+export default themr('ToolboxLink')(Link);
diff --git a/components/link/readme.md b/components/link/readme.md
index fa8dff1b6..5a6e0ec2c 100644
--- a/components/link/readme.md
+++ b/components/link/readme.md
@@ -5,12 +5,13 @@ The link is a very simple component that acts mostly as a wrapper for the HTML a
 <!-- example -->
 ```jsx
 import Link from 'react-toolbox/lib/link';
+import theme from 'react-toolbox/lib/link/theme';
 
 const LinksTest = () => (
   <nav>
-    <Link active href="http://github.com/#/components/link" label="Work" count={4} icon='business' />
-    <Link href="http://github.com/#/components/link" label="Blog" icon='speaker_notes' />
-    <Link href="http://github.com/#/components/link" label="Explore" icon='explore' />
+    <Link active href="http://github.com/#/components/link" label="Work" count={4} icon='business' theme={theme} />
+    <Link href="http://github.com/#/components/link" label="Blog" icon='speaker_notes' theme={theme} />
+    <Link href="http://github.com/#/components/link" label="Explore" icon='explore' theme={theme} />
   </nav>
 );
 ```
@@ -26,3 +27,13 @@ You can add as many properties as you want to be directly transferred to the out
 | `count`         | `Number`              |                 | Sets a count number.|
 | `icon`          | `String` or `Element` |                 | An icon key string to include a `FontIcon` component in front of the text.|
 | `label`         | `String`              |                 | The text string used for the text content of the link.|
+
+## Theming
+
+You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxLink`, it should implement the following interface:
+
+| Name     | Description|
+|:---------|:-----------|
+| `active` | Added to the root element if the Link is active.|
+| `icon`  | Used for the icon element if it's present.|
+| `link`   | Used for the root element.|
diff --git a/components/link/style.scss b/components/link/theme.scss
similarity index 98%
rename from components/link/style.scss
rename to components/link/theme.scss
index 4981c596d..b973fb8ab 100644
--- a/components/link/style.scss
+++ b/components/link/theme.scss
@@ -5,7 +5,7 @@
   font-size: 1.8 * $unit;
 }
 
-.root {
+.link {
   position: relative;
   display: flex;
   flex-direction: row;
diff --git a/spec/theme.js b/spec/theme.js
index 3219a380c..035c4dee6 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -11,6 +11,7 @@ import ToolboxDialog from '../components/dialog/theme.scss';
 import ToolboxDrawer from '../components/drawer/theme.scss';
 import ToolboxInput from '../components/input/theme.scss';
 import ToolboxLayout from '../components/layout/theme.scss';
+import ToolboxLink from '../components/link/theme.scss';
 import ToolboxOverlay from '../components/overlay/theme.scss';
 import ToolboxRipple from '../components/ripple/theme.scss';
 import ToolboxTimePicker from '../components/time_picker/theme.scss';
@@ -28,6 +29,7 @@ export default defineTheme({
   ToolboxDrawer,
   ToolboxInput,
   ToolboxLayout,
+  ToolboxLink,
   ToolboxOverlay,
   ToolboxRipple,
   ToolboxTimePicker

From c39caf622cdc0cf883440a047c76294f66679664 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 22 May 2016 19:08:47 +0200
Subject: [PATCH 0544/1024] Migrate List to themr

---
 components/list/List.js                    | 14 +++---
 components/list/ListCheckbox.js            | 41 +++++++++--------
 components/list/ListDivider.js             | 17 +++++---
 components/list/ListItem.js                | 22 +++++-----
 components/list/ListItemAction.js          | 13 +++---
 components/list/ListItemActions.js         | 12 +++--
 components/list/ListItemContent.js         | 14 +++---
 components/list/ListItemLayout.js          | 17 +++++---
 components/list/ListItemText.js            | 17 +++++---
 components/list/ListSubHeader.js           | 20 +++++----
 components/list/readme.md                  | 51 +++++++++++++++++++++-
 components/list/{style.scss => theme.scss} |  8 ++--
 spec/theme.js                              |  2 +
 13 files changed, 166 insertions(+), 82 deletions(-)
 rename components/list/{style.scss => theme.scss} (98%)

diff --git a/components/list/List.js b/components/list/List.js
index 43bc560f8..6fac97741 100644
--- a/components/list/List.js
+++ b/components/list/List.js
@@ -1,13 +1,17 @@
 import React from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 import ListItem from './ListItem';
-import style from './style';
 
 class List extends React.Component {
   static propTypes = {
     children: React.PropTypes.node,
     className: React.PropTypes.string,
     ripple: React.PropTypes.bool,
-    selectable: React.PropTypes.bool
+    selectable: React.PropTypes.bool,
+    theme: React.PropTypes.shape({
+      list: React.PropTypes.string.isRequired
+    })
   };
 
   static defaultProps = {
@@ -30,14 +34,12 @@ class List extends React.Component {
   }
 
   render () {
-    let className = style.list;
-    if (this.props.className) className += ` ${this.props.className}`;
     return (
-      <ul data-react-toolbox='list' className={className}>
+      <ul data-react-toolbox='list' className={classnames(this.props.theme.list, this.props.className)}>
         {this.renderItems()}
       </ul>
     );
   }
 }
 
-export default List;
+export default themr('ToolboxList')(List);
diff --git a/components/list/ListCheckbox.js b/components/list/ListCheckbox.js
index 53ebb2841..df5d7784a 100644
--- a/components/list/ListCheckbox.js
+++ b/components/list/ListCheckbox.js
@@ -1,26 +1,25 @@
 import React from 'react';
-import ClassNames from 'classnames';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 import Checkbox from '../checkbox';
 import ListItemContent from './ListItemContent';
-import style from './style';
 
-const ListCheckbox = (props) => {
-  const className = ClassNames([style.item, style.checkboxItem], {
-    [style.withLegend]: props.legend,
-    [style.disabled]: props.disabled
-  }, props.className);
+const ListCheckbox = ({ caption, checked, className, disabled, legend, name, onBlur, onChange, onFocus, theme }) => {
+  const _className = classnames(theme.item, theme.checkboxItem, {
+    [theme.disabled]: disabled
+  }, className);
 
   return (
-    <li className={className}>
+    <li className={_className}>
       <Checkbox
-        checked={props.checked}
-        className={style.checkbox}
-        disabled={props.disabled}
-        label={<ListItemContent caption={props.caption} legend={props.legend} />}
-        name={props.name}
-        onBlur={props.onBlur}
-        onChange={props.onChange}
-        onFocus={props.onFocus}
+        checked={checked}
+        className={theme.checkbox}
+        disabled={disabled}
+        label={<ListItemContent caption={caption} legend={legend} />}
+        name={name}
+        onBlur={onBlur}
+        onChange={onChange}
+        onFocus={onFocus}
       />
     </li>
   );
@@ -35,7 +34,13 @@ ListCheckbox.propTypes = {
   name: React.PropTypes.string,
   onBlur: React.PropTypes.func,
   onChange: React.PropTypes.func,
-  onFocus: React.PropTypes.func
+  onFocus: React.PropTypes.func,
+  theme: React.PropTypes.shape({
+    checkbox: React.PropTypes.string.isRequired,
+    checkboxItem: React.PropTypes.string.isRequired,
+    disabled: React.PropTypes.string.isRequired,
+    item: React.PropTypes.string.isRequired
+  })
 };
 
 ListCheckbox.defaultProps = {
@@ -43,4 +48,4 @@ ListCheckbox.defaultProps = {
   disabled: false
 };
 
-export default ListCheckbox;
+export default themr('ToolboxList')(ListCheckbox);
diff --git a/components/list/ListDivider.js b/components/list/ListDivider.js
index a7b873e89..157ed09c2 100644
--- a/components/list/ListDivider.js
+++ b/components/list/ListDivider.js
@@ -1,17 +1,20 @@
 import React from 'react';
-import style from './style';
+import { themr } from 'react-css-themr';
 
-const ListDivider = ({inset}) => {
-  const className = inset ? `${style.divider} ${style.inset}` : style.divider;
-  return <hr className={className} />;
-};
+const ListDivider = ({inset, theme}) => (
+  <hr className={inset ? `${theme.divider} ${theme.inset}` : theme.divider} />
+);
 
 ListDivider.propTypes = {
-  inset: React.PropTypes.bool
+  inset: React.PropTypes.bool,
+  theme: React.PropTypes.shape({
+    divider: React.PropTypes.string.isRequired,
+    inset: React.PropTypes.string.isRequired
+  })
 };
 
 ListDivider.defaultProps = {
   inset: false
 };
 
-export default ListDivider;
+export default themr('ToolboxList')(ListDivider);
diff --git a/components/list/ListItem.js b/components/list/ListItem.js
index ee6864406..0455c6fc2 100644
--- a/components/list/ListItem.js
+++ b/components/list/ListItem.js
@@ -1,8 +1,8 @@
 import React from 'react';
+import { themr } from 'react-css-themr';
 import ListItemContent from './ListItemContent';
 import ListItemLayout from './ListItemLayout';
 import Ripple from '../ripple';
-import style from './style';
 
 class ListItem extends React.Component {
   static propTypes = {
@@ -11,10 +11,14 @@ class ListItem extends React.Component {
     disabled: React.PropTypes.bool,
     onClick: React.PropTypes.func,
     ripple: React.PropTypes.bool,
+    theme: React.PropTypes.shape({
+      listItem: React.PropTypes.string.isRequired
+    }),
     to: React.PropTypes.string
   };
 
   static defaultProps = {
+    className: '',
     disabled: false,
     ripple: false
   };
@@ -52,14 +56,11 @@ class ListItem extends React.Component {
   }
 
   render () {
-    const {className, onMouseDown, to, onClick, ripple, ...other} = this.props; //eslint-disable-line no-unused-vars
+    const {className, onMouseDown, to, onClick, ripple, theme, ...other} = this.props; //eslint-disable-line no-unused-vars
     const children = this.groupChildren();
     const content = <ListItemLayout {...children} {...other}/>;
-    let finalClassName = style.listItem;
-    if (className) finalClassName += ` ${className}`;
-
     return (
-      <li className={finalClassName} onClick={this.handleClick} onMouseDown={onMouseDown}>
+      <li className={`${theme.listItem} ${className}`} onClick={this.handleClick} onMouseDown={onMouseDown}>
         {to ? <a href={this.props.to}>{content}</a> : content}
         {children.ignored}
       </li>
@@ -67,9 +68,10 @@ class ListItem extends React.Component {
   }
 }
 
-export default Ripple({
-  className: style.ripple,
+const RawListItem = themr('ToolboxList')(ListItem);
+export default themr('ToolboxList')(Ripple({
   centered: false,
   listItemIgnore: true
-})(ListItem);
-export {ListItem as RawListItem};
+})(ListItem));
+
+export {RawListItem as RawListItem};
diff --git a/components/list/ListItemAction.js b/components/list/ListItemAction.js
index 9ecdea068..17a853e89 100644
--- a/components/list/ListItemAction.js
+++ b/components/list/ListItemAction.js
@@ -1,22 +1,25 @@
 import React, { PropTypes } from 'react';
-import style from './style';
+import { themr } from 'react-css-themr';
 
-const ListItemAction = ({action}) => {
+const ListItemAction = ({action, theme}) => {
   const {onClick, onMouseDown} = action.props;
   const stopRipple = onClick && !onMouseDown;
   const stop = e => e.stopPropagation();
   return (
-    <span className={style.itemAction} onMouseDown={stopRipple && stop} onClick={onClick && stop}>
+    <span className={theme.itemAction} onMouseDown={stopRipple && stop} onClick={onClick && stop}>
       {action}
     </span>
   );
 };
 
 ListItemAction.propTypes = {
-  action: PropTypes.object
+  action: PropTypes.object,
+  theme: PropTypes.shape({
+    itemAction: React.PropTypes.string.isRequired
+  })
 };
 
 ListItemAction.defaultProps = {
 };
 
-export default ListItemAction;
+export default themr('ToolboxList')(ListItemAction);
diff --git a/components/list/ListItemActions.js b/components/list/ListItemActions.js
index d6df1aff8..5229b8738 100644
--- a/components/list/ListItemActions.js
+++ b/components/list/ListItemActions.js
@@ -1,14 +1,14 @@
 import React from 'react';
-import style from './style';
+import { themr } from 'react-css-themr';
 import ListItemAction from './ListItemAction';
 
-const ListItemActions = ({type, children}) => {
+const ListItemActions = ({type, children, theme}) => {
   const validChildren = React.Children.toArray(children).filter(c => (
     React.isValidElement(c)
   ));
 
   return (
-    <span className={style[type]}>
+    <span className={theme[type]}>
       {validChildren.map((action, i) => <ListItemAction key={i} action={action} />)}
     </span>
   );
@@ -16,7 +16,11 @@ const ListItemActions = ({type, children}) => {
 
 ListItemActions.propTypes = {
   children: React.PropTypes.any,
+  theme: React.PropTypes.shape({
+    left: React.PropTypes.string.isRequired,
+    right: React.PropTypes.string.isRequired
+  }),
   type: React.PropTypes.oneOf(['left', 'right'])
 };
 
-export default ListItemActions;
+export default themr('ToolboxList')(ListItemActions);
diff --git a/components/list/ListItemContent.js b/components/list/ListItemContent.js
index f6a028b52..68e0cca3b 100644
--- a/components/list/ListItemContent.js
+++ b/components/list/ListItemContent.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import style from './style';
 import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 import ListItemText from './ListItemText';
 
 const types = ['auto', 'normal', 'large'];
@@ -10,6 +10,10 @@ class ListItemContent extends React.Component {
     caption: React.PropTypes.string,
     children: React.PropTypes.any,
     legend: React.PropTypes.string,
+    theme: React.PropTypes.shape({
+      itemContentRoot: React.PropTypes.string.isRequired,
+      large: React.PropTypes.string.isRequired
+    }),
     type: React.PropTypes.oneOf(types)
   };
 
@@ -24,9 +28,9 @@ class ListItemContent extends React.Component {
   }
 
   render () {
-    const {children, caption, legend} = this.props;
-    const className = classnames(style.itemContentRoot, {
-      [style[this.getType()]]: style[this.getType()]
+    const {children, caption, legend, theme} = this.props;
+    const className = classnames(theme.itemContentRoot, {
+      [theme[this.getType()]]: theme[this.getType()]
     });
 
     return (
@@ -38,4 +42,4 @@ class ListItemContent extends React.Component {
     );
   }
 }
-export default ListItemContent;
+export default themr('ToolboxList')(ListItemContent);
diff --git a/components/list/ListItemLayout.js b/components/list/ListItemLayout.js
index e1d12dfe1..f67d512da 100644
--- a/components/list/ListItemLayout.js
+++ b/components/list/ListItemLayout.js
@@ -1,15 +1,15 @@
 import React from 'react';
-import ClassNames from 'classnames';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 import FontIcon from '../font_icon';
 import Avatar from '../avatar';
 import ListItemContent from './ListItemContent';
 import ListItemActions from './ListItemActions';
-import style from './style';
 
 const ListItemLayout = (props) => {
-  const className = ClassNames(style.item, {
-    [style.disabled]: props.disabled,
-    [style.selectable]: props.selectable
+  const className = classnames(props.theme.item, {
+    [props.theme.disabled]: props.disabled,
+    [props.theme.selectable]: props.selectable
   }, props.className);
 
   const leftActions = [
@@ -55,6 +55,11 @@ ListItemLayout.propTypes = {
     React.PropTypes.element
   ]),
   selectable: React.PropTypes.bool,
+  theme: React.PropTypes.shape({
+    disabled: React.PropTypes.string.isRequired,
+    item: React.PropTypes.string.isRequired,
+    selectable: React.PropTypes.string.isRequired
+  }),
   to: React.PropTypes.string
 };
 
@@ -63,4 +68,4 @@ ListItemLayout.defaultProps = {
   selectable: false
 };
 
-export default ListItemLayout;
+export default themr('ToolboxList')(ListItemLayout);
diff --git a/components/list/ListItemText.js b/components/list/ListItemText.js
index a8123c549..c31c587f5 100644
--- a/components/list/ListItemText.js
+++ b/components/list/ListItemText.js
@@ -1,10 +1,9 @@
 import React from 'react';
-import ClassNames from 'classnames';
-import style from './style';
-
-const ListItemText = ({className, primary, children, ...other}) => {
-  const _className = ClassNames(style.itemText, {[style.primary]: primary}, className);
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 
+const ListItemText = ({className, primary, children, theme, ...other}) => {
+  const _className = classnames(theme.itemText, {[theme.primary]: primary}, className);
   return (
     <span data-react-toolbox="list-item-text" className={_className} {...other}>
       {children}
@@ -15,11 +14,15 @@ const ListItemText = ({className, primary, children, ...other}) => {
 ListItemText.propTypes = {
   children: React.PropTypes.any,
   className: React.PropTypes.string,
-  primary: React.PropTypes.bool
+  primary: React.PropTypes.bool,
+  theme: React.PropTypes.shape({
+    itemText: React.PropTypes.string.isRequired,
+    primary: React.PropTypes.string.isRequired
+  })
 };
 
 ListItemText.defaultProps = {
   primary: false
 };
 
-export default ListItemText;
+export default themr('ToolboxList')(ListItemText);
diff --git a/components/list/ListSubHeader.js b/components/list/ListSubHeader.js
index 690f337be..c7299aeab 100644
--- a/components/list/ListSubHeader.js
+++ b/components/list/ListSubHeader.js
@@ -1,15 +1,19 @@
 import React from 'react';
-import style from './style';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 
-const ListSubHeader = (props) => {
-  let className = style.subheader;
-  if (props.className) className += ` ${props.className}`;
-  return <h5 className={className}>{props.caption}</h5>;
-};
+const ListSubHeader = ({ caption, className, theme }) => (
+  <h5 className={classnames(theme.subheader, className)}>{caption}</h5>
+);
 
 ListSubHeader.propTypes = {
   caption: React.PropTypes.string,
-  className: React.PropTypes.string
+  className: React.PropTypes.string,
+  theme: React.PropTypes.object
+};
+
+ListSubHeader.defaultProps = {
+  className: ''
 };
 
-export default ListSubHeader;
+export default themr('ToolboxList')(ListSubHeader);
diff --git a/components/list/readme.md b/components/list/readme.md
index 7b85e4401..aecd11be6 100644
--- a/components/list/readme.md
+++ b/components/list/readme.md
@@ -7,6 +7,7 @@ Lists are best suited to presenting a homogeneous data type or sets of data type
 <!-- example -->
 ```jsx
 import { List, ListItem, ListSubHeader, ListDivider, ListCheckbox } from 'react-toolbox/lib/list';
+// Remember to inject the style via provider
 
 const ListTest = () => (
   <List selectable ripple>
@@ -42,16 +43,25 @@ const ListTest = () => (
 
 Is used as a wrapper for the list. It can hold properties that affect to the whole list and get styles for the wrapper.
 
+### Properties
 | Name          | Type        | Default    | Description|
 |:-----|:-----|:-----|:-----|
 | `className`   | `String`    |  `''`      | Sets a class to give custom styles to the list wrapper.|
 | `ripple`      | `Boolean`   | `false`    | If true, each element in the list will have a ripple effect on click |
 | `selectable`  | `Boolean`   | `false`    | If true, the elements in the list will display a hover effect and a pointer cursor. |
 
+### Theming
+The themed key for this component is `ToolboxList`, it should implement the following interface:
+
+| Name     | Description|
+|:---------|:-----------|
+| `list`   | Used for the root element of the list.|
+
 ## List Item
 
 Represents a list item that can have avatar, icons, title, subtitle, etc. Note: you have to set it as an inmediate child of `List` component.
 
+### Properties
 | Name              | Type                  | Default       | Description|
 |:-----|:-----|:-----|:-----|
 | `avatar`          | `String` or `Element` |               | A string URL to specify an avatar in the left side of the item.|
@@ -69,10 +79,29 @@ Represents a list item that can have avatar, icons, title, subtitle, etc. Note:
 | `selectable`      | `Boolean`             | `false`       | If true, the elements in the list will display a hover effect and a pointer cursor. Inherited from the parent.|
 | `to`              | `String`              |               | In case you want to provide the item as a link, you can pass this property to specify the href. |
 
+### Theming
+The themed key for this component is `ToolboxList`, it should implement the following interface:
+
+| Name     | Description|
+|:---------|:-----------|
+| `disabled` | Added to the inner content if its a disabled item.|
+| `item` | Used for the inner content of a list item.|
+| `itemAction` | Used for each action element (left/right).|
+| `itemContentRoot` | Used for the content wrapper element in list item.|
+| `itemText` | Added to the text inside of the list item.|
+| `large` | Added to the content wrapper element if size is large.|
+| `left` | Added for the element that wraps left actions.|
+| `listItem` | Used for the root element of the list.|
+| `primary` | Added to the text inside of the list item if its primary.|
+| `right` | Added for the element that wraps right actions.|
+| `selectable` | Added to the inner content if its a selectable item.|
+
+
 ## List Checkbox
 
 A special type of item that has a checkbox control on the left side. It implements similar methods to the `ListItem` component and some additional to control the checkbox.
 
+### Properties
 | Name            | Type            | Default       | Description|
 |:-----|:-----|:-----|:-----|
 | `caption`       | `String`        |               | Main text of the item. Required.|
@@ -85,16 +114,34 @@ A special type of item that has a checkbox control on the left side. It implemen
 | `onChange`      | `Function`      |               | Callback called when the input element is changed.|
 | `onFocus`       | `Function`      |               | Callback called when the input element is focused.|
 
+### Theming
+| Name     | Description|
+|:---------|:-----------|
+| `checkbox` | Used as a wrapper class for the subheader element.|
+| `checkboxItem` | Added to the checkbox element.|
+| `disabled` | Added to the root element if the component is disabled.|
+| `item` | Used as a wrapper class root element element. Same as List.|
+| `itemContentRoot` | Used for the content wrapper element in list item.|
+| `itemText` | Added to the text inside of the list item.|
+| `large` | Added to the content wrapper element if size is large.|
+| `primary` | Added to the text inside of the list item if its primary.|
+
+
 ## List Subheader
 
 Simple subcomponent used to give a title to a list area.
 
+### Properties
 | Name          | Type        | Default       | Description|
 |:-----|:-----|:-----|:-----|
 | `caption`     | `String`    |               | Text that will be displayed.|
 | `className`   | `String`    | `''`          | Set a class to give custom styles to the list subheader.|
 
-## List Divider
+### Theming
+| Name     | Description|
+|:---------|:-----------|
+| `subheader` | Used as a wrapper class for the subheader element.|
 
-Simple subcomponent used to separate list sections or items. It has only one property `inset` which is a `Boolean` that indicates if the divider should be full with or should leave an space to the left side.
+## List Divider
 
+Simple subcomponent used to separate list sections or items. It has only one property `inset` which is a `Boolean` that indicates if the divider should be full with or should leave an space to the left side. It has two theming keys: `inset` and `divider` that will be used depending on wether it should full width or leave space.
diff --git a/components/list/style.scss b/components/list/theme.scss
similarity index 98%
rename from components/list/style.scss
rename to components/list/theme.scss
index d1b6e8d64..10a264e69 100644
--- a/components/list/style.scss
+++ b/components/list/theme.scss
@@ -43,6 +43,10 @@
   > [data-react-toolbox="ripple"] {
     overflow: hidden;
   }
+
+  .ripple {
+    color: $color-text-secondary;
+  }
 }
 
 .item {
@@ -136,10 +140,6 @@
   }
 }
 
-.ripple {
-  color: $color-text-secondary;
-}
-
 .itemText {
   display: block;
 
diff --git a/spec/theme.js b/spec/theme.js
index 035c4dee6..302c131bb 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -12,6 +12,7 @@ import ToolboxDrawer from '../components/drawer/theme.scss';
 import ToolboxInput from '../components/input/theme.scss';
 import ToolboxLayout from '../components/layout/theme.scss';
 import ToolboxLink from '../components/link/theme.scss';
+import ToolboxList from '../components/list/theme.scss';
 import ToolboxOverlay from '../components/overlay/theme.scss';
 import ToolboxRipple from '../components/ripple/theme.scss';
 import ToolboxTimePicker from '../components/time_picker/theme.scss';
@@ -30,6 +31,7 @@ export default defineTheme({
   ToolboxInput,
   ToolboxLayout,
   ToolboxLink,
+  ToolboxList,
   ToolboxOverlay,
   ToolboxRipple,
   ToolboxTimePicker

From c1093b2cd85893d785c5ba9c7816c231703df147 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 22 May 2016 19:09:38 +0200
Subject: [PATCH 0545/1024] Fix typo

---
 components/time_picker/TimePickerDialog.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/time_picker/TimePickerDialog.js b/components/time_picker/TimePickerDialog.js
index fbe2f94df..1f20dfe18 100644
--- a/components/time_picker/TimePickerDialog.js
+++ b/components/time_picker/TimePickerDialog.js
@@ -21,7 +21,7 @@ class TimePickerDialog extends React.Component {
       hours: React.PropTypes.string.isRequired,
       hoursDisplay: React.PropTypes.string.isRequired,
       minutes: React.PropTypes.string.isRequired,
-      minutessDisplay: React.PropTypes.string.isRequired,
+      minutesDisplay: React.PropTypes.string.isRequired,
       pm: React.PropTypes.string.isRequired,
       pmFormat: React.PropTypes.string.isRequired,
       separator: React.PropTypes.string.isRequired

From 78d7c920bd163035f95e4f9dca535fd04dd4a5d5 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 22 May 2016 19:13:04 +0200
Subject: [PATCH 0546/1024] Fix typos in Layout

---
 components/layout/NavDrawer.js |  1 -
 components/layout/readme.md    |  1 -
 components/layout/theme.scss   | 12 ++++++------
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/components/layout/NavDrawer.js b/components/layout/NavDrawer.js
index 5a927d702..ce7df1e1d 100644
--- a/components/layout/NavDrawer.js
+++ b/components/layout/NavDrawer.js
@@ -39,7 +39,6 @@ NavDrawer.propTypes = {
     lgPermanent: React.PropTypes.string.isRequired,
     mdPermanent: React.PropTypes.string.isRequired,
     navDrawer: React.PropTypes.string.isRequired,
-    normal: React.PropTypes.string.isRequired,
     pinned: React.PropTypes.string.isRequired,
     scrim: React.PropTypes.string.isRequired,
     scrollY: React.PropTypes.string.isRequired,
diff --git a/components/layout/readme.md b/components/layout/readme.md
index fa66d8a0f..8a7340bdf 100644
--- a/components/layout/readme.md
+++ b/components/layout/readme.md
@@ -155,7 +155,6 @@ You can use `ToolboxLayout` as themed key for this component. The class interfac
 | `lgPermanent` | Added to the root class for large drawer.|
 | `mdPermanent` | Added to the root class for medium drawer.|
 | `navDrawer` | Root class for the drawer.|
-| `normal` | Added to the root class if width is normal.|
 | `pinned` | Added to the root class if positioning is pinned.|
 | `scrim` | Used as a wrapper for the drawer content.|
 | `scrollY` | Added to the drawer content if its scrollable.|
diff --git a/components/layout/theme.scss b/components/layout/theme.scss
index 2404b2f3a..b10b726ea 100644
--- a/components/layout/theme.scss
+++ b/components/layout/theme.scss
@@ -101,37 +101,37 @@
 
     // Permanent screen, ignore .active and make part of layout
     @media screen and (min-width: $layout-breakpoint-sm) {
-      &.permanent-sm {
+      &.smPermanent {
         @include permanent();
       }
     }
 
     @media screen and (min-width: $layout-breakpoint-md) {
-      &.permanent-md {
+      &.mdPermanent {
         @include permanent();
       }
     }
 
     @media screen and (min-width: $layout-breakpoint-lg) {
-      &.permanent-lg {
+      &.lgPermanent {
         @include permanent();
       }
     }
 
     @media screen and (min-width: $layout-breakpoint-xl) {
-      &.permanent-xl {
+      &.xlPermanent {
         @include permanent();
       }
     }
 
     @media screen and (min-width: $layout-breakpoint-xxl) {
-      &.permanent-xxl {
+      &.xxlPermanent {
         @include permanent();
       }
     }
 
     @media screen and (min-width: $layout-breakpoint-xxxl) {
-      &.permanent-xxxl {
+      &.xxxlPermanent {
         @include permanent();
       }
     }

From 75cd93437631330b6397e4daab4173ba0ea4a3d5 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 22 May 2016 19:35:18 +0200
Subject: [PATCH 0547/1024] Fixes in Layout

---
 components/layout/Layout.js    | 14 +++++++-------
 components/layout/NavDrawer.js |  2 +-
 components/layout/theme.scss   |  4 ++--
 package.json                   |  2 +-
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/components/layout/Layout.js b/components/layout/Layout.js
index e63f4451f..a89166a59 100644
--- a/components/layout/Layout.js
+++ b/components/layout/Layout.js
@@ -8,16 +8,16 @@ const Layout = ({ className, children, theme }) => (
   </div>
 );
 
-const ALLOWED = [
-  'Panel',
-  'NavDrawer|Panel',
-  'NavDrawer|Panel|Sidebar',
-  'Panel|Sidebar'
+const ALLOWED_THEMED = [
+  'Themed Panel',
+  'Themed NavDrawer|Themed Panel',
+  'Themed NavDrawer|Themed Panel|Themed Sidebar',
+  'Themed Panel|Themed Sidebar'
 ];
 
 function getChildName (child) {
   if (child.type) {
-    return child.type.name || child.type;
+    return child.type.displayName || child.type.name || child.type;
   }
   if (!child.constructor || !child.constructor.name) {
     return 'UNKNOWN';
@@ -37,7 +37,7 @@ Layout.propTypes = {
     }
 
     const names = React.Children.map(children, getChildName).join('|');
-    if (!(~ALLOWED.indexOf(names))) {
+    if (!(~ALLOWED_THEMED.indexOf(names))) {
       return new Error(
         '`' + componentName + '` '
         + 'should have a Panel for a child, optionally preceded by a NavDrawer and/or followed by a Sidebar.'
diff --git a/components/layout/NavDrawer.js b/components/layout/NavDrawer.js
index ce7df1e1d..74c871e8a 100644
--- a/components/layout/NavDrawer.js
+++ b/components/layout/NavDrawer.js
@@ -4,7 +4,7 @@ import { themr } from 'react-css-themr';
 
 const NavDrawer = ({ active, children, className, onOverlayClick, permanentAt, pinned, scrollY, theme, width }) => {
   const rootClasses = classnames([theme.navDrawer], {
-    [theme['permanent-' + permanentAt]]: permanentAt,
+    [theme[permanentAt + 'Permanent']]: permanentAt,
     [theme.wide]: (width === 'wide'),
     [theme.active]: active,
     [theme.pinned]: pinned
diff --git a/components/layout/theme.scss b/components/layout/theme.scss
index b10b726ea..05092db62 100644
--- a/components/layout/theme.scss
+++ b/components/layout/theme.scss
@@ -137,11 +137,11 @@
     }
   }
 
-  & .root {
+  & .layout {
     .scrim {
       z-index: $z-index-highest - 1;
     }
-    & .root {
+    & .layout {
       .scrim {
         z-index: $z-index-highest - 2;
       }
diff --git a/package.json b/package.json
index 5ebf8bef0..7f103ef77 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
   "dependencies": {
     "classnames": "^2.2.5",
     "core-js": "^2.4.0",
-    "react-css-themr": "^1.0.0"
+    "react-css-themr": "^1.1.0"
   },
   "devDependencies": {
     "autoprefixer": "^6.3.6",

From d2cf4e37c3af44ca6e1521b3efd888583eb8522d Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 22 May 2016 19:39:30 +0200
Subject: [PATCH 0548/1024] Bugfix: Set empty string in time picker if no time
 is given

---
 components/time_picker/TimePicker.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/time_picker/TimePicker.js b/components/time_picker/TimePicker.js
index 95ca6f805..7ef8a6c3b 100644
--- a/components/time_picker/TimePicker.js
+++ b/components/time_picker/TimePicker.js
@@ -45,7 +45,7 @@ class TimePicker extends React.Component {
 
   render () {
     const { value, format, inputClassName, theme } = this.props;
-    const formattedTime = value ? time.formatTime(value, format) : null;
+    const formattedTime = value ? time.formatTime(value, format) : '';
     return (
       <div data-react-toolbox='time-picker'>
         <Input

From 85978a54d7c69fb40dda3580fe9450296c5bec5c Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 22 May 2016 19:43:25 +0200
Subject: [PATCH 0549/1024] Avoid uncontrolled inputs

---
 spec/components/layout.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spec/components/layout.js b/spec/components/layout.js
index f975c7164..4190a4656 100644
--- a/spec/components/layout.js
+++ b/spec/components/layout.js
@@ -96,7 +96,7 @@ class LayoutTest extends React.Component {
                                           <RadioButton label='Medium' value='md' />
                                           <RadioButton label='Large' value='lg' />
                                           <RadioButton label='Extra Large' value='xl' />
-                                          <RadioButton label='Never' value={null} />
+                                          <RadioButton label='Never' value={undefined} />
                                         </RadioGroup>
                                         <Checkbox label='Pin drawer' checked={this.state.drawerPinned} onChange={this.toggleDrawerPinned} />
                                     </section>

From 5f626e262fb245fe50da547be7b2bf7e257b0e71 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 22 May 2016 20:15:45 +0200
Subject: [PATCH 0550/1024] Migrate IconMenu to themr

---
 components/menu/IconMenu.js                   | 32 +++++++++++++------
 components/menu/Menu.js                       | 12 +++++--
 components/menu/readme.md                     | 13 ++++++++
 .../menu/{style.icon_menu.scss => theme.scss} |  9 +++---
 spec/theme.js                                 |  2 ++
 5 files changed, 51 insertions(+), 17 deletions(-)
 rename components/menu/{style.icon_menu.scss => theme.scss} (70%)

diff --git a/components/menu/IconMenu.js b/components/menu/IconMenu.js
index 68c908c80..b0554cc60 100644
--- a/components/menu/IconMenu.js
+++ b/components/menu/IconMenu.js
@@ -1,7 +1,8 @@
 import React from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 import { IconButton } from '../button';
 import Menu from './Menu';
-import style from './style.icon_menu';
 
 class IconMenu extends React.Component {
   static propTypes = {
@@ -19,7 +20,11 @@ class IconMenu extends React.Component {
     onShow: React.PropTypes.func,
     position: React.PropTypes.string,
     selectable: React.PropTypes.bool,
-    selected: React.PropTypes.any
+    selected: React.PropTypes.any,
+    theme: React.PropTypes.shape({
+      icon: React.PropTypes.string.isRequired,
+      iconMenu: React.PropTypes.string.isRequired
+    })
   };
 
   static defaultProps = {
@@ -31,26 +36,33 @@ class IconMenu extends React.Component {
     selectable: false
   };
 
+  state = {
+    active: false
+  }
+
   handleButtonClick = (event) => {
-    this.refs.menu.show();
+    this.setState({ active: !this.state.active });
     if (this.props.onClick) this.props.onClick(event);
   };
 
-  render () {
-    let className = style.root;
-    if (this.props.className) className += ` ${this.props.className}`;
+  handleMenuHide = () => {
+    this.setState({ active: false });
+    if (this.props.onHide) this.props.onHide();
+  }
 
+  render () {
     return (
-      <div className={className}>
+      <div className={classnames(this.props.theme.iconMenu, this.props.className)}>
         <IconButton
-          className={style.icon}
+          className={this.props.theme.icon}
           icon={this.props.icon}
           onClick={this.handleButtonClick}
           ripple={this.props.iconRipple}
         />
         <Menu
           ref='menu'
-          onHide={this.props.onHide}
+          active={this.state.active}
+          onHide={this.handleMenuHide}
           onSelect={this.props.onSelect}
           onShow={this.props.onShow}
           position={this.props.position}
@@ -65,4 +77,4 @@ class IconMenu extends React.Component {
   }
 }
 
-export default IconMenu;
+export default themr('ToolboxMenu')(IconMenu);
diff --git a/components/menu/Menu.js b/components/menu/Menu.js
index 3e0371d79..372463c43 100644
--- a/components/menu/Menu.js
+++ b/components/menu/Menu.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import ClassNames from 'classnames';
+import classnames from 'classnames';
 import MenuItem from './MenuItem';
 import { events, utils } from '../utils';
 import style from './style.menu';
@@ -55,6 +55,14 @@ class Menu extends React.Component {
       const position = nextProps.position === POSITION.AUTO ? this.calculatePosition() : nextProps.position;
       this.setState({ position });
     }
+
+    if (!this.props.active && nextProps.active && !this.state.active) {
+      this.show();
+    }
+
+    if (this.props.active && !nextProps.active && this.state.active) {
+      this.hide();
+    }
   }
 
   shouldComponentUpdate (nextProps, nextState) {
@@ -166,7 +174,7 @@ class Menu extends React.Component {
 
   render () {
     const outlineStyle = { width: this.state.width, height: this.state.height };
-    const className = ClassNames([style.root, style[this.state.position]], {
+    const className = classnames([style.root, style[this.state.position]], {
       [style.active]: this.state.active,
       [style.rippled]: this.state.rippled
     }, this.props.className);
diff --git a/components/menu/readme.md b/components/menu/readme.md
index 52bd9d870..976c60e25 100644
--- a/components/menu/readme.md
+++ b/components/menu/readme.md
@@ -2,6 +2,8 @@
 
 A [Menu](https://www.google.com/design/spec/components/menus.html) is a temporary piece of material emitted from a button, an action, a pointer, or another control that contains at least two menu items. Each menu item is a discrete option or action that can affect the app, the view, or selected elements within a view. Menus should not be used as a primary method for navigation within an app. You can compose a menu based on a few subcomponents, same as for Lists.
 
+This set of components is themed to be provided width the key `ToolboxMenu`.
+
 <!-- example -->
 ```jsx
 import {IconMenu, MenuItem, MenuDivider } from 'react-toolbox/lib/menu';
@@ -21,6 +23,8 @@ const MenuTest = () => (
 
 This subcomponent is the default wrapper for a menu and is responsible for the opening behavior. Its properties can affect to the Item children.
 
+### Properties
+
 | Name          | Type          | Default     | Description|
 |:-----|:-----|:-----|:-----|
 | `active`      | `Boolean`     | `false`     | If true, the menu will be displayed as opened by default.|
@@ -45,6 +49,8 @@ The menu has state to keep a value with the currently selected item. It also exp
 
 As the most usual scenario will be to open the menu from a click in an Icon, we provide this subcomponent implementing this behavior. The `IconMenu` shows an icon and implements a `Menu` under the covers that is shown when is clicked. Some of its properties are transferred to the menu, others to the children:
 
+### Properties
+
 | Name            | Type                  | Default         | Description|
 |:-----|:-----|:-----|:-----|
 | `className`     | `String`              |  `''`           | Set a class to give custom styles to the icon wrapper.|
@@ -59,6 +65,13 @@ As the most usual scenario will be to open the menu from a click in an Icon, we
 | `selectable`    | `Boolean`             | `false`         | If true, the menu will keep a value to highlight the active child item. |
 | `selected`      | `Any`                 |                 | Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted. |
 
+### Theming
+
+| Name     | Description|
+|:---------|:-----------|
+| `icon`   | Used for the icon element.|
+| `iconMenu`   | Used for the root element of the icon menu.|
+
 ## Menu Item
 
 The inner component for menus and describes the content of each option. It behaves in a similar way to List Items but simpler.
diff --git a/components/menu/style.icon_menu.scss b/components/menu/theme.scss
similarity index 70%
rename from components/menu/style.icon_menu.scss
rename to components/menu/theme.scss
index e45b61838..b8afc4c27 100644
--- a/components/menu/style.icon_menu.scss
+++ b/components/menu/theme.scss
@@ -1,12 +1,11 @@
 @import "http://github.com/base";
 @import "http://github.com/config";
 
-.root {
+.iconMenu {
   position: relative;
   display: inline-block;
   text-align: center;
-}
-
-.icon {
-  cursor: pointer;
+  .icon {
+    cursor: pointer;
+  }
 }
diff --git a/spec/theme.js b/spec/theme.js
index 302c131bb..91b8bc991 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -13,6 +13,7 @@ import ToolboxInput from '../components/input/theme.scss';
 import ToolboxLayout from '../components/layout/theme.scss';
 import ToolboxLink from '../components/link/theme.scss';
 import ToolboxList from '../components/list/theme.scss';
+import ToolboxMenu from '../components/menu/theme.scss';
 import ToolboxOverlay from '../components/overlay/theme.scss';
 import ToolboxRipple from '../components/ripple/theme.scss';
 import ToolboxTimePicker from '../components/time_picker/theme.scss';
@@ -32,6 +33,7 @@ export default defineTheme({
   ToolboxLayout,
   ToolboxLink,
   ToolboxList,
+  ToolboxMenu,
   ToolboxOverlay,
   ToolboxRipple,
   ToolboxTimePicker

From 140cc2c1a4b9f7c10494c4d8f2e626c40dc3b1fd Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 22 May 2016 20:36:06 +0200
Subject: [PATCH 0551/1024] Migrate Menu to themr

---
 components/menu/Menu.js         | 39 +++++++++-----
 components/menu/readme.md       | 18 +++++--
 components/menu/style.menu.scss | 95 ---------------------------------
 components/menu/theme.scss      | 93 ++++++++++++++++++++++++++++++++
 4 files changed, 132 insertions(+), 113 deletions(-)
 delete mode 100644 components/menu/style.menu.scss

diff --git a/components/menu/Menu.js b/components/menu/Menu.js
index 372463c43..6b8fd749d 100644
--- a/components/menu/Menu.js
+++ b/components/menu/Menu.js
@@ -1,17 +1,17 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { themr } from 'react-css-themr';
 import classnames from 'classnames';
 import MenuItem from './MenuItem';
 import { events, utils } from '../utils';
-import style from './style.menu';
 
 const POSITION = {
   AUTO: 'auto',
   STATIC: 'static',
-  TOP_LEFT: 'top-left',
-  TOP_RIGHT: 'top-right',
-  BOTTOM_LEFT: 'bottom-left',
-  BOTTOM_RIGHT: 'bottom-right'
+  TOP_LEFT: 'topLeft',
+  TOP_RIGHT: 'topRight',
+  BOTTOM_LEFT: 'bottomLeft',
+  BOTTOM_RIGHT: 'bottomRight'
 };
 
 class Menu extends React.Component {
@@ -26,7 +26,19 @@ class Menu extends React.Component {
     position: React.PropTypes.string,
     ripple: React.PropTypes.bool,
     selectable: React.PropTypes.bool,
-    selected: React.PropTypes.any
+    selected: React.PropTypes.any,
+    theme: React.PropTypes.shape({
+      active: React.PropTypes.string.isRequired,
+      bottomLeft: React.PropTypes.string.isRequired,
+      bottomRight: React.PropTypes.string.isRequired,
+      menu: React.PropTypes.string.isRequired,
+      menuInner: React.PropTypes.string.isRequired,
+      outline: React.PropTypes.string.isRequired,
+      rippled: React.PropTypes.string.isRequired,
+      static: React.PropTypes.string.isRequired,
+      topLeft: React.PropTypes.string.isRequired,
+      topRight: React.PropTypes.string.isRequired
+    })
   };
 
   static defaultProps = {
@@ -122,7 +134,7 @@ class Menu extends React.Component {
     const {height: wh, width: ww} = utils.getViewport();
     const toTop = top < ((wh / 2) - height / 2);
     const toLeft = left < ((ww / 2) - width / 2);
-    return `${toTop ? 'top' : 'bottom'}-${toLeft ? 'left' : 'right'}`;
+    return `${toTop ? 'top' : 'bottom'}${toLeft ? 'Left' : 'Right'}`;
   }
 
   getMenuStyle () {
@@ -173,16 +185,17 @@ class Menu extends React.Component {
   }
 
   render () {
+    const { theme } = this.props;
     const outlineStyle = { width: this.state.width, height: this.state.height };
-    const className = classnames([style.root, style[this.state.position]], {
-      [style.active]: this.state.active,
-      [style.rippled]: this.state.rippled
+    const className = classnames([theme.menu, theme[this.state.position]], {
+      [theme.active]: this.state.active,
+      [theme.rippled]: this.state.rippled
     }, this.props.className);
 
     return (
       <div data-react-toolbox='menu' className={className} style={this.getRootStyle()}>
-        {this.props.outline ? <div className={style.outline} style={outlineStyle}></div> : null}
-        <ul ref='menu' className={style.menu} style={this.getMenuStyle()}>
+        {this.props.outline ? <div className={theme.outline} style={outlineStyle}></div> : null}
+        <ul ref='menu' className={theme.menuInner} style={this.getMenuStyle()}>
           {this.renderItems()}
         </ul>
       </div>
@@ -190,4 +203,4 @@ class Menu extends React.Component {
   }
 }
 
-export default Menu;
+export default themr('ToolboxMenu')(Menu);
diff --git a/components/menu/readme.md b/components/menu/readme.md
index 976c60e25..8d3c27c3e 100644
--- a/components/menu/readme.md
+++ b/components/menu/readme.md
@@ -38,12 +38,20 @@ This subcomponent is the default wrapper for a menu and is responsible for the o
 | `selectable`  | `Boolean`     | `false`     | If true, the menu will keep a value to highlight the active child item. |
 | `selected`    | `Any`         |             | Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted. |
 
-The menu has state to keep a value with the currently selected item. It also exposes methods to show and hide the menu from the code:
+### Theming
 
-- `getValue` is used to get the current value.
-- `setValue` is used to set a new active value.
-- `show` is used to show the menu.
-- `hide` is used to hide the menu.
+| Name     | Description|
+|:---------|:-----------|
+| `active`   | Added to the root element when menu is active.|
+| `bottomLeft`   | Added to the root when position is bottom left.|
+| `bottomRight`   | Added to the root when position is bottom right.|
+| `menu`   | Used for the root element of the menu.|
+| `menuInner`   | Used for the inner wrapper.|
+| `outline`   | Used to draw the outline.|
+| `rippled`   | Added to the menu in case if should have ripple.|
+| `static`   | Added to the root in case its static.|
+| `topLeft`   | Added to the root when position is top left.|
+| `topRight`   | Added to the root when position is top right.|
 
 ## Icon Menu
 
diff --git a/components/menu/style.menu.scss b/components/menu/style.menu.scss
deleted file mode 100644
index 0026f0419..000000000
--- a/components/menu/style.menu.scss
+++ /dev/null
@@ -1,95 +0,0 @@
-@import "http://github.com/base";
-@import "http://github.com/config";
-
-.root {
-  position: relative;
-  display: inline-block;
-  &.top-left {
-    position: absolute;
-    top: 0;
-    left: 0;
-    > .outline {
-      transform-origin: 0 0;
-    }
-  }
-  &.top-right {
-    position: absolute;
-    top: 0;
-    right: 0;
-    > .outline {
-      transform-origin: 100% 0;
-    }
-  }
-  &.bottom-left {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    > .outline {
-      transform-origin: 0 100%;
-    }
-  }
-  &.bottom-right {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    > .outline {
-      transform-origin: 100% 100%;
-    }
-  }
-  &:not(.static) {
-    z-index: $z-index-higher;
-    pointer-events: none;
-    > .outline {
-      opacity: 0;
-      transition: transform $menu-expand-duration $animation-curve-default,
-      opacity $menu-fade-duration $animation-curve-default;
-      transform: scale(0);
-      will-change: transform;
-    }
-    > .menu {
-      position: absolute;
-      top: 0;
-      left: 0;
-      opacity: 0;
-    }
-    &.rippled:not(.active) {
-      > .outline {
-        transition-delay: $menu-ripple-delay;
-      }
-      > .menu {
-        transition-delay: $menu-ripple-delay;
-      }
-    }
-    &.active {
-      pointer-events: all;
-      > .outline {
-        opacity: 1;
-        transform: scale(1);
-      }
-      > .menu {
-        opacity: 1;
-        transition: opacity $menu-fade-duration $animation-curve-default,
-        clip $menu-expand-duration $animation-curve-default;
-      }
-    }
-  }
-}
-
-.outline {
-  @include shadow-2dp();
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: block;
-  background-color: $menu-background-color;
-  border-radius: $menu-outline-border-radius;
-}
-
-.menu {
-  position: relative;
-  display: block;
-  padding: $menu-padding;
-  text-align: left;
-  white-space: nowrap;
-  list-style: none;
-}
diff --git a/components/menu/theme.scss b/components/menu/theme.scss
index b8afc4c27..deb5a41d6 100644
--- a/components/menu/theme.scss
+++ b/components/menu/theme.scss
@@ -9,3 +9,96 @@
     cursor: pointer;
   }
 }
+
+.menu {
+  position: relative;
+  display: inline-block;
+  &.topLeft {
+    position: absolute;
+    top: 0;
+    left: 0;
+    > .outline {
+      transform-origin: 0 0;
+    }
+  }
+  &.topRight {
+    position: absolute;
+    top: 0;
+    right: 0;
+    > .outline {
+      transform-origin: 100% 0;
+    }
+  }
+  &.bottomLeft {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    > .outline {
+      transform-origin: 0 100%;
+    }
+  }
+  &.bottomRight {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    > .outline {
+      transform-origin: 100% 100%;
+    }
+  }
+  &:not(.static) {
+    z-index: $z-index-higher;
+    pointer-events: none;
+    > .outline {
+      opacity: 0;
+      transition: transform $menu-expand-duration $animation-curve-default,
+      opacity $menu-fade-duration $animation-curve-default;
+      transform: scale(0);
+      will-change: transform;
+    }
+    > .menuInner {
+      position: absolute;
+      top: 0;
+      left: 0;
+      opacity: 0;
+    }
+    &.rippled:not(.active) {
+      > .outline {
+        transition-delay: $menu-ripple-delay;
+      }
+      > .menuInner {
+        transition-delay: $menu-ripple-delay;
+      }
+    }
+    &.active {
+      pointer-events: all;
+      > .outline {
+        opacity: 1;
+        transform: scale(1);
+      }
+      > .menuInner {
+        opacity: 1;
+        transition: opacity $menu-fade-duration $animation-curve-default,
+        clip $menu-expand-duration $animation-curve-default;
+      }
+    }
+  }
+}
+
+.outline {
+  @include shadow-2dp();
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  background-color: $menu-background-color;
+  border-radius: $menu-outline-border-radius;
+}
+
+.menuInner {
+  position: relative;
+  display: block;
+  padding: $menu-padding;
+  text-align: left;
+  white-space: nowrap;
+  list-style: none;
+}

From e20bae5e62c2f17ff077c98dfda25d268881c16b Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 22 May 2016 20:43:54 +0200
Subject: [PATCH 0552/1024] Migrate MenuItem to themr

---
 components/menu/MenuItem.js          | 35 +++++++++++++---------
 components/menu/readme.md            | 13 +++++++++
 components/menu/style.menu_item.scss | 43 ----------------------------
 components/menu/theme.scss           | 40 ++++++++++++++++++++++++++
 4 files changed, 74 insertions(+), 57 deletions(-)
 delete mode 100644 components/menu/style.menu_item.scss

diff --git a/components/menu/MenuItem.js b/components/menu/MenuItem.js
index 76a4d426a..7b6288399 100644
--- a/components/menu/MenuItem.js
+++ b/components/menu/MenuItem.js
@@ -1,8 +1,8 @@
 import React from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 import FontIcon from '../font_icon';
-import ClassNames from 'classnames';
 import Ripple from '../ripple';
-import style from './style.menu_item';
 
 class MenuItem extends React.Component {
   static propTypes = {
@@ -16,7 +16,15 @@ class MenuItem extends React.Component {
     ]),
     onClick: React.PropTypes.func,
     selected: React.PropTypes.bool,
-    shortcut: React.PropTypes.string
+    shortcut: React.PropTypes.string,
+    theme: React.PropTypes.shape({
+      caption: React.PropTypes.string.isRequired,
+      disabled: React.PropTypes.string.isRequired,
+      icon: React.PropTypes.string.isRequired,
+      menuItem: React.PropTypes.string.isRequired,
+      selected: React.PropTypes.string.isRequired,
+      shortcut: React.PropTypes.string.isRequired
+    })
   };
 
   static defaultProps = {
@@ -32,24 +40,23 @@ class MenuItem extends React.Component {
   };
 
   render () {
-    const {icon, caption, children, shortcut, selected, disabled, ...others} = this.props;
-    const className = ClassNames(style.root, {
-      [style.selected]: selected,
-      [style.disabled]: disabled
+    const {icon, caption, children, shortcut, selected, disabled, theme, ...others} = this.props;
+    const className = classnames(theme.menuItem, {
+      [theme.selected]: selected,
+      [theme.disabled]: disabled
     }, this.props.className);
 
     return (
       <li {...others} data-react-toolbox='menu-item' className={className} onClick={this.handleClick}>
-        {icon ? <FontIcon value={icon} className={style.icon}/> : null}
-        <span className={style.caption}>{caption}</span>
-        {shortcut ? <small className={style.shortcut}>{shortcut}</small> : null}
+        {icon ? <FontIcon value={icon} className={theme.icon}/> : null}
+        <span className={theme.caption}>{caption}</span>
+        {shortcut ? <small className={theme.shortcut}>{shortcut}</small> : null}
         {children}
       </li>
     );
   }
 }
 
-export default Ripple({
-  className: style.ripple
-})(MenuItem);
-export {MenuItem as RawMenuItem};
+const RawMenuItem = themr('ToolboxMenu')(MenuItem);
+export default themr('ToolboxMenu')(Ripple({})(MenuItem));
+export {RawMenuItem as RawMenuItem};
diff --git a/components/menu/readme.md b/components/menu/readme.md
index 8d3c27c3e..43c5eb09a 100644
--- a/components/menu/readme.md
+++ b/components/menu/readme.md
@@ -84,6 +84,8 @@ As the most usual scenario will be to open the menu from a click in an Icon, we
 
 The inner component for menus and describes the content of each option. It behaves in a similar way to List Items but simpler.
 
+### Properties
+
 | Name              | Type              | Default     | Description|
 |:-----|:-----|:-----|:-----|
 | `caption`     | `String`              |             | The text to include in the menu item. Required.|
@@ -94,6 +96,17 @@ The inner component for menus and describes the content of each option. It behav
 | `selected`    | `Boolean`             | `false`     | Transferred from the `Menu` component for selectable menus. Indicates if it's the current active option. |
 | `shortcut`    | `String`              | `''`        | Displays shortcut text on the right side of the `caption` attribute. |
 
+### Theming
+
+| Name     | Description|
+|:---------|:-----------|
+| `caption`   | Used for the caption inside the item.|
+| `disabled`   | Added to the root element if it's disabled.|
+| `icon`   | Used for the icon element if exists.|
+| `menuItem`   | Used as the root class for the component.|
+| `selected`   | Added to the root element in case it's selected.|
+| `shortcut`   | Used for the shortcut element if exists.|
+
 ## Menu Divider
 
 A very simple component that just displays a separator between options. It has no props and no state or methods, just markup.
diff --git a/components/menu/style.menu_item.scss b/components/menu/style.menu_item.scss
deleted file mode 100644
index 33c9c724b..000000000
--- a/components/menu/style.menu_item.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-@import "http://github.com/base";
-@import "http://github.com/config";
-
-.root {
-  position: relative;
-  display: flex;
-  height: $menu-item-height;
-  align-items: center;
-  padding: 0 $menu-item-padding;
-  overflow: hidden;
-  font-size: $menu-item-font-size;
-  color: $color-text;
-  &:not(.disabled):hover {
-    cursor: pointer;
-    background-color: $menu-item-hover-background;
-  }
-  &.disabled {
-    pointer-events: none;
-    opacity: .5;
-  }
-  &.selected {
-    font-weight: 500;
-    background-color: $menu-item-selected-background;
-  }
-}
-
-.icon {
-  width: $menu-item-icon-size;
-  font-size: $menu-item-icon-font-size !important;
-}
-
-.caption {
-  flex-grow: 1;
-  font-size: $font-size-normal;
-}
-
-.shortcut {
-  margin-left: $menu-item-padding;
-}
-
-.ripple {
-  color: $color-text-secondary;
-}
diff --git a/components/menu/theme.scss b/components/menu/theme.scss
index deb5a41d6..ccbd76ef4 100644
--- a/components/menu/theme.scss
+++ b/components/menu/theme.scss
@@ -102,3 +102,43 @@
   white-space: nowrap;
   list-style: none;
 }
+
+.menuItem {
+  position: relative;
+  display: flex;
+  height: $menu-item-height;
+  align-items: center;
+  padding: 0 $menu-item-padding;
+  overflow: hidden;
+  font-size: $menu-item-font-size;
+  color: $color-text;
+  &:not(.disabled):hover {
+    cursor: pointer;
+    background-color: $menu-item-hover-background;
+  }
+  &.disabled {
+    pointer-events: none;
+    opacity: .5;
+  }
+  &.selected {
+    font-weight: 500;
+    background-color: $menu-item-selected-background;
+  }
+  .ripple {
+    color: $color-text-secondary;
+  }
+
+  .icon {
+    width: $menu-item-icon-size;
+    font-size: $menu-item-icon-font-size !important;
+  }
+}
+
+.caption {
+  flex-grow: 1;
+  font-size: $font-size-normal;
+}
+
+.shortcut {
+  margin-left: $menu-item-padding;
+}

From 54dca2d5cc4a8b13bf5bb5e73987783e15203154 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 22 May 2016 20:46:40 +0200
Subject: [PATCH 0553/1024] Migrate MenuDivider to themr

---
 components/menu/MenuDivider.js          | 14 ++++++++++----
 components/menu/readme.md               |  2 +-
 components/menu/style.menu_divider.scss | 10 ----------
 components/menu/theme.scss              |  8 ++++++++
 4 files changed, 19 insertions(+), 15 deletions(-)
 delete mode 100644 components/menu/style.menu_divider.scss

diff --git a/components/menu/MenuDivider.js b/components/menu/MenuDivider.js
index 8eac0f304..454ab1e30 100644
--- a/components/menu/MenuDivider.js
+++ b/components/menu/MenuDivider.js
@@ -1,8 +1,14 @@
 import React from 'react';
-import style from './style.menu_divider';
+import { themr } from 'react-css-themr';
 
-const MenuDivider = () => (
-  <hr data-react-toolbox='menu-divider' className={style.root}/>
+const MenuDivider = ({ theme }) => (
+  <hr data-react-toolbox='menu-divider' className={theme.menuDivider}/>
 );
 
-export default MenuDivider;
+MenuDivider.propTypes = {
+  theme: React.PropTypes.shape({
+    menuDivider: React.PropTypes.string.isRequired
+  })
+};
+
+export default themr('ToolboxMenu')(MenuDivider);
diff --git a/components/menu/readme.md b/components/menu/readme.md
index 43c5eb09a..7176ab3b8 100644
--- a/components/menu/readme.md
+++ b/components/menu/readme.md
@@ -109,4 +109,4 @@ The inner component for menus and describes the content of each option. It behav
 
 ## Menu Divider
 
-A very simple component that just displays a separator between options. It has no props and no state or methods, just markup.
+A very simple component that just displays a separator between options. It has no props and no state or methods, just markup. Also it accepts a single class for the styling which is `menuDivider`.
diff --git a/components/menu/style.menu_divider.scss b/components/menu/style.menu_divider.scss
deleted file mode 100644
index dcd63f78e..000000000
--- a/components/menu/style.menu_divider.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@import "http://github.com/base";
-@import "http://github.com/config";
-
-.root {
-  display: block;
-  width: 100%;
-  height: 1px;
-  margin: $menu-divider-height 0;
-  background-color: $color-divider;
-}
diff --git a/components/menu/theme.scss b/components/menu/theme.scss
index ccbd76ef4..bff050070 100644
--- a/components/menu/theme.scss
+++ b/components/menu/theme.scss
@@ -142,3 +142,11 @@
 .shortcut {
   margin-left: $menu-item-padding;
 }
+
+.menuDivider {
+  display: block;
+  width: 100%;
+  height: 1px;
+  margin: $menu-divider-height 0;
+  background-color: $color-divider;
+}

From 38827df58f11c8df247ffea073a0524c322749ee Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 22 May 2016 20:47:11 +0200
Subject: [PATCH 0554/1024] Remove no longer supported method for dropdown

---
 spec/components/dropdown.js | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/spec/components/dropdown.js b/spec/components/dropdown.js
index 01f454adf..e749c30fc 100644
--- a/spec/components/dropdown.js
+++ b/spec/components/dropdown.js
@@ -33,12 +33,6 @@ class DropdownTest extends React.Component {
     );
   }
 
-  handleFocus = (dropdowns) => {
-    dropdowns.forEach((dropdown) => {
-      this.refs[dropdown].close();
-    });
-  }
-
   render () {
     return (
       <section>
@@ -48,7 +42,6 @@ class DropdownTest extends React.Component {
         <Dropdown
           label="Country"
           ref="dropdown1"
-          onFocus={this.handleFocus.bind(this, ['dropdown3', 'dropdown4'])}
           onChange={this.handleChange.bind(this, 'dropdown1')}
           source={countries}
           template={this.customDropdownItem}
@@ -58,7 +51,6 @@ class DropdownTest extends React.Component {
         <Dropdown
           label="Country"
           ref="dropdown4"
-          onFocus={this.handleFocus.bind(this, ['dropdown1', 'dropdown4'])}
           onChange={this.handleChange.bind(this, 'dropdown4')}
           source={countries}
           value={this.state.dropdown4}
@@ -68,7 +60,6 @@ class DropdownTest extends React.Component {
           disabled
           ref="dropdown3"
           label="Country"
-          onFocus={this.handleFocus.bind(this, ['dropdown1', 'dropdown4'])}
           onChange={this.handleChange.bind(this, 'dropdown3')}
           source={countries}
         />

From 38e2690af97a995ae122133f02673028f3681537 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 22 May 2016 21:28:48 +0200
Subject: [PATCH 0555/1024] Migrate Dropdown to themr

---
 components/dropdown/Dropdown.js               | 52 ++++++++++++-------
 components/dropdown/readme.md                 | 25 +++++++--
 .../dropdown/{style.scss => theme.scss}       |  4 +-
 spec/theme.js                                 |  2 +
 4 files changed, 60 insertions(+), 23 deletions(-)
 rename components/dropdown/{style.scss => theme.scss} (99%)

diff --git a/components/dropdown/Dropdown.js b/components/dropdown/Dropdown.js
index c6cce59c7..7207fd709 100644
--- a/components/dropdown/Dropdown.js
+++ b/components/dropdown/Dropdown.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import ClassNames from 'classnames';
-import Input from '../input';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 import events from '../utils/events';
-import style from './style';
+import Input from '../input';
 
 class Dropdown extends React.Component {
   static propTypes = {
@@ -18,6 +18,20 @@ class Dropdown extends React.Component {
     onFocus: React.PropTypes.func,
     source: React.PropTypes.array.isRequired,
     template: React.PropTypes.func,
+    theme: React.PropTypes.shape({
+      active: React.PropTypes.string.isRequired,
+      disabled: React.PropTypes.string.isRequired,
+      dropdown: React.PropTypes.string.isRequired,
+      error: React.PropTypes.string.isRequired,
+      errored: React.PropTypes.string.isRequired,
+      field: React.PropTypes.string.isRequired,
+      label: React.PropTypes.string.isRequired,
+      selected: React.PropTypes.string.isRequired,
+      templateValue: React.PropTypes.string.isRequired,
+      up: React.PropTypes.string.isRequired,
+      value: React.PropTypes.string.isRequired,
+      values: React.PropTypes.string.isRequired
+    }),
     value: React.PropTypes.oneOfType([
       React.PropTypes.string,
       React.PropTypes.number
@@ -93,24 +107,26 @@ class Dropdown extends React.Component {
   };
 
   renderTemplateValue (selected) {
-    const className = ClassNames(style.field, {
-      [style.errored]: this.props.error,
-      [style.disabled]: this.props.disabled
+    const { theme } = this.props;
+    const className = classnames(theme.field, {
+      [theme.errored]: this.props.error,
+      [theme.disabled]: this.props.disabled
     });
 
     return (
       <div className={className} onMouseDown={this.handleMouseDown}>
-        <div className={`${style.templateValue} ${style.value}`}>
+        <div className={`${theme.templateValue} ${theme.value}`}>
           {this.props.template(selected)}
         </div>
-        {this.props.label ? <label className={style.label}>{this.props.label}</label> : null}
-        {this.props.error ? <span className={style.error}>{this.props.error}</span> : null}
+        {this.props.label ? <label className={theme.label}>{this.props.label}</label> : null}
+        {this.props.error ? <span className={theme.error}>{this.props.error}</span> : null}
       </div>
     );
   }
 
   renderValue (item, idx) {
-    const className = item.value === this.props.value ? style.selected : null;
+    const { theme } = this.props;
+    const className = item.value === this.props.value ? theme.selected : null;
     return (
       <li key={idx} className={className} onMouseDown={this.handleSelect.bind(this, item.value)}>
         {this.props.template ? this.props.template(item) : item.label}
@@ -119,26 +135,26 @@ class Dropdown extends React.Component {
   }
 
   render () {
-    const {template, source, ...others} = this.props;
+    const {template, theme, source, ...others} = this.props;
     const selected = this.getSelectedItem();
-    const className = ClassNames(style.root, {
-      [style.up]: this.state.up,
-      [style.active]: this.state.active,
-      [style.disabled]: this.props.disabled
+    const className = classnames(theme.dropdown, {
+      [theme.up]: this.state.up,
+      [theme.active]: this.state.active,
+      [theme.disabled]: this.props.disabled
     }, this.props.className);
 
     return (
       <div data-react-toolbox='dropdown' className={className}>
         <Input
           {...others}
-          className={style.value}
+          className={theme.value}
           onMouseDown={this.handleMouseDown}
           readOnly
           type={template && selected ? 'hidden' : null}
           value={selected && selected.label}
         />
       {template && selected ? this.renderTemplateValue(selected) : null}
-        <ul className={style.values} ref='values'>
+        <ul className={theme.values} ref='values'>
           {source.map(this.renderValue.bind(this))}
         </ul>
       </div>
@@ -146,4 +162,4 @@ class Dropdown extends React.Component {
   }
 }
 
-export default Dropdown;
+export default themr('ToolboxDropdown')(Dropdown);
diff --git a/components/dropdown/readme.md b/components/dropdown/readme.md
index 64e3b2ee0..39c8acc52 100644
--- a/components/dropdown/readme.md
+++ b/components/dropdown/readme.md
@@ -2,9 +2,12 @@
 
 The Dropdown selects an option between multiple selections. The element displays the current state and a down arrow. When it is clicked, it displays the list of available options.
 
+The themr key you have to use to provide styles for this component is `ToolboxDropdown`.
+
 <!-- example -->
 ```jsx
 import Dropdown from 'react-toolbox/lib/dropdown';
+import theme from 'react-toolbox/lib/dropdown/theme';
 
 const countries = [
   { value: 'EN-gb', label: 'England' },
@@ -14,9 +17,7 @@ const countries = [
 ];
 
 class DropdownTest extends React.Component {
-  state = {
-    value: 'ES-es',
-  };
+  state = { value: 'ES-es' };
 
   handleChange = (value) => {
     this.setState({value: value});
@@ -28,6 +29,7 @@ class DropdownTest extends React.Component {
         auto
         onChange={this.handleChange}
         source={countries}
+        theme={theme}
         value={this.state.value}
       />
     );
@@ -51,3 +53,20 @@ class DropdownTest extends React.Component {
 | `source`        | `Array`         |                 | Array of data objects with the data to represent in the dropdown.|
 | `template`      | `Function`      |                 | Callback function that returns a JSX template to represent the element.|
 | `value`         | `String`        |                 | Default value using JSON data.|
+
+## Theming
+
+| Name     | Description|
+|:---------|:-----------|
+| `active`   | Added to the root element when the dropdown is active.|
+| `disabled`   | Added to the root element when it's disabled.|
+| `dropdown`   | Root element class.|
+| `error`   | Used for the error element.|
+| `errored`   | Added to the inner wrapper if it's errored.|
+| `field`   | Used for the inner wrapper of the component.|
+| `label`   | Used for the the label element.|
+| `selected`   | Used to highlight the selected value.|
+| `templateValue`   | Used as a wrapper for the given template value.|
+| `up`   | Added to the root element when it's opening up.|
+| `value`   | Used for each value in the dropdown component.|
+| `values`   | Used for the list of values.|
diff --git a/components/dropdown/style.scss b/components/dropdown/theme.scss
similarity index 99%
rename from components/dropdown/style.scss
rename to components/dropdown/theme.scss
index 6f0be32f6..58035e162 100644
--- a/components/dropdown/style.scss
+++ b/components/dropdown/theme.scss
@@ -1,8 +1,8 @@
 @import "http://github.com/base";
-@import "http://github.com/config";
 @import "http://github.com/input/config";
+@import "http://github.com/config";
 
-.root {
+.dropdown {
   position: relative;
   &:not(.active) {
     > .values {
diff --git a/spec/theme.js b/spec/theme.js
index 91b8bc991..e75e25390 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -9,6 +9,7 @@ import ToolboxChip from '../components/chip/theme.scss';
 import ToolboxDatePicker from '../components/date_picker/theme.scss';
 import ToolboxDialog from '../components/dialog/theme.scss';
 import ToolboxDrawer from '../components/drawer/theme.scss';
+import ToolboxDropdown from '../components/dropdown/theme.scss';
 import ToolboxInput from '../components/input/theme.scss';
 import ToolboxLayout from '../components/layout/theme.scss';
 import ToolboxLink from '../components/link/theme.scss';
@@ -29,6 +30,7 @@ export default defineTheme({
   ToolboxDatePicker,
   ToolboxDialog,
   ToolboxDrawer,
+  ToolboxDropdown,
   ToolboxInput,
   ToolboxLayout,
   ToolboxLink,

From e5ef5e2f5fd472bb9cc2182512bafc688fe4eee9 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 22 May 2016 21:39:40 +0200
Subject: [PATCH 0556/1024] Migrate Navigation to themr

---
 components/navigation/Navigation.js           | 29 +++++++++++--------
 components/navigation/readme.md               | 12 ++++++++
 .../navigation/{style.scss => theme.scss}     |  0
 spec/theme.js                                 |  2 ++
 4 files changed, 31 insertions(+), 12 deletions(-)
 rename components/navigation/{style.scss => theme.scss} (100%)

diff --git a/components/navigation/Navigation.js b/components/navigation/Navigation.js
index be1b92078..e3fb6ea33 100644
--- a/components/navigation/Navigation.js
+++ b/components/navigation/Navigation.js
@@ -1,25 +1,24 @@
 import React from 'react';
-import style from './style';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 import Button from '../button';
 import Link from '../link';
 
-const Navigation = props => {
-  let className = `${style[props.type]}`;
-  if (props.className) className += ` ${props.className}`;
-
-  const buttons = props.actions.map((action, index) => {
-    return <Button className={style.button} key={index} {...action} />;
+const Navigation = ({ actions, children, className, routes, theme, type }) => {
+  const _className = classnames(theme[type], className);
+  const buttons = actions.map((action, index) => {
+    return <Button className={theme.button} key={index} {...action} />;
   });
 
-  const links = props.routes.map((route, index) => {
-    return <Link className={style.link} key={index} {...route} />;
+  const links = routes.map((route, index) => {
+    return <Link className={theme.link} key={index} {...route} />;
   });
 
   return (
-    <nav data-react-toolbox='navigation' className={className}>
+    <nav data-react-toolbox='navigation' className={_className}>
       {links}
       {buttons}
-      {props.children}
+      {children}
     </nav>
   );
 };
@@ -29,6 +28,12 @@ Navigation.propTypes = {
   children: React.PropTypes.node,
   className: React.PropTypes.string,
   routes: React.PropTypes.array,
+  theme: React.PropTypes.shape({
+    button: React.PropTypes.string.isRequired,
+    horizontal: React.PropTypes.string.isRequired,
+    link: React.PropTypes.string.isRequired,
+    vertical: React.PropTypes.string.isRequired
+  }),
   type: React.PropTypes.oneOf(['vertical', 'horizontal'])
 };
 
@@ -39,4 +44,4 @@ Navigation.defaultProps = {
   routes: []
 };
 
-export default Navigation;
+export default themr('ToolboxNavigation')(Navigation);
diff --git a/components/navigation/readme.md b/components/navigation/readme.md
index 0540ca8c1..c48746799 100644
--- a/components/navigation/readme.md
+++ b/components/navigation/readme.md
@@ -2,10 +2,13 @@
 
 This component is intended to be a common wrapper for a group of links or buttons. It sets a minimal layout, semantic markup and spacing for each of those elements.
 
+The theming for this component can be provided using the key `ToolboxNavigation`.
+
 <!-- example -->
 ```jsx
 import Navigation from 'react-toolbox/lib/navigation';
 import Link from 'react-toolbox/lib/link';
+// Remember to provide themes using ThemeProvider
 
 const actions = [
   { label: 'Alarm', raised: true, icon: 'access_alarm'},
@@ -31,3 +34,12 @@ const NavigationTest = () => (
 | `className`     | `String`      |                 | Set a custom class styles to style the navigation.|
 | `routes`        | `Array`       |                 | Array of objects similar to actions but that will be rendered as `<Link/>` component definition. |
 | `type`          | `String`      | `horizontal`    | Type of the navigation, it can be `vertical` or `horizontal`.|
+
+## Theming
+
+| Name     | Description|
+|:---------|:-----------|
+| `button` | Used for buttons provided in the component.|
+| `horizontal`  | Used for the root element if the layout is horizontal.|
+| `link`   | Used for links provided in the component.|
+| `vertical`   | Used for the root element if the layout is vertical.|
diff --git a/components/navigation/style.scss b/components/navigation/theme.scss
similarity index 100%
rename from components/navigation/style.scss
rename to components/navigation/theme.scss
diff --git a/spec/theme.js b/spec/theme.js
index e75e25390..4448a23c1 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -15,6 +15,7 @@ import ToolboxLayout from '../components/layout/theme.scss';
 import ToolboxLink from '../components/link/theme.scss';
 import ToolboxList from '../components/list/theme.scss';
 import ToolboxMenu from '../components/menu/theme.scss';
+import ToolboxNavigation from '../components/navigation/theme.scss';
 import ToolboxOverlay from '../components/overlay/theme.scss';
 import ToolboxRipple from '../components/ripple/theme.scss';
 import ToolboxTimePicker from '../components/time_picker/theme.scss';
@@ -36,6 +37,7 @@ export default defineTheme({
   ToolboxLink,
   ToolboxList,
   ToolboxMenu,
+  ToolboxNavigation,
   ToolboxOverlay,
   ToolboxRipple,
   ToolboxTimePicker

From 38cb1b029fa9557cb3fdb0f5046cd1767717a216 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 22 May 2016 21:50:22 +0200
Subject: [PATCH 0557/1024] Migrate ProgressBar to themr

---
 components/progress_bar/ProgressBar.js        | 45 ++++++++++++-------
 components/progress_bar/readme.md             | 19 +++++++-
 .../progress_bar/{style.scss => theme.scss}   |  0
 spec/theme.js                                 |  2 +
 4 files changed, 47 insertions(+), 19 deletions(-)
 rename components/progress_bar/{style.scss => theme.scss} (100%)

diff --git a/components/progress_bar/ProgressBar.js b/components/progress_bar/ProgressBar.js
index 7deaef32b..e81f581af 100644
--- a/components/progress_bar/ProgressBar.js
+++ b/components/progress_bar/ProgressBar.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import ClassNames from 'classnames';
-import style from './style';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 import prefixer from '../utils/prefixer';
 
 class ProgressBar extends React.Component {
@@ -9,8 +9,18 @@ class ProgressBar extends React.Component {
     className: React.PropTypes.string,
     max: React.PropTypes.number,
     min: React.PropTypes.number,
-    mode: React.PropTypes.string,
+    mode: React.PropTypes.oneOf(['determinate', 'indeterminate']),
     multicolor: React.PropTypes.bool,
+    theme: React.PropTypes.shape({
+      buffer: React.PropTypes.string.isRequired,
+      circle: React.PropTypes.string.isRequired,
+      circular: React.PropTypes.string.isRequired,
+      indeterminate: React.PropTypes.string.isRequired,
+      linear: React.PropTypes.string.isRequired,
+      multicolor: React.PropTypes.string.isRequired,
+      path: React.PropTypes.string.isRequired,
+      value: React.PropTypes.string.isRequired
+    }),
     type: React.PropTypes.oneOf(['linear', 'circular']),
     value: React.PropTypes.number
   };
@@ -51,8 +61,8 @@ class ProgressBar extends React.Component {
 
   renderCircular () {
     return (
-      <svg className={style.circle}>
-        <circle className={style.path} style={this.circularStyle()} cx='30' cy='30' r='25' />
+      <svg className={this.props.theme.circle}>
+        <circle className={this.props.theme.path} style={this.circularStyle()} cx='30' cy='30' r='25' />
       </svg>
     );
   }
@@ -61,30 +71,31 @@ class ProgressBar extends React.Component {
     const {buffer, value} = this.linearStyle();
     return (
       <div>
-        <span ref='buffer' data-ref='buffer' className={style.buffer} style={buffer}></span>
-        <span ref='value' data-ref='value' className={style.value} style={value}></span>
+        <span ref='buffer' data-ref='buffer' className={this.props.theme.buffer} style={buffer}></span>
+        <span ref='value' data-ref='value' className={this.props.theme.value} style={value}></span>
       </div>
     );
   }
 
   render () {
-    const className = ClassNames(style[this.props.type], {
-      [style[this.props.mode]]: this.props.mode,
-      [style.multicolor]: this.props.multicolor
-    }, this.props.className);
+    const { className, max, min, mode, multicolor, type, theme, value } = this.props;
+    const _className = classnames(theme[type], {
+      [theme[mode]]: mode,
+      [theme.multicolor]: multicolor
+    }, className);
 
     return (
       <div
         data-react-toolbox='progress-bar'
-        aria-valuenow={this.props.value}
-        aria-valuemin={this.props.min}
-        aria-valuemax={this.props.max}
-        className={className}
+        aria-valuenow={value}
+        aria-valuemin={min}
+        aria-valuemax={max}
+        className={_className}
       >
-        {this.props.type === 'circular' ? this.renderCircular() : this.renderLinear()}
+        {type === 'circular' ? this.renderCircular() : this.renderLinear()}
       </div>
     );
   }
 }
 
-export default ProgressBar;
+export default themr('ToolboxProgress')(ProgressBar);
diff --git a/components/progress_bar/readme.md b/components/progress_bar/readme.md
index 9df82588d..864c859a5 100644
--- a/components/progress_bar/readme.md
+++ b/components/progress_bar/readme.md
@@ -5,11 +5,12 @@ Minimize visual changes that occur while your app loads content by representing
 <!-- example -->
 ```jsx
 import ProgressBar from 'react-toolbox/lib/progress_bar';
+import theme from 'react-toolbox/lib/progress_bar/theme';
 
 const ProgressTest = () => (
   <div>
-    <ProgressBar type="circular" mode="indeterminate" />
-    <ProgressBar type="linear" mode="determinate" value={83} buffer={90}/>
+    <ProgressBar type="circular" mode="indeterminate" theme={theme} />
+    <ProgressBar type="linear" mode="determinate" value={83} buffer={90} theme={theme} />
   </div>
 );
 ```
@@ -27,3 +28,17 @@ const ProgressTest = () => (
 | `type`        | `String`    | `linear`        | Type of the progress bar, it can be `circular` or `linear`.|
 | `value`       | `Number`    | `0`             | Value of the current progress.|
 
+## Theming
+
+You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxProgress`, it should implement the following interface:
+
+| Name     | Description|
+|:---------|:-----------|
+| `buffer` | Used to style the buffer element in the linear progress.|
+| `circle` | Used for the circle element in the circular progress.|
+| `circular` | Used for the root element when the type is circular.|
+| `indeterminate` | Added to the root element if mode is indeterminate.|
+| `linear` | Used for the root element when the type is linear.|
+| `multicolor` | Added to the root if the component is multicolor (circular).|
+| `path` | Used for the inner path in the circular progress.|
+| `value` | Used to style the value element in the linear progress.|
diff --git a/components/progress_bar/style.scss b/components/progress_bar/theme.scss
similarity index 100%
rename from components/progress_bar/style.scss
rename to components/progress_bar/theme.scss
diff --git a/spec/theme.js b/spec/theme.js
index 4448a23c1..ab8fb12e5 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -17,6 +17,7 @@ import ToolboxList from '../components/list/theme.scss';
 import ToolboxMenu from '../components/menu/theme.scss';
 import ToolboxNavigation from '../components/navigation/theme.scss';
 import ToolboxOverlay from '../components/overlay/theme.scss';
+import ToolboxProgress from '../components/progress_bar/theme.scss';
 import ToolboxRipple from '../components/ripple/theme.scss';
 import ToolboxTimePicker from '../components/time_picker/theme.scss';
 
@@ -39,6 +40,7 @@ export default defineTheme({
   ToolboxMenu,
   ToolboxNavigation,
   ToolboxOverlay,
+  ToolboxProgress,
   ToolboxRipple,
   ToolboxTimePicker
 });

From 306e3974b3b3cb04559c4a7085655bdda02586de Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 22 May 2016 22:18:41 +0200
Subject: [PATCH 0558/1024] Migrate Radio to themr

---
 components/radio/Radio.js                   | 29 +++++---
 components/radio/RadioButton.js             | 25 ++++---
 components/radio/readme.md                  | 21 +++++-
 components/radio/{style.scss => theme.scss} | 80 ++++++++++-----------
 spec/theme.js                               |  2 +
 5 files changed, 94 insertions(+), 63 deletions(-)
 rename components/radio/{style.scss => theme.scss} (91%)

diff --git a/components/radio/Radio.js b/components/radio/Radio.js
index 872dc7420..4dcdcde09 100644
--- a/components/radio/Radio.js
+++ b/components/radio/Radio.js
@@ -1,21 +1,30 @@
 import React, { PropTypes } from 'react';
+import { themr } from 'react-css-themr';
 import Ripple from '../ripple';
-import style from './style';
 
-const Radio = ({checked, children, onMouseDown}) => {
-  const className = style[checked ? 'radio-checked' : 'radio'];
-  return <div data-react-toolbox='radio' onMouseDown={onMouseDown} className={className}>{children}</div>;
-};
+const Radio = ({checked, onMouseDown, theme, ...other}) => (
+  <div
+    data-react-toolbox='radio'
+    className={theme[checked ? 'radioChecked' : 'radio']}
+    onMouseDown={onMouseDown}
+    {...other}
+  />
+);
 
 Radio.propTypes = {
   checked: PropTypes.bool,
   children: PropTypes.any,
-  onMouseDown: PropTypes.func
+  onMouseDown: PropTypes.func,
+  theme: PropTypes.shape({
+    radio: PropTypes.string.isRequired,
+    radioChecked: PropTypes.string.isRequired,
+    ripple: PropTypes.string.isRequired
+  })
 };
 
-export default Ripple({
-  className: style.ripple,
+const RawRadio = themr('ToolboxRadio')(Radio);
+export default themr('ToolboxRadio')(Ripple({
   spread: 2.6,
   centered: true
-})(Radio);
-export {Radio as RawRadio};
+})(Radio));
+export {RawRadio as RawRadio};
diff --git a/components/radio/RadioButton.js b/components/radio/RadioButton.js
index ca7eefe59..09c1dfa5a 100644
--- a/components/radio/RadioButton.js
+++ b/components/radio/RadioButton.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import ClassNames from 'classnames';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 import Radio from './Radio';
-import style from './style';
 
 class RadioButton extends React.Component {
   static propTypes = {
@@ -13,6 +13,12 @@ class RadioButton extends React.Component {
     onBlur: React.PropTypes.func,
     onChange: React.PropTypes.func,
     onFocus: React.PropTypes.func,
+    theme: React.PropTypes.shape({
+      disabled: React.PropTypes.string.isRequired,
+      field: React.PropTypes.string.isRequired,
+      input: React.PropTypes.string.isRequired,
+      text: React.PropTypes.string.isRequired
+    }),
     value: React.PropTypes.any
   };
 
@@ -37,24 +43,23 @@ class RadioButton extends React.Component {
   }
 
   render () {
-    const className = ClassNames(style[this.props.disabled ? 'disabled' : 'field'], this.props.className);
-    const { onChange, ...others } = this.props; //eslint-disable-line no-unused-vars
-
+    const { className, checked, disabled, label, theme, onChange, ...others } = this.props;  // eslint-disable-line
+    const _className = classnames(theme[this.props.disabled ? 'disabled' : 'field'], className);
     return (
-      <label data-react-toolbox='radio-button' className={className}>
+      <label data-react-toolbox='radio-button' className={_className}>
         <input
           {...others}
-          className={style.input}
+          className={theme.input}
           onClick={this.handleClick}
           readOnly
           ref='input'
           type='radio'
         />
-        <Radio checked={this.props.checked} disabled={this.props.disabled}/>
-        {this.props.label ? <span className={style.text}>{this.props.label}</span> : null}
+        <Radio checked={checked} disabled={disabled}/>
+        {label ? <span className={theme.text}>{label}</span> : null}
       </label>
     );
   }
 }
 
-export default RadioButton;
+export default themr('ToolboxRadio')(RadioButton);
diff --git a/components/radio/readme.md b/components/radio/readme.md
index 87ac159b9..dcdae9b1f 100644
--- a/components/radio/readme.md
+++ b/components/radio/readme.md
@@ -2,6 +2,8 @@
 
 [Radio buttons](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-radio-button) allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side. Otherwise, consider a dropdown, which uses less space than displaying all options. They should always be used along with `RadioGroup`.
 
+You can provide the theme for this component using the key `ToolboxButton`
+
 <!-- example -->
 ```jsx
 import { RadioGroup, RadioButton } from 'react-toolbox/lib/radio';
@@ -32,6 +34,8 @@ class RadioTest extends React.Component {
 
 A radio selector is mean to get a value from a set of choices, that's why a radio group is needed. It can take some properties and actions that will be transferred to the children, but they also can behave independently.
 
+### Properties
+
 | Name          | Type          | Default         | Description|
 |:-----|:-----|:-----|:-----|
 | `className`   | `String`      | `''`        | Set a class to give custom styles to the group.|
@@ -40,14 +44,13 @@ A radio selector is mean to get a value from a set of choices, that's why a radi
 | `onChange`    | `Function`    |             | Callback function that will be invoked when the value changes. |
 | `value`       | `Any`         |             | Default value selected in the radio group. |
 
-This component has state to keep the currently selected value and that's why it exposes to methods to work from the code with it:
-- `getValue` used to retrieve the currently selected value.
-- `setValue` used to set a new value.
 
 ## Radio Button
 
 The inner component to compose radio selectors. They will be rendered as radio input elements of HTML transferring the given properties that concerns to them.
 
+### Properties
+
 | Name          | Type          | Default         | Description|
 |:-----|:-----|:-----|:-----|
 | `checked`     | `Boolean`     | `false`     | If true, the input element will be selected by default. Transferred from the parent. |
@@ -59,3 +62,15 @@ The inner component to compose radio selectors. They will be rendered as radio i
 | `onChange`    | `Function`    |             | Callback function that will be invoked when the value changes. |
 | `onFocus`     | `Function`    |             | Callback function that will be invoked when the input is focused. |
 | `value`       | `Any`         |             | Value for the radio button. |
+
+### Theming
+
+| Name     | Description|
+|:---------|:-----------|
+| `disabled` | Added to the root of the Radio in case it's disabled.|
+| `field` | Used as the root class of the component.|
+| `input` | Used for the input element.|
+| `radio` | Used to for the radio element.|
+| `radioChecked` | Used for the radio element when it's checked.|
+| `ripple` | To provide styles for the ripple.|
+| `text` | Used to style the text label element.|
diff --git a/components/radio/style.scss b/components/radio/theme.scss
similarity index 91%
rename from components/radio/style.scss
rename to components/radio/theme.scss
index 21567db06..45c493373 100644
--- a/components/radio/style.scss
+++ b/components/radio/theme.scss
@@ -1,6 +1,44 @@
 @import "http://github.com/base";
 @import "http://github.com/config";
 
+.radio {
+  position: relative;
+  display: inline-block;
+  width: $radio-button-size;
+  height: $radio-button-size;
+  vertical-align: top;
+  cursor: pointer;
+  border: .2 * $unit solid $radio-text-color;
+  border-radius: 50%;
+  &:before {
+    @include material-animation-default();
+    position: absolute;
+    top: $radio-inner-margin - .2 * $unit;
+    left: $radio-inner-margin - .2 * $unit;
+    width: $radio-button-size - $radio-inner-margin * 2;
+    height: $radio-button-size - $radio-inner-margin * 2;
+    content: "";
+    background-color: $radio-inner-color;
+    border-radius: 50%;
+    transition: transform;
+    transform: scale(0);
+  }
+
+  .ripple {
+    background-color: $radio-inner-color;
+    opacity: .3;
+    transition-duration: 650ms;
+  }
+}
+
+.radioChecked {
+  @extend .radio;
+  border: .2 * $unit solid $radio-inner-color;
+  &:before {
+    transform: scale(1);
+  }
+}
+
 .field {
   position: relative;
   display: block;
@@ -32,49 +70,11 @@
   &:focus ~ .radio {
     box-shadow: 0 0 0 $unit $radio-focus-color;
   }
-  &:focus ~ .radio-checked {
+  &:focus ~ .radioChecked {
     box-shadow: 0 0 0 $unit $radio-checked-focus-color;
   }
 }
 
-.radio {
-  position: relative;
-  display: inline-block;
-  width: $radio-button-size;
-  height: $radio-button-size;
-  vertical-align: top;
-  cursor: pointer;
-  border: .2 * $unit solid $radio-text-color;
-  border-radius: 50%;
-  &:before {
-    @include material-animation-default();
-    position: absolute;
-    top: $radio-inner-margin - .2 * $unit;
-    left: $radio-inner-margin - .2 * $unit;
-    width: $radio-button-size - $radio-inner-margin * 2;
-    height: $radio-button-size - $radio-inner-margin * 2;
-    content: "";
-    background-color: $radio-inner-color;
-    border-radius: 50%;
-    transition: transform;
-    transform: scale(0);
-  }
-}
-
-.radio-checked {
-  @extend .radio;
-  border: .2 * $unit solid $radio-inner-color;
-  &:before {
-    transform: scale(1);
-  }
-}
-
-.ripple {
-  background-color: $radio-inner-color;
-  opacity: .3;
-  transition-duration: 650ms;
-}
-
 .disabled {
   @extend .field;
   .text {
@@ -84,7 +84,7 @@
     cursor: auto;
     border-color: $radio-disabled-color;
   }
-  .radio-checked {
+  .radioChecked {
     cursor: auto;
     border-color: $radio-disabled-color;
     &:before {
diff --git a/spec/theme.js b/spec/theme.js
index ab8fb12e5..6ae0b860f 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -18,6 +18,7 @@ import ToolboxMenu from '../components/menu/theme.scss';
 import ToolboxNavigation from '../components/navigation/theme.scss';
 import ToolboxOverlay from '../components/overlay/theme.scss';
 import ToolboxProgress from '../components/progress_bar/theme.scss';
+import ToolboxRadio from '../components/radio/theme.scss';
 import ToolboxRipple from '../components/ripple/theme.scss';
 import ToolboxTimePicker from '../components/time_picker/theme.scss';
 
@@ -41,6 +42,7 @@ export default defineTheme({
   ToolboxNavigation,
   ToolboxOverlay,
   ToolboxProgress,
+  ToolboxRadio,
   ToolboxRipple,
   ToolboxTimePicker
 });

From de89f9ae6d00e8166b72ff62ff00c9f64d9136b3 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 22 May 2016 22:35:32 +0200
Subject: [PATCH 0559/1024] Migrate the Slider to themr

---
 components/slider/Slider.js                  | 48 +++++++++++++-------
 components/slider/readme.md                  | 21 +++++++++
 components/slider/{style.scss => theme.scss} |  4 +-
 spec/theme.js                                |  2 +
 4 files changed, 57 insertions(+), 18 deletions(-)
 rename components/slider/{style.scss => theme.scss} (99%)

diff --git a/components/slider/Slider.js b/components/slider/Slider.js
index a5ea2f4bf..dd595d99d 100644
--- a/components/slider/Slider.js
+++ b/components/slider/Slider.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import ClassNames from 'classnames';
-import style from './style';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 import events from '../utils/events';
 import prefixer from '../utils/prefixer';
 import utils from '../utils/utils';
@@ -18,6 +18,21 @@ class Slider extends React.Component {
     pinned: React.PropTypes.bool,
     snaps: React.PropTypes.bool,
     step: React.PropTypes.number,
+    theme: React.PropTypes.shape({
+      container: React.PropTypes.string.isRequired,
+      editable: React.PropTypes.string.isRequired,
+      innerknob: React.PropTypes.string.isRequired,
+      innerprogress: React.PropTypes.string.isRequired,
+      input: React.PropTypes.string.isRequired,
+      knob: React.PropTypes.string.isRequired,
+      pinned: React.PropTypes.string.isRequired,
+      pressed: React.PropTypes.string.isRequired,
+      progress: React.PropTypes.string.isRequired,
+      ring: React.PropTypes.string.isRequired,
+      slider: React.PropTypes.string.isRequired,
+      snap: React.PropTypes.string.isRequired,
+      snaps: React.PropTypes.string.isRequired
+    }),
     value: React.PropTypes.number
   };
 
@@ -204,9 +219,9 @@ class Slider extends React.Component {
   renderSnaps () {
     if (this.props.snaps) {
       return (
-        <div ref='snaps' className={style.snaps}>
+        <div ref='snaps' className={this.props.theme.snaps}>
           {utils.range(0, (this.props.max - this.props.min) / this.props.step).map(i => {
-              return <div key={`span-${i}`} className={style.snap}></div>;
+              return <div key={`span-${i}`} className={this.props.theme.snap} />;
             })}
         </div>
       );
@@ -219,7 +234,7 @@ class Slider extends React.Component {
       return (
         <Input
           ref='input'
-          className={style.input}
+          className={this.props.theme.input}
           onFocus={this.handleInputFocus}
           onChange={this.handleInputChange}
           onBlur={this.handleInputBlur}
@@ -230,12 +245,13 @@ class Slider extends React.Component {
   }
 
   render () {
+    const { theme } = this.props;
     const knobStyles = prefixer({transform: `translateX(${this.knobOffset()}px)`});
-    const className = ClassNames(style.root, {
-      [style.editable]: this.props.editable,
-      [style.pinned]: this.props.pinned,
-      [style.pressed]: this.state.pressed,
-      [style.ring]: this.props.value === this.props.min
+    const className = classnames(theme.slider, {
+      [theme.editable]: this.props.editable,
+      [theme.pinned]: this.props.pinned,
+      [theme.pressed]: this.state.pressed,
+      [theme.ring]: this.props.value === this.props.min
     }, this.props.className);
 
     return (
@@ -248,24 +264,24 @@ class Slider extends React.Component {
       >
         <div
           ref='slider'
-          className={style.container}
+          className={theme.container}
           onMouseDown={this.handleMouseDown}
           onTouchStart={this.handleTouchStart}
         >
           <div
             ref='knob'
-            className={style.knob}
+            className={theme.knob}
             onMouseDown={this.handleMouseDown}
             onTouchStart={this.handleTouchStart}
             style={knobStyles}
           >
-            <div className={style.innerknob} data-value={parseInt(this.props.value)}></div>
+            <div className={theme.innerknob} data-value={parseInt(this.props.value)}></div>
           </div>
 
-          <div className={style.progress}>
+          <div className={theme.progress}>
             <ProgressBar
               ref='progressbar'
-              className={style.innerprogress}
+              className={theme.innerprogress}
               max={this.props.max}
               min={this.props.min}
               mode='determinate'
@@ -281,4 +297,4 @@ class Slider extends React.Component {
   }
 }
 
-export default Slider;
+export default themr('ToolboxSlider')(Slider);
diff --git a/components/slider/readme.md b/components/slider/readme.md
index 02da62d86..70cd597ef 100644
--- a/components/slider/readme.md
+++ b/components/slider/readme.md
@@ -2,9 +2,12 @@
 
 [Sliders](https://www.google.com/design/spec/components/sliders.html#) let users select a value from a continuous or discrete range of values by moving the slider thumb. The smallest value is to the left, the largest to the right. Sliders can have icons to the left and right of the bar that reflect the value intensity. The interactive nature of the slider makes it a great choice for settings that reflect intensity levels, such as volume, brightness, or color saturation.
 
+This component can be styled providing a theme with the key `ToolboxSlider` through the theme provider.
+
 <!-- example -->
 ```jsx
 import Slider from 'react-toolbox/lib/slider';
+// Remember to add styles using the key ToolboxSlider
 
 class SliderTest extends React.Component {
   state = {
@@ -46,3 +49,21 @@ class SliderTest extends React.Component {
 | `snaps`       | `Boolean`     | `false`   | If true, the slider thumb snaps to tick marks evenly spaced based on the step property value.|
 | `step`        | `Number`      | `0.01`    | Amount to vary the value when the knob is moved or increase/decrease is called.|
 | `value`       | `Number`      | `0`       | Current value of the slider.|
+
+## Theming
+
+| Name     | Description|
+|:---------|:-----------|
+| `container` | Used as an inner container of the root component.|
+| `editable` | Added to the root of in case the Slider is editable.|
+| `innerknob` | Used to style the inner element of the knob.|
+| `innerprogress` | Provided to the ProgressBar component.|
+| `input` | Provided to the Input element in case it's editable.|
+| `knob` | Used to style the outer layer of the knob.|
+| `pinned` | Added to the root in case the Slider is pinned.|
+| `pressed` | Added to the root in case the state is pressed.|
+| `progress` | Used as an outer wrapper for the ProgressBar.|
+| `ring` | Used in the root when the knob should be a ring.|
+| `slider` | Class used for the root element.|
+| `snap` | Used for every individual snap element.|
+| `snaps` | Used as a wrapper for the group of snaps when it's snapped.|
diff --git a/components/slider/style.scss b/components/slider/theme.scss
similarity index 99%
rename from components/slider/style.scss
rename to components/slider/theme.scss
index 53b824712..895b6e3d7 100644
--- a/components/slider/style.scss
+++ b/components/slider/theme.scss
@@ -4,8 +4,8 @@
 .container {
   position: relative;
   width: calc(100% - #{$slider-knob-size});
-  margin-right: $slider-knob-size;
   height: $slider-knob-size;
+  margin-right: $slider-knob-size;
   user-select: none;
   &:not(:last-child) {
     margin-right: $slider-side-separation + $slider-knob-size;
@@ -96,7 +96,7 @@
   }
 }
 
-.root {
+.slider {
   &:focus .knob:before {
     position: absolute;
     top: 0;
diff --git a/spec/theme.js b/spec/theme.js
index 6ae0b860f..24cc0e723 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -20,6 +20,7 @@ import ToolboxOverlay from '../components/overlay/theme.scss';
 import ToolboxProgress from '../components/progress_bar/theme.scss';
 import ToolboxRadio from '../components/radio/theme.scss';
 import ToolboxRipple from '../components/ripple/theme.scss';
+import ToolboxSlider from '../components/slider/theme.scss';
 import ToolboxTimePicker from '../components/time_picker/theme.scss';
 
 export default defineTheme({
@@ -44,5 +45,6 @@ export default defineTheme({
   ToolboxProgress,
   ToolboxRadio,
   ToolboxRipple,
+  ToolboxSlider,
   ToolboxTimePicker
 });

From 6329c5d11d49e7768a1658c77c764650fc9c06cd Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 25 May 2016 00:25:43 +0200
Subject: [PATCH 0560/1024] Make tests pass

---
 components/button/Button.js                   | 20 +++++-
 components/button/__test__/index.spec.js      | 52 +++++++-------
 components/input/Input.js                     | 25 +++----
 components/progress_bar/ProgressBar.js        | 17 ++---
 .../progress_bar/__test__/index.spec.js       | 23 +++---
 components/ripple/Ripple.js                   |  8 +--
 components/slider/Slider.js                   | 27 +++----
 components/slider/__tests__/index.spec.js     | 70 +++++++++++--------
 8 files changed, 138 insertions(+), 104 deletions(-)

diff --git a/components/button/Button.js b/components/button/Button.js
index cada0f582..770d9909a 100644
--- a/components/button/Button.js
+++ b/components/button/Button.js
@@ -25,7 +25,20 @@ class Button extends React.Component {
     onMouseUp: React.PropTypes.func,
     primary: React.PropTypes.bool,
     raised: React.PropTypes.bool,
-    theme: React.PropTypes.object,
+    theme: React.PropTypes.shape({
+      accent: React.PropTypes.string.isRequired,
+      button: React.PropTypes.string.isRequired,
+      flat: React.PropTypes.string.isRequired,
+      floating: React.PropTypes.string.isRequired,
+      icon: React.PropTypes.string.isRequired,
+      inverse: React.PropTypes.string.isRequired,
+      mini: React.PropTypes.string.isRequired,
+      neutral: React.PropTypes.string.isRequired,
+      primary: React.PropTypes.string.isRequired,
+      raised: React.PropTypes.string.isRequired,
+      rippleWrapper: React.PropTypes.string.isRequired,
+      toggle: React.PropTypes.string.isRequired
+    }),
     type: React.PropTypes.string
   };
 
@@ -82,6 +95,9 @@ class Button extends React.Component {
   }
 }
 
+const RippledButton = themr('ToolboxButton')(Ripple({centered: false})(Button));
 const RawButton = themr('ToolboxButton')(Button);
-export default themr('ToolboxButton')(Ripple({centered: false})(Button));
+
+export default RippledButton;
 export { RawButton as RawButton };
+export { Button };
diff --git a/components/button/__test__/index.spec.js b/components/button/__test__/index.spec.js
index a926c233f..01cb6ca61 100644
--- a/components/button/__test__/index.spec.js
+++ b/components/button/__test__/index.spec.js
@@ -1,41 +1,45 @@
 import expect from 'expect';
-import style from '../../button/style';
-import utils from '../../utils/testing';
-import {RawButton as Button} from '../Button';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import TestUtils from 'react-addons-test-utils';
+import theme from '../theme.scss';
+import Button, { Button as RawButton } from '../Button';
 
-describe('Button', function () {
-  let button;
+const getRenderedClassName = (tree, Component) => {
+  const rendered = TestUtils.findRenderedComponentWithType(tree, Component);
+  return ReactDOM.findDOMNode(rendered).getAttribute('class');
+};
 
+describe('Button', function () {
   describe('#render', function () {
     it('uses flat and neutral styles by default', function () {
-      button = utils.shallowRenderComponent(Button);
-
-      expect(button.props.className).toContain(style.flat);
-      expect(button.props.className).toContain(style.neutral);
+      const tree = TestUtils.renderIntoDocument(<Button theme={theme} />);
+      const className = getRenderedClassName(tree, RawButton);
+      expect(className).toContain(theme.flat);
+      expect(className).toContain(theme.neutral);
     });
 
     it('renders accent button with accent style', function () {
-      button = utils.shallowRenderComponent(Button, { accent: true });
-
-      expect(button.props.className).toContain(style.flat);
-      expect(button.props.className).toContain(style.accent);
+      const tree = TestUtils.renderIntoDocument(<Button accent theme={theme} />);
+      const className = getRenderedClassName(tree, RawButton);
+      expect(className).toContain(theme.flat);
+      expect(className).toContain(theme.accent);
     });
 
     it('renders mini button with mini style', function () {
-      button = utils.shallowRenderComponent(Button, { floating: true, mini: true });
-
-      expect(button.props.className).toContain(style.floating);
-      expect(button.props.className).toContain(style.neutral);
-      expect(button.props.className).toContain(style.mini);
+      const tree = TestUtils.renderIntoDocument(<Button floating mini theme={theme} />);
+      const className = getRenderedClassName(tree, RawButton);
+      expect(className).toContain(theme.floating);
+      expect(className).toContain(theme.neutral);
+      expect(className).toContain(theme.mini);
     });
 
     it('renders mini accented button with both styles', function () {
-      button = utils.shallowRenderComponent(Button, { mini: true, accent: true });
-
-      expect(button.props.className).toContain(style.flat);
-      expect(button.props.className).toContain(style.accent);
-      expect(button.props.className).toContain(style.mini);
+      const tree = TestUtils.renderIntoDocument(<Button accent mini theme={theme} />);
+      const className = getRenderedClassName(tree, RawButton);
+      expect(className).toContain(theme.flat);
+      expect(className).toContain(theme.accent);
+      expect(className).toContain(theme.mini);
     });
-
   });
 });
diff --git a/components/input/Input.js b/components/input/Input.js
index a587eb3e5..c347248f9 100644
--- a/components/input/Input.js
+++ b/components/input/Input.js
@@ -24,18 +24,18 @@ class Input extends React.Component {
     onKeyPress: React.PropTypes.func,
     required: React.PropTypes.bool,
     theme: React.PropTypes.shape({
-      bar: React.PropTypes.string.isRequired,
-      counter: React.PropTypes.string.isRequired,
-      disabled: React.PropTypes.string.isRequired,
-      error: React.PropTypes.string.isRequired,
-      errored: React.PropTypes.string.isRequired,
-      hidden: React.PropTypes.string.isRequired,
-      hint: React.PropTypes.string.isRequired,
-      icon: React.PropTypes.string.isRequired,
-      input: React.PropTypes.string.isRequired,
-      inputElement: React.PropTypes.string.isRequired,
-      required: React.PropTypes.string.isRequired,
-      withIcon: React.PropTypes.string.isRequired
+      bar: React.PropTypes.string,
+      counter: React.PropTypes.string,
+      disabled: React.PropTypes.string,
+      error: React.PropTypes.string,
+      errored: React.PropTypes.string,
+      hidden: React.PropTypes.string,
+      hint: React.PropTypes.string,
+      icon: React.PropTypes.string,
+      input: React.PropTypes.string,
+      inputElement: React.PropTypes.string,
+      required: React.PropTypes.string,
+      withIcon: React.PropTypes.string
     }),
     type: React.PropTypes.string,
     value: React.PropTypes.any
@@ -113,3 +113,4 @@ class Input extends React.Component {
 }
 
 export default themr('ToolboxInput')(Input);
+export { Input };
diff --git a/components/progress_bar/ProgressBar.js b/components/progress_bar/ProgressBar.js
index e81f581af..8d8cc1ab3 100644
--- a/components/progress_bar/ProgressBar.js
+++ b/components/progress_bar/ProgressBar.js
@@ -12,14 +12,14 @@ class ProgressBar extends React.Component {
     mode: React.PropTypes.oneOf(['determinate', 'indeterminate']),
     multicolor: React.PropTypes.bool,
     theme: React.PropTypes.shape({
-      buffer: React.PropTypes.string.isRequired,
-      circle: React.PropTypes.string.isRequired,
-      circular: React.PropTypes.string.isRequired,
-      indeterminate: React.PropTypes.string.isRequired,
-      linear: React.PropTypes.string.isRequired,
-      multicolor: React.PropTypes.string.isRequired,
-      path: React.PropTypes.string.isRequired,
-      value: React.PropTypes.string.isRequired
+      buffer: React.PropTypes.string,
+      circle: React.PropTypes.string,
+      circular: React.PropTypes.string,
+      indeterminate: React.PropTypes.string,
+      linear: React.PropTypes.string,
+      multicolor: React.PropTypes.string,
+      path: React.PropTypes.string,
+      value: React.PropTypes.string
     }),
     type: React.PropTypes.oneOf(['linear', 'circular']),
     value: React.PropTypes.number
@@ -99,3 +99,4 @@ class ProgressBar extends React.Component {
 }
 
 export default themr('ToolboxProgress')(ProgressBar);
+export { ProgressBar };
diff --git a/components/progress_bar/__test__/index.spec.js b/components/progress_bar/__test__/index.spec.js
index 4e7a983b0..52e9ae174 100644
--- a/components/progress_bar/__test__/index.spec.js
+++ b/components/progress_bar/__test__/index.spec.js
@@ -1,14 +1,17 @@
+import React from 'react';
 import expect from 'expect';
-import style from '../../progress_bar/style';
+import TestUtils from 'react-addons-test-utils';
+import ProgressBar, { ProgressBar as RawProgressBar } from '../ProgressBar';
+import theme from '../theme.scss';
 import utils from '../../utils/testing';
-import ProgressBar from '../index';
 
 describe('ProgressBar', function () {
   let progressBar;
 
   describe('#calculateRatio', function () {
     before(function () {
-      progressBar = utils.renderComponent(ProgressBar, {min: 100, max: 300});
+      const tree = TestUtils.renderIntoDocument(<ProgressBar min={100} max={300} theme={theme} />);
+      progressBar = TestUtils.findRenderedComponentWithType(tree, RawProgressBar);
     });
 
     it('calculates the right ratio', function () {
@@ -28,14 +31,14 @@ describe('ProgressBar', function () {
     let buffer, value, wrapper, circle, strokeLength;
 
     it('renders the value and buffer bars when it is linear', function () {
-      wrapper = utils.shallowRenderComponent(ProgressBar).props.children;
+      wrapper = utils.shallowRenderComponent(RawProgressBar, {theme}).props.children;
       expect(wrapper.props.children.length).toEqual(2);
       expect(wrapper.props.children[0].ref).toEqual('buffer');
       expect(wrapper.props.children[1].ref).toEqual('value');
     });
 
     it('renders the value and buffer bars when it is linear', function () {
-      progressBar = utils.shallowRenderComponent(ProgressBar, {mode: 'determinate', value: 30, buffer: 60});
+      progressBar = utils.shallowRenderComponent(RawProgressBar, {mode: 'determinate', value: 30, buffer: 60, theme});
       buffer = (progressBar.props.children.props.children[0]);
       value = (progressBar.props.children.props.children[1]);
       expect(buffer.props.style.transform).toEqual(`scaleX(${0.6})`);
@@ -43,22 +46,22 @@ describe('ProgressBar', function () {
     });
 
     it('renders the svg circle when it is circular', function () {
-      progressBar = utils.shallowRenderComponent(ProgressBar, {type: 'circular'});
+      progressBar = utils.shallowRenderComponent(RawProgressBar, {type: 'circular', theme});
       expect(progressBar.props.children.type).toEqual('svg');
       expect(progressBar.props.children.props.children.type).toEqual('circle');
     });
 
     it('renders the proper circle length style when it is circular and determinate', function () {
-      progressBar = utils.shallowRenderComponent(ProgressBar, {type: 'circular', mode: 'determinate', value: 30});
+      progressBar = utils.shallowRenderComponent(RawProgressBar, {type: 'circular', mode: 'determinate', value: 30, theme});
       circle = progressBar.props.children.props.children;
       strokeLength = 2 * Math.PI * circle.props.r * 0.3;
       expect(circle.props.style.strokeDasharray).toEqual(`${strokeLength}, 400`);
     });
 
     it('contains mode and className in its className', function () {
-      progressBar = utils.shallowRenderComponent(ProgressBar, {mode: 'determinate', className: 'tight'});
-      expect(progressBar.props.className).toContain(style.determinate);
-      expect(progressBar.props.className).toContain(style.tight);
+      progressBar = utils.shallowRenderComponent(RawProgressBar, {mode: 'determinate', className: 'tight', theme});
+      expect(progressBar.props.className).toContain(theme.determinate);
+      expect(progressBar.props.className).toContain(theme.tight);
     });
   });
 });
diff --git a/components/ripple/Ripple.js b/components/ripple/Ripple.js
index c7ee66be4..be2923eb5 100644
--- a/components/ripple/Ripple.js
+++ b/components/ripple/Ripple.js
@@ -30,10 +30,10 @@ const Ripple = (options = {}) => {
         rippleClassName: React.PropTypes.string,
         rippleSpread: React.PropTypes.number,
         theme: React.PropTypes.shape({
-          ripple: React.PropTypes.string.isRequired,
-          rippleActive: React.PropTypes.string.isRequired,
-          rippleRestarting: React.PropTypes.string.isRequired,
-          rippleWrapper: React.PropTypes.string.isRequired
+          ripple: React.PropTypes.string,
+          rippleActive: React.PropTypes.string,
+          rippleRestarting: React.PropTypes.string,
+          rippleWrapper: React.PropTypes.string
         })
       };
 
diff --git a/components/slider/Slider.js b/components/slider/Slider.js
index dd595d99d..930bd6164 100644
--- a/components/slider/Slider.js
+++ b/components/slider/Slider.js
@@ -19,19 +19,19 @@ class Slider extends React.Component {
     snaps: React.PropTypes.bool,
     step: React.PropTypes.number,
     theme: React.PropTypes.shape({
-      container: React.PropTypes.string.isRequired,
-      editable: React.PropTypes.string.isRequired,
-      innerknob: React.PropTypes.string.isRequired,
-      innerprogress: React.PropTypes.string.isRequired,
-      input: React.PropTypes.string.isRequired,
-      knob: React.PropTypes.string.isRequired,
-      pinned: React.PropTypes.string.isRequired,
-      pressed: React.PropTypes.string.isRequired,
-      progress: React.PropTypes.string.isRequired,
-      ring: React.PropTypes.string.isRequired,
-      slider: React.PropTypes.string.isRequired,
-      snap: React.PropTypes.string.isRequired,
-      snaps: React.PropTypes.string.isRequired
+      container: React.PropTypes.string,
+      editable: React.PropTypes.string,
+      innerknob: React.PropTypes.string,
+      innerprogress: React.PropTypes.string,
+      input: React.PropTypes.string,
+      knob: React.PropTypes.string,
+      pinned: React.PropTypes.string,
+      pressed: React.PropTypes.string,
+      progress: React.PropTypes.string,
+      ring: React.PropTypes.string,
+      slider: React.PropTypes.string,
+      snap: React.PropTypes.string,
+      snaps: React.PropTypes.string
     }),
     value: React.PropTypes.number
   };
@@ -298,3 +298,4 @@ class Slider extends React.Component {
 }
 
 export default themr('ToolboxSlider')(Slider);
+export { Slider };
diff --git a/components/slider/__tests__/index.spec.js b/components/slider/__tests__/index.spec.js
index 7fe605e00..bf4e3ab1e 100644
--- a/components/slider/__tests__/index.spec.js
+++ b/components/slider/__tests__/index.spec.js
@@ -1,20 +1,21 @@
-import expect from 'expect';
+import React from 'react';
+import TestUtils from 'react-addons-test-utils';
 import sinon from 'sinon';
+import expect from 'expect';
+import { ProgressBar } from '../../progress_bar/ProgressBar.js';
+import Input, { Input as RawInput } from '../../input/Input.js';
+import Slider, { Slider as RawSlider } from '../Slider.js';
 import utils from '../../utils/testing';
-import style from '../../slider/style';
-import ProgressBar from '../../progress_bar';
-import Input from '../../input';
-import Slider from '../index';
-import TestUtils from 'react-addons-test-utils';
+import theme from '../theme.scss';
 
 describe('Slider', function () {
-  let props, state, slider, progress, input, onChange;
+  let slider, progress, input, onChange;
 
   describe('#positionToValue', function () {
     before(function () {
-      props = { min: -500, max: 500 };
-      state = { sliderStart: 500, sliderLength: 100 };
-      slider = utils.renderComponent(Slider, props, state);
+      const tree = TestUtils.renderIntoDocument(<Slider min={-500} max={500} />);
+      slider = TestUtils.findRenderedComponentWithType(tree, RawSlider);
+      slider.setState({ sliderStart: 500, sliderLength: 100 });
     });
 
     it('returns min when position is less than origin', function () {
@@ -32,8 +33,8 @@ describe('Slider', function () {
 
   describe('#trimValue', function () {
     before(function () {
-      props = { min: 0, max: 100, step: 0.1 };
-      slider = utils.renderComponent(Slider, props);
+      const tree = TestUtils.renderIntoDocument(<Slider min={0} max={100} step={0.1} />);
+      slider = TestUtils.findRenderedComponentWithType(tree, RawSlider);
     });
 
     it('rounds to the proper number', function () {
@@ -52,8 +53,8 @@ describe('Slider', function () {
 
   describe('#valueForInput', function () {
     before(function () {
-      props = { min: 0, max: 100, step: 0.01 };
-      slider = utils.renderComponent(Slider, props);
+      const tree = TestUtils.renderIntoDocument(<Slider min={0} max={100} step={0.01} />);
+      slider = TestUtils.findRenderedComponentWithType(tree, RawSlider);
     });
 
     it('returns a fixed number when an integer is given', function () {
@@ -67,16 +68,17 @@ describe('Slider', function () {
 
   describe('#knobOffset', function () {
     it('returns the corresponding offset for a given value and slider length/start', function () {
-      props = { min: -500, max: 500, value: -250 };
-      state = { sliderStart: 500, sliderLength: 100 };
-      slider = utils.renderComponent(Slider, props, state);
+      const tree = TestUtils.renderIntoDocument(<Slider min={-500} max={500} value={-250} />);
+      slider = TestUtils.findRenderedComponentWithType(tree, RawSlider);
+      slider.setState({ sliderStart: 500, sliderLength: 100 });
       expect(slider.knobOffset()).toEqual(25);
     });
   });
 
   describe('#render', function () {
     it('contains a linear progress bar with proper properties', function () {
-      slider = utils.renderComponent(Slider, {min: 100, max: 1000, value: 140});
+      const tree = TestUtils.renderIntoDocument(<Slider min={100} max={1000} value={140} />);
+      slider = TestUtils.findRenderedComponentWithType(tree, RawSlider);
       progress = TestUtils.findRenderedComponentWithType(slider, ProgressBar);
       expect(progress.props.mode).toEqual('determinate');
       expect(progress.props.type).toEqual('linear');
@@ -86,26 +88,27 @@ describe('Slider', function () {
     });
 
     it('contains an input component if its editable', function () {
-      slider = utils.renderComponent(Slider, {editable: true, value: 130});
+      const tree = TestUtils.renderIntoDocument(<Slider editable value={130} />);
+      slider = TestUtils.findRenderedComponentWithType(tree, RawSlider);
       input = TestUtils.findRenderedComponentWithType(slider, Input);
       expect(parseInt(input.props.value)).toEqual(slider.props.value);
     });
 
     it('contains the proper number of snaps when snapped', function () {
-      slider = utils.shallowRenderComponent(Slider, {editable: true, pinned: true});
-      expect(slider.props.className).toContain(style.ring);
-      expect(slider.props.className).toContain(style.pinned);
-      slider = utils.shallowRenderComponent(Slider, {editable: true, value: 50});
-      expect(slider.props.className).toNotContain(style.ring);
+      slider = utils.shallowRenderComponent(RawSlider, {editable: true, pinned: true, theme});
+      expect(slider.props.className).toContain(theme.ring);
+      expect(slider.props.className).toContain(theme.pinned);
+      slider = utils.shallowRenderComponent(RawSlider, {editable: true, value: 50, theme});
+      expect(slider.props.className).toNotContain(theme.ring);
     });
   });
 
   describe('#events', function () {
     beforeEach(function () {
       onChange = sinon.spy();
-      props = { min: -500, max: 500, onChange };
-      state = { sliderStart: 0, sliderLength: 1000 };
-      slider = utils.renderComponent(Slider, props, state);
+      const tree = TestUtils.renderIntoDocument(<Slider min={-500} max={500} onChange={onChange} />);
+      slider = TestUtils.findRenderedComponentWithType(tree, RawSlider);
+      slider.setState({ sliderStart: 0, sliderLength: 1000 });
       slider.handleResize = (event, callback) => { callback(); };
     });
 
@@ -132,7 +135,9 @@ describe('Slider', function () {
     });
 
     it('changes input value when slider changes', function () {
-      slider = utils.renderComponent(Slider, {editable: true, onChange}, {sliderStart: 0, sliderLength: 1000});
+      const tree = TestUtils.renderIntoDocument(<Slider editable onChange={onChange} />);
+      slider = TestUtils.findRenderedComponentWithType(tree, RawSlider);
+      slider.setState({sliderStart: 0, sliderLength: 1000});
       slider.handleResize = (event, callback) => { callback(); };
       input = TestUtils.findRenderedComponentWithType(slider, Input);
       TestUtils.Simulate.mouseDown(slider.refs.slider, { pageX: 900 });
@@ -141,8 +146,9 @@ describe('Slider', function () {
     });
 
     it('changes its value when input is blurred', function () {
-      slider = utils.renderComponent(Slider, {editable: true, value: 50, onChange});
-      input = TestUtils.findRenderedComponentWithType(slider, Input);
+      const tree = TestUtils.renderIntoDocument(<Slider editable value={50} onChange={onChange} />);
+      slider = TestUtils.findRenderedComponentWithType(tree, RawSlider);
+      input = TestUtils.findRenderedComponentWithType(slider, RawInput);
       TestUtils.Simulate.change(input.refs.input, {target: {value: '80'}});
       TestUtils.Simulate.blur(input.refs.input);
       expect(onChange.called).toEqual(true);
@@ -151,7 +157,9 @@ describe('Slider', function () {
 
     it('calls onChange callback when the value is changed', function () {
       const onChangeSpy = sinon.spy();
-      slider = utils.renderComponent(Slider, {onChange: onChangeSpy}, {sliderStart: 0, sliderLength: 1000});
+      const tree = TestUtils.renderIntoDocument(<Slider onChange={onChangeSpy} />);
+      slider = TestUtils.findRenderedComponentWithType(tree, RawSlider);
+      slider.setState({sliderStart: 0, sliderLength: 1000});
       TestUtils.Simulate.mouseDown(slider.refs.slider, { pageX: 900 });
       expect(onChangeSpy.called).toEqual(true);
     });

From 22819ca54ca0bf889fbb635c4e4b3d32f21f5a0b Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 25 May 2016 00:28:07 +0200
Subject: [PATCH 0561/1024] Bugfix: delete style in form

---
 components/form/Form.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/components/form/Form.js b/components/form/Form.js
index bd0abe7af..87fbb0edf 100644
--- a/components/form/Form.js
+++ b/components/form/Form.js
@@ -59,10 +59,8 @@ class Form extends React.Component {
   }
 
   render () {
-    const className = `${style.root} ${this.props.className}`;
-
     return (
-      <form data-react-toolbox='form' className={className} onSubmit={this.onSubmit}>
+      <form data-react-toolbox='form' className={this.props.className} onSubmit={this.onSubmit}>
         {this.renderFields()}
         {this.props.children}
       </form>

From 4f85f4e5f9c2ed8d93a573e1f29cd39fdfb18a9d Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 25 May 2016 00:28:21 +0200
Subject: [PATCH 0562/1024] Remove linter warning

---
 components/table/TableHead.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/table/TableHead.js b/components/table/TableHead.js
index 55b4638a3..90219684b 100644
--- a/components/table/TableHead.js
+++ b/components/table/TableHead.js
@@ -30,9 +30,9 @@ const TableHead = ({model, onSelect, selectable, multiSelectable, selected}) =>
 TableHead.propTypes = {
   className: React.PropTypes.string,
   model: React.PropTypes.object,
+  multiSelectable: React.PropTypes.bool,
   onSelect: React.PropTypes.func,
   selectable: React.PropTypes.bool,
-  multiSelectable: React.PropTypes.bool,
   selected: React.PropTypes.bool
 };
 

From 8705c5775b753149d0323d3046884ba63604e369 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 25 May 2016 00:41:26 +0200
Subject: [PATCH 0563/1024] Migrate snackbar to themr

---
 components/snackbar/Snackbar.js               | 30 ++++++++++++-------
 components/snackbar/readme.md                 | 15 ++++++++++
 .../snackbar/{style.scss => theme.scss}       |  3 +-
 spec/theme.js                                 |  2 ++
 4 files changed, 38 insertions(+), 12 deletions(-)
 rename components/snackbar/{style.scss => theme.scss} (98%)

diff --git a/components/snackbar/Snackbar.js b/components/snackbar/Snackbar.js
index f96342d38..cd78528c0 100644
--- a/components/snackbar/Snackbar.js
+++ b/components/snackbar/Snackbar.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import ClassNames from 'classnames';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 import ActivableRenderer from '../hoc/ActivableRenderer';
 import Button from '../button';
 import FontIcon from '../font_icon';
 import Overlay from '../overlay';
-import style from './style';
 
 class Snackbar extends React.Component {
   static propTypes = {
@@ -18,8 +18,18 @@ class Snackbar extends React.Component {
     label: React.PropTypes.string.isRequired,
     onClick: React.PropTypes.func,
     onTimeout: React.PropTypes.func,
+    theme: React.PropTypes.shape({
+      accept: React.PropTypes.string,
+      active: React.PropTypes.string,
+      button: React.PropTypes.string,
+      cancel: React.PropTypes.string,
+      icon: React.PropTypes.string,
+      label: React.PropTypes.string,
+      snackbar: React.PropTypes.string,
+      warning: React.PropTypes.string
+    }),
     timeout: React.PropTypes.number,
-    type: React.PropTypes.string
+    type: React.PropTypes.oneOf([ 'accept', 'cancel', 'warning' ])
   };
 
   componentWillReceiveProps (nextProps) {
@@ -33,21 +43,21 @@ class Snackbar extends React.Component {
   }
 
   render () {
-    const {action, active, icon, label, onClick, type } = this.props;
-    const className = ClassNames([style.root, style[type]], {
-      [style.active]: active
+    const {action, active, icon, label, onClick, theme, type } = this.props;
+    const className = classnames([theme.snackbar, theme[type]], {
+      [theme.active]: active
     }, this.props.className);
 
     return (
       <Overlay invisible>
         <div data-react-toolbox='snackbar' className={className}>
-          {icon ? <FontIcon value={icon} className={style.icon} /> : null}
-          <span className={style.label}>{label}</span>
-          {action ? <Button className={style.button} label={action} onClick={onClick}/> : null}
+          {icon ? <FontIcon value={icon} className={theme.icon} /> : null}
+          <span className={theme.label}>{label}</span>
+          {action ? <Button className={theme.button} label={action} onClick={onClick}/> : null}
         </div>
       </Overlay>
     );
   }
 }
 
-export default ActivableRenderer()(Snackbar);
+export default themr('ToolboxSnackbar')(ActivableRenderer()(Snackbar));
diff --git a/components/snackbar/readme.md b/components/snackbar/readme.md
index 620f12233..720b9d3be 100644
--- a/components/snackbar/readme.md
+++ b/components/snackbar/readme.md
@@ -2,6 +2,8 @@
 
 Snackbars provide lightweight feedback about an operation by showing a brief message at the bottom of the screen. Snackbars can contain an action.
 
+This component is themeable under the key `ToolboxSnackbar`. You can check the configuration variables directly in Github.
+
 <!-- example -->
 ```jsx
 import { Button, Snackbar } from 'react-toolbox';
@@ -46,3 +48,16 @@ class SnackbarTest extends React.Component {
 | `onTimeout`   | `Function`              |               | Callback function when finish the set timeout.|
 | `timeout`     | `Number`                |               | Amount of time in milliseconds after the Snackbar will be automatically hidden.|
 | `type`        | `String`                |               | Indicates the action type. Can be `accept`, `warning` or `cancel`|
+
+## Theming
+
+| Name     | Description|
+|:---------|:-----------|
+| `accept` | Added to the root element in case it's accept type.|
+| `active` | Added to the root element when its active.|
+| `button` | Used for the button inside the component.|
+| `cancel` | Added to the root element in case it's cancel type.|
+| `icon` | Used for the icon element.|
+| `label` | Used for the label element.|
+| `snackbar` | Used as the className for the root element of the component.|
+| `warning` | Added to the root element in case it's warning type.|
diff --git a/components/snackbar/style.scss b/components/snackbar/theme.scss
similarity index 98%
rename from components/snackbar/style.scss
rename to components/snackbar/theme.scss
index d27da625d..0ebb89c25 100644
--- a/components/snackbar/style.scss
+++ b/components/snackbar/theme.scss
@@ -1,8 +1,7 @@
 @import "http://github.com/base";
 @import "http://github.com/config";
 
-
-.root {
+.snackbar {
   position: fixed;
   right: $snackbar-horizontal-offset;
   bottom: 0;
diff --git a/spec/theme.js b/spec/theme.js
index 24cc0e723..3fef0c53e 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -21,6 +21,7 @@ import ToolboxProgress from '../components/progress_bar/theme.scss';
 import ToolboxRadio from '../components/radio/theme.scss';
 import ToolboxRipple from '../components/ripple/theme.scss';
 import ToolboxSlider from '../components/slider/theme.scss';
+import ToolboxSnackbar from '../components/snackbar/theme.scss';
 import ToolboxTimePicker from '../components/time_picker/theme.scss';
 
 export default defineTheme({
@@ -46,5 +47,6 @@ export default defineTheme({
   ToolboxRadio,
   ToolboxRipple,
   ToolboxSlider,
+  ToolboxSnackbar,
   ToolboxTimePicker
 });

From d451cf05c4414dd8681ef613b8b8711d04e0610c Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 25 May 2016 00:54:56 +0200
Subject: [PATCH 0564/1024] Migrate switch to themr

---
 components/switch/Switch.js                  | 34 ++++++++++++--------
 components/switch/Thumb.js                   | 17 +++++-----
 components/switch/readme.md                  | 16 +++++++++
 components/switch/{style.scss => theme.scss} | 10 +++---
 spec/theme.js                                |  2 ++
 5 files changed, 52 insertions(+), 27 deletions(-)
 rename components/switch/{style.scss => theme.scss} (95%)

diff --git a/components/switch/Switch.js b/components/switch/Switch.js
index c6539f024..b88680249 100644
--- a/components/switch/Switch.js
+++ b/components/switch/Switch.js
@@ -1,6 +1,7 @@
 import React from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 import Thumb from './Thumb';
-import style from './style';
 
 class Switch extends React.Component {
   static propTypes = {
@@ -11,7 +12,17 @@ class Switch extends React.Component {
     name: React.PropTypes.string,
     onBlur: React.PropTypes.func,
     onChange: React.PropTypes.func,
-    onFocus: React.PropTypes.func
+    onFocus: React.PropTypes.func,
+    theme: React.PropTypes.shape({
+      disabled: React.PropTypes.string,
+      field: React.PropTypes.string,
+      input: React.PropTypes.string,
+      off: React.PropTypes.string,
+      on: React.PropTypes.string,
+      ripple: React.PropTypes.string,
+      text: React.PropTypes.string,
+      thumb: React.PropTypes.string
+    })
   };
 
   static defaultProps = {
@@ -36,29 +47,26 @@ class Switch extends React.Component {
   }
 
   render () {
-    let className = style[this.props.disabled ? 'disabled' : 'field'];
-    const switchClassName = style[this.props.checked ? 'on' : 'off'];
-    const { onChange, ...others } = this.props; //eslint-disable-line no-unused-vars
-    if (this.props.className) className += ` ${this.props.className}`;
-
+    const { className, checked, disabled, onChange, theme, ...others } = this.props; //eslint-disable-line no-unused-vars
+    const _className = classnames(theme[disabled ? 'disabled' : 'field'], className);
     return (
-      <label data-react-toolbox='switch' className={className}>
+      <label data-react-toolbox='switch' className={_className}>
         <input
           {...others}
           checked={this.props.checked}
-          className={style.input}
+          className={theme.input}
           onClick={this.handleToggle}
           readOnly
           ref='input'
           type='checkbox'
         />
-        <span className={switchClassName}>
-          <Thumb disabled={this.props.disabled} />
+        <span className={theme[checked ? 'on' : 'off']}>
+          <Thumb disabled={this.props.disabled} theme={theme} />
         </span>
-        {this.props.label ? <span className={style.text}>{this.props.label}</span> : null}
+        {this.props.label ? <span className={theme.text}>{this.props.label}</span> : null}
       </label>
     );
   }
 }
 
-export default Switch;
+export default themr('ToolboxSwitch')(Switch);
diff --git a/components/switch/Thumb.js b/components/switch/Thumb.js
index 73adff1ae..c1725eaf4 100644
--- a/components/switch/Thumb.js
+++ b/components/switch/Thumb.js
@@ -1,18 +1,17 @@
 import React, { PropTypes } from 'react';
 import Ripple from '../ripple';
-import style from './style';
 
-const Thumb = ({children, onMouseDown}) => (
-  <span role='thumb' className={style.thumb} onMouseDown={onMouseDown}>{children}</span>
+const Thumb = ({onMouseDown, theme, ...other}) => (
+  <span role='thumb' className={theme.thumb} onMouseDown={onMouseDown} {...other} />
 );
 
 Thumb.propTypes = {
-  children: PropTypes.any
+  children: PropTypes.any,
+  theme: PropTypes.shape({
+    ripple: PropTypes.string,
+    thumb: PropTypes.string
+  })
 };
 
-export default Ripple({
-  className: style.ripple,
-  spread: 2.6,
-  centered: true
-})(Thumb);
+export default Ripple({spread: 2.6, centered: true})(Thumb);
 export {Thumb as RawThumb};
diff --git a/components/switch/readme.md b/components/switch/readme.md
index 00e7c67c9..49796ef34 100644
--- a/components/switch/readme.md
+++ b/components/switch/readme.md
@@ -2,9 +2,12 @@
 
 On/off switches toggle the state of a single settings option. The option that the switch controls, as well as the state it’s in, should be made clear from the corresponding inline label. Switches take on the same visual properties of the radio button.
 
+The theming key for this component is `ToolboxSwitch`.
+
 <!-- example -->
 ```jsx
 import Switch from 'react-toolbox/lib/switch';
+// Remember to provide a theme using ThemeProvider
 
 class SwitchTest extends React.Component {
   state = {
@@ -54,3 +57,16 @@ class SwitchTest extends React.Component {
 | `onBlur`       | `Function`       |               | Callback function that is fired when when the switch is blurred.|
 | `onChange`     | `Function`       |               | Callback function that is fired when the component's value changes.|
 | `onFocus`      | `Function`       |               | Callback function that is fired when the switch is focused.|
+
+## Theming
+
+| Name     | Description|
+|:---------|:-----------|
+| `disabled` | Used for the root element if the component is disabled.|
+| `field` | Used for the root element if the component is not disabled.|
+| `input` | Used for the input element.|
+| `off` | Used for a wrapper around the thumb if checked is `false`.|
+| `on` | Used for a wrapper around the thumb if checked is `true`.|
+| `ripple` | Used for the ripple inside the switch.|
+| `text` | Used for the text label element.|
+| `thumb` | Used for the thumb element.|
diff --git a/components/switch/style.scss b/components/switch/theme.scss
similarity index 95%
rename from components/switch/style.scss
rename to components/switch/theme.scss
index 066760f76..bc7924c84 100644
--- a/components/switch/style.scss
+++ b/components/switch/theme.scss
@@ -40,12 +40,12 @@
   cursor: pointer;
   border-radius: 50%;
   transition-property: left;
-}
 
-.ripple {
-  background-color: $switch-color;
-  opacity: .3;
-  transition-duration: $switch-ripple-duration;
+  .ripple {
+    background-color: $switch-color;
+    opacity: .3;
+    transition-duration: $switch-ripple-duration;
+  }
 }
 
 .on {
diff --git a/spec/theme.js b/spec/theme.js
index 3fef0c53e..b6d44586f 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -22,6 +22,7 @@ import ToolboxRadio from '../components/radio/theme.scss';
 import ToolboxRipple from '../components/ripple/theme.scss';
 import ToolboxSlider from '../components/slider/theme.scss';
 import ToolboxSnackbar from '../components/snackbar/theme.scss';
+import ToolboxSwitch from '../components/switch/theme.scss';
 import ToolboxTimePicker from '../components/time_picker/theme.scss';
 
 export default defineTheme({
@@ -48,5 +49,6 @@ export default defineTheme({
   ToolboxRipple,
   ToolboxSlider,
   ToolboxSnackbar,
+  ToolboxSwitch,
   ToolboxTimePicker
 });

From 3c4c1e6f0149948ea17ba6016b1d0ab04e241879 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Danny=20D=C3=B6rfel?= <danny.dorfel@gmail.com>
Date: Thu, 26 May 2016 09:57:45 +0200
Subject: [PATCH 0565/1024] Added media-queries for the max-height of he
 app-bar on mobile devices (56dp and 48dp)

---
 components/app_bar/_config.scss | 2 ++
 components/app_bar/style.scss   | 8 ++++++++
 2 files changed, 10 insertions(+)

diff --git a/components/app_bar/_config.scss b/components/app_bar/_config.scss
index 067be3376..5c76b6189 100644
--- a/components/app_bar/_config.scss
+++ b/components/app_bar/_config.scss
@@ -2,5 +2,7 @@ $appbar-color: $color-primary-dark !default;
 $appbar-contrast: $color-primary-contrast !default;
 $appbar-title-total-distance: 8 * $unit !default;
 $appbar-height: 6.4 * $unit !default;
+$appbar-height-m-portrait: 5.6 * $unit !default;
+$appbar-height-m-landscape: 4.8 * $unit !default;
 $appbar-h-padding: 2.4 * $unit !default;
 $appbar-title-distance: $appbar-title-total-distance - $appbar-h-padding !default;
diff --git a/components/app_bar/style.scss b/components/app_bar/style.scss
index 762232af2..067b55f7d 100644
--- a/components/app_bar/style.scss
+++ b/components/app_bar/style.scss
@@ -9,6 +9,14 @@
   color: $appbar-contrast;
   background: $appbar-color;
 
+  @media screen and (max-width: $layout-breakpoint-xxs) and (orientation:portrait) {
+    height: $appbar-height-m-portrait;
+  }
+
+  @media screen and (max-width: $layout-breakpoint-xs) and (orientation:landscape) {
+    height: $appbar-height-m-landscape;
+  }
+
   &:not(.flat) {
     z-index: $z-index-high;
     box-shadow: 0 2px 5px rgba(0,0,0,.26);

From b75e7577cf89e17e6bfb976ca2c26151d39e987b Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 26 May 2016 20:37:57 +0200
Subject: [PATCH 0566/1024] Migrate Table component to themr

---
 components/table/Table.js                   | 50 ++++++++++++---------
 components/table/TableHead.js               | 14 +++---
 components/table/TableRow.js                | 19 +++++---
 components/table/readme.md                  | 12 +++++
 components/table/{style.scss => theme.scss} |  2 +-
 spec/components/table.js                    |  5 +--
 spec/theme.js                               |  2 +
 7 files changed, 65 insertions(+), 39 deletions(-)
 rename components/table/{style.scss => theme.scss} (99%)

diff --git a/components/table/Table.js b/components/table/Table.js
index 18bd50925..8a872008e 100644
--- a/components/table/Table.js
+++ b/components/table/Table.js
@@ -1,7 +1,8 @@
 import React from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 import TableHead from './TableHead';
 import TableRow from './TableRow';
-import style from './style';
 
 class Table extends React.Component {
   static propTypes = {
@@ -13,7 +14,10 @@ class Table extends React.Component {
     onSelect: React.PropTypes.func,
     selectable: React.PropTypes.bool,
     selected: React.PropTypes.array,
-    source: React.PropTypes.array
+    source: React.PropTypes.array,
+    theme: React.PropTypes.shape({
+      table: React.PropTypes.string
+    })
   };
 
   static defaultProps = {
@@ -64,35 +68,37 @@ class Table extends React.Component {
           selectable={selectable}
           multiSelectable={multiSelectable}
           selected={isSelected}
+          theme={this.props.theme}
         />
       );
     }
   }
 
   renderBody () {
-    const rows = this.props.source.map((data, index) => {
-      return (
-        <TableRow
-          data={data}
-          index={index}
-          key={index}
-          model={this.props.model}
-          onChange={this.props.onChange ? this.handleRowChange.bind(this) : undefined}
-          onSelect={this.handleRowSelect.bind(this, index)}
-          selectable={this.props.selectable}
-          selected={this.props.selected.indexOf(index) !== -1}
-        />
-      );
-    });
-
-    return <tbody>{rows}</tbody>;
+    const { source, model, onChange, selectable, selected, theme } = this.props;
+    return (
+      <tbody>
+        {source.map((data, index) => (
+          <TableRow
+            data={data}
+            index={index}
+            key={index}
+            model={model}
+            onChange={onChange ? this.handleRowChange.bind(this) : undefined}
+            onSelect={this.handleRowSelect.bind(this, index)}
+            selectable={selectable}
+            selected={selected.indexOf(index) !== -1}
+            theme={theme}
+          />
+        ))}
+      </tbody>
+    );
   }
 
   render () {
-    let className = style.root;
-    if (this.props.className) className += ` ${this.props.className}`;
+    const { className, theme } = this.props;
     return (
-      <table data-react-toolbox='table' className={className}>
+      <table data-react-toolbox='table' className={classnames(theme.table, className)}>
         {this.renderHead()}
         {this.renderBody()}
       </table>
@@ -100,4 +106,4 @@ class Table extends React.Component {
   }
 }
 
-export default Table;
+export default themr('ToolboxTable')(Table);
diff --git a/components/table/TableHead.js b/components/table/TableHead.js
index 90219684b..c02e15822 100644
--- a/components/table/TableHead.js
+++ b/components/table/TableHead.js
@@ -1,8 +1,7 @@
 import React from 'react';
 import Checkbox from '../checkbox';
-import style from './style';
 
-const TableHead = ({model, onSelect, selectable, multiSelectable, selected}) => {
+const TableHead = ({model, onSelect, selectable, multiSelectable, selected, theme}) => {
   let selectCell;
   const contentCells = Object.keys(model).map((key) => {
     const name = model[key].title || key;
@@ -11,18 +10,18 @@ const TableHead = ({model, onSelect, selectable, multiSelectable, selected}) =>
 
   if (selectable && multiSelectable) {
     selectCell = (
-      <th key='select' className={style.selectable}>
+      <th key='select' className={theme.selectable}>
         <Checkbox onChange={onSelect} checked={selected}/>
       </th>
     );
   } else if (selectable) {
     selectCell = (
-      <th key='select' className={style.selectable}></th>
+      <th key='select' className={theme.selectable}></th>
     );
   }
   return (
     <thead>
-    <tr>{[selectCell, ...contentCells]}</tr>
+      <tr>{[selectCell, ...contentCells]}</tr>
     </thead>
   );
 };
@@ -33,7 +32,10 @@ TableHead.propTypes = {
   multiSelectable: React.PropTypes.bool,
   onSelect: React.PropTypes.func,
   selectable: React.PropTypes.bool,
-  selected: React.PropTypes.bool
+  selected: React.PropTypes.bool,
+  theme: React.PropTypes.shape({
+    selectable: React.PropTypes.string
+  })
 };
 
 TableHead.defaultProps = {
diff --git a/components/table/TableRow.js b/components/table/TableRow.js
index 5d08be30d..33b02482e 100644
--- a/components/table/TableRow.js
+++ b/components/table/TableRow.js
@@ -1,8 +1,7 @@
 import React from 'react';
-import ClassNames from 'classnames';
+import classnames from 'classnames';
 import Checkbox from '../checkbox';
 import utils from '../utils/utils';
-import style from './style';
 
 class TableRow extends React.Component {
   static propTypes = {
@@ -12,7 +11,13 @@ class TableRow extends React.Component {
     onChange: React.PropTypes.func,
     onSelect: React.PropTypes.func,
     selectable: React.PropTypes.bool,
-    selected: React.PropTypes.bool
+    selected: React.PropTypes.bool,
+    theme: React.PropTypes.shape({
+      editable: React.PropTypes.string,
+      row: React.PropTypes.string,
+      selectable: React.PropTypes.string,
+      selected: React.PropTypes.string
+    })
   };
 
   handleInputChange = (index, key, type, event) => {
@@ -24,7 +29,7 @@ class TableRow extends React.Component {
   renderSelectCell () {
     if (this.props.selectable) {
       return (
-        <td className={style.selectable}>
+        <td className={this.props.theme.selectable}>
           <Checkbox checked={this.props.selected} onChange={this.props.onSelect} />
         </td>
       );
@@ -68,9 +73,9 @@ class TableRow extends React.Component {
   }
 
   render () {
-    const className = ClassNames(style.row, {
-      [style.editable]: this.props.onChange,
-      [style.selected]: this.props.selected
+    const className = classnames(this.props.theme.row, {
+      [this.props.theme.editable]: this.props.onChange,
+      [this.props.theme.selected]: this.props.selected
     });
 
     return (
diff --git a/components/table/readme.md b/components/table/readme.md
index 063e04f41..48c45667e 100644
--- a/components/table/readme.md
+++ b/components/table/readme.md
@@ -2,6 +2,8 @@
 
 The Table component is an enhanced version of the standard HTML `<table>`. A data-table consists of rows and columns of well-formatted data, presented with appropriate user interaction capabilities. This component uses a solid typed model, helping you to create formatted formated cells. These cells can be editable if you subscribe to `onChange` method who dispatch then new source with each change.
 
+This component is themeable under the key `ToolboxTable`. You can check the configuration variables directly in Github.
+
 <!-- example -->
 ```jsx
 import Table from 'react-toolbox/lib/table';
@@ -62,3 +64,13 @@ class TableTest extends React.Component {
 | `multiSelectable` | `Boolean`       | `true`          | If true, the header and each row will display a checkbox to allow the user to select multiple rows.|
 | `selected`        | `Array`         |                 | Array of indexes of the items in the source that should appear as selected.|
 | `source`          | `Array`         |                 | Array of objects representing each item to show.|
+
+## Theming
+
+| Name     | Description|
+|:---------|:-----------|
+| `editable` | It will be added to a row in case it is editable.|
+| `row` | Used for the row element.|
+| `selectable` | It will be added to a row in case it is selectable.|
+| `selected` | Added to a row in case it is selected.|
+| `table` | Classname used for the root element.|
diff --git a/components/table/style.scss b/components/table/theme.scss
similarity index 99%
rename from components/table/style.scss
rename to components/table/theme.scss
index 36f98c538..b6d03b053 100644
--- a/components/table/style.scss
+++ b/components/table/theme.scss
@@ -1,7 +1,7 @@
 @import "http://github.com/base";
 @import "http://github.com/config";
 
-.root {
+.table {
   width: 100%;
   font-size: $font-size-tiny;
   color: $table-text-color;
diff --git a/spec/components/table.js b/spec/components/table.js
index 1b17cb61d..8598aa632 100644
--- a/spec/components/table.js
+++ b/spec/components/table.js
@@ -7,12 +7,11 @@ const UserModel = {
   birthdate: {type: Date},
   cats: {type: Number, onChange (...args) { console.log('changes:', ...args); } },
   dogs: {type: Number},
-  owner: {type: Boolean },
-  image: {title: <img src='https://pbs.twimg.com/profile_images/579415786994839552/aE3uhPPr.jpg' width={50} height={50}/>}
+  owner: {type: Boolean }
 };
 
 const users = [
-  {name: 'Javi Jimenez', twitter: '@soyjavi', birthdate: new Date(1980, 3, 11), cats: 1, image: <img src='http://www.planwallpaper.com/static/images/Winter-Tiger-Wild-Cat-Images.jpg' width={50} height={50}/>},
+  {name: 'Javi Jimenez', twitter: '@soyjavi', birthdate: new Date(1980, 3, 11), cats: 1},
   {name: 'Javi Velasco', twitter: '@javivelasco', birthdate: new Date(1987, 1, 1), dogs: 1, owner: true}
 ];
 
diff --git a/spec/theme.js b/spec/theme.js
index b6d44586f..d42d3030c 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -23,6 +23,7 @@ import ToolboxRipple from '../components/ripple/theme.scss';
 import ToolboxSlider from '../components/slider/theme.scss';
 import ToolboxSnackbar from '../components/snackbar/theme.scss';
 import ToolboxSwitch from '../components/switch/theme.scss';
+import ToolboxTable from '../components/table/theme.scss';
 import ToolboxTimePicker from '../components/time_picker/theme.scss';
 
 export default defineTheme({
@@ -50,5 +51,6 @@ export default defineTheme({
   ToolboxSlider,
   ToolboxSnackbar,
   ToolboxSwitch,
+  ToolboxTable,
   ToolboxTimePicker
 });

From d6bc5f5436172a9378445078ba05a41872b2d89a Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 26 May 2016 21:01:54 +0200
Subject: [PATCH 0567/1024] Move tabs to themr

---
 components/tabs/Tab.js                     | 29 ++++++++++++++--------
 components/tabs/TabContent.js              | 17 ++++++++-----
 components/tabs/Tabs.js                    | 24 ++++++++++--------
 components/tabs/readme.md                  | 25 +++++++++++++++++++
 components/tabs/{style.scss => theme.scss} |  2 +-
 spec/theme.js                              |  2 ++
 6 files changed, 71 insertions(+), 28 deletions(-)
 rename components/tabs/{style.scss => theme.scss} (99%)

diff --git a/components/tabs/Tab.js b/components/tabs/Tab.js
index b7d8c3c35..6bc4770d8 100644
--- a/components/tabs/Tab.js
+++ b/components/tabs/Tab.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import ClassNames from 'classnames';
-import style from './style';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 
 class TabHeader extends React.Component {
   static propTypes = {
@@ -11,7 +11,13 @@ class TabHeader extends React.Component {
     hidden: React.PropTypes.bool,
     label: React.PropTypes.any.isRequired,
     onActive: React.PropTypes.func,
-    onClick: React.PropTypes.func
+    onClick: React.PropTypes.func,
+    theme: React.PropTypes.shape({
+      active: React.PropTypes.string,
+      disabled: React.PropTypes.string,
+      hidden: React.PropTypes.string,
+      label: React.PropTypes.string
+    })
   };
 
   static defaultProps = {
@@ -34,19 +40,20 @@ class TabHeader extends React.Component {
   };
 
   render () {
-    const className = ClassNames(style.label, {
-      [style.active]: this.props.active,
-      [style.hidden]: this.props.hidden,
-      [style.disabled]: this.props.disabled,
-      [this.props.activeClassName]: this.props.active
-    }, this.props.className);
+    const { active, activeClassName, hidden, disabled, className, theme } = this.props;
+    const _className = classnames(theme.label, {
+      [theme.active]: active,
+      [theme.hidden]: hidden,
+      [theme.disabled]: disabled,
+      [activeClassName]: active
+    }, className);
 
     return (
-      <label data-react-toolbox='tab' className={className} onClick={this.handleClick}>
+      <label data-react-toolbox='tab' className={_className} onClick={this.handleClick}>
         {this.props.label}
       </label>
     );
   }
 }
 
-export default TabHeader;
+export default themr('ToolboxTabs')(TabHeader);
diff --git a/components/tabs/TabContent.js b/components/tabs/TabContent.js
index 04a9810ad..f90f3aca5 100644
--- a/components/tabs/TabContent.js
+++ b/components/tabs/TabContent.js
@@ -1,12 +1,17 @@
 import React from 'react';
-import style from './style';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 
 class TabContent extends React.Component {
   static propTypes = {
     active: React.PropTypes.bool,
     children: React.PropTypes.node,
     className: React.PropTypes.string,
-    tabIndex: React.PropTypes.number
+    tabIndex: React.PropTypes.number,
+    theme: React.PropTypes.shape({
+      active: React.PropTypes.string,
+      tab: React.PropTypes.string
+    })
   };
 
   static defaultProps = {
@@ -15,9 +20,9 @@ class TabContent extends React.Component {
   };
 
   render () {
-    let className = style.tab;
-    if (this.props.active) className += ` ${style.active}`;
-    if (this.props.className) className += ` ${this.props.className}`;
+    const className = classnames(this.props.theme.tab, {
+      [this.props.theme.active]: this.props.active
+    }, this.props.className);
 
     return (
       <section className={className} tabIndex={this.props.tabIndex}>
@@ -27,4 +32,4 @@ class TabContent extends React.Component {
   }
 }
 
-export default TabContent;
+export default themr('ToolboxTabs')(TabContent);
diff --git a/components/tabs/Tabs.js b/components/tabs/Tabs.js
index a858028ca..dcb6af20d 100644
--- a/components/tabs/Tabs.js
+++ b/components/tabs/Tabs.js
@@ -1,7 +1,8 @@
 import React from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 import Tab from './Tab';
 import TabContent from './TabContent';
-import style from './style';
 
 class Tabs extends React.Component {
   static propTypes = {
@@ -9,7 +10,12 @@ class Tabs extends React.Component {
     className: React.PropTypes.string,
     disableAnimatedBottomBorder: React.PropTypes.bool,
     index: React.PropTypes.number,
-    onChange: React.PropTypes.func
+    onChange: React.PropTypes.func,
+    theme: React.PropTypes.shape({
+      navigation: React.PropTypes.string,
+      pointer: React.PropTypes.string,
+      tabs: React.PropTypes.string
+    })
   };
 
   static defaultProps = {
@@ -44,7 +50,7 @@ class Tabs extends React.Component {
       if (item.type === Tab) {
         headers.push(item);
         if (item.props.children) {
-          contents.push(<TabContent children={item.props.children}/>);
+          contents.push(<TabContent children={item.props.children} />);
         }
       } else if (item.type === TabContent) {
         contents.push(item);
@@ -94,20 +100,18 @@ class Tabs extends React.Component {
   }
 
   render () {
-    let className = style.root;
+    const { className, theme } = this.props;
     const { headers, contents } = this.parseChildren();
-    if (this.props.className) className += ` ${this.props.className}`;
-
     return (
-      <div ref='tabs' data-react-toolbox='tabs' className={className}>
-        <nav className={style.navigation} ref='navigation'>
+      <div ref='tabs' data-react-toolbox='tabs' className={classnames(theme.tabs, className)}>
+        <nav className={theme.navigation} ref='navigation'>
           {this.renderHeaders(headers)}
         </nav>
-        <span className={style.pointer} style={this.state.pointer} />
+        <span className={theme.pointer} style={this.state.pointer} />
         {this.renderContents(contents)}
       </div>
     );
   }
 }
 
-export default Tabs;
+export default themr('ToolboxTabs')(Tabs);
diff --git a/components/tabs/readme.md b/components/tabs/readme.md
index a4a95121c..fd324a21a 100644
--- a/components/tabs/readme.md
+++ b/components/tabs/readme.md
@@ -2,6 +2,8 @@
 
 [Tabs](https://www.google.com/design/spec/components/tabs.html) make it easy to explore and switch between different views or functional aspects of an app or to browse categorized data sets.  Tabs are composed with their content, but only the active tab's content is rendered.  In the future, we may add the ability to render headers only, with event listeners.
 
+This component and subcomponents are themeable under the key `ToolboxTabs`. You can check the configuration variables for SASS at Github.
+
 <!-- example -->
 ```jsx
 import {Tab, Tabs} from 'react-toolbox';
@@ -37,6 +39,8 @@ class TabsTest extends React.Component {
 
 This component acts as the wrapper and the main controller of the content that is being displayed. It gets some properties that can be spread to the children.
 
+### Properties
+
 | Name                          | Type            | Default         | Description|
 |:-----|:-----|:-----|:-----|
 | `className`                   | `String`        | `''`            | Additional class name to provide custom styling.|
@@ -44,10 +48,22 @@ This component acts as the wrapper and the main controller of the content that i
 | `index`                       | `Number`        | `0`             | Current <Tab> |
 | `onChange`                    | `Function`      |                 | Callback function that is fired when the tab changes.|
 
+### Theming
+
+| Name     | Description|
+|:---------|:-----------|
+| `active` | Added to the active tab content and header.|
+| `navigation` | Used for the navigation element.|
+| `pointer` | Used for the moving underline element.|
+| `tabs` |Used as a root classname for the component.|
+| `tab` | Used for the tab content element.|
+
 ## Tab
 
 Represent a single tab element and it should include some properties to describe the tab itself and get children elements as content.
 
+### Properties
+
 | Name              | Type            | Default         | Description|
 |:-----|:-----|:-----|:-----|
 | `active`          | `Boolean`       | `false`         | If true, the current component is visible.|
@@ -58,3 +74,12 @@ Represent a single tab element and it should include some properties to describe
 | `label`           | `String`        |                 | Label text for navigation header. Required. |
 | `onActive`        | `Function`      |                 | Callback function that is fired when the tab is activated. |
 | `onClick`         | `Function`      |                 | Callback function that is fired when the tab is clicked. |
+
+### Theming
+
+| Name     | Description|
+|:---------|:-----------|
+| `active` | Added to the navigation tab element in case it's active.|
+| `disabled` | Added to the navigation tab element in case it's disabled.|
+| `hidden` | Added to the navigation tab element in case it's hidden.|
+| `label` | Added to the navigation tab element in case it's active.|
diff --git a/components/tabs/style.scss b/components/tabs/theme.scss
similarity index 99%
rename from components/tabs/style.scss
rename to components/tabs/theme.scss
index 8f3388d26..806c1dfb1 100644
--- a/components/tabs/style.scss
+++ b/components/tabs/theme.scss
@@ -1,7 +1,7 @@
 @import "http://github.com/base";
 @import "http://github.com/config";
 
-.root {
+.tabs {
   position: relative;
   display: flex;
   flex-direction: column;
diff --git a/spec/theme.js b/spec/theme.js
index d42d3030c..afd584252 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -24,6 +24,7 @@ import ToolboxSlider from '../components/slider/theme.scss';
 import ToolboxSnackbar from '../components/snackbar/theme.scss';
 import ToolboxSwitch from '../components/switch/theme.scss';
 import ToolboxTable from '../components/table/theme.scss';
+import ToolboxTabs from '../components/tabs/theme.scss';
 import ToolboxTimePicker from '../components/time_picker/theme.scss';
 
 export default defineTheme({
@@ -52,5 +53,6 @@ export default defineTheme({
   ToolboxSnackbar,
   ToolboxSwitch,
   ToolboxTable,
+  ToolboxTabs,
   ToolboxTimePicker
 });

From a9e8304a842813f0cd3f5a3634c10b2217adc8a8 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 26 May 2016 21:17:25 +0200
Subject: [PATCH 0568/1024] =?UTF-8?q?All=20components=20moved=20to=20themr?=
 =?UTF-8?q?=20=F0=9F=98=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/tooltip/Tooltip.js                 | 118 ++++++++++--------
 components/tooltip/readme.md                  |  11 ++
 components/tooltip/{style.scss => theme.scss} |   4 +-
 spec/root.js                                  |  14 +--
 spec/theme.js                                 |   4 +-
 5 files changed, 87 insertions(+), 64 deletions(-)
 rename components/tooltip/{style.scss => theme.scss} (95%)

diff --git a/components/tooltip/Tooltip.js b/components/tooltip/Tooltip.js
index 6694aa90b..8c2f9cf09 100644
--- a/components/tooltip/Tooltip.js
+++ b/components/tooltip/Tooltip.js
@@ -1,67 +1,77 @@
 import React from 'react';
-import ClassNames from 'classnames';
-import style from './style';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 
-const Tooltip = (ComposedComponent) => class extends React.Component {
-  static propTypes = {
-    children: React.PropTypes.any,
-    className: React.PropTypes.string,
-    onClick: React.PropTypes.func,
-    onMouseEnter: React.PropTypes.func,
-    onMouseLeave: React.PropTypes.func,
-    tooltip: React.PropTypes.string,
-    tooltipDelay: React.PropTypes.number,
-    tooltipHideOnClick: React.PropTypes.bool
-  };
+const Tooltip = (ComposedComponent) => {
+  class TooltippedComponent extends React.Component {
+    static propTypes = {
+      children: React.PropTypes.any,
+      className: React.PropTypes.string,
+      onClick: React.PropTypes.func,
+      onMouseEnter: React.PropTypes.func,
+      onMouseLeave: React.PropTypes.func,
+      theme: React.PropTypes.shape({
+        tooltip: React.PropTypes.string,
+        tooltipActive: React.PropTypes.string,
+        tooltipWrapper: React.PropTypes.string
+      }),
+      tooltip: React.PropTypes.string,
+      tooltipDelay: React.PropTypes.number,
+      tooltipHideOnClick: React.PropTypes.bool
+    };
 
-  static defaultProps = {
-    className: '',
-    tooltipDelay: 0,
-    tooltipHideOnClick: true
-  };
+    static defaultProps = {
+      className: '',
+      tooltipDelay: 0,
+      tooltipHideOnClick: true
+    };
 
-  state = {
-    active: false
-  };
+    state = {
+      active: false
+    };
 
-  handleMouseEnter = (event) => {
-    if (this.timeout) clearTimeout(this.timeout);
-    this.timeout = setTimeout(() =>this.setState({active: true}), this.props.tooltipDelay);
-    if (this.props.onMouseEnter) this.props.onMouseEnter(event);
-  };
+    handleMouseEnter = (event) => {
+      if (this.timeout) clearTimeout(this.timeout);
+      this.timeout = setTimeout(() =>this.setState({active: true}), this.props.tooltipDelay);
+      if (this.props.onMouseEnter) this.props.onMouseEnter(event);
+    };
 
-  handleMouseLeave = (event) => {
-    if (this.timeout) clearTimeout(this.timeout);
-    if (this.state.active) this.setState({active: false});
-    if (this.props.onMouseLeave) this.props.onMouseLeave(event);
-  };
+    handleMouseLeave = (event) => {
+      if (this.timeout) clearTimeout(this.timeout);
+      if (this.state.active) this.setState({active: false});
+      if (this.props.onMouseLeave) this.props.onMouseLeave(event);
+    };
 
-  handleClick = (event) => {
-    if (this.timeout) clearTimeout(this.timeout);
-    if (this.props.tooltipHideOnClick) this.setState({active: false});
-    if (this.props.onClick) this.props.onClick(event);
-  };
+    handleClick = (event) => {
+      if (this.timeout) clearTimeout(this.timeout);
+      if (this.props.tooltipHideOnClick) this.setState({active: false});
+      if (this.props.onClick) this.props.onClick(event);
+    };
 
-  render () {
-    const {children, className, tooltip, tooltipDelay, tooltipHideOnClick, ...other} = this.props; //eslint-disable-line no-unused-vars
-    const composedClassName = ClassNames(style.root, className);
-    const tooltipClassName = ClassNames(style.tooltip, {
-      [style.active]: this.state.active
-    });
+    render () {
+      const {children, className, tooltip,
+        tooltipDelay, tooltipHideOnClick, theme, ...other} = this.props; //eslint-disable-line no-unused-vars
+      const composedClassName = classnames(this.props.theme.tooltipWrapper, className);
+      const tooltipClassName = classnames(this.props.theme.tooltip, {
+        [this.props.theme.tooltipActive]: this.state.active
+      });
 
-    return (
-      <ComposedComponent
-        {...other}
-        className={composedClassName}
-        onClick={this.handleClick}
-        onMouseEnter={this.handleMouseEnter}
-        onMouseLeave={this.handleMouseLeave}
-      >
-        {children ? children : null}
-        <span data-react-toolbox="tooltip" className={tooltipClassName}>{tooltip}</span>
-      </ComposedComponent>
-    );
+      return (
+        <ComposedComponent
+          {...other}
+          className={composedClassName}
+          onClick={this.handleClick}
+          onMouseEnter={this.handleMouseEnter}
+          onMouseLeave={this.handleMouseLeave}
+        >
+          {children ? children : null}
+          <span data-react-toolbox="tooltip" className={tooltipClassName}>{tooltip}</span>
+        </ComposedComponent>
+      );
+    }
   }
+
+  return themr('ToolboxTooltip')(TooltippedComponent);
 };
 
 export default Tooltip;
diff --git a/components/tooltip/readme.md b/components/tooltip/readme.md
index e5f27bf29..e35f6b617 100644
--- a/components/tooltip/readme.md
+++ b/components/tooltip/readme.md
@@ -2,11 +2,14 @@
 
 A Tooltip is useful to show information on hover in any kind of component. We have a component that can be used as a **decorator** for any kind of component. You just have to take into account that the overflow in the component should be visible.
 
+Tooltips are themeable under the key `ToolboxTooltip`. Check the configuration at github.
+
 <!-- example -->
 ```jsx
 import Button from 'react-toolbox/lib/button';
 import Tooltip from 'react-toolbox/lib/tooltip';
 import Link from 'react-toolbox/lib/link';
+// Remember to provide a default theme using the provider
 
 const TooltipButton = Tooltip(Button);
 const TooltipInput = Tooltip(Input);
@@ -35,3 +38,11 @@ In any component you decorate with the Tooltip you'd get some additional props:
 | `tooltip`             | `String`      |               | The text string to use for the tooltip.|
 | `tooltipDelay`        | `Number`      |               | Amount of time in miliseconds spent before the tooltip is visible.|
 | `tooltipHideOnClick`  | `Boolean`     | `true`        | If true, the Tooltip hides after a click in the host component.|
+
+## Theming
+
+| Name     | Description|
+|:---------|:-----------|
+| `tooltip` | Added to the tooltip element.|
+| `tooltipActive` | Added to the root when the tooltip is active.|
+| `tooltipWrapper` | Wrapper for the root element used to position the tooltip.|
diff --git a/components/tooltip/style.scss b/components/tooltip/theme.scss
similarity index 95%
rename from components/tooltip/style.scss
rename to components/tooltip/theme.scss
index 85b9867a0..e588b1872 100644
--- a/components/tooltip/style.scss
+++ b/components/tooltip/theme.scss
@@ -1,7 +1,7 @@
 @import "http://github.com/base";
 @import "http://github.com/config";
 
-.root {
+.tooltipWrapper {
   position: relative;
 }
 
@@ -26,7 +26,7 @@
   transition: $animation-curve-default $tooltip-animation-duration transform;
   transform: scale(0) translateX(-50%);
   transform-origin: top left;
-  &.active {
+  &.tooltipActive {
     transform: scale(1) translateX(-50%);
   }
 }
diff --git a/spec/root.js b/spec/root.js
index ac2d4a303..ada21f7a2 100644
--- a/spec/root.js
+++ b/spec/root.js
@@ -3,11 +3,11 @@ import React from 'react';
 import { ThemeProvider } from 'react-css-themr';
 import theme from './theme';
 
-import AppBarToolbox from '../components/app_bar';
-import Avatar from './components/avatar';
-import ButtonToolbox from '../components/button';
+import AppBar from '../components/app_bar';
 import Autocomplete from './components/autocomplete';
+import Avatar from './components/avatar';
 import Button from './components/button';
+import ButtonToolbox from '../components/button';
 import Card from './components/card';
 import Checkbox from './components/checkbox';
 import Chip from './components/chip';
@@ -22,18 +22,19 @@ import Menu from './components/menu';
 import Pickers from './components/pickers';
 import Progress from './components/progress';
 import Radio from './components/radio';
-import Snackbar from './components/snackbar';
 import Slider from './components/slider';
+import Snackbar from './components/snackbar';
 import Switch from './components/switch';
 import Table from './components/table';
 import Tabs from './components/tabs';
 import Tooltip from './components/tooltip';
+
 import style from './style';
 
 const Root = () => (
   <ThemeProvider theme={theme}>
     <div className={style.app}>
-      <AppBarToolbox className={style.appbar} fixed flat>
+      <AppBar className={style.appbar} fixed flat>
         <h1>React Toolbox <small>Spec {VERSION}</small></h1>
         <ButtonToolbox
           accent
@@ -42,8 +43,7 @@ const Root = () => (
           floating
           onClick={() => {window.href = 'http://react-toolbox/';}}
         />
-      </AppBarToolbox>
-
+      </AppBar>
       <Autocomplete />
       <Avatar />
       <Button />
diff --git a/spec/theme.js b/spec/theme.js
index afd584252..7b0390134 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -26,6 +26,7 @@ import ToolboxSwitch from '../components/switch/theme.scss';
 import ToolboxTable from '../components/table/theme.scss';
 import ToolboxTabs from '../components/tabs/theme.scss';
 import ToolboxTimePicker from '../components/time_picker/theme.scss';
+import ToolboxTooltip from '../components/tooltip/theme.scss';
 
 export default defineTheme({
   ToolboxAppBar,
@@ -54,5 +55,6 @@ export default defineTheme({
   ToolboxSwitch,
   ToolboxTable,
   ToolboxTabs,
-  ToolboxTimePicker
+  ToolboxTimePicker,
+  ToolboxTooltip
 });

From 310d683fa9e68117d562e27d14e46bd9e3d0b8e2 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 26 May 2016 21:38:02 +0200
Subject: [PATCH 0569/1024] Avoid null values when parsing input

---
 components/utils/utils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/utils/utils.js b/components/utils/utils.js
index 202caf082..bf805bc8c 100644
--- a/components/utils/utils.js
+++ b/components/utils/utils.js
@@ -53,7 +53,7 @@ export default {
   prepareValueForInput (value, type) {
     if (type === 'date') return new Date(value).toISOString().slice(0, 10);
     if (type === 'checkbox') {
-      return value ? 'on' : null;
+      return value ? 'on' : '';
     }
     return value;
   }

From 5056a9d84b63c2eef479e733c5ca7e5625912445 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Fri, 27 May 2016 21:54:16 +0200
Subject: [PATCH 0570/1024] Migrate docs to new theme syntax

---
 docs/app/components/_globals.scss             |  3 +-
 docs/app/components/appbar/style.scss         |  1 -
 .../components/layout/main/button-theme.scss  |  2 +
 docs/app/components/layout/main/index.js      |  2 +
 docs/app/components/preview/index.js          | 13 ++--
 docs/app/index.js                             | 21 ++++---
 docs/{theme.scss => app/theme/_theme.scss}    |  2 +
 docs/app/theme/theme.js                       | 61 +++++++++++++++++++
 docs/package.json                             |  2 +-
 docs/webpack.config.development.js            |  5 +-
 docs/webpack.config.production.js             |  5 +-
 11 files changed, 96 insertions(+), 21 deletions(-)
 create mode 100644 docs/app/components/layout/main/button-theme.scss
 rename docs/{theme.scss => app/theme/_theme.scss} (83%)
 create mode 100644 docs/app/theme/theme.js

diff --git a/docs/app/components/_globals.scss b/docs/app/components/_globals.scss
index 2cfef2640..cfd472090 100644
--- a/docs/app/components/_globals.scss
+++ b/docs/app/components/_globals.scss
@@ -1,6 +1,5 @@
-$import-flex-attributes: true;
-
 @import "http://github.com/~react-toolbox/base";
+@import "http://github.com/theme/theme";
 
 $unit: 1rem;
 $color-primary-dark: $color-primary-dark;
diff --git a/docs/app/components/appbar/style.scss b/docs/app/components/appbar/style.scss
index fce7d795d..8e97ff23f 100644
--- a/docs/app/components/appbar/style.scss
+++ b/docs/app/components/appbar/style.scss
@@ -8,7 +8,6 @@
   flex-direction: row;
   align-items: flex-start;
   justify-content: flex-start;
-  background: $color-primary-dark;
   box-shadow: $appbar-shadow;
 }
 
diff --git a/docs/app/components/layout/main/button-theme.scss b/docs/app/components/layout/main/button-theme.scss
new file mode 100644
index 000000000..a2900e340
--- /dev/null
+++ b/docs/app/components/layout/main/button-theme.scss
@@ -0,0 +1,2 @@
+@import "http://github.com/globals";
+@import "http://github.com/~react-toolbox/button/theme";
diff --git a/docs/app/components/layout/main/index.js b/docs/app/components/layout/main/index.js
index 7f81cdf1a..7685e20f6 100644
--- a/docs/app/components/layout/main/index.js
+++ b/docs/app/components/layout/main/index.js
@@ -7,6 +7,7 @@ import Playground from './components/playground.js';
 import MainNavigation from './components/navigation.js';
 import BaseDocs from './modules/components.md';
 import components from './modules/components.js';
+import buttonTheme from './button-theme.scss';
 import style from './style';
 
 const LoadExampleButton = (props) => (
@@ -14,6 +15,7 @@ const LoadExampleButton = (props) => (
     accent
     icon='code'
     label="Load in playground"
+    theme={buttonTheme}
     onClick={props.onClick}
     raised
   />
diff --git a/docs/app/components/preview/index.js b/docs/app/components/preview/index.js
index e7b6cd492..e9b45aed9 100644
--- a/docs/app/components/preview/index.js
+++ b/docs/app/components/preview/index.js
@@ -1,7 +1,10 @@
+/*eslint-disable no-eval*/
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { ThemeProvider } from 'react-css-themr';
 import { transform } from 'babel-standalone';
 import * as ReactToolbox from 'react-toolbox';
+import theme from '../../theme/theme.js';
 import style from './style';
 
 const ERROR_TIMEOUT = 500;
@@ -70,11 +73,11 @@ const Preview = React.createClass({
     }
 
     try {
-      const compiledCode = this.compileCode();
-
-      /*eslint-disable no-eval*/
-      const Component = eval(compiledCode)(...scope);
-      ReactDOM.render(Component, mountNode);
+      ReactDOM.render(
+        <ThemeProvider theme={theme}>
+          {eval(this.compileCode())(...scope)}
+        </ThemeProvider>
+      , mountNode);
       if (this.state.error) {
         this.setState({error: null});
       }
diff --git a/docs/app/index.js b/docs/app/index.js
index 56dcdcb2d..8a4a14c65 100644
--- a/docs/app/index.js
+++ b/docs/app/index.js
@@ -1,20 +1,21 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { ThemeProvider } from 'react-css-themr';
 import { Router, Route, useRouterHistory } from 'react-router';
 import createHashHistory from 'history/lib/createHashHistory';
-
-import 'react-toolbox/commons';
-
+import theme from './theme/theme.js';
 import Home from './components/layout/home';
 import Install from './components/layout/install';
 import Main from './components/layout/main';
 
 ReactDOM.render((
-  <Router history={useRouterHistory(createHashHistory)({ queryKey: false })}>
-    <Route path="/" component={Home} />
-    <Route path="/install" component={Install} />
-    <Route path="/components" component={Main}>
-      <Route path=":component" />
-    </Route>
-  </Router>
+  <ThemeProvider theme={theme}>
+    <Router history={useRouterHistory(createHashHistory)({ queryKey: false })}>
+      <Route path="/" component={Home} />
+      <Route path="/install" component={Install} />
+      <Route path="/components" component={Main}>
+        <Route path=":component" />
+      </Route>
+    </Router>
+  </ThemeProvider>
 ), document.getElementById('app'));
diff --git a/docs/theme.scss b/docs/app/theme/_theme.scss
similarity index 83%
rename from docs/theme.scss
rename to docs/app/theme/_theme.scss
index 4eef11c78..96be0e6ba 100644
--- a/docs/theme.scss
+++ b/docs/app/theme/_theme.scss
@@ -1,3 +1,5 @@
+@import "http://github.com/~react-toolbox/colors"; // Import minimal colors
+
 $color-primary: $palette-indigo-500;
 $color-primary-dark: $palette-indigo-700;
 $color-primary-light: $palette-indigo-500;
diff --git a/docs/app/theme/theme.js b/docs/app/theme/theme.js
new file mode 100644
index 000000000..68c3ea1c6
--- /dev/null
+++ b/docs/app/theme/theme.js
@@ -0,0 +1,61 @@
+import 'react-toolbox/commons';
+
+import ToolboxAppBar from 'react-toolbox/app_bar/theme.scss';
+import ToolboxAutocomplete from 'react-toolbox/autocomplete/theme.scss';
+import ToolboxAvatar from 'react-toolbox/avatar/theme.scss';
+import ToolboxButton from 'react-toolbox/button/theme.scss';
+import ToolboxCard from 'react-toolbox/card/theme.scss';
+import ToolboxCheckbox from 'react-toolbox/checkbox/theme.scss';
+import ToolboxChip from 'react-toolbox/chip/theme.scss';
+import ToolboxDatePicker from 'react-toolbox/date_picker/theme.scss';
+import ToolboxDialog from 'react-toolbox/dialog/theme.scss';
+import ToolboxDrawer from 'react-toolbox/drawer/theme.scss';
+import ToolboxDropdown from 'react-toolbox/dropdown/theme.scss';
+import ToolboxInput from 'react-toolbox/input/theme.scss';
+import ToolboxLayout from 'react-toolbox/layout/theme.scss';
+import ToolboxLink from 'react-toolbox/link/theme.scss';
+import ToolboxList from 'react-toolbox/list/theme.scss';
+import ToolboxMenu from 'react-toolbox/menu/theme.scss';
+import ToolboxNavigation from 'react-toolbox/navigation/theme.scss';
+import ToolboxOverlay from 'react-toolbox/overlay/theme.scss';
+import ToolboxProgress from 'react-toolbox/progress_bar/theme.scss';
+import ToolboxRadio from 'react-toolbox/radio/theme.scss';
+import ToolboxRipple from 'react-toolbox/ripple/theme.scss';
+import ToolboxSlider from 'react-toolbox/slider/theme.scss';
+import ToolboxSnackbar from 'react-toolbox/snackbar/theme.scss';
+import ToolboxSwitch from 'react-toolbox/switch/theme.scss';
+import ToolboxTable from 'react-toolbox/table/theme.scss';
+import ToolboxTabs from 'react-toolbox/tabs/theme.scss';
+import ToolboxTimePicker from 'react-toolbox/time_picker/theme.scss';
+import ToolboxTooltip from 'react-toolbox/tooltip/theme.scss';
+
+export default {
+  ToolboxAppBar,
+  ToolboxAutocomplete,
+  ToolboxAvatar,
+  ToolboxButton,
+  ToolboxCard,
+  ToolboxCheckbox,
+  ToolboxChip,
+  ToolboxDatePicker,
+  ToolboxDialog,
+  ToolboxDrawer,
+  ToolboxDropdown,
+  ToolboxInput,
+  ToolboxLayout,
+  ToolboxLink,
+  ToolboxList,
+  ToolboxMenu,
+  ToolboxNavigation,
+  ToolboxOverlay,
+  ToolboxProgress,
+  ToolboxRadio,
+  ToolboxRipple,
+  ToolboxSlider,
+  ToolboxSnackbar,
+  ToolboxSwitch,
+  ToolboxTable,
+  ToolboxTabs,
+  ToolboxTimePicker,
+  ToolboxTooltip
+};
diff --git a/docs/package.json b/docs/package.json
index 21a3335f0..eafc34133 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -14,6 +14,7 @@
     "codemirror": "^5.14.2",
     "history": "^2.1.1",
     "react": "^15.0.2",
+    "react-css-themr": "^1.1.0",
     "react-dom": "^15.0.2",
     "react-router": "^2.4.0"
   },
@@ -45,7 +46,6 @@
     "redbox-react": "^1.2.4",
     "sass-loader": "^3.2.0",
     "style-loader": "^0.13.1",
-    "toolbox-loader": "0.0.3",
     "transfer-webpack-plugin": "^0.1.4",
     "webpack": "^1.13.0",
     "webpack-dev-middleware": "^1.6.1",
diff --git a/docs/webpack.config.development.js b/docs/webpack.config.development.js
index 906bf0bc7..7d4857f87 100644
--- a/docs/webpack.config.development.js
+++ b/docs/webpack.config.development.js
@@ -37,7 +37,7 @@ module.exports = {
         loader: 'babel'
       }, {
         test: /\.(scss|css)$/,
-        loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap!toolbox')
+        loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap')
       }, {
         test: /\.(txt)$/,
         loader: 'raw',
@@ -49,6 +49,9 @@ module.exports = {
     ]
   },
   postcss: [autoprefixer],
+  sassLoader: {
+    data: '@import "' + path.resolve(__dirname, 'app/theme/_theme.scss') + '";'
+  },
   plugins: [
     new ExtractTextPlugin('docs.css', { allChunks: true }),
     new TransferWebpackPlugin([{
diff --git a/docs/webpack.config.production.js b/docs/webpack.config.production.js
index 5f0442c32..1eda47694 100644
--- a/docs/webpack.config.production.js
+++ b/docs/webpack.config.production.js
@@ -33,7 +33,7 @@ module.exports = {
         loader: 'babel'
       }, {
         test: /\.(scss|css)$/,
-        loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass!toolbox')
+        loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass')
       }, {
         test: /\.(txt)$/,
         loader: 'raw',
@@ -45,6 +45,9 @@ module.exports = {
     ]
   },
   postcss: [autoprefixer],
+  sassLoader: {
+    data: '@import "' + path.resolve(__dirname, 'app/theme/_theme.scss') + '";'
+  },
   plugins: [
     new ExtractTextPlugin('docs.css', { allChunks: true }),
     new webpack.optimize.UglifyJsPlugin({

From 6ba69be723d1c6effd4ae3366bd809dd3c0223e2 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Fri, 27 May 2016 21:58:34 +0200
Subject: [PATCH 0571/1024] Remove defineTheme

---
 components/define-theme.js | 45 --------------------------------------
 spec/root.js               |  2 --
 spec/style.scss            |  2 +-
 spec/theme.js              |  7 +++---
 4 files changed, 5 insertions(+), 51 deletions(-)
 delete mode 100644 components/define-theme.js

diff --git a/components/define-theme.js b/components/define-theme.js
deleted file mode 100644
index 57ca5008e..000000000
--- a/components/define-theme.js
+++ /dev/null
@@ -1,45 +0,0 @@
-const DEPENDENCIES = {};
-
-export default function defineTheme (theme) {
-  return generateModifiers(theme)(theme);
-}
-
-function generateModifiers (components) {
-  return compose(Object.keys(components).map(function (component) {
-    return compose(getDependencies(component).map(function (dependency) {
-      return getModifier(component, dependency);
-    }));
-  }, idp));
-}
-
-function getDependencies (component) {
-  return DEPENDENCIES[component] || [];
-}
-
-function idp (x) {
-  return x;
-}
-
-
-function compose (fns) {
-  return fns.reduce(function (f, g) {
-    return function (x) {
-      return f(g(x));
-    };
-  }, idp);
-}
-
-function getModifier (component, dependency) {
-  return function dependencyThemeModifier (theme) {
-    return { ...theme, [dependency]: modifyClasses(theme[dependency], theme[component])
-    };
-  };
-}
-
-function modifyClasses (baseTheme = {}, dependentTheme) {
-  return Object.keys(baseTheme).reduce((result, baseKey) => (
-    dependentTheme[baseKey]
-      ? { ...result, [baseKey]: `${baseTheme[baseKey]} ${dependentTheme[baseKey]}` }
-      : result
-  ), baseTheme);
-}
diff --git a/spec/root.js b/spec/root.js
index ada21f7a2..b2925470f 100644
--- a/spec/root.js
+++ b/spec/root.js
@@ -2,7 +2,6 @@
 import React from 'react';
 import { ThemeProvider } from 'react-css-themr';
 import theme from './theme';
-
 import AppBar from '../components/app_bar';
 import Autocomplete from './components/autocomplete';
 import Avatar from './components/avatar';
@@ -28,7 +27,6 @@ import Switch from './components/switch';
 import Table from './components/table';
 import Tabs from './components/tabs';
 import Tooltip from './components/tooltip';
-
 import style from './style';
 
 const Root = () => (
diff --git a/spec/style.scss b/spec/style.scss
index 60208e2e2..301047ea5 100644
--- a/spec/style.scss
+++ b/spec/style.scss
@@ -1,4 +1,4 @@
-@import "http://github.com/components/commons";
+@import "http://github.com/components/base";
 @import "http://github.com/components/app_bar/config";
 @import "http://github.com/components/button/config";
 
diff --git a/spec/theme.js b/spec/theme.js
index 7b0390134..72c485709 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -1,4 +1,5 @@
-import defineTheme from '../components/define-theme';
+import '../components/commons.scss';
+
 import ToolboxAppBar from '../components/app_bar/theme.scss';
 import ToolboxAutocomplete from '../components/autocomplete/theme.scss';
 import ToolboxAvatar from '../components/avatar/theme.scss';
@@ -28,7 +29,7 @@ import ToolboxTabs from '../components/tabs/theme.scss';
 import ToolboxTimePicker from '../components/time_picker/theme.scss';
 import ToolboxTooltip from '../components/tooltip/theme.scss';
 
-export default defineTheme({
+export default {
   ToolboxAppBar,
   ToolboxAutocomplete,
   ToolboxAvatar,
@@ -57,4 +58,4 @@ export default defineTheme({
   ToolboxTabs,
   ToolboxTimePicker,
   ToolboxTooltip
-});
+};

From 63f760bd13a7f35314ee5898e1bc8724b8681649 Mon Sep 17 00:00:00 2001
From: Yotam Bar-On <tudmotu@gmail.com>
Date: Sat, 28 May 2016 16:06:37 +0300
Subject: [PATCH 0572/1024] Modify Button's display to be inline-flex

Text of ``label`` in ``<Button />`` is not aligned with the icon. This is because the ``<Button />`` has ``inline-block`` and not ``inline-flex``, so the ``align-items`` rule has no effect.
Changed the ``inline-block`` declaration into ``inline-flex``.
---
 components/button/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/button/style.scss b/components/button/style.scss
index a8731204a..d28978669 100644
--- a/components/button/style.scss
+++ b/components/button/style.scss
@@ -4,7 +4,7 @@
 %button {
   @include typo-button();
   position: relative;
-  display: inline-block;
+  display: inline-flex;
   height: $button-height;
   flex-direction: row;
   align-content: center;

From 6048bb72f48186d550cbcf4bd539d9c07406a11c Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 28 May 2016 15:37:10 +0200
Subject: [PATCH 0573/1024] Autoinjects for Button and IconButton

---
 components/button/Button.js     | 181 ++++++++++++++++----------------
 components/button/IconButton.js | 132 ++++++++++++-----------
 components/button/index.js      |  20 +++-
 components/font_icon/index.js   |   2 +-
 components/identifiers.js       |   2 +
 components/ripple/Ripple.js     |  11 +-
 components/ripple/index.js      |   5 +-
 spec/theme.js                   |   4 -
 8 files changed, 191 insertions(+), 166 deletions(-)
 create mode 100644 components/identifiers.js

diff --git a/components/button/Button.js b/components/button/Button.js
index 770d9909a..2b3048d69 100644
--- a/components/button/Button.js
+++ b/components/button/Button.js
@@ -1,103 +1,106 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
-import FontIcon from '../font_icon';
-import Ripple from '../ripple';
+import { BUTTON } from '../identifiers.js';
+import InjectFontIcon from '../font_icon/FontIcon.js';
+import rippleFactory from '../ripple/Ripple.js';
 
-class Button extends React.Component {
-  static propTypes = {
-    accent: React.PropTypes.bool,
-    children: React.PropTypes.node,
-    className: React.PropTypes.string,
-    disabled: React.PropTypes.bool,
-    flat: React.PropTypes.bool,
-    floating: React.PropTypes.bool,
-    href: React.PropTypes.string,
-    icon: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.element
-    ]),
-    inverse: React.PropTypes.bool,
-    label: React.PropTypes.string,
-    mini: React.PropTypes.bool,
-    neutral: React.PropTypes.bool,
-    onMouseLeave: React.PropTypes.func,
-    onMouseUp: React.PropTypes.func,
-    primary: React.PropTypes.bool,
-    raised: React.PropTypes.bool,
-    theme: React.PropTypes.shape({
-      accent: React.PropTypes.string.isRequired,
-      button: React.PropTypes.string.isRequired,
-      flat: React.PropTypes.string.isRequired,
-      floating: React.PropTypes.string.isRequired,
-      icon: React.PropTypes.string.isRequired,
-      inverse: React.PropTypes.string.isRequired,
-      mini: React.PropTypes.string.isRequired,
-      neutral: React.PropTypes.string.isRequired,
-      primary: React.PropTypes.string.isRequired,
-      raised: React.PropTypes.string.isRequired,
-      rippleWrapper: React.PropTypes.string.isRequired,
-      toggle: React.PropTypes.string.isRequired
-    }),
-    type: React.PropTypes.string
-  };
+const factory = (ripple, FontIcon) => {
+  class Button extends Component {
+    static propTypes = {
+      accent: PropTypes.bool,
+      children: PropTypes.node,
+      className: PropTypes.string,
+      disabled: PropTypes.bool,
+      flat: PropTypes.bool,
+      floating: PropTypes.bool,
+      href: PropTypes.string,
+      icon: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.element
+      ]),
+      inverse: PropTypes.bool,
+      label: PropTypes.string,
+      mini: PropTypes.bool,
+      neutral: PropTypes.bool,
+      onMouseLeave: PropTypes.func,
+      onMouseUp: PropTypes.func,
+      primary: PropTypes.bool,
+      raised: PropTypes.bool,
+      theme: PropTypes.shape({
+        accent: PropTypes.string,
+        button: PropTypes.string,
+        flat: PropTypes.string,
+        floating: PropTypes.string,
+        icon: PropTypes.string,
+        inverse: PropTypes.string,
+        mini: PropTypes.string,
+        neutral: PropTypes.string,
+        primary: PropTypes.string,
+        raised: PropTypes.string,
+        rippleWrapper: PropTypes.string,
+        toggle: PropTypes.string
+      }),
+      type: PropTypes.string
+    };
 
-  static defaultProps = {
-    accent: false,
-    className: '',
-    flat: false,
-    floating: false,
-    mini: false,
-    neutral: true,
-    primary: false,
-    raised: false
-  };
+    static defaultProps = {
+      accent: false,
+      className: '',
+      flat: false,
+      floating: false,
+      mini: false,
+      neutral: true,
+      primary: false,
+      raised: false
+    };
 
-  handleMouseUp = (event) => {
-    this.refs.button.blur();
-    if (this.props.onMouseUp) this.props.onMouseUp(event);
-  };
+    handleMouseUp = (event) => {
+      this.refs.button.blur();
+      if (this.props.onMouseUp) this.props.onMouseUp(event);
+    };
 
-  handleMouseLeave = (event) => {
-    this.refs.button.blur();
-    if (this.props.onMouseLeave) this.props.onMouseLeave(event);
-  };
+    handleMouseLeave = (event) => {
+      this.refs.button.blur();
+      if (this.props.onMouseLeave) this.props.onMouseLeave(event);
+    };
 
-  render () {
-    const { accent, children, className, flat, floating, href, icon,
-      inverse, label, mini, neutral, primary, theme, raised, ...others} = this.props;
-    const element = href ? 'a' : 'button';
-    const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
-    const shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : 'flat';
+    render () {
+      const { accent, children, className, flat, floating, href, icon,
+        inverse, label, mini, neutral, primary, theme, raised, ...others} = this.props;
+      const element = href ? 'a' : 'button';
+      const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
+      const shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : 'flat';
 
-    const classes = classnames(theme.button, [theme[shape]], {
-      [theme[level]]: neutral,
-      [theme.mini]: mini,
-      [theme.inverse]: inverse
-    }, className);
+      const classes = classnames(theme.button, [theme[shape]], {
+        [theme[level]]: neutral,
+        [theme.mini]: mini,
+        [theme.inverse]: inverse
+      }, className);
 
-    const props = {
-      ...others,
-      href,
-      ref: 'button',
-      className: classes,
-      disabled: this.props.disabled,
-      onMouseUp: this.handleMouseUp,
-      onMouseLeave: this.handleMouseLeave,
-      'data-react-toolbox': 'button'
-    };
+      const props = {
+        ...others,
+        href,
+        ref: 'button',
+        className: classes,
+        disabled: this.props.disabled,
+        onMouseUp: this.handleMouseUp,
+        onMouseLeave: this.handleMouseLeave,
+        'data-react-toolbox': 'button'
+      };
 
-    return React.createElement(element, props,
-      icon ? <FontIcon className={theme.icon} value={icon}/> : null,
-      label,
-      children
-    );
+      return React.createElement(element, props,
+        icon ? <FontIcon className={theme.icon} value={icon}/> : null,
+        label,
+        children
+      );
+    }
   }
-}
 
-const RippledButton = themr('ToolboxButton')(Ripple({centered: false})(Button));
-const RawButton = themr('ToolboxButton')(Button);
+  return ripple(Button);
+};
 
-export default RippledButton;
-export { RawButton as RawButton };
+const Button = factory(rippleFactory({ centered: false }), InjectFontIcon);
+export default themr(BUTTON)(Button);
+export { factory as buttonFactory };
 export { Button };
diff --git a/components/button/IconButton.js b/components/button/IconButton.js
index e448960aa..a7d4da8c9 100644
--- a/components/button/IconButton.js
+++ b/components/button/IconButton.js
@@ -1,74 +1,80 @@
-import React from 'react';
+import React, { Component } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
-import FontIcon from '../font_icon';
-import Ripple from '../ripple';
+import { BUTTON } from '../identifiers.js';
+import InjectFontIcon from '../font_icon/FontIcon.js';
+import rippleFactory from '../ripple/Ripple.js';
 
-class IconButton extends React.Component {
-  static propTypes = {
-    accent: React.PropTypes.bool,
-    children: React.PropTypes.node,
-    className: React.PropTypes.string,
-    disabled: React.PropTypes.bool,
-    href: React.PropTypes.string,
-    icon: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.element
-    ]),
-    inverse: React.PropTypes.bool,
-    neutral: React.PropTypes.bool,
-    onMouseLeave: React.PropTypes.func,
-    onMouseUp: React.PropTypes.func,
-    primary: React.PropTypes.bool,
-    theme: React.PropTypes.object,
-    type: React.PropTypes.string
-  };
+const factory = (ripple, FontIcon) => {
+  class IconButton extends Component {
+    static propTypes = {
+      accent: React.PropTypes.bool,
+      children: React.PropTypes.node,
+      className: React.PropTypes.string,
+      disabled: React.PropTypes.bool,
+      href: React.PropTypes.string,
+      icon: React.PropTypes.oneOfType([
+        React.PropTypes.string,
+        React.PropTypes.element
+      ]),
+      inverse: React.PropTypes.bool,
+      neutral: React.PropTypes.bool,
+      onMouseLeave: React.PropTypes.func,
+      onMouseUp: React.PropTypes.func,
+      primary: React.PropTypes.bool,
+      theme: React.PropTypes.object,
+      type: React.PropTypes.string
+    };
 
-  static defaultProps = {
-    accent: false,
-    className: '',
-    neutral: true,
-    primary: false
-  };
+    static defaultProps = {
+      accent: false,
+      className: '',
+      neutral: true,
+      primary: false
+    };
 
-  handleMouseUp = (event) => {
-    this.refs.button.blur();
-    if (this.props.onMouseUp) this.props.onMouseUp(event);
-  };
+    handleMouseUp = (event) => {
+      this.refs.button.blur();
+      if (this.props.onMouseUp) this.props.onMouseUp(event);
+    };
 
-  handleMouseLeave = (event) => {
-    this.refs.button.blur();
-    if (this.props.onMouseLeave) this.props.onMouseLeave(event);
-  };
+    handleMouseLeave = (event) => {
+      this.refs.button.blur();
+      if (this.props.onMouseLeave) this.props.onMouseLeave(event);
+    };
 
-  render () {
-    const {accent, children, className, href, icon, inverse, neutral,
-      primary, theme, ...others} = this.props;
-    const element = href ? 'a' : 'button';
-    const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
-    const classes = classnames([theme.toggle], {
-      [theme[level]]: neutral,
-      [theme.inverse]: inverse
-    }, className);
+    render () {
+      const {accent, children, className, href, icon, inverse, neutral,
+        primary, theme, ...others} = this.props;
+      const element = href ? 'a' : 'button';
+      const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
+      const classes = classnames([theme.toggle], {
+        [theme[level]]: neutral,
+        [theme.inverse]: inverse
+      }, className);
 
-    const props = {
-      ...others,
-      href,
-      ref: 'button',
-      className: classes,
-      disabled: this.props.disabled,
-      onMouseUp: this.handleMouseUp,
-      onMouseLeave: this.handleMouseLeave,
-      'data-react-toolbox': 'button'
-    };
+      const props = {
+        ...others,
+        href,
+        ref: 'button',
+        className: classes,
+        disabled: this.props.disabled,
+        onMouseUp: this.handleMouseUp,
+        onMouseLeave: this.handleMouseLeave,
+        'data-react-toolbox': 'button'
+      };
 
-    return React.createElement(element, props,
-      icon ? <FontIcon className={theme.icon} value={icon}/> : null,
-      children
-    );
+      return React.createElement(element, props,
+        icon ? <FontIcon className={theme.icon} value={icon}/> : null,
+        children
+      );
+    }
   }
-}
 
-const RawIconButton = themr('ToolboxButton')(IconButton);
-export default themr('ToolboxButton')(Ripple({centered: true})(IconButton));
-export { RawIconButton as RawIconButton };
+  return ripple(IconButton);
+};
+
+const IconButton = factory(rippleFactory({centered: true}), InjectFontIcon);
+export default themr(BUTTON)(IconButton);
+export { factory as iconButtonFactory };
+export { IconButton };
diff --git a/components/button/index.js b/components/button/index.js
index 5ae0e49d9..b2767af2e 100644
--- a/components/button/index.js
+++ b/components/button/index.js
@@ -1,4 +1,16 @@
-import Button from './Button';
-export default Button;
-export { Button };
-export IconButton from './IconButton';
+import { BUTTON } from '../identifiers.js';
+import { themr } from 'react-css-themr';
+import { buttonFactory } from './Button.js';
+import { iconButtonFactory } from './IconButton.js';
+import FontIcon from '../font_icon/FontIcon.js';
+import themedRippleFactory from '../ripple';
+import theme from './theme.scss';
+
+const Button = buttonFactory(themedRippleFactory({ centered: false }), FontIcon);
+const IconButton = iconButtonFactory(themedRippleFactory({centered: true}), FontIcon);
+const ThemedButton = themr(BUTTON, theme)(Button);
+const ThemedIconButton = themr(BUTTON, theme)(IconButton);
+
+export default ThemedButton;
+export { ThemedButton as Button };
+export { ThemedIconButton as IconButton };
diff --git a/components/font_icon/index.js b/components/font_icon/index.js
index 29e818f60..9949f206d 100644
--- a/components/font_icon/index.js
+++ b/components/font_icon/index.js
@@ -1 +1 @@
-export default from './FontIcon';
+export default from './FontIcon.js';
diff --git a/components/identifiers.js b/components/identifiers.js
new file mode 100644
index 000000000..23226063f
--- /dev/null
+++ b/components/identifiers.js
@@ -0,0 +1,2 @@
+export const BUTTON = 'RTButton';
+export const RIPPLE = 'RTRipple';
diff --git a/components/ripple/Ripple.js b/components/ripple/Ripple.js
index be2923eb5..0b3d28351 100644
--- a/components/ripple/Ripple.js
+++ b/components/ripple/Ripple.js
@@ -2,20 +2,23 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
+import { RIPPLE } from '../identifiers.js';
 import events from '../utils/events';
 import prefixer from '../utils/prefixer';
 
 const defaults = {
   centered: false,
   className: '',
-  spread: 2
+  spread: 2,
+  theme: {}
 };
 
-const Ripple = (options = {}) => {
+const rippleFactory = (options = {}) => {
   const {
     centered: defaultCentered,
     className: defaultClassName,
     spread: defaultSpread,
+    theme: defaultTheme,
     ...props
   } = {...defaults, ...options};
 
@@ -139,8 +142,8 @@ const Ripple = (options = {}) => {
       }
     }
 
-    return themr('ToolboxRipple')(RippledComponent);
+    return themr(RIPPLE, defaultTheme)(RippledComponent);
   };
 };
 
-export default Ripple;
+export default rippleFactory;
diff --git a/components/ripple/index.js b/components/ripple/index.js
index b065179d2..7299f9fb3 100644
--- a/components/ripple/index.js
+++ b/components/ripple/index.js
@@ -1 +1,4 @@
-export default from './Ripple';
+import rippleFactory from './Ripple.js';
+import theme from './theme.scss';
+
+export default (options) => rippleFactory({ ...options, theme });
diff --git a/spec/theme.js b/spec/theme.js
index 72c485709..e4b1e0e2a 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -3,7 +3,6 @@ import '../components/commons.scss';
 import ToolboxAppBar from '../components/app_bar/theme.scss';
 import ToolboxAutocomplete from '../components/autocomplete/theme.scss';
 import ToolboxAvatar from '../components/avatar/theme.scss';
-import ToolboxButton from '../components/button/theme.scss';
 import ToolboxCard from '../components/card/theme.scss';
 import ToolboxCheckbox from '../components/checkbox/theme.scss';
 import ToolboxChip from '../components/chip/theme.scss';
@@ -20,7 +19,6 @@ import ToolboxNavigation from '../components/navigation/theme.scss';
 import ToolboxOverlay from '../components/overlay/theme.scss';
 import ToolboxProgress from '../components/progress_bar/theme.scss';
 import ToolboxRadio from '../components/radio/theme.scss';
-import ToolboxRipple from '../components/ripple/theme.scss';
 import ToolboxSlider from '../components/slider/theme.scss';
 import ToolboxSnackbar from '../components/snackbar/theme.scss';
 import ToolboxSwitch from '../components/switch/theme.scss';
@@ -33,7 +31,6 @@ export default {
   ToolboxAppBar,
   ToolboxAutocomplete,
   ToolboxAvatar,
-  ToolboxButton,
   ToolboxCard,
   ToolboxCheckbox,
   ToolboxChip,
@@ -50,7 +47,6 @@ export default {
   ToolboxOverlay,
   ToolboxProgress,
   ToolboxRadio,
-  ToolboxRipple,
   ToolboxSlider,
   ToolboxSnackbar,
   ToolboxSwitch,

From d5834e0372a07bae849be3cef6b07d0024bb7f47 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 28 May 2016 15:38:23 +0200
Subject: [PATCH 0574/1024] Full extension imports in animations

---
 components/animations/index.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/animations/index.js b/components/animations/index.js
index c77b378e3..3ab27eca0 100644
--- a/components/animations/index.js
+++ b/components/animations/index.js
@@ -1,4 +1,4 @@
-export SlideLeft from './slide-left';
-export SlideRight from './slide-right';
-export ZoomIn from './zoom-in';
-export ZoomOut from './zoom-out';
+export SlideLeft from './slide-left.scss';
+export SlideRight from './slide-right.scss';
+export ZoomIn from './zoom-in.scss';
+export ZoomOut from './zoom-out.scss';

From f10748e4a45c4109e5544a457bd9979c0cb24396 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 28 May 2016 17:00:42 +0200
Subject: [PATCH 0575/1024] Autoinject style for AppBar

---
 components/app_bar/AppBar.js | 22 ++++++++++++----------
 components/app_bar/index.js  | 10 +++++++++-
 components/app_bar/readme.md | 15 +++++++--------
 components/identifiers.js    |  1 +
 spec/theme.js                |  2 --
 5 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/components/app_bar/AppBar.js b/components/app_bar/AppBar.js
index 364da06c3..bfbef63b0 100644
--- a/components/app_bar/AppBar.js
+++ b/components/app_bar/AppBar.js
@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
+import { APP_BAR } from '../identifiers.js';
 
 const AppBar = ({ theme, ...props }) => {
   const className = classnames(theme.appBar, {
@@ -16,14 +17,14 @@ const AppBar = ({ theme, ...props }) => {
 };
 
 AppBar.propTypes = {
-  children: React.PropTypes.node,
-  className: React.PropTypes.string,
-  fixed: React.PropTypes.bool,
-  flat: React.PropTypes.bool,
-  theme: React.PropTypes.shape({
-    appBar: React.PropTypes.string.isRequired,
-    fixed: React.PropTypes.string.isRequired,
-    flat: React.PropTypes.string.isRequired
+  children: PropTypes.node,
+  className: PropTypes.string,
+  fixed: PropTypes.bool,
+  flat: PropTypes.bool,
+  theme: PropTypes.shape({
+    appBar: PropTypes.string,
+    fixed: PropTypes.string,
+    flat: PropTypes.string
   })
 };
 
@@ -33,4 +34,5 @@ AppBar.defaultProps = {
   flat: false
 };
 
-export default themr('ToolboxAppBar')(AppBar);
+export default themr(APP_BAR)(AppBar);
+export { AppBar };
diff --git a/components/app_bar/index.js b/components/app_bar/index.js
index 12719fb26..998ed5a7d 100644
--- a/components/app_bar/index.js
+++ b/components/app_bar/index.js
@@ -1 +1,9 @@
-export default from './AppBar';
+import { themr } from 'react-css-themr';
+import { AppBar } from './AppBar.js';
+import { APP_BAR } from '../identifiers.js';
+import theme from './theme.scss';
+
+const ThemedAppBar = themr(APP_BAR, theme)(AppBar);
+
+export default ThemedAppBar;
+export { ThemedAppBar as AppBar };
diff --git a/components/app_bar/readme.md b/components/app_bar/readme.md
index 6012c6a3f..24eea0e8b 100644
--- a/components/app_bar/readme.md
+++ b/components/app_bar/readme.md
@@ -4,16 +4,17 @@ The app bar is a special kind of toolbar that’s used for branding, navigation,
 
 ```jsx
 import AppBar from 'react-toolbox/lib/app_bar';
-import theme from 'react-toolbox/lib/app_bar/theme';
 
 const AppBarTest = () => (
-  <AppBar theme={theme} fixed flat>
+  <AppBar fixed flat>
     <a href="http://github.com/home">React Toolbox Docs</a>
     <Navigation />
   </AppBar>
 );
 ```
 
+If you want to provide a theme via context, the component key is `RTAppBar`.
+
 ## Properties
 
 | Name          | Type    | Default  | Description|
@@ -23,12 +24,10 @@ const AppBarTest = () => (
 | `flat`      | `Bool`    | `false`  | If true, the AppBar shows a shadow.|
 | `theme`     | `Object`  | `null`   | Classnames object defining the component style.|
 
-## Theming
-
-You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxAppBar`, it should implement the following interface:
+## Theme
 
 | Name     | Description|
 |:---------|:-----------|
-| `appBar` | Root class.|
-| `fixed`  | Implemented when the app bar is fixed.|
-| `flat`   | Implemented when the app bar is flat.|
+| `appBar` | Used for the component root element.|
+| `fixed`  | Added to the root element when the app bar is fixed.|
+| `flat`   | Added to the root element when the app bar is flat.|
diff --git a/components/identifiers.js b/components/identifiers.js
index 23226063f..00460a56b 100644
--- a/components/identifiers.js
+++ b/components/identifiers.js
@@ -1,2 +1,3 @@
+export const APP_BAR = 'RTAppBar';
 export const BUTTON = 'RTButton';
 export const RIPPLE = 'RTRipple';
diff --git a/spec/theme.js b/spec/theme.js
index e4b1e0e2a..e73ccd7cb 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -1,6 +1,5 @@
 import '../components/commons.scss';
 
-import ToolboxAppBar from '../components/app_bar/theme.scss';
 import ToolboxAutocomplete from '../components/autocomplete/theme.scss';
 import ToolboxAvatar from '../components/avatar/theme.scss';
 import ToolboxCard from '../components/card/theme.scss';
@@ -28,7 +27,6 @@ import ToolboxTimePicker from '../components/time_picker/theme.scss';
 import ToolboxTooltip from '../components/tooltip/theme.scss';
 
 export default {
-  ToolboxAppBar,
   ToolboxAutocomplete,
   ToolboxAvatar,
   ToolboxCard,

From 85e248c0c472c8734b7ba141bb7496e140ec9894 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 28 May 2016 17:44:29 +0200
Subject: [PATCH 0576/1024] Autoinject Autocomplete, Avatar, Chip and Input

---
 components/autocomplete/Autocomplete.js | 466 ++++++++++++------------
 components/autocomplete/index.js        |  13 +-
 components/avatar/Avatar.js             |  50 +--
 components/avatar/index.js              |  14 +-
 components/chip/Chip.js                 |  98 ++---
 components/chip/index.js                |  14 +-
 components/identifiers.js               |   4 +
 components/input/Input.js               | 203 ++++++-----
 components/input/index.js               |  12 +-
 spec/theme.js                           |   8 -
 10 files changed, 473 insertions(+), 409 deletions(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index e4fc4fc31..94924823b 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -2,9 +2,10 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
-import Input from '../input';
-import events from '../utils/events';
-import Chip from '../chip';
+import { AUTOCOMPLETE } from '../identifiers.js';
+import InjectChip from '../chip/Chip.js';
+import InjectInput from '../input/Input.js';
+import events from '../utils/events.js';
 
 const POSITION = {
  AUTO: 'auto',
@@ -12,260 +13,267 @@ const POSITION = {
  UP: 'up'
 };
 
-class Autocomplete extends React.Component {
- static propTypes = {
-   className: React.PropTypes.string,
-   direction: React.PropTypes.oneOf(['auto', 'up', 'down']),
-   disabled: React.PropTypes.bool,
-   error: React.PropTypes.string,
-   label: React.PropTypes.string,
-   multiple: React.PropTypes.bool,
-   onChange: React.PropTypes.func,
-   selectedPosition: React.PropTypes.oneOf(['above', 'below']),
-   showSuggestionsWhenValueIsSet: React.PropTypes.bool,
-   source: React.PropTypes.any,
-   theme: React.PropTypes.shape({
-     active: React.PropTypes.string.isRequired,
-     autocomplete: React.PropTypes.string.isRequired,
-     focus: React.PropTypes.string.isRequired,
-     input: React.PropTypes.string.isRequired,
-     label: React.PropTypes.string.isRequired,
-     suggestion: React.PropTypes.string.isRequired,
-     suggestions: React.PropTypes.string.isRequired,
-     up: React.PropTypes.string.isRequired,
-     value: React.PropTypes.string.isRequired,
-     values: React.PropTypes.string.isRequired
-   }),
-   value: React.PropTypes.any
- };
-
- static defaultProps = {
-   className: '',
-   direction: 'auto',
-   selectedPosition: 'above',
-   multiple: true,
-   showSuggestionsWhenValueIsSet: false,
-   source: {}
- };
-
- state = {
-   direction: this.props.direction,
-   focus: false,
-   showAllSuggestions: this.props.showSuggestionsWhenValueIsSet,
-   query: this.query(this.props.value)
- };
-
- componentWillReceiveProps (nextProps) {
-   if (!this.props.multiple) {
-     this.setState({query: nextProps.value});
-   }
- }
-
- shouldComponentUpdate (nextProps, nextState) {
-   if (!this.state.focus && nextState.focus && this.props.direction === POSITION.AUTO) {
-     const direction = this.calculateDirection();
-     if (this.state.direction !== direction) {
-       this.setState({ direction });
-       return false;
+const factory = (Chip, Input) => {
+  class Autocomplete extends React.Component {
+   static propTypes = {
+     className: React.PropTypes.string,
+     direction: React.PropTypes.oneOf(['auto', 'up', 'down']),
+     disabled: React.PropTypes.bool,
+     error: React.PropTypes.string,
+     label: React.PropTypes.string,
+     multiple: React.PropTypes.bool,
+     onChange: React.PropTypes.func,
+     selectedPosition: React.PropTypes.oneOf(['above', 'below']),
+     showSuggestionsWhenValueIsSet: React.PropTypes.bool,
+     source: React.PropTypes.any,
+     theme: React.PropTypes.shape({
+       active: React.PropTypes.string.isRequired,
+       autocomplete: React.PropTypes.string.isRequired,
+       focus: React.PropTypes.string.isRequired,
+       input: React.PropTypes.string.isRequired,
+       label: React.PropTypes.string.isRequired,
+       suggestion: React.PropTypes.string.isRequired,
+       suggestions: React.PropTypes.string.isRequired,
+       up: React.PropTypes.string.isRequired,
+       value: React.PropTypes.string.isRequired,
+       values: React.PropTypes.string.isRequired
+     }),
+     value: React.PropTypes.any
+   };
+
+   static defaultProps = {
+     className: '',
+     direction: 'auto',
+     selectedPosition: 'above',
+     multiple: true,
+     showSuggestionsWhenValueIsSet: false,
+     source: {}
+   };
+
+   state = {
+     direction: this.props.direction,
+     focus: false,
+     showAllSuggestions: this.props.showSuggestionsWhenValueIsSet,
+     query: this.query(this.props.value)
+   };
+
+   componentWillReceiveProps (nextProps) {
+     if (!this.props.multiple) {
+       this.setState({query: nextProps.value});
      }
    }
-   return true;
- }
-
- handleChange = (keys, event) => {
-   const key = this.props.multiple ? keys : keys[0];
-   const query = this.query(key);
-   if (this.props.onChange) this.props.onChange(key, event);
-   this.setState(
-     {focus: false, query, showAllSuggestions: this.props.showSuggestionsWhenValueIsSet},
-     () => { ReactDOM.findDOMNode(this).querySelector('input').blur(); }
-   );
- };
-
- handleQueryBlur = () => {
-   if (this.state.focus) this.setState({focus: false});
- };
-
- handleQueryChange = (value) => {
-   this.setState({query: value, showAllSuggestions: false});
- };
-
- handleQueryFocus = () => {
-   this.refs.suggestions.scrollTop = 0;
-   this.setState({active: '', focus: true});
- };
-
- handleQueryKeyDown = (event) => {
-   // Clear query when pressing backspace and showing all suggestions.
-   const shouldClearQuery = (
-     event.which === 8
-     && this.props.showSuggestionsWhenValueIsSet
-     && this.state.showAllSuggestions
-   );
-   if (shouldClearQuery) {
-     this.setState({query: ''});
+
+   shouldComponentUpdate (nextProps, nextState) {
+     if (!this.state.focus && nextState.focus && this.props.direction === POSITION.AUTO) {
+       const direction = this.calculateDirection();
+       if (this.state.direction !== direction) {
+         this.setState({ direction });
+         return false;
+       }
+     }
+     return true;
    }
- };
-
- handleQueryKeyUp = (event) => {
-   if (event.which === 13 && this.state.active) this.select(this.state.active, event);
-   if (event.which === 27) ReactDOM.findDOMNode(this).querySelector('input').blur();
-   if ([40, 38].indexOf(event.which) !== -1) {
-     const suggestionsKeys = [...this.suggestions().keys()];
-     let index = suggestionsKeys.indexOf(this.state.active) + (event.which === 40 ? +1 : -1);
-     if (index < 0) index = suggestionsKeys.length - 1;
-     if (index >= suggestionsKeys.length) index = 0;
-     this.setState({active: suggestionsKeys[index]});
+
+   handleChange = (keys, event) => {
+     const key = this.props.multiple ? keys : keys[0];
+     const query = this.query(key);
+     if (this.props.onChange) this.props.onChange(key, event);
+     this.setState(
+       {focus: false, query, showAllSuggestions: this.props.showSuggestionsWhenValueIsSet},
+       () => { ReactDOM.findDOMNode(this).querySelector('input').blur(); }
+     );
+   };
+
+   handleQueryBlur = () => {
+     if (this.state.focus) this.setState({focus: false});
+   };
+
+   handleQueryChange = (value) => {
+     this.setState({query: value, showAllSuggestions: false});
+   };
+
+   handleQueryFocus = () => {
+     this.refs.suggestions.scrollTop = 0;
+     this.setState({active: '', focus: true});
+   };
+
+   handleQueryKeyDown = (event) => {
+     // Clear query when pressing backspace and showing all suggestions.
+     const shouldClearQuery = (
+       event.which === 8
+       && this.props.showSuggestionsWhenValueIsSet
+       && this.state.showAllSuggestions
+     );
+     if (shouldClearQuery) {
+       this.setState({query: ''});
+     }
+   };
+
+   handleQueryKeyUp = (event) => {
+     if (event.which === 13 && this.state.active) this.select(this.state.active, event);
+     if (event.which === 27) ReactDOM.findDOMNode(this).querySelector('input').blur();
+     if ([40, 38].indexOf(event.which) !== -1) {
+       const suggestionsKeys = [...this.suggestions().keys()];
+       let index = suggestionsKeys.indexOf(this.state.active) + (event.which === 40 ? +1 : -1);
+       if (index < 0) index = suggestionsKeys.length - 1;
+       if (index >= suggestionsKeys.length) index = 0;
+       this.setState({active: suggestionsKeys[index]});
+     }
+   };
+
+   handleSuggestionHover = (key) => {
+     this.setState({active: key});
+   };
+
+   calculateDirection () {
+     if (this.props.direction === 'auto') {
+       const client = ReactDOM.findDOMNode(this.refs.input).getBoundingClientRect();
+       const screen_height = window.innerHeight || document.documentElement.offsetHeight;
+       const up = client.top > ((screen_height / 2) + client.height);
+       return up ? 'up' : 'down';
+     } else {
+       return this.props.direction;
+     }
    }
- };
-
- handleSuggestionHover = (key) => {
-   this.setState({active: key});
- };
-
- calculateDirection () {
-   if (this.props.direction === 'auto') {
-     const client = ReactDOM.findDOMNode(this.refs.input).getBoundingClientRect();
-     const screen_height = window.innerHeight || document.documentElement.offsetHeight;
-     const up = client.top > ((screen_height / 2) + client.height);
-     return up ? 'up' : 'down';
-   } else {
-     return this.props.direction;
+
+   query (key) {
+     return !this.props.multiple && key ? this.source().get(key) : '';
    }
- }
-
- query (key) {
-   return !this.props.multiple && key ? this.source().get(key) : '';
- }
-
- suggestions () {
-   let suggest = new Map();
-   const query = this.state.query.toLowerCase().trim() || '';
-   const values = this.values();
-   const source = this.source();
-
-   // Suggest any non-set value which matches the query
-   if (this.props.multiple) {
-     for (const [key, value] of source) {
-       if (!values.has(key) && value.toLowerCase().trim().startsWith(query)) {
-         suggest.set(key, value);
+
+   suggestions () {
+     let suggest = new Map();
+     const query = this.state.query.toLowerCase().trim() || '';
+     const values = this.values();
+     const source = this.source();
+
+     // Suggest any non-set value which matches the query
+     if (this.props.multiple) {
+       for (const [key, value] of source) {
+         if (!values.has(key) && value.toLowerCase().trim().startsWith(query)) {
+           suggest.set(key, value);
+         }
        }
-     }
 
-   // When multiple is false, suggest any value which matches the query if showAllSuggestions is false
-   } else if (query && !this.state.showAllSuggestions) {
-     for (const [key, value] of source) {
-       if (value.toLowerCase().trim().startsWith(query)) {
-         suggest.set(key, value);
+     // When multiple is false, suggest any value which matches the query if showAllSuggestions is false
+     } else if (query && !this.state.showAllSuggestions) {
+       for (const [key, value] of source) {
+         if (value.toLowerCase().trim().startsWith(query)) {
+           suggest.set(key, value);
+         }
        }
+
+     // When multiple is false, suggest all values when showAllSuggestions is true
+     } else {
+       suggest = source;
      }
 
-   // When multiple is false, suggest all values when showAllSuggestions is true
-   } else {
-     suggest = source;
+     return suggest;
    }
 
-   return suggest;
- }
+   source () {
+     const { source: src } = this.props;
+     if (src.hasOwnProperty('length')) {
+       return new Map(src.map((item) => Array.isArray(item) ? [...item] : [item, item]));
+     } else {
+       return new Map(Object.keys(src).map((key) => [key, src[key]]));
+     }
+   }
 
- source () {
-   const { source: src } = this.props;
-   if (src.hasOwnProperty('length')) {
-     return new Map(src.map((item) => Array.isArray(item) ? [...item] : [item, item]));
-   } else {
-     return new Map(Object.keys(src).map((key) => [key, src[key]]));
+   values () {
+     const valueMap = new Map();
+     const vals = this.props.multiple ? this.props.value : [this.props.value];
+     for (const [k, v] of this.source()) {
+       if (vals.indexOf(k) !== -1) valueMap.set(k, v);
+     }
+     return valueMap;
    }
- }
 
- values () {
-   const valueMap = new Map();
-   const vals = this.props.multiple ? this.props.value : [this.props.value];
-   for (const [k, v] of this.source()) {
-     if (vals.indexOf(k) !== -1) valueMap.set(k, v);
+   select (key, event) {
+     events.pauseEvent(event);
+     const values = this.values(this.props.value);
+     this.handleChange([key, ...values.keys()], event);
    }
-   return valueMap;
- }
 
- select (key, event) {
-   events.pauseEvent(event);
-   const values = this.values(this.props.value);
-   this.handleChange([key, ...values.keys()], event);
- }
+   unselect (key, event) {
+     if (!this.props.disabled) {
+       const values = this.values(this.props.value);
+       values.delete(key);
+       this.handleChange([...values.keys()], event);
+     }
+   }
 
- unselect (key, event) {
-   if (!this.props.disabled) {
-     const values = this.values(this.props.value);
-     values.delete(key);
-     this.handleChange([...values.keys()], event);
+   renderSelected () {
+     if (this.props.multiple) {
+       const selectedItems = [...this.values()].map(([key, value]) => {
+         return (
+           <Chip
+             key={key}
+             className={this.props.theme.value}
+             deletable
+             onDeleteClick={this.unselect.bind(this, key)}
+           >
+             {value}
+           </Chip>
+         );
+       });
+
+       return <ul className={this.props.theme.values}>{selectedItems}</ul>;
+     }
    }
- }
 
- renderSelected () {
-   if (this.props.multiple) {
-     const selectedItems = [...this.values()].map(([key, value]) => {
+   renderSuggestions () {
+     const { theme } = this.props;
+     const suggestions = [...this.suggestions()].map(([key, value]) => {
+       const className = classnames(theme.suggestion, {[theme.active]: this.state.active === key});
        return (
-         <Chip
+         <li
            key={key}
-           className={this.props.theme.value}
-           deletable
-           onDeleteClick={this.unselect.bind(this, key)}
+           className={className}
+           onMouseDown={this.select.bind(this, key)}
+           onMouseOver={this.handleSuggestionHover.bind(this, key)}
          >
            {value}
-         </Chip>
+         </li>
        );
      });
 
-     return <ul className={this.props.theme.values}>{selectedItems}</ul>;
+     const className = classnames(theme.suggestions, {[theme.up]: this.state.direction === 'up'});
+     return <ul ref='suggestions' className={className}>{suggestions}</ul>;
    }
- }
 
- renderSuggestions () {
-   const { theme } = this.props;
-   const suggestions = [...this.suggestions()].map(([key, value]) => {
-     const className = classnames(theme.suggestion, {[theme.active]: this.state.active === key});
+   render () {
+     const {error, label, theme, ...other} = this.props;
+     const className = classnames(theme.autocomplete, {
+       [theme.focus]: this.state.focus
+     }, this.props.className);
+
      return (
-       <li
-         key={key}
-         className={className}
-         onMouseDown={this.select.bind(this, key)}
-         onMouseOver={this.handleSuggestionHover.bind(this, key)}
-       >
-         {value}
-       </li>
+       <div data-react-toolbox='autocomplete' className={className}>
+         {this.props.selectedPosition === 'above' ? this.renderSelected() : null}
+         <Input
+           {...other}
+           ref='input'
+           className={theme.input}
+           error={error}
+           label={label}
+           onBlur={this.handleQueryBlur}
+           onChange={this.handleQueryChange}
+           onFocus={this.handleQueryFocus}
+           onKeyDown={this.handleQueryKeyDown}
+           onKeyUp={this.handleQueryKeyUp}
+           value={this.state.query}
+         />
+         {this.renderSuggestions()}
+         {this.props.selectedPosition === 'below' ? this.renderSelected() : null}
+       </div>
      );
-   });
-
-   const className = classnames(theme.suggestions, {[theme.up]: this.state.direction === 'up'});
-   return <ul ref='suggestions' className={className}>{suggestions}</ul>;
- }
-
- render () {
-   const {error, label, theme, ...other} = this.props;
-   const className = classnames(theme.autocomplete, {
-     [theme.focus]: this.state.focus
-   }, this.props.className);
-
-   return (
-     <div data-react-toolbox='autocomplete' className={className}>
-       {this.props.selectedPosition === 'above' ? this.renderSelected() : null}
-       <Input
-         {...other}
-         ref='input'
-         className={theme.input}
-         error={error}
-         label={label}
-         onBlur={this.handleQueryBlur}
-         onChange={this.handleQueryChange}
-         onFocus={this.handleQueryFocus}
-         onKeyDown={this.handleQueryKeyDown}
-         onKeyUp={this.handleQueryKeyUp}
-         value={this.state.query}
-       />
-       {this.renderSuggestions()}
-       {this.props.selectedPosition === 'below' ? this.renderSelected() : null}
-     </div>
-   );
- }
-}
-
-export default themr('ToolboxAutocomplete')(Autocomplete);
+   }
+  }
+
+  return Autocomplete;
+};
+
+const Autocomplete = factory(InjectChip, InjectInput);
+export default themr(AUTOCOMPLETE)(Autocomplete);
+export { factory as autocompleteFactory };
+export { Autocomplete };
diff --git a/components/autocomplete/index.js b/components/autocomplete/index.js
index 63f423cf7..fce2d72dc 100644
--- a/components/autocomplete/index.js
+++ b/components/autocomplete/index.js
@@ -1 +1,12 @@
-export default from './Autocomplete';
+import { AUTOCOMPLETE } from '../identifiers.js';
+import { themr } from 'react-css-themr';
+import { autocompleteFactory } from './Autocomplete.js';
+import Chip from '../chip';
+import Input from '../input';
+import theme from './theme.scss';
+
+const Autocomplete = autocompleteFactory(Chip, Input);
+const ThemedAutocomplete = themr(AUTOCOMPLETE, theme)(Autocomplete);
+
+export default ThemedAutocomplete;
+export { ThemedAutocomplete as Autocomplete };
diff --git a/components/avatar/Avatar.js b/components/avatar/Avatar.js
index f6813b696..c1403ea21 100644
--- a/components/avatar/Avatar.js
+++ b/components/avatar/Avatar.js
@@ -1,27 +1,35 @@
 import React, {PropTypes} from 'react';
 import { themr } from 'react-css-themr';
-import FontIcon from '../font_icon';
+import { AVATAR } from '../identifiers.js';
+import InjectFontIcon from '../font_icon/FontIcon.js';
 
-const Avatar = ({children, className, icon, image, theme, title, ...other}) => (
-  <div data-react-toolbox='avatar' className={`${theme.avatar} ${className}`} {...other}>
-    {children}
-    {typeof image === 'string' ? <img className={theme.image} src={image} title={title} /> : image}
-    {typeof icon === 'string' ? <FontIcon className={theme.letter} value={icon} /> : icon}
-    {title ? <span className={theme.letter}>{title[0]}</span> : null}
-  </div>
-);
+const factory = (FontIcon) => {
+  const Avatar = ({children, className, icon, image, theme, title, ...other}) => (
+    <div data-react-toolbox='avatar' className={`${theme.avatar} ${className}`} {...other}>
+      {children}
+      {typeof image === 'string' ? <img className={theme.image} src={image} title={title} /> : image}
+      {typeof icon === 'string' ? <FontIcon className={theme.letter} value={icon} /> : icon}
+      {title ? <span className={theme.letter}>{title[0]}</span> : null}
+    </div>
+  );
 
-Avatar.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-  image: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-  theme: React.PropTypes.shape({
-    avatar: React.PropTypes.string.isRequired,
-    image: React.PropTypes.string.isRequired,
-    letter: React.PropTypes.string.isRequired
-  }),
-  title: PropTypes.string
+  Avatar.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    image: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    theme: React.PropTypes.shape({
+      avatar: React.PropTypes.string.isRequired,
+      image: React.PropTypes.string.isRequired,
+      letter: React.PropTypes.string.isRequired
+    }),
+    title: PropTypes.string
+  };
+
+  return Avatar;
 };
 
-export default themr('ToolboxAvatar')(Avatar);
+const Avatar = factory(InjectFontIcon);
+export default themr(AVATAR)(Avatar);
+export { factory as avatarFactory };
+export { Avatar };
diff --git a/components/avatar/index.js b/components/avatar/index.js
index 136e01f33..02ada447c 100644
--- a/components/avatar/index.js
+++ b/components/avatar/index.js
@@ -1,3 +1,11 @@
-import Avatar from './Avatar';
-export { Avatar };
-export default Avatar;
+import { AVATAR } from '../identifiers.js';
+import { themr } from 'react-css-themr';
+import { avatarFactory } from './Avatar.js';
+import FontIcon from '../font_icon/FontIcon.js';
+import theme from './theme.scss';
+
+const Avatar = avatarFactory(FontIcon);
+const ThemedAvatar = themr(AVATAR, theme)(Avatar);
+
+export default ThemedAvatar;
+export { ThemedAvatar as Avatar };
diff --git a/components/chip/Chip.js b/components/chip/Chip.js
index ae50e4dc2..b318747ad 100644
--- a/components/chip/Chip.js
+++ b/components/chip/Chip.js
@@ -1,54 +1,62 @@
-import React, {PropTypes} from 'react';
+import React, { PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
-import Avatar from '../avatar';
+import { CHIP } from '../identifiers.js';
+import InjectAvatar from '../avatar/Avatar.js';
 
-const Chip = ({children, className, deletable, onDeleteClick, theme, ...other}) => {
-  let hasAvatar = false;
-  if (React.Children.count(children)) {
-    const firstChild = children[0];
-    hasAvatar = firstChild && firstChild.type && firstChild.type === Avatar;
-  }
+const factory = (Avatar) => {
+  const Chip = ({children, className, deletable, onDeleteClick, theme, ...other}) => {
+    let hasAvatar = false;
+    if (React.Children.count(children)) {
+      const firstChild = children[0];
+      hasAvatar = firstChild && firstChild.type && firstChild.type === Avatar;
+    }
 
-  const classes = classnames(theme.chip, {
-      [theme.deletable]: !!deletable,
-      [theme.avatar]: !!hasAvatar
-  }, className);
+    const classes = classnames(theme.chip, {
+        [theme.deletable]: !!deletable,
+        [theme.avatar]: !!hasAvatar
+    }, className);
 
-  return (
-    <div data-react-toolbox='chip' className={classes} {...other}>
-      {typeof children === 'string' ? <span>{children}</span> : children}
-      {
-        deletable ? (
-          <span className={theme.delete} onClick={onDeleteClick}>
-            <svg viewBox="0 0 40 40" className={theme.deleteIcon}>
-              <path className={theme.deleteX} d="M 12,12 L 28,28 M 28,12 L 12,28" />
-            </svg>
-          </span>
-        ) : null
-      }
-    </div>
-  );
-};
+    return (
+      <div data-react-toolbox='chip' className={classes} {...other}>
+        {typeof children === 'string' ? <span>{children}</span> : children}
+        {
+          deletable ? (
+            <span className={theme.delete} onClick={onDeleteClick}>
+              <svg viewBox="0 0 40 40" className={theme.deleteIcon}>
+                <path className={theme.deleteX} d="M 12,12 L 28,28 M 28,12 L 12,28" />
+              </svg>
+            </span>
+          ) : null
+        }
+      </div>
+    );
+  };
 
-Chip.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  deletable: PropTypes.bool,
-  onDeleteClick: PropTypes.func,
-  theme: React.PropTypes.shape({
-    avatar: React.PropTypes.string.isRequired,
-    chip: React.PropTypes.string.isRequired,
-    deletable: React.PropTypes.string.isRequired,
-    delete: React.PropTypes.string.isRequired,
-    deleteIcon: React.PropTypes.string.isRequired,
-    deleteX: React.PropTypes.string.isRequired
-  })
-};
+  Chip.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    deletable: PropTypes.bool,
+    onDeleteClick: PropTypes.func,
+    theme: React.PropTypes.shape({
+      avatar: React.PropTypes.string.isRequired,
+      chip: React.PropTypes.string.isRequired,
+      deletable: React.PropTypes.string.isRequired,
+      delete: React.PropTypes.string.isRequired,
+      deleteIcon: React.PropTypes.string.isRequired,
+      deleteX: React.PropTypes.string.isRequired
+    })
+  };
+
+  Chip.defaultProps = {
+    className: '',
+    deletable: false
+  };
 
-Chip.defaultProps = {
-  className: '',
-  deletable: false
+  return Chip;
 };
 
-export default themr('ToolboxChip')(Chip);
+const Chip = factory(InjectAvatar);
+export default themr(CHIP)(Chip);
+export { factory as chipFactory };
+export { Chip };
diff --git a/components/chip/index.js b/components/chip/index.js
index c515b6395..62dd4d6d2 100644
--- a/components/chip/index.js
+++ b/components/chip/index.js
@@ -1,3 +1,11 @@
-import Chip from './Chip';
-export { Chip };
-export default Chip;
+import { CHIP } from '../identifiers.js';
+import { themr } from 'react-css-themr';
+import { chipFactory } from './Chip.js';
+import Avatar from '../avatar';
+import theme from './theme.scss';
+
+const Chip = chipFactory(Avatar);
+const ThemedChip = themr(CHIP, theme)(Chip);
+
+export default ThemedChip;
+export { ThemedChip as Chip };
diff --git a/components/identifiers.js b/components/identifiers.js
index 00460a56b..6f7e9d152 100644
--- a/components/identifiers.js
+++ b/components/identifiers.js
@@ -1,3 +1,7 @@
 export const APP_BAR = 'RTAppBar';
+export const AUTOCOMPLETE = 'RTAutocomplete';
+export const AVATAR = 'RTAvatar';
 export const BUTTON = 'RTButton';
+export const CHIP = 'RTChip';
+export const INPUT = 'RTInput';
 export const RIPPLE = 'RTRipple';
diff --git a/components/input/Input.js b/components/input/Input.js
index c347248f9..54b14a836 100644
--- a/components/input/Input.js
+++ b/components/input/Input.js
@@ -1,116 +1,123 @@
 import React from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
-import FontIcon from '../font_icon';
+import { INPUT } from '../identifiers.js';
+import InjectedFontIcon from '../font_icon/FontIcon.js';
 
-class Input extends React.Component {
-  static propTypes = {
-    children: React.PropTypes.any,
-    className: React.PropTypes.string,
-    disabled: React.PropTypes.bool,
-    error: React.PropTypes.string,
-    floating: React.PropTypes.bool,
-    hint: React.PropTypes.string,
-    icon: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.element
-    ]),
-    label: React.PropTypes.string,
-    maxLength: React.PropTypes.number,
-    multiline: React.PropTypes.bool,
-    onBlur: React.PropTypes.func,
-    onChange: React.PropTypes.func,
-    onFocus: React.PropTypes.func,
-    onKeyPress: React.PropTypes.func,
-    required: React.PropTypes.bool,
-    theme: React.PropTypes.shape({
-      bar: React.PropTypes.string,
-      counter: React.PropTypes.string,
-      disabled: React.PropTypes.string,
+const factory = (FontIcon) => {
+  class Input extends React.Component {
+    static propTypes = {
+      children: React.PropTypes.any,
+      className: React.PropTypes.string,
+      disabled: React.PropTypes.bool,
       error: React.PropTypes.string,
-      errored: React.PropTypes.string,
-      hidden: React.PropTypes.string,
+      floating: React.PropTypes.bool,
       hint: React.PropTypes.string,
-      icon: React.PropTypes.string,
-      input: React.PropTypes.string,
-      inputElement: React.PropTypes.string,
-      required: React.PropTypes.string,
-      withIcon: React.PropTypes.string
-    }),
-    type: React.PropTypes.string,
-    value: React.PropTypes.any
-  };
+      icon: React.PropTypes.oneOfType([
+        React.PropTypes.string,
+        React.PropTypes.element
+      ]),
+      label: React.PropTypes.string,
+      maxLength: React.PropTypes.number,
+      multiline: React.PropTypes.bool,
+      onBlur: React.PropTypes.func,
+      onChange: React.PropTypes.func,
+      onFocus: React.PropTypes.func,
+      onKeyPress: React.PropTypes.func,
+      required: React.PropTypes.bool,
+      theme: React.PropTypes.shape({
+        bar: React.PropTypes.string,
+        counter: React.PropTypes.string,
+        disabled: React.PropTypes.string,
+        error: React.PropTypes.string,
+        errored: React.PropTypes.string,
+        hidden: React.PropTypes.string,
+        hint: React.PropTypes.string,
+        icon: React.PropTypes.string,
+        input: React.PropTypes.string,
+        inputElement: React.PropTypes.string,
+        required: React.PropTypes.string,
+        withIcon: React.PropTypes.string
+      }),
+      type: React.PropTypes.string,
+      value: React.PropTypes.any
+    };
 
-  static defaultProps = {
-    className: '',
-    hint: '',
-    disabled: false,
-    floating: true,
-    multiline: false,
-    required: false,
-    type: 'text'
-  };
+    static defaultProps = {
+      className: '',
+      hint: '',
+      disabled: false,
+      floating: true,
+      multiline: false,
+      required: false,
+      type: 'text'
+    };
 
-  handleChange = (event) => {
-    if (this.props.onChange) this.props.onChange(event.target.value, event);
-  };
+    handleChange = (event) => {
+      if (this.props.onChange) this.props.onChange(event.target.value, event);
+    };
 
-  blur () {
-    this.refs.input.blur();
-  }
+    blur () {
+      this.refs.input.blur();
+    }
 
-  focus () {
-    this.refs.input.focus();
-  }
+    focus () {
+      this.refs.input.focus();
+    }
 
-  render () {
-    const { children, disabled, error, floating, hint, icon,
-            label: labelText, maxLength, multiline, required,
-            theme, type, value, ...others} = this.props;
-    const length = maxLength && value ? value.length : 0;
-    const labelClassName = classnames(theme.label, {[theme.fixed]: !floating});
+    render () {
+      const { children, disabled, error, floating, hint, icon,
+              label: labelText, maxLength, multiline, required,
+              theme, type, value, ...others} = this.props;
+      const length = maxLength && value ? value.length : 0;
+      const labelClassName = classnames(theme.label, {[theme.fixed]: !floating});
 
-    const className = classnames(theme.input, {
-      [theme.disabled]: disabled,
-      [theme.errored]: error,
-      [theme.hidden]: type === 'hidden',
-      [theme.withIcon]: icon
-    }, this.props.className);
+      const className = classnames(theme.input, {
+        [theme.disabled]: disabled,
+        [theme.errored]: error,
+        [theme.hidden]: type === 'hidden',
+        [theme.withIcon]: icon
+      }, this.props.className);
 
-    const valuePresent = value !== null && value !== undefined && value !== '' && !Number.isNaN(value);
+      const valuePresent = value !== null && value !== undefined && value !== '' && !Number.isNaN(value);
 
-    const InputElement = React.createElement(multiline ? 'textarea' : 'input', {
-      ...others,
-      className: classnames(theme.inputElement, {[theme.filled]: valuePresent}),
-      onChange: this.handleChange,
-      ref: 'input',
-      role: 'input',
-      disabled,
-      required,
-      type,
-      value,
-      maxLength
-    });
+      const InputElement = React.createElement(multiline ? 'textarea' : 'input', {
+        ...others,
+        className: classnames(theme.inputElement, {[theme.filled]: valuePresent}),
+        onChange: this.handleChange,
+        ref: 'input',
+        role: 'input',
+        disabled,
+        required,
+        type,
+        value,
+        maxLength
+      });
 
-    return (
-      <div data-react-toolbox='input' className={className}>
-        {InputElement}
-        {icon ? <FontIcon className={theme.icon} value={icon} /> : null}
-        <span className={theme.bar}></span>
-        {labelText
-          ? <label className={labelClassName}>
-              {labelText}
-              {required ? <span className={theme.required}> * </span> : null}
-            </label>
-          : null}
-        {hint ? <span className={theme.hint}>{hint}</span> : null}
-        {error ? <span className={theme.error}>{error}</span> : null}
-        {maxLength ? <span className={theme.counter}>{length}/{maxLength}</span> : null}
-        {children}
-      </div>
-    );
+      return (
+        <div data-react-toolbox='input' className={className}>
+          {InputElement}
+          {icon ? <FontIcon className={theme.icon} value={icon} /> : null}
+          <span className={theme.bar}></span>
+          {labelText
+            ? <label className={labelClassName}>
+                {labelText}
+                {required ? <span className={theme.required}> * </span> : null}
+              </label>
+            : null}
+          {hint ? <span className={theme.hint}>{hint}</span> : null}
+          {error ? <span className={theme.error}>{error}</span> : null}
+          {maxLength ? <span className={theme.counter}>{length}/{maxLength}</span> : null}
+          {children}
+        </div>
+      );
+    }
   }
-}
 
-export default themr('ToolboxInput')(Input);
+  return Input;
+};
+
+const Input = factory(InjectedFontIcon);
+export default themr(INPUT)(Input);
+export { factory as inputFactory };
 export { Input };
diff --git a/components/input/index.js b/components/input/index.js
index 3d7b4980e..2f4fe1d95 100644
--- a/components/input/index.js
+++ b/components/input/index.js
@@ -1 +1,11 @@
-export default from './Input';
+import { INPUT } from '../identifiers.js';
+import { themr } from 'react-css-themr';
+import { inputFactory } from './Input.js';
+import FontIcon from '../font_icon/FontIcon.js';
+import theme from './theme.scss';
+
+const Input = inputFactory(FontIcon);
+const ThemedInput = themr(INPUT, theme)(Input);
+
+export default ThemedInput;
+export { ThemedInput as Input };
diff --git a/spec/theme.js b/spec/theme.js
index e73ccd7cb..aad6b4b14 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -1,15 +1,11 @@
 import '../components/commons.scss';
 
-import ToolboxAutocomplete from '../components/autocomplete/theme.scss';
-import ToolboxAvatar from '../components/avatar/theme.scss';
 import ToolboxCard from '../components/card/theme.scss';
 import ToolboxCheckbox from '../components/checkbox/theme.scss';
-import ToolboxChip from '../components/chip/theme.scss';
 import ToolboxDatePicker from '../components/date_picker/theme.scss';
 import ToolboxDialog from '../components/dialog/theme.scss';
 import ToolboxDrawer from '../components/drawer/theme.scss';
 import ToolboxDropdown from '../components/dropdown/theme.scss';
-import ToolboxInput from '../components/input/theme.scss';
 import ToolboxLayout from '../components/layout/theme.scss';
 import ToolboxLink from '../components/link/theme.scss';
 import ToolboxList from '../components/list/theme.scss';
@@ -27,16 +23,12 @@ import ToolboxTimePicker from '../components/time_picker/theme.scss';
 import ToolboxTooltip from '../components/tooltip/theme.scss';
 
 export default {
-  ToolboxAutocomplete,
-  ToolboxAvatar,
   ToolboxCard,
   ToolboxCheckbox,
-  ToolboxChip,
   ToolboxDatePicker,
   ToolboxDialog,
   ToolboxDrawer,
   ToolboxDropdown,
-  ToolboxInput,
   ToolboxLayout,
   ToolboxLink,
   ToolboxList,

From d04c181fdf16af1ca8b89aa3de2b9585e489a7f0 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 28 May 2016 17:58:43 +0200
Subject: [PATCH 0577/1024] Better readmes for autocomplete avatar chip and
 input

---
 components/autocomplete/readme.md |  8 +++-----
 components/avatar/readme.md       | 23 +++++++++++------------
 components/chip/readme.md         | 19 ++++++++-----------
 components/input/readme.md        |  4 ++--
 4 files changed, 24 insertions(+), 30 deletions(-)

diff --git a/components/autocomplete/readme.md b/components/autocomplete/readme.md
index e14b9a519..b3af4a60a 100644
--- a/components/autocomplete/readme.md
+++ b/components/autocomplete/readme.md
@@ -5,7 +5,6 @@ An input field with a set of predeterminated labeled values. When it's focused i
 <!-- example -->
 ```jsx
 import Autocomplete from 'react-toolbox/lib/autocomplete';
-import theme from 'react-toolbox/lib/autocomplete/theme';
 
 const source = {
   'ES-es': 'Spain',
@@ -31,7 +30,6 @@ class AutocompleteTest extends React.Component {
         label="Choose countries"
         onChange={this.handleChange}
         source={source}
-        theme={theme}
         value={this.state.countries}
       />
     );
@@ -39,6 +37,8 @@ class AutocompleteTest extends React.Component {
 }
 ```
 
+If you want to provide a theme via context, the component key is `RTAutocomplete`.
+
 ## Properties
 
 | Name                | Type                   | Default         | Description|
@@ -57,9 +57,7 @@ class AutocompleteTest extends React.Component {
 
 Additional properties will be passed to the Input Component so you can use `hint`, `name` ... etc.
 
-## Theming
-
-You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxAutocomplete`, it should implement the following interface:
+## Theme
 
 | Name     | Description|
 |:---------|:-----------|
diff --git a/components/avatar/readme.md b/components/avatar/readme.md
index 3f76decc5..a30c52121 100644
--- a/components/avatar/readme.md
+++ b/components/avatar/readme.md
@@ -5,7 +5,6 @@ Avatars can be used to represent people. This offer users the ability to persona
 <!-- example -->
 ```jsx
 import Avatar from 'react-toolbox/lib/avatar';
-import theme from 'react-toolbox/lib/avatar/theme';
 
 const GithubIcon = () => (
   <svg viewBox="0 0 284 277">
@@ -15,15 +14,17 @@ const GithubIcon = () => (
 
 const AvatarTest = () => (
   <div>
-    <Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" theme={theme} />
-    <Avatar icon={<GithubIcon />} theme={theme} />
-    <Avatar theme={theme}><img src="https://placeimg.com/80/80/animals"/></Avatar>
-    <Avatar title="Javier" image="https://placeimg.com/80/80/animals" theme={theme} />
-    <Avatar style={{backgroundColor: 'yellowgreen'}} theme={theme}><GithubIcon /></Avatar>
+    <Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />
+    <Avatar icon={<GithubIcon />} />
+    <Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
+    <Avatar title="Javier" image="https://placeimg.com/80/80/animals" />
+    <Avatar style={{backgroundColor: 'yellowgreen'}}><GithubIcon /></Avatar>
   </div>
 );
 ```
 
+If you want to provide a theme via context, the component key is `RTAvatar`.
+
 ## Properties
 
 | Name          | Type                    | Default     | Description|
@@ -35,12 +36,10 @@ const AvatarTest = () => (
 | `title`       | `String`                | `''`        | A title for the image. If no image is provided, the first letter will be displayed as the avatar. |
 | `theme`       | `Object`  | `null`   | Classnames object defining the component style.|
 
-## Theming
-
-You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxAvatar`, it should implement the following interface:
+## Theme
 
 | Name     | Description|
 |:---------|:-----------|
-| `avatar` | Root class.|
-| `image`  | Used for the image if the avatar has image.|
-| `letter` | Used for the letter in case the avatar has no image.|
+| `avatar` | Used for the root class of the element.|
+| `image`  | Added to the root element when the component has image.|
+| `letter` | Used for the root element if the component shows the letter.|
diff --git a/components/chip/readme.md b/components/chip/readme.md
index d9535293e..e8ab3a876 100644
--- a/components/chip/readme.md
+++ b/components/chip/readme.md
@@ -1,12 +1,9 @@
 # Chip
 
-Chips represent complex entities in small blocks, such as a contact. Chips can be used for various types of entities, including free form text, predefined text, rules, or contacts. Chips may also contain icons.
-
-To add an icon or contact image to a chip, include an `Avatar` element as the first child.
+Chips represent complex entities in small blocks, such as a contact. Chips can be used for various types of entities, including free form text, predefined text, rules, or contacts. Chips may also contain icons. To add an icon or contact image to a chip, include an `Avatar` element as the first child.
 
 <!-- example -->
 ```jsx
-// Import theme using `ThemeProvider`
 import Avatar from 'react-toolbox/lib/avatar';
 import Chip from 'react-toolbox/lib/chip';
 
@@ -37,6 +34,8 @@ const ChipTest = () => (
 );
 ```
 
+If you want to provide a theme via context, the component key is `RTChip`.
+
 ## Properties
 
 | Name            | Type        | Default         | Description|
@@ -46,15 +45,13 @@ const ChipTest = () => (
 | `deletable`     | `Boolean`   | `false`         | If true, the chip will be rendered with a delete icon.|
 | `onDeleteClick` | `Function`  |                 | Callback to be invoked when the delete icon is clicked. |
 
-## Theming
-
-You can take a look to the configuration variables at the `_config.scss` file. The component implements the following class interface:
+## Theme
 
 | Name       | Description|
 |:-----------|:-----------|
-| `avatar`     | Used in the root when the component includes an avatar.|
-| `chip` | Root class.|
-| `deletable` | Used in the root when the component is deletable.|
+| `avatar` | Added to the root element when the component includes an avatar.|
+| `chip` | Used for the root element.|
+| `deletable` | Added to the root element when the component is deletable.|
 | `delete` | Used for the delete element wrapper.|
-| `deleteIcon` | Used for the delete icon wrapper.|
+| `deleteIcon` | Used for the delete icon.|
 | `deleteX` | Used for the delete svg inner layer.|
diff --git a/components/input/readme.md b/components/input/readme.md
index b57111381..1189bc843 100644
--- a/components/input/readme.md
+++ b/components/input/readme.md
@@ -27,6 +27,8 @@ class InputTest extends React.Component {
 }
 ```
 
+If you want to provide a theme via context, the component key is `RTInput`.
+
 ## Properties
 
 | Name            | Type                    | Default         | Description|
@@ -50,8 +52,6 @@ class InputTest extends React.Component {
 
 ## Theming
 
-The input component uses `ToolboxInput` as theme context id and the configuration is available in the `_config.scss` as usual. Here is the class interface:
-
 | Name       | Description|
 |:-----------|:-----------|
 | `bar`     | Used for the bar under the input.|

From 05c6dce5e13a1c3a2913bb49bf2e58a41bf739f1 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 28 May 2016 19:15:12 +0200
Subject: [PATCH 0578/1024] Autoinject theme for Card

---
 components/card/Card.js        |   8 ++-
 components/card/CardActions.js |   4 +-
 components/card/CardMedia.js   |   4 +-
 components/card/CardText.js    |   4 +-
 components/card/CardTitle.js   | 106 ++++++++++++++++-----------------
 components/card/index.js       |  30 +++++++---
 components/card/readme.md      |  80 ++++++++++++-------------
 components/identifiers.js      |   1 +
 spec/theme.js                  |   2 -
 9 files changed, 131 insertions(+), 108 deletions(-)

diff --git a/components/card/Card.js b/components/card/Card.js
index 0fa04ee74..af621993a 100644
--- a/components/card/Card.js
+++ b/components/card/Card.js
@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react';
 import { themr } from 'react-css-themr';
 import classnames from 'classnames';
+import { CARD } from '../identifiers.js';
 
 const Card = ({children, className, raised, theme, ...other}) => {
   const classes = classnames(theme.card, {
@@ -19,9 +20,10 @@ Card.propTypes = {
   className: PropTypes.string,
   raised: PropTypes.bool,
   theme: React.PropTypes.shape({
-    card: React.PropTypes.string.isRequired,
-    raised: React.PropTypes.string.isRequired
+    card: React.PropTypes.string,
+    raised: React.PropTypes.string
   })
 };
 
-export default themr('ToolboxCard')(Card);
+export default themr(CARD)(Card);
+export { Card };
diff --git a/components/card/CardActions.js b/components/card/CardActions.js
index e2e09145f..bd83a57b8 100644
--- a/components/card/CardActions.js
+++ b/components/card/CardActions.js
@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react';
 import { themr } from 'react-css-themr';
 import classnames from 'classnames';
+import { CARD } from '../identifiers.js';
 
 const CardActions = ({ children, className, theme, ...other }) => (
   <div className={classnames(theme.cardActions, className)} {...other}>
@@ -16,4 +17,5 @@ CardActions.propTypes = {
   })
 };
 
-export default themr('ToolboxCard')(CardActions);
+export default themr(CARD)(CardActions);
+export { CardActions };
diff --git a/components/card/CardMedia.js b/components/card/CardMedia.js
index ecaba7d38..919392383 100644
--- a/components/card/CardMedia.js
+++ b/components/card/CardMedia.js
@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react';
 import { themr } from 'react-css-themr';
 import classnames from 'classnames';
+import { CARD } from '../identifiers.js';
 
 const CardMedia = ({ aspectRatio, children, className, color, contentOverlay, image, theme, ...other }) => {
   const classes = classnames(theme.cardMedia, {
@@ -44,4 +45,5 @@ CardMedia.propTypes = {
   })
 };
 
-export default themr('ToolboxCard')(CardMedia);
+export default themr(CARD)(CardMedia);
+export { CardMedia };
diff --git a/components/card/CardText.js b/components/card/CardText.js
index 14c4683d7..df13ffc61 100644
--- a/components/card/CardText.js
+++ b/components/card/CardText.js
@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react';
 import { themr } from 'react-css-themr';
 import classnames from 'classnames';
+import { CARD } from '../identifiers.js';
 
 const CardText = ({ children, className, theme, ...other }) => (
   <div className={classnames(theme.cardText, className)} {...other}>
@@ -16,4 +17,5 @@ CardText.propTypes = {
   })
 };
 
-export default themr('ToolboxCard')(CardText);
+export default themr(CARD)(CardText);
+export { CardText };
diff --git a/components/card/CardTitle.js b/components/card/CardTitle.js
index 287c6ba9b..a9e83ef38 100644
--- a/components/card/CardTitle.js
+++ b/components/card/CardTitle.js
@@ -1,62 +1,62 @@
 import React, { PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
-import { Avatar } from '../avatar';
+import { CARD } from '../identifiers.js';
+import InjectAvatar from '../avatar/Avatar.js';
 
-const CardTitle = ({avatar, children, className, subtitle, theme, title, ...other}) => {
-  const classes = classnames(theme.cardTitle, {
-    [theme.small]: avatar,
-    [theme.large]: !avatar
-  }, className);
+const factory = (Avatar) => {
+  const CardTitle = ({avatar, children, className, subtitle, theme, title, ...other}) => {
+    const classes = classnames(theme.cardTitle, {
+      [theme.small]: avatar,
+      [theme.large]: !avatar
+    }, className);
 
-  let avatarComponent;
-
-  if (typeof avatar === 'string') {
-    avatarComponent = <Avatar image={avatar} />;
-  } else {
-    avatarComponent = avatar;
-  }
-
-  return (
-    <div className={classes} {...other}>
-      {avatarComponent}
-      <div>
-        {title && <h5 className={theme.title}>{title}</h5>}
-        {children && typeof children === 'string' && (
-          <h5 className={theme.title}>{children}</h5>
-        )}
-        {subtitle && <p className={theme.subtitle}>{subtitle}</p>}
-        {children && typeof children !== 'string' && children}
+    return (
+      <div className={classes} {...other}>
+        {typeof avatar === 'string' ? <Avatar image={avatar} /> : avatar}
+        <div>
+          {title && <h5 className={theme.title}>{title}</h5>}
+          {children && typeof children === 'string' && (
+            <h5 className={theme.title}>{children}</h5>
+          )}
+          {subtitle && <p className={theme.subtitle}>{subtitle}</p>}
+          {children && typeof children !== 'string' && children}
+        </div>
       </div>
-    </div>
-  );
-};
+    );
+  };
+
+  CardTitle.propTypes = {
+    avatar: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.element
+    ]),
+    children: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.element,
+      PropTypes.array
+    ]),
+    className: PropTypes.string,
+    subtitle: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.element
+    ]),
+    theme: React.PropTypes.shape({
+      large: React.PropTypes.string.isRequired,
+      title: React.PropTypes.string.isRequired,
+      small: React.PropTypes.string.isRequired,
+      subtitle: React.PropTypes.string.isRequired
+    }),
+    title: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.element
+    ])
+  };
 
-CardTitle.propTypes = {
-  avatar: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.element
-  ]),
-  children: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.element,
-    PropTypes.array
-  ]),
-  className: PropTypes.string,
-  subtitle: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.element
-  ]),
-  theme: React.PropTypes.shape({
-    large: React.PropTypes.string.isRequired,
-    title: React.PropTypes.string.isRequired,
-    small: React.PropTypes.string.isRequired,
-    subtitle: React.PropTypes.string.isRequired
-  }),
-  title: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.element
-  ])
+  return CardTitle;
 };
 
-export default themr('ToolboxCard')(CardTitle);
+const CardTitle = factory(InjectAvatar);
+export default themr(CARD)(CardTitle);
+export { CardTitle };
+export { factory as cardTitleFactory };
diff --git a/components/card/index.js b/components/card/index.js
index 5f9ceb938..ef571e9b5 100644
--- a/components/card/index.js
+++ b/components/card/index.js
@@ -1,7 +1,23 @@
-import Card from './Card';
-export default Card;
-export { Card };
-export CardActions from './CardActions';
-export CardMedia from './CardMedia';
-export CardText from './CardText';
-export CardTitle from './CardTitle';
+import { themr } from 'react-css-themr';
+import { CARD } from '../identifiers.js';
+import { Card } from './Card.js';
+import { CardActions } from './CardActions.js';
+import { CardMedia } from './CardMedia.js';
+import { CardText } from './CardText.js';
+import { cardTitleFactory } from './CardTitle.js';
+import Avatar from '../avatar';
+import theme from './theme.scss';
+
+const CardTitle = cardTitleFactory(Avatar);
+const ThemedCard = themr(CARD, theme)(Card);
+const ThemedCardActions = themr(CARD, theme)(CardActions);
+const ThemedCardMedia = themr(CARD, theme)(CardMedia);
+const ThemedCardText = themr(CARD, theme)(CardText);
+const ThemedCardTitle = themr(CARD, theme)(CardTitle);
+
+export default ThemedCard;
+export { ThemedCard as Card };
+export { ThemedCardActions as CardActions };
+export { ThemedCardMedia as CardMedia };
+export { ThemedCardText as CardText };
+export { ThemedCardTitle as CardTitle };
diff --git a/components/card/readme.md b/components/card/readme.md
index 68518a54d..a2add5f06 100644
--- a/components/card/readme.md
+++ b/components/card/readme.md
@@ -7,29 +7,25 @@ Cards are composed of multiple subcomponents in React Toolbox. You can combine e
 <!-- example -->
 ```jsx
 import { Card, CardMedia, CardTitle, CardText, CardActions } from 'react-toolbox/lib/card';
-import theme from 'react-toolbox/lib/card/theme';
 
 const dummyText = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.';
 
 const TestCards = () => (
-  <Card theme={theme} style={{width: '350px'}}>
+  <Card style={{width: '350px'}}>
     <CardTitle
       avatar="https://placeimg.com/80/80/animals"
       title="Avatar style title"
       subtitle="Subtitle here"
-      theme={theme}
     />
     <CardMedia
       aspectRatio="wide"
       image="https://placeimg.com/800/450/nature"
-      theme={theme}
     />
     <CardTitle
       title="Title goes here"
       subtitle="Subtitle here"
-      theme={theme}
     />
-    <CardText theme={theme}>{dummyText}</CardText>
+    <CardText>{dummyText}</CardText>
     <CardActions theme={theme}>
       <Button label="Action 1" />
       <Button label="Action 2" />
@@ -40,7 +36,7 @@ const TestCards = () => (
 return <TestCards />;
 ```
 
-<!--component-docgen-start-->
+This component and all of its subcomponents are themeable by context using the key `RTCard`. This component theme can also include class modifiers for `Button` and `Avatar` component.
 
 ## Card
 
@@ -54,15 +50,15 @@ that all subcomponents are placed within.
 | `className` | `String` |  | Additional class(es) for custom styling. |
 | `raised` | `Boolean` |  | Increases the shadow depth to appear elevated. |
 
+### Theme
 
-Since the `Button` implements a ripple, it accepts theme properties for the ripple as well. If you want to compose the default style for the ripple, you just have to provide Ripple keys with custom styles in the theme object.
-
+| Name     | Description|
+|:---------|:-----------|
+| `card`   | Class used for the root element.|
+| `raised` | Added to the root element in case the card is raised.|
 
 ## CardTitle
-A versatile title block that can be used in
-various places on the card, including the media
-area. This component can also display an avatar next
-to the title content.
+A versatile title block that can be used in various places on the card, including the media area. This component can also display an avatar next to the title content.
 
 ### Properties
 | Name | Type | Default | Description |
@@ -73,11 +69,18 @@ to the title content.
 | `subtitle` | `String` |  | Text used for the sub header of the card. |
 | `title` | `String` |  | Text used for the title of the card.  |
 
+### Theme
+
+| Name     | Description|
+|:---------|:-----------|
+| `large` | Added to the root element when the card has avatar.|
+| `small` | Added to the root element when the card has no avatar.|
+| `subtitle` | Added to the root element for subtitle.|
+| `title` | Used in for the root element.|
+
 ## CardMedia
 
-Used for displaying media such as images or videos
-on a card. Can also be used with a solid background
-color instead of an image.
+Used for displaying media such as images or videos on a card. Can also be used with a solid background color instead of an image.
 
 ### Properties
 | Name | Type | Default | Description |
@@ -89,9 +92,18 @@ color instead of an image.
 | `contentOverlay` | `Boolean` |  | Creates a dark overlay underneath the child components. |
 | `image` | `String`, `Element` |  | Can be used instead of children. Accepts an element or a URL string. |
 
+### Theme
+
+| Name     | Description|
+|:---------|:-----------|
+| `cardMedia` | Added to the element root.|
+| `content` | Used for the content element.|
+| `contentOverlay` | Added to content element if its overlayed.|
+| `square` | Added to content element if its squared.|
+| `wide` | Added to content element if its wide.|
+
 ## CardText
-Basic card content container. Good for
-small descriptions or other supplementary text.
+Basic card content container. Good for small descriptions or other supplementary text.
 
 ### Properties
 | Name | Type | Default | Description |
@@ -99,37 +111,25 @@ small descriptions or other supplementary text.
 | `children` | `Any` |  | Children to pass through the component. |
 | `className` | `String` |  | Additional class(es) for custom styling. |
 
+### Theme
+
+| Name       | Description|
+|:-----------|:-----------|
+| `cardText` | Used for the main root element.|
+
 ## CardActions
 
-This component is used as a container for supplemental
-card actions. Supplemental actions within the card are
-explicitly called out using icons, text, and UI controls,
-typically placed at the bottom of the card.
+This component is used as a container for supplemental card actions. Supplemental actions within the card are explicitly called out using icons, text, and UI controls, typically placed at the bottom of the card.
 
 ### Properties
+
 | Name | Type | Default | Description |
 |:-----|:-----|:-----|:-----|
 | `children` | `Any` |  | Children to pass through the component. |
 | `className` | `String` |  | Additional class(es) for custom styling. |
 
-## Theming
-
-Each subcomponent takes it's own classes but since usually you'd want to include every card subcomponent, and also those styles are related to each other, we use the same themed key `ToolboxCard` for context styles. The interface is as follows:
+### Theme
 
 | Name       | Description|
 |:-----------|:-----------|
-| `card`     | Used in `Card` as root class.|
-| `cardActions` | Used in `CardActions` for the wrapper.|
-| `cardMedia` | Used in `CardMedia` for the wrapper.|
-| `cardText` | Used in `CardText` for text wrapper.|
-| `content` | Used in `CardMedia` for inner content.|
-| `contentOverlay` | Used in `CardMedia` for inner content if its overlayed.|
-| `large` | Used in `CardTitle` when the card has avatar.|
-| `raised`   | Used in `Card` for raised cards.|
-| `small` | Used in `CardTitle` when the card has no avatar.|
-| `square` | Used in `CardMedia` for square content.|
-| `subtitle` | Used in `CardTitle` for subtitle.|
-| `title` | Used in `CardTitle` for title main wrapper.|
-| `wide` | Used in `CardMedia` for wide content.|
-
-This component theme also includes modifiers for `Button` and for `Avatar` component.
+| `cardActions` | Used for a wrapper around actions as the root element.|
diff --git a/components/identifiers.js b/components/identifiers.js
index 6f7e9d152..5d44773a6 100644
--- a/components/identifiers.js
+++ b/components/identifiers.js
@@ -2,6 +2,7 @@ export const APP_BAR = 'RTAppBar';
 export const AUTOCOMPLETE = 'RTAutocomplete';
 export const AVATAR = 'RTAvatar';
 export const BUTTON = 'RTButton';
+export const CARD = 'RTCard';
 export const CHIP = 'RTChip';
 export const INPUT = 'RTInput';
 export const RIPPLE = 'RTRipple';
diff --git a/spec/theme.js b/spec/theme.js
index aad6b4b14..508f9d21f 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -1,6 +1,5 @@
 import '../components/commons.scss';
 
-import ToolboxCard from '../components/card/theme.scss';
 import ToolboxCheckbox from '../components/checkbox/theme.scss';
 import ToolboxDatePicker from '../components/date_picker/theme.scss';
 import ToolboxDialog from '../components/dialog/theme.scss';
@@ -23,7 +22,6 @@ import ToolboxTimePicker from '../components/time_picker/theme.scss';
 import ToolboxTooltip from '../components/tooltip/theme.scss';
 
 export default {
-  ToolboxCard,
   ToolboxCheckbox,
   ToolboxDatePicker,
   ToolboxDialog,

From d59f95c4606dc40dd4e366c6242cbb33aec57eee Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 28 May 2016 19:19:14 +0200
Subject: [PATCH 0579/1024] Better readme for buttons

---
 components/button/readme.md | 48 ++++++++++++++++---------------------
 1 file changed, 21 insertions(+), 27 deletions(-)

diff --git a/components/button/readme.md b/components/button/readme.md
index 604c608eb..203dfef43 100644
--- a/components/button/readme.md
+++ b/components/button/readme.md
@@ -5,7 +5,6 @@ A [button](https://www.google.com/design/spec/components/buttons.html) clearly c
 <!-- example -->
 ```jsx
 import {Button, IconButton} from 'react-toolbox/lib/button';
-import theme from 'react-toolbox/lib/button/theme';
 
 const GithubIcon = () => (
   <svg viewBox="0 0 284 277">
@@ -15,18 +14,18 @@ const GithubIcon = () => (
 
 const TestButtons = () => (
   <div>
-    <Button href='http://github.com/javivelasco' target='_blank' raised theme={theme}>
+    <Button href='http://github.com/javivelasco' target='_blank' raised>
       <GithubIcon /> Github
     </Button>
-    <Button icon='bookmark' label='Bookmark' accent theme={theme} />
-    <Button icon='bookmark' label='Bookmark' raised primary theme={theme} />
-    <Button icon='inbox' label='Inbox' flat theme={theme} />
-    <Button icon='add' floating theme={theme} />
-    <Button icon='add' floating accent mini theme={theme} />
-    <IconButton icon='favorite' accent theme={theme} />
-    <IconButton primary theme={theme}><GithubIcon /></IconButton>
-    <Button icon='add' label='Add this' flat primary theme={theme} />
-    <Button icon='add' label='Add this' flat disabled theme={theme} />
+    <Button icon='bookmark' label='Bookmark' accent />
+    <Button icon='bookmark' label='Bookmark' raised primary />
+    <Button icon='inbox' label='Inbox' flat />
+    <Button icon='add' floating />
+    <Button icon='add' floating accent mini />
+    <IconButton icon='favorite' accent />
+    <IconButton primary><GithubIcon /></IconButton>
+    <Button icon='add' label='Add this' flat primary />
+    <Button icon='add' label='Add this' flat disabled />
   </div>
 );
 ```
@@ -57,28 +56,23 @@ By default it will have neutral colors and a flat aspect even though the `flat`
 
 The `Button` component also accept children so if you want to provide a custom component and text instead of a `label` and `icon` you can do it too. Just check the examples.
 
-## Theming
-
-You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxButton`, theme should implement the following interface:
+## Theme
 
 | Name       | Description|
 |:-----------|:-----------|
-| `accent`   | Used for accent button.|
-| `button`   | Used for the root element.|
-| `flat`     | Used when the button is flat.|
-| `floating` | Used when the button is floating.|
+| `accent`   | Used for the root in case button is accent.|
+| `button`   | Used for the root element in any button.|
+| `flat`     | Used when the button is flat for the root element.|
+| `floating` | Used when the button is floating for the root element.|
 | `icon`     | For the icon inside a button.|
 | `inverse`  | Used when colors are inverted.|
 | `mini`     | Used for mini floating buttons.|
-| `neutral`  | For neutral colored buttons.|
-| `primary`  | For primary buttons.|
-| `raised`   | Used when the button is raised.|
-| `toggle`   | Used for toggle buttons.|
-
-Since the `Button` implements a ripple, it accepts theme properties for the ripple as well. If you want to compose the default style for the ripple, you just have to provide Ripple keys with custom styles in the theme object.
+| `neutral`  | Used for neutral colored buttons.|
+| `primary`  | Used for primary buttons when button is primary.|
+| `raised`   | Used when the button is raised for root element.|
+| `ripple`   | Used for the ripple element.|
+| `toggle`   | Used for toggle buttons in the root element.|
 
 ## Icon Button
 
-Icons are appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star to an item. They are best located in app bars, toolbars, action buttons or toggles.
-
-We provide an `IconButton` component bundled with `Button` component. They share a similar API excluding onMouseLeave, onMouseUp and aspect properties.
+Icons are appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star to an item. They are best located in app bars, toolbars, action buttons or toggles. We provide an `IconButton` component bundled with `Button` component. They share a similar API excluding onMouseLeave, onMouseUp and aspect properties.

From e24152c330388e6b7a3c24b9cb7f31b011d4ee0f Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 28 May 2016 19:35:00 +0200
Subject: [PATCH 0580/1024] Fix tests

---
 components/slider/Slider.js | 519 ++++++++++++++++++------------------
 1 file changed, 262 insertions(+), 257 deletions(-)

diff --git a/components/slider/Slider.js b/components/slider/Slider.js
index 930bd6164..3fd7e7996 100644
--- a/components/slider/Slider.js
+++ b/components/slider/Slider.js
@@ -5,297 +5,302 @@ import { themr } from 'react-css-themr';
 import events from '../utils/events';
 import prefixer from '../utils/prefixer';
 import utils from '../utils/utils';
-import ProgressBar from '../progress_bar';
-import Input from '../input';
-
-class Slider extends React.Component {
-  static propTypes = {
-    className: React.PropTypes.string,
-    editable: React.PropTypes.bool,
-    max: React.PropTypes.number,
-    min: React.PropTypes.number,
-    onChange: React.PropTypes.func,
-    pinned: React.PropTypes.bool,
-    snaps: React.PropTypes.bool,
-    step: React.PropTypes.number,
-    theme: React.PropTypes.shape({
-      container: React.PropTypes.string,
-      editable: React.PropTypes.string,
-      innerknob: React.PropTypes.string,
-      innerprogress: React.PropTypes.string,
-      input: React.PropTypes.string,
-      knob: React.PropTypes.string,
-      pinned: React.PropTypes.string,
-      pressed: React.PropTypes.string,
-      progress: React.PropTypes.string,
-      ring: React.PropTypes.string,
-      slider: React.PropTypes.string,
-      snap: React.PropTypes.string,
-      snaps: React.PropTypes.string
-    }),
-    value: React.PropTypes.number
-  };
-
-  static defaultProps = {
-    className: '',
-    editable: false,
-    max: 100,
-    min: 0,
-    pinned: false,
-    snaps: false,
-    step: 0.01,
-    value: 0
-  };
-
-  state = {
-    inputFocused: false,
-    inputValue: null,
-    sliderLength: 0,
-    sliderStart: 0
-  };
-
-  componentDidMount () {
-    window.addEventListener('resize', this.handleResize);
-    this.handleResize();
-  }
+import InjectProgressBar from '../progress_bar/ProgressBar.js';
+import InjectInput from '../input/Input.js';
+
+const factory = (ProgressBar, Input) => {
+  class Slider extends React.Component {
+    static propTypes = {
+      className: React.PropTypes.string,
+      editable: React.PropTypes.bool,
+      max: React.PropTypes.number,
+      min: React.PropTypes.number,
+      onChange: React.PropTypes.func,
+      pinned: React.PropTypes.bool,
+      snaps: React.PropTypes.bool,
+      step: React.PropTypes.number,
+      theme: React.PropTypes.shape({
+        container: React.PropTypes.string,
+        editable: React.PropTypes.string,
+        innerknob: React.PropTypes.string,
+        innerprogress: React.PropTypes.string,
+        input: React.PropTypes.string,
+        knob: React.PropTypes.string,
+        pinned: React.PropTypes.string,
+        pressed: React.PropTypes.string,
+        progress: React.PropTypes.string,
+        ring: React.PropTypes.string,
+        slider: React.PropTypes.string,
+        snap: React.PropTypes.string,
+        snaps: React.PropTypes.string
+      }),
+      value: React.PropTypes.number
+    };
+
+    static defaultProps = {
+      className: '',
+      editable: false,
+      max: 100,
+      min: 0,
+      pinned: false,
+      snaps: false,
+      step: 0.01,
+      value: 0
+    };
+
+    state = {
+      inputFocused: false,
+      inputValue: null,
+      sliderLength: 0,
+      sliderStart: 0
+    };
 
-  shouldComponentUpdate (nextProps, nextState) {
-    if (!this.state.inputFocused && nextState.inputFocused) return false;
-    if (this.state.inputFocused && this.props.value !== nextProps.value) {
-      this.setState({inputValue: this.valueForInput(nextProps.value)});
-      return false;
+    componentDidMount () {
+      window.addEventListener('resize', this.handleResize);
+      this.handleResize();
     }
-    return true;
-  }
 
-  componentWillUnmount () {
-    window.removeEventListener('resize', this.handleResize);
-    events.removeEventsFromDocument(this.getMouseEventMap());
-    events.removeEventsFromDocument(this.getTouchEventMap());
-    events.removeEventsFromDocument(this.getKeyboardEvents());
-  }
+    shouldComponentUpdate (nextProps, nextState) {
+      if (!this.state.inputFocused && nextState.inputFocused) return false;
+      if (this.state.inputFocused && this.props.value !== nextProps.value) {
+        this.setState({inputValue: this.valueForInput(nextProps.value)});
+        return false;
+      }
+      return true;
+    }
 
-  handleInputFocus = () => {
-    this.setState({
-      inputFocused: true,
-      inputValue: this.valueForInput(this.props.value)
-    });
-  };
-
-  handleInputChange = (value) => {
-    this.setState({inputValue: value});
-  };
-
-  handleInputBlur = (event) => {
-    const value = this.state.inputValue || 0;
-    this.setState({inputFocused: false, inputValue: null}, () => {
-      this.props.onChange(this.trimValue(value), event);
-    });
-  };
-
-  handleKeyDown = (event) => {
-    if ([13, 27].indexOf(event.keyCode) !== -1) {
-      this.refs.input.blur();
-      ReactDOM.findDOMNode(this).blur();
+    componentWillUnmount () {
+      window.removeEventListener('resize', this.handleResize);
+      events.removeEventsFromDocument(this.getMouseEventMap());
+      events.removeEventsFromDocument(this.getTouchEventMap());
+      events.removeEventsFromDocument(this.getKeyboardEvents());
     }
-    if (event.keyCode === 38) this.addToValue(this.props.step);
-    if (event.keyCode === 40) this.addToValue(-this.props.step);
-  };
-
-  handleMouseDown = (event) => {
-    if (this.state.inputFocused) this.refs.input.blur();
-    events.addEventsToDocument(this.getMouseEventMap());
-    this.start(events.getMousePosition(event));
-    events.pauseEvent(event);
-  };
-
-  handleMouseMove = (event) => {
-    events.pauseEvent(event);
-    this.move(events.getMousePosition(event));
-  };
-
-  handleMouseUp = () => {
-    this.end(this.getMouseEventMap());
-  };
-
-  handleResize = (event, callback) => {
-    const {left, right} = ReactDOM.findDOMNode(this.refs.progressbar).getBoundingClientRect();
-    const cb = (callback) || (() => {});
-    this.setState({sliderStart: left, sliderLength: right - left}, cb);
-  };
-
-  handleSliderBlur = () => {
-    events.removeEventsFromDocument(this.getKeyboardEvents());
-  };
-
-  handleSliderFocus = () => {
-    events.addEventsToDocument(this.getKeyboardEvents());
-  };
-
-  handleTouchEnd = () => {
-    this.end(this.getTouchEventMap());
-  };
-
-  handleTouchMove = (event) => {
-    this.move(events.getTouchPosition(event));
-  };
-
-  handleTouchStart = (event) => {
-    if (this.state.inputFocused) this.refs.input.blur();
-    this.start(events.getTouchPosition(event));
-    events.addEventsToDocument(this.getTouchEventMap());
-    events.pauseEvent(event);
-  };
-
-  addToValue (increment) {
-    let value = this.state.inputFocused ? parseFloat(this.state.inputValue) : this.props.value;
-    value = this.trimValue(value + increment);
-    if (value !== this.props.value) this.props.onChange(value);
-  }
 
-  getKeyboardEvents () {
-    return {
-      keydown: this.handleKeyDown
+    handleInputFocus = () => {
+      this.setState({
+        inputFocused: true,
+        inputValue: this.valueForInput(this.props.value)
+      });
     };
-  }
 
-  getMouseEventMap () {
-    return {
-      mousemove: this.handleMouseMove,
-      mouseup: this.handleMouseUp
+    handleInputChange = (value) => {
+      this.setState({inputValue: value});
     };
-  }
 
-  getTouchEventMap () {
-    return {
-      touchmove: this.handleTouchMove,
-      touchend: this.handleTouchEnd
+    handleInputBlur = (event) => {
+      const value = this.state.inputValue || 0;
+      this.setState({inputFocused: false, inputValue: null}, () => {
+        this.props.onChange(this.trimValue(value), event);
+      });
     };
-  }
 
-  end (revents) {
-    events.removeEventsFromDocument(revents);
-    this.setState({ pressed: false });
-  }
+    handleKeyDown = (event) => {
+      if ([13, 27].indexOf(event.keyCode) !== -1) {
+        this.refs.input.blur();
+        ReactDOM.findDOMNode(this).blur();
+      }
+      if (event.keyCode === 38) this.addToValue(this.props.step);
+      if (event.keyCode === 40) this.addToValue(-this.props.step);
+    };
 
-  knobOffset () {
-    const { max, min } = this.props;
-    return this.state.sliderLength * (this.props.value - min) / (max - min);
-  }
+    handleMouseDown = (event) => {
+      if (this.state.inputFocused) this.refs.input.blur();
+      events.addEventsToDocument(this.getMouseEventMap());
+      this.start(events.getMousePosition(event));
+      events.pauseEvent(event);
+    };
 
-  move (position) {
-    const newValue = this.positionToValue(position);
-    if (newValue !== this.props.value) this.props.onChange(newValue);
-  }
+    handleMouseMove = (event) => {
+      events.pauseEvent(event);
+      this.move(events.getMousePosition(event));
+    };
 
-  positionToValue (position) {
-    const { sliderStart: start, sliderLength: length } = this.state;
-    const { max, min } = this.props;
-    return this.trimValue((position.x - start) / length * (max - min) + min);
-  }
+    handleMouseUp = () => {
+      this.end(this.getMouseEventMap());
+    };
 
-  start (position) {
-    this.handleResize(null, () => {
-      this.setState({pressed: true});
-      this.props.onChange(this.positionToValue(position));
-    });
-  }
+    handleResize = (event, callback) => {
+      const {left, right} = ReactDOM.findDOMNode(this.refs.progressbar).getBoundingClientRect();
+      const cb = (callback) || (() => {});
+      this.setState({sliderStart: left, sliderLength: right - left}, cb);
+    };
 
-  stepDecimals () {
-    return (this.props.step.toString().split('.')[1] || []).length;
-  }
+    handleSliderBlur = () => {
+      events.removeEventsFromDocument(this.getKeyboardEvents());
+    };
 
-  trimValue (value) {
-    if (value < this.props.min) return this.props.min;
-    if (value > this.props.max) return this.props.max;
-    return utils.round(value, this.stepDecimals());
-  }
+    handleSliderFocus = () => {
+      events.addEventsToDocument(this.getKeyboardEvents());
+    };
 
-  valueForInput (value) {
-    const decimals = this.stepDecimals();
-    return decimals > 0 ? value.toFixed(decimals) : value.toString();
-  }
+    handleTouchEnd = () => {
+      this.end(this.getTouchEventMap());
+    };
 
-  renderSnaps () {
-    if (this.props.snaps) {
-      return (
-        <div ref='snaps' className={this.props.theme.snaps}>
-          {utils.range(0, (this.props.max - this.props.min) / this.props.step).map(i => {
+    handleTouchMove = (event) => {
+      this.move(events.getTouchPosition(event));
+    };
+
+    handleTouchStart = (event) => {
+      if (this.state.inputFocused) this.refs.input.blur();
+      this.start(events.getTouchPosition(event));
+      events.addEventsToDocument(this.getTouchEventMap());
+      events.pauseEvent(event);
+    };
+
+    addToValue (increment) {
+      let value = this.state.inputFocused ? parseFloat(this.state.inputValue) : this.props.value;
+      value = this.trimValue(value + increment);
+      if (value !== this.props.value) this.props.onChange(value);
+    }
+
+    getKeyboardEvents () {
+      return {
+        keydown: this.handleKeyDown
+      };
+    }
+
+    getMouseEventMap () {
+      return {
+        mousemove: this.handleMouseMove,
+        mouseup: this.handleMouseUp
+      };
+    }
+
+    getTouchEventMap () {
+      return {
+        touchmove: this.handleTouchMove,
+        touchend: this.handleTouchEnd
+      };
+    }
+
+    end (revents) {
+      events.removeEventsFromDocument(revents);
+      this.setState({ pressed: false });
+    }
+
+    knobOffset () {
+      const { max, min } = this.props;
+      return this.state.sliderLength * (this.props.value - min) / (max - min);
+    }
+
+    move (position) {
+      const newValue = this.positionToValue(position);
+      if (newValue !== this.props.value) this.props.onChange(newValue);
+    }
+
+    positionToValue (position) {
+      const { sliderStart: start, sliderLength: length } = this.state;
+      const { max, min } = this.props;
+      return this.trimValue((position.x - start) / length * (max - min) + min);
+    }
+
+    start (position) {
+      this.handleResize(null, () => {
+        this.setState({pressed: true});
+        this.props.onChange(this.positionToValue(position));
+      });
+    }
+
+    stepDecimals () {
+      return (this.props.step.toString().split('.')[1] || []).length;
+    }
+
+    trimValue (value) {
+      if (value < this.props.min) return this.props.min;
+      if (value > this.props.max) return this.props.max;
+      return utils.round(value, this.stepDecimals());
+    }
+
+    valueForInput (value) {
+      const decimals = this.stepDecimals();
+      return decimals > 0 ? value.toFixed(decimals) : value.toString();
+    }
+
+    renderSnaps () {
+      if (this.props.snaps) {
+        return (
+          <div ref='snaps' className={this.props.theme.snaps}>
+            {utils.range(0, (this.props.max - this.props.min) / this.props.step).map(i => {
               return <div key={`span-${i}`} className={this.props.theme.snap} />;
             })}
-        </div>
-      );
+          </div>
+        );
+      }
     }
-  }
 
-  renderInput () {
-    if (this.props.editable) {
-      const value = this.state.inputFocused ? this.state.inputValue : this.valueForInput(this.props.value);
-      return (
-        <Input
-          ref='input'
-          className={this.props.theme.input}
-          onFocus={this.handleInputFocus}
-          onChange={this.handleInputChange}
-          onBlur={this.handleInputBlur}
-          value={value}
-        />
-      );
+    renderInput () {
+      if (this.props.editable) {
+        const value = this.state.inputFocused ? this.state.inputValue : this.valueForInput(this.props.value);
+        return (
+          <Input
+            ref='input'
+            className={this.props.theme.input}
+            onFocus={this.handleInputFocus}
+            onChange={this.handleInputChange}
+            onBlur={this.handleInputBlur}
+            value={value}
+            />
+        );
+      }
     }
-  }
 
-  render () {
-    const { theme } = this.props;
-    const knobStyles = prefixer({transform: `translateX(${this.knobOffset()}px)`});
-    const className = classnames(theme.slider, {
-      [theme.editable]: this.props.editable,
-      [theme.pinned]: this.props.pinned,
-      [theme.pressed]: this.state.pressed,
-      [theme.ring]: this.props.value === this.props.min
-    }, this.props.className);
-
-    return (
-      <div
-        className={className}
-        data-react-toolbox='slider'
-        onBlur={this.handleSliderBlur}
-        onFocus={this.handleSliderFocus}
-        tabIndex='0'
-      >
+    render () {
+      const { theme } = this.props;
+      const knobStyles = prefixer({transform: `translateX(${this.knobOffset()}px)`});
+      const className = classnames(theme.slider, {
+        [theme.editable]: this.props.editable,
+        [theme.pinned]: this.props.pinned,
+        [theme.pressed]: this.state.pressed,
+        [theme.ring]: this.props.value === this.props.min
+      }, this.props.className);
+
+      return (
         <div
-          ref='slider'
-          className={theme.container}
-          onMouseDown={this.handleMouseDown}
-          onTouchStart={this.handleTouchStart}
-        >
+          className={className}
+          data-react-toolbox='slider'
+          onBlur={this.handleSliderBlur}
+          onFocus={this.handleSliderFocus}
+          tabIndex='0'
+          >
           <div
-            ref='knob'
-            className={theme.knob}
+            ref='slider'
+            className={theme.container}
             onMouseDown={this.handleMouseDown}
             onTouchStart={this.handleTouchStart}
-            style={knobStyles}
-          >
-            <div className={theme.innerknob} data-value={parseInt(this.props.value)}></div>
+            >
+            <div
+              ref='knob'
+              className={theme.knob}
+              onMouseDown={this.handleMouseDown}
+              onTouchStart={this.handleTouchStart}
+              style={knobStyles}
+              >
+              <div className={theme.innerknob} data-value={parseInt(this.props.value)}></div>
+            </div>
+
+            <div className={theme.progress}>
+              <ProgressBar
+                ref='progressbar'
+                className={theme.innerprogress}
+                max={this.props.max}
+                min={this.props.min}
+                mode='determinate'
+                value={this.props.value}
+                />
+              {this.renderSnaps()}
+            </div>
           </div>
 
-          <div className={theme.progress}>
-            <ProgressBar
-              ref='progressbar'
-              className={theme.innerprogress}
-              max={this.props.max}
-              min={this.props.min}
-              mode='determinate'
-              value={this.props.value}
-            />
-            {this.renderSnaps()}
-          </div>
+          {this.renderInput()}
         </div>
-
-        {this.renderInput()}
-      </div>
-    );
+      );
+    }
   }
-}
 
+  return Slider;
+};
+
+const Slider = factory(InjectProgressBar, InjectInput);
 export default themr('ToolboxSlider')(Slider);
 export { Slider };

From fdb36449f33b72511fd8b0601a6fddbdb087d5d5 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 28 May 2016 19:37:46 +0200
Subject: [PATCH 0581/1024] Autoinject styles for ProgressBar

---
 components/identifiers.js              |  1 +
 components/progress_bar/ProgressBar.js | 43 +++++++++++++-------------
 components/progress_bar/index.js       | 10 +++++-
 components/progress_bar/readme.md      | 11 +++----
 4 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/components/identifiers.js b/components/identifiers.js
index 5d44773a6..64a10fcf6 100644
--- a/components/identifiers.js
+++ b/components/identifiers.js
@@ -5,4 +5,5 @@ export const BUTTON = 'RTButton';
 export const CARD = 'RTCard';
 export const CHIP = 'RTChip';
 export const INPUT = 'RTInput';
+export const PROGRESS_BAR = 'RTProgressBar';
 export const RIPPLE = 'RTRipple';
diff --git a/components/progress_bar/ProgressBar.js b/components/progress_bar/ProgressBar.js
index 8d8cc1ab3..ac75e3554 100644
--- a/components/progress_bar/ProgressBar.js
+++ b/components/progress_bar/ProgressBar.js
@@ -1,28 +1,29 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
-import prefixer from '../utils/prefixer';
+import { PROGRESS_BAR } from '../identifiers.js';
+import prefixer from '../utils/prefixer.js';
 
-class ProgressBar extends React.Component {
+class ProgressBar extends Component {
   static propTypes = {
-    buffer: React.PropTypes.number,
-    className: React.PropTypes.string,
-    max: React.PropTypes.number,
-    min: React.PropTypes.number,
-    mode: React.PropTypes.oneOf(['determinate', 'indeterminate']),
-    multicolor: React.PropTypes.bool,
-    theme: React.PropTypes.shape({
-      buffer: React.PropTypes.string,
-      circle: React.PropTypes.string,
-      circular: React.PropTypes.string,
-      indeterminate: React.PropTypes.string,
-      linear: React.PropTypes.string,
-      multicolor: React.PropTypes.string,
-      path: React.PropTypes.string,
-      value: React.PropTypes.string
+    buffer: PropTypes.number,
+    className: PropTypes.string,
+    max: PropTypes.number,
+    min: PropTypes.number,
+    mode: PropTypes.oneOf(['determinate', 'indeterminate']),
+    multicolor: PropTypes.bool,
+    theme: PropTypes.shape({
+      buffer: PropTypes.string,
+      circle: PropTypes.string,
+      circular: PropTypes.string,
+      indeterminate: PropTypes.string,
+      linear: PropTypes.string,
+      multicolor: PropTypes.string,
+      path: PropTypes.string,
+      value: PropTypes.string
     }),
-    type: React.PropTypes.oneOf(['linear', 'circular']),
-    value: React.PropTypes.number
+    type: PropTypes.oneOf(['linear', 'circular']),
+    value: PropTypes.number
   };
 
   static defaultProps = {
@@ -98,5 +99,5 @@ class ProgressBar extends React.Component {
   }
 }
 
-export default themr('ToolboxProgress')(ProgressBar);
+export default themr(PROGRESS_BAR)(ProgressBar);
 export { ProgressBar };
diff --git a/components/progress_bar/index.js b/components/progress_bar/index.js
index f9d75e8cd..6c4a36d1d 100644
--- a/components/progress_bar/index.js
+++ b/components/progress_bar/index.js
@@ -1 +1,9 @@
-export default from './ProgressBar';
+import { themr } from 'react-css-themr';
+import { PROGRESS_BAR } from '../identifiers.js';
+import { ProgressBar } from './ProgressBar.js';
+import theme from './theme.scss';
+
+const ThemedProgressBar = themr(PROGRESS_BAR, theme)(ProgressBar);
+
+export default ThemedProgressBar;
+export { ThemedProgressBar as ProgressBar };
diff --git a/components/progress_bar/readme.md b/components/progress_bar/readme.md
index 864c859a5..760af9f4e 100644
--- a/components/progress_bar/readme.md
+++ b/components/progress_bar/readme.md
@@ -5,16 +5,17 @@ Minimize visual changes that occur while your app loads content by representing
 <!-- example -->
 ```jsx
 import ProgressBar from 'react-toolbox/lib/progress_bar';
-import theme from 'react-toolbox/lib/progress_bar/theme';
 
 const ProgressTest = () => (
   <div>
-    <ProgressBar type="circular" mode="indeterminate" theme={theme} />
-    <ProgressBar type="linear" mode="determinate" value={83} buffer={90} theme={theme} />
+    <ProgressBar type="circular" mode="indeterminate" />
+    <ProgressBar type="linear" mode="determinate" value={83} buffer={90} />
   </div>
 );
 ```
 
+If you want to provide a theme via context, the component key is `RTProgressBar`.
+
 ## Properties
 
 | Name          | Type        | Default         | Description|
@@ -28,9 +29,7 @@ const ProgressTest = () => (
 | `type`        | `String`    | `linear`        | Type of the progress bar, it can be `circular` or `linear`.|
 | `value`       | `Number`    | `0`             | Value of the current progress.|
 
-## Theming
-
-You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxProgress`, it should implement the following interface:
+## Theme
 
 | Name     | Description|
 |:---------|:-----------|

From 6d37fe7ef683e061c94407f40732bd3514bd3b96 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 28 May 2016 19:37:59 +0200
Subject: [PATCH 0582/1024] Add missing context theme doc for Button

---
 components/button/readme.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/button/readme.md b/components/button/readme.md
index 203dfef43..ec079dab9 100644
--- a/components/button/readme.md
+++ b/components/button/readme.md
@@ -30,6 +30,8 @@ const TestButtons = () => (
 );
 ```
 
+If you want to provide a theme via context, the component key is `RTButton`.
+
 ## Properties
 
 | Name              | Type                  | Default     | Description|

From 4ff92ac7ea9f9df63a94b9d251b49f684e9ffcd1 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 28 May 2016 22:04:00 +0200
Subject: [PATCH 0583/1024] Autoinject theme for Dialog, DatePicker and Overlay

---
 components/date_picker/Calendar.js         | 203 +++++++++++----------
 components/date_picker/CalendarDay.js      |  25 ++-
 components/date_picker/CalendarMonth.js    |  34 ++--
 components/date_picker/DatePicker.js       | 160 ++++++++--------
 components/date_picker/DatePickerDialog.js | 164 +++++++++--------
 components/date_picker/index.js            |  19 ++
 components/date_picker/readme.md           |   6 +-
 components/dialog/Dialog.js                | 130 ++++++-------
 components/dialog/index.js                 |  13 +-
 components/dialog/readme.md                |   7 +-
 components/identifiers.js                  |   3 +
 components/overlay/Overlay.js              |   6 +-
 components/overlay/index.js                |   9 +-
 spec/theme.js                              |   6 -
 14 files changed, 424 insertions(+), 361 deletions(-)

diff --git a/components/date_picker/Calendar.js b/components/date_picker/Calendar.js
index b00308d77..36d7c6ea2 100644
--- a/components/date_picker/Calendar.js
+++ b/components/date_picker/Calendar.js
@@ -1,117 +1,120 @@
 import React from 'react';
 import CssTransitionGroup from 'react-addons-css-transition-group';
-import { themr } from 'react-css-themr';
 import { SlideLeft, SlideRight } from '../animations';
-import { IconButton } from '../button';
-import CalendarMonth from './CalendarMonth';
-import time from '../utils/time';
-import utils from '../utils/utils';
-
-class Calendar extends React.Component {
-  static propTypes = {
-    display: React.PropTypes.oneOf(['months', 'years']),
-    maxDate: React.PropTypes.object,
-    minDate: React.PropTypes.object,
-    onChange: React.PropTypes.func,
-    selectedDate: React.PropTypes.object,
-    theme: React.PropTypes.shape({
-      active: React.PropTypes.string.isRequired,
-      calendar: React.PropTypes.string.isRequired,
-      next: React.PropTypes.string.isRequired,
-      prev: React.PropTypes.string.isRequired,
-      years: React.PropTypes.string.isRequired
-    }),
-    viewDate: React.PropTypes.object
-  };
-
-  static defaultProps = {
-    display: 'months',
-    selectedDate: new Date()
-  };
-
-  state = {
-    viewDate: this.props.selectedDate
-  };
-
-  componentDidUpdate () {
-    if (this.refs.activeYear) {
-      this.scrollToActive();
+import time from '../utils/time.js';
+import utils from '../utils/utils.js';
+import CalendarMonth from './CalendarMonth.js';
+
+const factory = (IconButton) => {
+  class Calendar extends React.Component {
+    static propTypes = {
+      display: React.PropTypes.oneOf(['months', 'years']),
+      maxDate: React.PropTypes.object,
+      minDate: React.PropTypes.object,
+      onChange: React.PropTypes.func,
+      selectedDate: React.PropTypes.object,
+      theme: React.PropTypes.shape({
+        active: React.PropTypes.string.isRequired,
+        calendar: React.PropTypes.string.isRequired,
+        next: React.PropTypes.string.isRequired,
+        prev: React.PropTypes.string.isRequired,
+        years: React.PropTypes.string.isRequired
+      }),
+      viewDate: React.PropTypes.object
+    };
+
+    static defaultProps = {
+      display: 'months',
+      selectedDate: new Date()
+    };
+
+    state = {
+      viewDate: this.props.selectedDate
+    };
+
+    componentDidUpdate () {
+      if (this.refs.activeYear) {
+        this.scrollToActive();
+      }
     }
-  }
 
-  scrollToActive () {
-    this.refs.years.scrollTop = this.refs.activeYear.offsetTop
+    scrollToActive () {
+      this.refs.years.scrollTop = this.refs.activeYear.offsetTop
       - this.refs.years.offsetHeight / 2
       + this.refs.activeYear.offsetHeight / 2;
-  }
+    }
+
+    handleDayClick = (day) => {
+      this.props.onChange(time.setDay(this.state.viewDate, day), true);
+    };
+
+    handleYearClick = (year) => {
+      const viewDate = time.setYear(this.props.selectedDate, year);
+      this.setState({viewDate});
+      this.props.onChange(viewDate, false);
+    };
 
-  handleDayClick = (day) => {
-    this.props.onChange(time.setDay(this.state.viewDate, day), true);
-  };
-
-  handleYearClick = (year) => {
-    const viewDate = time.setYear(this.props.selectedDate, year);
-    this.setState({viewDate});
-    this.props.onChange(viewDate, false);
-  };
-
-  changeViewMonth = (direction, step) => {
-    this.setState({
-      direction,
-      viewDate: time.addMonths(this.state.viewDate, step)
-    });
-  };
-
-  renderYear (year) {
-    const props = {
-      className: year === this.state.viewDate.getFullYear() ? this.props.theme.active : '',
-      key: year,
-      onClick: this.handleYearClick.bind(this, year)
+    changeViewMonth = (direction, step) => {
+      this.setState({
+        direction,
+        viewDate: time.addMonths(this.state.viewDate, step)
+      });
     };
 
-    if (year === this.state.viewDate.getFullYear()) {
-      props.ref = 'activeYear';
+    renderYear (year) {
+      const props = {
+        className: year === this.state.viewDate.getFullYear() ? this.props.theme.active : '',
+        key: year,
+        onClick: this.handleYearClick.bind(this, year)
+      };
+
+      if (year === this.state.viewDate.getFullYear()) {
+        props.ref = 'activeYear';
+      }
+
+      return <li {...props}>{year}</li>;
     }
 
-    return <li {...props}>{year}</li>;
-  }
+    renderYears () {
+      return (
+        <ul data-react-toolbox='years' ref="years" className={this.props.theme.years}>
+          {utils.range(1900, 2100).map((i) => { return this.renderYear(i); })}
+        </ul>
+      );
+    }
 
-  renderYears () {
-    return (
-      <ul data-react-toolbox='years' ref="years" className={this.props.theme.years}>
-        {utils.range(1900, 2100).map((i) => { return this.renderYear(i); })}
-      </ul>
-    );
-  }
+    renderMonths () {
+      const { theme } = this.props;
+      const animation = this.state.direction === 'left' ? SlideLeft : SlideRight;
+      return (
+        <div data-react-toolbox='calendar'>
+          <IconButton className={theme.prev} icon='chevron_left' onClick={this.changeViewMonth.bind(this, 'left', -1)} />
+          <IconButton className={theme.next} icon='chevron_right' onClick={this.changeViewMonth.bind(this, 'right', 1)} />
+          <CssTransitionGroup transitionName={animation} transitionEnterTimeout={350} transitionLeaveTimeout={350}>
+            <CalendarMonth
+              key={this.state.viewDate.getMonth()}
+              maxDate={this.props.maxDate}
+              minDate={this.props.minDate}
+              onDayClick={this.handleDayClick}
+              selectedDate={this.props.selectedDate}
+              theme={this.props.theme}
+              viewDate={this.state.viewDate}
+              />
+          </CssTransitionGroup>
+        </div>
+      );
+    }
 
-  renderMonths () {
-    const { theme } = this.props;
-    const animation = this.state.direction === 'left' ? SlideLeft : SlideRight;
-    return (
-      <div data-react-toolbox='calendar'>
-        <IconButton className={theme.prev} icon='chevron_left' onClick={this.changeViewMonth.bind(this, 'left', -1)} />
-        <IconButton className={theme.next} icon='chevron_right' onClick={this.changeViewMonth.bind(this, 'right', 1)} />
-        <CssTransitionGroup transitionName={animation} transitionEnterTimeout={350} transitionLeaveTimeout={350}>
-          <CalendarMonth
-            key={this.state.viewDate.getMonth()}
-            maxDate={this.props.maxDate}
-            minDate={this.props.minDate}
-            viewDate={this.state.viewDate}
-            selectedDate={this.props.selectedDate}
-            onDayClick={this.handleDayClick}
-          />
-        </CssTransitionGroup>
-      </div>
-    );
+    render () {
+      return (
+        <div className={this.props.theme.calendar}>
+          {this.props.display === 'months' ? this.renderMonths() : this.renderYears()}
+        </div>
+      );
+    }
   }
 
-  render () {
-    return (
-      <div className={this.props.theme.calendar}>
-        {this.props.display === 'months' ? this.renderMonths() : this.renderYears()}
-      </div>
-    );
-  }
-}
+  return Calendar;
+};
 
-export default themr('ToolboxDatePicker')(Calendar);
+export default factory;
diff --git a/components/date_picker/CalendarDay.js b/components/date_picker/CalendarDay.js
index 6a278e55a..782065c2f 100644
--- a/components/date_picker/CalendarDay.js
+++ b/components/date_picker/CalendarDay.js
@@ -1,20 +1,19 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import classnames from 'classnames';
-import { themr } from 'react-css-themr';
-import time from '../utils/time';
+import time from '../utils/time.js';
 
 class Day extends React.Component {
   static propTypes = {
-    day: React.PropTypes.number,
-    disabled: React.PropTypes.bool,
-    onClick: React.PropTypes.func,
-    selectedDate: React.PropTypes.object,
-    theme: React.PropTypes.shape({
-      active: React.PropTypes.string.isRequired,
-      day: React.PropTypes.string.isRequired,
-      disabled: React.PropTypes.string.isRequired
+    day: PropTypes.number,
+    disabled: PropTypes.bool,
+    onClick: PropTypes.func,
+    selectedDate: PropTypes.object,
+    theme: PropTypes.shape({
+      active: PropTypes.string.isRequired,
+      day: PropTypes.string.isRequired,
+      disabled: PropTypes.string.isRequired
     }),
-    viewDate: React.PropTypes.object
+    viewDate: PropTypes.object
   };
 
   dayStyle () {
@@ -48,4 +47,4 @@ class Day extends React.Component {
   }
 }
 
-export default themr('ToolboxDatePicker')(Day);
+export default Day;
diff --git a/components/date_picker/CalendarMonth.js b/components/date_picker/CalendarMonth.js
index e3d2016dd..b0e000de8 100644
--- a/components/date_picker/CalendarMonth.js
+++ b/components/date_picker/CalendarMonth.js
@@ -1,22 +1,21 @@
-import React from 'react';
-import { themr } from 'react-css-themr';
-import CalendarDay from './CalendarDay';
-import time from '../utils/time';
-import utils from '../utils/utils';
+import React, { Component, PropTypes } from 'react';
+import time from '../utils/time.js';
+import utils from '../utils/utils.js';
+import CalendarDay from './CalendarDay.js';
 
-class Month extends React.Component {
+class Month extends Component {
   static propTypes = {
-    maxDate: React.PropTypes.object,
-    minDate: React.PropTypes.object,
-    onDayClick: React.PropTypes.func,
-    selectedDate: React.PropTypes.object,
-    theme: React.PropTypes.shape({
-      days: React.PropTypes.string.isRequired,
-      month: React.PropTypes.string.isRequired,
-      title: React.PropTypes.string.isRequired,
-      week: React.PropTypes.string.isRequired
+    maxDate: PropTypes.object,
+    minDate: PropTypes.object,
+    onDayClick: PropTypes.func,
+    selectedDate: PropTypes.object,
+    theme: PropTypes.shape({
+      days: PropTypes.string.isRequired,
+      month: PropTypes.string.isRequired,
+      title: PropTypes.string.isRequired,
+      week: PropTypes.string.isRequired
     }),
-    viewDate: React.PropTypes.object
+    viewDate: PropTypes.object
   };
 
   handleDayClick = (day) => {
@@ -41,6 +40,7 @@ class Month extends React.Component {
           disabled={disabled}
           onClick={!disabled ? this.handleDayClick.bind(this, i) : null}
           selectedDate={this.props.selectedDate}
+          theme={this.props.theme}
           viewDate={this.props.viewDate}
         />
       );
@@ -60,4 +60,4 @@ class Month extends React.Component {
   }
 }
 
-export default themr('ToolboxDatePicker')(Month);
+export default Month;
diff --git a/components/date_picker/DatePicker.js b/components/date_picker/DatePicker.js
index bf85a0968..074311912 100644
--- a/components/date_picker/DatePicker.js
+++ b/components/date_picker/DatePicker.js
@@ -1,84 +1,100 @@
 import React from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
-import DatePickerDialog from './DatePickerDialog';
-import events from '../utils/events';
-import Input from '../input';
-import time from '../utils/time';
+import { DATE_PICKER } from '../identifiers.js';
+import events from '../utils/events.js';
+import time from '../utils/time.js';
 
-class DatePicker extends React.Component {
-  static propTypes = {
-    autoOk: React.PropTypes.bool,
-    className: React.PropTypes.string,
-    error: React.PropTypes.string,
-    icon: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.element
-    ]),
-    inputClassName: React.PropTypes.string,
-    inputFormat: React.PropTypes.func,
-    label: React.PropTypes.string,
-    maxDate: React.PropTypes.object,
-    minDate: React.PropTypes.object,
-    onChange: React.PropTypes.func,
-    theme: React.PropTypes.shape({
-      input: React.PropTypes.string.isRequired
-    }),
-    value: React.PropTypes.oneOfType([
-      React.PropTypes.instanceOf(Date),
-      React.PropTypes.string
-    ])
-  };
+import InjectIconButton from '../button/IconButton.js';
+import InjectInput from '../input/Input.js';
+import InjectDialog from '../dialog/Dialog.js';
+import calendarFactory from './Calendar.js';
+import datePickerDialogFactory from './DatePickerDialog.js';
 
-  state = {
-    active: false
-  };
+const factory = (Input, DatePickerDialog) => {
+  class DatePicker extends React.Component {
+    static propTypes = {
+      autoOk: React.PropTypes.bool,
+      className: React.PropTypes.string,
+      error: React.PropTypes.string,
+      icon: React.PropTypes.oneOfType([
+        React.PropTypes.string,
+        React.PropTypes.element
+      ]),
+      inputClassName: React.PropTypes.string,
+      inputFormat: React.PropTypes.func,
+      label: React.PropTypes.string,
+      maxDate: React.PropTypes.object,
+      minDate: React.PropTypes.object,
+      onChange: React.PropTypes.func,
+      theme: React.PropTypes.shape({
+        input: React.PropTypes.string.isRequired
+      }),
+      value: React.PropTypes.oneOfType([
+        React.PropTypes.instanceOf(Date),
+        React.PropTypes.string
+      ])
+    };
 
-  handleDismiss = () => {
-    this.setState({active: false});
-  };
+    state = {
+      active: false
+    };
 
-  handleInputMouseDown = (event) => {
-    events.pauseEvent(event);
-    this.setState({active: true});
-  };
+    handleDismiss = () => {
+      this.setState({active: false});
+    };
 
-  handleSelect = (value, event) => {
-    if (this.props.onChange) this.props.onChange(value, event);
-    this.setState({active: false});
-  };
+    handleInputMouseDown = (event) => {
+      events.pauseEvent(event);
+      this.setState({active: true});
+    };
 
-  render () {
-    const { inputClassName, value } = this.props;
-    const inputFormat = this.props.inputFormat || time.formatDate;
-    const date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined;
-    const formattedDate = date === undefined ? '' : inputFormat(value);
+    handleSelect = (value, event) => {
+      if (this.props.onChange) this.props.onChange(value, event);
+      this.setState({active: false});
+    };
 
-    return (
-      <div data-react-toolbox='date-picker'>
-        <Input
-          className={classnames(this.props.theme.input, {[inputClassName]: inputClassName })}
-          error={this.props.error}
-          onMouseDown={this.handleInputMouseDown}
-          label={this.props.label}
-          readOnly
-          type='text'
-          icon={this.props.icon}
-          value={formattedDate}
-        />
-        <DatePickerDialog
-          autoOk={this.props.autoOk}
-          active={this.state.active}
-          className={this.props.className}
-          maxDate={this.props.maxDate}
-          minDate={this.props.minDate}
-          onDismiss={this.handleDismiss}
-          onSelect={this.handleSelect}
-          value={date}
-        />
-      </div>
-    );
+    render () {
+      const { inputClassName, value } = this.props;
+      const inputFormat = this.props.inputFormat || time.formatDate;
+      const date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined;
+      const formattedDate = date === undefined ? '' : inputFormat(value);
+
+      return (
+        <div data-react-toolbox='date-picker'>
+          <Input
+            className={classnames(this.props.theme.input, {[inputClassName]: inputClassName })}
+            error={this.props.error}
+            onMouseDown={this.handleInputMouseDown}
+            label={this.props.label}
+            readOnly
+            type='text'
+            icon={this.props.icon}
+            value={formattedDate}
+          />
+          <DatePickerDialog
+            autoOk={this.props.autoOk}
+            active={this.state.active}
+            className={this.props.className}
+            maxDate={this.props.maxDate}
+            minDate={this.props.minDate}
+            onDismiss={this.handleDismiss}
+            onSelect={this.handleSelect}
+            theme={this.props.theme}
+            value={date}
+          />
+        </div>
+      );
+    }
   }
-}
 
-export default themr('ToolboxDatePicker')(DatePicker);
+  return DatePicker;
+};
+
+const Calendar = calendarFactory(InjectIconButton);
+const DatePickerDialog = datePickerDialogFactory(InjectDialog, Calendar);
+const DatePicker = factory(InjectInput, DatePickerDialog);
+
+export default themr(DATE_PICKER)(DatePicker);
+export { factory as datePickerFactory };
+export { DatePicker };
diff --git a/components/date_picker/DatePickerDialog.js b/components/date_picker/DatePickerDialog.js
index 3247fec10..b71aa8a27 100644
--- a/components/date_picker/DatePickerDialog.js
+++ b/components/date_picker/DatePickerDialog.js
@@ -1,92 +1,90 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
-import { themr } from 'react-css-themr';
-import Calendar from './Calendar';
-import Dialog from '../dialog';
-import time from '../utils/time';
-
-class CalendarDialog extends React.Component {
-  static propTypes = {
-    active: React.PropTypes.bool,
-    autoOk: React.PropTypes.bool,
-    className: React.PropTypes.string,
-    maxDate: React.PropTypes.object,
-    minDate: React.PropTypes.object,
-    onDismiss: React.PropTypes.func,
-    onSelect: React.PropTypes.func,
-    theme: React.PropTypes.shape({
-      button: React.PropTypes.string.isRequired,
-      calendarWrapper: React.PropTypes.string.isRequired,
-      date: React.PropTypes.string.isRequired,
-      dialog: React.PropTypes.string.isRequired,
-      header: React.PropTypes.string.isRequired,
-      monthsDisplay: React.PropTypes.string.isRequired,
-      year: React.PropTypes.string.isRequired,
-      yearsDisplay: React.PropTypes.string.isRequired
-    }),
-    value: React.PropTypes.object
-  };
-
-  static defaultProps = {
-    active: false,
-    className: '',
-    value: new Date()
-  };
-
-  state = {
-    display: 'months',
-    date: this.props.value
-  };
-
-  componentWillMount () {
-    this.updateStateDate(this.props.value);
+import time from '../utils/time.js';
 
-  }
+const factory = (Dialog, Calendar) => {
+  class CalendarDialog extends Component {
+    static propTypes = {
+      active: PropTypes.bool,
+      autoOk: PropTypes.bool,
+      className: PropTypes.string,
+      maxDate: PropTypes.object,
+      minDate: PropTypes.object,
+      onDismiss: PropTypes.func,
+      onSelect: PropTypes.func,
+      theme: PropTypes.shape({
+        button: PropTypes.string.isRequired,
+        calendarWrapper: PropTypes.string.isRequired,
+        date: PropTypes.string.isRequired,
+        dialog: PropTypes.string.isRequired,
+        header: PropTypes.string.isRequired,
+        monthsDisplay: PropTypes.string.isRequired,
+        year: PropTypes.string.isRequired,
+        yearsDisplay: PropTypes.string.isRequired
+      }),
+      value: PropTypes.object
+    };
 
-  componentWillReceiveProps (nextProps) {
-    this.updateStateDate(nextProps.value);
-  }
+    static defaultProps = {
+      active: false,
+      className: '',
+      value: new Date()
+    };
+
+    state = {
+      display: 'months',
+      date: this.props.value
+    };
+
+    componentWillMount () {
+      this.updateStateDate(this.props.value);
 
-  handleCalendarChange = (value, dayClick) => {
-    const state = {display: 'months', date: value};
-    if (time.dateOutOfRange(value, this.props.minDate, this.props.maxDate)) {
-      state.date = this.props.maxDate || this.props.minDate;
     }
-    this.setState(state);
-    if (dayClick && this.props.autoOk && this.props.onSelect) {
-      this.props.onSelect(value);
+
+    componentWillReceiveProps (nextProps) {
+      this.updateStateDate(nextProps.value);
     }
-  };
 
-  handleSelect = (event) => {
-    if (this.props.onSelect) this.props.onSelect(this.state.date, event);
-  };
+    handleCalendarChange = (value, dayClick) => {
+      const state = {display: 'months', date: value};
+      if (time.dateOutOfRange(value, this.props.minDate, this.props.maxDate)) {
+        state.date = this.props.maxDate || this.props.minDate;
+      }
+      this.setState(state);
+      if (dayClick && this.props.autoOk && this.props.onSelect) {
+        this.props.onSelect(value);
+      }
+    };
 
-  handleSwitchDisplay = (display) => {
-    this.setState({ display });
-  };
+    handleSelect = (event) => {
+      if (this.props.onSelect) this.props.onSelect(this.state.date, event);
+    };
 
-  updateStateDate = (date) => {
-    if (Object.prototype.toString.call(date) === '[object Date]') {
-      this.setState({
-        date
-      });
+    handleSwitchDisplay = (display) => {
+      this.setState({ display });
+    };
+
+    updateStateDate = (date) => {
+      if (Object.prototype.toString.call(date) === '[object Date]') {
+        this.setState({
+          date
+        });
+      }
     }
-  }
 
-  actions = [
-    { label: 'Cancel', className: this.props.theme.button, onClick: this.props.onDismiss },
-    { label: 'Ok', className: this.props.theme.button, onClick: this.handleSelect }
-  ];
+    actions = [
+      { label: 'Cancel', className: this.props.theme.button, onClick: this.props.onDismiss },
+      { label: 'Ok', className: this.props.theme.button, onClick: this.handleSelect }
+    ];
 
-  render () {
-    const { theme } = this.props;
-    const display = `${this.state.display}Display`;
-    const className = classnames(theme.dialog, this.props.className);
-    const headerClassName = classnames(theme.header, theme[display]);
+    render () {
+      const { theme } = this.props;
+      const display = `${this.state.display}Display`;
+      const className = classnames(theme.dialog, this.props.className);
+      const headerClassName = classnames(theme.header, theme[display]);
 
-    return (
-      <Dialog active={this.props.active} type="custom" className={className} actions={this.actions}>
+      return (
+        <Dialog active={this.props.active} type="custom" className={className} actions={this.actions}>
           <header className={headerClassName}>
             <span className={theme.year} onClick={this.handleSwitchDisplay.bind(this, 'years')}>
               {this.state.date.getFullYear()}
@@ -102,11 +100,15 @@ class CalendarDialog extends React.Component {
               maxDate={this.props.maxDate}
               minDate={this.props.minDate}
               onChange={this.handleCalendarChange}
-              selectedDate={this.state.date} />
+              selectedDate={this.state.date}
+              theme={this.props.theme} />
           </div>
-      </Dialog>
-    );
+        </Dialog>
+      );
+    }
   }
-}
 
-export default themr('ToolboxDatePicker')(CalendarDialog);
+  return CalendarDialog;
+};
+
+export default factory;
diff --git a/components/date_picker/index.js b/components/date_picker/index.js
index 02d322e5e..53d6a11d0 100644
--- a/components/date_picker/index.js
+++ b/components/date_picker/index.js
@@ -1 +1,20 @@
 export default from './DatePicker';
+
+import { themr } from 'react-css-themr';
+import { DATE_PICKER } from '../identifiers.js';
+import { datePickerFactory } from './DatePicker.js';
+import datePickerDialogFactory from './DatePickerDialog.js';
+import calendarFactory from './Calendar.js';
+
+import { IconButton } from '../button';
+import Input from '../input';
+import Dialog from '../dialog';
+import theme from './theme.scss';
+
+const Calendar = calendarFactory(IconButton);
+const DatePickerDialog = datePickerDialogFactory(Dialog, Calendar);
+const DatePicker = datePickerFactory(Input, DatePickerDialog);
+
+const ThemedDatePicker = themr(DATE_PICKER, theme)(DatePicker);
+export default ThemedDatePicker;
+export { ThemedDatePicker as DatePicker };
diff --git a/components/date_picker/readme.md b/components/date_picker/readme.md
index 4de27156c..3f84dc938 100644
--- a/components/date_picker/readme.md
+++ b/components/date_picker/readme.md
@@ -30,6 +30,8 @@ class DatePickerTest extends React.Component {
 }
 ```
 
+If you want to provide a theme via context, the component key is `RTDatePicker`.
+
 ## Properties
 
 | Name            | Type            | Default       | Description|
@@ -44,9 +46,7 @@ class DatePickerTest extends React.Component {
 | `onChange`      | `Function`      |               | Callback called when the picker value is changed.|
 | `value`         | `Date`          |               | Date object with the currently selected date. |
 
-## Theming
-
-You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxDatePicker`, it should implement the following interface:
+## Theme
 
 | Name     | Description|
 |:---------|:-----------|
diff --git a/components/dialog/Dialog.js b/components/dialog/Dialog.js
index ddeec15f9..ec153f61c 100644
--- a/components/dialog/Dialog.js
+++ b/components/dialog/Dialog.js
@@ -1,71 +1,79 @@
 import React from 'react';
 import { themr } from 'react-css-themr';
 import classnames from 'classnames';
-import ActivableRenderer from '../hoc/ActivableRenderer';
-import Button from '../button';
-import Overlay from '../overlay';
+import { DIALOG } from '../identifiers.js';
+import ActivableRenderer from '../hoc/ActivableRenderer.js';
+import InjectButton from '../button/Button.js';
+import InjectOverlay from '../overlay/Overlay.js';
 
-const Dialog = (props) => {
-  const actions = props.actions.map((action, idx) => {
-    const className = classnames(props.theme.button, {[action.className]: action.className});
-    return <Button key={idx} {...action} className={className} />;
-  });
+const factory = (Overlay, Button) => {
+  const Dialog = (props) => {
+    const actions = props.actions.map((action, idx) => {
+      const className = classnames(props.theme.button, {[action.className]: action.className});
+      return <Button key={idx} {...action} className={className} />;
+    });
 
-  const className = classnames([props.theme.dialog, props.theme[props.type]], {
-    [props.theme.active]: props.active
-  }, props.className);
+    const className = classnames([props.theme.dialog, props.theme[props.type]], {
+      [props.theme.active]: props.active
+    }, props.className);
 
-  return (
-    <Overlay
-      active={props.active}
-      onClick={props.onOverlayClick}
-      onMouseDown={props.onOverlayMouseDown}
-      onMouseUp={props.onOverlayMouseUp}
-      onMouseMove={props.onOverlayMouseMove}
-      onEscKeyDown={props.onEscKeyDown}
-    >
-      <div data-react-toolbox='dialog' className={className}>
-        <section role='body' className={props.theme.body}>
-          {props.title ? <h6 className={props.theme.title}>{props.title}</h6> : null}
-          {props.children}
-        </section>
-        {actions.length
-          ? <nav role='navigation' className={props.theme.navigation}>
-              {actions}
-            </nav>
-          : null
-        }
-      </div>
-    </Overlay>
-  );
-};
+    return (
+      <Overlay
+        active={props.active}
+        onClick={props.onOverlayClick}
+        onMouseDown={props.onOverlayMouseDown}
+        onMouseUp={props.onOverlayMouseUp}
+        onMouseMove={props.onOverlayMouseMove}
+        onEscKeyDown={props.onEscKeyDown}
+      >
+        <div data-react-toolbox='dialog' className={className}>
+          <section role='body' className={props.theme.body}>
+            {props.title ? <h6 className={props.theme.title}>{props.title}</h6> : null}
+            {props.children}
+          </section>
+          {actions.length
+            ? <nav role='navigation' className={props.theme.navigation}>
+                {actions}
+              </nav>
+            : null
+          }
+        </div>
+      </Overlay>
+    );
+  };
 
-Dialog.propTypes = {
-  actions: React.PropTypes.array,
-  active: React.PropTypes.bool,
-  children: React.PropTypes.node,
-  className: React.PropTypes.string,
-  onEscKeyDown: React.PropTypes.func,
-  onOverlayClick: React.PropTypes.func,
-  onOverlayMouseDown: React.PropTypes.func,
-  onOverlayMouseMove: React.PropTypes.func,
-  onOverlayMouseUp: React.PropTypes.func,
-  theme: React.PropTypes.shape({
-    active: React.PropTypes.string.isRequired,
-    body: React.PropTypes.string.isRequired,
-    button: React.PropTypes.string.isRequired,
-    dialog: React.PropTypes.string.isRequired,
-    navigation: React.PropTypes.string.isRequired,
-    title: React.PropTypes.string.isRequired
-  }),
-  title: React.PropTypes.string,
-  type: React.PropTypes.string
-};
+  Dialog.propTypes = {
+    actions: React.PropTypes.array,
+    active: React.PropTypes.bool,
+    children: React.PropTypes.node,
+    className: React.PropTypes.string,
+    onEscKeyDown: React.PropTypes.func,
+    onOverlayClick: React.PropTypes.func,
+    onOverlayMouseDown: React.PropTypes.func,
+    onOverlayMouseMove: React.PropTypes.func,
+    onOverlayMouseUp: React.PropTypes.func,
+    theme: React.PropTypes.shape({
+      active: React.PropTypes.string.isRequired,
+      body: React.PropTypes.string.isRequired,
+      button: React.PropTypes.string.isRequired,
+      dialog: React.PropTypes.string.isRequired,
+      navigation: React.PropTypes.string.isRequired,
+      title: React.PropTypes.string.isRequired
+    }),
+    title: React.PropTypes.string,
+    type: React.PropTypes.string
+  };
+
+  Dialog.defaultProps = {
+    actions: [],
+    active: false,
+    type: 'normal'
+  };
 
-Dialog.defaultProps = {
-  actions: [],
-  active: false,
-  type: 'normal'
+  return ActivableRenderer()(Dialog);
 };
 
-export default themr('ToolboxDialog')(ActivableRenderer()(Dialog));
+const Dialog = factory(InjectOverlay, InjectButton);
+export default themr(DIALOG)(Dialog);
+export { Dialog };
+export { factory as dialogFactory };
diff --git a/components/dialog/index.js b/components/dialog/index.js
index 7faed16fa..1236aebb7 100644
--- a/components/dialog/index.js
+++ b/components/dialog/index.js
@@ -1 +1,12 @@
-export default from './Dialog';
+import { themr } from 'react-css-themr';
+import { DIALOG } from '../identifiers.js';
+import { dialogFactory } from './Dialog.js';
+import Overlay from '../overlay';
+import Button from '../button';
+import theme from './theme.scss';
+
+const Dialog = dialogFactory(Overlay, Button);
+const ThemedDialog = themr(DIALOG, theme)(Dialog);
+
+export default ThemedDialog;
+export { ThemedDialog as Dialog };
diff --git a/components/dialog/readme.md b/components/dialog/readme.md
index e12c9d0dd..e7169935f 100644
--- a/components/dialog/readme.md
+++ b/components/dialog/readme.md
@@ -4,7 +4,6 @@
 
 <!-- example -->
 ```jsx
-// Remember to provide default styles with ThemeProvider
 import Dialog from 'react-toolbox/lib/dialog';
 
 class DialogTest extends React.Component {
@@ -40,6 +39,8 @@ class DialogTest extends React.Component {
 }
 ```
 
+If you want to provide a theme via context, the component key is `RTDialog`.
+
 ## Properties
 
 | Name                    | Type            | Default         | Description|
@@ -55,9 +56,7 @@ class DialogTest extends React.Component {
 | `title`                 | `String`        |                 | The text string to use as standar title of the dialog.|
 | `type`                  | `String`        | `normal`        | Used to determine the size of the dialog. It can be `small`, `normal` or `large`. |
 
-## Theming
-
-You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxDialog`, it should implement the following interface:
+## Theme
 
 | Name     | Description|
 |:---------|:-----------|
diff --git a/components/identifiers.js b/components/identifiers.js
index 64a10fcf6..65bcc149e 100644
--- a/components/identifiers.js
+++ b/components/identifiers.js
@@ -4,6 +4,9 @@ export const AVATAR = 'RTAvatar';
 export const BUTTON = 'RTButton';
 export const CARD = 'RTCard';
 export const CHIP = 'RTChip';
+export const DATE_PICKER = 'RTDatePicker';
+export const DIALOG = 'RTDialog';
 export const INPUT = 'RTInput';
+export const OVERLAY = 'RTOverlay';
 export const PROGRESS_BAR = 'RTProgressBar';
 export const RIPPLE = 'RTRipple';
diff --git a/components/overlay/Overlay.js b/components/overlay/Overlay.js
index f38ab5bb2..3dbace314 100644
--- a/components/overlay/Overlay.js
+++ b/components/overlay/Overlay.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
-import Portal from '../hoc/Portal';
+import { OVERLAY } from '../identifiers.js';
+import Portal from '../hoc/Portal.js';
 
 class Overlay extends React.Component {
   static propTypes = {
@@ -72,4 +73,5 @@ class Overlay extends React.Component {
   }
 }
 
-export default themr('ToolboxOverlay')(Overlay);
+export default themr(OVERLAY)(Overlay);
+export { Overlay };
diff --git a/components/overlay/index.js b/components/overlay/index.js
index 5be89753e..818edb280 100644
--- a/components/overlay/index.js
+++ b/components/overlay/index.js
@@ -1 +1,8 @@
-export default from './Overlay';
+import { themr } from 'react-css-themr';
+import { OVERLAY } from '../identifiers.js';
+import { Overlay } from './Overlay.js';
+import theme from './theme.scss';
+
+const ThemedOverlay = themr(OVERLAY, theme)(Overlay);
+export default ThemedOverlay;
+export { ThemedOverlay as Overlay };
diff --git a/spec/theme.js b/spec/theme.js
index 508f9d21f..1ff0a79d6 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -1,8 +1,6 @@
 import '../components/commons.scss';
 
 import ToolboxCheckbox from '../components/checkbox/theme.scss';
-import ToolboxDatePicker from '../components/date_picker/theme.scss';
-import ToolboxDialog from '../components/dialog/theme.scss';
 import ToolboxDrawer from '../components/drawer/theme.scss';
 import ToolboxDropdown from '../components/dropdown/theme.scss';
 import ToolboxLayout from '../components/layout/theme.scss';
@@ -10,7 +8,6 @@ import ToolboxLink from '../components/link/theme.scss';
 import ToolboxList from '../components/list/theme.scss';
 import ToolboxMenu from '../components/menu/theme.scss';
 import ToolboxNavigation from '../components/navigation/theme.scss';
-import ToolboxOverlay from '../components/overlay/theme.scss';
 import ToolboxProgress from '../components/progress_bar/theme.scss';
 import ToolboxRadio from '../components/radio/theme.scss';
 import ToolboxSlider from '../components/slider/theme.scss';
@@ -23,8 +20,6 @@ import ToolboxTooltip from '../components/tooltip/theme.scss';
 
 export default {
   ToolboxCheckbox,
-  ToolboxDatePicker,
-  ToolboxDialog,
   ToolboxDrawer,
   ToolboxDropdown,
   ToolboxLayout,
@@ -32,7 +27,6 @@ export default {
   ToolboxList,
   ToolboxMenu,
   ToolboxNavigation,
-  ToolboxOverlay,
   ToolboxProgress,
   ToolboxRadio,
   ToolboxSlider,

From d48e243ad2d791c0339056dbd5cc1f0f1cf02e48 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 29 May 2016 12:38:20 +0200
Subject: [PATCH 0584/1024] Autoinject Checkbox theme

---
 components/checkbox/Check.js    |  48 ++++++-------
 components/checkbox/Checkbox.js | 123 ++++++++++++++++++--------------
 components/checkbox/index.js    |  13 +++-
 components/checkbox/readme.md   |  10 +--
 spec/theme.js                   |   2 -
 5 files changed, 106 insertions(+), 90 deletions(-)

diff --git a/components/checkbox/Check.js b/components/checkbox/Check.js
index 29a7433c8..a7fe24939 100644
--- a/components/checkbox/Check.js
+++ b/components/checkbox/Check.js
@@ -1,32 +1,28 @@
 import React, { PropTypes } from 'react';
 import classnames from 'classnames';
-import { themr } from 'react-css-themr';
-import Ripple from '../ripple';
 
-const Check = ({checked, children, onMouseDown, theme}) => (
-  <div
-    data-react-toolbox='check'
-    className={classnames(theme.check, { [theme.checked]: checked })}
-    onMouseDown={onMouseDown}
-  >
-    {children}
-  </div>
-);
+const factory = (ripple) => {
+  const Check = ({checked, children, onMouseDown, theme}) => (
+    <div
+      data-react-toolbox='check'
+      className={classnames(theme.check, { [theme.checked]: checked })}
+      onMouseDown={onMouseDown}
+    >
+      {children}
+    </div>
+  );
 
-Check.propTypes = {
-  checked: PropTypes.bool,
-  children: PropTypes.any,
-  onMouseDown: PropTypes.func,
-  theme: React.PropTypes.shape({
-    check: React.PropTypes.string.isRequired,
-    checked: React.PropTypes.string.isRequired
-  })
-};
+  Check.propTypes = {
+    checked: PropTypes.bool,
+    children: PropTypes.any,
+    onMouseDown: PropTypes.func,
+    theme: React.PropTypes.shape({
+      check: React.PropTypes.string.isRequired,
+      checked: React.PropTypes.string.isRequired
+    })
+  };
 
-const RawCheck = themr('ToolboxCheckbox')(Check);
-export default themr('ToolboxCheckbox')(Ripple({
-  spread: 2.6,
-  centered: true
-})(Check));
+  return ripple(Check);
+};
 
-export {RawCheck as RawCheck};
+export default factory;
diff --git a/components/checkbox/Checkbox.js b/components/checkbox/Checkbox.js
index 285b5e867..1b49b4993 100644
--- a/components/checkbox/Checkbox.js
+++ b/components/checkbox/Checkbox.js
@@ -1,65 +1,80 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
-import Check from './Check';
+import { CHECKBOX } from '../identifiers.js';
+import rippleFactory from '../ripple/Ripple.js';
+import checkFactory from './Check.js';
 
-class Checkbox extends React.Component {
-  static propTypes = {
-    checked: React.PropTypes.bool,
-    className: React.PropTypes.string,
-    disabled: React.PropTypes.bool,
-    label: React.PropTypes.any,
-    onChange: React.PropTypes.func,
-    theme: React.PropTypes.shape({
-      disabled: React.PropTypes.string.isRequired,
-      field: React.PropTypes.string.isRequired,
-      input: React.PropTypes.string.isRequired,
-      ripple: React.PropTypes.string.isRequired
-    })
-  };
+const factory = (Check) => {
+  class Checkbox extends Component {
+    static propTypes = {
+      checked: PropTypes.bool,
+      className: PropTypes.string,
+      disabled: PropTypes.bool,
+      label: PropTypes.any,
+      onChange: PropTypes.func,
+      theme: PropTypes.shape({
+        disabled: PropTypes.string.isRequired,
+        field: PropTypes.string.isRequired,
+        input: PropTypes.string.isRequired,
+        ripple: PropTypes.string.isRequired
+      })
+    };
 
-  static defaultProps = {
-    checked: false,
-    className: '',
-    disabled: false
-  };
+    static defaultProps = {
+      checked: false,
+      className: '',
+      disabled: false
+    };
 
-  handleToggle = (event) => {
-    if (event.pageX !== 0 && event.pageY !== 0) this.blur();
-    if (!this.props.disabled && this.props.onChange) {
-      this.props.onChange(!this.props.checked, event);
-    }
-  };
+    handleToggle = (event) => {
+      if (event.pageX !== 0 && event.pageY !== 0) this.blur();
+      if (!this.props.disabled && this.props.onChange) {
+        this.props.onChange(!this.props.checked, event);
+      }
+    };
 
-  blur () {
-    this.refs.input.blur();
-  }
+    blur () {
+      this.refs.input.blur();
+    }
 
-  focus () {
-    this.refs.input.focus();
-  }
+    focus () {
+      this.refs.input.focus();
+    }
 
-  render () {
-    const { onChange, theme, ...others } = this.props; //eslint-disable-line no-unused-vars
-    const className = classnames(theme.field, {
-      [theme.disabled]: this.props.disabled
-    }, this.props.className);
+    render () {
+      const { onChange, theme, ...others } = this.props; //eslint-disable-line no-unused-vars
+      const className = classnames(theme.field, {
+        [theme.disabled]: this.props.disabled
+      }, this.props.className);
 
-    return (
-      <label data-react-toolbox='checkbox' className={className}>
-        <input
-          {...others}
-          className={theme.input}
-          onClick={this.handleToggle}
-          readOnly
-          ref='input'
-          type='checkbox'
-        />
-        <Check rippleClassName={theme.ripple} checked={this.props.checked} disabled={this.props.disabled}/>
-        {this.props.label ? <span data-react-toolbox='label' className={theme.text}>{this.props.label}</span> : null}
-      </label>
-    );
+      return (
+        <label data-react-toolbox='checkbox' className={className}>
+          <input
+            {...others}
+            className={theme.input}
+            onClick={this.handleToggle}
+            readOnly
+            ref='input'
+            type='checkbox'
+          />
+          <Check
+            checked={this.props.checked}
+            disabled={this.props.disabled}
+            rippleClassName={theme.ripple}
+            theme={this.props.theme}
+          />
+          {this.props.label ? <span data-react-toolbox='label' className={theme.text}>{this.props.label}</span> : null}
+        </label>
+      );
+    }
   }
-}
 
-export default themr('ToolboxCheckbox')(Checkbox);
+  return Checkbox;
+};
+
+const Check = checkFactory(rippleFactory({ centered: true, spread: 2.6}));
+const Checkbox = factory(Check);
+export default themr(CHECKBOX)(Checkbox);
+export { factory as checkboxFactory };
+export { Checkbox };
diff --git a/components/checkbox/index.js b/components/checkbox/index.js
index f3d29de1e..5f89939a9 100644
--- a/components/checkbox/index.js
+++ b/components/checkbox/index.js
@@ -1 +1,12 @@
-export default from './Checkbox';
+import { themr } from 'react-css-themr';
+import { CHECKBOX } from '../identifiers.js';
+import themedRippleFactory from '../ripple';
+import { checkboxFactory } from './Checkbox.js';
+import checkFactory from './Check.js';
+import theme from './theme.scss';
+
+const ThemedCheck = checkFactory(themedRippleFactory({ centered: true, spread: 2.6}));
+const ThemedCheckbox = themr(CHECKBOX, theme)(checkboxFactory(ThemedCheck));
+
+export default ThemedCheckbox;
+export { ThemedCheckbox as Checkbox };
diff --git a/components/checkbox/readme.md b/components/checkbox/readme.md
index deff23e72..a8fa86601 100644
--- a/components/checkbox/readme.md
+++ b/components/checkbox/readme.md
@@ -5,7 +5,6 @@
 <!-- example -->
 ```jsx
 import Checkbox from 'react-toolbox/lib/checkbox';
-import theme from 'react-toolbox/lib/checkbox/theme';
 
 class TestCheckbox extends React.Component {
   state = { check1: true, check2: false };
@@ -21,19 +20,16 @@ class TestCheckbox extends React.Component {
           checked={this.state.check1}
           label="Checked option"
           onChange={this.handleChange.bind(this, 'check1')}
-          theme={theme}
         />
         <Checkbox
           checked={this.state.check2}
           label="Unchecked option"
           onChange={this.handleChange.bind(this, 'check2')}
-          theme={theme}
         />
         <Checkbox
           checked
           disabled
           label="Disabled checkbox"
-          theme={theme}
         />
       </div>
     );
@@ -41,6 +37,8 @@ class TestCheckbox extends React.Component {
 }
 ```
 
+If you want to provide a theme via context, the component key is `RTCheckbox`.
+
 ## Properties
 
 | Name              | Type          | Default         | Description|
@@ -54,9 +52,7 @@ class TestCheckbox extends React.Component {
 | `onChange`      | `Function`      |                 | Callback called when the checkbox value is changed.|
 | `onFocus`       | `Function`      |                 | Callback called when the checkbox is focused |
 
-## Theming
-
-You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxCheckbox`, it should implement the following interface:
+## Theme
 
 | Name     | Description|
 |:---------|:-----------|
diff --git a/spec/theme.js b/spec/theme.js
index 1ff0a79d6..3835c6f03 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -1,6 +1,5 @@
 import '../components/commons.scss';
 
-import ToolboxCheckbox from '../components/checkbox/theme.scss';
 import ToolboxDrawer from '../components/drawer/theme.scss';
 import ToolboxDropdown from '../components/dropdown/theme.scss';
 import ToolboxLayout from '../components/layout/theme.scss';
@@ -19,7 +18,6 @@ import ToolboxTimePicker from '../components/time_picker/theme.scss';
 import ToolboxTooltip from '../components/tooltip/theme.scss';
 
 export default {
-  ToolboxCheckbox,
   ToolboxDrawer,
   ToolboxDropdown,
   ToolboxLayout,

From 1386a1551d225fe28552576322ef483cd99ccb5b Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 29 May 2016 12:47:27 +0200
Subject: [PATCH 0585/1024] Destructuring React for some components

---
 components/autocomplete/Autocomplete.js | 48 ++++++++++++-------------
 components/avatar/Avatar.js             |  2 +-
 components/date_picker/Calendar.js      | 28 +++++++--------
 components/date_picker/CalendarDay.js   |  4 +--
 components/date_picker/DatePicker.js    | 38 ++++++++++----------
 components/dialog/Dialog.js             | 38 ++++++++++----------
 components/font_icon/FontIcon.js        | 12 +++----
 components/form/Form.js                 | 26 +++++++-------
 8 files changed, 98 insertions(+), 98 deletions(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index 94924823b..bdcd31228 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
@@ -14,31 +14,31 @@ const POSITION = {
 };
 
 const factory = (Chip, Input) => {
-  class Autocomplete extends React.Component {
+  class Autocomplete extends Component {
    static propTypes = {
-     className: React.PropTypes.string,
-     direction: React.PropTypes.oneOf(['auto', 'up', 'down']),
-     disabled: React.PropTypes.bool,
-     error: React.PropTypes.string,
-     label: React.PropTypes.string,
-     multiple: React.PropTypes.bool,
-     onChange: React.PropTypes.func,
-     selectedPosition: React.PropTypes.oneOf(['above', 'below']),
-     showSuggestionsWhenValueIsSet: React.PropTypes.bool,
-     source: React.PropTypes.any,
-     theme: React.PropTypes.shape({
-       active: React.PropTypes.string.isRequired,
-       autocomplete: React.PropTypes.string.isRequired,
-       focus: React.PropTypes.string.isRequired,
-       input: React.PropTypes.string.isRequired,
-       label: React.PropTypes.string.isRequired,
-       suggestion: React.PropTypes.string.isRequired,
-       suggestions: React.PropTypes.string.isRequired,
-       up: React.PropTypes.string.isRequired,
-       value: React.PropTypes.string.isRequired,
-       values: React.PropTypes.string.isRequired
+     className: PropTypes.string,
+     direction: PropTypes.oneOf(['auto', 'up', 'down']),
+     disabled: PropTypes.bool,
+     error: PropTypes.string,
+     label: PropTypes.string,
+     multiple: PropTypes.bool,
+     onChange: PropTypes.func,
+     selectedPosition: PropTypes.oneOf(['above', 'below']),
+     showSuggestionsWhenValueIsSet: PropTypes.bool,
+     source: PropTypes.any,
+     theme: PropTypes.shape({
+       active: PropTypes.string.isRequired,
+       autocomplete: PropTypes.string.isRequired,
+       focus: PropTypes.string.isRequired,
+       input: PropTypes.string.isRequired,
+       label: PropTypes.string.isRequired,
+       suggestion: PropTypes.string.isRequired,
+       suggestions: PropTypes.string.isRequired,
+       up: PropTypes.string.isRequired,
+       value: PropTypes.string.isRequired,
+       values: PropTypes.string.isRequired
      }),
-     value: React.PropTypes.any
+     value: PropTypes.any
    };
 
    static defaultProps = {
diff --git a/components/avatar/Avatar.js b/components/avatar/Avatar.js
index c1403ea21..98b98c969 100644
--- a/components/avatar/Avatar.js
+++ b/components/avatar/Avatar.js
@@ -1,4 +1,4 @@
-import React, {PropTypes} from 'react';
+import React, { PropTypes } from 'react';
 import { themr } from 'react-css-themr';
 import { AVATAR } from '../identifiers.js';
 import InjectFontIcon from '../font_icon/FontIcon.js';
diff --git a/components/date_picker/Calendar.js b/components/date_picker/Calendar.js
index 36d7c6ea2..50a48d26a 100644
--- a/components/date_picker/Calendar.js
+++ b/components/date_picker/Calendar.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import CssTransitionGroup from 'react-addons-css-transition-group';
 import { SlideLeft, SlideRight } from '../animations';
 import time from '../utils/time.js';
@@ -6,21 +6,21 @@ import utils from '../utils/utils.js';
 import CalendarMonth from './CalendarMonth.js';
 
 const factory = (IconButton) => {
-  class Calendar extends React.Component {
+  class Calendar extends Component {
     static propTypes = {
-      display: React.PropTypes.oneOf(['months', 'years']),
-      maxDate: React.PropTypes.object,
-      minDate: React.PropTypes.object,
-      onChange: React.PropTypes.func,
-      selectedDate: React.PropTypes.object,
-      theme: React.PropTypes.shape({
-        active: React.PropTypes.string.isRequired,
-        calendar: React.PropTypes.string.isRequired,
-        next: React.PropTypes.string.isRequired,
-        prev: React.PropTypes.string.isRequired,
-        years: React.PropTypes.string.isRequired
+      display: PropTypes.oneOf(['months', 'years']),
+      maxDate: PropTypes.object,
+      minDate: PropTypes.object,
+      onChange: PropTypes.func,
+      selectedDate: PropTypes.object,
+      theme: PropTypes.shape({
+        active: PropTypes.string.isRequired,
+        calendar: PropTypes.string.isRequired,
+        next: PropTypes.string.isRequired,
+        prev: PropTypes.string.isRequired,
+        years: PropTypes.string.isRequired
       }),
-      viewDate: React.PropTypes.object
+      viewDate: PropTypes.object
     };
 
     static defaultProps = {
diff --git a/components/date_picker/CalendarDay.js b/components/date_picker/CalendarDay.js
index 782065c2f..d58dcc1b6 100644
--- a/components/date_picker/CalendarDay.js
+++ b/components/date_picker/CalendarDay.js
@@ -1,8 +1,8 @@
-import React, { PropTypes } from 'react';
+import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
 import time from '../utils/time.js';
 
-class Day extends React.Component {
+class Day extends Component {
   static propTypes = {
     day: PropTypes.number,
     disabled: PropTypes.bool,
diff --git a/components/date_picker/DatePicker.js b/components/date_picker/DatePicker.js
index 074311912..788303aec 100644
--- a/components/date_picker/DatePicker.js
+++ b/components/date_picker/DatePicker.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
 import { DATE_PICKER } from '../identifiers.js';
@@ -12,27 +12,27 @@ import calendarFactory from './Calendar.js';
 import datePickerDialogFactory from './DatePickerDialog.js';
 
 const factory = (Input, DatePickerDialog) => {
-  class DatePicker extends React.Component {
+  class DatePicker extends Component {
     static propTypes = {
-      autoOk: React.PropTypes.bool,
-      className: React.PropTypes.string,
-      error: React.PropTypes.string,
-      icon: React.PropTypes.oneOfType([
-        React.PropTypes.string,
-        React.PropTypes.element
+      autoOk: PropTypes.bool,
+      className: PropTypes.string,
+      error: PropTypes.string,
+      icon: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.element
       ]),
-      inputClassName: React.PropTypes.string,
-      inputFormat: React.PropTypes.func,
-      label: React.PropTypes.string,
-      maxDate: React.PropTypes.object,
-      minDate: React.PropTypes.object,
-      onChange: React.PropTypes.func,
-      theme: React.PropTypes.shape({
-        input: React.PropTypes.string.isRequired
+      inputClassName: PropTypes.string,
+      inputFormat: PropTypes.func,
+      label: PropTypes.string,
+      maxDate: PropTypes.object,
+      minDate: PropTypes.object,
+      onChange: PropTypes.func,
+      theme: PropTypes.shape({
+        input: PropTypes.string.isRequired
       }),
-      value: React.PropTypes.oneOfType([
-        React.PropTypes.instanceOf(Date),
-        React.PropTypes.string
+      value: PropTypes.oneOfType([
+        PropTypes.instanceOf(Date),
+        PropTypes.string
       ])
     };
 
diff --git a/components/dialog/Dialog.js b/components/dialog/Dialog.js
index ec153f61c..a875997b8 100644
--- a/components/dialog/Dialog.js
+++ b/components/dialog/Dialog.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import { themr } from 'react-css-themr';
 import classnames from 'classnames';
 import { DIALOG } from '../identifiers.js';
@@ -43,25 +43,25 @@ const factory = (Overlay, Button) => {
   };
 
   Dialog.propTypes = {
-    actions: React.PropTypes.array,
-    active: React.PropTypes.bool,
-    children: React.PropTypes.node,
-    className: React.PropTypes.string,
-    onEscKeyDown: React.PropTypes.func,
-    onOverlayClick: React.PropTypes.func,
-    onOverlayMouseDown: React.PropTypes.func,
-    onOverlayMouseMove: React.PropTypes.func,
-    onOverlayMouseUp: React.PropTypes.func,
-    theme: React.PropTypes.shape({
-      active: React.PropTypes.string.isRequired,
-      body: React.PropTypes.string.isRequired,
-      button: React.PropTypes.string.isRequired,
-      dialog: React.PropTypes.string.isRequired,
-      navigation: React.PropTypes.string.isRequired,
-      title: React.PropTypes.string.isRequired
+    actions: PropTypes.array,
+    active: PropTypes.bool,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    onEscKeyDown: PropTypes.func,
+    onOverlayClick: PropTypes.func,
+    onOverlayMouseDown: PropTypes.func,
+    onOverlayMouseMove: PropTypes.func,
+    onOverlayMouseUp: PropTypes.func,
+    theme: PropTypes.shape({
+      active: PropTypes.string.isRequired,
+      body: PropTypes.string.isRequired,
+      button: PropTypes.string.isRequired,
+      dialog: PropTypes.string.isRequired,
+      navigation: PropTypes.string.isRequired,
+      title: PropTypes.string.isRequired
     }),
-    title: React.PropTypes.string,
-    type: React.PropTypes.string
+    title: PropTypes.string,
+    type: PropTypes.string
   };
 
   Dialog.defaultProps = {
diff --git a/components/font_icon/FontIcon.js b/components/font_icon/FontIcon.js
index d5c00e393..eb3673e84 100644
--- a/components/font_icon/FontIcon.js
+++ b/components/font_icon/FontIcon.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import classnames from 'classnames';
 
 const FontIcon = ({ children, className, value, ...other}) => (
@@ -13,11 +13,11 @@ const FontIcon = ({ children, className, value, ...other}) => (
 );
 
 FontIcon.propTypes = {
-  children: React.PropTypes.any,
-  className: React.PropTypes.string,
-  value: React.PropTypes.oneOfType([
-    React.PropTypes.string,
-    React.PropTypes.element
+  children: PropTypes.any,
+  className: PropTypes.string,
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element
   ])
 };
 
diff --git a/components/form/Form.js b/components/form/Form.js
index 87fbb0edf..75601eb81 100644
--- a/components/form/Form.js
+++ b/components/form/Form.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import Autocomplete from '../autocomplete';
 import Button from '../button';
 import Checkbox from '../checkbox';
@@ -10,7 +10,7 @@ import Slider from '../slider';
 import Switch from '../switch';
 import TimePicker from '../time_picker';
 
-const Component = {
+const COMPONENTS = {
   'autocomplete': Autocomplete,
   'button': Button,
   'checkbox': Checkbox,
@@ -23,17 +23,17 @@ const Component = {
   'timepicker': TimePicker
 };
 
-class Form extends React.Component {
+class Form extends Component {
   static propTypes = {
-    attributes: React.PropTypes.array,
-    children: React.PropTypes.node,
-    className: React.PropTypes.string,
-    model: React.PropTypes.object,
-    onChange: React.PropTypes.func,
-    onError: React.PropTypes.func,
-    onSubmit: React.PropTypes.func,
-    onValid: React.PropTypes.func,
-    storage: React.PropTypes.string
+    attributes: PropTypes.array,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    model: PropTypes.object,
+    onChange: PropTypes.func,
+    onError: PropTypes.func,
+    onSubmit: PropTypes.func,
+    onValid: PropTypes.func,
+    storage: PropTypes.string
   };
 
   static defaultProps = {
@@ -53,7 +53,7 @@ class Form extends React.Component {
   renderFields () {
     return Object.keys(this.props.model).map((field, index) => {
       const properties = this.props.model[field];
-      const Field = Component[properties.kind.toLowerCase()];
+      const Field = COMPONENTS[properties.kind.toLowerCase()];
       return <Field key={index} {...properties} onChange={this.onChange.bind(this, field)} />;
     });
   }

From 3827ed3aab8712f55da2416e1d27d6d521a04bad Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 29 May 2016 12:54:29 +0200
Subject: [PATCH 0586/1024] Autoinject Drawer theme

---
 components/drawer/Drawer.js | 80 ++++++++++++++++++++-----------------
 components/drawer/index.js  | 12 +++++-
 components/drawer/readme.md | 10 ++---
 spec/theme.js               |  2 -
 4 files changed, 59 insertions(+), 45 deletions(-)

diff --git a/components/drawer/Drawer.js b/components/drawer/Drawer.js
index 5f0894674..7c3576294 100644
--- a/components/drawer/Drawer.js
+++ b/components/drawer/Drawer.js
@@ -1,44 +1,52 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import { themr } from 'react-css-themr';
 import classnames from 'classnames';
-import ActivableRenderer from '../hoc/ActivableRenderer';
-import Overlay from '../overlay';
+import { DRAWER } from '../identifiers.js';
+import ActivableRenderer from '../hoc/ActivableRenderer.js';
+import InjectOverlay from '../overlay/Overlay.js';
 
-const Drawer = ({ active, children, className, onOverlayClick, theme, type }) => {
-  const _className = classnames([theme.drawer, theme[type]], {
-    [theme.active]: active
-  }, className);
+const factory = (Overlay) => {
+  const Drawer = ({ active, children, className, onOverlayClick, theme, type }) => {
+    const _className = classnames([theme.drawer, theme[type]], {
+      [theme.active]: active
+    }, className);
 
-  return (
-    <Overlay active={active} onClick={onOverlayClick}>
-      <div data-react-toolbox='drawer' className={_className}>
-        <aside className={theme.content}>
-          {children}
-        </aside>
-      </div>
-    </Overlay>
-  );
-};
+    return (
+      <Overlay active={active} onClick={onOverlayClick}>
+        <div data-react-toolbox='drawer' className={_className}>
+          <aside className={theme.content}>
+            {children}
+          </aside>
+        </div>
+      </Overlay>
+    );
+  };
 
-Drawer.propTypes = {
-  active: React.PropTypes.bool,
-  children: React.PropTypes.node,
-  className: React.PropTypes.string,
-  onOverlayClick: React.PropTypes.func,
-  theme: React.PropTypes.shape({
-    active: React.PropTypes.string.isRequired,
-    content: React.PropTypes.string.isRequired,
-    drawer: React.PropTypes.string.isRequired,
-    left: React.PropTypes.string.isRequired,
-    right: React.PropTypes.string.isRequired
-  }),
-  type: React.PropTypes.oneOf(['left', 'right'])
-};
+  Drawer.propTypes = {
+    active: PropTypes.bool,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    onOverlayClick: PropTypes.func,
+    theme: PropTypes.shape({
+      active: PropTypes.string.isRequired,
+      content: PropTypes.string.isRequired,
+      drawer: PropTypes.string.isRequired,
+      left: PropTypes.string.isRequired,
+      right: PropTypes.string.isRequired
+    }),
+    type: PropTypes.oneOf(['left', 'right'])
+  };
+
+  Drawer.defaultProps = {
+    active: false,
+    className: '',
+    type: 'left'
+  };
 
-Drawer.defaultProps = {
-  active: false,
-  className: '',
-  type: 'left'
+  return ActivableRenderer()(Drawer);
 };
 
-export default themr('ToolboxDrawer')(ActivableRenderer()(Drawer));
+const Drawer = factory(InjectOverlay);
+export default themr(DRAWER)(Drawer);
+export { factory as drawerFactory };
+export { Drawer };
diff --git a/components/drawer/index.js b/components/drawer/index.js
index 717461790..8196b783c 100644
--- a/components/drawer/index.js
+++ b/components/drawer/index.js
@@ -1 +1,11 @@
-export default from './Drawer';
+import { themr } from 'react-css-themr';
+import { DRAWER } from '../identifiers.js';
+import { Overlay } from '../overlay';
+import { drawerFactory } from './Drawer.js';
+import theme from './theme.scss';
+
+const Drawer = drawerFactory(Overlay);
+const ThemedDrawer = themr(DRAWER, theme)(Drawer);
+
+export default ThemedDrawer;
+export { ThemedDrawer as Drawer };
diff --git a/components/drawer/readme.md b/components/drawer/readme.md
index 1ba97bfbc..fe28bb9f7 100644
--- a/components/drawer/readme.md
+++ b/components/drawer/readme.md
@@ -5,8 +5,6 @@ The [navigation drawer](https://www.google.com/design/spec/patterns/navigation-d
 <!-- example -->
 ```jsx
 import Drawer from 'react-toolbox/lib/drawer';
-import theme from 'react-toolbox/lib/drawer/theme';
-// Remember you can add styles using ThemeProvider
 
 class DrawerTest extends React.Component {
   state = {
@@ -21,7 +19,7 @@ class DrawerTest extends React.Component {
     return (
       <div>
         <Button label='Show Drawer' raised accent onClick={this.handleToggle} />
-        <Drawer active={this.state.active} onOverlayClick={this.handleToggle} theme={theme}>
+        <Drawer active={this.state.active} onOverlayClick={this.handleToggle}>
           <h5>This is your Drawer.</h5>
           <p>You can embed any content you want, for example a Menu.</p>
         </Drawer>
@@ -31,6 +29,8 @@ class DrawerTest extends React.Component {
 }
 ```
 
+If you want to provide a theme via context, the component key is `RTDrawer`.
+
 ## Properties
 
 | Name              | Type          | Default         | Description|
@@ -40,9 +40,7 @@ class DrawerTest extends React.Component {
 | `onOverlayClick`  | `Function`      |               | Callback function to be invoked when the overlay is clicked.|
 | `type`            | `String`        | `left`        | Type of drawer. It can be `left` or `right` to display the drawer on the left or right side of the screen.|
 
-## Theming
-
-You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxDrawer`, it should implement the following interface:
+## Theme
 
 | Name     | Description|
 |:---------|:-----------|
diff --git a/spec/theme.js b/spec/theme.js
index 3835c6f03..243fe852c 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -1,6 +1,5 @@
 import '../components/commons.scss';
 
-import ToolboxDrawer from '../components/drawer/theme.scss';
 import ToolboxDropdown from '../components/dropdown/theme.scss';
 import ToolboxLayout from '../components/layout/theme.scss';
 import ToolboxLink from '../components/link/theme.scss';
@@ -18,7 +17,6 @@ import ToolboxTimePicker from '../components/time_picker/theme.scss';
 import ToolboxTooltip from '../components/tooltip/theme.scss';
 
 export default {
-  ToolboxDrawer,
   ToolboxDropdown,
   ToolboxLayout,
   ToolboxLink,

From 7a241e93ae90bd60410d10b59b1d542979129c33 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 29 May 2016 19:37:40 +0200
Subject: [PATCH 0587/1024] Autoinject theme for dropdown

---
 components/dropdown/Dropdown.js | 302 ++++++++++++++++----------------
 components/dropdown/index.js    |  12 +-
 components/dropdown/readme.md   |  62 ++++---
 components/identifiers.js       |   1 +
 spec/theme.js                   |   2 -
 5 files changed, 197 insertions(+), 182 deletions(-)

diff --git a/components/dropdown/Dropdown.js b/components/dropdown/Dropdown.js
index 7207fd709..c60413842 100644
--- a/components/dropdown/Dropdown.js
+++ b/components/dropdown/Dropdown.js
@@ -1,165 +1,173 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
-import events from '../utils/events';
-import Input from '../input';
-
-class Dropdown extends React.Component {
-  static propTypes = {
-    allowBlank: React.PropTypes.bool,
-    auto: React.PropTypes.bool,
-    className: React.PropTypes.string,
-    disabled: React.PropTypes.bool,
-    error: React.PropTypes.string,
-    label: React.PropTypes.string,
-    onBlur: React.PropTypes.func,
-    onChange: React.PropTypes.func,
-    onFocus: React.PropTypes.func,
-    source: React.PropTypes.array.isRequired,
-    template: React.PropTypes.func,
-    theme: React.PropTypes.shape({
-      active: React.PropTypes.string.isRequired,
-      disabled: React.PropTypes.string.isRequired,
-      dropdown: React.PropTypes.string.isRequired,
-      error: React.PropTypes.string.isRequired,
-      errored: React.PropTypes.string.isRequired,
-      field: React.PropTypes.string.isRequired,
-      label: React.PropTypes.string.isRequired,
-      selected: React.PropTypes.string.isRequired,
-      templateValue: React.PropTypes.string.isRequired,
-      up: React.PropTypes.string.isRequired,
-      value: React.PropTypes.string.isRequired,
-      values: React.PropTypes.string.isRequired
-    }),
-    value: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.number
-    ])
-  };
-
-  static defaultProps = {
-    auto: true,
-    className: '',
-    allowBlank: true,
-    disabled: false
-  };
-
-  state = {
-    active: false,
-    up: false
-  };
-
-  componentWillUpdate (nextProps, nextState) {
-    if (!this.state.active && nextState.active) {
-      events.addEventsToDocument({click: this.handleDocumentClick});
+import { DROPDOWN } from '../identifiers.js';
+import InjectInput from '../input/Input.js';
+import events from '../utils/events.js';
+
+const factory = (Input) => {
+  class Dropdown extends Component {
+    static propTypes = {
+      allowBlank: PropTypes.bool,
+      auto: PropTypes.bool,
+      className: PropTypes.string,
+      disabled: PropTypes.bool,
+      error: PropTypes.string,
+      label: PropTypes.string,
+      onBlur: PropTypes.func,
+      onChange: PropTypes.func,
+      onFocus: PropTypes.func,
+      source: PropTypes.array.isRequired,
+      template: PropTypes.func,
+      theme: PropTypes.shape({
+        active: PropTypes.string.isRequired,
+        disabled: PropTypes.string.isRequired,
+        dropdown: PropTypes.string.isRequired,
+        error: PropTypes.string.isRequired,
+        errored: PropTypes.string.isRequired,
+        field: PropTypes.string.isRequired,
+        label: PropTypes.string.isRequired,
+        selected: PropTypes.string.isRequired,
+        templateValue: PropTypes.string.isRequired,
+        up: PropTypes.string.isRequired,
+        value: PropTypes.string.isRequired,
+        values: PropTypes.string.isRequired
+      }),
+      value: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number
+      ])
+    };
+
+    static defaultProps = {
+      auto: true,
+      className: '',
+      allowBlank: true,
+      disabled: false
+    };
+
+    state = {
+      active: false,
+      up: false
+    };
+
+    componentWillUpdate (nextProps, nextState) {
+      if (!this.state.active && nextState.active) {
+        events.addEventsToDocument({click: this.handleDocumentClick});
+      }
     }
-  }
 
-  componentDidUpdate (prevProps, prevState) {
-    if (prevState.active && !this.state.active) {
-      events.removeEventsFromDocument({click: this.handleDocumentClick});
+    componentDidUpdate (prevProps, prevState) {
+      if (prevState.active && !this.state.active) {
+        events.removeEventsFromDocument({click: this.handleDocumentClick});
+      }
     }
-  }
 
-  componentWillUnmount () {
-    if (this.state.active) {
-      events.removeEventsFromDocument({click: this.handleDocumentClick});
+    componentWillUnmount () {
+      if (this.state.active) {
+        events.removeEventsFromDocument({click: this.handleDocumentClick});
+      }
     }
-  }
 
-  close = () => {
-    if (this.state.active) {
-      this.setState({active: false});
+    close = () => {
+      if (this.state.active) {
+        this.setState({active: false});
+      }
     }
-  }
 
-  handleDocumentClick = (event) => {
-    if (this.state.active && !events.targetIsDescendant(event, ReactDOM.findDOMNode(this))) {
-      this.setState({active: false});
-    }
-  };
-
-  handleMouseDown = (event) => {
-    events.pauseEvent(event);
-    const client = event.target.getBoundingClientRect();
-    const screen_height = window.innerHeight || document.documentElement.offsetHeight;
-    const up = this.props.auto ? client.top > ((screen_height / 2) + client.height) : false;
-    if (this.props.onFocus) this.props.onFocus(event);
-    this.setState({active: true, up});
-  };
-
-  handleSelect = (item, event) => {
-    if (this.props.onBlur) this.props.onBlur(event);
-    if (!this.props.disabled && this.props.onChange) {
-      this.props.onChange(item, event);
-      this.setState({active: false});
+    handleDocumentClick = (event) => {
+      if (this.state.active && !events.targetIsDescendant(event, ReactDOM.findDOMNode(this))) {
+        this.setState({active: false});
+      }
+    };
+
+    handleMouseDown = (event) => {
+      events.pauseEvent(event);
+      const client = event.target.getBoundingClientRect();
+      const screen_height = window.innerHeight || document.documentElement.offsetHeight;
+      const up = this.props.auto ? client.top > ((screen_height / 2) + client.height) : false;
+      if (this.props.onFocus) this.props.onFocus(event);
+      this.setState({active: true, up});
+    };
+
+    handleSelect = (item, event) => {
+      if (this.props.onBlur) this.props.onBlur(event);
+      if (!this.props.disabled && this.props.onChange) {
+        this.props.onChange(item, event);
+        this.setState({active: false});
+      }
+    };
+
+    getSelectedItem = () => {
+      for (const item of this.props.source) {
+        if (item.value === this.props.value) return item;
+      }
+      if (!this.props.allowBlank) {
+        return this.props.source[0];
+      }
+    };
+
+    renderTemplateValue (selected) {
+      const { theme } = this.props;
+      const className = classnames(theme.field, {
+        [theme.errored]: this.props.error,
+        [theme.disabled]: this.props.disabled
+      });
+
+      return (
+        <div className={className} onMouseDown={this.handleMouseDown}>
+          <div className={`${theme.templateValue} ${theme.value}`}>
+            {this.props.template(selected)}
+          </div>
+          {this.props.label ? <label className={theme.label}>{this.props.label}</label> : null}
+          {this.props.error ? <span className={theme.error}>{this.props.error}</span> : null}
+        </div>
+      );
     }
-  };
 
-  getSelectedItem = () => {
-    for (const item of this.props.source) {
-      if (item.value === this.props.value) return item;
+    renderValue (item, idx) {
+      const { theme } = this.props;
+      const className = item.value === this.props.value ? theme.selected : null;
+      return (
+        <li key={idx} className={className} onMouseDown={this.handleSelect.bind(this, item.value)}>
+          {this.props.template ? this.props.template(item) : item.label}
+        </li>
+      );
     }
-    if (!this.props.allowBlank) {
-      return this.props.source[0];
-    }
-  };
-
-  renderTemplateValue (selected) {
-    const { theme } = this.props;
-    const className = classnames(theme.field, {
-      [theme.errored]: this.props.error,
-      [theme.disabled]: this.props.disabled
-    });
-
-    return (
-      <div className={className} onMouseDown={this.handleMouseDown}>
-        <div className={`${theme.templateValue} ${theme.value}`}>
-          {this.props.template(selected)}
-        </div>
-        {this.props.label ? <label className={theme.label}>{this.props.label}</label> : null}
-        {this.props.error ? <span className={theme.error}>{this.props.error}</span> : null}
-      </div>
-    );
-  }
 
-  renderValue (item, idx) {
-    const { theme } = this.props;
-    const className = item.value === this.props.value ? theme.selected : null;
-    return (
-      <li key={idx} className={className} onMouseDown={this.handleSelect.bind(this, item.value)}>
-        {this.props.template ? this.props.template(item) : item.label}
-      </li>
-    );
+    render () {
+      const {template, theme, source, ...others} = this.props;
+      const selected = this.getSelectedItem();
+      const className = classnames(theme.dropdown, {
+        [theme.up]: this.state.up,
+        [theme.active]: this.state.active,
+        [theme.disabled]: this.props.disabled
+      }, this.props.className);
+
+      return (
+        <div data-react-toolbox='dropdown' className={className}>
+          <Input
+            {...others}
+            className={theme.value}
+            onMouseDown={this.handleMouseDown}
+            readOnly
+            type={template && selected ? 'hidden' : null}
+            value={selected && selected.label}
+          />
+        {template && selected ? this.renderTemplateValue(selected) : null}
+          <ul className={theme.values} ref='values'>
+            {source.map(this.renderValue.bind(this))}
+          </ul>
+        </div>
+      );
+    }
   }
 
-  render () {
-    const {template, theme, source, ...others} = this.props;
-    const selected = this.getSelectedItem();
-    const className = classnames(theme.dropdown, {
-      [theme.up]: this.state.up,
-      [theme.active]: this.state.active,
-      [theme.disabled]: this.props.disabled
-    }, this.props.className);
-
-    return (
-      <div data-react-toolbox='dropdown' className={className}>
-        <Input
-          {...others}
-          className={theme.value}
-          onMouseDown={this.handleMouseDown}
-          readOnly
-          type={template && selected ? 'hidden' : null}
-          value={selected && selected.label}
-        />
-      {template && selected ? this.renderTemplateValue(selected) : null}
-        <ul className={theme.values} ref='values'>
-          {source.map(this.renderValue.bind(this))}
-        </ul>
-      </div>
-    );
-  }
-}
+  return Dropdown;
+};
 
-export default themr('ToolboxDropdown')(Dropdown);
+const Dropdown = factory(InjectInput);
+export default themr(DROPDOWN)(Dropdown);
+export { factory as dropdownFactory };
+export { Dropdown };
diff --git a/components/dropdown/index.js b/components/dropdown/index.js
index 2640e262c..056478aa5 100644
--- a/components/dropdown/index.js
+++ b/components/dropdown/index.js
@@ -1 +1,11 @@
-export default from './Dropdown';
+import { themr } from 'react-css-themr';
+import { DROPDOWN } from '../identifiers.js';
+import { dropdownFactory } from './Dropdown.js';
+import { Input } from '../input';
+import theme from './theme.scss';
+
+const Dropdown = dropdownFactory(Input);
+const ThemedDropdown = themr(DROPDOWN, theme)(Dropdown);
+
+export default ThemedDropdown;
+export { ThemedDropdown as Dropdown };
diff --git a/components/dropdown/readme.md b/components/dropdown/readme.md
index 39c8acc52..cb177a40c 100644
--- a/components/dropdown/readme.md
+++ b/components/dropdown/readme.md
@@ -2,12 +2,9 @@
 
 The Dropdown selects an option between multiple selections. The element displays the current state and a down arrow. When it is clicked, it displays the list of available options.
 
-The themr key you have to use to provide styles for this component is `ToolboxDropdown`.
-
 <!-- example -->
 ```jsx
 import Dropdown from 'react-toolbox/lib/dropdown';
-import theme from 'react-toolbox/lib/dropdown/theme';
 
 const countries = [
   { value: 'EN-gb', label: 'England' },
@@ -29,7 +26,6 @@ class DropdownTest extends React.Component {
         auto
         onChange={this.handleChange}
         source={countries}
-        theme={theme}
         value={this.state.value}
       />
     );
@@ -37,36 +33,38 @@ class DropdownTest extends React.Component {
 }
 ```
 
+If you want to provide a theme via context, the component key is `RTDropdown`.
+
 ## Properties
 
-| Name            | Type            | Default         | Description |
-|:-----|:-----|:-----|:-----|
-| `allowBlank`    | `Boolean`       | `true`          | If true the dropdown will preselect the first item if the supplied value matches none of the options' values.|
-| `auto`          | `Boolean`       | `true`          | If true, the dropdown will open up or down depending on the position in the screen.|
-| `className`     | `String`        | `''`            | Set the class to give custom styles to the dropdown.|
-| `disabled`      | `Boolean`       | `false`         | Set the component as disabled.|
-| `error`         | `String`        |                 | Give an error string to display under the field.|
-| `label`         | `String`        |                 | The text string to use for the floating label element.|
-| `onBlur`        | `Function`      |                 | Callback function that is fired when the component is blurred.|
-| `onChange`      | `Function`      |                 | Callback function that is fired when the component's value changes.|
-| `onFocus`       | `Function`      |                 | Callback function that is fired when the component is focused.|
-| `source`        | `Array`         |                 | Array of data objects with the data to represent in the dropdown.|
-| `template`      | `Function`      |                 | Callback function that returns a JSX template to represent the element.|
-| `value`         | `String`        |                 | Default value using JSON data.|
+| Name         | Type       | Default | Description |
+|:-------------|:-----------|:--------|:------------|
+| `allowBlank` | `Boolean`  | `true`  | If true the dropdown will preselect the first item if the supplied value matches none of the options' values.|
+| `auto`       | `Boolean`  | `true`  | If true, the dropdown will open up or down depending on the position in the screen.|
+| `className`  | `String`   | `''`    | Set the class to give custom styles to the dropdown.|
+| `disabled`   | `Boolean`  | `false` | Set the component as disabled.|
+| `error`      | `String`   |         | Give an error string to display under the field.|
+| `label`      | `String`   |         | The text string to use for the floating label element.|
+| `onBlur`     | `Function` |         | Callback function that is fired when the component is blurred.|
+| `onChange`   | `Function` |         | Callback function that is fired when the component's value changes.|
+| `onFocus`    | `Function` |         | Callback function that is fired when the component is focused.|
+| `source`     | `Array`    |         | Array of data objects with the data to represent in the dropdown.|
+| `template`   | `Function` |         | Callback function that returns a JSX template to represent the element.|
+| `value`      | `String`   |         | Default value using JSON data.|
 
 ## Theming
 
-| Name     | Description|
-|:---------|:-----------|
-| `active`   | Added to the root element when the dropdown is active.|
-| `disabled`   | Added to the root element when it's disabled.|
-| `dropdown`   | Root element class.|
-| `error`   | Used for the error element.|
-| `errored`   | Added to the inner wrapper if it's errored.|
-| `field`   | Used for the inner wrapper of the component.|
-| `label`   | Used for the the label element.|
-| `selected`   | Used to highlight the selected value.|
-| `templateValue`   | Used as a wrapper for the given template value.|
-| `up`   | Added to the root element when it's opening up.|
-| `value`   | Used for each value in the dropdown component.|
-| `values`   | Used for the list of values.|
+| Name            | Description|
+|:----------------|:-----------|
+| `active`        | Added to the root element when the dropdown is active.|
+| `disabled`      | Added to the root element when it's disabled.|
+| `dropdown`      | Root element class.|
+| `error`         | Used for the error element.|
+| `errored`       | Added to the inner wrapper if it's errored.|
+| `field`         | Used for the inner wrapper of the component.|
+| `label`         | Used for the the label element.|
+| `selected`      | Used to highlight the selected value.|
+| `templateValue` | Used as a wrapper for the given template value.|
+| `up`            | Added to the root element when it's opening up.|
+| `value`         | Used for each value in the dropdown component.|
+| `values`        | Used for the list of values.|
diff --git a/components/identifiers.js b/components/identifiers.js
index 65bcc149e..f993eb6a8 100644
--- a/components/identifiers.js
+++ b/components/identifiers.js
@@ -6,6 +6,7 @@ export const CARD = 'RTCard';
 export const CHIP = 'RTChip';
 export const DATE_PICKER = 'RTDatePicker';
 export const DIALOG = 'RTDialog';
+export const DROPDOWN = 'RTDropdown';
 export const INPUT = 'RTInput';
 export const OVERLAY = 'RTOverlay';
 export const PROGRESS_BAR = 'RTProgressBar';
diff --git a/spec/theme.js b/spec/theme.js
index 243fe852c..174c38978 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -1,6 +1,5 @@
 import '../components/commons.scss';
 
-import ToolboxDropdown from '../components/dropdown/theme.scss';
 import ToolboxLayout from '../components/layout/theme.scss';
 import ToolboxLink from '../components/link/theme.scss';
 import ToolboxList from '../components/list/theme.scss';
@@ -17,7 +16,6 @@ import ToolboxTimePicker from '../components/time_picker/theme.scss';
 import ToolboxTooltip from '../components/tooltip/theme.scss';
 
 export default {
-  ToolboxDropdown,
   ToolboxLayout,
   ToolboxLink,
   ToolboxList,

From fbdceed5c8113eb243731c3fb2a4b8ff9121e4c4 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 29 May 2016 19:38:06 +0200
Subject: [PATCH 0588/1024] Add specific imports for FontIcon

---
 components/font_icon/FontIcon.js | 1 +
 components/font_icon/index.js    | 5 ++++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/font_icon/FontIcon.js b/components/font_icon/FontIcon.js
index eb3673e84..8354ebb40 100644
--- a/components/font_icon/FontIcon.js
+++ b/components/font_icon/FontIcon.js
@@ -26,3 +26,4 @@ FontIcon.defaultProps = {
 };
 
 export default FontIcon;
+export { FontIcon };
diff --git a/components/font_icon/index.js b/components/font_icon/index.js
index 9949f206d..726aec89e 100644
--- a/components/font_icon/index.js
+++ b/components/font_icon/index.js
@@ -1 +1,4 @@
-export default from './FontIcon.js';
+import FontIcon from './FontIcon.js';
+
+export default FontIcon;
+export { FontIcon };

From 27962e8effaa31a05016550b904f845b6c6db828 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 29 May 2016 19:46:16 +0200
Subject: [PATCH 0589/1024] Inject dependencies for Form component

---
 components/form/Form.js   | 133 +++++++++++++++++++++-----------------
 components/form/index.js  |  20 +++++-
 components/form/readme.md |  16 -----
 3 files changed, 93 insertions(+), 76 deletions(-)

diff --git a/components/form/Form.js b/components/form/Form.js
index 75601eb81..3f313399c 100644
--- a/components/form/Form.js
+++ b/components/form/Form.js
@@ -1,71 +1,86 @@
 import React, { Component, PropTypes } from 'react';
-import Autocomplete from '../autocomplete';
-import Button from '../button';
-import Checkbox from '../checkbox';
-import DatePicker from '../date_picker';
-import Dropdown from '../dropdown';
-import Input from '../input';
-import RadioGroup from '../radio/RadioGroup';
-import Slider from '../slider';
-import Switch from '../switch';
-import TimePicker from '../time_picker';
+import InjectAutocomplete from '../autocomplete/Autocomplete.js';
+import InjectButton from '../button/Button.js';
+import InjectCheckbox from '../checkbox/Checkbox.js';
+import InjectDatePicker from '../date_picker/DatePicker.js';
+import InjectDropdown from '../dropdown/Dropdown.js';
+import InjectInput from '../input/Input.js';
+import InjectRadioGroup from '../radio/RadioGroup.js';
+import InjectSlider from '../slider/Slider.js';
+import InjectSwitch from '../switch/Switch.js';
+import InjectTimePicker from '../time_picker/TimePicker.js';
 
-const COMPONENTS = {
-  'autocomplete': Autocomplete,
-  'button': Button,
-  'checkbox': Checkbox,
-  'datepicker': DatePicker,
-  'dropdown': Dropdown,
-  'input': Input,
-  'radioGroup': RadioGroup,
-  'slider': Slider,
-  'switch': Switch,
-  'timepicker': TimePicker
-};
+const factory = (
+    Autocomplete, Button, Checkbox, DatePicker, Dropdown,
+    Input, RadioGroup, Slider, Switch, TimePicker
+  ) => {
 
-class Form extends Component {
-  static propTypes = {
-    attributes: PropTypes.array,
-    children: PropTypes.node,
-    className: PropTypes.string,
-    model: PropTypes.object,
-    onChange: PropTypes.func,
-    onError: PropTypes.func,
-    onSubmit: PropTypes.func,
-    onValid: PropTypes.func,
-    storage: PropTypes.string
+  const COMPONENTS = {
+    'autocomplete': Autocomplete,
+    'button': Button,
+    'checkbox': Checkbox,
+    'datepicker': DatePicker,
+    'dropdown': Dropdown,
+    'input': Input,
+    'radioGroup': RadioGroup,
+    'slider': Slider,
+    'switch': Switch,
+    'timepicker': TimePicker
   };
 
-  static defaultProps = {
-    attributes: [],
-    className: ''
-  };
+  class Form extends Component {
+    static propTypes = {
+      attributes: PropTypes.array,
+      children: PropTypes.node,
+      className: PropTypes.string,
+      model: PropTypes.object,
+      onChange: PropTypes.func,
+      onError: PropTypes.func,
+      onSubmit: PropTypes.func,
+      onValid: PropTypes.func,
+      storage: PropTypes.string
+    };
 
-  onSubmit = (event) => {
-    event.preventDefault();
-    if (this.props.onSubmit) this.props.onSubmit(event);
-  };
+    static defaultProps = {
+      attributes: [],
+      className: ''
+    };
 
-  onChange = (field, value, event) => {
-    if (this.props.onChange) this.props.onChange(field, value, event);
-  };
+    onSubmit = (event) => {
+      event.preventDefault();
+      if (this.props.onSubmit) this.props.onSubmit(event);
+    };
 
-  renderFields () {
-    return Object.keys(this.props.model).map((field, index) => {
-      const properties = this.props.model[field];
-      const Field = COMPONENTS[properties.kind.toLowerCase()];
-      return <Field key={index} {...properties} onChange={this.onChange.bind(this, field)} />;
-    });
-  }
+    onChange = (field, value, event) => {
+      if (this.props.onChange) this.props.onChange(field, value, event);
+    };
 
-  render () {
-    return (
-      <form data-react-toolbox='form' className={this.props.className} onSubmit={this.onSubmit}>
-        {this.renderFields()}
-        {this.props.children}
-      </form>
-    );
+    renderFields () {
+      return Object.keys(this.props.model).map((field, index) => {
+        const properties = this.props.model[field];
+        const Field = COMPONENTS[properties.kind.toLowerCase()];
+        return <Field key={index} {...properties} onChange={this.onChange.bind(this, field)} />;
+      });
+    }
+
+    render () {
+      return (
+        <form data-react-toolbox='form' className={this.props.className} onSubmit={this.onSubmit}>
+          {this.renderFields()}
+          {this.props.children}
+        </form>
+      );
+    }
   }
-}
+
+  return Form;
+};
+
+const Form = factory(
+  InjectAutocomplete, InjectButton, InjectCheckbox, InjectDatePicker, InjectDropdown,
+  InjectInput, InjectRadioGroup, InjectSlider, InjectSwitch, InjectTimePicker
+);
 
 export default Form;
+export { factory as formFactory };
+export { Form };
diff --git a/components/form/index.js b/components/form/index.js
index 4516c6297..7ae8c7f46 100644
--- a/components/form/index.js
+++ b/components/form/index.js
@@ -1 +1,19 @@
-export default from './Form';
+import { formFactory } from './Form.js';
+import Autocomplete from '../autocomplete';
+import Button from '../button';
+import Checkbox from '../checkbox';
+import DatePicker from '../date_picker';
+import Dropdown from '../dropdown';
+import Input from '../input';
+import RadioGroup from '../radio';
+import Slider from '../slider';
+import Switch from '../switch';
+import TimePicker from '../time_picker';
+
+const ThemedForm = formFactory(
+  Autocomplete, Button, Checkbox, DatePicker, Dropdown,
+  Input, RadioGroup, Slider, Switch, TimePicker
+);
+
+export default ThemedForm;
+export { ThemedForm as Form };
diff --git a/components/form/readme.md b/components/form/readme.md
index e23ab646e..a26b12389 100644
--- a/components/form/readme.md
+++ b/components/form/readme.md
@@ -22,19 +22,3 @@ var fields : [
 | **onSubmit**      | Function      |                 | Dispatch callback when user clicks on submit <Button/> |
 | **onValid**       | Function      |                 | Dispatch callback when all required fields are full-filled.|
 | **Storage**       | String        |                 | Sets a localStorage key for save all current field values.|
-
-## Methods
-
-#### getValue
-Returns the value of the form.
-
-```
-form_instance.getValue();
-```
-
-#### setValue
-Sets the value of the form component.
-
-```
-form_instance.setValue(newValue);
-```

From 802bd64dd7584227dee742329b9a70013e16c72f Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 29 May 2016 19:59:04 +0200
Subject: [PATCH 0590/1024] Update global index

---
 components/index.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/index.js b/components/index.js
index 51516acd3..fe4c29a32 100644
--- a/components/index.js
+++ b/components/index.js
@@ -2,8 +2,7 @@ import './utils/polyfills'; // Import polyfills for IE11
 export AppBar from './app_bar';
 export Autocomplete from './autocomplete';
 export Avatar from './avatar';
-export Button from './button/Button';
-export IconButton from './button/IconButton';
+export * from './button';
 export * from './card';
 export Chip from './chip';
 export Checkbox from './checkbox';

From e911a9f116da8a7721417ac8d724f83958cc4eeb Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 29 May 2016 19:59:17 +0200
Subject: [PATCH 0591/1024] Autoinject theme for Layout

---
 components/identifiers.js      |  1 +
 components/layout/Layout.js    |  4 ++-
 components/layout/NavDrawer.js |  4 ++-
 components/layout/Panel.js     |  4 ++-
 components/layout/Sidebar.js   |  4 ++-
 components/layout/index.js     | 21 +++++++++---
 components/layout/readme.md    | 63 +++++++---------------------------
 spec/theme.js                  |  2 --
 8 files changed, 43 insertions(+), 60 deletions(-)

diff --git a/components/identifiers.js b/components/identifiers.js
index f993eb6a8..fec4219a3 100644
--- a/components/identifiers.js
+++ b/components/identifiers.js
@@ -8,6 +8,7 @@ export const DATE_PICKER = 'RTDatePicker';
 export const DIALOG = 'RTDialog';
 export const DROPDOWN = 'RTDropdown';
 export const INPUT = 'RTInput';
+export const LAYOUT = 'RTLayout';
 export const OVERLAY = 'RTOverlay';
 export const PROGRESS_BAR = 'RTProgressBar';
 export const RIPPLE = 'RTRipple';
diff --git a/components/layout/Layout.js b/components/layout/Layout.js
index a89166a59..f3eecde5e 100644
--- a/components/layout/Layout.js
+++ b/components/layout/Layout.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { themr } from 'react-css-themr';
 import classnames from 'classnames';
+import { LAYOUT } from '../identifiers.js';
 
 const Layout = ({ className, children, theme }) => (
   <div data-react-toolbox='layout' className={classnames(theme.layout, className)}>
@@ -54,4 +55,5 @@ Layout.defaultProps = {
   className: ''
 };
 
-export default themr('ToolboxLayout')(Layout);
+export default themr(LAYOUT)(Layout);
+export { Layout };
diff --git a/components/layout/NavDrawer.js b/components/layout/NavDrawer.js
index 74c871e8a..0970c5684 100644
--- a/components/layout/NavDrawer.js
+++ b/components/layout/NavDrawer.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
+import { LAYOUT } from '../identifiers.js';
 
 const NavDrawer = ({ active, children, className, onOverlayClick, permanentAt, pinned, scrollY, theme, width }) => {
   const rootClasses = classnames([theme.navDrawer], {
@@ -58,4 +59,5 @@ NavDrawer.defaultProps = {
   width: 'normal'
 };
 
-export default themr('ToolboxLayout')(NavDrawer);
+export default themr(LAYOUT)(NavDrawer);
+export { NavDrawer };
diff --git a/components/layout/Panel.js b/components/layout/Panel.js
index 92507055e..3114fc1cb 100644
--- a/components/layout/Panel.js
+++ b/components/layout/Panel.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
+import { LAYOUT } from '../identifiers.js';
 
 const Panel = ({ children, className, scrollY, theme }) => {
   const _className = classnames(theme.panel, {
@@ -29,4 +30,5 @@ Panel.defaultProps = {
   scrollY: false
 };
 
-export default themr('ToolboxLayout')(Panel);
+export default themr(LAYOUT)(Panel);
+export { Panel };
diff --git a/components/layout/Sidebar.js b/components/layout/Sidebar.js
index 800d9a509..b8a9cbd25 100644
--- a/components/layout/Sidebar.js
+++ b/components/layout/Sidebar.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
+import { LAYOUT } from '../identifiers.js';
 
 const Sidebar = ({ children, className, pinned, scrollY, theme, width }) => {
   const wrapperClasses = classnames(theme.sidebar, theme[`width-${width}`], {
@@ -41,4 +42,5 @@ Sidebar.defaultProps = {
   width: 5
 };
 
-export default themr('ToolboxLayout')(Sidebar);
+export default themr(LAYOUT)(Sidebar);
+export { Sidebar };
diff --git a/components/layout/index.js b/components/layout/index.js
index 88fc67a6c..d44ec77d3 100644
--- a/components/layout/index.js
+++ b/components/layout/index.js
@@ -1,4 +1,17 @@
-export { default as Layout } from './Layout';
-export { default as Panel } from './Panel';
-export { default as NavDrawer } from './NavDrawer';
-export { default as Sidebar } from './Sidebar';
+import { themr } from 'react-css-themr';
+import { LAYOUT } from '../identifiers.js';
+import { Layout } from './Layout.js';
+import { Panel } from './Panel.js';
+import { NavDrawer } from './NavDrawer.js';
+import { Sidebar } from './Sidebar.js';
+import theme from './theme.scss';
+
+const ThemedLayout = themr(LAYOUT, theme)(Layout);
+const ThemedPanel = themr(LAYOUT, theme)(Panel);
+const ThemedNavDrawer = themr(LAYOUT, theme)(NavDrawer);
+const ThemedSidebar = themr(LAYOUT, theme)(Sidebar);
+
+export { ThemedLayout as Layout };
+export { ThemedPanel as Panel };
+export { ThemedNavDrawer as NavDrawer };
+export { ThemedSidebar as Sidebar };
diff --git a/components/layout/readme.md b/components/layout/readme.md
index 8a7340bdf..28593ffa2 100644
--- a/components/layout/readme.md
+++ b/components/layout/readme.md
@@ -1,10 +1,6 @@
 # Layout
 
-A Layout is a container that can hold a main content area with an optional
-navigation drawer (on the left) and/or sidebar (on the right). According to
-the [material design spec](https://www.google.com/design/spec/layout/structure.html#structure-side-nav),
-the left drawer is typically used for navigation or identity-based content,
-while the right sidebar is secondary content related to the main content.
+A Layout is a container that can hold a main content area with an optional navigation drawer (on the left) and/or sidebar (on the right). According to the [material design spec](https://www.google.com/design/spec/layout/structure.html#structure-side-nav), the left drawer is typically used for navigation or identity-based content, while the right sidebar is secondary content related to the main content.
 
 <!-- example -->
 ```jsx
@@ -61,20 +57,15 @@ class LayoutTest extends React.Component {
 }
 ```
 
-<!--component-docgen-start-->
+If you want to provide a theme for Layout subcomponents the key to use is `RTLayout`;
 
 ## Layout
 
-The primary layout component. This acts as the main container
-that all subcomponents are placed within. The layout is typically placed
-so as to fill the entire screen, although it does not have to be.
+The primary layout component. This acts as the main container that all subcomponents are placed within. The layout is typically placed so as to fill the entire screen, although it does not have to be.
 
 ### Breakpoints and Increments
 
-The Layout's subcomponents can alter their appearance and behavior based
-on the current screen size. The layout uses the screen breakpoints described
-in the [material design spec](https://www.google.com/design/spec/layout/responsive-ui.html#responsive-ui-breakpoints),
-namely:
+The Layout's subcomponents can alter their appearance and behavior based on the current screen size. The layout uses the screen breakpoints described in the [material design spec](https://www.google.com/design/spec/layout/responsive-ui.html#responsive-ui-breakpoints), namely:
 
 | Width | Abreviation | Typical Device |
 |:-----|:-----|:-----|
@@ -89,21 +80,13 @@ namely:
 | 1600px | `xxl` | desktop |
 | 1920px | `xxxl` | desktop |
 
-The components also make use of [standard increments](https://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-sizing-by-increments),
-which is a unit equal to the height of the action bar. At mobile sizes (< `xs`) the increment is
-56px. On larger screens, it is 64px.
+The components also make use of [standard increments](https://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-sizing-by-increments), which is a unit equal to the height of the action bar. At mobile sizes (< `xs`) the increment is 56px. On larger screens, it is 64px.
 
 ### Content Area Layout
 
-The content areas of all three of the subcomponents (`NavDrawer`, `Panel`, and `Sidebar`)
-use flexbox column layouts set to fill the entire height of the containing `Layout`.
-The column layout lends itself well to the fixed header/scrolling content that will frequently
-inhabit these components. By default, these components also do not scroll content vertically
-so that you can control where scrolling occurs. (For example, see the content of the `Panel`
-in the sample.)
+The content areas of all three of the subcomponents (`NavDrawer`, `Panel`, and `Sidebar`) use flexbox column layouts set to fill the entire height of the containing `Layout`. The column layout lends itself well to the fixed header/scrolling content that will frequently inhabit these components. By default, these components also do not scroll content vertically so that you can control where scrolling occurs. (For example, see the content of the `Panel` in the sample.)
 
-If the column layout does not suit your needs, simply fill the content area with an element
-with `flex` set to 1, and use whatever layout you like within it.
+If the column layout does not suit your needs, simply fill the content area with an element with `flex` set to 1, and use whatever layout you like within it.
 
 ### Properties
 | Name | Type | Default | Description |
@@ -120,9 +103,7 @@ The themed key the `Layout` in general is `ToolboxLayout`. For the `Layout` wrap
 
 ## NavDrawer
 
-The [navigation drawer](https://www.google.com/design/spec/patterns/navigation-drawer.html) slides
-in from the left and usually holds [the application's main navigation](https://www.google.com/design/spec/layout/structure.html#structure-side-nav).
-The drawer's width is based on the screen size:
+The [navigation drawer](https://www.google.com/design/spec/patterns/navigation-drawer.html) slides in from the left and usually holds [the application's main navigation](https://www.google.com/design/spec/layout/structure.html#structure-side-nav). The drawer's width is based on the screen size:
 
 | Breakpoint | Drawer Width | Notes |
 |:-----|:-----|:-----|
@@ -130,9 +111,7 @@ The drawer's width is based on the screen size:
 | > `xs` | 320px | |
 | > `xs` | 400px | If property `width` is set to `wide` |
 
-The drawer can be docked to the left side of the screen or can float temporarily
-as an overlay. You can control the drawer's display manually `active` and `pinned` properties,
-and can also specify a breakpoint at which the drawer automatically becomes permanently docked.
+The drawer can be docked to the left side of the screen or can float temporarily as an overlay. You can control the drawer's display manually `active` and `pinned` properties, and can also specify a breakpoint at which the drawer automatically becomes permanently docked.
 
 ### Properties
 | Name | Type | Default | Description |
@@ -146,8 +125,6 @@ and can also specify a breakpoint at which the drawer automatically becomes perm
 | `className` | `string` |  | Additional class(es) for custom styling. |
 
 ### Theme
-You can use `ToolboxLayout` as themed key for this component. The class interface is as follows:
-
 | Name     | Description|
 |:---------|:-----------|
 | `active` | Used when the drawer is active.|
@@ -166,9 +143,7 @@ You can use `ToolboxLayout` as themed key for this component. The class interfac
 
 ## Panel
 
-The `Panel` is the main content area within a `Layout`.  It is a full-height
-flexbox column that takes up all remaining horizontal space after the `NavDrawer`
-and `Sidebar` are laid out.
+The `Panel` is the main content area within a `Layout`.  It is a full-height flexbox column that takes up all remaining horizontal space after the `NavDrawer` and `Sidebar` are laid out.
 
 ### Properties
 | Name | Type | Default | Description |
@@ -177,8 +152,6 @@ and `Sidebar` are laid out.
 | `className` | `string` |  | Additional class(es) for custom styling. |
 
 ### Theme
-You can use `ToolboxLayout` as themed key for this component. The class interface is as follows:
-
 | Name     | Description|
 |:---------|:-----------|
 | `panel` | Used as the root class of the panel component.|
@@ -186,11 +159,7 @@ You can use `ToolboxLayout` as themed key for this component. The class interfac
 
 ## Sidebar
 
-The `Sidebar` is an extra drawer that docks to the right side of the `Layout`.
-The sidebar's width can be set either to a multiple of the "standard increment"
-(1 - 12 increments) or as a percentage of the parent `Layout` width (25%, 33%, 50%, 66%, 75%, 100%).
-Regardless of the width set, at mobile screen sizes the sidebar acts like a full-screen dialog that
-covers the entire screen (see [examples](https://www.google.com/design/spec/layout/structure.html#structure-side-nav)).
+The `Sidebar` is an extra drawer that docks to the right side of the `Layout`. The sidebar's width can be set either to a multiple of the "standard increment" (1 - 12 increments) or as a percentage of the parent `Layout` width (25%, 33%, 50%, 66%, 75%, 100%). Regardless of the width set, at mobile screen sizes the sidebar acts like a full-screen dialog that covers the entire screen (see [examples](https://www.google.com/design/spec/layout/structure.html#structure-side-nav)).
 
 ### Properties
 | Name | Type | Default | Description |
@@ -201,8 +170,6 @@ covers the entire screen (see [examples](https://www.google.com/design/spec/layo
 | `className` | `string` |  | Additional class(es) for custom styling. |
 
 ### Theme
-You can use `ToolboxLayout` as themed key for this component. The class interface is as follows:
-
 | Name     | Description|
 |:---------|:-----------|
 | `pinned` | Added to the root class if sidebar is pinned.|
@@ -212,9 +179,7 @@ You can use `ToolboxLayout` as themed key for this component. The class interfac
 
 ## Nesting Layouts
 
-The `Layout` is meant to be used near the top level of your application,
-so that it occupies the entire screen. However, it is possible to nest one
-layout inside another:
+The `Layout` is meant to be used near the top level of your application, so that it occupies the entire screen. However, it is possible to nest one layout inside another:
 
 ```jsx
 <Layout>
@@ -232,6 +197,4 @@ layout inside another:
 </Layout>
 ```
 
-The main reason you would want to do something like this would be so that
-the navigation could be rendered at a high level, while the contents of the
-inner `Layout` would be controlled by react-router or something like that.
+The main reason you would want to do something like this would be so that the navigation could be rendered at a high level, while the contents of the inner `Layout` would be controlled by react-router or something like that.
diff --git a/spec/theme.js b/spec/theme.js
index 174c38978..ccc8d1ea8 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -1,6 +1,5 @@
 import '../components/commons.scss';
 
-import ToolboxLayout from '../components/layout/theme.scss';
 import ToolboxLink from '../components/link/theme.scss';
 import ToolboxList from '../components/list/theme.scss';
 import ToolboxMenu from '../components/menu/theme.scss';
@@ -16,7 +15,6 @@ import ToolboxTimePicker from '../components/time_picker/theme.scss';
 import ToolboxTooltip from '../components/tooltip/theme.scss';
 
 export default {
-  ToolboxLayout,
   ToolboxLink,
   ToolboxList,
   ToolboxMenu,

From 731153da0026a7d9ead4e70a84f1adfe6b323523 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 29 May 2016 20:03:41 +0200
Subject: [PATCH 0592/1024] Autoinject theme for Link

---
 components/identifiers.js |  1 +
 components/link/Link.js   | 32 +++++++++++++++++---------------
 components/link/index.js  | 10 +++++++++-
 components/link/readme.md | 23 +++++++++++------------
 spec/theme.js             |  2 --
 5 files changed, 38 insertions(+), 30 deletions(-)

diff --git a/components/identifiers.js b/components/identifiers.js
index fec4219a3..1738d9629 100644
--- a/components/identifiers.js
+++ b/components/identifiers.js
@@ -9,6 +9,7 @@ export const DIALOG = 'RTDialog';
 export const DROPDOWN = 'RTDropdown';
 export const INPUT = 'RTInput';
 export const LAYOUT = 'RTLayout';
+export const LINK = 'RTLink';
 export const OVERLAY = 'RTOverlay';
 export const PROGRESS_BAR = 'RTProgressBar';
 export const RIPPLE = 'RTRipple';
diff --git a/components/link/Link.js b/components/link/Link.js
index 15810dcbf..b7d076afb 100644
--- a/components/link/Link.js
+++ b/components/link/Link.js
@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import classnames from 'classnames';
-import FontIcon from '../font_icon';
 import { themr } from 'react-css-themr';
+import { LINK } from '../identifiers.js';
+import FontIcon from '../font_icon/FontIcon.js';
 
 const Link = ({active, children, className, count, icon, label, theme, ...others}) => {
   const _className = classnames(theme.link, {
@@ -19,19 +20,19 @@ const Link = ({active, children, className, count, icon, label, theme, ...others
 };
 
 Link.propTypes = {
-  active: React.PropTypes.bool,
-  children: React.PropTypes.node,
-  className: React.PropTypes.string,
-  count: React.PropTypes.number,
-  icon: React.PropTypes.oneOfType([
-    React.PropTypes.string,
-    React.PropTypes.element
+  active: PropTypes.bool,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  count: PropTypes.number,
+  icon: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element
   ]),
-  label: React.PropTypes.string,
-  theme: React.PropTypes.shape({
-    active: React.PropTypes.string.isRequired,
-    icon: React.PropTypes.string.isRequired,
-    link: React.PropTypes.string.isRequired
+  label: PropTypes.string,
+  theme: PropTypes.shape({
+    active: PropTypes.string.isRequired,
+    icon: PropTypes.string.isRequired,
+    link: PropTypes.string.isRequired
   })
 };
 
@@ -40,4 +41,5 @@ Link.defaultProps = {
   className: ''
 };
 
-export default themr('ToolboxLink')(Link);
+export default themr(LINK)(Link);
+export { Link };
diff --git a/components/link/index.js b/components/link/index.js
index 5bda4e744..3dcfcf1b5 100644
--- a/components/link/index.js
+++ b/components/link/index.js
@@ -1 +1,9 @@
-export default from './Link';
+import { themr } from 'react-css-themr';
+import { LINK } from '../identifiers.js';
+import { Link } from './Link.js';
+import theme from './theme.scss';
+
+const ThemedLink = themr(LINK, theme)(Link);
+
+export default ThemedLink;
+export { ThemedLink as Link };
diff --git a/components/link/readme.md b/components/link/readme.md
index 5a6e0ec2c..1de725eb1 100644
--- a/components/link/readme.md
+++ b/components/link/readme.md
@@ -5,32 +5,31 @@ The link is a very simple component that acts mostly as a wrapper for the HTML a
 <!-- example -->
 ```jsx
 import Link from 'react-toolbox/lib/link';
-import theme from 'react-toolbox/lib/link/theme';
 
 const LinksTest = () => (
   <nav>
-    <Link active href="http://github.com/#/components/link" label="Work" count={4} icon='business' theme={theme} />
-    <Link href="http://github.com/#/components/link" label="Blog" icon='speaker_notes' theme={theme} />
-    <Link href="http://github.com/#/components/link" label="Explore" icon='explore' theme={theme} />
+    <Link active href="http://github.com/#/components/link" label="Work" count={4} icon='business' />
+    <Link href="http://github.com/#/components/link" label="Blog" icon='speaker_notes' />
+    <Link href="http://github.com/#/components/link" label="Explore" icon='explore' />
   </nav>
 );
 ```
 
+If you want to provide a theme via context, the component key is `RTLink`.
+
 ## Properties
 
 You can add as many properties as you want to be directly transferred to the output anchor element. Apart from them you have the following properties:
 
 | Name            | Type                  | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `active`        | `Boolean`             | `false`         | If true, adds active style to link.|
-| `className`     | `String`              | `''`            | Sets a custom class name to add styles to the link.|
-| `count`         | `Number`              |                 | Sets a count number.|
-| `icon`          | `String` or `Element` |                 | An icon key string to include a `FontIcon` component in front of the text.|
-| `label`         | `String`              |                 | The text string used for the text content of the link.|
-
-## Theming
+| `active`     | `Boolean`             | `false`         | If true, adds active style to link.|
+| `className`  | `String`              | `''`            | Sets a custom class name to add styles to the link.|
+| `count`      | `Number`              |                 | Sets a count number.|
+| `icon`       | `String` or `Element` |                 | An icon key string to include a `FontIcon` component in front of the text.|
+| `label`      | `String`              |                 | The text string used for the text content of the link.|
 
-You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxLink`, it should implement the following interface:
+## Theme
 
 | Name     | Description|
 |:---------|:-----------|
diff --git a/spec/theme.js b/spec/theme.js
index ccc8d1ea8..3684b4fe5 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -1,6 +1,5 @@
 import '../components/commons.scss';
 
-import ToolboxLink from '../components/link/theme.scss';
 import ToolboxList from '../components/list/theme.scss';
 import ToolboxMenu from '../components/menu/theme.scss';
 import ToolboxNavigation from '../components/navigation/theme.scss';
@@ -15,7 +14,6 @@ import ToolboxTimePicker from '../components/time_picker/theme.scss';
 import ToolboxTooltip from '../components/tooltip/theme.scss';
 
 export default {
-  ToolboxLink,
   ToolboxList,
   ToolboxMenu,
   ToolboxNavigation,

From 592024f42c39fb902c5cbfeaf9eebb756337306d Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 29 May 2016 20:59:54 +0200
Subject: [PATCH 0593/1024] Autoinject styles for Lists

---
 components/identifiers.js          |   1 +
 components/list/List.js            |  82 ++++++++++--------
 components/list/ListCheckbox.js    |  95 +++++++++++---------
 components/list/ListDivider.js     |   4 +-
 components/list/ListItem.js        | 134 +++++++++++++++--------------
 components/list/ListItemAction.js  |   7 +-
 components/list/ListItemActions.js |  46 ++++++----
 components/list/ListItemContent.js |  85 ++++++++++--------
 components/list/ListItemLayout.js  | 130 +++++++++++++++-------------
 components/list/ListItemText.js    |   4 +-
 components/list/ListSubHeader.js   |   4 +-
 components/list/index.js           |  46 ++++++++--
 components/list/readme.md          |  15 ++--
 spec/components/list.js            |   2 +-
 spec/theme.js                      |   2 -
 15 files changed, 368 insertions(+), 289 deletions(-)

diff --git a/components/identifiers.js b/components/identifiers.js
index 1738d9629..7f15698f5 100644
--- a/components/identifiers.js
+++ b/components/identifiers.js
@@ -10,6 +10,7 @@ export const DROPDOWN = 'RTDropdown';
 export const INPUT = 'RTInput';
 export const LAYOUT = 'RTLayout';
 export const LINK = 'RTLink';
+export const LIST = 'RTList';
 export const OVERLAY = 'RTOverlay';
 export const PROGRESS_BAR = 'RTProgressBar';
 export const RIPPLE = 'RTRipple';
diff --git a/components/list/List.js b/components/list/List.js
index 6fac97741..b99f20f83 100644
--- a/components/list/List.js
+++ b/components/list/List.js
@@ -1,45 +1,53 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
-import ListItem from './ListItem';
+import { LIST } from '../identifiers.js';
+import InjectListItem from './ListItem.js';
 
-class List extends React.Component {
-  static propTypes = {
-    children: React.PropTypes.node,
-    className: React.PropTypes.string,
-    ripple: React.PropTypes.bool,
-    selectable: React.PropTypes.bool,
-    theme: React.PropTypes.shape({
-      list: React.PropTypes.string.isRequired
-    })
-  };
+const factory = (ListItem) => {
+  class List extends Component {
+    static propTypes = {
+      children: PropTypes.node,
+      className: PropTypes.string,
+      ripple: PropTypes.bool,
+      selectable: PropTypes.bool,
+      theme: PropTypes.shape({
+        list: PropTypes.string.isRequired
+      })
+    };
 
-  static defaultProps = {
-    className: '',
-    ripple: false,
-    selectable: false
-  };
+    static defaultProps = {
+      className: '',
+      ripple: false,
+      selectable: false
+    };
 
-  renderItems () {
-    return React.Children.map(this.props.children, (item) => {
-      if (item.type === ListItem) {
-        return React.cloneElement(item, {
-          ripple: this.props.ripple,
-          selectable: this.props.selectable
-        });
-      } else {
-        return React.cloneElement(item);
-      }
-    });
-  }
+    renderItems () {
+      return React.Children.map(this.props.children, (item) => {
+        if (item.type === ListItem) {
+          return React.cloneElement(item, {
+            ripple: this.props.ripple,
+            selectable: this.props.selectable
+          });
+        } else {
+          return React.cloneElement(item);
+        }
+      });
+    }
 
-  render () {
-    return (
-      <ul data-react-toolbox='list' className={classnames(this.props.theme.list, this.props.className)}>
-        {this.renderItems()}
-      </ul>
-    );
+    render () {
+      return (
+        <ul data-react-toolbox='list' className={classnames(this.props.theme.list, this.props.className)}>
+          {this.renderItems()}
+        </ul>
+      );
+    }
   }
-}
 
-export default themr('ToolboxList')(List);
+  return List;
+};
+
+const List = factory(InjectListItem);
+export default themr(LIST)(List);
+export { factory as listFactory };
+export { List };
diff --git a/components/list/ListCheckbox.js b/components/list/ListCheckbox.js
index df5d7784a..8d3adcbac 100644
--- a/components/list/ListCheckbox.js
+++ b/components/list/ListCheckbox.js
@@ -1,51 +1,60 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
-import Checkbox from '../checkbox';
-import ListItemContent from './ListItemContent';
+import { LIST } from '../identifiers.js';
+import InjectCheckbox from '../checkbox/Checkbox.js';
+import InjectListItemContent from './ListItemContent.js';
 
-const ListCheckbox = ({ caption, checked, className, disabled, legend, name, onBlur, onChange, onFocus, theme }) => {
-  const _className = classnames(theme.item, theme.checkboxItem, {
-    [theme.disabled]: disabled
-  }, className);
+const factory = (Checkbox, ListItemContent) => {
+  const ListCheckbox = ({ caption, checked, className, disabled, legend, name, onBlur, onChange, onFocus, theme }) => {
+    const _className = classnames(theme.item, theme.checkboxItem, {
+      [theme.disabled]: disabled
+    }, className);
 
-  return (
-    <li className={_className}>
-      <Checkbox
-        checked={checked}
-        className={theme.checkbox}
-        disabled={disabled}
-        label={<ListItemContent caption={caption} legend={legend} />}
-        name={name}
-        onBlur={onBlur}
-        onChange={onChange}
-        onFocus={onFocus}
-      />
-    </li>
-  );
-};
+    return (
+      <li className={_className}>
+        <Checkbox
+          checked={checked}
+          className={theme.checkbox}
+          disabled={disabled}
+          label={<ListItemContent caption={caption} legend={legend} />}
+          name={name}
+          onBlur={onBlur}
+          onChange={onChange}
+          onFocus={onFocus}
+        />
+      </li>
+    );
+  };
 
-ListCheckbox.propTypes = {
-  caption: React.PropTypes.string.isRequired,
-  checked: React.PropTypes.bool,
-  className: React.PropTypes.string,
-  disabled: React.PropTypes.bool,
-  legend: React.PropTypes.string,
-  name: React.PropTypes.string,
-  onBlur: React.PropTypes.func,
-  onChange: React.PropTypes.func,
-  onFocus: React.PropTypes.func,
-  theme: React.PropTypes.shape({
-    checkbox: React.PropTypes.string.isRequired,
-    checkboxItem: React.PropTypes.string.isRequired,
-    disabled: React.PropTypes.string.isRequired,
-    item: React.PropTypes.string.isRequired
-  })
-};
+  ListCheckbox.propTypes = {
+    caption: PropTypes.string.isRequired,
+    checked: PropTypes.bool,
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    legend: PropTypes.string,
+    name: PropTypes.string,
+    onBlur: PropTypes.func,
+    onChange: PropTypes.func,
+    onFocus: PropTypes.func,
+    theme: PropTypes.shape({
+      checkbox: PropTypes.string.isRequired,
+      checkboxItem: PropTypes.string.isRequired,
+      disabled: PropTypes.string.isRequired,
+      item: PropTypes.string.isRequired
+    })
+  };
 
-ListCheckbox.defaultProps = {
-  checked: false,
-  disabled: false
+  ListCheckbox.defaultProps = {
+    checked: false,
+    disabled: false
+  };
+
+  return ListCheckbox;
 };
 
-export default themr('ToolboxList')(ListCheckbox);
+const ListCheckbox = factory(InjectCheckbox, InjectListItemContent);
+
+export default themr(LIST)(ListCheckbox);
+export { factory as listCheckboxFactory };
+export { ListCheckbox };
diff --git a/components/list/ListDivider.js b/components/list/ListDivider.js
index 157ed09c2..abe5cd85b 100644
--- a/components/list/ListDivider.js
+++ b/components/list/ListDivider.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { themr } from 'react-css-themr';
+import { LIST } from '../identifiers.js';
 
 const ListDivider = ({inset, theme}) => (
   <hr className={inset ? `${theme.divider} ${theme.inset}` : theme.divider} />
@@ -17,4 +18,5 @@ ListDivider.defaultProps = {
   inset: false
 };
 
-export default themr('ToolboxList')(ListDivider);
+export default themr(LIST)(ListDivider);
+export { ListDivider };
diff --git a/components/list/ListItem.js b/components/list/ListItem.js
index 0455c6fc2..06a14e46d 100644
--- a/components/list/ListItem.js
+++ b/components/list/ListItem.js
@@ -1,77 +1,81 @@
 import React from 'react';
 import { themr } from 'react-css-themr';
-import ListItemContent from './ListItemContent';
-import ListItemLayout from './ListItemLayout';
-import Ripple from '../ripple';
+import { LIST } from '../identifiers.js';
+import InjectListItemContent from './ListItemContent.js';
+import InjectListItemLayout from './ListItemLayout.js';
+import rippleFactory from '../ripple/Ripple.js';
 
-class ListItem extends React.Component {
-  static propTypes = {
-    children: React.PropTypes.any,
-    className: React.PropTypes.string,
-    disabled: React.PropTypes.bool,
-    onClick: React.PropTypes.func,
-    ripple: React.PropTypes.bool,
-    theme: React.PropTypes.shape({
-      listItem: React.PropTypes.string.isRequired
-    }),
-    to: React.PropTypes.string
-  };
-
-  static defaultProps = {
-    className: '',
-    disabled: false,
-    ripple: false
-  };
-
-  handleClick = (event) => {
-    if (this.props.onClick && !this.props.disabled) {
-      this.props.onClick(event);
-    }
-  };
+const factory = (ripple, ListItemLayout, ListItemContent) => {
+  class ListItem extends React.Component {
+    static propTypes = {
+      children: React.PropTypes.any,
+      className: React.PropTypes.string,
+      disabled: React.PropTypes.bool,
+      onClick: React.PropTypes.func,
+      ripple: React.PropTypes.bool,
+      theme: React.PropTypes.shape({
+        listItem: React.PropTypes.string.isRequired
+      }),
+      to: React.PropTypes.string
+    };
 
-  groupChildren () {
-    const children = {
-      leftActions: [],
-      rightActions: [],
-      ignored: []
+    static defaultProps = {
+      className: '',
+      disabled: false,
+      ripple: false
     };
 
-    React.Children.forEach(this.props.children, (child, i) => {
-      if (!React.isValidElement(child)) {
-        return;
+    handleClick = (event) => {
+      if (this.props.onClick && !this.props.disabled) {
+        this.props.onClick(event);
       }
-      if (child.props.listItemIgnore) {
-        children.ignored.push(child);
-        return;
-      }
-      if (child.type === ListItemContent) {
-        children.itemContent = child;
-        return;
-      }
-      const bucket = children.itemContent ? 'rightActions' : 'leftActions';
-      children[bucket].push({...child, key: i});
-    });
+    };
 
-    return children;
-  }
+    groupChildren () {
+      const children = {
+        leftActions: [],
+        rightActions: [],
+        ignored: []
+      };
+
+      React.Children.forEach(this.props.children, (child, i) => {
+        if (!React.isValidElement(child)) {
+          return;
+        }
+        if (child.props.listItemIgnore) {
+          children.ignored.push(child);
+          return;
+        }
+        if (child.type === ListItemContent) {
+          children.itemContent = child;
+          return;
+        }
+        const bucket = children.itemContent ? 'rightActions' : 'leftActions';
+        children[bucket].push({...child, key: i});
+      });
+
+      return children;
+    }
 
-  render () {
-    const {className, onMouseDown, to, onClick, ripple, theme, ...other} = this.props; //eslint-disable-line no-unused-vars
-    const children = this.groupChildren();
-    const content = <ListItemLayout {...children} {...other}/>;
-    return (
-      <li className={`${theme.listItem} ${className}`} onClick={this.handleClick} onMouseDown={onMouseDown}>
-        {to ? <a href={this.props.to}>{content}</a> : content}
-        {children.ignored}
-      </li>
-    );
+    render () {
+      const {className, onMouseDown, to, onClick, ripple: hasRipple, theme, ...other} = this.props; //eslint-disable-line no-unused-vars
+      const children = this.groupChildren();
+      const content = <ListItemLayout {...children} {...other}/>;
+      return (
+        <li className={`${theme.listItem} ${className}`} onClick={this.handleClick} onMouseDown={onMouseDown}>
+          {to ? <a href={this.props.to}>{content}</a> : content}
+          {children.ignored}
+        </li>
+      );
+    }
   }
-}
 
-const RawListItem = themr('ToolboxList')(ListItem);
-export default themr('ToolboxList')(Ripple({
-  centered: false,
-  listItemIgnore: true
-})(ListItem));
+  return ripple(ListItem);
+};
+
+const ripple = rippleFactory({ centered: false, listItemIgnore: true });
+const ListItem = factory(ripple, InjectListItemLayout, InjectListItemContent);
 
-export {RawListItem as RawListItem};
+export default themr(LIST)(ListItem);
+export { factory as listItemFactory };
+export { ListItem };
diff --git a/components/list/ListItemAction.js b/components/list/ListItemAction.js
index 17a853e89..3828c2692 100644
--- a/components/list/ListItemAction.js
+++ b/components/list/ListItemAction.js
@@ -1,5 +1,6 @@
 import React, { PropTypes } from 'react';
 import { themr } from 'react-css-themr';
+import { LIST } from '../identifiers.js';
 
 const ListItemAction = ({action, theme}) => {
   const {onClick, onMouseDown} = action.props;
@@ -19,7 +20,5 @@ ListItemAction.propTypes = {
   })
 };
 
-ListItemAction.defaultProps = {
-};
-
-export default themr('ToolboxList')(ListItemAction);
+export default themr(LIST)(ListItemAction);
+export { ListItemAction };
diff --git a/components/list/ListItemActions.js b/components/list/ListItemActions.js
index 5229b8738..d5526c3b5 100644
--- a/components/list/ListItemActions.js
+++ b/components/list/ListItemActions.js
@@ -1,26 +1,34 @@
 import React from 'react';
 import { themr } from 'react-css-themr';
-import ListItemAction from './ListItemAction';
+import { LIST } from '../identifiers.js';
+import InjectListItemAction from './ListItemAction.js';
 
-const ListItemActions = ({type, children, theme}) => {
-  const validChildren = React.Children.toArray(children).filter(c => (
-    React.isValidElement(c)
-  ));
+const factory = (ListItemAction) => {
+  const ListItemActions = ({type, children, theme}) => {
+    const validChildren = React.Children.toArray(children).filter(c => (
+      React.isValidElement(c)
+    ));
 
-  return (
-    <span className={theme[type]}>
-      {validChildren.map((action, i) => <ListItemAction key={i} action={action} />)}
-    </span>
-  );
-};
+    return (
+      <span className={theme[type]}>
+        {validChildren.map((action, i) => <ListItemAction key={i} action={action} />)}
+      </span>
+    );
+  };
+
+  ListItemActions.propTypes = {
+    children: React.PropTypes.any,
+    theme: React.PropTypes.shape({
+      left: React.PropTypes.string.isRequired,
+      right: React.PropTypes.string.isRequired
+    }),
+    type: React.PropTypes.oneOf(['left', 'right'])
+  };
 
-ListItemActions.propTypes = {
-  children: React.PropTypes.any,
-  theme: React.PropTypes.shape({
-    left: React.PropTypes.string.isRequired,
-    right: React.PropTypes.string.isRequired
-  }),
-  type: React.PropTypes.oneOf(['left', 'right'])
+  return ListItemActions;
 };
 
-export default themr('ToolboxList')(ListItemActions);
+const ListItemActions = factory(InjectListItemAction);
+export default themr(LIST)(ListItemActions);
+export { factory as listItemActionsFactory };
+export { ListItemActions };
diff --git a/components/list/ListItemContent.js b/components/list/ListItemContent.js
index 68e0cca3b..bf88bc415 100644
--- a/components/list/ListItemContent.js
+++ b/components/list/ListItemContent.js
@@ -1,45 +1,54 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
-import ListItemText from './ListItemText';
+import { LIST } from '../identifiers.js';
+import InjectListItemText from './ListItemText.js';
 
 const types = ['auto', 'normal', 'large'];
 
-class ListItemContent extends React.Component {
-  static propTypes = {
-    caption: React.PropTypes.string,
-    children: React.PropTypes.any,
-    legend: React.PropTypes.string,
-    theme: React.PropTypes.shape({
-      itemContentRoot: React.PropTypes.string.isRequired,
-      large: React.PropTypes.string.isRequired
-    }),
-    type: React.PropTypes.oneOf(types)
-  };
-
-  getType () {
-    const {type, children, caption, legend} = this.props;
-
-    let count = React.Children.count(children);
-    [caption, legend].forEach(s => { count += s ? 1 : 0; });
-    const typeIndex = Math.min(count, types.length);
-
-    return type || types[typeIndex];
-  }
+const factory = (ListItemText) => {
+  class ListItemContent extends Component {
+    static propTypes = {
+      caption: PropTypes.string,
+      children: PropTypes.any,
+      legend: PropTypes.string,
+      theme: PropTypes.shape({
+        itemContentRoot: PropTypes.string.isRequired,
+        large: PropTypes.string.isRequired
+      }),
+      type: PropTypes.oneOf(types)
+    };
+
+    getType () {
+      const {type, children, caption, legend} = this.props;
+
+      let count = React.Children.count(children);
+      [caption, legend].forEach(s => { count += s ? 1 : 0; });
+      const typeIndex = Math.min(count, types.length);
+
+      return type || types[typeIndex];
+    }
 
-  render () {
-    const {children, caption, legend, theme} = this.props;
-    const className = classnames(theme.itemContentRoot, {
-      [theme[this.getType()]]: theme[this.getType()]
-    });
-
-    return (
-      <span className={className}>
-        {caption && <ListItemText primary>{caption}</ListItemText>}
-        {legend && <ListItemText>{legend}</ListItemText>}
-        {children}
-      </span>
-    );
+    render () {
+      const {children, caption, legend, theme} = this.props;
+      const className = classnames(theme.itemContentRoot, {
+        [theme[this.getType()]]: theme[this.getType()]
+      });
+
+      return (
+        <span className={className}>
+          {caption && <ListItemText primary>{caption}</ListItemText>}
+          {legend && <ListItemText>{legend}</ListItemText>}
+          {children}
+        </span>
+      );
+    }
   }
-}
-export default themr('ToolboxList')(ListItemContent);
+
+  return ListItemContent;
+};
+
+const ListItemContent = themr(LIST)(InjectListItemText);
+export default ListItemContent;
+export { factory as listItemContentFactory };
+export { ListItemContent };
diff --git a/components/list/ListItemLayout.js b/components/list/ListItemLayout.js
index f67d512da..e78b297aa 100644
--- a/components/list/ListItemLayout.js
+++ b/components/list/ListItemLayout.js
@@ -1,71 +1,79 @@
 import React from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
-import FontIcon from '../font_icon';
-import Avatar from '../avatar';
-import ListItemContent from './ListItemContent';
-import ListItemActions from './ListItemActions';
+import { LIST } from '../identifiers.js';
+import FontIcon from '../font_icon/FontIcon.js';
+import InjectAvatar from '../avatar/Avatar.js';
+import InjectListItemContent from './ListItemContent.js';
+import InjectListItemActions from './ListItemActions.js';
 
-const ListItemLayout = (props) => {
-  const className = classnames(props.theme.item, {
-    [props.theme.disabled]: props.disabled,
-    [props.theme.selectable]: props.selectable
-  }, props.className);
+const factory = (Avatar, ListItemContent, ListItemActions) => {
+  const ListItemLayout = (props) => {
+    const className = classnames(props.theme.item, {
+      [props.theme.disabled]: props.disabled,
+      [props.theme.selectable]: props.selectable
+    }, props.className);
 
-  const leftActions = [
-    props.leftIcon && <FontIcon value={props.leftIcon} key='leftIcon'/>,
-    props.avatar && <Avatar image={props.avatar} key='avatar'/>,
-    ...props.leftActions
-  ];
-  const rightActions = [
-    props.rightIcon && <FontIcon value={props.rightIcon} key='rightIcon'/>,
-    ...props.rightActions
-  ];
-  const content = props.itemContent || <ListItemContent caption={props.caption} legend={props.legend} />;
-  const emptyActions = (item) => !item[0] && !item[1] && !item[2];
+    const leftActions = [
+      props.leftIcon && <FontIcon value={props.leftIcon} key='leftIcon'/>,
+      props.avatar && <Avatar image={props.avatar} key='avatar'/>,
+      ...props.leftActions
+    ];
+    const rightActions = [
+      props.rightIcon && <FontIcon value={props.rightIcon} key='rightIcon'/>,
+      ...props.rightActions
+    ];
+    const content = props.itemContent || <ListItemContent caption={props.caption} legend={props.legend} />;
+    const emptyActions = (item) => !item[0] && !item[1] && !item[2];
 
-  return (
-    <span className={className}>
-      {!emptyActions(leftActions) > 0 && <ListItemActions type='left'>{leftActions}</ListItemActions>}
-      {content}
-      {!emptyActions(rightActions) > 0 && <ListItemActions type='right'>{rightActions}</ListItemActions>}
-    </span>
-  );
-};
+    return (
+      <span className={className}>
+        {!emptyActions(leftActions) > 0 && <ListItemActions type='left'>{leftActions}</ListItemActions>}
+        {content}
+        {!emptyActions(rightActions) > 0 && <ListItemActions type='right'>{rightActions}</ListItemActions>}
+      </span>
+    );
+  };
 
-ListItemLayout.propTypes = {
-  avatar: React.PropTypes.oneOfType([
-    React.PropTypes.string,
-    React.PropTypes.element
-  ]),
-  caption: React.PropTypes.string,
-  children: React.PropTypes.any,
-  className: React.PropTypes.string,
-  disabled: React.PropTypes.bool,
-  itemContent: React.PropTypes.element,
-  leftActions: React.PropTypes.array,
-  leftIcon: React.PropTypes.oneOfType([
-    React.PropTypes.string,
-    React.PropTypes.element
-  ]),
-  legend: React.PropTypes.string,
-  rightActions: React.PropTypes.array,
-  rightIcon: React.PropTypes.oneOfType([
-    React.PropTypes.string,
-    React.PropTypes.element
-  ]),
-  selectable: React.PropTypes.bool,
-  theme: React.PropTypes.shape({
-    disabled: React.PropTypes.string.isRequired,
-    item: React.PropTypes.string.isRequired,
-    selectable: React.PropTypes.string.isRequired
-  }),
-  to: React.PropTypes.string
-};
+  ListItemLayout.propTypes = {
+    avatar: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.element
+    ]),
+    caption: React.PropTypes.string,
+    children: React.PropTypes.any,
+    className: React.PropTypes.string,
+    disabled: React.PropTypes.bool,
+    itemContent: React.PropTypes.element,
+    leftActions: React.PropTypes.array,
+    leftIcon: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.element
+    ]),
+    legend: React.PropTypes.string,
+    rightActions: React.PropTypes.array,
+    rightIcon: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.element
+    ]),
+    selectable: React.PropTypes.bool,
+    theme: React.PropTypes.shape({
+      disabled: React.PropTypes.string.isRequired,
+      item: React.PropTypes.string.isRequired,
+      selectable: React.PropTypes.string.isRequired
+    }),
+    to: React.PropTypes.string
+  };
+
+  ListItemLayout.defaultProps = {
+    disabled: false,
+    selectable: false
+  };
 
-ListItemLayout.defaultProps = {
-  disabled: false,
-  selectable: false
+  return ListItemLayout;
 };
 
-export default themr('ToolboxList')(ListItemLayout);
+const ListItemLayout = factory(InjectAvatar, InjectListItemContent, InjectListItemActions);
+export default themr(LIST)(ListItemLayout);
+export { factory as listItemLayoutFactory };
+export { ListItemLayout };
diff --git a/components/list/ListItemText.js b/components/list/ListItemText.js
index c31c587f5..7361d510d 100644
--- a/components/list/ListItemText.js
+++ b/components/list/ListItemText.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
+import { LIST } from '../identifiers.js';
 
 const ListItemText = ({className, primary, children, theme, ...other}) => {
   const _className = classnames(theme.itemText, {[theme.primary]: primary}, className);
@@ -25,4 +26,5 @@ ListItemText.defaultProps = {
   primary: false
 };
 
-export default themr('ToolboxList')(ListItemText);
+export default themr(LIST)(ListItemText);
+export { ListItemText };
diff --git a/components/list/ListSubHeader.js b/components/list/ListSubHeader.js
index c7299aeab..5e820dd73 100644
--- a/components/list/ListSubHeader.js
+++ b/components/list/ListSubHeader.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
+import { LIST } from '../identifiers.js';
 
 const ListSubHeader = ({ caption, className, theme }) => (
   <h5 className={classnames(theme.subheader, className)}>{caption}</h5>
@@ -16,4 +17,5 @@ ListSubHeader.defaultProps = {
   className: ''
 };
 
-export default themr('ToolboxList')(ListSubHeader);
+export default themr(LIST)(ListSubHeader);
+export { ListSubHeader };
diff --git a/components/list/index.js b/components/list/index.js
index 38d0ddafb..06edbf81a 100644
--- a/components/list/index.js
+++ b/components/list/index.js
@@ -1,7 +1,39 @@
-export List from './List';
-export ListItem from './ListItem';
-export ListDivider from './ListDivider';
-export ListCheckbox from './ListCheckbox';
-export ListSubHeader from './ListSubHeader';
-export ListItemText from './ListItemText';
-export ListItemContent from './ListItemContent';
+import { themr } from 'react-css-themr';
+import { LIST } from '../identifiers.js';
+import { Avatar } from '../avatar';
+import { Checkbox } from '../checkbox';
+import { ListItemText } from './ListItemText.js';
+import { ListItemAction } from './ListItemAction.js';
+import { ListSubHeader } from './ListSubHeader.js';
+import { ListDivider } from './ListDivider.js';
+import { listFactory } from './List.js';
+import { listItemFactory } from './ListItem.js';
+import { listCheckboxFactory } from './ListCheckbox.js';
+import { listItemActionsFactory } from './ListItemActions.js';
+import { listItemContentFactory } from './ListItemContent.js';
+import { listItemLayoutFactory } from './ListItemLayout.js';
+import themedRippleFactory from '../ripple';
+import theme from './theme.scss';
+
+const applyTheme = (Component) => themr(LIST, theme)(Component);
+const ripple = themedRippleFactory({ centered: false, listItemIgnore: true });
+const ThemedListItemAction = applyTheme(ListItemAction);
+const ThemedListSubHeader = applyTheme(ListSubHeader);
+const ThemedListItemText = applyTheme(ListItemText);
+const ThemedListDivider = applyTheme(ListDivider);
+const ThemedListItemContent = applyTheme(listItemContentFactory(ThemedListItemText));
+const ThemedListItemActions = applyTheme(listItemActionsFactory(ThemedListItemAction));
+const ThemedListItemLayout = applyTheme(listItemLayoutFactory(Avatar, ThemedListItemContent, ThemedListItemActions));
+const ThemedListCheckbox = applyTheme(listCheckboxFactory(Checkbox, ThemedListItemContent));
+const ThemedListItem = applyTheme(listItemFactory(ripple, ThemedListItemLayout, ThemedListItemContent));
+const ThemedList = applyTheme(listFactory(ThemedListItem));
+
+export { ThemedListItemActions as ListItemActions };
+export { ThemedListItemContent as ListItemContent };
+export { ThemedListItemLayout as ListItemLayout };
+export { ThemedListSubHeader as ListSubHeader };
+export { ThemedListItemText as ListItemText };
+export { ThemedListCheckbox as ListCheckbox };
+export { ThemedListDivider as ListDivider };
+export { ThemedListItem as ListItem };
+export { ThemedList as List };
diff --git a/components/list/readme.md b/components/list/readme.md
index aecd11be6..49021ccc4 100644
--- a/components/list/readme.md
+++ b/components/list/readme.md
@@ -7,7 +7,6 @@ Lists are best suited to presenting a homogeneous data type or sets of data type
 <!-- example -->
 ```jsx
 import { List, ListItem, ListSubHeader, ListDivider, ListCheckbox } from 'react-toolbox/lib/list';
-// Remember to inject the style via provider
 
 const ListTest = () => (
   <List selectable ripple>
@@ -39,6 +38,8 @@ const ListTest = () => (
 );
 ```
 
+If you want to provide styles via context to this components, you should use the key `RTList`.
+
 ## List
 
 Is used as a wrapper for the list. It can hold properties that affect to the whole list and get styles for the wrapper.
@@ -50,9 +51,7 @@ Is used as a wrapper for the list. It can hold properties that affect to the who
 | `ripple`      | `Boolean`   | `false`    | If true, each element in the list will have a ripple effect on click |
 | `selectable`  | `Boolean`   | `false`    | If true, the elements in the list will display a hover effect and a pointer cursor. |
 
-### Theming
-The themed key for this component is `ToolboxList`, it should implement the following interface:
-
+### Theme
 | Name     | Description|
 |:---------|:-----------|
 | `list`   | Used for the root element of the list.|
@@ -79,9 +78,7 @@ Represents a list item that can have avatar, icons, title, subtitle, etc. Note:
 | `selectable`      | `Boolean`             | `false`       | If true, the elements in the list will display a hover effect and a pointer cursor. Inherited from the parent.|
 | `to`              | `String`              |               | In case you want to provide the item as a link, you can pass this property to specify the href. |
 
-### Theming
-The themed key for this component is `ToolboxList`, it should implement the following interface:
-
+### Theme
 | Name     | Description|
 |:---------|:-----------|
 | `disabled` | Added to the inner content if its a disabled item.|
@@ -114,7 +111,7 @@ A special type of item that has a checkbox control on the left side. It implemen
 | `onChange`      | `Function`      |               | Callback called when the input element is changed.|
 | `onFocus`       | `Function`      |               | Callback called when the input element is focused.|
 
-### Theming
+### Theme
 | Name     | Description|
 |:---------|:-----------|
 | `checkbox` | Used as a wrapper class for the subheader element.|
@@ -137,7 +134,7 @@ Simple subcomponent used to give a title to a list area.
 | `caption`     | `String`    |               | Text that will be displayed.|
 | `className`   | `String`    | `''`          | Set a class to give custom styles to the list subheader.|
 
-### Theming
+### Theme
 | Name     | Description|
 |:---------|:-----------|
 | `subheader` | Used as a wrapper class for the subheader element.|
diff --git a/spec/components/list.js b/spec/components/list.js
index 0bd002a9f..715cdf390 100644
--- a/spec/components/list.js
+++ b/spec/components/list.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { ListCheckbox, ListSubHeader, List, ListItem, ListDivider, ListItemText, ListItemContent } from '../../components/list';
+import { Button } from '../../components/button';
 import Avatar from '../../components/avatar';
 import FontIcon from '../../components/font_icon';
-import {Button} from '../../components/button';
 
 const listStyle = {
   border: '1px solid #EEE',
diff --git a/spec/theme.js b/spec/theme.js
index 3684b4fe5..34b5aab21 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -1,6 +1,5 @@
 import '../components/commons.scss';
 
-import ToolboxList from '../components/list/theme.scss';
 import ToolboxMenu from '../components/menu/theme.scss';
 import ToolboxNavigation from '../components/navigation/theme.scss';
 import ToolboxProgress from '../components/progress_bar/theme.scss';
@@ -14,7 +13,6 @@ import ToolboxTimePicker from '../components/time_picker/theme.scss';
 import ToolboxTooltip from '../components/tooltip/theme.scss';
 
 export default {
-  ToolboxList,
   ToolboxMenu,
   ToolboxNavigation,
   ToolboxProgress,

From 95ea35fad852b9828cfe790996c99af4c38f4cc8 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 29 May 2016 21:11:04 +0200
Subject: [PATCH 0594/1024] Better react imports for lists

---
 components/list/ListDivider.js     | 10 +++----
 components/list/ListItem.js        | 20 ++++++-------
 components/list/ListItemActions.js | 12 ++++----
 components/list/ListItemLayout.js  | 48 +++++++++++++++---------------
 components/list/ListItemText.js    | 14 ++++-----
 components/list/ListSubHeader.js   |  8 ++---
 6 files changed, 56 insertions(+), 56 deletions(-)

diff --git a/components/list/ListDivider.js b/components/list/ListDivider.js
index abe5cd85b..0315c0421 100644
--- a/components/list/ListDivider.js
+++ b/components/list/ListDivider.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import { themr } from 'react-css-themr';
 import { LIST } from '../identifiers.js';
 
@@ -7,10 +7,10 @@ const ListDivider = ({inset, theme}) => (
 );
 
 ListDivider.propTypes = {
-  inset: React.PropTypes.bool,
-  theme: React.PropTypes.shape({
-    divider: React.PropTypes.string.isRequired,
-    inset: React.PropTypes.string.isRequired
+  inset: PropTypes.bool,
+  theme: PropTypes.shape({
+    divider: PropTypes.string.isRequired,
+    inset: PropTypes.string.isRequired
   })
 };
 
diff --git a/components/list/ListItem.js b/components/list/ListItem.js
index 06a14e46d..619211933 100644
--- a/components/list/ListItem.js
+++ b/components/list/ListItem.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import { themr } from 'react-css-themr';
 import { LIST } from '../identifiers.js';
 import InjectListItemContent from './ListItemContent.js';
@@ -6,17 +6,17 @@ import InjectListItemLayout from './ListItemLayout.js';
 import rippleFactory from '../ripple/Ripple.js';
 
 const factory = (ripple, ListItemLayout, ListItemContent) => {
-  class ListItem extends React.Component {
+  class ListItem extends Component {
     static propTypes = {
-      children: React.PropTypes.any,
-      className: React.PropTypes.string,
-      disabled: React.PropTypes.bool,
-      onClick: React.PropTypes.func,
-      ripple: React.PropTypes.bool,
-      theme: React.PropTypes.shape({
-        listItem: React.PropTypes.string.isRequired
+      children: PropTypes.any,
+      className: PropTypes.string,
+      disabled: PropTypes.bool,
+      onClick: PropTypes.func,
+      ripple: PropTypes.bool,
+      theme: PropTypes.shape({
+        listItem: PropTypes.string.isRequired
       }),
-      to: React.PropTypes.string
+      to: PropTypes.string
     };
 
     static defaultProps = {
diff --git a/components/list/ListItemActions.js b/components/list/ListItemActions.js
index d5526c3b5..e3a66af40 100644
--- a/components/list/ListItemActions.js
+++ b/components/list/ListItemActions.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import { themr } from 'react-css-themr';
 import { LIST } from '../identifiers.js';
 import InjectListItemAction from './ListItemAction.js';
@@ -17,12 +17,12 @@ const factory = (ListItemAction) => {
   };
 
   ListItemActions.propTypes = {
-    children: React.PropTypes.any,
-    theme: React.PropTypes.shape({
-      left: React.PropTypes.string.isRequired,
-      right: React.PropTypes.string.isRequired
+    children: PropTypes.any,
+    theme: PropTypes.shape({
+      left: PropTypes.string.isRequired,
+      right: PropTypes.string.isRequired
     }),
-    type: React.PropTypes.oneOf(['left', 'right'])
+    type: PropTypes.oneOf(['left', 'right'])
   };
 
   return ListItemActions;
diff --git a/components/list/ListItemLayout.js b/components/list/ListItemLayout.js
index e78b297aa..0dcfc1bab 100644
--- a/components/list/ListItemLayout.js
+++ b/components/list/ListItemLayout.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
 import { LIST } from '../identifiers.js';
@@ -36,33 +36,33 @@ const factory = (Avatar, ListItemContent, ListItemActions) => {
   };
 
   ListItemLayout.propTypes = {
-    avatar: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.element
+    avatar: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.element
     ]),
-    caption: React.PropTypes.string,
-    children: React.PropTypes.any,
-    className: React.PropTypes.string,
-    disabled: React.PropTypes.bool,
-    itemContent: React.PropTypes.element,
-    leftActions: React.PropTypes.array,
-    leftIcon: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.element
+    caption: PropTypes.string,
+    children: PropTypes.any,
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    itemContent: PropTypes.element,
+    leftActions: PropTypes.array,
+    leftIcon: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.element
     ]),
-    legend: React.PropTypes.string,
-    rightActions: React.PropTypes.array,
-    rightIcon: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.element
+    legend: PropTypes.string,
+    rightActions: PropTypes.array,
+    rightIcon: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.element
     ]),
-    selectable: React.PropTypes.bool,
-    theme: React.PropTypes.shape({
-      disabled: React.PropTypes.string.isRequired,
-      item: React.PropTypes.string.isRequired,
-      selectable: React.PropTypes.string.isRequired
+    selectable: PropTypes.bool,
+    theme: PropTypes.shape({
+      disabled: PropTypes.string.isRequired,
+      item: PropTypes.string.isRequired,
+      selectable: PropTypes.string.isRequired
     }),
-    to: React.PropTypes.string
+    to: PropTypes.string
   };
 
   ListItemLayout.defaultProps = {
diff --git a/components/list/ListItemText.js b/components/list/ListItemText.js
index 7361d510d..cbb083630 100644
--- a/components/list/ListItemText.js
+++ b/components/list/ListItemText.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
 import { LIST } from '../identifiers.js';
@@ -13,12 +13,12 @@ const ListItemText = ({className, primary, children, theme, ...other}) => {
 };
 
 ListItemText.propTypes = {
-  children: React.PropTypes.any,
-  className: React.PropTypes.string,
-  primary: React.PropTypes.bool,
-  theme: React.PropTypes.shape({
-    itemText: React.PropTypes.string.isRequired,
-    primary: React.PropTypes.string.isRequired
+  children: PropTypes.any,
+  className: PropTypes.string,
+  primary: PropTypes.bool,
+  theme: PropTypes.shape({
+    itemText: PropTypes.string.isRequired,
+    primary: PropTypes.string.isRequired
   })
 };
 
diff --git a/components/list/ListSubHeader.js b/components/list/ListSubHeader.js
index 5e820dd73..e4da57981 100644
--- a/components/list/ListSubHeader.js
+++ b/components/list/ListSubHeader.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
 import { LIST } from '../identifiers.js';
@@ -8,9 +8,9 @@ const ListSubHeader = ({ caption, className, theme }) => (
 );
 
 ListSubHeader.propTypes = {
-  caption: React.PropTypes.string,
-  className: React.PropTypes.string,
-  theme: React.PropTypes.object
+  caption: PropTypes.string,
+  className: PropTypes.string,
+  theme: PropTypes.object
 };
 
 ListSubHeader.defaultProps = {

From 767d16b04780b38879090fd2ef07edcb8cbedace Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 29 May 2016 21:23:58 +0200
Subject: [PATCH 0595/1024] Fullname imports for util files

---
 components/utils/index.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/utils/index.js b/components/utils/index.js
index c4b256034..5e804193e 100644
--- a/components/utils/index.js
+++ b/components/utils/index.js
@@ -1,7 +1,7 @@
-import events from './events';
-import prefixer from './prefixer';
-import time from './time';
-import utils from './utils';
+import events from './events.js';
+import prefixer from './prefixer.js';
+import time from './time.js';
+import utils from './utils.js';
 
 export default {events, prefixer, time, utils};
 export {events};

From f88ddde7273904f20c19d29f7a5fb41a4e332e97 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 29 May 2016 21:24:22 +0200
Subject: [PATCH 0596/1024] Autoinject theme to Menu component

---
 components/menu/IconMenu.js    | 146 +++++++-------
 components/menu/Menu.js        | 338 +++++++++++++++++----------------
 components/menu/MenuDivider.js |  10 +-
 components/menu/MenuItem.js    | 112 +++++------
 components/menu/index.js       |  24 ++-
 spec/theme.js                  |   2 -
 6 files changed, 335 insertions(+), 297 deletions(-)

diff --git a/components/menu/IconMenu.js b/components/menu/IconMenu.js
index b0554cc60..864d68b3c 100644
--- a/components/menu/IconMenu.js
+++ b/components/menu/IconMenu.js
@@ -1,80 +1,88 @@
 import React from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
-import { IconButton } from '../button';
-import Menu from './Menu';
+import { MENU } from '../identifiers.js';
+import InjectIconButton from '../button/IconButton.js';
+import InjectMenu from './Menu.js';
 
-class IconMenu extends React.Component {
-  static propTypes = {
-    children: React.PropTypes.node,
-    className: React.PropTypes.string,
-    icon: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.element
-    ]),
-    iconRipple: React.PropTypes.bool,
-    menuRipple: React.PropTypes.bool,
-    onClick: React.PropTypes.func,
-    onHide: React.PropTypes.func,
-    onSelect: React.PropTypes.func,
-    onShow: React.PropTypes.func,
-    position: React.PropTypes.string,
-    selectable: React.PropTypes.bool,
-    selected: React.PropTypes.any,
-    theme: React.PropTypes.shape({
-      icon: React.PropTypes.string.isRequired,
-      iconMenu: React.PropTypes.string.isRequired
-    })
-  };
+const factory = (IconButton, Menu) => {
+  class IconMenu extends React.Component {
+    static propTypes = {
+      children: React.PropTypes.node,
+      className: React.PropTypes.string,
+      icon: React.PropTypes.oneOfType([
+        React.PropTypes.string,
+        React.PropTypes.element
+      ]),
+      iconRipple: React.PropTypes.bool,
+      menuRipple: React.PropTypes.bool,
+      onClick: React.PropTypes.func,
+      onHide: React.PropTypes.func,
+      onSelect: React.PropTypes.func,
+      onShow: React.PropTypes.func,
+      position: React.PropTypes.string,
+      selectable: React.PropTypes.bool,
+      selected: React.PropTypes.any,
+      theme: React.PropTypes.shape({
+        icon: React.PropTypes.string.isRequired,
+        iconMenu: React.PropTypes.string.isRequired
+      })
+    };
 
-  static defaultProps = {
-    className: '',
-    icon: 'more_vert',
-    iconRipple: true,
-    menuRipple: true,
-    position: 'auto',
-    selectable: false
-  };
+    static defaultProps = {
+      className: '',
+      icon: 'more_vert',
+      iconRipple: true,
+      menuRipple: true,
+      position: 'auto',
+      selectable: false
+    };
 
-  state = {
-    active: false
-  }
+    state = {
+      active: false
+    }
 
-  handleButtonClick = (event) => {
-    this.setState({ active: !this.state.active });
-    if (this.props.onClick) this.props.onClick(event);
-  };
+    handleButtonClick = (event) => {
+      this.setState({ active: !this.state.active });
+      if (this.props.onClick) this.props.onClick(event);
+    };
 
-  handleMenuHide = () => {
-    this.setState({ active: false });
-    if (this.props.onHide) this.props.onHide();
-  }
+    handleMenuHide = () => {
+      this.setState({ active: false });
+      if (this.props.onHide) this.props.onHide();
+    }
 
-  render () {
-    return (
-      <div className={classnames(this.props.theme.iconMenu, this.props.className)}>
-        <IconButton
-          className={this.props.theme.icon}
-          icon={this.props.icon}
-          onClick={this.handleButtonClick}
-          ripple={this.props.iconRipple}
-        />
-        <Menu
-          ref='menu'
-          active={this.state.active}
-          onHide={this.handleMenuHide}
-          onSelect={this.props.onSelect}
-          onShow={this.props.onShow}
-          position={this.props.position}
-          ripple={this.props.menuRipple}
-          selectable={this.props.selectable}
-          selected={this.props.selected}
-        >
-          {this.props.children}
-        </Menu>
-      </div>
-    );
+    render () {
+      return (
+        <div className={classnames(this.props.theme.iconMenu, this.props.className)}>
+          <IconButton
+            className={this.props.theme.icon}
+            icon={this.props.icon}
+            onClick={this.handleButtonClick}
+            ripple={this.props.iconRipple}
+          />
+          <Menu
+            ref='menu'
+            active={this.state.active}
+            onHide={this.handleMenuHide}
+            onSelect={this.props.onSelect}
+            onShow={this.props.onShow}
+            position={this.props.position}
+            ripple={this.props.menuRipple}
+            selectable={this.props.selectable}
+            selected={this.props.selected}
+          >
+            {this.props.children}
+          </Menu>
+        </div>
+      );
+    }
   }
-}
 
-export default themr('ToolboxMenu')(IconMenu);
+  return IconMenu;
+};
+
+const IconMenu = factory(InjectIconButton, InjectMenu);
+export default themr(MENU)(IconMenu);
+export { factory as iconMenuFactory };
+export { IconMenu };
diff --git a/components/menu/Menu.js b/components/menu/Menu.js
index 6b8fd749d..747a941ff 100644
--- a/components/menu/Menu.js
+++ b/components/menu/Menu.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { themr } from 'react-css-themr';
 import classnames from 'classnames';
-import MenuItem from './MenuItem';
+import { themr } from 'react-css-themr';
+import { MENU } from '../identifiers.js';
 import { events, utils } from '../utils';
+import InjectMenuItem from './MenuItem.js';
 
 const POSITION = {
   AUTO: 'auto',
@@ -14,193 +15,200 @@ const POSITION = {
   BOTTOM_RIGHT: 'bottomRight'
 };
 
-class Menu extends React.Component {
-  static propTypes = {
-    active: React.PropTypes.bool,
-    children: React.PropTypes.node,
-    className: React.PropTypes.string,
-    onHide: React.PropTypes.func,
-    onSelect: React.PropTypes.func,
-    onShow: React.PropTypes.func,
-    outline: React.PropTypes.bool,
-    position: React.PropTypes.string,
-    ripple: React.PropTypes.bool,
-    selectable: React.PropTypes.bool,
-    selected: React.PropTypes.any,
-    theme: React.PropTypes.shape({
-      active: React.PropTypes.string.isRequired,
-      bottomLeft: React.PropTypes.string.isRequired,
-      bottomRight: React.PropTypes.string.isRequired,
-      menu: React.PropTypes.string.isRequired,
-      menuInner: React.PropTypes.string.isRequired,
-      outline: React.PropTypes.string.isRequired,
-      rippled: React.PropTypes.string.isRequired,
-      static: React.PropTypes.string.isRequired,
-      topLeft: React.PropTypes.string.isRequired,
-      topRight: React.PropTypes.string.isRequired
-    })
-  };
-
-  static defaultProps = {
-    active: false,
-    outline: true,
-    position: POSITION.STATIC,
-    ripple: true,
-    selectable: true
-  };
-
-  state = {
-    active: this.props.active,
-    rippled: false
-  };
-
-  componentDidMount () {
-    this.positionTimeoutHandle = setTimeout(() => {
-      const { width, height } = this.refs.menu.getBoundingClientRect();
-      const position = this.props.position === POSITION.AUTO ? this.calculatePosition() : this.props.position;
-      this.setState({ position, width, height });
-    });
-  }
-
-  componentWillReceiveProps (nextProps) {
-    if (this.props.position !== nextProps.position) {
-      const position = nextProps.position === POSITION.AUTO ? this.calculatePosition() : nextProps.position;
-      this.setState({ position });
+const factory = (MenuItem) => {
+  class Menu extends React.Component {
+    static propTypes = {
+      active: React.PropTypes.bool,
+      children: React.PropTypes.node,
+      className: React.PropTypes.string,
+      onHide: React.PropTypes.func,
+      onSelect: React.PropTypes.func,
+      onShow: React.PropTypes.func,
+      outline: React.PropTypes.bool,
+      position: React.PropTypes.string,
+      ripple: React.PropTypes.bool,
+      selectable: React.PropTypes.bool,
+      selected: React.PropTypes.any,
+      theme: React.PropTypes.shape({
+        active: React.PropTypes.string.isRequired,
+        bottomLeft: React.PropTypes.string.isRequired,
+        bottomRight: React.PropTypes.string.isRequired,
+        menu: React.PropTypes.string.isRequired,
+        menuInner: React.PropTypes.string.isRequired,
+        outline: React.PropTypes.string.isRequired,
+        rippled: React.PropTypes.string.isRequired,
+        static: React.PropTypes.string.isRequired,
+        topLeft: React.PropTypes.string.isRequired,
+        topRight: React.PropTypes.string.isRequired
+      })
+    };
+
+    static defaultProps = {
+      active: false,
+      outline: true,
+      position: POSITION.STATIC,
+      ripple: true,
+      selectable: true
+    };
+
+    state = {
+      active: this.props.active,
+      rippled: false
+    };
+
+    componentDidMount () {
+      this.positionTimeoutHandle = setTimeout(() => {
+        const { width, height } = this.refs.menu.getBoundingClientRect();
+        const position = this.props.position === POSITION.AUTO ? this.calculatePosition() : this.props.position;
+        this.setState({ position, width, height });
+      });
     }
 
-    if (!this.props.active && nextProps.active && !this.state.active) {
-      this.show();
+    componentWillReceiveProps (nextProps) {
+      if (this.props.position !== nextProps.position) {
+        const position = nextProps.position === POSITION.AUTO ? this.calculatePosition() : nextProps.position;
+        this.setState({ position });
+      }
+
+      if (!this.props.active && nextProps.active && !this.state.active) {
+        this.show();
+      }
+
+      if (this.props.active && !nextProps.active && this.state.active) {
+        this.hide();
+      }
     }
 
-    if (this.props.active && !nextProps.active && this.state.active) {
-      this.hide();
+    shouldComponentUpdate (nextProps, nextState) {
+      if (!this.state.active && nextState.active && this.props.position === POSITION.AUTO) {
+        const position = this.calculatePosition();
+        if (this.state.position !== position) {
+          this.setState({ position, active: false }, () => {
+            this.activateTimeoutHandle = setTimeout(() => {this.setState({active: true}); }, 20);
+          });
+          return false;
+        }
+      }
+      return true;
     }
-  }
 
-  shouldComponentUpdate (nextProps, nextState) {
-    if (!this.state.active && nextState.active && this.props.position === POSITION.AUTO) {
-      const position = this.calculatePosition();
-      if (this.state.position !== position) {
-        this.setState({ position, active: false }, () => {
-          this.activateTimeoutHandle = setTimeout(() => {this.setState({active: true}); }, 20);
-        });
-        return false;
+    componentWillUpdate (nextProps, nextState) {
+      if (!this.state.active && nextState.active) {
+        events.addEventsToDocument({click: this.handleDocumentClick});
       }
     }
-    return true;
-  }
 
-  componentWillUpdate (nextProps, nextState) {
-    if (!this.state.active && nextState.active) {
-      events.addEventsToDocument({click: this.handleDocumentClick});
+    componentDidUpdate (prevProps, prevState) {
+      if (prevState.active && !this.state.active) {
+        if (this.props.onHide) this.props.onHide();
+        events.removeEventsFromDocument({click: this.handleDocumentClick});
+      } else if (!prevState.active && this.state.active && this.props.onShow) {
+        this.props.onShow();
+      }
     }
-  }
 
-  componentDidUpdate (prevProps, prevState) {
-    if (prevState.active && !this.state.active) {
-      if (this.props.onHide) this.props.onHide();
-      events.removeEventsFromDocument({click: this.handleDocumentClick});
-    } else if (!prevState.active && this.state.active && this.props.onShow) {
-      this.props.onShow();
+    componentWillUnmount () {
+      if (this.state.active) {
+        events.removeEventsFromDocument({click: this.handleDocumentClick});
+      }
+      clearTimeout(this.positionTimeoutHandle);
+      clearTimeout(this.activateTimeoutHandle);
     }
-  }
 
-  componentWillUnmount () {
-    if (this.state.active) {
-      events.removeEventsFromDocument({click: this.handleDocumentClick});
+    handleDocumentClick = (event) => {
+      if (this.state.active && !events.targetIsDescendant(event, ReactDOM.findDOMNode(this))) {
+        this.setState({active: false, rippled: false});
+      }
+    };
+
+    handleSelect = (item) => {
+      const { value, onClick } = item.props;
+      this.setState({ active: false, rippled: this.props.ripple }, () => {
+        if (onClick) onClick();
+        if (this.props.onSelect) this.props.onSelect(value);
+      });
+    };
+
+    calculatePosition () {
+      const parentNode = ReactDOM.findDOMNode(this).parentNode;
+      if (!parentNode) return;
+      const {top, left, height, width} = parentNode.getBoundingClientRect();
+      const {height: wh, width: ww} = utils.getViewport();
+      const toTop = top < ((wh / 2) - height / 2);
+      const toLeft = left < ((ww / 2) - width / 2);
+      return `${toTop ? 'top' : 'bottom'}${toLeft ? 'Left' : 'Right'}`;
     }
-    clearTimeout(this.positionTimeoutHandle);
-    clearTimeout(this.activateTimeoutHandle);
-  }
 
-  handleDocumentClick = (event) => {
-    if (this.state.active && !events.targetIsDescendant(event, ReactDOM.findDOMNode(this))) {
-      this.setState({active: false, rippled: false});
+    getMenuStyle () {
+      const { width, height, position } = this.state;
+      if (position !== POSITION.STATIC) {
+        if (this.state.active) {
+          return { clip: `rect(0 ${width}px ${height}px 0)` };
+        } else if (position === POSITION.TOP_RIGHT) {
+          return { clip: `rect(0 ${width}px 0 ${width}px)` };
+        } else if (position === POSITION.BOTTOM_RIGHT) {
+          return { clip: `rect(${height}px ${width}px ${height}px ${width}px)` };
+        } else if (position === POSITION.BOTTOM_LEFT) {
+          return { clip: `rect(${height}px 0 ${height}px 0)` };
+        } else if (position === POSITION.TOP_LEFT) {
+          return { clip: 'rect(0 0 0 0)' };
+        }
+      }
     }
-  };
-
-  handleSelect = (item) => {
-    const { value, onClick } = item.props;
-    this.setState({ active: false, rippled: this.props.ripple }, () => {
-      if (onClick) onClick();
-      if (this.props.onSelect) this.props.onSelect(value);
-    });
-  };
-
-  calculatePosition () {
-    const parentNode = ReactDOM.findDOMNode(this).parentNode;
-    if (!parentNode) return;
-    const {top, left, height, width} = parentNode.getBoundingClientRect();
-    const {height: wh, width: ww} = utils.getViewport();
-    const toTop = top < ((wh / 2) - height / 2);
-    const toLeft = left < ((ww / 2) - width / 2);
-    return `${toTop ? 'top' : 'bottom'}${toLeft ? 'Left' : 'Right'}`;
-  }
 
-  getMenuStyle () {
-    const { width, height, position } = this.state;
-    if (position !== POSITION.STATIC) {
-      if (this.state.active) {
-        return { clip: `rect(0 ${width}px ${height}px 0)` };
-      } else if (position === POSITION.TOP_RIGHT) {
-        return { clip: `rect(0 ${width}px 0 ${width}px)` };
-      } else if (position === POSITION.BOTTOM_RIGHT) {
-        return { clip: `rect(${height}px ${width}px ${height}px ${width}px)` };
-      } else if (position === POSITION.BOTTOM_LEFT) {
-        return { clip: `rect(${height}px 0 ${height}px 0)` };
-      } else if (position === POSITION.TOP_LEFT) {
-        return { clip: 'rect(0 0 0 0)' };
+    getRootStyle () {
+      if (this.state.position !== POSITION.STATIC) {
+        return { width: this.state.width, height: this.state.height };
       }
     }
-  }
 
-  getRootStyle () {
-    if (this.state.position !== POSITION.STATIC) {
-      return { width: this.state.width, height: this.state.height };
+    renderItems () {
+      return React.Children.map(this.props.children, (item) => {
+        if (!item) return item;
+        if (item.type === MenuItem) {
+          return React.cloneElement(item, {
+            ripple: item.props.ripple || this.props.ripple,
+            selected: typeof item.props.value !== 'undefined' && this.props.selectable && item.props.value === this.props.selected,
+            onClick: this.handleSelect.bind(this, item)
+          });
+        } else {
+          return React.cloneElement(item);
+        }
+      });
     }
-  }
 
-  renderItems () {
-    return React.Children.map(this.props.children, (item) => {
-      if (!item) return item;
-      if (item.type === MenuItem) {
-        return React.cloneElement(item, {
-          ripple: item.props.ripple || this.props.ripple,
-          selected: typeof item.props.value !== 'undefined' && this.props.selectable && item.props.value === this.props.selected,
-          onClick: this.handleSelect.bind(this, item)
-        });
-      } else {
-        return React.cloneElement(item);
-      }
-    });
-  }
+    show () {
+      const { width, height } = this.refs.menu.getBoundingClientRect();
+      this.setState({active: true, width, height});
+    }
 
-  show () {
-    const { width, height } = this.refs.menu.getBoundingClientRect();
-    this.setState({active: true, width, height});
-  }
+    hide () {
+      this.setState({active: false});
+    }
 
-  hide () {
-    this.setState({active: false});
+    render () {
+      const { theme } = this.props;
+      const outlineStyle = { width: this.state.width, height: this.state.height };
+      const className = classnames([theme.menu, theme[this.state.position]], {
+        [theme.active]: this.state.active,
+        [theme.rippled]: this.state.rippled
+      }, this.props.className);
+
+      return (
+        <div data-react-toolbox='menu' className={className} style={this.getRootStyle()}>
+          {this.props.outline ? <div className={theme.outline} style={outlineStyle}></div> : null}
+          <ul ref='menu' className={theme.menuInner} style={this.getMenuStyle()}>
+            {this.renderItems()}
+          </ul>
+        </div>
+      );
+    }
   }
 
-  render () {
-    const { theme } = this.props;
-    const outlineStyle = { width: this.state.width, height: this.state.height };
-    const className = classnames([theme.menu, theme[this.state.position]], {
-      [theme.active]: this.state.active,
-      [theme.rippled]: this.state.rippled
-    }, this.props.className);
-
-    return (
-      <div data-react-toolbox='menu' className={className} style={this.getRootStyle()}>
-        {this.props.outline ? <div className={theme.outline} style={outlineStyle}></div> : null}
-        <ul ref='menu' className={theme.menuInner} style={this.getMenuStyle()}>
-          {this.renderItems()}
-        </ul>
-      </div>
-    );
-  }
-}
+  return Menu;
+};
 
-export default themr('ToolboxMenu')(Menu);
+const Menu = factory(InjectMenuItem);
+export default themr(MENU)(Menu);
+export { factory as menuFactory };
+export { Menu };
diff --git a/components/menu/MenuDivider.js b/components/menu/MenuDivider.js
index 454ab1e30..d120da5e1 100644
--- a/components/menu/MenuDivider.js
+++ b/components/menu/MenuDivider.js
@@ -1,14 +1,16 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import { themr } from 'react-css-themr';
+import { MENU } from '../identifiers.js';
 
 const MenuDivider = ({ theme }) => (
   <hr data-react-toolbox='menu-divider' className={theme.menuDivider}/>
 );
 
 MenuDivider.propTypes = {
-  theme: React.PropTypes.shape({
-    menuDivider: React.PropTypes.string.isRequired
+  theme: PropTypes.shape({
+    menuDivider: PropTypes.string.isRequired
   })
 };
 
-export default themr('ToolboxMenu')(MenuDivider);
+export default themr(MENU)(MenuDivider);
+export { MenuDivider };
diff --git a/components/menu/MenuItem.js b/components/menu/MenuItem.js
index 7b6288399..26dec4a30 100644
--- a/components/menu/MenuItem.js
+++ b/components/menu/MenuItem.js
@@ -1,62 +1,68 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
-import FontIcon from '../font_icon';
-import Ripple from '../ripple';
+import { MENU } from '../identifiers.js';
+import FontIcon from '../font_icon/FontIcon.js';
+import rippleFactory from '../ripple/Ripple.js';
 
-class MenuItem extends React.Component {
-  static propTypes = {
-    caption: React.PropTypes.string.isRequired,
-    children: React.PropTypes.any,
-    className: React.PropTypes.string,
-    disabled: React.PropTypes.bool,
-    icon: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.element
-    ]),
-    onClick: React.PropTypes.func,
-    selected: React.PropTypes.bool,
-    shortcut: React.PropTypes.string,
-    theme: React.PropTypes.shape({
-      caption: React.PropTypes.string.isRequired,
-      disabled: React.PropTypes.string.isRequired,
-      icon: React.PropTypes.string.isRequired,
-      menuItem: React.PropTypes.string.isRequired,
-      selected: React.PropTypes.string.isRequired,
-      shortcut: React.PropTypes.string.isRequired
-    })
-  };
+const factory = (ripple) => {
+  class MenuItem extends Component {
+    static propTypes = {
+      caption: PropTypes.string.isRequired,
+      children: PropTypes.any,
+      className: PropTypes.string,
+      disabled: PropTypes.bool,
+      icon: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.element
+      ]),
+      onClick: PropTypes.func,
+      selected: PropTypes.bool,
+      shortcut: PropTypes.string,
+      theme: PropTypes.shape({
+        caption: PropTypes.string.isRequired,
+        disabled: PropTypes.string.isRequired,
+        icon: PropTypes.string.isRequired,
+        menuItem: PropTypes.string.isRequired,
+        selected: PropTypes.string.isRequired,
+        shortcut: PropTypes.string.isRequired
+      })
+    };
 
-  static defaultProps = {
-    className: '',
-    disabled: false,
-    selected: false
-  };
+    static defaultProps = {
+      className: '',
+      disabled: false,
+      selected: false
+    };
 
-  handleClick = (event) => {
-    if (this.props.onClick && !this.props.disabled) {
-      this.props.onClick(event, this);
-    }
-  };
+    handleClick = (event) => {
+      if (this.props.onClick && !this.props.disabled) {
+        this.props.onClick(event, this);
+      }
+    };
 
-  render () {
-    const {icon, caption, children, shortcut, selected, disabled, theme, ...others} = this.props;
-    const className = classnames(theme.menuItem, {
-      [theme.selected]: selected,
-      [theme.disabled]: disabled
-    }, this.props.className);
+    render () {
+      const {icon, caption, children, shortcut, selected, disabled, theme, ...others} = this.props;
+      const className = classnames(theme.menuItem, {
+        [theme.selected]: selected,
+        [theme.disabled]: disabled
+      }, this.props.className);
 
-    return (
-      <li {...others} data-react-toolbox='menu-item' className={className} onClick={this.handleClick}>
-        {icon ? <FontIcon value={icon} className={theme.icon}/> : null}
-        <span className={theme.caption}>{caption}</span>
-        {shortcut ? <small className={theme.shortcut}>{shortcut}</small> : null}
-        {children}
-      </li>
-    );
+      return (
+        <li {...others} data-react-toolbox='menu-item' className={className} onClick={this.handleClick}>
+          {icon ? <FontIcon value={icon} className={theme.icon}/> : null}
+          <span className={theme.caption}>{caption}</span>
+          {shortcut ? <small className={theme.shortcut}>{shortcut}</small> : null}
+          {children}
+        </li>
+      );
+    }
   }
-}
 
-const RawMenuItem = themr('ToolboxMenu')(MenuItem);
-export default themr('ToolboxMenu')(Ripple({})(MenuItem));
-export {RawMenuItem as RawMenuItem};
+  return ripple(MenuItem);
+};
+
+const MenuItem = factory(rippleFactory({}));
+export default themr(MENU)(MenuItem);
+export { factory as menuItemFactory };
+export { MenuItem };
diff --git a/components/menu/index.js b/components/menu/index.js
index 779e68d19..e5a52a3cb 100644
--- a/components/menu/index.js
+++ b/components/menu/index.js
@@ -1,4 +1,20 @@
-export Menu from './Menu';
-export MenuItem from './MenuItem';
-export MenuDivider from './MenuDivider';
-export IconMenu from './IconMenu';
+import { themr } from 'react-css-themr';
+import { MENU } from '../identifiers.js';
+import { IconButton } from '../button';
+import { MenuDivider } from './MenuDivider.js';
+import { menuItemFactory } from './MenuItem.js';
+import { menuFactory } from './Menu.js';
+import { iconMenuFactory } from './IconMenu.js';
+import themedRippleFactory from '../ripple';
+import theme from './theme.scss';
+
+const applyTheme = (Component) => themr(MENU, theme)(Component);
+const ThemedMenuDivider = applyTheme(MenuDivider);
+const ThemedMenuItem = applyTheme(menuItemFactory(themedRippleFactory({})));
+const ThemedMenu = applyTheme(menuFactory(ThemedMenuItem));
+const ThemedIconMenu = applyTheme(iconMenuFactory(IconButton, ThemedMenu));
+
+export { ThemedMenuDivider as MenuDivider };
+export { ThemedMenuItem as MenuItem };
+export { ThemedMenu as Menu };
+export { ThemedIconMenu as IconMenu };
diff --git a/spec/theme.js b/spec/theme.js
index 34b5aab21..6b857d9a1 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -1,6 +1,5 @@
 import '../components/commons.scss';
 
-import ToolboxMenu from '../components/menu/theme.scss';
 import ToolboxNavigation from '../components/navigation/theme.scss';
 import ToolboxProgress from '../components/progress_bar/theme.scss';
 import ToolboxRadio from '../components/radio/theme.scss';
@@ -13,7 +12,6 @@ import ToolboxTimePicker from '../components/time_picker/theme.scss';
 import ToolboxTooltip from '../components/tooltip/theme.scss';
 
 export default {
-  ToolboxMenu,
   ToolboxNavigation,
   ToolboxProgress,
   ToolboxRadio,

From f7ae5a8bc943e7a719fce91cd7581c28f8c70999 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 29 May 2016 21:25:49 +0200
Subject: [PATCH 0597/1024] Update readme for menu

---
 components/menu/readme.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/menu/readme.md b/components/menu/readme.md
index 7176ab3b8..ea795d63b 100644
--- a/components/menu/readme.md
+++ b/components/menu/readme.md
@@ -2,8 +2,6 @@
 
 A [Menu](https://www.google.com/design/spec/components/menus.html) is a temporary piece of material emitted from a button, an action, a pointer, or another control that contains at least two menu items. Each menu item is a discrete option or action that can affect the app, the view, or selected elements within a view. Menus should not be used as a primary method for navigation within an app. You can compose a menu based on a few subcomponents, same as for Lists.
 
-This set of components is themed to be provided width the key `ToolboxMenu`.
-
 <!-- example -->
 ```jsx
 import {IconMenu, MenuItem, MenuDivider } from 'react-toolbox/lib/menu';
@@ -19,6 +17,8 @@ const MenuTest = () => (
 );
 ```
 
+If you want to provide a theme for any of these subcomponents via context, the component key is `RTMenu`.
+
 ## Menu
 
 This subcomponent is the default wrapper for a menu and is responsible for the opening behavior. Its properties can affect to the Item children.

From df88b1d2aa7ff1f4346a9e3849ce63ee8616350d Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 29 May 2016 21:56:10 +0200
Subject: [PATCH 0598/1024] Autoinject Navigation theme

---
 components/identifiers.js           |  1 +
 components/navigation/Navigation.js | 84 ++++++++++++++++-------------
 components/navigation/index.js      | 11 +++-
 components/navigation/readme.md     |  5 +-
 spec/theme.js                       |  2 -
 5 files changed, 59 insertions(+), 44 deletions(-)

diff --git a/components/identifiers.js b/components/identifiers.js
index 7f15698f5..b0e495512 100644
--- a/components/identifiers.js
+++ b/components/identifiers.js
@@ -11,6 +11,7 @@ export const INPUT = 'RTInput';
 export const LAYOUT = 'RTLayout';
 export const LINK = 'RTLink';
 export const LIST = 'RTList';
+export const NAVIGATION = 'RTNavigation';
 export const OVERLAY = 'RTOverlay';
 export const PROGRESS_BAR = 'RTProgressBar';
 export const RIPPLE = 'RTRipple';
diff --git a/components/navigation/Navigation.js b/components/navigation/Navigation.js
index e3fb6ea33..3aaaf50c1 100644
--- a/components/navigation/Navigation.js
+++ b/components/navigation/Navigation.js
@@ -1,47 +1,55 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
-import Button from '../button';
-import Link from '../link';
+import { NAVIGATION } from '../identifiers.js';
+import InjectButton from '../button/Button.js';
+import InjectLink from '../link/Link.js';
 
-const Navigation = ({ actions, children, className, routes, theme, type }) => {
-  const _className = classnames(theme[type], className);
-  const buttons = actions.map((action, index) => {
-    return <Button className={theme.button} key={index} {...action} />;
-  });
+const factory = (Button, Link) => {
+  const Navigation = ({ actions, children, className, routes, theme, type }) => {
+    const _className = classnames(theme[type], className);
+    const buttons = actions.map((action, index) => {
+      return <Button className={theme.button} key={index} {...action} />;
+    });
 
-  const links = routes.map((route, index) => {
-    return <Link className={theme.link} key={index} {...route} />;
-  });
+    const links = routes.map((route, index) => {
+      return <Link className={theme.link} key={index} {...route} />;
+    });
 
-  return (
-    <nav data-react-toolbox='navigation' className={_className}>
-      {links}
-      {buttons}
-      {children}
-    </nav>
-  );
-};
+    return (
+      <nav data-react-toolbox='navigation' className={_className}>
+        {links}
+        {buttons}
+        {children}
+      </nav>
+    );
+  };
 
-Navigation.propTypes = {
-  actions: React.PropTypes.array,
-  children: React.PropTypes.node,
-  className: React.PropTypes.string,
-  routes: React.PropTypes.array,
-  theme: React.PropTypes.shape({
-    button: React.PropTypes.string.isRequired,
-    horizontal: React.PropTypes.string.isRequired,
-    link: React.PropTypes.string.isRequired,
-    vertical: React.PropTypes.string.isRequired
-  }),
-  type: React.PropTypes.oneOf(['vertical', 'horizontal'])
-};
+  Navigation.propTypes = {
+    actions: PropTypes.array,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    routes: PropTypes.array,
+    theme: PropTypes.shape({
+      button: PropTypes.string.isRequired,
+      horizontal: PropTypes.string.isRequired,
+      link: PropTypes.string.isRequired,
+      vertical: PropTypes.string.isRequired
+    }),
+    type: PropTypes.oneOf(['vertical', 'horizontal'])
+  };
+
+  Navigation.defaultProps = {
+    actions: [],
+    className: '',
+    type: 'horizontal',
+    routes: []
+  };
 
-Navigation.defaultProps = {
-  actions: [],
-  className: '',
-  type: 'horizontal',
-  routes: []
+  return Navigation;
 };
 
-export default themr('ToolboxNavigation')(Navigation);
+const Navigation = factory(InjectButton, InjectLink);
+export default themr(NAVIGATION)(Navigation);
+export { factory as navigationFactory };
+export { Navigation };
diff --git a/components/navigation/index.js b/components/navigation/index.js
index 173ff5a1c..d02ab54d0 100644
--- a/components/navigation/index.js
+++ b/components/navigation/index.js
@@ -1 +1,10 @@
-export default from './Navigation';
+import { themr } from 'react-css-themr';
+import { NAVIGATION } from '../identifiers.js';
+import { navigationFactory } from './Navigation.js';
+import { Button } from '../button';
+import { Link } from '../link';
+import theme from './theme.scss';
+
+const ThemedNavigation = themr(NAVIGATION, theme)(navigationFactory(Button, Link));
+export default ThemedNavigation;
+export { ThemedNavigation as Navigation };
diff --git a/components/navigation/readme.md b/components/navigation/readme.md
index c48746799..3d143e704 100644
--- a/components/navigation/readme.md
+++ b/components/navigation/readme.md
@@ -2,13 +2,10 @@
 
 This component is intended to be a common wrapper for a group of links or buttons. It sets a minimal layout, semantic markup and spacing for each of those elements.
 
-The theming for this component can be provided using the key `ToolboxNavigation`.
-
 <!-- example -->
 ```jsx
 import Navigation from 'react-toolbox/lib/navigation';
 import Link from 'react-toolbox/lib/link';
-// Remember to provide themes using ThemeProvider
 
 const actions = [
   { label: 'Alarm', raised: true, icon: 'access_alarm'},
@@ -26,6 +23,8 @@ const NavigationTest = () => (
 );
 ```
 
+The theming for this component can be provided using the key `RTNavigation`.
+
 ## Properties
 
 | Name            | Type          | Default         | Description|
diff --git a/spec/theme.js b/spec/theme.js
index 6b857d9a1..d558c1a09 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -1,6 +1,5 @@
 import '../components/commons.scss';
 
-import ToolboxNavigation from '../components/navigation/theme.scss';
 import ToolboxProgress from '../components/progress_bar/theme.scss';
 import ToolboxRadio from '../components/radio/theme.scss';
 import ToolboxSlider from '../components/slider/theme.scss';
@@ -12,7 +11,6 @@ import ToolboxTimePicker from '../components/time_picker/theme.scss';
 import ToolboxTooltip from '../components/tooltip/theme.scss';
 
 export default {
-  ToolboxNavigation,
   ToolboxProgress,
   ToolboxRadio,
   ToolboxSlider,

From e1b2b6b9724a36e12ea4b1a8d06642d8e0715bed Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 29 May 2016 22:09:02 +0200
Subject: [PATCH 0599/1024] Autoinject theme to Radio component

---
 components/identifiers.js       |   1 +
 components/radio/Radio.js       |  47 ++++++-------
 components/radio/RadioButton.js | 120 +++++++++++++++++---------------
 components/radio/RadioGroup.js  |  87 ++++++++++++-----------
 components/radio/index.js       |  16 ++++-
 spec/theme.js                   |   4 --
 6 files changed, 150 insertions(+), 125 deletions(-)

diff --git a/components/identifiers.js b/components/identifiers.js
index b0e495512..2d3ec2f4d 100644
--- a/components/identifiers.js
+++ b/components/identifiers.js
@@ -14,4 +14,5 @@ export const LIST = 'RTList';
 export const NAVIGATION = 'RTNavigation';
 export const OVERLAY = 'RTOverlay';
 export const PROGRESS_BAR = 'RTProgressBar';
+export const RADIO = 'RTRadio';
 export const RIPPLE = 'RTRipple';
diff --git a/components/radio/Radio.js b/components/radio/Radio.js
index 4dcdcde09..d2a330008 100644
--- a/components/radio/Radio.js
+++ b/components/radio/Radio.js
@@ -1,30 +1,27 @@
 import React, { PropTypes } from 'react';
-import { themr } from 'react-css-themr';
-import Ripple from '../ripple';
 
-const Radio = ({checked, onMouseDown, theme, ...other}) => (
-  <div
-    data-react-toolbox='radio'
-    className={theme[checked ? 'radioChecked' : 'radio']}
-    onMouseDown={onMouseDown}
-    {...other}
-  />
-);
+const factory = (ripple) => {
+  const Radio = ({checked, onMouseDown, theme, ...other}) => (
+    <div
+      data-react-toolbox='radio'
+      className={theme[checked ? 'radioChecked' : 'radio']}
+      onMouseDown={onMouseDown}
+      {...other}
+    />
+  );
 
-Radio.propTypes = {
-  checked: PropTypes.bool,
-  children: PropTypes.any,
-  onMouseDown: PropTypes.func,
-  theme: PropTypes.shape({
-    radio: PropTypes.string.isRequired,
-    radioChecked: PropTypes.string.isRequired,
-    ripple: PropTypes.string.isRequired
-  })
+  Radio.propTypes = {
+    checked: PropTypes.bool,
+    children: PropTypes.any,
+    onMouseDown: PropTypes.func,
+    theme: PropTypes.shape({
+      radio: PropTypes.string.isRequired,
+      radioChecked: PropTypes.string.isRequired,
+      ripple: PropTypes.string.isRequired
+    })
+  };
+
+  return ripple(Radio);
 };
 
-const RawRadio = themr('ToolboxRadio')(Radio);
-export default themr('ToolboxRadio')(Ripple({
-  spread: 2.6,
-  centered: true
-})(Radio));
-export {RawRadio as RawRadio};
+export default factory;
diff --git a/components/radio/RadioButton.js b/components/radio/RadioButton.js
index 09c1dfa5a..62c240aa2 100644
--- a/components/radio/RadioButton.js
+++ b/components/radio/RadioButton.js
@@ -1,65 +1,75 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
-import Radio from './Radio';
+import { RADIO } from '../identifiers.js';
+import rippleFactory from '../ripple/Ripple.js';
+import radioFactory from './Radio.js';
 
-class RadioButton extends React.Component {
-  static propTypes = {
-    checked: React.PropTypes.bool,
-    className: React.PropTypes.string,
-    disabled: React.PropTypes.bool,
-    label: React.PropTypes.string,
-    name: React.PropTypes.string,
-    onBlur: React.PropTypes.func,
-    onChange: React.PropTypes.func,
-    onFocus: React.PropTypes.func,
-    theme: React.PropTypes.shape({
-      disabled: React.PropTypes.string.isRequired,
-      field: React.PropTypes.string.isRequired,
-      input: React.PropTypes.string.isRequired,
-      text: React.PropTypes.string.isRequired
-    }),
-    value: React.PropTypes.any
-  };
+const factory = (Radio) => {
+  class RadioButton extends Component {
+    static propTypes = {
+      checked: PropTypes.bool,
+      className: PropTypes.string,
+      disabled: PropTypes.bool,
+      label: PropTypes.string,
+      name: PropTypes.string,
+      onBlur: PropTypes.func,
+      onChange: PropTypes.func,
+      onFocus: PropTypes.func,
+      theme: PropTypes.shape({
+        disabled: PropTypes.string.isRequired,
+        field: PropTypes.string.isRequired,
+        input: PropTypes.string.isRequired,
+        text: PropTypes.string.isRequired
+      }),
+      value: PropTypes.any
+    };
 
-  static defaultProps = {
-    checked: false,
-    className: '',
-    disabled: false
-  };
+    static defaultProps = {
+      checked: false,
+      className: '',
+      disabled: false
+    };
 
-  handleClick = (event) => {
-    const {checked, disabled, onChange} = this.props;
-    if (event.pageX !== 0 && event.pageY !== 0) this.blur();
-    if (!disabled && !checked && onChange) onChange(event, this);
-  };
+    handleClick = (event) => {
+      const {checked, disabled, onChange} = this.props;
+      if (event.pageX !== 0 && event.pageY !== 0) this.blur();
+      if (!disabled && !checked && onChange) onChange(event, this);
+    };
 
-  blur () {
-    this.refs.input.blur();
-  }
+    blur () {
+      this.refs.input.blur();
+    }
 
-  focus () {
-    this.refs.input.focus();
-  }
+    focus () {
+      this.refs.input.focus();
+    }
 
-  render () {
-    const { className, checked, disabled, label, theme, onChange, ...others } = this.props;  // eslint-disable-line
-    const _className = classnames(theme[this.props.disabled ? 'disabled' : 'field'], className);
-    return (
-      <label data-react-toolbox='radio-button' className={_className}>
-        <input
-          {...others}
-          className={theme.input}
-          onClick={this.handleClick}
-          readOnly
-          ref='input'
-          type='radio'
-        />
-        <Radio checked={checked} disabled={disabled}/>
-        {label ? <span className={theme.text}>{label}</span> : null}
-      </label>
-    );
+    render () {
+      const { className, checked, disabled, label, theme, onChange, ...others } = this.props;  // eslint-disable-line
+      const _className = classnames(theme[this.props.disabled ? 'disabled' : 'field'], className);
+      return (
+        <label data-react-toolbox='radio-button' className={_className}>
+          <input
+            {...others}
+            className={theme.input}
+            onClick={this.handleClick}
+            readOnly
+            ref='input'
+            type='radio'
+          />
+        <Radio checked={checked} disabled={disabled} theme={theme} />
+          {label ? <span className={theme.text}>{label}</span> : null}
+        </label>
+      );
+    }
   }
-}
 
-export default themr('ToolboxRadio')(RadioButton);
+  return RadioButton;
+};
+
+const Radio = radioFactory(rippleFactory({ centered: true, spread: 2.6 }));
+const RadioButton = factory(Radio);
+export default themr(RADIO)(RadioButton);
+export { factory as radioButtonFactory };
+export { RadioButton };
diff --git a/components/radio/RadioGroup.js b/components/radio/RadioGroup.js
index 48dee7c3f..fa86ebcb1 100644
--- a/components/radio/RadioGroup.js
+++ b/components/radio/RadioGroup.js
@@ -1,48 +1,57 @@
-import React from 'react';
-import RadioButton from './RadioButton';
+import React, { Component, PropTypes } from 'react';
+import { themr } from 'react-css-themr';
+import { RADIO } from '../identifiers.js';
+import InjectRadioButton from './RadioButton.js';
 
-class RadioGroup extends React.Component {
-  static propTypes = {
-    children: React.PropTypes.node,
-    className: React.PropTypes.string,
-    disabled: React.PropTypes.bool,
-    name: React.PropTypes.string,
-    onChange: React.PropTypes.func,
-    value: React.PropTypes.any
-  };
+const factory = (RadioButton) => {
+  class RadioGroup extends Component {
+    static propTypes = {
+      children: PropTypes.node,
+      className: PropTypes.string,
+      disabled: PropTypes.bool,
+      name: PropTypes.string,
+      onChange: PropTypes.func,
+      value: PropTypes.any
+    };
 
-  static defaultProps = {
-    className: '',
-    disabled: false
-  };
+    static defaultProps = {
+      className: '',
+      disabled: false
+    };
 
-  handleChange = (value) => {
-    if (this.props.onChange) this.props.onChange(value);
-  };
+    handleChange = (value) => {
+      if (this.props.onChange) this.props.onChange(value);
+    };
 
-  renderRadioButtons () {
-    return React.Children.map(this.props.children, (radio, idx) => {
+    renderRadioButtons () {
+      return React.Children.map(this.props.children, (radio, idx) => {
+        return (
+          <RadioButton
+            {...radio.props}
+            checked={radio.props.value === this.props.value}
+            disabled={this.props.disabled || radio.props.disabled}
+            key={idx}
+            label={radio.props.label}
+            onChange={this.handleChange.bind(this, radio.props.value)}
+            value={radio.props.value}
+          />
+        );
+      });
+    }
+
+    render () {
       return (
-        <RadioButton
-          {...radio.props}
-          checked={radio.props.value === this.props.value}
-          disabled={this.props.disabled || radio.props.disabled}
-          key={idx}
-          label={radio.props.label}
-          onChange={this.handleChange.bind(this, radio.props.value)}
-          value={radio.props.value}
-        />
+        <div data-react-toolbox='radio-group' className={this.props.className}>
+          {this.renderRadioButtons()}
+        </div>
       );
-    });
+    }
   }
 
-  render () {
-    return (
-      <div data-react-toolbox='radio-group' className={this.props.className}>
-        {this.renderRadioButtons()}
-      </div>
-    );
-  }
-}
+  return RadioGroup;
+};
 
-export default RadioGroup;
+const RadioGroup = factory(InjectRadioButton);
+export default themr(RADIO)(RadioGroup);
+export { factory as radioGroupFactory };
+export { RadioGroup };
diff --git a/components/radio/index.js b/components/radio/index.js
index bd8f8fcc8..b4d8aad12 100644
--- a/components/radio/index.js
+++ b/components/radio/index.js
@@ -1,2 +1,14 @@
-export RadioButton from './RadioButton';
-export RadioGroup from './RadioGroup';
+import { themr } from 'react-css-themr';
+import { RADIO } from '../identifiers.js';
+import themedRippleFactory from '../ripple';
+import radioFactory from './Radio.js';
+import { radioButtonFactory } from './RadioButton.js';
+import { radioGroupFactory } from './RadioGroup.js';
+import theme from './theme.scss';
+
+const ThemedRadio = radioFactory(themedRippleFactory({ centered: true, spread: 2.6}));
+const ThemedRadioButton = themr(RADIO, theme)(radioButtonFactory(ThemedRadio));
+const ThemedRadioGroup = themr(RADIO, theme)(radioGroupFactory(ThemedRadioButton));
+
+export { ThemedRadioButton as RadioButton };
+export { ThemedRadioGroup as RadioGroup };
diff --git a/spec/theme.js b/spec/theme.js
index d558c1a09..4e8e7765d 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -1,7 +1,5 @@
 import '../components/commons.scss';
 
-import ToolboxProgress from '../components/progress_bar/theme.scss';
-import ToolboxRadio from '../components/radio/theme.scss';
 import ToolboxSlider from '../components/slider/theme.scss';
 import ToolboxSnackbar from '../components/snackbar/theme.scss';
 import ToolboxSwitch from '../components/switch/theme.scss';
@@ -11,8 +9,6 @@ import ToolboxTimePicker from '../components/time_picker/theme.scss';
 import ToolboxTooltip from '../components/tooltip/theme.scss';
 
 export default {
-  ToolboxProgress,
-  ToolboxRadio,
   ToolboxSlider,
   ToolboxSnackbar,
   ToolboxSwitch,

From d810c81f6679aa6afc14f40456e616c2ac933e09 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 29 May 2016 23:57:34 +0200
Subject: [PATCH 0600/1024] Autoinject theme to Slider

---
 components/identifiers.js   |  1 +
 components/slider/Slider.js | 60 +++++++++++++++++++------------------
 components/slider/index.js  | 11 ++++++-
 components/slider/readme.md |  7 ++---
 spec/theme.js               |  2 --
 5 files changed, 45 insertions(+), 36 deletions(-)

diff --git a/components/identifiers.js b/components/identifiers.js
index 2d3ec2f4d..a6339d5cb 100644
--- a/components/identifiers.js
+++ b/components/identifiers.js
@@ -16,3 +16,4 @@ export const OVERLAY = 'RTOverlay';
 export const PROGRESS_BAR = 'RTProgressBar';
 export const RADIO = 'RTRadio';
 export const RIPPLE = 'RTRipple';
+export const SLIDER = 'RTSlider';
diff --git a/components/slider/Slider.js b/components/slider/Slider.js
index 3fd7e7996..2089a8854 100644
--- a/components/slider/Slider.js
+++ b/components/slider/Slider.js
@@ -1,40 +1,41 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
-import events from '../utils/events';
-import prefixer from '../utils/prefixer';
-import utils from '../utils/utils';
+import { SLIDER } from '../identifiers.js';
+import events from '../utils/events.js';
+import prefixer from '../utils/prefixer.js';
+import utils from '../utils/utils.js';
 import InjectProgressBar from '../progress_bar/ProgressBar.js';
 import InjectInput from '../input/Input.js';
 
 const factory = (ProgressBar, Input) => {
-  class Slider extends React.Component {
+  class Slider extends Component {
     static propTypes = {
-      className: React.PropTypes.string,
-      editable: React.PropTypes.bool,
-      max: React.PropTypes.number,
-      min: React.PropTypes.number,
-      onChange: React.PropTypes.func,
-      pinned: React.PropTypes.bool,
-      snaps: React.PropTypes.bool,
-      step: React.PropTypes.number,
-      theme: React.PropTypes.shape({
-        container: React.PropTypes.string,
-        editable: React.PropTypes.string,
-        innerknob: React.PropTypes.string,
-        innerprogress: React.PropTypes.string,
-        input: React.PropTypes.string,
-        knob: React.PropTypes.string,
-        pinned: React.PropTypes.string,
-        pressed: React.PropTypes.string,
-        progress: React.PropTypes.string,
-        ring: React.PropTypes.string,
-        slider: React.PropTypes.string,
-        snap: React.PropTypes.string,
-        snaps: React.PropTypes.string
+      className: PropTypes.string,
+      editable: PropTypes.bool,
+      max: PropTypes.number,
+      min: PropTypes.number,
+      onChange: PropTypes.func,
+      pinned: PropTypes.bool,
+      snaps: PropTypes.bool,
+      step: PropTypes.number,
+      theme: PropTypes.shape({
+        container: PropTypes.string,
+        editable: PropTypes.string,
+        innerknob: PropTypes.string,
+        innerprogress: PropTypes.string,
+        input: PropTypes.string,
+        knob: PropTypes.string,
+        pinned: PropTypes.string,
+        pressed: PropTypes.string,
+        progress: PropTypes.string,
+        ring: PropTypes.string,
+        slider: PropTypes.string,
+        snap: PropTypes.string,
+        snaps: PropTypes.string
       }),
-      value: React.PropTypes.number
+      value: PropTypes.number
     };
 
     static defaultProps = {
@@ -302,5 +303,6 @@ const factory = (ProgressBar, Input) => {
 };
 
 const Slider = factory(InjectProgressBar, InjectInput);
-export default themr('ToolboxSlider')(Slider);
+export default themr(SLIDER)(Slider);
+export { factory as sliderFactory };
 export { Slider };
diff --git a/components/slider/index.js b/components/slider/index.js
index 12b099f9b..629a34570 100644
--- a/components/slider/index.js
+++ b/components/slider/index.js
@@ -1 +1,10 @@
-export default from './Slider';
+import { themr } from 'react-css-themr';
+import { SLIDER } from '../identifiers.js';
+import { ProgressBar } from '../progress_bar';
+import { Input} from '../input';
+import { sliderFactory } from './Slider.js';
+import theme from './theme.scss';
+
+const ThemedSlider = themr(SLIDER, theme)(sliderFactory(ProgressBar, Input));
+export default ThemedSlider;
+export { ThemedSlider as Slider };
diff --git a/components/slider/readme.md b/components/slider/readme.md
index 70cd597ef..4d46429ba 100644
--- a/components/slider/readme.md
+++ b/components/slider/readme.md
@@ -2,12 +2,9 @@
 
 [Sliders](https://www.google.com/design/spec/components/sliders.html#) let users select a value from a continuous or discrete range of values by moving the slider thumb. The smallest value is to the left, the largest to the right. Sliders can have icons to the left and right of the bar that reflect the value intensity. The interactive nature of the slider makes it a great choice for settings that reflect intensity levels, such as volume, brightness, or color saturation.
 
-This component can be styled providing a theme with the key `ToolboxSlider` through the theme provider.
-
 <!-- example -->
 ```jsx
 import Slider from 'react-toolbox/lib/slider';
-// Remember to add styles using the key ToolboxSlider
 
 class SliderTest extends React.Component {
   state = {
@@ -36,6 +33,8 @@ class SliderTest extends React.Component {
 }
 ```
 
+This component can be styled by context providing a theme with the key `RTSlider` through the theme provider.
+
 ## Properties
 
 | Name          | Type          | Default   | Description|
@@ -50,7 +49,7 @@ class SliderTest extends React.Component {
 | `step`        | `Number`      | `0.01`    | Amount to vary the value when the knob is moved or increase/decrease is called.|
 | `value`       | `Number`      | `0`       | Current value of the slider.|
 
-## Theming
+## Theme
 
 | Name     | Description|
 |:---------|:-----------|
diff --git a/spec/theme.js b/spec/theme.js
index 4e8e7765d..5970a9a1c 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -1,6 +1,5 @@
 import '../components/commons.scss';
 
-import ToolboxSlider from '../components/slider/theme.scss';
 import ToolboxSnackbar from '../components/snackbar/theme.scss';
 import ToolboxSwitch from '../components/switch/theme.scss';
 import ToolboxTable from '../components/table/theme.scss';
@@ -9,7 +8,6 @@ import ToolboxTimePicker from '../components/time_picker/theme.scss';
 import ToolboxTooltip from '../components/tooltip/theme.scss';
 
 export default {
-  ToolboxSlider,
   ToolboxSnackbar,
   ToolboxSwitch,
   ToolboxTable,

From 863c8214002263114b56d78327086cc10336a788 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 30 May 2016 06:59:44 +0200
Subject: [PATCH 0601/1024] Autoinject theme for Switch, Table and Snackbar

---
 components/identifiers.js       |   3 +
 components/snackbar/Snackbar.js | 116 ++++++++++---------
 components/snackbar/index.js    |  12 +-
 components/snackbar/readme.md   |   6 +-
 components/switch/Switch.js     | 133 ++++++++++++----------
 components/switch/Thumb.js      |  26 +++--
 components/switch/index.js      |  15 ++-
 components/switch/readme.md     |   7 +-
 components/table/Table.js       | 194 +++++++++++++++++---------------
 components/table/TableHead.js   |  83 +++++++-------
 components/table/TableRow.js    | 151 +++++++++++++------------
 components/table/index.js       |  16 ++-
 components/table/readme.md      |   6 +-
 spec/theme.js                   |   6 -
 14 files changed, 423 insertions(+), 351 deletions(-)

diff --git a/components/identifiers.js b/components/identifiers.js
index a6339d5cb..c71bba92d 100644
--- a/components/identifiers.js
+++ b/components/identifiers.js
@@ -17,3 +17,6 @@ export const PROGRESS_BAR = 'RTProgressBar';
 export const RADIO = 'RTRadio';
 export const RIPPLE = 'RTRipple';
 export const SLIDER = 'RTSlider';
+export const SNACKBAR = 'RTSnackbar';
+export const SWITCH = 'RTSwitch';
+export const TABLE = 'RTTable';
diff --git a/components/snackbar/Snackbar.js b/components/snackbar/Snackbar.js
index cd78528c0..cca168678 100644
--- a/components/snackbar/Snackbar.js
+++ b/components/snackbar/Snackbar.js
@@ -1,63 +1,71 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
-import ActivableRenderer from '../hoc/ActivableRenderer';
-import Button from '../button';
-import FontIcon from '../font_icon';
-import Overlay from '../overlay';
+import { SNACKBAR } from '../identifiers.js';
+import ActivableRenderer from '../hoc/ActivableRenderer.js';
+import FontIcon from '../font_icon/FontIcon.js';
+import InjectOverlay from '../overlay/Overlay.js';
+import InjectButton from '../button/Button.js';
 
-class Snackbar extends React.Component {
-  static propTypes = {
-    action: React.PropTypes.string,
-    active: React.PropTypes.bool,
-    className: React.PropTypes.string,
-    icon: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.element
-    ]),
-    label: React.PropTypes.string.isRequired,
-    onClick: React.PropTypes.func,
-    onTimeout: React.PropTypes.func,
-    theme: React.PropTypes.shape({
-      accept: React.PropTypes.string,
-      active: React.PropTypes.string,
-      button: React.PropTypes.string,
-      cancel: React.PropTypes.string,
-      icon: React.PropTypes.string,
-      label: React.PropTypes.string,
-      snackbar: React.PropTypes.string,
-      warning: React.PropTypes.string
-    }),
-    timeout: React.PropTypes.number,
-    type: React.PropTypes.oneOf([ 'accept', 'cancel', 'warning' ])
-  };
+const factory = (Overlay, Button) => {
+  class Snackbar extends Component {
+    static propTypes = {
+      action: PropTypes.string,
+      active: PropTypes.bool,
+      className: PropTypes.string,
+      icon: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.element
+      ]),
+      label: PropTypes.string.isRequired,
+      onClick: PropTypes.func,
+      onTimeout: PropTypes.func,
+      theme: PropTypes.shape({
+        accept: PropTypes.string,
+        active: PropTypes.string,
+        button: PropTypes.string,
+        cancel: PropTypes.string,
+        icon: PropTypes.string,
+        label: PropTypes.string,
+        snackbar: PropTypes.string,
+        warning: PropTypes.string
+      }),
+      timeout: PropTypes.number,
+      type: PropTypes.oneOf([ 'accept', 'cancel', 'warning' ])
+    };
 
-  componentWillReceiveProps (nextProps) {
-    if (nextProps.active && nextProps.timeout) {
-      if (this.curTimeout) clearTimeout(this.curTimeout);
-      this.curTimeout = setTimeout(() => {
-        nextProps.onTimeout();
-        this.curTimeout = null;
-      }, nextProps.timeout);
+    componentWillReceiveProps (nextProps) {
+      if (nextProps.active && nextProps.timeout) {
+        if (this.curTimeout) clearTimeout(this.curTimeout);
+        this.curTimeout = setTimeout(() => {
+          nextProps.onTimeout();
+          this.curTimeout = null;
+        }, nextProps.timeout);
+      }
     }
-  }
 
-  render () {
-    const {action, active, icon, label, onClick, theme, type } = this.props;
-    const className = classnames([theme.snackbar, theme[type]], {
-      [theme.active]: active
-    }, this.props.className);
+    render () {
+      const {action, active, icon, label, onClick, theme, type } = this.props;
+      const className = classnames([theme.snackbar, theme[type]], {
+        [theme.active]: active
+      }, this.props.className);
 
-    return (
-      <Overlay invisible>
-        <div data-react-toolbox='snackbar' className={className}>
-          {icon ? <FontIcon value={icon} className={theme.icon} /> : null}
-          <span className={theme.label}>{label}</span>
-          {action ? <Button className={theme.button} label={action} onClick={onClick}/> : null}
-        </div>
-      </Overlay>
-    );
+      return (
+        <Overlay invisible>
+          <div data-react-toolbox='snackbar' className={className}>
+            {icon ? <FontIcon value={icon} className={theme.icon} /> : null}
+            <span className={theme.label}>{label}</span>
+            {action ? <Button className={theme.button} label={action} onClick={onClick}/> : null}
+          </div>
+        </Overlay>
+      );
+    }
   }
-}
 
-export default themr('ToolboxSnackbar')(ActivableRenderer()(Snackbar));
+  return ActivableRenderer()(Snackbar);
+};
+
+const Snackbar = factory(InjectOverlay, InjectButton);
+export default themr(SNACKBAR)(Snackbar);
+export { factory as snackbarFactory };
+export { Snackbar };
diff --git a/components/snackbar/index.js b/components/snackbar/index.js
index 43bbf46da..5825088c3 100644
--- a/components/snackbar/index.js
+++ b/components/snackbar/index.js
@@ -1 +1,11 @@
-export default from './Snackbar';
+import { themr } from 'react-css-themr';
+import { SNACKBAR } from '../identifiers.js';
+import { snackbarFactory } from './Snackbar.js';
+import { Overlay } from '../overlay';
+import { Button } from '../button';
+import theme from './theme.scss';
+
+const ThemedSnackbar = themr(SNACKBAR, theme)(snackbarFactory(Overlay, Button));
+
+export default ThemedSnackbar;
+export { ThemedSnackbar as Snackbar };
diff --git a/components/snackbar/readme.md b/components/snackbar/readme.md
index 720b9d3be..1985194e0 100644
--- a/components/snackbar/readme.md
+++ b/components/snackbar/readme.md
@@ -2,8 +2,6 @@
 
 Snackbars provide lightweight feedback about an operation by showing a brief message at the bottom of the screen. Snackbars can contain an action.
 
-This component is themeable under the key `ToolboxSnackbar`. You can check the configuration variables directly in Github.
-
 <!-- example -->
 ```jsx
 import { Button, Snackbar } from 'react-toolbox';
@@ -35,6 +33,8 @@ class SnackbarTest extends React.Component {
 }
 ```
 
+This component can be styled by context providing a theme with the key `RTSnackbar` through the theme provider.
+
 ## Properties
 
 | Name          | Type                    | Default       | Description|
@@ -49,7 +49,7 @@ class SnackbarTest extends React.Component {
 | `timeout`     | `Number`                |               | Amount of time in milliseconds after the Snackbar will be automatically hidden.|
 | `type`        | `String`                |               | Indicates the action type. Can be `accept`, `warning` or `cancel`|
 
-## Theming
+## Theme
 
 | Name     | Description|
 |:---------|:-----------|
diff --git a/components/switch/Switch.js b/components/switch/Switch.js
index b88680249..32f1a090b 100644
--- a/components/switch/Switch.js
+++ b/components/switch/Switch.js
@@ -1,72 +1,83 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
-import Thumb from './Thumb';
+import { SWITCH } from '../identifiers.js';
+import rippleFactory from '../ripple/Ripple.js';
+import thumbFactory from './Thumb.js';
 
-class Switch extends React.Component {
-  static propTypes = {
-    checked: React.PropTypes.bool,
-    className: React.PropTypes.string,
-    disabled: React.PropTypes.bool,
-    label: React.PropTypes.string,
-    name: React.PropTypes.string,
-    onBlur: React.PropTypes.func,
-    onChange: React.PropTypes.func,
-    onFocus: React.PropTypes.func,
-    theme: React.PropTypes.shape({
-      disabled: React.PropTypes.string,
-      field: React.PropTypes.string,
-      input: React.PropTypes.string,
-      off: React.PropTypes.string,
-      on: React.PropTypes.string,
-      ripple: React.PropTypes.string,
-      text: React.PropTypes.string,
-      thumb: React.PropTypes.string
-    })
-  };
+const factory = (Thumb) => {
+  class Switch extends Component {
+    static propTypes = {
+      checked: PropTypes.bool,
+      className: PropTypes.string,
+      disabled: PropTypes.bool,
+      label: PropTypes.string,
+      name: PropTypes.string,
+      onBlur: PropTypes.func,
+      onChange: PropTypes.func,
+      onFocus: PropTypes.func,
+      theme: PropTypes.shape({
+        disabled: PropTypes.string,
+        field: PropTypes.string,
+        input: PropTypes.string,
+        off: PropTypes.string,
+        on: PropTypes.string,
+        ripple: PropTypes.string,
+        text: PropTypes.string,
+        thumb: PropTypes.string
+      })
+    };
 
-  static defaultProps = {
-    checked: false,
-    className: '',
-    disabled: false
-  };
+    static defaultProps = {
+      checked: false,
+      className: '',
+      disabled: false
+    };
 
-  handleToggle = (event) => {
-    if (event.pageX !== 0 && event.pageY !== 0) this.blur();
-    if (!this.props.disabled && this.props.onChange) {
-      this.props.onChange(!this.props.checked, event);
+    handleToggle = (event) => {
+      if (event.pageX !== 0 && event.pageY !== 0) this.blur();
+      if (!this.props.disabled && this.props.onChange) {
+        this.props.onChange(!this.props.checked, event);
+      }
+    };
+
+    blur () {
+      this.refs.input.blur();
     }
-  };
 
-  blur () {
-    this.refs.input.blur();
-  }
+    focus () {
+      this.refs.input.focus();
+    }
 
-  focus () {
-    this.refs.input.focus();
+    render () {
+      const { className, checked, disabled, onChange, theme, ...others } = this.props; //eslint-disable-line no-unused-vars
+      const _className = classnames(theme[disabled ? 'disabled' : 'field'], className);
+      return (
+        <label data-react-toolbox='switch' className={_className}>
+          <input
+            {...others}
+            checked={this.props.checked}
+            className={theme.input}
+            onClick={this.handleToggle}
+            readOnly
+            ref='input'
+            type='checkbox'
+          />
+          <span className={theme[checked ? 'on' : 'off']}>
+            <Thumb disabled={this.props.disabled} theme={theme} />
+          </span>
+          {this.props.label ? <span className={theme.text}>{this.props.label}</span> : null}
+        </label>
+      );
+    }
   }
 
-  render () {
-    const { className, checked, disabled, onChange, theme, ...others } = this.props; //eslint-disable-line no-unused-vars
-    const _className = classnames(theme[disabled ? 'disabled' : 'field'], className);
-    return (
-      <label data-react-toolbox='switch' className={_className}>
-        <input
-          {...others}
-          checked={this.props.checked}
-          className={theme.input}
-          onClick={this.handleToggle}
-          readOnly
-          ref='input'
-          type='checkbox'
-        />
-        <span className={theme[checked ? 'on' : 'off']}>
-          <Thumb disabled={this.props.disabled} theme={theme} />
-        </span>
-        {this.props.label ? <span className={theme.text}>{this.props.label}</span> : null}
-      </label>
-    );
-  }
-}
+  return Switch;
+};
+
+const Thumb = thumbFactory(rippleFactory({ centered: true, spread: 2.6 }));
+const Switch = factory(Thumb);
 
-export default themr('ToolboxSwitch')(Switch);
+export default themr(SWITCH)(Switch);
+export { factory as switchFactory };
+export { Switch };
diff --git a/components/switch/Thumb.js b/components/switch/Thumb.js
index c1725eaf4..f9694cd9b 100644
--- a/components/switch/Thumb.js
+++ b/components/switch/Thumb.js
@@ -1,17 +1,19 @@
 import React, { PropTypes } from 'react';
-import Ripple from '../ripple';
 
-const Thumb = ({onMouseDown, theme, ...other}) => (
-  <span role='thumb' className={theme.thumb} onMouseDown={onMouseDown} {...other} />
-);
+const factory = (ripple) => {
+  const Thumb = ({onMouseDown, theme, ...other}) => (
+    <span role='thumb' className={theme.thumb} onMouseDown={onMouseDown} {...other} />
+  );
 
-Thumb.propTypes = {
-  children: PropTypes.any,
-  theme: PropTypes.shape({
-    ripple: PropTypes.string,
-    thumb: PropTypes.string
-  })
+  Thumb.propTypes = {
+    children: PropTypes.any,
+    theme: PropTypes.shape({
+      ripple: PropTypes.string,
+      thumb: PropTypes.string
+    })
+  };
+
+  return ripple(Thumb);
 };
 
-export default Ripple({spread: 2.6, centered: true})(Thumb);
-export {Thumb as RawThumb};
+export default factory;
diff --git a/components/switch/index.js b/components/switch/index.js
index bc6c05d20..28c3ec386 100644
--- a/components/switch/index.js
+++ b/components/switch/index.js
@@ -1 +1,14 @@
-export default from './Switch';
+import { themr } from 'react-css-themr';
+import { switchFactory } from './Switch.js';
+import { SWITCH } from '../identifiers.js';
+import thumbFactory from './Thumb.js';
+import themedRippleFactory from '../ripple';
+import theme from './theme.scss';
+
+const applyTheme = (Component) => themr(SWITCH, theme)(Component);
+const ripple = themedRippleFactory({ centered: true, spread: 2.6 });
+const ThemedThumb = applyTheme(thumbFactory(ripple));
+const ThemedSwitch = applyTheme(switchFactory(ThemedThumb));
+
+export default ThemedSwitch;
+export { ThemedSwitch as Switch };
diff --git a/components/switch/readme.md b/components/switch/readme.md
index 49796ef34..41d814147 100644
--- a/components/switch/readme.md
+++ b/components/switch/readme.md
@@ -2,12 +2,9 @@
 
 On/off switches toggle the state of a single settings option. The option that the switch controls, as well as the state it’s in, should be made clear from the corresponding inline label. Switches take on the same visual properties of the radio button.
 
-The theming key for this component is `ToolboxSwitch`.
-
 <!-- example -->
 ```jsx
 import Switch from 'react-toolbox/lib/switch';
-// Remember to provide a theme using ThemeProvider
 
 class SwitchTest extends React.Component {
   state = {
@@ -45,6 +42,8 @@ class SwitchTest extends React.Component {
 }
 ```
 
+This component can be styled by context providing a theme with the key `RTSwitch` through the theme provider.
+
 ## Properties
 
 | Name              | Type          | Default       | Description|
@@ -58,7 +57,7 @@ class SwitchTest extends React.Component {
 | `onChange`     | `Function`       |               | Callback function that is fired when the component's value changes.|
 | `onFocus`      | `Function`       |               | Callback function that is fired when the switch is focused.|
 
-## Theming
+## Theme
 
 | Name     | Description|
 |:---------|:-----------|
diff --git a/components/table/Table.js b/components/table/Table.js
index 8a872008e..3a7979d07 100644
--- a/components/table/Table.js
+++ b/components/table/Table.js
@@ -1,109 +1,121 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
-import TableHead from './TableHead';
-import TableRow from './TableRow';
+import { TABLE } from '../identifiers.js';
+import InjectCheckbox from '../checkbox/Checkbox.js';
+import tableHeadFactory from './TableHead.js';
+import tableRowFactory from './TableRow.js';
 
-class Table extends React.Component {
-  static propTypes = {
-    className: React.PropTypes.string,
-    heading: React.PropTypes.bool,
-    model: React.PropTypes.object,
-    multiSelectable: React.PropTypes.bool,
-    onChange: React.PropTypes.func,
-    onSelect: React.PropTypes.func,
-    selectable: React.PropTypes.bool,
-    selected: React.PropTypes.array,
-    source: React.PropTypes.array,
-    theme: React.PropTypes.shape({
-      table: React.PropTypes.string
-    })
-  };
+const factory = (TableHead, TableRow) => {
+  class Table extends Component {
+    static propTypes = {
+      className: PropTypes.string,
+      heading: PropTypes.bool,
+      model: PropTypes.object,
+      multiSelectable: PropTypes.bool,
+      onChange: PropTypes.func,
+      onSelect: PropTypes.func,
+      selectable: PropTypes.bool,
+      selected: PropTypes.array,
+      source: PropTypes.array,
+      theme: PropTypes.shape({
+        table: PropTypes.string
+      })
+    };
 
-  static defaultProps = {
-    className: '',
-    heading: true,
-    selectable: true,
-    multiSelectable: true,
-    selected: [],
-    source: []
-  };
+    static defaultProps = {
+      className: '',
+      heading: true,
+      selectable: true,
+      multiSelectable: true,
+      selected: [],
+      source: []
+    };
 
-  handleFullSelect = () => {
-    if (this.props.onSelect) {
-      const {source, selected} = this.props;
-      const newSelected = source.length === selected.length ? [] : source.map((i, idx) => idx);
-      this.props.onSelect(newSelected);
-    }
-  };
+    handleFullSelect = () => {
+      if (this.props.onSelect) {
+        const {source, selected} = this.props;
+        const newSelected = source.length === selected.length ? [] : source.map((i, idx) => idx);
+        this.props.onSelect(newSelected);
+      }
+    };
+
+    handleRowSelect = (index) => {
+      if (this.props.onSelect) {
+        const position = this.props.selected.indexOf(index);
+        let newSelected = [...this.props.selected];
+        if (position !== -1) { newSelected.splice(position, 1); }
+        if (position !== -1 && this.props.multiSelectable) {
+          newSelected.push(index);
+        } else {
+          newSelected = [index];
+        }
+        this.props.onSelect(newSelected);
+      }
+    };
 
-  handleRowSelect = (index) => {
-    if (this.props.onSelect) {
-      const position = this.props.selected.indexOf(index);
-      let newSelected = [...this.props.selected];
-      if (position !== -1) { newSelected.splice(position, 1); }
-      if (position !== -1 && this.props.multiSelectable) {
-        newSelected.push(index);
-      } else {
-        newSelected = [index];
+    handleRowChange = (index, key, value) => {
+      if (this.props.onChange) {
+        this.props.onChange(index, key, value);
+      }
+    };
+
+    renderHead () {
+      if (this.props.heading) {
+        const {model, selected, source, selectable, multiSelectable} = this.props;
+        const isSelected = selected.length === source.length;
+        return (
+          <TableHead
+            model={model}
+            onSelect={this.handleFullSelect}
+            selectable={selectable}
+            multiSelectable={multiSelectable}
+            selected={isSelected}
+            theme={this.props.theme}
+          />
+        );
       }
-      this.props.onSelect(newSelected);
     }
-  };
 
-  handleRowChange = (index, key, value) => {
-    if (this.props.onChange) {
-      this.props.onChange(index, key, value);
+    renderBody () {
+      const { source, model, onChange, selectable, selected, theme } = this.props;
+      return (
+        <tbody>
+          {source.map((data, index) => (
+            <TableRow
+              data={data}
+              index={index}
+              key={index}
+              model={model}
+              onChange={onChange ? this.handleRowChange.bind(this) : undefined}
+              onSelect={this.handleRowSelect.bind(this, index)}
+              selectable={selectable}
+              selected={selected.indexOf(index) !== -1}
+              theme={theme}
+            />
+          ))}
+        </tbody>
+      );
     }
-  };
 
-  renderHead () {
-    if (this.props.heading) {
-      const {model, selected, source, selectable, multiSelectable} = this.props;
-      const isSelected = selected.length === source.length;
+    render () {
+      const { className, theme } = this.props;
       return (
-        <TableHead
-          model={model}
-          onSelect={this.handleFullSelect}
-          selectable={selectable}
-          multiSelectable={multiSelectable}
-          selected={isSelected}
-          theme={this.props.theme}
-        />
+        <table data-react-toolbox='table' className={classnames(theme.table, className)}>
+          {this.renderHead()}
+          {this.renderBody()}
+        </table>
       );
     }
   }
 
-  renderBody () {
-    const { source, model, onChange, selectable, selected, theme } = this.props;
-    return (
-      <tbody>
-        {source.map((data, index) => (
-          <TableRow
-            data={data}
-            index={index}
-            key={index}
-            model={model}
-            onChange={onChange ? this.handleRowChange.bind(this) : undefined}
-            onSelect={this.handleRowSelect.bind(this, index)}
-            selectable={selectable}
-            selected={selected.indexOf(index) !== -1}
-            theme={theme}
-          />
-        ))}
-      </tbody>
-    );
-  }
+  return Table;
+};
 
-  render () {
-    const { className, theme } = this.props;
-    return (
-      <table data-react-toolbox='table' className={classnames(theme.table, className)}>
-        {this.renderHead()}
-        {this.renderBody()}
-      </table>
-    );
-  }
-}
+const TableHead = tableHeadFactory(InjectCheckbox);
+const TableRow = tableRowFactory(InjectCheckbox);
+const Table = factory(TableHead, TableRow);
 
-export default themr('ToolboxTable')(Table);
+export default themr(TABLE)(Table);
+export { factory as tableFactory };
+export { Table };
diff --git a/components/table/TableHead.js b/components/table/TableHead.js
index c02e15822..57f39a640 100644
--- a/components/table/TableHead.js
+++ b/components/table/TableHead.js
@@ -1,47 +1,50 @@
-import React from 'react';
-import Checkbox from '../checkbox';
+import React, { PropTypes } from 'react';
 
-const TableHead = ({model, onSelect, selectable, multiSelectable, selected, theme}) => {
-  let selectCell;
-  const contentCells = Object.keys(model).map((key) => {
-    const name = model[key].title || key;
-    return <th key={key}>{name}</th>;
-  });
+const factory = (Checkbox) => {
+  const TableHead = ({model, onSelect, selectable, multiSelectable, selected, theme}) => {
+    let selectCell;
+    const contentCells = Object.keys(model).map((key) => {
+      const name = model[key].title || key;
+      return <th key={key}>{name}</th>;
+    });
 
-  if (selectable && multiSelectable) {
-    selectCell = (
-      <th key='select' className={theme.selectable}>
-        <Checkbox onChange={onSelect} checked={selected}/>
-      </th>
+    if (selectable && multiSelectable) {
+      selectCell = (
+        <th key='select' className={theme.selectable}>
+          <Checkbox onChange={onSelect} checked={selected}/>
+        </th>
+      );
+    } else if (selectable) {
+      selectCell = (
+        <th key='select' className={theme.selectable}></th>
+      );
+    }
+    return (
+      <thead>
+        <tr>{[selectCell, ...contentCells]}</tr>
+      </thead>
     );
-  } else if (selectable) {
-    selectCell = (
-      <th key='select' className={theme.selectable}></th>
-    );
-  }
-  return (
-    <thead>
-      <tr>{[selectCell, ...contentCells]}</tr>
-    </thead>
-  );
-};
+  };
 
-TableHead.propTypes = {
-  className: React.PropTypes.string,
-  model: React.PropTypes.object,
-  multiSelectable: React.PropTypes.bool,
-  onSelect: React.PropTypes.func,
-  selectable: React.PropTypes.bool,
-  selected: React.PropTypes.bool,
-  theme: React.PropTypes.shape({
-    selectable: React.PropTypes.string
-  })
-};
+  TableHead.propTypes = {
+    className: PropTypes.string,
+    model: PropTypes.object,
+    multiSelectable: PropTypes.bool,
+    onSelect: PropTypes.func,
+    selectable: PropTypes.bool,
+    selected: PropTypes.bool,
+    theme: PropTypes.shape({
+      selectable: PropTypes.string
+    })
+  };
+
+  TableHead.defaultProps = {
+    className: '',
+    model: {},
+    selected: false
+  };
 
-TableHead.defaultProps = {
-  className: '',
-  model: {},
-  selected: false
+  return TableHead;
 };
 
-export default TableHead;
+export default factory;
diff --git a/components/table/TableRow.js b/components/table/TableRow.js
index 33b02482e..00822dcc2 100644
--- a/components/table/TableRow.js
+++ b/components/table/TableRow.js
@@ -1,90 +1,93 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
-import Checkbox from '../checkbox';
 import utils from '../utils/utils';
 
-class TableRow extends React.Component {
-  static propTypes = {
-    data: React.PropTypes.object,
-    index: React.PropTypes.number,
-    model: React.PropTypes.object,
-    onChange: React.PropTypes.func,
-    onSelect: React.PropTypes.func,
-    selectable: React.PropTypes.bool,
-    selected: React.PropTypes.bool,
-    theme: React.PropTypes.shape({
-      editable: React.PropTypes.string,
-      row: React.PropTypes.string,
-      selectable: React.PropTypes.string,
-      selected: React.PropTypes.string
-    })
-  };
+const factory = (Checkbox) => {
+  class TableRow extends Component {
+    static propTypes = {
+      data: PropTypes.object,
+      index: PropTypes.number,
+      model: PropTypes.object,
+      onChange: PropTypes.func,
+      onSelect: PropTypes.func,
+      selectable: PropTypes.bool,
+      selected: PropTypes.bool,
+      theme: PropTypes.shape({
+        editable: PropTypes.string,
+        row: PropTypes.string,
+        selectable: PropTypes.string,
+        selected: PropTypes.string
+      })
+    };
 
-  handleInputChange = (index, key, type, event) => {
-    const value = type === 'checkbox' ? event.target.checked : event.target.value;
-    const onChange = this.props.model[key].onChange || this.props.onChange;
-    onChange(index, key, value);
-  };
+    handleInputChange = (index, key, type, event) => {
+      const value = type === 'checkbox' ? event.target.checked : event.target.value;
+      const onChange = this.props.model[key].onChange || this.props.onChange;
+      onChange(index, key, value);
+    };
 
-  renderSelectCell () {
-    if (this.props.selectable) {
-      return (
-        <td className={this.props.theme.selectable}>
-          <Checkbox checked={this.props.selected} onChange={this.props.onSelect} />
-        </td>
-      );
+    renderSelectCell () {
+      if (this.props.selectable) {
+        return (
+          <td className={this.props.theme.selectable}>
+            <Checkbox checked={this.props.selected} onChange={this.props.onSelect} />
+          </td>
+        );
+      }
     }
-  }
 
-  renderCells () {
-    return Object.keys(this.props.model).map((key) => {
-      return <td key={key}>{this.renderCell(key)}</td>;
-    });
-  }
+    renderCells () {
+      return Object.keys(this.props.model).map((key) => {
+        return <td key={key}>{this.renderCell(key)}</td>;
+      });
+    }
 
-  renderCell (key) {
-    const value = this.props.data[key];
+    renderCell (key) {
+      const value = this.props.data[key];
 
-    // if the value is a valid React element return it directly, since it
-    // cannot be edited and should not be converted to a string...
-    if (React.isValidElement(value)) { return value; }
+      // if the value is a valid React element return it directly, since it
+      // cannot be edited and should not be converted to a string...
+      if (React.isValidElement(value)) { return value; }
 
-    const onChange = this.props.model[key].onChange || this.props.onChange;
-    if (onChange) {
-      return this.renderInput(key, value);
-    } else if (value) {
-      return value.toString();
+      const onChange = this.props.model[key].onChange || this.props.onChange;
+      if (onChange) {
+        return this.renderInput(key, value);
+      } else if (value) {
+        return value.toString();
+      }
     }
-  }
 
-  renderInput (key, value) {
-    const index = this.props.index;
-    const inputType = utils.inputTypeForPrototype(this.props.model[key].type);
-    const inputValue = utils.prepareValueForInput(value, inputType);
-    const checked = inputType === 'checkbox' && value ? true : null;
-    return (
-      <input
-        checked={checked}
-        onChange={this.handleInputChange.bind(null, index, key, inputType)}
-        type={inputType}
-        value={inputValue}
-      />
-    );
-  }
+    renderInput (key, value) {
+      const index = this.props.index;
+      const inputType = utils.inputTypeForPrototype(this.props.model[key].type);
+      const inputValue = utils.prepareValueForInput(value, inputType);
+      const checked = inputType === 'checkbox' && value ? true : null;
+      return (
+        <input
+          checked={checked}
+          onChange={this.handleInputChange.bind(null, index, key, inputType)}
+          type={inputType}
+          value={inputValue}
+        />
+      );
+    }
 
-  render () {
-    const className = classnames(this.props.theme.row, {
-      [this.props.theme.editable]: this.props.onChange,
-      [this.props.theme.selected]: this.props.selected
-    });
+    render () {
+      const className = classnames(this.props.theme.row, {
+        [this.props.theme.editable]: this.props.onChange,
+        [this.props.theme.selected]: this.props.selected
+      });
 
-    return (
-      <tr data-react-toolbox-table='row' className={className}>
-        {this.renderSelectCell()}
-        {this.renderCells()}
-      </tr>
-    );
+      return (
+        <tr data-react-toolbox-table='row' className={className}>
+          {this.renderSelectCell()}
+          {this.renderCells()}
+        </tr>
+      );
+    }
   }
-}
 
-export default TableRow;
+  return TableRow;
+};
+
+export default factory;
diff --git a/components/table/index.js b/components/table/index.js
index aa0f03a09..77e1c7751 100644
--- a/components/table/index.js
+++ b/components/table/index.js
@@ -1 +1,15 @@
-export default from './Table';
+import { themr } from 'react-css-themr';
+import { TABLE } from '../identifiers.js';
+import { Checkbox } from '../checkbox';
+import { tableFactory } from './Table.js';
+import tableHeadFactory from './TableHead.js';
+import tableRowFactory from './TableRow.js';
+import theme from './theme.scss';
+
+const applyTheme = (Component) => themr(TABLE, theme)(Component);
+const ThemedTableHead = applyTheme(tableHeadFactory(Checkbox));
+const ThemedTableRow = applyTheme(tableRowFactory(Checkbox));
+const ThemedTable = applyTheme(tableFactory(ThemedTableHead, ThemedTableRow));
+
+export default ThemedTable;
+export { ThemedTable as Table };
diff --git a/components/table/readme.md b/components/table/readme.md
index 48c45667e..5353fe4de 100644
--- a/components/table/readme.md
+++ b/components/table/readme.md
@@ -2,8 +2,6 @@
 
 The Table component is an enhanced version of the standard HTML `<table>`. A data-table consists of rows and columns of well-formatted data, presented with appropriate user interaction capabilities. This component uses a solid typed model, helping you to create formatted formated cells. These cells can be editable if you subscribe to `onChange` method who dispatch then new source with each change.
 
-This component is themeable under the key `ToolboxTable`. You can check the configuration variables directly in Github.
-
 <!-- example -->
 ```jsx
 import Table from 'react-toolbox/lib/table';
@@ -51,6 +49,8 @@ class TableTest extends React.Component {
 }
 ```
 
+This component can be styled by context providing a theme with the key `RTTable` through the theme provider.
+
 ## Properties
 
 | Name              | Type            | Default         | Description|
@@ -65,7 +65,7 @@ class TableTest extends React.Component {
 | `selected`        | `Array`         |                 | Array of indexes of the items in the source that should appear as selected.|
 | `source`          | `Array`         |                 | Array of objects representing each item to show.|
 
-## Theming
+## Theme
 
 | Name     | Description|
 |:---------|:-----------|
diff --git a/spec/theme.js b/spec/theme.js
index 5970a9a1c..dc5380ea4 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -1,16 +1,10 @@
 import '../components/commons.scss';
 
-import ToolboxSnackbar from '../components/snackbar/theme.scss';
-import ToolboxSwitch from '../components/switch/theme.scss';
-import ToolboxTable from '../components/table/theme.scss';
 import ToolboxTabs from '../components/tabs/theme.scss';
 import ToolboxTimePicker from '../components/time_picker/theme.scss';
 import ToolboxTooltip from '../components/tooltip/theme.scss';
 
 export default {
-  ToolboxSnackbar,
-  ToolboxSwitch,
-  ToolboxTable,
   ToolboxTabs,
   ToolboxTimePicker,
   ToolboxTooltip

From 975fb32c89eb589e04948284eb972e0a8708da11 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 30 May 2016 07:07:50 +0200
Subject: [PATCH 0602/1024] Autoinject theme for Tooltip

---
 components/identifiers.js     |   1 +
 components/tooltip/Tooltip.js | 132 ++++++++++++++++++----------------
 components/tooltip/index.js   |   5 +-
 components/tooltip/readme.md  |   5 +-
 spec/theme.js                 |   4 +-
 5 files changed, 77 insertions(+), 70 deletions(-)

diff --git a/components/identifiers.js b/components/identifiers.js
index c71bba92d..0342928b6 100644
--- a/components/identifiers.js
+++ b/components/identifiers.js
@@ -20,3 +20,4 @@ export const SLIDER = 'RTSlider';
 export const SNACKBAR = 'RTSnackbar';
 export const SWITCH = 'RTSwitch';
 export const TABLE = 'RTTable';
+export const TOOLTIP = 'RTTooltip';
diff --git a/components/tooltip/Tooltip.js b/components/tooltip/Tooltip.js
index 8c2f9cf09..e926b1590 100644
--- a/components/tooltip/Tooltip.js
+++ b/components/tooltip/Tooltip.js
@@ -1,77 +1,83 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
+import { TOOLTIP } from '../identifiers.js';
 
-const Tooltip = (ComposedComponent) => {
-  class TooltippedComponent extends React.Component {
-    static propTypes = {
-      children: React.PropTypes.any,
-      className: React.PropTypes.string,
-      onClick: React.PropTypes.func,
-      onMouseEnter: React.PropTypes.func,
-      onMouseLeave: React.PropTypes.func,
-      theme: React.PropTypes.shape({
-        tooltip: React.PropTypes.string,
-        tooltipActive: React.PropTypes.string,
-        tooltipWrapper: React.PropTypes.string
-      }),
-      tooltip: React.PropTypes.string,
-      tooltipDelay: React.PropTypes.number,
-      tooltipHideOnClick: React.PropTypes.bool
-    };
+const factory = (defaultTheme = {}) => {
+  const Tooltip = (ComposedComponent) => {
+    class TooltippedComponent extends Component {
+      static propTypes = {
+        children: PropTypes.any,
+        className: PropTypes.string,
+        onClick: PropTypes.func,
+        onMouseEnter: PropTypes.func,
+        onMouseLeave: PropTypes.func,
+        theme: PropTypes.shape({
+          tooltip: PropTypes.string,
+          tooltipActive: PropTypes.string,
+          tooltipWrapper: PropTypes.string
+        }),
+        tooltip: PropTypes.string,
+        tooltipDelay: PropTypes.number,
+        tooltipHideOnClick: PropTypes.bool
+      };
 
-    static defaultProps = {
-      className: '',
-      tooltipDelay: 0,
-      tooltipHideOnClick: true
-    };
+      static defaultProps = {
+        className: '',
+        tooltipDelay: 0,
+        tooltipHideOnClick: true
+      };
 
-    state = {
-      active: false
-    };
+      state = {
+        active: false
+      };
 
-    handleMouseEnter = (event) => {
-      if (this.timeout) clearTimeout(this.timeout);
-      this.timeout = setTimeout(() =>this.setState({active: true}), this.props.tooltipDelay);
-      if (this.props.onMouseEnter) this.props.onMouseEnter(event);
-    };
+      handleMouseEnter = (event) => {
+        if (this.timeout) clearTimeout(this.timeout);
+        this.timeout = setTimeout(() =>this.setState({active: true}), this.props.tooltipDelay);
+        if (this.props.onMouseEnter) this.props.onMouseEnter(event);
+      };
 
-    handleMouseLeave = (event) => {
-      if (this.timeout) clearTimeout(this.timeout);
-      if (this.state.active) this.setState({active: false});
-      if (this.props.onMouseLeave) this.props.onMouseLeave(event);
-    };
+      handleMouseLeave = (event) => {
+        if (this.timeout) clearTimeout(this.timeout);
+        if (this.state.active) this.setState({active: false});
+        if (this.props.onMouseLeave) this.props.onMouseLeave(event);
+      };
 
-    handleClick = (event) => {
-      if (this.timeout) clearTimeout(this.timeout);
-      if (this.props.tooltipHideOnClick) this.setState({active: false});
-      if (this.props.onClick) this.props.onClick(event);
-    };
+      handleClick = (event) => {
+        if (this.timeout) clearTimeout(this.timeout);
+        if (this.props.tooltipHideOnClick) this.setState({active: false});
+        if (this.props.onClick) this.props.onClick(event);
+      };
 
-    render () {
-      const {children, className, tooltip,
-        tooltipDelay, tooltipHideOnClick, theme, ...other} = this.props; //eslint-disable-line no-unused-vars
-      const composedClassName = classnames(this.props.theme.tooltipWrapper, className);
-      const tooltipClassName = classnames(this.props.theme.tooltip, {
-        [this.props.theme.tooltipActive]: this.state.active
-      });
+      render () {
+        const {children, className, tooltip,
+          tooltipDelay, tooltipHideOnClick, theme, ...other} = this.props; //eslint-disable-line no-unused-vars
+        const composedClassName = classnames(this.props.theme.tooltipWrapper, className);
+        const tooltipClassName = classnames(this.props.theme.tooltip, {
+          [this.props.theme.tooltipActive]: this.state.active
+        });
 
-      return (
-        <ComposedComponent
-          {...other}
-          className={composedClassName}
-          onClick={this.handleClick}
-          onMouseEnter={this.handleMouseEnter}
-          onMouseLeave={this.handleMouseLeave}
-        >
-          {children ? children : null}
-          <span data-react-toolbox="tooltip" className={tooltipClassName}>{tooltip}</span>
-        </ComposedComponent>
-      );
+        return (
+          <ComposedComponent
+            {...other}
+            className={composedClassName}
+            onClick={this.handleClick}
+            onMouseEnter={this.handleMouseEnter}
+            onMouseLeave={this.handleMouseLeave}
+          >
+            {children ? children : null}
+            <span data-react-toolbox="tooltip" className={tooltipClassName}>{tooltip}</span>
+          </ComposedComponent>
+        );
+      }
     }
-  }
 
-  return themr('ToolboxTooltip')(TooltippedComponent);
+    return themr(TOOLTIP, defaultTheme)(TooltippedComponent);
+  };
+
+  return Tooltip;
 };
 
-export default Tooltip;
+export default factory();
+export { factory as tooltipFactory };
diff --git a/components/tooltip/index.js b/components/tooltip/index.js
index 17f06b52b..3fcd819f2 100644
--- a/components/tooltip/index.js
+++ b/components/tooltip/index.js
@@ -1 +1,4 @@
-export default from './Tooltip';
+import { tooltipFactory } from './Tooltip.js';
+import theme from './theme.scss';
+
+export default tooltipFactory(theme);
diff --git a/components/tooltip/readme.md b/components/tooltip/readme.md
index e35f6b617..19db1ee45 100644
--- a/components/tooltip/readme.md
+++ b/components/tooltip/readme.md
@@ -2,14 +2,11 @@
 
 A Tooltip is useful to show information on hover in any kind of component. We have a component that can be used as a **decorator** for any kind of component. You just have to take into account that the overflow in the component should be visible.
 
-Tooltips are themeable under the key `ToolboxTooltip`. Check the configuration at github.
-
 <!-- example -->
 ```jsx
 import Button from 'react-toolbox/lib/button';
 import Tooltip from 'react-toolbox/lib/tooltip';
 import Link from 'react-toolbox/lib/link';
-// Remember to provide a default theme using the provider
 
 const TooltipButton = Tooltip(Button);
 const TooltipInput = Tooltip(Input);
@@ -25,6 +22,8 @@ const TooltipTest = () => (
 );
 ```
 
+This component can be styled by context providing a theme with the key `RTTooltip` through the theme provider.
+
 ## Properties
 
 In any component you decorate with the Tooltip you'd get some additional props:
diff --git a/spec/theme.js b/spec/theme.js
index dc5380ea4..e9f0294f0 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -2,10 +2,8 @@ import '../components/commons.scss';
 
 import ToolboxTabs from '../components/tabs/theme.scss';
 import ToolboxTimePicker from '../components/time_picker/theme.scss';
-import ToolboxTooltip from '../components/tooltip/theme.scss';
 
 export default {
   ToolboxTabs,
-  ToolboxTimePicker,
-  ToolboxTooltip
+  ToolboxTimePicker
 };

From 6afb914126f1f8adb15111b728fd35e8e6572664 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 30 May 2016 23:23:55 +0200
Subject: [PATCH 0603/1024] Autoinject theme for Tabs

---
 components/identifiers.js     |   1 +
 components/tabs/Tab.js        |  34 +++---
 components/tabs/TabContent.js |  22 ++--
 components/tabs/Tabs.js       | 208 ++++++++++++++++++----------------
 components/tabs/index.js      |  16 ++-
 components/tabs/readme.md     |   6 +-
 spec/theme.js                 |   2 -
 7 files changed, 156 insertions(+), 133 deletions(-)

diff --git a/components/identifiers.js b/components/identifiers.js
index 0342928b6..bcb2046d2 100644
--- a/components/identifiers.js
+++ b/components/identifiers.js
@@ -20,4 +20,5 @@ export const SLIDER = 'RTSlider';
 export const SNACKBAR = 'RTSnackbar';
 export const SWITCH = 'RTSwitch';
 export const TABLE = 'RTTable';
+export const TABS = 'RTTabs';
 export const TOOLTIP = 'RTTooltip';
diff --git a/components/tabs/Tab.js b/components/tabs/Tab.js
index 6bc4770d8..052a05f97 100644
--- a/components/tabs/Tab.js
+++ b/components/tabs/Tab.js
@@ -1,22 +1,23 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
+import { TABS } from '../identifiers.js';
 
-class TabHeader extends React.Component {
+class Tab extends Component {
   static propTypes = {
-    active: React.PropTypes.bool,
-    activeClassName: React.PropTypes.string,
-    className: React.PropTypes.string,
-    disabled: React.PropTypes.bool,
-    hidden: React.PropTypes.bool,
-    label: React.PropTypes.any.isRequired,
-    onActive: React.PropTypes.func,
-    onClick: React.PropTypes.func,
-    theme: React.PropTypes.shape({
-      active: React.PropTypes.string,
-      disabled: React.PropTypes.string,
-      hidden: React.PropTypes.string,
-      label: React.PropTypes.string
+    active: PropTypes.bool,
+    activeClassName: PropTypes.string,
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    hidden: PropTypes.bool,
+    label: PropTypes.any.isRequired,
+    onActive: PropTypes.func,
+    onClick: PropTypes.func,
+    theme: PropTypes.shape({
+      active: PropTypes.string,
+      disabled: PropTypes.string,
+      hidden: PropTypes.string,
+      label: PropTypes.string
     })
   };
 
@@ -56,4 +57,5 @@ class TabHeader extends React.Component {
   }
 }
 
-export default themr('ToolboxTabs')(TabHeader);
+export default themr(TABS)(Tab);
+export { Tab };
diff --git a/components/tabs/TabContent.js b/components/tabs/TabContent.js
index f90f3aca5..b4ff9f839 100644
--- a/components/tabs/TabContent.js
+++ b/components/tabs/TabContent.js
@@ -1,16 +1,17 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
+import { TABS } from '../identifiers.js';
 
-class TabContent extends React.Component {
+class TabContent extends Component {
   static propTypes = {
-    active: React.PropTypes.bool,
-    children: React.PropTypes.node,
-    className: React.PropTypes.string,
-    tabIndex: React.PropTypes.number,
-    theme: React.PropTypes.shape({
-      active: React.PropTypes.string,
-      tab: React.PropTypes.string
+    active: PropTypes.bool,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    tabIndex: PropTypes.number,
+    theme: PropTypes.shape({
+      active: PropTypes.string,
+      tab: PropTypes.string
     })
   };
 
@@ -32,4 +33,5 @@ class TabContent extends React.Component {
   }
 }
 
-export default themr('ToolboxTabs')(TabContent);
+export default themr(TABS)(TabContent);
+export { TabContent };
diff --git a/components/tabs/Tabs.js b/components/tabs/Tabs.js
index dcb6af20d..ecb5dd0b5 100644
--- a/components/tabs/Tabs.js
+++ b/components/tabs/Tabs.js
@@ -1,117 +1,125 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
-import Tab from './Tab';
-import TabContent from './TabContent';
-
-class Tabs extends React.Component {
-  static propTypes = {
-    children: React.PropTypes.node,
-    className: React.PropTypes.string,
-    disableAnimatedBottomBorder: React.PropTypes.bool,
-    index: React.PropTypes.number,
-    onChange: React.PropTypes.func,
-    theme: React.PropTypes.shape({
-      navigation: React.PropTypes.string,
-      pointer: React.PropTypes.string,
-      tabs: React.PropTypes.string
-    })
-  };
-
-  static defaultProps = {
-    index: 0
-  };
-
-  state = {
-    pointer: {}
-  };
-
-  componentDidMount () {
-    !this.props.disableAnimatedBottomBorder && this.updatePointer(this.props.index);
-  }
-
-  componentWillReceiveProps (nextProps) {
-    !this.props.disableAnimatedBottomBorder && this.updatePointer(nextProps.index);
-  }
-
-  componentWillUnmount () {
-    clearTimeout(this.pointerTimeout);
-  }
+import { TABS } from '../identifiers.js';
+import InjectTab from './Tab.js';
+import InjectTabContent from './TabContent.js';
+
+const factory = (Tab, TabContent) => {
+  class Tabs extends Component {
+    static propTypes = {
+      children: PropTypes.node,
+      className: PropTypes.string,
+      disableAnimatedBottomBorder: PropTypes.bool,
+      index: PropTypes.number,
+      onChange: PropTypes.func,
+      theme: PropTypes.shape({
+        navigation: PropTypes.string,
+        pointer: PropTypes.string,
+        tabs: PropTypes.string
+      })
+    };
+
+    static defaultProps = {
+      index: 0
+    };
+
+    state = {
+      pointer: {}
+    };
+
+    componentDidMount () {
+      !this.props.disableAnimatedBottomBorder && this.updatePointer(this.props.index);
+    }
 
-  handleHeaderClick = (idx) => {
-    if (this.props.onChange) this.props.onChange(idx);
-  };
+    componentWillReceiveProps (nextProps) {
+      !this.props.disableAnimatedBottomBorder && this.updatePointer(nextProps.index);
+    }
 
-  parseChildren () {
-    const headers = [];
-    const contents = [];
+    componentWillUnmount () {
+      clearTimeout(this.pointerTimeout);
+    }
 
-    React.Children.forEach(this.props.children, (item) => {
-      if (item.type === Tab) {
-        headers.push(item);
-        if (item.props.children) {
-          contents.push(<TabContent children={item.props.children} />);
+    handleHeaderClick = (idx) => {
+      if (this.props.onChange) this.props.onChange(idx);
+    };
+
+    parseChildren () {
+      const headers = [];
+      const contents = [];
+
+      React.Children.forEach(this.props.children, (item) => {
+        if (item.type === Tab) {
+          headers.push(item);
+          if (item.props.children) {
+            contents.push(<TabContent children={item.props.children} />);
+          }
+        } else if (item.type === TabContent) {
+          contents.push(item);
         }
-      } else if (item.type === TabContent) {
-        contents.push(item);
-      }
-    });
+      });
 
-    return {headers, contents};
-  }
+      return {headers, contents};
+    }
 
-  updatePointer (idx) {
-    clearTimeout(this.pointerTimeout);
-    this.pointerTimeout = setTimeout(() => {
-      const startPoint = this.refs.tabs.getBoundingClientRect().left;
-      const label = this.refs.navigation.children[idx].getBoundingClientRect();
-      this.setState({
-        pointer: {
-          top: `${this.refs.navigation.getBoundingClientRect().height}px`,
-          left: `${label.left - startPoint}px`,
-          width: `${label.width}px`
-        }
+    updatePointer (idx) {
+      clearTimeout(this.pointerTimeout);
+      this.pointerTimeout = setTimeout(() => {
+        const startPoint = this.refs.tabs.getBoundingClientRect().left;
+        const label = this.refs.navigation.children[idx].getBoundingClientRect();
+        this.setState({
+          pointer: {
+            top: `${this.refs.navigation.getBoundingClientRect().height}px`,
+            left: `${label.left - startPoint}px`,
+            width: `${label.width}px`
+          }
+        });
+      }, 20);
+    }
+
+    renderHeaders (headers) {
+      return headers.map((item, idx) => {
+        return React.cloneElement(item, {
+          key: idx,
+          active: this.props.index === idx,
+          onClick: this.handleHeaderClick.bind(this, idx, item)
+        });
       });
-    }, 20);
-  }
+    }
 
-  renderHeaders (headers) {
-    return headers.map((item, idx) => {
-      return React.cloneElement(item, {
-        key: idx,
-        active: this.props.index === idx,
-        onClick: this.handleHeaderClick.bind(this, idx, item)
+    renderContents (contents) {
+      const activeIdx = contents.findIndex((item, idx) => {
+        return this.props.index === idx;
       });
-    });
-  }
 
-  renderContents (contents) {
-    const activeIdx = contents.findIndex((item, idx) => {
-      return this.props.index === idx;
-    });
+      if (contents && contents[activeIdx]) {
+        return React.cloneElement(contents[activeIdx], {
+          key: activeIdx,
+          active: true,
+          tabIndex: activeIdx
+        });
+      }
+    }
 
-    if (contents && contents[activeIdx]) {
-      return React.cloneElement(contents[activeIdx], {
-        key: activeIdx,
-        active: true,
-        tabIndex: activeIdx
-      });
+    render () {
+      const { className, theme } = this.props;
+      const { headers, contents } = this.parseChildren();
+      return (
+        <div ref='tabs' data-react-toolbox='tabs' className={classnames(theme.tabs, className)}>
+          <nav className={theme.navigation} ref='navigation'>
+            {this.renderHeaders(headers)}
+          </nav>
+          <span className={theme.pointer} style={this.state.pointer} />
+          {this.renderContents(contents)}
+        </div>
+      );
     }
   }
 
-  render () {
-    const { className, theme } = this.props;
-    const { headers, contents } = this.parseChildren();
-    return (
-      <div ref='tabs' data-react-toolbox='tabs' className={classnames(theme.tabs, className)}>
-        <nav className={theme.navigation} ref='navigation'>
-          {this.renderHeaders(headers)}
-        </nav>
-        <span className={theme.pointer} style={this.state.pointer} />
-        {this.renderContents(contents)}
-      </div>
-    );
-  }
-}
+  return Tabs;
+};
 
-export default themr('ToolboxTabs')(Tabs);
+const Tabs = factory(InjectTab, InjectTabContent);
+export default themr(TABS)(Tabs);
+export { factory as tabsFactory };
+export { Tabs };
diff --git a/components/tabs/index.js b/components/tabs/index.js
index f6619dd74..85c995a61 100644
--- a/components/tabs/index.js
+++ b/components/tabs/index.js
@@ -1,2 +1,14 @@
-export Tabs from './Tabs';
-export Tab from './Tab';
+import { themr } from 'react-css-themr';
+import { TABS } from '../identifiers.js';
+import { tabsFactory } from './Tabs.js';
+import { TabContent } from './TabContent.js';
+import { Tab } from './Tab.js';
+import theme from './theme.scss';
+
+const applyTheme = (Component) => themr(TABS, theme)(Component);
+const ThemedTabContent = applyTheme(TabContent);
+const ThemedTab = applyTheme(Tab);
+const ThemedTabs = applyTheme(tabsFactory(ThemedTab, ThemedTabContent));
+
+export { ThemedTab as Tab };
+export { ThemedTabs as Tabs };
diff --git a/components/tabs/readme.md b/components/tabs/readme.md
index fd324a21a..b2c8d3a1b 100644
--- a/components/tabs/readme.md
+++ b/components/tabs/readme.md
@@ -2,8 +2,6 @@
 
 [Tabs](https://www.google.com/design/spec/components/tabs.html) make it easy to explore and switch between different views or functional aspects of an app or to browse categorized data sets.  Tabs are composed with their content, but only the active tab's content is rendered.  In the future, we may add the ability to render headers only, with event listeners.
 
-This component and subcomponents are themeable under the key `ToolboxTabs`. You can check the configuration variables for SASS at Github.
-
 <!-- example -->
 ```jsx
 import {Tab, Tabs} from 'react-toolbox';
@@ -35,6 +33,8 @@ class TabsTest extends React.Component {
 }
 ```
 
+If you want to provide a theme via context, the component key is `RTTabs`.
+
 ## Tabs
 
 This component acts as the wrapper and the main controller of the content that is being displayed. It gets some properties that can be spread to the children.
@@ -75,7 +75,7 @@ Represent a single tab element and it should include some properties to describe
 | `onActive`        | `Function`      |                 | Callback function that is fired when the tab is activated. |
 | `onClick`         | `Function`      |                 | Callback function that is fired when the tab is clicked. |
 
-### Theming
+### Theme
 
 | Name     | Description|
 |:---------|:-----------|
diff --git a/spec/theme.js b/spec/theme.js
index e9f0294f0..908b37e9c 100644
--- a/spec/theme.js
+++ b/spec/theme.js
@@ -1,9 +1,7 @@
 import '../components/commons.scss';
 
-import ToolboxTabs from '../components/tabs/theme.scss';
 import ToolboxTimePicker from '../components/time_picker/theme.scss';
 
 export default {
-  ToolboxTabs,
   ToolboxTimePicker
 };

From c356a2be5a39f8a7a0df83eb3a5feb54e8ebccea Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 31 May 2016 10:23:05 +0200
Subject: [PATCH 0604/1024] Finish autoinjects

---
 components/identifiers.js                  |   1 +
 components/index.js                        |  19 +-
 components/radio/index.js                  |   1 +
 components/time_picker/Clock.js            |  30 +--
 components/time_picker/ClockFace.js        |  22 +--
 components/time_picker/ClockHand.js        |  30 +--
 components/time_picker/ClockHours.js       |  26 +--
 components/time_picker/ClockMinutes.js     |  24 +--
 components/time_picker/TimePicker.js       | 136 +++++++------
 components/time_picker/TimePickerDialog.js | 211 +++++++++++----------
 components/time_picker/index.js            |  13 +-
 components/time_picker/readme.md           |   8 +-
 spec/root.js                               |  75 ++++----
 spec/theme.js                              |   7 -
 14 files changed, 304 insertions(+), 299 deletions(-)
 delete mode 100644 spec/theme.js

diff --git a/components/identifiers.js b/components/identifiers.js
index bcb2046d2..bf567bf14 100644
--- a/components/identifiers.js
+++ b/components/identifiers.js
@@ -22,3 +22,4 @@ export const SWITCH = 'RTSwitch';
 export const TABLE = 'RTTable';
 export const TABS = 'RTTabs';
 export const TOOLTIP = 'RTTooltip';
+export const TIMEPICKER = 'RTTimePicker';
diff --git a/components/index.js b/components/index.js
index fe4c29a32..4d83a958a 100644
--- a/components/index.js
+++ b/components/index.js
@@ -13,27 +13,18 @@ export Dropdown from './dropdown';
 export FontIcon from './font_icon';
 export Form from './form';
 export Input from './input';
-export { Layout, NavDrawer, Panel, Sidebar } from './layout';
+export * from './layout';
 export Link from './link';
-export List from './list/List';
-export ListItem from './list/ListItem';
-export ListDivider from './list/ListDivider';
-export ListCheckbox from './list/ListCheckbox';
-export ListSubHeader from './list/ListSubHeader';
-export Menu from './menu/Menu';
-export MenuItem from './menu/MenuItem';
-export MenuDivider from './menu/MenuDivider';
-export IconMenu from './menu/IconMenu';
+export * from './list';
+export * from './menu';
 export Navigation from './navigation';
 export ProgressBar from './progress_bar';
-export RadioGroup from './radio/RadioGroup';
-export RadioButton from './radio/RadioButton';
+export * from './radio';
 export Ripple from './ripple';
 export Slider from './slider';
 export Snackbar from './snackbar';
 export Switch from './switch';
 export Table from './table';
-export Tabs from './tabs/Tabs';
-export Tab from './tabs/Tab';
+export * from './tabs';
 export Tooltip from './tooltip';
 export TimePicker from './time_picker';
diff --git a/components/radio/index.js b/components/radio/index.js
index b4d8aad12..62167cce4 100644
--- a/components/radio/index.js
+++ b/components/radio/index.js
@@ -10,5 +10,6 @@ const ThemedRadio = radioFactory(themedRippleFactory({ centered: true, spread: 2
 const ThemedRadioButton = themr(RADIO, theme)(radioButtonFactory(ThemedRadio));
 const ThemedRadioGroup = themr(RADIO, theme)(radioGroupFactory(ThemedRadioButton));
 
+export default ThemedRadioButton;
 export { ThemedRadioButton as RadioButton };
 export { ThemedRadioGroup as RadioGroup };
diff --git a/components/time_picker/Clock.js b/components/time_picker/Clock.js
index ecc0fad14..13655af33 100644
--- a/components/time_picker/Clock.js
+++ b/components/time_picker/Clock.js
@@ -1,23 +1,23 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import CssTransitionGroup from 'react-addons-css-transition-group';
 import { ZoomIn, ZoomOut } from '../animations';
-import time from '../utils/time';
-import Hours from './ClockHours';
-import Minutes from './ClockMinutes';
+import time from '../utils/time.js';
+import Hours from './ClockHours.js';
+import Minutes from './ClockMinutes.js';
 
-class Clock extends React.Component {
+class Clock extends Component {
   static propTypes = {
-    className: React.PropTypes.string,
-    display: React.PropTypes.oneOf(['hours', 'minutes']),
-    format: React.PropTypes.oneOf(['24hr', 'ampm']),
-    onChange: React.PropTypes.func,
-    onHandMoved: React.PropTypes.func,
-    theme: React.PropTypes.shape({
-      clock: React.PropTypes.string.isRequired,
-      clockWrapper: React.PropTypes.string.isRequired,
-      placeholder: React.PropTypes.string.isRequired
+    className: PropTypes.string,
+    display: PropTypes.oneOf(['hours', 'minutes']),
+    format: PropTypes.oneOf(['24hr', 'ampm']),
+    onChange: PropTypes.func,
+    onHandMoved: PropTypes.func,
+    theme: PropTypes.shape({
+      clock: PropTypes.string.isRequired,
+      clockWrapper: PropTypes.string.isRequired,
+      placeholder: PropTypes.string.isRequired
     }),
-    time: React.PropTypes.object
+    time: PropTypes.object
   };
 
   static defaultProps = {
diff --git a/components/time_picker/ClockFace.js b/components/time_picker/ClockFace.js
index 58dffdc83..4061209b7 100644
--- a/components/time_picker/ClockFace.js
+++ b/components/time_picker/ClockFace.js
@@ -1,18 +1,18 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
 
-class Face extends React.Component {
+class Face extends Component {
   static propTypes = {
-    active: React.PropTypes.number,
-    numbers: React.PropTypes.array,
-    radius: React.PropTypes.number,
-    spacing: React.PropTypes.number,
-    theme: React.PropTypes.shape({
-      active: React.PropTypes.string.isRequired,
-      face: React.PropTypes.string.isRequired,
-      number: React.PropTypes.string.isRequired
+    active: PropTypes.number,
+    numbers: PropTypes.array,
+    radius: PropTypes.number,
+    spacing: PropTypes.number,
+    theme: PropTypes.shape({
+      active: PropTypes.string.isRequired,
+      face: PropTypes.string.isRequired,
+      number: PropTypes.string.isRequired
     }),
-    twoDigits: React.PropTypes.bool
+    twoDigits: PropTypes.bool
   };
 
   static defaultProps = {
diff --git a/components/time_picker/ClockHand.js b/components/time_picker/ClockHand.js
index 8dbd0dd35..d50aa7e1b 100644
--- a/components/time_picker/ClockHand.js
+++ b/components/time_picker/ClockHand.js
@@ -1,20 +1,20 @@
-import React from 'react';
-import events from '../utils/events';
-import prefixer from '../utils/prefixer';
-import utils from '../utils/utils';
+import React, { Component, PropTypes } from 'react';
+import events from '../utils/events.js';
+import prefixer from '../utils/prefixer.js';
+import utils from '../utils/utils.js';
 
-class Hand extends React.Component {
+class Hand extends Component {
   static propTypes = {
-    angle: React.PropTypes.number,
-    className: React.PropTypes.string,
-    length: React.PropTypes.number,
-    onMove: React.PropTypes.func,
-    onMoved: React.PropTypes.func,
-    origin: React.PropTypes.object,
-    step: React.PropTypes.number,
-    theme: React.PropTypes.shape({
-      hand: React.PropTypes.string.isRequired,
-      knob: React.PropTypes.string.isRequired
+    angle: PropTypes.number,
+    className: PropTypes.string,
+    length: PropTypes.number,
+    onMove: PropTypes.func,
+    onMoved: PropTypes.func,
+    origin: PropTypes.object,
+    step: PropTypes.number,
+    theme: PropTypes.shape({
+      hand: PropTypes.string.isRequired,
+      knob: PropTypes.string.isRequired
     })
   };
 
diff --git a/components/time_picker/ClockHours.js b/components/time_picker/ClockHours.js
index 50a6a214c..5e37cd2e3 100644
--- a/components/time_picker/ClockHours.js
+++ b/components/time_picker/ClockHours.js
@@ -1,23 +1,23 @@
-import React from 'react';
-import utils from '../utils/utils';
-import Face from './ClockFace';
-import Hand from './ClockHand';
+import React, { Component, PropTypes } from 'react';
+import utils from '../utils/utils.js';
+import Hand from './ClockHand.js';
+import Face from './ClockFace.js';
 
 const outerNumbers = [0, ...utils.range(13, 24)];
 const innerNumbers = [12, ...utils.range(1, 12)];
 const innerSpacing = 1.7;
 const step = 360 / 12;
 
-class Hours extends React.Component {
+class Hours extends Component {
   static propTypes = {
-    center: React.PropTypes.object,
-    format: React.PropTypes.oneOf(['24hr', 'ampm']),
-    onChange: React.PropTypes.func,
-    onHandMoved: React.PropTypes.func,
-    radius: React.PropTypes.number,
-    selected: React.PropTypes.number,
-    spacing: React.PropTypes.number,
-    theme: React.PropTypes.object
+    center: PropTypes.object,
+    format: PropTypes.oneOf(['24hr', 'ampm']),
+    onChange: PropTypes.func,
+    onHandMoved: PropTypes.func,
+    radius: PropTypes.number,
+    selected: PropTypes.number,
+    spacing: PropTypes.number,
+    theme: PropTypes.object
   };
 
   state = {
diff --git a/components/time_picker/ClockMinutes.js b/components/time_picker/ClockMinutes.js
index 127fa882e..2f3bb4081 100644
--- a/components/time_picker/ClockMinutes.js
+++ b/components/time_picker/ClockMinutes.js
@@ -1,20 +1,20 @@
-import React from 'react';
-import utils from '../utils/utils';
-import Face from './ClockFace';
-import Hand from './ClockHand';
+import React, { Component, PropTypes } from 'react';
+import utils from '../utils/utils.js';
+import Hand from './ClockHand.js';
+import Face from './ClockFace.js';
 
 const minutes = utils.range(0, 60, 5);
 const step = 360 / 60;
 
-class Minutes extends React.Component {
+class Minutes extends Component {
   static propTypes = {
-    center: React.PropTypes.object,
-    onChange: React.PropTypes.func,
-    radius: React.PropTypes.number,
-    selected: React.PropTypes.number,
-    spacing: React.PropTypes.number,
-    theme: React.PropTypes.shape({
-      small: React.PropTypes.string.isRequired
+    center: PropTypes.object,
+    onChange: PropTypes.func,
+    radius: PropTypes.number,
+    selected: PropTypes.number,
+    spacing: PropTypes.number,
+    theme: PropTypes.shape({
+      small: PropTypes.string.isRequired
     })
   };
 
diff --git a/components/time_picker/TimePicker.js b/components/time_picker/TimePicker.js
index 7ef8a6c3b..9210870a0 100644
--- a/components/time_picker/TimePicker.js
+++ b/components/time_picker/TimePicker.js
@@ -1,74 +1,84 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
-import events from '../utils/events';
-import time from '../utils/time';
-import Input from '../input';
-import TimePickerDialog from './TimePickerDialog';
+import { TIME_PICKER } from '../identifiers.js';
+import events from '../utils/events.js';
+import time from '../utils/time.js';
+import InjectDialog from '../dialog/Dialog.js';
+import InjectInput from '../input/Input.js';
+import timePickerDialogFactory from './TimePickerDialog.js';
 
-class TimePicker extends React.Component {
-  static propTypes = {
-    className: React.PropTypes.string,
-    error: React.PropTypes.string,
-    format: React.PropTypes.oneOf(['24hr', 'ampm']),
-    inputClassName: React.PropTypes.string,
-    label: React.PropTypes.string,
-    onChange: React.PropTypes.func,
-    theme: React.PropTypes.shape({
-      input: React.PropTypes.string.isRequired
-    }),
-    value: React.PropTypes.object
-  };
+const factory = (TimePickerDialog, Input) => {
+  class TimePicker extends Component {
+    static propTypes = {
+      className: PropTypes.string,
+      error: PropTypes.string,
+      format: PropTypes.oneOf(['24hr', 'ampm']),
+      inputClassName: PropTypes.string,
+      label: PropTypes.string,
+      onChange: PropTypes.func,
+      theme: PropTypes.shape({
+        input: PropTypes.string.isRequired
+      }),
+      value: PropTypes.object
+    };
 
-  static defaultProps = {
-    className: '',
-    format: '24hr'
-  };
+    static defaultProps = {
+      className: '',
+      format: '24hr'
+    };
 
-  state = {
-    active: false
-  };
+    state = {
+      active: false
+    };
 
-  handleDismiss = () => {
-    this.setState({active: false});
-  };
+    handleDismiss = () => {
+      this.setState({active: false});
+    };
 
-  handleInputMouseDown = (event) => {
-    events.pauseEvent(event);
-    this.setState({active: true});
-  };
+    handleInputMouseDown = (event) => {
+      events.pauseEvent(event);
+      this.setState({active: true});
+    };
 
-  handleSelect = (value, event) => {
-    if (this.props.onChange) this.props.onChange(value, event);
-    this.setState({active: false});
-  };
+    handleSelect = (value, event) => {
+      if (this.props.onChange) this.props.onChange(value, event);
+      this.setState({active: false});
+    };
 
-  render () {
-    const { value, format, inputClassName, theme } = this.props;
-    const formattedTime = value ? time.formatTime(value, format) : '';
-    return (
-      <div data-react-toolbox='time-picker'>
-        <Input
-          className={classnames(theme.input, {[inputClassName]: inputClassName })}
-          error={this.props.error}
-          label={this.props.label}
-          onMouseDown={this.handleInputMouseDown}
-          readOnly
-          type='text'
-          value={formattedTime}
-        />
-        <TimePickerDialog
-          active={this.state.active}
-          className={this.props.className}
-          format={format}
-          onDismiss={this.handleDismiss}
-          onSelect={this.handleSelect}
-          theme={this.props.theme}
-          value={this.props.value}
-        />
-      </div>
-    );
+    render () {
+      const { value, format, inputClassName, theme } = this.props;
+      const formattedTime = value ? time.formatTime(value, format) : '';
+      return (
+        <div data-react-toolbox='time-picker'>
+          <Input
+            className={classnames(theme.input, {[inputClassName]: inputClassName })}
+            error={this.props.error}
+            label={this.props.label}
+            onMouseDown={this.handleInputMouseDown}
+            readOnly
+            type='text'
+            value={formattedTime}
+          />
+          <TimePickerDialog
+            active={this.state.active}
+            className={this.props.className}
+            format={format}
+            onDismiss={this.handleDismiss}
+            onSelect={this.handleSelect}
+            theme={this.props.theme}
+            value={this.props.value}
+          />
+        </div>
+      );
+    }
   }
-}
 
-export default themr('ToolboxTimePicker')(TimePicker);
+  return TimePicker;
+};
+
+const TimePickerDialog = timePickerDialogFactory(InjectDialog);
+const TimePicker = factory(TimePickerDialog, InjectInput);
+export default themr(TIME_PICKER)(TimePicker);
+export { factory as timePickerFactory };
+export { TimePicker };
diff --git a/components/time_picker/TimePickerDialog.js b/components/time_picker/TimePickerDialog.js
index 1f20dfe18..15982ec30 100644
--- a/components/time_picker/TimePickerDialog.js
+++ b/components/time_picker/TimePickerDialog.js
@@ -1,125 +1,128 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
-import time from '../utils/time';
-import Clock from './Clock';
-import Dialog from '../dialog';
+import time from '../utils/time.js';
+import Clock from './Clock.js';
 
-class TimePickerDialog extends React.Component {
-  static propTypes = {
-    active: React.PropTypes.bool,
-    className: React.PropTypes.string,
-    format: React.PropTypes.oneOf(['24hr', 'ampm']),
-    onDismiss: React.PropTypes.func,
-    onSelect: React.PropTypes.func,
-    theme: React.PropTypes.shape({
-      am: React.PropTypes.string.isRequired,
-      amFormat: React.PropTypes.string.isRequired,
-      ampm: React.PropTypes.string.isRequired,
-      button: React.PropTypes.string.isRequired,
-      dialog: React.PropTypes.string.isRequired,
-      header: React.PropTypes.string.isRequired,
-      hours: React.PropTypes.string.isRequired,
-      hoursDisplay: React.PropTypes.string.isRequired,
-      minutes: React.PropTypes.string.isRequired,
-      minutesDisplay: React.PropTypes.string.isRequired,
-      pm: React.PropTypes.string.isRequired,
-      pmFormat: React.PropTypes.string.isRequired,
-      separator: React.PropTypes.string.isRequired
-    }),
-    value: React.PropTypes.object
-  };
+const factory = (Dialog) => {
+  class TimePickerDialog extends Component {
+    static propTypes = {
+      active: PropTypes.bool,
+      className: PropTypes.string,
+      format: PropTypes.oneOf(['24hr', 'ampm']),
+      onDismiss: PropTypes.func,
+      onSelect: PropTypes.func,
+      theme: PropTypes.shape({
+        am: PropTypes.string.isRequired,
+        amFormat: PropTypes.string.isRequired,
+        ampm: PropTypes.string.isRequired,
+        button: PropTypes.string.isRequired,
+        dialog: PropTypes.string.isRequired,
+        header: PropTypes.string.isRequired,
+        hours: PropTypes.string.isRequired,
+        hoursDisplay: PropTypes.string.isRequired,
+        minutes: PropTypes.string.isRequired,
+        minutesDisplay: PropTypes.string.isRequired,
+        pm: PropTypes.string.isRequired,
+        pmFormat: PropTypes.string.isRequired,
+        separator: PropTypes.string.isRequired
+      }),
+      value: PropTypes.object
+    };
 
-  static defaultProps = {
-    active: false,
-    format: '24hr',
-    value: new Date()
-  };
+    static defaultProps = {
+      active: false,
+      format: '24hr',
+      value: new Date()
+    };
 
-  state = {
-    display: 'hours',
-    displayTime: this.props.value
-  };
+    state = {
+      display: 'hours',
+      displayTime: this.props.value
+    };
 
-  componentDidUpdate (prevProps) {
-    if (!prevProps.active && this.props.active) {
-      setTimeout(this.refs.clock.handleCalculateShape, 1000);
+    componentDidUpdate (prevProps) {
+      if (!prevProps.active && this.props.active) {
+        setTimeout(this.refs.clock.handleCalculateShape, 1000);
+      }
     }
-  }
 
-  handleClockChange = (value) => {
-    this.setState({displayTime: value});
-  };
+    handleClockChange = (value) => {
+      this.setState({displayTime: value});
+    };
 
-  handleSelect = (event) => {
-    this.props.onSelect(this.state.displayTime, event);
-  };
+    handleSelect = (event) => {
+      this.props.onSelect(this.state.displayTime, event);
+    };
 
-  toggleTimeMode = () => {
-    this.setState({displayTime: time.toggleTimeMode(this.state.displayTime)});
-  };
+    toggleTimeMode = () => {
+      this.setState({displayTime: time.toggleTimeMode(this.state.displayTime)});
+    };
 
-  handleHandMoved = () => {
-    if (this.state.display === 'hours') this.setState({display: 'minutes'});
-  };
+    handleHandMoved = () => {
+      if (this.state.display === 'hours') this.setState({display: 'minutes'});
+    };
 
-  switchDisplay = (display) => {
-    this.setState({display});
-  };
+    switchDisplay = (display) => {
+      this.setState({display});
+    };
 
-  actions = [
-    { label: 'Cancel', className: this.props.theme.button, onClick: this.props.onDismiss },
-    { label: 'Ok', className: this.props.theme.button, onClick: this.handleSelect }
-  ];
+    actions = [
+      { label: 'Cancel', className: this.props.theme.button, onClick: this.props.onDismiss },
+      { label: 'Ok', className: this.props.theme.button, onClick: this.handleSelect }
+    ];
 
-  formatHours () {
-    if (this.props.format === 'ampm') {
-      return this.state.displayTime.getHours() % 12 || 12;
-    } else {
-      return this.state.displayTime.getHours();
+    formatHours () {
+      if (this.props.format === 'ampm') {
+        return this.state.displayTime.getHours() % 12 || 12;
+      } else {
+        return this.state.displayTime.getHours();
+      }
     }
-  }
 
-  renderAMPMLabels () {
-    const { theme } = this.props;
-    if (this.props.format === 'ampm') {
+    renderAMPMLabels () {
+      const { theme } = this.props;
+      if (this.props.format === 'ampm') {
+        return (
+          <div className={theme.ampm}>
+            <span className={theme.am} onClick={this.toggleTimeMode}>AM</span>
+            <span className={theme.pm} onClick={this.toggleTimeMode}>PM</span>
+          </div>
+        );
+      }
+    }
+
+    render () {
+      const { theme } = this.props;
+      const display = `${this.state.display}Display`;
+      const format = `${time.getTimeMode(this.state.displayTime)}Format`;
+      const className = classnames([theme.dialog, theme[display], theme[format]], this.props.className);
       return (
-        <div className={theme.ampm}>
-          <span className={theme.am} onClick={this.toggleTimeMode}>AM</span>
-          <span className={theme.pm} onClick={this.toggleTimeMode}>PM</span>
-        </div>
+        <Dialog active={this.props.active} className={className} actions={this.actions}>
+          <header className={theme.header}>
+            <span className={theme.hours} onClick={this.switchDisplay.bind(this, 'hours')}>
+              {('0' + this.formatHours()).slice(-2)}
+            </span>
+            <span className={theme.separator}>:</span>
+            <span className={theme.minutes} onClick={this.switchDisplay.bind(this, 'minutes')}>
+              {('0' + this.state.displayTime.getMinutes()).slice(-2)}
+            </span>
+            {this.renderAMPMLabels()}
+          </header>
+          <Clock
+            ref='clock'
+            display={this.state.display}
+            format={this.props.format}
+            onChange={this.handleClockChange}
+            onHandMoved={this.handleHandMoved}
+            theme={this.props.theme}
+            time={this.state.displayTime}
+          />
+        </Dialog>
       );
     }
   }
 
-  render () {
-    const { theme } = this.props;
-    const display = `${this.state.display}Display`;
-    const format = `${time.getTimeMode(this.state.displayTime)}Format`;
-    const className = classnames([theme.dialog, theme[display], theme[format]], this.props.className);
-    return (
-      <Dialog active={this.props.active} className={className} actions={this.actions}>
-        <header className={theme.header}>
-          <span className={theme.hours} onClick={this.switchDisplay.bind(this, 'hours')}>
-            {('0' + this.formatHours()).slice(-2)}
-          </span>
-          <span className={theme.separator}>:</span>
-          <span className={theme.minutes} onClick={this.switchDisplay.bind(this, 'minutes')}>
-            {('0' + this.state.displayTime.getMinutes()).slice(-2)}
-          </span>
-          {this.renderAMPMLabels()}
-        </header>
-        <Clock
-          ref='clock'
-          display={this.state.display}
-          format={this.props.format}
-          onChange={this.handleClockChange}
-          onHandMoved={this.handleHandMoved}
-          theme={this.props.theme}
-          time={this.state.displayTime}
-        />
-      </Dialog>
-    );
-  }
-}
+  return TimePickerDialog;
+};
 
-export default TimePickerDialog;
+export default factory;
diff --git a/components/time_picker/index.js b/components/time_picker/index.js
index 57f9fc91c..c9ec8b8f7 100644
--- a/components/time_picker/index.js
+++ b/components/time_picker/index.js
@@ -1 +1,12 @@
-export default from './TimePicker';
+import { themr } from 'react-css-themr';
+import { TIME_PICKER } from '../identifiers.js';
+import { timePickerFactory } from './TimePicker.js';
+import timePickerDialogFactory from './TimePickerDialog.js';
+import Dialog from '../dialog';
+import Input from '../input';
+import theme from './theme.scss';
+
+const TimePickerDialog = timePickerDialogFactory(Dialog);
+const ThemedTimePicker = themr(TIME_PICKER, theme)(timePickerFactory(TimePickerDialog, Input));
+export default ThemedTimePicker;
+export { ThemedTimePicker as TimePicker };
diff --git a/components/time_picker/readme.md b/components/time_picker/readme.md
index 59987a238..84c3bc126 100644
--- a/components/time_picker/readme.md
+++ b/components/time_picker/readme.md
@@ -5,7 +5,6 @@ A [dialog picker](https://www.google.com/design/spec/components/pickers.html#pic
 <!-- example -->
 ```jsx
 import TimePicker from 'react-toolbox/lib/time_picker';
-import theme from 'react-toolbox/lib/time_picker/theme'
 
 let time = new Date();
 time.setHours(17);
@@ -24,13 +23,14 @@ class TimePickerTest extends React.Component {
         label='Finishing time'
         onChange={this.handleChange}
         value={this.state.time}
-        theme={theme}
       />
     );
   }
 }
 ```
 
+If you want to provide a theme via context, the component key is `RTTimePicker`.
+
 ## Properties
 
 | Name            | Type        | Default     | Description|
@@ -43,9 +43,7 @@ class TimePickerTest extends React.Component {
 | `onChange`      | `Function`  |             | Callback called when the picker value is changed.|
 | `value`         | `Date`      |             | Datetime object with currrently selected time. |
 
-## Theming
-
-You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxTimePicker`, it should implement the following interface:
+## Theme
 
 | Name     | Description|
 |:---------|:-----------|
diff --git a/spec/root.js b/spec/root.js
index b2925470f..a4121d853 100644
--- a/spec/root.js
+++ b/spec/root.js
@@ -1,7 +1,6 @@
 /* global VERSION */
+import '../components/commons.scss';
 import React from 'react';
-import { ThemeProvider } from 'react-css-themr';
-import theme from './theme';
 import AppBar from '../components/app_bar';
 import Autocomplete from './components/autocomplete';
 import Avatar from './components/avatar';
@@ -30,43 +29,41 @@ import Tooltip from './components/tooltip';
 import style from './style';
 
 const Root = () => (
-  <ThemeProvider theme={theme}>
-    <div className={style.app}>
-      <AppBar className={style.appbar} fixed flat>
-        <h1>React Toolbox <small>Spec {VERSION}</small></h1>
-        <ButtonToolbox
-          accent
-          className={style.github}
-          icon='web'
-          floating
-          onClick={() => {window.href = 'http://react-toolbox/';}}
-        />
-      </AppBar>
-      <Autocomplete />
-      <Avatar />
-      <Button />
-      <Card />
-      <Checkbox />
-      <Chip />
-      <Dialog />
-      <Drawer />
-      <Dropdown />
-      <IconMenu />
-      <Input />
-      <Layout />
-      <List />
-      <Menu />
-      <Pickers />
-      <Progress />
-      <Radio />
-      <Slider />
-      <Snackbar />
-      <Switch />
-      <Table />
-      <Tabs />
-      <Tooltip />
-    </div>
-  </ThemeProvider>
+  <div className={style.app}>
+    <AppBar className={style.appbar} fixed flat>
+      <h1>React Toolbox <small>Spec {VERSION}</small></h1>
+      <ButtonToolbox
+        accent
+        className={style.github}
+        icon='web'
+        floating
+        onClick={() => {window.href = 'http://react-toolbox/';}}
+      />
+    </AppBar>
+    <Autocomplete />
+    <Avatar />
+    <Button />
+    <Card />
+    <Checkbox />
+    <Chip />
+    <Dialog />
+    <Drawer />
+    <Dropdown />
+    <IconMenu />
+    <Input />
+    <Layout />
+    <List />
+    <Menu />
+    <Pickers />
+    <Progress />
+    <Radio />
+    <Slider />
+    <Snackbar />
+    <Switch />
+    <Table />
+    <Tabs />
+    <Tooltip />
+  </div>
 );
 
 export default Root;
diff --git a/spec/theme.js b/spec/theme.js
deleted file mode 100644
index 908b37e9c..000000000
--- a/spec/theme.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import '../components/commons.scss';
-
-import ToolboxTimePicker from '../components/time_picker/theme.scss';
-
-export default {
-  ToolboxTimePicker
-};

From f39dfb44d03b4d83e9726183f8ba66dcad33e960 Mon Sep 17 00:00:00 2001
From: John Bicknell <john@geckotec.co.uk>
Date: Thu, 2 Jun 2016 18:26:04 +0100
Subject: [PATCH 0605/1024] Use alternative to scrollX where not available (IE)

---
 components/utils/events.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/utils/events.js b/components/utils/events.js
index 52d4b8d4b..d0b017ef8 100644
--- a/components/utils/events.js
+++ b/components/utils/events.js
@@ -1,15 +1,15 @@
 export default {
   getMousePosition (event) {
     return {
-      x: event.pageX - window.scrollX,
-      y: event.pageY - window.scrollY
+      x: event.pageX - (window.scrollX || window.pageXOffset),
+      y: event.pageY - (window.scrollY || window.pageXOffset)
     };
   },
 
   getTouchPosition (event) {
     return {
-      x: event.touches[0].pageX - window.scrollX,
-      y: event.touches[0].pageY - window.scrollY
+      x: event.touches[0].pageX - (window.scrollX || window.pageXOffset),
+      y: event.touches[0].pageY - (window.scrollY || window.pageXOffset)
     };
   },
 

From f0176107097c9220cc19ba72cbe78d9b2f4f3dec Mon Sep 17 00:00:00 2001
From: John Bicknell <john@geckotec.co.uk>
Date: Thu, 2 Jun 2016 18:40:38 +0100
Subject: [PATCH 0606/1024] Y for X

---
 components/utils/events.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/utils/events.js b/components/utils/events.js
index d0b017ef8..abbea4b1f 100644
--- a/components/utils/events.js
+++ b/components/utils/events.js
@@ -2,14 +2,14 @@ export default {
   getMousePosition (event) {
     return {
       x: event.pageX - (window.scrollX || window.pageXOffset),
-      y: event.pageY - (window.scrollY || window.pageXOffset)
+      y: event.pageY - (window.scrollY || window.pageYOffset)
     };
   },
 
   getTouchPosition (event) {
     return {
       x: event.touches[0].pageX - (window.scrollX || window.pageXOffset),
-      y: event.touches[0].pageY - (window.scrollY || window.pageXOffset)
+      y: event.touches[0].pageY - (window.scrollY || window.pageYOffset)
     };
   },
 

From 19566ddb314fad0fcfaac9b85401acadde3a6250 Mon Sep 17 00:00:00 2001
From: yuristrelets <yuristrelets@gmail.com>
Date: Fri, 3 Jun 2016 17:06:52 +0300
Subject: [PATCH 0607/1024] fix receive props for Autocomplete component

For multiple=false components value is broken, because it isn't extracted from Map.
---
 components/autocomplete/Autocomplete.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index 479f864b7..1aa7f341c 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -45,7 +45,9 @@ class Autocomplete extends React.Component {
 
  componentWillReceiveProps (nextProps) {
    if (!this.props.multiple) {
-     this.setState({query: nextProps.value});
+     this.setState({
+       query: this.query(nextProps.value)
+     });
    }
  }
 

From 115e8390866d52e94c8c625040f45259d9559fad Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Fri, 3 Jun 2016 22:24:26 +0200
Subject: [PATCH 0608/1024] Update docs

---
 README.md                                     | 121 +++++++++++++----
 docs/app/components/layout/install/install.md | 125 +++++++++++++-----
 docs/app/index.js                             |  18 +--
 3 files changed, 195 insertions(+), 69 deletions(-)

diff --git a/README.md b/README.md
index 6413ab242..6849796b7 100644
--- a/README.md
+++ b/README.md
@@ -12,64 +12,129 @@ React Toolbox is a set of [React](http://facebook.github.io/react/) components t
 
 React Toolbox can be installed as an [npm package](https://www.npmjs.org/package/react-toolbox):
 
-```
+```bash
 npm install --save react-toolbox
 ```
 
-## Usage
+## Prerequisites
+
+React Toolbox uses [CSS Modules](https://github.com/css-modules/css-modules) and [SASS](http://sass-lang.com/) to provide default stylesheets. If you want to import components bundled with stylesheets, your module bundler should be able to require SASS modules. You can use whatever module bundler you want as long as it can require SASS files from `node_modules`, but we recommend [webpack](). If you are experiencing require errors, make sure your configuration satisfies the requirements.
+
+Of course this is a set of React components so you should be familiar with [React](). If you are willing to customize your components via themes, you may want to take a look to [react-css-themr]() which is used to make styling easier.
 
-Although there are other ways to use React Toolbox, the recommended way is to create a webpack workflow with [babel-loader](https://github.com/babel/babel-loader), [css-loader](https://github.com/webpack/css-loader) and [sass-loader](https://github.com/jtangelder/sass-loader). A good starting point is [React Hot Webpack Boilerplate](https://github.com/gaearon/react-hot-boilerplate).
+## Basic usage
 
-Once you have the workflow ready, you can just require and use the components:
+The minimal example requires a `Button` bundled with styles:
 
-```jsx
+```
 import React from 'react';
-import Button from 'react-toolbox/lib/button';
+import ReactDOM from 'react-dom';
+import { Button } from 'react-toolbox/lib/button';
 
-const CustomButton = () => (
-  <Button label="Hello world" raised accent />
+ReactDOM.render(
+  <Button label="Hello World!" />,
+  document.getElementById('app')
 );
-
-export default CustomButton;
 ```
 
-The previous code creates a React button component based on React Toolbox button. It's important to notice that requiring a module from the exposed root of the package will also import the **SASS** of the component.
+Take into account that any required style will be bundled in the final CSS so you probably would want to require components one by one instead of requiring directly from the root index.
 
-## Roboto Font and Material Design Icons
+## Importing components
 
-React Toolbox assumes that you are importing [Roboto Font](https://www.google.com/fonts/specimen/Roboto) and [Material Design Icons](https://www.google.com/design/icons/).
+First let's take a look on how the components are structured in the project. The [components](https://github.com/react-toolbox/react-toolbox/tree/dev/components) folder contains a folder for each component or set of related components. For example, the `app_bar`:
 
-In order to import the fonts for you, we'd need to include them in the CSS which is considered a bad practice. If you are not including them in your app, go to the linked sites and follow the instructions.
+```
+ |- /app_bar
+ |---- AppBar.js
+ |---- _config.scss
+ |---- index.js
+ |---- readme.md
+ |---- theme.scss
+```
+
+There you can see a component definition file, a readme, an index file, a theme stylesheet and a configuration file holding the SASS variables to configure the stylesheet. Depending on whether you want the styles to be directly bundled or not, you can import components in two different ways:
+
+- **Bundled component**: the component requires the corresponding `theme.scss` for you so it will be included in the final bundle. Also, the local classnames will be injected in the component automatically. To import a bundled component you have to require from the `index.js` file. For example: `import {AppBar} from 'react-toolbox/lib/app_bar'`.
+
+- **Raw component**: the component is required alone, without any CSS. In this case you are responsible from providing a theme. To import a raw component you have to require directly from the component definition. For example: `import AppBar from 'react-toolbox/lib/app_bar/AppBar'`.
 
 ## Customization
 
-Since React Toolbox styles are written in CSS, it's pretty easy to customize your components. We have several ways:
+Since you can import raw components and then inject a theme via props or context, you can use whatever you want to provide styles. We give you some SASS stylesheets but you can configure them at import time or even port them to CSS Next or whatever. Furthermore, you can provide extra theming classes that will be mixed in the component so you can even target DOM elements in subcomponents from a parent. Let's see some examples.
 
-### Via React Toolbox Loader
+### Customization via SASS Loader
 
-Thanks to the power of SASS, all components in React Toolbox are configured from a variables file. The best way to customize your build is to create a custom configuration SASS file overriding configuration variables like colors or sizes.
+Every component in React Toolbox has a `_config.scss` partial and [some parent partials](https://github.com/react-toolbox/react-toolbox/tree/dev/components) defining configuration variables that are used in each `theme.scss`. Since all variables are defined as `!default`, you can prepend variable overrides with a custom `theme.scss` file to each SASS stylesheet required in the project.
 
-With [toolbox-loader](https://github.com/react-toolbox/toolbox-loader) you can tell webpack where your configuration file is and it will prepend your config to each SASS build. This will result in your customized CSS for React Toolbox Components. For now you can browse the configuration files and override what you want.
+If you are importing bundled components, you can use something like [sass-loader](https://github.com/jtangelder/sass-loader) to prepend your custom configuration files to every sass stylesheet by using the `data` option. For example, in your webpack config:
 
-### Via `className` property
+```js
+sassLoader: {
+  data: '@import "' + path.resolve(__dirname, 'theme/_theme.scss') + '";'
+}
+```
+
+### Customization via Theme Property
 
-Generally each component will have a `className` prop so you can pass the class name you want to keep in the root node of the resulting markup. All markup is styled with the lowest specificity level so you can just nest one level in your CSS and the result will be applied. Consider this example:
+Every component in React Toolbox have a **classname API** that can be browsed from the documentation. Also, they accept a `theme` property intended to provide a [CSS Module import object](https://github.com/css-modules/css-modules) that will be used by the component to assign local classnames to its DOM nodes.
 
-```jsx
-const CustomButton = () => (
-  <Button className='customized' label='Custom button' />
+React Toolbox uses [react-css-themr](github.com/javivelasco/react-css-themr) to make theming easier. Feel free to take a look to the documentation to learn how you can use themes for the components. For example, imagine you want to create a green success button whose icons are red:
+
+```
+// SuccessButton.js
+import { Button } from 'react-toolbox/lib/button';
+import successTheme from './success-theme.scss';
+
+const SuccessButton = (props) => (
+  <Button theme={successButtonTheme} {...props} />
 );
+
+export default SuccessButton;
 ```
 
-If you browse the resulting markup you will see *data attributes* like `data-react-toolbox="label"` so you can avoid directly styling tag names. You can now write your CSS:
+```
+// success-theme.scss
+.primary {
+  background: green;
+}
 
-```css
-.customized > [data-react-toolbox="label"] {
-  color: green;
-  font-weight: bold;
+.icon {
+  color: red
 }
 ```
 
+The given classes will be added to the component and, since they are defined *after* the original CSS they would take priority. Note that you can also boost priority by assigning a `className`. Check more examples at [react-css-themr](www.github.com/javivelasco/react-css-themr) documentation.
+
+### Customization via Theme Context
+
+Alternatively, you can provide CSS Modules object to React Toolbox components using context. This is useful in case you want to create a custom theme without creating wrappers for each raw component. To use this customization you need to install react-css-themr and then use the **theme keys** specified in each component documentation. For example:
+
+```
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { ThemeProvider } from 'react-css-themr';
+import Button from 'react-toolbox/lib/button/Button';
+import App from './App.js';
+
+const theme = {
+  RTButton: require('./theme/button-style')
+};
+
+const ThemedApp = (children) => (
+  <ThemeProvider theme={theme}>
+    <App />
+  </ThemeProvider>
+)
+
+ReactDOM.render(<ThemedApp />, document.getElementById('app'));
+```
+
+## Roboto Font and Material Design Icons
+
+React Toolbox assumes that you are importing [Roboto Font](https://www.google.com/fonts/specimen/Roboto) and [Material Design Icons](https://www.google.com/design/icons/).
+
+In order to import the fonts for you, we'd need to include them in the CSS which is considered a bad practice. If you are not including them in your app, go to the linked sites and follow the instructions.
+
 ## TypeScript
 
 A TypeScript definition file `react-toolbox.d.ts` is available. It is referenced in `package.json` and should be picked up by the TypeScript compiler when importing from the npm package.
diff --git a/docs/app/components/layout/install/install.md b/docs/app/components/layout/install/install.md
index c3fde6bde..bfd2c244e 100644
--- a/docs/app/components/layout/install/install.md
+++ b/docs/app/components/layout/install/install.md
@@ -1,65 +1,130 @@
 # Installation, usage and customization
 
-React Toolbox is a set of [React](http://facebook.github.io/react/) components that implement [Google's Material Design specification](https://www.google.com/design/spec/material-design/introduction.html). It's powered by [CSS Modules](https://github.com/css-modules/css-modules) and harmoniously integrates with your [Webpack](http://webpack.github.io/) workflow. You can take a tour through our documentation website and try the components live!
+React Toolbox is a set of [React](http://facebook.github.io/react/) components that implement [Google's Material Design specification](https://www.google.com/design/spec/material-design/introduction.html). It's powered by [CSS Modules](https://github.com/css-modules/css-modules) and harmoniously integrates with your [webpack](http://webpack.github.io/) workflow. You can take a tour through our documentation website and try the components live!
 
 ## Installation
 
-React Toolbox can be installed as an [npm package](https://www.npmjs.org/package/react-toolbox);
+React Toolbox can be installed as an [npm package](https://www.npmjs.org/package/react-toolbox):
 
-```
+```bash
 npm install --save react-toolbox
 ```
 
-## Usage
+## Prerequisites
+
+React Toolbox uses [CSS Modules](https://github.com/css-modules/css-modules) and [SASS](http://sass-lang.com/) to provide default stylesheets. If you want to import components bundled with stylesheets, your module bundler should be able to require SASS modules. You can use whatever module bundler you want as long as it can require SASS files from `node_modules`, but we recommend [webpack](). If you are experiencing require errors, make sure your configuration satisfies the requirements.
+
+Of course this is a set of React components so you should be familiar with [React](). If you are willing to customize your components via themes, you may want to take a look to [react-css-themr]() which is used to make styling easier.
 
-Although there are other ways to use React Toolbox, the recommended way is to create a Webpack workflow with [Babel Loader](https://github.com/babel/babel-loader), [CSS Loader](https://github.com/webpack/css-loader) and [SASS Loader](https://github.com/jtangelder/sass-loader). A good starting point is [React Hot Webpack Boilerplate](https://github.com/gaearon/react-hot-boilerplate).
+## Basic usage
 
-Once you have the workflow ready, you can just require and use the components:
+The minimal example requires a `Button` bundled with styles:
 
-```jsx
+```
 import React from 'react';
-import Button from 'react-toolbox/lib/button';
+import ReactDOM from 'react-dom';
+import { Button } from 'react-toolbox/lib/button';
 
-const CustomButton = () => (
-  <Button label="Hello world" raised accent />
+ReactDOM.render(
+  <Button label="Hello World!" />,
+  document.getElementById('app')
 );
-
-export default CustomButton;
 ```
 
-The previous code creates a React button component based on React toolbox button. It's important to notice that requiring a module from the exposed root of the package will import the **SASS** of the component.
+Take into account that any required style will be bundled in the final CSS so you probably would want to require components one by one instead of requiring directly from the root index.
 
-## Roboto Font and Material Design Icons
+## Importing components
 
-React Toolbox assumes that you are importing [Roboto Font](https://www.google.com/fonts/specimen/Roboto) and [Material Design Icons](https://www.google.com/design/icons/).
+First let's take a look on how the components are structured in the project. The [components](https://github.com/react-toolbox/react-toolbox/tree/dev/components) folder contains a folder for each component or set of related components. For example, the `app_bar`:
 
-In order to import the fonts for you, we'd need to include them in the CSS which is considered a bad practice. If you are not including them in your app to the linked sites and follow the instructions.
+```
+ |- /app_bar
+ |---- AppBar.js
+ |---- _config.scss
+ |---- index.js
+ |---- readme.md
+ |---- theme.scss
+```
+
+There you can see a component definition file, a readme, an index file, a theme stylesheet and a configuration file holding the SASS variables to configure the stylesheet. Depending on whether you want the styles to be directly bundled or not, you can import components in two different ways:
+
+- **Bundled component**: the component requires the corresponding `theme.scss` for you so it will be included in the final bundle. Also, the local classnames will be injected in the component automatically. To import a bundled component you have to require from the `index.js` file. For example: `import {AppBar} from 'react-toolbox/lib/app_bar'`.
+
+- **Raw component**: the component is required alone, without any CSS. In this case you are responsible from providing a theme. To import a raw component you have to require directly from the component definition. For example: `import AppBar from 'react-toolbox/lib/app_bar/AppBar'`.
 
 ## Customization
 
-Since React Toolbox styles are written in CSS it's pretty easy to customize your components. We have several ways:
+Since you can import raw components and then inject a theme via props or context, you can use whatever you want to provide styles. We give you some SASS stylesheets but you can configure them at import time or even port them to CSS Next or whatever. Furthermore, you can provide extra theming classes that will be mixed in the component so you can even target DOM elements in subcomponents from a parent. Let's see some examples.
+
+### Customization via SASS Loader
 
-### Via React Toolbox Loader
+Every component in React Toolbox has a `_config.scss` partial and [some parent partials](https://github.com/react-toolbox/react-toolbox/tree/dev/components) defining configuration variables that are used in each `theme.scss`. Since all variables are defined as `!default`, you can prepend variable overrides with a custom `theme.scss` file to each SASS stylesheet required in the project.
 
-Thanks to the power of SASS, all components in React Toolbox are configured from a variables file. The best way to customize your build is to create a custom configuration SASS file overriding configuration variables like colors or sizes.
+If you are importing bundled components, you can use something like [sass-loader](https://github.com/jtangelder/sass-loader) to prepend your custom configuration files to every sass stylesheet by using the `data` option. For example, in your webpack config:
 
-With [toolbox-loader](https://github.com/react-toolbox/toolbox-loader) you can tell webpack where your configuration file is and it will prepend your config to each SASS build. This will result in your customized CSS for React Toolbox Components. For now you can browse the configuration files and override what you want.
+```js
+sassLoader: {
+  data: '@import "' + path.resolve(__dirname, 'theme/_theme.scss') + '";'
+}
+```
 
-### Via `className` property
+### Customization via Theme Property
 
-Generally each component will have a `className` prop so that you can apply a class name to the root node of the resulting markup. All markup is styled with the lowest specificity level so you can just nest one level in your CSS and the result will be applied. Consider this example:
+Every component in React Toolbox have a **classname API** that can be browsed from the documentation. Also, they accept a `theme` property intended to provide a [CSS Module import object](https://github.com/css-modules/css-modules) that will be used by the component to assign local classnames to its DOM nodes.
 
-```jsx
-const CustomButton = () => (
-  <Button className='customized' label='Custom button' />
+React Toolbox uses [react-css-themr](github.com/javivelasco/react-css-themr) to make theming easier. Feel free to take a look to the documentation to learn how you can use themes for the components. For example, imagine you want to create a green success button whose icons are red:
+
+```
+// SuccessButton.js
+import { Button } from 'react-toolbox/lib/button';
+import successTheme from './success-theme.scss';
+
+const SuccessButton = (props) => (
+  <Button theme={successButtonTheme} {...props} />
 );
+
+export default SuccessButton;
 ```
 
-If you browse the resulting markup you will see *data attributes* like `data-role="label"` which can be used to style components without using tag name selectors. You can now write your CSS:
+```
+// success-theme.scss
+.primary {
+  background: green;
+}
 
-```css
-.customized > [data-react-toolbox="label"] {
-  color: green;
-  font-weight: bold;
+.icon {
+  color: red
 }
 ```
+
+The given classes will be added to the component and, since they are defined *after* the original CSS they would take priority. Note that you can also boost priority by assigning a `className`. Check more examples at [react-css-themr](www.github.com/javivelasco/react-css-themr) documentation.
+
+### Customization via Theme Context
+
+Alternatively, you can provide CSS Modules object to React Toolbox components using context. This is useful in case you want to create a custom theme without creating wrappers for each raw component. To use this customization you need to install react-css-themr and then use the **theme keys** specified in each component documentation. For example:
+
+```
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { ThemeProvider } from 'react-css-themr';
+import Button from 'react-toolbox/lib/button/Button';
+import App from './App.js';
+
+const theme = {
+  RTButton: require('./theme/button-style')
+};
+
+const ThemedApp = (children) => (
+  <ThemeProvider theme={theme}>
+    <App />
+  </ThemeProvider>
+)
+
+ReactDOM.render(<ThemedApp />, document.getElementById('app'));
+```
+
+## Roboto Font and Material Design Icons
+
+React Toolbox assumes that you are importing [Roboto Font](https://www.google.com/fonts/specimen/Roboto) and [Material Design Icons](https://www.google.com/design/icons/).
+
+In order to import the fonts for you, we'd need to include them in the CSS which is considered a bad practice. If you are not including them in your app, go to the linked sites and follow the instructions.
diff --git a/docs/app/index.js b/docs/app/index.js
index 8a4a14c65..1b5ecc877 100644
--- a/docs/app/index.js
+++ b/docs/app/index.js
@@ -1,21 +1,17 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { ThemeProvider } from 'react-css-themr';
 import { Router, Route, useRouterHistory } from 'react-router';
 import createHashHistory from 'history/lib/createHashHistory';
-import theme from './theme/theme.js';
 import Home from './components/layout/home';
 import Install from './components/layout/install';
 import Main from './components/layout/main';
 
 ReactDOM.render((
-  <ThemeProvider theme={theme}>
-    <Router history={useRouterHistory(createHashHistory)({ queryKey: false })}>
-      <Route path="/" component={Home} />
-      <Route path="/install" component={Install} />
-      <Route path="/components" component={Main}>
-        <Route path=":component" />
-      </Route>
-    </Router>
-  </ThemeProvider>
+  <Router history={useRouterHistory(createHashHistory)({ queryKey: false })}>
+    <Route path="/" component={Home} />
+    <Route path="/install" component={Install} />
+    <Route path="/components" component={Main}>
+      <Route path=":component" />
+    </Route>
+  </Router>
 ), document.getElementById('app'));

From 7b806214a250108a7d6e8a9f2d431f68fce84399 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Fri, 3 Jun 2016 22:29:21 +0200
Subject: [PATCH 0609/1024] Add lib folder

---
 .gitignore                              |   1 -
 lib/_base.scss                          |   3 +
 lib/_colors.scss                        | 301 ++++++++++++++++
 lib/_globals.scss                       |  81 +++++
 lib/_mixins.scss                        | 278 +++++++++++++++
 lib/animations/index.js                 |  29 ++
 lib/animations/slide-left.scss          |  26 ++
 lib/animations/slide-right.scss         |  29 ++
 lib/animations/zoom-in.scss             |  31 ++
 lib/animations/zoom-out.scss            |  31 ++
 lib/app_bar/AppBar.js                   |  61 ++++
 lib/app_bar/_config.scss                |   6 +
 lib/app_bar/index.js                    |  23 ++
 lib/app_bar/theme.scss                  |  28 ++
 lib/autocomplete/Autocomplete.js        | 440 ++++++++++++++++++++++++
 lib/autocomplete/_config.scss           |   7 +
 lib/autocomplete/index.js               |  32 ++
 lib/autocomplete/theme.scss             |  83 +++++
 lib/avatar/Avatar.js                    |  70 ++++
 lib/avatar/_config.scss                 |   4 +
 lib/avatar/index.js                     |  28 ++
 lib/avatar/theme.scss                   |  42 +++
 lib/button/Button.js                    | 165 +++++++++
 lib/button/IconButton.js                | 136 ++++++++
 lib/button/__test__/index.spec.js       |  66 ++++
 lib/button/_config.scss                 |  21 ++
 lib/button/index.js                     |  37 ++
 lib/button/theme.scss                   | 165 +++++++++
 lib/card/Card.js                        |  56 +++
 lib/card/CardActions.js                 |  49 +++
 lib/card/CardMedia.js                   |  76 ++++
 lib/card/CardText.js                    |  53 +++
 lib/card/CardTitle.js                   |  94 +++++
 lib/card/_config.scss                   |   7 +
 lib/card/index.js                       |  44 +++
 lib/card/theme.scss                     | 120 +++++++
 lib/checkbox/Check.js                   |  49 +++
 lib/checkbox/Checkbox.js                | 144 ++++++++
 lib/checkbox/_config.scss               |  12 +
 lib/checkbox/index.js                   |  32 ++
 lib/checkbox/theme.scss                 | 118 +++++++
 lib/chip/Chip.js                        |  98 ++++++
 lib/chip/_config.scss                   |  17 +
 lib/chip/index.js                       |  28 ++
 lib/chip/theme.scss                     |  66 ++++
 lib/commons.scss                        |  88 +++++
 lib/date_picker/Calendar.js             | 178 ++++++++++
 lib/date_picker/CalendarDay.js          |  91 +++++
 lib/date_picker/CalendarMonth.js        | 126 +++++++
 lib/date_picker/DatePicker.js           | 157 +++++++++
 lib/date_picker/DatePickerDialog.js     | 157 +++++++++
 lib/date_picker/_config.scss            |  30 ++
 lib/date_picker/index.js                |  51 +++
 lib/date_picker/theme.scss              | 153 ++++++++
 lib/dialog/Dialog.js                    | 113 ++++++
 lib/dialog/_config.scss                 |   6 +
 lib/dialog/index.js                     |  32 ++
 lib/dialog/theme.scss                   |  73 ++++
 lib/drawer/Drawer.js                    |  85 +++++
 lib/drawer/_config.scss                 |   4 +
 lib/drawer/index.js                     |  26 ++
 lib/drawer/theme.scss                   |  41 +++
 lib/dropdown/Dropdown.js                | 261 ++++++++++++++
 lib/dropdown/_config.scss               |   6 +
 lib/dropdown/index.js                   |  26 ++
 lib/dropdown/theme.scss                 | 129 +++++++
 lib/font_icon/FontIcon.js               |  51 +++
 lib/font_icon/index.js                  |  15 +
 lib/form/Form.js                        | 151 ++++++++
 lib/form/index.js                       |  55 +++
 lib/hoc/ActivableRenderer.js            | 108 ++++++
 lib/hoc/Portal.js                       | 145 ++++++++
 lib/identifiers.js                      |  30 ++
 lib/index.js                            | 206 +++++++++++
 lib/input/Input.js                      | 202 +++++++++++
 lib/input/_config.scss                  |  20 ++
 lib/input/index.js                      |  28 ++
 lib/input/theme.scss                    | 150 ++++++++
 lib/layout/Layout.js                    |  70 ++++
 lib/layout/NavDrawer.js                 |  90 +++++
 lib/layout/Panel.js                     |  55 +++
 lib/layout/Sidebar.js                   |  69 ++++
 lib/layout/_config.scss                 |  18 +
 lib/layout/_mixins.scss                 |  29 ++
 lib/layout/index.js                     |  34 ++
 lib/layout/theme.scss                   | 309 +++++++++++++++++
 lib/link/Link.js                        |  83 +++++
 lib/link/index.js                       |  23 ++
 lib/link/theme.scss                     |  35 ++
 lib/list/List.js                        |  96 ++++++
 lib/list/ListCheckbox.js                |  93 +++++
 lib/list/ListDivider.js                 |  37 ++
 lib/list/ListItem.js                    | 149 ++++++++
 lib/list/ListItemAction.js              |  44 +++
 lib/list/ListItemActions.js             |  56 +++
 lib/list/ListItemContent.js             | 116 +++++++
 lib/list/ListItemLayout.js              | 104 ++++++
 lib/list/ListItemText.js                |  59 ++++
 lib/list/ListSubHeader.js               |  44 +++
 lib/list/_config.scss                   |  18 +
 lib/list/index.js                       |  69 ++++
 lib/list/theme.scss                     | 157 +++++++++
 lib/menu/IconMenu.js                    | 132 +++++++
 lib/menu/Menu.js                        | 310 +++++++++++++++++
 lib/menu/MenuDivider.js                 |  30 ++
 lib/menu/MenuItem.js                    | 137 ++++++++
 lib/menu/_config.scss                   |  16 +
 lib/menu/index.js                       |  43 +++
 lib/menu/theme.scss                     | 152 ++++++++
 lib/navigation/Navigation.js            |  86 +++++
 lib/navigation/_config.scss             |   2 +
 lib/navigation/index.js                 |  26 ++
 lib/navigation/theme.scss               |  24 ++
 lib/overlay/Overlay.js                  | 130 +++++++
 lib/overlay/_config.scss                |   2 +
 lib/overlay/index.js                    |  22 ++
 lib/overlay/theme.scss                  |  40 +++
 lib/progress_bar/ProgressBar.js         | 160 +++++++++
 lib/progress_bar/__test__/index.spec.js |  92 +++++
 lib/progress_bar/_config.scss           |   6 +
 lib/progress_bar/index.js               |  23 ++
 lib/progress_bar/theme.scss             | 135 ++++++++
 lib/radio/Radio.js                      |  46 +++
 lib/radio/RadioButton.js                | 147 ++++++++
 lib/radio/RadioGroup.js                 | 102 ++++++
 lib/radio/_config.scss                  |   9 +
 lib/radio/index.js                      |  36 ++
 lib/radio/theme.scss                    |  94 +++++
 lib/ripple/Ripple.js                    | 232 +++++++++++++
 lib/ripple/_config.scss                 |   3 +
 lib/ripple/index.js                     |  21 ++
 lib/ripple/theme.scss                   |  40 +++
 lib/slider/Slider.js                    | 378 ++++++++++++++++++++
 lib/slider/__tests__/index.spec.js      | 202 +++++++++++
 lib/slider/_config.scss                 |  12 +
 lib/slider/index.js                     |  26 ++
 lib/slider/theme.scss                   | 191 ++++++++++
 lib/snackbar/Snackbar.js                | 135 ++++++++
 lib/snackbar/_config.scss               |   9 +
 lib/snackbar/index.js                   |  27 ++
 lib/snackbar/theme.scss                 |  51 +++
 lib/switch/Switch.js                    | 152 ++++++++
 lib/switch/Thumb.js                     |  38 ++
 lib/switch/_config.scss                 |  22 ++
 lib/switch/index.js                     |  36 ++
 lib/switch/theme.scss                   | 121 +++++++
 lib/table/Table.js                      | 196 +++++++++++
 lib/table/TableHead.js                  |  75 ++++
 lib/table/TableRow.js                   | 148 ++++++++
 lib/table/_config.scss                  |   5 +
 lib/table/index.js                      |  38 ++
 lib/table/theme.scss                    |  54 +++
 lib/tabs/Tab.js                         | 109 ++++++
 lib/tabs/TabContent.js                  |  72 ++++
 lib/tabs/Tabs.js                        | 194 +++++++++++
 lib/tabs/__tests__/index.spec.js        | 100 ++++++
 lib/tabs/_config.scss                   |  11 +
 lib/tabs/index.js                       |  32 ++
 lib/tabs/theme.scss                     |  61 ++++
 lib/time_picker/Clock.js                | 182 ++++++++++
 lib/time_picker/ClockFace.js            | 117 +++++++
 lib/time_picker/ClockHand.js            | 175 ++++++++++
 lib/time_picker/ClockHours.js           | 149 ++++++++
 lib/time_picker/ClockMinutes.js         | 105 ++++++
 lib/time_picker/TimePicker.js           | 143 ++++++++
 lib/time_picker/TimePickerDialog.js     | 182 ++++++++++
 lib/time_picker/_config.scss            |  27 ++
 lib/time_picker/index.js                |  35 ++
 lib/time_picker/theme.scss              | 166 +++++++++
 lib/tooltip/Tooltip.js                  | 140 ++++++++
 lib/tooltip/_config.scss                |   8 +
 lib/tooltip/index.js                    |  15 +
 lib/tooltip/theme.scss                  |  32 ++
 lib/utils/events.js                     |  69 ++++
 lib/utils/index.js                      |  30 ++
 lib/utils/polyfills.js                  |  11 +
 lib/utils/prefixer.js                   |  47 +++
 lib/utils/testing.js                    |  38 ++
 lib/utils/time.js                       | 210 +++++++++++
 lib/utils/utils.js                      |  64 ++++
 180 files changed, 14875 insertions(+), 1 deletion(-)
 create mode 100644 lib/_base.scss
 create mode 100644 lib/_colors.scss
 create mode 100644 lib/_globals.scss
 create mode 100644 lib/_mixins.scss
 create mode 100644 lib/animations/index.js
 create mode 100644 lib/animations/slide-left.scss
 create mode 100644 lib/animations/slide-right.scss
 create mode 100644 lib/animations/zoom-in.scss
 create mode 100644 lib/animations/zoom-out.scss
 create mode 100644 lib/app_bar/AppBar.js
 create mode 100644 lib/app_bar/_config.scss
 create mode 100644 lib/app_bar/index.js
 create mode 100644 lib/app_bar/theme.scss
 create mode 100644 lib/autocomplete/Autocomplete.js
 create mode 100644 lib/autocomplete/_config.scss
 create mode 100644 lib/autocomplete/index.js
 create mode 100644 lib/autocomplete/theme.scss
 create mode 100644 lib/avatar/Avatar.js
 create mode 100644 lib/avatar/_config.scss
 create mode 100644 lib/avatar/index.js
 create mode 100644 lib/avatar/theme.scss
 create mode 100644 lib/button/Button.js
 create mode 100644 lib/button/IconButton.js
 create mode 100644 lib/button/__test__/index.spec.js
 create mode 100644 lib/button/_config.scss
 create mode 100644 lib/button/index.js
 create mode 100644 lib/button/theme.scss
 create mode 100644 lib/card/Card.js
 create mode 100644 lib/card/CardActions.js
 create mode 100644 lib/card/CardMedia.js
 create mode 100644 lib/card/CardText.js
 create mode 100644 lib/card/CardTitle.js
 create mode 100644 lib/card/_config.scss
 create mode 100644 lib/card/index.js
 create mode 100644 lib/card/theme.scss
 create mode 100644 lib/checkbox/Check.js
 create mode 100644 lib/checkbox/Checkbox.js
 create mode 100644 lib/checkbox/_config.scss
 create mode 100644 lib/checkbox/index.js
 create mode 100644 lib/checkbox/theme.scss
 create mode 100644 lib/chip/Chip.js
 create mode 100644 lib/chip/_config.scss
 create mode 100644 lib/chip/index.js
 create mode 100644 lib/chip/theme.scss
 create mode 100644 lib/commons.scss
 create mode 100644 lib/date_picker/Calendar.js
 create mode 100644 lib/date_picker/CalendarDay.js
 create mode 100644 lib/date_picker/CalendarMonth.js
 create mode 100644 lib/date_picker/DatePicker.js
 create mode 100644 lib/date_picker/DatePickerDialog.js
 create mode 100644 lib/date_picker/_config.scss
 create mode 100644 lib/date_picker/index.js
 create mode 100644 lib/date_picker/theme.scss
 create mode 100644 lib/dialog/Dialog.js
 create mode 100644 lib/dialog/_config.scss
 create mode 100644 lib/dialog/index.js
 create mode 100644 lib/dialog/theme.scss
 create mode 100644 lib/drawer/Drawer.js
 create mode 100644 lib/drawer/_config.scss
 create mode 100644 lib/drawer/index.js
 create mode 100644 lib/drawer/theme.scss
 create mode 100644 lib/dropdown/Dropdown.js
 create mode 100644 lib/dropdown/_config.scss
 create mode 100644 lib/dropdown/index.js
 create mode 100644 lib/dropdown/theme.scss
 create mode 100644 lib/font_icon/FontIcon.js
 create mode 100644 lib/font_icon/index.js
 create mode 100644 lib/form/Form.js
 create mode 100644 lib/form/index.js
 create mode 100644 lib/hoc/ActivableRenderer.js
 create mode 100644 lib/hoc/Portal.js
 create mode 100644 lib/identifiers.js
 create mode 100644 lib/index.js
 create mode 100644 lib/input/Input.js
 create mode 100644 lib/input/_config.scss
 create mode 100644 lib/input/index.js
 create mode 100644 lib/input/theme.scss
 create mode 100644 lib/layout/Layout.js
 create mode 100644 lib/layout/NavDrawer.js
 create mode 100644 lib/layout/Panel.js
 create mode 100644 lib/layout/Sidebar.js
 create mode 100644 lib/layout/_config.scss
 create mode 100644 lib/layout/_mixins.scss
 create mode 100644 lib/layout/index.js
 create mode 100644 lib/layout/theme.scss
 create mode 100644 lib/link/Link.js
 create mode 100644 lib/link/index.js
 create mode 100644 lib/link/theme.scss
 create mode 100644 lib/list/List.js
 create mode 100644 lib/list/ListCheckbox.js
 create mode 100644 lib/list/ListDivider.js
 create mode 100644 lib/list/ListItem.js
 create mode 100644 lib/list/ListItemAction.js
 create mode 100644 lib/list/ListItemActions.js
 create mode 100644 lib/list/ListItemContent.js
 create mode 100644 lib/list/ListItemLayout.js
 create mode 100644 lib/list/ListItemText.js
 create mode 100644 lib/list/ListSubHeader.js
 create mode 100644 lib/list/_config.scss
 create mode 100644 lib/list/index.js
 create mode 100644 lib/list/theme.scss
 create mode 100644 lib/menu/IconMenu.js
 create mode 100644 lib/menu/Menu.js
 create mode 100644 lib/menu/MenuDivider.js
 create mode 100644 lib/menu/MenuItem.js
 create mode 100644 lib/menu/_config.scss
 create mode 100644 lib/menu/index.js
 create mode 100644 lib/menu/theme.scss
 create mode 100644 lib/navigation/Navigation.js
 create mode 100644 lib/navigation/_config.scss
 create mode 100644 lib/navigation/index.js
 create mode 100644 lib/navigation/theme.scss
 create mode 100644 lib/overlay/Overlay.js
 create mode 100644 lib/overlay/_config.scss
 create mode 100644 lib/overlay/index.js
 create mode 100644 lib/overlay/theme.scss
 create mode 100644 lib/progress_bar/ProgressBar.js
 create mode 100644 lib/progress_bar/__test__/index.spec.js
 create mode 100644 lib/progress_bar/_config.scss
 create mode 100644 lib/progress_bar/index.js
 create mode 100644 lib/progress_bar/theme.scss
 create mode 100644 lib/radio/Radio.js
 create mode 100644 lib/radio/RadioButton.js
 create mode 100644 lib/radio/RadioGroup.js
 create mode 100644 lib/radio/_config.scss
 create mode 100644 lib/radio/index.js
 create mode 100644 lib/radio/theme.scss
 create mode 100644 lib/ripple/Ripple.js
 create mode 100644 lib/ripple/_config.scss
 create mode 100644 lib/ripple/index.js
 create mode 100644 lib/ripple/theme.scss
 create mode 100644 lib/slider/Slider.js
 create mode 100644 lib/slider/__tests__/index.spec.js
 create mode 100644 lib/slider/_config.scss
 create mode 100644 lib/slider/index.js
 create mode 100644 lib/slider/theme.scss
 create mode 100644 lib/snackbar/Snackbar.js
 create mode 100644 lib/snackbar/_config.scss
 create mode 100644 lib/snackbar/index.js
 create mode 100644 lib/snackbar/theme.scss
 create mode 100644 lib/switch/Switch.js
 create mode 100644 lib/switch/Thumb.js
 create mode 100644 lib/switch/_config.scss
 create mode 100644 lib/switch/index.js
 create mode 100644 lib/switch/theme.scss
 create mode 100644 lib/table/Table.js
 create mode 100644 lib/table/TableHead.js
 create mode 100644 lib/table/TableRow.js
 create mode 100644 lib/table/_config.scss
 create mode 100644 lib/table/index.js
 create mode 100644 lib/table/theme.scss
 create mode 100644 lib/tabs/Tab.js
 create mode 100644 lib/tabs/TabContent.js
 create mode 100644 lib/tabs/Tabs.js
 create mode 100644 lib/tabs/__tests__/index.spec.js
 create mode 100644 lib/tabs/_config.scss
 create mode 100644 lib/tabs/index.js
 create mode 100644 lib/tabs/theme.scss
 create mode 100644 lib/time_picker/Clock.js
 create mode 100644 lib/time_picker/ClockFace.js
 create mode 100644 lib/time_picker/ClockHand.js
 create mode 100644 lib/time_picker/ClockHours.js
 create mode 100644 lib/time_picker/ClockMinutes.js
 create mode 100644 lib/time_picker/TimePicker.js
 create mode 100644 lib/time_picker/TimePickerDialog.js
 create mode 100644 lib/time_picker/_config.scss
 create mode 100644 lib/time_picker/index.js
 create mode 100644 lib/time_picker/theme.scss
 create mode 100644 lib/tooltip/Tooltip.js
 create mode 100644 lib/tooltip/_config.scss
 create mode 100644 lib/tooltip/index.js
 create mode 100644 lib/tooltip/theme.scss
 create mode 100644 lib/utils/events.js
 create mode 100644 lib/utils/index.js
 create mode 100644 lib/utils/polyfills.js
 create mode 100644 lib/utils/prefixer.js
 create mode 100644 lib/utils/testing.js
 create mode 100644 lib/utils/time.js
 create mode 100644 lib/utils/utils.js

diff --git a/.gitignore b/.gitignore
index 57642d3c5..230678335 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,4 @@
 build
-lib
 node_modules
 npm-debug.log
 .idea
diff --git a/lib/_base.scss b/lib/_base.scss
new file mode 100644
index 000000000..1ab106aa3
--- /dev/null
+++ b/lib/_base.scss
@@ -0,0 +1,3 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
diff --git a/lib/_colors.scss b/lib/_colors.scss
new file mode 100644
index 000000000..c2eb5099c
--- /dev/null
+++ b/lib/_colors.scss
@@ -0,0 +1,301 @@
+//-- Color definitions taken from Material Design Lite
+
+// Red
+$palette-red-50: rgb(255,235,238);
+$palette-red-100: rgb(255,205,210);
+$palette-red-200: rgb(239,154,154);
+$palette-red-300: rgb(229,115,115);
+$palette-red-400: rgb(239,83,80);
+$palette-red-500: rgb(244,67,54);
+$palette-red-600: rgb(229,57,53);
+$palette-red-700: rgb(211,47,47);
+$palette-red-800: rgb(198,40,40);
+$palette-red-900: rgb(183,28,28);
+$palette-red-a100: rgb(255,138,128);
+$palette-red-a200: rgb(255,82,82);
+$palette-red-a400: rgb(255,23,68);
+$palette-red-a700: rgb(213,0,0);
+
+// Pink
+$palette-pink-50: rgb(252,228,236);
+$palette-pink-100: rgb(248,187,208);
+$palette-pink-200: rgb(244,143,177);
+$palette-pink-300: rgb(240,98,146);
+$palette-pink-400: rgb(236,64,122);
+$palette-pink-500: rgb(233,30,99);
+$palette-pink-600: rgb(216,27,96);
+$palette-pink-700: rgb(194,24,91);
+$palette-pink-800: rgb(173,20,87);
+$palette-pink-900: rgb(136,14,79);
+$palette-pink-a100: rgb(255,128,171);
+$palette-pink-a200: rgb(255,64,129);
+$palette-pink-a400: rgb(245,0,87);
+$palette-pink-a700: rgb(197,17,98);
+
+// Purple
+$palette-purple-50: rgb(243,229,245);
+$palette-purple-100: rgb(225,190,231);
+$palette-purple-200: rgb(206,147,216);
+$palette-purple-300: rgb(186,104,200);
+$palette-purple-400: rgb(171,71,188);
+$palette-purple-500: rgb(156,39,176);
+$palette-purple-600: rgb(142,36,170);
+$palette-purple-700: rgb(123,31,162);
+$palette-purple-800: rgb(106,27,154);
+$palette-purple-900: rgb(74,20,140);
+$palette-purple-a100: rgb(234,128,252);
+$palette-purple-a200: rgb(224,64,251);
+$palette-purple-a400: rgb(213,0,249);
+$palette-purple-a700: rgb(170,0,255);
+
+//Deep Purple
+$palette-deep-purple-50: rgb(237,231,246);
+$palette-deep-purple-100: rgb(209,196,233);
+$palette-deep-purple-200: rgb(179,157,219);
+$palette-deep-purple-300: rgb(149,117,205);
+$palette-deep-purple-400: rgb(126,87,194);
+$palette-deep-purple-500: rgb(103,58,183);
+$palette-deep-purple-600: rgb(94,53,177);
+$palette-deep-purple-700: rgb(81,45,168);
+$palette-deep-purple-800: rgb(69,39,160);
+$palette-deep-purple-900: rgb(49,27,146);
+$palette-deep-purple-a100: rgb(179,136,255);
+$palette-deep-purple-a200: rgb(124,77,255);
+$palette-deep-purple-a400: rgb(101,31,255);
+$palette-deep-purple-a700: rgb(98,0,234);
+
+// Indigo
+$palette-indigo-50: rgb(232,234,246);
+$palette-indigo-100: rgb(197,202,233);
+$palette-indigo-200: rgb(159,168,218);
+$palette-indigo-300: rgb(121,134,203);
+$palette-indigo-400: rgb(92,107,192);
+$palette-indigo-500: rgb(63,81,181);
+$palette-indigo-600: rgb(57,73,171);
+$palette-indigo-700: rgb(48,63,159);
+$palette-indigo-800: rgb(40,53,147);
+$palette-indigo-900: rgb(26,35,126);
+$palette-indigo-a100: rgb(140,158,255);
+$palette-indigo-a200: rgb(83,109,254);
+$palette-indigo-a400: rgb(61,90,254);
+$palette-indigo-a700: rgb(48,79,254);
+
+// Blue
+$palette-blue-50: rgb(227,242,253);
+$palette-blue-100: rgb(187,222,251);
+$palette-blue-200: rgb(144,202,249);
+$palette-blue-300: rgb(100,181,246);
+$palette-blue-400: rgb(66,165,245);
+$palette-blue-500: rgb(33,150,243);
+$palette-blue-600: rgb(30,136,229);
+$palette-blue-700: rgb(25,118,210);
+$palette-blue-800: rgb(21,101,192);
+$palette-blue-900: rgb(13,71,161);
+$palette-blue-a100: rgb(130,177,255);
+$palette-blue-a200: rgb(68,138,255);
+$palette-blue-a400: rgb(41,121,255);
+$palette-blue-a700: rgb(41,98,255);
+
+// Light Blue
+$palette-light-blue-50: rgb(225,245,254);
+$palette-light-blue-100: rgb(179,229,252);
+$palette-light-blue-200: rgb(129,212,250);
+$palette-light-blue-300: rgb(79,195,247);
+$palette-light-blue-400: rgb(41,182,246);
+$palette-light-blue-500: rgb(3,169,244);
+$palette-light-blue-600: rgb(3,155,229);
+$palette-light-blue-700: rgb(2,136,209);
+$palette-light-blue-800: rgb(2,119,189);
+$palette-light-blue-900: rgb(1,87,155);
+$palette-light-blue-a100: rgb(128,216,255);
+$palette-light-blue-a200: rgb(64,196,255);
+$palette-light-blue-a400: rgb(0,176,255);
+$palette-light-blue-a700: rgb(0,145,234);
+
+// Cyan
+$palette-cyan-50: rgb(224,247,250);
+$palette-cyan-100: rgb(178,235,242);
+$palette-cyan-200: rgb(128,222,234);
+$palette-cyan-300: rgb(77,208,225);
+$palette-cyan-400: rgb(38,198,218);
+$palette-cyan-500: rgb(0,188,212);
+$palette-cyan-600: rgb(0,172,193);
+$palette-cyan-700: rgb(0,151,167);
+$palette-cyan-800: rgb(0,131,143);
+$palette-cyan-900: rgb(0,96,100);
+$palette-cyan-a100: rgb(132,255,255);
+$palette-cyan-a200: rgb(24,255,255);
+$palette-cyan-a400: rgb(0,229,255);
+$palette-cyan-a700: rgb(0,184,212);
+
+// Teal
+$palette-teal-50: rgb(224,242,241);
+$palette-teal-100: rgb(178,223,219);
+$palette-teal-200: rgb(128,203,196);
+$palette-teal-300: rgb(77,182,172);
+$palette-teal-400: rgb(38,166,154);
+$palette-teal-500: rgb(0,150,136);
+$palette-teal-600: rgb(0,137,123);
+$palette-teal-700: rgb(0,121,107);
+$palette-teal-800: rgb(0,105,92);
+$palette-teal-900: rgb(0,77,64);
+$palette-teal-a100: rgb(167,255,235);
+$palette-teal-a200: rgb(100,255,218);
+$palette-teal-a400: rgb(29,233,182);
+$palette-teal-a700: rgb(0,191,165);
+
+// Green
+$palette-green-50: rgb(232,245,233);
+$palette-green-100: rgb(200,230,201);
+$palette-green-200: rgb(165,214,167);
+$palette-green-300: rgb(129,199,132);
+$palette-green-400: rgb(102,187,106);
+$palette-green-500: rgb(76,175,80);
+$palette-green-600: rgb(67,160,71);
+$palette-green-700: rgb(56,142,60);
+$palette-green-800: rgb(46,125,50);
+$palette-green-900: rgb(27,94,32);
+$palette-green-a100: rgb(185,246,202);
+$palette-green-a200: rgb(105,240,174);
+$palette-green-a400: rgb(0,230,118);
+$palette-green-a700: rgb(0,200,83);
+
+// Green
+$palette-light-green-50: rgb(241,248,233);
+$palette-light-green-100: rgb(220,237,200);
+$palette-light-green-200: rgb(197,225,165);
+$palette-light-green-300: rgb(174,213,129);
+$palette-light-green-400: rgb(156,204,101);
+$palette-light-green-500: rgb(139,195,74);
+$palette-light-green-600: rgb(124,179,66);
+$palette-light-green-700: rgb(104,159,56);
+$palette-light-green-800: rgb(85,139,47);
+$palette-light-green-900: rgb(51,105,30);
+$palette-light-green-a100: rgb(204,255,144);
+$palette-light-green-a200: rgb(178,255,89);
+$palette-light-green-a400: rgb(118,255,3);
+$palette-light-green-a700: rgb(100,221,23);
+
+// Lime
+$palette-lime-50: rgb(249,251,231);
+$palette-lime-100: rgb(240,244,195);
+$palette-lime-200: rgb(230,238,156);
+$palette-lime-300: rgb(220,231,117);
+$palette-lime-400: rgb(212,225,87);
+$palette-lime-500: rgb(205,220,57);
+$palette-lime-600: rgb(192,202,51);
+$palette-lime-700: rgb(175,180,43);
+$palette-lime-800: rgb(158,157,36);
+$palette-lime-900: rgb(130,119,23);
+$palette-lime-a100: rgb(244,255,129);
+$palette-lime-a200: rgb(238,255,65);
+$palette-lime-a400: rgb(198,255,0);
+$palette-lime-a700: rgb(174,234,0);
+
+// Yellow
+$palette-yellow-50: rgb(255,253,231);
+$palette-yellow-100: rgb(255,249,196);
+$palette-yellow-200: rgb(255,245,157);
+$palette-yellow-300: rgb(255,241,118);
+$palette-yellow-400: rgb(255,238,88);
+$palette-yellow-500: rgb(255,235,59);
+$palette-yellow-600: rgb(253,216,53);
+$palette-yellow-700: rgb(251,192,45);
+$palette-yellow-800: rgb(249,168,37);
+$palette-yellow-900: rgb(245,127,23);
+$palette-yellow-a100: rgb(255,255,141);
+$palette-yellow-a200: rgb(255,255,0);
+$palette-yellow-a400: rgb(255,234,0);
+$palette-yellow-a700: rgb(255,214,0);
+
+// Amber
+$palette-amber-50: rgb(255,248,225);
+$palette-amber-100: rgb(255,236,179);
+$palette-amber-200: rgb(255,224,130);
+$palette-amber-300: rgb(255,213,79);
+$palette-amber-400: rgb(255,202,40);
+$palette-amber-500: rgb(255,193,7);
+$palette-amber-600: rgb(255,179,0);
+$palette-amber-700: rgb(255,160,0);
+$palette-amber-800: rgb(255,143,0);
+$palette-amber-900: rgb(255,111,0);
+$palette-amber-a100: rgb(255,229,127);
+$palette-amber-a200: rgb(255,215,64);
+$palette-amber-a400: rgb(255,196,0);
+$palette-amber-a700: rgb(255,171,0);
+
+// Orange
+$palette-orange-50: rgb(255,243,224);
+$palette-orange-100: rgb(255,224,178);
+$palette-orange-200: rgb(255,204,128);
+$palette-orange-300: rgb(255,183,77);
+$palette-orange-400: rgb(255,167,38);
+$palette-orange-500: rgb(255,152,0);
+$palette-orange-600: rgb(251,140,0);
+$palette-orange-700: rgb(245,124,0);
+$palette-orange-800: rgb(239,108,0);
+$palette-orange-900: rgb(230,81,0);
+$palette-orange-a100: rgb(255,209,128);
+$palette-orange-a200: rgb(255,171,64);
+$palette-orange-a400: rgb(255,145,0);
+$palette-orange-a700: rgb(255,109,0);
+
+// Deep Orange
+$palette-deep-orange-50: rgb(251,233,231);
+$palette-deep-orange-100: rgb(255,204,188);
+$palette-deep-orange-200: rgb(255,171,145);
+$palette-deep-orange-300: rgb(255,138,101);
+$palette-deep-orange-400: rgb(255,112,67);
+$palette-deep-orange-500: rgb(255,87,34);
+$palette-deep-orange-600: rgb(244,81,30);
+$palette-deep-orange-700: rgb(230,74,25);
+$palette-deep-orange-800: rgb(216,67,21);
+$palette-deep-orange-900: rgb(191,54,12);
+$palette-deep-orange-a100: rgb(255,158,128);
+$palette-deep-orange-a200: rgb(255,110,64);
+$palette-deep-orange-a400: rgb(255,61,0);
+$palette-deep-orange-a700: rgb(221,44,0);
+
+// Brown
+$palette-brown-50: rgb(239,235,233);
+$palette-brown-100: rgb(215,204,200);
+$palette-brown-200: rgb(188,170,164);
+$palette-brown-300: rgb(161,136,127);
+$palette-brown-400: rgb(141,110,99);
+$palette-brown-500: rgb(121,85,72);
+$palette-brown-600: rgb(109,76,65);
+$palette-brown-700: rgb(93,64,55);
+$palette-brown-800: rgb(78,52,46);
+$palette-brown-900: rgb(62,39,35);
+
+// Grey
+$palette-grey-50: rgb(250,250,250);
+$palette-grey-100: rgb(245,245,245);
+$palette-grey-200: rgb(238,238,238);
+$palette-grey-300: rgb(224,224,224);
+$palette-grey-400: rgb(189,189,189);
+$palette-grey-500: rgb(158,158,158);
+$palette-grey-600: rgb(117,117,117);
+$palette-grey-700: rgb(97,97,97);
+$palette-grey-800: rgb(66,66,66);
+$palette-grey-900: rgb(33,33,33);
+
+// Blue Grey
+$palette-blue-grey-50: rgb(236,239,241);
+$palette-blue-grey-100: rgb(207,216,220);
+$palette-blue-grey-200: rgb(176,190,197);
+$palette-blue-grey-300: rgb(144,164,174);
+$palette-blue-grey-400: rgb(120,144,156);
+$palette-blue-grey-500: rgb(96,125,139);
+$palette-blue-grey-600: rgb(84,110,122);
+$palette-blue-grey-700: rgb(69,90,100);
+$palette-blue-grey-800: rgb(55,71,79);
+$palette-blue-grey-900: rgb(38,50,56);
+
+$color-black: rgb(0,0,0);
+$color-white: rgb(255,255,255);
+
+//-- The two possible colors for overlayed text.
+$styleguide-generate-template: false !default;
+$color-dark-contrast: $color-white !default;
+$color-light-contrast: $color-black !default;
diff --git a/lib/_globals.scss b/lib/_globals.scss
new file mode 100644
index 000000000..191881082
--- /dev/null
+++ b/lib/_globals.scss
@@ -0,0 +1,81 @@
+//-- Color configuration
+$color-divider: $palette-grey-200 !default;
+$color-background: $color-white !default;
+$color-text: $palette-grey-900 !default;
+$color-text-secondary: $palette-grey-600 !default;
+
+$color-primary: $palette-indigo-500 !default;
+$color-primary-dark: $palette-indigo-700 !default;
+$color-accent: $palette-pink-a200 !default;
+$color-accent-dark: $palette-pink-700 !default;
+$color-primary-contrast: $color-dark-contrast !default;
+$color-accent-contrast: $color-dark-contrast !default;
+
+//-- Sizing
+$unit: 1rem !default;
+
+// -- Fonts
+$preferred-font: "Roboto", "Helvetica", "Arial", sans-serif !default;
+$font-size: 1.6 * $unit !default;
+$font-size-tiny: 1.2 * $unit !default;
+$font-size-small: 1.4 * $unit !default;
+$font-size-normal: $font-size !default;
+$font-size-big: 1.8 * $unit !default;
+$font-weight-thin: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-semi-bold: 500 !default;
+$font-weight-bold: 700 !default;
+
+//-- Shadows
+$shadow-key-umbra-opacity: 0.2 !default;
+$shadow-key-penumbra-opacity: 0.14 !default;
+$shadow-ambient-shadow-opacity: 0.12 !default;
+
+//-- Depth Shadows
+$zdepth-shadow-1: 0 1px 6px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.24);
+$zdepth-shadow-2: 0 3px 10px rgba(0,0,0,.16), 0 3px 10px rgba(0,0,0,.23);
+$zdepth-shadow-3: 0 10px 30px rgba(0,0,0,.19), 0 6px 10px rgba(0,0,0,.23);
+$zdepth-shadow-4: 0 14px 45px rgba(0,0,0,.25), 0 10px 18px rgba(0,0,0,.22);
+$zdepth-shadow-5: 0 19px 60px rgba(0,0,0,.3), 0 15px 20px rgba(0,0,0,.22);
+
+//-- Animation
+$animation-duration: .35s;
+$animation-delay: $animation-duration / 5;
+$animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
+$animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;
+$animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
+$animation-curve-default: $animation-curve-fast-out-slow-in !default;
+
+//-- Indexes
+$z-index-highest: 300 !default;
+$z-index-higher: 200 !default;
+$z-index-high: 100 !default;
+$z-index-normal: 1 !default;
+$z-index-low: -100 !default;
+$z-index-lower: -200 !default;
+
+//-- Breakpoints
+// height of app bar
+// https://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-keylines-spacing
+$standard-increment-mobile: (5.6 * $unit) !default;
+$standard-increment-desktop: (6.4 * $unit) !default;
+
+// https://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-baseline-grids
+$baseline-grid: (0.8 * $unit) !default;
+$layout-gutter-width-sm: ($baseline-grid * 2) !default;
+$layout-gutter-width: ($baseline-grid * 3) !default;
+
+// https://www.google.com/design/spec/layout/responsive-ui.html#responsive-ui-breakpoints
+// 4 columns
+$layout-breakpoint-xxs: 480px !default;
+// 8 columns
+$layout-breakpoint-xs: 600px !default;
+// 12 columns
+$layout-breakpoint-sm-tablet: 720px !default;
+$layout-breakpoint-sm: 840px !default;
+$layout-breakpoint-md: 960px !default;
+$layout-breakpoint-lg-tablet: 1024px !default;
+$layout-breakpoint-lg: 1280px !default;
+$layout-breakpoint-xl: 1440px !default;
+$layout-breakpoint-xxl: 1600px !default;
+$layout-breakpoint-xxxl: 1920px !default;
diff --git a/lib/_mixins.scss b/lib/_mixins.scss
new file mode 100644
index 000000000..a4d9dfebc
--- /dev/null
+++ b/lib/_mixins.scss
@@ -0,0 +1,278 @@
+// scss-lint:disable VendorPrefix
+@mixin typo-preferred-font($use-preferred: true) {
+  @if $use-preferred {
+    font-family: $preferred-font;
+  }
+}
+
+@mixin typo-display-4($color-contrast: false, $use-preferred: true) {
+  @include typo-preferred-font($use-preferred);
+  font-size: 11.2rem;
+  font-weight: 300;
+  line-height: 1;
+  letter-spacing: -.04em;
+
+  @if $color-contrast {
+    opacity: .54;
+  }
+}
+
+@mixin typo-display-3($color-contrast: false, $use-preferred: true) {
+  @include typo-preferred-font($use-preferred);
+  font-size: 5.6rem;
+  font-weight: 400;
+  line-height: 1.35;
+  letter-spacing: -.02em;
+
+  @if $color-contrast {
+    opacity: .54;
+  }
+}
+
+@mixin typo-display-2($color-contrast: false, $use-preferred: true) {
+  @include typo-preferred-font($use-preferred);
+  font-size: 4.5rem;
+  font-weight: 400;
+  line-height: 4.8rem;
+
+  @if $color-contrast {
+    opacity: .54;
+  }
+}
+
+@mixin typo-display-1($color-contrast: false, $use-preferred: true) {
+  @include typo-preferred-font($use-preferred);
+  font-size: 3.4rem;
+  font-weight: 400;
+  line-height: 4rem;
+
+  @if $color-contrast {
+    opacity: .54;
+  }
+}
+
+@mixin typo-headline($color-contrast: false, $use-preferred: true) {
+  @include typo-preferred-font($use-preferred);
+  font-size: 2.4rem;
+  font-weight: 400;
+  line-height: 3.2rem;
+  -moz-osx-font-smoothing: grayscale;
+
+  @if $color-contrast {
+    opacity: .87;
+  }
+}
+
+@mixin typo-title($color-contrast: false, $use-preferred: true) {
+  @include typo-preferred-font($use-preferred);
+  font-size: 2rem;
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: .02em;
+
+  @if $color-contrast {
+    opacity: .87;
+  }
+}
+
+@mixin typo-subhead($color-contrast: false, $use-preferred: true) {
+  @include typo-preferred-font($use-preferred);
+  font-size: 1.6rem;
+  font-weight: 400;
+  line-height: 2.4rem;
+  letter-spacing: .04em;
+
+  @if $color-contrast {
+    opacity: .87;
+  }
+}
+
+@mixin typo-subhead-2($color-contrast: false, $use-preferred: true) {
+  @include typo-preferred-font($use-preferred);
+  font-size: 1.6rem;
+  font-weight: 400;
+  line-height: 2.8rem;
+  letter-spacing: .04em;
+
+  @if $color-contrast {
+    opacity: .87;
+  }
+}
+
+@mixin typo-body-2($color-contrast: false, $use-preferred: false) {
+  @include typo-preferred-font($use-preferred);
+  font-size: 1.4rem;
+  line-height: 2.4rem;
+  letter-spacing: 0;
+
+  @if $use-preferred {
+    font-weight: 500;
+  } @else {
+    font-weight: bold;
+  }
+
+  @if $color-contrast {
+    opacity: .87;
+  }
+}
+
+@mixin typo-body-1($color-contrast: false, $use-preferred: false) {
+  @include typo-preferred-font($use-preferred);
+  font-size: 1.4rem;
+  font-weight: 400;
+  line-height: 2.4rem;
+  letter-spacing: 0;
+
+  @if $color-contrast {
+    opacity: .87;
+  }
+}
+
+@mixin typo-caption($color-contrast: false, $use-preferred: false) {
+  @include typo-preferred-font($use-preferred);
+  font-size: 1.2rem;
+  font-weight: 400;
+  line-height: 1;
+  letter-spacing: 0;
+
+  @if $color-contrast {
+    opacity: .54;
+  }
+}
+
+@mixin typo-blockquote($color-contrast: false, $use-preferred: true) {
+  @include typo-preferred-font($use-preferred);
+  position: relative;
+  font-size: 2.4rem;
+  font-style: italic;
+  font-weight: 300;
+  line-height: 1.35;
+  letter-spacing: .08em;
+
+  &:before {
+    position: absolute;
+    left: -.5em;
+    content: "“";
+  }
+
+  &:after {
+    margin-left: -.05em;
+    content: "”";
+  }
+
+  @if $color-contrast {
+    opacity: .54;
+  }
+}
+
+@mixin typo-menu($color-contrast: false, $use-preferred: true) {
+  @include typo-preferred-font($use-preferred);
+  font-size: 1.4rem;
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: 0;
+
+  @if $color-contrast {
+    opacity: .87;
+  }
+}
+
+@mixin typo-button($color-contrast: false, $use-preferred: true) {
+  @include typo-preferred-font($use-preferred);
+  font-size: 1.4rem;
+  font-weight: 500;
+  line-height: 1;
+  text-transform: uppercase;
+  letter-spacing: 0;
+
+  @if $color-contrast {
+    opacity: .87;
+  }
+}
+
+//-- Shadows
+@mixin focus-shadow() {
+  box-shadow: 0 0 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .36);
+}
+
+@mixin shadow-2dp() {
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+                0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
+                0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
+}
+
+@mixin shadow-3dp() {
+  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+                0 3px 3px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
+                0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
+}
+
+@mixin shadow-4dp() {
+  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+                0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
+                0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
+}
+
+@mixin shadow-6dp() {
+  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+                0 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
+                0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
+}
+
+@mixin shadow-8dp() {
+  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+                0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
+                0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity);
+}
+
+@mixin shadow-16dp() {
+  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+                0 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
+                0 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity);
+}
+
+//-- Animations
+@mixin material-animation-fast-out-slow-in($duration: .2s) {
+  transition-timing-function: $animation-curve-fast-out-slow-in;
+  transition-duration: $duration;
+}
+
+@mixin material-animation-linear-out-slow-in($duration: .2s) {
+  transition-timing-function: $animation-curve-linear-out-slow-in;
+  transition-duration: $duration;
+}
+
+@mixin material-animation-fast-out-linear-in($duration: .2s) {
+  transition-timing-function: $animation-curve-fast-out-linear-in;
+  transition-duration: $duration;
+}
+
+@mixin material-animation-default($duration: .2s) {
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $duration;
+}
+
+@mixin no-webkit-scrollbar {
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+}
+
+@mixin btn-colors($name, $color, $background, $hover) {
+  .#{$name}:not([disabled]) {
+    &.raised, &.floating {
+      color: $color;
+      background: $background;
+    }
+    &.flat, &.toggle {
+      color: $background;
+      &:focus:not(:active) {
+        background: $hover;
+      }
+    }
+    &.flat:hover {
+      background: $hover;
+    }
+  }
+}
diff --git a/lib/animations/index.js b/lib/animations/index.js
new file mode 100644
index 000000000..787971bcc
--- /dev/null
+++ b/lib/animations/index.js
@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ZoomOut = exports.ZoomIn = exports.SlideRight = exports.SlideLeft = undefined;
+
+var _slideLeft = require('./slide-left.scss');
+
+var _slideLeft2 = _interopRequireDefault(_slideLeft);
+
+var _slideRight = require('./slide-right.scss');
+
+var _slideRight2 = _interopRequireDefault(_slideRight);
+
+var _zoomIn = require('./zoom-in.scss');
+
+var _zoomIn2 = _interopRequireDefault(_zoomIn);
+
+var _zoomOut = require('./zoom-out.scss');
+
+var _zoomOut2 = _interopRequireDefault(_zoomOut);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.SlideLeft = _slideLeft2.default;
+exports.SlideRight = _slideRight2.default;
+exports.ZoomIn = _zoomIn2.default;
+exports.ZoomOut = _zoomOut2.default;
\ No newline at end of file
diff --git a/lib/animations/slide-left.scss b/lib/animations/slide-left.scss
new file mode 100644
index 000000000..aba039958
--- /dev/null
+++ b/lib/animations/slide-left.scss
@@ -0,0 +1,26 @@
+.enter, .leave {
+  position: absolute;
+  transition-timing-function: ease-in-out;
+  transition-duration: .35s;
+  transition-property: transform, opacity;
+}
+
+.enter {
+  opacity: 0;
+  transform: translate3d(-100%, 0, 0);
+
+  &.enterActive {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.leave {
+  opacity: 1;
+  transform: translate3d(0, 0, 0);
+
+  &.leaveActive {
+    opacity: 0;
+    transform: translate3d(100%, 0, 0);
+  }
+}
diff --git a/lib/animations/slide-right.scss b/lib/animations/slide-right.scss
new file mode 100644
index 000000000..95d0e15d9
--- /dev/null
+++ b/lib/animations/slide-right.scss
@@ -0,0 +1,29 @@
+.enter, .leave {
+  position: absolute;
+}
+
+.enterActive, .leaveActive {
+  transition-timing-function: ease-in-out;
+  transition-duration: 350ms;
+  transition-property: transform, opacity;
+}
+
+.enter {
+  opacity: 0;
+  transform: translateX(100%);
+
+  &.enterActive {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.leave {
+  opacity: 1;
+  transform: translateX(0);
+
+  &.leaveActive {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+}
diff --git a/lib/animations/zoom-in.scss b/lib/animations/zoom-in.scss
new file mode 100644
index 000000000..40087e850
--- /dev/null
+++ b/lib/animations/zoom-in.scss
@@ -0,0 +1,31 @@
+@import "http://github.com/base";
+
+.enter, .leave {
+  position: absolute;
+}
+
+.enterActive, .leaveActive {
+  transition: transform, opacity;
+  transition-timing-function: $animation-curve-fast-out-slow-in;
+  transition-duration: 500ms;
+}
+
+.enter {
+  opacity: 0;
+  transform: scale(0.85);
+
+  &.enterActive {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.leave {
+  opacity: 1;
+  transform: scale(1);
+
+  &.leaveActive {
+    opacity: 0;
+    transform: scale(1.25);
+  }
+}
diff --git a/lib/animations/zoom-out.scss b/lib/animations/zoom-out.scss
new file mode 100644
index 000000000..759e088c0
--- /dev/null
+++ b/lib/animations/zoom-out.scss
@@ -0,0 +1,31 @@
+@import "http://github.com/base";
+
+.enter, .leave {
+  position: absolute;
+}
+
+.enterActive, .leaveActive {
+  transition: transform, opacity;
+  transition-timing-function: $animation-curve-fast-out-slow-in;
+  transition-duration: 500ms;
+}
+
+.enter {
+  opacity: 0;
+  transform: scale(1.25);
+
+  &.enterActive {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.leave {
+  opacity: 1;
+  transform: scale(1);
+
+  &.leaveActive {
+    opacity: 0;
+    transform: scale(0.85);
+  }
+}
diff --git a/lib/app_bar/AppBar.js b/lib/app_bar/AppBar.js
new file mode 100644
index 000000000..ebf43b0f7
--- /dev/null
+++ b/lib/app_bar/AppBar.js
@@ -0,0 +1,61 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AppBar = undefined;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+var AppBar = function AppBar(_ref) {
+  var _classnames;
+
+  var theme = _ref.theme;
+
+  var props = _objectWithoutProperties(_ref, ['theme']);
+
+  var className = (0, _classnames3.default)(theme.appBar, (_classnames = {}, _defineProperty(_classnames, theme.fixed, props.fixed), _defineProperty(_classnames, theme.flat, props.flat), _classnames), props.className);
+
+  return _react2.default.createElement(
+    'header',
+    { className: className, 'data-react-toolbox': 'app-bar' },
+    props.children
+  );
+};
+
+AppBar.propTypes = {
+  children: _react.PropTypes.node,
+  className: _react.PropTypes.string,
+  fixed: _react.PropTypes.bool,
+  flat: _react.PropTypes.bool,
+  theme: _react.PropTypes.shape({
+    appBar: _react.PropTypes.string,
+    fixed: _react.PropTypes.string,
+    flat: _react.PropTypes.string
+  })
+};
+
+AppBar.defaultProps = {
+  className: '',
+  fixed: false,
+  flat: false
+};
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.APP_BAR)(AppBar);
+exports.AppBar = AppBar;
\ No newline at end of file
diff --git a/lib/app_bar/_config.scss b/lib/app_bar/_config.scss
new file mode 100644
index 000000000..067be3376
--- /dev/null
+++ b/lib/app_bar/_config.scss
@@ -0,0 +1,6 @@
+$appbar-color: $color-primary-dark !default;
+$appbar-contrast: $color-primary-contrast !default;
+$appbar-title-total-distance: 8 * $unit !default;
+$appbar-height: 6.4 * $unit !default;
+$appbar-h-padding: 2.4 * $unit !default;
+$appbar-title-distance: $appbar-title-total-distance - $appbar-h-padding !default;
diff --git a/lib/app_bar/index.js b/lib/app_bar/index.js
new file mode 100644
index 000000000..8fa609cc6
--- /dev/null
+++ b/lib/app_bar/index.js
@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AppBar = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _AppBar = require('./AppBar.js');
+
+var _identifiers = require('../identifiers.js');
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ThemedAppBar = (0, _reactCssThemr.themr)(_identifiers.APP_BAR, _theme2.default)(_AppBar.AppBar);
+
+exports.default = ThemedAppBar;
+exports.AppBar = ThemedAppBar;
\ No newline at end of file
diff --git a/lib/app_bar/theme.scss b/lib/app_bar/theme.scss
new file mode 100644
index 000000000..50ad328b6
--- /dev/null
+++ b/lib/app_bar/theme.scss
@@ -0,0 +1,28 @@
+@import "http://github.com/base";
+@import "http://github.com/config";
+
+.appBar {
+  display: flex;
+  height: $appbar-height;
+  align-items: center;
+  padding: 0 $appbar-h-padding;
+  color: $appbar-contrast;
+  background: $appbar-color;
+
+  &:not(.flat) {
+    z-index: $z-index-high;
+    box-shadow: 0 2px 5px rgba(0,0,0,.26);
+  }
+
+  &.fixed {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: $z-index-highest;
+  }
+
+  a {
+    color: $appbar-contrast;
+  }
+}
diff --git a/lib/autocomplete/Autocomplete.js b/lib/autocomplete/Autocomplete.js
new file mode 100644
index 000000000..891f56d61
--- /dev/null
+++ b/lib/autocomplete/Autocomplete.js
@@ -0,0 +1,440 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Autocomplete = exports.autocompleteFactory = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactDom = require('react-dom');
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
+var _classnames4 = require('classnames');
+
+var _classnames5 = _interopRequireDefault(_classnames4);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Chip = require('../chip/Chip.js');
+
+var _Chip2 = _interopRequireDefault(_Chip);
+
+var _Input = require('../input/Input.js');
+
+var _Input2 = _interopRequireDefault(_Input);
+
+var _events = require('../utils/events.js');
+
+var _events2 = _interopRequireDefault(_events);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var POSITION = {
+  AUTO: 'auto',
+  DOWN: 'down',
+  UP: 'up'
+};
+
+var factory = function factory(Chip, Input) {
+  var Autocomplete = function (_Component) {
+    _inherits(Autocomplete, _Component);
+
+    function Autocomplete() {
+      var _Object$getPrototypeO;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, Autocomplete);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Autocomplete)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+        direction: _this.props.direction,
+        focus: false,
+        showAllSuggestions: _this.props.showSuggestionsWhenValueIsSet,
+        query: _this.query(_this.props.value)
+      }, _this.handleChange = function (keys, event) {
+        var key = _this.props.multiple ? keys : keys[0];
+        var query = _this.query(key);
+        if (_this.props.onChange) _this.props.onChange(key, event);
+        _this.setState({ focus: false, query: query, showAllSuggestions: _this.props.showSuggestionsWhenValueIsSet }, function () {
+          _reactDom2.default.findDOMNode(_this).querySelector('input').blur();
+        });
+      }, _this.handleQueryBlur = function () {
+        if (_this.state.focus) _this.setState({ focus: false });
+      }, _this.handleQueryChange = function (value) {
+        _this.setState({ query: value, showAllSuggestions: false });
+      }, _this.handleQueryFocus = function () {
+        _this.refs.suggestions.scrollTop = 0;
+        _this.setState({ active: '', focus: true });
+      }, _this.handleQueryKeyDown = function (event) {
+        // Clear query when pressing backspace and showing all suggestions.
+        var shouldClearQuery = event.which === 8 && _this.props.showSuggestionsWhenValueIsSet && _this.state.showAllSuggestions;
+        if (shouldClearQuery) {
+          _this.setState({ query: '' });
+        }
+      }, _this.handleQueryKeyUp = function (event) {
+        if (event.which === 13 && _this.state.active) _this.select(_this.state.active, event);
+        if (event.which === 27) _reactDom2.default.findDOMNode(_this).querySelector('input').blur();
+        if ([40, 38].indexOf(event.which) !== -1) {
+          var suggestionsKeys = [].concat(_toConsumableArray(_this.suggestions().keys()));
+          var index = suggestionsKeys.indexOf(_this.state.active) + (event.which === 40 ? +1 : -1);
+          if (index < 0) index = suggestionsKeys.length - 1;
+          if (index >= suggestionsKeys.length) index = 0;
+          _this.setState({ active: suggestionsKeys[index] });
+        }
+      }, _this.handleSuggestionHover = function (key) {
+        _this.setState({ active: key });
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(Autocomplete, [{
+      key: 'componentWillReceiveProps',
+      value: function componentWillReceiveProps(nextProps) {
+        if (!this.props.multiple) {
+          this.setState({ query: nextProps.value });
+        }
+      }
+    }, {
+      key: 'shouldComponentUpdate',
+      value: function shouldComponentUpdate(nextProps, nextState) {
+        if (!this.state.focus && nextState.focus && this.props.direction === POSITION.AUTO) {
+          var direction = this.calculateDirection();
+          if (this.state.direction !== direction) {
+            this.setState({ direction: direction });
+            return false;
+          }
+        }
+        return true;
+      }
+    }, {
+      key: 'calculateDirection',
+      value: function calculateDirection() {
+        if (this.props.direction === 'auto') {
+          var client = _reactDom2.default.findDOMNode(this.refs.input).getBoundingClientRect();
+          var screen_height = window.innerHeight || document.documentElement.offsetHeight;
+          var up = client.top > screen_height / 2 + client.height;
+          return up ? 'up' : 'down';
+        } else {
+          return this.props.direction;
+        }
+      }
+    }, {
+      key: 'query',
+      value: function query(key) {
+        return !this.props.multiple && key ? this.source().get(key) : '';
+      }
+    }, {
+      key: 'suggestions',
+      value: function suggestions() {
+        var suggest = new Map();
+        var query = this.state.query.toLowerCase().trim() || '';
+        var values = this.values();
+        var source = this.source();
+
+        // Suggest any non-set value which matches the query
+        if (this.props.multiple) {
+          var _iteratorNormalCompletion = true;
+          var _didIteratorError = false;
+          var _iteratorError = undefined;
+
+          try {
+            for (var _iterator = source[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+              var _step$value = _slicedToArray(_step.value, 2);
+
+              var key = _step$value[0];
+              var value = _step$value[1];
+
+              if (!values.has(key) && value.toLowerCase().trim().startsWith(query)) {
+                suggest.set(key, value);
+              }
+            }
+
+            // When multiple is false, suggest any value which matches the query if showAllSuggestions is false
+          } catch (err) {
+            _didIteratorError = true;
+            _iteratorError = err;
+          } finally {
+            try {
+              if (!_iteratorNormalCompletion && _iterator.return) {
+                _iterator.return();
+              }
+            } finally {
+              if (_didIteratorError) {
+                throw _iteratorError;
+              }
+            }
+          }
+        } else if (query && !this.state.showAllSuggestions) {
+            var _iteratorNormalCompletion2 = true;
+            var _didIteratorError2 = false;
+            var _iteratorError2 = undefined;
+
+            try {
+              for (var _iterator2 = source[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+                var _step2$value = _slicedToArray(_step2.value, 2);
+
+                var key = _step2$value[0];
+                var value = _step2$value[1];
+
+                if (value.toLowerCase().trim().startsWith(query)) {
+                  suggest.set(key, value);
+                }
+              }
+
+              // When multiple is false, suggest all values when showAllSuggestions is true
+            } catch (err) {
+              _didIteratorError2 = true;
+              _iteratorError2 = err;
+            } finally {
+              try {
+                if (!_iteratorNormalCompletion2 && _iterator2.return) {
+                  _iterator2.return();
+                }
+              } finally {
+                if (_didIteratorError2) {
+                  throw _iteratorError2;
+                }
+              }
+            }
+          } else {
+              suggest = source;
+            }
+
+        return suggest;
+      }
+    }, {
+      key: 'source',
+      value: function source() {
+        var src = this.props.source;
+
+        if (src.hasOwnProperty('length')) {
+          return new Map(src.map(function (item) {
+            return Array.isArray(item) ? [].concat(_toConsumableArray(item)) : [item, item];
+          }));
+        } else {
+          return new Map(Object.keys(src).map(function (key) {
+            return [key, src[key]];
+          }));
+        }
+      }
+    }, {
+      key: 'values',
+      value: function values() {
+        var valueMap = new Map();
+        var vals = this.props.multiple ? this.props.value : [this.props.value];
+        var _iteratorNormalCompletion3 = true;
+        var _didIteratorError3 = false;
+        var _iteratorError3 = undefined;
+
+        try {
+          for (var _iterator3 = this.source()[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
+            var _step3$value = _slicedToArray(_step3.value, 2);
+
+            var k = _step3$value[0];
+            var v = _step3$value[1];
+
+            if (vals.indexOf(k) !== -1) valueMap.set(k, v);
+          }
+        } catch (err) {
+          _didIteratorError3 = true;
+          _iteratorError3 = err;
+        } finally {
+          try {
+            if (!_iteratorNormalCompletion3 && _iterator3.return) {
+              _iterator3.return();
+            }
+          } finally {
+            if (_didIteratorError3) {
+              throw _iteratorError3;
+            }
+          }
+        }
+
+        return valueMap;
+      }
+    }, {
+      key: 'select',
+      value: function select(key, event) {
+        _events2.default.pauseEvent(event);
+        var values = this.values(this.props.value);
+        this.handleChange([key].concat(_toConsumableArray(values.keys())), event);
+      }
+    }, {
+      key: 'unselect',
+      value: function unselect(key, event) {
+        if (!this.props.disabled) {
+          var values = this.values(this.props.value);
+          values.delete(key);
+          this.handleChange([].concat(_toConsumableArray(values.keys())), event);
+        }
+      }
+    }, {
+      key: 'renderSelected',
+      value: function renderSelected() {
+        var _this2 = this;
+
+        if (this.props.multiple) {
+          var selectedItems = [].concat(_toConsumableArray(this.values())).map(function (_ref) {
+            var _ref2 = _slicedToArray(_ref, 2);
+
+            var key = _ref2[0];
+            var value = _ref2[1];
+
+            return _react2.default.createElement(
+              Chip,
+              {
+                key: key,
+                className: _this2.props.theme.value,
+                deletable: true,
+                onDeleteClick: _this2.unselect.bind(_this2, key)
+              },
+              value
+            );
+          });
+
+          return _react2.default.createElement(
+            'ul',
+            { className: this.props.theme.values },
+            selectedItems
+          );
+        }
+      }
+    }, {
+      key: 'renderSuggestions',
+      value: function renderSuggestions() {
+        var _this3 = this;
+
+        var theme = this.props.theme;
+
+        var suggestions = [].concat(_toConsumableArray(this.suggestions())).map(function (_ref3) {
+          var _ref4 = _slicedToArray(_ref3, 2);
+
+          var key = _ref4[0];
+          var value = _ref4[1];
+
+          var className = (0, _classnames5.default)(theme.suggestion, _defineProperty({}, theme.active, _this3.state.active === key));
+          return _react2.default.createElement(
+            'li',
+            {
+              key: key,
+              className: className,
+              onMouseDown: _this3.select.bind(_this3, key),
+              onMouseOver: _this3.handleSuggestionHover.bind(_this3, key)
+            },
+            value
+          );
+        });
+
+        var className = (0, _classnames5.default)(theme.suggestions, _defineProperty({}, theme.up, this.state.direction === 'up'));
+        return _react2.default.createElement(
+          'ul',
+          { ref: 'suggestions', className: className },
+          suggestions
+        );
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _props = this.props;
+        var error = _props.error;
+        var label = _props.label;
+        var theme = _props.theme;
+
+        var other = _objectWithoutProperties(_props, ['error', 'label', 'theme']);
+
+        var className = (0, _classnames5.default)(theme.autocomplete, _defineProperty({}, theme.focus, this.state.focus), this.props.className);
+
+        return _react2.default.createElement(
+          'div',
+          { 'data-react-toolbox': 'autocomplete', className: className },
+          this.props.selectedPosition === 'above' ? this.renderSelected() : null,
+          _react2.default.createElement(Input, _extends({}, other, {
+            ref: 'input',
+            className: theme.input,
+            error: error,
+            label: label,
+            onBlur: this.handleQueryBlur,
+            onChange: this.handleQueryChange,
+            onFocus: this.handleQueryFocus,
+            onKeyDown: this.handleQueryKeyDown,
+            onKeyUp: this.handleQueryKeyUp,
+            value: this.state.query
+          })),
+          this.renderSuggestions(),
+          this.props.selectedPosition === 'below' ? this.renderSelected() : null
+        );
+      }
+    }]);
+
+    return Autocomplete;
+  }(_react.Component);
+
+  Autocomplete.propTypes = {
+    className: _react.PropTypes.string,
+    direction: _react.PropTypes.oneOf(['auto', 'up', 'down']),
+    disabled: _react.PropTypes.bool,
+    error: _react.PropTypes.string,
+    label: _react.PropTypes.string,
+    multiple: _react.PropTypes.bool,
+    onChange: _react.PropTypes.func,
+    selectedPosition: _react.PropTypes.oneOf(['above', 'below']),
+    showSuggestionsWhenValueIsSet: _react.PropTypes.bool,
+    source: _react.PropTypes.any,
+    theme: _react.PropTypes.shape({
+      active: _react.PropTypes.string.isRequired,
+      autocomplete: _react.PropTypes.string.isRequired,
+      focus: _react.PropTypes.string.isRequired,
+      input: _react.PropTypes.string.isRequired,
+      label: _react.PropTypes.string.isRequired,
+      suggestion: _react.PropTypes.string.isRequired,
+      suggestions: _react.PropTypes.string.isRequired,
+      up: _react.PropTypes.string.isRequired,
+      value: _react.PropTypes.string.isRequired,
+      values: _react.PropTypes.string.isRequired
+    }),
+    value: _react.PropTypes.any
+  };
+  Autocomplete.defaultProps = {
+    className: '',
+    direction: 'auto',
+    selectedPosition: 'above',
+    multiple: true,
+    showSuggestionsWhenValueIsSet: false,
+    source: {}
+  };
+
+
+  return Autocomplete;
+};
+
+var Autocomplete = factory(_Chip2.default, _Input2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.AUTOCOMPLETE)(Autocomplete);
+exports.autocompleteFactory = factory;
+exports.Autocomplete = Autocomplete;
\ No newline at end of file
diff --git a/lib/autocomplete/_config.scss b/lib/autocomplete/_config.scss
new file mode 100644
index 000000000..e0280558e
--- /dev/null
+++ b/lib/autocomplete/_config.scss
@@ -0,0 +1,7 @@
+$autocomplete-color-primary-contrast: $color-primary-contrast !default;
+$autocomplete-color-primary: $color-primary !default;
+$autocomplete-overflow-max-height: 45vh !default;
+$autocomplete-suggestion-active-background: $palette-grey-200 !default;
+$autocomplete-suggestion-padding: $unit !default;
+$autocomplete-suggestions-background: $color-white !default;
+$autocomplete-value-margin: $unit * .25 $unit * .5 $unit * .25 0 !default;
diff --git a/lib/autocomplete/index.js b/lib/autocomplete/index.js
new file mode 100644
index 000000000..6720adeae
--- /dev/null
+++ b/lib/autocomplete/index.js
@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Autocomplete = undefined;
+
+var _identifiers = require('../identifiers.js');
+
+var _reactCssThemr = require('react-css-themr');
+
+var _Autocomplete = require('./Autocomplete.js');
+
+var _chip = require('../chip');
+
+var _chip2 = _interopRequireDefault(_chip);
+
+var _input = require('../input');
+
+var _input2 = _interopRequireDefault(_input);
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Autocomplete = (0, _Autocomplete.autocompleteFactory)(_chip2.default, _input2.default);
+var ThemedAutocomplete = (0, _reactCssThemr.themr)(_identifiers.AUTOCOMPLETE, _theme2.default)(Autocomplete);
+
+exports.default = ThemedAutocomplete;
+exports.Autocomplete = ThemedAutocomplete;
\ No newline at end of file
diff --git a/lib/autocomplete/theme.scss b/lib/autocomplete/theme.scss
new file mode 100644
index 000000000..cb4854dbe
--- /dev/null
+++ b/lib/autocomplete/theme.scss
@@ -0,0 +1,83 @@
+@import "http://github.com/base";
+@import "http://github.com/config";
+@import "http://github.com/input/config";
+
+.autocomplete {
+  position: relative;
+  padding: $unit 0;
+  &.focus {
+    .label {
+      color: $autocomplete-color-primary;
+    }
+    .suggestions {
+      max-height: $autocomplete-overflow-max-height;
+      visibility: visible;
+      box-shadow: $zdepth-shadow-1;
+    }
+  }
+}
+
+.label {
+  font-size: $font-size-tiny;
+  color: $color-text-secondary;
+  transition: color $animation-duration $animation-curve-default;
+}
+
+.values {
+  flex-direction: row;
+  flex-wrap: wrap;
+  padding-bottom: $unit / 2;
+}
+
+.value {
+  margin: $autocomplete-value-margin;
+}
+
+.suggestions {
+  @include no-webkit-scrollbar;
+  position: absolute;
+  z-index: $z-index-high;
+  width: 100%;
+  max-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  visibility: hidden;
+  background-color: $autocomplete-suggestions-background;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transition-property: max-height, box-shadow;
+  &:not(.up) {
+    margin-top: - $input-padding;
+  }
+  &.up {
+    bottom: 0;
+  }
+}
+
+.suggestion {
+  padding: $autocomplete-suggestion-padding;
+  font-size: $input-field-font-size;
+  cursor: pointer;
+  &.active {
+    background-color: $autocomplete-suggestion-active-background;
+  }
+}
+
+.input {
+  position: relative;
+  &:after {
+    $size: ($input-field-height / 7);
+    $border: $size solid transparent;
+    position: absolute;
+    top: 50%;
+    right: $input-chevron-offset;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+    content: "";
+    border-top: $size solid $input-text-bottom-border-color;
+    border-right: $border;
+    border-left: $border;
+    transition: transform $animation-duration $animation-curve-default;
+  }
+}
diff --git a/lib/avatar/Avatar.js b/lib/avatar/Avatar.js
new file mode 100644
index 000000000..3f6b653e1
--- /dev/null
+++ b/lib/avatar/Avatar.js
@@ -0,0 +1,70 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Avatar = exports.avatarFactory = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _FontIcon = require('../font_icon/FontIcon.js');
+
+var _FontIcon2 = _interopRequireDefault(_FontIcon);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+var factory = function factory(FontIcon) {
+  var Avatar = function Avatar(_ref) {
+    var children = _ref.children;
+    var className = _ref.className;
+    var icon = _ref.icon;
+    var image = _ref.image;
+    var theme = _ref.theme;
+    var title = _ref.title;
+
+    var other = _objectWithoutProperties(_ref, ['children', 'className', 'icon', 'image', 'theme', 'title']);
+
+    return _react2.default.createElement(
+      'div',
+      _extends({ 'data-react-toolbox': 'avatar', className: theme.avatar + ' ' + className }, other),
+      children,
+      typeof image === 'string' ? _react2.default.createElement('img', { className: theme.image, src: image, title: title }) : image,
+      typeof icon === 'string' ? _react2.default.createElement(FontIcon, { className: theme.letter, value: icon }) : icon,
+      title ? _react2.default.createElement(
+        'span',
+        { className: theme.letter },
+        title[0]
+      ) : null
+    );
+  };
+
+  Avatar.propTypes = {
+    children: _react.PropTypes.node,
+    className: _react.PropTypes.string,
+    icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    image: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    theme: _react2.default.PropTypes.shape({
+      avatar: _react2.default.PropTypes.string.isRequired,
+      image: _react2.default.PropTypes.string.isRequired,
+      letter: _react2.default.PropTypes.string.isRequired
+    }),
+    title: _react.PropTypes.string
+  };
+
+  return Avatar;
+};
+
+var Avatar = factory(_FontIcon2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.AVATAR)(Avatar);
+exports.avatarFactory = factory;
+exports.Avatar = Avatar;
\ No newline at end of file
diff --git a/lib/avatar/_config.scss b/lib/avatar/_config.scss
new file mode 100644
index 000000000..a2922fb60
--- /dev/null
+++ b/lib/avatar/_config.scss
@@ -0,0 +1,4 @@
+$avatar-color: $color-white !default;
+$avatar-background: $palette-grey-500 !default;
+$avatar-size: 4 * $unit !default;
+$avatar-font-size: 2.4 * $unit !default;
diff --git a/lib/avatar/index.js b/lib/avatar/index.js
new file mode 100644
index 000000000..247561ab6
--- /dev/null
+++ b/lib/avatar/index.js
@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Avatar = undefined;
+
+var _identifiers = require('../identifiers.js');
+
+var _reactCssThemr = require('react-css-themr');
+
+var _Avatar = require('./Avatar.js');
+
+var _FontIcon = require('../font_icon/FontIcon.js');
+
+var _FontIcon2 = _interopRequireDefault(_FontIcon);
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Avatar = (0, _Avatar.avatarFactory)(_FontIcon2.default);
+var ThemedAvatar = (0, _reactCssThemr.themr)(_identifiers.AVATAR, _theme2.default)(Avatar);
+
+exports.default = ThemedAvatar;
+exports.Avatar = ThemedAvatar;
\ No newline at end of file
diff --git a/lib/avatar/theme.scss b/lib/avatar/theme.scss
new file mode 100644
index 000000000..714cc2f37
--- /dev/null
+++ b/lib/avatar/theme.scss
@@ -0,0 +1,42 @@
+@import "http://github.com/base";
+@import "http://github.com/config";
+
+.avatar {
+  position: relative;
+  display: inline-block;
+  width: $avatar-size;
+  height: $avatar-size;
+  overflow: hidden;
+  font-size: $avatar-font-size;
+  color: $avatar-color;
+  text-align: center;
+  vertical-align: middle;
+  background-color: $avatar-background;
+  border-radius: 50%;
+  > svg {
+    width: 1em;
+    height: $avatar-size;
+    fill: currentColor;
+  }
+  > img {
+    max-width: 100%;
+    height: auto;
+  }
+}
+
+.image {
+  position: absolute;
+  display: block;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  background-position: center;
+  background-size: cover;
+  border-radius: 50%;
+}
+
+.letter {
+  display: block;
+  width: 100%;
+  line-height: $avatar-size;
+}
diff --git a/lib/button/Button.js b/lib/button/Button.js
new file mode 100644
index 000000000..2b9e424f5
--- /dev/null
+++ b/lib/button/Button.js
@@ -0,0 +1,165 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Button = exports.buttonFactory = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _FontIcon = require('../font_icon/FontIcon.js');
+
+var _FontIcon2 = _interopRequireDefault(_FontIcon);
+
+var _Ripple = require('../ripple/Ripple.js');
+
+var _Ripple2 = _interopRequireDefault(_Ripple);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(ripple, FontIcon) {
+  var Button = function (_Component) {
+    _inherits(Button, _Component);
+
+    function Button() {
+      var _Object$getPrototypeO;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, Button);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Button)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
+        _this.refs.button.blur();
+        if (_this.props.onMouseUp) _this.props.onMouseUp(event);
+      }, _this.handleMouseLeave = function (event) {
+        _this.refs.button.blur();
+        if (_this.props.onMouseLeave) _this.props.onMouseLeave(event);
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(Button, [{
+      key: 'render',
+      value: function render() {
+        var _classnames;
+
+        var _props = this.props;
+        var accent = _props.accent;
+        var children = _props.children;
+        var className = _props.className;
+        var flat = _props.flat;
+        var floating = _props.floating;
+        var href = _props.href;
+        var icon = _props.icon;
+        var inverse = _props.inverse;
+        var label = _props.label;
+        var mini = _props.mini;
+        var neutral = _props.neutral;
+        var primary = _props.primary;
+        var theme = _props.theme;
+        var raised = _props.raised;
+
+        var others = _objectWithoutProperties(_props, ['accent', 'children', 'className', 'flat', 'floating', 'href', 'icon', 'inverse', 'label', 'mini', 'neutral', 'primary', 'theme', 'raised']);
+
+        var element = href ? 'a' : 'button';
+        var level = primary ? 'primary' : accent ? 'accent' : 'neutral';
+        var shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : 'flat';
+
+        var classes = (0, _classnames3.default)(theme.button, [theme[shape]], (_classnames = {}, _defineProperty(_classnames, theme[level], neutral), _defineProperty(_classnames, theme.mini, mini), _defineProperty(_classnames, theme.inverse, inverse), _classnames), className);
+
+        var props = _extends({}, others, {
+          href: href,
+          ref: 'button',
+          className: classes,
+          disabled: this.props.disabled,
+          onMouseUp: this.handleMouseUp,
+          onMouseLeave: this.handleMouseLeave,
+          'data-react-toolbox': 'button'
+        });
+
+        return _react2.default.createElement(element, props, icon ? _react2.default.createElement(FontIcon, { className: theme.icon, value: icon }) : null, label, children);
+      }
+    }]);
+
+    return Button;
+  }(_react.Component);
+
+  Button.propTypes = {
+    accent: _react.PropTypes.bool,
+    children: _react.PropTypes.node,
+    className: _react.PropTypes.string,
+    disabled: _react.PropTypes.bool,
+    flat: _react.PropTypes.bool,
+    floating: _react.PropTypes.bool,
+    href: _react.PropTypes.string,
+    icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    inverse: _react.PropTypes.bool,
+    label: _react.PropTypes.string,
+    mini: _react.PropTypes.bool,
+    neutral: _react.PropTypes.bool,
+    onMouseLeave: _react.PropTypes.func,
+    onMouseUp: _react.PropTypes.func,
+    primary: _react.PropTypes.bool,
+    raised: _react.PropTypes.bool,
+    theme: _react.PropTypes.shape({
+      accent: _react.PropTypes.string,
+      button: _react.PropTypes.string,
+      flat: _react.PropTypes.string,
+      floating: _react.PropTypes.string,
+      icon: _react.PropTypes.string,
+      inverse: _react.PropTypes.string,
+      mini: _react.PropTypes.string,
+      neutral: _react.PropTypes.string,
+      primary: _react.PropTypes.string,
+      raised: _react.PropTypes.string,
+      rippleWrapper: _react.PropTypes.string,
+      toggle: _react.PropTypes.string
+    }),
+    type: _react.PropTypes.string
+  };
+  Button.defaultProps = {
+    accent: false,
+    className: '',
+    flat: false,
+    floating: false,
+    mini: false,
+    neutral: true,
+    primary: false,
+    raised: false
+  };
+
+
+  return ripple(Button);
+};
+
+var Button = factory((0, _Ripple2.default)({ centered: false }), _FontIcon2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.BUTTON)(Button);
+exports.buttonFactory = factory;
+exports.Button = Button;
\ No newline at end of file
diff --git a/lib/button/IconButton.js b/lib/button/IconButton.js
new file mode 100644
index 000000000..c625fee3f
--- /dev/null
+++ b/lib/button/IconButton.js
@@ -0,0 +1,136 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconButton = exports.iconButtonFactory = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _FontIcon = require('../font_icon/FontIcon.js');
+
+var _FontIcon2 = _interopRequireDefault(_FontIcon);
+
+var _Ripple = require('../ripple/Ripple.js');
+
+var _Ripple2 = _interopRequireDefault(_Ripple);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(ripple, FontIcon) {
+  var IconButton = function (_Component) {
+    _inherits(IconButton, _Component);
+
+    function IconButton() {
+      var _Object$getPrototypeO;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, IconButton);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(IconButton)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
+        _this.refs.button.blur();
+        if (_this.props.onMouseUp) _this.props.onMouseUp(event);
+      }, _this.handleMouseLeave = function (event) {
+        _this.refs.button.blur();
+        if (_this.props.onMouseLeave) _this.props.onMouseLeave(event);
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(IconButton, [{
+      key: 'render',
+      value: function render() {
+        var _classnames;
+
+        var _props = this.props;
+        var accent = _props.accent;
+        var children = _props.children;
+        var className = _props.className;
+        var href = _props.href;
+        var icon = _props.icon;
+        var inverse = _props.inverse;
+        var neutral = _props.neutral;
+        var primary = _props.primary;
+        var theme = _props.theme;
+
+        var others = _objectWithoutProperties(_props, ['accent', 'children', 'className', 'href', 'icon', 'inverse', 'neutral', 'primary', 'theme']);
+
+        var element = href ? 'a' : 'button';
+        var level = primary ? 'primary' : accent ? 'accent' : 'neutral';
+        var classes = (0, _classnames3.default)([theme.toggle], (_classnames = {}, _defineProperty(_classnames, theme[level], neutral), _defineProperty(_classnames, theme.inverse, inverse), _classnames), className);
+
+        var props = _extends({}, others, {
+          href: href,
+          ref: 'button',
+          className: classes,
+          disabled: this.props.disabled,
+          onMouseUp: this.handleMouseUp,
+          onMouseLeave: this.handleMouseLeave,
+          'data-react-toolbox': 'button'
+        });
+
+        return _react2.default.createElement(element, props, icon ? _react2.default.createElement(FontIcon, { className: theme.icon, value: icon }) : null, children);
+      }
+    }]);
+
+    return IconButton;
+  }(_react.Component);
+
+  IconButton.propTypes = {
+    accent: _react2.default.PropTypes.bool,
+    children: _react2.default.PropTypes.node,
+    className: _react2.default.PropTypes.string,
+    disabled: _react2.default.PropTypes.bool,
+    href: _react2.default.PropTypes.string,
+    icon: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.element]),
+    inverse: _react2.default.PropTypes.bool,
+    neutral: _react2.default.PropTypes.bool,
+    onMouseLeave: _react2.default.PropTypes.func,
+    onMouseUp: _react2.default.PropTypes.func,
+    primary: _react2.default.PropTypes.bool,
+    theme: _react2.default.PropTypes.object,
+    type: _react2.default.PropTypes.string
+  };
+  IconButton.defaultProps = {
+    accent: false,
+    className: '',
+    neutral: true,
+    primary: false
+  };
+
+
+  return ripple(IconButton);
+};
+
+var IconButton = factory((0, _Ripple2.default)({ centered: true }), _FontIcon2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.BUTTON)(IconButton);
+exports.iconButtonFactory = factory;
+exports.IconButton = IconButton;
\ No newline at end of file
diff --git a/lib/button/__test__/index.spec.js b/lib/button/__test__/index.spec.js
new file mode 100644
index 000000000..67d402c74
--- /dev/null
+++ b/lib/button/__test__/index.spec.js
@@ -0,0 +1,66 @@
+'use strict';
+
+var _expect = require('expect');
+
+var _expect2 = _interopRequireDefault(_expect);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactDom = require('react-dom');
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
+var _reactAddonsTestUtils = require('react-addons-test-utils');
+
+var _reactAddonsTestUtils2 = _interopRequireDefault(_reactAddonsTestUtils);
+
+var _theme = require('../theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+var _Button = require('../Button');
+
+var _Button2 = _interopRequireDefault(_Button);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var getRenderedClassName = function getRenderedClassName(tree, Component) {
+  var rendered = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, Component);
+  return _reactDom2.default.findDOMNode(rendered).getAttribute('class');
+};
+
+describe('Button', function () {
+  describe('#render', function () {
+    it('uses flat and neutral styles by default', function () {
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Button2.default, { theme: _theme2.default }));
+      var className = getRenderedClassName(tree, _Button.Button);
+      (0, _expect2.default)(className).toContain(_theme2.default.flat);
+      (0, _expect2.default)(className).toContain(_theme2.default.neutral);
+    });
+
+    it('renders accent button with accent style', function () {
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Button2.default, { accent: true, theme: _theme2.default }));
+      var className = getRenderedClassName(tree, _Button.Button);
+      (0, _expect2.default)(className).toContain(_theme2.default.flat);
+      (0, _expect2.default)(className).toContain(_theme2.default.accent);
+    });
+
+    it('renders mini button with mini style', function () {
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Button2.default, { floating: true, mini: true, theme: _theme2.default }));
+      var className = getRenderedClassName(tree, _Button.Button);
+      (0, _expect2.default)(className).toContain(_theme2.default.floating);
+      (0, _expect2.default)(className).toContain(_theme2.default.neutral);
+      (0, _expect2.default)(className).toContain(_theme2.default.mini);
+    });
+
+    it('renders mini accented button with both styles', function () {
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Button2.default, { accent: true, mini: true, theme: _theme2.default }));
+      var className = getRenderedClassName(tree, _Button.Button);
+      (0, _expect2.default)(className).toContain(_theme2.default.flat);
+      (0, _expect2.default)(className).toContain(_theme2.default.accent);
+      (0, _expect2.default)(className).toContain(_theme2.default.mini);
+    });
+  });
+});
\ No newline at end of file
diff --git a/lib/button/_config.scss b/lib/button/_config.scss
new file mode 100644
index 000000000..4a37d8b0c
--- /dev/null
+++ b/lib/button/_config.scss
@@ -0,0 +1,21 @@
+$button-neutral-color: $color-white !default;
+$button-neutral-color-contrast: $palette-grey-900 !default;
+$button-neutral-color-hover: rgba($palette-grey-900, .2) !default;
+$button-primary-color-contrast: $color-primary-contrast !default;
+$button-primary-color-hover: rgba($color-primary, .2) !default;
+$button-primary-color: $color-primary !default;
+$button-accent-color-contrast: $color-primary-contrast !default;
+$button-accent-color-hover: rgba($color-accent, .2) !default;
+$button-accent-color: $color-accent !default;
+$button-disabled-text-color: rgba($color-black, 0.26) !default;
+$button-disabled-background-color: rgba($color-black, 0.12) !default;
+$button-border-radius: 0.2 * $unit !default;
+$button-floating-font-size: $unit * 2.4 !default;
+$button-floating-height: $unit * 5.6 !default;
+$button-floating-mini-height: $unit * 4 !default;
+$button-floating-mini-font-size: $button-floating-mini-height / 2.25 !default;
+$button-height: $unit * 3.6 !default;
+$button-squared-icon-margin: $unit * .6 !default;
+$button-squared-min-width: 9 * $unit !default;
+$button-squared-padding: 0 $unit * 1.2 !default;
+$button-toggle-font-size: $unit * 2 !default;
diff --git a/lib/button/index.js b/lib/button/index.js
new file mode 100644
index 000000000..60623eae7
--- /dev/null
+++ b/lib/button/index.js
@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconButton = exports.Button = undefined;
+
+var _identifiers = require('../identifiers.js');
+
+var _reactCssThemr = require('react-css-themr');
+
+var _Button = require('./Button.js');
+
+var _IconButton = require('./IconButton.js');
+
+var _FontIcon = require('../font_icon/FontIcon.js');
+
+var _FontIcon2 = _interopRequireDefault(_FontIcon);
+
+var _ripple = require('../ripple');
+
+var _ripple2 = _interopRequireDefault(_ripple);
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Button = (0, _Button.buttonFactory)((0, _ripple2.default)({ centered: false }), _FontIcon2.default);
+var IconButton = (0, _IconButton.iconButtonFactory)((0, _ripple2.default)({ centered: true }), _FontIcon2.default);
+var ThemedButton = (0, _reactCssThemr.themr)(_identifiers.BUTTON, _theme2.default)(Button);
+var ThemedIconButton = (0, _reactCssThemr.themr)(_identifiers.BUTTON, _theme2.default)(IconButton);
+
+exports.default = ThemedButton;
+exports.Button = ThemedButton;
+exports.IconButton = ThemedIconButton;
\ No newline at end of file
diff --git a/lib/button/theme.scss b/lib/button/theme.scss
new file mode 100644
index 000000000..e28fb5ca1
--- /dev/null
+++ b/lib/button/theme.scss
@@ -0,0 +1,165 @@
+@import "http://github.com/base";
+@import "http://github.com/config";
+
+.button {
+  position: relative;
+}
+
+%button {
+  @include typo-button();
+  position: relative;
+  display: inline-block;
+  height: $button-height;
+  flex-direction: row;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  border: 0;
+  outline: none;
+  transition: box-shadow .2s $animation-curve-fast-out-linear-in, background-color .2s $animation-curve-default, color .2s $animation-curve-default;
+  &::-moz-focus-inner {
+    border: 0;
+  }
+  > span:not([data-react-toolbox="tooltip"]) {
+    display: inline-block;
+    line-height: $button-height;
+    vertical-align: middle;
+  }
+  > svg {
+    display: inline-block;
+    width: 1em;
+    height: $button-height;
+    font-size: 120%;
+    vertical-align: middle;
+    fill: currentColor;
+  }
+  > * {
+    pointer-events: none;
+  }
+  > .rippleWrapper {
+    overflow: hidden;
+  }
+  &[disabled] {
+    color: $button-disabled-text-color;
+    pointer-events: none;
+    cursor: auto;
+  }
+}
+
+%squared {
+  min-width: $button-squared-min-width;
+  padding: $button-squared-padding;
+  border-radius: $button-border-radius;
+  .icon {
+    margin-right: $button-squared-icon-margin;
+    font-size: 120%;
+    vertical-align: middle;
+  }
+  > svg {
+    margin-right: .5 * $unit;
+  }
+}
+
+%solid {
+  &[disabled] {
+    @include shadow-2dp();
+    background-color: $button-disabled-background-color;
+  }
+  &:active {
+    @include shadow-4dp();
+  }
+  &:focus:not(:active) {
+    @include focus-shadow();
+  }
+}
+
+.raised {
+  @extend %button;
+  @extend %squared;
+  @extend %solid;
+  @include shadow-2dp();
+}
+
+.flat {
+  @extend %button;
+  @extend %squared;
+  background: transparent;
+}
+
+.floating {
+  @extend %button;
+  @extend %solid;
+  width: $button-floating-height;
+  height: $button-floating-height;
+  font-size: $button-floating-font-size;
+  border-radius: 50%;
+  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);
+  .icon {
+    line-height: $button-floating-height;
+  }
+  > .rippleWrapper {
+    border-radius: 50%;
+  }
+  &.mini {
+    width: $button-floating-mini-height;
+    height: $button-floating-mini-height;
+    font-size: $button-floating-mini-font-size;
+    .icon {
+      line-height: $button-floating-mini-height;
+    }
+  }
+}
+
+.toggle {
+  @extend %button;
+  width: $button-height;
+  background: transparent;
+  border-radius: 50%;
+  > .icon, svg {
+    font-size: $button-toggle-font-size;
+    line-height: $button-height;
+    vertical-align: middle;
+  }
+  > .rippleWrapper {
+    border-radius: 50%;
+  }
+}
+
+.neutral:not([disabled]) {
+  &.raised, &.floating {
+    color: $button-neutral-color-contrast;
+    background-color: $button-neutral-color;
+  }
+  &.flat, &.toggle {
+    color: $button-neutral-color-contrast;
+    &:focus:not(:active) {
+      background: $button-neutral-color-hover;
+    }
+  }
+  &.flat:hover {
+    background: $button-neutral-color-hover;
+  }
+
+  &.inverse {
+    &.raised, &.floating {
+      color: $button-neutral-color;
+      background-color: $button-neutral-color-contrast;
+    }
+    &.flat, &.toggle {
+      color: $button-neutral-color;
+      &:focus:not(:active) {
+        background: $button-neutral-color-hover;
+      }
+    }
+    &.flat:hover {
+      background: $button-neutral-color-hover;
+    }
+  }
+}
+
+@include btn-colors("primary", $button-primary-color-contrast, $button-primary-color, $button-primary-color-hover);
+@include btn-colors("accent", $button-accent-color-contrast, $button-accent-color, $button-accent-color-hover);
diff --git a/lib/card/Card.js b/lib/card/Card.js
new file mode 100644
index 000000000..d2bb824c0
--- /dev/null
+++ b/lib/card/Card.js
@@ -0,0 +1,56 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Card = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _identifiers = require('../identifiers.js');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+var Card = function Card(_ref) {
+  var children = _ref.children;
+  var className = _ref.className;
+  var raised = _ref.raised;
+  var theme = _ref.theme;
+
+  var other = _objectWithoutProperties(_ref, ['children', 'className', 'raised', 'theme']);
+
+  var classes = (0, _classnames3.default)(theme.card, _defineProperty({}, theme.raised, raised), className);
+
+  return _react2.default.createElement(
+    'div',
+    _extends({ 'data-react-toolbox': 'card', className: classes }, other),
+    children
+  );
+};
+
+Card.propTypes = {
+  children: _react.PropTypes.any,
+  className: _react.PropTypes.string,
+  raised: _react.PropTypes.bool,
+  theme: _react2.default.PropTypes.shape({
+    card: _react2.default.PropTypes.string,
+    raised: _react2.default.PropTypes.string
+  })
+};
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.CARD)(Card);
+exports.Card = Card;
\ No newline at end of file
diff --git a/lib/card/CardActions.js b/lib/card/CardActions.js
new file mode 100644
index 000000000..80cf7b2c2
--- /dev/null
+++ b/lib/card/CardActions.js
@@ -0,0 +1,49 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CardActions = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _identifiers = require('../identifiers.js');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+var CardActions = function CardActions(_ref) {
+  var children = _ref.children;
+  var className = _ref.className;
+  var theme = _ref.theme;
+
+  var other = _objectWithoutProperties(_ref, ['children', 'className', 'theme']);
+
+  return _react2.default.createElement(
+    'div',
+    _extends({ className: (0, _classnames2.default)(theme.cardActions, className) }, other),
+    children
+  );
+};
+
+CardActions.propTypes = {
+  children: _react.PropTypes.any,
+  className: _react.PropTypes.string,
+  theme: _react2.default.PropTypes.shape({
+    cardActions: _react2.default.PropTypes.string.isRequired
+  })
+};
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.CARD)(CardActions);
+exports.CardActions = CardActions;
\ No newline at end of file
diff --git a/lib/card/CardMedia.js b/lib/card/CardMedia.js
new file mode 100644
index 000000000..473fd89aa
--- /dev/null
+++ b/lib/card/CardMedia.js
@@ -0,0 +1,76 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CardMedia = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _classnames3 = require('classnames');
+
+var _classnames4 = _interopRequireDefault(_classnames3);
+
+var _identifiers = require('../identifiers.js');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+var CardMedia = function CardMedia(_ref) {
+  var aspectRatio = _ref.aspectRatio;
+  var children = _ref.children;
+  var className = _ref.className;
+  var color = _ref.color;
+  var contentOverlay = _ref.contentOverlay;
+  var image = _ref.image;
+  var theme = _ref.theme;
+
+  var other = _objectWithoutProperties(_ref, ['aspectRatio', 'children', 'className', 'color', 'contentOverlay', 'image', 'theme']);
+
+  var classes = (0, _classnames4.default)(theme.cardMedia, _defineProperty({}, theme[aspectRatio], aspectRatio), className);
+
+  var innerClasses = (0, _classnames4.default)(theme.content, _defineProperty({}, theme.contentOverlay, contentOverlay));
+
+  var bgStyle = {
+    backgroundColor: color ? color : undefined,
+    backgroundImage: typeof image === 'string' ? 'url(http://github.com/''%20+%20image%20+%20'/')' : undefined
+  };
+
+  return _react2.default.createElement(
+    'div',
+    _extends({ style: bgStyle, className: classes }, other),
+    _react2.default.createElement(
+      'div',
+      { className: innerClasses },
+      children
+    )
+  );
+};
+
+CardMedia.propTypes = {
+  aspectRatio: _react.PropTypes.oneOf(['wide', 'square']),
+  children: _react.PropTypes.any,
+  className: _react.PropTypes.string,
+  color: _react.PropTypes.string,
+  contentOverlay: _react.PropTypes.bool,
+  image: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+  theme: _react2.default.PropTypes.shape({
+    cardMedia: _react2.default.PropTypes.string.isRequired,
+    content: _react2.default.PropTypes.string.isRequired,
+    contentOverlay: _react2.default.PropTypes.string.isRequired,
+    square: _react2.default.PropTypes.string.isRequired,
+    wide: _react2.default.PropTypes.string.isRequired
+  })
+};
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.CARD)(CardMedia);
+exports.CardMedia = CardMedia;
\ No newline at end of file
diff --git a/lib/card/CardText.js b/lib/card/CardText.js
new file mode 100644
index 000000000..00598ff16
--- /dev/null
+++ b/lib/card/CardText.js
@@ -0,0 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CardText = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _identifiers = require('../identifiers.js');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+var CardText = function CardText(_ref) {
+  var children = _ref.children;
+  var className = _ref.className;
+  var theme = _ref.theme;
+
+  var other = _objectWithoutProperties(_ref, ['children', 'className', 'theme']);
+
+  return _react2.default.createElement(
+    'div',
+    _extends({ className: (0, _classnames2.default)(theme.cardText, className) }, other),
+    typeof children === 'string' ? _react2.default.createElement(
+      'p',
+      null,
+      children
+    ) : children
+  );
+};
+
+CardText.propTypes = {
+  children: _react.PropTypes.any,
+  className: _react.PropTypes.string,
+  theme: _react2.default.PropTypes.shape({
+    cardText: _react2.default.PropTypes.string.isRequired
+  })
+};
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.CARD)(CardText);
+exports.CardText = CardText;
\ No newline at end of file
diff --git a/lib/card/CardTitle.js b/lib/card/CardTitle.js
new file mode 100644
index 000000000..fab4aff87
--- /dev/null
+++ b/lib/card/CardTitle.js
@@ -0,0 +1,94 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cardTitleFactory = exports.CardTitle = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Avatar = require('../avatar/Avatar.js');
+
+var _Avatar2 = _interopRequireDefault(_Avatar);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+var factory = function factory(Avatar) {
+  var CardTitle = function CardTitle(_ref) {
+    var _classnames;
+
+    var avatar = _ref.avatar;
+    var children = _ref.children;
+    var className = _ref.className;
+    var subtitle = _ref.subtitle;
+    var theme = _ref.theme;
+    var title = _ref.title;
+
+    var other = _objectWithoutProperties(_ref, ['avatar', 'children', 'className', 'subtitle', 'theme', 'title']);
+
+    var classes = (0, _classnames3.default)(theme.cardTitle, (_classnames = {}, _defineProperty(_classnames, theme.small, avatar), _defineProperty(_classnames, theme.large, !avatar), _classnames), className);
+
+    return _react2.default.createElement(
+      'div',
+      _extends({ className: classes }, other),
+      typeof avatar === 'string' ? _react2.default.createElement(Avatar, { image: avatar }) : avatar,
+      _react2.default.createElement(
+        'div',
+        null,
+        title && _react2.default.createElement(
+          'h5',
+          { className: theme.title },
+          title
+        ),
+        children && typeof children === 'string' && _react2.default.createElement(
+          'h5',
+          { className: theme.title },
+          children
+        ),
+        subtitle && _react2.default.createElement(
+          'p',
+          { className: theme.subtitle },
+          subtitle
+        ),
+        children && typeof children !== 'string' && children
+      )
+    );
+  };
+
+  CardTitle.propTypes = {
+    avatar: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    children: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element, _react.PropTypes.array]),
+    className: _react.PropTypes.string,
+    subtitle: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    theme: _react2.default.PropTypes.shape({
+      large: _react2.default.PropTypes.string.isRequired,
+      title: _react2.default.PropTypes.string.isRequired,
+      small: _react2.default.PropTypes.string.isRequired,
+      subtitle: _react2.default.PropTypes.string.isRequired
+    }),
+    title: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element])
+  };
+
+  return CardTitle;
+};
+
+var CardTitle = factory(_Avatar2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.CARD)(CardTitle);
+exports.CardTitle = CardTitle;
+exports.cardTitleFactory = factory;
\ No newline at end of file
diff --git a/lib/card/_config.scss b/lib/card/_config.scss
new file mode 100644
index 000000000..c89b3cb53
--- /dev/null
+++ b/lib/card/_config.scss
@@ -0,0 +1,7 @@
+$card-color-white: $color-white !default;
+$card-text-overlay: rgba($color-black, 0.35) !default;
+$card-background-color: $card-color-white !default;
+$card-padding-sm: .8 * $unit !default;
+$card-padding: 1.6 * $unit !default;
+$card-padding-lg: 2 * $unit !default;
+$card-font-size: $font-size-small !default;
diff --git a/lib/card/index.js b/lib/card/index.js
new file mode 100644
index 000000000..d124b681e
--- /dev/null
+++ b/lib/card/index.js
@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CardTitle = exports.CardText = exports.CardMedia = exports.CardActions = exports.Card = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Card = require('./Card.js');
+
+var _CardActions = require('./CardActions.js');
+
+var _CardMedia = require('./CardMedia.js');
+
+var _CardText = require('./CardText.js');
+
+var _CardTitle = require('./CardTitle.js');
+
+var _avatar = require('../avatar');
+
+var _avatar2 = _interopRequireDefault(_avatar);
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var CardTitle = (0, _CardTitle.cardTitleFactory)(_avatar2.default);
+var ThemedCard = (0, _reactCssThemr.themr)(_identifiers.CARD, _theme2.default)(_Card.Card);
+var ThemedCardActions = (0, _reactCssThemr.themr)(_identifiers.CARD, _theme2.default)(_CardActions.CardActions);
+var ThemedCardMedia = (0, _reactCssThemr.themr)(_identifiers.CARD, _theme2.default)(_CardMedia.CardMedia);
+var ThemedCardText = (0, _reactCssThemr.themr)(_identifiers.CARD, _theme2.default)(_CardText.CardText);
+var ThemedCardTitle = (0, _reactCssThemr.themr)(_identifiers.CARD, _theme2.default)(CardTitle);
+
+exports.default = ThemedCard;
+exports.Card = ThemedCard;
+exports.CardActions = ThemedCardActions;
+exports.CardMedia = ThemedCardMedia;
+exports.CardText = ThemedCardText;
+exports.CardTitle = ThemedCardTitle;
\ No newline at end of file
diff --git a/lib/card/theme.scss b/lib/card/theme.scss
new file mode 100644
index 000000000..a435c7d8b
--- /dev/null
+++ b/lib/card/theme.scss
@@ -0,0 +1,120 @@
+@import "http://github.com/base";
+@import "http://github.com/config";
+
+.card {
+  @include shadow-2dp();
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  overflow: hidden;
+  font-size: $card-font-size;
+  background: $card-background-color;
+  border-radius: .2 * $unit;
+  &.raised {
+    @include shadow-8dp();
+  }
+  [data-react-toolbox="avatar"] {
+    display: block;
+  }
+}
+
+.cardMedia {
+  position: relative;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: cover;
+  &.wide, &.square {
+    width: 100%;
+    height: 0;
+    .content {
+      position: absolute;
+      height: 100%;
+    }
+    .content > iframe, .content > video, .content > img {
+      max-width: 100%;
+    }
+  }
+  &.wide {
+    padding-top: 56.25%;
+  }
+  &.square {
+    padding-top: 100%;
+  }
+  .content {
+    position: relative;
+    top: 0;
+    left: 0;
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    justify-content: flex-end;
+    overflow: hidden;
+  }
+  .contentOverlay {
+    .cardTitle, .cardActions, .cardText {
+      background-color: $card-text-overlay;
+    }
+  }
+}
+
+.cardTitle {
+  display: flex;
+  align-items: center;
+  [data-react-toolbox="avatar"] {
+    margin-right: 1.3 * $unit;
+  }
+  .subtitle {
+    color: $color-text-secondary;
+  }
+  &.large {
+    padding: $card-padding-lg $card-padding ($card-padding - .2 * $unit);
+    .title {
+      @include typo-headline();
+      line-height: 1.25;
+    }
+  }
+  &.small {
+    padding: $card-padding;
+    .title {
+      @include typo-body-2(false, true);
+      line-height: 1.4;
+    }
+    .subtitle {
+      font-weight: 500;
+      line-height: 1.4;
+    }
+  }
+  .cardMedia & {
+    .title, .subtitle {
+      color: $card-color-white;
+    }
+  }
+}
+
+.cardTitle, .cardText {
+  padding: ($card-padding - .2 * $unit) $card-padding;
+  &:last-child {
+    padding-bottom: $card-padding-lg;
+  }
+  + .cardText {
+    padding-top: 0;
+  }
+}
+
+.cardActions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: $card-padding-sm;
+  [data-react-toolbox="button"] {
+    min-width: 0;
+    padding: 0 $card-padding-sm;
+    margin: 0 $card-padding-sm / 2;
+    &:first-child {
+      margin-left: 0;
+    }
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
diff --git a/lib/checkbox/Check.js b/lib/checkbox/Check.js
new file mode 100644
index 000000000..26b1139c4
--- /dev/null
+++ b/lib/checkbox/Check.js
@@ -0,0 +1,49 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var factory = function factory(ripple) {
+  var Check = function Check(_ref) {
+    var checked = _ref.checked;
+    var children = _ref.children;
+    var onMouseDown = _ref.onMouseDown;
+    var theme = _ref.theme;
+    return _react2.default.createElement(
+      'div',
+      {
+        'data-react-toolbox': 'check',
+        className: (0, _classnames3.default)(theme.check, _defineProperty({}, theme.checked, checked)),
+        onMouseDown: onMouseDown
+      },
+      children
+    );
+  };
+
+  Check.propTypes = {
+    checked: _react.PropTypes.bool,
+    children: _react.PropTypes.any,
+    onMouseDown: _react.PropTypes.func,
+    theme: _react2.default.PropTypes.shape({
+      check: _react2.default.PropTypes.string.isRequired,
+      checked: _react2.default.PropTypes.string.isRequired
+    })
+  };
+
+  return ripple(Check);
+};
+
+exports.default = factory;
\ No newline at end of file
diff --git a/lib/checkbox/Checkbox.js b/lib/checkbox/Checkbox.js
new file mode 100644
index 000000000..ac920fecc
--- /dev/null
+++ b/lib/checkbox/Checkbox.js
@@ -0,0 +1,144 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Checkbox = exports.checkboxFactory = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Ripple = require('../ripple/Ripple.js');
+
+var _Ripple2 = _interopRequireDefault(_Ripple);
+
+var _Check = require('./Check.js');
+
+var _Check2 = _interopRequireDefault(_Check);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(Check) {
+  var Checkbox = function (_Component) {
+    _inherits(Checkbox, _Component);
+
+    function Checkbox() {
+      var _Object$getPrototypeO;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, Checkbox);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Checkbox)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleToggle = function (event) {
+        if (event.pageX !== 0 && event.pageY !== 0) _this.blur();
+        if (!_this.props.disabled && _this.props.onChange) {
+          _this.props.onChange(!_this.props.checked, event);
+        }
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(Checkbox, [{
+      key: 'blur',
+      value: function blur() {
+        this.refs.input.blur();
+      }
+    }, {
+      key: 'focus',
+      value: function focus() {
+        this.refs.input.focus();
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _props = this.props;
+        var onChange = _props.onChange;
+        var theme = _props.theme;
+
+        var others = _objectWithoutProperties(_props, ['onChange', 'theme']); //eslint-disable-line no-unused-vars
+
+
+        var className = (0, _classnames3.default)(theme.field, _defineProperty({}, theme.disabled, this.props.disabled), this.props.className);
+
+        return _react2.default.createElement(
+          'label',
+          { 'data-react-toolbox': 'checkbox', className: className },
+          _react2.default.createElement('input', _extends({}, others, {
+            className: theme.input,
+            onClick: this.handleToggle,
+            readOnly: true,
+            ref: 'input',
+            type: 'checkbox'
+          })),
+          _react2.default.createElement(Check, {
+            checked: this.props.checked,
+            disabled: this.props.disabled,
+            rippleClassName: theme.ripple,
+            theme: this.props.theme
+          }),
+          this.props.label ? _react2.default.createElement(
+            'span',
+            { 'data-react-toolbox': 'label', className: theme.text },
+            this.props.label
+          ) : null
+        );
+      }
+    }]);
+
+    return Checkbox;
+  }(_react.Component);
+
+  Checkbox.propTypes = {
+    checked: _react.PropTypes.bool,
+    className: _react.PropTypes.string,
+    disabled: _react.PropTypes.bool,
+    label: _react.PropTypes.any,
+    onChange: _react.PropTypes.func,
+    theme: _react.PropTypes.shape({
+      disabled: _react.PropTypes.string.isRequired,
+      field: _react.PropTypes.string.isRequired,
+      input: _react.PropTypes.string.isRequired,
+      ripple: _react.PropTypes.string.isRequired
+    })
+  };
+  Checkbox.defaultProps = {
+    checked: false,
+    className: '',
+    disabled: false
+  };
+
+
+  return Checkbox;
+};
+
+var Check = (0, _Check2.default)((0, _Ripple2.default)({ centered: true, spread: 2.6 }));
+var Checkbox = factory(Check);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.CHECKBOX)(Checkbox);
+exports.checkboxFactory = factory;
+exports.Checkbox = Checkbox;
\ No newline at end of file
diff --git a/lib/checkbox/_config.scss b/lib/checkbox/_config.scss
new file mode 100644
index 000000000..18266e498
--- /dev/null
+++ b/lib/checkbox/_config.scss
@@ -0,0 +1,12 @@
+$checkbox-color: $color-primary !default;
+$checkbox-disabled-color: rgba($color-black, 0.26) !default;
+$checkbox-field-margin-bottom: 1.5 * $unit !default;
+$checkbox-focus-checked-color: rgba($color-primary, 0.26) !default;
+$checkbox-ripple-duration: 650ms !default;
+$checkbox-size: 1.8 * $unit !default;
+$checkbox-focus-color: rgba($color-black, 0.1) !default;
+$checkbox-focus-size: $checkbox-size * 2.3 !default;
+$checkbox-text-color: $color-black !default;
+$checkbox-text-font-size: $font-size-small !default;
+$checkbox-total-height: 1.8 * $unit !default;
+$checkbox-transition-duration: .2s !default;
diff --git a/lib/checkbox/index.js b/lib/checkbox/index.js
new file mode 100644
index 000000000..5efa6e16c
--- /dev/null
+++ b/lib/checkbox/index.js
@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Checkbox = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _ripple = require('../ripple');
+
+var _ripple2 = _interopRequireDefault(_ripple);
+
+var _Checkbox = require('./Checkbox.js');
+
+var _Check = require('./Check.js');
+
+var _Check2 = _interopRequireDefault(_Check);
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ThemedCheck = (0, _Check2.default)((0, _ripple2.default)({ centered: true, spread: 2.6 }));
+var ThemedCheckbox = (0, _reactCssThemr.themr)(_identifiers.CHECKBOX, _theme2.default)((0, _Checkbox.checkboxFactory)(ThemedCheck));
+
+exports.default = ThemedCheckbox;
+exports.Checkbox = ThemedCheckbox;
\ No newline at end of file
diff --git a/lib/checkbox/theme.scss b/lib/checkbox/theme.scss
new file mode 100644
index 000000000..da0cfb7cd
--- /dev/null
+++ b/lib/checkbox/theme.scss
@@ -0,0 +1,118 @@
+@import "http://github.com/base";
+@import "http://github.com/config";
+
+.field {
+  position: relative;
+  display: block;
+  height: $checkbox-size;
+  margin-bottom: $checkbox-field-margin-bottom;
+  white-space: nowrap;
+  vertical-align: middle;
+  .ripple {
+    background-color: $checkbox-color;
+    opacity: .3;
+    transition-duration: $checkbox-ripple-duration;
+  }
+}
+
+.text {
+  display: inline-block;
+  padding-left: $unit;
+  font-size: $checkbox-text-font-size;
+  line-height: $checkbox-size;
+  color: $checkbox-text-color;
+  white-space: nowrap;
+  vertical-align: top;
+}
+
+.input {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  opacity: 0;
+  &:focus ~ .check {
+    &:before {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: $checkbox-focus-size;
+      height: $checkbox-focus-size;
+      margin-top: - $checkbox-focus-size / 2;
+      margin-left: - $checkbox-focus-size / 2;
+      pointer-events: none;
+      content: "";
+      background-color: $checkbox-focus-color;
+      border-radius: 50%;
+    }
+    &.checked:before {
+      background-color: $checkbox-focus-checked-color;
+    }
+  }
+}
+
+.check {
+  position: relative;
+  display: inline-block;
+  width: $checkbox-size;
+  height: $checkbox-size;
+  vertical-align: top;
+  cursor: pointer;
+  border-color: $checkbox-text-color;
+  border-style: solid;
+  border-width: 2px;
+  border-radius: 2px;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $checkbox-transition-duration;
+  transition-property: background-color;
+  &.checked {
+    background-color: $checkbox-color;
+    border-color: $checkbox-color;
+    &:after {
+      position: absolute;
+      top: -.1 * $unit;
+      left: .4 * $unit;
+      width: .7 * $unit;
+      height: 1.2 * $unit;
+      content: "";
+      border-color: $color-background;
+      border-style: solid;
+      border-top: 0;
+      border-right-width: 2px;
+      border-bottom-width: 2px;
+      border-left: 0;
+      transform: rotate(45deg);
+      animation: checkmark-expand 140ms ease-out forwards;
+    }
+  }
+}
+
+.disabled {
+  > .text {
+    color: $checkbox-disabled-color;
+  }
+  > .check {
+    cursor: auto;
+    border-color: $checkbox-disabled-color;
+    &.checked {
+      cursor: auto;
+      background-color: $checkbox-disabled-color;
+      border-color: transparent;
+    }
+  }
+}
+
+@keyframes checkmark-expand {
+  0% {
+    top: .9 * $unit;
+    left: .6 * $unit;
+    width: 0;
+    height: 0;
+  }
+
+  100% {
+    top: -.1 * $unit;
+    left: .4 * $unit;
+    width: .7 * $unit;
+    height: 1.2 * $unit;
+  }
+}
diff --git a/lib/chip/Chip.js b/lib/chip/Chip.js
new file mode 100644
index 000000000..9affe85c3
--- /dev/null
+++ b/lib/chip/Chip.js
@@ -0,0 +1,98 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Chip = exports.chipFactory = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Avatar = require('../avatar/Avatar.js');
+
+var _Avatar2 = _interopRequireDefault(_Avatar);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+var factory = function factory(Avatar) {
+  var Chip = function Chip(_ref) {
+    var _classnames;
+
+    var children = _ref.children;
+    var className = _ref.className;
+    var deletable = _ref.deletable;
+    var onDeleteClick = _ref.onDeleteClick;
+    var theme = _ref.theme;
+
+    var other = _objectWithoutProperties(_ref, ['children', 'className', 'deletable', 'onDeleteClick', 'theme']);
+
+    var hasAvatar = false;
+    if (_react2.default.Children.count(children)) {
+      var firstChild = children[0];
+      hasAvatar = firstChild && firstChild.type && firstChild.type === Avatar;
+    }
+
+    var classes = (0, _classnames3.default)(theme.chip, (_classnames = {}, _defineProperty(_classnames, theme.deletable, !!deletable), _defineProperty(_classnames, theme.avatar, !!hasAvatar), _classnames), className);
+
+    return _react2.default.createElement(
+      'div',
+      _extends({ 'data-react-toolbox': 'chip', className: classes }, other),
+      typeof children === 'string' ? _react2.default.createElement(
+        'span',
+        null,
+        children
+      ) : children,
+      deletable ? _react2.default.createElement(
+        'span',
+        { className: theme.delete, onClick: onDeleteClick },
+        _react2.default.createElement(
+          'svg',
+          { viewBox: '0 0 40 40', className: theme.deleteIcon },
+          _react2.default.createElement('path', { className: theme.deleteX, d: 'M 12,12 L 28,28 M 28,12 L 12,28' })
+        )
+      ) : null
+    );
+  };
+
+  Chip.propTypes = {
+    children: _react.PropTypes.node,
+    className: _react.PropTypes.string,
+    deletable: _react.PropTypes.bool,
+    onDeleteClick: _react.PropTypes.func,
+    theme: _react2.default.PropTypes.shape({
+      avatar: _react2.default.PropTypes.string.isRequired,
+      chip: _react2.default.PropTypes.string.isRequired,
+      deletable: _react2.default.PropTypes.string.isRequired,
+      delete: _react2.default.PropTypes.string.isRequired,
+      deleteIcon: _react2.default.PropTypes.string.isRequired,
+      deleteX: _react2.default.PropTypes.string.isRequired
+    })
+  };
+
+  Chip.defaultProps = {
+    className: '',
+    deletable: false
+  };
+
+  return Chip;
+};
+
+var Chip = factory(_Avatar2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.CHIP)(Chip);
+exports.chipFactory = factory;
+exports.Chip = Chip;
\ No newline at end of file
diff --git a/lib/chip/_config.scss b/lib/chip/_config.scss
new file mode 100644
index 000000000..a335b2f66
--- /dev/null
+++ b/lib/chip/_config.scss
@@ -0,0 +1,17 @@
+$chip-height: 3.2 * $unit !default;
+$chip-padding: 1.2 * $unit !default;
+$chip-margin-right: 0.25 * $unit !default;
+$chip-background: $palette-grey-200 !default;
+
+$chip-icon-font-size: 2 * $unit !default;
+$chip-icon-margin-right: 0.8 * $unit !default;
+
+$chip-color: $color-text-secondary !default;
+$chip-font-size: $font-size-small !default;
+
+$chip-remove-size: 2.4 * $unit !default;
+$chip-remove-margin: 0.4 * $unit !default;
+$chip-remove-stroke-width: 0.4 * $unit !default;
+$chip-remove-background: $palette-grey-400 !default;
+$chip-remove-background-hover: $palette-grey-500 !default;
+$chip-remove-color: $color-white !default;
diff --git a/lib/chip/index.js b/lib/chip/index.js
new file mode 100644
index 000000000..5a62d8219
--- /dev/null
+++ b/lib/chip/index.js
@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Chip = undefined;
+
+var _identifiers = require('../identifiers.js');
+
+var _reactCssThemr = require('react-css-themr');
+
+var _Chip = require('./Chip.js');
+
+var _avatar = require('../avatar');
+
+var _avatar2 = _interopRequireDefault(_avatar);
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Chip = (0, _Chip.chipFactory)(_avatar2.default);
+var ThemedChip = (0, _reactCssThemr.themr)(_identifiers.CHIP, _theme2.default)(Chip);
+
+exports.default = ThemedChip;
+exports.Chip = ThemedChip;
\ No newline at end of file
diff --git a/lib/chip/theme.scss b/lib/chip/theme.scss
new file mode 100644
index 000000000..5033f0d06
--- /dev/null
+++ b/lib/chip/theme.scss
@@ -0,0 +1,66 @@
+@import "http://github.com/base";
+@import "http://github.com/config";
+
+.chip {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  padding: 0 $chip-padding;
+  margin-right: $chip-margin-right;
+  overflow: hidden;
+  font-size: $chip-font-size;
+  line-height: $chip-height;
+  color: $chip-color;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background-color: $chip-background;
+  border-radius: $chip-height;
+}
+
+.avatar {
+  padding-left: 0;
+
+  > [data-react-toolbox="avatar"] {
+    width: $chip-height;
+    height: $chip-height;
+    margin-right: $chip-icon-margin-right;
+    vertical-align: middle;
+
+    > span {
+      font-size: $chip-icon-font-size;
+      line-height: $chip-height;
+    }
+  }
+}
+
+.deletable {
+  padding-right: $chip-remove-size + 2 * $chip-remove-margin;
+}
+
+.delete {
+  position: absolute;
+  right: 0;
+  display: inline-block;
+  width: $chip-remove-size;
+  height: $chip-remove-size;
+  padding: $chip-remove-margin;
+  margin: $chip-remove-margin;
+  vertical-align: middle;
+  cursor: pointer;
+}
+
+.delete:hover .deleteIcon {
+  background: $chip-remove-background-hover;
+}
+
+.deleteIcon {
+  vertical-align: top;
+  background: $chip-remove-background;
+  border-radius: $chip-remove-size;
+
+  .deleteX {
+    fill: transparent;
+    stroke-width: $chip-remove-stroke-width;
+    stroke: $chip-remove-color;
+  }
+}
diff --git a/lib/commons.scss b/lib/commons.scss
new file mode 100644
index 000000000..4c2556303
--- /dev/null
+++ b/lib/commons.scss
@@ -0,0 +1,88 @@
+@import "http://github.com/base";
+@import "http://github.com/~normalize.css";
+
+html {
+  font-size: 62.5%;
+}
+
+body {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  font-family: Roboto, sans-serif;
+  font-size: 1.6rem;
+  -webkit-touch-callout: none;
+  * {
+    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  }
+}
+
+a, abbr, address, article, aside, audio, b, blockquote, body, caption, cite,
+code, dd, del, dfn, dialog, div, dl, dt, em, fieldset, figure, footer, form, h1,
+h2, h3, h4, h5, h6, header, hgroup, hr, html, i, iframe, img, ins, kbd, label,
+legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span,
+strong, sub, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  outline: 0;
+}
+
+*, *:before, *:after {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+h1, h2, h3, h4, h5, h6, label, p, button, abbr, a, span, small {
+  font-smoothing: antialiased;
+  -webkit-font-smoothing: antialiased;
+  text-size-adjust: 100%;
+}
+
+a {
+  text-decoration: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+input:not([type="checkbox"]):not([type="radio"]), button {
+  outline: none;
+  appearance: none;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+}
+
+// -- Material design font sizes
+h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
+  @include typo-display-3($color-contrast: true);
+}
+
+h1 {
+  @include typo-display-3;
+}
+
+h2 {
+  @include typo-display-2;
+}
+
+h3 {
+  @include typo-display-1;
+}
+
+h4 {
+  @include typo-headline;
+}
+
+h5 {
+  @include typo-title;
+}
+
+h6 {
+  @include typo-subhead;
+}
+
+p {
+  @include typo-body-1;
+}
diff --git a/lib/date_picker/Calendar.js b/lib/date_picker/Calendar.js
new file mode 100644
index 000000000..b9b5cfcf7
--- /dev/null
+++ b/lib/date_picker/Calendar.js
@@ -0,0 +1,178 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactAddonsCssTransitionGroup = require('react-addons-css-transition-group');
+
+var _reactAddonsCssTransitionGroup2 = _interopRequireDefault(_reactAddonsCssTransitionGroup);
+
+var _animations = require('../animations');
+
+var _time = require('../utils/time.js');
+
+var _time2 = _interopRequireDefault(_time);
+
+var _utils = require('../utils/utils.js');
+
+var _utils2 = _interopRequireDefault(_utils);
+
+var _CalendarMonth = require('./CalendarMonth.js');
+
+var _CalendarMonth2 = _interopRequireDefault(_CalendarMonth);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(IconButton) {
+  var Calendar = function (_Component) {
+    _inherits(Calendar, _Component);
+
+    function Calendar() {
+      var _Object$getPrototypeO;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, Calendar);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Calendar)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+        viewDate: _this.props.selectedDate
+      }, _this.handleDayClick = function (day) {
+        _this.props.onChange(_time2.default.setDay(_this.state.viewDate, day), true);
+      }, _this.handleYearClick = function (year) {
+        var viewDate = _time2.default.setYear(_this.props.selectedDate, year);
+        _this.setState({ viewDate: viewDate });
+        _this.props.onChange(viewDate, false);
+      }, _this.changeViewMonth = function (direction, step) {
+        _this.setState({
+          direction: direction,
+          viewDate: _time2.default.addMonths(_this.state.viewDate, step)
+        });
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(Calendar, [{
+      key: 'componentDidUpdate',
+      value: function componentDidUpdate() {
+        if (this.refs.activeYear) {
+          this.scrollToActive();
+        }
+      }
+    }, {
+      key: 'scrollToActive',
+      value: function scrollToActive() {
+        this.refs.years.scrollTop = this.refs.activeYear.offsetTop - this.refs.years.offsetHeight / 2 + this.refs.activeYear.offsetHeight / 2;
+      }
+    }, {
+      key: 'renderYear',
+      value: function renderYear(year) {
+        var props = {
+          className: year === this.state.viewDate.getFullYear() ? this.props.theme.active : '',
+          key: year,
+          onClick: this.handleYearClick.bind(this, year)
+        };
+
+        if (year === this.state.viewDate.getFullYear()) {
+          props.ref = 'activeYear';
+        }
+
+        return _react2.default.createElement(
+          'li',
+          props,
+          year
+        );
+      }
+    }, {
+      key: 'renderYears',
+      value: function renderYears() {
+        var _this2 = this;
+
+        return _react2.default.createElement(
+          'ul',
+          { 'data-react-toolbox': 'years', ref: 'years', className: this.props.theme.years },
+          _utils2.default.range(1900, 2100).map(function (i) {
+            return _this2.renderYear(i);
+          })
+        );
+      }
+    }, {
+      key: 'renderMonths',
+      value: function renderMonths() {
+        var theme = this.props.theme;
+
+        var animation = this.state.direction === 'left' ? _animations.SlideLeft : _animations.SlideRight;
+        return _react2.default.createElement(
+          'div',
+          { 'data-react-toolbox': 'calendar' },
+          _react2.default.createElement(IconButton, { className: theme.prev, icon: 'chevron_left', onClick: this.changeViewMonth.bind(this, 'left', -1) }),
+          _react2.default.createElement(IconButton, { className: theme.next, icon: 'chevron_right', onClick: this.changeViewMonth.bind(this, 'right', 1) }),
+          _react2.default.createElement(
+            _reactAddonsCssTransitionGroup2.default,
+            { transitionName: animation, transitionEnterTimeout: 350, transitionLeaveTimeout: 350 },
+            _react2.default.createElement(_CalendarMonth2.default, {
+              key: this.state.viewDate.getMonth(),
+              maxDate: this.props.maxDate,
+              minDate: this.props.minDate,
+              onDayClick: this.handleDayClick,
+              selectedDate: this.props.selectedDate,
+              theme: this.props.theme,
+              viewDate: this.state.viewDate
+            })
+          )
+        );
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        return _react2.default.createElement(
+          'div',
+          { className: this.props.theme.calendar },
+          this.props.display === 'months' ? this.renderMonths() : this.renderYears()
+        );
+      }
+    }]);
+
+    return Calendar;
+  }(_react.Component);
+
+  Calendar.propTypes = {
+    display: _react.PropTypes.oneOf(['months', 'years']),
+    maxDate: _react.PropTypes.object,
+    minDate: _react.PropTypes.object,
+    onChange: _react.PropTypes.func,
+    selectedDate: _react.PropTypes.object,
+    theme: _react.PropTypes.shape({
+      active: _react.PropTypes.string.isRequired,
+      calendar: _react.PropTypes.string.isRequired,
+      next: _react.PropTypes.string.isRequired,
+      prev: _react.PropTypes.string.isRequired,
+      years: _react.PropTypes.string.isRequired
+    }),
+    viewDate: _react.PropTypes.object
+  };
+  Calendar.defaultProps = {
+    display: 'months',
+    selectedDate: new Date()
+  };
+
+
+  return Calendar;
+};
+
+exports.default = factory;
\ No newline at end of file
diff --git a/lib/date_picker/CalendarDay.js b/lib/date_picker/CalendarDay.js
new file mode 100644
index 000000000..0f71dd746
--- /dev/null
+++ b/lib/date_picker/CalendarDay.js
@@ -0,0 +1,91 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _time = require('../utils/time.js');
+
+var _time2 = _interopRequireDefault(_time);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var Day = function (_Component) {
+  _inherits(Day, _Component);
+
+  function Day() {
+    _classCallCheck(this, Day);
+
+    return _possibleConstructorReturn(this, Object.getPrototypeOf(Day).apply(this, arguments));
+  }
+
+  _createClass(Day, [{
+    key: 'dayStyle',
+    value: function dayStyle() {
+      if (this.props.day === 1) {
+        return {
+          marginLeft: _time2.default.getFirstWeekDay(this.props.viewDate) * 100 / 7 + '%'
+        };
+      }
+    }
+  }, {
+    key: 'isSelected',
+    value: function isSelected() {
+      var sameYear = this.props.viewDate.getFullYear() === this.props.selectedDate.getFullYear();
+      var sameMonth = this.props.viewDate.getMonth() === this.props.selectedDate.getMonth();
+      var sameDay = this.props.day === this.props.selectedDate.getDate();
+      return sameYear && sameMonth && sameDay;
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _classnames;
+
+      var className = (0, _classnames3.default)(this.props.theme.day, (_classnames = {}, _defineProperty(_classnames, this.props.theme.active, this.isSelected()), _defineProperty(_classnames, this.props.theme.disabled, this.props.disabled), _classnames));
+
+      return _react2.default.createElement(
+        'div',
+        { 'data-react-toolbox': 'day', className: className, style: this.dayStyle() },
+        _react2.default.createElement(
+          'span',
+          { onClick: this.props.onClick },
+          this.props.day
+        )
+      );
+    }
+  }]);
+
+  return Day;
+}(_react.Component);
+
+Day.propTypes = {
+  day: _react.PropTypes.number,
+  disabled: _react.PropTypes.bool,
+  onClick: _react.PropTypes.func,
+  selectedDate: _react.PropTypes.object,
+  theme: _react.PropTypes.shape({
+    active: _react.PropTypes.string.isRequired,
+    day: _react.PropTypes.string.isRequired,
+    disabled: _react.PropTypes.string.isRequired
+  }),
+  viewDate: _react.PropTypes.object
+};
+exports.default = Day;
\ No newline at end of file
diff --git a/lib/date_picker/CalendarMonth.js b/lib/date_picker/CalendarMonth.js
new file mode 100644
index 000000000..cdfedb3e7
--- /dev/null
+++ b/lib/date_picker/CalendarMonth.js
@@ -0,0 +1,126 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _time = require('../utils/time.js');
+
+var _time2 = _interopRequireDefault(_time);
+
+var _utils = require('../utils/utils.js');
+
+var _utils2 = _interopRequireDefault(_utils);
+
+var _CalendarDay = require('./CalendarDay.js');
+
+var _CalendarDay2 = _interopRequireDefault(_CalendarDay);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var Month = function (_Component) {
+  _inherits(Month, _Component);
+
+  function Month() {
+    var _Object$getPrototypeO;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck(this, Month);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Month)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleDayClick = function (day) {
+      if (_this.props.onDayClick) _this.props.onDayClick(day);
+    }, _temp), _possibleConstructorReturn(_this, _ret);
+  }
+
+  _createClass(Month, [{
+    key: 'renderWeeks',
+    value: function renderWeeks() {
+      return _utils2.default.range(0, 7).map(function (i) {
+        return _react2.default.createElement(
+          'span',
+          { key: i },
+          _time2.default.getFullDayOfWeek(i).charAt(0)
+        );
+      });
+    }
+  }, {
+    key: 'renderDays',
+    value: function renderDays() {
+      var _this2 = this;
+
+      return _utils2.default.range(1, _time2.default.getDaysInMonth(this.props.viewDate) + 1).map(function (i) {
+        var date = new Date(_this2.props.viewDate.getFullYear(), _this2.props.viewDate.getMonth(), i);
+        var disabled = _time2.default.dateOutOfRange(date, _this2.props.minDate, _this2.props.maxDate);
+
+        return _react2.default.createElement(_CalendarDay2.default, {
+          key: i,
+          day: i,
+          disabled: disabled,
+          onClick: !disabled ? _this2.handleDayClick.bind(_this2, i) : null,
+          selectedDate: _this2.props.selectedDate,
+          theme: _this2.props.theme,
+          viewDate: _this2.props.viewDate
+        });
+      });
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      return _react2.default.createElement(
+        'div',
+        { 'data-react-toolbox': 'month', className: this.props.theme.month },
+        _react2.default.createElement(
+          'span',
+          { className: this.props.theme.title },
+          _time2.default.getFullMonth(this.props.viewDate),
+          ' ',
+          this.props.viewDate.getFullYear()
+        ),
+        _react2.default.createElement(
+          'div',
+          { className: this.props.theme.week },
+          this.renderWeeks()
+        ),
+        _react2.default.createElement(
+          'div',
+          { className: this.props.theme.days },
+          this.renderDays()
+        )
+      );
+    }
+  }]);
+
+  return Month;
+}(_react.Component);
+
+Month.propTypes = {
+  maxDate: _react.PropTypes.object,
+  minDate: _react.PropTypes.object,
+  onDayClick: _react.PropTypes.func,
+  selectedDate: _react.PropTypes.object,
+  theme: _react.PropTypes.shape({
+    days: _react.PropTypes.string.isRequired,
+    month: _react.PropTypes.string.isRequired,
+    title: _react.PropTypes.string.isRequired,
+    week: _react.PropTypes.string.isRequired
+  }),
+  viewDate: _react.PropTypes.object
+};
+exports.default = Month;
\ No newline at end of file
diff --git a/lib/date_picker/DatePicker.js b/lib/date_picker/DatePicker.js
new file mode 100644
index 000000000..af5ebefee
--- /dev/null
+++ b/lib/date_picker/DatePicker.js
@@ -0,0 +1,157 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatePicker = exports.datePickerFactory = undefined;
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _events = require('../utils/events.js');
+
+var _events2 = _interopRequireDefault(_events);
+
+var _time = require('../utils/time.js');
+
+var _time2 = _interopRequireDefault(_time);
+
+var _IconButton = require('../button/IconButton.js');
+
+var _IconButton2 = _interopRequireDefault(_IconButton);
+
+var _Input = require('../input/Input.js');
+
+var _Input2 = _interopRequireDefault(_Input);
+
+var _Dialog = require('../dialog/Dialog.js');
+
+var _Dialog2 = _interopRequireDefault(_Dialog);
+
+var _Calendar = require('./Calendar.js');
+
+var _Calendar2 = _interopRequireDefault(_Calendar);
+
+var _DatePickerDialog = require('./DatePickerDialog.js');
+
+var _DatePickerDialog2 = _interopRequireDefault(_DatePickerDialog);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(Input, DatePickerDialog) {
+  var DatePicker = function (_Component) {
+    _inherits(DatePicker, _Component);
+
+    function DatePicker() {
+      var _Object$getPrototypeO;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, DatePicker);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(DatePicker)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+        active: false
+      }, _this.handleDismiss = function () {
+        _this.setState({ active: false });
+      }, _this.handleInputMouseDown = function (event) {
+        _events2.default.pauseEvent(event);
+        _this.setState({ active: true });
+      }, _this.handleSelect = function (value, event) {
+        if (_this.props.onChange) _this.props.onChange(value, event);
+        _this.setState({ active: false });
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(DatePicker, [{
+      key: 'render',
+      value: function render() {
+        var _props = this.props;
+        var inputClassName = _props.inputClassName;
+        var value = _props.value;
+
+        var inputFormat = this.props.inputFormat || _time2.default.formatDate;
+        var date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined;
+        var formattedDate = date === undefined ? '' : inputFormat(value);
+
+        return _react2.default.createElement(
+          'div',
+          { 'data-react-toolbox': 'date-picker' },
+          _react2.default.createElement(Input, {
+            className: (0, _classnames3.default)(this.props.theme.input, _defineProperty({}, inputClassName, inputClassName)),
+            error: this.props.error,
+            onMouseDown: this.handleInputMouseDown,
+            label: this.props.label,
+            readOnly: true,
+            type: 'text',
+            icon: this.props.icon,
+            value: formattedDate
+          }),
+          _react2.default.createElement(DatePickerDialog, {
+            autoOk: this.props.autoOk,
+            active: this.state.active,
+            className: this.props.className,
+            maxDate: this.props.maxDate,
+            minDate: this.props.minDate,
+            onDismiss: this.handleDismiss,
+            onSelect: this.handleSelect,
+            theme: this.props.theme,
+            value: date
+          })
+        );
+      }
+    }]);
+
+    return DatePicker;
+  }(_react.Component);
+
+  DatePicker.propTypes = {
+    autoOk: _react.PropTypes.bool,
+    className: _react.PropTypes.string,
+    error: _react.PropTypes.string,
+    icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    inputClassName: _react.PropTypes.string,
+    inputFormat: _react.PropTypes.func,
+    label: _react.PropTypes.string,
+    maxDate: _react.PropTypes.object,
+    minDate: _react.PropTypes.object,
+    onChange: _react.PropTypes.func,
+    theme: _react.PropTypes.shape({
+      input: _react.PropTypes.string.isRequired
+    }),
+    value: _react.PropTypes.oneOfType([_react.PropTypes.instanceOf(Date), _react.PropTypes.string])
+  };
+
+
+  return DatePicker;
+};
+
+var Calendar = (0, _Calendar2.default)(_IconButton2.default);
+var DatePickerDialog = (0, _DatePickerDialog2.default)(_Dialog2.default, Calendar);
+var DatePicker = factory(_Input2.default, DatePickerDialog);
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.DATE_PICKER)(DatePicker);
+exports.datePickerFactory = factory;
+exports.DatePicker = DatePicker;
\ No newline at end of file
diff --git a/lib/date_picker/DatePickerDialog.js b/lib/date_picker/DatePickerDialog.js
new file mode 100644
index 000000000..0030e57df
--- /dev/null
+++ b/lib/date_picker/DatePickerDialog.js
@@ -0,0 +1,157 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _time = require('../utils/time.js');
+
+var _time2 = _interopRequireDefault(_time);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(Dialog, Calendar) {
+  var CalendarDialog = function (_Component) {
+    _inherits(CalendarDialog, _Component);
+
+    function CalendarDialog() {
+      var _Object$getPrototypeO;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, CalendarDialog);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(CalendarDialog)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+        display: 'months',
+        date: _this.props.value
+      }, _this.handleCalendarChange = function (value, dayClick) {
+        var state = { display: 'months', date: value };
+        if (_time2.default.dateOutOfRange(value, _this.props.minDate, _this.props.maxDate)) {
+          state.date = _this.props.maxDate || _this.props.minDate;
+        }
+        _this.setState(state);
+        if (dayClick && _this.props.autoOk && _this.props.onSelect) {
+          _this.props.onSelect(value);
+        }
+      }, _this.handleSelect = function (event) {
+        if (_this.props.onSelect) _this.props.onSelect(_this.state.date, event);
+      }, _this.handleSwitchDisplay = function (display) {
+        _this.setState({ display: display });
+      }, _this.updateStateDate = function (date) {
+        if (Object.prototype.toString.call(date) === '[object Date]') {
+          _this.setState({
+            date: date
+          });
+        }
+      }, _this.actions = [{ label: 'Cancel', className: _this.props.theme.button, onClick: _this.props.onDismiss }, { label: 'Ok', className: _this.props.theme.button, onClick: _this.handleSelect }], _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(CalendarDialog, [{
+      key: 'componentWillMount',
+      value: function componentWillMount() {
+        this.updateStateDate(this.props.value);
+      }
+    }, {
+      key: 'componentWillReceiveProps',
+      value: function componentWillReceiveProps(nextProps) {
+        this.updateStateDate(nextProps.value);
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var theme = this.props.theme;
+
+        var display = this.state.display + 'Display';
+        var className = (0, _classnames2.default)(theme.dialog, this.props.className);
+        var headerClassName = (0, _classnames2.default)(theme.header, theme[display]);
+
+        return _react2.default.createElement(
+          Dialog,
+          { active: this.props.active, type: 'custom', className: className, actions: this.actions },
+          _react2.default.createElement(
+            'header',
+            { className: headerClassName },
+            _react2.default.createElement(
+              'span',
+              { className: theme.year, onClick: this.handleSwitchDisplay.bind(this, 'years') },
+              this.state.date.getFullYear()
+            ),
+            _react2.default.createElement(
+              'h3',
+              { className: theme.date, onClick: this.handleSwitchDisplay.bind(this, 'months') },
+              _time2.default.getShortDayOfWeek(this.state.date.getDay()),
+              ', ',
+              _time2.default.getShortMonth(this.state.date),
+              ' ',
+              this.state.date.getDate()
+            )
+          ),
+          _react2.default.createElement(
+            'div',
+            { className: theme.calendarWrapper },
+            _react2.default.createElement(Calendar, {
+              display: this.state.display,
+              maxDate: this.props.maxDate,
+              minDate: this.props.minDate,
+              onChange: this.handleCalendarChange,
+              selectedDate: this.state.date,
+              theme: this.props.theme })
+          )
+        );
+      }
+    }]);
+
+    return CalendarDialog;
+  }(_react.Component);
+
+  CalendarDialog.propTypes = {
+    active: _react.PropTypes.bool,
+    autoOk: _react.PropTypes.bool,
+    className: _react.PropTypes.string,
+    maxDate: _react.PropTypes.object,
+    minDate: _react.PropTypes.object,
+    onDismiss: _react.PropTypes.func,
+    onSelect: _react.PropTypes.func,
+    theme: _react.PropTypes.shape({
+      button: _react.PropTypes.string.isRequired,
+      calendarWrapper: _react.PropTypes.string.isRequired,
+      date: _react.PropTypes.string.isRequired,
+      dialog: _react.PropTypes.string.isRequired,
+      header: _react.PropTypes.string.isRequired,
+      monthsDisplay: _react.PropTypes.string.isRequired,
+      year: _react.PropTypes.string.isRequired,
+      yearsDisplay: _react.PropTypes.string.isRequired
+    }),
+    value: _react.PropTypes.object
+  };
+  CalendarDialog.defaultProps = {
+    active: false,
+    className: '',
+    value: new Date()
+  };
+
+
+  return CalendarDialog;
+};
+
+exports.default = factory;
\ No newline at end of file
diff --git a/lib/date_picker/_config.scss b/lib/date_picker/_config.scss
new file mode 100644
index 000000000..c7925211a
--- /dev/null
+++ b/lib/date_picker/_config.scss
@@ -0,0 +1,30 @@
+$datepicker-primary: $color-primary !default;
+$datepicker-primary-contrast: $color-primary-contrast !default;
+$datepicker-primary-dark: $color-primary-dark !default;
+$datepicker-primary-color: $datepicker-primary !default;
+$datepicker-primary-hover-color: rgba($datepicker-primary, .2) !default;
+$datepicker-primary-contrast-color: $datepicker-primary-contrast !default;
+$datepicker-primary-dark-color: $datepicker-primary-dark !default;
+$datepicker-dialog-width: 33 * $unit !default;
+$datepicker-inactive-opacity: .6 !default;
+$datepicker-weekday-line-height: 2 * $unit !default;
+$datepicker-weekday-font-size: $font-size-small !default;
+$datepicker-month-font-size: $font-size-big !default;
+$datepicker-day-font-size: 5 * $unit !default;
+$datepicker-day-line-height: 4 * $unit !default;
+$datepicker-year-font-size: $font-size-small !default;
+
+$calendar-primary: $color-primary !default;
+$calendar-primary-contrast: $color-primary-contrast !default;
+$calendar-primary-color: $calendar-primary !default;
+$calendar-primary-contrast-color: $calendar-primary-contrast !default;
+$calendar-primary-hover-color: rgba($calendar-primary, .21) !default;
+$calendar-arrows-color: $palette-grey-600 !default;
+$calendar-arrows-font-size: 2 * $unit !default;
+$calendar-year-font-size: 2.4 !default;
+$calendar-day-font-size: 1.3 * $unit !default;
+$calendar-day-disable-opacity: 0.25 !default;
+$calendar-row-height: 3 * $unit !default;
+$calendar-day-padding: .2 * $unit !default;
+$calendar-title-height: 3.6 * $unit !default;
+$calendar-total-height: $calendar-row-height * 7 + $calendar-title-height + $calendar-day-padding * 12 !default;
diff --git a/lib/date_picker/index.js b/lib/date_picker/index.js
new file mode 100644
index 000000000..1b6ed4eab
--- /dev/null
+++ b/lib/date_picker/index.js
@@ -0,0 +1,51 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatePicker = exports.default = undefined;
+
+var _DatePicker = require('./DatePicker');
+
+var _DatePicker2 = _interopRequireDefault(_DatePicker);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _DatePicker3 = require('./DatePicker.js');
+
+var _DatePickerDialog = require('./DatePickerDialog.js');
+
+var _DatePickerDialog2 = _interopRequireDefault(_DatePickerDialog);
+
+var _Calendar = require('./Calendar.js');
+
+var _Calendar2 = _interopRequireDefault(_Calendar);
+
+var _button = require('../button');
+
+var _input = require('../input');
+
+var _input2 = _interopRequireDefault(_input);
+
+var _dialog = require('../dialog');
+
+var _dialog2 = _interopRequireDefault(_dialog);
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = _DatePicker2.default;
+
+
+var Calendar = (0, _Calendar2.default)(_button.IconButton);
+var DatePickerDialog = (0, _DatePickerDialog2.default)(_dialog2.default, Calendar);
+var DatePicker = (0, _DatePicker3.datePickerFactory)(_input2.default, DatePickerDialog);
+
+var ThemedDatePicker = (0, _reactCssThemr.themr)(_identifiers.DATE_PICKER, _theme2.default)(DatePicker);
+exports.default = ThemedDatePicker;
+exports.DatePicker = ThemedDatePicker;
\ No newline at end of file
diff --git a/lib/date_picker/theme.scss b/lib/date_picker/theme.scss
new file mode 100644
index 000000000..dbce4dfc7
--- /dev/null
+++ b/lib/date_picker/theme.scss
@@ -0,0 +1,153 @@
+@import "http://github.com/base";
+@import "http://github.com/config";
+
+.input > [role="input"] {
+  cursor: pointer;
+}
+
+.header {
+  padding: 1.6 * $unit 2 * $unit;
+  color: $datepicker-primary-contrast-color;
+  cursor: pointer;
+  background-color: $datepicker-primary-color;
+}
+
+.year {
+  display: inline-block;
+  font-size: $datepicker-year-font-size;
+  transition: opacity, font-size $animation-duration $animation-curve-default;
+}
+
+.date {
+  display: block;
+  font-weight: $font-weight-semi-bold;
+  text-transform: capitalize;
+  transition: opacity $animation-duration $animation-curve-default;
+}
+
+.calendarWrapper {
+  padding: $unit .5 * $unit 0;
+}
+
+.yearsDisplay {
+  .date {
+    opacity: $datepicker-inactive-opacity;
+  }
+  .year {
+    font-size: $font-size-normal;
+  }
+}
+
+.monthsDisplay {
+  .year {
+    opacity: $datepicker-inactive-opacity;
+  }
+}
+
+.dialog {
+  width: $datepicker-dialog-width;
+  > [role="body"] {
+    padding: 0;
+  }
+  > [role="navigation"] > .button {
+    color: $datepicker-primary-color;
+    &:hover {
+      background: $datepicker-primary-hover-color;
+    }
+    &:focus:not(:active) {
+      background: $datepicker-primary-hover-color;
+    }
+  }
+}
+
+.calendar {
+  position: relative;
+  height: $calendar-total-height;
+  overflow: hidden;
+  font-size: $font-size-small;
+  line-height: $calendar-row-height;
+  text-align: center;
+  background: $calendar-primary-contrast-color;
+  .prev, .next {
+    position: absolute;
+    top: 0;
+    z-index: $z-index-high;
+    height: 3.6 * $unit;
+    cursor: pointer;
+    opacity: .7;
+  }
+  .prev {
+    left: 0;
+  }
+  .next {
+    right: 0;
+  }
+}
+
+.title {
+  display: inline-block;
+  font-weight: 500;
+  line-height: $calendar-row-height;
+}
+
+.years {
+  height: 100%;
+  overflow-y: auto;
+  font-size: $font-size-big;
+  > li {
+    line-height: 2.4;
+    cursor: pointer;
+    &.active {
+      font-size: $calendar-year-font-size;
+      color: $calendar-primary-color;
+    }
+  }
+}
+
+.week {
+  display: flex;
+  height: $calendar-row-height;
+  flex-wrap: wrap;
+  font-size: $calendar-day-font-size;
+  line-height: $calendar-row-height;
+  opacity: .5;
+  > span {
+    flex: 0 0 (100% / 7);
+  }
+}
+
+.days {
+  display: flex;
+  flex-wrap: wrap;
+  font-size: $calendar-day-font-size;
+}
+
+.day {
+  flex: 0 0 (100% / 7);
+  padding: $calendar-day-padding;
+  > span {
+    display: inline-block;
+    width: $calendar-row-height;
+    height: $calendar-row-height;
+    line-height: $calendar-row-height;
+    border-radius: 50%;
+  }
+  &:hover:not(.active):not(.disabled) > span {
+    color: $calendar-primary-contrast-color;
+    background: $calendar-primary-hover-color;
+  }
+  &.active > span {
+    color: $calendar-primary-contrast-color;
+    background: $calendar-primary-color;
+  }
+  &:hover:not(.disabled) > span {
+    cursor: pointer;
+  }
+  &.disabled {
+    opacity: $calendar-day-disable-opacity;
+  }
+}
+
+.month {
+  background-color: $calendar-primary-contrast-color;
+}
diff --git a/lib/dialog/Dialog.js b/lib/dialog/Dialog.js
new file mode 100644
index 000000000..36c7fa2fc
--- /dev/null
+++ b/lib/dialog/Dialog.js
@@ -0,0 +1,113 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dialogFactory = exports.Dialog = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _classnames3 = require('classnames');
+
+var _classnames4 = _interopRequireDefault(_classnames3);
+
+var _identifiers = require('../identifiers.js');
+
+var _ActivableRenderer = require('../hoc/ActivableRenderer.js');
+
+var _ActivableRenderer2 = _interopRequireDefault(_ActivableRenderer);
+
+var _Button = require('../button/Button.js');
+
+var _Button2 = _interopRequireDefault(_Button);
+
+var _Overlay = require('../overlay/Overlay.js');
+
+var _Overlay2 = _interopRequireDefault(_Overlay);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var factory = function factory(Overlay, Button) {
+  var Dialog = function Dialog(props) {
+    var actions = props.actions.map(function (action, idx) {
+      var className = (0, _classnames4.default)(props.theme.button, _defineProperty({}, action.className, action.className));
+      return _react2.default.createElement(Button, _extends({ key: idx }, action, { className: className }));
+    });
+
+    var className = (0, _classnames4.default)([props.theme.dialog, props.theme[props.type]], _defineProperty({}, props.theme.active, props.active), props.className);
+
+    return _react2.default.createElement(
+      Overlay,
+      {
+        active: props.active,
+        onClick: props.onOverlayClick,
+        onMouseDown: props.onOverlayMouseDown,
+        onMouseUp: props.onOverlayMouseUp,
+        onMouseMove: props.onOverlayMouseMove,
+        onEscKeyDown: props.onEscKeyDown
+      },
+      _react2.default.createElement(
+        'div',
+        { 'data-react-toolbox': 'dialog', className: className },
+        _react2.default.createElement(
+          'section',
+          { role: 'body', className: props.theme.body },
+          props.title ? _react2.default.createElement(
+            'h6',
+            { className: props.theme.title },
+            props.title
+          ) : null,
+          props.children
+        ),
+        actions.length ? _react2.default.createElement(
+          'nav',
+          { role: 'navigation', className: props.theme.navigation },
+          actions
+        ) : null
+      )
+    );
+  };
+
+  Dialog.propTypes = {
+    actions: _react.PropTypes.array,
+    active: _react.PropTypes.bool,
+    children: _react.PropTypes.node,
+    className: _react.PropTypes.string,
+    onEscKeyDown: _react.PropTypes.func,
+    onOverlayClick: _react.PropTypes.func,
+    onOverlayMouseDown: _react.PropTypes.func,
+    onOverlayMouseMove: _react.PropTypes.func,
+    onOverlayMouseUp: _react.PropTypes.func,
+    theme: _react.PropTypes.shape({
+      active: _react.PropTypes.string.isRequired,
+      body: _react.PropTypes.string.isRequired,
+      button: _react.PropTypes.string.isRequired,
+      dialog: _react.PropTypes.string.isRequired,
+      navigation: _react.PropTypes.string.isRequired,
+      title: _react.PropTypes.string.isRequired
+    }),
+    title: _react.PropTypes.string,
+    type: _react.PropTypes.string
+  };
+
+  Dialog.defaultProps = {
+    actions: [],
+    active: false,
+    type: 'normal'
+  };
+
+  return (0, _ActivableRenderer2.default)()(Dialog);
+};
+
+var Dialog = factory(_Overlay2.default, _Button2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.DIALOG)(Dialog);
+exports.Dialog = Dialog;
+exports.dialogFactory = factory;
\ No newline at end of file
diff --git a/lib/dialog/_config.scss b/lib/dialog/_config.scss
new file mode 100644
index 000000000..c522075c9
--- /dev/null
+++ b/lib/dialog/_config.scss
@@ -0,0 +1,6 @@
+$dialog-border-radius: .2 * $unit !default;
+$dialog-color-title: $color-black !default;
+$dialog-color-white: $color-white !default;
+$dialog-content-padding: 2.4 * $unit !default;
+$dialog-navigation-padding: .8 * $unit !default;
+$dialog-translate-y: 4 * $unit !default;
diff --git a/lib/dialog/index.js b/lib/dialog/index.js
new file mode 100644
index 000000000..5a81c7e2c
--- /dev/null
+++ b/lib/dialog/index.js
@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Dialog = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Dialog = require('./Dialog.js');
+
+var _overlay = require('../overlay');
+
+var _overlay2 = _interopRequireDefault(_overlay);
+
+var _button = require('../button');
+
+var _button2 = _interopRequireDefault(_button);
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Dialog = (0, _Dialog.dialogFactory)(_overlay2.default, _button2.default);
+var ThemedDialog = (0, _reactCssThemr.themr)(_identifiers.DIALOG, _theme2.default)(Dialog);
+
+exports.default = ThemedDialog;
+exports.Dialog = ThemedDialog;
\ No newline at end of file
diff --git a/lib/dialog/theme.scss b/lib/dialog/theme.scss
new file mode 100644
index 000000000..e50e2c01d
--- /dev/null
+++ b/lib/dialog/theme.scss
@@ -0,0 +1,73 @@
+@import "http://github.com/base";
+@import "http://github.com/config";
+
+.dialog {
+  display: flex;
+  max-width: 96vw;
+  max-height: 96vh;
+  flex-direction: column;
+  background-color: $dialog-color-white;
+  border-radius: $dialog-border-radius;
+  box-shadow: $zdepth-shadow-5;
+  opacity: 0;
+  transition-delay: $animation-delay;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transition-property: opacity, transform;
+  transform: translateY(-$dialog-translate-y);
+  &.active {
+    opacity: 1;
+    transform: translateY(0%);
+  }
+}
+
+.small {
+  width: 30vw;
+
+  @media screen and (max-width: $layout-breakpoint-sm-tablet) {
+    width: 50vw;
+  }
+
+  @media screen and (max-width: $layout-breakpoint-xs) {
+    width: 75vw;
+  }
+}
+
+.normal {
+  width: 50vw;
+
+  @media screen and (max-width: $layout-breakpoint-xs) {
+    width: 96vw;
+  }
+}
+
+.large {
+  width: 96vw;
+}
+
+.title {
+  @include typo-title();
+  flex-grow: 0;
+  margin-bottom: 1.6 * $unit;
+  color: $dialog-color-title;
+}
+
+.body {
+  flex-grow: 2;
+  padding: $dialog-content-padding;
+  overflow-y: auto;
+  color: $color-text-secondary;
+}
+
+.navigation {
+  flex-grow: 0;
+  padding: $dialog-navigation-padding;
+  text-align: right;
+}
+
+.button {
+  min-width: 0;
+  padding-right: $dialog-navigation-padding;
+  padding-left: $dialog-navigation-padding;
+  margin-left: $dialog-navigation-padding;
+}
diff --git a/lib/drawer/Drawer.js b/lib/drawer/Drawer.js
new file mode 100644
index 000000000..feffcb34e
--- /dev/null
+++ b/lib/drawer/Drawer.js
@@ -0,0 +1,85 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Drawer = exports.drawerFactory = undefined;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _identifiers = require('../identifiers.js');
+
+var _ActivableRenderer = require('../hoc/ActivableRenderer.js');
+
+var _ActivableRenderer2 = _interopRequireDefault(_ActivableRenderer);
+
+var _Overlay = require('../overlay/Overlay.js');
+
+var _Overlay2 = _interopRequireDefault(_Overlay);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var factory = function factory(Overlay) {
+  var Drawer = function Drawer(_ref) {
+    var active = _ref.active;
+    var children = _ref.children;
+    var className = _ref.className;
+    var onOverlayClick = _ref.onOverlayClick;
+    var theme = _ref.theme;
+    var type = _ref.type;
+
+    var _className = (0, _classnames3.default)([theme.drawer, theme[type]], _defineProperty({}, theme.active, active), className);
+
+    return _react2.default.createElement(
+      Overlay,
+      { active: active, onClick: onOverlayClick },
+      _react2.default.createElement(
+        'div',
+        { 'data-react-toolbox': 'drawer', className: _className },
+        _react2.default.createElement(
+          'aside',
+          { className: theme.content },
+          children
+        )
+      )
+    );
+  };
+
+  Drawer.propTypes = {
+    active: _react.PropTypes.bool,
+    children: _react.PropTypes.node,
+    className: _react.PropTypes.string,
+    onOverlayClick: _react.PropTypes.func,
+    theme: _react.PropTypes.shape({
+      active: _react.PropTypes.string.isRequired,
+      content: _react.PropTypes.string.isRequired,
+      drawer: _react.PropTypes.string.isRequired,
+      left: _react.PropTypes.string.isRequired,
+      right: _react.PropTypes.string.isRequired
+    }),
+    type: _react.PropTypes.oneOf(['left', 'right'])
+  };
+
+  Drawer.defaultProps = {
+    active: false,
+    className: '',
+    type: 'left'
+  };
+
+  return (0, _ActivableRenderer2.default)()(Drawer);
+};
+
+var Drawer = factory(_Overlay2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.DRAWER)(Drawer);
+exports.drawerFactory = factory;
+exports.Drawer = Drawer;
\ No newline at end of file
diff --git a/lib/drawer/_config.scss b/lib/drawer/_config.scss
new file mode 100644
index 000000000..2401bc696
--- /dev/null
+++ b/lib/drawer/_config.scss
@@ -0,0 +1,4 @@
+$drawer-background-color: $palette-grey-50 !default;
+$drawer-border-color: $palette-grey-300 !default;
+$drawer-text-color: $palette-grey-800 !default;
+$drawer-width: 24 * $unit !default;
diff --git a/lib/drawer/index.js b/lib/drawer/index.js
new file mode 100644
index 000000000..71d9a5ecc
--- /dev/null
+++ b/lib/drawer/index.js
@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Drawer = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _overlay = require('../overlay');
+
+var _Drawer = require('./Drawer.js');
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Drawer = (0, _Drawer.drawerFactory)(_overlay.Overlay);
+var ThemedDrawer = (0, _reactCssThemr.themr)(_identifiers.DRAWER, _theme2.default)(Drawer);
+
+exports.default = ThemedDrawer;
+exports.Drawer = ThemedDrawer;
\ No newline at end of file
diff --git a/lib/drawer/theme.scss b/lib/drawer/theme.scss
new file mode 100644
index 000000000..3c2c2a1c4
--- /dev/null
+++ b/lib/drawer/theme.scss
@@ -0,0 +1,41 @@
+@import "http://github.com/base";
+@import "http://github.com/config";
+
+.drawer {
+  @include shadow-2dp();
+  position: absolute;
+  top: 0;
+  display: block;
+  width: $drawer-width;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  color: $drawer-text-color;
+  pointer-events: none;
+  background-color: $drawer-background-color;
+  transition-delay: 0s;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transition-property: transform;
+  transform-style: preserve-3d;
+  will-change: transform;
+  &.active {
+    pointer-events: all;
+    transition-delay: $animation-delay;
+    transform: translateX(0);
+  }
+  &.right {
+    right: 0;
+    border-left: 1px solid $drawer-border-color;
+    &:not(.active) {
+      transform: translateX(100%);
+    }
+  }
+  &.left {
+    left: 0;
+    border-right: 1px solid $drawer-border-color;
+    &:not(.active) {
+      transform: translateX(- 100%);
+    }
+  }
+}
diff --git a/lib/dropdown/Dropdown.js b/lib/dropdown/Dropdown.js
new file mode 100644
index 000000000..9ff4dafe1
--- /dev/null
+++ b/lib/dropdown/Dropdown.js
@@ -0,0 +1,261 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Dropdown = exports.dropdownFactory = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactDom = require('react-dom');
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
+var _classnames3 = require('classnames');
+
+var _classnames4 = _interopRequireDefault(_classnames3);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Input = require('../input/Input.js');
+
+var _Input2 = _interopRequireDefault(_Input);
+
+var _events = require('../utils/events.js');
+
+var _events2 = _interopRequireDefault(_events);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(Input) {
+  var Dropdown = function (_Component) {
+    _inherits(Dropdown, _Component);
+
+    function Dropdown() {
+      var _Object$getPrototypeO;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, Dropdown);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Dropdown)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+        active: false,
+        up: false
+      }, _this.close = function () {
+        if (_this.state.active) {
+          _this.setState({ active: false });
+        }
+      }, _this.handleDocumentClick = function (event) {
+        if (_this.state.active && !_events2.default.targetIsDescendant(event, _reactDom2.default.findDOMNode(_this))) {
+          _this.setState({ active: false });
+        }
+      }, _this.handleMouseDown = function (event) {
+        _events2.default.pauseEvent(event);
+        var client = event.target.getBoundingClientRect();
+        var screen_height = window.innerHeight || document.documentElement.offsetHeight;
+        var up = _this.props.auto ? client.top > screen_height / 2 + client.height : false;
+        if (_this.props.onFocus) _this.props.onFocus(event);
+        _this.setState({ active: true, up: up });
+      }, _this.handleSelect = function (item, event) {
+        if (_this.props.onBlur) _this.props.onBlur(event);
+        if (!_this.props.disabled && _this.props.onChange) {
+          _this.props.onChange(item, event);
+          _this.setState({ active: false });
+        }
+      }, _this.getSelectedItem = function () {
+        var _iteratorNormalCompletion = true;
+        var _didIteratorError = false;
+        var _iteratorError = undefined;
+
+        try {
+          for (var _iterator = _this.props.source[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+            var item = _step.value;
+
+            if (item.value === _this.props.value) return item;
+          }
+        } catch (err) {
+          _didIteratorError = true;
+          _iteratorError = err;
+        } finally {
+          try {
+            if (!_iteratorNormalCompletion && _iterator.return) {
+              _iterator.return();
+            }
+          } finally {
+            if (_didIteratorError) {
+              throw _iteratorError;
+            }
+          }
+        }
+
+        if (!_this.props.allowBlank) {
+          return _this.props.source[0];
+        }
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(Dropdown, [{
+      key: 'componentWillUpdate',
+      value: function componentWillUpdate(nextProps, nextState) {
+        if (!this.state.active && nextState.active) {
+          _events2.default.addEventsToDocument({ click: this.handleDocumentClick });
+        }
+      }
+    }, {
+      key: 'componentDidUpdate',
+      value: function componentDidUpdate(prevProps, prevState) {
+        if (prevState.active && !this.state.active) {
+          _events2.default.removeEventsFromDocument({ click: this.handleDocumentClick });
+        }
+      }
+    }, {
+      key: 'componentWillUnmount',
+      value: function componentWillUnmount() {
+        if (this.state.active) {
+          _events2.default.removeEventsFromDocument({ click: this.handleDocumentClick });
+        }
+      }
+    }, {
+      key: 'renderTemplateValue',
+      value: function renderTemplateValue(selected) {
+        var _classnames;
+
+        var theme = this.props.theme;
+
+        var className = (0, _classnames4.default)(theme.field, (_classnames = {}, _defineProperty(_classnames, theme.errored, this.props.error), _defineProperty(_classnames, theme.disabled, this.props.disabled), _classnames));
+
+        return _react2.default.createElement(
+          'div',
+          { className: className, onMouseDown: this.handleMouseDown },
+          _react2.default.createElement(
+            'div',
+            { className: theme.templateValue + ' ' + theme.value },
+            this.props.template(selected)
+          ),
+          this.props.label ? _react2.default.createElement(
+            'label',
+            { className: theme.label },
+            this.props.label
+          ) : null,
+          this.props.error ? _react2.default.createElement(
+            'span',
+            { className: theme.error },
+            this.props.error
+          ) : null
+        );
+      }
+    }, {
+      key: 'renderValue',
+      value: function renderValue(item, idx) {
+        var theme = this.props.theme;
+
+        var className = item.value === this.props.value ? theme.selected : null;
+        return _react2.default.createElement(
+          'li',
+          { key: idx, className: className, onMouseDown: this.handleSelect.bind(this, item.value) },
+          this.props.template ? this.props.template(item) : item.label
+        );
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _classnames2;
+
+        var _props = this.props;
+        var template = _props.template;
+        var theme = _props.theme;
+        var source = _props.source;
+
+        var others = _objectWithoutProperties(_props, ['template', 'theme', 'source']);
+
+        var selected = this.getSelectedItem();
+        var className = (0, _classnames4.default)(theme.dropdown, (_classnames2 = {}, _defineProperty(_classnames2, theme.up, this.state.up), _defineProperty(_classnames2, theme.active, this.state.active), _defineProperty(_classnames2, theme.disabled, this.props.disabled), _classnames2), this.props.className);
+
+        return _react2.default.createElement(
+          'div',
+          { 'data-react-toolbox': 'dropdown', className: className },
+          _react2.default.createElement(Input, _extends({}, others, {
+            className: theme.value,
+            onMouseDown: this.handleMouseDown,
+            readOnly: true,
+            type: template && selected ? 'hidden' : null,
+            value: selected && selected.label
+          })),
+          template && selected ? this.renderTemplateValue(selected) : null,
+          _react2.default.createElement(
+            'ul',
+            { className: theme.values, ref: 'values' },
+            source.map(this.renderValue.bind(this))
+          )
+        );
+      }
+    }]);
+
+    return Dropdown;
+  }(_react.Component);
+
+  Dropdown.propTypes = {
+    allowBlank: _react.PropTypes.bool,
+    auto: _react.PropTypes.bool,
+    className: _react.PropTypes.string,
+    disabled: _react.PropTypes.bool,
+    error: _react.PropTypes.string,
+    label: _react.PropTypes.string,
+    onBlur: _react.PropTypes.func,
+    onChange: _react.PropTypes.func,
+    onFocus: _react.PropTypes.func,
+    source: _react.PropTypes.array.isRequired,
+    template: _react.PropTypes.func,
+    theme: _react.PropTypes.shape({
+      active: _react.PropTypes.string.isRequired,
+      disabled: _react.PropTypes.string.isRequired,
+      dropdown: _react.PropTypes.string.isRequired,
+      error: _react.PropTypes.string.isRequired,
+      errored: _react.PropTypes.string.isRequired,
+      field: _react.PropTypes.string.isRequired,
+      label: _react.PropTypes.string.isRequired,
+      selected: _react.PropTypes.string.isRequired,
+      templateValue: _react.PropTypes.string.isRequired,
+      up: _react.PropTypes.string.isRequired,
+      value: _react.PropTypes.string.isRequired,
+      values: _react.PropTypes.string.isRequired
+    }),
+    value: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number])
+  };
+  Dropdown.defaultProps = {
+    auto: true,
+    className: '',
+    allowBlank: true,
+    disabled: false
+  };
+
+
+  return Dropdown;
+};
+
+var Dropdown = factory(_Input2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.DROPDOWN)(Dropdown);
+exports.dropdownFactory = factory;
+exports.Dropdown = Dropdown;
\ No newline at end of file
diff --git a/lib/dropdown/_config.scss b/lib/dropdown/_config.scss
new file mode 100644
index 000000000..364815c0b
--- /dev/null
+++ b/lib/dropdown/_config.scss
@@ -0,0 +1,6 @@
+$dropdown-color-white: $color-white !default;
+$dropdown-color-primary: $color-primary !default;
+$dropdown-color-primary-contrast: $color-primary-contrast !default;
+$dropdown-value-hover-background: $palette-grey-200 !default;
+$dropdown-overflow-max-height: 45vh !default;
+$dropdown-value-border-radius: .2 * $unit !default;
diff --git a/lib/dropdown/index.js b/lib/dropdown/index.js
new file mode 100644
index 000000000..b2de898e7
--- /dev/null
+++ b/lib/dropdown/index.js
@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Dropdown = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Dropdown = require('./Dropdown.js');
+
+var _input = require('../input');
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Dropdown = (0, _Dropdown.dropdownFactory)(_input.Input);
+var ThemedDropdown = (0, _reactCssThemr.themr)(_identifiers.DROPDOWN, _theme2.default)(Dropdown);
+
+exports.default = ThemedDropdown;
+exports.Dropdown = ThemedDropdown;
\ No newline at end of file
diff --git a/lib/dropdown/theme.scss b/lib/dropdown/theme.scss
new file mode 100644
index 000000000..58035e162
--- /dev/null
+++ b/lib/dropdown/theme.scss
@@ -0,0 +1,129 @@
+@import "http://github.com/base";
+@import "http://github.com/input/config";
+@import "http://github.com/config";
+
+.dropdown {
+  position: relative;
+  &:not(.active) {
+    > .values {
+      max-height: 0;
+      visibility: hidden;
+    }
+  }
+  &.active {
+    > .label, > .value {
+      opacity: .5;
+    }
+    > .values {
+      max-height: $dropdown-overflow-max-height;
+      visibility: visible;
+      box-shadow: $zdepth-shadow-1;
+    }
+  }
+  &:not(.up) > .values {
+    top: 0;
+    bottom: auto;
+  }
+  &.up > .values {
+    top: auto;
+    bottom: 0;
+  }
+  &.disabled {
+    pointer-events: none;
+    cursor: normal;
+  }
+}
+
+.value {
+  > input {
+    cursor: pointer;
+  }
+  &:after {
+    $size: ($input-field-height / 7);
+    $border: $size solid transparent;
+    position: absolute;
+    top: 50%;
+    right: $input-chevron-offset;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+    content: "";
+    border-top: $size solid $input-text-bottom-border-color;
+    border-right: $border;
+    border-left: $border;
+    transition: transform $animation-duration $animation-curve-default;
+  }
+}
+.field {
+  position: relative;
+  padding: $input-padding 0;
+  cursor: pointer;
+  &.errored {
+    padding-bottom: 0;
+    > .label {
+      color: $input-text-error-color;
+    }
+    > .templateValue {
+      border-bottom: 1px solid $input-text-error-color;
+    }
+  }
+  &.disabled {
+    pointer-events: none;
+    cursor: normal;
+    > .templateValue {
+      border-bottom-style: dotted;
+      opacity: .7;
+    }
+  }
+}
+
+.templateValue {
+  position: relative;
+  min-height: $input-field-height;
+  padding: $input-field-padding 0;
+  color: $color-text;
+  background-color: $input-text-background-color;
+  border-bottom: 1px solid $input-text-bottom-border-color;
+}
+
+.label {
+  position: absolute;
+  top: $input-focus-label-top;
+  left: 0;
+  font-size: $input-label-font-size;
+  line-height: $input-field-font-size;
+  color: $input-text-label-color;
+}
+
+.error {
+  margin-bottom: - $input-underline-height;
+  font-size: $input-label-font-size;
+  line-height: $input-underline-height;
+  color: $input-text-error-color;
+}
+
+.values {
+  @include no-webkit-scrollbar;
+  position: absolute;
+  z-index: $z-index-high;
+  width: 100%;
+  overflow-y: auto;
+  list-style: none;
+  background-color: $dropdown-color-white;
+  border-radius: $dropdown-value-border-radius;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transition-property: max-height, box-shadow;
+  > * {
+    position: relative;
+    padding: $unit;
+    overflow: hidden;
+    cursor: pointer;
+    &:hover {
+      background-color: $dropdown-value-hover-background;
+    }
+    &.selected {
+      color: $dropdown-color-primary;
+    }
+  }
+}
diff --git a/lib/font_icon/FontIcon.js b/lib/font_icon/FontIcon.js
new file mode 100644
index 000000000..779960142
--- /dev/null
+++ b/lib/font_icon/FontIcon.js
@@ -0,0 +1,51 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FontIcon = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+var FontIcon = function FontIcon(_ref) {
+  var children = _ref.children;
+  var className = _ref.className;
+  var value = _ref.value;
+
+  var other = _objectWithoutProperties(_ref, ['children', 'className', 'value']);
+
+  return _react2.default.createElement(
+    'span',
+    _extends({
+      'data-react-toolbox': 'font-icon',
+      className: (0, _classnames2.default)({ 'material-icons': typeof value === 'string' }, className)
+    }, other),
+    value,
+    children
+  );
+};
+
+FontIcon.propTypes = {
+  children: _react.PropTypes.any,
+  className: _react.PropTypes.string,
+  value: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element])
+};
+
+FontIcon.defaultProps = {
+  className: ''
+};
+
+exports.default = FontIcon;
+exports.FontIcon = FontIcon;
\ No newline at end of file
diff --git a/lib/font_icon/index.js b/lib/font_icon/index.js
new file mode 100644
index 000000000..8f7ca8346
--- /dev/null
+++ b/lib/font_icon/index.js
@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FontIcon = undefined;
+
+var _FontIcon = require('./FontIcon.js');
+
+var _FontIcon2 = _interopRequireDefault(_FontIcon);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = _FontIcon2.default;
+exports.FontIcon = _FontIcon2.default;
\ No newline at end of file
diff --git a/lib/form/Form.js b/lib/form/Form.js
new file mode 100644
index 000000000..7de399c99
--- /dev/null
+++ b/lib/form/Form.js
@@ -0,0 +1,151 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Form = exports.formFactory = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _Autocomplete = require('../autocomplete/Autocomplete.js');
+
+var _Autocomplete2 = _interopRequireDefault(_Autocomplete);
+
+var _Button = require('../button/Button.js');
+
+var _Button2 = _interopRequireDefault(_Button);
+
+var _Checkbox = require('../checkbox/Checkbox.js');
+
+var _Checkbox2 = _interopRequireDefault(_Checkbox);
+
+var _DatePicker = require('../date_picker/DatePicker.js');
+
+var _DatePicker2 = _interopRequireDefault(_DatePicker);
+
+var _Dropdown = require('../dropdown/Dropdown.js');
+
+var _Dropdown2 = _interopRequireDefault(_Dropdown);
+
+var _Input = require('../input/Input.js');
+
+var _Input2 = _interopRequireDefault(_Input);
+
+var _RadioGroup = require('../radio/RadioGroup.js');
+
+var _RadioGroup2 = _interopRequireDefault(_RadioGroup);
+
+var _Slider = require('../slider/Slider.js');
+
+var _Slider2 = _interopRequireDefault(_Slider);
+
+var _Switch = require('../switch/Switch.js');
+
+var _Switch2 = _interopRequireDefault(_Switch);
+
+var _TimePicker = require('../time_picker/TimePicker.js');
+
+var _TimePicker2 = _interopRequireDefault(_TimePicker);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(Autocomplete, Button, Checkbox, DatePicker, Dropdown, Input, RadioGroup, Slider, Switch, TimePicker) {
+
+  var COMPONENTS = {
+    'autocomplete': Autocomplete,
+    'button': Button,
+    'checkbox': Checkbox,
+    'datepicker': DatePicker,
+    'dropdown': Dropdown,
+    'input': Input,
+    'radioGroup': RadioGroup,
+    'slider': Slider,
+    'switch': Switch,
+    'timepicker': TimePicker
+  };
+
+  var Form = function (_Component) {
+    _inherits(Form, _Component);
+
+    function Form() {
+      var _Object$getPrototypeO;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, Form);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Form)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.onSubmit = function (event) {
+        event.preventDefault();
+        if (_this.props.onSubmit) _this.props.onSubmit(event);
+      }, _this.onChange = function (field, value, event) {
+        if (_this.props.onChange) _this.props.onChange(field, value, event);
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(Form, [{
+      key: 'renderFields',
+      value: function renderFields() {
+        var _this2 = this;
+
+        return Object.keys(this.props.model).map(function (field, index) {
+          var properties = _this2.props.model[field];
+          var Field = COMPONENTS[properties.kind.toLowerCase()];
+          return _react2.default.createElement(Field, _extends({ key: index }, properties, { onChange: _this2.onChange.bind(_this2, field) }));
+        });
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        return _react2.default.createElement(
+          'form',
+          { 'data-react-toolbox': 'form', className: this.props.className, onSubmit: this.onSubmit },
+          this.renderFields(),
+          this.props.children
+        );
+      }
+    }]);
+
+    return Form;
+  }(_react.Component);
+
+  Form.propTypes = {
+    attributes: _react.PropTypes.array,
+    children: _react.PropTypes.node,
+    className: _react.PropTypes.string,
+    model: _react.PropTypes.object,
+    onChange: _react.PropTypes.func,
+    onError: _react.PropTypes.func,
+    onSubmit: _react.PropTypes.func,
+    onValid: _react.PropTypes.func,
+    storage: _react.PropTypes.string
+  };
+  Form.defaultProps = {
+    attributes: [],
+    className: ''
+  };
+
+
+  return Form;
+};
+
+var Form = factory(_Autocomplete2.default, _Button2.default, _Checkbox2.default, _DatePicker2.default, _Dropdown2.default, _Input2.default, _RadioGroup2.default, _Slider2.default, _Switch2.default, _TimePicker2.default);
+
+exports.default = Form;
+exports.formFactory = factory;
+exports.Form = Form;
\ No newline at end of file
diff --git a/lib/form/index.js b/lib/form/index.js
new file mode 100644
index 000000000..ee5d2741d
--- /dev/null
+++ b/lib/form/index.js
@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Form = undefined;
+
+var _Form = require('./Form.js');
+
+var _autocomplete = require('../autocomplete');
+
+var _autocomplete2 = _interopRequireDefault(_autocomplete);
+
+var _button = require('../button');
+
+var _button2 = _interopRequireDefault(_button);
+
+var _checkbox = require('../checkbox');
+
+var _checkbox2 = _interopRequireDefault(_checkbox);
+
+var _date_picker = require('../date_picker');
+
+var _date_picker2 = _interopRequireDefault(_date_picker);
+
+var _dropdown = require('../dropdown');
+
+var _dropdown2 = _interopRequireDefault(_dropdown);
+
+var _input = require('../input');
+
+var _input2 = _interopRequireDefault(_input);
+
+var _radio = require('../radio');
+
+var _radio2 = _interopRequireDefault(_radio);
+
+var _slider = require('../slider');
+
+var _slider2 = _interopRequireDefault(_slider);
+
+var _switch = require('../switch');
+
+var _switch2 = _interopRequireDefault(_switch);
+
+var _time_picker = require('../time_picker');
+
+var _time_picker2 = _interopRequireDefault(_time_picker);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ThemedForm = (0, _Form.formFactory)(_autocomplete2.default, _button2.default, _checkbox2.default, _date_picker2.default, _dropdown2.default, _input2.default, _radio2.default, _slider2.default, _switch2.default, _time_picker2.default);
+
+exports.default = ThemedForm;
+exports.Form = ThemedForm;
\ No newline at end of file
diff --git a/lib/hoc/ActivableRenderer.js b/lib/hoc/ActivableRenderer.js
new file mode 100644
index 000000000..e64654f71
--- /dev/null
+++ b/lib/hoc/ActivableRenderer.js
@@ -0,0 +1,108 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var ActivableRendererFactory = function ActivableRendererFactory() {
+  var options = arguments.length <= 0 || arguments[0] === undefined ? { delay: 500 } : arguments[0];
+  return function (ActivableComponent) {
+    var _class, _temp2;
+
+    return _temp2 = _class = function (_Component) {
+      _inherits(ActivableRenderer, _Component);
+
+      function ActivableRenderer() {
+        var _Object$getPrototypeO;
+
+        var _temp, _this, _ret;
+
+        _classCallCheck(this, ActivableRenderer);
+
+        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(ActivableRenderer)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+          active: _this.props.active,
+          rendered: _this.props.active
+        }, _temp), _possibleConstructorReturn(_this, _ret);
+      }
+
+      _createClass(ActivableRenderer, [{
+        key: 'componentWillReceiveProps',
+        value: function componentWillReceiveProps(nextProps) {
+          if (nextProps.active && !this.props.active) this.renderAndActivate();
+          if (!nextProps.active && this.props.active) this.deactivateAndUnrender();
+        }
+      }, {
+        key: 'renderAndActivate',
+        value: function renderAndActivate() {
+          var _this2 = this;
+
+          if (this.unrenderTimeout) clearTimeout(this.unrenderTimeout);
+          this.setState({ rendered: true, active: false }, function () {
+            setTimeout(function () {
+              return _this2.setState({ active: true });
+            }, 20);
+          });
+        }
+      }, {
+        key: 'deactivateAndUnrender',
+        value: function deactivateAndUnrender() {
+          var _this3 = this;
+
+          this.setState({ rendered: true, active: false }, function () {
+            _this3.unrenderTimeout = setTimeout(function () {
+              _this3.setState({ rendered: false });
+              _this3.unrenderTimeout = null;
+            }, _this3.props.delay);
+          });
+        }
+      }, {
+        key: 'render',
+        value: function render() {
+          var _props = this.props;
+          var delay = _props.delay;
+
+          var others = _objectWithoutProperties(_props, ['delay']); // eslint-disable-line no-unused-vars
+
+
+          var _state = this.state;
+          var active = _state.active;
+          var rendered = _state.rendered;
+
+          return rendered ? _react2.default.createElement(ActivableComponent, _extends({}, others, { active: active })) : null;
+        }
+      }]);
+
+      return ActivableRenderer;
+    }(_react.Component), _class.propTypes = {
+      active: _react.PropTypes.bool.isRequired,
+      children: _react.PropTypes.any,
+      delay: _react.PropTypes.number
+    }, _class.defaultProps = {
+      delay: options.delay
+    }, _temp2;
+  };
+};
+
+exports.default = ActivableRendererFactory;
\ No newline at end of file
diff --git a/lib/hoc/Portal.js b/lib/hoc/Portal.js
new file mode 100644
index 000000000..bf12d9039
--- /dev/null
+++ b/lib/hoc/Portal.js
@@ -0,0 +1,145 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactDom = require('react-dom');
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var Portal = function (_Component) {
+  _inherits(Portal, _Component);
+
+  function Portal() {
+    _classCallCheck(this, Portal);
+
+    return _possibleConstructorReturn(this, Object.getPrototypeOf(Portal).apply(this, arguments));
+  }
+
+  _createClass(Portal, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this._renderOverlay();
+    }
+  }, {
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      if (this._overlayTarget && nextProps.container !== this.props.container) {
+        this._portalContainerNode.removeChild(this._overlayTarget);
+        this._portalContainerNode = getContainer(nextProps.container);
+        this._portalContainerNode.appendChild(this._overlayTarget);
+      }
+    }
+  }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate() {
+      this._renderOverlay();
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      this._unrenderOverlay();
+      this._unmountOverlayTarget();
+    }
+  }, {
+    key: '_mountOverlayTarget',
+    value: function _mountOverlayTarget() {
+      if (!this._overlayTarget) {
+        this._overlayTarget = document.createElement('div');
+        this._portalContainerNode = getContainer(this.props.container);
+        this._portalContainerNode.appendChild(this._overlayTarget);
+      }
+    }
+  }, {
+    key: '_unmountOverlayTarget',
+    value: function _unmountOverlayTarget() {
+      if (this._overlayTarget) {
+        this._portalContainerNode.removeChild(this._overlayTarget);
+        this._overlayTarget = null;
+      }
+      this._portalContainerNode = null;
+    }
+  }, {
+    key: '_renderOverlay',
+    value: function _renderOverlay() {
+      var overlay = !this.props.children ? null : _react2.default.Children.only(this.props.children);
+
+      if (overlay !== null) {
+        this._mountOverlayTarget();
+        this._overlayInstance = _reactDom2.default.unstable_renderSubtreeIntoContainer(this, overlay, this._overlayTarget);
+      } else {
+        this._unrenderOverlay();
+        this._unmountOverlayTarget();
+      }
+    }
+  }, {
+    key: '_unrenderOverlay',
+    value: function _unrenderOverlay() {
+      if (this._overlayTarget) {
+        _reactDom2.default.unmountComponentAtNode(this._overlayTarget);
+        this._overlayInstance = null;
+      }
+    }
+  }, {
+    key: 'getMountNode',
+    value: function getMountNode() {
+      return this._overlayTarget;
+    }
+  }, {
+    key: 'getOverlayDOMNode',
+    value: function getOverlayDOMNode() {
+      if (!this.isMounted()) {
+        throw new Error('getOverlayDOMNode(): A component must be mounted to have a DOM node.');
+      }
+
+      if (this._overlayInstance) {
+        if (this._overlayInstance.getWrappedDOMNode) {
+          return this._overlayInstance.getWrappedDOMNode();
+        } else {
+          return _reactDom2.default.findDOMNode(this._overlayInstance);
+        }
+      }
+
+      return null;
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      return null;
+    }
+  }]);
+
+  return Portal;
+}(_react.Component);
+
+Portal.propTypes = {
+  children: _react.PropTypes.any,
+  container: _react.PropTypes.any,
+  lockBody: _react.PropTypes.bool
+};
+Portal.defaultProps = {
+  lockBody: true
+};
+
+
+function getContainer(container) {
+  var _container = typeof container === 'function' ? container() : container;
+  return _reactDom2.default.findDOMNode(_container) || document.body;
+}
+
+exports.default = Portal;
\ No newline at end of file
diff --git a/lib/identifiers.js b/lib/identifiers.js
new file mode 100644
index 000000000..5bc7ebe24
--- /dev/null
+++ b/lib/identifiers.js
@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var APP_BAR = exports.APP_BAR = 'RTAppBar';
+var AUTOCOMPLETE = exports.AUTOCOMPLETE = 'RTAutocomplete';
+var AVATAR = exports.AVATAR = 'RTAvatar';
+var BUTTON = exports.BUTTON = 'RTButton';
+var CARD = exports.CARD = 'RTCard';
+var CHIP = exports.CHIP = 'RTChip';
+var DATE_PICKER = exports.DATE_PICKER = 'RTDatePicker';
+var DIALOG = exports.DIALOG = 'RTDialog';
+var DROPDOWN = exports.DROPDOWN = 'RTDropdown';
+var INPUT = exports.INPUT = 'RTInput';
+var LAYOUT = exports.LAYOUT = 'RTLayout';
+var LINK = exports.LINK = 'RTLink';
+var LIST = exports.LIST = 'RTList';
+var NAVIGATION = exports.NAVIGATION = 'RTNavigation';
+var OVERLAY = exports.OVERLAY = 'RTOverlay';
+var PROGRESS_BAR = exports.PROGRESS_BAR = 'RTProgressBar';
+var RADIO = exports.RADIO = 'RTRadio';
+var RIPPLE = exports.RIPPLE = 'RTRipple';
+var SLIDER = exports.SLIDER = 'RTSlider';
+var SNACKBAR = exports.SNACKBAR = 'RTSnackbar';
+var SWITCH = exports.SWITCH = 'RTSwitch';
+var TABLE = exports.TABLE = 'RTTable';
+var TABS = exports.TABS = 'RTTabs';
+var TOOLTIP = exports.TOOLTIP = 'RTTooltip';
+var TIMEPICKER = exports.TIMEPICKER = 'RTTimePicker';
\ No newline at end of file
diff --git a/lib/index.js b/lib/index.js
new file mode 100644
index 000000000..87f0e6b4b
--- /dev/null
+++ b/lib/index.js
@@ -0,0 +1,206 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TimePicker = exports.Tooltip = exports.Table = exports.Switch = exports.Snackbar = exports.Slider = exports.Ripple = exports.ProgressBar = exports.Navigation = exports.Link = exports.Input = exports.Form = exports.FontIcon = exports.Dropdown = exports.Drawer = exports.Dialog = exports.DatePicker = exports.Checkbox = exports.Chip = exports.Avatar = exports.Autocomplete = exports.AppBar = undefined;
+
+var _button = require('./button');
+
+Object.keys(_button).forEach(function (key) {
+  if (key === "default") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _button[key];
+    }
+  });
+});
+
+var _card = require('./card');
+
+Object.keys(_card).forEach(function (key) {
+  if (key === "default") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _card[key];
+    }
+  });
+});
+
+var _layout = require('./layout');
+
+Object.keys(_layout).forEach(function (key) {
+  if (key === "default") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _layout[key];
+    }
+  });
+});
+
+var _list = require('./list');
+
+Object.keys(_list).forEach(function (key) {
+  if (key === "default") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _list[key];
+    }
+  });
+});
+
+var _menu = require('./menu');
+
+Object.keys(_menu).forEach(function (key) {
+  if (key === "default") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _menu[key];
+    }
+  });
+});
+
+var _radio = require('./radio');
+
+Object.keys(_radio).forEach(function (key) {
+  if (key === "default") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _radio[key];
+    }
+  });
+});
+
+var _tabs = require('./tabs');
+
+Object.keys(_tabs).forEach(function (key) {
+  if (key === "default") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _tabs[key];
+    }
+  });
+});
+
+require('./utils/polyfills');
+
+var _app_bar = require('./app_bar');
+
+var _app_bar2 = _interopRequireDefault(_app_bar);
+
+var _autocomplete = require('./autocomplete');
+
+var _autocomplete2 = _interopRequireDefault(_autocomplete);
+
+var _avatar = require('./avatar');
+
+var _avatar2 = _interopRequireDefault(_avatar);
+
+var _chip = require('./chip');
+
+var _chip2 = _interopRequireDefault(_chip);
+
+var _checkbox = require('./checkbox');
+
+var _checkbox2 = _interopRequireDefault(_checkbox);
+
+var _date_picker = require('./date_picker');
+
+var _date_picker2 = _interopRequireDefault(_date_picker);
+
+var _dialog = require('./dialog');
+
+var _dialog2 = _interopRequireDefault(_dialog);
+
+var _drawer = require('./drawer');
+
+var _drawer2 = _interopRequireDefault(_drawer);
+
+var _dropdown = require('./dropdown');
+
+var _dropdown2 = _interopRequireDefault(_dropdown);
+
+var _font_icon = require('./font_icon');
+
+var _font_icon2 = _interopRequireDefault(_font_icon);
+
+var _form = require('./form');
+
+var _form2 = _interopRequireDefault(_form);
+
+var _input = require('./input');
+
+var _input2 = _interopRequireDefault(_input);
+
+var _link = require('./link');
+
+var _link2 = _interopRequireDefault(_link);
+
+var _navigation = require('./navigation');
+
+var _navigation2 = _interopRequireDefault(_navigation);
+
+var _progress_bar = require('./progress_bar');
+
+var _progress_bar2 = _interopRequireDefault(_progress_bar);
+
+var _ripple = require('./ripple');
+
+var _ripple2 = _interopRequireDefault(_ripple);
+
+var _slider = require('./slider');
+
+var _slider2 = _interopRequireDefault(_slider);
+
+var _snackbar = require('./snackbar');
+
+var _snackbar2 = _interopRequireDefault(_snackbar);
+
+var _switch = require('./switch');
+
+var _switch2 = _interopRequireDefault(_switch);
+
+var _table = require('./table');
+
+var _table2 = _interopRequireDefault(_table);
+
+var _tooltip = require('./tooltip');
+
+var _tooltip2 = _interopRequireDefault(_tooltip);
+
+var _time_picker = require('./time_picker');
+
+var _time_picker2 = _interopRequireDefault(_time_picker);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.AppBar = _app_bar2.default; // Import polyfills for IE11
+
+exports.Autocomplete = _autocomplete2.default;
+exports.Avatar = _avatar2.default;
+exports.Chip = _chip2.default;
+exports.Checkbox = _checkbox2.default;
+exports.DatePicker = _date_picker2.default;
+exports.Dialog = _dialog2.default;
+exports.Drawer = _drawer2.default;
+exports.Dropdown = _dropdown2.default;
+exports.FontIcon = _font_icon2.default;
+exports.Form = _form2.default;
+exports.Input = _input2.default;
+exports.Link = _link2.default;
+exports.Navigation = _navigation2.default;
+exports.ProgressBar = _progress_bar2.default;
+exports.Ripple = _ripple2.default;
+exports.Slider = _slider2.default;
+exports.Snackbar = _snackbar2.default;
+exports.Switch = _switch2.default;
+exports.Table = _table2.default;
+exports.Tooltip = _tooltip2.default;
+exports.TimePicker = _time_picker2.default;
\ No newline at end of file
diff --git a/lib/input/Input.js b/lib/input/Input.js
new file mode 100644
index 000000000..455348aac
--- /dev/null
+++ b/lib/input/Input.js
@@ -0,0 +1,202 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Input = exports.inputFactory = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames4 = require('classnames');
+
+var _classnames5 = _interopRequireDefault(_classnames4);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _FontIcon = require('../font_icon/FontIcon.js');
+
+var _FontIcon2 = _interopRequireDefault(_FontIcon);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(FontIcon) {
+  var Input = function (_React$Component) {
+    _inherits(Input, _React$Component);
+
+    function Input() {
+      var _Object$getPrototypeO;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, Input);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Input)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleChange = function (event) {
+        if (_this.props.onChange) _this.props.onChange(event.target.value, event);
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(Input, [{
+      key: 'blur',
+      value: function blur() {
+        this.refs.input.blur();
+      }
+    }, {
+      key: 'focus',
+      value: function focus() {
+        this.refs.input.focus();
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _classnames2;
+
+        var _props = this.props;
+        var children = _props.children;
+        var disabled = _props.disabled;
+        var error = _props.error;
+        var floating = _props.floating;
+        var hint = _props.hint;
+        var icon = _props.icon;
+        var labelText = _props.label;
+        var maxLength = _props.maxLength;
+        var multiline = _props.multiline;
+        var required = _props.required;
+        var theme = _props.theme;
+        var type = _props.type;
+        var value = _props.value;
+
+        var others = _objectWithoutProperties(_props, ['children', 'disabled', 'error', 'floating', 'hint', 'icon', 'label', 'maxLength', 'multiline', 'required', 'theme', 'type', 'value']);
+
+        var length = maxLength && value ? value.length : 0;
+        var labelClassName = (0, _classnames5.default)(theme.label, _defineProperty({}, theme.fixed, !floating));
+
+        var className = (0, _classnames5.default)(theme.input, (_classnames2 = {}, _defineProperty(_classnames2, theme.disabled, disabled), _defineProperty(_classnames2, theme.errored, error), _defineProperty(_classnames2, theme.hidden, type === 'hidden'), _defineProperty(_classnames2, theme.withIcon, icon), _classnames2), this.props.className);
+
+        var valuePresent = value !== null && value !== undefined && value !== '' && !Number.isNaN(value);
+
+        var InputElement = _react2.default.createElement(multiline ? 'textarea' : 'input', _extends({}, others, {
+          className: (0, _classnames5.default)(theme.inputElement, _defineProperty({}, theme.filled, valuePresent)),
+          onChange: this.handleChange,
+          ref: 'input',
+          role: 'input',
+          disabled: disabled,
+          required: required,
+          type: type,
+          value: value,
+          maxLength: maxLength
+        }));
+
+        return _react2.default.createElement(
+          'div',
+          { 'data-react-toolbox': 'input', className: className },
+          InputElement,
+          icon ? _react2.default.createElement(FontIcon, { className: theme.icon, value: icon }) : null,
+          _react2.default.createElement('span', { className: theme.bar }),
+          labelText ? _react2.default.createElement(
+            'label',
+            { className: labelClassName },
+            labelText,
+            required ? _react2.default.createElement(
+              'span',
+              { className: theme.required },
+              ' * '
+            ) : null
+          ) : null,
+          hint ? _react2.default.createElement(
+            'span',
+            { className: theme.hint },
+            hint
+          ) : null,
+          error ? _react2.default.createElement(
+            'span',
+            { className: theme.error },
+            error
+          ) : null,
+          maxLength ? _react2.default.createElement(
+            'span',
+            { className: theme.counter },
+            length,
+            '/',
+            maxLength
+          ) : null,
+          children
+        );
+      }
+    }]);
+
+    return Input;
+  }(_react2.default.Component);
+
+  Input.propTypes = {
+    children: _react2.default.PropTypes.any,
+    className: _react2.default.PropTypes.string,
+    disabled: _react2.default.PropTypes.bool,
+    error: _react2.default.PropTypes.string,
+    floating: _react2.default.PropTypes.bool,
+    hint: _react2.default.PropTypes.string,
+    icon: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.element]),
+    label: _react2.default.PropTypes.string,
+    maxLength: _react2.default.PropTypes.number,
+    multiline: _react2.default.PropTypes.bool,
+    onBlur: _react2.default.PropTypes.func,
+    onChange: _react2.default.PropTypes.func,
+    onFocus: _react2.default.PropTypes.func,
+    onKeyPress: _react2.default.PropTypes.func,
+    required: _react2.default.PropTypes.bool,
+    theme: _react2.default.PropTypes.shape({
+      bar: _react2.default.PropTypes.string,
+      counter: _react2.default.PropTypes.string,
+      disabled: _react2.default.PropTypes.string,
+      error: _react2.default.PropTypes.string,
+      errored: _react2.default.PropTypes.string,
+      hidden: _react2.default.PropTypes.string,
+      hint: _react2.default.PropTypes.string,
+      icon: _react2.default.PropTypes.string,
+      input: _react2.default.PropTypes.string,
+      inputElement: _react2.default.PropTypes.string,
+      required: _react2.default.PropTypes.string,
+      withIcon: _react2.default.PropTypes.string
+    }),
+    type: _react2.default.PropTypes.string,
+    value: _react2.default.PropTypes.any
+  };
+  Input.defaultProps = {
+    className: '',
+    hint: '',
+    disabled: false,
+    floating: true,
+    multiline: false,
+    required: false,
+    type: 'text'
+  };
+
+
+  return Input;
+};
+
+var Input = factory(_FontIcon2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.INPUT)(Input);
+exports.inputFactory = factory;
+exports.Input = Input;
\ No newline at end of file
diff --git a/lib/input/_config.scss b/lib/input/_config.scss
new file mode 100644
index 000000000..ff9f58cda
--- /dev/null
+++ b/lib/input/_config.scss
@@ -0,0 +1,20 @@
+$input-padding: 2 * $unit !default;
+$input-field-padding: .8 * $unit !default;
+$input-field-font-size: 1.6 * $unit !default;
+$input-field-height: $input-field-padding * 2 + $input-field-font-size * 1.4 !default;
+$input-label-font-size: 1.2 * $unit !default;
+$input-focus-label-top: .6 * $unit !default;
+$input-text-background-color: transparent !default;
+$input-text-label-color: rgba($color-black, 0.26) !default;
+$input-text-bottom-border-color: rgba($color-black, 0.12) !default;
+$input-text-highlight-color: $color-primary !default;
+$input-text-disabled-color: $input-text-bottom-border-color !default;
+$input-text-disabled-text-color: $input-text-label-color !default;
+$input-text-error-color: rgb(222, 50, 38) !default;
+$input-text-required-color: rgb(222, 50, 38) !default;
+$input-underline-height:  2 * $unit !default;
+$input-icon-font-size: 2.4 * $unit !default;
+$input-icon-size: 2 * $input-icon-font-size !default;
+$input-icon-offset: 1.6 * $unit !default;
+$input-chevron-offset: .8 * $unit !default;
+$input-hint-opacity: 1 !default;
diff --git a/lib/input/index.js b/lib/input/index.js
new file mode 100644
index 000000000..5bb8e30b1
--- /dev/null
+++ b/lib/input/index.js
@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Input = undefined;
+
+var _identifiers = require('../identifiers.js');
+
+var _reactCssThemr = require('react-css-themr');
+
+var _Input = require('./Input.js');
+
+var _FontIcon = require('../font_icon/FontIcon.js');
+
+var _FontIcon2 = _interopRequireDefault(_FontIcon);
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Input = (0, _Input.inputFactory)(_FontIcon2.default);
+var ThemedInput = (0, _reactCssThemr.themr)(_identifiers.INPUT, _theme2.default)(Input);
+
+exports.default = ThemedInput;
+exports.Input = ThemedInput;
\ No newline at end of file
diff --git a/lib/input/theme.scss b/lib/input/theme.scss
new file mode 100644
index 000000000..06913179e
--- /dev/null
+++ b/lib/input/theme.scss
@@ -0,0 +1,150 @@
+@import "http://github.com/base";
+@import "http://github.com/config";
+
+.input {
+  position: relative;
+  padding: $input-padding 0;
+  &.withIcon {
+    margin-left: $input-icon-size;
+  }
+}
+
+.icon {
+  position: absolute;
+  top: $input-icon-offset;
+  left: -$input-icon-size;
+  display: block;
+  width: $input-icon-size;
+  height: $input-icon-size;
+  font-size: $input-icon-font-size !important;
+  line-height: $input-icon-size !important;
+  color: $input-text-label-color;
+  text-align: center;
+  transition: color $animation-duration $animation-curve-default;
+}
+
+.inputElement {
+  display: block;
+  width: 100%;
+  padding: $input-field-padding 0;
+  font-size: $input-field-font-size;
+  color: $color-text;
+  background-color: $input-text-background-color;
+  border: 0;
+  border-bottom: 1px solid $input-text-bottom-border-color;
+  outline: none;
+  &:focus {
+    ~ .bar:before, ~ .bar:after {
+      width: 50%;
+    }
+    ~ .label:not(.fixed) {
+      color: $input-text-highlight-color;
+    }
+    ~ .label > .required {
+      color: $input-text-required-color;
+    }
+    ~ .hint {
+      opacity: $input-hint-opacity;
+    }
+    ~ .icon {
+      color: $input-text-highlight-color;
+    }
+  }
+  &:focus, &.filled, &[type="date"], &[type="time"] {
+    ~ .label:not(.fixed) {
+      top: $input-focus-label-top;
+      font-size: $input-label-font-size;
+    }
+  }
+  &.filled ~ .label.fixed, &.filled ~ .hint {
+    display: none;
+  }
+}
+
+.label {
+  position: absolute;
+  top: $input-padding + (1.5 * $input-field-padding);
+  left: 0;
+  font-size: $input-field-font-size;
+  line-height: $input-field-font-size;
+  color: $input-text-label-color;
+  pointer-events: none;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transition-property: top, font-size, color;
+  &.fixed ~ .hint {
+    display: none;
+  }
+}
+
+.hint {
+  position: absolute;
+  top: $input-padding + (1.5 * $input-field-padding);
+  left: 0;
+  font-size: $input-field-font-size;
+  line-height: $input-field-font-size;
+  color: $input-text-label-color;
+  pointer-events: none;
+  opacity: 0;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transition-property: opacity;
+}
+
+.bar {
+  position: relative;
+  display: block;
+  width: 100%;
+  &:before, &:after {
+    @include material-animation-default();
+    position: absolute;
+    bottom: 0;
+    width: 0;
+    height: 2px;
+    content: "";
+    background-color: $input-text-highlight-color;
+    transition-property: width, background-color;
+  }
+  &:before {
+    left: 50%;
+  }
+  &:after {
+    right: 50%;
+  }
+}
+
+.error, .counter {
+  margin-bottom: - $input-underline-height;
+  font-size: $input-label-font-size;
+  line-height: $input-underline-height;
+  color: $input-text-error-color;
+}
+
+.counter {
+  position: absolute;
+  right: 0;
+  color: $input-text-label-color;
+}
+
+.disabled > .inputElement {
+  color: $input-text-disabled-text-color;
+  border-bottom-style: dotted;
+}
+
+.errored {
+  padding-bottom: 0;
+  > .inputElement {
+    margin-top: 1px;
+    border-bottom-color: $input-text-error-color;
+  }
+  > .counter, > .label {
+    color: $input-text-error-color;
+  }
+  > .label > .required {
+    color: $input-text-required-color;
+  }
+}
+
+.hidden {
+  display: none;
+}
diff --git a/lib/layout/Layout.js b/lib/layout/Layout.js
new file mode 100644
index 000000000..661afbd13
--- /dev/null
+++ b/lib/layout/Layout.js
@@ -0,0 +1,70 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Layout = undefined;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _identifiers = require('../identifiers.js');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Layout = function Layout(_ref) {
+  var className = _ref.className;
+  var children = _ref.children;
+  var theme = _ref.theme;
+  return _react2.default.createElement(
+    'div',
+    { 'data-react-toolbox': 'layout', className: (0, _classnames2.default)(theme.layout, className) },
+    children
+  );
+};
+
+var ALLOWED_THEMED = ['Themed Panel', 'Themed NavDrawer|Themed Panel', 'Themed NavDrawer|Themed Panel|Themed Sidebar', 'Themed Panel|Themed Sidebar'];
+
+function getChildName(child) {
+  if (child.type) {
+    return child.type.displayName || child.type.name || child.type;
+  }
+  if (!child.constructor || !child.constructor.name) {
+    return 'UNKNOWN';
+  }
+  return child.constructor.name;
+}
+
+Layout.propTypes = {
+  children: function children(props, propName, componentName) {
+    // Accept only [NavDrawer]Pane[Sidebar]
+    var children = props[propName];
+    if (_react2.default.Children.count(children) > 3) {
+      return new Error('`' + componentName + '` ' + 'should have a Pane for a child, optionally preceded and/or followed by a Drawer.');
+    }
+
+    var names = _react2.default.Children.map(children, getChildName).join('|');
+    if (! ~ALLOWED_THEMED.indexOf(names)) {
+      return new Error('`' + componentName + '` ' + 'should have a Panel for a child, optionally preceded by a NavDrawer and/or followed by a Sidebar.');
+    }
+  },
+
+  className: _react2.default.PropTypes.string,
+  theme: _react2.default.PropTypes.shape({
+    layout: _react2.default.PropTypes.string.isRequired
+  })
+};
+
+Layout.defaultProps = {
+  className: ''
+};
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.LAYOUT)(Layout);
+exports.Layout = Layout;
\ No newline at end of file
diff --git a/lib/layout/NavDrawer.js b/lib/layout/NavDrawer.js
new file mode 100644
index 000000000..6e5abe536
--- /dev/null
+++ b/lib/layout/NavDrawer.js
@@ -0,0 +1,90 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NavDrawer = undefined;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames3 = require('classnames');
+
+var _classnames4 = _interopRequireDefault(_classnames3);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var NavDrawer = function NavDrawer(_ref) {
+  var _classnames;
+
+  var active = _ref.active;
+  var children = _ref.children;
+  var className = _ref.className;
+  var onOverlayClick = _ref.onOverlayClick;
+  var permanentAt = _ref.permanentAt;
+  var pinned = _ref.pinned;
+  var scrollY = _ref.scrollY;
+  var theme = _ref.theme;
+  var width = _ref.width;
+
+  var rootClasses = (0, _classnames4.default)([theme.navDrawer], (_classnames = {}, _defineProperty(_classnames, theme[permanentAt + 'Permanent'], permanentAt), _defineProperty(_classnames, theme.wide, width === 'wide'), _defineProperty(_classnames, theme.active, active), _defineProperty(_classnames, theme.pinned, pinned), _classnames), className);
+
+  var drawerClasses = (0, _classnames4.default)(theme.drawerContent, _defineProperty({}, theme.scrollY, scrollY));
+
+  return _react2.default.createElement(
+    'div',
+    { 'data-react-toolbox': 'nav-drawer', className: rootClasses, onClick: onOverlayClick },
+    _react2.default.createElement(
+      'div',
+      { 'data-react-toolbox': 'nav-drawer-scrim', className: theme.scrim },
+      _react2.default.createElement(
+        'aside',
+        { 'data-react-toolbox': 'nav-drawer-content', className: drawerClasses },
+        children
+      )
+    )
+  );
+};
+
+NavDrawer.propTypes = {
+  active: _react2.default.PropTypes.bool,
+  children: _react2.default.PropTypes.any,
+  className: _react2.default.PropTypes.string,
+  onOverlayClick: _react2.default.PropTypes.func,
+  permanentAt: _react2.default.PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'xxl', 'xxxl']),
+  pinned: _react2.default.PropTypes.bool,
+  scrollY: _react2.default.PropTypes.bool,
+  theme: _react2.default.PropTypes.shape({
+    active: _react2.default.PropTypes.string.isRequired,
+    drawerContent: _react2.default.PropTypes.string.isRequired,
+    lgPermanent: _react2.default.PropTypes.string.isRequired,
+    mdPermanent: _react2.default.PropTypes.string.isRequired,
+    navDrawer: _react2.default.PropTypes.string.isRequired,
+    pinned: _react2.default.PropTypes.string.isRequired,
+    scrim: _react2.default.PropTypes.string.isRequired,
+    scrollY: _react2.default.PropTypes.string.isRequired,
+    smPermanent: _react2.default.PropTypes.string.isRequired,
+    wide: _react2.default.PropTypes.string.isRequired,
+    xlPermanent: _react2.default.PropTypes.string.isRequired,
+    xxlPermanent: _react2.default.PropTypes.string.isRequired,
+    xxxlPermanent: _react2.default.PropTypes.string.isRequired
+  }),
+  width: _react2.default.PropTypes.oneOf(['normal', 'wide'])
+};
+
+NavDrawer.defaultProps = {
+  active: false,
+  className: '',
+  scrollY: false,
+  width: 'normal'
+};
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.LAYOUT)(NavDrawer);
+exports.NavDrawer = NavDrawer;
\ No newline at end of file
diff --git a/lib/layout/Panel.js b/lib/layout/Panel.js
new file mode 100644
index 000000000..0da62485a
--- /dev/null
+++ b/lib/layout/Panel.js
@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Panel = undefined;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var Panel = function Panel(_ref) {
+  var children = _ref.children;
+  var className = _ref.className;
+  var scrollY = _ref.scrollY;
+  var theme = _ref.theme;
+
+  var _className = (0, _classnames3.default)(theme.panel, _defineProperty({}, theme.scrollY, scrollY), className);
+
+  return _react2.default.createElement(
+    'div',
+    { 'data-react-toolbox': 'panel', className: _className },
+    children
+  );
+};
+
+Panel.propTypes = {
+  children: _react2.default.PropTypes.any,
+  className: _react2.default.PropTypes.string,
+  scrollY: _react2.default.PropTypes.bool,
+  theme: _react2.default.PropTypes.shape({
+    panel: _react2.default.PropTypes.string.isRequired,
+    scrollY: _react2.default.PropTypes.string.isRequired
+  })
+};
+
+Panel.defaultProps = {
+  className: '',
+  scrollY: false
+};
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.LAYOUT)(Panel);
+exports.Panel = Panel;
\ No newline at end of file
diff --git a/lib/layout/Sidebar.js b/lib/layout/Sidebar.js
new file mode 100644
index 000000000..04cae27cb
--- /dev/null
+++ b/lib/layout/Sidebar.js
@@ -0,0 +1,69 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Sidebar = undefined;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames3 = require('classnames');
+
+var _classnames4 = _interopRequireDefault(_classnames3);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var Sidebar = function Sidebar(_ref) {
+  var children = _ref.children;
+  var className = _ref.className;
+  var pinned = _ref.pinned;
+  var scrollY = _ref.scrollY;
+  var theme = _ref.theme;
+  var width = _ref.width;
+
+  var wrapperClasses = (0, _classnames4.default)(theme.sidebar, theme['width-' + width], _defineProperty({}, theme.pinned, pinned), className);
+
+  var innerClasses = (0, _classnames4.default)(theme.sidebarContent, _defineProperty({}, theme.scrollY, scrollY));
+
+  return _react2.default.createElement(
+    'div',
+    { 'data-react-toolbox': 'sidebar', className: wrapperClasses },
+    _react2.default.createElement(
+      'aside',
+      { 'data-react-toolbox': 'sidebar-content', className: innerClasses },
+      children
+    )
+  );
+};
+
+Sidebar.propTypes = {
+  children: _react2.default.PropTypes.any,
+  className: _react2.default.PropTypes.string,
+  pinned: _react2.default.PropTypes.bool,
+  scrollY: _react2.default.PropTypes.bool,
+  theme: _react2.default.PropTypes.shape({
+    pinned: _react2.default.PropTypes.string.isRequired,
+    scrollY: _react2.default.PropTypes.string.isRequired,
+    sidebar: _react2.default.PropTypes.string.isRequired,
+    sidebarContent: _react2.default.PropTypes.string.isRequired
+  }),
+  width: _react2.default.PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 25, 33, 50, 66, 75, 100])
+};
+
+Sidebar.defaultProps = {
+  className: '',
+  pinned: false,
+  scrollY: false,
+  width: 5
+};
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.LAYOUT)(Sidebar);
+exports.Sidebar = Sidebar;
\ No newline at end of file
diff --git a/lib/layout/_config.scss b/lib/layout/_config.scss
new file mode 100644
index 000000000..a1b318f7a
--- /dev/null
+++ b/lib/layout/_config.scss
@@ -0,0 +1,18 @@
+$drawer-background-color: $palette-grey-50 !default;
+$drawer-border-color: $palette-grey-300 !default;
+$drawer-text-color: $palette-grey-800 !default;
+
+$drawer-overlay-color: $color-black !default;
+$drawer-overlay-opacity: .6 !default;
+
+// from: https://www.google.com/design/spec/layout/structure.html#structure-side-nav
+$navigation-drawer-desktop-width: 5 * $standard-increment-desktop !default;
+$navigation-drawer-max-desktop-width: 40 * $unit !default;
+
+// Mobile:
+// Width = Screen width − 56 dp
+// Maximum width: 320dp
+$navigation-drawer-mobile-width: 5 * $standard-increment-mobile !default;
+
+// sass doesn't like use of variable here: calc(100% - $standard-increment-mobile);
+$navigation-drawer-max-mobile-width: calc(100% - 5.6rem) !default;
diff --git a/lib/layout/_mixins.scss b/lib/layout/_mixins.scss
new file mode 100644
index 000000000..1ace8de42
--- /dev/null
+++ b/lib/layout/_mixins.scss
@@ -0,0 +1,29 @@
+@mixin open() {
+  transition-delay: $animation-delay;
+  & > .scrim {
+    & > .drawerContent {
+      pointer-events: all;
+      transition-delay: $animation-delay;
+      transform: translateX(0);
+    }
+  }
+}
+
+@mixin permanent() {
+  @include open();
+
+  width: $navigation-drawer-desktop-width;
+  max-width: $navigation-drawer-desktop-width;
+
+  &.wide {
+    width: $navigation-drawer-max-desktop-width;
+    max-width: $navigation-drawer-max-desktop-width;
+  }
+
+  &.active {
+    & > .scrim {
+      width: 0;
+      background-color: rgba($drawer-overlay-color, 0);
+    }
+  }
+}
diff --git a/lib/layout/index.js b/lib/layout/index.js
new file mode 100644
index 000000000..47bfa886a
--- /dev/null
+++ b/lib/layout/index.js
@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Sidebar = exports.NavDrawer = exports.Panel = exports.Layout = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Layout = require('./Layout.js');
+
+var _Panel = require('./Panel.js');
+
+var _NavDrawer = require('./NavDrawer.js');
+
+var _Sidebar = require('./Sidebar.js');
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ThemedLayout = (0, _reactCssThemr.themr)(_identifiers.LAYOUT, _theme2.default)(_Layout.Layout);
+var ThemedPanel = (0, _reactCssThemr.themr)(_identifiers.LAYOUT, _theme2.default)(_Panel.Panel);
+var ThemedNavDrawer = (0, _reactCssThemr.themr)(_identifiers.LAYOUT, _theme2.default)(_NavDrawer.NavDrawer);
+var ThemedSidebar = (0, _reactCssThemr.themr)(_identifiers.LAYOUT, _theme2.default)(_Sidebar.Sidebar);
+
+exports.Layout = ThemedLayout;
+exports.Panel = ThemedPanel;
+exports.NavDrawer = ThemedNavDrawer;
+exports.Sidebar = ThemedSidebar;
\ No newline at end of file
diff --git a/lib/layout/theme.scss b/lib/layout/theme.scss
new file mode 100644
index 000000000..05092db62
--- /dev/null
+++ b/lib/layout/theme.scss
@@ -0,0 +1,309 @@
+@import "http://github.com/base";
+@import "http://github.com/config";
+@import "http://github.com/mixins";
+
+.layout {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: row;
+  align-items: stretch;
+  justify-content: space-between;
+  overflow-y: hidden;
+
+  .navDrawer {
+    width: 0;
+    min-width: 0;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    transition-timing-function: $animation-curve-default;
+    transition-duration: $animation-duration;
+    transition-property: width, min-width;
+
+    .scrim {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      z-index: $z-index-highest;
+      width: 0;
+      height: 100%;
+      background-color: rgba($drawer-overlay-color, 0);
+      transition: background-color $animation-duration $animation-curve-default, width 10ms linear $animation-duration;
+    }
+
+    .drawerContent {
+      @include shadow-2dp();
+      display: flex;
+      width: $navigation-drawer-mobile-width;
+      max-width: $navigation-drawer-max-mobile-width;
+      height: 100%;
+      flex-direction: column;
+      align-items: stretch;
+      justify-content: space-between;
+      overflow-x: hidden;
+      overflow-y: hidden;
+      color: $drawer-text-color;
+      pointer-events: none;
+      background-color: $drawer-background-color;
+      border-right: 1px solid $drawer-border-color;
+      transition: transform $animation-duration $animation-curve-default;
+      transform: translateX(-100%);
+
+      &.scrollY {
+        overflow-y: auto;
+      }
+    }
+
+    &.pinned {
+      @include open();
+      width: $navigation-drawer-mobile-width;
+      max-width: $navigation-drawer-max-mobile-width;
+    }
+
+    &.active {
+      &:not(.pinned) {
+        @include open();
+        .scrim {
+          width: 100%;
+          background-color: rgba($drawer-overlay-color, $drawer-overlay-opacity);
+          transition: background-color $animation-duration $animation-curve-default;
+        }
+      }
+    }
+
+    // Larger than mobile width drawer
+    @media screen and (min-width: $layout-breakpoint-xs) {
+      &.pinned {
+        width: $navigation-drawer-desktop-width;
+        max-width: $navigation-drawer-desktop-width;
+      }
+
+      .drawerContent {
+        width: $navigation-drawer-desktop-width;
+        max-width: $navigation-drawer-desktop-width;
+      }
+
+      &.wide {
+        &.pinned {
+          width: $navigation-drawer-max-desktop-width;
+          max-width: $navigation-drawer-max-desktop-width;
+        }
+
+        .drawerContent {
+          width: $navigation-drawer-max-desktop-width;
+          max-width: $navigation-drawer-max-desktop-width;
+        }
+      }
+    }
+
+    // Permanent screen, ignore .active and make part of layout
+    @media screen and (min-width: $layout-breakpoint-sm) {
+      &.smPermanent {
+        @include permanent();
+      }
+    }
+
+    @media screen and (min-width: $layout-breakpoint-md) {
+      &.mdPermanent {
+        @include permanent();
+      }
+    }
+
+    @media screen and (min-width: $layout-breakpoint-lg) {
+      &.lgPermanent {
+        @include permanent();
+      }
+    }
+
+    @media screen and (min-width: $layout-breakpoint-xl) {
+      &.xlPermanent {
+        @include permanent();
+      }
+    }
+
+    @media screen and (min-width: $layout-breakpoint-xxl) {
+      &.xxlPermanent {
+        @include permanent();
+      }
+    }
+
+    @media screen and (min-width: $layout-breakpoint-xxxl) {
+      &.xxxlPermanent {
+        @include permanent();
+      }
+    }
+  }
+
+  & .layout {
+    .scrim {
+      z-index: $z-index-highest - 1;
+    }
+    & .layout {
+      .scrim {
+        z-index: $z-index-highest - 2;
+      }
+    }
+  }
+
+  .panel {
+    position: relative;
+    display: flex;
+    height: 100%;
+    flex: 1;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: space-between;
+    overflow-y: hidden;
+
+    &.scrollY {
+      overflow-y: auto;
+    }
+  }
+
+  .sidebar {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: $z-index-highest - 1;
+    width: 0;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    color: $drawer-text-color;
+    background-color: $drawer-background-color;
+    transition-timing-function: $animation-curve-default;
+    transition-duration: $animation-duration;
+    transition-property: width;
+
+    .sidebarContent {
+      display: flex;
+      height: 100%;
+      flex-direction: column;
+      align-items: stretch;
+      justify-content: space-between;
+      overflow-y: hidden;
+
+      &.scrollY {
+        overflow-y: auto;
+      }
+    }
+
+    $increments: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12);
+
+    @each $increment in $increments {
+      &.width-#{$increment} {
+        $mobile: $standard-increment-mobile * $increment;
+        $desktop: $standard-increment-desktop * $increment;
+
+        .sidebarContent {
+          min-width: 100%;
+        }
+
+        &.pinned {
+          width: 100%;
+        }
+
+        @if $increment < 10 {
+          @media screen and (min-width: $layout-breakpoint-xs) and (orientation: landscape) {
+            position: relative;
+
+            .sidebarContent {
+              min-width: $mobile;
+            }
+
+            &.pinned {
+              width: $mobile;
+            }
+          }
+
+          @media screen and (min-width: $layout-breakpoint-xs) and (orientation: portrait) {
+            position: relative;
+
+            .sidebarContent {
+              min-width: $desktop;
+            }
+
+            &.pinned {
+              width: $desktop;
+            }
+          }
+        }
+
+        @if $increment < 11 {
+          @media screen and (min-width: $layout-breakpoint-sm-tablet) {
+            position: relative;
+
+            .sidebarContent {
+              min-width: $desktop;
+            }
+
+            &.pinned {
+              width: $desktop;
+            }
+          }
+        }
+
+        @media screen and (min-width: $layout-breakpoint-sm) {
+          position: relative;
+
+          .sidebarContent {
+            min-width: $desktop;
+          }
+
+          &.pinned {
+            width: $desktop;
+          }
+        }
+      }
+    }
+
+
+    $percentages: (25, 33, 50, 66, 75);
+
+    &.width-100 {
+      position: absolute;
+
+      .sidebarContent {
+        min-width: 100%;
+      }
+
+      &.pinned {
+        width: 100%;
+      }
+    }
+
+    @each $pct in $percentages {
+      &.width-#{$pct} {
+        position: absolute;
+
+        .sidebarContent {
+          min-width: 100%;
+        }
+
+        &.pinned {
+          width: 100%;
+        }
+      }
+    }
+
+    @media screen and (min-width: $layout-breakpoint-sm-tablet) {
+      @each $pct in $percentages {
+        &.width-#{$pct} {
+          position: relative;
+
+          .sidebarContent {
+            min-width: $pct * 1%;
+          }
+
+          &.pinned {
+            width: $pct * 1%;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/lib/link/Link.js b/lib/link/Link.js
new file mode 100644
index 000000000..c260f40cf
--- /dev/null
+++ b/lib/link/Link.js
@@ -0,0 +1,83 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Link = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _FontIcon = require('../font_icon/FontIcon.js');
+
+var _FontIcon2 = _interopRequireDefault(_FontIcon);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+var Link = function Link(_ref) {
+  var active = _ref.active;
+  var children = _ref.children;
+  var className = _ref.className;
+  var count = _ref.count;
+  var icon = _ref.icon;
+  var label = _ref.label;
+  var theme = _ref.theme;
+
+  var others = _objectWithoutProperties(_ref, ['active', 'children', 'className', 'count', 'icon', 'label', 'theme']);
+
+  var _className = (0, _classnames3.default)(theme.link, _defineProperty({}, theme.active, active), className);
+
+  return _react2.default.createElement(
+    'a',
+    _extends({ 'data-react-toolbox': 'link', className: _className }, others),
+    icon ? _react2.default.createElement(_FontIcon2.default, { className: theme.icon, value: icon }) : null,
+    label ? _react2.default.createElement(
+      'abbr',
+      null,
+      label
+    ) : null,
+    count && parseInt(count) !== 0 ? _react2.default.createElement(
+      'small',
+      null,
+      count
+    ) : null,
+    children
+  );
+};
+
+Link.propTypes = {
+  active: _react.PropTypes.bool,
+  children: _react.PropTypes.node,
+  className: _react.PropTypes.string,
+  count: _react.PropTypes.number,
+  icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+  label: _react.PropTypes.string,
+  theme: _react.PropTypes.shape({
+    active: _react.PropTypes.string.isRequired,
+    icon: _react.PropTypes.string.isRequired,
+    link: _react.PropTypes.string.isRequired
+  })
+};
+
+Link.defaultProps = {
+  active: false,
+  className: ''
+};
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.LINK)(Link);
+exports.Link = Link;
\ No newline at end of file
diff --git a/lib/link/index.js b/lib/link/index.js
new file mode 100644
index 000000000..a0e50a865
--- /dev/null
+++ b/lib/link/index.js
@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Link = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Link = require('./Link.js');
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ThemedLink = (0, _reactCssThemr.themr)(_identifiers.LINK, _theme2.default)(_Link.Link);
+
+exports.default = ThemedLink;
+exports.Link = ThemedLink;
\ No newline at end of file
diff --git a/lib/link/theme.scss b/lib/link/theme.scss
new file mode 100644
index 000000000..b973fb8ab
--- /dev/null
+++ b/lib/link/theme.scss
@@ -0,0 +1,35 @@
+@import "http://github.com/base";
+
+.icon {
+  margin-right: $unit;
+  font-size: 1.8 * $unit;
+}
+
+.link {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  line-height: 1.5;
+  cursor: pointer;
+  transition: opacity $animation-duration $animation-curve-default;
+  &:not(.active) {
+    opacity: .5;
+  }
+  &:hover, &:active {
+    opacity: 1;
+  }
+  > * {
+    vertical-align: middle;
+  }
+  > abbr {
+    text-transform: capitalize;
+  }
+  > small {
+    margin-left: .8 * $unit;
+    font-size: $font-size-tiny;
+    text-align: center;
+  }
+}
diff --git a/lib/list/List.js b/lib/list/List.js
new file mode 100644
index 000000000..d5a90d58d
--- /dev/null
+++ b/lib/list/List.js
@@ -0,0 +1,96 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.List = exports.listFactory = undefined;
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _ListItem = require('./ListItem.js');
+
+var _ListItem2 = _interopRequireDefault(_ListItem);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(ListItem) {
+  var List = function (_Component) {
+    _inherits(List, _Component);
+
+    function List() {
+      _classCallCheck(this, List);
+
+      return _possibleConstructorReturn(this, Object.getPrototypeOf(List).apply(this, arguments));
+    }
+
+    _createClass(List, [{
+      key: 'renderItems',
+      value: function renderItems() {
+        var _this2 = this;
+
+        return _react2.default.Children.map(this.props.children, function (item) {
+          if (item.type === ListItem) {
+            return _react2.default.cloneElement(item, {
+              ripple: _this2.props.ripple,
+              selectable: _this2.props.selectable
+            });
+          } else {
+            return _react2.default.cloneElement(item);
+          }
+        });
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        return _react2.default.createElement(
+          'ul',
+          { 'data-react-toolbox': 'list', className: (0, _classnames2.default)(this.props.theme.list, this.props.className) },
+          this.renderItems()
+        );
+      }
+    }]);
+
+    return List;
+  }(_react.Component);
+
+  List.propTypes = {
+    children: _react.PropTypes.node,
+    className: _react.PropTypes.string,
+    ripple: _react.PropTypes.bool,
+    selectable: _react.PropTypes.bool,
+    theme: _react.PropTypes.shape({
+      list: _react.PropTypes.string.isRequired
+    })
+  };
+  List.defaultProps = {
+    className: '',
+    ripple: false,
+    selectable: false
+  };
+
+
+  return List;
+};
+
+var List = factory(_ListItem2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(List);
+exports.listFactory = factory;
+exports.List = List;
\ No newline at end of file
diff --git a/lib/list/ListCheckbox.js b/lib/list/ListCheckbox.js
new file mode 100644
index 000000000..125ffac39
--- /dev/null
+++ b/lib/list/ListCheckbox.js
@@ -0,0 +1,93 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListCheckbox = exports.listCheckboxFactory = undefined;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Checkbox = require('../checkbox/Checkbox.js');
+
+var _Checkbox2 = _interopRequireDefault(_Checkbox);
+
+var _ListItemContent = require('./ListItemContent.js');
+
+var _ListItemContent2 = _interopRequireDefault(_ListItemContent);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var factory = function factory(Checkbox, ListItemContent) {
+  var ListCheckbox = function ListCheckbox(_ref) {
+    var caption = _ref.caption;
+    var checked = _ref.checked;
+    var className = _ref.className;
+    var disabled = _ref.disabled;
+    var legend = _ref.legend;
+    var name = _ref.name;
+    var onBlur = _ref.onBlur;
+    var onChange = _ref.onChange;
+    var onFocus = _ref.onFocus;
+    var theme = _ref.theme;
+
+    var _className = (0, _classnames3.default)(theme.item, theme.checkboxItem, _defineProperty({}, theme.disabled, disabled), className);
+
+    return _react2.default.createElement(
+      'li',
+      { className: _className },
+      _react2.default.createElement(Checkbox, {
+        checked: checked,
+        className: theme.checkbox,
+        disabled: disabled,
+        label: _react2.default.createElement(ListItemContent, { caption: caption, legend: legend }),
+        name: name,
+        onBlur: onBlur,
+        onChange: onChange,
+        onFocus: onFocus
+      })
+    );
+  };
+
+  ListCheckbox.propTypes = {
+    caption: _react.PropTypes.string.isRequired,
+    checked: _react.PropTypes.bool,
+    className: _react.PropTypes.string,
+    disabled: _react.PropTypes.bool,
+    legend: _react.PropTypes.string,
+    name: _react.PropTypes.string,
+    onBlur: _react.PropTypes.func,
+    onChange: _react.PropTypes.func,
+    onFocus: _react.PropTypes.func,
+    theme: _react.PropTypes.shape({
+      checkbox: _react.PropTypes.string.isRequired,
+      checkboxItem: _react.PropTypes.string.isRequired,
+      disabled: _react.PropTypes.string.isRequired,
+      item: _react.PropTypes.string.isRequired
+    })
+  };
+
+  ListCheckbox.defaultProps = {
+    checked: false,
+    disabled: false
+  };
+
+  return ListCheckbox;
+};
+
+var ListCheckbox = factory(_Checkbox2.default, _ListItemContent2.default);
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListCheckbox);
+exports.listCheckboxFactory = factory;
+exports.ListCheckbox = ListCheckbox;
\ No newline at end of file
diff --git a/lib/list/ListDivider.js b/lib/list/ListDivider.js
new file mode 100644
index 000000000..fc979c987
--- /dev/null
+++ b/lib/list/ListDivider.js
@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListDivider = undefined;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ListDivider = function ListDivider(_ref) {
+  var inset = _ref.inset;
+  var theme = _ref.theme;
+  return _react2.default.createElement('hr', { className: inset ? theme.divider + ' ' + theme.inset : theme.divider });
+};
+
+ListDivider.propTypes = {
+  inset: _react.PropTypes.bool,
+  theme: _react.PropTypes.shape({
+    divider: _react.PropTypes.string.isRequired,
+    inset: _react.PropTypes.string.isRequired
+  })
+};
+
+ListDivider.defaultProps = {
+  inset: false
+};
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListDivider);
+exports.ListDivider = ListDivider;
\ No newline at end of file
diff --git a/lib/list/ListItem.js b/lib/list/ListItem.js
new file mode 100644
index 000000000..e07eb8e80
--- /dev/null
+++ b/lib/list/ListItem.js
@@ -0,0 +1,149 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItem = exports.listItemFactory = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _ListItemContent = require('./ListItemContent.js');
+
+var _ListItemContent2 = _interopRequireDefault(_ListItemContent);
+
+var _ListItemLayout = require('./ListItemLayout.js');
+
+var _ListItemLayout2 = _interopRequireDefault(_ListItemLayout);
+
+var _Ripple = require('../ripple/Ripple.js');
+
+var _Ripple2 = _interopRequireDefault(_Ripple);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(ripple, ListItemLayout, ListItemContent) {
+  var ListItem = function (_Component) {
+    _inherits(ListItem, _Component);
+
+    function ListItem() {
+      var _Object$getPrototypeO;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, ListItem);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(ListItem)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function (event) {
+        if (_this.props.onClick && !_this.props.disabled) {
+          _this.props.onClick(event);
+        }
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(ListItem, [{
+      key: 'groupChildren',
+      value: function groupChildren() {
+        var children = {
+          leftActions: [],
+          rightActions: [],
+          ignored: []
+        };
+
+        _react2.default.Children.forEach(this.props.children, function (child, i) {
+          if (!_react2.default.isValidElement(child)) {
+            return;
+          }
+          if (child.props.listItemIgnore) {
+            children.ignored.push(child);
+            return;
+          }
+          if (child.type === ListItemContent) {
+            children.itemContent = child;
+            return;
+          }
+          var bucket = children.itemContent ? 'rightActions' : 'leftActions';
+          children[bucket].push(_extends({}, child, { key: i }));
+        });
+
+        return children;
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _props = this.props;
+        var className = _props.className;
+        var onMouseDown = _props.onMouseDown;
+        var to = _props.to;
+        var onClick = _props.onClick;
+        var hasRipple = _props.ripple;
+        var theme = _props.theme;
+
+        var other = _objectWithoutProperties(_props, ['className', 'onMouseDown', 'to', 'onClick', 'ripple', 'theme']); //eslint-disable-line no-unused-vars
+
+
+        var children = this.groupChildren();
+        var content = _react2.default.createElement(ListItemLayout, _extends({}, children, other));
+        return _react2.default.createElement(
+          'li',
+          { className: theme.listItem + ' ' + className, onClick: this.handleClick, onMouseDown: onMouseDown },
+          to ? _react2.default.createElement(
+            'a',
+            { href: this.props.to },
+            content
+          ) : content,
+          children.ignored
+        );
+      }
+    }]);
+
+    return ListItem;
+  }(_react.Component);
+
+  ListItem.propTypes = {
+    children: _react.PropTypes.any,
+    className: _react.PropTypes.string,
+    disabled: _react.PropTypes.bool,
+    onClick: _react.PropTypes.func,
+    ripple: _react.PropTypes.bool,
+    theme: _react.PropTypes.shape({
+      listItem: _react.PropTypes.string.isRequired
+    }),
+    to: _react.PropTypes.string
+  };
+  ListItem.defaultProps = {
+    className: '',
+    disabled: false,
+    ripple: false
+  };
+
+
+  return ripple(ListItem);
+};
+
+var ripple = (0, _Ripple2.default)({ centered: false, listItemIgnore: true });
+var ListItem = factory(ripple, _ListItemLayout2.default, _ListItemContent2.default);
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListItem);
+exports.listItemFactory = factory;
+exports.ListItem = ListItem;
\ No newline at end of file
diff --git a/lib/list/ListItemAction.js b/lib/list/ListItemAction.js
new file mode 100644
index 000000000..b91440ff1
--- /dev/null
+++ b/lib/list/ListItemAction.js
@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItemAction = undefined;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ListItemAction = function ListItemAction(_ref) {
+  var action = _ref.action;
+  var theme = _ref.theme;
+  var _action$props = action.props;
+  var onClick = _action$props.onClick;
+  var onMouseDown = _action$props.onMouseDown;
+
+  var stopRipple = onClick && !onMouseDown;
+  var stop = function stop(e) {
+    return e.stopPropagation();
+  };
+  return _react2.default.createElement(
+    'span',
+    { className: theme.itemAction, onMouseDown: stopRipple && stop, onClick: onClick && stop },
+    action
+  );
+};
+
+ListItemAction.propTypes = {
+  action: _react.PropTypes.object,
+  theme: _react.PropTypes.shape({
+    itemAction: _react2.default.PropTypes.string.isRequired
+  })
+};
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListItemAction);
+exports.ListItemAction = ListItemAction;
\ No newline at end of file
diff --git a/lib/list/ListItemActions.js b/lib/list/ListItemActions.js
new file mode 100644
index 000000000..2ce112fdc
--- /dev/null
+++ b/lib/list/ListItemActions.js
@@ -0,0 +1,56 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItemActions = exports.listItemActionsFactory = undefined;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _ListItemAction = require('./ListItemAction.js');
+
+var _ListItemAction2 = _interopRequireDefault(_ListItemAction);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var factory = function factory(ListItemAction) {
+  var ListItemActions = function ListItemActions(_ref) {
+    var type = _ref.type;
+    var children = _ref.children;
+    var theme = _ref.theme;
+
+    var validChildren = _react2.default.Children.toArray(children).filter(function (c) {
+      return _react2.default.isValidElement(c);
+    });
+
+    return _react2.default.createElement(
+      'span',
+      { className: theme[type] },
+      validChildren.map(function (action, i) {
+        return _react2.default.createElement(ListItemAction, { key: i, action: action });
+      })
+    );
+  };
+
+  ListItemActions.propTypes = {
+    children: _react.PropTypes.any,
+    theme: _react.PropTypes.shape({
+      left: _react.PropTypes.string.isRequired,
+      right: _react.PropTypes.string.isRequired
+    }),
+    type: _react.PropTypes.oneOf(['left', 'right'])
+  };
+
+  return ListItemActions;
+};
+
+var ListItemActions = factory(_ListItemAction2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListItemActions);
+exports.listItemActionsFactory = factory;
+exports.ListItemActions = ListItemActions;
\ No newline at end of file
diff --git a/lib/list/ListItemContent.js b/lib/list/ListItemContent.js
new file mode 100644
index 000000000..2e7b716f2
--- /dev/null
+++ b/lib/list/ListItemContent.js
@@ -0,0 +1,116 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItemContent = exports.listItemContentFactory = undefined;
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _ListItemText = require('./ListItemText.js');
+
+var _ListItemText2 = _interopRequireDefault(_ListItemText);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var types = ['auto', 'normal', 'large'];
+
+var factory = function factory(ListItemText) {
+  var ListItemContent = function (_Component) {
+    _inherits(ListItemContent, _Component);
+
+    function ListItemContent() {
+      _classCallCheck(this, ListItemContent);
+
+      return _possibleConstructorReturn(this, Object.getPrototypeOf(ListItemContent).apply(this, arguments));
+    }
+
+    _createClass(ListItemContent, [{
+      key: 'getType',
+      value: function getType() {
+        var _props = this.props;
+        var type = _props.type;
+        var children = _props.children;
+        var caption = _props.caption;
+        var legend = _props.legend;
+
+
+        var count = _react2.default.Children.count(children);
+        [caption, legend].forEach(function (s) {
+          count += s ? 1 : 0;
+        });
+        var typeIndex = Math.min(count, types.length);
+
+        return type || types[typeIndex];
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _props2 = this.props;
+        var children = _props2.children;
+        var caption = _props2.caption;
+        var legend = _props2.legend;
+        var theme = _props2.theme;
+
+        var className = (0, _classnames3.default)(theme.itemContentRoot, _defineProperty({}, theme[this.getType()], theme[this.getType()]));
+
+        return _react2.default.createElement(
+          'span',
+          { className: className },
+          caption && _react2.default.createElement(
+            ListItemText,
+            { primary: true },
+            caption
+          ),
+          legend && _react2.default.createElement(
+            ListItemText,
+            null,
+            legend
+          ),
+          children
+        );
+      }
+    }]);
+
+    return ListItemContent;
+  }(_react.Component);
+
+  ListItemContent.propTypes = {
+    caption: _react.PropTypes.string,
+    children: _react.PropTypes.any,
+    legend: _react.PropTypes.string,
+    theme: _react.PropTypes.shape({
+      itemContentRoot: _react.PropTypes.string.isRequired,
+      large: _react.PropTypes.string.isRequired
+    }),
+    type: _react.PropTypes.oneOf(types)
+  };
+
+
+  return ListItemContent;
+};
+
+var ListItemContent = (0, _reactCssThemr.themr)(_identifiers.LIST)(_ListItemText2.default);
+exports.default = ListItemContent;
+exports.listItemContentFactory = factory;
+exports.ListItemContent = ListItemContent;
\ No newline at end of file
diff --git a/lib/list/ListItemLayout.js b/lib/list/ListItemLayout.js
new file mode 100644
index 000000000..2ea4b4a88
--- /dev/null
+++ b/lib/list/ListItemLayout.js
@@ -0,0 +1,104 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItemLayout = exports.listItemLayoutFactory = undefined;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _FontIcon = require('../font_icon/FontIcon.js');
+
+var _FontIcon2 = _interopRequireDefault(_FontIcon);
+
+var _Avatar = require('../avatar/Avatar.js');
+
+var _Avatar2 = _interopRequireDefault(_Avatar);
+
+var _ListItemContent = require('./ListItemContent.js');
+
+var _ListItemContent2 = _interopRequireDefault(_ListItemContent);
+
+var _ListItemActions = require('./ListItemActions.js');
+
+var _ListItemActions2 = _interopRequireDefault(_ListItemActions);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var factory = function factory(Avatar, ListItemContent, ListItemActions) {
+  var ListItemLayout = function ListItemLayout(props) {
+    var _classnames;
+
+    var className = (0, _classnames3.default)(props.theme.item, (_classnames = {}, _defineProperty(_classnames, props.theme.disabled, props.disabled), _defineProperty(_classnames, props.theme.selectable, props.selectable), _classnames), props.className);
+
+    var leftActions = [props.leftIcon && _react2.default.createElement(_FontIcon2.default, { value: props.leftIcon, key: 'leftIcon' }), props.avatar && _react2.default.createElement(Avatar, { image: props.avatar, key: 'avatar' })].concat(_toConsumableArray(props.leftActions));
+    var rightActions = [props.rightIcon && _react2.default.createElement(_FontIcon2.default, { value: props.rightIcon, key: 'rightIcon' })].concat(_toConsumableArray(props.rightActions));
+    var content = props.itemContent || _react2.default.createElement(ListItemContent, { caption: props.caption, legend: props.legend });
+    var emptyActions = function emptyActions(item) {
+      return !item[0] && !item[1] && !item[2];
+    };
+
+    return _react2.default.createElement(
+      'span',
+      { className: className },
+      !emptyActions(leftActions) > 0 && _react2.default.createElement(
+        ListItemActions,
+        { type: 'left' },
+        leftActions
+      ),
+      content,
+      !emptyActions(rightActions) > 0 && _react2.default.createElement(
+        ListItemActions,
+        { type: 'right' },
+        rightActions
+      )
+    );
+  };
+
+  ListItemLayout.propTypes = {
+    avatar: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    caption: _react.PropTypes.string,
+    children: _react.PropTypes.any,
+    className: _react.PropTypes.string,
+    disabled: _react.PropTypes.bool,
+    itemContent: _react.PropTypes.element,
+    leftActions: _react.PropTypes.array,
+    leftIcon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    legend: _react.PropTypes.string,
+    rightActions: _react.PropTypes.array,
+    rightIcon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    selectable: _react.PropTypes.bool,
+    theme: _react.PropTypes.shape({
+      disabled: _react.PropTypes.string.isRequired,
+      item: _react.PropTypes.string.isRequired,
+      selectable: _react.PropTypes.string.isRequired
+    }),
+    to: _react.PropTypes.string
+  };
+
+  ListItemLayout.defaultProps = {
+    disabled: false,
+    selectable: false
+  };
+
+  return ListItemLayout;
+};
+
+var ListItemLayout = factory(_Avatar2.default, _ListItemContent2.default, _ListItemActions2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListItemLayout);
+exports.listItemLayoutFactory = factory;
+exports.ListItemLayout = ListItemLayout;
\ No newline at end of file
diff --git a/lib/list/ListItemText.js b/lib/list/ListItemText.js
new file mode 100644
index 000000000..7382e8776
--- /dev/null
+++ b/lib/list/ListItemText.js
@@ -0,0 +1,59 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItemText = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+var ListItemText = function ListItemText(_ref) {
+  var className = _ref.className;
+  var primary = _ref.primary;
+  var children = _ref.children;
+  var theme = _ref.theme;
+
+  var other = _objectWithoutProperties(_ref, ['className', 'primary', 'children', 'theme']);
+
+  var _className = (0, _classnames3.default)(theme.itemText, _defineProperty({}, theme.primary, primary), className);
+  return _react2.default.createElement(
+    'span',
+    _extends({ 'data-react-toolbox': 'list-item-text', className: _className }, other),
+    children
+  );
+};
+
+ListItemText.propTypes = {
+  children: _react.PropTypes.any,
+  className: _react.PropTypes.string,
+  primary: _react.PropTypes.bool,
+  theme: _react.PropTypes.shape({
+    itemText: _react.PropTypes.string.isRequired,
+    primary: _react.PropTypes.string.isRequired
+  })
+};
+
+ListItemText.defaultProps = {
+  primary: false
+};
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListItemText);
+exports.ListItemText = ListItemText;
\ No newline at end of file
diff --git a/lib/list/ListSubHeader.js b/lib/list/ListSubHeader.js
new file mode 100644
index 000000000..a0a96355b
--- /dev/null
+++ b/lib/list/ListSubHeader.js
@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListSubHeader = undefined;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ListSubHeader = function ListSubHeader(_ref) {
+  var caption = _ref.caption;
+  var className = _ref.className;
+  var theme = _ref.theme;
+  return _react2.default.createElement(
+    'h5',
+    { className: (0, _classnames2.default)(theme.subheader, className) },
+    caption
+  );
+};
+
+ListSubHeader.propTypes = {
+  caption: _react.PropTypes.string,
+  className: _react.PropTypes.string,
+  theme: _react.PropTypes.object
+};
+
+ListSubHeader.defaultProps = {
+  className: ''
+};
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListSubHeader);
+exports.ListSubHeader = ListSubHeader;
\ No newline at end of file
diff --git a/lib/list/_config.scss b/lib/list/_config.scss
new file mode 100644
index 000000000..a8814551f
--- /dev/null
+++ b/lib/list/_config.scss
@@ -0,0 +1,18 @@
+$list-vertical-padding: .8 * $unit !default;
+$list-horizontal-padding: 1.6 * $unit !default;
+$list-content-left-spacing: 7.2 * $unit !default;
+$list-subheader-height: 4.8 * $unit !default;
+$list-subheader-font-size: 1.4 * $unit !default;
+$list-subheader-font-weight: 500 !default;
+$list-divider-height: .1 * $unit !default;
+$list-item-min-height: 4.8 * $unit !default;
+$list-item-min-height-legend: 7.2 * $unit !default;
+$list-item-hover-color: $palette-grey-200 !default;
+$list-item-legend-margin-top: .3 * $unit !default;
+$list-item-icon-font-size: 2.4 * $unit !default;
+$list-item-icon-size: 1.8 * $unit !default;
+$list-item-right-icon-margin: $list-content-left-spacing - 2 * $list-horizontal-padding - $list-item-icon-size !default;
+$list-item-right-checkbox-margin: $list-item-right-icon-margin + $list-horizontal-padding !default;
+$list-item-avatar-height: 4 * $unit !default;
+$list-item-avatar-margin: .8 * $unit !default;
+$list-item-child-margin: .8 * $unit !default;
diff --git a/lib/list/index.js b/lib/list/index.js
new file mode 100644
index 000000000..a7445462f
--- /dev/null
+++ b/lib/list/index.js
@@ -0,0 +1,69 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.List = exports.ListItem = exports.ListDivider = exports.ListCheckbox = exports.ListItemText = exports.ListSubHeader = exports.ListItemLayout = exports.ListItemContent = exports.ListItemActions = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _avatar = require('../avatar');
+
+var _checkbox = require('../checkbox');
+
+var _ListItemText = require('./ListItemText.js');
+
+var _ListItemAction = require('./ListItemAction.js');
+
+var _ListSubHeader = require('./ListSubHeader.js');
+
+var _ListDivider = require('./ListDivider.js');
+
+var _List = require('./List.js');
+
+var _ListItem = require('./ListItem.js');
+
+var _ListCheckbox = require('./ListCheckbox.js');
+
+var _ListItemActions = require('./ListItemActions.js');
+
+var _ListItemContent = require('./ListItemContent.js');
+
+var _ListItemLayout = require('./ListItemLayout.js');
+
+var _ripple = require('../ripple');
+
+var _ripple2 = _interopRequireDefault(_ripple);
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var applyTheme = function applyTheme(Component) {
+  return (0, _reactCssThemr.themr)(_identifiers.LIST, _theme2.default)(Component);
+};
+var ripple = (0, _ripple2.default)({ centered: false, listItemIgnore: true });
+var ThemedListItemAction = applyTheme(_ListItemAction.ListItemAction);
+var ThemedListSubHeader = applyTheme(_ListSubHeader.ListSubHeader);
+var ThemedListItemText = applyTheme(_ListItemText.ListItemText);
+var ThemedListDivider = applyTheme(_ListDivider.ListDivider);
+var ThemedListItemContent = applyTheme((0, _ListItemContent.listItemContentFactory)(ThemedListItemText));
+var ThemedListItemActions = applyTheme((0, _ListItemActions.listItemActionsFactory)(ThemedListItemAction));
+var ThemedListItemLayout = applyTheme((0, _ListItemLayout.listItemLayoutFactory)(_avatar.Avatar, ThemedListItemContent, ThemedListItemActions));
+var ThemedListCheckbox = applyTheme((0, _ListCheckbox.listCheckboxFactory)(_checkbox.Checkbox, ThemedListItemContent));
+var ThemedListItem = applyTheme((0, _ListItem.listItemFactory)(ripple, ThemedListItemLayout, ThemedListItemContent));
+var ThemedList = applyTheme((0, _List.listFactory)(ThemedListItem));
+
+exports.ListItemActions = ThemedListItemActions;
+exports.ListItemContent = ThemedListItemContent;
+exports.ListItemLayout = ThemedListItemLayout;
+exports.ListSubHeader = ThemedListSubHeader;
+exports.ListItemText = ThemedListItemText;
+exports.ListCheckbox = ThemedListCheckbox;
+exports.ListDivider = ThemedListDivider;
+exports.ListItem = ThemedListItem;
+exports.List = ThemedList;
\ No newline at end of file
diff --git a/lib/list/theme.scss b/lib/list/theme.scss
new file mode 100644
index 000000000..10a264e69
--- /dev/null
+++ b/lib/list/theme.scss
@@ -0,0 +1,157 @@
+@import "http://github.com/base";
+@import "http://github.com/config";
+
+.list {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  padding: $list-vertical-padding 0;
+  text-align: left;
+  white-space: nowrap;
+  list-style: none;
+}
+
+.subheader {
+  padding-left: $list-horizontal-padding;
+  margin: - $list-vertical-padding 0 0;
+  font-size: $list-subheader-font-size;
+  font-weight: $list-subheader-font-weight;
+  line-height: $list-subheader-height;
+  color: $color-text-secondary;
+}
+
+.divider {
+  height: $list-divider-height;
+  margin: - $list-divider-height 0 0;
+  background-color: $color-divider;
+  border: 0;
+  &.inset {
+    margin-right: $list-horizontal-padding;
+    margin-left: $list-content-left-spacing;
+  }
+  .list + & {
+    margin-top: - $list-vertical-padding;
+  }
+  .listItem ~ & {
+    margin-top: $list-vertical-padding;
+    margin-bottom: $list-vertical-padding;
+  }
+}
+
+.listItem {
+  position: relative;
+  > [data-react-toolbox="ripple"] {
+    overflow: hidden;
+  }
+
+  .ripple {
+    color: $color-text-secondary;
+  }
+}
+
+.item {
+  position: relative;
+  display: flex;
+  min-height: $list-item-min-height;
+  align-items: center;
+  padding: 0 $list-horizontal-padding;
+  color: $color-text;
+  &.selectable:not(.disabled):hover {
+    cursor: pointer;
+    background-color: $list-item-hover-color;
+  }
+  &.disabled {
+    pointer-events: none;
+    &:not(.checkboxItem) {
+      opacity: .5;
+    }
+    > .checkbox > [data-react-toolbox="label"] {
+      opacity: .5;
+    }
+  }
+}
+
+.left {
+  [data-react-toolbox="font-icon"] {
+    width: $list-item-icon-size;
+  }
+  & :last-child {
+    > [data-react-toolbox="font-icon"] {
+      margin-right: $list-item-right-icon-margin;
+    }
+  }
+}
+
+.right {
+  > :last-child  {
+    margin-right: 0;
+  }
+
+  > :first-child {
+    margin-left: $list-horizontal-padding;
+  }
+}
+
+.left, .right {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  vertical-align: middle;
+}
+
+.itemAction {
+  display: flex;
+  margin: $list-item-child-margin $list-horizontal-padding $list-item-child-margin 0;
+
+  > * {
+    padding: 0;
+  }
+
+  > [data-react-toolbox="font-icon"] {
+    font-size: $list-item-icon-font-size;
+    color: $color-text-secondary;
+  }
+}
+
+.itemContentRoot {
+  display: block;
+  flex-grow: 1;
+  &.large {
+    display: flex;
+    height: $list-item-min-height-legend;
+    flex-direction: column;
+    justify-content: center;
+  }
+}
+
+.checkbox {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-height: $list-item-min-height;
+  align-items: center;
+  margin: 0;
+  cursor: pointer;
+  > [data-react-toolbox="check"] {
+    margin-right: $list-item-right-checkbox-margin;
+  }
+  > [data-react-toolbox="label"] {
+    padding-left: 0;
+  }
+}
+
+.itemText {
+  display: block;
+
+  &:not(.primary) {
+    padding-top: $list-item-legend-margin-top;
+    font-size: $font-size-small;
+    color: $color-text-secondary;
+    white-space: normal;
+  }
+
+  &.primary {
+    font-size: $font-size-normal;
+    color: $color-text;
+  }
+}
diff --git a/lib/menu/IconMenu.js b/lib/menu/IconMenu.js
new file mode 100644
index 000000000..ca5c4c50e
--- /dev/null
+++ b/lib/menu/IconMenu.js
@@ -0,0 +1,132 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconMenu = exports.iconMenuFactory = undefined;
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _IconButton = require('../button/IconButton.js');
+
+var _IconButton2 = _interopRequireDefault(_IconButton);
+
+var _Menu = require('./Menu.js');
+
+var _Menu2 = _interopRequireDefault(_Menu);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(IconButton, Menu) {
+  var IconMenu = function (_React$Component) {
+    _inherits(IconMenu, _React$Component);
+
+    function IconMenu() {
+      var _Object$getPrototypeO;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, IconMenu);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(IconMenu)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+        active: false
+      }, _this.handleButtonClick = function (event) {
+        _this.setState({ active: !_this.state.active });
+        if (_this.props.onClick) _this.props.onClick(event);
+      }, _this.handleMenuHide = function () {
+        _this.setState({ active: false });
+        if (_this.props.onHide) _this.props.onHide();
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(IconMenu, [{
+      key: 'render',
+      value: function render() {
+        return _react2.default.createElement(
+          'div',
+          { className: (0, _classnames2.default)(this.props.theme.iconMenu, this.props.className) },
+          _react2.default.createElement(IconButton, {
+            className: this.props.theme.icon,
+            icon: this.props.icon,
+            onClick: this.handleButtonClick,
+            ripple: this.props.iconRipple
+          }),
+          _react2.default.createElement(
+            Menu,
+            {
+              ref: 'menu',
+              active: this.state.active,
+              onHide: this.handleMenuHide,
+              onSelect: this.props.onSelect,
+              onShow: this.props.onShow,
+              position: this.props.position,
+              ripple: this.props.menuRipple,
+              selectable: this.props.selectable,
+              selected: this.props.selected
+            },
+            this.props.children
+          )
+        );
+      }
+    }]);
+
+    return IconMenu;
+  }(_react2.default.Component);
+
+  IconMenu.propTypes = {
+    children: _react2.default.PropTypes.node,
+    className: _react2.default.PropTypes.string,
+    icon: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.element]),
+    iconRipple: _react2.default.PropTypes.bool,
+    menuRipple: _react2.default.PropTypes.bool,
+    onClick: _react2.default.PropTypes.func,
+    onHide: _react2.default.PropTypes.func,
+    onSelect: _react2.default.PropTypes.func,
+    onShow: _react2.default.PropTypes.func,
+    position: _react2.default.PropTypes.string,
+    selectable: _react2.default.PropTypes.bool,
+    selected: _react2.default.PropTypes.any,
+    theme: _react2.default.PropTypes.shape({
+      icon: _react2.default.PropTypes.string.isRequired,
+      iconMenu: _react2.default.PropTypes.string.isRequired
+    })
+  };
+  IconMenu.defaultProps = {
+    className: '',
+    icon: 'more_vert',
+    iconRipple: true,
+    menuRipple: true,
+    position: 'auto',
+    selectable: false
+  };
+
+
+  return IconMenu;
+};
+
+var IconMenu = factory(_IconButton2.default, _Menu2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.MENU)(IconMenu);
+exports.iconMenuFactory = factory;
+exports.IconMenu = IconMenu;
\ No newline at end of file
diff --git a/lib/menu/Menu.js b/lib/menu/Menu.js
new file mode 100644
index 000000000..2aacee2b6
--- /dev/null
+++ b/lib/menu/Menu.js
@@ -0,0 +1,310 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Menu = exports.menuFactory = undefined;
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactDom = require('react-dom');
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _utils = require('../utils');
+
+var _MenuItem = require('./MenuItem.js');
+
+var _MenuItem2 = _interopRequireDefault(_MenuItem);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var POSITION = {
+  AUTO: 'auto',
+  STATIC: 'static',
+  TOP_LEFT: 'topLeft',
+  TOP_RIGHT: 'topRight',
+  BOTTOM_LEFT: 'bottomLeft',
+  BOTTOM_RIGHT: 'bottomRight'
+};
+
+var factory = function factory(MenuItem) {
+  var Menu = function (_React$Component) {
+    _inherits(Menu, _React$Component);
+
+    function Menu() {
+      var _Object$getPrototypeO;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, Menu);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Menu)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+        active: _this.props.active,
+        rippled: false
+      }, _this.handleDocumentClick = function (event) {
+        if (_this.state.active && !_utils.events.targetIsDescendant(event, _reactDom2.default.findDOMNode(_this))) {
+          _this.setState({ active: false, rippled: false });
+        }
+      }, _this.handleSelect = function (item) {
+        var _item$props = item.props;
+        var value = _item$props.value;
+        var onClick = _item$props.onClick;
+
+        _this.setState({ active: false, rippled: _this.props.ripple }, function () {
+          if (onClick) onClick();
+          if (_this.props.onSelect) _this.props.onSelect(value);
+        });
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(Menu, [{
+      key: 'componentDidMount',
+      value: function componentDidMount() {
+        var _this2 = this;
+
+        this.positionTimeoutHandle = setTimeout(function () {
+          var _refs$menu$getBoundin = _this2.refs.menu.getBoundingClientRect();
+
+          var width = _refs$menu$getBoundin.width;
+          var height = _refs$menu$getBoundin.height;
+
+          var position = _this2.props.position === POSITION.AUTO ? _this2.calculatePosition() : _this2.props.position;
+          _this2.setState({ position: position, width: width, height: height });
+        });
+      }
+    }, {
+      key: 'componentWillReceiveProps',
+      value: function componentWillReceiveProps(nextProps) {
+        if (this.props.position !== nextProps.position) {
+          var position = nextProps.position === POSITION.AUTO ? this.calculatePosition() : nextProps.position;
+          this.setState({ position: position });
+        }
+
+        if (!this.props.active && nextProps.active && !this.state.active) {
+          this.show();
+        }
+
+        if (this.props.active && !nextProps.active && this.state.active) {
+          this.hide();
+        }
+      }
+    }, {
+      key: 'shouldComponentUpdate',
+      value: function shouldComponentUpdate(nextProps, nextState) {
+        var _this3 = this;
+
+        if (!this.state.active && nextState.active && this.props.position === POSITION.AUTO) {
+          var position = this.calculatePosition();
+          if (this.state.position !== position) {
+            this.setState({ position: position, active: false }, function () {
+              _this3.activateTimeoutHandle = setTimeout(function () {
+                _this3.setState({ active: true });
+              }, 20);
+            });
+            return false;
+          }
+        }
+        return true;
+      }
+    }, {
+      key: 'componentWillUpdate',
+      value: function componentWillUpdate(nextProps, nextState) {
+        if (!this.state.active && nextState.active) {
+          _utils.events.addEventsToDocument({ click: this.handleDocumentClick });
+        }
+      }
+    }, {
+      key: 'componentDidUpdate',
+      value: function componentDidUpdate(prevProps, prevState) {
+        if (prevState.active && !this.state.active) {
+          if (this.props.onHide) this.props.onHide();
+          _utils.events.removeEventsFromDocument({ click: this.handleDocumentClick });
+        } else if (!prevState.active && this.state.active && this.props.onShow) {
+          this.props.onShow();
+        }
+      }
+    }, {
+      key: 'componentWillUnmount',
+      value: function componentWillUnmount() {
+        if (this.state.active) {
+          _utils.events.removeEventsFromDocument({ click: this.handleDocumentClick });
+        }
+        clearTimeout(this.positionTimeoutHandle);
+        clearTimeout(this.activateTimeoutHandle);
+      }
+    }, {
+      key: 'calculatePosition',
+      value: function calculatePosition() {
+        var parentNode = _reactDom2.default.findDOMNode(this).parentNode;
+        if (!parentNode) return;
+
+        var _parentNode$getBoundi = parentNode.getBoundingClientRect();
+
+        var top = _parentNode$getBoundi.top;
+        var left = _parentNode$getBoundi.left;
+        var height = _parentNode$getBoundi.height;
+        var width = _parentNode$getBoundi.width;
+
+        var _utils$getViewport = _utils.utils.getViewport();
+
+        var wh = _utils$getViewport.height;
+        var ww = _utils$getViewport.width;
+
+        var toTop = top < wh / 2 - height / 2;
+        var toLeft = left < ww / 2 - width / 2;
+        return '' + (toTop ? 'top' : 'bottom') + (toLeft ? 'Left' : 'Right');
+      }
+    }, {
+      key: 'getMenuStyle',
+      value: function getMenuStyle() {
+        var _state = this.state;
+        var width = _state.width;
+        var height = _state.height;
+        var position = _state.position;
+
+        if (position !== POSITION.STATIC) {
+          if (this.state.active) {
+            return { clip: 'rect(0 ' + width + 'px ' + height + 'px 0)' };
+          } else if (position === POSITION.TOP_RIGHT) {
+            return { clip: 'rect(0 ' + width + 'px 0 ' + width + 'px)' };
+          } else if (position === POSITION.BOTTOM_RIGHT) {
+            return { clip: 'rect(' + height + 'px ' + width + 'px ' + height + 'px ' + width + 'px)' };
+          } else if (position === POSITION.BOTTOM_LEFT) {
+            return { clip: 'rect(' + height + 'px 0 ' + height + 'px 0)' };
+          } else if (position === POSITION.TOP_LEFT) {
+            return { clip: 'rect(0 0 0 0)' };
+          }
+        }
+      }
+    }, {
+      key: 'getRootStyle',
+      value: function getRootStyle() {
+        if (this.state.position !== POSITION.STATIC) {
+          return { width: this.state.width, height: this.state.height };
+        }
+      }
+    }, {
+      key: 'renderItems',
+      value: function renderItems() {
+        var _this4 = this;
+
+        return _react2.default.Children.map(this.props.children, function (item) {
+          if (!item) return item;
+          if (item.type === MenuItem) {
+            return _react2.default.cloneElement(item, {
+              ripple: item.props.ripple || _this4.props.ripple,
+              selected: typeof item.props.value !== 'undefined' && _this4.props.selectable && item.props.value === _this4.props.selected,
+              onClick: _this4.handleSelect.bind(_this4, item)
+            });
+          } else {
+            return _react2.default.cloneElement(item);
+          }
+        });
+      }
+    }, {
+      key: 'show',
+      value: function show() {
+        var _refs$menu$getBoundin2 = this.refs.menu.getBoundingClientRect();
+
+        var width = _refs$menu$getBoundin2.width;
+        var height = _refs$menu$getBoundin2.height;
+
+        this.setState({ active: true, width: width, height: height });
+      }
+    }, {
+      key: 'hide',
+      value: function hide() {
+        this.setState({ active: false });
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _classnames;
+
+        var theme = this.props.theme;
+
+        var outlineStyle = { width: this.state.width, height: this.state.height };
+        var className = (0, _classnames3.default)([theme.menu, theme[this.state.position]], (_classnames = {}, _defineProperty(_classnames, theme.active, this.state.active), _defineProperty(_classnames, theme.rippled, this.state.rippled), _classnames), this.props.className);
+
+        return _react2.default.createElement(
+          'div',
+          { 'data-react-toolbox': 'menu', className: className, style: this.getRootStyle() },
+          this.props.outline ? _react2.default.createElement('div', { className: theme.outline, style: outlineStyle }) : null,
+          _react2.default.createElement(
+            'ul',
+            { ref: 'menu', className: theme.menuInner, style: this.getMenuStyle() },
+            this.renderItems()
+          )
+        );
+      }
+    }]);
+
+    return Menu;
+  }(_react2.default.Component);
+
+  Menu.propTypes = {
+    active: _react2.default.PropTypes.bool,
+    children: _react2.default.PropTypes.node,
+    className: _react2.default.PropTypes.string,
+    onHide: _react2.default.PropTypes.func,
+    onSelect: _react2.default.PropTypes.func,
+    onShow: _react2.default.PropTypes.func,
+    outline: _react2.default.PropTypes.bool,
+    position: _react2.default.PropTypes.string,
+    ripple: _react2.default.PropTypes.bool,
+    selectable: _react2.default.PropTypes.bool,
+    selected: _react2.default.PropTypes.any,
+    theme: _react2.default.PropTypes.shape({
+      active: _react2.default.PropTypes.string.isRequired,
+      bottomLeft: _react2.default.PropTypes.string.isRequired,
+      bottomRight: _react2.default.PropTypes.string.isRequired,
+      menu: _react2.default.PropTypes.string.isRequired,
+      menuInner: _react2.default.PropTypes.string.isRequired,
+      outline: _react2.default.PropTypes.string.isRequired,
+      rippled: _react2.default.PropTypes.string.isRequired,
+      static: _react2.default.PropTypes.string.isRequired,
+      topLeft: _react2.default.PropTypes.string.isRequired,
+      topRight: _react2.default.PropTypes.string.isRequired
+    })
+  };
+  Menu.defaultProps = {
+    active: false,
+    outline: true,
+    position: POSITION.STATIC,
+    ripple: true,
+    selectable: true
+  };
+
+
+  return Menu;
+};
+
+var Menu = factory(_MenuItem2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.MENU)(Menu);
+exports.menuFactory = factory;
+exports.Menu = Menu;
\ No newline at end of file
diff --git a/lib/menu/MenuDivider.js b/lib/menu/MenuDivider.js
new file mode 100644
index 000000000..f2884fd55
--- /dev/null
+++ b/lib/menu/MenuDivider.js
@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuDivider = undefined;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var MenuDivider = function MenuDivider(_ref) {
+  var theme = _ref.theme;
+  return _react2.default.createElement('hr', { 'data-react-toolbox': 'menu-divider', className: theme.menuDivider });
+};
+
+MenuDivider.propTypes = {
+  theme: _react.PropTypes.shape({
+    menuDivider: _react.PropTypes.string.isRequired
+  })
+};
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.MENU)(MenuDivider);
+exports.MenuDivider = MenuDivider;
\ No newline at end of file
diff --git a/lib/menu/MenuItem.js b/lib/menu/MenuItem.js
new file mode 100644
index 000000000..69aaa8512
--- /dev/null
+++ b/lib/menu/MenuItem.js
@@ -0,0 +1,137 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuItem = exports.menuItemFactory = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _FontIcon = require('../font_icon/FontIcon.js');
+
+var _FontIcon2 = _interopRequireDefault(_FontIcon);
+
+var _Ripple = require('../ripple/Ripple.js');
+
+var _Ripple2 = _interopRequireDefault(_Ripple);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(ripple) {
+  var MenuItem = function (_Component) {
+    _inherits(MenuItem, _Component);
+
+    function MenuItem() {
+      var _Object$getPrototypeO;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, MenuItem);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(MenuItem)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function (event) {
+        if (_this.props.onClick && !_this.props.disabled) {
+          _this.props.onClick(event, _this);
+        }
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(MenuItem, [{
+      key: 'render',
+      value: function render() {
+        var _classnames;
+
+        var _props = this.props;
+        var icon = _props.icon;
+        var caption = _props.caption;
+        var children = _props.children;
+        var shortcut = _props.shortcut;
+        var selected = _props.selected;
+        var disabled = _props.disabled;
+        var theme = _props.theme;
+
+        var others = _objectWithoutProperties(_props, ['icon', 'caption', 'children', 'shortcut', 'selected', 'disabled', 'theme']);
+
+        var className = (0, _classnames3.default)(theme.menuItem, (_classnames = {}, _defineProperty(_classnames, theme.selected, selected), _defineProperty(_classnames, theme.disabled, disabled), _classnames), this.props.className);
+
+        return _react2.default.createElement(
+          'li',
+          _extends({}, others, { 'data-react-toolbox': 'menu-item', className: className, onClick: this.handleClick }),
+          icon ? _react2.default.createElement(_FontIcon2.default, { value: icon, className: theme.icon }) : null,
+          _react2.default.createElement(
+            'span',
+            { className: theme.caption },
+            caption
+          ),
+          shortcut ? _react2.default.createElement(
+            'small',
+            { className: theme.shortcut },
+            shortcut
+          ) : null,
+          children
+        );
+      }
+    }]);
+
+    return MenuItem;
+  }(_react.Component);
+
+  MenuItem.propTypes = {
+    caption: _react.PropTypes.string.isRequired,
+    children: _react.PropTypes.any,
+    className: _react.PropTypes.string,
+    disabled: _react.PropTypes.bool,
+    icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    onClick: _react.PropTypes.func,
+    selected: _react.PropTypes.bool,
+    shortcut: _react.PropTypes.string,
+    theme: _react.PropTypes.shape({
+      caption: _react.PropTypes.string.isRequired,
+      disabled: _react.PropTypes.string.isRequired,
+      icon: _react.PropTypes.string.isRequired,
+      menuItem: _react.PropTypes.string.isRequired,
+      selected: _react.PropTypes.string.isRequired,
+      shortcut: _react.PropTypes.string.isRequired
+    })
+  };
+  MenuItem.defaultProps = {
+    className: '',
+    disabled: false,
+    selected: false
+  };
+
+
+  return ripple(MenuItem);
+};
+
+var MenuItem = factory((0, _Ripple2.default)({}));
+exports.default = (0, _reactCssThemr.themr)(_identifiers.MENU)(MenuItem);
+exports.menuItemFactory = factory;
+exports.MenuItem = MenuItem;
\ No newline at end of file
diff --git a/lib/menu/_config.scss b/lib/menu/_config.scss
new file mode 100644
index 000000000..0b5343661
--- /dev/null
+++ b/lib/menu/_config.scss
@@ -0,0 +1,16 @@
+$menu-expand-duration: .3s !default;
+$menu-fade-duration: .2s !default;
+$menu-ripple-delay: .3s !default;
+$menu-background-color: $color-white !default;
+$menu-padding: .8 * $unit 0 !default;
+$menu-outline-border-radius: .2 * $unit !default;
+$menu-item-hover-background: $palette-grey-200 !default;
+$menu-item-selected-background: transparent !default;
+$menu-item-icon-font-size: 2.4 * $unit !default;
+$menu-item-icon-size: 1.6 * $menu-item-icon-font-size !default;
+$menu-item-height: 4.8 * $unit !default;
+$menu-item-padding: 1.6 * $unit !default;
+$menu-item-font-size: 1.6 * $unit !default;
+$menu-divider-height: (4.8 * $unit) / 4 !default;
+$menu-icon-size: 2.3 * $unit !default;
+$menu-icon-ripple-duration: 650ms !default;
diff --git a/lib/menu/index.js b/lib/menu/index.js
new file mode 100644
index 000000000..56f87c943
--- /dev/null
+++ b/lib/menu/index.js
@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconMenu = exports.Menu = exports.MenuItem = exports.MenuDivider = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _button = require('../button');
+
+var _MenuDivider = require('./MenuDivider.js');
+
+var _MenuItem = require('./MenuItem.js');
+
+var _Menu = require('./Menu.js');
+
+var _IconMenu = require('./IconMenu.js');
+
+var _ripple = require('../ripple');
+
+var _ripple2 = _interopRequireDefault(_ripple);
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var applyTheme = function applyTheme(Component) {
+  return (0, _reactCssThemr.themr)(_identifiers.MENU, _theme2.default)(Component);
+};
+var ThemedMenuDivider = applyTheme(_MenuDivider.MenuDivider);
+var ThemedMenuItem = applyTheme((0, _MenuItem.menuItemFactory)((0, _ripple2.default)({})));
+var ThemedMenu = applyTheme((0, _Menu.menuFactory)(ThemedMenuItem));
+var ThemedIconMenu = applyTheme((0, _IconMenu.iconMenuFactory)(_button.IconButton, ThemedMenu));
+
+exports.MenuDivider = ThemedMenuDivider;
+exports.MenuItem = ThemedMenuItem;
+exports.Menu = ThemedMenu;
+exports.IconMenu = ThemedIconMenu;
\ No newline at end of file
diff --git a/lib/menu/theme.scss b/lib/menu/theme.scss
new file mode 100644
index 000000000..bff050070
--- /dev/null
+++ b/lib/menu/theme.scss
@@ -0,0 +1,152 @@
+@import "http://github.com/base";
+@import "http://github.com/config";
+
+.iconMenu {
+  position: relative;
+  display: inline-block;
+  text-align: center;
+  .icon {
+    cursor: pointer;
+  }
+}
+
+.menu {
+  position: relative;
+  display: inline-block;
+  &.topLeft {
+    position: absolute;
+    top: 0;
+    left: 0;
+    > .outline {
+      transform-origin: 0 0;
+    }
+  }
+  &.topRight {
+    position: absolute;
+    top: 0;
+    right: 0;
+    > .outline {
+      transform-origin: 100% 0;
+    }
+  }
+  &.bottomLeft {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    > .outline {
+      transform-origin: 0 100%;
+    }
+  }
+  &.bottomRight {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    > .outline {
+      transform-origin: 100% 100%;
+    }
+  }
+  &:not(.static) {
+    z-index: $z-index-higher;
+    pointer-events: none;
+    > .outline {
+      opacity: 0;
+      transition: transform $menu-expand-duration $animation-curve-default,
+      opacity $menu-fade-duration $animation-curve-default;
+      transform: scale(0);
+      will-change: transform;
+    }
+    > .menuInner {
+      position: absolute;
+      top: 0;
+      left: 0;
+      opacity: 0;
+    }
+    &.rippled:not(.active) {
+      > .outline {
+        transition-delay: $menu-ripple-delay;
+      }
+      > .menuInner {
+        transition-delay: $menu-ripple-delay;
+      }
+    }
+    &.active {
+      pointer-events: all;
+      > .outline {
+        opacity: 1;
+        transform: scale(1);
+      }
+      > .menuInner {
+        opacity: 1;
+        transition: opacity $menu-fade-duration $animation-curve-default,
+        clip $menu-expand-duration $animation-curve-default;
+      }
+    }
+  }
+}
+
+.outline {
+  @include shadow-2dp();
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  background-color: $menu-background-color;
+  border-radius: $menu-outline-border-radius;
+}
+
+.menuInner {
+  position: relative;
+  display: block;
+  padding: $menu-padding;
+  text-align: left;
+  white-space: nowrap;
+  list-style: none;
+}
+
+.menuItem {
+  position: relative;
+  display: flex;
+  height: $menu-item-height;
+  align-items: center;
+  padding: 0 $menu-item-padding;
+  overflow: hidden;
+  font-size: $menu-item-font-size;
+  color: $color-text;
+  &:not(.disabled):hover {
+    cursor: pointer;
+    background-color: $menu-item-hover-background;
+  }
+  &.disabled {
+    pointer-events: none;
+    opacity: .5;
+  }
+  &.selected {
+    font-weight: 500;
+    background-color: $menu-item-selected-background;
+  }
+  .ripple {
+    color: $color-text-secondary;
+  }
+
+  .icon {
+    width: $menu-item-icon-size;
+    font-size: $menu-item-icon-font-size !important;
+  }
+}
+
+.caption {
+  flex-grow: 1;
+  font-size: $font-size-normal;
+}
+
+.shortcut {
+  margin-left: $menu-item-padding;
+}
+
+.menuDivider {
+  display: block;
+  width: 100%;
+  height: 1px;
+  margin: $menu-divider-height 0;
+  background-color: $color-divider;
+}
diff --git a/lib/navigation/Navigation.js b/lib/navigation/Navigation.js
new file mode 100644
index 000000000..9be9f54f3
--- /dev/null
+++ b/lib/navigation/Navigation.js
@@ -0,0 +1,86 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Navigation = exports.navigationFactory = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Button = require('../button/Button.js');
+
+var _Button2 = _interopRequireDefault(_Button);
+
+var _Link = require('../link/Link.js');
+
+var _Link2 = _interopRequireDefault(_Link);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var factory = function factory(Button, Link) {
+  var Navigation = function Navigation(_ref) {
+    var actions = _ref.actions;
+    var children = _ref.children;
+    var className = _ref.className;
+    var routes = _ref.routes;
+    var theme = _ref.theme;
+    var type = _ref.type;
+
+    var _className = (0, _classnames2.default)(theme[type], className);
+    var buttons = actions.map(function (action, index) {
+      return _react2.default.createElement(Button, _extends({ className: theme.button, key: index }, action));
+    });
+
+    var links = routes.map(function (route, index) {
+      return _react2.default.createElement(Link, _extends({ className: theme.link, key: index }, route));
+    });
+
+    return _react2.default.createElement(
+      'nav',
+      { 'data-react-toolbox': 'navigation', className: _className },
+      links,
+      buttons,
+      children
+    );
+  };
+
+  Navigation.propTypes = {
+    actions: _react.PropTypes.array,
+    children: _react.PropTypes.node,
+    className: _react.PropTypes.string,
+    routes: _react.PropTypes.array,
+    theme: _react.PropTypes.shape({
+      button: _react.PropTypes.string.isRequired,
+      horizontal: _react.PropTypes.string.isRequired,
+      link: _react.PropTypes.string.isRequired,
+      vertical: _react.PropTypes.string.isRequired
+    }),
+    type: _react.PropTypes.oneOf(['vertical', 'horizontal'])
+  };
+
+  Navigation.defaultProps = {
+    actions: [],
+    className: '',
+    type: 'horizontal',
+    routes: []
+  };
+
+  return Navigation;
+};
+
+var Navigation = factory(_Button2.default, _Link2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.NAVIGATION)(Navigation);
+exports.navigationFactory = factory;
+exports.Navigation = Navigation;
\ No newline at end of file
diff --git a/lib/navigation/_config.scss b/lib/navigation/_config.scss
new file mode 100644
index 000000000..6b654ac73
--- /dev/null
+++ b/lib/navigation/_config.scss
@@ -0,0 +1,2 @@
+$navigation-space: $unit !default;
+$navigation-color: $color-black !default;
diff --git a/lib/navigation/index.js b/lib/navigation/index.js
new file mode 100644
index 000000000..386b3ecee
--- /dev/null
+++ b/lib/navigation/index.js
@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Navigation = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Navigation = require('./Navigation.js');
+
+var _button = require('../button');
+
+var _link = require('../link');
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ThemedNavigation = (0, _reactCssThemr.themr)(_identifiers.NAVIGATION, _theme2.default)((0, _Navigation.navigationFactory)(_button.Button, _link.Link));
+exports.default = ThemedNavigation;
+exports.Navigation = ThemedNavigation;
\ No newline at end of file
diff --git a/lib/navigation/theme.scss b/lib/navigation/theme.scss
new file mode 100644
index 000000000..b8066c0c9
--- /dev/null
+++ b/lib/navigation/theme.scss
@@ -0,0 +1,24 @@
+@import "http://github.com/base";
+@import "http://github.com/config";
+
+.horizontal {
+  > [data-react-toolbox="button"], > [data-react-toolbox="link"] {
+    display: inline-block;
+    margin: 0 $navigation-space / 2;
+  }
+}
+
+.vertical {
+  > [data-react-toolbox="button"], > [data-react-toolbox="link"] {
+    display: block;
+    margin: $navigation-space / 2;
+  }
+}
+
+.vertical, .horizontal {
+  padding: $navigation-space / 2;
+
+  > [data-react-toolbox="link"] {
+    color: $navigation-color;
+  }
+}
diff --git a/lib/overlay/Overlay.js b/lib/overlay/Overlay.js
new file mode 100644
index 000000000..a9a7cc4d1
--- /dev/null
+++ b/lib/overlay/Overlay.js
@@ -0,0 +1,130 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Overlay = undefined;
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Portal = require('../hoc/Portal.js');
+
+var _Portal2 = _interopRequireDefault(_Portal);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var Overlay = function (_React$Component) {
+  _inherits(Overlay, _React$Component);
+
+  function Overlay() {
+    _classCallCheck(this, Overlay);
+
+    return _possibleConstructorReturn(this, Object.getPrototypeOf(Overlay).apply(this, arguments));
+  }
+
+  _createClass(Overlay, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      if (this.props.active) {
+        this.escKeyListener = document.body.addEventListener('keydown', this.handleEscKey.bind(this));
+        document.body.style.overflow = 'hidden';
+      }
+    }
+  }, {
+    key: 'componentWillUpdate',
+    value: function componentWillUpdate(nextProps) {
+      if (nextProps.active && !this.props.active) document.body.style.overflow = 'hidden';
+      if (!nextProps.active && this.props.active) document.body.style.overflow = null;
+    }
+  }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate() {
+      if (this.props.active && !this.escKeyListener) {
+        this.escKeyListener = document.body.addEventListener('keydown', this.handleEscKey.bind(this));
+      }
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      if (this.escKeyListener) {
+        document.body.removeEventListener('keydown', this.handleEscKey);
+        this.escKeyListener = null;
+      }
+    }
+  }, {
+    key: 'handleEscKey',
+    value: function handleEscKey(e) {
+      if (this.props.active && this.props.onEscKeyDown && e.which === 27) {
+        this.props.onEscKeyDown(e);
+      }
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _classnames;
+
+      var _props = this.props;
+      var active = _props.active;
+      var className = _props.className;
+      var children = _props.children;
+      var invisible = _props.invisible;
+      var onClick = _props.onClick;
+      var theme = _props.theme;
+
+      var _className = (0, _classnames3.default)(theme.overlay, (_classnames = {}, _defineProperty(_classnames, theme.active, active), _defineProperty(_classnames, theme.invisible, invisible), _classnames), className);
+
+      return _react2.default.createElement(
+        _Portal2.default,
+        null,
+        _react2.default.createElement(
+          'div',
+          { className: _className },
+          _react2.default.createElement('div', { className: theme.backdrop, onClick: onClick }),
+          children
+        )
+      );
+    }
+  }]);
+
+  return Overlay;
+}(_react2.default.Component);
+
+Overlay.propTypes = {
+  active: _react2.default.PropTypes.bool,
+  children: _react2.default.PropTypes.node,
+  className: _react2.default.PropTypes.string,
+  invisible: _react2.default.PropTypes.bool,
+  onClick: _react2.default.PropTypes.func,
+  onEscKeyDown: _react2.default.PropTypes.func,
+  theme: _react2.default.PropTypes.shape({
+    active: _react2.default.PropTypes.string.isRequired,
+    backdrop: _react2.default.PropTypes.string.isRequired,
+    invisible: _react2.default.PropTypes.string.isRequired,
+    overlay: _react2.default.PropTypes.string.isRequired
+  })
+};
+Overlay.defaultProps = {
+  invisible: false
+};
+exports.default = (0, _reactCssThemr.themr)(_identifiers.OVERLAY)(Overlay);
+exports.Overlay = Overlay;
\ No newline at end of file
diff --git a/lib/overlay/_config.scss b/lib/overlay/_config.scss
new file mode 100644
index 000000000..ccba4d3c7
--- /dev/null
+++ b/lib/overlay/_config.scss
@@ -0,0 +1,2 @@
+$overlay-color: $color-black !default;
+$overlay-opacity: .6 !default;
diff --git a/lib/overlay/index.js b/lib/overlay/index.js
new file mode 100644
index 000000000..96c77eeee
--- /dev/null
+++ b/lib/overlay/index.js
@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Overlay = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Overlay = require('./Overlay.js');
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ThemedOverlay = (0, _reactCssThemr.themr)(_identifiers.OVERLAY, _theme2.default)(_Overlay.Overlay);
+exports.default = ThemedOverlay;
+exports.Overlay = ThemedOverlay;
\ No newline at end of file
diff --git a/lib/overlay/theme.scss b/lib/overlay/theme.scss
new file mode 100644
index 000000000..f107b466c
--- /dev/null
+++ b/lib/overlay/theme.scss
@@ -0,0 +1,40 @@
+@import "http://github.com/base";
+@import "http://github.com/config";
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: $z-index-highest;
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  flex-direction: column;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  &.invisible > *:not(.overlay) {
+    pointer-events: all;
+  }
+}
+
+.backdrop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: $overlay-color;
+  opacity: 0;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transition-property: opacity;
+}
+
+.active {
+  pointer-events: all;
+  > .backdrop {
+    opacity: $overlay-opacity;
+  }
+}
diff --git a/lib/progress_bar/ProgressBar.js b/lib/progress_bar/ProgressBar.js
new file mode 100644
index 000000000..f0aa1fe64
--- /dev/null
+++ b/lib/progress_bar/ProgressBar.js
@@ -0,0 +1,160 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProgressBar = undefined;
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _prefixer = require('../utils/prefixer.js');
+
+var _prefixer2 = _interopRequireDefault(_prefixer);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var ProgressBar = function (_Component) {
+  _inherits(ProgressBar, _Component);
+
+  function ProgressBar() {
+    _classCallCheck(this, ProgressBar);
+
+    return _possibleConstructorReturn(this, Object.getPrototypeOf(ProgressBar).apply(this, arguments));
+  }
+
+  _createClass(ProgressBar, [{
+    key: 'calculateRatio',
+    value: function calculateRatio(value) {
+      if (value < this.props.min) return 0;
+      if (value > this.props.max) return 1;
+      return (value - this.props.min) / (this.props.max - this.props.min);
+    }
+  }, {
+    key: 'circularStyle',
+    value: function circularStyle() {
+      if (this.props.mode !== 'indeterminate') {
+        return { strokeDasharray: 2 * Math.PI * 25 * this.calculateRatio(this.props.value) + ', 400' };
+      }
+    }
+  }, {
+    key: 'linearStyle',
+    value: function linearStyle() {
+      if (this.props.mode !== 'indeterminate') {
+        return {
+          buffer: (0, _prefixer2.default)({ transform: 'scaleX(' + this.calculateRatio(this.props.buffer) + ')' }),
+          value: (0, _prefixer2.default)({ transform: 'scaleX(' + this.calculateRatio(this.props.value) + ')' })
+        };
+      } else {
+        return {};
+      }
+    }
+  }, {
+    key: 'renderCircular',
+    value: function renderCircular() {
+      return _react2.default.createElement(
+        'svg',
+        { className: this.props.theme.circle },
+        _react2.default.createElement('circle', { className: this.props.theme.path, style: this.circularStyle(), cx: '30', cy: '30', r: '25' })
+      );
+    }
+  }, {
+    key: 'renderLinear',
+    value: function renderLinear() {
+      var _linearStyle = this.linearStyle();
+
+      var buffer = _linearStyle.buffer;
+      var value = _linearStyle.value;
+
+      return _react2.default.createElement(
+        'div',
+        null,
+        _react2.default.createElement('span', { ref: 'buffer', 'data-ref': 'buffer', className: this.props.theme.buffer, style: buffer }),
+        _react2.default.createElement('span', { ref: 'value', 'data-ref': 'value', className: this.props.theme.value, style: value })
+      );
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _classnames;
+
+      var _props = this.props;
+      var className = _props.className;
+      var max = _props.max;
+      var min = _props.min;
+      var mode = _props.mode;
+      var multicolor = _props.multicolor;
+      var type = _props.type;
+      var theme = _props.theme;
+      var value = _props.value;
+
+      var _className = (0, _classnames3.default)(theme[type], (_classnames = {}, _defineProperty(_classnames, theme[mode], mode), _defineProperty(_classnames, theme.multicolor, multicolor), _classnames), className);
+
+      return _react2.default.createElement(
+        'div',
+        {
+          'data-react-toolbox': 'progress-bar',
+          'aria-valuenow': value,
+          'aria-valuemin': min,
+          'aria-valuemax': max,
+          className: _className
+        },
+        type === 'circular' ? this.renderCircular() : this.renderLinear()
+      );
+    }
+  }]);
+
+  return ProgressBar;
+}(_react.Component);
+
+ProgressBar.propTypes = {
+  buffer: _react.PropTypes.number,
+  className: _react.PropTypes.string,
+  max: _react.PropTypes.number,
+  min: _react.PropTypes.number,
+  mode: _react.PropTypes.oneOf(['determinate', 'indeterminate']),
+  multicolor: _react.PropTypes.bool,
+  theme: _react.PropTypes.shape({
+    buffer: _react.PropTypes.string,
+    circle: _react.PropTypes.string,
+    circular: _react.PropTypes.string,
+    indeterminate: _react.PropTypes.string,
+    linear: _react.PropTypes.string,
+    multicolor: _react.PropTypes.string,
+    path: _react.PropTypes.string,
+    value: _react.PropTypes.string
+  }),
+  type: _react.PropTypes.oneOf(['linear', 'circular']),
+  value: _react.PropTypes.number
+};
+ProgressBar.defaultProps = {
+  buffer: 0,
+  className: '',
+  max: 100,
+  min: 0,
+  mode: 'indeterminate',
+  multicolor: false,
+  type: 'linear',
+  value: 0
+};
+exports.default = (0, _reactCssThemr.themr)(_identifiers.PROGRESS_BAR)(ProgressBar);
+exports.ProgressBar = ProgressBar;
\ No newline at end of file
diff --git a/lib/progress_bar/__test__/index.spec.js b/lib/progress_bar/__test__/index.spec.js
new file mode 100644
index 000000000..ec2d796d7
--- /dev/null
+++ b/lib/progress_bar/__test__/index.spec.js
@@ -0,0 +1,92 @@
+'use strict';
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _expect = require('expect');
+
+var _expect2 = _interopRequireDefault(_expect);
+
+var _reactAddonsTestUtils = require('react-addons-test-utils');
+
+var _reactAddonsTestUtils2 = _interopRequireDefault(_reactAddonsTestUtils);
+
+var _ProgressBar = require('../ProgressBar');
+
+var _ProgressBar2 = _interopRequireDefault(_ProgressBar);
+
+var _theme = require('../theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+var _testing = require('../../utils/testing');
+
+var _testing2 = _interopRequireDefault(_testing);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('ProgressBar', function () {
+  var progressBar = void 0;
+
+  describe('#calculateRatio', function () {
+    before(function () {
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_ProgressBar2.default, { min: 100, max: 300, theme: _theme2.default }));
+      progressBar = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _ProgressBar.ProgressBar);
+    });
+
+    it('calculates the right ratio', function () {
+      (0, _expect2.default)(progressBar.calculateRatio(150)).toEqual(0.25);
+    });
+
+    it('gets 0 when value is less than min', function () {
+      (0, _expect2.default)(progressBar.calculateRatio(10)).toEqual(0);
+    });
+
+    it('gets 1 when value is more than max', function () {
+      (0, _expect2.default)(progressBar.calculateRatio(400)).toEqual(1);
+    });
+  });
+
+  describe('#render', function () {
+    var buffer = void 0,
+        value = void 0,
+        wrapper = void 0,
+        circle = void 0,
+        strokeLength = void 0;
+
+    it('renders the value and buffer bars when it is linear', function () {
+      wrapper = _testing2.default.shallowRenderComponent(_ProgressBar.ProgressBar, { theme: _theme2.default }).props.children;
+      (0, _expect2.default)(wrapper.props.children.length).toEqual(2);
+      (0, _expect2.default)(wrapper.props.children[0].ref).toEqual('buffer');
+      (0, _expect2.default)(wrapper.props.children[1].ref).toEqual('value');
+    });
+
+    it('renders the value and buffer bars when it is linear', function () {
+      progressBar = _testing2.default.shallowRenderComponent(_ProgressBar.ProgressBar, { mode: 'determinate', value: 30, buffer: 60, theme: _theme2.default });
+      buffer = progressBar.props.children.props.children[0];
+      value = progressBar.props.children.props.children[1];
+      (0, _expect2.default)(buffer.props.style.transform).toEqual('scaleX(' + 0.6 + ')');
+      (0, _expect2.default)(value.props.style.transform).toEqual('scaleX(' + 0.3 + ')');
+    });
+
+    it('renders the svg circle when it is circular', function () {
+      progressBar = _testing2.default.shallowRenderComponent(_ProgressBar.ProgressBar, { type: 'circular', theme: _theme2.default });
+      (0, _expect2.default)(progressBar.props.children.type).toEqual('svg');
+      (0, _expect2.default)(progressBar.props.children.props.children.type).toEqual('circle');
+    });
+
+    it('renders the proper circle length style when it is circular and determinate', function () {
+      progressBar = _testing2.default.shallowRenderComponent(_ProgressBar.ProgressBar, { type: 'circular', mode: 'determinate', value: 30, theme: _theme2.default });
+      circle = progressBar.props.children.props.children;
+      strokeLength = 2 * Math.PI * circle.props.r * 0.3;
+      (0, _expect2.default)(circle.props.style.strokeDasharray).toEqual(strokeLength + ', 400');
+    });
+
+    it('contains mode and className in its className', function () {
+      progressBar = _testing2.default.shallowRenderComponent(_ProgressBar.ProgressBar, { mode: 'determinate', className: 'tight', theme: _theme2.default });
+      (0, _expect2.default)(progressBar.props.className).toContain(_theme2.default.determinate);
+      (0, _expect2.default)(progressBar.props.className).toContain(_theme2.default.tight);
+    });
+  });
+});
\ No newline at end of file
diff --git a/lib/progress_bar/_config.scss b/lib/progress_bar/_config.scss
new file mode 100644
index 000000000..f554b346b
--- /dev/null
+++ b/lib/progress_bar/_config.scss
@@ -0,0 +1,6 @@
+$progress-height: .4 * $unit !default;
+$progress-main-color: $color-primary !default;
+$progress-secondary-color: rgba($color-primary-contrast, 0.7) !default;
+$circle-wrapper-width: 60 !default;
+$circle-radius: 25 !default;
+$scale-ratio: $circle-radius / 20 !default;
diff --git a/lib/progress_bar/index.js b/lib/progress_bar/index.js
new file mode 100644
index 000000000..a61b09a24
--- /dev/null
+++ b/lib/progress_bar/index.js
@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProgressBar = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _ProgressBar = require('./ProgressBar.js');
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ThemedProgressBar = (0, _reactCssThemr.themr)(_identifiers.PROGRESS_BAR, _theme2.default)(_ProgressBar.ProgressBar);
+
+exports.default = ThemedProgressBar;
+exports.ProgressBar = ThemedProgressBar;
\ No newline at end of file
diff --git a/lib/progress_bar/theme.scss b/lib/progress_bar/theme.scss
new file mode 100644
index 000000000..e34bc766e
--- /dev/null
+++ b/lib/progress_bar/theme.scss
@@ -0,0 +1,135 @@
+@import "http://github.com/base";
+@import "http://github.com/config";
+
+.linear {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  height: $progress-height;
+  overflow: hidden;
+  background: $color-divider;
+  &.indeterminate .value {
+    transform-origin: center center;
+    animation: linear-indeterminate-bar 1s linear infinite;
+  }
+}
+
+.value, .buffer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transform: scaleX(0);
+  transform-origin: left center;
+}
+
+.value {
+  background-color: $progress-main-color;
+}
+
+.buffer {
+  background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
+  linear-gradient(to right, $progress-main-color, $progress-main-color);
+}
+
+.circular {
+  position: relative;
+  display: inline-block;
+  width: $circle-wrapper-width * 1px;
+  height: $circle-wrapper-width * 1px;
+  transform: rotate(-90deg);
+  &.indeterminate {
+    .circle {
+      animation: circular-indeterminate-bar-rotate 2s linear infinite;
+    }
+    .path {
+      animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite;
+
+      stroke-dasharray: $scale-ratio * 1, $scale-ratio * 200;
+      stroke-dashoffset: 0;
+    }
+    &.multicolor .path {
+      animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite,
+      colors (1.5s * 4) ease-in-out infinite;
+    }
+  }
+}
+
+.circle {
+  width: 100%;
+  height: 100%;
+}
+
+.path {
+  transition: stroke-dasharray $animation-duration $animation-curve-default;
+  fill: none;
+
+  stroke-dasharray: 0, $scale-ratio * 200;
+  stroke-dashoffset: 0;
+  stroke-linecap: round;
+  stroke-miterlimit: 20;
+  stroke-width: 4;
+  stroke: $progress-main-color;
+}
+
+@keyframes linear-indeterminate-bar {
+  0% {
+    transform: translate(-50%) scaleX(0);
+  }
+
+  50% {
+    transform: translate(-0%) scaleX(.3);
+  }
+
+  100% {
+    transform: translate(50%) scaleX(0);
+  }
+}
+
+@keyframes circular-indeterminate-bar-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes circular-indeterminate-bar-dash {
+  0% {
+    stroke-dasharray: $scale-ratio * 1, $scale-ratio * 200;
+    stroke-dashoffset: $scale-ratio * 0;
+  }
+
+  50% {
+    stroke-dasharray: $scale-ratio * 89, $scale-ratio * 200;
+    stroke-dashoffset: $scale-ratio * -35;
+  }
+
+  100% {
+    stroke-dasharray: $scale-ratio * 89, $scale-ratio * 200;
+    stroke-dashoffset: $scale-ratio * -124;
+  }
+}
+
+@keyframes colors {
+  0% {
+    stroke: #4285f4;
+  }
+
+  25% {
+    stroke: #de3e35;
+  }
+
+  50% {
+    stroke: #f7c223;
+  }
+
+  75% {
+    stroke: #1b9a59;
+  }
+
+  100% {
+    stroke: #4285f4;
+  }
+}
diff --git a/lib/radio/Radio.js b/lib/radio/Radio.js
new file mode 100644
index 000000000..b7b1feccd
--- /dev/null
+++ b/lib/radio/Radio.js
@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+var factory = function factory(ripple) {
+  var Radio = function Radio(_ref) {
+    var checked = _ref.checked;
+    var onMouseDown = _ref.onMouseDown;
+    var theme = _ref.theme;
+
+    var other = _objectWithoutProperties(_ref, ['checked', 'onMouseDown', 'theme']);
+
+    return _react2.default.createElement('div', _extends({
+      'data-react-toolbox': 'radio',
+      className: theme[checked ? 'radioChecked' : 'radio'],
+      onMouseDown: onMouseDown
+    }, other));
+  };
+
+  Radio.propTypes = {
+    checked: _react.PropTypes.bool,
+    children: _react.PropTypes.any,
+    onMouseDown: _react.PropTypes.func,
+    theme: _react.PropTypes.shape({
+      radio: _react.PropTypes.string.isRequired,
+      radioChecked: _react.PropTypes.string.isRequired,
+      ripple: _react.PropTypes.string.isRequired
+    })
+  };
+
+  return ripple(Radio);
+};
+
+exports.default = factory;
\ No newline at end of file
diff --git a/lib/radio/RadioButton.js b/lib/radio/RadioButton.js
new file mode 100644
index 000000000..6a214d826
--- /dev/null
+++ b/lib/radio/RadioButton.js
@@ -0,0 +1,147 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RadioButton = exports.radioButtonFactory = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Ripple = require('../ripple/Ripple.js');
+
+var _Ripple2 = _interopRequireDefault(_Ripple);
+
+var _Radio = require('./Radio.js');
+
+var _Radio2 = _interopRequireDefault(_Radio);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(Radio) {
+  var RadioButton = function (_Component) {
+    _inherits(RadioButton, _Component);
+
+    function RadioButton() {
+      var _Object$getPrototypeO;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, RadioButton);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(RadioButton)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function (event) {
+        var _this$props = _this.props;
+        var checked = _this$props.checked;
+        var disabled = _this$props.disabled;
+        var onChange = _this$props.onChange;
+
+        if (event.pageX !== 0 && event.pageY !== 0) _this.blur();
+        if (!disabled && !checked && onChange) onChange(event, _this);
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(RadioButton, [{
+      key: 'blur',
+      value: function blur() {
+        this.refs.input.blur();
+      }
+    }, {
+      key: 'focus',
+      value: function focus() {
+        this.refs.input.focus();
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _props = this.props;
+        var className = _props.className;
+        var checked = _props.checked;
+        var disabled = _props.disabled;
+        var label = _props.label;
+        var theme = _props.theme;
+        var onChange = _props.onChange;
+
+        var others = _objectWithoutProperties(_props, ['className', 'checked', 'disabled', 'label', 'theme', 'onChange']); // eslint-disable-line
+
+
+        var _className = (0, _classnames2.default)(theme[this.props.disabled ? 'disabled' : 'field'], className);
+        return _react2.default.createElement(
+          'label',
+          { 'data-react-toolbox': 'radio-button', className: _className },
+          _react2.default.createElement('input', _extends({}, others, {
+            className: theme.input,
+            onClick: this.handleClick,
+            readOnly: true,
+            ref: 'input',
+            type: 'radio'
+          })),
+          _react2.default.createElement(Radio, { checked: checked, disabled: disabled, theme: theme }),
+          label ? _react2.default.createElement(
+            'span',
+            { className: theme.text },
+            label
+          ) : null
+        );
+      }
+    }]);
+
+    return RadioButton;
+  }(_react.Component);
+
+  RadioButton.propTypes = {
+    checked: _react.PropTypes.bool,
+    className: _react.PropTypes.string,
+    disabled: _react.PropTypes.bool,
+    label: _react.PropTypes.string,
+    name: _react.PropTypes.string,
+    onBlur: _react.PropTypes.func,
+    onChange: _react.PropTypes.func,
+    onFocus: _react.PropTypes.func,
+    theme: _react.PropTypes.shape({
+      disabled: _react.PropTypes.string.isRequired,
+      field: _react.PropTypes.string.isRequired,
+      input: _react.PropTypes.string.isRequired,
+      text: _react.PropTypes.string.isRequired
+    }),
+    value: _react.PropTypes.any
+  };
+  RadioButton.defaultProps = {
+    checked: false,
+    className: '',
+    disabled: false
+  };
+
+
+  return RadioButton;
+};
+
+var Radio = (0, _Radio2.default)((0, _Ripple2.default)({ centered: true, spread: 2.6 }));
+var RadioButton = factory(Radio);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.RADIO)(RadioButton);
+exports.radioButtonFactory = factory;
+exports.RadioButton = RadioButton;
\ No newline at end of file
diff --git a/lib/radio/RadioGroup.js b/lib/radio/RadioGroup.js
new file mode 100644
index 000000000..e85ce1dd9
--- /dev/null
+++ b/lib/radio/RadioGroup.js
@@ -0,0 +1,102 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RadioGroup = exports.radioGroupFactory = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _RadioButton = require('./RadioButton.js');
+
+var _RadioButton2 = _interopRequireDefault(_RadioButton);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(RadioButton) {
+  var RadioGroup = function (_Component) {
+    _inherits(RadioGroup, _Component);
+
+    function RadioGroup() {
+      var _Object$getPrototypeO;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, RadioGroup);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(RadioGroup)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleChange = function (value) {
+        if (_this.props.onChange) _this.props.onChange(value);
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(RadioGroup, [{
+      key: 'renderRadioButtons',
+      value: function renderRadioButtons() {
+        var _this2 = this;
+
+        return _react2.default.Children.map(this.props.children, function (radio, idx) {
+          return _react2.default.createElement(RadioButton, _extends({}, radio.props, {
+            checked: radio.props.value === _this2.props.value,
+            disabled: _this2.props.disabled || radio.props.disabled,
+            key: idx,
+            label: radio.props.label,
+            onChange: _this2.handleChange.bind(_this2, radio.props.value),
+            value: radio.props.value
+          }));
+        });
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        return _react2.default.createElement(
+          'div',
+          { 'data-react-toolbox': 'radio-group', className: this.props.className },
+          this.renderRadioButtons()
+        );
+      }
+    }]);
+
+    return RadioGroup;
+  }(_react.Component);
+
+  RadioGroup.propTypes = {
+    children: _react.PropTypes.node,
+    className: _react.PropTypes.string,
+    disabled: _react.PropTypes.bool,
+    name: _react.PropTypes.string,
+    onChange: _react.PropTypes.func,
+    value: _react.PropTypes.any
+  };
+  RadioGroup.defaultProps = {
+    className: '',
+    disabled: false
+  };
+
+
+  return RadioGroup;
+};
+
+var RadioGroup = factory(_RadioButton2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.RADIO)(RadioGroup);
+exports.radioGroupFactory = factory;
+exports.RadioGroup = RadioGroup;
\ No newline at end of file
diff --git a/lib/radio/_config.scss b/lib/radio/_config.scss
new file mode 100644
index 000000000..42bc3e9dd
--- /dev/null
+++ b/lib/radio/_config.scss
@@ -0,0 +1,9 @@
+$radio-field-margin-bottom: 1.5 * $unit !default;
+$radio-button-size: 1.6 * $unit !default;
+$radio-inner-margin: $radio-button-size / 4 !default;
+$radio-inner-color: $color-primary !default;
+$radio-focus-color: rgba($color-black, 0.1) !default;
+$radio-checked-focus-color: rgba($color-primary, 0.26) !default;
+$radio-text-color: $color-black !default;
+$radio-disabled-color: rgba($color-black, 0.26) !default;
+$radio-text-font-size: 1.4 * $unit !default;
diff --git a/lib/radio/index.js b/lib/radio/index.js
new file mode 100644
index 000000000..b8cfd8400
--- /dev/null
+++ b/lib/radio/index.js
@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RadioGroup = exports.RadioButton = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _ripple = require('../ripple');
+
+var _ripple2 = _interopRequireDefault(_ripple);
+
+var _Radio = require('./Radio.js');
+
+var _Radio2 = _interopRequireDefault(_Radio);
+
+var _RadioButton = require('./RadioButton.js');
+
+var _RadioGroup = require('./RadioGroup.js');
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ThemedRadio = (0, _Radio2.default)((0, _ripple2.default)({ centered: true, spread: 2.6 }));
+var ThemedRadioButton = (0, _reactCssThemr.themr)(_identifiers.RADIO, _theme2.default)((0, _RadioButton.radioButtonFactory)(ThemedRadio));
+var ThemedRadioGroup = (0, _reactCssThemr.themr)(_identifiers.RADIO, _theme2.default)((0, _RadioGroup.radioGroupFactory)(ThemedRadioButton));
+
+exports.default = ThemedRadioButton;
+exports.RadioButton = ThemedRadioButton;
+exports.RadioGroup = ThemedRadioGroup;
\ No newline at end of file
diff --git a/lib/radio/theme.scss b/lib/radio/theme.scss
new file mode 100644
index 000000000..45c493373
--- /dev/null
+++ b/lib/radio/theme.scss
@@ -0,0 +1,94 @@
+@import "http://github.com/base";
+@import "http://github.com/config";
+
+.radio {
+  position: relative;
+  display: inline-block;
+  width: $radio-button-size;
+  height: $radio-button-size;
+  vertical-align: top;
+  cursor: pointer;
+  border: .2 * $unit solid $radio-text-color;
+  border-radius: 50%;
+  &:before {
+    @include material-animation-default();
+    position: absolute;
+    top: $radio-inner-margin - .2 * $unit;
+    left: $radio-inner-margin - .2 * $unit;
+    width: $radio-button-size - $radio-inner-margin * 2;
+    height: $radio-button-size - $radio-inner-margin * 2;
+    content: "";
+    background-color: $radio-inner-color;
+    border-radius: 50%;
+    transition: transform;
+    transform: scale(0);
+  }
+
+  .ripple {
+    background-color: $radio-inner-color;
+    opacity: .3;
+    transition-duration: 650ms;
+  }
+}
+
+.radioChecked {
+  @extend .radio;
+  border: .2 * $unit solid $radio-inner-color;
+  &:before {
+    transform: scale(1);
+  }
+}
+
+.field {
+  position: relative;
+  display: block;
+  height: $radio-button-size;
+  margin-bottom: $radio-field-margin-bottom;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.text {
+  display: inline-block;
+  padding-left: $unit;
+  font-size: $radio-text-font-size;
+  line-height: $radio-button-size;
+  color: $radio-text-color;
+  white-space: nowrap;
+  vertical-align: top;
+}
+
+.input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  opacity: 0;
+  appearance: none;
+  &:focus ~ .radio {
+    box-shadow: 0 0 0 $unit $radio-focus-color;
+  }
+  &:focus ~ .radioChecked {
+    box-shadow: 0 0 0 $unit $radio-checked-focus-color;
+  }
+}
+
+.disabled {
+  @extend .field;
+  .text {
+    color: $radio-disabled-color;
+  }
+  .radio {
+    cursor: auto;
+    border-color: $radio-disabled-color;
+  }
+  .radioChecked {
+    cursor: auto;
+    border-color: $radio-disabled-color;
+    &:before {
+      background-color: $radio-disabled-color;
+    }
+  }
+}
diff --git a/lib/ripple/Ripple.js b/lib/ripple/Ripple.js
new file mode 100644
index 000000000..33400f786
--- /dev/null
+++ b/lib/ripple/Ripple.js
@@ -0,0 +1,232 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactDom = require('react-dom');
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _events = require('../utils/events');
+
+var _events2 = _interopRequireDefault(_events);
+
+var _prefixer = require('../utils/prefixer');
+
+var _prefixer2 = _interopRequireDefault(_prefixer);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+var defaults = {
+  centered: false,
+  className: '',
+  spread: 2,
+  theme: {}
+};
+
+var rippleFactory = function rippleFactory() {
+  var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
+
+  var _defaults$options = _extends({}, defaults, options);
+
+  var defaultCentered = _defaults$options.centered;
+  var defaultClassName = _defaults$options.className;
+  var defaultSpread = _defaults$options.spread;
+  var defaultTheme = _defaults$options.theme;
+
+  var props = _objectWithoutProperties(_defaults$options, ['centered', 'className', 'spread', 'theme']);
+
+  return function (ComposedComponent) {
+    var RippledComponent = function (_React$Component) {
+      _inherits(RippledComponent, _React$Component);
+
+      function RippledComponent() {
+        var _Object$getPrototypeO;
+
+        var _temp, _this, _ret;
+
+        _classCallCheck(this, RippledComponent);
+
+        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(RippledComponent)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+          active: false,
+          left: null,
+          restarting: false,
+          top: null,
+          width: null
+        }, _this.handleEnd = function () {
+          document.removeEventListener(_this.touch ? 'touchend' : 'mouseup', _this.handleEnd);
+          _this.setState({ active: false });
+        }, _this.start = function (_ref) {
+          var pageX = _ref.pageX;
+          var pageY = _ref.pageY;
+          var touch = arguments.length <= 1 || arguments[1] === undefined ? false : arguments[1];
+
+          if (!_this._isTouchRippleReceivingMouseEvent(touch)) {
+            _this.touch = touch;
+            document.addEventListener(_this.touch ? 'touchend' : 'mouseup', _this.handleEnd);
+
+            var _this$_getDescriptor = _this._getDescriptor(pageX, pageY);
+
+            var top = _this$_getDescriptor.top;
+            var left = _this$_getDescriptor.left;
+            var width = _this$_getDescriptor.width;
+
+            _this.setState({ active: false, restarting: true, top: top, left: left, width: width }, function () {
+              _this.refs.ripple.offsetWidth; //eslint-disable-line no-unused-expressions
+              _this.setState({ active: true, restarting: false });
+            });
+          }
+        }, _this.handleMouseDown = function (event) {
+          if (!_this.props.disabled) _this.start(event);
+          if (_this.props.onMouseDown) _this.props.onMouseDown(event);
+        }, _temp), _possibleConstructorReturn(_this, _ret);
+      }
+
+      _createClass(RippledComponent, [{
+        key: 'componentDidMount',
+        value: function componentDidMount() {
+          var _this2 = this;
+
+          if (this.props.onRippleEnded) {
+            _events2.default.addEventListenerOnTransitionEnded(this.refs.ripple, function (evt) {
+              if (evt.propertyName === 'transform') _this2.props.onRippleEnded(evt);
+            });
+          }
+        }
+      }, {
+        key: 'componentWillUnmount',
+        value: function componentWillUnmount() {
+          if (this.props.onRippleEnded) {
+            _events2.default.removeEventListenerOnTransitionEnded(this.refs.ripple);
+          }
+        }
+      }, {
+        key: '_isTouchRippleReceivingMouseEvent',
+        value: function _isTouchRippleReceivingMouseEvent(touch) {
+          return this.touch && !touch;
+        }
+      }, {
+        key: '_getDescriptor',
+        value: function _getDescriptor(pageX, pageY) {
+          var _ReactDOM$findDOMNode = _reactDom2.default.findDOMNode(this).getBoundingClientRect();
+
+          var left = _ReactDOM$findDOMNode.left;
+          var top = _ReactDOM$findDOMNode.top;
+          var height = _ReactDOM$findDOMNode.height;
+          var width = _ReactDOM$findDOMNode.width;
+          var _props = this.props;
+          var centered = _props.rippleCentered;
+          var spread = _props.rippleSpread;
+
+          return {
+            left: centered ? 0 : pageX - left - width / 2 - window.scrollX,
+            top: centered ? 0 : pageY - top - height / 2 - window.scrollY,
+            width: width * spread
+          };
+        }
+      }, {
+        key: 'render',
+        value: function render() {
+          if (!this.props.ripple) {
+            return _react2.default.createElement(ComposedComponent, this.props);
+          } else {
+            var _classnames;
+
+            var _props2 = this.props;
+            var children = _props2.children;
+            var ripple = _props2.ripple;
+            var className = _props2.rippleClassName;
+            var centered = _props2.rippleCentered;
+            var spread = _props2.rippleSpread;
+
+            var other = _objectWithoutProperties(_props2, ['children', 'ripple', 'rippleClassName', 'rippleCentered', 'rippleSpread']);
+
+            var rippleClassName = (0, _classnames3.default)(this.props.theme.ripple, (_classnames = {}, _defineProperty(_classnames, this.props.theme.rippleActive, this.state.active), _defineProperty(_classnames, this.props.theme.rippleRestarting, this.state.restarting), _classnames), className);
+
+            var _state = this.state;
+            var left = _state.left;
+            var top = _state.top;
+            var width = _state.width;
+
+            var scale = this.state.restarting ? 0 : 1;
+            var rippleStyle = (0, _prefixer2.default)({
+              transform: 'translate3d(' + (-width / 2 + left) + 'px, ' + (-width / 2 + top) + 'px, 0) scale(' + scale + ')'
+            }, { width: width, height: width });
+
+            return _react2.default.createElement(
+              ComposedComponent,
+              _extends({}, other, { onMouseDown: this.handleMouseDown }),
+              children ? children : null,
+              _react2.default.createElement(
+                'span',
+                _extends({ 'data-react-toolbox': 'ripple', className: this.props.theme.rippleWrapper }, props),
+                _react2.default.createElement('span', { ref: 'ripple', role: 'ripple', className: rippleClassName, style: rippleStyle })
+              )
+            );
+          }
+        }
+      }]);
+
+      return RippledComponent;
+    }(_react2.default.Component);
+
+    RippledComponent.propTypes = {
+      children: _react2.default.PropTypes.any,
+      disabled: _react2.default.PropTypes.bool,
+      onRippleEnded: _react2.default.PropTypes.func,
+      ripple: _react2.default.PropTypes.bool,
+      rippleCentered: _react2.default.PropTypes.bool,
+      rippleClassName: _react2.default.PropTypes.string,
+      rippleSpread: _react2.default.PropTypes.number,
+      theme: _react2.default.PropTypes.shape({
+        ripple: _react2.default.PropTypes.string,
+        rippleActive: _react2.default.PropTypes.string,
+        rippleRestarting: _react2.default.PropTypes.string,
+        rippleWrapper: _react2.default.PropTypes.string
+      })
+    };
+    RippledComponent.defaultProps = {
+      disabled: false,
+      ripple: true,
+      rippleCentered: defaultCentered,
+      rippleClassName: defaultClassName,
+      rippleSpread: defaultSpread
+    };
+
+
+    return (0, _reactCssThemr.themr)(_identifiers.RIPPLE, defaultTheme)(RippledComponent);
+  };
+};
+
+exports.default = rippleFactory;
\ No newline at end of file
diff --git a/lib/ripple/_config.scss b/lib/ripple/_config.scss
new file mode 100644
index 000000000..8c26b6f10
--- /dev/null
+++ b/lib/ripple/_config.scss
@@ -0,0 +1,3 @@
+$ripple-duration: 800ms !default;
+$ripple-final-opacity: .3 !default;
+$ripple-size: 15 * $unit !default;
diff --git a/lib/ripple/index.js b/lib/ripple/index.js
new file mode 100644
index 000000000..a63d64d47
--- /dev/null
+++ b/lib/ripple/index.js
@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _Ripple = require('./Ripple.js');
+
+var _Ripple2 = _interopRequireDefault(_Ripple);
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = function (options) {
+  return (0, _Ripple2.default)(_extends({}, options, { theme: _theme2.default }));
+};
\ No newline at end of file
diff --git a/lib/ripple/theme.scss b/lib/ripple/theme.scss
new file mode 100644
index 000000000..90be70f54
--- /dev/null
+++ b/lib/ripple/theme.scss
@@ -0,0 +1,40 @@
+@import "http://github.com/base";
+@import "http://github.com/config";
+
+%ripple {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: $z-index-high;
+  pointer-events: none;
+  background-color: currentColor;
+  border-radius: 50%;
+  transform-origin: 50% 50%;
+}
+
+.rippleWrapper {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $z-index-normal;
+  pointer-events: none;
+}
+
+.ripple {
+  @extend %ripple;
+  transition-duration: $ripple-duration;
+  &.rippleRestarting {
+    opacity: $ripple-final-opacity;
+    transition-property: none;
+  }
+  &.rippleActive {
+    opacity: $ripple-final-opacity;
+    transition-property: transform;
+  }
+  &:not(.rippleActive):not(.rippleRestarting) {
+    opacity: 0;
+    transition-property: opacity, transform;
+  }
+}
diff --git a/lib/slider/Slider.js b/lib/slider/Slider.js
new file mode 100644
index 000000000..917c7f1b3
--- /dev/null
+++ b/lib/slider/Slider.js
@@ -0,0 +1,378 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Slider = exports.sliderFactory = undefined;
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactDom = require('react-dom');
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _events = require('../utils/events.js');
+
+var _events2 = _interopRequireDefault(_events);
+
+var _prefixer = require('../utils/prefixer.js');
+
+var _prefixer2 = _interopRequireDefault(_prefixer);
+
+var _utils = require('../utils/utils.js');
+
+var _utils2 = _interopRequireDefault(_utils);
+
+var _ProgressBar = require('../progress_bar/ProgressBar.js');
+
+var _ProgressBar2 = _interopRequireDefault(_ProgressBar);
+
+var _Input = require('../input/Input.js');
+
+var _Input2 = _interopRequireDefault(_Input);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(ProgressBar, Input) {
+  var Slider = function (_Component) {
+    _inherits(Slider, _Component);
+
+    function Slider() {
+      var _Object$getPrototypeO;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, Slider);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Slider)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+        inputFocused: false,
+        inputValue: null,
+        sliderLength: 0,
+        sliderStart: 0
+      }, _this.handleInputFocus = function () {
+        _this.setState({
+          inputFocused: true,
+          inputValue: _this.valueForInput(_this.props.value)
+        });
+      }, _this.handleInputChange = function (value) {
+        _this.setState({ inputValue: value });
+      }, _this.handleInputBlur = function (event) {
+        var value = _this.state.inputValue || 0;
+        _this.setState({ inputFocused: false, inputValue: null }, function () {
+          _this.props.onChange(_this.trimValue(value), event);
+        });
+      }, _this.handleKeyDown = function (event) {
+        if ([13, 27].indexOf(event.keyCode) !== -1) {
+          _this.refs.input.blur();
+          _reactDom2.default.findDOMNode(_this).blur();
+        }
+        if (event.keyCode === 38) _this.addToValue(_this.props.step);
+        if (event.keyCode === 40) _this.addToValue(-_this.props.step);
+      }, _this.handleMouseDown = function (event) {
+        if (_this.state.inputFocused) _this.refs.input.blur();
+        _events2.default.addEventsToDocument(_this.getMouseEventMap());
+        _this.start(_events2.default.getMousePosition(event));
+        _events2.default.pauseEvent(event);
+      }, _this.handleMouseMove = function (event) {
+        _events2.default.pauseEvent(event);
+        _this.move(_events2.default.getMousePosition(event));
+      }, _this.handleMouseUp = function () {
+        _this.end(_this.getMouseEventMap());
+      }, _this.handleResize = function (event, callback) {
+        var _ReactDOM$findDOMNode = _reactDom2.default.findDOMNode(_this.refs.progressbar).getBoundingClientRect();
+
+        var left = _ReactDOM$findDOMNode.left;
+        var right = _ReactDOM$findDOMNode.right;
+
+        var cb = callback || function () {};
+        _this.setState({ sliderStart: left, sliderLength: right - left }, cb);
+      }, _this.handleSliderBlur = function () {
+        _events2.default.removeEventsFromDocument(_this.getKeyboardEvents());
+      }, _this.handleSliderFocus = function () {
+        _events2.default.addEventsToDocument(_this.getKeyboardEvents());
+      }, _this.handleTouchEnd = function () {
+        _this.end(_this.getTouchEventMap());
+      }, _this.handleTouchMove = function (event) {
+        _this.move(_events2.default.getTouchPosition(event));
+      }, _this.handleTouchStart = function (event) {
+        if (_this.state.inputFocused) _this.refs.input.blur();
+        _this.start(_events2.default.getTouchPosition(event));
+        _events2.default.addEventsToDocument(_this.getTouchEventMap());
+        _events2.default.pauseEvent(event);
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(Slider, [{
+      key: 'componentDidMount',
+      value: function componentDidMount() {
+        window.addEventListener('resize', this.handleResize);
+        this.handleResize();
+      }
+    }, {
+      key: 'shouldComponentUpdate',
+      value: function shouldComponentUpdate(nextProps, nextState) {
+        if (!this.state.inputFocused && nextState.inputFocused) return false;
+        if (this.state.inputFocused && this.props.value !== nextProps.value) {
+          this.setState({ inputValue: this.valueForInput(nextProps.value) });
+          return false;
+        }
+        return true;
+      }
+    }, {
+      key: 'componentWillUnmount',
+      value: function componentWillUnmount() {
+        window.removeEventListener('resize', this.handleResize);
+        _events2.default.removeEventsFromDocument(this.getMouseEventMap());
+        _events2.default.removeEventsFromDocument(this.getTouchEventMap());
+        _events2.default.removeEventsFromDocument(this.getKeyboardEvents());
+      }
+    }, {
+      key: 'addToValue',
+      value: function addToValue(increment) {
+        var value = this.state.inputFocused ? parseFloat(this.state.inputValue) : this.props.value;
+        value = this.trimValue(value + increment);
+        if (value !== this.props.value) this.props.onChange(value);
+      }
+    }, {
+      key: 'getKeyboardEvents',
+      value: function getKeyboardEvents() {
+        return {
+          keydown: this.handleKeyDown
+        };
+      }
+    }, {
+      key: 'getMouseEventMap',
+      value: function getMouseEventMap() {
+        return {
+          mousemove: this.handleMouseMove,
+          mouseup: this.handleMouseUp
+        };
+      }
+    }, {
+      key: 'getTouchEventMap',
+      value: function getTouchEventMap() {
+        return {
+          touchmove: this.handleTouchMove,
+          touchend: this.handleTouchEnd
+        };
+      }
+    }, {
+      key: 'end',
+      value: function end(revents) {
+        _events2.default.removeEventsFromDocument(revents);
+        this.setState({ pressed: false });
+      }
+    }, {
+      key: 'knobOffset',
+      value: function knobOffset() {
+        var _props = this.props;
+        var max = _props.max;
+        var min = _props.min;
+
+        return this.state.sliderLength * (this.props.value - min) / (max - min);
+      }
+    }, {
+      key: 'move',
+      value: function move(position) {
+        var newValue = this.positionToValue(position);
+        if (newValue !== this.props.value) this.props.onChange(newValue);
+      }
+    }, {
+      key: 'positionToValue',
+      value: function positionToValue(position) {
+        var _state = this.state;
+        var start = _state.sliderStart;
+        var length = _state.sliderLength;
+        var _props2 = this.props;
+        var max = _props2.max;
+        var min = _props2.min;
+
+        return this.trimValue((position.x - start) / length * (max - min) + min);
+      }
+    }, {
+      key: 'start',
+      value: function start(position) {
+        var _this2 = this;
+
+        this.handleResize(null, function () {
+          _this2.setState({ pressed: true });
+          _this2.props.onChange(_this2.positionToValue(position));
+        });
+      }
+    }, {
+      key: 'stepDecimals',
+      value: function stepDecimals() {
+        return (this.props.step.toString().split('.')[1] || []).length;
+      }
+    }, {
+      key: 'trimValue',
+      value: function trimValue(value) {
+        if (value < this.props.min) return this.props.min;
+        if (value > this.props.max) return this.props.max;
+        return _utils2.default.round(value, this.stepDecimals());
+      }
+    }, {
+      key: 'valueForInput',
+      value: function valueForInput(value) {
+        var decimals = this.stepDecimals();
+        return decimals > 0 ? value.toFixed(decimals) : value.toString();
+      }
+    }, {
+      key: 'renderSnaps',
+      value: function renderSnaps() {
+        var _this3 = this;
+
+        if (this.props.snaps) {
+          return _react2.default.createElement(
+            'div',
+            { ref: 'snaps', className: this.props.theme.snaps },
+            _utils2.default.range(0, (this.props.max - this.props.min) / this.props.step).map(function (i) {
+              return _react2.default.createElement('div', { key: 'span-' + i, className: _this3.props.theme.snap });
+            })
+          );
+        }
+      }
+    }, {
+      key: 'renderInput',
+      value: function renderInput() {
+        if (this.props.editable) {
+          var value = this.state.inputFocused ? this.state.inputValue : this.valueForInput(this.props.value);
+          return _react2.default.createElement(Input, {
+            ref: 'input',
+            className: this.props.theme.input,
+            onFocus: this.handleInputFocus,
+            onChange: this.handleInputChange,
+            onBlur: this.handleInputBlur,
+            value: value
+          });
+        }
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _classnames;
+
+        var theme = this.props.theme;
+
+        var knobStyles = (0, _prefixer2.default)({ transform: 'translateX(' + this.knobOffset() + 'px)' });
+        var className = (0, _classnames3.default)(theme.slider, (_classnames = {}, _defineProperty(_classnames, theme.editable, this.props.editable), _defineProperty(_classnames, theme.pinned, this.props.pinned), _defineProperty(_classnames, theme.pressed, this.state.pressed), _defineProperty(_classnames, theme.ring, this.props.value === this.props.min), _classnames), this.props.className);
+
+        return _react2.default.createElement(
+          'div',
+          {
+            className: className,
+            'data-react-toolbox': 'slider',
+            onBlur: this.handleSliderBlur,
+            onFocus: this.handleSliderFocus,
+            tabIndex: '0'
+          },
+          _react2.default.createElement(
+            'div',
+            {
+              ref: 'slider',
+              className: theme.container,
+              onMouseDown: this.handleMouseDown,
+              onTouchStart: this.handleTouchStart
+            },
+            _react2.default.createElement(
+              'div',
+              {
+                ref: 'knob',
+                className: theme.knob,
+                onMouseDown: this.handleMouseDown,
+                onTouchStart: this.handleTouchStart,
+                style: knobStyles
+              },
+              _react2.default.createElement('div', { className: theme.innerknob, 'data-value': parseInt(this.props.value) })
+            ),
+            _react2.default.createElement(
+              'div',
+              { className: theme.progress },
+              _react2.default.createElement(ProgressBar, {
+                ref: 'progressbar',
+                className: theme.innerprogress,
+                max: this.props.max,
+                min: this.props.min,
+                mode: 'determinate',
+                value: this.props.value
+              }),
+              this.renderSnaps()
+            )
+          ),
+          this.renderInput()
+        );
+      }
+    }]);
+
+    return Slider;
+  }(_react.Component);
+
+  Slider.propTypes = {
+    className: _react.PropTypes.string,
+    editable: _react.PropTypes.bool,
+    max: _react.PropTypes.number,
+    min: _react.PropTypes.number,
+    onChange: _react.PropTypes.func,
+    pinned: _react.PropTypes.bool,
+    snaps: _react.PropTypes.bool,
+    step: _react.PropTypes.number,
+    theme: _react.PropTypes.shape({
+      container: _react.PropTypes.string,
+      editable: _react.PropTypes.string,
+      innerknob: _react.PropTypes.string,
+      innerprogress: _react.PropTypes.string,
+      input: _react.PropTypes.string,
+      knob: _react.PropTypes.string,
+      pinned: _react.PropTypes.string,
+      pressed: _react.PropTypes.string,
+      progress: _react.PropTypes.string,
+      ring: _react.PropTypes.string,
+      slider: _react.PropTypes.string,
+      snap: _react.PropTypes.string,
+      snaps: _react.PropTypes.string
+    }),
+    value: _react.PropTypes.number
+  };
+  Slider.defaultProps = {
+    className: '',
+    editable: false,
+    max: 100,
+    min: 0,
+    pinned: false,
+    snaps: false,
+    step: 0.01,
+    value: 0
+  };
+
+
+  return Slider;
+};
+
+var Slider = factory(_ProgressBar2.default, _Input2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.SLIDER)(Slider);
+exports.sliderFactory = factory;
+exports.Slider = Slider;
\ No newline at end of file
diff --git a/lib/slider/__tests__/index.spec.js b/lib/slider/__tests__/index.spec.js
new file mode 100644
index 000000000..92507525b
--- /dev/null
+++ b/lib/slider/__tests__/index.spec.js
@@ -0,0 +1,202 @@
+'use strict';
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactAddonsTestUtils = require('react-addons-test-utils');
+
+var _reactAddonsTestUtils2 = _interopRequireDefault(_reactAddonsTestUtils);
+
+var _sinon = require('sinon');
+
+var _sinon2 = _interopRequireDefault(_sinon);
+
+var _expect = require('expect');
+
+var _expect2 = _interopRequireDefault(_expect);
+
+var _ProgressBar = require('../../progress_bar/ProgressBar.js');
+
+var _Input = require('../../input/Input.js');
+
+var _Input2 = _interopRequireDefault(_Input);
+
+var _Slider = require('../Slider.js');
+
+var _Slider2 = _interopRequireDefault(_Slider);
+
+var _testing = require('../../utils/testing');
+
+var _testing2 = _interopRequireDefault(_testing);
+
+var _theme = require('../theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('Slider', function () {
+  var slider = void 0,
+      progress = void 0,
+      input = void 0,
+      onChange = void 0;
+
+  describe('#positionToValue', function () {
+    before(function () {
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { min: -500, max: 500 }));
+      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
+      slider.setState({ sliderStart: 500, sliderLength: 100 });
+    });
+
+    it('returns min when position is less than origin', function () {
+      (0, _expect2.default)(slider.positionToValue({ x: 400 })).toEqual(-500);
+    });
+
+    it('returns max when position is more and origin plus length', function () {
+      (0, _expect2.default)(slider.positionToValue({ x: 900 })).toEqual(500);
+    });
+
+    it('returns the proper position when the position is inside slider', function () {
+      (0, _expect2.default)(slider.positionToValue({ x: 520 })).toEqual(-300);
+    });
+  });
+
+  describe('#trimValue', function () {
+    before(function () {
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { min: 0, max: 100, step: 0.1 }));
+      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
+    });
+
+    it('rounds to the proper number', function () {
+      (0, _expect2.default)(slider.trimValue(57.16)).toEqual(57.2);
+      (0, _expect2.default)(slider.trimValue(57.12)).toEqual(57.10);
+    });
+
+    it('returns min if number is less than min', function () {
+      (0, _expect2.default)(slider.trimValue(-57.16)).toEqual(0);
+    });
+
+    it('returns max if number is more than max', function () {
+      (0, _expect2.default)(slider.trimValue(257.16)).toEqual(100);
+    });
+  });
+
+  describe('#valueForInput', function () {
+    before(function () {
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { min: 0, max: 100, step: 0.01 }));
+      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
+    });
+
+    it('returns a fixed number when an integer is given', function () {
+      (0, _expect2.default)(slider.valueForInput(4)).toEqual('4.00');
+    });
+
+    it('returns a fixed number when a float is given', function () {
+      (0, _expect2.default)(slider.valueForInput(4.06)).toEqual('4.06');
+    });
+  });
+
+  describe('#knobOffset', function () {
+    it('returns the corresponding offset for a given value and slider length/start', function () {
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { min: -500, max: 500, value: -250 }));
+      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
+      slider.setState({ sliderStart: 500, sliderLength: 100 });
+      (0, _expect2.default)(slider.knobOffset()).toEqual(25);
+    });
+  });
+
+  describe('#render', function () {
+    it('contains a linear progress bar with proper properties', function () {
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { min: 100, max: 1000, value: 140 }));
+      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
+      progress = _reactAddonsTestUtils2.default.findRenderedComponentWithType(slider, _ProgressBar.ProgressBar);
+      (0, _expect2.default)(progress.props.mode).toEqual('determinate');
+      (0, _expect2.default)(progress.props.type).toEqual('linear');
+      (0, _expect2.default)(progress.props.value).toEqual(140);
+      (0, _expect2.default)(progress.props.min).toEqual(100);
+      (0, _expect2.default)(progress.props.max).toEqual(1000);
+    });
+
+    it('contains an input component if its editable', function () {
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { editable: true, value: 130 }));
+      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
+      input = _reactAddonsTestUtils2.default.findRenderedComponentWithType(slider, _Input2.default);
+      (0, _expect2.default)(parseInt(input.props.value)).toEqual(slider.props.value);
+    });
+
+    it('contains the proper number of snaps when snapped', function () {
+      slider = _testing2.default.shallowRenderComponent(_Slider.Slider, { editable: true, pinned: true, theme: _theme2.default });
+      (0, _expect2.default)(slider.props.className).toContain(_theme2.default.ring);
+      (0, _expect2.default)(slider.props.className).toContain(_theme2.default.pinned);
+      slider = _testing2.default.shallowRenderComponent(_Slider.Slider, { editable: true, value: 50, theme: _theme2.default });
+      (0, _expect2.default)(slider.props.className).toNotContain(_theme2.default.ring);
+    });
+  });
+
+  describe('#events', function () {
+    beforeEach(function () {
+      onChange = _sinon2.default.spy();
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { min: -500, max: 500, onChange: onChange }));
+      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
+      slider.setState({ sliderStart: 0, sliderLength: 1000 });
+      slider.handleResize = function (event, callback) {
+        callback();
+      };
+    });
+
+    it('sets pressed state when knob is clicked', function () {
+      _reactAddonsTestUtils2.default.Simulate.mouseDown(slider.refs.knob);
+      (0, _expect2.default)(slider.state.pressed).toEqual(true);
+    });
+
+    it('sets pressed state when knob is touched', function () {
+      _reactAddonsTestUtils2.default.Simulate.touchStart(slider.refs.knob, { touches: [{ pageX: 200 }] });
+      (0, _expect2.default)(slider.state.pressed).toEqual(true);
+    });
+
+    it('sets a proper value when the slider is clicked', function () {
+      _reactAddonsTestUtils2.default.Simulate.mouseDown(slider.refs.slider, { pageX: 200 });
+      (0, _expect2.default)(onChange.called).toEqual(true);
+      (0, _expect2.default)(onChange.getCall(0).args[0]).toEqual(-300);
+    });
+
+    it('sets a proper value when the slider is touched', function () {
+      _reactAddonsTestUtils2.default.Simulate.touchStart(slider.refs.slider, { touches: [{ pageX: 200, pageY: 0 }] });
+      (0, _expect2.default)(onChange.called).toEqual(true);
+      (0, _expect2.default)(onChange.getCall(0).args[0]).toEqual(-300);
+    });
+
+    it('changes input value when slider changes', function () {
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { editable: true, onChange: onChange }));
+      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
+      slider.setState({ sliderStart: 0, sliderLength: 1000 });
+      slider.handleResize = function (event, callback) {
+        callback();
+      };
+      input = _reactAddonsTestUtils2.default.findRenderedComponentWithType(slider, _Input2.default);
+      _reactAddonsTestUtils2.default.Simulate.mouseDown(slider.refs.slider, { pageX: 900 });
+      (0, _expect2.default)(onChange.called).toEqual(true);
+      (0, _expect2.default)(onChange.getCall(0).args[0]).toEqual(90);
+    });
+
+    it('changes its value when input is blurred', function () {
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { editable: true, value: 50, onChange: onChange }));
+      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
+      input = _reactAddonsTestUtils2.default.findRenderedComponentWithType(slider, _Input.Input);
+      _reactAddonsTestUtils2.default.Simulate.change(input.refs.input, { target: { value: '80' } });
+      _reactAddonsTestUtils2.default.Simulate.blur(input.refs.input);
+      (0, _expect2.default)(onChange.called).toEqual(true);
+      (0, _expect2.default)(onChange.getCall(0).args[0]).toEqual(80);
+    });
+
+    it('calls onChange callback when the value is changed', function () {
+      var onChangeSpy = _sinon2.default.spy();
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { onChange: onChangeSpy }));
+      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
+      slider.setState({ sliderStart: 0, sliderLength: 1000 });
+      _reactAddonsTestUtils2.default.Simulate.mouseDown(slider.refs.slider, { pageX: 900 });
+      (0, _expect2.default)(onChangeSpy.called).toEqual(true);
+    });
+  });
+});
\ No newline at end of file
diff --git a/lib/slider/_config.scss b/lib/slider/_config.scss
new file mode 100644
index 000000000..a5b0799b2
--- /dev/null
+++ b/lib/slider/_config.scss
@@ -0,0 +1,12 @@
+$slider-main-color: $color-primary !default;
+$slider-main-color-contrast: $color-primary-contrast !default;
+$slider-snap-color: $color-black !default;
+$slider-knob-size: 3.2 * $unit !default;
+$slider-inner-knob-size: 1.2 * $unit !default;
+$slider-snap-size: .2 * $unit !default;
+$slider-input-width: 5 * $unit !default;
+$slider-bar-height: .2 * $unit !default;
+$slider-pin-size: 2.6 * $unit !default;
+$slider-pin-elevation: 1.7 * $unit !default;
+$slider-side-separation: 1 * $unit !default;
+$slider-empty-knob-border: .2 * $unit !default;
diff --git a/lib/slider/index.js b/lib/slider/index.js
new file mode 100644
index 000000000..ddcc2d7f2
--- /dev/null
+++ b/lib/slider/index.js
@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Slider = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _progress_bar = require('../progress_bar');
+
+var _input = require('../input');
+
+var _Slider = require('./Slider.js');
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ThemedSlider = (0, _reactCssThemr.themr)(_identifiers.SLIDER, _theme2.default)((0, _Slider.sliderFactory)(_progress_bar.ProgressBar, _input.Input));
+exports.default = ThemedSlider;
+exports.Slider = ThemedSlider;
\ No newline at end of file
diff --git a/lib/slider/theme.scss b/lib/slider/theme.scss
new file mode 100644
index 000000000..895b6e3d7
--- /dev/null
+++ b/lib/slider/theme.scss
@@ -0,0 +1,191 @@
+@import "http://github.com/base";
+@import "http://github.com/config";
+
+.container {
+  position: relative;
+  width: calc(100% - #{$slider-knob-size});
+  height: $slider-knob-size;
+  margin-right: $slider-knob-size;
+  user-select: none;
+  &:not(:last-child) {
+    margin-right: $slider-side-separation + $slider-knob-size;
+  }
+  &:not(:first-child) {
+    margin-left: $slider-side-separation;
+  }
+}
+
+.knob {
+  position: relative;
+  top: 0;
+  left: 0;
+  z-index: $z-index-higher;
+  display: flex;
+  width: $slider-knob-size;
+  height: $slider-knob-size;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+}
+
+.innerknob {
+  z-index: $z-index-high;
+  width: $slider-inner-knob-size;
+  height: $slider-inner-knob-size;
+  background-color: $slider-main-color;
+  border-radius: 50%;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: .1s;
+  transition-property: height, width, background-color, border;
+}
+
+.snaps {
+  position: absolute;
+  top: $slider-knob-size / 2 - $slider-snap-size / 2;
+  left: 0;
+  display: flex;
+  width: calc(100% + #{$slider-snap-size});
+  height: $slider-snap-size;
+  flex-direction: row;
+  pointer-events: none;
+  &:after {
+    display: block;
+    width: $slider-snap-size;
+    height: $slider-snap-size;
+    content: "";
+    background-color: $slider-snap-color;
+    border-radius: 50%;
+  }
+}
+
+.snap {
+  flex: 1;
+  &:after {
+    display: block;
+    width: $slider-snap-size;
+    height: $slider-snap-size;
+    content: "";
+    background-color: $slider-snap-color;
+    border-radius: 50%;
+  }
+}
+
+.input {
+  width: $slider-input-width;
+  padding: 0;
+  margin-bottom: 0;
+  > input {
+    text-align: center;
+  }
+}
+
+.progress {
+  position: absolute;
+  top: 0;
+  left: $slider-knob-size / 2;
+  width: 100%;
+  height: 100%;
+  .innerprogress {
+    position: absolute;
+    top: $slider-knob-size / 2 - $slider-bar-height / 2;
+    height: $slider-bar-height;
+    [data-ref="value"] {
+      transition-duration: 0s;
+    }
+  }
+}
+
+.slider {
+  &:focus .knob:before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: $z-index-normal;
+    content: "";
+    background-color: $slider-main-color;
+    border-radius: 50%;
+    opacity: .26;
+  }
+  &.editable {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  &.pinned .innerknob {
+    &:before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: $slider-pin-size;
+      height: $slider-pin-size;
+      margin-left: ($slider-knob-size - $slider-pin-size) / 2;
+      content: "";
+      background-color: $slider-main-color;
+      border-radius: 50% 50% 50% 0;
+      transition: transform .2s ease, background-color .18s ease;
+      transform: rotate(-45deg) scale(0) translate(0);
+    }
+    &:after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: $slider-knob-size;
+      height: $slider-pin-size;
+      font-size: 10px;
+      color: $color-background;
+      text-align: center;
+      content: attr(data-value);
+      transition: transform .2s ease, background-color .18s ease;
+      transform: scale(0) translate(0);
+    }
+  }
+  &.pressed {
+    &.pinned .innerknob {
+      &:before {
+        transition-delay: 100ms;
+        transform: rotate(-45deg) scale(1) translate($slider-pin-elevation, - $slider-pin-elevation);
+      }
+      &:after {
+        transition-delay: 100ms;
+        transform: scale(1) translate(0, - $slider-pin-elevation);
+      }
+    }
+    &:not(.pinned) {
+      &.ring .progress {
+        left: $slider-knob-size / 2 + ($slider-knob-size - $slider-empty-knob-border * 2) / 2;
+        width: calc(100% - #{($slider-knob-size - $slider-empty-knob-border * 2) / 2});
+      }
+      .innerknob {
+        width: 100%;
+        height: 100%;
+        transform: translateZ(0);
+      }
+    }
+  }
+  &.ring {
+    .innerknob {
+      background-color: transparent;
+      border: $slider-empty-knob-border solid $color-divider;
+      &:before {
+        background-color: $slider-main-color;
+      }
+    }
+    .progress {
+      left: $slider-knob-size / 2 + $slider-empty-knob-border * 2;
+      width: calc(100% - #{$slider-empty-knob-border * 2});
+      transition: left .18s ease, width .18s ease;
+    }
+    &.pinned {
+      .innerknob {
+        background-color: $color-background;
+      }
+      .progress {
+        left: $slider-knob-size / 2;
+        width: calc(100%);
+      }
+    }
+  }
+}
diff --git a/lib/snackbar/Snackbar.js b/lib/snackbar/Snackbar.js
new file mode 100644
index 000000000..8795dfe17
--- /dev/null
+++ b/lib/snackbar/Snackbar.js
@@ -0,0 +1,135 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Snackbar = exports.snackbarFactory = undefined;
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _ActivableRenderer = require('../hoc/ActivableRenderer.js');
+
+var _ActivableRenderer2 = _interopRequireDefault(_ActivableRenderer);
+
+var _FontIcon = require('../font_icon/FontIcon.js');
+
+var _FontIcon2 = _interopRequireDefault(_FontIcon);
+
+var _Overlay = require('../overlay/Overlay.js');
+
+var _Overlay2 = _interopRequireDefault(_Overlay);
+
+var _Button = require('../button/Button.js');
+
+var _Button2 = _interopRequireDefault(_Button);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(Overlay, Button) {
+  var Snackbar = function (_Component) {
+    _inherits(Snackbar, _Component);
+
+    function Snackbar() {
+      _classCallCheck(this, Snackbar);
+
+      return _possibleConstructorReturn(this, Object.getPrototypeOf(Snackbar).apply(this, arguments));
+    }
+
+    _createClass(Snackbar, [{
+      key: 'componentWillReceiveProps',
+      value: function componentWillReceiveProps(nextProps) {
+        var _this2 = this;
+
+        if (nextProps.active && nextProps.timeout) {
+          if (this.curTimeout) clearTimeout(this.curTimeout);
+          this.curTimeout = setTimeout(function () {
+            nextProps.onTimeout();
+            _this2.curTimeout = null;
+          }, nextProps.timeout);
+        }
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _props = this.props;
+        var action = _props.action;
+        var active = _props.active;
+        var icon = _props.icon;
+        var label = _props.label;
+        var onClick = _props.onClick;
+        var theme = _props.theme;
+        var type = _props.type;
+
+        var className = (0, _classnames3.default)([theme.snackbar, theme[type]], _defineProperty({}, theme.active, active), this.props.className);
+
+        return _react2.default.createElement(
+          Overlay,
+          { invisible: true },
+          _react2.default.createElement(
+            'div',
+            { 'data-react-toolbox': 'snackbar', className: className },
+            icon ? _react2.default.createElement(_FontIcon2.default, { value: icon, className: theme.icon }) : null,
+            _react2.default.createElement(
+              'span',
+              { className: theme.label },
+              label
+            ),
+            action ? _react2.default.createElement(Button, { className: theme.button, label: action, onClick: onClick }) : null
+          )
+        );
+      }
+    }]);
+
+    return Snackbar;
+  }(_react.Component);
+
+  Snackbar.propTypes = {
+    action: _react.PropTypes.string,
+    active: _react.PropTypes.bool,
+    className: _react.PropTypes.string,
+    icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    label: _react.PropTypes.string.isRequired,
+    onClick: _react.PropTypes.func,
+    onTimeout: _react.PropTypes.func,
+    theme: _react.PropTypes.shape({
+      accept: _react.PropTypes.string,
+      active: _react.PropTypes.string,
+      button: _react.PropTypes.string,
+      cancel: _react.PropTypes.string,
+      icon: _react.PropTypes.string,
+      label: _react.PropTypes.string,
+      snackbar: _react.PropTypes.string,
+      warning: _react.PropTypes.string
+    }),
+    timeout: _react.PropTypes.number,
+    type: _react.PropTypes.oneOf(['accept', 'cancel', 'warning'])
+  };
+
+
+  return (0, _ActivableRenderer2.default)()(Snackbar);
+};
+
+var Snackbar = factory(_Overlay2.default, _Button2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.SNACKBAR)(Snackbar);
+exports.snackbarFactory = factory;
+exports.Snackbar = Snackbar;
\ No newline at end of file
diff --git a/lib/snackbar/_config.scss b/lib/snackbar/_config.scss
new file mode 100644
index 000000000..69f7cdf50
--- /dev/null
+++ b/lib/snackbar/_config.scss
@@ -0,0 +1,9 @@
+$snackbar-color-cancel: $palette-red-500 !default;
+$snackbar-color-accept: $palette-green-500 !default;
+$snackbar-color-warning: $palette-lime-a200 !default;
+$snackbar-background-color: $color-text !default;
+$snackbar-border-radius: .2 * $unit !default;
+$snackbar-button-offset: 4.8 * $unit !default;
+$snackbar-color: $color-white !default;
+$snackbar-horizontal-offset: 2.4 * $unit !default;
+$snackbar-vertical-offset: 1.4 * $unit !default;
diff --git a/lib/snackbar/index.js b/lib/snackbar/index.js
new file mode 100644
index 000000000..4af5c61fd
--- /dev/null
+++ b/lib/snackbar/index.js
@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Snackbar = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Snackbar = require('./Snackbar.js');
+
+var _overlay = require('../overlay');
+
+var _button = require('../button');
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ThemedSnackbar = (0, _reactCssThemr.themr)(_identifiers.SNACKBAR, _theme2.default)((0, _Snackbar.snackbarFactory)(_overlay.Overlay, _button.Button));
+
+exports.default = ThemedSnackbar;
+exports.Snackbar = ThemedSnackbar;
\ No newline at end of file
diff --git a/lib/snackbar/theme.scss b/lib/snackbar/theme.scss
new file mode 100644
index 000000000..0ebb89c25
--- /dev/null
+++ b/lib/snackbar/theme.scss
@@ -0,0 +1,51 @@
+@import "http://github.com/base";
+@import "http://github.com/config";
+
+.snackbar {
+  position: fixed;
+  right: $snackbar-horizontal-offset;
+  bottom: 0;
+  left: $snackbar-horizontal-offset;
+  z-index: $z-index-higher;
+  display: flex;
+  align-items: center;
+  padding: $snackbar-vertical-offset $snackbar-horizontal-offset;
+  margin: 0 auto;
+  margin-top: $snackbar-vertical-offset;
+  color: $snackbar-color;
+  background-color: $snackbar-background-color;
+  border-radius: $snackbar-border-radius;
+  transition: all $animation-duration $animation-curve-default $animation-duration;
+  &.accept .button {
+    color: $snackbar-color-accept;
+  }
+  &.warning .button {
+    color: $snackbar-color-warning;
+  }
+  &.cancel .button {
+    color: $snackbar-color-cancel;
+  }
+  &:not(.active) {
+    transform: translateY(100%);
+  }
+  &.active {
+    transform: translateY(0%);
+  }
+}
+
+.icon {
+  margin-right: $snackbar-vertical-offset;
+}
+
+.label {
+  flex-grow: 1;
+  font-size: $font-size-small;
+}
+
+.button {
+  min-width: inherit;
+  margin-top: - $snackbar-vertical-offset / 2;
+  margin-right: - $snackbar-horizontal-offset / 2;
+  margin-bottom: - $snackbar-vertical-offset / 2;
+  margin-left: $snackbar-button-offset;
+}
diff --git a/lib/switch/Switch.js b/lib/switch/Switch.js
new file mode 100644
index 000000000..96ad9977a
--- /dev/null
+++ b/lib/switch/Switch.js
@@ -0,0 +1,152 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Switch = exports.switchFactory = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Ripple = require('../ripple/Ripple.js');
+
+var _Ripple2 = _interopRequireDefault(_Ripple);
+
+var _Thumb = require('./Thumb.js');
+
+var _Thumb2 = _interopRequireDefault(_Thumb);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(Thumb) {
+  var Switch = function (_Component) {
+    _inherits(Switch, _Component);
+
+    function Switch() {
+      var _Object$getPrototypeO;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, Switch);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Switch)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleToggle = function (event) {
+        if (event.pageX !== 0 && event.pageY !== 0) _this.blur();
+        if (!_this.props.disabled && _this.props.onChange) {
+          _this.props.onChange(!_this.props.checked, event);
+        }
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(Switch, [{
+      key: 'blur',
+      value: function blur() {
+        this.refs.input.blur();
+      }
+    }, {
+      key: 'focus',
+      value: function focus() {
+        this.refs.input.focus();
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _props = this.props;
+        var className = _props.className;
+        var checked = _props.checked;
+        var disabled = _props.disabled;
+        var onChange = _props.onChange;
+        var theme = _props.theme;
+
+        var others = _objectWithoutProperties(_props, ['className', 'checked', 'disabled', 'onChange', 'theme']); //eslint-disable-line no-unused-vars
+
+
+        var _className = (0, _classnames2.default)(theme[disabled ? 'disabled' : 'field'], className);
+        return _react2.default.createElement(
+          'label',
+          { 'data-react-toolbox': 'switch', className: _className },
+          _react2.default.createElement('input', _extends({}, others, {
+            checked: this.props.checked,
+            className: theme.input,
+            onClick: this.handleToggle,
+            readOnly: true,
+            ref: 'input',
+            type: 'checkbox'
+          })),
+          _react2.default.createElement(
+            'span',
+            { className: theme[checked ? 'on' : 'off'] },
+            _react2.default.createElement(Thumb, { disabled: this.props.disabled, theme: theme })
+          ),
+          this.props.label ? _react2.default.createElement(
+            'span',
+            { className: theme.text },
+            this.props.label
+          ) : null
+        );
+      }
+    }]);
+
+    return Switch;
+  }(_react.Component);
+
+  Switch.propTypes = {
+    checked: _react.PropTypes.bool,
+    className: _react.PropTypes.string,
+    disabled: _react.PropTypes.bool,
+    label: _react.PropTypes.string,
+    name: _react.PropTypes.string,
+    onBlur: _react.PropTypes.func,
+    onChange: _react.PropTypes.func,
+    onFocus: _react.PropTypes.func,
+    theme: _react.PropTypes.shape({
+      disabled: _react.PropTypes.string,
+      field: _react.PropTypes.string,
+      input: _react.PropTypes.string,
+      off: _react.PropTypes.string,
+      on: _react.PropTypes.string,
+      ripple: _react.PropTypes.string,
+      text: _react.PropTypes.string,
+      thumb: _react.PropTypes.string
+    })
+  };
+  Switch.defaultProps = {
+    checked: false,
+    className: '',
+    disabled: false
+  };
+
+
+  return Switch;
+};
+
+var Thumb = (0, _Thumb2.default)((0, _Ripple2.default)({ centered: true, spread: 2.6 }));
+var Switch = factory(Thumb);
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.SWITCH)(Switch);
+exports.switchFactory = factory;
+exports.Switch = Switch;
\ No newline at end of file
diff --git a/lib/switch/Thumb.js b/lib/switch/Thumb.js
new file mode 100644
index 000000000..07af70068
--- /dev/null
+++ b/lib/switch/Thumb.js
@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+var factory = function factory(ripple) {
+  var Thumb = function Thumb(_ref) {
+    var onMouseDown = _ref.onMouseDown;
+    var theme = _ref.theme;
+
+    var other = _objectWithoutProperties(_ref, ['onMouseDown', 'theme']);
+
+    return _react2.default.createElement('span', _extends({ role: 'thumb', className: theme.thumb, onMouseDown: onMouseDown }, other));
+  };
+
+  Thumb.propTypes = {
+    children: _react.PropTypes.any,
+    theme: _react.PropTypes.shape({
+      ripple: _react.PropTypes.string,
+      thumb: _react.PropTypes.string
+    })
+  };
+
+  return ripple(Thumb);
+};
+
+exports.default = factory;
\ No newline at end of file
diff --git a/lib/switch/_config.scss b/lib/switch/_config.scss
new file mode 100644
index 000000000..784084717
--- /dev/null
+++ b/lib/switch/_config.scss
@@ -0,0 +1,22 @@
+$switch-color: $color-primary !default;
+$switch-text-color: $color-black !default;
+$switch-thumb-off-color: $palette-grey-50 !default;
+$switch-track-on-color: rgba($color-primary, 0.5) !default;
+$switch-track-off-color: rgba($color-black, 0.26) !default;
+$switch-off-ripple-color: rgba($color-black, 0.4) !default;
+$switch-on-focus-color: rgba($color-primary, 0.26) !default;
+$switch-off-focus-color: rgba($color-black, 0.1) !default;
+$switch-disabled-thumb-color: $palette-grey-400 !default;
+$switch-disabled-track-color: rgba($color-black, 0.12) !default;
+$switch-disabled-text-color: rgba($color-black, 0.26) !default;
+$switch-total-height: 2.4 * $unit !default;
+$switch-track-length: 3.6 * $unit !default;
+$switch-track-height: 1.4 * $unit !default;
+$switch-thumb-size: 2 * $unit !default;
+$switch-thumb-on-color: $switch-color !default;
+$switch-focus-init-size: .8 * $unit !default;
+$switch-focus-size: $switch-total-height * 2 !default;
+$switch-focus-diff: ($switch-focus-size - $switch-focus-init-size) / 2 !default;
+$switch-ripple-duration: 650ms !default;
+$switch-font-size: $font-size-small !default;
+$switch-field-margin-bottom: 1.5 * $unit !default;
diff --git a/lib/switch/index.js b/lib/switch/index.js
new file mode 100644
index 000000000..6e717b50d
--- /dev/null
+++ b/lib/switch/index.js
@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Switch = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _Switch = require('./Switch.js');
+
+var _identifiers = require('../identifiers.js');
+
+var _Thumb = require('./Thumb.js');
+
+var _Thumb2 = _interopRequireDefault(_Thumb);
+
+var _ripple = require('../ripple');
+
+var _ripple2 = _interopRequireDefault(_ripple);
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var applyTheme = function applyTheme(Component) {
+  return (0, _reactCssThemr.themr)(_identifiers.SWITCH, _theme2.default)(Component);
+};
+var ripple = (0, _ripple2.default)({ centered: true, spread: 2.6 });
+var ThemedThumb = applyTheme((0, _Thumb2.default)(ripple));
+var ThemedSwitch = applyTheme((0, _Switch.switchFactory)(ThemedThumb));
+
+exports.default = ThemedSwitch;
+exports.Switch = ThemedSwitch;
\ No newline at end of file
diff --git a/lib/switch/theme.scss b/lib/switch/theme.scss
new file mode 100644
index 000000000..bc7924c84
--- /dev/null
+++ b/lib/switch/theme.scss
@@ -0,0 +1,121 @@
+@import "http://github.com/base";
+@import "http://github.com/config";
+
+.field {
+  position: relative;
+  display: block;
+  height: $switch-total-height;
+  margin-bottom: $switch-field-margin-bottom;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.text {
+  display: inline-block;
+  padding-left: $unit;
+  font-size: $switch-font-size;
+  line-height: $switch-total-height;
+  color: $switch-text-color;
+  white-space: nowrap;
+  vertical-align: top;
+}
+
+%switch {
+  position: relative;
+  display: inline-block;
+  width: $switch-track-length;
+  height: $switch-track-height;
+  margin-top: ($switch-total-height - $switch-track-height) / 2;
+  vertical-align: top;
+  cursor: pointer;
+  border-radius: $switch-track-height;
+}
+
+.thumb {
+  @include material-animation-default(.28s);
+  position: absolute;
+  top: ($switch-track-height - $switch-thumb-size) / 2;
+  width: $switch-thumb-size;
+  height: $switch-thumb-size;
+  cursor: pointer;
+  border-radius: 50%;
+  transition-property: left;
+
+  .ripple {
+    background-color: $switch-color;
+    opacity: .3;
+    transition-duration: $switch-ripple-duration;
+  }
+}
+
+.on {
+  @extend %switch;
+  background: $switch-track-on-color;
+  .thumb {
+    @include shadow-3dp();
+    left: $switch-track-length - $switch-thumb-size;
+    background: $switch-thumb-on-color;
+  }
+}
+
+.off {
+  @extend %switch;
+  background: $switch-track-off-color;
+  .thumb {
+    @include shadow-2dp();
+    left: 0;
+    background: $switch-thumb-off-color;
+  }
+  .ripple {
+    background: $switch-off-ripple-color;
+  }
+}
+
+%thumb-focus {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  box-sizing: border-box;
+  display: inline-block;
+  width: $switch-focus-init-size;
+  height: $switch-focus-init-size;
+  content: "";
+  background-color: transparent;
+  border-radius: 50%;
+  transform: translate(- $switch-focus-init-size / 2, - $switch-focus-init-size / 2);
+}
+
+.input {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  opacity: 0;
+  &:focus:not(:active) {
+    + .switch-on > .thumb:before {
+      @extend %thumb-focus;
+      background-color: $switch-on-focus-color;
+      box-shadow: 0 0 0 $switch-focus-diff $switch-on-focus-color;
+    }
+    + .switch-off > .thumb:before {
+      @extend %thumb-focus;
+      background-color: $switch-off-focus-color;
+      box-shadow: 0 0 0 $switch-focus-diff $switch-off-focus-color;
+    }
+  }
+}
+
+.disabled {
+  @extend .field;
+  .text {
+    color: $switch-disabled-text-color;
+  }
+  .on, .off {
+    cursor: auto;
+    background: $switch-disabled-track-color;
+  }
+  .thumb {
+    cursor: auto;
+    background-color: $switch-disabled-thumb-color;
+    border-color: transparent;
+  }
+}
diff --git a/lib/table/Table.js b/lib/table/Table.js
new file mode 100644
index 000000000..f46bb78f2
--- /dev/null
+++ b/lib/table/Table.js
@@ -0,0 +1,196 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Table = exports.tableFactory = undefined;
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Checkbox = require('../checkbox/Checkbox.js');
+
+var _Checkbox2 = _interopRequireDefault(_Checkbox);
+
+var _TableHead = require('./TableHead.js');
+
+var _TableHead2 = _interopRequireDefault(_TableHead);
+
+var _TableRow = require('./TableRow.js');
+
+var _TableRow2 = _interopRequireDefault(_TableRow);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(TableHead, TableRow) {
+  var Table = function (_Component) {
+    _inherits(Table, _Component);
+
+    function Table() {
+      var _Object$getPrototypeO;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, Table);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Table)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleFullSelect = function () {
+        if (_this.props.onSelect) {
+          var _this$props = _this.props;
+          var source = _this$props.source;
+          var selected = _this$props.selected;
+
+          var newSelected = source.length === selected.length ? [] : source.map(function (i, idx) {
+            return idx;
+          });
+          _this.props.onSelect(newSelected);
+        }
+      }, _this.handleRowSelect = function (index) {
+        if (_this.props.onSelect) {
+          var position = _this.props.selected.indexOf(index);
+          var newSelected = [].concat(_toConsumableArray(_this.props.selected));
+          if (position !== -1) {
+            newSelected.splice(position, 1);
+          }
+          if (position !== -1 && _this.props.multiSelectable) {
+            newSelected.push(index);
+          } else {
+            newSelected = [index];
+          }
+          _this.props.onSelect(newSelected);
+        }
+      }, _this.handleRowChange = function (index, key, value) {
+        if (_this.props.onChange) {
+          _this.props.onChange(index, key, value);
+        }
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(Table, [{
+      key: 'renderHead',
+      value: function renderHead() {
+        if (this.props.heading) {
+          var _props = this.props;
+          var model = _props.model;
+          var selected = _props.selected;
+          var source = _props.source;
+          var selectable = _props.selectable;
+          var multiSelectable = _props.multiSelectable;
+
+          var isSelected = selected.length === source.length;
+          return _react2.default.createElement(TableHead, {
+            model: model,
+            onSelect: this.handleFullSelect,
+            selectable: selectable,
+            multiSelectable: multiSelectable,
+            selected: isSelected,
+            theme: this.props.theme
+          });
+        }
+      }
+    }, {
+      key: 'renderBody',
+      value: function renderBody() {
+        var _this2 = this;
+
+        var _props2 = this.props;
+        var source = _props2.source;
+        var model = _props2.model;
+        var onChange = _props2.onChange;
+        var selectable = _props2.selectable;
+        var selected = _props2.selected;
+        var theme = _props2.theme;
+
+        return _react2.default.createElement(
+          'tbody',
+          null,
+          source.map(function (data, index) {
+            return _react2.default.createElement(TableRow, {
+              data: data,
+              index: index,
+              key: index,
+              model: model,
+              onChange: onChange ? _this2.handleRowChange.bind(_this2) : undefined,
+              onSelect: _this2.handleRowSelect.bind(_this2, index),
+              selectable: selectable,
+              selected: selected.indexOf(index) !== -1,
+              theme: theme
+            });
+          })
+        );
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _props3 = this.props;
+        var className = _props3.className;
+        var theme = _props3.theme;
+
+        return _react2.default.createElement(
+          'table',
+          { 'data-react-toolbox': 'table', className: (0, _classnames2.default)(theme.table, className) },
+          this.renderHead(),
+          this.renderBody()
+        );
+      }
+    }]);
+
+    return Table;
+  }(_react.Component);
+
+  Table.propTypes = {
+    className: _react.PropTypes.string,
+    heading: _react.PropTypes.bool,
+    model: _react.PropTypes.object,
+    multiSelectable: _react.PropTypes.bool,
+    onChange: _react.PropTypes.func,
+    onSelect: _react.PropTypes.func,
+    selectable: _react.PropTypes.bool,
+    selected: _react.PropTypes.array,
+    source: _react.PropTypes.array,
+    theme: _react.PropTypes.shape({
+      table: _react.PropTypes.string
+    })
+  };
+  Table.defaultProps = {
+    className: '',
+    heading: true,
+    selectable: true,
+    multiSelectable: true,
+    selected: [],
+    source: []
+  };
+
+
+  return Table;
+};
+
+var TableHead = (0, _TableHead2.default)(_Checkbox2.default);
+var TableRow = (0, _TableRow2.default)(_Checkbox2.default);
+var Table = factory(TableHead, TableRow);
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.TABLE)(Table);
+exports.tableFactory = factory;
+exports.Table = Table;
\ No newline at end of file
diff --git a/lib/table/TableHead.js b/lib/table/TableHead.js
new file mode 100644
index 000000000..dcc71513b
--- /dev/null
+++ b/lib/table/TableHead.js
@@ -0,0 +1,75 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+var factory = function factory(Checkbox) {
+  var TableHead = function TableHead(_ref) {
+    var model = _ref.model;
+    var onSelect = _ref.onSelect;
+    var selectable = _ref.selectable;
+    var multiSelectable = _ref.multiSelectable;
+    var selected = _ref.selected;
+    var theme = _ref.theme;
+
+    var selectCell = void 0;
+    var contentCells = Object.keys(model).map(function (key) {
+      var name = model[key].title || key;
+      return _react2.default.createElement(
+        'th',
+        { key: key },
+        name
+      );
+    });
+
+    if (selectable && multiSelectable) {
+      selectCell = _react2.default.createElement(
+        'th',
+        { key: 'select', className: theme.selectable },
+        _react2.default.createElement(Checkbox, { onChange: onSelect, checked: selected })
+      );
+    } else if (selectable) {
+      selectCell = _react2.default.createElement('th', { key: 'select', className: theme.selectable });
+    }
+    return _react2.default.createElement(
+      'thead',
+      null,
+      _react2.default.createElement(
+        'tr',
+        null,
+        [selectCell].concat(_toConsumableArray(contentCells))
+      )
+    );
+  };
+
+  TableHead.propTypes = {
+    className: _react.PropTypes.string,
+    model: _react.PropTypes.object,
+    multiSelectable: _react.PropTypes.bool,
+    onSelect: _react.PropTypes.func,
+    selectable: _react.PropTypes.bool,
+    selected: _react.PropTypes.bool,
+    theme: _react.PropTypes.shape({
+      selectable: _react.PropTypes.string
+    })
+  };
+
+  TableHead.defaultProps = {
+    className: '',
+    model: {},
+    selected: false
+  };
+
+  return TableHead;
+};
+
+exports.default = factory;
\ No newline at end of file
diff --git a/lib/table/TableRow.js b/lib/table/TableRow.js
new file mode 100644
index 000000000..ae0a25ccc
--- /dev/null
+++ b/lib/table/TableRow.js
@@ -0,0 +1,148 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _utils = require('../utils/utils');
+
+var _utils2 = _interopRequireDefault(_utils);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(Checkbox) {
+  var TableRow = function (_Component) {
+    _inherits(TableRow, _Component);
+
+    function TableRow() {
+      var _Object$getPrototypeO;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, TableRow);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TableRow)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleInputChange = function (index, key, type, event) {
+        var value = type === 'checkbox' ? event.target.checked : event.target.value;
+        var onChange = _this.props.model[key].onChange || _this.props.onChange;
+        onChange(index, key, value);
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(TableRow, [{
+      key: 'renderSelectCell',
+      value: function renderSelectCell() {
+        if (this.props.selectable) {
+          return _react2.default.createElement(
+            'td',
+            { className: this.props.theme.selectable },
+            _react2.default.createElement(Checkbox, { checked: this.props.selected, onChange: this.props.onSelect })
+          );
+        }
+      }
+    }, {
+      key: 'renderCells',
+      value: function renderCells() {
+        var _this2 = this;
+
+        return Object.keys(this.props.model).map(function (key) {
+          return _react2.default.createElement(
+            'td',
+            { key: key },
+            _this2.renderCell(key)
+          );
+        });
+      }
+    }, {
+      key: 'renderCell',
+      value: function renderCell(key) {
+        var value = this.props.data[key];
+
+        // if the value is a valid React element return it directly, since it
+        // cannot be edited and should not be converted to a string...
+        if (_react2.default.isValidElement(value)) {
+          return value;
+        }
+
+        var onChange = this.props.model[key].onChange || this.props.onChange;
+        if (onChange) {
+          return this.renderInput(key, value);
+        } else if (value) {
+          return value.toString();
+        }
+      }
+    }, {
+      key: 'renderInput',
+      value: function renderInput(key, value) {
+        var index = this.props.index;
+        var inputType = _utils2.default.inputTypeForPrototype(this.props.model[key].type);
+        var inputValue = _utils2.default.prepareValueForInput(value, inputType);
+        var checked = inputType === 'checkbox' && value ? true : null;
+        return _react2.default.createElement('input', {
+          checked: checked,
+          onChange: this.handleInputChange.bind(null, index, key, inputType),
+          type: inputType,
+          value: inputValue
+        });
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _classnames;
+
+        var className = (0, _classnames3.default)(this.props.theme.row, (_classnames = {}, _defineProperty(_classnames, this.props.theme.editable, this.props.onChange), _defineProperty(_classnames, this.props.theme.selected, this.props.selected), _classnames));
+
+        return _react2.default.createElement(
+          'tr',
+          { 'data-react-toolbox-table': 'row', className: className },
+          this.renderSelectCell(),
+          this.renderCells()
+        );
+      }
+    }]);
+
+    return TableRow;
+  }(_react.Component);
+
+  TableRow.propTypes = {
+    data: _react.PropTypes.object,
+    index: _react.PropTypes.number,
+    model: _react.PropTypes.object,
+    onChange: _react.PropTypes.func,
+    onSelect: _react.PropTypes.func,
+    selectable: _react.PropTypes.bool,
+    selected: _react.PropTypes.bool,
+    theme: _react.PropTypes.shape({
+      editable: _react.PropTypes.string,
+      row: _react.PropTypes.string,
+      selectable: _react.PropTypes.string,
+      selected: _react.PropTypes.string
+    })
+  };
+
+
+  return TableRow;
+};
+
+exports.default = factory;
\ No newline at end of file
diff --git a/lib/table/_config.scss b/lib/table/_config.scss
new file mode 100644
index 000000000..7ec3b5a2b
--- /dev/null
+++ b/lib/table/_config.scss
@@ -0,0 +1,5 @@
+$table-row-height: 48px !default;
+$table-row-divider: solid 1px rgba(0,0,0,.12) !default;
+$table-row-offset: 1.8 * $unit !default;
+$table-row-highlight: #eee !default;
+$table-text-color: #757575 !default;
diff --git a/lib/table/index.js b/lib/table/index.js
new file mode 100644
index 000000000..994d96cb2
--- /dev/null
+++ b/lib/table/index.js
@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Table = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _checkbox = require('../checkbox');
+
+var _Table = require('./Table.js');
+
+var _TableHead = require('./TableHead.js');
+
+var _TableHead2 = _interopRequireDefault(_TableHead);
+
+var _TableRow = require('./TableRow.js');
+
+var _TableRow2 = _interopRequireDefault(_TableRow);
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var applyTheme = function applyTheme(Component) {
+  return (0, _reactCssThemr.themr)(_identifiers.TABLE, _theme2.default)(Component);
+};
+var ThemedTableHead = applyTheme((0, _TableHead2.default)(_checkbox.Checkbox));
+var ThemedTableRow = applyTheme((0, _TableRow2.default)(_checkbox.Checkbox));
+var ThemedTable = applyTheme((0, _Table.tableFactory)(ThemedTableHead, ThemedTableRow));
+
+exports.default = ThemedTable;
+exports.Table = ThemedTable;
\ No newline at end of file
diff --git a/lib/table/theme.scss b/lib/table/theme.scss
new file mode 100644
index 000000000..b6d03b053
--- /dev/null
+++ b/lib/table/theme.scss
@@ -0,0 +1,54 @@
+@import "http://github.com/base";
+@import "http://github.com/config";
+
+.table {
+  width: 100%;
+  font-size: $font-size-tiny;
+  color: $table-text-color;
+  text-align: left;
+  tr {
+    height: $table-row-height;
+    line-height: $table-row-height;
+    border-bottom: $table-row-divider;
+  }
+  th {
+    font-weight: $font-weight-bold;
+    &:first-letter {
+      text-transform: capitalize;
+    }
+  }
+  th, td {
+    position: relative;
+    padding: 0 $table-row-offset;
+    &.selectable {
+      width: 1.8 * $unit;
+      padding-right: 0;
+      > * {
+        margin: 0;
+      }
+    }
+  }
+}
+
+.row {
+  transition: background-color $animation-duration $animation-curve-default;
+  &:last-child {
+    border-color: transparent;
+  }
+  > td {
+    > input {
+      display: block;
+      width: 100%;
+      background-color: transparent;
+      border: 0;
+    }
+  }
+}
+
+.selected, .row:hover {
+  background-color: $table-row-highlight;
+}
+
+.editable > * {
+  cursor: pointer;
+}
diff --git a/lib/tabs/Tab.js b/lib/tabs/Tab.js
new file mode 100644
index 000000000..2a744ddf5
--- /dev/null
+++ b/lib/tabs/Tab.js
@@ -0,0 +1,109 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tab = undefined;
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var Tab = function (_Component) {
+  _inherits(Tab, _Component);
+
+  function Tab() {
+    var _Object$getPrototypeO;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck(this, Tab);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Tab)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function (event) {
+      if (!_this.props.disabled && _this.props.onClick) {
+        _this.props.onClick(event);
+      }
+    }, _temp), _possibleConstructorReturn(_this, _ret);
+  }
+
+  _createClass(Tab, [{
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate(prevProps) {
+      if (!prevProps.active && this.props.active && this.props.onActive) {
+        this.props.onActive();
+      }
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _classnames;
+
+      var _props = this.props;
+      var active = _props.active;
+      var activeClassName = _props.activeClassName;
+      var hidden = _props.hidden;
+      var disabled = _props.disabled;
+      var className = _props.className;
+      var theme = _props.theme;
+
+      var _className = (0, _classnames3.default)(theme.label, (_classnames = {}, _defineProperty(_classnames, theme.active, active), _defineProperty(_classnames, theme.hidden, hidden), _defineProperty(_classnames, theme.disabled, disabled), _defineProperty(_classnames, activeClassName, active), _classnames), className);
+
+      return _react2.default.createElement(
+        'label',
+        { 'data-react-toolbox': 'tab', className: _className, onClick: this.handleClick },
+        this.props.label
+      );
+    }
+  }]);
+
+  return Tab;
+}(_react.Component);
+
+Tab.propTypes = {
+  active: _react.PropTypes.bool,
+  activeClassName: _react.PropTypes.string,
+  className: _react.PropTypes.string,
+  disabled: _react.PropTypes.bool,
+  hidden: _react.PropTypes.bool,
+  label: _react.PropTypes.any.isRequired,
+  onActive: _react.PropTypes.func,
+  onClick: _react.PropTypes.func,
+  theme: _react.PropTypes.shape({
+    active: _react.PropTypes.string,
+    disabled: _react.PropTypes.string,
+    hidden: _react.PropTypes.string,
+    label: _react.PropTypes.string
+  })
+};
+Tab.defaultProps = {
+  active: false,
+  className: '',
+  disabled: false,
+  hidden: false
+};
+exports.default = (0, _reactCssThemr.themr)(_identifiers.TABS)(Tab);
+exports.Tab = Tab;
\ No newline at end of file
diff --git a/lib/tabs/TabContent.js b/lib/tabs/TabContent.js
new file mode 100644
index 000000000..96f3538be
--- /dev/null
+++ b/lib/tabs/TabContent.js
@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TabContent = undefined;
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var TabContent = function (_Component) {
+  _inherits(TabContent, _Component);
+
+  function TabContent() {
+    _classCallCheck(this, TabContent);
+
+    return _possibleConstructorReturn(this, Object.getPrototypeOf(TabContent).apply(this, arguments));
+  }
+
+  _createClass(TabContent, [{
+    key: 'render',
+    value: function render() {
+      var className = (0, _classnames3.default)(this.props.theme.tab, _defineProperty({}, this.props.theme.active, this.props.active), this.props.className);
+
+      return _react2.default.createElement(
+        'section',
+        { className: className, tabIndex: this.props.tabIndex },
+        this.props.children
+      );
+    }
+  }]);
+
+  return TabContent;
+}(_react.Component);
+
+TabContent.propTypes = {
+  active: _react.PropTypes.bool,
+  children: _react.PropTypes.node,
+  className: _react.PropTypes.string,
+  tabIndex: _react.PropTypes.number,
+  theme: _react.PropTypes.shape({
+    active: _react.PropTypes.string,
+    tab: _react.PropTypes.string
+  })
+};
+TabContent.defaultProps = {
+  active: false,
+  className: ''
+};
+exports.default = (0, _reactCssThemr.themr)(_identifiers.TABS)(TabContent);
+exports.TabContent = TabContent;
\ No newline at end of file
diff --git a/lib/tabs/Tabs.js b/lib/tabs/Tabs.js
new file mode 100644
index 000000000..c86982d92
--- /dev/null
+++ b/lib/tabs/Tabs.js
@@ -0,0 +1,194 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tabs = exports.tabsFactory = undefined;
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Tab = require('./Tab.js');
+
+var _Tab2 = _interopRequireDefault(_Tab);
+
+var _TabContent = require('./TabContent.js');
+
+var _TabContent2 = _interopRequireDefault(_TabContent);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(Tab, TabContent) {
+  var Tabs = function (_Component) {
+    _inherits(Tabs, _Component);
+
+    function Tabs() {
+      var _Object$getPrototypeO;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, Tabs);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Tabs)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+        pointer: {}
+      }, _this.handleHeaderClick = function (idx) {
+        if (_this.props.onChange) _this.props.onChange(idx);
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(Tabs, [{
+      key: 'componentDidMount',
+      value: function componentDidMount() {
+        !this.props.disableAnimatedBottomBorder && this.updatePointer(this.props.index);
+      }
+    }, {
+      key: 'componentWillReceiveProps',
+      value: function componentWillReceiveProps(nextProps) {
+        !this.props.disableAnimatedBottomBorder && this.updatePointer(nextProps.index);
+      }
+    }, {
+      key: 'componentWillUnmount',
+      value: function componentWillUnmount() {
+        clearTimeout(this.pointerTimeout);
+      }
+    }, {
+      key: 'parseChildren',
+      value: function parseChildren() {
+        var headers = [];
+        var contents = [];
+
+        _react2.default.Children.forEach(this.props.children, function (item) {
+          if (item.type === Tab) {
+            headers.push(item);
+            if (item.props.children) {
+              contents.push(_react2.default.createElement(TabContent, { children: item.props.children }));
+            }
+          } else if (item.type === TabContent) {
+            contents.push(item);
+          }
+        });
+
+        return { headers: headers, contents: contents };
+      }
+    }, {
+      key: 'updatePointer',
+      value: function updatePointer(idx) {
+        var _this2 = this;
+
+        clearTimeout(this.pointerTimeout);
+        this.pointerTimeout = setTimeout(function () {
+          var startPoint = _this2.refs.tabs.getBoundingClientRect().left;
+          var label = _this2.refs.navigation.children[idx].getBoundingClientRect();
+          _this2.setState({
+            pointer: {
+              top: _this2.refs.navigation.getBoundingClientRect().height + 'px',
+              left: label.left - startPoint + 'px',
+              width: label.width + 'px'
+            }
+          });
+        }, 20);
+      }
+    }, {
+      key: 'renderHeaders',
+      value: function renderHeaders(headers) {
+        var _this3 = this;
+
+        return headers.map(function (item, idx) {
+          return _react2.default.cloneElement(item, {
+            key: idx,
+            active: _this3.props.index === idx,
+            onClick: _this3.handleHeaderClick.bind(_this3, idx, item)
+          });
+        });
+      }
+    }, {
+      key: 'renderContents',
+      value: function renderContents(contents) {
+        var _this4 = this;
+
+        var activeIdx = contents.findIndex(function (item, idx) {
+          return _this4.props.index === idx;
+        });
+
+        if (contents && contents[activeIdx]) {
+          return _react2.default.cloneElement(contents[activeIdx], {
+            key: activeIdx,
+            active: true,
+            tabIndex: activeIdx
+          });
+        }
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _props = this.props;
+        var className = _props.className;
+        var theme = _props.theme;
+
+        var _parseChildren = this.parseChildren();
+
+        var headers = _parseChildren.headers;
+        var contents = _parseChildren.contents;
+
+        return _react2.default.createElement(
+          'div',
+          { ref: 'tabs', 'data-react-toolbox': 'tabs', className: (0, _classnames2.default)(theme.tabs, className) },
+          _react2.default.createElement(
+            'nav',
+            { className: theme.navigation, ref: 'navigation' },
+            this.renderHeaders(headers)
+          ),
+          _react2.default.createElement('span', { className: theme.pointer, style: this.state.pointer }),
+          this.renderContents(contents)
+        );
+      }
+    }]);
+
+    return Tabs;
+  }(_react.Component);
+
+  Tabs.propTypes = {
+    children: _react.PropTypes.node,
+    className: _react.PropTypes.string,
+    disableAnimatedBottomBorder: _react.PropTypes.bool,
+    index: _react.PropTypes.number,
+    onChange: _react.PropTypes.func,
+    theme: _react.PropTypes.shape({
+      navigation: _react.PropTypes.string,
+      pointer: _react.PropTypes.string,
+      tabs: _react.PropTypes.string
+    })
+  };
+  Tabs.defaultProps = {
+    index: 0
+  };
+
+
+  return Tabs;
+};
+
+var Tabs = factory(_Tab2.default, _TabContent2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.TABS)(Tabs);
+exports.tabsFactory = factory;
+exports.Tabs = Tabs;
\ No newline at end of file
diff --git a/lib/tabs/__tests__/index.spec.js b/lib/tabs/__tests__/index.spec.js
new file mode 100644
index 000000000..9f6ffa9cf
--- /dev/null
+++ b/lib/tabs/__tests__/index.spec.js
@@ -0,0 +1,100 @@
+'use strict';
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _expect = require('expect');
+
+var _expect2 = _interopRequireDefault(_expect);
+
+var _testing = require('../../utils/testing');
+
+var _testing2 = _interopRequireDefault(_testing);
+
+var _reactAddonsTestUtils = require('react-addons-test-utils');
+
+var _reactAddonsTestUtils2 = _interopRequireDefault(_reactAddonsTestUtils);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _Tabs = require('../Tabs');
+
+var _Tabs2 = _interopRequireDefault(_Tabs);
+
+var _Tab = require('../Tab');
+
+var _Tab2 = _interopRequireDefault(_Tab);
+
+var _TabContent = require('../TabContent');
+
+var _TabContent2 = _interopRequireDefault(_TabContent);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+describe('Tabs', function () {
+  var tabContents = void 0,
+      composition = void 0;
+
+  it('only renders the current tab', function () {
+    var Composition = function (_Component) {
+      _inherits(Composition, _Component);
+
+      function Composition() {
+        _classCallCheck(this, Composition);
+
+        var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Composition).call(this));
+
+        _this.state = { index: 0 };
+        return _this;
+      }
+
+      _createClass(Composition, [{
+        key: 'render',
+        value: function render() {
+          return _react2.default.createElement(
+            _Tabs2.default,
+            { index: this.state.index },
+            _react2.default.createElement(
+              _Tab2.default,
+              { label: 'tab1' },
+              'tab1'
+            ),
+            _react2.default.createElement(
+              _Tab2.default,
+              { label: 'tab2' },
+              'tab2'
+            )
+          );
+        }
+      }]);
+
+      return Composition;
+    }(_react.Component);
+
+    // initial render
+
+
+    composition = _testing2.default.renderComponent(Composition);
+
+    tabContents = _reactAddonsTestUtils2.default.scryRenderedComponentsWithType(composition, _TabContent2.default);
+
+    (0, _expect2.default)(tabContents.length).toEqual(1);
+    (0, _expect2.default)(tabContents[0].props.tabIndex).toEqual(0);
+
+    // after tab change
+    composition.setState({ index: 1 });
+    composition.forceUpdate();
+
+    tabContents = _reactAddonsTestUtils2.default.scryRenderedComponentsWithType(composition, _TabContent2.default);
+
+    (0, _expect2.default)(tabContents.length).toEqual(1);
+    (0, _expect2.default)(tabContents[0].props.tabIndex).toEqual(1);
+  });
+});
\ No newline at end of file
diff --git a/lib/tabs/_config.scss b/lib/tabs/_config.scss
new file mode 100644
index 000000000..f67e55875
--- /dev/null
+++ b/lib/tabs/_config.scss
@@ -0,0 +1,11 @@
+$tab-label-disabled-opacity: .2 !default;
+$tab-label-h-padding: 1.2 * $unit !default;
+$tab-label-height: 4.8 * $unit !default;
+$tab-text-height: 1.4 * $unit !default;
+$tab-label-v-padding: ($tab-label-height - $tab-text-height) / 2 !default;
+$tab-navigation-border-color: $color-divider !default;
+$tab-pointer-color: $color-primary !default;
+$tab-pointer-height: .2 * $unit !default;
+$tab-text: $color-black !default;
+$tab-text-color: $tab-text !default;
+$tab-text-inactive-color: rgba($tab-text, .7) !default;
diff --git a/lib/tabs/index.js b/lib/tabs/index.js
new file mode 100644
index 000000000..a96995f5c
--- /dev/null
+++ b/lib/tabs/index.js
@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tabs = exports.Tab = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Tabs = require('./Tabs.js');
+
+var _TabContent = require('./TabContent.js');
+
+var _Tab = require('./Tab.js');
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var applyTheme = function applyTheme(Component) {
+  return (0, _reactCssThemr.themr)(_identifiers.TABS, _theme2.default)(Component);
+};
+var ThemedTabContent = applyTheme(_TabContent.TabContent);
+var ThemedTab = applyTheme(_Tab.Tab);
+var ThemedTabs = applyTheme((0, _Tabs.tabsFactory)(ThemedTab, ThemedTabContent));
+
+exports.Tab = ThemedTab;
+exports.Tabs = ThemedTabs;
\ No newline at end of file
diff --git a/lib/tabs/theme.scss b/lib/tabs/theme.scss
new file mode 100644
index 000000000..806c1dfb1
--- /dev/null
+++ b/lib/tabs/theme.scss
@@ -0,0 +1,61 @@
+@import "http://github.com/base";
+@import "http://github.com/config";
+
+.tabs {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+.navigation {
+  display: flex;
+  flex-direction: row;
+  box-shadow: inset 0 -1px $tab-navigation-border-color;
+}
+
+.label {
+  padding: $tab-label-v-padding $tab-label-h-padding;
+  font-size: $tab-text-height;
+  font-weight: $font-weight-semi-bold;
+  line-height: 1;
+  color: $tab-text-inactive-color;
+  text-transform: uppercase;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transition-property: box-shadow, color;
+  &.active {
+    color: $tab-text-color;
+  }
+  &.disabled {
+    opacity: $tab-label-disabled-opacity;
+  }
+  &:not(.disabled) {
+    cursor: pointer;
+  }
+  &.hidden {
+    display: none;
+  }
+}
+
+.pointer {
+  position: absolute;
+  width: 0;
+  height: $tab-pointer-height;
+  margin-top: - $tab-pointer-height;
+  background-color: $tab-pointer-color;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transition-property: left, width;
+}
+
+.tab {
+  display: flex;
+  flex-direction: column;
+  padding: $tab-label-v-padding $tab-label-h-padding;
+  &:not(.active) {
+    display: none;
+  }
+  &.active {
+    display: block;
+  }
+}
diff --git a/lib/time_picker/Clock.js b/lib/time_picker/Clock.js
new file mode 100644
index 000000000..cb4cf47f8
--- /dev/null
+++ b/lib/time_picker/Clock.js
@@ -0,0 +1,182 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactAddonsCssTransitionGroup = require('react-addons-css-transition-group');
+
+var _reactAddonsCssTransitionGroup2 = _interopRequireDefault(_reactAddonsCssTransitionGroup);
+
+var _animations = require('../animations');
+
+var _time = require('../utils/time.js');
+
+var _time2 = _interopRequireDefault(_time);
+
+var _ClockHours = require('./ClockHours.js');
+
+var _ClockHours2 = _interopRequireDefault(_ClockHours);
+
+var _ClockMinutes = require('./ClockMinutes.js');
+
+var _ClockMinutes2 = _interopRequireDefault(_ClockMinutes);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var Clock = function (_Component) {
+  _inherits(Clock, _Component);
+
+  function Clock() {
+    var _Object$getPrototypeO;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck(this, Clock);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Clock)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      center: { x: null, y: null },
+      radius: 0
+    }, _this.handleHourChange = function (hours) {
+      if (_this.props.time.getHours() !== hours) {
+        _this.props.onChange(_time2.default.setHours(_this.props.time, _this.adaptHourToFormat(hours)));
+      }
+    }, _this.handleMinuteChange = function (minutes) {
+      if (_this.props.time.getMinutes() !== minutes) {
+        _this.props.onChange(_time2.default.setMinutes(_this.props.time, minutes));
+      }
+    }, _this.handleCalculateShape = function () {
+      var _this$refs$placeholde = _this.refs.placeholder.getBoundingClientRect();
+
+      var top = _this$refs$placeholde.top;
+      var left = _this$refs$placeholde.left;
+      var width = _this$refs$placeholde.width;
+
+      _this.setState({
+        center: { x: left + width / 2 - window.scrollX, y: top + width / 2 - window.scrollX },
+        radius: width / 2
+      });
+    }, _temp), _possibleConstructorReturn(_this, _ret);
+  }
+
+  _createClass(Clock, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      window.addEventListener('resize', this.handleCalculateShape);
+      setTimeout(function () {
+        _this2.handleCalculateShape();
+      });
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      window.removeEventListener('resize', this.handleCalculateShape);
+    }
+  }, {
+    key: 'adaptHourToFormat',
+    value: function adaptHourToFormat(hour) {
+      if (this.props.format === 'ampm') {
+        if (_time2.default.getTimeMode(this.props.time) === 'pm') {
+          return hour < 12 ? hour + 12 : hour;
+        } else {
+          return hour === 12 ? 0 : hour;
+        }
+      } else {
+        return hour;
+      }
+    }
+  }, {
+    key: 'renderHours',
+    value: function renderHours() {
+      return _react2.default.createElement(_ClockHours2.default, {
+        center: this.state.center,
+        format: this.props.format,
+        onChange: this.handleHourChange,
+        radius: this.state.radius,
+        selected: this.props.time.getHours(),
+        spacing: this.state.radius * 0.18,
+        onHandMoved: this.props.onHandMoved,
+        theme: this.props.theme
+      });
+    }
+  }, {
+    key: 'renderMinutes',
+    value: function renderMinutes() {
+      return _react2.default.createElement(_ClockMinutes2.default, {
+        center: this.state.center,
+        onChange: this.handleMinuteChange,
+        radius: this.state.radius,
+        selected: this.props.time.getMinutes(),
+        spacing: this.state.radius * 0.18,
+        onHandMoved: this.props.onHandMoved,
+        theme: this.props.theme
+      });
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var theme = this.props.theme;
+
+      var animation = this.props.display === 'hours' ? _animations.ZoomOut : _animations.ZoomIn;
+      return _react2.default.createElement(
+        'div',
+        { 'data-react-toolbox': 'clock', className: theme.clock },
+        _react2.default.createElement(
+          'div',
+          { ref: 'placeholder', className: theme.placeholder, style: { height: this.state.radius * 2 } },
+          _react2.default.createElement(
+            _reactAddonsCssTransitionGroup2.default,
+            { transitionName: animation, transitionEnterTimeout: 500, transitionLeaveTimeout: 500 },
+            _react2.default.createElement(
+              'div',
+              { key: this.props.display, className: theme.clockWrapper, style: { height: this.state.radius * 2 } },
+              this.props.display === 'hours' ? this.renderHours() : null,
+              this.props.display === 'minutes' ? this.renderMinutes() : null
+            )
+          )
+        )
+      );
+    }
+  }]);
+
+  return Clock;
+}(_react.Component);
+
+Clock.propTypes = {
+  className: _react.PropTypes.string,
+  display: _react.PropTypes.oneOf(['hours', 'minutes']),
+  format: _react.PropTypes.oneOf(['24hr', 'ampm']),
+  onChange: _react.PropTypes.func,
+  onHandMoved: _react.PropTypes.func,
+  theme: _react.PropTypes.shape({
+    clock: _react.PropTypes.string.isRequired,
+    clockWrapper: _react.PropTypes.string.isRequired,
+    placeholder: _react.PropTypes.string.isRequired
+  }),
+  time: _react.PropTypes.object
+};
+Clock.defaultProps = {
+  className: '',
+  display: 'hours',
+  format: '24hr',
+  time: new Date()
+};
+exports.default = Clock;
\ No newline at end of file
diff --git a/lib/time_picker/ClockFace.js b/lib/time_picker/ClockFace.js
new file mode 100644
index 000000000..b7a9eaac8
--- /dev/null
+++ b/lib/time_picker/ClockFace.js
@@ -0,0 +1,117 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var Face = function (_Component) {
+  _inherits(Face, _Component);
+
+  function Face() {
+    _classCallCheck(this, Face);
+
+    return _possibleConstructorReturn(this, Object.getPrototypeOf(Face).apply(this, arguments));
+  }
+
+  _createClass(Face, [{
+    key: 'numberStyle',
+    value: function numberStyle(rad, num) {
+      return {
+        position: 'absolute',
+        left: rad + rad * Math.sin(360 * (Math.PI / 180) / 12 * (num - 1)) + this.props.spacing,
+        top: rad - rad * Math.cos(360 * (Math.PI / 180) / 12 * (num - 1)) + this.props.spacing
+      };
+    }
+  }, {
+    key: 'faceStyle',
+    value: function faceStyle() {
+      return {
+        height: this.props.radius * 2,
+        width: this.props.radius * 2
+      };
+    }
+  }, {
+    key: 'renderNumber',
+    value: function renderNumber(number, idx) {
+      var _props = this.props;
+      var active = _props.active;
+      var radius = _props.radius;
+      var spacing = _props.spacing;
+      var theme = _props.theme;
+      var twoDigits = _props.twoDigits;
+
+      return _react2.default.createElement(
+        'span',
+        {
+          className: (0, _classnames3.default)(theme.number, _defineProperty({}, theme.active, number === active)),
+          style: this.numberStyle(radius - spacing, idx + 1),
+          key: number
+        },
+        twoDigits ? ('0' + number).slice(-2) : number
+      );
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props2 = this.props;
+      var numbers = _props2.numbers;
+      var onTouchStart = _props2.onTouchStart;
+      var onMouseDown = _props2.onMouseDown;
+      var theme = _props2.theme;
+
+      return _react2.default.createElement(
+        'div',
+        {
+          ref: 'root',
+          className: theme.face,
+          onTouchStart: onTouchStart,
+          onMouseDown: onMouseDown,
+          style: this.faceStyle()
+        },
+        numbers.map(this.renderNumber.bind(this))
+      );
+    }
+  }]);
+
+  return Face;
+}(_react.Component);
+
+Face.propTypes = {
+  active: _react.PropTypes.number,
+  numbers: _react.PropTypes.array,
+  radius: _react.PropTypes.number,
+  spacing: _react.PropTypes.number,
+  theme: _react.PropTypes.shape({
+    active: _react.PropTypes.string.isRequired,
+    face: _react.PropTypes.string.isRequired,
+    number: _react.PropTypes.string.isRequired
+  }),
+  twoDigits: _react.PropTypes.bool
+};
+Face.defaultProps = {
+  active: null,
+  numbers: [],
+  radius: 0,
+  twoDigits: false
+};
+exports.default = Face;
\ No newline at end of file
diff --git a/lib/time_picker/ClockHand.js b/lib/time_picker/ClockHand.js
new file mode 100644
index 000000000..a934cac03
--- /dev/null
+++ b/lib/time_picker/ClockHand.js
@@ -0,0 +1,175 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _events = require('../utils/events.js');
+
+var _events2 = _interopRequireDefault(_events);
+
+var _prefixer = require('../utils/prefixer.js');
+
+var _prefixer2 = _interopRequireDefault(_prefixer);
+
+var _utils = require('../utils/utils.js');
+
+var _utils2 = _interopRequireDefault(_utils);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var Hand = function (_Component) {
+  _inherits(Hand, _Component);
+
+  function Hand() {
+    var _Object$getPrototypeO;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck(this, Hand);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Hand)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      knobWidth: 0
+    }, _this.handleMouseMove = function (event) {
+      _this.move(_events2.default.getMousePosition(event));
+    }, _this.handleTouchMove = function (event) {
+      _this.move(_events2.default.getTouchPosition(event));
+    }, _this.handleMouseUp = function () {
+      _this.end(_this.getMouseEventMap());
+    }, _this.handleTouchEnd = function () {
+      _this.end(_this.getTouchEventMap());
+    }, _temp), _possibleConstructorReturn(_this, _ret);
+  }
+
+  _createClass(Hand, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      setTimeout(function () {
+        _this2.setState({ knobWidth: _this2.refs.knob.offsetWidth });
+      });
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      _events2.default.removeEventsFromDocument(this.getMouseEventMap());
+      _events2.default.removeEventsFromDocument(this.getTouchEventMap());
+    }
+  }, {
+    key: 'getMouseEventMap',
+    value: function getMouseEventMap() {
+      return {
+        mousemove: this.handleMouseMove,
+        mouseup: this.handleMouseUp
+      };
+    }
+  }, {
+    key: 'getTouchEventMap',
+    value: function getTouchEventMap() {
+      return {
+        touchmove: this.handleTouchMove,
+        touchend: this.handleTouchEnd
+      };
+    }
+  }, {
+    key: 'mouseStart',
+    value: function mouseStart(event) {
+      _events2.default.addEventsToDocument(this.getMouseEventMap());
+      this.move(_events2.default.getMousePosition(event));
+    }
+  }, {
+    key: 'touchStart',
+    value: function touchStart(event) {
+      _events2.default.addEventsToDocument(this.getTouchEventMap());
+      this.move(_events2.default.getTouchPosition(event));
+      _events2.default.pauseEvent(event);
+    }
+  }, {
+    key: 'getPositionRadius',
+    value: function getPositionRadius(position) {
+      var x = this.props.origin.x - position.x;
+      var y = this.props.origin.y - position.y;
+      return Math.sqrt(x * x + y * y);
+    }
+  }, {
+    key: 'trimAngleToValue',
+    value: function trimAngleToValue(angle) {
+      return this.props.step * Math.round(angle / this.props.step);
+    }
+  }, {
+    key: 'positionToAngle',
+    value: function positionToAngle(position) {
+      return _utils2.default.angle360FromPositions(this.props.origin.x, this.props.origin.y, position.x, position.y);
+    }
+  }, {
+    key: 'end',
+    value: function end(evts) {
+      if (this.props.onMoved) this.props.onMoved();
+      _events2.default.removeEventsFromDocument(evts);
+    }
+  }, {
+    key: 'move',
+    value: function move(position) {
+      var degrees = this.trimAngleToValue(this.positionToAngle(position));
+      var radius = this.getPositionRadius(position);
+      if (this.props.onMove) this.props.onMove(degrees === 360 ? 0 : degrees, radius);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var theme = this.props.theme;
+
+      var className = theme.hand + ' ' + this.props.className;
+      var handStyle = (0, _prefixer2.default)({
+        height: this.props.length - this.state.knobWidth / 2,
+        transform: 'rotate(' + this.props.angle + 'deg)'
+      });
+
+      return _react2.default.createElement(
+        'div',
+        { className: className, style: handStyle },
+        _react2.default.createElement('div', { ref: 'knob', className: theme.knob })
+      );
+    }
+  }]);
+
+  return Hand;
+}(_react.Component);
+
+Hand.propTypes = {
+  angle: _react.PropTypes.number,
+  className: _react.PropTypes.string,
+  length: _react.PropTypes.number,
+  onMove: _react.PropTypes.func,
+  onMoved: _react.PropTypes.func,
+  origin: _react.PropTypes.object,
+  step: _react.PropTypes.number,
+  theme: _react.PropTypes.shape({
+    hand: _react.PropTypes.string.isRequired,
+    knob: _react.PropTypes.string.isRequired
+  })
+};
+Hand.defaultProps = {
+  className: '',
+  angle: 0,
+  length: 0,
+  origin: {}
+};
+exports.default = Hand;
\ No newline at end of file
diff --git a/lib/time_picker/ClockHours.js b/lib/time_picker/ClockHours.js
new file mode 100644
index 000000000..85a711ab1
--- /dev/null
+++ b/lib/time_picker/ClockHours.js
@@ -0,0 +1,149 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _utils = require('../utils/utils.js');
+
+var _utils2 = _interopRequireDefault(_utils);
+
+var _ClockHand = require('./ClockHand.js');
+
+var _ClockHand2 = _interopRequireDefault(_ClockHand);
+
+var _ClockFace = require('./ClockFace.js');
+
+var _ClockFace2 = _interopRequireDefault(_ClockFace);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+var outerNumbers = [0].concat(_toConsumableArray(_utils2.default.range(13, 24)));
+var innerNumbers = [12].concat(_toConsumableArray(_utils2.default.range(1, 12)));
+var innerSpacing = 1.7;
+var step = 360 / 12;
+
+var Hours = function (_Component) {
+  _inherits(Hours, _Component);
+
+  function Hours() {
+    var _Object$getPrototypeO;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck(this, Hours);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Hours)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      inner: _this.props.format === '24hr' && _this.props.selected > 0 && _this.props.selected <= 12
+    }, _this.handleHandMove = function (degrees, radius) {
+      var currentInner = radius < _this.props.radius - _this.props.spacing * innerSpacing;
+      if (_this.props.format === '24hr' && _this.state.inner !== currentInner) {
+        _this.setState({ inner: currentInner }, function () {
+          _this.props.onChange(_this.valueFromDegrees(degrees));
+        });
+      } else {
+        _this.props.onChange(_this.valueFromDegrees(degrees));
+      }
+    }, _this.handleMouseDown = function (event) {
+      _this.refs.hand.mouseStart(event);
+    }, _this.handleTouchStart = function (event) {
+      _this.refs.hand.touchStart(event);
+    }, _temp), _possibleConstructorReturn(_this, _ret);
+  }
+
+  _createClass(Hours, [{
+    key: 'valueFromDegrees',
+    value: function valueFromDegrees(degrees) {
+      if (this.props.format === 'ampm' || this.props.format === '24hr' && this.state.inner) {
+        return innerNumbers[degrees / step];
+      } else {
+        return outerNumbers[degrees / step];
+      }
+    }
+  }, {
+    key: 'renderInnerFace',
+    value: function renderInnerFace(innerRadius) {
+      if (this.props.format === '24hr') {
+        return _react2.default.createElement(_ClockFace2.default, {
+          onTouchStart: this.handleTouchStart,
+          onMouseDown: this.handleMouseDown,
+          numbers: innerNumbers,
+          spacing: this.props.spacing,
+          radius: innerRadius,
+          theme: this.props.theme,
+          active: this.props.selected
+        });
+      }
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props = this.props;
+      var format = _props.format;
+      var selected = _props.selected;
+      var radius = _props.radius;
+      var spacing = _props.spacing;
+      var center = _props.center;
+      var onHandMoved = _props.onHandMoved;
+
+      var is24hr = format === '24hr';
+
+      return _react2.default.createElement(
+        'div',
+        null,
+        _react2.default.createElement(_ClockFace2.default, {
+          onTouchStart: this.handleTouchStart,
+          onMouseDown: this.handleMouseDown,
+          numbers: is24hr ? outerNumbers : innerNumbers,
+          spacing: spacing,
+          radius: radius,
+          twoDigits: is24hr,
+          active: is24hr ? selected : selected % 12 || 12,
+          theme: this.props.theme
+        }),
+        this.renderInnerFace(radius - spacing * innerSpacing),
+        _react2.default.createElement(_ClockHand2.default, { ref: 'hand',
+          angle: selected * step,
+          length: (this.state.inner ? radius - spacing * innerSpacing : radius) - spacing,
+          onMove: this.handleHandMove,
+          theme: this.props.theme,
+          onMoved: onHandMoved,
+          origin: center,
+          step: step
+        })
+      );
+    }
+  }]);
+
+  return Hours;
+}(_react.Component);
+
+Hours.propTypes = {
+  center: _react.PropTypes.object,
+  format: _react.PropTypes.oneOf(['24hr', 'ampm']),
+  onChange: _react.PropTypes.func,
+  onHandMoved: _react.PropTypes.func,
+  radius: _react.PropTypes.number,
+  selected: _react.PropTypes.number,
+  spacing: _react.PropTypes.number,
+  theme: _react.PropTypes.object
+};
+exports.default = Hours;
\ No newline at end of file
diff --git a/lib/time_picker/ClockMinutes.js b/lib/time_picker/ClockMinutes.js
new file mode 100644
index 000000000..95c48265b
--- /dev/null
+++ b/lib/time_picker/ClockMinutes.js
@@ -0,0 +1,105 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _utils = require('../utils/utils.js');
+
+var _utils2 = _interopRequireDefault(_utils);
+
+var _ClockHand = require('./ClockHand.js');
+
+var _ClockHand2 = _interopRequireDefault(_ClockHand);
+
+var _ClockFace = require('./ClockFace.js');
+
+var _ClockFace2 = _interopRequireDefault(_ClockFace);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var minutes = _utils2.default.range(0, 60, 5);
+var step = 360 / 60;
+
+var Minutes = function (_Component) {
+  _inherits(Minutes, _Component);
+
+  function Minutes() {
+    var _Object$getPrototypeO;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck(this, Minutes);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Minutes)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleHandMove = function (degrees) {
+      _this.props.onChange(degrees / step);
+    }, _this.handleMouseDown = function (event) {
+      _this.refs.hand.mouseStart(event);
+    }, _this.handleTouchStart = function (event) {
+      _this.refs.hand.touchStart(event);
+    }, _temp), _possibleConstructorReturn(_this, _ret);
+  }
+
+  _createClass(Minutes, [{
+    key: 'render',
+    value: function render() {
+      return _react2.default.createElement(
+        'div',
+        null,
+        _react2.default.createElement(_ClockFace2.default, {
+          onTouchStart: this.handleTouchStart,
+          onMouseDown: this.handleMouseDown,
+          numbers: minutes,
+          spacing: this.props.spacing,
+          radius: this.props.radius,
+          active: this.props.selected,
+          theme: this.props.theme,
+          twoDigits: true
+        }),
+        _react2.default.createElement(_ClockHand2.default, { ref: 'hand',
+          className: minutes.indexOf(this.props.selected) === -1 ? this.props.theme.small : '',
+          angle: this.props.selected * step,
+          length: this.props.radius - this.props.spacing,
+          onMove: this.handleHandMove,
+          origin: this.props.center,
+          theme: this.props.theme,
+          step: step
+        })
+      );
+    }
+  }]);
+
+  return Minutes;
+}(_react.Component);
+
+Minutes.propTypes = {
+  center: _react.PropTypes.object,
+  onChange: _react.PropTypes.func,
+  radius: _react.PropTypes.number,
+  selected: _react.PropTypes.number,
+  spacing: _react.PropTypes.number,
+  theme: _react.PropTypes.shape({
+    small: _react.PropTypes.string.isRequired
+  })
+};
+Minutes.defaultProps = {
+  selected: 0,
+  onChange: null
+};
+exports.default = Minutes;
\ No newline at end of file
diff --git a/lib/time_picker/TimePicker.js b/lib/time_picker/TimePicker.js
new file mode 100644
index 000000000..55f9dd54d
--- /dev/null
+++ b/lib/time_picker/TimePicker.js
@@ -0,0 +1,143 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TimePicker = exports.timePickerFactory = undefined;
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _events = require('../utils/events.js');
+
+var _events2 = _interopRequireDefault(_events);
+
+var _time = require('../utils/time.js');
+
+var _time2 = _interopRequireDefault(_time);
+
+var _Dialog = require('../dialog/Dialog.js');
+
+var _Dialog2 = _interopRequireDefault(_Dialog);
+
+var _Input = require('../input/Input.js');
+
+var _Input2 = _interopRequireDefault(_Input);
+
+var _TimePickerDialog = require('./TimePickerDialog.js');
+
+var _TimePickerDialog2 = _interopRequireDefault(_TimePickerDialog);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(TimePickerDialog, Input) {
+  var TimePicker = function (_Component) {
+    _inherits(TimePicker, _Component);
+
+    function TimePicker() {
+      var _Object$getPrototypeO;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, TimePicker);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TimePicker)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+        active: false
+      }, _this.handleDismiss = function () {
+        _this.setState({ active: false });
+      }, _this.handleInputMouseDown = function (event) {
+        _events2.default.pauseEvent(event);
+        _this.setState({ active: true });
+      }, _this.handleSelect = function (value, event) {
+        if (_this.props.onChange) _this.props.onChange(value, event);
+        _this.setState({ active: false });
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(TimePicker, [{
+      key: 'render',
+      value: function render() {
+        var _props = this.props;
+        var value = _props.value;
+        var format = _props.format;
+        var inputClassName = _props.inputClassName;
+        var theme = _props.theme;
+
+        var formattedTime = value ? _time2.default.formatTime(value, format) : '';
+        return _react2.default.createElement(
+          'div',
+          { 'data-react-toolbox': 'time-picker' },
+          _react2.default.createElement(Input, {
+            className: (0, _classnames3.default)(theme.input, _defineProperty({}, inputClassName, inputClassName)),
+            error: this.props.error,
+            label: this.props.label,
+            onMouseDown: this.handleInputMouseDown,
+            readOnly: true,
+            type: 'text',
+            value: formattedTime
+          }),
+          _react2.default.createElement(TimePickerDialog, {
+            active: this.state.active,
+            className: this.props.className,
+            format: format,
+            onDismiss: this.handleDismiss,
+            onSelect: this.handleSelect,
+            theme: this.props.theme,
+            value: this.props.value
+          })
+        );
+      }
+    }]);
+
+    return TimePicker;
+  }(_react.Component);
+
+  TimePicker.propTypes = {
+    className: _react.PropTypes.string,
+    error: _react.PropTypes.string,
+    format: _react.PropTypes.oneOf(['24hr', 'ampm']),
+    inputClassName: _react.PropTypes.string,
+    label: _react.PropTypes.string,
+    onChange: _react.PropTypes.func,
+    theme: _react.PropTypes.shape({
+      input: _react.PropTypes.string.isRequired
+    }),
+    value: _react.PropTypes.object
+  };
+  TimePicker.defaultProps = {
+    className: '',
+    format: '24hr'
+  };
+
+
+  return TimePicker;
+};
+
+var TimePickerDialog = (0, _TimePickerDialog2.default)(_Dialog2.default);
+var TimePicker = factory(TimePickerDialog, _Input2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.TIME_PICKER)(TimePicker);
+exports.timePickerFactory = factory;
+exports.TimePicker = TimePicker;
\ No newline at end of file
diff --git a/lib/time_picker/TimePickerDialog.js b/lib/time_picker/TimePickerDialog.js
new file mode 100644
index 000000000..f90546a3d
--- /dev/null
+++ b/lib/time_picker/TimePickerDialog.js
@@ -0,0 +1,182 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _time = require('../utils/time.js');
+
+var _time2 = _interopRequireDefault(_time);
+
+var _Clock = require('./Clock.js');
+
+var _Clock2 = _interopRequireDefault(_Clock);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(Dialog) {
+  var TimePickerDialog = function (_Component) {
+    _inherits(TimePickerDialog, _Component);
+
+    function TimePickerDialog() {
+      var _Object$getPrototypeO;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, TimePickerDialog);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TimePickerDialog)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+        display: 'hours',
+        displayTime: _this.props.value
+      }, _this.handleClockChange = function (value) {
+        _this.setState({ displayTime: value });
+      }, _this.handleSelect = function (event) {
+        _this.props.onSelect(_this.state.displayTime, event);
+      }, _this.toggleTimeMode = function () {
+        _this.setState({ displayTime: _time2.default.toggleTimeMode(_this.state.displayTime) });
+      }, _this.handleHandMoved = function () {
+        if (_this.state.display === 'hours') _this.setState({ display: 'minutes' });
+      }, _this.switchDisplay = function (display) {
+        _this.setState({ display: display });
+      }, _this.actions = [{ label: 'Cancel', className: _this.props.theme.button, onClick: _this.props.onDismiss }, { label: 'Ok', className: _this.props.theme.button, onClick: _this.handleSelect }], _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(TimePickerDialog, [{
+      key: 'componentDidUpdate',
+      value: function componentDidUpdate(prevProps) {
+        if (!prevProps.active && this.props.active) {
+          setTimeout(this.refs.clock.handleCalculateShape, 1000);
+        }
+      }
+    }, {
+      key: 'formatHours',
+      value: function formatHours() {
+        if (this.props.format === 'ampm') {
+          return this.state.displayTime.getHours() % 12 || 12;
+        } else {
+          return this.state.displayTime.getHours();
+        }
+      }
+    }, {
+      key: 'renderAMPMLabels',
+      value: function renderAMPMLabels() {
+        var theme = this.props.theme;
+
+        if (this.props.format === 'ampm') {
+          return _react2.default.createElement(
+            'div',
+            { className: theme.ampm },
+            _react2.default.createElement(
+              'span',
+              { className: theme.am, onClick: this.toggleTimeMode },
+              'AM'
+            ),
+            _react2.default.createElement(
+              'span',
+              { className: theme.pm, onClick: this.toggleTimeMode },
+              'PM'
+            )
+          );
+        }
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var theme = this.props.theme;
+
+        var display = this.state.display + 'Display';
+        var format = _time2.default.getTimeMode(this.state.displayTime) + 'Format';
+        var className = (0, _classnames2.default)([theme.dialog, theme[display], theme[format]], this.props.className);
+        return _react2.default.createElement(
+          Dialog,
+          { active: this.props.active, className: className, actions: this.actions },
+          _react2.default.createElement(
+            'header',
+            { className: theme.header },
+            _react2.default.createElement(
+              'span',
+              { className: theme.hours, onClick: this.switchDisplay.bind(this, 'hours') },
+              ('0' + this.formatHours()).slice(-2)
+            ),
+            _react2.default.createElement(
+              'span',
+              { className: theme.separator },
+              ':'
+            ),
+            _react2.default.createElement(
+              'span',
+              { className: theme.minutes, onClick: this.switchDisplay.bind(this, 'minutes') },
+              ('0' + this.state.displayTime.getMinutes()).slice(-2)
+            ),
+            this.renderAMPMLabels()
+          ),
+          _react2.default.createElement(_Clock2.default, {
+            ref: 'clock',
+            display: this.state.display,
+            format: this.props.format,
+            onChange: this.handleClockChange,
+            onHandMoved: this.handleHandMoved,
+            theme: this.props.theme,
+            time: this.state.displayTime
+          })
+        );
+      }
+    }]);
+
+    return TimePickerDialog;
+  }(_react.Component);
+
+  TimePickerDialog.propTypes = {
+    active: _react.PropTypes.bool,
+    className: _react.PropTypes.string,
+    format: _react.PropTypes.oneOf(['24hr', 'ampm']),
+    onDismiss: _react.PropTypes.func,
+    onSelect: _react.PropTypes.func,
+    theme: _react.PropTypes.shape({
+      am: _react.PropTypes.string.isRequired,
+      amFormat: _react.PropTypes.string.isRequired,
+      ampm: _react.PropTypes.string.isRequired,
+      button: _react.PropTypes.string.isRequired,
+      dialog: _react.PropTypes.string.isRequired,
+      header: _react.PropTypes.string.isRequired,
+      hours: _react.PropTypes.string.isRequired,
+      hoursDisplay: _react.PropTypes.string.isRequired,
+      minutes: _react.PropTypes.string.isRequired,
+      minutesDisplay: _react.PropTypes.string.isRequired,
+      pm: _react.PropTypes.string.isRequired,
+      pmFormat: _react.PropTypes.string.isRequired,
+      separator: _react.PropTypes.string.isRequired
+    }),
+    value: _react.PropTypes.object
+  };
+  TimePickerDialog.defaultProps = {
+    active: false,
+    format: '24hr',
+    value: new Date()
+  };
+
+
+  return TimePickerDialog;
+};
+
+exports.default = factory;
\ No newline at end of file
diff --git a/lib/time_picker/_config.scss b/lib/time_picker/_config.scss
new file mode 100644
index 000000000..51fbd509b
--- /dev/null
+++ b/lib/time_picker/_config.scss
@@ -0,0 +1,27 @@
+$timepicker-header-font-size: 5.2 * $unit !default;
+$timepicker-header-padding: $unit !default;
+$timepicker-ampm-font-size: 1.6 * $unit !default;
+$timepicker-primary: $color-primary !default;
+$timepicker-primary-contrast: $color-primary-contrast !default;
+$timepicker-primary-dark: $color-primary-dark !default;
+$timepicker-primary-color: $timepicker-primary !default;
+$timepicker-primary-hover-color: rgba($timepicker-primary, .2) !default;
+$timepicker-primary-contrast-color: $timepicker-primary-contrast !default;
+$timepicker-primary-dark-color: $timepicker-primary-dark !default;
+$timepicker-ampm-height: 2.2 * $unit !default;
+$timepicker-ampm-width: 4 * $unit !default;
+$timepicker-dialog-width: 30 * $unit !default;
+
+$clock-padding: 1.5 * $unit 2 * $unit !default;
+$clock-primary: $color-primary !default;
+$clock-primary-contrast: $color-primary-contrast !default;
+$clock-primary-dark: $color-primary-dark !default;
+$clock-primary-color: $clock-primary !default;
+$clock-primary-hover-color: rgba($clock-primary, .2) !default;
+$clock-primary-contrast-color: $clock-primary-contrast !default;
+$clock-primary-dark-color: $clock-primary-dark !default;
+$clock-number-size: 2 * $unit !default;
+$clock-hand-width: .4 * $unit !default;
+$clock-hand-dot-size: 1 * $unit !default;
+$clock-knob-size: 3.4 * $unit !default;
+$clock-knob-small-size: 1.2 * $unit !default;
diff --git a/lib/time_picker/index.js b/lib/time_picker/index.js
new file mode 100644
index 000000000..8753ebd3e
--- /dev/null
+++ b/lib/time_picker/index.js
@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TimePicker = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _TimePicker = require('./TimePicker.js');
+
+var _TimePickerDialog = require('./TimePickerDialog.js');
+
+var _TimePickerDialog2 = _interopRequireDefault(_TimePickerDialog);
+
+var _dialog = require('../dialog');
+
+var _dialog2 = _interopRequireDefault(_dialog);
+
+var _input = require('../input');
+
+var _input2 = _interopRequireDefault(_input);
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var TimePickerDialog = (0, _TimePickerDialog2.default)(_dialog2.default);
+var ThemedTimePicker = (0, _reactCssThemr.themr)(_identifiers.TIME_PICKER, _theme2.default)((0, _TimePicker.timePickerFactory)(TimePickerDialog, _input2.default));
+exports.default = ThemedTimePicker;
+exports.TimePicker = ThemedTimePicker;
\ No newline at end of file
diff --git a/lib/time_picker/theme.scss b/lib/time_picker/theme.scss
new file mode 100644
index 000000000..ade3a0381
--- /dev/null
+++ b/lib/time_picker/theme.scss
@@ -0,0 +1,166 @@
+@import "http://github.com/base";
+@import "http://github.com/config";
+
+.input > [role="input"] {
+  cursor: pointer;
+}
+
+.header {
+  position: relative;
+  width: 100%;
+  padding: $timepicker-header-padding;
+  font-size: $timepicker-header-font-size;
+  color: $timepicker-primary-contrast-color;
+  text-align: center;
+  background: $timepicker-primary-color;
+}
+
+.hours, .minutes {
+  display: inline-block;
+  cursor: pointer;
+  opacity: .6;
+}
+
+.separator {
+  margin: 0 $timepicker-header-padding / 2;
+  opacity: .6;
+}
+
+.ampm {
+  position: absolute;
+  top: 50%;
+  right: 2 * $unit;
+  width: $timepicker-ampm-width;
+  height: $timepicker-ampm-height * 2;
+  margin-top: - $timepicker-ampm-height;
+  font-size: $timepicker-ampm-font-size;
+  line-height: $timepicker-ampm-height;
+  text-align: center;
+}
+
+.am, .pm {
+  display: block;
+  cursor: pointer;
+  opacity: .6;
+}
+
+.dialog {
+  width: $timepicker-dialog-width;
+  > [role="body"] {
+    padding: 0;
+    overflow-y: visible;
+  }
+  > [role="navigation"] > .button {
+    color: $timepicker-primary-color;
+    &:hover {
+      background: $timepicker-primary-hover-color;
+    }
+    &:focus:not(:active) {
+      background: $timepicker-primary-hover-color;
+    }
+  }
+  &.hoursDisplay .hours, &.minutesDisplay .minutes, &.amFormat .am,
+  &.pmFormat .pm {
+    opacity: 1;
+  }
+}
+
+.clock {
+  padding: $clock-padding;
+}
+
+.placeholder {
+  position: relative;
+  z-index: $z-index-high;
+}
+
+.clockWrapper {
+  position: absolute;
+  width: 100%;
+  background-color: $color-divider;
+  border-radius: 50%;
+}
+
+.face {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: $z-index-high;
+  cursor: pointer;
+  border-radius: 50%;
+  transform: translateX(-50%) translateY(-50%);
+}
+
+.number {
+  position: relative;
+  width: $clock-number-size;
+  height: $clock-number-size;
+  margin-top: - $clock-number-size / 2;
+  margin-left: - $clock-number-size / 2;
+  text-align: center;
+  pointer-events: none;
+  user-select: none;
+  &.active {
+    color: $clock-primary-contrast-color;
+  }
+}
+
+.hand {
+  position: absolute;
+  bottom: 50%;
+  left: 50%;
+  display: block;
+  width: $clock-hand-width;
+  margin-left: - $clock-hand-width / 2;
+  background-color: $clock-primary-color;
+  transform-origin: 50% 100%;
+  &:before {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    width: $clock-hand-dot-size;
+    height: $clock-hand-dot-size;
+    margin-bottom: - $clock-hand-dot-size / 2;
+    margin-left: - $clock-hand-dot-size / 2;
+    content: "";
+    background-color: $clock-primary-color;
+    border-radius: 50%;
+  }
+  &.small > .knob {
+    background-color: $clock-primary-hover-color;
+    &:after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: $clock-knob-small-size;
+      height: $clock-knob-small-size;
+      margin-top: - $clock-knob-small-size / 2;
+      margin-left: - $clock-knob-small-size / 2;
+      content: "";
+      background: $clock-primary-color;
+      border-radius: 50%;
+    }
+    &:before {
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      width: $clock-hand-width;
+      height: $clock-knob-size - $clock-knob-small-size;
+      margin-left: - $clock-hand-width / 2;
+      content: "";
+      background: $clock-primary-color;
+    }
+  }
+}
+
+.knob {
+  position: absolute;
+  top: - $clock-knob-size;
+  left: 50%;
+  width: $clock-knob-size;
+  height: $clock-knob-size;
+  margin-left: - $clock-knob-size / 2;
+  cursor: pointer;
+  background-color: $clock-primary-color;
+  border-radius: 50%;
+}
diff --git a/lib/tooltip/Tooltip.js b/lib/tooltip/Tooltip.js
new file mode 100644
index 000000000..0f0c4f146
--- /dev/null
+++ b/lib/tooltip/Tooltip.js
@@ -0,0 +1,140 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tooltipFactory = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory() {
+  var defaultTheme = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
+
+  var Tooltip = function Tooltip(ComposedComponent) {
+    var TooltippedComponent = function (_Component) {
+      _inherits(TooltippedComponent, _Component);
+
+      function TooltippedComponent() {
+        var _Object$getPrototypeO;
+
+        var _temp, _this, _ret;
+
+        _classCallCheck(this, TooltippedComponent);
+
+        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TooltippedComponent)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+          active: false
+        }, _this.handleMouseEnter = function (event) {
+          if (_this.timeout) clearTimeout(_this.timeout);
+          _this.timeout = setTimeout(function () {
+            return _this.setState({ active: true });
+          }, _this.props.tooltipDelay);
+          if (_this.props.onMouseEnter) _this.props.onMouseEnter(event);
+        }, _this.handleMouseLeave = function (event) {
+          if (_this.timeout) clearTimeout(_this.timeout);
+          if (_this.state.active) _this.setState({ active: false });
+          if (_this.props.onMouseLeave) _this.props.onMouseLeave(event);
+        }, _this.handleClick = function (event) {
+          if (_this.timeout) clearTimeout(_this.timeout);
+          if (_this.props.tooltipHideOnClick) _this.setState({ active: false });
+          if (_this.props.onClick) _this.props.onClick(event);
+        }, _temp), _possibleConstructorReturn(_this, _ret);
+      }
+
+      _createClass(TooltippedComponent, [{
+        key: 'render',
+        value: function render() {
+          var _props = this.props;
+          var children = _props.children;
+          var className = _props.className;
+          var tooltip = _props.tooltip;
+          var tooltipDelay = _props.tooltipDelay;
+          var tooltipHideOnClick = _props.tooltipHideOnClick;
+          var theme = _props.theme;
+
+          var other = _objectWithoutProperties(_props, ['children', 'className', 'tooltip', 'tooltipDelay', 'tooltipHideOnClick', 'theme']); //eslint-disable-line no-unused-vars
+
+
+          var composedClassName = (0, _classnames3.default)(this.props.theme.tooltipWrapper, className);
+          var tooltipClassName = (0, _classnames3.default)(this.props.theme.tooltip, _defineProperty({}, this.props.theme.tooltipActive, this.state.active));
+
+          return _react2.default.createElement(
+            ComposedComponent,
+            _extends({}, other, {
+              className: composedClassName,
+              onClick: this.handleClick,
+              onMouseEnter: this.handleMouseEnter,
+              onMouseLeave: this.handleMouseLeave
+            }),
+            children ? children : null,
+            _react2.default.createElement(
+              'span',
+              { 'data-react-toolbox': 'tooltip', className: tooltipClassName },
+              tooltip
+            )
+          );
+        }
+      }]);
+
+      return TooltippedComponent;
+    }(_react.Component);
+
+    TooltippedComponent.propTypes = {
+      children: _react.PropTypes.any,
+      className: _react.PropTypes.string,
+      onClick: _react.PropTypes.func,
+      onMouseEnter: _react.PropTypes.func,
+      onMouseLeave: _react.PropTypes.func,
+      theme: _react.PropTypes.shape({
+        tooltip: _react.PropTypes.string,
+        tooltipActive: _react.PropTypes.string,
+        tooltipWrapper: _react.PropTypes.string
+      }),
+      tooltip: _react.PropTypes.string,
+      tooltipDelay: _react.PropTypes.number,
+      tooltipHideOnClick: _react.PropTypes.bool
+    };
+    TooltippedComponent.defaultProps = {
+      className: '',
+      tooltipDelay: 0,
+      tooltipHideOnClick: true
+    };
+
+
+    return (0, _reactCssThemr.themr)(_identifiers.TOOLTIP, defaultTheme)(TooltippedComponent);
+  };
+
+  return Tooltip;
+};
+
+exports.default = factory();
+exports.tooltipFactory = factory;
\ No newline at end of file
diff --git a/lib/tooltip/_config.scss b/lib/tooltip/_config.scss
new file mode 100644
index 000000000..042410519
--- /dev/null
+++ b/lib/tooltip/_config.scss
@@ -0,0 +1,8 @@
+$tooltip-background: rgba(97,97,97,.9) !default;
+$tooltip-margin: 0.5 * $unit !default;
+$tooltip-border-radius: .2 * $unit !default;
+$tooltip-color: #fff !default;
+$tooltip-font-size: $unit !default;
+$tooltip-max-width: 17 * $unit !default;
+$tooltip-padding: .8 * $unit !default;
+$tooltip-animation-duration: 200ms !default;
diff --git a/lib/tooltip/index.js b/lib/tooltip/index.js
new file mode 100644
index 000000000..447d04c5b
--- /dev/null
+++ b/lib/tooltip/index.js
@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Tooltip = require('./Tooltip.js');
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = (0, _Tooltip.tooltipFactory)(_theme2.default);
\ No newline at end of file
diff --git a/lib/tooltip/theme.scss b/lib/tooltip/theme.scss
new file mode 100644
index 000000000..e588b1872
--- /dev/null
+++ b/lib/tooltip/theme.scss
@@ -0,0 +1,32 @@
+@import "http://github.com/base";
+@import "http://github.com/config";
+
+.tooltipWrapper {
+  position: relative;
+}
+
+.tooltip {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  z-index: $z-index-higher;
+  display: block;
+  max-width: $tooltip-max-width;
+  padding: $tooltip-padding;
+  margin: $tooltip-margin 0;
+  font-family: Roboto, sans-serif;
+  font-size: $tooltip-font-size;
+  font-weight: $font-weight-bold;
+  line-height: $font-size-small;
+  color: $tooltip-color;
+  text-align: center;
+  text-transform: none;
+  background: $tooltip-background;
+  border-radius: $tooltip-border-radius;
+  transition: $animation-curve-default $tooltip-animation-duration transform;
+  transform: scale(0) translateX(-50%);
+  transform-origin: top left;
+  &.tooltipActive {
+    transform: scale(1) translateX(-50%);
+  }
+}
diff --git a/lib/utils/events.js b/lib/utils/events.js
new file mode 100644
index 000000000..22be878af
--- /dev/null
+++ b/lib/utils/events.js
@@ -0,0 +1,69 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = {
+  getMousePosition: function getMousePosition(event) {
+    return {
+      x: event.pageX - window.scrollX,
+      y: event.pageY - window.scrollY
+    };
+  },
+  getTouchPosition: function getTouchPosition(event) {
+    return {
+      x: event.touches[0].pageX - window.scrollX,
+      y: event.touches[0].pageY - window.scrollY
+    };
+  },
+  pauseEvent: function pauseEvent(event) {
+    event.stopPropagation();
+    event.preventDefault();
+  },
+  addEventsToDocument: function addEventsToDocument(eventMap) {
+    for (var key in eventMap) {
+      document.addEventListener(key, eventMap[key], false);
+    }
+  },
+  removeEventsFromDocument: function removeEventsFromDocument(eventMap) {
+    for (var key in eventMap) {
+      document.removeEventListener(key, eventMap[key], false);
+    }
+  },
+  targetIsDescendant: function targetIsDescendant(event, parent) {
+    var node = event.target;
+    while (node !== null) {
+      if (node === parent) return true;
+      node = node.parentNode;
+    }
+    return false;
+  },
+  addEventListenerOnTransitionEnded: function addEventListenerOnTransitionEnded(element, fn) {
+    var eventName = transitionEventNamesFor(element);
+    if (!eventName) return false;
+    element.addEventListener(eventName, fn);
+    return true;
+  },
+  removeEventListenerOnTransitionEnded: function removeEventListenerOnTransitionEnded(element) {
+    var eventName = transitionEventNamesFor(element);
+    if (!eventName) return false;
+    element.removeEventListener(eventName);
+    return true;
+  }
+};
+
+
+var TRANSITIONS = {
+  'transition': 'transitionend',
+  'OTransition': 'oTransitionEnd',
+  'MozTransition': 'transitionend',
+  'WebkitTransition': 'webkitTransitionEnd'
+};
+
+function transitionEventNamesFor(element) {
+  for (var transition in TRANSITIONS) {
+    if (element.style[transition] !== undefined) {
+      return TRANSITIONS[transition];
+    }
+  }
+}
\ No newline at end of file
diff --git a/lib/utils/index.js b/lib/utils/index.js
new file mode 100644
index 000000000..d1bd0ea43
--- /dev/null
+++ b/lib/utils/index.js
@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.utils = exports.time = exports.prefixer = exports.events = undefined;
+
+var _events = require('./events.js');
+
+var _events2 = _interopRequireDefault(_events);
+
+var _prefixer = require('./prefixer.js');
+
+var _prefixer2 = _interopRequireDefault(_prefixer);
+
+var _time = require('./time.js');
+
+var _time2 = _interopRequireDefault(_time);
+
+var _utils = require('./utils.js');
+
+var _utils2 = _interopRequireDefault(_utils);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = { events: _events2.default, prefixer: _prefixer2.default, time: _time2.default, utils: _utils2.default };
+exports.events = _events2.default;
+exports.prefixer = _prefixer2.default;
+exports.time = _time2.default;
+exports.utils = _utils2.default;
\ No newline at end of file
diff --git a/lib/utils/polyfills.js b/lib/utils/polyfills.js
new file mode 100644
index 000000000..5cc5e7f3a
--- /dev/null
+++ b/lib/utils/polyfills.js
@@ -0,0 +1,11 @@
+'use strict';
+
+require('core-js/fn/array/from');
+
+require('core-js/fn/array/iterator');
+
+require('core-js/fn/map');
+
+require('core-js/fn/string/starts-with');
+
+require('core-js/fn/symbol');
\ No newline at end of file
diff --git a/lib/utils/prefixer.js b/lib/utils/prefixer.js
new file mode 100644
index 000000000..895313f8f
--- /dev/null
+++ b/lib/utils/prefixer.js
@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var WEBKIT = 'Webkit';
+var MICROSOFT = 'Ms';
+
+var properties = {
+  transform: [WEBKIT, MICROSOFT]
+};
+
+function capitalize(string) {
+  return string.charAt(0).toUpperCase() + string.substr(1);
+}
+
+function getPrefixes(property, value) {
+  return properties[property].reduce(function (acc, item) {
+    acc['' + item + capitalize(property)] = value;
+    return acc;
+  }, {});
+}
+
+function addPrefixesTo(style, property, value) {
+  var vendor = getPrefixes(property, value);
+  for (var prefix in vendor) {
+    style[prefix] = vendor[prefix];
+  }
+
+  return style;
+}
+
+function prefixer(style) {
+  var defaultValue = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
+
+  var _style = defaultValue;
+  for (var property in style) {
+    _style[property] = style[property];
+    if (properties[property]) {
+      addPrefixesTo(_style, property, style[property]);
+    }
+  }
+
+  return _style;
+}
+
+exports.default = prefixer;
\ No newline at end of file
diff --git a/lib/utils/testing.js b/lib/utils/testing.js
new file mode 100644
index 000000000..d8f2a1dd7
--- /dev/null
+++ b/lib/utils/testing.js
@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactAddonsTestUtils = require('react-addons-test-utils');
+
+var _reactAddonsTestUtils2 = _interopRequireDefault(_reactAddonsTestUtils);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = {
+  renderComponent: function renderComponent(Component) {
+    var props = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
+    var state = arguments.length <= 2 || arguments[2] === undefined ? {} : arguments[2];
+
+    var component = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(Component, props));
+    if (state !== {}) {
+      component.setState(state);
+    }
+    return component;
+  },
+  shallowRenderComponent: function shallowRenderComponent(component, props) {
+    var shallowRenderer = _reactAddonsTestUtils2.default.createRenderer();
+
+    for (var _len = arguments.length, children = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+      children[_key - 2] = arguments[_key];
+    }
+
+    shallowRenderer.render(_react2.default.createElement(component, props, children.length > 1 ? children : children[0]));
+    return shallowRenderer.getRenderOutput();
+  }
+};
\ No newline at end of file
diff --git a/lib/utils/time.js b/lib/utils/time.js
new file mode 100644
index 000000000..1bc166776
--- /dev/null
+++ b/lib/utils/time.js
@@ -0,0 +1,210 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var time = {
+  getDaysInMonth: function getDaysInMonth(d) {
+    var resultDate = this.getFirstDayOfMonth(d);
+    resultDate.setMonth(resultDate.getMonth() + 1);
+    resultDate.setDate(resultDate.getDate() - 1);
+    return resultDate.getDate();
+  },
+  getFirstDayOfMonth: function getFirstDayOfMonth(d) {
+    return new Date(d.getFullYear(), d.getMonth(), 1);
+  },
+  getFirstWeekDay: function getFirstWeekDay(d) {
+    return this.getFirstDayOfMonth(d).getDay();
+  },
+  getTimeMode: function getTimeMode(d) {
+    return d.getHours() >= 12 ? 'pm' : 'am';
+  },
+  getFullMonth: function getFullMonth(d) {
+    var month = d.getMonth();
+    switch (month) {
+      default:
+        return 'Unknown';
+      case 0:
+        return 'January';
+      case 1:
+        return 'February';
+      case 2:
+        return 'March';
+      case 3:
+        return 'April';
+      case 4:
+        return 'May';
+      case 5:
+        return 'June';
+      case 6:
+        return 'July';
+      case 7:
+        return 'August';
+      case 8:
+        return 'September';
+      case 9:
+        return 'October';
+      case 10:
+        return 'November';
+      case 11:
+        return 'December';
+    }
+  },
+  getShortMonth: function getShortMonth(d) {
+    var month = d.getMonth();
+    switch (month) {
+      default:
+        return 'Unknown';
+      case 0:
+        return 'Jan';
+      case 1:
+        return 'Feb';
+      case 2:
+        return 'Mar';
+      case 3:
+        return 'Apr';
+      case 4:
+        return 'May';
+      case 5:
+        return 'Jun';
+      case 6:
+        return 'Jul';
+      case 7:
+        return 'Aug';
+      case 8:
+        return 'Sep';
+      case 9:
+        return 'Oct';
+      case 10:
+        return 'Nov';
+      case 11:
+        return 'Dec';
+    }
+  },
+  getFullDayOfWeek: function getFullDayOfWeek(day) {
+    switch (day) {
+      default:
+        return 'Unknown';
+      case 0:
+        return 'Sunday';
+      case 1:
+        return 'Monday';
+      case 2:
+        return 'Tuesday';
+      case 3:
+        return 'Wednesday';
+      case 4:
+        return 'Thursday';
+      case 5:
+        return 'Friday';
+      case 6:
+        return 'Saturday';
+    }
+  },
+  getShortDayOfWeek: function getShortDayOfWeek(day) {
+    switch (day) {
+      default:
+        return 'Unknown';
+      case 0:
+        return 'Sun';
+      case 1:
+        return 'Mon';
+      case 2:
+        return 'Tue';
+      case 3:
+        return 'Wed';
+      case 4:
+        return 'Thu';
+      case 5:
+        return 'Fri';
+      case 6:
+        return 'Sat';
+    }
+  },
+  clone: function clone(d) {
+    return new Date(d.getTime());
+  },
+  cloneAsDate: function cloneAsDate(d) {
+    var clonedDate = this.clone(d);
+    clonedDate.setHours(0, 0, 0, 0);
+    return clonedDate;
+  },
+  isDateObject: function isDateObject(d) {
+    return d instanceof Date;
+  },
+  addDays: function addDays(d, days) {
+    var newDate = this.clone(d);
+    newDate.setDate(d.getDate() + days);
+    return newDate;
+  },
+  addMonths: function addMonths(d, months) {
+    var newDate = this.clone(d);
+    newDate.setMonth(d.getMonth() + months);
+    return newDate;
+  },
+  addYears: function addYears(d, years) {
+    var newDate = this.clone(d);
+    newDate.setFullYear(d.getFullYear() + years);
+    return newDate;
+  },
+  setDay: function setDay(d, day) {
+    var newDate = this.clone(d);
+    newDate.setDate(day);
+    return newDate;
+  },
+  setMonth: function setMonth(d, month) {
+    var newDate = this.clone(d);
+    newDate.setMonth(month);
+    return newDate;
+  },
+  setYear: function setYear(d, year) {
+    var newDate = this.clone(d);
+    newDate.setFullYear(year);
+    return newDate;
+  },
+  setHours: function setHours(d, hours) {
+    var newDate = this.clone(d);
+    newDate.setHours(hours);
+    return newDate;
+  },
+  setMinutes: function setMinutes(d, minutes) {
+    var newDate = this.clone(d);
+    newDate.setMinutes(minutes);
+    return newDate;
+  },
+  toggleTimeMode: function toggleTimeMode(d) {
+    var newDate = this.clone(d);
+    var hours = newDate.getHours();
+
+    newDate.setHours(hours - (hours > 12 ? -12 : 12));
+    return newDate;
+  },
+  formatTime: function formatTime(date, format) {
+    var hours = date.getHours();
+    var mins = date.getMinutes().toString();
+
+    if (format === 'ampm') {
+      var isAM = hours < 12;
+      var additional = isAM ? ' am' : ' pm';
+
+      hours = hours % 12;
+      hours = (hours || 12).toString();
+      if (mins.length < 2) mins = '0' + mins;
+
+      return hours + (mins === '00' ? '' : ':' + mins) + additional;
+    }
+
+    hours = hours.toString();
+    if (hours.length < 2) hours = '0' + hours;
+    if (mins.length < 2) mins = '0' + mins;
+    return hours + ':' + mins;
+  },
+  dateOutOfRange: function dateOutOfRange(date, minDate, maxDate) {
+    return minDate && !(date >= minDate) || maxDate && !(date <= maxDate);
+  },
+  formatDate: function formatDate(date) {
+    return date.getDate() + ' ' + time.getFullMonth(date) + ' ' + date.getFullYear();
+  }
+};
+
+exports.default = time;
\ No newline at end of file
diff --git a/lib/utils/utils.js b/lib/utils/utils.js
new file mode 100644
index 000000000..e31db2442
--- /dev/null
+++ b/lib/utils/utils.js
@@ -0,0 +1,64 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = {
+  angleFromPositions: function angleFromPositions(cx, cy, ex, ey) {
+    var theta = Math.atan2(ey - cy, ex - cx) + Math.PI / 2;
+    return theta * 180 / Math.PI;
+  },
+  angle360FromPositions: function angle360FromPositions(cx, cy, ex, ey) {
+    var angle = this.angleFromPositions(cx, cy, ex, ey);
+    return angle < 0 ? 360 + angle : angle;
+  },
+  range: function range() {
+    var start = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];
+    var stop = arguments.length <= 1 || arguments[1] === undefined ? null : arguments[1];
+    var step = arguments.length <= 2 || arguments[2] === undefined ? 1 : arguments[2];
+    var _start = 0;
+    var _stop = start;
+
+    if (stop !== null) {
+      _start = start;
+      _stop = stop;
+    }
+    var length = Math.max(Math.ceil((_stop - _start) / step), 0);
+    var range = Array(length);
+
+    for (var idx = 0; idx < length; idx++, _start += step) {
+      range[idx] = _start;
+    }
+
+    return range;
+  },
+  round: function round(number, decimals) {
+    if (!isNaN(parseFloat(number)) && isFinite(number)) {
+      var decimalPower = Math.pow(10, decimals);
+      return Math.round(parseFloat(number) * decimalPower) / decimalPower;
+    }
+    return NaN;
+  },
+  getViewport: function getViewport() {
+    return {
+      height: window.innerHeight || document.documentElement.offsetHeight,
+      width: window.innerWidth || document.documentElement.offsetWidth
+    };
+  },
+  cloneObject: function cloneObject(object) {
+    return JSON.parse(JSON.stringify(object));
+  },
+  inputTypeForPrototype: function inputTypeForPrototype(prototype) {
+    if (prototype === Date) return 'date';
+    if (prototype === Number) return 'number';
+    if (prototype === Boolean) return 'checkbox';
+    return 'text';
+  },
+  prepareValueForInput: function prepareValueForInput(value, type) {
+    if (type === 'date') return new Date(value).toISOString().slice(0, 10);
+    if (type === 'checkbox') {
+      return value ? 'on' : '';
+    }
+    return value;
+  }
+};
\ No newline at end of file

From 73c115fac79b0482dc266dd87819e8f601266a3d Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Fri, 3 Jun 2016 23:44:33 +0200
Subject: [PATCH 0610/1024] Better PropType syntax and delete required
 className api

---
 components/autocomplete/Autocomplete.js    | 20 ++++-----
 components/avatar/Avatar.js                |  8 ++--
 components/button/IconButton.js            | 32 +++++++--------
 components/card/Card.js                    |  6 +--
 components/card/CardActions.js             |  4 +-
 components/card/CardMedia.js               | 12 +++---
 components/card/CardText.js                |  4 +-
 components/card/CardTitle.js               | 10 ++---
 components/checkbox/Check.js               |  6 +--
 components/checkbox/Checkbox.js            |  8 ++--
 components/chip/Chip.js                    | 14 +++----
 components/date_picker/Calendar.js         | 10 ++---
 components/date_picker/CalendarDay.js      |  6 +--
 components/date_picker/CalendarMonth.js    |  8 ++--
 components/date_picker/DatePicker.js       |  2 +-
 components/date_picker/DatePickerDialog.js | 16 ++++----
 components/dialog/Dialog.js                | 12 +++---
 components/drawer/Drawer.js                | 10 ++---
 components/dropdown/Dropdown.js            | 24 +++++------
 components/layout/Layout.js                |  8 ++--
 components/layout/NavDrawer.js             | 46 ++++++++++-----------
 components/layout/Panel.js                 | 14 +++----
 components/layout/Sidebar.js               | 22 +++++-----
 components/link/Link.js                    |  6 +--
 components/list/List.js                    |  2 +-
 components/list/ListCheckbox.js            | 10 ++---
 components/list/ListDivider.js             |  4 +-
 components/list/ListItem.js                |  2 +-
 components/list/ListItemAction.js          |  2 +-
 components/list/ListItemActions.js         |  4 +-
 components/list/ListItemContent.js         |  4 +-
 components/list/ListItemLayout.js          |  6 +--
 components/list/ListItemText.js            |  4 +-
 components/menu/IconMenu.js                | 38 ++++++++---------
 components/menu/Menu.js                    | 48 +++++++++++-----------
 components/menu/MenuDivider.js             |  2 +-
 components/menu/MenuItem.js                | 14 +++----
 components/navigation/Navigation.js        |  8 ++--
 components/overlay/Overlay.js              | 26 ++++++------
 components/radio/Radio.js                  |  6 +--
 components/radio/RadioButton.js            |  8 ++--
 components/ripple/Ripple.js                | 28 ++++++-------
 components/snackbar/Snackbar.js            |  2 +-
 components/time_picker/Clock.js            |  6 +--
 components/time_picker/ClockFace.js        |  6 +--
 components/time_picker/ClockHand.js        |  4 +-
 components/time_picker/ClockMinutes.js     |  2 +-
 components/time_picker/TimePicker.js       |  2 +-
 components/time_picker/TimePickerDialog.js | 26 ++++++------
 49 files changed, 286 insertions(+), 286 deletions(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index bdcd31228..2c97131d7 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -27,16 +27,16 @@ const factory = (Chip, Input) => {
      showSuggestionsWhenValueIsSet: PropTypes.bool,
      source: PropTypes.any,
      theme: PropTypes.shape({
-       active: PropTypes.string.isRequired,
-       autocomplete: PropTypes.string.isRequired,
-       focus: PropTypes.string.isRequired,
-       input: PropTypes.string.isRequired,
-       label: PropTypes.string.isRequired,
-       suggestion: PropTypes.string.isRequired,
-       suggestions: PropTypes.string.isRequired,
-       up: PropTypes.string.isRequired,
-       value: PropTypes.string.isRequired,
-       values: PropTypes.string.isRequired
+       active: PropTypes.string,
+       autocomplete: PropTypes.string,
+       focus: PropTypes.string,
+       input: PropTypes.string,
+       label: PropTypes.string,
+       suggestion: PropTypes.string,
+       suggestions: PropTypes.string,
+       up: PropTypes.string,
+       value: PropTypes.string,
+       values: PropTypes.string
      }),
      value: PropTypes.any
    };
diff --git a/components/avatar/Avatar.js b/components/avatar/Avatar.js
index 98b98c969..baf0441e5 100644
--- a/components/avatar/Avatar.js
+++ b/components/avatar/Avatar.js
@@ -18,10 +18,10 @@ const factory = (FontIcon) => {
     className: PropTypes.string,
     icon: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
     image: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-    theme: React.PropTypes.shape({
-      avatar: React.PropTypes.string.isRequired,
-      image: React.PropTypes.string.isRequired,
-      letter: React.PropTypes.string.isRequired
+    theme: PropTypes.shape({
+      avatar: PropTypes.string,
+      image: PropTypes.string,
+      letter: PropTypes.string
     }),
     title: PropTypes.string
   };
diff --git a/components/button/IconButton.js b/components/button/IconButton.js
index a7d4da8c9..3b4b3438c 100644
--- a/components/button/IconButton.js
+++ b/components/button/IconButton.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
 import { BUTTON } from '../identifiers.js';
@@ -8,22 +8,22 @@ import rippleFactory from '../ripple/Ripple.js';
 const factory = (ripple, FontIcon) => {
   class IconButton extends Component {
     static propTypes = {
-      accent: React.PropTypes.bool,
-      children: React.PropTypes.node,
-      className: React.PropTypes.string,
-      disabled: React.PropTypes.bool,
-      href: React.PropTypes.string,
-      icon: React.PropTypes.oneOfType([
-        React.PropTypes.string,
-        React.PropTypes.element
+      accent: PropTypes.bool,
+      children: PropTypes.node,
+      className: PropTypes.string,
+      disabled: PropTypes.bool,
+      href: PropTypes.string,
+      icon: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.element
       ]),
-      inverse: React.PropTypes.bool,
-      neutral: React.PropTypes.bool,
-      onMouseLeave: React.PropTypes.func,
-      onMouseUp: React.PropTypes.func,
-      primary: React.PropTypes.bool,
-      theme: React.PropTypes.object,
-      type: React.PropTypes.string
+      inverse: PropTypes.bool,
+      neutral: PropTypes.bool,
+      onMouseLeave: PropTypes.func,
+      onMouseUp: PropTypes.func,
+      primary: PropTypes.bool,
+      theme: PropTypes.object,
+      type: PropTypes.string
     };
 
     static defaultProps = {
diff --git a/components/card/Card.js b/components/card/Card.js
index af621993a..23858199d 100644
--- a/components/card/Card.js
+++ b/components/card/Card.js
@@ -19,9 +19,9 @@ Card.propTypes = {
   children: PropTypes.any,
   className: PropTypes.string,
   raised: PropTypes.bool,
-  theme: React.PropTypes.shape({
-    card: React.PropTypes.string,
-    raised: React.PropTypes.string
+  theme: PropTypes.shape({
+    card: PropTypes.string,
+    raised: PropTypes.string
   })
 };
 
diff --git a/components/card/CardActions.js b/components/card/CardActions.js
index bd83a57b8..951355ddb 100644
--- a/components/card/CardActions.js
+++ b/components/card/CardActions.js
@@ -12,8 +12,8 @@ const CardActions = ({ children, className, theme, ...other }) => (
 CardActions.propTypes = {
   children: PropTypes.any,
   className: PropTypes.string,
-  theme: React.PropTypes.shape({
-    cardActions: React.PropTypes.string.isRequired
+  theme: PropTypes.shape({
+    cardActions: PropTypes.string
   })
 };
 
diff --git a/components/card/CardMedia.js b/components/card/CardMedia.js
index 919392383..7d2ecd868 100644
--- a/components/card/CardMedia.js
+++ b/components/card/CardMedia.js
@@ -36,12 +36,12 @@ CardMedia.propTypes = {
     PropTypes.string,
     PropTypes.element
   ]),
-  theme: React.PropTypes.shape({
-    cardMedia: React.PropTypes.string.isRequired,
-    content: React.PropTypes.string.isRequired,
-    contentOverlay: React.PropTypes.string.isRequired,
-    square: React.PropTypes.string.isRequired,
-    wide: React.PropTypes.string.isRequired
+  theme: PropTypes.shape({
+    cardMedia: PropTypes.string,
+    content: PropTypes.string,
+    contentOverlay: PropTypes.string,
+    square: PropTypes.string,
+    wide: PropTypes.string
   })
 };
 
diff --git a/components/card/CardText.js b/components/card/CardText.js
index df13ffc61..8a5df1311 100644
--- a/components/card/CardText.js
+++ b/components/card/CardText.js
@@ -12,8 +12,8 @@ const CardText = ({ children, className, theme, ...other }) => (
 CardText.propTypes = {
   children: PropTypes.any,
   className: PropTypes.string,
-  theme: React.PropTypes.shape({
-    cardText: React.PropTypes.string.isRequired
+  theme: PropTypes.shape({
+    cardText: PropTypes.string
   })
 };
 
diff --git a/components/card/CardTitle.js b/components/card/CardTitle.js
index a9e83ef38..bbeda1945 100644
--- a/components/card/CardTitle.js
+++ b/components/card/CardTitle.js
@@ -41,11 +41,11 @@ const factory = (Avatar) => {
       PropTypes.string,
       PropTypes.element
     ]),
-    theme: React.PropTypes.shape({
-      large: React.PropTypes.string.isRequired,
-      title: React.PropTypes.string.isRequired,
-      small: React.PropTypes.string.isRequired,
-      subtitle: React.PropTypes.string.isRequired
+    theme: PropTypes.shape({
+      large: PropTypes.string,
+      title: PropTypes.string,
+      small: PropTypes.string,
+      subtitle: PropTypes.string
     }),
     title: PropTypes.oneOfType([
       PropTypes.string,
diff --git a/components/checkbox/Check.js b/components/checkbox/Check.js
index a7fe24939..e06c44423 100644
--- a/components/checkbox/Check.js
+++ b/components/checkbox/Check.js
@@ -16,9 +16,9 @@ const factory = (ripple) => {
     checked: PropTypes.bool,
     children: PropTypes.any,
     onMouseDown: PropTypes.func,
-    theme: React.PropTypes.shape({
-      check: React.PropTypes.string.isRequired,
-      checked: React.PropTypes.string.isRequired
+    theme: PropTypes.shape({
+      check: PropTypes.string,
+      checked: PropTypes.string
     })
   };
 
diff --git a/components/checkbox/Checkbox.js b/components/checkbox/Checkbox.js
index 1b49b4993..23b2ae420 100644
--- a/components/checkbox/Checkbox.js
+++ b/components/checkbox/Checkbox.js
@@ -14,10 +14,10 @@ const factory = (Check) => {
       label: PropTypes.any,
       onChange: PropTypes.func,
       theme: PropTypes.shape({
-        disabled: PropTypes.string.isRequired,
-        field: PropTypes.string.isRequired,
-        input: PropTypes.string.isRequired,
-        ripple: PropTypes.string.isRequired
+        disabled: PropTypes.string,
+        field: PropTypes.string,
+        input: PropTypes.string,
+        ripple: PropTypes.string
       })
     };
 
diff --git a/components/chip/Chip.js b/components/chip/Chip.js
index b318747ad..3e8ea62d1 100644
--- a/components/chip/Chip.js
+++ b/components/chip/Chip.js
@@ -38,13 +38,13 @@ const factory = (Avatar) => {
     className: PropTypes.string,
     deletable: PropTypes.bool,
     onDeleteClick: PropTypes.func,
-    theme: React.PropTypes.shape({
-      avatar: React.PropTypes.string.isRequired,
-      chip: React.PropTypes.string.isRequired,
-      deletable: React.PropTypes.string.isRequired,
-      delete: React.PropTypes.string.isRequired,
-      deleteIcon: React.PropTypes.string.isRequired,
-      deleteX: React.PropTypes.string.isRequired
+    theme: PropTypes.shape({
+      avatar: PropTypes.string,
+      chip: PropTypes.string,
+      deletable: PropTypes.string,
+      delete: PropTypes.string,
+      deleteIcon: PropTypes.string,
+      deleteX: PropTypes.string
     })
   };
 
diff --git a/components/date_picker/Calendar.js b/components/date_picker/Calendar.js
index 50a48d26a..28297e084 100644
--- a/components/date_picker/Calendar.js
+++ b/components/date_picker/Calendar.js
@@ -14,11 +14,11 @@ const factory = (IconButton) => {
       onChange: PropTypes.func,
       selectedDate: PropTypes.object,
       theme: PropTypes.shape({
-        active: PropTypes.string.isRequired,
-        calendar: PropTypes.string.isRequired,
-        next: PropTypes.string.isRequired,
-        prev: PropTypes.string.isRequired,
-        years: PropTypes.string.isRequired
+        active: PropTypes.string,
+        calendar: PropTypes.string,
+        next: PropTypes.string,
+        prev: PropTypes.string,
+        years: PropTypes.string
       }),
       viewDate: PropTypes.object
     };
diff --git a/components/date_picker/CalendarDay.js b/components/date_picker/CalendarDay.js
index d58dcc1b6..e22306e0c 100644
--- a/components/date_picker/CalendarDay.js
+++ b/components/date_picker/CalendarDay.js
@@ -9,9 +9,9 @@ class Day extends Component {
     onClick: PropTypes.func,
     selectedDate: PropTypes.object,
     theme: PropTypes.shape({
-      active: PropTypes.string.isRequired,
-      day: PropTypes.string.isRequired,
-      disabled: PropTypes.string.isRequired
+      active: PropTypes.string,
+      day: PropTypes.string,
+      disabled: PropTypes.string
     }),
     viewDate: PropTypes.object
   };
diff --git a/components/date_picker/CalendarMonth.js b/components/date_picker/CalendarMonth.js
index b0e000de8..001121d19 100644
--- a/components/date_picker/CalendarMonth.js
+++ b/components/date_picker/CalendarMonth.js
@@ -10,10 +10,10 @@ class Month extends Component {
     onDayClick: PropTypes.func,
     selectedDate: PropTypes.object,
     theme: PropTypes.shape({
-      days: PropTypes.string.isRequired,
-      month: PropTypes.string.isRequired,
-      title: PropTypes.string.isRequired,
-      week: PropTypes.string.isRequired
+      days: PropTypes.string,
+      month: PropTypes.string,
+      title: PropTypes.string,
+      week: PropTypes.string
     }),
     viewDate: PropTypes.object
   };
diff --git a/components/date_picker/DatePicker.js b/components/date_picker/DatePicker.js
index 788303aec..78cb10ad2 100644
--- a/components/date_picker/DatePicker.js
+++ b/components/date_picker/DatePicker.js
@@ -28,7 +28,7 @@ const factory = (Input, DatePickerDialog) => {
       minDate: PropTypes.object,
       onChange: PropTypes.func,
       theme: PropTypes.shape({
-        input: PropTypes.string.isRequired
+        input: PropTypes.string
       }),
       value: PropTypes.oneOfType([
         PropTypes.instanceOf(Date),
diff --git a/components/date_picker/DatePickerDialog.js b/components/date_picker/DatePickerDialog.js
index b71aa8a27..e46516a46 100644
--- a/components/date_picker/DatePickerDialog.js
+++ b/components/date_picker/DatePickerDialog.js
@@ -13,14 +13,14 @@ const factory = (Dialog, Calendar) => {
       onDismiss: PropTypes.func,
       onSelect: PropTypes.func,
       theme: PropTypes.shape({
-        button: PropTypes.string.isRequired,
-        calendarWrapper: PropTypes.string.isRequired,
-        date: PropTypes.string.isRequired,
-        dialog: PropTypes.string.isRequired,
-        header: PropTypes.string.isRequired,
-        monthsDisplay: PropTypes.string.isRequired,
-        year: PropTypes.string.isRequired,
-        yearsDisplay: PropTypes.string.isRequired
+        button: PropTypes.string,
+        calendarWrapper: PropTypes.string,
+        date: PropTypes.string,
+        dialog: PropTypes.string,
+        header: PropTypes.string,
+        monthsDisplay: PropTypes.string,
+        year: PropTypes.string,
+        yearsDisplay: PropTypes.string
       }),
       value: PropTypes.object
     };
diff --git a/components/dialog/Dialog.js b/components/dialog/Dialog.js
index a875997b8..449d9cff4 100644
--- a/components/dialog/Dialog.js
+++ b/components/dialog/Dialog.js
@@ -53,12 +53,12 @@ const factory = (Overlay, Button) => {
     onOverlayMouseMove: PropTypes.func,
     onOverlayMouseUp: PropTypes.func,
     theme: PropTypes.shape({
-      active: PropTypes.string.isRequired,
-      body: PropTypes.string.isRequired,
-      button: PropTypes.string.isRequired,
-      dialog: PropTypes.string.isRequired,
-      navigation: PropTypes.string.isRequired,
-      title: PropTypes.string.isRequired
+      active: PropTypes.string,
+      body: PropTypes.string,
+      button: PropTypes.string,
+      dialog: PropTypes.string,
+      navigation: PropTypes.string,
+      title: PropTypes.string
     }),
     title: PropTypes.string,
     type: PropTypes.string
diff --git a/components/drawer/Drawer.js b/components/drawer/Drawer.js
index 7c3576294..c2b3ae4a9 100644
--- a/components/drawer/Drawer.js
+++ b/components/drawer/Drawer.js
@@ -28,11 +28,11 @@ const factory = (Overlay) => {
     className: PropTypes.string,
     onOverlayClick: PropTypes.func,
     theme: PropTypes.shape({
-      active: PropTypes.string.isRequired,
-      content: PropTypes.string.isRequired,
-      drawer: PropTypes.string.isRequired,
-      left: PropTypes.string.isRequired,
-      right: PropTypes.string.isRequired
+      active: PropTypes.string,
+      content: PropTypes.string,
+      drawer: PropTypes.string,
+      left: PropTypes.string,
+      right: PropTypes.string
     }),
     type: PropTypes.oneOf(['left', 'right'])
   };
diff --git a/components/dropdown/Dropdown.js b/components/dropdown/Dropdown.js
index c60413842..086ffc541 100644
--- a/components/dropdown/Dropdown.js
+++ b/components/dropdown/Dropdown.js
@@ -21,18 +21,18 @@ const factory = (Input) => {
       source: PropTypes.array.isRequired,
       template: PropTypes.func,
       theme: PropTypes.shape({
-        active: PropTypes.string.isRequired,
-        disabled: PropTypes.string.isRequired,
-        dropdown: PropTypes.string.isRequired,
-        error: PropTypes.string.isRequired,
-        errored: PropTypes.string.isRequired,
-        field: PropTypes.string.isRequired,
-        label: PropTypes.string.isRequired,
-        selected: PropTypes.string.isRequired,
-        templateValue: PropTypes.string.isRequired,
-        up: PropTypes.string.isRequired,
-        value: PropTypes.string.isRequired,
-        values: PropTypes.string.isRequired
+        active: PropTypes.string,
+        disabled: PropTypes.string,
+        dropdown: PropTypes.string,
+        error: PropTypes.string,
+        errored: PropTypes.string,
+        field: PropTypes.string,
+        label: PropTypes.string,
+        selected: PropTypes.string,
+        templateValue: PropTypes.string,
+        up: PropTypes.string,
+        value: PropTypes.string,
+        values: PropTypes.string
       }),
       value: PropTypes.oneOfType([
         PropTypes.string,
diff --git a/components/layout/Layout.js b/components/layout/Layout.js
index f3eecde5e..2a2a08e27 100644
--- a/components/layout/Layout.js
+++ b/components/layout/Layout.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import { themr } from 'react-css-themr';
 import classnames from 'classnames';
 import { LAYOUT } from '../identifiers.js';
@@ -45,9 +45,9 @@ Layout.propTypes = {
       );
     }
   },
-  className: React.PropTypes.string,
-  theme: React.PropTypes.shape({
-    layout: React.PropTypes.string.isRequired
+  className: PropTypes.string,
+  theme: PropTypes.shape({
+    layout: PropTypes.string
   })
 };
 
diff --git a/components/layout/NavDrawer.js b/components/layout/NavDrawer.js
index 0970c5684..2abba2c8a 100644
--- a/components/layout/NavDrawer.js
+++ b/components/layout/NavDrawer.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
 import { LAYOUT } from '../identifiers.js';
@@ -27,29 +27,29 @@ const NavDrawer = ({ active, children, className, onOverlayClick, permanentAt, p
 };
 
 NavDrawer.propTypes = {
-  active: React.PropTypes.bool,
-  children: React.PropTypes.any,
-  className: React.PropTypes.string,
-  onOverlayClick: React.PropTypes.func,
-  permanentAt: React.PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'xxl', 'xxxl']),
-  pinned: React.PropTypes.bool,
-  scrollY: React.PropTypes.bool,
-  theme: React.PropTypes.shape({
-    active: React.PropTypes.string.isRequired,
-    drawerContent: React.PropTypes.string.isRequired,
-    lgPermanent: React.PropTypes.string.isRequired,
-    mdPermanent: React.PropTypes.string.isRequired,
-    navDrawer: React.PropTypes.string.isRequired,
-    pinned: React.PropTypes.string.isRequired,
-    scrim: React.PropTypes.string.isRequired,
-    scrollY: React.PropTypes.string.isRequired,
-    smPermanent: React.PropTypes.string.isRequired,
-    wide: React.PropTypes.string.isRequired,
-    xlPermanent: React.PropTypes.string.isRequired,
-    xxlPermanent: React.PropTypes.string.isRequired,
-    xxxlPermanent: React.PropTypes.string.isRequired
+  active: PropTypes.bool,
+  children: PropTypes.any,
+  className: PropTypes.string,
+  onOverlayClick: PropTypes.func,
+  permanentAt: PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'xxl', 'xxxl']),
+  pinned: PropTypes.bool,
+  scrollY: PropTypes.bool,
+  theme: PropTypes.shape({
+    active: PropTypes.string,
+    drawerContent: PropTypes.string,
+    lgPermanent: PropTypes.string,
+    mdPermanent: PropTypes.string,
+    navDrawer: PropTypes.string,
+    pinned: PropTypes.string,
+    scrim: PropTypes.string,
+    scrollY: PropTypes.string,
+    smPermanent: PropTypes.string,
+    wide: PropTypes.string,
+    xlPermanent: PropTypes.string,
+    xxlPermanent: PropTypes.string,
+    xxxlPermanent: PropTypes.string
   }),
-  width: React.PropTypes.oneOf(['normal', 'wide'])
+  width: PropTypes.oneOf(['normal', 'wide'])
 };
 
 NavDrawer.defaultProps = {
diff --git a/components/layout/Panel.js b/components/layout/Panel.js
index 3114fc1cb..ffc1e6191 100644
--- a/components/layout/Panel.js
+++ b/components/layout/Panel.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
 import { LAYOUT } from '../identifiers.js';
@@ -16,12 +16,12 @@ const Panel = ({ children, className, scrollY, theme }) => {
 };
 
 Panel.propTypes = {
-  children: React.PropTypes.any,
-  className: React.PropTypes.string,
-  scrollY: React.PropTypes.bool,
-  theme: React.PropTypes.shape({
-    panel: React.PropTypes.string.isRequired,
-    scrollY: React.PropTypes.string.isRequired
+  children: PropTypes.any,
+  className: PropTypes.string,
+  scrollY: PropTypes.bool,
+  theme: PropTypes.shape({
+    panel: PropTypes.string,
+    scrollY: PropTypes.string
   })
 };
 
diff --git a/components/layout/Sidebar.js b/components/layout/Sidebar.js
index b8a9cbd25..7b8923a26 100644
--- a/components/layout/Sidebar.js
+++ b/components/layout/Sidebar.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
 import { LAYOUT } from '../identifiers.js';
@@ -22,17 +22,17 @@ const Sidebar = ({ children, className, pinned, scrollY, theme, width }) => {
 };
 
 Sidebar.propTypes = {
-  children: React.PropTypes.any,
-  className: React.PropTypes.string,
-  pinned: React.PropTypes.bool,
-  scrollY: React.PropTypes.bool,
-  theme: React.PropTypes.shape({
-    pinned: React.PropTypes.string.isRequired,
-    scrollY: React.PropTypes.string.isRequired,
-    sidebar: React.PropTypes.string.isRequired,
-    sidebarContent: React.PropTypes.string.isRequired
+  children: PropTypes.any,
+  className: PropTypes.string,
+  pinned: PropTypes.bool,
+  scrollY: PropTypes.bool,
+  theme: PropTypes.shape({
+    pinned: PropTypes.string,
+    scrollY: PropTypes.string,
+    sidebar: PropTypes.string,
+    sidebarContent: PropTypes.string
   }),
-  width: React.PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 25, 33, 50, 66, 75, 100])
+  width: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 25, 33, 50, 66, 75, 100])
 };
 
 Sidebar.defaultProps = {
diff --git a/components/link/Link.js b/components/link/Link.js
index b7d076afb..f37bfc6eb 100644
--- a/components/link/Link.js
+++ b/components/link/Link.js
@@ -30,9 +30,9 @@ Link.propTypes = {
   ]),
   label: PropTypes.string,
   theme: PropTypes.shape({
-    active: PropTypes.string.isRequired,
-    icon: PropTypes.string.isRequired,
-    link: PropTypes.string.isRequired
+    active: PropTypes.string,
+    icon: PropTypes.string,
+    link: PropTypes.string
   })
 };
 
diff --git a/components/list/List.js b/components/list/List.js
index b99f20f83..6091e496c 100644
--- a/components/list/List.js
+++ b/components/list/List.js
@@ -12,7 +12,7 @@ const factory = (ListItem) => {
       ripple: PropTypes.bool,
       selectable: PropTypes.bool,
       theme: PropTypes.shape({
-        list: PropTypes.string.isRequired
+        list: PropTypes.string
       })
     };
 
diff --git a/components/list/ListCheckbox.js b/components/list/ListCheckbox.js
index 8d3adcbac..c50379dde 100644
--- a/components/list/ListCheckbox.js
+++ b/components/list/ListCheckbox.js
@@ -28,7 +28,7 @@ const factory = (Checkbox, ListItemContent) => {
   };
 
   ListCheckbox.propTypes = {
-    caption: PropTypes.string.isRequired,
+    caption: PropTypes.string,
     checked: PropTypes.bool,
     className: PropTypes.string,
     disabled: PropTypes.bool,
@@ -38,10 +38,10 @@ const factory = (Checkbox, ListItemContent) => {
     onChange: PropTypes.func,
     onFocus: PropTypes.func,
     theme: PropTypes.shape({
-      checkbox: PropTypes.string.isRequired,
-      checkboxItem: PropTypes.string.isRequired,
-      disabled: PropTypes.string.isRequired,
-      item: PropTypes.string.isRequired
+      checkbox: PropTypes.string,
+      checkboxItem: PropTypes.string,
+      disabled: PropTypes.string,
+      item: PropTypes.string
     })
   };
 
diff --git a/components/list/ListDivider.js b/components/list/ListDivider.js
index 0315c0421..f1cc252f8 100644
--- a/components/list/ListDivider.js
+++ b/components/list/ListDivider.js
@@ -9,8 +9,8 @@ const ListDivider = ({inset, theme}) => (
 ListDivider.propTypes = {
   inset: PropTypes.bool,
   theme: PropTypes.shape({
-    divider: PropTypes.string.isRequired,
-    inset: PropTypes.string.isRequired
+    divider: PropTypes.string,
+    inset: PropTypes.string
   })
 };
 
diff --git a/components/list/ListItem.js b/components/list/ListItem.js
index 619211933..2cea098d7 100644
--- a/components/list/ListItem.js
+++ b/components/list/ListItem.js
@@ -14,7 +14,7 @@ const factory = (ripple, ListItemLayout, ListItemContent) => {
       onClick: PropTypes.func,
       ripple: PropTypes.bool,
       theme: PropTypes.shape({
-        listItem: PropTypes.string.isRequired
+        listItem: PropTypes.string
       }),
       to: PropTypes.string
     };
diff --git a/components/list/ListItemAction.js b/components/list/ListItemAction.js
index 3828c2692..f424cac50 100644
--- a/components/list/ListItemAction.js
+++ b/components/list/ListItemAction.js
@@ -16,7 +16,7 @@ const ListItemAction = ({action, theme}) => {
 ListItemAction.propTypes = {
   action: PropTypes.object,
   theme: PropTypes.shape({
-    itemAction: React.PropTypes.string.isRequired
+    itemAction: PropTypes.string
   })
 };
 
diff --git a/components/list/ListItemActions.js b/components/list/ListItemActions.js
index e3a66af40..da7313bb4 100644
--- a/components/list/ListItemActions.js
+++ b/components/list/ListItemActions.js
@@ -19,8 +19,8 @@ const factory = (ListItemAction) => {
   ListItemActions.propTypes = {
     children: PropTypes.any,
     theme: PropTypes.shape({
-      left: PropTypes.string.isRequired,
-      right: PropTypes.string.isRequired
+      left: PropTypes.string,
+      right: PropTypes.string
     }),
     type: PropTypes.oneOf(['left', 'right'])
   };
diff --git a/components/list/ListItemContent.js b/components/list/ListItemContent.js
index bf88bc415..0c66d2d1b 100644
--- a/components/list/ListItemContent.js
+++ b/components/list/ListItemContent.js
@@ -13,8 +13,8 @@ const factory = (ListItemText) => {
       children: PropTypes.any,
       legend: PropTypes.string,
       theme: PropTypes.shape({
-        itemContentRoot: PropTypes.string.isRequired,
-        large: PropTypes.string.isRequired
+        itemContentRoot: PropTypes.string,
+        large: PropTypes.string
       }),
       type: PropTypes.oneOf(types)
     };
diff --git a/components/list/ListItemLayout.js b/components/list/ListItemLayout.js
index 0dcfc1bab..2fcb95567 100644
--- a/components/list/ListItemLayout.js
+++ b/components/list/ListItemLayout.js
@@ -58,9 +58,9 @@ const factory = (Avatar, ListItemContent, ListItemActions) => {
     ]),
     selectable: PropTypes.bool,
     theme: PropTypes.shape({
-      disabled: PropTypes.string.isRequired,
-      item: PropTypes.string.isRequired,
-      selectable: PropTypes.string.isRequired
+      disabled: PropTypes.string,
+      item: PropTypes.string,
+      selectable: PropTypes.string
     }),
     to: PropTypes.string
   };
diff --git a/components/list/ListItemText.js b/components/list/ListItemText.js
index cbb083630..6d930c786 100644
--- a/components/list/ListItemText.js
+++ b/components/list/ListItemText.js
@@ -17,8 +17,8 @@ ListItemText.propTypes = {
   className: PropTypes.string,
   primary: PropTypes.bool,
   theme: PropTypes.shape({
-    itemText: PropTypes.string.isRequired,
-    primary: PropTypes.string.isRequired
+    itemText: PropTypes.string,
+    primary: PropTypes.string
   })
 };
 
diff --git a/components/menu/IconMenu.js b/components/menu/IconMenu.js
index 864d68b3c..bd321f990 100644
--- a/components/menu/IconMenu.js
+++ b/components/menu/IconMenu.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
 import { MENU } from '../identifiers.js';
@@ -6,26 +6,26 @@ import InjectIconButton from '../button/IconButton.js';
 import InjectMenu from './Menu.js';
 
 const factory = (IconButton, Menu) => {
-  class IconMenu extends React.Component {
+  class IconMenu extends Component {
     static propTypes = {
-      children: React.PropTypes.node,
-      className: React.PropTypes.string,
-      icon: React.PropTypes.oneOfType([
-        React.PropTypes.string,
-        React.PropTypes.element
+      children: PropTypes.node,
+      className: PropTypes.string,
+      icon: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.element
       ]),
-      iconRipple: React.PropTypes.bool,
-      menuRipple: React.PropTypes.bool,
-      onClick: React.PropTypes.func,
-      onHide: React.PropTypes.func,
-      onSelect: React.PropTypes.func,
-      onShow: React.PropTypes.func,
-      position: React.PropTypes.string,
-      selectable: React.PropTypes.bool,
-      selected: React.PropTypes.any,
-      theme: React.PropTypes.shape({
-        icon: React.PropTypes.string.isRequired,
-        iconMenu: React.PropTypes.string.isRequired
+      iconRipple: PropTypes.bool,
+      menuRipple: PropTypes.bool,
+      onClick: PropTypes.func,
+      onHide: PropTypes.func,
+      onSelect: PropTypes.func,
+      onShow: PropTypes.func,
+      position: PropTypes.string,
+      selectable: PropTypes.bool,
+      selected: PropTypes.any,
+      theme: PropTypes.shape({
+        icon: PropTypes.string,
+        iconMenu: PropTypes.string
       })
     };
 
diff --git a/components/menu/Menu.js b/components/menu/Menu.js
index 747a941ff..b3cdc5eef 100644
--- a/components/menu/Menu.js
+++ b/components/menu/Menu.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
@@ -16,30 +16,30 @@ const POSITION = {
 };
 
 const factory = (MenuItem) => {
-  class Menu extends React.Component {
+  class Menu extends Component {
     static propTypes = {
-      active: React.PropTypes.bool,
-      children: React.PropTypes.node,
-      className: React.PropTypes.string,
-      onHide: React.PropTypes.func,
-      onSelect: React.PropTypes.func,
-      onShow: React.PropTypes.func,
-      outline: React.PropTypes.bool,
-      position: React.PropTypes.string,
-      ripple: React.PropTypes.bool,
-      selectable: React.PropTypes.bool,
-      selected: React.PropTypes.any,
-      theme: React.PropTypes.shape({
-        active: React.PropTypes.string.isRequired,
-        bottomLeft: React.PropTypes.string.isRequired,
-        bottomRight: React.PropTypes.string.isRequired,
-        menu: React.PropTypes.string.isRequired,
-        menuInner: React.PropTypes.string.isRequired,
-        outline: React.PropTypes.string.isRequired,
-        rippled: React.PropTypes.string.isRequired,
-        static: React.PropTypes.string.isRequired,
-        topLeft: React.PropTypes.string.isRequired,
-        topRight: React.PropTypes.string.isRequired
+      active: PropTypes.bool,
+      children: PropTypes.node,
+      className: PropTypes.string,
+      onHide: PropTypes.func,
+      onSelect: PropTypes.func,
+      onShow: PropTypes.func,
+      outline: PropTypes.bool,
+      position: PropTypes.string,
+      ripple: PropTypes.bool,
+      selectable: PropTypes.bool,
+      selected: PropTypes.any,
+      theme: PropTypes.shape({
+        active: PropTypes.string,
+        bottomLeft: PropTypes.string,
+        bottomRight: PropTypes.string,
+        menu: PropTypes.string,
+        menuInner: PropTypes.string,
+        outline: PropTypes.string,
+        rippled: PropTypes.string,
+        static: PropTypes.string,
+        topLeft: PropTypes.string,
+        topRight: PropTypes.string
       })
     };
 
diff --git a/components/menu/MenuDivider.js b/components/menu/MenuDivider.js
index d120da5e1..b99cf87c8 100644
--- a/components/menu/MenuDivider.js
+++ b/components/menu/MenuDivider.js
@@ -8,7 +8,7 @@ const MenuDivider = ({ theme }) => (
 
 MenuDivider.propTypes = {
   theme: PropTypes.shape({
-    menuDivider: PropTypes.string.isRequired
+    menuDivider: PropTypes.string
   })
 };
 
diff --git a/components/menu/MenuItem.js b/components/menu/MenuItem.js
index 26dec4a30..4ce2dc185 100644
--- a/components/menu/MenuItem.js
+++ b/components/menu/MenuItem.js
@@ -8,7 +8,7 @@ import rippleFactory from '../ripple/Ripple.js';
 const factory = (ripple) => {
   class MenuItem extends Component {
     static propTypes = {
-      caption: PropTypes.string.isRequired,
+      caption: PropTypes.string,
       children: PropTypes.any,
       className: PropTypes.string,
       disabled: PropTypes.bool,
@@ -20,12 +20,12 @@ const factory = (ripple) => {
       selected: PropTypes.bool,
       shortcut: PropTypes.string,
       theme: PropTypes.shape({
-        caption: PropTypes.string.isRequired,
-        disabled: PropTypes.string.isRequired,
-        icon: PropTypes.string.isRequired,
-        menuItem: PropTypes.string.isRequired,
-        selected: PropTypes.string.isRequired,
-        shortcut: PropTypes.string.isRequired
+        caption: PropTypes.string,
+        disabled: PropTypes.string,
+        icon: PropTypes.string,
+        menuItem: PropTypes.string,
+        selected: PropTypes.string,
+        shortcut: PropTypes.string
       })
     };
 
diff --git a/components/navigation/Navigation.js b/components/navigation/Navigation.js
index 3aaaf50c1..79d384ae3 100644
--- a/components/navigation/Navigation.js
+++ b/components/navigation/Navigation.js
@@ -31,10 +31,10 @@ const factory = (Button, Link) => {
     className: PropTypes.string,
     routes: PropTypes.array,
     theme: PropTypes.shape({
-      button: PropTypes.string.isRequired,
-      horizontal: PropTypes.string.isRequired,
-      link: PropTypes.string.isRequired,
-      vertical: PropTypes.string.isRequired
+      button: PropTypes.string,
+      horizontal: PropTypes.string,
+      link: PropTypes.string,
+      vertical: PropTypes.string
     }),
     type: PropTypes.oneOf(['vertical', 'horizontal'])
   };
diff --git a/components/overlay/Overlay.js b/components/overlay/Overlay.js
index 3dbace314..f7cfe05e2 100644
--- a/components/overlay/Overlay.js
+++ b/components/overlay/Overlay.js
@@ -1,22 +1,22 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
 import { OVERLAY } from '../identifiers.js';
 import Portal from '../hoc/Portal.js';
 
-class Overlay extends React.Component {
+class Overlay extends Component {
   static propTypes = {
-    active: React.PropTypes.bool,
-    children: React.PropTypes.node,
-    className: React.PropTypes.string,
-    invisible: React.PropTypes.bool,
-    onClick: React.PropTypes.func,
-    onEscKeyDown: React.PropTypes.func,
-    theme: React.PropTypes.shape({
-      active: React.PropTypes.string.isRequired,
-      backdrop: React.PropTypes.string.isRequired,
-      invisible: React.PropTypes.string.isRequired,
-      overlay: React.PropTypes.string.isRequired
+    active: PropTypes.bool,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    invisible: PropTypes.bool,
+    onClick: PropTypes.func,
+    onEscKeyDown: PropTypes.func,
+    theme: PropTypes.shape({
+      active: PropTypes.string,
+      backdrop: PropTypes.string,
+      invisible: PropTypes.string,
+      overlay: PropTypes.string
     })
   };
 
diff --git a/components/radio/Radio.js b/components/radio/Radio.js
index d2a330008..713cffec0 100644
--- a/components/radio/Radio.js
+++ b/components/radio/Radio.js
@@ -15,9 +15,9 @@ const factory = (ripple) => {
     children: PropTypes.any,
     onMouseDown: PropTypes.func,
     theme: PropTypes.shape({
-      radio: PropTypes.string.isRequired,
-      radioChecked: PropTypes.string.isRequired,
-      ripple: PropTypes.string.isRequired
+      radio: PropTypes.string,
+      radioChecked: PropTypes.string,
+      ripple: PropTypes.string
     })
   };
 
diff --git a/components/radio/RadioButton.js b/components/radio/RadioButton.js
index 62c240aa2..4ac6871ac 100644
--- a/components/radio/RadioButton.js
+++ b/components/radio/RadioButton.js
@@ -17,10 +17,10 @@ const factory = (Radio) => {
       onChange: PropTypes.func,
       onFocus: PropTypes.func,
       theme: PropTypes.shape({
-        disabled: PropTypes.string.isRequired,
-        field: PropTypes.string.isRequired,
-        input: PropTypes.string.isRequired,
-        text: PropTypes.string.isRequired
+        disabled: PropTypes.string,
+        field: PropTypes.string,
+        input: PropTypes.string,
+        text: PropTypes.string
       }),
       value: PropTypes.any
     };
diff --git a/components/ripple/Ripple.js b/components/ripple/Ripple.js
index 0b3d28351..cabd88e9a 100644
--- a/components/ripple/Ripple.js
+++ b/components/ripple/Ripple.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
@@ -23,20 +23,20 @@ const rippleFactory = (options = {}) => {
   } = {...defaults, ...options};
 
   return ComposedComponent => {
-    class RippledComponent extends React.Component {
+    class RippledComponent extends Component {
       static propTypes = {
-        children: React.PropTypes.any,
-        disabled: React.PropTypes.bool,
-        onRippleEnded: React.PropTypes.func,
-        ripple: React.PropTypes.bool,
-        rippleCentered: React.PropTypes.bool,
-        rippleClassName: React.PropTypes.string,
-        rippleSpread: React.PropTypes.number,
-        theme: React.PropTypes.shape({
-          ripple: React.PropTypes.string,
-          rippleActive: React.PropTypes.string,
-          rippleRestarting: React.PropTypes.string,
-          rippleWrapper: React.PropTypes.string
+        children: PropTypes.any,
+        disabled: PropTypes.bool,
+        onRippleEnded: PropTypes.func,
+        ripple: PropTypes.bool,
+        rippleCentered: PropTypes.bool,
+        rippleClassName: PropTypes.string,
+        rippleSpread: PropTypes.number,
+        theme: PropTypes.shape({
+          ripple: PropTypes.string,
+          rippleActive: PropTypes.string,
+          rippleRestarting: PropTypes.string,
+          rippleWrapper: PropTypes.string
         })
       };
 
diff --git a/components/snackbar/Snackbar.js b/components/snackbar/Snackbar.js
index cca168678..033d33091 100644
--- a/components/snackbar/Snackbar.js
+++ b/components/snackbar/Snackbar.js
@@ -17,7 +17,7 @@ const factory = (Overlay, Button) => {
         PropTypes.string,
         PropTypes.element
       ]),
-      label: PropTypes.string.isRequired,
+      label: PropTypes.string,
       onClick: PropTypes.func,
       onTimeout: PropTypes.func,
       theme: PropTypes.shape({
diff --git a/components/time_picker/Clock.js b/components/time_picker/Clock.js
index 13655af33..d432fdea4 100644
--- a/components/time_picker/Clock.js
+++ b/components/time_picker/Clock.js
@@ -13,9 +13,9 @@ class Clock extends Component {
     onChange: PropTypes.func,
     onHandMoved: PropTypes.func,
     theme: PropTypes.shape({
-      clock: PropTypes.string.isRequired,
-      clockWrapper: PropTypes.string.isRequired,
-      placeholder: PropTypes.string.isRequired
+      clock: PropTypes.string,
+      clockWrapper: PropTypes.string,
+      placeholder: PropTypes.string
     }),
     time: PropTypes.object
   };
diff --git a/components/time_picker/ClockFace.js b/components/time_picker/ClockFace.js
index 4061209b7..6031468cb 100644
--- a/components/time_picker/ClockFace.js
+++ b/components/time_picker/ClockFace.js
@@ -8,9 +8,9 @@ class Face extends Component {
     radius: PropTypes.number,
     spacing: PropTypes.number,
     theme: PropTypes.shape({
-      active: PropTypes.string.isRequired,
-      face: PropTypes.string.isRequired,
-      number: PropTypes.string.isRequired
+      active: PropTypes.string,
+      face: PropTypes.string,
+      number: PropTypes.string
     }),
     twoDigits: PropTypes.bool
   };
diff --git a/components/time_picker/ClockHand.js b/components/time_picker/ClockHand.js
index d50aa7e1b..53bd83626 100644
--- a/components/time_picker/ClockHand.js
+++ b/components/time_picker/ClockHand.js
@@ -13,8 +13,8 @@ class Hand extends Component {
     origin: PropTypes.object,
     step: PropTypes.number,
     theme: PropTypes.shape({
-      hand: PropTypes.string.isRequired,
-      knob: PropTypes.string.isRequired
+      hand: PropTypes.string,
+      knob: PropTypes.string
     })
   };
 
diff --git a/components/time_picker/ClockMinutes.js b/components/time_picker/ClockMinutes.js
index 2f3bb4081..0debec800 100644
--- a/components/time_picker/ClockMinutes.js
+++ b/components/time_picker/ClockMinutes.js
@@ -14,7 +14,7 @@ class Minutes extends Component {
     selected: PropTypes.number,
     spacing: PropTypes.number,
     theme: PropTypes.shape({
-      small: PropTypes.string.isRequired
+      small: PropTypes.string
     })
   };
 
diff --git a/components/time_picker/TimePicker.js b/components/time_picker/TimePicker.js
index 9210870a0..fd2384157 100644
--- a/components/time_picker/TimePicker.js
+++ b/components/time_picker/TimePicker.js
@@ -18,7 +18,7 @@ const factory = (TimePickerDialog, Input) => {
       label: PropTypes.string,
       onChange: PropTypes.func,
       theme: PropTypes.shape({
-        input: PropTypes.string.isRequired
+        input: PropTypes.string
       }),
       value: PropTypes.object
     };
diff --git a/components/time_picker/TimePickerDialog.js b/components/time_picker/TimePickerDialog.js
index 15982ec30..5791c5cf8 100644
--- a/components/time_picker/TimePickerDialog.js
+++ b/components/time_picker/TimePickerDialog.js
@@ -12,19 +12,19 @@ const factory = (Dialog) => {
       onDismiss: PropTypes.func,
       onSelect: PropTypes.func,
       theme: PropTypes.shape({
-        am: PropTypes.string.isRequired,
-        amFormat: PropTypes.string.isRequired,
-        ampm: PropTypes.string.isRequired,
-        button: PropTypes.string.isRequired,
-        dialog: PropTypes.string.isRequired,
-        header: PropTypes.string.isRequired,
-        hours: PropTypes.string.isRequired,
-        hoursDisplay: PropTypes.string.isRequired,
-        minutes: PropTypes.string.isRequired,
-        minutesDisplay: PropTypes.string.isRequired,
-        pm: PropTypes.string.isRequired,
-        pmFormat: PropTypes.string.isRequired,
-        separator: PropTypes.string.isRequired
+        am: PropTypes.string,
+        amFormat: PropTypes.string,
+        ampm: PropTypes.string,
+        button: PropTypes.string,
+        dialog: PropTypes.string,
+        header: PropTypes.string,
+        hours: PropTypes.string,
+        hoursDisplay: PropTypes.string,
+        minutes: PropTypes.string,
+        minutesDisplay: PropTypes.string,
+        pm: PropTypes.string,
+        pmFormat: PropTypes.string,
+        separator: PropTypes.string
       }),
       value: PropTypes.object
     };

From a1f02d21a4859b62e2180be2bf3375507b4f424d Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Fri, 3 Jun 2016 23:45:19 +0200
Subject: [PATCH 0611/1024] Latest build

---
 lib/autocomplete/Autocomplete.js    | 20 ++++++------
 lib/avatar/Avatar.js                |  8 ++---
 lib/button/IconButton.js            | 26 +++++++--------
 lib/card/Card.js                    |  6 ++--
 lib/card/CardActions.js             |  4 +--
 lib/card/CardMedia.js               | 12 +++----
 lib/card/CardText.js                |  4 +--
 lib/card/CardTitle.js               | 10 +++---
 lib/checkbox/Check.js               |  6 ++--
 lib/checkbox/Checkbox.js            |  8 ++---
 lib/chip/Chip.js                    | 14 ++++----
 lib/date_picker/Calendar.js         | 10 +++---
 lib/date_picker/CalendarDay.js      |  6 ++--
 lib/date_picker/CalendarMonth.js    |  8 ++---
 lib/date_picker/DatePicker.js       |  2 +-
 lib/date_picker/DatePickerDialog.js | 16 ++++-----
 lib/dialog/Dialog.js                | 12 +++----
 lib/drawer/Drawer.js                | 10 +++---
 lib/dropdown/Dropdown.js            | 24 +++++++-------
 lib/layout/Layout.js                |  6 ++--
 lib/layout/NavDrawer.js             | 44 ++++++++++++-------------
 lib/layout/Panel.js                 | 12 +++----
 lib/layout/Sidebar.js               | 20 ++++++------
 lib/link/Link.js                    |  6 ++--
 lib/list/List.js                    |  2 +-
 lib/list/ListCheckbox.js            | 10 +++---
 lib/list/ListDivider.js             |  4 +--
 lib/list/ListItem.js                |  2 +-
 lib/list/ListItemAction.js          |  2 +-
 lib/list/ListItemActions.js         |  4 +--
 lib/list/ListItemContent.js         |  4 +--
 lib/list/ListItemLayout.js          |  6 ++--
 lib/list/ListItemText.js            |  4 +--
 lib/menu/IconMenu.js                | 36 ++++++++++-----------
 lib/menu/Menu.js                    | 50 ++++++++++++++---------------
 lib/menu/MenuDivider.js             |  2 +-
 lib/menu/MenuItem.js                | 14 ++++----
 lib/navigation/Navigation.js        |  8 ++---
 lib/overlay/Overlay.js              | 28 ++++++++--------
 lib/radio/Radio.js                  |  6 ++--
 lib/radio/RadioButton.js            |  8 ++---
 lib/ripple/Ripple.js                | 30 ++++++++---------
 lib/snackbar/Snackbar.js            |  2 +-
 lib/time_picker/Clock.js            |  6 ++--
 lib/time_picker/ClockFace.js        |  6 ++--
 lib/time_picker/ClockHand.js        |  4 +--
 lib/time_picker/ClockMinutes.js     |  2 +-
 lib/time_picker/TimePicker.js       |  2 +-
 lib/time_picker/TimePickerDialog.js | 26 +++++++--------
 49 files changed, 281 insertions(+), 281 deletions(-)

diff --git a/lib/autocomplete/Autocomplete.js b/lib/autocomplete/Autocomplete.js
index 891f56d61..916c28b94 100644
--- a/lib/autocomplete/Autocomplete.js
+++ b/lib/autocomplete/Autocomplete.js
@@ -408,16 +408,16 @@ var factory = function factory(Chip, Input) {
     showSuggestionsWhenValueIsSet: _react.PropTypes.bool,
     source: _react.PropTypes.any,
     theme: _react.PropTypes.shape({
-      active: _react.PropTypes.string.isRequired,
-      autocomplete: _react.PropTypes.string.isRequired,
-      focus: _react.PropTypes.string.isRequired,
-      input: _react.PropTypes.string.isRequired,
-      label: _react.PropTypes.string.isRequired,
-      suggestion: _react.PropTypes.string.isRequired,
-      suggestions: _react.PropTypes.string.isRequired,
-      up: _react.PropTypes.string.isRequired,
-      value: _react.PropTypes.string.isRequired,
-      values: _react.PropTypes.string.isRequired
+      active: _react.PropTypes.string,
+      autocomplete: _react.PropTypes.string,
+      focus: _react.PropTypes.string,
+      input: _react.PropTypes.string,
+      label: _react.PropTypes.string,
+      suggestion: _react.PropTypes.string,
+      suggestions: _react.PropTypes.string,
+      up: _react.PropTypes.string,
+      value: _react.PropTypes.string,
+      values: _react.PropTypes.string
     }),
     value: _react.PropTypes.any
   };
diff --git a/lib/avatar/Avatar.js b/lib/avatar/Avatar.js
index 3f6b653e1..6fd7d5256 100644
--- a/lib/avatar/Avatar.js
+++ b/lib/avatar/Avatar.js
@@ -53,10 +53,10 @@ var factory = function factory(FontIcon) {
     className: _react.PropTypes.string,
     icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
     image: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-    theme: _react2.default.PropTypes.shape({
-      avatar: _react2.default.PropTypes.string.isRequired,
-      image: _react2.default.PropTypes.string.isRequired,
-      letter: _react2.default.PropTypes.string.isRequired
+    theme: _react.PropTypes.shape({
+      avatar: _react.PropTypes.string,
+      image: _react.PropTypes.string,
+      letter: _react.PropTypes.string
     }),
     title: _react.PropTypes.string
   };
diff --git a/lib/button/IconButton.js b/lib/button/IconButton.js
index c625fee3f..98f6331b6 100644
--- a/lib/button/IconButton.js
+++ b/lib/button/IconButton.js
@@ -105,19 +105,19 @@ var factory = function factory(ripple, FontIcon) {
   }(_react.Component);
 
   IconButton.propTypes = {
-    accent: _react2.default.PropTypes.bool,
-    children: _react2.default.PropTypes.node,
-    className: _react2.default.PropTypes.string,
-    disabled: _react2.default.PropTypes.bool,
-    href: _react2.default.PropTypes.string,
-    icon: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.element]),
-    inverse: _react2.default.PropTypes.bool,
-    neutral: _react2.default.PropTypes.bool,
-    onMouseLeave: _react2.default.PropTypes.func,
-    onMouseUp: _react2.default.PropTypes.func,
-    primary: _react2.default.PropTypes.bool,
-    theme: _react2.default.PropTypes.object,
-    type: _react2.default.PropTypes.string
+    accent: _react.PropTypes.bool,
+    children: _react.PropTypes.node,
+    className: _react.PropTypes.string,
+    disabled: _react.PropTypes.bool,
+    href: _react.PropTypes.string,
+    icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    inverse: _react.PropTypes.bool,
+    neutral: _react.PropTypes.bool,
+    onMouseLeave: _react.PropTypes.func,
+    onMouseUp: _react.PropTypes.func,
+    primary: _react.PropTypes.bool,
+    theme: _react.PropTypes.object,
+    type: _react.PropTypes.string
   };
   IconButton.defaultProps = {
     accent: false,
diff --git a/lib/card/Card.js b/lib/card/Card.js
index d2bb824c0..2f099b726 100644
--- a/lib/card/Card.js
+++ b/lib/card/Card.js
@@ -46,9 +46,9 @@ Card.propTypes = {
   children: _react.PropTypes.any,
   className: _react.PropTypes.string,
   raised: _react.PropTypes.bool,
-  theme: _react2.default.PropTypes.shape({
-    card: _react2.default.PropTypes.string,
-    raised: _react2.default.PropTypes.string
+  theme: _react.PropTypes.shape({
+    card: _react.PropTypes.string,
+    raised: _react.PropTypes.string
   })
 };
 
diff --git a/lib/card/CardActions.js b/lib/card/CardActions.js
index 80cf7b2c2..d149b8b45 100644
--- a/lib/card/CardActions.js
+++ b/lib/card/CardActions.js
@@ -40,8 +40,8 @@ var CardActions = function CardActions(_ref) {
 CardActions.propTypes = {
   children: _react.PropTypes.any,
   className: _react.PropTypes.string,
-  theme: _react2.default.PropTypes.shape({
-    cardActions: _react2.default.PropTypes.string.isRequired
+  theme: _react.PropTypes.shape({
+    cardActions: _react.PropTypes.string
   })
 };
 
diff --git a/lib/card/CardMedia.js b/lib/card/CardMedia.js
index 473fd89aa..7c2cb02a2 100644
--- a/lib/card/CardMedia.js
+++ b/lib/card/CardMedia.js
@@ -63,12 +63,12 @@ CardMedia.propTypes = {
   color: _react.PropTypes.string,
   contentOverlay: _react.PropTypes.bool,
   image: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-  theme: _react2.default.PropTypes.shape({
-    cardMedia: _react2.default.PropTypes.string.isRequired,
-    content: _react2.default.PropTypes.string.isRequired,
-    contentOverlay: _react2.default.PropTypes.string.isRequired,
-    square: _react2.default.PropTypes.string.isRequired,
-    wide: _react2.default.PropTypes.string.isRequired
+  theme: _react.PropTypes.shape({
+    cardMedia: _react.PropTypes.string,
+    content: _react.PropTypes.string,
+    contentOverlay: _react.PropTypes.string,
+    square: _react.PropTypes.string,
+    wide: _react.PropTypes.string
   })
 };
 
diff --git a/lib/card/CardText.js b/lib/card/CardText.js
index 00598ff16..832511ca7 100644
--- a/lib/card/CardText.js
+++ b/lib/card/CardText.js
@@ -44,8 +44,8 @@ var CardText = function CardText(_ref) {
 CardText.propTypes = {
   children: _react.PropTypes.any,
   className: _react.PropTypes.string,
-  theme: _react2.default.PropTypes.shape({
-    cardText: _react2.default.PropTypes.string.isRequired
+  theme: _react.PropTypes.shape({
+    cardText: _react.PropTypes.string
   })
 };
 
diff --git a/lib/card/CardTitle.js b/lib/card/CardTitle.js
index fab4aff87..fbf2b62e1 100644
--- a/lib/card/CardTitle.js
+++ b/lib/card/CardTitle.js
@@ -76,11 +76,11 @@ var factory = function factory(Avatar) {
     children: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element, _react.PropTypes.array]),
     className: _react.PropTypes.string,
     subtitle: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-    theme: _react2.default.PropTypes.shape({
-      large: _react2.default.PropTypes.string.isRequired,
-      title: _react2.default.PropTypes.string.isRequired,
-      small: _react2.default.PropTypes.string.isRequired,
-      subtitle: _react2.default.PropTypes.string.isRequired
+    theme: _react.PropTypes.shape({
+      large: _react.PropTypes.string,
+      title: _react.PropTypes.string,
+      small: _react.PropTypes.string,
+      subtitle: _react.PropTypes.string
     }),
     title: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element])
   };
diff --git a/lib/checkbox/Check.js b/lib/checkbox/Check.js
index 26b1139c4..8e7de820c 100644
--- a/lib/checkbox/Check.js
+++ b/lib/checkbox/Check.js
@@ -37,9 +37,9 @@ var factory = function factory(ripple) {
     checked: _react.PropTypes.bool,
     children: _react.PropTypes.any,
     onMouseDown: _react.PropTypes.func,
-    theme: _react2.default.PropTypes.shape({
-      check: _react2.default.PropTypes.string.isRequired,
-      checked: _react2.default.PropTypes.string.isRequired
+    theme: _react.PropTypes.shape({
+      check: _react.PropTypes.string,
+      checked: _react.PropTypes.string
     })
   };
 
diff --git a/lib/checkbox/Checkbox.js b/lib/checkbox/Checkbox.js
index ac920fecc..a929997b4 100644
--- a/lib/checkbox/Checkbox.js
+++ b/lib/checkbox/Checkbox.js
@@ -121,10 +121,10 @@ var factory = function factory(Check) {
     label: _react.PropTypes.any,
     onChange: _react.PropTypes.func,
     theme: _react.PropTypes.shape({
-      disabled: _react.PropTypes.string.isRequired,
-      field: _react.PropTypes.string.isRequired,
-      input: _react.PropTypes.string.isRequired,
-      ripple: _react.PropTypes.string.isRequired
+      disabled: _react.PropTypes.string,
+      field: _react.PropTypes.string,
+      input: _react.PropTypes.string,
+      ripple: _react.PropTypes.string
     })
   };
   Checkbox.defaultProps = {
diff --git a/lib/chip/Chip.js b/lib/chip/Chip.js
index 9affe85c3..a463c501b 100644
--- a/lib/chip/Chip.js
+++ b/lib/chip/Chip.js
@@ -74,13 +74,13 @@ var factory = function factory(Avatar) {
     className: _react.PropTypes.string,
     deletable: _react.PropTypes.bool,
     onDeleteClick: _react.PropTypes.func,
-    theme: _react2.default.PropTypes.shape({
-      avatar: _react2.default.PropTypes.string.isRequired,
-      chip: _react2.default.PropTypes.string.isRequired,
-      deletable: _react2.default.PropTypes.string.isRequired,
-      delete: _react2.default.PropTypes.string.isRequired,
-      deleteIcon: _react2.default.PropTypes.string.isRequired,
-      deleteX: _react2.default.PropTypes.string.isRequired
+    theme: _react.PropTypes.shape({
+      avatar: _react.PropTypes.string,
+      chip: _react.PropTypes.string,
+      deletable: _react.PropTypes.string,
+      delete: _react.PropTypes.string,
+      deleteIcon: _react.PropTypes.string,
+      deleteX: _react.PropTypes.string
     })
   };
 
diff --git a/lib/date_picker/Calendar.js b/lib/date_picker/Calendar.js
index b9b5cfcf7..b401f2ea8 100644
--- a/lib/date_picker/Calendar.js
+++ b/lib/date_picker/Calendar.js
@@ -158,11 +158,11 @@ var factory = function factory(IconButton) {
     onChange: _react.PropTypes.func,
     selectedDate: _react.PropTypes.object,
     theme: _react.PropTypes.shape({
-      active: _react.PropTypes.string.isRequired,
-      calendar: _react.PropTypes.string.isRequired,
-      next: _react.PropTypes.string.isRequired,
-      prev: _react.PropTypes.string.isRequired,
-      years: _react.PropTypes.string.isRequired
+      active: _react.PropTypes.string,
+      calendar: _react.PropTypes.string,
+      next: _react.PropTypes.string,
+      prev: _react.PropTypes.string,
+      years: _react.PropTypes.string
     }),
     viewDate: _react.PropTypes.object
   };
diff --git a/lib/date_picker/CalendarDay.js b/lib/date_picker/CalendarDay.js
index 0f71dd746..257880a19 100644
--- a/lib/date_picker/CalendarDay.js
+++ b/lib/date_picker/CalendarDay.js
@@ -82,9 +82,9 @@ Day.propTypes = {
   onClick: _react.PropTypes.func,
   selectedDate: _react.PropTypes.object,
   theme: _react.PropTypes.shape({
-    active: _react.PropTypes.string.isRequired,
-    day: _react.PropTypes.string.isRequired,
-    disabled: _react.PropTypes.string.isRequired
+    active: _react.PropTypes.string,
+    day: _react.PropTypes.string,
+    disabled: _react.PropTypes.string
   }),
   viewDate: _react.PropTypes.object
 };
diff --git a/lib/date_picker/CalendarMonth.js b/lib/date_picker/CalendarMonth.js
index cdfedb3e7..4d874b57b 100644
--- a/lib/date_picker/CalendarMonth.js
+++ b/lib/date_picker/CalendarMonth.js
@@ -116,10 +116,10 @@ Month.propTypes = {
   onDayClick: _react.PropTypes.func,
   selectedDate: _react.PropTypes.object,
   theme: _react.PropTypes.shape({
-    days: _react.PropTypes.string.isRequired,
-    month: _react.PropTypes.string.isRequired,
-    title: _react.PropTypes.string.isRequired,
-    week: _react.PropTypes.string.isRequired
+    days: _react.PropTypes.string,
+    month: _react.PropTypes.string,
+    title: _react.PropTypes.string,
+    week: _react.PropTypes.string
   }),
   viewDate: _react.PropTypes.object
 };
diff --git a/lib/date_picker/DatePicker.js b/lib/date_picker/DatePicker.js
index af5ebefee..64e7983ee 100644
--- a/lib/date_picker/DatePicker.js
+++ b/lib/date_picker/DatePicker.js
@@ -139,7 +139,7 @@ var factory = function factory(Input, DatePickerDialog) {
     minDate: _react.PropTypes.object,
     onChange: _react.PropTypes.func,
     theme: _react.PropTypes.shape({
-      input: _react.PropTypes.string.isRequired
+      input: _react.PropTypes.string
     }),
     value: _react.PropTypes.oneOfType([_react.PropTypes.instanceOf(Date), _react.PropTypes.string])
   };
diff --git a/lib/date_picker/DatePickerDialog.js b/lib/date_picker/DatePickerDialog.js
index 0030e57df..c446e1620 100644
--- a/lib/date_picker/DatePickerDialog.js
+++ b/lib/date_picker/DatePickerDialog.js
@@ -133,14 +133,14 @@ var factory = function factory(Dialog, Calendar) {
     onDismiss: _react.PropTypes.func,
     onSelect: _react.PropTypes.func,
     theme: _react.PropTypes.shape({
-      button: _react.PropTypes.string.isRequired,
-      calendarWrapper: _react.PropTypes.string.isRequired,
-      date: _react.PropTypes.string.isRequired,
-      dialog: _react.PropTypes.string.isRequired,
-      header: _react.PropTypes.string.isRequired,
-      monthsDisplay: _react.PropTypes.string.isRequired,
-      year: _react.PropTypes.string.isRequired,
-      yearsDisplay: _react.PropTypes.string.isRequired
+      button: _react.PropTypes.string,
+      calendarWrapper: _react.PropTypes.string,
+      date: _react.PropTypes.string,
+      dialog: _react.PropTypes.string,
+      header: _react.PropTypes.string,
+      monthsDisplay: _react.PropTypes.string,
+      year: _react.PropTypes.string,
+      yearsDisplay: _react.PropTypes.string
     }),
     value: _react.PropTypes.object
   };
diff --git a/lib/dialog/Dialog.js b/lib/dialog/Dialog.js
index 36c7fa2fc..ddb21880b 100644
--- a/lib/dialog/Dialog.js
+++ b/lib/dialog/Dialog.js
@@ -87,12 +87,12 @@ var factory = function factory(Overlay, Button) {
     onOverlayMouseMove: _react.PropTypes.func,
     onOverlayMouseUp: _react.PropTypes.func,
     theme: _react.PropTypes.shape({
-      active: _react.PropTypes.string.isRequired,
-      body: _react.PropTypes.string.isRequired,
-      button: _react.PropTypes.string.isRequired,
-      dialog: _react.PropTypes.string.isRequired,
-      navigation: _react.PropTypes.string.isRequired,
-      title: _react.PropTypes.string.isRequired
+      active: _react.PropTypes.string,
+      body: _react.PropTypes.string,
+      button: _react.PropTypes.string,
+      dialog: _react.PropTypes.string,
+      navigation: _react.PropTypes.string,
+      title: _react.PropTypes.string
     }),
     title: _react.PropTypes.string,
     type: _react.PropTypes.string
diff --git a/lib/drawer/Drawer.js b/lib/drawer/Drawer.js
index feffcb34e..cc101cc5a 100644
--- a/lib/drawer/Drawer.js
+++ b/lib/drawer/Drawer.js
@@ -61,11 +61,11 @@ var factory = function factory(Overlay) {
     className: _react.PropTypes.string,
     onOverlayClick: _react.PropTypes.func,
     theme: _react.PropTypes.shape({
-      active: _react.PropTypes.string.isRequired,
-      content: _react.PropTypes.string.isRequired,
-      drawer: _react.PropTypes.string.isRequired,
-      left: _react.PropTypes.string.isRequired,
-      right: _react.PropTypes.string.isRequired
+      active: _react.PropTypes.string,
+      content: _react.PropTypes.string,
+      drawer: _react.PropTypes.string,
+      left: _react.PropTypes.string,
+      right: _react.PropTypes.string
     }),
     type: _react.PropTypes.oneOf(['left', 'right'])
   };
diff --git a/lib/dropdown/Dropdown.js b/lib/dropdown/Dropdown.js
index 9ff4dafe1..367a187dc 100644
--- a/lib/dropdown/Dropdown.js
+++ b/lib/dropdown/Dropdown.js
@@ -229,18 +229,18 @@ var factory = function factory(Input) {
     source: _react.PropTypes.array.isRequired,
     template: _react.PropTypes.func,
     theme: _react.PropTypes.shape({
-      active: _react.PropTypes.string.isRequired,
-      disabled: _react.PropTypes.string.isRequired,
-      dropdown: _react.PropTypes.string.isRequired,
-      error: _react.PropTypes.string.isRequired,
-      errored: _react.PropTypes.string.isRequired,
-      field: _react.PropTypes.string.isRequired,
-      label: _react.PropTypes.string.isRequired,
-      selected: _react.PropTypes.string.isRequired,
-      templateValue: _react.PropTypes.string.isRequired,
-      up: _react.PropTypes.string.isRequired,
-      value: _react.PropTypes.string.isRequired,
-      values: _react.PropTypes.string.isRequired
+      active: _react.PropTypes.string,
+      disabled: _react.PropTypes.string,
+      dropdown: _react.PropTypes.string,
+      error: _react.PropTypes.string,
+      errored: _react.PropTypes.string,
+      field: _react.PropTypes.string,
+      label: _react.PropTypes.string,
+      selected: _react.PropTypes.string,
+      templateValue: _react.PropTypes.string,
+      up: _react.PropTypes.string,
+      value: _react.PropTypes.string,
+      values: _react.PropTypes.string
     }),
     value: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number])
   };
diff --git a/lib/layout/Layout.js b/lib/layout/Layout.js
index 661afbd13..6ce2b8922 100644
--- a/lib/layout/Layout.js
+++ b/lib/layout/Layout.js
@@ -56,9 +56,9 @@ Layout.propTypes = {
     }
   },
 
-  className: _react2.default.PropTypes.string,
-  theme: _react2.default.PropTypes.shape({
-    layout: _react2.default.PropTypes.string.isRequired
+  className: _react.PropTypes.string,
+  theme: _react.PropTypes.shape({
+    layout: _react.PropTypes.string
   })
 };
 
diff --git a/lib/layout/NavDrawer.js b/lib/layout/NavDrawer.js
index 6e5abe536..9401ffa5e 100644
--- a/lib/layout/NavDrawer.js
+++ b/lib/layout/NavDrawer.js
@@ -54,29 +54,29 @@ var NavDrawer = function NavDrawer(_ref) {
 };
 
 NavDrawer.propTypes = {
-  active: _react2.default.PropTypes.bool,
-  children: _react2.default.PropTypes.any,
-  className: _react2.default.PropTypes.string,
-  onOverlayClick: _react2.default.PropTypes.func,
-  permanentAt: _react2.default.PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'xxl', 'xxxl']),
-  pinned: _react2.default.PropTypes.bool,
-  scrollY: _react2.default.PropTypes.bool,
-  theme: _react2.default.PropTypes.shape({
-    active: _react2.default.PropTypes.string.isRequired,
-    drawerContent: _react2.default.PropTypes.string.isRequired,
-    lgPermanent: _react2.default.PropTypes.string.isRequired,
-    mdPermanent: _react2.default.PropTypes.string.isRequired,
-    navDrawer: _react2.default.PropTypes.string.isRequired,
-    pinned: _react2.default.PropTypes.string.isRequired,
-    scrim: _react2.default.PropTypes.string.isRequired,
-    scrollY: _react2.default.PropTypes.string.isRequired,
-    smPermanent: _react2.default.PropTypes.string.isRequired,
-    wide: _react2.default.PropTypes.string.isRequired,
-    xlPermanent: _react2.default.PropTypes.string.isRequired,
-    xxlPermanent: _react2.default.PropTypes.string.isRequired,
-    xxxlPermanent: _react2.default.PropTypes.string.isRequired
+  active: _react.PropTypes.bool,
+  children: _react.PropTypes.any,
+  className: _react.PropTypes.string,
+  onOverlayClick: _react.PropTypes.func,
+  permanentAt: _react.PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'xxl', 'xxxl']),
+  pinned: _react.PropTypes.bool,
+  scrollY: _react.PropTypes.bool,
+  theme: _react.PropTypes.shape({
+    active: _react.PropTypes.string,
+    drawerContent: _react.PropTypes.string,
+    lgPermanent: _react.PropTypes.string,
+    mdPermanent: _react.PropTypes.string,
+    navDrawer: _react.PropTypes.string,
+    pinned: _react.PropTypes.string,
+    scrim: _react.PropTypes.string,
+    scrollY: _react.PropTypes.string,
+    smPermanent: _react.PropTypes.string,
+    wide: _react.PropTypes.string,
+    xlPermanent: _react.PropTypes.string,
+    xxlPermanent: _react.PropTypes.string,
+    xxxlPermanent: _react.PropTypes.string
   }),
-  width: _react2.default.PropTypes.oneOf(['normal', 'wide'])
+  width: _react.PropTypes.oneOf(['normal', 'wide'])
 };
 
 NavDrawer.defaultProps = {
diff --git a/lib/layout/Panel.js b/lib/layout/Panel.js
index 0da62485a..bbdb2dfe3 100644
--- a/lib/layout/Panel.js
+++ b/lib/layout/Panel.js
@@ -37,12 +37,12 @@ var Panel = function Panel(_ref) {
 };
 
 Panel.propTypes = {
-  children: _react2.default.PropTypes.any,
-  className: _react2.default.PropTypes.string,
-  scrollY: _react2.default.PropTypes.bool,
-  theme: _react2.default.PropTypes.shape({
-    panel: _react2.default.PropTypes.string.isRequired,
-    scrollY: _react2.default.PropTypes.string.isRequired
+  children: _react.PropTypes.any,
+  className: _react.PropTypes.string,
+  scrollY: _react.PropTypes.bool,
+  theme: _react.PropTypes.shape({
+    panel: _react.PropTypes.string,
+    scrollY: _react.PropTypes.string
   })
 };
 
diff --git a/lib/layout/Sidebar.js b/lib/layout/Sidebar.js
index 04cae27cb..13e171218 100644
--- a/lib/layout/Sidebar.js
+++ b/lib/layout/Sidebar.js
@@ -45,17 +45,17 @@ var Sidebar = function Sidebar(_ref) {
 };
 
 Sidebar.propTypes = {
-  children: _react2.default.PropTypes.any,
-  className: _react2.default.PropTypes.string,
-  pinned: _react2.default.PropTypes.bool,
-  scrollY: _react2.default.PropTypes.bool,
-  theme: _react2.default.PropTypes.shape({
-    pinned: _react2.default.PropTypes.string.isRequired,
-    scrollY: _react2.default.PropTypes.string.isRequired,
-    sidebar: _react2.default.PropTypes.string.isRequired,
-    sidebarContent: _react2.default.PropTypes.string.isRequired
+  children: _react.PropTypes.any,
+  className: _react.PropTypes.string,
+  pinned: _react.PropTypes.bool,
+  scrollY: _react.PropTypes.bool,
+  theme: _react.PropTypes.shape({
+    pinned: _react.PropTypes.string,
+    scrollY: _react.PropTypes.string,
+    sidebar: _react.PropTypes.string,
+    sidebarContent: _react.PropTypes.string
   }),
-  width: _react2.default.PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 25, 33, 50, 66, 75, 100])
+  width: _react.PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 25, 33, 50, 66, 75, 100])
 };
 
 Sidebar.defaultProps = {
diff --git a/lib/link/Link.js b/lib/link/Link.js
index c260f40cf..8a6f4b738 100644
--- a/lib/link/Link.js
+++ b/lib/link/Link.js
@@ -68,9 +68,9 @@ Link.propTypes = {
   icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
   label: _react.PropTypes.string,
   theme: _react.PropTypes.shape({
-    active: _react.PropTypes.string.isRequired,
-    icon: _react.PropTypes.string.isRequired,
-    link: _react.PropTypes.string.isRequired
+    active: _react.PropTypes.string,
+    icon: _react.PropTypes.string,
+    link: _react.PropTypes.string
   })
 };
 
diff --git a/lib/list/List.js b/lib/list/List.js
index d5a90d58d..cd315c954 100644
--- a/lib/list/List.js
+++ b/lib/list/List.js
@@ -77,7 +77,7 @@ var factory = function factory(ListItem) {
     ripple: _react.PropTypes.bool,
     selectable: _react.PropTypes.bool,
     theme: _react.PropTypes.shape({
-      list: _react.PropTypes.string.isRequired
+      list: _react.PropTypes.string
     })
   };
   List.defaultProps = {
diff --git a/lib/list/ListCheckbox.js b/lib/list/ListCheckbox.js
index 125ffac39..ca8a5f287 100644
--- a/lib/list/ListCheckbox.js
+++ b/lib/list/ListCheckbox.js
@@ -61,7 +61,7 @@ var factory = function factory(Checkbox, ListItemContent) {
   };
 
   ListCheckbox.propTypes = {
-    caption: _react.PropTypes.string.isRequired,
+    caption: _react.PropTypes.string,
     checked: _react.PropTypes.bool,
     className: _react.PropTypes.string,
     disabled: _react.PropTypes.bool,
@@ -71,10 +71,10 @@ var factory = function factory(Checkbox, ListItemContent) {
     onChange: _react.PropTypes.func,
     onFocus: _react.PropTypes.func,
     theme: _react.PropTypes.shape({
-      checkbox: _react.PropTypes.string.isRequired,
-      checkboxItem: _react.PropTypes.string.isRequired,
-      disabled: _react.PropTypes.string.isRequired,
-      item: _react.PropTypes.string.isRequired
+      checkbox: _react.PropTypes.string,
+      checkboxItem: _react.PropTypes.string,
+      disabled: _react.PropTypes.string,
+      item: _react.PropTypes.string
     })
   };
 
diff --git a/lib/list/ListDivider.js b/lib/list/ListDivider.js
index fc979c987..b9f71c064 100644
--- a/lib/list/ListDivider.js
+++ b/lib/list/ListDivider.js
@@ -24,8 +24,8 @@ var ListDivider = function ListDivider(_ref) {
 ListDivider.propTypes = {
   inset: _react.PropTypes.bool,
   theme: _react.PropTypes.shape({
-    divider: _react.PropTypes.string.isRequired,
-    inset: _react.PropTypes.string.isRequired
+    divider: _react.PropTypes.string,
+    inset: _react.PropTypes.string
   })
 };
 
diff --git a/lib/list/ListItem.js b/lib/list/ListItem.js
index e07eb8e80..174454028 100644
--- a/lib/list/ListItem.js
+++ b/lib/list/ListItem.js
@@ -127,7 +127,7 @@ var factory = function factory(ripple, ListItemLayout, ListItemContent) {
     onClick: _react.PropTypes.func,
     ripple: _react.PropTypes.bool,
     theme: _react.PropTypes.shape({
-      listItem: _react.PropTypes.string.isRequired
+      listItem: _react.PropTypes.string
     }),
     to: _react.PropTypes.string
   };
diff --git a/lib/list/ListItemAction.js b/lib/list/ListItemAction.js
index b91440ff1..66e6532da 100644
--- a/lib/list/ListItemAction.js
+++ b/lib/list/ListItemAction.js
@@ -36,7 +36,7 @@ var ListItemAction = function ListItemAction(_ref) {
 ListItemAction.propTypes = {
   action: _react.PropTypes.object,
   theme: _react.PropTypes.shape({
-    itemAction: _react2.default.PropTypes.string.isRequired
+    itemAction: _react.PropTypes.string
   })
 };
 
diff --git a/lib/list/ListItemActions.js b/lib/list/ListItemActions.js
index 2ce112fdc..f04cbdf21 100644
--- a/lib/list/ListItemActions.js
+++ b/lib/list/ListItemActions.js
@@ -41,8 +41,8 @@ var factory = function factory(ListItemAction) {
   ListItemActions.propTypes = {
     children: _react.PropTypes.any,
     theme: _react.PropTypes.shape({
-      left: _react.PropTypes.string.isRequired,
-      right: _react.PropTypes.string.isRequired
+      left: _react.PropTypes.string,
+      right: _react.PropTypes.string
     }),
     type: _react.PropTypes.oneOf(['left', 'right'])
   };
diff --git a/lib/list/ListItemContent.js b/lib/list/ListItemContent.js
index 2e7b716f2..9202ea828 100644
--- a/lib/list/ListItemContent.js
+++ b/lib/list/ListItemContent.js
@@ -100,8 +100,8 @@ var factory = function factory(ListItemText) {
     children: _react.PropTypes.any,
     legend: _react.PropTypes.string,
     theme: _react.PropTypes.shape({
-      itemContentRoot: _react.PropTypes.string.isRequired,
-      large: _react.PropTypes.string.isRequired
+      itemContentRoot: _react.PropTypes.string,
+      large: _react.PropTypes.string
     }),
     type: _react.PropTypes.oneOf(types)
   };
diff --git a/lib/list/ListItemLayout.js b/lib/list/ListItemLayout.js
index 2ea4b4a88..46ea8a5bc 100644
--- a/lib/list/ListItemLayout.js
+++ b/lib/list/ListItemLayout.js
@@ -83,9 +83,9 @@ var factory = function factory(Avatar, ListItemContent, ListItemActions) {
     rightIcon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
     selectable: _react.PropTypes.bool,
     theme: _react.PropTypes.shape({
-      disabled: _react.PropTypes.string.isRequired,
-      item: _react.PropTypes.string.isRequired,
-      selectable: _react.PropTypes.string.isRequired
+      disabled: _react.PropTypes.string,
+      item: _react.PropTypes.string,
+      selectable: _react.PropTypes.string
     }),
     to: _react.PropTypes.string
   };
diff --git a/lib/list/ListItemText.js b/lib/list/ListItemText.js
index 7382e8776..278fc2e99 100644
--- a/lib/list/ListItemText.js
+++ b/lib/list/ListItemText.js
@@ -46,8 +46,8 @@ ListItemText.propTypes = {
   className: _react.PropTypes.string,
   primary: _react.PropTypes.bool,
   theme: _react.PropTypes.shape({
-    itemText: _react.PropTypes.string.isRequired,
-    primary: _react.PropTypes.string.isRequired
+    itemText: _react.PropTypes.string,
+    primary: _react.PropTypes.string
   })
 };
 
diff --git a/lib/menu/IconMenu.js b/lib/menu/IconMenu.js
index ca5c4c50e..062b856fa 100644
--- a/lib/menu/IconMenu.js
+++ b/lib/menu/IconMenu.js
@@ -36,8 +36,8 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
 var factory = function factory(IconButton, Menu) {
-  var IconMenu = function (_React$Component) {
-    _inherits(IconMenu, _React$Component);
+  var IconMenu = function (_Component) {
+    _inherits(IconMenu, _Component);
 
     function IconMenu() {
       var _Object$getPrototypeO;
@@ -93,24 +93,24 @@ var factory = function factory(IconButton, Menu) {
     }]);
 
     return IconMenu;
-  }(_react2.default.Component);
+  }(_react.Component);
 
   IconMenu.propTypes = {
-    children: _react2.default.PropTypes.node,
-    className: _react2.default.PropTypes.string,
-    icon: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.element]),
-    iconRipple: _react2.default.PropTypes.bool,
-    menuRipple: _react2.default.PropTypes.bool,
-    onClick: _react2.default.PropTypes.func,
-    onHide: _react2.default.PropTypes.func,
-    onSelect: _react2.default.PropTypes.func,
-    onShow: _react2.default.PropTypes.func,
-    position: _react2.default.PropTypes.string,
-    selectable: _react2.default.PropTypes.bool,
-    selected: _react2.default.PropTypes.any,
-    theme: _react2.default.PropTypes.shape({
-      icon: _react2.default.PropTypes.string.isRequired,
-      iconMenu: _react2.default.PropTypes.string.isRequired
+    children: _react.PropTypes.node,
+    className: _react.PropTypes.string,
+    icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    iconRipple: _react.PropTypes.bool,
+    menuRipple: _react.PropTypes.bool,
+    onClick: _react.PropTypes.func,
+    onHide: _react.PropTypes.func,
+    onSelect: _react.PropTypes.func,
+    onShow: _react.PropTypes.func,
+    position: _react.PropTypes.string,
+    selectable: _react.PropTypes.bool,
+    selected: _react.PropTypes.any,
+    theme: _react.PropTypes.shape({
+      icon: _react.PropTypes.string,
+      iconMenu: _react.PropTypes.string
     })
   };
   IconMenu.defaultProps = {
diff --git a/lib/menu/Menu.js b/lib/menu/Menu.js
index 2aacee2b6..565cc1891 100644
--- a/lib/menu/Menu.js
+++ b/lib/menu/Menu.js
@@ -49,8 +49,8 @@ var POSITION = {
 };
 
 var factory = function factory(MenuItem) {
-  var Menu = function (_React$Component) {
-    _inherits(Menu, _React$Component);
+  var Menu = function (_Component) {
+    _inherits(Menu, _Component);
 
     function Menu() {
       var _Object$getPrototypeO;
@@ -265,31 +265,31 @@ var factory = function factory(MenuItem) {
     }]);
 
     return Menu;
-  }(_react2.default.Component);
+  }(_react.Component);
 
   Menu.propTypes = {
-    active: _react2.default.PropTypes.bool,
-    children: _react2.default.PropTypes.node,
-    className: _react2.default.PropTypes.string,
-    onHide: _react2.default.PropTypes.func,
-    onSelect: _react2.default.PropTypes.func,
-    onShow: _react2.default.PropTypes.func,
-    outline: _react2.default.PropTypes.bool,
-    position: _react2.default.PropTypes.string,
-    ripple: _react2.default.PropTypes.bool,
-    selectable: _react2.default.PropTypes.bool,
-    selected: _react2.default.PropTypes.any,
-    theme: _react2.default.PropTypes.shape({
-      active: _react2.default.PropTypes.string.isRequired,
-      bottomLeft: _react2.default.PropTypes.string.isRequired,
-      bottomRight: _react2.default.PropTypes.string.isRequired,
-      menu: _react2.default.PropTypes.string.isRequired,
-      menuInner: _react2.default.PropTypes.string.isRequired,
-      outline: _react2.default.PropTypes.string.isRequired,
-      rippled: _react2.default.PropTypes.string.isRequired,
-      static: _react2.default.PropTypes.string.isRequired,
-      topLeft: _react2.default.PropTypes.string.isRequired,
-      topRight: _react2.default.PropTypes.string.isRequired
+    active: _react.PropTypes.bool,
+    children: _react.PropTypes.node,
+    className: _react.PropTypes.string,
+    onHide: _react.PropTypes.func,
+    onSelect: _react.PropTypes.func,
+    onShow: _react.PropTypes.func,
+    outline: _react.PropTypes.bool,
+    position: _react.PropTypes.string,
+    ripple: _react.PropTypes.bool,
+    selectable: _react.PropTypes.bool,
+    selected: _react.PropTypes.any,
+    theme: _react.PropTypes.shape({
+      active: _react.PropTypes.string,
+      bottomLeft: _react.PropTypes.string,
+      bottomRight: _react.PropTypes.string,
+      menu: _react.PropTypes.string,
+      menuInner: _react.PropTypes.string,
+      outline: _react.PropTypes.string,
+      rippled: _react.PropTypes.string,
+      static: _react.PropTypes.string,
+      topLeft: _react.PropTypes.string,
+      topRight: _react.PropTypes.string
     })
   };
   Menu.defaultProps = {
diff --git a/lib/menu/MenuDivider.js b/lib/menu/MenuDivider.js
index f2884fd55..cf8455141 100644
--- a/lib/menu/MenuDivider.js
+++ b/lib/menu/MenuDivider.js
@@ -22,7 +22,7 @@ var MenuDivider = function MenuDivider(_ref) {
 
 MenuDivider.propTypes = {
   theme: _react.PropTypes.shape({
-    menuDivider: _react.PropTypes.string.isRequired
+    menuDivider: _react.PropTypes.string
   })
 };
 
diff --git a/lib/menu/MenuItem.js b/lib/menu/MenuItem.js
index 69aaa8512..7562dfa0b 100644
--- a/lib/menu/MenuItem.js
+++ b/lib/menu/MenuItem.js
@@ -104,7 +104,7 @@ var factory = function factory(ripple) {
   }(_react.Component);
 
   MenuItem.propTypes = {
-    caption: _react.PropTypes.string.isRequired,
+    caption: _react.PropTypes.string,
     children: _react.PropTypes.any,
     className: _react.PropTypes.string,
     disabled: _react.PropTypes.bool,
@@ -113,12 +113,12 @@ var factory = function factory(ripple) {
     selected: _react.PropTypes.bool,
     shortcut: _react.PropTypes.string,
     theme: _react.PropTypes.shape({
-      caption: _react.PropTypes.string.isRequired,
-      disabled: _react.PropTypes.string.isRequired,
-      icon: _react.PropTypes.string.isRequired,
-      menuItem: _react.PropTypes.string.isRequired,
-      selected: _react.PropTypes.string.isRequired,
-      shortcut: _react.PropTypes.string.isRequired
+      caption: _react.PropTypes.string,
+      disabled: _react.PropTypes.string,
+      icon: _react.PropTypes.string,
+      menuItem: _react.PropTypes.string,
+      selected: _react.PropTypes.string,
+      shortcut: _react.PropTypes.string
     })
   };
   MenuItem.defaultProps = {
diff --git a/lib/navigation/Navigation.js b/lib/navigation/Navigation.js
index 9be9f54f3..ec9e44f58 100644
--- a/lib/navigation/Navigation.js
+++ b/lib/navigation/Navigation.js
@@ -62,10 +62,10 @@ var factory = function factory(Button, Link) {
     className: _react.PropTypes.string,
     routes: _react.PropTypes.array,
     theme: _react.PropTypes.shape({
-      button: _react.PropTypes.string.isRequired,
-      horizontal: _react.PropTypes.string.isRequired,
-      link: _react.PropTypes.string.isRequired,
-      vertical: _react.PropTypes.string.isRequired
+      button: _react.PropTypes.string,
+      horizontal: _react.PropTypes.string,
+      link: _react.PropTypes.string,
+      vertical: _react.PropTypes.string
     }),
     type: _react.PropTypes.oneOf(['vertical', 'horizontal'])
   };
diff --git a/lib/overlay/Overlay.js b/lib/overlay/Overlay.js
index a9a7cc4d1..1bb8e48bc 100644
--- a/lib/overlay/Overlay.js
+++ b/lib/overlay/Overlay.js
@@ -33,8 +33,8 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-var Overlay = function (_React$Component) {
-  _inherits(Overlay, _React$Component);
+var Overlay = function (_Component) {
+  _inherits(Overlay, _Component);
 
   function Overlay() {
     _classCallCheck(this, Overlay);
@@ -107,20 +107,20 @@ var Overlay = function (_React$Component) {
   }]);
 
   return Overlay;
-}(_react2.default.Component);
+}(_react.Component);
 
 Overlay.propTypes = {
-  active: _react2.default.PropTypes.bool,
-  children: _react2.default.PropTypes.node,
-  className: _react2.default.PropTypes.string,
-  invisible: _react2.default.PropTypes.bool,
-  onClick: _react2.default.PropTypes.func,
-  onEscKeyDown: _react2.default.PropTypes.func,
-  theme: _react2.default.PropTypes.shape({
-    active: _react2.default.PropTypes.string.isRequired,
-    backdrop: _react2.default.PropTypes.string.isRequired,
-    invisible: _react2.default.PropTypes.string.isRequired,
-    overlay: _react2.default.PropTypes.string.isRequired
+  active: _react.PropTypes.bool,
+  children: _react.PropTypes.node,
+  className: _react.PropTypes.string,
+  invisible: _react.PropTypes.bool,
+  onClick: _react.PropTypes.func,
+  onEscKeyDown: _react.PropTypes.func,
+  theme: _react.PropTypes.shape({
+    active: _react.PropTypes.string,
+    backdrop: _react.PropTypes.string,
+    invisible: _react.PropTypes.string,
+    overlay: _react.PropTypes.string
   })
 };
 Overlay.defaultProps = {
diff --git a/lib/radio/Radio.js b/lib/radio/Radio.js
index b7b1feccd..161c0b980 100644
--- a/lib/radio/Radio.js
+++ b/lib/radio/Radio.js
@@ -34,9 +34,9 @@ var factory = function factory(ripple) {
     children: _react.PropTypes.any,
     onMouseDown: _react.PropTypes.func,
     theme: _react.PropTypes.shape({
-      radio: _react.PropTypes.string.isRequired,
-      radioChecked: _react.PropTypes.string.isRequired,
-      ripple: _react.PropTypes.string.isRequired
+      radio: _react.PropTypes.string,
+      radioChecked: _react.PropTypes.string,
+      ripple: _react.PropTypes.string
     })
   };
 
diff --git a/lib/radio/RadioButton.js b/lib/radio/RadioButton.js
index 6a214d826..adbff67a3 100644
--- a/lib/radio/RadioButton.js
+++ b/lib/radio/RadioButton.js
@@ -123,10 +123,10 @@ var factory = function factory(Radio) {
     onChange: _react.PropTypes.func,
     onFocus: _react.PropTypes.func,
     theme: _react.PropTypes.shape({
-      disabled: _react.PropTypes.string.isRequired,
-      field: _react.PropTypes.string.isRequired,
-      input: _react.PropTypes.string.isRequired,
-      text: _react.PropTypes.string.isRequired
+      disabled: _react.PropTypes.string,
+      field: _react.PropTypes.string,
+      input: _react.PropTypes.string,
+      text: _react.PropTypes.string
     }),
     value: _react.PropTypes.any
   };
diff --git a/lib/ripple/Ripple.js b/lib/ripple/Ripple.js
index 33400f786..4ad0c99d0 100644
--- a/lib/ripple/Ripple.js
+++ b/lib/ripple/Ripple.js
@@ -64,8 +64,8 @@ var rippleFactory = function rippleFactory() {
   var props = _objectWithoutProperties(_defaults$options, ['centered', 'className', 'spread', 'theme']);
 
   return function (ComposedComponent) {
-    var RippledComponent = function (_React$Component) {
-      _inherits(RippledComponent, _React$Component);
+    var RippledComponent = function (_Component) {
+      _inherits(RippledComponent, _Component);
 
       function RippledComponent() {
         var _Object$getPrototypeO;
@@ -199,21 +199,21 @@ var rippleFactory = function rippleFactory() {
       }]);
 
       return RippledComponent;
-    }(_react2.default.Component);
+    }(_react.Component);
 
     RippledComponent.propTypes = {
-      children: _react2.default.PropTypes.any,
-      disabled: _react2.default.PropTypes.bool,
-      onRippleEnded: _react2.default.PropTypes.func,
-      ripple: _react2.default.PropTypes.bool,
-      rippleCentered: _react2.default.PropTypes.bool,
-      rippleClassName: _react2.default.PropTypes.string,
-      rippleSpread: _react2.default.PropTypes.number,
-      theme: _react2.default.PropTypes.shape({
-        ripple: _react2.default.PropTypes.string,
-        rippleActive: _react2.default.PropTypes.string,
-        rippleRestarting: _react2.default.PropTypes.string,
-        rippleWrapper: _react2.default.PropTypes.string
+      children: _react.PropTypes.any,
+      disabled: _react.PropTypes.bool,
+      onRippleEnded: _react.PropTypes.func,
+      ripple: _react.PropTypes.bool,
+      rippleCentered: _react.PropTypes.bool,
+      rippleClassName: _react.PropTypes.string,
+      rippleSpread: _react.PropTypes.number,
+      theme: _react.PropTypes.shape({
+        ripple: _react.PropTypes.string,
+        rippleActive: _react.PropTypes.string,
+        rippleRestarting: _react.PropTypes.string,
+        rippleWrapper: _react.PropTypes.string
       })
     };
     RippledComponent.defaultProps = {
diff --git a/lib/snackbar/Snackbar.js b/lib/snackbar/Snackbar.js
index 8795dfe17..07e157927 100644
--- a/lib/snackbar/Snackbar.js
+++ b/lib/snackbar/Snackbar.js
@@ -108,7 +108,7 @@ var factory = function factory(Overlay, Button) {
     active: _react.PropTypes.bool,
     className: _react.PropTypes.string,
     icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-    label: _react.PropTypes.string.isRequired,
+    label: _react.PropTypes.string,
     onClick: _react.PropTypes.func,
     onTimeout: _react.PropTypes.func,
     theme: _react.PropTypes.shape({
diff --git a/lib/time_picker/Clock.js b/lib/time_picker/Clock.js
index cb4cf47f8..5891b3cce 100644
--- a/lib/time_picker/Clock.js
+++ b/lib/time_picker/Clock.js
@@ -167,9 +167,9 @@ Clock.propTypes = {
   onChange: _react.PropTypes.func,
   onHandMoved: _react.PropTypes.func,
   theme: _react.PropTypes.shape({
-    clock: _react.PropTypes.string.isRequired,
-    clockWrapper: _react.PropTypes.string.isRequired,
-    placeholder: _react.PropTypes.string.isRequired
+    clock: _react.PropTypes.string,
+    clockWrapper: _react.PropTypes.string,
+    placeholder: _react.PropTypes.string
   }),
   time: _react.PropTypes.object
 };
diff --git a/lib/time_picker/ClockFace.js b/lib/time_picker/ClockFace.js
index b7a9eaac8..dda37de9e 100644
--- a/lib/time_picker/ClockFace.js
+++ b/lib/time_picker/ClockFace.js
@@ -102,9 +102,9 @@ Face.propTypes = {
   radius: _react.PropTypes.number,
   spacing: _react.PropTypes.number,
   theme: _react.PropTypes.shape({
-    active: _react.PropTypes.string.isRequired,
-    face: _react.PropTypes.string.isRequired,
-    number: _react.PropTypes.string.isRequired
+    active: _react.PropTypes.string,
+    face: _react.PropTypes.string,
+    number: _react.PropTypes.string
   }),
   twoDigits: _react.PropTypes.bool
 };
diff --git a/lib/time_picker/ClockHand.js b/lib/time_picker/ClockHand.js
index a934cac03..053b19e07 100644
--- a/lib/time_picker/ClockHand.js
+++ b/lib/time_picker/ClockHand.js
@@ -162,8 +162,8 @@ Hand.propTypes = {
   origin: _react.PropTypes.object,
   step: _react.PropTypes.number,
   theme: _react.PropTypes.shape({
-    hand: _react.PropTypes.string.isRequired,
-    knob: _react.PropTypes.string.isRequired
+    hand: _react.PropTypes.string,
+    knob: _react.PropTypes.string
   })
 };
 Hand.defaultProps = {
diff --git a/lib/time_picker/ClockMinutes.js b/lib/time_picker/ClockMinutes.js
index 95c48265b..780a90ba4 100644
--- a/lib/time_picker/ClockMinutes.js
+++ b/lib/time_picker/ClockMinutes.js
@@ -95,7 +95,7 @@ Minutes.propTypes = {
   selected: _react.PropTypes.number,
   spacing: _react.PropTypes.number,
   theme: _react.PropTypes.shape({
-    small: _react.PropTypes.string.isRequired
+    small: _react.PropTypes.string
   })
 };
 Minutes.defaultProps = {
diff --git a/lib/time_picker/TimePicker.js b/lib/time_picker/TimePicker.js
index 55f9dd54d..d93e13a9d 100644
--- a/lib/time_picker/TimePicker.js
+++ b/lib/time_picker/TimePicker.js
@@ -123,7 +123,7 @@ var factory = function factory(TimePickerDialog, Input) {
     label: _react.PropTypes.string,
     onChange: _react.PropTypes.func,
     theme: _react.PropTypes.shape({
-      input: _react.PropTypes.string.isRequired
+      input: _react.PropTypes.string
     }),
     value: _react.PropTypes.object
   };
diff --git a/lib/time_picker/TimePickerDialog.js b/lib/time_picker/TimePickerDialog.js
index f90546a3d..84bcf4792 100644
--- a/lib/time_picker/TimePickerDialog.js
+++ b/lib/time_picker/TimePickerDialog.js
@@ -153,19 +153,19 @@ var factory = function factory(Dialog) {
     onDismiss: _react.PropTypes.func,
     onSelect: _react.PropTypes.func,
     theme: _react.PropTypes.shape({
-      am: _react.PropTypes.string.isRequired,
-      amFormat: _react.PropTypes.string.isRequired,
-      ampm: _react.PropTypes.string.isRequired,
-      button: _react.PropTypes.string.isRequired,
-      dialog: _react.PropTypes.string.isRequired,
-      header: _react.PropTypes.string.isRequired,
-      hours: _react.PropTypes.string.isRequired,
-      hoursDisplay: _react.PropTypes.string.isRequired,
-      minutes: _react.PropTypes.string.isRequired,
-      minutesDisplay: _react.PropTypes.string.isRequired,
-      pm: _react.PropTypes.string.isRequired,
-      pmFormat: _react.PropTypes.string.isRequired,
-      separator: _react.PropTypes.string.isRequired
+      am: _react.PropTypes.string,
+      amFormat: _react.PropTypes.string,
+      ampm: _react.PropTypes.string,
+      button: _react.PropTypes.string,
+      dialog: _react.PropTypes.string,
+      header: _react.PropTypes.string,
+      hours: _react.PropTypes.string,
+      hoursDisplay: _react.PropTypes.string,
+      minutes: _react.PropTypes.string,
+      minutesDisplay: _react.PropTypes.string,
+      pm: _react.PropTypes.string,
+      pmFormat: _react.PropTypes.string,
+      separator: _react.PropTypes.string
     }),
     value: _react.PropTypes.object
   };

From fbca206e49a64aa96d9feec01663fdb0af05e1d9 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Fri, 3 Jun 2016 23:50:09 +0200
Subject: [PATCH 0612/1024] Latest build

---
 lib/app_bar/_config.scss         | 2 ++
 lib/app_bar/theme.scss           | 8 ++++++++
 lib/autocomplete/Autocomplete.js | 4 +++-
 lib/button/theme.scss            | 2 +-
 lib/utils/events.js              | 8 ++++----
 5 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/lib/app_bar/_config.scss b/lib/app_bar/_config.scss
index 067be3376..5c76b6189 100644
--- a/lib/app_bar/_config.scss
+++ b/lib/app_bar/_config.scss
@@ -2,5 +2,7 @@ $appbar-color: $color-primary-dark !default;
 $appbar-contrast: $color-primary-contrast !default;
 $appbar-title-total-distance: 8 * $unit !default;
 $appbar-height: 6.4 * $unit !default;
+$appbar-height-m-portrait: 5.6 * $unit !default;
+$appbar-height-m-landscape: 4.8 * $unit !default;
 $appbar-h-padding: 2.4 * $unit !default;
 $appbar-title-distance: $appbar-title-total-distance - $appbar-h-padding !default;
diff --git a/lib/app_bar/theme.scss b/lib/app_bar/theme.scss
index 50ad328b6..7a8c43468 100644
--- a/lib/app_bar/theme.scss
+++ b/lib/app_bar/theme.scss
@@ -9,6 +9,14 @@
   color: $appbar-contrast;
   background: $appbar-color;
 
+  @media screen and (max-width: $layout-breakpoint-xxs) and (orientation: portrait) {
+    height: $appbar-height-m-portrait;
+  }
+
+  @media screen and (max-width: $layout-breakpoint-xs) and (orientation: landscape) {
+    height: $appbar-height-m-landscape;
+  }
+
   &:not(.flat) {
     z-index: $z-index-high;
     box-shadow: 0 2px 5px rgba(0,0,0,.26);
diff --git a/lib/autocomplete/Autocomplete.js b/lib/autocomplete/Autocomplete.js
index 916c28b94..91a25484a 100644
--- a/lib/autocomplete/Autocomplete.js
+++ b/lib/autocomplete/Autocomplete.js
@@ -118,7 +118,9 @@ var factory = function factory(Chip, Input) {
       key: 'componentWillReceiveProps',
       value: function componentWillReceiveProps(nextProps) {
         if (!this.props.multiple) {
-          this.setState({ query: nextProps.value });
+          this.setState({
+            query: this.query(nextProps.value)
+          });
         }
       }
     }, {
diff --git a/lib/button/theme.scss b/lib/button/theme.scss
index e28fb5ca1..757e2056f 100644
--- a/lib/button/theme.scss
+++ b/lib/button/theme.scss
@@ -8,7 +8,7 @@
 %button {
   @include typo-button();
   position: relative;
-  display: inline-block;
+  display: inline-flex;
   height: $button-height;
   flex-direction: row;
   align-content: center;
diff --git a/lib/utils/events.js b/lib/utils/events.js
index 22be878af..87e42c565 100644
--- a/lib/utils/events.js
+++ b/lib/utils/events.js
@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = {
   getMousePosition: function getMousePosition(event) {
     return {
-      x: event.pageX - window.scrollX,
-      y: event.pageY - window.scrollY
+      x: event.pageX - (window.scrollX || window.pageXOffset),
+      y: event.pageY - (window.scrollY || window.pageYOffset)
     };
   },
   getTouchPosition: function getTouchPosition(event) {
     return {
-      x: event.touches[0].pageX - window.scrollX,
-      y: event.touches[0].pageY - window.scrollY
+      x: event.touches[0].pageX - (window.scrollX || window.pageXOffset),
+      y: event.touches[0].pageY - (window.scrollY || window.pageYOffset)
     };
   },
   pauseEvent: function pauseEvent(event) {

From 96599d3a0938647e9281a147b8fc4ee25ea57235 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 4 Jun 2016 16:36:17 +0200
Subject: [PATCH 0613/1024] Move some mixins

---
 components/_mixins.scss        | 42 ++++++++++------------------------
 components/button/_mixins.scss | 17 ++++++++++++++
 components/button/theme.scss   |  1 +
 lib/_mixins.scss               | 42 ++++++++++------------------------
 lib/button/_mixins.scss        | 17 ++++++++++++++
 lib/button/theme.scss          |  1 +
 server.js                      | 16 ++++++-------
 7 files changed, 68 insertions(+), 68 deletions(-)
 create mode 100644 components/button/_mixins.scss
 create mode 100644 lib/button/_mixins.scss

diff --git a/components/_mixins.scss b/components/_mixins.scss
index a4d9dfebc..f6159734b 100644
--- a/components/_mixins.scss
+++ b/components/_mixins.scss
@@ -197,38 +197,38 @@
 
 @mixin shadow-2dp() {
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-                0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
-                0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
+  0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
+  0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
 }
 
 @mixin shadow-3dp() {
   box-shadow: 0 3px 4px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-                0 3px 3px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
-                0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
+  0 3px 3px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
+  0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
 }
 
 @mixin shadow-4dp() {
   box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-                0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
-                0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
+  0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
+  0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
 }
 
 @mixin shadow-6dp() {
   box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-                0 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
-                0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
+  0 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
+  0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
 }
 
 @mixin shadow-8dp() {
   box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-                0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
-                0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity);
+  0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
+  0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity);
 }
 
 @mixin shadow-16dp() {
   box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-                0 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
-                0 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity);
+  0 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
+  0 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity);
 }
 
 //-- Animations
@@ -258,21 +258,3 @@
     height: 0;
   }
 }
-
-@mixin btn-colors($name, $color, $background, $hover) {
-  .#{$name}:not([disabled]) {
-    &.raised, &.floating {
-      color: $color;
-      background: $background;
-    }
-    &.flat, &.toggle {
-      color: $background;
-      &:focus:not(:active) {
-        background: $hover;
-      }
-    }
-    &.flat:hover {
-      background: $hover;
-    }
-  }
-}
diff --git a/components/button/_mixins.scss b/components/button/_mixins.scss
new file mode 100644
index 000000000..305be037a
--- /dev/null
+++ b/components/button/_mixins.scss
@@ -0,0 +1,17 @@
+@mixin btn-colors($name, $color, $background, $hover) {
+  .#{$name}:not([disabled]) {
+    &.raised, &.floating {
+      color: $color;
+      background: $background;
+    }
+    &.flat, &.toggle {
+      color: $background;
+      &:focus:not(:active) {
+        background: $hover;
+      }
+    }
+    &.flat:hover {
+      background: $hover;
+    }
+  }
+}
diff --git a/components/button/theme.scss b/components/button/theme.scss
index 757e2056f..ee875bd4c 100644
--- a/components/button/theme.scss
+++ b/components/button/theme.scss
@@ -1,5 +1,6 @@
 @import "http://github.com/base";
 @import "http://github.com/config";
+@import "http://github.com/mixins";
 
 .button {
   position: relative;
diff --git a/lib/_mixins.scss b/lib/_mixins.scss
index a4d9dfebc..f6159734b 100644
--- a/lib/_mixins.scss
+++ b/lib/_mixins.scss
@@ -197,38 +197,38 @@
 
 @mixin shadow-2dp() {
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-                0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
-                0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
+  0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
+  0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
 }
 
 @mixin shadow-3dp() {
   box-shadow: 0 3px 4px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-                0 3px 3px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
-                0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
+  0 3px 3px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
+  0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
 }
 
 @mixin shadow-4dp() {
   box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-                0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
-                0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
+  0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
+  0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
 }
 
 @mixin shadow-6dp() {
   box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-                0 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
-                0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
+  0 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
+  0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
 }
 
 @mixin shadow-8dp() {
   box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-                0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
-                0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity);
+  0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
+  0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity);
 }
 
 @mixin shadow-16dp() {
   box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-                0 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
-                0 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity);
+  0 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
+  0 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity);
 }
 
 //-- Animations
@@ -258,21 +258,3 @@
     height: 0;
   }
 }
-
-@mixin btn-colors($name, $color, $background, $hover) {
-  .#{$name}:not([disabled]) {
-    &.raised, &.floating {
-      color: $color;
-      background: $background;
-    }
-    &.flat, &.toggle {
-      color: $background;
-      &:focus:not(:active) {
-        background: $hover;
-      }
-    }
-    &.flat:hover {
-      background: $hover;
-    }
-  }
-}
diff --git a/lib/button/_mixins.scss b/lib/button/_mixins.scss
new file mode 100644
index 000000000..305be037a
--- /dev/null
+++ b/lib/button/_mixins.scss
@@ -0,0 +1,17 @@
+@mixin btn-colors($name, $color, $background, $hover) {
+  .#{$name}:not([disabled]) {
+    &.raised, &.floating {
+      color: $color;
+      background: $background;
+    }
+    &.flat, &.toggle {
+      color: $background;
+      &:focus:not(:active) {
+        background: $hover;
+      }
+    }
+    &.flat:hover {
+      background: $hover;
+    }
+  }
+}
diff --git a/lib/button/theme.scss b/lib/button/theme.scss
index 757e2056f..ee875bd4c 100644
--- a/lib/button/theme.scss
+++ b/lib/button/theme.scss
@@ -1,5 +1,6 @@
 @import "http://github.com/base";
 @import "http://github.com/config";
+@import "http://github.com/mixins";
 
 .button {
   position: relative;
diff --git a/server.js b/server.js
index a0942f30f..e52c1bbc3 100644
--- a/server.js
+++ b/server.js
@@ -7,8 +7,8 @@ const app = express();
 const compiler = webpack(config);
 
 app.use(require('webpack-dev-middleware')(compiler, {
-	noInfo: true,
-	publicPath: config.output.publicPath,
+  noInfo: true,
+  publicPath: config.output.publicPath,
   stats: {
     colors: true
   }
@@ -17,14 +17,14 @@ app.use(require('webpack-dev-middleware')(compiler, {
 app.use(require('webpack-hot-middleware')(compiler));
 
 app.get('*', function (req, res) {
-	res.sendFile(path.join(__dirname, './spec/index.html'));
+  res.sendFile(path.join(__dirname, './spec/index.html'));
 });
 
 app.listen(8080, '0.0.0.0', function (err) {
-	if (err) {
-		console.log(err);
-		return;
-	}
+  if (err) {
+    console.log(err);
+    return;
+  }
 
-	console.log('Listening at http://0.0.0.0:8080');
+  console.log('Listening at http://0.0.0.0:8080');
 });

From 419f16f63fed4f293eb9295de2f3874ab13aa6e9 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 4 Jun 2016 22:06:59 +0200
Subject: [PATCH 0614/1024] =?UTF-8?q?Plain=20SASS=20imports=20=F0=9F=8E=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/_base.scss               | 3 ---
 components/animations/zoom-in.scss  | 4 +++-
 components/animations/zoom-out.scss | 4 +++-
 components/app_bar/theme.scss       | 4 +++-
 components/autocomplete/theme.scss  | 4 +++-
 components/avatar/theme.scss        | 4 +++-
 components/button/theme.scss        | 4 +++-
 components/card/theme.scss          | 4 +++-
 components/checkbox/theme.scss      | 4 +++-
 components/chip/theme.scss          | 4 +++-
 components/commons.scss             | 4 +++-
 components/date_picker/theme.scss   | 4 +++-
 components/dialog/theme.scss        | 4 +++-
 components/drawer/theme.scss        | 4 +++-
 components/dropdown/theme.scss      | 4 +++-
 components/input/theme.scss         | 4 +++-
 components/layout/theme.scss        | 4 +++-
 components/link/theme.scss          | 4 +++-
 components/list/theme.scss          | 4 +++-
 components/menu/theme.scss          | 4 +++-
 components/navigation/theme.scss    | 4 +++-
 components/overlay/theme.scss       | 4 +++-
 components/progress_bar/theme.scss  | 4 +++-
 components/radio/theme.scss         | 4 +++-
 components/ripple/theme.scss        | 4 +++-
 components/slider/theme.scss        | 4 +++-
 components/snackbar/theme.scss      | 4 +++-
 components/switch/theme.scss        | 4 +++-
 components/table/theme.scss         | 4 +++-
 components/tabs/theme.scss          | 4 +++-
 components/time_picker/theme.scss   | 4 +++-
 components/tooltip/theme.scss       | 4 +++-
 lib/_base.scss                      | 3 ---
 lib/animations/zoom-in.scss         | 4 +++-
 lib/animations/zoom-out.scss        | 4 +++-
 lib/app_bar/theme.scss              | 4 +++-
 lib/autocomplete/theme.scss         | 4 +++-
 lib/avatar/theme.scss               | 4 +++-
 lib/button/theme.scss               | 4 +++-
 lib/card/theme.scss                 | 4 +++-
 lib/checkbox/theme.scss             | 4 +++-
 lib/chip/theme.scss                 | 4 +++-
 lib/commons.scss                    | 4 +++-
 lib/date_picker/theme.scss          | 4 +++-
 lib/dialog/theme.scss               | 4 +++-
 lib/drawer/theme.scss               | 4 +++-
 lib/dropdown/theme.scss             | 4 +++-
 lib/input/theme.scss                | 4 +++-
 lib/layout/theme.scss               | 4 +++-
 lib/link/theme.scss                 | 4 +++-
 lib/list/theme.scss                 | 4 +++-
 lib/menu/theme.scss                 | 4 +++-
 lib/navigation/theme.scss           | 4 +++-
 lib/overlay/theme.scss              | 4 +++-
 lib/progress_bar/theme.scss         | 4 +++-
 lib/radio/theme.scss                | 4 +++-
 lib/ripple/theme.scss               | 4 +++-
 lib/slider/theme.scss               | 4 +++-
 lib/snackbar/theme.scss             | 4 +++-
 lib/switch/theme.scss               | 4 +++-
 lib/table/theme.scss                | 4 +++-
 lib/tabs/theme.scss                 | 4 +++-
 lib/time_picker/theme.scss          | 4 +++-
 lib/tooltip/theme.scss              | 4 +++-
 64 files changed, 186 insertions(+), 68 deletions(-)
 delete mode 100644 components/_base.scss
 delete mode 100644 lib/_base.scss

diff --git a/components/_base.scss b/components/_base.scss
deleted file mode 100644
index 1ab106aa3..000000000
--- a/components/_base.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
diff --git a/components/animations/zoom-in.scss b/components/animations/zoom-in.scss
index 40087e850..d752e9401 100644
--- a/components/animations/zoom-in.scss
+++ b/components/animations/zoom-in.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 
 .enter, .leave {
   position: absolute;
diff --git a/components/animations/zoom-out.scss b/components/animations/zoom-out.scss
index 759e088c0..cf1500fc1 100644
--- a/components/animations/zoom-out.scss
+++ b/components/animations/zoom-out.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 
 .enter, .leave {
   position: absolute;
diff --git a/components/app_bar/theme.scss b/components/app_bar/theme.scss
index 7a8c43468..56147f646 100644
--- a/components/app_bar/theme.scss
+++ b/components/app_bar/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .appBar {
diff --git a/components/autocomplete/theme.scss b/components/autocomplete/theme.scss
index cb4854dbe..320f8c8ef 100644
--- a/components/autocomplete/theme.scss
+++ b/components/autocomplete/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 @import "http://github.com/input/config";
 
diff --git a/components/avatar/theme.scss b/components/avatar/theme.scss
index 714cc2f37..9514782ae 100644
--- a/components/avatar/theme.scss
+++ b/components/avatar/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .avatar {
diff --git a/components/button/theme.scss b/components/button/theme.scss
index ee875bd4c..e84017c08 100644
--- a/components/button/theme.scss
+++ b/components/button/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 @import "http://github.com/mixins";
 
diff --git a/components/card/theme.scss b/components/card/theme.scss
index a435c7d8b..1fbdef151 100644
--- a/components/card/theme.scss
+++ b/components/card/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .card {
diff --git a/components/checkbox/theme.scss b/components/checkbox/theme.scss
index da0cfb7cd..3c77203b8 100644
--- a/components/checkbox/theme.scss
+++ b/components/checkbox/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .field {
diff --git a/components/chip/theme.scss b/components/chip/theme.scss
index 5033f0d06..4baa8f9c9 100644
--- a/components/chip/theme.scss
+++ b/components/chip/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .chip {
diff --git a/components/commons.scss b/components/commons.scss
index 4c2556303..10c0ced55 100644
--- a/components/commons.scss
+++ b/components/commons.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/~normalize.css";
 
 html {
diff --git a/components/date_picker/theme.scss b/components/date_picker/theme.scss
index dbce4dfc7..e4dbbac76 100644
--- a/components/date_picker/theme.scss
+++ b/components/date_picker/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .input > [role="input"] {
diff --git a/components/dialog/theme.scss b/components/dialog/theme.scss
index e50e2c01d..62e7388db 100644
--- a/components/dialog/theme.scss
+++ b/components/dialog/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .dialog {
diff --git a/components/drawer/theme.scss b/components/drawer/theme.scss
index 3c2c2a1c4..a089640a3 100644
--- a/components/drawer/theme.scss
+++ b/components/drawer/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .drawer {
diff --git a/components/dropdown/theme.scss b/components/dropdown/theme.scss
index 58035e162..a128b2cdc 100644
--- a/components/dropdown/theme.scss
+++ b/components/dropdown/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/input/config";
 @import "http://github.com/config";
 
diff --git a/components/input/theme.scss b/components/input/theme.scss
index 06913179e..739de903e 100644
--- a/components/input/theme.scss
+++ b/components/input/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .input {
diff --git a/components/layout/theme.scss b/components/layout/theme.scss
index 05092db62..a07c02924 100644
--- a/components/layout/theme.scss
+++ b/components/layout/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 @import "http://github.com/mixins";
 
diff --git a/components/link/theme.scss b/components/link/theme.scss
index b973fb8ab..11eb90844 100644
--- a/components/link/theme.scss
+++ b/components/link/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 
 .icon {
   margin-right: $unit;
diff --git a/components/list/theme.scss b/components/list/theme.scss
index 10a264e69..e432fcccb 100644
--- a/components/list/theme.scss
+++ b/components/list/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .list {
diff --git a/components/menu/theme.scss b/components/menu/theme.scss
index bff050070..9f4ec9b3c 100644
--- a/components/menu/theme.scss
+++ b/components/menu/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .iconMenu {
diff --git a/components/navigation/theme.scss b/components/navigation/theme.scss
index b8066c0c9..2d8375fd2 100644
--- a/components/navigation/theme.scss
+++ b/components/navigation/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .horizontal {
diff --git a/components/overlay/theme.scss b/components/overlay/theme.scss
index f107b466c..058bb466b 100644
--- a/components/overlay/theme.scss
+++ b/components/overlay/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .overlay {
diff --git a/components/progress_bar/theme.scss b/components/progress_bar/theme.scss
index e34bc766e..bcbc64d90 100644
--- a/components/progress_bar/theme.scss
+++ b/components/progress_bar/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .linear {
diff --git a/components/radio/theme.scss b/components/radio/theme.scss
index 45c493373..5d0645089 100644
--- a/components/radio/theme.scss
+++ b/components/radio/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .radio {
diff --git a/components/ripple/theme.scss b/components/ripple/theme.scss
index 90be70f54..6212078db 100644
--- a/components/ripple/theme.scss
+++ b/components/ripple/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 %ripple {
diff --git a/components/slider/theme.scss b/components/slider/theme.scss
index 895b6e3d7..bf3468152 100644
--- a/components/slider/theme.scss
+++ b/components/slider/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .container {
diff --git a/components/snackbar/theme.scss b/components/snackbar/theme.scss
index 0ebb89c25..e9e7071ac 100644
--- a/components/snackbar/theme.scss
+++ b/components/snackbar/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .snackbar {
diff --git a/components/switch/theme.scss b/components/switch/theme.scss
index bc7924c84..c01664379 100644
--- a/components/switch/theme.scss
+++ b/components/switch/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .field {
diff --git a/components/table/theme.scss b/components/table/theme.scss
index b6d03b053..50db57d34 100644
--- a/components/table/theme.scss
+++ b/components/table/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .table {
diff --git a/components/tabs/theme.scss b/components/tabs/theme.scss
index 806c1dfb1..f2e77760e 100644
--- a/components/tabs/theme.scss
+++ b/components/tabs/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .tabs {
diff --git a/components/time_picker/theme.scss b/components/time_picker/theme.scss
index ade3a0381..297982895 100644
--- a/components/time_picker/theme.scss
+++ b/components/time_picker/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .input > [role="input"] {
diff --git a/components/tooltip/theme.scss b/components/tooltip/theme.scss
index e588b1872..e87d013f2 100644
--- a/components/tooltip/theme.scss
+++ b/components/tooltip/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .tooltipWrapper {
diff --git a/lib/_base.scss b/lib/_base.scss
deleted file mode 100644
index 1ab106aa3..000000000
--- a/lib/_base.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
diff --git a/lib/animations/zoom-in.scss b/lib/animations/zoom-in.scss
index 40087e850..d752e9401 100644
--- a/lib/animations/zoom-in.scss
+++ b/lib/animations/zoom-in.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 
 .enter, .leave {
   position: absolute;
diff --git a/lib/animations/zoom-out.scss b/lib/animations/zoom-out.scss
index 759e088c0..cf1500fc1 100644
--- a/lib/animations/zoom-out.scss
+++ b/lib/animations/zoom-out.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 
 .enter, .leave {
   position: absolute;
diff --git a/lib/app_bar/theme.scss b/lib/app_bar/theme.scss
index 7a8c43468..56147f646 100644
--- a/lib/app_bar/theme.scss
+++ b/lib/app_bar/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .appBar {
diff --git a/lib/autocomplete/theme.scss b/lib/autocomplete/theme.scss
index cb4854dbe..320f8c8ef 100644
--- a/lib/autocomplete/theme.scss
+++ b/lib/autocomplete/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 @import "http://github.com/input/config";
 
diff --git a/lib/avatar/theme.scss b/lib/avatar/theme.scss
index 714cc2f37..9514782ae 100644
--- a/lib/avatar/theme.scss
+++ b/lib/avatar/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .avatar {
diff --git a/lib/button/theme.scss b/lib/button/theme.scss
index ee875bd4c..e84017c08 100644
--- a/lib/button/theme.scss
+++ b/lib/button/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 @import "http://github.com/mixins";
 
diff --git a/lib/card/theme.scss b/lib/card/theme.scss
index a435c7d8b..1fbdef151 100644
--- a/lib/card/theme.scss
+++ b/lib/card/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .card {
diff --git a/lib/checkbox/theme.scss b/lib/checkbox/theme.scss
index da0cfb7cd..3c77203b8 100644
--- a/lib/checkbox/theme.scss
+++ b/lib/checkbox/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .field {
diff --git a/lib/chip/theme.scss b/lib/chip/theme.scss
index 5033f0d06..4baa8f9c9 100644
--- a/lib/chip/theme.scss
+++ b/lib/chip/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .chip {
diff --git a/lib/commons.scss b/lib/commons.scss
index 4c2556303..10c0ced55 100644
--- a/lib/commons.scss
+++ b/lib/commons.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/~normalize.css";
 
 html {
diff --git a/lib/date_picker/theme.scss b/lib/date_picker/theme.scss
index dbce4dfc7..e4dbbac76 100644
--- a/lib/date_picker/theme.scss
+++ b/lib/date_picker/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .input > [role="input"] {
diff --git a/lib/dialog/theme.scss b/lib/dialog/theme.scss
index e50e2c01d..62e7388db 100644
--- a/lib/dialog/theme.scss
+++ b/lib/dialog/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .dialog {
diff --git a/lib/drawer/theme.scss b/lib/drawer/theme.scss
index 3c2c2a1c4..a089640a3 100644
--- a/lib/drawer/theme.scss
+++ b/lib/drawer/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .drawer {
diff --git a/lib/dropdown/theme.scss b/lib/dropdown/theme.scss
index 58035e162..a128b2cdc 100644
--- a/lib/dropdown/theme.scss
+++ b/lib/dropdown/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/input/config";
 @import "http://github.com/config";
 
diff --git a/lib/input/theme.scss b/lib/input/theme.scss
index 06913179e..739de903e 100644
--- a/lib/input/theme.scss
+++ b/lib/input/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .input {
diff --git a/lib/layout/theme.scss b/lib/layout/theme.scss
index 05092db62..a07c02924 100644
--- a/lib/layout/theme.scss
+++ b/lib/layout/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 @import "http://github.com/mixins";
 
diff --git a/lib/link/theme.scss b/lib/link/theme.scss
index b973fb8ab..11eb90844 100644
--- a/lib/link/theme.scss
+++ b/lib/link/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 
 .icon {
   margin-right: $unit;
diff --git a/lib/list/theme.scss b/lib/list/theme.scss
index 10a264e69..e432fcccb 100644
--- a/lib/list/theme.scss
+++ b/lib/list/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .list {
diff --git a/lib/menu/theme.scss b/lib/menu/theme.scss
index bff050070..9f4ec9b3c 100644
--- a/lib/menu/theme.scss
+++ b/lib/menu/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .iconMenu {
diff --git a/lib/navigation/theme.scss b/lib/navigation/theme.scss
index b8066c0c9..2d8375fd2 100644
--- a/lib/navigation/theme.scss
+++ b/lib/navigation/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .horizontal {
diff --git a/lib/overlay/theme.scss b/lib/overlay/theme.scss
index f107b466c..058bb466b 100644
--- a/lib/overlay/theme.scss
+++ b/lib/overlay/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .overlay {
diff --git a/lib/progress_bar/theme.scss b/lib/progress_bar/theme.scss
index e34bc766e..bcbc64d90 100644
--- a/lib/progress_bar/theme.scss
+++ b/lib/progress_bar/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .linear {
diff --git a/lib/radio/theme.scss b/lib/radio/theme.scss
index 45c493373..5d0645089 100644
--- a/lib/radio/theme.scss
+++ b/lib/radio/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .radio {
diff --git a/lib/ripple/theme.scss b/lib/ripple/theme.scss
index 90be70f54..6212078db 100644
--- a/lib/ripple/theme.scss
+++ b/lib/ripple/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 %ripple {
diff --git a/lib/slider/theme.scss b/lib/slider/theme.scss
index 895b6e3d7..bf3468152 100644
--- a/lib/slider/theme.scss
+++ b/lib/slider/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .container {
diff --git a/lib/snackbar/theme.scss b/lib/snackbar/theme.scss
index 0ebb89c25..e9e7071ac 100644
--- a/lib/snackbar/theme.scss
+++ b/lib/snackbar/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .snackbar {
diff --git a/lib/switch/theme.scss b/lib/switch/theme.scss
index bc7924c84..c01664379 100644
--- a/lib/switch/theme.scss
+++ b/lib/switch/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .field {
diff --git a/lib/table/theme.scss b/lib/table/theme.scss
index b6d03b053..50db57d34 100644
--- a/lib/table/theme.scss
+++ b/lib/table/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .table {
diff --git a/lib/tabs/theme.scss b/lib/tabs/theme.scss
index 806c1dfb1..f2e77760e 100644
--- a/lib/tabs/theme.scss
+++ b/lib/tabs/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .tabs {
diff --git a/lib/time_picker/theme.scss b/lib/time_picker/theme.scss
index ade3a0381..297982895 100644
--- a/lib/time_picker/theme.scss
+++ b/lib/time_picker/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .input > [role="input"] {
diff --git a/lib/tooltip/theme.scss b/lib/tooltip/theme.scss
index e588b1872..e87d013f2 100644
--- a/lib/tooltip/theme.scss
+++ b/lib/tooltip/theme.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/base";
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
 @import "http://github.com/config";
 
 .tooltipWrapper {

From 27a442079a306332c1e6f5193c646ce4254b8001 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 4 Jun 2016 22:23:58 +0200
Subject: [PATCH 0615/1024] New README

---
 README.md                                     | 160 +++++++++++-----
 docs/app/components/layout/install/install.md | 180 +++++++++++++-----
 2 files changed, 242 insertions(+), 98 deletions(-)

diff --git a/README.md b/README.md
index 6849796b7..00dc0e4d6 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,8 @@
-# React Toolbox
+# <a href='http://react-toolbox.com/'><img src='https://dl.dropboxusercontent.com/u/2247264/banner.png' height='50'></a>
 
-[![npm version](https://img.shields.io/npm/v/react-toolbox.svg?style=flat-square)](https://www.npmjs.com/package/react-toolbox)
-[![Build Status](http://img.shields.io/travis/react-toolbox/react-toolbox/master.svg?style=flat-square)](https://travis-ci.org/react-toolbox/react-toolbox)
-[![NPM Status](http://img.shields.io/npm/dm/react-toolbox.svg?style=flat-square)](https://www.npmjs.org/package/react-toolbox)
-[![react-toolbox channel on discord](https://img.shields.io/badge/discord-%23react--toolbox%20%40%20reactiflux-61dafb.svg?style=flat-square)](https://discord.gg/0ZcbPKXt5bW9FLzM)
-[![Donate](https://img.shields.io/badge/donate-paypal-blue.svg?style=flat-square)](https://paypal.me/javivelasco)
+[![npm version](https://img.shields.io/npm/v/react-toolbox.svg?style=flat-square)](https://www.npmjs.com/package/react-toolbox) [![Build Status](http://img.shields.io/travis/react-toolbox/react-toolbox/master.svg?style=flat-square)](https://travis-ci.org/react-toolbox/react-toolbox) [![NPM Status](http://img.shields.io/npm/dm/react-toolbox.svg?style=flat-square)](https://www.npmjs.org/package/react-toolbox) [![react-toolbox channel on discord](https://img.shields.io/badge/discord-%23react--toolbox%20%40%20reactiflux-61dafb.svg?style=flat-square)](https://discord.gg/0ZcbPKXt5bW9FLzM) [![Donate](https://img.shields.io/badge/donate-paypal-blue.svg?style=flat-square)](https://paypal.me/javivelasco)
 
-React Toolbox is a set of [React](http://facebook.github.io/react/) components that implement [Google's Material Design specification](https://www.google.com/design/spec/material-design/introduction.html). It's powered by [CSS Modules](https://github.com/css-modules/css-modules) and harmoniously integrates with your [webpack](http://webpack.github.io/) workflow. You can take a tour through our documentation website and try the components live!
+React Toolbox is a set of [React](http://facebook.github.io/react/) components that implement [Google's Material Design specification](https://www.google.com/design/spec/material-design/introduction.html). It's powered by [CSS Modules](https://github.com/css-modules/css-modules) and harmoniously integrates with your [webpack](http://webpack.github.io/) workflow, although you can use any other module bundler. You can take a tour through our documentation website and try the components live!
 
 ## Installation
 
@@ -18,15 +14,17 @@ npm install --save react-toolbox
 
 ## Prerequisites
 
-React Toolbox uses [CSS Modules](https://github.com/css-modules/css-modules) and [SASS](http://sass-lang.com/) to provide default stylesheets. If you want to import components bundled with stylesheets, your module bundler should be able to require SASS modules. You can use whatever module bundler you want as long as it can require SASS files from `node_modules`, but we recommend [webpack](). If you are experiencing require errors, make sure your configuration satisfies the requirements.
+React Toolbox uses [CSS Modules](https://github.com/css-modules/css-modules) by default to import stylesheets written in [SASS](http://sass-lang.com/). In case you want to import the components already bundled with CSS, your module bundler should be able to require these SASS modules.
 
-Of course this is a set of React components so you should be familiar with [React](). If you are willing to customize your components via themes, you may want to take a look to [react-css-themr]() which is used to make styling easier.
+Although we recommend [webpack](https://webpack.github.io/), you are free to use whatever module bundler you want as long as it can compile and require SASS files located in your `node_modules`. If you are experiencing require errors, make sure your configuration satisfies this requirement.
+
+Of course this is a set of React components so you should be familiar with [React](https://facebook.github.io/react/). If want to customize your components via themes, you may want to take a look to [react-css-themr](https://github.com/javivelasco/react-css-themr) which is used by React Toolbox to make component easily themeable.
 
 ## Basic usage
 
-The minimal example requires a `Button` bundled with styles:
+In this minimal example, we import a `Button` with styles already bundled:
 
-```
+```js
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Button } from 'react-toolbox/lib/button';
@@ -37,7 +35,7 @@ ReactDOM.render(
 );
 ```
 
-Take into account that any required style will be bundled in the final CSS so you probably would want to require components one by one instead of requiring directly from the root index.
+Take into account that any required style will be included in the final CSS so your final would include `Button` styles in this case. It's more convenient to import components this way (or with raw imports) because if you require from the project root, every stylesheet of React Toolbox will be included, even if you don't use it.
 
 ## Importing components
 
@@ -52,89 +50,147 @@ First let's take a look on how the components are structured in the project. The
  |---- theme.scss
 ```
 
-There you can see a component definition file, a readme, an index file, a theme stylesheet and a configuration file holding the SASS variables to configure the stylesheet. Depending on whether you want the styles to be directly bundled or not, you can import components in two different ways:
+As you can see in the previous block, each folder includes: a Javascript file for each component/subcomponent; a README with documentation, an index Javascript file that imports and injects styles and dependencies for you, a default theme SASS stylesheet and a configuration partial with configuration variables. Depending on whether you want the styles to be directly bundled or not, you can import components in **two** different ways.
 
-- **Bundled component**: the component requires the corresponding `theme.scss` for you so it will be included in the final bundle. Also, the local classnames will be injected in the component automatically. To import a bundled component you have to require from the `index.js` file. For example: `import {AppBar} from 'react-toolbox/lib/app_bar'`.
+### Bundled component
 
-- **Raw component**: the component is required alone, without any CSS. In this case you are responsible from providing a theme. To import a raw component you have to require directly from the component definition. For example: `import AppBar from 'react-toolbox/lib/app_bar/AppBar'`.
+You import from the index file so the imported component comes with all dependencies and themes already required and injected for you. This means that the CSS for each dependency will be bundled in your final CSS automatically and the component markup includes the classnames to be styled. For example:
 
-## Customization
+```js
+import { AppBar } from 'react-toolbox/lib/app_bar;
+```
 
-Since you can import raw components and then inject a theme via props or context, you can use whatever you want to provide styles. We give you some SASS stylesheets but you can configure them at import time or even port them to CSS Next or whatever. Furthermore, you can provide extra theming classes that will be mixed in the component so you can even target DOM elements in subcomponents from a parent. Let's see some examples.
+### Raw component
 
-### Customization via SASS Loader
+You import from the component definition so the imported component is bundled with its dependencies but it does not require any style for you. This means that no CSS will be bundled and the component markup will **not** include any classname. It's your responsibility to provide a theme to the component to be properly style and you can do it via properties or context. For example:
 
-Every component in React Toolbox has a `_config.scss` partial and [some parent partials](https://github.com/react-toolbox/react-toolbox/tree/dev/components) defining configuration variables that are used in each `theme.scss`. Since all variables are defined as `!default`, you can prepend variable overrides with a custom `theme.scss` file to each SASS stylesheet required in the project.
+```js
+import { AppBar } from 'react-toolbox/lib/app_bar/AppBar.js;
+```
 
-If you are importing bundled components, you can use something like [sass-loader](https://github.com/jtangelder/sass-loader) to prepend your custom configuration files to every sass stylesheet by using the `data` option. For example, in your webpack config:
+## Customizing components
+
+Every component accepts a `theme` property intended to provide a [CSS Module import object](https://github.com/css-modules/css-modules) that will be used by the component to assign local classnames to its DOM nodes. Therefore, each one implements a documented **classname API** so if you want to customize a component, you just need to provide a theme object with the appropriated classname  mapping.  
+
+If the component has already a theme injected, the properties you pass will be merged with the injected. In this way, you can **add** classnames to the nodes of a specific component and use them to add or to override styles. For example, if you want to customize the `AppBar` to be purple:
 
 ```js
-sassLoader: {
-  data: '@import "' + path.resolve(__dirname, 'theme/_theme.scss') + '";'
+import React from 'react';
+import { AppBar } from 'react-toolbox/lib/app_bar';
+import theme from './PurpleAppBar.scss';
+
+const PurpleAppBar = (props) => (
+  <AppBar {...props} theme={theme} />
+);
+
+export default PurpleAppBar;
+
+```
+
+```scss
+.appBar {
+  background-color: #800080;
 }
 ```
 
-### Customization via Theme Property
+In this case we are **adding** styles to an `AppBar` component that already has some styles injected. It works because the component background by default has the same priority as the one we added. There will be cases where the original rule is more restrictive. For those cases you would need to boost priority using the same restrictions as in the original stylesheet. Feel free to take a look into the original themes or just check the selectors you want to override in DevTools.
+
+If the component has no styles injected, you should provide a theme object implementing the full API. You are free to require the CSS Module you want but take into account that every classname is there for a reason. You can either provide a theme via prop or via context as we will see later.
+
+## Theming
 
-Every component in React Toolbox have a **classname API** that can be browsed from the documentation. Also, they accept a `theme` property intended to provide a [CSS Module import object](https://github.com/css-modules/css-modules) that will be used by the component to assign local classnames to its DOM nodes.
+You can afford theming in multiple ways. First of all, you have to understand that React Toolbox stylesheets are written in SASS and configured using the **config** files we saw earlier. Also you may want to check [colors](https://github.com/react-toolbox/react-toolbox/blob/dev/components/_colors.scss) and [globals](https://github.com/react-toolbox/react-toolbox/blob/dev/components/_globals.scss) files to get an overview on the **variables** you have to override to get the results you want.
 
-React Toolbox uses [react-css-themr](github.com/javivelasco/react-css-themr) to make theming easier. Feel free to take a look to the documentation to learn how you can use themes for the components. For example, imagine you want to create a green success button whose icons are red:
+In most scenarios you can get more customized themes by overriding those variables and compiling stylesheets with them. For example, you can create a `_theme.scss` SASS file:
 
+```scss
+@import "http://github.com/~react-toolbox/lib/colors";
+
+$color-primary: $palette-blue-500;
+$color-primary-dark: $palette-blue-700;
 ```
-// SuccessButton.js
-import { Button } from 'react-toolbox/lib/button';
-import successTheme from './success-theme.scss';
 
-const SuccessButton = (props) => (
-  <Button theme={successButtonTheme} {...props} />
-);
+This file should be prepended to each stylesheet compilation which be achieved in multiple ways.
 
-export default SuccessButton;
+### Using SASS Loader
+
+If you are using  [Webpack](http://webpack.github.io/) as module bundler, you are probably using [sass-loader](https://github.com/jtangelder/sass-loader) as well. What we want to do is to prepend to each SASS file compilation a bunch of variables to override and this can be done with the `data` option. For example:
+
+```js
+sassLoader: {
+  data: '@import "' + path.resolve(__dirname, 'theme/_theme.scss') + '";'
+}
 ```
 
+In this case we have are prepending the theme import to each SASS compilation so the primary color will be changed in every single stylesheet. If you are not using webpack maybe your loader still has a similar option, otherwise don't worry, there are solutions.
+
+### Using SASS imports and props
+
+Remember that you can import components without styles and provide those styles using the theme property. For example, a theme for a button customized with the previous theme file would be like:
+
+```scss
+@import "http://github.com/theme.scss";
+@import "http://github.com/~react-toolbox/lib/button/theme";
 ```
-// success-theme.scss
-.primary {
-  background: green;
-}
 
-.icon {
-  color: red
-}
+Then, when you use a button you can inject the appropriated theme:
+
+```js
+import { Button } from 'react-toolbox/lib/button/Button';
+import buttonTheme from './theme/button.scss';
+
+const ThemedButton = (props) => (
+  <Button theme={buttonTheme}  {...props} />
+);
+
+export default ThemedButton;
 ```
 
-The given classes will be added to the component and, since they are defined *after* the original CSS they would take priority. Note that you can also boost priority by assigning a `className`. Check more examples at [react-css-themr](www.github.com/javivelasco/react-css-themr) documentation.
+With this technique you have to create wrappers for every component and this is not cool at all... but don't worry, we can provide the theme via context to avoid this.
 
-### Customization via Theme Context
+### Using SASS imports and context
 
-Alternatively, you can provide CSS Modules object to React Toolbox components using context. This is useful in case you want to create a custom theme without creating wrappers for each raw component. To use this customization you need to install react-css-themr and then use the **theme keys** specified in each component documentation. For example:
+This is a good moment to check out [react-css-themr](http://github.com/javivelasco/react-css-themr) if you still didn't. Every component in React Toolbox has a key assigned that can be used to provide a default CSS Module. You can create a theme like:
 
+```js
+export default {
+  RTRipple: require('./ripple.scss'),
+  RTButton: require('./button.scss')
+}
 ```
+
+Check for each component what key uses. Then, when you have a theme object fully imported and customized for each component your application uses, you can use it like we list here:
+
+```js
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { render } from 'react-dom';
 import { ThemeProvider } from 'react-css-themr';
-import Button from 'react-toolbox/lib/button/Button';
+import theme from './theme/theme.js';
 import App from './App.js';
 
-const theme = {
-  RTButton: require('./theme/button-style')
-};
-
-const ThemedApp = (children) => (
+render(
   <ThemeProvider theme={theme}>
     <App />
   </ThemeProvider>
-)
-
-ReactDOM.render(<ThemedApp />, document.getElementById('app'));
+, document.getElementById('app'))
 ```
 
+A couple of things here. First you need to use raw components to get this styles properly applied. Second, you have to add dependency themes by yourself. For example, the `Button` requires `Ripple` so you have to provide styles for both of them.
+
 ## Roboto Font and Material Design Icons
 
 React Toolbox assumes that you are importing [Roboto Font](https://www.google.com/fonts/specimen/Roboto) and [Material Design Icons](https://www.google.com/design/icons/).
 
 In order to import the fonts for you, we'd need to include them in the CSS which is considered a bad practice. If you are not including them in your app, go to the linked sites and follow the instructions.
 
+## Server Side Rendering
+
+The only requirement for SSR is to be able to require ES6 and CSS Modules in the backend. To make it possible you can check projects like [CSS Modules register hook](https://github.com/css-modules/css-modules-require-hook) or [Webpack Isomorphic tools](https://github.com/halt-hammerzeit/webpack-isomorphic-tools). Also, make sure you can import from `node_modules`.
+
+## Examples
+
+For now we have a [repository example](https://github.com/react-toolbox/react-toolbox-example) demonstrating configuration and some basic customization. For now it's not using SSR rendering but it shouldn't be difficult to implement an example so it will come soon. Feel free to PR your example project or to add some use cases to the repository.
+
 ## TypeScript
 
 A TypeScript definition file `react-toolbox.d.ts` is available. It is referenced in `package.json` and should be picked up by the TypeScript compiler when importing from the npm package.
diff --git a/docs/app/components/layout/install/install.md b/docs/app/components/layout/install/install.md
index bfd2c244e..cee30961d 100644
--- a/docs/app/components/layout/install/install.md
+++ b/docs/app/components/layout/install/install.md
@@ -1,6 +1,6 @@
 # Installation, usage and customization
 
-React Toolbox is a set of [React](http://facebook.github.io/react/) components that implement [Google's Material Design specification](https://www.google.com/design/spec/material-design/introduction.html). It's powered by [CSS Modules](https://github.com/css-modules/css-modules) and harmoniously integrates with your [webpack](http://webpack.github.io/) workflow. You can take a tour through our documentation website and try the components live!
+React Toolbox is a set of [React](http://facebook.github.io/react/) components that implement [Google's Material Design specification](https://www.google.com/design/spec/material-design/introduction.html). It's powered by [CSS Modules](https://github.com/css-modules/css-modules) and harmoniously integrates with your [webpack](http://webpack.github.io/) workflow, although you can use any other module bundler. You can take a tour through our documentation website and try the components live!
 
 ## Installation
 
@@ -12,15 +12,17 @@ npm install --save react-toolbox
 
 ## Prerequisites
 
-React Toolbox uses [CSS Modules](https://github.com/css-modules/css-modules) and [SASS](http://sass-lang.com/) to provide default stylesheets. If you want to import components bundled with stylesheets, your module bundler should be able to require SASS modules. You can use whatever module bundler you want as long as it can require SASS files from `node_modules`, but we recommend [webpack](). If you are experiencing require errors, make sure your configuration satisfies the requirements.
+React Toolbox uses [CSS Modules](https://github.com/css-modules/css-modules) by default to import stylesheets written in [SASS](http://sass-lang.com/). In case you want to import the components already bundled with CSS, your module bundler should be able to require these SASS modules.
 
-Of course this is a set of React components so you should be familiar with [React](). If you are willing to customize your components via themes, you may want to take a look to [react-css-themr]() which is used to make styling easier.
+Although we recommend [webpack](https://webpack.github.io/), you are free to use whatever module bundler you want as long as it can compile and require SASS files located in your `node_modules`. If you are experiencing require errors, make sure your configuration satisfies this requirement.
+
+Of course this is a set of React components so you should be familiar with [React](https://facebook.github.io/react/). If want to customize your components via themes, you may want to take a look to [react-css-themr](https://github.com/javivelasco/react-css-themr) which is used by React Toolbox to make component easily themeable.
 
 ## Basic usage
 
-The minimal example requires a `Button` bundled with styles:
+In this minimal example, we import a `Button` with styles already bundled:
 
-```
+```js
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Button } from 'react-toolbox/lib/button';
@@ -31,7 +33,7 @@ ReactDOM.render(
 );
 ```
 
-Take into account that any required style will be bundled in the final CSS so you probably would want to require components one by one instead of requiring directly from the root index.
+Take into account that any required style will be included in the final CSS so your final would include `Button` styles in this case. It's more convenient to import components this way (or with raw imports) because if you require from the project root, every stylesheet of React Toolbox will be included, even if you don't use it.
 
 ## Importing components
 
@@ -46,85 +48,171 @@ First let's take a look on how the components are structured in the project. The
  |---- theme.scss
 ```
 
-There you can see a component definition file, a readme, an index file, a theme stylesheet and a configuration file holding the SASS variables to configure the stylesheet. Depending on whether you want the styles to be directly bundled or not, you can import components in two different ways:
+As you can see in the previous block, each folder includes: a Javascript file for each component/subcomponent; a README with documentation, an index Javascript file that imports and injects styles and dependencies for you, a default theme SASS stylesheet and a configuration partial with configuration variables. Depending on whether you want the styles to be directly bundled or not, you can import components in **two** different ways.
 
-- **Bundled component**: the component requires the corresponding `theme.scss` for you so it will be included in the final bundle. Also, the local classnames will be injected in the component automatically. To import a bundled component you have to require from the `index.js` file. For example: `import {AppBar} from 'react-toolbox/lib/app_bar'`.
+### Bundled component
 
-- **Raw component**: the component is required alone, without any CSS. In this case you are responsible from providing a theme. To import a raw component you have to require directly from the component definition. For example: `import AppBar from 'react-toolbox/lib/app_bar/AppBar'`.
+You import from the index file so the imported component comes with all dependencies and themes already required and injected for you. This means that the CSS for each dependency will be bundled in your final CSS automatically and the component markup includes the classnames to be styled. For example:
 
-## Customization
+```js
+import { AppBar } from 'react-toolbox/lib/app_bar;
+```
 
-Since you can import raw components and then inject a theme via props or context, you can use whatever you want to provide styles. We give you some SASS stylesheets but you can configure them at import time or even port them to CSS Next or whatever. Furthermore, you can provide extra theming classes that will be mixed in the component so you can even target DOM elements in subcomponents from a parent. Let's see some examples.
+### Raw component
+
+You import from the component definition so the imported component is bundled with its dependencies but it does not require any style for you. This means that no CSS will be bundled and the component markup will **not** include any classname. It's your responsibility to provide a theme to the component to be properly style and you can do it via properties or context. For example:
+
+```js
+import { AppBar } from 'react-toolbox/lib/app_bar/AppBar.js;
+```
 
-### Customization via SASS Loader
+## Customizing components
 
-Every component in React Toolbox has a `_config.scss` partial and [some parent partials](https://github.com/react-toolbox/react-toolbox/tree/dev/components) defining configuration variables that are used in each `theme.scss`. Since all variables are defined as `!default`, you can prepend variable overrides with a custom `theme.scss` file to each SASS stylesheet required in the project.
+Every component accepts a `theme` property intended to provide a [CSS Module import object](https://github.com/css-modules/css-modules) that will be used by the component to assign local classnames to its DOM nodes. Therefore, each one implements a documented **classname API** so if you want to customize a component, you just need to provide a theme object with the appropriated classname  mapping.  
 
-If you are importing bundled components, you can use something like [sass-loader](https://github.com/jtangelder/sass-loader) to prepend your custom configuration files to every sass stylesheet by using the `data` option. For example, in your webpack config:
+If the component has already a theme injected, the properties you pass will be merged with the injected. In this way, you can **add** classnames to the nodes of a specific component and use them to add or to override styles. For example, if you want to customize the `AppBar` to be purple:
 
 ```js
-sassLoader: {
-  data: '@import "' + path.resolve(__dirname, 'theme/_theme.scss') + '";'
+import React from 'react';
+import { AppBar } from 'react-toolbox/lib/app_bar';
+import theme from './PurpleAppBar.scss';
+
+const PurpleAppBar = (props) => (
+  <AppBar {...props} theme={theme} />
+);
+
+export default PurpleAppBar;
+
+```
+
+```scss
+.appBar {
+  background-color: #800080;
 }
 ```
 
-### Customization via Theme Property
+In this case we are **adding** styles to an `AppBar` component that already has some styles injected. It works because the component background by default has the same priority as the one we added. There will be cases where the original rule is more restrictive. For those cases you would need to boost priority using the same restrictions as in the original stylesheet. Feel free to take a look into the original themes or just check the selectors you want to override in DevTools.
+
+If the component has no styles injected, you should provide a theme object implementing the full API. You are free to require the CSS Module you want but take into account that every classname is there for a reason. You can either provide a theme via prop or via context as we will see later.
+
+## Theming
+
+You can afford theming in multiple ways. First of all, you have to understand that React Toolbox stylesheets are written in SASS and configured using the **config** files we saw earlier. Also you may want to check [colors](https://github.com/react-toolbox/react-toolbox/blob/dev/components/_colors.scss) and [globals](https://github.com/react-toolbox/react-toolbox/blob/dev/components/_globals.scss) files to get an overview on the **variables** you have to override to get the results you want.
 
-Every component in React Toolbox have a **classname API** that can be browsed from the documentation. Also, they accept a `theme` property intended to provide a [CSS Module import object](https://github.com/css-modules/css-modules) that will be used by the component to assign local classnames to its DOM nodes.
+In most scenarios you can get more customized themes by overriding those variables and compiling stylesheets with them. For example, you can create a `_theme.scss` SASS file:
 
-React Toolbox uses [react-css-themr](github.com/javivelasco/react-css-themr) to make theming easier. Feel free to take a look to the documentation to learn how you can use themes for the components. For example, imagine you want to create a green success button whose icons are red:
+```scss
+@import "http://github.com/~react-toolbox/lib/colors";
 
+$color-primary: $palette-blue-500;
+$color-primary-dark: $palette-blue-700;
 ```
-// SuccessButton.js
-import { Button } from 'react-toolbox/lib/button';
-import successTheme from './success-theme.scss';
 
-const SuccessButton = (props) => (
-  <Button theme={successButtonTheme} {...props} />
-);
+This file should be prepended to each stylesheet compilation which be achieved in multiple ways.
+
+### Using SASS Loader
+
+If you are using  [Webpack](http://webpack.github.io/) as module bundler, you are probably using [sass-loader](https://github.com/jtangelder/sass-loader) as well. What we want to do is to prepend to each SASS file compilation a bunch of variables to override and this can be done with the `data` option. For example:
 
-export default SuccessButton;
+```js
+sassLoader: {
+  data: '@import "' + path.resolve(__dirname, 'theme/_theme.scss') + '";'
+}
 ```
 
+In this case we have are prepending the theme import to each SASS compilation so the primary color will be changed in every single stylesheet. If you are not using webpack maybe your loader still has a similar option, otherwise don't worry, there are solutions.
+
+### Using SASS imports and props
+
+Remember that you can import components without styles and provide those styles using the theme property. For example, a theme for a button customized with the previous theme file would be like:
+
+```scss
+@import "http://github.com/theme.scss";
+@import "http://github.com/~react-toolbox/lib/button/theme";
 ```
-// success-theme.scss
-.primary {
-  background: green;
-}
 
-.icon {
-  color: red
-}
+Then, when you use a button you can inject the appropriated theme:
+
+```js
+import { Button } from 'react-toolbox/lib/button/Button';
+import buttonTheme from './theme/button.scss';
+
+const ThemedButton = (props) => (
+  <Button theme={buttonTheme}  {...props} />
+);
+
+export default ThemedButton;
 ```
 
-The given classes will be added to the component and, since they are defined *after* the original CSS they would take priority. Note that you can also boost priority by assigning a `className`. Check more examples at [react-css-themr](www.github.com/javivelasco/react-css-themr) documentation.
+With this technique you have to create wrappers for every component and this is not cool at all... but don't worry, we can provide the theme via context to avoid this.
 
-### Customization via Theme Context
+### Using SASS imports and context
 
-Alternatively, you can provide CSS Modules object to React Toolbox components using context. This is useful in case you want to create a custom theme without creating wrappers for each raw component. To use this customization you need to install react-css-themr and then use the **theme keys** specified in each component documentation. For example:
+This is a good moment to check out [react-css-themr](http://github.com/javivelasco/react-css-themr) if you still didn't. Every component in React Toolbox has a key assigned that can be used to provide a default CSS Module. You can create a theme like:
 
+```js
+export default {
+  RTRipple: require('./ripple.scss'),
+  RTButton: require('./button.scss')
+}
 ```
+
+Check for each component what key uses. Then, when you have a theme object fully imported and customized for each component your application uses, you can use it like we list here:
+
+```js
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { render } from 'react-dom';
 import { ThemeProvider } from 'react-css-themr';
-import Button from 'react-toolbox/lib/button/Button';
+import theme from './theme/theme.js';
 import App from './App.js';
 
-const theme = {
-  RTButton: require('./theme/button-style')
-};
-
-const ThemedApp = (children) => (
+render(
   <ThemeProvider theme={theme}>
     <App />
   </ThemeProvider>
-)
-
-ReactDOM.render(<ThemedApp />, document.getElementById('app'));
+, document.getElementById('app'))
 ```
 
+A couple of things here. First you need to use raw components to get this styles properly applied. Second, you have to add dependency themes by yourself. For example, the `Button` requires `Ripple` so you have to provide styles for both of them.
+
 ## Roboto Font and Material Design Icons
 
 React Toolbox assumes that you are importing [Roboto Font](https://www.google.com/fonts/specimen/Roboto) and [Material Design Icons](https://www.google.com/design/icons/).
 
 In order to import the fonts for you, we'd need to include them in the CSS which is considered a bad practice. If you are not including them in your app, go to the linked sites and follow the instructions.
+
+## Server Side Rendering
+
+The only requirement for SSR is to be able to require ES6 and CSS Modules in the backend. To make it possible you can check projects like [CSS Modules register hook](https://github.com/css-modules/css-modules-require-hook) or [Webpack Isomorphic tools](https://github.com/halt-hammerzeit/webpack-isomorphic-tools). Also, make sure you can import from `node_modules`.
+
+## Examples
+
+For now we have a [repository example](https://github.com/react-toolbox/react-toolbox-example) demonstrating configuration and some basic customization. For now it's not using SSR rendering but it shouldn't be difficult to implement an example so it will come soon. Feel free to PR your example project or to add some use cases to the repository.
+
+## TypeScript
+
+A TypeScript definition file `react-toolbox.d.ts` is available. It is referenced in `package.json` and should be picked up by the TypeScript compiler when importing from the npm package.
+
+Note that to comply with the typings requirement, a triple-slash reference to `react.d.ts` is *NOT included*. You will need to reference [react.d.ts](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/react/react.d.ts) somewhere in your project.
+
+## Authors and Contributors
+
+The project is being initially developed and maintained by [Javier Velasco](http://javivelasco.com) and [Javier Jiménez](http://soyjavi.com) and the [contribution scene](https://github.com/react-toolbox/react-toolbox/graphs/contributors) is just getting warm. We want to create reference components so any contribution is very welcome.
+
+To work in the project you'd need a `node` version supporting ES6 syntax. Although the project is built using Babel we use some ES6 features in the development server. Also, the package has been tested with `node 4.2.1`. Consider using [nvm](https://github.com/creationix/nvm) or [n](https://github.com/tj/n) to handle different node versions!
+
+To start the documentation site locally, you'll need to install the dependencies from both the main package and the docs subproject:
+
+```
+git clone https://github.com/react-toolbox/react-toolbox.git
+npm install
+cd docs/
+npm install
+npm start
+```
+
+Local documentation will then be available at `http://localhost:8081/`.
+
+## License
+
+This project is licensed under the terms of the [MIT license](https://github.com/react-toolbox/react-toolbox/blob/master/LICENSE).

From cea8111b61767f6eb5bd8da6618cadaadeaa09e3 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 4 Jun 2016 22:26:30 +0200
Subject: [PATCH 0616/1024] Small typos in README

---
 README.md                                     | 4 ++--
 docs/app/components/layout/install/install.md | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 00dc0e4d6..7e3f532b1 100644
--- a/README.md
+++ b/README.md
@@ -57,7 +57,7 @@ As you can see in the previous block, each folder includes: a Javascript file fo
 You import from the index file so the imported component comes with all dependencies and themes already required and injected for you. This means that the CSS for each dependency will be bundled in your final CSS automatically and the component markup includes the classnames to be styled. For example:
 
 ```js
-import { AppBar } from 'react-toolbox/lib/app_bar;
+import { AppBar } from 'react-toolbox/lib/app_bar';
 ```
 
 ### Raw component
@@ -65,7 +65,7 @@ import { AppBar } from 'react-toolbox/lib/app_bar;
 You import from the component definition so the imported component is bundled with its dependencies but it does not require any style for you. This means that no CSS will be bundled and the component markup will **not** include any classname. It's your responsibility to provide a theme to the component to be properly style and you can do it via properties or context. For example:
 
 ```js
-import { AppBar } from 'react-toolbox/lib/app_bar/AppBar.js;
+import { AppBar } from 'react-toolbox/lib/app_bar/AppBar.js';
 ```
 
 ## Customizing components
diff --git a/docs/app/components/layout/install/install.md b/docs/app/components/layout/install/install.md
index cee30961d..c3954096d 100644
--- a/docs/app/components/layout/install/install.md
+++ b/docs/app/components/layout/install/install.md
@@ -55,7 +55,7 @@ As you can see in the previous block, each folder includes: a Javascript file fo
 You import from the index file so the imported component comes with all dependencies and themes already required and injected for you. This means that the CSS for each dependency will be bundled in your final CSS automatically and the component markup includes the classnames to be styled. For example:
 
 ```js
-import { AppBar } from 'react-toolbox/lib/app_bar;
+import { AppBar } from 'react-toolbox/lib/app_bar';
 ```
 
 ### Raw component
@@ -63,7 +63,7 @@ import { AppBar } from 'react-toolbox/lib/app_bar;
 You import from the component definition so the imported component is bundled with its dependencies but it does not require any style for you. This means that no CSS will be bundled and the component markup will **not** include any classname. It's your responsibility to provide a theme to the component to be properly style and you can do it via properties or context. For example:
 
 ```js
-import { AppBar } from 'react-toolbox/lib/app_bar/AppBar.js;
+import { AppBar } from 'react-toolbox/lib/app_bar/AppBar.js';
 ```
 
 ## Customizing components

From dbba42573b4bf4a2c4290a2287ada63218985cd1 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 4 Jun 2016 22:27:57 +0200
Subject: [PATCH 0617/1024] =?UTF-8?q?=F0=9F=92=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     | 12 ++++++------
 docs/app/components/layout/install/install.md | 12 ++++++------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 7e3f532b1..91413672f 100644
--- a/README.md
+++ b/README.md
@@ -9,7 +9,7 @@ React Toolbox is a set of [React](http://facebook.github.io/react/) components t
 React Toolbox can be installed as an [npm package](https://www.npmjs.org/package/react-toolbox):
 
 ```bash
-npm install --save react-toolbox
+$ npm install --save react-toolbox
 ```
 
 ## Prerequisites
@@ -206,11 +206,11 @@ To work in the project you'd need a `node` version supporting ES6 syntax. Althou
 To start the documentation site locally, you'll need to install the dependencies from both the main package and the docs subproject:
 
 ```
-git clone https://github.com/react-toolbox/react-toolbox.git
-npm install
-cd docs/
-npm install
-npm start
+$ git clone https://github.com/react-toolbox/react-toolbox.git
+$ npm install
+$ cd docs/
+$ npm install
+$ npm start
 ```
 
 Local documentation will then be available at `http://localhost:8081/`.
diff --git a/docs/app/components/layout/install/install.md b/docs/app/components/layout/install/install.md
index c3954096d..54d026650 100644
--- a/docs/app/components/layout/install/install.md
+++ b/docs/app/components/layout/install/install.md
@@ -7,7 +7,7 @@ React Toolbox is a set of [React](http://facebook.github.io/react/) components t
 React Toolbox can be installed as an [npm package](https://www.npmjs.org/package/react-toolbox):
 
 ```bash
-npm install --save react-toolbox
+$ npm install --save react-toolbox
 ```
 
 ## Prerequisites
@@ -204,11 +204,11 @@ To work in the project you'd need a `node` version supporting ES6 syntax. Althou
 To start the documentation site locally, you'll need to install the dependencies from both the main package and the docs subproject:
 
 ```
-git clone https://github.com/react-toolbox/react-toolbox.git
-npm install
-cd docs/
-npm install
-npm start
+$ git clone https://github.com/react-toolbox/react-toolbox.git
+$ npm install
+$ cd docs/
+$ npm install
+$ npm start
 ```
 
 Local documentation will then be available at `http://localhost:8081/`.

From bd7b846edd3b5b36ce067fc56b9bb70f7958ea4c Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 4 Jun 2016 22:32:26 +0200
Subject: [PATCH 0618/1024] 1.0.0 release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 7f103ef77..b3e06eb9d 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "react-toolbox",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "homepage": "http://www.react-toolbox.com/",
-  "version": "0.16.2",
+  "version": "1.0.0",
   "main": "./lib",
   "author": {
     "name": "React Toolbox Team",

From 79472eeaedc13e8481380d3c449651b128643323 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 4 Jun 2016 22:34:58 +0200
Subject: [PATCH 0619/1024] =?UTF-8?q?=F0=9F=A4=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/app/components/_globals.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/app/components/_globals.scss b/docs/app/components/_globals.scss
index cfd472090..7e32be88c 100644
--- a/docs/app/components/_globals.scss
+++ b/docs/app/components/_globals.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/~react-toolbox/base";
+@import "http://github.com/~react-toolbox/colors";
+@import "http://github.com/~react-toolbox/globals";
+@import "http://github.com/~react-toolbox/mixins";
 @import "http://github.com/theme/theme";
 
 $unit: 1rem;

From c19c3e72f3630b4f4f5d799c85151b930bc91bd6 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 5 Jun 2016 22:55:23 +0200
Subject: [PATCH 0620/1024] Fix #541

---
 spec/style.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/spec/style.scss b/spec/style.scss
index 301047ea5..2d59d58c4 100644
--- a/spec/style.scss
+++ b/spec/style.scss
@@ -1,4 +1,6 @@
-@import "http://github.com/components/base";
+@import "http://github.com/components/colors";
+@import "http://github.com/components/globals";
+@import "http://github.com/components/mixins";
 @import "http://github.com/components/app_bar/config";
 @import "http://github.com/components/button/config";
 

From c8502456943d3bf71a437e48ec528deccc7a41da Mon Sep 17 00:00:00 2001
From: Olivier Louvignes <olivier@mg-crea.com>
Date: Mon, 6 Jun 2016 19:37:51 +0200
Subject: [PATCH 0621/1024] feat(datepicker,timepicker): add support for `name`
 prop

---
 components/date_picker/DatePicker.js       | 3 +++
 components/date_picker/DatePickerDialog.js | 3 ++-
 components/input/Input.js                  | 4 +++-
 components/time_picker/TimePicker.js       | 3 +++
 components/time_picker/TimePickerDialog.js | 3 ++-
 5 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/components/date_picker/DatePicker.js b/components/date_picker/DatePicker.js
index 78cb10ad2..a2ee7ae92 100644
--- a/components/date_picker/DatePicker.js
+++ b/components/date_picker/DatePicker.js
@@ -23,6 +23,7 @@ const factory = (Input, DatePickerDialog) => {
       ]),
       inputClassName: PropTypes.string,
       inputFormat: PropTypes.func,
+      name: PropTypes.string,
       label: PropTypes.string,
       maxDate: PropTypes.object,
       minDate: PropTypes.object,
@@ -66,6 +67,7 @@ const factory = (Input, DatePickerDialog) => {
             className={classnames(this.props.theme.input, {[inputClassName]: inputClassName })}
             error={this.props.error}
             onMouseDown={this.handleInputMouseDown}
+            name={this.props.name}
             label={this.props.label}
             readOnly
             type='text'
@@ -76,6 +78,7 @@ const factory = (Input, DatePickerDialog) => {
             autoOk={this.props.autoOk}
             active={this.state.active}
             className={this.props.className}
+            name={this.props.name}
             maxDate={this.props.maxDate}
             minDate={this.props.minDate}
             onDismiss={this.handleDismiss}
diff --git a/components/date_picker/DatePickerDialog.js b/components/date_picker/DatePickerDialog.js
index e46516a46..4136c383f 100644
--- a/components/date_picker/DatePickerDialog.js
+++ b/components/date_picker/DatePickerDialog.js
@@ -10,6 +10,7 @@ const factory = (Dialog, Calendar) => {
       className: PropTypes.string,
       maxDate: PropTypes.object,
       minDate: PropTypes.object,
+      name: PropTypes.string,
       onDismiss: PropTypes.func,
       onSelect: PropTypes.func,
       theme: PropTypes.shape({
@@ -74,7 +75,7 @@ const factory = (Dialog, Calendar) => {
 
     actions = [
       { label: 'Cancel', className: this.props.theme.button, onClick: this.props.onDismiss },
-      { label: 'Ok', className: this.props.theme.button, onClick: this.handleSelect }
+      { label: 'Ok', className: this.props.theme.button, name: this.props.name, onClick: this.handleSelect }
     ];
 
     render () {
diff --git a/components/input/Input.js b/components/input/Input.js
index 54b14a836..90160650c 100644
--- a/components/input/Input.js
+++ b/components/input/Input.js
@@ -17,6 +17,7 @@ const factory = (FontIcon) => {
         React.PropTypes.string,
         React.PropTypes.element
       ]),
+      name: React.PropTypes.string,
       label: React.PropTypes.string,
       maxLength: React.PropTypes.number,
       multiline: React.PropTypes.bool,
@@ -67,7 +68,7 @@ const factory = (FontIcon) => {
 
     render () {
       const { children, disabled, error, floating, hint, icon,
-              label: labelText, maxLength, multiline, required,
+              name, label: labelText, maxLength, multiline, required,
               theme, type, value, ...others} = this.props;
       const length = maxLength && value ? value.length : 0;
       const labelClassName = classnames(theme.label, {[theme.fixed]: !floating});
@@ -87,6 +88,7 @@ const factory = (FontIcon) => {
         onChange: this.handleChange,
         ref: 'input',
         role: 'input',
+        name,
         disabled,
         required,
         type,
diff --git a/components/time_picker/TimePicker.js b/components/time_picker/TimePicker.js
index fd2384157..d4beb984d 100644
--- a/components/time_picker/TimePicker.js
+++ b/components/time_picker/TimePicker.js
@@ -15,6 +15,7 @@ const factory = (TimePickerDialog, Input) => {
       error: PropTypes.string,
       format: PropTypes.oneOf(['24hr', 'ampm']),
       inputClassName: PropTypes.string,
+      name: PropTypes.string,
       label: PropTypes.string,
       onChange: PropTypes.func,
       theme: PropTypes.shape({
@@ -54,6 +55,7 @@ const factory = (TimePickerDialog, Input) => {
           <Input
             className={classnames(theme.input, {[inputClassName]: inputClassName })}
             error={this.props.error}
+            name={this.props.name}
             label={this.props.label}
             onMouseDown={this.handleInputMouseDown}
             readOnly
@@ -63,6 +65,7 @@ const factory = (TimePickerDialog, Input) => {
           <TimePickerDialog
             active={this.state.active}
             className={this.props.className}
+            name={this.props.name}
             format={format}
             onDismiss={this.handleDismiss}
             onSelect={this.handleSelect}
diff --git a/components/time_picker/TimePickerDialog.js b/components/time_picker/TimePickerDialog.js
index 5791c5cf8..ce7491a59 100644
--- a/components/time_picker/TimePickerDialog.js
+++ b/components/time_picker/TimePickerDialog.js
@@ -9,6 +9,7 @@ const factory = (Dialog) => {
       active: PropTypes.bool,
       className: PropTypes.string,
       format: PropTypes.oneOf(['24hr', 'ampm']),
+      name: PropTypes.string,
       onDismiss: PropTypes.func,
       onSelect: PropTypes.func,
       theme: PropTypes.shape({
@@ -68,7 +69,7 @@ const factory = (Dialog) => {
 
     actions = [
       { label: 'Cancel', className: this.props.theme.button, onClick: this.props.onDismiss },
-      { label: 'Ok', className: this.props.theme.button, onClick: this.handleSelect }
+      { label: 'Ok', className: this.props.theme.button, name: this.props.name, onClick: this.handleSelect }
     ];
 
     formatHours () {

From f8c1a3fd0d4eedf0ec07815d60dd667f2c6efdd4 Mon Sep 17 00:00:00 2001
From: Robert Parker <robert@flavorus.com>
Date: Tue, 7 Jun 2016 15:00:41 -0700
Subject: [PATCH 0622/1024] Update typings to external modules (no more
 'declare module ...') to get the definitions working automatically with npm

---
 components/app_bar/index.d.ts         |  56 ++++++++
 components/autocomplete/index.d.ts    |  95 ++++++++++++++
 components/avatar/index.d.ts          |  55 ++++++++
 components/button/index.d.ts          | 122 +++++++++++++++++
 components/card/index.d.ts            | 160 +++++++++++++++++++++++
 components/checkbox/index.d.ts        |  80 ++++++++++++
 components/chip/index.d.ts            |  66 ++++++++++
 components/date_picker/index.d.ts     |  67 ++++++++++
 components/dialog/index.d.ts          |  83 ++++++++++++
 components/drawer/index.d.ts          |  74 +++++++++++
 components/dropdown/index.d.ts        |  79 +++++++++++
 components/font_icon/index.d.ts       |  42 ++++++
 components/hoc/ActivableRenderer.d.ts |  13 ++
 components/input/index.d.ts           | 122 +++++++++++++++++
 components/link/index.d.ts            |  56 ++++++++
 components/list/index.d.ts            | 180 ++++++++++++++++++++++++++
 components/menu/index.d.ts            | 150 +++++++++++++++++++++
 components/navigation/index.d.ts      |  53 ++++++++
 components/overlay/index.d.ts         |  49 +++++++
 components/progress_bar/index.d.ts    |  69 ++++++++++
 components/radio/index.d.ts           |  95 ++++++++++++++
 components/slider/index.d.ts          |  72 +++++++++++
 components/snackbar/index.d.ts        |  97 ++++++++++++++
 components/switch/index.d.ts          |  75 +++++++++++
 components/table/index.d.ts           |  64 +++++++++
 components/tabs/index.d.ts            |  84 ++++++++++++
 components/time_picker/index.d.ts     |  59 +++++++++
 components/tooltip/index.d.ts         |  10 ++
 react-toolbox.d.ts => index.d.ts      |   0
 package.json                          |   8 +-
 30 files changed, 2231 insertions(+), 4 deletions(-)
 create mode 100644 components/app_bar/index.d.ts
 create mode 100644 components/autocomplete/index.d.ts
 create mode 100644 components/avatar/index.d.ts
 create mode 100644 components/button/index.d.ts
 create mode 100644 components/card/index.d.ts
 create mode 100644 components/checkbox/index.d.ts
 create mode 100644 components/chip/index.d.ts
 create mode 100644 components/date_picker/index.d.ts
 create mode 100644 components/dialog/index.d.ts
 create mode 100644 components/drawer/index.d.ts
 create mode 100644 components/dropdown/index.d.ts
 create mode 100644 components/font_icon/index.d.ts
 create mode 100644 components/hoc/ActivableRenderer.d.ts
 create mode 100644 components/input/index.d.ts
 create mode 100644 components/link/index.d.ts
 create mode 100644 components/list/index.d.ts
 create mode 100644 components/menu/index.d.ts
 create mode 100644 components/navigation/index.d.ts
 create mode 100644 components/overlay/index.d.ts
 create mode 100644 components/progress_bar/index.d.ts
 create mode 100644 components/radio/index.d.ts
 create mode 100644 components/slider/index.d.ts
 create mode 100644 components/snackbar/index.d.ts
 create mode 100644 components/switch/index.d.ts
 create mode 100644 components/table/index.d.ts
 create mode 100644 components/tabs/index.d.ts
 create mode 100644 components/time_picker/index.d.ts
 create mode 100644 components/tooltip/index.d.ts
 rename react-toolbox.d.ts => index.d.ts (100%)

diff --git a/components/app_bar/index.d.ts b/components/app_bar/index.d.ts
new file mode 100644
index 000000000..9e59dce88
--- /dev/null
+++ b/components/app_bar/index.d.ts
@@ -0,0 +1,56 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+
+export interface AppBarProps extends Props {
+	/**
+	 * If true, the AppBar shows a shadow.
+	 * @default false
+	 */
+	flat?: boolean,
+	/**
+	 * Determine if the bar should have position fixed (true) or relative (false)
+	 * @default false
+	 */
+	fixed?: boolean,
+}
+/**
+ * The app bar is a special kind of toolbar that�s used for branding, navigation, search, and actions. 
+ * Usually it contains controls on the right and left side and a title with the current section or app name. 
+ * You should give the content with children elements.
+ */
+export default class AppBar extends React.Component<AppBarProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/components/autocomplete/index.d.ts b/components/autocomplete/index.d.ts
new file mode 100644
index 000000000..ebfc38665
--- /dev/null
+++ b/components/autocomplete/index.d.ts
@@ -0,0 +1,95 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+export interface Conditional {
+	/**
+	 * If true, component will be disabled
+	 * @default false
+	 */
+	disabled?: boolean
+}
+
+/**
+ * Properties of components that have values that can be changed (T is the type of the value)
+ */
+export interface Changeable<T> {
+	/**
+	 * Callback called when the picker value is changed.
+	 * @param v Type of the value
+	 */
+	onChange?: (v: T) => void
+}
+
+export interface AutocompleteProps extends Props, Conditional, Changeable<string | Array<any>> {
+	/**
+	 * Sets the error string for the internal input element.
+	 */
+	error?: string,
+	/**
+	 * The text string to use for the floating label element.
+	 */
+	label?: string,
+	/**
+	 * If true, component can hold multiple values.
+	 * @default true
+	 */
+	multiple?: boolean,
+	/**
+	 * 	Object of key/values or array representing all items suggested.
+	 */
+	source: Object | Array<any>,
+	/**
+	 * If true, the list of suggestions will not be filtered when a value is selected, until the query is modified.
+	 * @default false
+	 */
+	showSuggestionsWhenValueIsSet?: boolean,
+	/**
+	 * Type of the input element. It can be a valid HTML5 input type
+	 * @default text
+	 */
+	type?: string,
+	/**
+	 * 	Value or array of values currently selected component.Current value of the input element.
+	 */
+	value?: string | Array<any>,
+}
+/**
+ * An input field with a set of predeterminated labeled values. When it's focused it shows a list of hints that are filtered by label as the user types. 
+ * They can be simple or multiple depending on the amount of values that can be selected. 
+ * The opening direction is determined at opening time depending on the current position.
+ */
+export default class Autocomplete extends React.Component<AutocompleteProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/components/avatar/index.d.ts b/components/avatar/index.d.ts
new file mode 100644
index 000000000..474eb0b63
--- /dev/null
+++ b/components/avatar/index.d.ts
@@ -0,0 +1,55 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+export interface Iconic {
+	/**
+	 * Value of the icon (See icon component).
+	 */
+	icon?: string | React.ReactElement<any> | React.ReactHTMLElement<any>,
+}
+export interface AvatarProps extends Props, Iconic {
+	children?: any,
+	image?: string | React.ReactElement<any> | React.ReactHTMLElement<any> | React.ClassicComponent<any, any>,
+	title?: string | boolean,
+}
+/**
+ * Avatars can be used to represent people. 
+ * For personal avatars, offer personalization options. 
+ * As users may choose not to personalize an avatar, provide delightful defaults. 
+ * When used with a specific logo, avatars can also be used to represent brand.
+ */
+export default class Avatar extends React.Component<AvatarProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/components/button/index.d.ts b/components/button/index.d.ts
new file mode 100644
index 000000000..b712fdc44
--- /dev/null
+++ b/components/button/index.d.ts
@@ -0,0 +1,122 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+
+// Interface for components with icons
+export interface Iconic {
+	/**
+	 * Value of the icon (See icon component).
+	 */
+	icon?: string | React.ReactElement<any> | React.ReactHTMLElement<any>,
+}
+
+export interface Conditional {
+	/**
+	 * If true, component will be disabled
+	 * @default false
+	 */
+	disabled?: boolean
+}
+
+/**
+ * Properties of components that can be clicked
+ */
+export interface Clickable {
+	/**
+	 *  Callback called when the button is clicked.
+	 */
+	onClick?: Function
+}
+export interface ButtonProps extends Props, Clickable, Conditional, Iconic {
+	/**
+	 * Indicates if the button should have accent color.
+	 * @default false
+	 */
+	accent?: boolean,
+	/**
+	 * If true, the button will have a flat look.
+	 * @default false
+	 */
+	flat?: boolean,
+	/**
+	 * If true, the button will have a floating look.
+	 * @default false
+	 */
+	floating?: boolean,
+	/**
+	 * If specified, the button will be rendered as an <a>
+	 */
+	href?: string,
+	/**
+	 * The text string to use for the name of the button.
+	 */
+	label?: string,
+	/**
+	 * If true, component will be disabled and show a loading animation.
+	 * @default false
+	 */
+	loading?: boolean,
+	/**
+	 * To be used with floating button. If true the button will be smaller. 
+	 * @default false
+	 */
+	mini?: boolean,
+	/**
+	 * Indicates if the button should have primary color.
+	 * @default false
+	 */
+	primary?: boolean,
+	/**
+	 * If true, the button will have a raised look.
+	 * @default false
+	 */
+	raised?: boolean,
+	/**
+	 * If true, component will have a ripple effect on click.
+	 * @default true
+	 */
+	ripple?: boolean,
+}
+/**
+ * A button clearly communicates what action will occur when the user touches it. 
+ * It consists of text, an image, or both, designed in accordance with your app’s color theme.
+ */
+export class Button extends React.Component<ButtonProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
+
+export class IconButton extends React.Component<ButtonProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/components/card/index.d.ts b/components/card/index.d.ts
new file mode 100644
index 000000000..3296e4565
--- /dev/null
+++ b/components/card/index.d.ts
@@ -0,0 +1,160 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+/**
+ * Properties of components that can be clicked
+ */
+export interface Clickable {
+	/**
+	 *  Callback called when the button is clicked.
+	 */
+	onClick?: Function
+}
+export interface CardProps extends Props, Clickable {
+	/**
+	 * Child components, usually Card subcomponents.
+	 */
+	children?: any,
+	/**
+	 * Increases the shadow depth to appear elevated.
+	 */
+	raised?: boolean,
+	/**
+	 * Array of objects describing actions. These actions will be rendered as buttons and the object fields will be transferred to those.
+	 * @default []
+	 */
+	actions?: Array<ButtonProps>,
+	/**
+	 * Sets HEX or RGBA color to add a colored layer to the heading.
+	 */
+	color?: string,
+	/**
+	 * URL to set as a background image in the heading.
+	 */
+	image?: string,
+	
+	/**
+	 * Type of the component to display general modifications. It can be 'wide' for a larger card, 'image' if it's an image card or 'event' which shows just a title on top.
+	 */
+	type?: string,
+}
+/**
+ * A Card is a piece of paper with unique related data that serves as an entry point to more detailed information. 
+ * For example, a card could contain a photo, text, and a link about a single subject.
+ * Cards are composed of multiple subcomponents in React Toolbox. 
+ * You can combine each of the subcomponents to create all different Material Design Cards given in the spec.
+ */
+export class Card extends React.Component<CardProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
+export interface CardTitleProps extends Props {
+	avatar?: string | React.ReactElement<any> | React.ReactHTMLElement<any> | React.ClassicComponent<any, any>,
+	/**
+	 * Children to pass through the component.
+	 */
+	children?: any,
+	/**
+	 * Sets a complementary smaller text under the title.
+	 */
+	subtitle?: string,
+	/**
+	 * Sets the title of the card.
+	 */
+	title?: string | boolean,
+}
+/**
+ * A versatile title block that can be used in various places on the card, including the media area. 
+ * This component can also display an avatar next to the title content.
+ */
+export class CardTitle extends React.Component<CardTitleProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
+export interface CardMediaProps extends Props {
+	/**
+	 * Forces a ('wide' 16:9) or ('square' 1:1) aspect ratio respectively. 
+	 * Unset, the media area will have a flexible height.
+	 * @default ''
+	 */
+	aspectRatio?: string,
+	/**
+	 * Usually an image/video element or a <CardTitle> component.
+	 */
+	children?: any,
+	/**
+	 * Sets the background color
+	 */
+	color?: string,
+	/**
+	 * Creates a dark overlay underneath the child components.
+	 */
+	contentOverlay?: boolean,
+	/**
+	 * Can be used instead of children. Accepts an element or a URL string.
+	 */
+	image?: string | React.ReactElement<any> | React.ReactHTMLElement<any> | React.ClassicComponent<any, any>,
+}
+/**
+ * Used for displaying media such as images or videos on a card. 
+ * Can also be used with a solid background color instead of an image.
+ */
+export class CardMedia extends React.Component<CardMediaProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
+export interface CardTextProps extends Props {
+	/**
+	 * Children to pass through the component.
+	 */
+	children?: any,
+}
+/**
+ * Basic card content container. 
+ * Good for small descriptions or other supplementary text.
+ */
+export class CardText extends React.Component<CardTextProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
+export interface CardActionsProps extends Props {
+	/**
+	 * Children to pass through the component.
+	 */
+	children?: any,
+}
+/**
+ * This component is used as a container for supplemental card actions. 
+ * Supplemental actions within the card are explicitly called out using icons, text, and UI controls, typically placed at the bottom of the card.
+ */
+export class CardActions extends React.Component<CardActionsProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/components/checkbox/index.d.ts b/components/checkbox/index.d.ts
new file mode 100644
index 000000000..284267d25
--- /dev/null
+++ b/components/checkbox/index.d.ts
@@ -0,0 +1,80 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+export interface Conditional {
+	/**
+	 * If true, component will be disabled
+	 * @default false
+	 */
+	disabled?: boolean
+}
+
+/**
+ * Properties of components that have values that can be changed (T is the type of the value)
+ */
+export interface Changeable<T> {
+	/**
+	 * Callback called when the picker value is changed.
+	 * @param v Type of the value
+	 */
+	onChange?: (v: T) => void
+}
+
+export interface CheckboxProps extends Props, Changeable<boolean>, Conditional {
+	/**
+	 * Value for the checkbox, can be true or false.
+	 * @default false
+	 */
+	checked?: boolean,
+	/**
+	 * Text label to attach next to the checkbox element.
+	 */
+	label?: string,
+	/**
+	 * The name of the field to set in the input checkbox.
+	 */
+	name?: string,
+	/**
+	 * Callback called when the checkbox is blurred.
+	 */
+	onBlur?: Function,
+	/**
+	 * Callback called when the checkbox is focused
+	 */
+	onFocus?: Function,
+}
+export default class Checkbox extends React.Component<CheckboxProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/components/chip/index.d.ts b/components/chip/index.d.ts
new file mode 100644
index 000000000..3b9822189
--- /dev/null
+++ b/components/chip/index.d.ts
@@ -0,0 +1,66 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+export interface Conditional {
+	/**
+	 * If true, component will be disabled
+	 * @default false
+	 */
+	disabled?: boolean
+}
+
+export interface ChipProps extends Props {
+	/**
+	 * 	Child components, usually Avatar and inline elements
+	 */
+	children?: React.ReactNode;
+	/**
+	 * If true, the chip will be rendered with a delete icon.
+	 */
+	deletable?: boolean;
+	/**
+	 * Callback to be invoked when the delete icon is clicked.
+	 */
+	onDeleteClick?: React.MouseEventHandler
+}
+/**
+ * Avatars can be used to represent people. 
+ * For personal avatars, offer personalization options. 
+ * As users may choose not to personalize an avatar, provide delightful defaults. 
+ * When used with a specific logo, avatars can also be used to represent brand.
+ */
+export default class Chip extends React.Component<ChipProps, {}> {
+	render(): React.ReactElement<any>;
+}
\ No newline at end of file
diff --git a/components/date_picker/index.d.ts b/components/date_picker/index.d.ts
new file mode 100644
index 000000000..ac43c6d7f
--- /dev/null
+++ b/components/date_picker/index.d.ts
@@ -0,0 +1,67 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+/**
+ * Properties of components that have values that can be changed (T is the type of the value)
+ */
+export interface Changeable<T> {
+	/**
+	 * Callback called when the picker value is changed.
+	 * @param v Type of the value
+	 */
+	onChange?: (v: T) => void
+}
+
+export interface DatePickerProps extends Props, Changeable<Date> {
+	/**
+	 * Date object with the maximum selectable date.
+	 */
+	maxDate?: Date,
+	/**
+	 * Date object with the minimum selectable date.
+	 */
+	minDate?: Date,
+	/**
+	 * The text string to use like a input placeholder.
+	 */
+	placeholder?: string,
+	/**
+	 * Date object with the currently selected date.
+	 */
+	value?: Date,
+}
+export default class DatePicker extends React.Component<DatePickerProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/components/dialog/index.d.ts b/components/dialog/index.d.ts
new file mode 100644
index 000000000..8b547b683
--- /dev/null
+++ b/components/dialog/index.d.ts
@@ -0,0 +1,83 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+/**
+ * Properties of modal components (Drawer, Dialog)
+ */
+export interface Modal {
+	/**
+	 * If true, the dialog will be active.
+	 */
+	active: boolean,
+	/**
+	 * Callback called when the ESC key is pressed with the overlay active.
+	 */
+	onEscKeyDown?: Function,
+	/**
+	 * Callback to be invoked when the dialog overlay is clicked.
+	 */
+	onOverlayClick?: Function,
+	/**
+	 * Callback called when the mouse button is pressed on the overlay.
+	 */
+	onOverlayMouseDown?: Function,
+	/**
+	 * Callback called when the mouse is moving over the overlay.
+	 */
+	onOverlayMouseMove?: Function,
+	/**
+	 * Callback called when the mouse button is released over the overlay.
+	 */
+	onOverlayMouseUp?: Function,
+}
+export interface DialogProps extends Props, Modal {
+	/**
+	 * An array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons.
+	 * @default []
+	 */
+	actions?: Array<ButtonProps>,
+	/**
+	 * The text string to use as standar title of the dialog.
+	 */
+	title?: string | boolean,
+	/**
+	 * Used to determine the size of the dialog. It can be small, normal or large.
+	 * @default normal
+	 */
+	type?: string,
+}
+export default class Dialog extends React.Component<DialogProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/components/drawer/index.d.ts b/components/drawer/index.d.ts
new file mode 100644
index 000000000..3bcf15f2f
--- /dev/null
+++ b/components/drawer/index.d.ts
@@ -0,0 +1,74 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+/**
+ * Properties of modal components (Drawer, Dialog)
+ */
+export interface Modal {
+	/**
+	 * If true, the dialog will be active.
+	 */
+	active: boolean,
+	/**
+	 * Callback called when the ESC key is pressed with the overlay active.
+	 */
+	onEscKeyDown?: Function,
+	/**
+	 * Callback to be invoked when the dialog overlay is clicked.
+	 */
+	onOverlayClick?: Function,
+	/**
+	 * Callback called when the mouse button is pressed on the overlay.
+	 */
+	onOverlayMouseDown?: Function,
+	/**
+	 * Callback called when the mouse is moving over the overlay.
+	 */
+	onOverlayMouseMove?: Function,
+	/**
+	 * Callback called when the mouse button is released over the overlay.
+	 */
+	onOverlayMouseUp?: Function,
+}
+export interface DrawerProps extends Props, Modal {
+	/**
+	 * Type of drawer. It can be 'left' or 'right' to display the drawer on the left or right side of the screen.
+	 * @default left
+	 */
+	type?: string
+}
+export default class Drawer extends React.Component<DrawerProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/components/dropdown/index.d.ts b/components/dropdown/index.d.ts
new file mode 100644
index 000000000..46244038e
--- /dev/null
+++ b/components/dropdown/index.d.ts
@@ -0,0 +1,79 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+export interface Conditional {
+	/**
+	 * If true, component will be disabled
+	 * @default false
+	 */
+	disabled?: boolean
+}
+
+/**
+ * Properties of components that have values that can be changed (T is the type of the value)
+ */
+export interface Changeable<T> {
+	/**
+	 * Callback called when the picker value is changed.
+	 * @param v Type of the value
+	 */
+	onChange?: (v: T) => void
+}
+export interface DropdownProps extends Props, Changeable<any>, Conditional {
+	/**
+	 * If true, the dropdown will open up or down depending on the position in the screen.
+	 */
+	auto?: boolean,
+	/**
+	 * The text string to use for the floating label element.
+	 */
+	label?: string,
+	/**
+	 * Array of data objects with the data to represent in the dropdown.
+	 */
+	source: Array<Option<any>>,
+	/**
+	 * Callback function that returns a JSX template to represent the element.
+	 */
+	template?: Function,
+	/**
+	 * Default value using JSON data.
+	 */
+	value: string,
+}
+
+export default class Dropdown extends React.Component<DropdownProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/components/font_icon/index.d.ts b/components/font_icon/index.d.ts
new file mode 100644
index 000000000..152fd1309
--- /dev/null
+++ b/components/font_icon/index.d.ts
@@ -0,0 +1,42 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+
+export interface FontIconProps extends Props {
+	value: string
+}
+export default class FontIcon extends React.Component<FontIconProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/components/hoc/ActivableRenderer.d.ts b/components/hoc/ActivableRenderer.d.ts
new file mode 100644
index 000000000..ab73e065c
--- /dev/null
+++ b/components/hoc/ActivableRenderer.d.ts
@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface ActivableRendererOptions {
+	/**
+	 * @default 500
+	 */
+	delay?: number;
+}
+export interface ActivableRendererProps {
+	active: boolean;
+	children?: any;
+	delay?: number
+}
+export default function ActivableRendererFactory<P>(options?: ActivableRendererOptions): (componentClass: React.ComponentClass<P>) => React.ComponentClass<P & ActivableRendererProps>
\ No newline at end of file
diff --git a/components/input/index.d.ts b/components/input/index.d.ts
new file mode 100644
index 000000000..780ae6f5c
--- /dev/null
+++ b/components/input/index.d.ts
@@ -0,0 +1,122 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+export interface Conditional {
+	/**
+	 * If true, component will be disabled
+	 * @default false
+	 */
+	disabled?: boolean
+}
+
+/**
+ * Properties of components that have values that can be changed (T is the type of the value)
+ */
+export interface Changeable<T> {
+	/**
+	 * Callback called when the picker value is changed.
+	 * @param v Type of the value
+	 */
+	onChange?: (v: T) => void
+}
+
+export interface Iconic {
+	/**
+	 * Value of the icon (See icon component).
+	 */
+	icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
+}
+
+export interface InputProps extends Props, Conditional, Changeable<string>, Iconic {
+	/**
+	 * Give an error string to display under the field.
+	 */
+	error?: string,
+	/**
+	 * Indicates if the label is floating in the input field or not.
+	 * @default true
+	 */
+	floating?: boolean,
+	/**
+	 * The text string to use for the floating label element.
+	 */
+	label?: string,
+	/**
+	 * Specifies the maximum number of characters allowed in the component.
+	 */
+	maxLength?: number,
+	/**
+	 * If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.
+	 * @default false
+	 */
+	multiline?: boolean,
+	/**
+	 * Callback function that is fired when components is blurred.
+	 */
+	onBlur?: Function,
+	/**
+	 * Callback function that is fired when components is focused.
+	 */
+	onFocus?: Function,
+	/**
+	 * Callback function that is fired when a key is pressed down.
+	 */
+	onKeyDown?: Function,
+	/**
+	 * Callback function that is fired when a key is pressed.
+	 */
+	onKeyPress?: Function,
+	/**
+	 * Callback function that is fired when a key is released.
+	 */
+	onKeyUp?: Function,
+	/**
+	 * If true, the html input has a required value.
+	 * @default false
+	 */
+	required?: boolean,
+	/**
+	 * Type of the input element. It can be a valid HTML5 input type
+	 * @default text
+	 */
+	type?: string,
+	/**
+	 * Current value of the input element.
+	 */
+	value?: string,
+}
+export default class Input extends React.Component<InputProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/components/link/index.d.ts b/components/link/index.d.ts
new file mode 100644
index 000000000..8ee956424
--- /dev/null
+++ b/components/link/index.d.ts
@@ -0,0 +1,56 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+
+export interface Iconic {
+	/**
+	 * Value of the icon (See icon component).
+	 */
+	icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
+}
+export interface LinkProps extends Props, Iconic {
+	href: string,
+	/**
+	 * The text string used for the text content of the link.
+	 */
+	label: string,
+	/**
+	 * Sets a count number useful to display in the page how many times was visited for example.
+	 */
+	count?: number,
+}
+export default class Link extends React.Component<LinkProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/components/list/index.d.ts b/components/list/index.d.ts
new file mode 100644
index 000000000..01dfb0f31
--- /dev/null
+++ b/components/list/index.d.ts
@@ -0,0 +1,180 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+export interface Conditional {
+	/**
+	 * If true, component will be disabled
+	 * @default false
+	 */
+	disabled?: boolean
+}
+export interface Clickable {
+	/**
+	 *  Callback called when the button is clicked.
+	 */
+	onClick?: Function
+}
+/**
+ * Properties of components that have values that can be changed (T is the type of the value)
+ */
+export interface Changeable<T> {
+	/**
+	 * Callback called when the picker value is changed.
+	 * @param v Type of the value
+	 */
+	onChange?: (v: T) => void
+}
+
+export interface Iconic {
+	/**
+	 * Value of the icon (See icon component).
+	 */
+	icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
+}
+
+export interface ListProps extends Props {
+	/**
+	 * If true, each element in the list will have a ripple effect on click
+	 * @default false
+	 */
+	ripple?: boolean,
+	/**
+	 * If true, the elements in the list will display a hover effect and a pointer cursor.
+	 * @default false
+	 */
+	selectable?: boolean,
+}
+export class List extends React.Component<ListProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
+export interface ListItemProps extends Props, Conditional, Clickable {
+	/**
+	 * A string URL to specify an avatar in the left side of the item.
+	 */
+	avatar?: string,
+	/**
+	 * Main text of the item. Required.
+	 */
+	caption?: string,
+	/**
+	 * An element that will be displayed as the item. If set, this will override `caption` and `legend`.
+	 */
+	itemContent?: React.ReactElement<any>,
+	/**
+	 * 	A list of elements that are placed on the left side of the item and after the avatar attribute.
+	 */
+	leftActions?: React.ReactElement<any>[],
+	/**
+	 * A string key of a font icon to display an icon in the left side of the item.
+	 */
+	leftIcon?: string,
+	/**
+	 * Secondary text to display under the caption.
+	 */
+	legend?: string,
+	/**
+	 * 	A list of elements that are placed on the right side of the item and after the rightIcon attribute.
+	 */
+	rightActions?: React.ReactElement<any>[],
+	/**
+	 * The same as the leftIcon but in this case the icon is displayed in the right side.
+	 */
+	rightIcon?: string,
+	/**
+	 * If true, the item displays a ripple effect on click. By default it's inherited from the parent element.
+	 * @default false
+	 */
+	ripple?: boolean,
+	/**
+	 * If true, the elements in the list will display a hover effect and a pointer cursor. Inherited from the parent
+	 * @default false
+	 */
+	selectable?: boolean,
+	/**
+	 * In case you want to provide the item as a link, you can pass this property to specify the href.
+	 */
+	to?: string;
+}
+export class ListItem extends React.Component<ListItemProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
+export interface ListCheckboxProps extends Props, Conditional, Changeable<boolean> {
+	/**
+	 * Main text of the item. Required.
+	 */
+	caption?: string,
+	/**
+	 * If true the checkbox appears checked by default.
+	 * @default false
+	 */
+	checked: boolean,
+	/**
+	 * Secondary text to display under the caption.
+	 */
+	legend?: string,
+	/**
+	 * Name for the checkbox input item.
+	 */
+	name?: string,
+	/**
+	 * Callback called when the input element is blurred.
+	 */
+	onBlur?: Function,
+	/**
+	 * Callback called when the input element is focused.
+	 */
+	onFocus?: Function,
+}
+export class ListCheckbox extends React.Component<ListCheckboxProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
+export export interface ListSubHeaderProps extends Props {
+	/**
+	 * List header caption.
+	 */
+	caption: string;
+}
+export class ListSubHeader extends React.Component<ListSubHeaderProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
+export interface ListDividerProps extends Props {
+	/**
+	 * Indicates if the divider should be full width or should leave a space on the left side.
+	 */
+	inset: boolean;
+}
+export class ListDivider extends React.Component<ListDividerProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/components/menu/index.d.ts b/components/menu/index.d.ts
new file mode 100644
index 000000000..542895486
--- /dev/null
+++ b/components/menu/index.d.ts
@@ -0,0 +1,150 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+export interface Conditional {
+	/**
+	 * If true, component will be disabled
+	 * @default false
+	 */
+	disabled?: boolean
+}
+
+export interface Iconic {
+	/**
+	 * Value of the icon (See icon component).
+	 */
+	icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
+}
+export interface MenuProps extends Props {
+	/**
+	 * If true, the menu will be displayed as opened by default.
+	 * @default false
+	 */
+	active?: boolean,
+	/**
+	 * Callback that will be called when the menu is being hidden.
+	 */
+	onHide?: Function,
+	/**
+	 * Callback that will be called when the menu is being shown.
+	 */
+	onShow?: Function,
+	/**
+	 * If true the menu wrapper will show an outline with a soft shadow.
+	 * @default true
+	 */
+	outline?: boolean,
+	/**
+	 * Determine the position of the menu. 
+	 * With static value the menu will be always shown, auto means that the it will decide the opening direction based on the current position. 
+	 * To force a position use top-left, top-right, bottom-left, bottom-right.
+	 * @default static
+	 */
+	position?: string,
+	/**
+	 * If true, the menu items will show a ripple effect on click.
+	 */
+	ripple?: boolean,
+	/**
+	 * If true, the menu will keep a value to highlight the active child item.
+	 */
+	selectable?: boolean,
+	/**
+	 *  Used for selectable menus and indicates the initial value so the child item with this value can be highlighted.
+	 */
+	value?: boolean,
+}
+export class Menu extends React.Component<MenuProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
+export interface IconMenuProps extends Props, Iconic {
+	/**
+	 * If true, the icon will show a ripple when is clicked.
+	 */
+	iconRipple?: boolean,
+	/**
+	 * Transferred to the Menu component.
+	 * @default true
+	 */
+	menuRipple?: boolean,
+	/**
+	 * Callback that will be called when the icon is clicked.
+	 */
+	onClick?: Function,
+	/**
+	 * Callback that will be called when the menu is being hidden.
+	 */
+	onHide?: Function, 
+	/**
+	 * Callback that will be called when the menu is being shown.
+	 */
+	onShow?: Function,
+	/**
+	 * Callback that will be called when a menu item is selected.
+	 */
+	onSelect?: Function,
+	/**
+	 * Determine the position of the menu. This property is transferred to the inner Menu component.
+	 * @default auto
+	 */
+	position?: string,
+	/**
+	 * If true, the menu will keep a value to highlight the active child item. Transferred to the Menu
+	 */
+	selectable?: boolean,
+}
+export class IconMenu extends React.Component<IconMenuProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
+export interface MenuItemProps extends Props, Conditional, Iconic {
+	/**
+	 * The text to include in the menu item.
+	 */
+	caption?: string,
+	/**
+	 * If true, the item will show a ripple effect when it's clicked. Inherited from the parent.
+	 */
+	ripple?: boolean,
+	/**
+	 * Transferred from the Menu component for selectable menus. Indicates if it's the current active option.
+	 */
+	selected?: boolean,
+}
+export class MenuItem extends React.Component<MenuItemProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
+export class MenuDivider extends React.Component<any, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/components/navigation/index.d.ts b/components/navigation/index.d.ts
new file mode 100644
index 000000000..a1a3081b2
--- /dev/null
+++ b/components/navigation/index.d.ts
@@ -0,0 +1,53 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+
+export interface NavigationProps extends Props {
+	/**
+	 * Array of objects that represent buttons so the keys will be transferred as properties to those.
+	 */
+	actions?: Array<ButtonProps>,
+	/**
+	 * Array of objects similar to actions but that will be rendered as <Link/> component definition.
+	 */
+	routes?: Array<LinkProps>,
+	/**
+	 * Type of the navigation, it can be 'vertical' or 'horizontal'.
+	 */
+	type?: string,
+}
+export default class Navigation extends React.Component<NavigationProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/components/overlay/index.d.ts b/components/overlay/index.d.ts
new file mode 100644
index 000000000..3da680439
--- /dev/null
+++ b/components/overlay/index.d.ts
@@ -0,0 +1,49 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+export interface OverlayProps extends Props {
+	active?: boolean;
+	children?: any;
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string;
+	invisible?: boolean;
+	onClick?: Function;
+	onEscKeyDown?: Function
+}
+export default class Overlay extends React.Component<OverlayProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/components/progress_bar/index.d.ts b/components/progress_bar/index.d.ts
new file mode 100644
index 000000000..fb1494ef8
--- /dev/null
+++ b/components/progress_bar/index.d.ts
@@ -0,0 +1,69 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+export interface ProgressBarProps extends Props {
+	/**
+	 * Value of a secondary progress bar useful for buffering.
+	 */
+	buffer?: number,
+	/**
+	 * Maximum value permitted.
+	 */
+	max?: number, // 
+	/**
+	 * minimum value permitted.
+	 */
+	min?: number, // 
+	/**
+	 * Mode of the progress bar, it can be determinate or indeterminate.
+	 */
+	mode?: string, // 
+	/**
+	 * If true, the circular progress bar will be changing its color.
+	 */
+	multicolor?: boolean, // 
+	/**
+	 * Type of the progress bar, it can be circular or linear.
+	 * @default linear
+	 */
+	type?: string,
+	/**
+	 * Value of the current progress.
+	 */
+	value?: number,
+}
+export default class ProgressBar extends React.Component<ProgressBarProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/components/radio/index.d.ts b/components/radio/index.d.ts
new file mode 100644
index 000000000..9a05cfac5
--- /dev/null
+++ b/components/radio/index.d.ts
@@ -0,0 +1,95 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+export interface Conditional {
+	/**
+	 * If true, component will be disabled
+	 * @default false
+	 */
+	disabled?: boolean
+}
+/**
+ * Properties of components that have values that can be changed (T is the type of the value)
+ */
+export interface Changeable<T> {
+	/**
+	 * Callback called when the picker value is changed.
+	 * @param v Type of the value
+	 */
+	onChange?: (v: T) => void
+}
+
+export interface RadioGroupProps extends Props, Conditional, Changeable<any> {
+	/**
+	 * Name for the input element group.
+	 */
+	name?: string,
+	/**
+	 * Default value selected in the radio group.
+	 */
+	value?: any,
+}
+export class RadioGroup extends React.Component<RadioGroupProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
+export interface RadioButtonProps extends Props, Conditional {
+	/**
+	 * If true, the input element will be selected by default. Transferred from the parent.
+	 */
+	checked: boolean,
+	/**
+	 * Name for the input element.
+	 */
+	name?: string,
+	/**
+	 * Callback function that will be invoked when the input is blurred.
+	 */
+	onBlur?: Function,
+	/**
+	 * Callback function that will be invoked when the value changes.
+	 */
+	onChange?: Function,
+	/**
+	 * Callback function that will be invoked when the input is focused.
+	 */
+	onFocus?: Function,
+	/**
+	 * Value for the radio button.
+	 */
+	value: any,
+}
+export class RadioButton extends React.Component<RadioButtonProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/components/slider/index.d.ts b/components/slider/index.d.ts
new file mode 100644
index 000000000..6e910ba67
--- /dev/null
+++ b/components/slider/index.d.ts
@@ -0,0 +1,72 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+export interface SliderProps extends Props {
+	/**
+	 * If true, an input is shown and the user can set the slider from keyboard value.
+	 */
+	editable?: boolean,
+	/**
+	 * Maximum value permitted.
+	 */
+	max?: number,
+	/**
+	 * Minimum value permitted.
+	 */
+	min?: number,
+	/**
+	 * Callback function that will be invoked when the slider value changes.
+	 */
+	onChange?: Function,
+	/**
+	 * If true, a pin with numeric value label is shown when the slider thumb is pressed. Use for settings for which users need to know the exact value of the setting.
+	 */
+	pinned?: boolean,
+	/**
+	 * If true, the slider thumb snaps to tick marks evenly spaced based on the step property value.
+	 */
+	snaps?: boolean,
+	/**
+	 * Amount to vary the value when the knob is moved or increase/decrease is called.
+	 */
+	step?: number,
+	/**
+	 * Current value of the slider.
+	 */
+	value: number,
+}
+export default class Slider extends React.Component<SliderProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/components/snackbar/index.d.ts b/components/snackbar/index.d.ts
new file mode 100644
index 000000000..7006c231c
--- /dev/null
+++ b/components/snackbar/index.d.ts
@@ -0,0 +1,97 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+export interface Iconic {
+	/**
+	 * Value of the icon (See icon component).
+	 */
+	icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
+}
+export interface Modal {
+	/**
+	 * If true, the dialog will be active.
+	 */
+	active: boolean,
+	/**
+	 * Callback called when the ESC key is pressed with the overlay active.
+	 */
+	onEscKeyDown?: Function,
+	/**
+	 * Callback to be invoked when the dialog overlay is clicked.
+	 */
+	onOverlayClick?: Function,
+	/**
+	 * Callback called when the mouse button is pressed on the overlay.
+	 */
+	onOverlayMouseDown?: Function,
+	/**
+	 * Callback called when the mouse is moving over the overlay.
+	 */
+	onOverlayMouseMove?: Function,
+	/**
+	 * Callback called when the mouse button is released over the overlay.
+	 */
+	onOverlayMouseUp?: Function,
+}
+
+export interface SnackbarProps extends Props, Modal, Iconic {
+	/**
+	 * For the action component inside the Snackbar.
+	 */
+	action?: string,
+	/**
+	 * Text to display in the content.
+	 */
+	label?: string,
+	/**
+	 * Callback function that will be called when the button action is clicked.
+	 */
+	onClick?: Function,
+	/**
+	 * Callback function when finish the set timeout.
+	 */
+	onTimeout?: Function, 
+	/**
+	 * amount of time after the Snackbar will be automatically hidden.
+	 */
+	timeout?: number,
+	/**
+	 * Indicates the action type. Can be 'accept', 'warning' or 'cancel'
+	 */
+	type?: string,
+}
+export class Snackbar extends React.Component<SnackbarProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/components/switch/index.d.ts b/components/switch/index.d.ts
new file mode 100644
index 000000000..a072f82cf
--- /dev/null
+++ b/components/switch/index.d.ts
@@ -0,0 +1,75 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+export interface Conditional {
+	/**
+	 * If true, component will be disabled
+	 * @default false
+	 */
+	disabled?: boolean
+}
+export interface SwitchProps extends Props, Conditional {
+	/**
+	 * If true, the switch will be enabled.
+	 */
+	checked: boolean,
+	/**
+	 * If true, component will be disabled.
+	 */
+	disabled?: boolean,
+	/**
+	 * The text string to use for the floating label element.
+	 */
+	label?: string,
+	/**
+	 * The text string used as name of the input.
+	 */
+	name?: string,
+	/**
+	 * Callback function that is fired when when the switch is blurred.
+	 */
+	onBlur?: Function,
+	/**
+	 * Callback function that is fired when the components's value changes.
+	 */
+	onChange?: Function,
+	/**
+	 * Callback function fire when the switch is focused.
+	 */
+	onFocus?: Function,
+}
+export default class Switch extends React.Component<SwitchProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/components/table/index.d.ts b/components/table/index.d.ts
new file mode 100644
index 000000000..e2dc73ff9
--- /dev/null
+++ b/components/table/index.d.ts
@@ -0,0 +1,64 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+export interface TableProps extends Props {
+	/**
+	 * If true, component will show a heading using model field names.
+	 */
+	heading?: boolean,
+	/**
+	 * Object describing the data model that represents each object in the source.
+	 */
+	model?: { [key: string]: string },
+	/**
+	 * Callback function that is fired when an item in a row changes. If set, rows are editable.
+	 */
+	onChange?: Function,
+	/**
+	 * Callback function invoked when the row selection changes.
+	 */
+	onSelect?: Function,
+	/**
+	 * Array of indexes of the items in the source that should appear as selected.
+	 */
+	selected?: Array<number>,
+	/**
+	 * Array of objects representing each item to show.
+	 */
+	source?: Array<{ [key: string]: any }>,
+}
+export default class Table extends React.Component<TableProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/components/tabs/index.d.ts b/components/tabs/index.d.ts
new file mode 100644
index 000000000..39234948f
--- /dev/null
+++ b/components/tabs/index.d.ts
@@ -0,0 +1,84 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+export interface Conditional {
+	/**
+	 * If true, component will be disabled
+	 * @default false
+	 */
+	disabled?: boolean
+}
+/**
+ * Properties of components that have values that can be changed (T is the type of the value)
+ */
+export interface Changeable<T> {
+	/**
+	 * Callback called when the picker value is changed.
+	 * @param v Type of the value
+	 */
+	onChange?: (v: T) => void
+}
+export interface TabsProps extends Props, Changeable<number> {
+	/**
+	 * Current
+	 */
+	index: number,
+}
+export class Tabs extends React.Component<TabsProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
+export interface TabProps extends Props, Conditional {
+	/**
+	 * If true, the current component is visible.
+	 * @default false
+	 */
+	active?: boolean,
+	/**
+	 * If true, the current component is not visible.
+	 * @default false
+	 */
+	hidden?: boolean,
+	/**
+	 * Label text for navigation header
+	 */
+	label?: string,
+	/**
+	 * Callback function that is fired when the tab is activated.
+	 */
+	onActive?: Function,
+}
+export class Tab extends React.Component<TabProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/components/time_picker/index.d.ts b/components/time_picker/index.d.ts
new file mode 100644
index 000000000..ee141895a
--- /dev/null
+++ b/components/time_picker/index.d.ts
@@ -0,0 +1,59 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+/**
+ * Properties of components that have values that can be changed (T is the type of the value)
+ */
+export interface Changeable<T> {
+	/**
+	 * Callback called when the picker value is changed.
+	 * @param v Type of the value
+	 */
+	onChange?: (v: T) => void
+}
+export interface TimePickerProps extends Props, Changeable<Date> {
+	/**
+	 * Format to display the clock. It can be 24hr or ampm.
+	 * @default 24hr
+	 */
+	format?: string,
+	/**
+	 * Datetime object with currrently selected time
+	 */
+	value?: Date,
+}
+export default class TimePicker extends React.Component<TimePickerProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/components/tooltip/index.d.ts b/components/tooltip/index.d.ts
new file mode 100644
index 000000000..867412c2d
--- /dev/null
+++ b/components/tooltip/index.d.ts
@@ -0,0 +1,10 @@
+import * as React from 'react';
+export class TooltipComponent<P, S> extends React.Component<P, S> {
+	getDecoratedComponentInstance(): React.Component<P, S>;
+}
+
+export interface TooltipComponentClass<P> extends React.ComponentClass<P> {
+	new (props?: P, context?: any): TooltipComponent<P, any>;
+}
+
+export default function Tooltip<P>(componentClass: React.ComponentClass<P>): TooltipComponentClass<P>;
\ No newline at end of file
diff --git a/react-toolbox.d.ts b/index.d.ts
similarity index 100%
rename from react-toolbox.d.ts
rename to index.d.ts
diff --git a/package.json b/package.json
index b3e06eb9d..40301621c 100644
--- a/package.json
+++ b/package.json
@@ -95,7 +95,7 @@
   },
   "scripts": {
     "babel": "babel ./components --out-dir ./lib",
-    "build": "cross-env NODE_ENV=production npm run babel && npm run sass",
+    "build": "cross-env NODE_ENV=production npm run babel && npm run sass && npm run tsd",
     "clean": "rimraf ./lib",
     "lint": "npm run lint:js && npm run lint:scss",
     "lint:js": "eslint ./ --ext .js",
@@ -104,7 +104,8 @@
     "prebuild": "npm run clean",
     "prepublish": "npm run build",
     "release": "bumped release",
-    "sass": "cpx './components/**/*.scss' ./lib",
+    "sass": "cpx ./components/**/*.scss ./lib",
+    "tsd": "cpx ./components/**/*.d.ts ./lib",
     "start": "cross-env NODE_ENV=development UV_THREADPOOL_SIZE=100 node ./server",
     "test": "cross-env NODE_ENV=test karma start",
     "test:watch": "cross-env NODE_ENV=test karma start --no-single-run"
@@ -116,6 +117,5 @@
     "react": "^0.14 || ^15.0.1",
     "react-addons-css-transition-group": "^0.14.0 || ^15.0.1",
     "react-dom": "^0.14.0 || ^15.0.1"
-  },
-  "typings": "./react-toolbox.d.ts"
+  }
 }

From 235d914de3bcc05964e8ff5e1590e96efb2170d9 Mon Sep 17 00:00:00 2001
From: Robert Parker <robert@flavorus.com>
Date: Tue, 7 Jun 2016 15:01:58 -0700
Subject: [PATCH 0623/1024] Replace react-toolbox.d.ts with index.d.ts

---
 index.d.ts | 1366 +++-------------------------------------------------
 1 file changed, 55 insertions(+), 1311 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 28996d9a4..1bdb96180 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -2,6 +2,7 @@
 // Project: http://react-toolbox.com/
 // Definitions by: @xogeny (Michael M. Tiller), @hsrobflavorus (Robert Parker)
 /*  CHANGES
+	* 06/05/2016: Refactor into external module declarations (no more 'declare module ...')
     * 04/27/2016: Updates for 0.16.2, added <Chip>, <Overlay>, and ActivableRendererFactory definitions, misc. tweaks and fixes.
     * 02/03/2016:
         * Fixed for TypeScript 1.8.0 stricter var declaration requirements (move `declare var ...` inside each individual module).
@@ -23,1315 +24,58 @@
     * Ripple HOC
 */
 
-declare namespace __RT {
-    import React = __React;
-
-    // Properties that all components have
-    export interface Props {
-        /**
-         * Sets a CSS class on the component.
-         */
-        className?: string,
-        id?: string;
-        /**
-         * A key used to uniquely identify the element within an Array
-         */
-        key?: string,
-        /**
-         * Inline style
-         */
-        style?: any,
-        /**
-         * Tooltip text
-         * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-         * @see http://react-toolbox.com/#/components/tooltip
-         */
-        tooltip?: string,
-        /**
-         * Amount of time in miliseconds spent before the tooltip is visible.
-         * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-         * @see http://react-toolbox.com/#/components/tooltip
-         */
-        tooltipDelay?: number,
-        /**
-         * If true, the Tooltip hides after a click in the host component.
-         * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-         * @default true
-         * @see http://react-toolbox.com/#/components/tooltip
-         */
-        tooltipHideOnClick?: boolean,
-    }
-
-    /**
-     * Properties of modal components (Drawer, Dialog)
-     */
-    export interface Modal {
-        /**
-         * If true, the dialog will be active.
-         */
-        active: boolean,
-        /**
-         * Callback called when the ESC key is pressed with the overlay active.
-         */
-        onEscKeyDown?: Function,
-        /**
-         * Callback to be invoked when the dialog overlay is clicked.
-         */
-        onOverlayClick?: Function,
-        /**
-         * Callback called when the mouse button is pressed on the overlay.
-         */
-        onOverlayMouseDown?: Function,
-        /**
-         * Callback called when the mouse is moving over the overlay.
-         */
-        onOverlayMouseMove?: Function,
-        /**
-         * Callback called when the mouse button is released over the overlay.
-         */
-        onOverlayMouseUp?: Function,
-    }
-
-    // Interface for components with icons
-    export interface Iconic {
-        /**
-         * Value of the icon (See icon component).
-         */
-        icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
-    }
-
-    export interface Conditional {
-        /**
-         * If true, component will be disabled
-         * @default false
-         */
-        disabled?: boolean
-    }
-
-    /**
-     * Properties of components that have values that can be changed (T is the type of the value)
-     */
-    export interface Changeable<T> {
-        /**
-         * Callback called when the picker value is changed.
-         * @param v Type of the value
-         */
-        onChange?: (v: T) => void
-    }
-
-    /**
-     * Properties of components that can be clicked
-     */
-    export interface Clickable {
-        /**
-         *  Callback called when the button is clicked.
-         */
-        onClick?: Function
-    }
-
-    export interface Option<T> {
-        label: string,
-        value: T,
-    }
-
-    ////////////////////////////////
-    /// Component definitions
-    ////////////////////////////////
-    export interface AppBarProps extends Props {
-        /**
-         * If true, the AppBar shows a shadow.
-         * @default false
-         */
-        flat?: boolean,
-        /**
-         * Determine if the bar should have position fixed (true) or relative (false)
-         * @default false
-         */
-        fixed?: boolean,
-    }
-    /**
-     * The app bar is a special kind of toolbar that’s used for branding, navigation, search, and actions. 
-     * Usually it contains controls on the right and left side and a title with the current section or app name. 
-     * You should give the content with children elements.
-     */
-    class AppBar extends React.Component<AppBarProps, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-    export interface AvatarProps extends Props, Iconic {
-        children?: any,
-        image?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any> | __React.ClassicComponent<any, any>,
-        title?: string | boolean,
-    }
-    /**
-     * Avatars can be used to represent people. 
-     * For personal avatars, offer personalization options. 
-     * As users may choose not to personalize an avatar, provide delightful defaults. 
-     * When used with a specific logo, avatars can also be used to represent brand.
-     */
-    class Avatar extends React.Component<AvatarProps, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-    interface AutocompleteProps extends Props, Conditional, Changeable<string | Array<any>> {
-        /**
-         * Sets the error string for the internal input element.
-         */
-        error?: string,
-        /**
-         * The text string to use for the floating label element.
-         */
-        label?: string,
-        /**
-         * If true, component can hold multiple values.
-         * @default true
-         */
-        multiple?: boolean,
-        /**
-         * 	Object of key/values or array representing all items suggested.
-         */
-        source: Object | Array<any>,
-        /**
-         * If true, the list of suggestions will not be filtered when a value is selected, until the query is modified.
-         * @default false
-         */
-        showSuggestionsWhenValueIsSet?: boolean,
-        /**
-         * Type of the input element. It can be a valid HTML5 input type
-         * @default text
-         */
-        type?: string,
-        /**
-         * 	Value or array of values currently selected component.Current value of the input element.
-         */
-        value?: string | Array<any>,
-    }
-    /**
-     * An input field with a set of predeterminated labeled values. When it's focused it shows a list of hints that are filtered by label as the user types. 
-     * They can be simple or multiple depending on the amount of values that can be selected. 
-     * The opening direction is determined at opening time depending on the current position.
-     */
-    class Autocomplete extends React.Component<AutocompleteProps, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-    interface ButtonProps extends Props, Clickable, Conditional, Iconic {
-        /**
-         * Indicates if the button should have accent color.
-         * @default false
-         */
-        accent?: boolean,
-        /**
-         * If true, the button will have a flat look.
-         * @default false
-         */
-        flat?: boolean,
-        /**
-         * If true, the button will have a floating look.
-         * @default false
-         */
-        floating?: boolean,
-        /**
-         * If specified, the button will be rendered as an <a>
-         */
-        href?: string,
-        /**
-         * The text string to use for the name of the button.
-         */
-        label?: string,
-        /**
-         * If true, component will be disabled and show a loading animation.
-         * @default false
-         */
-        loading?: boolean,
-        /**
-         * To be used with floating button. If true the button will be smaller. 
-         * @default false
-         */
-        mini?: boolean,
-        /**
-         * Indicates if the button should have primary color.
-         * @default false
-         */
-        primary?: boolean,
-        /**
-         * If true, the button will have a raised look.
-         * @default false
-         */
-        raised?: boolean,
-        /**
-         * If true, component will have a ripple effect on click.
-         * @default true
-         */
-        ripple?: boolean,
-    }
-    /**
-     * A button clearly communicates what action will occur when the user touches it. 
-     * It consists of text, an image, or both, designed in accordance with your app’s color theme.
-     */
-    class Button extends React.Component<ButtonProps, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-    class IconButton extends React.Component<ButtonProps, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-    interface CardProps extends Props, Clickable {
-        /**
-         * Child components, usually Card subcomponents.
-         */
-        children?: any,
-        /**
-         * Increases the shadow depth to appear elevated.
-         */
-        raised?: boolean,
-        /**
-         * Array of objects describing actions. These actions will be rendered as buttons and the object fields will be transferred to those.
-         * @default []
-         */
-        actions?: Array<ButtonProps>,
-        /**
-         * Sets HEX or RGBA color to add a colored layer to the heading.
-         */
-        color?: string,
-        /**
-         * URL to set as a background image in the heading.
-         */
-        image?: string,
-        
-        /**
-         * Type of the component to display general modifications. It can be 'wide' for a larger card, 'image' if it's an image card or 'event' which shows just a title on top.
-         */
-        type?: string,
-    }
-    /**
-     * A Card is a piece of paper with unique related data that serves as an entry point to more detailed information. 
-     * For example, a card could contain a photo, text, and a link about a single subject.
-     * Cards are composed of multiple subcomponents in React Toolbox. 
-     * You can combine each of the subcomponents to create all different Material Design Cards given in the spec.
-     */
-    export class Card extends React.Component<CardProps, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-    export interface CardTitleProps extends Props {
-        avatar?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any> | __React.ClassicComponent<any, any>,
-        /**
-         * Children to pass through the component.
-         */
-        children?: any,
-        /**
-         * Sets a complementary smaller text under the title.
-         */
-        subtitle?: string,
-        /**
-         * Sets the title of the card.
-         */
-        title?: string | boolean,
-    }
-    /**
-     * A versatile title block that can be used in various places on the card, including the media area. 
-     * This component can also display an avatar next to the title content.
-     */
-    export class CardTitle extends React.Component<CardTitleProps, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-    export interface CardMediaProps extends Props {
-        /**
-         * Forces a ('wide' 16:9) or ('square' 1:1) aspect ratio respectively. 
-         * Unset, the media area will have a flexible height.
-         * @default ''
-         */
-        aspectRatio?: string,
-        /**
-         * Usually an image/video element or a <CardTitle> component.
-         */
-        children?: any,
-        /**
-         * Sets the background color
-         */
-        color?: string,
-        /**
-         * Creates a dark overlay underneath the child components.
-         */
-        contentOverlay?: boolean,
-        /**
-         * Can be used instead of children. Accepts an element or a URL string.
-         */
-        image?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any> | __React.ClassicComponent<any, any>,
-    }
-    /**
-     * Used for displaying media such as images or videos on a card. 
-     * Can also be used with a solid background color instead of an image.
-     */
-    export class CardMedia extends React.Component<CardMediaProps, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-    export interface CardTextProps extends Props {
-        /**
-         * Children to pass through the component.
-         */
-        children?: any,
-    }
-    /**
-     * Basic card content container. 
-     * Good for small descriptions or other supplementary text.
-     */
-    export class CardText extends React.Component<CardTextProps, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-    export interface CardActionsProps extends Props {
-        /**
-         * Children to pass through the component.
-         */
-        children?: any,
-    }
-    /**
-     * This component is used as a container for supplemental card actions. 
-     * Supplemental actions within the card are explicitly called out using icons, text, and UI controls, typically placed at the bottom of the card.
-     */
-    export class CardActions extends React.Component<CardActionsProps, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-    export interface CheckboxProps extends Props, Changeable<boolean>, Conditional {
-        /**
-         * Value for the checkbox, can be true or false.
-         * @default false
-         */
-        checked?: boolean,
-        /**
-         * Text label to attach next to the checkbox element.
-         */
-        label?: string,
-        /**
-         * The name of the field to set in the input checkbox.
-         */
-        name?: string,
-        /**
-         * Callback called when the checkbox is blurred.
-         */
-        onBlur?: Function,
-        /**
-         * Callback called when the checkbox is focused
-         */
-        onFocus?: Function,
-    }
-    export class Checkbox extends React.Component<CheckboxProps, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-
-    export interface ChipProps extends Props {
-        /**
-         * 	Child components, usually Avatar and inline elements
-         */
-        children?: React.ReactNode;
-        /**
-         * If true, the chip will be rendered with a delete icon.
-         */
-        deletable?: boolean;
-        /**
-         * Callback to be invoked when the delete icon is clicked.
-         */
-        onDeleteClick?: React.MouseEventHandler
-    }
-    /**
-     * Avatars can be used to represent people. 
-     * For personal avatars, offer personalization options. 
-     * As users may choose not to personalize an avatar, provide delightful defaults. 
-     * When used with a specific logo, avatars can also be used to represent brand.
-     */
-    class Chip extends React.Component<ChipProps, {}> {
-        render(): React.ReactElement<any>;
-    }
-    export interface DatePickerProps extends Props, Changeable<Date> {
-        /**
-         * Date object with the maximum selectable date.
-         */
-        maxDate?: Date,
-        /**
-         * Date object with the minimum selectable date.
-         */
-        minDate?: Date,
-        /**
-         * The text string to use like a input placeholder.
-         */
-        placeholder?: string,
-        /**
-         * Date object with the currently selected date.
-         */
-        value?: Date,
-    }
-    export class DatePicker extends React.Component<DatePickerProps, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-    export interface DialogProps extends Props, Modal {
-        /**
-         * An array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons.
-         * @default []
-         */
-        actions?: Array<ButtonProps>,
-        /**
-         * The text string to use as standar title of the dialog.
-         */
-        title?: string | boolean,
-        /**
-         * Used to determine the size of the dialog. It can be small, normal or large.
-         * @default normal
-         */
-        type?: string,
-    }
-    export class Dialog extends React.Component<DialogProps, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-    export interface DrawerProps extends Props, Modal {
-        /**
-         * Type of drawer. It can be 'left' or 'right' to display the drawer on the left or right side of the screen.
-         * @default left
-         */
-        type?: string
-    }
-    export class Drawer extends React.Component<DrawerProps, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-
-    export interface DropdownProps extends Props, Changeable<any>, Conditional {
-        /**
-         * If true, the dropdown will open up or down depending on the position in the screen.
-         */
-        auto?: boolean,
-        /**
-         * The text string to use for the floating label element.
-         */
-        label?: string,
-        /**
-         * Array of data objects with the data to represent in the dropdown.
-         */
-        source: Array<Option<any>>,
-        /**
-         * Callback function that returns a JSX template to represent the element.
-         */
-        template?: Function,
-        /**
-         * Default value using JSON data.
-         */
-        value: string,
-    }
-    class Dropdown extends React.Component<DropdownProps, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-
-    interface FontIconProps extends Props {
-        value: string
-    }
-    class FontIcon extends React.Component<FontIconProps, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-
-    interface InputProps extends Props, Conditional, Changeable<string>, Iconic {
-        /**
-         * Give an error string to display under the field.
-         */
-        error?: string,
-        /**
-         * Indicates if the label is floating in the input field or not.
-         * @default true
-         */
-        floating?: boolean,
-        /**
-         * The text string to use for the floating label element.
-         */
-        label?: string,
-        /**
-         * Specifies the maximum number of characters allowed in the component.
-         */
-        maxLength?: number,
-        /**
-         * If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.
-         * @default false
-         */
-        multiline?: boolean,
-        /**
-         * Callback function that is fired when components is blurred.
-         */
-        onBlur?: Function,
-        /**
-         * Callback function that is fired when components is focused.
-         */
-        onFocus?: Function,
-        /**
-         * Callback function that is fired when a key is pressed down.
-         */
-        onKeyDown?: Function,
-        /**
-         * Callback function that is fired when a key is pressed.
-         */
-        onKeyPress?: Function,
-        /**
-         * Callback function that is fired when a key is released.
-         */
-        onKeyUp?: Function,
-        /**
-         * If true, the html input has a required value.
-         * @default false
-         */
-        required?: boolean,
-        /**
-         * Type of the input element. It can be a valid HTML5 input type
-         * @default text
-         */
-        type?: string,
-        /**
-         * Current value of the input element.
-         */
-        value?: string,
-    }
-    class Input extends React.Component<InputProps, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-
-    interface LinkProps extends React.Props<Link>, Iconic {
-        href: string,
-        /**
-         * The text string used for the text content of the link.
-         */
-        label: string,
-        /**
-         * Sets a count number useful to display in the page how many times was visited for example.
-         */
-        count?: number,
-    }
-    class Link extends React.Component<LinkProps, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-
-    interface ListProps extends Props {
-        /**
-         * If true, each element in the list will have a ripple effect on click
-         * @default false
-         */
-        ripple?: boolean,
-        /**
-         * If true, the elements in the list will display a hover effect and a pointer cursor.
-         * @default false
-         */
-        selectable?: boolean,
-    }
-    class List extends React.Component<ListProps, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-    interface ListItemProps extends Props, Conditional, Clickable {
-        /**
-         * A string URL to specify an avatar in the left side of the item.
-         */
-        avatar?: string,
-        /**
-         * Main text of the item. Required.
-         */
-        caption?: string,
-        /**
-         * An element that will be displayed as the item. If set, this will override `caption` and `legend`.
-         */
-        itemContent?: React.ReactElement<any>,
-        /**
-         * 	A list of elements that are placed on the left side of the item and after the avatar attribute.
-         */
-        leftActions?: React.ReactElement<any>[],
-        /**
-         * A string key of a font icon to display an icon in the left side of the item.
-         */
-        leftIcon?: string,
-        /**
-         * Secondary text to display under the caption.
-         */
-        legend?: string,
-        /**
-         * 	A list of elements that are placed on the right side of the item and after the rightIcon attribute.
-         */
-        rightActions?: React.ReactElement<any>[],
-        /**
-         * The same as the leftIcon but in this case the icon is displayed in the right side.
-         */
-        rightIcon?: string,
-        /**
-         * If true, the item displays a ripple effect on click. By default it's inherited from the parent element.
-         * @default false
-         */
-        ripple?: boolean,
-        /**
-         * If true, the elements in the list will display a hover effect and a pointer cursor. Inherited from the parent
-         * @default false
-         */
-        selectable?: boolean,
-        /**
-         * In case you want to provide the item as a link, you can pass this property to specify the href.
-         */
-        to?: string;
-    }
-    class ListItem extends React.Component<ListItemProps, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-    interface ListCheckboxProps extends Props, Conditional, Changeable<boolean> {
-        /**
-         * Main text of the item. Required.
-         */
-        caption?: string,
-        /**
-         * If true the checkbox appears checked by default.
-         * @default false
-         */
-        checked: boolean,
-        /**
-         * Secondary text to display under the caption.
-         */
-        legend?: string,
-        /**
-         * Name for the checkbox input item.
-         */
-        name?: string,
-        /**
-         * Callback called when the input element is blurred.
-         */
-        onBlur?: Function,
-        /**
-         * Callback called when the input element is focused.
-         */
-        onFocus?: Function,
-    }
-    class ListCheckbox extends React.Component<ListCheckboxProps, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-    export interface ListSubHeaderProps extends Props {
-        /**
-         * List header caption.
-         */
-        caption: string;
-    }
-    class ListSubHeader extends React.Component<ListSubHeaderProps, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-    interface ListDividerProps extends Props {
-        /**
-         * Indicates if the divider should be full width or should leave a space on the left side.
-         */
-        inset: boolean;
-    }
-    class ListDivider extends React.Component<ListDividerProps, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-    interface MenuProps extends Props {
-        /**
-         * If true, the menu will be displayed as opened by default.
-         * @default false
-         */
-        active?: boolean,
-        /**
-         * Callback that will be called when the menu is being hidden.
-         */
-        onHide?: Function,
-        /**
-         * Callback that will be called when the menu is being shown.
-         */
-        onShow?: Function,
-        /**
-         * If true the menu wrapper will show an outline with a soft shadow.
-         * @default true
-         */
-        outline?: boolean,
-        /**
-         * Determine the position of the menu. 
-         * With static value the menu will be always shown, auto means that the it will decide the opening direction based on the current position. 
-         * To force a position use top-left, top-right, bottom-left, bottom-right.
-         * @default static
-         */
-        position?: string,
-        /**
-         * If true, the menu items will show a ripple effect on click.
-         */
-        ripple?: boolean,
-        /**
-         * If true, the menu will keep a value to highlight the active child item.
-         */
-        selectable?: boolean,
-        /**
-         *  Used for selectable menus and indicates the initial value so the child item with this value can be highlighted.
-         */
-        value?: boolean,
-    }
-    class Menu extends React.Component<MenuProps, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-    interface IconMenuProps extends Props, Iconic {
-        /**
-         * If true, the icon will show a ripple when is clicked.
-         */
-        iconRipple?: boolean,
-        /**
-         * Transferred to the Menu component.
-         * @default true
-         */
-        menuRipple?: boolean,
-        /**
-         * Callback that will be called when the icon is clicked.
-         */
-        onClick?: Function,
-        /**
-         * Callback that will be called when the menu is being hidden.
-         */
-        onHide?: Function, 
-        /**
-         * Callback that will be called when the menu is being shown.
-         */
-        onShow?: Function,
-        /**
-         * Callback that will be called when a menu item is selected.
-         */
-        onSelect?: Function,
-        /**
-         * Determine the position of the menu. This property is transferred to the inner Menu component.
-         * @default auto
-         */
-        position?: string,
-        /**
-         * If true, the menu will keep a value to highlight the active child item. Transferred to the Menu
-         */
-        selectable?: boolean,
-    }
-    class IconMenu extends React.Component<IconMenuProps, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-    interface MenuItemProps extends Props, Conditional, Iconic {
-        /**
-         * The text to include in the menu item.
-         */
-        caption?: string,
-        /**
-         * If true, the item will show a ripple effect when it's clicked. Inherited from the parent.
-         */
-        ripple?: boolean,
-        /**
-         * Transferred from the Menu component for selectable menus. Indicates if it's the current active option.
-         */
-        selected?: boolean,
-    }
-    class MenuItem extends React.Component<MenuItemProps, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-    class MenuDivider extends React.Component<any, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-    interface NavigationProps extends Props {
-        /**
-         * Array of objects that represent buttons so the keys will be transferred as properties to those.
-         */
-        actions?: Array<ButtonProps>,
-        /**
-         * Array of objects similar to actions but that will be rendered as <Link/> component definition.
-         */
-        routes?: Array<LinkProps>,
-        /**
-         * Type of the navigation, it can be 'vertical' or 'horizontal'.
-         */
-        type?: string,
-    }
-    class Navigation extends React.Component<NavigationProps, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-
-    interface OverlayProps extends Props {
-        active?: boolean;
-        children?: any;
-        /**
-         * Sets a CSS class on the component.
-         */
-        className?: string;
-        invisible?: boolean;
-        onClick?: Function;
-        onEscKeyDown?: Function
-    }
-    class Overlay extends React.Component<OverlayProps, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-
-    interface ProgressBarProps extends Props {
-        /**
-         * Value of a secondary progress bar useful for buffering.
-         */
-        buffer?: number,
-        /**
-         * Maximum value permitted.
-         */
-        max?: number, // 
-        /**
-         * minimum value permitted.
-         */
-        min?: number, // 
-        /**
-         * Mode of the progress bar, it can be determinate or indeterminate.
-         */
-        mode?: string, // 
-        /**
-         * If true, the circular progress bar will be changing its color.
-         */
-        multicolor?: boolean, // 
-        /**
-         * Type of the progress bar, it can be circular or linear.
-         * @default linear
-         */
-        type?: string,
-        /**
-         * Value of the current progress.
-         */
-        value?: number,
-    }
-    class ProgressBar extends React.Component<ProgressBarProps, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-    interface RadioGroupProps extends Props, Conditional, Changeable<any> {
-        /**
-         * Name for the input element group.
-         */
-        name?: string,
-        /**
-         * Default value selected in the radio group.
-         */
-        value?: any,
-    }
-    class RadioGroup extends React.Component<RadioGroupProps, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-    interface RadioButtonProps extends Props, Conditional {
-        /**
-         * If true, the input element will be selected by default. Transferred from the parent.
-         */
-        checked: boolean,
-        /**
-         * Name for the input element.
-         */
-        name?: string,
-        /**
-         * Callback function that will be invoked when the input is blurred.
-         */
-        onBlur?: Function,
-        /**
-         * Callback function that will be invoked when the value changes.
-         */
-        onChange?: Function,
-        /**
-         * Callback function that will be invoked when the input is focused.
-         */
-        onFocus?: Function,
-        /**
-         * Value for the radio button.
-         */
-        value: any,
-    }
-    class RadioButton extends React.Component<RadioButtonProps, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-    interface SliderProps extends Props {
-        /**
-         * If true, an input is shown and the user can set the slider from keyboard value.
-         */
-        editable?: boolean,
-        /**
-         * Maximum value permitted.
-         */
-        max?: number,
-        /**
-         * Minimum value permitted.
-         */
-        min?: number,
-        /**
-         * Callback function that will be invoked when the slider value changes.
-         */
-        onChange?: Function,
-        /**
-         * If true, a pin with numeric value label is shown when the slider thumb is pressed. Use for settings for which users need to know the exact value of the setting.
-         */
-        pinned?: boolean,
-        /**
-         * If true, the slider thumb snaps to tick marks evenly spaced based on the step property value.
-         */
-        snaps?: boolean,
-        /**
-         * Amount to vary the value when the knob is moved or increase/decrease is called.
-         */
-        step?: number,
-        /**
-         * Current value of the slider.
-         */
-        value: number,
-    }
-    class Slider extends React.Component<SliderProps, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-    interface SnackbarProps extends Props, Modal, Iconic {
-        /**
-         * For the action component inside the Snackbar.
-         */
-        action?: string,
-        /**
-         * Text to display in the content.
-         */
-        label?: string,
-        /**
-         * Callback function that will be called when the button action is clicked.
-         */
-        onClick?: Function,
-        /**
-         * Callback function when finish the set timeout.
-         */
-        onTimeout?: Function, 
-        /**
-         * amount of time after the Snackbar will be automatically hidden.
-         */
-        timeout?: number,
-        /**
-         * Indicates the action type. Can be 'accept', 'warning' or 'cancel'
-         */
-        type?: string,
-    }
-    class Snackbar extends React.Component<SnackbarProps, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-    interface SwitchProps extends Props, Conditional {
-        /**
-         * If true, the switch will be enabled.
-         */
-        checked: boolean,
-        /**
-         * If true, component will be disabled.
-         */
-        disabled?: boolean,
-        /**
-         * The text string to use for the floating label element.
-         */
-        label?: string,
-        /**
-         * The text string used as name of the input.
-         */
-        name?: string,
-        /**
-         * Callback function that is fired when when the switch is blurred.
-         */
-        onBlur?: Function,
-        /**
-         * Callback function that is fired when the components's value changes.
-         */
-        onChange?: Function,
-        /**
-         * Callback function fire when the switch is focused.
-         */
-        onFocus?: Function,
-    }
-    class Switch extends React.Component<SwitchProps, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-    interface TableProps extends Props {
-        /**
-         * If true, component will show a heading using model field names.
-         */
-        heading?: boolean,
-        /**
-         * Object describing the data model that represents each object in the source.
-         */
-        model?: { [key: string]: string },
-        /**
-         * Callback function that is fired when an item in a row changes. If set, rows are editable.
-         */
-        onChange?: Function,
-        /**
-         * Callback function invoked when the row selection changes.
-         */
-        onSelect?: Function,
-        /**
-         * Array of indexes of the items in the source that should appear as selected.
-         */
-        selected?: Array<number>,
-        /**
-         * Array of objects representing each item to show.
-         */
-        source?: Array<{ [key: string]: any }>,
-    }
-    class Table extends React.Component<TableProps, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-    interface TabsProps extends Props, Changeable<number> {
-        /**
-         * Current
-         */
-        index: number,
-    }
-    class Tabs extends React.Component<TabsProps, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-    interface TabProps extends Props, Conditional {
-        /**
-         * If true, the current component is visible.
-         * @default false
-         */
-        active?: boolean,
-        /**
-         * If true, the current component is not visible.
-         * @default false
-         */
-        hidden?: boolean,
-        /**
-         * Label text for navigation header
-         */
-        label?: string,
-        /**
-         * Callback function that is fired when the tab is activated.
-         */
-        onActive?: Function,
-    }
-    class Tab extends React.Component<TabProps, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-    interface TimePickerProps extends Props, Changeable<Date> {
-        /**
-         * Format to display the clock. It can be 24hr or ampm.
-         * @default 24hr
-         */
-        format?: string,
-        /**
-         * Datetime object with currrently selected time
-         */
-        value?: Date,
-    }
-    class TimePicker extends React.Component<TimePickerProps, {}> {
-        render(): React.DOMElement<any, any>;
-    }
-
-    //#region HOC
-    interface ActivableRendererOptions {
-        /**
-         * @default 500
-         */
-        delay?: number;
-    }
-    interface ActivableRendererProps {
-        active: boolean;
-        children?: any;
-        delay?: number
-    }
-    function ActivableRendererFactory<P>(options?: ActivableRendererOptions): (componentClass: React.ComponentClass<P>) => React.ComponentClass<P & ActivableRendererProps>
-
-    class TooltipComponent<P, S> extends React.Component<P, S> {
-        getDecoratedComponentInstance(): React.Component<P, S>;
-    }
-
-    interface TooltipComponentClass<P> extends React.ComponentClass<P> {
-        new (props?: P, context?: any): TooltipComponent<P, any>;
-    }
-
-    function Tooltip<P>(componentClass: React.ComponentClass<P>): TooltipComponentClass<P>;
-    //#endregion
-}
-
-declare var ActivableRendererFactory: typeof __RT.ActivableRendererFactory;
-declare module 'react-toolbox/lib/hoc/ActivableRenderer' {
-    export default ActivableRendererFactory;
-}
-
-declare var AppBar: typeof __RT.AppBar;
-declare module 'react-toolbox/lib/app_bar' {
-    export default AppBar;
-}
-declare var Autocomplete: typeof __RT.Autocomplete;
-declare module 'react-toolbox/lib/autocomplete' {
-    export default Autocomplete;
-}
-declare var Avatar: typeof __RT.Avatar;
-declare module 'react-toolbox/lib/avatar' {
-    export default Avatar;
-}
-
-declare module 'react-toolbox/lib/button' {
-    var Button: typeof __RT.Button;
-    var IconButton: typeof __RT.IconButton;
-    export { Button, IconButton };
-}
-
-declare module 'react-toolbox/lib/card' {
-    var Card: typeof __RT.Card;
-    var CardActions: typeof __RT.CardActions;
-    var CardMedia: typeof __RT.CardMedia;
-    var CardText: typeof __RT.CardText;
-    var CardTitle: typeof __RT.CardTitle;
-
-    export {
-    Card,
-    CardActions,
-    CardMedia,
-    CardText,
-    CardTitle
-    }
-}
-declare var Checkbox: typeof __RT.Checkbox;
-declare module 'react-toolbox/lib/checkbox' {
-    export default Checkbox;
-}
-declare var Chip: typeof __RT.Chip;
-declare module 'react-toolbox/lib/chip' {
-    export default Chip;
-}
-declare var DatePicker: typeof __RT.DatePicker;
-declare module 'react-toolbox/lib/date_picker' {
-    export default DatePicker;
-}
-declare var Dialog: typeof __RT.Dialog;
-declare module 'react-toolbox/lib/dialog' {
-    export default Dialog;
-}
-declare var Drawer: typeof __RT.Drawer;
-declare module 'react-toolbox/lib/drawer' {
-    export default Drawer;
-}
-declare var Dropdown: typeof __RT.Dropdown;
-declare module 'react-toolbox/lib/dropdown' {
-    export default Dropdown;
-}
-declare var FontIcon: typeof __RT.FontIcon;
-declare module 'react-toolbox/lib/font_icon' {
-    export default FontIcon;
-}
-declare var Input: typeof __RT.Input;
-declare module 'react-toolbox/lib/input' {
-    export default Input;
-}
-declare var Link: typeof __RT.Link;
-declare module 'react-toolbox/lib/link' {
-    export default Link;
-}
-
-declare module 'react-toolbox/lib/list' {
-    var List: typeof __RT.List;
-    var ListItem: typeof __RT.ListItem;
-    var ListCheckbox: typeof __RT.ListCheckbox;
-    var ListSubHeader: typeof __RT.ListSubHeader;
-    var ListDivider: typeof __RT.ListDivider;
-    export {
-    List,
-    ListItem,
-    ListCheckbox,
-    ListSubHeader,
-    ListDivider
-    }
-}
-
-declare module 'react-toolbox/lib/menu' {
-    var Menu: typeof __RT.Menu;
-    var IconMenu: typeof __RT.IconMenu;
-    var MenuItem: typeof __RT.MenuItem;
-    var MenuDivider: typeof __RT.MenuDivider;
-    export {
-    Menu,
-    IconMenu,
-    MenuItem,
-    MenuDivider
-    }
-}
-declare var Navigation: typeof __RT.Navigation;
-declare module 'react-toolbox/lib/navigation' {
-    export default Navigation;
-}
-declare var Overlay: typeof __RT.Overlay;
-declare module 'react-toolbox/lib/overlay' {
-    export default Overlay;
-}
-declare var ProgressBar: typeof __RT.ProgressBar;
-declare module 'react-toolbox/lib/progress_bar' {
-    export default ProgressBar;
-}
-
-declare module 'react-toolbox/lib/radio' {
-    var RadioGroup: typeof __RT.RadioGroup;
-    var RadioButton: typeof __RT.RadioButton;
-    export {
-    RadioGroup,
-    RadioButton
-    }
-}
-declare var Slider: typeof __RT.Slider;
-declare module 'react-toolbox/lib/slider' {
-    export default Slider;
-}
-declare var Snackbar: typeof __RT.Snackbar;
-declare module 'react-toolbox/lib/snackbar' {
-    export default Snackbar;
-}
-declare var Switch: typeof __RT.Switch;
-declare module 'react-toolbox/lib/switch' {
-    export default Switch;
-}
-declare var Table: typeof __RT.Table;
-declare module 'react-toolbox/lib/table' {
-    export default Table;
-}
-
-declare module 'react-toolbox/lib/tabs' {
-    var Tab: typeof __RT.Tab;
-    var Tabs: typeof __RT.Tabs;
-    export { Tab, Tabs }
-}
-declare var TimePicker: typeof __RT.TimePicker;
-declare module 'react-toolbox/lib/time_picker' {
-    export default TimePicker;
-}
-declare var Tooltip: typeof __RT.Tooltip;
-declare module 'react-toolbox/lib/tooltip' {
-    export default Tooltip;
-}
-declare module 'react-toolbox' {
-    import ActivableRendererFactory from 'react-toolbox/lib/hoc/ActivableRenderer';
-    import AppBar from 'react-toolbox/lib/app_bar';
-    import Autocomplete from 'react-toolbox/lib/autocomplete';
-    import Avatar from 'react-toolbox/lib/avatar';
-    import { Button }from 'react-toolbox/lib/button';
-    import { Card, CardActions, CardMedia, CardText, CardTitle} from 'react-toolbox/lib/card';
-    import Checkbox from 'react-toolbox/lib/checkbox';
-    import DatePicker from 'react-toolbox/lib/date_picker';
-    import Dialog from 'react-toolbox/lib/dialog';
-    import Drawer from 'react-toolbox/lib/drawer';
-    import Dropdown from 'react-toolbox/lib/dropdown';
-    import FontIcon from 'react-toolbox/lib/font_icon';
-    import Input from 'react-toolbox/lib/input';
-    import Link from 'react-toolbox/lib/link';
-    import {List, ListItem, ListCheckbox, ListSubHeader, ListDivider} from 'react-toolbox/lib/list';
-    import {Menu, IconMenu, MenuItem, MenuDivider} from 'react-toolbox/lib/menu';
-    import Navigation from 'react-toolbox/lib/navigation';
-    import Overlay from 'react-toolbox/lib/overlay';
-    import ProgressBar from 'react-toolbox/lib/progress_bar';
-    import {RadioGroup, RadioButton} from 'react-toolbox/lib/radio';
-    import Slider from 'react-toolbox/lib/slider';
-    import Snackbar from 'react-toolbox/lib/snackbar';
-    import Switch from 'react-toolbox/lib/switch';
-    import { Tab, Tabs } from 'react-toolbox/lib/tabs';
-    import TimePicker from 'react-toolbox/lib/time_picker';
-    import Tooltip from 'react-toolbox/lib/tooltip';
-
-    export {
-    ActivableRendererFactory,
-    AppBar,
-    Autocomplete,
-    Avatar,
-    Button,
-    Card, CardActions, CardMedia, CardText, CardTitle,
-    Checkbox,
-    DatePicker,
-    Dialog,
-    Drawer,
-    Dropdown,
-    FontIcon,
-    Input,
-    Link,
-    List, ListItem, ListCheckbox, ListSubHeader, ListDivider,
-    Menu, IconMenu, MenuItem, MenuDivider,
-    Navigation,
-    Overlay,
-    ProgressBar,
-    RadioGroup, RadioButton,
-    Slider,
-    Snackbar,
-    Switch,
-    Tab, Tabs,
-    TimePicker,
-    Tooltip
-    }
+import ActivableRendererFactory from 'react-toolbox/lib/hoc/ActivableRenderer';
+import AppBar from 'react-toolbox/lib/app_bar';
+import Autocomplete from 'react-toolbox/lib/autocomplete';
+import Avatar from 'react-toolbox/lib/avatar';
+import { Button }from 'react-toolbox/lib/button';
+import { Card, CardActions, CardMedia, CardText, CardTitle} from 'react-toolbox/lib/card';
+import Checkbox from 'react-toolbox/lib/checkbox';
+import DatePicker from 'react-toolbox/lib/date_picker';
+import Dialog from 'react-toolbox/lib/dialog';
+import Drawer from 'react-toolbox/lib/drawer';
+import Dropdown from 'react-toolbox/lib/dropdown';
+import FontIcon from 'react-toolbox/lib/font_icon';
+import Input from 'react-toolbox/lib/input';
+import Link from 'react-toolbox/lib/link';
+import {List, ListItem, ListCheckbox, ListSubHeader, ListDivider} from 'react-toolbox/lib/list';
+import {Menu, IconMenu, MenuItem, MenuDivider} from 'react-toolbox/lib/menu';
+import Navigation from 'react-toolbox/lib/navigation';
+import Overlay from 'react-toolbox/lib/overlay';
+import ProgressBar from 'react-toolbox/lib/progress_bar';
+import {RadioGroup, RadioButton} from 'react-toolbox/lib/radio';
+import Slider from 'react-toolbox/lib/slider';
+import Snackbar from 'react-toolbox/lib/snackbar';
+import Switch from 'react-toolbox/lib/switch';
+import { Tab, Tabs } from 'react-toolbox/lib/tabs';
+import TimePicker from 'react-toolbox/lib/time_picker';
+import Tooltip from 'react-toolbox/lib/tooltip';
+
+export {
+ActivableRendererFactory,
+AppBar,
+Autocomplete,
+Avatar,
+Button,
+Card, CardActions, CardMedia, CardText, CardTitle,
+Checkbox,
+DatePicker,
+Dialog,
+Drawer,
+Dropdown,
+FontIcon,
+Input,
+Link,
+List, ListItem, ListCheckbox, ListSubHeader, ListDivider,
+Menu, IconMenu, MenuItem, MenuDivider,
+Navigation,
+Overlay,
+ProgressBar,
+RadioGroup, RadioButton,
+Slider,
+Snackbar,
+Switch,
+Tab, Tabs,
+TimePicker,
+Tooltip
 }
\ No newline at end of file

From 9856ca0b7cf580b43d3bb72062a62e94f067ee22 Mon Sep 17 00:00:00 2001
From: Robert Parker <robert@flavorus.com>
Date: Tue, 7 Jun 2016 15:08:37 -0700
Subject: [PATCH 0624/1024] Update libs with new external .d.ts files

---
 lib/app_bar/index.d.ts                  |  56 ++++++++
 lib/autocomplete/index.d.ts             |  95 +++++++++++++
 lib/avatar/index.d.ts                   |  55 ++++++++
 lib/button/index.d.ts                   | 122 ++++++++++++++++
 lib/card/index.d.ts                     | 160 +++++++++++++++++++++
 lib/checkbox/index.d.ts                 |  80 +++++++++++
 lib/chip/index.d.ts                     |  66 +++++++++
 lib/date_picker/DatePicker.js           |   3 +
 lib/date_picker/DatePickerDialog.js     |   3 +-
 lib/date_picker/index.d.ts              |  67 +++++++++
 lib/dialog/index.d.ts                   |  83 +++++++++++
 lib/drawer/index.d.ts                   |  74 ++++++++++
 lib/dropdown/index.d.ts                 |  79 +++++++++++
 lib/font_icon/index.d.ts                |  42 ++++++
 lib/hoc/ActivableRenderer.d.ts          |  13 ++
 lib/index.js                            | 112 ++++++++++-----
 lib/input/Input.js                      |   5 +-
 lib/input/index.d.ts                    | 122 ++++++++++++++++
 lib/link/index.d.ts                     |  56 ++++++++
 lib/list/index.d.ts                     | 180 ++++++++++++++++++++++++
 lib/menu/index.d.ts                     | 150 ++++++++++++++++++++
 lib/navigation/index.d.ts               |  53 +++++++
 lib/overlay/index.d.ts                  |  49 +++++++
 lib/progress_bar/__test__/index.spec.js |  12 +-
 lib/progress_bar/index.d.ts             |  69 +++++++++
 lib/radio/index.d.ts                    |  95 +++++++++++++
 lib/slider/__tests__/index.spec.js      |   8 +-
 lib/slider/index.d.ts                   |  72 ++++++++++
 lib/snackbar/index.d.ts                 |  97 +++++++++++++
 lib/switch/index.d.ts                   |  75 ++++++++++
 lib/table/TableHead.js                  |   2 +-
 lib/table/index.d.ts                    |  64 +++++++++
 lib/tabs/__tests__/index.spec.js        |   4 +-
 lib/tabs/index.d.ts                     |  84 +++++++++++
 lib/time_picker/TimePicker.js           |   3 +
 lib/time_picker/TimePickerDialog.js     |   3 +-
 lib/time_picker/index.d.ts              |  59 ++++++++
 lib/tooltip/index.d.ts                  |  10 ++
 38 files changed, 2331 insertions(+), 51 deletions(-)
 create mode 100644 lib/app_bar/index.d.ts
 create mode 100644 lib/autocomplete/index.d.ts
 create mode 100644 lib/avatar/index.d.ts
 create mode 100644 lib/button/index.d.ts
 create mode 100644 lib/card/index.d.ts
 create mode 100644 lib/checkbox/index.d.ts
 create mode 100644 lib/chip/index.d.ts
 create mode 100644 lib/date_picker/index.d.ts
 create mode 100644 lib/dialog/index.d.ts
 create mode 100644 lib/drawer/index.d.ts
 create mode 100644 lib/dropdown/index.d.ts
 create mode 100644 lib/font_icon/index.d.ts
 create mode 100644 lib/hoc/ActivableRenderer.d.ts
 create mode 100644 lib/input/index.d.ts
 create mode 100644 lib/link/index.d.ts
 create mode 100644 lib/list/index.d.ts
 create mode 100644 lib/menu/index.d.ts
 create mode 100644 lib/navigation/index.d.ts
 create mode 100644 lib/overlay/index.d.ts
 create mode 100644 lib/progress_bar/index.d.ts
 create mode 100644 lib/radio/index.d.ts
 create mode 100644 lib/slider/index.d.ts
 create mode 100644 lib/snackbar/index.d.ts
 create mode 100644 lib/switch/index.d.ts
 create mode 100644 lib/table/index.d.ts
 create mode 100644 lib/tabs/index.d.ts
 create mode 100644 lib/time_picker/index.d.ts
 create mode 100644 lib/tooltip/index.d.ts

diff --git a/lib/app_bar/index.d.ts b/lib/app_bar/index.d.ts
new file mode 100644
index 000000000..9e59dce88
--- /dev/null
+++ b/lib/app_bar/index.d.ts
@@ -0,0 +1,56 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+
+export interface AppBarProps extends Props {
+	/**
+	 * If true, the AppBar shows a shadow.
+	 * @default false
+	 */
+	flat?: boolean,
+	/**
+	 * Determine if the bar should have position fixed (true) or relative (false)
+	 * @default false
+	 */
+	fixed?: boolean,
+}
+/**
+ * The app bar is a special kind of toolbar that�s used for branding, navigation, search, and actions. 
+ * Usually it contains controls on the right and left side and a title with the current section or app name. 
+ * You should give the content with children elements.
+ */
+export default class AppBar extends React.Component<AppBarProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/lib/autocomplete/index.d.ts b/lib/autocomplete/index.d.ts
new file mode 100644
index 000000000..ebfc38665
--- /dev/null
+++ b/lib/autocomplete/index.d.ts
@@ -0,0 +1,95 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+export interface Conditional {
+	/**
+	 * If true, component will be disabled
+	 * @default false
+	 */
+	disabled?: boolean
+}
+
+/**
+ * Properties of components that have values that can be changed (T is the type of the value)
+ */
+export interface Changeable<T> {
+	/**
+	 * Callback called when the picker value is changed.
+	 * @param v Type of the value
+	 */
+	onChange?: (v: T) => void
+}
+
+export interface AutocompleteProps extends Props, Conditional, Changeable<string | Array<any>> {
+	/**
+	 * Sets the error string for the internal input element.
+	 */
+	error?: string,
+	/**
+	 * The text string to use for the floating label element.
+	 */
+	label?: string,
+	/**
+	 * If true, component can hold multiple values.
+	 * @default true
+	 */
+	multiple?: boolean,
+	/**
+	 * 	Object of key/values or array representing all items suggested.
+	 */
+	source: Object | Array<any>,
+	/**
+	 * If true, the list of suggestions will not be filtered when a value is selected, until the query is modified.
+	 * @default false
+	 */
+	showSuggestionsWhenValueIsSet?: boolean,
+	/**
+	 * Type of the input element. It can be a valid HTML5 input type
+	 * @default text
+	 */
+	type?: string,
+	/**
+	 * 	Value or array of values currently selected component.Current value of the input element.
+	 */
+	value?: string | Array<any>,
+}
+/**
+ * An input field with a set of predeterminated labeled values. When it's focused it shows a list of hints that are filtered by label as the user types. 
+ * They can be simple or multiple depending on the amount of values that can be selected. 
+ * The opening direction is determined at opening time depending on the current position.
+ */
+export default class Autocomplete extends React.Component<AutocompleteProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/lib/avatar/index.d.ts b/lib/avatar/index.d.ts
new file mode 100644
index 000000000..474eb0b63
--- /dev/null
+++ b/lib/avatar/index.d.ts
@@ -0,0 +1,55 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+export interface Iconic {
+	/**
+	 * Value of the icon (See icon component).
+	 */
+	icon?: string | React.ReactElement<any> | React.ReactHTMLElement<any>,
+}
+export interface AvatarProps extends Props, Iconic {
+	children?: any,
+	image?: string | React.ReactElement<any> | React.ReactHTMLElement<any> | React.ClassicComponent<any, any>,
+	title?: string | boolean,
+}
+/**
+ * Avatars can be used to represent people. 
+ * For personal avatars, offer personalization options. 
+ * As users may choose not to personalize an avatar, provide delightful defaults. 
+ * When used with a specific logo, avatars can also be used to represent brand.
+ */
+export default class Avatar extends React.Component<AvatarProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/lib/button/index.d.ts b/lib/button/index.d.ts
new file mode 100644
index 000000000..b712fdc44
--- /dev/null
+++ b/lib/button/index.d.ts
@@ -0,0 +1,122 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+
+// Interface for components with icons
+export interface Iconic {
+	/**
+	 * Value of the icon (See icon component).
+	 */
+	icon?: string | React.ReactElement<any> | React.ReactHTMLElement<any>,
+}
+
+export interface Conditional {
+	/**
+	 * If true, component will be disabled
+	 * @default false
+	 */
+	disabled?: boolean
+}
+
+/**
+ * Properties of components that can be clicked
+ */
+export interface Clickable {
+	/**
+	 *  Callback called when the button is clicked.
+	 */
+	onClick?: Function
+}
+export interface ButtonProps extends Props, Clickable, Conditional, Iconic {
+	/**
+	 * Indicates if the button should have accent color.
+	 * @default false
+	 */
+	accent?: boolean,
+	/**
+	 * If true, the button will have a flat look.
+	 * @default false
+	 */
+	flat?: boolean,
+	/**
+	 * If true, the button will have a floating look.
+	 * @default false
+	 */
+	floating?: boolean,
+	/**
+	 * If specified, the button will be rendered as an <a>
+	 */
+	href?: string,
+	/**
+	 * The text string to use for the name of the button.
+	 */
+	label?: string,
+	/**
+	 * If true, component will be disabled and show a loading animation.
+	 * @default false
+	 */
+	loading?: boolean,
+	/**
+	 * To be used with floating button. If true the button will be smaller. 
+	 * @default false
+	 */
+	mini?: boolean,
+	/**
+	 * Indicates if the button should have primary color.
+	 * @default false
+	 */
+	primary?: boolean,
+	/**
+	 * If true, the button will have a raised look.
+	 * @default false
+	 */
+	raised?: boolean,
+	/**
+	 * If true, component will have a ripple effect on click.
+	 * @default true
+	 */
+	ripple?: boolean,
+}
+/**
+ * A button clearly communicates what action will occur when the user touches it. 
+ * It consists of text, an image, or both, designed in accordance with your app’s color theme.
+ */
+export class Button extends React.Component<ButtonProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
+
+export class IconButton extends React.Component<ButtonProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/lib/card/index.d.ts b/lib/card/index.d.ts
new file mode 100644
index 000000000..3296e4565
--- /dev/null
+++ b/lib/card/index.d.ts
@@ -0,0 +1,160 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+/**
+ * Properties of components that can be clicked
+ */
+export interface Clickable {
+	/**
+	 *  Callback called when the button is clicked.
+	 */
+	onClick?: Function
+}
+export interface CardProps extends Props, Clickable {
+	/**
+	 * Child components, usually Card subcomponents.
+	 */
+	children?: any,
+	/**
+	 * Increases the shadow depth to appear elevated.
+	 */
+	raised?: boolean,
+	/**
+	 * Array of objects describing actions. These actions will be rendered as buttons and the object fields will be transferred to those.
+	 * @default []
+	 */
+	actions?: Array<ButtonProps>,
+	/**
+	 * Sets HEX or RGBA color to add a colored layer to the heading.
+	 */
+	color?: string,
+	/**
+	 * URL to set as a background image in the heading.
+	 */
+	image?: string,
+	
+	/**
+	 * Type of the component to display general modifications. It can be 'wide' for a larger card, 'image' if it's an image card or 'event' which shows just a title on top.
+	 */
+	type?: string,
+}
+/**
+ * A Card is a piece of paper with unique related data that serves as an entry point to more detailed information. 
+ * For example, a card could contain a photo, text, and a link about a single subject.
+ * Cards are composed of multiple subcomponents in React Toolbox. 
+ * You can combine each of the subcomponents to create all different Material Design Cards given in the spec.
+ */
+export class Card extends React.Component<CardProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
+export interface CardTitleProps extends Props {
+	avatar?: string | React.ReactElement<any> | React.ReactHTMLElement<any> | React.ClassicComponent<any, any>,
+	/**
+	 * Children to pass through the component.
+	 */
+	children?: any,
+	/**
+	 * Sets a complementary smaller text under the title.
+	 */
+	subtitle?: string,
+	/**
+	 * Sets the title of the card.
+	 */
+	title?: string | boolean,
+}
+/**
+ * A versatile title block that can be used in various places on the card, including the media area. 
+ * This component can also display an avatar next to the title content.
+ */
+export class CardTitle extends React.Component<CardTitleProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
+export interface CardMediaProps extends Props {
+	/**
+	 * Forces a ('wide' 16:9) or ('square' 1:1) aspect ratio respectively. 
+	 * Unset, the media area will have a flexible height.
+	 * @default ''
+	 */
+	aspectRatio?: string,
+	/**
+	 * Usually an image/video element or a <CardTitle> component.
+	 */
+	children?: any,
+	/**
+	 * Sets the background color
+	 */
+	color?: string,
+	/**
+	 * Creates a dark overlay underneath the child components.
+	 */
+	contentOverlay?: boolean,
+	/**
+	 * Can be used instead of children. Accepts an element or a URL string.
+	 */
+	image?: string | React.ReactElement<any> | React.ReactHTMLElement<any> | React.ClassicComponent<any, any>,
+}
+/**
+ * Used for displaying media such as images or videos on a card. 
+ * Can also be used with a solid background color instead of an image.
+ */
+export class CardMedia extends React.Component<CardMediaProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
+export interface CardTextProps extends Props {
+	/**
+	 * Children to pass through the component.
+	 */
+	children?: any,
+}
+/**
+ * Basic card content container. 
+ * Good for small descriptions or other supplementary text.
+ */
+export class CardText extends React.Component<CardTextProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
+export interface CardActionsProps extends Props {
+	/**
+	 * Children to pass through the component.
+	 */
+	children?: any,
+}
+/**
+ * This component is used as a container for supplemental card actions. 
+ * Supplemental actions within the card are explicitly called out using icons, text, and UI controls, typically placed at the bottom of the card.
+ */
+export class CardActions extends React.Component<CardActionsProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/lib/checkbox/index.d.ts b/lib/checkbox/index.d.ts
new file mode 100644
index 000000000..284267d25
--- /dev/null
+++ b/lib/checkbox/index.d.ts
@@ -0,0 +1,80 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+export interface Conditional {
+	/**
+	 * If true, component will be disabled
+	 * @default false
+	 */
+	disabled?: boolean
+}
+
+/**
+ * Properties of components that have values that can be changed (T is the type of the value)
+ */
+export interface Changeable<T> {
+	/**
+	 * Callback called when the picker value is changed.
+	 * @param v Type of the value
+	 */
+	onChange?: (v: T) => void
+}
+
+export interface CheckboxProps extends Props, Changeable<boolean>, Conditional {
+	/**
+	 * Value for the checkbox, can be true or false.
+	 * @default false
+	 */
+	checked?: boolean,
+	/**
+	 * Text label to attach next to the checkbox element.
+	 */
+	label?: string,
+	/**
+	 * The name of the field to set in the input checkbox.
+	 */
+	name?: string,
+	/**
+	 * Callback called when the checkbox is blurred.
+	 */
+	onBlur?: Function,
+	/**
+	 * Callback called when the checkbox is focused
+	 */
+	onFocus?: Function,
+}
+export default class Checkbox extends React.Component<CheckboxProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/lib/chip/index.d.ts b/lib/chip/index.d.ts
new file mode 100644
index 000000000..3b9822189
--- /dev/null
+++ b/lib/chip/index.d.ts
@@ -0,0 +1,66 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+export interface Conditional {
+	/**
+	 * If true, component will be disabled
+	 * @default false
+	 */
+	disabled?: boolean
+}
+
+export interface ChipProps extends Props {
+	/**
+	 * 	Child components, usually Avatar and inline elements
+	 */
+	children?: React.ReactNode;
+	/**
+	 * If true, the chip will be rendered with a delete icon.
+	 */
+	deletable?: boolean;
+	/**
+	 * Callback to be invoked when the delete icon is clicked.
+	 */
+	onDeleteClick?: React.MouseEventHandler
+}
+/**
+ * Avatars can be used to represent people. 
+ * For personal avatars, offer personalization options. 
+ * As users may choose not to personalize an avatar, provide delightful defaults. 
+ * When used with a specific logo, avatars can also be used to represent brand.
+ */
+export default class Chip extends React.Component<ChipProps, {}> {
+	render(): React.ReactElement<any>;
+}
\ No newline at end of file
diff --git a/lib/date_picker/DatePicker.js b/lib/date_picker/DatePicker.js
index 64e7983ee..1e086db24 100644
--- a/lib/date_picker/DatePicker.js
+++ b/lib/date_picker/DatePicker.js
@@ -103,6 +103,7 @@ var factory = function factory(Input, DatePickerDialog) {
             className: (0, _classnames3.default)(this.props.theme.input, _defineProperty({}, inputClassName, inputClassName)),
             error: this.props.error,
             onMouseDown: this.handleInputMouseDown,
+            name: this.props.name,
             label: this.props.label,
             readOnly: true,
             type: 'text',
@@ -113,6 +114,7 @@ var factory = function factory(Input, DatePickerDialog) {
             autoOk: this.props.autoOk,
             active: this.state.active,
             className: this.props.className,
+            name: this.props.name,
             maxDate: this.props.maxDate,
             minDate: this.props.minDate,
             onDismiss: this.handleDismiss,
@@ -134,6 +136,7 @@ var factory = function factory(Input, DatePickerDialog) {
     icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
     inputClassName: _react.PropTypes.string,
     inputFormat: _react.PropTypes.func,
+    name: _react.PropTypes.string,
     label: _react.PropTypes.string,
     maxDate: _react.PropTypes.object,
     minDate: _react.PropTypes.object,
diff --git a/lib/date_picker/DatePickerDialog.js b/lib/date_picker/DatePickerDialog.js
index c446e1620..d76ab29df 100644
--- a/lib/date_picker/DatePickerDialog.js
+++ b/lib/date_picker/DatePickerDialog.js
@@ -63,7 +63,7 @@ var factory = function factory(Dialog, Calendar) {
             date: date
           });
         }
-      }, _this.actions = [{ label: 'Cancel', className: _this.props.theme.button, onClick: _this.props.onDismiss }, { label: 'Ok', className: _this.props.theme.button, onClick: _this.handleSelect }], _temp), _possibleConstructorReturn(_this, _ret);
+      }, _this.actions = [{ label: 'Cancel', className: _this.props.theme.button, onClick: _this.props.onDismiss }, { label: 'Ok', className: _this.props.theme.button, name: _this.props.name, onClick: _this.handleSelect }], _temp), _possibleConstructorReturn(_this, _ret);
     }
 
     _createClass(CalendarDialog, [{
@@ -130,6 +130,7 @@ var factory = function factory(Dialog, Calendar) {
     className: _react.PropTypes.string,
     maxDate: _react.PropTypes.object,
     minDate: _react.PropTypes.object,
+    name: _react.PropTypes.string,
     onDismiss: _react.PropTypes.func,
     onSelect: _react.PropTypes.func,
     theme: _react.PropTypes.shape({
diff --git a/lib/date_picker/index.d.ts b/lib/date_picker/index.d.ts
new file mode 100644
index 000000000..ac43c6d7f
--- /dev/null
+++ b/lib/date_picker/index.d.ts
@@ -0,0 +1,67 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+/**
+ * Properties of components that have values that can be changed (T is the type of the value)
+ */
+export interface Changeable<T> {
+	/**
+	 * Callback called when the picker value is changed.
+	 * @param v Type of the value
+	 */
+	onChange?: (v: T) => void
+}
+
+export interface DatePickerProps extends Props, Changeable<Date> {
+	/**
+	 * Date object with the maximum selectable date.
+	 */
+	maxDate?: Date,
+	/**
+	 * Date object with the minimum selectable date.
+	 */
+	minDate?: Date,
+	/**
+	 * The text string to use like a input placeholder.
+	 */
+	placeholder?: string,
+	/**
+	 * Date object with the currently selected date.
+	 */
+	value?: Date,
+}
+export default class DatePicker extends React.Component<DatePickerProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/lib/dialog/index.d.ts b/lib/dialog/index.d.ts
new file mode 100644
index 000000000..8b547b683
--- /dev/null
+++ b/lib/dialog/index.d.ts
@@ -0,0 +1,83 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+/**
+ * Properties of modal components (Drawer, Dialog)
+ */
+export interface Modal {
+	/**
+	 * If true, the dialog will be active.
+	 */
+	active: boolean,
+	/**
+	 * Callback called when the ESC key is pressed with the overlay active.
+	 */
+	onEscKeyDown?: Function,
+	/**
+	 * Callback to be invoked when the dialog overlay is clicked.
+	 */
+	onOverlayClick?: Function,
+	/**
+	 * Callback called when the mouse button is pressed on the overlay.
+	 */
+	onOverlayMouseDown?: Function,
+	/**
+	 * Callback called when the mouse is moving over the overlay.
+	 */
+	onOverlayMouseMove?: Function,
+	/**
+	 * Callback called when the mouse button is released over the overlay.
+	 */
+	onOverlayMouseUp?: Function,
+}
+export interface DialogProps extends Props, Modal {
+	/**
+	 * An array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons.
+	 * @default []
+	 */
+	actions?: Array<ButtonProps>,
+	/**
+	 * The text string to use as standar title of the dialog.
+	 */
+	title?: string | boolean,
+	/**
+	 * Used to determine the size of the dialog. It can be small, normal or large.
+	 * @default normal
+	 */
+	type?: string,
+}
+export default class Dialog extends React.Component<DialogProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/lib/drawer/index.d.ts b/lib/drawer/index.d.ts
new file mode 100644
index 000000000..3bcf15f2f
--- /dev/null
+++ b/lib/drawer/index.d.ts
@@ -0,0 +1,74 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+/**
+ * Properties of modal components (Drawer, Dialog)
+ */
+export interface Modal {
+	/**
+	 * If true, the dialog will be active.
+	 */
+	active: boolean,
+	/**
+	 * Callback called when the ESC key is pressed with the overlay active.
+	 */
+	onEscKeyDown?: Function,
+	/**
+	 * Callback to be invoked when the dialog overlay is clicked.
+	 */
+	onOverlayClick?: Function,
+	/**
+	 * Callback called when the mouse button is pressed on the overlay.
+	 */
+	onOverlayMouseDown?: Function,
+	/**
+	 * Callback called when the mouse is moving over the overlay.
+	 */
+	onOverlayMouseMove?: Function,
+	/**
+	 * Callback called when the mouse button is released over the overlay.
+	 */
+	onOverlayMouseUp?: Function,
+}
+export interface DrawerProps extends Props, Modal {
+	/**
+	 * Type of drawer. It can be 'left' or 'right' to display the drawer on the left or right side of the screen.
+	 * @default left
+	 */
+	type?: string
+}
+export default class Drawer extends React.Component<DrawerProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/lib/dropdown/index.d.ts b/lib/dropdown/index.d.ts
new file mode 100644
index 000000000..46244038e
--- /dev/null
+++ b/lib/dropdown/index.d.ts
@@ -0,0 +1,79 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+export interface Conditional {
+	/**
+	 * If true, component will be disabled
+	 * @default false
+	 */
+	disabled?: boolean
+}
+
+/**
+ * Properties of components that have values that can be changed (T is the type of the value)
+ */
+export interface Changeable<T> {
+	/**
+	 * Callback called when the picker value is changed.
+	 * @param v Type of the value
+	 */
+	onChange?: (v: T) => void
+}
+export interface DropdownProps extends Props, Changeable<any>, Conditional {
+	/**
+	 * If true, the dropdown will open up or down depending on the position in the screen.
+	 */
+	auto?: boolean,
+	/**
+	 * The text string to use for the floating label element.
+	 */
+	label?: string,
+	/**
+	 * Array of data objects with the data to represent in the dropdown.
+	 */
+	source: Array<Option<any>>,
+	/**
+	 * Callback function that returns a JSX template to represent the element.
+	 */
+	template?: Function,
+	/**
+	 * Default value using JSON data.
+	 */
+	value: string,
+}
+
+export default class Dropdown extends React.Component<DropdownProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/lib/font_icon/index.d.ts b/lib/font_icon/index.d.ts
new file mode 100644
index 000000000..152fd1309
--- /dev/null
+++ b/lib/font_icon/index.d.ts
@@ -0,0 +1,42 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+
+export interface FontIconProps extends Props {
+	value: string
+}
+export default class FontIcon extends React.Component<FontIconProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/lib/hoc/ActivableRenderer.d.ts b/lib/hoc/ActivableRenderer.d.ts
new file mode 100644
index 000000000..ab73e065c
--- /dev/null
+++ b/lib/hoc/ActivableRenderer.d.ts
@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface ActivableRendererOptions {
+	/**
+	 * @default 500
+	 */
+	delay?: number;
+}
+export interface ActivableRendererProps {
+	active: boolean;
+	children?: any;
+	delay?: number
+}
+export default function ActivableRendererFactory<P>(options?: ActivableRendererOptions): (componentClass: React.ComponentClass<P>) => React.ComponentClass<P & ActivableRendererProps>
\ No newline at end of file
diff --git a/lib/index.js b/lib/index.js
index 87f0e6b4b..32e39abed 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -7,87 +7,129 @@ exports.TimePicker = exports.Tooltip = exports.Table = exports.Switch = exports.
 
 var _button = require('./button');
 
-Object.keys(_button).forEach(function (key) {
-  if (key === "default") return;
-  Object.defineProperty(exports, key, {
+var _loop = function _loop(_key8) {
+  if (_key8 === "default") return 'continue';
+  Object.defineProperty(exports, _key8, {
     enumerable: true,
     get: function get() {
-      return _button[key];
+      return _button[_key8];
     }
   });
-});
+};
+
+for (var _key8 in _button) {
+  var _ret = _loop(_key8);
+
+  if (_ret === 'continue') continue;
+}
 
 var _card = require('./card');
 
-Object.keys(_card).forEach(function (key) {
-  if (key === "default") return;
-  Object.defineProperty(exports, key, {
+var _loop2 = function _loop2(_key9) {
+  if (_key9 === "default") return 'continue';
+  Object.defineProperty(exports, _key9, {
     enumerable: true,
     get: function get() {
-      return _card[key];
+      return _card[_key9];
     }
   });
-});
+};
+
+for (var _key9 in _card) {
+  var _ret2 = _loop2(_key9);
+
+  if (_ret2 === 'continue') continue;
+}
 
 var _layout = require('./layout');
 
-Object.keys(_layout).forEach(function (key) {
-  if (key === "default") return;
-  Object.defineProperty(exports, key, {
+var _loop3 = function _loop3(_key10) {
+  if (_key10 === "default") return 'continue';
+  Object.defineProperty(exports, _key10, {
     enumerable: true,
     get: function get() {
-      return _layout[key];
+      return _layout[_key10];
     }
   });
-});
+};
+
+for (var _key10 in _layout) {
+  var _ret3 = _loop3(_key10);
+
+  if (_ret3 === 'continue') continue;
+}
 
 var _list = require('./list');
 
-Object.keys(_list).forEach(function (key) {
-  if (key === "default") return;
-  Object.defineProperty(exports, key, {
+var _loop4 = function _loop4(_key11) {
+  if (_key11 === "default") return 'continue';
+  Object.defineProperty(exports, _key11, {
     enumerable: true,
     get: function get() {
-      return _list[key];
+      return _list[_key11];
     }
   });
-});
+};
+
+for (var _key11 in _list) {
+  var _ret4 = _loop4(_key11);
+
+  if (_ret4 === 'continue') continue;
+}
 
 var _menu = require('./menu');
 
-Object.keys(_menu).forEach(function (key) {
-  if (key === "default") return;
-  Object.defineProperty(exports, key, {
+var _loop5 = function _loop5(_key12) {
+  if (_key12 === "default") return 'continue';
+  Object.defineProperty(exports, _key12, {
     enumerable: true,
     get: function get() {
-      return _menu[key];
+      return _menu[_key12];
     }
   });
-});
+};
+
+for (var _key12 in _menu) {
+  var _ret5 = _loop5(_key12);
+
+  if (_ret5 === 'continue') continue;
+}
 
 var _radio = require('./radio');
 
-Object.keys(_radio).forEach(function (key) {
-  if (key === "default") return;
-  Object.defineProperty(exports, key, {
+var _loop6 = function _loop6(_key13) {
+  if (_key13 === "default") return 'continue';
+  Object.defineProperty(exports, _key13, {
     enumerable: true,
     get: function get() {
-      return _radio[key];
+      return _radio[_key13];
     }
   });
-});
+};
+
+for (var _key13 in _radio) {
+  var _ret6 = _loop6(_key13);
+
+  if (_ret6 === 'continue') continue;
+}
 
 var _tabs = require('./tabs');
 
-Object.keys(_tabs).forEach(function (key) {
-  if (key === "default") return;
-  Object.defineProperty(exports, key, {
+var _loop7 = function _loop7(_key14) {
+  if (_key14 === "default") return 'continue';
+  Object.defineProperty(exports, _key14, {
     enumerable: true,
     get: function get() {
-      return _tabs[key];
+      return _tabs[_key14];
     }
   });
-});
+};
+
+for (var _key14 in _tabs) {
+  var _ret7 = _loop7(_key14);
+
+  if (_ret7 === 'continue') continue;
+}
 
 require('./utils/polyfills');
 
diff --git a/lib/input/Input.js b/lib/input/Input.js
index 455348aac..9fd58c709 100644
--- a/lib/input/Input.js
+++ b/lib/input/Input.js
@@ -79,6 +79,7 @@ var factory = function factory(FontIcon) {
         var floating = _props.floating;
         var hint = _props.hint;
         var icon = _props.icon;
+        var name = _props.name;
         var labelText = _props.label;
         var maxLength = _props.maxLength;
         var multiline = _props.multiline;
@@ -87,7 +88,7 @@ var factory = function factory(FontIcon) {
         var type = _props.type;
         var value = _props.value;
 
-        var others = _objectWithoutProperties(_props, ['children', 'disabled', 'error', 'floating', 'hint', 'icon', 'label', 'maxLength', 'multiline', 'required', 'theme', 'type', 'value']);
+        var others = _objectWithoutProperties(_props, ['children', 'disabled', 'error', 'floating', 'hint', 'icon', 'name', 'label', 'maxLength', 'multiline', 'required', 'theme', 'type', 'value']);
 
         var length = maxLength && value ? value.length : 0;
         var labelClassName = (0, _classnames5.default)(theme.label, _defineProperty({}, theme.fixed, !floating));
@@ -101,6 +102,7 @@ var factory = function factory(FontIcon) {
           onChange: this.handleChange,
           ref: 'input',
           role: 'input',
+          name: name,
           disabled: disabled,
           required: required,
           type: type,
@@ -157,6 +159,7 @@ var factory = function factory(FontIcon) {
     floating: _react2.default.PropTypes.bool,
     hint: _react2.default.PropTypes.string,
     icon: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.element]),
+    name: _react2.default.PropTypes.string,
     label: _react2.default.PropTypes.string,
     maxLength: _react2.default.PropTypes.number,
     multiline: _react2.default.PropTypes.bool,
diff --git a/lib/input/index.d.ts b/lib/input/index.d.ts
new file mode 100644
index 000000000..780ae6f5c
--- /dev/null
+++ b/lib/input/index.d.ts
@@ -0,0 +1,122 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+export interface Conditional {
+	/**
+	 * If true, component will be disabled
+	 * @default false
+	 */
+	disabled?: boolean
+}
+
+/**
+ * Properties of components that have values that can be changed (T is the type of the value)
+ */
+export interface Changeable<T> {
+	/**
+	 * Callback called when the picker value is changed.
+	 * @param v Type of the value
+	 */
+	onChange?: (v: T) => void
+}
+
+export interface Iconic {
+	/**
+	 * Value of the icon (See icon component).
+	 */
+	icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
+}
+
+export interface InputProps extends Props, Conditional, Changeable<string>, Iconic {
+	/**
+	 * Give an error string to display under the field.
+	 */
+	error?: string,
+	/**
+	 * Indicates if the label is floating in the input field or not.
+	 * @default true
+	 */
+	floating?: boolean,
+	/**
+	 * The text string to use for the floating label element.
+	 */
+	label?: string,
+	/**
+	 * Specifies the maximum number of characters allowed in the component.
+	 */
+	maxLength?: number,
+	/**
+	 * If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.
+	 * @default false
+	 */
+	multiline?: boolean,
+	/**
+	 * Callback function that is fired when components is blurred.
+	 */
+	onBlur?: Function,
+	/**
+	 * Callback function that is fired when components is focused.
+	 */
+	onFocus?: Function,
+	/**
+	 * Callback function that is fired when a key is pressed down.
+	 */
+	onKeyDown?: Function,
+	/**
+	 * Callback function that is fired when a key is pressed.
+	 */
+	onKeyPress?: Function,
+	/**
+	 * Callback function that is fired when a key is released.
+	 */
+	onKeyUp?: Function,
+	/**
+	 * If true, the html input has a required value.
+	 * @default false
+	 */
+	required?: boolean,
+	/**
+	 * Type of the input element. It can be a valid HTML5 input type
+	 * @default text
+	 */
+	type?: string,
+	/**
+	 * Current value of the input element.
+	 */
+	value?: string,
+}
+export default class Input extends React.Component<InputProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/lib/link/index.d.ts b/lib/link/index.d.ts
new file mode 100644
index 000000000..8ee956424
--- /dev/null
+++ b/lib/link/index.d.ts
@@ -0,0 +1,56 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+
+export interface Iconic {
+	/**
+	 * Value of the icon (See icon component).
+	 */
+	icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
+}
+export interface LinkProps extends Props, Iconic {
+	href: string,
+	/**
+	 * The text string used for the text content of the link.
+	 */
+	label: string,
+	/**
+	 * Sets a count number useful to display in the page how many times was visited for example.
+	 */
+	count?: number,
+}
+export default class Link extends React.Component<LinkProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/lib/list/index.d.ts b/lib/list/index.d.ts
new file mode 100644
index 000000000..01dfb0f31
--- /dev/null
+++ b/lib/list/index.d.ts
@@ -0,0 +1,180 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+export interface Conditional {
+	/**
+	 * If true, component will be disabled
+	 * @default false
+	 */
+	disabled?: boolean
+}
+export interface Clickable {
+	/**
+	 *  Callback called when the button is clicked.
+	 */
+	onClick?: Function
+}
+/**
+ * Properties of components that have values that can be changed (T is the type of the value)
+ */
+export interface Changeable<T> {
+	/**
+	 * Callback called when the picker value is changed.
+	 * @param v Type of the value
+	 */
+	onChange?: (v: T) => void
+}
+
+export interface Iconic {
+	/**
+	 * Value of the icon (See icon component).
+	 */
+	icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
+}
+
+export interface ListProps extends Props {
+	/**
+	 * If true, each element in the list will have a ripple effect on click
+	 * @default false
+	 */
+	ripple?: boolean,
+	/**
+	 * If true, the elements in the list will display a hover effect and a pointer cursor.
+	 * @default false
+	 */
+	selectable?: boolean,
+}
+export class List extends React.Component<ListProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
+export interface ListItemProps extends Props, Conditional, Clickable {
+	/**
+	 * A string URL to specify an avatar in the left side of the item.
+	 */
+	avatar?: string,
+	/**
+	 * Main text of the item. Required.
+	 */
+	caption?: string,
+	/**
+	 * An element that will be displayed as the item. If set, this will override `caption` and `legend`.
+	 */
+	itemContent?: React.ReactElement<any>,
+	/**
+	 * 	A list of elements that are placed on the left side of the item and after the avatar attribute.
+	 */
+	leftActions?: React.ReactElement<any>[],
+	/**
+	 * A string key of a font icon to display an icon in the left side of the item.
+	 */
+	leftIcon?: string,
+	/**
+	 * Secondary text to display under the caption.
+	 */
+	legend?: string,
+	/**
+	 * 	A list of elements that are placed on the right side of the item and after the rightIcon attribute.
+	 */
+	rightActions?: React.ReactElement<any>[],
+	/**
+	 * The same as the leftIcon but in this case the icon is displayed in the right side.
+	 */
+	rightIcon?: string,
+	/**
+	 * If true, the item displays a ripple effect on click. By default it's inherited from the parent element.
+	 * @default false
+	 */
+	ripple?: boolean,
+	/**
+	 * If true, the elements in the list will display a hover effect and a pointer cursor. Inherited from the parent
+	 * @default false
+	 */
+	selectable?: boolean,
+	/**
+	 * In case you want to provide the item as a link, you can pass this property to specify the href.
+	 */
+	to?: string;
+}
+export class ListItem extends React.Component<ListItemProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
+export interface ListCheckboxProps extends Props, Conditional, Changeable<boolean> {
+	/**
+	 * Main text of the item. Required.
+	 */
+	caption?: string,
+	/**
+	 * If true the checkbox appears checked by default.
+	 * @default false
+	 */
+	checked: boolean,
+	/**
+	 * Secondary text to display under the caption.
+	 */
+	legend?: string,
+	/**
+	 * Name for the checkbox input item.
+	 */
+	name?: string,
+	/**
+	 * Callback called when the input element is blurred.
+	 */
+	onBlur?: Function,
+	/**
+	 * Callback called when the input element is focused.
+	 */
+	onFocus?: Function,
+}
+export class ListCheckbox extends React.Component<ListCheckboxProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
+export export interface ListSubHeaderProps extends Props {
+	/**
+	 * List header caption.
+	 */
+	caption: string;
+}
+export class ListSubHeader extends React.Component<ListSubHeaderProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
+export interface ListDividerProps extends Props {
+	/**
+	 * Indicates if the divider should be full width or should leave a space on the left side.
+	 */
+	inset: boolean;
+}
+export class ListDivider extends React.Component<ListDividerProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/lib/menu/index.d.ts b/lib/menu/index.d.ts
new file mode 100644
index 000000000..542895486
--- /dev/null
+++ b/lib/menu/index.d.ts
@@ -0,0 +1,150 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+export interface Conditional {
+	/**
+	 * If true, component will be disabled
+	 * @default false
+	 */
+	disabled?: boolean
+}
+
+export interface Iconic {
+	/**
+	 * Value of the icon (See icon component).
+	 */
+	icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
+}
+export interface MenuProps extends Props {
+	/**
+	 * If true, the menu will be displayed as opened by default.
+	 * @default false
+	 */
+	active?: boolean,
+	/**
+	 * Callback that will be called when the menu is being hidden.
+	 */
+	onHide?: Function,
+	/**
+	 * Callback that will be called when the menu is being shown.
+	 */
+	onShow?: Function,
+	/**
+	 * If true the menu wrapper will show an outline with a soft shadow.
+	 * @default true
+	 */
+	outline?: boolean,
+	/**
+	 * Determine the position of the menu. 
+	 * With static value the menu will be always shown, auto means that the it will decide the opening direction based on the current position. 
+	 * To force a position use top-left, top-right, bottom-left, bottom-right.
+	 * @default static
+	 */
+	position?: string,
+	/**
+	 * If true, the menu items will show a ripple effect on click.
+	 */
+	ripple?: boolean,
+	/**
+	 * If true, the menu will keep a value to highlight the active child item.
+	 */
+	selectable?: boolean,
+	/**
+	 *  Used for selectable menus and indicates the initial value so the child item with this value can be highlighted.
+	 */
+	value?: boolean,
+}
+export class Menu extends React.Component<MenuProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
+export interface IconMenuProps extends Props, Iconic {
+	/**
+	 * If true, the icon will show a ripple when is clicked.
+	 */
+	iconRipple?: boolean,
+	/**
+	 * Transferred to the Menu component.
+	 * @default true
+	 */
+	menuRipple?: boolean,
+	/**
+	 * Callback that will be called when the icon is clicked.
+	 */
+	onClick?: Function,
+	/**
+	 * Callback that will be called when the menu is being hidden.
+	 */
+	onHide?: Function, 
+	/**
+	 * Callback that will be called when the menu is being shown.
+	 */
+	onShow?: Function,
+	/**
+	 * Callback that will be called when a menu item is selected.
+	 */
+	onSelect?: Function,
+	/**
+	 * Determine the position of the menu. This property is transferred to the inner Menu component.
+	 * @default auto
+	 */
+	position?: string,
+	/**
+	 * If true, the menu will keep a value to highlight the active child item. Transferred to the Menu
+	 */
+	selectable?: boolean,
+}
+export class IconMenu extends React.Component<IconMenuProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
+export interface MenuItemProps extends Props, Conditional, Iconic {
+	/**
+	 * The text to include in the menu item.
+	 */
+	caption?: string,
+	/**
+	 * If true, the item will show a ripple effect when it's clicked. Inherited from the parent.
+	 */
+	ripple?: boolean,
+	/**
+	 * Transferred from the Menu component for selectable menus. Indicates if it's the current active option.
+	 */
+	selected?: boolean,
+}
+export class MenuItem extends React.Component<MenuItemProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
+export class MenuDivider extends React.Component<any, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/lib/navigation/index.d.ts b/lib/navigation/index.d.ts
new file mode 100644
index 000000000..a1a3081b2
--- /dev/null
+++ b/lib/navigation/index.d.ts
@@ -0,0 +1,53 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+
+export interface NavigationProps extends Props {
+	/**
+	 * Array of objects that represent buttons so the keys will be transferred as properties to those.
+	 */
+	actions?: Array<ButtonProps>,
+	/**
+	 * Array of objects similar to actions but that will be rendered as <Link/> component definition.
+	 */
+	routes?: Array<LinkProps>,
+	/**
+	 * Type of the navigation, it can be 'vertical' or 'horizontal'.
+	 */
+	type?: string,
+}
+export default class Navigation extends React.Component<NavigationProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/lib/overlay/index.d.ts b/lib/overlay/index.d.ts
new file mode 100644
index 000000000..3da680439
--- /dev/null
+++ b/lib/overlay/index.d.ts
@@ -0,0 +1,49 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+export interface OverlayProps extends Props {
+	active?: boolean;
+	children?: any;
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string;
+	invisible?: boolean;
+	onClick?: Function;
+	onEscKeyDown?: Function
+}
+export default class Overlay extends React.Component<OverlayProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/lib/progress_bar/__test__/index.spec.js b/lib/progress_bar/__test__/index.spec.js
index ec2d796d7..47098ef5b 100644
--- a/lib/progress_bar/__test__/index.spec.js
+++ b/lib/progress_bar/__test__/index.spec.js
@@ -27,7 +27,7 @@ var _testing2 = _interopRequireDefault(_testing);
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 describe('ProgressBar', function () {
-  var progressBar = void 0;
+  var progressBar = undefined;
 
   describe('#calculateRatio', function () {
     before(function () {
@@ -49,11 +49,11 @@ describe('ProgressBar', function () {
   });
 
   describe('#render', function () {
-    var buffer = void 0,
-        value = void 0,
-        wrapper = void 0,
-        circle = void 0,
-        strokeLength = void 0;
+    var buffer = undefined,
+        value = undefined,
+        wrapper = undefined,
+        circle = undefined,
+        strokeLength = undefined;
 
     it('renders the value and buffer bars when it is linear', function () {
       wrapper = _testing2.default.shallowRenderComponent(_ProgressBar.ProgressBar, { theme: _theme2.default }).props.children;
diff --git a/lib/progress_bar/index.d.ts b/lib/progress_bar/index.d.ts
new file mode 100644
index 000000000..fb1494ef8
--- /dev/null
+++ b/lib/progress_bar/index.d.ts
@@ -0,0 +1,69 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+export interface ProgressBarProps extends Props {
+	/**
+	 * Value of a secondary progress bar useful for buffering.
+	 */
+	buffer?: number,
+	/**
+	 * Maximum value permitted.
+	 */
+	max?: number, // 
+	/**
+	 * minimum value permitted.
+	 */
+	min?: number, // 
+	/**
+	 * Mode of the progress bar, it can be determinate or indeterminate.
+	 */
+	mode?: string, // 
+	/**
+	 * If true, the circular progress bar will be changing its color.
+	 */
+	multicolor?: boolean, // 
+	/**
+	 * Type of the progress bar, it can be circular or linear.
+	 * @default linear
+	 */
+	type?: string,
+	/**
+	 * Value of the current progress.
+	 */
+	value?: number,
+}
+export default class ProgressBar extends React.Component<ProgressBarProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/lib/radio/index.d.ts b/lib/radio/index.d.ts
new file mode 100644
index 000000000..9a05cfac5
--- /dev/null
+++ b/lib/radio/index.d.ts
@@ -0,0 +1,95 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+export interface Conditional {
+	/**
+	 * If true, component will be disabled
+	 * @default false
+	 */
+	disabled?: boolean
+}
+/**
+ * Properties of components that have values that can be changed (T is the type of the value)
+ */
+export interface Changeable<T> {
+	/**
+	 * Callback called when the picker value is changed.
+	 * @param v Type of the value
+	 */
+	onChange?: (v: T) => void
+}
+
+export interface RadioGroupProps extends Props, Conditional, Changeable<any> {
+	/**
+	 * Name for the input element group.
+	 */
+	name?: string,
+	/**
+	 * Default value selected in the radio group.
+	 */
+	value?: any,
+}
+export class RadioGroup extends React.Component<RadioGroupProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
+export interface RadioButtonProps extends Props, Conditional {
+	/**
+	 * If true, the input element will be selected by default. Transferred from the parent.
+	 */
+	checked: boolean,
+	/**
+	 * Name for the input element.
+	 */
+	name?: string,
+	/**
+	 * Callback function that will be invoked when the input is blurred.
+	 */
+	onBlur?: Function,
+	/**
+	 * Callback function that will be invoked when the value changes.
+	 */
+	onChange?: Function,
+	/**
+	 * Callback function that will be invoked when the input is focused.
+	 */
+	onFocus?: Function,
+	/**
+	 * Value for the radio button.
+	 */
+	value: any,
+}
+export class RadioButton extends React.Component<RadioButtonProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/lib/slider/__tests__/index.spec.js b/lib/slider/__tests__/index.spec.js
index 92507525b..8abe8c199 100644
--- a/lib/slider/__tests__/index.spec.js
+++ b/lib/slider/__tests__/index.spec.js
@@ -37,10 +37,10 @@ var _theme2 = _interopRequireDefault(_theme);
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 describe('Slider', function () {
-  var slider = void 0,
-      progress = void 0,
-      input = void 0,
-      onChange = void 0;
+  var slider = undefined,
+      progress = undefined,
+      input = undefined,
+      onChange = undefined;
 
   describe('#positionToValue', function () {
     before(function () {
diff --git a/lib/slider/index.d.ts b/lib/slider/index.d.ts
new file mode 100644
index 000000000..6e910ba67
--- /dev/null
+++ b/lib/slider/index.d.ts
@@ -0,0 +1,72 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+export interface SliderProps extends Props {
+	/**
+	 * If true, an input is shown and the user can set the slider from keyboard value.
+	 */
+	editable?: boolean,
+	/**
+	 * Maximum value permitted.
+	 */
+	max?: number,
+	/**
+	 * Minimum value permitted.
+	 */
+	min?: number,
+	/**
+	 * Callback function that will be invoked when the slider value changes.
+	 */
+	onChange?: Function,
+	/**
+	 * If true, a pin with numeric value label is shown when the slider thumb is pressed. Use for settings for which users need to know the exact value of the setting.
+	 */
+	pinned?: boolean,
+	/**
+	 * If true, the slider thumb snaps to tick marks evenly spaced based on the step property value.
+	 */
+	snaps?: boolean,
+	/**
+	 * Amount to vary the value when the knob is moved or increase/decrease is called.
+	 */
+	step?: number,
+	/**
+	 * Current value of the slider.
+	 */
+	value: number,
+}
+export default class Slider extends React.Component<SliderProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/lib/snackbar/index.d.ts b/lib/snackbar/index.d.ts
new file mode 100644
index 000000000..7006c231c
--- /dev/null
+++ b/lib/snackbar/index.d.ts
@@ -0,0 +1,97 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+export interface Iconic {
+	/**
+	 * Value of the icon (See icon component).
+	 */
+	icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
+}
+export interface Modal {
+	/**
+	 * If true, the dialog will be active.
+	 */
+	active: boolean,
+	/**
+	 * Callback called when the ESC key is pressed with the overlay active.
+	 */
+	onEscKeyDown?: Function,
+	/**
+	 * Callback to be invoked when the dialog overlay is clicked.
+	 */
+	onOverlayClick?: Function,
+	/**
+	 * Callback called when the mouse button is pressed on the overlay.
+	 */
+	onOverlayMouseDown?: Function,
+	/**
+	 * Callback called when the mouse is moving over the overlay.
+	 */
+	onOverlayMouseMove?: Function,
+	/**
+	 * Callback called when the mouse button is released over the overlay.
+	 */
+	onOverlayMouseUp?: Function,
+}
+
+export interface SnackbarProps extends Props, Modal, Iconic {
+	/**
+	 * For the action component inside the Snackbar.
+	 */
+	action?: string,
+	/**
+	 * Text to display in the content.
+	 */
+	label?: string,
+	/**
+	 * Callback function that will be called when the button action is clicked.
+	 */
+	onClick?: Function,
+	/**
+	 * Callback function when finish the set timeout.
+	 */
+	onTimeout?: Function, 
+	/**
+	 * amount of time after the Snackbar will be automatically hidden.
+	 */
+	timeout?: number,
+	/**
+	 * Indicates the action type. Can be 'accept', 'warning' or 'cancel'
+	 */
+	type?: string,
+}
+export class Snackbar extends React.Component<SnackbarProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/lib/switch/index.d.ts b/lib/switch/index.d.ts
new file mode 100644
index 000000000..a072f82cf
--- /dev/null
+++ b/lib/switch/index.d.ts
@@ -0,0 +1,75 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+export interface Conditional {
+	/**
+	 * If true, component will be disabled
+	 * @default false
+	 */
+	disabled?: boolean
+}
+export interface SwitchProps extends Props, Conditional {
+	/**
+	 * If true, the switch will be enabled.
+	 */
+	checked: boolean,
+	/**
+	 * If true, component will be disabled.
+	 */
+	disabled?: boolean,
+	/**
+	 * The text string to use for the floating label element.
+	 */
+	label?: string,
+	/**
+	 * The text string used as name of the input.
+	 */
+	name?: string,
+	/**
+	 * Callback function that is fired when when the switch is blurred.
+	 */
+	onBlur?: Function,
+	/**
+	 * Callback function that is fired when the components's value changes.
+	 */
+	onChange?: Function,
+	/**
+	 * Callback function fire when the switch is focused.
+	 */
+	onFocus?: Function,
+}
+export default class Switch extends React.Component<SwitchProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/lib/table/TableHead.js b/lib/table/TableHead.js
index dcc71513b..b4ef56802 100644
--- a/lib/table/TableHead.js
+++ b/lib/table/TableHead.js
@@ -21,7 +21,7 @@ var factory = function factory(Checkbox) {
     var selected = _ref.selected;
     var theme = _ref.theme;
 
-    var selectCell = void 0;
+    var selectCell = undefined;
     var contentCells = Object.keys(model).map(function (key) {
       var name = model[key].title || key;
       return _react2.default.createElement(
diff --git a/lib/table/index.d.ts b/lib/table/index.d.ts
new file mode 100644
index 000000000..e2dc73ff9
--- /dev/null
+++ b/lib/table/index.d.ts
@@ -0,0 +1,64 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+export interface TableProps extends Props {
+	/**
+	 * If true, component will show a heading using model field names.
+	 */
+	heading?: boolean,
+	/**
+	 * Object describing the data model that represents each object in the source.
+	 */
+	model?: { [key: string]: string },
+	/**
+	 * Callback function that is fired when an item in a row changes. If set, rows are editable.
+	 */
+	onChange?: Function,
+	/**
+	 * Callback function invoked when the row selection changes.
+	 */
+	onSelect?: Function,
+	/**
+	 * Array of indexes of the items in the source that should appear as selected.
+	 */
+	selected?: Array<number>,
+	/**
+	 * Array of objects representing each item to show.
+	 */
+	source?: Array<{ [key: string]: any }>,
+}
+export default class Table extends React.Component<TableProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/lib/tabs/__tests__/index.spec.js b/lib/tabs/__tests__/index.spec.js
index 9f6ffa9cf..95ba19129 100644
--- a/lib/tabs/__tests__/index.spec.js
+++ b/lib/tabs/__tests__/index.spec.js
@@ -39,8 +39,8 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
 describe('Tabs', function () {
-  var tabContents = void 0,
-      composition = void 0;
+  var tabContents = undefined,
+      composition = undefined;
 
   it('only renders the current tab', function () {
     var Composition = function (_Component) {
diff --git a/lib/tabs/index.d.ts b/lib/tabs/index.d.ts
new file mode 100644
index 000000000..39234948f
--- /dev/null
+++ b/lib/tabs/index.d.ts
@@ -0,0 +1,84 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+export interface Conditional {
+	/**
+	 * If true, component will be disabled
+	 * @default false
+	 */
+	disabled?: boolean
+}
+/**
+ * Properties of components that have values that can be changed (T is the type of the value)
+ */
+export interface Changeable<T> {
+	/**
+	 * Callback called when the picker value is changed.
+	 * @param v Type of the value
+	 */
+	onChange?: (v: T) => void
+}
+export interface TabsProps extends Props, Changeable<number> {
+	/**
+	 * Current
+	 */
+	index: number,
+}
+export class Tabs extends React.Component<TabsProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
+export interface TabProps extends Props, Conditional {
+	/**
+	 * If true, the current component is visible.
+	 * @default false
+	 */
+	active?: boolean,
+	/**
+	 * If true, the current component is not visible.
+	 * @default false
+	 */
+	hidden?: boolean,
+	/**
+	 * Label text for navigation header
+	 */
+	label?: string,
+	/**
+	 * Callback function that is fired when the tab is activated.
+	 */
+	onActive?: Function,
+}
+export class Tab extends React.Component<TabProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/lib/time_picker/TimePicker.js b/lib/time_picker/TimePicker.js
index d93e13a9d..516ac09a2 100644
--- a/lib/time_picker/TimePicker.js
+++ b/lib/time_picker/TimePicker.js
@@ -93,6 +93,7 @@ var factory = function factory(TimePickerDialog, Input) {
           _react2.default.createElement(Input, {
             className: (0, _classnames3.default)(theme.input, _defineProperty({}, inputClassName, inputClassName)),
             error: this.props.error,
+            name: this.props.name,
             label: this.props.label,
             onMouseDown: this.handleInputMouseDown,
             readOnly: true,
@@ -102,6 +103,7 @@ var factory = function factory(TimePickerDialog, Input) {
           _react2.default.createElement(TimePickerDialog, {
             active: this.state.active,
             className: this.props.className,
+            name: this.props.name,
             format: format,
             onDismiss: this.handleDismiss,
             onSelect: this.handleSelect,
@@ -120,6 +122,7 @@ var factory = function factory(TimePickerDialog, Input) {
     error: _react.PropTypes.string,
     format: _react.PropTypes.oneOf(['24hr', 'ampm']),
     inputClassName: _react.PropTypes.string,
+    name: _react.PropTypes.string,
     label: _react.PropTypes.string,
     onChange: _react.PropTypes.func,
     theme: _react.PropTypes.shape({
diff --git a/lib/time_picker/TimePickerDialog.js b/lib/time_picker/TimePickerDialog.js
index 84bcf4792..274353333 100644
--- a/lib/time_picker/TimePickerDialog.js
+++ b/lib/time_picker/TimePickerDialog.js
@@ -58,7 +58,7 @@ var factory = function factory(Dialog) {
         if (_this.state.display === 'hours') _this.setState({ display: 'minutes' });
       }, _this.switchDisplay = function (display) {
         _this.setState({ display: display });
-      }, _this.actions = [{ label: 'Cancel', className: _this.props.theme.button, onClick: _this.props.onDismiss }, { label: 'Ok', className: _this.props.theme.button, onClick: _this.handleSelect }], _temp), _possibleConstructorReturn(_this, _ret);
+      }, _this.actions = [{ label: 'Cancel', className: _this.props.theme.button, onClick: _this.props.onDismiss }, { label: 'Ok', className: _this.props.theme.button, name: _this.props.name, onClick: _this.handleSelect }], _temp), _possibleConstructorReturn(_this, _ret);
     }
 
     _createClass(TimePickerDialog, [{
@@ -150,6 +150,7 @@ var factory = function factory(Dialog) {
     active: _react.PropTypes.bool,
     className: _react.PropTypes.string,
     format: _react.PropTypes.oneOf(['24hr', 'ampm']),
+    name: _react.PropTypes.string,
     onDismiss: _react.PropTypes.func,
     onSelect: _react.PropTypes.func,
     theme: _react.PropTypes.shape({
diff --git a/lib/time_picker/index.d.ts b/lib/time_picker/index.d.ts
new file mode 100644
index 000000000..ee141895a
--- /dev/null
+++ b/lib/time_picker/index.d.ts
@@ -0,0 +1,59 @@
+import * as React from 'react';
+export interface Props {
+	/**
+	 * Sets a CSS class on the component.
+	 */
+	className?: string,
+	id?: string;
+	/**
+	 * A key used to uniquely identify the element within an Array
+	 */
+	key?: string,
+	/**
+	 * Inline style
+	 */
+	style?: any,
+	/**
+	 * Tooltip text
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltip?: string,
+	/**
+	 * Amount of time in miliseconds spent before the tooltip is visible.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipDelay?: number,
+	/**
+	 * If true, the Tooltip hides after a click in the host component.
+	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
+	 * @default true
+	 * @see http://react-toolbox.com/#/components/tooltip
+	 */
+	tooltipHideOnClick?: boolean,
+}
+/**
+ * Properties of components that have values that can be changed (T is the type of the value)
+ */
+export interface Changeable<T> {
+	/**
+	 * Callback called when the picker value is changed.
+	 * @param v Type of the value
+	 */
+	onChange?: (v: T) => void
+}
+export interface TimePickerProps extends Props, Changeable<Date> {
+	/**
+	 * Format to display the clock. It can be 24hr or ampm.
+	 * @default 24hr
+	 */
+	format?: string,
+	/**
+	 * Datetime object with currrently selected time
+	 */
+	value?: Date,
+}
+export default class TimePicker extends React.Component<TimePickerProps, {}> {
+	render(): React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/lib/tooltip/index.d.ts b/lib/tooltip/index.d.ts
new file mode 100644
index 000000000..867412c2d
--- /dev/null
+++ b/lib/tooltip/index.d.ts
@@ -0,0 +1,10 @@
+import * as React from 'react';
+export class TooltipComponent<P, S> extends React.Component<P, S> {
+	getDecoratedComponentInstance(): React.Component<P, S>;
+}
+
+export interface TooltipComponentClass<P> extends React.ComponentClass<P> {
+	new (props?: P, context?: any): TooltipComponent<P, any>;
+}
+
+export default function Tooltip<P>(componentClass: React.ComponentClass<P>): TooltipComponentClass<P>;
\ No newline at end of file

From deb36306ce6bed850243cc4cf3f35c7e465a73fc Mon Sep 17 00:00:00 2001
From: Robert Parker <robert@flavorus.com>
Date: Tue, 7 Jun 2016 15:14:25 -0700
Subject: [PATCH 0625/1024] Update TypeScript definition section of README.md

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 91413672f..47a8dd29c 100644
--- a/README.md
+++ b/README.md
@@ -193,9 +193,9 @@ For now we have a [repository example](https://github.com/react-toolbox/react-to
 
 ## TypeScript
 
-A TypeScript definition file `react-toolbox.d.ts` is available. It is referenced in `package.json` and should be picked up by the TypeScript compiler when importing from the npm package.
+TypeScript external module definition files are included, and should not require any manual steps to utilize. They will be picked up by the TypeScript compiler when importing from the npm package.
 
-Note that to comply with the typings requirement, a triple-slash reference to `react.d.ts` is *NOT included*. You will need to reference [react.d.ts](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/react/react.d.ts) somewhere in your project.
+Note that to comply with the official recommendation for npm typings, a triple-slash reference to `react.d.ts` is *NOT included*. You will need to reference [react.d.ts](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/react/react.d.ts) somewhere in your project.
 
 ## Authors and Contributors
 

From 68926f8289b4a2e1bea634aa9136c045021c0ccd Mon Sep 17 00:00:00 2001
From: Robert Parker <robert@flavorus.com>
Date: Tue, 7 Jun 2016 15:41:51 -0700
Subject: [PATCH 0626/1024] Fix a few incorrect exports in typings and build
 with updated Babel

---
 components/card/index.d.ts              |  65 ++++++++++++++
 components/dialog/index.d.ts            |  74 ++++++++++++++++
 components/dropdown/index.d.ts          |   5 +-
 components/list/index.d.ts              |   2 +-
 components/radio/index.d.ts             |   6 +-
 components/snackbar/index.d.ts          |   2 +-
 lib/card/index.d.ts                     |  65 ++++++++++++++
 lib/dialog/index.d.ts                   |  74 ++++++++++++++++
 lib/dropdown/index.d.ts                 |   5 +-
 lib/index.js                            | 112 ++++++++----------------
 lib/list/index.d.ts                     |   2 +-
 lib/progress_bar/__test__/index.spec.js |  12 +--
 lib/radio/index.d.ts                    |   6 +-
 lib/slider/__tests__/index.spec.js      |   8 +-
 lib/snackbar/index.d.ts                 |   2 +-
 lib/table/TableHead.js                  |   2 +-
 lib/tabs/__tests__/index.spec.js        |   4 +-
 17 files changed, 348 insertions(+), 98 deletions(-)

diff --git a/components/card/index.d.ts b/components/card/index.d.ts
index 3296e4565..dc4f3a4b7 100644
--- a/components/card/index.d.ts
+++ b/components/card/index.d.ts
@@ -33,6 +33,21 @@ export interface Props {
 	 */
 	tooltipHideOnClick?: boolean,
 }
+export interface Iconic {
+	/**
+	 * Value of the icon (See icon component).
+	 */
+	icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
+}
+
+export interface Conditional {
+	/**
+	 * If true, component will be disabled
+	 * @default false
+	 */
+	disabled?: boolean
+}
+
 /**
  * Properties of components that can be clicked
  */
@@ -42,6 +57,56 @@ export interface Clickable {
 	 */
 	onClick?: Function
 }
+export interface ButtonProps extends Props, Clickable, Conditional, Iconic {
+	/**
+	 * Indicates if the button should have accent color.
+	 * @default false
+	 */
+	accent?: boolean,
+	/**
+	 * If true, the button will have a flat look.
+	 * @default false
+	 */
+	flat?: boolean,
+	/**
+	 * If true, the button will have a floating look.
+	 * @default false
+	 */
+	floating?: boolean,
+	/**
+	 * If specified, the button will be rendered as an <a>
+	 */
+	href?: string,
+	/**
+	 * The text string to use for the name of the button.
+	 */
+	label?: string,
+	/**
+	 * If true, component will be disabled and show a loading animation.
+	 * @default false
+	 */
+	loading?: boolean,
+	/**
+	 * To be used with floating button. If true the button will be smaller. 
+	 * @default false
+	 */
+	mini?: boolean,
+	/**
+	 * Indicates if the button should have primary color.
+	 * @default false
+	 */
+	primary?: boolean,
+	/**
+	 * If true, the button will have a raised look.
+	 * @default false
+	 */
+	raised?: boolean,
+	/**
+	 * If true, component will have a ripple effect on click.
+	 * @default true
+	 */
+	ripple?: boolean,
+}
 export interface CardProps extends Props, Clickable {
 	/**
 	 * Child components, usually Card subcomponents.
diff --git a/components/dialog/index.d.ts b/components/dialog/index.d.ts
index 8b547b683..638714389 100644
--- a/components/dialog/index.d.ts
+++ b/components/dialog/index.d.ts
@@ -33,6 +33,30 @@ export interface Props {
 	 */
 	tooltipHideOnClick?: boolean,
 }
+export interface Iconic {
+	/**
+	 * Value of the icon (See icon component).
+	 */
+	icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
+}
+
+export interface Conditional {
+	/**
+	 * If true, component will be disabled
+	 * @default false
+	 */
+	disabled?: boolean
+}
+
+/**
+ * Properties of components that can be clicked
+ */
+export interface Clickable {
+	/**
+	 *  Callback called when the button is clicked.
+	 */
+	onClick?: Function
+}
 /**
  * Properties of modal components (Drawer, Dialog)
  */
@@ -62,6 +86,56 @@ export interface Modal {
 	 */
 	onOverlayMouseUp?: Function,
 }
+export interface ButtonProps extends Props, Clickable, Conditional, Iconic {
+	/**
+	 * Indicates if the button should have accent color.
+	 * @default false
+	 */
+	accent?: boolean,
+	/**
+	 * If true, the button will have a flat look.
+	 * @default false
+	 */
+	flat?: boolean,
+	/**
+	 * If true, the button will have a floating look.
+	 * @default false
+	 */
+	floating?: boolean,
+	/**
+	 * If specified, the button will be rendered as an <a>
+	 */
+	href?: string,
+	/**
+	 * The text string to use for the name of the button.
+	 */
+	label?: string,
+	/**
+	 * If true, component will be disabled and show a loading animation.
+	 * @default false
+	 */
+	loading?: boolean,
+	/**
+	 * To be used with floating button. If true the button will be smaller. 
+	 * @default false
+	 */
+	mini?: boolean,
+	/**
+	 * Indicates if the button should have primary color.
+	 * @default false
+	 */
+	primary?: boolean,
+	/**
+	 * If true, the button will have a raised look.
+	 * @default false
+	 */
+	raised?: boolean,
+	/**
+	 * If true, component will have a ripple effect on click.
+	 * @default true
+	 */
+	ripple?: boolean,
+}
 export interface DialogProps extends Props, Modal {
 	/**
 	 * An array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons.
diff --git a/components/dropdown/index.d.ts b/components/dropdown/index.d.ts
index 46244038e..e70328c94 100644
--- a/components/dropdown/index.d.ts
+++ b/components/dropdown/index.d.ts
@@ -40,7 +40,10 @@ export interface Conditional {
 	 */
 	disabled?: boolean
 }
-
+export interface Option<T> {
+	label: string,
+	value: T,
+}
 /**
  * Properties of components that have values that can be changed (T is the type of the value)
  */
diff --git a/components/list/index.d.ts b/components/list/index.d.ts
index 01dfb0f31..30501554d 100644
--- a/components/list/index.d.ts
+++ b/components/list/index.d.ts
@@ -160,7 +160,7 @@ export interface ListCheckboxProps extends Props, Conditional, Changeable<boolea
 export class ListCheckbox extends React.Component<ListCheckboxProps, {}> {
 	render(): React.DOMElement<any, any>;
 }
-export export interface ListSubHeaderProps extends Props {
+export interface ListSubHeaderProps extends Props {
 	/**
 	 * List header caption.
 	 */
diff --git a/components/radio/index.d.ts b/components/radio/index.d.ts
index 9a05cfac5..9df815e4a 100644
--- a/components/radio/index.d.ts
+++ b/components/radio/index.d.ts
@@ -68,7 +68,11 @@ export interface RadioButtonProps extends Props, Conditional {
 	/**
 	 * If true, the input element will be selected by default. Transferred from the parent.
 	 */
-	checked: boolean,
+	checked?: boolean,
+	/**
+	 * 	Label for the radio button.
+	 */
+	label?: string;
 	/**
 	 * Name for the input element.
 	 */
diff --git a/components/snackbar/index.d.ts b/components/snackbar/index.d.ts
index 7006c231c..6530072fa 100644
--- a/components/snackbar/index.d.ts
+++ b/components/snackbar/index.d.ts
@@ -92,6 +92,6 @@ export interface SnackbarProps extends Props, Modal, Iconic {
 	 */
 	type?: string,
 }
-export class Snackbar extends React.Component<SnackbarProps, {}> {
+export default class Snackbar extends React.Component<SnackbarProps, {}> {
 	render(): React.DOMElement<any, any>;
 }
\ No newline at end of file
diff --git a/lib/card/index.d.ts b/lib/card/index.d.ts
index 3296e4565..dc4f3a4b7 100644
--- a/lib/card/index.d.ts
+++ b/lib/card/index.d.ts
@@ -33,6 +33,21 @@ export interface Props {
 	 */
 	tooltipHideOnClick?: boolean,
 }
+export interface Iconic {
+	/**
+	 * Value of the icon (See icon component).
+	 */
+	icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
+}
+
+export interface Conditional {
+	/**
+	 * If true, component will be disabled
+	 * @default false
+	 */
+	disabled?: boolean
+}
+
 /**
  * Properties of components that can be clicked
  */
@@ -42,6 +57,56 @@ export interface Clickable {
 	 */
 	onClick?: Function
 }
+export interface ButtonProps extends Props, Clickable, Conditional, Iconic {
+	/**
+	 * Indicates if the button should have accent color.
+	 * @default false
+	 */
+	accent?: boolean,
+	/**
+	 * If true, the button will have a flat look.
+	 * @default false
+	 */
+	flat?: boolean,
+	/**
+	 * If true, the button will have a floating look.
+	 * @default false
+	 */
+	floating?: boolean,
+	/**
+	 * If specified, the button will be rendered as an <a>
+	 */
+	href?: string,
+	/**
+	 * The text string to use for the name of the button.
+	 */
+	label?: string,
+	/**
+	 * If true, component will be disabled and show a loading animation.
+	 * @default false
+	 */
+	loading?: boolean,
+	/**
+	 * To be used with floating button. If true the button will be smaller. 
+	 * @default false
+	 */
+	mini?: boolean,
+	/**
+	 * Indicates if the button should have primary color.
+	 * @default false
+	 */
+	primary?: boolean,
+	/**
+	 * If true, the button will have a raised look.
+	 * @default false
+	 */
+	raised?: boolean,
+	/**
+	 * If true, component will have a ripple effect on click.
+	 * @default true
+	 */
+	ripple?: boolean,
+}
 export interface CardProps extends Props, Clickable {
 	/**
 	 * Child components, usually Card subcomponents.
diff --git a/lib/dialog/index.d.ts b/lib/dialog/index.d.ts
index 8b547b683..638714389 100644
--- a/lib/dialog/index.d.ts
+++ b/lib/dialog/index.d.ts
@@ -33,6 +33,30 @@ export interface Props {
 	 */
 	tooltipHideOnClick?: boolean,
 }
+export interface Iconic {
+	/**
+	 * Value of the icon (See icon component).
+	 */
+	icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
+}
+
+export interface Conditional {
+	/**
+	 * If true, component will be disabled
+	 * @default false
+	 */
+	disabled?: boolean
+}
+
+/**
+ * Properties of components that can be clicked
+ */
+export interface Clickable {
+	/**
+	 *  Callback called when the button is clicked.
+	 */
+	onClick?: Function
+}
 /**
  * Properties of modal components (Drawer, Dialog)
  */
@@ -62,6 +86,56 @@ export interface Modal {
 	 */
 	onOverlayMouseUp?: Function,
 }
+export interface ButtonProps extends Props, Clickable, Conditional, Iconic {
+	/**
+	 * Indicates if the button should have accent color.
+	 * @default false
+	 */
+	accent?: boolean,
+	/**
+	 * If true, the button will have a flat look.
+	 * @default false
+	 */
+	flat?: boolean,
+	/**
+	 * If true, the button will have a floating look.
+	 * @default false
+	 */
+	floating?: boolean,
+	/**
+	 * If specified, the button will be rendered as an <a>
+	 */
+	href?: string,
+	/**
+	 * The text string to use for the name of the button.
+	 */
+	label?: string,
+	/**
+	 * If true, component will be disabled and show a loading animation.
+	 * @default false
+	 */
+	loading?: boolean,
+	/**
+	 * To be used with floating button. If true the button will be smaller. 
+	 * @default false
+	 */
+	mini?: boolean,
+	/**
+	 * Indicates if the button should have primary color.
+	 * @default false
+	 */
+	primary?: boolean,
+	/**
+	 * If true, the button will have a raised look.
+	 * @default false
+	 */
+	raised?: boolean,
+	/**
+	 * If true, component will have a ripple effect on click.
+	 * @default true
+	 */
+	ripple?: boolean,
+}
 export interface DialogProps extends Props, Modal {
 	/**
 	 * An array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons.
diff --git a/lib/dropdown/index.d.ts b/lib/dropdown/index.d.ts
index 46244038e..e70328c94 100644
--- a/lib/dropdown/index.d.ts
+++ b/lib/dropdown/index.d.ts
@@ -40,7 +40,10 @@ export interface Conditional {
 	 */
 	disabled?: boolean
 }
-
+export interface Option<T> {
+	label: string,
+	value: T,
+}
 /**
  * Properties of components that have values that can be changed (T is the type of the value)
  */
diff --git a/lib/index.js b/lib/index.js
index 32e39abed..87f0e6b4b 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -7,129 +7,87 @@ exports.TimePicker = exports.Tooltip = exports.Table = exports.Switch = exports.
 
 var _button = require('./button');
 
-var _loop = function _loop(_key8) {
-  if (_key8 === "default") return 'continue';
-  Object.defineProperty(exports, _key8, {
+Object.keys(_button).forEach(function (key) {
+  if (key === "default") return;
+  Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _button[_key8];
+      return _button[key];
     }
   });
-};
-
-for (var _key8 in _button) {
-  var _ret = _loop(_key8);
-
-  if (_ret === 'continue') continue;
-}
+});
 
 var _card = require('./card');
 
-var _loop2 = function _loop2(_key9) {
-  if (_key9 === "default") return 'continue';
-  Object.defineProperty(exports, _key9, {
+Object.keys(_card).forEach(function (key) {
+  if (key === "default") return;
+  Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _card[_key9];
+      return _card[key];
     }
   });
-};
-
-for (var _key9 in _card) {
-  var _ret2 = _loop2(_key9);
-
-  if (_ret2 === 'continue') continue;
-}
+});
 
 var _layout = require('./layout');
 
-var _loop3 = function _loop3(_key10) {
-  if (_key10 === "default") return 'continue';
-  Object.defineProperty(exports, _key10, {
+Object.keys(_layout).forEach(function (key) {
+  if (key === "default") return;
+  Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _layout[_key10];
+      return _layout[key];
     }
   });
-};
-
-for (var _key10 in _layout) {
-  var _ret3 = _loop3(_key10);
-
-  if (_ret3 === 'continue') continue;
-}
+});
 
 var _list = require('./list');
 
-var _loop4 = function _loop4(_key11) {
-  if (_key11 === "default") return 'continue';
-  Object.defineProperty(exports, _key11, {
+Object.keys(_list).forEach(function (key) {
+  if (key === "default") return;
+  Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _list[_key11];
+      return _list[key];
     }
   });
-};
-
-for (var _key11 in _list) {
-  var _ret4 = _loop4(_key11);
-
-  if (_ret4 === 'continue') continue;
-}
+});
 
 var _menu = require('./menu');
 
-var _loop5 = function _loop5(_key12) {
-  if (_key12 === "default") return 'continue';
-  Object.defineProperty(exports, _key12, {
+Object.keys(_menu).forEach(function (key) {
+  if (key === "default") return;
+  Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _menu[_key12];
+      return _menu[key];
     }
   });
-};
-
-for (var _key12 in _menu) {
-  var _ret5 = _loop5(_key12);
-
-  if (_ret5 === 'continue') continue;
-}
+});
 
 var _radio = require('./radio');
 
-var _loop6 = function _loop6(_key13) {
-  if (_key13 === "default") return 'continue';
-  Object.defineProperty(exports, _key13, {
+Object.keys(_radio).forEach(function (key) {
+  if (key === "default") return;
+  Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _radio[_key13];
+      return _radio[key];
     }
   });
-};
-
-for (var _key13 in _radio) {
-  var _ret6 = _loop6(_key13);
-
-  if (_ret6 === 'continue') continue;
-}
+});
 
 var _tabs = require('./tabs');
 
-var _loop7 = function _loop7(_key14) {
-  if (_key14 === "default") return 'continue';
-  Object.defineProperty(exports, _key14, {
+Object.keys(_tabs).forEach(function (key) {
+  if (key === "default") return;
+  Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _tabs[_key14];
+      return _tabs[key];
     }
   });
-};
-
-for (var _key14 in _tabs) {
-  var _ret7 = _loop7(_key14);
-
-  if (_ret7 === 'continue') continue;
-}
+});
 
 require('./utils/polyfills');
 
diff --git a/lib/list/index.d.ts b/lib/list/index.d.ts
index 01dfb0f31..30501554d 100644
--- a/lib/list/index.d.ts
+++ b/lib/list/index.d.ts
@@ -160,7 +160,7 @@ export interface ListCheckboxProps extends Props, Conditional, Changeable<boolea
 export class ListCheckbox extends React.Component<ListCheckboxProps, {}> {
 	render(): React.DOMElement<any, any>;
 }
-export export interface ListSubHeaderProps extends Props {
+export interface ListSubHeaderProps extends Props {
 	/**
 	 * List header caption.
 	 */
diff --git a/lib/progress_bar/__test__/index.spec.js b/lib/progress_bar/__test__/index.spec.js
index 47098ef5b..ec2d796d7 100644
--- a/lib/progress_bar/__test__/index.spec.js
+++ b/lib/progress_bar/__test__/index.spec.js
@@ -27,7 +27,7 @@ var _testing2 = _interopRequireDefault(_testing);
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 describe('ProgressBar', function () {
-  var progressBar = undefined;
+  var progressBar = void 0;
 
   describe('#calculateRatio', function () {
     before(function () {
@@ -49,11 +49,11 @@ describe('ProgressBar', function () {
   });
 
   describe('#render', function () {
-    var buffer = undefined,
-        value = undefined,
-        wrapper = undefined,
-        circle = undefined,
-        strokeLength = undefined;
+    var buffer = void 0,
+        value = void 0,
+        wrapper = void 0,
+        circle = void 0,
+        strokeLength = void 0;
 
     it('renders the value and buffer bars when it is linear', function () {
       wrapper = _testing2.default.shallowRenderComponent(_ProgressBar.ProgressBar, { theme: _theme2.default }).props.children;
diff --git a/lib/radio/index.d.ts b/lib/radio/index.d.ts
index 9a05cfac5..9df815e4a 100644
--- a/lib/radio/index.d.ts
+++ b/lib/radio/index.d.ts
@@ -68,7 +68,11 @@ export interface RadioButtonProps extends Props, Conditional {
 	/**
 	 * If true, the input element will be selected by default. Transferred from the parent.
 	 */
-	checked: boolean,
+	checked?: boolean,
+	/**
+	 * 	Label for the radio button.
+	 */
+	label?: string;
 	/**
 	 * Name for the input element.
 	 */
diff --git a/lib/slider/__tests__/index.spec.js b/lib/slider/__tests__/index.spec.js
index 8abe8c199..92507525b 100644
--- a/lib/slider/__tests__/index.spec.js
+++ b/lib/slider/__tests__/index.spec.js
@@ -37,10 +37,10 @@ var _theme2 = _interopRequireDefault(_theme);
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 describe('Slider', function () {
-  var slider = undefined,
-      progress = undefined,
-      input = undefined,
-      onChange = undefined;
+  var slider = void 0,
+      progress = void 0,
+      input = void 0,
+      onChange = void 0;
 
   describe('#positionToValue', function () {
     before(function () {
diff --git a/lib/snackbar/index.d.ts b/lib/snackbar/index.d.ts
index 7006c231c..6530072fa 100644
--- a/lib/snackbar/index.d.ts
+++ b/lib/snackbar/index.d.ts
@@ -92,6 +92,6 @@ export interface SnackbarProps extends Props, Modal, Iconic {
 	 */
 	type?: string,
 }
-export class Snackbar extends React.Component<SnackbarProps, {}> {
+export default class Snackbar extends React.Component<SnackbarProps, {}> {
 	render(): React.DOMElement<any, any>;
 }
\ No newline at end of file
diff --git a/lib/table/TableHead.js b/lib/table/TableHead.js
index b4ef56802..dcc71513b 100644
--- a/lib/table/TableHead.js
+++ b/lib/table/TableHead.js
@@ -21,7 +21,7 @@ var factory = function factory(Checkbox) {
     var selected = _ref.selected;
     var theme = _ref.theme;
 
-    var selectCell = undefined;
+    var selectCell = void 0;
     var contentCells = Object.keys(model).map(function (key) {
       var name = model[key].title || key;
       return _react2.default.createElement(
diff --git a/lib/tabs/__tests__/index.spec.js b/lib/tabs/__tests__/index.spec.js
index 95ba19129..9f6ffa9cf 100644
--- a/lib/tabs/__tests__/index.spec.js
+++ b/lib/tabs/__tests__/index.spec.js
@@ -39,8 +39,8 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
 describe('Tabs', function () {
-  var tabContents = undefined,
-      composition = undefined;
+  var tabContents = void 0,
+      composition = void 0;
 
   it('only renders the current tab', function () {
     var Composition = function (_Component) {

From 56fe26eb86666e0305a9c365df7890b881230db8 Mon Sep 17 00:00:00 2001
From: Gregory Benner <gregbenner1@gmail.com>
Date: Wed, 8 Jun 2016 14:43:31 -0400
Subject: [PATCH 0627/1024] only apply transition to transform instead of all

---
 components/snackbar/theme.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/snackbar/theme.scss b/components/snackbar/theme.scss
index e9e7071ac..5efc7aaeb 100644
--- a/components/snackbar/theme.scss
+++ b/components/snackbar/theme.scss
@@ -17,7 +17,7 @@
   color: $snackbar-color;
   background-color: $snackbar-background-color;
   border-radius: $snackbar-border-radius;
-  transition: all $animation-duration $animation-curve-default $animation-duration;
+  transition: transform $animation-duration $animation-curve-default $animation-duration;
   &.accept .button {
     color: $snackbar-color-accept;
   }

From 7134c645e0b6bdd1618386cc49c12840b188e59d Mon Sep 17 00:00:00 2001
From: Gregory Benner <gregbenner1@gmail.com>
Date: Wed, 8 Jun 2016 15:26:33 -0400
Subject: [PATCH 0628/1024] change .overlay to .backdrop

---
 components/overlay/theme.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/overlay/theme.scss b/components/overlay/theme.scss
index 058bb466b..e740884ea 100644
--- a/components/overlay/theme.scss
+++ b/components/overlay/theme.scss
@@ -16,7 +16,7 @@
   align-items: center;
   justify-content: center;
   pointer-events: none;
-  &.invisible > *:not(.overlay) {
+  &.invisible > *:not(.backdrop) {
     pointer-events: all;
   }
 }

From 9ed52232e8e504a36ed44a2ef300672d0490c3be Mon Sep 17 00:00:00 2001
From: Gregory Benner <gregbenner1@gmail.com>
Date: Wed, 8 Jun 2016 15:31:12 -0400
Subject: [PATCH 0629/1024] Revert "only apply transition to transform instead
 of all"

This reverts commit 56fe26eb86666e0305a9c365df7890b881230db8.
---
 components/snackbar/theme.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/snackbar/theme.scss b/components/snackbar/theme.scss
index 5efc7aaeb..e9e7071ac 100644
--- a/components/snackbar/theme.scss
+++ b/components/snackbar/theme.scss
@@ -17,7 +17,7 @@
   color: $snackbar-color;
   background-color: $snackbar-background-color;
   border-radius: $snackbar-border-radius;
-  transition: transform $animation-duration $animation-curve-default $animation-duration;
+  transition: all $animation-duration $animation-curve-default $animation-duration;
   &.accept .button {
     color: $snackbar-color-accept;
   }

From ec94e5a97a730b027a0ec8f8f665e88574dd9ad9 Mon Sep 17 00:00:00 2001
From: Olivier Louvignes <olivier@mg-crea.com>
Date: Thu, 9 Jun 2016 19:21:00 +0200
Subject: [PATCH 0630/1024] feat(dropdown): add support for name prop

---
 components/dropdown/Dropdown.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/components/dropdown/Dropdown.js b/components/dropdown/Dropdown.js
index 086ffc541..5ce67c6f6 100644
--- a/components/dropdown/Dropdown.js
+++ b/components/dropdown/Dropdown.js
@@ -15,6 +15,7 @@ const factory = (Input) => {
       disabled: PropTypes.bool,
       error: PropTypes.string,
       label: PropTypes.string,
+      name: PropTypes.string,
       onBlur: PropTypes.func,
       onChange: PropTypes.func,
       onFocus: PropTypes.func,
@@ -94,6 +95,9 @@ const factory = (Input) => {
     handleSelect = (item, event) => {
       if (this.props.onBlur) this.props.onBlur(event);
       if (!this.props.disabled && this.props.onChange) {
+        if (this.props.name) {
+          event.target.name = this.props.name;
+        }
         this.props.onChange(item, event);
         this.setState({active: false});
       }

From d06dd78fdde214970949af8697863b97c32ad470 Mon Sep 17 00:00:00 2001
From: Olivier Louvignes <olivier@mg-crea.com>
Date: Thu, 9 Jun 2016 19:21:22 +0200
Subject: [PATCH 0631/1024] chore(eslint): fix propTypes order

---
 components/checkbox/Checkbox.js      | 1 +
 components/date_picker/DatePicker.js | 2 +-
 components/input/Input.js            | 2 +-
 components/time_picker/TimePicker.js | 2 +-
 4 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/components/checkbox/Checkbox.js b/components/checkbox/Checkbox.js
index 23b2ae420..0abc86e6a 100644
--- a/components/checkbox/Checkbox.js
+++ b/components/checkbox/Checkbox.js
@@ -12,6 +12,7 @@ const factory = (Check) => {
       className: PropTypes.string,
       disabled: PropTypes.bool,
       label: PropTypes.any,
+      name: PropTypes.string,
       onChange: PropTypes.func,
       theme: PropTypes.shape({
         disabled: PropTypes.string,
diff --git a/components/date_picker/DatePicker.js b/components/date_picker/DatePicker.js
index a2ee7ae92..21a70d8f1 100644
--- a/components/date_picker/DatePicker.js
+++ b/components/date_picker/DatePicker.js
@@ -23,10 +23,10 @@ const factory = (Input, DatePickerDialog) => {
       ]),
       inputClassName: PropTypes.string,
       inputFormat: PropTypes.func,
-      name: PropTypes.string,
       label: PropTypes.string,
       maxDate: PropTypes.object,
       minDate: PropTypes.object,
+      name: PropTypes.string,
       onChange: PropTypes.func,
       theme: PropTypes.shape({
         input: PropTypes.string
diff --git a/components/input/Input.js b/components/input/Input.js
index 90160650c..0a1155b85 100644
--- a/components/input/Input.js
+++ b/components/input/Input.js
@@ -17,10 +17,10 @@ const factory = (FontIcon) => {
         React.PropTypes.string,
         React.PropTypes.element
       ]),
-      name: React.PropTypes.string,
       label: React.PropTypes.string,
       maxLength: React.PropTypes.number,
       multiline: React.PropTypes.bool,
+      name: React.PropTypes.string,
       onBlur: React.PropTypes.func,
       onChange: React.PropTypes.func,
       onFocus: React.PropTypes.func,
diff --git a/components/time_picker/TimePicker.js b/components/time_picker/TimePicker.js
index d4beb984d..49d49a8ee 100644
--- a/components/time_picker/TimePicker.js
+++ b/components/time_picker/TimePicker.js
@@ -15,8 +15,8 @@ const factory = (TimePickerDialog, Input) => {
       error: PropTypes.string,
       format: PropTypes.oneOf(['24hr', 'ampm']),
       inputClassName: PropTypes.string,
-      name: PropTypes.string,
       label: PropTypes.string,
+      name: PropTypes.string,
       onChange: PropTypes.func,
       theme: PropTypes.shape({
         input: PropTypes.string

From 53f4a5ed7536dfcd05d3db7fa472bd1d21c54b96 Mon Sep 17 00:00:00 2001
From: Paulo Moreno <paulocmoreno@gmail.com>
Date: Fri, 10 Jun 2016 10:47:06 -0300
Subject: [PATCH 0632/1024] Fix MenuItem onclick called without event

In all other cases the event listener receives the event. I need to receive the event to stop its propagation.
---
 components/menu/Menu.js                |  5 +++--
 components/menu/__test__/index.spec.js | 29 ++++++++++++++++++++++++++
 2 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 components/menu/__test__/index.spec.js

diff --git a/components/menu/Menu.js b/components/menu/Menu.js
index b3cdc5eef..33a1aef00 100644
--- a/components/menu/Menu.js
+++ b/components/menu/Menu.js
@@ -121,10 +121,11 @@ const factory = (MenuItem) => {
       }
     };
 
-    handleSelect = (item) => {
+    handleSelect = (item, event) => {
       const { value, onClick } = item.props;
+      if (onClick) event.persist();
       this.setState({ active: false, rippled: this.props.ripple }, () => {
-        if (onClick) onClick();
+        if (onClick) onClick(event);
         if (this.props.onSelect) this.props.onSelect(value);
       });
     };
diff --git a/components/menu/__test__/index.spec.js b/components/menu/__test__/index.spec.js
new file mode 100644
index 000000000..fefb186fc
--- /dev/null
+++ b/components/menu/__test__/index.spec.js
@@ -0,0 +1,29 @@
+import expect from 'expect';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ReactTestUtils from 'react-addons-test-utils';
+import Menu from '../Menu';
+import MenuItem, {MenuItem as RawMenuItem} from '../MenuItem';
+
+describe('MenuItem', function () {
+  describe('#onClick', function () {
+    it('passes to listener the event', function () {
+      let listenerCalled = false;
+      const handleClick = function (event) {
+        listenerCalled = true;
+        expect(event).toExist();
+        expect(event.target).toExist();
+      };
+
+      const tree = ReactTestUtils.renderIntoDocument(
+        <Menu>
+          <MenuItem key="1" onClick={handleClick}/>
+        </Menu>);
+
+      const menuItem = ReactTestUtils.findRenderedComponentWithType(tree, RawMenuItem);
+      ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(menuItem));
+
+      expect(listenerCalled).toBe(true);
+    });
+  });
+});

From eec457bcfe87ea725feedaa56711da21483a5f76 Mon Sep 17 00:00:00 2001
From: Mike F <mfeineman@socialengine.com>
Date: Thu, 9 Jun 2016 15:12:29 -0600
Subject: [PATCH 0633/1024] [Fixes #550] Add PropType checking to Menu's
 position and update docs

---
 components/menu/Menu.js                                       | 2 +-
 components/menu/readme.md                                     | 4 ++--
 .../layout/main/modules/examples/menu_example_1.txt           | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/menu/Menu.js b/components/menu/Menu.js
index b3cdc5eef..07a57dba1 100644
--- a/components/menu/Menu.js
+++ b/components/menu/Menu.js
@@ -25,7 +25,7 @@ const factory = (MenuItem) => {
       onSelect: PropTypes.func,
       onShow: PropTypes.func,
       outline: PropTypes.bool,
-      position: PropTypes.string,
+      position: PropTypes.oneOf(Object.keys(POSITION).map(key => POSITION[key])),
       ripple: PropTypes.bool,
       selectable: PropTypes.bool,
       selected: PropTypes.any,
diff --git a/components/menu/readme.md b/components/menu/readme.md
index ea795d63b..2a5876c2c 100644
--- a/components/menu/readme.md
+++ b/components/menu/readme.md
@@ -7,7 +7,7 @@ A [Menu](https://www.google.com/design/spec/components/menus.html) is a temporar
 import {IconMenu, MenuItem, MenuDivider } from 'react-toolbox/lib/menu';
 
 const MenuTest = () => (
-  <IconMenu icon='more_vert' position='top-left' menuRipple>
+  <IconMenu icon='more_vert' position='topLeft' menuRipple>
     <MenuItem value='download' icon='get_app' caption='Download' />
     <MenuItem value='help' icon='favorite' caption='Favorite' />
     <MenuItem value='settings' icon='open_in_browser' caption='Open in app' />
@@ -33,7 +33,7 @@ This subcomponent is the default wrapper for a menu and is responsible for the o
 | `onSelect`    | `Function`    |             | Callback that will be invoked when a menu item is selected. |
 | `onShow`      | `Function`    |             | Callback that will be invoked when the menu is being shown. |
 | `outline`     | `Boolean`     | `true`      | If true the menu wrapper will show an outline with a soft shadow. |
-| `position`    | `String`      | `static`    | Determine the position of the menu. With `static` value the menu will be always shown, `auto` means that the it will decide the opening direction based on the current position. To force a position use `top-left`, `top-right`, `bottom-left`, `bottom-right`. |
+| `position`    | `String`      | `static`    | Determine the position of the menu. With `static` value the menu will be always shown, `auto` means that the it will decide the opening direction based on the current position. To force a position use `topLeft`, `topRight`, `bottomLeft`, `bottomRight`. |
 | `ripple`      | `Boolean`     | `true`      | If true, the menu items will show a ripple effect on click. |
 | `selectable`  | `Boolean`     | `false`     | If true, the menu will keep a value to highlight the active child item. |
 | `selected`    | `Any`         |             | Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted. |
diff --git a/docs/app/components/layout/main/modules/examples/menu_example_1.txt b/docs/app/components/layout/main/modules/examples/menu_example_1.txt
index 9b31278e9..b665da599 100644
--- a/docs/app/components/layout/main/modules/examples/menu_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/menu_example_1.txt
@@ -1,5 +1,5 @@
 const MenuTest = () => (
-  <IconMenu icon='more_vert' position='top-left' menuRipple>
+  <IconMenu icon='more_vert' position='topLeft' menuRipple>
     <MenuItem value='download' icon='get_app' caption='Download' />
     <MenuItem value='help' icon='favorite' caption='Favorite' />
     <MenuItem value='settings' icon='open_in_browser' caption='Open in app' />

From 647dbfb2e8ab9487c802ef1e1cc8cb883c290c2c Mon Sep 17 00:00:00 2001
From: Klathmon <gregbenner1@gmail.com>
Date: Mon, 13 Jun 2016 16:50:48 -0400
Subject: [PATCH 0634/1024] clear the timeout on componentWillUnmount

---
 components/snackbar/Snackbar.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/components/snackbar/Snackbar.js b/components/snackbar/Snackbar.js
index 033d33091..79f30f74b 100644
--- a/components/snackbar/Snackbar.js
+++ b/components/snackbar/Snackbar.js
@@ -44,6 +44,10 @@ const factory = (Overlay, Button) => {
       }
     }
 
+    componentWillUnmount () {
+      clearTimeout(this.curTimeout);
+    }
+
     render () {
       const {action, active, icon, label, onClick, theme, type } = this.props;
       const className = classnames([theme.snackbar, theme[type]], {

From cb138fc9be021b59d646a3b08ccd25a69ff706ac Mon Sep 17 00:00:00 2001
From: Ro Savage <rowan.savage@gmail.com>
Date: Wed, 15 Jun 2016 09:51:04 +1200
Subject: [PATCH 0635/1024] Made property for both topbottom and leftright
 padding of day on calendar picker. Fixes IE11 bug

---
 components/date_picker/_config.scss | 5 +++--
 components/date_picker/theme.scss   | 2 +-
 lib/date_picker/_config.scss        | 5 +++--
 lib/date_picker/theme.scss          | 2 +-
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/components/date_picker/_config.scss b/components/date_picker/_config.scss
index c7925211a..ba9155399 100644
--- a/components/date_picker/_config.scss
+++ b/components/date_picker/_config.scss
@@ -25,6 +25,7 @@ $calendar-year-font-size: 2.4 !default;
 $calendar-day-font-size: 1.3 * $unit !default;
 $calendar-day-disable-opacity: 0.25 !default;
 $calendar-row-height: 3 * $unit !default;
-$calendar-day-padding: .2 * $unit !default;
+$calendar-day-padding-topbottom: .2 * $unit !default;
+$calendar-day-padding-leftright: 0 !default;
 $calendar-title-height: 3.6 * $unit !default;
-$calendar-total-height: $calendar-row-height * 7 + $calendar-title-height + $calendar-day-padding * 12 !default;
+$calendar-total-height: $calendar-row-height * 7 + $calendar-title-height + $calendar-day-padding-topbottom * 12 !default;
diff --git a/components/date_picker/theme.scss b/components/date_picker/theme.scss
index e4dbbac76..81464ef57 100644
--- a/components/date_picker/theme.scss
+++ b/components/date_picker/theme.scss
@@ -126,7 +126,7 @@
 
 .day {
   flex: 0 0 (100% / 7);
-  padding: $calendar-day-padding;
+  padding: $calendar-day-padding-topbottom $calendar-day-padding-leftright;
   > span {
     display: inline-block;
     width: $calendar-row-height;
diff --git a/lib/date_picker/_config.scss b/lib/date_picker/_config.scss
index c7925211a..ba9155399 100644
--- a/lib/date_picker/_config.scss
+++ b/lib/date_picker/_config.scss
@@ -25,6 +25,7 @@ $calendar-year-font-size: 2.4 !default;
 $calendar-day-font-size: 1.3 * $unit !default;
 $calendar-day-disable-opacity: 0.25 !default;
 $calendar-row-height: 3 * $unit !default;
-$calendar-day-padding: .2 * $unit !default;
+$calendar-day-padding-topbottom: .2 * $unit !default;
+$calendar-day-padding-leftright: 0 !default;
 $calendar-title-height: 3.6 * $unit !default;
-$calendar-total-height: $calendar-row-height * 7 + $calendar-title-height + $calendar-day-padding * 12 !default;
+$calendar-total-height: $calendar-row-height * 7 + $calendar-title-height + $calendar-day-padding-topbottom * 12 !default;
diff --git a/lib/date_picker/theme.scss b/lib/date_picker/theme.scss
index e4dbbac76..81464ef57 100644
--- a/lib/date_picker/theme.scss
+++ b/lib/date_picker/theme.scss
@@ -126,7 +126,7 @@
 
 .day {
   flex: 0 0 (100% / 7);
-  padding: $calendar-day-padding;
+  padding: $calendar-day-padding-topbottom $calendar-day-padding-leftright;
   > span {
     display: inline-block;
     width: $calendar-row-height;

From 688f6bc44b28f483b2c94e70e12cd5f3b13eb1e1 Mon Sep 17 00:00:00 2001
From: Ro Savage <rowan.savage@gmail.com>
Date: Wed, 15 Jun 2016 09:52:33 +1200
Subject: [PATCH 0636/1024] Fix cpx command to work correctly when coping sass
 and ts files

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 40301621c..3f6fb7228 100644
--- a/package.json
+++ b/package.json
@@ -104,8 +104,8 @@
     "prebuild": "npm run clean",
     "prepublish": "npm run build",
     "release": "bumped release",
-    "sass": "cpx ./components/**/*.scss ./lib",
-    "tsd": "cpx ./components/**/*.d.ts ./lib",
+    "sass": "cpx './components/**/*.scss' ./lib",
+    "tsd": "cpx './components/**/*.d.ts' ./lib",
     "start": "cross-env NODE_ENV=development UV_THREADPOOL_SIZE=100 node ./server",
     "test": "cross-env NODE_ENV=test karma start",
     "test:watch": "cross-env NODE_ENV=test karma start --no-single-run"

From 7bffe8a6f027784ee9d57b80afe4b68a0285c162 Mon Sep 17 00:00:00 2001
From: Ro Savage <rowan.savage@gmail.com>
Date: Wed, 15 Jun 2016 14:02:14 +1200
Subject: [PATCH 0637/1024] Added autoselect first option on enter

---
 components/autocomplete/Autocomplete.js | 11 ++++++++++-
 lib/autocomplete/Autocomplete.js        | 11 ++++++++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index 32f47b9b5..6e2d36208 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -112,8 +112,17 @@ const factory = (Chip, Input) => {
    };
 
    handleQueryKeyUp = (event) => {
-     if (event.which === 13 && this.state.active) this.select(this.state.active, event);
+     if (event.which === 13) {
+       let target = this.state.active;
+       if (!target) {
+         target = [...this.suggestions().keys()][0];
+         this.setState({active: target});
+       }
+       this.select(target, event);
+     }
+
      if (event.which === 27) ReactDOM.findDOMNode(this).querySelector('input').blur();
+
      if ([40, 38].indexOf(event.which) !== -1) {
        const suggestionsKeys = [...this.suggestions().keys()];
        let index = suggestionsKeys.indexOf(this.state.active) + (event.which === 40 ? +1 : -1);
diff --git a/lib/autocomplete/Autocomplete.js b/lib/autocomplete/Autocomplete.js
index 91a25484a..b0f24f24a 100644
--- a/lib/autocomplete/Autocomplete.js
+++ b/lib/autocomplete/Autocomplete.js
@@ -100,8 +100,17 @@ var factory = function factory(Chip, Input) {
           _this.setState({ query: '' });
         }
       }, _this.handleQueryKeyUp = function (event) {
-        if (event.which === 13 && _this.state.active) _this.select(_this.state.active, event);
+        if (event.which === 13) {
+          var target = _this.state.active;
+          if (!target) {
+            target = [].concat(_toConsumableArray(_this.suggestions().keys()))[0];
+            _this.setState({ active: target });
+          }
+          _this.select(target, event);
+        }
+
         if (event.which === 27) _reactDom2.default.findDOMNode(_this).querySelector('input').blur();
+
         if ([40, 38].indexOf(event.which) !== -1) {
           var suggestionsKeys = [].concat(_toConsumableArray(_this.suggestions().keys()));
           var index = suggestionsKeys.indexOf(_this.state.active) + (event.which === 40 ? +1 : -1);

From 0d01405e1b2e6dae537934b4af2f0a5fdbc4055f Mon Sep 17 00:00:00 2001
From: Ro Savage <rowan.savage@gmail.com>
Date: Wed, 15 Jun 2016 14:45:35 +1200
Subject: [PATCH 0638/1024] Fixed bug with add a month to a date when current
 day is largest than last day of next month

---
 components/utils/time.js | 2 +-
 lib/utils/time.js        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/utils/time.js b/components/utils/time.js
index da5f44108..0b474ad6f 100644
--- a/components/utils/time.js
+++ b/components/utils/time.js
@@ -104,7 +104,7 @@ const time = {
 
   addMonths (d, months) {
     const newDate = this.clone(d);
-    newDate.setMonth(d.getMonth() + months);
+    newDate.setMonth(d.getMonth() + months, 1);
     return newDate;
   },
 
diff --git a/lib/utils/time.js b/lib/utils/time.js
index 1bc166776..b4b7b5edc 100644
--- a/lib/utils/time.js
+++ b/lib/utils/time.js
@@ -139,7 +139,7 @@ var time = {
   },
   addMonths: function addMonths(d, months) {
     var newDate = this.clone(d);
-    newDate.setMonth(d.getMonth() + months);
+    newDate.setMonth(d.getMonth() + months, 1);
     return newDate;
   },
   addYears: function addYears(d, years) {

From afe5bf1ba39dda8f4205c1c874b71074238d0cee Mon Sep 17 00:00:00 2001
From: Jake Klingler <thearrow3456@gmail.com>
Date: Wed, 15 Jun 2016 11:16:11 -0600
Subject: [PATCH 0639/1024] add 'suggestionMatch' prop to Autocomplete
 component to determine how suggestions are matched

---
 components/autocomplete/Autocomplete.js | 23 ++++++++++++++++++++---
 components/autocomplete/readme.md       |  1 +
 spec/components/autocomplete.js         |  4 +++-
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index 32f47b9b5..989633ae7 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -26,6 +26,7 @@ const factory = (Chip, Input) => {
      selectedPosition: PropTypes.oneOf(['above', 'below']),
      showSuggestionsWhenValueIsSet: PropTypes.bool,
      source: PropTypes.any,
+     suggestionMatch: PropTypes.oneOf(['start', 'anywhere', 'word']),
      theme: PropTypes.shape({
        active: PropTypes.string,
        autocomplete: PropTypes.string,
@@ -47,7 +48,8 @@ const factory = (Chip, Input) => {
      selectedPosition: 'above',
      multiple: true,
      showSuggestionsWhenValueIsSet: false,
-     source: {}
+     source: {},
+     suggestionMatch: 'start'
    };
 
    state = {
@@ -151,7 +153,7 @@ const factory = (Chip, Input) => {
      // Suggest any non-set value which matches the query
      if (this.props.multiple) {
        for (const [key, value] of source) {
-         if (!values.has(key) && value.toLowerCase().trim().startsWith(query)) {
+         if (!values.has(key) && this.matches(value.toLowerCase().trim(), query)) {
            suggest.set(key, value);
          }
        }
@@ -159,7 +161,7 @@ const factory = (Chip, Input) => {
      // When multiple is false, suggest any value which matches the query if showAllSuggestions is false
      } else if (query && !this.state.showAllSuggestions) {
        for (const [key, value] of source) {
-         if (value.toLowerCase().trim().startsWith(query)) {
+         if (this.matches(value.toLowerCase().trim(), query)) {
            suggest.set(key, value);
          }
        }
@@ -172,6 +174,21 @@ const factory = (Chip, Input) => {
      return suggest;
    }
 
+   matches (value, query) {
+     const { suggestionMatch } = this.props;
+
+     if (suggestionMatch === 'start') {
+       return value.startsWith(query);
+     } else if (suggestionMatch === 'anywhere') {
+       return value.includes(query);
+     } else if (suggestionMatch === 'word') {
+       const re = new RegExp(`\\b${query}`, 'g');
+       return re.test(value);
+     }
+
+     return false;
+   }
+
    source () {
      const { source: src } = this.props;
      if (src.hasOwnProperty('length')) {
diff --git a/components/autocomplete/readme.md b/components/autocomplete/readme.md
index b3af4a60a..56bafa045 100644
--- a/components/autocomplete/readme.md
+++ b/components/autocomplete/readme.md
@@ -53,6 +53,7 @@ If you want to provide a theme via context, the component key is `RTAutocomplete
 | `source`            | `Object` or `Array`    |                 | Object of key/values or array representing all items suggested. |
 | `selectedPosition`  | `String`               |  `above`        | Determines if the selected list is shown above or below input. It can be `above` or `below`. |
 | `showSuggestionsWhenValueIsSet` | `Bool`     | `false`         | If true, the list of suggestions will not be filtered when a value is selected, until the query is modified. |
+| `suggestionMatch`   | `String`               | `start`         | Determines how suggestions are supplied. It can be `start` (query matches the start of a suggestion), `anywhere` (query matches anywhere inside the suggestion), or `word` (query matches the start of a word in the suggestion). |
 | `value`             | `String` or `Array`    |                 | Value or array of values currently selected component.|
 
 Additional properties will be passed to the Input Component so you can use `hint`, `name` ... etc.
diff --git a/spec/components/autocomplete.js b/spec/components/autocomplete.js
index b3577859d..ad0de47db 100644
--- a/spec/components/autocomplete.js
+++ b/spec/components/autocomplete.js
@@ -2,7 +2,8 @@ import React from 'react';
 import Autocomplete from '../../components/autocomplete';
 
 const countriesArray = ['Spain', 'England', 'USA', 'Thailand', 'Tongo', 'Slovenia'];
-const countriesObject = {'ES-es': 'Spain', 'TH-th': 'Thailand', 'EN-gb': 'England', 'EN-en': 'USA'};
+const countriesObject = {'ES-es': 'Spain', 'TH-th': 'Thailand', 'EN-gb': 'England',
+  'EN-en': 'United States of America', 'EN-nz': 'New Zealand'};
 
 class AutocompleteTest extends React.Component {
   state = {
@@ -34,6 +35,7 @@ class AutocompleteTest extends React.Component {
           label="Pick multiple elements..."
           source={countriesObject}
           value={this.state.multiple}
+          suggestionMatch="anywhere"
         />
 
         <Autocomplete

From 2d5f5194ce054116989eea1c518c4695d2f753b1 Mon Sep 17 00:00:00 2001
From: Ro Savage <rowan.savage@gmail.com>
Date: Thu, 16 Jun 2016 15:56:15 +1200
Subject: [PATCH 0640/1024] Added ability to export the DatePickerDialog
 seperately from the DatePicker

---
 components/date_picker/index.js | 5 ++++-
 lib/date_picker/index.js        | 8 ++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/components/date_picker/index.js b/components/date_picker/index.js
index 53d6a11d0..09b730d81 100644
--- a/components/date_picker/index.js
+++ b/components/date_picker/index.js
@@ -1,7 +1,7 @@
 export default from './DatePicker';
 
 import { themr } from 'react-css-themr';
-import { DATE_PICKER } from '../identifiers.js';
+import { DATE_PICKER, DIALOG } from '../identifiers.js';
 import { datePickerFactory } from './DatePicker.js';
 import datePickerDialogFactory from './DatePickerDialog.js';
 import calendarFactory from './Calendar.js';
@@ -18,3 +18,6 @@ const DatePicker = datePickerFactory(Input, DatePickerDialog);
 const ThemedDatePicker = themr(DATE_PICKER, theme)(DatePicker);
 export default ThemedDatePicker;
 export { ThemedDatePicker as DatePicker };
+
+const ThemedDatePickerDialog = themr(DIALOG, theme)(DatePickerDialog);
+export { ThemedDatePickerDialog as DatePickerDialog };
diff --git a/lib/date_picker/index.js b/lib/date_picker/index.js
index 1b6ed4eab..ae257be56 100644
--- a/lib/date_picker/index.js
+++ b/lib/date_picker/index.js
@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DatePicker = exports.default = undefined;
+exports.DatePickerDialog = exports.DatePicker = exports.default = undefined;
 
 var _DatePicker = require('./DatePicker');
 
@@ -48,4 +48,8 @@ var DatePicker = (0, _DatePicker3.datePickerFactory)(_input2.default, DatePicker
 
 var ThemedDatePicker = (0, _reactCssThemr.themr)(_identifiers.DATE_PICKER, _theme2.default)(DatePicker);
 exports.default = ThemedDatePicker;
-exports.DatePicker = ThemedDatePicker;
\ No newline at end of file
+exports.DatePicker = ThemedDatePicker;
+
+
+var ThemedDatePickerDialog = (0, _reactCssThemr.themr)(_identifiers.DIALOG, _theme2.default)(DatePickerDialog);
+exports.DatePickerDialog = ThemedDatePickerDialog;
\ No newline at end of file

From 1d725dc0624d76a6f69a1a54c284356e46ff3515 Mon Sep 17 00:00:00 2001
From: Bao Dang <dangvinhbao@gmail.com>
Date: Fri, 17 Jun 2016 07:55:19 +1000
Subject: [PATCH 0641/1024] #575: Use classname 'material-icons' if children is
 a string

---
 components/font_icon/FontIcon.js | 2 +-
 spec/components/font_icon.js     | 4 ++--
 spec/root.js                     | 2 ++
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/components/font_icon/FontIcon.js b/components/font_icon/FontIcon.js
index 8354ebb40..29fa06f2a 100644
--- a/components/font_icon/FontIcon.js
+++ b/components/font_icon/FontIcon.js
@@ -4,7 +4,7 @@ import classnames from 'classnames';
 const FontIcon = ({ children, className, value, ...other}) => (
   <span
     data-react-toolbox='font-icon'
-    className={classnames({'material-icons': typeof value === 'string'}, className)}
+    className={classnames({'material-icons': typeof value === 'string' || typeof children === 'string'}, className)}
     {...other}
   >
     {value}
diff --git a/spec/components/font_icon.js b/spec/components/font_icon.js
index ba115a791..49dc010ee 100644
--- a/spec/components/font_icon.js
+++ b/spec/components/font_icon.js
@@ -3,14 +3,14 @@ import FontIcon from '../../components/font_icon';
 
 const FontIconTest = () => (
   <section>
-    <h2>Font Icon</h2>
+    <h5>Font Icons</h5>
     <p>lorem ipsum...</p>
 
     <FontIcon value="add"/>
     <FontIcon value="access_alarm"/>
     <FontIcon value="explore"/>
     <FontIcon value="zoom_in"/>
-    <FontIcon value="input"/>
+    <FontIcon>input</FontIcon>
   </section>
 );
 
diff --git a/spec/root.js b/spec/root.js
index a4121d853..ee5c33032 100644
--- a/spec/root.js
+++ b/spec/root.js
@@ -4,6 +4,7 @@ import React from 'react';
 import AppBar from '../components/app_bar';
 import Autocomplete from './components/autocomplete';
 import Avatar from './components/avatar';
+import FontIcon from './components/font_icon';
 import Button from './components/button';
 import ButtonToolbox from '../components/button';
 import Card from './components/card';
@@ -42,6 +43,7 @@ const Root = () => (
     </AppBar>
     <Autocomplete />
     <Avatar />
+    <FontIcon />
     <Button />
     <Card />
     <Checkbox />

From 6cd4202c6cde14f404b923a0817566b3520dc5a2 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 19 Jun 2016 21:34:30 +0200
Subject: [PATCH 0642/1024] Fix #542

---
 components/button/theme.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/button/theme.scss b/components/button/theme.scss
index e84017c08..d75ca421d 100644
--- a/components/button/theme.scss
+++ b/components/button/theme.scss
@@ -11,7 +11,7 @@
 %button {
   @include typo-button();
   position: relative;
-  display: inline-flex;
+  display: inline-block;
   height: $button-height;
   flex-direction: row;
   align-content: center;

From 5b76a7fe781a74a6a5ddb7d1f0b31de7fc8530b0 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 19 Jun 2016 21:37:46 +0200
Subject: [PATCH 0643/1024] Fix #536

---
 components/checkbox/Checkbox.js | 5 ++++-
 components/checkbox/readme.md   | 2 +-
 components/radio/RadioButton.js | 5 ++++-
 components/radio/readme.md      | 2 +-
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/components/checkbox/Checkbox.js b/components/checkbox/Checkbox.js
index 0abc86e6a..5f7128ea3 100644
--- a/components/checkbox/Checkbox.js
+++ b/components/checkbox/Checkbox.js
@@ -11,7 +11,10 @@ const factory = (Check) => {
       checked: PropTypes.bool,
       className: PropTypes.string,
       disabled: PropTypes.bool,
-      label: PropTypes.any,
+      label: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.node
+      ]),
       name: PropTypes.string,
       onChange: PropTypes.func,
       theme: PropTypes.shape({
diff --git a/components/checkbox/readme.md b/components/checkbox/readme.md
index a8fa86601..a6d1d0f05 100644
--- a/components/checkbox/readme.md
+++ b/components/checkbox/readme.md
@@ -46,7 +46,7 @@ If you want to provide a theme via context, the component key is `RTCheckbox`.
 | `checked`       | `Boolean`       | `false`         | Value for the checkbox, can be `true` or `false`. |
 | `className`     | `String`        | `''`            | Sets a class to give customized styles to the checkbox field.|
 | `disabled`      | `Boolean`       | `false`         | If true, the checkbox shown as disabled and cannot be modified.|
-| `label`         | `String`        |                 | Text label to attach next to the checkbox element.|
+| `label`         | `String` of `node`        |                 | Text label to attach next to the checkbox element.|
 | `name`          | `String`        | `false`         | The name of the field to set in the input checkbox.|
 | `onBlur`        | `Function`      |                 | Callback called when the checkbox is blurred.|
 | `onChange`      | `Function`      |                 | Callback called when the checkbox value is changed.|
diff --git a/components/radio/RadioButton.js b/components/radio/RadioButton.js
index 4ac6871ac..85a4e279f 100644
--- a/components/radio/RadioButton.js
+++ b/components/radio/RadioButton.js
@@ -11,7 +11,10 @@ const factory = (Radio) => {
       checked: PropTypes.bool,
       className: PropTypes.string,
       disabled: PropTypes.bool,
-      label: PropTypes.string,
+      label: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.node
+      ]),
       name: PropTypes.string,
       onBlur: PropTypes.func,
       onChange: PropTypes.func,
diff --git a/components/radio/readme.md b/components/radio/readme.md
index dcdae9b1f..0e95454e4 100644
--- a/components/radio/readme.md
+++ b/components/radio/readme.md
@@ -56,7 +56,7 @@ The inner component to compose radio selectors. They will be rendered as radio i
 | `checked`     | `Boolean`     | `false`     | If true, the input element will be selected by default. Transferred from the parent. |
 | `className`   | `String`      | `''`        | Set a class to give custom styles to the radio button.|
 | `disabled`    | `Boolean`     | `false`     | If true, the item will be displayed as disabled.|
-| `label`       | `String`      | `''`        | Label for the radio button.|
+| `label`       | `String` of `node`  | `''`        | Label for the radio button.|
 | `name`        | `String`      |             | Name for the input element. |
 | `onBlur`      | `Function`    |             | Callback function that will be invoked when the input is blurred. |
 | `onChange`    | `Function`    |             | Callback function that will be invoked when the value changes. |

From fccf6f5dbf5c543f55022c8bfe14d17b10646ba6 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 19 Jun 2016 21:39:29 +0200
Subject: [PATCH 0644/1024] =?UTF-8?q?Latest=20build=20=F0=9F=A4=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/autocomplete/Autocomplete.js | 25 ++++++++++++++--
 lib/button/theme.scss            |  2 +-
 lib/checkbox/Checkbox.js         |  3 +-
 lib/date_picker/DatePicker.js    |  2 +-
 lib/dropdown/Dropdown.js         |  4 +++
 lib/font_icon/FontIcon.js        |  2 +-
 lib/input/Input.js               |  2 +-
 lib/menu/Menu.js                 |  9 ++++--
 lib/menu/__test__/index.spec.js  | 51 ++++++++++++++++++++++++++++++++
 lib/overlay/theme.scss           |  2 +-
 lib/radio/RadioButton.js         |  2 +-
 lib/snackbar/Snackbar.js         |  5 ++++
 lib/time_picker/TimePicker.js    |  2 +-
 13 files changed, 97 insertions(+), 14 deletions(-)
 create mode 100644 lib/menu/__test__/index.spec.js

diff --git a/lib/autocomplete/Autocomplete.js b/lib/autocomplete/Autocomplete.js
index b0f24f24a..12076073c 100644
--- a/lib/autocomplete/Autocomplete.js
+++ b/lib/autocomplete/Autocomplete.js
@@ -182,7 +182,7 @@ var factory = function factory(Chip, Input) {
               var key = _step$value[0];
               var value = _step$value[1];
 
-              if (!values.has(key) && value.toLowerCase().trim().startsWith(query)) {
+              if (!values.has(key) && this.matches(value.toLowerCase().trim(), query)) {
                 suggest.set(key, value);
               }
             }
@@ -214,7 +214,7 @@ var factory = function factory(Chip, Input) {
                 var key = _step2$value[0];
                 var value = _step2$value[1];
 
-                if (value.toLowerCase().trim().startsWith(query)) {
+                if (this.matches(value.toLowerCase().trim(), query)) {
                   suggest.set(key, value);
                 }
               }
@@ -240,6 +240,23 @@ var factory = function factory(Chip, Input) {
 
         return suggest;
       }
+    }, {
+      key: 'matches',
+      value: function matches(value, query) {
+        var suggestionMatch = this.props.suggestionMatch;
+
+
+        if (suggestionMatch === 'start') {
+          return value.startsWith(query);
+        } else if (suggestionMatch === 'anywhere') {
+          return value.includes(query);
+        } else if (suggestionMatch === 'word') {
+          var re = new RegExp('\\b' + query, 'g');
+          return re.test(value);
+        }
+
+        return false;
+      }
     }, {
       key: 'source',
       value: function source() {
@@ -418,6 +435,7 @@ var factory = function factory(Chip, Input) {
     selectedPosition: _react.PropTypes.oneOf(['above', 'below']),
     showSuggestionsWhenValueIsSet: _react.PropTypes.bool,
     source: _react.PropTypes.any,
+    suggestionMatch: _react.PropTypes.oneOf(['start', 'anywhere', 'word']),
     theme: _react.PropTypes.shape({
       active: _react.PropTypes.string,
       autocomplete: _react.PropTypes.string,
@@ -438,7 +456,8 @@ var factory = function factory(Chip, Input) {
     selectedPosition: 'above',
     multiple: true,
     showSuggestionsWhenValueIsSet: false,
-    source: {}
+    source: {},
+    suggestionMatch: 'start'
   };
 
 
diff --git a/lib/button/theme.scss b/lib/button/theme.scss
index e84017c08..d75ca421d 100644
--- a/lib/button/theme.scss
+++ b/lib/button/theme.scss
@@ -11,7 +11,7 @@
 %button {
   @include typo-button();
   position: relative;
-  display: inline-flex;
+  display: inline-block;
   height: $button-height;
   flex-direction: row;
   align-content: center;
diff --git a/lib/checkbox/Checkbox.js b/lib/checkbox/Checkbox.js
index a929997b4..164ffb674 100644
--- a/lib/checkbox/Checkbox.js
+++ b/lib/checkbox/Checkbox.js
@@ -118,7 +118,8 @@ var factory = function factory(Check) {
     checked: _react.PropTypes.bool,
     className: _react.PropTypes.string,
     disabled: _react.PropTypes.bool,
-    label: _react.PropTypes.any,
+    label: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.node]),
+    name: _react.PropTypes.string,
     onChange: _react.PropTypes.func,
     theme: _react.PropTypes.shape({
       disabled: _react.PropTypes.string,
diff --git a/lib/date_picker/DatePicker.js b/lib/date_picker/DatePicker.js
index 1e086db24..34e6b334c 100644
--- a/lib/date_picker/DatePicker.js
+++ b/lib/date_picker/DatePicker.js
@@ -136,10 +136,10 @@ var factory = function factory(Input, DatePickerDialog) {
     icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
     inputClassName: _react.PropTypes.string,
     inputFormat: _react.PropTypes.func,
-    name: _react.PropTypes.string,
     label: _react.PropTypes.string,
     maxDate: _react.PropTypes.object,
     minDate: _react.PropTypes.object,
+    name: _react.PropTypes.string,
     onChange: _react.PropTypes.func,
     theme: _react.PropTypes.shape({
       input: _react.PropTypes.string
diff --git a/lib/dropdown/Dropdown.js b/lib/dropdown/Dropdown.js
index 367a187dc..ea2304b04 100644
--- a/lib/dropdown/Dropdown.js
+++ b/lib/dropdown/Dropdown.js
@@ -81,6 +81,9 @@ var factory = function factory(Input) {
       }, _this.handleSelect = function (item, event) {
         if (_this.props.onBlur) _this.props.onBlur(event);
         if (!_this.props.disabled && _this.props.onChange) {
+          if (_this.props.name) {
+            event.target.name = _this.props.name;
+          }
           _this.props.onChange(item, event);
           _this.setState({ active: false });
         }
@@ -223,6 +226,7 @@ var factory = function factory(Input) {
     disabled: _react.PropTypes.bool,
     error: _react.PropTypes.string,
     label: _react.PropTypes.string,
+    name: _react.PropTypes.string,
     onBlur: _react.PropTypes.func,
     onChange: _react.PropTypes.func,
     onFocus: _react.PropTypes.func,
diff --git a/lib/font_icon/FontIcon.js b/lib/font_icon/FontIcon.js
index 779960142..aa6b71420 100644
--- a/lib/font_icon/FontIcon.js
+++ b/lib/font_icon/FontIcon.js
@@ -30,7 +30,7 @@ var FontIcon = function FontIcon(_ref) {
     'span',
     _extends({
       'data-react-toolbox': 'font-icon',
-      className: (0, _classnames2.default)({ 'material-icons': typeof value === 'string' }, className)
+      className: (0, _classnames2.default)({ 'material-icons': typeof value === 'string' || typeof children === 'string' }, className)
     }, other),
     value,
     children
diff --git a/lib/input/Input.js b/lib/input/Input.js
index 9fd58c709..27e7d9b03 100644
--- a/lib/input/Input.js
+++ b/lib/input/Input.js
@@ -159,10 +159,10 @@ var factory = function factory(FontIcon) {
     floating: _react2.default.PropTypes.bool,
     hint: _react2.default.PropTypes.string,
     icon: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.element]),
-    name: _react2.default.PropTypes.string,
     label: _react2.default.PropTypes.string,
     maxLength: _react2.default.PropTypes.number,
     multiline: _react2.default.PropTypes.bool,
+    name: _react2.default.PropTypes.string,
     onBlur: _react2.default.PropTypes.func,
     onChange: _react2.default.PropTypes.func,
     onFocus: _react2.default.PropTypes.func,
diff --git a/lib/menu/Menu.js b/lib/menu/Menu.js
index 565cc1891..6ef453a3a 100644
--- a/lib/menu/Menu.js
+++ b/lib/menu/Menu.js
@@ -70,13 +70,14 @@ var factory = function factory(MenuItem) {
         if (_this.state.active && !_utils.events.targetIsDescendant(event, _reactDom2.default.findDOMNode(_this))) {
           _this.setState({ active: false, rippled: false });
         }
-      }, _this.handleSelect = function (item) {
+      }, _this.handleSelect = function (item, event) {
         var _item$props = item.props;
         var value = _item$props.value;
         var onClick = _item$props.onClick;
 
+        if (onClick) event.persist();
         _this.setState({ active: false, rippled: _this.props.ripple }, function () {
-          if (onClick) onClick();
+          if (onClick) onClick(event);
           if (_this.props.onSelect) _this.props.onSelect(value);
         });
       }, _temp), _possibleConstructorReturn(_this, _ret);
@@ -275,7 +276,9 @@ var factory = function factory(MenuItem) {
     onSelect: _react.PropTypes.func,
     onShow: _react.PropTypes.func,
     outline: _react.PropTypes.bool,
-    position: _react.PropTypes.string,
+    position: _react.PropTypes.oneOf(Object.keys(POSITION).map(function (key) {
+      return POSITION[key];
+    })),
     ripple: _react.PropTypes.bool,
     selectable: _react.PropTypes.bool,
     selected: _react.PropTypes.any,
diff --git a/lib/menu/__test__/index.spec.js b/lib/menu/__test__/index.spec.js
new file mode 100644
index 000000000..8fa0b4163
--- /dev/null
+++ b/lib/menu/__test__/index.spec.js
@@ -0,0 +1,51 @@
+'use strict';
+
+var _expect = require('expect');
+
+var _expect2 = _interopRequireDefault(_expect);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactDom = require('react-dom');
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
+var _reactAddonsTestUtils = require('react-addons-test-utils');
+
+var _reactAddonsTestUtils2 = _interopRequireDefault(_reactAddonsTestUtils);
+
+var _Menu = require('../Menu');
+
+var _Menu2 = _interopRequireDefault(_Menu);
+
+var _MenuItem = require('../MenuItem');
+
+var _MenuItem2 = _interopRequireDefault(_MenuItem);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('MenuItem', function () {
+  describe('#onClick', function () {
+    it('passes to listener the event', function () {
+      var listenerCalled = false;
+      var handleClick = function handleClick(event) {
+        listenerCalled = true;
+        (0, _expect2.default)(event).toExist();
+        (0, _expect2.default)(event.target).toExist();
+      };
+
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(
+        _Menu2.default,
+        null,
+        _react2.default.createElement(_MenuItem2.default, { key: '1', onClick: handleClick })
+      ));
+
+      var menuItem = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _MenuItem.MenuItem);
+      _reactAddonsTestUtils2.default.Simulate.click(_reactDom2.default.findDOMNode(menuItem));
+
+      (0, _expect2.default)(listenerCalled).toBe(true);
+    });
+  });
+});
\ No newline at end of file
diff --git a/lib/overlay/theme.scss b/lib/overlay/theme.scss
index 058bb466b..e740884ea 100644
--- a/lib/overlay/theme.scss
+++ b/lib/overlay/theme.scss
@@ -16,7 +16,7 @@
   align-items: center;
   justify-content: center;
   pointer-events: none;
-  &.invisible > *:not(.overlay) {
+  &.invisible > *:not(.backdrop) {
     pointer-events: all;
   }
 }
diff --git a/lib/radio/RadioButton.js b/lib/radio/RadioButton.js
index adbff67a3..7fe8abe0b 100644
--- a/lib/radio/RadioButton.js
+++ b/lib/radio/RadioButton.js
@@ -117,7 +117,7 @@ var factory = function factory(Radio) {
     checked: _react.PropTypes.bool,
     className: _react.PropTypes.string,
     disabled: _react.PropTypes.bool,
-    label: _react.PropTypes.string,
+    label: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.node]),
     name: _react.PropTypes.string,
     onBlur: _react.PropTypes.func,
     onChange: _react.PropTypes.func,
diff --git a/lib/snackbar/Snackbar.js b/lib/snackbar/Snackbar.js
index 07e157927..bbb90867a 100644
--- a/lib/snackbar/Snackbar.js
+++ b/lib/snackbar/Snackbar.js
@@ -68,6 +68,11 @@ var factory = function factory(Overlay, Button) {
           }, nextProps.timeout);
         }
       }
+    }, {
+      key: 'componentWillUnmount',
+      value: function componentWillUnmount() {
+        clearTimeout(this.curTimeout);
+      }
     }, {
       key: 'render',
       value: function render() {
diff --git a/lib/time_picker/TimePicker.js b/lib/time_picker/TimePicker.js
index 516ac09a2..bb577f142 100644
--- a/lib/time_picker/TimePicker.js
+++ b/lib/time_picker/TimePicker.js
@@ -122,8 +122,8 @@ var factory = function factory(TimePickerDialog, Input) {
     error: _react.PropTypes.string,
     format: _react.PropTypes.oneOf(['24hr', 'ampm']),
     inputClassName: _react.PropTypes.string,
-    name: _react.PropTypes.string,
     label: _react.PropTypes.string,
+    name: _react.PropTypes.string,
     onChange: _react.PropTypes.func,
     theme: _react.PropTypes.shape({
       input: _react.PropTypes.string

From b44b1683f81fdffdfe2eb55bea1c01acbe568b07 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 19 Jun 2016 21:42:10 +0200
Subject: [PATCH 0645/1024] 1.0.1 release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 3f6fb7228..056ae5be0 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "react-toolbox",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "homepage": "http://www.react-toolbox.com/",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "./lib",
   "author": {
     "name": "React Toolbox Team",

From ad52adb82b8a4e80c7485966bb99eb680d02fe41 Mon Sep 17 00:00:00 2001
From: Olivier Louvignes <olivier@mg-crea.com>
Date: Thu, 23 Jun 2016 19:23:42 +0200
Subject: [PATCH 0646/1024] chore(dropdown): set value to empty string to
 prevent uncontrolled errors

---
 components/dropdown/Dropdown.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/dropdown/Dropdown.js b/components/dropdown/Dropdown.js
index 086ffc541..566186434 100644
--- a/components/dropdown/Dropdown.js
+++ b/components/dropdown/Dropdown.js
@@ -153,7 +153,7 @@ const factory = (Input) => {
             onMouseDown={this.handleMouseDown}
             readOnly
             type={template && selected ? 'hidden' : null}
-            value={selected && selected.label}
+            value={selected && selected.label ? selected.label : ''}
           />
         {template && selected ? this.renderTemplateValue(selected) : null}
           <ul className={theme.values} ref='values'>

From 5b97b95c6224dfe49a72b5949ed2c57c1affe4ea Mon Sep 17 00:00:00 2001
From: Simon Selg <simon@selg.me>
Date: Fri, 24 Jun 2016 03:10:24 +0200
Subject: [PATCH 0647/1024] Add autoresize to multiline inputs

This fixes #278
---
 components/input/Input.js                     | 34 +++++++++++++++++++
 .../main/modules/examples/input_example_1.txt |  3 +-
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/components/input/Input.js b/components/input/Input.js
index 0a1155b85..fa7da3f3e 100644
--- a/components/input/Input.js
+++ b/components/input/Input.js
@@ -54,10 +54,44 @@ const factory = (FontIcon) => {
       type: 'text'
     };
 
+    componentDidMount () {
+      window.addEventListener('resize', this.handleAutoresize);
+    }
+
+    componentWillReceiveProps (nextProps) {
+      if (!this.props.multiline && nextProps.multiline) {
+        window.addEventListener('resize', this.handleAutoresize);
+      } else if (this.props.multiline && !nextProps.multiline) {
+        window.removeEventListener('resize', this.handleAutoresize);
+      }
+    }
+
+    componentWillUnmount () {
+      window.removeEventListener('resize', this.handleAutoresize);
+    }
+
     handleChange = (event) => {
+      if (this.props.multiline) {
+        this.handleAutoresize();
+      }
       if (this.props.onChange) this.props.onChange(event.target.value, event);
     };
 
+    handleAutoresize = () => {
+      const element = this.refs.input;
+      // compute the height difference between inner height and outer height
+      const style = getComputedStyle(element, null);
+      let heightOffset = 0;
+      if (style.boxSizing === 'content-box') {
+        heightOffset = -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom));
+      } else {
+        heightOffset = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
+      }
+      // resize the input to its content size
+      element.style.height = 'auto';
+      element.style.height = `${element.scrollHeight + heightOffset}px`;
+    }
+
     blur () {
       this.refs.input.blur();
     }
diff --git a/docs/app/components/layout/main/modules/examples/input_example_1.txt b/docs/app/components/layout/main/modules/examples/input_example_1.txt
index 9cc017dc9..f1801959c 100644
--- a/docs/app/components/layout/main/modules/examples/input_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/input_example_1.txt
@@ -1,5 +1,5 @@
 class InputTest extends React.Component {
-  state = { name: '', phone: '', email: '', hint: '' };
+  state = { name: '', phone: '', multiline: '', email: '', hint: '' };
 
   handleChange = (name, value) => {
     this.setState({...this.state, [name]: value});
@@ -10,6 +10,7 @@ class InputTest extends React.Component {
       <section>
         <Input type='text' label='Name' name='name' value={this.state.name} onChange={this.handleChange.bind(this, 'name')} maxLength={16 } />
         <Input type='text' label='Disabled field' disabled />
+        <Input type='text' multiline label='Multiline' onChange={this.handleChange.bind(this, 'multiline')} />
         <Input type='email' label='Email address' icon='email' value={this.state.email} onChange={this.handleChange.bind(this, 'email')} />
         <Input type='tel' label='Phone' name='phone' icon='phone' value={this.state.phone} onChange={this.handleChange.bind(this, 'phone')} />
         <Input type='text' value={this.state.hint} label='Required Field' hint='With Hint' required onChange={this.handleChange.bind(this, 'hint')} icon={<span>J</span>} />

From 8d65961be2bd421a5c4d31a8f2c53c2062d58541 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 25 Jun 2016 12:26:20 +0200
Subject: [PATCH 0648/1024] Restyle a ternary

---
 components/input/Input.js | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/components/input/Input.js b/components/input/Input.js
index fa7da3f3e..d8978bae8 100644
--- a/components/input/Input.js
+++ b/components/input/Input.js
@@ -81,12 +81,10 @@ const factory = (FontIcon) => {
       const element = this.refs.input;
       // compute the height difference between inner height and outer height
       const style = getComputedStyle(element, null);
-      let heightOffset = 0;
-      if (style.boxSizing === 'content-box') {
-        heightOffset = -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom));
-      } else {
-        heightOffset = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
-      }
+      const heightOffset = style.boxSizing === 'content-box'
+        ? -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom))
+        : parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
+
       // resize the input to its content size
       element.style.height = 'auto';
       element.style.height = `${element.scrollHeight + heightOffset}px`;

From 69368aeec6834a7def0e06f32ebfed1cfd09d8c7 Mon Sep 17 00:00:00 2001
From: ixrock <ixrock@gmail.com>
Date: Sun, 26 Jun 2016 14:47:00 +0300
Subject: [PATCH 0649/1024] better support in typescript: - added export from
 components by name (as provided in source files) - added missing exports:
 Layout, Ripple - fixed navigation definition (ButtonProps and LinkProps was
 used without referencing)

---
 index.d.ts                  | 126 +++++++++++++++---------------------
 lib/app_bar/index.d.ts      |   8 ++-
 lib/autocomplete/index.d.ts |   6 +-
 lib/avatar/index.d.ts       |   6 +-
 lib/button/index.d.ts       |   4 +-
 lib/checkbox/index.d.ts     |   6 +-
 lib/chip/index.d.ts         |   6 +-
 lib/date_picker/index.d.ts  |   6 +-
 lib/dialog/index.d.ts       |   6 +-
 lib/drawer/index.d.ts       |   6 +-
 lib/dropdown/index.d.ts     |   6 +-
 lib/font_icon/index.d.ts    |   6 +-
 lib/input/index.d.ts        |   6 +-
 lib/layout/index.d.ts       |  43 ++++++++++++
 lib/link/index.d.ts         |   6 +-
 lib/navigation/index.d.ts   |   9 ++-
 lib/overlay/index.d.ts      |   6 +-
 lib/progress_bar/index.d.ts |  14 ++--
 lib/radio/index.d.ts        |   4 +-
 lib/ripple/index.d.ts       |  20 ++++++
 lib/slider/index.d.ts       |   6 +-
 lib/snackbar/index.d.ts     |   7 +-
 lib/switch/index.d.ts       |   6 +-
 lib/table/index.d.ts        |   6 +-
 lib/time_picker/index.d.ts  |   6 +-
 25 files changed, 209 insertions(+), 122 deletions(-)
 create mode 100644 lib/layout/index.d.ts
 create mode 100644 lib/ripple/index.d.ts

diff --git a/index.d.ts b/index.d.ts
index 1bdb96180..e66eb25cc 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -1,81 +1,57 @@
 // Type definitions for react-toolbox 0.16.2
 // Project: http://react-toolbox.com/
-// Definitions by: @xogeny (Michael M. Tiller), @hsrobflavorus (Robert Parker)
+// Definitions by: @xogeny (Michael M. Tiller), @hsrobflavorus (Robert Parker), @ixrock (Roman Karlov)
 /*  CHANGES
-	* 06/05/2016: Refactor into external module declarations (no more 'declare module ...')
-    * 04/27/2016: Updates for 0.16.2, added <Chip>, <Overlay>, and ActivableRendererFactory definitions, misc. tweaks and fixes.
-    * 02/03/2016:
-        * Fixed for TypeScript 1.8.0 stricter var declaration requirements (move `declare var ...` inside each individual module).
-        * Removed triple-slash reference to React to fix npm install compatibility (you'll need to make sure you're referencing react.d.ts somewhere in your project!).
-        * Hopefully fixed the default exports where applicable
-    * 01/13/2016: Minor changes, add a few missing props, add IconButton to react-toolbox/lib/button
-    * 12/21/2015: Fix "import * as Input from 'react-toolbox/lib/input'" style imports, which now correctly import only the necessary component(s).
-        * NOTE that you must use "import * as {Component Name}" not just "import {Component Name}" for this to work.
-    * 12/20/2015: Should be compatible with 0.14.0. Refactor modules into 'react-toolbox/lib/*' format. 
-        Unfortunately importing them directly in that manner doesn't seem to work
-        i.e. "import Input from 'react-toolbox/lib/input'" resolves to undefined, whereas "import { Input } from 'react-toolbox'" works fine!
-        ... Any ideas welcome!
-    * 12/20/2015: Add AppBar, Avatar, and refactor Card and its child Components to match the documentation.
-    * 12/18/2015: Update to react-toolbox 0.13.1 (from 0.12.11)
-    * 12/18/2015: Use JSDoc-style comments to provide Intellisense where supported
-*/
+ * 26/05/2015 Export components by names (not only defaults), added missing components exports
+ * 06/05/2016: Refactor into external module declarations (no more 'declare module ...')
+ * 04/27/2016: Updates for 0.16.2, added <Chip>, <Overlay>, and ActivableRendererFactory definitions, misc. tweaks and fixes.
+ * 02/03/2016:
+ * Fixed for TypeScript 1.8.0 stricter var declaration requirements (move `declare var ...` inside each individual module).
+ * Removed triple-slash reference to React to fix npm install compatibility (you'll need to make sure you're referencing react.d.ts somewhere in your project!).
+ * Hopefully fixed the default exports where applicable
+ * 01/13/2016: Minor changes, add a few missing props, add IconButton to react-toolbox/lib/button
+ * 12/21/2015: Fix "import * as Input from 'react-toolbox/lib/input'" style imports, which now correctly import only the necessary component(s).
+ * NOTE that you must use "import * as {Component Name}" not just "import {Component Name}" for this to work.
+ * 12/20/2015: Should be compatible with 0.14.0. Refactor modules into 'react-toolbox/lib/*' format.
+ Unfortunately importing them directly in that manner doesn't seem to work
+ i.e. "import Input from 'react-toolbox/lib/input'" resolves to undefined, whereas "import { Input } from 'react-toolbox'" works fine!
+ ... Any ideas welcome!
+ * 12/20/2015: Add AppBar, Avatar, and refactor Card and its child Components to match the documentation.
+ * 12/18/2015: Update to react-toolbox 0.13.1 (from 0.12.11)
+ * 12/18/2015: Use JSDoc-style comments to provide Intellisense where supported
+ */
 /*
-    MISSING COMPONENTS (Contributions welcome)
-    * Ripple HOC
-*/
+ MISSING COMPONENTS (Contributions welcome)
+ * Ripple HOC
+ */
 
-import ActivableRendererFactory from 'react-toolbox/lib/hoc/ActivableRenderer';
-import AppBar from 'react-toolbox/lib/app_bar';
-import Autocomplete from 'react-toolbox/lib/autocomplete';
-import Avatar from 'react-toolbox/lib/avatar';
-import { Button }from 'react-toolbox/lib/button';
-import { Card, CardActions, CardMedia, CardText, CardTitle} from 'react-toolbox/lib/card';
-import Checkbox from 'react-toolbox/lib/checkbox';
-import DatePicker from 'react-toolbox/lib/date_picker';
-import Dialog from 'react-toolbox/lib/dialog';
-import Drawer from 'react-toolbox/lib/drawer';
-import Dropdown from 'react-toolbox/lib/dropdown';
-import FontIcon from 'react-toolbox/lib/font_icon';
-import Input from 'react-toolbox/lib/input';
-import Link from 'react-toolbox/lib/link';
-import {List, ListItem, ListCheckbox, ListSubHeader, ListDivider} from 'react-toolbox/lib/list';
-import {Menu, IconMenu, MenuItem, MenuDivider} from 'react-toolbox/lib/menu';
-import Navigation from 'react-toolbox/lib/navigation';
-import Overlay from 'react-toolbox/lib/overlay';
-import ProgressBar from 'react-toolbox/lib/progress_bar';
-import {RadioGroup, RadioButton} from 'react-toolbox/lib/radio';
-import Slider from 'react-toolbox/lib/slider';
-import Snackbar from 'react-toolbox/lib/snackbar';
-import Switch from 'react-toolbox/lib/switch';
-import { Tab, Tabs } from 'react-toolbox/lib/tabs';
-import TimePicker from 'react-toolbox/lib/time_picker';
-import Tooltip from 'react-toolbox/lib/tooltip';
+export { default as ActivableRendererFactory } from 'react-toolbox/lib/hoc/ActivableRenderer';
 
-export {
-ActivableRendererFactory,
-AppBar,
-Autocomplete,
-Avatar,
-Button,
-Card, CardActions, CardMedia, CardText, CardTitle,
-Checkbox,
-DatePicker,
-Dialog,
-Drawer,
-Dropdown,
-FontIcon,
-Input,
-Link,
-List, ListItem, ListCheckbox, ListSubHeader, ListDivider,
-Menu, IconMenu, MenuItem, MenuDivider,
-Navigation,
-Overlay,
-ProgressBar,
-RadioGroup, RadioButton,
-Slider,
-Snackbar,
-Switch,
-Tab, Tabs,
-TimePicker,
-Tooltip
-}
\ No newline at end of file
+export { AppBar } from 'react-toolbox/lib/app_bar'
+export { Autocomplete } from 'react-toolbox/lib/autocomplete'
+export { Avatar } from 'react-toolbox/lib/avatar'
+export { Button, IconButton } from 'react-toolbox/lib/button'
+export { Card, CardTitle, CardMedia, CardText, CardActions } from 'react-toolbox/lib/card'
+export { Checkbox } from 'react-toolbox/lib/checkbox'
+export { Chip } from 'react-toolbox/lib/chip'
+export { DatePicker } from 'react-toolbox/lib/date_picker'
+export { Dialog } from 'react-toolbox/lib/dialog'
+export { Drawer } from 'react-toolbox/lib/drawer'
+export { Dropdown } from 'react-toolbox/lib/dropdown'
+export { FontIcon } from 'react-toolbox/lib/font_icon'
+export { Input } from 'react-toolbox/lib/input'
+export { Layout, Panel, NavDrawer, Sidebar } from 'react-toolbox/lib/layout'
+export { Link } from 'react-toolbox/lib/link'
+export { List, ListCheckbox, ListItem, ListDivider, ListSubHeader } from 'react-toolbox/lib/list'
+export { Menu, MenuDivider, MenuItem, IconMenu } from 'react-toolbox/lib/menu'
+export { Navigation } from 'react-toolbox/lib/navigation'
+export { Overlay } from 'react-toolbox/lib/overlay'
+export { ProgressBar } from 'react-toolbox/lib/progress_bar'
+export { RadioButton, RadioGroup } from 'react-toolbox/lib/radio'
+export { Ripple } from 'react-toolbox/lib/ripple'
+export { Slider } from 'react-toolbox/lib/slider'
+export { Snackbar } from 'react-toolbox/lib/snackbar'
+export { Switch } from 'react-toolbox/lib/switch'
+export { Tabs, Tab } from 'react-toolbox/lib/tabs'
+export { TimePicker } from 'react-toolbox/lib/time_picker'
+export { default as Tooltip } from 'react-toolbox/lib/tooltip'
\ No newline at end of file
diff --git a/lib/app_bar/index.d.ts b/lib/app_bar/index.d.ts
index 9e59dce88..97e2fa342 100644
--- a/lib/app_bar/index.d.ts
+++ b/lib/app_bar/index.d.ts
@@ -47,10 +47,12 @@ export interface AppBarProps extends Props {
 	fixed?: boolean,
 }
 /**
- * The app bar is a special kind of toolbar that�s used for branding, navigation, search, and actions. 
+ * The app bar is a special kind of toolbar that�s used for branding, navigation, search, and actions. 
  * Usually it contains controls on the right and left side and a title with the current section or app name. 
  * You should give the content with children elements.
  */
-export default class AppBar extends React.Component<AppBarProps, {}> {
+export class AppBar extends React.Component<AppBarProps, {}> {
 	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
+}
+
+export default AppBar;
\ No newline at end of file
diff --git a/lib/autocomplete/index.d.ts b/lib/autocomplete/index.d.ts
index ebfc38665..39452ebd8 100644
--- a/lib/autocomplete/index.d.ts
+++ b/lib/autocomplete/index.d.ts
@@ -90,6 +90,8 @@ export interface AutocompleteProps extends Props, Conditional, Changeable<string
  * They can be simple or multiple depending on the amount of values that can be selected. 
  * The opening direction is determined at opening time depending on the current position.
  */
-export default class Autocomplete extends React.Component<AutocompleteProps, {}> {
+export class Autocomplete extends React.Component<AutocompleteProps, {}> {
 	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
+}
+
+export default Autocomplete;
\ No newline at end of file
diff --git a/lib/avatar/index.d.ts b/lib/avatar/index.d.ts
index 474eb0b63..c30e43bb4 100644
--- a/lib/avatar/index.d.ts
+++ b/lib/avatar/index.d.ts
@@ -50,6 +50,8 @@ export interface AvatarProps extends Props, Iconic {
  * As users may choose not to personalize an avatar, provide delightful defaults. 
  * When used with a specific logo, avatars can also be used to represent brand.
  */
-export default class Avatar extends React.Component<AvatarProps, {}> {
+export class Avatar extends React.Component<AvatarProps, {}> {
 	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
+}
+
+export default Avatar;
\ No newline at end of file
diff --git a/lib/button/index.d.ts b/lib/button/index.d.ts
index b712fdc44..ff8c4fa91 100644
--- a/lib/button/index.d.ts
+++ b/lib/button/index.d.ts
@@ -119,4 +119,6 @@ export class Button extends React.Component<ButtonProps, {}> {
 
 export class IconButton extends React.Component<ButtonProps, {}> {
 	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
+}
+
+export default Button;
\ No newline at end of file
diff --git a/lib/checkbox/index.d.ts b/lib/checkbox/index.d.ts
index 284267d25..e266c3d2a 100644
--- a/lib/checkbox/index.d.ts
+++ b/lib/checkbox/index.d.ts
@@ -75,6 +75,8 @@ export interface CheckboxProps extends Props, Changeable<boolean>, Conditional {
 	 */
 	onFocus?: Function,
 }
-export default class Checkbox extends React.Component<CheckboxProps, {}> {
+export class Checkbox extends React.Component<CheckboxProps, {}> {
 	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
+}
+
+export default Checkbox;
\ No newline at end of file
diff --git a/lib/chip/index.d.ts b/lib/chip/index.d.ts
index 3b9822189..8c081ea2b 100644
--- a/lib/chip/index.d.ts
+++ b/lib/chip/index.d.ts
@@ -61,6 +61,8 @@ export interface ChipProps extends Props {
  * As users may choose not to personalize an avatar, provide delightful defaults. 
  * When used with a specific logo, avatars can also be used to represent brand.
  */
-export default class Chip extends React.Component<ChipProps, {}> {
+export class Chip extends React.Component<ChipProps, {}> {
 	render(): React.ReactElement<any>;
-}
\ No newline at end of file
+}
+
+export default Chip;
\ No newline at end of file
diff --git a/lib/date_picker/index.d.ts b/lib/date_picker/index.d.ts
index ac43c6d7f..b6a6425bc 100644
--- a/lib/date_picker/index.d.ts
+++ b/lib/date_picker/index.d.ts
@@ -62,6 +62,8 @@ export interface DatePickerProps extends Props, Changeable<Date> {
 	 */
 	value?: Date,
 }
-export default class DatePicker extends React.Component<DatePickerProps, {}> {
+export class DatePicker extends React.Component<DatePickerProps, {}> {
 	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
+}
+
+export default DatePicker;
\ No newline at end of file
diff --git a/lib/dialog/index.d.ts b/lib/dialog/index.d.ts
index 638714389..72118a061 100644
--- a/lib/dialog/index.d.ts
+++ b/lib/dialog/index.d.ts
@@ -152,6 +152,8 @@ export interface DialogProps extends Props, Modal {
 	 */
 	type?: string,
 }
-export default class Dialog extends React.Component<DialogProps, {}> {
+export class Dialog extends React.Component<DialogProps, {}> {
 	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
+}
+
+export default Dialog;
\ No newline at end of file
diff --git a/lib/drawer/index.d.ts b/lib/drawer/index.d.ts
index 3bcf15f2f..478dec865 100644
--- a/lib/drawer/index.d.ts
+++ b/lib/drawer/index.d.ts
@@ -69,6 +69,8 @@ export interface DrawerProps extends Props, Modal {
 	 */
 	type?: string
 }
-export default class Drawer extends React.Component<DrawerProps, {}> {
+export class Drawer extends React.Component<DrawerProps, {}> {
 	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
+}
+
+export default Drawer;
\ No newline at end of file
diff --git a/lib/dropdown/index.d.ts b/lib/dropdown/index.d.ts
index e70328c94..b9d90484f 100644
--- a/lib/dropdown/index.d.ts
+++ b/lib/dropdown/index.d.ts
@@ -77,6 +77,8 @@ export interface DropdownProps extends Props, Changeable<any>, Conditional {
 	value: string,
 }
 
-export default class Dropdown extends React.Component<DropdownProps, {}> {
+export class Dropdown extends React.Component<DropdownProps, {}> {
 	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
+}
+
+export default Dropdown;
\ No newline at end of file
diff --git a/lib/font_icon/index.d.ts b/lib/font_icon/index.d.ts
index 152fd1309..8fc061fdc 100644
--- a/lib/font_icon/index.d.ts
+++ b/lib/font_icon/index.d.ts
@@ -37,6 +37,8 @@ export interface Props {
 export interface FontIconProps extends Props {
 	value: string
 }
-export default class FontIcon extends React.Component<FontIconProps, {}> {
+export class FontIcon extends React.Component<FontIconProps, {}> {
 	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
+}
+
+export default FontIcon;
\ No newline at end of file
diff --git a/lib/input/index.d.ts b/lib/input/index.d.ts
index 780ae6f5c..67108330d 100644
--- a/lib/input/index.d.ts
+++ b/lib/input/index.d.ts
@@ -117,6 +117,8 @@ export interface InputProps extends Props, Conditional, Changeable<string>, Icon
 	 */
 	value?: string,
 }
-export default class Input extends React.Component<InputProps, {}> {
+export class Input extends React.Component<InputProps, {}> {
 	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
+}
+
+export default Input;
\ No newline at end of file
diff --git a/lib/layout/index.d.ts b/lib/layout/index.d.ts
new file mode 100644
index 000000000..60d32a099
--- /dev/null
+++ b/lib/layout/index.d.ts
@@ -0,0 +1,43 @@
+import * as React from 'react';
+
+export interface LayoutProps {
+  className?:string
+}
+
+export interface NavDrawerProps {
+  width?:'normal' | 'wide',
+  active?:boolean,
+  pinned?:boolean,
+  permanentAt?:'sm'|'md'|'lg'|'xl'|'xxl'|'xxxl',
+  onOverlayClick?:() => void,
+  scrollY?:boolean,
+  className?:string
+}
+
+export interface PanelProps {
+  scrollY?:boolean,
+  className?:string
+}
+
+export interface SidebarProps {
+  width?:'1'|'2'|'3'|'4'|'5'|'6'|'7'|'8'|'9'|'10'|'11'|'12'|'25'|'33'|'50'|'66'|'75'|'100'
+  pinned?:boolean,
+  scrollY?:boolean,
+  className?:string
+}
+
+export class Layout extends React.Component<LayoutProps, {}> {
+  render():React.DOMElement<any, any>;
+}
+
+export class NavDrawer extends React.Component<NavDrawerProps, {}> {
+  render():React.DOMElement<any, any>;
+}
+
+export class Panel extends React.Component<PanelProps, {}> {
+  render():React.DOMElement<any, any>;
+}
+
+export class Sidebar extends React.Component<SidebarProps, {}> {
+  render():React.DOMElement<any, any>;
+}
\ No newline at end of file
diff --git a/lib/link/index.d.ts b/lib/link/index.d.ts
index 8ee956424..565f80e48 100644
--- a/lib/link/index.d.ts
+++ b/lib/link/index.d.ts
@@ -51,6 +51,8 @@ export interface LinkProps extends Props, Iconic {
 	 */
 	count?: number,
 }
-export default class Link extends React.Component<LinkProps, {}> {
+export class Link extends React.Component<LinkProps, {}> {
 	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
+}
+
+export default Link;
\ No newline at end of file
diff --git a/lib/navigation/index.d.ts b/lib/navigation/index.d.ts
index a1a3081b2..6165fc761 100644
--- a/lib/navigation/index.d.ts
+++ b/lib/navigation/index.d.ts
@@ -1,4 +1,7 @@
 import * as React from 'react';
+import { ButtonProps } from '../button'
+import { LinkProps } from '../link'
+
 export interface Props {
 	/**
 	 * Sets a CSS class on the component.
@@ -48,6 +51,8 @@ export interface NavigationProps extends Props {
 	 */
 	type?: string,
 }
-export default class Navigation extends React.Component<NavigationProps, {}> {
+export class Navigation extends React.Component<NavigationProps, {}> {
 	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
+}
+
+export default Navigation;
\ No newline at end of file
diff --git a/lib/overlay/index.d.ts b/lib/overlay/index.d.ts
index 3da680439..b2d35b7f1 100644
--- a/lib/overlay/index.d.ts
+++ b/lib/overlay/index.d.ts
@@ -44,6 +44,8 @@ export interface OverlayProps extends Props {
 	onClick?: Function;
 	onEscKeyDown?: Function
 }
-export default class Overlay extends React.Component<OverlayProps, {}> {
+export class Overlay extends React.Component<OverlayProps, {}> {
 	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
+}
+
+export default Overlay;
\ No newline at end of file
diff --git a/lib/progress_bar/index.d.ts b/lib/progress_bar/index.d.ts
index fb1494ef8..44f446842 100644
--- a/lib/progress_bar/index.d.ts
+++ b/lib/progress_bar/index.d.ts
@@ -41,19 +41,19 @@ export interface ProgressBarProps extends Props {
 	/**
 	 * Maximum value permitted.
 	 */
-	max?: number, // 
+	max?: number, //
 	/**
 	 * minimum value permitted.
 	 */
-	min?: number, // 
+	min?: number, //
 	/**
 	 * Mode of the progress bar, it can be determinate or indeterminate.
 	 */
-	mode?: string, // 
+	mode?: string, //
 	/**
 	 * If true, the circular progress bar will be changing its color.
 	 */
-	multicolor?: boolean, // 
+	multicolor?: boolean, //
 	/**
 	 * Type of the progress bar, it can be circular or linear.
 	 * @default linear
@@ -64,6 +64,8 @@ export interface ProgressBarProps extends Props {
 	 */
 	value?: number,
 }
-export default class ProgressBar extends React.Component<ProgressBarProps, {}> {
+export class ProgressBar extends React.Component<ProgressBarProps, {}> {
 	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
+}
+
+export default ProgressBar;
\ No newline at end of file
diff --git a/lib/radio/index.d.ts b/lib/radio/index.d.ts
index 9df815e4a..e0222005f 100644
--- a/lib/radio/index.d.ts
+++ b/lib/radio/index.d.ts
@@ -96,4 +96,6 @@ export interface RadioButtonProps extends Props, Conditional {
 }
 export class RadioButton extends React.Component<RadioButtonProps, {}> {
 	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
+}
+
+export default RadioButton;
\ No newline at end of file
diff --git a/lib/ripple/index.d.ts b/lib/ripple/index.d.ts
new file mode 100644
index 000000000..78d4d73ed
--- /dev/null
+++ b/lib/ripple/index.d.ts
@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+export interface RippleProps {
+  centered?:boolean,
+  className?:boolean,
+  onRippleEnded:() => void,
+  spread?:number,
+  theme?:{
+    ripple?:string,
+    rippleActive?:string,
+    rippleRestarting?:string,
+    rippleWrapper?:string
+  }
+}
+
+export class Ripple extends React.Component<RippleProps, {}> {
+  render():React.DOMElement<any, any>;
+}
+
+export default Ripple;
\ No newline at end of file
diff --git a/lib/slider/index.d.ts b/lib/slider/index.d.ts
index 6e910ba67..89d9f884d 100644
--- a/lib/slider/index.d.ts
+++ b/lib/slider/index.d.ts
@@ -67,6 +67,8 @@ export interface SliderProps extends Props {
 	 */
 	value: number,
 }
-export default class Slider extends React.Component<SliderProps, {}> {
+export class Slider extends React.Component<SliderProps, {}> {
 	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
+}
+
+export default Slider;
\ No newline at end of file
diff --git a/lib/snackbar/index.d.ts b/lib/snackbar/index.d.ts
index 6530072fa..6df9264fd 100644
--- a/lib/snackbar/index.d.ts
+++ b/lib/snackbar/index.d.ts
@@ -92,6 +92,9 @@ export interface SnackbarProps extends Props, Modal, Iconic {
 	 */
 	type?: string,
 }
-export default class Snackbar extends React.Component<SnackbarProps, {}> {
+
+export class Snackbar extends React.Component<SnackbarProps, {}> {
 	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
+}
+
+export default Snackbar;
\ No newline at end of file
diff --git a/lib/switch/index.d.ts b/lib/switch/index.d.ts
index a072f82cf..4f57f3ab0 100644
--- a/lib/switch/index.d.ts
+++ b/lib/switch/index.d.ts
@@ -70,6 +70,8 @@ export interface SwitchProps extends Props, Conditional {
 	 */
 	onFocus?: Function,
 }
-export default class Switch extends React.Component<SwitchProps, {}> {
+export class Switch extends React.Component<SwitchProps, {}> {
 	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
+}
+
+export default Switch;
\ No newline at end of file
diff --git a/lib/table/index.d.ts b/lib/table/index.d.ts
index e2dc73ff9..6893b2b7f 100644
--- a/lib/table/index.d.ts
+++ b/lib/table/index.d.ts
@@ -59,6 +59,8 @@ export interface TableProps extends Props {
 	 */
 	source?: Array<{ [key: string]: any }>,
 }
-export default class Table extends React.Component<TableProps, {}> {
+export class Table extends React.Component<TableProps, {}> {
 	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
+}
+
+export default Table;
\ No newline at end of file
diff --git a/lib/time_picker/index.d.ts b/lib/time_picker/index.d.ts
index ee141895a..2a7a6291b 100644
--- a/lib/time_picker/index.d.ts
+++ b/lib/time_picker/index.d.ts
@@ -54,6 +54,8 @@ export interface TimePickerProps extends Props, Changeable<Date> {
 	 */
 	value?: Date,
 }
-export default class TimePicker extends React.Component<TimePickerProps, {}> {
+export class TimePicker extends React.Component<TimePickerProps, {}> {
 	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
+}
+
+export default TimePicker;
\ No newline at end of file

From febf8b52371fe97e33fb65a6fcce92f2d40b10c5 Mon Sep 17 00:00:00 2001
From: ixrock <ixrock@gmail.com>
Date: Sun, 26 Jun 2016 15:02:54 +0300
Subject: [PATCH 0650/1024] get rid of declaration duplicates in components/

---
 components/app_bar/index.d.ts         |  56 -------
 components/autocomplete/index.d.ts    |  95 -----------
 components/avatar/index.d.ts          |  55 -------
 components/button/index.d.ts          | 122 --------------
 components/card/index.d.ts            | 225 --------------------------
 components/checkbox/index.d.ts        |  80 ---------
 components/chip/index.d.ts            |  66 --------
 components/date_picker/index.d.ts     |  67 --------
 components/dialog/index.d.ts          | 157 ------------------
 components/drawer/index.d.ts          |  74 ---------
 components/dropdown/index.d.ts        |  82 ----------
 components/font_icon/index.d.ts       |  42 -----
 components/hoc/ActivableRenderer.d.ts |  13 --
 components/input/index.d.ts           | 122 --------------
 components/link/index.d.ts            |  56 -------
 components/list/index.d.ts            | 180 ---------------------
 components/menu/index.d.ts            | 150 -----------------
 components/navigation/index.d.ts      |  53 ------
 components/overlay/index.d.ts         |  49 ------
 components/progress_bar/index.d.ts    |  69 --------
 components/radio/index.d.ts           |  99 ------------
 components/slider/index.d.ts          |  72 ---------
 components/snackbar/index.d.ts        |  97 -----------
 components/switch/index.d.ts          |  75 ---------
 components/table/index.d.ts           |  64 --------
 components/tabs/index.d.ts            |  84 ----------
 components/time_picker/index.d.ts     |  59 -------
 components/tooltip/index.d.ts         |  10 --
 28 files changed, 2373 deletions(-)
 delete mode 100644 components/app_bar/index.d.ts
 delete mode 100644 components/autocomplete/index.d.ts
 delete mode 100644 components/avatar/index.d.ts
 delete mode 100644 components/button/index.d.ts
 delete mode 100644 components/card/index.d.ts
 delete mode 100644 components/checkbox/index.d.ts
 delete mode 100644 components/chip/index.d.ts
 delete mode 100644 components/date_picker/index.d.ts
 delete mode 100644 components/dialog/index.d.ts
 delete mode 100644 components/drawer/index.d.ts
 delete mode 100644 components/dropdown/index.d.ts
 delete mode 100644 components/font_icon/index.d.ts
 delete mode 100644 components/hoc/ActivableRenderer.d.ts
 delete mode 100644 components/input/index.d.ts
 delete mode 100644 components/link/index.d.ts
 delete mode 100644 components/list/index.d.ts
 delete mode 100644 components/menu/index.d.ts
 delete mode 100644 components/navigation/index.d.ts
 delete mode 100644 components/overlay/index.d.ts
 delete mode 100644 components/progress_bar/index.d.ts
 delete mode 100644 components/radio/index.d.ts
 delete mode 100644 components/slider/index.d.ts
 delete mode 100644 components/snackbar/index.d.ts
 delete mode 100644 components/switch/index.d.ts
 delete mode 100644 components/table/index.d.ts
 delete mode 100644 components/tabs/index.d.ts
 delete mode 100644 components/time_picker/index.d.ts
 delete mode 100644 components/tooltip/index.d.ts

diff --git a/components/app_bar/index.d.ts b/components/app_bar/index.d.ts
deleted file mode 100644
index 9e59dce88..000000000
--- a/components/app_bar/index.d.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-
-export interface AppBarProps extends Props {
-	/**
-	 * If true, the AppBar shows a shadow.
-	 * @default false
-	 */
-	flat?: boolean,
-	/**
-	 * Determine if the bar should have position fixed (true) or relative (false)
-	 * @default false
-	 */
-	fixed?: boolean,
-}
-/**
- * The app bar is a special kind of toolbar that�s used for branding, navigation, search, and actions. 
- * Usually it contains controls on the right and left side and a title with the current section or app name. 
- * You should give the content with children elements.
- */
-export default class AppBar extends React.Component<AppBarProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
diff --git a/components/autocomplete/index.d.ts b/components/autocomplete/index.d.ts
deleted file mode 100644
index ebfc38665..000000000
--- a/components/autocomplete/index.d.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-export interface Conditional {
-	/**
-	 * If true, component will be disabled
-	 * @default false
-	 */
-	disabled?: boolean
-}
-
-/**
- * Properties of components that have values that can be changed (T is the type of the value)
- */
-export interface Changeable<T> {
-	/**
-	 * Callback called when the picker value is changed.
-	 * @param v Type of the value
-	 */
-	onChange?: (v: T) => void
-}
-
-export interface AutocompleteProps extends Props, Conditional, Changeable<string | Array<any>> {
-	/**
-	 * Sets the error string for the internal input element.
-	 */
-	error?: string,
-	/**
-	 * The text string to use for the floating label element.
-	 */
-	label?: string,
-	/**
-	 * If true, component can hold multiple values.
-	 * @default true
-	 */
-	multiple?: boolean,
-	/**
-	 * 	Object of key/values or array representing all items suggested.
-	 */
-	source: Object | Array<any>,
-	/**
-	 * If true, the list of suggestions will not be filtered when a value is selected, until the query is modified.
-	 * @default false
-	 */
-	showSuggestionsWhenValueIsSet?: boolean,
-	/**
-	 * Type of the input element. It can be a valid HTML5 input type
-	 * @default text
-	 */
-	type?: string,
-	/**
-	 * 	Value or array of values currently selected component.Current value of the input element.
-	 */
-	value?: string | Array<any>,
-}
-/**
- * An input field with a set of predeterminated labeled values. When it's focused it shows a list of hints that are filtered by label as the user types. 
- * They can be simple or multiple depending on the amount of values that can be selected. 
- * The opening direction is determined at opening time depending on the current position.
- */
-export default class Autocomplete extends React.Component<AutocompleteProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
diff --git a/components/avatar/index.d.ts b/components/avatar/index.d.ts
deleted file mode 100644
index 474eb0b63..000000000
--- a/components/avatar/index.d.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-export interface Iconic {
-	/**
-	 * Value of the icon (See icon component).
-	 */
-	icon?: string | React.ReactElement<any> | React.ReactHTMLElement<any>,
-}
-export interface AvatarProps extends Props, Iconic {
-	children?: any,
-	image?: string | React.ReactElement<any> | React.ReactHTMLElement<any> | React.ClassicComponent<any, any>,
-	title?: string | boolean,
-}
-/**
- * Avatars can be used to represent people. 
- * For personal avatars, offer personalization options. 
- * As users may choose not to personalize an avatar, provide delightful defaults. 
- * When used with a specific logo, avatars can also be used to represent brand.
- */
-export default class Avatar extends React.Component<AvatarProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
diff --git a/components/button/index.d.ts b/components/button/index.d.ts
deleted file mode 100644
index b712fdc44..000000000
--- a/components/button/index.d.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-
-// Interface for components with icons
-export interface Iconic {
-	/**
-	 * Value of the icon (See icon component).
-	 */
-	icon?: string | React.ReactElement<any> | React.ReactHTMLElement<any>,
-}
-
-export interface Conditional {
-	/**
-	 * If true, component will be disabled
-	 * @default false
-	 */
-	disabled?: boolean
-}
-
-/**
- * Properties of components that can be clicked
- */
-export interface Clickable {
-	/**
-	 *  Callback called when the button is clicked.
-	 */
-	onClick?: Function
-}
-export interface ButtonProps extends Props, Clickable, Conditional, Iconic {
-	/**
-	 * Indicates if the button should have accent color.
-	 * @default false
-	 */
-	accent?: boolean,
-	/**
-	 * If true, the button will have a flat look.
-	 * @default false
-	 */
-	flat?: boolean,
-	/**
-	 * If true, the button will have a floating look.
-	 * @default false
-	 */
-	floating?: boolean,
-	/**
-	 * If specified, the button will be rendered as an <a>
-	 */
-	href?: string,
-	/**
-	 * The text string to use for the name of the button.
-	 */
-	label?: string,
-	/**
-	 * If true, component will be disabled and show a loading animation.
-	 * @default false
-	 */
-	loading?: boolean,
-	/**
-	 * To be used with floating button. If true the button will be smaller. 
-	 * @default false
-	 */
-	mini?: boolean,
-	/**
-	 * Indicates if the button should have primary color.
-	 * @default false
-	 */
-	primary?: boolean,
-	/**
-	 * If true, the button will have a raised look.
-	 * @default false
-	 */
-	raised?: boolean,
-	/**
-	 * If true, component will have a ripple effect on click.
-	 * @default true
-	 */
-	ripple?: boolean,
-}
-/**
- * A button clearly communicates what action will occur when the user touches it. 
- * It consists of text, an image, or both, designed in accordance with your app’s color theme.
- */
-export class Button extends React.Component<ButtonProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-
-export class IconButton extends React.Component<ButtonProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
diff --git a/components/card/index.d.ts b/components/card/index.d.ts
deleted file mode 100644
index dc4f3a4b7..000000000
--- a/components/card/index.d.ts
+++ /dev/null
@@ -1,225 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-export interface Iconic {
-	/**
-	 * Value of the icon (See icon component).
-	 */
-	icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
-}
-
-export interface Conditional {
-	/**
-	 * If true, component will be disabled
-	 * @default false
-	 */
-	disabled?: boolean
-}
-
-/**
- * Properties of components that can be clicked
- */
-export interface Clickable {
-	/**
-	 *  Callback called when the button is clicked.
-	 */
-	onClick?: Function
-}
-export interface ButtonProps extends Props, Clickable, Conditional, Iconic {
-	/**
-	 * Indicates if the button should have accent color.
-	 * @default false
-	 */
-	accent?: boolean,
-	/**
-	 * If true, the button will have a flat look.
-	 * @default false
-	 */
-	flat?: boolean,
-	/**
-	 * If true, the button will have a floating look.
-	 * @default false
-	 */
-	floating?: boolean,
-	/**
-	 * If specified, the button will be rendered as an <a>
-	 */
-	href?: string,
-	/**
-	 * The text string to use for the name of the button.
-	 */
-	label?: string,
-	/**
-	 * If true, component will be disabled and show a loading animation.
-	 * @default false
-	 */
-	loading?: boolean,
-	/**
-	 * To be used with floating button. If true the button will be smaller. 
-	 * @default false
-	 */
-	mini?: boolean,
-	/**
-	 * Indicates if the button should have primary color.
-	 * @default false
-	 */
-	primary?: boolean,
-	/**
-	 * If true, the button will have a raised look.
-	 * @default false
-	 */
-	raised?: boolean,
-	/**
-	 * If true, component will have a ripple effect on click.
-	 * @default true
-	 */
-	ripple?: boolean,
-}
-export interface CardProps extends Props, Clickable {
-	/**
-	 * Child components, usually Card subcomponents.
-	 */
-	children?: any,
-	/**
-	 * Increases the shadow depth to appear elevated.
-	 */
-	raised?: boolean,
-	/**
-	 * Array of objects describing actions. These actions will be rendered as buttons and the object fields will be transferred to those.
-	 * @default []
-	 */
-	actions?: Array<ButtonProps>,
-	/**
-	 * Sets HEX or RGBA color to add a colored layer to the heading.
-	 */
-	color?: string,
-	/**
-	 * URL to set as a background image in the heading.
-	 */
-	image?: string,
-	
-	/**
-	 * Type of the component to display general modifications. It can be 'wide' for a larger card, 'image' if it's an image card or 'event' which shows just a title on top.
-	 */
-	type?: string,
-}
-/**
- * A Card is a piece of paper with unique related data that serves as an entry point to more detailed information. 
- * For example, a card could contain a photo, text, and a link about a single subject.
- * Cards are composed of multiple subcomponents in React Toolbox. 
- * You can combine each of the subcomponents to create all different Material Design Cards given in the spec.
- */
-export class Card extends React.Component<CardProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-export interface CardTitleProps extends Props {
-	avatar?: string | React.ReactElement<any> | React.ReactHTMLElement<any> | React.ClassicComponent<any, any>,
-	/**
-	 * Children to pass through the component.
-	 */
-	children?: any,
-	/**
-	 * Sets a complementary smaller text under the title.
-	 */
-	subtitle?: string,
-	/**
-	 * Sets the title of the card.
-	 */
-	title?: string | boolean,
-}
-/**
- * A versatile title block that can be used in various places on the card, including the media area. 
- * This component can also display an avatar next to the title content.
- */
-export class CardTitle extends React.Component<CardTitleProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-export interface CardMediaProps extends Props {
-	/**
-	 * Forces a ('wide' 16:9) or ('square' 1:1) aspect ratio respectively. 
-	 * Unset, the media area will have a flexible height.
-	 * @default ''
-	 */
-	aspectRatio?: string,
-	/**
-	 * Usually an image/video element or a <CardTitle> component.
-	 */
-	children?: any,
-	/**
-	 * Sets the background color
-	 */
-	color?: string,
-	/**
-	 * Creates a dark overlay underneath the child components.
-	 */
-	contentOverlay?: boolean,
-	/**
-	 * Can be used instead of children. Accepts an element or a URL string.
-	 */
-	image?: string | React.ReactElement<any> | React.ReactHTMLElement<any> | React.ClassicComponent<any, any>,
-}
-/**
- * Used for displaying media such as images or videos on a card. 
- * Can also be used with a solid background color instead of an image.
- */
-export class CardMedia extends React.Component<CardMediaProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-export interface CardTextProps extends Props {
-	/**
-	 * Children to pass through the component.
-	 */
-	children?: any,
-}
-/**
- * Basic card content container. 
- * Good for small descriptions or other supplementary text.
- */
-export class CardText extends React.Component<CardTextProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-export interface CardActionsProps extends Props {
-	/**
-	 * Children to pass through the component.
-	 */
-	children?: any,
-}
-/**
- * This component is used as a container for supplemental card actions. 
- * Supplemental actions within the card are explicitly called out using icons, text, and UI controls, typically placed at the bottom of the card.
- */
-export class CardActions extends React.Component<CardActionsProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
diff --git a/components/checkbox/index.d.ts b/components/checkbox/index.d.ts
deleted file mode 100644
index 284267d25..000000000
--- a/components/checkbox/index.d.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-export interface Conditional {
-	/**
-	 * If true, component will be disabled
-	 * @default false
-	 */
-	disabled?: boolean
-}
-
-/**
- * Properties of components that have values that can be changed (T is the type of the value)
- */
-export interface Changeable<T> {
-	/**
-	 * Callback called when the picker value is changed.
-	 * @param v Type of the value
-	 */
-	onChange?: (v: T) => void
-}
-
-export interface CheckboxProps extends Props, Changeable<boolean>, Conditional {
-	/**
-	 * Value for the checkbox, can be true or false.
-	 * @default false
-	 */
-	checked?: boolean,
-	/**
-	 * Text label to attach next to the checkbox element.
-	 */
-	label?: string,
-	/**
-	 * The name of the field to set in the input checkbox.
-	 */
-	name?: string,
-	/**
-	 * Callback called when the checkbox is blurred.
-	 */
-	onBlur?: Function,
-	/**
-	 * Callback called when the checkbox is focused
-	 */
-	onFocus?: Function,
-}
-export default class Checkbox extends React.Component<CheckboxProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
diff --git a/components/chip/index.d.ts b/components/chip/index.d.ts
deleted file mode 100644
index 3b9822189..000000000
--- a/components/chip/index.d.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-export interface Conditional {
-	/**
-	 * If true, component will be disabled
-	 * @default false
-	 */
-	disabled?: boolean
-}
-
-export interface ChipProps extends Props {
-	/**
-	 * 	Child components, usually Avatar and inline elements
-	 */
-	children?: React.ReactNode;
-	/**
-	 * If true, the chip will be rendered with a delete icon.
-	 */
-	deletable?: boolean;
-	/**
-	 * Callback to be invoked when the delete icon is clicked.
-	 */
-	onDeleteClick?: React.MouseEventHandler
-}
-/**
- * Avatars can be used to represent people. 
- * For personal avatars, offer personalization options. 
- * As users may choose not to personalize an avatar, provide delightful defaults. 
- * When used with a specific logo, avatars can also be used to represent brand.
- */
-export default class Chip extends React.Component<ChipProps, {}> {
-	render(): React.ReactElement<any>;
-}
\ No newline at end of file
diff --git a/components/date_picker/index.d.ts b/components/date_picker/index.d.ts
deleted file mode 100644
index ac43c6d7f..000000000
--- a/components/date_picker/index.d.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-/**
- * Properties of components that have values that can be changed (T is the type of the value)
- */
-export interface Changeable<T> {
-	/**
-	 * Callback called when the picker value is changed.
-	 * @param v Type of the value
-	 */
-	onChange?: (v: T) => void
-}
-
-export interface DatePickerProps extends Props, Changeable<Date> {
-	/**
-	 * Date object with the maximum selectable date.
-	 */
-	maxDate?: Date,
-	/**
-	 * Date object with the minimum selectable date.
-	 */
-	minDate?: Date,
-	/**
-	 * The text string to use like a input placeholder.
-	 */
-	placeholder?: string,
-	/**
-	 * Date object with the currently selected date.
-	 */
-	value?: Date,
-}
-export default class DatePicker extends React.Component<DatePickerProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
diff --git a/components/dialog/index.d.ts b/components/dialog/index.d.ts
deleted file mode 100644
index 638714389..000000000
--- a/components/dialog/index.d.ts
+++ /dev/null
@@ -1,157 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-export interface Iconic {
-	/**
-	 * Value of the icon (See icon component).
-	 */
-	icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
-}
-
-export interface Conditional {
-	/**
-	 * If true, component will be disabled
-	 * @default false
-	 */
-	disabled?: boolean
-}
-
-/**
- * Properties of components that can be clicked
- */
-export interface Clickable {
-	/**
-	 *  Callback called when the button is clicked.
-	 */
-	onClick?: Function
-}
-/**
- * Properties of modal components (Drawer, Dialog)
- */
-export interface Modal {
-	/**
-	 * If true, the dialog will be active.
-	 */
-	active: boolean,
-	/**
-	 * Callback called when the ESC key is pressed with the overlay active.
-	 */
-	onEscKeyDown?: Function,
-	/**
-	 * Callback to be invoked when the dialog overlay is clicked.
-	 */
-	onOverlayClick?: Function,
-	/**
-	 * Callback called when the mouse button is pressed on the overlay.
-	 */
-	onOverlayMouseDown?: Function,
-	/**
-	 * Callback called when the mouse is moving over the overlay.
-	 */
-	onOverlayMouseMove?: Function,
-	/**
-	 * Callback called when the mouse button is released over the overlay.
-	 */
-	onOverlayMouseUp?: Function,
-}
-export interface ButtonProps extends Props, Clickable, Conditional, Iconic {
-	/**
-	 * Indicates if the button should have accent color.
-	 * @default false
-	 */
-	accent?: boolean,
-	/**
-	 * If true, the button will have a flat look.
-	 * @default false
-	 */
-	flat?: boolean,
-	/**
-	 * If true, the button will have a floating look.
-	 * @default false
-	 */
-	floating?: boolean,
-	/**
-	 * If specified, the button will be rendered as an <a>
-	 */
-	href?: string,
-	/**
-	 * The text string to use for the name of the button.
-	 */
-	label?: string,
-	/**
-	 * If true, component will be disabled and show a loading animation.
-	 * @default false
-	 */
-	loading?: boolean,
-	/**
-	 * To be used with floating button. If true the button will be smaller. 
-	 * @default false
-	 */
-	mini?: boolean,
-	/**
-	 * Indicates if the button should have primary color.
-	 * @default false
-	 */
-	primary?: boolean,
-	/**
-	 * If true, the button will have a raised look.
-	 * @default false
-	 */
-	raised?: boolean,
-	/**
-	 * If true, component will have a ripple effect on click.
-	 * @default true
-	 */
-	ripple?: boolean,
-}
-export interface DialogProps extends Props, Modal {
-	/**
-	 * An array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons.
-	 * @default []
-	 */
-	actions?: Array<ButtonProps>,
-	/**
-	 * The text string to use as standar title of the dialog.
-	 */
-	title?: string | boolean,
-	/**
-	 * Used to determine the size of the dialog. It can be small, normal or large.
-	 * @default normal
-	 */
-	type?: string,
-}
-export default class Dialog extends React.Component<DialogProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
diff --git a/components/drawer/index.d.ts b/components/drawer/index.d.ts
deleted file mode 100644
index 3bcf15f2f..000000000
--- a/components/drawer/index.d.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-/**
- * Properties of modal components (Drawer, Dialog)
- */
-export interface Modal {
-	/**
-	 * If true, the dialog will be active.
-	 */
-	active: boolean,
-	/**
-	 * Callback called when the ESC key is pressed with the overlay active.
-	 */
-	onEscKeyDown?: Function,
-	/**
-	 * Callback to be invoked when the dialog overlay is clicked.
-	 */
-	onOverlayClick?: Function,
-	/**
-	 * Callback called when the mouse button is pressed on the overlay.
-	 */
-	onOverlayMouseDown?: Function,
-	/**
-	 * Callback called when the mouse is moving over the overlay.
-	 */
-	onOverlayMouseMove?: Function,
-	/**
-	 * Callback called when the mouse button is released over the overlay.
-	 */
-	onOverlayMouseUp?: Function,
-}
-export interface DrawerProps extends Props, Modal {
-	/**
-	 * Type of drawer. It can be 'left' or 'right' to display the drawer on the left or right side of the screen.
-	 * @default left
-	 */
-	type?: string
-}
-export default class Drawer extends React.Component<DrawerProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
diff --git a/components/dropdown/index.d.ts b/components/dropdown/index.d.ts
deleted file mode 100644
index e70328c94..000000000
--- a/components/dropdown/index.d.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-export interface Conditional {
-	/**
-	 * If true, component will be disabled
-	 * @default false
-	 */
-	disabled?: boolean
-}
-export interface Option<T> {
-	label: string,
-	value: T,
-}
-/**
- * Properties of components that have values that can be changed (T is the type of the value)
- */
-export interface Changeable<T> {
-	/**
-	 * Callback called when the picker value is changed.
-	 * @param v Type of the value
-	 */
-	onChange?: (v: T) => void
-}
-export interface DropdownProps extends Props, Changeable<any>, Conditional {
-	/**
-	 * If true, the dropdown will open up or down depending on the position in the screen.
-	 */
-	auto?: boolean,
-	/**
-	 * The text string to use for the floating label element.
-	 */
-	label?: string,
-	/**
-	 * Array of data objects with the data to represent in the dropdown.
-	 */
-	source: Array<Option<any>>,
-	/**
-	 * Callback function that returns a JSX template to represent the element.
-	 */
-	template?: Function,
-	/**
-	 * Default value using JSON data.
-	 */
-	value: string,
-}
-
-export default class Dropdown extends React.Component<DropdownProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
diff --git a/components/font_icon/index.d.ts b/components/font_icon/index.d.ts
deleted file mode 100644
index 152fd1309..000000000
--- a/components/font_icon/index.d.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-
-export interface FontIconProps extends Props {
-	value: string
-}
-export default class FontIcon extends React.Component<FontIconProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
diff --git a/components/hoc/ActivableRenderer.d.ts b/components/hoc/ActivableRenderer.d.ts
deleted file mode 100644
index ab73e065c..000000000
--- a/components/hoc/ActivableRenderer.d.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import * as React from 'react';
-export interface ActivableRendererOptions {
-	/**
-	 * @default 500
-	 */
-	delay?: number;
-}
-export interface ActivableRendererProps {
-	active: boolean;
-	children?: any;
-	delay?: number
-}
-export default function ActivableRendererFactory<P>(options?: ActivableRendererOptions): (componentClass: React.ComponentClass<P>) => React.ComponentClass<P & ActivableRendererProps>
\ No newline at end of file
diff --git a/components/input/index.d.ts b/components/input/index.d.ts
deleted file mode 100644
index 780ae6f5c..000000000
--- a/components/input/index.d.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-export interface Conditional {
-	/**
-	 * If true, component will be disabled
-	 * @default false
-	 */
-	disabled?: boolean
-}
-
-/**
- * Properties of components that have values that can be changed (T is the type of the value)
- */
-export interface Changeable<T> {
-	/**
-	 * Callback called when the picker value is changed.
-	 * @param v Type of the value
-	 */
-	onChange?: (v: T) => void
-}
-
-export interface Iconic {
-	/**
-	 * Value of the icon (See icon component).
-	 */
-	icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
-}
-
-export interface InputProps extends Props, Conditional, Changeable<string>, Iconic {
-	/**
-	 * Give an error string to display under the field.
-	 */
-	error?: string,
-	/**
-	 * Indicates if the label is floating in the input field or not.
-	 * @default true
-	 */
-	floating?: boolean,
-	/**
-	 * The text string to use for the floating label element.
-	 */
-	label?: string,
-	/**
-	 * Specifies the maximum number of characters allowed in the component.
-	 */
-	maxLength?: number,
-	/**
-	 * If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.
-	 * @default false
-	 */
-	multiline?: boolean,
-	/**
-	 * Callback function that is fired when components is blurred.
-	 */
-	onBlur?: Function,
-	/**
-	 * Callback function that is fired when components is focused.
-	 */
-	onFocus?: Function,
-	/**
-	 * Callback function that is fired when a key is pressed down.
-	 */
-	onKeyDown?: Function,
-	/**
-	 * Callback function that is fired when a key is pressed.
-	 */
-	onKeyPress?: Function,
-	/**
-	 * Callback function that is fired when a key is released.
-	 */
-	onKeyUp?: Function,
-	/**
-	 * If true, the html input has a required value.
-	 * @default false
-	 */
-	required?: boolean,
-	/**
-	 * Type of the input element. It can be a valid HTML5 input type
-	 * @default text
-	 */
-	type?: string,
-	/**
-	 * Current value of the input element.
-	 */
-	value?: string,
-}
-export default class Input extends React.Component<InputProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
diff --git a/components/link/index.d.ts b/components/link/index.d.ts
deleted file mode 100644
index 8ee956424..000000000
--- a/components/link/index.d.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-
-export interface Iconic {
-	/**
-	 * Value of the icon (See icon component).
-	 */
-	icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
-}
-export interface LinkProps extends Props, Iconic {
-	href: string,
-	/**
-	 * The text string used for the text content of the link.
-	 */
-	label: string,
-	/**
-	 * Sets a count number useful to display in the page how many times was visited for example.
-	 */
-	count?: number,
-}
-export default class Link extends React.Component<LinkProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
diff --git a/components/list/index.d.ts b/components/list/index.d.ts
deleted file mode 100644
index 30501554d..000000000
--- a/components/list/index.d.ts
+++ /dev/null
@@ -1,180 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-export interface Conditional {
-	/**
-	 * If true, component will be disabled
-	 * @default false
-	 */
-	disabled?: boolean
-}
-export interface Clickable {
-	/**
-	 *  Callback called when the button is clicked.
-	 */
-	onClick?: Function
-}
-/**
- * Properties of components that have values that can be changed (T is the type of the value)
- */
-export interface Changeable<T> {
-	/**
-	 * Callback called when the picker value is changed.
-	 * @param v Type of the value
-	 */
-	onChange?: (v: T) => void
-}
-
-export interface Iconic {
-	/**
-	 * Value of the icon (See icon component).
-	 */
-	icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
-}
-
-export interface ListProps extends Props {
-	/**
-	 * If true, each element in the list will have a ripple effect on click
-	 * @default false
-	 */
-	ripple?: boolean,
-	/**
-	 * If true, the elements in the list will display a hover effect and a pointer cursor.
-	 * @default false
-	 */
-	selectable?: boolean,
-}
-export class List extends React.Component<ListProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-export interface ListItemProps extends Props, Conditional, Clickable {
-	/**
-	 * A string URL to specify an avatar in the left side of the item.
-	 */
-	avatar?: string,
-	/**
-	 * Main text of the item. Required.
-	 */
-	caption?: string,
-	/**
-	 * An element that will be displayed as the item. If set, this will override `caption` and `legend`.
-	 */
-	itemContent?: React.ReactElement<any>,
-	/**
-	 * 	A list of elements that are placed on the left side of the item and after the avatar attribute.
-	 */
-	leftActions?: React.ReactElement<any>[],
-	/**
-	 * A string key of a font icon to display an icon in the left side of the item.
-	 */
-	leftIcon?: string,
-	/**
-	 * Secondary text to display under the caption.
-	 */
-	legend?: string,
-	/**
-	 * 	A list of elements that are placed on the right side of the item and after the rightIcon attribute.
-	 */
-	rightActions?: React.ReactElement<any>[],
-	/**
-	 * The same as the leftIcon but in this case the icon is displayed in the right side.
-	 */
-	rightIcon?: string,
-	/**
-	 * If true, the item displays a ripple effect on click. By default it's inherited from the parent element.
-	 * @default false
-	 */
-	ripple?: boolean,
-	/**
-	 * If true, the elements in the list will display a hover effect and a pointer cursor. Inherited from the parent
-	 * @default false
-	 */
-	selectable?: boolean,
-	/**
-	 * In case you want to provide the item as a link, you can pass this property to specify the href.
-	 */
-	to?: string;
-}
-export class ListItem extends React.Component<ListItemProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-export interface ListCheckboxProps extends Props, Conditional, Changeable<boolean> {
-	/**
-	 * Main text of the item. Required.
-	 */
-	caption?: string,
-	/**
-	 * If true the checkbox appears checked by default.
-	 * @default false
-	 */
-	checked: boolean,
-	/**
-	 * Secondary text to display under the caption.
-	 */
-	legend?: string,
-	/**
-	 * Name for the checkbox input item.
-	 */
-	name?: string,
-	/**
-	 * Callback called when the input element is blurred.
-	 */
-	onBlur?: Function,
-	/**
-	 * Callback called when the input element is focused.
-	 */
-	onFocus?: Function,
-}
-export class ListCheckbox extends React.Component<ListCheckboxProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-export interface ListSubHeaderProps extends Props {
-	/**
-	 * List header caption.
-	 */
-	caption: string;
-}
-export class ListSubHeader extends React.Component<ListSubHeaderProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-export interface ListDividerProps extends Props {
-	/**
-	 * Indicates if the divider should be full width or should leave a space on the left side.
-	 */
-	inset: boolean;
-}
-export class ListDivider extends React.Component<ListDividerProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
diff --git a/components/menu/index.d.ts b/components/menu/index.d.ts
deleted file mode 100644
index 542895486..000000000
--- a/components/menu/index.d.ts
+++ /dev/null
@@ -1,150 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-export interface Conditional {
-	/**
-	 * If true, component will be disabled
-	 * @default false
-	 */
-	disabled?: boolean
-}
-
-export interface Iconic {
-	/**
-	 * Value of the icon (See icon component).
-	 */
-	icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
-}
-export interface MenuProps extends Props {
-	/**
-	 * If true, the menu will be displayed as opened by default.
-	 * @default false
-	 */
-	active?: boolean,
-	/**
-	 * Callback that will be called when the menu is being hidden.
-	 */
-	onHide?: Function,
-	/**
-	 * Callback that will be called when the menu is being shown.
-	 */
-	onShow?: Function,
-	/**
-	 * If true the menu wrapper will show an outline with a soft shadow.
-	 * @default true
-	 */
-	outline?: boolean,
-	/**
-	 * Determine the position of the menu. 
-	 * With static value the menu will be always shown, auto means that the it will decide the opening direction based on the current position. 
-	 * To force a position use top-left, top-right, bottom-left, bottom-right.
-	 * @default static
-	 */
-	position?: string,
-	/**
-	 * If true, the menu items will show a ripple effect on click.
-	 */
-	ripple?: boolean,
-	/**
-	 * If true, the menu will keep a value to highlight the active child item.
-	 */
-	selectable?: boolean,
-	/**
-	 *  Used for selectable menus and indicates the initial value so the child item with this value can be highlighted.
-	 */
-	value?: boolean,
-}
-export class Menu extends React.Component<MenuProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-export interface IconMenuProps extends Props, Iconic {
-	/**
-	 * If true, the icon will show a ripple when is clicked.
-	 */
-	iconRipple?: boolean,
-	/**
-	 * Transferred to the Menu component.
-	 * @default true
-	 */
-	menuRipple?: boolean,
-	/**
-	 * Callback that will be called when the icon is clicked.
-	 */
-	onClick?: Function,
-	/**
-	 * Callback that will be called when the menu is being hidden.
-	 */
-	onHide?: Function, 
-	/**
-	 * Callback that will be called when the menu is being shown.
-	 */
-	onShow?: Function,
-	/**
-	 * Callback that will be called when a menu item is selected.
-	 */
-	onSelect?: Function,
-	/**
-	 * Determine the position of the menu. This property is transferred to the inner Menu component.
-	 * @default auto
-	 */
-	position?: string,
-	/**
-	 * If true, the menu will keep a value to highlight the active child item. Transferred to the Menu
-	 */
-	selectable?: boolean,
-}
-export class IconMenu extends React.Component<IconMenuProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-export interface MenuItemProps extends Props, Conditional, Iconic {
-	/**
-	 * The text to include in the menu item.
-	 */
-	caption?: string,
-	/**
-	 * If true, the item will show a ripple effect when it's clicked. Inherited from the parent.
-	 */
-	ripple?: boolean,
-	/**
-	 * Transferred from the Menu component for selectable menus. Indicates if it's the current active option.
-	 */
-	selected?: boolean,
-}
-export class MenuItem extends React.Component<MenuItemProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-export class MenuDivider extends React.Component<any, {}> {
-	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
diff --git a/components/navigation/index.d.ts b/components/navigation/index.d.ts
deleted file mode 100644
index a1a3081b2..000000000
--- a/components/navigation/index.d.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-
-export interface NavigationProps extends Props {
-	/**
-	 * Array of objects that represent buttons so the keys will be transferred as properties to those.
-	 */
-	actions?: Array<ButtonProps>,
-	/**
-	 * Array of objects similar to actions but that will be rendered as <Link/> component definition.
-	 */
-	routes?: Array<LinkProps>,
-	/**
-	 * Type of the navigation, it can be 'vertical' or 'horizontal'.
-	 */
-	type?: string,
-}
-export default class Navigation extends React.Component<NavigationProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
diff --git a/components/overlay/index.d.ts b/components/overlay/index.d.ts
deleted file mode 100644
index 3da680439..000000000
--- a/components/overlay/index.d.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-export interface OverlayProps extends Props {
-	active?: boolean;
-	children?: any;
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string;
-	invisible?: boolean;
-	onClick?: Function;
-	onEscKeyDown?: Function
-}
-export default class Overlay extends React.Component<OverlayProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
diff --git a/components/progress_bar/index.d.ts b/components/progress_bar/index.d.ts
deleted file mode 100644
index fb1494ef8..000000000
--- a/components/progress_bar/index.d.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-export interface ProgressBarProps extends Props {
-	/**
-	 * Value of a secondary progress bar useful for buffering.
-	 */
-	buffer?: number,
-	/**
-	 * Maximum value permitted.
-	 */
-	max?: number, // 
-	/**
-	 * minimum value permitted.
-	 */
-	min?: number, // 
-	/**
-	 * Mode of the progress bar, it can be determinate or indeterminate.
-	 */
-	mode?: string, // 
-	/**
-	 * If true, the circular progress bar will be changing its color.
-	 */
-	multicolor?: boolean, // 
-	/**
-	 * Type of the progress bar, it can be circular or linear.
-	 * @default linear
-	 */
-	type?: string,
-	/**
-	 * Value of the current progress.
-	 */
-	value?: number,
-}
-export default class ProgressBar extends React.Component<ProgressBarProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
diff --git a/components/radio/index.d.ts b/components/radio/index.d.ts
deleted file mode 100644
index 9df815e4a..000000000
--- a/components/radio/index.d.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-export interface Conditional {
-	/**
-	 * If true, component will be disabled
-	 * @default false
-	 */
-	disabled?: boolean
-}
-/**
- * Properties of components that have values that can be changed (T is the type of the value)
- */
-export interface Changeable<T> {
-	/**
-	 * Callback called when the picker value is changed.
-	 * @param v Type of the value
-	 */
-	onChange?: (v: T) => void
-}
-
-export interface RadioGroupProps extends Props, Conditional, Changeable<any> {
-	/**
-	 * Name for the input element group.
-	 */
-	name?: string,
-	/**
-	 * Default value selected in the radio group.
-	 */
-	value?: any,
-}
-export class RadioGroup extends React.Component<RadioGroupProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-export interface RadioButtonProps extends Props, Conditional {
-	/**
-	 * If true, the input element will be selected by default. Transferred from the parent.
-	 */
-	checked?: boolean,
-	/**
-	 * 	Label for the radio button.
-	 */
-	label?: string;
-	/**
-	 * Name for the input element.
-	 */
-	name?: string,
-	/**
-	 * Callback function that will be invoked when the input is blurred.
-	 */
-	onBlur?: Function,
-	/**
-	 * Callback function that will be invoked when the value changes.
-	 */
-	onChange?: Function,
-	/**
-	 * Callback function that will be invoked when the input is focused.
-	 */
-	onFocus?: Function,
-	/**
-	 * Value for the radio button.
-	 */
-	value: any,
-}
-export class RadioButton extends React.Component<RadioButtonProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
diff --git a/components/slider/index.d.ts b/components/slider/index.d.ts
deleted file mode 100644
index 6e910ba67..000000000
--- a/components/slider/index.d.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-export interface SliderProps extends Props {
-	/**
-	 * If true, an input is shown and the user can set the slider from keyboard value.
-	 */
-	editable?: boolean,
-	/**
-	 * Maximum value permitted.
-	 */
-	max?: number,
-	/**
-	 * Minimum value permitted.
-	 */
-	min?: number,
-	/**
-	 * Callback function that will be invoked when the slider value changes.
-	 */
-	onChange?: Function,
-	/**
-	 * If true, a pin with numeric value label is shown when the slider thumb is pressed. Use for settings for which users need to know the exact value of the setting.
-	 */
-	pinned?: boolean,
-	/**
-	 * If true, the slider thumb snaps to tick marks evenly spaced based on the step property value.
-	 */
-	snaps?: boolean,
-	/**
-	 * Amount to vary the value when the knob is moved or increase/decrease is called.
-	 */
-	step?: number,
-	/**
-	 * Current value of the slider.
-	 */
-	value: number,
-}
-export default class Slider extends React.Component<SliderProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
diff --git a/components/snackbar/index.d.ts b/components/snackbar/index.d.ts
deleted file mode 100644
index 6530072fa..000000000
--- a/components/snackbar/index.d.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-export interface Iconic {
-	/**
-	 * Value of the icon (See icon component).
-	 */
-	icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
-}
-export interface Modal {
-	/**
-	 * If true, the dialog will be active.
-	 */
-	active: boolean,
-	/**
-	 * Callback called when the ESC key is pressed with the overlay active.
-	 */
-	onEscKeyDown?: Function,
-	/**
-	 * Callback to be invoked when the dialog overlay is clicked.
-	 */
-	onOverlayClick?: Function,
-	/**
-	 * Callback called when the mouse button is pressed on the overlay.
-	 */
-	onOverlayMouseDown?: Function,
-	/**
-	 * Callback called when the mouse is moving over the overlay.
-	 */
-	onOverlayMouseMove?: Function,
-	/**
-	 * Callback called when the mouse button is released over the overlay.
-	 */
-	onOverlayMouseUp?: Function,
-}
-
-export interface SnackbarProps extends Props, Modal, Iconic {
-	/**
-	 * For the action component inside the Snackbar.
-	 */
-	action?: string,
-	/**
-	 * Text to display in the content.
-	 */
-	label?: string,
-	/**
-	 * Callback function that will be called when the button action is clicked.
-	 */
-	onClick?: Function,
-	/**
-	 * Callback function when finish the set timeout.
-	 */
-	onTimeout?: Function, 
-	/**
-	 * amount of time after the Snackbar will be automatically hidden.
-	 */
-	timeout?: number,
-	/**
-	 * Indicates the action type. Can be 'accept', 'warning' or 'cancel'
-	 */
-	type?: string,
-}
-export default class Snackbar extends React.Component<SnackbarProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
diff --git a/components/switch/index.d.ts b/components/switch/index.d.ts
deleted file mode 100644
index a072f82cf..000000000
--- a/components/switch/index.d.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-export interface Conditional {
-	/**
-	 * If true, component will be disabled
-	 * @default false
-	 */
-	disabled?: boolean
-}
-export interface SwitchProps extends Props, Conditional {
-	/**
-	 * If true, the switch will be enabled.
-	 */
-	checked: boolean,
-	/**
-	 * If true, component will be disabled.
-	 */
-	disabled?: boolean,
-	/**
-	 * The text string to use for the floating label element.
-	 */
-	label?: string,
-	/**
-	 * The text string used as name of the input.
-	 */
-	name?: string,
-	/**
-	 * Callback function that is fired when when the switch is blurred.
-	 */
-	onBlur?: Function,
-	/**
-	 * Callback function that is fired when the components's value changes.
-	 */
-	onChange?: Function,
-	/**
-	 * Callback function fire when the switch is focused.
-	 */
-	onFocus?: Function,
-}
-export default class Switch extends React.Component<SwitchProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
diff --git a/components/table/index.d.ts b/components/table/index.d.ts
deleted file mode 100644
index e2dc73ff9..000000000
--- a/components/table/index.d.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-export interface TableProps extends Props {
-	/**
-	 * If true, component will show a heading using model field names.
-	 */
-	heading?: boolean,
-	/**
-	 * Object describing the data model that represents each object in the source.
-	 */
-	model?: { [key: string]: string },
-	/**
-	 * Callback function that is fired when an item in a row changes. If set, rows are editable.
-	 */
-	onChange?: Function,
-	/**
-	 * Callback function invoked when the row selection changes.
-	 */
-	onSelect?: Function,
-	/**
-	 * Array of indexes of the items in the source that should appear as selected.
-	 */
-	selected?: Array<number>,
-	/**
-	 * Array of objects representing each item to show.
-	 */
-	source?: Array<{ [key: string]: any }>,
-}
-export default class Table extends React.Component<TableProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
diff --git a/components/tabs/index.d.ts b/components/tabs/index.d.ts
deleted file mode 100644
index 39234948f..000000000
--- a/components/tabs/index.d.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-export interface Conditional {
-	/**
-	 * If true, component will be disabled
-	 * @default false
-	 */
-	disabled?: boolean
-}
-/**
- * Properties of components that have values that can be changed (T is the type of the value)
- */
-export interface Changeable<T> {
-	/**
-	 * Callback called when the picker value is changed.
-	 * @param v Type of the value
-	 */
-	onChange?: (v: T) => void
-}
-export interface TabsProps extends Props, Changeable<number> {
-	/**
-	 * Current
-	 */
-	index: number,
-}
-export class Tabs extends React.Component<TabsProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-export interface TabProps extends Props, Conditional {
-	/**
-	 * If true, the current component is visible.
-	 * @default false
-	 */
-	active?: boolean,
-	/**
-	 * If true, the current component is not visible.
-	 * @default false
-	 */
-	hidden?: boolean,
-	/**
-	 * Label text for navigation header
-	 */
-	label?: string,
-	/**
-	 * Callback function that is fired when the tab is activated.
-	 */
-	onActive?: Function,
-}
-export class Tab extends React.Component<TabProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
diff --git a/components/time_picker/index.d.ts b/components/time_picker/index.d.ts
deleted file mode 100644
index ee141895a..000000000
--- a/components/time_picker/index.d.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-/**
- * Properties of components that have values that can be changed (T is the type of the value)
- */
-export interface Changeable<T> {
-	/**
-	 * Callback called when the picker value is changed.
-	 * @param v Type of the value
-	 */
-	onChange?: (v: T) => void
-}
-export interface TimePickerProps extends Props, Changeable<Date> {
-	/**
-	 * Format to display the clock. It can be 24hr or ampm.
-	 * @default 24hr
-	 */
-	format?: string,
-	/**
-	 * Datetime object with currrently selected time
-	 */
-	value?: Date,
-}
-export default class TimePicker extends React.Component<TimePickerProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
diff --git a/components/tooltip/index.d.ts b/components/tooltip/index.d.ts
deleted file mode 100644
index 867412c2d..000000000
--- a/components/tooltip/index.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import * as React from 'react';
-export class TooltipComponent<P, S> extends React.Component<P, S> {
-	getDecoratedComponentInstance(): React.Component<P, S>;
-}
-
-export interface TooltipComponentClass<P> extends React.ComponentClass<P> {
-	new (props?: P, context?: any): TooltipComponent<P, any>;
-}
-
-export default function Tooltip<P>(componentClass: React.ComponentClass<P>): TooltipComponentClass<P>;
\ No newline at end of file

From d01a57664dfd769cfa4bbaa7a47865ca47239ff3 Mon Sep 17 00:00:00 2001
From: Ro Savage <rowan.savage@gmail.com>
Date: Tue, 21 Jun 2016 10:25:04 +1200
Subject: [PATCH 0651/1024] Add passing unknown props and checking of keypress

---
 components/date_picker/DatePicker.js | 13 ++++++++++++-
 components/time_picker/TimePicker.js | 13 ++++++++++++-
 lib/date_picker/DatePicker.js        | 18 ++++++++++++++++--
 lib/time_picker/TimePicker.js        | 18 ++++++++++++++++--
 4 files changed, 56 insertions(+), 6 deletions(-)

diff --git a/components/date_picker/DatePicker.js b/components/date_picker/DatePicker.js
index 21a70d8f1..2df58a691 100644
--- a/components/date_picker/DatePicker.js
+++ b/components/date_picker/DatePicker.js
@@ -28,6 +28,7 @@ const factory = (Input, DatePickerDialog) => {
       minDate: PropTypes.object,
       name: PropTypes.string,
       onChange: PropTypes.func,
+      onKeyPress: PropTypes.func,
       theme: PropTypes.shape({
         input: PropTypes.string
       }),
@@ -50,13 +51,21 @@ const factory = (Input, DatePickerDialog) => {
       this.setState({active: true});
     };
 
+    handleInputKeyPress = (event) => {
+      if (event.charCode === 13) {
+        events.pauseEvent(event);
+        this.setState({active: true});
+      }
+      if (this.props.onKeyPress) this.props.onKeyPress(event);
+    };
+
     handleSelect = (value, event) => {
       if (this.props.onChange) this.props.onChange(value, event);
       this.setState({active: false});
     };
 
     render () {
-      const { inputClassName, value } = this.props;
+      const { inputClassName, value, ...others } = this.props;
       const inputFormat = this.props.inputFormat || time.formatDate;
       const date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined;
       const formattedDate = date === undefined ? '' : inputFormat(value);
@@ -64,9 +73,11 @@ const factory = (Input, DatePickerDialog) => {
       return (
         <div data-react-toolbox='date-picker'>
           <Input
+            {...others}
             className={classnames(this.props.theme.input, {[inputClassName]: inputClassName })}
             error={this.props.error}
             onMouseDown={this.handleInputMouseDown}
+            onKeyPress={this.handleInputKeyPress}
             name={this.props.name}
             label={this.props.label}
             readOnly
diff --git a/components/time_picker/TimePicker.js b/components/time_picker/TimePicker.js
index 49d49a8ee..3ca3252a4 100644
--- a/components/time_picker/TimePicker.js
+++ b/components/time_picker/TimePicker.js
@@ -18,6 +18,7 @@ const factory = (TimePickerDialog, Input) => {
       label: PropTypes.string,
       name: PropTypes.string,
       onChange: PropTypes.func,
+      onKeyPress: PropTypes.func,
       theme: PropTypes.shape({
         input: PropTypes.string
       }),
@@ -42,22 +43,32 @@ const factory = (TimePickerDialog, Input) => {
       this.setState({active: true});
     };
 
+    handleInputKeyPress = (event) => {
+      if (event.charCode === 13) {
+        events.pauseEvent(event);
+        this.setState({active: true});
+      }
+      if (this.props.onKeyPress) this.props.onKeyPress(event);
+    };
+
     handleSelect = (value, event) => {
       if (this.props.onChange) this.props.onChange(value, event);
       this.setState({active: false});
     };
 
     render () {
-      const { value, format, inputClassName, theme } = this.props;
+      const { value, format, inputClassName, theme, ...others } = this.props;
       const formattedTime = value ? time.formatTime(value, format) : '';
       return (
         <div data-react-toolbox='time-picker'>
           <Input
+            {...others}
             className={classnames(theme.input, {[inputClassName]: inputClassName })}
             error={this.props.error}
             name={this.props.name}
             label={this.props.label}
             onMouseDown={this.handleInputMouseDown}
+            onKeyPress={this.handleInputKeyPress}
             readOnly
             type='text'
             value={formattedTime}
diff --git a/lib/date_picker/DatePicker.js b/lib/date_picker/DatePicker.js
index 34e6b334c..a7e55e1be 100644
--- a/lib/date_picker/DatePicker.js
+++ b/lib/date_picker/DatePicker.js
@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DatePicker = exports.datePickerFactory = undefined;
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
 var _react = require('react');
@@ -51,6 +53,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
@@ -79,6 +83,12 @@ var factory = function factory(Input, DatePickerDialog) {
       }, _this.handleInputMouseDown = function (event) {
         _events2.default.pauseEvent(event);
         _this.setState({ active: true });
+      }, _this.handleInputKeyPress = function (event) {
+        if (event.charCode === 13) {
+          _events2.default.pauseEvent(event);
+          _this.setState({ active: true });
+        }
+        if (_this.props.onKeyPress) _this.props.onKeyPress(event);
       }, _this.handleSelect = function (value, event) {
         if (_this.props.onChange) _this.props.onChange(value, event);
         _this.setState({ active: false });
@@ -92,6 +102,8 @@ var factory = function factory(Input, DatePickerDialog) {
         var inputClassName = _props.inputClassName;
         var value = _props.value;
 
+        var others = _objectWithoutProperties(_props, ['inputClassName', 'value']);
+
         var inputFormat = this.props.inputFormat || _time2.default.formatDate;
         var date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined;
         var formattedDate = date === undefined ? '' : inputFormat(value);
@@ -99,17 +111,18 @@ var factory = function factory(Input, DatePickerDialog) {
         return _react2.default.createElement(
           'div',
           { 'data-react-toolbox': 'date-picker' },
-          _react2.default.createElement(Input, {
+          _react2.default.createElement(Input, _extends({}, others, {
             className: (0, _classnames3.default)(this.props.theme.input, _defineProperty({}, inputClassName, inputClassName)),
             error: this.props.error,
             onMouseDown: this.handleInputMouseDown,
+            onKeyPress: this.handleInputKeyPress,
             name: this.props.name,
             label: this.props.label,
             readOnly: true,
             type: 'text',
             icon: this.props.icon,
             value: formattedDate
-          }),
+          })),
           _react2.default.createElement(DatePickerDialog, {
             autoOk: this.props.autoOk,
             active: this.state.active,
@@ -141,6 +154,7 @@ var factory = function factory(Input, DatePickerDialog) {
     minDate: _react.PropTypes.object,
     name: _react.PropTypes.string,
     onChange: _react.PropTypes.func,
+    onKeyPress: _react.PropTypes.func,
     theme: _react.PropTypes.shape({
       input: _react.PropTypes.string
     }),
diff --git a/lib/time_picker/TimePicker.js b/lib/time_picker/TimePicker.js
index bb577f142..836033692 100644
--- a/lib/time_picker/TimePicker.js
+++ b/lib/time_picker/TimePicker.js
@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TimePicker = exports.timePickerFactory = undefined;
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
 var _react = require('react');
@@ -43,6 +45,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
@@ -71,6 +75,12 @@ var factory = function factory(TimePickerDialog, Input) {
       }, _this.handleInputMouseDown = function (event) {
         _events2.default.pauseEvent(event);
         _this.setState({ active: true });
+      }, _this.handleInputKeyPress = function (event) {
+        if (event.charCode === 13) {
+          _events2.default.pauseEvent(event);
+          _this.setState({ active: true });
+        }
+        if (_this.props.onKeyPress) _this.props.onKeyPress(event);
       }, _this.handleSelect = function (value, event) {
         if (_this.props.onChange) _this.props.onChange(value, event);
         _this.setState({ active: false });
@@ -86,20 +96,23 @@ var factory = function factory(TimePickerDialog, Input) {
         var inputClassName = _props.inputClassName;
         var theme = _props.theme;
 
+        var others = _objectWithoutProperties(_props, ['value', 'format', 'inputClassName', 'theme']);
+
         var formattedTime = value ? _time2.default.formatTime(value, format) : '';
         return _react2.default.createElement(
           'div',
           { 'data-react-toolbox': 'time-picker' },
-          _react2.default.createElement(Input, {
+          _react2.default.createElement(Input, _extends({}, others, {
             className: (0, _classnames3.default)(theme.input, _defineProperty({}, inputClassName, inputClassName)),
             error: this.props.error,
             name: this.props.name,
             label: this.props.label,
             onMouseDown: this.handleInputMouseDown,
+            onKeyPress: this.handleInputKeyPress,
             readOnly: true,
             type: 'text',
             value: formattedTime
-          }),
+          })),
           _react2.default.createElement(TimePickerDialog, {
             active: this.state.active,
             className: this.props.className,
@@ -125,6 +138,7 @@ var factory = function factory(TimePickerDialog, Input) {
     label: _react.PropTypes.string,
     name: _react.PropTypes.string,
     onChange: _react.PropTypes.func,
+    onKeyPress: _react.PropTypes.func,
     theme: _react.PropTypes.shape({
       input: _react.PropTypes.string
     }),

From a11fe924c2cf83c6f0dae390edc2d25facae6406 Mon Sep 17 00:00:00 2001
From: Stein Strindhaug <stein@zeppelin.no>
Date: Mon, 27 Jun 2016 11:17:42 +0200
Subject: [PATCH 0652/1024] Reset overflow when unmounting

---
 components/overlay/Overlay.js | 1 +
 lib/overlay/Overlay.js        | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/overlay/Overlay.js b/components/overlay/Overlay.js
index f7cfe05e2..e2ff39187 100644
--- a/components/overlay/Overlay.js
+++ b/components/overlay/Overlay.js
@@ -43,6 +43,7 @@ class Overlay extends Component {
   }
 
   componentWillUnmount () {
+    document.body.style.overflow = null;
     if (this.escKeyListener) {
       document.body.removeEventListener('keydown', this.handleEscKey);
       this.escKeyListener = null;
diff --git a/lib/overlay/Overlay.js b/lib/overlay/Overlay.js
index 1bb8e48bc..7642b0d65 100644
--- a/lib/overlay/Overlay.js
+++ b/lib/overlay/Overlay.js
@@ -66,6 +66,7 @@ var Overlay = function (_Component) {
   }, {
     key: 'componentWillUnmount',
     value: function componentWillUnmount() {
+      document.body.style.overflow = null;
       if (this.escKeyListener) {
         document.body.removeEventListener('keydown', this.handleEscKey);
         this.escKeyListener = null;
@@ -127,4 +128,4 @@ Overlay.defaultProps = {
   invisible: false
 };
 exports.default = (0, _reactCssThemr.themr)(_identifiers.OVERLAY)(Overlay);
-exports.Overlay = Overlay;
\ No newline at end of file
+exports.Overlay = Overlay;

From e359805c5e7989b7a486b5403c54f9cf86dff8ac Mon Sep 17 00:00:00 2001
From: aft-luke <luke.horton@acrospire.technology>
Date: Mon, 27 Jun 2016 16:59:03 -0400
Subject: [PATCH 0653/1024] missing MENU for some reason in identifiers

---
 components/identifiers.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/identifiers.js b/components/identifiers.js
index bf567bf14..a3b46cef4 100644
--- a/components/identifiers.js
+++ b/components/identifiers.js
@@ -11,6 +11,7 @@ export const INPUT = 'RTInput';
 export const LAYOUT = 'RTLayout';
 export const LINK = 'RTLink';
 export const LIST = 'RTList';
+export const MENU = 'RTMenu';
 export const NAVIGATION = 'RTNavigation';
 export const OVERLAY = 'RTOverlay';
 export const PROGRESS_BAR = 'RTProgressBar';

From 3e29844e630e7702a6f07b938f5abbd864306d75 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 4 Jul 2016 22:03:57 +0200
Subject: [PATCH 0654/1024] Update to react 15.2.0

---
 components/autocomplete/Autocomplete.js |   6 +-
 components/avatar/Avatar.js             |   3 +-
 components/dropdown/Dropdown.js         |   2 +-
 components/list/ListItem.js             |  12 +-
 components/ripple/Ripple.js             |   1 +
 docs/package.json                       |   6 +-
 lib/app_bar/index.d.ts                  |  58 ------
 lib/autocomplete/index.d.ts             |  97 ----------
 lib/avatar/index.d.ts                   |  57 ------
 lib/button/index.d.ts                   | 124 -------------
 lib/card/index.d.ts                     | 225 ------------------------
 lib/checkbox/index.d.ts                 |  82 ---------
 lib/chip/index.d.ts                     |  68 -------
 lib/date_picker/index.d.ts              |  69 --------
 lib/dialog/index.d.ts                   | 159 -----------------
 lib/drawer/index.d.ts                   |  76 --------
 lib/dropdown/Dropdown.js                |   2 +-
 lib/dropdown/index.d.ts                 |  84 ---------
 lib/font_icon/index.d.ts                |  44 -----
 lib/hoc/ActivableRenderer.d.ts          |  13 --
 lib/identifiers.js                      |   1 +
 lib/input/Input.js                      |  31 ++++
 lib/input/index.d.ts                    | 124 -------------
 lib/layout/index.d.ts                   |  43 -----
 lib/link/index.d.ts                     |  58 ------
 lib/list/index.d.ts                     | 180 -------------------
 lib/menu/index.d.ts                     | 150 ----------------
 lib/navigation/index.d.ts               |  58 ------
 lib/overlay/index.d.ts                  |  51 ------
 lib/progress_bar/index.d.ts             |  71 --------
 lib/radio/index.d.ts                    | 101 -----------
 lib/ripple/index.d.ts                   |  20 ---
 lib/slider/index.d.ts                   |  74 --------
 lib/snackbar/index.d.ts                 | 100 -----------
 lib/switch/index.d.ts                   |  77 --------
 lib/table/index.d.ts                    |  66 -------
 lib/tabs/index.d.ts                     |  84 ---------
 lib/time_picker/index.d.ts              |  61 -------
 lib/tooltip/index.d.ts                  |  10 --
 package.json                            |  14 +-
 spec/components/avatar.js               |   2 +-
 41 files changed, 61 insertions(+), 2503 deletions(-)
 delete mode 100644 lib/app_bar/index.d.ts
 delete mode 100644 lib/autocomplete/index.d.ts
 delete mode 100644 lib/avatar/index.d.ts
 delete mode 100644 lib/button/index.d.ts
 delete mode 100644 lib/card/index.d.ts
 delete mode 100644 lib/checkbox/index.d.ts
 delete mode 100644 lib/chip/index.d.ts
 delete mode 100644 lib/date_picker/index.d.ts
 delete mode 100644 lib/dialog/index.d.ts
 delete mode 100644 lib/drawer/index.d.ts
 delete mode 100644 lib/dropdown/index.d.ts
 delete mode 100644 lib/font_icon/index.d.ts
 delete mode 100644 lib/hoc/ActivableRenderer.d.ts
 delete mode 100644 lib/input/index.d.ts
 delete mode 100644 lib/layout/index.d.ts
 delete mode 100644 lib/link/index.d.ts
 delete mode 100644 lib/list/index.d.ts
 delete mode 100644 lib/menu/index.d.ts
 delete mode 100644 lib/navigation/index.d.ts
 delete mode 100644 lib/overlay/index.d.ts
 delete mode 100644 lib/progress_bar/index.d.ts
 delete mode 100644 lib/radio/index.d.ts
 delete mode 100644 lib/ripple/index.d.ts
 delete mode 100644 lib/slider/index.d.ts
 delete mode 100644 lib/snackbar/index.d.ts
 delete mode 100644 lib/switch/index.d.ts
 delete mode 100644 lib/table/index.d.ts
 delete mode 100644 lib/tabs/index.d.ts
 delete mode 100644 lib/time_picker/index.d.ts
 delete mode 100644 lib/tooltip/index.d.ts

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index a205fa168..587f4e865 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -270,7 +270,11 @@ const factory = (Chip, Input) => {
    }
 
    render () {
-     const {error, label, theme, ...other} = this.props;
+     const {
+      error, label, source, suggestionMatch,           //eslint-disable-line no-unused-vars
+      selectedPosition, showSuggestionsWhenValueIsSet, //eslint-disable-line no-unused-vars
+      theme, ...other
+    } = this.props;
      const className = classnames(theme.autocomplete, {
        [theme.focus]: this.state.focus
      }, this.props.className);
diff --git a/components/avatar/Avatar.js b/components/avatar/Avatar.js
index baf0441e5..24cf719a7 100644
--- a/components/avatar/Avatar.js
+++ b/components/avatar/Avatar.js
@@ -1,11 +1,12 @@
 import React, { PropTypes } from 'react';
+import classnames from 'classnames';
 import { themr } from 'react-css-themr';
 import { AVATAR } from '../identifiers.js';
 import InjectFontIcon from '../font_icon/FontIcon.js';
 
 const factory = (FontIcon) => {
   const Avatar = ({children, className, icon, image, theme, title, ...other}) => (
-    <div data-react-toolbox='avatar' className={`${theme.avatar} ${className}`} {...other}>
+    <div data-react-toolbox='avatar' className={classnames(theme.avatar, className)} {...other}>
       {children}
       {typeof image === 'string' ? <img className={theme.image} src={image} title={title} /> : image}
       {typeof icon === 'string' ? <FontIcon className={theme.letter} value={icon} /> : icon}
diff --git a/components/dropdown/Dropdown.js b/components/dropdown/Dropdown.js
index 1c69124b9..d77a02c04 100644
--- a/components/dropdown/Dropdown.js
+++ b/components/dropdown/Dropdown.js
@@ -141,7 +141,7 @@ const factory = (Input) => {
     }
 
     render () {
-      const {template, theme, source, ...others} = this.props;
+      const {template, theme, source, allowBlank, auto, ...others} = this.props; //eslint-disable-line no-unused-vars
       const selected = this.getSelectedItem();
       const className = classnames(theme.dropdown, {
         [theme.up]: this.state.up,
diff --git a/components/list/ListItem.js b/components/list/ListItem.js
index 2cea098d7..f3bf537a4 100644
--- a/components/list/ListItem.js
+++ b/components/list/ListItem.js
@@ -42,16 +42,20 @@ const factory = (ripple, ListItemLayout, ListItemContent) => {
         if (!React.isValidElement(child)) {
           return;
         }
-        if (child.props.listItemIgnore) {
-          children.ignored.push(child);
+
+        const { listItemIgnore, ...rest } = child.props;
+        const strippedChild = { ...child, ...{ props: rest } };
+
+        if (listItemIgnore) {
+          children.ignored.push(strippedChild);
           return;
         }
         if (child.type === ListItemContent) {
-          children.itemContent = child;
+          children.itemContent = strippedChild;
           return;
         }
         const bucket = children.itemContent ? 'rightActions' : 'leftActions';
-        children[bucket].push({...child, key: i});
+        children[bucket].push({...strippedChild, key: i});
       });
 
       return children;
diff --git a/components/ripple/Ripple.js b/components/ripple/Ripple.js
index cabd88e9a..125d76037 100644
--- a/components/ripple/Ripple.js
+++ b/components/ripple/Ripple.js
@@ -113,6 +113,7 @@ const rippleFactory = (options = {}) => {
           const {
             children,
             ripple, //eslint-disable-line no-unused-vars
+            onRippleEnded, //eslint-disable-line no-unused-vars
             rippleClassName: className,
             rippleCentered: centered, //eslint-disable-line no-unused-vars
             rippleSpread: spread, //eslint-disable-line no-unused-vars
diff --git a/docs/package.json b/docs/package.json
index eafc34133..f9234b2d3 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -13,9 +13,9 @@
     "classnames": "^2.2.5",
     "codemirror": "^5.14.2",
     "history": "^2.1.1",
-    "react": "^15.0.2",
-    "react-css-themr": "^1.1.0",
-    "react-dom": "^15.0.2",
+    "react": "^15.2.0",
+    "react-css-themr": "^1.1.2",
+    "react-dom": "^15.2.0",
     "react-router": "^2.4.0"
   },
   "devDependencies": {
diff --git a/lib/app_bar/index.d.ts b/lib/app_bar/index.d.ts
deleted file mode 100644
index 97e2fa342..000000000
--- a/lib/app_bar/index.d.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-
-export interface AppBarProps extends Props {
-	/**
-	 * If true, the AppBar shows a shadow.
-	 * @default false
-	 */
-	flat?: boolean,
-	/**
-	 * Determine if the bar should have position fixed (true) or relative (false)
-	 * @default false
-	 */
-	fixed?: boolean,
-}
-/**
- * The app bar is a special kind of toolbar that�s used for branding, navigation, search, and actions. 
- * Usually it contains controls on the right and left side and a title with the current section or app name. 
- * You should give the content with children elements.
- */
-export class AppBar extends React.Component<AppBarProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-
-export default AppBar;
\ No newline at end of file
diff --git a/lib/autocomplete/index.d.ts b/lib/autocomplete/index.d.ts
deleted file mode 100644
index 39452ebd8..000000000
--- a/lib/autocomplete/index.d.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-export interface Conditional {
-	/**
-	 * If true, component will be disabled
-	 * @default false
-	 */
-	disabled?: boolean
-}
-
-/**
- * Properties of components that have values that can be changed (T is the type of the value)
- */
-export interface Changeable<T> {
-	/**
-	 * Callback called when the picker value is changed.
-	 * @param v Type of the value
-	 */
-	onChange?: (v: T) => void
-}
-
-export interface AutocompleteProps extends Props, Conditional, Changeable<string | Array<any>> {
-	/**
-	 * Sets the error string for the internal input element.
-	 */
-	error?: string,
-	/**
-	 * The text string to use for the floating label element.
-	 */
-	label?: string,
-	/**
-	 * If true, component can hold multiple values.
-	 * @default true
-	 */
-	multiple?: boolean,
-	/**
-	 * 	Object of key/values or array representing all items suggested.
-	 */
-	source: Object | Array<any>,
-	/**
-	 * If true, the list of suggestions will not be filtered when a value is selected, until the query is modified.
-	 * @default false
-	 */
-	showSuggestionsWhenValueIsSet?: boolean,
-	/**
-	 * Type of the input element. It can be a valid HTML5 input type
-	 * @default text
-	 */
-	type?: string,
-	/**
-	 * 	Value or array of values currently selected component.Current value of the input element.
-	 */
-	value?: string | Array<any>,
-}
-/**
- * An input field with a set of predeterminated labeled values. When it's focused it shows a list of hints that are filtered by label as the user types. 
- * They can be simple or multiple depending on the amount of values that can be selected. 
- * The opening direction is determined at opening time depending on the current position.
- */
-export class Autocomplete extends React.Component<AutocompleteProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-
-export default Autocomplete;
\ No newline at end of file
diff --git a/lib/avatar/index.d.ts b/lib/avatar/index.d.ts
deleted file mode 100644
index c30e43bb4..000000000
--- a/lib/avatar/index.d.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-export interface Iconic {
-	/**
-	 * Value of the icon (See icon component).
-	 */
-	icon?: string | React.ReactElement<any> | React.ReactHTMLElement<any>,
-}
-export interface AvatarProps extends Props, Iconic {
-	children?: any,
-	image?: string | React.ReactElement<any> | React.ReactHTMLElement<any> | React.ClassicComponent<any, any>,
-	title?: string | boolean,
-}
-/**
- * Avatars can be used to represent people. 
- * For personal avatars, offer personalization options. 
- * As users may choose not to personalize an avatar, provide delightful defaults. 
- * When used with a specific logo, avatars can also be used to represent brand.
- */
-export class Avatar extends React.Component<AvatarProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-
-export default Avatar;
\ No newline at end of file
diff --git a/lib/button/index.d.ts b/lib/button/index.d.ts
deleted file mode 100644
index ff8c4fa91..000000000
--- a/lib/button/index.d.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-
-// Interface for components with icons
-export interface Iconic {
-	/**
-	 * Value of the icon (See icon component).
-	 */
-	icon?: string | React.ReactElement<any> | React.ReactHTMLElement<any>,
-}
-
-export interface Conditional {
-	/**
-	 * If true, component will be disabled
-	 * @default false
-	 */
-	disabled?: boolean
-}
-
-/**
- * Properties of components that can be clicked
- */
-export interface Clickable {
-	/**
-	 *  Callback called when the button is clicked.
-	 */
-	onClick?: Function
-}
-export interface ButtonProps extends Props, Clickable, Conditional, Iconic {
-	/**
-	 * Indicates if the button should have accent color.
-	 * @default false
-	 */
-	accent?: boolean,
-	/**
-	 * If true, the button will have a flat look.
-	 * @default false
-	 */
-	flat?: boolean,
-	/**
-	 * If true, the button will have a floating look.
-	 * @default false
-	 */
-	floating?: boolean,
-	/**
-	 * If specified, the button will be rendered as an <a>
-	 */
-	href?: string,
-	/**
-	 * The text string to use for the name of the button.
-	 */
-	label?: string,
-	/**
-	 * If true, component will be disabled and show a loading animation.
-	 * @default false
-	 */
-	loading?: boolean,
-	/**
-	 * To be used with floating button. If true the button will be smaller. 
-	 * @default false
-	 */
-	mini?: boolean,
-	/**
-	 * Indicates if the button should have primary color.
-	 * @default false
-	 */
-	primary?: boolean,
-	/**
-	 * If true, the button will have a raised look.
-	 * @default false
-	 */
-	raised?: boolean,
-	/**
-	 * If true, component will have a ripple effect on click.
-	 * @default true
-	 */
-	ripple?: boolean,
-}
-/**
- * A button clearly communicates what action will occur when the user touches it. 
- * It consists of text, an image, or both, designed in accordance with your app’s color theme.
- */
-export class Button extends React.Component<ButtonProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-
-export class IconButton extends React.Component<ButtonProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-
-export default Button;
\ No newline at end of file
diff --git a/lib/card/index.d.ts b/lib/card/index.d.ts
deleted file mode 100644
index dc4f3a4b7..000000000
--- a/lib/card/index.d.ts
+++ /dev/null
@@ -1,225 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-export interface Iconic {
-	/**
-	 * Value of the icon (See icon component).
-	 */
-	icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
-}
-
-export interface Conditional {
-	/**
-	 * If true, component will be disabled
-	 * @default false
-	 */
-	disabled?: boolean
-}
-
-/**
- * Properties of components that can be clicked
- */
-export interface Clickable {
-	/**
-	 *  Callback called when the button is clicked.
-	 */
-	onClick?: Function
-}
-export interface ButtonProps extends Props, Clickable, Conditional, Iconic {
-	/**
-	 * Indicates if the button should have accent color.
-	 * @default false
-	 */
-	accent?: boolean,
-	/**
-	 * If true, the button will have a flat look.
-	 * @default false
-	 */
-	flat?: boolean,
-	/**
-	 * If true, the button will have a floating look.
-	 * @default false
-	 */
-	floating?: boolean,
-	/**
-	 * If specified, the button will be rendered as an <a>
-	 */
-	href?: string,
-	/**
-	 * The text string to use for the name of the button.
-	 */
-	label?: string,
-	/**
-	 * If true, component will be disabled and show a loading animation.
-	 * @default false
-	 */
-	loading?: boolean,
-	/**
-	 * To be used with floating button. If true the button will be smaller. 
-	 * @default false
-	 */
-	mini?: boolean,
-	/**
-	 * Indicates if the button should have primary color.
-	 * @default false
-	 */
-	primary?: boolean,
-	/**
-	 * If true, the button will have a raised look.
-	 * @default false
-	 */
-	raised?: boolean,
-	/**
-	 * If true, component will have a ripple effect on click.
-	 * @default true
-	 */
-	ripple?: boolean,
-}
-export interface CardProps extends Props, Clickable {
-	/**
-	 * Child components, usually Card subcomponents.
-	 */
-	children?: any,
-	/**
-	 * Increases the shadow depth to appear elevated.
-	 */
-	raised?: boolean,
-	/**
-	 * Array of objects describing actions. These actions will be rendered as buttons and the object fields will be transferred to those.
-	 * @default []
-	 */
-	actions?: Array<ButtonProps>,
-	/**
-	 * Sets HEX or RGBA color to add a colored layer to the heading.
-	 */
-	color?: string,
-	/**
-	 * URL to set as a background image in the heading.
-	 */
-	image?: string,
-	
-	/**
-	 * Type of the component to display general modifications. It can be 'wide' for a larger card, 'image' if it's an image card or 'event' which shows just a title on top.
-	 */
-	type?: string,
-}
-/**
- * A Card is a piece of paper with unique related data that serves as an entry point to more detailed information. 
- * For example, a card could contain a photo, text, and a link about a single subject.
- * Cards are composed of multiple subcomponents in React Toolbox. 
- * You can combine each of the subcomponents to create all different Material Design Cards given in the spec.
- */
-export class Card extends React.Component<CardProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-export interface CardTitleProps extends Props {
-	avatar?: string | React.ReactElement<any> | React.ReactHTMLElement<any> | React.ClassicComponent<any, any>,
-	/**
-	 * Children to pass through the component.
-	 */
-	children?: any,
-	/**
-	 * Sets a complementary smaller text under the title.
-	 */
-	subtitle?: string,
-	/**
-	 * Sets the title of the card.
-	 */
-	title?: string | boolean,
-}
-/**
- * A versatile title block that can be used in various places on the card, including the media area. 
- * This component can also display an avatar next to the title content.
- */
-export class CardTitle extends React.Component<CardTitleProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-export interface CardMediaProps extends Props {
-	/**
-	 * Forces a ('wide' 16:9) or ('square' 1:1) aspect ratio respectively. 
-	 * Unset, the media area will have a flexible height.
-	 * @default ''
-	 */
-	aspectRatio?: string,
-	/**
-	 * Usually an image/video element or a <CardTitle> component.
-	 */
-	children?: any,
-	/**
-	 * Sets the background color
-	 */
-	color?: string,
-	/**
-	 * Creates a dark overlay underneath the child components.
-	 */
-	contentOverlay?: boolean,
-	/**
-	 * Can be used instead of children. Accepts an element or a URL string.
-	 */
-	image?: string | React.ReactElement<any> | React.ReactHTMLElement<any> | React.ClassicComponent<any, any>,
-}
-/**
- * Used for displaying media such as images or videos on a card. 
- * Can also be used with a solid background color instead of an image.
- */
-export class CardMedia extends React.Component<CardMediaProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-export interface CardTextProps extends Props {
-	/**
-	 * Children to pass through the component.
-	 */
-	children?: any,
-}
-/**
- * Basic card content container. 
- * Good for small descriptions or other supplementary text.
- */
-export class CardText extends React.Component<CardTextProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-export interface CardActionsProps extends Props {
-	/**
-	 * Children to pass through the component.
-	 */
-	children?: any,
-}
-/**
- * This component is used as a container for supplemental card actions. 
- * Supplemental actions within the card are explicitly called out using icons, text, and UI controls, typically placed at the bottom of the card.
- */
-export class CardActions extends React.Component<CardActionsProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
diff --git a/lib/checkbox/index.d.ts b/lib/checkbox/index.d.ts
deleted file mode 100644
index e266c3d2a..000000000
--- a/lib/checkbox/index.d.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-export interface Conditional {
-	/**
-	 * If true, component will be disabled
-	 * @default false
-	 */
-	disabled?: boolean
-}
-
-/**
- * Properties of components that have values that can be changed (T is the type of the value)
- */
-export interface Changeable<T> {
-	/**
-	 * Callback called when the picker value is changed.
-	 * @param v Type of the value
-	 */
-	onChange?: (v: T) => void
-}
-
-export interface CheckboxProps extends Props, Changeable<boolean>, Conditional {
-	/**
-	 * Value for the checkbox, can be true or false.
-	 * @default false
-	 */
-	checked?: boolean,
-	/**
-	 * Text label to attach next to the checkbox element.
-	 */
-	label?: string,
-	/**
-	 * The name of the field to set in the input checkbox.
-	 */
-	name?: string,
-	/**
-	 * Callback called when the checkbox is blurred.
-	 */
-	onBlur?: Function,
-	/**
-	 * Callback called when the checkbox is focused
-	 */
-	onFocus?: Function,
-}
-export class Checkbox extends React.Component<CheckboxProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-
-export default Checkbox;
\ No newline at end of file
diff --git a/lib/chip/index.d.ts b/lib/chip/index.d.ts
deleted file mode 100644
index 8c081ea2b..000000000
--- a/lib/chip/index.d.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-export interface Conditional {
-	/**
-	 * If true, component will be disabled
-	 * @default false
-	 */
-	disabled?: boolean
-}
-
-export interface ChipProps extends Props {
-	/**
-	 * 	Child components, usually Avatar and inline elements
-	 */
-	children?: React.ReactNode;
-	/**
-	 * If true, the chip will be rendered with a delete icon.
-	 */
-	deletable?: boolean;
-	/**
-	 * Callback to be invoked when the delete icon is clicked.
-	 */
-	onDeleteClick?: React.MouseEventHandler
-}
-/**
- * Avatars can be used to represent people. 
- * For personal avatars, offer personalization options. 
- * As users may choose not to personalize an avatar, provide delightful defaults. 
- * When used with a specific logo, avatars can also be used to represent brand.
- */
-export class Chip extends React.Component<ChipProps, {}> {
-	render(): React.ReactElement<any>;
-}
-
-export default Chip;
\ No newline at end of file
diff --git a/lib/date_picker/index.d.ts b/lib/date_picker/index.d.ts
deleted file mode 100644
index b6a6425bc..000000000
--- a/lib/date_picker/index.d.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-/**
- * Properties of components that have values that can be changed (T is the type of the value)
- */
-export interface Changeable<T> {
-	/**
-	 * Callback called when the picker value is changed.
-	 * @param v Type of the value
-	 */
-	onChange?: (v: T) => void
-}
-
-export interface DatePickerProps extends Props, Changeable<Date> {
-	/**
-	 * Date object with the maximum selectable date.
-	 */
-	maxDate?: Date,
-	/**
-	 * Date object with the minimum selectable date.
-	 */
-	minDate?: Date,
-	/**
-	 * The text string to use like a input placeholder.
-	 */
-	placeholder?: string,
-	/**
-	 * Date object with the currently selected date.
-	 */
-	value?: Date,
-}
-export class DatePicker extends React.Component<DatePickerProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-
-export default DatePicker;
\ No newline at end of file
diff --git a/lib/dialog/index.d.ts b/lib/dialog/index.d.ts
deleted file mode 100644
index 72118a061..000000000
--- a/lib/dialog/index.d.ts
+++ /dev/null
@@ -1,159 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-export interface Iconic {
-	/**
-	 * Value of the icon (See icon component).
-	 */
-	icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
-}
-
-export interface Conditional {
-	/**
-	 * If true, component will be disabled
-	 * @default false
-	 */
-	disabled?: boolean
-}
-
-/**
- * Properties of components that can be clicked
- */
-export interface Clickable {
-	/**
-	 *  Callback called when the button is clicked.
-	 */
-	onClick?: Function
-}
-/**
- * Properties of modal components (Drawer, Dialog)
- */
-export interface Modal {
-	/**
-	 * If true, the dialog will be active.
-	 */
-	active: boolean,
-	/**
-	 * Callback called when the ESC key is pressed with the overlay active.
-	 */
-	onEscKeyDown?: Function,
-	/**
-	 * Callback to be invoked when the dialog overlay is clicked.
-	 */
-	onOverlayClick?: Function,
-	/**
-	 * Callback called when the mouse button is pressed on the overlay.
-	 */
-	onOverlayMouseDown?: Function,
-	/**
-	 * Callback called when the mouse is moving over the overlay.
-	 */
-	onOverlayMouseMove?: Function,
-	/**
-	 * Callback called when the mouse button is released over the overlay.
-	 */
-	onOverlayMouseUp?: Function,
-}
-export interface ButtonProps extends Props, Clickable, Conditional, Iconic {
-	/**
-	 * Indicates if the button should have accent color.
-	 * @default false
-	 */
-	accent?: boolean,
-	/**
-	 * If true, the button will have a flat look.
-	 * @default false
-	 */
-	flat?: boolean,
-	/**
-	 * If true, the button will have a floating look.
-	 * @default false
-	 */
-	floating?: boolean,
-	/**
-	 * If specified, the button will be rendered as an <a>
-	 */
-	href?: string,
-	/**
-	 * The text string to use for the name of the button.
-	 */
-	label?: string,
-	/**
-	 * If true, component will be disabled and show a loading animation.
-	 * @default false
-	 */
-	loading?: boolean,
-	/**
-	 * To be used with floating button. If true the button will be smaller. 
-	 * @default false
-	 */
-	mini?: boolean,
-	/**
-	 * Indicates if the button should have primary color.
-	 * @default false
-	 */
-	primary?: boolean,
-	/**
-	 * If true, the button will have a raised look.
-	 * @default false
-	 */
-	raised?: boolean,
-	/**
-	 * If true, component will have a ripple effect on click.
-	 * @default true
-	 */
-	ripple?: boolean,
-}
-export interface DialogProps extends Props, Modal {
-	/**
-	 * An array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons.
-	 * @default []
-	 */
-	actions?: Array<ButtonProps>,
-	/**
-	 * The text string to use as standar title of the dialog.
-	 */
-	title?: string | boolean,
-	/**
-	 * Used to determine the size of the dialog. It can be small, normal or large.
-	 * @default normal
-	 */
-	type?: string,
-}
-export class Dialog extends React.Component<DialogProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-
-export default Dialog;
\ No newline at end of file
diff --git a/lib/drawer/index.d.ts b/lib/drawer/index.d.ts
deleted file mode 100644
index 478dec865..000000000
--- a/lib/drawer/index.d.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-/**
- * Properties of modal components (Drawer, Dialog)
- */
-export interface Modal {
-	/**
-	 * If true, the dialog will be active.
-	 */
-	active: boolean,
-	/**
-	 * Callback called when the ESC key is pressed with the overlay active.
-	 */
-	onEscKeyDown?: Function,
-	/**
-	 * Callback to be invoked when the dialog overlay is clicked.
-	 */
-	onOverlayClick?: Function,
-	/**
-	 * Callback called when the mouse button is pressed on the overlay.
-	 */
-	onOverlayMouseDown?: Function,
-	/**
-	 * Callback called when the mouse is moving over the overlay.
-	 */
-	onOverlayMouseMove?: Function,
-	/**
-	 * Callback called when the mouse button is released over the overlay.
-	 */
-	onOverlayMouseUp?: Function,
-}
-export interface DrawerProps extends Props, Modal {
-	/**
-	 * Type of drawer. It can be 'left' or 'right' to display the drawer on the left or right side of the screen.
-	 * @default left
-	 */
-	type?: string
-}
-export class Drawer extends React.Component<DrawerProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-
-export default Drawer;
\ No newline at end of file
diff --git a/lib/dropdown/Dropdown.js b/lib/dropdown/Dropdown.js
index ea2304b04..a2c0fb429 100644
--- a/lib/dropdown/Dropdown.js
+++ b/lib/dropdown/Dropdown.js
@@ -204,7 +204,7 @@ var factory = function factory(Input) {
             onMouseDown: this.handleMouseDown,
             readOnly: true,
             type: template && selected ? 'hidden' : null,
-            value: selected && selected.label
+            value: selected && selected.label ? selected.label : ''
           })),
           template && selected ? this.renderTemplateValue(selected) : null,
           _react2.default.createElement(
diff --git a/lib/dropdown/index.d.ts b/lib/dropdown/index.d.ts
deleted file mode 100644
index b9d90484f..000000000
--- a/lib/dropdown/index.d.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-export interface Conditional {
-	/**
-	 * If true, component will be disabled
-	 * @default false
-	 */
-	disabled?: boolean
-}
-export interface Option<T> {
-	label: string,
-	value: T,
-}
-/**
- * Properties of components that have values that can be changed (T is the type of the value)
- */
-export interface Changeable<T> {
-	/**
-	 * Callback called when the picker value is changed.
-	 * @param v Type of the value
-	 */
-	onChange?: (v: T) => void
-}
-export interface DropdownProps extends Props, Changeable<any>, Conditional {
-	/**
-	 * If true, the dropdown will open up or down depending on the position in the screen.
-	 */
-	auto?: boolean,
-	/**
-	 * The text string to use for the floating label element.
-	 */
-	label?: string,
-	/**
-	 * Array of data objects with the data to represent in the dropdown.
-	 */
-	source: Array<Option<any>>,
-	/**
-	 * Callback function that returns a JSX template to represent the element.
-	 */
-	template?: Function,
-	/**
-	 * Default value using JSON data.
-	 */
-	value: string,
-}
-
-export class Dropdown extends React.Component<DropdownProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-
-export default Dropdown;
\ No newline at end of file
diff --git a/lib/font_icon/index.d.ts b/lib/font_icon/index.d.ts
deleted file mode 100644
index 8fc061fdc..000000000
--- a/lib/font_icon/index.d.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-
-export interface FontIconProps extends Props {
-	value: string
-}
-export class FontIcon extends React.Component<FontIconProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-
-export default FontIcon;
\ No newline at end of file
diff --git a/lib/hoc/ActivableRenderer.d.ts b/lib/hoc/ActivableRenderer.d.ts
deleted file mode 100644
index ab73e065c..000000000
--- a/lib/hoc/ActivableRenderer.d.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import * as React from 'react';
-export interface ActivableRendererOptions {
-	/**
-	 * @default 500
-	 */
-	delay?: number;
-}
-export interface ActivableRendererProps {
-	active: boolean;
-	children?: any;
-	delay?: number
-}
-export default function ActivableRendererFactory<P>(options?: ActivableRendererOptions): (componentClass: React.ComponentClass<P>) => React.ComponentClass<P & ActivableRendererProps>
\ No newline at end of file
diff --git a/lib/identifiers.js b/lib/identifiers.js
index 5bc7ebe24..b301fbec5 100644
--- a/lib/identifiers.js
+++ b/lib/identifiers.js
@@ -16,6 +16,7 @@ var INPUT = exports.INPUT = 'RTInput';
 var LAYOUT = exports.LAYOUT = 'RTLayout';
 var LINK = exports.LINK = 'RTLink';
 var LIST = exports.LIST = 'RTList';
+var MENU = exports.MENU = 'RTMenu';
 var NAVIGATION = exports.NAVIGATION = 'RTNavigation';
 var OVERLAY = exports.OVERLAY = 'RTOverlay';
 var PROGRESS_BAR = exports.PROGRESS_BAR = 'RTProgressBar';
diff --git a/lib/input/Input.js b/lib/input/Input.js
index 27e7d9b03..02b397eef 100644
--- a/lib/input/Input.js
+++ b/lib/input/Input.js
@@ -53,11 +53,42 @@ var factory = function factory(FontIcon) {
       }
 
       return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Input)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleChange = function (event) {
+        if (_this.props.multiline) {
+          _this.handleAutoresize();
+        }
         if (_this.props.onChange) _this.props.onChange(event.target.value, event);
+      }, _this.handleAutoresize = function () {
+        var element = _this.refs.input;
+        // compute the height difference between inner height and outer height
+        var style = getComputedStyle(element, null);
+        var heightOffset = style.boxSizing === 'content-box' ? -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom)) : parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
+
+        // resize the input to its content size
+        element.style.height = 'auto';
+        element.style.height = element.scrollHeight + heightOffset + 'px';
       }, _temp), _possibleConstructorReturn(_this, _ret);
     }
 
     _createClass(Input, [{
+      key: 'componentDidMount',
+      value: function componentDidMount() {
+        window.addEventListener('resize', this.handleAutoresize);
+      }
+    }, {
+      key: 'componentWillReceiveProps',
+      value: function componentWillReceiveProps(nextProps) {
+        if (!this.props.multiline && nextProps.multiline) {
+          window.addEventListener('resize', this.handleAutoresize);
+        } else if (this.props.multiline && !nextProps.multiline) {
+          window.removeEventListener('resize', this.handleAutoresize);
+        }
+      }
+    }, {
+      key: 'componentWillUnmount',
+      value: function componentWillUnmount() {
+        window.removeEventListener('resize', this.handleAutoresize);
+      }
+    }, {
       key: 'blur',
       value: function blur() {
         this.refs.input.blur();
diff --git a/lib/input/index.d.ts b/lib/input/index.d.ts
deleted file mode 100644
index 67108330d..000000000
--- a/lib/input/index.d.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-export interface Conditional {
-	/**
-	 * If true, component will be disabled
-	 * @default false
-	 */
-	disabled?: boolean
-}
-
-/**
- * Properties of components that have values that can be changed (T is the type of the value)
- */
-export interface Changeable<T> {
-	/**
-	 * Callback called when the picker value is changed.
-	 * @param v Type of the value
-	 */
-	onChange?: (v: T) => void
-}
-
-export interface Iconic {
-	/**
-	 * Value of the icon (See icon component).
-	 */
-	icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
-}
-
-export interface InputProps extends Props, Conditional, Changeable<string>, Iconic {
-	/**
-	 * Give an error string to display under the field.
-	 */
-	error?: string,
-	/**
-	 * Indicates if the label is floating in the input field or not.
-	 * @default true
-	 */
-	floating?: boolean,
-	/**
-	 * The text string to use for the floating label element.
-	 */
-	label?: string,
-	/**
-	 * Specifies the maximum number of characters allowed in the component.
-	 */
-	maxLength?: number,
-	/**
-	 * If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.
-	 * @default false
-	 */
-	multiline?: boolean,
-	/**
-	 * Callback function that is fired when components is blurred.
-	 */
-	onBlur?: Function,
-	/**
-	 * Callback function that is fired when components is focused.
-	 */
-	onFocus?: Function,
-	/**
-	 * Callback function that is fired when a key is pressed down.
-	 */
-	onKeyDown?: Function,
-	/**
-	 * Callback function that is fired when a key is pressed.
-	 */
-	onKeyPress?: Function,
-	/**
-	 * Callback function that is fired when a key is released.
-	 */
-	onKeyUp?: Function,
-	/**
-	 * If true, the html input has a required value.
-	 * @default false
-	 */
-	required?: boolean,
-	/**
-	 * Type of the input element. It can be a valid HTML5 input type
-	 * @default text
-	 */
-	type?: string,
-	/**
-	 * Current value of the input element.
-	 */
-	value?: string,
-}
-export class Input extends React.Component<InputProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-
-export default Input;
\ No newline at end of file
diff --git a/lib/layout/index.d.ts b/lib/layout/index.d.ts
deleted file mode 100644
index 60d32a099..000000000
--- a/lib/layout/index.d.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as React from 'react';
-
-export interface LayoutProps {
-  className?:string
-}
-
-export interface NavDrawerProps {
-  width?:'normal' | 'wide',
-  active?:boolean,
-  pinned?:boolean,
-  permanentAt?:'sm'|'md'|'lg'|'xl'|'xxl'|'xxxl',
-  onOverlayClick?:() => void,
-  scrollY?:boolean,
-  className?:string
-}
-
-export interface PanelProps {
-  scrollY?:boolean,
-  className?:string
-}
-
-export interface SidebarProps {
-  width?:'1'|'2'|'3'|'4'|'5'|'6'|'7'|'8'|'9'|'10'|'11'|'12'|'25'|'33'|'50'|'66'|'75'|'100'
-  pinned?:boolean,
-  scrollY?:boolean,
-  className?:string
-}
-
-export class Layout extends React.Component<LayoutProps, {}> {
-  render():React.DOMElement<any, any>;
-}
-
-export class NavDrawer extends React.Component<NavDrawerProps, {}> {
-  render():React.DOMElement<any, any>;
-}
-
-export class Panel extends React.Component<PanelProps, {}> {
-  render():React.DOMElement<any, any>;
-}
-
-export class Sidebar extends React.Component<SidebarProps, {}> {
-  render():React.DOMElement<any, any>;
-}
\ No newline at end of file
diff --git a/lib/link/index.d.ts b/lib/link/index.d.ts
deleted file mode 100644
index 565f80e48..000000000
--- a/lib/link/index.d.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-
-export interface Iconic {
-	/**
-	 * Value of the icon (See icon component).
-	 */
-	icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
-}
-export interface LinkProps extends Props, Iconic {
-	href: string,
-	/**
-	 * The text string used for the text content of the link.
-	 */
-	label: string,
-	/**
-	 * Sets a count number useful to display in the page how many times was visited for example.
-	 */
-	count?: number,
-}
-export class Link extends React.Component<LinkProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-
-export default Link;
\ No newline at end of file
diff --git a/lib/list/index.d.ts b/lib/list/index.d.ts
deleted file mode 100644
index 30501554d..000000000
--- a/lib/list/index.d.ts
+++ /dev/null
@@ -1,180 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-export interface Conditional {
-	/**
-	 * If true, component will be disabled
-	 * @default false
-	 */
-	disabled?: boolean
-}
-export interface Clickable {
-	/**
-	 *  Callback called when the button is clicked.
-	 */
-	onClick?: Function
-}
-/**
- * Properties of components that have values that can be changed (T is the type of the value)
- */
-export interface Changeable<T> {
-	/**
-	 * Callback called when the picker value is changed.
-	 * @param v Type of the value
-	 */
-	onChange?: (v: T) => void
-}
-
-export interface Iconic {
-	/**
-	 * Value of the icon (See icon component).
-	 */
-	icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
-}
-
-export interface ListProps extends Props {
-	/**
-	 * If true, each element in the list will have a ripple effect on click
-	 * @default false
-	 */
-	ripple?: boolean,
-	/**
-	 * If true, the elements in the list will display a hover effect and a pointer cursor.
-	 * @default false
-	 */
-	selectable?: boolean,
-}
-export class List extends React.Component<ListProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-export interface ListItemProps extends Props, Conditional, Clickable {
-	/**
-	 * A string URL to specify an avatar in the left side of the item.
-	 */
-	avatar?: string,
-	/**
-	 * Main text of the item. Required.
-	 */
-	caption?: string,
-	/**
-	 * An element that will be displayed as the item. If set, this will override `caption` and `legend`.
-	 */
-	itemContent?: React.ReactElement<any>,
-	/**
-	 * 	A list of elements that are placed on the left side of the item and after the avatar attribute.
-	 */
-	leftActions?: React.ReactElement<any>[],
-	/**
-	 * A string key of a font icon to display an icon in the left side of the item.
-	 */
-	leftIcon?: string,
-	/**
-	 * Secondary text to display under the caption.
-	 */
-	legend?: string,
-	/**
-	 * 	A list of elements that are placed on the right side of the item and after the rightIcon attribute.
-	 */
-	rightActions?: React.ReactElement<any>[],
-	/**
-	 * The same as the leftIcon but in this case the icon is displayed in the right side.
-	 */
-	rightIcon?: string,
-	/**
-	 * If true, the item displays a ripple effect on click. By default it's inherited from the parent element.
-	 * @default false
-	 */
-	ripple?: boolean,
-	/**
-	 * If true, the elements in the list will display a hover effect and a pointer cursor. Inherited from the parent
-	 * @default false
-	 */
-	selectable?: boolean,
-	/**
-	 * In case you want to provide the item as a link, you can pass this property to specify the href.
-	 */
-	to?: string;
-}
-export class ListItem extends React.Component<ListItemProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-export interface ListCheckboxProps extends Props, Conditional, Changeable<boolean> {
-	/**
-	 * Main text of the item. Required.
-	 */
-	caption?: string,
-	/**
-	 * If true the checkbox appears checked by default.
-	 * @default false
-	 */
-	checked: boolean,
-	/**
-	 * Secondary text to display under the caption.
-	 */
-	legend?: string,
-	/**
-	 * Name for the checkbox input item.
-	 */
-	name?: string,
-	/**
-	 * Callback called when the input element is blurred.
-	 */
-	onBlur?: Function,
-	/**
-	 * Callback called when the input element is focused.
-	 */
-	onFocus?: Function,
-}
-export class ListCheckbox extends React.Component<ListCheckboxProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-export interface ListSubHeaderProps extends Props {
-	/**
-	 * List header caption.
-	 */
-	caption: string;
-}
-export class ListSubHeader extends React.Component<ListSubHeaderProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-export interface ListDividerProps extends Props {
-	/**
-	 * Indicates if the divider should be full width or should leave a space on the left side.
-	 */
-	inset: boolean;
-}
-export class ListDivider extends React.Component<ListDividerProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
diff --git a/lib/menu/index.d.ts b/lib/menu/index.d.ts
deleted file mode 100644
index 542895486..000000000
--- a/lib/menu/index.d.ts
+++ /dev/null
@@ -1,150 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-export interface Conditional {
-	/**
-	 * If true, component will be disabled
-	 * @default false
-	 */
-	disabled?: boolean
-}
-
-export interface Iconic {
-	/**
-	 * Value of the icon (See icon component).
-	 */
-	icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
-}
-export interface MenuProps extends Props {
-	/**
-	 * If true, the menu will be displayed as opened by default.
-	 * @default false
-	 */
-	active?: boolean,
-	/**
-	 * Callback that will be called when the menu is being hidden.
-	 */
-	onHide?: Function,
-	/**
-	 * Callback that will be called when the menu is being shown.
-	 */
-	onShow?: Function,
-	/**
-	 * If true the menu wrapper will show an outline with a soft shadow.
-	 * @default true
-	 */
-	outline?: boolean,
-	/**
-	 * Determine the position of the menu. 
-	 * With static value the menu will be always shown, auto means that the it will decide the opening direction based on the current position. 
-	 * To force a position use top-left, top-right, bottom-left, bottom-right.
-	 * @default static
-	 */
-	position?: string,
-	/**
-	 * If true, the menu items will show a ripple effect on click.
-	 */
-	ripple?: boolean,
-	/**
-	 * If true, the menu will keep a value to highlight the active child item.
-	 */
-	selectable?: boolean,
-	/**
-	 *  Used for selectable menus and indicates the initial value so the child item with this value can be highlighted.
-	 */
-	value?: boolean,
-}
-export class Menu extends React.Component<MenuProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-export interface IconMenuProps extends Props, Iconic {
-	/**
-	 * If true, the icon will show a ripple when is clicked.
-	 */
-	iconRipple?: boolean,
-	/**
-	 * Transferred to the Menu component.
-	 * @default true
-	 */
-	menuRipple?: boolean,
-	/**
-	 * Callback that will be called when the icon is clicked.
-	 */
-	onClick?: Function,
-	/**
-	 * Callback that will be called when the menu is being hidden.
-	 */
-	onHide?: Function, 
-	/**
-	 * Callback that will be called when the menu is being shown.
-	 */
-	onShow?: Function,
-	/**
-	 * Callback that will be called when a menu item is selected.
-	 */
-	onSelect?: Function,
-	/**
-	 * Determine the position of the menu. This property is transferred to the inner Menu component.
-	 * @default auto
-	 */
-	position?: string,
-	/**
-	 * If true, the menu will keep a value to highlight the active child item. Transferred to the Menu
-	 */
-	selectable?: boolean,
-}
-export class IconMenu extends React.Component<IconMenuProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-export interface MenuItemProps extends Props, Conditional, Iconic {
-	/**
-	 * The text to include in the menu item.
-	 */
-	caption?: string,
-	/**
-	 * If true, the item will show a ripple effect when it's clicked. Inherited from the parent.
-	 */
-	ripple?: boolean,
-	/**
-	 * Transferred from the Menu component for selectable menus. Indicates if it's the current active option.
-	 */
-	selected?: boolean,
-}
-export class MenuItem extends React.Component<MenuItemProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-export class MenuDivider extends React.Component<any, {}> {
-	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
diff --git a/lib/navigation/index.d.ts b/lib/navigation/index.d.ts
deleted file mode 100644
index 6165fc761..000000000
--- a/lib/navigation/index.d.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import * as React from 'react';
-import { ButtonProps } from '../button'
-import { LinkProps } from '../link'
-
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-
-export interface NavigationProps extends Props {
-	/**
-	 * Array of objects that represent buttons so the keys will be transferred as properties to those.
-	 */
-	actions?: Array<ButtonProps>,
-	/**
-	 * Array of objects similar to actions but that will be rendered as <Link/> component definition.
-	 */
-	routes?: Array<LinkProps>,
-	/**
-	 * Type of the navigation, it can be 'vertical' or 'horizontal'.
-	 */
-	type?: string,
-}
-export class Navigation extends React.Component<NavigationProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-
-export default Navigation;
\ No newline at end of file
diff --git a/lib/overlay/index.d.ts b/lib/overlay/index.d.ts
deleted file mode 100644
index b2d35b7f1..000000000
--- a/lib/overlay/index.d.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-export interface OverlayProps extends Props {
-	active?: boolean;
-	children?: any;
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string;
-	invisible?: boolean;
-	onClick?: Function;
-	onEscKeyDown?: Function
-}
-export class Overlay extends React.Component<OverlayProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-
-export default Overlay;
\ No newline at end of file
diff --git a/lib/progress_bar/index.d.ts b/lib/progress_bar/index.d.ts
deleted file mode 100644
index 44f446842..000000000
--- a/lib/progress_bar/index.d.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-export interface ProgressBarProps extends Props {
-	/**
-	 * Value of a secondary progress bar useful for buffering.
-	 */
-	buffer?: number,
-	/**
-	 * Maximum value permitted.
-	 */
-	max?: number, //
-	/**
-	 * minimum value permitted.
-	 */
-	min?: number, //
-	/**
-	 * Mode of the progress bar, it can be determinate or indeterminate.
-	 */
-	mode?: string, //
-	/**
-	 * If true, the circular progress bar will be changing its color.
-	 */
-	multicolor?: boolean, //
-	/**
-	 * Type of the progress bar, it can be circular or linear.
-	 * @default linear
-	 */
-	type?: string,
-	/**
-	 * Value of the current progress.
-	 */
-	value?: number,
-}
-export class ProgressBar extends React.Component<ProgressBarProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-
-export default ProgressBar;
\ No newline at end of file
diff --git a/lib/radio/index.d.ts b/lib/radio/index.d.ts
deleted file mode 100644
index e0222005f..000000000
--- a/lib/radio/index.d.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-export interface Conditional {
-	/**
-	 * If true, component will be disabled
-	 * @default false
-	 */
-	disabled?: boolean
-}
-/**
- * Properties of components that have values that can be changed (T is the type of the value)
- */
-export interface Changeable<T> {
-	/**
-	 * Callback called when the picker value is changed.
-	 * @param v Type of the value
-	 */
-	onChange?: (v: T) => void
-}
-
-export interface RadioGroupProps extends Props, Conditional, Changeable<any> {
-	/**
-	 * Name for the input element group.
-	 */
-	name?: string,
-	/**
-	 * Default value selected in the radio group.
-	 */
-	value?: any,
-}
-export class RadioGroup extends React.Component<RadioGroupProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-export interface RadioButtonProps extends Props, Conditional {
-	/**
-	 * If true, the input element will be selected by default. Transferred from the parent.
-	 */
-	checked?: boolean,
-	/**
-	 * 	Label for the radio button.
-	 */
-	label?: string;
-	/**
-	 * Name for the input element.
-	 */
-	name?: string,
-	/**
-	 * Callback function that will be invoked when the input is blurred.
-	 */
-	onBlur?: Function,
-	/**
-	 * Callback function that will be invoked when the value changes.
-	 */
-	onChange?: Function,
-	/**
-	 * Callback function that will be invoked when the input is focused.
-	 */
-	onFocus?: Function,
-	/**
-	 * Value for the radio button.
-	 */
-	value: any,
-}
-export class RadioButton extends React.Component<RadioButtonProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-
-export default RadioButton;
\ No newline at end of file
diff --git a/lib/ripple/index.d.ts b/lib/ripple/index.d.ts
deleted file mode 100644
index 78d4d73ed..000000000
--- a/lib/ripple/index.d.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react';
-
-export interface RippleProps {
-  centered?:boolean,
-  className?:boolean,
-  onRippleEnded:() => void,
-  spread?:number,
-  theme?:{
-    ripple?:string,
-    rippleActive?:string,
-    rippleRestarting?:string,
-    rippleWrapper?:string
-  }
-}
-
-export class Ripple extends React.Component<RippleProps, {}> {
-  render():React.DOMElement<any, any>;
-}
-
-export default Ripple;
\ No newline at end of file
diff --git a/lib/slider/index.d.ts b/lib/slider/index.d.ts
deleted file mode 100644
index 89d9f884d..000000000
--- a/lib/slider/index.d.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-export interface SliderProps extends Props {
-	/**
-	 * If true, an input is shown and the user can set the slider from keyboard value.
-	 */
-	editable?: boolean,
-	/**
-	 * Maximum value permitted.
-	 */
-	max?: number,
-	/**
-	 * Minimum value permitted.
-	 */
-	min?: number,
-	/**
-	 * Callback function that will be invoked when the slider value changes.
-	 */
-	onChange?: Function,
-	/**
-	 * If true, a pin with numeric value label is shown when the slider thumb is pressed. Use for settings for which users need to know the exact value of the setting.
-	 */
-	pinned?: boolean,
-	/**
-	 * If true, the slider thumb snaps to tick marks evenly spaced based on the step property value.
-	 */
-	snaps?: boolean,
-	/**
-	 * Amount to vary the value when the knob is moved or increase/decrease is called.
-	 */
-	step?: number,
-	/**
-	 * Current value of the slider.
-	 */
-	value: number,
-}
-export class Slider extends React.Component<SliderProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-
-export default Slider;
\ No newline at end of file
diff --git a/lib/snackbar/index.d.ts b/lib/snackbar/index.d.ts
deleted file mode 100644
index 6df9264fd..000000000
--- a/lib/snackbar/index.d.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-export interface Iconic {
-	/**
-	 * Value of the icon (See icon component).
-	 */
-	icon?: string | __React.ReactElement<any> | __React.ReactHTMLElement<any>,
-}
-export interface Modal {
-	/**
-	 * If true, the dialog will be active.
-	 */
-	active: boolean,
-	/**
-	 * Callback called when the ESC key is pressed with the overlay active.
-	 */
-	onEscKeyDown?: Function,
-	/**
-	 * Callback to be invoked when the dialog overlay is clicked.
-	 */
-	onOverlayClick?: Function,
-	/**
-	 * Callback called when the mouse button is pressed on the overlay.
-	 */
-	onOverlayMouseDown?: Function,
-	/**
-	 * Callback called when the mouse is moving over the overlay.
-	 */
-	onOverlayMouseMove?: Function,
-	/**
-	 * Callback called when the mouse button is released over the overlay.
-	 */
-	onOverlayMouseUp?: Function,
-}
-
-export interface SnackbarProps extends Props, Modal, Iconic {
-	/**
-	 * For the action component inside the Snackbar.
-	 */
-	action?: string,
-	/**
-	 * Text to display in the content.
-	 */
-	label?: string,
-	/**
-	 * Callback function that will be called when the button action is clicked.
-	 */
-	onClick?: Function,
-	/**
-	 * Callback function when finish the set timeout.
-	 */
-	onTimeout?: Function, 
-	/**
-	 * amount of time after the Snackbar will be automatically hidden.
-	 */
-	timeout?: number,
-	/**
-	 * Indicates the action type. Can be 'accept', 'warning' or 'cancel'
-	 */
-	type?: string,
-}
-
-export class Snackbar extends React.Component<SnackbarProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-
-export default Snackbar;
\ No newline at end of file
diff --git a/lib/switch/index.d.ts b/lib/switch/index.d.ts
deleted file mode 100644
index 4f57f3ab0..000000000
--- a/lib/switch/index.d.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-export interface Conditional {
-	/**
-	 * If true, component will be disabled
-	 * @default false
-	 */
-	disabled?: boolean
-}
-export interface SwitchProps extends Props, Conditional {
-	/**
-	 * If true, the switch will be enabled.
-	 */
-	checked: boolean,
-	/**
-	 * If true, component will be disabled.
-	 */
-	disabled?: boolean,
-	/**
-	 * The text string to use for the floating label element.
-	 */
-	label?: string,
-	/**
-	 * The text string used as name of the input.
-	 */
-	name?: string,
-	/**
-	 * Callback function that is fired when when the switch is blurred.
-	 */
-	onBlur?: Function,
-	/**
-	 * Callback function that is fired when the components's value changes.
-	 */
-	onChange?: Function,
-	/**
-	 * Callback function fire when the switch is focused.
-	 */
-	onFocus?: Function,
-}
-export class Switch extends React.Component<SwitchProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-
-export default Switch;
\ No newline at end of file
diff --git a/lib/table/index.d.ts b/lib/table/index.d.ts
deleted file mode 100644
index 6893b2b7f..000000000
--- a/lib/table/index.d.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-export interface TableProps extends Props {
-	/**
-	 * If true, component will show a heading using model field names.
-	 */
-	heading?: boolean,
-	/**
-	 * Object describing the data model that represents each object in the source.
-	 */
-	model?: { [key: string]: string },
-	/**
-	 * Callback function that is fired when an item in a row changes. If set, rows are editable.
-	 */
-	onChange?: Function,
-	/**
-	 * Callback function invoked when the row selection changes.
-	 */
-	onSelect?: Function,
-	/**
-	 * Array of indexes of the items in the source that should appear as selected.
-	 */
-	selected?: Array<number>,
-	/**
-	 * Array of objects representing each item to show.
-	 */
-	source?: Array<{ [key: string]: any }>,
-}
-export class Table extends React.Component<TableProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-
-export default Table;
\ No newline at end of file
diff --git a/lib/tabs/index.d.ts b/lib/tabs/index.d.ts
deleted file mode 100644
index 39234948f..000000000
--- a/lib/tabs/index.d.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-export interface Conditional {
-	/**
-	 * If true, component will be disabled
-	 * @default false
-	 */
-	disabled?: boolean
-}
-/**
- * Properties of components that have values that can be changed (T is the type of the value)
- */
-export interface Changeable<T> {
-	/**
-	 * Callback called when the picker value is changed.
-	 * @param v Type of the value
-	 */
-	onChange?: (v: T) => void
-}
-export interface TabsProps extends Props, Changeable<number> {
-	/**
-	 * Current
-	 */
-	index: number,
-}
-export class Tabs extends React.Component<TabsProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-export interface TabProps extends Props, Conditional {
-	/**
-	 * If true, the current component is visible.
-	 * @default false
-	 */
-	active?: boolean,
-	/**
-	 * If true, the current component is not visible.
-	 * @default false
-	 */
-	hidden?: boolean,
-	/**
-	 * Label text for navigation header
-	 */
-	label?: string,
-	/**
-	 * Callback function that is fired when the tab is activated.
-	 */
-	onActive?: Function,
-}
-export class Tab extends React.Component<TabProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
\ No newline at end of file
diff --git a/lib/time_picker/index.d.ts b/lib/time_picker/index.d.ts
deleted file mode 100644
index 2a7a6291b..000000000
--- a/lib/time_picker/index.d.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import * as React from 'react';
-export interface Props {
-	/**
-	 * Sets a CSS class on the component.
-	 */
-	className?: string,
-	id?: string;
-	/**
-	 * A key used to uniquely identify the element within an Array
-	 */
-	key?: string,
-	/**
-	 * Inline style
-	 */
-	style?: any,
-	/**
-	 * Tooltip text
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltip?: string,
-	/**
-	 * Amount of time in miliseconds spent before the tooltip is visible.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipDelay?: number,
-	/**
-	 * If true, the Tooltip hides after a click in the host component.
-	 * APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
-	 * @default true
-	 * @see http://react-toolbox.com/#/components/tooltip
-	 */
-	tooltipHideOnClick?: boolean,
-}
-/**
- * Properties of components that have values that can be changed (T is the type of the value)
- */
-export interface Changeable<T> {
-	/**
-	 * Callback called when the picker value is changed.
-	 * @param v Type of the value
-	 */
-	onChange?: (v: T) => void
-}
-export interface TimePickerProps extends Props, Changeable<Date> {
-	/**
-	 * Format to display the clock. It can be 24hr or ampm.
-	 * @default 24hr
-	 */
-	format?: string,
-	/**
-	 * Datetime object with currrently selected time
-	 */
-	value?: Date,
-}
-export class TimePicker extends React.Component<TimePickerProps, {}> {
-	render(): React.DOMElement<any, any>;
-}
-
-export default TimePicker;
\ No newline at end of file
diff --git a/lib/tooltip/index.d.ts b/lib/tooltip/index.d.ts
deleted file mode 100644
index 867412c2d..000000000
--- a/lib/tooltip/index.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import * as React from 'react';
-export class TooltipComponent<P, S> extends React.Component<P, S> {
-	getDecoratedComponentInstance(): React.Component<P, S>;
-}
-
-export interface TooltipComponentClass<P> extends React.ComponentClass<P> {
-	new (props?: P, context?: any): TooltipComponent<P, any>;
-}
-
-export default function Tooltip<P>(componentClass: React.ComponentClass<P>): TooltipComponentClass<P>;
\ No newline at end of file
diff --git a/package.json b/package.json
index 056ae5be0..1eaa85f11 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
   "dependencies": {
     "classnames": "^2.2.5",
     "core-js": "^2.4.0",
-    "react-css-themr": "^1.1.0"
+    "react-css-themr": "^1.1.2"
   },
   "devDependencies": {
     "autoprefixer": "^6.3.6",
@@ -75,11 +75,11 @@
     "phantomjs-polyfill": "0.0.2",
     "phantomjs-prebuilt": "^2.1.7",
     "postcss-loader": "^0.9.1",
-    "react": "^15.0.2",
-    "react-addons-css-transition-group": "^15.0.2",
+    "react": "^15.2.0",
+    "react-addons-css-transition-group": "^15.2.0",
     "react-addons-test-utils": "^15.0.2",
     "react-docgen": "^2.8.2",
-    "react-dom": "^15.0.2",
+    "react-dom": "^15.2.0",
     "react-transform-catch-errors": "^1.0.2",
     "react-transform-hmr": "^1.0.4",
     "redbox-react": "^1.2.4",
@@ -114,8 +114,8 @@
   "peerDependencies": {
     "classnames": "^2.2.0",
     "normalize.css": "^4.0.0",
-    "react": "^0.14 || ^15.0.1",
-    "react-addons-css-transition-group": "^0.14.0 || ^15.0.1",
-    "react-dom": "^0.14.0 || ^15.0.1"
+    "react": "^0.14 || ^15.2.0",
+    "react-addons-css-transition-group": "^0.14.0 || ^15.2.0",
+    "react-dom": "^0.14.0 || ^15.2.0"
   }
 }
diff --git a/spec/components/avatar.js b/spec/components/avatar.js
index 4cc1fc14f..82eb22aed 100644
--- a/spec/components/avatar.js
+++ b/spec/components/avatar.js
@@ -9,7 +9,7 @@ const AvatarTest = () => (
     <Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />
     <Avatar icon={<GithubIcon />}/>
     <Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
-    <Avatar title="Javier" img="https://placeimg.com/80/80/animals"/>
+    <Avatar title="Javier"/>
     <Avatar style={{backgroundColor: 'yellowgreen'}}><GithubIcon /></Avatar>
   </section>
 );

From f43dac68bedad8ff3c67abd7782587c61a6a0689 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 4 Jul 2016 22:05:20 +0200
Subject: [PATCH 0655/1024] Latest build

---
 lib/autocomplete/Autocomplete.js | 12 +++++++++---
 lib/avatar/Avatar.js             |  6 +++++-
 lib/dropdown/Dropdown.js         |  5 ++++-
 lib/list/ListItem.js             | 16 ++++++++++++----
 lib/ripple/Ripple.js             |  4 +++-
 5 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/lib/autocomplete/Autocomplete.js b/lib/autocomplete/Autocomplete.js
index 12076073c..7d06285ba 100644
--- a/lib/autocomplete/Autocomplete.js
+++ b/lib/autocomplete/Autocomplete.js
@@ -393,9 +393,15 @@ var factory = function factory(Chip, Input) {
         var _props = this.props;
         var error = _props.error;
         var label = _props.label;
-        var theme = _props.theme;
-
-        var other = _objectWithoutProperties(_props, ['error', 'label', 'theme']);
+        var source = _props.source;
+        var suggestionMatch = _props.suggestionMatch;
+        var //eslint-disable-line no-unused-vars
+        selectedPosition = _props.selectedPosition;
+        var showSuggestionsWhenValueIsSet = _props.showSuggestionsWhenValueIsSet;
+        var //eslint-disable-line no-unused-vars
+        theme = _props.theme;
+
+        var other = _objectWithoutProperties(_props, ['error', 'label', 'source', 'suggestionMatch', 'selectedPosition', 'showSuggestionsWhenValueIsSet', 'theme']);
 
         var className = (0, _classnames5.default)(theme.autocomplete, _defineProperty({}, theme.focus, this.state.focus), this.props.className);
 
diff --git a/lib/avatar/Avatar.js b/lib/avatar/Avatar.js
index 6fd7d5256..43d28caa0 100644
--- a/lib/avatar/Avatar.js
+++ b/lib/avatar/Avatar.js
@@ -11,6 +11,10 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 var _reactCssThemr = require('react-css-themr');
 
 var _identifiers = require('../identifiers.js');
@@ -36,7 +40,7 @@ var factory = function factory(FontIcon) {
 
     return _react2.default.createElement(
       'div',
-      _extends({ 'data-react-toolbox': 'avatar', className: theme.avatar + ' ' + className }, other),
+      _extends({ 'data-react-toolbox': 'avatar', className: (0, _classnames2.default)(theme.avatar, className) }, other),
       children,
       typeof image === 'string' ? _react2.default.createElement('img', { className: theme.image, src: image, title: title }) : image,
       typeof icon === 'string' ? _react2.default.createElement(FontIcon, { className: theme.letter, value: icon }) : icon,
diff --git a/lib/dropdown/Dropdown.js b/lib/dropdown/Dropdown.js
index a2c0fb429..ee3fa619d 100644
--- a/lib/dropdown/Dropdown.js
+++ b/lib/dropdown/Dropdown.js
@@ -190,8 +190,11 @@ var factory = function factory(Input) {
         var template = _props.template;
         var theme = _props.theme;
         var source = _props.source;
+        var allowBlank = _props.allowBlank;
+        var auto = _props.auto;
+
+        var others = _objectWithoutProperties(_props, ['template', 'theme', 'source', 'allowBlank', 'auto']); //eslint-disable-line no-unused-vars
 
-        var others = _objectWithoutProperties(_props, ['template', 'theme', 'source']);
 
         var selected = this.getSelectedItem();
         var className = (0, _classnames4.default)(theme.dropdown, (_classnames2 = {}, _defineProperty(_classnames2, theme.up, this.state.up), _defineProperty(_classnames2, theme.active, this.state.active), _defineProperty(_classnames2, theme.disabled, this.props.disabled), _classnames2), this.props.className);
diff --git a/lib/list/ListItem.js b/lib/list/ListItem.js
index 174454028..363c17a8a 100644
--- a/lib/list/ListItem.js
+++ b/lib/list/ListItem.js
@@ -74,16 +74,24 @@ var factory = function factory(ripple, ListItemLayout, ListItemContent) {
           if (!_react2.default.isValidElement(child)) {
             return;
           }
-          if (child.props.listItemIgnore) {
-            children.ignored.push(child);
+
+          var _child$props = child.props;
+          var listItemIgnore = _child$props.listItemIgnore;
+
+          var rest = _objectWithoutProperties(_child$props, ['listItemIgnore']);
+
+          var strippedChild = _extends({}, child, { props: rest });
+
+          if (listItemIgnore) {
+            children.ignored.push(strippedChild);
             return;
           }
           if (child.type === ListItemContent) {
-            children.itemContent = child;
+            children.itemContent = strippedChild;
             return;
           }
           var bucket = children.itemContent ? 'rightActions' : 'leftActions';
-          children[bucket].push(_extends({}, child, { key: i }));
+          children[bucket].push(_extends({}, strippedChild, { key: i }));
         });
 
         return children;
diff --git a/lib/ripple/Ripple.js b/lib/ripple/Ripple.js
index 4ad0c99d0..52fa97bf3 100644
--- a/lib/ripple/Ripple.js
+++ b/lib/ripple/Ripple.js
@@ -166,11 +166,13 @@ var rippleFactory = function rippleFactory() {
             var _props2 = this.props;
             var children = _props2.children;
             var ripple = _props2.ripple;
+            var //eslint-disable-line no-unused-vars
+            onRippleEnded = _props2.onRippleEnded;
             var className = _props2.rippleClassName;
             var centered = _props2.rippleCentered;
             var spread = _props2.rippleSpread;
 
-            var other = _objectWithoutProperties(_props2, ['children', 'ripple', 'rippleClassName', 'rippleCentered', 'rippleSpread']);
+            var other = _objectWithoutProperties(_props2, ['children', 'ripple', 'onRippleEnded', 'rippleClassName', 'rippleCentered', 'rippleSpread']);
 
             var rippleClassName = (0, _classnames3.default)(this.props.theme.ripple, (_classnames = {}, _defineProperty(_classnames, this.props.theme.rippleActive, this.state.active), _defineProperty(_classnames, this.props.theme.rippleRestarting, this.state.restarting), _classnames), className);
 

From 4ea305cff232f9f9f82cb2bffe76d7271203fb22 Mon Sep 17 00:00:00 2001
From: Ben Fox-Moore <ben.foxmoore@gmail.com>
Date: Thu, 7 Jul 2016 15:20:33 +0200
Subject: [PATCH 0656/1024] Fix Number.isNaN TypeError on IE

---
 components/input/Input.js | 2 +-
 lib/input/Input.js        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/input/Input.js b/components/input/Input.js
index d8978bae8..c645136ca 100644
--- a/components/input/Input.js
+++ b/components/input/Input.js
@@ -112,7 +112,7 @@ const factory = (FontIcon) => {
         [theme.withIcon]: icon
       }, this.props.className);
 
-      const valuePresent = value !== null && value !== undefined && value !== '' && !Number.isNaN(value);
+      const valuePresent = value !== null && value !== undefined && value !== '' && !isNaN(value);
 
       const InputElement = React.createElement(multiline ? 'textarea' : 'input', {
         ...others,
diff --git a/lib/input/Input.js b/lib/input/Input.js
index 02b397eef..f154be2c7 100644
--- a/lib/input/Input.js
+++ b/lib/input/Input.js
@@ -126,7 +126,7 @@ var factory = function factory(FontIcon) {
 
         var className = (0, _classnames5.default)(theme.input, (_classnames2 = {}, _defineProperty(_classnames2, theme.disabled, disabled), _defineProperty(_classnames2, theme.errored, error), _defineProperty(_classnames2, theme.hidden, type === 'hidden'), _defineProperty(_classnames2, theme.withIcon, icon), _classnames2), this.props.className);
 
-        var valuePresent = value !== null && value !== undefined && value !== '' && !Number.isNaN(value);
+        var valuePresent = value !== null && value !== undefined && value !== '' && !isNaN(value);
 
         var InputElement = _react2.default.createElement(multiline ? 'textarea' : 'input', _extends({}, others, {
           className: (0, _classnames5.default)(theme.inputElement, _defineProperty({}, theme.filled, valuePresent)),

From 3b4387f4febb4bbf5525c85692a1208b0160ecd9 Mon Sep 17 00:00:00 2001
From: Randy Coulman <rcoulman@gmail.com>
Date: Thu, 7 Jul 2016 10:39:02 -0700
Subject: [PATCH 0657/1024] Pass the theme from ListItem to ListItemLayout

`ListItemLayout` was not receiving the theme, and so was not applying
the theme to the components it contained.

To solve this, explicitly pass the theme down to `ListItemLayout`.

Fixes #580
---
 components/list/ListItem.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/list/ListItem.js b/components/list/ListItem.js
index f3bf537a4..58583bc94 100644
--- a/components/list/ListItem.js
+++ b/components/list/ListItem.js
@@ -64,7 +64,7 @@ const factory = (ripple, ListItemLayout, ListItemContent) => {
     render () {
       const {className, onMouseDown, to, onClick, ripple: hasRipple, theme, ...other} = this.props; //eslint-disable-line no-unused-vars
       const children = this.groupChildren();
-      const content = <ListItemLayout {...children} {...other}/>;
+      const content = <ListItemLayout theme={theme} {...children} {...other}/>;
       return (
         <li className={`${theme.listItem} ${className}`} onClick={this.handleClick} onMouseDown={onMouseDown}>
           {to ? <a href={this.props.to}>{content}</a> : content}

From 49fa53aa969e42270dfa8adf1258c06fbf39e455 Mon Sep 17 00:00:00 2001
From: David Cho-Lerat <david.cho-lerat@hl2.com>
Date: Thu, 7 Jul 2016 20:07:59 +0200
Subject: [PATCH 0658/1024] Update pickers.js

Just like in components/date_picker/readme.md, you need to add 1 to value.getMonth()
---
 spec/components/pickers.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spec/components/pickers.js b/spec/components/pickers.js
index 552d88b53..666ff852e 100644
--- a/spec/components/pickers.js
+++ b/spec/components/pickers.js
@@ -43,7 +43,7 @@ class PickersTest extends React.Component {
 
         <DatePicker
           label='Formatted Date'
-          inputFormat={(value) => `${value.getDate()}/${value.getMonth()}/${value.getFullYear()}`}
+          inputFormat={(value) => `${value.getDate()}/${value.getMonth() + 1}/${value.getFullYear()}`}
           onChange={this.handleChange.bind(this, 'date3')}
           value={this.state.date3}
         />

From e782b8fdc478e425f3028654cd69ce255cfb9f4a Mon Sep 17 00:00:00 2001
From: David Cho-Lerat <david.cho-lerat@hl2.com>
Date: Thu, 7 Jul 2016 20:13:15 +0200
Subject: [PATCH 0659/1024] Update datepicker_example_1.txt

Just like in `components/date_picker/readme.md`, you need to add 1 to `
value.getMonth()`
---
 .../layout/main/modules/examples/datepicker_example_1.txt       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt b/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt
index 7776b880b..c42ef8b96 100644
--- a/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt
@@ -30,7 +30,7 @@ class DatePickerTest extends React.Component {
         <DatePicker
           label='Formatted Date'
           autoOk
-          inputFormat={(value) => `${value.getDate()}/${value.getMonth()}/${value.getFullYear()}`}
+          inputFormat={(value) => `${value.getDate()}/${value.getMonth() + 1}/${value.getFullYear()}`}
           onChange={this.handleChange.bind(this, 'date3')}
           value={this.state.date3}
         />

From 8c20848fe87c60eba44ee09702f08adf246e2e57 Mon Sep 17 00:00:00 2001
From: Randy Coulman <rcoulman@gmail.com>
Date: Fri, 8 Jul 2016 14:36:55 -0700
Subject: [PATCH 0660/1024] Forward theme prop from Tabs to TabContent
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The `Tabs` component takes a `theme`, but was not forwarding it on to
its internal `TabContent` component, so it wasn’t possible to theme the
`tabs` or `active` classes.
---
 components/tabs/Tabs.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/tabs/Tabs.js b/components/tabs/Tabs.js
index ecb5dd0b5..5acd1d334 100644
--- a/components/tabs/Tabs.js
+++ b/components/tabs/Tabs.js
@@ -52,7 +52,7 @@ const factory = (Tab, TabContent) => {
         if (item.type === Tab) {
           headers.push(item);
           if (item.props.children) {
-            contents.push(<TabContent children={item.props.children} />);
+            contents.push(<TabContent children={item.props.children} theme={this.props.theme} />);
           }
         } else if (item.type === TabContent) {
           contents.push(item);

From 0513cb72e93bb9e98228b6761d82f5f9952f905e Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 10 Jul 2016 13:42:35 +0200
Subject: [PATCH 0661/1024] Fixes #616

---
 components/date_picker/DatePicker.js       | 17 +++++++++++------
 components/date_picker/DatePickerDialog.js | 11 ++++++++++-
 components/date_picker/readme.md           |  2 ++
 components/dialog/Dialog.js                |  4 ++--
 components/input/Input.js                  |  5 ++++-
 components/time_picker/TimePicker.js       |  8 ++++++--
 components/time_picker/TimePickerDialog.js | 10 +++++++++-
 spec/components/pickers.js                 |  4 ++++
 8 files changed, 48 insertions(+), 13 deletions(-)

diff --git a/components/date_picker/DatePicker.js b/components/date_picker/DatePicker.js
index 2df58a691..1c2c582f4 100644
--- a/components/date_picker/DatePicker.js
+++ b/components/date_picker/DatePicker.js
@@ -28,7 +28,9 @@ const factory = (Input, DatePickerDialog) => {
       minDate: PropTypes.object,
       name: PropTypes.string,
       onChange: PropTypes.func,
+      onEscKeyDown: PropTypes.func,
       onKeyPress: PropTypes.func,
+      onOverlayClick: PropTypes.func,
       theme: PropTypes.shape({
         input: PropTypes.string
       }),
@@ -65,10 +67,11 @@ const factory = (Input, DatePickerDialog) => {
     };
 
     render () {
-      const { inputClassName, value, ...others } = this.props;
-      const inputFormat = this.props.inputFormat || time.formatDate;
+      const { autoOk, inputClassName, inputFormat, maxDate, minDate,
+        onEscKeyDown, onOverlayClick, value, ...others } = this.props;
+      const finalInputFormat = inputFormat || time.formatDate;
       const date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined;
-      const formattedDate = date === undefined ? '' : inputFormat(value);
+      const formattedDate = date === undefined ? '' : finalInputFormat(value);
 
       return (
         <div data-react-toolbox='date-picker'>
@@ -86,13 +89,15 @@ const factory = (Input, DatePickerDialog) => {
             value={formattedDate}
           />
           <DatePickerDialog
-            autoOk={this.props.autoOk}
             active={this.state.active}
+            autoOk={autoOk}
             className={this.props.className}
+            maxDate={maxDate}
+            minDate={minDate}
             name={this.props.name}
-            maxDate={this.props.maxDate}
-            minDate={this.props.minDate}
             onDismiss={this.handleDismiss}
+            onEscKeyDown={onEscKeyDown}
+            onOverlayClick={onOverlayClick}
             onSelect={this.handleSelect}
             theme={this.props.theme}
             value={date}
diff --git a/components/date_picker/DatePickerDialog.js b/components/date_picker/DatePickerDialog.js
index 4136c383f..4936214cc 100644
--- a/components/date_picker/DatePickerDialog.js
+++ b/components/date_picker/DatePickerDialog.js
@@ -12,6 +12,8 @@ const factory = (Dialog, Calendar) => {
       minDate: PropTypes.object,
       name: PropTypes.string,
       onDismiss: PropTypes.func,
+      onEscKeyDown: PropTypes.func,
+      onOverlayClick: PropTypes.func,
       onSelect: PropTypes.func,
       theme: PropTypes.shape({
         button: PropTypes.string,
@@ -85,7 +87,14 @@ const factory = (Dialog, Calendar) => {
       const headerClassName = classnames(theme.header, theme[display]);
 
       return (
-        <Dialog active={this.props.active} type="custom" className={className} actions={this.actions}>
+        <Dialog
+          actions={this.actions}
+          active={this.props.active}
+          className={className}
+          onEscKeyDown={this.props.onEscKeyDown}
+          onOverlayClick={this.props.onOverlayClick}
+          type="custom"
+        >
           <header className={headerClassName}>
             <span className={theme.year} onClick={this.handleSwitchDisplay.bind(this, 'years')}>
               {this.state.date.getFullYear()}
diff --git a/components/date_picker/readme.md b/components/date_picker/readme.md
index 3f84dc938..805f56ea3 100644
--- a/components/date_picker/readme.md
+++ b/components/date_picker/readme.md
@@ -44,6 +44,8 @@ If you want to provide a theme via context, the component key is `RTDatePicker`.
 | `maxDate`       | `Date`          |               | Date object with the maximum selectable date. |
 | `minDate`       | `Date`          |               | Date object with the minimum selectable date. |
 | `onChange`      | `Function`      |               | Callback called when the picker value is changed.|
+| `onEscKeyDown`   | `Function`     |               | Callback called when the ESC key is pressed with the overlay active. |
+| `onOverlayClick` | `Function`     |               | Callback to be invoked when the dialog overlay is clicked.|
 | `value`         | `Date`          |               | Date object with the currently selected date. |
 
 ## Theme
diff --git a/components/dialog/Dialog.js b/components/dialog/Dialog.js
index 449d9cff4..7e49f2746 100644
--- a/components/dialog/Dialog.js
+++ b/components/dialog/Dialog.js
@@ -21,10 +21,10 @@ const factory = (Overlay, Button) => {
       <Overlay
         active={props.active}
         onClick={props.onOverlayClick}
+        onEscKeyDown={props.onEscKeyDown}
         onMouseDown={props.onOverlayMouseDown}
-        onMouseUp={props.onOverlayMouseUp}
         onMouseMove={props.onOverlayMouseMove}
-        onEscKeyDown={props.onEscKeyDown}
+        onMouseUp={props.onOverlayMouseUp}
       >
         <div data-react-toolbox='dialog' className={className}>
           <section role='body' className={props.theme.body}>
diff --git a/components/input/Input.js b/components/input/Input.js
index c645136ca..066aaf782 100644
--- a/components/input/Input.js
+++ b/components/input/Input.js
@@ -112,7 +112,10 @@ const factory = (FontIcon) => {
         [theme.withIcon]: icon
       }, this.props.className);
 
-      const valuePresent = value !== null && value !== undefined && value !== '' && !isNaN(value);
+      const valuePresent = value !== null
+        && value !== undefined
+        && value !== ''
+        && !(typeof value === Number && isNaN(value));
 
       const InputElement = React.createElement(multiline ? 'textarea' : 'input', {
         ...others,
diff --git a/components/time_picker/TimePicker.js b/components/time_picker/TimePicker.js
index 3ca3252a4..cd10a2524 100644
--- a/components/time_picker/TimePicker.js
+++ b/components/time_picker/TimePicker.js
@@ -18,7 +18,9 @@ const factory = (TimePickerDialog, Input) => {
       label: PropTypes.string,
       name: PropTypes.string,
       onChange: PropTypes.func,
+      onEscKeyDown: PropTypes.func,
       onKeyPress: PropTypes.func,
+      onOverlayClick: PropTypes.func,
       theme: PropTypes.shape({
         input: PropTypes.string
       }),
@@ -57,7 +59,7 @@ const factory = (TimePickerDialog, Input) => {
     };
 
     render () {
-      const { value, format, inputClassName, theme, ...others } = this.props;
+      const { value, format, inputClassName, onEscKeyDown, onOverlayClick, theme, ...others } = this.props;
       const formattedTime = value ? time.formatTime(value, format) : '';
       return (
         <div data-react-toolbox='time-picker'>
@@ -76,9 +78,11 @@ const factory = (TimePickerDialog, Input) => {
           <TimePickerDialog
             active={this.state.active}
             className={this.props.className}
-            name={this.props.name}
             format={format}
+            name={this.props.name}
             onDismiss={this.handleDismiss}
+            onEscKeyDown={onEscKeyDown}
+            onOverlayClick={onOverlayClick}
             onSelect={this.handleSelect}
             theme={this.props.theme}
             value={this.props.value}
diff --git a/components/time_picker/TimePickerDialog.js b/components/time_picker/TimePickerDialog.js
index ce7491a59..21b2daba4 100644
--- a/components/time_picker/TimePickerDialog.js
+++ b/components/time_picker/TimePickerDialog.js
@@ -11,6 +11,8 @@ const factory = (Dialog) => {
       format: PropTypes.oneOf(['24hr', 'ampm']),
       name: PropTypes.string,
       onDismiss: PropTypes.func,
+      onEscKeyDown: PropTypes.func,
+      onOverlayClick: PropTypes.func,
       onSelect: PropTypes.func,
       theme: PropTypes.shape({
         am: PropTypes.string,
@@ -98,7 +100,13 @@ const factory = (Dialog) => {
       const format = `${time.getTimeMode(this.state.displayTime)}Format`;
       const className = classnames([theme.dialog, theme[display], theme[format]], this.props.className);
       return (
-        <Dialog active={this.props.active} className={className} actions={this.actions}>
+        <Dialog
+          actions={this.actions}
+          active={this.props.active}
+          className={className}
+          onEscKeyDown={this.props.onEscKeyDown}
+          onOverlayClick={this.props.onOverlayClick}
+        >
           <header className={theme.header}>
             <span className={theme.hours} onClick={this.switchDisplay.bind(this, 'hours')}>
               {('0' + this.formatHours()).slice(-2)}
diff --git a/spec/components/pickers.js b/spec/components/pickers.js
index 666ff852e..2a2f5f2ef 100644
--- a/spec/components/pickers.js
+++ b/spec/components/pickers.js
@@ -30,6 +30,8 @@ class PickersTest extends React.Component {
         <DatePicker
           label='Birthdate'
           onChange={this.handleChange.bind(this, 'date1')}
+          onEscKeyDown={() => console.log('esc key down')}
+          onOverlayClick={() => console.log('overlay click')}
           value={this.state.date1}
         />
 
@@ -58,6 +60,8 @@ class PickersTest extends React.Component {
         <TimePicker
           label='Start time'
           onChange={this.handleChange.bind(this, 'time1')}
+          onEscKeyDown={() => console.log('esc key down')}
+          onOverlayClick={() => console.log('overlay click')}
           value={this.state.time1}
         />
 

From 49658a39b40c364debb5cf44dc3f8b1b707a340f Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 10 Jul 2016 14:23:40 +0200
Subject: [PATCH 0662/1024] Fixes #585

---
 components/avatar/Avatar.js | 10 ++++++++--
 components/avatar/readme.md |  2 ++
 spec/components/avatar.js   |  2 ++
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/components/avatar/Avatar.js b/components/avatar/Avatar.js
index 24cf719a7..9023663b2 100644
--- a/components/avatar/Avatar.js
+++ b/components/avatar/Avatar.js
@@ -5,10 +5,11 @@ import { AVATAR } from '../identifiers.js';
 import InjectFontIcon from '../font_icon/FontIcon.js';
 
 const factory = (FontIcon) => {
-  const Avatar = ({children, className, icon, image, theme, title, ...other}) => (
+  const Avatar = ({children, className, cover, icon, image, theme, title, ...other}) => (
     <div data-react-toolbox='avatar' className={classnames(theme.avatar, className)} {...other}>
       {children}
-      {typeof image === 'string' ? <img className={theme.image} src={image} title={title} /> : image}
+      {cover && typeof image === 'string' && <span alt={title} className={theme.image} style={{backgroundImage: `url(http://github.com/$%7Bimage%7D)`}} />}
+      {!cover && (typeof image === 'string' ? <img alt={title} className={theme.image} src={image} title={title} /> : image)}
       {typeof icon === 'string' ? <FontIcon className={theme.letter} value={icon} /> : icon}
       {title ? <span className={theme.letter}>{title[0]}</span> : null}
     </div>
@@ -17,6 +18,7 @@ const factory = (FontIcon) => {
   Avatar.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
+    cover: PropTypes.bool,
     icon: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
     image: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
     theme: PropTypes.shape({
@@ -27,6 +29,10 @@ const factory = (FontIcon) => {
     title: PropTypes.string
   };
 
+  Avatar.defaultProps = {
+    cover: false
+  };
+
   return Avatar;
 };
 
diff --git a/components/avatar/readme.md b/components/avatar/readme.md
index a30c52121..ff90fdd92 100644
--- a/components/avatar/readme.md
+++ b/components/avatar/readme.md
@@ -18,6 +18,7 @@ const AvatarTest = () => (
     <Avatar icon={<GithubIcon />} />
     <Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
     <Avatar title="Javier" image="https://placeimg.com/80/80/animals" />
+    <Avatar image="http://www.thewrap.com/wp-content/uploads/2015/08/margot-robbie-harley-quinn_main.jpg" cover />
     <Avatar style={{backgroundColor: 'yellowgreen'}}><GithubIcon /></Avatar>
   </div>
 );
@@ -31,6 +32,7 @@ If you want to provide a theme via context, the component key is `RTAvatar`.
 |:-----|:-----|:-----|:-----|
 | `children`    | `Node`                  |             | Children for the avatar. You can pass an SVG for a custom icon or, for example, an image.|
 | `className`   | `String`                | `''`        | Set a class to style the Component.|
+| `cover`       | `Boolean`               | `''`        | Set to true if your image is not squared so it will be used as a cover for the element.|
 | `icon`        | `String` or `Element`   |             | A key to identify an Icon from Material Design Icons or a custom Icon Element.|
 | `image`       | `String` or `Element`   |             | An image source or an image element. |
 | `title`       | `String`                | `''`        | A title for the image. If no image is provided, the first letter will be displayed as the avatar. |
diff --git a/spec/components/avatar.js b/spec/components/avatar.js
index 82eb22aed..8255435cf 100644
--- a/spec/components/avatar.js
+++ b/spec/components/avatar.js
@@ -9,6 +9,8 @@ const AvatarTest = () => (
     <Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />
     <Avatar icon={<GithubIcon />}/>
     <Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
+    <Avatar image="https://placeimg.com/80/80/animals" />
+    <Avatar image="http://www.thewrap.com/wp-content/uploads/2015/08/margot-robbie-harley-quinn_main.jpg" cover />
     <Avatar title="Javier"/>
     <Avatar style={{backgroundColor: 'yellowgreen'}}><GithubIcon /></Avatar>
   </section>

From 2a7e340a811becd36411025868bf55f50e4e3bb3 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 10 Jul 2016 16:54:31 +0200
Subject: [PATCH 0663/1024] Fixes #624

---
 components/identifiers.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/identifiers.js b/components/identifiers.js
index a3b46cef4..44c4ae239 100644
--- a/components/identifiers.js
+++ b/components/identifiers.js
@@ -4,6 +4,7 @@ export const AVATAR = 'RTAvatar';
 export const BUTTON = 'RTButton';
 export const CARD = 'RTCard';
 export const CHIP = 'RTChip';
+export const CHECKBOX = 'RTCheckbox';
 export const DATE_PICKER = 'RTDatePicker';
 export const DIALOG = 'RTDialog';
 export const DROPDOWN = 'RTDropdown';

From b55d2b16eff14d3ab7ff0fb1a57abf66d0b47894 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 10 Jul 2016 16:57:03 +0200
Subject: [PATCH 0664/1024] Latest build

---
 lib/avatar/Avatar.js                | 11 +++++++++--
 lib/date_picker/DatePicker.js       | 22 ++++++++++++++++------
 lib/date_picker/DatePickerDialog.js | 11 ++++++++++-
 lib/dialog/Dialog.js                |  4 ++--
 lib/identifiers.js                  |  1 +
 lib/input/Input.js                  |  4 +++-
 lib/list/ListItem.js                |  2 +-
 lib/overlay/Overlay.js              |  2 +-
 lib/tabs/Tabs.js                    | 24 +++++++++++++-----------
 lib/time_picker/TimePicker.js       | 10 ++++++++--
 lib/time_picker/TimePickerDialog.js | 10 +++++++++-
 11 files changed, 73 insertions(+), 28 deletions(-)

diff --git a/lib/avatar/Avatar.js b/lib/avatar/Avatar.js
index 43d28caa0..75bf7a4f3 100644
--- a/lib/avatar/Avatar.js
+++ b/lib/avatar/Avatar.js
@@ -31,18 +31,20 @@ var factory = function factory(FontIcon) {
   var Avatar = function Avatar(_ref) {
     var children = _ref.children;
     var className = _ref.className;
+    var cover = _ref.cover;
     var icon = _ref.icon;
     var image = _ref.image;
     var theme = _ref.theme;
     var title = _ref.title;
 
-    var other = _objectWithoutProperties(_ref, ['children', 'className', 'icon', 'image', 'theme', 'title']);
+    var other = _objectWithoutProperties(_ref, ['children', 'className', 'cover', 'icon', 'image', 'theme', 'title']);
 
     return _react2.default.createElement(
       'div',
       _extends({ 'data-react-toolbox': 'avatar', className: (0, _classnames2.default)(theme.avatar, className) }, other),
       children,
-      typeof image === 'string' ? _react2.default.createElement('img', { className: theme.image, src: image, title: title }) : image,
+      cover && typeof image === 'string' && _react2.default.createElement('span', { alt: title, className: theme.image, style: { backgroundImage: 'url('http://github.com/+%20image%20+')' } }),
+      !cover && (typeof image === 'string' ? _react2.default.createElement('img', { alt: title, className: theme.image, src: image, title: title }) : image),
       typeof icon === 'string' ? _react2.default.createElement(FontIcon, { className: theme.letter, value: icon }) : icon,
       title ? _react2.default.createElement(
         'span',
@@ -55,6 +57,7 @@ var factory = function factory(FontIcon) {
   Avatar.propTypes = {
     children: _react.PropTypes.node,
     className: _react.PropTypes.string,
+    cover: _react.PropTypes.bool,
     icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
     image: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
     theme: _react.PropTypes.shape({
@@ -65,6 +68,10 @@ var factory = function factory(FontIcon) {
     title: _react.PropTypes.string
   };
 
+  Avatar.defaultProps = {
+    cover: false
+  };
+
   return Avatar;
 };
 
diff --git a/lib/date_picker/DatePicker.js b/lib/date_picker/DatePicker.js
index a7e55e1be..1956215cd 100644
--- a/lib/date_picker/DatePicker.js
+++ b/lib/date_picker/DatePicker.js
@@ -99,14 +99,20 @@ var factory = function factory(Input, DatePickerDialog) {
       key: 'render',
       value: function render() {
         var _props = this.props;
+        var autoOk = _props.autoOk;
         var inputClassName = _props.inputClassName;
+        var inputFormat = _props.inputFormat;
+        var maxDate = _props.maxDate;
+        var minDate = _props.minDate;
+        var onEscKeyDown = _props.onEscKeyDown;
+        var onOverlayClick = _props.onOverlayClick;
         var value = _props.value;
 
-        var others = _objectWithoutProperties(_props, ['inputClassName', 'value']);
+        var others = _objectWithoutProperties(_props, ['autoOk', 'inputClassName', 'inputFormat', 'maxDate', 'minDate', 'onEscKeyDown', 'onOverlayClick', 'value']);
 
-        var inputFormat = this.props.inputFormat || _time2.default.formatDate;
+        var finalInputFormat = inputFormat || _time2.default.formatDate;
         var date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined;
-        var formattedDate = date === undefined ? '' : inputFormat(value);
+        var formattedDate = date === undefined ? '' : finalInputFormat(value);
 
         return _react2.default.createElement(
           'div',
@@ -124,13 +130,15 @@ var factory = function factory(Input, DatePickerDialog) {
             value: formattedDate
           })),
           _react2.default.createElement(DatePickerDialog, {
-            autoOk: this.props.autoOk,
             active: this.state.active,
+            autoOk: autoOk,
             className: this.props.className,
+            maxDate: maxDate,
+            minDate: minDate,
             name: this.props.name,
-            maxDate: this.props.maxDate,
-            minDate: this.props.minDate,
             onDismiss: this.handleDismiss,
+            onEscKeyDown: onEscKeyDown,
+            onOverlayClick: onOverlayClick,
             onSelect: this.handleSelect,
             theme: this.props.theme,
             value: date
@@ -154,7 +162,9 @@ var factory = function factory(Input, DatePickerDialog) {
     minDate: _react.PropTypes.object,
     name: _react.PropTypes.string,
     onChange: _react.PropTypes.func,
+    onEscKeyDown: _react.PropTypes.func,
     onKeyPress: _react.PropTypes.func,
+    onOverlayClick: _react.PropTypes.func,
     theme: _react.PropTypes.shape({
       input: _react.PropTypes.string
     }),
diff --git a/lib/date_picker/DatePickerDialog.js b/lib/date_picker/DatePickerDialog.js
index d76ab29df..70fa63c20 100644
--- a/lib/date_picker/DatePickerDialog.js
+++ b/lib/date_picker/DatePickerDialog.js
@@ -87,7 +87,14 @@ var factory = function factory(Dialog, Calendar) {
 
         return _react2.default.createElement(
           Dialog,
-          { active: this.props.active, type: 'custom', className: className, actions: this.actions },
+          {
+            actions: this.actions,
+            active: this.props.active,
+            className: className,
+            onEscKeyDown: this.props.onEscKeyDown,
+            onOverlayClick: this.props.onOverlayClick,
+            type: 'custom'
+          },
           _react2.default.createElement(
             'header',
             { className: headerClassName },
@@ -132,6 +139,8 @@ var factory = function factory(Dialog, Calendar) {
     minDate: _react.PropTypes.object,
     name: _react.PropTypes.string,
     onDismiss: _react.PropTypes.func,
+    onEscKeyDown: _react.PropTypes.func,
+    onOverlayClick: _react.PropTypes.func,
     onSelect: _react.PropTypes.func,
     theme: _react.PropTypes.shape({
       button: _react.PropTypes.string,
diff --git a/lib/dialog/Dialog.js b/lib/dialog/Dialog.js
index ddb21880b..05e044d50 100644
--- a/lib/dialog/Dialog.js
+++ b/lib/dialog/Dialog.js
@@ -49,10 +49,10 @@ var factory = function factory(Overlay, Button) {
       {
         active: props.active,
         onClick: props.onOverlayClick,
+        onEscKeyDown: props.onEscKeyDown,
         onMouseDown: props.onOverlayMouseDown,
-        onMouseUp: props.onOverlayMouseUp,
         onMouseMove: props.onOverlayMouseMove,
-        onEscKeyDown: props.onEscKeyDown
+        onMouseUp: props.onOverlayMouseUp
       },
       _react2.default.createElement(
         'div',
diff --git a/lib/identifiers.js b/lib/identifiers.js
index b301fbec5..bb5f25dd9 100644
--- a/lib/identifiers.js
+++ b/lib/identifiers.js
@@ -9,6 +9,7 @@ var AVATAR = exports.AVATAR = 'RTAvatar';
 var BUTTON = exports.BUTTON = 'RTButton';
 var CARD = exports.CARD = 'RTCard';
 var CHIP = exports.CHIP = 'RTChip';
+var CHECKBOX = exports.CHECKBOX = 'RTCheckbox';
 var DATE_PICKER = exports.DATE_PICKER = 'RTDatePicker';
 var DIALOG = exports.DIALOG = 'RTDialog';
 var DROPDOWN = exports.DROPDOWN = 'RTDropdown';
diff --git a/lib/input/Input.js b/lib/input/Input.js
index f154be2c7..8e9433846 100644
--- a/lib/input/Input.js
+++ b/lib/input/Input.js
@@ -7,6 +7,8 @@ exports.Input = exports.inputFactory = undefined;
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
 var _react = require('react');
@@ -126,7 +128,7 @@ var factory = function factory(FontIcon) {
 
         var className = (0, _classnames5.default)(theme.input, (_classnames2 = {}, _defineProperty(_classnames2, theme.disabled, disabled), _defineProperty(_classnames2, theme.errored, error), _defineProperty(_classnames2, theme.hidden, type === 'hidden'), _defineProperty(_classnames2, theme.withIcon, icon), _classnames2), this.props.className);
 
-        var valuePresent = value !== null && value !== undefined && value !== '' && !isNaN(value);
+        var valuePresent = value !== null && value !== undefined && value !== '' && !((typeof value === 'undefined' ? 'undefined' : _typeof(value)) === Number && isNaN(value));
 
         var InputElement = _react2.default.createElement(multiline ? 'textarea' : 'input', _extends({}, others, {
           className: (0, _classnames5.default)(theme.inputElement, _defineProperty({}, theme.filled, valuePresent)),
diff --git a/lib/list/ListItem.js b/lib/list/ListItem.js
index 363c17a8a..4a65e22b3 100644
--- a/lib/list/ListItem.js
+++ b/lib/list/ListItem.js
@@ -111,7 +111,7 @@ var factory = function factory(ripple, ListItemLayout, ListItemContent) {
 
 
         var children = this.groupChildren();
-        var content = _react2.default.createElement(ListItemLayout, _extends({}, children, other));
+        var content = _react2.default.createElement(ListItemLayout, _extends({ theme: theme }, children, other));
         return _react2.default.createElement(
           'li',
           { className: theme.listItem + ' ' + className, onClick: this.handleClick, onMouseDown: onMouseDown },
diff --git a/lib/overlay/Overlay.js b/lib/overlay/Overlay.js
index 7642b0d65..0bf6de75e 100644
--- a/lib/overlay/Overlay.js
+++ b/lib/overlay/Overlay.js
@@ -128,4 +128,4 @@ Overlay.defaultProps = {
   invisible: false
 };
 exports.default = (0, _reactCssThemr.themr)(_identifiers.OVERLAY)(Overlay);
-exports.Overlay = Overlay;
+exports.Overlay = Overlay;
\ No newline at end of file
diff --git a/lib/tabs/Tabs.js b/lib/tabs/Tabs.js
index c86982d92..4ed27e3fe 100644
--- a/lib/tabs/Tabs.js
+++ b/lib/tabs/Tabs.js
@@ -75,6 +75,8 @@ var factory = function factory(Tab, TabContent) {
     }, {
       key: 'parseChildren',
       value: function parseChildren() {
+        var _this2 = this;
+
         var headers = [];
         var contents = [];
 
@@ -82,7 +84,7 @@ var factory = function factory(Tab, TabContent) {
           if (item.type === Tab) {
             headers.push(item);
             if (item.props.children) {
-              contents.push(_react2.default.createElement(TabContent, { children: item.props.children }));
+              contents.push(_react2.default.createElement(TabContent, { children: item.props.children, theme: _this2.props.theme }));
             }
           } else if (item.type === TabContent) {
             contents.push(item);
@@ -94,15 +96,15 @@ var factory = function factory(Tab, TabContent) {
     }, {
       key: 'updatePointer',
       value: function updatePointer(idx) {
-        var _this2 = this;
+        var _this3 = this;
 
         clearTimeout(this.pointerTimeout);
         this.pointerTimeout = setTimeout(function () {
-          var startPoint = _this2.refs.tabs.getBoundingClientRect().left;
-          var label = _this2.refs.navigation.children[idx].getBoundingClientRect();
-          _this2.setState({
+          var startPoint = _this3.refs.tabs.getBoundingClientRect().left;
+          var label = _this3.refs.navigation.children[idx].getBoundingClientRect();
+          _this3.setState({
             pointer: {
-              top: _this2.refs.navigation.getBoundingClientRect().height + 'px',
+              top: _this3.refs.navigation.getBoundingClientRect().height + 'px',
               left: label.left - startPoint + 'px',
               width: label.width + 'px'
             }
@@ -112,23 +114,23 @@ var factory = function factory(Tab, TabContent) {
     }, {
       key: 'renderHeaders',
       value: function renderHeaders(headers) {
-        var _this3 = this;
+        var _this4 = this;
 
         return headers.map(function (item, idx) {
           return _react2.default.cloneElement(item, {
             key: idx,
-            active: _this3.props.index === idx,
-            onClick: _this3.handleHeaderClick.bind(_this3, idx, item)
+            active: _this4.props.index === idx,
+            onClick: _this4.handleHeaderClick.bind(_this4, idx, item)
           });
         });
       }
     }, {
       key: 'renderContents',
       value: function renderContents(contents) {
-        var _this4 = this;
+        var _this5 = this;
 
         var activeIdx = contents.findIndex(function (item, idx) {
-          return _this4.props.index === idx;
+          return _this5.props.index === idx;
         });
 
         if (contents && contents[activeIdx]) {
diff --git a/lib/time_picker/TimePicker.js b/lib/time_picker/TimePicker.js
index 836033692..eaa7bae38 100644
--- a/lib/time_picker/TimePicker.js
+++ b/lib/time_picker/TimePicker.js
@@ -94,9 +94,11 @@ var factory = function factory(TimePickerDialog, Input) {
         var value = _props.value;
         var format = _props.format;
         var inputClassName = _props.inputClassName;
+        var onEscKeyDown = _props.onEscKeyDown;
+        var onOverlayClick = _props.onOverlayClick;
         var theme = _props.theme;
 
-        var others = _objectWithoutProperties(_props, ['value', 'format', 'inputClassName', 'theme']);
+        var others = _objectWithoutProperties(_props, ['value', 'format', 'inputClassName', 'onEscKeyDown', 'onOverlayClick', 'theme']);
 
         var formattedTime = value ? _time2.default.formatTime(value, format) : '';
         return _react2.default.createElement(
@@ -116,9 +118,11 @@ var factory = function factory(TimePickerDialog, Input) {
           _react2.default.createElement(TimePickerDialog, {
             active: this.state.active,
             className: this.props.className,
-            name: this.props.name,
             format: format,
+            name: this.props.name,
             onDismiss: this.handleDismiss,
+            onEscKeyDown: onEscKeyDown,
+            onOverlayClick: onOverlayClick,
             onSelect: this.handleSelect,
             theme: this.props.theme,
             value: this.props.value
@@ -138,7 +142,9 @@ var factory = function factory(TimePickerDialog, Input) {
     label: _react.PropTypes.string,
     name: _react.PropTypes.string,
     onChange: _react.PropTypes.func,
+    onEscKeyDown: _react.PropTypes.func,
     onKeyPress: _react.PropTypes.func,
+    onOverlayClick: _react.PropTypes.func,
     theme: _react.PropTypes.shape({
       input: _react.PropTypes.string
     }),
diff --git a/lib/time_picker/TimePickerDialog.js b/lib/time_picker/TimePickerDialog.js
index 274353333..bea5496de 100644
--- a/lib/time_picker/TimePickerDialog.js
+++ b/lib/time_picker/TimePickerDialog.js
@@ -109,7 +109,13 @@ var factory = function factory(Dialog) {
         var className = (0, _classnames2.default)([theme.dialog, theme[display], theme[format]], this.props.className);
         return _react2.default.createElement(
           Dialog,
-          { active: this.props.active, className: className, actions: this.actions },
+          {
+            actions: this.actions,
+            active: this.props.active,
+            className: className,
+            onEscKeyDown: this.props.onEscKeyDown,
+            onOverlayClick: this.props.onOverlayClick
+          },
           _react2.default.createElement(
             'header',
             { className: theme.header },
@@ -152,6 +158,8 @@ var factory = function factory(Dialog) {
     format: _react.PropTypes.oneOf(['24hr', 'ampm']),
     name: _react.PropTypes.string,
     onDismiss: _react.PropTypes.func,
+    onEscKeyDown: _react.PropTypes.func,
+    onOverlayClick: _react.PropTypes.func,
     onSelect: _react.PropTypes.func,
     theme: _react.PropTypes.shape({
       am: _react.PropTypes.string,

From 672429f806287f9aa1423f631890487a0257ccee Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 10 Jul 2016 16:58:36 +0200
Subject: [PATCH 0665/1024] 1.0.2 release

---
 package.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 1eaa85f11..1a7d7adaf 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "react-toolbox",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "homepage": "http://www.react-toolbox.com/",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "main": "./lib",
   "author": {
     "name": "React Toolbox Team",
@@ -105,10 +105,10 @@
     "prepublish": "npm run build",
     "release": "bumped release",
     "sass": "cpx './components/**/*.scss' ./lib",
-    "tsd": "cpx './components/**/*.d.ts' ./lib",
     "start": "cross-env NODE_ENV=development UV_THREADPOOL_SIZE=100 node ./server",
     "test": "cross-env NODE_ENV=test karma start",
-    "test:watch": "cross-env NODE_ENV=test karma start --no-single-run"
+    "test:watch": "cross-env NODE_ENV=test karma start --no-single-run",
+    "tsd": "cpx './components/**/*.d.ts' ./lib"
   },
   "license": "MIT",
   "peerDependencies": {

From 68ee32f3ecb031381c6a8686ed9b8f17f755920d Mon Sep 17 00:00:00 2001
From: Randy Coulman <rcoulman@gmail.com>
Date: Mon, 11 Jul 2016 11:34:25 -0700
Subject: [PATCH 0666/1024] Document the label theme for the input component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The `input` component has a `label` theme setting, but it wasn’t
documented.
---
 components/input/readme.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/input/readme.md b/components/input/readme.md
index 1189bc843..bb8387f52 100644
--- a/components/input/readme.md
+++ b/components/input/readme.md
@@ -64,5 +64,6 @@ If you want to provide a theme via context, the component key is `RTInput`.
 | `icon`   | Used for the icon in case the input has icon.|
 | `input` | Used as root class for the component.|
 | `inputElement` | Used for the HTML input element.|
+| `label` | Used for the label when the input has a label.|
 | `required` | Used in case the input is required.|
 | `withIcon` | Added to the root class if the input has icon.|

From 460a378ddcbf4dd609dd7b205b1d98183353e888 Mon Sep 17 00:00:00 2001
From: Randy Coulman <rcoulman@gmail.com>
Date: Mon, 11 Jul 2016 11:42:17 -0700
Subject: [PATCH 0667/1024] Document CardTitle's cardTitle theme

The `cardTitle` theme for the root `CardTitle` component was not
documented.

I also made the wording for `title` and `subtitle` more consistent.
---
 components/card/readme.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/card/readme.md b/components/card/readme.md
index a2add5f06..0ecb41ac7 100644
--- a/components/card/readme.md
+++ b/components/card/readme.md
@@ -73,10 +73,11 @@ A versatile title block that can be used in various places on the card, includin
 
 | Name     | Description|
 |:---------|:-----------|
+| `cardTitle` | Class used for the root element.|
 | `large` | Added to the root element when the card has avatar.|
 | `small` | Added to the root element when the card has no avatar.|
-| `subtitle` | Added to the root element for subtitle.|
-| `title` | Used in for the root element.|
+| `subtitle` | Added to the subtitle element.|
+| `title` | Added to the title element.|
 
 ## CardMedia
 

From 3a572704847b57fe886c586d0754961aaa4c5fb6 Mon Sep 17 00:00:00 2001
From: Robert Baruck <robert.baruck@gmail.com>
Date: Fri, 15 Jul 2016 00:03:59 +0200
Subject: [PATCH 0668/1024] Update README.md

In *Roboto Font and Material Design Icons* update link to Roboto font.
---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 47a8dd29c..743871d43 100644
--- a/README.md
+++ b/README.md
@@ -179,7 +179,7 @@ A couple of things here. First you need to use raw components to get this styles
 
 ## Roboto Font and Material Design Icons
 
-React Toolbox assumes that you are importing [Roboto Font](https://www.google.com/fonts/specimen/Roboto) and [Material Design Icons](https://www.google.com/design/icons/).
+React Toolbox assumes that you are importing [Roboto Font](https://fonts.google.com/specimen/Roboto) and [Material Design Icons](https://www.google.com/design/icons/).
 
 In order to import the fonts for you, we'd need to include them in the CSS which is considered a bad practice. If you are not including them in your app, go to the linked sites and follow the instructions.
 

From f3b460eabd90ff4b676ae0fa9ba2f2c46ad3edd0 Mon Sep 17 00:00:00 2001
From: farawayer <farwayer@gmail.com>
Date: Fri, 15 Jul 2016 19:48:01 +0300
Subject: [PATCH 0669/1024] fix autocomplete activating on react>=15.1 if no
 direction

---
 components/autocomplete/Autocomplete.js | 1 -
 lib/autocomplete/Autocomplete.js        | 3 +--
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index 587f4e865..bd76bab35 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -72,7 +72,6 @@ const factory = (Chip, Input) => {
        const direction = this.calculateDirection();
        if (this.state.direction !== direction) {
          this.setState({ direction });
-         return false;
        }
      }
      return true;
diff --git a/lib/autocomplete/Autocomplete.js b/lib/autocomplete/Autocomplete.js
index 7d06285ba..e6f61342f 100644
--- a/lib/autocomplete/Autocomplete.js
+++ b/lib/autocomplete/Autocomplete.js
@@ -139,7 +139,6 @@ var factory = function factory(Chip, Input) {
           var direction = this.calculateDirection();
           if (this.state.direction !== direction) {
             this.setState({ direction: direction });
-            return false;
           }
         }
         return true;
@@ -473,4 +472,4 @@ var factory = function factory(Chip, Input) {
 var Autocomplete = factory(_Chip2.default, _Input2.default);
 exports.default = (0, _reactCssThemr.themr)(_identifiers.AUTOCOMPLETE)(Autocomplete);
 exports.autocompleteFactory = factory;
-exports.Autocomplete = Autocomplete;
\ No newline at end of file
+exports.Autocomplete = Autocomplete;

From 2d17b65a5be2fd39f268ee7c7de4d22fb9d0016e Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 16 Jul 2016 20:42:05 +0200
Subject: [PATCH 0670/1024] Fixes #627

---
 components/tooltip/Tooltip.js | 2 +-
 spec/components/tooltip.js    | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/tooltip/Tooltip.js b/components/tooltip/Tooltip.js
index e926b1590..4c82e93d7 100644
--- a/components/tooltip/Tooltip.js
+++ b/components/tooltip/Tooltip.js
@@ -52,7 +52,7 @@ const factory = (defaultTheme = {}) => {
 
       render () {
         const {children, className, tooltip,
-          tooltipDelay, tooltipHideOnClick, theme, ...other} = this.props; //eslint-disable-line no-unused-vars
+          tooltipDelay, tooltipHideOnClick, ...other} = this.props; //eslint-disable-line no-unused-vars
         const composedClassName = classnames(this.props.theme.tooltipWrapper, className);
         const tooltipClassName = classnames(this.props.theme.tooltip, {
           [this.props.theme.tooltipActive]: this.state.active
diff --git a/spec/components/tooltip.js b/spec/components/tooltip.js
index 73013cffb..525076362 100644
--- a/spec/components/tooltip.js
+++ b/spec/components/tooltip.js
@@ -5,7 +5,10 @@ import Tooltip from '../../components/tooltip';
 
 const TooltipButton = Tooltip(Button);
 const TooltipInput = Tooltip(Input);
-const TooltipStrong = Tooltip(({children, ...other}) => <strong {...other}>{children}</strong>);
+const TooltipStrong = Tooltip(({children, ...other}) => {
+  delete other.theme;
+  return <strong {...other}>{children}</strong>;
+});
 
 const TooltipTest = () => (
   <section>

From 661911bdaa598dd3ae12ea5cbf58f09968881962 Mon Sep 17 00:00:00 2001
From: normano64 <per.bergqwist@gmail.com>
Date: Sun, 17 Jul 2016 15:48:35 +0200
Subject: [PATCH 0671/1024] Typings for the project

---
 index.d.ts | 1381 +++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 1324 insertions(+), 57 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index e66eb25cc..586aa526a 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -1,57 +1,1324 @@
-// Type definitions for react-toolbox 0.16.2
-// Project: http://react-toolbox.com/
-// Definitions by: @xogeny (Michael M. Tiller), @hsrobflavorus (Robert Parker), @ixrock (Roman Karlov)
-/*  CHANGES
- * 26/05/2015 Export components by names (not only defaults), added missing components exports
- * 06/05/2016: Refactor into external module declarations (no more 'declare module ...')
- * 04/27/2016: Updates for 0.16.2, added <Chip>, <Overlay>, and ActivableRendererFactory definitions, misc. tweaks and fixes.
- * 02/03/2016:
- * Fixed for TypeScript 1.8.0 stricter var declaration requirements (move `declare var ...` inside each individual module).
- * Removed triple-slash reference to React to fix npm install compatibility (you'll need to make sure you're referencing react.d.ts somewhere in your project!).
- * Hopefully fixed the default exports where applicable
- * 01/13/2016: Minor changes, add a few missing props, add IconButton to react-toolbox/lib/button
- * 12/21/2015: Fix "import * as Input from 'react-toolbox/lib/input'" style imports, which now correctly import only the necessary component(s).
- * NOTE that you must use "import * as {Component Name}" not just "import {Component Name}" for this to work.
- * 12/20/2015: Should be compatible with 0.14.0. Refactor modules into 'react-toolbox/lib/*' format.
- Unfortunately importing them directly in that manner doesn't seem to work
- i.e. "import Input from 'react-toolbox/lib/input'" resolves to undefined, whereas "import { Input } from 'react-toolbox'" works fine!
- ... Any ideas welcome!
- * 12/20/2015: Add AppBar, Avatar, and refactor Card and its child Components to match the documentation.
- * 12/18/2015: Update to react-toolbox 0.13.1 (from 0.12.11)
- * 12/18/2015: Use JSDoc-style comments to provide Intellisense where supported
- */
-/*
- MISSING COMPONENTS (Contributions welcome)
- * Ripple HOC
- */
-
-export { default as ActivableRendererFactory } from 'react-toolbox/lib/hoc/ActivableRenderer';
-
-export { AppBar } from 'react-toolbox/lib/app_bar'
-export { Autocomplete } from 'react-toolbox/lib/autocomplete'
-export { Avatar } from 'react-toolbox/lib/avatar'
-export { Button, IconButton } from 'react-toolbox/lib/button'
-export { Card, CardTitle, CardMedia, CardText, CardActions } from 'react-toolbox/lib/card'
-export { Checkbox } from 'react-toolbox/lib/checkbox'
-export { Chip } from 'react-toolbox/lib/chip'
-export { DatePicker } from 'react-toolbox/lib/date_picker'
-export { Dialog } from 'react-toolbox/lib/dialog'
-export { Drawer } from 'react-toolbox/lib/drawer'
-export { Dropdown } from 'react-toolbox/lib/dropdown'
-export { FontIcon } from 'react-toolbox/lib/font_icon'
-export { Input } from 'react-toolbox/lib/input'
-export { Layout, Panel, NavDrawer, Sidebar } from 'react-toolbox/lib/layout'
-export { Link } from 'react-toolbox/lib/link'
-export { List, ListCheckbox, ListItem, ListDivider, ListSubHeader } from 'react-toolbox/lib/list'
-export { Menu, MenuDivider, MenuItem, IconMenu } from 'react-toolbox/lib/menu'
-export { Navigation } from 'react-toolbox/lib/navigation'
-export { Overlay } from 'react-toolbox/lib/overlay'
-export { ProgressBar } from 'react-toolbox/lib/progress_bar'
-export { RadioButton, RadioGroup } from 'react-toolbox/lib/radio'
-export { Ripple } from 'react-toolbox/lib/ripple'
-export { Slider } from 'react-toolbox/lib/slider'
-export { Snackbar } from 'react-toolbox/lib/snackbar'
-export { Switch } from 'react-toolbox/lib/switch'
-export { Tabs, Tab } from 'react-toolbox/lib/tabs'
-export { TimePicker } from 'react-toolbox/lib/time_picker'
-export { default as Tooltip } from 'react-toolbox/lib/tooltip'
\ No newline at end of file
+// Type definitions for react-toolbox 1.0.2
+// Project: https://github.com/react-toolbox/react-toolbox
+// Definitions by: Per Bergqwist <https://github.com/normano64>
+
+// __ReactToolbox
+declare namespace __ReactToolbox {
+  import React = __React;
+
+  interface Props {
+    className?: string;
+    key?: string | number;
+    onClick?: React.MouseEventHandler;
+    style?: React.CSSProperties;
+  }
+
+  /**
+   * <AppBar/>
+   */
+  interface AppBarThemeProps {
+    appBar?: string;
+    fixed?: string;
+    flat?: string;
+  }
+  interface AppBarProps extends Props {
+    children?: React.ReactNode;
+    fixed?: boolean;
+    flat?: boolean;
+    theme?: AppBarThemeProps;
+  }
+  export class AppBar extends React.Component<AppBarProps, {}> {
+  }
+
+  /**
+   * <Autocomplete/>
+   */
+  interface AutocompleteThemeProps {
+    active?: string;
+    autocomplete?: string;
+    focus?: string;
+    input?: string;
+    label?: string;
+    suggestion?: string;
+    suggestions?: string;
+    up?: string;
+    value?: string;
+    values?: string;
+  }
+  interface AutocompleteProps extends Props {
+    direction?: "auto" | "up" | "down";
+    disabled?: boolean;
+    error?: string;
+    label?: string;
+    multiple?: boolean;
+    onChange?: React.FormEventHandler;
+    selectedPosition?: "above" | "below";
+    showSuggestionsWHenValueIsSet?: boolean;
+    source?: any;
+    suggestionMatch?: "start" | "anywhere" | "word";
+    style?: React.CSSProperties;
+    theme?: AutocompleteThemeProps;
+    value?: any;
+  }
+  export class Autocomplete extends React.Component<AutocompleteProps, {}> {
+  }
+
+  /**
+   * <Avatar/>
+   */
+  interface AvatarThemeProps {
+    avatar?: string;
+    image?: string;
+    letter?: string;
+  }
+  interface AvatarProps extends Props {
+    children?: React.ReactNode;
+    cover?: boolean;
+    icon?: React.ReactNode | string;
+    image?: React.ReactNode | string;
+    theme?: AvatarThemeProps;
+    title?: string;
+  }
+  export class Avatar extends React.Component<AvatarProps, {}> {
+  }
+
+  // Button
+  namespace Button {
+    /**
+     * <Button/>
+     */
+    interface ButtonThemeProps {
+      accent?: string;
+      button?: string;
+      flat?: string;
+      floating?: string;
+      icon?: string;
+      inverse?: string;
+      mini?: string;
+      neutral?: string;
+      primary?: string;
+      raised?: string;
+      rippleWrapper?: string;
+      toggle?: string;
+    }
+    interface ButtonProps extends Props {
+      accent?: boolean;
+      children?: React.ReactNode;
+      disabled?: boolean;
+      flat?: boolean;
+      floating?: boolean;
+      href?: string;
+      icon?: React.ReactNode | string;
+      inverse?: boolean;
+      label?: string;
+      mini?: boolean;
+      neutral?: boolean;
+      onMouseLeave?: React.MouseEventHandler;
+      OnMouseUp?: React.MouseEventHandler;
+      primary?: boolean;
+      raised?: boolean;
+      ripple?: boolean;
+      theme?: ButtonThemeProps;
+    }
+    export class Button extends React.Component<ButtonProps, {}> {
+    }
+
+    /**
+     * <IconButton/>
+     */
+    interface IconButtonThemeProps {
+      accent?: string;
+      button?: string;
+      icon?: string;
+      inverse?: string;
+      neutral?: string;
+      primary?: string;
+      rippleWrapper?: string;
+      toggle?: string;
+    }
+    interface IconButtonProps extends Props {
+      accent?: boolean;
+      children?: React.ReactNode;
+      disabled?: boolean;
+      href?: string;
+      icon?: React.ReactNode | string;
+      inverse?: boolean;
+      neutral?: boolean;
+      onMouseLeave?: React.MouseEventHandler;
+      OnMouseUp?: React.MouseEventHandler;
+      primary?: boolean;
+      ripple?: boolean;
+      theme?: IconButtonThemeProps;
+    }
+    export class IconButton extends React.Component<IconButtonProps, {}> {
+    }
+  } // Button
+
+  // Card
+  namespace Card {
+    /**
+     * <Card/>
+     */
+    interface CardThemeProps {
+      card?: string;
+      raised?: string;
+    }
+    interface CardProps extends Props {
+      children?: React.ReactNode;
+      raised?: boolean;
+      theme?: CardThemeProps;
+    }
+    export class Card extends React.Component<CardProps, {}> {
+    }
+
+    /**
+     * <CardActions/>
+     */
+    interface CardActionsThemeProps {
+      cardActions?: string;
+    }
+    interface CardActionsProps extends Props {
+      children?: React.ReactNode;
+      theme?: CardActionsThemeProps;
+    }
+    export class CardActions extends React.Component<CardActionsProps, {}> {
+    }
+
+    /**
+     * <CardMedia/>
+     */
+    interface CardMediaThemeProps {
+      cardMedia?: string;
+      content?: string;
+      contentOverlay?: string;
+      square?: string;
+      wide?: string;
+    }
+    interface CardMediaProps extends Props {
+      aspectRatio?: "wide" | "square";
+      children?: React.ReactNode;
+      color?: string;
+      contentOverlay?: boolean;
+      image?: React.ReactNode | string;
+      theme?: CardMediaThemeProps;
+    }
+    export class CardMedia extends React.Component<CardMediaProps, {}> {
+    }
+
+    /**
+     * <CardText/>
+     */
+    interface CardTextThemeProps {
+      cardText?: string;
+    }
+    interface CardTextProps extends Props {
+      children?: React.ReactNode;
+      theme?: CardTextThemeProps;
+    }
+    export class CardText extends React.Component<CardTextProps, {}> {
+    }
+
+    /**
+     * <CardTitle/>
+     */
+    interface CardTitleThemeProps {
+      large?: string;
+      title?: string;
+      small?: string;
+      subtitle?: string;
+    }
+    interface CardTitleProps extends Props {
+      avatar?: React.ReactNode | string;
+      children?: React.ReactNode;
+      subtitle?: React.ReactNode | string;
+      theme?: CardTitleThemeProps;
+      title?: React.ReactNode | string;
+    }
+    export class CardTitle extends React.Component<CardTitleProps, {}> {
+    }
+  } // Card
+
+  /**
+   * <Checkbox/>
+   */
+  interface CheckboxThemeProps {
+    check?: string;
+    checked?: string;
+    disabled?: string;
+    field?: string;
+    input?: string;
+    ripple?: string;
+  }
+  interface CheckboxProps extends Props {
+    checked?: boolean;
+    disabled?: boolean;
+    label?: React.ReactNode | string;
+    name?: string;
+    onChange?: React.MouseEventHandler;
+    theme?: CheckboxThemeProps;
+  }
+  export class Checkbox extends React.Component<CheckboxProps, {}> {
+  }
+
+  /**
+   * <Chip/>
+   */
+  interface ChipThemeProps {
+    avatar?: string;
+    chip?: string;
+    deletable?: string;
+    delete?: string;
+    deleteIcon?: string;
+    deleteX?: string;
+  }
+  interface ChipProps extends Props {
+    children?: React.ReactNode;
+    deleteable?: boolean;
+    onDeleteClick?: React.MouseEventHandler;
+    theme?: ChipThemeProps;
+  }
+  export class Chip extends React.Component<ChipProps, {}> {
+  }
+
+  /**
+   * <DatePicker/>
+   */
+  interface DatePickerThemeProps {
+    active?: string;
+    button?: string;
+    calendar?: string;
+    calendarWrapper?: string;
+    date?: string;
+    day?: string;
+    days?: string;
+    dialog?: string;
+    disabled?: string;
+    header?: string;
+    input?: string;
+    month?: string;
+    monthsDisplay?: string;
+    next?: string;
+    prev?: string;
+    title?: string;
+    week?: string;
+    year?: string;
+    years?: string;
+    yearsDisplay?: string;
+  }
+  interface DatePickerProps extends Props {
+    autoOk?: boolean;
+    error?: string;
+    icon?: React.ReactNode | string;
+    inputClassName?: string;
+    inputFormat?: Function;
+    label?: string;
+    maxDate?: Date;
+    minDate?: Date;
+    name?: string;
+    onChange?: React.MouseEventHandler;
+    onEscKeyDown?: React.KeyboardEventHandler;
+    onOverlayClick?: React.MouseEventHandler;
+    theme?: DatePickerThemeProps;
+    value?: Date | string;
+  }
+  export class DatePicker extends React.Component<DatePickerProps, {}> {
+  }
+
+  /**
+   * <Dialog/>
+   */
+  interface DialogThemeProps {
+    active?: string;
+    body?: string;
+    button?: string;
+    dialog?: string;
+    navigation?: string;
+    title?: string;
+  }
+  interface DialogActionProps {
+    label?: string;
+  }
+  interface DialogProps extends Props {
+    actions?: DialogActionProps[];
+    active?: boolean;
+    children?: React.ReactNode;
+    onEscKeyDown?: React.KeyboardEventHandler;
+    onOverlayClick?: React.MouseEventHandler;
+    onOverlayMouseDown?: React.MouseEventHandler;
+    onOverlayMouseMove?: React.MouseEventHandler;
+    onOverlayMouseUp?: React.MouseEventHandler;
+    theme?: DialogThemeProps;
+    title?: string;
+    type?: string;
+  }
+  export class Dialog extends React.Component<DialogProps, {}> {
+  }
+
+  /**
+   * <Drawer/>
+   */
+  interface DrawerThemeProps {
+    active?: string;
+    content?: string;
+    drawer?: string;
+    left?: string;
+    right?: string;
+  }
+  interface DrawerProps extends Props {
+    active?: boolean;
+    children?: React.ReactNode;
+    onOverlayClick?: React.MouseEventHandler;
+    theme?: DrawerThemeProps;
+    type?: "left" | "right";
+  }
+  export class Drawer extends React.Component<DrawerProps, {}> {
+  }
+
+  /**
+   * <Dropdown/>
+   */
+  interface DropdownThemeProps {
+    active?: string;
+    disabled?: string;
+    dropdown?: string;
+    error?: string;
+    errored?: string;
+    field?: string;
+    label?: string;
+    selected?: string;
+    templateValue?: string;
+    up?: string;
+    value?: string;
+    values?: string;
+  }
+  interface DropdownProps extends Props {
+    allowBlank?: boolean;
+    auto?: boolean;
+    disabled?: boolean;
+    error?: string;
+    label?: string;
+    name?: string;
+    onBlur?: React.FocusEventHandler;
+    onChange?: React.FormEventHandler;
+    onFocus?: React.FocusEventHandler;
+    source: any[];
+    template?: Function;
+    theme?: DropdownThemeProps;
+    value?: string | number;
+  }
+  export class Dropdown extends React.Component<DropdownProps, {}> {
+  }
+
+  /**
+   * <FontIcon/>
+   */
+  interface FontIconProps extends Props {
+    children?: React.ReactNode;
+    value?: React.ReactNode | string;
+  }
+  export class FontIcon extends React.Component<FontIconProps, {}> {
+  }
+
+  /**
+   * <Input/>
+   */
+  interface InputThemeProps {
+    bar?: string;
+    counter?: string;
+    disabled?: string;
+    error?: string;
+    errored?: string;
+    hidden?: string;
+    hint?: string;
+    icon?: string;
+    input?: string;
+    inputElement?: string;
+    required?: string;
+    withIcon?: string;
+  }
+  interface InputProps extends Props {
+    children?: React.ReactNode;
+    disabled?: boolean;
+    error?: string;
+    floating?: boolean;
+    hint?: string;
+    icon?: React.ReactNode | string;
+    label?: string;
+    maxLength?: number;
+    multiLine?: boolean;
+    name?: string;
+    onBlur?: React.FocusEventHandler;
+    onChange?: React.FormEventHandler;
+    onFocus?: React.FocusEventHandler;
+    onKeyPress?: React.MouseEventHandler;
+    required?: boolean;
+    theme?: InputThemeProps;
+    type?: string;
+    value?: any;
+  }
+  export class Input extends React.Component<InputProps, {}> {
+  }
+
+  // Layout
+  namespace Layout {
+    /**
+     * <Layout/>
+     */
+    interface LayoutThemeProps {
+      layout?: string;
+    }
+    interface LayoutProps extends Props {
+      children?: [NavDrawer | Panel | Sidebar];
+      theme?: LayoutThemeProps;
+    }
+    export class Layout extends React.Component<LayoutProps, {}> {
+    }
+
+    /**
+     * <NavDrawer/>
+     */
+    interface NavDrawerThemeProps {
+      active?: string;
+      drawerContent?: string;
+      lgPermangent?: string;
+      mdPermangent?: string;
+      navDrawer?: string;
+      pinned?: string;
+      scrim?: string;
+      scrollY?: string;
+      smPermanent?: string;
+      wide?: string;
+      xlPermanent?: string;
+      xxlPermangent?: string;
+      xxxlPermangent?: string;
+    }
+    interface NavDrawerProps extends Props {
+      active?: boolean;
+      children?: React.ReactNode;
+      onOverlayClick?: React.MouseEventHandler;
+      permanentAt?: "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
+      pinned?: boolean;
+      scrollY?: boolean;
+      theme?: NavDrawerThemeProps;
+      width?: "normal" | "wide";
+    }
+    export class NavDrawer extends React.Component<NavDrawerProps, {}> {
+    }
+
+    /**
+     * <Panel/>
+     */
+    interface PanelThemeProps {
+      panel?: string;
+      scrollY?: string;
+    }
+    interface PanelProps extends Props {
+      children?: React.ReactNode;
+      scrollY?: boolean;
+      theme?: PanelThemeProps;
+    }
+    export class Panel extends React.Component<PanelProps, {}> {
+    }
+
+    /**
+     * <Sidebar/>
+     */
+    interface SidebarThemeProps {
+      pinned?: string;
+      scrollY?: string;
+      sidebar?: string;
+      sidebarContent?: string;
+    }
+    interface SidebarProps extends Props {
+      children?: React.ReactNode;
+      pinned?: boolean;
+      scrollY?: boolean;
+      theme?: SidebarThemeProps;
+      width?: number; // 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 25 | 33 | 50 | 66 | 75 | 100;
+    }
+    export class Sidebar extends React.Component<SidebarProps, {}> {
+    }
+
+  } // Layout
+
+  /**
+   * <Link/>
+   */
+  interface LinkThemeProps {
+    active?: string;
+    icon?: string;
+    link?: string;
+  }
+  interface LinkProps extends Props {
+    active?: boolean;
+    children?: React.ReactNode;
+    count?: number;
+    icon?: React.ReactNode | string;
+    label?: string;
+    theme?: LinkThemeProps;
+  }
+  export class Link extends React.Component<LinkProps, {}> {
+  }
+
+  // List
+  namespace List {
+    /**
+     * <List/>
+     */
+    interface ListThemeProps {
+      list?: string;
+    }
+    interface ListProps extends Props {
+      children?: React.ReactNode;
+      ripple?: boolean;
+      selectable?: boolean;
+      theme?: ListThemeProps;
+    }
+    export class List extends React.Component<ListProps, {}> {
+    }
+
+    /**
+     * <ListCheckbox/>
+     */
+    interface ListCheckboxThemeProps {
+      checkbox?: string;
+      checkboxItem?: string;
+      disabled?: string;
+      item?: string;
+      itemContentRoot?: string;
+      itemText?: string;
+      large?: string;
+      primary?: string;
+    }
+    interface ListCheckboxProps extends Props {
+      caption?: string;
+      checked?: boolean;
+      disabled?: boolean;
+      legend?: string;
+      name?: string;
+      onBlur?: React.FocusEventHandler;
+      onChange?: React.FormEventHandler;
+      onFocus?: React.FocusEventHandler;
+      theme?: ListCheckboxThemeProps;
+    }
+    export class ListCheckbox extends React.Component<ListCheckboxProps, {}> {
+    }
+
+    /**
+     * <ListDivider/>
+     */
+    interface ListDividerThemeProps {
+      divider?: string;
+      inset?: string;
+    }
+    interface ListDividerProps extends Props {
+      inset?: boolean;
+      theme?: ListDividerThemeProps;
+    }
+    export class ListDivider extends React.Component<ListDivider, {}> {
+    }
+
+    /**
+     * <ListItem/>
+     */
+    interface ListItemThemeProps {
+      disabled?: string;
+      item?: string;
+      itemAction?: string;
+      large?: string;
+      left?: string;
+      listItem?: string;
+      primary?: string;
+      right?: string;
+      selectable?: string;
+    }
+    interface ListItemProps extends Props {
+      avatar?: React.ReactNode | string;
+      caption?: string;
+      children?: React.ReactNode;
+      disabled?: boolean;
+      itemContent?: React.ReactNode;
+      leftActions?: React.ReactNode;
+      leftIcon?: React.ReactNode | string;
+      rightIcon?: React.ReactNode | string;
+      ripple?: boolean;
+      selectable?: boolean;
+      theme?: ListItemThemeProps;
+      to?: string;
+    }
+    export class ListItem extends React.Component<ListItemProps, {}> {
+    }
+
+    /**
+     * <ListSubHeader/>
+     */
+    interface ListSubHeaderThemeProps {
+      subheader?: string;
+    }
+    interface ListSubHeaderProps extends Props {
+      caption?: boolean;
+      theme?: ListSubHeaderThemeProps;
+    }
+    export class ListSubHeader extends React.Component<ListSubHeaderProps, {}> {
+    }
+  } // List
+
+  // Menu
+  namespace Menu {
+    /**
+     * <Menu/>
+     */
+    interface MenuThemeProps {
+      active?: string;
+      bottomLeft?: string;
+      bottomRight?: string;
+      menu?: string;
+      menuInner?: string;
+      outline?: string;
+      rippled?: string;
+      static?: string;
+      topLeft?: string;
+      topRight?: string;
+    }
+    interface MenuProps extends Props {
+      active?: boolean;
+      children?: React.ReactNode;
+      onHide?: Function;
+      onSelect?: Function;
+      onShow?: Function;
+      position?: "auto" | "static" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
+      ripple?: boolean;
+      selectable?: boolean;
+      selected?: any;
+      theme?: MenuThemeProps;
+    }
+    export class Menu extends React.Component<MenuProps, {}> {
+    }
+
+    /**
+     * <IconMenu/>
+     */
+    interface IconMenuThemeProps {
+      icon?: string;
+      iconMenu?: string;
+    }
+    interface IconMenuProps extends Props {
+      children?: React.ReactNode;
+      icon?: React.ReactNode | string;
+      iconRipple?: boolean;
+      menuRipple?: boolean;
+      onSelect?: Function;
+      onShow?: Function;
+      position?: "auto" | "static" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
+      selectable?: boolean;
+      selected?: any;
+      theme?: IconMenuThemeProps;
+    }
+    export class IconMenu extends React.Component<IconMenuProps, {}> {
+    }
+
+    /**
+     * <MenuDivider/>
+     */
+    interface MenuDividerThemeProps {
+      menuDivider?: string;
+    }
+    interface MenuDividerProps extends Props {
+      theme?: MenuDividerThemeProps;
+    }
+    export class MenuDivider extends React.Component<MenuDividerProps, {}> {
+    }
+
+    /**
+     * <ListDivider/>
+     */
+    interface ListDividerThemeProps {
+      divider?: string;
+      inset?: string;
+    }
+    interface ListDividerProps extends Props {
+      inset?: boolean;
+      theme?: ListDividerThemeProps;
+    }
+    export class ListDivider extends React.Component<ListDivider, {}> {
+    }
+
+    /**
+     * <MenuItem/>
+     */
+    interface MenuItemThemeProps {
+      caption?: string;
+      disabled?: string;
+      icon?: string;
+      menuItem?: string;
+      selected?: string;
+      shortcut?: string;
+    }
+    interface MenuItemProps extends Props {
+      caption?: string;
+      children?: React.ReactNode;
+      disabled?: boolean;
+      icon?: React.ReactNode | string;
+      selected?: boolean;
+      theme?: MenuItemThemeProps;
+    }
+    export class MenuItem extends React.Component<MenuItemProps, {}> {
+    }
+  } // Menu
+
+  /**
+   * <Navigation/>
+   */
+  interface NavigationThemeProps {
+    button?: string;
+    horizontal?: string;
+    link?: string;
+    vertical?: string;
+  }
+  interface NavigationProps extends Props {
+    actions?: any[];
+    children?: React.ReactNode;
+    routes?: any[];
+    theme?: NavigationThemeProps;
+    type?: "vertical" | "horizontal";
+  }
+  export class Navigation extends React.Component<NavigationProps, {}> {
+  }
+
+  /**
+   * <ProgressBar/>
+   */
+  interface ProgressBarThemeProps {
+    buffer?: string;
+    circle?: string;
+    circular?: string;
+    indeterminate?: string;
+    linear?: string;
+    multicolor?: string;
+    path?: string;
+    value?: string;
+  }
+  interface ProgressBarProps extends Props {
+    buffer?: number;
+    max?: number;
+    min?: number;
+    mode?: "determinate" | "indeterminate";
+    multicolor?: boolean;
+    theme?: ProgressBarThemeProps;
+    type?: "linear" | "circular";
+    value?: number;
+  }
+  export class ProgressBar extends React.Component<ProgressBarProps, {}> {
+  }
+
+  // Radio
+  namespace Radio {
+    /**
+     * <RadioGroup/>
+     */
+    interface RadioGroupProps extends Props {
+      children?: React.ReactNode;
+      disabled?: boolean;
+      name?: string;
+      onChange?: Function;
+      value?: number;
+    }
+    export class RadioGroup extends React.Component<RadioGroupProps, {}> {
+    }
+
+    /**
+     * <RadioButton/>
+     */
+    interface RadioButtonThemeProps {
+      radio?: string;
+      radioChecked?: string;
+      ripple?: string;
+      disabled?: string;
+      field?: string;
+      input?: string;
+      text?: string;
+    }
+    interface RadioButtonProps extends Props {
+      checked?: boolean;
+      disabled?: boolean;
+      label?: React.ReactNode | string;
+      name?: string;
+      onBlur?: React.FocusEventHandler;
+      onChange?: React.FormEventHandler;
+      onFocus?: React.FocusEventHandler;
+      theme?: RadioButtonThemeProps;
+      value?: any;
+    }
+    export class RadioButton extends React.Component<RadioButtonProps, {}> {
+    }
+  } // Radio
+
+  /**
+   * <RadioButton/>
+   */
+  interface RippleThemeProps {
+    ripple?: string;
+    rippleActive?: string;
+    rippleRestarting?: string;
+    riplleWrapper?: string;
+  }
+  interface RippleProps {
+    children?: React.ReactNode;
+    disabled?: boolean;
+    onRippleEnded?: Function;
+    spread?: number;
+    theme?: RippleThemeProps;
+  }
+  export class Ripple extends React.Component<RippleProps, {}> {
+  }
+
+  /**
+   * <Slider/>
+   */
+  interface SliderThemeProps {
+    container?: string;
+    editable?: string;
+    innerknob?: string;
+    innerprogress?: string;
+    input?: string;
+    knob?: string;
+    pinned?: string;
+    pressed?: string;
+    progress?: string;
+    ring?: string;
+    slider?: string;
+    snap?: string;
+    snaps?: string;
+  }
+  interface SliderProps {
+    editable?: boolean;
+    max?: number;
+    min?: number;
+    onChange?: Function;
+    pinned?: boolean;
+    snaps?: boolean;
+    step?: number;
+    theme?: RippleThemeProps;
+    value?: number;
+  }
+  export class Slider extends React.Component<SliderProps, {}> {
+  }
+
+  /**
+   * <Snackbar/>
+   */
+  interface SnackbarThemeProps {
+    accept?: string;
+    active?: string;
+    button?: string;
+    cancel?: string;
+    icon?: string;
+    label?: string;
+    snackbar?: string;
+    warning?: string;
+  }
+  interface SnackbarProps {
+    action?: string;
+    active?: boolean;
+    icon?: React.ReactNode | string;
+    label?: string;
+    onTimeout?: Function;
+    theme?: SnackbarThemeProps;
+    timeout?: number;
+    type?: "accept" | "cancel" | "warning";
+  }
+  export class Snackbar extends React.Component<SnackbarProps, {}> {
+  }
+
+  /**
+   * <Switch/>
+   */
+  interface SwitchThemeProps {
+    disabled?: string;
+    field?: string;
+    input?: string;
+    off?: string;
+    on?: string;
+    ripple?: string;
+    text?: string;
+    thumb?: string;
+  }
+  interface SwitchProps {
+    checked?: boolean;
+    disabled?: boolean;
+    label?: string;
+    name?: string;
+    onBlur?: React.FocusEventHandler;
+    onChange?: React.FormEventHandler;
+    onFocus?: React.FocusEventHandler;
+    theme?: SwitchThemeProps;
+  }
+  export class Switch extends React.Component<SwitchProps, {}> {
+  }
+
+  /**
+   * <Table/>
+   */
+  interface TableThemeProps {
+    editable?: string;
+    row?: string;
+    selectable?: string;
+    selected?: string;
+    table?: string;
+  }
+  interface TableProps {
+    heading?: boolean;
+    model?: any;
+    onChange?: Function;
+    onSelect?: React.FormEventHandler;
+    selectable?: boolean;
+    multiSelectable?: boolean;
+    selected?: any[];
+    source?: any[];
+    theme?: TableThemeProps;
+  }
+  export class Table extends React.Component<TableProps, {}> {
+  }
+
+  // Tabs
+  namespace Tabs {
+    /**
+     * <Tabs/>
+     */
+    interface TabsThemeProps {
+      active?: string;
+      navigation?: string;
+      pointer?: string;
+      tabs?: string;
+      tab?: string;
+    }
+    interface TabsProps extends Props {
+      children?: React.ReactNode;
+      disableAnimatedBottomBorder?: boolean;
+      index?: number;
+      onChange?: Function;
+      theme?: TabsThemeProps;
+    }
+    export class Tabs extends React.Component<TabsProps, {}> {
+    }
+
+    /**
+     * <Tab/>
+     */
+    interface TabThemeProps {
+      active?: string;
+      disabled?: string;
+      hidden?: string;
+      label?: string;
+    }
+    interface TabProps extends Props {
+      active?: boolean;
+      activeClassName?: string;
+      disabled?: boolean;
+      hidden?: boolean;
+      label?: string;
+      onActive?: Function;
+      theme?: TabThemeProps;
+    }
+    export class Tab extends React.Component<TabProps, {}> {
+    }
+  } // Tabs
+
+  /**
+   * <TimePicker/>
+   */
+  interface TimePickerThemeProps {
+    active?: string;
+    am?: string;
+    amFormat?: string;
+    ampm?: string;
+    button?: string;
+    clock?: string;
+    clockWrapper?: string;
+    dialog?: string;
+    face?: string;
+    hand?: string;
+    header?: string;
+    hours?: string;
+    hoursDisplay?: string;
+    input?: string;
+    knob?: string;
+    minutes?: string;
+    minutesDisplay?: string;
+    number?: string;
+    placeholder?: string;
+    pm?: string;
+    pmFormat?: string;
+    separator?: string;
+    small?: string;
+  }
+  interface TimePickerProps {
+    error?: string;
+    inputClassName?: string;
+    format?: "24hr" | "ampm";
+    label?: string;
+    onChange?: Function;
+    theme?: TimePickerThemeProps;
+    value?: Date;
+  }
+  export class TimePicker extends React.Component<TimePickerProps, {}> {
+  }
+
+  /**
+   * <TooltipComponent/>
+   */
+  interface TooltipThemeProps {
+    tooltip?: string;
+    tooltipActive?: string;
+    tooltipWrapper?: string;
+  }
+  interface TooltipProps {
+    onMouseEnter?: React.MouseEventHandler;
+    onMouseLeave?: React.MouseEventHandler;
+    theme?: TooltipThemeProps;
+    tooltip?: string;
+    tooltipDelay?: number;
+    tooltipHideOnClick?: boolean;
+  }
+  class TooltipComponent<P, S> extends React.Component<P, S> {
+    props: P & TooltipProps;
+  }
+  interface TooltippedComponentClass<P> extends TooltipProps {
+    new (props?: P, context?: any): TooltipComponent<P, any>;
+  }
+  export function Tooltip<P>(componentClass: React.ComponentClass<P>): TooltippedComponentClass<P>;
+} // __ReactToolbox
+
+declare module "react-toolbox/lib/app_bar" {
+  export import AppBar = __ReactToolbox.AppBar;
+  export default AppBar;
+}
+
+declare module "react-toolbox/lib/autocomplete" {
+  export import Autocomplete = __ReactToolbox.Autocomplete;
+  export default Autocomplete;
+}
+
+declare module "react-toolbox/lib/avatar" {
+  export import Avatar = __ReactToolbox.Avatar;
+  export default Avatar;
+}
+
+declare module "react-toolbox/lib/button" {
+  export import Button = __ReactToolbox.Button.Button;
+  export import IconButton = __ReactToolbox.Button.IconButton;
+  export default { Button, IconButton };
+}
+
+declare module "react-toolbox/lib/card" {
+  export import Card = __ReactToolbox.Card.Card;
+  export import CardActions = __ReactToolbox.Card.CardActions;
+  export import CardMedia = __ReactToolbox.Card.CardMedia;
+  export import CardText = __ReactToolbox.Card.CardText;
+  export import CardTitle = __ReactToolbox.Card.CardTitle;
+  export default { Card, CardActions, CardMedia, CardText, CardTitle };
+}
+
+declare module "react-toolbox/lib/checkbox" {
+  export import Checkbox = __ReactToolbox.Checkbox;
+  export default Checkbox;
+}
+
+declare module "react-toolbox/lib/chip" {
+  export import Chip = __ReactToolbox.Chip;
+  export default Chip;
+}
+
+declare module "react-toolbox/lib/date_picker" {
+  export import DatePicker = __ReactToolbox.DatePicker;
+  export default DatePicker;
+}
+
+declare module "react-toolbox/lib/dialog" {
+  export import Dialog = __ReactToolbox.Dialog;
+  export default Dialog;
+}
+
+declare module "react-toolbox/lib/drawer" {
+  export import Drawer = __ReactToolbox.Drawer;
+  export default Drawer;
+}
+
+declare module "react-toolbox/lib/dropdown" {
+  export import Dropdown = __ReactToolbox.Dropdown;
+  export default Dropdown;
+}
+
+declare module "react-toolbox/lib/font_icon" {
+  export import FontIcon = __ReactToolbox.FontIcon;
+  export default FontIcon;
+}
+
+declare module "react-toolbox/lib/input" {
+  export import Input = __ReactToolbox.Input;
+  export default Input;
+}
+
+declare module "react-toolbox/lib/layout" {
+  export import Layout = __ReactToolbox.Layout.Layout;
+  export import NavDrawer = __ReactToolbox.Layout.NavDrawer;
+  export import Panel = __ReactToolbox.Layout.Panel;
+  export import Sidebar = __ReactToolbox.Layout.Sidebar;
+  export default { Layout, NavDrawer, Panel, Sidebar };
+}
+
+declare module "react-toolbox/lib/link" {
+  export import Link = __ReactToolbox.Link;
+  export default Link;
+}
+
+declare module "react-toolbox/lib/list" {
+  export import List = __ReactToolbox.List.List;
+  export import ListCheckbox = __ReactToolbox.List.ListCheckbox;
+  export import ListDivider = __ReactToolbox.List.ListDivider;
+  export import ListItem = __ReactToolbox.List.ListItem;
+  export import ListSubHeader = __ReactToolbox.List.ListSubHeader;
+  export default { List, ListCheckbox, ListDivider, ListItem, ListSubHeader };
+}
+
+declare module "react-toolbox/lib/menu" {
+  export import Menu = __ReactToolbox.Menu.Menu;
+  export import IconMenu = __ReactToolbox.Menu.IconMenu;
+  export import MenuDivider = __ReactToolbox.Menu.MenuDivider;
+  export import MenuItem = __ReactToolbox.Menu.MenuItem;
+  export default { Menu, IconMenu, MenuDivider, MenuItem };
+}
+
+declare module "react-toolbox/lib/navigation" {
+  export import Navigation = __ReactToolbox.Navigation;
+  export default Navigation;
+}
+
+declare module "react-toolbox/lib/progress_bar" {
+  export import Progressbar = __ReactToolbox.ProgressBar;
+  export default Progressbar;
+}
+
+declare module "react-toolbox/lib/radio" {
+  export import RadioGroup = __ReactToolbox.Radio.RadioGroup;
+  export import RadioButton = __ReactToolbox.Radio.RadioButton;
+  export default { RadioGroup, RadioButton };
+}
+
+declare module "react-toolbox/lib/ripple" {
+  export import Ripple = __ReactToolbox.Ripple;
+  export default Ripple;
+}
+
+declare module "react-toolbox/lib/slider" {
+  export import Slider = __ReactToolbox.Slider;
+  export default Slider;
+}
+
+declare module "react-toolbox/lib/snackbar" {
+  export import Snackbar = __ReactToolbox.Snackbar;
+  export default Snackbar;
+}
+
+declare module "react-toolbox/lib/switch" {
+  export import Switch = __ReactToolbox.Switch;
+  export default Switch;
+}
+
+declare module "react-toolbox/lib/table" {
+  export import Table = __ReactToolbox.Table;
+  export default Table;
+}
+
+declare module "react-toolbox/lib/tabs" {
+  export import Tab = __ReactToolbox.Tabs.Tab;
+  export import Tabs = __ReactToolbox.Tabs.Tabs;
+  export default { Tab, Tabs };
+}
+
+declare module "react-toolbox/lib/time_picker" {
+  export import TimePicker = __ReactToolbox.TimePicker;
+  export default TimePicker;
+}
+
+declare module "react-toolbox/lib/tooltip" {
+  export import Tooltip = __ReactToolbox.Tooltip;
+  export default Tooltip;
+}
+
+declare module "react-toolbox" {
+  import AppBar from "react-toolbox/lib/app_bar";
+  import Autocomplete from "react-toolbox/lib/autocomplete";
+  import Avatar from "react-toolbox/lib/avatar";
+  import { Button, IconButton } from "react-toolbox/lib/button";
+  import { Card, CardTitle, CardMedia, CardText, CardActions } from "react-toolbox/lib/card";
+  import Checkbox from "react-toolbox/lib/checkbox";
+  import Chip from "react-toolbox/lib/chip";
+  import DatePicker from "react-toolbox/lib/date_picker";
+  import Dialog from "react-toolbox/lib/dialog";
+  import Drawer from "react-toolbox/lib/drawer";
+  import Dropdown from "react-toolbox/lib/dropdown";
+  import FontIcon from "react-toolbox/lib/font_icon";
+  import Input from "react-toolbox/lib/input";
+  import { Layout, Panel, NavDrawer, Sidebar } from "react-toolbox/lib/layout";
+  import Link from "react-toolbox/lib/link";
+  import { List, ListCheckbox, ListItem, ListDivider, ListSubHeader } from "react-toolbox/lib/list";
+  import { Menu, MenuDivider, MenuItem, IconMenu } from "react-toolbox/lib/menu";
+  import Navigation from "react-toolbox/lib/navigation";
+  import ProgressBar from "react-toolbox/lib/progress_bar";
+  import { RadioButton, RadioGroup } from "react-toolbox/lib/radio";
+  import Ripple from "react-toolbox/lib/ripple";
+  import Slider from "react-toolbox/lib/slider";
+  import Snackbar from "react-toolbox/lib/snackbar";
+  import Switch from "react-toolbox/lib/switch";
+  import { Tabs, Tab } from "react-toolbox/lib/tabs";
+  import TimePicker from "react-toolbox/lib/time_picker";
+  import Tooltip from "react-toolbox/lib/tooltip";
+
+  export {
+    AppBar,
+    Autocomplete,
+    Avatar,
+    Button,
+    IconButton,
+    Card,
+    CardTitle,
+    CardMedia,
+    CardText,
+    CardActions,
+    Checkbox,
+    Chip,
+    DatePicker,
+    Dialog,
+    Drawer,
+    Dropdown,
+    FontIcon,
+    Input,
+    Layout,
+    Panel,
+    NavDrawer,
+    Sidebar,
+    Link,
+    List,
+    ListCheckbox,
+    ListItem,
+    ListDivider,
+    ListSubHeader,
+    Menu,
+    MenuDivider,
+    MenuItem,
+    IconMenu,
+    Navigation,
+    ProgressBar,
+    RadioButton,
+    RadioGroup,
+    Ripple,
+    Slider,
+    Snackbar,
+    Switch,
+    Tabs,
+    Tab,
+    TimePicker,
+    Tooltip
+  }
+}

From c9ac90fffe913c99586fed7dd73563ae475055c3 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 17 Jul 2016 18:16:13 +0200
Subject: [PATCH 0672/1024] Fixes #542

---
 components/button/theme.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/button/theme.scss b/components/button/theme.scss
index d75ca421d..f57d6027e 100644
--- a/components/button/theme.scss
+++ b/components/button/theme.scss
@@ -17,6 +17,7 @@
   align-content: center;
   align-items: center;
   justify-content: center;
+  line-height: $button-height;
   text-align: center;
   text-decoration: none;
   white-space: nowrap;

From 621e798b7e3d7737e55a08c22d7842e286fdf9b3 Mon Sep 17 00:00:00 2001
From: normano64 <per.bergqwist@gmail.com>
Date: Sun, 17 Jul 2016 18:22:23 +0200
Subject: [PATCH 0673/1024] A lot of JSDoc comments added, even more left

---
 index.d.ts | 1042 ++++++++++++++++++++++++++++++++++++----------------
 1 file changed, 719 insertions(+), 323 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 586aa526a..c901356e7 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -1,193 +1,563 @@
-// Type definitions for react-toolbox 1.0.2
+// Type definitions for react-toolbox
 // Project: https://github.com/react-toolbox/react-toolbox
 // Definitions by: Per Bergqwist <https://github.com/normano64>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+declare module "react-toolbox" {
+  export import AppBar = __ReactToolbox.AppBar;
+  export import Autocomplete = __ReactToolbox.Autocomplete;
+  export import Avatar = __ReactToolbox.Avatar;
+  export import Button = __ReactToolbox.Button.Button;
+  export import IconButton = __ReactToolbox.Button.IconButton;
+  export import Card = __ReactToolbox.Card.Card;
+  export import CardTitle = __ReactToolbox.Card.CardTitle;
+  export import CardMedia = __ReactToolbox.Card.CardMedia;
+  export import CardText = __ReactToolbox.Card.CardText;
+  export import CardActions = __ReactToolbox.Card.CardActions;
+  export import Checkbox = __ReactToolbox.Checkbox;
+  export import Chip = __ReactToolbox.Chip;
+  export import DatePicker = __ReactToolbox.DatePicker;
+  export import Dialog = __ReactToolbox.Dialog;
+  export import Drawer = __ReactToolbox.Drawer;
+  export import Dropdown = __ReactToolbox.Dropdown;
+  export import FontIcon = __ReactToolbox.FontIcon;
+  export import Input = __ReactToolbox.Input;
+  export import Layout = __ReactToolbox.Layout.Layout;
+  export import Panel = __ReactToolbox.Layout.Panel;
+  export import NavDrawer = __ReactToolbox.Layout.NavDrawer;
+  export import Sidebar = __ReactToolbox.Layout.Sidebar;
+  export import Link = __ReactToolbox.Link;
+  export import List = __ReactToolbox.List.List;
+  export import ListCheckbox = __ReactToolbox.List.ListCheckbox;
+  export import ListItem = __ReactToolbox.List.ListItem;
+  export import ListDivider = __ReactToolbox.List.ListDivider;
+  export import ListSubHeader = __ReactToolbox.List.ListSubHeader;
+  export import Menu = __ReactToolbox.Menu.Menu;
+  export import MenuDivider = __ReactToolbox.Menu.MenuDivider;
+  export import MenuItem = __ReactToolbox.Menu.MenuItem;
+  export import IconMenu = __ReactToolbox.Menu.IconMenu;
+  export import Navigation = __ReactToolbox.Navigation;
+  export import ProgressBar = __ReactToolbox.ProgressBar;
+  export import RadioGroup = __ReactToolbox.Radio.RadioGroup;
+  export import RadioButton = __ReactToolbox.Radio.RadioButton;
+  export import Ripple = __ReactToolbox.Ripple;
+  export import Slider = __ReactToolbox.Slider;
+  export import Snackbar = __ReactToolbox.Snackbar;
+  export import Switch = __ReactToolbox.Switch;
+  export import Tabs = __ReactToolbox.Tabs.Tabs;
+  export import Tab = __ReactToolbox.Tabs.Tab;
+  export import TimePicker = __ReactToolbox.TimePicker;
+  export import Tooltip = __ReactToolbox.Tooltip;
+
+  export import AppBarTheme = __ReactToolbox.AppBarTheme;
+  export import AutocompleteTheme = __ReactToolbox.AutocompleteTheme;
+  export import AvatarTheme = __ReactToolbox.AvatarTheme;
+  export import ButtonTheme = __ReactToolbox.Button.ButtonTheme;
+  export import IconButtonTheme = __ReactToolbox.Button.IconButtonTheme;
+  export import CardTheme = __ReactToolbox.Card.CardTheme;
+  export import CardTitleTheme = __ReactToolbox.Card.CardTitleTheme;
+  export import CardMediaTheme = __ReactToolbox.Card.CardMediaTheme;
+  export import CardTextTheme = __ReactToolbox.Card.CardTextTheme;
+  export import CardActionsTheme = __ReactToolbox.Card.CardActionsTheme;
+  export import CheckboxTheme = __ReactToolbox.CheckboxTheme;
+  export import ChipTheme = __ReactToolbox.ChipTheme;
+  export import DatePickerTheme = __ReactToolbox.DatePickerTheme;
+  export import DialogTheme = __ReactToolbox.DialogTheme;
+  export import DrawerTheme = __ReactToolbox.DrawerTheme;
+  export import DropdownTheme = __ReactToolbox.DropdownTheme;
+  export import InputTheme = __ReactToolbox.InputTheme;
+  export import LayoutTheme = __ReactToolbox.Layout.LayoutTheme;
+  export import PanelTheme = __ReactToolbox.Layout.PanelTheme;
+  export import NavDrawerTheme = __ReactToolbox.Layout.NavDrawerTheme;
+  export import SidebarTheme = __ReactToolbox.Layout.SidebarTheme;
+  export import LinkTheme = __ReactToolbox.LinkTheme;
+  export import ListTheme = __ReactToolbox.List.ListTheme;
+  export import ListCheckboxTheme = __ReactToolbox.List.ListCheckboxTheme;
+  export import ListItemTheme = __ReactToolbox.List.ListItemTheme;
+  export import ListDividerTheme = __ReactToolbox.List.ListDividerTheme;
+  export import ListSubHeaderTheme = __ReactToolbox.List.ListSubHeaderTheme;
+  export import MenuTheme = __ReactToolbox.Menu.MenuTheme;
+  export import MenuDividerTheme = __ReactToolbox.Menu.MenuDividerTheme;
+  export import MenuItemTheme = __ReactToolbox.Menu.MenuItemTheme;
+  export import IconMenuTheme = __ReactToolbox.Menu.IconMenuTheme;
+  export import NavigationTheme = __ReactToolbox.NavigationTheme;
+  export import ProgressBarTheme = __ReactToolbox.ProgressBarTheme;
+  export import RadioButtonTheme = __ReactToolbox.Radio.RadioButtonTheme;
+  export import RippleTheme = __ReactToolbox.RippleTheme;
+  export import SliderTheme = __ReactToolbox.SliderTheme;
+  export import SnackbarTheme = __ReactToolbox.SnackbarTheme;
+  export import SwitchTheme = __ReactToolbox.SwitchTheme;
+  export import TabsTheme = __ReactToolbox.Tabs.TabsTheme;
+  export import TabTheme = __ReactToolbox.Tabs.TabTheme;
+  export import TimePickerTheme = __ReactToolbox.TimePickerTheme;
+  export import TooltipTheme = __ReactToolbox.TooltipTheme;
+}
 
-// __ReactToolbox
 declare namespace __ReactToolbox {
   import React = __React;
 
   interface Props {
+    /**
+     * Set a class for the root component.
+     */
     className?: string;
+    /**
+     * Key used to uniquely identify the element within an Array.
+     */
     key?: string | number;
+    /**
+     * Callback called when the component is clicked.
+     */
     onClick?: React.MouseEventHandler;
+    /**
+     * Set inline style for the root component.
+     */
     style?: React.CSSProperties;
   }
 
-  /**
-   * <AppBar/>
-   */
-  interface AppBarThemeProps {
+  export interface AppBarTheme {
+    /**
+     * Used for the component root element.
+     */
     appBar?: string;
+    /**
+     * Added to the root element when the app bar is fixed.
+     */
     fixed?: string;
+    /**
+     * Added to the root element when the app bar is flat.
+     */
     flat?: string;
   }
   interface AppBarProps extends Props {
+    /**
+     * Children to pass through the component.
+     */
     children?: React.ReactNode;
+    /**
+     * Determine if the bar should have position fixed or relative.
+     * @default false
+     */
     fixed?: boolean;
+    /**
+     * If true, the AppBar shows a shadow.
+     * @default false
+     */
     flat?: boolean;
-    theme?: AppBarThemeProps;
+    /**
+     * Classnames object defining the component style.
+     */
+    theme?: AppBarTheme;
   }
   export class AppBar extends React.Component<AppBarProps, {}> {
   }
 
-  /**
-   * <Autocomplete/>
-   */
-  interface AutocompleteThemeProps {
+  export interface AutocompleteTheme {
+    /**
+     * Used for a suggestion when it's active.
+     */
     active?: string;
+    /**
+     * Used for the root element.
+     */
     autocomplete?: string;
+    /**
+     * Used when the input is focused.
+     */
     focus?: string;
+    /**
+     * Used to style the Input component.
+     */
     input?: string;
+    /**
+     * Used for the label.
+     */
     label?: string;
+    /**
+     * Used to style each suggestion.
+     */
     suggestion?: string;
+    /**
+     * Used to style the suggestions container.
+     */
     suggestions?: string;
+    /**
+     * Used for the suggestions when it's opening to the top.
+     */
     up?: string;
+    /**
+     * Classname used for a single value.
+     */
     value?: string;
+    /**
+     * Classname used for the values container.
+     */
     values?: string;
   }
   interface AutocompleteProps extends Props {
+    /**
+     * Determines the opening direction. It can be auto, up or down.
+     * @default auto
+     */
     direction?: "auto" | "up" | "down";
+    /**
+     * If true, component will be disabled.
+     */
     disabled?: boolean;
+    /**
+     * Sets the error string for the internal input element.
+     * @default false
+     */
     error?: string;
+    /**
+     * The text string to use for the floating label element.
+     */
     label?: string;
+    /**
+     * If true, component can hold multiple values.
+     */
     multiple?: boolean;
+    /**
+     * Callback function that is fired when the components's value changes.
+     * @default auto
+     */
     onChange?: React.FormEventHandler;
+    /**
+     * Determines if the selected list is shown above or below input. It can be above or below.
+     * @default above
+     */
     selectedPosition?: "above" | "below";
+    /**
+     * If true, the list of suggestions will not be filtered when a value is selected.
+     * @default false
+     */
     showSuggestionsWHenValueIsSet?: boolean;
+    /**
+     * Object of key/values or array representing all items suggested.
+     */
     source?: any;
+    /**
+     * Determines how suggestions are supplied.
+     * @default start
+     */
     suggestionMatch?: "start" | "anywhere" | "word";
-    style?: React.CSSProperties;
-    theme?: AutocompleteThemeProps;
+    /**
+     * Classnames object defining the component style.
+     */
+    theme?: AutocompleteTheme;
+    /**
+     * Value or array of values currently selected component.
+     */
     value?: any;
   }
   export class Autocomplete extends React.Component<AutocompleteProps, {}> {
   }
 
-  /**
-   * <Avatar/>
-   */
-  interface AvatarThemeProps {
+  export interface AvatarTheme {
+    /**
+     * Used for the root class of the element.
+     */
     avatar?: string;
+    /**
+     * Added to the root element when the component has image.
+     */
     image?: string;
+    /**
+     * Used for the root element if the component shows the letter.
+     */
     letter?: string;
   }
   interface AvatarProps extends Props {
+    /**
+     * Children to pass through the component.
+     */
     children?: React.ReactNode;
+    /**
+     * Set to true if your image is not squared so it will be used as a cover for the element.
+     */
     cover?: boolean;
+    /**
+     * A key to identify an Icon from Material Design Icons or a custom Icon Element.
+     */
     icon?: React.ReactNode | string;
+    /**
+     * An image source or an image element.
+     */
     image?: React.ReactNode | string;
-    theme?: AvatarThemeProps;
+    /**
+     * Classnames object defining the component style.
+     */
+    theme?: AvatarTheme;
+    /**
+     * A title for the image. If no image is provided, the first letter will be displayed as the avatar.
+     */
     title?: string;
   }
   export class Avatar extends React.Component<AvatarProps, {}> {
   }
 
-  // Button
   namespace Button {
-    /**
-     * <Button/>
-     */
-    interface ButtonThemeProps {
+    export interface ButtonTheme {
+      /**
+       * Used for the root in case button is accent.
+       */
       accent?: string;
+      /**
+       * Used for the root element in any button.
+       */
       button?: string;
+      /**
+       * Used when the button is flat for the root element.
+       */
       flat?: string;
+      /**
+       * Used when the button is floating for the root element.
+       */
       floating?: string;
+      /**
+       * For the icon inside a button.
+       */
       icon?: string;
+      /**
+       * Used when colors are inverted.
+       */
       inverse?: string;
+      /**
+       * Used for mini floating buttons.
+       */
       mini?: string;
+      /**
+       * Used for neutral colored buttons.
+       */
       neutral?: string;
+      /**
+       * Used for primary buttons when button is primary.
+       */
       primary?: string;
+      /**
+       * Used when the button is raised for root element.
+       */
       raised?: string;
+      /**
+       * Used for the ripple element.
+       */
       rippleWrapper?: string;
+      /**
+       * Used for toggle buttons in the root element.
+       */
       toggle?: string;
     }
     interface ButtonProps extends Props {
+      /**
+       * Indicates if the button should have accent color.
+       * @default false
+       */
       accent?: boolean;
+      /**
+       * Children to pass through the component.
+       */
       children?: React.ReactNode;
+      /**
+       * If true, component will be disabled.
+       * @default false
+       */
       disabled?: boolean;
+      /**
+       * If true, the button will have a flat look.
+       * @default false
+       */
       flat?: boolean;
+      /**
+       * If true, the button will have a floating look.
+       * @default false
+       */
       floating?: boolean;
+      /**
+       * Creates a link for the button.
+       */
       href?: string;
+      /**
+       * Value of the icon (See Font Icon Component).
+       */
       icon?: React.ReactNode | string;
+      /**
+       * If true, the neutral colors are inverted. Useful to put a button over a dark background.
+       */
       inverse?: boolean;
+      /**
+       * The text string to use for the name of the button.
+       */
       label?: string;
+      /**
+       * To be used with floating button. If true, the button will be smaller.
+       * @default false
+       */
       mini?: boolean;
+      /**
+       * Set it to false if you don't want the neutral styles to be included.
+       * @default true
+       */
       neutral?: boolean;
+      /**
+       * Fires after the mouse leaves the Component.
+       */
       onMouseLeave?: React.MouseEventHandler;
+      /**
+       * Fires after the mouse is released from the Component.
+       */
       OnMouseUp?: React.MouseEventHandler;
+      /**
+       * Indicates if the button should have primary color.
+       * @default false
+       */
       primary?: boolean;
+      /**
+       * If true, the button will have a raised look.
+       * @default false
+       */
       raised?: boolean;
+      /**
+       * If true, component will have a ripple effect on click.
+       * @default true
+       */
       ripple?: boolean;
-      theme?: ButtonThemeProps;
+      /**
+       * Classnames object defining the component style.
+       */
+      theme?: ButtonTheme;
     }
     export class Button extends React.Component<ButtonProps, {}> {
     }
 
-    /**
-     * <IconButton/>
-     */
-    interface IconButtonThemeProps {
+    export interface IconButtonTheme {
+      /**
+       * Used for the root in case button is accent.
+       */
       accent?: string;
+      /**
+       * Used for the root element in any button.
+       */
       button?: string;
+      /**
+       * For the icon inside a button.
+       */
       icon?: string;
+      /**
+       * Used when colors are inverted.
+       */
       inverse?: string;
+      /**
+       * Used for neutral colored buttons.
+       */
       neutral?: string;
+      /**
+       * Used for primary buttons when button is primary.
+       */
       primary?: string;
+      /**
+       * Used for the ripple element.
+       */
       rippleWrapper?: string;
+      /**
+       * Used for toggle buttons in the root element.
+       */
       toggle?: string;
     }
     interface IconButtonProps extends Props {
+      /**
+       * Indicates if the button should have accent color.
+       * @default false
+       */
       accent?: boolean;
+      /**
+       * Children to pass through the component.
+       */
       children?: React.ReactNode;
+      /**
+       * If true, component will be disabled.
+       * @default false
+       */
       disabled?: boolean;
+      /**
+       * Creates a link for the button.
+       */
       href?: string;
+      /**
+       * Value of the icon (See Font Icon Component).
+       */
       icon?: React.ReactNode | string;
+      /**
+       * If true, the neutral colors are inverted. Useful to put a button over a dark background.
+       */
       inverse?: boolean;
+      /**
+       * Set it to false if you don't want the neutral styles to be included.
+       * @default true
+       */
       neutral?: boolean;
+      /**
+       * Fires after the mouse leaves the Component.
+       */
       onMouseLeave?: React.MouseEventHandler;
+      /**
+       * Fires after the mouse is released from the Component.
+       */
       OnMouseUp?: React.MouseEventHandler;
+      /**
+       * Indicates if the button should have primary color.
+       * @default false
+       */
       primary?: boolean;
+      /**
+       * If true, component will have a ripple effect on click.
+       * @default true
+       */
       ripple?: boolean;
-      theme?: IconButtonThemeProps;
+      /**
+       * Classnames object defining the component style.
+       */
+      theme?: IconButtonTheme;
     }
     export class IconButton extends React.Component<IconButtonProps, {}> {
     }
-  } // Button
+  }
 
-  // Card
   namespace Card {
-    /**
-     * <Card/>
-     */
-    interface CardThemeProps {
+    export interface CardTheme {
       card?: string;
       raised?: string;
     }
     interface CardProps extends Props {
+      /**
+       * Children to pass through the component.
+       */
       children?: React.ReactNode;
       raised?: boolean;
-      theme?: CardThemeProps;
+      /**
+       * Classnames object defining the component style.
+       */
+      theme?: CardTheme;
     }
     export class Card extends React.Component<CardProps, {}> {
     }
 
-    /**
-     * <CardActions/>
-     */
-    interface CardActionsThemeProps {
+    export interface CardActionsTheme {
       cardActions?: string;
     }
     interface CardActionsProps extends Props {
+      /**
+       * Children to pass through the component.
+       */
       children?: React.ReactNode;
-      theme?: CardActionsThemeProps;
+      /**
+       * Classnames object defining the component style.
+       */
+      theme?: CardActionsTheme;
     }
     export class CardActions extends React.Component<CardActionsProps, {}> {
     }
 
-    /**
-     * <CardMedia/>
-     */
-    interface CardMediaThemeProps {
+    export interface CardMediaTheme {
       cardMedia?: string;
       content?: string;
       contentOverlay?: string;
@@ -196,32 +566,38 @@ declare namespace __ReactToolbox {
     }
     interface CardMediaProps extends Props {
       aspectRatio?: "wide" | "square";
+      /**
+       * Children to pass through the component.
+       */
       children?: React.ReactNode;
       color?: string;
       contentOverlay?: boolean;
       image?: React.ReactNode | string;
-      theme?: CardMediaThemeProps;
+      /**
+       * Classnames object defining the component style.
+       */
+      theme?: CardMediaTheme;
     }
     export class CardMedia extends React.Component<CardMediaProps, {}> {
     }
 
-    /**
-     * <CardText/>
-     */
-    interface CardTextThemeProps {
+    export interface CardTextTheme {
       cardText?: string;
     }
     interface CardTextProps extends Props {
+      /**
+       * Children to pass through the component.
+       */
       children?: React.ReactNode;
-      theme?: CardTextThemeProps;
+      /**
+       * Classnames object defining the component style.
+       */
+      theme?: CardTextTheme;
     }
     export class CardText extends React.Component<CardTextProps, {}> {
     }
 
-    /**
-     * <CardTitle/>
-     */
-    interface CardTitleThemeProps {
+    export interface CardTitleTheme {
       large?: string;
       title?: string;
       small?: string;
@@ -229,19 +605,22 @@ declare namespace __ReactToolbox {
     }
     interface CardTitleProps extends Props {
       avatar?: React.ReactNode | string;
+      /**
+       * Children to pass through the component.
+       */
       children?: React.ReactNode;
       subtitle?: React.ReactNode | string;
-      theme?: CardTitleThemeProps;
+      /**
+       * Classnames object defining the component style.
+       */
+      theme?: CardTitleTheme;
       title?: React.ReactNode | string;
     }
     export class CardTitle extends React.Component<CardTitleProps, {}> {
     }
-  } // Card
+  }
 
-  /**
-   * <Checkbox/>
-   */
-  interface CheckboxThemeProps {
+  export interface CheckboxTheme {
     check?: string;
     checked?: string;
     disabled?: string;
@@ -255,15 +634,15 @@ declare namespace __ReactToolbox {
     label?: React.ReactNode | string;
     name?: string;
     onChange?: React.MouseEventHandler;
-    theme?: CheckboxThemeProps;
+    /**
+     * Classnames object defining the component style.
+     */
+    theme?: CheckboxTheme;
   }
   export class Checkbox extends React.Component<CheckboxProps, {}> {
   }
 
-  /**
-   * <Chip/>
-   */
-  interface ChipThemeProps {
+  export interface ChipTheme {
     avatar?: string;
     chip?: string;
     deletable?: string;
@@ -272,18 +651,21 @@ declare namespace __ReactToolbox {
     deleteX?: string;
   }
   interface ChipProps extends Props {
+    /**
+     * Children to pass through the component.
+     */
     children?: React.ReactNode;
     deleteable?: boolean;
     onDeleteClick?: React.MouseEventHandler;
-    theme?: ChipThemeProps;
+    /**
+     * Classnames object defining the component style.
+     */
+    theme?: ChipTheme;
   }
   export class Chip extends React.Component<ChipProps, {}> {
   }
 
-  /**
-   * <DatePicker/>
-   */
-  interface DatePickerThemeProps {
+  export interface DatePickerTheme {
     active?: string;
     button?: string;
     calendar?: string;
@@ -318,16 +700,16 @@ declare namespace __ReactToolbox {
     onChange?: React.MouseEventHandler;
     onEscKeyDown?: React.KeyboardEventHandler;
     onOverlayClick?: React.MouseEventHandler;
-    theme?: DatePickerThemeProps;
+    /**
+     * Classnames object defining the component style.
+     */
+    theme?: DatePickerTheme;
     value?: Date | string;
   }
   export class DatePicker extends React.Component<DatePickerProps, {}> {
   }
 
-  /**
-   * <Dialog/>
-   */
-  interface DialogThemeProps {
+  export interface DialogTheme {
     active?: string;
     body?: string;
     button?: string;
@@ -341,23 +723,26 @@ declare namespace __ReactToolbox {
   interface DialogProps extends Props {
     actions?: DialogActionProps[];
     active?: boolean;
+    /**
+     * Children to pass through the component.
+     */
     children?: React.ReactNode;
     onEscKeyDown?: React.KeyboardEventHandler;
     onOverlayClick?: React.MouseEventHandler;
     onOverlayMouseDown?: React.MouseEventHandler;
     onOverlayMouseMove?: React.MouseEventHandler;
     onOverlayMouseUp?: React.MouseEventHandler;
-    theme?: DialogThemeProps;
+    /**
+     * Classnames object defining the component style.
+     */
+    theme?: DialogTheme;
     title?: string;
     type?: string;
   }
   export class Dialog extends React.Component<DialogProps, {}> {
   }
 
-  /**
-   * <Drawer/>
-   */
-  interface DrawerThemeProps {
+  export interface DrawerTheme {
     active?: string;
     content?: string;
     drawer?: string;
@@ -366,18 +751,21 @@ declare namespace __ReactToolbox {
   }
   interface DrawerProps extends Props {
     active?: boolean;
+    /**
+     * Children to pass through the component.
+     */
     children?: React.ReactNode;
     onOverlayClick?: React.MouseEventHandler;
-    theme?: DrawerThemeProps;
+    /**
+     * Classnames object defining the component style.
+     */
+    theme?: DrawerTheme;
     type?: "left" | "right";
   }
   export class Drawer extends React.Component<DrawerProps, {}> {
   }
 
-  /**
-   * <Dropdown/>
-   */
-  interface DropdownThemeProps {
+  export interface DropdownTheme {
     active?: string;
     disabled?: string;
     dropdown?: string;
@@ -403,26 +791,26 @@ declare namespace __ReactToolbox {
     onFocus?: React.FocusEventHandler;
     source: any[];
     template?: Function;
-    theme?: DropdownThemeProps;
+    /**
+     * Classnames object defining the component style.
+     */
+    theme?: DropdownTheme;
     value?: string | number;
   }
   export class Dropdown extends React.Component<DropdownProps, {}> {
   }
 
-  /**
-   * <FontIcon/>
-   */
   interface FontIconProps extends Props {
+    /**
+     * Children to pass through the component.
+     */
     children?: React.ReactNode;
     value?: React.ReactNode | string;
   }
   export class FontIcon extends React.Component<FontIconProps, {}> {
   }
 
-  /**
-   * <Input/>
-   */
-  interface InputThemeProps {
+  export interface InputTheme {
     bar?: string;
     counter?: string;
     disabled?: string;
@@ -437,6 +825,9 @@ declare namespace __ReactToolbox {
     withIcon?: string;
   }
   interface InputProps extends Props {
+    /**
+     * Children to pass through the component.
+     */
     children?: React.ReactNode;
     disabled?: boolean;
     error?: string;
@@ -452,32 +843,34 @@ declare namespace __ReactToolbox {
     onFocus?: React.FocusEventHandler;
     onKeyPress?: React.MouseEventHandler;
     required?: boolean;
-    theme?: InputThemeProps;
+    /**
+     * Classnames object defining the component style.
+     */
+    theme?: InputTheme;
     type?: string;
     value?: any;
   }
   export class Input extends React.Component<InputProps, {}> {
   }
 
-  // Layout
   namespace Layout {
-    /**
-     * <Layout/>
-     */
-    interface LayoutThemeProps {
+    export interface LayoutTheme {
       layout?: string;
     }
     interface LayoutProps extends Props {
+      /**
+       * Children to pass through the component.
+       */
       children?: [NavDrawer | Panel | Sidebar];
-      theme?: LayoutThemeProps;
+      /**
+       * Classnames object defining the component style.
+       */
+      theme?: LayoutTheme;
     }
     export class Layout extends React.Component<LayoutProps, {}> {
     }
 
-    /**
-     * <NavDrawer/>
-     */
-    interface NavDrawerThemeProps {
+    export interface NavDrawerTheme {
       active?: string;
       drawerContent?: string;
       lgPermangent?: string;
@@ -494,93 +887,107 @@ declare namespace __ReactToolbox {
     }
     interface NavDrawerProps extends Props {
       active?: boolean;
+      /**
+       * Children to pass through the component.
+       */
       children?: React.ReactNode;
       onOverlayClick?: React.MouseEventHandler;
       permanentAt?: "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
       pinned?: boolean;
       scrollY?: boolean;
-      theme?: NavDrawerThemeProps;
+      /**
+       * Classnames object defining the component style.
+       */
+      theme?: NavDrawerTheme;
       width?: "normal" | "wide";
     }
     export class NavDrawer extends React.Component<NavDrawerProps, {}> {
     }
 
-    /**
-     * <Panel/>
-     */
-    interface PanelThemeProps {
+    export interface PanelTheme {
       panel?: string;
       scrollY?: string;
     }
     interface PanelProps extends Props {
+      /**
+       * Children to pass through the component.
+       */
       children?: React.ReactNode;
       scrollY?: boolean;
-      theme?: PanelThemeProps;
+      /**
+       * Classnames object defining the component style.
+       */
+      theme?: PanelTheme;
     }
     export class Panel extends React.Component<PanelProps, {}> {
     }
 
-    /**
-     * <Sidebar/>
-     */
-    interface SidebarThemeProps {
+    export interface SidebarTheme {
       pinned?: string;
       scrollY?: string;
       sidebar?: string;
       sidebarContent?: string;
     }
     interface SidebarProps extends Props {
+      /**
+       * Children to pass through the component.
+       */
       children?: React.ReactNode;
       pinned?: boolean;
       scrollY?: boolean;
-      theme?: SidebarThemeProps;
+      /**
+       * Classnames object defining the component style.
+       */
+      theme?: SidebarTheme;
       width?: number; // 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 25 | 33 | 50 | 66 | 75 | 100;
     }
     export class Sidebar extends React.Component<SidebarProps, {}> {
     }
+  }
 
-  } // Layout
-
-  /**
-   * <Link/>
-   */
-  interface LinkThemeProps {
+  export interface LinkTheme {
     active?: string;
     icon?: string;
     link?: string;
   }
   interface LinkProps extends Props {
     active?: boolean;
+    /**
+     * Children to pass through the component.
+     */
     children?: React.ReactNode;
     count?: number;
     icon?: React.ReactNode | string;
     label?: string;
-    theme?: LinkThemeProps;
+    /**
+     * Classnames object defining the component style.
+     */
+    theme?: LinkTheme;
   }
   export class Link extends React.Component<LinkProps, {}> {
   }
 
-  // List
+
   namespace List {
-    /**
-     * <List/>
-     */
-    interface ListThemeProps {
+    export interface ListTheme {
       list?: string;
     }
     interface ListProps extends Props {
+      /**
+       * Children to pass through the component.
+       */
       children?: React.ReactNode;
       ripple?: boolean;
       selectable?: boolean;
-      theme?: ListThemeProps;
+      /**
+       * Classnames object defining the component style.
+       */
+      theme?: ListTheme;
     }
     export class List extends React.Component<ListProps, {}> {
     }
 
-    /**
-     * <ListCheckbox/>
-     */
-    interface ListCheckboxThemeProps {
+    export interface ListCheckboxTheme {
       checkbox?: string;
       checkboxItem?: string;
       disabled?: string;
@@ -599,29 +1006,29 @@ declare namespace __ReactToolbox {
       onBlur?: React.FocusEventHandler;
       onChange?: React.FormEventHandler;
       onFocus?: React.FocusEventHandler;
-      theme?: ListCheckboxThemeProps;
+      /**
+       * Classnames object defining the component style.
+       */
+      theme?: ListCheckboxTheme;
     }
     export class ListCheckbox extends React.Component<ListCheckboxProps, {}> {
     }
 
-    /**
-     * <ListDivider/>
-     */
-    interface ListDividerThemeProps {
+    export interface ListDividerTheme {
       divider?: string;
       inset?: string;
     }
     interface ListDividerProps extends Props {
       inset?: boolean;
-      theme?: ListDividerThemeProps;
+      /**
+       * Classnames object defining the component style.
+       */
+      theme?: ListDividerTheme;
     }
     export class ListDivider extends React.Component<ListDivider, {}> {
     }
 
-    /**
-     * <ListItem/>
-     */
-    interface ListItemThemeProps {
+    export interface ListItemTheme {
       disabled?: string;
       item?: string;
       itemAction?: string;
@@ -635,6 +1042,9 @@ declare namespace __ReactToolbox {
     interface ListItemProps extends Props {
       avatar?: React.ReactNode | string;
       caption?: string;
+      /**
+       * Children to pass through the component.
+       */
       children?: React.ReactNode;
       disabled?: boolean;
       itemContent?: React.ReactNode;
@@ -643,32 +1053,32 @@ declare namespace __ReactToolbox {
       rightIcon?: React.ReactNode | string;
       ripple?: boolean;
       selectable?: boolean;
-      theme?: ListItemThemeProps;
+      /**
+       * Classnames object defining the component style.
+       */
+      theme?: ListItemTheme;
       to?: string;
     }
     export class ListItem extends React.Component<ListItemProps, {}> {
     }
 
-    /**
-     * <ListSubHeader/>
-     */
-    interface ListSubHeaderThemeProps {
+    export interface ListSubHeaderTheme {
       subheader?: string;
     }
     interface ListSubHeaderProps extends Props {
       caption?: boolean;
-      theme?: ListSubHeaderThemeProps;
+      /**
+       * Classnames object defining the component style.
+       */
+      theme?: ListSubHeaderTheme;
     }
     export class ListSubHeader extends React.Component<ListSubHeaderProps, {}> {
     }
-  } // List
+  }
+
 
-  // Menu
   namespace Menu {
-    /**
-     * <Menu/>
-     */
-    interface MenuThemeProps {
+    export interface MenuTheme {
       active?: string;
       bottomLeft?: string;
       bottomRight?: string;
@@ -682,6 +1092,9 @@ declare namespace __ReactToolbox {
     }
     interface MenuProps extends Props {
       active?: boolean;
+      /**
+       * Children to pass through the component.
+       */
       children?: React.ReactNode;
       onHide?: Function;
       onSelect?: Function;
@@ -690,19 +1103,22 @@ declare namespace __ReactToolbox {
       ripple?: boolean;
       selectable?: boolean;
       selected?: any;
-      theme?: MenuThemeProps;
+      /**
+       * Classnames object defining the component style.
+       */
+      theme?: MenuTheme;
     }
     export class Menu extends React.Component<MenuProps, {}> {
     }
 
-    /**
-     * <IconMenu/>
-     */
-    interface IconMenuThemeProps {
+    export interface IconMenuTheme {
       icon?: string;
       iconMenu?: string;
     }
     interface IconMenuProps extends Props {
+      /**
+       * Children to pass through the component.
+       */
       children?: React.ReactNode;
       icon?: React.ReactNode | string;
       iconRipple?: boolean;
@@ -712,41 +1128,41 @@ declare namespace __ReactToolbox {
       position?: "auto" | "static" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
       selectable?: boolean;
       selected?: any;
-      theme?: IconMenuThemeProps;
+      /**
+       * Classnames object defining the component style.
+       */
+      theme?: IconMenuTheme;
     }
     export class IconMenu extends React.Component<IconMenuProps, {}> {
     }
 
-    /**
-     * <MenuDivider/>
-     */
-    interface MenuDividerThemeProps {
+    export interface MenuDividerTheme {
       menuDivider?: string;
     }
     interface MenuDividerProps extends Props {
-      theme?: MenuDividerThemeProps;
+      /**
+       * Classnames object defining the component style.
+       */
+      theme?: MenuDividerTheme;
     }
     export class MenuDivider extends React.Component<MenuDividerProps, {}> {
     }
 
-    /**
-     * <ListDivider/>
-     */
-    interface ListDividerThemeProps {
+    export interface ListDividerTheme {
       divider?: string;
       inset?: string;
     }
     interface ListDividerProps extends Props {
       inset?: boolean;
-      theme?: ListDividerThemeProps;
+      /**
+       * Classnames object defining the component style.
+       */
+      theme?: ListDividerTheme;
     }
     export class ListDivider extends React.Component<ListDivider, {}> {
     }
 
-    /**
-     * <MenuItem/>
-     */
-    interface MenuItemThemeProps {
+    export interface MenuItemTheme {
       caption?: string;
       disabled?: string;
       icon?: string;
@@ -756,20 +1172,23 @@ declare namespace __ReactToolbox {
     }
     interface MenuItemProps extends Props {
       caption?: string;
+      /**
+       * Children to pass through the component.
+       */
       children?: React.ReactNode;
       disabled?: boolean;
       icon?: React.ReactNode | string;
       selected?: boolean;
-      theme?: MenuItemThemeProps;
+      /**
+       * Classnames object defining the component style.
+       */
+      theme?: MenuItemTheme;
     }
     export class MenuItem extends React.Component<MenuItemProps, {}> {
     }
-  } // Menu
+  }
 
-  /**
-   * <Navigation/>
-   */
-  interface NavigationThemeProps {
+  export interface NavigationTheme {
     button?: string;
     horizontal?: string;
     link?: string;
@@ -777,18 +1196,21 @@ declare namespace __ReactToolbox {
   }
   interface NavigationProps extends Props {
     actions?: any[];
+    /**
+     * Children to pass through the component.
+     */
     children?: React.ReactNode;
     routes?: any[];
-    theme?: NavigationThemeProps;
+    /**
+     * Classnames object defining the component style.
+     */
+    theme?: NavigationTheme;
     type?: "vertical" | "horizontal";
   }
   export class Navigation extends React.Component<NavigationProps, {}> {
   }
 
-  /**
-   * <ProgressBar/>
-   */
-  interface ProgressBarThemeProps {
+  export interface ProgressBarTheme {
     buffer?: string;
     circle?: string;
     circular?: string;
@@ -804,19 +1226,22 @@ declare namespace __ReactToolbox {
     min?: number;
     mode?: "determinate" | "indeterminate";
     multicolor?: boolean;
-    theme?: ProgressBarThemeProps;
+    /**
+     * Classnames object defining the component style.
+     */
+    theme?: ProgressBarTheme;
     type?: "linear" | "circular";
     value?: number;
   }
   export class ProgressBar extends React.Component<ProgressBarProps, {}> {
   }
 
-  // Radio
+
   namespace Radio {
-    /**
-     * <RadioGroup/>
-     */
     interface RadioGroupProps extends Props {
+      /**
+       * Children to pass through the component.
+       */
       children?: React.ReactNode;
       disabled?: boolean;
       name?: string;
@@ -826,10 +1251,7 @@ declare namespace __ReactToolbox {
     export class RadioGroup extends React.Component<RadioGroupProps, {}> {
     }
 
-    /**
-     * <RadioButton/>
-     */
-    interface RadioButtonThemeProps {
+    export interface RadioButtonTheme {
       radio?: string;
       radioChecked?: string;
       ripple?: string;
@@ -846,36 +1268,39 @@ declare namespace __ReactToolbox {
       onBlur?: React.FocusEventHandler;
       onChange?: React.FormEventHandler;
       onFocus?: React.FocusEventHandler;
-      theme?: RadioButtonThemeProps;
+      /**
+       * Classnames object defining the component style.
+       */
+      theme?: RadioButtonTheme;
       value?: any;
     }
     export class RadioButton extends React.Component<RadioButtonProps, {}> {
     }
-  } // Radio
+  }
 
-  /**
-   * <RadioButton/>
-   */
-  interface RippleThemeProps {
+  export interface RippleTheme {
     ripple?: string;
     rippleActive?: string;
     rippleRestarting?: string;
     riplleWrapper?: string;
   }
   interface RippleProps {
+    /**
+     * Children to pass through the component.
+     */
     children?: React.ReactNode;
     disabled?: boolean;
     onRippleEnded?: Function;
     spread?: number;
-    theme?: RippleThemeProps;
+    /**
+     * Classnames object defining the component style.
+     */
+    theme?: RippleTheme;
   }
   export class Ripple extends React.Component<RippleProps, {}> {
   }
 
-  /**
-   * <Slider/>
-   */
-  interface SliderThemeProps {
+  export interface SliderTheme {
     container?: string;
     editable?: string;
     innerknob?: string;
@@ -898,16 +1323,16 @@ declare namespace __ReactToolbox {
     pinned?: boolean;
     snaps?: boolean;
     step?: number;
-    theme?: RippleThemeProps;
+    /**
+     * Classnames object defining the component style.
+     */
+    theme?: RippleTheme;
     value?: number;
   }
   export class Slider extends React.Component<SliderProps, {}> {
   }
 
-  /**
-   * <Snackbar/>
-   */
-  interface SnackbarThemeProps {
+  export interface SnackbarTheme {
     accept?: string;
     active?: string;
     button?: string;
@@ -923,17 +1348,17 @@ declare namespace __ReactToolbox {
     icon?: React.ReactNode | string;
     label?: string;
     onTimeout?: Function;
-    theme?: SnackbarThemeProps;
+    /**
+     * Classnames object defining the component style.
+     */
+    theme?: SnackbarTheme;
     timeout?: number;
     type?: "accept" | "cancel" | "warning";
   }
   export class Snackbar extends React.Component<SnackbarProps, {}> {
   }
 
-  /**
-   * <Switch/>
-   */
-  interface SwitchThemeProps {
+  export interface SwitchTheme {
     disabled?: string;
     field?: string;
     input?: string;
@@ -951,15 +1376,15 @@ declare namespace __ReactToolbox {
     onBlur?: React.FocusEventHandler;
     onChange?: React.FormEventHandler;
     onFocus?: React.FocusEventHandler;
-    theme?: SwitchThemeProps;
+    /**
+     * Classnames object defining the component style.
+     */
+    theme?: SwitchTheme;
   }
   export class Switch extends React.Component<SwitchProps, {}> {
   }
 
-  /**
-   * <Table/>
-   */
-  interface TableThemeProps {
+  export interface TableTheme {
     editable?: string;
     row?: string;
     selectable?: string;
@@ -975,17 +1400,17 @@ declare namespace __ReactToolbox {
     multiSelectable?: boolean;
     selected?: any[];
     source?: any[];
-    theme?: TableThemeProps;
+    /**
+     * Classnames object defining the component style.
+     */
+    theme?: TableTheme;
   }
   export class Table extends React.Component<TableProps, {}> {
   }
 
-  // Tabs
+
   namespace Tabs {
-    /**
-     * <Tabs/>
-     */
-    interface TabsThemeProps {
+    export interface TabsTheme {
       active?: string;
       navigation?: string;
       pointer?: string;
@@ -993,19 +1418,22 @@ declare namespace __ReactToolbox {
       tab?: string;
     }
     interface TabsProps extends Props {
+      /**
+       * Children to pass through the component.
+       */
       children?: React.ReactNode;
       disableAnimatedBottomBorder?: boolean;
       index?: number;
       onChange?: Function;
-      theme?: TabsThemeProps;
+      /**
+       * Classnames object defining the component style.
+       */
+      theme?: TabsTheme;
     }
     export class Tabs extends React.Component<TabsProps, {}> {
     }
 
-    /**
-     * <Tab/>
-     */
-    interface TabThemeProps {
+    export interface TabTheme {
       active?: string;
       disabled?: string;
       hidden?: string;
@@ -1018,16 +1446,16 @@ declare namespace __ReactToolbox {
       hidden?: boolean;
       label?: string;
       onActive?: Function;
-      theme?: TabThemeProps;
+      /**
+       * Classnames object defining the component style.
+       */
+      theme?: TabTheme;
     }
     export class Tab extends React.Component<TabProps, {}> {
     }
-  } // Tabs
+  }
 
-  /**
-   * <TimePicker/>
-   */
-  interface TimePickerThemeProps {
+  export interface TimePickerTheme {
     active?: string;
     am?: string;
     amFormat?: string;
@@ -1058,16 +1486,16 @@ declare namespace __ReactToolbox {
     format?: "24hr" | "ampm";
     label?: string;
     onChange?: Function;
-    theme?: TimePickerThemeProps;
+    /**
+     * Classnames object defining the component style.
+     */
+    theme?: TimePickerTheme;
     value?: Date;
   }
   export class TimePicker extends React.Component<TimePickerProps, {}> {
   }
 
-  /**
-   * <TooltipComponent/>
-   */
-  interface TooltipThemeProps {
+  export interface TooltipTheme {
     tooltip?: string;
     tooltipActive?: string;
     tooltipWrapper?: string;
@@ -1075,7 +1503,10 @@ declare namespace __ReactToolbox {
   interface TooltipProps {
     onMouseEnter?: React.MouseEventHandler;
     onMouseLeave?: React.MouseEventHandler;
-    theme?: TooltipThemeProps;
+    /**
+     * Classnames object defining the component style.
+     */
+    theme?: TooltipTheme;
     tooltip?: string;
     tooltipDelay?: number;
     tooltipHideOnClick?: boolean;
@@ -1087,27 +1518,36 @@ declare namespace __ReactToolbox {
     new (props?: P, context?: any): TooltipComponent<P, any>;
   }
   export function Tooltip<P>(componentClass: React.ComponentClass<P>): TooltippedComponentClass<P>;
-} // __ReactToolbox
+}
 
 declare module "react-toolbox/lib/app_bar" {
   export import AppBar = __ReactToolbox.AppBar;
   export default AppBar;
+
+  export import AppBarTheme = __ReactToolbox.AppBarTheme;
 }
 
 declare module "react-toolbox/lib/autocomplete" {
   export import Autocomplete = __ReactToolbox.Autocomplete;
   export default Autocomplete;
+
+  export import AutocompleteTheme = __ReactToolbox.Autocomplete;
 }
 
 declare module "react-toolbox/lib/avatar" {
   export import Avatar = __ReactToolbox.Avatar;
   export default Avatar;
+
+  export import AvatarTheme = __ReactToolbox.AvatarTheme;
 }
 
 declare module "react-toolbox/lib/button" {
   export import Button = __ReactToolbox.Button.Button;
   export import IconButton = __ReactToolbox.Button.IconButton;
   export default { Button, IconButton };
+
+  export import ButtonTheme = __ReactToolbox.Button.ButtonTheme;
+  export import IconButtonTheme = __ReactToolbox.Button.IconButtonTheme;
 }
 
 declare module "react-toolbox/lib/card" {
@@ -1117,36 +1557,54 @@ declare module "react-toolbox/lib/card" {
   export import CardText = __ReactToolbox.Card.CardText;
   export import CardTitle = __ReactToolbox.Card.CardTitle;
   export default { Card, CardActions, CardMedia, CardText, CardTitle };
+
+  export import CardTheme = __ReactToolbox.Card.CardTheme;
+  export import CardActionsTheme = __ReactToolbox.Card.CardActionsTheme;
+  export import CardMediaTheme = __ReactToolbox.Card.CardMediaTheme;
+  export import CardTextTheme = __ReactToolbox.Card.CardTextTheme;
+  export import CardTitleTheme = __ReactToolbox.Card.CardTitleTheme;
 }
 
 declare module "react-toolbox/lib/checkbox" {
   export import Checkbox = __ReactToolbox.Checkbox;
   export default Checkbox;
+
+  export import CheckboxTheme = __ReactToolbox.CheckboxTheme;
 }
 
 declare module "react-toolbox/lib/chip" {
   export import Chip = __ReactToolbox.Chip;
   export default Chip;
+
+  export import ChipTheme = __ReactToolbox.ChipTheme;
 }
 
 declare module "react-toolbox/lib/date_picker" {
   export import DatePicker = __ReactToolbox.DatePicker;
   export default DatePicker;
+
+  export import DatePickerTheme = __ReactToolbox.DatePickerTheme;
 }
 
 declare module "react-toolbox/lib/dialog" {
   export import Dialog = __ReactToolbox.Dialog;
   export default Dialog;
+
+  export import DialogTheme = __ReactToolbox.DialogTheme;
 }
 
 declare module "react-toolbox/lib/drawer" {
   export import Drawer = __ReactToolbox.Drawer;
   export default Drawer;
+
+  export import DrawerTheme = __ReactToolbox.DrawerTheme;
 }
 
 declare module "react-toolbox/lib/dropdown" {
   export import Dropdown = __ReactToolbox.Dropdown;
   export default Dropdown;
+
+  export import DropdownTheme = __ReactToolbox.DropdownTheme;
 }
 
 declare module "react-toolbox/lib/font_icon" {
@@ -1157,6 +1615,8 @@ declare module "react-toolbox/lib/font_icon" {
 declare module "react-toolbox/lib/input" {
   export import Input = __ReactToolbox.Input;
   export default Input;
+
+  export import InputTheme = __ReactToolbox.InputTheme;
 }
 
 declare module "react-toolbox/lib/layout" {
@@ -1164,12 +1624,19 @@ declare module "react-toolbox/lib/layout" {
   export import NavDrawer = __ReactToolbox.Layout.NavDrawer;
   export import Panel = __ReactToolbox.Layout.Panel;
   export import Sidebar = __ReactToolbox.Layout.Sidebar;
-  export default { Layout, NavDrawer, Panel, Sidebar };
+  export default { Layout, NavDrawer, Panel, Sidebar }
+
+  export import LayoutTheme = __ReactToolbox.Layout.LayoutTheme;
+  export import NavDrawerTheme = __ReactToolbox.Layout.NavDrawerTheme;
+  export import PanelTheme = __ReactToolbox.Layout.PanelTheme;
+  export import SidebarTheme = __ReactToolbox.Layout.SidebarTheme;
 }
 
 declare module "react-toolbox/lib/link" {
   export import Link = __ReactToolbox.Link;
   export default Link;
+
+  export import LinkTheme = __ReactToolbox.LinkTheme;
 }
 
 declare module "react-toolbox/lib/list" {
@@ -1179,6 +1646,12 @@ declare module "react-toolbox/lib/list" {
   export import ListItem = __ReactToolbox.List.ListItem;
   export import ListSubHeader = __ReactToolbox.List.ListSubHeader;
   export default { List, ListCheckbox, ListDivider, ListItem, ListSubHeader };
+
+  export import ListTheme = __ReactToolbox.List.ListTheme;
+  export import ListCheckboxTheme = __ReactToolbox.List.ListCheckboxTheme;
+  export import ListDividerTheme = __ReactToolbox.List.ListDividerTheme;
+  export import ListItemTheme = __ReactToolbox.List.ListItemTheme;
+  export import ListSubHeaderTheme = __ReactToolbox.List.ListSubHeaderTheme;
 }
 
 declare module "react-toolbox/lib/menu" {
@@ -1245,80 +1718,3 @@ declare module "react-toolbox/lib/tooltip" {
   export import Tooltip = __ReactToolbox.Tooltip;
   export default Tooltip;
 }
-
-declare module "react-toolbox" {
-  import AppBar from "react-toolbox/lib/app_bar";
-  import Autocomplete from "react-toolbox/lib/autocomplete";
-  import Avatar from "react-toolbox/lib/avatar";
-  import { Button, IconButton } from "react-toolbox/lib/button";
-  import { Card, CardTitle, CardMedia, CardText, CardActions } from "react-toolbox/lib/card";
-  import Checkbox from "react-toolbox/lib/checkbox";
-  import Chip from "react-toolbox/lib/chip";
-  import DatePicker from "react-toolbox/lib/date_picker";
-  import Dialog from "react-toolbox/lib/dialog";
-  import Drawer from "react-toolbox/lib/drawer";
-  import Dropdown from "react-toolbox/lib/dropdown";
-  import FontIcon from "react-toolbox/lib/font_icon";
-  import Input from "react-toolbox/lib/input";
-  import { Layout, Panel, NavDrawer, Sidebar } from "react-toolbox/lib/layout";
-  import Link from "react-toolbox/lib/link";
-  import { List, ListCheckbox, ListItem, ListDivider, ListSubHeader } from "react-toolbox/lib/list";
-  import { Menu, MenuDivider, MenuItem, IconMenu } from "react-toolbox/lib/menu";
-  import Navigation from "react-toolbox/lib/navigation";
-  import ProgressBar from "react-toolbox/lib/progress_bar";
-  import { RadioButton, RadioGroup } from "react-toolbox/lib/radio";
-  import Ripple from "react-toolbox/lib/ripple";
-  import Slider from "react-toolbox/lib/slider";
-  import Snackbar from "react-toolbox/lib/snackbar";
-  import Switch from "react-toolbox/lib/switch";
-  import { Tabs, Tab } from "react-toolbox/lib/tabs";
-  import TimePicker from "react-toolbox/lib/time_picker";
-  import Tooltip from "react-toolbox/lib/tooltip";
-
-  export {
-    AppBar,
-    Autocomplete,
-    Avatar,
-    Button,
-    IconButton,
-    Card,
-    CardTitle,
-    CardMedia,
-    CardText,
-    CardActions,
-    Checkbox,
-    Chip,
-    DatePicker,
-    Dialog,
-    Drawer,
-    Dropdown,
-    FontIcon,
-    Input,
-    Layout,
-    Panel,
-    NavDrawer,
-    Sidebar,
-    Link,
-    List,
-    ListCheckbox,
-    ListItem,
-    ListDivider,
-    ListSubHeader,
-    Menu,
-    MenuDivider,
-    MenuItem,
-    IconMenu,
-    Navigation,
-    ProgressBar,
-    RadioButton,
-    RadioGroup,
-    Ripple,
-    Slider,
-    Snackbar,
-    Switch,
-    Tabs,
-    Tab,
-    TimePicker,
-    Tooltip
-  }
-}

From e077f8a1996b1e8f144fa0f24bbe96983885b378 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 18 Jul 2016 10:45:03 +0200
Subject: [PATCH 0674/1024] Bugfix calculating Menu position

---
 components/menu/Menu.js | 47 ++++++++++++++++++++++++-----------------
 1 file changed, 28 insertions(+), 19 deletions(-)

diff --git a/components/menu/Menu.js b/components/menu/Menu.js
index 7bf7f5db5..8ff49bfea 100644
--- a/components/menu/Menu.js
+++ b/components/menu/Menu.js
@@ -59,39 +59,50 @@ const factory = (MenuItem) => {
     componentDidMount () {
       this.positionTimeoutHandle = setTimeout(() => {
         const { width, height } = this.refs.menu.getBoundingClientRect();
-        const position = this.props.position === POSITION.AUTO ? this.calculatePosition() : this.props.position;
+        const position = this.props.position === POSITION.AUTO
+          ? this.calculatePosition()
+          : this.props.position;
         this.setState({ position, width, height });
       });
     }
 
     componentWillReceiveProps (nextProps) {
       if (this.props.position !== nextProps.position) {
-        const position = nextProps.position === POSITION.AUTO ? this.calculatePosition() : nextProps.position;
+        const position = nextProps.position === POSITION.AUTO
+          ? this.calculatePosition()
+          : nextProps.position;
         this.setState({ position });
       }
 
+      /**
+       * If the menu is going to be activated via props and its not active, verify
+       * the position is appropriated and then show it recalculating position if its
+       * wrong. It should be shown in two consecutive setState.
+       */
       if (!this.props.active && nextProps.active && !this.state.active) {
-        this.show();
+        if (nextProps.position === POSITION.AUTO) {
+          const position = this.calculatePosition();
+          if (this.state.position !== position) {
+            this.setState({ position, active: false }, () => {
+              this.activateTimeoutHandle = setTimeout(() => { this.show(); }, 20);
+            });
+          } else {
+            this.show();
+          }
+        } else {
+          this.show();
+        }
       }
 
+      /**
+       * If the menu is being deactivated via props and the current state is
+       * active, it should be hid.
+       */
       if (this.props.active && !nextProps.active && this.state.active) {
         this.hide();
       }
     }
 
-    shouldComponentUpdate (nextProps, nextState) {
-      if (!this.state.active && nextState.active && this.props.position === POSITION.AUTO) {
-        const position = this.calculatePosition();
-        if (this.state.position !== position) {
-          this.setState({ position, active: false }, () => {
-            this.activateTimeoutHandle = setTimeout(() => {this.setState({active: true}); }, 20);
-          });
-          return false;
-        }
-      }
-      return true;
-    }
-
     componentWillUpdate (nextProps, nextState) {
       if (!this.state.active && nextState.active) {
         events.addEventsToDocument({click: this.handleDocumentClick});
@@ -108,9 +119,7 @@ const factory = (MenuItem) => {
     }
 
     componentWillUnmount () {
-      if (this.state.active) {
-        events.removeEventsFromDocument({click: this.handleDocumentClick});
-      }
+      if (this.state.active) events.removeEventsFromDocument({click: this.handleDocumentClick});
       clearTimeout(this.positionTimeoutHandle);
       clearTimeout(this.activateTimeoutHandle);
     }

From 10b69b5c8cc65989011ccc311257371a8ab8189f Mon Sep 17 00:00:00 2001
From: normano64 <per.bergqwist@gmail.com>
Date: Mon, 18 Jul 2016 17:25:48 +0200
Subject: [PATCH 0675/1024] Moved modules to separate files.

---
 components/app_bar/index.d.ts      |   41 +
 components/autocomplete/index.d.ts |  105 ++
 components/avatar/index.d.ts       |   47 +
 components/button/index.d.ts       |  227 ++++
 components/card/index.d.ts         |  102 ++
 components/checkbox/index.d.ts     |   26 +
 components/chip/index.d.ts         |   27 +
 components/date_picker/index.d.ts  |   48 +
 components/dialog/index.d.ts       |   38 +
 components/drawer/index.d.ts       |   27 +
 components/dropdown/index.d.ts     |   39 +
 components/font_icon/index.d.ts    |   13 +
 components/input/index.d.ts        |   47 +
 components/layout/index.d.ts       |   95 ++
 components/link/index.d.ts         |   25 +
 components/list/index.d.ts         |  112 ++
 components/menu/index.d.ts         |  115 ++
 components/navigation/index.d.ts   |   24 +
 components/progress_bar/index.d.ts |   30 +
 components/radio/index.d.ts        |   41 +
 components/ripple/index.d.ts       |   26 +
 components/slider/index.d.ts       |   36 +
 components/snackbar/index.d.ts     |   30 +
 components/switch/index.d.ts       |   30 +
 components/table/index.d.ts        |   28 +
 components/tabs/index.d.ts         |   47 +
 components/time_picker/index.d.ts  |   44 +
 components/tooltip/index.d.ts      |   31 +
 index.d.ts                         | 1825 ++--------------------------
 29 files changed, 1611 insertions(+), 1715 deletions(-)
 create mode 100644 components/app_bar/index.d.ts
 create mode 100644 components/autocomplete/index.d.ts
 create mode 100644 components/avatar/index.d.ts
 create mode 100644 components/button/index.d.ts
 create mode 100644 components/card/index.d.ts
 create mode 100644 components/checkbox/index.d.ts
 create mode 100644 components/chip/index.d.ts
 create mode 100644 components/date_picker/index.d.ts
 create mode 100644 components/dialog/index.d.ts
 create mode 100644 components/drawer/index.d.ts
 create mode 100644 components/dropdown/index.d.ts
 create mode 100644 components/font_icon/index.d.ts
 create mode 100644 components/input/index.d.ts
 create mode 100644 components/layout/index.d.ts
 create mode 100644 components/link/index.d.ts
 create mode 100644 components/list/index.d.ts
 create mode 100644 components/menu/index.d.ts
 create mode 100644 components/navigation/index.d.ts
 create mode 100644 components/progress_bar/index.d.ts
 create mode 100644 components/radio/index.d.ts
 create mode 100644 components/ripple/index.d.ts
 create mode 100644 components/slider/index.d.ts
 create mode 100644 components/snackbar/index.d.ts
 create mode 100644 components/switch/index.d.ts
 create mode 100644 components/table/index.d.ts
 create mode 100644 components/tabs/index.d.ts
 create mode 100644 components/time_picker/index.d.ts
 create mode 100644 components/tooltip/index.d.ts

diff --git a/components/app_bar/index.d.ts b/components/app_bar/index.d.ts
new file mode 100644
index 000000000..35fda69e4
--- /dev/null
+++ b/components/app_bar/index.d.ts
@@ -0,0 +1,41 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface AppBarTheme {
+  /**
+   * Used for the component root element.
+   */
+  appBar?: string;
+  /**
+   * Added to the root element when the app bar is fixed.
+   */
+  fixed?: string;
+  /**
+   * Added to the root element when the app bar is flat.
+   */
+  flat?: string;
+}
+
+interface AppBarProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Determine if the bar should have position fixed or relative.
+   * @default false
+   */
+  fixed?: boolean;
+  /**
+   * If true, the AppBar shows a shadow.
+   * @default false
+   */
+  flat?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: AppBarTheme;
+}
+
+export class AppBar extends __React.Component<AppBarProps, {}> { }
+
+export default AppBar;
diff --git a/components/autocomplete/index.d.ts b/components/autocomplete/index.d.ts
new file mode 100644
index 000000000..f1b33954d
--- /dev/null
+++ b/components/autocomplete/index.d.ts
@@ -0,0 +1,105 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface AutocompleteTheme {
+  /**
+   * Used for a suggestion when it's active.
+   */
+  active?: string;
+  /**
+   * Used for the root element.
+   */
+  autocomplete?: string;
+  /**
+   * Used when the input is focused.
+   */
+  focus?: string;
+  /**
+   * Used to style the Input component.
+   */
+  input?: string;
+  /**
+   * Used for the label.
+   */
+  label?: string;
+  /**
+   * Used to style each suggestion.
+   */
+  suggestion?: string;
+  /**
+   * Used to style the suggestions container.
+   */
+  suggestions?: string;
+  /**
+   * Used for the suggestions when it's opening to the top.
+   */
+  up?: string;
+  /**
+   * Classname used for a single value.
+   */
+  value?: string;
+  /**
+   * Classname used for the values container.
+   */
+  values?: string;
+}
+
+interface AutocompleteProps extends __ReactToolbox.Props {
+  /**
+   * Determines the opening direction. It can be auto, up or down.
+   * @default auto
+   */
+  direction?: "auto" | "up" | "down";
+  /**
+   * If true, component will be disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Sets the error string for the internal input element.
+   * @default false
+   */
+  error?: string;
+  /**
+   * The text string to use for the floating label element.
+   */
+  label?: string;
+  /**
+   * If true, component can hold multiple values.
+   */
+  multiple?: boolean;
+  /**
+   * Callback function that is fired when the components's value changes.
+   * @default auto
+   */
+  onChange?: __React.FormEventHandler;
+  /**
+   * Determines if the selected list is shown above or below input. It can be above or below.
+   * @default above
+   */
+  selectedPosition?: "above" | "below";
+  /**
+   * If true, the list of suggestions will not be filtered when a value is selected.
+   * @default false
+   */
+  showSuggestionsWHenValueIsSet?: boolean;
+  /**
+   * Object of key/values or array representing all items suggested.
+   */
+  source?: any;
+  /**
+   * Determines how suggestions are supplied.
+   * @default start
+   */
+  suggestionMatch?: "start" | "anywhere" | "word";
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: AutocompleteTheme;
+  /**
+   * Value or array of values currently selected component.
+   */
+  value?: any;
+}
+
+export class Autocomplete extends __React.Component<AutocompleteProps, {}> { }
+
+export default Autocomplete;
diff --git a/components/avatar/index.d.ts b/components/avatar/index.d.ts
new file mode 100644
index 000000000..0d4fbd238
--- /dev/null
+++ b/components/avatar/index.d.ts
@@ -0,0 +1,47 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface AvatarTheme {
+  /**
+   * Used for the root class of the element.
+   */
+  avatar?: string;
+  /**
+   * Added to the root element when the component has image.
+   */
+  image?: string;
+  /**
+   * Used for the root element if the component shows the letter.
+   */
+  letter?: string;
+}
+
+interface AvatarProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Set to true if your image is not squared so it will be used as a cover for the element.
+   */
+  cover?: boolean;
+  /**
+   * A key to identify an Icon from Material Design Icons or a custom Icon Element.
+   */
+  icon?: __React.ReactNode | string;
+  /**
+   * An image source or an image element.
+   */
+  image?: __React.ReactNode | string;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: AvatarTheme;
+  /**
+   * A title for the image. If no image is provided, the first letter will be displayed as the avatar.
+   */
+  title?: string;
+}
+
+export class Avatar extends __React.Component<AvatarProps, {}> { }
+
+export default Avatar;
diff --git a/components/button/index.d.ts b/components/button/index.d.ts
new file mode 100644
index 000000000..60721b880
--- /dev/null
+++ b/components/button/index.d.ts
@@ -0,0 +1,227 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface ButtonTheme {
+  /**
+   * Used for the root in case button is accent.
+   */
+  accent?: string;
+  /**
+   * Used for the root element in any button.
+   */
+  button?: string;
+  /**
+   * Used when the button is flat for the root element.
+   */
+  flat?: string;
+  /**
+   * Used when the button is floating for the root element.
+   */
+  floating?: string;
+  /**
+   * For the icon inside a button.
+   */
+  icon?: string;
+  /**
+   * Used when colors are inverted.
+   */
+  inverse?: string;
+  /**
+   * Used for mini floating buttons.
+   */
+  mini?: string;
+  /**
+   * Used for neutral colored buttons.
+   */
+  neutral?: string;
+  /**
+   * Used for primary buttons when button is primary.
+   */
+  primary?: string;
+  /**
+   * Used when the button is raised for root element.
+   */
+  raised?: string;
+  /**
+   * Used for the ripple element.
+   */
+  rippleWrapper?: string;
+  /**
+   * Used for toggle buttons in the root element.
+   */
+  toggle?: string;
+}
+
+interface ButtonProps extends __ReactToolbox.Props {
+  /**
+   * Indicates if the button should have accent color.
+   * @default false
+   */
+  accent?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If true, the button will have a flat look.
+   * @default false
+   */
+  flat?: boolean;
+  /**
+   * If true, the button will have a floating look.
+   * @default false
+   */
+  floating?: boolean;
+  /**
+   * Creates a link for the button.
+   */
+  href?: string;
+  /**
+   * Value of the icon (See Font Icon Component).
+   */
+  icon?: __React.ReactNode | string;
+  /**
+   * If true, the neutral colors are inverted. Useful to put a button over a dark background.
+   */
+  inverse?: boolean;
+  /**
+   * The text string to use for the name of the button.
+   */
+  label?: string;
+  /**
+   * To be used with floating button. If true, the button will be smaller.
+   * @default false
+   */
+  mini?: boolean;
+  /**
+   * Set it to false if you don't want the neutral styles to be included.
+   * @default true
+   */
+  neutral?: boolean;
+  /**
+   * Fires after the mouse leaves the Component.
+   */
+  onMouseLeave?: __React.MouseEventHandler;
+  /**
+   * Fires after the mouse is released from the Component.
+   */
+  OnMouseUp?: __React.MouseEventHandler;
+  /**
+   * Indicates if the button should have primary color.
+   * @default false
+   */
+  primary?: boolean;
+  /**
+   * If true, the button will have a raised look.
+   * @default false
+   */
+  raised?: boolean;
+  /**
+   * If true, component will have a ripple effect on click.
+   * @default true
+   */
+  ripple?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ButtonTheme;
+}
+
+export class Button extends __React.Component<ButtonProps, {}> { }
+
+export interface IconButtonTheme {
+  /**
+   * Used for the root in case button is accent.
+   */
+  accent?: string;
+  /**
+   * Used for the root element in any button.
+   */
+  button?: string;
+  /**
+   * For the icon inside a button.
+   */
+  icon?: string;
+  /**
+   * Used when colors are inverted.
+   */
+  inverse?: string;
+  /**
+   * Used for neutral colored buttons.
+   */
+  neutral?: string;
+  /**
+   * Used for primary buttons when button is primary.
+   */
+  primary?: string;
+  /**
+   * Used for the ripple element.
+   */
+  rippleWrapper?: string;
+  /**
+   * Used for toggle buttons in the root element.
+   */
+  toggle?: string;
+}
+
+interface IconButtonProps extends __ReactToolbox.Props {
+  /**
+   * Indicates if the button should have accent color.
+   * @default false
+   */
+  accent?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Creates a link for the button.
+   */
+  href?: string;
+  /**
+   * Value of the icon (See Font Icon Component).
+   */
+  icon?: __React.ReactNode | string;
+  /**
+   * If true, the neutral colors are inverted. Useful to put a button over a dark background.
+   */
+  inverse?: boolean;
+  /**
+   * Set it to false if you don't want the neutral styles to be included.
+   * @default true
+   */
+  neutral?: boolean;
+  /**
+   * Fires after the mouse leaves the Component.
+   */
+  onMouseLeave?: __React.MouseEventHandler;
+  /**
+   * Fires after the mouse is released from the Component.
+   */
+  OnMouseUp?: __React.MouseEventHandler;
+  /**
+   * Indicates if the button should have primary color.
+   * @default false
+   */
+  primary?: boolean;
+  /**
+   * If true, component will have a ripple effect on click.
+   * @default true
+   */
+  ripple?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: IconButtonTheme;
+}
+
+export class IconButton extends __React.Component<IconButtonProps, {}> { }
diff --git a/components/card/index.d.ts b/components/card/index.d.ts
new file mode 100644
index 000000000..a05b6a703
--- /dev/null
+++ b/components/card/index.d.ts
@@ -0,0 +1,102 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface CardTheme {
+  card?: string;
+  raised?: string;
+}
+
+interface CardProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  raised?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: CardTheme;
+}
+
+export class Card extends __React.Component<CardProps, {}> { }
+
+export interface CardActionsTheme {
+  cardActions?: string;
+}
+
+interface CardActionsProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: CardActionsTheme;
+}
+
+export class CardActions extends __React.Component<CardActionsProps, {}> { }
+
+export interface CardMediaTheme {
+  cardMedia?: string;
+  content?: string;
+  contentOverlay?: string;
+  square?: string;
+  wide?: string;
+}
+
+interface CardMediaProps extends __ReactToolbox.Props {
+  aspectRatio?: "wide" | "square";
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  color?: string;
+  contentOverlay?: boolean;
+  image?: __React.ReactNode | string;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: CardMediaTheme;
+}
+
+export class CardMedia extends __React.Component<CardMediaProps, {}> { }
+
+export interface CardTextTheme {
+  cardText?: string;
+}
+
+interface CardTextProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: CardTextTheme;
+}
+
+export class CardText extends __React.Component<CardTextProps, {}> { }
+
+export interface CardTitleTheme {
+  large?: string;
+  title?: string;
+  small?: string;
+  subtitle?: string;
+}
+
+interface CardTitleProps extends __ReactToolbox.Props {
+  avatar?: __React.ReactNode | string;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  subtitle?: __React.ReactNode | string;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: CardTitleTheme;
+  title?: __React.ReactNode | string;
+}
+
+export class CardTitle extends __React.Component<CardTitleProps, {}> { }
diff --git a/components/checkbox/index.d.ts b/components/checkbox/index.d.ts
new file mode 100644
index 000000000..4b695523f
--- /dev/null
+++ b/components/checkbox/index.d.ts
@@ -0,0 +1,26 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface CheckboxTheme {
+  check?: string;
+  checked?: string;
+  disabled?: string;
+  field?: string;
+  input?: string;
+  ripple?: string;
+}
+
+interface CheckboxProps extends __ReactToolbox.Props {
+  checked?: boolean;
+  disabled?: boolean;
+  label?: __React.ReactNode | string;
+  name?: string;
+  onChange?: __React.MouseEventHandler;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: CheckboxTheme;
+}
+
+export class Checkbox extends __React.Component<CheckboxProps, {}> { }
+
+export default Checkbox;
diff --git a/components/chip/index.d.ts b/components/chip/index.d.ts
new file mode 100644
index 000000000..e71d5de25
--- /dev/null
+++ b/components/chip/index.d.ts
@@ -0,0 +1,27 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface ChipTheme {
+  avatar?: string;
+  chip?: string;
+  deletable?: string;
+  delete?: string;
+  deleteIcon?: string;
+  deleteX?: string;
+}
+
+interface ChipProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  deleteable?: boolean;
+  onDeleteClick?: __React.MouseEventHandler;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ChipTheme;
+}
+
+export class Chip extends __React.Component<ChipProps, {}> { }
+
+export default Chip;
diff --git a/components/date_picker/index.d.ts b/components/date_picker/index.d.ts
new file mode 100644
index 000000000..903b27830
--- /dev/null
+++ b/components/date_picker/index.d.ts
@@ -0,0 +1,48 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface DatePickerTheme {
+  active?: string;
+  button?: string;
+  calendar?: string;
+  calendarWrapper?: string;
+  date?: string;
+  day?: string;
+  days?: string;
+  dialog?: string;
+  disabled?: string;
+  header?: string;
+  input?: string;
+  month?: string;
+  monthsDisplay?: string;
+  next?: string;
+  prev?: string;
+  title?: string;
+  week?: string;
+  year?: string;
+  years?: string;
+  yearsDisplay?: string;
+}
+
+interface DatePickerProps extends __ReactToolbox.Props {
+  autoOk?: boolean;
+  error?: string;
+  icon?: __React.ReactNode | string;
+  inputClassName?: string;
+  inputFormat?: Function;
+  label?: string;
+  maxDate?: Date;
+  minDate?: Date;
+  name?: string;
+  onChange?: __React.MouseEventHandler;
+  onEscKeyDown?: __React.KeyboardEventHandler;
+  onOverlayClick?: __React.MouseEventHandler;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: DatePickerTheme;
+  value?: Date | string;
+}
+
+export class DatePicker extends __React.Component<DatePickerProps, {}> { }
+
+export default DatePicker;
diff --git a/components/dialog/index.d.ts b/components/dialog/index.d.ts
new file mode 100644
index 000000000..a81e07391
--- /dev/null
+++ b/components/dialog/index.d.ts
@@ -0,0 +1,38 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface DialogTheme {
+  active?: string;
+  body?: string;
+  button?: string;
+  dialog?: string;
+  navigation?: string;
+  title?: string;
+}
+
+interface DialogActionProps {
+  label?: string;
+}
+
+interface DialogProps extends __ReactToolbox.Props {
+  actions?: DialogActionProps[];
+  active?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  onEscKeyDown?: __React.KeyboardEventHandler;
+  onOverlayClick?: __React.MouseEventHandler;
+  onOverlayMouseDown?: __React.MouseEventHandler;
+  onOverlayMouseMove?: __React.MouseEventHandler;
+  onOverlayMouseUp?: __React.MouseEventHandler;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: DialogTheme;
+  title?: string;
+  type?: string;
+}
+
+export class Dialog extends __React.Component<DialogProps, {}> { }
+
+export default Dialog;
diff --git a/components/drawer/index.d.ts b/components/drawer/index.d.ts
new file mode 100644
index 000000000..dade687bd
--- /dev/null
+++ b/components/drawer/index.d.ts
@@ -0,0 +1,27 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface DrawerTheme {
+  active?: string;
+  content?: string;
+  drawer?: string;
+  left?: string;
+  right?: string;
+}
+
+interface DrawerProps extends __ReactToolbox.Props {
+  active?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  onOverlayClick?: __React.MouseEventHandler;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: DrawerTheme;
+  type?: "left" | "right";
+}
+
+export class Drawer extends __React.Component<DrawerProps, {}> { }
+
+export default Drawer;
diff --git a/components/dropdown/index.d.ts b/components/dropdown/index.d.ts
new file mode 100644
index 000000000..25448ffd3
--- /dev/null
+++ b/components/dropdown/index.d.ts
@@ -0,0 +1,39 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface DropdownTheme {
+  active?: string;
+  disabled?: string;
+  dropdown?: string;
+  error?: string;
+  errored?: string;
+  field?: string;
+  label?: string;
+  selected?: string;
+  templateValue?: string;
+  up?: string;
+  value?: string;
+  values?: string;
+}
+
+interface DropdownProps extends __ReactToolbox.Props {
+  allowBlank?: boolean;
+  auto?: boolean;
+  disabled?: boolean;
+  error?: string;
+  label?: string;
+  name?: string;
+  onBlur?: __React.FocusEventHandler;
+  onChange?: __React.FormEventHandler;
+  onFocus?: __React.FocusEventHandler;
+  source: any[];
+  template?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: DropdownTheme;
+  value?: string | number;
+}
+
+export class Dropdown extends __React.Component<DropdownProps, {}> { }
+
+export default Dropdown;
diff --git a/components/font_icon/index.d.ts b/components/font_icon/index.d.ts
new file mode 100644
index 000000000..41fe3cf1e
--- /dev/null
+++ b/components/font_icon/index.d.ts
@@ -0,0 +1,13 @@
+import __ReactToolbox from "../index.d.ts";
+
+interface FontIconProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  value?: __React.ReactNode | string;
+}
+
+export class FontIcon extends __React.Component<FontIconProps, {}> { }
+
+export default FontIcon;
diff --git a/components/input/index.d.ts b/components/input/index.d.ts
new file mode 100644
index 000000000..4ae91fe97
--- /dev/null
+++ b/components/input/index.d.ts
@@ -0,0 +1,47 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface InputTheme {
+  bar?: string;
+  counter?: string;
+  disabled?: string;
+  error?: string;
+  errored?: string;
+  hidden?: string;
+  hint?: string;
+  icon?: string;
+  input?: string;
+  inputElement?: string;
+  required?: string;
+  withIcon?: string;
+}
+
+interface InputProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  disabled?: boolean;
+  error?: string;
+  floating?: boolean;
+  hint?: string;
+  icon?: __React.ReactNode | string;
+  label?: string;
+  maxLength?: number;
+  multiLine?: boolean;
+  name?: string;
+  onBlur?: __React.FocusEventHandler;
+  onChange?: __React.FormEventHandler;
+  onFocus?: __React.FocusEventHandler;
+  onKeyPress?: __React.MouseEventHandler;
+  required?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: InputTheme;
+  type?: string;
+  value?: any;
+}
+
+export class Input extends __React.Component<InputProps, {}> { }
+
+export default Input;
diff --git a/components/layout/index.d.ts b/components/layout/index.d.ts
new file mode 100644
index 000000000..3308c5861
--- /dev/null
+++ b/components/layout/index.d.ts
@@ -0,0 +1,95 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface LayoutTheme {
+  layout?: string;
+}
+
+interface LayoutProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: [NavDrawer | Panel | Sidebar];
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: LayoutTheme;
+}
+
+export class Layout extends __React.Component<LayoutProps, {}> { }
+
+export interface NavDrawerTheme {
+  active?: string;
+  drawerContent?: string;
+  lgPermangent?: string;
+  mdPermangent?: string;
+  navDrawer?: string;
+  pinned?: string;
+  scrim?: string;
+  scrollY?: string;
+  smPermanent?: string;
+  wide?: string;
+  xlPermanent?: string;
+  xxlPermangent?: string;
+  xxxlPermangent?: string;
+}
+
+interface NavDrawerProps extends __ReactToolbox.Props {
+  active?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  onOverlayClick?: __React.MouseEventHandler;
+  permanentAt?: "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
+  pinned?: boolean;
+  scrollY?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: NavDrawerTheme;
+  width?: "normal" | "wide";
+}
+
+export class NavDrawer extends __React.Component<NavDrawerProps, {}> { }
+
+export interface PanelTheme {
+  panel?: string;
+  scrollY?: string;
+}
+
+interface PanelProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  scrollY?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: PanelTheme;
+}
+
+export class Panel extends __React.Component<PanelProps, {}> { }
+
+export interface SidebarTheme {
+  pinned?: string;
+  scrollY?: string;
+  sidebar?: string;
+  sidebarContent?: string;
+}
+
+interface SidebarProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  pinned?: boolean;
+  scrollY?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: SidebarTheme;
+  width?: number; // 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 25 | 33 | 50 | 66 | 75 | 100;
+}
+
+export class Sidebar extends __React.Component<SidebarProps, {}> { }
diff --git a/components/link/index.d.ts b/components/link/index.d.ts
new file mode 100644
index 000000000..85db1ac14
--- /dev/null
+++ b/components/link/index.d.ts
@@ -0,0 +1,25 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface LinkTheme {
+  active?: string;
+  icon?: string;
+  link?: string;
+}
+
+interface LinkProps extends __ReactToolbox.Props {
+  active?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  count?: number;
+  href?: string;
+  icon?: __React.ReactNode | string;
+  label?: string;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: LinkTheme;
+}
+
+export class Link extends __React.Component<LinkProps, {}> { }
diff --git a/components/list/index.d.ts b/components/list/index.d.ts
new file mode 100644
index 000000000..356fa3be7
--- /dev/null
+++ b/components/list/index.d.ts
@@ -0,0 +1,112 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface ListTheme {
+  list?: string;
+}
+
+interface ListProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  ripple?: boolean;
+  selectable?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ListTheme;
+}
+
+export class List extends __React.Component<ListProps, {}> { }
+
+export interface ListCheckboxTheme {
+  checkbox?: string;
+  checkboxItem?: string;
+  disabled?: string;
+  item?: string;
+  itemContentRoot?: string;
+  itemText?: string;
+  large?: string;
+  primary?: string;
+}
+
+interface ListCheckboxProps extends __ReactToolbox.Props {
+  caption?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  legend?: string;
+  name?: string;
+  onBlur?: __React.FocusEventHandler;
+  onChange?: __React.FormEventHandler;
+  onFocus?: __React.FocusEventHandler;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ListCheckboxTheme;
+}
+
+export class ListCheckbox extends __React.Component<ListCheckboxProps, {}> { }
+
+export interface ListDividerTheme {
+  divider?: string;
+  inset?: string;
+}
+
+interface ListDividerProps extends __ReactToolbox.Props {
+  inset?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ListDividerTheme;
+}
+
+export class ListDivider extends __React.Component<ListDivider, {}> { }
+
+export interface ListItemTheme {
+  disabled?: string;
+  item?: string;
+  itemAction?: string;
+  large?: string;
+  left?: string;
+  listItem?: string;
+  primary?: string;
+  right?: string;
+  selectable?: string;
+}
+
+interface ListItemProps extends __ReactToolbox.Props {
+  avatar?: __React.ReactNode | string;
+  caption?: string;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  disabled?: boolean;
+  itemContent?: __React.ReactNode;
+  leftActions?: __React.ReactNode;
+  leftIcon?: __React.ReactNode | string;
+  rightIcon?: __React.ReactNode | string;
+  ripple?: boolean;
+  selectable?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ListItemTheme;
+  to?: string;
+}
+
+export class ListItem extends __React.Component<ListItemProps, {}> { }
+
+export interface ListSubHeaderTheme {
+  subheader?: string;
+}
+
+interface ListSubHeaderProps extends __ReactToolbox.Props {
+  caption?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ListSubHeaderTheme;
+}
+
+export class ListSubHeader extends __React.Component<ListSubHeaderProps, {}> { }
diff --git a/components/menu/index.d.ts b/components/menu/index.d.ts
new file mode 100644
index 000000000..7c1c3099c
--- /dev/null
+++ b/components/menu/index.d.ts
@@ -0,0 +1,115 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface MenuTheme {
+  active?: string;
+  bottomLeft?: string;
+  bottomRight?: string;
+  menu?: string;
+  menuInner?: string;
+  outline?: string;
+  rippled?: string;
+  static?: string;
+  topLeft?: string;
+  topRight?: string;
+}
+
+interface MenuProps extends __ReactToolbox.Props {
+  active?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  onHide?: Function;
+  onSelect?: Function;
+  onShow?: Function;
+  position?: "auto" | "static" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
+  ripple?: boolean;
+  selectable?: boolean;
+  selected?: any;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: MenuTheme;
+}
+
+export class Menu extends __React.Component<MenuProps, {}> { }
+
+export interface IconMenuTheme {
+  icon?: string;
+  iconMenu?: string;
+}
+
+interface IconMenuProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  icon?: __React.ReactNode | string;
+  iconRipple?: boolean;
+  menuRipple?: boolean;
+  onSelect?: Function;
+  onShow?: Function;
+  position?: "auto" | "static" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
+  selectable?: boolean;
+  selected?: any;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: IconMenuTheme;
+}
+
+export class IconMenu extends __React.Component<IconMenuProps, {}> { }
+
+export interface MenuDividerTheme {
+  menuDivider?: string;
+}
+
+interface MenuDividerProps extends __ReactToolbox.Props {
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: MenuDividerTheme;
+}
+
+export class MenuDivider extends __React.Component<MenuDividerProps, {}> { }
+
+export interface ListDividerTheme {
+  divider?: string;
+  inset?: string;
+}
+
+interface ListDividerProps extends __ReactToolbox.Props {
+  inset?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ListDividerTheme;
+}
+
+export class ListDivider extends __React.Component<ListDivider, {}> { }
+
+export interface MenuItemTheme {
+  caption?: string;
+  disabled?: string;
+  icon?: string;
+  menuItem?: string;
+  selected?: string;
+  shortcut?: string;
+}
+
+interface MenuItemProps extends __ReactToolbox.Props {
+  caption?: string;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  disabled?: boolean;
+  icon?: __React.ReactNode | string;
+  selected?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: MenuItemTheme;
+}
+
+export class MenuItem extends __React.Component<MenuItemProps, {}> { }
diff --git a/components/navigation/index.d.ts b/components/navigation/index.d.ts
new file mode 100644
index 000000000..41679a608
--- /dev/null
+++ b/components/navigation/index.d.ts
@@ -0,0 +1,24 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface NavigationTheme {
+  button?: string;
+  horizontal?: string;
+  link?: string;
+  vertical?: string;
+}
+
+interface NavigationProps extends __ReactToolbox.Props {
+  actions?: any[];
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  routes?: any[];
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: NavigationTheme;
+  type?: "vertical" | "horizontal";
+}
+
+export class Navigation extends __React.Component<NavigationProps, {}> { }
diff --git a/components/progress_bar/index.d.ts b/components/progress_bar/index.d.ts
new file mode 100644
index 000000000..a98cf9388
--- /dev/null
+++ b/components/progress_bar/index.d.ts
@@ -0,0 +1,30 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface ProgressBarTheme {
+  buffer?: string;
+  circle?: string;
+  circular?: string;
+  indeterminate?: string;
+  linear?: string;
+  multicolor?: string;
+  path?: string;
+  value?: string;
+}
+
+interface ProgressBarProps extends __ReactToolbox.Props {
+  buffer?: number;
+  max?: number;
+  min?: number;
+  mode?: "determinate" | "indeterminate";
+  multicolor?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ProgressBarTheme;
+  type?: "linear" | "circular";
+  value?: number;
+}
+
+export class ProgressBar extends __React.Component<ProgressBarProps, {}> { }
+
+export default ProgressBar;
diff --git a/components/radio/index.d.ts b/components/radio/index.d.ts
new file mode 100644
index 000000000..cf6e28d75
--- /dev/null
+++ b/components/radio/index.d.ts
@@ -0,0 +1,41 @@
+import __ReactToolbox from "../index.d.ts";
+
+interface RadioGroupProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  disabled?: boolean;
+  name?: string;
+  onChange?: Function;
+  value?: number;
+}
+
+export class RadioGroup extends __React.Component<RadioGroupProps, {}> { }
+
+export interface RadioButtonTheme {
+  radio?: string;
+  radioChecked?: string;
+  ripple?: string;
+  disabled?: string;
+  field?: string;
+  input?: string;
+  text?: string;
+}
+
+interface RadioButtonProps extends __ReactToolbox.Props {
+  checked?: boolean;
+  disabled?: boolean;
+  label?: __React.ReactNode | string;
+  name?: string;
+  onBlur?: __React.FocusEventHandler;
+  onChange?: __React.FormEventHandler;
+  onFocus?: __React.FocusEventHandler;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: RadioButtonTheme;
+  value?: any;
+}
+
+export class RadioButton extends __React.Component<RadioButtonProps, {}> { }
diff --git a/components/ripple/index.d.ts b/components/ripple/index.d.ts
new file mode 100644
index 000000000..1735828cc
--- /dev/null
+++ b/components/ripple/index.d.ts
@@ -0,0 +1,26 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface RippleTheme {
+  ripple?: string;
+  rippleActive?: string;
+  rippleRestarting?: string;
+  riplleWrapper?: string;
+}
+
+interface RippleProps {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  disabled?: boolean;
+  onRippleEnded?: Function;
+  spread?: number;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: RippleTheme;
+}
+
+export class Ripple extends __React.Component<RippleProps, {}> { }
+
+export default Ripple;
diff --git a/components/slider/index.d.ts b/components/slider/index.d.ts
new file mode 100644
index 000000000..55896dbd2
--- /dev/null
+++ b/components/slider/index.d.ts
@@ -0,0 +1,36 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface SliderTheme {
+  container?: string;
+  editable?: string;
+  innerknob?: string;
+  innerprogress?: string;
+  input?: string;
+  knob?: string;
+  pinned?: string;
+  pressed?: string;
+  progress?: string;
+  ring?: string;
+  slider?: string;
+  snap?: string;
+  snaps?: string;
+}
+
+interface SliderProps extends __ReactToolbox.Props {
+  editable?: boolean;
+  max?: number;
+  min?: number;
+  onChange?: Function;
+  pinned?: boolean;
+  snaps?: boolean;
+  step?: number;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: SliderTheme;
+  value?: number;
+}
+
+export class Slider extends __React.Component<SliderProps, {}> { }
+
+export default Slider;
diff --git a/components/snackbar/index.d.ts b/components/snackbar/index.d.ts
new file mode 100644
index 000000000..5d7429eca
--- /dev/null
+++ b/components/snackbar/index.d.ts
@@ -0,0 +1,30 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface SnackbarTheme {
+  accept?: string;
+  active?: string;
+  button?: string;
+  cancel?: string;
+  icon?: string;
+  label?: string;
+  snackbar?: string;
+  warning?: string;
+}
+
+interface SnackbarProps extends __ReactToolbox.Props {
+  action?: string;
+  active?: boolean;
+  icon?: __React.ReactNode | string;
+  label?: string;
+  onTimeout?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: SnackbarTheme;
+  timeout?: number;
+  type?: "accept" | "cancel" | "warning";
+}
+
+export class Snackbar extends __React.Component<SnackbarProps, {}> { }
+
+export default Snackbar;
diff --git a/components/switch/index.d.ts b/components/switch/index.d.ts
new file mode 100644
index 000000000..b09479e63
--- /dev/null
+++ b/components/switch/index.d.ts
@@ -0,0 +1,30 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface SwitchTheme {
+  disabled?: string;
+  field?: string;
+  input?: string;
+  off?: string;
+  on?: string;
+  ripple?: string;
+  text?: string;
+  thumb?: string;
+}
+
+interface SwitchProps extends __ReactToolbox.Props {
+  checked?: boolean;
+  disabled?: boolean;
+  label?: string;
+  name?: string;
+  onBlur?: __React.FocusEventHandler;
+  onChange?: __React.FormEventHandler;
+  onFocus?: __React.FocusEventHandler;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: SwitchTheme;
+}
+
+export class Switch extends __React.Component<SwitchProps, {}> { }
+
+export default Switch;
diff --git a/components/table/index.d.ts b/components/table/index.d.ts
new file mode 100644
index 000000000..86d3928fa
--- /dev/null
+++ b/components/table/index.d.ts
@@ -0,0 +1,28 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface TableTheme {
+  editable?: string;
+  row?: string;
+  selectable?: string;
+  selected?: string;
+  table?: string;
+}
+
+interface TableProps extends __ReactToolbox.Props {
+  heading?: boolean;
+  model?: any;
+  onChange?: Function;
+  onSelect?: __React.FormEventHandler;
+  selectable?: boolean;
+  multiSelectable?: boolean;
+  selected?: any[];
+  source?: any[];
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: TableTheme;
+}
+
+export class Table extends __React.Component<TableProps, {}> { }
+
+export default Table;
diff --git a/components/tabs/index.d.ts b/components/tabs/index.d.ts
new file mode 100644
index 000000000..7caed13c2
--- /dev/null
+++ b/components/tabs/index.d.ts
@@ -0,0 +1,47 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface TabsTheme {
+  active?: string;
+  navigation?: string;
+  pointer?: string;
+  tabs?: string;
+  tab?: string;
+}
+
+interface TabsProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  disableAnimatedBottomBorder?: boolean;
+  index?: number;
+  onChange?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: TabsTheme;
+}
+
+export class Tabs extends __React.Component<TabsProps, {}> { }
+
+export interface TabTheme {
+  active?: string;
+  disabled?: string;
+  hidden?: string;
+  label?: string;
+}
+
+interface TabProps extends __ReactToolbox.Props {
+  active?: boolean;
+  activeClassName?: string;
+  disabled?: boolean;
+  hidden?: boolean;
+  label?: string;
+  onActive?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: TabTheme;
+}
+
+export class Tab extends __React.Component<TabProps, {}> { }
diff --git a/components/time_picker/index.d.ts b/components/time_picker/index.d.ts
new file mode 100644
index 000000000..6c5a7c3fc
--- /dev/null
+++ b/components/time_picker/index.d.ts
@@ -0,0 +1,44 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface TimePickerTheme {
+  active?: string;
+  am?: string;
+  amFormat?: string;
+  ampm?: string;
+  button?: string;
+  clock?: string;
+  clockWrapper?: string;
+  dialog?: string;
+  face?: string;
+  hand?: string;
+  header?: string;
+  hours?: string;
+  hoursDisplay?: string;
+  input?: string;
+  knob?: string;
+  minutes?: string;
+  minutesDisplay?: string;
+  number?: string;
+  placeholder?: string;
+  pm?: string;
+  pmFormat?: string;
+  separator?: string;
+  small?: string;
+}
+
+interface TimePickerProps {
+  error?: string;
+  inputClassName?: string;
+  format?: "24hr" | "ampm";
+  label?: string;
+  onChange?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: TimePickerTheme;
+  value?: Date;
+}
+
+export class TimePicker extends __React.Component<TimePickerProps, {}> { }
+
+export default TimePicker;
diff --git a/components/tooltip/index.d.ts b/components/tooltip/index.d.ts
new file mode 100644
index 000000000..76f9caec3
--- /dev/null
+++ b/components/tooltip/index.d.ts
@@ -0,0 +1,31 @@
+import { Props } from "../index.d.ts";
+
+export interface TooltipTheme {
+  tooltip?: string;
+  tooltipActive?: string;
+  tooltipWrapper?: string;
+}
+
+interface TooltipProps {
+  onMouseEnter?: __React.MouseEventHandler;
+  onMouseLeave?: __React.MouseEventHandler;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: TooltipTheme;
+  tooltip?: string;
+  tooltipDelay?: number;
+  tooltipHideOnClick?: boolean;
+}
+
+declare class TooltipComponent<P, S> extends __React.Component<P, S> {
+  props: P & TooltipProps;
+}
+
+interface TooltippedComponentClass<P> extends TooltipProps {
+  new (props?: P, context?: any): TooltipComponent<P, any>;
+}
+
+export function Tooltip<P>(componentClass: __React.ComponentClass<P>): TooltippedComponentClass<P>;
+
+export default Tooltip;
diff --git a/index.d.ts b/index.d.ts
index c901356e7..b731e9043 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -1,1720 +1,115 @@
 // Type definitions for react-toolbox
 // Project: https://github.com/react-toolbox/react-toolbox
 // Definitions by: Per Bergqwist <https://github.com/normano64>
-// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 
-declare module "react-toolbox" {
-  export import AppBar = __ReactToolbox.AppBar;
-  export import Autocomplete = __ReactToolbox.Autocomplete;
-  export import Avatar = __ReactToolbox.Avatar;
-  export import Button = __ReactToolbox.Button.Button;
-  export import IconButton = __ReactToolbox.Button.IconButton;
-  export import Card = __ReactToolbox.Card.Card;
-  export import CardTitle = __ReactToolbox.Card.CardTitle;
-  export import CardMedia = __ReactToolbox.Card.CardMedia;
-  export import CardText = __ReactToolbox.Card.CardText;
-  export import CardActions = __ReactToolbox.Card.CardActions;
-  export import Checkbox = __ReactToolbox.Checkbox;
-  export import Chip = __ReactToolbox.Chip;
-  export import DatePicker = __ReactToolbox.DatePicker;
-  export import Dialog = __ReactToolbox.Dialog;
-  export import Drawer = __ReactToolbox.Drawer;
-  export import Dropdown = __ReactToolbox.Dropdown;
-  export import FontIcon = __ReactToolbox.FontIcon;
-  export import Input = __ReactToolbox.Input;
-  export import Layout = __ReactToolbox.Layout.Layout;
-  export import Panel = __ReactToolbox.Layout.Panel;
-  export import NavDrawer = __ReactToolbox.Layout.NavDrawer;
-  export import Sidebar = __ReactToolbox.Layout.Sidebar;
-  export import Link = __ReactToolbox.Link;
-  export import List = __ReactToolbox.List.List;
-  export import ListCheckbox = __ReactToolbox.List.ListCheckbox;
-  export import ListItem = __ReactToolbox.List.ListItem;
-  export import ListDivider = __ReactToolbox.List.ListDivider;
-  export import ListSubHeader = __ReactToolbox.List.ListSubHeader;
-  export import Menu = __ReactToolbox.Menu.Menu;
-  export import MenuDivider = __ReactToolbox.Menu.MenuDivider;
-  export import MenuItem = __ReactToolbox.Menu.MenuItem;
-  export import IconMenu = __ReactToolbox.Menu.IconMenu;
-  export import Navigation = __ReactToolbox.Navigation;
-  export import ProgressBar = __ReactToolbox.ProgressBar;
-  export import RadioGroup = __ReactToolbox.Radio.RadioGroup;
-  export import RadioButton = __ReactToolbox.Radio.RadioButton;
-  export import Ripple = __ReactToolbox.Ripple;
-  export import Slider = __ReactToolbox.Slider;
-  export import Snackbar = __ReactToolbox.Snackbar;
-  export import Switch = __ReactToolbox.Switch;
-  export import Tabs = __ReactToolbox.Tabs.Tabs;
-  export import Tab = __ReactToolbox.Tabs.Tab;
-  export import TimePicker = __ReactToolbox.TimePicker;
-  export import Tooltip = __ReactToolbox.Tooltip;
-
-  export import AppBarTheme = __ReactToolbox.AppBarTheme;
-  export import AutocompleteTheme = __ReactToolbox.AutocompleteTheme;
-  export import AvatarTheme = __ReactToolbox.AvatarTheme;
-  export import ButtonTheme = __ReactToolbox.Button.ButtonTheme;
-  export import IconButtonTheme = __ReactToolbox.Button.IconButtonTheme;
-  export import CardTheme = __ReactToolbox.Card.CardTheme;
-  export import CardTitleTheme = __ReactToolbox.Card.CardTitleTheme;
-  export import CardMediaTheme = __ReactToolbox.Card.CardMediaTheme;
-  export import CardTextTheme = __ReactToolbox.Card.CardTextTheme;
-  export import CardActionsTheme = __ReactToolbox.Card.CardActionsTheme;
-  export import CheckboxTheme = __ReactToolbox.CheckboxTheme;
-  export import ChipTheme = __ReactToolbox.ChipTheme;
-  export import DatePickerTheme = __ReactToolbox.DatePickerTheme;
-  export import DialogTheme = __ReactToolbox.DialogTheme;
-  export import DrawerTheme = __ReactToolbox.DrawerTheme;
-  export import DropdownTheme = __ReactToolbox.DropdownTheme;
-  export import InputTheme = __ReactToolbox.InputTheme;
-  export import LayoutTheme = __ReactToolbox.Layout.LayoutTheme;
-  export import PanelTheme = __ReactToolbox.Layout.PanelTheme;
-  export import NavDrawerTheme = __ReactToolbox.Layout.NavDrawerTheme;
-  export import SidebarTheme = __ReactToolbox.Layout.SidebarTheme;
-  export import LinkTheme = __ReactToolbox.LinkTheme;
-  export import ListTheme = __ReactToolbox.List.ListTheme;
-  export import ListCheckboxTheme = __ReactToolbox.List.ListCheckboxTheme;
-  export import ListItemTheme = __ReactToolbox.List.ListItemTheme;
-  export import ListDividerTheme = __ReactToolbox.List.ListDividerTheme;
-  export import ListSubHeaderTheme = __ReactToolbox.List.ListSubHeaderTheme;
-  export import MenuTheme = __ReactToolbox.Menu.MenuTheme;
-  export import MenuDividerTheme = __ReactToolbox.Menu.MenuDividerTheme;
-  export import MenuItemTheme = __ReactToolbox.Menu.MenuItemTheme;
-  export import IconMenuTheme = __ReactToolbox.Menu.IconMenuTheme;
-  export import NavigationTheme = __ReactToolbox.NavigationTheme;
-  export import ProgressBarTheme = __ReactToolbox.ProgressBarTheme;
-  export import RadioButtonTheme = __ReactToolbox.Radio.RadioButtonTheme;
-  export import RippleTheme = __ReactToolbox.RippleTheme;
-  export import SliderTheme = __ReactToolbox.SliderTheme;
-  export import SnackbarTheme = __ReactToolbox.SnackbarTheme;
-  export import SwitchTheme = __ReactToolbox.SwitchTheme;
-  export import TabsTheme = __ReactToolbox.Tabs.TabsTheme;
-  export import TabTheme = __ReactToolbox.Tabs.TabTheme;
-  export import TimePickerTheme = __ReactToolbox.TimePickerTheme;
-  export import TooltipTheme = __ReactToolbox.TooltipTheme;
-}
-
-declare namespace __ReactToolbox {
-  import React = __React;
-
-  interface Props {
-    /**
-     * Set a class for the root component.
-     */
-    className?: string;
-    /**
-     * Key used to uniquely identify the element within an Array.
-     */
-    key?: string | number;
-    /**
-     * Callback called when the component is clicked.
-     */
-    onClick?: React.MouseEventHandler;
-    /**
-     * Set inline style for the root component.
-     */
-    style?: React.CSSProperties;
-  }
-
-  export interface AppBarTheme {
-    /**
-     * Used for the component root element.
-     */
-    appBar?: string;
-    /**
-     * Added to the root element when the app bar is fixed.
-     */
-    fixed?: string;
-    /**
-     * Added to the root element when the app bar is flat.
-     */
-    flat?: string;
-  }
-  interface AppBarProps extends Props {
-    /**
-     * Children to pass through the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * Determine if the bar should have position fixed or relative.
-     * @default false
-     */
-    fixed?: boolean;
-    /**
-     * If true, the AppBar shows a shadow.
-     * @default false
-     */
-    flat?: boolean;
-    /**
-     * Classnames object defining the component style.
-     */
-    theme?: AppBarTheme;
-  }
-  export class AppBar extends React.Component<AppBarProps, {}> {
-  }
-
-  export interface AutocompleteTheme {
-    /**
-     * Used for a suggestion when it's active.
-     */
-    active?: string;
-    /**
-     * Used for the root element.
-     */
-    autocomplete?: string;
-    /**
-     * Used when the input is focused.
-     */
-    focus?: string;
-    /**
-     * Used to style the Input component.
-     */
-    input?: string;
-    /**
-     * Used for the label.
-     */
-    label?: string;
-    /**
-     * Used to style each suggestion.
-     */
-    suggestion?: string;
-    /**
-     * Used to style the suggestions container.
-     */
-    suggestions?: string;
-    /**
-     * Used for the suggestions when it's opening to the top.
-     */
-    up?: string;
-    /**
-     * Classname used for a single value.
-     */
-    value?: string;
-    /**
-     * Classname used for the values container.
-     */
-    values?: string;
-  }
-  interface AutocompleteProps extends Props {
-    /**
-     * Determines the opening direction. It can be auto, up or down.
-     * @default auto
-     */
-    direction?: "auto" | "up" | "down";
-    /**
-     * If true, component will be disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Sets the error string for the internal input element.
-     * @default false
-     */
-    error?: string;
-    /**
-     * The text string to use for the floating label element.
-     */
-    label?: string;
-    /**
-     * If true, component can hold multiple values.
-     */
-    multiple?: boolean;
-    /**
-     * Callback function that is fired when the components's value changes.
-     * @default auto
-     */
-    onChange?: React.FormEventHandler;
-    /**
-     * Determines if the selected list is shown above or below input. It can be above or below.
-     * @default above
-     */
-    selectedPosition?: "above" | "below";
-    /**
-     * If true, the list of suggestions will not be filtered when a value is selected.
-     * @default false
-     */
-    showSuggestionsWHenValueIsSet?: boolean;
-    /**
-     * Object of key/values or array representing all items suggested.
-     */
-    source?: any;
-    /**
-     * Determines how suggestions are supplied.
-     * @default start
-     */
-    suggestionMatch?: "start" | "anywhere" | "word";
-    /**
-     * Classnames object defining the component style.
-     */
-    theme?: AutocompleteTheme;
-    /**
-     * Value or array of values currently selected component.
-     */
-    value?: any;
-  }
-  export class Autocomplete extends React.Component<AutocompleteProps, {}> {
-  }
-
-  export interface AvatarTheme {
-    /**
-     * Used for the root class of the element.
-     */
-    avatar?: string;
-    /**
-     * Added to the root element when the component has image.
-     */
-    image?: string;
-    /**
-     * Used for the root element if the component shows the letter.
-     */
-    letter?: string;
-  }
-  interface AvatarProps extends Props {
-    /**
-     * Children to pass through the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * Set to true if your image is not squared so it will be used as a cover for the element.
-     */
-    cover?: boolean;
-    /**
-     * A key to identify an Icon from Material Design Icons or a custom Icon Element.
-     */
-    icon?: React.ReactNode | string;
-    /**
-     * An image source or an image element.
-     */
-    image?: React.ReactNode | string;
-    /**
-     * Classnames object defining the component style.
-     */
-    theme?: AvatarTheme;
-    /**
-     * A title for the image. If no image is provided, the first letter will be displayed as the avatar.
-     */
-    title?: string;
-  }
-  export class Avatar extends React.Component<AvatarProps, {}> {
-  }
-
-  namespace Button {
-    export interface ButtonTheme {
-      /**
-       * Used for the root in case button is accent.
-       */
-      accent?: string;
-      /**
-       * Used for the root element in any button.
-       */
-      button?: string;
-      /**
-       * Used when the button is flat for the root element.
-       */
-      flat?: string;
-      /**
-       * Used when the button is floating for the root element.
-       */
-      floating?: string;
-      /**
-       * For the icon inside a button.
-       */
-      icon?: string;
-      /**
-       * Used when colors are inverted.
-       */
-      inverse?: string;
-      /**
-       * Used for mini floating buttons.
-       */
-      mini?: string;
-      /**
-       * Used for neutral colored buttons.
-       */
-      neutral?: string;
-      /**
-       * Used for primary buttons when button is primary.
-       */
-      primary?: string;
-      /**
-       * Used when the button is raised for root element.
-       */
-      raised?: string;
-      /**
-       * Used for the ripple element.
-       */
-      rippleWrapper?: string;
-      /**
-       * Used for toggle buttons in the root element.
-       */
-      toggle?: string;
-    }
-    interface ButtonProps extends Props {
-      /**
-       * Indicates if the button should have accent color.
-       * @default false
-       */
-      accent?: boolean;
-      /**
-       * Children to pass through the component.
-       */
-      children?: React.ReactNode;
-      /**
-       * If true, component will be disabled.
-       * @default false
-       */
-      disabled?: boolean;
-      /**
-       * If true, the button will have a flat look.
-       * @default false
-       */
-      flat?: boolean;
-      /**
-       * If true, the button will have a floating look.
-       * @default false
-       */
-      floating?: boolean;
-      /**
-       * Creates a link for the button.
-       */
-      href?: string;
-      /**
-       * Value of the icon (See Font Icon Component).
-       */
-      icon?: React.ReactNode | string;
-      /**
-       * If true, the neutral colors are inverted. Useful to put a button over a dark background.
-       */
-      inverse?: boolean;
-      /**
-       * The text string to use for the name of the button.
-       */
-      label?: string;
-      /**
-       * To be used with floating button. If true, the button will be smaller.
-       * @default false
-       */
-      mini?: boolean;
-      /**
-       * Set it to false if you don't want the neutral styles to be included.
-       * @default true
-       */
-      neutral?: boolean;
-      /**
-       * Fires after the mouse leaves the Component.
-       */
-      onMouseLeave?: React.MouseEventHandler;
-      /**
-       * Fires after the mouse is released from the Component.
-       */
-      OnMouseUp?: React.MouseEventHandler;
-      /**
-       * Indicates if the button should have primary color.
-       * @default false
-       */
-      primary?: boolean;
-      /**
-       * If true, the button will have a raised look.
-       * @default false
-       */
-      raised?: boolean;
-      /**
-       * If true, component will have a ripple effect on click.
-       * @default true
-       */
-      ripple?: boolean;
-      /**
-       * Classnames object defining the component style.
-       */
-      theme?: ButtonTheme;
-    }
-    export class Button extends React.Component<ButtonProps, {}> {
-    }
-
-    export interface IconButtonTheme {
-      /**
-       * Used for the root in case button is accent.
-       */
-      accent?: string;
-      /**
-       * Used for the root element in any button.
-       */
-      button?: string;
-      /**
-       * For the icon inside a button.
-       */
-      icon?: string;
-      /**
-       * Used when colors are inverted.
-       */
-      inverse?: string;
-      /**
-       * Used for neutral colored buttons.
-       */
-      neutral?: string;
-      /**
-       * Used for primary buttons when button is primary.
-       */
-      primary?: string;
-      /**
-       * Used for the ripple element.
-       */
-      rippleWrapper?: string;
-      /**
-       * Used for toggle buttons in the root element.
-       */
-      toggle?: string;
-    }
-    interface IconButtonProps extends Props {
-      /**
-       * Indicates if the button should have accent color.
-       * @default false
-       */
-      accent?: boolean;
-      /**
-       * Children to pass through the component.
-       */
-      children?: React.ReactNode;
-      /**
-       * If true, component will be disabled.
-       * @default false
-       */
-      disabled?: boolean;
-      /**
-       * Creates a link for the button.
-       */
-      href?: string;
-      /**
-       * Value of the icon (See Font Icon Component).
-       */
-      icon?: React.ReactNode | string;
-      /**
-       * If true, the neutral colors are inverted. Useful to put a button over a dark background.
-       */
-      inverse?: boolean;
-      /**
-       * Set it to false if you don't want the neutral styles to be included.
-       * @default true
-       */
-      neutral?: boolean;
-      /**
-       * Fires after the mouse leaves the Component.
-       */
-      onMouseLeave?: React.MouseEventHandler;
-      /**
-       * Fires after the mouse is released from the Component.
-       */
-      OnMouseUp?: React.MouseEventHandler;
-      /**
-       * Indicates if the button should have primary color.
-       * @default false
-       */
-      primary?: boolean;
-      /**
-       * If true, component will have a ripple effect on click.
-       * @default true
-       */
-      ripple?: boolean;
-      /**
-       * Classnames object defining the component style.
-       */
-      theme?: IconButtonTheme;
-    }
-    export class IconButton extends React.Component<IconButtonProps, {}> {
-    }
-  }
-
-  namespace Card {
-    export interface CardTheme {
-      card?: string;
-      raised?: string;
-    }
-    interface CardProps extends Props {
-      /**
-       * Children to pass through the component.
-       */
-      children?: React.ReactNode;
-      raised?: boolean;
-      /**
-       * Classnames object defining the component style.
-       */
-      theme?: CardTheme;
-    }
-    export class Card extends React.Component<CardProps, {}> {
-    }
-
-    export interface CardActionsTheme {
-      cardActions?: string;
-    }
-    interface CardActionsProps extends Props {
-      /**
-       * Children to pass through the component.
-       */
-      children?: React.ReactNode;
-      /**
-       * Classnames object defining the component style.
-       */
-      theme?: CardActionsTheme;
-    }
-    export class CardActions extends React.Component<CardActionsProps, {}> {
-    }
-
-    export interface CardMediaTheme {
-      cardMedia?: string;
-      content?: string;
-      contentOverlay?: string;
-      square?: string;
-      wide?: string;
-    }
-    interface CardMediaProps extends Props {
-      aspectRatio?: "wide" | "square";
-      /**
-       * Children to pass through the component.
-       */
-      children?: React.ReactNode;
-      color?: string;
-      contentOverlay?: boolean;
-      image?: React.ReactNode | string;
-      /**
-       * Classnames object defining the component style.
-       */
-      theme?: CardMediaTheme;
-    }
-    export class CardMedia extends React.Component<CardMediaProps, {}> {
-    }
-
-    export interface CardTextTheme {
-      cardText?: string;
-    }
-    interface CardTextProps extends Props {
-      /**
-       * Children to pass through the component.
-       */
-      children?: React.ReactNode;
-      /**
-       * Classnames object defining the component style.
-       */
-      theme?: CardTextTheme;
-    }
-    export class CardText extends React.Component<CardTextProps, {}> {
-    }
-
-    export interface CardTitleTheme {
-      large?: string;
-      title?: string;
-      small?: string;
-      subtitle?: string;
-    }
-    interface CardTitleProps extends Props {
-      avatar?: React.ReactNode | string;
-      /**
-       * Children to pass through the component.
-       */
-      children?: React.ReactNode;
-      subtitle?: React.ReactNode | string;
-      /**
-       * Classnames object defining the component style.
-       */
-      theme?: CardTitleTheme;
-      title?: React.ReactNode | string;
-    }
-    export class CardTitle extends React.Component<CardTitleProps, {}> {
-    }
-  }
-
-  export interface CheckboxTheme {
-    check?: string;
-    checked?: string;
-    disabled?: string;
-    field?: string;
-    input?: string;
-    ripple?: string;
-  }
-  interface CheckboxProps extends Props {
-    checked?: boolean;
-    disabled?: boolean;
-    label?: React.ReactNode | string;
-    name?: string;
-    onChange?: React.MouseEventHandler;
-    /**
-     * Classnames object defining the component style.
-     */
-    theme?: CheckboxTheme;
-  }
-  export class Checkbox extends React.Component<CheckboxProps, {}> {
-  }
-
-  export interface ChipTheme {
-    avatar?: string;
-    chip?: string;
-    deletable?: string;
-    delete?: string;
-    deleteIcon?: string;
-    deleteX?: string;
-  }
-  interface ChipProps extends Props {
-    /**
-     * Children to pass through the component.
-     */
-    children?: React.ReactNode;
-    deleteable?: boolean;
-    onDeleteClick?: React.MouseEventHandler;
-    /**
-     * Classnames object defining the component style.
-     */
-    theme?: ChipTheme;
-  }
-  export class Chip extends React.Component<ChipProps, {}> {
-  }
-
-  export interface DatePickerTheme {
-    active?: string;
-    button?: string;
-    calendar?: string;
-    calendarWrapper?: string;
-    date?: string;
-    day?: string;
-    days?: string;
-    dialog?: string;
-    disabled?: string;
-    header?: string;
-    input?: string;
-    month?: string;
-    monthsDisplay?: string;
-    next?: string;
-    prev?: string;
-    title?: string;
-    week?: string;
-    year?: string;
-    years?: string;
-    yearsDisplay?: string;
-  }
-  interface DatePickerProps extends Props {
-    autoOk?: boolean;
-    error?: string;
-    icon?: React.ReactNode | string;
-    inputClassName?: string;
-    inputFormat?: Function;
-    label?: string;
-    maxDate?: Date;
-    minDate?: Date;
-    name?: string;
-    onChange?: React.MouseEventHandler;
-    onEscKeyDown?: React.KeyboardEventHandler;
-    onOverlayClick?: React.MouseEventHandler;
-    /**
-     * Classnames object defining the component style.
-     */
-    theme?: DatePickerTheme;
-    value?: Date | string;
-  }
-  export class DatePicker extends React.Component<DatePickerProps, {}> {
-  }
-
-  export interface DialogTheme {
-    active?: string;
-    body?: string;
-    button?: string;
-    dialog?: string;
-    navigation?: string;
-    title?: string;
-  }
-  interface DialogActionProps {
-    label?: string;
-  }
-  interface DialogProps extends Props {
-    actions?: DialogActionProps[];
-    active?: boolean;
-    /**
-     * Children to pass through the component.
-     */
-    children?: React.ReactNode;
-    onEscKeyDown?: React.KeyboardEventHandler;
-    onOverlayClick?: React.MouseEventHandler;
-    onOverlayMouseDown?: React.MouseEventHandler;
-    onOverlayMouseMove?: React.MouseEventHandler;
-    onOverlayMouseUp?: React.MouseEventHandler;
-    /**
-     * Classnames object defining the component style.
-     */
-    theme?: DialogTheme;
-    title?: string;
-    type?: string;
-  }
-  export class Dialog extends React.Component<DialogProps, {}> {
-  }
-
-  export interface DrawerTheme {
-    active?: string;
-    content?: string;
-    drawer?: string;
-    left?: string;
-    right?: string;
-  }
-  interface DrawerProps extends Props {
-    active?: boolean;
-    /**
-     * Children to pass through the component.
-     */
-    children?: React.ReactNode;
-    onOverlayClick?: React.MouseEventHandler;
-    /**
-     * Classnames object defining the component style.
-     */
-    theme?: DrawerTheme;
-    type?: "left" | "right";
-  }
-  export class Drawer extends React.Component<DrawerProps, {}> {
-  }
-
-  export interface DropdownTheme {
-    active?: string;
-    disabled?: string;
-    dropdown?: string;
-    error?: string;
-    errored?: string;
-    field?: string;
-    label?: string;
-    selected?: string;
-    templateValue?: string;
-    up?: string;
-    value?: string;
-    values?: string;
-  }
-  interface DropdownProps extends Props {
-    allowBlank?: boolean;
-    auto?: boolean;
-    disabled?: boolean;
-    error?: string;
-    label?: string;
-    name?: string;
-    onBlur?: React.FocusEventHandler;
-    onChange?: React.FormEventHandler;
-    onFocus?: React.FocusEventHandler;
-    source: any[];
-    template?: Function;
-    /**
-     * Classnames object defining the component style.
-     */
-    theme?: DropdownTheme;
-    value?: string | number;
-  }
-  export class Dropdown extends React.Component<DropdownProps, {}> {
-  }
-
-  interface FontIconProps extends Props {
-    /**
-     * Children to pass through the component.
-     */
-    children?: React.ReactNode;
-    value?: React.ReactNode | string;
-  }
-  export class FontIcon extends React.Component<FontIconProps, {}> {
-  }
-
-  export interface InputTheme {
-    bar?: string;
-    counter?: string;
-    disabled?: string;
-    error?: string;
-    errored?: string;
-    hidden?: string;
-    hint?: string;
-    icon?: string;
-    input?: string;
-    inputElement?: string;
-    required?: string;
-    withIcon?: string;
-  }
-  interface InputProps extends Props {
-    /**
-     * Children to pass through the component.
-     */
-    children?: React.ReactNode;
-    disabled?: boolean;
-    error?: string;
-    floating?: boolean;
-    hint?: string;
-    icon?: React.ReactNode | string;
-    label?: string;
-    maxLength?: number;
-    multiLine?: boolean;
-    name?: string;
-    onBlur?: React.FocusEventHandler;
-    onChange?: React.FormEventHandler;
-    onFocus?: React.FocusEventHandler;
-    onKeyPress?: React.MouseEventHandler;
-    required?: boolean;
-    /**
-     * Classnames object defining the component style.
-     */
-    theme?: InputTheme;
-    type?: string;
-    value?: any;
-  }
-  export class Input extends React.Component<InputProps, {}> {
-  }
-
-  namespace Layout {
-    export interface LayoutTheme {
-      layout?: string;
-    }
-    interface LayoutProps extends Props {
-      /**
-       * Children to pass through the component.
-       */
-      children?: [NavDrawer | Panel | Sidebar];
-      /**
-       * Classnames object defining the component style.
-       */
-      theme?: LayoutTheme;
-    }
-    export class Layout extends React.Component<LayoutProps, {}> {
-    }
-
-    export interface NavDrawerTheme {
-      active?: string;
-      drawerContent?: string;
-      lgPermangent?: string;
-      mdPermangent?: string;
-      navDrawer?: string;
-      pinned?: string;
-      scrim?: string;
-      scrollY?: string;
-      smPermanent?: string;
-      wide?: string;
-      xlPermanent?: string;
-      xxlPermangent?: string;
-      xxxlPermangent?: string;
-    }
-    interface NavDrawerProps extends Props {
-      active?: boolean;
-      /**
-       * Children to pass through the component.
-       */
-      children?: React.ReactNode;
-      onOverlayClick?: React.MouseEventHandler;
-      permanentAt?: "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
-      pinned?: boolean;
-      scrollY?: boolean;
-      /**
-       * Classnames object defining the component style.
-       */
-      theme?: NavDrawerTheme;
-      width?: "normal" | "wide";
-    }
-    export class NavDrawer extends React.Component<NavDrawerProps, {}> {
-    }
-
-    export interface PanelTheme {
-      panel?: string;
-      scrollY?: string;
-    }
-    interface PanelProps extends Props {
-      /**
-       * Children to pass through the component.
-       */
-      children?: React.ReactNode;
-      scrollY?: boolean;
-      /**
-       * Classnames object defining the component style.
-       */
-      theme?: PanelTheme;
-    }
-    export class Panel extends React.Component<PanelProps, {}> {
-    }
-
-    export interface SidebarTheme {
-      pinned?: string;
-      scrollY?: string;
-      sidebar?: string;
-      sidebarContent?: string;
-    }
-    interface SidebarProps extends Props {
-      /**
-       * Children to pass through the component.
-       */
-      children?: React.ReactNode;
-      pinned?: boolean;
-      scrollY?: boolean;
-      /**
-       * Classnames object defining the component style.
-       */
-      theme?: SidebarTheme;
-      width?: number; // 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 25 | 33 | 50 | 66 | 75 | 100;
-    }
-    export class Sidebar extends React.Component<SidebarProps, {}> {
-    }
-  }
-
-  export interface LinkTheme {
-    active?: string;
-    icon?: string;
-    link?: string;
-  }
-  interface LinkProps extends Props {
-    active?: boolean;
-    /**
-     * Children to pass through the component.
-     */
-    children?: React.ReactNode;
-    count?: number;
-    icon?: React.ReactNode | string;
-    label?: string;
-    /**
-     * Classnames object defining the component style.
-     */
-    theme?: LinkTheme;
-  }
-  export class Link extends React.Component<LinkProps, {}> {
-  }
-
-
-  namespace List {
-    export interface ListTheme {
-      list?: string;
-    }
-    interface ListProps extends Props {
-      /**
-       * Children to pass through the component.
-       */
-      children?: React.ReactNode;
-      ripple?: boolean;
-      selectable?: boolean;
-      /**
-       * Classnames object defining the component style.
-       */
-      theme?: ListTheme;
-    }
-    export class List extends React.Component<ListProps, {}> {
-    }
-
-    export interface ListCheckboxTheme {
-      checkbox?: string;
-      checkboxItem?: string;
-      disabled?: string;
-      item?: string;
-      itemContentRoot?: string;
-      itemText?: string;
-      large?: string;
-      primary?: string;
-    }
-    interface ListCheckboxProps extends Props {
-      caption?: string;
-      checked?: boolean;
-      disabled?: boolean;
-      legend?: string;
-      name?: string;
-      onBlur?: React.FocusEventHandler;
-      onChange?: React.FormEventHandler;
-      onFocus?: React.FocusEventHandler;
-      /**
-       * Classnames object defining the component style.
-       */
-      theme?: ListCheckboxTheme;
-    }
-    export class ListCheckbox extends React.Component<ListCheckboxProps, {}> {
-    }
-
-    export interface ListDividerTheme {
-      divider?: string;
-      inset?: string;
-    }
-    interface ListDividerProps extends Props {
-      inset?: boolean;
-      /**
-       * Classnames object defining the component style.
-       */
-      theme?: ListDividerTheme;
-    }
-    export class ListDivider extends React.Component<ListDivider, {}> {
-    }
-
-    export interface ListItemTheme {
-      disabled?: string;
-      item?: string;
-      itemAction?: string;
-      large?: string;
-      left?: string;
-      listItem?: string;
-      primary?: string;
-      right?: string;
-      selectable?: string;
-    }
-    interface ListItemProps extends Props {
-      avatar?: React.ReactNode | string;
-      caption?: string;
-      /**
-       * Children to pass through the component.
-       */
-      children?: React.ReactNode;
-      disabled?: boolean;
-      itemContent?: React.ReactNode;
-      leftActions?: React.ReactNode;
-      leftIcon?: React.ReactNode | string;
-      rightIcon?: React.ReactNode | string;
-      ripple?: boolean;
-      selectable?: boolean;
-      /**
-       * Classnames object defining the component style.
-       */
-      theme?: ListItemTheme;
-      to?: string;
-    }
-    export class ListItem extends React.Component<ListItemProps, {}> {
-    }
-
-    export interface ListSubHeaderTheme {
-      subheader?: string;
-    }
-    interface ListSubHeaderProps extends Props {
-      caption?: boolean;
-      /**
-       * Classnames object defining the component style.
-       */
-      theme?: ListSubHeaderTheme;
-    }
-    export class ListSubHeader extends React.Component<ListSubHeaderProps, {}> {
-    }
-  }
-
-
-  namespace Menu {
-    export interface MenuTheme {
-      active?: string;
-      bottomLeft?: string;
-      bottomRight?: string;
-      menu?: string;
-      menuInner?: string;
-      outline?: string;
-      rippled?: string;
-      static?: string;
-      topLeft?: string;
-      topRight?: string;
-    }
-    interface MenuProps extends Props {
-      active?: boolean;
-      /**
-       * Children to pass through the component.
-       */
-      children?: React.ReactNode;
-      onHide?: Function;
-      onSelect?: Function;
-      onShow?: Function;
-      position?: "auto" | "static" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
-      ripple?: boolean;
-      selectable?: boolean;
-      selected?: any;
-      /**
-       * Classnames object defining the component style.
-       */
-      theme?: MenuTheme;
-    }
-    export class Menu extends React.Component<MenuProps, {}> {
-    }
-
-    export interface IconMenuTheme {
-      icon?: string;
-      iconMenu?: string;
-    }
-    interface IconMenuProps extends Props {
-      /**
-       * Children to pass through the component.
-       */
-      children?: React.ReactNode;
-      icon?: React.ReactNode | string;
-      iconRipple?: boolean;
-      menuRipple?: boolean;
-      onSelect?: Function;
-      onShow?: Function;
-      position?: "auto" | "static" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
-      selectable?: boolean;
-      selected?: any;
-      /**
-       * Classnames object defining the component style.
-       */
-      theme?: IconMenuTheme;
-    }
-    export class IconMenu extends React.Component<IconMenuProps, {}> {
-    }
-
-    export interface MenuDividerTheme {
-      menuDivider?: string;
-    }
-    interface MenuDividerProps extends Props {
-      /**
-       * Classnames object defining the component style.
-       */
-      theme?: MenuDividerTheme;
-    }
-    export class MenuDivider extends React.Component<MenuDividerProps, {}> {
-    }
-
-    export interface ListDividerTheme {
-      divider?: string;
-      inset?: string;
-    }
-    interface ListDividerProps extends Props {
-      inset?: boolean;
-      /**
-       * Classnames object defining the component style.
-       */
-      theme?: ListDividerTheme;
-    }
-    export class ListDivider extends React.Component<ListDivider, {}> {
-    }
-
-    export interface MenuItemTheme {
-      caption?: string;
-      disabled?: string;
-      icon?: string;
-      menuItem?: string;
-      selected?: string;
-      shortcut?: string;
-    }
-    interface MenuItemProps extends Props {
-      caption?: string;
-      /**
-       * Children to pass through the component.
-       */
-      children?: React.ReactNode;
-      disabled?: boolean;
-      icon?: React.ReactNode | string;
-      selected?: boolean;
-      /**
-       * Classnames object defining the component style.
-       */
-      theme?: MenuItemTheme;
-    }
-    export class MenuItem extends React.Component<MenuItemProps, {}> {
-    }
-  }
-
-  export interface NavigationTheme {
-    button?: string;
-    horizontal?: string;
-    link?: string;
-    vertical?: string;
-  }
-  interface NavigationProps extends Props {
-    actions?: any[];
-    /**
-     * Children to pass through the component.
-     */
-    children?: React.ReactNode;
-    routes?: any[];
-    /**
-     * Classnames object defining the component style.
-     */
-    theme?: NavigationTheme;
-    type?: "vertical" | "horizontal";
-  }
-  export class Navigation extends React.Component<NavigationProps, {}> {
-  }
-
-  export interface ProgressBarTheme {
-    buffer?: string;
-    circle?: string;
-    circular?: string;
-    indeterminate?: string;
-    linear?: string;
-    multicolor?: string;
-    path?: string;
-    value?: string;
-  }
-  interface ProgressBarProps extends Props {
-    buffer?: number;
-    max?: number;
-    min?: number;
-    mode?: "determinate" | "indeterminate";
-    multicolor?: boolean;
-    /**
-     * Classnames object defining the component style.
-     */
-    theme?: ProgressBarTheme;
-    type?: "linear" | "circular";
-    value?: number;
-  }
-  export class ProgressBar extends React.Component<ProgressBarProps, {}> {
-  }
-
-
-  namespace Radio {
-    interface RadioGroupProps extends Props {
-      /**
-       * Children to pass through the component.
-       */
-      children?: React.ReactNode;
-      disabled?: boolean;
-      name?: string;
-      onChange?: Function;
-      value?: number;
-    }
-    export class RadioGroup extends React.Component<RadioGroupProps, {}> {
-    }
-
-    export interface RadioButtonTheme {
-      radio?: string;
-      radioChecked?: string;
-      ripple?: string;
-      disabled?: string;
-      field?: string;
-      input?: string;
-      text?: string;
-    }
-    interface RadioButtonProps extends Props {
-      checked?: boolean;
-      disabled?: boolean;
-      label?: React.ReactNode | string;
-      name?: string;
-      onBlur?: React.FocusEventHandler;
-      onChange?: React.FormEventHandler;
-      onFocus?: React.FocusEventHandler;
-      /**
-       * Classnames object defining the component style.
-       */
-      theme?: RadioButtonTheme;
-      value?: any;
-    }
-    export class RadioButton extends React.Component<RadioButtonProps, {}> {
-    }
-  }
-
-  export interface RippleTheme {
-    ripple?: string;
-    rippleActive?: string;
-    rippleRestarting?: string;
-    riplleWrapper?: string;
-  }
-  interface RippleProps {
-    /**
-     * Children to pass through the component.
-     */
-    children?: React.ReactNode;
-    disabled?: boolean;
-    onRippleEnded?: Function;
-    spread?: number;
-    /**
-     * Classnames object defining the component style.
-     */
-    theme?: RippleTheme;
-  }
-  export class Ripple extends React.Component<RippleProps, {}> {
-  }
-
-  export interface SliderTheme {
-    container?: string;
-    editable?: string;
-    innerknob?: string;
-    innerprogress?: string;
-    input?: string;
-    knob?: string;
-    pinned?: string;
-    pressed?: string;
-    progress?: string;
-    ring?: string;
-    slider?: string;
-    snap?: string;
-    snaps?: string;
-  }
-  interface SliderProps {
-    editable?: boolean;
-    max?: number;
-    min?: number;
-    onChange?: Function;
-    pinned?: boolean;
-    snaps?: boolean;
-    step?: number;
-    /**
-     * Classnames object defining the component style.
-     */
-    theme?: RippleTheme;
-    value?: number;
-  }
-  export class Slider extends React.Component<SliderProps, {}> {
-  }
-
-  export interface SnackbarTheme {
-    accept?: string;
-    active?: string;
-    button?: string;
-    cancel?: string;
-    icon?: string;
-    label?: string;
-    snackbar?: string;
-    warning?: string;
-  }
-  interface SnackbarProps {
-    action?: string;
-    active?: boolean;
-    icon?: React.ReactNode | string;
-    label?: string;
-    onTimeout?: Function;
-    /**
-     * Classnames object defining the component style.
-     */
-    theme?: SnackbarTheme;
-    timeout?: number;
-    type?: "accept" | "cancel" | "warning";
-  }
-  export class Snackbar extends React.Component<SnackbarProps, {}> {
-  }
-
-  export interface SwitchTheme {
-    disabled?: string;
-    field?: string;
-    input?: string;
-    off?: string;
-    on?: string;
-    ripple?: string;
-    text?: string;
-    thumb?: string;
-  }
-  interface SwitchProps {
-    checked?: boolean;
-    disabled?: boolean;
-    label?: string;
-    name?: string;
-    onBlur?: React.FocusEventHandler;
-    onChange?: React.FormEventHandler;
-    onFocus?: React.FocusEventHandler;
-    /**
-     * Classnames object defining the component style.
-     */
-    theme?: SwitchTheme;
-  }
-  export class Switch extends React.Component<SwitchProps, {}> {
-  }
-
-  export interface TableTheme {
-    editable?: string;
-    row?: string;
-    selectable?: string;
-    selected?: string;
-    table?: string;
-  }
-  interface TableProps {
-    heading?: boolean;
-    model?: any;
-    onChange?: Function;
-    onSelect?: React.FormEventHandler;
-    selectable?: boolean;
-    multiSelectable?: boolean;
-    selected?: any[];
-    source?: any[];
-    /**
-     * Classnames object defining the component style.
-     */
-    theme?: TableTheme;
-  }
-  export class Table extends React.Component<TableProps, {}> {
-  }
-
-
-  namespace Tabs {
-    export interface TabsTheme {
-      active?: string;
-      navigation?: string;
-      pointer?: string;
-      tabs?: string;
-      tab?: string;
-    }
-    interface TabsProps extends Props {
-      /**
-       * Children to pass through the component.
-       */
-      children?: React.ReactNode;
-      disableAnimatedBottomBorder?: boolean;
-      index?: number;
-      onChange?: Function;
-      /**
-       * Classnames object defining the component style.
-       */
-      theme?: TabsTheme;
-    }
-    export class Tabs extends React.Component<TabsProps, {}> {
-    }
-
-    export interface TabTheme {
-      active?: string;
-      disabled?: string;
-      hidden?: string;
-      label?: string;
-    }
-    interface TabProps extends Props {
-      active?: boolean;
-      activeClassName?: string;
-      disabled?: boolean;
-      hidden?: boolean;
-      label?: string;
-      onActive?: Function;
-      /**
-       * Classnames object defining the component style.
-       */
-      theme?: TabTheme;
-    }
-    export class Tab extends React.Component<TabProps, {}> {
-    }
-  }
-
-  export interface TimePickerTheme {
-    active?: string;
-    am?: string;
-    amFormat?: string;
-    ampm?: string;
-    button?: string;
-    clock?: string;
-    clockWrapper?: string;
-    dialog?: string;
-    face?: string;
-    hand?: string;
-    header?: string;
-    hours?: string;
-    hoursDisplay?: string;
-    input?: string;
-    knob?: string;
-    minutes?: string;
-    minutesDisplay?: string;
-    number?: string;
-    placeholder?: string;
-    pm?: string;
-    pmFormat?: string;
-    separator?: string;
-    small?: string;
-  }
-  interface TimePickerProps {
-    error?: string;
-    inputClassName?: string;
-    format?: "24hr" | "ampm";
-    label?: string;
-    onChange?: Function;
-    /**
-     * Classnames object defining the component style.
-     */
-    theme?: TimePickerTheme;
-    value?: Date;
-  }
-  export class TimePicker extends React.Component<TimePickerProps, {}> {
-  }
-
-  export interface TooltipTheme {
-    tooltip?: string;
-    tooltipActive?: string;
-    tooltipWrapper?: string;
-  }
-  interface TooltipProps {
-    onMouseEnter?: React.MouseEventHandler;
-    onMouseLeave?: React.MouseEventHandler;
-    /**
-     * Classnames object defining the component style.
-     */
-    theme?: TooltipTheme;
-    tooltip?: string;
-    tooltipDelay?: number;
-    tooltipHideOnClick?: boolean;
-  }
-  class TooltipComponent<P, S> extends React.Component<P, S> {
-    props: P & TooltipProps;
-  }
-  interface TooltippedComponentClass<P> extends TooltipProps {
-    new (props?: P, context?: any): TooltipComponent<P, any>;
-  }
-  export function Tooltip<P>(componentClass: React.ComponentClass<P>): TooltippedComponentClass<P>;
-}
-
-declare module "react-toolbox/lib/app_bar" {
-  export import AppBar = __ReactToolbox.AppBar;
-  export default AppBar;
-
-  export import AppBarTheme = __ReactToolbox.AppBarTheme;
-}
-
-declare module "react-toolbox/lib/autocomplete" {
-  export import Autocomplete = __ReactToolbox.Autocomplete;
-  export default Autocomplete;
-
-  export import AutocompleteTheme = __ReactToolbox.Autocomplete;
-}
-
-declare module "react-toolbox/lib/avatar" {
-  export import Avatar = __ReactToolbox.Avatar;
-  export default Avatar;
-
-  export import AvatarTheme = __ReactToolbox.AvatarTheme;
-}
-
-declare module "react-toolbox/lib/button" {
-  export import Button = __ReactToolbox.Button.Button;
-  export import IconButton = __ReactToolbox.Button.IconButton;
-  export default { Button, IconButton };
-
-  export import ButtonTheme = __ReactToolbox.Button.ButtonTheme;
-  export import IconButtonTheme = __ReactToolbox.Button.IconButtonTheme;
-}
-
-declare module "react-toolbox/lib/card" {
-  export import Card = __ReactToolbox.Card.Card;
-  export import CardActions = __ReactToolbox.Card.CardActions;
-  export import CardMedia = __ReactToolbox.Card.CardMedia;
-  export import CardText = __ReactToolbox.Card.CardText;
-  export import CardTitle = __ReactToolbox.Card.CardTitle;
-  export default { Card, CardActions, CardMedia, CardText, CardTitle };
-
-  export import CardTheme = __ReactToolbox.Card.CardTheme;
-  export import CardActionsTheme = __ReactToolbox.Card.CardActionsTheme;
-  export import CardMediaTheme = __ReactToolbox.Card.CardMediaTheme;
-  export import CardTextTheme = __ReactToolbox.Card.CardTextTheme;
-  export import CardTitleTheme = __ReactToolbox.Card.CardTitleTheme;
-}
-
-declare module "react-toolbox/lib/checkbox" {
-  export import Checkbox = __ReactToolbox.Checkbox;
-  export default Checkbox;
-
-  export import CheckboxTheme = __ReactToolbox.CheckboxTheme;
-}
-
-declare module "react-toolbox/lib/chip" {
-  export import Chip = __ReactToolbox.Chip;
-  export default Chip;
-
-  export import ChipTheme = __ReactToolbox.ChipTheme;
-}
-
-declare module "react-toolbox/lib/date_picker" {
-  export import DatePicker = __ReactToolbox.DatePicker;
-  export default DatePicker;
-
-  export import DatePickerTheme = __ReactToolbox.DatePickerTheme;
-}
-
-declare module "react-toolbox/lib/dialog" {
-  export import Dialog = __ReactToolbox.Dialog;
-  export default Dialog;
-
-  export import DialogTheme = __ReactToolbox.DialogTheme;
-}
-
-declare module "react-toolbox/lib/drawer" {
-  export import Drawer = __ReactToolbox.Drawer;
-  export default Drawer;
-
-  export import DrawerTheme = __ReactToolbox.DrawerTheme;
-}
-
-declare module "react-toolbox/lib/dropdown" {
-  export import Dropdown = __ReactToolbox.Dropdown;
-  export default Dropdown;
-
-  export import DropdownTheme = __ReactToolbox.DropdownTheme;
-}
-
-declare module "react-toolbox/lib/font_icon" {
-  export import FontIcon = __ReactToolbox.FontIcon;
-  export default FontIcon;
-}
-
-declare module "react-toolbox/lib/input" {
-  export import Input = __ReactToolbox.Input;
-  export default Input;
-
-  export import InputTheme = __ReactToolbox.InputTheme;
-}
-
-declare module "react-toolbox/lib/layout" {
-  export import Layout = __ReactToolbox.Layout.Layout;
-  export import NavDrawer = __ReactToolbox.Layout.NavDrawer;
-  export import Panel = __ReactToolbox.Layout.Panel;
-  export import Sidebar = __ReactToolbox.Layout.Sidebar;
-  export default { Layout, NavDrawer, Panel, Sidebar }
-
-  export import LayoutTheme = __ReactToolbox.Layout.LayoutTheme;
-  export import NavDrawerTheme = __ReactToolbox.Layout.NavDrawerTheme;
-  export import PanelTheme = __ReactToolbox.Layout.PanelTheme;
-  export import SidebarTheme = __ReactToolbox.Layout.SidebarTheme;
-}
-
-declare module "react-toolbox/lib/link" {
-  export import Link = __ReactToolbox.Link;
-  export default Link;
-
-  export import LinkTheme = __ReactToolbox.LinkTheme;
-}
-
-declare module "react-toolbox/lib/list" {
-  export import List = __ReactToolbox.List.List;
-  export import ListCheckbox = __ReactToolbox.List.ListCheckbox;
-  export import ListDivider = __ReactToolbox.List.ListDivider;
-  export import ListItem = __ReactToolbox.List.ListItem;
-  export import ListSubHeader = __ReactToolbox.List.ListSubHeader;
-  export default { List, ListCheckbox, ListDivider, ListItem, ListSubHeader };
-
-  export import ListTheme = __ReactToolbox.List.ListTheme;
-  export import ListCheckboxTheme = __ReactToolbox.List.ListCheckboxTheme;
-  export import ListDividerTheme = __ReactToolbox.List.ListDividerTheme;
-  export import ListItemTheme = __ReactToolbox.List.ListItemTheme;
-  export import ListSubHeaderTheme = __ReactToolbox.List.ListSubHeaderTheme;
-}
-
-declare module "react-toolbox/lib/menu" {
-  export import Menu = __ReactToolbox.Menu.Menu;
-  export import IconMenu = __ReactToolbox.Menu.IconMenu;
-  export import MenuDivider = __ReactToolbox.Menu.MenuDivider;
-  export import MenuItem = __ReactToolbox.Menu.MenuItem;
-  export default { Menu, IconMenu, MenuDivider, MenuItem };
-}
-
-declare module "react-toolbox/lib/navigation" {
-  export import Navigation = __ReactToolbox.Navigation;
-  export default Navigation;
-}
-
-declare module "react-toolbox/lib/progress_bar" {
-  export import Progressbar = __ReactToolbox.ProgressBar;
-  export default Progressbar;
-}
-
-declare module "react-toolbox/lib/radio" {
-  export import RadioGroup = __ReactToolbox.Radio.RadioGroup;
-  export import RadioButton = __ReactToolbox.Radio.RadioButton;
-  export default { RadioGroup, RadioButton };
-}
-
-declare module "react-toolbox/lib/ripple" {
-  export import Ripple = __ReactToolbox.Ripple;
-  export default Ripple;
-}
-
-declare module "react-toolbox/lib/slider" {
-  export import Slider = __ReactToolbox.Slider;
-  export default Slider;
-}
-
-declare module "react-toolbox/lib/snackbar" {
-  export import Snackbar = __ReactToolbox.Snackbar;
-  export default Snackbar;
-}
-
-declare module "react-toolbox/lib/switch" {
-  export import Switch = __ReactToolbox.Switch;
-  export default Switch;
-}
-
-declare module "react-toolbox/lib/table" {
-  export import Table = __ReactToolbox.Table;
-  export default Table;
-}
-
-declare module "react-toolbox/lib/tabs" {
-  export import Tab = __ReactToolbox.Tabs.Tab;
-  export import Tabs = __ReactToolbox.Tabs.Tabs;
-  export default { Tab, Tabs };
-}
-
-declare module "react-toolbox/lib/time_picker" {
-  export import TimePicker = __ReactToolbox.TimePicker;
-  export default TimePicker;
-}
-
-declare module "react-toolbox/lib/tooltip" {
-  export import Tooltip = __ReactToolbox.Tooltip;
-  export default Tooltip;
+import { AppBar } from "react-toolbox/lib/app_bar";
+import { Autocomplete } from "react-toolbox/lib/autocomplete";
+import { Avatar } from "react-toolbox/lib/avatar";
+import { Button, IconButton } from "react-toolbox/lib/button";
+import { Card, CardTitle, CardMedia, CardText, CardActions } from "react-toolbox/lib/card";
+import { Checkbox } from "react-toolbox/lib/checkbox";
+import { Chip } from "react-toolbox/lib/chip";
+import { DatePicker } from "react-toolbox/lib/date_picker";
+import { Dialog } from "react-toolbox/lib/dialog";
+import { Drawer } from "react-toolbox/lib/drawer";
+import { Dropdown } from "react-toolbox/lib/dropdown";
+import { FontIcon } from "react-toolbox/lib/font_icon";
+import { Input } from "react-toolbox/lib/input";
+import { Layout, Panel, NavDrawer, Sidebar } from "react-toolbox/lib/layout";
+import { Link } from "react-toolbox/lib/link";
+import { List, ListCheckbox, ListItem, ListDivider, ListSubHeader } from "react-toolbox/lib/list";
+import { Menu, MenuDivider, MenuItem, IconMenu } from "react-toolbox/lib/menu";
+import { Navigation } from "react-toolbox/lib/navigation";
+import { ProgressBar } from "react-toolbox/lib/progress_bar";
+import { RadioGroup, RadioButton } from "react-toolbox/lib/radio";
+import { Ripple } from "react-toolbox/lib/ripple";
+import { Slider } from "react-toolbox/lib/slider";
+import { Snackbar } from "react-toolbox/lib/snackbar";
+import { Switch } from "react-toolbox/lib/switch";
+import { Tabs, Tab } from "react-toolbox/lib/tabs";
+import { TimePicker } from "react-toolbox/lib/time_picker";
+import { Tooltip } from "react-toolbox/lib/tooltip";
+
+import { AppBarTheme } from "react-toolbox/lib/app_bar";
+import { AutocompleteTheme } from "react-toolbox/lib/autocomplete";
+import { AvatarTheme } from "react-toolbox/lib/avatar";
+import { ButtonTheme, IconButtonTheme } from "react-toolbox/lib/button";
+import { CardTheme, CardTitleTheme, CardMediaTheme, CardTextTheme, CardActionsTheme } from "react-toolbox/lib/card";
+import { CheckboxTheme } from "react-toolbox/lib/checkbox";
+import { ChipTheme } from "react-toolbox/lib/chip";
+import { DatePickerTheme } from "react-toolbox/lib/date_picker";
+import { DialogTheme } from "react-toolbox/lib/dialog";
+import { DrawerTheme } from "react-toolbox/lib/drawer";
+import { DropdownTheme } from "react-toolbox/lib/dropdown";
+import { InputTheme } from "react-toolbox/lib/input";
+import { LayoutTheme, PanelTheme, NavDrawerTheme, SidebarTheme } from "react-toolbox/lib/layout";
+import { LinkTheme } from "react-toolbox/lib/link";
+import { ListTheme, ListCheckboxTheme, ListItemTheme, ListDividerTheme, ListSubHeaderTheme } from "react-toolbox/lib/list";
+import { MenuTheme, MenuDividerTheme, MenuItemTheme, IconMenuTheme } from "react-toolbox/lib/menu";
+import { NavigationTheme } from "react-toolbox/lib/navigation";
+import { ProgressBarTheme } from "react-toolbox/lib/progress_bar";
+import { RadioButtonTheme } from "react-toolbox/lib/radio";
+import { RippleTheme } from "react-toolbox/lib/ripple";
+import { SliderTheme } from "react-toolbox/lib/slider";
+import { SnackbarTheme } from "react-toolbox/lib/snackbar";
+import { SwitchTheme } from "react-toolbox/lib/switch";
+import { TabsTheme, TabTheme } from "react-toolbox/lib/tabs";
+import { TimePickerTheme } from "react-toolbox/lib/time_picker";
+import { TooltipTheme } from "react-toolbox/lib/tooltip";
+
+export {
+  AppBar,
+  Autocomplete,
+  Avatar,
+  Button, IconButton,
+  Card, CardTitle, CardMedia, CardText, CardActions,
+  Checkbox,
+  Chip,
+  DatePicker,
+  Dialog,
+  Drawer,
+  Dropdown,
+  FontIcon,
+  Input,
+  Layout, Panel, NavDrawer, Sidebar,
+  Link,
+  List, ListCheckbox, ListItem, ListDivider, ListSubHeader,
+  Menu, MenuDivider, MenuItem, IconMenu,
+  Navigation,
+  ProgressBar,
+  RadioGroup, RadioButton,
+  Ripple,
+  Slider,
+  Snackbar,
+  Switch,
+  Tabs, Tab,
+  TimePicker,
+  Tooltip,
+
+  AppBarTheme,
+  AutocompleteTheme,
+  AvatarTheme,
+  ButtonTheme, IconButtonTheme,
+  CardTheme, CardTitleTheme, CardMediaTheme, CardTextTheme, CardActionsTheme,
+  CheckboxTheme,
+  ChipTheme,
+  DatePickerTheme,
+  DialogTheme,
+  DrawerTheme,
+  DropdownTheme,
+  InputTheme,
+  LayoutTheme, PanelTheme, NavDrawerTheme, SidebarTheme,
+  LinkTheme,
+  ListTheme, ListCheckboxTheme, ListItemTheme, ListDividerTheme, ListSubHeaderTheme,
+  MenuTheme, MenuDividerTheme, MenuItemTheme, IconMenuTheme,
+  NavigationTheme,
+  ProgressBarTheme,
+  RadioButtonTheme,
+  RippleTheme,
+  SliderTheme,
+  SnackbarTheme,
+  SwitchTheme,
+  TabsTheme, TabTheme,
+  TimePickerTheme,
+  TooltipTheme
 }

From ae6109c6fdfb0cf066fbdfb19e5bb92ecae324ed Mon Sep 17 00:00:00 2001
From: Per Bergqwist <pbergqwist@contractor.ea.com>
Date: Tue, 19 Jul 2016 21:18:33 +0200
Subject: [PATCH 0676/1024] All props are now commented

---
 components/checkbox/index.d.ts     |  43 +++++
 components/chip/index.d.ts         |  25 +++
 components/date_picker/index.d.ts  | 100 +++++++++++
 components/dialog/index.d.ts       |  54 ++++++
 components/drawer/index.d.ts       |  26 +++
 components/dropdown/index.d.ts     |  75 ++++++++
 components/font_icon/index.d.ts    |   3 +
 components/index.d.ts              |  22 +++
 components/input/index.d.ts        |  88 ++++++++++
 components/layout/index.d.ts       |  98 +++++++++++
 components/link/index.d.ts         |  25 +++
 components/list/index.d.ts         | 152 +++++++++++++++++
 components/menu/index.d.ts         | 156 +++++++++++++++--
 components/navigation/index.d.ts   |  22 +++
 components/progress_bar/index.d.ts |  52 ++++++
 components/radio/index.d.ts        |  60 +++++++
 components/ripple/index.d.ts       |  25 ++-
 components/slider/index.d.ts       |  70 ++++++++
 components/snackbar/index.d.ts     |  48 +++++-
 components/switch/index.d.ts       |  47 +++++
 components/table/index.d.ts        |  42 +++++
 components/tabs/index.d.ts         |  60 ++++++-
 components/time_picker/index.d.ts  |  88 ++++++++++
 components/tooltip/index.d.ts      |  25 +++
 lib/app_bar/index.d.ts             |  41 +++++
 lib/autocomplete/index.d.ts        | 105 ++++++++++++
 lib/avatar/index.d.ts              |  47 +++++
 lib/button/index.d.ts              | 227 +++++++++++++++++++++++++
 lib/card/index.d.ts                | 102 +++++++++++
 lib/checkbox/index.d.ts            |  69 ++++++++
 lib/chip/index.d.ts                |  52 ++++++
 lib/date_picker/index.d.ts         | 148 ++++++++++++++++
 lib/dialog/index.d.ts              |  92 ++++++++++
 lib/drawer/index.d.ts              |  53 ++++++
 lib/dropdown/index.d.ts            | 114 +++++++++++++
 lib/font_icon/index.d.ts           |  16 ++
 lib/index.d.ts                     |  22 +++
 lib/input/index.d.ts               | 135 +++++++++++++++
 lib/layout/index.d.ts              | 193 +++++++++++++++++++++
 lib/link/index.d.ts                |  50 ++++++
 lib/list/index.d.ts                | 264 +++++++++++++++++++++++++++++
 lib/menu/index.d.ts                | 241 ++++++++++++++++++++++++++
 lib/navigation/index.d.ts          |  46 +++++
 lib/progress_bar/index.d.ts        |  82 +++++++++
 lib/radio/index.d.ts               | 101 +++++++++++
 lib/ripple/index.d.ts              |  49 ++++++
 lib/slider/index.d.ts              | 106 ++++++++++++
 lib/snackbar/index.d.ts            |  76 +++++++++
 lib/switch/index.d.ts              |  77 +++++++++
 lib/table/index.d.ts               |  70 ++++++++
 lib/tabs/index.d.ts                | 105 ++++++++++++
 lib/time_picker/index.d.ts         | 132 +++++++++++++++
 lib/tooltip/index.d.ts             |  56 ++++++
 53 files changed, 4259 insertions(+), 18 deletions(-)
 create mode 100644 components/index.d.ts
 create mode 100644 lib/app_bar/index.d.ts
 create mode 100644 lib/autocomplete/index.d.ts
 create mode 100644 lib/avatar/index.d.ts
 create mode 100644 lib/button/index.d.ts
 create mode 100644 lib/card/index.d.ts
 create mode 100644 lib/checkbox/index.d.ts
 create mode 100644 lib/chip/index.d.ts
 create mode 100644 lib/date_picker/index.d.ts
 create mode 100644 lib/dialog/index.d.ts
 create mode 100644 lib/drawer/index.d.ts
 create mode 100644 lib/dropdown/index.d.ts
 create mode 100644 lib/font_icon/index.d.ts
 create mode 100644 lib/index.d.ts
 create mode 100644 lib/input/index.d.ts
 create mode 100644 lib/layout/index.d.ts
 create mode 100644 lib/link/index.d.ts
 create mode 100644 lib/list/index.d.ts
 create mode 100644 lib/menu/index.d.ts
 create mode 100644 lib/navigation/index.d.ts
 create mode 100644 lib/progress_bar/index.d.ts
 create mode 100644 lib/radio/index.d.ts
 create mode 100644 lib/ripple/index.d.ts
 create mode 100644 lib/slider/index.d.ts
 create mode 100644 lib/snackbar/index.d.ts
 create mode 100644 lib/switch/index.d.ts
 create mode 100644 lib/table/index.d.ts
 create mode 100644 lib/tabs/index.d.ts
 create mode 100644 lib/time_picker/index.d.ts
 create mode 100644 lib/tooltip/index.d.ts

diff --git a/components/checkbox/index.d.ts b/components/checkbox/index.d.ts
index 4b695523f..2f5d2d678 100644
--- a/components/checkbox/index.d.ts
+++ b/components/checkbox/index.d.ts
@@ -1,19 +1,62 @@
 import __ReactToolbox from "../index.d.ts";
 
 export interface CheckboxTheme {
+  /**
+   * Used as root in the check element.
+   */
   check?: string;
+  /**
+   * Used for the check element when it's checked.
+   */
   checked?: string;
+  /**
+   * Used when the component is disabled.
+   */
   disabled?: string;
+  /**
+   * Used as the root class of the component.
+   */
   field?: string;
+  /**
+   * Used for the input element.
+   */
   input?: string;
+  /**
+   * Used for the ripple component.
+   */
   ripple?: string;
+  /**
+   * Used for the text label.
+   */
+  text?: string;
 }
 
 interface CheckboxProps extends __ReactToolbox.Props {
+  /**
+   * Value for the checkbox, can be true or false.
+   * @default false
+   */
   checked?: boolean;
+  /**
+   * If true, the checkbox shown as disabled and cannot be modified.
+   * @default false
+   */
   disabled?: boolean;
+  /**
+   * Text label to attach next to the checkbox element.
+   */
   label?: __React.ReactNode | string;
+  /**
+   * The name of the field to set in the input checkbox.
+   */
   name?: string;
+  /**
+   * Callback called when the checkbox is blurred.
+   */
+  onBlur?: __React.FocusEventHandler;
+  /**
+   * Callback called when the checkbox value is changed.
+   */
   onChange?: __React.MouseEventHandler;
   /**
    * Classnames object defining the component style.
diff --git a/components/chip/index.d.ts b/components/chip/index.d.ts
index e71d5de25..4edcb6859 100644
--- a/components/chip/index.d.ts
+++ b/components/chip/index.d.ts
@@ -1,11 +1,29 @@
 import __ReactToolbox from "../index.d.ts";
 
 export interface ChipTheme {
+  /**
+   * Added to the root element when the component includes an avatar.
+   */
   avatar?: string;
+  /**
+   * Used for the root element.
+   */
   chip?: string;
+  /**
+   * Added to the root element when the component is deletable.
+   */
   deletable?: string;
+  /**
+   * Used for the delete element wrapper.
+   */
   delete?: string;
+  /**
+   * Used for the delete icon.
+   */
   deleteIcon?: string;
+  /**
+   * Used for the delete svg inner layer.
+   */
   deleteX?: string;
 }
 
@@ -14,7 +32,14 @@ interface ChipProps extends __ReactToolbox.Props {
    * Children to pass through the component.
    */
   children?: __React.ReactNode;
+  /**
+   * If true, the chip will be rendered with a delete icon.
+   * @default false
+   */
   deleteable?: boolean;
+  /**
+   * Callback to be invoked when the delete icon is clicked.
+   */
   onDeleteClick?: __React.MouseEventHandler;
   /**
    * Classnames object defining the component style.
diff --git a/components/date_picker/index.d.ts b/components/date_picker/index.d.ts
index 903b27830..1722fdacc 100644
--- a/components/date_picker/index.d.ts
+++ b/components/date_picker/index.d.ts
@@ -1,45 +1,145 @@
 import __ReactToolbox from "../index.d.ts";
 
 export interface DatePickerTheme {
+  /**
+   * Used for the active day and year.
+   */
   active?: string;
+  /**
+   * Used for the buttons in the dialog.
+   */
   button?: string;
+  /**
+   * Used for the calendar root element.
+   */
   calendar?: string;
+  /**
+   * Used as wrapper for the calendar component inside dialog.
+   */
   calendarWrapper?: string;
+  /**
+   * Used for the date element inside header.
+   */
   date?: string;
+  /**
+   * Used for the day element inside the calendar.
+   */
   day?: string;
+  /**
+   * Used for the list of days inside a month.
+   */
   days?: string;
+  /**
+   * Used for the dialog component.
+   */
   dialog?: string;
+  /**
+   * Added to day element when day is disabled.
+   */
   disabled?: string;
+  /**
+   * Used for the dialog header,.
+   */
   header?: string;
+  /**
+   * Used for Input element that opens the picker.
+   */
   input?: string;
+  /**
+   * Used for the month root element.
+   */
   month?: string;
+  /**
+   * Added to the root dialog when months are displayed.
+   */
   monthsDisplay?: string;
+  /**
+   * Used for the next month icon.
+   */
   next?: string;
+  /**
+   * Used for the prev month icon.
+   */
   prev?: string;
+  /**
+   * Used for the month title element.
+   */
   title?: string;
+  /**
+   * Used for the weekdays wrapper.
+   */
   week?: string;
+  /**
+   * Used for the year element inside header.
+   */
   year?: string;
+  /**
+   * Used for the years list in years view.
+   */
   years?: string;
+  /**
+   * Added to the root dialog when years are displayed.
+   */
   yearsDisplay?: string;
 }
 
 interface DatePickerProps extends __ReactToolbox.Props {
+  /**
+   * Automatically selects a date upon clicking on a day
+   * @default false
+   */
   autoOk?: boolean;
+  /**
+   * Give an error node to display under the field.
+   */
   error?: string;
+  /**
+   * A key to identify an Icon from Material Design Icons or a custom Icon Element.
+   */
   icon?: __React.ReactNode | string;
+  /**
+   * This class will be applied to Input component of DatePicker.
+   */
   inputClassName?: string;
+  /**
+   * Function to format the date displayed on the input.
+   */
   inputFormat?: Function;
+  /**
+   * The text string to use for the floating label element in the input component.
+   */
   label?: string;
+  /**
+   * Date object with the maximum selectable date.
+   */
   maxDate?: Date;
+  /**
+   * Date object with the minimum selectable date.
+   */
   minDate?: Date;
+  /**
+   * Name for the input field.
+   */
   name?: string;
+  /**
+   * Callback called when the picker value is changed.
+   */
   onChange?: __React.MouseEventHandler;
+  /**
+   * Callback called when the ESC key is pressed with the overlay active.
+   */
   onEscKeyDown?: __React.KeyboardEventHandler;
+  /**
+   * Callback to be invoked when the dialog overlay is clicked.
+   */
   onOverlayClick?: __React.MouseEventHandler;
   /**
    * Classnames object defining the component style.
    */
   theme?: DatePickerTheme;
+  /**
+   * Date object with the currently selected date.
+   */
   value?: Date | string;
 }
 
diff --git a/components/dialog/index.d.ts b/components/dialog/index.d.ts
index a81e07391..1fd938766 100644
--- a/components/dialog/index.d.ts
+++ b/components/dialog/index.d.ts
@@ -1,35 +1,89 @@
 import __ReactToolbox from "../index.d.ts";
 
 export interface DialogTheme {
+  /**
+   * Used for the root when the dialog is active.
+   */
   active?: string;
+  /**
+   * Used to wrap the dialog body.
+   */
   body?: string;
+  /**
+   * Used in buttons when the dialog implements actions.
+   */
   button?: string;
+  /**
+   * Used for the root element.
+   */
   dialog?: string;
+  /**
+   * Used for the navigation element when it implements actions.
+   */
   navigation?: string;
+  /**
+   * Used for the title element of the dialog.
+   */
   title?: string;
 }
 
 interface DialogActionProps {
+  /**
+   * The text string to use for the name of the button.
+   */
   label?: string;
+  /**
+   * Callback called when the component is clicked.
+   */
+  onClick?: __React.MouseEventHandler;
 }
 
 interface DialogProps extends __ReactToolbox.Props {
+  /**
+   * A array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons.
+   */
   actions?: DialogActionProps[];
+  /**
+   * If true, the dialog will be active.
+   * @default false
+   */
   active?: boolean;
   /**
    * Children to pass through the component.
    */
   children?: __React.ReactNode;
+  /**
+   * Callback called when the ESC key is pressed with the overlay active.
+   */
   onEscKeyDown?: __React.KeyboardEventHandler;
+  /**
+   * Callback to be invoked when the dialog overlay is clicked.
+   */
   onOverlayClick?: __React.MouseEventHandler;
+  /**
+   * Callback called when the mouse button is pressed on the overlay.
+   */
   onOverlayMouseDown?: __React.MouseEventHandler;
+  /**
+   * Callback called when the mouse is moving over the overlay.
+   */
   onOverlayMouseMove?: __React.MouseEventHandler;
+  /**
+   * Callback called when the mouse button is released over the overlay.
+   */
   onOverlayMouseUp?: __React.MouseEventHandler;
   /**
    * Classnames object defining the component style.
    */
   theme?: DialogTheme;
+  /**
+   * The text string to use as standar title of the dialog.
+   */
   title?: string;
+  /**
+   * Used to determine the size of the dialog. It can be small, normal or large.
+   * @default normal
+   */
   type?: string;
 }
 
diff --git a/components/drawer/index.d.ts b/components/drawer/index.d.ts
index dade687bd..3832c6e47 100644
--- a/components/drawer/index.d.ts
+++ b/components/drawer/index.d.ts
@@ -1,24 +1,50 @@
 import __ReactToolbox from "../index.d.ts";
 
 export interface DrawerTheme {
+  /**
+   * Used for the root class when the drawer is active.
+   */
   active?: string;
+  /**
+   * Used for the drawer content.
+   */
   content?: string;
+  /**
+   * Root class.
+   */
   drawer?: string;
+  /**
+   * Added to the root class when drawer is to the left.
+   */
   left?: string;
+  /**
+   * Added to the root class when drawer is to the right.
+   */
   right?: string;
 }
 
 interface DrawerProps extends __ReactToolbox.Props {
+  /**
+   * If true, the drawer will be visible.
+   * @default false
+   */
   active?: boolean;
   /**
    * Children to pass through the component.
    */
   children?: __React.ReactNode;
+  /**
+   * Callback function to be invoked when the overlay is clicked.
+   */
   onOverlayClick?: __React.MouseEventHandler;
   /**
    * Classnames object defining the component style.
    */
   theme?: DrawerTheme;
+  /**
+   * Type of drawer. It can be left or right to display the drawer on the left or right side of the screen.
+   * @default left
+   */
   type?: "left" | "right";
 }
 
diff --git a/components/dropdown/index.d.ts b/components/dropdown/index.d.ts
index 25448ffd3..886b0dff9 100644
--- a/components/dropdown/index.d.ts
+++ b/components/dropdown/index.d.ts
@@ -1,36 +1,111 @@
 import __ReactToolbox from "../index.d.ts";
 
 export interface DropdownTheme {
+  /**
+   * Added to the root element when the dropdown is active.
+   */
   active?: string;
+  /**
+   * Added to the root element when it's disabled.
+   */
   disabled?: string;
+  /**
+   * Root element class.
+   */
   dropdown?: string;
+  /**
+   * Used for the error element.
+   */
   error?: string;
+  /**
+   * Added to the inner wrapper if it's errored.
+   */
   errored?: string;
+  /**
+   * Used for the inner wrapper of the component.
+   */
   field?: string;
+  /**
+   * Used for the the label element.
+   */
   label?: string;
+  /**
+   * Used to highlight the selected value.
+   */
   selected?: string;
+  /**
+   * Used as a wrapper for the given template value.
+   */
   templateValue?: string;
+  /**
+   * Added to the root element when it's opening up.
+   */
   up?: string;
+  /**
+   * Used for each value in the dropdown component.
+   */
   value?: string;
+  /**
+   * Used for the list of values.
+   */
   values?: string;
 }
 
 interface DropdownProps extends __ReactToolbox.Props {
+  /**
+   * If true the dropdown will preselect the first item if the supplied value matches none of the options' values.
+   * @default true
+   */
   allowBlank?: boolean;
+  /**
+   * If true, the dropdown will open up or down depending on the position in the screen.
+   * @default true
+   */
   auto?: boolean;
+  /**
+   * Set the component as disabled.
+   * @default false
+   */
   disabled?: boolean;
+  /**
+   * Give an error string to display under the field.
+   */
   error?: string;
+  /**
+   * The text string to use for the floating label element.
+   */
   label?: string;
+  /**
+   * Name for the input field.
+   */
   name?: string;
+  /**
+   * Callback function that is fired when the component is blurred.
+   */
   onBlur?: __React.FocusEventHandler;
+  /**
+   * Callback function that is fired when the component's value changes.
+   */
   onChange?: __React.FormEventHandler;
+  /**
+   * Callback function that is fired when the component is focused.
+   */
   onFocus?: __React.FocusEventHandler;
+  /**
+   * Array of data objects with the data to represent in the dropdown.
+   */
   source: any[];
+  /**
+   * Callback function that returns a JSX template to represent the element.
+   */
   template?: Function;
   /**
    * Classnames object defining the component style.
    */
   theme?: DropdownTheme;
+  /**
+   * Default value using JSON data.
+   */
   value?: string | number;
 }
 
diff --git a/components/font_icon/index.d.ts b/components/font_icon/index.d.ts
index 41fe3cf1e..c3f05587a 100644
--- a/components/font_icon/index.d.ts
+++ b/components/font_icon/index.d.ts
@@ -5,6 +5,9 @@ interface FontIconProps extends __ReactToolbox.Props {
    * Children to pass through the component.
    */
   children?: __React.ReactNode;
+  /**
+   * The key string for the icon you want be displayed.
+   */
   value?: __React.ReactNode | string;
 }
 
diff --git a/components/index.d.ts b/components/index.d.ts
new file mode 100644
index 000000000..7739a9d4e
--- /dev/null
+++ b/components/index.d.ts
@@ -0,0 +1,22 @@
+export declare namespace __ReactToolbox {
+  interface Props {
+    /**
+     * Set a class for the root component.
+     */
+    className?: string;
+    /**
+     * Key used to uniquely identify the element within an Array.
+     */
+    key?: string | number;
+    /**
+     * Callback called when the component is clicked.
+     */
+    onClick?: __React.MouseEventHandler;
+    /**
+     * Set inline style for the root component.
+     */
+    style?: __React.CSSProperties;
+  }
+}
+
+export default __ReactToolbox;
diff --git a/components/input/index.d.ts b/components/input/index.d.ts
index 4ae91fe97..719ea9287 100644
--- a/components/input/index.d.ts
+++ b/components/input/index.d.ts
@@ -1,17 +1,53 @@
 import __ReactToolbox from "../index.d.ts";
 
 export interface InputTheme {
+  /**
+   * Used for the bar under the input.
+   */
   bar?: string;
+  /**
+   * Used for the counter element.
+   */
   counter?: string;
+  /**
+   * Added to the root class when input is disabled.
+   */
   disabled?: string;
+  /**
+   * Used for the text error.
+   */
   error?: string;
+  /**
+   * Added to the root class when input is errored.
+   */
   errored?: string;
+  /**
+   * Used when the input is hidden.
+   */
   hidden?: string;
+  /**
+   * Used for the hint text.
+   */
   hint?: string;
+  /**
+   * Used for the icon in case the input has icon.
+   */
   icon?: string;
+  /**
+   * Used as root class for the component.
+   */
   input?: string;
+  /**
+   * Used for the HTML input element.
+   */
   inputElement?: string;
+  /**
+   * Used in case the input is required.
+   */
   required?: string;
+  /**
+   * Added to the root class if the input has icon.
+   */
   withIcon?: string;
 }
 
@@ -20,25 +56,77 @@ interface InputProps extends __ReactToolbox.Props {
    * Children to pass through the component.
    */
   children?: __React.ReactNode;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
   disabled?: boolean;
+  /**
+   * Give an error node to display under the field.
+   */
   error?: string;
+  /**
+   * Indicates if the label is floating in the input field or not.
+   * @default true
+   */
   floating?: boolean;
+  /**
+   * The text string to use for hint text element.
+   */
   hint?: string;
+  /**
+   * Name of an icon to use as a label for the input.
+   */
   icon?: __React.ReactNode | string;
+  /**
+   * The text string to use for the floating label element.
+   */
   label?: string;
+  /**
+   * Specifies the maximum number of characters allowed in the component
+   */
   maxLength?: number;
+  /**
+   * If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.
+   * @default false
+   */
   multiLine?: boolean;
+  /**
+   * Name for the input field.
+   */
   name?: string;
+  /**
+   * Callback function that is fired when component is blurred.
+   */
   onBlur?: __React.FocusEventHandler;
+  /**
+   * Callback function that is fired when the component's value changes
+   */
   onChange?: __React.FormEventHandler;
+  /**
+   * Callback function that is fired when component is focused.
+   */
   onFocus?: __React.FocusEventHandler;
+  /**
+   * Callback function that is fired when a key is pressed.
+   */
   onKeyPress?: __React.MouseEventHandler;
+  /**
+   * If true, the html input has a required attribute.
+   * @default false
+   */
   required?: boolean;
   /**
    * Classnames object defining the component style.
    */
   theme?: InputTheme;
+  /**
+   * Type of the input element. It can be a valid HTML5 input type
+   */
   type?: string;
+  /**
+   * Current value of the input element.
+   */
   value?: any;
 }
 
diff --git a/components/layout/index.d.ts b/components/layout/index.d.ts
index 3308c5861..ad2505d7f 100644
--- a/components/layout/index.d.ts
+++ b/components/layout/index.d.ts
@@ -1,6 +1,9 @@
 import __ReactToolbox from "../index.d.ts";
 
 export interface LayoutTheme {
+  /**
+   * Class used in the container to position and align inner items.
+   */
   layout?: string;
 }
 
@@ -18,42 +21,109 @@ interface LayoutProps extends __ReactToolbox.Props {
 export class Layout extends __React.Component<LayoutProps, {}> { }
 
 export interface NavDrawerTheme {
+  /**
+   * Used when the drawer is active.
+   */
   active?: string;
+  /**
+   * Used for the content of the drawer.
+   */
   drawerContent?: string;
+  /**
+   * Added to the root class for large drawer.
+   */
   lgPermangent?: string;
+  /**
+   * Added to the root class for medium drawer.
+   */
   mdPermangent?: string;
+  /**
+   * Root class for the drawer.
+   */
   navDrawer?: string;
+  /**
+   * Added to the root class if positioning is pinned.
+   */
   pinned?: string;
+  /**
+   * Used as a wrapper for the drawer content.
+   */
   scrim?: string;
+  /**
+   * Added to the drawer content if its scrollable.
+   */
   scrollY?: string;
+  /**
+   * Added to the root class for small drawer.
+   */
   smPermanent?: string;
+  /**
+   * Added to the root class if width is wide.
+   */
   wide?: string;
+  /**
+   * Added to the root class for extra big drawer.
+   */
   xlPermanent?: string;
+  /**
+   * Added to the root class for super big drawer.
+   */
   xxlPermangent?: string;
+  /**
+   * Added to the root class for largest possible drawer.
+   */
   xxxlPermangent?: string;
 }
 
 interface NavDrawerProps extends __ReactToolbox.Props {
+  /**
+   * If true, the drawer will be shown as an overlay.
+   * @default false
+   */
   active?: boolean;
   /**
    * Children to pass through the component.
    */
   children?: __React.ReactNode;
+  /**
+   * Callback function to be invoked when the overlay is clicked.
+   */
   onOverlayClick?: __React.MouseEventHandler;
+  /**
+   * The breakpoint at which the drawer is automatically pinned.
+   */
   permanentAt?: "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
+  /**
+   * If true, the drawer will be pinned open. pinned takes precedence over active.
+   * @default false
+   */
   pinned?: boolean;
+  /**
+   * If true, the drawer will vertically scroll all content.
+   * @default false
+   */
   scrollY?: boolean;
   /**
    * Classnames object defining the component style.
    */
   theme?: NavDrawerTheme;
+  /**
+   * 320px or 400px. Only applicable above the sm breakpoint.
+   * @default normal
+   */
   width?: "normal" | "wide";
 }
 
 export class NavDrawer extends __React.Component<NavDrawerProps, {}> { }
 
 export interface PanelTheme {
+  /**
+   * Used as the root class of the panel component.
+   */
   panel?: string;
+  /**
+   * Used in case the panel is scrollable.
+   */
   scrollY?: string;
 }
 
@@ -62,6 +132,10 @@ interface PanelProps extends __ReactToolbox.Props {
    * Children to pass through the component.
    */
   children?: __React.ReactNode;
+  /**
+   * If true, the panel will vertically scroll all content.
+   * @default false
+   */
   scrollY?: boolean;
   /**
    * Classnames object defining the component style.
@@ -72,9 +146,21 @@ interface PanelProps extends __ReactToolbox.Props {
 export class Panel extends __React.Component<PanelProps, {}> { }
 
 export interface SidebarTheme {
+  /**
+   * Added to the root class if sidebar is pinned.
+   */
   pinned?: string;
+  /**
+   * Add to the content of sidebar if its scrollable.
+   */
   scrollY?: string;
+  /**
+   * Root class of the sidebar.
+   */
   sidebar?: string;
+  /**
+   * Used in for the content element of the sidebar.
+   */
   sidebarContent?: string;
 }
 
@@ -83,12 +169,24 @@ interface SidebarProps extends __ReactToolbox.Props {
    * Children to pass through the component.
    */
   children?: __React.ReactNode;
+  /**
+   * If true, the sidebar will be pinned open.
+   * @default false
+   */
   pinned?: boolean;
+  /**
+   * If true, the sidebar will vertically scroll all content
+   * @default false
+   */
   scrollY?: boolean;
   /**
    * Classnames object defining the component style.
    */
   theme?: SidebarTheme;
+  /**
+   * Width in standard increments (1-12) or percentage (25, 33, 50, 66, 75, 100)
+   * @default 5
+   */
   width?: number; // 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 25 | 33 | 50 | 66 | 75 | 100;
 }
 
diff --git a/components/link/index.d.ts b/components/link/index.d.ts
index 85db1ac14..00e18f3d0 100644
--- a/components/link/index.d.ts
+++ b/components/link/index.d.ts
@@ -1,20 +1,45 @@
 import __ReactToolbox from "../index.d.ts";
 
 export interface LinkTheme {
+  /**
+   * Added to the root element if the Link is active.
+   */
   active?: string;
+  /**
+   * Used for the icon element if it's present.
+   */
   icon?: string;
+  /**
+   * Used for the root element.
+   */
   link?: string;
 }
 
 interface LinkProps extends __ReactToolbox.Props {
+  /**
+   * If true, adds active style to link.
+   * @default false
+   */
   active?: boolean;
   /**
    * Children to pass through the component.
    */
   children?: __React.ReactNode;
+  /**
+   * Sets a count number.
+   */
   count?: number;
+  /**
+   * Sets the anchor link.
+   */
   href?: string;
+  /**
+   * An icon key string to include a FontIcon component in front of the text.
+   */
   icon?: __React.ReactNode | string;
+  /**
+   * The text string used for the text content of the link.
+   */
   label?: string;
   /**
    * Classnames object defining the component style.
diff --git a/components/list/index.d.ts b/components/list/index.d.ts
index 356fa3be7..cd0f6e7aa 100644
--- a/components/list/index.d.ts
+++ b/components/list/index.d.ts
@@ -1,6 +1,9 @@
 import __ReactToolbox from "../index.d.ts";
 
 export interface ListTheme {
+  /**
+   * Used for the root element of the list.
+   */
   list?: string;
 }
 
@@ -9,7 +12,15 @@ interface ListProps extends __ReactToolbox.Props {
    * Children to pass through the component.
    */
   children?: __React.ReactNode;
+  /**
+   * If true, each element in the list will have a ripple effect on click
+   * @default false
+   */
   ripple?: boolean;
+  /**
+   * If true, the elements in the list will display a hover effect and a pointer cursor.
+   * @default false
+   */
   selectable?: boolean;
   /**
    * Classnames object defining the component style.
@@ -20,24 +31,74 @@ interface ListProps extends __ReactToolbox.Props {
 export class List extends __React.Component<ListProps, {}> { }
 
 export interface ListCheckboxTheme {
+  /**
+   * Used as a wrapper class for the subheader element.
+   */
   checkbox?: string;
+  /**
+   * Added to the checkbox element.
+   */
   checkboxItem?: string;
+  /**
+   * Added to the inner content if its a disabled item.
+   */
   disabled?: string;
+  /**
+   * Used for the inner content of a list item.
+   */
   item?: string;
+  /**
+   * Used for the content wrapper element in list item.
+   */
   itemContentRoot?: string;
+  /**
+   * Added to the text inside of the list item.
+   */
   itemText?: string;
+  /**
+   * Added to the content wrapper element if size is large.
+   */
   large?: string;
+  /**
+   * Added to the text inside of the list item if its primary.
+   */
   primary?: string;
 }
 
 interface ListCheckboxProps extends __ReactToolbox.Props {
+  /**
+   * Main text of the item. Required.
+   */
   caption?: string;
+  /**
+   * If true the checkbox appears checked by default.
+   * @default false
+   */
   checked?: boolean;
+  /**
+   * If true, the item is displayed as disabled and it's not clickable.
+   * @default false
+   */
   disabled?: boolean;
+  /**
+   * Secondary text to display under the caption.
+   */
   legend?: string;
+  /**
+   * Name for the checkbox input item.
+   */
   name?: string;
+  /**
+   * Callback called when the input element is blurred.
+   */
   onBlur?: __React.FocusEventHandler;
+  /**
+   * Callback called when the input element is changed.
+   */
   onChange?: __React.FormEventHandler;
+  /**
+   * Callback called when the input element is focused.
+   */
   onFocus?: __React.FocusEventHandler;
   /**
    * Classnames object defining the component style.
@@ -48,11 +109,20 @@ interface ListCheckboxProps extends __ReactToolbox.Props {
 export class ListCheckbox extends __React.Component<ListCheckboxProps, {}> { }
 
 export interface ListDividerTheme {
+  /**
+   * Added to the root element.
+   */
   divider?: string;
+  /**
+   * Added to root element if inset is true.
+   */
   inset?: string;
 }
 
 interface ListDividerProps extends __ReactToolbox.Props {
+  /**
+   * If true, will leave a space at the left side.
+   */
   inset?: boolean;
   /**
    * Classnames object defining the component style.
@@ -63,45 +133,127 @@ interface ListDividerProps extends __ReactToolbox.Props {
 export class ListDivider extends __React.Component<ListDivider, {}> { }
 
 export interface ListItemTheme {
+  /**
+   * Added to the inner content if its a disabled item.
+   */
   disabled?: string;
+  /**
+   * Used for the inner content of a list item.
+   */
   item?: string;
+  /**
+   * Used for each action element (left/right).
+   */
   itemAction?: string;
+  /**
+   * Used for the content wrapper element in list item.
+   */
+  itemContentRoot?: string;
+  /**
+   * Added to the text inside of the list item.
+   */
+  itemText?: string;
+  /**
+   * Added to the content wrapper element if size is large.
+   */
   large?: string;
+  /**
+   * Added for the element that wraps left actions.
+   */
   left?: string;
+  /**
+   * Used for the root element of the list.
+   */
   listItem?: string;
+  /**
+   * Added to the text inside of the list item if its primary.
+   */
   primary?: string;
+  /**
+   * Added for the element that wraps right actions.
+   */
   right?: string;
+  /**
+   * Added to the inner content if its a selectable item.
+   */
   selectable?: string;
 }
 
 interface ListItemProps extends __ReactToolbox.Props {
+  /**
+   * A string URL to specify an avatar in the left side of the item.
+   */
   avatar?: __React.ReactNode | string;
+  /**
+   * Main text of the item.
+   */
   caption?: string;
   /**
    * Children to pass through the component.
    */
   children?: __React.ReactNode;
+  /**
+   * If true, the item is displayed as disabled and is not clickable.
+   * @default false
+   */
   disabled?: boolean;
+  /**
+   * An element that will be displayed as the item. If set, this will override caption and legend.
+   */
   itemContent?: __React.ReactNode;
+  /**
+   * A list of elements that are placed on the left side of the item and after the avatar attribute.
+   */
   leftActions?: __React.ReactNode;
+  /**
+   * A string key of a font icon or element to display an icon in the left side of the item.
+   */
   leftIcon?: __React.ReactNode | string;
+  /**
+   * Secondary text to display under the caption.
+   */
+  legend?: string;
+  /**
+   * A list of elements that are placed on the right side of the item and after the rightIcon attribute.
+   */
+  rightActions?: __React.ReactNode;
+  /**
+   * The same as the leftIcon but in this case the icon is displayed in the right side.
+   */
   rightIcon?: __React.ReactNode | string;
+  /**
+   * If true, the item displays a ripple effect on click. By default it's inherited from the parent element.
+   */
   ripple?: boolean;
+  /**
+   * If true, the elements in the list will display a hover effect and a pointer cursor. Inherited from the parent.
+   * @default false
+   */
   selectable?: boolean;
   /**
    * Classnames object defining the component style.
+   * @default false
    */
   theme?: ListItemTheme;
+  /**
+   * In case you want to provide the item as a link, you can pass this property to specify the href.
+   */
   to?: string;
 }
 
 export class ListItem extends __React.Component<ListItemProps, {}> { }
 
 export interface ListSubHeaderTheme {
+  /**
+   * Used as a wrapper class for the subheader element.
+   */
   subheader?: string;
 }
 
 interface ListSubHeaderProps extends __ReactToolbox.Props {
+  /**
+   * Text that will be displayed.
+   */
   caption?: boolean;
   /**
    * Classnames object defining the component style.
diff --git a/components/menu/index.d.ts b/components/menu/index.d.ts
index 7c1c3099c..c2609035d 100644
--- a/components/menu/index.d.ts
+++ b/components/menu/index.d.ts
@@ -1,30 +1,93 @@
 import __ReactToolbox from "../index.d.ts";
 
 export interface MenuTheme {
+  /**
+   * Added to the root element when menu is active.
+   */
   active?: string;
+  /**
+   * Added to the root when position is bottom left.
+   */
   bottomLeft?: string;
+  /**
+   * Added to the root when position is bottom right.
+   */
   bottomRight?: string;
+  /**
+   * Used for the root element of the menu.
+   */
   menu?: string;
+  /**
+   * Used for the inner wrapper.
+   */
   menuInner?: string;
+  /**
+   * Used to draw the outline.
+   */
   outline?: string;
+  /**
+   * Added to the menu in case if should have ripple.
+   */
   rippled?: string;
+  /**
+   * Added to the root in case its static.
+   */
   static?: string;
+  /**
+   * Added to the root when position is top left.
+   */
   topLeft?: string;
+  /**
+   * Added to the root when position is top right.
+   */
   topRight?: string;
 }
 
 interface MenuProps extends __ReactToolbox.Props {
+  /**
+   * If true, the menu will be displayed as opened by default.
+   * @default false
+   */
   active?: boolean;
   /**
    * Children to pass through the component.
    */
   children?: __React.ReactNode;
+  /**
+   * Callback that will be called when the menu is being hidden.
+   */
   onHide?: Function;
+  /**
+   * Callback that will be invoked when a menu item is selected.
+   */
   onSelect?: Function;
+  /**
+   * Callback that will be invoked when the menu is being shown.
+   */
   onShow?: Function;
+  /**
+   * If true the menu wrapper will show an outline with a soft shadow.
+   * @default false
+   */
+  outline?: boolean;
+  /**
+   * Determine the position of the menu. With static value the menu will be always shown, auto means that the it will decide the opening direction based on the current position. To force a position use topLeft, topRight, bottomLeft, bottomRight.
+   * @default static
+   */
   position?: "auto" | "static" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
+  /**
+   * If true, the menu items will show a ripple effect on click.
+   * @default true
+   */
   ripple?: boolean;
+  /**
+   * If true, the menu will keep a value to highlight the active child item.
+   * @default false
+   */
   selectable?: boolean;
+  /**
+   * Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted.
+   */
   selected?: any;
   /**
    * Classnames object defining the component style.
@@ -35,7 +98,13 @@ interface MenuProps extends __ReactToolbox.Props {
 export class Menu extends __React.Component<MenuProps, {}> { }
 
 export interface IconMenuTheme {
+  /**
+   * Used for the icon element.
+   */
   icon?: string;
+  /**
+   * Used for the root element of the icon menu.
+   */
   iconMenu?: string;
 }
 
@@ -44,13 +113,46 @@ interface IconMenuProps extends __ReactToolbox.Props {
    * Children to pass through the component.
    */
   children?: __React.ReactNode;
+  /**
+   * Icon font key string or Element to display the opener icon.
+   * @default more_vert
+   */
   icon?: __React.ReactNode | string;
+  /**
+   * If true, the icon will show a ripple when is clicked.
+   * @default true
+   */
   iconRipple?: boolean;
+  /**
+   * Transferred to the Menu component.
+   * @default true
+   */
   menuRipple?: boolean;
+  /**
+   * Callback that will be called when the menu is being hidden.
+   */
+  onHide?: Function;
+  /**
+   * Callback that will be invoked when a menu item is selected.
+   */
   onSelect?: Function;
+  /**
+   * Callback that will be invoked when the menu is being shown.
+   */
   onShow?: Function;
+  /**
+   * Determines the position of the menu. This property is transferred to the inner Menu component.
+   * @default auto
+   */
   position?: "auto" | "static" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
+  /**
+   * If true, the menu will keep a value to highlight the active child item.
+   * @default false
+   */
   selectable?: boolean;
+  /**
+   * Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted.
+   */
   selected?: any;
   /**
    * Classnames object defining the component style.
@@ -61,6 +163,9 @@ interface IconMenuProps extends __ReactToolbox.Props {
 export class IconMenu extends __React.Component<IconMenuProps, {}> { }
 
 export interface MenuDividerTheme {
+  /**
+   *
+   */
   menuDivider?: string;
 }
 
@@ -73,39 +178,60 @@ interface MenuDividerProps extends __ReactToolbox.Props {
 
 export class MenuDivider extends __React.Component<MenuDividerProps, {}> { }
 
-export interface ListDividerTheme {
-  divider?: string;
-  inset?: string;
-}
-
-interface ListDividerProps extends __ReactToolbox.Props {
-  inset?: boolean;
+export interface MenuItemTheme {
   /**
-   * Classnames object defining the component style.
+   * Used for the caption inside the item.
    */
-  theme?: ListDividerTheme;
-}
-
-export class ListDivider extends __React.Component<ListDivider, {}> { }
-
-export interface MenuItemTheme {
   caption?: string;
+  /**
+   * Added to the root element if it's disabled.
+   */
   disabled?: string;
+  /**
+   * Used for the icon element if exists.
+   */
   icon?: string;
+  /**
+   * Used as the root class for the component.
+   */
   menuItem?: string;
+  /**
+   * Added to the root element in case it's selected.
+   */
   selected?: string;
+  /**
+   * Used for the shortcut element if exists.
+   */
   shortcut?: string;
 }
 
 interface MenuItemProps extends __ReactToolbox.Props {
-  caption?: string;
+  /**
+   * The text to include in the menu item. Required.
+   */
+  caption: string;
   /**
    * Children to pass through the component.
    */
   children?: __React.ReactNode;
+  /**
+   * If true, the item will be displayed as disabled and is not selectable.
+   * @default false
+   */
   disabled?: boolean;
+  /**
+   * Icon font key string or Element to display in the right side of the option.
+   */
   icon?: __React.ReactNode | string;
+  /**
+   * Transferred from the Menu component for selectable menus. Indicates if it's the current active option.
+   * @default false
+   */
   selected?: boolean;
+  /**
+   * Displays shortcut text on the right side of the caption attribute.
+   */
+  shortcut?: string;
   /**
    * Classnames object defining the component style.
    */
diff --git a/components/navigation/index.d.ts b/components/navigation/index.d.ts
index 41679a608..47f46045c 100644
--- a/components/navigation/index.d.ts
+++ b/components/navigation/index.d.ts
@@ -1,23 +1,45 @@
 import __ReactToolbox from "../index.d.ts";
 
 export interface NavigationTheme {
+  /**
+   * Used for buttons provided in the component.
+   */
   button?: string;
+  /**
+   * Used for the root element if the layout is horizontal.
+   */
   horizontal?: string;
+  /**
+   * Used for links provided in the component.
+   */
   link?: string;
+  /**
+   * Used for the root element if the layout is vertical.
+   */
   vertical?: string;
 }
 
 interface NavigationProps extends __ReactToolbox.Props {
+  /**
+   * Array of objects that will be represented as <Button/> so the keys will be transferred as properties the Button Component.
+   */
   actions?: any[];
   /**
    * Children to pass through the component.
    */
   children?: __React.ReactNode;
+  /**
+   * Array of objects similar to actions but that will be rendered as <Link/> component definition.
+   */
   routes?: any[];
   /**
    * Classnames object defining the component style.
    */
   theme?: NavigationTheme;
+  /**
+   * Type of the navigation, it can be vertical or horizontal.
+   * @default horizontal
+   */
   type?: "vertical" | "horizontal";
 }
 
diff --git a/components/progress_bar/index.d.ts b/components/progress_bar/index.d.ts
index a98cf9388..8a2a8425a 100644
--- a/components/progress_bar/index.d.ts
+++ b/components/progress_bar/index.d.ts
@@ -1,27 +1,79 @@
 import __ReactToolbox from "../index.d.ts";
 
 export interface ProgressBarTheme {
+  /**
+   * Used to style the buffer element in the linear progress.
+   */
   buffer?: string;
+  /**
+   * Used for the circle element in the circular progress.
+   */
   circle?: string;
+  /**
+   * Used for the root element when the type is circular.
+   */
   circular?: string;
+  /**
+   * Added to the root element if mode is indeterminate.
+   */
   indeterminate?: string;
+  /**
+   * Used for the root element when the type is linear.
+   */
   linear?: string;
+  /**
+   * Added to the root if the component is multicolor (circular).
+   */
   multicolor?: string;
+  /**
+   * Used for the inner path in the circular progress.
+   */
   path?: string;
+  /**
+   * Used to style the value element in the linear progress.
+   */
   value?: string;
 }
 
 interface ProgressBarProps extends __ReactToolbox.Props {
+  /**
+   * Value of a secondary progress bar useful for buffering.
+   * @default 0
+   */
   buffer?: number;
+  /**
+   * Maximum value permitted.
+   * @default 100
+   */
   max?: number;
+  /**
+   * Minimum value permitted.
+   * @default 0
+   */
   min?: number;
+  /**
+   * Mode of the progress bar, it can be determinate or indeterminate.
+   * @default indeterminate
+   */
   mode?: "determinate" | "indeterminate";
+  /**
+   * If true, the circular progress bar will be changing its color.
+   * @default false
+   */
   multicolor?: boolean;
   /**
    * Classnames object defining the component style.
    */
   theme?: ProgressBarTheme;
+  /**
+   * Type of the progress bar, it can be circular or linear.
+   * @default linear
+   */
   type?: "linear" | "circular";
+  /**
+   * Value of the current progress.
+   * @default 0
+   */
   value?: number;
 }
 
diff --git a/components/radio/index.d.ts b/components/radio/index.d.ts
index cf6e28d75..5f3621329 100644
--- a/components/radio/index.d.ts
+++ b/components/radio/index.d.ts
@@ -5,36 +5,96 @@ interface RadioGroupProps extends __ReactToolbox.Props {
    * Children to pass through the component.
    */
   children?: __React.ReactNode;
+  /**
+   * If true, the group will be displayed as disabled.
+   * @default false
+   */
   disabled?: boolean;
+  /**
+   * Name for the input element group.
+   */
   name?: string;
+  /**
+   * Callback function that will be invoked when the value changes.
+   */
   onChange?: Function;
+  /**
+   * Default value selected in the radio group.
+   */
   value?: number;
 }
 
 export class RadioGroup extends __React.Component<RadioGroupProps, {}> { }
 
 export interface RadioButtonTheme {
+  /**
+   * Used to for the radio element.
+   */
   radio?: string;
+  /**
+   * Used for the radio element when it's checked.
+   */
   radioChecked?: string;
+  /**
+   * To provide styles for the ripple.
+   */
   ripple?: string;
+  /**
+   * Added to the root of the Radio in case it's disabled.
+   */
   disabled?: string;
+  /**
+   * Used as the root class of the component.
+   */
   field?: string;
+  /**
+   * Used for the input element.
+   */
   input?: string;
+  /**
+   * Used to style the text label element.
+   */
   text?: string;
 }
 
 interface RadioButtonProps extends __ReactToolbox.Props {
+  /**
+   * If true, the input element will be selected by default. Transferred from the parent.
+   * @default false
+   */
   checked?: boolean;
+  /**
+   * If true, the item will be displayed as disabled.
+   * @default false
+   */
   disabled?: boolean;
+  /**
+   * Label for the radio button.
+   */
   label?: __React.ReactNode | string;
+  /**
+   * Name for the input element.
+   */
   name?: string;
+  /**
+   * Callback function that will be invoked when the input is blurred.
+   */
   onBlur?: __React.FocusEventHandler;
+  /**
+   * Callback function that will be invoked when the value changes.
+   */
   onChange?: __React.FormEventHandler;
+  /**
+   * Callback function that will be invoked when the input is focused.
+   */
   onFocus?: __React.FocusEventHandler;
   /**
    * Classnames object defining the component style.
    */
   theme?: RadioButtonTheme;
+  /**
+   * Value for the radio button.
+   */
   value?: any;
 }
 
diff --git a/components/ripple/index.d.ts b/components/ripple/index.d.ts
index 1735828cc..059e6fb13 100644
--- a/components/ripple/index.d.ts
+++ b/components/ripple/index.d.ts
@@ -1,10 +1,22 @@
 import __ReactToolbox from "../index.d.ts";
 
 export interface RippleTheme {
+  /**
+   * Root classname for the ripple.
+   */
   ripple?: string;
+  /**
+   * Applied when the ripple is active.
+   */
   rippleActive?: string;
+  /**
+   * Applied when the ripple is restarting.
+   */
   rippleRestarting?: string;
-  riplleWrapper?: string;
+  /**
+   * Wrapper class to fit to the parent element.
+   */
+  rippleWrapper?: string;
 }
 
 interface RippleProps {
@@ -12,8 +24,19 @@ interface RippleProps {
    * Children to pass through the component.
    */
   children?: __React.ReactNode;
+  /**
+   * True in case you want a centered ripple.
+   * @default false
+   */
   disabled?: boolean;
+  /**
+   * Function that will be called when the ripple animation ends.
+   */
   onRippleEnded?: Function;
+  /**
+   * Factor to indicate how much should the ripple spread under the component.
+   * @default 2
+   */
   spread?: number;
   /**
    * Classnames object defining the component style.
diff --git a/components/slider/index.d.ts b/components/slider/index.d.ts
index 55896dbd2..fc10f35c3 100644
--- a/components/slider/index.d.ts
+++ b/components/slider/index.d.ts
@@ -1,33 +1,103 @@
 import __ReactToolbox from "../index.d.ts";
 
 export interface SliderTheme {
+  /**
+   * Used as an inner container of the root component.
+   */
   container?: string;
+  /**
+   * Added to the root of in case the Slider is editable.
+   */
   editable?: string;
+  /**
+   * Used to style the inner element of the knob.
+   */
   innerknob?: string;
+  /**
+   * Provided to the ProgressBar component.
+   */
   innerprogress?: string;
+  /**
+   * Provided to the Input element in case it's editable.
+   */
   input?: string;
+  /**
+   * Used to style the outer layer of the knob.
+   */
   knob?: string;
+  /**
+   * Added to the root in case the Slider is pinned.
+   */
   pinned?: string;
+  /**
+   * Added to the root in case the state is pressed.
+   */
   pressed?: string;
+  /**
+   * Used as an outer wrapper for the ProgressBar.
+   */
   progress?: string;
+  /**
+   * Used in the root when the knob should be a ring.
+   */
   ring?: string;
+  /**
+   * Class used for the root element.
+   */
   slider?: string;
+  /**
+   * Used for every individual snap element.
+   */
   snap?: string;
+  /**
+   * Used as a wrapper for the group of snaps when it's snapped.
+   */
   snaps?: string;
 }
 
 interface SliderProps extends __ReactToolbox.Props {
+  /**
+   * If true, an input is shown and the user can set the slider from keyboard value.
+   * @default false
+   */
   editable?: boolean;
+  /**
+   * Maximum value permitted.
+   * @default 100
+   */
   max?: number;
+  /**
+   * Minimum value permitted.
+   * @default 0
+   */
   min?: number;
+  /**
+   * Callback function that will be invoked when the slider value changes.
+   */
   onChange?: Function;
+  /**
+   * If true, a pin with numeric value label is shown when the slider thumb is pressed. Use for settings for which users need to know the exact value of the setting.
+   * @default false
+   */
   pinned?: boolean;
+  /**
+   * If true, the slider thumb snaps to tick marks evenly spaced based on the step property value.
+   * @default false
+   */
   snaps?: boolean;
+  /**
+   * Amount to vary the value when the knob is moved or increase/decrease is called.
+   * @default 0.01
+   */
   step?: number;
   /**
    * Classnames object defining the component style.
    */
   theme?: SliderTheme;
+  /**
+   * Current value of the slider.
+   * @default 0
+   */
   value?: number;
 }
 
diff --git a/components/snackbar/index.d.ts b/components/snackbar/index.d.ts
index 5d7429eca..91066ea01 100644
--- a/components/snackbar/index.d.ts
+++ b/components/snackbar/index.d.ts
@@ -1,27 +1,73 @@
 import __ReactToolbox from "../index.d.ts";
 
 export interface SnackbarTheme {
+  /**
+   * Added to the root element in case it's accept type.
+   */
   accept?: string;
+  /**
+   * Added to the root element when its active.
+   */
   active?: string;
+  /**
+   * Used for the button inside the component.
+   */
   button?: string;
+  /**
+   * Added to the root element in case it's cancel type.
+   */
   cancel?: string;
+  /**
+   * Used for the icon element.
+   */
   icon?: string;
+  /**
+   * Used for the label element.
+   */
   label?: string;
+  /**
+   * Used as the className for the root element of the component.
+   */
   snackbar?: string;
+  /**
+   * Added to the root element in case it's warning type.
+   */
   warning?: string;
 }
 
 interface SnackbarProps extends __ReactToolbox.Props {
+  /**
+   * Label for the action component inside the Snackbar.
+   */
   action?: string;
+  /**
+   * If true, the snackbar will be active.
+   * @default true
+   */
   active?: boolean;
+  /**
+   * String key for an icon or Element which will be displayed in left side of the snackbar.
+   */
   icon?: __React.ReactNode | string;
-  label?: string;
+  /**
+   * Text to display in the content. Required.
+   */
+  label: string;
+  /**
+   * Callback function when finish the set timeout.
+   */
   onTimeout?: Function;
   /**
    * Classnames object defining the component style.
    */
   theme?: SnackbarTheme;
+  /**
+   * Amount of time in milliseconds after the Snackbar will be automatically hidden.
+   */
   timeout?: number;
+  /**
+   * Indicates the action type. Can be accept, warning or cancel
+   */
   type?: "accept" | "cancel" | "warning";
 }
 
diff --git a/components/switch/index.d.ts b/components/switch/index.d.ts
index b09479e63..6639a9b1d 100644
--- a/components/switch/index.d.ts
+++ b/components/switch/index.d.ts
@@ -1,23 +1,70 @@
 import __ReactToolbox from "../index.d.ts";
 
 export interface SwitchTheme {
+  /**
+   * Used for the root element if the component is disabled.
+   */
   disabled?: string;
+  /**
+   * Used for the root element if the component is not disabled.
+   */
   field?: string;
+  /**
+   * Used for the input element.
+   */
   input?: string;
+  /**
+   * Used for a wrapper around the thumb if checked is false.
+   */
   off?: string;
+  /**
+   * Used for a wrapper around the thumb if checked is true.
+   */
   on?: string;
+  /**
+   * Used for the ripple inside the switch.
+   */
   ripple?: string;
+  /**
+   * Used for the text label element.
+   */
   text?: string;
+  /**
+   * Used for the thumb element.
+   */
   thumb?: string;
 }
 
 interface SwitchProps extends __ReactToolbox.Props {
+  /**
+   * If true, the switch will be enabled.
+   * @default false
+   */
   checked?: boolean;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
   disabled?: boolean;
+  /**
+   * The text string to use for the floating label element.
+   */
   label?: string;
+  /**
+   * The text string used as name of the input.
+   */
   name?: string;
+  /**
+   * Callback function that is fired when when the switch is blurred.
+   */
   onBlur?: __React.FocusEventHandler;
+  /**
+   * Callback function that is fired when the component's value changes.
+   */
   onChange?: __React.FormEventHandler;
+  /**
+   * Callback function that is fired when the switch is focused.
+   */
   onFocus?: __React.FocusEventHandler;
   /**
    * Classnames object defining the component style.
diff --git a/components/table/index.d.ts b/components/table/index.d.ts
index 86d3928fa..05b8fe4ac 100644
--- a/components/table/index.d.ts
+++ b/components/table/index.d.ts
@@ -1,21 +1,63 @@
 import __ReactToolbox from "../index.d.ts";
 
 export interface TableTheme {
+  /**
+   * It will be added to a row in case it is editable.
+   */
   editable?: string;
+  /**
+   * Used for the row element.
+   */
   row?: string;
+  /**
+   * It will be added to a row in case it is selectable.
+   */
   selectable?: string;
+  /**
+   * Added to a row in case it is selected.
+   */
   selected?: string;
+  /**
+   * Classname used for the root element.
+   */
   table?: string;
 }
 
 interface TableProps extends __ReactToolbox.Props {
+  /**
+   * If true, component will show a heading using model field names.
+   * @default true
+   */
   heading?: boolean;
+  /**
+   * Object describing the data model that represents each object in the source.
+   */
   model?: any;
+  /**
+   * Callback function that is fired when an item in a row changes. If set, rows are editable.
+   */
   onChange?: Function;
+  /**
+   * Callback function invoked when the row selection changes.
+   */
   onSelect?: __React.FormEventHandler;
+  /**
+   * If true, each row will display a checkbox to allow the user to select that one row.
+   * @default true
+   */
   selectable?: boolean;
+  /**
+   * If true, the header and each row will display a checkbox to allow the user to select multiple rows.
+   * @default true
+   */
   multiSelectable?: boolean;
+  /**
+   * Array of indexes of the items in the source that should appear as selected.
+   */
   selected?: any[];
+  /**
+   * Array of objects representing each item to show.
+   */
   source?: any[];
   /**
    * Classnames object defining the component style.
diff --git a/components/tabs/index.d.ts b/components/tabs/index.d.ts
index 7caed13c2..e5aeb2cdb 100644
--- a/components/tabs/index.d.ts
+++ b/components/tabs/index.d.ts
@@ -1,10 +1,25 @@
 import __ReactToolbox from "../index.d.ts";
 
 export interface TabsTheme {
+  /**
+   * Added to the active tab content and header.
+   */
   active?: string;
+  /**
+   * Used for the navigation element.
+   */
   navigation?: string;
+  /**
+   * Used for the moving underline element.
+   */
   pointer?: string;
+  /**
+   * Used as a root classname for the component.
+   */
   tabs?: string;
+  /**
+   * Used for the tab content element.
+   */
   tab?: string;
 }
 
@@ -13,8 +28,19 @@ interface TabsProps extends __ReactToolbox.Props {
    * Children to pass through the component.
    */
   children?: __React.ReactNode;
+  /**
+   * Disable the animation below the active tab.
+   * @default false
+   */
   disableAnimatedBottomBorder?: boolean;
+  /**
+   * Current
+   * @default 0
+   */
   index?: number;
+  /**
+   * Callback function that is fired when the tab changes.
+   */
   onChange?: Function;
   /**
    * Classnames object defining the component style.
@@ -25,18 +51,50 @@ interface TabsProps extends __ReactToolbox.Props {
 export class Tabs extends __React.Component<TabsProps, {}> { }
 
 export interface TabTheme {
+  /**
+   * Added to the navigation tab element in case it's active.
+   */
   active?: string;
+  /**
+   * Added to the navigation tab element in case it's disabled.
+   */
   disabled?: string;
+  /**
+   * Added to the navigation tab element in case it's hidden.
+   */
   hidden?: string;
+  /**
+   * Added to the navigation tab element in case it's active.
+   */
   label?: string;
 }
 
 interface TabProps extends __ReactToolbox.Props {
+  /**
+   * If true, the current component is visible.
+   */
   active?: boolean;
+  /**
+   * Additional class name to provide custom styling for the active tab.
+   */
   activeClassName?: string;
+  /**
+   * If true, the current component is not clickable.
+   * @default false
+   */
   disabled?: boolean;
+  /**
+   * If true, the current component is not visible.
+   * @default false
+   */
   hidden?: boolean;
-  label?: string;
+  /**
+   * Label text for navigation header. Required.
+   */
+  label: string;
+  /**
+   * Callback function that is fired when the tab is activated.
+   */
   onActive?: Function;
   /**
    * Classnames object defining the component style.
diff --git a/components/time_picker/index.d.ts b/components/time_picker/index.d.ts
index 6c5a7c3fc..0968a8c52 100644
--- a/components/time_picker/index.d.ts
+++ b/components/time_picker/index.d.ts
@@ -1,41 +1,129 @@
 import __ReactToolbox from "../index.d.ts";
 
 export interface TimePickerTheme {
+  /**
+   * Added to the number which is active in clock face.
+   */
   active?: string;
+  /**
+   * AM label in dialog header when mode is AM/PM.
+   */
   am?: string;
+  /**
+   * Added to the dialog when the selected format is AM.
+   */
   amFormat?: string;
+  /**
+   * Wrapper for AM and PM labels in header when mode is AM/PM.
+   */
   ampm?: string;
+  /**
+   * Used for buttons inside the dialog of the picker.
+   */
   button?: string;
+  /**
+   * Clock root class element.
+   */
   clock?: string;
+  /**
+   * Wrapper for the proper positioning of the clock.
+   */
   clockWrapper?: string;
+  /**
+   * Used for the dialog component.
+   */
   dialog?: string;
+  /**
+   * Used to style the clock face.
+   */
   face?: string;
+  /**
+   * Used for the clock's hand.
+   */
   hand?: string;
+  /**
+   * Dialog header wrapper class.
+   */
   header?: string;
+  /**
+   * Used for hours in dialog header.
+   */
   hours?: string;
+  /**
+   * Added to the dialog hours are displayed.
+   */
   hoursDisplay?: string;
+  /**
+   * Used for Input element that opens the picker.
+   */
   input?: string;
+  /**
+   * Used for the knob of the hand.
+   */
   knob?: string;
+  /**
+   * Used for minutes in dialog header.
+   */
   minutes?: string;
+  /**
+   * Added to the dialog minutes are displayed.
+   */
   minutesDisplay?: string;
+  /**
+   * Each of the numbers in the clock's face.
+   */
   number?: string;
+  /**
+   * Placeholder for the clock inside the dialog (inner wrapper).
+   */
   placeholder?: string;
+  /**
+   * PM label in dialog header when mode is AM/PM.
+   */
   pm?: string;
+  /**
+   * Added to the dialog when the selected format is PM.
+   */
   pmFormat?: string;
+  /**
+   * Is the : separator between hours and minutes in dialog header.
+   */
   separator?: string;
+  /**
+   * Added to the knob when no round number is selected.
+   */
   small?: string;
 }
 
 interface TimePickerProps {
+  /**
+   * Provide error text which will be displayed under the field.
+   */
   error?: string;
+  /**
+   * This class will be applied to Input component of TimePicker.
+   */
   inputClassName?: string;
+  /**
+   * Format to display the clock. It can be 24hr or ampm.
+   * @default false
+   */
   format?: "24hr" | "ampm";
+  /**
+   * The text string to use for the floating label element in the input component.
+   */
   label?: string;
+  /**
+   * Callback called when the picker value is changed.
+   */
   onChange?: Function;
   /**
    * Classnames object defining the component style.
    */
   theme?: TimePickerTheme;
+  /**
+   * Datetime object with currrently selected time.
+   */
   value?: Date;
 }
 
diff --git a/components/tooltip/index.d.ts b/components/tooltip/index.d.ts
index 76f9caec3..42a88593d 100644
--- a/components/tooltip/index.d.ts
+++ b/components/tooltip/index.d.ts
@@ -1,20 +1,45 @@
 import { Props } from "../index.d.ts";
 
 export interface TooltipTheme {
+  /**
+   * Added to the tooltip element.
+   */
   tooltip?: string;
+  /**
+   * Added to the root when the tooltip is active.
+   */
   tooltipActive?: string;
+  /**
+   * Wrapper for the root element used to position the tooltip.
+   */
   tooltipWrapper?: string;
 }
 
 interface TooltipProps {
+  /**
+   * Callback called when the mouse enters the Component.
+   */
   onMouseEnter?: __React.MouseEventHandler;
+  /**
+   * Callback called when the mouse leaves the Component.
+   */
   onMouseLeave?: __React.MouseEventHandler;
   /**
    * Classnames object defining the component style.
    */
   theme?: TooltipTheme;
+  /**
+   * The text string to use for the tooltip.
+   */
   tooltip?: string;
+  /**
+   * Amount of time in miliseconds spent before the tooltip is visible.
+   */
   tooltipDelay?: number;
+  /**
+   * If true, the Tooltip hides after a click in the host component.
+   * @default true
+   */
   tooltipHideOnClick?: boolean;
 }
 
diff --git a/lib/app_bar/index.d.ts b/lib/app_bar/index.d.ts
new file mode 100644
index 000000000..35fda69e4
--- /dev/null
+++ b/lib/app_bar/index.d.ts
@@ -0,0 +1,41 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface AppBarTheme {
+  /**
+   * Used for the component root element.
+   */
+  appBar?: string;
+  /**
+   * Added to the root element when the app bar is fixed.
+   */
+  fixed?: string;
+  /**
+   * Added to the root element when the app bar is flat.
+   */
+  flat?: string;
+}
+
+interface AppBarProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Determine if the bar should have position fixed or relative.
+   * @default false
+   */
+  fixed?: boolean;
+  /**
+   * If true, the AppBar shows a shadow.
+   * @default false
+   */
+  flat?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: AppBarTheme;
+}
+
+export class AppBar extends __React.Component<AppBarProps, {}> { }
+
+export default AppBar;
diff --git a/lib/autocomplete/index.d.ts b/lib/autocomplete/index.d.ts
new file mode 100644
index 000000000..f1b33954d
--- /dev/null
+++ b/lib/autocomplete/index.d.ts
@@ -0,0 +1,105 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface AutocompleteTheme {
+  /**
+   * Used for a suggestion when it's active.
+   */
+  active?: string;
+  /**
+   * Used for the root element.
+   */
+  autocomplete?: string;
+  /**
+   * Used when the input is focused.
+   */
+  focus?: string;
+  /**
+   * Used to style the Input component.
+   */
+  input?: string;
+  /**
+   * Used for the label.
+   */
+  label?: string;
+  /**
+   * Used to style each suggestion.
+   */
+  suggestion?: string;
+  /**
+   * Used to style the suggestions container.
+   */
+  suggestions?: string;
+  /**
+   * Used for the suggestions when it's opening to the top.
+   */
+  up?: string;
+  /**
+   * Classname used for a single value.
+   */
+  value?: string;
+  /**
+   * Classname used for the values container.
+   */
+  values?: string;
+}
+
+interface AutocompleteProps extends __ReactToolbox.Props {
+  /**
+   * Determines the opening direction. It can be auto, up or down.
+   * @default auto
+   */
+  direction?: "auto" | "up" | "down";
+  /**
+   * If true, component will be disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Sets the error string for the internal input element.
+   * @default false
+   */
+  error?: string;
+  /**
+   * The text string to use for the floating label element.
+   */
+  label?: string;
+  /**
+   * If true, component can hold multiple values.
+   */
+  multiple?: boolean;
+  /**
+   * Callback function that is fired when the components's value changes.
+   * @default auto
+   */
+  onChange?: __React.FormEventHandler;
+  /**
+   * Determines if the selected list is shown above or below input. It can be above or below.
+   * @default above
+   */
+  selectedPosition?: "above" | "below";
+  /**
+   * If true, the list of suggestions will not be filtered when a value is selected.
+   * @default false
+   */
+  showSuggestionsWHenValueIsSet?: boolean;
+  /**
+   * Object of key/values or array representing all items suggested.
+   */
+  source?: any;
+  /**
+   * Determines how suggestions are supplied.
+   * @default start
+   */
+  suggestionMatch?: "start" | "anywhere" | "word";
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: AutocompleteTheme;
+  /**
+   * Value or array of values currently selected component.
+   */
+  value?: any;
+}
+
+export class Autocomplete extends __React.Component<AutocompleteProps, {}> { }
+
+export default Autocomplete;
diff --git a/lib/avatar/index.d.ts b/lib/avatar/index.d.ts
new file mode 100644
index 000000000..0d4fbd238
--- /dev/null
+++ b/lib/avatar/index.d.ts
@@ -0,0 +1,47 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface AvatarTheme {
+  /**
+   * Used for the root class of the element.
+   */
+  avatar?: string;
+  /**
+   * Added to the root element when the component has image.
+   */
+  image?: string;
+  /**
+   * Used for the root element if the component shows the letter.
+   */
+  letter?: string;
+}
+
+interface AvatarProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Set to true if your image is not squared so it will be used as a cover for the element.
+   */
+  cover?: boolean;
+  /**
+   * A key to identify an Icon from Material Design Icons or a custom Icon Element.
+   */
+  icon?: __React.ReactNode | string;
+  /**
+   * An image source or an image element.
+   */
+  image?: __React.ReactNode | string;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: AvatarTheme;
+  /**
+   * A title for the image. If no image is provided, the first letter will be displayed as the avatar.
+   */
+  title?: string;
+}
+
+export class Avatar extends __React.Component<AvatarProps, {}> { }
+
+export default Avatar;
diff --git a/lib/button/index.d.ts b/lib/button/index.d.ts
new file mode 100644
index 000000000..60721b880
--- /dev/null
+++ b/lib/button/index.d.ts
@@ -0,0 +1,227 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface ButtonTheme {
+  /**
+   * Used for the root in case button is accent.
+   */
+  accent?: string;
+  /**
+   * Used for the root element in any button.
+   */
+  button?: string;
+  /**
+   * Used when the button is flat for the root element.
+   */
+  flat?: string;
+  /**
+   * Used when the button is floating for the root element.
+   */
+  floating?: string;
+  /**
+   * For the icon inside a button.
+   */
+  icon?: string;
+  /**
+   * Used when colors are inverted.
+   */
+  inverse?: string;
+  /**
+   * Used for mini floating buttons.
+   */
+  mini?: string;
+  /**
+   * Used for neutral colored buttons.
+   */
+  neutral?: string;
+  /**
+   * Used for primary buttons when button is primary.
+   */
+  primary?: string;
+  /**
+   * Used when the button is raised for root element.
+   */
+  raised?: string;
+  /**
+   * Used for the ripple element.
+   */
+  rippleWrapper?: string;
+  /**
+   * Used for toggle buttons in the root element.
+   */
+  toggle?: string;
+}
+
+interface ButtonProps extends __ReactToolbox.Props {
+  /**
+   * Indicates if the button should have accent color.
+   * @default false
+   */
+  accent?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If true, the button will have a flat look.
+   * @default false
+   */
+  flat?: boolean;
+  /**
+   * If true, the button will have a floating look.
+   * @default false
+   */
+  floating?: boolean;
+  /**
+   * Creates a link for the button.
+   */
+  href?: string;
+  /**
+   * Value of the icon (See Font Icon Component).
+   */
+  icon?: __React.ReactNode | string;
+  /**
+   * If true, the neutral colors are inverted. Useful to put a button over a dark background.
+   */
+  inverse?: boolean;
+  /**
+   * The text string to use for the name of the button.
+   */
+  label?: string;
+  /**
+   * To be used with floating button. If true, the button will be smaller.
+   * @default false
+   */
+  mini?: boolean;
+  /**
+   * Set it to false if you don't want the neutral styles to be included.
+   * @default true
+   */
+  neutral?: boolean;
+  /**
+   * Fires after the mouse leaves the Component.
+   */
+  onMouseLeave?: __React.MouseEventHandler;
+  /**
+   * Fires after the mouse is released from the Component.
+   */
+  OnMouseUp?: __React.MouseEventHandler;
+  /**
+   * Indicates if the button should have primary color.
+   * @default false
+   */
+  primary?: boolean;
+  /**
+   * If true, the button will have a raised look.
+   * @default false
+   */
+  raised?: boolean;
+  /**
+   * If true, component will have a ripple effect on click.
+   * @default true
+   */
+  ripple?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ButtonTheme;
+}
+
+export class Button extends __React.Component<ButtonProps, {}> { }
+
+export interface IconButtonTheme {
+  /**
+   * Used for the root in case button is accent.
+   */
+  accent?: string;
+  /**
+   * Used for the root element in any button.
+   */
+  button?: string;
+  /**
+   * For the icon inside a button.
+   */
+  icon?: string;
+  /**
+   * Used when colors are inverted.
+   */
+  inverse?: string;
+  /**
+   * Used for neutral colored buttons.
+   */
+  neutral?: string;
+  /**
+   * Used for primary buttons when button is primary.
+   */
+  primary?: string;
+  /**
+   * Used for the ripple element.
+   */
+  rippleWrapper?: string;
+  /**
+   * Used for toggle buttons in the root element.
+   */
+  toggle?: string;
+}
+
+interface IconButtonProps extends __ReactToolbox.Props {
+  /**
+   * Indicates if the button should have accent color.
+   * @default false
+   */
+  accent?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Creates a link for the button.
+   */
+  href?: string;
+  /**
+   * Value of the icon (See Font Icon Component).
+   */
+  icon?: __React.ReactNode | string;
+  /**
+   * If true, the neutral colors are inverted. Useful to put a button over a dark background.
+   */
+  inverse?: boolean;
+  /**
+   * Set it to false if you don't want the neutral styles to be included.
+   * @default true
+   */
+  neutral?: boolean;
+  /**
+   * Fires after the mouse leaves the Component.
+   */
+  onMouseLeave?: __React.MouseEventHandler;
+  /**
+   * Fires after the mouse is released from the Component.
+   */
+  OnMouseUp?: __React.MouseEventHandler;
+  /**
+   * Indicates if the button should have primary color.
+   * @default false
+   */
+  primary?: boolean;
+  /**
+   * If true, component will have a ripple effect on click.
+   * @default true
+   */
+  ripple?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: IconButtonTheme;
+}
+
+export class IconButton extends __React.Component<IconButtonProps, {}> { }
diff --git a/lib/card/index.d.ts b/lib/card/index.d.ts
new file mode 100644
index 000000000..a05b6a703
--- /dev/null
+++ b/lib/card/index.d.ts
@@ -0,0 +1,102 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface CardTheme {
+  card?: string;
+  raised?: string;
+}
+
+interface CardProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  raised?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: CardTheme;
+}
+
+export class Card extends __React.Component<CardProps, {}> { }
+
+export interface CardActionsTheme {
+  cardActions?: string;
+}
+
+interface CardActionsProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: CardActionsTheme;
+}
+
+export class CardActions extends __React.Component<CardActionsProps, {}> { }
+
+export interface CardMediaTheme {
+  cardMedia?: string;
+  content?: string;
+  contentOverlay?: string;
+  square?: string;
+  wide?: string;
+}
+
+interface CardMediaProps extends __ReactToolbox.Props {
+  aspectRatio?: "wide" | "square";
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  color?: string;
+  contentOverlay?: boolean;
+  image?: __React.ReactNode | string;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: CardMediaTheme;
+}
+
+export class CardMedia extends __React.Component<CardMediaProps, {}> { }
+
+export interface CardTextTheme {
+  cardText?: string;
+}
+
+interface CardTextProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: CardTextTheme;
+}
+
+export class CardText extends __React.Component<CardTextProps, {}> { }
+
+export interface CardTitleTheme {
+  large?: string;
+  title?: string;
+  small?: string;
+  subtitle?: string;
+}
+
+interface CardTitleProps extends __ReactToolbox.Props {
+  avatar?: __React.ReactNode | string;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  subtitle?: __React.ReactNode | string;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: CardTitleTheme;
+  title?: __React.ReactNode | string;
+}
+
+export class CardTitle extends __React.Component<CardTitleProps, {}> { }
diff --git a/lib/checkbox/index.d.ts b/lib/checkbox/index.d.ts
new file mode 100644
index 000000000..2f5d2d678
--- /dev/null
+++ b/lib/checkbox/index.d.ts
@@ -0,0 +1,69 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface CheckboxTheme {
+  /**
+   * Used as root in the check element.
+   */
+  check?: string;
+  /**
+   * Used for the check element when it's checked.
+   */
+  checked?: string;
+  /**
+   * Used when the component is disabled.
+   */
+  disabled?: string;
+  /**
+   * Used as the root class of the component.
+   */
+  field?: string;
+  /**
+   * Used for the input element.
+   */
+  input?: string;
+  /**
+   * Used for the ripple component.
+   */
+  ripple?: string;
+  /**
+   * Used for the text label.
+   */
+  text?: string;
+}
+
+interface CheckboxProps extends __ReactToolbox.Props {
+  /**
+   * Value for the checkbox, can be true or false.
+   * @default false
+   */
+  checked?: boolean;
+  /**
+   * If true, the checkbox shown as disabled and cannot be modified.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Text label to attach next to the checkbox element.
+   */
+  label?: __React.ReactNode | string;
+  /**
+   * The name of the field to set in the input checkbox.
+   */
+  name?: string;
+  /**
+   * Callback called when the checkbox is blurred.
+   */
+  onBlur?: __React.FocusEventHandler;
+  /**
+   * Callback called when the checkbox value is changed.
+   */
+  onChange?: __React.MouseEventHandler;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: CheckboxTheme;
+}
+
+export class Checkbox extends __React.Component<CheckboxProps, {}> { }
+
+export default Checkbox;
diff --git a/lib/chip/index.d.ts b/lib/chip/index.d.ts
new file mode 100644
index 000000000..4edcb6859
--- /dev/null
+++ b/lib/chip/index.d.ts
@@ -0,0 +1,52 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface ChipTheme {
+  /**
+   * Added to the root element when the component includes an avatar.
+   */
+  avatar?: string;
+  /**
+   * Used for the root element.
+   */
+  chip?: string;
+  /**
+   * Added to the root element when the component is deletable.
+   */
+  deletable?: string;
+  /**
+   * Used for the delete element wrapper.
+   */
+  delete?: string;
+  /**
+   * Used for the delete icon.
+   */
+  deleteIcon?: string;
+  /**
+   * Used for the delete svg inner layer.
+   */
+  deleteX?: string;
+}
+
+interface ChipProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * If true, the chip will be rendered with a delete icon.
+   * @default false
+   */
+  deleteable?: boolean;
+  /**
+   * Callback to be invoked when the delete icon is clicked.
+   */
+  onDeleteClick?: __React.MouseEventHandler;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ChipTheme;
+}
+
+export class Chip extends __React.Component<ChipProps, {}> { }
+
+export default Chip;
diff --git a/lib/date_picker/index.d.ts b/lib/date_picker/index.d.ts
new file mode 100644
index 000000000..1722fdacc
--- /dev/null
+++ b/lib/date_picker/index.d.ts
@@ -0,0 +1,148 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface DatePickerTheme {
+  /**
+   * Used for the active day and year.
+   */
+  active?: string;
+  /**
+   * Used for the buttons in the dialog.
+   */
+  button?: string;
+  /**
+   * Used for the calendar root element.
+   */
+  calendar?: string;
+  /**
+   * Used as wrapper for the calendar component inside dialog.
+   */
+  calendarWrapper?: string;
+  /**
+   * Used for the date element inside header.
+   */
+  date?: string;
+  /**
+   * Used for the day element inside the calendar.
+   */
+  day?: string;
+  /**
+   * Used for the list of days inside a month.
+   */
+  days?: string;
+  /**
+   * Used for the dialog component.
+   */
+  dialog?: string;
+  /**
+   * Added to day element when day is disabled.
+   */
+  disabled?: string;
+  /**
+   * Used for the dialog header,.
+   */
+  header?: string;
+  /**
+   * Used for Input element that opens the picker.
+   */
+  input?: string;
+  /**
+   * Used for the month root element.
+   */
+  month?: string;
+  /**
+   * Added to the root dialog when months are displayed.
+   */
+  monthsDisplay?: string;
+  /**
+   * Used for the next month icon.
+   */
+  next?: string;
+  /**
+   * Used for the prev month icon.
+   */
+  prev?: string;
+  /**
+   * Used for the month title element.
+   */
+  title?: string;
+  /**
+   * Used for the weekdays wrapper.
+   */
+  week?: string;
+  /**
+   * Used for the year element inside header.
+   */
+  year?: string;
+  /**
+   * Used for the years list in years view.
+   */
+  years?: string;
+  /**
+   * Added to the root dialog when years are displayed.
+   */
+  yearsDisplay?: string;
+}
+
+interface DatePickerProps extends __ReactToolbox.Props {
+  /**
+   * Automatically selects a date upon clicking on a day
+   * @default false
+   */
+  autoOk?: boolean;
+  /**
+   * Give an error node to display under the field.
+   */
+  error?: string;
+  /**
+   * A key to identify an Icon from Material Design Icons or a custom Icon Element.
+   */
+  icon?: __React.ReactNode | string;
+  /**
+   * This class will be applied to Input component of DatePicker.
+   */
+  inputClassName?: string;
+  /**
+   * Function to format the date displayed on the input.
+   */
+  inputFormat?: Function;
+  /**
+   * The text string to use for the floating label element in the input component.
+   */
+  label?: string;
+  /**
+   * Date object with the maximum selectable date.
+   */
+  maxDate?: Date;
+  /**
+   * Date object with the minimum selectable date.
+   */
+  minDate?: Date;
+  /**
+   * Name for the input field.
+   */
+  name?: string;
+  /**
+   * Callback called when the picker value is changed.
+   */
+  onChange?: __React.MouseEventHandler;
+  /**
+   * Callback called when the ESC key is pressed with the overlay active.
+   */
+  onEscKeyDown?: __React.KeyboardEventHandler;
+  /**
+   * Callback to be invoked when the dialog overlay is clicked.
+   */
+  onOverlayClick?: __React.MouseEventHandler;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: DatePickerTheme;
+  /**
+   * Date object with the currently selected date.
+   */
+  value?: Date | string;
+}
+
+export class DatePicker extends __React.Component<DatePickerProps, {}> { }
+
+export default DatePicker;
diff --git a/lib/dialog/index.d.ts b/lib/dialog/index.d.ts
new file mode 100644
index 000000000..1fd938766
--- /dev/null
+++ b/lib/dialog/index.d.ts
@@ -0,0 +1,92 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface DialogTheme {
+  /**
+   * Used for the root when the dialog is active.
+   */
+  active?: string;
+  /**
+   * Used to wrap the dialog body.
+   */
+  body?: string;
+  /**
+   * Used in buttons when the dialog implements actions.
+   */
+  button?: string;
+  /**
+   * Used for the root element.
+   */
+  dialog?: string;
+  /**
+   * Used for the navigation element when it implements actions.
+   */
+  navigation?: string;
+  /**
+   * Used for the title element of the dialog.
+   */
+  title?: string;
+}
+
+interface DialogActionProps {
+  /**
+   * The text string to use for the name of the button.
+   */
+  label?: string;
+  /**
+   * Callback called when the component is clicked.
+   */
+  onClick?: __React.MouseEventHandler;
+}
+
+interface DialogProps extends __ReactToolbox.Props {
+  /**
+   * A array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons.
+   */
+  actions?: DialogActionProps[];
+  /**
+   * If true, the dialog will be active.
+   * @default false
+   */
+  active?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Callback called when the ESC key is pressed with the overlay active.
+   */
+  onEscKeyDown?: __React.KeyboardEventHandler;
+  /**
+   * Callback to be invoked when the dialog overlay is clicked.
+   */
+  onOverlayClick?: __React.MouseEventHandler;
+  /**
+   * Callback called when the mouse button is pressed on the overlay.
+   */
+  onOverlayMouseDown?: __React.MouseEventHandler;
+  /**
+   * Callback called when the mouse is moving over the overlay.
+   */
+  onOverlayMouseMove?: __React.MouseEventHandler;
+  /**
+   * Callback called when the mouse button is released over the overlay.
+   */
+  onOverlayMouseUp?: __React.MouseEventHandler;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: DialogTheme;
+  /**
+   * The text string to use as standar title of the dialog.
+   */
+  title?: string;
+  /**
+   * Used to determine the size of the dialog. It can be small, normal or large.
+   * @default normal
+   */
+  type?: string;
+}
+
+export class Dialog extends __React.Component<DialogProps, {}> { }
+
+export default Dialog;
diff --git a/lib/drawer/index.d.ts b/lib/drawer/index.d.ts
new file mode 100644
index 000000000..3832c6e47
--- /dev/null
+++ b/lib/drawer/index.d.ts
@@ -0,0 +1,53 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface DrawerTheme {
+  /**
+   * Used for the root class when the drawer is active.
+   */
+  active?: string;
+  /**
+   * Used for the drawer content.
+   */
+  content?: string;
+  /**
+   * Root class.
+   */
+  drawer?: string;
+  /**
+   * Added to the root class when drawer is to the left.
+   */
+  left?: string;
+  /**
+   * Added to the root class when drawer is to the right.
+   */
+  right?: string;
+}
+
+interface DrawerProps extends __ReactToolbox.Props {
+  /**
+   * If true, the drawer will be visible.
+   * @default false
+   */
+  active?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Callback function to be invoked when the overlay is clicked.
+   */
+  onOverlayClick?: __React.MouseEventHandler;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: DrawerTheme;
+  /**
+   * Type of drawer. It can be left or right to display the drawer on the left or right side of the screen.
+   * @default left
+   */
+  type?: "left" | "right";
+}
+
+export class Drawer extends __React.Component<DrawerProps, {}> { }
+
+export default Drawer;
diff --git a/lib/dropdown/index.d.ts b/lib/dropdown/index.d.ts
new file mode 100644
index 000000000..886b0dff9
--- /dev/null
+++ b/lib/dropdown/index.d.ts
@@ -0,0 +1,114 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface DropdownTheme {
+  /**
+   * Added to the root element when the dropdown is active.
+   */
+  active?: string;
+  /**
+   * Added to the root element when it's disabled.
+   */
+  disabled?: string;
+  /**
+   * Root element class.
+   */
+  dropdown?: string;
+  /**
+   * Used for the error element.
+   */
+  error?: string;
+  /**
+   * Added to the inner wrapper if it's errored.
+   */
+  errored?: string;
+  /**
+   * Used for the inner wrapper of the component.
+   */
+  field?: string;
+  /**
+   * Used for the the label element.
+   */
+  label?: string;
+  /**
+   * Used to highlight the selected value.
+   */
+  selected?: string;
+  /**
+   * Used as a wrapper for the given template value.
+   */
+  templateValue?: string;
+  /**
+   * Added to the root element when it's opening up.
+   */
+  up?: string;
+  /**
+   * Used for each value in the dropdown component.
+   */
+  value?: string;
+  /**
+   * Used for the list of values.
+   */
+  values?: string;
+}
+
+interface DropdownProps extends __ReactToolbox.Props {
+  /**
+   * If true the dropdown will preselect the first item if the supplied value matches none of the options' values.
+   * @default true
+   */
+  allowBlank?: boolean;
+  /**
+   * If true, the dropdown will open up or down depending on the position in the screen.
+   * @default true
+   */
+  auto?: boolean;
+  /**
+   * Set the component as disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Give an error string to display under the field.
+   */
+  error?: string;
+  /**
+   * The text string to use for the floating label element.
+   */
+  label?: string;
+  /**
+   * Name for the input field.
+   */
+  name?: string;
+  /**
+   * Callback function that is fired when the component is blurred.
+   */
+  onBlur?: __React.FocusEventHandler;
+  /**
+   * Callback function that is fired when the component's value changes.
+   */
+  onChange?: __React.FormEventHandler;
+  /**
+   * Callback function that is fired when the component is focused.
+   */
+  onFocus?: __React.FocusEventHandler;
+  /**
+   * Array of data objects with the data to represent in the dropdown.
+   */
+  source: any[];
+  /**
+   * Callback function that returns a JSX template to represent the element.
+   */
+  template?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: DropdownTheme;
+  /**
+   * Default value using JSON data.
+   */
+  value?: string | number;
+}
+
+export class Dropdown extends __React.Component<DropdownProps, {}> { }
+
+export default Dropdown;
diff --git a/lib/font_icon/index.d.ts b/lib/font_icon/index.d.ts
new file mode 100644
index 000000000..c3f05587a
--- /dev/null
+++ b/lib/font_icon/index.d.ts
@@ -0,0 +1,16 @@
+import __ReactToolbox from "../index.d.ts";
+
+interface FontIconProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * The key string for the icon you want be displayed.
+   */
+  value?: __React.ReactNode | string;
+}
+
+export class FontIcon extends __React.Component<FontIconProps, {}> { }
+
+export default FontIcon;
diff --git a/lib/index.d.ts b/lib/index.d.ts
new file mode 100644
index 000000000..7739a9d4e
--- /dev/null
+++ b/lib/index.d.ts
@@ -0,0 +1,22 @@
+export declare namespace __ReactToolbox {
+  interface Props {
+    /**
+     * Set a class for the root component.
+     */
+    className?: string;
+    /**
+     * Key used to uniquely identify the element within an Array.
+     */
+    key?: string | number;
+    /**
+     * Callback called when the component is clicked.
+     */
+    onClick?: __React.MouseEventHandler;
+    /**
+     * Set inline style for the root component.
+     */
+    style?: __React.CSSProperties;
+  }
+}
+
+export default __ReactToolbox;
diff --git a/lib/input/index.d.ts b/lib/input/index.d.ts
new file mode 100644
index 000000000..719ea9287
--- /dev/null
+++ b/lib/input/index.d.ts
@@ -0,0 +1,135 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface InputTheme {
+  /**
+   * Used for the bar under the input.
+   */
+  bar?: string;
+  /**
+   * Used for the counter element.
+   */
+  counter?: string;
+  /**
+   * Added to the root class when input is disabled.
+   */
+  disabled?: string;
+  /**
+   * Used for the text error.
+   */
+  error?: string;
+  /**
+   * Added to the root class when input is errored.
+   */
+  errored?: string;
+  /**
+   * Used when the input is hidden.
+   */
+  hidden?: string;
+  /**
+   * Used for the hint text.
+   */
+  hint?: string;
+  /**
+   * Used for the icon in case the input has icon.
+   */
+  icon?: string;
+  /**
+   * Used as root class for the component.
+   */
+  input?: string;
+  /**
+   * Used for the HTML input element.
+   */
+  inputElement?: string;
+  /**
+   * Used in case the input is required.
+   */
+  required?: string;
+  /**
+   * Added to the root class if the input has icon.
+   */
+  withIcon?: string;
+}
+
+interface InputProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Give an error node to display under the field.
+   */
+  error?: string;
+  /**
+   * Indicates if the label is floating in the input field or not.
+   * @default true
+   */
+  floating?: boolean;
+  /**
+   * The text string to use for hint text element.
+   */
+  hint?: string;
+  /**
+   * Name of an icon to use as a label for the input.
+   */
+  icon?: __React.ReactNode | string;
+  /**
+   * The text string to use for the floating label element.
+   */
+  label?: string;
+  /**
+   * Specifies the maximum number of characters allowed in the component
+   */
+  maxLength?: number;
+  /**
+   * If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.
+   * @default false
+   */
+  multiLine?: boolean;
+  /**
+   * Name for the input field.
+   */
+  name?: string;
+  /**
+   * Callback function that is fired when component is blurred.
+   */
+  onBlur?: __React.FocusEventHandler;
+  /**
+   * Callback function that is fired when the component's value changes
+   */
+  onChange?: __React.FormEventHandler;
+  /**
+   * Callback function that is fired when component is focused.
+   */
+  onFocus?: __React.FocusEventHandler;
+  /**
+   * Callback function that is fired when a key is pressed.
+   */
+  onKeyPress?: __React.MouseEventHandler;
+  /**
+   * If true, the html input has a required attribute.
+   * @default false
+   */
+  required?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: InputTheme;
+  /**
+   * Type of the input element. It can be a valid HTML5 input type
+   */
+  type?: string;
+  /**
+   * Current value of the input element.
+   */
+  value?: any;
+}
+
+export class Input extends __React.Component<InputProps, {}> { }
+
+export default Input;
diff --git a/lib/layout/index.d.ts b/lib/layout/index.d.ts
new file mode 100644
index 000000000..ad2505d7f
--- /dev/null
+++ b/lib/layout/index.d.ts
@@ -0,0 +1,193 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface LayoutTheme {
+  /**
+   * Class used in the container to position and align inner items.
+   */
+  layout?: string;
+}
+
+interface LayoutProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: [NavDrawer | Panel | Sidebar];
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: LayoutTheme;
+}
+
+export class Layout extends __React.Component<LayoutProps, {}> { }
+
+export interface NavDrawerTheme {
+  /**
+   * Used when the drawer is active.
+   */
+  active?: string;
+  /**
+   * Used for the content of the drawer.
+   */
+  drawerContent?: string;
+  /**
+   * Added to the root class for large drawer.
+   */
+  lgPermangent?: string;
+  /**
+   * Added to the root class for medium drawer.
+   */
+  mdPermangent?: string;
+  /**
+   * Root class for the drawer.
+   */
+  navDrawer?: string;
+  /**
+   * Added to the root class if positioning is pinned.
+   */
+  pinned?: string;
+  /**
+   * Used as a wrapper for the drawer content.
+   */
+  scrim?: string;
+  /**
+   * Added to the drawer content if its scrollable.
+   */
+  scrollY?: string;
+  /**
+   * Added to the root class for small drawer.
+   */
+  smPermanent?: string;
+  /**
+   * Added to the root class if width is wide.
+   */
+  wide?: string;
+  /**
+   * Added to the root class for extra big drawer.
+   */
+  xlPermanent?: string;
+  /**
+   * Added to the root class for super big drawer.
+   */
+  xxlPermangent?: string;
+  /**
+   * Added to the root class for largest possible drawer.
+   */
+  xxxlPermangent?: string;
+}
+
+interface NavDrawerProps extends __ReactToolbox.Props {
+  /**
+   * If true, the drawer will be shown as an overlay.
+   * @default false
+   */
+  active?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Callback function to be invoked when the overlay is clicked.
+   */
+  onOverlayClick?: __React.MouseEventHandler;
+  /**
+   * The breakpoint at which the drawer is automatically pinned.
+   */
+  permanentAt?: "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
+  /**
+   * If true, the drawer will be pinned open. pinned takes precedence over active.
+   * @default false
+   */
+  pinned?: boolean;
+  /**
+   * If true, the drawer will vertically scroll all content.
+   * @default false
+   */
+  scrollY?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: NavDrawerTheme;
+  /**
+   * 320px or 400px. Only applicable above the sm breakpoint.
+   * @default normal
+   */
+  width?: "normal" | "wide";
+}
+
+export class NavDrawer extends __React.Component<NavDrawerProps, {}> { }
+
+export interface PanelTheme {
+  /**
+   * Used as the root class of the panel component.
+   */
+  panel?: string;
+  /**
+   * Used in case the panel is scrollable.
+   */
+  scrollY?: string;
+}
+
+interface PanelProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * If true, the panel will vertically scroll all content.
+   * @default false
+   */
+  scrollY?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: PanelTheme;
+}
+
+export class Panel extends __React.Component<PanelProps, {}> { }
+
+export interface SidebarTheme {
+  /**
+   * Added to the root class if sidebar is pinned.
+   */
+  pinned?: string;
+  /**
+   * Add to the content of sidebar if its scrollable.
+   */
+  scrollY?: string;
+  /**
+   * Root class of the sidebar.
+   */
+  sidebar?: string;
+  /**
+   * Used in for the content element of the sidebar.
+   */
+  sidebarContent?: string;
+}
+
+interface SidebarProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * If true, the sidebar will be pinned open.
+   * @default false
+   */
+  pinned?: boolean;
+  /**
+   * If true, the sidebar will vertically scroll all content
+   * @default false
+   */
+  scrollY?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: SidebarTheme;
+  /**
+   * Width in standard increments (1-12) or percentage (25, 33, 50, 66, 75, 100)
+   * @default 5
+   */
+  width?: number; // 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 25 | 33 | 50 | 66 | 75 | 100;
+}
+
+export class Sidebar extends __React.Component<SidebarProps, {}> { }
diff --git a/lib/link/index.d.ts b/lib/link/index.d.ts
new file mode 100644
index 000000000..00e18f3d0
--- /dev/null
+++ b/lib/link/index.d.ts
@@ -0,0 +1,50 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface LinkTheme {
+  /**
+   * Added to the root element if the Link is active.
+   */
+  active?: string;
+  /**
+   * Used for the icon element if it's present.
+   */
+  icon?: string;
+  /**
+   * Used for the root element.
+   */
+  link?: string;
+}
+
+interface LinkProps extends __ReactToolbox.Props {
+  /**
+   * If true, adds active style to link.
+   * @default false
+   */
+  active?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Sets a count number.
+   */
+  count?: number;
+  /**
+   * Sets the anchor link.
+   */
+  href?: string;
+  /**
+   * An icon key string to include a FontIcon component in front of the text.
+   */
+  icon?: __React.ReactNode | string;
+  /**
+   * The text string used for the text content of the link.
+   */
+  label?: string;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: LinkTheme;
+}
+
+export class Link extends __React.Component<LinkProps, {}> { }
diff --git a/lib/list/index.d.ts b/lib/list/index.d.ts
new file mode 100644
index 000000000..cd0f6e7aa
--- /dev/null
+++ b/lib/list/index.d.ts
@@ -0,0 +1,264 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface ListTheme {
+  /**
+   * Used for the root element of the list.
+   */
+  list?: string;
+}
+
+interface ListProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * If true, each element in the list will have a ripple effect on click
+   * @default false
+   */
+  ripple?: boolean;
+  /**
+   * If true, the elements in the list will display a hover effect and a pointer cursor.
+   * @default false
+   */
+  selectable?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ListTheme;
+}
+
+export class List extends __React.Component<ListProps, {}> { }
+
+export interface ListCheckboxTheme {
+  /**
+   * Used as a wrapper class for the subheader element.
+   */
+  checkbox?: string;
+  /**
+   * Added to the checkbox element.
+   */
+  checkboxItem?: string;
+  /**
+   * Added to the inner content if its a disabled item.
+   */
+  disabled?: string;
+  /**
+   * Used for the inner content of a list item.
+   */
+  item?: string;
+  /**
+   * Used for the content wrapper element in list item.
+   */
+  itemContentRoot?: string;
+  /**
+   * Added to the text inside of the list item.
+   */
+  itemText?: string;
+  /**
+   * Added to the content wrapper element if size is large.
+   */
+  large?: string;
+  /**
+   * Added to the text inside of the list item if its primary.
+   */
+  primary?: string;
+}
+
+interface ListCheckboxProps extends __ReactToolbox.Props {
+  /**
+   * Main text of the item. Required.
+   */
+  caption?: string;
+  /**
+   * If true the checkbox appears checked by default.
+   * @default false
+   */
+  checked?: boolean;
+  /**
+   * If true, the item is displayed as disabled and it's not clickable.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Secondary text to display under the caption.
+   */
+  legend?: string;
+  /**
+   * Name for the checkbox input item.
+   */
+  name?: string;
+  /**
+   * Callback called when the input element is blurred.
+   */
+  onBlur?: __React.FocusEventHandler;
+  /**
+   * Callback called when the input element is changed.
+   */
+  onChange?: __React.FormEventHandler;
+  /**
+   * Callback called when the input element is focused.
+   */
+  onFocus?: __React.FocusEventHandler;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ListCheckboxTheme;
+}
+
+export class ListCheckbox extends __React.Component<ListCheckboxProps, {}> { }
+
+export interface ListDividerTheme {
+  /**
+   * Added to the root element.
+   */
+  divider?: string;
+  /**
+   * Added to root element if inset is true.
+   */
+  inset?: string;
+}
+
+interface ListDividerProps extends __ReactToolbox.Props {
+  /**
+   * If true, will leave a space at the left side.
+   */
+  inset?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ListDividerTheme;
+}
+
+export class ListDivider extends __React.Component<ListDivider, {}> { }
+
+export interface ListItemTheme {
+  /**
+   * Added to the inner content if its a disabled item.
+   */
+  disabled?: string;
+  /**
+   * Used for the inner content of a list item.
+   */
+  item?: string;
+  /**
+   * Used for each action element (left/right).
+   */
+  itemAction?: string;
+  /**
+   * Used for the content wrapper element in list item.
+   */
+  itemContentRoot?: string;
+  /**
+   * Added to the text inside of the list item.
+   */
+  itemText?: string;
+  /**
+   * Added to the content wrapper element if size is large.
+   */
+  large?: string;
+  /**
+   * Added for the element that wraps left actions.
+   */
+  left?: string;
+  /**
+   * Used for the root element of the list.
+   */
+  listItem?: string;
+  /**
+   * Added to the text inside of the list item if its primary.
+   */
+  primary?: string;
+  /**
+   * Added for the element that wraps right actions.
+   */
+  right?: string;
+  /**
+   * Added to the inner content if its a selectable item.
+   */
+  selectable?: string;
+}
+
+interface ListItemProps extends __ReactToolbox.Props {
+  /**
+   * A string URL to specify an avatar in the left side of the item.
+   */
+  avatar?: __React.ReactNode | string;
+  /**
+   * Main text of the item.
+   */
+  caption?: string;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * If true, the item is displayed as disabled and is not clickable.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * An element that will be displayed as the item. If set, this will override caption and legend.
+   */
+  itemContent?: __React.ReactNode;
+  /**
+   * A list of elements that are placed on the left side of the item and after the avatar attribute.
+   */
+  leftActions?: __React.ReactNode;
+  /**
+   * A string key of a font icon or element to display an icon in the left side of the item.
+   */
+  leftIcon?: __React.ReactNode | string;
+  /**
+   * Secondary text to display under the caption.
+   */
+  legend?: string;
+  /**
+   * A list of elements that are placed on the right side of the item and after the rightIcon attribute.
+   */
+  rightActions?: __React.ReactNode;
+  /**
+   * The same as the leftIcon but in this case the icon is displayed in the right side.
+   */
+  rightIcon?: __React.ReactNode | string;
+  /**
+   * If true, the item displays a ripple effect on click. By default it's inherited from the parent element.
+   */
+  ripple?: boolean;
+  /**
+   * If true, the elements in the list will display a hover effect and a pointer cursor. Inherited from the parent.
+   * @default false
+   */
+  selectable?: boolean;
+  /**
+   * Classnames object defining the component style.
+   * @default false
+   */
+  theme?: ListItemTheme;
+  /**
+   * In case you want to provide the item as a link, you can pass this property to specify the href.
+   */
+  to?: string;
+}
+
+export class ListItem extends __React.Component<ListItemProps, {}> { }
+
+export interface ListSubHeaderTheme {
+  /**
+   * Used as a wrapper class for the subheader element.
+   */
+  subheader?: string;
+}
+
+interface ListSubHeaderProps extends __ReactToolbox.Props {
+  /**
+   * Text that will be displayed.
+   */
+  caption?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ListSubHeaderTheme;
+}
+
+export class ListSubHeader extends __React.Component<ListSubHeaderProps, {}> { }
diff --git a/lib/menu/index.d.ts b/lib/menu/index.d.ts
new file mode 100644
index 000000000..c2609035d
--- /dev/null
+++ b/lib/menu/index.d.ts
@@ -0,0 +1,241 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface MenuTheme {
+  /**
+   * Added to the root element when menu is active.
+   */
+  active?: string;
+  /**
+   * Added to the root when position is bottom left.
+   */
+  bottomLeft?: string;
+  /**
+   * Added to the root when position is bottom right.
+   */
+  bottomRight?: string;
+  /**
+   * Used for the root element of the menu.
+   */
+  menu?: string;
+  /**
+   * Used for the inner wrapper.
+   */
+  menuInner?: string;
+  /**
+   * Used to draw the outline.
+   */
+  outline?: string;
+  /**
+   * Added to the menu in case if should have ripple.
+   */
+  rippled?: string;
+  /**
+   * Added to the root in case its static.
+   */
+  static?: string;
+  /**
+   * Added to the root when position is top left.
+   */
+  topLeft?: string;
+  /**
+   * Added to the root when position is top right.
+   */
+  topRight?: string;
+}
+
+interface MenuProps extends __ReactToolbox.Props {
+  /**
+   * If true, the menu will be displayed as opened by default.
+   * @default false
+   */
+  active?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Callback that will be called when the menu is being hidden.
+   */
+  onHide?: Function;
+  /**
+   * Callback that will be invoked when a menu item is selected.
+   */
+  onSelect?: Function;
+  /**
+   * Callback that will be invoked when the menu is being shown.
+   */
+  onShow?: Function;
+  /**
+   * If true the menu wrapper will show an outline with a soft shadow.
+   * @default false
+   */
+  outline?: boolean;
+  /**
+   * Determine the position of the menu. With static value the menu will be always shown, auto means that the it will decide the opening direction based on the current position. To force a position use topLeft, topRight, bottomLeft, bottomRight.
+   * @default static
+   */
+  position?: "auto" | "static" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
+  /**
+   * If true, the menu items will show a ripple effect on click.
+   * @default true
+   */
+  ripple?: boolean;
+  /**
+   * If true, the menu will keep a value to highlight the active child item.
+   * @default false
+   */
+  selectable?: boolean;
+  /**
+   * Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted.
+   */
+  selected?: any;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: MenuTheme;
+}
+
+export class Menu extends __React.Component<MenuProps, {}> { }
+
+export interface IconMenuTheme {
+  /**
+   * Used for the icon element.
+   */
+  icon?: string;
+  /**
+   * Used for the root element of the icon menu.
+   */
+  iconMenu?: string;
+}
+
+interface IconMenuProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Icon font key string or Element to display the opener icon.
+   * @default more_vert
+   */
+  icon?: __React.ReactNode | string;
+  /**
+   * If true, the icon will show a ripple when is clicked.
+   * @default true
+   */
+  iconRipple?: boolean;
+  /**
+   * Transferred to the Menu component.
+   * @default true
+   */
+  menuRipple?: boolean;
+  /**
+   * Callback that will be called when the menu is being hidden.
+   */
+  onHide?: Function;
+  /**
+   * Callback that will be invoked when a menu item is selected.
+   */
+  onSelect?: Function;
+  /**
+   * Callback that will be invoked when the menu is being shown.
+   */
+  onShow?: Function;
+  /**
+   * Determines the position of the menu. This property is transferred to the inner Menu component.
+   * @default auto
+   */
+  position?: "auto" | "static" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
+  /**
+   * If true, the menu will keep a value to highlight the active child item.
+   * @default false
+   */
+  selectable?: boolean;
+  /**
+   * Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted.
+   */
+  selected?: any;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: IconMenuTheme;
+}
+
+export class IconMenu extends __React.Component<IconMenuProps, {}> { }
+
+export interface MenuDividerTheme {
+  /**
+   *
+   */
+  menuDivider?: string;
+}
+
+interface MenuDividerProps extends __ReactToolbox.Props {
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: MenuDividerTheme;
+}
+
+export class MenuDivider extends __React.Component<MenuDividerProps, {}> { }
+
+export interface MenuItemTheme {
+  /**
+   * Used for the caption inside the item.
+   */
+  caption?: string;
+  /**
+   * Added to the root element if it's disabled.
+   */
+  disabled?: string;
+  /**
+   * Used for the icon element if exists.
+   */
+  icon?: string;
+  /**
+   * Used as the root class for the component.
+   */
+  menuItem?: string;
+  /**
+   * Added to the root element in case it's selected.
+   */
+  selected?: string;
+  /**
+   * Used for the shortcut element if exists.
+   */
+  shortcut?: string;
+}
+
+interface MenuItemProps extends __ReactToolbox.Props {
+  /**
+   * The text to include in the menu item. Required.
+   */
+  caption: string;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * If true, the item will be displayed as disabled and is not selectable.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Icon font key string or Element to display in the right side of the option.
+   */
+  icon?: __React.ReactNode | string;
+  /**
+   * Transferred from the Menu component for selectable menus. Indicates if it's the current active option.
+   * @default false
+   */
+  selected?: boolean;
+  /**
+   * Displays shortcut text on the right side of the caption attribute.
+   */
+  shortcut?: string;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: MenuItemTheme;
+}
+
+export class MenuItem extends __React.Component<MenuItemProps, {}> { }
diff --git a/lib/navigation/index.d.ts b/lib/navigation/index.d.ts
new file mode 100644
index 000000000..47f46045c
--- /dev/null
+++ b/lib/navigation/index.d.ts
@@ -0,0 +1,46 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface NavigationTheme {
+  /**
+   * Used for buttons provided in the component.
+   */
+  button?: string;
+  /**
+   * Used for the root element if the layout is horizontal.
+   */
+  horizontal?: string;
+  /**
+   * Used for links provided in the component.
+   */
+  link?: string;
+  /**
+   * Used for the root element if the layout is vertical.
+   */
+  vertical?: string;
+}
+
+interface NavigationProps extends __ReactToolbox.Props {
+  /**
+   * Array of objects that will be represented as <Button/> so the keys will be transferred as properties the Button Component.
+   */
+  actions?: any[];
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Array of objects similar to actions but that will be rendered as <Link/> component definition.
+   */
+  routes?: any[];
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: NavigationTheme;
+  /**
+   * Type of the navigation, it can be vertical or horizontal.
+   * @default horizontal
+   */
+  type?: "vertical" | "horizontal";
+}
+
+export class Navigation extends __React.Component<NavigationProps, {}> { }
diff --git a/lib/progress_bar/index.d.ts b/lib/progress_bar/index.d.ts
new file mode 100644
index 000000000..8a2a8425a
--- /dev/null
+++ b/lib/progress_bar/index.d.ts
@@ -0,0 +1,82 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface ProgressBarTheme {
+  /**
+   * Used to style the buffer element in the linear progress.
+   */
+  buffer?: string;
+  /**
+   * Used for the circle element in the circular progress.
+   */
+  circle?: string;
+  /**
+   * Used for the root element when the type is circular.
+   */
+  circular?: string;
+  /**
+   * Added to the root element if mode is indeterminate.
+   */
+  indeterminate?: string;
+  /**
+   * Used for the root element when the type is linear.
+   */
+  linear?: string;
+  /**
+   * Added to the root if the component is multicolor (circular).
+   */
+  multicolor?: string;
+  /**
+   * Used for the inner path in the circular progress.
+   */
+  path?: string;
+  /**
+   * Used to style the value element in the linear progress.
+   */
+  value?: string;
+}
+
+interface ProgressBarProps extends __ReactToolbox.Props {
+  /**
+   * Value of a secondary progress bar useful for buffering.
+   * @default 0
+   */
+  buffer?: number;
+  /**
+   * Maximum value permitted.
+   * @default 100
+   */
+  max?: number;
+  /**
+   * Minimum value permitted.
+   * @default 0
+   */
+  min?: number;
+  /**
+   * Mode of the progress bar, it can be determinate or indeterminate.
+   * @default indeterminate
+   */
+  mode?: "determinate" | "indeterminate";
+  /**
+   * If true, the circular progress bar will be changing its color.
+   * @default false
+   */
+  multicolor?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ProgressBarTheme;
+  /**
+   * Type of the progress bar, it can be circular or linear.
+   * @default linear
+   */
+  type?: "linear" | "circular";
+  /**
+   * Value of the current progress.
+   * @default 0
+   */
+  value?: number;
+}
+
+export class ProgressBar extends __React.Component<ProgressBarProps, {}> { }
+
+export default ProgressBar;
diff --git a/lib/radio/index.d.ts b/lib/radio/index.d.ts
new file mode 100644
index 000000000..5f3621329
--- /dev/null
+++ b/lib/radio/index.d.ts
@@ -0,0 +1,101 @@
+import __ReactToolbox from "../index.d.ts";
+
+interface RadioGroupProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * If true, the group will be displayed as disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Name for the input element group.
+   */
+  name?: string;
+  /**
+   * Callback function that will be invoked when the value changes.
+   */
+  onChange?: Function;
+  /**
+   * Default value selected in the radio group.
+   */
+  value?: number;
+}
+
+export class RadioGroup extends __React.Component<RadioGroupProps, {}> { }
+
+export interface RadioButtonTheme {
+  /**
+   * Used to for the radio element.
+   */
+  radio?: string;
+  /**
+   * Used for the radio element when it's checked.
+   */
+  radioChecked?: string;
+  /**
+   * To provide styles for the ripple.
+   */
+  ripple?: string;
+  /**
+   * Added to the root of the Radio in case it's disabled.
+   */
+  disabled?: string;
+  /**
+   * Used as the root class of the component.
+   */
+  field?: string;
+  /**
+   * Used for the input element.
+   */
+  input?: string;
+  /**
+   * Used to style the text label element.
+   */
+  text?: string;
+}
+
+interface RadioButtonProps extends __ReactToolbox.Props {
+  /**
+   * If true, the input element will be selected by default. Transferred from the parent.
+   * @default false
+   */
+  checked?: boolean;
+  /**
+   * If true, the item will be displayed as disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Label for the radio button.
+   */
+  label?: __React.ReactNode | string;
+  /**
+   * Name for the input element.
+   */
+  name?: string;
+  /**
+   * Callback function that will be invoked when the input is blurred.
+   */
+  onBlur?: __React.FocusEventHandler;
+  /**
+   * Callback function that will be invoked when the value changes.
+   */
+  onChange?: __React.FormEventHandler;
+  /**
+   * Callback function that will be invoked when the input is focused.
+   */
+  onFocus?: __React.FocusEventHandler;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: RadioButtonTheme;
+  /**
+   * Value for the radio button.
+   */
+  value?: any;
+}
+
+export class RadioButton extends __React.Component<RadioButtonProps, {}> { }
diff --git a/lib/ripple/index.d.ts b/lib/ripple/index.d.ts
new file mode 100644
index 000000000..059e6fb13
--- /dev/null
+++ b/lib/ripple/index.d.ts
@@ -0,0 +1,49 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface RippleTheme {
+  /**
+   * Root classname for the ripple.
+   */
+  ripple?: string;
+  /**
+   * Applied when the ripple is active.
+   */
+  rippleActive?: string;
+  /**
+   * Applied when the ripple is restarting.
+   */
+  rippleRestarting?: string;
+  /**
+   * Wrapper class to fit to the parent element.
+   */
+  rippleWrapper?: string;
+}
+
+interface RippleProps {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * True in case you want a centered ripple.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Function that will be called when the ripple animation ends.
+   */
+  onRippleEnded?: Function;
+  /**
+   * Factor to indicate how much should the ripple spread under the component.
+   * @default 2
+   */
+  spread?: number;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: RippleTheme;
+}
+
+export class Ripple extends __React.Component<RippleProps, {}> { }
+
+export default Ripple;
diff --git a/lib/slider/index.d.ts b/lib/slider/index.d.ts
new file mode 100644
index 000000000..fc10f35c3
--- /dev/null
+++ b/lib/slider/index.d.ts
@@ -0,0 +1,106 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface SliderTheme {
+  /**
+   * Used as an inner container of the root component.
+   */
+  container?: string;
+  /**
+   * Added to the root of in case the Slider is editable.
+   */
+  editable?: string;
+  /**
+   * Used to style the inner element of the knob.
+   */
+  innerknob?: string;
+  /**
+   * Provided to the ProgressBar component.
+   */
+  innerprogress?: string;
+  /**
+   * Provided to the Input element in case it's editable.
+   */
+  input?: string;
+  /**
+   * Used to style the outer layer of the knob.
+   */
+  knob?: string;
+  /**
+   * Added to the root in case the Slider is pinned.
+   */
+  pinned?: string;
+  /**
+   * Added to the root in case the state is pressed.
+   */
+  pressed?: string;
+  /**
+   * Used as an outer wrapper for the ProgressBar.
+   */
+  progress?: string;
+  /**
+   * Used in the root when the knob should be a ring.
+   */
+  ring?: string;
+  /**
+   * Class used for the root element.
+   */
+  slider?: string;
+  /**
+   * Used for every individual snap element.
+   */
+  snap?: string;
+  /**
+   * Used as a wrapper for the group of snaps when it's snapped.
+   */
+  snaps?: string;
+}
+
+interface SliderProps extends __ReactToolbox.Props {
+  /**
+   * If true, an input is shown and the user can set the slider from keyboard value.
+   * @default false
+   */
+  editable?: boolean;
+  /**
+   * Maximum value permitted.
+   * @default 100
+   */
+  max?: number;
+  /**
+   * Minimum value permitted.
+   * @default 0
+   */
+  min?: number;
+  /**
+   * Callback function that will be invoked when the slider value changes.
+   */
+  onChange?: Function;
+  /**
+   * If true, a pin with numeric value label is shown when the slider thumb is pressed. Use for settings for which users need to know the exact value of the setting.
+   * @default false
+   */
+  pinned?: boolean;
+  /**
+   * If true, the slider thumb snaps to tick marks evenly spaced based on the step property value.
+   * @default false
+   */
+  snaps?: boolean;
+  /**
+   * Amount to vary the value when the knob is moved or increase/decrease is called.
+   * @default 0.01
+   */
+  step?: number;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: SliderTheme;
+  /**
+   * Current value of the slider.
+   * @default 0
+   */
+  value?: number;
+}
+
+export class Slider extends __React.Component<SliderProps, {}> { }
+
+export default Slider;
diff --git a/lib/snackbar/index.d.ts b/lib/snackbar/index.d.ts
new file mode 100644
index 000000000..91066ea01
--- /dev/null
+++ b/lib/snackbar/index.d.ts
@@ -0,0 +1,76 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface SnackbarTheme {
+  /**
+   * Added to the root element in case it's accept type.
+   */
+  accept?: string;
+  /**
+   * Added to the root element when its active.
+   */
+  active?: string;
+  /**
+   * Used for the button inside the component.
+   */
+  button?: string;
+  /**
+   * Added to the root element in case it's cancel type.
+   */
+  cancel?: string;
+  /**
+   * Used for the icon element.
+   */
+  icon?: string;
+  /**
+   * Used for the label element.
+   */
+  label?: string;
+  /**
+   * Used as the className for the root element of the component.
+   */
+  snackbar?: string;
+  /**
+   * Added to the root element in case it's warning type.
+   */
+  warning?: string;
+}
+
+interface SnackbarProps extends __ReactToolbox.Props {
+  /**
+   * Label for the action component inside the Snackbar.
+   */
+  action?: string;
+  /**
+   * If true, the snackbar will be active.
+   * @default true
+   */
+  active?: boolean;
+  /**
+   * String key for an icon or Element which will be displayed in left side of the snackbar.
+   */
+  icon?: __React.ReactNode | string;
+  /**
+   * Text to display in the content. Required.
+   */
+  label: string;
+  /**
+   * Callback function when finish the set timeout.
+   */
+  onTimeout?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: SnackbarTheme;
+  /**
+   * Amount of time in milliseconds after the Snackbar will be automatically hidden.
+   */
+  timeout?: number;
+  /**
+   * Indicates the action type. Can be accept, warning or cancel
+   */
+  type?: "accept" | "cancel" | "warning";
+}
+
+export class Snackbar extends __React.Component<SnackbarProps, {}> { }
+
+export default Snackbar;
diff --git a/lib/switch/index.d.ts b/lib/switch/index.d.ts
new file mode 100644
index 000000000..6639a9b1d
--- /dev/null
+++ b/lib/switch/index.d.ts
@@ -0,0 +1,77 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface SwitchTheme {
+  /**
+   * Used for the root element if the component is disabled.
+   */
+  disabled?: string;
+  /**
+   * Used for the root element if the component is not disabled.
+   */
+  field?: string;
+  /**
+   * Used for the input element.
+   */
+  input?: string;
+  /**
+   * Used for a wrapper around the thumb if checked is false.
+   */
+  off?: string;
+  /**
+   * Used for a wrapper around the thumb if checked is true.
+   */
+  on?: string;
+  /**
+   * Used for the ripple inside the switch.
+   */
+  ripple?: string;
+  /**
+   * Used for the text label element.
+   */
+  text?: string;
+  /**
+   * Used for the thumb element.
+   */
+  thumb?: string;
+}
+
+interface SwitchProps extends __ReactToolbox.Props {
+  /**
+   * If true, the switch will be enabled.
+   * @default false
+   */
+  checked?: boolean;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * The text string to use for the floating label element.
+   */
+  label?: string;
+  /**
+   * The text string used as name of the input.
+   */
+  name?: string;
+  /**
+   * Callback function that is fired when when the switch is blurred.
+   */
+  onBlur?: __React.FocusEventHandler;
+  /**
+   * Callback function that is fired when the component's value changes.
+   */
+  onChange?: __React.FormEventHandler;
+  /**
+   * Callback function that is fired when the switch is focused.
+   */
+  onFocus?: __React.FocusEventHandler;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: SwitchTheme;
+}
+
+export class Switch extends __React.Component<SwitchProps, {}> { }
+
+export default Switch;
diff --git a/lib/table/index.d.ts b/lib/table/index.d.ts
new file mode 100644
index 000000000..05b8fe4ac
--- /dev/null
+++ b/lib/table/index.d.ts
@@ -0,0 +1,70 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface TableTheme {
+  /**
+   * It will be added to a row in case it is editable.
+   */
+  editable?: string;
+  /**
+   * Used for the row element.
+   */
+  row?: string;
+  /**
+   * It will be added to a row in case it is selectable.
+   */
+  selectable?: string;
+  /**
+   * Added to a row in case it is selected.
+   */
+  selected?: string;
+  /**
+   * Classname used for the root element.
+   */
+  table?: string;
+}
+
+interface TableProps extends __ReactToolbox.Props {
+  /**
+   * If true, component will show a heading using model field names.
+   * @default true
+   */
+  heading?: boolean;
+  /**
+   * Object describing the data model that represents each object in the source.
+   */
+  model?: any;
+  /**
+   * Callback function that is fired when an item in a row changes. If set, rows are editable.
+   */
+  onChange?: Function;
+  /**
+   * Callback function invoked when the row selection changes.
+   */
+  onSelect?: __React.FormEventHandler;
+  /**
+   * If true, each row will display a checkbox to allow the user to select that one row.
+   * @default true
+   */
+  selectable?: boolean;
+  /**
+   * If true, the header and each row will display a checkbox to allow the user to select multiple rows.
+   * @default true
+   */
+  multiSelectable?: boolean;
+  /**
+   * Array of indexes of the items in the source that should appear as selected.
+   */
+  selected?: any[];
+  /**
+   * Array of objects representing each item to show.
+   */
+  source?: any[];
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: TableTheme;
+}
+
+export class Table extends __React.Component<TableProps, {}> { }
+
+export default Table;
diff --git a/lib/tabs/index.d.ts b/lib/tabs/index.d.ts
new file mode 100644
index 000000000..e5aeb2cdb
--- /dev/null
+++ b/lib/tabs/index.d.ts
@@ -0,0 +1,105 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface TabsTheme {
+  /**
+   * Added to the active tab content and header.
+   */
+  active?: string;
+  /**
+   * Used for the navigation element.
+   */
+  navigation?: string;
+  /**
+   * Used for the moving underline element.
+   */
+  pointer?: string;
+  /**
+   * Used as a root classname for the component.
+   */
+  tabs?: string;
+  /**
+   * Used for the tab content element.
+   */
+  tab?: string;
+}
+
+interface TabsProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Disable the animation below the active tab.
+   * @default false
+   */
+  disableAnimatedBottomBorder?: boolean;
+  /**
+   * Current
+   * @default 0
+   */
+  index?: number;
+  /**
+   * Callback function that is fired when the tab changes.
+   */
+  onChange?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: TabsTheme;
+}
+
+export class Tabs extends __React.Component<TabsProps, {}> { }
+
+export interface TabTheme {
+  /**
+   * Added to the navigation tab element in case it's active.
+   */
+  active?: string;
+  /**
+   * Added to the navigation tab element in case it's disabled.
+   */
+  disabled?: string;
+  /**
+   * Added to the navigation tab element in case it's hidden.
+   */
+  hidden?: string;
+  /**
+   * Added to the navigation tab element in case it's active.
+   */
+  label?: string;
+}
+
+interface TabProps extends __ReactToolbox.Props {
+  /**
+   * If true, the current component is visible.
+   */
+  active?: boolean;
+  /**
+   * Additional class name to provide custom styling for the active tab.
+   */
+  activeClassName?: string;
+  /**
+   * If true, the current component is not clickable.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If true, the current component is not visible.
+   * @default false
+   */
+  hidden?: boolean;
+  /**
+   * Label text for navigation header. Required.
+   */
+  label: string;
+  /**
+   * Callback function that is fired when the tab is activated.
+   */
+  onActive?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: TabTheme;
+}
+
+export class Tab extends __React.Component<TabProps, {}> { }
diff --git a/lib/time_picker/index.d.ts b/lib/time_picker/index.d.ts
new file mode 100644
index 000000000..0968a8c52
--- /dev/null
+++ b/lib/time_picker/index.d.ts
@@ -0,0 +1,132 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface TimePickerTheme {
+  /**
+   * Added to the number which is active in clock face.
+   */
+  active?: string;
+  /**
+   * AM label in dialog header when mode is AM/PM.
+   */
+  am?: string;
+  /**
+   * Added to the dialog when the selected format is AM.
+   */
+  amFormat?: string;
+  /**
+   * Wrapper for AM and PM labels in header when mode is AM/PM.
+   */
+  ampm?: string;
+  /**
+   * Used for buttons inside the dialog of the picker.
+   */
+  button?: string;
+  /**
+   * Clock root class element.
+   */
+  clock?: string;
+  /**
+   * Wrapper for the proper positioning of the clock.
+   */
+  clockWrapper?: string;
+  /**
+   * Used for the dialog component.
+   */
+  dialog?: string;
+  /**
+   * Used to style the clock face.
+   */
+  face?: string;
+  /**
+   * Used for the clock's hand.
+   */
+  hand?: string;
+  /**
+   * Dialog header wrapper class.
+   */
+  header?: string;
+  /**
+   * Used for hours in dialog header.
+   */
+  hours?: string;
+  /**
+   * Added to the dialog hours are displayed.
+   */
+  hoursDisplay?: string;
+  /**
+   * Used for Input element that opens the picker.
+   */
+  input?: string;
+  /**
+   * Used for the knob of the hand.
+   */
+  knob?: string;
+  /**
+   * Used for minutes in dialog header.
+   */
+  minutes?: string;
+  /**
+   * Added to the dialog minutes are displayed.
+   */
+  minutesDisplay?: string;
+  /**
+   * Each of the numbers in the clock's face.
+   */
+  number?: string;
+  /**
+   * Placeholder for the clock inside the dialog (inner wrapper).
+   */
+  placeholder?: string;
+  /**
+   * PM label in dialog header when mode is AM/PM.
+   */
+  pm?: string;
+  /**
+   * Added to the dialog when the selected format is PM.
+   */
+  pmFormat?: string;
+  /**
+   * Is the : separator between hours and minutes in dialog header.
+   */
+  separator?: string;
+  /**
+   * Added to the knob when no round number is selected.
+   */
+  small?: string;
+}
+
+interface TimePickerProps {
+  /**
+   * Provide error text which will be displayed under the field.
+   */
+  error?: string;
+  /**
+   * This class will be applied to Input component of TimePicker.
+   */
+  inputClassName?: string;
+  /**
+   * Format to display the clock. It can be 24hr or ampm.
+   * @default false
+   */
+  format?: "24hr" | "ampm";
+  /**
+   * The text string to use for the floating label element in the input component.
+   */
+  label?: string;
+  /**
+   * Callback called when the picker value is changed.
+   */
+  onChange?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: TimePickerTheme;
+  /**
+   * Datetime object with currrently selected time.
+   */
+  value?: Date;
+}
+
+export class TimePicker extends __React.Component<TimePickerProps, {}> { }
+
+export default TimePicker;
diff --git a/lib/tooltip/index.d.ts b/lib/tooltip/index.d.ts
new file mode 100644
index 000000000..42a88593d
--- /dev/null
+++ b/lib/tooltip/index.d.ts
@@ -0,0 +1,56 @@
+import { Props } from "../index.d.ts";
+
+export interface TooltipTheme {
+  /**
+   * Added to the tooltip element.
+   */
+  tooltip?: string;
+  /**
+   * Added to the root when the tooltip is active.
+   */
+  tooltipActive?: string;
+  /**
+   * Wrapper for the root element used to position the tooltip.
+   */
+  tooltipWrapper?: string;
+}
+
+interface TooltipProps {
+  /**
+   * Callback called when the mouse enters the Component.
+   */
+  onMouseEnter?: __React.MouseEventHandler;
+  /**
+   * Callback called when the mouse leaves the Component.
+   */
+  onMouseLeave?: __React.MouseEventHandler;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: TooltipTheme;
+  /**
+   * The text string to use for the tooltip.
+   */
+  tooltip?: string;
+  /**
+   * Amount of time in miliseconds spent before the tooltip is visible.
+   */
+  tooltipDelay?: number;
+  /**
+   * If true, the Tooltip hides after a click in the host component.
+   * @default true
+   */
+  tooltipHideOnClick?: boolean;
+}
+
+declare class TooltipComponent<P, S> extends __React.Component<P, S> {
+  props: P & TooltipProps;
+}
+
+interface TooltippedComponentClass<P> extends TooltipProps {
+  new (props?: P, context?: any): TooltipComponent<P, any>;
+}
+
+export function Tooltip<P>(componentClass: __React.ComponentClass<P>): TooltippedComponentClass<P>;
+
+export default Tooltip;

From 3b706779fb9a85ddbd0d21b2982002efaf45a949 Mon Sep 17 00:00:00 2001
From: Per Bergqwist <pbergqwist@contractor.ea.com>
Date: Tue, 19 Jul 2016 21:54:24 +0200
Subject: [PATCH 0677/1024] Small fixes

---
 components/chip/index.d.ts    | 2 +-
 components/tooltip/index.d.ts | 2 --
 lib/chip/index.d.ts           | 2 +-
 lib/tooltip/index.d.ts        | 2 --
 4 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/components/chip/index.d.ts b/components/chip/index.d.ts
index 4edcb6859..3ee44821a 100644
--- a/components/chip/index.d.ts
+++ b/components/chip/index.d.ts
@@ -36,7 +36,7 @@ interface ChipProps extends __ReactToolbox.Props {
    * If true, the chip will be rendered with a delete icon.
    * @default false
    */
-  deleteable?: boolean;
+  deletable?: boolean;
   /**
    * Callback to be invoked when the delete icon is clicked.
    */
diff --git a/components/tooltip/index.d.ts b/components/tooltip/index.d.ts
index 42a88593d..f7686d769 100644
--- a/components/tooltip/index.d.ts
+++ b/components/tooltip/index.d.ts
@@ -1,5 +1,3 @@
-import { Props } from "../index.d.ts";
-
 export interface TooltipTheme {
   /**
    * Added to the tooltip element.
diff --git a/lib/chip/index.d.ts b/lib/chip/index.d.ts
index 4edcb6859..3ee44821a 100644
--- a/lib/chip/index.d.ts
+++ b/lib/chip/index.d.ts
@@ -36,7 +36,7 @@ interface ChipProps extends __ReactToolbox.Props {
    * If true, the chip will be rendered with a delete icon.
    * @default false
    */
-  deleteable?: boolean;
+  deletable?: boolean;
   /**
    * Callback to be invoked when the delete icon is clicked.
    */
diff --git a/lib/tooltip/index.d.ts b/lib/tooltip/index.d.ts
index 42a88593d..f7686d769 100644
--- a/lib/tooltip/index.d.ts
+++ b/lib/tooltip/index.d.ts
@@ -1,5 +1,3 @@
-import { Props } from "../index.d.ts";
-
 export interface TooltipTheme {
   /**
    * Added to the tooltip element.

From 42feb7fd0c2d0c9cf237071d92323dcb6b54017b Mon Sep 17 00:00:00 2001
From: landabaso <landabaso@gmail.com>
Date: Wed, 20 Jul 2016 09:20:55 +0200
Subject: [PATCH 0678/1024] Update install.md

Incorrect import of a Raw Component w.r.t theming.
See https://github.com/react-toolbox/react-toolbox/issues/654
---
 docs/app/components/layout/install/install.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/app/components/layout/install/install.md b/docs/app/components/layout/install/install.md
index 54d026650..0511c38fe 100644
--- a/docs/app/components/layout/install/install.md
+++ b/docs/app/components/layout/install/install.md
@@ -134,7 +134,7 @@ Remember that you can import components without styles and provide those styles
 Then, when you use a button you can inject the appropriated theme:
 
 ```js
-import { Button } from 'react-toolbox/lib/button/Button';
+import Button from 'react-toolbox/lib/button/Button';
 import buttonTheme from './theme/button.scss';
 
 const ThemedButton = (props) => (

From 32aedbd9405ce3a7babd403e8570dc969bba52aa Mon Sep 17 00:00:00 2001
From: landabaso <landabaso@gmail.com>
Date: Wed, 20 Jul 2016 12:39:55 +0200
Subject: [PATCH 0679/1024] Additional fix for raw AppBar component import

---
 docs/app/components/layout/install/install.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/app/components/layout/install/install.md b/docs/app/components/layout/install/install.md
index 0511c38fe..69b1096a6 100644
--- a/docs/app/components/layout/install/install.md
+++ b/docs/app/components/layout/install/install.md
@@ -63,7 +63,7 @@ import { AppBar } from 'react-toolbox/lib/app_bar';
 You import from the component definition so the imported component is bundled with its dependencies but it does not require any style for you. This means that no CSS will be bundled and the component markup will **not** include any classname. It's your responsibility to provide a theme to the component to be properly style and you can do it via properties or context. For example:
 
 ```js
-import { AppBar } from 'react-toolbox/lib/app_bar/AppBar.js';
+import AppBar from 'react-toolbox/lib/app_bar/AppBar.js';
 ```
 
 ## Customizing components

From 9cc56e1937ff8a63509daa758255a3e49b3c6105 Mon Sep 17 00:00:00 2001
From: Ben Fox-Moore <ben.foxmoore@gmail.com>
Date: Thu, 21 Jul 2016 15:15:35 +0200
Subject: [PATCH 0680/1024] Only add Input auto-resize handler to multiline
 inputs

---
 components/input/Input.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/input/Input.js b/components/input/Input.js
index 066aaf782..0838839ad 100644
--- a/components/input/Input.js
+++ b/components/input/Input.js
@@ -55,7 +55,9 @@ const factory = (FontIcon) => {
     };
 
     componentDidMount () {
-      window.addEventListener('resize', this.handleAutoresize);
+      if (this.props.multiline) {
+        window.addEventListener('resize', this.handleAutoresize);
+      }
     }
 
     componentWillReceiveProps (nextProps) {

From e9487e164fedc338a74cdb6acb5185bad2af9c90 Mon Sep 17 00:00:00 2001
From: Alex Gilleran <alex@alexgilleran.com>
Date: Thu, 21 Jul 2016 23:24:28 +1000
Subject: [PATCH 0681/1024] Date picker now takes max/min date into account on
 mount/props change.

---
 components/date_picker/DatePickerDialog.js | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/components/date_picker/DatePickerDialog.js b/components/date_picker/DatePickerDialog.js
index 4936214cc..b92cc2eb9 100644
--- a/components/date_picker/DatePickerDialog.js
+++ b/components/date_picker/DatePickerDialog.js
@@ -41,7 +41,6 @@ const factory = (Dialog, Calendar) => {
 
     componentWillMount () {
       this.updateStateDate(this.props.value);
-
     }
 
     componentWillReceiveProps (nextProps) {
@@ -69,11 +68,9 @@ const factory = (Dialog, Calendar) => {
 
     updateStateDate = (date) => {
       if (Object.prototype.toString.call(date) === '[object Date]') {
-        this.setState({
-          date
-        });
+        this.handleCalendarChange(date, false);
       }
-    }
+    };
 
     actions = [
       { label: 'Cancel', className: this.props.theme.button, onClick: this.props.onDismiss },

From 4f67a93f6e907c0c99fcfa12a2cab0bedc52443f Mon Sep 17 00:00:00 2001
From: Alex Gilleran <alex@alexgilleran.com>
Date: Fri, 22 Jul 2016 00:47:03 +1000
Subject: [PATCH 0682/1024] Added tests.

---
 components/date_picker/DatePicker.js          |  5 +-
 components/date_picker/DatePickerDialog.js    | 12 ++-
 components/date_picker/__test__/index.spec.js | 94 +++++++++++++++++++
 components/utils/time.js                      |  9 ++
 4 files changed, 115 insertions(+), 5 deletions(-)
 create mode 100644 components/date_picker/__test__/index.spec.js

diff --git a/components/date_picker/DatePicker.js b/components/date_picker/DatePicker.js
index 1c2c582f4..b0c1b863f 100644
--- a/components/date_picker/DatePicker.js
+++ b/components/date_picker/DatePicker.js
@@ -115,5 +115,8 @@ const DatePickerDialog = datePickerDialogFactory(InjectDialog, Calendar);
 const DatePicker = factory(InjectInput, DatePickerDialog);
 
 export default themr(DATE_PICKER)(DatePicker);
-export { factory as datePickerFactory };
+export {
+  DatePickerDialog as DatePickerDialog,
+  factory as datePickerFactory
+};
 export { DatePicker };
diff --git a/components/date_picker/DatePickerDialog.js b/components/date_picker/DatePickerDialog.js
index b92cc2eb9..75496cc72 100644
--- a/components/date_picker/DatePickerDialog.js
+++ b/components/date_picker/DatePickerDialog.js
@@ -47,10 +47,14 @@ const factory = (Dialog, Calendar) => {
       this.updateStateDate(nextProps.value);
     }
 
-    handleCalendarChange = (value, dayClick) => {
+    handleNewDate = (value, dayClick) => {
       const state = {display: 'months', date: value};
       if (time.dateOutOfRange(value, this.props.minDate, this.props.maxDate)) {
-        state.date = this.props.maxDate || this.props.minDate;
+        if (this.props.maxDate && this.props.minDate) {
+          state.date = time.closestDate(value, this.props.maxDate, this.props.minDate);
+        } else {
+          state.date = this.props.maxDate || this.props.minDate;
+        }
       }
       this.setState(state);
       if (dayClick && this.props.autoOk && this.props.onSelect) {
@@ -68,7 +72,7 @@ const factory = (Dialog, Calendar) => {
 
     updateStateDate = (date) => {
       if (Object.prototype.toString.call(date) === '[object Date]') {
-        this.handleCalendarChange(date, false);
+        this.handleNewDate(date, false);
       }
     };
 
@@ -106,7 +110,7 @@ const factory = (Dialog, Calendar) => {
               display={this.state.display}
               maxDate={this.props.maxDate}
               minDate={this.props.minDate}
-              onChange={this.handleCalendarChange}
+              onChange={this.handleNewDate}
               selectedDate={this.state.date}
               theme={this.props.theme} />
           </div>
diff --git a/components/date_picker/__test__/index.spec.js b/components/date_picker/__test__/index.spec.js
new file mode 100644
index 000000000..79f264314
--- /dev/null
+++ b/components/date_picker/__test__/index.spec.js
@@ -0,0 +1,94 @@
+import expect from 'expect';
+import React from 'react';
+import theme from '../theme.scss';
+import { DatePickerDialog } from '../DatePicker';
+import utils from '../../utils/testing';
+
+describe('DatePickerDialog', function () {
+  describe('#on mount', function () {
+    it('passes value through to calendar if no maxDate/minDate specified', function () {
+      const value = new Date(2016, 1, 1);
+
+      const wrapper = utils.shallowRenderComponent(DatePickerDialog, {theme, value});
+
+      expect(getDatePassedToCalendar(wrapper)).toBe(value);
+    });
+
+    describe('when minDate but not maxDate specified', function () {
+      const minDate = new Date(2016, 1, 2);
+
+      it('passes through a value after minDate', function () {
+        const value = new Date(2016, 1, 3);
+
+        const wrapper = utils.shallowRenderComponent(DatePickerDialog, {theme, value, minDate});
+
+        expect(getDatePassedToCalendar(wrapper)).toBe(value);
+      });
+
+      it('sanitises a value before minDate to minDate', function () {
+        const wrapper = utils.shallowRenderComponent(DatePickerDialog, {
+          theme, value: new Date(2016, 1, 1), minDate
+        });
+
+        expect(getDatePassedToCalendar(wrapper)).toBe(minDate);
+      });
+    });
+
+    describe('when maxDate but not minDate specified', function () {
+      const maxDate = new Date(2016, 1, 2);
+
+      it('passes through a value before maxDate', function () {
+        const value = new Date(2016, 1, 1);
+
+        const wrapper = utils.shallowRenderComponent(DatePickerDialog, {theme, value, maxDate});
+
+        expect(getDatePassedToCalendar(wrapper)).toBe(value);
+      });
+
+      it('sanitises a value after maxDate to maxDate', function () {
+        const wrapper = utils.shallowRenderComponent(DatePickerDialog, {
+          theme, value: new Date(2016, 1, 3), maxDate
+        });
+
+        expect(getDatePassedToCalendar(wrapper)).toBe(maxDate);
+      });
+    });
+
+    describe('if both minDate and maxDate are set', function () {
+      const minDate = new Date(2016, 1, 2);
+      const maxDate = new Date(2016, 1, 4);
+
+      it('sanitises value to minDate if value is before minDate', function () {
+        const wrapper = utils.shallowRenderComponent(DatePickerDialog, {
+          theme,
+          value: new Date(2016, 1, 1),
+          minDate,
+          maxDate
+        });
+
+        expect(getDatePassedToCalendar(wrapper)).toBe(minDate);
+      });
+
+      it('sanitises value to maxDate if value is after maxDate', function () {
+        const wrapper = utils.shallowRenderComponent(DatePickerDialog, {
+          theme,
+          value: new Date(2016, 1, 5),
+          minDate,
+          maxDate
+        });
+
+        expect(getDatePassedToCalendar(wrapper)).toBe(maxDate);
+      });
+
+      it('doesn\'t sanitise when value is between maxDate/minDate', function () {
+        const value = new Date(2016, 1, 3);
+        const wrapper = utils.shallowRenderComponent(DatePickerDialog, {theme, value, minDate, maxDate});
+        expect(getDatePassedToCalendar(wrapper)).toBe(value);
+      });
+    });
+
+    function getDatePassedToCalendar(wrapper) {
+      return wrapper.props.children[1].props.children.props.selectedDate;
+    }
+  });
+});
diff --git a/components/utils/time.js b/components/utils/time.js
index 0b474ad6f..133a3b919 100644
--- a/components/utils/time.js
+++ b/components/utils/time.js
@@ -177,6 +177,15 @@ const time = {
     return ((minDate && !(date >= minDate)) || (maxDate && !(date <= maxDate)));
   },
 
+  closestDate (to, date1, date2) {
+    const toTime = to.getTime();
+
+    const diff1 = Math.abs(toTime - date1.getTime());
+    const diff2 = Math.abs(toTime - date2.getTime());
+
+    return diff1 < diff2 ? date1 : date2;
+  },
+
   formatDate (date) {
     return `${date.getDate()} ${time.getFullMonth(date)} ${date.getFullYear()}`;
   }

From a6f7d645e4639a02afa8549e9fb100d3d3b7aa63 Mon Sep 17 00:00:00 2001
From: Conroy Whitney <conroy.whitney@codingzeal.com>
Date: Thu, 21 Jul 2016 11:33:48 -0700
Subject: [PATCH 0683/1024] Ensure theme gets passed down to TimePicker child
 components

---
 components/time_picker/TimePicker.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/time_picker/TimePicker.js b/components/time_picker/TimePicker.js
index cd10a2524..38f420676 100644
--- a/components/time_picker/TimePicker.js
+++ b/components/time_picker/TimePicker.js
@@ -59,13 +59,13 @@ const factory = (TimePickerDialog, Input) => {
     };
 
     render () {
-      const { value, format, inputClassName, onEscKeyDown, onOverlayClick, theme, ...others } = this.props;
+      const { value, format, inputClassName, onEscKeyDown, onOverlayClick, ...others } = this.props;
       const formattedTime = value ? time.formatTime(value, format) : '';
       return (
         <div data-react-toolbox='time-picker'>
           <Input
             {...others}
-            className={classnames(theme.input, {[inputClassName]: inputClassName })}
+            className={classnames(this.props.theme.input, {[inputClassName]: inputClassName })}
             error={this.props.error}
             name={this.props.name}
             label={this.props.label}

From fb29425593195fb3be5621e482d2e23200d43636 Mon Sep 17 00:00:00 2001
From: Dmytro <xmizok@gmail.com>
Date: Fri, 22 Jul 2016 21:23:10 +0300
Subject: [PATCH 0684/1024] Made general mixins properties depend on $unit
 value

---
 components/_mixins.scss | 42 ++++++++++++++++++++---------------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/components/_mixins.scss b/components/_mixins.scss
index f6159734b..9d8e4d302 100644
--- a/components/_mixins.scss
+++ b/components/_mixins.scss
@@ -7,7 +7,7 @@
 
 @mixin typo-display-4($color-contrast: false, $use-preferred: true) {
   @include typo-preferred-font($use-preferred);
-  font-size: 11.2rem;
+  font-size: $unit * 11.2rem;
   font-weight: 300;
   line-height: 1;
   letter-spacing: -.04em;
@@ -19,7 +19,7 @@
 
 @mixin typo-display-3($color-contrast: false, $use-preferred: true) {
   @include typo-preferred-font($use-preferred);
-  font-size: 5.6rem;
+  font-size: $unit * 5.6rem;
   font-weight: 400;
   line-height: 1.35;
   letter-spacing: -.02em;
@@ -31,9 +31,9 @@
 
 @mixin typo-display-2($color-contrast: false, $use-preferred: true) {
   @include typo-preferred-font($use-preferred);
-  font-size: 4.5rem;
+  font-size: $unit * 4.5;
   font-weight: 400;
-  line-height: 4.8rem;
+  line-height: $unit * 4.8;
 
   @if $color-contrast {
     opacity: .54;
@@ -42,9 +42,9 @@
 
 @mixin typo-display-1($color-contrast: false, $use-preferred: true) {
   @include typo-preferred-font($use-preferred);
-  font-size: 3.4rem;
+  font-size: $unit * 3.4;
   font-weight: 400;
-  line-height: 4rem;
+  line-height: $unit * 4;
 
   @if $color-contrast {
     opacity: .54;
@@ -53,9 +53,9 @@
 
 @mixin typo-headline($color-contrast: false, $use-preferred: true) {
   @include typo-preferred-font($use-preferred);
-  font-size: 2.4rem;
+  font-size: $unit * 2.4;
   font-weight: 400;
-  line-height: 3.2rem;
+  line-height: $unit * 3.2;
   -moz-osx-font-smoothing: grayscale;
 
   @if $color-contrast {
@@ -65,7 +65,7 @@
 
 @mixin typo-title($color-contrast: false, $use-preferred: true) {
   @include typo-preferred-font($use-preferred);
-  font-size: 2rem;
+  font-size: $unit * 2;
   font-weight: 500;
   line-height: 1;
   letter-spacing: .02em;
@@ -77,9 +77,9 @@
 
 @mixin typo-subhead($color-contrast: false, $use-preferred: true) {
   @include typo-preferred-font($use-preferred);
-  font-size: 1.6rem;
+  font-size: $unit * 1.6;
   font-weight: 400;
-  line-height: 2.4rem;
+  line-height: $unit * 2.4;
   letter-spacing: .04em;
 
   @if $color-contrast {
@@ -89,9 +89,9 @@
 
 @mixin typo-subhead-2($color-contrast: false, $use-preferred: true) {
   @include typo-preferred-font($use-preferred);
-  font-size: 1.6rem;
+  font-size: $unit * 1.6;
   font-weight: 400;
-  line-height: 2.8rem;
+  line-height: $unit * 2.8;
   letter-spacing: .04em;
 
   @if $color-contrast {
@@ -101,8 +101,8 @@
 
 @mixin typo-body-2($color-contrast: false, $use-preferred: false) {
   @include typo-preferred-font($use-preferred);
-  font-size: 1.4rem;
-  line-height: 2.4rem;
+  font-size: $unit * 1.4;
+  line-height: $unit * 2.4;
   letter-spacing: 0;
 
   @if $use-preferred {
@@ -118,9 +118,9 @@
 
 @mixin typo-body-1($color-contrast: false, $use-preferred: false) {
   @include typo-preferred-font($use-preferred);
-  font-size: 1.4rem;
+  font-size: $unit * 1.4;
   font-weight: 400;
-  line-height: 2.4rem;
+  line-height: $unit * 2.4;
   letter-spacing: 0;
 
   @if $color-contrast {
@@ -130,7 +130,7 @@
 
 @mixin typo-caption($color-contrast: false, $use-preferred: false) {
   @include typo-preferred-font($use-preferred);
-  font-size: 1.2rem;
+  font-size: $unit * 1.2;
   font-weight: 400;
   line-height: 1;
   letter-spacing: 0;
@@ -143,7 +143,7 @@
 @mixin typo-blockquote($color-contrast: false, $use-preferred: true) {
   @include typo-preferred-font($use-preferred);
   position: relative;
-  font-size: 2.4rem;
+  font-size: $unit * 2.4;
   font-style: italic;
   font-weight: 300;
   line-height: 1.35;
@@ -167,7 +167,7 @@
 
 @mixin typo-menu($color-contrast: false, $use-preferred: true) {
   @include typo-preferred-font($use-preferred);
-  font-size: 1.4rem;
+  font-size: $unit * 1.4;
   font-weight: 500;
   line-height: 1;
   letter-spacing: 0;
@@ -179,7 +179,7 @@
 
 @mixin typo-button($color-contrast: false, $use-preferred: true) {
   @include typo-preferred-font($use-preferred);
-  font-size: 1.4rem;
+  font-size: $unit * 1.4;
   font-weight: 500;
   line-height: 1;
   text-transform: uppercase;

From b226fcd25859a411f578ce5e12aa51a8590952f0 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 24 Jul 2016 13:17:16 +0200
Subject: [PATCH 0685/1024] Merge with dev

---
 components/app_bar/index.d.ts      |  41 +++++
 components/autocomplete/index.d.ts | 105 ++++++++++++
 components/avatar/index.d.ts       |  47 +++++
 components/button/index.d.ts       | 227 +++++++++++++++++++++++++
 components/card/index.d.ts         | 102 +++++++++++
 components/checkbox/index.d.ts     |  69 ++++++++
 components/chip/index.d.ts         |  52 ++++++
 components/date_picker/index.d.ts  | 148 ++++++++++++++++
 components/dialog/index.d.ts       |  92 ++++++++++
 components/drawer/index.d.ts       |  53 ++++++
 components/dropdown/index.d.ts     | 114 +++++++++++++
 components/font_icon/index.d.ts    |  16 ++
 components/index.d.ts              |  22 +++
 components/input/index.d.ts        | 135 +++++++++++++++
 components/layout/index.d.ts       | 193 +++++++++++++++++++++
 components/link/index.d.ts         |  50 ++++++
 components/list/index.d.ts         | 264 +++++++++++++++++++++++++++++
 components/menu/index.d.ts         | 241 ++++++++++++++++++++++++++
 components/navigation/index.d.ts   |  46 +++++
 components/progress_bar/index.d.ts |  82 +++++++++
 components/radio/index.d.ts        | 101 +++++++++++
 components/ripple/index.d.ts       |  49 ++++++
 components/slider/index.d.ts       | 106 ++++++++++++
 components/snackbar/index.d.ts     |  76 +++++++++
 components/switch/index.d.ts       |  77 +++++++++
 components/table/index.d.ts        |  70 ++++++++
 components/tabs/index.d.ts         | 105 ++++++++++++
 components/time_picker/index.d.ts  | 132 +++++++++++++++
 components/tooltip/index.d.ts      |  54 ++++++
 lib/app_bar/index.d.ts             |  41 +++++
 lib/autocomplete/index.d.ts        | 105 ++++++++++++
 lib/avatar/index.d.ts              |  47 +++++
 lib/button/index.d.ts              | 227 +++++++++++++++++++++++++
 lib/card/index.d.ts                | 102 +++++++++++
 lib/checkbox/index.d.ts            |  69 ++++++++
 lib/chip/index.d.ts                |  52 ++++++
 lib/date_picker/index.d.ts         | 148 ++++++++++++++++
 lib/dialog/index.d.ts              |  92 ++++++++++
 lib/drawer/index.d.ts              |  53 ++++++
 lib/dropdown/index.d.ts            | 114 +++++++++++++
 lib/font_icon/index.d.ts           |  16 ++
 lib/index.d.ts                     |  22 +++
 lib/input/index.d.ts               | 135 +++++++++++++++
 lib/layout/index.d.ts              | 193 +++++++++++++++++++++
 lib/link/index.d.ts                |  50 ++++++
 lib/list/index.d.ts                | 264 +++++++++++++++++++++++++++++
 lib/menu/index.d.ts                | 241 ++++++++++++++++++++++++++
 lib/navigation/index.d.ts          |  46 +++++
 lib/progress_bar/index.d.ts        |  82 +++++++++
 lib/radio/index.d.ts               | 101 +++++++++++
 lib/ripple/index.d.ts              |  49 ++++++
 lib/slider/index.d.ts              | 106 ++++++++++++
 lib/snackbar/index.d.ts            |  76 +++++++++
 lib/switch/index.d.ts              |  77 +++++++++
 lib/table/index.d.ts               |  70 ++++++++
 lib/tabs/index.d.ts                | 105 ++++++++++++
 lib/time_picker/index.d.ts         | 132 +++++++++++++++
 lib/tooltip/index.d.ts             |  54 ++++++
 58 files changed, 5738 insertions(+)
 create mode 100644 components/app_bar/index.d.ts
 create mode 100644 components/autocomplete/index.d.ts
 create mode 100644 components/avatar/index.d.ts
 create mode 100644 components/button/index.d.ts
 create mode 100644 components/card/index.d.ts
 create mode 100644 components/checkbox/index.d.ts
 create mode 100644 components/chip/index.d.ts
 create mode 100644 components/date_picker/index.d.ts
 create mode 100644 components/dialog/index.d.ts
 create mode 100644 components/drawer/index.d.ts
 create mode 100644 components/dropdown/index.d.ts
 create mode 100644 components/font_icon/index.d.ts
 create mode 100644 components/index.d.ts
 create mode 100644 components/input/index.d.ts
 create mode 100644 components/layout/index.d.ts
 create mode 100644 components/link/index.d.ts
 create mode 100644 components/list/index.d.ts
 create mode 100644 components/menu/index.d.ts
 create mode 100644 components/navigation/index.d.ts
 create mode 100644 components/progress_bar/index.d.ts
 create mode 100644 components/radio/index.d.ts
 create mode 100644 components/ripple/index.d.ts
 create mode 100644 components/slider/index.d.ts
 create mode 100644 components/snackbar/index.d.ts
 create mode 100644 components/switch/index.d.ts
 create mode 100644 components/table/index.d.ts
 create mode 100644 components/tabs/index.d.ts
 create mode 100644 components/time_picker/index.d.ts
 create mode 100644 components/tooltip/index.d.ts
 create mode 100644 lib/app_bar/index.d.ts
 create mode 100644 lib/autocomplete/index.d.ts
 create mode 100644 lib/avatar/index.d.ts
 create mode 100644 lib/button/index.d.ts
 create mode 100644 lib/card/index.d.ts
 create mode 100644 lib/checkbox/index.d.ts
 create mode 100644 lib/chip/index.d.ts
 create mode 100644 lib/date_picker/index.d.ts
 create mode 100644 lib/dialog/index.d.ts
 create mode 100644 lib/drawer/index.d.ts
 create mode 100644 lib/dropdown/index.d.ts
 create mode 100644 lib/font_icon/index.d.ts
 create mode 100644 lib/index.d.ts
 create mode 100644 lib/input/index.d.ts
 create mode 100644 lib/layout/index.d.ts
 create mode 100644 lib/link/index.d.ts
 create mode 100644 lib/list/index.d.ts
 create mode 100644 lib/menu/index.d.ts
 create mode 100644 lib/navigation/index.d.ts
 create mode 100644 lib/progress_bar/index.d.ts
 create mode 100644 lib/radio/index.d.ts
 create mode 100644 lib/ripple/index.d.ts
 create mode 100644 lib/slider/index.d.ts
 create mode 100644 lib/snackbar/index.d.ts
 create mode 100644 lib/switch/index.d.ts
 create mode 100644 lib/table/index.d.ts
 create mode 100644 lib/tabs/index.d.ts
 create mode 100644 lib/time_picker/index.d.ts
 create mode 100644 lib/tooltip/index.d.ts

diff --git a/components/app_bar/index.d.ts b/components/app_bar/index.d.ts
new file mode 100644
index 000000000..35fda69e4
--- /dev/null
+++ b/components/app_bar/index.d.ts
@@ -0,0 +1,41 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface AppBarTheme {
+  /**
+   * Used for the component root element.
+   */
+  appBar?: string;
+  /**
+   * Added to the root element when the app bar is fixed.
+   */
+  fixed?: string;
+  /**
+   * Added to the root element when the app bar is flat.
+   */
+  flat?: string;
+}
+
+interface AppBarProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Determine if the bar should have position fixed or relative.
+   * @default false
+   */
+  fixed?: boolean;
+  /**
+   * If true, the AppBar shows a shadow.
+   * @default false
+   */
+  flat?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: AppBarTheme;
+}
+
+export class AppBar extends __React.Component<AppBarProps, {}> { }
+
+export default AppBar;
diff --git a/components/autocomplete/index.d.ts b/components/autocomplete/index.d.ts
new file mode 100644
index 000000000..f1b33954d
--- /dev/null
+++ b/components/autocomplete/index.d.ts
@@ -0,0 +1,105 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface AutocompleteTheme {
+  /**
+   * Used for a suggestion when it's active.
+   */
+  active?: string;
+  /**
+   * Used for the root element.
+   */
+  autocomplete?: string;
+  /**
+   * Used when the input is focused.
+   */
+  focus?: string;
+  /**
+   * Used to style the Input component.
+   */
+  input?: string;
+  /**
+   * Used for the label.
+   */
+  label?: string;
+  /**
+   * Used to style each suggestion.
+   */
+  suggestion?: string;
+  /**
+   * Used to style the suggestions container.
+   */
+  suggestions?: string;
+  /**
+   * Used for the suggestions when it's opening to the top.
+   */
+  up?: string;
+  /**
+   * Classname used for a single value.
+   */
+  value?: string;
+  /**
+   * Classname used for the values container.
+   */
+  values?: string;
+}
+
+interface AutocompleteProps extends __ReactToolbox.Props {
+  /**
+   * Determines the opening direction. It can be auto, up or down.
+   * @default auto
+   */
+  direction?: "auto" | "up" | "down";
+  /**
+   * If true, component will be disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Sets the error string for the internal input element.
+   * @default false
+   */
+  error?: string;
+  /**
+   * The text string to use for the floating label element.
+   */
+  label?: string;
+  /**
+   * If true, component can hold multiple values.
+   */
+  multiple?: boolean;
+  /**
+   * Callback function that is fired when the components's value changes.
+   * @default auto
+   */
+  onChange?: __React.FormEventHandler;
+  /**
+   * Determines if the selected list is shown above or below input. It can be above or below.
+   * @default above
+   */
+  selectedPosition?: "above" | "below";
+  /**
+   * If true, the list of suggestions will not be filtered when a value is selected.
+   * @default false
+   */
+  showSuggestionsWHenValueIsSet?: boolean;
+  /**
+   * Object of key/values or array representing all items suggested.
+   */
+  source?: any;
+  /**
+   * Determines how suggestions are supplied.
+   * @default start
+   */
+  suggestionMatch?: "start" | "anywhere" | "word";
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: AutocompleteTheme;
+  /**
+   * Value or array of values currently selected component.
+   */
+  value?: any;
+}
+
+export class Autocomplete extends __React.Component<AutocompleteProps, {}> { }
+
+export default Autocomplete;
diff --git a/components/avatar/index.d.ts b/components/avatar/index.d.ts
new file mode 100644
index 000000000..0d4fbd238
--- /dev/null
+++ b/components/avatar/index.d.ts
@@ -0,0 +1,47 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface AvatarTheme {
+  /**
+   * Used for the root class of the element.
+   */
+  avatar?: string;
+  /**
+   * Added to the root element when the component has image.
+   */
+  image?: string;
+  /**
+   * Used for the root element if the component shows the letter.
+   */
+  letter?: string;
+}
+
+interface AvatarProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Set to true if your image is not squared so it will be used as a cover for the element.
+   */
+  cover?: boolean;
+  /**
+   * A key to identify an Icon from Material Design Icons or a custom Icon Element.
+   */
+  icon?: __React.ReactNode | string;
+  /**
+   * An image source or an image element.
+   */
+  image?: __React.ReactNode | string;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: AvatarTheme;
+  /**
+   * A title for the image. If no image is provided, the first letter will be displayed as the avatar.
+   */
+  title?: string;
+}
+
+export class Avatar extends __React.Component<AvatarProps, {}> { }
+
+export default Avatar;
diff --git a/components/button/index.d.ts b/components/button/index.d.ts
new file mode 100644
index 000000000..60721b880
--- /dev/null
+++ b/components/button/index.d.ts
@@ -0,0 +1,227 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface ButtonTheme {
+  /**
+   * Used for the root in case button is accent.
+   */
+  accent?: string;
+  /**
+   * Used for the root element in any button.
+   */
+  button?: string;
+  /**
+   * Used when the button is flat for the root element.
+   */
+  flat?: string;
+  /**
+   * Used when the button is floating for the root element.
+   */
+  floating?: string;
+  /**
+   * For the icon inside a button.
+   */
+  icon?: string;
+  /**
+   * Used when colors are inverted.
+   */
+  inverse?: string;
+  /**
+   * Used for mini floating buttons.
+   */
+  mini?: string;
+  /**
+   * Used for neutral colored buttons.
+   */
+  neutral?: string;
+  /**
+   * Used for primary buttons when button is primary.
+   */
+  primary?: string;
+  /**
+   * Used when the button is raised for root element.
+   */
+  raised?: string;
+  /**
+   * Used for the ripple element.
+   */
+  rippleWrapper?: string;
+  /**
+   * Used for toggle buttons in the root element.
+   */
+  toggle?: string;
+}
+
+interface ButtonProps extends __ReactToolbox.Props {
+  /**
+   * Indicates if the button should have accent color.
+   * @default false
+   */
+  accent?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If true, the button will have a flat look.
+   * @default false
+   */
+  flat?: boolean;
+  /**
+   * If true, the button will have a floating look.
+   * @default false
+   */
+  floating?: boolean;
+  /**
+   * Creates a link for the button.
+   */
+  href?: string;
+  /**
+   * Value of the icon (See Font Icon Component).
+   */
+  icon?: __React.ReactNode | string;
+  /**
+   * If true, the neutral colors are inverted. Useful to put a button over a dark background.
+   */
+  inverse?: boolean;
+  /**
+   * The text string to use for the name of the button.
+   */
+  label?: string;
+  /**
+   * To be used with floating button. If true, the button will be smaller.
+   * @default false
+   */
+  mini?: boolean;
+  /**
+   * Set it to false if you don't want the neutral styles to be included.
+   * @default true
+   */
+  neutral?: boolean;
+  /**
+   * Fires after the mouse leaves the Component.
+   */
+  onMouseLeave?: __React.MouseEventHandler;
+  /**
+   * Fires after the mouse is released from the Component.
+   */
+  OnMouseUp?: __React.MouseEventHandler;
+  /**
+   * Indicates if the button should have primary color.
+   * @default false
+   */
+  primary?: boolean;
+  /**
+   * If true, the button will have a raised look.
+   * @default false
+   */
+  raised?: boolean;
+  /**
+   * If true, component will have a ripple effect on click.
+   * @default true
+   */
+  ripple?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ButtonTheme;
+}
+
+export class Button extends __React.Component<ButtonProps, {}> { }
+
+export interface IconButtonTheme {
+  /**
+   * Used for the root in case button is accent.
+   */
+  accent?: string;
+  /**
+   * Used for the root element in any button.
+   */
+  button?: string;
+  /**
+   * For the icon inside a button.
+   */
+  icon?: string;
+  /**
+   * Used when colors are inverted.
+   */
+  inverse?: string;
+  /**
+   * Used for neutral colored buttons.
+   */
+  neutral?: string;
+  /**
+   * Used for primary buttons when button is primary.
+   */
+  primary?: string;
+  /**
+   * Used for the ripple element.
+   */
+  rippleWrapper?: string;
+  /**
+   * Used for toggle buttons in the root element.
+   */
+  toggle?: string;
+}
+
+interface IconButtonProps extends __ReactToolbox.Props {
+  /**
+   * Indicates if the button should have accent color.
+   * @default false
+   */
+  accent?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Creates a link for the button.
+   */
+  href?: string;
+  /**
+   * Value of the icon (See Font Icon Component).
+   */
+  icon?: __React.ReactNode | string;
+  /**
+   * If true, the neutral colors are inverted. Useful to put a button over a dark background.
+   */
+  inverse?: boolean;
+  /**
+   * Set it to false if you don't want the neutral styles to be included.
+   * @default true
+   */
+  neutral?: boolean;
+  /**
+   * Fires after the mouse leaves the Component.
+   */
+  onMouseLeave?: __React.MouseEventHandler;
+  /**
+   * Fires after the mouse is released from the Component.
+   */
+  OnMouseUp?: __React.MouseEventHandler;
+  /**
+   * Indicates if the button should have primary color.
+   * @default false
+   */
+  primary?: boolean;
+  /**
+   * If true, component will have a ripple effect on click.
+   * @default true
+   */
+  ripple?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: IconButtonTheme;
+}
+
+export class IconButton extends __React.Component<IconButtonProps, {}> { }
diff --git a/components/card/index.d.ts b/components/card/index.d.ts
new file mode 100644
index 000000000..a05b6a703
--- /dev/null
+++ b/components/card/index.d.ts
@@ -0,0 +1,102 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface CardTheme {
+  card?: string;
+  raised?: string;
+}
+
+interface CardProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  raised?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: CardTheme;
+}
+
+export class Card extends __React.Component<CardProps, {}> { }
+
+export interface CardActionsTheme {
+  cardActions?: string;
+}
+
+interface CardActionsProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: CardActionsTheme;
+}
+
+export class CardActions extends __React.Component<CardActionsProps, {}> { }
+
+export interface CardMediaTheme {
+  cardMedia?: string;
+  content?: string;
+  contentOverlay?: string;
+  square?: string;
+  wide?: string;
+}
+
+interface CardMediaProps extends __ReactToolbox.Props {
+  aspectRatio?: "wide" | "square";
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  color?: string;
+  contentOverlay?: boolean;
+  image?: __React.ReactNode | string;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: CardMediaTheme;
+}
+
+export class CardMedia extends __React.Component<CardMediaProps, {}> { }
+
+export interface CardTextTheme {
+  cardText?: string;
+}
+
+interface CardTextProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: CardTextTheme;
+}
+
+export class CardText extends __React.Component<CardTextProps, {}> { }
+
+export interface CardTitleTheme {
+  large?: string;
+  title?: string;
+  small?: string;
+  subtitle?: string;
+}
+
+interface CardTitleProps extends __ReactToolbox.Props {
+  avatar?: __React.ReactNode | string;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  subtitle?: __React.ReactNode | string;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: CardTitleTheme;
+  title?: __React.ReactNode | string;
+}
+
+export class CardTitle extends __React.Component<CardTitleProps, {}> { }
diff --git a/components/checkbox/index.d.ts b/components/checkbox/index.d.ts
new file mode 100644
index 000000000..2f5d2d678
--- /dev/null
+++ b/components/checkbox/index.d.ts
@@ -0,0 +1,69 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface CheckboxTheme {
+  /**
+   * Used as root in the check element.
+   */
+  check?: string;
+  /**
+   * Used for the check element when it's checked.
+   */
+  checked?: string;
+  /**
+   * Used when the component is disabled.
+   */
+  disabled?: string;
+  /**
+   * Used as the root class of the component.
+   */
+  field?: string;
+  /**
+   * Used for the input element.
+   */
+  input?: string;
+  /**
+   * Used for the ripple component.
+   */
+  ripple?: string;
+  /**
+   * Used for the text label.
+   */
+  text?: string;
+}
+
+interface CheckboxProps extends __ReactToolbox.Props {
+  /**
+   * Value for the checkbox, can be true or false.
+   * @default false
+   */
+  checked?: boolean;
+  /**
+   * If true, the checkbox shown as disabled and cannot be modified.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Text label to attach next to the checkbox element.
+   */
+  label?: __React.ReactNode | string;
+  /**
+   * The name of the field to set in the input checkbox.
+   */
+  name?: string;
+  /**
+   * Callback called when the checkbox is blurred.
+   */
+  onBlur?: __React.FocusEventHandler;
+  /**
+   * Callback called when the checkbox value is changed.
+   */
+  onChange?: __React.MouseEventHandler;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: CheckboxTheme;
+}
+
+export class Checkbox extends __React.Component<CheckboxProps, {}> { }
+
+export default Checkbox;
diff --git a/components/chip/index.d.ts b/components/chip/index.d.ts
new file mode 100644
index 000000000..3ee44821a
--- /dev/null
+++ b/components/chip/index.d.ts
@@ -0,0 +1,52 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface ChipTheme {
+  /**
+   * Added to the root element when the component includes an avatar.
+   */
+  avatar?: string;
+  /**
+   * Used for the root element.
+   */
+  chip?: string;
+  /**
+   * Added to the root element when the component is deletable.
+   */
+  deletable?: string;
+  /**
+   * Used for the delete element wrapper.
+   */
+  delete?: string;
+  /**
+   * Used for the delete icon.
+   */
+  deleteIcon?: string;
+  /**
+   * Used for the delete svg inner layer.
+   */
+  deleteX?: string;
+}
+
+interface ChipProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * If true, the chip will be rendered with a delete icon.
+   * @default false
+   */
+  deletable?: boolean;
+  /**
+   * Callback to be invoked when the delete icon is clicked.
+   */
+  onDeleteClick?: __React.MouseEventHandler;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ChipTheme;
+}
+
+export class Chip extends __React.Component<ChipProps, {}> { }
+
+export default Chip;
diff --git a/components/date_picker/index.d.ts b/components/date_picker/index.d.ts
new file mode 100644
index 000000000..1722fdacc
--- /dev/null
+++ b/components/date_picker/index.d.ts
@@ -0,0 +1,148 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface DatePickerTheme {
+  /**
+   * Used for the active day and year.
+   */
+  active?: string;
+  /**
+   * Used for the buttons in the dialog.
+   */
+  button?: string;
+  /**
+   * Used for the calendar root element.
+   */
+  calendar?: string;
+  /**
+   * Used as wrapper for the calendar component inside dialog.
+   */
+  calendarWrapper?: string;
+  /**
+   * Used for the date element inside header.
+   */
+  date?: string;
+  /**
+   * Used for the day element inside the calendar.
+   */
+  day?: string;
+  /**
+   * Used for the list of days inside a month.
+   */
+  days?: string;
+  /**
+   * Used for the dialog component.
+   */
+  dialog?: string;
+  /**
+   * Added to day element when day is disabled.
+   */
+  disabled?: string;
+  /**
+   * Used for the dialog header,.
+   */
+  header?: string;
+  /**
+   * Used for Input element that opens the picker.
+   */
+  input?: string;
+  /**
+   * Used for the month root element.
+   */
+  month?: string;
+  /**
+   * Added to the root dialog when months are displayed.
+   */
+  monthsDisplay?: string;
+  /**
+   * Used for the next month icon.
+   */
+  next?: string;
+  /**
+   * Used for the prev month icon.
+   */
+  prev?: string;
+  /**
+   * Used for the month title element.
+   */
+  title?: string;
+  /**
+   * Used for the weekdays wrapper.
+   */
+  week?: string;
+  /**
+   * Used for the year element inside header.
+   */
+  year?: string;
+  /**
+   * Used for the years list in years view.
+   */
+  years?: string;
+  /**
+   * Added to the root dialog when years are displayed.
+   */
+  yearsDisplay?: string;
+}
+
+interface DatePickerProps extends __ReactToolbox.Props {
+  /**
+   * Automatically selects a date upon clicking on a day
+   * @default false
+   */
+  autoOk?: boolean;
+  /**
+   * Give an error node to display under the field.
+   */
+  error?: string;
+  /**
+   * A key to identify an Icon from Material Design Icons or a custom Icon Element.
+   */
+  icon?: __React.ReactNode | string;
+  /**
+   * This class will be applied to Input component of DatePicker.
+   */
+  inputClassName?: string;
+  /**
+   * Function to format the date displayed on the input.
+   */
+  inputFormat?: Function;
+  /**
+   * The text string to use for the floating label element in the input component.
+   */
+  label?: string;
+  /**
+   * Date object with the maximum selectable date.
+   */
+  maxDate?: Date;
+  /**
+   * Date object with the minimum selectable date.
+   */
+  minDate?: Date;
+  /**
+   * Name for the input field.
+   */
+  name?: string;
+  /**
+   * Callback called when the picker value is changed.
+   */
+  onChange?: __React.MouseEventHandler;
+  /**
+   * Callback called when the ESC key is pressed with the overlay active.
+   */
+  onEscKeyDown?: __React.KeyboardEventHandler;
+  /**
+   * Callback to be invoked when the dialog overlay is clicked.
+   */
+  onOverlayClick?: __React.MouseEventHandler;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: DatePickerTheme;
+  /**
+   * Date object with the currently selected date.
+   */
+  value?: Date | string;
+}
+
+export class DatePicker extends __React.Component<DatePickerProps, {}> { }
+
+export default DatePicker;
diff --git a/components/dialog/index.d.ts b/components/dialog/index.d.ts
new file mode 100644
index 000000000..1fd938766
--- /dev/null
+++ b/components/dialog/index.d.ts
@@ -0,0 +1,92 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface DialogTheme {
+  /**
+   * Used for the root when the dialog is active.
+   */
+  active?: string;
+  /**
+   * Used to wrap the dialog body.
+   */
+  body?: string;
+  /**
+   * Used in buttons when the dialog implements actions.
+   */
+  button?: string;
+  /**
+   * Used for the root element.
+   */
+  dialog?: string;
+  /**
+   * Used for the navigation element when it implements actions.
+   */
+  navigation?: string;
+  /**
+   * Used for the title element of the dialog.
+   */
+  title?: string;
+}
+
+interface DialogActionProps {
+  /**
+   * The text string to use for the name of the button.
+   */
+  label?: string;
+  /**
+   * Callback called when the component is clicked.
+   */
+  onClick?: __React.MouseEventHandler;
+}
+
+interface DialogProps extends __ReactToolbox.Props {
+  /**
+   * A array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons.
+   */
+  actions?: DialogActionProps[];
+  /**
+   * If true, the dialog will be active.
+   * @default false
+   */
+  active?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Callback called when the ESC key is pressed with the overlay active.
+   */
+  onEscKeyDown?: __React.KeyboardEventHandler;
+  /**
+   * Callback to be invoked when the dialog overlay is clicked.
+   */
+  onOverlayClick?: __React.MouseEventHandler;
+  /**
+   * Callback called when the mouse button is pressed on the overlay.
+   */
+  onOverlayMouseDown?: __React.MouseEventHandler;
+  /**
+   * Callback called when the mouse is moving over the overlay.
+   */
+  onOverlayMouseMove?: __React.MouseEventHandler;
+  /**
+   * Callback called when the mouse button is released over the overlay.
+   */
+  onOverlayMouseUp?: __React.MouseEventHandler;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: DialogTheme;
+  /**
+   * The text string to use as standar title of the dialog.
+   */
+  title?: string;
+  /**
+   * Used to determine the size of the dialog. It can be small, normal or large.
+   * @default normal
+   */
+  type?: string;
+}
+
+export class Dialog extends __React.Component<DialogProps, {}> { }
+
+export default Dialog;
diff --git a/components/drawer/index.d.ts b/components/drawer/index.d.ts
new file mode 100644
index 000000000..3832c6e47
--- /dev/null
+++ b/components/drawer/index.d.ts
@@ -0,0 +1,53 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface DrawerTheme {
+  /**
+   * Used for the root class when the drawer is active.
+   */
+  active?: string;
+  /**
+   * Used for the drawer content.
+   */
+  content?: string;
+  /**
+   * Root class.
+   */
+  drawer?: string;
+  /**
+   * Added to the root class when drawer is to the left.
+   */
+  left?: string;
+  /**
+   * Added to the root class when drawer is to the right.
+   */
+  right?: string;
+}
+
+interface DrawerProps extends __ReactToolbox.Props {
+  /**
+   * If true, the drawer will be visible.
+   * @default false
+   */
+  active?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Callback function to be invoked when the overlay is clicked.
+   */
+  onOverlayClick?: __React.MouseEventHandler;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: DrawerTheme;
+  /**
+   * Type of drawer. It can be left or right to display the drawer on the left or right side of the screen.
+   * @default left
+   */
+  type?: "left" | "right";
+}
+
+export class Drawer extends __React.Component<DrawerProps, {}> { }
+
+export default Drawer;
diff --git a/components/dropdown/index.d.ts b/components/dropdown/index.d.ts
new file mode 100644
index 000000000..886b0dff9
--- /dev/null
+++ b/components/dropdown/index.d.ts
@@ -0,0 +1,114 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface DropdownTheme {
+  /**
+   * Added to the root element when the dropdown is active.
+   */
+  active?: string;
+  /**
+   * Added to the root element when it's disabled.
+   */
+  disabled?: string;
+  /**
+   * Root element class.
+   */
+  dropdown?: string;
+  /**
+   * Used for the error element.
+   */
+  error?: string;
+  /**
+   * Added to the inner wrapper if it's errored.
+   */
+  errored?: string;
+  /**
+   * Used for the inner wrapper of the component.
+   */
+  field?: string;
+  /**
+   * Used for the the label element.
+   */
+  label?: string;
+  /**
+   * Used to highlight the selected value.
+   */
+  selected?: string;
+  /**
+   * Used as a wrapper for the given template value.
+   */
+  templateValue?: string;
+  /**
+   * Added to the root element when it's opening up.
+   */
+  up?: string;
+  /**
+   * Used for each value in the dropdown component.
+   */
+  value?: string;
+  /**
+   * Used for the list of values.
+   */
+  values?: string;
+}
+
+interface DropdownProps extends __ReactToolbox.Props {
+  /**
+   * If true the dropdown will preselect the first item if the supplied value matches none of the options' values.
+   * @default true
+   */
+  allowBlank?: boolean;
+  /**
+   * If true, the dropdown will open up or down depending on the position in the screen.
+   * @default true
+   */
+  auto?: boolean;
+  /**
+   * Set the component as disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Give an error string to display under the field.
+   */
+  error?: string;
+  /**
+   * The text string to use for the floating label element.
+   */
+  label?: string;
+  /**
+   * Name for the input field.
+   */
+  name?: string;
+  /**
+   * Callback function that is fired when the component is blurred.
+   */
+  onBlur?: __React.FocusEventHandler;
+  /**
+   * Callback function that is fired when the component's value changes.
+   */
+  onChange?: __React.FormEventHandler;
+  /**
+   * Callback function that is fired when the component is focused.
+   */
+  onFocus?: __React.FocusEventHandler;
+  /**
+   * Array of data objects with the data to represent in the dropdown.
+   */
+  source: any[];
+  /**
+   * Callback function that returns a JSX template to represent the element.
+   */
+  template?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: DropdownTheme;
+  /**
+   * Default value using JSON data.
+   */
+  value?: string | number;
+}
+
+export class Dropdown extends __React.Component<DropdownProps, {}> { }
+
+export default Dropdown;
diff --git a/components/font_icon/index.d.ts b/components/font_icon/index.d.ts
new file mode 100644
index 000000000..c3f05587a
--- /dev/null
+++ b/components/font_icon/index.d.ts
@@ -0,0 +1,16 @@
+import __ReactToolbox from "../index.d.ts";
+
+interface FontIconProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * The key string for the icon you want be displayed.
+   */
+  value?: __React.ReactNode | string;
+}
+
+export class FontIcon extends __React.Component<FontIconProps, {}> { }
+
+export default FontIcon;
diff --git a/components/index.d.ts b/components/index.d.ts
new file mode 100644
index 000000000..7739a9d4e
--- /dev/null
+++ b/components/index.d.ts
@@ -0,0 +1,22 @@
+export declare namespace __ReactToolbox {
+  interface Props {
+    /**
+     * Set a class for the root component.
+     */
+    className?: string;
+    /**
+     * Key used to uniquely identify the element within an Array.
+     */
+    key?: string | number;
+    /**
+     * Callback called when the component is clicked.
+     */
+    onClick?: __React.MouseEventHandler;
+    /**
+     * Set inline style for the root component.
+     */
+    style?: __React.CSSProperties;
+  }
+}
+
+export default __ReactToolbox;
diff --git a/components/input/index.d.ts b/components/input/index.d.ts
new file mode 100644
index 000000000..719ea9287
--- /dev/null
+++ b/components/input/index.d.ts
@@ -0,0 +1,135 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface InputTheme {
+  /**
+   * Used for the bar under the input.
+   */
+  bar?: string;
+  /**
+   * Used for the counter element.
+   */
+  counter?: string;
+  /**
+   * Added to the root class when input is disabled.
+   */
+  disabled?: string;
+  /**
+   * Used for the text error.
+   */
+  error?: string;
+  /**
+   * Added to the root class when input is errored.
+   */
+  errored?: string;
+  /**
+   * Used when the input is hidden.
+   */
+  hidden?: string;
+  /**
+   * Used for the hint text.
+   */
+  hint?: string;
+  /**
+   * Used for the icon in case the input has icon.
+   */
+  icon?: string;
+  /**
+   * Used as root class for the component.
+   */
+  input?: string;
+  /**
+   * Used for the HTML input element.
+   */
+  inputElement?: string;
+  /**
+   * Used in case the input is required.
+   */
+  required?: string;
+  /**
+   * Added to the root class if the input has icon.
+   */
+  withIcon?: string;
+}
+
+interface InputProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Give an error node to display under the field.
+   */
+  error?: string;
+  /**
+   * Indicates if the label is floating in the input field or not.
+   * @default true
+   */
+  floating?: boolean;
+  /**
+   * The text string to use for hint text element.
+   */
+  hint?: string;
+  /**
+   * Name of an icon to use as a label for the input.
+   */
+  icon?: __React.ReactNode | string;
+  /**
+   * The text string to use for the floating label element.
+   */
+  label?: string;
+  /**
+   * Specifies the maximum number of characters allowed in the component
+   */
+  maxLength?: number;
+  /**
+   * If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.
+   * @default false
+   */
+  multiLine?: boolean;
+  /**
+   * Name for the input field.
+   */
+  name?: string;
+  /**
+   * Callback function that is fired when component is blurred.
+   */
+  onBlur?: __React.FocusEventHandler;
+  /**
+   * Callback function that is fired when the component's value changes
+   */
+  onChange?: __React.FormEventHandler;
+  /**
+   * Callback function that is fired when component is focused.
+   */
+  onFocus?: __React.FocusEventHandler;
+  /**
+   * Callback function that is fired when a key is pressed.
+   */
+  onKeyPress?: __React.MouseEventHandler;
+  /**
+   * If true, the html input has a required attribute.
+   * @default false
+   */
+  required?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: InputTheme;
+  /**
+   * Type of the input element. It can be a valid HTML5 input type
+   */
+  type?: string;
+  /**
+   * Current value of the input element.
+   */
+  value?: any;
+}
+
+export class Input extends __React.Component<InputProps, {}> { }
+
+export default Input;
diff --git a/components/layout/index.d.ts b/components/layout/index.d.ts
new file mode 100644
index 000000000..ad2505d7f
--- /dev/null
+++ b/components/layout/index.d.ts
@@ -0,0 +1,193 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface LayoutTheme {
+  /**
+   * Class used in the container to position and align inner items.
+   */
+  layout?: string;
+}
+
+interface LayoutProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: [NavDrawer | Panel | Sidebar];
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: LayoutTheme;
+}
+
+export class Layout extends __React.Component<LayoutProps, {}> { }
+
+export interface NavDrawerTheme {
+  /**
+   * Used when the drawer is active.
+   */
+  active?: string;
+  /**
+   * Used for the content of the drawer.
+   */
+  drawerContent?: string;
+  /**
+   * Added to the root class for large drawer.
+   */
+  lgPermangent?: string;
+  /**
+   * Added to the root class for medium drawer.
+   */
+  mdPermangent?: string;
+  /**
+   * Root class for the drawer.
+   */
+  navDrawer?: string;
+  /**
+   * Added to the root class if positioning is pinned.
+   */
+  pinned?: string;
+  /**
+   * Used as a wrapper for the drawer content.
+   */
+  scrim?: string;
+  /**
+   * Added to the drawer content if its scrollable.
+   */
+  scrollY?: string;
+  /**
+   * Added to the root class for small drawer.
+   */
+  smPermanent?: string;
+  /**
+   * Added to the root class if width is wide.
+   */
+  wide?: string;
+  /**
+   * Added to the root class for extra big drawer.
+   */
+  xlPermanent?: string;
+  /**
+   * Added to the root class for super big drawer.
+   */
+  xxlPermangent?: string;
+  /**
+   * Added to the root class for largest possible drawer.
+   */
+  xxxlPermangent?: string;
+}
+
+interface NavDrawerProps extends __ReactToolbox.Props {
+  /**
+   * If true, the drawer will be shown as an overlay.
+   * @default false
+   */
+  active?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Callback function to be invoked when the overlay is clicked.
+   */
+  onOverlayClick?: __React.MouseEventHandler;
+  /**
+   * The breakpoint at which the drawer is automatically pinned.
+   */
+  permanentAt?: "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
+  /**
+   * If true, the drawer will be pinned open. pinned takes precedence over active.
+   * @default false
+   */
+  pinned?: boolean;
+  /**
+   * If true, the drawer will vertically scroll all content.
+   * @default false
+   */
+  scrollY?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: NavDrawerTheme;
+  /**
+   * 320px or 400px. Only applicable above the sm breakpoint.
+   * @default normal
+   */
+  width?: "normal" | "wide";
+}
+
+export class NavDrawer extends __React.Component<NavDrawerProps, {}> { }
+
+export interface PanelTheme {
+  /**
+   * Used as the root class of the panel component.
+   */
+  panel?: string;
+  /**
+   * Used in case the panel is scrollable.
+   */
+  scrollY?: string;
+}
+
+interface PanelProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * If true, the panel will vertically scroll all content.
+   * @default false
+   */
+  scrollY?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: PanelTheme;
+}
+
+export class Panel extends __React.Component<PanelProps, {}> { }
+
+export interface SidebarTheme {
+  /**
+   * Added to the root class if sidebar is pinned.
+   */
+  pinned?: string;
+  /**
+   * Add to the content of sidebar if its scrollable.
+   */
+  scrollY?: string;
+  /**
+   * Root class of the sidebar.
+   */
+  sidebar?: string;
+  /**
+   * Used in for the content element of the sidebar.
+   */
+  sidebarContent?: string;
+}
+
+interface SidebarProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * If true, the sidebar will be pinned open.
+   * @default false
+   */
+  pinned?: boolean;
+  /**
+   * If true, the sidebar will vertically scroll all content
+   * @default false
+   */
+  scrollY?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: SidebarTheme;
+  /**
+   * Width in standard increments (1-12) or percentage (25, 33, 50, 66, 75, 100)
+   * @default 5
+   */
+  width?: number; // 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 25 | 33 | 50 | 66 | 75 | 100;
+}
+
+export class Sidebar extends __React.Component<SidebarProps, {}> { }
diff --git a/components/link/index.d.ts b/components/link/index.d.ts
new file mode 100644
index 000000000..00e18f3d0
--- /dev/null
+++ b/components/link/index.d.ts
@@ -0,0 +1,50 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface LinkTheme {
+  /**
+   * Added to the root element if the Link is active.
+   */
+  active?: string;
+  /**
+   * Used for the icon element if it's present.
+   */
+  icon?: string;
+  /**
+   * Used for the root element.
+   */
+  link?: string;
+}
+
+interface LinkProps extends __ReactToolbox.Props {
+  /**
+   * If true, adds active style to link.
+   * @default false
+   */
+  active?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Sets a count number.
+   */
+  count?: number;
+  /**
+   * Sets the anchor link.
+   */
+  href?: string;
+  /**
+   * An icon key string to include a FontIcon component in front of the text.
+   */
+  icon?: __React.ReactNode | string;
+  /**
+   * The text string used for the text content of the link.
+   */
+  label?: string;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: LinkTheme;
+}
+
+export class Link extends __React.Component<LinkProps, {}> { }
diff --git a/components/list/index.d.ts b/components/list/index.d.ts
new file mode 100644
index 000000000..cd0f6e7aa
--- /dev/null
+++ b/components/list/index.d.ts
@@ -0,0 +1,264 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface ListTheme {
+  /**
+   * Used for the root element of the list.
+   */
+  list?: string;
+}
+
+interface ListProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * If true, each element in the list will have a ripple effect on click
+   * @default false
+   */
+  ripple?: boolean;
+  /**
+   * If true, the elements in the list will display a hover effect and a pointer cursor.
+   * @default false
+   */
+  selectable?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ListTheme;
+}
+
+export class List extends __React.Component<ListProps, {}> { }
+
+export interface ListCheckboxTheme {
+  /**
+   * Used as a wrapper class for the subheader element.
+   */
+  checkbox?: string;
+  /**
+   * Added to the checkbox element.
+   */
+  checkboxItem?: string;
+  /**
+   * Added to the inner content if its a disabled item.
+   */
+  disabled?: string;
+  /**
+   * Used for the inner content of a list item.
+   */
+  item?: string;
+  /**
+   * Used for the content wrapper element in list item.
+   */
+  itemContentRoot?: string;
+  /**
+   * Added to the text inside of the list item.
+   */
+  itemText?: string;
+  /**
+   * Added to the content wrapper element if size is large.
+   */
+  large?: string;
+  /**
+   * Added to the text inside of the list item if its primary.
+   */
+  primary?: string;
+}
+
+interface ListCheckboxProps extends __ReactToolbox.Props {
+  /**
+   * Main text of the item. Required.
+   */
+  caption?: string;
+  /**
+   * If true the checkbox appears checked by default.
+   * @default false
+   */
+  checked?: boolean;
+  /**
+   * If true, the item is displayed as disabled and it's not clickable.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Secondary text to display under the caption.
+   */
+  legend?: string;
+  /**
+   * Name for the checkbox input item.
+   */
+  name?: string;
+  /**
+   * Callback called when the input element is blurred.
+   */
+  onBlur?: __React.FocusEventHandler;
+  /**
+   * Callback called when the input element is changed.
+   */
+  onChange?: __React.FormEventHandler;
+  /**
+   * Callback called when the input element is focused.
+   */
+  onFocus?: __React.FocusEventHandler;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ListCheckboxTheme;
+}
+
+export class ListCheckbox extends __React.Component<ListCheckboxProps, {}> { }
+
+export interface ListDividerTheme {
+  /**
+   * Added to the root element.
+   */
+  divider?: string;
+  /**
+   * Added to root element if inset is true.
+   */
+  inset?: string;
+}
+
+interface ListDividerProps extends __ReactToolbox.Props {
+  /**
+   * If true, will leave a space at the left side.
+   */
+  inset?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ListDividerTheme;
+}
+
+export class ListDivider extends __React.Component<ListDivider, {}> { }
+
+export interface ListItemTheme {
+  /**
+   * Added to the inner content if its a disabled item.
+   */
+  disabled?: string;
+  /**
+   * Used for the inner content of a list item.
+   */
+  item?: string;
+  /**
+   * Used for each action element (left/right).
+   */
+  itemAction?: string;
+  /**
+   * Used for the content wrapper element in list item.
+   */
+  itemContentRoot?: string;
+  /**
+   * Added to the text inside of the list item.
+   */
+  itemText?: string;
+  /**
+   * Added to the content wrapper element if size is large.
+   */
+  large?: string;
+  /**
+   * Added for the element that wraps left actions.
+   */
+  left?: string;
+  /**
+   * Used for the root element of the list.
+   */
+  listItem?: string;
+  /**
+   * Added to the text inside of the list item if its primary.
+   */
+  primary?: string;
+  /**
+   * Added for the element that wraps right actions.
+   */
+  right?: string;
+  /**
+   * Added to the inner content if its a selectable item.
+   */
+  selectable?: string;
+}
+
+interface ListItemProps extends __ReactToolbox.Props {
+  /**
+   * A string URL to specify an avatar in the left side of the item.
+   */
+  avatar?: __React.ReactNode | string;
+  /**
+   * Main text of the item.
+   */
+  caption?: string;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * If true, the item is displayed as disabled and is not clickable.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * An element that will be displayed as the item. If set, this will override caption and legend.
+   */
+  itemContent?: __React.ReactNode;
+  /**
+   * A list of elements that are placed on the left side of the item and after the avatar attribute.
+   */
+  leftActions?: __React.ReactNode;
+  /**
+   * A string key of a font icon or element to display an icon in the left side of the item.
+   */
+  leftIcon?: __React.ReactNode | string;
+  /**
+   * Secondary text to display under the caption.
+   */
+  legend?: string;
+  /**
+   * A list of elements that are placed on the right side of the item and after the rightIcon attribute.
+   */
+  rightActions?: __React.ReactNode;
+  /**
+   * The same as the leftIcon but in this case the icon is displayed in the right side.
+   */
+  rightIcon?: __React.ReactNode | string;
+  /**
+   * If true, the item displays a ripple effect on click. By default it's inherited from the parent element.
+   */
+  ripple?: boolean;
+  /**
+   * If true, the elements in the list will display a hover effect and a pointer cursor. Inherited from the parent.
+   * @default false
+   */
+  selectable?: boolean;
+  /**
+   * Classnames object defining the component style.
+   * @default false
+   */
+  theme?: ListItemTheme;
+  /**
+   * In case you want to provide the item as a link, you can pass this property to specify the href.
+   */
+  to?: string;
+}
+
+export class ListItem extends __React.Component<ListItemProps, {}> { }
+
+export interface ListSubHeaderTheme {
+  /**
+   * Used as a wrapper class for the subheader element.
+   */
+  subheader?: string;
+}
+
+interface ListSubHeaderProps extends __ReactToolbox.Props {
+  /**
+   * Text that will be displayed.
+   */
+  caption?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ListSubHeaderTheme;
+}
+
+export class ListSubHeader extends __React.Component<ListSubHeaderProps, {}> { }
diff --git a/components/menu/index.d.ts b/components/menu/index.d.ts
new file mode 100644
index 000000000..c2609035d
--- /dev/null
+++ b/components/menu/index.d.ts
@@ -0,0 +1,241 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface MenuTheme {
+  /**
+   * Added to the root element when menu is active.
+   */
+  active?: string;
+  /**
+   * Added to the root when position is bottom left.
+   */
+  bottomLeft?: string;
+  /**
+   * Added to the root when position is bottom right.
+   */
+  bottomRight?: string;
+  /**
+   * Used for the root element of the menu.
+   */
+  menu?: string;
+  /**
+   * Used for the inner wrapper.
+   */
+  menuInner?: string;
+  /**
+   * Used to draw the outline.
+   */
+  outline?: string;
+  /**
+   * Added to the menu in case if should have ripple.
+   */
+  rippled?: string;
+  /**
+   * Added to the root in case its static.
+   */
+  static?: string;
+  /**
+   * Added to the root when position is top left.
+   */
+  topLeft?: string;
+  /**
+   * Added to the root when position is top right.
+   */
+  topRight?: string;
+}
+
+interface MenuProps extends __ReactToolbox.Props {
+  /**
+   * If true, the menu will be displayed as opened by default.
+   * @default false
+   */
+  active?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Callback that will be called when the menu is being hidden.
+   */
+  onHide?: Function;
+  /**
+   * Callback that will be invoked when a menu item is selected.
+   */
+  onSelect?: Function;
+  /**
+   * Callback that will be invoked when the menu is being shown.
+   */
+  onShow?: Function;
+  /**
+   * If true the menu wrapper will show an outline with a soft shadow.
+   * @default false
+   */
+  outline?: boolean;
+  /**
+   * Determine the position of the menu. With static value the menu will be always shown, auto means that the it will decide the opening direction based on the current position. To force a position use topLeft, topRight, bottomLeft, bottomRight.
+   * @default static
+   */
+  position?: "auto" | "static" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
+  /**
+   * If true, the menu items will show a ripple effect on click.
+   * @default true
+   */
+  ripple?: boolean;
+  /**
+   * If true, the menu will keep a value to highlight the active child item.
+   * @default false
+   */
+  selectable?: boolean;
+  /**
+   * Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted.
+   */
+  selected?: any;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: MenuTheme;
+}
+
+export class Menu extends __React.Component<MenuProps, {}> { }
+
+export interface IconMenuTheme {
+  /**
+   * Used for the icon element.
+   */
+  icon?: string;
+  /**
+   * Used for the root element of the icon menu.
+   */
+  iconMenu?: string;
+}
+
+interface IconMenuProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Icon font key string or Element to display the opener icon.
+   * @default more_vert
+   */
+  icon?: __React.ReactNode | string;
+  /**
+   * If true, the icon will show a ripple when is clicked.
+   * @default true
+   */
+  iconRipple?: boolean;
+  /**
+   * Transferred to the Menu component.
+   * @default true
+   */
+  menuRipple?: boolean;
+  /**
+   * Callback that will be called when the menu is being hidden.
+   */
+  onHide?: Function;
+  /**
+   * Callback that will be invoked when a menu item is selected.
+   */
+  onSelect?: Function;
+  /**
+   * Callback that will be invoked when the menu is being shown.
+   */
+  onShow?: Function;
+  /**
+   * Determines the position of the menu. This property is transferred to the inner Menu component.
+   * @default auto
+   */
+  position?: "auto" | "static" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
+  /**
+   * If true, the menu will keep a value to highlight the active child item.
+   * @default false
+   */
+  selectable?: boolean;
+  /**
+   * Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted.
+   */
+  selected?: any;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: IconMenuTheme;
+}
+
+export class IconMenu extends __React.Component<IconMenuProps, {}> { }
+
+export interface MenuDividerTheme {
+  /**
+   *
+   */
+  menuDivider?: string;
+}
+
+interface MenuDividerProps extends __ReactToolbox.Props {
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: MenuDividerTheme;
+}
+
+export class MenuDivider extends __React.Component<MenuDividerProps, {}> { }
+
+export interface MenuItemTheme {
+  /**
+   * Used for the caption inside the item.
+   */
+  caption?: string;
+  /**
+   * Added to the root element if it's disabled.
+   */
+  disabled?: string;
+  /**
+   * Used for the icon element if exists.
+   */
+  icon?: string;
+  /**
+   * Used as the root class for the component.
+   */
+  menuItem?: string;
+  /**
+   * Added to the root element in case it's selected.
+   */
+  selected?: string;
+  /**
+   * Used for the shortcut element if exists.
+   */
+  shortcut?: string;
+}
+
+interface MenuItemProps extends __ReactToolbox.Props {
+  /**
+   * The text to include in the menu item. Required.
+   */
+  caption: string;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * If true, the item will be displayed as disabled and is not selectable.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Icon font key string or Element to display in the right side of the option.
+   */
+  icon?: __React.ReactNode | string;
+  /**
+   * Transferred from the Menu component for selectable menus. Indicates if it's the current active option.
+   * @default false
+   */
+  selected?: boolean;
+  /**
+   * Displays shortcut text on the right side of the caption attribute.
+   */
+  shortcut?: string;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: MenuItemTheme;
+}
+
+export class MenuItem extends __React.Component<MenuItemProps, {}> { }
diff --git a/components/navigation/index.d.ts b/components/navigation/index.d.ts
new file mode 100644
index 000000000..47f46045c
--- /dev/null
+++ b/components/navigation/index.d.ts
@@ -0,0 +1,46 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface NavigationTheme {
+  /**
+   * Used for buttons provided in the component.
+   */
+  button?: string;
+  /**
+   * Used for the root element if the layout is horizontal.
+   */
+  horizontal?: string;
+  /**
+   * Used for links provided in the component.
+   */
+  link?: string;
+  /**
+   * Used for the root element if the layout is vertical.
+   */
+  vertical?: string;
+}
+
+interface NavigationProps extends __ReactToolbox.Props {
+  /**
+   * Array of objects that will be represented as <Button/> so the keys will be transferred as properties the Button Component.
+   */
+  actions?: any[];
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Array of objects similar to actions but that will be rendered as <Link/> component definition.
+   */
+  routes?: any[];
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: NavigationTheme;
+  /**
+   * Type of the navigation, it can be vertical or horizontal.
+   * @default horizontal
+   */
+  type?: "vertical" | "horizontal";
+}
+
+export class Navigation extends __React.Component<NavigationProps, {}> { }
diff --git a/components/progress_bar/index.d.ts b/components/progress_bar/index.d.ts
new file mode 100644
index 000000000..8a2a8425a
--- /dev/null
+++ b/components/progress_bar/index.d.ts
@@ -0,0 +1,82 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface ProgressBarTheme {
+  /**
+   * Used to style the buffer element in the linear progress.
+   */
+  buffer?: string;
+  /**
+   * Used for the circle element in the circular progress.
+   */
+  circle?: string;
+  /**
+   * Used for the root element when the type is circular.
+   */
+  circular?: string;
+  /**
+   * Added to the root element if mode is indeterminate.
+   */
+  indeterminate?: string;
+  /**
+   * Used for the root element when the type is linear.
+   */
+  linear?: string;
+  /**
+   * Added to the root if the component is multicolor (circular).
+   */
+  multicolor?: string;
+  /**
+   * Used for the inner path in the circular progress.
+   */
+  path?: string;
+  /**
+   * Used to style the value element in the linear progress.
+   */
+  value?: string;
+}
+
+interface ProgressBarProps extends __ReactToolbox.Props {
+  /**
+   * Value of a secondary progress bar useful for buffering.
+   * @default 0
+   */
+  buffer?: number;
+  /**
+   * Maximum value permitted.
+   * @default 100
+   */
+  max?: number;
+  /**
+   * Minimum value permitted.
+   * @default 0
+   */
+  min?: number;
+  /**
+   * Mode of the progress bar, it can be determinate or indeterminate.
+   * @default indeterminate
+   */
+  mode?: "determinate" | "indeterminate";
+  /**
+   * If true, the circular progress bar will be changing its color.
+   * @default false
+   */
+  multicolor?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ProgressBarTheme;
+  /**
+   * Type of the progress bar, it can be circular or linear.
+   * @default linear
+   */
+  type?: "linear" | "circular";
+  /**
+   * Value of the current progress.
+   * @default 0
+   */
+  value?: number;
+}
+
+export class ProgressBar extends __React.Component<ProgressBarProps, {}> { }
+
+export default ProgressBar;
diff --git a/components/radio/index.d.ts b/components/radio/index.d.ts
new file mode 100644
index 000000000..5f3621329
--- /dev/null
+++ b/components/radio/index.d.ts
@@ -0,0 +1,101 @@
+import __ReactToolbox from "../index.d.ts";
+
+interface RadioGroupProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * If true, the group will be displayed as disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Name for the input element group.
+   */
+  name?: string;
+  /**
+   * Callback function that will be invoked when the value changes.
+   */
+  onChange?: Function;
+  /**
+   * Default value selected in the radio group.
+   */
+  value?: number;
+}
+
+export class RadioGroup extends __React.Component<RadioGroupProps, {}> { }
+
+export interface RadioButtonTheme {
+  /**
+   * Used to for the radio element.
+   */
+  radio?: string;
+  /**
+   * Used for the radio element when it's checked.
+   */
+  radioChecked?: string;
+  /**
+   * To provide styles for the ripple.
+   */
+  ripple?: string;
+  /**
+   * Added to the root of the Radio in case it's disabled.
+   */
+  disabled?: string;
+  /**
+   * Used as the root class of the component.
+   */
+  field?: string;
+  /**
+   * Used for the input element.
+   */
+  input?: string;
+  /**
+   * Used to style the text label element.
+   */
+  text?: string;
+}
+
+interface RadioButtonProps extends __ReactToolbox.Props {
+  /**
+   * If true, the input element will be selected by default. Transferred from the parent.
+   * @default false
+   */
+  checked?: boolean;
+  /**
+   * If true, the item will be displayed as disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Label for the radio button.
+   */
+  label?: __React.ReactNode | string;
+  /**
+   * Name for the input element.
+   */
+  name?: string;
+  /**
+   * Callback function that will be invoked when the input is blurred.
+   */
+  onBlur?: __React.FocusEventHandler;
+  /**
+   * Callback function that will be invoked when the value changes.
+   */
+  onChange?: __React.FormEventHandler;
+  /**
+   * Callback function that will be invoked when the input is focused.
+   */
+  onFocus?: __React.FocusEventHandler;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: RadioButtonTheme;
+  /**
+   * Value for the radio button.
+   */
+  value?: any;
+}
+
+export class RadioButton extends __React.Component<RadioButtonProps, {}> { }
diff --git a/components/ripple/index.d.ts b/components/ripple/index.d.ts
new file mode 100644
index 000000000..059e6fb13
--- /dev/null
+++ b/components/ripple/index.d.ts
@@ -0,0 +1,49 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface RippleTheme {
+  /**
+   * Root classname for the ripple.
+   */
+  ripple?: string;
+  /**
+   * Applied when the ripple is active.
+   */
+  rippleActive?: string;
+  /**
+   * Applied when the ripple is restarting.
+   */
+  rippleRestarting?: string;
+  /**
+   * Wrapper class to fit to the parent element.
+   */
+  rippleWrapper?: string;
+}
+
+interface RippleProps {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * True in case you want a centered ripple.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Function that will be called when the ripple animation ends.
+   */
+  onRippleEnded?: Function;
+  /**
+   * Factor to indicate how much should the ripple spread under the component.
+   * @default 2
+   */
+  spread?: number;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: RippleTheme;
+}
+
+export class Ripple extends __React.Component<RippleProps, {}> { }
+
+export default Ripple;
diff --git a/components/slider/index.d.ts b/components/slider/index.d.ts
new file mode 100644
index 000000000..fc10f35c3
--- /dev/null
+++ b/components/slider/index.d.ts
@@ -0,0 +1,106 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface SliderTheme {
+  /**
+   * Used as an inner container of the root component.
+   */
+  container?: string;
+  /**
+   * Added to the root of in case the Slider is editable.
+   */
+  editable?: string;
+  /**
+   * Used to style the inner element of the knob.
+   */
+  innerknob?: string;
+  /**
+   * Provided to the ProgressBar component.
+   */
+  innerprogress?: string;
+  /**
+   * Provided to the Input element in case it's editable.
+   */
+  input?: string;
+  /**
+   * Used to style the outer layer of the knob.
+   */
+  knob?: string;
+  /**
+   * Added to the root in case the Slider is pinned.
+   */
+  pinned?: string;
+  /**
+   * Added to the root in case the state is pressed.
+   */
+  pressed?: string;
+  /**
+   * Used as an outer wrapper for the ProgressBar.
+   */
+  progress?: string;
+  /**
+   * Used in the root when the knob should be a ring.
+   */
+  ring?: string;
+  /**
+   * Class used for the root element.
+   */
+  slider?: string;
+  /**
+   * Used for every individual snap element.
+   */
+  snap?: string;
+  /**
+   * Used as a wrapper for the group of snaps when it's snapped.
+   */
+  snaps?: string;
+}
+
+interface SliderProps extends __ReactToolbox.Props {
+  /**
+   * If true, an input is shown and the user can set the slider from keyboard value.
+   * @default false
+   */
+  editable?: boolean;
+  /**
+   * Maximum value permitted.
+   * @default 100
+   */
+  max?: number;
+  /**
+   * Minimum value permitted.
+   * @default 0
+   */
+  min?: number;
+  /**
+   * Callback function that will be invoked when the slider value changes.
+   */
+  onChange?: Function;
+  /**
+   * If true, a pin with numeric value label is shown when the slider thumb is pressed. Use for settings for which users need to know the exact value of the setting.
+   * @default false
+   */
+  pinned?: boolean;
+  /**
+   * If true, the slider thumb snaps to tick marks evenly spaced based on the step property value.
+   * @default false
+   */
+  snaps?: boolean;
+  /**
+   * Amount to vary the value when the knob is moved or increase/decrease is called.
+   * @default 0.01
+   */
+  step?: number;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: SliderTheme;
+  /**
+   * Current value of the slider.
+   * @default 0
+   */
+  value?: number;
+}
+
+export class Slider extends __React.Component<SliderProps, {}> { }
+
+export default Slider;
diff --git a/components/snackbar/index.d.ts b/components/snackbar/index.d.ts
new file mode 100644
index 000000000..91066ea01
--- /dev/null
+++ b/components/snackbar/index.d.ts
@@ -0,0 +1,76 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface SnackbarTheme {
+  /**
+   * Added to the root element in case it's accept type.
+   */
+  accept?: string;
+  /**
+   * Added to the root element when its active.
+   */
+  active?: string;
+  /**
+   * Used for the button inside the component.
+   */
+  button?: string;
+  /**
+   * Added to the root element in case it's cancel type.
+   */
+  cancel?: string;
+  /**
+   * Used for the icon element.
+   */
+  icon?: string;
+  /**
+   * Used for the label element.
+   */
+  label?: string;
+  /**
+   * Used as the className for the root element of the component.
+   */
+  snackbar?: string;
+  /**
+   * Added to the root element in case it's warning type.
+   */
+  warning?: string;
+}
+
+interface SnackbarProps extends __ReactToolbox.Props {
+  /**
+   * Label for the action component inside the Snackbar.
+   */
+  action?: string;
+  /**
+   * If true, the snackbar will be active.
+   * @default true
+   */
+  active?: boolean;
+  /**
+   * String key for an icon or Element which will be displayed in left side of the snackbar.
+   */
+  icon?: __React.ReactNode | string;
+  /**
+   * Text to display in the content. Required.
+   */
+  label: string;
+  /**
+   * Callback function when finish the set timeout.
+   */
+  onTimeout?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: SnackbarTheme;
+  /**
+   * Amount of time in milliseconds after the Snackbar will be automatically hidden.
+   */
+  timeout?: number;
+  /**
+   * Indicates the action type. Can be accept, warning or cancel
+   */
+  type?: "accept" | "cancel" | "warning";
+}
+
+export class Snackbar extends __React.Component<SnackbarProps, {}> { }
+
+export default Snackbar;
diff --git a/components/switch/index.d.ts b/components/switch/index.d.ts
new file mode 100644
index 000000000..6639a9b1d
--- /dev/null
+++ b/components/switch/index.d.ts
@@ -0,0 +1,77 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface SwitchTheme {
+  /**
+   * Used for the root element if the component is disabled.
+   */
+  disabled?: string;
+  /**
+   * Used for the root element if the component is not disabled.
+   */
+  field?: string;
+  /**
+   * Used for the input element.
+   */
+  input?: string;
+  /**
+   * Used for a wrapper around the thumb if checked is false.
+   */
+  off?: string;
+  /**
+   * Used for a wrapper around the thumb if checked is true.
+   */
+  on?: string;
+  /**
+   * Used for the ripple inside the switch.
+   */
+  ripple?: string;
+  /**
+   * Used for the text label element.
+   */
+  text?: string;
+  /**
+   * Used for the thumb element.
+   */
+  thumb?: string;
+}
+
+interface SwitchProps extends __ReactToolbox.Props {
+  /**
+   * If true, the switch will be enabled.
+   * @default false
+   */
+  checked?: boolean;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * The text string to use for the floating label element.
+   */
+  label?: string;
+  /**
+   * The text string used as name of the input.
+   */
+  name?: string;
+  /**
+   * Callback function that is fired when when the switch is blurred.
+   */
+  onBlur?: __React.FocusEventHandler;
+  /**
+   * Callback function that is fired when the component's value changes.
+   */
+  onChange?: __React.FormEventHandler;
+  /**
+   * Callback function that is fired when the switch is focused.
+   */
+  onFocus?: __React.FocusEventHandler;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: SwitchTheme;
+}
+
+export class Switch extends __React.Component<SwitchProps, {}> { }
+
+export default Switch;
diff --git a/components/table/index.d.ts b/components/table/index.d.ts
new file mode 100644
index 000000000..05b8fe4ac
--- /dev/null
+++ b/components/table/index.d.ts
@@ -0,0 +1,70 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface TableTheme {
+  /**
+   * It will be added to a row in case it is editable.
+   */
+  editable?: string;
+  /**
+   * Used for the row element.
+   */
+  row?: string;
+  /**
+   * It will be added to a row in case it is selectable.
+   */
+  selectable?: string;
+  /**
+   * Added to a row in case it is selected.
+   */
+  selected?: string;
+  /**
+   * Classname used for the root element.
+   */
+  table?: string;
+}
+
+interface TableProps extends __ReactToolbox.Props {
+  /**
+   * If true, component will show a heading using model field names.
+   * @default true
+   */
+  heading?: boolean;
+  /**
+   * Object describing the data model that represents each object in the source.
+   */
+  model?: any;
+  /**
+   * Callback function that is fired when an item in a row changes. If set, rows are editable.
+   */
+  onChange?: Function;
+  /**
+   * Callback function invoked when the row selection changes.
+   */
+  onSelect?: __React.FormEventHandler;
+  /**
+   * If true, each row will display a checkbox to allow the user to select that one row.
+   * @default true
+   */
+  selectable?: boolean;
+  /**
+   * If true, the header and each row will display a checkbox to allow the user to select multiple rows.
+   * @default true
+   */
+  multiSelectable?: boolean;
+  /**
+   * Array of indexes of the items in the source that should appear as selected.
+   */
+  selected?: any[];
+  /**
+   * Array of objects representing each item to show.
+   */
+  source?: any[];
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: TableTheme;
+}
+
+export class Table extends __React.Component<TableProps, {}> { }
+
+export default Table;
diff --git a/components/tabs/index.d.ts b/components/tabs/index.d.ts
new file mode 100644
index 000000000..e5aeb2cdb
--- /dev/null
+++ b/components/tabs/index.d.ts
@@ -0,0 +1,105 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface TabsTheme {
+  /**
+   * Added to the active tab content and header.
+   */
+  active?: string;
+  /**
+   * Used for the navigation element.
+   */
+  navigation?: string;
+  /**
+   * Used for the moving underline element.
+   */
+  pointer?: string;
+  /**
+   * Used as a root classname for the component.
+   */
+  tabs?: string;
+  /**
+   * Used for the tab content element.
+   */
+  tab?: string;
+}
+
+interface TabsProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Disable the animation below the active tab.
+   * @default false
+   */
+  disableAnimatedBottomBorder?: boolean;
+  /**
+   * Current
+   * @default 0
+   */
+  index?: number;
+  /**
+   * Callback function that is fired when the tab changes.
+   */
+  onChange?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: TabsTheme;
+}
+
+export class Tabs extends __React.Component<TabsProps, {}> { }
+
+export interface TabTheme {
+  /**
+   * Added to the navigation tab element in case it's active.
+   */
+  active?: string;
+  /**
+   * Added to the navigation tab element in case it's disabled.
+   */
+  disabled?: string;
+  /**
+   * Added to the navigation tab element in case it's hidden.
+   */
+  hidden?: string;
+  /**
+   * Added to the navigation tab element in case it's active.
+   */
+  label?: string;
+}
+
+interface TabProps extends __ReactToolbox.Props {
+  /**
+   * If true, the current component is visible.
+   */
+  active?: boolean;
+  /**
+   * Additional class name to provide custom styling for the active tab.
+   */
+  activeClassName?: string;
+  /**
+   * If true, the current component is not clickable.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If true, the current component is not visible.
+   * @default false
+   */
+  hidden?: boolean;
+  /**
+   * Label text for navigation header. Required.
+   */
+  label: string;
+  /**
+   * Callback function that is fired when the tab is activated.
+   */
+  onActive?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: TabTheme;
+}
+
+export class Tab extends __React.Component<TabProps, {}> { }
diff --git a/components/time_picker/index.d.ts b/components/time_picker/index.d.ts
new file mode 100644
index 000000000..0968a8c52
--- /dev/null
+++ b/components/time_picker/index.d.ts
@@ -0,0 +1,132 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface TimePickerTheme {
+  /**
+   * Added to the number which is active in clock face.
+   */
+  active?: string;
+  /**
+   * AM label in dialog header when mode is AM/PM.
+   */
+  am?: string;
+  /**
+   * Added to the dialog when the selected format is AM.
+   */
+  amFormat?: string;
+  /**
+   * Wrapper for AM and PM labels in header when mode is AM/PM.
+   */
+  ampm?: string;
+  /**
+   * Used for buttons inside the dialog of the picker.
+   */
+  button?: string;
+  /**
+   * Clock root class element.
+   */
+  clock?: string;
+  /**
+   * Wrapper for the proper positioning of the clock.
+   */
+  clockWrapper?: string;
+  /**
+   * Used for the dialog component.
+   */
+  dialog?: string;
+  /**
+   * Used to style the clock face.
+   */
+  face?: string;
+  /**
+   * Used for the clock's hand.
+   */
+  hand?: string;
+  /**
+   * Dialog header wrapper class.
+   */
+  header?: string;
+  /**
+   * Used for hours in dialog header.
+   */
+  hours?: string;
+  /**
+   * Added to the dialog hours are displayed.
+   */
+  hoursDisplay?: string;
+  /**
+   * Used for Input element that opens the picker.
+   */
+  input?: string;
+  /**
+   * Used for the knob of the hand.
+   */
+  knob?: string;
+  /**
+   * Used for minutes in dialog header.
+   */
+  minutes?: string;
+  /**
+   * Added to the dialog minutes are displayed.
+   */
+  minutesDisplay?: string;
+  /**
+   * Each of the numbers in the clock's face.
+   */
+  number?: string;
+  /**
+   * Placeholder for the clock inside the dialog (inner wrapper).
+   */
+  placeholder?: string;
+  /**
+   * PM label in dialog header when mode is AM/PM.
+   */
+  pm?: string;
+  /**
+   * Added to the dialog when the selected format is PM.
+   */
+  pmFormat?: string;
+  /**
+   * Is the : separator between hours and minutes in dialog header.
+   */
+  separator?: string;
+  /**
+   * Added to the knob when no round number is selected.
+   */
+  small?: string;
+}
+
+interface TimePickerProps {
+  /**
+   * Provide error text which will be displayed under the field.
+   */
+  error?: string;
+  /**
+   * This class will be applied to Input component of TimePicker.
+   */
+  inputClassName?: string;
+  /**
+   * Format to display the clock. It can be 24hr or ampm.
+   * @default false
+   */
+  format?: "24hr" | "ampm";
+  /**
+   * The text string to use for the floating label element in the input component.
+   */
+  label?: string;
+  /**
+   * Callback called when the picker value is changed.
+   */
+  onChange?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: TimePickerTheme;
+  /**
+   * Datetime object with currrently selected time.
+   */
+  value?: Date;
+}
+
+export class TimePicker extends __React.Component<TimePickerProps, {}> { }
+
+export default TimePicker;
diff --git a/components/tooltip/index.d.ts b/components/tooltip/index.d.ts
new file mode 100644
index 000000000..f7686d769
--- /dev/null
+++ b/components/tooltip/index.d.ts
@@ -0,0 +1,54 @@
+export interface TooltipTheme {
+  /**
+   * Added to the tooltip element.
+   */
+  tooltip?: string;
+  /**
+   * Added to the root when the tooltip is active.
+   */
+  tooltipActive?: string;
+  /**
+   * Wrapper for the root element used to position the tooltip.
+   */
+  tooltipWrapper?: string;
+}
+
+interface TooltipProps {
+  /**
+   * Callback called when the mouse enters the Component.
+   */
+  onMouseEnter?: __React.MouseEventHandler;
+  /**
+   * Callback called when the mouse leaves the Component.
+   */
+  onMouseLeave?: __React.MouseEventHandler;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: TooltipTheme;
+  /**
+   * The text string to use for the tooltip.
+   */
+  tooltip?: string;
+  /**
+   * Amount of time in miliseconds spent before the tooltip is visible.
+   */
+  tooltipDelay?: number;
+  /**
+   * If true, the Tooltip hides after a click in the host component.
+   * @default true
+   */
+  tooltipHideOnClick?: boolean;
+}
+
+declare class TooltipComponent<P, S> extends __React.Component<P, S> {
+  props: P & TooltipProps;
+}
+
+interface TooltippedComponentClass<P> extends TooltipProps {
+  new (props?: P, context?: any): TooltipComponent<P, any>;
+}
+
+export function Tooltip<P>(componentClass: __React.ComponentClass<P>): TooltippedComponentClass<P>;
+
+export default Tooltip;
diff --git a/lib/app_bar/index.d.ts b/lib/app_bar/index.d.ts
new file mode 100644
index 000000000..35fda69e4
--- /dev/null
+++ b/lib/app_bar/index.d.ts
@@ -0,0 +1,41 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface AppBarTheme {
+  /**
+   * Used for the component root element.
+   */
+  appBar?: string;
+  /**
+   * Added to the root element when the app bar is fixed.
+   */
+  fixed?: string;
+  /**
+   * Added to the root element when the app bar is flat.
+   */
+  flat?: string;
+}
+
+interface AppBarProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Determine if the bar should have position fixed or relative.
+   * @default false
+   */
+  fixed?: boolean;
+  /**
+   * If true, the AppBar shows a shadow.
+   * @default false
+   */
+  flat?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: AppBarTheme;
+}
+
+export class AppBar extends __React.Component<AppBarProps, {}> { }
+
+export default AppBar;
diff --git a/lib/autocomplete/index.d.ts b/lib/autocomplete/index.d.ts
new file mode 100644
index 000000000..f1b33954d
--- /dev/null
+++ b/lib/autocomplete/index.d.ts
@@ -0,0 +1,105 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface AutocompleteTheme {
+  /**
+   * Used for a suggestion when it's active.
+   */
+  active?: string;
+  /**
+   * Used for the root element.
+   */
+  autocomplete?: string;
+  /**
+   * Used when the input is focused.
+   */
+  focus?: string;
+  /**
+   * Used to style the Input component.
+   */
+  input?: string;
+  /**
+   * Used for the label.
+   */
+  label?: string;
+  /**
+   * Used to style each suggestion.
+   */
+  suggestion?: string;
+  /**
+   * Used to style the suggestions container.
+   */
+  suggestions?: string;
+  /**
+   * Used for the suggestions when it's opening to the top.
+   */
+  up?: string;
+  /**
+   * Classname used for a single value.
+   */
+  value?: string;
+  /**
+   * Classname used for the values container.
+   */
+  values?: string;
+}
+
+interface AutocompleteProps extends __ReactToolbox.Props {
+  /**
+   * Determines the opening direction. It can be auto, up or down.
+   * @default auto
+   */
+  direction?: "auto" | "up" | "down";
+  /**
+   * If true, component will be disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Sets the error string for the internal input element.
+   * @default false
+   */
+  error?: string;
+  /**
+   * The text string to use for the floating label element.
+   */
+  label?: string;
+  /**
+   * If true, component can hold multiple values.
+   */
+  multiple?: boolean;
+  /**
+   * Callback function that is fired when the components's value changes.
+   * @default auto
+   */
+  onChange?: __React.FormEventHandler;
+  /**
+   * Determines if the selected list is shown above or below input. It can be above or below.
+   * @default above
+   */
+  selectedPosition?: "above" | "below";
+  /**
+   * If true, the list of suggestions will not be filtered when a value is selected.
+   * @default false
+   */
+  showSuggestionsWHenValueIsSet?: boolean;
+  /**
+   * Object of key/values or array representing all items suggested.
+   */
+  source?: any;
+  /**
+   * Determines how suggestions are supplied.
+   * @default start
+   */
+  suggestionMatch?: "start" | "anywhere" | "word";
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: AutocompleteTheme;
+  /**
+   * Value or array of values currently selected component.
+   */
+  value?: any;
+}
+
+export class Autocomplete extends __React.Component<AutocompleteProps, {}> { }
+
+export default Autocomplete;
diff --git a/lib/avatar/index.d.ts b/lib/avatar/index.d.ts
new file mode 100644
index 000000000..0d4fbd238
--- /dev/null
+++ b/lib/avatar/index.d.ts
@@ -0,0 +1,47 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface AvatarTheme {
+  /**
+   * Used for the root class of the element.
+   */
+  avatar?: string;
+  /**
+   * Added to the root element when the component has image.
+   */
+  image?: string;
+  /**
+   * Used for the root element if the component shows the letter.
+   */
+  letter?: string;
+}
+
+interface AvatarProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Set to true if your image is not squared so it will be used as a cover for the element.
+   */
+  cover?: boolean;
+  /**
+   * A key to identify an Icon from Material Design Icons or a custom Icon Element.
+   */
+  icon?: __React.ReactNode | string;
+  /**
+   * An image source or an image element.
+   */
+  image?: __React.ReactNode | string;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: AvatarTheme;
+  /**
+   * A title for the image. If no image is provided, the first letter will be displayed as the avatar.
+   */
+  title?: string;
+}
+
+export class Avatar extends __React.Component<AvatarProps, {}> { }
+
+export default Avatar;
diff --git a/lib/button/index.d.ts b/lib/button/index.d.ts
new file mode 100644
index 000000000..60721b880
--- /dev/null
+++ b/lib/button/index.d.ts
@@ -0,0 +1,227 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface ButtonTheme {
+  /**
+   * Used for the root in case button is accent.
+   */
+  accent?: string;
+  /**
+   * Used for the root element in any button.
+   */
+  button?: string;
+  /**
+   * Used when the button is flat for the root element.
+   */
+  flat?: string;
+  /**
+   * Used when the button is floating for the root element.
+   */
+  floating?: string;
+  /**
+   * For the icon inside a button.
+   */
+  icon?: string;
+  /**
+   * Used when colors are inverted.
+   */
+  inverse?: string;
+  /**
+   * Used for mini floating buttons.
+   */
+  mini?: string;
+  /**
+   * Used for neutral colored buttons.
+   */
+  neutral?: string;
+  /**
+   * Used for primary buttons when button is primary.
+   */
+  primary?: string;
+  /**
+   * Used when the button is raised for root element.
+   */
+  raised?: string;
+  /**
+   * Used for the ripple element.
+   */
+  rippleWrapper?: string;
+  /**
+   * Used for toggle buttons in the root element.
+   */
+  toggle?: string;
+}
+
+interface ButtonProps extends __ReactToolbox.Props {
+  /**
+   * Indicates if the button should have accent color.
+   * @default false
+   */
+  accent?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If true, the button will have a flat look.
+   * @default false
+   */
+  flat?: boolean;
+  /**
+   * If true, the button will have a floating look.
+   * @default false
+   */
+  floating?: boolean;
+  /**
+   * Creates a link for the button.
+   */
+  href?: string;
+  /**
+   * Value of the icon (See Font Icon Component).
+   */
+  icon?: __React.ReactNode | string;
+  /**
+   * If true, the neutral colors are inverted. Useful to put a button over a dark background.
+   */
+  inverse?: boolean;
+  /**
+   * The text string to use for the name of the button.
+   */
+  label?: string;
+  /**
+   * To be used with floating button. If true, the button will be smaller.
+   * @default false
+   */
+  mini?: boolean;
+  /**
+   * Set it to false if you don't want the neutral styles to be included.
+   * @default true
+   */
+  neutral?: boolean;
+  /**
+   * Fires after the mouse leaves the Component.
+   */
+  onMouseLeave?: __React.MouseEventHandler;
+  /**
+   * Fires after the mouse is released from the Component.
+   */
+  OnMouseUp?: __React.MouseEventHandler;
+  /**
+   * Indicates if the button should have primary color.
+   * @default false
+   */
+  primary?: boolean;
+  /**
+   * If true, the button will have a raised look.
+   * @default false
+   */
+  raised?: boolean;
+  /**
+   * If true, component will have a ripple effect on click.
+   * @default true
+   */
+  ripple?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ButtonTheme;
+}
+
+export class Button extends __React.Component<ButtonProps, {}> { }
+
+export interface IconButtonTheme {
+  /**
+   * Used for the root in case button is accent.
+   */
+  accent?: string;
+  /**
+   * Used for the root element in any button.
+   */
+  button?: string;
+  /**
+   * For the icon inside a button.
+   */
+  icon?: string;
+  /**
+   * Used when colors are inverted.
+   */
+  inverse?: string;
+  /**
+   * Used for neutral colored buttons.
+   */
+  neutral?: string;
+  /**
+   * Used for primary buttons when button is primary.
+   */
+  primary?: string;
+  /**
+   * Used for the ripple element.
+   */
+  rippleWrapper?: string;
+  /**
+   * Used for toggle buttons in the root element.
+   */
+  toggle?: string;
+}
+
+interface IconButtonProps extends __ReactToolbox.Props {
+  /**
+   * Indicates if the button should have accent color.
+   * @default false
+   */
+  accent?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Creates a link for the button.
+   */
+  href?: string;
+  /**
+   * Value of the icon (See Font Icon Component).
+   */
+  icon?: __React.ReactNode | string;
+  /**
+   * If true, the neutral colors are inverted. Useful to put a button over a dark background.
+   */
+  inverse?: boolean;
+  /**
+   * Set it to false if you don't want the neutral styles to be included.
+   * @default true
+   */
+  neutral?: boolean;
+  /**
+   * Fires after the mouse leaves the Component.
+   */
+  onMouseLeave?: __React.MouseEventHandler;
+  /**
+   * Fires after the mouse is released from the Component.
+   */
+  OnMouseUp?: __React.MouseEventHandler;
+  /**
+   * Indicates if the button should have primary color.
+   * @default false
+   */
+  primary?: boolean;
+  /**
+   * If true, component will have a ripple effect on click.
+   * @default true
+   */
+  ripple?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: IconButtonTheme;
+}
+
+export class IconButton extends __React.Component<IconButtonProps, {}> { }
diff --git a/lib/card/index.d.ts b/lib/card/index.d.ts
new file mode 100644
index 000000000..a05b6a703
--- /dev/null
+++ b/lib/card/index.d.ts
@@ -0,0 +1,102 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface CardTheme {
+  card?: string;
+  raised?: string;
+}
+
+interface CardProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  raised?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: CardTheme;
+}
+
+export class Card extends __React.Component<CardProps, {}> { }
+
+export interface CardActionsTheme {
+  cardActions?: string;
+}
+
+interface CardActionsProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: CardActionsTheme;
+}
+
+export class CardActions extends __React.Component<CardActionsProps, {}> { }
+
+export interface CardMediaTheme {
+  cardMedia?: string;
+  content?: string;
+  contentOverlay?: string;
+  square?: string;
+  wide?: string;
+}
+
+interface CardMediaProps extends __ReactToolbox.Props {
+  aspectRatio?: "wide" | "square";
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  color?: string;
+  contentOverlay?: boolean;
+  image?: __React.ReactNode | string;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: CardMediaTheme;
+}
+
+export class CardMedia extends __React.Component<CardMediaProps, {}> { }
+
+export interface CardTextTheme {
+  cardText?: string;
+}
+
+interface CardTextProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: CardTextTheme;
+}
+
+export class CardText extends __React.Component<CardTextProps, {}> { }
+
+export interface CardTitleTheme {
+  large?: string;
+  title?: string;
+  small?: string;
+  subtitle?: string;
+}
+
+interface CardTitleProps extends __ReactToolbox.Props {
+  avatar?: __React.ReactNode | string;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  subtitle?: __React.ReactNode | string;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: CardTitleTheme;
+  title?: __React.ReactNode | string;
+}
+
+export class CardTitle extends __React.Component<CardTitleProps, {}> { }
diff --git a/lib/checkbox/index.d.ts b/lib/checkbox/index.d.ts
new file mode 100644
index 000000000..2f5d2d678
--- /dev/null
+++ b/lib/checkbox/index.d.ts
@@ -0,0 +1,69 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface CheckboxTheme {
+  /**
+   * Used as root in the check element.
+   */
+  check?: string;
+  /**
+   * Used for the check element when it's checked.
+   */
+  checked?: string;
+  /**
+   * Used when the component is disabled.
+   */
+  disabled?: string;
+  /**
+   * Used as the root class of the component.
+   */
+  field?: string;
+  /**
+   * Used for the input element.
+   */
+  input?: string;
+  /**
+   * Used for the ripple component.
+   */
+  ripple?: string;
+  /**
+   * Used for the text label.
+   */
+  text?: string;
+}
+
+interface CheckboxProps extends __ReactToolbox.Props {
+  /**
+   * Value for the checkbox, can be true or false.
+   * @default false
+   */
+  checked?: boolean;
+  /**
+   * If true, the checkbox shown as disabled and cannot be modified.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Text label to attach next to the checkbox element.
+   */
+  label?: __React.ReactNode | string;
+  /**
+   * The name of the field to set in the input checkbox.
+   */
+  name?: string;
+  /**
+   * Callback called when the checkbox is blurred.
+   */
+  onBlur?: __React.FocusEventHandler;
+  /**
+   * Callback called when the checkbox value is changed.
+   */
+  onChange?: __React.MouseEventHandler;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: CheckboxTheme;
+}
+
+export class Checkbox extends __React.Component<CheckboxProps, {}> { }
+
+export default Checkbox;
diff --git a/lib/chip/index.d.ts b/lib/chip/index.d.ts
new file mode 100644
index 000000000..3ee44821a
--- /dev/null
+++ b/lib/chip/index.d.ts
@@ -0,0 +1,52 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface ChipTheme {
+  /**
+   * Added to the root element when the component includes an avatar.
+   */
+  avatar?: string;
+  /**
+   * Used for the root element.
+   */
+  chip?: string;
+  /**
+   * Added to the root element when the component is deletable.
+   */
+  deletable?: string;
+  /**
+   * Used for the delete element wrapper.
+   */
+  delete?: string;
+  /**
+   * Used for the delete icon.
+   */
+  deleteIcon?: string;
+  /**
+   * Used for the delete svg inner layer.
+   */
+  deleteX?: string;
+}
+
+interface ChipProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * If true, the chip will be rendered with a delete icon.
+   * @default false
+   */
+  deletable?: boolean;
+  /**
+   * Callback to be invoked when the delete icon is clicked.
+   */
+  onDeleteClick?: __React.MouseEventHandler;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ChipTheme;
+}
+
+export class Chip extends __React.Component<ChipProps, {}> { }
+
+export default Chip;
diff --git a/lib/date_picker/index.d.ts b/lib/date_picker/index.d.ts
new file mode 100644
index 000000000..1722fdacc
--- /dev/null
+++ b/lib/date_picker/index.d.ts
@@ -0,0 +1,148 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface DatePickerTheme {
+  /**
+   * Used for the active day and year.
+   */
+  active?: string;
+  /**
+   * Used for the buttons in the dialog.
+   */
+  button?: string;
+  /**
+   * Used for the calendar root element.
+   */
+  calendar?: string;
+  /**
+   * Used as wrapper for the calendar component inside dialog.
+   */
+  calendarWrapper?: string;
+  /**
+   * Used for the date element inside header.
+   */
+  date?: string;
+  /**
+   * Used for the day element inside the calendar.
+   */
+  day?: string;
+  /**
+   * Used for the list of days inside a month.
+   */
+  days?: string;
+  /**
+   * Used for the dialog component.
+   */
+  dialog?: string;
+  /**
+   * Added to day element when day is disabled.
+   */
+  disabled?: string;
+  /**
+   * Used for the dialog header,.
+   */
+  header?: string;
+  /**
+   * Used for Input element that opens the picker.
+   */
+  input?: string;
+  /**
+   * Used for the month root element.
+   */
+  month?: string;
+  /**
+   * Added to the root dialog when months are displayed.
+   */
+  monthsDisplay?: string;
+  /**
+   * Used for the next month icon.
+   */
+  next?: string;
+  /**
+   * Used for the prev month icon.
+   */
+  prev?: string;
+  /**
+   * Used for the month title element.
+   */
+  title?: string;
+  /**
+   * Used for the weekdays wrapper.
+   */
+  week?: string;
+  /**
+   * Used for the year element inside header.
+   */
+  year?: string;
+  /**
+   * Used for the years list in years view.
+   */
+  years?: string;
+  /**
+   * Added to the root dialog when years are displayed.
+   */
+  yearsDisplay?: string;
+}
+
+interface DatePickerProps extends __ReactToolbox.Props {
+  /**
+   * Automatically selects a date upon clicking on a day
+   * @default false
+   */
+  autoOk?: boolean;
+  /**
+   * Give an error node to display under the field.
+   */
+  error?: string;
+  /**
+   * A key to identify an Icon from Material Design Icons or a custom Icon Element.
+   */
+  icon?: __React.ReactNode | string;
+  /**
+   * This class will be applied to Input component of DatePicker.
+   */
+  inputClassName?: string;
+  /**
+   * Function to format the date displayed on the input.
+   */
+  inputFormat?: Function;
+  /**
+   * The text string to use for the floating label element in the input component.
+   */
+  label?: string;
+  /**
+   * Date object with the maximum selectable date.
+   */
+  maxDate?: Date;
+  /**
+   * Date object with the minimum selectable date.
+   */
+  minDate?: Date;
+  /**
+   * Name for the input field.
+   */
+  name?: string;
+  /**
+   * Callback called when the picker value is changed.
+   */
+  onChange?: __React.MouseEventHandler;
+  /**
+   * Callback called when the ESC key is pressed with the overlay active.
+   */
+  onEscKeyDown?: __React.KeyboardEventHandler;
+  /**
+   * Callback to be invoked when the dialog overlay is clicked.
+   */
+  onOverlayClick?: __React.MouseEventHandler;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: DatePickerTheme;
+  /**
+   * Date object with the currently selected date.
+   */
+  value?: Date | string;
+}
+
+export class DatePicker extends __React.Component<DatePickerProps, {}> { }
+
+export default DatePicker;
diff --git a/lib/dialog/index.d.ts b/lib/dialog/index.d.ts
new file mode 100644
index 000000000..1fd938766
--- /dev/null
+++ b/lib/dialog/index.d.ts
@@ -0,0 +1,92 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface DialogTheme {
+  /**
+   * Used for the root when the dialog is active.
+   */
+  active?: string;
+  /**
+   * Used to wrap the dialog body.
+   */
+  body?: string;
+  /**
+   * Used in buttons when the dialog implements actions.
+   */
+  button?: string;
+  /**
+   * Used for the root element.
+   */
+  dialog?: string;
+  /**
+   * Used for the navigation element when it implements actions.
+   */
+  navigation?: string;
+  /**
+   * Used for the title element of the dialog.
+   */
+  title?: string;
+}
+
+interface DialogActionProps {
+  /**
+   * The text string to use for the name of the button.
+   */
+  label?: string;
+  /**
+   * Callback called when the component is clicked.
+   */
+  onClick?: __React.MouseEventHandler;
+}
+
+interface DialogProps extends __ReactToolbox.Props {
+  /**
+   * A array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons.
+   */
+  actions?: DialogActionProps[];
+  /**
+   * If true, the dialog will be active.
+   * @default false
+   */
+  active?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Callback called when the ESC key is pressed with the overlay active.
+   */
+  onEscKeyDown?: __React.KeyboardEventHandler;
+  /**
+   * Callback to be invoked when the dialog overlay is clicked.
+   */
+  onOverlayClick?: __React.MouseEventHandler;
+  /**
+   * Callback called when the mouse button is pressed on the overlay.
+   */
+  onOverlayMouseDown?: __React.MouseEventHandler;
+  /**
+   * Callback called when the mouse is moving over the overlay.
+   */
+  onOverlayMouseMove?: __React.MouseEventHandler;
+  /**
+   * Callback called when the mouse button is released over the overlay.
+   */
+  onOverlayMouseUp?: __React.MouseEventHandler;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: DialogTheme;
+  /**
+   * The text string to use as standar title of the dialog.
+   */
+  title?: string;
+  /**
+   * Used to determine the size of the dialog. It can be small, normal or large.
+   * @default normal
+   */
+  type?: string;
+}
+
+export class Dialog extends __React.Component<DialogProps, {}> { }
+
+export default Dialog;
diff --git a/lib/drawer/index.d.ts b/lib/drawer/index.d.ts
new file mode 100644
index 000000000..3832c6e47
--- /dev/null
+++ b/lib/drawer/index.d.ts
@@ -0,0 +1,53 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface DrawerTheme {
+  /**
+   * Used for the root class when the drawer is active.
+   */
+  active?: string;
+  /**
+   * Used for the drawer content.
+   */
+  content?: string;
+  /**
+   * Root class.
+   */
+  drawer?: string;
+  /**
+   * Added to the root class when drawer is to the left.
+   */
+  left?: string;
+  /**
+   * Added to the root class when drawer is to the right.
+   */
+  right?: string;
+}
+
+interface DrawerProps extends __ReactToolbox.Props {
+  /**
+   * If true, the drawer will be visible.
+   * @default false
+   */
+  active?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Callback function to be invoked when the overlay is clicked.
+   */
+  onOverlayClick?: __React.MouseEventHandler;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: DrawerTheme;
+  /**
+   * Type of drawer. It can be left or right to display the drawer on the left or right side of the screen.
+   * @default left
+   */
+  type?: "left" | "right";
+}
+
+export class Drawer extends __React.Component<DrawerProps, {}> { }
+
+export default Drawer;
diff --git a/lib/dropdown/index.d.ts b/lib/dropdown/index.d.ts
new file mode 100644
index 000000000..886b0dff9
--- /dev/null
+++ b/lib/dropdown/index.d.ts
@@ -0,0 +1,114 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface DropdownTheme {
+  /**
+   * Added to the root element when the dropdown is active.
+   */
+  active?: string;
+  /**
+   * Added to the root element when it's disabled.
+   */
+  disabled?: string;
+  /**
+   * Root element class.
+   */
+  dropdown?: string;
+  /**
+   * Used for the error element.
+   */
+  error?: string;
+  /**
+   * Added to the inner wrapper if it's errored.
+   */
+  errored?: string;
+  /**
+   * Used for the inner wrapper of the component.
+   */
+  field?: string;
+  /**
+   * Used for the the label element.
+   */
+  label?: string;
+  /**
+   * Used to highlight the selected value.
+   */
+  selected?: string;
+  /**
+   * Used as a wrapper for the given template value.
+   */
+  templateValue?: string;
+  /**
+   * Added to the root element when it's opening up.
+   */
+  up?: string;
+  /**
+   * Used for each value in the dropdown component.
+   */
+  value?: string;
+  /**
+   * Used for the list of values.
+   */
+  values?: string;
+}
+
+interface DropdownProps extends __ReactToolbox.Props {
+  /**
+   * If true the dropdown will preselect the first item if the supplied value matches none of the options' values.
+   * @default true
+   */
+  allowBlank?: boolean;
+  /**
+   * If true, the dropdown will open up or down depending on the position in the screen.
+   * @default true
+   */
+  auto?: boolean;
+  /**
+   * Set the component as disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Give an error string to display under the field.
+   */
+  error?: string;
+  /**
+   * The text string to use for the floating label element.
+   */
+  label?: string;
+  /**
+   * Name for the input field.
+   */
+  name?: string;
+  /**
+   * Callback function that is fired when the component is blurred.
+   */
+  onBlur?: __React.FocusEventHandler;
+  /**
+   * Callback function that is fired when the component's value changes.
+   */
+  onChange?: __React.FormEventHandler;
+  /**
+   * Callback function that is fired when the component is focused.
+   */
+  onFocus?: __React.FocusEventHandler;
+  /**
+   * Array of data objects with the data to represent in the dropdown.
+   */
+  source: any[];
+  /**
+   * Callback function that returns a JSX template to represent the element.
+   */
+  template?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: DropdownTheme;
+  /**
+   * Default value using JSON data.
+   */
+  value?: string | number;
+}
+
+export class Dropdown extends __React.Component<DropdownProps, {}> { }
+
+export default Dropdown;
diff --git a/lib/font_icon/index.d.ts b/lib/font_icon/index.d.ts
new file mode 100644
index 000000000..c3f05587a
--- /dev/null
+++ b/lib/font_icon/index.d.ts
@@ -0,0 +1,16 @@
+import __ReactToolbox from "../index.d.ts";
+
+interface FontIconProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * The key string for the icon you want be displayed.
+   */
+  value?: __React.ReactNode | string;
+}
+
+export class FontIcon extends __React.Component<FontIconProps, {}> { }
+
+export default FontIcon;
diff --git a/lib/index.d.ts b/lib/index.d.ts
new file mode 100644
index 000000000..7739a9d4e
--- /dev/null
+++ b/lib/index.d.ts
@@ -0,0 +1,22 @@
+export declare namespace __ReactToolbox {
+  interface Props {
+    /**
+     * Set a class for the root component.
+     */
+    className?: string;
+    /**
+     * Key used to uniquely identify the element within an Array.
+     */
+    key?: string | number;
+    /**
+     * Callback called when the component is clicked.
+     */
+    onClick?: __React.MouseEventHandler;
+    /**
+     * Set inline style for the root component.
+     */
+    style?: __React.CSSProperties;
+  }
+}
+
+export default __ReactToolbox;
diff --git a/lib/input/index.d.ts b/lib/input/index.d.ts
new file mode 100644
index 000000000..719ea9287
--- /dev/null
+++ b/lib/input/index.d.ts
@@ -0,0 +1,135 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface InputTheme {
+  /**
+   * Used for the bar under the input.
+   */
+  bar?: string;
+  /**
+   * Used for the counter element.
+   */
+  counter?: string;
+  /**
+   * Added to the root class when input is disabled.
+   */
+  disabled?: string;
+  /**
+   * Used for the text error.
+   */
+  error?: string;
+  /**
+   * Added to the root class when input is errored.
+   */
+  errored?: string;
+  /**
+   * Used when the input is hidden.
+   */
+  hidden?: string;
+  /**
+   * Used for the hint text.
+   */
+  hint?: string;
+  /**
+   * Used for the icon in case the input has icon.
+   */
+  icon?: string;
+  /**
+   * Used as root class for the component.
+   */
+  input?: string;
+  /**
+   * Used for the HTML input element.
+   */
+  inputElement?: string;
+  /**
+   * Used in case the input is required.
+   */
+  required?: string;
+  /**
+   * Added to the root class if the input has icon.
+   */
+  withIcon?: string;
+}
+
+interface InputProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Give an error node to display under the field.
+   */
+  error?: string;
+  /**
+   * Indicates if the label is floating in the input field or not.
+   * @default true
+   */
+  floating?: boolean;
+  /**
+   * The text string to use for hint text element.
+   */
+  hint?: string;
+  /**
+   * Name of an icon to use as a label for the input.
+   */
+  icon?: __React.ReactNode | string;
+  /**
+   * The text string to use for the floating label element.
+   */
+  label?: string;
+  /**
+   * Specifies the maximum number of characters allowed in the component
+   */
+  maxLength?: number;
+  /**
+   * If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.
+   * @default false
+   */
+  multiLine?: boolean;
+  /**
+   * Name for the input field.
+   */
+  name?: string;
+  /**
+   * Callback function that is fired when component is blurred.
+   */
+  onBlur?: __React.FocusEventHandler;
+  /**
+   * Callback function that is fired when the component's value changes
+   */
+  onChange?: __React.FormEventHandler;
+  /**
+   * Callback function that is fired when component is focused.
+   */
+  onFocus?: __React.FocusEventHandler;
+  /**
+   * Callback function that is fired when a key is pressed.
+   */
+  onKeyPress?: __React.MouseEventHandler;
+  /**
+   * If true, the html input has a required attribute.
+   * @default false
+   */
+  required?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: InputTheme;
+  /**
+   * Type of the input element. It can be a valid HTML5 input type
+   */
+  type?: string;
+  /**
+   * Current value of the input element.
+   */
+  value?: any;
+}
+
+export class Input extends __React.Component<InputProps, {}> { }
+
+export default Input;
diff --git a/lib/layout/index.d.ts b/lib/layout/index.d.ts
new file mode 100644
index 000000000..ad2505d7f
--- /dev/null
+++ b/lib/layout/index.d.ts
@@ -0,0 +1,193 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface LayoutTheme {
+  /**
+   * Class used in the container to position and align inner items.
+   */
+  layout?: string;
+}
+
+interface LayoutProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: [NavDrawer | Panel | Sidebar];
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: LayoutTheme;
+}
+
+export class Layout extends __React.Component<LayoutProps, {}> { }
+
+export interface NavDrawerTheme {
+  /**
+   * Used when the drawer is active.
+   */
+  active?: string;
+  /**
+   * Used for the content of the drawer.
+   */
+  drawerContent?: string;
+  /**
+   * Added to the root class for large drawer.
+   */
+  lgPermangent?: string;
+  /**
+   * Added to the root class for medium drawer.
+   */
+  mdPermangent?: string;
+  /**
+   * Root class for the drawer.
+   */
+  navDrawer?: string;
+  /**
+   * Added to the root class if positioning is pinned.
+   */
+  pinned?: string;
+  /**
+   * Used as a wrapper for the drawer content.
+   */
+  scrim?: string;
+  /**
+   * Added to the drawer content if its scrollable.
+   */
+  scrollY?: string;
+  /**
+   * Added to the root class for small drawer.
+   */
+  smPermanent?: string;
+  /**
+   * Added to the root class if width is wide.
+   */
+  wide?: string;
+  /**
+   * Added to the root class for extra big drawer.
+   */
+  xlPermanent?: string;
+  /**
+   * Added to the root class for super big drawer.
+   */
+  xxlPermangent?: string;
+  /**
+   * Added to the root class for largest possible drawer.
+   */
+  xxxlPermangent?: string;
+}
+
+interface NavDrawerProps extends __ReactToolbox.Props {
+  /**
+   * If true, the drawer will be shown as an overlay.
+   * @default false
+   */
+  active?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Callback function to be invoked when the overlay is clicked.
+   */
+  onOverlayClick?: __React.MouseEventHandler;
+  /**
+   * The breakpoint at which the drawer is automatically pinned.
+   */
+  permanentAt?: "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
+  /**
+   * If true, the drawer will be pinned open. pinned takes precedence over active.
+   * @default false
+   */
+  pinned?: boolean;
+  /**
+   * If true, the drawer will vertically scroll all content.
+   * @default false
+   */
+  scrollY?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: NavDrawerTheme;
+  /**
+   * 320px or 400px. Only applicable above the sm breakpoint.
+   * @default normal
+   */
+  width?: "normal" | "wide";
+}
+
+export class NavDrawer extends __React.Component<NavDrawerProps, {}> { }
+
+export interface PanelTheme {
+  /**
+   * Used as the root class of the panel component.
+   */
+  panel?: string;
+  /**
+   * Used in case the panel is scrollable.
+   */
+  scrollY?: string;
+}
+
+interface PanelProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * If true, the panel will vertically scroll all content.
+   * @default false
+   */
+  scrollY?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: PanelTheme;
+}
+
+export class Panel extends __React.Component<PanelProps, {}> { }
+
+export interface SidebarTheme {
+  /**
+   * Added to the root class if sidebar is pinned.
+   */
+  pinned?: string;
+  /**
+   * Add to the content of sidebar if its scrollable.
+   */
+  scrollY?: string;
+  /**
+   * Root class of the sidebar.
+   */
+  sidebar?: string;
+  /**
+   * Used in for the content element of the sidebar.
+   */
+  sidebarContent?: string;
+}
+
+interface SidebarProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * If true, the sidebar will be pinned open.
+   * @default false
+   */
+  pinned?: boolean;
+  /**
+   * If true, the sidebar will vertically scroll all content
+   * @default false
+   */
+  scrollY?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: SidebarTheme;
+  /**
+   * Width in standard increments (1-12) or percentage (25, 33, 50, 66, 75, 100)
+   * @default 5
+   */
+  width?: number; // 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 25 | 33 | 50 | 66 | 75 | 100;
+}
+
+export class Sidebar extends __React.Component<SidebarProps, {}> { }
diff --git a/lib/link/index.d.ts b/lib/link/index.d.ts
new file mode 100644
index 000000000..00e18f3d0
--- /dev/null
+++ b/lib/link/index.d.ts
@@ -0,0 +1,50 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface LinkTheme {
+  /**
+   * Added to the root element if the Link is active.
+   */
+  active?: string;
+  /**
+   * Used for the icon element if it's present.
+   */
+  icon?: string;
+  /**
+   * Used for the root element.
+   */
+  link?: string;
+}
+
+interface LinkProps extends __ReactToolbox.Props {
+  /**
+   * If true, adds active style to link.
+   * @default false
+   */
+  active?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Sets a count number.
+   */
+  count?: number;
+  /**
+   * Sets the anchor link.
+   */
+  href?: string;
+  /**
+   * An icon key string to include a FontIcon component in front of the text.
+   */
+  icon?: __React.ReactNode | string;
+  /**
+   * The text string used for the text content of the link.
+   */
+  label?: string;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: LinkTheme;
+}
+
+export class Link extends __React.Component<LinkProps, {}> { }
diff --git a/lib/list/index.d.ts b/lib/list/index.d.ts
new file mode 100644
index 000000000..cd0f6e7aa
--- /dev/null
+++ b/lib/list/index.d.ts
@@ -0,0 +1,264 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface ListTheme {
+  /**
+   * Used for the root element of the list.
+   */
+  list?: string;
+}
+
+interface ListProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * If true, each element in the list will have a ripple effect on click
+   * @default false
+   */
+  ripple?: boolean;
+  /**
+   * If true, the elements in the list will display a hover effect and a pointer cursor.
+   * @default false
+   */
+  selectable?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ListTheme;
+}
+
+export class List extends __React.Component<ListProps, {}> { }
+
+export interface ListCheckboxTheme {
+  /**
+   * Used as a wrapper class for the subheader element.
+   */
+  checkbox?: string;
+  /**
+   * Added to the checkbox element.
+   */
+  checkboxItem?: string;
+  /**
+   * Added to the inner content if its a disabled item.
+   */
+  disabled?: string;
+  /**
+   * Used for the inner content of a list item.
+   */
+  item?: string;
+  /**
+   * Used for the content wrapper element in list item.
+   */
+  itemContentRoot?: string;
+  /**
+   * Added to the text inside of the list item.
+   */
+  itemText?: string;
+  /**
+   * Added to the content wrapper element if size is large.
+   */
+  large?: string;
+  /**
+   * Added to the text inside of the list item if its primary.
+   */
+  primary?: string;
+}
+
+interface ListCheckboxProps extends __ReactToolbox.Props {
+  /**
+   * Main text of the item. Required.
+   */
+  caption?: string;
+  /**
+   * If true the checkbox appears checked by default.
+   * @default false
+   */
+  checked?: boolean;
+  /**
+   * If true, the item is displayed as disabled and it's not clickable.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Secondary text to display under the caption.
+   */
+  legend?: string;
+  /**
+   * Name for the checkbox input item.
+   */
+  name?: string;
+  /**
+   * Callback called when the input element is blurred.
+   */
+  onBlur?: __React.FocusEventHandler;
+  /**
+   * Callback called when the input element is changed.
+   */
+  onChange?: __React.FormEventHandler;
+  /**
+   * Callback called when the input element is focused.
+   */
+  onFocus?: __React.FocusEventHandler;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ListCheckboxTheme;
+}
+
+export class ListCheckbox extends __React.Component<ListCheckboxProps, {}> { }
+
+export interface ListDividerTheme {
+  /**
+   * Added to the root element.
+   */
+  divider?: string;
+  /**
+   * Added to root element if inset is true.
+   */
+  inset?: string;
+}
+
+interface ListDividerProps extends __ReactToolbox.Props {
+  /**
+   * If true, will leave a space at the left side.
+   */
+  inset?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ListDividerTheme;
+}
+
+export class ListDivider extends __React.Component<ListDivider, {}> { }
+
+export interface ListItemTheme {
+  /**
+   * Added to the inner content if its a disabled item.
+   */
+  disabled?: string;
+  /**
+   * Used for the inner content of a list item.
+   */
+  item?: string;
+  /**
+   * Used for each action element (left/right).
+   */
+  itemAction?: string;
+  /**
+   * Used for the content wrapper element in list item.
+   */
+  itemContentRoot?: string;
+  /**
+   * Added to the text inside of the list item.
+   */
+  itemText?: string;
+  /**
+   * Added to the content wrapper element if size is large.
+   */
+  large?: string;
+  /**
+   * Added for the element that wraps left actions.
+   */
+  left?: string;
+  /**
+   * Used for the root element of the list.
+   */
+  listItem?: string;
+  /**
+   * Added to the text inside of the list item if its primary.
+   */
+  primary?: string;
+  /**
+   * Added for the element that wraps right actions.
+   */
+  right?: string;
+  /**
+   * Added to the inner content if its a selectable item.
+   */
+  selectable?: string;
+}
+
+interface ListItemProps extends __ReactToolbox.Props {
+  /**
+   * A string URL to specify an avatar in the left side of the item.
+   */
+  avatar?: __React.ReactNode | string;
+  /**
+   * Main text of the item.
+   */
+  caption?: string;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * If true, the item is displayed as disabled and is not clickable.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * An element that will be displayed as the item. If set, this will override caption and legend.
+   */
+  itemContent?: __React.ReactNode;
+  /**
+   * A list of elements that are placed on the left side of the item and after the avatar attribute.
+   */
+  leftActions?: __React.ReactNode;
+  /**
+   * A string key of a font icon or element to display an icon in the left side of the item.
+   */
+  leftIcon?: __React.ReactNode | string;
+  /**
+   * Secondary text to display under the caption.
+   */
+  legend?: string;
+  /**
+   * A list of elements that are placed on the right side of the item and after the rightIcon attribute.
+   */
+  rightActions?: __React.ReactNode;
+  /**
+   * The same as the leftIcon but in this case the icon is displayed in the right side.
+   */
+  rightIcon?: __React.ReactNode | string;
+  /**
+   * If true, the item displays a ripple effect on click. By default it's inherited from the parent element.
+   */
+  ripple?: boolean;
+  /**
+   * If true, the elements in the list will display a hover effect and a pointer cursor. Inherited from the parent.
+   * @default false
+   */
+  selectable?: boolean;
+  /**
+   * Classnames object defining the component style.
+   * @default false
+   */
+  theme?: ListItemTheme;
+  /**
+   * In case you want to provide the item as a link, you can pass this property to specify the href.
+   */
+  to?: string;
+}
+
+export class ListItem extends __React.Component<ListItemProps, {}> { }
+
+export interface ListSubHeaderTheme {
+  /**
+   * Used as a wrapper class for the subheader element.
+   */
+  subheader?: string;
+}
+
+interface ListSubHeaderProps extends __ReactToolbox.Props {
+  /**
+   * Text that will be displayed.
+   */
+  caption?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ListSubHeaderTheme;
+}
+
+export class ListSubHeader extends __React.Component<ListSubHeaderProps, {}> { }
diff --git a/lib/menu/index.d.ts b/lib/menu/index.d.ts
new file mode 100644
index 000000000..c2609035d
--- /dev/null
+++ b/lib/menu/index.d.ts
@@ -0,0 +1,241 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface MenuTheme {
+  /**
+   * Added to the root element when menu is active.
+   */
+  active?: string;
+  /**
+   * Added to the root when position is bottom left.
+   */
+  bottomLeft?: string;
+  /**
+   * Added to the root when position is bottom right.
+   */
+  bottomRight?: string;
+  /**
+   * Used for the root element of the menu.
+   */
+  menu?: string;
+  /**
+   * Used for the inner wrapper.
+   */
+  menuInner?: string;
+  /**
+   * Used to draw the outline.
+   */
+  outline?: string;
+  /**
+   * Added to the menu in case if should have ripple.
+   */
+  rippled?: string;
+  /**
+   * Added to the root in case its static.
+   */
+  static?: string;
+  /**
+   * Added to the root when position is top left.
+   */
+  topLeft?: string;
+  /**
+   * Added to the root when position is top right.
+   */
+  topRight?: string;
+}
+
+interface MenuProps extends __ReactToolbox.Props {
+  /**
+   * If true, the menu will be displayed as opened by default.
+   * @default false
+   */
+  active?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Callback that will be called when the menu is being hidden.
+   */
+  onHide?: Function;
+  /**
+   * Callback that will be invoked when a menu item is selected.
+   */
+  onSelect?: Function;
+  /**
+   * Callback that will be invoked when the menu is being shown.
+   */
+  onShow?: Function;
+  /**
+   * If true the menu wrapper will show an outline with a soft shadow.
+   * @default false
+   */
+  outline?: boolean;
+  /**
+   * Determine the position of the menu. With static value the menu will be always shown, auto means that the it will decide the opening direction based on the current position. To force a position use topLeft, topRight, bottomLeft, bottomRight.
+   * @default static
+   */
+  position?: "auto" | "static" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
+  /**
+   * If true, the menu items will show a ripple effect on click.
+   * @default true
+   */
+  ripple?: boolean;
+  /**
+   * If true, the menu will keep a value to highlight the active child item.
+   * @default false
+   */
+  selectable?: boolean;
+  /**
+   * Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted.
+   */
+  selected?: any;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: MenuTheme;
+}
+
+export class Menu extends __React.Component<MenuProps, {}> { }
+
+export interface IconMenuTheme {
+  /**
+   * Used for the icon element.
+   */
+  icon?: string;
+  /**
+   * Used for the root element of the icon menu.
+   */
+  iconMenu?: string;
+}
+
+interface IconMenuProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Icon font key string or Element to display the opener icon.
+   * @default more_vert
+   */
+  icon?: __React.ReactNode | string;
+  /**
+   * If true, the icon will show a ripple when is clicked.
+   * @default true
+   */
+  iconRipple?: boolean;
+  /**
+   * Transferred to the Menu component.
+   * @default true
+   */
+  menuRipple?: boolean;
+  /**
+   * Callback that will be called when the menu is being hidden.
+   */
+  onHide?: Function;
+  /**
+   * Callback that will be invoked when a menu item is selected.
+   */
+  onSelect?: Function;
+  /**
+   * Callback that will be invoked when the menu is being shown.
+   */
+  onShow?: Function;
+  /**
+   * Determines the position of the menu. This property is transferred to the inner Menu component.
+   * @default auto
+   */
+  position?: "auto" | "static" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
+  /**
+   * If true, the menu will keep a value to highlight the active child item.
+   * @default false
+   */
+  selectable?: boolean;
+  /**
+   * Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted.
+   */
+  selected?: any;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: IconMenuTheme;
+}
+
+export class IconMenu extends __React.Component<IconMenuProps, {}> { }
+
+export interface MenuDividerTheme {
+  /**
+   *
+   */
+  menuDivider?: string;
+}
+
+interface MenuDividerProps extends __ReactToolbox.Props {
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: MenuDividerTheme;
+}
+
+export class MenuDivider extends __React.Component<MenuDividerProps, {}> { }
+
+export interface MenuItemTheme {
+  /**
+   * Used for the caption inside the item.
+   */
+  caption?: string;
+  /**
+   * Added to the root element if it's disabled.
+   */
+  disabled?: string;
+  /**
+   * Used for the icon element if exists.
+   */
+  icon?: string;
+  /**
+   * Used as the root class for the component.
+   */
+  menuItem?: string;
+  /**
+   * Added to the root element in case it's selected.
+   */
+  selected?: string;
+  /**
+   * Used for the shortcut element if exists.
+   */
+  shortcut?: string;
+}
+
+interface MenuItemProps extends __ReactToolbox.Props {
+  /**
+   * The text to include in the menu item. Required.
+   */
+  caption: string;
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * If true, the item will be displayed as disabled and is not selectable.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Icon font key string or Element to display in the right side of the option.
+   */
+  icon?: __React.ReactNode | string;
+  /**
+   * Transferred from the Menu component for selectable menus. Indicates if it's the current active option.
+   * @default false
+   */
+  selected?: boolean;
+  /**
+   * Displays shortcut text on the right side of the caption attribute.
+   */
+  shortcut?: string;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: MenuItemTheme;
+}
+
+export class MenuItem extends __React.Component<MenuItemProps, {}> { }
diff --git a/lib/navigation/index.d.ts b/lib/navigation/index.d.ts
new file mode 100644
index 000000000..47f46045c
--- /dev/null
+++ b/lib/navigation/index.d.ts
@@ -0,0 +1,46 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface NavigationTheme {
+  /**
+   * Used for buttons provided in the component.
+   */
+  button?: string;
+  /**
+   * Used for the root element if the layout is horizontal.
+   */
+  horizontal?: string;
+  /**
+   * Used for links provided in the component.
+   */
+  link?: string;
+  /**
+   * Used for the root element if the layout is vertical.
+   */
+  vertical?: string;
+}
+
+interface NavigationProps extends __ReactToolbox.Props {
+  /**
+   * Array of objects that will be represented as <Button/> so the keys will be transferred as properties the Button Component.
+   */
+  actions?: any[];
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Array of objects similar to actions but that will be rendered as <Link/> component definition.
+   */
+  routes?: any[];
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: NavigationTheme;
+  /**
+   * Type of the navigation, it can be vertical or horizontal.
+   * @default horizontal
+   */
+  type?: "vertical" | "horizontal";
+}
+
+export class Navigation extends __React.Component<NavigationProps, {}> { }
diff --git a/lib/progress_bar/index.d.ts b/lib/progress_bar/index.d.ts
new file mode 100644
index 000000000..8a2a8425a
--- /dev/null
+++ b/lib/progress_bar/index.d.ts
@@ -0,0 +1,82 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface ProgressBarTheme {
+  /**
+   * Used to style the buffer element in the linear progress.
+   */
+  buffer?: string;
+  /**
+   * Used for the circle element in the circular progress.
+   */
+  circle?: string;
+  /**
+   * Used for the root element when the type is circular.
+   */
+  circular?: string;
+  /**
+   * Added to the root element if mode is indeterminate.
+   */
+  indeterminate?: string;
+  /**
+   * Used for the root element when the type is linear.
+   */
+  linear?: string;
+  /**
+   * Added to the root if the component is multicolor (circular).
+   */
+  multicolor?: string;
+  /**
+   * Used for the inner path in the circular progress.
+   */
+  path?: string;
+  /**
+   * Used to style the value element in the linear progress.
+   */
+  value?: string;
+}
+
+interface ProgressBarProps extends __ReactToolbox.Props {
+  /**
+   * Value of a secondary progress bar useful for buffering.
+   * @default 0
+   */
+  buffer?: number;
+  /**
+   * Maximum value permitted.
+   * @default 100
+   */
+  max?: number;
+  /**
+   * Minimum value permitted.
+   * @default 0
+   */
+  min?: number;
+  /**
+   * Mode of the progress bar, it can be determinate or indeterminate.
+   * @default indeterminate
+   */
+  mode?: "determinate" | "indeterminate";
+  /**
+   * If true, the circular progress bar will be changing its color.
+   * @default false
+   */
+  multicolor?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ProgressBarTheme;
+  /**
+   * Type of the progress bar, it can be circular or linear.
+   * @default linear
+   */
+  type?: "linear" | "circular";
+  /**
+   * Value of the current progress.
+   * @default 0
+   */
+  value?: number;
+}
+
+export class ProgressBar extends __React.Component<ProgressBarProps, {}> { }
+
+export default ProgressBar;
diff --git a/lib/radio/index.d.ts b/lib/radio/index.d.ts
new file mode 100644
index 000000000..5f3621329
--- /dev/null
+++ b/lib/radio/index.d.ts
@@ -0,0 +1,101 @@
+import __ReactToolbox from "../index.d.ts";
+
+interface RadioGroupProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * If true, the group will be displayed as disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Name for the input element group.
+   */
+  name?: string;
+  /**
+   * Callback function that will be invoked when the value changes.
+   */
+  onChange?: Function;
+  /**
+   * Default value selected in the radio group.
+   */
+  value?: number;
+}
+
+export class RadioGroup extends __React.Component<RadioGroupProps, {}> { }
+
+export interface RadioButtonTheme {
+  /**
+   * Used to for the radio element.
+   */
+  radio?: string;
+  /**
+   * Used for the radio element when it's checked.
+   */
+  radioChecked?: string;
+  /**
+   * To provide styles for the ripple.
+   */
+  ripple?: string;
+  /**
+   * Added to the root of the Radio in case it's disabled.
+   */
+  disabled?: string;
+  /**
+   * Used as the root class of the component.
+   */
+  field?: string;
+  /**
+   * Used for the input element.
+   */
+  input?: string;
+  /**
+   * Used to style the text label element.
+   */
+  text?: string;
+}
+
+interface RadioButtonProps extends __ReactToolbox.Props {
+  /**
+   * If true, the input element will be selected by default. Transferred from the parent.
+   * @default false
+   */
+  checked?: boolean;
+  /**
+   * If true, the item will be displayed as disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Label for the radio button.
+   */
+  label?: __React.ReactNode | string;
+  /**
+   * Name for the input element.
+   */
+  name?: string;
+  /**
+   * Callback function that will be invoked when the input is blurred.
+   */
+  onBlur?: __React.FocusEventHandler;
+  /**
+   * Callback function that will be invoked when the value changes.
+   */
+  onChange?: __React.FormEventHandler;
+  /**
+   * Callback function that will be invoked when the input is focused.
+   */
+  onFocus?: __React.FocusEventHandler;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: RadioButtonTheme;
+  /**
+   * Value for the radio button.
+   */
+  value?: any;
+}
+
+export class RadioButton extends __React.Component<RadioButtonProps, {}> { }
diff --git a/lib/ripple/index.d.ts b/lib/ripple/index.d.ts
new file mode 100644
index 000000000..059e6fb13
--- /dev/null
+++ b/lib/ripple/index.d.ts
@@ -0,0 +1,49 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface RippleTheme {
+  /**
+   * Root classname for the ripple.
+   */
+  ripple?: string;
+  /**
+   * Applied when the ripple is active.
+   */
+  rippleActive?: string;
+  /**
+   * Applied when the ripple is restarting.
+   */
+  rippleRestarting?: string;
+  /**
+   * Wrapper class to fit to the parent element.
+   */
+  rippleWrapper?: string;
+}
+
+interface RippleProps {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * True in case you want a centered ripple.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Function that will be called when the ripple animation ends.
+   */
+  onRippleEnded?: Function;
+  /**
+   * Factor to indicate how much should the ripple spread under the component.
+   * @default 2
+   */
+  spread?: number;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: RippleTheme;
+}
+
+export class Ripple extends __React.Component<RippleProps, {}> { }
+
+export default Ripple;
diff --git a/lib/slider/index.d.ts b/lib/slider/index.d.ts
new file mode 100644
index 000000000..fc10f35c3
--- /dev/null
+++ b/lib/slider/index.d.ts
@@ -0,0 +1,106 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface SliderTheme {
+  /**
+   * Used as an inner container of the root component.
+   */
+  container?: string;
+  /**
+   * Added to the root of in case the Slider is editable.
+   */
+  editable?: string;
+  /**
+   * Used to style the inner element of the knob.
+   */
+  innerknob?: string;
+  /**
+   * Provided to the ProgressBar component.
+   */
+  innerprogress?: string;
+  /**
+   * Provided to the Input element in case it's editable.
+   */
+  input?: string;
+  /**
+   * Used to style the outer layer of the knob.
+   */
+  knob?: string;
+  /**
+   * Added to the root in case the Slider is pinned.
+   */
+  pinned?: string;
+  /**
+   * Added to the root in case the state is pressed.
+   */
+  pressed?: string;
+  /**
+   * Used as an outer wrapper for the ProgressBar.
+   */
+  progress?: string;
+  /**
+   * Used in the root when the knob should be a ring.
+   */
+  ring?: string;
+  /**
+   * Class used for the root element.
+   */
+  slider?: string;
+  /**
+   * Used for every individual snap element.
+   */
+  snap?: string;
+  /**
+   * Used as a wrapper for the group of snaps when it's snapped.
+   */
+  snaps?: string;
+}
+
+interface SliderProps extends __ReactToolbox.Props {
+  /**
+   * If true, an input is shown and the user can set the slider from keyboard value.
+   * @default false
+   */
+  editable?: boolean;
+  /**
+   * Maximum value permitted.
+   * @default 100
+   */
+  max?: number;
+  /**
+   * Minimum value permitted.
+   * @default 0
+   */
+  min?: number;
+  /**
+   * Callback function that will be invoked when the slider value changes.
+   */
+  onChange?: Function;
+  /**
+   * If true, a pin with numeric value label is shown when the slider thumb is pressed. Use for settings for which users need to know the exact value of the setting.
+   * @default false
+   */
+  pinned?: boolean;
+  /**
+   * If true, the slider thumb snaps to tick marks evenly spaced based on the step property value.
+   * @default false
+   */
+  snaps?: boolean;
+  /**
+   * Amount to vary the value when the knob is moved or increase/decrease is called.
+   * @default 0.01
+   */
+  step?: number;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: SliderTheme;
+  /**
+   * Current value of the slider.
+   * @default 0
+   */
+  value?: number;
+}
+
+export class Slider extends __React.Component<SliderProps, {}> { }
+
+export default Slider;
diff --git a/lib/snackbar/index.d.ts b/lib/snackbar/index.d.ts
new file mode 100644
index 000000000..91066ea01
--- /dev/null
+++ b/lib/snackbar/index.d.ts
@@ -0,0 +1,76 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface SnackbarTheme {
+  /**
+   * Added to the root element in case it's accept type.
+   */
+  accept?: string;
+  /**
+   * Added to the root element when its active.
+   */
+  active?: string;
+  /**
+   * Used for the button inside the component.
+   */
+  button?: string;
+  /**
+   * Added to the root element in case it's cancel type.
+   */
+  cancel?: string;
+  /**
+   * Used for the icon element.
+   */
+  icon?: string;
+  /**
+   * Used for the label element.
+   */
+  label?: string;
+  /**
+   * Used as the className for the root element of the component.
+   */
+  snackbar?: string;
+  /**
+   * Added to the root element in case it's warning type.
+   */
+  warning?: string;
+}
+
+interface SnackbarProps extends __ReactToolbox.Props {
+  /**
+   * Label for the action component inside the Snackbar.
+   */
+  action?: string;
+  /**
+   * If true, the snackbar will be active.
+   * @default true
+   */
+  active?: boolean;
+  /**
+   * String key for an icon or Element which will be displayed in left side of the snackbar.
+   */
+  icon?: __React.ReactNode | string;
+  /**
+   * Text to display in the content. Required.
+   */
+  label: string;
+  /**
+   * Callback function when finish the set timeout.
+   */
+  onTimeout?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: SnackbarTheme;
+  /**
+   * Amount of time in milliseconds after the Snackbar will be automatically hidden.
+   */
+  timeout?: number;
+  /**
+   * Indicates the action type. Can be accept, warning or cancel
+   */
+  type?: "accept" | "cancel" | "warning";
+}
+
+export class Snackbar extends __React.Component<SnackbarProps, {}> { }
+
+export default Snackbar;
diff --git a/lib/switch/index.d.ts b/lib/switch/index.d.ts
new file mode 100644
index 000000000..6639a9b1d
--- /dev/null
+++ b/lib/switch/index.d.ts
@@ -0,0 +1,77 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface SwitchTheme {
+  /**
+   * Used for the root element if the component is disabled.
+   */
+  disabled?: string;
+  /**
+   * Used for the root element if the component is not disabled.
+   */
+  field?: string;
+  /**
+   * Used for the input element.
+   */
+  input?: string;
+  /**
+   * Used for a wrapper around the thumb if checked is false.
+   */
+  off?: string;
+  /**
+   * Used for a wrapper around the thumb if checked is true.
+   */
+  on?: string;
+  /**
+   * Used for the ripple inside the switch.
+   */
+  ripple?: string;
+  /**
+   * Used for the text label element.
+   */
+  text?: string;
+  /**
+   * Used for the thumb element.
+   */
+  thumb?: string;
+}
+
+interface SwitchProps extends __ReactToolbox.Props {
+  /**
+   * If true, the switch will be enabled.
+   * @default false
+   */
+  checked?: boolean;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * The text string to use for the floating label element.
+   */
+  label?: string;
+  /**
+   * The text string used as name of the input.
+   */
+  name?: string;
+  /**
+   * Callback function that is fired when when the switch is blurred.
+   */
+  onBlur?: __React.FocusEventHandler;
+  /**
+   * Callback function that is fired when the component's value changes.
+   */
+  onChange?: __React.FormEventHandler;
+  /**
+   * Callback function that is fired when the switch is focused.
+   */
+  onFocus?: __React.FocusEventHandler;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: SwitchTheme;
+}
+
+export class Switch extends __React.Component<SwitchProps, {}> { }
+
+export default Switch;
diff --git a/lib/table/index.d.ts b/lib/table/index.d.ts
new file mode 100644
index 000000000..05b8fe4ac
--- /dev/null
+++ b/lib/table/index.d.ts
@@ -0,0 +1,70 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface TableTheme {
+  /**
+   * It will be added to a row in case it is editable.
+   */
+  editable?: string;
+  /**
+   * Used for the row element.
+   */
+  row?: string;
+  /**
+   * It will be added to a row in case it is selectable.
+   */
+  selectable?: string;
+  /**
+   * Added to a row in case it is selected.
+   */
+  selected?: string;
+  /**
+   * Classname used for the root element.
+   */
+  table?: string;
+}
+
+interface TableProps extends __ReactToolbox.Props {
+  /**
+   * If true, component will show a heading using model field names.
+   * @default true
+   */
+  heading?: boolean;
+  /**
+   * Object describing the data model that represents each object in the source.
+   */
+  model?: any;
+  /**
+   * Callback function that is fired when an item in a row changes. If set, rows are editable.
+   */
+  onChange?: Function;
+  /**
+   * Callback function invoked when the row selection changes.
+   */
+  onSelect?: __React.FormEventHandler;
+  /**
+   * If true, each row will display a checkbox to allow the user to select that one row.
+   * @default true
+   */
+  selectable?: boolean;
+  /**
+   * If true, the header and each row will display a checkbox to allow the user to select multiple rows.
+   * @default true
+   */
+  multiSelectable?: boolean;
+  /**
+   * Array of indexes of the items in the source that should appear as selected.
+   */
+  selected?: any[];
+  /**
+   * Array of objects representing each item to show.
+   */
+  source?: any[];
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: TableTheme;
+}
+
+export class Table extends __React.Component<TableProps, {}> { }
+
+export default Table;
diff --git a/lib/tabs/index.d.ts b/lib/tabs/index.d.ts
new file mode 100644
index 000000000..e5aeb2cdb
--- /dev/null
+++ b/lib/tabs/index.d.ts
@@ -0,0 +1,105 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface TabsTheme {
+  /**
+   * Added to the active tab content and header.
+   */
+  active?: string;
+  /**
+   * Used for the navigation element.
+   */
+  navigation?: string;
+  /**
+   * Used for the moving underline element.
+   */
+  pointer?: string;
+  /**
+   * Used as a root classname for the component.
+   */
+  tabs?: string;
+  /**
+   * Used for the tab content element.
+   */
+  tab?: string;
+}
+
+interface TabsProps extends __ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: __React.ReactNode;
+  /**
+   * Disable the animation below the active tab.
+   * @default false
+   */
+  disableAnimatedBottomBorder?: boolean;
+  /**
+   * Current
+   * @default 0
+   */
+  index?: number;
+  /**
+   * Callback function that is fired when the tab changes.
+   */
+  onChange?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: TabsTheme;
+}
+
+export class Tabs extends __React.Component<TabsProps, {}> { }
+
+export interface TabTheme {
+  /**
+   * Added to the navigation tab element in case it's active.
+   */
+  active?: string;
+  /**
+   * Added to the navigation tab element in case it's disabled.
+   */
+  disabled?: string;
+  /**
+   * Added to the navigation tab element in case it's hidden.
+   */
+  hidden?: string;
+  /**
+   * Added to the navigation tab element in case it's active.
+   */
+  label?: string;
+}
+
+interface TabProps extends __ReactToolbox.Props {
+  /**
+   * If true, the current component is visible.
+   */
+  active?: boolean;
+  /**
+   * Additional class name to provide custom styling for the active tab.
+   */
+  activeClassName?: string;
+  /**
+   * If true, the current component is not clickable.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If true, the current component is not visible.
+   * @default false
+   */
+  hidden?: boolean;
+  /**
+   * Label text for navigation header. Required.
+   */
+  label: string;
+  /**
+   * Callback function that is fired when the tab is activated.
+   */
+  onActive?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: TabTheme;
+}
+
+export class Tab extends __React.Component<TabProps, {}> { }
diff --git a/lib/time_picker/index.d.ts b/lib/time_picker/index.d.ts
new file mode 100644
index 000000000..0968a8c52
--- /dev/null
+++ b/lib/time_picker/index.d.ts
@@ -0,0 +1,132 @@
+import __ReactToolbox from "../index.d.ts";
+
+export interface TimePickerTheme {
+  /**
+   * Added to the number which is active in clock face.
+   */
+  active?: string;
+  /**
+   * AM label in dialog header when mode is AM/PM.
+   */
+  am?: string;
+  /**
+   * Added to the dialog when the selected format is AM.
+   */
+  amFormat?: string;
+  /**
+   * Wrapper for AM and PM labels in header when mode is AM/PM.
+   */
+  ampm?: string;
+  /**
+   * Used for buttons inside the dialog of the picker.
+   */
+  button?: string;
+  /**
+   * Clock root class element.
+   */
+  clock?: string;
+  /**
+   * Wrapper for the proper positioning of the clock.
+   */
+  clockWrapper?: string;
+  /**
+   * Used for the dialog component.
+   */
+  dialog?: string;
+  /**
+   * Used to style the clock face.
+   */
+  face?: string;
+  /**
+   * Used for the clock's hand.
+   */
+  hand?: string;
+  /**
+   * Dialog header wrapper class.
+   */
+  header?: string;
+  /**
+   * Used for hours in dialog header.
+   */
+  hours?: string;
+  /**
+   * Added to the dialog hours are displayed.
+   */
+  hoursDisplay?: string;
+  /**
+   * Used for Input element that opens the picker.
+   */
+  input?: string;
+  /**
+   * Used for the knob of the hand.
+   */
+  knob?: string;
+  /**
+   * Used for minutes in dialog header.
+   */
+  minutes?: string;
+  /**
+   * Added to the dialog minutes are displayed.
+   */
+  minutesDisplay?: string;
+  /**
+   * Each of the numbers in the clock's face.
+   */
+  number?: string;
+  /**
+   * Placeholder for the clock inside the dialog (inner wrapper).
+   */
+  placeholder?: string;
+  /**
+   * PM label in dialog header when mode is AM/PM.
+   */
+  pm?: string;
+  /**
+   * Added to the dialog when the selected format is PM.
+   */
+  pmFormat?: string;
+  /**
+   * Is the : separator between hours and minutes in dialog header.
+   */
+  separator?: string;
+  /**
+   * Added to the knob when no round number is selected.
+   */
+  small?: string;
+}
+
+interface TimePickerProps {
+  /**
+   * Provide error text which will be displayed under the field.
+   */
+  error?: string;
+  /**
+   * This class will be applied to Input component of TimePicker.
+   */
+  inputClassName?: string;
+  /**
+   * Format to display the clock. It can be 24hr or ampm.
+   * @default false
+   */
+  format?: "24hr" | "ampm";
+  /**
+   * The text string to use for the floating label element in the input component.
+   */
+  label?: string;
+  /**
+   * Callback called when the picker value is changed.
+   */
+  onChange?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: TimePickerTheme;
+  /**
+   * Datetime object with currrently selected time.
+   */
+  value?: Date;
+}
+
+export class TimePicker extends __React.Component<TimePickerProps, {}> { }
+
+export default TimePicker;
diff --git a/lib/tooltip/index.d.ts b/lib/tooltip/index.d.ts
new file mode 100644
index 000000000..f7686d769
--- /dev/null
+++ b/lib/tooltip/index.d.ts
@@ -0,0 +1,54 @@
+export interface TooltipTheme {
+  /**
+   * Added to the tooltip element.
+   */
+  tooltip?: string;
+  /**
+   * Added to the root when the tooltip is active.
+   */
+  tooltipActive?: string;
+  /**
+   * Wrapper for the root element used to position the tooltip.
+   */
+  tooltipWrapper?: string;
+}
+
+interface TooltipProps {
+  /**
+   * Callback called when the mouse enters the Component.
+   */
+  onMouseEnter?: __React.MouseEventHandler;
+  /**
+   * Callback called when the mouse leaves the Component.
+   */
+  onMouseLeave?: __React.MouseEventHandler;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: TooltipTheme;
+  /**
+   * The text string to use for the tooltip.
+   */
+  tooltip?: string;
+  /**
+   * Amount of time in miliseconds spent before the tooltip is visible.
+   */
+  tooltipDelay?: number;
+  /**
+   * If true, the Tooltip hides after a click in the host component.
+   * @default true
+   */
+  tooltipHideOnClick?: boolean;
+}
+
+declare class TooltipComponent<P, S> extends __React.Component<P, S> {
+  props: P & TooltipProps;
+}
+
+interface TooltippedComponentClass<P> extends TooltipProps {
+  new (props?: P, context?: any): TooltipComponent<P, any>;
+}
+
+export function Tooltip<P>(componentClass: __React.ComponentClass<P>): TooltippedComponentClass<P>;
+
+export default Tooltip;

From af9e88931de4fb05c1e9b3616ec8cd60bdffea52 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 24 Jul 2016 13:17:59 +0200
Subject: [PATCH 0686/1024] Latest build

---
 lib/_mixins.scss                 | 42 +++++++++++------------
 lib/autocomplete/Autocomplete.js | 58 +++++++++++++++-----------------
 lib/button/theme.scss            |  1 +
 lib/layout/Layout.js             |  2 +-
 lib/menu/Menu.js                 | 48 ++++++++++++++------------
 lib/ripple/Ripple.js             |  3 +-
 lib/tooltip/Tooltip.js           |  3 +-
 7 files changed, 79 insertions(+), 78 deletions(-)

diff --git a/lib/_mixins.scss b/lib/_mixins.scss
index f6159734b..9d8e4d302 100644
--- a/lib/_mixins.scss
+++ b/lib/_mixins.scss
@@ -7,7 +7,7 @@
 
 @mixin typo-display-4($color-contrast: false, $use-preferred: true) {
   @include typo-preferred-font($use-preferred);
-  font-size: 11.2rem;
+  font-size: $unit * 11.2rem;
   font-weight: 300;
   line-height: 1;
   letter-spacing: -.04em;
@@ -19,7 +19,7 @@
 
 @mixin typo-display-3($color-contrast: false, $use-preferred: true) {
   @include typo-preferred-font($use-preferred);
-  font-size: 5.6rem;
+  font-size: $unit * 5.6rem;
   font-weight: 400;
   line-height: 1.35;
   letter-spacing: -.02em;
@@ -31,9 +31,9 @@
 
 @mixin typo-display-2($color-contrast: false, $use-preferred: true) {
   @include typo-preferred-font($use-preferred);
-  font-size: 4.5rem;
+  font-size: $unit * 4.5;
   font-weight: 400;
-  line-height: 4.8rem;
+  line-height: $unit * 4.8;
 
   @if $color-contrast {
     opacity: .54;
@@ -42,9 +42,9 @@
 
 @mixin typo-display-1($color-contrast: false, $use-preferred: true) {
   @include typo-preferred-font($use-preferred);
-  font-size: 3.4rem;
+  font-size: $unit * 3.4;
   font-weight: 400;
-  line-height: 4rem;
+  line-height: $unit * 4;
 
   @if $color-contrast {
     opacity: .54;
@@ -53,9 +53,9 @@
 
 @mixin typo-headline($color-contrast: false, $use-preferred: true) {
   @include typo-preferred-font($use-preferred);
-  font-size: 2.4rem;
+  font-size: $unit * 2.4;
   font-weight: 400;
-  line-height: 3.2rem;
+  line-height: $unit * 3.2;
   -moz-osx-font-smoothing: grayscale;
 
   @if $color-contrast {
@@ -65,7 +65,7 @@
 
 @mixin typo-title($color-contrast: false, $use-preferred: true) {
   @include typo-preferred-font($use-preferred);
-  font-size: 2rem;
+  font-size: $unit * 2;
   font-weight: 500;
   line-height: 1;
   letter-spacing: .02em;
@@ -77,9 +77,9 @@
 
 @mixin typo-subhead($color-contrast: false, $use-preferred: true) {
   @include typo-preferred-font($use-preferred);
-  font-size: 1.6rem;
+  font-size: $unit * 1.6;
   font-weight: 400;
-  line-height: 2.4rem;
+  line-height: $unit * 2.4;
   letter-spacing: .04em;
 
   @if $color-contrast {
@@ -89,9 +89,9 @@
 
 @mixin typo-subhead-2($color-contrast: false, $use-preferred: true) {
   @include typo-preferred-font($use-preferred);
-  font-size: 1.6rem;
+  font-size: $unit * 1.6;
   font-weight: 400;
-  line-height: 2.8rem;
+  line-height: $unit * 2.8;
   letter-spacing: .04em;
 
   @if $color-contrast {
@@ -101,8 +101,8 @@
 
 @mixin typo-body-2($color-contrast: false, $use-preferred: false) {
   @include typo-preferred-font($use-preferred);
-  font-size: 1.4rem;
-  line-height: 2.4rem;
+  font-size: $unit * 1.4;
+  line-height: $unit * 2.4;
   letter-spacing: 0;
 
   @if $use-preferred {
@@ -118,9 +118,9 @@
 
 @mixin typo-body-1($color-contrast: false, $use-preferred: false) {
   @include typo-preferred-font($use-preferred);
-  font-size: 1.4rem;
+  font-size: $unit * 1.4;
   font-weight: 400;
-  line-height: 2.4rem;
+  line-height: $unit * 2.4;
   letter-spacing: 0;
 
   @if $color-contrast {
@@ -130,7 +130,7 @@
 
 @mixin typo-caption($color-contrast: false, $use-preferred: false) {
   @include typo-preferred-font($use-preferred);
-  font-size: 1.2rem;
+  font-size: $unit * 1.2;
   font-weight: 400;
   line-height: 1;
   letter-spacing: 0;
@@ -143,7 +143,7 @@
 @mixin typo-blockquote($color-contrast: false, $use-preferred: true) {
   @include typo-preferred-font($use-preferred);
   position: relative;
-  font-size: 2.4rem;
+  font-size: $unit * 2.4;
   font-style: italic;
   font-weight: 300;
   line-height: 1.35;
@@ -167,7 +167,7 @@
 
 @mixin typo-menu($color-contrast: false, $use-preferred: true) {
   @include typo-preferred-font($use-preferred);
-  font-size: 1.4rem;
+  font-size: $unit * 1.4;
   font-weight: 500;
   line-height: 1;
   letter-spacing: 0;
@@ -179,7 +179,7 @@
 
 @mixin typo-button($color-contrast: false, $use-preferred: true) {
   @include typo-preferred-font($use-preferred);
-  font-size: 1.4rem;
+  font-size: $unit * 1.4;
   font-weight: 500;
   line-height: 1;
   text-transform: uppercase;
diff --git a/lib/autocomplete/Autocomplete.js b/lib/autocomplete/Autocomplete.js
index 7d06285ba..83a65a932 100644
--- a/lib/autocomplete/Autocomplete.js
+++ b/lib/autocomplete/Autocomplete.js
@@ -203,40 +203,40 @@ var factory = function factory(Chip, Input) {
             }
           }
         } else if (query && !this.state.showAllSuggestions) {
-            var _iteratorNormalCompletion2 = true;
-            var _didIteratorError2 = false;
-            var _iteratorError2 = undefined;
+          var _iteratorNormalCompletion2 = true;
+          var _didIteratorError2 = false;
+          var _iteratorError2 = undefined;
 
-            try {
-              for (var _iterator2 = source[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
-                var _step2$value = _slicedToArray(_step2.value, 2);
+          try {
+            for (var _iterator2 = source[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+              var _step2$value = _slicedToArray(_step2.value, 2);
 
-                var key = _step2$value[0];
-                var value = _step2$value[1];
+              var key = _step2$value[0];
+              var value = _step2$value[1];
 
-                if (this.matches(value.toLowerCase().trim(), query)) {
-                  suggest.set(key, value);
-                }
+              if (this.matches(value.toLowerCase().trim(), query)) {
+                suggest.set(key, value);
               }
+            }
 
-              // When multiple is false, suggest all values when showAllSuggestions is true
-            } catch (err) {
-              _didIteratorError2 = true;
-              _iteratorError2 = err;
+            // When multiple is false, suggest all values when showAllSuggestions is true
+          } catch (err) {
+            _didIteratorError2 = true;
+            _iteratorError2 = err;
+          } finally {
+            try {
+              if (!_iteratorNormalCompletion2 && _iterator2.return) {
+                _iterator2.return();
+              }
             } finally {
-              try {
-                if (!_iteratorNormalCompletion2 && _iterator2.return) {
-                  _iterator2.return();
-                }
-              } finally {
-                if (_didIteratorError2) {
-                  throw _iteratorError2;
-                }
+              if (_didIteratorError2) {
+                throw _iteratorError2;
               }
             }
-          } else {
-              suggest = source;
-            }
+          }
+        } else {
+          suggest = source;
+        }
 
         return suggest;
       }
@@ -395,11 +395,9 @@ var factory = function factory(Chip, Input) {
         var label = _props.label;
         var source = _props.source;
         var suggestionMatch = _props.suggestionMatch;
-        var //eslint-disable-line no-unused-vars
-        selectedPosition = _props.selectedPosition;
+        var selectedPosition = _props.selectedPosition;
         var showSuggestionsWhenValueIsSet = _props.showSuggestionsWhenValueIsSet;
-        var //eslint-disable-line no-unused-vars
-        theme = _props.theme;
+        var theme = _props.theme;
 
         var other = _objectWithoutProperties(_props, ['error', 'label', 'source', 'suggestionMatch', 'selectedPosition', 'showSuggestionsWhenValueIsSet', 'theme']);
 
diff --git a/lib/button/theme.scss b/lib/button/theme.scss
index d75ca421d..f57d6027e 100644
--- a/lib/button/theme.scss
+++ b/lib/button/theme.scss
@@ -17,6 +17,7 @@
   align-content: center;
   align-items: center;
   justify-content: center;
+  line-height: $button-height;
   text-align: center;
   text-decoration: none;
   white-space: nowrap;
diff --git a/lib/layout/Layout.js b/lib/layout/Layout.js
index 6ce2b8922..de0f7a39a 100644
--- a/lib/layout/Layout.js
+++ b/lib/layout/Layout.js
@@ -51,7 +51,7 @@ Layout.propTypes = {
     }
 
     var names = _react2.default.Children.map(children, getChildName).join('|');
-    if (! ~ALLOWED_THEMED.indexOf(names)) {
+    if (!~ALLOWED_THEMED.indexOf(names)) {
       return new Error('`' + componentName + '` ' + 'should have a Panel for a child, optionally preceded by a NavDrawer and/or followed by a Sidebar.');
     }
   },
diff --git a/lib/menu/Menu.js b/lib/menu/Menu.js
index 6ef453a3a..bcc8ed066 100644
--- a/lib/menu/Menu.js
+++ b/lib/menu/Menu.js
@@ -101,37 +101,43 @@ var factory = function factory(MenuItem) {
     }, {
       key: 'componentWillReceiveProps',
       value: function componentWillReceiveProps(nextProps) {
+        var _this3 = this;
+
         if (this.props.position !== nextProps.position) {
           var position = nextProps.position === POSITION.AUTO ? this.calculatePosition() : nextProps.position;
           this.setState({ position: position });
         }
 
+        /**
+         * If the menu is going to be activated via props and its not active, verify
+         * the position is appropriated and then show it recalculating position if its
+         * wrong. It should be shown in two consecutive setState.
+         */
         if (!this.props.active && nextProps.active && !this.state.active) {
-          this.show();
+          if (nextProps.position === POSITION.AUTO) {
+            var _position = this.calculatePosition();
+            if (this.state.position !== _position) {
+              this.setState({ position: _position, active: false }, function () {
+                _this3.activateTimeoutHandle = setTimeout(function () {
+                  _this3.show();
+                }, 20);
+              });
+            } else {
+              this.show();
+            }
+          } else {
+            this.show();
+          }
         }
 
+        /**
+         * If the menu is being deactivated via props and the current state is
+         * active, it should be hid.
+         */
         if (this.props.active && !nextProps.active && this.state.active) {
           this.hide();
         }
       }
-    }, {
-      key: 'shouldComponentUpdate',
-      value: function shouldComponentUpdate(nextProps, nextState) {
-        var _this3 = this;
-
-        if (!this.state.active && nextState.active && this.props.position === POSITION.AUTO) {
-          var position = this.calculatePosition();
-          if (this.state.position !== position) {
-            this.setState({ position: position, active: false }, function () {
-              _this3.activateTimeoutHandle = setTimeout(function () {
-                _this3.setState({ active: true });
-              }, 20);
-            });
-            return false;
-          }
-        }
-        return true;
-      }
     }, {
       key: 'componentWillUpdate',
       value: function componentWillUpdate(nextProps, nextState) {
@@ -152,9 +158,7 @@ var factory = function factory(MenuItem) {
     }, {
       key: 'componentWillUnmount',
       value: function componentWillUnmount() {
-        if (this.state.active) {
-          _utils.events.removeEventsFromDocument({ click: this.handleDocumentClick });
-        }
+        if (this.state.active) _utils.events.removeEventsFromDocument({ click: this.handleDocumentClick });
         clearTimeout(this.positionTimeoutHandle);
         clearTimeout(this.activateTimeoutHandle);
       }
diff --git a/lib/ripple/Ripple.js b/lib/ripple/Ripple.js
index 52fa97bf3..7442c53e9 100644
--- a/lib/ripple/Ripple.js
+++ b/lib/ripple/Ripple.js
@@ -166,8 +166,7 @@ var rippleFactory = function rippleFactory() {
             var _props2 = this.props;
             var children = _props2.children;
             var ripple = _props2.ripple;
-            var //eslint-disable-line no-unused-vars
-            onRippleEnded = _props2.onRippleEnded;
+            var onRippleEnded = _props2.onRippleEnded;
             var className = _props2.rippleClassName;
             var centered = _props2.rippleCentered;
             var spread = _props2.rippleSpread;
diff --git a/lib/tooltip/Tooltip.js b/lib/tooltip/Tooltip.js
index 0f0c4f146..07a93b233 100644
--- a/lib/tooltip/Tooltip.js
+++ b/lib/tooltip/Tooltip.js
@@ -79,9 +79,8 @@ var factory = function factory() {
           var tooltip = _props.tooltip;
           var tooltipDelay = _props.tooltipDelay;
           var tooltipHideOnClick = _props.tooltipHideOnClick;
-          var theme = _props.theme;
 
-          var other = _objectWithoutProperties(_props, ['children', 'className', 'tooltip', 'tooltipDelay', 'tooltipHideOnClick', 'theme']); //eslint-disable-line no-unused-vars
+          var other = _objectWithoutProperties(_props, ['children', 'className', 'tooltip', 'tooltipDelay', 'tooltipHideOnClick']); //eslint-disable-line no-unused-vars
 
 
           var composedClassName = (0, _classnames3.default)(this.props.theme.tooltipWrapper, className);

From 163969025116d9b225e71576b25a33ff8b7c32de Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 24 Jul 2016 13:19:45 +0200
Subject: [PATCH 0687/1024] Fix typo in font-size calculation in mixins

---
 components/_mixins.scss | 4 ++--
 lib/_mixins.scss        | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/_mixins.scss b/components/_mixins.scss
index 9d8e4d302..40490c702 100644
--- a/components/_mixins.scss
+++ b/components/_mixins.scss
@@ -7,7 +7,7 @@
 
 @mixin typo-display-4($color-contrast: false, $use-preferred: true) {
   @include typo-preferred-font($use-preferred);
-  font-size: $unit * 11.2rem;
+  font-size: $unit * 11.2;
   font-weight: 300;
   line-height: 1;
   letter-spacing: -.04em;
@@ -19,7 +19,7 @@
 
 @mixin typo-display-3($color-contrast: false, $use-preferred: true) {
   @include typo-preferred-font($use-preferred);
-  font-size: $unit * 5.6rem;
+  font-size: $unit * 5.6;
   font-weight: 400;
   line-height: 1.35;
   letter-spacing: -.02em;
diff --git a/lib/_mixins.scss b/lib/_mixins.scss
index 9d8e4d302..40490c702 100644
--- a/lib/_mixins.scss
+++ b/lib/_mixins.scss
@@ -7,7 +7,7 @@
 
 @mixin typo-display-4($color-contrast: false, $use-preferred: true) {
   @include typo-preferred-font($use-preferred);
-  font-size: $unit * 11.2rem;
+  font-size: $unit * 11.2;
   font-weight: 300;
   line-height: 1;
   letter-spacing: -.04em;
@@ -19,7 +19,7 @@
 
 @mixin typo-display-3($color-contrast: false, $use-preferred: true) {
   @include typo-preferred-font($use-preferred);
-  font-size: $unit * 5.6rem;
+  font-size: $unit * 5.6;
   font-weight: 400;
   line-height: 1.35;
   letter-spacing: -.02em;

From 5ccd6dae018088d52e1fa440c56185c12388c616 Mon Sep 17 00:00:00 2001
From: VictorMolano <yuliusmb@hotmail.com>
Date: Sun, 24 Jul 2016 12:40:53 -0500
Subject: [PATCH 0688/1024] Fix multiselectable and unselect rows isues on
 Table component

---
 .gitignore                |  1 +
 components/table/Table.js | 10 +++++++---
 lib/index.js              | 14 +++++++-------
 lib/table/Table.js        | 27 ++++++++++++++++-----------
 4 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/.gitignore b/.gitignore
index 230678335..6781ff041 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@ build
 node_modules
 npm-debug.log
 .idea
+.DS_Store
\ No newline at end of file
diff --git a/components/table/Table.js b/components/table/Table.js
index 3a7979d07..e6f021cd5 100644
--- a/components/table/Table.js
+++ b/components/table/Table.js
@@ -44,10 +44,14 @@ const factory = (TableHead, TableRow) => {
       if (this.props.onSelect) {
         const position = this.props.selected.indexOf(index);
         let newSelected = [...this.props.selected];
-        if (position !== -1) { newSelected.splice(position, 1); }
-        if (position !== -1 && this.props.multiSelectable) {
+        
+        if (position !== -1) { 
+          newSelected = newSelected.filter((el,idx)=>{ return (idx != position); }); 
+        }
+        else if (this.props.multiSelectable) {
           newSelected.push(index);
-        } else {
+        } 
+        else {
           newSelected = [index];
         }
         this.props.onSelect(newSelected);
diff --git a/lib/index.js b/lib/index.js
index 87f0e6b4b..b4f37c537 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -8,7 +8,7 @@ exports.TimePicker = exports.Tooltip = exports.Table = exports.Switch = exports.
 var _button = require('./button');
 
 Object.keys(_button).forEach(function (key) {
-  if (key === "default") return;
+  if (key === "default" || key === "__esModule") return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
@@ -20,7 +20,7 @@ Object.keys(_button).forEach(function (key) {
 var _card = require('./card');
 
 Object.keys(_card).forEach(function (key) {
-  if (key === "default") return;
+  if (key === "default" || key === "__esModule") return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
@@ -32,7 +32,7 @@ Object.keys(_card).forEach(function (key) {
 var _layout = require('./layout');
 
 Object.keys(_layout).forEach(function (key) {
-  if (key === "default") return;
+  if (key === "default" || key === "__esModule") return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
@@ -44,7 +44,7 @@ Object.keys(_layout).forEach(function (key) {
 var _list = require('./list');
 
 Object.keys(_list).forEach(function (key) {
-  if (key === "default") return;
+  if (key === "default" || key === "__esModule") return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
@@ -56,7 +56,7 @@ Object.keys(_list).forEach(function (key) {
 var _menu = require('./menu');
 
 Object.keys(_menu).forEach(function (key) {
-  if (key === "default") return;
+  if (key === "default" || key === "__esModule") return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
@@ -68,7 +68,7 @@ Object.keys(_menu).forEach(function (key) {
 var _radio = require('./radio');
 
 Object.keys(_radio).forEach(function (key) {
-  if (key === "default") return;
+  if (key === "default" || key === "__esModule") return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
@@ -80,7 +80,7 @@ Object.keys(_radio).forEach(function (key) {
 var _tabs = require('./tabs');
 
 Object.keys(_tabs).forEach(function (key) {
-  if (key === "default") return;
+  if (key === "default" || key === "__esModule") return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
diff --git a/lib/table/Table.js b/lib/table/Table.js
index f46bb78f2..a3055289f 100644
--- a/lib/table/Table.js
+++ b/lib/table/Table.js
@@ -69,17 +69,22 @@ var factory = function factory(TableHead, TableRow) {
         }
       }, _this.handleRowSelect = function (index) {
         if (_this.props.onSelect) {
-          var position = _this.props.selected.indexOf(index);
-          var newSelected = [].concat(_toConsumableArray(_this.props.selected));
-          if (position !== -1) {
-            newSelected.splice(position, 1);
-          }
-          if (position !== -1 && _this.props.multiSelectable) {
-            newSelected.push(index);
-          } else {
-            newSelected = [index];
-          }
-          _this.props.onSelect(newSelected);
+          (function () {
+            var position = _this.props.selected.indexOf(index);
+            var newSelected = [].concat(_toConsumableArray(_this.props.selected));
+            if (position !== -1) {
+              newSelected = newSelected.filter(function (el, idx) {
+                return idx != position;
+              });
+            } else {
+              if (_this.props.multiSelectable) {
+                newSelected.push(index);
+              } else {
+                newSelected = [index];
+              }
+            }
+            _this.props.onSelect(newSelected);
+          })();
         }
       }, _this.handleRowChange = function (index, key, value) {
         if (_this.props.onChange) {

From 5a9fec86fadb88542197254caf8d958823dcecc9 Mon Sep 17 00:00:00 2001
From: Steven Lindberg <stevenjohnlindberg@gmail.com>
Date: Mon, 25 Jul 2016 08:28:31 -0700
Subject: [PATCH 0689/1024] Pass theme down to list item child components for
 correct classnames

---
 components/list/ListItemActions.js | 2 +-
 components/list/ListItemContent.js | 4 ++--
 components/list/ListItemLayout.js  | 6 +++---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/list/ListItemActions.js b/components/list/ListItemActions.js
index da7313bb4..94ed511d9 100644
--- a/components/list/ListItemActions.js
+++ b/components/list/ListItemActions.js
@@ -11,7 +11,7 @@ const factory = (ListItemAction) => {
 
     return (
       <span className={theme[type]}>
-        {validChildren.map((action, i) => <ListItemAction key={i} action={action} />)}
+        {validChildren.map((action, i) => <ListItemAction key={i} theme={theme} action={action} />)}
       </span>
     );
   };
diff --git a/components/list/ListItemContent.js b/components/list/ListItemContent.js
index 0c66d2d1b..4779821f3 100644
--- a/components/list/ListItemContent.js
+++ b/components/list/ListItemContent.js
@@ -37,8 +37,8 @@ const factory = (ListItemText) => {
 
       return (
         <span className={className}>
-          {caption && <ListItemText primary>{caption}</ListItemText>}
-          {legend && <ListItemText>{legend}</ListItemText>}
+          {caption && <ListItemText theme={theme} primary>{caption}</ListItemText>}
+          {legend && <ListItemText theme={theme}>{legend}</ListItemText>}
           {children}
         </span>
       );
diff --git a/components/list/ListItemLayout.js b/components/list/ListItemLayout.js
index 2fcb95567..18c114e17 100644
--- a/components/list/ListItemLayout.js
+++ b/components/list/ListItemLayout.js
@@ -23,14 +23,14 @@ const factory = (Avatar, ListItemContent, ListItemActions) => {
       props.rightIcon && <FontIcon value={props.rightIcon} key='rightIcon'/>,
       ...props.rightActions
     ];
-    const content = props.itemContent || <ListItemContent caption={props.caption} legend={props.legend} />;
+    const content = props.itemContent || <ListItemContent theme={props.theme} caption={props.caption} legend={props.legend} />;
     const emptyActions = (item) => !item[0] && !item[1] && !item[2];
 
     return (
       <span className={className}>
-        {!emptyActions(leftActions) > 0 && <ListItemActions type='left'>{leftActions}</ListItemActions>}
+        {!emptyActions(leftActions) > 0 && <ListItemActions type='left' theme={props.theme}>{leftActions}</ListItemActions>}
         {content}
-        {!emptyActions(rightActions) > 0 && <ListItemActions type='right'>{rightActions}</ListItemActions>}
+        {!emptyActions(rightActions) > 0 && <ListItemActions type='right' theme={props.theme}>{rightActions}</ListItemActions>}
       </span>
     );
   };

From 43ea2ef4f151599370094de2705d410d20342261 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 26 Jul 2016 00:53:06 +0200
Subject: [PATCH 0690/1024] 1.0.3 release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 1a7d7adaf..caa682c2b 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "react-toolbox",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "homepage": "http://www.react-toolbox.com/",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "main": "./lib",
   "author": {
     "name": "React Toolbox Team",

From 0c53de91a30fb65d4faa5d19247d57bf6990c2d7 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 26 Jul 2016 00:56:19 +0200
Subject: [PATCH 0691/1024] Latest build

---
 lib/autocomplete/Autocomplete.js |  2 +-
 lib/index.js                     | 14 +++++++-------
 lib/input/Input.js               |  4 +++-
 lib/list/ListItemActions.js      |  2 +-
 lib/list/ListItemContent.js      |  4 ++--
 lib/list/ListItemLayout.js       |  6 +++---
 6 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/lib/autocomplete/Autocomplete.js b/lib/autocomplete/Autocomplete.js
index 6dda75fe9..b97c69bf7 100644
--- a/lib/autocomplete/Autocomplete.js
+++ b/lib/autocomplete/Autocomplete.js
@@ -470,4 +470,4 @@ var factory = function factory(Chip, Input) {
 var Autocomplete = factory(_Chip2.default, _Input2.default);
 exports.default = (0, _reactCssThemr.themr)(_identifiers.AUTOCOMPLETE)(Autocomplete);
 exports.autocompleteFactory = factory;
-exports.Autocomplete = Autocomplete;
+exports.Autocomplete = Autocomplete;
\ No newline at end of file
diff --git a/lib/index.js b/lib/index.js
index 87f0e6b4b..b4f37c537 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -8,7 +8,7 @@ exports.TimePicker = exports.Tooltip = exports.Table = exports.Switch = exports.
 var _button = require('./button');
 
 Object.keys(_button).forEach(function (key) {
-  if (key === "default") return;
+  if (key === "default" || key === "__esModule") return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
@@ -20,7 +20,7 @@ Object.keys(_button).forEach(function (key) {
 var _card = require('./card');
 
 Object.keys(_card).forEach(function (key) {
-  if (key === "default") return;
+  if (key === "default" || key === "__esModule") return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
@@ -32,7 +32,7 @@ Object.keys(_card).forEach(function (key) {
 var _layout = require('./layout');
 
 Object.keys(_layout).forEach(function (key) {
-  if (key === "default") return;
+  if (key === "default" || key === "__esModule") return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
@@ -44,7 +44,7 @@ Object.keys(_layout).forEach(function (key) {
 var _list = require('./list');
 
 Object.keys(_list).forEach(function (key) {
-  if (key === "default") return;
+  if (key === "default" || key === "__esModule") return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
@@ -56,7 +56,7 @@ Object.keys(_list).forEach(function (key) {
 var _menu = require('./menu');
 
 Object.keys(_menu).forEach(function (key) {
-  if (key === "default") return;
+  if (key === "default" || key === "__esModule") return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
@@ -68,7 +68,7 @@ Object.keys(_menu).forEach(function (key) {
 var _radio = require('./radio');
 
 Object.keys(_radio).forEach(function (key) {
-  if (key === "default") return;
+  if (key === "default" || key === "__esModule") return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
@@ -80,7 +80,7 @@ Object.keys(_radio).forEach(function (key) {
 var _tabs = require('./tabs');
 
 Object.keys(_tabs).forEach(function (key) {
-  if (key === "default") return;
+  if (key === "default" || key === "__esModule") return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
diff --git a/lib/input/Input.js b/lib/input/Input.js
index 8e9433846..e492cf603 100644
--- a/lib/input/Input.js
+++ b/lib/input/Input.js
@@ -74,7 +74,9 @@ var factory = function factory(FontIcon) {
     _createClass(Input, [{
       key: 'componentDidMount',
       value: function componentDidMount() {
-        window.addEventListener('resize', this.handleAutoresize);
+        if (this.props.multiline) {
+          window.addEventListener('resize', this.handleAutoresize);
+        }
       }
     }, {
       key: 'componentWillReceiveProps',
diff --git a/lib/list/ListItemActions.js b/lib/list/ListItemActions.js
index f04cbdf21..309d28734 100644
--- a/lib/list/ListItemActions.js
+++ b/lib/list/ListItemActions.js
@@ -33,7 +33,7 @@ var factory = function factory(ListItemAction) {
       'span',
       { className: theme[type] },
       validChildren.map(function (action, i) {
-        return _react2.default.createElement(ListItemAction, { key: i, action: action });
+        return _react2.default.createElement(ListItemAction, { key: i, theme: theme, action: action });
       })
     );
   };
diff --git a/lib/list/ListItemContent.js b/lib/list/ListItemContent.js
index 9202ea828..f9924b4a0 100644
--- a/lib/list/ListItemContent.js
+++ b/lib/list/ListItemContent.js
@@ -79,12 +79,12 @@ var factory = function factory(ListItemText) {
           { className: className },
           caption && _react2.default.createElement(
             ListItemText,
-            { primary: true },
+            { theme: theme, primary: true },
             caption
           ),
           legend && _react2.default.createElement(
             ListItemText,
-            null,
+            { theme: theme },
             legend
           ),
           children
diff --git a/lib/list/ListItemLayout.js b/lib/list/ListItemLayout.js
index 46ea8a5bc..22080f4a7 100644
--- a/lib/list/ListItemLayout.js
+++ b/lib/list/ListItemLayout.js
@@ -47,7 +47,7 @@ var factory = function factory(Avatar, ListItemContent, ListItemActions) {
 
     var leftActions = [props.leftIcon && _react2.default.createElement(_FontIcon2.default, { value: props.leftIcon, key: 'leftIcon' }), props.avatar && _react2.default.createElement(Avatar, { image: props.avatar, key: 'avatar' })].concat(_toConsumableArray(props.leftActions));
     var rightActions = [props.rightIcon && _react2.default.createElement(_FontIcon2.default, { value: props.rightIcon, key: 'rightIcon' })].concat(_toConsumableArray(props.rightActions));
-    var content = props.itemContent || _react2.default.createElement(ListItemContent, { caption: props.caption, legend: props.legend });
+    var content = props.itemContent || _react2.default.createElement(ListItemContent, { theme: props.theme, caption: props.caption, legend: props.legend });
     var emptyActions = function emptyActions(item) {
       return !item[0] && !item[1] && !item[2];
     };
@@ -57,13 +57,13 @@ var factory = function factory(Avatar, ListItemContent, ListItemActions) {
       { className: className },
       !emptyActions(leftActions) > 0 && _react2.default.createElement(
         ListItemActions,
-        { type: 'left' },
+        { type: 'left', theme: props.theme },
         leftActions
       ),
       content,
       !emptyActions(rightActions) > 0 && _react2.default.createElement(
         ListItemActions,
-        { type: 'right' },
+        { type: 'right', theme: props.theme },
         rightActions
       )
     );

From 3461a1fba3cac0cfbb96e694b7c1fae4640ec7cf Mon Sep 17 00:00:00 2001
From: Che' Jansen <che@eventhub.com.au>
Date: Thu, 28 Jul 2016 12:53:09 +1000
Subject: [PATCH 0692/1024] Add create option to autocomplete

---
 components/autocomplete/Autocomplete.js |  6 +++++-
 components/autocomplete/readme.md       |  1 +
 lib/autocomplete/Autocomplete.js        | 10 ++++++++--
 spec/components/autocomplete.js         | 24 +++++++++++++++---------
 4 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index bd76bab35..bd46a8429 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -27,6 +27,7 @@ const factory = (Chip, Input) => {
      showSuggestionsWhenValueIsSet: PropTypes.bool,
      source: PropTypes.any,
      suggestionMatch: PropTypes.oneOf(['start', 'anywhere', 'word']),
+     create: PropTypes.bool,
      theme: PropTypes.shape({
        active: PropTypes.string,
        autocomplete: PropTypes.string,
@@ -117,6 +118,9 @@ const factory = (Chip, Input) => {
        let target = this.state.active;
        if (!target) {
          target = [...this.suggestions().keys()][0];
+         if (this.props.create && !target){
+           target = this.state.query;
+         }
          this.setState({active: target});
        }
        this.select(target, event);
@@ -272,7 +276,7 @@ const factory = (Chip, Input) => {
      const {
       error, label, source, suggestionMatch,           //eslint-disable-line no-unused-vars
       selectedPosition, showSuggestionsWhenValueIsSet, //eslint-disable-line no-unused-vars
-      theme, ...other
+      theme, create, ...other
     } = this.props;
      const className = classnames(theme.autocomplete, {
        [theme.focus]: this.state.focus
diff --git a/components/autocomplete/readme.md b/components/autocomplete/readme.md
index 56bafa045..57251c2f5 100644
--- a/components/autocomplete/readme.md
+++ b/components/autocomplete/readme.md
@@ -55,6 +55,7 @@ If you want to provide a theme via context, the component key is `RTAutocomplete
 | `showSuggestionsWhenValueIsSet` | `Bool`     | `false`         | If true, the list of suggestions will not be filtered when a value is selected, until the query is modified. |
 | `suggestionMatch`   | `String`               | `start`         | Determines how suggestions are supplied. It can be `start` (query matches the start of a suggestion), `anywhere` (query matches anywhere inside the suggestion), or `word` (query matches the start of a word in the suggestion). |
 | `value`             | `String` or `Array`    |                 | Value or array of values currently selected component.|
+| `create`            | `Bool`  | `false` | Determines if user can create a new option by typing in the field
 
 Additional properties will be passed to the Input Component so you can use `hint`, `name` ... etc.
 
diff --git a/lib/autocomplete/Autocomplete.js b/lib/autocomplete/Autocomplete.js
index b97c69bf7..3f0d3513c 100644
--- a/lib/autocomplete/Autocomplete.js
+++ b/lib/autocomplete/Autocomplete.js
@@ -104,6 +104,9 @@ var factory = function factory(Chip, Input) {
           var target = _this.state.active;
           if (!target) {
             target = [].concat(_toConsumableArray(_this.suggestions().keys()))[0];
+            if (_this.props.create && !target) {
+              target = _this.state.query;
+            }
             _this.setState({ active: target });
           }
           _this.select(target, event);
@@ -158,7 +161,8 @@ var factory = function factory(Chip, Input) {
     }, {
       key: 'query',
       value: function query(key) {
-        return !this.props.multiple && key ? this.source().get(key) : '';
+        var value = this.props.create && !this.source().get(key) ? key : this.source().get(key);
+        return !this.props.multiple && key ? value : '';
       }
     }, {
       key: 'suggestions',
@@ -397,8 +401,9 @@ var factory = function factory(Chip, Input) {
         var selectedPosition = _props.selectedPosition;
         var showSuggestionsWhenValueIsSet = _props.showSuggestionsWhenValueIsSet;
         var theme = _props.theme;
+        var create = _props.create;
 
-        var other = _objectWithoutProperties(_props, ['error', 'label', 'source', 'suggestionMatch', 'selectedPosition', 'showSuggestionsWhenValueIsSet', 'theme']);
+        var other = _objectWithoutProperties(_props, ['error', 'label', 'source', 'suggestionMatch', 'selectedPosition', 'showSuggestionsWhenValueIsSet', 'theme', 'create']);
 
         var className = (0, _classnames5.default)(theme.autocomplete, _defineProperty({}, theme.focus, this.state.focus), this.props.className);
 
@@ -439,6 +444,7 @@ var factory = function factory(Chip, Input) {
     showSuggestionsWhenValueIsSet: _react.PropTypes.bool,
     source: _react.PropTypes.any,
     suggestionMatch: _react.PropTypes.oneOf(['start', 'anywhere', 'word']),
+    create: _react.PropTypes.bool,
     theme: _react.PropTypes.shape({
       active: _react.PropTypes.string,
       autocomplete: _react.PropTypes.string,
diff --git a/spec/components/autocomplete.js b/spec/components/autocomplete.js
index ad0de47db..9ed6f10d7 100644
--- a/spec/components/autocomplete.js
+++ b/spec/components/autocomplete.js
@@ -1,19 +1,24 @@
 import React from 'react';
 import Autocomplete from '../../components/autocomplete';
 
-const countriesArray = ['Spain', 'England', 'USA', 'Thailand', 'Tongo', 'Slovenia'];
-const countriesObject = {'ES-es': 'Spain', 'TH-th': 'Thailand', 'EN-gb': 'England',
-  'EN-en': 'United States of America', 'EN-nz': 'New Zealand'};
-
 class AutocompleteTest extends React.Component {
   state = {
     simple: 'Spain',
     simpleShowAll: 'England',
-    multiple: ['ES-es', 'TH-th']
+    multiple: ['ES-es', 'TH-th'],
+    countriesArray: ['Spain', 'England', 'USA', 'Thailand', 'Tongo', 'Slovenia'],
+    countriesObject: {'ES-es': 'Spain', 'TH-th': 'Thailand', 'EN-gb': 'England',
+      'EN-en': 'United States of America', 'EN-nz': 'New Zealand'}
   };
 
   handleMultipleChange = (value) => {
-    this.setState({multiple: value});
+    this.setState({
+      multiple: value,
+      countriesObject: {
+        ...this.state.countriesObject,
+        ...!this.state.countriesObject[value[0]] ? {[value[0]]: value[0]} : {}
+      }
+    });
   };
 
   handleSimpleChange = (value) => {
@@ -33,9 +38,10 @@ class AutocompleteTest extends React.Component {
         <Autocomplete
           onChange={this.handleMultipleChange}
           label="Pick multiple elements..."
-          source={countriesObject}
+          source={this.state.countriesObject}
           value={this.state.multiple}
           suggestionMatch="anywhere"
+          create={true}
         />
 
         <Autocomplete
@@ -43,7 +49,7 @@ class AutocompleteTest extends React.Component {
           hint="Elements up to you..."
           multiple={false}
           onChange={this.handleSimpleChange}
-          source={countriesArray}
+          source={this.state.countriesArray}
           value={this.state.simple}
         />
 
@@ -52,7 +58,7 @@ class AutocompleteTest extends React.Component {
           hint="Elements up to you..."
           multiple={false}
           onChange={this.handleSimpleShowAllChange}
-          source={countriesArray}
+          source={this.state.countriesArray}
           value={this.state.simpleShowAll}
           showSuggestionsWhenValueIsSet
         />

From 491a85c3a0adf8c5f3d8c1a5c79cf116b3918f83 Mon Sep 17 00:00:00 2001
From: Benjamin Schnelle <benjamin.schnelle@gmail.com>
Date: Thu, 28 Jul 2016 22:12:55 -0600
Subject: [PATCH 0693/1024] pass theme from layout to children

---
 components/layout/Layout.js | 2 +-
 lib/layout/Layout.js        | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/layout/Layout.js b/components/layout/Layout.js
index 2a2a08e27..1775f65a0 100644
--- a/components/layout/Layout.js
+++ b/components/layout/Layout.js
@@ -5,7 +5,7 @@ import { LAYOUT } from '../identifiers.js';
 
 const Layout = ({ className, children, theme }) => (
   <div data-react-toolbox='layout' className={classnames(theme.layout, className)}>
-    {children}
+    {React.Children.map(children, (child) => React.cloneElement(child, { theme }))}
   </div>
 );
 
diff --git a/lib/layout/Layout.js b/lib/layout/Layout.js
index de0f7a39a..81ee1e953 100644
--- a/lib/layout/Layout.js
+++ b/lib/layout/Layout.js
@@ -26,7 +26,9 @@ var Layout = function Layout(_ref) {
   return _react2.default.createElement(
     'div',
     { 'data-react-toolbox': 'layout', className: (0, _classnames2.default)(theme.layout, className) },
-    children
+    _react2.default.Children.map(children, function (child) {
+      return _react2.default.cloneElement(child, { theme: theme });
+    })
   );
 };
 

From 01ae580a326b9ac90c382e5ff956a427966686ac Mon Sep 17 00:00:00 2001
From: Abilio Almeida Eiroa <aabilio@gmail.com>
Date: Mon, 1 Aug 2016 13:21:32 +0200
Subject: [PATCH 0694/1024] Added support for locale on DatePicker dialog
 component

Updated components, docs and spec.
---
 components/date_picker/Calendar.js            |   9 +-
 components/date_picker/CalendarDay.js         |   6 +-
 components/date_picker/CalendarMonth.js       |  16 +-
 components/date_picker/DatePicker.js          |  20 +-
 components/date_picker/DatePickerDialog.js    |  13 +-
 components/date_picker/readme.md              |  20 +-
 components/utils/time.js                      | 194 +++++++++-----
 .../modules/examples/datepicker_example_1.txt |  25 ++
 lib/date_picker/Calendar.js                   |   8 +-
 lib/date_picker/CalendarDay.js                |   6 +-
 lib/date_picker/CalendarMonth.js              |  33 ++-
 lib/date_picker/DatePicker.js                 |  18 +-
 lib/date_picker/DatePickerDialog.js           |  12 +-
 lib/utils/time.js                             | 237 +++++++++++-------
 spec/components/pickers.js                    |  26 ++
 15 files changed, 452 insertions(+), 191 deletions(-)

diff --git a/components/date_picker/Calendar.js b/components/date_picker/Calendar.js
index 28297e084..d48a2d47d 100644
--- a/components/date_picker/Calendar.js
+++ b/components/date_picker/Calendar.js
@@ -20,7 +20,12 @@ const factory = (IconButton) => {
         prev: PropTypes.string,
         years: PropTypes.string
       }),
-      viewDate: PropTypes.object
+      viewDate: PropTypes.object,
+      locale: React.PropTypes.oneOfType([
+        React.PropTypes.string,
+        React.PropTypes.object
+      ]),
+      sundayFirstDayOfWeek: React.PropTypes.bool
     };
 
     static defaultProps = {
@@ -99,6 +104,8 @@ const factory = (IconButton) => {
               selectedDate={this.props.selectedDate}
               theme={this.props.theme}
               viewDate={this.state.viewDate}
+              locale={this.props.locale}
+              sundayFirstDayOfWeek={this.props.sundayFirstDayOfWeek}
               />
           </CssTransitionGroup>
         </div>
diff --git a/components/date_picker/CalendarDay.js b/components/date_picker/CalendarDay.js
index e22306e0c..0951ec30d 100644
--- a/components/date_picker/CalendarDay.js
+++ b/components/date_picker/CalendarDay.js
@@ -13,13 +13,15 @@ class Day extends Component {
       day: PropTypes.string,
       disabled: PropTypes.string
     }),
-    viewDate: PropTypes.object
+    viewDate: PropTypes.object,
+    sundayFirstDayOfWeek: PropTypes.bool
   };
 
   dayStyle () {
     if (this.props.day === 1) {
+      const e = (this.props.sundayFirstDayOfWeek) ? 0 : 1;
       return {
-        marginLeft: `${time.getFirstWeekDay(this.props.viewDate) * 100 / 7}%`
+        marginLeft: `${(time.getFirstWeekDay(this.props.viewDate) - e) * 100 / 7}%`
       };
     }
   }
diff --git a/components/date_picker/CalendarMonth.js b/components/date_picker/CalendarMonth.js
index 001121d19..19a415efe 100644
--- a/components/date_picker/CalendarMonth.js
+++ b/components/date_picker/CalendarMonth.js
@@ -15,7 +15,12 @@ class Month extends Component {
       title: PropTypes.string,
       week: PropTypes.string
     }),
-    viewDate: PropTypes.object
+    viewDate: PropTypes.object,
+    locale: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.object
+    ]),
+    sundayFirstDayOfWeek: React.PropTypes.bool
   };
 
   handleDayClick = (day) => {
@@ -23,9 +28,9 @@ class Month extends Component {
   };
 
   renderWeeks () {
-    return utils.range(0, 7).map(i => {
-      return <span key={i}>{time.getFullDayOfWeek(i).charAt(0)}</span>;
-    });
+    const days = utils.range(0, 7).map(d => time.getDayOfWeekLetter(d, this.props.locale));
+    const source = (this.props.sundayFirstDayOfWeek) ? days : [...days.slice(1), days[0]];
+    return source.map((d, i) => (<span key={i}>{d}</span>))
   }
 
   renderDays () {
@@ -42,6 +47,7 @@ class Month extends Component {
           selectedDate={this.props.selectedDate}
           theme={this.props.theme}
           viewDate={this.props.viewDate}
+          sundayFirstDayOfWeek={this.props.sundayFirstDayOfWeek}
         />
       );
     });
@@ -51,7 +57,7 @@ class Month extends Component {
     return (
       <div data-react-toolbox='month' className={this.props.theme.month}>
         <span className={this.props.theme.title}>
-          {time.getFullMonth(this.props.viewDate)} {this.props.viewDate.getFullYear()}
+          {time.getFullMonth(this.props.viewDate, this.props.locale)} {this.props.viewDate.getFullYear()}
         </span>
         <div className={this.props.theme.week}>{this.renderWeeks()}</div>
         <div className={this.props.theme.days}>{this.renderDays()}</div>
diff --git a/components/date_picker/DatePicker.js b/components/date_picker/DatePicker.js
index 1c2c582f4..42daf137f 100644
--- a/components/date_picker/DatePicker.js
+++ b/components/date_picker/DatePicker.js
@@ -37,7 +37,17 @@ const factory = (Input, DatePickerDialog) => {
       value: PropTypes.oneOfType([
         PropTypes.instanceOf(Date),
         PropTypes.string
-      ])
+      ]),
+      locale: React.PropTypes.oneOfType([
+        React.PropTypes.string,
+        React.PropTypes.object
+      ]),
+      sundayFirstDayOfWeek: React.PropTypes.bool
+    };
+
+    static defaultProps = {
+      locale: 'en',
+      sundayFirstDayOfWeek: false
     };
 
     state = {
@@ -67,11 +77,11 @@ const factory = (Input, DatePickerDialog) => {
     };
 
     render () {
-      const { autoOk, inputClassName, inputFormat, maxDate, minDate,
-        onEscKeyDown, onOverlayClick, value, ...others } = this.props;
+      const { autoOk, inputClassName, inputFormat, maxDate, minDate, sundayFirstDayOfWeek,
+        onEscKeyDown, onOverlayClick, value, locale, ...others } = this.props;
       const finalInputFormat = inputFormat || time.formatDate;
       const date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined;
-      const formattedDate = date === undefined ? '' : finalInputFormat(value);
+      const formattedDate = date === undefined ? '' : finalInputFormat(value, locale);
 
       return (
         <div data-react-toolbox='date-picker'>
@@ -101,6 +111,8 @@ const factory = (Input, DatePickerDialog) => {
             onSelect={this.handleSelect}
             theme={this.props.theme}
             value={date}
+            locale={locale}
+            sundayFirstDayOfWeek={sundayFirstDayOfWeek}
           />
         </div>
       );
diff --git a/components/date_picker/DatePickerDialog.js b/components/date_picker/DatePickerDialog.js
index 4936214cc..2a49aa2f6 100644
--- a/components/date_picker/DatePickerDialog.js
+++ b/components/date_picker/DatePickerDialog.js
@@ -25,7 +25,12 @@ const factory = (Dialog, Calendar) => {
         year: PropTypes.string,
         yearsDisplay: PropTypes.string
       }),
-      value: PropTypes.object
+      value: PropTypes.object,
+      locale: React.PropTypes.oneOfType([
+        React.PropTypes.string,
+        React.PropTypes.object
+      ]),
+      sundayFirstDayOfWeek: React.PropTypes.bool
     };
 
     static defaultProps = {
@@ -100,7 +105,7 @@ const factory = (Dialog, Calendar) => {
               {this.state.date.getFullYear()}
             </span>
             <h3 className={theme.date} onClick={this.handleSwitchDisplay.bind(this, 'months')}>
-              {time.getShortDayOfWeek(this.state.date.getDay())}, {time.getShortMonth(this.state.date)} {this.state.date.getDate()}
+              {time.getShortDayOfWeek(this.state.date.getDay(), this.props.locale)}, {time.getShortMonth(this.state.date, this.props.locale)} {this.state.date.getDate()}
             </h3>
           </header>
 
@@ -111,7 +116,9 @@ const factory = (Dialog, Calendar) => {
               minDate={this.props.minDate}
               onChange={this.handleCalendarChange}
               selectedDate={this.state.date}
-              theme={this.props.theme} />
+              theme={this.props.theme}
+              locale={this.props.locale}
+              sundayFirstDayOfWeek={this.props.sundayFirstDayOfWeek} />
           </div>
         </Dialog>
       );
diff --git a/components/date_picker/readme.md b/components/date_picker/readme.md
index 805f56ea3..0b4f3e766 100644
--- a/components/date_picker/readme.md
+++ b/components/date_picker/readme.md
@@ -11,6 +11,14 @@ const min_datetime = new Date(new Date(datetime).setDate(8));
 datetime.setHours(17);
 datetime.setMinutes(28);
 
+const localeExample = {
+  months: 'urtarrila_otsaila_martxoa_apirila_maiatza_ekaina_uztaila_abuztua_iraila_urria_azaroa_abendua'.split('_'),
+  monthsShort: 'urt._ots._mar._api._mai._eka._uzt._abu._ira._urr._aza._abe.'.split('_'),
+  weekdays: 'igandea_astelehena_asteartea_asteazkena_osteguna_ostirala_larunbata'.split('_'),
+  weekdaysShort: 'ig._al._ar._az._og._ol._lr.'.split('_'),
+  weekdaysLetter: 'ig_al_ar_az_og_ol_lr'.split('_')
+}
+
 class DatePickerTest extends React.Component {
   state = {date2: datetime};
 
@@ -22,6 +30,8 @@ class DatePickerTest extends React.Component {
     return (
       <section>
         <DatePicker label='Birthdate' onChange={this.handleChange.bind(this, 'date1')} value={this.state.date1} />
+        <DatePicker label='Locale (String) - Spanish' locale='es' onChange={this.handleChange.bind(this, 'date1')} value={this.state.date1} />
+        <DatePicker label='Locale (Object) - Basque' locale={localeExample} onChange={this.handleChange.bind(this, 'date1')} value={this.state.date1} />
         <DatePicker label='Expiration date' minDate={min_datetime} onChange={this.handleChange.bind(this, 'date2')} value={this.state.date2} />
         <DatePicker label='Formatted date' inputFormat={(value) => `${value.getDate()}/${value.getMonth() + 1}/${value.getFullYear()}`} onChange={this.handleChange.bind(this, 'date3')} value={this.state.date3} />
       </section>
@@ -34,9 +44,10 @@ If you want to provide a theme via context, the component key is `RTDatePicker`.
 
 ## Properties
 
-| Name            | Type            | Default       | Description|
+| Name            | Type            | Default       | Description |
 |:-----|:-----|:-----|:-----|
-| `autoOk`        | `Boolean`       | `false`       | Automatically selects a date upon clicking on a day|
+| `autoOk`        | `Boolean`       | `false`       | Automatically selects a date upon clicking on a day. |
+| `sundayFirstDayOfWeek` | `Boolean`| `false`       | Set week's first day to Sunday. Default week's first day is Monday ([ISO 8601](https://en.wikipedia.org/wiki/ISO_8601#Week_dates)). |
 | `className`     | `String`        |               | This class will be placed at the top of the `DatePickerDialog` component so you can provide custom styles.|
 | `inputClassName`| `String`        |               | This class will be applied to `Input` component of `DatePicker`. |
 | `inputFormat`   | `Function`      |               | Function to format the date displayed on the input. |
@@ -44,9 +55,10 @@ If you want to provide a theme via context, the component key is `RTDatePicker`.
 | `maxDate`       | `Date`          |               | Date object with the maximum selectable date. |
 | `minDate`       | `Date`          |               | Date object with the minimum selectable date. |
 | `onChange`      | `Function`      |               | Callback called when the picker value is changed.|
-| `onEscKeyDown`   | `Function`     |               | Callback called when the ESC key is pressed with the overlay active. |
-| `onOverlayClick` | `Function`     |               | Callback to be invoked when the dialog overlay is clicked.|
+| `onEscKeyDown`  | `Function`      |               | Callback called when the ESC key is pressed with the overlay active. |
+| `onOverlayClick`| `Function`      |               | Callback to be invoked when the dialog overlay is clicked.|
 | `value`         | `Date`          |               | Date object with the currently selected date. |
+| `locale`        | `String` or `Object` | `'en'`     | Set the locale for the date picker dialog ('en','es','af','ar','be','bg','bn','bo','br','bs','ca','gl','eu','pt','it',fr'). Object is supported too (see example above). |
 
 ## Theme
 
diff --git a/components/utils/time.js b/components/utils/time.js
index 0b474ad6f..27de9969d 100644
--- a/components/utils/time.js
+++ b/components/utils/time.js
@@ -1,3 +1,118 @@
+const dateLocales = {
+  en: {
+    months: 'January_February_March_April_May_June_July_August_September_October_November_December'.split('_'),
+    monthsShort: 'Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec'.split('_'),
+    weekdays: 'Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday'.split('_'),
+    weekdaysShort: 'Sun_Mon_Tue_Wed_Thu_Fri_Sat'.split('_'),
+    weekdaysLetter: []
+  },
+  es: {
+    months: 'enero_febrero_marzo_abril_mayo_junio_julio_agosto_septiembre_octubre_noviembre_diciembre'.split('_'),
+    monthsShort: 'ene_feb_mar_abr_may_jun_jul_ago_sep_oct_nov_dic'.split('_'),
+    weekdays: 'domingo_lunes_martes_miércoles_jueves_viernes_sábado'.split('_'),
+    weekdaysShort: 'dom._lun._mar._mié._jue._vie._sáb.'.split('_'),
+    weekdaysLetter: 'D_L_M_X_J_V_S'.split('_')
+  },
+  af: {
+    months: 'Januarie_Februarie_Maart_April_Mei_Junie_Julie_Augustus_September_Oktober_November_Desember'.split('_'),
+    monthsShort: 'Jan_Feb_Mrt_Apr_Mei_Jun_Jul_Aug_Sep_Okt_Nov_Des'.split('_'),
+    weekdays: 'Sondag_Maandag_Dinsdag_Woensdag_Donderdag_Vrydag_Saterdag'.split('_'),
+    weekdaysShort: 'Son_Maa_Din_Woe_Don_Vry_Sat'.split('_'),
+    weekdaysLetter: []
+  },
+  ar: {
+    months: ['كانون الثاني يناير','شباط فبراير','آذار مارس','نيسان أبريل','أيار مايو','حزيران يونيو','تموز يوليو','آب أغسطس','أيلول سبتمبر','تشرين الأول أكتوبر','تشرين الثاني نوفمبر','كانون الأول ديسمبر'],
+    monthsShort: ['كانون الثاني يناير','شباط فبراير','آذار مارس','نيسان أبريل','أيار مايو','حزيران يونيو','تموز يوليو','آب أغسطس','أيلول سبتمبر','تشرين الأول أكتوبر','تشرين الثاني نوفمبر','كانون الأول ديسمبر'],
+    weekdays: 'الأحد_الإثنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت'.split('_'),
+    weekdaysShort: 'أحد_إثنين_ثلاثاء_أربعاء_خميس_جمعة_سبت'.split('_'),
+    weekdaysLetter: []
+  },
+  be: {
+    months: 'студзень_люты_сакавік_красавік_травень_чэрвень_ліпень_жнівень_верасень_кастрычнік_лістапад_снежань'.split('_'),
+    monthsShort: 'студ_лют_сак_крас_трав_чэрв_ліп_жнів_вер_каст_ліст_снеж'.split('_'),
+    weekdays: 'нядзеля_панядзелак_аўторак_серада_чацвер_пятніца_субота'.split('_'),
+    weekdaysShort: 'нд_пн_ат_ср_чц_пт_сб'.split('_'),
+    weekdaysLetter: []
+  },
+  bg: {
+    months: 'януари_февруари_март_април_май_юни_юли_август_септември_октомври_ноември_декември'.split('_'),
+    monthsShort: 'янр_фев_мар_апр_май_юни_юли_авг_сеп_окт_ное_дек'.split('_'),
+    weekdays: 'неделя_понеделник_вторник_сряда_четвъртък_петък_събота'.split('_'),
+    weekdaysShort: 'нед_пон_вто_сря_чет_пет_съб'.split('_'),
+    weekdaysLetter: []
+  },
+  bn: {
+    months: 'জানুয়ারী_ফেবুয়ারী_মার্চ_এপ্রিল_মে_জুন_জুলাই_অগাস্ট_সেপ্টেম্বর_অক্টোবর_নভেম্বর_ডিসেম্বর'.split('_'),
+    monthsShort: 'জানু_ফেব_মার্চ_এপর_মে_জুন_জুল_অগ_সেপ্ট_অক্টো_নভ_ডিসেম্'.split('_'),
+    weekdays: 'রবিবার_সোমবার_মঙ্গলবার_বুধবার_বৃহস্পত্তিবার_শুক্রবার_শনিবার'.split('_'),
+    weekdaysShort: 'রবি_সোম_মঙ্গল_বুধ_বৃহস্পত্তি_শুক্র_শনি'.split('_'),
+    weekdaysLetter: []
+  },
+  bo: {
+    months: 'ཟླ་བ་དང་པོ_ཟླ་བ་གཉིས་པ_ཟླ་བ་གསུམ་པ_ཟླ་བ་བཞི་པ_ཟླ་བ་ལྔ་པ_ཟླ་བ་དྲུག་པ_ཟླ་བ་བདུན་པ_ཟླ་བ་བརྒྱད་པ_ཟླ་བ་དགུ་པ_ཟླ་བ་བཅུ་པ_ཟླ་བ་བཅུ་གཅིག་པ_ཟླ་བ་བཅུ་གཉིས་པ'.split('_'),
+    monthsShort: 'ཟླ་བ་དང་པོ_ཟླ་བ་གཉིས་པ_ཟླ་བ་གསུམ་པ_ཟླ་བ་བཞི་པ_ཟླ་བ་ལྔ་པ_ཟླ་བ་དྲུག་པ_ཟླ་བ་བདུན་པ_ཟླ་བ་བརྒྱད་པ_ཟླ་བ་དགུ་པ_ཟླ་བ་བཅུ་པ_ཟླ་བ་བཅུ་གཅིག་པ_ཟླ་བ་བཅུ་གཉིས་པ'.split('_'),
+    weekdays: 'གཟའ་ཉི་མ་_གཟའ་ཟླ་བ་_གཟའ་མིག་དམར་_གཟའ་ལྷག་པ་_གཟའ་ཕུར་བུ_གཟའ་པ་སངས་_གཟའ་སྤེན་པ་'.split('_'),
+    weekdaysShort: 'ཉི་མ་_ཟླ་བ་_མིག་དམར་_ལྷག་པ་_ཕུར་བུ_པ་སངས་_སྤེན་པ་'.split('_'),
+    weekdaysLetter: []
+  },
+  br: {
+    months: 'Genver_C\'hwevrer_Meurzh_Ebrel_Mae_Mezheven_Gouere_Eost_Gwengolo_Here_Du_Kerzu'.split('_'),
+    monthsShort: 'Gen_C\'hwe_Meu_Ebr_Mae_Eve_Gou_Eos_Gwe_Her_Du_Ker'.split('_'),
+    weekdays: 'Sul_Lun_Meurzh_Merc\'her_Yaou_Gwener_Sadorn'.split('_'),
+    weekdaysShort: 'Sul_Lun_Meu_Mer_Yao_Gwe_Sad'.split('_'),
+    weekdaysLetter: []
+  },
+  bs: {
+    months: 'januar_februar_mart_april_maj_juni_juli_august_septembar_oktobar_novembar_decembar'.split('_'),
+    monthsShort: 'jan._feb._mar._apr._maj._jun._jul._aug._sep._okt._nov._dec.'.split('_'),
+    weekdays: 'nedjelja_ponedjeljak_utorak_srijeda_četvrtak_petak_subota'.split('_'),
+    weekdaysShort: 'ned._pon._uto._sri._čet._pet._sub.'.split('_'),
+    weekdaysLetter: []
+  },
+  ca: {
+    months: 'gener_febrer_març_abril_maig_juny_juliol_agost_setembre_octubre_novembre_desembre'.split('_'),
+    monthsShort: 'gen._febr._mar._abr._mai._jun._jul._ag._set._oct._nov._des.'.split('_'),
+    weekdays: 'diumenge_dilluns_dimarts_dimecres_dijous_divendres_dissabte'.split('_'),
+    weekdaysShort: 'dg._dl._dt._dc._dj._dv._ds.'.split('_'),
+    weekdaysLetter: 'Dg_Dl_Dt_Dc_Dj_Dv_Ds'.split('_')
+  },
+  gl: {
+    months: 'Xaneiro_Febreiro_Marzo_Abril_Maio_Xuño_Xullo_Agosto_Setembro_Outubro_Novembro_Decembro'.split('_'),
+    monthsShort: 'Xan._Feb._Mar._Abr._Mai._Xuñ._Xul._Ago._Set._Out._Nov._Dec.'.split('_'),
+    weekdays: 'Domingo_Luns_Martes_Mércores_Xoves_Venres_Sábado'.split('_'),
+    weekdaysShort: 'Dom._Lun._Mar._Mér._Xov._Ven._Sáb.'.split('_'),
+    weekdaysLetter: 'Do_Lu_Ma_Mé_Xo_Ve_Sá'.split('_')
+  },
+  eu: {
+    months: 'urtarrila_otsaila_martxoa_apirila_maiatza_ekaina_uztaila_abuztua_iraila_urria_azaroa_abendua'.split('_'),
+    monthsShort: 'urt._ots._mar._api._mai._eka._uzt._abu._ira._urr._aza._abe.'.split('_'),
+    weekdays: 'igandea_astelehena_asteartea_asteazkena_osteguna_ostirala_larunbata'.split('_'),
+    weekdaysShort: 'ig._al._ar._az._og._ol._lr.'.split('_'),
+    weekdaysLetter: 'ig_al_ar_az_og_ol_lr'.split('_')
+  },
+  pt: {
+    months: 'Janeiro_Fevereiro_Março_Abril_Maio_Junho_Julho_Agosto_Setembro_Outubro_Novembro_Dezembro'.split('_'),
+    monthsShort: 'Jan_Fev_Mar_Abr_Mai_Jun_Jul_Ago_Set_Out_Nov_Dez'.split('_'),
+    weekdays: 'Domingo_Segunda-Feira_Terça-Feira_Quarta-Feira_Quinta-Feira_Sexta-Feira_Sábado'.split('_'),
+    weekdaysShort: 'Dom_Seg_Ter_Qua_Qui_Sex_Sáb'.split('_'),
+    weekdaysLetter: []
+  },
+  it: {
+    months: 'gennaio_febbraio_marzo_aprile_maggio_giugno_luglio_agosto_settembre_ottobre_novembre_dicembre'.split('_'),
+    monthsShort: 'gen_feb_mar_apr_mag_giu_lug_ago_set_ott_nov_dic'.split('_'),
+    weekdays: 'Domenica_Lunedì_Martedì_Mercoledì_Giovedì_Venerdì_Sabato'.split('_'),
+    weekdaysShort: 'Dom_Lun_Mar_Mer_Gio_Ven_Sab'.split('_'),
+    weekdaysLetter: []
+  },
+  fr: {
+    months: 'janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre'.split('_'),
+    monthsShort: 'janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.'.split('_'),
+    weekdays: 'dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi'.split('_'),
+    weekdaysShort: 'dim._lun._mar._mer._jeu._ven._sam.'.split('_'),
+    weekdaysLetter: []
+  }
+};
+
 const time = {
   getDaysInMonth (d) {
     const resultDate = this.getFirstDayOfMonth(d);
@@ -18,68 +133,31 @@ const time = {
     return d.getHours() >= 12 ? 'pm' : 'am';
   },
 
-  getFullMonth (d) {
+  getFullMonth (d, locale = 'en') {
     const month = d.getMonth();
-    switch (month) {
-      default: return 'Unknown';
-      case 0: return 'January';
-      case 1: return 'February';
-      case 2: return 'March';
-      case 3: return 'April';
-      case 4: return 'May';
-      case 5: return 'June';
-      case 6: return 'July';
-      case 7: return 'August';
-      case 8: return 'September';
-      case 9: return 'October';
-      case 10: return 'November';
-      case 11: return 'December';
-    }
+    const l = ((typeof locale === 'string') ? dateLocales[locale] : locale) || dateLocales.en;
+    return (l.hasOwnProperty('months')) ? l.months[month] || 'Unknown' : 'Unknown';
   },
 
-  getShortMonth (d) {
+  getShortMonth (d, locale = 'en') {
     const month = d.getMonth();
-    switch (month) {
-      default: return 'Unknown';
-      case 0: return 'Jan';
-      case 1: return 'Feb';
-      case 2: return 'Mar';
-      case 3: return 'Apr';
-      case 4: return 'May';
-      case 5: return 'Jun';
-      case 6: return 'Jul';
-      case 7: return 'Aug';
-      case 8: return 'Sep';
-      case 9: return 'Oct';
-      case 10: return 'Nov';
-      case 11: return 'Dec';
-    }
+    const l = ((typeof locale === 'string') ? dateLocales[locale] : locale) || dateLocales.en;
+    return (l.hasOwnProperty('monthsShort')) ? l.monthsShort[month] || 'Unknown' : 'Unknown';
   },
 
-  getFullDayOfWeek (day) {
-    switch (day) {
-      default: return 'Unknown';
-      case 0: return 'Sunday';
-      case 1: return 'Monday';
-      case 2: return 'Tuesday';
-      case 3: return 'Wednesday';
-      case 4: return 'Thursday';
-      case 5: return 'Friday';
-      case 6: return 'Saturday';
-    }
+  getFullDayOfWeek (day, locale = 'en') {
+    const l = ((typeof locale === 'string') ? dateLocales[locale] : locale) || dateLocales.en;
+    return (l.hasOwnProperty('weekdays')) ? l.weekdays[day] || 'Unknown' : 'Unknown';
   },
 
-  getShortDayOfWeek (day) {
-    switch (day) {
-      default: return 'Unknown';
-      case 0: return 'Sun';
-      case 1: return 'Mon';
-      case 2: return 'Tue';
-      case 3: return 'Wed';
-      case 4: return 'Thu';
-      case 5: return 'Fri';
-      case 6: return 'Sat';
-    }
+  getShortDayOfWeek (day, locale = 'en') {
+    const l = ((typeof locale === 'string') ? dateLocales[locale] : locale) || dateLocales.en;
+    return (l.hasOwnProperty('weekdaysShort')) ? l.weekdaysShort[day] || 'Unknown' : 'Unknown';
+  },
+
+  getDayOfWeekLetter (day, locale = 'en') {
+    const l = ((typeof locale === 'string') ? dateLocales[locale] : locale) || dateLocales.en;
+    return (l.hasOwnProperty('weekdaysLetter')) ? l.weekdaysLetter[day] || this.getFullDayOfWeek(day, locale).charAt(0) : 'Unknown';
   },
 
   clone (d) {
@@ -177,8 +255,12 @@ const time = {
     return ((minDate && !(date >= minDate)) || (maxDate && !(date <= maxDate)));
   },
 
-  formatDate (date) {
-    return `${date.getDate()} ${time.getFullMonth(date)} ${date.getFullYear()}`;
+  formatDate (date, locale = 'en') {
+    if (locale === 'en') {
+      return `${date.getDate()} ${time.getFullMonth(date, locale)} ${date.getFullYear()}`;
+    } else {
+      return `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`;
+    }
   }
 };
 
diff --git a/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt b/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt
index c42ef8b96..eebe52316 100644
--- a/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt
@@ -4,6 +4,14 @@ const max_datetime = new Date(new Date(datetime).setDate(24));
 datetime.setHours(17);
 datetime.setMinutes(28);
 
+const localeExample = {
+  months: 'urtarrila_otsaila_martxoa_apirila_maiatza_ekaina_uztaila_abuztua_iraila_urria_azaroa_abendua'.split('_'),
+  monthsShort: 'urt._ots._mar._api._mai._eka._uzt._abu._ira._urr._aza._abe.'.split('_'),
+  weekdays: 'igandea_astelehena_asteartea_asteazkena_osteguna_ostirala_larunbata'.split('_'),
+  weekdaysShort: 'ig._al._ar._az._og._ol._lr.'.split('_'),
+  weekdaysLetter: 'ig_al_ar_az_og_ol_lr'.split('_')
+}
+
 class DatePickerTest extends React.Component {
   state = {date2: datetime};
 
@@ -18,6 +26,21 @@ class DatePickerTest extends React.Component {
           label='Birthdate'
           onChange={this.handleChange.bind(this, 'date1')}
           value={this.state.date1}
+          sundayFirstDayOfWeek
+        />
+
+        <DatePicker
+          label='Locale (String) - Spanish'
+          locale='es'
+          onChange={this.handleChange.bind(this, 'date1')}
+          value={this.state.date1}
+        />
+
+        <DatePicker
+          label='Locale (Object) - Basque'
+          locale={localeExample}
+          onChange={this.handleChange.bind(this, 'date1')}
+          value={this.state.date1}
         />
 
         <DatePicker
@@ -25,6 +48,7 @@ class DatePickerTest extends React.Component {
           minDate={min_datetime}
           onChange={this.handleChange.bind(this, 'date2')}
           value={this.state.date2}
+          sundayFirstDayOfWeek
         />
 
         <DatePicker
@@ -33,6 +57,7 @@ class DatePickerTest extends React.Component {
           inputFormat={(value) => `${value.getDate()}/${value.getMonth() + 1}/${value.getFullYear()}`}
           onChange={this.handleChange.bind(this, 'date3')}
           value={this.state.date3}
+          sundayFirstDayOfWeek
         />
       </section>
     );
diff --git a/lib/date_picker/Calendar.js b/lib/date_picker/Calendar.js
index b401f2ea8..caa09b83b 100644
--- a/lib/date_picker/Calendar.js
+++ b/lib/date_picker/Calendar.js
@@ -132,7 +132,9 @@ var factory = function factory(IconButton) {
               onDayClick: this.handleDayClick,
               selectedDate: this.props.selectedDate,
               theme: this.props.theme,
-              viewDate: this.state.viewDate
+              viewDate: this.state.viewDate,
+              locale: this.props.locale,
+              sundayFirstDayOfWeek: this.props.sundayFirstDayOfWeek
             })
           )
         );
@@ -164,7 +166,9 @@ var factory = function factory(IconButton) {
       prev: _react.PropTypes.string,
       years: _react.PropTypes.string
     }),
-    viewDate: _react.PropTypes.object
+    viewDate: _react.PropTypes.object,
+    locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
+    sundayFirstDayOfWeek: _react2.default.PropTypes.bool
   };
   Calendar.defaultProps = {
     display: 'months',
diff --git a/lib/date_picker/CalendarDay.js b/lib/date_picker/CalendarDay.js
index 257880a19..03a1f9e34 100644
--- a/lib/date_picker/CalendarDay.js
+++ b/lib/date_picker/CalendarDay.js
@@ -41,8 +41,9 @@ var Day = function (_Component) {
     key: 'dayStyle',
     value: function dayStyle() {
       if (this.props.day === 1) {
+        var e = this.props.sundayFirstDayOfWeek ? 0 : 1;
         return {
-          marginLeft: _time2.default.getFirstWeekDay(this.props.viewDate) * 100 / 7 + '%'
+          marginLeft: (_time2.default.getFirstWeekDay(this.props.viewDate) - e) * 100 / 7 + '%'
         };
       }
     }
@@ -86,6 +87,7 @@ Day.propTypes = {
     day: _react.PropTypes.string,
     disabled: _react.PropTypes.string
   }),
-  viewDate: _react.PropTypes.object
+  viewDate: _react.PropTypes.object,
+  sundayFirstDayOfWeek: _react.PropTypes.bool
 };
 exports.default = Day;
\ No newline at end of file
diff --git a/lib/date_picker/CalendarMonth.js b/lib/date_picker/CalendarMonth.js
index 4d874b57b..9d1fd80ff 100644
--- a/lib/date_picker/CalendarMonth.js
+++ b/lib/date_picker/CalendarMonth.js
@@ -24,6 +24,8 @@ var _CalendarDay2 = _interopRequireDefault(_CalendarDay);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
@@ -52,31 +54,38 @@ var Month = function (_Component) {
   _createClass(Month, [{
     key: 'renderWeeks',
     value: function renderWeeks() {
-      return _utils2.default.range(0, 7).map(function (i) {
+      var _this2 = this;
+
+      var days = _utils2.default.range(0, 7).map(function (d) {
+        return _time2.default.getDayOfWeekLetter(d, _this2.props.locale);
+      });
+      var source = this.props.sundayFirstDayOfWeek ? days : [].concat(_toConsumableArray(days.slice(1)), [days[0]]);
+      return source.map(function (d, i) {
         return _react2.default.createElement(
           'span',
           { key: i },
-          _time2.default.getFullDayOfWeek(i).charAt(0)
+          d
         );
       });
     }
   }, {
     key: 'renderDays',
     value: function renderDays() {
-      var _this2 = this;
+      var _this3 = this;
 
       return _utils2.default.range(1, _time2.default.getDaysInMonth(this.props.viewDate) + 1).map(function (i) {
-        var date = new Date(_this2.props.viewDate.getFullYear(), _this2.props.viewDate.getMonth(), i);
-        var disabled = _time2.default.dateOutOfRange(date, _this2.props.minDate, _this2.props.maxDate);
+        var date = new Date(_this3.props.viewDate.getFullYear(), _this3.props.viewDate.getMonth(), i);
+        var disabled = _time2.default.dateOutOfRange(date, _this3.props.minDate, _this3.props.maxDate);
 
         return _react2.default.createElement(_CalendarDay2.default, {
           key: i,
           day: i,
           disabled: disabled,
-          onClick: !disabled ? _this2.handleDayClick.bind(_this2, i) : null,
-          selectedDate: _this2.props.selectedDate,
-          theme: _this2.props.theme,
-          viewDate: _this2.props.viewDate
+          onClick: !disabled ? _this3.handleDayClick.bind(_this3, i) : null,
+          selectedDate: _this3.props.selectedDate,
+          theme: _this3.props.theme,
+          viewDate: _this3.props.viewDate,
+          sundayFirstDayOfWeek: _this3.props.sundayFirstDayOfWeek
         });
       });
     }
@@ -89,7 +98,7 @@ var Month = function (_Component) {
         _react2.default.createElement(
           'span',
           { className: this.props.theme.title },
-          _time2.default.getFullMonth(this.props.viewDate),
+          _time2.default.getFullMonth(this.props.viewDate, this.props.locale),
           ' ',
           this.props.viewDate.getFullYear()
         ),
@@ -121,6 +130,8 @@ Month.propTypes = {
     title: _react.PropTypes.string,
     week: _react.PropTypes.string
   }),
-  viewDate: _react.PropTypes.object
+  viewDate: _react.PropTypes.object,
+  locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
+  sundayFirstDayOfWeek: _react2.default.PropTypes.bool
 };
 exports.default = Month;
\ No newline at end of file
diff --git a/lib/date_picker/DatePicker.js b/lib/date_picker/DatePicker.js
index 1956215cd..67fbff062 100644
--- a/lib/date_picker/DatePicker.js
+++ b/lib/date_picker/DatePicker.js
@@ -104,15 +104,17 @@ var factory = function factory(Input, DatePickerDialog) {
         var inputFormat = _props.inputFormat;
         var maxDate = _props.maxDate;
         var minDate = _props.minDate;
+        var sundayFirstDayOfWeek = _props.sundayFirstDayOfWeek;
         var onEscKeyDown = _props.onEscKeyDown;
         var onOverlayClick = _props.onOverlayClick;
         var value = _props.value;
+        var locale = _props.locale;
 
-        var others = _objectWithoutProperties(_props, ['autoOk', 'inputClassName', 'inputFormat', 'maxDate', 'minDate', 'onEscKeyDown', 'onOverlayClick', 'value']);
+        var others = _objectWithoutProperties(_props, ['autoOk', 'inputClassName', 'inputFormat', 'maxDate', 'minDate', 'sundayFirstDayOfWeek', 'onEscKeyDown', 'onOverlayClick', 'value', 'locale']);
 
         var finalInputFormat = inputFormat || _time2.default.formatDate;
         var date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined;
-        var formattedDate = date === undefined ? '' : finalInputFormat(value);
+        var formattedDate = date === undefined ? '' : finalInputFormat(value, locale);
 
         return _react2.default.createElement(
           'div',
@@ -141,7 +143,9 @@ var factory = function factory(Input, DatePickerDialog) {
             onOverlayClick: onOverlayClick,
             onSelect: this.handleSelect,
             theme: this.props.theme,
-            value: date
+            value: date,
+            locale: locale,
+            sundayFirstDayOfWeek: sundayFirstDayOfWeek
           })
         );
       }
@@ -168,7 +172,13 @@ var factory = function factory(Input, DatePickerDialog) {
     theme: _react.PropTypes.shape({
       input: _react.PropTypes.string
     }),
-    value: _react.PropTypes.oneOfType([_react.PropTypes.instanceOf(Date), _react.PropTypes.string])
+    value: _react.PropTypes.oneOfType([_react.PropTypes.instanceOf(Date), _react.PropTypes.string]),
+    locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
+    sundayFirstDayOfWeek: _react2.default.PropTypes.bool
+  };
+  DatePicker.defaultProps = {
+    locale: 'en',
+    sundayFirstDayOfWeek: false
   };
 
 
diff --git a/lib/date_picker/DatePickerDialog.js b/lib/date_picker/DatePickerDialog.js
index 70fa63c20..dfed26582 100644
--- a/lib/date_picker/DatePickerDialog.js
+++ b/lib/date_picker/DatePickerDialog.js
@@ -106,9 +106,9 @@ var factory = function factory(Dialog, Calendar) {
             _react2.default.createElement(
               'h3',
               { className: theme.date, onClick: this.handleSwitchDisplay.bind(this, 'months') },
-              _time2.default.getShortDayOfWeek(this.state.date.getDay()),
+              _time2.default.getShortDayOfWeek(this.state.date.getDay(), this.props.locale),
               ', ',
-              _time2.default.getShortMonth(this.state.date),
+              _time2.default.getShortMonth(this.state.date, this.props.locale),
               ' ',
               this.state.date.getDate()
             )
@@ -122,7 +122,9 @@ var factory = function factory(Dialog, Calendar) {
               minDate: this.props.minDate,
               onChange: this.handleCalendarChange,
               selectedDate: this.state.date,
-              theme: this.props.theme })
+              theme: this.props.theme,
+              locale: this.props.locale,
+              sundayFirstDayOfWeek: this.props.sundayFirstDayOfWeek })
           )
         );
       }
@@ -152,7 +154,9 @@ var factory = function factory(Dialog, Calendar) {
       year: _react.PropTypes.string,
       yearsDisplay: _react.PropTypes.string
     }),
-    value: _react.PropTypes.object
+    value: _react.PropTypes.object,
+    locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
+    sundayFirstDayOfWeek: _react2.default.PropTypes.bool
   };
   CalendarDialog.defaultProps = {
     active: false,
diff --git a/lib/utils/time.js b/lib/utils/time.js
index b4b7b5edc..44d6249b5 100644
--- a/lib/utils/time.js
+++ b/lib/utils/time.js
@@ -3,6 +3,121 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var dateLocales = {
+  en: {
+    months: 'January_February_March_April_May_June_July_August_September_October_November_December'.split('_'),
+    monthsShort: 'Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec'.split('_'),
+    weekdays: 'Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday'.split('_'),
+    weekdaysShort: 'Sun_Mon_Tue_Wed_Thu_Fri_Sat'.split('_'),
+    weekdaysLetter: []
+  },
+  es: {
+    months: 'enero_febrero_marzo_abril_mayo_junio_julio_agosto_septiembre_octubre_noviembre_diciembre'.split('_'),
+    monthsShort: 'ene_feb_mar_abr_may_jun_jul_ago_sep_oct_nov_dic'.split('_'),
+    weekdays: 'domingo_lunes_martes_miércoles_jueves_viernes_sábado'.split('_'),
+    weekdaysShort: 'dom._lun._mar._mié._jue._vie._sáb.'.split('_'),
+    weekdaysLetter: 'D_L_M_X_J_V_S'.split('_')
+  },
+  af: {
+    months: 'Januarie_Februarie_Maart_April_Mei_Junie_Julie_Augustus_September_Oktober_November_Desember'.split('_'),
+    monthsShort: 'Jan_Feb_Mrt_Apr_Mei_Jun_Jul_Aug_Sep_Okt_Nov_Des'.split('_'),
+    weekdays: 'Sondag_Maandag_Dinsdag_Woensdag_Donderdag_Vrydag_Saterdag'.split('_'),
+    weekdaysShort: 'Son_Maa_Din_Woe_Don_Vry_Sat'.split('_'),
+    weekdaysLetter: []
+  },
+  ar: {
+    months: ['كانون الثاني يناير', 'شباط فبراير', 'آذار مارس', 'نيسان أبريل', 'أيار مايو', 'حزيران يونيو', 'تموز يوليو', 'آب أغسطس', 'أيلول سبتمبر', 'تشرين الأول أكتوبر', 'تشرين الثاني نوفمبر', 'كانون الأول ديسمبر'],
+    monthsShort: ['كانون الثاني يناير', 'شباط فبراير', 'آذار مارس', 'نيسان أبريل', 'أيار مايو', 'حزيران يونيو', 'تموز يوليو', 'آب أغسطس', 'أيلول سبتمبر', 'تشرين الأول أكتوبر', 'تشرين الثاني نوفمبر', 'كانون الأول ديسمبر'],
+    weekdays: 'الأحد_الإثنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت'.split('_'),
+    weekdaysShort: 'أحد_إثنين_ثلاثاء_أربعاء_خميس_جمعة_سبت'.split('_'),
+    weekdaysLetter: []
+  },
+  be: {
+    months: 'студзень_люты_сакавік_красавік_травень_чэрвень_ліпень_жнівень_верасень_кастрычнік_лістапад_снежань'.split('_'),
+    monthsShort: 'студ_лют_сак_крас_трав_чэрв_ліп_жнів_вер_каст_ліст_снеж'.split('_'),
+    weekdays: 'нядзеля_панядзелак_аўторак_серада_чацвер_пятніца_субота'.split('_'),
+    weekdaysShort: 'нд_пн_ат_ср_чц_пт_сб'.split('_'),
+    weekdaysLetter: []
+  },
+  bg: {
+    months: 'януари_февруари_март_април_май_юни_юли_август_септември_октомври_ноември_декември'.split('_'),
+    monthsShort: 'янр_фев_мар_апр_май_юни_юли_авг_сеп_окт_ное_дек'.split('_'),
+    weekdays: 'неделя_понеделник_вторник_сряда_четвъртък_петък_събота'.split('_'),
+    weekdaysShort: 'нед_пон_вто_сря_чет_пет_съб'.split('_'),
+    weekdaysLetter: []
+  },
+  bn: {
+    months: 'জানুয়ারী_ফেবুয়ারী_মার্চ_এপ্রিল_মে_জুন_জুলাই_অগাস্ট_সেপ্টেম্বর_অক্টোবর_নভেম্বর_ডিসেম্বর'.split('_'),
+    monthsShort: 'জানু_ফেব_মার্চ_এপর_মে_জুন_জুল_অগ_সেপ্ট_অক্টো_নভ_ডিসেম্'.split('_'),
+    weekdays: 'রবিবার_সোমবার_মঙ্গলবার_বুধবার_বৃহস্পত্তিবার_শুক্রবার_শনিবার'.split('_'),
+    weekdaysShort: 'রবি_সোম_মঙ্গল_বুধ_বৃহস্পত্তি_শুক্র_শনি'.split('_'),
+    weekdaysLetter: []
+  },
+  bo: {
+    months: 'ཟླ་བ་དང་པོ_ཟླ་བ་གཉིས་པ_ཟླ་བ་གསུམ་པ_ཟླ་བ་བཞི་པ_ཟླ་བ་ལྔ་པ_ཟླ་བ་དྲུག་པ_ཟླ་བ་བདུན་པ_ཟླ་བ་བརྒྱད་པ_ཟླ་བ་དགུ་པ_ཟླ་བ་བཅུ་པ_ཟླ་བ་བཅུ་གཅིག་པ_ཟླ་བ་བཅུ་གཉིས་པ'.split('_'),
+    monthsShort: 'ཟླ་བ་དང་པོ_ཟླ་བ་གཉིས་པ_ཟླ་བ་གསུམ་པ_ཟླ་བ་བཞི་པ_ཟླ་བ་ལྔ་པ_ཟླ་བ་དྲུག་པ_ཟླ་བ་བདུན་པ_ཟླ་བ་བརྒྱད་པ_ཟླ་བ་དགུ་པ_ཟླ་བ་བཅུ་པ_ཟླ་བ་བཅུ་གཅིག་པ_ཟླ་བ་བཅུ་གཉིས་པ'.split('_'),
+    weekdays: 'གཟའ་ཉི་མ་_གཟའ་ཟླ་བ་_གཟའ་མིག་དམར་_གཟའ་ལྷག་པ་_གཟའ་ཕུར་བུ_གཟའ་པ་སངས་_གཟའ་སྤེན་པ་'.split('_'),
+    weekdaysShort: 'ཉི་མ་_ཟླ་བ་_མིག་དམར་_ལྷག་པ་_ཕུར་བུ_པ་སངས་_སྤེན་པ་'.split('_'),
+    weekdaysLetter: []
+  },
+  br: {
+    months: 'Genver_C\'hwevrer_Meurzh_Ebrel_Mae_Mezheven_Gouere_Eost_Gwengolo_Here_Du_Kerzu'.split('_'),
+    monthsShort: 'Gen_C\'hwe_Meu_Ebr_Mae_Eve_Gou_Eos_Gwe_Her_Du_Ker'.split('_'),
+    weekdays: 'Sul_Lun_Meurzh_Merc\'her_Yaou_Gwener_Sadorn'.split('_'),
+    weekdaysShort: 'Sul_Lun_Meu_Mer_Yao_Gwe_Sad'.split('_'),
+    weekdaysLetter: []
+  },
+  bs: {
+    months: 'januar_februar_mart_april_maj_juni_juli_august_septembar_oktobar_novembar_decembar'.split('_'),
+    monthsShort: 'jan._feb._mar._apr._maj._jun._jul._aug._sep._okt._nov._dec.'.split('_'),
+    weekdays: 'nedjelja_ponedjeljak_utorak_srijeda_četvrtak_petak_subota'.split('_'),
+    weekdaysShort: 'ned._pon._uto._sri._čet._pet._sub.'.split('_'),
+    weekdaysLetter: []
+  },
+  ca: {
+    months: 'gener_febrer_març_abril_maig_juny_juliol_agost_setembre_octubre_novembre_desembre'.split('_'),
+    monthsShort: 'gen._febr._mar._abr._mai._jun._jul._ag._set._oct._nov._des.'.split('_'),
+    weekdays: 'diumenge_dilluns_dimarts_dimecres_dijous_divendres_dissabte'.split('_'),
+    weekdaysShort: 'dg._dl._dt._dc._dj._dv._ds.'.split('_'),
+    weekdaysLetter: 'Dg_Dl_Dt_Dc_Dj_Dv_Ds'.split('_')
+  },
+  gl: {
+    months: 'Xaneiro_Febreiro_Marzo_Abril_Maio_Xuño_Xullo_Agosto_Setembro_Outubro_Novembro_Decembro'.split('_'),
+    monthsShort: 'Xan._Feb._Mar._Abr._Mai._Xuñ._Xul._Ago._Set._Out._Nov._Dec.'.split('_'),
+    weekdays: 'Domingo_Luns_Martes_Mércores_Xoves_Venres_Sábado'.split('_'),
+    weekdaysShort: 'Dom._Lun._Mar._Mér._Xov._Ven._Sáb.'.split('_'),
+    weekdaysLetter: 'Do_Lu_Ma_Mé_Xo_Ve_Sá'.split('_')
+  },
+  eu: {
+    months: 'urtarrila_otsaila_martxoa_apirila_maiatza_ekaina_uztaila_abuztua_iraila_urria_azaroa_abendua'.split('_'),
+    monthsShort: 'urt._ots._mar._api._mai._eka._uzt._abu._ira._urr._aza._abe.'.split('_'),
+    weekdays: 'igandea_astelehena_asteartea_asteazkena_osteguna_ostirala_larunbata'.split('_'),
+    weekdaysShort: 'ig._al._ar._az._og._ol._lr.'.split('_'),
+    weekdaysLetter: 'ig_al_ar_az_og_ol_lr'.split('_')
+  },
+  pt: {
+    months: 'Janeiro_Fevereiro_Março_Abril_Maio_Junho_Julho_Agosto_Setembro_Outubro_Novembro_Dezembro'.split('_'),
+    monthsShort: 'Jan_Fev_Mar_Abr_Mai_Jun_Jul_Ago_Set_Out_Nov_Dez'.split('_'),
+    weekdays: 'Domingo_Segunda-Feira_Terça-Feira_Quarta-Feira_Quinta-Feira_Sexta-Feira_Sábado'.split('_'),
+    weekdaysShort: 'Dom_Seg_Ter_Qua_Qui_Sex_Sáb'.split('_'),
+    weekdaysLetter: []
+  },
+  it: {
+    months: 'gennaio_febbraio_marzo_aprile_maggio_giugno_luglio_agosto_settembre_ottobre_novembre_dicembre'.split('_'),
+    monthsShort: 'gen_feb_mar_apr_mag_giu_lug_ago_set_ott_nov_dic'.split('_'),
+    weekdays: 'Domenica_Lunedì_Martedì_Mercoledì_Giovedì_Venerdì_Sabato'.split('_'),
+    weekdaysShort: 'Dom_Lun_Mar_Mer_Gio_Ven_Sab'.split('_'),
+    weekdaysLetter: []
+  },
+  fr: {
+    months: 'janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre'.split('_'),
+    monthsShort: 'janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.'.split('_'),
+    weekdays: 'dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi'.split('_'),
+    weekdaysShort: 'dim._lun._mar._mer._jeu._ven._sam.'.split('_'),
+    weekdaysLetter: []
+  }
+};
+
 var time = {
   getDaysInMonth: function getDaysInMonth(d) {
     var resultDate = this.getFirstDayOfMonth(d);
@@ -20,106 +135,36 @@ var time = {
     return d.getHours() >= 12 ? 'pm' : 'am';
   },
   getFullMonth: function getFullMonth(d) {
+    var locale = arguments.length <= 1 || arguments[1] === undefined ? 'en' : arguments[1];
+
     var month = d.getMonth();
-    switch (month) {
-      default:
-        return 'Unknown';
-      case 0:
-        return 'January';
-      case 1:
-        return 'February';
-      case 2:
-        return 'March';
-      case 3:
-        return 'April';
-      case 4:
-        return 'May';
-      case 5:
-        return 'June';
-      case 6:
-        return 'July';
-      case 7:
-        return 'August';
-      case 8:
-        return 'September';
-      case 9:
-        return 'October';
-      case 10:
-        return 'November';
-      case 11:
-        return 'December';
-    }
+    var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en;
+    return l.hasOwnProperty('months') ? l.months[month] || 'Unknown' : 'Unknown';
   },
   getShortMonth: function getShortMonth(d) {
+    var locale = arguments.length <= 1 || arguments[1] === undefined ? 'en' : arguments[1];
+
     var month = d.getMonth();
-    switch (month) {
-      default:
-        return 'Unknown';
-      case 0:
-        return 'Jan';
-      case 1:
-        return 'Feb';
-      case 2:
-        return 'Mar';
-      case 3:
-        return 'Apr';
-      case 4:
-        return 'May';
-      case 5:
-        return 'Jun';
-      case 6:
-        return 'Jul';
-      case 7:
-        return 'Aug';
-      case 8:
-        return 'Sep';
-      case 9:
-        return 'Oct';
-      case 10:
-        return 'Nov';
-      case 11:
-        return 'Dec';
-    }
+    var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en;
+    return l.hasOwnProperty('monthsShort') ? l.monthsShort[month] || 'Unknown' : 'Unknown';
   },
   getFullDayOfWeek: function getFullDayOfWeek(day) {
-    switch (day) {
-      default:
-        return 'Unknown';
-      case 0:
-        return 'Sunday';
-      case 1:
-        return 'Monday';
-      case 2:
-        return 'Tuesday';
-      case 3:
-        return 'Wednesday';
-      case 4:
-        return 'Thursday';
-      case 5:
-        return 'Friday';
-      case 6:
-        return 'Saturday';
-    }
+    var locale = arguments.length <= 1 || arguments[1] === undefined ? 'en' : arguments[1];
+
+    var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en;
+    return l.hasOwnProperty('weekdays') ? l.weekdays[day] || 'Unknown' : 'Unknown';
   },
   getShortDayOfWeek: function getShortDayOfWeek(day) {
-    switch (day) {
-      default:
-        return 'Unknown';
-      case 0:
-        return 'Sun';
-      case 1:
-        return 'Mon';
-      case 2:
-        return 'Tue';
-      case 3:
-        return 'Wed';
-      case 4:
-        return 'Thu';
-      case 5:
-        return 'Fri';
-      case 6:
-        return 'Sat';
-    }
+    var locale = arguments.length <= 1 || arguments[1] === undefined ? 'en' : arguments[1];
+
+    var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en;
+    return l.hasOwnProperty('weekdaysShort') ? l.weekdaysShort[day] || 'Unknown' : 'Unknown';
+  },
+  getDayOfWeekLetter: function getDayOfWeekLetter(day) {
+    var locale = arguments.length <= 1 || arguments[1] === undefined ? 'en' : arguments[1];
+
+    var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en;
+    return l.hasOwnProperty('weekdaysLetter') ? l.weekdaysLetter[day] || this.getFullDayOfWeek(day, locale).charAt(0) : 'Unknown';
   },
   clone: function clone(d) {
     return new Date(d.getTime());
@@ -203,7 +248,13 @@ var time = {
     return minDate && !(date >= minDate) || maxDate && !(date <= maxDate);
   },
   formatDate: function formatDate(date) {
-    return date.getDate() + ' ' + time.getFullMonth(date) + ' ' + date.getFullYear();
+    var locale = arguments.length <= 1 || arguments[1] === undefined ? 'en' : arguments[1];
+
+    if (locale === 'en') {
+      return date.getDate() + ' ' + time.getFullMonth(date, locale) + ' ' + date.getFullYear();
+    } else {
+      return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear();
+    }
   }
 };
 
diff --git a/spec/components/pickers.js b/spec/components/pickers.js
index 2a2f5f2ef..6572af585 100644
--- a/spec/components/pickers.js
+++ b/spec/components/pickers.js
@@ -21,6 +21,14 @@ class PickersTest extends React.Component {
     this.setState(newState);
   };
 
+  localeExample = {
+    months: 'urtarrila_otsaila_martxoa_apirila_maiatza_ekaina_uztaila_abuztua_iraila_urria_azaroa_abendua'.split('_'),
+    monthsShort: 'urt._ots._mar._api._mai._eka._uzt._abu._ira._urr._aza._abe.'.split('_'),
+    weekdays: 'igandea_astelehena_asteartea_asteazkena_osteguna_ostirala_larunbata'.split('_'),
+    weekdaysShort: 'ig._al._ar._az._og._ol._lr.'.split('_'),
+    weekdaysLetter: 'ig_al_ar_az_og_ol_lr'.split('_')
+  }
+
   render () {
     return (
       <section>
@@ -33,6 +41,21 @@ class PickersTest extends React.Component {
           onEscKeyDown={() => console.log('esc key down')}
           onOverlayClick={() => console.log('overlay click')}
           value={this.state.date1}
+          sundayFirstDayOfWeek
+        />
+
+        <DatePicker
+          label='With locale (string) - Spanish (string: en|es|af|ar|be|bg|bn|bo|br|bs|ca|gl|eu|pt|it|fr)'
+          locale='es'
+          onChange={this.handleChange.bind(this, 'date2')}
+          value={this.state.date2}
+        />
+
+        <DatePicker
+          label='With locale (object) - Basque'
+          locale={this.localeExample}
+          onChange={this.handleChange.bind(this, 'date2')}
+          value={this.state.date2}
         />
 
         <DatePicker
@@ -41,6 +64,7 @@ class PickersTest extends React.Component {
           minDate={min_datetime}
           onChange={this.handleChange.bind(this, 'date2')}
           value={this.state.date2}
+          sundayFirstDayOfWeek
         />
 
         <DatePicker
@@ -48,11 +72,13 @@ class PickersTest extends React.Component {
           inputFormat={(value) => `${value.getDate()}/${value.getMonth() + 1}/${value.getFullYear()}`}
           onChange={this.handleChange.bind(this, 'date3')}
           value={this.state.date3}
+          sundayFirstDayOfWeek
         />
 
         <DatePicker
           label='Auto Picker'
           autoOk
+          sundayFirstDayOfWeek
           onChange={this.handleChange.bind(this, 'date4')}
           value={this.state.date4}
         />

From 157c29d8ffe9c541c3004b6ce34c26f8b542c868 Mon Sep 17 00:00:00 2001
From: Abilio Almeida Eiroa <aabilio@gmail.com>
Date: Mon, 1 Aug 2016 13:44:26 +0200
Subject: [PATCH 0695/1024] FIXED aslant errors and warnings to pass Travis
 check

---
 components/date_picker/Calendar.js         | 12 ++++++------
 components/date_picker/CalendarDay.js      |  4 ++--
 components/date_picker/CalendarMonth.js    | 14 +++++++-------
 components/date_picker/DatePicker.js       | 12 ++++++------
 components/date_picker/DatePickerDialog.js | 12 ++++++------
 components/date_picker/readme.md           |  6 +++---
 components/utils/time.js                   |  4 ++--
 lib/date_picker/Calendar.js                |  6 +++---
 lib/date_picker/CalendarDay.js             |  4 ++--
 lib/date_picker/CalendarMonth.js           |  6 +++---
 lib/date_picker/DatePicker.js              |  6 +++---
 lib/date_picker/DatePickerDialog.js        |  6 +++---
 12 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/components/date_picker/Calendar.js b/components/date_picker/Calendar.js
index d48a2d47d..2d899fa45 100644
--- a/components/date_picker/Calendar.js
+++ b/components/date_picker/Calendar.js
@@ -9,10 +9,15 @@ const factory = (IconButton) => {
   class Calendar extends Component {
     static propTypes = {
       display: PropTypes.oneOf(['months', 'years']),
+      locale: React.PropTypes.oneOfType([
+        React.PropTypes.string,
+        React.PropTypes.object
+      ]),
       maxDate: PropTypes.object,
       minDate: PropTypes.object,
       onChange: PropTypes.func,
       selectedDate: PropTypes.object,
+      sundayFirstDayOfWeek: React.PropTypes.bool,
       theme: PropTypes.shape({
         active: PropTypes.string,
         calendar: PropTypes.string,
@@ -20,12 +25,7 @@ const factory = (IconButton) => {
         prev: PropTypes.string,
         years: PropTypes.string
       }),
-      viewDate: PropTypes.object,
-      locale: React.PropTypes.oneOfType([
-        React.PropTypes.string,
-        React.PropTypes.object
-      ]),
-      sundayFirstDayOfWeek: React.PropTypes.bool
+      viewDate: PropTypes.object
     };
 
     static defaultProps = {
diff --git a/components/date_picker/CalendarDay.js b/components/date_picker/CalendarDay.js
index 0951ec30d..2c25074b7 100644
--- a/components/date_picker/CalendarDay.js
+++ b/components/date_picker/CalendarDay.js
@@ -8,13 +8,13 @@ class Day extends Component {
     disabled: PropTypes.bool,
     onClick: PropTypes.func,
     selectedDate: PropTypes.object,
+    sundayFirstDayOfWeek: PropTypes.bool,
     theme: PropTypes.shape({
       active: PropTypes.string,
       day: PropTypes.string,
       disabled: PropTypes.string
     }),
-    viewDate: PropTypes.object,
-    sundayFirstDayOfWeek: PropTypes.bool
+    viewDate: PropTypes.object
   };
 
   dayStyle () {
diff --git a/components/date_picker/CalendarMonth.js b/components/date_picker/CalendarMonth.js
index 19a415efe..b3dcefafb 100644
--- a/components/date_picker/CalendarMonth.js
+++ b/components/date_picker/CalendarMonth.js
@@ -5,22 +5,22 @@ import CalendarDay from './CalendarDay.js';
 
 class Month extends Component {
   static propTypes = {
+    locale: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.object
+    ]),
     maxDate: PropTypes.object,
     minDate: PropTypes.object,
     onDayClick: PropTypes.func,
     selectedDate: PropTypes.object,
+    sundayFirstDayOfWeek: React.PropTypes.bool,
     theme: PropTypes.shape({
       days: PropTypes.string,
       month: PropTypes.string,
       title: PropTypes.string,
       week: PropTypes.string
     }),
-    viewDate: PropTypes.object,
-    locale: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.object
-    ]),
-    sundayFirstDayOfWeek: React.PropTypes.bool
+    viewDate: PropTypes.object
   };
 
   handleDayClick = (day) => {
@@ -30,7 +30,7 @@ class Month extends Component {
   renderWeeks () {
     const days = utils.range(0, 7).map(d => time.getDayOfWeekLetter(d, this.props.locale));
     const source = (this.props.sundayFirstDayOfWeek) ? days : [...days.slice(1), days[0]];
-    return source.map((d, i) => (<span key={i}>{d}</span>))
+    return source.map((d, i) => (<span key={i}>{d}</span>));
   }
 
   renderDays () {
diff --git a/components/date_picker/DatePicker.js b/components/date_picker/DatePicker.js
index 42daf137f..f72c2c58b 100644
--- a/components/date_picker/DatePicker.js
+++ b/components/date_picker/DatePicker.js
@@ -24,6 +24,10 @@ const factory = (Input, DatePickerDialog) => {
       inputClassName: PropTypes.string,
       inputFormat: PropTypes.func,
       label: PropTypes.string,
+      locale: React.PropTypes.oneOfType([
+        React.PropTypes.string,
+        React.PropTypes.object
+      ]),
       maxDate: PropTypes.object,
       minDate: PropTypes.object,
       name: PropTypes.string,
@@ -31,18 +35,14 @@ const factory = (Input, DatePickerDialog) => {
       onEscKeyDown: PropTypes.func,
       onKeyPress: PropTypes.func,
       onOverlayClick: PropTypes.func,
+      sundayFirstDayOfWeek: React.PropTypes.bool,
       theme: PropTypes.shape({
         input: PropTypes.string
       }),
       value: PropTypes.oneOfType([
         PropTypes.instanceOf(Date),
         PropTypes.string
-      ]),
-      locale: React.PropTypes.oneOfType([
-        React.PropTypes.string,
-        React.PropTypes.object
-      ]),
-      sundayFirstDayOfWeek: React.PropTypes.bool
+      ])
     };
 
     static defaultProps = {
diff --git a/components/date_picker/DatePickerDialog.js b/components/date_picker/DatePickerDialog.js
index 2a49aa2f6..7fa6b68fb 100644
--- a/components/date_picker/DatePickerDialog.js
+++ b/components/date_picker/DatePickerDialog.js
@@ -8,6 +8,10 @@ const factory = (Dialog, Calendar) => {
       active: PropTypes.bool,
       autoOk: PropTypes.bool,
       className: PropTypes.string,
+      locale: React.PropTypes.oneOfType([
+        React.PropTypes.string,
+        React.PropTypes.object
+      ]),
       maxDate: PropTypes.object,
       minDate: PropTypes.object,
       name: PropTypes.string,
@@ -15,6 +19,7 @@ const factory = (Dialog, Calendar) => {
       onEscKeyDown: PropTypes.func,
       onOverlayClick: PropTypes.func,
       onSelect: PropTypes.func,
+      sundayFirstDayOfWeek: React.PropTypes.bool,
       theme: PropTypes.shape({
         button: PropTypes.string,
         calendarWrapper: PropTypes.string,
@@ -25,12 +30,7 @@ const factory = (Dialog, Calendar) => {
         year: PropTypes.string,
         yearsDisplay: PropTypes.string
       }),
-      value: PropTypes.object,
-      locale: React.PropTypes.oneOfType([
-        React.PropTypes.string,
-        React.PropTypes.object
-      ]),
-      sundayFirstDayOfWeek: React.PropTypes.bool
+      value: PropTypes.object
     };
 
     static defaultProps = {
diff --git a/components/date_picker/readme.md b/components/date_picker/readme.md
index 0b4f3e766..c95ed3072 100644
--- a/components/date_picker/readme.md
+++ b/components/date_picker/readme.md
@@ -29,11 +29,11 @@ class DatePickerTest extends React.Component {
   render () {
     return (
       <section>
-        <DatePicker label='Birthdate' onChange={this.handleChange.bind(this, 'date1')} value={this.state.date1} />
+        <DatePicker label='Birthdate' sundayFirstDayOfWeek onChange={this.handleChange.bind(this, 'date1')} value={this.state.date1} />
         <DatePicker label='Locale (String) - Spanish' locale='es' onChange={this.handleChange.bind(this, 'date1')} value={this.state.date1} />
         <DatePicker label='Locale (Object) - Basque' locale={localeExample} onChange={this.handleChange.bind(this, 'date1')} value={this.state.date1} />
-        <DatePicker label='Expiration date' minDate={min_datetime} onChange={this.handleChange.bind(this, 'date2')} value={this.state.date2} />
-        <DatePicker label='Formatted date' inputFormat={(value) => `${value.getDate()}/${value.getMonth() + 1}/${value.getFullYear()}`} onChange={this.handleChange.bind(this, 'date3')} value={this.state.date3} />
+        <DatePicker label='Expiration date' sundayFirstDayOfWeek minDate={min_datetime} onChange={this.handleChange.bind(this, 'date2')} value={this.state.date2} />
+        <DatePicker label='Formatted date' sundayFirstDayOfWeek inputFormat={(value) => `${value.getDate()}/${value.getMonth() + 1}/${value.getFullYear()}`} onChange={this.handleChange.bind(this, 'date3')} value={this.state.date3} />
       </section>
     );
   }
diff --git a/components/utils/time.js b/components/utils/time.js
index 27de9969d..a2ebdf22a 100644
--- a/components/utils/time.js
+++ b/components/utils/time.js
@@ -21,8 +21,8 @@ const dateLocales = {
     weekdaysLetter: []
   },
   ar: {
-    months: ['كانون الثاني يناير','شباط فبراير','آذار مارس','نيسان أبريل','أيار مايو','حزيران يونيو','تموز يوليو','آب أغسطس','أيلول سبتمبر','تشرين الأول أكتوبر','تشرين الثاني نوفمبر','كانون الأول ديسمبر'],
-    monthsShort: ['كانون الثاني يناير','شباط فبراير','آذار مارس','نيسان أبريل','أيار مايو','حزيران يونيو','تموز يوليو','آب أغسطس','أيلول سبتمبر','تشرين الأول أكتوبر','تشرين الثاني نوفمبر','كانون الأول ديسمبر'],
+    months: ['كانون الثاني يناير', 'شباط فبراير', 'آذار مارس', 'نيسان أبريل', 'أيار مايو', 'حزيران يونيو', 'تموز يوليو', 'آب أغسطس', 'أيلول سبتمبر', 'تشرين الأول أكتوبر', 'تشرين الثاني نوفمبر', 'كانون الأول ديسمبر'],
+    monthsShort: ['كانون الثاني يناير', 'شباط فبراير', 'آذار مارس', 'نيسان أبريل', 'أيار مايو', 'حزيران يونيو', 'تموز يوليو', 'آب أغسطس', 'أيلول سبتمبر', 'تشرين الأول أكتوبر', 'تشرين الثاني نوفمبر', 'كانون الأول ديسمبر'],
     weekdays: 'الأحد_الإثنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت'.split('_'),
     weekdaysShort: 'أحد_إثنين_ثلاثاء_أربعاء_خميس_جمعة_سبت'.split('_'),
     weekdaysLetter: []
diff --git a/lib/date_picker/Calendar.js b/lib/date_picker/Calendar.js
index caa09b83b..da2c0a49c 100644
--- a/lib/date_picker/Calendar.js
+++ b/lib/date_picker/Calendar.js
@@ -155,10 +155,12 @@ var factory = function factory(IconButton) {
 
   Calendar.propTypes = {
     display: _react.PropTypes.oneOf(['months', 'years']),
+    locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
     maxDate: _react.PropTypes.object,
     minDate: _react.PropTypes.object,
     onChange: _react.PropTypes.func,
     selectedDate: _react.PropTypes.object,
+    sundayFirstDayOfWeek: _react2.default.PropTypes.bool,
     theme: _react.PropTypes.shape({
       active: _react.PropTypes.string,
       calendar: _react.PropTypes.string,
@@ -166,9 +168,7 @@ var factory = function factory(IconButton) {
       prev: _react.PropTypes.string,
       years: _react.PropTypes.string
     }),
-    viewDate: _react.PropTypes.object,
-    locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
-    sundayFirstDayOfWeek: _react2.default.PropTypes.bool
+    viewDate: _react.PropTypes.object
   };
   Calendar.defaultProps = {
     display: 'months',
diff --git a/lib/date_picker/CalendarDay.js b/lib/date_picker/CalendarDay.js
index 03a1f9e34..10a90f050 100644
--- a/lib/date_picker/CalendarDay.js
+++ b/lib/date_picker/CalendarDay.js
@@ -82,12 +82,12 @@ Day.propTypes = {
   disabled: _react.PropTypes.bool,
   onClick: _react.PropTypes.func,
   selectedDate: _react.PropTypes.object,
+  sundayFirstDayOfWeek: _react.PropTypes.bool,
   theme: _react.PropTypes.shape({
     active: _react.PropTypes.string,
     day: _react.PropTypes.string,
     disabled: _react.PropTypes.string
   }),
-  viewDate: _react.PropTypes.object,
-  sundayFirstDayOfWeek: _react.PropTypes.bool
+  viewDate: _react.PropTypes.object
 };
 exports.default = Day;
\ No newline at end of file
diff --git a/lib/date_picker/CalendarMonth.js b/lib/date_picker/CalendarMonth.js
index 9d1fd80ff..2c139c03a 100644
--- a/lib/date_picker/CalendarMonth.js
+++ b/lib/date_picker/CalendarMonth.js
@@ -120,18 +120,18 @@ var Month = function (_Component) {
 }(_react.Component);
 
 Month.propTypes = {
+  locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
   maxDate: _react.PropTypes.object,
   minDate: _react.PropTypes.object,
   onDayClick: _react.PropTypes.func,
   selectedDate: _react.PropTypes.object,
+  sundayFirstDayOfWeek: _react2.default.PropTypes.bool,
   theme: _react.PropTypes.shape({
     days: _react.PropTypes.string,
     month: _react.PropTypes.string,
     title: _react.PropTypes.string,
     week: _react.PropTypes.string
   }),
-  viewDate: _react.PropTypes.object,
-  locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
-  sundayFirstDayOfWeek: _react2.default.PropTypes.bool
+  viewDate: _react.PropTypes.object
 };
 exports.default = Month;
\ No newline at end of file
diff --git a/lib/date_picker/DatePicker.js b/lib/date_picker/DatePicker.js
index 67fbff062..ac5dca29a 100644
--- a/lib/date_picker/DatePicker.js
+++ b/lib/date_picker/DatePicker.js
@@ -162,6 +162,7 @@ var factory = function factory(Input, DatePickerDialog) {
     inputClassName: _react.PropTypes.string,
     inputFormat: _react.PropTypes.func,
     label: _react.PropTypes.string,
+    locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
     maxDate: _react.PropTypes.object,
     minDate: _react.PropTypes.object,
     name: _react.PropTypes.string,
@@ -169,12 +170,11 @@ var factory = function factory(Input, DatePickerDialog) {
     onEscKeyDown: _react.PropTypes.func,
     onKeyPress: _react.PropTypes.func,
     onOverlayClick: _react.PropTypes.func,
+    sundayFirstDayOfWeek: _react2.default.PropTypes.bool,
     theme: _react.PropTypes.shape({
       input: _react.PropTypes.string
     }),
-    value: _react.PropTypes.oneOfType([_react.PropTypes.instanceOf(Date), _react.PropTypes.string]),
-    locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
-    sundayFirstDayOfWeek: _react2.default.PropTypes.bool
+    value: _react.PropTypes.oneOfType([_react.PropTypes.instanceOf(Date), _react.PropTypes.string])
   };
   DatePicker.defaultProps = {
     locale: 'en',
diff --git a/lib/date_picker/DatePickerDialog.js b/lib/date_picker/DatePickerDialog.js
index dfed26582..015944b37 100644
--- a/lib/date_picker/DatePickerDialog.js
+++ b/lib/date_picker/DatePickerDialog.js
@@ -137,6 +137,7 @@ var factory = function factory(Dialog, Calendar) {
     active: _react.PropTypes.bool,
     autoOk: _react.PropTypes.bool,
     className: _react.PropTypes.string,
+    locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
     maxDate: _react.PropTypes.object,
     minDate: _react.PropTypes.object,
     name: _react.PropTypes.string,
@@ -144,6 +145,7 @@ var factory = function factory(Dialog, Calendar) {
     onEscKeyDown: _react.PropTypes.func,
     onOverlayClick: _react.PropTypes.func,
     onSelect: _react.PropTypes.func,
+    sundayFirstDayOfWeek: _react2.default.PropTypes.bool,
     theme: _react.PropTypes.shape({
       button: _react.PropTypes.string,
       calendarWrapper: _react.PropTypes.string,
@@ -154,9 +156,7 @@ var factory = function factory(Dialog, Calendar) {
       year: _react.PropTypes.string,
       yearsDisplay: _react.PropTypes.string
     }),
-    value: _react.PropTypes.object,
-    locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
-    sundayFirstDayOfWeek: _react2.default.PropTypes.bool
+    value: _react.PropTypes.object
   };
   CalendarDialog.defaultProps = {
     active: false,

From ef6a979fec93a6150dfc1a29d409a2301e75dd0a Mon Sep 17 00:00:00 2001
From: Christian Droulers <droulers.christian@gmail.com>
Date: Mon, 1 Aug 2016 16:08:48 -0400
Subject: [PATCH 0696/1024] Add required polyfills for IE11.

---
 components/utils/polyfills.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/utils/polyfills.js b/components/utils/polyfills.js
index 9082e6cb3..63cfdba00 100644
--- a/components/utils/polyfills.js
+++ b/components/utils/polyfills.js
@@ -1,5 +1,7 @@
 import 'core-js/fn/array/from';
 import 'core-js/fn/array/iterator';
+import 'core-js/fn/array/find-index';
 import 'core-js/fn/map';
 import 'core-js/fn/string/starts-with';
+import 'core-js/fn/string/includes';
 import 'core-js/fn/symbol';

From 955acf040afde5ab6df87d7a49fcc5e4a8eaeae0 Mon Sep 17 00:00:00 2001
From: Jeremy Cullen <jeremiahcullen@gmail.com>
Date: Tue, 2 Aug 2016 10:40:31 -0700
Subject: [PATCH 0697/1024] Bugfix for IE scrollX/scrollY

Replaces scrollX and scrollY with cross browser aliases pageXOffset and pageYOffset
---
 components/ripple/Ripple.js     | 4 ++--
 components/time_picker/Clock.js | 2 +-
 lib/ripple/Ripple.js            | 4 ++--
 lib/time_picker/Clock.js        | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/ripple/Ripple.js b/components/ripple/Ripple.js
index 125d76037..d957ea1e9 100644
--- a/components/ripple/Ripple.js
+++ b/components/ripple/Ripple.js
@@ -95,8 +95,8 @@ const rippleFactory = (options = {}) => {
         const {left, top, height, width} = ReactDOM.findDOMNode(this).getBoundingClientRect();
         const {rippleCentered: centered, rippleSpread: spread} = this.props;
         return {
-          left: centered ? 0 : pageX - left - width / 2 - window.scrollX,
-          top: centered ? 0 : pageY - top - height / 2 - window.scrollY,
+          left: centered ? 0 : pageX - left - width / 2 - window.pageXOffset,
+          top: centered ? 0 : pageY - top - height / 2 - window.pageYOffset,
           width: width * spread
         };
       }
diff --git a/components/time_picker/Clock.js b/components/time_picker/Clock.js
index d432fdea4..3ef97fbcc 100644
--- a/components/time_picker/Clock.js
+++ b/components/time_picker/Clock.js
@@ -58,7 +58,7 @@ class Clock extends Component {
   handleCalculateShape = () => {
     const { top, left, width } = this.refs.placeholder.getBoundingClientRect();
     this.setState({
-      center: { x: left + width / 2 - window.scrollX, y: top + width / 2 - window.scrollX },
+      center: { x: left + width / 2 - window.pageXOffset, y: top + width / 2 - window.pageXOffset },
       radius: width / 2
     });
   };
diff --git a/lib/ripple/Ripple.js b/lib/ripple/Ripple.js
index 7442c53e9..c8fbc3564 100644
--- a/lib/ripple/Ripple.js
+++ b/lib/ripple/Ripple.js
@@ -150,8 +150,8 @@ var rippleFactory = function rippleFactory() {
           var spread = _props.rippleSpread;
 
           return {
-            left: centered ? 0 : pageX - left - width / 2 - window.scrollX,
-            top: centered ? 0 : pageY - top - height / 2 - window.scrollY,
+            left: centered ? 0 : pageX - left - width / 2 - window.pageXOffset,
+            top: centered ? 0 : pageY - top - height / 2 - window.pageYOffset,
             width: width * spread
           };
         }
diff --git a/lib/time_picker/Clock.js b/lib/time_picker/Clock.js
index 5891b3cce..2b74f0a1c 100644
--- a/lib/time_picker/Clock.js
+++ b/lib/time_picker/Clock.js
@@ -69,7 +69,7 @@ var Clock = function (_Component) {
       var width = _this$refs$placeholde.width;
 
       _this.setState({
-        center: { x: left + width / 2 - window.scrollX, y: top + width / 2 - window.scrollX },
+        center: { x: left + width / 2 - window.pageXOffset, y: top + width / 2 - window.pageXOffset },
         radius: width / 2
       });
     }, _temp), _possibleConstructorReturn(_this, _ret);

From 692b0be955546601a97f5cd843cc2d20573f201f Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 2 Aug 2016 21:34:08 +0200
Subject: [PATCH 0698/1024] Update react-css-themr dependency

---
 docs/package.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index f9234b2d3..6d08f03ed 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -14,7 +14,7 @@
     "codemirror": "^5.14.2",
     "history": "^2.1.1",
     "react": "^15.2.0",
-    "react-css-themr": "^1.1.2",
+    "react-css-themr": "^1.2.0",
     "react-dom": "^15.2.0",
     "react-router": "^2.4.0"
   },
diff --git a/package.json b/package.json
index 1a7d7adaf..b689532a8 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
   "dependencies": {
     "classnames": "^2.2.5",
     "core-js": "^2.4.0",
-    "react-css-themr": "^1.1.2"
+    "react-css-themr": "^1.2.0"
   },
   "devDependencies": {
     "autoprefixer": "^6.3.6",

From f2dbfb53cdf6639869d008e9c756ce0cda076a7e Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 2 Aug 2016 21:51:13 +0200
Subject: [PATCH 0699/1024] Fix #547

---
 components/input/Input.js                     | 2 +-
 components/input/index.js                     | 2 +-
 components/input/readme.md                    | 7 +++++++
 docs/app/components/layout/install/install.md | 6 ++++++
 lib/input/Input.js                            | 2 +-
 lib/input/index.js                            | 2 +-
 6 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/components/input/Input.js b/components/input/Input.js
index 0838839ad..c6b944dc6 100644
--- a/components/input/Input.js
+++ b/components/input/Input.js
@@ -157,6 +157,6 @@ const factory = (FontIcon) => {
 };
 
 const Input = factory(InjectedFontIcon);
-export default themr(INPUT)(Input);
+export default themr(INPUT, null, { withRef: true })(Input);
 export { factory as inputFactory };
 export { Input };
diff --git a/components/input/index.js b/components/input/index.js
index 2f4fe1d95..fc4474238 100644
--- a/components/input/index.js
+++ b/components/input/index.js
@@ -5,7 +5,7 @@ import FontIcon from '../font_icon/FontIcon.js';
 import theme from './theme.scss';
 
 const Input = inputFactory(FontIcon);
-const ThemedInput = themr(INPUT, theme)(Input);
+const ThemedInput = themr(INPUT, theme, { withRef: true })(Input);
 
 export default ThemedInput;
 export { ThemedInput as Input };
diff --git a/components/input/readme.md b/components/input/readme.md
index bb8387f52..42b5c66d9 100644
--- a/components/input/readme.md
+++ b/components/input/readme.md
@@ -67,3 +67,10 @@ If you want to provide a theme via context, the component key is `RTInput`.
 | `label` | Used for the label when the input has a label.|
 | `required` | Used in case the input is required.|
 | `withIcon` | Added to the root class if the input has icon.|
+
+## Methods
+
+The `Input` component has some imperative methods that are used as a bypass to the native rendered DOM element. To call this methods you will need to retrieve the instance of the component. Check the [Install](http://react-toolbox.com/#/install) section for details on how to do this. The methods included for the `Input` are:
+
+- `blur` used to blur the `input` element.
+- `focus` used to focus the `input` element.
diff --git a/docs/app/components/layout/install/install.md b/docs/app/components/layout/install/install.md
index 69b1096a6..9ba7392d2 100644
--- a/docs/app/components/layout/install/install.md
+++ b/docs/app/components/layout/install/install.md
@@ -181,6 +181,12 @@ React Toolbox assumes that you are importing [Roboto Font](https://www.google.co
 
 In order to import the fonts for you, we'd need to include them in the CSS which is considered a bad practice. If you are not including them in your app, go to the linked sites and follow the instructions.
 
+## References to Components
+
+As mentioned in the theming section, you'd usually import a component with a theme already injected. To do this we use a [Higher Order Component](http://github.com/javivelasco/react-css-themr). If you add a `ref` property to a React Toolbox component, what you will get is the **HOC** instead of the **Wrapped** component.
+
+For components with imperative methods such as the `Input`, you can also get its real instance instead of the HOC. To do this, the HOC includes a `getWrappedInstance` method that returns the wrapped component instance. This way you can call methods directly on the component's instance.
+
 ## Server Side Rendering
 
 The only requirement for SSR is to be able to require ES6 and CSS Modules in the backend. To make it possible you can check projects like [CSS Modules register hook](https://github.com/css-modules/css-modules-require-hook) or [Webpack Isomorphic tools](https://github.com/halt-hammerzeit/webpack-isomorphic-tools). Also, make sure you can import from `node_modules`.
diff --git a/lib/input/Input.js b/lib/input/Input.js
index e492cf603..d7e816ca8 100644
--- a/lib/input/Input.js
+++ b/lib/input/Input.js
@@ -235,6 +235,6 @@ var factory = function factory(FontIcon) {
 };
 
 var Input = factory(_FontIcon2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.INPUT)(Input);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.INPUT, null, { withRef: true })(Input);
 exports.inputFactory = factory;
 exports.Input = Input;
\ No newline at end of file
diff --git a/lib/input/index.js b/lib/input/index.js
index 5bb8e30b1..a8c751634 100644
--- a/lib/input/index.js
+++ b/lib/input/index.js
@@ -22,7 +22,7 @@ var _theme2 = _interopRequireDefault(_theme);
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var Input = (0, _Input.inputFactory)(_FontIcon2.default);
-var ThemedInput = (0, _reactCssThemr.themr)(_identifiers.INPUT, _theme2.default)(Input);
+var ThemedInput = (0, _reactCssThemr.themr)(_identifiers.INPUT, _theme2.default, { withRef: true })(Input);
 
 exports.default = ThemedInput;
 exports.Input = ThemedInput;
\ No newline at end of file

From e2c54714ebc769eb463485e5ff01d18b6e775619 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 2 Aug 2016 21:57:00 +0200
Subject: [PATCH 0700/1024] Fixes #629

---
 components/slider/Slider.js | 24 ++++++++++++++----------
 lib/slider/Slider.js        | 26 +++++++++++++++-----------
 2 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/components/slider/Slider.js b/components/slider/Slider.js
index 2089a8854..674cdc871 100644
--- a/components/slider/Slider.js
+++ b/components/slider/Slider.js
@@ -61,13 +61,14 @@ const factory = (ProgressBar, Input) => {
       this.handleResize();
     }
 
-    shouldComponentUpdate (nextProps, nextState) {
-      if (!this.state.inputFocused && nextState.inputFocused) return false;
+    componentWillReceiveProps (nextProps) {
       if (this.state.inputFocused && this.props.value !== nextProps.value) {
         this.setState({inputValue: this.valueForInput(nextProps.value)});
-        return false;
       }
-      return true;
+    }
+
+    shouldComponentUpdate (nextProps, nextState) {
+      return this.state.inputFocused || !nextState.inputFocused;
     }
 
     componentWillUnmount () {
@@ -96,16 +97,13 @@ const factory = (ProgressBar, Input) => {
     };
 
     handleKeyDown = (event) => {
-      if ([13, 27].indexOf(event.keyCode) !== -1) {
-        this.refs.input.blur();
-        ReactDOM.findDOMNode(this).blur();
-      }
+      if ([13, 27].indexOf(event.keyCode) !== -1) this.getInput().blur();
       if (event.keyCode === 38) this.addToValue(this.props.step);
       if (event.keyCode === 40) this.addToValue(-this.props.step);
     };
 
     handleMouseDown = (event) => {
-      if (this.state.inputFocused) this.refs.input.blur();
+      if (this.state.inputFocused) this.getInput().blur();
       events.addEventsToDocument(this.getMouseEventMap());
       this.start(events.getMousePosition(event));
       events.pauseEvent(event);
@@ -143,7 +141,7 @@ const factory = (ProgressBar, Input) => {
     };
 
     handleTouchStart = (event) => {
-      if (this.state.inputFocused) this.refs.input.blur();
+      if (this.state.inputFocused) this.getInput().blur();
       this.start(events.getTouchPosition(event));
       events.addEventsToDocument(this.getTouchEventMap());
       events.pauseEvent(event);
@@ -155,6 +153,12 @@ const factory = (ProgressBar, Input) => {
       if (value !== this.props.value) this.props.onChange(value);
     }
 
+    getInput () {
+      return this.refs.input && this.refs.input.getWrappedInstance
+        ? this.refs.input.getWrappedInstance()
+        : this.refs.input;
+    }
+
     getKeyboardEvents () {
       return {
         keydown: this.handleKeyDown
diff --git a/lib/slider/Slider.js b/lib/slider/Slider.js
index 917c7f1b3..c838283e5 100644
--- a/lib/slider/Slider.js
+++ b/lib/slider/Slider.js
@@ -86,14 +86,11 @@ var factory = function factory(ProgressBar, Input) {
           _this.props.onChange(_this.trimValue(value), event);
         });
       }, _this.handleKeyDown = function (event) {
-        if ([13, 27].indexOf(event.keyCode) !== -1) {
-          _this.refs.input.blur();
-          _reactDom2.default.findDOMNode(_this).blur();
-        }
+        if ([13, 27].indexOf(event.keyCode) !== -1) _this.getInput().blur();
         if (event.keyCode === 38) _this.addToValue(_this.props.step);
         if (event.keyCode === 40) _this.addToValue(-_this.props.step);
       }, _this.handleMouseDown = function (event) {
-        if (_this.state.inputFocused) _this.refs.input.blur();
+        if (_this.state.inputFocused) _this.getInput().blur();
         _events2.default.addEventsToDocument(_this.getMouseEventMap());
         _this.start(_events2.default.getMousePosition(event));
         _events2.default.pauseEvent(event);
@@ -119,7 +116,7 @@ var factory = function factory(ProgressBar, Input) {
       }, _this.handleTouchMove = function (event) {
         _this.move(_events2.default.getTouchPosition(event));
       }, _this.handleTouchStart = function (event) {
-        if (_this.state.inputFocused) _this.refs.input.blur();
+        if (_this.state.inputFocused) _this.getInput().blur();
         _this.start(_events2.default.getTouchPosition(event));
         _events2.default.addEventsToDocument(_this.getTouchEventMap());
         _events2.default.pauseEvent(event);
@@ -133,14 +130,16 @@ var factory = function factory(ProgressBar, Input) {
         this.handleResize();
       }
     }, {
-      key: 'shouldComponentUpdate',
-      value: function shouldComponentUpdate(nextProps, nextState) {
-        if (!this.state.inputFocused && nextState.inputFocused) return false;
+      key: 'componentWillReceiveProps',
+      value: function componentWillReceiveProps(nextProps) {
         if (this.state.inputFocused && this.props.value !== nextProps.value) {
           this.setState({ inputValue: this.valueForInput(nextProps.value) });
-          return false;
         }
-        return true;
+      }
+    }, {
+      key: 'shouldComponentUpdate',
+      value: function shouldComponentUpdate(nextProps, nextState) {
+        return this.state.inputFocused || !nextState.inputFocused;
       }
     }, {
       key: 'componentWillUnmount',
@@ -157,6 +156,11 @@ var factory = function factory(ProgressBar, Input) {
         value = this.trimValue(value + increment);
         if (value !== this.props.value) this.props.onChange(value);
       }
+    }, {
+      key: 'getInput',
+      value: function getInput() {
+        return this.refs.input && this.refs.input.getWrappedInstance ? this.refs.input.getWrappedInstance() : this.refs.input;
+      }
     }, {
       key: 'getKeyboardEvents',
       value: function getKeyboardEvents() {

From 59b01e640f9ee00ff07ff485664af2ac8ed813a5 Mon Sep 17 00:00:00 2001
From: Parmesh Krishen <therealparmesh@outlook.com>
Date: Tue, 2 Aug 2016 16:11:48 -0500
Subject: [PATCH 0701/1024] Fixed Autocomplete such that it does not error when
 provided with a value prop that does not exist in the source prop.

---
 components/autocomplete/Autocomplete.js | 2 +-
 lib/autocomplete/Autocomplete.js        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index bd76bab35..34e30470d 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -154,7 +154,7 @@ const factory = (Chip, Input) => {
 
    suggestions () {
      let suggest = new Map();
-     const query = this.state.query.toLowerCase().trim() || '';
+     const query = (this.state.query || (!this.props.multiple ? this.props.value : '')).toLowerCase().trim() || '';
      const values = this.values();
      const source = this.source();
 
diff --git a/lib/autocomplete/Autocomplete.js b/lib/autocomplete/Autocomplete.js
index b97c69bf7..1d776466d 100644
--- a/lib/autocomplete/Autocomplete.js
+++ b/lib/autocomplete/Autocomplete.js
@@ -164,7 +164,7 @@ var factory = function factory(Chip, Input) {
       key: 'suggestions',
       value: function suggestions() {
         var suggest = new Map();
-        var query = this.state.query.toLowerCase().trim() || '';
+        var query = (this.state.query || (!this.props.multiple ? this.props.value : '')).toLowerCase().trim() || '';
         var values = this.values();
         var source = this.source();
 

From 1809d6781390769cd3a91f103468c5b41bc31e2c Mon Sep 17 00:00:00 2001
From: Simon Selg <simon@selg.me>
Date: Thu, 4 Aug 2016 03:34:28 +0200
Subject: [PATCH 0702/1024] fix(multiline input): autoresize after initial
 render too

---
 components/input/Input.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/input/Input.js b/components/input/Input.js
index c6b944dc6..e91969f7d 100644
--- a/components/input/Input.js
+++ b/components/input/Input.js
@@ -57,6 +57,7 @@ const factory = (FontIcon) => {
     componentDidMount () {
       if (this.props.multiline) {
         window.addEventListener('resize', this.handleAutoresize);
+        this.handleAutoresize();
       }
     }
 

From 9a4f5538dc1a05d213dc182466c4c7bdc859f1c4 Mon Sep 17 00:00:00 2001
From: Simon Selg <simon@selg.me>
Date: Thu, 4 Aug 2016 03:35:23 +0200
Subject: [PATCH 0703/1024] docs(input): fix multiline example and add
 maxLength to it

---
 .../layout/main/modules/examples/input_example_1.txt          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/app/components/layout/main/modules/examples/input_example_1.txt b/docs/app/components/layout/main/modules/examples/input_example_1.txt
index f1801959c..990cb342a 100644
--- a/docs/app/components/layout/main/modules/examples/input_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/input_example_1.txt
@@ -8,9 +8,9 @@ class InputTest extends React.Component {
   render () {
     return (
       <section>
-        <Input type='text' label='Name' name='name' value={this.state.name} onChange={this.handleChange.bind(this, 'name')} maxLength={16 } />
+        <Input type='text' label='Name' name='name' value={this.state.name} onChange={this.handleChange.bind(this, 'name')} maxLength={16} />
         <Input type='text' label='Disabled field' disabled />
-        <Input type='text' multiline label='Multiline' onChange={this.handleChange.bind(this, 'multiline')} />
+        <Input type='text' multiline label='Multiline' maxLength={20} value={this.state.multiline} onChange={this.handleChange.bind(this, 'multiline')} />
         <Input type='email' label='Email address' icon='email' value={this.state.email} onChange={this.handleChange.bind(this, 'email')} />
         <Input type='tel' label='Phone' name='phone' icon='phone' value={this.state.phone} onChange={this.handleChange.bind(this, 'phone')} />
         <Input type='text' value={this.state.hint} label='Required Field' hint='With Hint' required onChange={this.handleChange.bind(this, 'hint')} icon={<span>J</span>} />

From 75487fb9a7ebccc6bef54b5acab716720e670e1d Mon Sep 17 00:00:00 2001
From: Simon Selg <simon@selg.me>
Date: Thu, 4 Aug 2016 03:40:10 +0200
Subject: [PATCH 0704/1024] fix(input): only remove resize event listerner if
 it exists

---
 components/input/Input.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/input/Input.js b/components/input/Input.js
index e91969f7d..3a6067f4d 100644
--- a/components/input/Input.js
+++ b/components/input/Input.js
@@ -70,7 +70,7 @@ const factory = (FontIcon) => {
     }
 
     componentWillUnmount () {
-      window.removeEventListener('resize', this.handleAutoresize);
+      if (this.props.multiline) window.removeEventListener('resize', this.handleAutoresize);
     }
 
     handleChange = (event) => {

From 8559c1818c07e0554125715152df17cf49641c8b Mon Sep 17 00:00:00 2001
From: Simon Selg <simon@selg.me>
Date: Thu, 4 Aug 2016 03:41:24 +0200
Subject: [PATCH 0705/1024] refactor(input): move autoresize to didUpdate

It needs to be there because it also needs to be called when value is changed from outside by setting the value property
---
 components/input/Input.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/components/input/Input.js b/components/input/Input.js
index 3a6067f4d..f3f940af6 100644
--- a/components/input/Input.js
+++ b/components/input/Input.js
@@ -69,14 +69,20 @@ const factory = (FontIcon) => {
       }
     }
 
+    componentDidUpdate (prevProps) {
+      const { multiline, value } = this.props;
+
+      // resize the textarea, if nessesary
+      if (multiline && (prevProps.value && prevProps.value.length) !== (value && value.length)) {
+        this.handleAutoresize();
+      }
+    }
+
     componentWillUnmount () {
       if (this.props.multiline) window.removeEventListener('resize', this.handleAutoresize);
     }
 
     handleChange = (event) => {
-      if (this.props.multiline) {
-        this.handleAutoresize();
-      }
       if (this.props.onChange) this.props.onChange(event.target.value, event);
     };
 

From a8dbad121f0169eb608f3ba0ce8032d812efd31b Mon Sep 17 00:00:00 2001
From: Simon Selg <simon@selg.me>
Date: Thu, 4 Aug 2016 03:45:38 +0200
Subject: [PATCH 0706/1024] feat(input): implement maxLength in js rather then
 using the maxlength prop of the input field

This is explained in #685. Fixes #685 therefore.
---
 components/input/Input.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/components/input/Input.js b/components/input/Input.js
index f3f940af6..4888cefca 100644
--- a/components/input/Input.js
+++ b/components/input/Input.js
@@ -83,7 +83,15 @@ const factory = (FontIcon) => {
     }
 
     handleChange = (event) => {
-      if (this.props.onChange) this.props.onChange(event.target.value, event);
+      const { onChange, multiline, maxLength } = this.props;
+      const valueFromEvent = event.target.value;
+
+      // trim value to maxLength if that exists (only on multiline inputs)
+      const haveToTrim = (multiline && maxLength && event.target.value.length > maxLength);
+      const value = haveToTrim ? valueFromEvent.substr(0, maxLength) : valueFromEvent;
+
+      // propagate to to store and therefore to the input
+      if (onChange) onChange(value, event);
     };
 
     handleAutoresize = () => {
@@ -136,8 +144,7 @@ const factory = (FontIcon) => {
         disabled,
         required,
         type,
-        value,
-        maxLength
+        value
       });
 
       return (

From 056cd6ddb175115c2475ad4ceea30feb8eb4340f Mon Sep 17 00:00:00 2001
From: Simon Selg <simon@selg.me>
Date: Thu, 4 Aug 2016 03:46:20 +0200
Subject: [PATCH 0707/1024] feat(input): set the default row amount for
 multiline inputs to 1

---
 components/input/Input.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/input/Input.js b/components/input/Input.js
index 4888cefca..f88317b47 100644
--- a/components/input/Input.js
+++ b/components/input/Input.js
@@ -134,7 +134,7 @@ const factory = (FontIcon) => {
         && value !== ''
         && !(typeof value === Number && isNaN(value));
 
-      const InputElement = React.createElement(multiline ? 'textarea' : 'input', {
+      const inputElementProps = {
         ...others,
         className: classnames(theme.inputElement, {[theme.filled]: valuePresent}),
         onChange: this.handleChange,
@@ -145,7 +145,9 @@ const factory = (FontIcon) => {
         required,
         type,
         value
-      });
+      };
+      if (multiline) inputElementProps.rows = 1; // set initial height to 1
+      const InputElement = React.createElement(multiline ? 'textarea' : 'input', inputElementProps);
 
       return (
         <div data-react-toolbox='input' className={className}>

From a2c8f08f7c0e2f9ed03152af407d5c0ec3123132 Mon Sep 17 00:00:00 2001
From: Pablo Sanfilippo <sanfilippopablo@gmail.com>
Date: Thu, 4 Aug 2016 01:32:40 -0300
Subject: [PATCH 0708/1024] Added viewBox attr to svg element of circular
 ProgressBar to allow custom sizing

---
 components/progress_bar/ProgressBar.js | 2 +-
 lib/progress_bar/ProgressBar.js        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/progress_bar/ProgressBar.js b/components/progress_bar/ProgressBar.js
index ac75e3554..cd1ac2acc 100644
--- a/components/progress_bar/ProgressBar.js
+++ b/components/progress_bar/ProgressBar.js
@@ -62,7 +62,7 @@ class ProgressBar extends Component {
 
   renderCircular () {
     return (
-      <svg className={this.props.theme.circle}>
+      <svg className={this.props.theme.circle} viewBox="0 0 60 60">
         <circle className={this.props.theme.path} style={this.circularStyle()} cx='30' cy='30' r='25' />
       </svg>
     );
diff --git a/lib/progress_bar/ProgressBar.js b/lib/progress_bar/ProgressBar.js
index f0aa1fe64..c1a36201a 100644
--- a/lib/progress_bar/ProgressBar.js
+++ b/lib/progress_bar/ProgressBar.js
@@ -73,7 +73,7 @@ var ProgressBar = function (_Component) {
     value: function renderCircular() {
       return _react2.default.createElement(
         'svg',
-        { className: this.props.theme.circle },
+        { className: this.props.theme.circle, viewBox: '0 0 60 60' },
         _react2.default.createElement('circle', { className: this.props.theme.path, style: this.circularStyle(), cx: '30', cy: '30', r: '25' })
       );
     }

From 023a7323b8d24ec839f838fd8857c86a4f091988 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 4 Aug 2016 20:48:52 +0200
Subject: [PATCH 0709/1024] Fixes #663

---
 components/date_picker/DatePicker.js | 23 ++++++++++++++++++-----
 components/date_picker/readme.md     |  1 +
 components/date_picker/theme.scss    |  2 +-
 components/input/theme.scss          |  4 ++--
 components/time_picker/TimePicker.js | 19 ++++++++++++++++---
 components/time_picker/readme.md     |  1 +
 components/time_picker/theme.scss    |  2 +-
 spec/components/pickers.js           |  6 ++++--
 8 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/components/date_picker/DatePicker.js b/components/date_picker/DatePicker.js
index 1c2c582f4..03fbb6c30 100644
--- a/components/date_picker/DatePicker.js
+++ b/components/date_picker/DatePicker.js
@@ -31,6 +31,7 @@ const factory = (Input, DatePickerDialog) => {
       onEscKeyDown: PropTypes.func,
       onKeyPress: PropTypes.func,
       onOverlayClick: PropTypes.func,
+      readonly: PropTypes.bool,
       theme: PropTypes.shape({
         input: PropTypes.string
       }),
@@ -48,6 +49,16 @@ const factory = (Input, DatePickerDialog) => {
       this.setState({active: false});
     };
 
+    handleInputFocus = (event) => {
+      events.pauseEvent(event);
+      this.setState({active: true});
+    };
+
+    handleInputBlur = (event) => {
+      events.pauseEvent(event);
+      this.setState({active: false});
+    };
+
     handleInputMouseDown = (event) => {
       events.pauseEvent(event);
       this.setState({active: true});
@@ -68,7 +79,7 @@ const factory = (Input, DatePickerDialog) => {
 
     render () {
       const { autoOk, inputClassName, inputFormat, maxDate, minDate,
-        onEscKeyDown, onOverlayClick, value, ...others } = this.props;
+        onEscKeyDown, onOverlayClick, readonly, value, ...others } = this.props;
       const finalInputFormat = inputFormat || time.formatDate;
       const date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined;
       const formattedDate = date === undefined ? '' : finalInputFormat(value);
@@ -78,14 +89,16 @@ const factory = (Input, DatePickerDialog) => {
           <Input
             {...others}
             className={classnames(this.props.theme.input, {[inputClassName]: inputClassName })}
+            disabled={readonly}
             error={this.props.error}
-            onMouseDown={this.handleInputMouseDown}
-            onKeyPress={this.handleInputKeyPress}
-            name={this.props.name}
+            icon={this.props.icon}
             label={this.props.label}
+            name={this.props.name}
+            onFocus={this.handleInputFocus}
+            onKeyPress={this.handleInputKeyPress}
+            onMouseDown={this.handleInputMouseDown}
             readOnly
             type='text'
-            icon={this.props.icon}
             value={formattedDate}
           />
           <DatePickerDialog
diff --git a/components/date_picker/readme.md b/components/date_picker/readme.md
index 805f56ea3..2195a4311 100644
--- a/components/date_picker/readme.md
+++ b/components/date_picker/readme.md
@@ -46,6 +46,7 @@ If you want to provide a theme via context, the component key is `RTDatePicker`.
 | `onChange`      | `Function`      |               | Callback called when the picker value is changed.|
 | `onEscKeyDown`   | `Function`     |               | Callback called when the ESC key is pressed with the overlay active. |
 | `onOverlayClick` | `Function`     |               | Callback to be invoked when the dialog overlay is clicked.|
+| `readonly`      | `Boolean`       |               | The input element will be readonly and look like disabled.|
 | `value`         | `Date`          |               | Date object with the currently selected date. |
 
 ## Theme
diff --git a/components/date_picker/theme.scss b/components/date_picker/theme.scss
index 81464ef57..ef3c6b67f 100644
--- a/components/date_picker/theme.scss
+++ b/components/date_picker/theme.scss
@@ -3,7 +3,7 @@
 @import "http://github.com/mixins";
 @import "http://github.com/config";
 
-.input > [role="input"] {
+.input:not(.disabled) > .inputElement {
   cursor: pointer;
 }
 
diff --git a/components/input/theme.scss b/components/input/theme.scss
index 739de903e..b6b6c8130 100644
--- a/components/input/theme.scss
+++ b/components/input/theme.scss
@@ -35,7 +35,7 @@
   border: 0;
   border-bottom: 1px solid $input-text-bottom-border-color;
   outline: none;
-  &:focus {
+  &:focus:not([disabled]):not([readonly]) {
     ~ .bar:before, ~ .bar:after {
       width: 50%;
     }
@@ -52,7 +52,7 @@
       color: $input-text-highlight-color;
     }
   }
-  &:focus, &.filled, &[type="date"], &[type="time"] {
+  &:focus:not([disabled]):not([readonly]), &.filled, &[type="date"], &[type="time"] {
     ~ .label:not(.fixed) {
       top: $input-focus-label-top;
       font-size: $input-label-font-size;
diff --git a/components/time_picker/TimePicker.js b/components/time_picker/TimePicker.js
index 38f420676..627836d9c 100644
--- a/components/time_picker/TimePicker.js
+++ b/components/time_picker/TimePicker.js
@@ -21,6 +21,7 @@ const factory = (TimePickerDialog, Input) => {
       onEscKeyDown: PropTypes.func,
       onKeyPress: PropTypes.func,
       onOverlayClick: PropTypes.func,
+      readonly: PropTypes.bool,
       theme: PropTypes.shape({
         input: PropTypes.string
       }),
@@ -40,6 +41,16 @@ const factory = (TimePickerDialog, Input) => {
       this.setState({active: false});
     };
 
+    handleInputFocus = (event) => {
+      events.pauseEvent(event);
+      this.setState({active: true});
+    };
+
+    handleInputBlur = (event) => {
+      events.pauseEvent(event);
+      this.setState({active: false});
+    };
+
     handleInputMouseDown = (event) => {
       events.pauseEvent(event);
       this.setState({active: true});
@@ -59,18 +70,20 @@ const factory = (TimePickerDialog, Input) => {
     };
 
     render () {
-      const { value, format, inputClassName, onEscKeyDown, onOverlayClick, ...others } = this.props;
+      const { value, format, inputClassName, onEscKeyDown, onOverlayClick,
+        readonly, ...others } = this.props;
       const formattedTime = value ? time.formatTime(value, format) : '';
       return (
         <div data-react-toolbox='time-picker'>
           <Input
             {...others}
             className={classnames(this.props.theme.input, {[inputClassName]: inputClassName })}
+            disabled={readonly}
             error={this.props.error}
-            name={this.props.name}
             label={this.props.label}
-            onMouseDown={this.handleInputMouseDown}
+            name={this.props.name}
             onKeyPress={this.handleInputKeyPress}
+            onMouseDown={this.handleInputMouseDown}
             readOnly
             type='text'
             value={formattedTime}
diff --git a/components/time_picker/readme.md b/components/time_picker/readme.md
index 84c3bc126..cf12c5ab9 100644
--- a/components/time_picker/readme.md
+++ b/components/time_picker/readme.md
@@ -41,6 +41,7 @@ If you want to provide a theme via context, the component key is `RTTimePicker`.
 | `format`        | `String`    | `24hr`      | Format to display the clock. It can be `24hr` or `ampm`.|
 | `label`         | `String`    |             | The text string to use for the floating label element in the input component.|
 | `onChange`      | `Function`  |             | Callback called when the picker value is changed.|
+| `readonly`      | `Boolean`   |             | The input element will be readonly and look like disabled.|
 | `value`         | `Date`      |             | Datetime object with currrently selected time. |
 
 ## Theme
diff --git a/components/time_picker/theme.scss b/components/time_picker/theme.scss
index 297982895..328cdc43e 100644
--- a/components/time_picker/theme.scss
+++ b/components/time_picker/theme.scss
@@ -3,7 +3,7 @@
 @import "http://github.com/mixins";
 @import "http://github.com/config";
 
-.input > [role="input"] {
+.input:not(.disabled) > .inputElement {
   cursor: pointer;
 }
 
diff --git a/spec/components/pickers.js b/spec/components/pickers.js
index 2a2f5f2ef..f4936dd9c 100644
--- a/spec/components/pickers.js
+++ b/spec/components/pickers.js
@@ -36,10 +36,11 @@ class PickersTest extends React.Component {
         />
 
         <DatePicker
-          label='Expiration date'
+          label='Expiration date (Read Only)'
           maxDate={max_datetime}
           minDate={min_datetime}
           onChange={this.handleChange.bind(this, 'date2')}
+          readonly
           value={this.state.date2}
         />
 
@@ -67,7 +68,8 @@ class PickersTest extends React.Component {
 
         <TimePicker
           format='ampm'
-          label='Finishing time'
+          label='Finishing time (Read Only)'
+          readonly
           onChange={this.handleChange.bind(this, 'time2')}
           value={this.state.time2}
         />

From e597bc567f8131f2c4a4ad963aa6073fd63c9023 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 4 Aug 2016 21:06:20 +0200
Subject: [PATCH 0710/1024] Fix linter errors and refactor

---
 components/table/Table.js | 21 +++++++++------------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/components/table/Table.js b/components/table/Table.js
index e6f021cd5..89d4d0667 100644
--- a/components/table/Table.js
+++ b/components/table/Table.js
@@ -42,19 +42,16 @@ const factory = (TableHead, TableRow) => {
 
     handleRowSelect = (index) => {
       if (this.props.onSelect) {
-        const position = this.props.selected.indexOf(index);
-        let newSelected = [...this.props.selected];
-        
-        if (position !== -1) { 
-          newSelected = newSelected.filter((el,idx)=>{ return (idx != position); }); 
+        let newSelection = [];
+        if (this.props.multiSelectable) {
+          const position = this.props.selected.indexOf(index);
+          newSelection = this.props.selected.indexOf(index) !== -1
+            ? this.props.selected.filter((el, idx) => idx !== position)
+            : newSelection.concat([index]);
+        } else {
+          newSelection = [index];
         }
-        else if (this.props.multiSelectable) {
-          newSelected.push(index);
-        } 
-        else {
-          newSelected = [index];
-        }
-        this.props.onSelect(newSelected);
+        this.props.onSelect(newSelection);
       }
     };
 

From d1fcc14cb15f90fd60ba8a9dd3a247b0df298c47 Mon Sep 17 00:00:00 2001
From: Simon Selg <simon@selg.me>
Date: Thu, 4 Aug 2016 21:52:54 +0200
Subject: [PATCH 0711/1024] fix(input): always recalculate size

The assumstion that an equal amount of characters consume the same size is wrong as not all fonts are monospaced.
---
 components/input/Input.js | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/components/input/Input.js b/components/input/Input.js
index f88317b47..7db244c98 100644
--- a/components/input/Input.js
+++ b/components/input/Input.js
@@ -69,13 +69,9 @@ const factory = (FontIcon) => {
       }
     }
 
-    componentDidUpdate (prevProps) {
-      const { multiline, value } = this.props;
-
+    componentDidUpdate () {
       // resize the textarea, if nessesary
-      if (multiline && (prevProps.value && prevProps.value.length) !== (value && value.length)) {
-        this.handleAutoresize();
-      }
+      if (this.props.multiline) this.handleAutoresize();
     }
 
     componentWillUnmount () {

From 70823afcb36ca0e154edb57a7038d83dc40099f5 Mon Sep 17 00:00:00 2001
From: Simon Selg <simon@selg.me>
Date: Thu, 4 Aug 2016 21:56:36 +0200
Subject: [PATCH 0712/1024] feat(input): prevent insertion of characters if
 maxLength is reached

Previously we'd let the user insert a character, and then, if the resulting string was to long remove it again (through onChange). That creates unnessesary DOM modifications and store updates, and more importantly, diverges from the behavior of the native maxlength attribute of <textarea>.

Now we prevent the characters from beeing inserted in the first place if the length reaches maxlenght.
---
 components/input/Input.js | 31 +++++++++++++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/components/input/Input.js b/components/input/Input.js
index 7db244c98..798a8f4ba 100644
--- a/components/input/Input.js
+++ b/components/input/Input.js
@@ -111,10 +111,31 @@ const factory = (FontIcon) => {
       this.refs.input.focus();
     }
 
+    onKeyPress = (event) => {
+      // prevent insertion of more characters if we're a multiline input
+      // and maxLength exists
+      const { multiline, maxLength, onKeyPress } = this.props;
+      if (multiline && maxLength) {
+        // check if smt is selected, in which case the newly added charcter would
+        // replace the selected characters, so the length of value doesn't actually
+        // increase.
+        const isReplacing = event.target.selectionEnd - event.target.selectionStart;
+        const value = event.target.value;
+
+        if (!isReplacing && value.length === maxLength) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+      }
+
+      if (onKeyPress) onKeyPress(event);
+    }
+
     render () {
       const { children, disabled, error, floating, hint, icon,
               name, label: labelText, maxLength, multiline, required,
-              theme, type, value, ...others} = this.props;
+              theme, type, value, onKeyPress, ...others} = this.props;
       const length = maxLength && value ? value.length : 0;
       const labelClassName = classnames(theme.label, {[theme.fixed]: !floating});
 
@@ -142,7 +163,13 @@ const factory = (FontIcon) => {
         type,
         value
       };
-      if (multiline) inputElementProps.rows = 1; // set initial height to 1
+      if (!multiline) {
+        inputElementProps.onKeyPress = onKeyPress;
+      } else {
+        inputElementProps.rows = 1;
+        inputElementProps.onKeyPress = this.onKeyPress;
+      }
+
       const InputElement = React.createElement(multiline ? 'textarea' : 'input', inputElementProps);
 
       return (

From 6f03fb553a363cce83b5c909d6ba5c06cc73123e Mon Sep 17 00:00:00 2001
From: Simon Selg <simon@selg.me>
Date: Thu, 4 Aug 2016 21:58:41 +0200
Subject: [PATCH 0713/1024] fix(input): don't remove the maxLenght attribute
 from inputs

We still rely on it when using non-multiline inputs (=> the input element is used), only when using textareas we use our custom maxlength logic.
---
 components/input/Input.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/input/Input.js b/components/input/Input.js
index 798a8f4ba..12f32c7b1 100644
--- a/components/input/Input.js
+++ b/components/input/Input.js
@@ -164,6 +164,7 @@ const factory = (FontIcon) => {
         value
       };
       if (!multiline) {
+        inputElementProps.maxLength = maxLength;
         inputElementProps.onKeyPress = onKeyPress;
       } else {
         inputElementProps.rows = 1;

From f29e570d299cdcf29512196943dc1b275c0351d5 Mon Sep 17 00:00:00 2001
From: Simon Selg <simon@selg.me>
Date: Thu, 4 Aug 2016 22:02:03 +0200
Subject: [PATCH 0714/1024] doc(input): add note about handleChange
 implementation

---
 components/input/Input.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/input/Input.js b/components/input/Input.js
index 12f32c7b1..977686656 100644
--- a/components/input/Input.js
+++ b/components/input/Input.js
@@ -82,7 +82,9 @@ const factory = (FontIcon) => {
       const { onChange, multiline, maxLength } = this.props;
       const valueFromEvent = event.target.value;
 
-      // trim value to maxLength if that exists (only on multiline inputs)
+      // Trim value to maxLength if that exists (only on multiline inputs).
+      // Note that this is still required even tho we have the onKeyPress filter
+      // because the user could paste smt in the textarea.
       const haveToTrim = (multiline && maxLength && event.target.value.length > maxLength);
       const value = haveToTrim ? valueFromEvent.substr(0, maxLength) : valueFromEvent;
 

From 62f8b22abff0fbba2e428766ccf6b22260415fed Mon Sep 17 00:00:00 2001
From: Simon Selg <simon@selg.me>
Date: Thu, 4 Aug 2016 22:18:11 +0200
Subject: [PATCH 0715/1024] feat(dist): add newest build

---
 lib/input/Input.js | 70 +++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 60 insertions(+), 10 deletions(-)

diff --git a/lib/input/Input.js b/lib/input/Input.js
index d7e816ca8..41a12158f 100644
--- a/lib/input/Input.js
+++ b/lib/input/Input.js
@@ -55,10 +55,21 @@ var factory = function factory(FontIcon) {
       }
 
       return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Input)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleChange = function (event) {
-        if (_this.props.multiline) {
-          _this.handleAutoresize();
-        }
-        if (_this.props.onChange) _this.props.onChange(event.target.value, event);
+        var _this$props = _this.props;
+        var onChange = _this$props.onChange;
+        var multiline = _this$props.multiline;
+        var maxLength = _this$props.maxLength;
+
+        var valueFromEvent = event.target.value;
+
+        // Trim value to maxLength if that exists (only on multiline inputs).
+        // Note that this is still required even tho we have the onKeyPress filter
+        // because the user could paste smt in the textarea.
+        var haveToTrim = multiline && maxLength && event.target.value.length > maxLength;
+        var value = haveToTrim ? valueFromEvent.substr(0, maxLength) : valueFromEvent;
+
+        // propagate to to store and therefore to the input
+        if (onChange) onChange(value, event);
       }, _this.handleAutoresize = function () {
         var element = _this.refs.input;
         // compute the height difference between inner height and outer height
@@ -68,6 +79,29 @@ var factory = function factory(FontIcon) {
         // resize the input to its content size
         element.style.height = 'auto';
         element.style.height = element.scrollHeight + heightOffset + 'px';
+      }, _this.onKeyPress = function (event) {
+        // prevent insertion of more characters if we're a multiline input
+        // and maxLength exists
+        var _this$props2 = _this.props;
+        var multiline = _this$props2.multiline;
+        var maxLength = _this$props2.maxLength;
+        var onKeyPress = _this$props2.onKeyPress;
+
+        if (multiline && maxLength) {
+          // check if smt is selected, in which case the newly added charcter would
+          // replace the selected characters, so the length of value doesn't actually
+          // increase.
+          var isReplacing = event.target.selectionEnd - event.target.selectionStart;
+          var value = event.target.value;
+
+          if (!isReplacing && value.length === maxLength) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+          }
+        }
+
+        if (onKeyPress) onKeyPress(event);
       }, _temp), _possibleConstructorReturn(_this, _ret);
     }
 
@@ -76,6 +110,7 @@ var factory = function factory(FontIcon) {
       value: function componentDidMount() {
         if (this.props.multiline) {
           window.addEventListener('resize', this.handleAutoresize);
+          this.handleAutoresize();
         }
       }
     }, {
@@ -87,10 +122,16 @@ var factory = function factory(FontIcon) {
           window.removeEventListener('resize', this.handleAutoresize);
         }
       }
+    }, {
+      key: 'componentDidUpdate',
+      value: function componentDidUpdate() {
+        // resize the textarea, if nessesary
+        if (this.props.multiline) this.handleAutoresize();
+      }
     }, {
       key: 'componentWillUnmount',
       value: function componentWillUnmount() {
-        window.removeEventListener('resize', this.handleAutoresize);
+        if (this.props.multiline) window.removeEventListener('resize', this.handleAutoresize);
       }
     }, {
       key: 'blur',
@@ -122,8 +163,9 @@ var factory = function factory(FontIcon) {
         var theme = _props.theme;
         var type = _props.type;
         var value = _props.value;
+        var onKeyPress = _props.onKeyPress;
 
-        var others = _objectWithoutProperties(_props, ['children', 'disabled', 'error', 'floating', 'hint', 'icon', 'name', 'label', 'maxLength', 'multiline', 'required', 'theme', 'type', 'value']);
+        var others = _objectWithoutProperties(_props, ['children', 'disabled', 'error', 'floating', 'hint', 'icon', 'name', 'label', 'maxLength', 'multiline', 'required', 'theme', 'type', 'value', 'onKeyPress']);
 
         var length = maxLength && value ? value.length : 0;
         var labelClassName = (0, _classnames5.default)(theme.label, _defineProperty({}, theme.fixed, !floating));
@@ -132,7 +174,7 @@ var factory = function factory(FontIcon) {
 
         var valuePresent = value !== null && value !== undefined && value !== '' && !((typeof value === 'undefined' ? 'undefined' : _typeof(value)) === Number && isNaN(value));
 
-        var InputElement = _react2.default.createElement(multiline ? 'textarea' : 'input', _extends({}, others, {
+        var inputElementProps = _extends({}, others, {
           className: (0, _classnames5.default)(theme.inputElement, _defineProperty({}, theme.filled, valuePresent)),
           onChange: this.handleChange,
           ref: 'input',
@@ -141,9 +183,17 @@ var factory = function factory(FontIcon) {
           disabled: disabled,
           required: required,
           type: type,
-          value: value,
-          maxLength: maxLength
-        }));
+          value: value
+        });
+        if (!multiline) {
+          inputElementProps.maxLength = maxLength;
+          inputElementProps.onKeyPress = onKeyPress;
+        } else {
+          inputElementProps.rows = 1;
+          inputElementProps.onKeyPress = this.onKeyPress;
+        }
+
+        var InputElement = _react2.default.createElement(multiline ? 'textarea' : 'input', inputElementProps);
 
         return _react2.default.createElement(
           'div',

From 2bd6539476dc36826f6545bc03d43497ef272291 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 4 Aug 2016 22:23:27 +0200
Subject: [PATCH 0716/1024] Fix remove animation event function

---
 components/utils/events.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/utils/events.js b/components/utils/events.js
index abbea4b1f..c149629c1 100644
--- a/components/utils/events.js
+++ b/components/utils/events.js
@@ -49,7 +49,7 @@ export default {
   removeEventListenerOnTransitionEnded (element) {
     const eventName = transitionEventNamesFor(element);
     if (!eventName) return false;
-    element.removeEventListener(eventName);
+    element.removeEventListener(eventName, () => {});
     return true;
   }
 };

From 032840e74a7a737596914cd67a2946284beca859 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 4 Aug 2016 22:23:43 +0200
Subject: [PATCH 0717/1024] Don't render Ripple if it's not being animated

---
 components/ripple/Ripple.js | 29 +++++++++++++++++------------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/components/ripple/Ripple.js b/components/ripple/Ripple.js
index d957ea1e9..ac36b3fdd 100644
--- a/components/ripple/Ripple.js
+++ b/components/ripple/Ripple.js
@@ -53,21 +53,22 @@ const rippleFactory = (options = {}) => {
         left: null,
         restarting: false,
         top: null,
+        visible: false,
         width: null
       };
 
-      componentDidMount () {
-        if (this.props.onRippleEnded) {
+      componentDidUpdate (prevProps, prevState) {
+        if (!prevState.visible && this.state.visible) {
           events.addEventListenerOnTransitionEnded(this.refs.ripple, (evt) => {
-            if (evt.propertyName === 'transform') this.props.onRippleEnded(evt);
+            if (evt.propertyName === 'opacity') this.handleOpacityEnded(evt);
           });
         }
       }
 
-      componentWillUnmount () {
-        if (this.props.onRippleEnded) {
-          events.removeEventListenerOnTransitionEnded(this.refs.ripple);
-        }
+      handleOpacityEnded = (evt) => {
+        events.removeEventListenerOnTransitionEnded(this.refs.ripple);
+        this.setState({visible: false});
+        if (this.props.onRippleEnded) this.props.onRippleEnded(evt);
       }
 
       handleEnd = () => {
@@ -80,9 +81,9 @@ const rippleFactory = (options = {}) => {
           this.touch = touch;
           document.addEventListener(this.touch ? 'touchend' : 'mouseup', this.handleEnd);
           const {top, left, width} = this._getDescriptor(pageX, pageY);
-          this.setState({active: false, restarting: true, top, left, width}, () => {
+          this.setState({active: false, restarting: true, visible: true, top, left, width}, () => {
             this.refs.ripple.offsetWidth;  //eslint-disable-line no-unused-expressions
-            this.setState({active: true, restarting: false});
+            this.setState({active: true, restarting: false, visible: true});
           });
         }
       };
@@ -131,12 +132,16 @@ const rippleFactory = (options = {}) => {
               transform: `translate3d(${-width / 2 + left}px, ${-width / 2 + top}px, 0) scale(${scale})`
             }, {width, height: width});
 
+          const rippleElement = (
+            <span data-react-toolbox='ripple' className={this.props.theme.rippleWrapper} {...props}>
+              <span ref='ripple' role='ripple' className={rippleClassName} style={rippleStyle} />
+            </span>
+          );
+
           return (
             <ComposedComponent {...other} onMouseDown={this.handleMouseDown}>
               {children ? children : null}
-              <span data-react-toolbox='ripple' className={this.props.theme.rippleWrapper} {...props}>
-                <span ref='ripple' role='ripple' className={rippleClassName} style={rippleStyle} />
-              </span>
+              {this.state.visible || this.state.active ? rippleElement : null}
             </ComposedComponent>
           );
         }

From bdd2ce3575f7d3eddb3cfb05226723c308354037 Mon Sep 17 00:00:00 2001
From: Pablo Sanfilippo <sanfilippopablo@gmail.com>
Date: Fri, 5 Aug 2016 16:41:45 -0300
Subject: [PATCH 0718/1024] Added custom sized circular ProgressBar to spec

---
 spec/components/progress.js | 3 +++
 spec/style.scss             | 5 +++++
 2 files changed, 8 insertions(+)

diff --git a/spec/components/progress.js b/spec/components/progress.js
index 9683f99df..82147c959 100644
--- a/spec/components/progress.js
+++ b/spec/components/progress.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import ProgressBar from '../../components/progress_bar';
+import style from '../style'
 
 const initialState = {
   progress: 0,
@@ -47,6 +48,8 @@ class ProgressBarTest extends React.Component {
         <ProgressBar mode='indeterminate'/>
         <p style={{margin: '10px auto'}}>Circular</p>
         <ProgressBar type='circular' mode='indeterminate'/>
+        <p style={{margin: '10px auto'}}>Circular with custom size</p>
+        <ProgressBar type='circular' mode='indeterminate' className={style.customSizedProgress}/>
       </section>
     );
   }
diff --git a/spec/style.scss b/spec/style.scss
index 2d59d58c4..ca3fea306 100644
--- a/spec/style.scss
+++ b/spec/style.scss
@@ -139,3 +139,8 @@ $offset: 1.8 * $unit;
   flex-direction: column;
   flex-grow: 2;
 }
+
+.customSizedProgress {
+  width: 40px !important;
+  height: 40px !important;
+}

From 71fcd3f57cb4a96d7acfefe970c02018bb11867b Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 6 Aug 2016 14:24:40 +0200
Subject: [PATCH 0719/1024] Refactor ripple adding multiple option

---
 components/ripple/Ripple.js | 216 +++++++++++++++++++++++++-----------
 components/ripple/readme.md |  22 +++-
 components/utils/events.js  |   4 +-
 package.json                |   1 +
 spec/components/button.js   |   2 +-
 5 files changed, 175 insertions(+), 70 deletions(-)

diff --git a/components/ripple/Ripple.js b/components/ripple/Ripple.js
index ac36b3fdd..496b8ce9a 100644
--- a/components/ripple/Ripple.js
+++ b/components/ripple/Ripple.js
@@ -1,6 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import classnames from 'classnames';
+import update from 'react-addons-update';
 import { themr } from 'react-css-themr';
 import { RIPPLE } from '../identifiers.js';
 import events from '../utils/events';
@@ -9,6 +10,7 @@ import prefixer from '../utils/prefixer';
 const defaults = {
   centered: false,
   className: '',
+  multiple: true,
   spread: 2,
   theme: {}
 };
@@ -17,6 +19,7 @@ const rippleFactory = (options = {}) => {
   const {
     centered: defaultCentered,
     className: defaultClassName,
+    multiple: defaultMultiple,
     spread: defaultSpread,
     theme: defaultTheme,
     ...props
@@ -31,6 +34,7 @@ const rippleFactory = (options = {}) => {
         ripple: PropTypes.bool,
         rippleCentered: PropTypes.bool,
         rippleClassName: PropTypes.string,
+        rippleMultiple: PropTypes.bool,
         rippleSpread: PropTypes.number,
         theme: PropTypes.shape({
           ripple: PropTypes.string,
@@ -45,103 +49,189 @@ const rippleFactory = (options = {}) => {
         ripple: true,
         rippleCentered: defaultCentered,
         rippleClassName: defaultClassName,
+        rippleMultiple: defaultMultiple,
         rippleSpread: defaultSpread
       };
 
       state = {
-        active: false,
-        left: null,
-        restarting: false,
-        top: null,
-        visible: false,
-        width: null
+        ripples: {}
       };
 
       componentDidUpdate (prevProps, prevState) {
-        if (!prevState.visible && this.state.visible) {
-          events.addEventListenerOnTransitionEnded(this.refs.ripple, (evt) => {
-            if (evt.propertyName === 'opacity') this.handleOpacityEnded(evt);
-          });
+        // If a new ripple was just added, add a remove event listener to its animation
+        if (Object.keys(prevState.ripples).length < Object.keys(this.state.ripples).length) {
+          this.addRippleRemoveEventListener(this.getLastKey());
         }
       }
 
-      handleOpacityEnded = (evt) => {
-        events.removeEventListenerOnTransitionEnded(this.refs.ripple);
-        this.setState({visible: false});
-        if (this.props.onRippleEnded) this.props.onRippleEnded(evt);
+      /**
+       * Add an event listener to the reference with given key so when the animation transition
+       * ends we can be sure that it finished and it can be safely removed from the state.
+       * This function is called whenever a new ripple is added to the component.
+       *
+       * @param {String} rippleKey Is the key of the ripple to add the event.
+       */
+      addRippleRemoveEventListener (rippleKey) {
+        const self = this;
+        events.addEventListenerOnTransitionEnded(this.refs[rippleKey], function onOpacityEnd (e) {
+          if (e.propertyName === 'opacity') {
+            if (self.props.onRippleEnded) self.props.onRippleEnded(e);
+            events.removeEventListenerOnTransitionEnded(self.refs[rippleKey], onOpacityEnd);
+            self.setState({ ripples: update(self.state.ripples, {
+              [rippleKey]: { $apply: ripplesState => {
+                delete ripplesState[rippleKey];
+                return ripplesState;
+              } }
+            }) });
+          }
+        });
       }
 
-      handleEnd = () => {
-        document.removeEventListener(this.touch ? 'touchend' : 'mouseup', this.handleEnd);
-        this.setState({active: false});
-      };
-
-      start = ({pageX, pageY}, touch = false) => {
-        if (!this._isTouchRippleReceivingMouseEvent(touch)) {
-          this.touch = touch;
-          document.addEventListener(this.touch ? 'touchend' : 'mouseup', this.handleEnd);
-          const {top, left, width} = this._getDescriptor(pageX, pageY);
-          this.setState({active: false, restarting: true, visible: true, top, left, width}, () => {
-            this.refs.ripple.offsetWidth;  //eslint-disable-line no-unused-expressions
-            this.setState({active: true, restarting: false, visible: true});
+      /**
+       * Start a ripple animation on an specific point with touch or mouse events. First
+       * decides if the animation should trigger. If the ripple is multiple or there is no
+       * ripple present, it creates a new key. If it's a simple ripple and already exists,
+       * it just restarts the current ripple. The animation happens in two state changes
+       * to allow triggering via css.
+       *
+       * @param {Number} x Coordinate X on the screen where animation should start
+       * @param {Number} y Coordinate Y on the screen where animation should start
+       * @param {Boolean} isTouch Use events from touch or mouse.
+       */
+      animateRipple (x, y, isTouch) {
+        if (this.rippleShouldTrigger(isTouch)) {
+          const { top, left, width } = this.getDescriptor(x, y);
+          const noRipplesActive = Object.keys(this.state.ripples).length === 0;
+          const key = this.props.rippleMultiple || noRipplesActive ? this.getNextKey() : this.getLastKey();
+          const initialState = { active: false, restarting: true, top, left, width };
+          const runningState = { active: true, restarting: false };
+          this.addRippleDeactivateEventListener(isTouch, key);
+          this.setState(update(this.state, { ripples: { [key]: { $set: initialState } } }), () => {
+            this.refs[key].offsetWidth; //eslint-disable-line no-unused-expressions
+            this.setState(update(this.state, { ripples: { [key]: { $merge: runningState } } }));
           });
         }
-      };
+      }
 
-      _isTouchRippleReceivingMouseEvent (touch) {
-        return this.touch && !touch;
+      /**
+       * Determine if a ripple should start depending if its a touch event. For mobile both
+       * touchStart and mouseDown are launched so in case is touch we should always trigger
+       * but if its not we should check if a touch was already triggered to decide.
+       *
+       * @param {Boolean} isTouch True in case a touch event triggered the ripple false otherwise.
+       * @return {Boolean} True in case the ripple should trigger or false if it shouldn't.
+       */
+      rippleShouldTrigger (isTouch) {
+        const shouldStart = isTouch ? true : !this.touchCache;
+        this.touchCache = isTouch;
+        return shouldStart;
       }
 
-      _getDescriptor (pageX, pageY) {
-        const {left, top, height, width} = ReactDOM.findDOMNode(this).getBoundingClientRect();
-        const {rippleCentered: centered, rippleSpread: spread} = this.props;
+      /**
+       * Find out a descriptor object for the ripple element being created depending on
+       * the position where the it was triggered and the component's dimensions.
+       *
+       * @param {Number} x Coordinate x in the viewport where ripple was triggered
+       * @param {Number} y Coordinate y in the viewport where ripple was triggered
+       * @return {Object} Descriptor element including position and size of the element
+       */
+      getDescriptor (x, y) {
+        const { left, top, height, width } = ReactDOM.findDOMNode(this).getBoundingClientRect();
+        const { rippleCentered: centered, rippleSpread: spread } = this.props;
         return {
-          left: centered ? 0 : pageX - left - width / 2 - window.pageXOffset,
-          top: centered ? 0 : pageY - top - height / 2 - window.pageYOffset,
+          left: centered ? 0 : x - left - width / 2,
+          top: centered ? 0 : y - top - height / 2,
           width: width * spread
         };
       }
 
+      /**
+       * Increments and internal counter and returns the next value as a string. It
+       * is used to assign key references to new ripple elements.
+       *
+       * @return {String} Key to be assigned to a ripple.
+       */
+      getNextKey () {
+        this.currentCount = this.currentCount ? this.currentCount + 1 : 1;
+        return this.currentCount.toString();
+      }
+
+      /**
+       * Return the last generated key for a ripple element. When there is only one ripple
+       * and to get the reference when a ripple was just created.
+       *
+       * @return {String} The last generated ripple key.
+       */
+      getLastKey () {
+        return this.currentCount.toString();
+      }
+
+      /**
+       * Add an event listener to the document needed deactivate a ripple and make it dissappear.
+       * Deactivation can happen with a touchend or mouseup depending on the trigger type.
+       *
+       * @param {Boolean} isTouch True in case the trigger was a touch event false otherwise.
+       * @param {String} rippleKey It's a key to identify the ripple that should be deactivated.
+       */
+      addRippleDeactivateEventListener (isTouch, rippleKey) {
+        const self = this;
+        const eventType = isTouch ? 'touchend' : 'mouseup';
+        document.addEventListener(eventType, function endRipple () {
+          document.removeEventListener(eventType, endRipple);
+          self.setState({ ripples: update(self.state.ripples, {
+            [rippleKey]: { $merge: { active: false } }
+          }) });
+        });
+      }
+
       handleMouseDown = (event) => {
-        if (!this.props.disabled) this.start(event);
         if (this.props.onMouseDown) this.props.onMouseDown(event);
+        if (!this.props.disabled) {
+          const { x, y } = events.getMousePosition(event);
+          this.animateRipple(x, y, false);
+        }
+      };
+
+      handleTouchStart = (event) => {
+        if (this.props.onTouchStart) this.props.onTouchStart(event);
+        if (!this.props.disabled) {
+          const { x, y } = events.getTouchPosition(event);
+          this.animateRipple(x, y, true);
+        }
       };
 
+      renderRipple (key, className, { active, left, restarting, top, width }) {
+        const scale = restarting ? 0 : 1;
+        const transform = `translate3d(${-width / 2 + left}px, ${-width / 2 + top}px, 0) scale(${scale})`;
+        const _className = classnames(this.props.theme.ripple, {
+          [this.props.theme.rippleActive]: active,
+          [this.props.theme.rippleRestarting]: restarting
+        }, className);
+        return (
+          <span key={key} data-react-toolbox='ripple' className={this.props.theme.rippleWrapper} {...props}>
+            <span
+              role='ripple'
+              ref={key}
+              className={_className}
+              style={prefixer({ transform }, {width, height: width})}
+            />
+          </span>
+        );
+      }
+
       render () {
         if (!this.props.ripple) {
           return <ComposedComponent {...this.props} />;
         } else {
+          const { ripples } = this.state;
           const {
-            children,
-            ripple, //eslint-disable-line no-unused-vars
-            onRippleEnded, //eslint-disable-line no-unused-vars
-            rippleClassName: className,
-            rippleCentered: centered, //eslint-disable-line no-unused-vars
-            rippleSpread: spread, //eslint-disable-line no-unused-vars
-            ...other
+            ripple, onRippleEnded, rippleCentered, rippleMultiple, rippleSpread, //eslint-disable-line no-unused-vars
+            children, rippleClassName: className, ...other
           } = this.props;
-
-          const rippleClassName = classnames(this.props.theme.ripple, {
-            [this.props.theme.rippleActive]: this.state.active,
-            [this.props.theme.rippleRestarting]: this.state.restarting
-          }, className);
-
-          const { left, top, width } = this.state;
-          const scale = this.state.restarting ? 0 : 1;
-          const rippleStyle = prefixer({
-              transform: `translate3d(${-width / 2 + left}px, ${-width / 2 + top}px, 0) scale(${scale})`
-            }, {width, height: width});
-
-          const rippleElement = (
-            <span data-react-toolbox='ripple' className={this.props.theme.rippleWrapper} {...props}>
-              <span ref='ripple' role='ripple' className={rippleClassName} style={rippleStyle} />
-            </span>
-          );
-
           return (
-            <ComposedComponent {...other} onMouseDown={this.handleMouseDown}>
+            <ComposedComponent {...other} onMouseDown={this.handleMouseDown} onTouchStart={this.handleTouchStart}>
               {children ? children : null}
-              {this.state.visible || this.state.active ? rippleElement : null}
+              {Object.keys(ripples).map(key => this.renderRipple(key, className, ripples[key]))}
             </ComposedComponent>
           );
         }
diff --git a/components/ripple/readme.md b/components/ripple/readme.md
index b7d723155..8b7f51aeb 100644
--- a/components/ripple/readme.md
+++ b/components/ripple/readme.md
@@ -1,6 +1,6 @@
 # Ripple
 
-The ripple is a surface reaction that happens when the user interacts with the component. It's useful to provide feedback about a click or touch action. In React Toolbox it's implemented as an higher order component (HOC) being a requirement for the child to implement `children` and `onMouseDown` props. Also it should be placed as relative. Hiding the overflow is up to you.
+The ripple is a surface reaction that happens when the user interacts with the component. It's useful to provide feedback about a click or touch action. In React Toolbox it's implemented as an higher order component (HOC) being a requirement for the child to implement `children`, `onMouseDown` and `onTouchStart` (in case you want to support touch) props. Also it should be placed as relative. Hiding the overflow is up to you.
 
 <!-- example -->
 ```jsx
@@ -17,18 +17,32 @@ const RippleLink = Ripple({spread: 3})(Link);
 const RippleTest = () => <RippleLink href='#' theme={theme}>Test</RippleLink>;
 ```
 
-## Properties
+## Options
 
-In any component you decorate with the Ripple you'd get some additional props:
+You can pass some options to configure the default props for the ripple when decorating a component:
 
 | Name            | Type        | Default     | Description|
 |:-----|:-----|:-----|:-----|
 | `centered`      | `Boolean`   | `false`     | True in case you want a centered ripple.|
 | `className`     | `String`    | `''`        | String to customize appearance (color and opacity for example).|
-| `onRippleEnded` | `Function`  |             | Function that will be called when the ripple animation ends. |
+| `multiple`      | `Boolean`   | `true`      | If true each touch produces a different wave. If false the same wave is restarted. |
 | `spread`        | `Number`    | `2`         | Factor to indicate how much should the ripple spread under the component.|
 | `theme`         | `Object`    | `null`      | Classnames object defining the ripple style.|
 
+## Properties
+
+In any component you decorate with the Ripple you'd get some additional props namespaced with `ripple` prefix. Some of them will get the default from the options given to the ripple factory function:
+
+| Name              | Type         | Default             | Description|
+|:-----|:-----|:-----|:-----|
+| `onRippleEnded`   | `Function`  |                     | Function that will be called when the ripple animation ends. |
+| `ripple`          | `Boolean`   | `true`              | False in case you want to deactivate the ripple.|
+| `rippleCentered`  | `Boolean`   | `options.centered`  | True in case you want a centered ripple.|
+| `rippleClassName` | `String`    | `options.className` | String to customize appearance (color and opacity for example).|
+| `rippleMultiple`  | `Boolean`   | `options.multiple`  | If true each touch produces a different wave. If false the same wave is restarted. |
+| `rippleSpread`    | `Number`    | `options.spread`    | Factor to indicate how much should the ripple spread under the component.|
+| `theme`           | `Object`    | `options.theme`     | Classnames object defining the ripple style.|
+
 ## Theming
 
 You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxRipple`, it should implement the following interface:
diff --git a/components/utils/events.js b/components/utils/events.js
index c149629c1..e885eb1fd 100644
--- a/components/utils/events.js
+++ b/components/utils/events.js
@@ -46,10 +46,10 @@ export default {
     return true;
   },
 
-  removeEventListenerOnTransitionEnded (element) {
+  removeEventListenerOnTransitionEnded (element, fn) {
     const eventName = transitionEventNamesFor(element);
     if (!eventName) return false;
-    element.removeEventListener(eventName, () => {});
+    element.removeEventListener(eventName, fn);
     return true;
   }
 };
diff --git a/package.json b/package.json
index b689532a8..3a6f084f4 100644
--- a/package.json
+++ b/package.json
@@ -78,6 +78,7 @@
     "react": "^15.2.0",
     "react-addons-css-transition-group": "^15.2.0",
     "react-addons-test-utils": "^15.0.2",
+    "react-addons-update": "^15.3.0",
     "react-docgen": "^2.8.2",
     "react-dom": "^15.2.0",
     "react-transform-catch-errors": "^1.0.2",
diff --git a/spec/components/button.js b/spec/components/button.js
index 97a69c070..1baabdb01 100644
--- a/spec/components/button.js
+++ b/spec/components/button.js
@@ -11,7 +11,7 @@ const ButtonTest = () => (
       <GithubIcon /> Github
     </Button>
     <Button icon='bookmark' label='Bookmark' accent onRippleEnded={rippleEnded} />
-    <Button icon='bookmark' label='Bookmark' raised primary />
+    <Button icon='bookmark' label='Bookmark' raised primary rippleMultiple={false} onRippleEnded={rippleEnded} />
     <Button icon='inbox' label='Inbox' flat />
     <Button icon='add' floating />
     <Button icon='add' floating primary />

From c01c025660acd68c8fd4aeefdf80e1958070d464 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 6 Aug 2016 14:31:16 +0200
Subject: [PATCH 0720/1024] Beware of the multiple onRippleEnded

---
 components/ripple/readme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/ripple/readme.md b/components/ripple/readme.md
index 8b7f51aeb..9f83d1814 100644
--- a/components/ripple/readme.md
+++ b/components/ripple/readme.md
@@ -35,7 +35,7 @@ In any component you decorate with the Ripple you'd get some additional props na
 
 | Name              | Type         | Default             | Description|
 |:-----|:-----|:-----|:-----|
-| `onRippleEnded`   | `Function`  |                     | Function that will be called when the ripple animation ends. |
+| `onRippleEnded`   | `Function`  |                     | Function that will be called when the ripple animation ends. Beware if your animation supports multiple waves this function will be called for each ended ripple. |
 | `ripple`          | `Boolean`   | `true`              | False in case you want to deactivate the ripple.|
 | `rippleCentered`  | `Boolean`   | `options.centered`  | True in case you want a centered ripple.|
 | `rippleClassName` | `String`    | `options.className` | String to customize appearance (color and opacity for example).|

From 50c5aeb8d33e2203026ddbf089638ec010306d35 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 6 Aug 2016 14:35:41 +0200
Subject: [PATCH 0721/1024] Latest build

---
 lib/date_picker/DatePicker.js |  20 ++-
 lib/date_picker/theme.scss    |   2 +-
 lib/input/theme.scss          |   4 +-
 lib/ripple/Ripple.js          | 305 +++++++++++++++++++++++++---------
 lib/table/Table.js            |  30 ++--
 lib/time_picker/TimePicker.js |  18 +-
 lib/time_picker/theme.scss    |   2 +-
 lib/utils/events.js           |   4 +-
 8 files changed, 268 insertions(+), 117 deletions(-)

diff --git a/lib/date_picker/DatePicker.js b/lib/date_picker/DatePicker.js
index 1956215cd..12dbe386b 100644
--- a/lib/date_picker/DatePicker.js
+++ b/lib/date_picker/DatePicker.js
@@ -80,6 +80,12 @@ var factory = function factory(Input, DatePickerDialog) {
         active: false
       }, _this.handleDismiss = function () {
         _this.setState({ active: false });
+      }, _this.handleInputFocus = function (event) {
+        _events2.default.pauseEvent(event);
+        _this.setState({ active: true });
+      }, _this.handleInputBlur = function (event) {
+        _events2.default.pauseEvent(event);
+        _this.setState({ active: false });
       }, _this.handleInputMouseDown = function (event) {
         _events2.default.pauseEvent(event);
         _this.setState({ active: true });
@@ -106,9 +112,10 @@ var factory = function factory(Input, DatePickerDialog) {
         var minDate = _props.minDate;
         var onEscKeyDown = _props.onEscKeyDown;
         var onOverlayClick = _props.onOverlayClick;
+        var readonly = _props.readonly;
         var value = _props.value;
 
-        var others = _objectWithoutProperties(_props, ['autoOk', 'inputClassName', 'inputFormat', 'maxDate', 'minDate', 'onEscKeyDown', 'onOverlayClick', 'value']);
+        var others = _objectWithoutProperties(_props, ['autoOk', 'inputClassName', 'inputFormat', 'maxDate', 'minDate', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'value']);
 
         var finalInputFormat = inputFormat || _time2.default.formatDate;
         var date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined;
@@ -119,14 +126,16 @@ var factory = function factory(Input, DatePickerDialog) {
           { 'data-react-toolbox': 'date-picker' },
           _react2.default.createElement(Input, _extends({}, others, {
             className: (0, _classnames3.default)(this.props.theme.input, _defineProperty({}, inputClassName, inputClassName)),
+            disabled: readonly,
             error: this.props.error,
-            onMouseDown: this.handleInputMouseDown,
-            onKeyPress: this.handleInputKeyPress,
-            name: this.props.name,
+            icon: this.props.icon,
             label: this.props.label,
+            name: this.props.name,
+            onFocus: this.handleInputFocus,
+            onKeyPress: this.handleInputKeyPress,
+            onMouseDown: this.handleInputMouseDown,
             readOnly: true,
             type: 'text',
-            icon: this.props.icon,
             value: formattedDate
           })),
           _react2.default.createElement(DatePickerDialog, {
@@ -165,6 +174,7 @@ var factory = function factory(Input, DatePickerDialog) {
     onEscKeyDown: _react.PropTypes.func,
     onKeyPress: _react.PropTypes.func,
     onOverlayClick: _react.PropTypes.func,
+    readonly: _react.PropTypes.bool,
     theme: _react.PropTypes.shape({
       input: _react.PropTypes.string
     }),
diff --git a/lib/date_picker/theme.scss b/lib/date_picker/theme.scss
index 81464ef57..ef3c6b67f 100644
--- a/lib/date_picker/theme.scss
+++ b/lib/date_picker/theme.scss
@@ -3,7 +3,7 @@
 @import "http://github.com/mixins";
 @import "http://github.com/config";
 
-.input > [role="input"] {
+.input:not(.disabled) > .inputElement {
   cursor: pointer;
 }
 
diff --git a/lib/input/theme.scss b/lib/input/theme.scss
index 739de903e..b6b6c8130 100644
--- a/lib/input/theme.scss
+++ b/lib/input/theme.scss
@@ -35,7 +35,7 @@
   border: 0;
   border-bottom: 1px solid $input-text-bottom-border-color;
   outline: none;
-  &:focus {
+  &:focus:not([disabled]):not([readonly]) {
     ~ .bar:before, ~ .bar:after {
       width: 50%;
     }
@@ -52,7 +52,7 @@
       color: $input-text-highlight-color;
     }
   }
-  &:focus, &.filled, &[type="date"], &[type="time"] {
+  &:focus:not([disabled]):not([readonly]), &.filled, &[type="date"], &[type="time"] {
     ~ .label:not(.fixed) {
       top: $input-focus-label-top;
       font-size: $input-label-font-size;
diff --git a/lib/ripple/Ripple.js b/lib/ripple/Ripple.js
index c8fbc3564..26e2483d8 100644
--- a/lib/ripple/Ripple.js
+++ b/lib/ripple/Ripple.js
@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
+
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -20,6 +22,10 @@ var _classnames2 = require('classnames');
 
 var _classnames3 = _interopRequireDefault(_classnames2);
 
+var _reactAddonsUpdate = require('react-addons-update');
+
+var _reactAddonsUpdate2 = _interopRequireDefault(_reactAddonsUpdate);
+
 var _reactCssThemr = require('react-css-themr');
 
 var _identifiers = require('../identifiers.js');
@@ -47,6 +53,7 @@ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in ob
 var defaults = {
   centered: false,
   className: '',
+  multiple: true,
   spread: 2,
   theme: {}
 };
@@ -58,10 +65,11 @@ var rippleFactory = function rippleFactory() {
 
   var defaultCentered = _defaults$options.centered;
   var defaultClassName = _defaults$options.className;
+  var defaultMultiple = _defaults$options.multiple;
   var defaultSpread = _defaults$options.spread;
   var defaultTheme = _defaults$options.theme;
 
-  var props = _objectWithoutProperties(_defaults$options, ['centered', 'className', 'spread', 'theme']);
+  var props = _objectWithoutProperties(_defaults$options, ['centered', 'className', 'multiple', 'spread', 'theme']);
 
   return function (ComposedComponent) {
     var RippledComponent = function (_Component) {
@@ -79,66 +87,130 @@ var rippleFactory = function rippleFactory() {
         }
 
         return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(RippledComponent)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
-          active: false,
-          left: null,
-          restarting: false,
-          top: null,
-          width: null
-        }, _this.handleEnd = function () {
-          document.removeEventListener(_this.touch ? 'touchend' : 'mouseup', _this.handleEnd);
-          _this.setState({ active: false });
-        }, _this.start = function (_ref) {
-          var pageX = _ref.pageX;
-          var pageY = _ref.pageY;
-          var touch = arguments.length <= 1 || arguments[1] === undefined ? false : arguments[1];
-
-          if (!_this._isTouchRippleReceivingMouseEvent(touch)) {
-            _this.touch = touch;
-            document.addEventListener(_this.touch ? 'touchend' : 'mouseup', _this.handleEnd);
-
-            var _this$_getDescriptor = _this._getDescriptor(pageX, pageY);
-
-            var top = _this$_getDescriptor.top;
-            var left = _this$_getDescriptor.left;
-            var width = _this$_getDescriptor.width;
-
-            _this.setState({ active: false, restarting: true, top: top, left: left, width: width }, function () {
-              _this.refs.ripple.offsetWidth; //eslint-disable-line no-unused-expressions
-              _this.setState({ active: true, restarting: false });
-            });
-          }
+          ripples: {}
         }, _this.handleMouseDown = function (event) {
-          if (!_this.props.disabled) _this.start(event);
           if (_this.props.onMouseDown) _this.props.onMouseDown(event);
+          if (!_this.props.disabled) {
+            var _events$getMousePosit = _events2.default.getMousePosition(event);
+
+            var x = _events$getMousePosit.x;
+            var y = _events$getMousePosit.y;
+
+            _this.animateRipple(x, y, false);
+          }
+        }, _this.handleTouchStart = function (event) {
+          if (_this.props.onTouchStart) _this.props.onTouchStart(event);
+          if (!_this.props.disabled) {
+            var _events$getTouchPosit = _events2.default.getTouchPosition(event);
+
+            var x = _events$getTouchPosit.x;
+            var y = _events$getTouchPosit.y;
+
+            _this.animateRipple(x, y, true);
+          }
         }, _temp), _possibleConstructorReturn(_this, _ret);
       }
 
       _createClass(RippledComponent, [{
-        key: 'componentDidMount',
-        value: function componentDidMount() {
-          var _this2 = this;
-
-          if (this.props.onRippleEnded) {
-            _events2.default.addEventListenerOnTransitionEnded(this.refs.ripple, function (evt) {
-              if (evt.propertyName === 'transform') _this2.props.onRippleEnded(evt);
-            });
+        key: 'componentDidUpdate',
+        value: function componentDidUpdate(prevProps, prevState) {
+          // If a new ripple was just added, add a remove event listener to its animation
+          if (Object.keys(prevState.ripples).length < Object.keys(this.state.ripples).length) {
+            this.addRippleRemoveEventListener(this.getLastKey());
           }
         }
+
+        /**
+         * Add an event listener to the reference with given key so when the animation transition
+         * ends we can be sure that it finished and it can be safely removed from the state.
+         * This function is called whenever a new ripple is added to the component.
+         *
+         * @param {String} rippleKey Is the key of the ripple to add the event.
+         */
+
+      }, {
+        key: 'addRippleRemoveEventListener',
+        value: function addRippleRemoveEventListener(rippleKey) {
+          var self = this;
+          _events2.default.addEventListenerOnTransitionEnded(this.refs[rippleKey], function onOpacityEnd(e) {
+            if (e.propertyName === 'opacity') {
+              if (self.props.onRippleEnded) self.props.onRippleEnded(e);
+              _events2.default.removeEventListenerOnTransitionEnded(self.refs[rippleKey], onOpacityEnd);
+              self.setState({ ripples: (0, _reactAddonsUpdate2.default)(self.state.ripples, _defineProperty({}, rippleKey, { $apply: function $apply(ripplesState) {
+                    delete ripplesState[rippleKey];
+                    return ripplesState;
+                  } })) });
+            }
+          });
+        }
+
+        /**
+         * Start a ripple animation on an specific point with touch or mouse events. First
+         * decides if the animation should trigger. If the ripple is multiple or there is no
+         * ripple present, it creates a new key. If it's a simple ripple and already exists,
+         * it just restarts the current ripple. The animation happens in two state changes
+         * to allow triggering via css.
+         *
+         * @param {Number} x Coordinate X on the screen where animation should start
+         * @param {Number} y Coordinate Y on the screen where animation should start
+         * @param {Boolean} isTouch Use events from touch or mouse.
+         */
+
       }, {
-        key: 'componentWillUnmount',
-        value: function componentWillUnmount() {
-          if (this.props.onRippleEnded) {
-            _events2.default.removeEventListenerOnTransitionEnded(this.refs.ripple);
+        key: 'animateRipple',
+        value: function animateRipple(x, y, isTouch) {
+          var _this2 = this;
+
+          if (this.rippleShouldTrigger(isTouch)) {
+            (function () {
+              var _getDescriptor = _this2.getDescriptor(x, y);
+
+              var top = _getDescriptor.top;
+              var left = _getDescriptor.left;
+              var width = _getDescriptor.width;
+
+              var noRipplesActive = Object.keys(_this2.state.ripples).length === 0;
+              var key = _this2.props.rippleMultiple || noRipplesActive ? _this2.getNextKey() : _this2.getLastKey();
+              var initialState = { active: false, restarting: true, top: top, left: left, width: width };
+              var runningState = { active: true, restarting: false };
+              _this2.addRippleDeactivateEventListener(isTouch, key);
+              _this2.setState((0, _reactAddonsUpdate2.default)(_this2.state, { ripples: _defineProperty({}, key, { $set: initialState }) }), function () {
+                _this2.refs[key].offsetWidth; //eslint-disable-line no-unused-expressions
+                _this2.setState((0, _reactAddonsUpdate2.default)(_this2.state, { ripples: _defineProperty({}, key, { $merge: runningState }) }));
+              });
+            })();
           }
         }
+
+        /**
+         * Determine if a ripple should start depending if its a touch event. For mobile both
+         * touchStart and mouseDown are launched so in case is touch we should always trigger
+         * but if its not we should check if a touch was already triggered to decide.
+         *
+         * @param {Boolean} isTouch True in case a touch event triggered the ripple false otherwise.
+         * @return {Boolean} True in case the ripple should trigger or false if it shouldn't.
+         */
+
       }, {
-        key: '_isTouchRippleReceivingMouseEvent',
-        value: function _isTouchRippleReceivingMouseEvent(touch) {
-          return this.touch && !touch;
+        key: 'rippleShouldTrigger',
+        value: function rippleShouldTrigger(isTouch) {
+          var shouldStart = isTouch ? true : !this.touchCache;
+          this.touchCache = isTouch;
+          return shouldStart;
         }
+
+        /**
+         * Find out a descriptor object for the ripple element being created depending on
+         * the position where the it was triggered and the component's dimensions.
+         *
+         * @param {Number} x Coordinate x in the viewport where ripple was triggered
+         * @param {Number} y Coordinate y in the viewport where ripple was triggered
+         * @return {Object} Descriptor element including position and size of the element
+         */
+
       }, {
-        key: '_getDescriptor',
-        value: function _getDescriptor(pageX, pageY) {
+        key: 'getDescriptor',
+        value: function getDescriptor(x, y) {
           var _ReactDOM$findDOMNode = _reactDom2.default.findDOMNode(this).getBoundingClientRect();
 
           var left = _ReactDOM$findDOMNode.left;
@@ -150,51 +222,116 @@ var rippleFactory = function rippleFactory() {
           var spread = _props.rippleSpread;
 
           return {
-            left: centered ? 0 : pageX - left - width / 2 - window.pageXOffset,
-            top: centered ? 0 : pageY - top - height / 2 - window.pageYOffset,
+            left: centered ? 0 : x - left - width / 2,
+            top: centered ? 0 : y - top - height / 2,
             width: width * spread
           };
         }
+
+        /**
+         * Increments and internal counter and returns the next value as a string. It
+         * is used to assign key references to new ripple elements.
+         *
+         * @return {String} Key to be assigned to a ripple.
+         */
+
+      }, {
+        key: 'getNextKey',
+        value: function getNextKey() {
+          this.currentCount = this.currentCount ? this.currentCount + 1 : 1;
+          return this.currentCount.toString();
+        }
+
+        /**
+         * Return the last generated key for a ripple element. When there is only one ripple
+         * and to get the reference when a ripple was just created.
+         *
+         * @return {String} The last generated ripple key.
+         */
+
+      }, {
+        key: 'getLastKey',
+        value: function getLastKey() {
+          return this.currentCount.toString();
+        }
+
+        /**
+         * Add an event listener to the document needed deactivate a ripple and make it dissappear.
+         * Deactivation can happen with a touchend or mouseup depending on the trigger type.
+         *
+         * @param {Boolean} isTouch True in case the trigger was a touch event false otherwise.
+         * @param {String} rippleKey It's a key to identify the ripple that should be deactivated.
+         */
+
+      }, {
+        key: 'addRippleDeactivateEventListener',
+        value: function addRippleDeactivateEventListener(isTouch, rippleKey) {
+          var self = this;
+          var eventType = isTouch ? 'touchend' : 'mouseup';
+          document.addEventListener(eventType, function endRipple() {
+            document.removeEventListener(eventType, endRipple);
+            self.setState({ ripples: (0, _reactAddonsUpdate2.default)(self.state.ripples, _defineProperty({}, rippleKey, { $merge: { active: false } })) });
+          });
+        }
+      }, {
+        key: 'renderRipple',
+        value: function renderRipple(key, className, _ref) {
+          var _classnames;
+
+          var active = _ref.active;
+          var left = _ref.left;
+          var restarting = _ref.restarting;
+          var top = _ref.top;
+          var width = _ref.width;
+
+          var scale = restarting ? 0 : 1;
+          var transform = 'translate3d(' + (-width / 2 + left) + 'px, ' + (-width / 2 + top) + 'px, 0) scale(' + scale + ')';
+          var _className = (0, _classnames3.default)(this.props.theme.ripple, (_classnames = {}, _defineProperty(_classnames, this.props.theme.rippleActive, active), _defineProperty(_classnames, this.props.theme.rippleRestarting, restarting), _classnames), className);
+          return _react2.default.createElement(
+            'span',
+            _extends({ key: key, 'data-react-toolbox': 'ripple', className: this.props.theme.rippleWrapper }, props),
+            _react2.default.createElement('span', {
+              role: 'ripple',
+              ref: key,
+              className: _className,
+              style: (0, _prefixer2.default)({ transform: transform }, { width: width, height: width })
+            })
+          );
+        }
       }, {
         key: 'render',
         value: function render() {
+          var _this3 = this;
+
           if (!this.props.ripple) {
             return _react2.default.createElement(ComposedComponent, this.props);
           } else {
-            var _classnames;
-
-            var _props2 = this.props;
-            var children = _props2.children;
-            var ripple = _props2.ripple;
-            var onRippleEnded = _props2.onRippleEnded;
-            var className = _props2.rippleClassName;
-            var centered = _props2.rippleCentered;
-            var spread = _props2.rippleSpread;
-
-            var other = _objectWithoutProperties(_props2, ['children', 'ripple', 'onRippleEnded', 'rippleClassName', 'rippleCentered', 'rippleSpread']);
-
-            var rippleClassName = (0, _classnames3.default)(this.props.theme.ripple, (_classnames = {}, _defineProperty(_classnames, this.props.theme.rippleActive, this.state.active), _defineProperty(_classnames, this.props.theme.rippleRestarting, this.state.restarting), _classnames), className);
-
-            var _state = this.state;
-            var left = _state.left;
-            var top = _state.top;
-            var width = _state.width;
-
-            var scale = this.state.restarting ? 0 : 1;
-            var rippleStyle = (0, _prefixer2.default)({
-              transform: 'translate3d(' + (-width / 2 + left) + 'px, ' + (-width / 2 + top) + 'px, 0) scale(' + scale + ')'
-            }, { width: width, height: width });
-
-            return _react2.default.createElement(
-              ComposedComponent,
-              _extends({}, other, { onMouseDown: this.handleMouseDown }),
-              children ? children : null,
-              _react2.default.createElement(
-                'span',
-                _extends({ 'data-react-toolbox': 'ripple', className: this.props.theme.rippleWrapper }, props),
-                _react2.default.createElement('span', { ref: 'ripple', role: 'ripple', className: rippleClassName, style: rippleStyle })
-              )
-            );
+            var _ret3 = function () {
+              var ripples = _this3.state.ripples;
+              var _props2 = _this3.props;
+              var ripple = _props2.ripple;
+              var onRippleEnded = _props2.onRippleEnded;
+              var rippleCentered = _props2.rippleCentered;
+              var rippleMultiple = _props2.rippleMultiple;
+              var rippleSpread = _props2.rippleSpread;
+              var children = _props2.children;
+              var className = _props2.rippleClassName;
+
+              var other = _objectWithoutProperties(_props2, ['ripple', 'onRippleEnded', 'rippleCentered', 'rippleMultiple', 'rippleSpread', 'children', 'rippleClassName']);
+
+              return {
+                v: _react2.default.createElement(
+                  ComposedComponent,
+                  _extends({}, other, { onMouseDown: _this3.handleMouseDown, onTouchStart: _this3.handleTouchStart }),
+                  children ? children : null,
+                  Object.keys(ripples).map(function (key) {
+                    return _this3.renderRipple(key, className, ripples[key]);
+                  })
+                )
+              };
+            }();
+
+            if ((typeof _ret3 === 'undefined' ? 'undefined' : _typeof(_ret3)) === "object") return _ret3.v;
           }
         }
       }]);
@@ -209,6 +346,7 @@ var rippleFactory = function rippleFactory() {
       ripple: _react.PropTypes.bool,
       rippleCentered: _react.PropTypes.bool,
       rippleClassName: _react.PropTypes.string,
+      rippleMultiple: _react.PropTypes.bool,
       rippleSpread: _react.PropTypes.number,
       theme: _react.PropTypes.shape({
         ripple: _react.PropTypes.string,
@@ -222,6 +360,7 @@ var rippleFactory = function rippleFactory() {
       ripple: true,
       rippleCentered: defaultCentered,
       rippleClassName: defaultClassName,
+      rippleMultiple: defaultMultiple,
       rippleSpread: defaultSpread
     };
 
diff --git a/lib/table/Table.js b/lib/table/Table.js
index a3055289f..addc42c95 100644
--- a/lib/table/Table.js
+++ b/lib/table/Table.js
@@ -33,8 +33,6 @@ var _TableRow2 = _interopRequireDefault(_TableRow);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
@@ -69,22 +67,18 @@ var factory = function factory(TableHead, TableRow) {
         }
       }, _this.handleRowSelect = function (index) {
         if (_this.props.onSelect) {
-          (function () {
-            var position = _this.props.selected.indexOf(index);
-            var newSelected = [].concat(_toConsumableArray(_this.props.selected));
-            if (position !== -1) {
-              newSelected = newSelected.filter(function (el, idx) {
-                return idx != position;
-              });
-            } else {
-              if (_this.props.multiSelectable) {
-                newSelected.push(index);
-              } else {
-                newSelected = [index];
-              }
-            }
-            _this.props.onSelect(newSelected);
-          })();
+          var newSelection = [];
+          if (_this.props.multiSelectable) {
+            (function () {
+              var position = _this.props.selected.indexOf(index);
+              newSelection = _this.props.selected.indexOf(index) !== -1 ? _this.props.selected.filter(function (el, idx) {
+                return idx !== position;
+              }) : newSelection.concat([index]);
+            })();
+          } else {
+            newSelection = [index];
+          }
+          _this.props.onSelect(newSelection);
         }
       }, _this.handleRowChange = function (index, key, value) {
         if (_this.props.onChange) {
diff --git a/lib/time_picker/TimePicker.js b/lib/time_picker/TimePicker.js
index eaa7bae38..13849a51d 100644
--- a/lib/time_picker/TimePicker.js
+++ b/lib/time_picker/TimePicker.js
@@ -72,6 +72,12 @@ var factory = function factory(TimePickerDialog, Input) {
         active: false
       }, _this.handleDismiss = function () {
         _this.setState({ active: false });
+      }, _this.handleInputFocus = function (event) {
+        _events2.default.pauseEvent(event);
+        _this.setState({ active: true });
+      }, _this.handleInputBlur = function (event) {
+        _events2.default.pauseEvent(event);
+        _this.setState({ active: false });
       }, _this.handleInputMouseDown = function (event) {
         _events2.default.pauseEvent(event);
         _this.setState({ active: true });
@@ -96,21 +102,22 @@ var factory = function factory(TimePickerDialog, Input) {
         var inputClassName = _props.inputClassName;
         var onEscKeyDown = _props.onEscKeyDown;
         var onOverlayClick = _props.onOverlayClick;
-        var theme = _props.theme;
+        var readonly = _props.readonly;
 
-        var others = _objectWithoutProperties(_props, ['value', 'format', 'inputClassName', 'onEscKeyDown', 'onOverlayClick', 'theme']);
+        var others = _objectWithoutProperties(_props, ['value', 'format', 'inputClassName', 'onEscKeyDown', 'onOverlayClick', 'readonly']);
 
         var formattedTime = value ? _time2.default.formatTime(value, format) : '';
         return _react2.default.createElement(
           'div',
           { 'data-react-toolbox': 'time-picker' },
           _react2.default.createElement(Input, _extends({}, others, {
-            className: (0, _classnames3.default)(theme.input, _defineProperty({}, inputClassName, inputClassName)),
+            className: (0, _classnames3.default)(this.props.theme.input, _defineProperty({}, inputClassName, inputClassName)),
+            disabled: readonly,
             error: this.props.error,
-            name: this.props.name,
             label: this.props.label,
-            onMouseDown: this.handleInputMouseDown,
+            name: this.props.name,
             onKeyPress: this.handleInputKeyPress,
+            onMouseDown: this.handleInputMouseDown,
             readOnly: true,
             type: 'text',
             value: formattedTime
@@ -145,6 +152,7 @@ var factory = function factory(TimePickerDialog, Input) {
     onEscKeyDown: _react.PropTypes.func,
     onKeyPress: _react.PropTypes.func,
     onOverlayClick: _react.PropTypes.func,
+    readonly: _react.PropTypes.bool,
     theme: _react.PropTypes.shape({
       input: _react.PropTypes.string
     }),
diff --git a/lib/time_picker/theme.scss b/lib/time_picker/theme.scss
index 297982895..328cdc43e 100644
--- a/lib/time_picker/theme.scss
+++ b/lib/time_picker/theme.scss
@@ -3,7 +3,7 @@
 @import "http://github.com/mixins";
 @import "http://github.com/config";
 
-.input > [role="input"] {
+.input:not(.disabled) > .inputElement {
   cursor: pointer;
 }
 
diff --git a/lib/utils/events.js b/lib/utils/events.js
index 87e42c565..6e5978dec 100644
--- a/lib/utils/events.js
+++ b/lib/utils/events.js
@@ -44,10 +44,10 @@ exports.default = {
     element.addEventListener(eventName, fn);
     return true;
   },
-  removeEventListenerOnTransitionEnded: function removeEventListenerOnTransitionEnded(element) {
+  removeEventListenerOnTransitionEnded: function removeEventListenerOnTransitionEnded(element, fn) {
     var eventName = transitionEventNamesFor(element);
     if (!eventName) return false;
-    element.removeEventListener(eventName);
+    element.removeEventListener(eventName, fn);
     return true;
   }
 };

From ea3917e10c670b11b34cb20e8971bb3f3cb31702 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 6 Aug 2016 18:30:08 +0200
Subject: [PATCH 0722/1024] Change method name to match lib convention

---
 components/input/Input.js | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/components/input/Input.js b/components/input/Input.js
index 977686656..b0e4b70a0 100644
--- a/components/input/Input.js
+++ b/components/input/Input.js
@@ -105,15 +105,7 @@ const factory = (FontIcon) => {
       element.style.height = `${element.scrollHeight + heightOffset}px`;
     }
 
-    blur () {
-      this.refs.input.blur();
-    }
-
-    focus () {
-      this.refs.input.focus();
-    }
-
-    onKeyPress = (event) => {
+    handleKeyPress = (event) => {
       // prevent insertion of more characters if we're a multiline input
       // and maxLength exists
       const { multiline, maxLength, onKeyPress } = this.props;
@@ -132,6 +124,14 @@ const factory = (FontIcon) => {
       }
 
       if (onKeyPress) onKeyPress(event);
+    };
+
+    blur () {
+      this.refs.input.blur();
+    }
+
+    focus () {
+      this.refs.input.focus();
     }
 
     render () {
@@ -170,14 +170,12 @@ const factory = (FontIcon) => {
         inputElementProps.onKeyPress = onKeyPress;
       } else {
         inputElementProps.rows = 1;
-        inputElementProps.onKeyPress = this.onKeyPress;
+        inputElementProps.onKeyPress = this.handleKeyPress;
       }
 
-      const InputElement = React.createElement(multiline ? 'textarea' : 'input', inputElementProps);
-
       return (
         <div data-react-toolbox='input' className={className}>
-          {InputElement}
+          {React.createElement(multiline ? 'textarea' : 'input', inputElementProps)}
           {icon ? <FontIcon className={theme.icon} value={icon} /> : null}
           <span className={theme.bar}></span>
           {labelText

From 730d4c1fcc417abf571cbc8dfa174b5bb3487dae Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 6 Aug 2016 18:32:31 +0200
Subject: [PATCH 0723/1024] Fixes #678

---
 components/identifiers.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/identifiers.js b/components/identifiers.js
index 44c4ae239..fa5902dc6 100644
--- a/components/identifiers.js
+++ b/components/identifiers.js
@@ -24,4 +24,4 @@ export const SWITCH = 'RTSwitch';
 export const TABLE = 'RTTable';
 export const TABS = 'RTTabs';
 export const TOOLTIP = 'RTTooltip';
-export const TIMEPICKER = 'RTTimePicker';
+export const TIME_PICKER = 'RTTimePicker';

From 40934393ab718bd9af77b34e516e410c6a112048 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 6 Aug 2016 19:28:30 +0200
Subject: [PATCH 0724/1024] Change name from create to allowCreate in
 Autocomplete and fix linter warnings

---
 components/autocomplete/Autocomplete.js | 11 ++++++-----
 components/autocomplete/readme.md       |  2 +-
 spec/components/autocomplete.js         | 12 ++++++------
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index bd46a8429..4c21a6dea 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -16,6 +16,7 @@ const POSITION = {
 const factory = (Chip, Input) => {
   class Autocomplete extends Component {
    static propTypes = {
+     allowCreate: PropTypes.bool,
      className: PropTypes.string,
      direction: PropTypes.oneOf(['auto', 'up', 'down']),
      disabled: PropTypes.bool,
@@ -27,7 +28,6 @@ const factory = (Chip, Input) => {
      showSuggestionsWhenValueIsSet: PropTypes.bool,
      source: PropTypes.any,
      suggestionMatch: PropTypes.oneOf(['start', 'anywhere', 'word']),
-     create: PropTypes.bool,
      theme: PropTypes.shape({
        active: PropTypes.string,
        autocomplete: PropTypes.string,
@@ -44,6 +44,7 @@ const factory = (Chip, Input) => {
    };
 
    static defaultProps = {
+     allowCreate: false,
      className: '',
      direction: 'auto',
      selectedPosition: 'above',
@@ -118,7 +119,7 @@ const factory = (Chip, Input) => {
        let target = this.state.active;
        if (!target) {
          target = [...this.suggestions().keys()][0];
-         if (this.props.create && !target){
+         if (!target && this.props.allowCreate) {
            target = this.state.query;
          }
          this.setState({active: target});
@@ -274,9 +275,9 @@ const factory = (Chip, Input) => {
 
    render () {
      const {
-      error, label, source, suggestionMatch,           //eslint-disable-line no-unused-vars
-      selectedPosition, showSuggestionsWhenValueIsSet, //eslint-disable-line no-unused-vars
-      theme, create, ...other
+      allowCreate, error, label, source, suggestionMatch, //eslint-disable-line no-unused-vars
+      selectedPosition, showSuggestionsWhenValueIsSet,    //eslint-disable-line no-unused-vars
+      theme, ...other
     } = this.props;
      const className = classnames(theme.autocomplete, {
        [theme.focus]: this.state.focus
diff --git a/components/autocomplete/readme.md b/components/autocomplete/readme.md
index 57251c2f5..ecd4ef0e2 100644
--- a/components/autocomplete/readme.md
+++ b/components/autocomplete/readme.md
@@ -43,6 +43,7 @@ If you want to provide a theme via context, the component key is `RTAutocomplete
 
 | Name                | Type                   | Default         | Description|
 |:-----|:-----|:-----|:-----|
+| `allowCreate`       | `Bool`                 | `false`         | Determines if user can create a new option with the current typed value |
 | `className`         | `String`               | `''`            | Sets a class to style of the Component.|
 | `direction`         | `String`               |  `auto`         | Determines the opening direction. It can be `auto`, `top` or `bottom`.|
 | `disabled`          | `Bool`                 |  `false`        | If true, component will be disabled.|
@@ -55,7 +56,6 @@ If you want to provide a theme via context, the component key is `RTAutocomplete
 | `showSuggestionsWhenValueIsSet` | `Bool`     | `false`         | If true, the list of suggestions will not be filtered when a value is selected, until the query is modified. |
 | `suggestionMatch`   | `String`               | `start`         | Determines how suggestions are supplied. It can be `start` (query matches the start of a suggestion), `anywhere` (query matches anywhere inside the suggestion), or `word` (query matches the start of a word in the suggestion). |
 | `value`             | `String` or `Array`    |                 | Value or array of values currently selected component.|
-| `create`            | `Bool`  | `false` | Determines if user can create a new option by typing in the field
 
 Additional properties will be passed to the Input Component so you can use `hint`, `name` ... etc.
 
diff --git a/spec/components/autocomplete.js b/spec/components/autocomplete.js
index 9ed6f10d7..6045ad1ee 100644
--- a/spec/components/autocomplete.js
+++ b/spec/components/autocomplete.js
@@ -36,17 +36,17 @@ class AutocompleteTest extends React.Component {
         <p>You can have a multiple or simple autocomplete.</p>
 
         <Autocomplete
-          onChange={this.handleMultipleChange}
+          allowCreate
           label="Pick multiple elements..."
+          onChange={this.handleMultipleChange}
           source={this.state.countriesObject}
-          value={this.state.multiple}
           suggestionMatch="anywhere"
-          create={true}
+          value={this.state.multiple}
         />
 
         <Autocomplete
-          label="Choose a country"
           hint="Elements up to you..."
+          label="Choose a country"
           multiple={false}
           onChange={this.handleSimpleChange}
           source={this.state.countriesArray}
@@ -54,13 +54,13 @@ class AutocompleteTest extends React.Component {
         />
 
         <Autocomplete
-          label="Choose a country (showing all suggestions)"
           hint="Elements up to you..."
+          label="Choose a country (showing all suggestions)"
           multiple={false}
           onChange={this.handleSimpleShowAllChange}
+          showSuggestionsWhenValueIsSet
           source={this.state.countriesArray}
           value={this.state.simpleShowAll}
-          showSuggestionsWhenValueIsSet
         />
       </section>
     );

From fd138f971621065bc14b292b9e59208fc3dc1760 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 6 Aug 2016 20:04:16 +0200
Subject: [PATCH 0725/1024] Fixes #674

---
 components/dropdown/Dropdown.js | 1 +
 components/dropdown/theme.scss  | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/dropdown/Dropdown.js b/components/dropdown/Dropdown.js
index d77a02c04..755875a00 100644
--- a/components/dropdown/Dropdown.js
+++ b/components/dropdown/Dropdown.js
@@ -156,6 +156,7 @@ const factory = (Input) => {
             className={theme.value}
             onMouseDown={this.handleMouseDown}
             readOnly
+            theme={theme}
             type={template && selected ? 'hidden' : null}
             value={selected && selected.label ? selected.label : ''}
           />
diff --git a/components/dropdown/theme.scss b/components/dropdown/theme.scss
index a128b2cdc..874ca849d 100644
--- a/components/dropdown/theme.scss
+++ b/components/dropdown/theme.scss
@@ -37,7 +37,7 @@
 }
 
 .value {
-  > input {
+  > .inputElement {
     cursor: pointer;
   }
   &:after {

From 991da710cfcf2b18bf96a3af18e7abf335a4ea75 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 6 Aug 2016 20:40:24 +0200
Subject: [PATCH 0726/1024] Fixes #671

---
 components/ripple/Ripple.js | 38 ++++++++++++++++++++++++++++++-------
 1 file changed, 31 insertions(+), 7 deletions(-)

diff --git a/components/ripple/Ripple.js b/components/ripple/Ripple.js
index 496b8ce9a..bc17b4081 100644
--- a/components/ripple/Ripple.js
+++ b/components/ripple/Ripple.js
@@ -64,6 +64,13 @@ const rippleFactory = (options = {}) => {
         }
       }
 
+      componentWillUnmount () {
+        // Remove document event listeners for ripple if they still exists
+        Object.keys(this.state.ripples).forEach(key => {
+          this.state.ripples[key].endRipple();
+        });
+      }
+
       /**
        * Add an event listener to the reference with given key so when the animation transition
        * ends we can be sure that it finished and it can be safely removed from the state.
@@ -103,9 +110,9 @@ const rippleFactory = (options = {}) => {
           const { top, left, width } = this.getDescriptor(x, y);
           const noRipplesActive = Object.keys(this.state.ripples).length === 0;
           const key = this.props.rippleMultiple || noRipplesActive ? this.getNextKey() : this.getLastKey();
-          const initialState = { active: false, restarting: true, top, left, width };
+          const endRipple = this.addRippleDeactivateEventListener(isTouch, key);
+          const initialState = { active: false, restarting: true, top, left, width, endRipple };
           const runningState = { active: true, restarting: false };
-          this.addRippleDeactivateEventListener(isTouch, key);
           this.setState(update(this.state, { ripples: { [key]: { $set: initialState } } }), () => {
             this.refs[key].offsetWidth; //eslint-disable-line no-unused-expressions
             this.setState(update(this.state, { ripples: { [key]: { $merge: runningState } } }));
@@ -167,21 +174,38 @@ const rippleFactory = (options = {}) => {
       }
 
       /**
-       * Add an event listener to the document needed deactivate a ripple and make it dissappear.
-       * Deactivation can happen with a touchend or mouseup depending on the trigger type.
+       * Add an event listener to the document needed to deactivate a ripple and make it dissappear.
+       * Deactivation can happen with a touchend or mouseup depending on the trigger type. The
+       * ending function is created from a factory function and returned.
        *
        * @param {Boolean} isTouch True in case the trigger was a touch event false otherwise.
        * @param {String} rippleKey It's a key to identify the ripple that should be deactivated.
+       * @return {Function} Callback function that deactivates the ripple and removes the event listener
        */
       addRippleDeactivateEventListener (isTouch, rippleKey) {
-        const self = this;
         const eventType = isTouch ? 'touchend' : 'mouseup';
-        document.addEventListener(eventType, function endRipple () {
+        const endRipple = this.createRippleDeactivateCallback(eventType, rippleKey);
+        document.addEventListener(eventType, endRipple);
+        return endRipple;
+      }
+
+      /**
+       * Generates a function that can be called to deactivate a given ripple and remove its finishing
+       * event listener. If is generated because we need to store it to be called on unmount in case
+       * the ripple is still running.
+       *
+       * @param {String} eventType Is the event type that can be touchend or mouseup
+       * @param {String} rippleKey Is the key representing the ripple
+       * @return {Function} Callback function that deactivates the ripple and removes the listener
+       */
+      createRippleDeactivateCallback (eventType, rippleKey) {
+        const self = this;
+        return function endRipple () {
           document.removeEventListener(eventType, endRipple);
           self.setState({ ripples: update(self.state.ripples, {
             [rippleKey]: { $merge: { active: false } }
           }) });
-        });
+        };
       }
 
       handleMouseDown = (event) => {

From 57bb663e94413ec6926a07ec33363b9af6f26d2a Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 6 Aug 2016 21:18:44 +0200
Subject: [PATCH 0727/1024] Latest build

---
 lib/autocomplete/Autocomplete.js | 12 +++---
 lib/dropdown/Dropdown.js         |  1 +
 lib/dropdown/theme.scss          |  2 +-
 lib/identifiers.js               |  2 +-
 lib/input/Input.js               |  8 ++--
 lib/ripple/Ripple.js             | 68 +++++++++++++++++++++++---------
 lib/utils/polyfills.js           |  4 ++
 7 files changed, 65 insertions(+), 32 deletions(-)

diff --git a/lib/autocomplete/Autocomplete.js b/lib/autocomplete/Autocomplete.js
index 747d6421c..4c3645b1c 100644
--- a/lib/autocomplete/Autocomplete.js
+++ b/lib/autocomplete/Autocomplete.js
@@ -104,7 +104,7 @@ var factory = function factory(Chip, Input) {
           var target = _this.state.active;
           if (!target) {
             target = [].concat(_toConsumableArray(_this.suggestions().keys()))[0];
-            if (_this.props.create && !target) {
+            if (!target && _this.props.allowCreate) {
               target = _this.state.query;
             }
             _this.setState({ active: target });
@@ -161,8 +161,7 @@ var factory = function factory(Chip, Input) {
     }, {
       key: 'query',
       value: function query(key) {
-        var value = this.props.create && !this.source().get(key) ? key : this.source().get(key);
-        return !this.props.multiple && key ? value : '';
+        return !this.props.multiple && key ? this.source().get(key) : '';
       }
     }, {
       key: 'suggestions',
@@ -394,6 +393,7 @@ var factory = function factory(Chip, Input) {
       key: 'render',
       value: function render() {
         var _props = this.props;
+        var allowCreate = _props.allowCreate;
         var error = _props.error;
         var label = _props.label;
         var source = _props.source;
@@ -401,9 +401,8 @@ var factory = function factory(Chip, Input) {
         var selectedPosition = _props.selectedPosition;
         var showSuggestionsWhenValueIsSet = _props.showSuggestionsWhenValueIsSet;
         var theme = _props.theme;
-        var create = _props.create;
 
-        var other = _objectWithoutProperties(_props, ['error', 'label', 'source', 'suggestionMatch', 'selectedPosition', 'showSuggestionsWhenValueIsSet', 'theme', 'create']);
+        var other = _objectWithoutProperties(_props, ['allowCreate', 'error', 'label', 'source', 'suggestionMatch', 'selectedPosition', 'showSuggestionsWhenValueIsSet', 'theme']);
 
         var className = (0, _classnames5.default)(theme.autocomplete, _defineProperty({}, theme.focus, this.state.focus), this.props.className);
 
@@ -433,6 +432,7 @@ var factory = function factory(Chip, Input) {
   }(_react.Component);
 
   Autocomplete.propTypes = {
+    allowCreate: _react.PropTypes.bool,
     className: _react.PropTypes.string,
     direction: _react.PropTypes.oneOf(['auto', 'up', 'down']),
     disabled: _react.PropTypes.bool,
@@ -444,7 +444,6 @@ var factory = function factory(Chip, Input) {
     showSuggestionsWhenValueIsSet: _react.PropTypes.bool,
     source: _react.PropTypes.any,
     suggestionMatch: _react.PropTypes.oneOf(['start', 'anywhere', 'word']),
-    create: _react.PropTypes.bool,
     theme: _react.PropTypes.shape({
       active: _react.PropTypes.string,
       autocomplete: _react.PropTypes.string,
@@ -460,6 +459,7 @@ var factory = function factory(Chip, Input) {
     value: _react.PropTypes.any
   };
   Autocomplete.defaultProps = {
+    allowCreate: false,
     className: '',
     direction: 'auto',
     selectedPosition: 'above',
diff --git a/lib/dropdown/Dropdown.js b/lib/dropdown/Dropdown.js
index ee3fa619d..a83a3d1e5 100644
--- a/lib/dropdown/Dropdown.js
+++ b/lib/dropdown/Dropdown.js
@@ -206,6 +206,7 @@ var factory = function factory(Input) {
             className: theme.value,
             onMouseDown: this.handleMouseDown,
             readOnly: true,
+            theme: theme,
             type: template && selected ? 'hidden' : null,
             value: selected && selected.label ? selected.label : ''
           })),
diff --git a/lib/dropdown/theme.scss b/lib/dropdown/theme.scss
index a128b2cdc..874ca849d 100644
--- a/lib/dropdown/theme.scss
+++ b/lib/dropdown/theme.scss
@@ -37,7 +37,7 @@
 }
 
 .value {
-  > input {
+  > .inputElement {
     cursor: pointer;
   }
   &:after {
diff --git a/lib/identifiers.js b/lib/identifiers.js
index bb5f25dd9..f5fcaef20 100644
--- a/lib/identifiers.js
+++ b/lib/identifiers.js
@@ -29,4 +29,4 @@ var SWITCH = exports.SWITCH = 'RTSwitch';
 var TABLE = exports.TABLE = 'RTTable';
 var TABS = exports.TABS = 'RTTabs';
 var TOOLTIP = exports.TOOLTIP = 'RTTooltip';
-var TIMEPICKER = exports.TIMEPICKER = 'RTTimePicker';
\ No newline at end of file
+var TIME_PICKER = exports.TIME_PICKER = 'RTTimePicker';
\ No newline at end of file
diff --git a/lib/input/Input.js b/lib/input/Input.js
index 41a12158f..d29f218bc 100644
--- a/lib/input/Input.js
+++ b/lib/input/Input.js
@@ -79,7 +79,7 @@ var factory = function factory(FontIcon) {
         // resize the input to its content size
         element.style.height = 'auto';
         element.style.height = element.scrollHeight + heightOffset + 'px';
-      }, _this.onKeyPress = function (event) {
+      }, _this.handleKeyPress = function (event) {
         // prevent insertion of more characters if we're a multiline input
         // and maxLength exists
         var _this$props2 = _this.props;
@@ -190,15 +190,13 @@ var factory = function factory(FontIcon) {
           inputElementProps.onKeyPress = onKeyPress;
         } else {
           inputElementProps.rows = 1;
-          inputElementProps.onKeyPress = this.onKeyPress;
+          inputElementProps.onKeyPress = this.handleKeyPress;
         }
 
-        var InputElement = _react2.default.createElement(multiline ? 'textarea' : 'input', inputElementProps);
-
         return _react2.default.createElement(
           'div',
           { 'data-react-toolbox': 'input', className: className },
-          InputElement,
+          _react2.default.createElement(multiline ? 'textarea' : 'input', inputElementProps),
           icon ? _react2.default.createElement(FontIcon, { className: theme.icon, value: icon }) : null,
           _react2.default.createElement('span', { className: theme.bar }),
           labelText ? _react2.default.createElement(
diff --git a/lib/ripple/Ripple.js b/lib/ripple/Ripple.js
index 26e2483d8..4400c42f4 100644
--- a/lib/ripple/Ripple.js
+++ b/lib/ripple/Ripple.js
@@ -119,6 +119,16 @@ var rippleFactory = function rippleFactory() {
             this.addRippleRemoveEventListener(this.getLastKey());
           }
         }
+      }, {
+        key: 'componentWillUnmount',
+        value: function componentWillUnmount() {
+          var _this2 = this;
+
+          // Remove document event listeners for ripple if they still exists
+          Object.keys(this.state.ripples).forEach(function (key) {
+            _this2.state.ripples[key].endRipple();
+          });
+        }
 
         /**
          * Add an event listener to the reference with given key so when the animation transition
@@ -159,24 +169,24 @@ var rippleFactory = function rippleFactory() {
       }, {
         key: 'animateRipple',
         value: function animateRipple(x, y, isTouch) {
-          var _this2 = this;
+          var _this3 = this;
 
           if (this.rippleShouldTrigger(isTouch)) {
             (function () {
-              var _getDescriptor = _this2.getDescriptor(x, y);
+              var _getDescriptor = _this3.getDescriptor(x, y);
 
               var top = _getDescriptor.top;
               var left = _getDescriptor.left;
               var width = _getDescriptor.width;
 
-              var noRipplesActive = Object.keys(_this2.state.ripples).length === 0;
-              var key = _this2.props.rippleMultiple || noRipplesActive ? _this2.getNextKey() : _this2.getLastKey();
-              var initialState = { active: false, restarting: true, top: top, left: left, width: width };
+              var noRipplesActive = Object.keys(_this3.state.ripples).length === 0;
+              var key = _this3.props.rippleMultiple || noRipplesActive ? _this3.getNextKey() : _this3.getLastKey();
+              var endRipple = _this3.addRippleDeactivateEventListener(isTouch, key);
+              var initialState = { active: false, restarting: true, top: top, left: left, width: width, endRipple: endRipple };
               var runningState = { active: true, restarting: false };
-              _this2.addRippleDeactivateEventListener(isTouch, key);
-              _this2.setState((0, _reactAddonsUpdate2.default)(_this2.state, { ripples: _defineProperty({}, key, { $set: initialState }) }), function () {
-                _this2.refs[key].offsetWidth; //eslint-disable-line no-unused-expressions
-                _this2.setState((0, _reactAddonsUpdate2.default)(_this2.state, { ripples: _defineProperty({}, key, { $merge: runningState }) }));
+              _this3.setState((0, _reactAddonsUpdate2.default)(_this3.state, { ripples: _defineProperty({}, key, { $set: initialState }) }), function () {
+                _this3.refs[key].offsetWidth; //eslint-disable-line no-unused-expressions
+                _this3.setState((0, _reactAddonsUpdate2.default)(_this3.state, { ripples: _defineProperty({}, key, { $merge: runningState }) }));
               });
             })();
           }
@@ -256,22 +266,42 @@ var rippleFactory = function rippleFactory() {
         }
 
         /**
-         * Add an event listener to the document needed deactivate a ripple and make it dissappear.
-         * Deactivation can happen with a touchend or mouseup depending on the trigger type.
+         * Add an event listener to the document needed to deactivate a ripple and make it dissappear.
+         * Deactivation can happen with a touchend or mouseup depending on the trigger type. The
+         * ending function is created from a factory function and returned.
          *
          * @param {Boolean} isTouch True in case the trigger was a touch event false otherwise.
          * @param {String} rippleKey It's a key to identify the ripple that should be deactivated.
+         * @return {Function} Callback function that deactivates the ripple and removes the event listener
          */
 
       }, {
         key: 'addRippleDeactivateEventListener',
         value: function addRippleDeactivateEventListener(isTouch, rippleKey) {
-          var self = this;
           var eventType = isTouch ? 'touchend' : 'mouseup';
-          document.addEventListener(eventType, function endRipple() {
+          var endRipple = this.createRippleDeactivateCallback(eventType, rippleKey);
+          document.addEventListener(eventType, endRipple);
+          return endRipple;
+        }
+
+        /**
+         * Generates a function that can be called to deactivate a given ripple and remove its finishing
+         * event listener. If is generated because we need to store it to be called on unmount in case
+         * the ripple is still running.
+         *
+         * @param {String} eventType Is the event type that can be touchend or mouseup
+         * @param {String} rippleKey Is the key representing the ripple
+         * @return {Function} Callback function that deactivates the ripple and removes the listener
+         */
+
+      }, {
+        key: 'createRippleDeactivateCallback',
+        value: function createRippleDeactivateCallback(eventType, rippleKey) {
+          var self = this;
+          return function endRipple() {
             document.removeEventListener(eventType, endRipple);
             self.setState({ ripples: (0, _reactAddonsUpdate2.default)(self.state.ripples, _defineProperty({}, rippleKey, { $merge: { active: false } })) });
-          });
+          };
         }
       }, {
         key: 'renderRipple',
@@ -301,14 +331,14 @@ var rippleFactory = function rippleFactory() {
       }, {
         key: 'render',
         value: function render() {
-          var _this3 = this;
+          var _this4 = this;
 
           if (!this.props.ripple) {
             return _react2.default.createElement(ComposedComponent, this.props);
           } else {
             var _ret3 = function () {
-              var ripples = _this3.state.ripples;
-              var _props2 = _this3.props;
+              var ripples = _this4.state.ripples;
+              var _props2 = _this4.props;
               var ripple = _props2.ripple;
               var onRippleEnded = _props2.onRippleEnded;
               var rippleCentered = _props2.rippleCentered;
@@ -322,10 +352,10 @@ var rippleFactory = function rippleFactory() {
               return {
                 v: _react2.default.createElement(
                   ComposedComponent,
-                  _extends({}, other, { onMouseDown: _this3.handleMouseDown, onTouchStart: _this3.handleTouchStart }),
+                  _extends({}, other, { onMouseDown: _this4.handleMouseDown, onTouchStart: _this4.handleTouchStart }),
                   children ? children : null,
                   Object.keys(ripples).map(function (key) {
-                    return _this3.renderRipple(key, className, ripples[key]);
+                    return _this4.renderRipple(key, className, ripples[key]);
                   })
                 )
               };
diff --git a/lib/utils/polyfills.js b/lib/utils/polyfills.js
index 5cc5e7f3a..74df99bbb 100644
--- a/lib/utils/polyfills.js
+++ b/lib/utils/polyfills.js
@@ -4,8 +4,12 @@ require('core-js/fn/array/from');
 
 require('core-js/fn/array/iterator');
 
+require('core-js/fn/array/find-index');
+
 require('core-js/fn/map');
 
 require('core-js/fn/string/starts-with');
 
+require('core-js/fn/string/includes');
+
 require('core-js/fn/symbol');
\ No newline at end of file

From a825208e83838a888fe29a06864aabeeb4e9bdef Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 6 Aug 2016 22:44:05 +0200
Subject: [PATCH 0728/1024] Remove some bind usage in render functions and undo
 passing down Dropdown theme to Input

---
 components/autocomplete/Autocomplete.js    | 15 +++---
 components/date_picker/Calendar.js         | 41 ++++++++-------
 components/date_picker/CalendarDay.js      |  8 ++-
 components/date_picker/CalendarMonth.js    |  2 +-
 components/date_picker/DatePickerDialog.js |  8 +--
 components/dropdown/Dropdown.js            |  7 ++-
 components/dropdown/theme.scss             |  3 +-
 components/tabs/Tab.js                     |  7 ++-
 components/tabs/Tabs.js                    |  6 ++-
 components/time_picker/ClockFace.js        |  4 +-
 components/time_picker/TimePickerDialog.js |  8 +--
 lib/autocomplete/Autocomplete.js           | 20 ++++----
 lib/date_picker/Calendar.js                | 44 +++++++---------
 lib/date_picker/CalendarDay.js             | 16 +++++-
 lib/date_picker/CalendarMonth.js           |  2 +-
 lib/date_picker/DatePickerDialog.js        |  8 +--
 lib/dropdown/Dropdown.js                   | 24 ++++-----
 lib/dropdown/theme.scss                    |  3 +-
 lib/tabs/Tab.js                            | 13 +++--
 lib/tabs/Tabs.js                           |  6 ++-
 lib/time_picker/ClockFace.js               | 59 ++++++++++++----------
 lib/time_picker/TimePickerDialog.js        |  8 +--
 22 files changed, 168 insertions(+), 144 deletions(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index f2153bddb..6bf969575 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -138,8 +138,8 @@ const factory = (Chip, Input) => {
      }
    };
 
-   handleSuggestionHover = (key) => {
-     this.setState({active: key});
+   handleSuggestionHover = (event) => {
+     this.setState({active: event.target.id});
    };
 
    calculateDirection () {
@@ -220,11 +220,11 @@ const factory = (Chip, Input) => {
      return valueMap;
    }
 
-   select (key, event) {
+   select = (event) => {
      events.pauseEvent(event);
      const values = this.values(this.props.value);
-     this.handleChange([key, ...values.keys()], event);
-   }
+     this.handleChange([event.target.id, ...values.keys()], event);
+   };
 
    unselect (key, event) {
      if (!this.props.disabled) {
@@ -259,10 +259,11 @@ const factory = (Chip, Input) => {
        const className = classnames(theme.suggestion, {[theme.active]: this.state.active === key});
        return (
          <li
+           id={key}
            key={key}
            className={className}
-           onMouseDown={this.select.bind(this, key)}
-           onMouseOver={this.handleSuggestionHover.bind(this, key)}
+           onMouseDown={this.select}
+           onMouseOver={this.handleSuggestionHover}
          >
            {value}
          </li>
diff --git a/components/date_picker/Calendar.js b/components/date_picker/Calendar.js
index 28297e084..024c0532c 100644
--- a/components/date_picker/Calendar.js
+++ b/components/date_picker/Calendar.js
@@ -5,6 +5,8 @@ import time from '../utils/time.js';
 import utils from '../utils/utils.js';
 import CalendarMonth from './CalendarMonth.js';
 
+const DIRECTION_STEPS = { left: -1, right: 1 };
+
 const factory = (IconButton) => {
   class Calendar extends Component {
     static propTypes = {
@@ -48,37 +50,34 @@ const factory = (IconButton) => {
       this.props.onChange(time.setDay(this.state.viewDate, day), true);
     };
 
-    handleYearClick = (year) => {
+    handleYearClick = (event) => {
+      const year = parseInt(event.target.id);
       const viewDate = time.setYear(this.props.selectedDate, year);
       this.setState({viewDate});
       this.props.onChange(viewDate, false);
     };
 
-    changeViewMonth = (direction, step) => {
+    changeViewMonth = (event) => {
+      const direction = event.target.id;
       this.setState({
         direction,
-        viewDate: time.addMonths(this.state.viewDate, step)
+        viewDate: time.addMonths(this.state.viewDate, DIRECTION_STEPS[direction])
       });
     };
 
-    renderYear (year) {
-      const props = {
-        className: year === this.state.viewDate.getFullYear() ? this.props.theme.active : '',
-        key: year,
-        onClick: this.handleYearClick.bind(this, year)
-      };
-
-      if (year === this.state.viewDate.getFullYear()) {
-        props.ref = 'activeYear';
-      }
-
-      return <li {...props}>{year}</li>;
-    }
-
     renderYears () {
       return (
         <ul data-react-toolbox='years' ref="years" className={this.props.theme.years}>
-          {utils.range(1900, 2100).map((i) => { return this.renderYear(i); })}
+          {utils.range(1900, 2100).map(year => (
+            <li
+              children={year}
+              className={year === this.state.viewDate.getFullYear() ? this.props.theme.active : ''}
+              id={year}
+              key={year}
+              onClick={this.handleYearClick}
+              ref={year === this.state.viewDate.getFullYear() ? 'activeYear' : undefined}
+            />
+          ))}
         </ul>
       );
     }
@@ -88,8 +87,8 @@ const factory = (IconButton) => {
       const animation = this.state.direction === 'left' ? SlideLeft : SlideRight;
       return (
         <div data-react-toolbox='calendar'>
-          <IconButton className={theme.prev} icon='chevron_left' onClick={this.changeViewMonth.bind(this, 'left', -1)} />
-          <IconButton className={theme.next} icon='chevron_right' onClick={this.changeViewMonth.bind(this, 'right', 1)} />
+          <IconButton id='left' className={theme.prev} icon='chevron_left' onClick={this.changeViewMonth} />
+          <IconButton id='right' className={theme.next} icon='chevron_right' onClick={this.changeViewMonth} />
           <CssTransitionGroup transitionName={animation} transitionEnterTimeout={350} transitionLeaveTimeout={350}>
             <CalendarMonth
               key={this.state.viewDate.getMonth()}
@@ -99,7 +98,7 @@ const factory = (IconButton) => {
               selectedDate={this.props.selectedDate}
               theme={this.props.theme}
               viewDate={this.state.viewDate}
-              />
+            />
           </CssTransitionGroup>
         </div>
       );
diff --git a/components/date_picker/CalendarDay.js b/components/date_picker/CalendarDay.js
index e22306e0c..dfe7bc265 100644
--- a/components/date_picker/CalendarDay.js
+++ b/components/date_picker/CalendarDay.js
@@ -31,6 +31,12 @@ class Day extends Component {
     return sameYear && sameMonth && sameDay;
   }
 
+  handleClick = () => {
+    if (!this.props.disabled && this.props.onClick) {
+      this.props.onClick(this.props.day);
+    }
+  };
+
   render () {
     const className = classnames(this.props.theme.day, {
       [this.props.theme.active]: this.isSelected(),
@@ -39,7 +45,7 @@ class Day extends Component {
 
     return (
       <div data-react-toolbox='day' className={className} style={this.dayStyle()}>
-        <span onClick={this.props.onClick}>
+        <span onClick={this.handleClick}>
           {this.props.day}
         </span>
       </div>
diff --git a/components/date_picker/CalendarMonth.js b/components/date_picker/CalendarMonth.js
index 001121d19..ed688ed66 100644
--- a/components/date_picker/CalendarMonth.js
+++ b/components/date_picker/CalendarMonth.js
@@ -38,7 +38,7 @@ class Month extends Component {
           key={i}
           day={i}
           disabled={disabled}
-          onClick={!disabled ? this.handleDayClick.bind(this, i) : null}
+          onClick={this.handleDayClick}
           selectedDate={this.props.selectedDate}
           theme={this.props.theme}
           viewDate={this.props.viewDate}
diff --git a/components/date_picker/DatePickerDialog.js b/components/date_picker/DatePickerDialog.js
index 4936214cc..ac935f2d4 100644
--- a/components/date_picker/DatePickerDialog.js
+++ b/components/date_picker/DatePickerDialog.js
@@ -63,8 +63,8 @@ const factory = (Dialog, Calendar) => {
       if (this.props.onSelect) this.props.onSelect(this.state.date, event);
     };
 
-    handleSwitchDisplay = (display) => {
-      this.setState({ display });
+    handleSwitchDisplay = (event) => {
+      this.setState({ display: event.target.id });
     };
 
     updateStateDate = (date) => {
@@ -96,10 +96,10 @@ const factory = (Dialog, Calendar) => {
           type="custom"
         >
           <header className={headerClassName}>
-            <span className={theme.year} onClick={this.handleSwitchDisplay.bind(this, 'years')}>
+            <span id='years' className={theme.year} onClick={this.handleSwitchDisplay}>
               {this.state.date.getFullYear()}
             </span>
-            <h3 className={theme.date} onClick={this.handleSwitchDisplay.bind(this, 'months')}>
+            <h3 id='months' className={theme.date} onClick={this.handleSwitchDisplay}>
               {time.getShortDayOfWeek(this.state.date.getDay())}, {time.getShortMonth(this.state.date)} {this.state.date.getDate()}
             </h3>
           </header>
diff --git a/components/dropdown/Dropdown.js b/components/dropdown/Dropdown.js
index 755875a00..0700cc4e7 100644
--- a/components/dropdown/Dropdown.js
+++ b/components/dropdown/Dropdown.js
@@ -130,7 +130,7 @@ const factory = (Input) => {
       );
     }
 
-    renderValue (item, idx) {
+    renderValue = (item, idx) => {
       const { theme } = this.props;
       const className = item.value === this.props.value ? theme.selected : null;
       return (
@@ -138,7 +138,7 @@ const factory = (Input) => {
           {this.props.template ? this.props.template(item) : item.label}
         </li>
       );
-    }
+    };
 
     render () {
       const {template, theme, source, allowBlank, auto, ...others} = this.props; //eslint-disable-line no-unused-vars
@@ -156,13 +156,12 @@ const factory = (Input) => {
             className={theme.value}
             onMouseDown={this.handleMouseDown}
             readOnly
-            theme={theme}
             type={template && selected ? 'hidden' : null}
             value={selected && selected.label ? selected.label : ''}
           />
         {template && selected ? this.renderTemplateValue(selected) : null}
           <ul className={theme.values} ref='values'>
-            {source.map(this.renderValue.bind(this))}
+            {source.map(this.renderValue)}
           </ul>
         </div>
       );
diff --git a/components/dropdown/theme.scss b/components/dropdown/theme.scss
index 874ca849d..d29a6e672 100644
--- a/components/dropdown/theme.scss
+++ b/components/dropdown/theme.scss
@@ -37,7 +37,7 @@
 }
 
 .value {
-  > .inputElement {
+  > .input {
     cursor: pointer;
   }
   &:after {
@@ -56,6 +56,7 @@
     transition: transform $animation-duration $animation-curve-default;
   }
 }
+
 .field {
   position: relative;
   padding: $input-padding 0;
diff --git a/components/tabs/Tab.js b/components/tabs/Tab.js
index 052a05f97..f48280610 100644
--- a/components/tabs/Tab.js
+++ b/components/tabs/Tab.js
@@ -41,7 +41,10 @@ class Tab extends Component {
   };
 
   render () {
-    const { active, activeClassName, hidden, disabled, className, theme } = this.props;
+    const {
+      onActive, // eslint-disable-line
+      active, activeClassName, className, disabled, hidden, theme, ...other
+    } = this.props;
     const _className = classnames(theme.label, {
       [theme.active]: active,
       [theme.hidden]: hidden,
@@ -50,7 +53,7 @@ class Tab extends Component {
     }, className);
 
     return (
-      <label data-react-toolbox='tab' className={_className} onClick={this.handleClick}>
+      <label {...other} data-react-toolbox='tab' className={_className} onClick={this.handleClick}>
         {this.props.label}
       </label>
     );
diff --git a/components/tabs/Tabs.js b/components/tabs/Tabs.js
index 5acd1d334..e9b4c720b 100644
--- a/components/tabs/Tabs.js
+++ b/components/tabs/Tabs.js
@@ -40,7 +40,8 @@ const factory = (Tab, TabContent) => {
       clearTimeout(this.pointerTimeout);
     }
 
-    handleHeaderClick = (idx) => {
+    handleHeaderClick = (event) => {
+      const idx = parseInt(event.target.id);
       if (this.props.onChange) this.props.onChange(idx);
     };
 
@@ -80,9 +81,10 @@ const factory = (Tab, TabContent) => {
     renderHeaders (headers) {
       return headers.map((item, idx) => {
         return React.cloneElement(item, {
+          id: idx,
           key: idx,
           active: this.props.index === idx,
-          onClick: this.handleHeaderClick.bind(this, idx, item)
+          onClick: this.handleHeaderClick
         });
       });
     }
diff --git a/components/time_picker/ClockFace.js b/components/time_picker/ClockFace.js
index 6031468cb..7561b1e89 100644
--- a/components/time_picker/ClockFace.js
+++ b/components/time_picker/ClockFace.js
@@ -37,7 +37,7 @@ class Face extends Component {
     };
   }
 
-  renderNumber (number, idx) {
+  renderNumber = (number, idx) => {
     const { active, radius, spacing, theme, twoDigits } = this.props;
     return (
       <span
@@ -60,7 +60,7 @@ class Face extends Component {
         onMouseDown={onMouseDown}
         style={this.faceStyle()}
       >
-        {numbers.map(this.renderNumber.bind(this))}
+        {numbers.map(this.renderNumber)}
       </div>
     );
   }
diff --git a/components/time_picker/TimePickerDialog.js b/components/time_picker/TimePickerDialog.js
index 21b2daba4..3e962960f 100644
--- a/components/time_picker/TimePickerDialog.js
+++ b/components/time_picker/TimePickerDialog.js
@@ -65,8 +65,8 @@ const factory = (Dialog) => {
       if (this.state.display === 'hours') this.setState({display: 'minutes'});
     };
 
-    switchDisplay = (display) => {
-      this.setState({display});
+    switchDisplay = (event) => {
+      this.setState({display: event.target.id});
     };
 
     actions = [
@@ -108,11 +108,11 @@ const factory = (Dialog) => {
           onOverlayClick={this.props.onOverlayClick}
         >
           <header className={theme.header}>
-            <span className={theme.hours} onClick={this.switchDisplay.bind(this, 'hours')}>
+            <span id='hours' className={theme.hours} onClick={this.switchDisplay}>
               {('0' + this.formatHours()).slice(-2)}
             </span>
             <span className={theme.separator}>:</span>
-            <span className={theme.minutes} onClick={this.switchDisplay.bind(this, 'minutes')}>
+            <span id='minutes' className={theme.minutes} onClick={this.switchDisplay}>
               {('0' + this.state.displayTime.getMinutes()).slice(-2)}
             </span>
             {this.renderAMPMLabels()}
diff --git a/lib/autocomplete/Autocomplete.js b/lib/autocomplete/Autocomplete.js
index 4c3645b1c..af7a0d066 100644
--- a/lib/autocomplete/Autocomplete.js
+++ b/lib/autocomplete/Autocomplete.js
@@ -121,8 +121,12 @@ var factory = function factory(Chip, Input) {
           if (index >= suggestionsKeys.length) index = 0;
           _this.setState({ active: suggestionsKeys[index] });
         }
-      }, _this.handleSuggestionHover = function (key) {
-        _this.setState({ active: key });
+      }, _this.handleSuggestionHover = function (event) {
+        _this.setState({ active: event.target.id });
+      }, _this.select = function (event) {
+        _events2.default.pauseEvent(event);
+        var values = _this.values(_this.props.value);
+        _this.handleChange([event.target.id].concat(_toConsumableArray(values.keys())), event);
       }, _temp), _possibleConstructorReturn(_this, _ret);
     }
 
@@ -309,13 +313,6 @@ var factory = function factory(Chip, Input) {
 
         return valueMap;
       }
-    }, {
-      key: 'select',
-      value: function select(key, event) {
-        _events2.default.pauseEvent(event);
-        var values = this.values(this.props.value);
-        this.handleChange([key].concat(_toConsumableArray(values.keys())), event);
-      }
     }, {
       key: 'unselect',
       value: function unselect(key, event) {
@@ -373,10 +370,11 @@ var factory = function factory(Chip, Input) {
           return _react2.default.createElement(
             'li',
             {
+              id: key,
               key: key,
               className: className,
-              onMouseDown: _this3.select.bind(_this3, key),
-              onMouseOver: _this3.handleSuggestionHover.bind(_this3, key)
+              onMouseDown: _this3.select,
+              onMouseOver: _this3.handleSuggestionHover
             },
             value
           );
diff --git a/lib/date_picker/Calendar.js b/lib/date_picker/Calendar.js
index b401f2ea8..014b27ec8 100644
--- a/lib/date_picker/Calendar.js
+++ b/lib/date_picker/Calendar.js
@@ -36,6 +36,8 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
+var DIRECTION_STEPS = { left: -1, right: 1 };
+
 var factory = function factory(IconButton) {
   var Calendar = function (_Component) {
     _inherits(Calendar, _Component);
@@ -55,14 +57,16 @@ var factory = function factory(IconButton) {
         viewDate: _this.props.selectedDate
       }, _this.handleDayClick = function (day) {
         _this.props.onChange(_time2.default.setDay(_this.state.viewDate, day), true);
-      }, _this.handleYearClick = function (year) {
+      }, _this.handleYearClick = function (event) {
+        var year = parseInt(event.target.id);
         var viewDate = _time2.default.setYear(_this.props.selectedDate, year);
         _this.setState({ viewDate: viewDate });
         _this.props.onChange(viewDate, false);
-      }, _this.changeViewMonth = function (direction, step) {
+      }, _this.changeViewMonth = function (event) {
+        var direction = event.target.id;
         _this.setState({
           direction: direction,
-          viewDate: _time2.default.addMonths(_this.state.viewDate, step)
+          viewDate: _time2.default.addMonths(_this.state.viewDate, DIRECTION_STEPS[direction])
         });
       }, _temp), _possibleConstructorReturn(_this, _ret);
     }
@@ -79,25 +83,6 @@ var factory = function factory(IconButton) {
       value: function scrollToActive() {
         this.refs.years.scrollTop = this.refs.activeYear.offsetTop - this.refs.years.offsetHeight / 2 + this.refs.activeYear.offsetHeight / 2;
       }
-    }, {
-      key: 'renderYear',
-      value: function renderYear(year) {
-        var props = {
-          className: year === this.state.viewDate.getFullYear() ? this.props.theme.active : '',
-          key: year,
-          onClick: this.handleYearClick.bind(this, year)
-        };
-
-        if (year === this.state.viewDate.getFullYear()) {
-          props.ref = 'activeYear';
-        }
-
-        return _react2.default.createElement(
-          'li',
-          props,
-          year
-        );
-      }
     }, {
       key: 'renderYears',
       value: function renderYears() {
@@ -106,8 +91,15 @@ var factory = function factory(IconButton) {
         return _react2.default.createElement(
           'ul',
           { 'data-react-toolbox': 'years', ref: 'years', className: this.props.theme.years },
-          _utils2.default.range(1900, 2100).map(function (i) {
-            return _this2.renderYear(i);
+          _utils2.default.range(1900, 2100).map(function (year) {
+            return _react2.default.createElement('li', {
+              children: year,
+              className: year === _this2.state.viewDate.getFullYear() ? _this2.props.theme.active : '',
+              id: year,
+              key: year,
+              onClick: _this2.handleYearClick,
+              ref: year === _this2.state.viewDate.getFullYear() ? 'activeYear' : undefined
+            });
           })
         );
       }
@@ -120,8 +112,8 @@ var factory = function factory(IconButton) {
         return _react2.default.createElement(
           'div',
           { 'data-react-toolbox': 'calendar' },
-          _react2.default.createElement(IconButton, { className: theme.prev, icon: 'chevron_left', onClick: this.changeViewMonth.bind(this, 'left', -1) }),
-          _react2.default.createElement(IconButton, { className: theme.next, icon: 'chevron_right', onClick: this.changeViewMonth.bind(this, 'right', 1) }),
+          _react2.default.createElement(IconButton, { id: 'left', className: theme.prev, icon: 'chevron_left', onClick: this.changeViewMonth }),
+          _react2.default.createElement(IconButton, { id: 'right', className: theme.next, icon: 'chevron_right', onClick: this.changeViewMonth }),
           _react2.default.createElement(
             _reactAddonsCssTransitionGroup2.default,
             { transitionName: animation, transitionEnterTimeout: 350, transitionLeaveTimeout: 350 },
diff --git a/lib/date_picker/CalendarDay.js b/lib/date_picker/CalendarDay.js
index 257880a19..e2bff03d0 100644
--- a/lib/date_picker/CalendarDay.js
+++ b/lib/date_picker/CalendarDay.js
@@ -32,9 +32,21 @@ var Day = function (_Component) {
   _inherits(Day, _Component);
 
   function Day() {
+    var _Object$getPrototypeO;
+
+    var _temp, _this, _ret;
+
     _classCallCheck(this, Day);
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(Day).apply(this, arguments));
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Day)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function () {
+      if (!_this.props.disabled && _this.props.onClick) {
+        _this.props.onClick(_this.props.day);
+      }
+    }, _temp), _possibleConstructorReturn(_this, _ret);
   }
 
   _createClass(Day, [{
@@ -66,7 +78,7 @@ var Day = function (_Component) {
         { 'data-react-toolbox': 'day', className: className, style: this.dayStyle() },
         _react2.default.createElement(
           'span',
-          { onClick: this.props.onClick },
+          { onClick: this.handleClick },
           this.props.day
         )
       );
diff --git a/lib/date_picker/CalendarMonth.js b/lib/date_picker/CalendarMonth.js
index 4d874b57b..1888429c3 100644
--- a/lib/date_picker/CalendarMonth.js
+++ b/lib/date_picker/CalendarMonth.js
@@ -73,7 +73,7 @@ var Month = function (_Component) {
           key: i,
           day: i,
           disabled: disabled,
-          onClick: !disabled ? _this2.handleDayClick.bind(_this2, i) : null,
+          onClick: _this2.handleDayClick,
           selectedDate: _this2.props.selectedDate,
           theme: _this2.props.theme,
           viewDate: _this2.props.viewDate
diff --git a/lib/date_picker/DatePickerDialog.js b/lib/date_picker/DatePickerDialog.js
index 70fa63c20..af8070f3f 100644
--- a/lib/date_picker/DatePickerDialog.js
+++ b/lib/date_picker/DatePickerDialog.js
@@ -55,8 +55,8 @@ var factory = function factory(Dialog, Calendar) {
         }
       }, _this.handleSelect = function (event) {
         if (_this.props.onSelect) _this.props.onSelect(_this.state.date, event);
-      }, _this.handleSwitchDisplay = function (display) {
-        _this.setState({ display: display });
+      }, _this.handleSwitchDisplay = function (event) {
+        _this.setState({ display: event.target.id });
       }, _this.updateStateDate = function (date) {
         if (Object.prototype.toString.call(date) === '[object Date]') {
           _this.setState({
@@ -100,12 +100,12 @@ var factory = function factory(Dialog, Calendar) {
             { className: headerClassName },
             _react2.default.createElement(
               'span',
-              { className: theme.year, onClick: this.handleSwitchDisplay.bind(this, 'years') },
+              { id: 'years', className: theme.year, onClick: this.handleSwitchDisplay },
               this.state.date.getFullYear()
             ),
             _react2.default.createElement(
               'h3',
-              { className: theme.date, onClick: this.handleSwitchDisplay.bind(this, 'months') },
+              { id: 'months', className: theme.date, onClick: this.handleSwitchDisplay },
               _time2.default.getShortDayOfWeek(this.state.date.getDay()),
               ', ',
               _time2.default.getShortMonth(this.state.date),
diff --git a/lib/dropdown/Dropdown.js b/lib/dropdown/Dropdown.js
index a83a3d1e5..a9fe5171c 100644
--- a/lib/dropdown/Dropdown.js
+++ b/lib/dropdown/Dropdown.js
@@ -116,6 +116,15 @@ var factory = function factory(Input) {
         if (!_this.props.allowBlank) {
           return _this.props.source[0];
         }
+      }, _this.renderValue = function (item, idx) {
+        var theme = _this.props.theme;
+
+        var className = item.value === _this.props.value ? theme.selected : null;
+        return _react2.default.createElement(
+          'li',
+          { key: idx, className: className, onMouseDown: _this.handleSelect.bind(_this, item.value) },
+          _this.props.template ? _this.props.template(item) : item.label
+        );
       }, _temp), _possibleConstructorReturn(_this, _ret);
     }
 
@@ -169,18 +178,6 @@ var factory = function factory(Input) {
           ) : null
         );
       }
-    }, {
-      key: 'renderValue',
-      value: function renderValue(item, idx) {
-        var theme = this.props.theme;
-
-        var className = item.value === this.props.value ? theme.selected : null;
-        return _react2.default.createElement(
-          'li',
-          { key: idx, className: className, onMouseDown: this.handleSelect.bind(this, item.value) },
-          this.props.template ? this.props.template(item) : item.label
-        );
-      }
     }, {
       key: 'render',
       value: function render() {
@@ -206,7 +203,6 @@ var factory = function factory(Input) {
             className: theme.value,
             onMouseDown: this.handleMouseDown,
             readOnly: true,
-            theme: theme,
             type: template && selected ? 'hidden' : null,
             value: selected && selected.label ? selected.label : ''
           })),
@@ -214,7 +210,7 @@ var factory = function factory(Input) {
           _react2.default.createElement(
             'ul',
             { className: theme.values, ref: 'values' },
-            source.map(this.renderValue.bind(this))
+            source.map(this.renderValue)
           )
         );
       }
diff --git a/lib/dropdown/theme.scss b/lib/dropdown/theme.scss
index 874ca849d..d29a6e672 100644
--- a/lib/dropdown/theme.scss
+++ b/lib/dropdown/theme.scss
@@ -37,7 +37,7 @@
 }
 
 .value {
-  > .inputElement {
+  > .input {
     cursor: pointer;
   }
   &:after {
@@ -56,6 +56,7 @@
     transition: transform $animation-duration $animation-curve-default;
   }
 }
+
 .field {
   position: relative;
   padding: $input-padding 0;
diff --git a/lib/tabs/Tab.js b/lib/tabs/Tab.js
index 2a744ddf5..7035a5b53 100644
--- a/lib/tabs/Tab.js
+++ b/lib/tabs/Tab.js
@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Tab = undefined;
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
 var _react = require('react');
@@ -23,6 +25,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
@@ -63,18 +67,21 @@ var Tab = function (_Component) {
       var _classnames;
 
       var _props = this.props;
+      var onActive = _props.onActive;
       var active = _props.active;
       var activeClassName = _props.activeClassName;
-      var hidden = _props.hidden;
-      var disabled = _props.disabled;
       var className = _props.className;
+      var disabled = _props.disabled;
+      var hidden = _props.hidden;
       var theme = _props.theme;
 
+      var other = _objectWithoutProperties(_props, ['onActive', 'active', 'activeClassName', 'className', 'disabled', 'hidden', 'theme']);
+
       var _className = (0, _classnames3.default)(theme.label, (_classnames = {}, _defineProperty(_classnames, theme.active, active), _defineProperty(_classnames, theme.hidden, hidden), _defineProperty(_classnames, theme.disabled, disabled), _defineProperty(_classnames, activeClassName, active), _classnames), className);
 
       return _react2.default.createElement(
         'label',
-        { 'data-react-toolbox': 'tab', className: _className, onClick: this.handleClick },
+        _extends({}, other, { 'data-react-toolbox': 'tab', className: _className, onClick: this.handleClick }),
         this.props.label
       );
     }
diff --git a/lib/tabs/Tabs.js b/lib/tabs/Tabs.js
index 4ed27e3fe..a5344d57a 100644
--- a/lib/tabs/Tabs.js
+++ b/lib/tabs/Tabs.js
@@ -52,7 +52,8 @@ var factory = function factory(Tab, TabContent) {
 
       return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Tabs)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
         pointer: {}
-      }, _this.handleHeaderClick = function (idx) {
+      }, _this.handleHeaderClick = function (event) {
+        var idx = parseInt(event.target.id);
         if (_this.props.onChange) _this.props.onChange(idx);
       }, _temp), _possibleConstructorReturn(_this, _ret);
     }
@@ -118,9 +119,10 @@ var factory = function factory(Tab, TabContent) {
 
         return headers.map(function (item, idx) {
           return _react2.default.cloneElement(item, {
+            id: idx,
             key: idx,
             active: _this4.props.index === idx,
-            onClick: _this4.handleHeaderClick.bind(_this4, idx, item)
+            onClick: _this4.handleHeaderClick
           });
         });
       }
diff --git a/lib/time_picker/ClockFace.js b/lib/time_picker/ClockFace.js
index dda37de9e..54ca26407 100644
--- a/lib/time_picker/ClockFace.js
+++ b/lib/time_picker/ClockFace.js
@@ -28,9 +28,34 @@ var Face = function (_Component) {
   _inherits(Face, _Component);
 
   function Face() {
+    var _Object$getPrototypeO;
+
+    var _temp, _this, _ret;
+
     _classCallCheck(this, Face);
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(Face).apply(this, arguments));
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Face)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.renderNumber = function (number, idx) {
+      var _this$props = _this.props;
+      var active = _this$props.active;
+      var radius = _this$props.radius;
+      var spacing = _this$props.spacing;
+      var theme = _this$props.theme;
+      var twoDigits = _this$props.twoDigits;
+
+      return _react2.default.createElement(
+        'span',
+        {
+          className: (0, _classnames3.default)(theme.number, _defineProperty({}, theme.active, number === active)),
+          style: _this.numberStyle(radius - spacing, idx + 1),
+          key: number
+        },
+        twoDigits ? ('0' + number).slice(-2) : number
+      );
+    }, _temp), _possibleConstructorReturn(_this, _ret);
   }
 
   _createClass(Face, [{
@@ -50,34 +75,14 @@ var Face = function (_Component) {
         width: this.props.radius * 2
       };
     }
-  }, {
-    key: 'renderNumber',
-    value: function renderNumber(number, idx) {
-      var _props = this.props;
-      var active = _props.active;
-      var radius = _props.radius;
-      var spacing = _props.spacing;
-      var theme = _props.theme;
-      var twoDigits = _props.twoDigits;
-
-      return _react2.default.createElement(
-        'span',
-        {
-          className: (0, _classnames3.default)(theme.number, _defineProperty({}, theme.active, number === active)),
-          style: this.numberStyle(radius - spacing, idx + 1),
-          key: number
-        },
-        twoDigits ? ('0' + number).slice(-2) : number
-      );
-    }
   }, {
     key: 'render',
     value: function render() {
-      var _props2 = this.props;
-      var numbers = _props2.numbers;
-      var onTouchStart = _props2.onTouchStart;
-      var onMouseDown = _props2.onMouseDown;
-      var theme = _props2.theme;
+      var _props = this.props;
+      var numbers = _props.numbers;
+      var onTouchStart = _props.onTouchStart;
+      var onMouseDown = _props.onMouseDown;
+      var theme = _props.theme;
 
       return _react2.default.createElement(
         'div',
@@ -88,7 +93,7 @@ var Face = function (_Component) {
           onMouseDown: onMouseDown,
           style: this.faceStyle()
         },
-        numbers.map(this.renderNumber.bind(this))
+        numbers.map(this.renderNumber)
       );
     }
   }]);
diff --git a/lib/time_picker/TimePickerDialog.js b/lib/time_picker/TimePickerDialog.js
index bea5496de..92e55b2db 100644
--- a/lib/time_picker/TimePickerDialog.js
+++ b/lib/time_picker/TimePickerDialog.js
@@ -56,8 +56,8 @@ var factory = function factory(Dialog) {
         _this.setState({ displayTime: _time2.default.toggleTimeMode(_this.state.displayTime) });
       }, _this.handleHandMoved = function () {
         if (_this.state.display === 'hours') _this.setState({ display: 'minutes' });
-      }, _this.switchDisplay = function (display) {
-        _this.setState({ display: display });
+      }, _this.switchDisplay = function (event) {
+        _this.setState({ display: event.target.id });
       }, _this.actions = [{ label: 'Cancel', className: _this.props.theme.button, onClick: _this.props.onDismiss }, { label: 'Ok', className: _this.props.theme.button, name: _this.props.name, onClick: _this.handleSelect }], _temp), _possibleConstructorReturn(_this, _ret);
     }
 
@@ -121,7 +121,7 @@ var factory = function factory(Dialog) {
             { className: theme.header },
             _react2.default.createElement(
               'span',
-              { className: theme.hours, onClick: this.switchDisplay.bind(this, 'hours') },
+              { id: 'hours', className: theme.hours, onClick: this.switchDisplay },
               ('0' + this.formatHours()).slice(-2)
             ),
             _react2.default.createElement(
@@ -131,7 +131,7 @@ var factory = function factory(Dialog) {
             ),
             _react2.default.createElement(
               'span',
-              { className: theme.minutes, onClick: this.switchDisplay.bind(this, 'minutes') },
+              { id: 'minutes', className: theme.minutes, onClick: this.switchDisplay },
               ('0' + this.state.displayTime.getMinutes()).slice(-2)
             ),
             this.renderAMPMLabels()

From 0bce911718b55d4f4cad19278bae7a991862125f Mon Sep 17 00:00:00 2001
From: Weiler <zweiler@amazon.com>
Date: Sat, 6 Aug 2016 18:08:41 -0700
Subject: [PATCH 0729/1024] Fixes Autocomplete error when provided value prop
 that is not in source option while preserving value text

---
 components/autocomplete/Autocomplete.js | 9 +++++++--
 lib/autocomplete/Autocomplete.js        | 9 +++++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index 6bf969575..3401f9478 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -154,8 +154,13 @@ const factory = (Chip, Input) => {
    }
 
    query (key) {
-     return !this.props.multiple && key ? this.source().get(key) : '';
-   }
+      var query_value = '';
+      if(!this.props.multiple && key) {
+        var source_value = this.source().get(key)
+        query_value = source_value ? source_value : key;
+      }
+      return query_value;
+    }
 
    suggestions () {
      let suggest = new Map();
diff --git a/lib/autocomplete/Autocomplete.js b/lib/autocomplete/Autocomplete.js
index af7a0d066..9311d9abe 100644
--- a/lib/autocomplete/Autocomplete.js
+++ b/lib/autocomplete/Autocomplete.js
@@ -165,8 +165,13 @@ var factory = function factory(Chip, Input) {
     }, {
       key: 'query',
       value: function query(key) {
-        return !this.props.multiple && key ? this.source().get(key) : '';
+      var query_value = '';
+      if(!this.props.multiple && key) {
+        var source_value = this.source().get(key)
+        query_value = source_value ? source_value : key;
       }
+      return query_value;
+    }
     }, {
       key: 'suggestions',
       value: function suggestions() {
@@ -474,4 +479,4 @@ var factory = function factory(Chip, Input) {
 var Autocomplete = factory(_Chip2.default, _Input2.default);
 exports.default = (0, _reactCssThemr.themr)(_identifiers.AUTOCOMPLETE)(Autocomplete);
 exports.autocompleteFactory = factory;
-exports.Autocomplete = Autocomplete;
\ No newline at end of file
+exports.Autocomplete = Autocomplete;

From 01711e66586585e319476b875432e8d22d155a89 Mon Sep 17 00:00:00 2001
From: Weiler <zweiler@amazon.com>
Date: Sat, 6 Aug 2016 18:37:16 -0700
Subject: [PATCH 0730/1024] Fixes linting errors

---
 components/autocomplete/Autocomplete.js |  6 +++---
 lib/autocomplete/Autocomplete.js        | 14 +++++++-------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index 3401f9478..673daccff 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -154,9 +154,9 @@ const factory = (Chip, Input) => {
    }
 
    query (key) {
-      var query_value = '';
-      if(!this.props.multiple && key) {
-        var source_value = this.source().get(key)
+      let query_value = '';
+      if (!this.props.multiple && key) {
+        const source_value = this.source().get(key);
         query_value = source_value ? source_value : key;
       }
       return query_value;
diff --git a/lib/autocomplete/Autocomplete.js b/lib/autocomplete/Autocomplete.js
index 9311d9abe..70f2a8dbc 100644
--- a/lib/autocomplete/Autocomplete.js
+++ b/lib/autocomplete/Autocomplete.js
@@ -165,13 +165,13 @@ var factory = function factory(Chip, Input) {
     }, {
       key: 'query',
       value: function query(key) {
-      var query_value = '';
-      if(!this.props.multiple && key) {
-        var source_value = this.source().get(key)
-        query_value = source_value ? source_value : key;
+        var query_value = '';
+        if (!this.props.multiple && key) {
+          var source_value = this.source().get(key);
+          query_value = source_value ? source_value : key;
+        }
+        return query_value;
       }
-      return query_value;
-    }
     }, {
       key: 'suggestions',
       value: function suggestions() {
@@ -479,4 +479,4 @@ var factory = function factory(Chip, Input) {
 var Autocomplete = factory(_Chip2.default, _Input2.default);
 exports.default = (0, _reactCssThemr.themr)(_identifiers.AUTOCOMPLETE)(Autocomplete);
 exports.autocompleteFactory = factory;
-exports.Autocomplete = Autocomplete;
+exports.Autocomplete = Autocomplete;
\ No newline at end of file

From f56eb82c3d6b9bcd40576714ab3f9afe3f86ff3f Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 7 Aug 2016 13:05:21 +0200
Subject: [PATCH 0731/1024] Avoid !important in progress spec

---
 spec/components/progress.js | 4 ++--
 spec/style.scss             | 6 ++++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/spec/components/progress.js b/spec/components/progress.js
index 82147c959..e032fe2b2 100644
--- a/spec/components/progress.js
+++ b/spec/components/progress.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ProgressBar from '../../components/progress_bar';
-import style from '../style'
+import style from '../style';
 
 const initialState = {
   progress: 0,
@@ -49,7 +49,7 @@ class ProgressBarTest extends React.Component {
         <p style={{margin: '10px auto'}}>Circular</p>
         <ProgressBar type='circular' mode='indeterminate'/>
         <p style={{margin: '10px auto'}}>Circular with custom size</p>
-        <ProgressBar type='circular' mode='indeterminate' className={style.customSizedProgress}/>
+        <ProgressBar className={style.customSizedProgress} type='circular' mode='indeterminate' theme={style} />
       </section>
     );
   }
diff --git a/spec/style.scss b/spec/style.scss
index ca3fea306..ac92d051e 100644
--- a/spec/style.scss
+++ b/spec/style.scss
@@ -141,6 +141,8 @@ $offset: 1.8 * $unit;
 }
 
 .customSizedProgress {
-  width: 40px !important;
-  height: 40px !important;
+  &.circular {
+    width: 40px;
+    height: 40px;
+  }
 }

From fae42a89d0564456ad721d5ac3115c8fd7151a01 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 7 Aug 2016 13:20:11 +0200
Subject: [PATCH 0732/1024] Fix linter errors

---
 components/date_picker/__test__/index.spec.js | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/components/date_picker/__test__/index.spec.js b/components/date_picker/__test__/index.spec.js
index 79f264314..d44be7dd3 100644
--- a/components/date_picker/__test__/index.spec.js
+++ b/components/date_picker/__test__/index.spec.js
@@ -1,5 +1,4 @@
 import expect from 'expect';
-import React from 'react';
 import theme from '../theme.scss';
 import { DatePickerDialog } from '../DatePicker';
 import utils from '../../utils/testing';
@@ -8,9 +7,7 @@ describe('DatePickerDialog', function () {
   describe('#on mount', function () {
     it('passes value through to calendar if no maxDate/minDate specified', function () {
       const value = new Date(2016, 1, 1);
-
       const wrapper = utils.shallowRenderComponent(DatePickerDialog, {theme, value});
-
       expect(getDatePassedToCalendar(wrapper)).toBe(value);
     });
 
@@ -19,9 +16,7 @@ describe('DatePickerDialog', function () {
 
       it('passes through a value after minDate', function () {
         const value = new Date(2016, 1, 3);
-
         const wrapper = utils.shallowRenderComponent(DatePickerDialog, {theme, value, minDate});
-
         expect(getDatePassedToCalendar(wrapper)).toBe(value);
       });
 
@@ -29,7 +24,6 @@ describe('DatePickerDialog', function () {
         const wrapper = utils.shallowRenderComponent(DatePickerDialog, {
           theme, value: new Date(2016, 1, 1), minDate
         });
-
         expect(getDatePassedToCalendar(wrapper)).toBe(minDate);
       });
     });
@@ -39,9 +33,7 @@ describe('DatePickerDialog', function () {
 
       it('passes through a value before maxDate', function () {
         const value = new Date(2016, 1, 1);
-
         const wrapper = utils.shallowRenderComponent(DatePickerDialog, {theme, value, maxDate});
-
         expect(getDatePassedToCalendar(wrapper)).toBe(value);
       });
 
@@ -49,7 +41,6 @@ describe('DatePickerDialog', function () {
         const wrapper = utils.shallowRenderComponent(DatePickerDialog, {
           theme, value: new Date(2016, 1, 3), maxDate
         });
-
         expect(getDatePassedToCalendar(wrapper)).toBe(maxDate);
       });
     });
@@ -65,7 +56,6 @@ describe('DatePickerDialog', function () {
           minDate,
           maxDate
         });
-
         expect(getDatePassedToCalendar(wrapper)).toBe(minDate);
       });
 
@@ -76,7 +66,6 @@ describe('DatePickerDialog', function () {
           minDate,
           maxDate
         });
-
         expect(getDatePassedToCalendar(wrapper)).toBe(maxDate);
       });
 
@@ -87,7 +76,7 @@ describe('DatePickerDialog', function () {
       });
     });
 
-    function getDatePassedToCalendar(wrapper) {
+    function getDatePassedToCalendar (wrapper) {
       return wrapper.props.children[1].props.children.props.selectedDate;
     }
   });

From 39694e57aa2bed19ca57a7ef971e50e9ae43affa Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 7 Aug 2016 14:09:38 +0200
Subject: [PATCH 0733/1024] Add an active property to control pickers from
 outside

---
 components/date_picker/DatePicker.js | 13 +++++++++++--
 components/date_picker/readme.md     |  1 +
 components/time_picker/TimePicker.js | 16 +++++++++++++---
 components/time_picker/readme.md     |  1 +
 spec/components/pickers.js           | 11 +++++++++--
 5 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/components/date_picker/DatePicker.js b/components/date_picker/DatePicker.js
index b4f8e2fd3..7a6bdd361 100644
--- a/components/date_picker/DatePicker.js
+++ b/components/date_picker/DatePicker.js
@@ -14,6 +14,7 @@ import datePickerDialogFactory from './DatePickerDialog.js';
 const factory = (Input, DatePickerDialog) => {
   class DatePicker extends Component {
     static propTypes = {
+      active: PropTypes.bool,
       autoOk: PropTypes.bool,
       className: PropTypes.string,
       error: PropTypes.string,
@@ -47,14 +48,21 @@ const factory = (Input, DatePickerDialog) => {
     };
 
     static defaultProps = {
+      active: false,
       locale: 'en',
       sundayFirstDayOfWeek: false
     };
 
     state = {
-      active: false
+      active: this.props.active
     };
 
+    componentWillReceiveProps (nextProps) {
+      if (this.state.active !== nextProps.active) {
+        this.setState({ active: nextProps.active });
+      }
+    }
+
     handleDismiss = () => {
       this.setState({active: false});
     };
@@ -88,7 +96,8 @@ const factory = (Input, DatePickerDialog) => {
     };
 
     render () {
-      const { autoOk, inputClassName, inputFormat, locale, maxDate, minDate,
+      const { active, // eslint-disable-line
+        autoOk, inputClassName, inputFormat, locale, maxDate, minDate,
         onEscKeyDown, onOverlayClick, readonly, sundayFirstDayOfWeek, value,
         ...others } = this.props;
       const finalInputFormat = inputFormat || time.formatDate;
diff --git a/components/date_picker/readme.md b/components/date_picker/readme.md
index 2a71e34d6..06eeae5e5 100644
--- a/components/date_picker/readme.md
+++ b/components/date_picker/readme.md
@@ -46,6 +46,7 @@ If you want to provide a theme via context, the component key is `RTDatePicker`.
 
 | Name            | Type            | Default       | Description |
 |:-----|:-----|:-----|:-----|
+| `active`        | `Boolean`       | `false`       | Allows to control if the picker should be shown from outside. Beware you should update the prop when the Dialog is closed. |
 | `autoOk`        | `Boolean`       | `false`       | Automatically selects a date upon clicking on a day. |
 | `className`     | `String`        |               | This class will be placed at the top of the `DatePickerDialog` component so you can provide custom styles.|
 | `inputClassName`| `String`        |               | This class will be applied to `Input` component of `DatePicker`. |
diff --git a/components/time_picker/TimePicker.js b/components/time_picker/TimePicker.js
index 627836d9c..dcef30bab 100644
--- a/components/time_picker/TimePicker.js
+++ b/components/time_picker/TimePicker.js
@@ -11,6 +11,7 @@ import timePickerDialogFactory from './TimePickerDialog.js';
 const factory = (TimePickerDialog, Input) => {
   class TimePicker extends Component {
     static propTypes = {
+      active: PropTypes.bool,
       className: PropTypes.string,
       error: PropTypes.string,
       format: PropTypes.oneOf(['24hr', 'ampm']),
@@ -29,14 +30,21 @@ const factory = (TimePickerDialog, Input) => {
     };
 
     static defaultProps = {
+      active: false,
       className: '',
       format: '24hr'
     };
 
     state = {
-      active: false
+      active: this.props.active
     };
 
+    componentWillReceiveProps (nextProps) {
+      if (this.state.active !== nextProps.active) {
+        this.setState({ active: nextProps.active });
+      }
+    }
+
     handleDismiss = () => {
       this.setState({active: false});
     };
@@ -70,8 +78,10 @@ const factory = (TimePickerDialog, Input) => {
     };
 
     render () {
-      const { value, format, inputClassName, onEscKeyDown, onOverlayClick,
-        readonly, ...others } = this.props;
+      const {
+        active, // eslint-disable-line
+        format, inputClassName, onEscKeyDown, onOverlayClick, readonly, value, ...others
+      } = this.props;
       const formattedTime = value ? time.formatTime(value, format) : '';
       return (
         <div data-react-toolbox='time-picker'>
diff --git a/components/time_picker/readme.md b/components/time_picker/readme.md
index cf12c5ab9..bdf879a8d 100644
--- a/components/time_picker/readme.md
+++ b/components/time_picker/readme.md
@@ -35,6 +35,7 @@ If you want to provide a theme via context, the component key is `RTTimePicker`.
 
 | Name            | Type        | Default     | Description|
 |:-----|:-----|:-----|:-----|
+| `active`        | `Boolean`       | `false`       | Allows to control if the picker should be shown from outside. Beware you should update the prop when the Dialog is closed. |
 | `className`     | `String`    |             | This class will be placed at the top of the `TimePickerDialog` component so you can provide custom styles.|
 | `error`         | `String`    |             | Provide error text which will be displayed under the field.|
 | `inputClassName`| `String`        |         | This class will be applied to `Input` component of `TimePicker`. |
diff --git a/spec/components/pickers.js b/spec/components/pickers.js
index 227368cc0..3c1f996e1 100644
--- a/spec/components/pickers.js
+++ b/spec/components/pickers.js
@@ -12,15 +12,21 @@ datetime.setMinutes(28);
 class PickersTest extends React.Component {
   state = {
     date2: datetime,
+    firstActive: false,
     time2: datetime
   };
 
   handleChange = (item, value) => {
     const newState = {};
+    newState.firstActive = false;
     newState[item] = value;
     this.setState(newState);
   };
 
+  makeFirstUnactive = () => {
+    this.setState({ firstActive: false });
+  };
+
   localeExample = {
     months: 'urtarrila_otsaila_martxoa_apirila_maiatza_ekaina_uztaila_abuztua_iraila_urria_azaroa_abendua'.split('_'),
     monthsShort: 'urt._ots._mar._api._mai._eka._uzt._abu._ira._urr._aza._abe.'.split('_'),
@@ -36,10 +42,11 @@ class PickersTest extends React.Component {
         <p>Date pickers and time pickers with Material flavour.</p>
 
         <DatePicker
+          active={this.state.firstActive}
           label='Birthdate'
           onChange={this.handleChange.bind(this, 'date1')}
-          onEscKeyDown={() => console.log('esc key down')}
-          onOverlayClick={() => console.log('overlay click')}
+          onEscKeyDown={this.makeFirstUnactive}
+          onOverlayClick={this.makeFirstUnactive}
           value={this.state.date1}
           sundayFirstDayOfWeek
         />

From fcc7902839aafa389056b7c9fc01ba8153af97fb Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 7 Aug 2016 18:55:31 +0200
Subject: [PATCH 0734/1024] Better tooltips

---
 components/tooltip/Tooltip.js | 108 ++++++++++++++++++++++++++--------
 components/tooltip/index.js   |   6 +-
 components/tooltip/readme.md  |   2 +-
 components/tooltip/theme.scss |   7 +--
 4 files changed, 90 insertions(+), 33 deletions(-)

diff --git a/components/tooltip/Tooltip.js b/components/tooltip/Tooltip.js
index 4c82e93d7..020e454d5 100644
--- a/components/tooltip/Tooltip.js
+++ b/components/tooltip/Tooltip.js
@@ -1,10 +1,26 @@
 import React, { Component, PropTypes } from 'react';
+import Portal from '../hoc/Portal';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
 import { TOOLTIP } from '../identifiers.js';
+import events from '../utils/events';
 
-const factory = (defaultTheme = {}) => {
-  const Tooltip = (ComposedComponent) => {
+const defaults = {
+  className: '',
+  delay: 0,
+  hideOnClick: true,
+  theme: {}
+};
+
+const tooltipFactory = (options = {}) => {
+  const {
+    className: defaultClassName,
+    delay: defaultDelay,
+    hideOnClick: defaultHideOnClick,
+    theme: defaultTheme
+  } = {...defaults, ...options};
+
+  return ComposedComponent => {
     class TooltippedComponent extends Component {
       static propTypes = {
         children: PropTypes.any,
@@ -23,51 +39,98 @@ const factory = (defaultTheme = {}) => {
       };
 
       static defaultProps = {
-        className: '',
-        tooltipDelay: 0,
-        tooltipHideOnClick: true
+        className: defaultClassName,
+        tooltipDelay: defaultDelay,
+        tooltipHideOnClick: defaultHideOnClick
       };
 
       state = {
-        active: false
+        active: false,
+        visible: false
       };
 
-      handleMouseEnter = (event) => {
+      componentWillUnmount () {
+        if (this.refs.tooltip) {
+          events.removeEventListenerOnTransitionEnded(this.refs.tooltip, this.onTransformEnd);
+        }
+      }
+
+      activate (top, left) {
+        if (this.timeout) clearTimeout(this.timeout);
+        this.setState({ visible: true });
+        this.timeout = setTimeout(() => {
+          this.setState({ active: true, top, left });
+        }, this.props.tooltipDelay);
+      }
+
+      deactivate () {
         if (this.timeout) clearTimeout(this.timeout);
-        this.timeout = setTimeout(() =>this.setState({active: true}), this.props.tooltipDelay);
+        if (this.state.active) {
+          events.addEventListenerOnTransitionEnded(this.refs.tooltip, this.onTransformEnd);
+          this.setState({ active: false });
+        } else if (this.state.visible) {
+          this.setState({ visible: false });
+        }
+      }
+
+      onTransformEnd = (e) => {
+        if (e.propertyName === 'transform') {
+          events.removeEventListenerOnTransitionEnded(this.refs.tooltip, this.onTransformEnd);
+          this.setState({ visible: false });
+        }
+      };
+
+      handleMouseEnter = (event) => {
+        const yOffset = window.scrollY || window.pageYOffset;
+        const xOffset = window.scrollX || window.pageXOffset;
+        const { top, left, height, width } = event.target.getBoundingClientRect();
+        this.activate(top + height + yOffset, left + (width / 2) + xOffset);
         if (this.props.onMouseEnter) this.props.onMouseEnter(event);
       };
 
       handleMouseLeave = (event) => {
-        if (this.timeout) clearTimeout(this.timeout);
-        if (this.state.active) this.setState({active: false});
+        this.deactivate();
         if (this.props.onMouseLeave) this.props.onMouseLeave(event);
       };
 
       handleClick = (event) => {
-        if (this.timeout) clearTimeout(this.timeout);
-        if (this.props.tooltipHideOnClick) this.setState({active: false});
+        if (this.props.tooltipHideOnClick) this.deactivate();
         if (this.props.onClick) this.props.onClick(event);
       };
 
       render () {
-        const {children, className, tooltip,
-          tooltipDelay, tooltipHideOnClick, ...other} = this.props; //eslint-disable-line no-unused-vars
-        const composedClassName = classnames(this.props.theme.tooltipWrapper, className);
-        const tooltipClassName = classnames(this.props.theme.tooltip, {
-          [this.props.theme.tooltipActive]: this.state.active
-        });
+        const { active, left, top, visible } = this.state;
+        const {
+          children,
+          className,
+          theme,
+          tooltip,
+          tooltipDelay,       //eslint-disable-line no-unused-vars
+          tooltipHideOnClick, //eslint-disable-line no-unused-vars
+          ...other
+        } = this.props;
 
         return (
           <ComposedComponent
             {...other}
-            className={composedClassName}
+            className={className}
             onClick={this.handleClick}
             onMouseEnter={this.handleMouseEnter}
             onMouseLeave={this.handleMouseLeave}
+            theme={theme}
           >
             {children ? children : null}
-            <span data-react-toolbox="tooltip" className={tooltipClassName}>{tooltip}</span>
+            {visible && (
+              <Portal>
+                <span
+                  ref="tooltip"
+                  children={tooltip}
+                  className={classnames(theme.tooltip, {[theme.tooltipActive]: active})}
+                  data-react-toolbox="tooltip"
+                  style={{ top, left }}
+                />
+              </Portal>
+            )}
           </ComposedComponent>
         );
       }
@@ -75,9 +138,6 @@ const factory = (defaultTheme = {}) => {
 
     return themr(TOOLTIP, defaultTheme)(TooltippedComponent);
   };
-
-  return Tooltip;
 };
 
-export default factory();
-export { factory as tooltipFactory };
+export default tooltipFactory;
diff --git a/components/tooltip/index.js b/components/tooltip/index.js
index 3fcd819f2..9612facdd 100644
--- a/components/tooltip/index.js
+++ b/components/tooltip/index.js
@@ -1,4 +1,6 @@
-import { tooltipFactory } from './Tooltip.js';
+import tooltipFactory from './Tooltip.js';
 import theme from './theme.scss';
 
-export default tooltipFactory(theme);
+const themedTooltipFactory = (options) => tooltipFactory({ ...options, theme });
+export default tooltipFactory({ theme });
+export { themedTooltipFactory as tooltipFactory };
diff --git a/components/tooltip/readme.md b/components/tooltip/readme.md
index 19db1ee45..6b5cde171 100644
--- a/components/tooltip/readme.md
+++ b/components/tooltip/readme.md
@@ -1,6 +1,6 @@
 # Tooltip
 
-A Tooltip is useful to show information on hover in any kind of component. We have a component that can be used as a **decorator** for any kind of component. You just have to take into account that the overflow in the component should be visible.
+A Tooltip is useful to show information on hover in any kind of component. We have a component that can be used as a **decorator** for any kind of component. Also, it's factory function is exposed so you can create your own decorator with specific properties.
 
 <!-- example -->
 ```jsx
diff --git a/components/tooltip/theme.scss b/components/tooltip/theme.scss
index e87d013f2..ad9e11fb0 100644
--- a/components/tooltip/theme.scss
+++ b/components/tooltip/theme.scss
@@ -3,14 +3,8 @@
 @import "http://github.com/mixins";
 @import "http://github.com/config";
 
-.tooltipWrapper {
-  position: relative;
-}
-
 .tooltip {
   position: absolute;
-  top: 100%;
-  left: 50%;
   z-index: $z-index-higher;
   display: block;
   max-width: $tooltip-max-width;
@@ -22,6 +16,7 @@
   line-height: $font-size-small;
   color: $tooltip-color;
   text-align: center;
+  pointer-events: none;
   text-transform: none;
   background: $tooltip-background;
   border-radius: $tooltip-border-radius;

From b58254d2ba68d5e5411a3f25c3b003b46a451170 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 7 Aug 2016 19:01:45 +0200
Subject: [PATCH 0735/1024] Latest build

---
 lib/date_picker/DatePicker.js |  14 +++-
 lib/time_picker/TimePicker.js |  16 ++++-
 lib/tooltip/Tooltip.js        | 130 ++++++++++++++++++++++++++--------
 lib/tooltip/index.js          |  11 ++-
 lib/tooltip/theme.scss        |   7 +-
 5 files changed, 135 insertions(+), 43 deletions(-)

diff --git a/lib/date_picker/DatePicker.js b/lib/date_picker/DatePicker.js
index 1e8463eed..a8409ea52 100644
--- a/lib/date_picker/DatePicker.js
+++ b/lib/date_picker/DatePicker.js
@@ -77,7 +77,7 @@ var factory = function factory(Input, DatePickerDialog) {
       }
 
       return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(DatePicker)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
-        active: false
+        active: _this.props.active
       }, _this.handleDismiss = function () {
         _this.setState({ active: false });
       }, _this.handleInputFocus = function (event) {
@@ -102,9 +102,17 @@ var factory = function factory(Input, DatePickerDialog) {
     }
 
     _createClass(DatePicker, [{
+      key: 'componentWillReceiveProps',
+      value: function componentWillReceiveProps(nextProps) {
+        if (this.state.active !== nextProps.active) {
+          this.setState({ active: nextProps.active });
+        }
+      }
+    }, {
       key: 'render',
       value: function render() {
         var _props = this.props;
+        var active = _props.active;
         var autoOk = _props.autoOk;
         var inputClassName = _props.inputClassName;
         var inputFormat = _props.inputFormat;
@@ -117,7 +125,7 @@ var factory = function factory(Input, DatePickerDialog) {
         var sundayFirstDayOfWeek = _props.sundayFirstDayOfWeek;
         var value = _props.value;
 
-        var others = _objectWithoutProperties(_props, ['autoOk', 'inputClassName', 'inputFormat', 'locale', 'maxDate', 'minDate', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'sundayFirstDayOfWeek', 'value']);
+        var others = _objectWithoutProperties(_props, ['active', 'autoOk', 'inputClassName', 'inputFormat', 'locale', 'maxDate', 'minDate', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'sundayFirstDayOfWeek', 'value']);
 
         var finalInputFormat = inputFormat || _time2.default.formatDate;
         var date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined;
@@ -164,6 +172,7 @@ var factory = function factory(Input, DatePickerDialog) {
   }(_react.Component);
 
   DatePicker.propTypes = {
+    active: _react.PropTypes.bool,
     autoOk: _react.PropTypes.bool,
     className: _react.PropTypes.string,
     error: _react.PropTypes.string,
@@ -187,6 +196,7 @@ var factory = function factory(Input, DatePickerDialog) {
     value: _react.PropTypes.oneOfType([_react.PropTypes.instanceOf(Date), _react.PropTypes.string])
   };
   DatePicker.defaultProps = {
+    active: false,
     locale: 'en',
     sundayFirstDayOfWeek: false
   };
diff --git a/lib/time_picker/TimePicker.js b/lib/time_picker/TimePicker.js
index 13849a51d..d4dc2e755 100644
--- a/lib/time_picker/TimePicker.js
+++ b/lib/time_picker/TimePicker.js
@@ -69,7 +69,7 @@ var factory = function factory(TimePickerDialog, Input) {
       }
 
       return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TimePicker)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
-        active: false
+        active: _this.props.active
       }, _this.handleDismiss = function () {
         _this.setState({ active: false });
       }, _this.handleInputFocus = function (event) {
@@ -94,17 +94,25 @@ var factory = function factory(TimePickerDialog, Input) {
     }
 
     _createClass(TimePicker, [{
+      key: 'componentWillReceiveProps',
+      value: function componentWillReceiveProps(nextProps) {
+        if (this.state.active !== nextProps.active) {
+          this.setState({ active: nextProps.active });
+        }
+      }
+    }, {
       key: 'render',
       value: function render() {
         var _props = this.props;
-        var value = _props.value;
+        var active = _props.active;
         var format = _props.format;
         var inputClassName = _props.inputClassName;
         var onEscKeyDown = _props.onEscKeyDown;
         var onOverlayClick = _props.onOverlayClick;
         var readonly = _props.readonly;
+        var value = _props.value;
 
-        var others = _objectWithoutProperties(_props, ['value', 'format', 'inputClassName', 'onEscKeyDown', 'onOverlayClick', 'readonly']);
+        var others = _objectWithoutProperties(_props, ['active', 'format', 'inputClassName', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'value']);
 
         var formattedTime = value ? _time2.default.formatTime(value, format) : '';
         return _react2.default.createElement(
@@ -142,6 +150,7 @@ var factory = function factory(TimePickerDialog, Input) {
   }(_react.Component);
 
   TimePicker.propTypes = {
+    active: _react.PropTypes.bool,
     className: _react.PropTypes.string,
     error: _react.PropTypes.string,
     format: _react.PropTypes.oneOf(['24hr', 'ampm']),
@@ -159,6 +168,7 @@ var factory = function factory(TimePickerDialog, Input) {
     value: _react.PropTypes.object
   };
   TimePicker.defaultProps = {
+    active: false,
     className: '',
     format: '24hr'
   };
diff --git a/lib/tooltip/Tooltip.js b/lib/tooltip/Tooltip.js
index 07a93b233..f1dfa3ca4 100644
--- a/lib/tooltip/Tooltip.js
+++ b/lib/tooltip/Tooltip.js
@@ -3,7 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tooltipFactory = undefined;
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
@@ -13,6 +12,10 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
+var _Portal = require('../hoc/Portal');
+
+var _Portal2 = _interopRequireDefault(_Portal);
+
 var _classnames2 = require('classnames');
 
 var _classnames3 = _interopRequireDefault(_classnames2);
@@ -21,6 +24,10 @@ var _reactCssThemr = require('react-css-themr');
 
 var _identifiers = require('../identifiers.js');
 
+var _events = require('../utils/events');
+
+var _events2 = _interopRequireDefault(_events);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -33,10 +40,25 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-var factory = function factory() {
-  var defaultTheme = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
+var defaults = {
+  className: '',
+  delay: 0,
+  hideOnClick: true,
+  theme: {}
+};
+
+var tooltipFactory = function tooltipFactory() {
+  var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
+
+  var _defaults$options = _extends({}, defaults, options);
+
+  var defaultClassName = _defaults$options.className;
+  var defaultDelay = _defaults$options.delay;
+  var defaultHideOnClick = _defaults$options.hideOnClick;
+  var defaultTheme = _defaults$options.theme;
+
 
-  var Tooltip = function Tooltip(ComposedComponent) {
+  return function (ComposedComponent) {
     var TooltippedComponent = function (_Component) {
       _inherits(TooltippedComponent, _Component);
 
@@ -52,53 +74,102 @@ var factory = function factory() {
         }
 
         return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TooltippedComponent)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
-          active: false
+          active: false,
+          visible: false
+        }, _this.onTransformEnd = function (e) {
+          if (e.propertyName === 'transform') {
+            _events2.default.removeEventListenerOnTransitionEnded(_this.refs.tooltip, _this.onTransformEnd);
+            _this.setState({ visible: false });
+          }
         }, _this.handleMouseEnter = function (event) {
-          if (_this.timeout) clearTimeout(_this.timeout);
-          _this.timeout = setTimeout(function () {
-            return _this.setState({ active: true });
-          }, _this.props.tooltipDelay);
+          var yOffset = window.scrollY || window.pageYOffset;
+          var xOffset = window.scrollX || window.pageXOffset;
+
+          var _event$target$getBoun = event.target.getBoundingClientRect();
+
+          var top = _event$target$getBoun.top;
+          var left = _event$target$getBoun.left;
+          var height = _event$target$getBoun.height;
+          var width = _event$target$getBoun.width;
+
+          _this.activate(top + height + yOffset, left + width / 2 + xOffset);
           if (_this.props.onMouseEnter) _this.props.onMouseEnter(event);
         }, _this.handleMouseLeave = function (event) {
-          if (_this.timeout) clearTimeout(_this.timeout);
-          if (_this.state.active) _this.setState({ active: false });
+          _this.deactivate();
           if (_this.props.onMouseLeave) _this.props.onMouseLeave(event);
         }, _this.handleClick = function (event) {
-          if (_this.timeout) clearTimeout(_this.timeout);
-          if (_this.props.tooltipHideOnClick) _this.setState({ active: false });
+          if (_this.props.tooltipHideOnClick) _this.deactivate();
           if (_this.props.onClick) _this.props.onClick(event);
         }, _temp), _possibleConstructorReturn(_this, _ret);
       }
 
       _createClass(TooltippedComponent, [{
+        key: 'componentWillUnmount',
+        value: function componentWillUnmount() {
+          if (this.refs.tooltip) {
+            _events2.default.removeEventListenerOnTransitionEnded(this.refs.tooltip, this.onTransformEnd);
+          }
+        }
+      }, {
+        key: 'activate',
+        value: function activate(top, left) {
+          var _this2 = this;
+
+          if (this.timeout) clearTimeout(this.timeout);
+          this.setState({ visible: true });
+          this.timeout = setTimeout(function () {
+            _this2.setState({ active: true, top: top, left: left });
+          }, this.props.tooltipDelay);
+        }
+      }, {
+        key: 'deactivate',
+        value: function deactivate() {
+          if (this.timeout) clearTimeout(this.timeout);
+          if (this.state.active) {
+            _events2.default.addEventListenerOnTransitionEnded(this.refs.tooltip, this.onTransformEnd);
+            this.setState({ active: false });
+          } else if (this.state.visible) {
+            this.setState({ visible: false });
+          }
+        }
+      }, {
         key: 'render',
         value: function render() {
+          var _state = this.state;
+          var active = _state.active;
+          var left = _state.left;
+          var top = _state.top;
+          var visible = _state.visible;
           var _props = this.props;
           var children = _props.children;
           var className = _props.className;
+          var theme = _props.theme;
           var tooltip = _props.tooltip;
           var tooltipDelay = _props.tooltipDelay;
           var tooltipHideOnClick = _props.tooltipHideOnClick;
 
-          var other = _objectWithoutProperties(_props, ['children', 'className', 'tooltip', 'tooltipDelay', 'tooltipHideOnClick']); //eslint-disable-line no-unused-vars
-
-
-          var composedClassName = (0, _classnames3.default)(this.props.theme.tooltipWrapper, className);
-          var tooltipClassName = (0, _classnames3.default)(this.props.theme.tooltip, _defineProperty({}, this.props.theme.tooltipActive, this.state.active));
+          var other = _objectWithoutProperties(_props, ['children', 'className', 'theme', 'tooltip', 'tooltipDelay', 'tooltipHideOnClick']);
 
           return _react2.default.createElement(
             ComposedComponent,
             _extends({}, other, {
-              className: composedClassName,
+              className: className,
               onClick: this.handleClick,
               onMouseEnter: this.handleMouseEnter,
-              onMouseLeave: this.handleMouseLeave
+              onMouseLeave: this.handleMouseLeave,
+              theme: theme
             }),
             children ? children : null,
-            _react2.default.createElement(
-              'span',
-              { 'data-react-toolbox': 'tooltip', className: tooltipClassName },
-              tooltip
+            visible && _react2.default.createElement(
+              _Portal2.default,
+              null,
+              _react2.default.createElement('span', {
+                ref: 'tooltip',
+                children: tooltip,
+                className: (0, _classnames3.default)(theme.tooltip, _defineProperty({}, theme.tooltipActive, active)),
+                'data-react-toolbox': 'tooltip',
+                style: { top: top, left: left }
+              })
             )
           );
         }
@@ -123,17 +194,14 @@ var factory = function factory() {
       tooltipHideOnClick: _react.PropTypes.bool
     };
     TooltippedComponent.defaultProps = {
-      className: '',
-      tooltipDelay: 0,
-      tooltipHideOnClick: true
+      className: defaultClassName,
+      tooltipDelay: defaultDelay,
+      tooltipHideOnClick: defaultHideOnClick
     };
 
 
     return (0, _reactCssThemr.themr)(_identifiers.TOOLTIP, defaultTheme)(TooltippedComponent);
   };
-
-  return Tooltip;
 };
 
-exports.default = factory();
-exports.tooltipFactory = factory;
\ No newline at end of file
+exports.default = tooltipFactory;
\ No newline at end of file
diff --git a/lib/tooltip/index.js b/lib/tooltip/index.js
index 447d04c5b..43d4180a9 100644
--- a/lib/tooltip/index.js
+++ b/lib/tooltip/index.js
@@ -3,13 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.tooltipFactory = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 var _Tooltip = require('./Tooltip.js');
 
+var _Tooltip2 = _interopRequireDefault(_Tooltip);
+
 var _theme = require('./theme.scss');
 
 var _theme2 = _interopRequireDefault(_theme);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-exports.default = (0, _Tooltip.tooltipFactory)(_theme2.default);
\ No newline at end of file
+var themedTooltipFactory = function themedTooltipFactory(options) {
+  return (0, _Tooltip2.default)(_extends({}, options, { theme: _theme2.default }));
+};
+exports.default = (0, _Tooltip2.default)({ theme: _theme2.default });
+exports.tooltipFactory = themedTooltipFactory;
\ No newline at end of file
diff --git a/lib/tooltip/theme.scss b/lib/tooltip/theme.scss
index e87d013f2..ad9e11fb0 100644
--- a/lib/tooltip/theme.scss
+++ b/lib/tooltip/theme.scss
@@ -3,14 +3,8 @@
 @import "http://github.com/mixins";
 @import "http://github.com/config";
 
-.tooltipWrapper {
-  position: relative;
-}
-
 .tooltip {
   position: absolute;
-  top: 100%;
-  left: 50%;
   z-index: $z-index-higher;
   display: block;
   max-width: $tooltip-max-width;
@@ -22,6 +16,7 @@
   line-height: $font-size-small;
   color: $tooltip-color;
   text-align: center;
+  pointer-events: none;
   text-transform: none;
   background: $tooltip-background;
   border-radius: $tooltip-border-radius;

From f250f6fa9547d0bc5f5f64a23390a4386455cb5c Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 7 Aug 2016 19:16:58 +0200
Subject: [PATCH 0736/1024] Update dependencies

---
 package.json            | 24 ++++++++++++------------
 spec/components/list.js |  4 ++--
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index f95b220a9..b94257e02 100644
--- a/package.json
+++ b/package.json
@@ -41,41 +41,41 @@
     "react-css-themr": "^1.2.0"
   },
   "devDependencies": {
-    "autoprefixer": "^6.3.6",
+    "autoprefixer": "^6.4.0",
     "babel-cli": "^6.8.0",
-    "babel-core": "^6.8.0",
+    "babel-core": "^6.13.2",
     "babel-eslint": "^6.0.4",
     "babel-loader": "^6.2.4",
     "babel-plugin-react-transform": "^2.0.2",
-    "babel-polyfill": "^6.8.0",
-    "babel-preset-es2015": "^6.6.0",
+    "babel-polyfill": "^6.13.0",
+    "babel-preset-es2015": "^6.13.2",
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-0": "^6.5.0",
     "bluebird": "^3.3.5",
     "cpx": "^1.3.1",
-    "cross-env": "^1.0.7",
+    "cross-env": "^2.0.0",
     "css-loader": "^0.23.1",
-    "eslint": "^2.9.0",
+    "eslint": "^3.2.2",
     "eslint-plugin-babel": "^3.2.0",
-    "eslint-plugin-react": "^5.1.1",
+    "eslint-plugin-react": "^6.0.0",
     "expect": "^1.20.1",
     "express": "^4.13.4",
     "extract-text-webpack-plugin": "^1.0.1",
     "glob": "^7.0.3",
-    "karma": "^0.13.22",
+    "karma": "^1.1.2",
     "karma-chrome-launcher": "^1.0.1",
     "karma-cli": "^1.0.0",
     "karma-mocha": "^1.0.1",
     "karma-phantomjs-launcher": "^1.0.0",
     "karma-webpack": "^1.7.0",
-    "mocha": "^2.4.5",
+    "mocha": "^3.0.1",
     "node-sass": "^3.7.0",
     "normalize.css": "^4.1.1",
     "phantomjs": "^2.1.7",
     "phantomjs-polyfill": "0.0.2",
     "phantomjs-prebuilt": "^2.1.7",
     "postcss-loader": "^0.9.1",
-    "react": "^15.2.0",
+    "react": "^15.2.1",
     "react-addons-css-transition-group": "^15.2.0",
     "react-addons-test-utils": "^15.0.2",
     "react-addons-update": "^15.3.0",
@@ -85,8 +85,8 @@
     "react-transform-hmr": "^1.0.4",
     "redbox-react": "^1.2.4",
     "rimraf": "^2.5.2",
-    "sass-lint": "1.7.0",
-    "sass-loader": "^3.2.0",
+    "sass-lint": "1.8.2",
+    "sass-loader": "^4.0.0",
     "sinon": "git://github.com/sinonjs/sinon.git#b672042043517b9f84e14ed0fb8265126168778a",
     "style-loader": "^0.13.1",
     "toolbox-loader": "0.0.3",
diff --git a/spec/components/list.js b/spec/components/list.js
index 715cdf390..431a8b88a 100644
--- a/spec/components/list.js
+++ b/spec/components/list.js
@@ -62,7 +62,7 @@ class ListTest extends React.Component {
               rightIcon='star'
             />
             <ListItem
-              avatar='https://pbs.twimg.com/profile_images/477103691506282499/bsIaPEiM_400x400.jpeg'
+              avatar='https://pbs.twimg.com/profile_images/755797598565531649/Whsf9259.jpg'
               caption='Tobias Van Schneider'
               legend='Designer at Spotify'
               rightIcon='star'
@@ -122,7 +122,7 @@ class ListTest extends React.Component {
               rightIcon='mail'
             />
             <ListItem
-              avatar='https://pbs.twimg.com/profile_images/477103691506282499/bsIaPEiM_400x400.jpeg'
+              avatar='https://pbs.twimg.com/profile_images/755797598565531649/Whsf9259.jpg'
               caption='Tobias Van Schneider'
               rightIcon='mail'
             />

From 041e00c741536df9c90a74fc69cf6675ddd500cb Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 7 Aug 2016 20:51:31 +0200
Subject: [PATCH 0737/1024] Fixes #586

---
 components/tooltip/Tooltip.js | 96 +++++++++++++++++++++++++++++------
 components/tooltip/readme.md  |  9 +++-
 components/tooltip/theme.scss | 36 +++++++++++--
 3 files changed, 118 insertions(+), 23 deletions(-)

diff --git a/components/tooltip/Tooltip.js b/components/tooltip/Tooltip.js
index 020e454d5..8da69e6f6 100644
--- a/components/tooltip/Tooltip.js
+++ b/components/tooltip/Tooltip.js
@@ -4,11 +4,22 @@ import classnames from 'classnames';
 import { themr } from 'react-css-themr';
 import { TOOLTIP } from '../identifiers.js';
 import events from '../utils/events';
+import utils from '../utils/utils';
+
+const POSITION = {
+  BOTTOM: 'bottom',
+  HORIZONTAL: 'horizontal',
+  LEFT: 'left',
+  RIGHT: 'right',
+  TOP: 'top',
+  VERTICAL: 'vertical'
+};
 
 const defaults = {
   className: '',
   delay: 0,
   hideOnClick: true,
+  position: POSITION.VERTICAL,
   theme: {}
 };
 
@@ -17,6 +28,7 @@ const tooltipFactory = (options = {}) => {
     className: defaultClassName,
     delay: defaultDelay,
     hideOnClick: defaultHideOnClick,
+    position: defaultPosition,
     theme: defaultTheme
   } = {...defaults, ...options};
 
@@ -35,17 +47,20 @@ const tooltipFactory = (options = {}) => {
         }),
         tooltip: PropTypes.string,
         tooltipDelay: PropTypes.number,
-        tooltipHideOnClick: PropTypes.bool
+        tooltipHideOnClick: PropTypes.bool,
+        tooltipPosition: PropTypes.oneOf(Object.keys(POSITION).map(key => POSITION[key]))
       };
 
       static defaultProps = {
         className: defaultClassName,
         tooltipDelay: defaultDelay,
-        tooltipHideOnClick: defaultHideOnClick
+        tooltipHideOnClick: defaultHideOnClick,
+        tooltipPosition: defaultPosition
       };
 
       state = {
         active: false,
+        position: this.props.tooltipPosition,
         visible: false
       };
 
@@ -55,9 +70,9 @@ const tooltipFactory = (options = {}) => {
         }
       }
 
-      activate (top, left) {
+      activate ({ top, left, position }) {
         if (this.timeout) clearTimeout(this.timeout);
-        this.setState({ visible: true });
+        this.setState({ visible: true, position });
         this.timeout = setTimeout(() => {
           this.setState({ active: true, top, left });
         }, this.props.tooltipDelay);
@@ -73,6 +88,55 @@ const tooltipFactory = (options = {}) => {
         }
       }
 
+      getPosition (element) {
+        const { tooltipPosition } = this.props;
+        if (tooltipPosition === POSITION.HORIZONTAL) {
+          const origin = element.getBoundingClientRect();
+          const { width: ww } = utils.getViewport();
+          const toRight = origin.left < ((ww / 2) - origin.width / 2);
+          return toRight ? POSITION.RIGHT : POSITION.LEFT;
+        } else if (tooltipPosition === POSITION.VERTICAL) {
+          const origin = element.getBoundingClientRect();
+          const { height: wh } = utils.getViewport();
+          const toBottom = origin.top < ((wh / 2) - origin.height / 2);
+          return toBottom ? POSITION.BOTTOM : POSITION.TOP;
+        } else {
+          return tooltipPosition;
+        }
+      }
+
+      calculatePosition (element) {
+        const position = this.getPosition(element);
+        const { top, left, height, width } = element.getBoundingClientRect();
+        const xOffset = window.scrollX || window.pageXOffset;
+        const yOffset = window.scrollY || window.pageYOffset;
+        if (position === POSITION.BOTTOM) {
+          return {
+            top: top + height + yOffset,
+            left: left + (width / 2) + xOffset,
+            position
+          };
+        } else if (position === POSITION.TOP) {
+          return {
+            top: top + yOffset,
+            left: left + (width / 2) + xOffset,
+            position
+          };
+        } else if (position === POSITION.LEFT) {
+          return {
+            top: top + (height / 2) + yOffset,
+            left: left + xOffset,
+            position
+          };
+        } else if (position === POSITION.RIGHT) {
+          return {
+            top: top + (height / 2) + yOffset,
+            left: left + width + xOffset,
+            position
+          };
+        }
+      }
+
       onTransformEnd = (e) => {
         if (e.propertyName === 'transform') {
           events.removeEventListenerOnTransitionEnded(this.refs.tooltip, this.onTransformEnd);
@@ -81,10 +145,7 @@ const tooltipFactory = (options = {}) => {
       };
 
       handleMouseEnter = (event) => {
-        const yOffset = window.scrollY || window.pageYOffset;
-        const xOffset = window.scrollX || window.pageXOffset;
-        const { top, left, height, width } = event.target.getBoundingClientRect();
-        this.activate(top + height + yOffset, left + (width / 2) + xOffset);
+        this.activate(this.calculatePosition(event.target));
         if (this.props.onMouseEnter) this.props.onMouseEnter(event);
       };
 
@@ -99,7 +160,8 @@ const tooltipFactory = (options = {}) => {
       };
 
       render () {
-        const { active, left, top, visible } = this.state;
+        const { active, left, top, position, visible } = this.state;
+        const positionClass = `tooltip${position.charAt(0).toUpperCase() + position.slice(1)}`;
         const {
           children,
           className,
@@ -107,9 +169,15 @@ const tooltipFactory = (options = {}) => {
           tooltip,
           tooltipDelay,       //eslint-disable-line no-unused-vars
           tooltipHideOnClick, //eslint-disable-line no-unused-vars
+          tooltipPosition,    //eslint-disable-line no-unused-vars
           ...other
         } = this.props;
 
+        const _className = classnames(theme.tooltip, {
+          [theme.tooltipActive]: active,
+          [theme[positionClass]]: theme[positionClass]
+        });
+
         return (
           <ComposedComponent
             {...other}
@@ -122,13 +190,9 @@ const tooltipFactory = (options = {}) => {
             {children ? children : null}
             {visible && (
               <Portal>
-                <span
-                  ref="tooltip"
-                  children={tooltip}
-                  className={classnames(theme.tooltip, {[theme.tooltipActive]: active})}
-                  data-react-toolbox="tooltip"
-                  style={{ top, left }}
-                />
+                <span ref="tooltip" className={_className} data-react-toolbox="tooltip" style={{top, left}}>
+                  <span className={theme.tooltipInner}>{tooltip}</span>
+                </span>
               </Portal>
             )}
           </ComposedComponent>
diff --git a/components/tooltip/readme.md b/components/tooltip/readme.md
index 6b5cde171..54f7fefcd 100644
--- a/components/tooltip/readme.md
+++ b/components/tooltip/readme.md
@@ -37,11 +37,16 @@ In any component you decorate with the Tooltip you'd get some additional props:
 | `tooltip`             | `String`      |               | The text string to use for the tooltip.|
 | `tooltipDelay`        | `Number`      |               | Amount of time in miliseconds spent before the tooltip is visible.|
 | `tooltipHideOnClick`  | `Boolean`     | `true`        | If true, the Tooltip hides after a click in the host component.|
+| `tooltipPosition`     | `String`      | `vertical`    | Determines the position of the tooltip. It can be automatic with `vertical` and `horizontal` values or forced with `bottom`, `top`, `left` or `right`.|
 
 ## Theming
 
 | Name     | Description|
 |:---------|:-----------|
-| `tooltip` | Added to the tooltip element.|
+| `tooltip` | Added to the tooltip element wrapper.|
 | `tooltipActive` | Added to the root when the tooltip is active.|
-| `tooltipWrapper` | Wrapper for the root element used to position the tooltip.|
+| `tooltipBottom` | Added to the root in case the tooltip is being positioned at bottom.|
+| `tooltipInner` | Added to the inner element which sets the background, font and rounded borders.|
+| `tooltipLeft` | Added to the root in case the tooltip is being positioned at left.|
+| `tooltipRight` | Added to the root in case the tooltip is being positioned at right.|
+| `tooltipTop` | Added to the root in case the tooltip is being positioned at top.|
diff --git a/components/tooltip/theme.scss b/components/tooltip/theme.scss
index ad9e11fb0..ba861a2ba 100644
--- a/components/tooltip/theme.scss
+++ b/components/tooltip/theme.scss
@@ -7,23 +7,49 @@
   position: absolute;
   z-index: $z-index-higher;
   display: block;
+  padding: $tooltip-margin;
   max-width: $tooltip-max-width;
-  padding: $tooltip-padding;
-  margin: $tooltip-margin 0;
   font-family: Roboto, sans-serif;
   font-size: $tooltip-font-size;
   font-weight: $font-weight-bold;
   line-height: $font-size-small;
-  color: $tooltip-color;
   text-align: center;
   pointer-events: none;
   text-transform: none;
-  background: $tooltip-background;
-  border-radius: $tooltip-border-radius;
   transition: $animation-curve-default $tooltip-animation-duration transform;
   transform: scale(0) translateX(-50%);
   transform-origin: top left;
+
   &.tooltipActive {
     transform: scale(1) translateX(-50%);
   }
+
+  &.tooltipTop {
+    transform: scale(0) translateX(-50%) translateY(-100%);
+    &.tooltipActive {
+      transform: scale(1) translateX(-50%) translateY(-100%);
+    }
+  }
+
+  &.tooltipLeft {
+    transform: scale(0) translateX(-100%) translateY(-50%);
+    &.tooltipActive {
+      transform: scale(1) translateX(-100%) translateY(-50%);
+    }
+  }
+
+  &.tooltipRight {
+    transform: scale(0) translateX(0) translateY(-50%);
+    &.tooltipActive {
+      transform: scale(1) translateX(0) translateY(-50%);
+    }
+  }
+}
+
+.tooltipInner {
+  background: $tooltip-background;
+  border-radius: $tooltip-border-radius;
+  color: $tooltip-color;
+  display: block;
+  padding: $tooltip-padding;
 }

From 146ffeec4c760789ab7e721f38ad4faf20452ad9 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 7 Aug 2016 20:52:51 +0200
Subject: [PATCH 0738/1024] Latest build

---
 lib/tooltip/Tooltip.js | 137 ++++++++++++++++++++++++++++++++++-------
 lib/tooltip/theme.scss |  36 +++++++++--
 2 files changed, 145 insertions(+), 28 deletions(-)

diff --git a/lib/tooltip/Tooltip.js b/lib/tooltip/Tooltip.js
index f1dfa3ca4..b77620ef5 100644
--- a/lib/tooltip/Tooltip.js
+++ b/lib/tooltip/Tooltip.js
@@ -28,6 +28,10 @@ var _events = require('../utils/events');
 
 var _events2 = _interopRequireDefault(_events);
 
+var _utils = require('../utils/utils');
+
+var _utils2 = _interopRequireDefault(_utils);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -40,10 +44,20 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
+var POSITION = {
+  BOTTOM: 'bottom',
+  HORIZONTAL: 'horizontal',
+  LEFT: 'left',
+  RIGHT: 'right',
+  TOP: 'top',
+  VERTICAL: 'vertical'
+};
+
 var defaults = {
   className: '',
   delay: 0,
   hideOnClick: true,
+  position: POSITION.VERTICAL,
   theme: {}
 };
 
@@ -55,6 +69,7 @@ var tooltipFactory = function tooltipFactory() {
   var defaultClassName = _defaults$options.className;
   var defaultDelay = _defaults$options.delay;
   var defaultHideOnClick = _defaults$options.hideOnClick;
+  var defaultPosition = _defaults$options.position;
   var defaultTheme = _defaults$options.theme;
 
 
@@ -75,6 +90,7 @@ var tooltipFactory = function tooltipFactory() {
 
         return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TooltippedComponent)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
           active: false,
+          position: _this.props.tooltipPosition,
           visible: false
         }, _this.onTransformEnd = function (e) {
           if (e.propertyName === 'transform') {
@@ -82,17 +98,7 @@ var tooltipFactory = function tooltipFactory() {
             _this.setState({ visible: false });
           }
         }, _this.handleMouseEnter = function (event) {
-          var yOffset = window.scrollY || window.pageYOffset;
-          var xOffset = window.scrollX || window.pageXOffset;
-
-          var _event$target$getBoun = event.target.getBoundingClientRect();
-
-          var top = _event$target$getBoun.top;
-          var left = _event$target$getBoun.left;
-          var height = _event$target$getBoun.height;
-          var width = _event$target$getBoun.width;
-
-          _this.activate(top + height + yOffset, left + width / 2 + xOffset);
+          _this.activate(_this.calculatePosition(event.target));
           if (_this.props.onMouseEnter) _this.props.onMouseEnter(event);
         }, _this.handleMouseLeave = function (event) {
           _this.deactivate();
@@ -112,11 +118,15 @@ var tooltipFactory = function tooltipFactory() {
         }
       }, {
         key: 'activate',
-        value: function activate(top, left) {
+        value: function activate(_ref) {
           var _this2 = this;
 
+          var top = _ref.top;
+          var left = _ref.left;
+          var position = _ref.position;
+
           if (this.timeout) clearTimeout(this.timeout);
-          this.setState({ visible: true });
+          this.setState({ visible: true, position: position });
           this.timeout = setTimeout(function () {
             _this2.setState({ active: true, top: top, left: left });
           }, this.props.tooltipDelay);
@@ -132,14 +142,86 @@ var tooltipFactory = function tooltipFactory() {
             this.setState({ visible: false });
           }
         }
+      }, {
+        key: 'getPosition',
+        value: function getPosition(element) {
+          var tooltipPosition = this.props.tooltipPosition;
+
+          if (tooltipPosition === POSITION.HORIZONTAL) {
+            var origin = element.getBoundingClientRect();
+
+            var _utils$getViewport = _utils2.default.getViewport();
+
+            var ww = _utils$getViewport.width;
+
+            var toRight = origin.left < ww / 2 - origin.width / 2;
+            return toRight ? POSITION.RIGHT : POSITION.LEFT;
+          } else if (tooltipPosition === POSITION.VERTICAL) {
+            var _origin = element.getBoundingClientRect();
+
+            var _utils$getViewport2 = _utils2.default.getViewport();
+
+            var wh = _utils$getViewport2.height;
+
+            var toBottom = _origin.top < wh / 2 - _origin.height / 2;
+            return toBottom ? POSITION.BOTTOM : POSITION.TOP;
+          } else {
+            return tooltipPosition;
+          }
+        }
+      }, {
+        key: 'calculatePosition',
+        value: function calculatePosition(element) {
+          var position = this.getPosition(element);
+
+          var _element$getBoundingC = element.getBoundingClientRect();
+
+          var top = _element$getBoundingC.top;
+          var left = _element$getBoundingC.left;
+          var height = _element$getBoundingC.height;
+          var width = _element$getBoundingC.width;
+
+          var xOffset = window.scrollX || window.pageXOffset;
+          var yOffset = window.scrollY || window.pageYOffset;
+          if (position === POSITION.BOTTOM) {
+            return {
+              top: top + height + yOffset,
+              left: left + width / 2 + xOffset,
+              position: position
+            };
+          } else if (position === POSITION.TOP) {
+            return {
+              top: top + yOffset,
+              left: left + width / 2 + xOffset,
+              position: position
+            };
+          } else if (position === POSITION.LEFT) {
+            return {
+              top: top + height / 2 + yOffset,
+              left: left + xOffset,
+              position: position
+            };
+          } else if (position === POSITION.RIGHT) {
+            return {
+              top: top + height / 2 + yOffset,
+              left: left + width + xOffset,
+              position: position
+            };
+          }
+        }
       }, {
         key: 'render',
         value: function render() {
+          var _classnames;
+
           var _state = this.state;
           var active = _state.active;
           var left = _state.left;
           var top = _state.top;
+          var position = _state.position;
           var visible = _state.visible;
+
+          var positionClass = 'tooltip' + (position.charAt(0).toUpperCase() + position.slice(1));
           var _props = this.props;
           var children = _props.children;
           var className = _props.className;
@@ -147,8 +229,11 @@ var tooltipFactory = function tooltipFactory() {
           var tooltip = _props.tooltip;
           var tooltipDelay = _props.tooltipDelay;
           var tooltipHideOnClick = _props.tooltipHideOnClick;
+          var tooltipPosition = _props.tooltipPosition;
+
+          var other = _objectWithoutProperties(_props, ['children', 'className', 'theme', 'tooltip', 'tooltipDelay', 'tooltipHideOnClick', 'tooltipPosition']);
 
-          var other = _objectWithoutProperties(_props, ['children', 'className', 'theme', 'tooltip', 'tooltipDelay', 'tooltipHideOnClick']);
+          var _className = (0, _classnames3.default)(theme.tooltip, (_classnames = {}, _defineProperty(_classnames, theme.tooltipActive, active), _defineProperty(_classnames, theme[positionClass], theme[positionClass]), _classnames));
 
           return _react2.default.createElement(
             ComposedComponent,
@@ -163,13 +248,15 @@ var tooltipFactory = function tooltipFactory() {
             visible && _react2.default.createElement(
               _Portal2.default,
               null,
-              _react2.default.createElement('span', {
-                ref: 'tooltip',
-                children: tooltip,
-                className: (0, _classnames3.default)(theme.tooltip, _defineProperty({}, theme.tooltipActive, active)),
-                'data-react-toolbox': 'tooltip',
-                style: { top: top, left: left }
-              })
+              _react2.default.createElement(
+                'span',
+                { ref: 'tooltip', className: _className, 'data-react-toolbox': 'tooltip', style: { top: top, left: left } },
+                _react2.default.createElement(
+                  'span',
+                  { className: theme.tooltipInner },
+                  tooltip
+                )
+              )
             )
           );
         }
@@ -191,12 +278,16 @@ var tooltipFactory = function tooltipFactory() {
       }),
       tooltip: _react.PropTypes.string,
       tooltipDelay: _react.PropTypes.number,
-      tooltipHideOnClick: _react.PropTypes.bool
+      tooltipHideOnClick: _react.PropTypes.bool,
+      tooltipPosition: _react.PropTypes.oneOf(Object.keys(POSITION).map(function (key) {
+        return POSITION[key];
+      }))
     };
     TooltippedComponent.defaultProps = {
       className: defaultClassName,
       tooltipDelay: defaultDelay,
-      tooltipHideOnClick: defaultHideOnClick
+      tooltipHideOnClick: defaultHideOnClick,
+      tooltipPosition: defaultPosition
     };
 
 
diff --git a/lib/tooltip/theme.scss b/lib/tooltip/theme.scss
index ad9e11fb0..ba861a2ba 100644
--- a/lib/tooltip/theme.scss
+++ b/lib/tooltip/theme.scss
@@ -7,23 +7,49 @@
   position: absolute;
   z-index: $z-index-higher;
   display: block;
+  padding: $tooltip-margin;
   max-width: $tooltip-max-width;
-  padding: $tooltip-padding;
-  margin: $tooltip-margin 0;
   font-family: Roboto, sans-serif;
   font-size: $tooltip-font-size;
   font-weight: $font-weight-bold;
   line-height: $font-size-small;
-  color: $tooltip-color;
   text-align: center;
   pointer-events: none;
   text-transform: none;
-  background: $tooltip-background;
-  border-radius: $tooltip-border-radius;
   transition: $animation-curve-default $tooltip-animation-duration transform;
   transform: scale(0) translateX(-50%);
   transform-origin: top left;
+
   &.tooltipActive {
     transform: scale(1) translateX(-50%);
   }
+
+  &.tooltipTop {
+    transform: scale(0) translateX(-50%) translateY(-100%);
+    &.tooltipActive {
+      transform: scale(1) translateX(-50%) translateY(-100%);
+    }
+  }
+
+  &.tooltipLeft {
+    transform: scale(0) translateX(-100%) translateY(-50%);
+    &.tooltipActive {
+      transform: scale(1) translateX(-100%) translateY(-50%);
+    }
+  }
+
+  &.tooltipRight {
+    transform: scale(0) translateX(0) translateY(-50%);
+    &.tooltipActive {
+      transform: scale(1) translateX(0) translateY(-50%);
+    }
+  }
+}
+
+.tooltipInner {
+  background: $tooltip-background;
+  border-radius: $tooltip-border-radius;
+  color: $tooltip-color;
+  display: block;
+  padding: $tooltip-padding;
 }

From 714883c1b271dc921ad42c95fd13bb16d2fe2328 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 7 Aug 2016 21:00:47 +0200
Subject: [PATCH 0739/1024] Update docs dependencies

---
 docs/package.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index 6d08f03ed..c990774d4 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -19,16 +19,16 @@
     "react-router": "^2.4.0"
   },
   "devDependencies": {
-    "autoprefixer": "^6.3.6",
-    "babel-core": "^6.8.0",
+    "autoprefixer": "^6.4.0",
+    "babel-core": "^6.13.2",
     "babel-eslint": "^6.0.4",
     "babel-loader": "^6.2.4",
     "babel-plugin-react-transform": "^2.0.2",
-    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-es2015": "^6.13.2",
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-0": "^6.5.0",
-    "babel-preset-stage-2": "^6.5.0",
-    "cross-env": "^1.0.7",
+    "babel-preset-stage-2": "^6.13.0",
+    "cross-env": "^2.0.0",
     "css-loader": "^0.23.1",
     "express": "^4.13.4",
     "extract-text-webpack-plugin": "^1.0.1",
@@ -44,7 +44,7 @@
     "react-transform-catch-errors": "^1.0.2",
     "react-transform-hmr": "^1.0.4",
     "redbox-react": "^1.2.4",
-    "sass-loader": "^3.2.0",
+    "sass-loader": "^4.0.0",
     "style-loader": "^0.13.1",
     "transfer-webpack-plugin": "^0.1.4",
     "webpack": "^1.13.0",

From 25fd5e2c3e928b821217613c2cd119d043c84063 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 7 Aug 2016 21:13:58 +0200
Subject: [PATCH 0740/1024] Minor fixes in docs

---
 docs/app/components/appbar/style.scss                           | 1 -
 docs/app/components/layout/home/style.scss                      | 2 +-
 .../components/layout/main/modules/examples/input_example_1.txt | 2 +-
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/docs/app/components/appbar/style.scss b/docs/app/components/appbar/style.scss
index 8e97ff23f..4cbcc9446 100644
--- a/docs/app/components/appbar/style.scss
+++ b/docs/app/components/appbar/style.scss
@@ -14,7 +14,6 @@
 .logo {
   width: $appbar-logo-size;
   height: $appbar-logo-size;
-  margin-top: ($appbar-height - $appbar-logo-size) / 2;
   fill: $color-primary-contrast;
 }
 
diff --git a/docs/app/components/layout/home/style.scss b/docs/app/components/layout/home/style.scss
index b7da9730f..7203229b9 100644
--- a/docs/app/components/layout/home/style.scss
+++ b/docs/app/components/layout/home/style.scss
@@ -94,7 +94,7 @@ $content-width: 740px;
       margin: 0 $unit;
     }
     .twitter {
-      color: $twitter-color;
+      color: $twitter-color !important;
     }
   }
   > p {
diff --git a/docs/app/components/layout/main/modules/examples/input_example_1.txt b/docs/app/components/layout/main/modules/examples/input_example_1.txt
index 990cb342a..d4a89a62c 100644
--- a/docs/app/components/layout/main/modules/examples/input_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/input_example_1.txt
@@ -13,7 +13,7 @@ class InputTest extends React.Component {
         <Input type='text' multiline label='Multiline' maxLength={20} value={this.state.multiline} onChange={this.handleChange.bind(this, 'multiline')} />
         <Input type='email' label='Email address' icon='email' value={this.state.email} onChange={this.handleChange.bind(this, 'email')} />
         <Input type='tel' label='Phone' name='phone' icon='phone' value={this.state.phone} onChange={this.handleChange.bind(this, 'phone')} />
-        <Input type='text' value={this.state.hint} label='Required Field' hint='With Hint' required onChange={this.handleChange.bind(this, 'hint')} icon={<span>J</span>} />
+        <Input type='text' value={this.state.hint} label='Required Field' hint='With Hint' required onChange={this.handleChange.bind(this, 'hint')} icon='share' />
       </section>
     );
   }

From 77b0a4a57d6c9cec361eb8a78005b3e9a0e9d19d Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 7 Aug 2016 21:23:14 +0200
Subject: [PATCH 0741/1024] Fix linter warnings

---
 .eslintrc                              |  4 +---
 .sass-lint.yml                         |  4 ----
 components/input/Input.js              |  2 +-
 components/menu/Menu.js                |  2 +-
 components/progress_bar/ProgressBar.js |  4 ++--
 components/slider/Slider.js            |  2 +-
 components/table/TableHead.js          |  2 +-
 components/time_picker/ClockHand.js    |  2 +-
 components/tooltip/theme.scss          | 10 +++++-----
 docs/app/components/logo/index.js      |  4 ++--
 spec/components/card.js                |  2 +-
 11 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 1b11bd11f..50fa67e3a 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -221,9 +221,7 @@
     "react/no-unknown-property": 1,
     "react/prop-types": [2, {"ignore": ["onMouseDown", "onTouchStart"]}],
     "react/react-in-jsx-scope": 1,
-    "react/require-extension": 1,
     "react/self-closing-comp": 1,
-    "react/sort-comp": 1,
-    "react/wrap-multilines": 1
+    "react/sort-comp": 1
   }
 }
diff --git a/.sass-lint.yml b/.sass-lint.yml
index 2d330c768..abd6057ef 100644
--- a/.sass-lint.yml
+++ b/.sass-lint.yml
@@ -49,7 +49,6 @@ rules:
       convention: hyphenatedlowercase
   mixins-before-declarations: 0
   nesting-depth: 0
-  no-color-keyword: 1
   no-color-literals: 0
   no-css-comments: 1
   no-debug: 1
@@ -73,9 +72,6 @@ rules:
   no-trailing-zero: 1
   no-url-protocols: 1
   placeholder-in-extend: 0
-  placeholder-name-format:
-    - 0
-    - convention: hyphenatedlowercase
   property-sort-order:
     - 1
     - ignore-custom-properties: false
diff --git a/components/input/Input.js b/components/input/Input.js
index b0e4b70a0..4038bef50 100644
--- a/components/input/Input.js
+++ b/components/input/Input.js
@@ -177,7 +177,7 @@ const factory = (FontIcon) => {
         <div data-react-toolbox='input' className={className}>
           {React.createElement(multiline ? 'textarea' : 'input', inputElementProps)}
           {icon ? <FontIcon className={theme.icon} value={icon} /> : null}
-          <span className={theme.bar}></span>
+          <span className={theme.bar} />
           {labelText
             ? <label className={labelClassName}>
                 {labelText}
diff --git a/components/menu/Menu.js b/components/menu/Menu.js
index 8ff49bfea..d8fe6515a 100644
--- a/components/menu/Menu.js
+++ b/components/menu/Menu.js
@@ -206,7 +206,7 @@ const factory = (MenuItem) => {
 
       return (
         <div data-react-toolbox='menu' className={className} style={this.getRootStyle()}>
-          {this.props.outline ? <div className={theme.outline} style={outlineStyle}></div> : null}
+          {this.props.outline ? <div className={theme.outline} style={outlineStyle} /> : null}
           <ul ref='menu' className={theme.menuInner} style={this.getMenuStyle()}>
             {this.renderItems()}
           </ul>
diff --git a/components/progress_bar/ProgressBar.js b/components/progress_bar/ProgressBar.js
index cd1ac2acc..2d27ecec4 100644
--- a/components/progress_bar/ProgressBar.js
+++ b/components/progress_bar/ProgressBar.js
@@ -72,8 +72,8 @@ class ProgressBar extends Component {
     const {buffer, value} = this.linearStyle();
     return (
       <div>
-        <span ref='buffer' data-ref='buffer' className={this.props.theme.buffer} style={buffer}></span>
-        <span ref='value' data-ref='value' className={this.props.theme.value} style={value}></span>
+        <span ref='buffer' data-ref='buffer' className={this.props.theme.buffer} style={buffer}/>
+        <span ref='value' data-ref='value' className={this.props.theme.value} style={value}/>
       </div>
     );
   }
diff --git a/components/slider/Slider.js b/components/slider/Slider.js
index 674cdc871..691d42390 100644
--- a/components/slider/Slider.js
+++ b/components/slider/Slider.js
@@ -281,7 +281,7 @@ const factory = (ProgressBar, Input) => {
               onTouchStart={this.handleTouchStart}
               style={knobStyles}
               >
-              <div className={theme.innerknob} data-value={parseInt(this.props.value)}></div>
+              <div className={theme.innerknob} data-value={parseInt(this.props.value)}/>
             </div>
 
             <div className={theme.progress}>
diff --git a/components/table/TableHead.js b/components/table/TableHead.js
index 57f39a640..884699c39 100644
--- a/components/table/TableHead.js
+++ b/components/table/TableHead.js
@@ -16,7 +16,7 @@ const factory = (Checkbox) => {
       );
     } else if (selectable) {
       selectCell = (
-        <th key='select' className={theme.selectable}></th>
+        <th key='select' className={theme.selectable}/>
       );
     }
     return (
diff --git a/components/time_picker/ClockHand.js b/components/time_picker/ClockHand.js
index 53bd83626..904c49685 100644
--- a/components/time_picker/ClockHand.js
+++ b/components/time_picker/ClockHand.js
@@ -116,7 +116,7 @@ class Hand extends Component {
 
     return (
       <div className={className} style={handStyle}>
-        <div ref='knob' className={theme.knob}></div>
+        <div ref='knob' className={theme.knob}/>
       </div>
     );
   }
diff --git a/components/tooltip/theme.scss b/components/tooltip/theme.scss
index ba861a2ba..3daa20a8c 100644
--- a/components/tooltip/theme.scss
+++ b/components/tooltip/theme.scss
@@ -7,15 +7,15 @@
   position: absolute;
   z-index: $z-index-higher;
   display: block;
-  padding: $tooltip-margin;
   max-width: $tooltip-max-width;
+  padding: $tooltip-margin;
   font-family: Roboto, sans-serif;
   font-size: $tooltip-font-size;
   font-weight: $font-weight-bold;
   line-height: $font-size-small;
   text-align: center;
-  pointer-events: none;
   text-transform: none;
+  pointer-events: none;
   transition: $animation-curve-default $tooltip-animation-duration transform;
   transform: scale(0) translateX(-50%);
   transform-origin: top left;
@@ -47,9 +47,9 @@
 }
 
 .tooltipInner {
-  background: $tooltip-background;
-  border-radius: $tooltip-border-radius;
-  color: $tooltip-color;
   display: block;
   padding: $tooltip-padding;
+  color: $tooltip-color;
+  background: $tooltip-background;
+  border-radius: $tooltip-border-radius;
 }
diff --git a/docs/app/components/logo/index.js b/docs/app/components/logo/index.js
index 8bbbbc353..58007acd5 100644
--- a/docs/app/components/logo/index.js
+++ b/docs/app/components/logo/index.js
@@ -8,8 +8,8 @@ const Logo = (props) => {
   return (
     <svg className={className} viewBox="0 0 144 131">
       <g>
-        <path d="M118.954,87.235 C117.784,80.465 115.755,73.277 112.881,65.938 C115.756,58.592 117.784,51.398 118.952,44.624 C130.693,50.324 137.999,57.982 138,65.909 C138,73.901 130.708,81.552 118.954,87.235 L118.954,87.235 Z M105,123.11 C102.829,124.364 100.281,125 97.428,125 C91.361,125 84.259,122.231 76.981,117.308 C82.313,112.871 87.579,107.457 92.545,101.223 C100.313,100.042 107.527,98.206 113.955,95.844 C114.897,108.916 111.902,119.125 105,123.11 L105,123.11 Z M46.568,124.997 C43.717,124.997 41.171,124.362 39.001,123.108 C32.104,119.127 29.109,108.918 30.052,95.846 C36.472,98.205 43.677,100.037 51.435,101.218 C56.402,107.454 61.671,112.871 67.005,117.309 C59.731,122.23 52.633,124.997 46.568,124.997 L46.568,124.997 Z M6,65.909 C6,57.957 13.296,50.305 25.036,44.612 C26.204,51.397 28.236,58.604 31.117,65.963 C28.25,73.288 26.224,80.464 25.055,87.221 C13.301,81.532 6,73.877 6,65.909 L6,65.909 Z M46.881,37.496 C34.717,58.616 46.806,37.626 34.785,58.498 C32.879,52.829 31.528,47.322 30.729,42.143 C35.601,40.255 41.033,38.677 46.881,37.496 L46.881,37.496 Z M72.005,18.28 C76.117,21.584 80.221,25.531 84.168,30.008 C60.223,29.96 84.478,30.009 59.886,29.959 C63.82,25.502 67.909,21.571 72.005,18.28 L72.005,18.28 Z M109.214,58.468 C97.071,37.445 109.179,58.408 97.101,37.496 C102.949,38.678 108.383,40.259 113.26,42.152 C112.461,47.319 111.113,52.813 109.214,58.468 L109.214,58.468 Z M109.235,73.475 C111.119,79.096 112.457,84.56 113.251,89.702 C108.396,91.576 102.987,93.144 97.16,94.319 C109.053,73.79 96.994,94.605 109.235,73.475 L109.235,73.475 Z M34.764,73.5 C47.04,94.67 34.992,73.892 46.834,94.313 C41.014,93.136 35.61,91.567 30.758,89.691 C31.551,84.56 32.886,79.107 34.764,73.5 L34.764,73.5 Z M84.108,101.947 C80.175,106.402 76.088,110.332 71.993,113.623 C67.883,110.321 63.78,106.375 59.835,101.902 C83.777,101.946 59.54,101.901 84.108,101.947 L84.108,101.947 Z M86.649,95.951 L71.75,95.924 L56.853,95.896 C56.122,95.812 55.399,95.718 54.677,95.622 C54.474,95.357 54.27,95.096 54.068,94.829 L38.235,67.525 C38.011,67.004 37.8,66.484 37.584,65.963 C37.731,65.609 37.871,65.255 38.022,64.9 L53.936,37.268 C54.21,36.903 54.487,36.545 54.764,36.185 C55.365,36.105 55.965,36.024 56.572,35.953 L72.262,35.984 L87.951,36.016 C88.387,36.069 88.816,36.131 89.248,36.188 C89.475,36.483 89.702,36.775 89.927,37.073 L105.949,64.813 C106.109,65.189 106.259,65.564 106.414,65.939 C106.2,66.457 105.989,66.975 105.766,67.494 L89.983,94.737 C89.757,95.038 89.529,95.331 89.301,95.628 C88.424,95.744 87.54,95.853 86.649,95.951 L86.649,95.951 Z M144,65.909 C143.999,54.951 134.647,45.112 119.808,38.364 C121.377,22.123 117.514,9.088 108.001,3.596 C104.843,1.774 101.279,0.905 97.437,0.905 L97.438,6.905 C100.286,6.905 102.831,7.54 105.001,8.793 C111.904,12.778 114.898,22.945 113.965,35.978 C107.519,33.608 100.279,31.77 92.485,30.588 C87.54,24.392 82.299,19.008 76.992,14.593 C84.266,9.672 91.365,6.906 97.435,6.905 L97.437,0.905 L97.434,0.905 C89.71,0.906 80.873,4.42 72.008,10.742 C63.141,4.418 54.301,0.904 46.573,0.904 L46.573,6.904 C52.639,6.904 59.74,9.672 67.017,14.594 C61.711,19.009 56.47,24.391 51.525,30.586 C43.724,31.768 36.477,33.608 30.026,35.981 C29.095,22.949 32.093,12.782 39,8.794 C41.172,7.54 43.72,6.904 46.573,6.904 L46.573,0.904 C42.729,0.904 39.16,1.773 36,3.597 C26.486,9.091 22.619,22.126 24.184,38.366 C9.349,45.114 0,54.953 0,65.909 C0,76.869 9.357,86.709 24.202,93.457 C22.615,109.734 26.472,122.804 36.001,128.304 C39.16,130.128 42.725,130.997 46.568,130.997 C54.292,130.997 63.128,127.484 71.992,121.162 C80.859,127.486 89.7,131 97.428,131 C101.271,131 104.84,130.131 108,128.306 C117.53,122.803 121.391,109.73 119.804,93.451 C134.643,86.702 144,76.866 144,65.909 L144,65.909 Z"></path>
-        <path d="M71.5482968,65.9688173 C69.154234,70.0775221 66.7769144,74.1965782 64.47,78.356 C63.271,80.497 62.097,82.654 60.931,84.815 C59.794,86.993 58.615,89.146 57.518,91.348 C58.905,89.316 60.21,87.237 61.558,85.183 C62.876,83.111 64.187,81.035 65.472,78.944 C67.9377029,74.9691498 70.3353266,70.9543598 72.7167607,66.929899 L99.741,65.952 L72.7137677,64.9739927 C70.3372065,60.9888441 67.9401733,57.0159615 65.476,53.083 C64.19,51.014 62.88,48.96 61.562,46.909 C60.212,44.879 58.907,42.821 57.518,40.813 C58.613,42.995 59.792,45.128 60.926,47.286 C62.093,49.426 63.268,51.561 64.466,53.682 C66.7739163,57.7980908 69.150305,61.8738486 71.5470195,65.9374346 L71.5387573,65.952 L71.5482968,65.9688173 Z M56.341,93.07 L40.684,65.952 L56.344,38.834 L87.657,38.831 L103.315,65.952 L87.659,93.073 L56.341,93.07 Z"></path>
+        <path d="M118.954,87.235 C117.784,80.465 115.755,73.277 112.881,65.938 C115.756,58.592 117.784,51.398 118.952,44.624 C130.693,50.324 137.999,57.982 138,65.909 C138,73.901 130.708,81.552 118.954,87.235 L118.954,87.235 Z M105,123.11 C102.829,124.364 100.281,125 97.428,125 C91.361,125 84.259,122.231 76.981,117.308 C82.313,112.871 87.579,107.457 92.545,101.223 C100.313,100.042 107.527,98.206 113.955,95.844 C114.897,108.916 111.902,119.125 105,123.11 L105,123.11 Z M46.568,124.997 C43.717,124.997 41.171,124.362 39.001,123.108 C32.104,119.127 29.109,108.918 30.052,95.846 C36.472,98.205 43.677,100.037 51.435,101.218 C56.402,107.454 61.671,112.871 67.005,117.309 C59.731,122.23 52.633,124.997 46.568,124.997 L46.568,124.997 Z M6,65.909 C6,57.957 13.296,50.305 25.036,44.612 C26.204,51.397 28.236,58.604 31.117,65.963 C28.25,73.288 26.224,80.464 25.055,87.221 C13.301,81.532 6,73.877 6,65.909 L6,65.909 Z M46.881,37.496 C34.717,58.616 46.806,37.626 34.785,58.498 C32.879,52.829 31.528,47.322 30.729,42.143 C35.601,40.255 41.033,38.677 46.881,37.496 L46.881,37.496 Z M72.005,18.28 C76.117,21.584 80.221,25.531 84.168,30.008 C60.223,29.96 84.478,30.009 59.886,29.959 C63.82,25.502 67.909,21.571 72.005,18.28 L72.005,18.28 Z M109.214,58.468 C97.071,37.445 109.179,58.408 97.101,37.496 C102.949,38.678 108.383,40.259 113.26,42.152 C112.461,47.319 111.113,52.813 109.214,58.468 L109.214,58.468 Z M109.235,73.475 C111.119,79.096 112.457,84.56 113.251,89.702 C108.396,91.576 102.987,93.144 97.16,94.319 C109.053,73.79 96.994,94.605 109.235,73.475 L109.235,73.475 Z M34.764,73.5 C47.04,94.67 34.992,73.892 46.834,94.313 C41.014,93.136 35.61,91.567 30.758,89.691 C31.551,84.56 32.886,79.107 34.764,73.5 L34.764,73.5 Z M84.108,101.947 C80.175,106.402 76.088,110.332 71.993,113.623 C67.883,110.321 63.78,106.375 59.835,101.902 C83.777,101.946 59.54,101.901 84.108,101.947 L84.108,101.947 Z M86.649,95.951 L71.75,95.924 L56.853,95.896 C56.122,95.812 55.399,95.718 54.677,95.622 C54.474,95.357 54.27,95.096 54.068,94.829 L38.235,67.525 C38.011,67.004 37.8,66.484 37.584,65.963 C37.731,65.609 37.871,65.255 38.022,64.9 L53.936,37.268 C54.21,36.903 54.487,36.545 54.764,36.185 C55.365,36.105 55.965,36.024 56.572,35.953 L72.262,35.984 L87.951,36.016 C88.387,36.069 88.816,36.131 89.248,36.188 C89.475,36.483 89.702,36.775 89.927,37.073 L105.949,64.813 C106.109,65.189 106.259,65.564 106.414,65.939 C106.2,66.457 105.989,66.975 105.766,67.494 L89.983,94.737 C89.757,95.038 89.529,95.331 89.301,95.628 C88.424,95.744 87.54,95.853 86.649,95.951 L86.649,95.951 Z M144,65.909 C143.999,54.951 134.647,45.112 119.808,38.364 C121.377,22.123 117.514,9.088 108.001,3.596 C104.843,1.774 101.279,0.905 97.437,0.905 L97.438,6.905 C100.286,6.905 102.831,7.54 105.001,8.793 C111.904,12.778 114.898,22.945 113.965,35.978 C107.519,33.608 100.279,31.77 92.485,30.588 C87.54,24.392 82.299,19.008 76.992,14.593 C84.266,9.672 91.365,6.906 97.435,6.905 L97.437,0.905 L97.434,0.905 C89.71,0.906 80.873,4.42 72.008,10.742 C63.141,4.418 54.301,0.904 46.573,0.904 L46.573,6.904 C52.639,6.904 59.74,9.672 67.017,14.594 C61.711,19.009 56.47,24.391 51.525,30.586 C43.724,31.768 36.477,33.608 30.026,35.981 C29.095,22.949 32.093,12.782 39,8.794 C41.172,7.54 43.72,6.904 46.573,6.904 L46.573,0.904 C42.729,0.904 39.16,1.773 36,3.597 C26.486,9.091 22.619,22.126 24.184,38.366 C9.349,45.114 0,54.953 0,65.909 C0,76.869 9.357,86.709 24.202,93.457 C22.615,109.734 26.472,122.804 36.001,128.304 C39.16,130.128 42.725,130.997 46.568,130.997 C54.292,130.997 63.128,127.484 71.992,121.162 C80.859,127.486 89.7,131 97.428,131 C101.271,131 104.84,130.131 108,128.306 C117.53,122.803 121.391,109.73 119.804,93.451 C134.643,86.702 144,76.866 144,65.909 L144,65.909 Z"/>
+        <path d="M71.5482968,65.9688173 C69.154234,70.0775221 66.7769144,74.1965782 64.47,78.356 C63.271,80.497 62.097,82.654 60.931,84.815 C59.794,86.993 58.615,89.146 57.518,91.348 C58.905,89.316 60.21,87.237 61.558,85.183 C62.876,83.111 64.187,81.035 65.472,78.944 C67.9377029,74.9691498 70.3353266,70.9543598 72.7167607,66.929899 L99.741,65.952 L72.7137677,64.9739927 C70.3372065,60.9888441 67.9401733,57.0159615 65.476,53.083 C64.19,51.014 62.88,48.96 61.562,46.909 C60.212,44.879 58.907,42.821 57.518,40.813 C58.613,42.995 59.792,45.128 60.926,47.286 C62.093,49.426 63.268,51.561 64.466,53.682 C66.7739163,57.7980908 69.150305,61.8738486 71.5470195,65.9374346 L71.5387573,65.952 L71.5482968,65.9688173 Z M56.341,93.07 L40.684,65.952 L56.344,38.834 L87.657,38.831 L103.315,65.952 L87.659,93.073 L56.341,93.07 Z"/>
       </g>
     </svg>
   );
diff --git a/spec/components/card.js b/spec/components/card.js
index 1d8769b17..ed14bcee1 100644
--- a/spec/components/card.js
+++ b/spec/components/card.js
@@ -143,7 +143,7 @@ const cards = {
         <CardMedia
           aspectRatio="wide"
         >
-          <iframe width="1280" height="720" src="https://www.youtube.com/embed/sGbxmsDFVnE?rel=0&amp;showinfo=0" frameBorder="0" allowFullScreen></iframe>
+          <iframe width="1280" height="720" src="https://www.youtube.com/embed/sGbxmsDFVnE?rel=0&amp;showinfo=0" frameBorder="0" allowFullScreen />
         </CardMedia>
         <CardActions style={{ justifyContent: 'flex-end' }}>
           <IconButton icon="report_problem" />

From c671290ba4ae9175764b09ef3db8908c4e2c1ca1 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 7 Aug 2016 21:23:54 +0200
Subject: [PATCH 0742/1024] 1.1.0 release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b94257e02..160c17356 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "react-toolbox",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "homepage": "http://www.react-toolbox.com/",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "main": "./lib",
   "author": {
     "name": "React Toolbox Team",

From f09a9d740d76e045d37252c526912c5cbc57cc0f Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 7 Aug 2016 22:13:31 +0200
Subject: [PATCH 0743/1024] Fix linter for tooltip theme

---
 lib/tooltip/theme.scss | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/lib/tooltip/theme.scss b/lib/tooltip/theme.scss
index ba861a2ba..3daa20a8c 100644
--- a/lib/tooltip/theme.scss
+++ b/lib/tooltip/theme.scss
@@ -7,15 +7,15 @@
   position: absolute;
   z-index: $z-index-higher;
   display: block;
-  padding: $tooltip-margin;
   max-width: $tooltip-max-width;
+  padding: $tooltip-margin;
   font-family: Roboto, sans-serif;
   font-size: $tooltip-font-size;
   font-weight: $font-weight-bold;
   line-height: $font-size-small;
   text-align: center;
-  pointer-events: none;
   text-transform: none;
+  pointer-events: none;
   transition: $animation-curve-default $tooltip-animation-duration transform;
   transform: scale(0) translateX(-50%);
   transform-origin: top left;
@@ -47,9 +47,9 @@
 }
 
 .tooltipInner {
-  background: $tooltip-background;
-  border-radius: $tooltip-border-radius;
-  color: $tooltip-color;
   display: block;
   padding: $tooltip-padding;
+  color: $tooltip-color;
+  background: $tooltip-background;
+  border-radius: $tooltip-border-radius;
 }

From fac66cb632fac0c58cb51ac7fff57a7ebff97546 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 8 Aug 2016 09:48:02 +0200
Subject: [PATCH 0744/1024] Move addon-update to peerDependencies

---
 package.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 160c17356..4941c55ee 100644
--- a/package.json
+++ b/package.json
@@ -76,9 +76,7 @@
     "phantomjs-prebuilt": "^2.1.7",
     "postcss-loader": "^0.9.1",
     "react": "^15.2.1",
-    "react-addons-css-transition-group": "^15.2.0",
     "react-addons-test-utils": "^15.0.2",
-    "react-addons-update": "^15.3.0",
     "react-docgen": "^2.8.2",
     "react-dom": "^15.2.0",
     "react-transform-catch-errors": "^1.0.2",
@@ -117,6 +115,7 @@
     "normalize.css": "^4.0.0",
     "react": "^0.14 || ^15.2.0",
     "react-addons-css-transition-group": "^0.14.0 || ^15.2.0",
+    "react-addons-update": "^0.14 || ^15.2.0",
     "react-dom": "^0.14.0 || ^15.2.0"
   }
 }

From 56426b9762dbb371754d9eb101b9a2d8d709ce1a Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 8 Aug 2016 09:48:56 +0200
Subject: [PATCH 0745/1024] 1.1.1 release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4941c55ee..939d48579 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "react-toolbox",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "homepage": "http://www.react-toolbox.com/",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "main": "./lib",
   "author": {
     "name": "React Toolbox Team",

From b5575618c2753428eaef1a5b362b74ac5f08e9c8 Mon Sep 17 00:00:00 2001
From: dlebedynskyi <dima.lebedinsky@gmail.com>
Date: Tue, 9 Aug 2016 13:47:48 -0400
Subject: [PATCH 0746/1024] fix for target missing id

using
https://github.com/react-toolbox/react-toolbox/issues/699
---
 components/tabs/Tabs.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/tabs/Tabs.js b/components/tabs/Tabs.js
index e9b4c720b..0db6d1210 100644
--- a/components/tabs/Tabs.js
+++ b/components/tabs/Tabs.js
@@ -41,7 +41,7 @@ const factory = (Tab, TabContent) => {
     }
 
     handleHeaderClick = (event) => {
-      const idx = parseInt(event.target.id);
+      const idx = parseInt(event.currentTarget.id);
       if (this.props.onChange) this.props.onChange(idx);
     };
 

From 213411ba55f22773ac000805c1f7f57ecf60df38 Mon Sep 17 00:00:00 2001
From: Per Bergqwist <pbergqwist@contractor.ea.com>
Date: Wed, 10 Aug 2016 09:35:51 +0200
Subject: [PATCH 0747/1024] Fixes for typescript definitions, typos etc.

---
 components/autocomplete/index.d.ts |  2 +-
 components/button/index.d.ts       | 22 +++------------------
 components/checkbox/index.d.ts     |  4 ++--
 components/chip/index.d.ts         |  2 +-
 components/date_picker/index.d.ts  |  6 +++---
 components/dialog/index.d.ts       | 12 ++++++------
 components/drawer/index.d.ts       |  2 +-
 components/dropdown/index.d.ts     |  6 +++---
 components/index.d.ts              | 31 +++++++++++++++++++++++++++++-
 components/input/index.d.ts        | 10 +++++-----
 components/layout/index.d.ts       |  2 +-
 components/list/index.d.ts         |  6 +++---
 components/radio/index.d.ts        |  8 ++++----
 components/switch/index.d.ts       |  6 +++---
 components/table/index.d.ts        |  2 +-
 components/time_picker/index.d.ts  |  4 ++++
 components/tooltip/index.d.ts      |  8 --------
 lib/autocomplete/index.d.ts        |  2 +-
 lib/button/index.d.ts              |  8 ++++----
 lib/checkbox/index.d.ts            |  4 ++--
 lib/chip/index.d.ts                |  2 +-
 lib/date_picker/index.d.ts         |  6 +++---
 lib/dialog/index.d.ts              | 12 ++++++------
 lib/drawer/index.d.ts              |  2 +-
 lib/dropdown/index.d.ts            |  6 +++---
 lib/index.d.ts                     | 31 +++++++++++++++++++++++++++++-
 lib/input/index.d.ts               | 14 +++++++++-----
 lib/layout/index.d.ts              |  2 +-
 lib/list/index.d.ts                |  6 +++---
 lib/radio/index.d.ts               |  8 ++++----
 lib/switch/index.d.ts              |  6 +++---
 lib/table/index.d.ts               |  2 +-
 lib/time_picker/index.d.ts         |  4 ++++
 lib/tooltip/index.d.ts             |  4 ++--
 34 files changed, 149 insertions(+), 103 deletions(-)

diff --git a/components/autocomplete/index.d.ts b/components/autocomplete/index.d.ts
index f1b33954d..b149d3595 100644
--- a/components/autocomplete/index.d.ts
+++ b/components/autocomplete/index.d.ts
@@ -70,7 +70,7 @@ interface AutocompleteProps extends __ReactToolbox.Props {
    * Callback function that is fired when the components's value changes.
    * @default auto
    */
-  onChange?: __React.FormEventHandler;
+  onChange?: Function;
   /**
    * Determines if the selected list is shown above or below input. It can be above or below.
    * @default above
diff --git a/components/button/index.d.ts b/components/button/index.d.ts
index 60721b880..ad0fd5243 100644
--- a/components/button/index.d.ts
+++ b/components/button/index.d.ts
@@ -102,14 +102,6 @@ interface ButtonProps extends __ReactToolbox.Props {
    * @default true
    */
   neutral?: boolean;
-  /**
-   * Fires after the mouse leaves the Component.
-   */
-  onMouseLeave?: __React.MouseEventHandler;
-  /**
-   * Fires after the mouse is released from the Component.
-   */
-  OnMouseUp?: __React.MouseEventHandler;
   /**
    * Indicates if the button should have primary color.
    * @default false
@@ -201,17 +193,9 @@ interface IconButtonProps extends __ReactToolbox.Props {
    */
   neutral?: boolean;
   /**
-   * Fires after the mouse leaves the Component.
-   */
-  onMouseLeave?: __React.MouseEventHandler;
-  /**
-   * Fires after the mouse is released from the Component.
-   */
-  OnMouseUp?: __React.MouseEventHandler;
-  /**
-   * Indicates if the button should have primary color.
-   * @default false
-   */
+    * Indicates if the button should have primary color.
+    * @default false
+    */
   primary?: boolean;
   /**
    * If true, component will have a ripple effect on click.
diff --git a/components/checkbox/index.d.ts b/components/checkbox/index.d.ts
index 2f5d2d678..d0e504d09 100644
--- a/components/checkbox/index.d.ts
+++ b/components/checkbox/index.d.ts
@@ -53,11 +53,11 @@ interface CheckboxProps extends __ReactToolbox.Props {
   /**
    * Callback called when the checkbox is blurred.
    */
-  onBlur?: __React.FocusEventHandler;
+  onBlur?: Function;
   /**
    * Callback called when the checkbox value is changed.
    */
-  onChange?: __React.MouseEventHandler;
+  onChange?: Function;
   /**
    * Classnames object defining the component style.
    */
diff --git a/components/chip/index.d.ts b/components/chip/index.d.ts
index 3ee44821a..a75649c46 100644
--- a/components/chip/index.d.ts
+++ b/components/chip/index.d.ts
@@ -40,7 +40,7 @@ interface ChipProps extends __ReactToolbox.Props {
   /**
    * Callback to be invoked when the delete icon is clicked.
    */
-  onDeleteClick?: __React.MouseEventHandler;
+  onDeleteClick?: Function;
   /**
    * Classnames object defining the component style.
    */
diff --git a/components/date_picker/index.d.ts b/components/date_picker/index.d.ts
index 1722fdacc..8660dca22 100644
--- a/components/date_picker/index.d.ts
+++ b/components/date_picker/index.d.ts
@@ -124,15 +124,15 @@ interface DatePickerProps extends __ReactToolbox.Props {
   /**
    * Callback called when the picker value is changed.
    */
-  onChange?: __React.MouseEventHandler;
+  onChange?: Function;
   /**
    * Callback called when the ESC key is pressed with the overlay active.
    */
-  onEscKeyDown?: __React.KeyboardEventHandler;
+  onEscKeyDown?: Function;
   /**
    * Callback to be invoked when the dialog overlay is clicked.
    */
-  onOverlayClick?: __React.MouseEventHandler;
+  onOverlayClick?: Function;
   /**
    * Classnames object defining the component style.
    */
diff --git a/components/dialog/index.d.ts b/components/dialog/index.d.ts
index 1fd938766..4980dba4f 100644
--- a/components/dialog/index.d.ts
+++ b/components/dialog/index.d.ts
@@ -35,7 +35,7 @@ interface DialogActionProps {
   /**
    * Callback called when the component is clicked.
    */
-  onClick?: __React.MouseEventHandler;
+  onClick?: Function;
 }
 
 interface DialogProps extends __ReactToolbox.Props {
@@ -55,23 +55,23 @@ interface DialogProps extends __ReactToolbox.Props {
   /**
    * Callback called when the ESC key is pressed with the overlay active.
    */
-  onEscKeyDown?: __React.KeyboardEventHandler;
+  onEscKeyDown?: Function;
   /**
    * Callback to be invoked when the dialog overlay is clicked.
    */
-  onOverlayClick?: __React.MouseEventHandler;
+  onOverlayClick?: Function;
   /**
    * Callback called when the mouse button is pressed on the overlay.
    */
-  onOverlayMouseDown?: __React.MouseEventHandler;
+  onOverlayMouseDown?: Function;
   /**
    * Callback called when the mouse is moving over the overlay.
    */
-  onOverlayMouseMove?: __React.MouseEventHandler;
+  onOverlayMouseMove?: Function;
   /**
    * Callback called when the mouse button is released over the overlay.
    */
-  onOverlayMouseUp?: __React.MouseEventHandler;
+  onOverlayMouseUp?: Function;
   /**
    * Classnames object defining the component style.
    */
diff --git a/components/drawer/index.d.ts b/components/drawer/index.d.ts
index 3832c6e47..992c521a0 100644
--- a/components/drawer/index.d.ts
+++ b/components/drawer/index.d.ts
@@ -36,7 +36,7 @@ interface DrawerProps extends __ReactToolbox.Props {
   /**
    * Callback function to be invoked when the overlay is clicked.
    */
-  onOverlayClick?: __React.MouseEventHandler;
+  onOverlayClick?: Function;
   /**
    * Classnames object defining the component style.
    */
diff --git a/components/dropdown/index.d.ts b/components/dropdown/index.d.ts
index 886b0dff9..31f3e0ac0 100644
--- a/components/dropdown/index.d.ts
+++ b/components/dropdown/index.d.ts
@@ -82,15 +82,15 @@ interface DropdownProps extends __ReactToolbox.Props {
   /**
    * Callback function that is fired when the component is blurred.
    */
-  onBlur?: __React.FocusEventHandler;
+  onBlur?: Function;
   /**
    * Callback function that is fired when the component's value changes.
    */
-  onChange?: __React.FormEventHandler;
+  onChange?: Function;
   /**
    * Callback function that is fired when the component is focused.
    */
-  onFocus?: __React.FocusEventHandler;
+  onFocus?: Function;
   /**
    * Array of data objects with the data to represent in the dropdown.
    */
diff --git a/components/index.d.ts b/components/index.d.ts
index 7739a9d4e..027da6947 100644
--- a/components/index.d.ts
+++ b/components/index.d.ts
@@ -11,7 +11,36 @@ export declare namespace __ReactToolbox {
     /**
      * Callback called when the component is clicked.
      */
-    onClick?: __React.MouseEventHandler;
+    onClick?: Function;
+    /**
+     * Fires after the mouse is released from the Component.
+     */
+    onMouseUp?: Function;
+    /**
+     * Callback called when the mouse enters the Component.
+     */
+    onMouseEnter?: Function;
+    /**
+     * Callback called when the mouse leaves the Component.
+     */
+    onMouseLeave?: Function;
+    /**
+     * Callback called when the mouse press the Component.
+     */
+    onMouseDown?: Function;
+    onContextMenu?: Function;
+    onDoubleClick?: Function;
+    onDrag?: Function;
+    onDragEnd?: Function;
+    onDragEnter?: Function;
+    onDragExit?: Function;
+    onDragLeave?: Function;
+    onDragOver?: Function;
+    onDragStart?: Function;
+    onDrop?: Function;
+    onMouseMove?: Function;
+    onMouseOut?: Function;
+    onMouseOver?: Function;
     /**
      * Set inline style for the root component.
      */
diff --git a/components/input/index.d.ts b/components/input/index.d.ts
index 719ea9287..f9ac8a2da 100644
--- a/components/input/index.d.ts
+++ b/components/input/index.d.ts
@@ -90,7 +90,7 @@ interface InputProps extends __ReactToolbox.Props {
    * If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.
    * @default false
    */
-  multiLine?: boolean;
+  multiline?: boolean;
   /**
    * Name for the input field.
    */
@@ -98,19 +98,19 @@ interface InputProps extends __ReactToolbox.Props {
   /**
    * Callback function that is fired when component is blurred.
    */
-  onBlur?: __React.FocusEventHandler;
+  onBlur?: Function;
   /**
    * Callback function that is fired when the component's value changes
    */
-  onChange?: __React.FormEventHandler;
+  onChange?: Function;
   /**
    * Callback function that is fired when component is focused.
    */
-  onFocus?: __React.FocusEventHandler;
+  onFocus?: Function;
   /**
    * Callback function that is fired when a key is pressed.
    */
-  onKeyPress?: __React.MouseEventHandler;
+  onKeyPress?: Function;
   /**
    * If true, the html input has a required attribute.
    * @default false
diff --git a/components/layout/index.d.ts b/components/layout/index.d.ts
index ad2505d7f..ee13d174a 100644
--- a/components/layout/index.d.ts
+++ b/components/layout/index.d.ts
@@ -88,7 +88,7 @@ interface NavDrawerProps extends __ReactToolbox.Props {
   /**
    * Callback function to be invoked when the overlay is clicked.
    */
-  onOverlayClick?: __React.MouseEventHandler;
+  onOverlayClick?: Function;
   /**
    * The breakpoint at which the drawer is automatically pinned.
    */
diff --git a/components/list/index.d.ts b/components/list/index.d.ts
index cd0f6e7aa..a32f977cc 100644
--- a/components/list/index.d.ts
+++ b/components/list/index.d.ts
@@ -91,15 +91,15 @@ interface ListCheckboxProps extends __ReactToolbox.Props {
   /**
    * Callback called when the input element is blurred.
    */
-  onBlur?: __React.FocusEventHandler;
+  onBlur?: Function;
   /**
    * Callback called when the input element is changed.
    */
-  onChange?: __React.FormEventHandler;
+  onChange?: Function;
   /**
    * Callback called when the input element is focused.
    */
-  onFocus?: __React.FocusEventHandler;
+  onFocus?: Function;
   /**
    * Classnames object defining the component style.
    */
diff --git a/components/radio/index.d.ts b/components/radio/index.d.ts
index 5f3621329..be2ab4ce5 100644
--- a/components/radio/index.d.ts
+++ b/components/radio/index.d.ts
@@ -21,7 +21,7 @@ interface RadioGroupProps extends __ReactToolbox.Props {
   /**
    * Default value selected in the radio group.
    */
-  value?: number;
+  value?: any;
 }
 
 export class RadioGroup extends __React.Component<RadioGroupProps, {}> { }
@@ -79,15 +79,15 @@ interface RadioButtonProps extends __ReactToolbox.Props {
   /**
    * Callback function that will be invoked when the input is blurred.
    */
-  onBlur?: __React.FocusEventHandler;
+  onBlur?: Function;
   /**
    * Callback function that will be invoked when the value changes.
    */
-  onChange?: __React.FormEventHandler;
+  onChange?: Function;
   /**
    * Callback function that will be invoked when the input is focused.
    */
-  onFocus?: __React.FocusEventHandler;
+  onFocus?: Function;
   /**
    * Classnames object defining the component style.
    */
diff --git a/components/switch/index.d.ts b/components/switch/index.d.ts
index 6639a9b1d..ccb5fb1a0 100644
--- a/components/switch/index.d.ts
+++ b/components/switch/index.d.ts
@@ -57,15 +57,15 @@ interface SwitchProps extends __ReactToolbox.Props {
   /**
    * Callback function that is fired when when the switch is blurred.
    */
-  onBlur?: __React.FocusEventHandler;
+  onBlur?: Function;
   /**
    * Callback function that is fired when the component's value changes.
    */
-  onChange?: __React.FormEventHandler;
+  onChange?: Function;
   /**
    * Callback function that is fired when the switch is focused.
    */
-  onFocus?: __React.FocusEventHandler;
+  onFocus?: Function;
   /**
    * Classnames object defining the component style.
    */
diff --git a/components/table/index.d.ts b/components/table/index.d.ts
index 05b8fe4ac..629fd64f2 100644
--- a/components/table/index.d.ts
+++ b/components/table/index.d.ts
@@ -40,7 +40,7 @@ interface TableProps extends __ReactToolbox.Props {
   /**
    * Callback function invoked when the row selection changes.
    */
-  onSelect?: __React.FormEventHandler;
+  onSelect?: Function;
   /**
    * If true, each row will display a checkbox to allow the user to select that one row.
    * @default true
diff --git a/components/time_picker/index.d.ts b/components/time_picker/index.d.ts
index 0968a8c52..3d2d1092f 100644
--- a/components/time_picker/index.d.ts
+++ b/components/time_picker/index.d.ts
@@ -100,6 +100,10 @@ interface TimePickerProps {
    * Provide error text which will be displayed under the field.
    */
   error?: string;
+  /**
+   * A key to identify an Icon from Material Design Icons or a custom Icon Element.
+   */
+  icon?: __React.ReactNode | string;
   /**
    * This class will be applied to Input component of TimePicker.
    */
diff --git a/components/tooltip/index.d.ts b/components/tooltip/index.d.ts
index f7686d769..13c7032c7 100644
--- a/components/tooltip/index.d.ts
+++ b/components/tooltip/index.d.ts
@@ -14,14 +14,6 @@ export interface TooltipTheme {
 }
 
 interface TooltipProps {
-  /**
-   * Callback called when the mouse enters the Component.
-   */
-  onMouseEnter?: __React.MouseEventHandler;
-  /**
-   * Callback called when the mouse leaves the Component.
-   */
-  onMouseLeave?: __React.MouseEventHandler;
   /**
    * Classnames object defining the component style.
    */
diff --git a/lib/autocomplete/index.d.ts b/lib/autocomplete/index.d.ts
index f1b33954d..b149d3595 100644
--- a/lib/autocomplete/index.d.ts
+++ b/lib/autocomplete/index.d.ts
@@ -70,7 +70,7 @@ interface AutocompleteProps extends __ReactToolbox.Props {
    * Callback function that is fired when the components's value changes.
    * @default auto
    */
-  onChange?: __React.FormEventHandler;
+  onChange?: Function;
   /**
    * Determines if the selected list is shown above or below input. It can be above or below.
    * @default above
diff --git a/lib/button/index.d.ts b/lib/button/index.d.ts
index 60721b880..c2f0fa34d 100644
--- a/lib/button/index.d.ts
+++ b/lib/button/index.d.ts
@@ -105,11 +105,11 @@ interface ButtonProps extends __ReactToolbox.Props {
   /**
    * Fires after the mouse leaves the Component.
    */
-  onMouseLeave?: __React.MouseEventHandler;
+  onMouseLeave?: Function;
   /**
    * Fires after the mouse is released from the Component.
    */
-  OnMouseUp?: __React.MouseEventHandler;
+  OnMouseUp?: Function;
   /**
    * Indicates if the button should have primary color.
    * @default false
@@ -203,11 +203,11 @@ interface IconButtonProps extends __ReactToolbox.Props {
   /**
    * Fires after the mouse leaves the Component.
    */
-  onMouseLeave?: __React.MouseEventHandler;
+  onMouseLeave?: Function;
   /**
    * Fires after the mouse is released from the Component.
    */
-  OnMouseUp?: __React.MouseEventHandler;
+  OnMouseUp?: Function;
   /**
    * Indicates if the button should have primary color.
    * @default false
diff --git a/lib/checkbox/index.d.ts b/lib/checkbox/index.d.ts
index 2f5d2d678..d0e504d09 100644
--- a/lib/checkbox/index.d.ts
+++ b/lib/checkbox/index.d.ts
@@ -53,11 +53,11 @@ interface CheckboxProps extends __ReactToolbox.Props {
   /**
    * Callback called when the checkbox is blurred.
    */
-  onBlur?: __React.FocusEventHandler;
+  onBlur?: Function;
   /**
    * Callback called when the checkbox value is changed.
    */
-  onChange?: __React.MouseEventHandler;
+  onChange?: Function;
   /**
    * Classnames object defining the component style.
    */
diff --git a/lib/chip/index.d.ts b/lib/chip/index.d.ts
index 3ee44821a..a75649c46 100644
--- a/lib/chip/index.d.ts
+++ b/lib/chip/index.d.ts
@@ -40,7 +40,7 @@ interface ChipProps extends __ReactToolbox.Props {
   /**
    * Callback to be invoked when the delete icon is clicked.
    */
-  onDeleteClick?: __React.MouseEventHandler;
+  onDeleteClick?: Function;
   /**
    * Classnames object defining the component style.
    */
diff --git a/lib/date_picker/index.d.ts b/lib/date_picker/index.d.ts
index 1722fdacc..8660dca22 100644
--- a/lib/date_picker/index.d.ts
+++ b/lib/date_picker/index.d.ts
@@ -124,15 +124,15 @@ interface DatePickerProps extends __ReactToolbox.Props {
   /**
    * Callback called when the picker value is changed.
    */
-  onChange?: __React.MouseEventHandler;
+  onChange?: Function;
   /**
    * Callback called when the ESC key is pressed with the overlay active.
    */
-  onEscKeyDown?: __React.KeyboardEventHandler;
+  onEscKeyDown?: Function;
   /**
    * Callback to be invoked when the dialog overlay is clicked.
    */
-  onOverlayClick?: __React.MouseEventHandler;
+  onOverlayClick?: Function;
   /**
    * Classnames object defining the component style.
    */
diff --git a/lib/dialog/index.d.ts b/lib/dialog/index.d.ts
index 1fd938766..4980dba4f 100644
--- a/lib/dialog/index.d.ts
+++ b/lib/dialog/index.d.ts
@@ -35,7 +35,7 @@ interface DialogActionProps {
   /**
    * Callback called when the component is clicked.
    */
-  onClick?: __React.MouseEventHandler;
+  onClick?: Function;
 }
 
 interface DialogProps extends __ReactToolbox.Props {
@@ -55,23 +55,23 @@ interface DialogProps extends __ReactToolbox.Props {
   /**
    * Callback called when the ESC key is pressed with the overlay active.
    */
-  onEscKeyDown?: __React.KeyboardEventHandler;
+  onEscKeyDown?: Function;
   /**
    * Callback to be invoked when the dialog overlay is clicked.
    */
-  onOverlayClick?: __React.MouseEventHandler;
+  onOverlayClick?: Function;
   /**
    * Callback called when the mouse button is pressed on the overlay.
    */
-  onOverlayMouseDown?: __React.MouseEventHandler;
+  onOverlayMouseDown?: Function;
   /**
    * Callback called when the mouse is moving over the overlay.
    */
-  onOverlayMouseMove?: __React.MouseEventHandler;
+  onOverlayMouseMove?: Function;
   /**
    * Callback called when the mouse button is released over the overlay.
    */
-  onOverlayMouseUp?: __React.MouseEventHandler;
+  onOverlayMouseUp?: Function;
   /**
    * Classnames object defining the component style.
    */
diff --git a/lib/drawer/index.d.ts b/lib/drawer/index.d.ts
index 3832c6e47..992c521a0 100644
--- a/lib/drawer/index.d.ts
+++ b/lib/drawer/index.d.ts
@@ -36,7 +36,7 @@ interface DrawerProps extends __ReactToolbox.Props {
   /**
    * Callback function to be invoked when the overlay is clicked.
    */
-  onOverlayClick?: __React.MouseEventHandler;
+  onOverlayClick?: Function;
   /**
    * Classnames object defining the component style.
    */
diff --git a/lib/dropdown/index.d.ts b/lib/dropdown/index.d.ts
index 886b0dff9..31f3e0ac0 100644
--- a/lib/dropdown/index.d.ts
+++ b/lib/dropdown/index.d.ts
@@ -82,15 +82,15 @@ interface DropdownProps extends __ReactToolbox.Props {
   /**
    * Callback function that is fired when the component is blurred.
    */
-  onBlur?: __React.FocusEventHandler;
+  onBlur?: Function;
   /**
    * Callback function that is fired when the component's value changes.
    */
-  onChange?: __React.FormEventHandler;
+  onChange?: Function;
   /**
    * Callback function that is fired when the component is focused.
    */
-  onFocus?: __React.FocusEventHandler;
+  onFocus?: Function;
   /**
    * Array of data objects with the data to represent in the dropdown.
    */
diff --git a/lib/index.d.ts b/lib/index.d.ts
index 7739a9d4e..027da6947 100644
--- a/lib/index.d.ts
+++ b/lib/index.d.ts
@@ -11,7 +11,36 @@ export declare namespace __ReactToolbox {
     /**
      * Callback called when the component is clicked.
      */
-    onClick?: __React.MouseEventHandler;
+    onClick?: Function;
+    /**
+     * Fires after the mouse is released from the Component.
+     */
+    onMouseUp?: Function;
+    /**
+     * Callback called when the mouse enters the Component.
+     */
+    onMouseEnter?: Function;
+    /**
+     * Callback called when the mouse leaves the Component.
+     */
+    onMouseLeave?: Function;
+    /**
+     * Callback called when the mouse press the Component.
+     */
+    onMouseDown?: Function;
+    onContextMenu?: Function;
+    onDoubleClick?: Function;
+    onDrag?: Function;
+    onDragEnd?: Function;
+    onDragEnter?: Function;
+    onDragExit?: Function;
+    onDragLeave?: Function;
+    onDragOver?: Function;
+    onDragStart?: Function;
+    onDrop?: Function;
+    onMouseMove?: Function;
+    onMouseOut?: Function;
+    onMouseOver?: Function;
     /**
      * Set inline style for the root component.
      */
diff --git a/lib/input/index.d.ts b/lib/input/index.d.ts
index 719ea9287..5dd0d1fb1 100644
--- a/lib/input/index.d.ts
+++ b/lib/input/index.d.ts
@@ -90,7 +90,7 @@ interface InputProps extends __ReactToolbox.Props {
    * If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.
    * @default false
    */
-  multiLine?: boolean;
+  multiline?: boolean;
   /**
    * Name for the input field.
    */
@@ -98,19 +98,23 @@ interface InputProps extends __ReactToolbox.Props {
   /**
    * Callback function that is fired when component is blurred.
    */
-  onBlur?: __React.FocusEventHandler;
+  onBlur?: Function;
   /**
    * Callback function that is fired when the component's value changes
    */
-  onChange?: __React.FormEventHandler;
+  onChange?: Function;
   /**
    * Callback function that is fired when component is focused.
    */
-  onFocus?: __React.FocusEventHandler;
+  onFocus?: Function;
   /**
    * Callback function that is fired when a key is pressed.
    */
-  onKeyPress?: __React.MouseEventHandler;
+  onKeyPress?: Function;
+  /**
+   * Callback function that is fired when mouse down.
+   */
+  onMouseDown?: Function;
   /**
    * If true, the html input has a required attribute.
    * @default false
diff --git a/lib/layout/index.d.ts b/lib/layout/index.d.ts
index ad2505d7f..ee13d174a 100644
--- a/lib/layout/index.d.ts
+++ b/lib/layout/index.d.ts
@@ -88,7 +88,7 @@ interface NavDrawerProps extends __ReactToolbox.Props {
   /**
    * Callback function to be invoked when the overlay is clicked.
    */
-  onOverlayClick?: __React.MouseEventHandler;
+  onOverlayClick?: Function;
   /**
    * The breakpoint at which the drawer is automatically pinned.
    */
diff --git a/lib/list/index.d.ts b/lib/list/index.d.ts
index cd0f6e7aa..a32f977cc 100644
--- a/lib/list/index.d.ts
+++ b/lib/list/index.d.ts
@@ -91,15 +91,15 @@ interface ListCheckboxProps extends __ReactToolbox.Props {
   /**
    * Callback called when the input element is blurred.
    */
-  onBlur?: __React.FocusEventHandler;
+  onBlur?: Function;
   /**
    * Callback called when the input element is changed.
    */
-  onChange?: __React.FormEventHandler;
+  onChange?: Function;
   /**
    * Callback called when the input element is focused.
    */
-  onFocus?: __React.FocusEventHandler;
+  onFocus?: Function;
   /**
    * Classnames object defining the component style.
    */
diff --git a/lib/radio/index.d.ts b/lib/radio/index.d.ts
index 5f3621329..be2ab4ce5 100644
--- a/lib/radio/index.d.ts
+++ b/lib/radio/index.d.ts
@@ -21,7 +21,7 @@ interface RadioGroupProps extends __ReactToolbox.Props {
   /**
    * Default value selected in the radio group.
    */
-  value?: number;
+  value?: any;
 }
 
 export class RadioGroup extends __React.Component<RadioGroupProps, {}> { }
@@ -79,15 +79,15 @@ interface RadioButtonProps extends __ReactToolbox.Props {
   /**
    * Callback function that will be invoked when the input is blurred.
    */
-  onBlur?: __React.FocusEventHandler;
+  onBlur?: Function;
   /**
    * Callback function that will be invoked when the value changes.
    */
-  onChange?: __React.FormEventHandler;
+  onChange?: Function;
   /**
    * Callback function that will be invoked when the input is focused.
    */
-  onFocus?: __React.FocusEventHandler;
+  onFocus?: Function;
   /**
    * Classnames object defining the component style.
    */
diff --git a/lib/switch/index.d.ts b/lib/switch/index.d.ts
index 6639a9b1d..ccb5fb1a0 100644
--- a/lib/switch/index.d.ts
+++ b/lib/switch/index.d.ts
@@ -57,15 +57,15 @@ interface SwitchProps extends __ReactToolbox.Props {
   /**
    * Callback function that is fired when when the switch is blurred.
    */
-  onBlur?: __React.FocusEventHandler;
+  onBlur?: Function;
   /**
    * Callback function that is fired when the component's value changes.
    */
-  onChange?: __React.FormEventHandler;
+  onChange?: Function;
   /**
    * Callback function that is fired when the switch is focused.
    */
-  onFocus?: __React.FocusEventHandler;
+  onFocus?: Function;
   /**
    * Classnames object defining the component style.
    */
diff --git a/lib/table/index.d.ts b/lib/table/index.d.ts
index 05b8fe4ac..629fd64f2 100644
--- a/lib/table/index.d.ts
+++ b/lib/table/index.d.ts
@@ -40,7 +40,7 @@ interface TableProps extends __ReactToolbox.Props {
   /**
    * Callback function invoked when the row selection changes.
    */
-  onSelect?: __React.FormEventHandler;
+  onSelect?: Function;
   /**
    * If true, each row will display a checkbox to allow the user to select that one row.
    * @default true
diff --git a/lib/time_picker/index.d.ts b/lib/time_picker/index.d.ts
index 0968a8c52..3d2d1092f 100644
--- a/lib/time_picker/index.d.ts
+++ b/lib/time_picker/index.d.ts
@@ -100,6 +100,10 @@ interface TimePickerProps {
    * Provide error text which will be displayed under the field.
    */
   error?: string;
+  /**
+   * A key to identify an Icon from Material Design Icons or a custom Icon Element.
+   */
+  icon?: __React.ReactNode | string;
   /**
    * This class will be applied to Input component of TimePicker.
    */
diff --git a/lib/tooltip/index.d.ts b/lib/tooltip/index.d.ts
index f7686d769..91bc11b13 100644
--- a/lib/tooltip/index.d.ts
+++ b/lib/tooltip/index.d.ts
@@ -17,11 +17,11 @@ interface TooltipProps {
   /**
    * Callback called when the mouse enters the Component.
    */
-  onMouseEnter?: __React.MouseEventHandler;
+  onMouseEnter?: Function;
   /**
    * Callback called when the mouse leaves the Component.
    */
-  onMouseLeave?: __React.MouseEventHandler;
+  onMouseLeave?: Function;
   /**
    * Classnames object defining the component style.
    */

From 30f16231a025e9b4c498e664557f6ffdf02f4e70 Mon Sep 17 00:00:00 2001
From: Per Bergqwist <pbergqwist@contractor.ea.com>
Date: Wed, 10 Aug 2016 09:43:04 +0200
Subject: [PATCH 0748/1024] Added Touch events to the base props

---
 components/index.d.ts | 4 ++++
 lib/index.d.ts        | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/components/index.d.ts b/components/index.d.ts
index 027da6947..7113d389f 100644
--- a/components/index.d.ts
+++ b/components/index.d.ts
@@ -41,6 +41,10 @@ export declare namespace __ReactToolbox {
     onMouseMove?: Function;
     onMouseOut?: Function;
     onMouseOver?: Function;
+    onTouchCancel?: Function;
+    onTouchEnd?: Function;
+    uchMove?: Function;
+    onTouchStart?: Function;
     /**
      * Set inline style for the root component.
      */
diff --git a/lib/index.d.ts b/lib/index.d.ts
index 027da6947..7113d389f 100644
--- a/lib/index.d.ts
+++ b/lib/index.d.ts
@@ -41,6 +41,10 @@ export declare namespace __ReactToolbox {
     onMouseMove?: Function;
     onMouseOut?: Function;
     onMouseOver?: Function;
+    onTouchCancel?: Function;
+    onTouchEnd?: Function;
+    uchMove?: Function;
+    onTouchStart?: Function;
     /**
      * Set inline style for the root component.
      */

From c016565a5f9f9dc2ad62bc3278eb699e9c9c3b24 Mon Sep 17 00:00:00 2001
From: Per Bergqwist <pbergqwist@contractor.ea.com>
Date: Wed, 10 Aug 2016 09:54:05 +0200
Subject: [PATCH 0749/1024] Remove prop duplicates

---
 components/button/index.d.ts |  6 +++---
 lib/button/index.d.ts        | 16 ----------------
 lib/input/index.d.ts         |  4 ----
 lib/tooltip/index.d.ts       |  8 --------
 4 files changed, 3 insertions(+), 31 deletions(-)

diff --git a/components/button/index.d.ts b/components/button/index.d.ts
index ad0fd5243..c3b7b2c2b 100644
--- a/components/button/index.d.ts
+++ b/components/button/index.d.ts
@@ -193,9 +193,9 @@ interface IconButtonProps extends __ReactToolbox.Props {
    */
   neutral?: boolean;
   /**
-    * Indicates if the button should have primary color.
-    * @default false
-    */
+   * Indicates if the button should have primary color.
+   * @default false
+   */
   primary?: boolean;
   /**
    * If true, component will have a ripple effect on click.
diff --git a/lib/button/index.d.ts b/lib/button/index.d.ts
index c2f0fa34d..c3b7b2c2b 100644
--- a/lib/button/index.d.ts
+++ b/lib/button/index.d.ts
@@ -102,14 +102,6 @@ interface ButtonProps extends __ReactToolbox.Props {
    * @default true
    */
   neutral?: boolean;
-  /**
-   * Fires after the mouse leaves the Component.
-   */
-  onMouseLeave?: Function;
-  /**
-   * Fires after the mouse is released from the Component.
-   */
-  OnMouseUp?: Function;
   /**
    * Indicates if the button should have primary color.
    * @default false
@@ -200,14 +192,6 @@ interface IconButtonProps extends __ReactToolbox.Props {
    * @default true
    */
   neutral?: boolean;
-  /**
-   * Fires after the mouse leaves the Component.
-   */
-  onMouseLeave?: Function;
-  /**
-   * Fires after the mouse is released from the Component.
-   */
-  OnMouseUp?: Function;
   /**
    * Indicates if the button should have primary color.
    * @default false
diff --git a/lib/input/index.d.ts b/lib/input/index.d.ts
index 5dd0d1fb1..f9ac8a2da 100644
--- a/lib/input/index.d.ts
+++ b/lib/input/index.d.ts
@@ -111,10 +111,6 @@ interface InputProps extends __ReactToolbox.Props {
    * Callback function that is fired when a key is pressed.
    */
   onKeyPress?: Function;
-  /**
-   * Callback function that is fired when mouse down.
-   */
-  onMouseDown?: Function;
   /**
    * If true, the html input has a required attribute.
    * @default false
diff --git a/lib/tooltip/index.d.ts b/lib/tooltip/index.d.ts
index 91bc11b13..13c7032c7 100644
--- a/lib/tooltip/index.d.ts
+++ b/lib/tooltip/index.d.ts
@@ -14,14 +14,6 @@ export interface TooltipTheme {
 }
 
 interface TooltipProps {
-  /**
-   * Callback called when the mouse enters the Component.
-   */
-  onMouseEnter?: Function;
-  /**
-   * Callback called when the mouse leaves the Component.
-   */
-  onMouseLeave?: Function;
   /**
    * Classnames object defining the component style.
    */

From 5c09c5c6bb8b55168357f3c3981c0f01158558c8 Mon Sep 17 00:00:00 2001
From: Aren Blondahl <rean1985@gmail.com>
Date: Wed, 10 Aug 2016 03:31:07 -0600
Subject: [PATCH 0750/1024] Fixed #696 - Button Icon/Inner Alignment

Button content was improperly being aligned due to the misleading nature of how vertical-align: middle works. Added a visual segment to the spec so it can be acceptance tested by developers.
---
 components/button/theme.scss |  6 +++---
 spec/components/button.js    | 11 +++++++++++
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/components/button/theme.scss b/components/button/theme.scss
index f57d6027e..cff21b375 100644
--- a/components/button/theme.scss
+++ b/components/button/theme.scss
@@ -31,14 +31,14 @@
   > span:not([data-react-toolbox="tooltip"]) {
     display: inline-block;
     line-height: $button-height;
-    vertical-align: middle;
+    vertical-align: top;
   }
   > svg {
     display: inline-block;
     width: 1em;
     height: $button-height;
     font-size: 120%;
-    vertical-align: middle;
+    vertical-align: top;
     fill: currentColor;
   }
   > * {
@@ -126,7 +126,7 @@
   > .icon, svg {
     font-size: $button-toggle-font-size;
     line-height: $button-height;
-    vertical-align: middle;
+    vertical-align: top;
   }
   > .rippleWrapper {
     border-radius: 50%;
diff --git a/spec/components/button.js b/spec/components/button.js
index 1baabdb01..1a841ee7b 100644
--- a/spec/components/button.js
+++ b/spec/components/button.js
@@ -24,6 +24,17 @@ const ButtonTest = () => (
     <IconButton primary><GithubIcon/></IconButton>
     <Button icon='add' label='Add this' flat primary />
     <Button icon='add' label='Add this' flat disabled />
+    <h5>Icon Button Alignment</h5>
+    <p>
+      Icon Buttons should align in the vertical center, to see this we need to
+      put them next to text or highlight thier background color.
+    </p>
+    <IconButton icon='menu' style={{'background-color': 'red'}} inverse />
+    <span style={{'vertical-align': 'middle'}}>Menu</span>
+    <IconButton icon='menu' />
+    <span style={{'vertical-align': 'middle'}}>Menu</span>
+    <IconButton><GithubIcon /></IconButton>
+    <span style={{'vertical-align': 'middle'}}>Github</span>
   </section>
 );
 

From afc2124d86e8bd6ec23322122f4bba5a02f804e6 Mon Sep 17 00:00:00 2001
From: Ro Savage <rowan.savage@gmail.com>
Date: Thu, 11 Aug 2016 10:25:44 +1200
Subject: [PATCH 0751/1024] Added missing modules

---
 lib/tabs/Tabs.js | 2 +-
 package.json     | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/lib/tabs/Tabs.js b/lib/tabs/Tabs.js
index a5344d57a..1dc68473e 100644
--- a/lib/tabs/Tabs.js
+++ b/lib/tabs/Tabs.js
@@ -53,7 +53,7 @@ var factory = function factory(Tab, TabContent) {
       return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Tabs)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
         pointer: {}
       }, _this.handleHeaderClick = function (event) {
-        var idx = parseInt(event.target.id);
+        var idx = parseInt(event.currentTarget.id);
         if (_this.props.onChange) _this.props.onChange(idx);
       }, _temp), _possibleConstructorReturn(_this, _ret);
     }
diff --git a/package.json b/package.json
index 4941c55ee..15b9b61da 100644
--- a/package.json
+++ b/package.json
@@ -76,9 +76,11 @@
     "phantomjs-prebuilt": "^2.1.7",
     "postcss-loader": "^0.9.1",
     "react": "^15.2.1",
-    "react-addons-test-utils": "^15.0.2",
+    "react-addons-update": "^15.2.1",
+    "react-addons-test-utils": "^15.2.1",
+    "react-addons-css-transition-group": "^15.2.1",
     "react-docgen": "^2.8.2",
-    "react-dom": "^15.2.0",
+    "react-dom": "^15.2.1",
     "react-transform-catch-errors": "^1.0.2",
     "react-transform-hmr": "^1.0.4",
     "redbox-react": "^1.2.4",

From ad2a8e845903500c48a3c961964212ed07445bcb Mon Sep 17 00:00:00 2001
From: Ro Savage <rowan.savage@gmail.com>
Date: Thu, 11 Aug 2016 12:05:06 +1200
Subject: [PATCH 0752/1024] Added ability to navigate calendar with keyboard

---
 components/date_picker/Calendar.js         | 29 ++++++++++++++++++
 components/date_picker/DatePicker.js       |  4 +--
 components/date_picker/DatePickerDialog.js |  1 +
 lib/date_picker/Calendar.js                | 34 ++++++++++++++++++++++
 lib/date_picker/DatePicker.js              |  4 +--
 lib/date_picker/DatePickerDialog.js        |  1 +
 6 files changed, 69 insertions(+), 4 deletions(-)

diff --git a/components/date_picker/Calendar.js b/components/date_picker/Calendar.js
index 046753428..2133fe1f7 100644
--- a/components/date_picker/Calendar.js
+++ b/components/date_picker/Calendar.js
@@ -11,6 +11,7 @@ const factory = (IconButton) => {
   class Calendar extends Component {
     static propTypes = {
       display: PropTypes.oneOf(['months', 'years']),
+      handleSelect: PropTypes.func,
       locale: React.PropTypes.oneOfType([
         React.PropTypes.string,
         React.PropTypes.object
@@ -39,12 +40,20 @@ const factory = (IconButton) => {
       viewDate: this.props.selectedDate
     };
 
+    componentWillMount () {
+      document.body.addEventListener('keydown', this.handleKeys);
+    }
+
     componentDidUpdate () {
       if (this.refs.activeYear) {
         this.scrollToActive();
       }
     }
 
+    componentWillUnmount () {
+      document.body.removeEventListener('keydown', this.handleKeys);
+    }
+
     scrollToActive () {
       this.refs.years.scrollTop = this.refs.activeYear.offsetTop
       - this.refs.years.offsetHeight / 2
@@ -62,6 +71,26 @@ const factory = (IconButton) => {
       this.props.onChange(viewDate, false);
     };
 
+    handleKeys = (e) => {
+      const { selectedDate } = this.props;
+
+      if (e.which === 37 || e.which === 38 || e.which === 39 || e.which === 40 || e.which === 13) e.preventDefault();
+
+      switch (e.which) {
+        case 13: this.props.handleSelect(); break; // enter
+        case 37: this.handleDayArrowKey(time.addDays(selectedDate, -1)); break; // left
+        case 38: this.handleDayArrowKey(time.addDays(selectedDate, -7)); break; // up
+        case 39: this.handleDayArrowKey(time.addDays(selectedDate, 1)); break; // right
+        case 40: this.handleDayArrowKey(time.addDays(selectedDate, 7)); break; // down
+        default: break;
+      }
+    }
+
+    handleDayArrowKey = (date) => {
+      this.setState({ viewDate: date });
+      this.props.onChange(date, false);
+    }
+
     changeViewMonth = (event) => {
       const direction = event.target.id;
       this.setState({
diff --git a/components/date_picker/DatePicker.js b/components/date_picker/DatePicker.js
index 7a6bdd361..418d6fdac 100644
--- a/components/date_picker/DatePicker.js
+++ b/components/date_picker/DatePicker.js
@@ -130,8 +130,8 @@ const factory = (Input, DatePickerDialog) => {
             minDate={minDate}
             name={this.props.name}
             onDismiss={this.handleDismiss}
-            onEscKeyDown={onEscKeyDown}
-            onOverlayClick={onOverlayClick}
+            onEscKeyDown={onEscKeyDown || this.handleDismiss}
+            onOverlayClick={onOverlayClick || this.handleDismiss}
             onSelect={this.handleSelect}
             sundayFirstDayOfWeek={sundayFirstDayOfWeek}
             theme={this.props.theme}
diff --git a/components/date_picker/DatePickerDialog.js b/components/date_picker/DatePickerDialog.js
index c91b3e206..af54440aa 100644
--- a/components/date_picker/DatePickerDialog.js
+++ b/components/date_picker/DatePickerDialog.js
@@ -116,6 +116,7 @@ const factory = (Dialog, Calendar) => {
           <div className={theme.calendarWrapper}>
             <Calendar
               display={this.state.display}
+              handleSelect={this.handleSelect}
               maxDate={this.props.maxDate}
               minDate={this.props.minDate}
               onChange={this.handleNewDate}
diff --git a/lib/date_picker/Calendar.js b/lib/date_picker/Calendar.js
index d4e5a6630..f8275ff17 100644
--- a/lib/date_picker/Calendar.js
+++ b/lib/date_picker/Calendar.js
@@ -62,6 +62,29 @@ var factory = function factory(IconButton) {
         var viewDate = _time2.default.setYear(_this.props.selectedDate, year);
         _this.setState({ viewDate: viewDate });
         _this.props.onChange(viewDate, false);
+      }, _this.handleKeys = function (e) {
+        var selectedDate = _this.props.selectedDate;
+
+
+        if (e.which === 37 || e.which === 38 || e.which === 39 || e.which === 40 || e.which === 13) e.preventDefault();
+
+        switch (e.which) {
+          case 13:
+            _this.props.handleSelect();break; // enter
+          case 37:
+            _this.handleDayArrowKey(_time2.default.addDays(selectedDate, -1));break; // left
+          case 38:
+            _this.handleDayArrowKey(_time2.default.addDays(selectedDate, -7));break; // up
+          case 39:
+            _this.handleDayArrowKey(_time2.default.addDays(selectedDate, 1));break; // right
+          case 40:
+            _this.handleDayArrowKey(_time2.default.addDays(selectedDate, 7));break; // down
+          default:
+            break;
+        }
+      }, _this.handleDayArrowKey = function (date) {
+        _this.setState({ viewDate: date });
+        _this.props.onChange(date, false);
       }, _this.changeViewMonth = function (event) {
         var direction = event.target.id;
         _this.setState({
@@ -72,12 +95,22 @@ var factory = function factory(IconButton) {
     }
 
     _createClass(Calendar, [{
+      key: 'componentWillMount',
+      value: function componentWillMount() {
+        document.body.addEventListener('keydown', this.handleKeys);
+      }
+    }, {
       key: 'componentDidUpdate',
       value: function componentDidUpdate() {
         if (this.refs.activeYear) {
           this.scrollToActive();
         }
       }
+    }, {
+      key: 'componentWillUnmount',
+      value: function componentWillUnmount() {
+        document.body.removeEventListener('keydown', this.handleKeys);
+      }
     }, {
       key: 'scrollToActive',
       value: function scrollToActive() {
@@ -147,6 +180,7 @@ var factory = function factory(IconButton) {
 
   Calendar.propTypes = {
     display: _react.PropTypes.oneOf(['months', 'years']),
+    handleSelect: _react.PropTypes.func,
     locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
     maxDate: _react.PropTypes.object,
     minDate: _react.PropTypes.object,
diff --git a/lib/date_picker/DatePicker.js b/lib/date_picker/DatePicker.js
index a8409ea52..c029e7b20 100644
--- a/lib/date_picker/DatePicker.js
+++ b/lib/date_picker/DatePicker.js
@@ -157,8 +157,8 @@ var factory = function factory(Input, DatePickerDialog) {
             minDate: minDate,
             name: this.props.name,
             onDismiss: this.handleDismiss,
-            onEscKeyDown: onEscKeyDown,
-            onOverlayClick: onOverlayClick,
+            onEscKeyDown: onEscKeyDown || this.handleDismiss,
+            onOverlayClick: onOverlayClick || this.handleDismiss,
             onSelect: this.handleSelect,
             sundayFirstDayOfWeek: sundayFirstDayOfWeek,
             theme: this.props.theme,
diff --git a/lib/date_picker/DatePickerDialog.js b/lib/date_picker/DatePickerDialog.js
index 0a3d91105..eca036556 100644
--- a/lib/date_picker/DatePickerDialog.js
+++ b/lib/date_picker/DatePickerDialog.js
@@ -123,6 +123,7 @@ var factory = function factory(Dialog, Calendar) {
             { className: theme.calendarWrapper },
             _react2.default.createElement(Calendar, {
               display: this.state.display,
+              handleSelect: this.handleSelect,
               maxDate: this.props.maxDate,
               minDate: this.props.minDate,
               onChange: this.handleNewDate,

From 0dcec60d3185d3a58c869b9ce693cb9557240f90 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 11 Aug 2016 17:48:59 +0200
Subject: [PATCH 0753/1024] 1.1.2 release

---
 package.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 0c36b3e09..1dcb05d51 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "react-toolbox",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "homepage": "http://www.react-toolbox.com/",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "main": "./lib",
   "author": {
     "name": "React Toolbox Team",
@@ -76,9 +76,9 @@
     "phantomjs-prebuilt": "^2.1.7",
     "postcss-loader": "^0.9.1",
     "react": "^15.2.1",
-    "react-addons-update": "^15.2.1",
-    "react-addons-test-utils": "^15.2.1",
     "react-addons-css-transition-group": "^15.2.1",
+    "react-addons-test-utils": "^15.2.1",
+    "react-addons-update": "^15.2.1",
     "react-docgen": "^2.8.2",
     "react-dom": "^15.2.1",
     "react-transform-catch-errors": "^1.0.2",

From 9bf1c8e4feb04383aa0f8332321f723112734dde Mon Sep 17 00:00:00 2001
From: Aren Blondahl <rean1985@gmail.com>
Date: Thu, 11 Aug 2016 20:55:45 -0600
Subject: [PATCH 0754/1024] Support for fixed & inverse color tabs.

---
 components/tabs/Tabs.js                       | 41 +++++++++++++++--
 components/tabs/__tests__/index.spec.js       | 34 +++++++++++++-
 components/tabs/_config.scss                  |  7 +++
 components/tabs/readme.md                     | 45 +++++++++++++++----
 components/tabs/theme.scss                    | 24 ++++++++++
 .../main/modules/examples/tabs_example_1.txt  | 45 +++++++++++++++----
 spec/components/tabs.js                       | 27 ++++++++++-
 7 files changed, 201 insertions(+), 22 deletions(-)

diff --git a/components/tabs/Tabs.js b/components/tabs/Tabs.js
index 0db6d1210..1cab99f6d 100644
--- a/components/tabs/Tabs.js
+++ b/components/tabs/Tabs.js
@@ -13,15 +13,21 @@ const factory = (Tab, TabContent) => {
       disableAnimatedBottomBorder: PropTypes.bool,
       index: PropTypes.number,
       onChange: PropTypes.func,
+      fixed: PropTypes.bool,
+      inverse: PropTypes.bool,
       theme: PropTypes.shape({
         navigation: PropTypes.string,
         pointer: PropTypes.string,
-        tabs: PropTypes.string
+        tabs: PropTypes.string,
+        fixed: PropTypes.string,
+        inverse: PropTypes.string
       })
     };
 
     static defaultProps = {
-      index: 0
+      index: 0,
+      fixed: false,
+      inverse: false      
     };
 
     state = {
@@ -30,6 +36,8 @@ const factory = (Tab, TabContent) => {
 
     componentDidMount () {
       !this.props.disableAnimatedBottomBorder && this.updatePointer(this.props.index);
+      window.addEventListener('resize', this.handleResize);
+      this.handleResize();
     }
 
     componentWillReceiveProps (nextProps) {
@@ -37,6 +45,8 @@ const factory = (Tab, TabContent) => {
     }
 
     componentWillUnmount () {
+      window.removeEventListener('resize', this.handleResize);
+      clearTimeout(this.resizeTimeout);
       clearTimeout(this.pointerTimeout);
     }
 
@@ -45,6 +55,21 @@ const factory = (Tab, TabContent) => {
       if (this.props.onChange) this.props.onChange(idx);
     };
 
+    handleResize = (event) => {
+      if (!this.props.fixed) {
+        return;
+      }
+
+      if (this.resizeTimeout) {
+        clearTimeout(this.resizeTimeout);
+      }
+      this.resizeTimeout = setTimeout(this.handleResizeEnd, 50);
+    };
+
+    handleResizeEnd = () => {
+      this.updatePointer(this.props.index);
+    };
+
     parseChildren () {
       const headers = [];
       const contents = [];
@@ -104,10 +129,18 @@ const factory = (Tab, TabContent) => {
     }
 
     render () {
-      const { className, theme } = this.props;
+      const { className, theme, fixed, inverse } = this.props;
       const { headers, contents } = this.parseChildren();
+      const classes = classnames(
+        theme.tabs,
+        className,
+        {
+          [theme.fixed]: fixed,
+          [theme.inverse]: inverse
+        }
+      );
       return (
-        <div ref='tabs' data-react-toolbox='tabs' className={classnames(theme.tabs, className)}>
+        <div ref='tabs' data-react-toolbox='tabs' className={classes}>
           <nav className={theme.navigation} ref='navigation'>
             {this.renderHeaders(headers)}
           </nav>
diff --git a/components/tabs/__tests__/index.spec.js b/components/tabs/__tests__/index.spec.js
index 311c63310..f20d9596d 100644
--- a/components/tabs/__tests__/index.spec.js
+++ b/components/tabs/__tests__/index.spec.js
@@ -3,10 +3,17 @@ import utils from '../../utils/testing';
 import ReactTestUtils from 'react-addons-test-utils';
 
 import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
 
-import Tabs from '../Tabs';
+import Tabs, { Tabs as RawTabs } from '../Tabs';
 import Tab from '../Tab';
 import TabContent from '../TabContent';
+import theme from '../theme.scss';
+
+const getRenderedClassName = (tree, Component) => {
+  const rendered = ReactTestUtils.findRenderedComponentWithType(tree, Component);
+  return ReactDOM.findDOMNode(rendered).getAttribute('class');
+};
 
 describe('Tabs', function () {
   let tabContents, composition;
@@ -48,4 +55,29 @@ describe('Tabs', function () {
     expect(tabContents[0].props.tabIndex).toEqual(1);
   });
 
+  describe('#render', function() {
+    it('does not use fixed by default', function() {
+      const tree = ReactTestUtils.renderIntoDocument(<Tabs theme={theme} />);
+      const className = getRenderedClassName(tree, RawTabs);
+      expect(className).toNotContain(theme.fixed);
+    });
+
+    it('uses fixed when set', function() {
+      const tree = ReactTestUtils.renderIntoDocument(<Tabs theme={theme} fixed />);
+      const className = getRenderedClassName(tree, RawTabs);
+      expect(className).toContain(theme.fixed);
+    });
+
+    it('does not use inverse by default', function() {
+      const tree = ReactTestUtils.renderIntoDocument(<Tabs theme={theme} />);
+      const className = getRenderedClassName(tree, RawTabs);
+      expect(className).toNotContain(theme.inverse);
+    });
+
+    it('uses inverse when set', function() {
+      const tree = ReactTestUtils.renderIntoDocument(<Tabs theme={theme} inverse />);
+      const className = getRenderedClassName(tree, RawTabs);
+      expect(className).toContain(theme.inverse);
+    });
+  });
 });
diff --git a/components/tabs/_config.scss b/components/tabs/_config.scss
index f67e55875..4a03d6419 100644
--- a/components/tabs/_config.scss
+++ b/components/tabs/_config.scss
@@ -9,3 +9,10 @@ $tab-pointer-height: .2 * $unit !default;
 $tab-text: $color-black !default;
 $tab-text-color: $tab-text !default;
 $tab-text-inactive-color: rgba($tab-text, .7) !default;
+
+// Inverse
+$tab-inverse-bar-color: $color-primary !default;
+$tab-inverse-pointer-color: $color-accent !default;
+$tab-inverse-text: $color-primary-contrast !default;
+$tab-inverse-text-color: $tab-inverse-text !default;
+$tab-inverse-text-inactive-color: rgba($tab-inverse-text, .7) !default;
diff --git a/components/tabs/readme.md b/components/tabs/readme.md
index b2c8d3a1b..2c473267d 100644
--- a/components/tabs/readme.md
+++ b/components/tabs/readme.md
@@ -8,26 +8,51 @@ import {Tab, Tabs} from 'react-toolbox';
 
 class TabsTest extends React.Component {
   state = {
-    index: 1
+    index: 1,
+    fixedIndex: 1,
+    inverseIndex: 1
   };
 
   handleTabChange = (index) => {
     this.setState({index});
   };
 
+  handleFixedTabChange = (index) => {
+    this.setState({fixedIndex: index});
+  };
+
+  handleInverseTabChange = (index) => {
+    this.setState({inverseIndex: index});
+  };
+
   handleActive = () => {
     console.log('Special one activated');
   };
 
   render () {
     return (
-      <Tabs index={this.state.index} onChange={this.handleTabChange}>
-        <Tab label='Primary'><small>Primary content</small></Tab>
-        <Tab label='Secondary' onActive={this.handleActive}><small>Secondary content</small></Tab>
-        <Tab label='Third' disabled><small>Disabled content</small></Tab>
-        <Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
-        <Tab label='Fifth'><small>Fifth content</small></Tab>
-      </Tabs>
+      <section>
+        <Tabs index={this.state.index} onChange={this.handleTabChange}>
+          <Tab label='Primary'><small>Primary content</small></Tab>
+          <Tab label='Secondary' onActive={this.handleActive}><small>Secondary content</small></Tab>
+          <Tab label='Third' disabled><small>Disabled content</small></Tab>
+          <Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
+          <Tab label='Fifth'><small>Fifth content</small></Tab>
+        </Tabs>
+        <h5>Fixed Tabs</h5>
+        <Tabs index={this.state.fixedIndex} onChange={this.handleFixedTabChange} fixed>
+          <Tab label='First'><small>First Content</small></Tab>
+          <Tab label='Second'><small>Second Content</small></Tab>
+          <Tab label='Third'><small>Third Content</small></Tab>
+        </Tabs>
+        <h5>Inverse Tabs</h5>
+        <Tabs index={this.state.inverseIndex} onChange={this.handleInverseTabChange} inverse>
+          <Tab label='First'><small>First Content</small></Tab>
+          <Tab label='Second'><small>Second Content</small></Tab>
+          <Tab label='Third'><small>Third Content</small></Tab>
+          <Tab label='Disabled' disabled><small>Disabled Content</small></Tab>
+        </Tabs>
+      </section>
     );
   }
 }
@@ -45,7 +70,9 @@ This component acts as the wrapper and the main controller of the content that i
 |:-----|:-----|:-----|:-----|
 | `className`                   | `String`        | `''`            | Additional class name to provide custom styling.|
 | `disableAnimatedBottomBorder` | `Boolean`       | `false`         | Disable the animation below the active tab.|
+| `fixed`                       | `Boolean`       | `false`         | If True, the tabs will be 'fixed tabs'.|
 | `index`                       | `Number`        | `0`             | Current <Tab> |
+| `inverse`                     | `Boolean`       | `false`         | If True, the tabs will have an inverse style.|
 | `onChange`                    | `Function`      |                 | Callback function that is fired when the tab changes.|
 
 ### Theming
@@ -53,6 +80,8 @@ This component acts as the wrapper and the main controller of the content that i
 | Name     | Description|
 |:---------|:-----------|
 | `active` | Added to the active tab content and header.|
+| `fixed` | Used to make the tabs 'fixed tabs'.|
+| `inverse` | Used to invert the colors.|
 | `navigation` | Used for the navigation element.|
 | `pointer` | Used for the moving underline element.|
 | `tabs` |Used as a root classname for the component.|
diff --git a/components/tabs/theme.scss b/components/tabs/theme.scss
index f2e77760e..173f8c147 100644
--- a/components/tabs/theme.scss
+++ b/components/tabs/theme.scss
@@ -61,3 +61,27 @@
     display: block;
   }
 }
+
+.fixed {
+  .label {
+    flex: 1;
+    text-align: center;
+  }
+}
+
+.inverse {
+  .navigation {
+    background-color: $tab-inverse-bar-color;
+  }
+
+  .label {
+    color: $tab-inverse-text-inactive-color;
+    &.active {
+      color: $tab-inverse-text-color;
+    }
+  }
+
+  .pointer {
+    background-color: $tab-inverse-pointer-color;
+  }
+}
\ No newline at end of file
diff --git a/docs/app/components/layout/main/modules/examples/tabs_example_1.txt b/docs/app/components/layout/main/modules/examples/tabs_example_1.txt
index 617d2c667..b01e15c5e 100644
--- a/docs/app/components/layout/main/modules/examples/tabs_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/tabs_example_1.txt
@@ -1,21 +1,50 @@
 class TabsExample extends React.Component {
   state = {
-    index: 1
+    index: 1,
+    fixedIndex: 1,
+    inverseIndex: 1
   };
 
   handleTabChange = (index) => {
     this.setState({index});
   };
 
+  handleFixedTabChange = (index) => {
+    this.setState({fixedIndex: index});
+  };
+
+  handleInverseTabChange = (index) => {
+    this.setState({inverseIndex: index});
+  };
+
+  handleActive = () => {
+    console.log('Special one activated');
+  };
+
   render () {
     return (
-      <Tabs index={this.state.index} onChange={this.handleTabChange}>
-        <Tab label='Primary'><small>Primary content</small></Tab>
-        <Tab label='Secondary'><small>Secondary content</small></Tab>
-        <Tab label='Third' disabled><small>Disabled content</small></Tab>
-        <Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
-        <Tab label='Fifth'><small>Fifth content</small></Tab>
-      </Tabs>
+      <section>
+        <Tabs index={this.state.index} onChange={this.handleTabChange}>
+          <Tab label='Primary'><small>Primary content</small></Tab>
+          <Tab label='Secondary' onActive={this.handleActive}><small>Secondary content</small></Tab>
+          <Tab label='Third' disabled><small>Disabled content</small></Tab>
+          <Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
+          <Tab label='Fifth'><small>Fifth content</small></Tab>
+        </Tabs>
+        <h5>Fixed Tabs</h5>
+        <Tabs index={this.state.fixedIndex} onChange={this.handleFixedTabChange} fixed>
+          <Tab label='First'><small>First Content</small></Tab>
+          <Tab label='Second'><small>Second Content</small></Tab>
+          <Tab label='Third'><small>Third Content</small></Tab>
+        </Tabs>
+        <h5>Inverse Tabs</h5>
+        <Tabs index={this.state.inverseIndex} onChange={this.handleInverseTabChange} inverse>
+          <Tab label='First'><small>First Content</small></Tab>
+          <Tab label='Second'><small>Second Content</small></Tab>
+          <Tab label='Third'><small>Third Content</small></Tab>
+          <Tab label='Disabled' disabled><small>Disabled Content</small></Tab>
+        </Tabs>
+      </section>
     );
   }
 }
diff --git a/spec/components/tabs.js b/spec/components/tabs.js
index 73d037f26..e1be5879c 100644
--- a/spec/components/tabs.js
+++ b/spec/components/tabs.js
@@ -3,13 +3,23 @@ import { Tabs, Tab } from '../../components/tabs';
 
 class TabsTest extends React.Component {
   state = {
-    index: 1
+    index: 1,
+    fixedIndex: 1,
+    inverseIndex: 1
   };
 
   handleTabChange = (index) => {
     this.setState({index});
   };
 
+  handleFixedTabChange = (index) => {
+    this.setState({fixedIndex: index});
+  };
+
+  handleInverseTabChange = (index) => {
+    this.setState({inverseIndex: index});
+  };
+
   handleActive = () => {
     console.log('Special one activated');
   };
@@ -26,6 +36,21 @@ class TabsTest extends React.Component {
           <Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
           <Tab label='Fifth'><small>Fifth content</small></Tab>
         </Tabs>
+        <h5>Fixed Tabs</h5>
+        <p>These tabs fill the given space.</p>
+        <Tabs index={this.state.fixedIndex} onChange={this.handleFixedTabChange} fixed>
+          <Tab label='First'><small>First Content</small></Tab>
+          <Tab label='Second'><small>Second Content</small></Tab>
+          <Tab label='Third'><small>Third Content</small></Tab>
+        </Tabs>
+        <h5>Inverse Tabs</h5>
+        <p>These tabs have an inverted theme.</p>
+        <Tabs index={this.state.inverseIndex} onChange={this.handleInverseTabChange} inverse>
+          <Tab label='First'><small>First Content</small></Tab>
+          <Tab label='Second'><small>Second Content</small></Tab>
+          <Tab label='Third'><small>Third Content</small></Tab>
+          <Tab label='Disabled' disabled><small>Disabled Content</small></Tab>
+        </Tabs>
       </section>
     );
   }

From 8dedcfce776b1f372402c7aebbc91fcd9202aebf Mon Sep 17 00:00:00 2001
From: Aren Blondahl <rean1985@gmail.com>
Date: Thu, 11 Aug 2016 21:31:08 -0600
Subject: [PATCH 0755/1024] Fixed linting errors.

---
 components/tabs/Tabs.js                 | 14 +++++++-------
 components/tabs/__tests__/index.spec.js | 14 +++++++-------
 components/tabs/theme.scss              |  2 +-
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/components/tabs/Tabs.js b/components/tabs/Tabs.js
index 1cab99f6d..cdedb23bb 100644
--- a/components/tabs/Tabs.js
+++ b/components/tabs/Tabs.js
@@ -11,23 +11,23 @@ const factory = (Tab, TabContent) => {
       children: PropTypes.node,
       className: PropTypes.string,
       disableAnimatedBottomBorder: PropTypes.bool,
-      index: PropTypes.number,
-      onChange: PropTypes.func,
       fixed: PropTypes.bool,
+      index: PropTypes.number,
       inverse: PropTypes.bool,
+      onChange: PropTypes.func,
       theme: PropTypes.shape({
+        fixed: PropTypes.string,
+        inverse: PropTypes.string,
         navigation: PropTypes.string,
         pointer: PropTypes.string,
-        tabs: PropTypes.string,
-        fixed: PropTypes.string,
-        inverse: PropTypes.string
+        tabs: PropTypes.string
       })
     };
 
     static defaultProps = {
       index: 0,
       fixed: false,
-      inverse: false      
+      inverse: false
     };
 
     state = {
@@ -55,7 +55,7 @@ const factory = (Tab, TabContent) => {
       if (this.props.onChange) this.props.onChange(idx);
     };
 
-    handleResize = (event) => {
+    handleResize = () => {
       if (!this.props.fixed) {
         return;
       }
diff --git a/components/tabs/__tests__/index.spec.js b/components/tabs/__tests__/index.spec.js
index f20d9596d..ad53cefc0 100644
--- a/components/tabs/__tests__/index.spec.js
+++ b/components/tabs/__tests__/index.spec.js
@@ -10,8 +10,8 @@ import Tab from '../Tab';
 import TabContent from '../TabContent';
 import theme from '../theme.scss';
 
-const getRenderedClassName = (tree, Component) => {
-  const rendered = ReactTestUtils.findRenderedComponentWithType(tree, Component);
+const getRenderedClassName = (tree, TargetComponent) => {
+  const rendered = ReactTestUtils.findRenderedComponentWithType(tree, TargetComponent);
   return ReactDOM.findDOMNode(rendered).getAttribute('class');
 };
 
@@ -55,26 +55,26 @@ describe('Tabs', function () {
     expect(tabContents[0].props.tabIndex).toEqual(1);
   });
 
-  describe('#render', function() {
-    it('does not use fixed by default', function() {
+  describe('#render', function () {
+    it('does not use fixed by default', function () {
       const tree = ReactTestUtils.renderIntoDocument(<Tabs theme={theme} />);
       const className = getRenderedClassName(tree, RawTabs);
       expect(className).toNotContain(theme.fixed);
     });
 
-    it('uses fixed when set', function() {
+    it('uses fixed when set', function () {
       const tree = ReactTestUtils.renderIntoDocument(<Tabs theme={theme} fixed />);
       const className = getRenderedClassName(tree, RawTabs);
       expect(className).toContain(theme.fixed);
     });
 
-    it('does not use inverse by default', function() {
+    it('does not use inverse by default', function () {
       const tree = ReactTestUtils.renderIntoDocument(<Tabs theme={theme} />);
       const className = getRenderedClassName(tree, RawTabs);
       expect(className).toNotContain(theme.inverse);
     });
 
-    it('uses inverse when set', function() {
+    it('uses inverse when set', function () {
       const tree = ReactTestUtils.renderIntoDocument(<Tabs theme={theme} inverse />);
       const className = getRenderedClassName(tree, RawTabs);
       expect(className).toContain(theme.inverse);
diff --git a/components/tabs/theme.scss b/components/tabs/theme.scss
index 173f8c147..9d9fda29d 100644
--- a/components/tabs/theme.scss
+++ b/components/tabs/theme.scss
@@ -84,4 +84,4 @@
   .pointer {
     background-color: $tab-inverse-pointer-color;
   }
-}
\ No newline at end of file
+}

From 9312522bacc9a3ca834f3d60de3a0c0f15d76783 Mon Sep 17 00:00:00 2001
From: Charlie Martin <charlie@appfigures.com>
Date: Mon, 15 Aug 2016 02:05:48 -0400
Subject: [PATCH 0756/1024] Remove unnecessary spread

`setState` does a shallow merge, so there is no need to spread the existing state here
---
 .../layout/main/modules/examples/checkbox_example_1.txt         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/app/components/layout/main/modules/examples/checkbox_example_1.txt b/docs/app/components/layout/main/modules/examples/checkbox_example_1.txt
index 83d44be27..8e22bcc53 100644
--- a/docs/app/components/layout/main/modules/examples/checkbox_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/checkbox_example_1.txt
@@ -5,7 +5,7 @@ class TestCheckbox extends React.Component {
   };
 
   handleChange = (field, value) => {
-    this.setState({...this.state, [field]: value});
+    this.setState({[field]: value});
   };
 
   render () {

From a61aa5cb8a6371cae36dbd885aba3b4847513244 Mon Sep 17 00:00:00 2001
From: Justin Schultz <jaschultz25@gmail.com>
Date: Mon, 15 Aug 2016 16:00:11 -0600
Subject: [PATCH 0757/1024] Fix #697 - Autocomplete KeyUp enter fix

---
 components/autocomplete/Autocomplete.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index 673daccff..0868766b4 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -124,7 +124,7 @@ const factory = (Chip, Input) => {
          }
          this.setState({active: target});
        }
-       this.select(target, event);
+       this.select(event, target);
      }
 
      if (event.which === 27) ReactDOM.findDOMNode(this).querySelector('input').blur();
@@ -225,10 +225,11 @@ const factory = (Chip, Input) => {
      return valueMap;
    }
 
-   select = (event) => {
+   select = (event, target) => {
      events.pauseEvent(event);
      const values = this.values(this.props.value);
-     this.handleChange([event.target.id, ...values.keys()], event);
+     const newValue = target === void 0 ? event.target.id : target;
+     this.handleChange([newValue, ...values.keys()], event);
    };
 
    unselect (key, event) {

From 49024c81f9e21a87c15c3d783b7cf065b7513f9b Mon Sep 17 00:00:00 2001
From: Kiko Beats <josefrancisco.verdu@gmail.com>
Date: Thu, 18 Aug 2016 18:03:17 +0200
Subject: [PATCH 0758/1024] Explicit deps

Reference: https://github.com/rvagg/npm-explicit-deps#-is-dangerous
---
 package.json | 114 +++++++++++++++++++++++++--------------------------
 1 file changed, 57 insertions(+), 57 deletions(-)

diff --git a/package.json b/package.json
index 15b9b61da..fe7469a1a 100644
--- a/package.json
+++ b/package.json
@@ -36,63 +36,63 @@
     "toolkit"
   ],
   "dependencies": {
-    "classnames": "^2.2.5",
-    "core-js": "^2.4.0",
-    "react-css-themr": "^1.2.0"
+    "classnames": "~2.2.5",
+    "core-js": "~2.4.0",
+    "react-css-themr": "~1.2.0"
   },
   "devDependencies": {
-    "autoprefixer": "^6.4.0",
-    "babel-cli": "^6.8.0",
-    "babel-core": "^6.13.2",
-    "babel-eslint": "^6.0.4",
-    "babel-loader": "^6.2.4",
-    "babel-plugin-react-transform": "^2.0.2",
-    "babel-polyfill": "^6.13.0",
-    "babel-preset-es2015": "^6.13.2",
-    "babel-preset-react": "^6.5.0",
-    "babel-preset-stage-0": "^6.5.0",
-    "bluebird": "^3.3.5",
-    "cpx": "^1.3.1",
-    "cross-env": "^2.0.0",
-    "css-loader": "^0.23.1",
-    "eslint": "^3.2.2",
-    "eslint-plugin-babel": "^3.2.0",
-    "eslint-plugin-react": "^6.0.0",
-    "expect": "^1.20.1",
-    "express": "^4.13.4",
-    "extract-text-webpack-plugin": "^1.0.1",
-    "glob": "^7.0.3",
-    "karma": "^1.1.2",
-    "karma-chrome-launcher": "^1.0.1",
-    "karma-cli": "^1.0.0",
-    "karma-mocha": "^1.0.1",
-    "karma-phantomjs-launcher": "^1.0.0",
-    "karma-webpack": "^1.7.0",
-    "mocha": "^3.0.1",
-    "node-sass": "^3.7.0",
-    "normalize.css": "^4.1.1",
-    "phantomjs": "^2.1.7",
+    "autoprefixer": "~6.4.0",
+    "babel-cli": "~6.8.0",
+    "babel-core": "~6.13.2",
+    "babel-eslint": "~6.0.4",
+    "babel-loader": "~6.2.4",
+    "babel-plugin-react-transform": "~2.0.2",
+    "babel-polyfill": "~6.13.0",
+    "babel-preset-es2015": "~6.13.2",
+    "babel-preset-react": "~6.5.0",
+    "babel-preset-stage-0": "~6.5.0",
+    "bluebird": "~3.3.5",
+    "cpx": "~1.3.1",
+    "cross-env": "~2.0.0",
+    "css-loader": "~0.23.1",
+    "eslint": "~3.2.2",
+    "eslint-plugin-babel": "~3.2.0",
+    "eslint-plugin-react": "~6.0.0",
+    "expect": "~1.20.1",
+    "express": "~4.13.4",
+    "extract-text-webpack-plugin": "~1.0.1",
+    "glob": "~7.0.3",
+    "karma": "~1.1.2",
+    "karma-chrome-launcher": "~1.0.1",
+    "karma-cli": "~1.0.0",
+    "karma-mocha": "~1.0.1",
+    "karma-phantomjs-launcher": "~1.0.0",
+    "karma-webpack": "~1.7.0",
+    "mocha": "~3.0.1",
+    "node-sass": "~3.7.0",
+    "normalize.css": "~4.2.0",
+    "phantomjs": "~2.1.7",
     "phantomjs-polyfill": "0.0.2",
-    "phantomjs-prebuilt": "^2.1.7",
-    "postcss-loader": "^0.9.1",
-    "react": "^15.2.1",
-    "react-addons-update": "^15.2.1",
-    "react-addons-test-utils": "^15.2.1",
-    "react-addons-css-transition-group": "^15.2.1",
-    "react-docgen": "^2.8.2",
-    "react-dom": "^15.2.1",
-    "react-transform-catch-errors": "^1.0.2",
-    "react-transform-hmr": "^1.0.4",
-    "redbox-react": "^1.2.4",
-    "rimraf": "^2.5.2",
+    "phantomjs-prebuilt": "~2.1.7",
+    "postcss-loader": "~0.9.1",
+    "react": "~15.3.0",
+    "react-addons-update": "~15.3.0",
+    "react-addons-test-utils": "~15.3.0",
+    "react-addons-css-transition-group": "~15.3.0",
+    "react-docgen": "~2.8.2",
+    "react-dom": "~15.3.0",
+    "react-transform-catch-errors": "~1.0.2",
+    "react-transform-hmr": "~1.0.4",
+    "redbox-react": "~1.2.4",
+    "rimraf": "~2.5.2",
     "sass-lint": "1.8.2",
-    "sass-loader": "^4.0.0",
+    "sass-loader": "~4.0.0",
     "sinon": "git://github.com/sinonjs/sinon.git#b672042043517b9f84e14ed0fb8265126168778a",
-    "style-loader": "^0.13.1",
+    "style-loader": "~0.13.1",
     "toolbox-loader": "0.0.3",
-    "webpack": "^1.13.0",
-    "webpack-dev-middleware": "^1.6.1",
-    "webpack-hot-middleware": "^2.10.0"
+    "webpack": "~1.13.0",
+    "webpack-dev-middleware": "~1.6.1",
+    "webpack-hot-middleware": "~2.10.0"
   },
   "scripts": {
     "babel": "babel ./components --out-dir ./lib",
@@ -113,11 +113,11 @@
   },
   "license": "MIT",
   "peerDependencies": {
-    "classnames": "^2.2.0",
-    "normalize.css": "^4.0.0",
-    "react": "^0.14 || ^15.2.0",
-    "react-addons-css-transition-group": "^0.14.0 || ^15.2.0",
-    "react-addons-update": "^0.14 || ^15.2.0",
-    "react-dom": "^0.14.0 || ^15.2.0"
+    "classnames": "~2.2.0",
+    "normalize.css": "~4.2.0",
+    "react": "~0.14 || ~15.3.0",
+    "react-addons-css-transition-group": "~0.14.0 || ~15.3.0",
+    "react-addons-update": "~0.14 || ~15.3.0",
+    "react-dom": "~0.14.0 || ~15.3.0"
   }
 }

From 006559e7cc01b8ac30d1ef85beed780cb8f59053 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 21 Aug 2016 18:44:04 +0200
Subject: [PATCH 0759/1024] Fix ripple

---
 components/ripple/Ripple.js | 12 ++++--------
 components/utils/utils.js   |  8 ++++++++
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/components/ripple/Ripple.js b/components/ripple/Ripple.js
index bc17b4081..b7a6b7572 100644
--- a/components/ripple/Ripple.js
+++ b/components/ripple/Ripple.js
@@ -6,6 +6,7 @@ import { themr } from 'react-css-themr';
 import { RIPPLE } from '../identifiers.js';
 import events from '../utils/events';
 import prefixer from '../utils/prefixer';
+import utils from '../utils/utils';
 
 const defaults = {
   centered: false,
@@ -84,12 +85,7 @@ const rippleFactory = (options = {}) => {
           if (e.propertyName === 'opacity') {
             if (self.props.onRippleEnded) self.props.onRippleEnded(e);
             events.removeEventListenerOnTransitionEnded(self.refs[rippleKey], onOpacityEnd);
-            self.setState({ ripples: update(self.state.ripples, {
-              [rippleKey]: { $apply: ripplesState => {
-                delete ripplesState[rippleKey];
-                return ripplesState;
-              } }
-            }) });
+            self.setState({ ripples: utils.removeObjectKey(rippleKey, self.state.ripples) });
           }
         });
       }
@@ -160,7 +156,7 @@ const rippleFactory = (options = {}) => {
        */
       getNextKey () {
         this.currentCount = this.currentCount ? this.currentCount + 1 : 1;
-        return this.currentCount.toString();
+        return `ripple${this.currentCount}`;
       }
 
       /**
@@ -170,7 +166,7 @@ const rippleFactory = (options = {}) => {
        * @return {String} The last generated ripple key.
        */
       getLastKey () {
-        return this.currentCount.toString();
+        return `ripple${this.currentCount}`;
       }
 
       /**
diff --git a/components/utils/utils.js b/components/utils/utils.js
index bf805bc8c..bc024a07d 100644
--- a/components/utils/utils.js
+++ b/components/utils/utils.js
@@ -56,5 +56,13 @@ export default {
       return value ? 'on' : '';
     }
     return value;
+  },
+
+  removeObjectKey (key, object) {
+    const newObject = {};
+    Object.keys(object)
+      .filter(k => k !== key)
+      .forEach(k => { newObject[k] = object[k]; });
+    return newObject;
   }
 };

From b6537005c6b8cfa4dd4d990157f699ddd70d755d Mon Sep 17 00:00:00 2001
From: David Cho-Lerat <david.cho-lerat@hl2.com>
Date: Mon, 22 Aug 2016 15:17:04 +0200
Subject: [PATCH 0760/1024] Update README.md

Typos :
"which be achieved" => "which can be achieved"
"we have are" => "we are"
---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 743871d43..bfb6c699f 100644
--- a/README.md
+++ b/README.md
@@ -110,7 +110,7 @@ $color-primary: $palette-blue-500;
 $color-primary-dark: $palette-blue-700;
 ```
 
-This file should be prepended to each stylesheet compilation which be achieved in multiple ways.
+This file should be prepended to each stylesheet compilation which can be achieved in multiple ways.
 
 ### Using SASS Loader
 
@@ -122,7 +122,7 @@ sassLoader: {
 }
 ```
 
-In this case we have are prepending the theme import to each SASS compilation so the primary color will be changed in every single stylesheet. If you are not using webpack maybe your loader still has a similar option, otherwise don't worry, there are solutions.
+In this case we are prepending the theme import to each SASS compilation so the primary color will be changed in every single stylesheet. If you are not using webpack maybe your loader still has a similar option, otherwise don't worry, there are solutions.
 
 ### Using SASS imports and props
 

From b528ab119124e13138711f79a75a2d6639c042b6 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 22 Aug 2016 22:32:15 +0200
Subject: [PATCH 0761/1024] Fix #713

---
 components/tabs/Tabs.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/components/tabs/Tabs.js b/components/tabs/Tabs.js
index cdedb23bb..faeee03fb 100644
--- a/components/tabs/Tabs.js
+++ b/components/tabs/Tabs.js
@@ -109,7 +109,10 @@ const factory = (Tab, TabContent) => {
           id: idx,
           key: idx,
           active: this.props.index === idx,
-          onClick: this.handleHeaderClick
+          onClick: event => {
+            this.handleHeaderClick(event);
+            item.props.onClick && item.props.onClick(event);
+          }
         });
       });
     }

From abf91d3d24395a633a6d7dd5cae453d077daf017 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 22 Aug 2016 22:39:44 +0200
Subject: [PATCH 0762/1024] Fix #711

---
 components/autocomplete/Autocomplete.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index 0868766b4..9f42f9471 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -164,7 +164,8 @@ const factory = (Chip, Input) => {
 
    suggestions () {
      let suggest = new Map();
-     const query = (this.state.query || (!this.props.multiple ? this.props.value : '')).toLowerCase().trim() || '';
+     const rawQuery = this.state.query || this.props.multiple ? '' : this.props.value;
+     const query = (rawQuery || '').toLowerCase().trim();
      const values = this.values();
      const source = this.source();
 

From 29b04f2b149a66e405426ff83b65fbdc8d9a1ae1 Mon Sep 17 00:00:00 2001
From: Ben Fox-Moore <ben.foxmoore@gmail.com>
Date: Tue, 23 Aug 2016 02:05:32 +0200
Subject: [PATCH 0763/1024] Replace react-addons-update with
 immutability-helper as Facebook are deprecating their addon

---
 components/ripple/Ripple.js | 2 +-
 package.json                | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/ripple/Ripple.js b/components/ripple/Ripple.js
index b7a6b7572..e919e18fb 100644
--- a/components/ripple/Ripple.js
+++ b/components/ripple/Ripple.js
@@ -1,7 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import classnames from 'classnames';
-import update from 'react-addons-update';
+import update from 'immutability-helper';
 import { themr } from 'react-css-themr';
 import { RIPPLE } from '../identifiers.js';
 import events from '../utils/events';
diff --git a/package.json b/package.json
index 56aaca459..93a8f8197 100644
--- a/package.json
+++ b/package.json
@@ -62,6 +62,7 @@
     "express": "~4.13.4",
     "extract-text-webpack-plugin": "~1.0.1",
     "glob": "~7.0.3",
+    "immutability-helper": "~2.0.0",
     "karma": "~1.1.2",
     "karma-chrome-launcher": "~1.0.1",
     "karma-cli": "~1.0.0",
@@ -76,9 +77,8 @@
     "phantomjs-prebuilt": "~2.1.7",
     "postcss-loader": "~0.9.1",
     "react": "~15.3.0",
-    "react-addons-update": "~15.3.0",
-    "react-addons-test-utils": "~15.3.0",
     "react-addons-css-transition-group": "~15.3.0",
+    "react-addons-test-utils": "~15.3.0",
     "react-docgen": "~2.8.2",
     "react-dom": "~15.3.0",
     "react-transform-catch-errors": "~1.0.2",
@@ -114,10 +114,10 @@
   "license": "MIT",
   "peerDependencies": {
     "classnames": "~2.2.0",
+    "immutability-helper": "~2.0.0",
     "normalize.css": "~4.2.0",
     "react": "~0.14 || ~15.3.0",
     "react-addons-css-transition-group": "~0.14.0 || ~15.3.0",
-    "react-addons-update": "~0.14 || ~15.3.0",
     "react-dom": "~0.14.0 || ~15.3.0"
   }
 }

From b220c70729e2bb1609155bc768b2777b1a5cf4e3 Mon Sep 17 00:00:00 2001
From: Ron Derksen <rderksen@wehkamp.nl>
Date: Tue, 23 Aug 2016 14:47:35 +0200
Subject: [PATCH 0764/1024] Theme is now passed on to tab subcomponents

---
 components/tabs/Tabs.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/tabs/Tabs.js b/components/tabs/Tabs.js
index 5acd1d334..4a53a165c 100644
--- a/components/tabs/Tabs.js
+++ b/components/tabs/Tabs.js
@@ -81,6 +81,7 @@ const factory = (Tab, TabContent) => {
       return headers.map((item, idx) => {
         return React.cloneElement(item, {
           key: idx,
+          theme: this.props.theme,
           active: this.props.index === idx,
           onClick: this.handleHeaderClick.bind(this, idx, item)
         });
@@ -95,6 +96,7 @@ const factory = (Tab, TabContent) => {
       if (contents && contents[activeIdx]) {
         return React.cloneElement(contents[activeIdx], {
           key: activeIdx,
+          theme: this.props.theme,
           active: true,
           tabIndex: activeIdx
         });

From 6f7a5433b6cbf2fa93dd985dd86de7470ec6cb9b Mon Sep 17 00:00:00 2001
From: Antony Lau <laucheukhim@gmail.com>
Date: Tue, 23 Aug 2016 23:06:45 +0800
Subject: [PATCH 0765/1024] Add onTouchStart to ListItem

---
 components/list/ListItem.js | 4 ++--
 lib/list/ListItem.js        | 5 +++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/components/list/ListItem.js b/components/list/ListItem.js
index 58583bc94..e9a068256 100644
--- a/components/list/ListItem.js
+++ b/components/list/ListItem.js
@@ -62,11 +62,11 @@ const factory = (ripple, ListItemLayout, ListItemContent) => {
     }
 
     render () {
-      const {className, onMouseDown, to, onClick, ripple: hasRipple, theme, ...other} = this.props; //eslint-disable-line no-unused-vars
+      const {className, onMouseDown, onTouchStart, to, onClick, ripple: hasRipple, theme, ...other} = this.props; //eslint-disable-line no-unused-vars
       const children = this.groupChildren();
       const content = <ListItemLayout theme={theme} {...children} {...other}/>;
       return (
-        <li className={`${theme.listItem} ${className}`} onClick={this.handleClick} onMouseDown={onMouseDown}>
+        <li className={`${theme.listItem} ${className}`} onClick={this.handleClick} onMouseDown={onMouseDown} onTouchStart={onTouchStart}>
           {to ? <a href={this.props.to}>{content}</a> : content}
           {children.ignored}
         </li>
diff --git a/lib/list/ListItem.js b/lib/list/ListItem.js
index 4a65e22b3..193dec03f 100644
--- a/lib/list/ListItem.js
+++ b/lib/list/ListItem.js
@@ -102,19 +102,20 @@ var factory = function factory(ripple, ListItemLayout, ListItemContent) {
         var _props = this.props;
         var className = _props.className;
         var onMouseDown = _props.onMouseDown;
+        var onTouchStart = _props.onTouchStart;
         var to = _props.to;
         var onClick = _props.onClick;
         var hasRipple = _props.ripple;
         var theme = _props.theme;
 
-        var other = _objectWithoutProperties(_props, ['className', 'onMouseDown', 'to', 'onClick', 'ripple', 'theme']); //eslint-disable-line no-unused-vars
+        var other = _objectWithoutProperties(_props, ['className', 'onMouseDown', 'onTouchStart', 'to', 'onClick', 'ripple', 'theme']); //eslint-disable-line no-unused-vars
 
 
         var children = this.groupChildren();
         var content = _react2.default.createElement(ListItemLayout, _extends({ theme: theme }, children, other));
         return _react2.default.createElement(
           'li',
-          { className: theme.listItem + ' ' + className, onClick: this.handleClick, onMouseDown: onMouseDown },
+          { className: theme.listItem + ' ' + className, onClick: this.handleClick, onMouseDown: onMouseDown, onTouchStart: onTouchStart },
           to ? _react2.default.createElement(
             'a',
             { href: this.props.to },

From 7468d3193505beaeb7c0b1afc18813d12befd414 Mon Sep 17 00:00:00 2001
From: Kiko Beats <josefrancisco.verdu@gmail.com>
Date: Wed, 24 Aug 2016 09:51:21 +0200
Subject: [PATCH 0766/1024] Add bumped changelog support

---
 .bumpedrc    |   13 +-
 CHANGELOG.md | 1584 ++++++++++++++++++++++++++++++++++++++++++++++++--
 package.json |    5 +-
 3 files changed, 1565 insertions(+), 37 deletions(-)

diff --git a/.bumpedrc b/.bumpedrc
index 895c21575..a3983285e 100644
--- a/.bumpedrc
+++ b/.bumpedrc
@@ -4,6 +4,7 @@ files: [
 
 plugins:
   prerelease:
+
     'Linting config files':
       plugin: 'bumped-finepack'
 
@@ -15,14 +16,22 @@ plugins:
       plugin: 'bumped-terminal'
       command: 'npm run prepublish'
 
+    'Generating CHANGELOG file':
+      plugin: 'bumped-changelog'
+
   postrelease:
+
     'Commiting new version':
       plugin: 'bumped-terminal'
-      command: 'git add package.json && git commit package.json -m "$newVersion release" && git push origin master'
+      command: 'git add CHANGELOG.md package.json && git commit package.json -m "Release $newVersion"'
+
+    'Detecting problem before publish':
+      plugin: 'bumped-terminal'
+      command: 'git-dirty'
 
     'Publishing tag at Github':
       plugin: 'bumped-terminal'
-      command: 'git tag $newVersion && git push origin $newVersion'
+      command: 'git tag $newVersion && git push && git push --tags'
 
     'Publishing at NPM':
       plugin: 'bumped-terminal'
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 451204539..743b17061 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,44 +1,1562 @@
-# Change Log
-All notable changes to this project will be documented in this file.
-This project adheres to [Semantic Versioning](http://semver.org/).
+<a name="1.1.2"></a>
+## 1.1.2 (2016-08-11)
 
-## [Unreleased]
-### Changed
-- Tabs now only render the contents of the currently active tab.
+* 1.1.2 release ([0dcec60](https://github.com/react-toolbox/react-toolbox/commit/0dcec60))
+* Added missing modules ([afc2124](https://github.com/react-toolbox/react-toolbox/commit/afc2124))
+* Added Touch events to the base props ([30f1623](https://github.com/react-toolbox/react-toolbox/commit/30f1623))
+* fix for target missing id ([b557561](https://github.com/react-toolbox/react-toolbox/commit/b557561))
+* Fixed #696 - Button Icon/Inner Alignment ([5c09c5c](https://github.com/react-toolbox/react-toolbox/commit/5c09c5c)), closes [#696](https://github.com/react-toolbox/react-toolbox/issues/696)
+* Fixes for typescript definitions, typos etc. ([213411b](https://github.com/react-toolbox/react-toolbox/commit/213411b))
+* Remove prop duplicates ([c016565](https://github.com/react-toolbox/react-toolbox/commit/c016565))
 
-## [0.15.0] - 2016-03-24
 
-Click on the link above for this release's commit history.
 
-## [0.14.2] - 2016-03-07
+<a name="1.1.1"></a>
+## 1.1.1 (2016-08-08)
 
-Click on the link above for this release's commit history.
+* 1.1.1 release ([56426b9](https://github.com/react-toolbox/react-toolbox/commit/56426b9))
+* Fix linter for tooltip theme ([f09a9d7](https://github.com/react-toolbox/react-toolbox/commit/f09a9d7))
+* Move addon-update to peerDependencies ([fac66cb](https://github.com/react-toolbox/react-toolbox/commit/fac66cb))
 
-## [0.14.1] - 2016-01-26
 
-Click on the link above for this release's commit history.
 
-## [0.14.0] - 2015-12-20
-### Added
-- A `Ripple` HOC that can be used with your custom components.
+<a name="1.1.0"></a>
+# 1.1.0 (2016-08-07)
+
+* 1.1.0 release ([c671290](https://github.com/react-toolbox/react-toolbox/commit/c671290))
+* Add an active property to control pickers from outside ([39694e5](https://github.com/react-toolbox/react-toolbox/commit/39694e5))
+* Add create option to autocomplete ([3461a1f](https://github.com/react-toolbox/react-toolbox/commit/3461a1f))
+* Add required polyfills for IE11. ([ef6a979](https://github.com/react-toolbox/react-toolbox/commit/ef6a979))
+* Added custom sized circular ProgressBar to spec ([bdd2ce3](https://github.com/react-toolbox/react-toolbox/commit/bdd2ce3))
+* Added support for locale on DatePicker dialog component ([01ae580](https://github.com/react-toolbox/react-toolbox/commit/01ae580))
+* Added viewBox attr to svg element of circular ProgressBar to allow custom sizing ([a2c8f08](https://github.com/react-toolbox/react-toolbox/commit/a2c8f08))
+* Avoid !important in progress spec ([f56eb82](https://github.com/react-toolbox/react-toolbox/commit/f56eb82))
+* Better tooltips ([fcc7902](https://github.com/react-toolbox/react-toolbox/commit/fcc7902))
+* Beware of the multiple onRippleEnded ([c01c025](https://github.com/react-toolbox/react-toolbox/commit/c01c025))
+* Bugfix for IE scrollX/scrollY ([955acf0](https://github.com/react-toolbox/react-toolbox/commit/955acf0))
+* Change method name to match lib convention ([ea3917e](https://github.com/react-toolbox/react-toolbox/commit/ea3917e))
+* Change name from create to allowCreate in Autocomplete and fix linter warnings ([4093439](https://github.com/react-toolbox/react-toolbox/commit/4093439))
+* Don't render Ripple if it's not being animated ([032840e](https://github.com/react-toolbox/react-toolbox/commit/032840e))
+* Fix #547 ([f2dbfb5](https://github.com/react-toolbox/react-toolbox/commit/f2dbfb5)), closes [#547](https://github.com/react-toolbox/react-toolbox/issues/547)
+* Fix linter errors ([fae42a8](https://github.com/react-toolbox/react-toolbox/commit/fae42a8))
+* Fix linter errors and refactor ([e597bc5](https://github.com/react-toolbox/react-toolbox/commit/e597bc5))
+* Fix linter warnings ([77b0a4a](https://github.com/react-toolbox/react-toolbox/commit/77b0a4a))
+* Fix remove animation event function ([2bd6539](https://github.com/react-toolbox/react-toolbox/commit/2bd6539))
+* FIXED aslant errors and warnings to pass Travis check ([157c29d](https://github.com/react-toolbox/react-toolbox/commit/157c29d))
+* Fixed Autocomplete such that it does not error when provided with a value prop that does not exist i ([59b01e6](https://github.com/react-toolbox/react-toolbox/commit/59b01e6))
+* Fixes #586 ([041e00c](https://github.com/react-toolbox/react-toolbox/commit/041e00c)), closes [#586](https://github.com/react-toolbox/react-toolbox/issues/586)
+* Fixes #629 ([e2c5471](https://github.com/react-toolbox/react-toolbox/commit/e2c5471)), closes [#629](https://github.com/react-toolbox/react-toolbox/issues/629)
+* Fixes #663 ([023a732](https://github.com/react-toolbox/react-toolbox/commit/023a732)), closes [#663](https://github.com/react-toolbox/react-toolbox/issues/663)
+* Fixes #671 ([991da71](https://github.com/react-toolbox/react-toolbox/commit/991da71)), closes [#671](https://github.com/react-toolbox/react-toolbox/issues/671)
+* Fixes #674 ([fd138f9](https://github.com/react-toolbox/react-toolbox/commit/fd138f9)), closes [#674](https://github.com/react-toolbox/react-toolbox/issues/674)
+* Fixes #678 ([730d4c1](https://github.com/react-toolbox/react-toolbox/commit/730d4c1)), closes [#678](https://github.com/react-toolbox/react-toolbox/issues/678)
+* Fixes Autocomplete error when provided value prop that is not in source option while preserving valu ([0bce911](https://github.com/react-toolbox/react-toolbox/commit/0bce911))
+* Fixes linting errors ([01711e6](https://github.com/react-toolbox/react-toolbox/commit/01711e6))
+* Latest build ([146ffee](https://github.com/react-toolbox/react-toolbox/commit/146ffee))
+* Latest build ([0c53de9](https://github.com/react-toolbox/react-toolbox/commit/0c53de9))
+* Latest build ([b58254d](https://github.com/react-toolbox/react-toolbox/commit/b58254d))
+* Latest build ([50c5aeb](https://github.com/react-toolbox/react-toolbox/commit/50c5aeb))
+* Latest build ([57bb663](https://github.com/react-toolbox/react-toolbox/commit/57bb663))
+* Minor fixes in docs ([25fd5e2](https://github.com/react-toolbox/react-toolbox/commit/25fd5e2))
+* pass theme from layout to children ([491a85c](https://github.com/react-toolbox/react-toolbox/commit/491a85c))
+* Refactor ripple adding multiple option ([71fcd3f](https://github.com/react-toolbox/react-toolbox/commit/71fcd3f))
+* Remove some bind usage in render functions and undo passing down Dropdown theme to Input ([a825208](https://github.com/react-toolbox/react-toolbox/commit/a825208))
+* Update dependencies ([f250f6f](https://github.com/react-toolbox/react-toolbox/commit/f250f6f))
+* Update docs dependencies ([714883c](https://github.com/react-toolbox/react-toolbox/commit/714883c))
+* Update react-css-themr dependency ([692b0be](https://github.com/react-toolbox/react-toolbox/commit/692b0be))
+* feat(dist): add newest build ([62f8b22](https://github.com/react-toolbox/react-toolbox/commit/62f8b22))
+* feat(input): implement maxLength in js rather then using the maxlength prop of the input field ([a8dbad1](https://github.com/react-toolbox/react-toolbox/commit/a8dbad1)), closes [#685](https://github.com/react-toolbox/react-toolbox/issues/685)
+* feat(input): prevent insertion of characters if maxLength is reached ([70823af](https://github.com/react-toolbox/react-toolbox/commit/70823af))
+* feat(input): set the default row amount for multiline inputs to 1 ([056cd6d](https://github.com/react-toolbox/react-toolbox/commit/056cd6d))
+* doc(input): add note about handleChange implementation ([f29e570](https://github.com/react-toolbox/react-toolbox/commit/f29e570))
+* fix(input): always recalculate size ([d1fcc14](https://github.com/react-toolbox/react-toolbox/commit/d1fcc14))
+* fix(input): don't remove the maxLenght attribute from inputs ([6f03fb5](https://github.com/react-toolbox/react-toolbox/commit/6f03fb5))
+* fix(input): only remove resize event listerner if it exists ([75487fb](https://github.com/react-toolbox/react-toolbox/commit/75487fb))
+* fix(multiline input): autoresize after initial render too ([1809d67](https://github.com/react-toolbox/react-toolbox/commit/1809d67))
+* refactor(input): move autoresize to didUpdate ([8559c18](https://github.com/react-toolbox/react-toolbox/commit/8559c18))
+* docs(input): fix multiline example and add maxLength to it ([9a4f553](https://github.com/react-toolbox/react-toolbox/commit/9a4f553))
+
+
+
+<a name="1.0.3"></a>
+## 1.0.3 (2016-07-25)
+
+* 1.0.3 release ([43ea2ef](https://github.com/react-toolbox/react-toolbox/commit/43ea2ef))
+* A lot of JSDoc comments added, even more left ([621e798](https://github.com/react-toolbox/react-toolbox/commit/621e798))
+* Added tests. ([4f67a93](https://github.com/react-toolbox/react-toolbox/commit/4f67a93))
+* Additional fix for raw AppBar component import ([32aedbd](https://github.com/react-toolbox/react-toolbox/commit/32aedbd))
+* All props are now commented ([ae6109c](https://github.com/react-toolbox/react-toolbox/commit/ae6109c))
+* Bugfix calculating Menu position ([e077f8a](https://github.com/react-toolbox/react-toolbox/commit/e077f8a))
+* Date picker now takes max/min date into account on mount/props change. ([e9487e1](https://github.com/react-toolbox/react-toolbox/commit/e9487e1))
+* Document CardTitle's cardTitle theme ([460a378](https://github.com/react-toolbox/react-toolbox/commit/460a378))
+* Document the label theme for the input component ([68ee32f](https://github.com/react-toolbox/react-toolbox/commit/68ee32f))
+* Ensure theme gets passed down to TimePicker child components ([a6f7d64](https://github.com/react-toolbox/react-toolbox/commit/a6f7d64))
+* fix autocomplete activating on react>=15.1 if no direction ([f3b460e](https://github.com/react-toolbox/react-toolbox/commit/f3b460e))
+* Fix multiselectable and unselect rows isues on Table component ([5ccd6da](https://github.com/react-toolbox/react-toolbox/commit/5ccd6da))
+* Fix typo in font-size calculation in mixins ([1639690](https://github.com/react-toolbox/react-toolbox/commit/1639690))
+* Fixes #542 ([c9ac90f](https://github.com/react-toolbox/react-toolbox/commit/c9ac90f)), closes [#542](https://github.com/react-toolbox/react-toolbox/issues/542)
+* Fixes #627 ([2d17b65](https://github.com/react-toolbox/react-toolbox/commit/2d17b65)), closes [#627](https://github.com/react-toolbox/react-toolbox/issues/627)
+* Latest build ([af9e889](https://github.com/react-toolbox/react-toolbox/commit/af9e889))
+* Made general mixins properties depend on $unit value ([fb29425](https://github.com/react-toolbox/react-toolbox/commit/fb29425))
+* Merge with dev ([b226fcd](https://github.com/react-toolbox/react-toolbox/commit/b226fcd))
+* Moved modules to separate files. ([10b69b5](https://github.com/react-toolbox/react-toolbox/commit/10b69b5))
+* Only add Input auto-resize handler to multiline inputs ([9cc56e1](https://github.com/react-toolbox/react-toolbox/commit/9cc56e1))
+* Pass theme down to list item child components for correct classnames ([5a9fec8](https://github.com/react-toolbox/react-toolbox/commit/5a9fec8))
+* Small fixes ([3b70677](https://github.com/react-toolbox/react-toolbox/commit/3b70677))
+* Typings for the project ([661911b](https://github.com/react-toolbox/react-toolbox/commit/661911b))
+* Update install.md ([42feb7f](https://github.com/react-toolbox/react-toolbox/commit/42feb7f))
+* Update README.md ([3a57270](https://github.com/react-toolbox/react-toolbox/commit/3a57270))
+
+
+
+<a name="1.0.2"></a>
+## 1.0.2 (2016-07-10)
+
+* 1.0.2 release ([672429f](https://github.com/react-toolbox/react-toolbox/commit/672429f))
+* Add autoresize to multiline inputs ([5b97b95](https://github.com/react-toolbox/react-toolbox/commit/5b97b95)), closes [#278](https://github.com/react-toolbox/react-toolbox/issues/278)
+* Add passing unknown props and checking of keypress ([d01a576](https://github.com/react-toolbox/react-toolbox/commit/d01a576))
+* better support in typescript: ([69368ae](https://github.com/react-toolbox/react-toolbox/commit/69368ae))
+* Fix Number.isNaN TypeError on IE ([4ea305c](https://github.com/react-toolbox/react-toolbox/commit/4ea305c))
+* Fixes #585 ([49658a3](https://github.com/react-toolbox/react-toolbox/commit/49658a3)), closes [#585](https://github.com/react-toolbox/react-toolbox/issues/585)
+* Fixes #616 ([0513cb7](https://github.com/react-toolbox/react-toolbox/commit/0513cb7)), closes [#616](https://github.com/react-toolbox/react-toolbox/issues/616)
+* Fixes #624 ([2a7e340](https://github.com/react-toolbox/react-toolbox/commit/2a7e340)), closes [#624](https://github.com/react-toolbox/react-toolbox/issues/624)
+* Forward theme prop from Tabs to TabContent ([8c20848](https://github.com/react-toolbox/react-toolbox/commit/8c20848))
+* get rid of declaration duplicates in components/ ([febf8b5](https://github.com/react-toolbox/react-toolbox/commit/febf8b5))
+* Latest build ([f43dac6](https://github.com/react-toolbox/react-toolbox/commit/f43dac6))
+* Latest build ([b55d2b1](https://github.com/react-toolbox/react-toolbox/commit/b55d2b1))
+* missing MENU for some reason in identifiers ([e359805](https://github.com/react-toolbox/react-toolbox/commit/e359805))
+* Pass the theme from ListItem to ListItemLayout ([3b4387f](https://github.com/react-toolbox/react-toolbox/commit/3b4387f)), closes [#580](https://github.com/react-toolbox/react-toolbox/issues/580)
+* Reset overflow when unmounting ([a11fe92](https://github.com/react-toolbox/react-toolbox/commit/a11fe92))
+* Restyle a ternary ([8d65961](https://github.com/react-toolbox/react-toolbox/commit/8d65961))
+* Update datepicker_example_1.txt ([e782b8f](https://github.com/react-toolbox/react-toolbox/commit/e782b8f))
+* Update pickers.js ([49fa53a](https://github.com/react-toolbox/react-toolbox/commit/49fa53a))
+* Update to react 15.2.0 ([3e29844](https://github.com/react-toolbox/react-toolbox/commit/3e29844))
+* chore(dropdown): set value to empty string to prevent uncontrolled errors ([ad52adb](https://github.com/react-toolbox/react-toolbox/commit/ad52adb))
+
+
+
+<a name="1.0.1"></a>
+## 1.0.1 (2016-06-19)
+
+* [Fixes #550] Add PropType checking to Menu's position and update docs ([eec457b](https://github.com/react-toolbox/react-toolbox/commit/eec457b)), closes [#550](https://github.com/react-toolbox/react-toolbox/issues/550)
+* #575: Use classname 'material-icons' if children is a string ([1d725dc](https://github.com/react-toolbox/react-toolbox/commit/1d725dc))
+* 🤖 ([79472ee](https://github.com/react-toolbox/react-toolbox/commit/79472ee))
+* 1.0.1 release ([b44b168](https://github.com/react-toolbox/react-toolbox/commit/b44b168))
+* add 'suggestionMatch' prop to Autocomplete component to determine how suggestions are matched ([afe5bf1](https://github.com/react-toolbox/react-toolbox/commit/afe5bf1))
+* Added ability to export the DatePickerDialog seperately from the DatePicker ([2d5f519](https://github.com/react-toolbox/react-toolbox/commit/2d5f519))
+* Added autoselect first option on enter ([7bffe8a](https://github.com/react-toolbox/react-toolbox/commit/7bffe8a))
+* change .overlay to .backdrop ([7134c64](https://github.com/react-toolbox/react-toolbox/commit/7134c64))
+* clear the timeout on componentWillUnmount ([647dbfb](https://github.com/react-toolbox/react-toolbox/commit/647dbfb))
+* feat(datepicker,timepicker): add support for `name` prop ([c850245](https://github.com/react-toolbox/react-toolbox/commit/c850245))
+* Fix #536 ([5b76a7f](https://github.com/react-toolbox/react-toolbox/commit/5b76a7f)), closes [#536](https://github.com/react-toolbox/react-toolbox/issues/536)
+* Fix #541 ([c19c3e7](https://github.com/react-toolbox/react-toolbox/commit/c19c3e7)), closes [#541](https://github.com/react-toolbox/react-toolbox/issues/541)
+* Fix #542 ([6cd4202](https://github.com/react-toolbox/react-toolbox/commit/6cd4202)), closes [#542](https://github.com/react-toolbox/react-toolbox/issues/542)
+* Fix a few incorrect exports in typings and build with updated Babel ([68926f8](https://github.com/react-toolbox/react-toolbox/commit/68926f8))
+* Fix cpx command to work correctly when coping sass and ts files ([688f6bc](https://github.com/react-toolbox/react-toolbox/commit/688f6bc))
+* Fix MenuItem onclick called without event ([53f4a5e](https://github.com/react-toolbox/react-toolbox/commit/53f4a5e))
+* Fixed bug with add a month to a date when current day is largest than last day of next month ([0d01405](https://github.com/react-toolbox/react-toolbox/commit/0d01405))
+* Latest build 🤖 ([fccf6f5](https://github.com/react-toolbox/react-toolbox/commit/fccf6f5))
+* Made property for both topbottom and leftright padding of day on calendar picker. Fixes IE11 bug ([cb138fc](https://github.com/react-toolbox/react-toolbox/commit/cb138fc))
+* Replace react-toolbox.d.ts with index.d.ts ([235d914](https://github.com/react-toolbox/react-toolbox/commit/235d914))
+* Update libs with new external .d.ts files ([9856ca0](https://github.com/react-toolbox/react-toolbox/commit/9856ca0))
+* Update TypeScript definition section of README.md ([deb3630](https://github.com/react-toolbox/react-toolbox/commit/deb3630))
+* Update typings to external modules (no more 'declare module ...') to get the definitions working aut ([f8c1a3f](https://github.com/react-toolbox/react-toolbox/commit/f8c1a3f))
+* chore(eslint): fix propTypes order ([d06dd78](https://github.com/react-toolbox/react-toolbox/commit/d06dd78))
+* feat(dropdown): add support for name prop ([ec94e5a](https://github.com/react-toolbox/react-toolbox/commit/ec94e5a))
+
+
+
+<a name="1.0.0"></a>
+# 1.0.0 (2016-06-04)
+
+* (feat) set corejs as a dependency ([7ad9594](https://github.com/react-toolbox/react-toolbox/commit/7ad9594)), closes [#382](https://github.com/react-toolbox/react-toolbox/issues/382)
+* 💵 ([dbba425](https://github.com/react-toolbox/react-toolbox/commit/dbba425))
+* 😥 ([fc6b702](https://github.com/react-toolbox/react-toolbox/commit/fc6b702))
+* 1.0.0 release ([bd7b846](https://github.com/react-toolbox/react-toolbox/commit/bd7b846))
+* Add <Chip> export ([d68340e](https://github.com/react-toolbox/react-toolbox/commit/d68340e))
+* Add base class for buttons ([c937673](https://github.com/react-toolbox/react-toolbox/commit/c937673))
+* Add Clock and ClockHours to TimePicker migration ([a2cc04c](https://github.com/react-toolbox/react-toolbox/commit/a2cc04c))
+* Add icon prop to DatePicker ([77c74bf](https://github.com/react-toolbox/react-toolbox/commit/77c74bf))
+* Add lib folder ([7b80621](https://github.com/react-toolbox/react-toolbox/commit/7b80621))
+* Add missing context theme doc for Button ([6d37fe7](https://github.com/react-toolbox/react-toolbox/commit/6d37fe7))
+* Add missing semicolons ([fe390fa](https://github.com/react-toolbox/react-toolbox/commit/fe390fa))
+* Add note about theming in chip readme ([d8a5dc3](https://github.com/react-toolbox/react-toolbox/commit/d8a5dc3))
+* Add onRippleEnded. Fixes #289 ([c612fdf](https://github.com/react-toolbox/react-toolbox/commit/c612fdf)), closes [#289](https://github.com/react-toolbox/react-toolbox/issues/289)
+* Add seperate autocomplete with showSuggestionsWhenValueIsSet to spec ([8f2579e](https://github.com/react-toolbox/react-toolbox/commit/8f2579e))
+* Add showSuggestionsWhenValueIsSet prop, used to control autocomplete filter behaviour when multiple= ([5dfee66](https://github.com/react-toolbox/react-toolbox/commit/5dfee66))
+* Add specific imports for FontIcon ([fbdceed](https://github.com/react-toolbox/react-toolbox/commit/fbdceed))
+* Add themed key for avatar and appbar in readme ([cd83d83](https://github.com/react-toolbox/react-toolbox/commit/cd83d83))
+* Add themr to AppBar ([c7f8d83](https://github.com/react-toolbox/react-toolbox/commit/c7f8d83))
+* added ability to select only one row at the time ([29aece7](https://github.com/react-toolbox/react-toolbox/commit/29aece7))
+* Added media-queries for the max-height of he app-bar on mobile devices (56dp and 48dp) ([3c4c1e6](https://github.com/react-toolbox/react-toolbox/commit/3c4c1e6))
+* All components moved to themr 😱 ([a9e8304](https://github.com/react-toolbox/react-toolbox/commit/a9e8304))
+* Autocomplete element size ([12e572f](https://github.com/react-toolbox/react-toolbox/commit/12e572f))
+* Autoinject Autocomplete, Avatar, Chip and Input ([85e248c](https://github.com/react-toolbox/react-toolbox/commit/85e248c))
+* Autoinject Checkbox theme ([d48e243](https://github.com/react-toolbox/react-toolbox/commit/d48e243))
+* Autoinject Drawer theme ([3827ed3](https://github.com/react-toolbox/react-toolbox/commit/3827ed3))
+* Autoinject Navigation theme ([df88b1d](https://github.com/react-toolbox/react-toolbox/commit/df88b1d))
+* Autoinject style for AppBar ([f10748e](https://github.com/react-toolbox/react-toolbox/commit/f10748e))
+* Autoinject styles for Lists ([592024f](https://github.com/react-toolbox/react-toolbox/commit/592024f))
+* Autoinject styles for ProgressBar ([fdb3644](https://github.com/react-toolbox/react-toolbox/commit/fdb3644))
+* Autoinject theme for Card ([05c6dce](https://github.com/react-toolbox/react-toolbox/commit/05c6dce))
+* Autoinject theme for Dialog, DatePicker and Overlay ([4ff92ac](https://github.com/react-toolbox/react-toolbox/commit/4ff92ac))
+* Autoinject theme for dropdown ([7a241e9](https://github.com/react-toolbox/react-toolbox/commit/7a241e9))
+* Autoinject theme for Layout ([e911a9f](https://github.com/react-toolbox/react-toolbox/commit/e911a9f))
+* Autoinject theme for Link ([731153d](https://github.com/react-toolbox/react-toolbox/commit/731153d))
+* Autoinject theme for Switch, Table and Snackbar ([863c821](https://github.com/react-toolbox/react-toolbox/commit/863c821))
+* Autoinject theme for Tabs ([6afb914](https://github.com/react-toolbox/react-toolbox/commit/6afb914))
+* Autoinject theme for Tooltip ([975fb32](https://github.com/react-toolbox/react-toolbox/commit/975fb32))
+* Autoinject theme to Menu component ([f88ddde](https://github.com/react-toolbox/react-toolbox/commit/f88ddde))
+* Autoinject theme to Radio component ([e1b2b6b](https://github.com/react-toolbox/react-toolbox/commit/e1b2b6b))
+* Autoinject theme to Slider ([d810c81](https://github.com/react-toolbox/react-toolbox/commit/d810c81))
+* Autoinjects for Button and IconButton ([6048bb7](https://github.com/react-toolbox/react-toolbox/commit/6048bb7))
+* Avoid null values when parsing input ([310d683](https://github.com/react-toolbox/react-toolbox/commit/310d683))
+* Avoid uncontrolled inputs ([85978a5](https://github.com/react-toolbox/react-toolbox/commit/85978a5))
+* Better PropType syntax and delete required className api ([73c115f](https://github.com/react-toolbox/react-toolbox/commit/73c115f))
+* Better react imports for lists ([95ea35f](https://github.com/react-toolbox/react-toolbox/commit/95ea35f))
+* Better readme for buttons ([d59f95c](https://github.com/react-toolbox/react-toolbox/commit/d59f95c))
+* Better readmes for autocomplete avatar chip and input ([d04c181](https://github.com/react-toolbox/react-toolbox/commit/d04c181))
+* Change autocomplete filter behaviour when multiple=false ([a4810d8](https://github.com/react-toolbox/react-toolbox/commit/a4810d8))
+* Cleanup timers when Menu component unmounts to prevent calls on undefined objects ([8182348](https://github.com/react-toolbox/react-toolbox/commit/8182348))
+* Clear autocomplete query input when pressing backspace and showing all suggestions ([c706184](https://github.com/react-toolbox/react-toolbox/commit/c706184))
+* Destructuring React for some components ([1386a15](https://github.com/react-toolbox/react-toolbox/commit/1386a15))
+* Exclude JSX navigation div if there are no actions ([aaa1cfa](https://github.com/react-toolbox/react-toolbox/commit/aaa1cfa))
+* Finish autoinjects ([c356a2b](https://github.com/react-toolbox/react-toolbox/commit/c356a2b))
+* Fix #454: Chip component unable to display nicely on small screen ([60b8e55](https://github.com/react-toolbox/react-toolbox/commit/60b8e55)), closes [#454](https://github.com/react-toolbox/react-toolbox/issues/454)
+* Fix DatePickerDialog to correctly display the previously selected date ([39ad60a](https://github.com/react-toolbox/react-toolbox/commit/39ad60a))
+* Fix linter errors ([33ff491](https://github.com/react-toolbox/react-toolbox/commit/33ff491))
+* fix receive props for Autocomplete component ([19566dd](https://github.com/react-toolbox/react-toolbox/commit/19566dd))
+* Fix tests ([e24152c](https://github.com/react-toolbox/react-toolbox/commit/e24152c))
+* Fix the value of month in datepicker example ([d839515](https://github.com/react-toolbox/react-toolbox/commit/d839515))
+* Fix typo ([c1093b2](https://github.com/react-toolbox/react-toolbox/commit/c1093b2))
+* Fix typo in AppBar readme ([34952ce](https://github.com/react-toolbox/react-toolbox/commit/34952ce))
+* Fix typos in Layout ([78d7c92](https://github.com/react-toolbox/react-toolbox/commit/78d7c92))
+* Fixed sass-lint to 1.5.1 to avoid linting errors ([41189e2](https://github.com/react-toolbox/react-toolbox/commit/41189e2))
+* Fixed. wrong check empty actions ([4d3e2e0](https://github.com/react-toolbox/react-toolbox/commit/4d3e2e0))
+* Fixes in Layout ([75cd934](https://github.com/react-toolbox/react-toolbox/commit/75cd934))
+* Fixes typo in ListItemLayout ([a4de34e](https://github.com/react-toolbox/react-toolbox/commit/a4de34e))
+* Full extension imports in animations ([d5834e0](https://github.com/react-toolbox/react-toolbox/commit/d5834e0))
+* Fullname imports for util files ([767d16b](https://github.com/react-toolbox/react-toolbox/commit/767d16b))
+* Hotfix for incorrect ternary statement in DatePicker ([d7b820a](https://github.com/react-toolbox/react-toolbox/commit/d7b820a))
+* Inject dependencies for Form component ([27962e8](https://github.com/react-toolbox/react-toolbox/commit/27962e8))
+* Latest build ([fbca206](https://github.com/react-toolbox/react-toolbox/commit/fbca206))
+* Latest build ([a1f02d2](https://github.com/react-toolbox/react-toolbox/commit/a1f02d2))
+* Make tests pass ([6329c5d](https://github.com/react-toolbox/react-toolbox/commit/6329c5d))
+* Media queries for dialogs to set wider widths for smaller screens ([ec84e6c](https://github.com/react-toolbox/react-toolbox/commit/ec84e6c))
+* Migrate autocomplete ([92b170f](https://github.com/react-toolbox/react-toolbox/commit/92b170f))
+* Migrate Avatar to themr ([1974336](https://github.com/react-toolbox/react-toolbox/commit/1974336))
+* Migrate button to themr ([29f89fe](https://github.com/react-toolbox/react-toolbox/commit/29f89fe))
+* Migrate Card + refactoring + add defineTheme 🎨 ([bc26c3f](https://github.com/react-toolbox/react-toolbox/commit/bc26c3f))
+* Migrate checkbox to themr ([40be146](https://github.com/react-toolbox/react-toolbox/commit/40be146))
+* Migrate Chip to themr ([b2be1cb](https://github.com/react-toolbox/react-toolbox/commit/b2be1cb))
+* Migrate DatePicker to themr ([709f4b1](https://github.com/react-toolbox/react-toolbox/commit/709f4b1))
+* Migrate dialog to themr ([2fb2de8](https://github.com/react-toolbox/react-toolbox/commit/2fb2de8))
+* Migrate docs to new theme syntax ([5056a9d](https://github.com/react-toolbox/react-toolbox/commit/5056a9d))
+* Migrate Drawer and Overlay to themr ([f6d2d3f](https://github.com/react-toolbox/react-toolbox/commit/f6d2d3f))
+* Migrate Dropdown to themr ([38e2690](https://github.com/react-toolbox/react-toolbox/commit/38e2690))
+* Migrate IconMenu to themr ([5f626e2](https://github.com/react-toolbox/react-toolbox/commit/5f626e2))
+* Migrate input to themr ([243644c](https://github.com/react-toolbox/react-toolbox/commit/243644c))
+* Migrate Layout to themr ([58f8d61](https://github.com/react-toolbox/react-toolbox/commit/58f8d61))
+* Migrate Link to themr ([36869cb](https://github.com/react-toolbox/react-toolbox/commit/36869cb))
+* Migrate List to themr ([c39caf6](https://github.com/react-toolbox/react-toolbox/commit/c39caf6))
+* Migrate Menu to themr ([140cc2c](https://github.com/react-toolbox/react-toolbox/commit/140cc2c))
+* Migrate MenuDivider to themr ([54dca2d](https://github.com/react-toolbox/react-toolbox/commit/54dca2d))
+* Migrate MenuItem to themr ([e20bae5](https://github.com/react-toolbox/react-toolbox/commit/e20bae5))
+* Migrate Navigation to themr ([e5ef5e2](https://github.com/react-toolbox/react-toolbox/commit/e5ef5e2))
+* Migrate ProgressBar to themr ([38cb1b0](https://github.com/react-toolbox/react-toolbox/commit/38cb1b0))
+* Migrate Radio to themr ([306e397](https://github.com/react-toolbox/react-toolbox/commit/306e397))
+* Migrate Ripple to themr ([f4e74e9](https://github.com/react-toolbox/react-toolbox/commit/f4e74e9))
+* Migrate snackbar to themr ([8705c57](https://github.com/react-toolbox/react-toolbox/commit/8705c57))
+* Migrate switch to themr ([d451cf0](https://github.com/react-toolbox/react-toolbox/commit/d451cf0))
+* Migrate Table component to themr ([b75e757](https://github.com/react-toolbox/react-toolbox/commit/b75e757))
+* Migrate the Slider to themr ([de89f9a](https://github.com/react-toolbox/react-toolbox/commit/de89f9a))
+* Migrate TimePicker to themr ([6f2d17d](https://github.com/react-toolbox/react-toolbox/commit/6f2d17d))
+* mixins is already imported in base, hence removed the redundant import | Galeel ([85048a3](https://github.com/react-toolbox/react-toolbox/commit/85048a3))
+* Modify Button's display to be inline-flex ([63f760b](https://github.com/react-toolbox/react-toolbox/commit/63f760b))
+* Modify ripple theme interface to avoid collisions ([4e28d4a](https://github.com/react-toolbox/react-toolbox/commit/4e28d4a))
+* Move body locker from Portal to Overlay ([8a7ddc7](https://github.com/react-toolbox/react-toolbox/commit/8a7ddc7))
+* Move some mixins ([96599d3](https://github.com/react-toolbox/react-toolbox/commit/96599d3))
+* Move tabs to themr ([d6bc5f5](https://github.com/react-toolbox/react-toolbox/commit/d6bc5f5))
+* New README ([27a4420](https://github.com/react-toolbox/react-toolbox/commit/27a4420))
+* Plain SASS imports 🎨 ([419f16f](https://github.com/react-toolbox/react-toolbox/commit/419f16f))
+* Reduce z-index for spec page ([91bd684](https://github.com/react-toolbox/react-toolbox/commit/91bd684))
+* Refactor autocomplete suggestions method to make it more readable ([cb4b736](https://github.com/react-toolbox/react-toolbox/commit/cb4b736))
+* Remove conditional import since SASS does not support them. ([facf4a3](https://github.com/react-toolbox/react-toolbox/commit/facf4a3))
+* Remove defineTheme ([6ba69be](https://github.com/react-toolbox/react-toolbox/commit/6ba69be))
+* Remove linter warning ([4f85f4e](https://github.com/react-toolbox/react-toolbox/commit/4f85f4e))
+* Remove no longer supported method for dropdown ([38827df](https://github.com/react-toolbox/react-toolbox/commit/38827df))
+* Remove style dependency in cards ([9593e03](https://github.com/react-toolbox/react-toolbox/commit/9593e03))
+* Remove style for form ([fee4a19](https://github.com/react-toolbox/react-toolbox/commit/fee4a19))
+* Simpler FontIcon component ([3ba5c11](https://github.com/react-toolbox/react-toolbox/commit/3ba5c11))
+* Small typos in README ([cea8111](https://github.com/react-toolbox/react-toolbox/commit/cea8111))
+* Update DatePicker to handle being passed a value of an empty stirng ([62e5322](https://github.com/react-toolbox/react-toolbox/commit/62e5322))
+* Update dependencies ([6a0d861](https://github.com/react-toolbox/react-toolbox/commit/6a0d861))
+* Update dependencies ([b84a07f](https://github.com/react-toolbox/react-toolbox/commit/b84a07f))
+* Update docs ([115e839](https://github.com/react-toolbox/react-toolbox/commit/115e839))
+* Update global index ([802bd64](https://github.com/react-toolbox/react-toolbox/commit/802bd64))
+* Update node version ([42125fc](https://github.com/react-toolbox/react-toolbox/commit/42125fc))
+* Update readme for menu ([f7ae5a8](https://github.com/react-toolbox/react-toolbox/commit/f7ae5a8))
+* Update Typescript definition to 0.16.2, added <Chip>, <Overlay>, and ActivableRendererFactory defini ([b8feb9a](https://github.com/react-toolbox/react-toolbox/commit/b8feb9a))
+* Use alternative to scrollX where not available (IE) ([f39dfb4](https://github.com/react-toolbox/react-toolbox/commit/f39dfb4))
+* Y for X ([f017610](https://github.com/react-toolbox/react-toolbox/commit/f017610))
+* Bugfix: delete style in form ([22819ca](https://github.com/react-toolbox/react-toolbox/commit/22819ca))
+* Bugfix: Set empty string in time picker if no time is given ([d2cf4e3](https://github.com/react-toolbox/react-toolbox/commit/d2cf4e3))
+
+
+
+<a name="0.16.2"></a>
+## 0.16.2 (2016-04-10)
+
+* 0.16.2 release ([473d1fa](https://github.com/react-toolbox/react-toolbox/commit/473d1fa))
+* Indentify Avatar by constructur in Chip ([6665753](https://github.com/react-toolbox/react-toolbox/commit/6665753))
+
+
+
+<a name="0.16.1"></a>
+## 0.16.1 (2016-04-10)
+
+* 0.16.1 release ([eb483dd](https://github.com/react-toolbox/react-toolbox/commit/eb483dd))
+* Add Chip to component index ([0cb2205](https://github.com/react-toolbox/react-toolbox/commit/0cb2205))
+* Include Chip in docs ([84130d4](https://github.com/react-toolbox/react-toolbox/commit/84130d4))
+* Bugfix: use hash history ([cb80113](https://github.com/react-toolbox/react-toolbox/commit/cb80113))
+
+
+
+<a name="0.16.0"></a>
+# 0.16.0 (2016-04-10)
+
+* 0.16.0 release ([8e57104](https://github.com/react-toolbox/react-toolbox/commit/8e57104))
+* Adapt pickers to calculate position with scroll ([0d1265e](https://github.com/react-toolbox/react-toolbox/commit/0d1265e))
+* Add inputClassName prop to DatePicker and TimePicker ([47fba11](https://github.com/react-toolbox/react-toolbox/commit/47fba11))
+* Fix #407 ([48e5c48](https://github.com/react-toolbox/react-toolbox/commit/48e5c48)), closes [#407](https://github.com/react-toolbox/react-toolbox/issues/407)
+* Fix #425 ([ee4cc54](https://github.com/react-toolbox/react-toolbox/commit/ee4cc54)), closes [#425](https://github.com/react-toolbox/react-toolbox/issues/425)
+* Fix #442 ([7d73fb4](https://github.com/react-toolbox/react-toolbox/commit/7d73fb4)), closes [#442](https://github.com/react-toolbox/react-toolbox/issues/442)
+* Fix checking if key exists in Autocomplete ([e45b0cb](https://github.com/react-toolbox/react-toolbox/commit/e45b0cb))
+* Fix linter error for layouts ([b0437cd](https://github.com/react-toolbox/react-toolbox/commit/b0437cd))
+* Get rid of jsx extensions 🔮 ([0cb8d8b](https://github.com/react-toolbox/react-toolbox/commit/0cb8d8b))
+* Lint spec files ([2039a12](https://github.com/react-toolbox/react-toolbox/commit/2039a12))
+* Now we are Audiense 💎 ([410cd6b](https://github.com/react-toolbox/react-toolbox/commit/410cd6b))
+* Reduce list unneeded markup ([f6c8304](https://github.com/react-toolbox/react-toolbox/commit/f6c8304))
+* Refactor Overlay into two components and make activable components render only when needed ([958cbb9](https://github.com/react-toolbox/react-toolbox/commit/958cbb9))
+* Remove App from components index ([7e2d4de](https://github.com/react-toolbox/react-toolbox/commit/7e2d4de))
+* Remove unneeded App ([baf4414](https://github.com/react-toolbox/react-toolbox/commit/baf4414))
+* Update dependencies, linter and rules ([516a0a3](https://github.com/react-toolbox/react-toolbox/commit/516a0a3))
+* Update documentation dependencies ([a6e162e](https://github.com/react-toolbox/react-toolbox/commit/a6e162e))
+* Update linting ([c3ef6bd](https://github.com/react-toolbox/react-toolbox/commit/c3ef6bd))
+* updates package.json to work with react 15 ([3812686](https://github.com/react-toolbox/react-toolbox/commit/3812686))
+* Use sass lint ([beeb6ab](https://github.com/react-toolbox/react-toolbox/commit/beeb6ab))
+* Bugfix: style for svg icons in button ([3a20676](https://github.com/react-toolbox/react-toolbox/commit/3a20676))
+
+
+
+<a name="0.15.1"></a>
+## 0.15.1 (2016-04-07)
+
+* 0.14.2 release ([3ee2e94](https://github.com/react-toolbox/react-toolbox/commit/3ee2e94))
+* 0.15.0 release ([e3a805b](https://github.com/react-toolbox/react-toolbox/commit/e3a805b))
+* 0.15.1 release ([436d4b4](https://github.com/react-toolbox/react-toolbox/commit/436d4b4))
+* Add allowBlank to Dropdown ([542b58a](https://github.com/react-toolbox/react-toolbox/commit/542b58a))
+* Add chip component ([821c3e1](https://github.com/react-toolbox/react-toolbox/commit/821c3e1))
+* Add onDeleteClick property ([08675d6](https://github.com/react-toolbox/react-toolbox/commit/08675d6))
+* Add prop to autocomplete to place labels below or above input ([d41a77c](https://github.com/react-toolbox/react-toolbox/commit/d41a77c))
+* Added !default to all config values as per #424 ([37f8f4c](https://github.com/react-toolbox/react-toolbox/commit/37f8f4c))
+* Added onMouseUp and onMouseLeave props to Icon Button to make it similar to Button Component. ([7b7b042](https://github.com/react-toolbox/react-toolbox/commit/7b7b042))
+* Aligned Menu Readme properties ([324cce3](https://github.com/react-toolbox/react-toolbox/commit/324cce3))
+* Change snackbar to fix issue where lingering timeouts would effect new activations ([6470b44](https://github.com/react-toolbox/react-toolbox/commit/6470b44))
+* Changed Icon Prop type to String or Element instead of Any. Also fixed an inappropriate example for  ([ccf88af](https://github.com/react-toolbox/react-toolbox/commit/ccf88af))
+* Chip - Replace fonticon with inline SVG, tweak size and position ([703ed27](https://github.com/react-toolbox/react-toolbox/commit/703ed27))
+* Chip - tweak stroke width ([cbeef76](https://github.com/react-toolbox/react-toolbox/commit/cbeef76))
+* Clean up chip styling, remove hover and pressed styles ([f96d00e](https://github.com/react-toolbox/react-toolbox/commit/f96d00e))
+* Cleaned up Card documentation. ([6cf753b](https://github.com/react-toolbox/react-toolbox/commit/6cf753b))
+* Don't show actions container in dialog if no actions exist ([ed1f3c6](https://github.com/react-toolbox/react-toolbox/commit/ed1f3c6))
+* Fix style changes from TravisCI build ([d5eebd9](https://github.com/react-toolbox/react-toolbox/commit/d5eebd9))
+* Fixed Dropdown readme example and updated properties. ([fe9312a](https://github.com/react-toolbox/react-toolbox/commit/fe9312a))
+* Fixed grammar mistake on component page. Updated Sidebar's CSS ([233bb67](https://github.com/react-toolbox/react-toolbox/commit/233bb67))
+* Fixed Object Single Selection Bug ([9d2fe8f](https://github.com/react-toolbox/react-toolbox/commit/9d2fe8f))
+* Fixed spacing for list readme ([1a9fe24](https://github.com/react-toolbox/react-toolbox/commit/1a9fe24))
+* Fixed Spacing Issues for items in last commit. ([a841408](https://github.com/react-toolbox/react-toolbox/commit/a841408))
+* Fixed spacing on drawer readme ([3683358](https://github.com/react-toolbox/react-toolbox/commit/3683358))
+* have Dialog.jsx import from './style' and not './style.scss' ([b26e1f6](https://github.com/react-toolbox/react-toolbox/commit/b26e1f6))
+* keepachangelog.com :) ([f7ef77b](https://github.com/react-toolbox/react-toolbox/commit/f7ef77b))
+* only render content of current tab + linting, docs, test ([b6b51a4](https://github.com/react-toolbox/react-toolbox/commit/b6b51a4))
+* Proper property sorting ([5db11d3](https://github.com/react-toolbox/react-toolbox/commit/5db11d3))
+* Revert input error color ([27e59df](https://github.com/react-toolbox/react-toolbox/commit/27e59df))
+* Sorted Appbar's properties. Updated Autocomplete's doc and example ([8494668](https://github.com/react-toolbox/react-toolbox/commit/8494668))
+* Sorted Date Picker Properties ([4917bf7](https://github.com/react-toolbox/react-toolbox/commit/4917bf7))
+* Update autocomplete component to use chips ([620b494](https://github.com/react-toolbox/react-toolbox/commit/620b494))
+* Update chip children prop type, readme ([1a4d363](https://github.com/react-toolbox/react-toolbox/commit/1a4d363))
+* Updated Avatar readme and example ([d3fcaef](https://github.com/react-toolbox/react-toolbox/commit/d3fcaef))
+* Updated Babel Standalone to latest version ([16fac7a](https://github.com/react-toolbox/react-toolbox/commit/16fac7a))
+* Updated Button and Checkbox doc ([b5f2123](https://github.com/react-toolbox/react-toolbox/commit/b5f2123))
+* Updated Dialog Example and sorted properties. ([6b81440](https://github.com/react-toolbox/react-toolbox/commit/6b81440))
+* Updated docs for slider, snacker, switch, table, tabs and time picker ([3649ab1](https://github.com/react-toolbox/react-toolbox/commit/3649ab1))
+* Updated Font Icon Examples. Also updated value type ([21dc421](https://github.com/react-toolbox/react-toolbox/commit/21dc421))
+* Updated Input doc and Example ([94280ce](https://github.com/react-toolbox/react-toolbox/commit/94280ce))
+* Updated Link readme and example to include active element. Also changed icon type from string to any ([588ff39](https://github.com/react-toolbox/react-toolbox/commit/588ff39))
+* Updated List Documentation and example to include list divider ([e7a2622](https://github.com/react-toolbox/react-toolbox/commit/e7a2622))
+* Updated Menu readme to include new properties and changed import statement to match other components ([2f11387](https://github.com/react-toolbox/react-toolbox/commit/2f11387))
+* Updated Navigation Readme. Aligned properties and added quotes around horizontal and vertical for ty ([c57b751](https://github.com/react-toolbox/react-toolbox/commit/c57b751))
+* Updated Progress, Radio and Tooltip Readme. Aligned properties for ripple. ([86e1dca](https://github.com/react-toolbox/react-toolbox/commit/86e1dca))
+* Use children instead of special label and avatar props in Chip component ([dff8a07](https://github.com/react-toolbox/react-toolbox/commit/dff8a07))
+* docs(media): keep navigation for wider screens ([125cac1](https://github.com/react-toolbox/react-toolbox/commit/125cac1))
+
+
+
+<a name="0.15.0"></a>
+# 0.15.0 (2016-03-24)
+
+* (feat) renamed to onEscKeyDown and fixed linting errors ([db752d2](https://github.com/react-toolbox/react-toolbox/commit/db752d2))
+* [Table] enhancements ([c5b19c2](https://github.com/react-toolbox/react-toolbox/commit/c5b19c2))
+* 😕 ([b45c8f7](https://github.com/react-toolbox/react-toolbox/commit/b45c8f7))
+* 0.14.1 release ([d8a58bd](https://github.com/react-toolbox/react-toolbox/commit/d8a58bd))
+* 0.14.2 release ([f3ffd85](https://github.com/react-toolbox/react-toolbox/commit/f3ffd85))
+* 0.15.0 release ([b182c09](https://github.com/react-toolbox/react-toolbox/commit/b182c09))
+* add activeClassName to tab component ([52682c5](https://github.com/react-toolbox/react-toolbox/commit/52682c5))
+* Add default statements to color variables ([acde309](https://github.com/react-toolbox/react-toolbox/commit/acde309))
+* Added a few more events to Dialog's overlay ([542f54d](https://github.com/react-toolbox/react-toolbox/commit/542f54d))
+* added data-react-toolbox attribute to FontIcon ([a82595b](https://github.com/react-toolbox/react-toolbox/commit/a82595b))
+* Added hint attribute to input field. ([d2202e1](https://github.com/react-toolbox/react-toolbox/commit/d2202e1))
+* allow app-bar height override  ([7ad9189](https://github.com/react-toolbox/react-toolbox/commit/7ad9189))
+* Allow disabling animated bottom border on tabs ([a2543d4](https://github.com/react-toolbox/react-toolbox/commit/a2543d4))
+* Allowing array of pairs key-value as input for autocomplete ([96e868b](https://github.com/react-toolbox/react-toolbox/commit/96e868b))
+* allows to close dialog (and all overlays) when pressing esc ([04c7b04](https://github.com/react-toolbox/react-toolbox/commit/04c7b04))
+* allows to format the date displayed on datepickers input ([16ed926](https://github.com/react-toolbox/react-toolbox/commit/16ed926))
+* Change error PropType to node on Input ([0227b0d](https://github.com/react-toolbox/react-toolbox/commit/0227b0d))
+* Changed HTML element from label to span ([4dcb2d0](https://github.com/react-toolbox/react-toolbox/commit/4dcb2d0))
+* Changed the set state key to countries instead of value ([f81056f](https://github.com/react-toolbox/react-toolbox/commit/f81056f))
+* cleanup listeners on document before unmount ([68b23d2](https://github.com/react-toolbox/react-toolbox/commit/68b23d2))
+* Clock SSR fix ([6173e9b](https://github.com/react-toolbox/react-toolbox/commit/6173e9b))
+* Correctly handle zero as dropdown value ([c812d4c](https://github.com/react-toolbox/react-toolbox/commit/c812d4c))
+* Created required behaviour for input ([cc32e5a](https://github.com/react-toolbox/react-toolbox/commit/cc32e5a))
+* DatePicker autoOk prop ([240864f](https://github.com/react-toolbox/react-toolbox/commit/240864f))
+* dropdown accepts string or number as value ([29edd20](https://github.com/react-toolbox/react-toolbox/commit/29edd20))
+* Dropdown doesn't close on click outside fix ([bc6ae1f](https://github.com/react-toolbox/react-toolbox/commit/bc6ae1f))
+* Dropdown doesn't close on click outside fix ([c1f2b83](https://github.com/react-toolbox/react-toolbox/commit/c1f2b83))
+* Fix #248 ([e263499](https://github.com/react-toolbox/react-toolbox/commit/e263499)), closes [#248](https://github.com/react-toolbox/react-toolbox/issues/248)
+* Fix #290 ([f1a098d](https://github.com/react-toolbox/react-toolbox/commit/f1a098d)), closes [#290](https://github.com/react-toolbox/react-toolbox/issues/290)
+* Fix #302 ([a64d5e4](https://github.com/react-toolbox/react-toolbox/commit/a64d5e4)), closes [#302](https://github.com/react-toolbox/react-toolbox/issues/302)
+* Fix #316 ([852c3ea](https://github.com/react-toolbox/react-toolbox/commit/852c3ea)), closes [#316](https://github.com/react-toolbox/react-toolbox/issues/316)
+* Fix #356 ([993afbc](https://github.com/react-toolbox/react-toolbox/commit/993afbc)), closes [#356](https://github.com/react-toolbox/react-toolbox/issues/356)
+* Fix #357 ([22b46d9](https://github.com/react-toolbox/react-toolbox/commit/22b46d9)), closes [#357](https://github.com/react-toolbox/react-toolbox/issues/357)
+* Fix #361 cancel timer when tabs component unmounts ([380da26](https://github.com/react-toolbox/react-toolbox/commit/380da26)), closes [#361](https://github.com/react-toolbox/react-toolbox/issues/361)
+* Fix label for number inputs with 0 as value ([5029b0d](https://github.com/react-toolbox/react-toolbox/commit/5029b0d))
+* fix lint issue by ammending rule ([e6c5be2](https://github.com/react-toolbox/react-toolbox/commit/e6c5be2))
+* fixed linting errors on utils/time.js ([756a3a9](https://github.com/react-toolbox/react-toolbox/commit/756a3a9))
+* Fixes #304 ([ddeb44f](https://github.com/react-toolbox/react-toolbox/commit/ddeb44f)), closes [#304](https://github.com/react-toolbox/react-toolbox/issues/304)
+* fixes #369 ([0b16eef](https://github.com/react-toolbox/react-toolbox/commit/0b16eef)), closes [#369](https://github.com/react-toolbox/react-toolbox/issues/369)
+* fixes #389 ([1aa67d5](https://github.com/react-toolbox/react-toolbox/commit/1aa67d5)), closes [#389](https://github.com/react-toolbox/react-toolbox/issues/389)
+* Fixes small typos in AutoComplete documentation ([01e2eab](https://github.com/react-toolbox/react-toolbox/commit/01e2eab))
+* Forgot to add required attribute to actual input element ([19249d8](https://github.com/react-toolbox/react-toolbox/commit/19249d8))
+* if list item action defined onClick we stop click and mouse down ([14cbf9c](https://github.com/react-toolbox/react-toolbox/commit/14cbf9c))
+* Introduce close() method ([9dcd1d6](https://github.com/react-toolbox/react-toolbox/commit/9dcd1d6))
+* list item can be customized by passing in children commponents ([a2745c8](https://github.com/react-toolbox/react-toolbox/commit/a2745c8))
+* Make drawer compliant with material design guidelines. ([6e586a9](https://github.com/react-toolbox/react-toolbox/commit/6e586a9)), closes [#283](https://github.com/react-toolbox/react-toolbox/issues/283)
+* Modified z-index to include default ([953c209](https://github.com/react-toolbox/react-toolbox/commit/953c209))
+* More beauty in the dialog spec ([4fba76e](https://github.com/react-toolbox/react-toolbox/commit/4fba76e))
+* nextState in componentWillUpdate of Menu.js fix ([7adfc59](https://github.com/react-toolbox/react-toolbox/commit/7adfc59))
+* nextState in componentWillUpdate of Menu.js fix ([c2283c0](https://github.com/react-toolbox/react-toolbox/commit/c2283c0))
+* pass through props in Ripple ([0deee32](https://github.com/react-toolbox/react-toolbox/commit/0deee32))
+* removed commented out code ([32ff655](https://github.com/react-toolbox/react-toolbox/commit/32ff655))
+* Removed Error styling when input field is in focus ([c2374ad](https://github.com/react-toolbox/react-toolbox/commit/c2374ad))
+* renderInput() method never used ([ef0fe11](https://github.com/react-toolbox/react-toolbox/commit/ef0fe11))
+* renderInput() method never used ([f4541ee](https://github.com/react-toolbox/react-toolbox/commit/f4541ee))
+* Renders Selected Item when multiple=false ([bef1adf](https://github.com/react-toolbox/react-toolbox/commit/bef1adf))
+* replace data-role with data-react-toolbox ([43bfd3f](https://github.com/react-toolbox/react-toolbox/commit/43bfd3f))
+* Set background to transparent by default ([dce92d3](https://github.com/react-toolbox/react-toolbox/commit/dce92d3))
+* Some minor typo fixes for the README ([191201e](https://github.com/react-toolbox/react-toolbox/commit/191201e))
+* Support `0` value as being numeric ([c2c0ac7](https://github.com/react-toolbox/react-toolbox/commit/c2c0ac7))
+* this is correct ([1d5970f](https://github.com/react-toolbox/react-toolbox/commit/1d5970f))
+* type -> getType as `type` seems to be a keyword in node 5.1 ([7b2347a](https://github.com/react-toolbox/react-toolbox/commit/7b2347a))
+* Typos and grammar corrections for install document ([f77a806](https://github.com/react-toolbox/react-toolbox/commit/f77a806))
+* update Card.jsx ([cacc7d9](https://github.com/react-toolbox/react-toolbox/commit/cacc7d9))
+* Update Dialog's documentation. ([3a3dea6](https://github.com/react-toolbox/react-toolbox/commit/3a3dea6))
+* update List.jsx ([b898d7f](https://github.com/react-toolbox/react-toolbox/commit/b898d7f))
+* update Menu.jsx ([542528d](https://github.com/react-toolbox/react-toolbox/commit/542528d))
+* update RadioButton.jsx ([dba62cf](https://github.com/react-toolbox/react-toolbox/commit/dba62cf))
+* update RadioGroup.jsx ([692ed24](https://github.com/react-toolbox/react-toolbox/commit/692ed24))
+* update readme for tabs ([1cda333](https://github.com/react-toolbox/react-toolbox/commit/1cda333))
+* update Switch.jsx ([413ddb7](https://github.com/react-toolbox/react-toolbox/commit/413ddb7))
+* update Tab.jsx ([52f324d](https://github.com/react-toolbox/react-toolbox/commit/52f324d))
+* update Tabs.jsx ([99b4fca](https://github.com/react-toolbox/react-toolbox/commit/99b4fca))
+* Update to node 4.3.0 ([a609753](https://github.com/react-toolbox/react-toolbox/commit/a609753))
+* Update TS definition file to work properly with TypeScript >= 1.8, README blurb ([ac6834f](https://github.com/react-toolbox/react-toolbox/commit/ac6834f))
+* updated list item spec with button ([ccd4bbb](https://github.com/react-toolbox/react-toolbox/commit/ccd4bbb))
+* Use consistent data attributes ([c0e0b56](https://github.com/react-toolbox/react-toolbox/commit/c0e0b56))
+* Use falsy when cloning menuitems to check if element should be treated ([1075816](https://github.com/react-toolbox/react-toolbox/commit/1075816))
+* When the font-size (or $unit) is small, there's no difference between selected and unselected item ([a78ec39](https://github.com/react-toolbox/react-toolbox/commit/a78ec39))
+* Workaround race condition between menu item layout and container size assessment. ([b2538d8](https://github.com/react-toolbox/react-toolbox/commit/b2538d8))
+* feat(ListItem): add className prop support ([6670e79](https://github.com/react-toolbox/react-toolbox/commit/6670e79))
+
+
+
+<a name="0.14.1"></a>
+## 0.14.1 (2016-01-26)
+
+* 0.14.1 release ([b736a5f](https://github.com/react-toolbox/react-toolbox/commit/b736a5f))
+* Add babel standalone for the playground live editor ([0037210](https://github.com/react-toolbox/react-toolbox/commit/0037210))
+* Add missing semicolons ([6eb5838](https://github.com/react-toolbox/react-toolbox/commit/6eb5838))
+* Add TypeScript definition file and typings entry to package.json, as well as a blurb in README.md ([d7b6c6b](https://github.com/react-toolbox/react-toolbox/commit/d7b6c6b))
+* Allow Link to render Tooltips via children prop ([9da2378](https://github.com/react-toolbox/react-toolbox/commit/9da2378))
+* allow passing components to card title and subtitle ([08c0907](https://github.com/react-toolbox/react-toolbox/commit/08c0907))
+* Bebel 6 Integrated, Stage-0 added, React updated ([f6047f8](https://github.com/react-toolbox/react-toolbox/commit/f6047f8))
+* close dropdown when click event is triggered outside the component ([21a6860](https://github.com/react-toolbox/react-toolbox/commit/21a6860))
+* Enable Element to behave as Icon ([998b5a4](https://github.com/react-toolbox/react-toolbox/commit/998b5a4))
+* Enabling passing components as icons in all the components ([80b5b7a](https://github.com/react-toolbox/react-toolbox/commit/80b5b7a))
+* Everything but toolbox-loader has been updated ([bbce96c](https://github.com/react-toolbox/react-toolbox/commit/bbce96c))
+* export raw components ([678bd81](https://github.com/react-toolbox/react-toolbox/commit/678bd81))
+* Fix state changes in slider spec example ([30c277b](https://github.com/react-toolbox/react-toolbox/commit/30c277b))
+* Fixe autocomplete ([3c6b7af](https://github.com/react-toolbox/react-toolbox/commit/3c6b7af))
+* fixed button test ([485be5e](https://github.com/react-toolbox/react-toolbox/commit/485be5e))
+* Fixed linting issues ([7c27b09](https://github.com/react-toolbox/react-toolbox/commit/7c27b09))
+* Fixes #270 ([f16934c](https://github.com/react-toolbox/react-toolbox/commit/f16934c)), closes [#270](https://github.com/react-toolbox/react-toolbox/issues/270)
+* Fixes for autocomplete and tests ([f0d5f19](https://github.com/react-toolbox/react-toolbox/commit/f0d5f19))
+* fixing a typo for the List component ([3b3beaf](https://github.com/react-toolbox/react-toolbox/commit/3b3beaf))
+* propagate events in Button ([8dad57e](https://github.com/react-toolbox/react-toolbox/commit/8dad57e))
+* propagate events in Dropdown ([9ce68ae](https://github.com/react-toolbox/react-toolbox/commit/9ce68ae))
+* propagate events in IconMenu ([d92350f](https://github.com/react-toolbox/react-toolbox/commit/d92350f))
+* propagate events in Tab ([0a94499](https://github.com/react-toolbox/react-toolbox/commit/0a94499))
+* propagate events in Tooltip ([a11d152](https://github.com/react-toolbox/react-toolbox/commit/a11d152))
+* removed unused checkbox validations ([39c7c61](https://github.com/react-toolbox/react-toolbox/commit/39c7c61))
+* Removing event from dropdown when not active anymore ([160fb47](https://github.com/react-toolbox/react-toolbox/commit/160fb47))
+* Replace transition-property to transition for Issue#230 ([25a9e65](https://github.com/react-toolbox/react-toolbox/commit/25a9e65))
+* retracted unnecessary addition ([20e41fb](https://github.com/react-toolbox/react-toolbox/commit/20e41fb))
+* update avatar example to use `image` instead of `img` property ([0e60fd2](https://github.com/react-toolbox/react-toolbox/commit/0e60fd2))
+* Upgrading the rest of the dependencies ([c044a22](https://github.com/react-toolbox/react-toolbox/commit/c044a22))
+
+
+
+<a name="0.14.0"></a>
+# 0.14.0 (2015-12-20)
+
+* 0.14.0 release ([7949129](https://github.com/react-toolbox/react-toolbox/commit/7949129))
+* Add animated auto transition from hours to minutes in TimePicker ([211d542](https://github.com/react-toolbox/react-toolbox/commit/211d542))
+* add classnames dependecies, fixes #209 ([3e7d75c](https://github.com/react-toolbox/react-toolbox/commit/3e7d75c)), closes [#209](https://github.com/react-toolbox/react-toolbox/issues/209)
+* Add error field to date picker ([3479f5b](https://github.com/react-toolbox/react-toolbox/commit/3479f5b))
+* Add error field to timepicker ([20d6787](https://github.com/react-toolbox/react-toolbox/commit/20d6787))
+* Add maxLength attribute to input component ([ffa5044](https://github.com/react-toolbox/react-toolbox/commit/ffa5044))
+* Add missing variable for chevron ([027fc12](https://github.com/react-toolbox/react-toolbox/commit/027fc12))
+* Add neutral prop to avoid to inherit neutral styles ([4403003](https://github.com/react-toolbox/react-toolbox/commit/4403003))
+* Add pickers classNames to customize appereance ([aead7f0](https://github.com/react-toolbox/react-toolbox/commit/aead7f0))
+* Add react-toolbox attributes and className to DatePicker ([f3bcbf9](https://github.com/react-toolbox/react-toolbox/commit/f3bcbf9))
+* Add ripple documentation ([055c6e3](https://github.com/react-toolbox/react-toolbox/commit/055c6e3))
+* Allow CardMedia to have flexible height per documentation ([ae3f4a5](https://github.com/react-toolbox/react-toolbox/commit/ae3f4a5))
+* Better styles for navigation. Fixes #205 ([b963be7](https://github.com/react-toolbox/react-toolbox/commit/b963be7)), closes [#205](https://github.com/react-toolbox/react-toolbox/issues/205)
+* Bugfix in dropdown errored styling ([6cc95c5](https://github.com/react-toolbox/react-toolbox/commit/6cc95c5))
+* Change webkit scrollbar removal for a mixin ([40888bb](https://github.com/react-toolbox/react-toolbox/commit/40888bb))
+* Fix icon for link demo ([086a0ae](https://github.com/react-toolbox/react-toolbox/commit/086a0ae))
+* Fix scss-lint errors ([2d931ce](https://github.com/react-toolbox/react-toolbox/commit/2d931ce))
+* Fixes #157 ([b037994](https://github.com/react-toolbox/react-toolbox/commit/b037994)), closes [#157](https://github.com/react-toolbox/react-toolbox/issues/157)
+* Fixes #188 ([60f55eb](https://github.com/react-toolbox/react-toolbox/commit/60f55eb)), closes [#188](https://github.com/react-toolbox/react-toolbox/issues/188)
+* Fixes #203 ([a88868a](https://github.com/react-toolbox/react-toolbox/commit/a88868a)), closes [#203](https://github.com/react-toolbox/react-toolbox/issues/203)
+* Fixes #214 ([abcd097](https://github.com/react-toolbox/react-toolbox/commit/abcd097)), closes [#214](https://github.com/react-toolbox/react-toolbox/issues/214)
+* handle mouse leave in IconButton like Button does, fixes #208 ([5ed9184](https://github.com/react-toolbox/react-toolbox/commit/5ed9184)), closes [#208](https://github.com/react-toolbox/react-toolbox/issues/208)
+* Hide scrollbars in playground for webkit ([3505941](https://github.com/react-toolbox/react-toolbox/commit/3505941))
+* Import commons.scss once. Fixes #220 ([5fea2e3](https://github.com/react-toolbox/react-toolbox/commit/5fea2e3)), closes [#220](https://github.com/react-toolbox/react-toolbox/issues/220)
+* Improve datepicker example ([515169d](https://github.com/react-toolbox/react-toolbox/commit/515169d))
+* Improve layout for calendar in firefox ([8b2316e](https://github.com/react-toolbox/react-toolbox/commit/8b2316e))
+* Make level depend on className for buttons ([2349d69](https://github.com/react-toolbox/react-toolbox/commit/2349d69))
+* Remove opacity prop from Overlay and add invisible. Fixes #183, #178 ([312ec91](https://github.com/react-toolbox/react-toolbox/commit/312ec91)), closes [#183](https://github.com/react-toolbox/react-toolbox/issues/183) [#178](https://github.com/react-toolbox/react-toolbox/issues/178)
+* Remove scrollbar in default app spec wrapper ([e788a21](https://github.com/react-toolbox/react-toolbox/commit/e788a21))
+* Remove scrollbars in list items and remove unneeded overflows ([da1c109](https://github.com/react-toolbox/react-toolbox/commit/da1c109))
+* Remove unneded scroll-x hidden ([5293585](https://github.com/react-toolbox/react-toolbox/commit/5293585))
+* Replace `overflow-y: scroll` with `overflow-y: auto` ([58e4e1e](https://github.com/react-toolbox/react-toolbox/commit/58e4e1e)), closes [#218](https://github.com/react-toolbox/react-toolbox/issues/218)
+* Update switch examples ([85ff089](https://github.com/react-toolbox/react-toolbox/commit/85ff089))
+* Use full Toolbox input in autocomplete ([802f50f](https://github.com/react-toolbox/react-toolbox/commit/802f50f))
+* Use Input component in dropdowns and make it homogeneous ([2c7d308](https://github.com/react-toolbox/react-toolbox/commit/2c7d308))
+
+
+
+<a name="0.13.4"></a>
+## 0.13.4 (2015-12-09)
+
+* 0.13.4 release ([758975c](https://github.com/react-toolbox/react-toolbox/commit/758975c))
+* Add ripple decorator and use it in button and checkbox ([6d7204d](https://github.com/react-toolbox/react-toolbox/commit/6d7204d))
+* Currying Ripple Decorator ([5afbaf5](https://github.com/react-toolbox/react-toolbox/commit/5afbaf5))
+* Fix ListSubHeader case ([cc6e3fb](https://github.com/react-toolbox/react-toolbox/commit/cc6e3fb))
+* Fix ripple positioning when page is scrolled ([0e13ae0](https://github.com/react-toolbox/react-toolbox/commit/0e13ae0))
+* Fix typos in input examples and update example in input readme ([27b7bef](https://github.com/react-toolbox/react-toolbox/commit/27b7bef))
+* Fixes #182 ([9e3ad3b](https://github.com/react-toolbox/react-toolbox/commit/9e3ad3b)), closes [#182](https://github.com/react-toolbox/react-toolbox/issues/182)
+* Input was missing html5 type property ([89b41f3](https://github.com/react-toolbox/react-toolbox/commit/89b41f3))
+* Move Ripple main to Decorator approach ([1139fa6](https://github.com/react-toolbox/react-toolbox/commit/1139fa6))
+* Prevent avatar from getting squeezed ([b63d9da](https://github.com/react-toolbox/react-toolbox/commit/b63d9da))
+* Remove ripple loading mixin ([a2e504f](https://github.com/react-toolbox/react-toolbox/commit/a2e504f))
+* Remove unused css in calendar ([4c986e4](https://github.com/react-toolbox/react-toolbox/commit/4c986e4))
+* Rename ListSubheader.jsx to ListSubHeader.jsx ([1189e30](https://github.com/react-toolbox/react-toolbox/commit/1189e30))
+* Typo ([cfad0ea](https://github.com/react-toolbox/react-toolbox/commit/cfad0ea))
+* Use immutable objects in input and checkbox specs ([1951b64](https://github.com/react-toolbox/react-toolbox/commit/1951b64))
+* Use ripple decorator in menus ([947c22d](https://github.com/react-toolbox/react-toolbox/commit/947c22d))
+* Use ripple decorator in Radio buttons ([fa76723](https://github.com/react-toolbox/react-toolbox/commit/fa76723))
+* Use ripple decorator in switch ([b5606eb](https://github.com/react-toolbox/react-toolbox/commit/b5606eb))
+* Use RippleDecorator in IconButton ([43df57a](https://github.com/react-toolbox/react-toolbox/commit/43df57a))
+* Use RippleDecorator in ListItem ([8edf492](https://github.com/react-toolbox/react-toolbox/commit/8edf492))
+
+
+
+<a name="0.13.3"></a>
+## 0.13.3 (2015-12-03)
+
+* 0.13.3 release ([4696aa2](https://github.com/react-toolbox/react-toolbox/commit/4696aa2))
+* Add inline styles for dropdown example in docs ([7619c05](https://github.com/react-toolbox/react-toolbox/commit/7619c05))
+* Add missing default to some globals ([26d7b8a](https://github.com/react-toolbox/react-toolbox/commit/26d7b8a))
+* Fix checkbox example ([e291120](https://github.com/react-toolbox/react-toolbox/commit/e291120))
+* Fix checkbox readme ([c8246f5](https://github.com/react-toolbox/react-toolbox/commit/c8246f5))
+* Fix icons for navigation examples ([16de3b4](https://github.com/react-toolbox/react-toolbox/commit/16de3b4))
+* Fix input example ([43f546f](https://github.com/react-toolbox/react-toolbox/commit/43f546f))
+* Fix timepicker example ([22bd750](https://github.com/react-toolbox/react-toolbox/commit/22bd750))
+* Fixes #180 ([0835863](https://github.com/react-toolbox/react-toolbox/commit/0835863)), closes [#180](https://github.com/react-toolbox/react-toolbox/issues/180)
+
+
+
+<a name="0.13.2"></a>
+## 0.13.2 (2015-12-02)
+
+* 0.13.2 release ([8620fd4](https://github.com/react-toolbox/react-toolbox/commit/8620fd4))
+* Change capitalization to match the filesystem exactly. ([9b0e50e](https://github.com/react-toolbox/react-toolbox/commit/9b0e50e))
+
+
+
+<a name="0.13.1"></a>
+## 0.13.1 (2015-11-29)
+
+* 0.13.1 release ([086047c](https://github.com/react-toolbox/react-toolbox/commit/086047c))
+* Move classnames dependency to peerdependencies ([5994f50](https://github.com/react-toolbox/react-toolbox/commit/5994f50))
+
+
+
+<a name="0.13.0"></a>
+# 0.13.0 (2015-11-29)
+
+* 0.13.0 release ([def382b](https://github.com/react-toolbox/react-toolbox/commit/def382b))
+* Adapt avatar to current linter constraints ([61ac76c](https://github.com/react-toolbox/react-toolbox/commit/61ac76c))
+* Adapt cards codestyle to the current constraints ([52b8723](https://github.com/react-toolbox/react-toolbox/commit/52b8723))
+* add .npmgnore ([a26a1cd](https://github.com/react-toolbox/react-toolbox/commit/a26a1cd))
+* Add avatar to docs ([b249d58](https://github.com/react-toolbox/react-toolbox/commit/b249d58))
+* Add floating label for pickers. Fixes #137 ([d468c9f](https://github.com/react-toolbox/react-toolbox/commit/d468c9f)), closes [#137](https://github.com/react-toolbox/react-toolbox/issues/137)
+* Added <Avatar> component as required by the card title component ([dba68e7](https://github.com/react-toolbox/react-toolbox/commit/dba68e7))
+* Added additional examples in spec ([38e9dd3](https://github.com/react-toolbox/react-toolbox/commit/38e9dd3))
+* Added icon font stylesheet to index.html for docs and spec ([4cb7fe1](https://github.com/react-toolbox/react-toolbox/commit/4cb7fe1))
+* Added script to auto add component definitions to bottom of readme ([4ceee8d](https://github.com/react-toolbox/react-toolbox/commit/4ceee8d))
+* Allow img as children for avatar ([bf68c83](https://github.com/react-toolbox/react-toolbox/commit/bf68c83))
+* Better avatar component ([a830c93](https://github.com/react-toolbox/react-toolbox/commit/a830c93))
+* Better spacing for cards layout ([ca48169](https://github.com/react-toolbox/react-toolbox/commit/ca48169))
+* Better touch ripple handling ([d0e4135](https://github.com/react-toolbox/react-toolbox/commit/d0e4135))
+* Capitalize list component filename ([7367964](https://github.com/react-toolbox/react-toolbox/commit/7367964))
+* Change layout for cards in spec ([2742bf9](https://github.com/react-toolbox/react-toolbox/commit/2742bf9))
+* changing months in datepicker (Firefox) is failing as event object is undefined ([87cf774](https://github.com/react-toolbox/react-toolbox/commit/87cf774))
+* Complete implementation for Avatar ([2106d0e](https://github.com/react-toolbox/react-toolbox/commit/2106d0e))
+* Delete loading prop from buttons ([5248f87](https://github.com/react-toolbox/react-toolbox/commit/5248f87))
+* Extract IconButton and small fixes ([9769bfb](https://github.com/react-toolbox/react-toolbox/commit/9769bfb))
+* Few more variations added ([0d1d023](https://github.com/react-toolbox/react-toolbox/commit/0d1d023))
+* Finish IconButton ([69521f8](https://github.com/react-toolbox/react-toolbox/commit/69521f8))
+* First version of stateless form ([9de67a4](https://github.com/react-toolbox/react-toolbox/commit/9de67a4))
+* Fix array check on autocomplete ([726a777](https://github.com/react-toolbox/react-toolbox/commit/726a777))
+* Fix icons in icon menu example ([5a002b4](https://github.com/react-toolbox/react-toolbox/commit/5a002b4))
+* Fixed docs component scope error and added card example ([2117354](https://github.com/react-toolbox/react-toolbox/commit/2117354))
+* Fixed typo ([4d52011](https://github.com/react-toolbox/react-toolbox/commit/4d52011))
+* Fixes in Input component ([f23a3c6](https://github.com/react-toolbox/react-toolbox/commit/f23a3c6))
+* Improve Avatar validation ([cdd7d77](https://github.com/react-toolbox/react-toolbox/commit/cdd7d77))
+* Make label red in case of error for Input ([de921b0](https://github.com/react-toolbox/react-toolbox/commit/de921b0))
+* Move card sizes to rem units ([ba70d60](https://github.com/react-toolbox/react-toolbox/commit/ba70d60))
+* Moved updated fonticon to new file ([6206e70](https://github.com/react-toolbox/react-toolbox/commit/6206e70))
+* New approach for Tooltips ([1c57370](https://github.com/react-toolbox/react-toolbox/commit/1c57370))
+* New interface for onChange event (key, value, event) ([05ec7a3](https://github.com/react-toolbox/react-toolbox/commit/05ec7a3))
+* New interface for onChange event (value, event) ([fd0e565](https://github.com/react-toolbox/react-toolbox/commit/fd0e565))
+* New interface for onChange event (value, event) ([9b1cb72](https://github.com/react-toolbox/react-toolbox/commit/9b1cb72))
+* New interface for onChange event (value, event) ([d7bd4f5](https://github.com/react-toolbox/react-toolbox/commit/d7bd4f5))
+* New interface for onChange event (value, event) ([51ca0fa](https://github.com/react-toolbox/react-toolbox/commit/51ca0fa))
+* New interface for onChange event (value, event) ([ee17dcf](https://github.com/react-toolbox/react-toolbox/commit/ee17dcf))
+* New interface for onChange event (value, event) ([0837999](https://github.com/react-toolbox/react-toolbox/commit/0837999))
+* New interface for onChange event (value, event) ([e9566d0](https://github.com/react-toolbox/react-toolbox/commit/e9566d0))
+* No abbr... ([b190ecc](https://github.com/react-toolbox/react-toolbox/commit/b190ecc))
+* Pass linter errors for button ([395ce5b](https://github.com/react-toolbox/react-toolbox/commit/395ce5b))
+* Pass linter rules ([25964bf](https://github.com/react-toolbox/react-toolbox/commit/25964bf))
+* Pass scss lint ([2dae5b7](https://github.com/react-toolbox/react-toolbox/commit/2dae5b7))
+* Pass scss lint ([eb8b83d](https://github.com/react-toolbox/react-toolbox/commit/eb8b83d))
+* Rebased branch on deep-restructure ([c65ab37](https://github.com/react-toolbox/react-toolbox/commit/c65ab37))
+* Rebasing with master ([6d9f9aa](https://github.com/react-toolbox/react-toolbox/commit/6d9f9aa))
+* Refactor app and app_bar ([db30db8](https://github.com/react-toolbox/react-toolbox/commit/db30db8))
+* Remove classnames decorator ([e1b04a2](https://github.com/react-toolbox/react-toolbox/commit/e1b04a2))
+* Remove extra lines ([6a644a4](https://github.com/react-toolbox/react-toolbox/commit/6a644a4))
+* Remove flex attributes styling ([ad916fb](https://github.com/react-toolbox/react-toolbox/commit/ad916fb))
+* Remove font import from globals ([64b87d0](https://github.com/react-toolbox/react-toolbox/commit/64b87d0))
+* Remove Form from spec for now ([54c3af2](https://github.com/react-toolbox/react-toolbox/commit/54c3af2))
+* Remove jsx extension from component index files, replace with js ([f3d047e](https://github.com/react-toolbox/react-toolbox/commit/f3d047e))
+* Remove jsx extension from imports in components ([da0f1a6](https://github.com/react-toolbox/react-toolbox/commit/da0f1a6))
+* Remove SelectorFormat to allow camelCase for CSSModules ([6ed03ad](https://github.com/react-toolbox/react-toolbox/commit/6ed03ad))
+* Remove unneeded example from avatar example ([a907ebf](https://github.com/react-toolbox/react-toolbox/commit/a907ebf))
+* Remove unneeded ripple dependency in calendar ([387afcf](https://github.com/react-toolbox/react-toolbox/commit/387afcf))
+* Removed font icon style dependency, fixes #151 ([c9e3663](https://github.com/react-toolbox/react-toolbox/commit/c9e3663)), closes [#151](https://github.com/react-toolbox/react-toolbox/issues/151)
+* Removed old file ([eea0c0e](https://github.com/react-toolbox/react-toolbox/commit/eea0c0e))
+* Rename list to List and use ClassNames in ListItem ([3d9b921](https://github.com/react-toolbox/react-toolbox/commit/3d9b921))
+* Rename lists subcomponents and little fixes ([598d805](https://github.com/react-toolbox/react-toolbox/commit/598d805))
+* Rename most components index to actual components ([cfebdb5](https://github.com/react-toolbox/react-toolbox/commit/cfebdb5))
+* Rename some components to new naming approach ([1611b49](https://github.com/react-toolbox/react-toolbox/commit/1611b49))
+* Reorganize pickers ([ceb2ce4](https://github.com/react-toolbox/react-toolbox/commit/ceb2ce4))
+* Replace dependency `classnames-minimal` with `classnames` ([f5134d2](https://github.com/react-toolbox/react-toolbox/commit/f5134d2))
+* Reverted to previous spec root.jsx ([5c8330a](https://github.com/react-toolbox/react-toolbox/commit/5c8330a))
+* Small changes in card readme ([f2738a0](https://github.com/react-toolbox/react-toolbox/commit/f2738a0))
+* Started card overhaul ([37199c2](https://github.com/react-toolbox/react-toolbox/commit/37199c2))
+* Update babel-eslint to latest version ([6495af3](https://github.com/react-toolbox/react-toolbox/commit/6495af3))
+* Update documentation ([4ef730e](https://github.com/react-toolbox/react-toolbox/commit/4ef730e))
+* Update FontIcon docs ([a1a8546](https://github.com/react-toolbox/react-toolbox/commit/a1a8546))
+* Update Home Cards to new component version ([bc81894](https://github.com/react-toolbox/react-toolbox/commit/bc81894))
+* Update README.md ([1c822d2](https://github.com/react-toolbox/react-toolbox/commit/1c822d2))
+* Use classNames in Autocomplete ([c9061e2](https://github.com/react-toolbox/react-toolbox/commit/c9061e2))
+* Use ClassNames in CalendarDay ([fdeccda](https://github.com/react-toolbox/react-toolbox/commit/fdeccda))
+* Use ClassNames in Checkbox component ([50544ab](https://github.com/react-toolbox/react-toolbox/commit/50544ab))
+* Use ClassNames in Dialog component ([9286e1c](https://github.com/react-toolbox/react-toolbox/commit/9286e1c))
+* Use ClassNames in Drawer ([ee45186](https://github.com/react-toolbox/react-toolbox/commit/ee45186))
+* Use ClassNames in Dropdown ([1370e2a](https://github.com/react-toolbox/react-toolbox/commit/1370e2a))
+* Use Classnames in Link ([bf726ba](https://github.com/react-toolbox/react-toolbox/commit/bf726ba))
+* Use ClassNames in ListItemCheckbox ([edcb7f5](https://github.com/react-toolbox/react-toolbox/commit/edcb7f5))
+* Use ClassNames in Menu ([794a385](https://github.com/react-toolbox/react-toolbox/commit/794a385))
+* Use ClassNames in ProgressBar ([215936f](https://github.com/react-toolbox/react-toolbox/commit/215936f))
+* Use ClassNames in Radio ([3b1e1f0](https://github.com/react-toolbox/react-toolbox/commit/3b1e1f0))
+* Use ClassNames in Slider ([e328ffc](https://github.com/react-toolbox/react-toolbox/commit/e328ffc))
+* Use ClassNames in Snackbar ([9516200](https://github.com/react-toolbox/react-toolbox/commit/9516200))
+* Use ClassNames in TableRow ([c5d0d15](https://github.com/react-toolbox/react-toolbox/commit/c5d0d15))
+* Use ClassNames in Tabs and rename files ([35f8f12](https://github.com/react-toolbox/react-toolbox/commit/35f8f12))
+* Use ClassNames in Tooltip ([db43b19](https://github.com/react-toolbox/react-toolbox/commit/db43b19))
+* Use IconButton in Calendar ([2e414e9](https://github.com/react-toolbox/react-toolbox/commit/2e414e9))
+* Use IconButton in card examples ([404e2e4](https://github.com/react-toolbox/react-toolbox/commit/404e2e4))
+* Use IconButton in IconMenu ([c42b3c6](https://github.com/react-toolbox/react-toolbox/commit/c42b3c6))
+* Using the new interface for all form fields components. ([e9001c5](https://github.com/react-toolbox/react-toolbox/commit/e9001c5))
+* Working on card documentation ([987feb8](https://github.com/react-toolbox/react-toolbox/commit/987feb8))
+* Bugfix: rename with-legend class to withLegend ([2b9c615](https://github.com/react-toolbox/react-toolbox/commit/2b9c615))
+
+
+
+<a name="0.12.13"></a>
+## 0.12.13 (2015-11-21)
+
+* 0.12.13 release ([92a5369](https://github.com/react-toolbox/react-toolbox/commit/92a5369))
+* Add selectable property to table. Fixes #145 ([fb29096](https://github.com/react-toolbox/react-toolbox/commit/fb29096)), closes [#145](https://github.com/react-toolbox/react-toolbox/issues/145)
+* Better imports organization. Fixes #140 ([364e270](https://github.com/react-toolbox/react-toolbox/commit/364e270)), closes [#140](https://github.com/react-toolbox/react-toolbox/issues/140)
+* Improve ripple performance. Fixes #142 ([ac5501b](https://github.com/react-toolbox/react-toolbox/commit/ac5501b)), closes [#142](https://github.com/react-toolbox/react-toolbox/issues/142)
+* Update eslint and plugins and add some rules to make it pass ([1bfd44e](https://github.com/react-toolbox/react-toolbox/commit/1bfd44e))
+
+
+
+<a name="0.12.12"></a>
+## 0.12.12 (2015-11-21)
+
+* 0.12.11 release ([a93ab7e](https://github.com/react-toolbox/react-toolbox/commit/a93ab7e))
+* 0.12.12 release ([3507bcf](https://github.com/react-toolbox/react-toolbox/commit/3507bcf))
+* Add touch ripple for buttons ([7841b43](https://github.com/react-toolbox/react-toolbox/commit/7841b43))
+* Add touch ripple for buttons ([63a0c48](https://github.com/react-toolbox/react-toolbox/commit/63a0c48))
+* Add touch support for ripple ([bd236e1](https://github.com/react-toolbox/react-toolbox/commit/bd236e1))
+* Add touch support for ripple ([1ab45db](https://github.com/react-toolbox/react-toolbox/commit/1ab45db))
+* Auto import base in commons file ([1193e99](https://github.com/react-toolbox/react-toolbox/commit/1193e99))
+* Fix straggling ) ([6d4ae47](https://github.com/react-toolbox/react-toolbox/commit/6d4ae47))
+* New property delay in milliseconds. ([ef6bd08](https://github.com/react-toolbox/react-toolbox/commit/ef6bd08))
+* Use milliseconds for timeout. ([7fc2617](https://github.com/react-toolbox/react-toolbox/commit/7fc2617))
+* Use normal overflow on rounded buttons ([0d5310d](https://github.com/react-toolbox/react-toolbox/commit/0d5310d))
+* Use scale for ripple instead of width and height ([f6840de](https://github.com/react-toolbox/react-toolbox/commit/f6840de))
+
+
+
+<a name="0.12.11"></a>
+## 0.12.11 (2015-11-19)
+
+* [autocomplete] Fix #134 ([1cf41fe](https://github.com/react-toolbox/react-toolbox/commit/1cf41fe)), closes [#134](https://github.com/react-toolbox/react-toolbox/issues/134)
+* 0.12.11 release ([966f457](https://github.com/react-toolbox/react-toolbox/commit/966f457))
+* Auto import base in commons file ([2fc419f](https://github.com/react-toolbox/react-toolbox/commit/2fc419f))
+* Define all colors as RGB ([dd8a176](https://github.com/react-toolbox/react-toolbox/commit/dd8a176))
+* Remove all `unquote` calls ([addc7f3](https://github.com/react-toolbox/react-toolbox/commit/addc7f3))
+
+
+
+<a name="0.12.10"></a>
+## 0.12.10 (2015-11-18)
+
+* 0.12.10 release ([e1f60b7](https://github.com/react-toolbox/react-toolbox/commit/e1f60b7))
+* Add hack to allow overflow hidden with border radio in old webkit ([b12bf6e](https://github.com/react-toolbox/react-toolbox/commit/b12bf6e))
+* Change actions for authors cards in landing ([a24cad0](https://github.com/react-toolbox/react-toolbox/commit/a24cad0))
+* Change scale3d property to scale in radio button ([64baf5d](https://github.com/react-toolbox/react-toolbox/commit/64baf5d))
+* Disable responsive in docs for now ([9f6a415](https://github.com/react-toolbox/react-toolbox/commit/9f6a415))
+* Do not include commons in app wrapper ([9905403](https://github.com/react-toolbox/react-toolbox/commit/9905403))
+* Restyle layout to use transforms in main docs ([b8941e1](https://github.com/react-toolbox/react-toolbox/commit/b8941e1))
+
+
+
+<a name="0.12.9"></a>
+## 0.12.9 (2015-11-18)
+
+* 0.12.9 release ([23fd0f3](https://github.com/react-toolbox/react-toolbox/commit/23fd0f3))
+* Add scss-lint to dev dependencies ([8aa5fa9](https://github.com/react-toolbox/react-toolbox/commit/8aa5fa9))
+* Fix examples for tab ([e0a4168](https://github.com/react-toolbox/react-toolbox/commit/e0a4168))
+* Pass scss lint ([5b7ca28](https://github.com/react-toolbox/react-toolbox/commit/5b7ca28))
+* Remove code autoload in playground ([0cc5a6f](https://github.com/react-toolbox/react-toolbox/commit/0cc5a6f))
+* Remove scss lint from package until migrating to sass-lint ([f8ff162](https://github.com/react-toolbox/react-toolbox/commit/f8ff162))
+* Remove section titles from tabs in tabs example ([6c75479](https://github.com/react-toolbox/react-toolbox/commit/6c75479))
+
+
+
+<a name="0.12.8"></a>
+## 0.12.8 (2015-11-18)
+
+* 0.12.8 release ([21d0485](https://github.com/react-toolbox/react-toolbox/commit/21d0485))
+* Change example with new property 'maxLength' ([9dedee6](https://github.com/react-toolbox/react-toolbox/commit/9dedee6))
+* New property 'maxLength' ([477b770](https://github.com/react-toolbox/react-toolbox/commit/477b770))
+* Refactor class list generation in `Input` component ([76a7e91](https://github.com/react-toolbox/react-toolbox/commit/76a7e91))
+
+
+
+<a name="0.12.7"></a>
+## 0.12.7 (2015-11-18)
+
+* 0.12.7 release ([cdc0814](https://github.com/react-toolbox/react-toolbox/commit/cdc0814))
+* Add scrollX/Y for components not wrapped in App ([2bf510f](https://github.com/react-toolbox/react-toolbox/commit/2bf510f))
+* Change button properties and support toggle icon buttons ([26cecdc](https://github.com/react-toolbox/react-toolbox/commit/26cecdc))
+* Fix scss linter errors and bugfix in snackbar ([54ad233](https://github.com/react-toolbox/react-toolbox/commit/54ad233))
+* Fixes #124 ([81e2661](https://github.com/react-toolbox/react-toolbox/commit/81e2661)), closes [#124](https://github.com/react-toolbox/react-toolbox/issues/124)
+
+
+
+<a name="0.12.6"></a>
+## 0.12.6 (2015-11-17)
+
+* Patch: Placeholder in <DatePicker> ([98f2920](https://github.com/react-toolbox/react-toolbox/commit/98f2920))
+* Adapt docs to new buttons ([ab40974](https://github.com/react-toolbox/react-toolbox/commit/ab40974))
+* Add icons for cards in landing docs page ([2d4dcef](https://github.com/react-toolbox/react-toolbox/commit/2d4dcef))
+* adding cross-env command to npm start scripts for windows compatibility. ([4227201](https://github.com/react-toolbox/react-toolbox/commit/4227201))
+* Allow children for buttons and use it as link where there is href prop ([4707a26](https://github.com/react-toolbox/react-toolbox/commit/4707a26))
+* Bumped such as NPM Commands ([94c8747](https://github.com/react-toolbox/react-toolbox/commit/94c8747))
+* removing UV_THREADPOOL_SIZE set, now executed from npm start script. ([fe7b4d5](https://github.com/react-toolbox/react-toolbox/commit/fe7b4d5))
+* Set raised button for first test example ([3e91b97](https://github.com/react-toolbox/react-toolbox/commit/3e91b97))
+* Use i tagname for icons ([709cc37](https://github.com/react-toolbox/react-toolbox/commit/709cc37))
+
+
+
+<a name="0.12.5"></a>
+## 0.12.5 (2015-11-16)
+
+* 0.12.5 release ([b351237](https://github.com/react-toolbox/react-toolbox/commit/b351237))
+
+
+
+<a name="0.12.4"></a>
+## 0.12.4 (2015-11-16)
+
+* 0.12.4 release ([ac1c924](https://github.com/react-toolbox/react-toolbox/commit/ac1c924))
+* Change examples for use new properties 'minDate' and 'maxDate' ([0cacdf1](https://github.com/react-toolbox/react-toolbox/commit/0cacdf1))
+* force date when it's out of range ([20d8834](https://github.com/react-toolbox/react-toolbox/commit/20d8834))
+* Lock year like a change date (when it's out of range) ([f31dde2](https://github.com/react-toolbox/react-toolbox/commit/f31dde2))
+* New style for calendar (material design new spec) ([0e54523](https://github.com/react-toolbox/react-toolbox/commit/0e54523))
+
+
+
+<a name="0.12.3"></a>
+## 0.12.3 (2015-11-16)
+
+* 0.12.3 release ([e285625](https://github.com/react-toolbox/react-toolbox/commit/e285625))
+* Change quotes to pass linter rules ([14ad835](https://github.com/react-toolbox/react-toolbox/commit/14ad835))
+* Enable App component to hold refs ([c9e700f](https://github.com/react-toolbox/react-toolbox/commit/c9e700f))
+* Import globals in font icon to get the url config variable for the font ([e7850c4](https://github.com/react-toolbox/react-toolbox/commit/e7850c4))
+* New properties 'minDate' & 'maxDate' ([67e6a7e](https://github.com/react-toolbox/react-toolbox/commit/67e6a7e))
+
+
+
+<a name="0.12.2"></a>
+## 0.12.2 (2015-11-15)
+
+* 0.12.2 release ([f3355b6](https://github.com/react-toolbox/react-toolbox/commit/f3355b6))
+* Add a section to explain App wrapper ([92e6aae](https://github.com/react-toolbox/react-toolbox/commit/92e6aae))
+* Round ripple for floating buttons ([c09f7c4](https://github.com/react-toolbox/react-toolbox/commit/c09f7c4))
+* Update install.md ([de6bfdf](https://github.com/react-toolbox/react-toolbox/commit/de6bfdf))
+* Update README.md ([a208570](https://github.com/react-toolbox/react-toolbox/commit/a208570))
+
+
+
+<a name="0.12.1"></a>
+## 0.12.1 (2015-11-15)
+
+* 0.12.1 release ([7667f39](https://github.com/react-toolbox/react-toolbox/commit/7667f39))
+* Fix description and homepage in package ([f5594fe](https://github.com/react-toolbox/react-toolbox/commit/f5594fe))
+
+
+
+<a name="0.12.0"></a>
+# 0.12.0 (2015-11-15)
+
+* 0.12.0 release ([b5c2590](https://github.com/react-toolbox/react-toolbox/commit/b5c2590))
+* Add back onBlur and onFocus for Switch component ([acdb2ca](https://github.com/react-toolbox/react-toolbox/commit/acdb2ca))
+* Add Overlay component ([14c8cb5](https://github.com/react-toolbox/react-toolbox/commit/14c8cb5))
+* Add proper example in switch readme ([d915346](https://github.com/react-toolbox/react-toolbox/commit/d915346))
+* Add react-toolbox attribute to dialog ([5fbe67b](https://github.com/react-toolbox/react-toolbox/commit/5fbe67b))
+* Add toolbox version to webpack configuration ([50d99d2](https://github.com/react-toolbox/react-toolbox/commit/50d99d2))
+* Added babel polyfill to docs to fix ie11 bug, fixes #99 ([431bc3a](https://github.com/react-toolbox/react-toolbox/commit/431bc3a)), closes [#99](https://github.com/react-toolbox/react-toolbox/issues/99)
+* Defer hiding in 500ms for tooltips ([7e694b4](https://github.com/react-toolbox/react-toolbox/commit/7e694b4))
+* don't hide navigation while playground is loaded if screen is 1200px+ in width ([51f8338](https://github.com/react-toolbox/react-toolbox/commit/51f8338))
+* Extract selected item from menu ([58ac44a](https://github.com/react-toolbox/react-toolbox/commit/58ac44a))
+* Extract value from radio group state ([02dc01b](https://github.com/react-toolbox/react-toolbox/commit/02dc01b))
+* Fixes #72 and #97 ([1b6bb5f](https://github.com/react-toolbox/react-toolbox/commit/1b6bb5f)), closes [#72](https://github.com/react-toolbox/react-toolbox/issues/72) [#97](https://github.com/react-toolbox/react-toolbox/issues/97)
+* Get real height of parent ([bacb02b](https://github.com/react-toolbox/react-toolbox/commit/bacb02b))
+* keeping 0.0.3 better-npm-run ([162df8f](https://github.com/react-toolbox/react-toolbox/commit/162df8f))
+* keeping sass-loader ^3.0.0 and toolbox-loader 0.0.2 ([52f261f](https://github.com/react-toolbox/react-toolbox/commit/52f261f))
+* Minor changes (help to read) ([cbbf602](https://github.com/react-toolbox/react-toolbox/commit/cbbf602))
+* Minor fixes ([37f1bf2](https://github.com/react-toolbox/react-toolbox/commit/37f1bf2))
+* Missing code in <Table> ([d37b3d5](https://github.com/react-toolbox/react-toolbox/commit/d37b3d5))
+* Move onActive to tab in tabs ([832e01f](https://github.com/react-toolbox/react-toolbox/commit/832e01f))
+* New and refactored stateless tabs ([50b113b](https://github.com/react-toolbox/react-toolbox/commit/50b113b))
+* Not necesary overlay events ([597d6fd](https://github.com/react-toolbox/react-toolbox/commit/597d6fd))
+* Now <Snackbar> uses internal component <overlay> (using its new property opacity) ([9aca75a](https://github.com/react-toolbox/react-toolbox/commit/9aca75a))
+* Now opacity set by property ([6cd6fd7](https://github.com/react-toolbox/react-toolbox/commit/6cd6fd7))
+* Pure <Snackbar> ([d5294cc](https://github.com/react-toolbox/react-toolbox/commit/d5294cc))
+* Pure <Switch> ([c1c1a9a](https://github.com/react-toolbox/react-toolbox/commit/c1c1a9a))
+* Readme update. Short instructions to start docs locally ([e476893](https://github.com/react-toolbox/react-toolbox/commit/e476893))
+* Refactor dropdown and put value state out ([4590367](https://github.com/react-toolbox/react-toolbox/commit/4590367))
+* Remove not needed click handler in snackbar ([846699a](https://github.com/react-toolbox/react-toolbox/commit/846699a))
+* Remove unused event variable in table component ([9096f8f](https://github.com/react-toolbox/react-toolbox/commit/9096f8f))
+* Removed babel-polyfill from docs and added ie11 polyfills to main component library ([9975b8d](https://github.com/react-toolbox/react-toolbox/commit/9975b8d))
+* removing better-npm-script dependency. ([7d48800](https://github.com/react-toolbox/react-toolbox/commit/7d48800))
+* Rename active to index in tabs 😕 ([e15c421](https://github.com/react-toolbox/react-toolbox/commit/e15c421))
+* Set .active class only when component has a opacity > 0 ([17cc28d](https://github.com/react-toolbox/react-toolbox/commit/17cc28d))
+* Stateless table component ([272a37f](https://github.com/react-toolbox/react-toolbox/commit/272a37f))
+* Tooltip using a parent with relative position ([6918072](https://github.com/react-toolbox/react-toolbox/commit/6918072))
+* Update example for list checkbox ([32804ab](https://github.com/react-toolbox/react-toolbox/commit/32804ab))
+* Update README.md ([63a1c87](https://github.com/react-toolbox/react-toolbox/commit/63a1c87))
+* Update README.md ([db93a75](https://github.com/react-toolbox/react-toolbox/commit/db93a75))
+* Update README.md ([5b9472c](https://github.com/react-toolbox/react-toolbox/commit/5b9472c))
+* Use <overlay> component for set the correct position in <dialog> components. ([8d0649a](https://github.com/react-toolbox/react-toolbox/commit/8d0649a))
+* Use new Overlay component in dialogs and dependencies ([2c17688](https://github.com/react-toolbox/react-toolbox/commit/2c17688))
+* Use Overlay component in drawers ([cadc3e2](https://github.com/react-toolbox/react-toolbox/commit/cadc3e2))
+* using better-npm-run for cross platform node_env and uv_threadpool_size vars ([10eb6c3](https://github.com/react-toolbox/react-toolbox/commit/10eb6c3))
+* using cross-env for env var compatibility ([d301a7a](https://github.com/react-toolbox/react-toolbox/commit/d301a7a))
+
+
+
+<a name="0.11.5"></a>
+## 0.11.5 (2015-11-11)
+
+* 💩 ([fb94605](https://github.com/react-toolbox/react-toolbox/commit/fb94605))
+* 🤗 ([e815f09](https://github.com/react-toolbox/react-toolbox/commit/e815f09))
+* 0.11.5 release ([0c11acc](https://github.com/react-toolbox/react-toolbox/commit/0c11acc))
+* Add full color palette ([b5bcca7](https://github.com/react-toolbox/react-toolbox/commit/b5bcca7))
+* Add node version info in contributors readme section ([838f818](https://github.com/react-toolbox/react-toolbox/commit/838f818))
+* Add production env when building ([a412d22](https://github.com/react-toolbox/react-toolbox/commit/a412d22))
+* Alphabetical Order for properties and methods ([147088b](https://github.com/react-toolbox/react-toolbox/commit/147088b))
+* Avoid object assign in preview component ([9171279](https://github.com/react-toolbox/react-toolbox/commit/9171279))
+* change documentation ([653150c](https://github.com/react-toolbox/react-toolbox/commit/653150c))
+* Delete repeated pickers in spec ([bcec735](https://github.com/react-toolbox/react-toolbox/commit/bcec735))
+* Extract state from autocomplete ([703d4c6](https://github.com/react-toolbox/react-toolbox/commit/703d4c6))
+* Extract value from slider state and fix tests ([7d6c898](https://github.com/react-toolbox/react-toolbox/commit/7d6c898))
+* Fix disabled ripple click error ([ff936cb](https://github.com/react-toolbox/react-toolbox/commit/ff936cb))
+* Fixed typo ([ae95446](https://github.com/react-toolbox/react-toolbox/commit/ae95446))
+* Fixes #89 ([7a1181a](https://github.com/react-toolbox/react-toolbox/commit/7a1181a)), closes [#89](https://github.com/react-toolbox/react-toolbox/issues/89)
+* Improve code for slider ([0a8b6b0](https://github.com/react-toolbox/react-toolbox/commit/0a8b6b0))
+* Improve date picker ([7311489](https://github.com/react-toolbox/react-toolbox/commit/7311489))
+* Improve pickers ([5fc1359](https://github.com/react-toolbox/react-toolbox/commit/5fc1359))
+* Improvements in checkbox and adapt dependencies to stateless behavior ([1d9cde9](https://github.com/react-toolbox/react-toolbox/commit/1d9cde9))
+* minor changes ([7aec185](https://github.com/react-toolbox/react-toolbox/commit/7aec185))
+* Minor changes ([49acc41](https://github.com/react-toolbox/react-toolbox/commit/49acc41))
+* New rule for <Input> (type: date or time) ([34cef32](https://github.com/react-toolbox/react-toolbox/commit/34cef32))
+* Next version ([9d7eebd](https://github.com/react-toolbox/react-toolbox/commit/9d7eebd))
+* Proper import path for documentation files ([67ab874](https://github.com/react-toolbox/react-toolbox/commit/67ab874))
+* Proper link for donations ([0a2761a](https://github.com/react-toolbox/react-toolbox/commit/0a2761a))
+* Pure <Table> and improve events. ([0fe79fd](https://github.com/react-toolbox/react-toolbox/commit/0fe79fd))
+* Pure <Tabs> ([42b9496](https://github.com/react-toolbox/react-toolbox/commit/42b9496))
+* Pure timepicker, fixes #33 ([476729f](https://github.com/react-toolbox/react-toolbox/commit/476729f)), closes [#33](https://github.com/react-toolbox/react-toolbox/issues/33)
+* Restore root and remove missing console log ([0dd4bb6](https://github.com/react-toolbox/react-toolbox/commit/0dd4bb6))
+* Set font URLs as variables ([fe86854](https://github.com/react-toolbox/react-toolbox/commit/fe86854))
+* Set sinon official 2.0 branch ([4af52d1](https://github.com/react-toolbox/react-toolbox/commit/4af52d1))
+* Stateless DatePicker ([57d0109](https://github.com/react-toolbox/react-toolbox/commit/57d0109))
+* Stateless input ([f5957bc](https://github.com/react-toolbox/react-toolbox/commit/f5957bc))
+* Stateless TimePicker ([2130057](https://github.com/react-toolbox/react-toolbox/commit/2130057))
+* Update examples and documentation for slider ([362c0cf](https://github.com/react-toolbox/react-toolbox/commit/362c0cf))
+* Update README.md ([116e598](https://github.com/react-toolbox/react-toolbox/commit/116e598))
+* Bugfix: avoid delay in slider knob ([24c4c39](https://github.com/react-toolbox/react-toolbox/commit/24c4c39))
+
+
+
+<a name="0.11.3"></a>
+## 0.11.3 (2015-11-07)
+
+* <Button floating> for show the playground area. ([ae78976](https://github.com/react-toolbox/react-toolbox/commit/ae78976))
+* <Checkbox> Stateless ([b1fe6f6](https://github.com/react-toolbox/react-toolbox/commit/b1fe6f6))
+* <Clock> is not a public component. ([2761c88](https://github.com/react-toolbox/react-toolbox/commit/2761c88))
+* <footer> in home ([bd277a0](https://github.com/react-toolbox/react-toolbox/commit/bd277a0))
+* <header> navigation like Magerial Design Lite. ([c997834](https://github.com/react-toolbox/react-toolbox/commit/c997834))
+* <RadioButton> is not a public component. ([bdeda85](https://github.com/react-toolbox/react-toolbox/commit/bdeda85))
+* <Table> using the new stateless <Checkbox> ([b3150f4](https://github.com/react-toolbox/react-toolbox/commit/b3150f4))
+* 😗 ([f239946](https://github.com/react-toolbox/react-toolbox/commit/f239946))
+* 😟 ([462b258](https://github.com/react-toolbox/react-toolbox/commit/462b258))
+* Add a couple of links to the components spec page ([af1ac20](https://github.com/react-toolbox/react-toolbox/commit/af1ac20))
+* Add a drawer panel with playground area ([ba5432a](https://github.com/react-toolbox/react-toolbox/commit/ba5432a))
+* Add analytics ([dcd95e6](https://github.com/react-toolbox/react-toolbox/commit/dcd95e6))
+* add app_bar to spec ([18ed189](https://github.com/react-toolbox/react-toolbox/commit/18ed189))
+* Add auto property to autocomplete ([76e3f98](https://github.com/react-toolbox/react-toolbox/commit/76e3f98))
+* add babel to devDepedenecy ([d0936c2](https://github.com/react-toolbox/react-toolbox/commit/d0936c2))
+* add commons.scss to spec html ([55c654d](https://github.com/react-toolbox/react-toolbox/commit/55c654d))
+* Add deploy command ([dd9954d](https://github.com/react-toolbox/react-toolbox/commit/dd9954d))
+* Add docs for radio buttons ([0df2d8d](https://github.com/react-toolbox/react-toolbox/commit/0df2d8d))
+* Add docs for snackbar ([b8a3c90](https://github.com/react-toolbox/react-toolbox/commit/b8a3c90))
+* Add docs for the font icon ([ad3a39d](https://github.com/react-toolbox/react-toolbox/commit/ad3a39d))
+* Add docs subproject ([de3af12](https://github.com/react-toolbox/react-toolbox/commit/de3af12))
+* Add document for the root component documentation ([dd5948e](https://github.com/react-toolbox/react-toolbox/commit/dd5948e))
+* Add documentation and example for appbar and autocomplete ([484db1e](https://github.com/react-toolbox/react-toolbox/commit/484db1e))
+* Add documentation and example for menus ([2a93731](https://github.com/react-toolbox/react-toolbox/commit/2a93731))
+* Add documentation and examples for cards ([211cb97](https://github.com/react-toolbox/react-toolbox/commit/211cb97))
+* Add documentation and fixes for dropdown ([7c7ed76](https://github.com/react-toolbox/react-toolbox/commit/7c7ed76))
+* Add documentation for date picker and remove structure section from other docs ([4eb0c1b](https://github.com/react-toolbox/react-toolbox/commit/4eb0c1b))
+* Add documentation for dialog ([c2461a8](https://github.com/react-toolbox/react-toolbox/commit/c2461a8))
+* Add documentation for Tabs ([9d809de](https://github.com/react-toolbox/react-toolbox/commit/9d809de))
+* Add drawer documentation ([811bb7b](https://github.com/react-toolbox/react-toolbox/commit/811bb7b))
+* Add dynamic loader for Markdown examples 😎 ([b58d688](https://github.com/react-toolbox/react-toolbox/commit/b58d688))
+* Add favicon ([793f54c](https://github.com/react-toolbox/react-toolbox/commit/793f54c))
+* Add gh pages package ([e152e93](https://github.com/react-toolbox/react-toolbox/commit/e152e93))
+* Add head tag info ([86b6c8b](https://github.com/react-toolbox/react-toolbox/commit/86b6c8b))
+* Add highligh for markdown loader ([f8c8435](https://github.com/react-toolbox/react-toolbox/commit/f8c8435))
+* Add input docs ([a049d99](https://github.com/react-toolbox/react-toolbox/commit/a049d99))
+* Add instalation page and layout ([f1b1345](https://github.com/react-toolbox/react-toolbox/commit/f1b1345))
+* Add language legend to markdown docs ([303ca9c](https://github.com/react-toolbox/react-toolbox/commit/303ca9c))
+* Add language to code in list docs ([21f47af](https://github.com/react-toolbox/react-toolbox/commit/21f47af))
+* Add layout for components in doc ([659b5bb](https://github.com/react-toolbox/react-toolbox/commit/659b5bb))
+* Add link docs ([73e5fa0](https://github.com/react-toolbox/react-toolbox/commit/73e5fa0))
+* Add list docs ([5a1d15e](https://github.com/react-toolbox/react-toolbox/commit/5a1d15e))
+* Add main components page and default playground example ([61b8a70](https://github.com/react-toolbox/react-toolbox/commit/61b8a70))
+* Add missing jsx legend to dialog docs ([bc668b9](https://github.com/react-toolbox/react-toolbox/commit/bc668b9))
+* Add navigation docs ([754e939](https://github.com/react-toolbox/react-toolbox/commit/754e939))
+* Add object assign ([b126fe7](https://github.com/react-toolbox/react-toolbox/commit/b126fe7))
+* Add option to avoid removing comments in HTML build ([6cd364f](https://github.com/react-toolbox/react-toolbox/commit/6cd364f))
+* Add Playground component ([1e20183](https://github.com/react-toolbox/react-toolbox/commit/1e20183))
+* Add progressbar docs ([b5b7b13](https://github.com/react-toolbox/react-toolbox/commit/b5b7b13))
+* add rimraf devDependencies ([efb9cd2](https://github.com/react-toolbox/react-toolbox/commit/efb9cd2))
+* add sass sourcemap in dev ([2433d71](https://github.com/react-toolbox/react-toolbox/commit/2433d71))
+* Add scripts to generate a js+css version ([8c4c795](https://github.com/react-toolbox/react-toolbox/commit/8c4c795))
+* Add sidebar and better layout for documentation ([8dcc782](https://github.com/react-toolbox/react-toolbox/commit/8dcc782))
+* Add slider documentation ([41d5cb7](https://github.com/react-toolbox/react-toolbox/commit/41d5cb7))
+* Add Snackbar spec ([715d898](https://github.com/react-toolbox/react-toolbox/commit/715d898))
+* Add some changes for the home page ([0b1e46f](https://github.com/react-toolbox/react-toolbox/commit/0b1e46f))
+* Add some missing semicolons ([246c572](https://github.com/react-toolbox/react-toolbox/commit/246c572))
+* Add spec to Button component ([fff3720](https://github.com/react-toolbox/react-toolbox/commit/fff3720))
+* Add support button to home page ([3236a3f](https://github.com/react-toolbox/react-toolbox/commit/3236a3f))
+* Add switch docs ([f63103c](https://github.com/react-toolbox/react-toolbox/commit/f63103c))
+* Add theme configuration for docs ([f3b70a5](https://github.com/react-toolbox/react-toolbox/commit/f3b70a5))
+* Add time picker docs ([b4124a5](https://github.com/react-toolbox/react-toolbox/commit/b4124a5))
+* Add toolbox loader for production build ([cd525ca](https://github.com/react-toolbox/react-toolbox/commit/cd525ca))
+* add UV_THREADPOOL_SIZE ([8ed0fc1](https://github.com/react-toolbox/react-toolbox/commit/8ed0fc1))
+* added bumped configuration ([6ad44d7](https://github.com/react-toolbox/react-toolbox/commit/6ad44d7))
+* Added component to Package and Bundle ([193ba8b](https://github.com/react-toolbox/react-toolbox/commit/193ba8b))
+* Added one-dark theme for editor ([236a373](https://github.com/react-toolbox/react-toolbox/commit/236a373))
+* Added publish in Github and NPM ([226d83d](https://github.com/react-toolbox/react-toolbox/commit/226d83d))
+* Authors data for <Card> ([2f489eb](https://github.com/react-toolbox/react-toolbox/commit/2f489eb))
+* Babel to stage 2 and remove decorators ([7c43f93](https://github.com/react-toolbox/react-toolbox/commit/7c43f93))
+* Basic transition for Playground ([962b321](https://github.com/react-toolbox/react-toolbox/commit/962b321))
+* Before deploy create a new build ([d03a43b](https://github.com/react-toolbox/react-toolbox/commit/d03a43b))
+* Better example for links ([116e2e8](https://github.com/react-toolbox/react-toolbox/commit/116e2e8))
+* Better example for links ([97ca9d6](https://github.com/react-toolbox/react-toolbox/commit/97ca9d6))
+* Better navigation example ([1bae72b](https://github.com/react-toolbox/react-toolbox/commit/1bae72b))
+* Better one paragraph 🙄 ([3e9b029](https://github.com/react-toolbox/react-toolbox/commit/3e9b029))
+* Better variables and props for button ([614b1b1](https://github.com/react-toolbox/react-toolbox/commit/614b1b1))
+* Better without subtitles ([de967c4](https://github.com/react-toolbox/react-toolbox/commit/de967c4))
+* Bootstrap pages ([e897de5](https://github.com/react-toolbox/react-toolbox/commit/e897de5))
+* Bugfix in snackbar zindex ([5d4dc92](https://github.com/react-toolbox/react-toolbox/commit/5d4dc92))
+* Bugfix with ripple in floating button ([93c2143](https://github.com/react-toolbox/react-toolbox/commit/93c2143))
+* Bugfixes ([b89c0ec](https://github.com/react-toolbox/react-toolbox/commit/b89c0ec))
+* Change copy for authors ([70f43ad](https://github.com/react-toolbox/react-toolbox/commit/70f43ad))
+* change footer in drawer navigation ([8f87be4](https://github.com/react-toolbox/react-toolbox/commit/8f87be4))
+* Changes in README ([0651a38](https://github.com/react-toolbox/react-toolbox/commit/0651a38))
+* Clever way to auto-hide <Tooltip> (full CSS) ([5e18ccb](https://github.com/react-toolbox/react-toolbox/commit/5e18ccb))
+* Complete and reorganize first approach for documentation pages ([e487001](https://github.com/react-toolbox/react-toolbox/commit/e487001))
+* Complete button docs ([6486b80](https://github.com/react-toolbox/react-toolbox/commit/6486b80))
+* Complete docs for checkbox ([3c07bb9](https://github.com/react-toolbox/react-toolbox/commit/3c07bb9))
+* Config production env in webpack for docs ([b789ed0](https://github.com/react-toolbox/react-toolbox/commit/b789ed0))
+* Control visibility with JavaScript (decoupled way for any kind of element or <Component>) ([d0c8e4a](https://github.com/react-toolbox/react-toolbox/commit/d0c8e4a))
+* Csscomb and better organization for slider ([1b73310](https://github.com/react-toolbox/react-toolbox/commit/1b73310))
+* Csscomb and better style for switch scss ([5f2b096](https://github.com/react-toolbox/react-toolbox/commit/5f2b096))
+* Csscomb for inputs ([6f9b880](https://github.com/react-toolbox/react-toolbox/commit/6f9b880))
+* Csscomb for menus ([49317ba](https://github.com/react-toolbox/react-toolbox/commit/49317ba))
+* Csscomb for ripple ([17b8a05](https://github.com/react-toolbox/react-toolbox/commit/17b8a05))
+* Disable source mapping to speed up build time ([d4f1387](https://github.com/react-toolbox/react-toolbox/commit/d4f1387))
+* Documentation for <Table/> ([806e484](https://github.com/react-toolbox/react-toolbox/commit/806e484))
+* Downgrade karma phantom launcher ([7455a89](https://github.com/react-toolbox/react-toolbox/commit/7455a89))
+* Extract some variables from drawer sass ([d2befec](https://github.com/react-toolbox/react-toolbox/commit/d2befec))
+* First approach for <Tooltip/> ([2afd343](https://github.com/react-toolbox/react-toolbox/commit/2afd343))
+* First approach of <Snackbar> ([c663178](https://github.com/react-toolbox/react-toolbox/commit/c663178))
+* First steps in landing: show authors like <Card>s ([1a3ff86](https://github.com/react-toolbox/react-toolbox/commit/1a3ff86))
+* First steps styling documentation and enhaced style for <Appbar> and <Drawer> ([d180bbe](https://github.com/react-toolbox/react-toolbox/commit/d180bbe))
+* First steps with <Snackbar/> ([edee162](https://github.com/react-toolbox/react-toolbox/commit/edee162))
+* First version of basic MD <table> ([8944335](https://github.com/react-toolbox/react-toolbox/commit/8944335))
+* fix ([2aad274](https://github.com/react-toolbox/react-toolbox/commit/2aad274))
+* Fix cname config for deploy ([2ed9376](https://github.com/react-toolbox/react-toolbox/commit/2ed9376))
+* fix css-modules composes ([e80dd0f](https://github.com/react-toolbox/react-toolbox/commit/e80dd0f))
+* fix es6 class react this bind ([7ff854f](https://github.com/react-toolbox/react-toolbox/commit/7ff854f))
+* fix for doc build ([4131094](https://github.com/react-toolbox/react-toolbox/commit/4131094))
+* fix lint ([c7ce470](https://github.com/react-toolbox/react-toolbox/commit/c7ce470))
+* fix lint ([46ee761](https://github.com/react-toolbox/react-toolbox/commit/46ee761))
+* fix lint ([b7a3e01](https://github.com/react-toolbox/react-toolbox/commit/b7a3e01))
+* Fix linter errors ([6545e2b](https://github.com/react-toolbox/react-toolbox/commit/6545e2b))
+* Fix markdown for button ([9ca68eb](https://github.com/react-toolbox/react-toolbox/commit/9ca68eb))
+* Fix MD for dialog ([7474c39](https://github.com/react-toolbox/react-toolbox/commit/7474c39))
+* Fix name for identify components ([0468c87](https://github.com/react-toolbox/react-toolbox/commit/0468c87))
+* Fix release number ([8d59c0a](https://github.com/react-toolbox/react-toolbox/commit/8d59c0a))
+* Fix some errors and change opinionated eslint ([e89d6df](https://github.com/react-toolbox/react-toolbox/commit/e89d6df))
+* Fix typo in example readme md ([b4f9f5e](https://github.com/react-toolbox/react-toolbox/commit/b4f9f5e))
+* Fix typos ([e43a6b2](https://github.com/react-toolbox/react-toolbox/commit/e43a6b2))
+* Fix url avatar for test examples 🤕 ([9e7bec0](https://github.com/react-toolbox/react-toolbox/commit/9e7bec0))
+* FIx version 0.11.2 ([af9b6a2](https://github.com/react-toolbox/react-toolbox/commit/af9b6a2))
+* FIXED eslint ([531e7e0](https://github.com/react-toolbox/react-toolbox/commit/531e7e0))
+* Fixed z-index ([93c6c47](https://github.com/react-toolbox/react-toolbox/commit/93c6c47))
+* Fixes #45 removing Object.assign and avoiding to include a polyfill ([8c682c3](https://github.com/react-toolbox/react-toolbox/commit/8c682c3)), closes [#45](https://github.com/react-toolbox/react-toolbox/issues/45)
+* Fixes #48 ([de52a1e](https://github.com/react-toolbox/react-toolbox/commit/de52a1e)), closes [#48](https://github.com/react-toolbox/react-toolbox/issues/48)
+* Fixes #52 ([b516a5a](https://github.com/react-toolbox/react-toolbox/commit/b516a5a)), closes [#52](https://github.com/react-toolbox/react-toolbox/issues/52)
+* Fixes for the slider ([31762b7](https://github.com/react-toolbox/react-toolbox/commit/31762b7))
+* Footer in <Drawer> ([07ce014](https://github.com/react-toolbox/react-toolbox/commit/07ce014))
+* highlight.js dependency ([7217208](https://github.com/react-toolbox/react-toolbox/commit/7217208))
+* Improve config, add ExtractTextPlugin and configure launch with 100 size for threadpool ([b7ba8c1](https://github.com/react-toolbox/react-toolbox/commit/b7ba8c1))
+* Improve documentation for appbar autocomplete and button ([1e662d1](https://github.com/react-toolbox/react-toolbox/commit/1e662d1))
+* Improve markdown format ([7c87940](https://github.com/react-toolbox/react-toolbox/commit/7c87940))
+* Improvements for build ([4a9d8cf](https://github.com/react-toolbox/react-toolbox/commit/4a9d8cf))
+* Improvements for the documentation markdown ([b3a98df](https://github.com/react-toolbox/react-toolbox/commit/b3a98df))
+* Include <Table> in documentation ([f626716](https://github.com/react-toolbox/react-toolbox/commit/f626716))
+* Include CNAME for react-toolbox.com ([0e0ce3b](https://github.com/react-toolbox/react-toolbox/commit/0e0ce3b))
+* Include example of readme for landing ([1e47f03](https://github.com/react-toolbox/react-toolbox/commit/1e47f03))
+* Include examples and include in bundle. ([de43b22](https://github.com/react-toolbox/react-toolbox/commit/de43b22))
+* Independent scroll for <Drawer> and <Documentation> (looks like a app) ([0e268a4](https://github.com/react-toolbox/react-toolbox/commit/0e268a4))
+* Interface for all <Components> ([2b5d687](https://github.com/react-toolbox/react-toolbox/commit/2b5d687))
+* Link all components ([14a63cf](https://github.com/react-toolbox/react-toolbox/commit/14a63cf))
+* Lint code ([24c3390](https://github.com/react-toolbox/react-toolbox/commit/24c3390))
+* Lint more files ([ce9bd76](https://github.com/react-toolbox/react-toolbox/commit/ce9bd76))
+* Little fixes and change dependencies ([936c896](https://github.com/react-toolbox/react-toolbox/commit/936c896))
+* Make darker theme primary color for docs ([7880a36](https://github.com/react-toolbox/react-toolbox/commit/7880a36))
+* Minor changes ([103c945](https://github.com/react-toolbox/react-toolbox/commit/103c945))
+* Minor changes ([02c6024](https://github.com/react-toolbox/react-toolbox/commit/02c6024))
+* Minor changes ([959169a](https://github.com/react-toolbox/react-toolbox/commit/959169a))
+* Minor changes ([d7c5dbe](https://github.com/react-toolbox/react-toolbox/commit/d7c5dbe))
+* Minor changes for playground ([ffd7fd5](https://github.com/react-toolbox/react-toolbox/commit/ffd7fd5))
+* Missing quote ([f4f3ef0](https://github.com/react-toolbox/react-toolbox/commit/f4f3ef0))
+* Missing stuff from the previos commit 😂 ([e1b9c6f](https://github.com/react-toolbox/react-toolbox/commit/e1b9c6f))
+* More easy for create a editable/selectable table. ([e5c6cba](https://github.com/react-toolbox/react-toolbox/commit/e5c6cba))
+* More refactoring for sass variables ([786dd59](https://github.com/react-toolbox/react-toolbox/commit/786dd59))
+* Move autocomplete property values to variables ([4511d8a](https://github.com/react-toolbox/react-toolbox/commit/4511d8a))
+* Move calendar inside date picker ([23bbfb9](https://github.com/react-toolbox/react-toolbox/commit/23bbfb9))
+* Move CNAME ([ff07d13](https://github.com/react-toolbox/react-toolbox/commit/ff07d13))
+* Move some checkboxes properties to file ([d109841](https://github.com/react-toolbox/react-toolbox/commit/d109841))
+* Move the rest of components important property values to variables ([0f6355a](https://github.com/react-toolbox/react-toolbox/commit/0f6355a))
+* New approach using instance methods show & hide. ([493df0e](https://github.com/react-toolbox/react-toolbox/commit/493df0e))
+* New layout and organization. 🙉 ([77ff2ac](https://github.com/react-toolbox/react-toolbox/commit/77ff2ac))
+* Normalize code font ([f03ecbc](https://github.com/react-toolbox/react-toolbox/commit/f03ecbc))
+* Now head dispatch a selected value (for select/unselect all rows) ([0f9a38a](https://github.com/react-toolbox/react-toolbox/commit/0f9a38a))
+* Now you can select all rows, or independent row. You have a new method getSelected() which gives you ([1712fc9](https://github.com/react-toolbox/react-toolbox/commit/1712fc9))
+* optimize for production ([23ccf62](https://github.com/react-toolbox/react-toolbox/commit/23ccf62))
+* Organize radio buttons and groups ([07c17b0](https://github.com/react-toolbox/react-toolbox/commit/07c17b0))
+* over className ;) (less is better) ([abf7088](https://github.com/react-toolbox/react-toolbox/commit/abf7088))
+* Prepare base file to handle theming ([ef882fc](https://github.com/react-toolbox/react-toolbox/commit/ef882fc))
+* Proper link for README npm link ([4faa261](https://github.com/react-toolbox/react-toolbox/commit/4faa261))
+* Pure dialog ([6e6c1ce](https://github.com/react-toolbox/react-toolbox/commit/6e6c1ce))
+* Pure drawer ([fa94c4e](https://github.com/react-toolbox/react-toolbox/commit/fa94c4e))
+* README initial version ([926cf95](https://github.com/react-toolbox/react-toolbox/commit/926cf95))
+* Refactor documentation styles ([a1c0e77](https://github.com/react-toolbox/react-toolbox/commit/a1c0e77))
+* Remove 'active' property (it's a state) ([019ed57](https://github.com/react-toolbox/react-toolbox/commit/019ed57))
+* Remove dataSource state from autocomplete ([3b48501](https://github.com/react-toolbox/react-toolbox/commit/3b48501))
+* Remove flex data attributes from components ([0abc1e1](https://github.com/react-toolbox/react-toolbox/commit/0abc1e1))
+* Remove form from the docs ([00e09ce](https://github.com/react-toolbox/react-toolbox/commit/00e09ce))
+* remove local phantomjs ([de26a0f](https://github.com/react-toolbox/react-toolbox/commit/de26a0f))
+* Remove unneeded css variables ([da2c85c](https://github.com/react-toolbox/react-toolbox/commit/da2c85c))
+* Rename component doc to readme.md ([2423d09](https://github.com/react-toolbox/react-toolbox/commit/2423d09))
+* Reorder project ([0aca8fe](https://github.com/react-toolbox/react-toolbox/commit/0aca8fe))
+* Reorder properties for datepicker ([8fc11d3](https://github.com/react-toolbox/react-toolbox/commit/8fc11d3))
+* Reorder styles for list and dialog ([0dcd382](https://github.com/react-toolbox/react-toolbox/commit/0dcd382))
+* Reorder styles for tabs ([f5155f8](https://github.com/react-toolbox/react-toolbox/commit/f5155f8))
+* Resolve linter errors ([ec6e72b](https://github.com/react-toolbox/react-toolbox/commit/ec6e72b))
+* Restructure docs index ([19a4990](https://github.com/react-toolbox/react-toolbox/commit/19a4990))
+* Select/Unselect all rows ([8894081](https://github.com/react-toolbox/react-toolbox/commit/8894081))
+* separate generate changelog in two steps ([a06d45f](https://github.com/react-toolbox/react-toolbox/commit/a06d45f))
+* Set threadpool size in server.js ([bec58a3](https://github.com/react-toolbox/react-toolbox/commit/bec58a3))
+* set UV_THREADPOOL_SIZE=100 ([9824ebc](https://github.com/react-toolbox/react-toolbox/commit/9824ebc))
+* Setup new file structure for sass files ([33a508c](https://github.com/react-toolbox/react-toolbox/commit/33a508c))
+* Show tooltip is in a mixin (for reuse in another components)... it's necessary be a stateless behavi ([68055ca](https://github.com/react-toolbox/react-toolbox/commit/68055ca))
+* Social link from Authors and fixed github buttons ([a6157e0](https://github.com/react-toolbox/react-toolbox/commit/a6157e0))
+* Some changes to home ([a73e4ff](https://github.com/react-toolbox/react-toolbox/commit/a73e4ff))
+* Some fixes and include extract text webpack plugin ([be1bde6](https://github.com/react-toolbox/react-toolbox/commit/be1bde6))
+* Style for components demo ([0a6bd9c](https://github.com/react-toolbox/react-toolbox/commit/0a6bd9c))
+* Styles much better ([5c1489a](https://github.com/react-toolbox/react-toolbox/commit/5c1489a))
+* Switch between drawer of components and drawer of playground ([d210ae8](https://github.com/react-toolbox/react-toolbox/commit/d210ae8))
+* Take build out of deploy command ([1547bd6](https://github.com/react-toolbox/react-toolbox/commit/1547bd6))
+* Temporary disable tests for slider ☹️ ([5ea1484](https://github.com/react-toolbox/react-toolbox/commit/5ea1484))
+* Update config to add CNAME to docs ([76ee1d8](https://github.com/react-toolbox/react-toolbox/commit/76ee1d8))
+* Update configuration section in readme ([32c4910](https://github.com/react-toolbox/react-toolbox/commit/32c4910))
+* Update package json ([20dbcd6](https://github.com/react-toolbox/react-toolbox/commit/20dbcd6))
+* Update package json ([48c2f0d](https://github.com/react-toolbox/react-toolbox/commit/48c2f0d))
+* Update phantomjs launcher ([f042376](https://github.com/react-toolbox/react-toolbox/commit/f042376))
+* update readme ([92b6f34](https://github.com/react-toolbox/react-toolbox/commit/92b6f34))
+* Update README.md ([9903cb9](https://github.com/react-toolbox/react-toolbox/commit/9903cb9))
+* Update server config for documentation ([9fc08b6](https://github.com/react-toolbox/react-toolbox/commit/9fc08b6))
+* Update travis node to 4.2.1 ([fbbb123](https://github.com/react-toolbox/react-toolbox/commit/fbbb123))
+* update webpack dev, test and build & update eslint rule ([4fb976a](https://github.com/react-toolbox/react-toolbox/commit/4fb976a))
+* Updates ([98cdadb](https://github.com/react-toolbox/react-toolbox/commit/98cdadb))
+* Updates ([c56dc4c](https://github.com/react-toolbox/react-toolbox/commit/c56dc4c))
+* Updates ([dbf0fea](https://github.com/react-toolbox/react-toolbox/commit/dbf0fea))
+* Updates ([6a06774](https://github.com/react-toolbox/react-toolbox/commit/6a06774))
+* Updates ([77cffe6](https://github.com/react-toolbox/react-toolbox/commit/77cffe6))
+* Updates ([521ed03](https://github.com/react-toolbox/react-toolbox/commit/521ed03))
+* Use 'monokai' theme for <Editor> ([ec500a5](https://github.com/react-toolbox/react-toolbox/commit/ec500a5))
+* use autobind-decorator ([6c278f2](https://github.com/react-toolbox/react-toolbox/commit/6c278f2))
+* Use correct theme colors ([153b880](https://github.com/react-toolbox/react-toolbox/commit/153b880))
+* use es6 classes & remove react-addons-pure-render-mixin ([9ad9f35](https://github.com/react-toolbox/react-toolbox/commit/9ad9f35))
+* use react-transform ([4f94682](https://github.com/react-toolbox/react-toolbox/commit/4f94682))
+* Use static avatars ([1dbf7fa](https://github.com/react-toolbox/react-toolbox/commit/1dbf7fa))
+* Bugfix: read input DOM reference with ReactDOM in autocomplete ([8e5150c](https://github.com/react-toolbox/react-toolbox/commit/8e5150c))
+
+
+
+<a name="0.10.20"></a>
+## 0.10.20 (2015-10-20)
+
+* <Card/> finished ([a9f09f6](https://github.com/react-toolbox/react-toolbox/commit/a9f09f6))
+* <Dialog> using SaSS ([ffe3a7b](https://github.com/react-toolbox/react-toolbox/commit/ffe3a7b))
+* <Form/> can save in localstorage ([248581e](https://github.com/react-toolbox/react-toolbox/commit/248581e))
+* <newbie>forget that now I need semi-colon</newbie> ([7cfe100](https://github.com/react-toolbox/react-toolbox/commit/7cfe100))
+* <Tabs> and <Tab> finished ([6b5259d](https://github.com/react-toolbox/react-toolbox/commit/6b5259d))
+* Adapt card to new ripple ([aa4cbd7](https://github.com/react-toolbox/react-toolbox/commit/aa4cbd7))
+* Add a classname attribute and refactor progress bar ([e58acd1](https://github.com/react-toolbox/react-toolbox/commit/e58acd1))
+* Add a prefixer module to set inline prefixed properties ([5954010](https://github.com/react-toolbox/react-toolbox/commit/5954010))
+* Add an install of phantom2 before install hook on travis ([69d0358](https://github.com/react-toolbox/react-toolbox/commit/69d0358))
+* Add autoprefixer local css config. Add most local css to slider ([275bf7c](https://github.com/react-toolbox/react-toolbox/commit/275bf7c))
+* Add basic list component ([bb6b631](https://github.com/react-toolbox/react-toolbox/commit/bb6b631))
+* Add behavior to select the hour ([9ade334](https://github.com/react-toolbox/react-toolbox/commit/9ade334))
+* Add calendar component ([8a967f1](https://github.com/react-toolbox/react-toolbox/commit/8a967f1))
+* Add checkbox component ([8726557](https://github.com/react-toolbox/react-toolbox/commit/8726557))
+* Add circular progress bar ([2e811f3](https://github.com/react-toolbox/react-toolbox/commit/2e811f3))
+* Add composes exception for scss linter ([1eb220d](https://github.com/react-toolbox/react-toolbox/commit/1eb220d))
+* Add current spec files ([81150bc](https://github.com/react-toolbox/react-toolbox/commit/81150bc))
+* Add cursor pointer for clock face and disable text selection ([9585b35](https://github.com/react-toolbox/react-toolbox/commit/9585b35))
+* Add date picker ([d709093](https://github.com/react-toolbox/react-toolbox/commit/d709093))
+* Add date picker initial version ([8f2734d](https://github.com/react-toolbox/react-toolbox/commit/8f2734d))
+* Add date utils ([1c1f498](https://github.com/react-toolbox/react-toolbox/commit/1c1f498))
+* Add date-time module in es6 ([88dc8f6](https://github.com/react-toolbox/react-toolbox/commit/88dc8f6))
+* Add displaName for all components used in timepicker ([ad359aa](https://github.com/react-toolbox/react-toolbox/commit/ad359aa))
+* Add documentation and fixes for date picker ([8880287](https://github.com/react-toolbox/react-toolbox/commit/8880287))
+* Add documentation for progress bar ([45cae5c](https://github.com/react-toolbox/react-toolbox/commit/45cae5c))
+* Add documentation for time picker ([bdf798d](https://github.com/react-toolbox/react-toolbox/commit/bdf798d))
+* Add ES6 prefixer ([7170dd8](https://github.com/react-toolbox/react-toolbox/commit/7170dd8))
+* Add ES6 support end eslint config files ([801bcd4](https://github.com/react-toolbox/react-toolbox/commit/801bcd4))
+* Add first version of ES6 autocomplete ([f2ad55b](https://github.com/react-toolbox/react-toolbox/commit/f2ad55b))
+* Add focus for buttons ([a48e735](https://github.com/react-toolbox/react-toolbox/commit/a48e735))
+* Add generic helper utils ([ae47335](https://github.com/react-toolbox/react-toolbox/commit/ae47335))
+* Add IconMenu component ([c96e218](https://github.com/react-toolbox/react-toolbox/commit/c96e218))
+* Add linear progress bar ([4c68f6b](https://github.com/react-toolbox/react-toolbox/commit/4c68f6b))
+* Add mixins for typography ([366f81d](https://github.com/react-toolbox/react-toolbox/commit/366f81d))
+* Add new switch migrated to sass ([097242b](https://github.com/react-toolbox/react-toolbox/commit/097242b))
+* Add onClick to font icon ([2978dec](https://github.com/react-toolbox/react-toolbox/commit/2978dec))
+* Add phantomjs polyfill ([a0bf311](https://github.com/react-toolbox/react-toolbox/commit/a0bf311))
+* Add pickers test files ([ae525cb](https://github.com/react-toolbox/react-toolbox/commit/ae525cb))
+* Add pure render mixin to calendar ([5d75f4a](https://github.com/react-toolbox/react-toolbox/commit/5d75f4a))
+* Add pure render mixin to date picker ([1a7b6d1](https://github.com/react-toolbox/react-toolbox/commit/1a7b6d1))
+* Add radio button component ([07d182a](https://github.com/react-toolbox/react-toolbox/commit/07d182a))
+* Add radio button component and improvements for radio and checkbox ([91cdb51](https://github.com/react-toolbox/react-toolbox/commit/91cdb51))
+* Add React hot loader ([b206ab7](https://github.com/react-toolbox/react-toolbox/commit/b206ab7))
+* Add react plugin to eslinter ([8b0a91f](https://github.com/react-toolbox/react-toolbox/commit/8b0a91f))
+* Add script to package.json to run test with watch and set default to single run ([42e9863](https://github.com/react-toolbox/react-toolbox/commit/42e9863))
+* Add slider documentation ([2b943eb](https://github.com/react-toolbox/react-toolbox/commit/2b943eb))
+* Add slider initial version ([2b3cc84](https://github.com/react-toolbox/react-toolbox/commit/2b3cc84))
+* Add slider spec ([a6223ad](https://github.com/react-toolbox/react-toolbox/commit/a6223ad))
+* Add slider test component ([ad1ae54](https://github.com/react-toolbox/react-toolbox/commit/ad1ae54))
+* Add slider to spec index ([89fcc9a](https://github.com/react-toolbox/react-toolbox/commit/89fcc9a))
+* Add some examples for slider and little improvements ([341425b](https://github.com/react-toolbox/react-toolbox/commit/341425b))
+* Add some todos for input and autocomplete ([5167b35](https://github.com/react-toolbox/react-toolbox/commit/5167b35))
+* Add spec with usage of progress bar component ([abc19e1](https://github.com/react-toolbox/react-toolbox/commit/abc19e1))
+* Add support for ES6 JSX modules ([7aa068a](https://github.com/react-toolbox/react-toolbox/commit/7aa068a))
+* Add test helper to render into document ([8c50245](https://github.com/react-toolbox/react-toolbox/commit/8c50245))
+* Add test utils ES6 ([908712c](https://github.com/react-toolbox/react-toolbox/commit/908712c))
+* Add time picker first implementation ([5625a47](https://github.com/react-toolbox/react-toolbox/commit/5625a47))
+* Add title to date picker test component ([b473004](https://github.com/react-toolbox/react-toolbox/commit/b473004))
+* Add Travis CI config file ([3f39538](https://github.com/react-toolbox/react-toolbox/commit/3f39538))
+* Added commons (font-face, and normalize) ([c176289](https://github.com/react-toolbox/react-toolbox/commit/c176289))
+* Added components ([32daeef](https://github.com/react-toolbox/react-toolbox/commit/32daeef))
+* Added new package ([f9f2ec7](https://github.com/react-toolbox/react-toolbox/commit/f9f2ec7))
+* Added new references of components ([45560ba](https://github.com/react-toolbox/react-toolbox/commit/45560ba))
+* Adjust time picker spacing ([5051057](https://github.com/react-toolbox/react-toolbox/commit/5051057))
+* Ajust snap color ([873c980](https://github.com/react-toolbox/react-toolbox/commit/873c980))
+* All <Form> components need get/set value methods. ([b22d3be](https://github.com/react-toolbox/react-toolbox/commit/b22d3be))
+* Aside ([3d68797](https://github.com/react-toolbox/react-toolbox/commit/3d68797))
+* Autocomplete ([d9774f5](https://github.com/react-toolbox/react-toolbox/commit/d9774f5))
+* Available <Switch> in <Form/> component. ([e787c74](https://github.com/react-toolbox/react-toolbox/commit/e787c74))
+* Avoid state in clock hand ([a89f75a](https://github.com/react-toolbox/react-toolbox/commit/a89f75a))
+* Basic <Dropdown/> ([b78a7b0](https://github.com/react-toolbox/react-toolbox/commit/b78a7b0))
+* Basic documentation for all components ([e68e871](https://github.com/react-toolbox/react-toolbox/commit/e68e871))
+* Basic input using material design ([704a527](https://github.com/react-toolbox/react-toolbox/commit/704a527))
+* Better indentation for progress bar doc md ([73ed889](https://github.com/react-toolbox/react-toolbox/commit/73ed889))
+* Better style for disabled checked radio button ([b36230c](https://github.com/react-toolbox/react-toolbox/commit/b36230c))
+* Better style for lists ([5aacd7c](https://github.com/react-toolbox/react-toolbox/commit/5aacd7c))
+* Better transition between values and selected value ([dfa754f](https://github.com/react-toolbox/react-toolbox/commit/dfa754f))
+* Bugfix importing utils in calendar ([f5d1651](https://github.com/react-toolbox/react-toolbox/commit/f5d1651))
+* Bugfix in clock hand ([d6c82aa](https://github.com/react-toolbox/react-toolbox/commit/d6c82aa))
+* Calendar refactoring ([18a51d8](https://github.com/react-toolbox/react-toolbox/commit/18a51d8))
+* Call init ([302d21e](https://github.com/react-toolbox/react-toolbox/commit/302d21e))
+* Card ([f7a3079](https://github.com/react-toolbox/react-toolbox/commit/f7a3079))
+* Change webpack process ([c111030](https://github.com/react-toolbox/react-toolbox/commit/c111030))
+* Changes for spec demo ([c833dd7](https://github.com/react-toolbox/react-toolbox/commit/c833dd7))
+* Changes on spec ([96c4c5f](https://github.com/react-toolbox/react-toolbox/commit/96c4c5f))
+* Classes for different states ([d99c275](https://github.com/react-toolbox/react-toolbox/commit/d99c275))
+* Configure webpack dev server to accept connections from mobile ([40948c2](https://github.com/react-toolbox/react-toolbox/commit/40948c2))
+* Consolidate keys and values with proptype.any ([d227181](https://github.com/react-toolbox/react-toolbox/commit/d227181))
+* Consolidate properties ([5775ab4](https://github.com/react-toolbox/react-toolbox/commit/5775ab4))
+* Convert .stylus to .scss ([cdd79bd](https://github.com/react-toolbox/react-toolbox/commit/cdd79bd))
+* Create CSS not react-inline ([1571653](https://github.com/react-toolbox/react-toolbox/commit/1571653))
+* Delete coffeescript prefixer ([dc79b20](https://github.com/react-toolbox/react-toolbox/commit/dc79b20))
+* Delete console log type ([14e1f85](https://github.com/react-toolbox/react-toolbox/commit/14e1f85))
+* Delete empty folder ([6a64570](https://github.com/react-toolbox/react-toolbox/commit/6a64570))
+* Determine correct origin of <Ripple/> ([0f5a58c](https://github.com/react-toolbox/react-toolbox/commit/0f5a58c))
+* Determine type of fieldset ([92bd5ca](https://github.com/react-toolbox/react-toolbox/commit/92bd5ca))
+* Dialog ([d991efc](https://github.com/react-toolbox/react-toolbox/commit/d991efc))
+* Disable linting of parameter reassignation ([5a451ac](https://github.com/react-toolbox/react-toolbox/commit/5a451ac))
+* Disable warning for underscore in variables in ESLint ([fea1ef2](https://github.com/react-toolbox/react-toolbox/commit/fea1ef2))
+* DisplayName property ([f4618ae](https://github.com/react-toolbox/react-toolbox/commit/f4618ae))
+* Documentation ([afda33d](https://github.com/react-toolbox/react-toolbox/commit/afda33d))
+* Documentation for <Aside/> and <Autocomplete/> ([1c71559](https://github.com/react-toolbox/react-toolbox/commit/1c71559))
+* Documentation for <Dropdown/> and onChange callback ([f3ce007](https://github.com/react-toolbox/react-toolbox/commit/f3ce007))
+* Documents for <Aside/> and <Input/> ([ca823ec](https://github.com/react-toolbox/react-toolbox/commit/ca823ec))
+* Dropdown ([e704e36](https://github.com/react-toolbox/react-toolbox/commit/e704e36))
+* Dropdown SaSS ([39f4d54](https://github.com/react-toolbox/react-toolbox/commit/39f4d54))
+* Emulate css config in karma tests ([0bbd413](https://github.com/react-toolbox/react-toolbox/commit/0bbd413))
+* Enhaced <Form/> and <Input/> ([fa7d199](https://github.com/react-toolbox/react-toolbox/commit/fa7d199))
+* Enhaced component ([c33e199](https://github.com/react-toolbox/react-toolbox/commit/c33e199))
+* Example ([d3c3124](https://github.com/react-toolbox/react-toolbox/commit/d3c3124))
+* Example of header and list ([f70fed4](https://github.com/react-toolbox/react-toolbox/commit/f70fed4))
+* Example of input form ([0389469](https://github.com/react-toolbox/react-toolbox/commit/0389469))
+* Example using <FontIcon> ([12e18a7](https://github.com/react-toolbox/react-toolbox/commit/12e18a7))
+* Explain for different ways for get dependencies. ([f35d48c](https://github.com/react-toolbox/react-toolbox/commit/f35d48c))
+* Expose handleresize ([6232166](https://github.com/react-toolbox/react-toolbox/commit/6232166))
+* Extends method .loading ([2fe50e3](https://github.com/react-toolbox/react-toolbox/commit/2fe50e3))
+* Extract ripple loading animation to a mixin ([b05b041](https://github.com/react-toolbox/react-toolbox/commit/b05b041))
+* Final version of Package.json ([147b2a0](https://github.com/react-toolbox/react-toolbox/commit/147b2a0))
+* Final workflow with webpack ([2198f1a](https://github.com/react-toolbox/react-toolbox/commit/2198f1a))
+* Finish components ES6 Rewrite ([3c05ab4](https://github.com/react-toolbox/react-toolbox/commit/3c05ab4))
+* Finish slider jsx and add ids to style subNodes in progress bar ([ad1f0c3](https://github.com/react-toolbox/react-toolbox/commit/ad1f0c3))
+* Finish styles for slider ([91dd948](https://github.com/react-toolbox/react-toolbox/commit/91dd948))
+* Finish testing for slider and progressbar and add sinon ([0cc3016](https://github.com/react-toolbox/react-toolbox/commit/0cc3016))
+* Finish tests for progress bar ([3af452f](https://github.com/react-toolbox/react-toolbox/commit/3af452f))
+* First example using new component <Aside/> ([a326d57](https://github.com/react-toolbox/react-toolbox/commit/a326d57))
+* First example using the package ([b6d2501](https://github.com/react-toolbox/react-toolbox/commit/b6d2501))
+* First example with webpack ([41530d5](https://github.com/react-toolbox/react-toolbox/commit/41530d5))
+* First examples with <Aside/>, <Autocomplete/>, <Button/> and <Dialog/> ([3592794](https://github.com/react-toolbox/react-toolbox/commit/3592794))
+* First spec ([5cc0982](https://github.com/react-toolbox/react-toolbox/commit/5cc0982))
+* First use of React ([433355b](https://github.com/react-toolbox/react-toolbox/commit/433355b))
+* First version of <Autocomplete /> ([1129759](https://github.com/react-toolbox/react-toolbox/commit/1129759))
+* First version of <Card/> ([ea89a8e](https://github.com/react-toolbox/react-toolbox/commit/ea89a8e))
+* First version of <Tags/> ([163f57e](https://github.com/react-toolbox/react-toolbox/commit/163f57e))
+* Fix error in documentation ([69a2d16](https://github.com/react-toolbox/react-toolbox/commit/69a2d16))
+* Fix errors when you have a value in a non-exact autocomplete ([720083d](https://github.com/react-toolbox/react-toolbox/commit/720083d))
+* Fix linter errors in input scss ([4e73906](https://github.com/react-toolbox/react-toolbox/commit/4e73906))
+* Fix little typo in page title ([fe073ee](https://github.com/react-toolbox/react-toolbox/commit/fe073ee))
+* Fix test dependencies ([489b996](https://github.com/react-toolbox/react-toolbox/commit/489b996))
+* Fix tests ([c5adb53](https://github.com/react-toolbox/react-toolbox/commit/c5adb53))
+* Fix webpack version ([a9f29d4](https://github.com/react-toolbox/react-toolbox/commit/a9f29d4))
+* Fix width transition ([aaa35a3](https://github.com/react-toolbox/react-toolbox/commit/aaa35a3))
+* Fixed @import ([1521434](https://github.com/react-toolbox/react-toolbox/commit/1521434))
+* Fixed callback onChange ([6942b54](https://github.com/react-toolbox/react-toolbox/commit/6942b54))
+* fixed error ([b77b525](https://github.com/react-toolbox/react-toolbox/commit/b77b525))
+* Fixed error: @state.value does not work with multiline=true ([9fc0199](https://github.com/react-toolbox/react-toolbox/commit/9fc0199))
+* Fixed errors in colors ([7241505](https://github.com/react-toolbox/react-toolbox/commit/7241505))
+* Fixed errors in stylesheets ([24861e5](https://github.com/react-toolbox/react-toolbox/commit/24861e5))
+* Fixed typo ([bc93348](https://github.com/react-toolbox/react-toolbox/commit/bc93348))
+* Fixed typo ([9d31e56](https://github.com/react-toolbox/react-toolbox/commit/9d31e56))
+* Fixed typo ([75e664c](https://github.com/react-toolbox/react-toolbox/commit/75e664c))
+* Fixed typo "suggestions" ([7eb81fb](https://github.com/react-toolbox/react-toolbox/commit/7eb81fb))
+* Fixes in react proptypes for some components ([763ed46](https://github.com/react-toolbox/react-toolbox/commit/763ed46))
+* Fixes in time picker ([b135121](https://github.com/react-toolbox/react-toolbox/commit/b135121))
+* form ([184badd](https://github.com/react-toolbox/react-toolbox/commit/184badd))
+* Get width of <Button/> for create a perfect size <Ripple/> ([d75cfd0](https://github.com/react-toolbox/react-toolbox/commit/d75cfd0))
+* Handle no values ([70418aa](https://github.com/react-toolbox/react-toolbox/commit/70418aa))
+* Handler @onClick ([bd644b5](https://github.com/react-toolbox/react-toolbox/commit/bd644b5))
+* Hide overflow in Dropdown component ([5b071de](https://github.com/react-toolbox/react-toolbox/commit/5b071de))
+* icon ([498dc75](https://github.com/react-toolbox/react-toolbox/commit/498dc75))
+* Icon ([7033425](https://github.com/react-toolbox/react-toolbox/commit/7033425))
+* Importing css in <style> ([1582fb6](https://github.com/react-toolbox/react-toolbox/commit/1582fb6))
+* Improve aside performance on show ([c4779ca](https://github.com/react-toolbox/react-toolbox/commit/c4779ca))
+* Improve card handler ([2da6794](https://github.com/react-toolbox/react-toolbox/commit/2da6794))
+* Improve checkbox styles ([5f490ed](https://github.com/react-toolbox/react-toolbox/commit/5f490ed))
+* Improve clock adding two levels ([0f71b32](https://github.com/react-toolbox/react-toolbox/commit/0f71b32))
+* Improve clock styles and behavior ([45a26ea](https://github.com/react-toolbox/react-toolbox/commit/45a26ea))
+* Improve clock with real hour, callbacks and better styles ([419d8b2](https://github.com/react-toolbox/react-toolbox/commit/419d8b2))
+* Improve examples ([a39dbcb](https://github.com/react-toolbox/react-toolbox/commit/a39dbcb))
+* Improve menu component adding showable behavior and auto positioning for opening ([14e2c95](https://github.com/react-toolbox/react-toolbox/commit/14e2c95))
+* Improve minimal tests for slider ([3e40960](https://github.com/react-toolbox/react-toolbox/commit/3e40960))
+* Improve performance for pickers calling onChange just when needed ([1839f83](https://github.com/react-toolbox/react-toolbox/commit/1839f83))
+* Improve props and state names in clock index ([6be986c](https://github.com/react-toolbox/react-toolbox/commit/6be986c))
+* Improved <Autocomplete/> using a new property "color" ([bbefc80](https://github.com/react-toolbox/react-toolbox/commit/bbefc80))
+* Improved <Dropdown> now supports JSX templates. ([e786052](https://github.com/react-toolbox/react-toolbox/commit/e786052))
+* Improved <Input/> ([4217e52](https://github.com/react-toolbox/react-toolbox/commit/4217e52))
+* Improved height for dataSource container & fixed typos. ([dd9d3e2](https://github.com/react-toolbox/react-toolbox/commit/dd9d3e2))
+* Improved localCSS for array ([b35e34e](https://github.com/react-toolbox/react-toolbox/commit/b35e34e))
+* Improvements in calendar component ([a6a52ea](https://github.com/react-toolbox/react-toolbox/commit/a6a52ea))
+* Improving autocomplete with object values (now you can set with [] or {key: value...} ([7d2e6f4](https://github.com/react-toolbox/react-toolbox/commit/7d2e6f4))
+* Improving UX ([19a04a6](https://github.com/react-toolbox/react-toolbox/commit/19a04a6))
+* Include webpack-dev-server ([410fe22](https://github.com/react-toolbox/react-toolbox/commit/410fe22))
+* Included <Checkbox> Example ([7fa57ba](https://github.com/react-toolbox/react-toolbox/commit/7fa57ba))
+* Initial commit ([b2f48b8](https://github.com/react-toolbox/react-toolbox/commit/b2f48b8))
+* Input ([d7c3d1f](https://github.com/react-toolbox/react-toolbox/commit/d7c3d1f))
+* Less specific selectores for dialog component ([fcbe81e](https://github.com/react-toolbox/react-toolbox/commit/fcbe81e))
+* list ([ca53e73](https://github.com/react-toolbox/react-toolbox/commit/ca53e73))
+* Little fixes for safari in checkbox ([16070cc](https://github.com/react-toolbox/react-toolbox/commit/16070cc))
+* Little fixes in slider and new approach to local css ([0c36b10](https://github.com/react-toolbox/react-toolbox/commit/0c36b10))
+* Little fixes in slider and remove explicit react dependency from it ([e01babc](https://github.com/react-toolbox/react-toolbox/commit/e01babc))
+* Little improvements in checkbox component ([fedb8f1](https://github.com/react-toolbox/react-toolbox/commit/fedb8f1))
+* Make clock able to change start move clicking on face ([0f8f7e8](https://github.com/react-toolbox/react-toolbox/commit/0f8f7e8))
+* Make the clock touch friendly ([af51771](https://github.com/react-toolbox/react-toolbox/commit/af51771))
+* Merge ([258260d](https://github.com/react-toolbox/react-toolbox/commit/258260d))
+* Migrate <Form> to sass ([e134971](https://github.com/react-toolbox/react-toolbox/commit/e134971))
+* Migrate button, ripple and font icon styles to sass and add sass tooling ([353bcea](https://github.com/react-toolbox/react-toolbox/commit/353bcea))
+* Migrate calendar to ES6 ([a5586f4](https://github.com/react-toolbox/react-toolbox/commit/a5586f4))
+* Migrate components index to es6 ([a4c59e4](https://github.com/react-toolbox/react-toolbox/commit/a4c59e4))
+* Migrate drawer styles to sass and improve button ([949db01](https://github.com/react-toolbox/react-toolbox/commit/949db01))
+* Migrate input to SCSS ([e8bab3d](https://github.com/react-toolbox/react-toolbox/commit/e8bab3d))
+* Migrate link to sass ([126fdb4](https://github.com/react-toolbox/react-toolbox/commit/126fdb4))
+* Migrate list to sass ([a866b7a](https://github.com/react-toolbox/react-toolbox/commit/a866b7a))
+* Migrate navigation styles ([46ce8ce](https://github.com/react-toolbox/react-toolbox/commit/46ce8ce))
+* Migrate progress bars to es6 ([74907a4](https://github.com/react-toolbox/react-toolbox/commit/74907a4))
+* Migrate progressbar and slider to sass ([dd864dc](https://github.com/react-toolbox/react-toolbox/commit/dd864dc))
+* Migrate progressbar to sass ([83cf581](https://github.com/react-toolbox/react-toolbox/commit/83cf581))
+* Migrate slider imports to ES6 imports ([85c7a83](https://github.com/react-toolbox/react-toolbox/commit/85c7a83))
+* Migrate style to sass for autocomplete ([74cc059](https://github.com/react-toolbox/react-toolbox/commit/74cc059))
+* Migrate tabs to sass ([f4f537b](https://github.com/react-toolbox/react-toolbox/commit/f4f537b))
+* Migrate time picker to sass ([06f1b86](https://github.com/react-toolbox/react-toolbox/commit/06f1b86))
+* Migrate time picker to use es6 helpers ([d1ad367](https://github.com/react-toolbox/react-toolbox/commit/d1ad367))
+* Migrate to React 0.14 and migrate date picker to sass ([c9b6f12](https://github.com/react-toolbox/react-toolbox/commit/c9b6f12))
+* Minimal changes ([2114955](https://github.com/react-toolbox/react-toolbox/commit/2114955))
+* Minimal changes ([1cc22ce](https://github.com/react-toolbox/react-toolbox/commit/1cc22ce))
+* Minimal changes ([6ad3197](https://github.com/react-toolbox/react-toolbox/commit/6ad3197))
+* MInimal changes ([d7050e4](https://github.com/react-toolbox/react-toolbox/commit/d7050e4))
+* Modify timepicker sizing ([b3ec693](https://github.com/react-toolbox/react-toolbox/commit/b3ec693))
+* More specific style for autocomplete ([bf6b53a](https://github.com/react-toolbox/react-toolbox/commit/bf6b53a))
+* Move button style to local css ([606a836](https://github.com/react-toolbox/react-toolbox/commit/606a836))
+* Move date picker to ES6 ([0960527](https://github.com/react-toolbox/react-toolbox/commit/0960527))
+* Move dialog classnames to the container ([a8c5de0](https://github.com/react-toolbox/react-toolbox/commit/a8c5de0))
+* Move time picker dialog to ES6 ([8cb2aa2](https://github.com/react-toolbox/react-toolbox/commit/8cb2aa2))
+* Move to degrees ([e0f1d57](https://github.com/react-toolbox/react-toolbox/commit/e0f1d57))
+* Multilevel serialize ([b831826](https://github.com/react-toolbox/react-toolbox/commit/b831826))
+* Multiple entry points ([083375c](https://github.com/react-toolbox/react-toolbox/commit/083375c))
+* Name input and dialog components ([334e4d0](https://github.com/react-toolbox/react-toolbox/commit/334e4d0))
+* Navigation ([7c9ef1e](https://github.com/react-toolbox/react-toolbox/commit/7c9ef1e))
+* new component <Dialog/> ([022c282](https://github.com/react-toolbox/react-toolbox/commit/022c282))
+* New component <Fieldset> ([9f303b5](https://github.com/react-toolbox/react-toolbox/commit/9f303b5))
+* New component <Menu> (basic visualization) ([dace527](https://github.com/react-toolbox/react-toolbox/commit/dace527))
+* New component <Navigation/> ([f226555](https://github.com/react-toolbox/react-toolbox/commit/f226555))
+* New components <Loading />, <Link />, <List /> ([b8a2fb8](https://github.com/react-toolbox/react-toolbox/commit/b8a2fb8))
+* New method and property "loading" ([91ee458](https://github.com/react-toolbox/react-toolbox/commit/91ee458))
+* New methods .blur and .focus ([5464fc5](https://github.com/react-toolbox/react-toolbox/commit/5464fc5))
+* New property 'icon' ([d516ff2](https://github.com/react-toolbox/react-toolbox/commit/d516ff2))
+* New property "count" ([f40ace6](https://github.com/react-toolbox/react-toolbox/commit/f40ace6))
+* New property "disabled" and refactor constants colors ([7fdbc0a](https://github.com/react-toolbox/react-toolbox/commit/7fdbc0a))
+* New property "label" ([a5388c5](https://github.com/react-toolbox/react-toolbox/commit/a5388c5))
+* New style for children HTML element small ([e880890](https://github.com/react-toolbox/react-toolbox/commit/e880890))
+* New types "image" "event" ([9a5b466](https://github.com/react-toolbox/react-toolbox/commit/9a5b466))
+* Normalize spec ([b038f70](https://github.com/react-toolbox/react-toolbox/commit/b038f70))
+* Now supports <Checkbox>, <DatePicker> <RadioGroup>, <Slider> and <TimePicker> ([a951f00](https://github.com/react-toolbox/react-toolbox/commit/a951f00))
+* Now when select a option dispatch a <Ripple/> and use component in <Form/> ([b99c174](https://github.com/react-toolbox/react-toolbox/commit/b99c174))
+* Optimized storage when <Form/> is overwritted with new properties ([b45f0c0](https://github.com/react-toolbox/react-toolbox/commit/b45f0c0))
+* Pointer in active tab ([6b44db7](https://github.com/react-toolbox/react-toolbox/commit/6b44db7))
+* Port aside to ES6 ([b5e666a](https://github.com/react-toolbox/react-toolbox/commit/b5e666a))
+* Port autocomplete to ES6 and bugfixes ([6aca3d6](https://github.com/react-toolbox/react-toolbox/commit/6aca3d6))
+* Port slider to ES6 ([0c48f3d](https://github.com/react-toolbox/react-toolbox/commit/0c48f3d))
+* Port timepicker index to ES6 ([15d8f47](https://github.com/react-toolbox/react-toolbox/commit/15d8f47))
+* Port to ES6 import all pickers files ([3de7e8e](https://github.com/react-toolbox/react-toolbox/commit/3de7e8e))
+* Proper buttons name for spec drawer ([75bb522](https://github.com/react-toolbox/react-toolbox/commit/75bb522))
+* Put pickers together in test component ([57b74da](https://github.com/react-toolbox/react-toolbox/commit/57b74da))
+* React-Toolbox is the final name. ([1705e56](https://github.com/react-toolbox/react-toolbox/commit/1705e56))
+* Reduce clock container spacing ([9aeebc8](https://github.com/react-toolbox/react-toolbox/commit/9aeebc8))
+* Refactor <Card/> and SaSS ([dbd6f5b](https://github.com/react-toolbox/react-toolbox/commit/dbd6f5b))
+* Refactor autocomplete ([736fce8](https://github.com/react-toolbox/react-toolbox/commit/736fce8))
+* Refactor clock ([16ac6b2](https://github.com/react-toolbox/react-toolbox/commit/16ac6b2))
+* Refactor date picker dialog to sass ([2cb5d24](https://github.com/react-toolbox/react-toolbox/commit/2cb5d24))
+* Refactor hours and minutes ([cbcd661](https://github.com/react-toolbox/react-toolbox/commit/cbcd661))
+* Refactor name ([8694c81](https://github.com/react-toolbox/react-toolbox/commit/8694c81))
+* Refactor progressbar test ([7151545](https://github.com/react-toolbox/react-toolbox/commit/7151545))
+* Refactor progressbar to use local css ([083b32f](https://github.com/react-toolbox/react-toolbox/commit/083b32f))
+* Refactor slider ([c911350](https://github.com/react-toolbox/react-toolbox/commit/c911350))
+* Refactor timepicker and utils organization ([459aaef](https://github.com/react-toolbox/react-toolbox/commit/459aaef))
+* Refactor to ES6 timepicker component ([2434b00](https://github.com/react-toolbox/react-toolbox/commit/2434b00))
+* Refolder components for a better require flow. ([5bcf990](https://github.com/react-toolbox/react-toolbox/commit/5bcf990))
+* Release 0.10.20 ([4430c0a](https://github.com/react-toolbox/react-toolbox/commit/4430c0a))
+* Release 0.6.20 ([2c33719](https://github.com/react-toolbox/react-toolbox/commit/2c33719))
+* Release 0.6.28 - New component <Dropdown/> and enhaced in general context. ([2584259](https://github.com/react-toolbox/react-toolbox/commit/2584259))
+* Remove Coffeescript ([e875c48](https://github.com/react-toolbox/react-toolbox/commit/e875c48))
+* Remove coffeescript date utils and use es6 ([e3d899c](https://github.com/react-toolbox/react-toolbox/commit/e3d899c))
+* Remove css modules ([d9b329c](https://github.com/react-toolbox/react-toolbox/commit/d9b329c))
+* Remove default space for buttons ([d85faed](https://github.com/react-toolbox/react-toolbox/commit/d85faed))
+* Remove empty variable ([f204ce4](https://github.com/react-toolbox/react-toolbox/commit/f204ce4))
+* Remove explicit react dependency from input component ([4934975](https://github.com/react-toolbox/react-toolbox/commit/4934975))
+* Remove linter errors ([6bb85a4](https://github.com/react-toolbox/react-toolbox/commit/6bb85a4))
+* Remove react css modules from font ico ([bd50f1d](https://github.com/react-toolbox/react-toolbox/commit/bd50f1d))
+* Remove react explicit dependency in progressbar test ([285361f](https://github.com/react-toolbox/react-toolbox/commit/285361f))
+* Remove react warnings for slider ([82ce479](https://github.com/react-toolbox/react-toolbox/commit/82ce479))
+* Remove stylus ([8f25136](https://github.com/react-toolbox/react-toolbox/commit/8f25136))
+* Remove test utils ([fe1aecd](https://github.com/react-toolbox/react-toolbox/commit/fe1aecd))
+* Remove unnecesary ([9ba11dc](https://github.com/react-toolbox/react-toolbox/commit/9ba11dc))
+* Rename aside to drawer ([32e1c4e](https://github.com/react-toolbox/react-toolbox/commit/32e1c4e))
+* Rename coffescript version ([2fcdbf1](https://github.com/react-toolbox/react-toolbox/commit/2fcdbf1))
+* Rename documentation file ([6bd095e](https://github.com/react-toolbox/react-toolbox/commit/6bd095e))
+* Rename util to utils ([447abe5](https://github.com/react-toolbox/react-toolbox/commit/447abe5))
+* Reorder colors ([d9cfd7a](https://github.com/react-toolbox/react-toolbox/commit/d9cfd7a))
+* Reorder properties in MD and in CJSX ([e174374](https://github.com/react-toolbox/react-toolbox/commit/e174374))
+* Reorder styles and common variables ([84b15e1](https://github.com/react-toolbox/react-toolbox/commit/84b15e1))
+* Reorganize test components ([2292120](https://github.com/react-toolbox/react-toolbox/commit/2292120))
+* Restore original variables scss ([d24205e](https://github.com/react-toolbox/react-toolbox/commit/d24205e))
+* Retrieve all available components ([f1fc317](https://github.com/react-toolbox/react-toolbox/commit/f1fc317))
+* Rewrite button in ES6 and refactor the ripple effect on it ([cac6eed](https://github.com/react-toolbox/react-toolbox/commit/cac6eed))
+* Rewrite card in ES6 ([e3e4121](https://github.com/react-toolbox/react-toolbox/commit/e3e4121))
+* Rewrite clock ([26cef5f](https://github.com/react-toolbox/react-toolbox/commit/26cef5f))
+* Rewrite component tests in ES6 ([e87523b](https://github.com/react-toolbox/react-toolbox/commit/e87523b))
+* Rewrite dialog in ES6 ([9630817](https://github.com/react-toolbox/react-toolbox/commit/9630817))
+* Rewrite dropdown in ES6 ([f27be7a](https://github.com/react-toolbox/react-toolbox/commit/f27be7a))
+* Rewrite example in ES6 ([66fcb6d](https://github.com/react-toolbox/react-toolbox/commit/66fcb6d))
+* Rewrite font icon in ES6 ([4074852](https://github.com/react-toolbox/react-toolbox/commit/4074852))
+* Rewrite form in ES6 ([d0ab1dd](https://github.com/react-toolbox/react-toolbox/commit/d0ab1dd))
+* Rewrite in ES6 link and navigation ([3696832](https://github.com/react-toolbox/react-toolbox/commit/3696832))
+* rewrite input in es6 ([e223c59](https://github.com/react-toolbox/react-toolbox/commit/e223c59))
+* Rewrite karma config in ES6 ([1ba0416](https://github.com/react-toolbox/react-toolbox/commit/1ba0416))
+* Rewrite list in ES6 ([1747330](https://github.com/react-toolbox/react-toolbox/commit/1747330))
+* Rewrite loading in ES6 ([8fa4c7c](https://github.com/react-toolbox/react-toolbox/commit/8fa4c7c))
+* Rewrite ripple in ES6 and update its dependencies ([44cab7f](https://github.com/react-toolbox/react-toolbox/commit/44cab7f))
+* Rewrite switch in ES6 ([78a3a0e](https://github.com/react-toolbox/react-toolbox/commit/78a3a0e))
+* Rewrite tabs in ES6 ([d833412](https://github.com/react-toolbox/react-toolbox/commit/d833412))
+* Rewrite webpack config in JS ([4b834a0](https://github.com/react-toolbox/react-toolbox/commit/4b834a0))
+* ripple ([0b45fca](https://github.com/react-toolbox/react-toolbox/commit/0b45fca))
+* Run tests with PhantomJS and load react from karma loader ([8f19493](https://github.com/react-toolbox/react-toolbox/commit/8f19493))
+* Selecting values in <Autocomplete /> ([911955e](https://github.com/react-toolbox/react-toolbox/commit/911955e))
+* Send data and instance ([7bc1aa7](https://github.com/react-toolbox/react-toolbox/commit/7bc1aa7))
+* Set default value for fieldset type option ([d5be4f1](https://github.com/react-toolbox/react-toolbox/commit/d5be4f1))
+* Set font sizes in rems ([42dd433](https://github.com/react-toolbox/react-toolbox/commit/42dd433))
+* Set up date picker to use months and years selectors in calendar ([8bfb3fa](https://github.com/react-toolbox/react-toolbox/commit/8bfb3fa))
+* Setting values by default ([8b3d9b3](https://github.com/react-toolbox/react-toolbox/commit/8b3d9b3))
+* Solve flicker bug with ripple in safari ([9dfd87e](https://github.com/react-toolbox/react-toolbox/commit/9dfd87e))
+* string convention ([ada0436](https://github.com/react-toolbox/react-toolbox/commit/ada0436))
+* String convention ([910277d](https://github.com/react-toolbox/react-toolbox/commit/910277d))
+* Suggestions direction and width based in :root ([92fd577](https://github.com/react-toolbox/react-toolbox/commit/92fd577))
+* switch ([4d35a66](https://github.com/react-toolbox/react-toolbox/commit/4d35a66))
+* Test <button/>'s ([e45b47b](https://github.com/react-toolbox/react-toolbox/commit/e45b47b))
+* Test proof of concept ([7958fad](https://github.com/react-toolbox/react-toolbox/commit/7958fad))
+* Time picker first implementation ([5f62ce2](https://github.com/react-toolbox/react-toolbox/commit/5f62ce2))
+* Uniform styles in <Autocomplete> and <Dropdown> ([736846a](https://github.com/react-toolbox/react-toolbox/commit/736846a))
+* Unnecessary component ([906a458](https://github.com/react-toolbox/react-toolbox/commit/906a458))
+* Update authors and scripts ([a3b9b8c](https://github.com/react-toolbox/react-toolbox/commit/a3b9b8c))
+* Update calendar with a year selector ([5dd406d](https://github.com/react-toolbox/react-toolbox/commit/5dd406d))
+* Update karma and karma webpack ([09adc4c](https://github.com/react-toolbox/react-toolbox/commit/09adc4c))
+* Update node version for travis ([e049a08](https://github.com/react-toolbox/react-toolbox/commit/e049a08))
+* Update progress_bar.md ([b197237](https://github.com/react-toolbox/react-toolbox/commit/b197237))
+* Update README.md ([888e973](https://github.com/react-toolbox/react-toolbox/commit/888e973))
+* Update README.md ([e79fe92](https://github.com/react-toolbox/react-toolbox/commit/e79fe92))
+* Update README.md ([a4cb32b](https://github.com/react-toolbox/react-toolbox/commit/a4cb32b))
+* Use className as property ([fca4d8a](https://github.com/react-toolbox/react-toolbox/commit/fca4d8a))
+* Use data-react-toolbox for metrics. ([021f37d](https://github.com/react-toolbox/react-toolbox/commit/021f37d))
+* Use data-ref in progress bar to modify internal dependent component style ([5a5e7ad](https://github.com/react-toolbox/react-toolbox/commit/5a5e7ad))
+* Use E6 syntax to handle modules in progressbar and slider ([8ae72a8](https://github.com/react-toolbox/react-toolbox/commit/8ae72a8))
+* Use Heading sizes ([10c34a7](https://github.com/react-toolbox/react-toolbox/commit/10c34a7))
+* Use label in upper level ([83b9c43](https://github.com/react-toolbox/react-toolbox/commit/83b9c43))
+* Use Material Design naming for stylesheets. ([3912b92](https://github.com/react-toolbox/react-toolbox/commit/3912b92))
+* Use new dataSource in <Dropdown/> ([79f5cd8](https://github.com/react-toolbox/react-toolbox/commit/79f5cd8))
+* Use typography mixin in buttons ([c5d6c5b](https://github.com/react-toolbox/react-toolbox/commit/c5d6c5b))
+* User Google Webfont ([553e216](https://github.com/react-toolbox/react-toolbox/commit/553e216))
+* User pure render and refactoring for time picker ([0d22fa2](https://github.com/react-toolbox/react-toolbox/commit/0d22fa2))
+* UX from Session to Console ([0fd99c3](https://github.com/react-toolbox/react-toolbox/commit/0fd99c3))
+* When type is "hidden" add className .hidden ([ff7965b](https://github.com/react-toolbox/react-toolbox/commit/ff7965b))
+* You can select item with keyboards ([3a2f880](https://github.com/react-toolbox/react-toolbox/commit/3a2f880))
+* Bugfix: Set a proper transform origin ([b907fb9](https://github.com/react-toolbox/react-toolbox/commit/b907fb9))
+* Bugfix: set animation iteration count as infinite in ripple loading ([76774a0](https://github.com/react-toolbox/react-toolbox/commit/76774a0))
+* Bugfix: set proper height for buttons ([0780c5a](https://github.com/react-toolbox/react-toolbox/commit/0780c5a))
+* Bugfix: take into account 24hr format when trimming hours in clock ([efdc0fa](https://github.com/react-toolbox/react-toolbox/commit/efdc0fa))
 
-### Changed
-- Added `className` for the pickers to customize them.
-- Animated auto-transition in `DatePicker` component.
-- All `Input` components have now an error prop.
-- `Dropdown` improvements and normalization with `Input` component.
-- More `react-toolbox` attributes to easy customize picker components.
-- `btn-colors` mixin extracted to easily define custom `Buttons`.
-- New `neutral` boolean property to avoid taking default styles in `Button`.
-- Remove hidden scroll from webkit browsers by `commons.scss`.
-- Better `Navigation` styles.
-- `Overlay` opacity can now be styled from CSS.
 
-**For previous changes, please see the commit messages in
-https://github.com/react-toolbox/react-toolbox/releases.**
 
-[Unreleased]: https://github.com/react-toolbox/react-toolbox/compare/0.15.0...dev
-[0.15.0]: https://github.com/react-toolbox/react-toolbox/compare/0.14.2...0.15.0
-[0.14.2]: https://github.com/react-toolbox/react-toolbox/compare/0.14.1...0.14.2
-[0.14.1]: https://github.com/react-toolbox/react-toolbox/compare/0.14.0...0.14.1
-[0.14.0]: https://github.com/react-toolbox/react-toolbox/compare/0.13.4...0.14.0
diff --git a/package.json b/package.json
index 56aaca459..a0dc05170 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
     "expect": "~1.20.1",
     "express": "~4.13.4",
     "extract-text-webpack-plugin": "~1.0.1",
+    "git-dirty": "~1.0.2",
     "glob": "~7.0.3",
     "karma": "~1.1.2",
     "karma-chrome-launcher": "~1.0.1",
@@ -76,9 +77,9 @@
     "phantomjs-prebuilt": "~2.1.7",
     "postcss-loader": "~0.9.1",
     "react": "~15.3.0",
-    "react-addons-update": "~15.3.0",
-    "react-addons-test-utils": "~15.3.0",
     "react-addons-css-transition-group": "~15.3.0",
+    "react-addons-test-utils": "~15.3.0",
+    "react-addons-update": "~15.3.0",
     "react-docgen": "~2.8.2",
     "react-dom": "~15.3.0",
     "react-transform-catch-errors": "~1.0.2",

From 9d7e3db26333592a979e236da516b3cba000a6f1 Mon Sep 17 00:00:00 2001
From: Justin Schultz <jaschultz25@gmail.com>
Date: Wed, 24 Aug 2016 10:25:33 -0600
Subject: [PATCH 0767/1024] Passes IconMenu's theme to the inner Menu.

---
 components/menu/IconMenu.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/menu/IconMenu.js b/components/menu/IconMenu.js
index bd321f990..4427412b8 100644
--- a/components/menu/IconMenu.js
+++ b/components/menu/IconMenu.js
@@ -71,6 +71,7 @@ const factory = (IconButton, Menu) => {
             ripple={this.props.menuRipple}
             selectable={this.props.selectable}
             selected={this.props.selected}
+            theme={this.props.theme}
           >
             {this.props.children}
           </Menu>

From ae5865f4116b9924f0a994d8e201e34282f4d948 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 24 Aug 2016 20:12:08 +0200
Subject: [PATCH 0768/1024] Fix #733

---
 package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/package.json b/package.json
index 56aaca459..808055379 100644
--- a/package.json
+++ b/package.json
@@ -89,7 +89,6 @@
     "sass-loader": "~4.0.0",
     "sinon": "git://github.com/sinonjs/sinon.git#b672042043517b9f84e14ed0fb8265126168778a",
     "style-loader": "~0.13.1",
-    "toolbox-loader": "0.0.3",
     "webpack": "~1.13.0",
     "webpack-dev-middleware": "~1.6.1",
     "webpack-hot-middleware": "~2.10.0"

From 179323ccdae12d4f5ed49a0fc79eb5912b9fa8fd Mon Sep 17 00:00:00 2001
From: Alex Cornejo <acornejo@gmail.com>
Date: Wed, 24 Aug 2016 23:07:46 -0700
Subject: [PATCH 0769/1024] add fullscreen dialog.

A first version of fullscreen dialogs as defined in the material spec
https://material.google.com/components/dialogs.html#dialogs-full-screen-dialogs
---
 components/dialog/readme.md  |  5 ++++-
 components/dialog/theme.scss | 12 ++++++++++++
 spec/components/dialog.js    | 23 ++++++++++++++++++++++-
 3 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/components/dialog/readme.md b/components/dialog/readme.md
index e7169935f..e3c2bb46a 100644
--- a/components/dialog/readme.md
+++ b/components/dialog/readme.md
@@ -54,7 +54,10 @@ If you want to provide a theme via context, the component key is `RTDialog`.
 | `onOverlayMouseMove`    | `Function`      |                 | Callback called when the mouse is moving over the overlay. |
 | `onOverlayMouseUp`      | `Function`      |                 | Callback called when the mouse button is released over the overlay. |
 | `title`                 | `String`        |                 | The text string to use as standar title of the dialog.|
-| `type`                  | `String`        | `normal`        | Used to determine the size of the dialog. It can be `small`, `normal` or `large`. |
+| `type`                  | `String`        | `normal`        | Used to determine the size of the dialog. It can be `small`, `normal`, `large` or `fullscreen`. |
+
+Notice that the `fullscreen` option only applies on mobile devices with small screens (i.e. cellphones), and on other devices it behaves as a `large` dialog.
+
 
 ## Theme
 
diff --git a/components/dialog/theme.scss b/components/dialog/theme.scss
index 62e7388db..c7ac36f7f 100644
--- a/components/dialog/theme.scss
+++ b/components/dialog/theme.scss
@@ -47,6 +47,18 @@
   width: 96vw;
 }
 
+.fullscreen {
+  width: 96vw;
+
+  @media screen and (max-width: $layout-breakpoint-xs) {
+    max-width: 100vw;
+    max-height: 100vh;
+    min-height: 100vh;
+    width: 100vw;
+    border-radius: 0;
+  }
+}
+
 .title {
   @include typo-title();
   flex-grow: 0;
diff --git a/spec/components/dialog.js b/spec/components/dialog.js
index b9ac2c4c7..ebe35197a 100644
--- a/spec/components/dialog.js
+++ b/spec/components/dialog.js
@@ -1,10 +1,19 @@
 import React, { PropTypes } from 'react';
 import Button from '../../components/button';
 import Dialog from '../../components/dialog';
+import Dropdown from '../../components/dropdown';
+
+const dialogTypes = [
+  {value: 'small', label: 'small'},
+  {value: 'normal', label: 'normal'},
+  {value: 'large', label: 'large'},
+  {value: 'fullscreen', label: 'fullscreen'}
+];
 
 class DialogTest extends React.Component {
   state = {
-    active: false
+    active: false,
+    type: 'normal'
   };
 
   handleToggle = () => {
@@ -13,6 +22,10 @@ class DialogTest extends React.Component {
     });
   };
 
+  changeDialogType = (value) => {
+    this.setState({type: value});
+  };
+
   actions = [
     { label: 'Disagree', primary: true, onClick: this.handleToggle },
     { label: 'Agree', primary: true, onClick: this.handleToggle }
@@ -23,11 +36,19 @@ class DialogTest extends React.Component {
       <section>
         <h5>Dialog</h5>
         <p>lorem ipsum...</p>
+        <Dropdown
+          label='Dialog Type'
+          auto
+          onChange={this.changeDialogType}
+          source={dialogTypes}
+          value={this.state.type}
+        />
         <Button label='Show Dialog' raised primary onClick={this.handleToggle} />
         <ContextComponent>
           <Dialog
             actions={this.actions}
             active={this.state.active}
+            type={this.state.type}
             title="Use Google's location service?"
             onOverlayClick={this.handleToggle}
             onEscKeyDown={this.handleToggle}

From e2ed42bd3b57fce28cbc75ea0245220c1cb212f9 Mon Sep 17 00:00:00 2001
From: Andrew Sprouse <sprouse.a@gmail.com>
Date: Thu, 25 Aug 2016 11:27:02 -0400
Subject: [PATCH 0770/1024] Remove overly strict children propType validation.
 fixes #641

---
 components/layout/Layout.js | 39 ++++---------------------------------
 lib/layout/Layout.js        | 26 +------------------------
 2 files changed, 5 insertions(+), 60 deletions(-)

diff --git a/components/layout/Layout.js b/components/layout/Layout.js
index 1775f65a0..0e356395d 100644
--- a/components/layout/Layout.js
+++ b/components/layout/Layout.js
@@ -9,42 +9,11 @@ const Layout = ({ className, children, theme }) => (
   </div>
 );
 
-const ALLOWED_THEMED = [
-  'Themed Panel',
-  'Themed NavDrawer|Themed Panel',
-  'Themed NavDrawer|Themed Panel|Themed Sidebar',
-  'Themed Panel|Themed Sidebar'
-];
-
-function getChildName (child) {
-  if (child.type) {
-    return child.type.displayName || child.type.name || child.type;
-  }
-  if (!child.constructor || !child.constructor.name) {
-    return 'UNKNOWN';
-  }
-  return child.constructor.name;
-}
-
 Layout.propTypes = {
-  children (props, propName, componentName) {
-    // Accept only [NavDrawer]Pane[Sidebar]
-    const children = props[propName];
-    if (React.Children.count(children) > 3) {
-      return new Error(
-        '`' + componentName + '` '
-        + 'should have a Pane for a child, optionally preceded and/or followed by a Drawer.'
-      );
-    }
-
-    const names = React.Children.map(children, getChildName).join('|');
-    if (!(~ALLOWED_THEMED.indexOf(names))) {
-      return new Error(
-        '`' + componentName + '` '
-        + 'should have a Panel for a child, optionally preceded by a NavDrawer and/or followed by a Sidebar.'
-      );
-    }
-  },
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.element),
+    PropTypes.element
+  ]),
   className: PropTypes.string,
   theme: PropTypes.shape({
     layout: PropTypes.string
diff --git a/lib/layout/Layout.js b/lib/layout/Layout.js
index 81ee1e953..a4af0244a 100644
--- a/lib/layout/Layout.js
+++ b/lib/layout/Layout.js
@@ -32,32 +32,8 @@ var Layout = function Layout(_ref) {
   );
 };
 
-var ALLOWED_THEMED = ['Themed Panel', 'Themed NavDrawer|Themed Panel', 'Themed NavDrawer|Themed Panel|Themed Sidebar', 'Themed Panel|Themed Sidebar'];
-
-function getChildName(child) {
-  if (child.type) {
-    return child.type.displayName || child.type.name || child.type;
-  }
-  if (!child.constructor || !child.constructor.name) {
-    return 'UNKNOWN';
-  }
-  return child.constructor.name;
-}
-
 Layout.propTypes = {
-  children: function children(props, propName, componentName) {
-    // Accept only [NavDrawer]Pane[Sidebar]
-    var children = props[propName];
-    if (_react2.default.Children.count(children) > 3) {
-      return new Error('`' + componentName + '` ' + 'should have a Pane for a child, optionally preceded and/or followed by a Drawer.');
-    }
-
-    var names = _react2.default.Children.map(children, getChildName).join('|');
-    if (!~ALLOWED_THEMED.indexOf(names)) {
-      return new Error('`' + componentName + '` ' + 'should have a Panel for a child, optionally preceded by a NavDrawer and/or followed by a Sidebar.');
-    }
-  },
-
+  children: _react.PropTypes.oneOfType([_react.PropTypes.arrayOf(_react.PropTypes.element), _react.PropTypes.element]),
   className: _react.PropTypes.string,
   theme: _react.PropTypes.shape({
     layout: _react.PropTypes.string

From 0ea38497719ea735a74ae370408a3ee92c617244 Mon Sep 17 00:00:00 2001
From: David Cho-Lerat <david.cho-lerat@hl2.com>
Date: Thu, 25 Aug 2016 21:46:02 +0200
Subject: [PATCH 0771/1024] Update readme.md

The 'direction' property value is 'down', not 'bottom'
---
 components/autocomplete/readme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/autocomplete/readme.md b/components/autocomplete/readme.md
index ecd4ef0e2..e6f1dfc94 100644
--- a/components/autocomplete/readme.md
+++ b/components/autocomplete/readme.md
@@ -45,7 +45,7 @@ If you want to provide a theme via context, the component key is `RTAutocomplete
 |:-----|:-----|:-----|:-----|
 | `allowCreate`       | `Bool`                 | `false`         | Determines if user can create a new option with the current typed value |
 | `className`         | `String`               | `''`            | Sets a class to style of the Component.|
-| `direction`         | `String`               |  `auto`         | Determines the opening direction. It can be `auto`, `top` or `bottom`.|
+| `direction`         | `String`               |  `auto`         | Determines the opening direction. It can be `auto`, `top` or `down`.|
 | `disabled`          | `Bool`                 |  `false`        | If true, component will be disabled.|
 | `error`             | `String`               |                 | Sets the error string for the internal input element.|
 | `label`             | `String`               |                 | The text string to use for the floating label element.|

From 83011cb7bbf08b49816d5e24bd0aecb610652282 Mon Sep 17 00:00:00 2001
From: Antony Lau <laucheukhim@gmail.com>
Date: Sat, 27 Aug 2016 09:19:51 +0800
Subject: [PATCH 0772/1024] Replace onMouseDown wth onClick in Dropdown

---
 components/dropdown/Dropdown.js | 9 +++++----
 lib/dropdown/Dropdown.js        | 9 +++++----
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/components/dropdown/Dropdown.js b/components/dropdown/Dropdown.js
index 0700cc4e7..9b75998f7 100644
--- a/components/dropdown/Dropdown.js
+++ b/components/dropdown/Dropdown.js
@@ -83,12 +83,13 @@ const factory = (Input) => {
       }
     };
 
-    handleMouseDown = (event) => {
+    handleClick = (event) => {
       events.pauseEvent(event);
       const client = event.target.getBoundingClientRect();
       const screen_height = window.innerHeight || document.documentElement.offsetHeight;
       const up = this.props.auto ? client.top > ((screen_height / 2) + client.height) : false;
       if (this.props.onFocus) this.props.onFocus(event);
+      if (this.props.onClick) this.props.onClick(event);
       this.setState({active: true, up});
     };
 
@@ -120,7 +121,7 @@ const factory = (Input) => {
       });
 
       return (
-        <div className={className} onMouseDown={this.handleMouseDown}>
+        <div className={className} onClick={this.handleClick}>
           <div className={`${theme.templateValue} ${theme.value}`}>
             {this.props.template(selected)}
           </div>
@@ -134,7 +135,7 @@ const factory = (Input) => {
       const { theme } = this.props;
       const className = item.value === this.props.value ? theme.selected : null;
       return (
-        <li key={idx} className={className} onMouseDown={this.handleSelect.bind(this, item.value)}>
+        <li key={idx} className={className} onClick={this.handleSelect.bind(this, item.value)}>
           {this.props.template ? this.props.template(item) : item.label}
         </li>
       );
@@ -154,7 +155,7 @@ const factory = (Input) => {
           <Input
             {...others}
             className={theme.value}
-            onMouseDown={this.handleMouseDown}
+            onClick={this.handleClick}
             readOnly
             type={template && selected ? 'hidden' : null}
             value={selected && selected.label ? selected.label : ''}
diff --git a/lib/dropdown/Dropdown.js b/lib/dropdown/Dropdown.js
index a9fe5171c..b91552c1c 100644
--- a/lib/dropdown/Dropdown.js
+++ b/lib/dropdown/Dropdown.js
@@ -71,12 +71,13 @@ var factory = function factory(Input) {
         if (_this.state.active && !_events2.default.targetIsDescendant(event, _reactDom2.default.findDOMNode(_this))) {
           _this.setState({ active: false });
         }
-      }, _this.handleMouseDown = function (event) {
+      }, _this.handleClick = function (event) {
         _events2.default.pauseEvent(event);
         var client = event.target.getBoundingClientRect();
         var screen_height = window.innerHeight || document.documentElement.offsetHeight;
         var up = _this.props.auto ? client.top > screen_height / 2 + client.height : false;
         if (_this.props.onFocus) _this.props.onFocus(event);
+        if (_this.props.onClick) _this.props.onClick(event);
         _this.setState({ active: true, up: up });
       }, _this.handleSelect = function (item, event) {
         if (_this.props.onBlur) _this.props.onBlur(event);
@@ -122,7 +123,7 @@ var factory = function factory(Input) {
         var className = item.value === _this.props.value ? theme.selected : null;
         return _react2.default.createElement(
           'li',
-          { key: idx, className: className, onMouseDown: _this.handleSelect.bind(_this, item.value) },
+          { key: idx, className: className, onClick: _this.handleSelect.bind(_this, item.value) },
           _this.props.template ? _this.props.template(item) : item.label
         );
       }, _temp), _possibleConstructorReturn(_this, _ret);
@@ -160,7 +161,7 @@ var factory = function factory(Input) {
 
         return _react2.default.createElement(
           'div',
-          { className: className, onMouseDown: this.handleMouseDown },
+          { className: className, onClick: this.handleClick },
           _react2.default.createElement(
             'div',
             { className: theme.templateValue + ' ' + theme.value },
@@ -201,7 +202,7 @@ var factory = function factory(Input) {
           { 'data-react-toolbox': 'dropdown', className: className },
           _react2.default.createElement(Input, _extends({}, others, {
             className: theme.value,
-            onMouseDown: this.handleMouseDown,
+            onClick: this.handleClick,
             readOnly: true,
             type: template && selected ? 'hidden' : null,
             value: selected && selected.label ? selected.label : ''

From f7604477a0a2a829fe1885c02429035c89e79635 Mon Sep 17 00:00:00 2001
From: Antony Lau <laucheukhim@gmail.com>
Date: Sat, 27 Aug 2016 23:42:29 +0800
Subject: [PATCH 0773/1024] Add onClick propType

---
 components/dropdown/Dropdown.js | 3 ++-
 lib/dropdown/Dropdown.js        | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/dropdown/Dropdown.js b/components/dropdown/Dropdown.js
index 9b75998f7..9bbfcb465 100644
--- a/components/dropdown/Dropdown.js
+++ b/components/dropdown/Dropdown.js
@@ -18,6 +18,7 @@ const factory = (Input) => {
       name: PropTypes.string,
       onBlur: PropTypes.func,
       onChange: PropTypes.func,
+      onClick: PropTypes.func,
       onFocus: PropTypes.func,
       source: PropTypes.array.isRequired,
       template: PropTypes.func,
@@ -88,8 +89,8 @@ const factory = (Input) => {
       const client = event.target.getBoundingClientRect();
       const screen_height = window.innerHeight || document.documentElement.offsetHeight;
       const up = this.props.auto ? client.top > ((screen_height / 2) + client.height) : false;
-      if (this.props.onFocus) this.props.onFocus(event);
       if (this.props.onClick) this.props.onClick(event);
+      if (this.props.onFocus) this.props.onFocus(event);
       this.setState({active: true, up});
     };
 
diff --git a/lib/dropdown/Dropdown.js b/lib/dropdown/Dropdown.js
index b91552c1c..4f9d2dbff 100644
--- a/lib/dropdown/Dropdown.js
+++ b/lib/dropdown/Dropdown.js
@@ -76,8 +76,8 @@ var factory = function factory(Input) {
         var client = event.target.getBoundingClientRect();
         var screen_height = window.innerHeight || document.documentElement.offsetHeight;
         var up = _this.props.auto ? client.top > screen_height / 2 + client.height : false;
-        if (_this.props.onFocus) _this.props.onFocus(event);
         if (_this.props.onClick) _this.props.onClick(event);
+        if (_this.props.onFocus) _this.props.onFocus(event);
         _this.setState({ active: true, up: up });
       }, _this.handleSelect = function (item, event) {
         if (_this.props.onBlur) _this.props.onBlur(event);
@@ -230,6 +230,7 @@ var factory = function factory(Input) {
     name: _react.PropTypes.string,
     onBlur: _react.PropTypes.func,
     onChange: _react.PropTypes.func,
+    onClick: _react.PropTypes.func,
     onFocus: _react.PropTypes.func,
     source: _react.PropTypes.array.isRequired,
     template: _react.PropTypes.func,

From 5c2406d2e59a0b7fe79aa6c6727d32ef8591728f Mon Sep 17 00:00:00 2001
From: Alex Cornejo <acornejo@gmail.com>
Date: Thu, 25 Aug 2016 01:14:29 -0700
Subject: [PATCH 0774/1024] add tab icons.

This adds the possibility of specifying an icon to use in the tab
headers. You can specify either a label only, icon only or both.

https://material.google.com/components/tabs.html#tabs-usage
---
 components/tabs/Tab.js     | 17 ++++++++++++++++-
 components/tabs/readme.md  |  5 ++++-
 components/tabs/theme.scss |  1 +
 spec/components/tabs.js    | 12 ++++++++++++
 4 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/components/tabs/Tab.js b/components/tabs/Tab.js
index f48280610..e5138f6df 100644
--- a/components/tabs/Tab.js
+++ b/components/tabs/Tab.js
@@ -1,5 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
+import { FontIcon } from '../font_icon';
 import { themr } from 'react-css-themr';
 import { TABS } from '../identifiers.js';
 
@@ -10,7 +11,8 @@ class Tab extends Component {
     className: PropTypes.string,
     disabled: PropTypes.bool,
     hidden: PropTypes.bool,
-    label: PropTypes.any.isRequired,
+    icon: PropTypes.node,
+    label: PropTypes.node,
     onActive: PropTypes.func,
     onClick: PropTypes.func,
     theme: PropTypes.shape({
@@ -40,6 +42,18 @@ class Tab extends Component {
     }
   };
 
+  renderIcon = () => {
+    if (!this.props.icon) {
+      return null;
+    } else {
+      return (
+        <div>
+          <FontIcon value={this.props.icon}/>
+        </div>
+      );
+    }
+  };
+
   render () {
     const {
       onActive, // eslint-disable-line
@@ -54,6 +68,7 @@ class Tab extends Component {
 
     return (
       <label {...other} data-react-toolbox='tab' className={_className} onClick={this.handleClick}>
+        {this.renderIcon()}
         {this.props.label}
       </label>
     );
diff --git a/components/tabs/readme.md b/components/tabs/readme.md
index 2c473267d..7a8f0c016 100644
--- a/components/tabs/readme.md
+++ b/components/tabs/readme.md
@@ -100,10 +100,13 @@ Represent a single tab element and it should include some properties to describe
 | `className`       | `String`        | `''`            | Additional class name to provide custom styling for each tab.|
 | `disabled`        | `Boolean`       | `false`         | If true, the current component is not clickable.|
 | `hidden`          | `Boolean`       | `false`         | If true, the current component is not visible.|
-| `label`           | `String`        |                 | Label text for navigation header. Required. |
+| `icon`            | `String`        |                 | Icon for navigation header. |
+| `label`           | `String`        |                 | Label text for navigation header. |
 | `onActive`        | `Function`      |                 | Callback function that is fired when the tab is activated. |
 | `onClick`         | `Function`      |                 | Callback function that is fired when the tab is clicked. |
 
+It is required to provide either a label or an icon (or both).
+
 ### Theme
 
 | Name     | Description|
diff --git a/components/tabs/theme.scss b/components/tabs/theme.scss
index 9d9fda29d..ae687cff0 100644
--- a/components/tabs/theme.scss
+++ b/components/tabs/theme.scss
@@ -21,6 +21,7 @@
   font-weight: $font-weight-semi-bold;
   line-height: 1;
   color: $tab-text-inactive-color;
+  text-align: center;
   text-transform: uppercase;
   transition-timing-function: $animation-curve-default;
   transition-duration: $animation-duration;
diff --git a/spec/components/tabs.js b/spec/components/tabs.js
index e1be5879c..a956388ab 100644
--- a/spec/components/tabs.js
+++ b/spec/components/tabs.js
@@ -51,6 +51,18 @@ class TabsTest extends React.Component {
           <Tab label='Third'><small>Third Content</small></Tab>
           <Tab label='Disabled' disabled><small>Disabled Content</small></Tab>
         </Tabs>
+        <h5>Inverse Tabs with labels and icons</h5>
+        <Tabs index={this.state.inverseIndex} onChange={this.handleInverseTabChange} inverse>
+          <Tab label='Home' icon='home'><small>First Content</small></Tab>
+          <Tab label='Favorite' icon='favorite'><small>Second Content</small></Tab>
+          <Tab label='Call' icon='call'><small>Third Content</small></Tab>
+        </Tabs>
+        <h5>Inverse Tabs with icons</h5>
+        <Tabs index={this.state.inverseIndex} onChange={this.handleInverseTabChange} inverse>
+          <Tab icon='home'><small>First Content</small></Tab>
+          <Tab icon='favorite'><small>Second Content</small></Tab>
+          <Tab icon='call'><small>Third Content</small></Tab>
+        </Tabs>
       </section>
     );
   }

From d4c0c4d8baff96731f39bc9b571e34a31db034d9 Mon Sep 17 00:00:00 2001
From: Alex Cornejo <acornejo@gmail.com>
Date: Sun, 28 Aug 2016 22:33:45 -0700
Subject: [PATCH 0775/1024] Add app_bar title, leftIcon and rightIcon props.

Here we add some basic default functionality for the most common use
cases of the AppBar component. It is still possible to provide and style
your own elements through children props, but for most use cases the
props will help reduce the amount of boilerplate.
---
 components/app_bar/AppBar.js  | 33 ++++++++++++++++++++++++++++++---
 components/app_bar/index.d.ts | 32 ++++++++++++++++++++++++++++++++
 components/app_bar/readme.md  | 27 ++++++++++++++++++---------
 components/app_bar/theme.scss | 21 +++++++++++++++++++++
 spec/components/app_bar.js    | 20 ++++++++++++++++++++
 spec/components/layout.js     |  8 ++------
 spec/root.js                  | 26 ++++++++++++++++----------
 7 files changed, 139 insertions(+), 28 deletions(-)
 create mode 100644 spec/components/app_bar.js

diff --git a/components/app_bar/AppBar.js b/components/app_bar/AppBar.js
index bfbef63b0..bd2b27b10 100644
--- a/components/app_bar/AppBar.js
+++ b/components/app_bar/AppBar.js
@@ -2,16 +2,29 @@ import React, { PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
 import { APP_BAR } from '../identifiers.js';
+import FontIcon from '../font_icon/FontIcon.js';
 
-const AppBar = ({ theme, ...props }) => {
+const AppBar = ({ theme, title, ...props }) => {
   const className = classnames(theme.appBar, {
     [theme.fixed]: props.fixed,
     [theme.flat]: props.flat
   }, props.className);
+  const { leftIcon, onLeftIconClick, rightIcon, onRightIconClick } = props;
 
   return (
     <header className={className} data-react-toolbox='app-bar'>
+      {leftIcon ? <FontIcon
+        className={classnames(theme.leftIcon)}
+        value={leftIcon}
+        onClick={onLeftIconClick}/> : null
+      }
+      {title ? <h1 className={classnames(theme.title)}>{title}</h1> : null}
       {props.children}
+      {rightIcon ? <FontIcon
+        className={classnames(theme.rightIcon)}
+        value={rightIcon}
+        onClick={onRightIconClick}/> : null
+      }
     </header>
   );
 };
@@ -21,11 +34,25 @@ AppBar.propTypes = {
   className: PropTypes.string,
   fixed: PropTypes.bool,
   flat: PropTypes.bool,
+  leftIcon: PropTypes.oneOfType(
+    PropTypes.string,
+    PropTypes.element
+  ),
+  onLeftIconClick: PropTypes.func,
+  onRightIconClick: PropTypes.func,
+  rightIcon: PropTypes.oneOfType(
+    PropTypes.string,
+    PropTypes.element
+  ),
   theme: PropTypes.shape({
     appBar: PropTypes.string,
+    leftIcon: PropTypes.string,
+    rightIcon: PropTypes.string,
     fixed: PropTypes.string,
-    flat: PropTypes.string
-  })
+    flat: PropTypes.string,
+    title: PropTypes.string
+  }),
+  title: PropTypes.string
 };
 
 AppBar.defaultProps = {
diff --git a/components/app_bar/index.d.ts b/components/app_bar/index.d.ts
index 35fda69e4..634b0171e 100644
--- a/components/app_bar/index.d.ts
+++ b/components/app_bar/index.d.ts
@@ -13,6 +13,18 @@ export interface AppBarTheme {
    * Added to the root element when the app bar is flat.
    */
   flat?: string;
+  /**
+   * Used as the app bar title.
+   */
+  title ?: string;
+  /**
+   * Added to the left icon app bar element.
+   */
+  leftIcon?: string;
+  /**
+   * Added to the right icon app bar element.
+   */
+  rightIcon?: string;
 }
 
 interface AppBarProps extends __ReactToolbox.Props {
@@ -30,6 +42,26 @@ interface AppBarProps extends __ReactToolbox.Props {
    * @default false
    */
   flat?: boolean;
+  /**
+   * If it exists it is used as the AppBar title
+   */
+  title?: string;
+  /**
+   * If it exists it is used as the AppBar left icon
+   */
+  leftIcon?: string;
+  /**
+   * Called when the left icon is clicked
+   */
+  onLeftIconClick?: Function;
+  /**
+   * If it exists it is used as the AppBar right icon
+   */
+  rightIcon?: string;
+  /**
+   * Called when the righticon is clicked
+   */
+  onRightIconClick?: Function;
   /**
    * Classnames object defining the component style.
    */
diff --git a/components/app_bar/readme.md b/components/app_bar/readme.md
index 24eea0e8b..5cb3c2792 100644
--- a/components/app_bar/readme.md
+++ b/components/app_bar/readme.md
@@ -15,19 +15,28 @@ const AppBarTest = () => (
 
 If you want to provide a theme via context, the component key is `RTAppBar`.
 
+The `AppBar` component provides properties for the common use cases of `title`, `leftIcon` and `rightIcon`. However, you can also override these with your own content by not specifying these and instead provide children elements, as shown in the example.
+
 ## Properties
 
 | Name          | Type    | Default  | Description|
 |:-----|:-----|:-----|:-----|
-| `className` | `String`  | `''`     | Set a class for the root component.|
-| `fixed`     | `Bool`    | `false`  | Determine if the bar should have position `fixed` or `relative`.|
-| `flat`      | `Bool`    | `false`  | If true, the AppBar shows a shadow.|
-| `theme`     | `Object`  | `null`   | Classnames object defining the component style.|
+| `className`        | `String`   | `''`    | Set a class for the root component.|
+| `fixed`            | `Bool`     | `false` | Determine if the bar should have position `fixed` or `relative`.|
+| `flat`             | `Bool`     | `false` | If true, the AppBar shows a shadow.|
+| `theme`            | `Object`   | `null`  | Classnames object defining the component style.|
+| `title`            | `String`   | `null`  | Title used for the appbar.|
+| `leftIcon`         | `String`   | `null`  | Left icon.|
+| `onLeftIconClick`  | `Function` | `null`  | Called on left icon click event.|
+| `rightIcon`        | `String`   | `null`  | Right icon.|
+| `onRightIconClick` | `Function` | `null`  | Called on right icon click event.|
 
 ## Theme
 
-| Name     | Description|
-|:---------|:-----------|
-| `appBar` | Used for the component root element.|
-| `fixed`  | Added to the root element when the app bar is fixed.|
-| `flat`   | Added to the root element when the app bar is flat.|
+| Name        | Description|
+|:------------|:-----------|
+| `appBar`    | Used for the component root element.|
+| `fixed`     | Added to the root element when the app bar is fixed.|
+| `title`     | Added to the title element of the app bar.|
+| `leftIcon`  | Added to the left icon element when the app bar.|
+| `rightIcon` | Added to the right icon element when the app bar.|
diff --git a/components/app_bar/theme.scss b/components/app_bar/theme.scss
index 56147f646..f0d55d0c4 100644
--- a/components/app_bar/theme.scss
+++ b/components/app_bar/theme.scss
@@ -35,4 +35,25 @@
   a {
     color: $appbar-contrast;
   }
+
+  .title {
+    flex-grow: 1;
+    font-size: 1.8 * $unit;
+    font-weight: bold;
+    > small {
+      font-size: 1.8 * $unit;
+      font-weight: normal;
+    }
+  }
+
+  .leftIcon {
+    padding: 1.2 * $unit 1.2 * $unit 1.2 * $unit 0;
+    text-align: left;
+  }
+
+  .rightIcon {
+    padding: 1.2 * $unit 0 1.2 * $unit 1.2 * $unit;
+    margin-left: auto;
+    text-align: right;
+  }
 }
diff --git a/spec/components/app_bar.js b/spec/components/app_bar.js
new file mode 100644
index 000000000..ba13fa297
--- /dev/null
+++ b/spec/components/app_bar.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import AppBar from '../../components/app_bar';
+
+const AppBarTest = () => (
+  <section>
+    <h5>AppBar</h5>
+    <br/>
+    <AppBar title='Title' />
+    <br/>
+    <AppBar leftIcon='menu' title='Title' />
+    <br/>
+    <AppBar leftIcon='arrow_back' title='Title' rightIcon='close' />
+    <br/>
+    <AppBar>
+      Custom content
+    </AppBar>
+  </section>
+);
+
+export default AppBarTest;
diff --git a/spec/components/layout.js b/spec/components/layout.js
index 4190a4656..6d74aa181 100644
--- a/spec/components/layout.js
+++ b/spec/components/layout.js
@@ -75,17 +75,13 @@ class LayoutTest extends React.Component {
                 <div style={{ width: '100%', height: '60rem', margin: '1.8rem 0' }}>
                     <Layout>
                         <NavDrawer active={this.state.drawerOpen} pinned={this.state.drawerPinned} permanentAt={this.state.permanentAt} onOverlayClick={this.toggleDrawer}>
-                            <AppBar>
-                                <h5>Drawer</h5>
-                            </AppBar>
+                          <AppBar title='Drawer'/>
                             <ul style={{ listStyle: 'none', overflowY: 'auto', flex: 1, padding: '1.6rem' }}>
                                 {drawerItems}
                             </ul>
                         </NavDrawer>
                         <Panel>
-                            <AppBar>
-                                <IconButton icon='menu' inverse onClick={this.toggleDrawer}/>
-                            </AppBar>
+                            <AppBar leftIcon='menu' onLeftIconClick={this.toggleDrawer}/>
                             <div style={{ flex: 1, overflowY: 'auto' }}>
                                 <div style={{ display: 'flex', flexDirection: 'row' }}>
                                     <section style={{ margin: '1.8rem'}}>
diff --git a/spec/root.js b/spec/root.js
index ee5c33032..ddf1a6b9b 100644
--- a/spec/root.js
+++ b/spec/root.js
@@ -3,6 +3,7 @@ import '../components/commons.scss';
 import React from 'react';
 import AppBar from '../components/app_bar';
 import Autocomplete from './components/autocomplete';
+import AppBarTest from './components/app_bar';
 import Avatar from './components/avatar';
 import FontIcon from './components/font_icon';
 import Button from './components/button';
@@ -29,19 +30,24 @@ import Tabs from './components/tabs';
 import Tooltip from './components/tooltip';
 import style from './style';
 
+const RootAppBar = () => (
+  <AppBar className={style.appbar} fixed flat>
+    <h1>React Toolbox <small>Spec {VERSION}</small></h1>
+    <ButtonToolbox
+      accent
+      className={style.github}
+      icon='web'
+      floating
+      onClick={() => {window.href = 'http://react-toolbox/';}}
+    />
+  </AppBar>
+);
+
 const Root = () => (
   <div className={style.app}>
-    <AppBar className={style.appbar} fixed flat>
-      <h1>React Toolbox <small>Spec {VERSION}</small></h1>
-      <ButtonToolbox
-        accent
-        className={style.github}
-        icon='web'
-        floating
-        onClick={() => {window.href = 'http://react-toolbox/';}}
-      />
-    </AppBar>
+    <RootAppBar />
     <Autocomplete />
+    <AppBarTest />
     <Avatar />
     <FontIcon />
     <Button />

From 8e0b64f852d5bd6802148fa68e84705fa76bb763 Mon Sep 17 00:00:00 2001
From: Abhi Rao <abhi.rao@onit.com>
Date: Tue, 30 Aug 2016 15:08:22 -0500
Subject: [PATCH 0776/1024] Adding hideMode to Tabs

- Defaulting to `unmounted` - not mounting inactive tabs. `display` mode will mount inactive tabs but keep them hidden.
- Closes #709
---
 components/tabs/Tabs.js                 | 25 ++++++----
 components/tabs/__tests__/index.spec.js | 61 +++++++++++++++++++------
 components/tabs/readme.md               |  1 +
 3 files changed, 62 insertions(+), 25 deletions(-)

diff --git a/components/tabs/Tabs.js b/components/tabs/Tabs.js
index db327c10b..9e93b0d4e 100644
--- a/components/tabs/Tabs.js
+++ b/components/tabs/Tabs.js
@@ -12,6 +12,7 @@ const factory = (Tab, TabContent) => {
       className: PropTypes.string,
       disableAnimatedBottomBorder: PropTypes.bool,
       fixed: PropTypes.bool,
+      hideMode: PropTypes.oneOf(['display', 'unmounted']),
       index: PropTypes.number,
       inverse: PropTypes.bool,
       onChange: PropTypes.func,
@@ -27,7 +28,8 @@ const factory = (Tab, TabContent) => {
     static defaultProps = {
       index: 0,
       fixed: false,
-      inverse: false
+      inverse: false,
+      hideMode: 'unmounted'
     };
 
     state = {
@@ -119,18 +121,21 @@ const factory = (Tab, TabContent) => {
     }
 
     renderContents (contents) {
-      const activeIdx = contents.findIndex((item, idx) => {
-        return this.props.index === idx;
-      });
-
-      if (contents && contents[activeIdx]) {
-        return React.cloneElement(contents[activeIdx], {
-          key: activeIdx,
+      const contentElements = contents.map((item, idx) => {
+        return React.cloneElement(item, {
+          key: idx,
           theme: this.props.theme,
-          active: true,
-          tabIndex: activeIdx
+          active: this.props.index === idx,
+          hidden: this.props.index !== idx && this.props.hideMode === 'display',
+          tabIndex: idx
         });
+      });
+
+      if (this.props.hideMode === 'display') {
+        return contentElements;
       }
+
+      return contentElements.filter((item, idx) => (idx === this.props.index));
     }
 
     render () {
diff --git a/components/tabs/__tests__/index.spec.js b/components/tabs/__tests__/index.spec.js
index ad53cefc0..522e5c229 100644
--- a/components/tabs/__tests__/index.spec.js
+++ b/components/tabs/__tests__/index.spec.js
@@ -18,23 +18,23 @@ const getRenderedClassName = (tree, TargetComponent) => {
 describe('Tabs', function () {
   let tabContents, composition;
 
-  it('only renders the current tab', function () {
-    class Composition extends Component {
-      constructor () {
-        super();
-        this.state = { index: 0 };
-      }
-
-      render () {
-        return (
-          <Tabs index={this.state.index}>
-            <Tab label="tab1">tab1</Tab>
-            <Tab label="tab2">tab2</Tab>
-          </Tabs>
-        );
-      }
+  class Composition extends Component {
+    constructor () {
+      super();
+      this.state = { index: 0 };
     }
 
+    render () {
+      return (
+        <Tabs index={this.state.index} {...this.props}>
+          <Tab label="tab1">tab1</Tab>
+          <Tab label="tab2">tab2</Tab>
+        </Tabs>
+      );
+    }
+  }
+
+  it('defaults to only rendering the current tab', function () {
     // initial render
     composition = utils.renderComponent(Composition);
 
@@ -55,6 +55,37 @@ describe('Tabs', function () {
     expect(tabContents[0].props.tabIndex).toEqual(1);
   });
 
+  it('renders inactive tabs when hideMode is set to display', function () {
+    // initial render
+    composition = utils.renderComponent(Composition, { hideMode: 'display' });
+
+    tabContents = ReactTestUtils
+      .scryRenderedComponentsWithType(composition, TabContent);
+
+    expect(tabContents.length).toEqual(2);
+
+    let tabOne = tabContents.find((tab) => (tab.props.children === 'tab1'));
+    let tabTwo = tabContents.find((tab) => (tab.props.children === 'tab2'));
+
+    expect(tabOne.props.hidden).toEqual(false);
+    expect(tabTwo.props.hidden).toEqual(true);
+
+    // after tab change
+    composition.setState({ index: 1 });
+    composition.forceUpdate();
+
+    tabContents = ReactTestUtils
+      .scryRenderedComponentsWithType(composition, TabContent);
+
+    expect(tabContents.length).toEqual(2);
+
+    tabOne = tabContents.find((tab) => (tab.props.children === 'tab1'));
+    tabTwo = tabContents.find((tab) => (tab.props.children === 'tab2'));
+
+    expect(tabOne.props.hidden).toEqual(true);
+    expect(tabTwo.props.hidden).toEqual(false);
+  });
+
   describe('#render', function () {
     it('does not use fixed by default', function () {
       const tree = ReactTestUtils.renderIntoDocument(<Tabs theme={theme} />);
diff --git a/components/tabs/readme.md b/components/tabs/readme.md
index 2c473267d..68605eb74 100644
--- a/components/tabs/readme.md
+++ b/components/tabs/readme.md
@@ -71,6 +71,7 @@ This component acts as the wrapper and the main controller of the content that i
 | `className`                   | `String`        | `''`            | Additional class name to provide custom styling.|
 | `disableAnimatedBottomBorder` | `Boolean`       | `false`         | Disable the animation below the active tab.|
 | `fixed`                       | `Boolean`       | `false`         | If True, the tabs will be 'fixed tabs'.|
+| `hideMode`                    | `enum`(`'display'`,`'unmounted'`) | `unmounted`         | `unmounted` mode will not mount the tab content of inactive tabs. `display` mode will mount but hide inactive tabs. Consider holding state outside of the Tabs component before using `display` mode |
 | `index`                       | `Number`        | `0`             | Current <Tab> |
 | `inverse`                     | `Boolean`       | `false`         | If True, the tabs will have an inverse style.|
 | `onChange`                    | `Function`      |                 | Callback function that is fired when the tab changes.|

From 34313b823ed00b868b2db3758f3c535234eb73c5 Mon Sep 17 00:00:00 2001
From: Per Bergqwist <pbergqwist@contractor.ea.com>
Date: Wed, 31 Aug 2016 08:41:16 +0200
Subject: [PATCH 0777/1024] Fixed errors for Typescript 2.0.2

---
 components/app_bar/index.d.ts      | 2 +-
 components/autocomplete/index.d.ts | 2 +-
 components/avatar/index.d.ts       | 2 +-
 components/button/index.d.ts       | 2 +-
 components/card/index.d.ts         | 2 +-
 components/checkbox/index.d.ts     | 2 +-
 components/chip/index.d.ts         | 2 +-
 components/date_picker/index.d.ts  | 2 +-
 components/dialog/index.d.ts       | 2 +-
 components/drawer/index.d.ts       | 2 +-
 components/dropdown/index.d.ts     | 2 +-
 components/font_icon/index.d.ts    | 2 +-
 components/input/index.d.ts        | 2 +-
 components/layout/index.d.ts       | 2 +-
 components/link/index.d.ts         | 2 +-
 components/list/index.d.ts         | 2 +-
 components/menu/index.d.ts         | 2 +-
 components/navigation/index.d.ts   | 2 +-
 components/progress_bar/index.d.ts | 2 +-
 components/radio/index.d.ts        | 2 +-
 components/ripple/index.d.ts       | 2 +-
 components/slider/index.d.ts       | 2 +-
 components/snackbar/index.d.ts     | 2 +-
 components/switch/index.d.ts       | 2 +-
 components/table/index.d.ts        | 2 +-
 components/tabs/index.d.ts         | 2 +-
 components/time_picker/index.d.ts  | 2 +-
 lib/app_bar/index.d.ts             | 2 +-
 lib/autocomplete/index.d.ts        | 2 +-
 lib/avatar/index.d.ts              | 2 +-
 lib/button/index.d.ts              | 2 +-
 lib/card/index.d.ts                | 2 +-
 lib/checkbox/index.d.ts            | 2 +-
 lib/chip/index.d.ts                | 2 +-
 lib/date_picker/index.d.ts         | 2 +-
 lib/dialog/index.d.ts              | 2 +-
 lib/drawer/index.d.ts              | 2 +-
 lib/dropdown/index.d.ts            | 2 +-
 lib/font_icon/index.d.ts           | 2 +-
 lib/input/index.d.ts               | 2 +-
 lib/layout/index.d.ts              | 2 +-
 lib/link/index.d.ts                | 2 +-
 lib/list/index.d.ts                | 2 +-
 lib/menu/index.d.ts                | 2 +-
 lib/navigation/index.d.ts          | 2 +-
 lib/progress_bar/index.d.ts        | 2 +-
 lib/radio/index.d.ts               | 2 +-
 lib/ripple/index.d.ts              | 2 +-
 lib/slider/index.d.ts              | 2 +-
 lib/snackbar/index.d.ts            | 2 +-
 lib/switch/index.d.ts              | 2 +-
 lib/table/index.d.ts               | 2 +-
 lib/tabs/index.d.ts                | 2 +-
 lib/time_picker/index.d.ts         | 2 +-
 54 files changed, 54 insertions(+), 54 deletions(-)

diff --git a/components/app_bar/index.d.ts b/components/app_bar/index.d.ts
index 35fda69e4..00b13d29d 100644
--- a/components/app_bar/index.d.ts
+++ b/components/app_bar/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface AppBarTheme {
   /**
diff --git a/components/autocomplete/index.d.ts b/components/autocomplete/index.d.ts
index b149d3595..d05dc2081 100644
--- a/components/autocomplete/index.d.ts
+++ b/components/autocomplete/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface AutocompleteTheme {
   /**
diff --git a/components/avatar/index.d.ts b/components/avatar/index.d.ts
index 0d4fbd238..7b2d42281 100644
--- a/components/avatar/index.d.ts
+++ b/components/avatar/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface AvatarTheme {
   /**
diff --git a/components/button/index.d.ts b/components/button/index.d.ts
index c3b7b2c2b..9ffd59571 100644
--- a/components/button/index.d.ts
+++ b/components/button/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface ButtonTheme {
   /**
diff --git a/components/card/index.d.ts b/components/card/index.d.ts
index a05b6a703..73dcae511 100644
--- a/components/card/index.d.ts
+++ b/components/card/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface CardTheme {
   card?: string;
diff --git a/components/checkbox/index.d.ts b/components/checkbox/index.d.ts
index d0e504d09..23a69d0ff 100644
--- a/components/checkbox/index.d.ts
+++ b/components/checkbox/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface CheckboxTheme {
   /**
diff --git a/components/chip/index.d.ts b/components/chip/index.d.ts
index a75649c46..e705f395c 100644
--- a/components/chip/index.d.ts
+++ b/components/chip/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface ChipTheme {
   /**
diff --git a/components/date_picker/index.d.ts b/components/date_picker/index.d.ts
index 8660dca22..fafb9a39e 100644
--- a/components/date_picker/index.d.ts
+++ b/components/date_picker/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface DatePickerTheme {
   /**
diff --git a/components/dialog/index.d.ts b/components/dialog/index.d.ts
index 4980dba4f..6e2318449 100644
--- a/components/dialog/index.d.ts
+++ b/components/dialog/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface DialogTheme {
   /**
diff --git a/components/drawer/index.d.ts b/components/drawer/index.d.ts
index 992c521a0..a81a64ecb 100644
--- a/components/drawer/index.d.ts
+++ b/components/drawer/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface DrawerTheme {
   /**
diff --git a/components/dropdown/index.d.ts b/components/dropdown/index.d.ts
index 31f3e0ac0..cceddfcab 100644
--- a/components/dropdown/index.d.ts
+++ b/components/dropdown/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface DropdownTheme {
   /**
diff --git a/components/font_icon/index.d.ts b/components/font_icon/index.d.ts
index c3f05587a..2d4a9276b 100644
--- a/components/font_icon/index.d.ts
+++ b/components/font_icon/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 interface FontIconProps extends __ReactToolbox.Props {
   /**
diff --git a/components/input/index.d.ts b/components/input/index.d.ts
index f9ac8a2da..f8265ada0 100644
--- a/components/input/index.d.ts
+++ b/components/input/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface InputTheme {
   /**
diff --git a/components/layout/index.d.ts b/components/layout/index.d.ts
index ee13d174a..271cf9211 100644
--- a/components/layout/index.d.ts
+++ b/components/layout/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface LayoutTheme {
   /**
diff --git a/components/link/index.d.ts b/components/link/index.d.ts
index 00e18f3d0..4017c7a88 100644
--- a/components/link/index.d.ts
+++ b/components/link/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface LinkTheme {
   /**
diff --git a/components/list/index.d.ts b/components/list/index.d.ts
index a32f977cc..5fe467e77 100644
--- a/components/list/index.d.ts
+++ b/components/list/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface ListTheme {
   /**
diff --git a/components/menu/index.d.ts b/components/menu/index.d.ts
index c2609035d..505d5a8f4 100644
--- a/components/menu/index.d.ts
+++ b/components/menu/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface MenuTheme {
   /**
diff --git a/components/navigation/index.d.ts b/components/navigation/index.d.ts
index 47f46045c..d3425234e 100644
--- a/components/navigation/index.d.ts
+++ b/components/navigation/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface NavigationTheme {
   /**
diff --git a/components/progress_bar/index.d.ts b/components/progress_bar/index.d.ts
index 8a2a8425a..73fa7c33f 100644
--- a/components/progress_bar/index.d.ts
+++ b/components/progress_bar/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface ProgressBarTheme {
   /**
diff --git a/components/radio/index.d.ts b/components/radio/index.d.ts
index be2ab4ce5..93b1fe041 100644
--- a/components/radio/index.d.ts
+++ b/components/radio/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 interface RadioGroupProps extends __ReactToolbox.Props {
   /**
diff --git a/components/ripple/index.d.ts b/components/ripple/index.d.ts
index 059e6fb13..f12351cf8 100644
--- a/components/ripple/index.d.ts
+++ b/components/ripple/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface RippleTheme {
   /**
diff --git a/components/slider/index.d.ts b/components/slider/index.d.ts
index fc10f35c3..e78e0bcef 100644
--- a/components/slider/index.d.ts
+++ b/components/slider/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface SliderTheme {
   /**
diff --git a/components/snackbar/index.d.ts b/components/snackbar/index.d.ts
index 91066ea01..d51bd71cc 100644
--- a/components/snackbar/index.d.ts
+++ b/components/snackbar/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface SnackbarTheme {
   /**
diff --git a/components/switch/index.d.ts b/components/switch/index.d.ts
index ccb5fb1a0..f42ff881a 100644
--- a/components/switch/index.d.ts
+++ b/components/switch/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface SwitchTheme {
   /**
diff --git a/components/table/index.d.ts b/components/table/index.d.ts
index 629fd64f2..f77029943 100644
--- a/components/table/index.d.ts
+++ b/components/table/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface TableTheme {
   /**
diff --git a/components/tabs/index.d.ts b/components/tabs/index.d.ts
index e5aeb2cdb..fa30a3823 100644
--- a/components/tabs/index.d.ts
+++ b/components/tabs/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface TabsTheme {
   /**
diff --git a/components/time_picker/index.d.ts b/components/time_picker/index.d.ts
index 3d2d1092f..0254cd542 100644
--- a/components/time_picker/index.d.ts
+++ b/components/time_picker/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface TimePickerTheme {
   /**
diff --git a/lib/app_bar/index.d.ts b/lib/app_bar/index.d.ts
index 35fda69e4..00b13d29d 100644
--- a/lib/app_bar/index.d.ts
+++ b/lib/app_bar/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface AppBarTheme {
   /**
diff --git a/lib/autocomplete/index.d.ts b/lib/autocomplete/index.d.ts
index b149d3595..d05dc2081 100644
--- a/lib/autocomplete/index.d.ts
+++ b/lib/autocomplete/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface AutocompleteTheme {
   /**
diff --git a/lib/avatar/index.d.ts b/lib/avatar/index.d.ts
index 0d4fbd238..7b2d42281 100644
--- a/lib/avatar/index.d.ts
+++ b/lib/avatar/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface AvatarTheme {
   /**
diff --git a/lib/button/index.d.ts b/lib/button/index.d.ts
index c3b7b2c2b..9ffd59571 100644
--- a/lib/button/index.d.ts
+++ b/lib/button/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface ButtonTheme {
   /**
diff --git a/lib/card/index.d.ts b/lib/card/index.d.ts
index a05b6a703..73dcae511 100644
--- a/lib/card/index.d.ts
+++ b/lib/card/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface CardTheme {
   card?: string;
diff --git a/lib/checkbox/index.d.ts b/lib/checkbox/index.d.ts
index d0e504d09..23a69d0ff 100644
--- a/lib/checkbox/index.d.ts
+++ b/lib/checkbox/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface CheckboxTheme {
   /**
diff --git a/lib/chip/index.d.ts b/lib/chip/index.d.ts
index a75649c46..e705f395c 100644
--- a/lib/chip/index.d.ts
+++ b/lib/chip/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface ChipTheme {
   /**
diff --git a/lib/date_picker/index.d.ts b/lib/date_picker/index.d.ts
index 8660dca22..fafb9a39e 100644
--- a/lib/date_picker/index.d.ts
+++ b/lib/date_picker/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface DatePickerTheme {
   /**
diff --git a/lib/dialog/index.d.ts b/lib/dialog/index.d.ts
index 4980dba4f..6e2318449 100644
--- a/lib/dialog/index.d.ts
+++ b/lib/dialog/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface DialogTheme {
   /**
diff --git a/lib/drawer/index.d.ts b/lib/drawer/index.d.ts
index 992c521a0..a81a64ecb 100644
--- a/lib/drawer/index.d.ts
+++ b/lib/drawer/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface DrawerTheme {
   /**
diff --git a/lib/dropdown/index.d.ts b/lib/dropdown/index.d.ts
index 31f3e0ac0..cceddfcab 100644
--- a/lib/dropdown/index.d.ts
+++ b/lib/dropdown/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface DropdownTheme {
   /**
diff --git a/lib/font_icon/index.d.ts b/lib/font_icon/index.d.ts
index c3f05587a..2d4a9276b 100644
--- a/lib/font_icon/index.d.ts
+++ b/lib/font_icon/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 interface FontIconProps extends __ReactToolbox.Props {
   /**
diff --git a/lib/input/index.d.ts b/lib/input/index.d.ts
index f9ac8a2da..f8265ada0 100644
--- a/lib/input/index.d.ts
+++ b/lib/input/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface InputTheme {
   /**
diff --git a/lib/layout/index.d.ts b/lib/layout/index.d.ts
index ee13d174a..271cf9211 100644
--- a/lib/layout/index.d.ts
+++ b/lib/layout/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface LayoutTheme {
   /**
diff --git a/lib/link/index.d.ts b/lib/link/index.d.ts
index 00e18f3d0..4017c7a88 100644
--- a/lib/link/index.d.ts
+++ b/lib/link/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface LinkTheme {
   /**
diff --git a/lib/list/index.d.ts b/lib/list/index.d.ts
index a32f977cc..5fe467e77 100644
--- a/lib/list/index.d.ts
+++ b/lib/list/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface ListTheme {
   /**
diff --git a/lib/menu/index.d.ts b/lib/menu/index.d.ts
index c2609035d..505d5a8f4 100644
--- a/lib/menu/index.d.ts
+++ b/lib/menu/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface MenuTheme {
   /**
diff --git a/lib/navigation/index.d.ts b/lib/navigation/index.d.ts
index 47f46045c..d3425234e 100644
--- a/lib/navigation/index.d.ts
+++ b/lib/navigation/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface NavigationTheme {
   /**
diff --git a/lib/progress_bar/index.d.ts b/lib/progress_bar/index.d.ts
index 8a2a8425a..73fa7c33f 100644
--- a/lib/progress_bar/index.d.ts
+++ b/lib/progress_bar/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface ProgressBarTheme {
   /**
diff --git a/lib/radio/index.d.ts b/lib/radio/index.d.ts
index be2ab4ce5..93b1fe041 100644
--- a/lib/radio/index.d.ts
+++ b/lib/radio/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 interface RadioGroupProps extends __ReactToolbox.Props {
   /**
diff --git a/lib/ripple/index.d.ts b/lib/ripple/index.d.ts
index 059e6fb13..f12351cf8 100644
--- a/lib/ripple/index.d.ts
+++ b/lib/ripple/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface RippleTheme {
   /**
diff --git a/lib/slider/index.d.ts b/lib/slider/index.d.ts
index fc10f35c3..e78e0bcef 100644
--- a/lib/slider/index.d.ts
+++ b/lib/slider/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface SliderTheme {
   /**
diff --git a/lib/snackbar/index.d.ts b/lib/snackbar/index.d.ts
index 91066ea01..d51bd71cc 100644
--- a/lib/snackbar/index.d.ts
+++ b/lib/snackbar/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface SnackbarTheme {
   /**
diff --git a/lib/switch/index.d.ts b/lib/switch/index.d.ts
index ccb5fb1a0..f42ff881a 100644
--- a/lib/switch/index.d.ts
+++ b/lib/switch/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface SwitchTheme {
   /**
diff --git a/lib/table/index.d.ts b/lib/table/index.d.ts
index 629fd64f2..f77029943 100644
--- a/lib/table/index.d.ts
+++ b/lib/table/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface TableTheme {
   /**
diff --git a/lib/tabs/index.d.ts b/lib/tabs/index.d.ts
index e5aeb2cdb..fa30a3823 100644
--- a/lib/tabs/index.d.ts
+++ b/lib/tabs/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface TabsTheme {
   /**
diff --git a/lib/time_picker/index.d.ts b/lib/time_picker/index.d.ts
index 3d2d1092f..0254cd542 100644
--- a/lib/time_picker/index.d.ts
+++ b/lib/time_picker/index.d.ts
@@ -1,4 +1,4 @@
-import __ReactToolbox from "../index.d.ts";
+import __ReactToolbox from "../index";
 
 export interface TimePickerTheme {
   /**

From 8a91ab3bed61dad017c0543bc1911c0e7abcaca3 Mon Sep 17 00:00:00 2001
From: Marcin Szamotulski <mszamot@gmail.com>
Date: Wed, 31 Aug 2016 19:01:38 +0100
Subject: [PATCH 0778/1024] use Event.currentTarget in Calendar.changeViewMonth

Also do the same on Calendar.handleYearClick.
---
 components/date_picker/Calendar.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/date_picker/Calendar.js b/components/date_picker/Calendar.js
index 046753428..e1945e875 100644
--- a/components/date_picker/Calendar.js
+++ b/components/date_picker/Calendar.js
@@ -56,14 +56,14 @@ const factory = (IconButton) => {
     };
 
     handleYearClick = (event) => {
-      const year = parseInt(event.target.id);
+      const year = parseInt(event.currentTarget.id);
       const viewDate = time.setYear(this.props.selectedDate, year);
       this.setState({viewDate});
       this.props.onChange(viewDate, false);
     };
 
     changeViewMonth = (event) => {
-      const direction = event.target.id;
+      const direction = event.currentTarget.id;
       this.setState({
         direction,
         viewDate: time.addMonths(this.state.viewDate, DIRECTION_STEPS[direction])

From 64a859e9df4df59ac7046aaa6a5939dbb2ec1460 Mon Sep 17 00:00:00 2001
From: rubenmoya <rmoyarodriguez@gmail.com>
Date: Thu, 1 Sep 2016 12:12:23 +0200
Subject: [PATCH 0779/1024] Fix table border

---
 components/table/theme.scss | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/table/theme.scss b/components/table/theme.scss
index 50db57d34..3b8521f15 100644
--- a/components/table/theme.scss
+++ b/components/table/theme.scss
@@ -8,10 +8,10 @@
   font-size: $font-size-tiny;
   color: $table-text-color;
   text-align: left;
+  border-spacing: 0;
   tr {
     height: $table-row-height;
     line-height: $table-row-height;
-    border-bottom: $table-row-divider;
   }
   th {
     font-weight: $font-weight-bold;
@@ -20,6 +20,7 @@
     }
   }
   th, td {
+    border-bottom: $table-row-divider;
     position: relative;
     padding: 0 $table-row-offset;
     &.selectable {
@@ -35,7 +36,9 @@
 .row {
   transition: background-color $animation-duration $animation-curve-default;
   &:last-child {
-    border-color: transparent;
+    td {
+      border-color: transparent;
+    }
   }
   > td {
     > input {

From d48799ba09a3250562a1b72f1b8d0dc5988c12f1 Mon Sep 17 00:00:00 2001
From: Marcin Szamotulski <mszamot@gmail.com>
Date: Thu, 1 Sep 2016 17:13:30 +0100
Subject: [PATCH 0780/1024] build new version

---
 lib/autocomplete/Autocomplete.js    | 30 +++++++++---------
 lib/button/Button.js                |  4 +--
 lib/button/IconButton.js            |  4 +--
 lib/button/theme.scss               |  6 ++--
 lib/checkbox/Checkbox.js            |  4 +--
 lib/date_picker/Calendar.js         |  8 ++---
 lib/date_picker/CalendarDay.js      |  4 +--
 lib/date_picker/CalendarMonth.js    |  4 +--
 lib/date_picker/DatePicker.js       |  4 +--
 lib/date_picker/DatePickerDialog.js |  4 +--
 lib/dialog/theme.scss               | 12 ++++++++
 lib/dropdown/Dropdown.js            |  4 +--
 lib/form/Form.js                    |  4 +--
 lib/hoc/ActivableRenderer.js        |  4 +--
 lib/hoc/Portal.js                   |  2 +-
 lib/input/Input.js                  |  4 +--
 lib/list/List.js                    |  2 +-
 lib/list/ListItem.js                |  4 +--
 lib/list/ListItemContent.js         |  2 +-
 lib/menu/IconMenu.js                |  7 +++--
 lib/menu/Menu.js                    |  4 +--
 lib/menu/MenuItem.js                |  4 +--
 lib/overlay/Overlay.js              |  2 +-
 lib/progress_bar/ProgressBar.js     |  2 +-
 lib/radio/RadioButton.js            |  4 +--
 lib/radio/RadioGroup.js             |  4 +--
 lib/ripple/Ripple.js                | 39 ++++++++++++------------
 lib/slider/Slider.js                |  4 +--
 lib/snackbar/Snackbar.js            |  2 +-
 lib/switch/Switch.js                |  4 +--
 lib/table/Table.js                  |  4 +--
 lib/table/TableRow.js               |  4 +--
 lib/tabs/Tab.js                     |  4 +--
 lib/tabs/TabContent.js              |  2 +-
 lib/tabs/Tabs.js                    | 47 ++++++++++++++++++++++++-----
 lib/tabs/__tests__/index.spec.js    | 41 ++++++++++++++++++++++++-
 lib/tabs/_config.scss               |  7 +++++
 lib/tabs/theme.scss                 | 24 +++++++++++++++
 lib/time_picker/Clock.js            |  4 +--
 lib/time_picker/ClockFace.js        |  4 +--
 lib/time_picker/ClockHand.js        |  4 +--
 lib/time_picker/ClockHours.js       |  4 +--
 lib/time_picker/ClockMinutes.js     |  4 +--
 lib/time_picker/TimePicker.js       |  4 +--
 lib/time_picker/TimePickerDialog.js |  4 +--
 lib/tooltip/Tooltip.js              | 12 ++++----
 lib/utils/utils.js                  |  9 ++++++
 47 files changed, 248 insertions(+), 120 deletions(-)

diff --git a/lib/autocomplete/Autocomplete.js b/lib/autocomplete/Autocomplete.js
index 70f2a8dbc..a03d125e0 100644
--- a/lib/autocomplete/Autocomplete.js
+++ b/lib/autocomplete/Autocomplete.js
@@ -64,7 +64,7 @@ var factory = function factory(Chip, Input) {
     _inherits(Autocomplete, _Component);
 
     function Autocomplete() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -74,7 +74,7 @@ var factory = function factory(Chip, Input) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Autocomplete)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Autocomplete.__proto__ || Object.getPrototypeOf(Autocomplete)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         direction: _this.props.direction,
         focus: false,
         showAllSuggestions: _this.props.showSuggestionsWhenValueIsSet,
@@ -109,7 +109,7 @@ var factory = function factory(Chip, Input) {
             }
             _this.setState({ active: target });
           }
-          _this.select(target, event);
+          _this.select(event, target);
         }
 
         if (event.which === 27) _reactDom2.default.findDOMNode(_this).querySelector('input').blur();
@@ -123,10 +123,11 @@ var factory = function factory(Chip, Input) {
         }
       }, _this.handleSuggestionHover = function (event) {
         _this.setState({ active: event.target.id });
-      }, _this.select = function (event) {
+      }, _this.select = function (event, target) {
         _events2.default.pauseEvent(event);
         var values = _this.values(_this.props.value);
-        _this.handleChange([event.target.id].concat(_toConsumableArray(values.keys())), event);
+        var newValue = target === void 0 ? event.target.id : target;
+        _this.handleChange([newValue].concat(_toConsumableArray(values.keys())), event);
       }, _temp), _possibleConstructorReturn(_this, _ret);
     }
 
@@ -176,7 +177,8 @@ var factory = function factory(Chip, Input) {
       key: 'suggestions',
       value: function suggestions() {
         var suggest = new Map();
-        var query = (this.state.query || (!this.props.multiple ? this.props.value : '')).toLowerCase().trim() || '';
+        var rawQuery = this.state.query || this.props.multiple ? '' : this.props.value;
+        var query = (rawQuery || '').toLowerCase().trim();
         var values = this.values();
         var source = this.source();
 
@@ -333,11 +335,11 @@ var factory = function factory(Chip, Input) {
         var _this2 = this;
 
         if (this.props.multiple) {
-          var selectedItems = [].concat(_toConsumableArray(this.values())).map(function (_ref) {
-            var _ref2 = _slicedToArray(_ref, 2);
+          var selectedItems = [].concat(_toConsumableArray(this.values())).map(function (_ref2) {
+            var _ref3 = _slicedToArray(_ref2, 2);
 
-            var key = _ref2[0];
-            var value = _ref2[1];
+            var key = _ref3[0];
+            var value = _ref3[1];
 
             return _react2.default.createElement(
               Chip,
@@ -365,11 +367,11 @@ var factory = function factory(Chip, Input) {
 
         var theme = this.props.theme;
 
-        var suggestions = [].concat(_toConsumableArray(this.suggestions())).map(function (_ref3) {
-          var _ref4 = _slicedToArray(_ref3, 2);
+        var suggestions = [].concat(_toConsumableArray(this.suggestions())).map(function (_ref4) {
+          var _ref5 = _slicedToArray(_ref4, 2);
 
-          var key = _ref4[0];
-          var value = _ref4[1];
+          var key = _ref5[0];
+          var value = _ref5[1];
 
           var className = (0, _classnames5.default)(theme.suggestion, _defineProperty({}, theme.active, _this3.state.active === key));
           return _react2.default.createElement(
diff --git a/lib/button/Button.js b/lib/button/Button.js
index 2b9e424f5..b38aeb3b7 100644
--- a/lib/button/Button.js
+++ b/lib/button/Button.js
@@ -46,7 +46,7 @@ var factory = function factory(ripple, FontIcon) {
     _inherits(Button, _Component);
 
     function Button() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -56,7 +56,7 @@ var factory = function factory(ripple, FontIcon) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Button)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Button.__proto__ || Object.getPrototypeOf(Button)).call.apply(_ref, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
         _this.refs.button.blur();
         if (_this.props.onMouseUp) _this.props.onMouseUp(event);
       }, _this.handleMouseLeave = function (event) {
diff --git a/lib/button/IconButton.js b/lib/button/IconButton.js
index 98f6331b6..40f22fd91 100644
--- a/lib/button/IconButton.js
+++ b/lib/button/IconButton.js
@@ -46,7 +46,7 @@ var factory = function factory(ripple, FontIcon) {
     _inherits(IconButton, _Component);
 
     function IconButton() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -56,7 +56,7 @@ var factory = function factory(ripple, FontIcon) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(IconButton)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = IconButton.__proto__ || Object.getPrototypeOf(IconButton)).call.apply(_ref, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
         _this.refs.button.blur();
         if (_this.props.onMouseUp) _this.props.onMouseUp(event);
       }, _this.handleMouseLeave = function (event) {
diff --git a/lib/button/theme.scss b/lib/button/theme.scss
index f57d6027e..cff21b375 100644
--- a/lib/button/theme.scss
+++ b/lib/button/theme.scss
@@ -31,14 +31,14 @@
   > span:not([data-react-toolbox="tooltip"]) {
     display: inline-block;
     line-height: $button-height;
-    vertical-align: middle;
+    vertical-align: top;
   }
   > svg {
     display: inline-block;
     width: 1em;
     height: $button-height;
     font-size: 120%;
-    vertical-align: middle;
+    vertical-align: top;
     fill: currentColor;
   }
   > * {
@@ -126,7 +126,7 @@
   > .icon, svg {
     font-size: $button-toggle-font-size;
     line-height: $button-height;
-    vertical-align: middle;
+    vertical-align: top;
   }
   > .rippleWrapper {
     border-radius: 50%;
diff --git a/lib/checkbox/Checkbox.js b/lib/checkbox/Checkbox.js
index 164ffb674..a7d090d32 100644
--- a/lib/checkbox/Checkbox.js
+++ b/lib/checkbox/Checkbox.js
@@ -46,7 +46,7 @@ var factory = function factory(Check) {
     _inherits(Checkbox, _Component);
 
     function Checkbox() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -56,7 +56,7 @@ var factory = function factory(Check) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Checkbox)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleToggle = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Checkbox.__proto__ || Object.getPrototypeOf(Checkbox)).call.apply(_ref, [this].concat(args))), _this), _this.handleToggle = function (event) {
         if (event.pageX !== 0 && event.pageY !== 0) _this.blur();
         if (!_this.props.disabled && _this.props.onChange) {
           _this.props.onChange(!_this.props.checked, event);
diff --git a/lib/date_picker/Calendar.js b/lib/date_picker/Calendar.js
index d4e5a6630..31b1de125 100644
--- a/lib/date_picker/Calendar.js
+++ b/lib/date_picker/Calendar.js
@@ -43,7 +43,7 @@ var factory = function factory(IconButton) {
     _inherits(Calendar, _Component);
 
     function Calendar() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -53,17 +53,17 @@ var factory = function factory(IconButton) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Calendar)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Calendar.__proto__ || Object.getPrototypeOf(Calendar)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         viewDate: _this.props.selectedDate
       }, _this.handleDayClick = function (day) {
         _this.props.onChange(_time2.default.setDay(_this.state.viewDate, day), true);
       }, _this.handleYearClick = function (event) {
-        var year = parseInt(event.target.id);
+        var year = parseInt(event.currentTarget.id);
         var viewDate = _time2.default.setYear(_this.props.selectedDate, year);
         _this.setState({ viewDate: viewDate });
         _this.props.onChange(viewDate, false);
       }, _this.changeViewMonth = function (event) {
-        var direction = event.target.id;
+        var direction = event.currentTarget.id;
         _this.setState({
           direction: direction,
           viewDate: _time2.default.addMonths(_this.state.viewDate, DIRECTION_STEPS[direction])
diff --git a/lib/date_picker/CalendarDay.js b/lib/date_picker/CalendarDay.js
index 023206fde..af1b4a944 100644
--- a/lib/date_picker/CalendarDay.js
+++ b/lib/date_picker/CalendarDay.js
@@ -32,7 +32,7 @@ var Day = function (_Component) {
   _inherits(Day, _Component);
 
   function Day() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -42,7 +42,7 @@ var Day = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Day)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function () {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Day.__proto__ || Object.getPrototypeOf(Day)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function () {
       if (!_this.props.disabled && _this.props.onClick) {
         _this.props.onClick(_this.props.day);
       }
diff --git a/lib/date_picker/CalendarMonth.js b/lib/date_picker/CalendarMonth.js
index 772c665e3..ad3afbe25 100644
--- a/lib/date_picker/CalendarMonth.js
+++ b/lib/date_picker/CalendarMonth.js
@@ -36,7 +36,7 @@ var Month = function (_Component) {
   _inherits(Month, _Component);
 
   function Month() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -46,7 +46,7 @@ var Month = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Month)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleDayClick = function (day) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Month.__proto__ || Object.getPrototypeOf(Month)).call.apply(_ref, [this].concat(args))), _this), _this.handleDayClick = function (day) {
       if (_this.props.onDayClick) _this.props.onDayClick(day);
     }, _temp), _possibleConstructorReturn(_this, _ret);
   }
diff --git a/lib/date_picker/DatePicker.js b/lib/date_picker/DatePicker.js
index a8409ea52..afaf0b1a8 100644
--- a/lib/date_picker/DatePicker.js
+++ b/lib/date_picker/DatePicker.js
@@ -66,7 +66,7 @@ var factory = function factory(Input, DatePickerDialog) {
     _inherits(DatePicker, _Component);
 
     function DatePicker() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -76,7 +76,7 @@ var factory = function factory(Input, DatePickerDialog) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(DatePicker)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = DatePicker.__proto__ || Object.getPrototypeOf(DatePicker)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         active: _this.props.active
       }, _this.handleDismiss = function () {
         _this.setState({ active: false });
diff --git a/lib/date_picker/DatePickerDialog.js b/lib/date_picker/DatePickerDialog.js
index 0a3d91105..2c227b4c6 100644
--- a/lib/date_picker/DatePickerDialog.js
+++ b/lib/date_picker/DatePickerDialog.js
@@ -31,7 +31,7 @@ var factory = function factory(Dialog, Calendar) {
     _inherits(CalendarDialog, _Component);
 
     function CalendarDialog() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -41,7 +41,7 @@ var factory = function factory(Dialog, Calendar) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(CalendarDialog)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = CalendarDialog.__proto__ || Object.getPrototypeOf(CalendarDialog)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         display: 'months',
         date: _this.props.value
       }, _this.handleNewDate = function (value, dayClick) {
diff --git a/lib/dialog/theme.scss b/lib/dialog/theme.scss
index 62e7388db..c7ac36f7f 100644
--- a/lib/dialog/theme.scss
+++ b/lib/dialog/theme.scss
@@ -47,6 +47,18 @@
   width: 96vw;
 }
 
+.fullscreen {
+  width: 96vw;
+
+  @media screen and (max-width: $layout-breakpoint-xs) {
+    max-width: 100vw;
+    max-height: 100vh;
+    min-height: 100vh;
+    width: 100vw;
+    border-radius: 0;
+  }
+}
+
 .title {
   @include typo-title();
   flex-grow: 0;
diff --git a/lib/dropdown/Dropdown.js b/lib/dropdown/Dropdown.js
index a9fe5171c..5009fcc6f 100644
--- a/lib/dropdown/Dropdown.js
+++ b/lib/dropdown/Dropdown.js
@@ -50,7 +50,7 @@ var factory = function factory(Input) {
     _inherits(Dropdown, _Component);
 
     function Dropdown() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -60,7 +60,7 @@ var factory = function factory(Input) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Dropdown)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Dropdown.__proto__ || Object.getPrototypeOf(Dropdown)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         active: false,
         up: false
       }, _this.close = function () {
diff --git a/lib/form/Form.js b/lib/form/Form.js
index 7de399c99..fe56e77f7 100644
--- a/lib/form/Form.js
+++ b/lib/form/Form.js
@@ -80,7 +80,7 @@ var factory = function factory(Autocomplete, Button, Checkbox, DatePicker, Dropd
     _inherits(Form, _Component);
 
     function Form() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -90,7 +90,7 @@ var factory = function factory(Autocomplete, Button, Checkbox, DatePicker, Dropd
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Form)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.onSubmit = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Form.__proto__ || Object.getPrototypeOf(Form)).call.apply(_ref, [this].concat(args))), _this), _this.onSubmit = function (event) {
         event.preventDefault();
         if (_this.props.onSubmit) _this.props.onSubmit(event);
       }, _this.onChange = function (field, value, event) {
diff --git a/lib/hoc/ActivableRenderer.js b/lib/hoc/ActivableRenderer.js
index e64654f71..f15f41a35 100644
--- a/lib/hoc/ActivableRenderer.js
+++ b/lib/hoc/ActivableRenderer.js
@@ -31,7 +31,7 @@ var ActivableRendererFactory = function ActivableRendererFactory() {
       _inherits(ActivableRenderer, _Component);
 
       function ActivableRenderer() {
-        var _Object$getPrototypeO;
+        var _ref;
 
         var _temp, _this, _ret;
 
@@ -41,7 +41,7 @@ var ActivableRendererFactory = function ActivableRendererFactory() {
           args[_key] = arguments[_key];
         }
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(ActivableRenderer)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ActivableRenderer.__proto__ || Object.getPrototypeOf(ActivableRenderer)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
           active: _this.props.active,
           rendered: _this.props.active
         }, _temp), _possibleConstructorReturn(_this, _ret);
diff --git a/lib/hoc/Portal.js b/lib/hoc/Portal.js
index bf12d9039..0d8cda45a 100644
--- a/lib/hoc/Portal.js
+++ b/lib/hoc/Portal.js
@@ -28,7 +28,7 @@ var Portal = function (_Component) {
   function Portal() {
     _classCallCheck(this, Portal);
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(Portal).apply(this, arguments));
+    return _possibleConstructorReturn(this, (Portal.__proto__ || Object.getPrototypeOf(Portal)).apply(this, arguments));
   }
 
   _createClass(Portal, [{
diff --git a/lib/input/Input.js b/lib/input/Input.js
index d29f218bc..e561fc219 100644
--- a/lib/input/Input.js
+++ b/lib/input/Input.js
@@ -44,7 +44,7 @@ var factory = function factory(FontIcon) {
     _inherits(Input, _React$Component);
 
     function Input() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -54,7 +54,7 @@ var factory = function factory(FontIcon) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Input)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleChange = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Input.__proto__ || Object.getPrototypeOf(Input)).call.apply(_ref, [this].concat(args))), _this), _this.handleChange = function (event) {
         var _this$props = _this.props;
         var onChange = _this$props.onChange;
         var multiline = _this$props.multiline;
diff --git a/lib/list/List.js b/lib/list/List.js
index cd315c954..eac163f81 100644
--- a/lib/list/List.js
+++ b/lib/list/List.js
@@ -38,7 +38,7 @@ var factory = function factory(ListItem) {
     function List() {
       _classCallCheck(this, List);
 
-      return _possibleConstructorReturn(this, Object.getPrototypeOf(List).apply(this, arguments));
+      return _possibleConstructorReturn(this, (List.__proto__ || Object.getPrototypeOf(List)).apply(this, arguments));
     }
 
     _createClass(List, [{
diff --git a/lib/list/ListItem.js b/lib/list/ListItem.js
index 193dec03f..3358acddb 100644
--- a/lib/list/ListItem.js
+++ b/lib/list/ListItem.js
@@ -44,7 +44,7 @@ var factory = function factory(ripple, ListItemLayout, ListItemContent) {
     _inherits(ListItem, _Component);
 
     function ListItem() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -54,7 +54,7 @@ var factory = function factory(ripple, ListItemLayout, ListItemContent) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(ListItem)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ListItem.__proto__ || Object.getPrototypeOf(ListItem)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
         if (_this.props.onClick && !_this.props.disabled) {
           _this.props.onClick(event);
         }
diff --git a/lib/list/ListItemContent.js b/lib/list/ListItemContent.js
index f9924b4a0..f288d9dff 100644
--- a/lib/list/ListItemContent.js
+++ b/lib/list/ListItemContent.js
@@ -42,7 +42,7 @@ var factory = function factory(ListItemText) {
     function ListItemContent() {
       _classCallCheck(this, ListItemContent);
 
-      return _possibleConstructorReturn(this, Object.getPrototypeOf(ListItemContent).apply(this, arguments));
+      return _possibleConstructorReturn(this, (ListItemContent.__proto__ || Object.getPrototypeOf(ListItemContent)).apply(this, arguments));
     }
 
     _createClass(ListItemContent, [{
diff --git a/lib/menu/IconMenu.js b/lib/menu/IconMenu.js
index 062b856fa..70bff718d 100644
--- a/lib/menu/IconMenu.js
+++ b/lib/menu/IconMenu.js
@@ -40,7 +40,7 @@ var factory = function factory(IconButton, Menu) {
     _inherits(IconMenu, _Component);
 
     function IconMenu() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -50,7 +50,7 @@ var factory = function factory(IconButton, Menu) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(IconMenu)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = IconMenu.__proto__ || Object.getPrototypeOf(IconMenu)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         active: false
       }, _this.handleButtonClick = function (event) {
         _this.setState({ active: !_this.state.active });
@@ -84,7 +84,8 @@ var factory = function factory(IconButton, Menu) {
               position: this.props.position,
               ripple: this.props.menuRipple,
               selectable: this.props.selectable,
-              selected: this.props.selected
+              selected: this.props.selected,
+              theme: this.props.theme
             },
             this.props.children
           )
diff --git a/lib/menu/Menu.js b/lib/menu/Menu.js
index bcc8ed066..51ab885d7 100644
--- a/lib/menu/Menu.js
+++ b/lib/menu/Menu.js
@@ -53,7 +53,7 @@ var factory = function factory(MenuItem) {
     _inherits(Menu, _Component);
 
     function Menu() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -63,7 +63,7 @@ var factory = function factory(MenuItem) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Menu)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Menu.__proto__ || Object.getPrototypeOf(Menu)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         active: _this.props.active,
         rippled: false
       }, _this.handleDocumentClick = function (event) {
diff --git a/lib/menu/MenuItem.js b/lib/menu/MenuItem.js
index 7562dfa0b..2670f4325 100644
--- a/lib/menu/MenuItem.js
+++ b/lib/menu/MenuItem.js
@@ -46,7 +46,7 @@ var factory = function factory(ripple) {
     _inherits(MenuItem, _Component);
 
     function MenuItem() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -56,7 +56,7 @@ var factory = function factory(ripple) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(MenuItem)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = MenuItem.__proto__ || Object.getPrototypeOf(MenuItem)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
         if (_this.props.onClick && !_this.props.disabled) {
           _this.props.onClick(event, _this);
         }
diff --git a/lib/overlay/Overlay.js b/lib/overlay/Overlay.js
index 0bf6de75e..5fa1d7d61 100644
--- a/lib/overlay/Overlay.js
+++ b/lib/overlay/Overlay.js
@@ -39,7 +39,7 @@ var Overlay = function (_Component) {
   function Overlay() {
     _classCallCheck(this, Overlay);
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(Overlay).apply(this, arguments));
+    return _possibleConstructorReturn(this, (Overlay.__proto__ || Object.getPrototypeOf(Overlay)).apply(this, arguments));
   }
 
   _createClass(Overlay, [{
diff --git a/lib/progress_bar/ProgressBar.js b/lib/progress_bar/ProgressBar.js
index c1a36201a..f8a16e85e 100644
--- a/lib/progress_bar/ProgressBar.js
+++ b/lib/progress_bar/ProgressBar.js
@@ -39,7 +39,7 @@ var ProgressBar = function (_Component) {
   function ProgressBar() {
     _classCallCheck(this, ProgressBar);
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(ProgressBar).apply(this, arguments));
+    return _possibleConstructorReturn(this, (ProgressBar.__proto__ || Object.getPrototypeOf(ProgressBar)).apply(this, arguments));
   }
 
   _createClass(ProgressBar, [{
diff --git a/lib/radio/RadioButton.js b/lib/radio/RadioButton.js
index 7fe8abe0b..71ee095a7 100644
--- a/lib/radio/RadioButton.js
+++ b/lib/radio/RadioButton.js
@@ -44,7 +44,7 @@ var factory = function factory(Radio) {
     _inherits(RadioButton, _Component);
 
     function RadioButton() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -54,7 +54,7 @@ var factory = function factory(Radio) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(RadioButton)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RadioButton.__proto__ || Object.getPrototypeOf(RadioButton)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
         var _this$props = _this.props;
         var checked = _this$props.checked;
         var disabled = _this$props.disabled;
diff --git a/lib/radio/RadioGroup.js b/lib/radio/RadioGroup.js
index e85ce1dd9..a69b9fe36 100644
--- a/lib/radio/RadioGroup.js
+++ b/lib/radio/RadioGroup.js
@@ -34,7 +34,7 @@ var factory = function factory(RadioButton) {
     _inherits(RadioGroup, _Component);
 
     function RadioGroup() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -44,7 +44,7 @@ var factory = function factory(RadioButton) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(RadioGroup)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleChange = function (value) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RadioGroup.__proto__ || Object.getPrototypeOf(RadioGroup)).call.apply(_ref, [this].concat(args))), _this), _this.handleChange = function (value) {
         if (_this.props.onChange) _this.props.onChange(value);
       }, _temp), _possibleConstructorReturn(_this, _ret);
     }
diff --git a/lib/ripple/Ripple.js b/lib/ripple/Ripple.js
index 4400c42f4..cf2c19494 100644
--- a/lib/ripple/Ripple.js
+++ b/lib/ripple/Ripple.js
@@ -22,9 +22,9 @@ var _classnames2 = require('classnames');
 
 var _classnames3 = _interopRequireDefault(_classnames2);
 
-var _reactAddonsUpdate = require('react-addons-update');
+var _immutabilityHelper = require('immutability-helper');
 
-var _reactAddonsUpdate2 = _interopRequireDefault(_reactAddonsUpdate);
+var _immutabilityHelper2 = _interopRequireDefault(_immutabilityHelper);
 
 var _reactCssThemr = require('react-css-themr');
 
@@ -38,6 +38,10 @@ var _prefixer = require('../utils/prefixer');
 
 var _prefixer2 = _interopRequireDefault(_prefixer);
 
+var _utils = require('../utils/utils');
+
+var _utils2 = _interopRequireDefault(_utils);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -76,7 +80,7 @@ var rippleFactory = function rippleFactory() {
       _inherits(RippledComponent, _Component);
 
       function RippledComponent() {
-        var _Object$getPrototypeO;
+        var _ref;
 
         var _temp, _this, _ret;
 
@@ -86,7 +90,7 @@ var rippleFactory = function rippleFactory() {
           args[_key] = arguments[_key];
         }
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(RippledComponent)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RippledComponent.__proto__ || Object.getPrototypeOf(RippledComponent)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
           ripples: {}
         }, _this.handleMouseDown = function (event) {
           if (_this.props.onMouseDown) _this.props.onMouseDown(event);
@@ -146,10 +150,7 @@ var rippleFactory = function rippleFactory() {
             if (e.propertyName === 'opacity') {
               if (self.props.onRippleEnded) self.props.onRippleEnded(e);
               _events2.default.removeEventListenerOnTransitionEnded(self.refs[rippleKey], onOpacityEnd);
-              self.setState({ ripples: (0, _reactAddonsUpdate2.default)(self.state.ripples, _defineProperty({}, rippleKey, { $apply: function $apply(ripplesState) {
-                    delete ripplesState[rippleKey];
-                    return ripplesState;
-                  } })) });
+              self.setState({ ripples: _utils2.default.removeObjectKey(rippleKey, self.state.ripples) });
             }
           });
         }
@@ -184,9 +185,9 @@ var rippleFactory = function rippleFactory() {
               var endRipple = _this3.addRippleDeactivateEventListener(isTouch, key);
               var initialState = { active: false, restarting: true, top: top, left: left, width: width, endRipple: endRipple };
               var runningState = { active: true, restarting: false };
-              _this3.setState((0, _reactAddonsUpdate2.default)(_this3.state, { ripples: _defineProperty({}, key, { $set: initialState }) }), function () {
+              _this3.setState((0, _immutabilityHelper2.default)(_this3.state, { ripples: _defineProperty({}, key, { $set: initialState }) }), function () {
                 _this3.refs[key].offsetWidth; //eslint-disable-line no-unused-expressions
-                _this3.setState((0, _reactAddonsUpdate2.default)(_this3.state, { ripples: _defineProperty({}, key, { $merge: runningState }) }));
+                _this3.setState((0, _immutabilityHelper2.default)(_this3.state, { ripples: _defineProperty({}, key, { $merge: runningState }) }));
               });
             })();
           }
@@ -249,7 +250,7 @@ var rippleFactory = function rippleFactory() {
         key: 'getNextKey',
         value: function getNextKey() {
           this.currentCount = this.currentCount ? this.currentCount + 1 : 1;
-          return this.currentCount.toString();
+          return 'ripple' + this.currentCount;
         }
 
         /**
@@ -262,7 +263,7 @@ var rippleFactory = function rippleFactory() {
       }, {
         key: 'getLastKey',
         value: function getLastKey() {
-          return this.currentCount.toString();
+          return 'ripple' + this.currentCount;
         }
 
         /**
@@ -300,19 +301,19 @@ var rippleFactory = function rippleFactory() {
           var self = this;
           return function endRipple() {
             document.removeEventListener(eventType, endRipple);
-            self.setState({ ripples: (0, _reactAddonsUpdate2.default)(self.state.ripples, _defineProperty({}, rippleKey, { $merge: { active: false } })) });
+            self.setState({ ripples: (0, _immutabilityHelper2.default)(self.state.ripples, _defineProperty({}, rippleKey, { $merge: { active: false } })) });
           };
         }
       }, {
         key: 'renderRipple',
-        value: function renderRipple(key, className, _ref) {
+        value: function renderRipple(key, className, _ref2) {
           var _classnames;
 
-          var active = _ref.active;
-          var left = _ref.left;
-          var restarting = _ref.restarting;
-          var top = _ref.top;
-          var width = _ref.width;
+          var active = _ref2.active;
+          var left = _ref2.left;
+          var restarting = _ref2.restarting;
+          var top = _ref2.top;
+          var width = _ref2.width;
 
           var scale = restarting ? 0 : 1;
           var transform = 'translate3d(' + (-width / 2 + left) + 'px, ' + (-width / 2 + top) + 'px, 0) scale(' + scale + ')';
diff --git a/lib/slider/Slider.js b/lib/slider/Slider.js
index c838283e5..10ac52441 100644
--- a/lib/slider/Slider.js
+++ b/lib/slider/Slider.js
@@ -58,7 +58,7 @@ var factory = function factory(ProgressBar, Input) {
     _inherits(Slider, _Component);
 
     function Slider() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -68,7 +68,7 @@ var factory = function factory(ProgressBar, Input) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Slider)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Slider.__proto__ || Object.getPrototypeOf(Slider)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         inputFocused: false,
         inputValue: null,
         sliderLength: 0,
diff --git a/lib/snackbar/Snackbar.js b/lib/snackbar/Snackbar.js
index bbb90867a..b4ae2f999 100644
--- a/lib/snackbar/Snackbar.js
+++ b/lib/snackbar/Snackbar.js
@@ -52,7 +52,7 @@ var factory = function factory(Overlay, Button) {
     function Snackbar() {
       _classCallCheck(this, Snackbar);
 
-      return _possibleConstructorReturn(this, Object.getPrototypeOf(Snackbar).apply(this, arguments));
+      return _possibleConstructorReturn(this, (Snackbar.__proto__ || Object.getPrototypeOf(Snackbar)).apply(this, arguments));
     }
 
     _createClass(Snackbar, [{
diff --git a/lib/switch/Switch.js b/lib/switch/Switch.js
index 96ad9977a..b723eccbd 100644
--- a/lib/switch/Switch.js
+++ b/lib/switch/Switch.js
@@ -44,7 +44,7 @@ var factory = function factory(Thumb) {
     _inherits(Switch, _Component);
 
     function Switch() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -54,7 +54,7 @@ var factory = function factory(Thumb) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Switch)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleToggle = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Switch.__proto__ || Object.getPrototypeOf(Switch)).call.apply(_ref, [this].concat(args))), _this), _this.handleToggle = function (event) {
         if (event.pageX !== 0 && event.pageY !== 0) _this.blur();
         if (!_this.props.disabled && _this.props.onChange) {
           _this.props.onChange(!_this.props.checked, event);
diff --git a/lib/table/Table.js b/lib/table/Table.js
index addc42c95..6ad6b563a 100644
--- a/lib/table/Table.js
+++ b/lib/table/Table.js
@@ -44,7 +44,7 @@ var factory = function factory(TableHead, TableRow) {
     _inherits(Table, _Component);
 
     function Table() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -54,7 +54,7 @@ var factory = function factory(TableHead, TableRow) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Table)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleFullSelect = function () {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Table.__proto__ || Object.getPrototypeOf(Table)).call.apply(_ref, [this].concat(args))), _this), _this.handleFullSelect = function () {
         if (_this.props.onSelect) {
           var _this$props = _this.props;
           var source = _this$props.source;
diff --git a/lib/table/TableRow.js b/lib/table/TableRow.js
index ae0a25ccc..b6405e136 100644
--- a/lib/table/TableRow.js
+++ b/lib/table/TableRow.js
@@ -33,7 +33,7 @@ var factory = function factory(Checkbox) {
     _inherits(TableRow, _Component);
 
     function TableRow() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -43,7 +43,7 @@ var factory = function factory(Checkbox) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TableRow)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleInputChange = function (index, key, type, event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TableRow.__proto__ || Object.getPrototypeOf(TableRow)).call.apply(_ref, [this].concat(args))), _this), _this.handleInputChange = function (index, key, type, event) {
         var value = type === 'checkbox' ? event.target.checked : event.target.value;
         var onChange = _this.props.model[key].onChange || _this.props.onChange;
         onChange(index, key, value);
diff --git a/lib/tabs/Tab.js b/lib/tabs/Tab.js
index 7035a5b53..60240cdac 100644
--- a/lib/tabs/Tab.js
+++ b/lib/tabs/Tab.js
@@ -37,7 +37,7 @@ var Tab = function (_Component) {
   _inherits(Tab, _Component);
 
   function Tab() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -47,7 +47,7 @@ var Tab = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Tab)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function (event) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Tab.__proto__ || Object.getPrototypeOf(Tab)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
       if (!_this.props.disabled && _this.props.onClick) {
         _this.props.onClick(event);
       }
diff --git a/lib/tabs/TabContent.js b/lib/tabs/TabContent.js
index 96f3538be..65bd7a6a6 100644
--- a/lib/tabs/TabContent.js
+++ b/lib/tabs/TabContent.js
@@ -35,7 +35,7 @@ var TabContent = function (_Component) {
   function TabContent() {
     _classCallCheck(this, TabContent);
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(TabContent).apply(this, arguments));
+    return _possibleConstructorReturn(this, (TabContent.__proto__ || Object.getPrototypeOf(TabContent)).apply(this, arguments));
   }
 
   _createClass(TabContent, [{
diff --git a/lib/tabs/Tabs.js b/lib/tabs/Tabs.js
index 1dc68473e..34eda37db 100644
--- a/lib/tabs/Tabs.js
+++ b/lib/tabs/Tabs.js
@@ -11,9 +11,9 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _classnames = require('classnames');
+var _classnames2 = require('classnames');
 
-var _classnames2 = _interopRequireDefault(_classnames);
+var _classnames3 = _interopRequireDefault(_classnames2);
 
 var _reactCssThemr = require('react-css-themr');
 
@@ -29,6 +29,8 @@ var _TabContent2 = _interopRequireDefault(_TabContent);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
@@ -40,7 +42,7 @@ var factory = function factory(Tab, TabContent) {
     _inherits(Tabs, _Component);
 
     function Tabs() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -50,11 +52,22 @@ var factory = function factory(Tab, TabContent) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Tabs)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Tabs.__proto__ || Object.getPrototypeOf(Tabs)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         pointer: {}
       }, _this.handleHeaderClick = function (event) {
         var idx = parseInt(event.currentTarget.id);
         if (_this.props.onChange) _this.props.onChange(idx);
+      }, _this.handleResize = function () {
+        if (!_this.props.fixed) {
+          return;
+        }
+
+        if (_this.resizeTimeout) {
+          clearTimeout(_this.resizeTimeout);
+        }
+        _this.resizeTimeout = setTimeout(_this.handleResizeEnd, 50);
+      }, _this.handleResizeEnd = function () {
+        _this.updatePointer(_this.props.index);
       }, _temp), _possibleConstructorReturn(_this, _ret);
     }
 
@@ -62,6 +75,8 @@ var factory = function factory(Tab, TabContent) {
       key: 'componentDidMount',
       value: function componentDidMount() {
         !this.props.disableAnimatedBottomBorder && this.updatePointer(this.props.index);
+        window.addEventListener('resize', this.handleResize);
+        this.handleResize();
       }
     }, {
       key: 'componentWillReceiveProps',
@@ -71,6 +86,8 @@ var factory = function factory(Tab, TabContent) {
     }, {
       key: 'componentWillUnmount',
       value: function componentWillUnmount() {
+        window.removeEventListener('resize', this.handleResize);
+        clearTimeout(this.resizeTimeout);
         clearTimeout(this.pointerTimeout);
       }
     }, {
@@ -121,8 +138,12 @@ var factory = function factory(Tab, TabContent) {
           return _react2.default.cloneElement(item, {
             id: idx,
             key: idx,
+            theme: _this4.props.theme,
             active: _this4.props.index === idx,
-            onClick: _this4.handleHeaderClick
+            onClick: function onClick(event) {
+              _this4.handleHeaderClick(event);
+              item.props.onClick && item.props.onClick(event);
+            }
           });
         });
       }
@@ -138,6 +159,7 @@ var factory = function factory(Tab, TabContent) {
         if (contents && contents[activeIdx]) {
           return _react2.default.cloneElement(contents[activeIdx], {
             key: activeIdx,
+            theme: this.props.theme,
             active: true,
             tabIndex: activeIdx
           });
@@ -146,18 +168,23 @@ var factory = function factory(Tab, TabContent) {
     }, {
       key: 'render',
       value: function render() {
+        var _classnames;
+
         var _props = this.props;
         var className = _props.className;
         var theme = _props.theme;
+        var fixed = _props.fixed;
+        var inverse = _props.inverse;
 
         var _parseChildren = this.parseChildren();
 
         var headers = _parseChildren.headers;
         var contents = _parseChildren.contents;
 
+        var classes = (0, _classnames3.default)(theme.tabs, className, (_classnames = {}, _defineProperty(_classnames, theme.fixed, fixed), _defineProperty(_classnames, theme.inverse, inverse), _classnames));
         return _react2.default.createElement(
           'div',
-          { ref: 'tabs', 'data-react-toolbox': 'tabs', className: (0, _classnames2.default)(theme.tabs, className) },
+          { ref: 'tabs', 'data-react-toolbox': 'tabs', className: classes },
           _react2.default.createElement(
             'nav',
             { className: theme.navigation, ref: 'navigation' },
@@ -176,16 +203,22 @@ var factory = function factory(Tab, TabContent) {
     children: _react.PropTypes.node,
     className: _react.PropTypes.string,
     disableAnimatedBottomBorder: _react.PropTypes.bool,
+    fixed: _react.PropTypes.bool,
     index: _react.PropTypes.number,
+    inverse: _react.PropTypes.bool,
     onChange: _react.PropTypes.func,
     theme: _react.PropTypes.shape({
+      fixed: _react.PropTypes.string,
+      inverse: _react.PropTypes.string,
       navigation: _react.PropTypes.string,
       pointer: _react.PropTypes.string,
       tabs: _react.PropTypes.string
     })
   };
   Tabs.defaultProps = {
-    index: 0
+    index: 0,
+    fixed: false,
+    inverse: false
   };
 
 
diff --git a/lib/tabs/__tests__/index.spec.js b/lib/tabs/__tests__/index.spec.js
index 9f6ffa9cf..4995f871b 100644
--- a/lib/tabs/__tests__/index.spec.js
+++ b/lib/tabs/__tests__/index.spec.js
@@ -18,6 +18,10 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
+var _reactDom = require('react-dom');
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
 var _Tabs = require('../Tabs');
 
 var _Tabs2 = _interopRequireDefault(_Tabs);
@@ -30,6 +34,10 @@ var _TabContent = require('../TabContent');
 
 var _TabContent2 = _interopRequireDefault(_TabContent);
 
+var _theme = require('../theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -38,6 +46,11 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
+var getRenderedClassName = function getRenderedClassName(tree, TargetComponent) {
+  var rendered = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, TargetComponent);
+  return _reactDom2.default.findDOMNode(rendered).getAttribute('class');
+};
+
 describe('Tabs', function () {
   var tabContents = void 0,
       composition = void 0;
@@ -49,7 +62,7 @@ describe('Tabs', function () {
       function Composition() {
         _classCallCheck(this, Composition);
 
-        var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Composition).call(this));
+        var _this = _possibleConstructorReturn(this, (Composition.__proto__ || Object.getPrototypeOf(Composition)).call(this));
 
         _this.state = { index: 0 };
         return _this;
@@ -97,4 +110,30 @@ describe('Tabs', function () {
     (0, _expect2.default)(tabContents.length).toEqual(1);
     (0, _expect2.default)(tabContents[0].props.tabIndex).toEqual(1);
   });
+
+  describe('#render', function () {
+    it('does not use fixed by default', function () {
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Tabs2.default, { theme: _theme2.default }));
+      var className = getRenderedClassName(tree, _Tabs.Tabs);
+      (0, _expect2.default)(className).toNotContain(_theme2.default.fixed);
+    });
+
+    it('uses fixed when set', function () {
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Tabs2.default, { theme: _theme2.default, fixed: true }));
+      var className = getRenderedClassName(tree, _Tabs.Tabs);
+      (0, _expect2.default)(className).toContain(_theme2.default.fixed);
+    });
+
+    it('does not use inverse by default', function () {
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Tabs2.default, { theme: _theme2.default }));
+      var className = getRenderedClassName(tree, _Tabs.Tabs);
+      (0, _expect2.default)(className).toNotContain(_theme2.default.inverse);
+    });
+
+    it('uses inverse when set', function () {
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Tabs2.default, { theme: _theme2.default, inverse: true }));
+      var className = getRenderedClassName(tree, _Tabs.Tabs);
+      (0, _expect2.default)(className).toContain(_theme2.default.inverse);
+    });
+  });
 });
\ No newline at end of file
diff --git a/lib/tabs/_config.scss b/lib/tabs/_config.scss
index f67e55875..4a03d6419 100644
--- a/lib/tabs/_config.scss
+++ b/lib/tabs/_config.scss
@@ -9,3 +9,10 @@ $tab-pointer-height: .2 * $unit !default;
 $tab-text: $color-black !default;
 $tab-text-color: $tab-text !default;
 $tab-text-inactive-color: rgba($tab-text, .7) !default;
+
+// Inverse
+$tab-inverse-bar-color: $color-primary !default;
+$tab-inverse-pointer-color: $color-accent !default;
+$tab-inverse-text: $color-primary-contrast !default;
+$tab-inverse-text-color: $tab-inverse-text !default;
+$tab-inverse-text-inactive-color: rgba($tab-inverse-text, .7) !default;
diff --git a/lib/tabs/theme.scss b/lib/tabs/theme.scss
index f2e77760e..9d9fda29d 100644
--- a/lib/tabs/theme.scss
+++ b/lib/tabs/theme.scss
@@ -61,3 +61,27 @@
     display: block;
   }
 }
+
+.fixed {
+  .label {
+    flex: 1;
+    text-align: center;
+  }
+}
+
+.inverse {
+  .navigation {
+    background-color: $tab-inverse-bar-color;
+  }
+
+  .label {
+    color: $tab-inverse-text-inactive-color;
+    &.active {
+      color: $tab-inverse-text-color;
+    }
+  }
+
+  .pointer {
+    background-color: $tab-inverse-pointer-color;
+  }
+}
diff --git a/lib/time_picker/Clock.js b/lib/time_picker/Clock.js
index 2b74f0a1c..aaa55accb 100644
--- a/lib/time_picker/Clock.js
+++ b/lib/time_picker/Clock.js
@@ -40,7 +40,7 @@ var Clock = function (_Component) {
   _inherits(Clock, _Component);
 
   function Clock() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -50,7 +50,7 @@ var Clock = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Clock)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Clock.__proto__ || Object.getPrototypeOf(Clock)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
       center: { x: null, y: null },
       radius: 0
     }, _this.handleHourChange = function (hours) {
diff --git a/lib/time_picker/ClockFace.js b/lib/time_picker/ClockFace.js
index 54ca26407..b2604a0c2 100644
--- a/lib/time_picker/ClockFace.js
+++ b/lib/time_picker/ClockFace.js
@@ -28,7 +28,7 @@ var Face = function (_Component) {
   _inherits(Face, _Component);
 
   function Face() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -38,7 +38,7 @@ var Face = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Face)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.renderNumber = function (number, idx) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Face.__proto__ || Object.getPrototypeOf(Face)).call.apply(_ref, [this].concat(args))), _this), _this.renderNumber = function (number, idx) {
       var _this$props = _this.props;
       var active = _this$props.active;
       var radius = _this$props.radius;
diff --git a/lib/time_picker/ClockHand.js b/lib/time_picker/ClockHand.js
index 053b19e07..d16bdaeab 100644
--- a/lib/time_picker/ClockHand.js
+++ b/lib/time_picker/ClockHand.js
@@ -34,7 +34,7 @@ var Hand = function (_Component) {
   _inherits(Hand, _Component);
 
   function Hand() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -44,7 +44,7 @@ var Hand = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Hand)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Hand.__proto__ || Object.getPrototypeOf(Hand)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
       knobWidth: 0
     }, _this.handleMouseMove = function (event) {
       _this.move(_events2.default.getMousePosition(event));
diff --git a/lib/time_picker/ClockHours.js b/lib/time_picker/ClockHours.js
index 85a711ab1..3b4ee10fd 100644
--- a/lib/time_picker/ClockHours.js
+++ b/lib/time_picker/ClockHours.js
@@ -41,7 +41,7 @@ var Hours = function (_Component) {
   _inherits(Hours, _Component);
 
   function Hours() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -51,7 +51,7 @@ var Hours = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Hours)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Hours.__proto__ || Object.getPrototypeOf(Hours)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
       inner: _this.props.format === '24hr' && _this.props.selected > 0 && _this.props.selected <= 12
     }, _this.handleHandMove = function (degrees, radius) {
       var currentInner = radius < _this.props.radius - _this.props.spacing * innerSpacing;
diff --git a/lib/time_picker/ClockMinutes.js b/lib/time_picker/ClockMinutes.js
index 780a90ba4..0b21e74a5 100644
--- a/lib/time_picker/ClockMinutes.js
+++ b/lib/time_picker/ClockMinutes.js
@@ -37,7 +37,7 @@ var Minutes = function (_Component) {
   _inherits(Minutes, _Component);
 
   function Minutes() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -47,7 +47,7 @@ var Minutes = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Minutes)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleHandMove = function (degrees) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Minutes.__proto__ || Object.getPrototypeOf(Minutes)).call.apply(_ref, [this].concat(args))), _this), _this.handleHandMove = function (degrees) {
       _this.props.onChange(degrees / step);
     }, _this.handleMouseDown = function (event) {
       _this.refs.hand.mouseStart(event);
diff --git a/lib/time_picker/TimePicker.js b/lib/time_picker/TimePicker.js
index d4dc2e755..2e0a06ae3 100644
--- a/lib/time_picker/TimePicker.js
+++ b/lib/time_picker/TimePicker.js
@@ -58,7 +58,7 @@ var factory = function factory(TimePickerDialog, Input) {
     _inherits(TimePicker, _Component);
 
     function TimePicker() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -68,7 +68,7 @@ var factory = function factory(TimePickerDialog, Input) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TimePicker)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TimePicker.__proto__ || Object.getPrototypeOf(TimePicker)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         active: _this.props.active
       }, _this.handleDismiss = function () {
         _this.setState({ active: false });
diff --git a/lib/time_picker/TimePickerDialog.js b/lib/time_picker/TimePickerDialog.js
index 92e55b2db..9d4dcefb9 100644
--- a/lib/time_picker/TimePickerDialog.js
+++ b/lib/time_picker/TimePickerDialog.js
@@ -35,7 +35,7 @@ var factory = function factory(Dialog) {
     _inherits(TimePickerDialog, _Component);
 
     function TimePickerDialog() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -45,7 +45,7 @@ var factory = function factory(Dialog) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TimePickerDialog)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TimePickerDialog.__proto__ || Object.getPrototypeOf(TimePickerDialog)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         display: 'hours',
         displayTime: _this.props.value
       }, _this.handleClockChange = function (value) {
diff --git a/lib/tooltip/Tooltip.js b/lib/tooltip/Tooltip.js
index b77620ef5..a57b41d73 100644
--- a/lib/tooltip/Tooltip.js
+++ b/lib/tooltip/Tooltip.js
@@ -78,7 +78,7 @@ var tooltipFactory = function tooltipFactory() {
       _inherits(TooltippedComponent, _Component);
 
       function TooltippedComponent() {
-        var _Object$getPrototypeO;
+        var _ref;
 
         var _temp, _this, _ret;
 
@@ -88,7 +88,7 @@ var tooltipFactory = function tooltipFactory() {
           args[_key] = arguments[_key];
         }
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TooltippedComponent)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TooltippedComponent.__proto__ || Object.getPrototypeOf(TooltippedComponent)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
           active: false,
           position: _this.props.tooltipPosition,
           visible: false
@@ -118,12 +118,12 @@ var tooltipFactory = function tooltipFactory() {
         }
       }, {
         key: 'activate',
-        value: function activate(_ref) {
+        value: function activate(_ref2) {
           var _this2 = this;
 
-          var top = _ref.top;
-          var left = _ref.left;
-          var position = _ref.position;
+          var top = _ref2.top;
+          var left = _ref2.left;
+          var position = _ref2.position;
 
           if (this.timeout) clearTimeout(this.timeout);
           this.setState({ visible: true, position: position });
diff --git a/lib/utils/utils.js b/lib/utils/utils.js
index e31db2442..e95ea63c1 100644
--- a/lib/utils/utils.js
+++ b/lib/utils/utils.js
@@ -60,5 +60,14 @@ exports.default = {
       return value ? 'on' : '';
     }
     return value;
+  },
+  removeObjectKey: function removeObjectKey(key, object) {
+    var newObject = {};
+    Object.keys(object).filter(function (k) {
+      return k !== key;
+    }).forEach(function (k) {
+      newObject[k] = object[k];
+    });
+    return newObject;
   }
 };
\ No newline at end of file

From f37626ac919f5bef80fe3ec97616a9d3bec3319c Mon Sep 17 00:00:00 2001
From: deniss-muhla <deniss.muhla@gmail.com>
Date: Fri, 2 Sep 2016 08:37:22 +0300
Subject: [PATCH 0781/1024] Update index.d.ts

Wrong type for ListSubHeaderProps.caption. Should be string instead of boolean.
---
 components/list/index.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/list/index.d.ts b/components/list/index.d.ts
index a32f977cc..9766ba1e9 100644
--- a/components/list/index.d.ts
+++ b/components/list/index.d.ts
@@ -254,7 +254,7 @@ interface ListSubHeaderProps extends __ReactToolbox.Props {
   /**
    * Text that will be displayed.
    */
-  caption?: boolean;
+  caption?: string;
   /**
    * Classnames object defining the component style.
    */

From def8643a0af26cd9790f8b1755e4de3e2152cccd Mon Sep 17 00:00:00 2001
From: Per Bergqwist <pbergqwist@contractor.ea.com>
Date: Fri, 2 Sep 2016 09:18:33 +0200
Subject: [PATCH 0782/1024] Import React namespace, fix problem with @types

---
 components/app_bar/index.d.ts      |  9 ++++---
 components/autocomplete/index.d.ts |  7 ++---
 components/avatar/index.d.ts       | 13 +++++-----
 components/button/index.d.ts       | 19 +++++++-------
 components/card/index.d.ts         | 41 +++++++++++++++---------------
 components/checkbox/index.d.ts     |  9 ++++---
 components/chip/index.d.ts         |  9 ++++---
 components/date_picker/index.d.ts  |  9 ++++---
 components/dialog/index.d.ts       |  9 ++++---
 components/drawer/index.d.ts       |  9 ++++---
 components/dropdown/index.d.ts     |  7 ++---
 components/font_icon/index.d.ts    | 11 ++++----
 components/input/index.d.ts        | 11 ++++----
 components/layout/index.d.ts       | 25 +++++++++---------
 components/link/index.d.ts         | 11 ++++----
 components/list/index.d.ts         | 39 ++++++++++++++--------------
 components/menu/index.d.ts         | 29 +++++++++++----------
 components/navigation/index.d.ts   |  9 ++++---
 components/progress_bar/index.d.ts |  7 ++---
 components/radio/index.d.ts        | 15 ++++++-----
 components/ripple/index.d.ts       |  7 ++---
 components/slider/index.d.ts       |  7 ++---
 components/snackbar/index.d.ts     |  9 ++++---
 components/switch/index.d.ts       |  7 ++---
 components/table/index.d.ts        |  7 ++---
 components/tabs/index.d.ts         | 13 +++++-----
 components/time_picker/index.d.ts  |  7 ++---
 components/tooltip/index.d.ts      |  5 ++--
 lib/app_bar/index.d.ts             |  9 ++++---
 lib/autocomplete/index.d.ts        |  7 ++---
 lib/avatar/index.d.ts              | 13 +++++-----
 lib/button/index.d.ts              | 19 +++++++-------
 lib/card/index.d.ts                | 41 +++++++++++++++---------------
 lib/checkbox/index.d.ts            |  9 ++++---
 lib/chip/index.d.ts                |  9 ++++---
 lib/date_picker/index.d.ts         |  9 ++++---
 lib/dialog/index.d.ts              |  9 ++++---
 lib/drawer/index.d.ts              |  9 ++++---
 lib/dropdown/index.d.ts            |  7 ++---
 lib/font_icon/index.d.ts           | 11 ++++----
 lib/index.d.ts                     |  7 ++---
 lib/input/index.d.ts               | 11 ++++----
 lib/layout/index.d.ts              | 25 +++++++++---------
 lib/link/index.d.ts                | 11 ++++----
 lib/list/index.d.ts                | 39 ++++++++++++++--------------
 lib/menu/index.d.ts                | 29 +++++++++++----------
 lib/navigation/index.d.ts          |  9 ++++---
 lib/progress_bar/index.d.ts        |  7 ++---
 lib/radio/index.d.ts               | 15 ++++++-----
 lib/ripple/index.d.ts              |  7 ++---
 lib/slider/index.d.ts              |  7 ++---
 lib/snackbar/index.d.ts            |  9 ++++---
 lib/switch/index.d.ts              |  7 ++---
 lib/table/index.d.ts               |  7 ++---
 lib/tabs/index.d.ts                | 13 +++++-----
 lib/time_picker/index.d.ts         |  7 ++---
 lib/tooltip/index.d.ts             |  5 ++--
 57 files changed, 392 insertions(+), 335 deletions(-)

diff --git a/components/app_bar/index.d.ts b/components/app_bar/index.d.ts
index 00b13d29d..fa3f99222 100644
--- a/components/app_bar/index.d.ts
+++ b/components/app_bar/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface AppBarTheme {
   /**
@@ -15,11 +16,11 @@ export interface AppBarTheme {
   flat?: string;
 }
 
-interface AppBarProps extends __ReactToolbox.Props {
+interface AppBarProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * Determine if the bar should have position fixed or relative.
    * @default false
@@ -36,6 +37,6 @@ interface AppBarProps extends __ReactToolbox.Props {
   theme?: AppBarTheme;
 }
 
-export class AppBar extends __React.Component<AppBarProps, {}> { }
+export class AppBar extends React.Component<AppBarProps, {}> { }
 
 export default AppBar;
diff --git a/components/autocomplete/index.d.ts b/components/autocomplete/index.d.ts
index d05dc2081..2826c62d9 100644
--- a/components/autocomplete/index.d.ts
+++ b/components/autocomplete/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface AutocompleteTheme {
   /**
@@ -43,7 +44,7 @@ export interface AutocompleteTheme {
   values?: string;
 }
 
-interface AutocompleteProps extends __ReactToolbox.Props {
+interface AutocompleteProps extends ReactToolbox.Props {
   /**
    * Determines the opening direction. It can be auto, up or down.
    * @default auto
@@ -100,6 +101,6 @@ interface AutocompleteProps extends __ReactToolbox.Props {
   value?: any;
 }
 
-export class Autocomplete extends __React.Component<AutocompleteProps, {}> { }
+export class Autocomplete extends React.Component<AutocompleteProps, {}> { }
 
 export default Autocomplete;
diff --git a/components/avatar/index.d.ts b/components/avatar/index.d.ts
index 7b2d42281..c2ddc6950 100644
--- a/components/avatar/index.d.ts
+++ b/components/avatar/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface AvatarTheme {
   /**
@@ -15,11 +16,11 @@ export interface AvatarTheme {
   letter?: string;
 }
 
-interface AvatarProps extends __ReactToolbox.Props {
+interface AvatarProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * Set to true if your image is not squared so it will be used as a cover for the element.
    */
@@ -27,11 +28,11 @@ interface AvatarProps extends __ReactToolbox.Props {
   /**
    * A key to identify an Icon from Material Design Icons or a custom Icon Element.
    */
-  icon?: __React.ReactNode | string;
+  icon?: React.ReactNode | string;
   /**
    * An image source or an image element.
    */
-  image?: __React.ReactNode | string;
+  image?: React.ReactNode | string;
   /**
    * Classnames object defining the component style.
    */
@@ -42,6 +43,6 @@ interface AvatarProps extends __ReactToolbox.Props {
   title?: string;
 }
 
-export class Avatar extends __React.Component<AvatarProps, {}> { }
+export class Avatar extends React.Component<AvatarProps, {}> { }
 
 export default Avatar;
diff --git a/components/button/index.d.ts b/components/button/index.d.ts
index 9ffd59571..7368a24f6 100644
--- a/components/button/index.d.ts
+++ b/components/button/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface ButtonTheme {
   /**
@@ -51,7 +52,7 @@ export interface ButtonTheme {
   toggle?: string;
 }
 
-interface ButtonProps extends __ReactToolbox.Props {
+interface ButtonProps extends ReactToolbox.Props {
   /**
    * Indicates if the button should have accent color.
    * @default false
@@ -60,7 +61,7 @@ interface ButtonProps extends __ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * If true, component will be disabled.
    * @default false
@@ -83,7 +84,7 @@ interface ButtonProps extends __ReactToolbox.Props {
   /**
    * Value of the icon (See Font Icon Component).
    */
-  icon?: __React.ReactNode | string;
+  icon?: React.ReactNode | string;
   /**
    * If true, the neutral colors are inverted. Useful to put a button over a dark background.
    */
@@ -123,7 +124,7 @@ interface ButtonProps extends __ReactToolbox.Props {
   theme?: ButtonTheme;
 }
 
-export class Button extends __React.Component<ButtonProps, {}> { }
+export class Button extends React.Component<ButtonProps, {}> { }
 
 export interface IconButtonTheme {
   /**
@@ -160,7 +161,7 @@ export interface IconButtonTheme {
   toggle?: string;
 }
 
-interface IconButtonProps extends __ReactToolbox.Props {
+interface IconButtonProps extends ReactToolbox.Props {
   /**
    * Indicates if the button should have accent color.
    * @default false
@@ -169,7 +170,7 @@ interface IconButtonProps extends __ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * If true, component will be disabled.
    * @default false
@@ -182,7 +183,7 @@ interface IconButtonProps extends __ReactToolbox.Props {
   /**
    * Value of the icon (See Font Icon Component).
    */
-  icon?: __React.ReactNode | string;
+  icon?: React.ReactNode | string;
   /**
    * If true, the neutral colors are inverted. Useful to put a button over a dark background.
    */
@@ -208,4 +209,4 @@ interface IconButtonProps extends __ReactToolbox.Props {
   theme?: IconButtonTheme;
 }
 
-export class IconButton extends __React.Component<IconButtonProps, {}> { }
+export class IconButton extends React.Component<IconButtonProps, {}> { }
diff --git a/components/card/index.d.ts b/components/card/index.d.ts
index 73dcae511..824771fac 100644
--- a/components/card/index.d.ts
+++ b/components/card/index.d.ts
@@ -1,15 +1,16 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface CardTheme {
   card?: string;
   raised?: string;
 }
 
-interface CardProps extends __ReactToolbox.Props {
+interface CardProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   raised?: boolean;
   /**
    * Classnames object defining the component style.
@@ -17,24 +18,24 @@ interface CardProps extends __ReactToolbox.Props {
   theme?: CardTheme;
 }
 
-export class Card extends __React.Component<CardProps, {}> { }
+export class Card extends React.Component<CardProps, {}> { }
 
 export interface CardActionsTheme {
   cardActions?: string;
 }
 
-interface CardActionsProps extends __ReactToolbox.Props {
+interface CardActionsProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * Classnames object defining the component style.
    */
   theme?: CardActionsTheme;
 }
 
-export class CardActions extends __React.Component<CardActionsProps, {}> { }
+export class CardActions extends React.Component<CardActionsProps, {}> { }
 
 export interface CardMediaTheme {
   cardMedia?: string;
@@ -44,39 +45,39 @@ export interface CardMediaTheme {
   wide?: string;
 }
 
-interface CardMediaProps extends __ReactToolbox.Props {
+interface CardMediaProps extends ReactToolbox.Props {
   aspectRatio?: "wide" | "square";
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   color?: string;
   contentOverlay?: boolean;
-  image?: __React.ReactNode | string;
+  image?: React.ReactNode | string;
   /**
    * Classnames object defining the component style.
    */
   theme?: CardMediaTheme;
 }
 
-export class CardMedia extends __React.Component<CardMediaProps, {}> { }
+export class CardMedia extends React.Component<CardMediaProps, {}> { }
 
 export interface CardTextTheme {
   cardText?: string;
 }
 
-interface CardTextProps extends __ReactToolbox.Props {
+interface CardTextProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * Classnames object defining the component style.
    */
   theme?: CardTextTheme;
 }
 
-export class CardText extends __React.Component<CardTextProps, {}> { }
+export class CardText extends React.Component<CardTextProps, {}> { }
 
 export interface CardTitleTheme {
   large?: string;
@@ -85,18 +86,18 @@ export interface CardTitleTheme {
   subtitle?: string;
 }
 
-interface CardTitleProps extends __ReactToolbox.Props {
-  avatar?: __React.ReactNode | string;
+interface CardTitleProps extends ReactToolbox.Props {
+  avatar?: React.ReactNode | string;
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
-  subtitle?: __React.ReactNode | string;
+  children?: React.ReactNode;
+  subtitle?: React.ReactNode | string;
   /**
    * Classnames object defining the component style.
    */
   theme?: CardTitleTheme;
-  title?: __React.ReactNode | string;
+  title?: React.ReactNode | string;
 }
 
-export class CardTitle extends __React.Component<CardTitleProps, {}> { }
+export class CardTitle extends React.Component<CardTitleProps, {}> { }
diff --git a/components/checkbox/index.d.ts b/components/checkbox/index.d.ts
index 23a69d0ff..29c1045e7 100644
--- a/components/checkbox/index.d.ts
+++ b/components/checkbox/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface CheckboxTheme {
   /**
@@ -31,7 +32,7 @@ export interface CheckboxTheme {
   text?: string;
 }
 
-interface CheckboxProps extends __ReactToolbox.Props {
+interface CheckboxProps extends ReactToolbox.Props {
   /**
    * Value for the checkbox, can be true or false.
    * @default false
@@ -45,7 +46,7 @@ interface CheckboxProps extends __ReactToolbox.Props {
   /**
    * Text label to attach next to the checkbox element.
    */
-  label?: __React.ReactNode | string;
+  label?: React.ReactNode | string;
   /**
    * The name of the field to set in the input checkbox.
    */
@@ -64,6 +65,6 @@ interface CheckboxProps extends __ReactToolbox.Props {
   theme?: CheckboxTheme;
 }
 
-export class Checkbox extends __React.Component<CheckboxProps, {}> { }
+export class Checkbox extends React.Component<CheckboxProps, {}> { }
 
 export default Checkbox;
diff --git a/components/chip/index.d.ts b/components/chip/index.d.ts
index e705f395c..832ca408c 100644
--- a/components/chip/index.d.ts
+++ b/components/chip/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface ChipTheme {
   /**
@@ -27,11 +28,11 @@ export interface ChipTheme {
   deleteX?: string;
 }
 
-interface ChipProps extends __ReactToolbox.Props {
+interface ChipProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * If true, the chip will be rendered with a delete icon.
    * @default false
@@ -47,6 +48,6 @@ interface ChipProps extends __ReactToolbox.Props {
   theme?: ChipTheme;
 }
 
-export class Chip extends __React.Component<ChipProps, {}> { }
+export class Chip extends React.Component<ChipProps, {}> { }
 
 export default Chip;
diff --git a/components/date_picker/index.d.ts b/components/date_picker/index.d.ts
index fafb9a39e..aa9fc3f83 100644
--- a/components/date_picker/index.d.ts
+++ b/components/date_picker/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface DatePickerTheme {
   /**
@@ -83,7 +84,7 @@ export interface DatePickerTheme {
   yearsDisplay?: string;
 }
 
-interface DatePickerProps extends __ReactToolbox.Props {
+interface DatePickerProps extends ReactToolbox.Props {
   /**
    * Automatically selects a date upon clicking on a day
    * @default false
@@ -96,7 +97,7 @@ interface DatePickerProps extends __ReactToolbox.Props {
   /**
    * A key to identify an Icon from Material Design Icons or a custom Icon Element.
    */
-  icon?: __React.ReactNode | string;
+  icon?: React.ReactNode | string;
   /**
    * This class will be applied to Input component of DatePicker.
    */
@@ -143,6 +144,6 @@ interface DatePickerProps extends __ReactToolbox.Props {
   value?: Date | string;
 }
 
-export class DatePicker extends __React.Component<DatePickerProps, {}> { }
+export class DatePicker extends React.Component<DatePickerProps, {}> { }
 
 export default DatePicker;
diff --git a/components/dialog/index.d.ts b/components/dialog/index.d.ts
index 6e2318449..eb95ee3ae 100644
--- a/components/dialog/index.d.ts
+++ b/components/dialog/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface DialogTheme {
   /**
@@ -38,7 +39,7 @@ interface DialogActionProps {
   onClick?: Function;
 }
 
-interface DialogProps extends __ReactToolbox.Props {
+interface DialogProps extends ReactToolbox.Props {
   /**
    * A array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons.
    */
@@ -51,7 +52,7 @@ interface DialogProps extends __ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * Callback called when the ESC key is pressed with the overlay active.
    */
@@ -87,6 +88,6 @@ interface DialogProps extends __ReactToolbox.Props {
   type?: string;
 }
 
-export class Dialog extends __React.Component<DialogProps, {}> { }
+export class Dialog extends React.Component<DialogProps, {}> { }
 
 export default Dialog;
diff --git a/components/drawer/index.d.ts b/components/drawer/index.d.ts
index a81a64ecb..2c0a84783 100644
--- a/components/drawer/index.d.ts
+++ b/components/drawer/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface DrawerTheme {
   /**
@@ -23,7 +24,7 @@ export interface DrawerTheme {
   right?: string;
 }
 
-interface DrawerProps extends __ReactToolbox.Props {
+interface DrawerProps extends ReactToolbox.Props {
   /**
    * If true, the drawer will be visible.
    * @default false
@@ -32,7 +33,7 @@ interface DrawerProps extends __ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * Callback function to be invoked when the overlay is clicked.
    */
@@ -48,6 +49,6 @@ interface DrawerProps extends __ReactToolbox.Props {
   type?: "left" | "right";
 }
 
-export class Drawer extends __React.Component<DrawerProps, {}> { }
+export class Drawer extends React.Component<DrawerProps, {}> { }
 
 export default Drawer;
diff --git a/components/dropdown/index.d.ts b/components/dropdown/index.d.ts
index cceddfcab..2c0f207ed 100644
--- a/components/dropdown/index.d.ts
+++ b/components/dropdown/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface DropdownTheme {
   /**
@@ -51,7 +52,7 @@ export interface DropdownTheme {
   values?: string;
 }
 
-interface DropdownProps extends __ReactToolbox.Props {
+interface DropdownProps extends ReactToolbox.Props {
   /**
    * If true the dropdown will preselect the first item if the supplied value matches none of the options' values.
    * @default true
@@ -109,6 +110,6 @@ interface DropdownProps extends __ReactToolbox.Props {
   value?: string | number;
 }
 
-export class Dropdown extends __React.Component<DropdownProps, {}> { }
+export class Dropdown extends React.Component<DropdownProps, {}> { }
 
 export default Dropdown;
diff --git a/components/font_icon/index.d.ts b/components/font_icon/index.d.ts
index 2d4a9276b..11ca3c014 100644
--- a/components/font_icon/index.d.ts
+++ b/components/font_icon/index.d.ts
@@ -1,16 +1,17 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
-interface FontIconProps extends __ReactToolbox.Props {
+interface FontIconProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * The key string for the icon you want be displayed.
    */
-  value?: __React.ReactNode | string;
+  value?: React.ReactNode | string;
 }
 
-export class FontIcon extends __React.Component<FontIconProps, {}> { }
+export class FontIcon extends React.Component<FontIconProps, {}> { }
 
 export default FontIcon;
diff --git a/components/input/index.d.ts b/components/input/index.d.ts
index f8265ada0..b1db642a2 100644
--- a/components/input/index.d.ts
+++ b/components/input/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface InputTheme {
   /**
@@ -51,11 +52,11 @@ export interface InputTheme {
   withIcon?: string;
 }
 
-interface InputProps extends __ReactToolbox.Props {
+interface InputProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * If true, component will be disabled.
    * @default false
@@ -77,7 +78,7 @@ interface InputProps extends __ReactToolbox.Props {
   /**
    * Name of an icon to use as a label for the input.
    */
-  icon?: __React.ReactNode | string;
+  icon?: React.ReactNode | string;
   /**
    * The text string to use for the floating label element.
    */
@@ -130,6 +131,6 @@ interface InputProps extends __ReactToolbox.Props {
   value?: any;
 }
 
-export class Input extends __React.Component<InputProps, {}> { }
+export class Input extends React.Component<InputProps, {}> { }
 
 export default Input;
diff --git a/components/layout/index.d.ts b/components/layout/index.d.ts
index 271cf9211..10004fc25 100644
--- a/components/layout/index.d.ts
+++ b/components/layout/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface LayoutTheme {
   /**
@@ -7,7 +8,7 @@ export interface LayoutTheme {
   layout?: string;
 }
 
-interface LayoutProps extends __ReactToolbox.Props {
+interface LayoutProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
@@ -18,7 +19,7 @@ interface LayoutProps extends __ReactToolbox.Props {
   theme?: LayoutTheme;
 }
 
-export class Layout extends __React.Component<LayoutProps, {}> { }
+export class Layout extends React.Component<LayoutProps, {}> { }
 
 export interface NavDrawerTheme {
   /**
@@ -75,7 +76,7 @@ export interface NavDrawerTheme {
   xxxlPermangent?: string;
 }
 
-interface NavDrawerProps extends __ReactToolbox.Props {
+interface NavDrawerProps extends ReactToolbox.Props {
   /**
    * If true, the drawer will be shown as an overlay.
    * @default false
@@ -84,7 +85,7 @@ interface NavDrawerProps extends __ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * Callback function to be invoked when the overlay is clicked.
    */
@@ -114,7 +115,7 @@ interface NavDrawerProps extends __ReactToolbox.Props {
   width?: "normal" | "wide";
 }
 
-export class NavDrawer extends __React.Component<NavDrawerProps, {}> { }
+export class NavDrawer extends React.Component<NavDrawerProps, {}> { }
 
 export interface PanelTheme {
   /**
@@ -127,11 +128,11 @@ export interface PanelTheme {
   scrollY?: string;
 }
 
-interface PanelProps extends __ReactToolbox.Props {
+interface PanelProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * If true, the panel will vertically scroll all content.
    * @default false
@@ -143,7 +144,7 @@ interface PanelProps extends __ReactToolbox.Props {
   theme?: PanelTheme;
 }
 
-export class Panel extends __React.Component<PanelProps, {}> { }
+export class Panel extends React.Component<PanelProps, {}> { }
 
 export interface SidebarTheme {
   /**
@@ -164,11 +165,11 @@ export interface SidebarTheme {
   sidebarContent?: string;
 }
 
-interface SidebarProps extends __ReactToolbox.Props {
+interface SidebarProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * If true, the sidebar will be pinned open.
    * @default false
@@ -190,4 +191,4 @@ interface SidebarProps extends __ReactToolbox.Props {
   width?: number; // 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 25 | 33 | 50 | 66 | 75 | 100;
 }
 
-export class Sidebar extends __React.Component<SidebarProps, {}> { }
+export class Sidebar extends React.Component<SidebarProps, {}> { }
diff --git a/components/link/index.d.ts b/components/link/index.d.ts
index 4017c7a88..67da3fa11 100644
--- a/components/link/index.d.ts
+++ b/components/link/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface LinkTheme {
   /**
@@ -15,7 +16,7 @@ export interface LinkTheme {
   link?: string;
 }
 
-interface LinkProps extends __ReactToolbox.Props {
+interface LinkProps extends ReactToolbox.Props {
   /**
    * If true, adds active style to link.
    * @default false
@@ -24,7 +25,7 @@ interface LinkProps extends __ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * Sets a count number.
    */
@@ -36,7 +37,7 @@ interface LinkProps extends __ReactToolbox.Props {
   /**
    * An icon key string to include a FontIcon component in front of the text.
    */
-  icon?: __React.ReactNode | string;
+  icon?: React.ReactNode | string;
   /**
    * The text string used for the text content of the link.
    */
@@ -47,4 +48,4 @@ interface LinkProps extends __ReactToolbox.Props {
   theme?: LinkTheme;
 }
 
-export class Link extends __React.Component<LinkProps, {}> { }
+export class Link extends React.Component<LinkProps, {}> { }
diff --git a/components/list/index.d.ts b/components/list/index.d.ts
index 5fe467e77..a3b671196 100644
--- a/components/list/index.d.ts
+++ b/components/list/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface ListTheme {
   /**
@@ -7,11 +8,11 @@ export interface ListTheme {
   list?: string;
 }
 
-interface ListProps extends __ReactToolbox.Props {
+interface ListProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * If true, each element in the list will have a ripple effect on click
    * @default false
@@ -28,7 +29,7 @@ interface ListProps extends __ReactToolbox.Props {
   theme?: ListTheme;
 }
 
-export class List extends __React.Component<ListProps, {}> { }
+export class List extends React.Component<ListProps, {}> { }
 
 export interface ListCheckboxTheme {
   /**
@@ -65,7 +66,7 @@ export interface ListCheckboxTheme {
   primary?: string;
 }
 
-interface ListCheckboxProps extends __ReactToolbox.Props {
+interface ListCheckboxProps extends ReactToolbox.Props {
   /**
    * Main text of the item. Required.
    */
@@ -106,7 +107,7 @@ interface ListCheckboxProps extends __ReactToolbox.Props {
   theme?: ListCheckboxTheme;
 }
 
-export class ListCheckbox extends __React.Component<ListCheckboxProps, {}> { }
+export class ListCheckbox extends React.Component<ListCheckboxProps, {}> { }
 
 export interface ListDividerTheme {
   /**
@@ -119,7 +120,7 @@ export interface ListDividerTheme {
   inset?: string;
 }
 
-interface ListDividerProps extends __ReactToolbox.Props {
+interface ListDividerProps extends ReactToolbox.Props {
   /**
    * If true, will leave a space at the left side.
    */
@@ -130,7 +131,7 @@ interface ListDividerProps extends __ReactToolbox.Props {
   theme?: ListDividerTheme;
 }
 
-export class ListDivider extends __React.Component<ListDivider, {}> { }
+export class ListDivider extends React.Component<ListDivider, {}> { }
 
 export interface ListItemTheme {
   /**
@@ -179,11 +180,11 @@ export interface ListItemTheme {
   selectable?: string;
 }
 
-interface ListItemProps extends __ReactToolbox.Props {
+interface ListItemProps extends ReactToolbox.Props {
   /**
    * A string URL to specify an avatar in the left side of the item.
    */
-  avatar?: __React.ReactNode | string;
+  avatar?: React.ReactNode | string;
   /**
    * Main text of the item.
    */
@@ -191,7 +192,7 @@ interface ListItemProps extends __ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * If true, the item is displayed as disabled and is not clickable.
    * @default false
@@ -200,15 +201,15 @@ interface ListItemProps extends __ReactToolbox.Props {
   /**
    * An element that will be displayed as the item. If set, this will override caption and legend.
    */
-  itemContent?: __React.ReactNode;
+  itemContent?: React.ReactNode;
   /**
    * A list of elements that are placed on the left side of the item and after the avatar attribute.
    */
-  leftActions?: __React.ReactNode;
+  leftActions?: React.ReactNode;
   /**
    * A string key of a font icon or element to display an icon in the left side of the item.
    */
-  leftIcon?: __React.ReactNode | string;
+  leftIcon?: React.ReactNode | string;
   /**
    * Secondary text to display under the caption.
    */
@@ -216,11 +217,11 @@ interface ListItemProps extends __ReactToolbox.Props {
   /**
    * A list of elements that are placed on the right side of the item and after the rightIcon attribute.
    */
-  rightActions?: __React.ReactNode;
+  rightActions?: React.ReactNode;
   /**
    * The same as the leftIcon but in this case the icon is displayed in the right side.
    */
-  rightIcon?: __React.ReactNode | string;
+  rightIcon?: React.ReactNode | string;
   /**
    * If true, the item displays a ripple effect on click. By default it's inherited from the parent element.
    */
@@ -241,7 +242,7 @@ interface ListItemProps extends __ReactToolbox.Props {
   to?: string;
 }
 
-export class ListItem extends __React.Component<ListItemProps, {}> { }
+export class ListItem extends React.Component<ListItemProps, {}> { }
 
 export interface ListSubHeaderTheme {
   /**
@@ -250,7 +251,7 @@ export interface ListSubHeaderTheme {
   subheader?: string;
 }
 
-interface ListSubHeaderProps extends __ReactToolbox.Props {
+interface ListSubHeaderProps extends ReactToolbox.Props {
   /**
    * Text that will be displayed.
    */
@@ -261,4 +262,4 @@ interface ListSubHeaderProps extends __ReactToolbox.Props {
   theme?: ListSubHeaderTheme;
 }
 
-export class ListSubHeader extends __React.Component<ListSubHeaderProps, {}> { }
+export class ListSubHeader extends React.Component<ListSubHeaderProps, {}> { }
diff --git a/components/menu/index.d.ts b/components/menu/index.d.ts
index 505d5a8f4..5d9fccdfd 100644
--- a/components/menu/index.d.ts
+++ b/components/menu/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface MenuTheme {
   /**
@@ -43,7 +44,7 @@ export interface MenuTheme {
   topRight?: string;
 }
 
-interface MenuProps extends __ReactToolbox.Props {
+interface MenuProps extends ReactToolbox.Props {
   /**
    * If true, the menu will be displayed as opened by default.
    * @default false
@@ -52,7 +53,7 @@ interface MenuProps extends __ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * Callback that will be called when the menu is being hidden.
    */
@@ -95,7 +96,7 @@ interface MenuProps extends __ReactToolbox.Props {
   theme?: MenuTheme;
 }
 
-export class Menu extends __React.Component<MenuProps, {}> { }
+export class Menu extends React.Component<MenuProps, {}> { }
 
 export interface IconMenuTheme {
   /**
@@ -108,16 +109,16 @@ export interface IconMenuTheme {
   iconMenu?: string;
 }
 
-interface IconMenuProps extends __ReactToolbox.Props {
+interface IconMenuProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * Icon font key string or Element to display the opener icon.
    * @default more_vert
    */
-  icon?: __React.ReactNode | string;
+  icon?: React.ReactNode | string;
   /**
    * If true, the icon will show a ripple when is clicked.
    * @default true
@@ -160,7 +161,7 @@ interface IconMenuProps extends __ReactToolbox.Props {
   theme?: IconMenuTheme;
 }
 
-export class IconMenu extends __React.Component<IconMenuProps, {}> { }
+export class IconMenu extends React.Component<IconMenuProps, {}> { }
 
 export interface MenuDividerTheme {
   /**
@@ -169,14 +170,14 @@ export interface MenuDividerTheme {
   menuDivider?: string;
 }
 
-interface MenuDividerProps extends __ReactToolbox.Props {
+interface MenuDividerProps extends ReactToolbox.Props {
   /**
    * Classnames object defining the component style.
    */
   theme?: MenuDividerTheme;
 }
 
-export class MenuDivider extends __React.Component<MenuDividerProps, {}> { }
+export class MenuDivider extends React.Component<MenuDividerProps, {}> { }
 
 export interface MenuItemTheme {
   /**
@@ -205,7 +206,7 @@ export interface MenuItemTheme {
   shortcut?: string;
 }
 
-interface MenuItemProps extends __ReactToolbox.Props {
+interface MenuItemProps extends ReactToolbox.Props {
   /**
    * The text to include in the menu item. Required.
    */
@@ -213,7 +214,7 @@ interface MenuItemProps extends __ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * If true, the item will be displayed as disabled and is not selectable.
    * @default false
@@ -222,7 +223,7 @@ interface MenuItemProps extends __ReactToolbox.Props {
   /**
    * Icon font key string or Element to display in the right side of the option.
    */
-  icon?: __React.ReactNode | string;
+  icon?: React.ReactNode | string;
   /**
    * Transferred from the Menu component for selectable menus. Indicates if it's the current active option.
    * @default false
@@ -238,4 +239,4 @@ interface MenuItemProps extends __ReactToolbox.Props {
   theme?: MenuItemTheme;
 }
 
-export class MenuItem extends __React.Component<MenuItemProps, {}> { }
+export class MenuItem extends React.Component<MenuItemProps, {}> { }
diff --git a/components/navigation/index.d.ts b/components/navigation/index.d.ts
index d3425234e..a2795a8da 100644
--- a/components/navigation/index.d.ts
+++ b/components/navigation/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface NavigationTheme {
   /**
@@ -19,7 +20,7 @@ export interface NavigationTheme {
   vertical?: string;
 }
 
-interface NavigationProps extends __ReactToolbox.Props {
+interface NavigationProps extends ReactToolbox.Props {
   /**
    * Array of objects that will be represented as <Button/> so the keys will be transferred as properties the Button Component.
    */
@@ -27,7 +28,7 @@ interface NavigationProps extends __ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * Array of objects similar to actions but that will be rendered as <Link/> component definition.
    */
@@ -43,4 +44,4 @@ interface NavigationProps extends __ReactToolbox.Props {
   type?: "vertical" | "horizontal";
 }
 
-export class Navigation extends __React.Component<NavigationProps, {}> { }
+export class Navigation extends React.Component<NavigationProps, {}> { }
diff --git a/components/progress_bar/index.d.ts b/components/progress_bar/index.d.ts
index 73fa7c33f..7d0096e93 100644
--- a/components/progress_bar/index.d.ts
+++ b/components/progress_bar/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface ProgressBarTheme {
   /**
@@ -35,7 +36,7 @@ export interface ProgressBarTheme {
   value?: string;
 }
 
-interface ProgressBarProps extends __ReactToolbox.Props {
+interface ProgressBarProps extends ReactToolbox.Props {
   /**
    * Value of a secondary progress bar useful for buffering.
    * @default 0
@@ -77,6 +78,6 @@ interface ProgressBarProps extends __ReactToolbox.Props {
   value?: number;
 }
 
-export class ProgressBar extends __React.Component<ProgressBarProps, {}> { }
+export class ProgressBar extends React.Component<ProgressBarProps, {}> { }
 
 export default ProgressBar;
diff --git a/components/radio/index.d.ts b/components/radio/index.d.ts
index 93b1fe041..8cc2695de 100644
--- a/components/radio/index.d.ts
+++ b/components/radio/index.d.ts
@@ -1,10 +1,11 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
-interface RadioGroupProps extends __ReactToolbox.Props {
+interface RadioGroupProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * If true, the group will be displayed as disabled.
    * @default false
@@ -24,7 +25,7 @@ interface RadioGroupProps extends __ReactToolbox.Props {
   value?: any;
 }
 
-export class RadioGroup extends __React.Component<RadioGroupProps, {}> { }
+export class RadioGroup extends React.Component<RadioGroupProps, {}> { }
 
 export interface RadioButtonTheme {
   /**
@@ -57,7 +58,7 @@ export interface RadioButtonTheme {
   text?: string;
 }
 
-interface RadioButtonProps extends __ReactToolbox.Props {
+interface RadioButtonProps extends ReactToolbox.Props {
   /**
    * If true, the input element will be selected by default. Transferred from the parent.
    * @default false
@@ -71,7 +72,7 @@ interface RadioButtonProps extends __ReactToolbox.Props {
   /**
    * Label for the radio button.
    */
-  label?: __React.ReactNode | string;
+  label?: React.ReactNode | string;
   /**
    * Name for the input element.
    */
@@ -98,4 +99,4 @@ interface RadioButtonProps extends __ReactToolbox.Props {
   value?: any;
 }
 
-export class RadioButton extends __React.Component<RadioButtonProps, {}> { }
+export class RadioButton extends React.Component<RadioButtonProps, {}> { }
diff --git a/components/ripple/index.d.ts b/components/ripple/index.d.ts
index f12351cf8..998de2ab1 100644
--- a/components/ripple/index.d.ts
+++ b/components/ripple/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface RippleTheme {
   /**
@@ -23,7 +24,7 @@ interface RippleProps {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * True in case you want a centered ripple.
    * @default false
@@ -44,6 +45,6 @@ interface RippleProps {
   theme?: RippleTheme;
 }
 
-export class Ripple extends __React.Component<RippleProps, {}> { }
+export class Ripple extends React.Component<RippleProps, {}> { }
 
 export default Ripple;
diff --git a/components/slider/index.d.ts b/components/slider/index.d.ts
index e78e0bcef..41014b23e 100644
--- a/components/slider/index.d.ts
+++ b/components/slider/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface SliderTheme {
   /**
@@ -55,7 +56,7 @@ export interface SliderTheme {
   snaps?: string;
 }
 
-interface SliderProps extends __ReactToolbox.Props {
+interface SliderProps extends ReactToolbox.Props {
   /**
    * If true, an input is shown and the user can set the slider from keyboard value.
    * @default false
@@ -101,6 +102,6 @@ interface SliderProps extends __ReactToolbox.Props {
   value?: number;
 }
 
-export class Slider extends __React.Component<SliderProps, {}> { }
+export class Slider extends React.Component<SliderProps, {}> { }
 
 export default Slider;
diff --git a/components/snackbar/index.d.ts b/components/snackbar/index.d.ts
index d51bd71cc..adf1b8390 100644
--- a/components/snackbar/index.d.ts
+++ b/components/snackbar/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface SnackbarTheme {
   /**
@@ -35,7 +36,7 @@ export interface SnackbarTheme {
   warning?: string;
 }
 
-interface SnackbarProps extends __ReactToolbox.Props {
+interface SnackbarProps extends ReactToolbox.Props {
   /**
    * Label for the action component inside the Snackbar.
    */
@@ -48,7 +49,7 @@ interface SnackbarProps extends __ReactToolbox.Props {
   /**
    * String key for an icon or Element which will be displayed in left side of the snackbar.
    */
-  icon?: __React.ReactNode | string;
+  icon?: React.ReactNode | string;
   /**
    * Text to display in the content. Required.
    */
@@ -71,6 +72,6 @@ interface SnackbarProps extends __ReactToolbox.Props {
   type?: "accept" | "cancel" | "warning";
 }
 
-export class Snackbar extends __React.Component<SnackbarProps, {}> { }
+export class Snackbar extends React.Component<SnackbarProps, {}> { }
 
 export default Snackbar;
diff --git a/components/switch/index.d.ts b/components/switch/index.d.ts
index f42ff881a..fd1ab6e0e 100644
--- a/components/switch/index.d.ts
+++ b/components/switch/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface SwitchTheme {
   /**
@@ -35,7 +36,7 @@ export interface SwitchTheme {
   thumb?: string;
 }
 
-interface SwitchProps extends __ReactToolbox.Props {
+interface SwitchProps extends ReactToolbox.Props {
   /**
    * If true, the switch will be enabled.
    * @default false
@@ -72,6 +73,6 @@ interface SwitchProps extends __ReactToolbox.Props {
   theme?: SwitchTheme;
 }
 
-export class Switch extends __React.Component<SwitchProps, {}> { }
+export class Switch extends React.Component<SwitchProps, {}> { }
 
 export default Switch;
diff --git a/components/table/index.d.ts b/components/table/index.d.ts
index f77029943..044b5141b 100644
--- a/components/table/index.d.ts
+++ b/components/table/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface TableTheme {
   /**
@@ -23,7 +24,7 @@ export interface TableTheme {
   table?: string;
 }
 
-interface TableProps extends __ReactToolbox.Props {
+interface TableProps extends ReactToolbox.Props {
   /**
    * If true, component will show a heading using model field names.
    * @default true
@@ -65,6 +66,6 @@ interface TableProps extends __ReactToolbox.Props {
   theme?: TableTheme;
 }
 
-export class Table extends __React.Component<TableProps, {}> { }
+export class Table extends React.Component<TableProps, {}> { }
 
 export default Table;
diff --git a/components/tabs/index.d.ts b/components/tabs/index.d.ts
index fa30a3823..15e5ee75d 100644
--- a/components/tabs/index.d.ts
+++ b/components/tabs/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface TabsTheme {
   /**
@@ -23,11 +24,11 @@ export interface TabsTheme {
   tab?: string;
 }
 
-interface TabsProps extends __ReactToolbox.Props {
+interface TabsProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * Disable the animation below the active tab.
    * @default false
@@ -48,7 +49,7 @@ interface TabsProps extends __ReactToolbox.Props {
   theme?: TabsTheme;
 }
 
-export class Tabs extends __React.Component<TabsProps, {}> { }
+export class Tabs extends React.Component<TabsProps, {}> { }
 
 export interface TabTheme {
   /**
@@ -69,7 +70,7 @@ export interface TabTheme {
   label?: string;
 }
 
-interface TabProps extends __ReactToolbox.Props {
+interface TabProps extends ReactToolbox.Props {
   /**
    * If true, the current component is visible.
    */
@@ -102,4 +103,4 @@ interface TabProps extends __ReactToolbox.Props {
   theme?: TabTheme;
 }
 
-export class Tab extends __React.Component<TabProps, {}> { }
+export class Tab extends React.Component<TabProps, {}> { }
diff --git a/components/time_picker/index.d.ts b/components/time_picker/index.d.ts
index 0254cd542..63f6237e3 100644
--- a/components/time_picker/index.d.ts
+++ b/components/time_picker/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface TimePickerTheme {
   /**
@@ -103,7 +104,7 @@ interface TimePickerProps {
   /**
    * A key to identify an Icon from Material Design Icons or a custom Icon Element.
    */
-  icon?: __React.ReactNode | string;
+  icon?: React.ReactNode | string;
   /**
    * This class will be applied to Input component of TimePicker.
    */
@@ -131,6 +132,6 @@ interface TimePickerProps {
   value?: Date;
 }
 
-export class TimePicker extends __React.Component<TimePickerProps, {}> { }
+export class TimePicker extends React.Component<TimePickerProps, {}> { }
 
 export default TimePicker;
diff --git a/components/tooltip/index.d.ts b/components/tooltip/index.d.ts
index 13c7032c7..35523937f 100644
--- a/components/tooltip/index.d.ts
+++ b/components/tooltip/index.d.ts
@@ -1,3 +1,4 @@
+import * as React from "react";
 export interface TooltipTheme {
   /**
    * Added to the tooltip element.
@@ -33,7 +34,7 @@ interface TooltipProps {
   tooltipHideOnClick?: boolean;
 }
 
-declare class TooltipComponent<P, S> extends __React.Component<P, S> {
+declare class TooltipComponent<P, S> extends React.Component<P, S> {
   props: P & TooltipProps;
 }
 
@@ -41,6 +42,6 @@ interface TooltippedComponentClass<P> extends TooltipProps {
   new (props?: P, context?: any): TooltipComponent<P, any>;
 }
 
-export function Tooltip<P>(componentClass: __React.ComponentClass<P>): TooltippedComponentClass<P>;
+export function Tooltip<P>(componentClass: React.ComponentClass<P>): TooltippedComponentClass<P>;
 
 export default Tooltip;
diff --git a/lib/app_bar/index.d.ts b/lib/app_bar/index.d.ts
index 00b13d29d..fa3f99222 100644
--- a/lib/app_bar/index.d.ts
+++ b/lib/app_bar/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface AppBarTheme {
   /**
@@ -15,11 +16,11 @@ export interface AppBarTheme {
   flat?: string;
 }
 
-interface AppBarProps extends __ReactToolbox.Props {
+interface AppBarProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * Determine if the bar should have position fixed or relative.
    * @default false
@@ -36,6 +37,6 @@ interface AppBarProps extends __ReactToolbox.Props {
   theme?: AppBarTheme;
 }
 
-export class AppBar extends __React.Component<AppBarProps, {}> { }
+export class AppBar extends React.Component<AppBarProps, {}> { }
 
 export default AppBar;
diff --git a/lib/autocomplete/index.d.ts b/lib/autocomplete/index.d.ts
index d05dc2081..2826c62d9 100644
--- a/lib/autocomplete/index.d.ts
+++ b/lib/autocomplete/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface AutocompleteTheme {
   /**
@@ -43,7 +44,7 @@ export interface AutocompleteTheme {
   values?: string;
 }
 
-interface AutocompleteProps extends __ReactToolbox.Props {
+interface AutocompleteProps extends ReactToolbox.Props {
   /**
    * Determines the opening direction. It can be auto, up or down.
    * @default auto
@@ -100,6 +101,6 @@ interface AutocompleteProps extends __ReactToolbox.Props {
   value?: any;
 }
 
-export class Autocomplete extends __React.Component<AutocompleteProps, {}> { }
+export class Autocomplete extends React.Component<AutocompleteProps, {}> { }
 
 export default Autocomplete;
diff --git a/lib/avatar/index.d.ts b/lib/avatar/index.d.ts
index 7b2d42281..c2ddc6950 100644
--- a/lib/avatar/index.d.ts
+++ b/lib/avatar/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface AvatarTheme {
   /**
@@ -15,11 +16,11 @@ export interface AvatarTheme {
   letter?: string;
 }
 
-interface AvatarProps extends __ReactToolbox.Props {
+interface AvatarProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * Set to true if your image is not squared so it will be used as a cover for the element.
    */
@@ -27,11 +28,11 @@ interface AvatarProps extends __ReactToolbox.Props {
   /**
    * A key to identify an Icon from Material Design Icons or a custom Icon Element.
    */
-  icon?: __React.ReactNode | string;
+  icon?: React.ReactNode | string;
   /**
    * An image source or an image element.
    */
-  image?: __React.ReactNode | string;
+  image?: React.ReactNode | string;
   /**
    * Classnames object defining the component style.
    */
@@ -42,6 +43,6 @@ interface AvatarProps extends __ReactToolbox.Props {
   title?: string;
 }
 
-export class Avatar extends __React.Component<AvatarProps, {}> { }
+export class Avatar extends React.Component<AvatarProps, {}> { }
 
 export default Avatar;
diff --git a/lib/button/index.d.ts b/lib/button/index.d.ts
index 9ffd59571..7368a24f6 100644
--- a/lib/button/index.d.ts
+++ b/lib/button/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface ButtonTheme {
   /**
@@ -51,7 +52,7 @@ export interface ButtonTheme {
   toggle?: string;
 }
 
-interface ButtonProps extends __ReactToolbox.Props {
+interface ButtonProps extends ReactToolbox.Props {
   /**
    * Indicates if the button should have accent color.
    * @default false
@@ -60,7 +61,7 @@ interface ButtonProps extends __ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * If true, component will be disabled.
    * @default false
@@ -83,7 +84,7 @@ interface ButtonProps extends __ReactToolbox.Props {
   /**
    * Value of the icon (See Font Icon Component).
    */
-  icon?: __React.ReactNode | string;
+  icon?: React.ReactNode | string;
   /**
    * If true, the neutral colors are inverted. Useful to put a button over a dark background.
    */
@@ -123,7 +124,7 @@ interface ButtonProps extends __ReactToolbox.Props {
   theme?: ButtonTheme;
 }
 
-export class Button extends __React.Component<ButtonProps, {}> { }
+export class Button extends React.Component<ButtonProps, {}> { }
 
 export interface IconButtonTheme {
   /**
@@ -160,7 +161,7 @@ export interface IconButtonTheme {
   toggle?: string;
 }
 
-interface IconButtonProps extends __ReactToolbox.Props {
+interface IconButtonProps extends ReactToolbox.Props {
   /**
    * Indicates if the button should have accent color.
    * @default false
@@ -169,7 +170,7 @@ interface IconButtonProps extends __ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * If true, component will be disabled.
    * @default false
@@ -182,7 +183,7 @@ interface IconButtonProps extends __ReactToolbox.Props {
   /**
    * Value of the icon (See Font Icon Component).
    */
-  icon?: __React.ReactNode | string;
+  icon?: React.ReactNode | string;
   /**
    * If true, the neutral colors are inverted. Useful to put a button over a dark background.
    */
@@ -208,4 +209,4 @@ interface IconButtonProps extends __ReactToolbox.Props {
   theme?: IconButtonTheme;
 }
 
-export class IconButton extends __React.Component<IconButtonProps, {}> { }
+export class IconButton extends React.Component<IconButtonProps, {}> { }
diff --git a/lib/card/index.d.ts b/lib/card/index.d.ts
index 73dcae511..824771fac 100644
--- a/lib/card/index.d.ts
+++ b/lib/card/index.d.ts
@@ -1,15 +1,16 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface CardTheme {
   card?: string;
   raised?: string;
 }
 
-interface CardProps extends __ReactToolbox.Props {
+interface CardProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   raised?: boolean;
   /**
    * Classnames object defining the component style.
@@ -17,24 +18,24 @@ interface CardProps extends __ReactToolbox.Props {
   theme?: CardTheme;
 }
 
-export class Card extends __React.Component<CardProps, {}> { }
+export class Card extends React.Component<CardProps, {}> { }
 
 export interface CardActionsTheme {
   cardActions?: string;
 }
 
-interface CardActionsProps extends __ReactToolbox.Props {
+interface CardActionsProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * Classnames object defining the component style.
    */
   theme?: CardActionsTheme;
 }
 
-export class CardActions extends __React.Component<CardActionsProps, {}> { }
+export class CardActions extends React.Component<CardActionsProps, {}> { }
 
 export interface CardMediaTheme {
   cardMedia?: string;
@@ -44,39 +45,39 @@ export interface CardMediaTheme {
   wide?: string;
 }
 
-interface CardMediaProps extends __ReactToolbox.Props {
+interface CardMediaProps extends ReactToolbox.Props {
   aspectRatio?: "wide" | "square";
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   color?: string;
   contentOverlay?: boolean;
-  image?: __React.ReactNode | string;
+  image?: React.ReactNode | string;
   /**
    * Classnames object defining the component style.
    */
   theme?: CardMediaTheme;
 }
 
-export class CardMedia extends __React.Component<CardMediaProps, {}> { }
+export class CardMedia extends React.Component<CardMediaProps, {}> { }
 
 export interface CardTextTheme {
   cardText?: string;
 }
 
-interface CardTextProps extends __ReactToolbox.Props {
+interface CardTextProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * Classnames object defining the component style.
    */
   theme?: CardTextTheme;
 }
 
-export class CardText extends __React.Component<CardTextProps, {}> { }
+export class CardText extends React.Component<CardTextProps, {}> { }
 
 export interface CardTitleTheme {
   large?: string;
@@ -85,18 +86,18 @@ export interface CardTitleTheme {
   subtitle?: string;
 }
 
-interface CardTitleProps extends __ReactToolbox.Props {
-  avatar?: __React.ReactNode | string;
+interface CardTitleProps extends ReactToolbox.Props {
+  avatar?: React.ReactNode | string;
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
-  subtitle?: __React.ReactNode | string;
+  children?: React.ReactNode;
+  subtitle?: React.ReactNode | string;
   /**
    * Classnames object defining the component style.
    */
   theme?: CardTitleTheme;
-  title?: __React.ReactNode | string;
+  title?: React.ReactNode | string;
 }
 
-export class CardTitle extends __React.Component<CardTitleProps, {}> { }
+export class CardTitle extends React.Component<CardTitleProps, {}> { }
diff --git a/lib/checkbox/index.d.ts b/lib/checkbox/index.d.ts
index 23a69d0ff..29c1045e7 100644
--- a/lib/checkbox/index.d.ts
+++ b/lib/checkbox/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface CheckboxTheme {
   /**
@@ -31,7 +32,7 @@ export interface CheckboxTheme {
   text?: string;
 }
 
-interface CheckboxProps extends __ReactToolbox.Props {
+interface CheckboxProps extends ReactToolbox.Props {
   /**
    * Value for the checkbox, can be true or false.
    * @default false
@@ -45,7 +46,7 @@ interface CheckboxProps extends __ReactToolbox.Props {
   /**
    * Text label to attach next to the checkbox element.
    */
-  label?: __React.ReactNode | string;
+  label?: React.ReactNode | string;
   /**
    * The name of the field to set in the input checkbox.
    */
@@ -64,6 +65,6 @@ interface CheckboxProps extends __ReactToolbox.Props {
   theme?: CheckboxTheme;
 }
 
-export class Checkbox extends __React.Component<CheckboxProps, {}> { }
+export class Checkbox extends React.Component<CheckboxProps, {}> { }
 
 export default Checkbox;
diff --git a/lib/chip/index.d.ts b/lib/chip/index.d.ts
index e705f395c..832ca408c 100644
--- a/lib/chip/index.d.ts
+++ b/lib/chip/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface ChipTheme {
   /**
@@ -27,11 +28,11 @@ export interface ChipTheme {
   deleteX?: string;
 }
 
-interface ChipProps extends __ReactToolbox.Props {
+interface ChipProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * If true, the chip will be rendered with a delete icon.
    * @default false
@@ -47,6 +48,6 @@ interface ChipProps extends __ReactToolbox.Props {
   theme?: ChipTheme;
 }
 
-export class Chip extends __React.Component<ChipProps, {}> { }
+export class Chip extends React.Component<ChipProps, {}> { }
 
 export default Chip;
diff --git a/lib/date_picker/index.d.ts b/lib/date_picker/index.d.ts
index fafb9a39e..aa9fc3f83 100644
--- a/lib/date_picker/index.d.ts
+++ b/lib/date_picker/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface DatePickerTheme {
   /**
@@ -83,7 +84,7 @@ export interface DatePickerTheme {
   yearsDisplay?: string;
 }
 
-interface DatePickerProps extends __ReactToolbox.Props {
+interface DatePickerProps extends ReactToolbox.Props {
   /**
    * Automatically selects a date upon clicking on a day
    * @default false
@@ -96,7 +97,7 @@ interface DatePickerProps extends __ReactToolbox.Props {
   /**
    * A key to identify an Icon from Material Design Icons or a custom Icon Element.
    */
-  icon?: __React.ReactNode | string;
+  icon?: React.ReactNode | string;
   /**
    * This class will be applied to Input component of DatePicker.
    */
@@ -143,6 +144,6 @@ interface DatePickerProps extends __ReactToolbox.Props {
   value?: Date | string;
 }
 
-export class DatePicker extends __React.Component<DatePickerProps, {}> { }
+export class DatePicker extends React.Component<DatePickerProps, {}> { }
 
 export default DatePicker;
diff --git a/lib/dialog/index.d.ts b/lib/dialog/index.d.ts
index 6e2318449..eb95ee3ae 100644
--- a/lib/dialog/index.d.ts
+++ b/lib/dialog/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface DialogTheme {
   /**
@@ -38,7 +39,7 @@ interface DialogActionProps {
   onClick?: Function;
 }
 
-interface DialogProps extends __ReactToolbox.Props {
+interface DialogProps extends ReactToolbox.Props {
   /**
    * A array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons.
    */
@@ -51,7 +52,7 @@ interface DialogProps extends __ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * Callback called when the ESC key is pressed with the overlay active.
    */
@@ -87,6 +88,6 @@ interface DialogProps extends __ReactToolbox.Props {
   type?: string;
 }
 
-export class Dialog extends __React.Component<DialogProps, {}> { }
+export class Dialog extends React.Component<DialogProps, {}> { }
 
 export default Dialog;
diff --git a/lib/drawer/index.d.ts b/lib/drawer/index.d.ts
index a81a64ecb..2c0a84783 100644
--- a/lib/drawer/index.d.ts
+++ b/lib/drawer/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface DrawerTheme {
   /**
@@ -23,7 +24,7 @@ export interface DrawerTheme {
   right?: string;
 }
 
-interface DrawerProps extends __ReactToolbox.Props {
+interface DrawerProps extends ReactToolbox.Props {
   /**
    * If true, the drawer will be visible.
    * @default false
@@ -32,7 +33,7 @@ interface DrawerProps extends __ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * Callback function to be invoked when the overlay is clicked.
    */
@@ -48,6 +49,6 @@ interface DrawerProps extends __ReactToolbox.Props {
   type?: "left" | "right";
 }
 
-export class Drawer extends __React.Component<DrawerProps, {}> { }
+export class Drawer extends React.Component<DrawerProps, {}> { }
 
 export default Drawer;
diff --git a/lib/dropdown/index.d.ts b/lib/dropdown/index.d.ts
index cceddfcab..2c0f207ed 100644
--- a/lib/dropdown/index.d.ts
+++ b/lib/dropdown/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface DropdownTheme {
   /**
@@ -51,7 +52,7 @@ export interface DropdownTheme {
   values?: string;
 }
 
-interface DropdownProps extends __ReactToolbox.Props {
+interface DropdownProps extends ReactToolbox.Props {
   /**
    * If true the dropdown will preselect the first item if the supplied value matches none of the options' values.
    * @default true
@@ -109,6 +110,6 @@ interface DropdownProps extends __ReactToolbox.Props {
   value?: string | number;
 }
 
-export class Dropdown extends __React.Component<DropdownProps, {}> { }
+export class Dropdown extends React.Component<DropdownProps, {}> { }
 
 export default Dropdown;
diff --git a/lib/font_icon/index.d.ts b/lib/font_icon/index.d.ts
index 2d4a9276b..11ca3c014 100644
--- a/lib/font_icon/index.d.ts
+++ b/lib/font_icon/index.d.ts
@@ -1,16 +1,17 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
-interface FontIconProps extends __ReactToolbox.Props {
+interface FontIconProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * The key string for the icon you want be displayed.
    */
-  value?: __React.ReactNode | string;
+  value?: React.ReactNode | string;
 }
 
-export class FontIcon extends __React.Component<FontIconProps, {}> { }
+export class FontIcon extends React.Component<FontIconProps, {}> { }
 
 export default FontIcon;
diff --git a/lib/index.d.ts b/lib/index.d.ts
index 7113d389f..63841d434 100644
--- a/lib/index.d.ts
+++ b/lib/index.d.ts
@@ -1,4 +1,5 @@
-export declare namespace __ReactToolbox {
+import * as React from "react";
+export declare namespace ReactToolbox {
   interface Props {
     /**
      * Set a class for the root component.
@@ -48,8 +49,8 @@ export declare namespace __ReactToolbox {
     /**
      * Set inline style for the root component.
      */
-    style?: __React.CSSProperties;
+    style?: React.CSSProperties;
   }
 }
 
-export default __ReactToolbox;
+export default ReactToolbox;
diff --git a/lib/input/index.d.ts b/lib/input/index.d.ts
index f8265ada0..b1db642a2 100644
--- a/lib/input/index.d.ts
+++ b/lib/input/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface InputTheme {
   /**
@@ -51,11 +52,11 @@ export interface InputTheme {
   withIcon?: string;
 }
 
-interface InputProps extends __ReactToolbox.Props {
+interface InputProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * If true, component will be disabled.
    * @default false
@@ -77,7 +78,7 @@ interface InputProps extends __ReactToolbox.Props {
   /**
    * Name of an icon to use as a label for the input.
    */
-  icon?: __React.ReactNode | string;
+  icon?: React.ReactNode | string;
   /**
    * The text string to use for the floating label element.
    */
@@ -130,6 +131,6 @@ interface InputProps extends __ReactToolbox.Props {
   value?: any;
 }
 
-export class Input extends __React.Component<InputProps, {}> { }
+export class Input extends React.Component<InputProps, {}> { }
 
 export default Input;
diff --git a/lib/layout/index.d.ts b/lib/layout/index.d.ts
index 271cf9211..10004fc25 100644
--- a/lib/layout/index.d.ts
+++ b/lib/layout/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface LayoutTheme {
   /**
@@ -7,7 +8,7 @@ export interface LayoutTheme {
   layout?: string;
 }
 
-interface LayoutProps extends __ReactToolbox.Props {
+interface LayoutProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
@@ -18,7 +19,7 @@ interface LayoutProps extends __ReactToolbox.Props {
   theme?: LayoutTheme;
 }
 
-export class Layout extends __React.Component<LayoutProps, {}> { }
+export class Layout extends React.Component<LayoutProps, {}> { }
 
 export interface NavDrawerTheme {
   /**
@@ -75,7 +76,7 @@ export interface NavDrawerTheme {
   xxxlPermangent?: string;
 }
 
-interface NavDrawerProps extends __ReactToolbox.Props {
+interface NavDrawerProps extends ReactToolbox.Props {
   /**
    * If true, the drawer will be shown as an overlay.
    * @default false
@@ -84,7 +85,7 @@ interface NavDrawerProps extends __ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * Callback function to be invoked when the overlay is clicked.
    */
@@ -114,7 +115,7 @@ interface NavDrawerProps extends __ReactToolbox.Props {
   width?: "normal" | "wide";
 }
 
-export class NavDrawer extends __React.Component<NavDrawerProps, {}> { }
+export class NavDrawer extends React.Component<NavDrawerProps, {}> { }
 
 export interface PanelTheme {
   /**
@@ -127,11 +128,11 @@ export interface PanelTheme {
   scrollY?: string;
 }
 
-interface PanelProps extends __ReactToolbox.Props {
+interface PanelProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * If true, the panel will vertically scroll all content.
    * @default false
@@ -143,7 +144,7 @@ interface PanelProps extends __ReactToolbox.Props {
   theme?: PanelTheme;
 }
 
-export class Panel extends __React.Component<PanelProps, {}> { }
+export class Panel extends React.Component<PanelProps, {}> { }
 
 export interface SidebarTheme {
   /**
@@ -164,11 +165,11 @@ export interface SidebarTheme {
   sidebarContent?: string;
 }
 
-interface SidebarProps extends __ReactToolbox.Props {
+interface SidebarProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * If true, the sidebar will be pinned open.
    * @default false
@@ -190,4 +191,4 @@ interface SidebarProps extends __ReactToolbox.Props {
   width?: number; // 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 25 | 33 | 50 | 66 | 75 | 100;
 }
 
-export class Sidebar extends __React.Component<SidebarProps, {}> { }
+export class Sidebar extends React.Component<SidebarProps, {}> { }
diff --git a/lib/link/index.d.ts b/lib/link/index.d.ts
index 4017c7a88..67da3fa11 100644
--- a/lib/link/index.d.ts
+++ b/lib/link/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface LinkTheme {
   /**
@@ -15,7 +16,7 @@ export interface LinkTheme {
   link?: string;
 }
 
-interface LinkProps extends __ReactToolbox.Props {
+interface LinkProps extends ReactToolbox.Props {
   /**
    * If true, adds active style to link.
    * @default false
@@ -24,7 +25,7 @@ interface LinkProps extends __ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * Sets a count number.
    */
@@ -36,7 +37,7 @@ interface LinkProps extends __ReactToolbox.Props {
   /**
    * An icon key string to include a FontIcon component in front of the text.
    */
-  icon?: __React.ReactNode | string;
+  icon?: React.ReactNode | string;
   /**
    * The text string used for the text content of the link.
    */
@@ -47,4 +48,4 @@ interface LinkProps extends __ReactToolbox.Props {
   theme?: LinkTheme;
 }
 
-export class Link extends __React.Component<LinkProps, {}> { }
+export class Link extends React.Component<LinkProps, {}> { }
diff --git a/lib/list/index.d.ts b/lib/list/index.d.ts
index 5fe467e77..a3b671196 100644
--- a/lib/list/index.d.ts
+++ b/lib/list/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface ListTheme {
   /**
@@ -7,11 +8,11 @@ export interface ListTheme {
   list?: string;
 }
 
-interface ListProps extends __ReactToolbox.Props {
+interface ListProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * If true, each element in the list will have a ripple effect on click
    * @default false
@@ -28,7 +29,7 @@ interface ListProps extends __ReactToolbox.Props {
   theme?: ListTheme;
 }
 
-export class List extends __React.Component<ListProps, {}> { }
+export class List extends React.Component<ListProps, {}> { }
 
 export interface ListCheckboxTheme {
   /**
@@ -65,7 +66,7 @@ export interface ListCheckboxTheme {
   primary?: string;
 }
 
-interface ListCheckboxProps extends __ReactToolbox.Props {
+interface ListCheckboxProps extends ReactToolbox.Props {
   /**
    * Main text of the item. Required.
    */
@@ -106,7 +107,7 @@ interface ListCheckboxProps extends __ReactToolbox.Props {
   theme?: ListCheckboxTheme;
 }
 
-export class ListCheckbox extends __React.Component<ListCheckboxProps, {}> { }
+export class ListCheckbox extends React.Component<ListCheckboxProps, {}> { }
 
 export interface ListDividerTheme {
   /**
@@ -119,7 +120,7 @@ export interface ListDividerTheme {
   inset?: string;
 }
 
-interface ListDividerProps extends __ReactToolbox.Props {
+interface ListDividerProps extends ReactToolbox.Props {
   /**
    * If true, will leave a space at the left side.
    */
@@ -130,7 +131,7 @@ interface ListDividerProps extends __ReactToolbox.Props {
   theme?: ListDividerTheme;
 }
 
-export class ListDivider extends __React.Component<ListDivider, {}> { }
+export class ListDivider extends React.Component<ListDivider, {}> { }
 
 export interface ListItemTheme {
   /**
@@ -179,11 +180,11 @@ export interface ListItemTheme {
   selectable?: string;
 }
 
-interface ListItemProps extends __ReactToolbox.Props {
+interface ListItemProps extends ReactToolbox.Props {
   /**
    * A string URL to specify an avatar in the left side of the item.
    */
-  avatar?: __React.ReactNode | string;
+  avatar?: React.ReactNode | string;
   /**
    * Main text of the item.
    */
@@ -191,7 +192,7 @@ interface ListItemProps extends __ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * If true, the item is displayed as disabled and is not clickable.
    * @default false
@@ -200,15 +201,15 @@ interface ListItemProps extends __ReactToolbox.Props {
   /**
    * An element that will be displayed as the item. If set, this will override caption and legend.
    */
-  itemContent?: __React.ReactNode;
+  itemContent?: React.ReactNode;
   /**
    * A list of elements that are placed on the left side of the item and after the avatar attribute.
    */
-  leftActions?: __React.ReactNode;
+  leftActions?: React.ReactNode;
   /**
    * A string key of a font icon or element to display an icon in the left side of the item.
    */
-  leftIcon?: __React.ReactNode | string;
+  leftIcon?: React.ReactNode | string;
   /**
    * Secondary text to display under the caption.
    */
@@ -216,11 +217,11 @@ interface ListItemProps extends __ReactToolbox.Props {
   /**
    * A list of elements that are placed on the right side of the item and after the rightIcon attribute.
    */
-  rightActions?: __React.ReactNode;
+  rightActions?: React.ReactNode;
   /**
    * The same as the leftIcon but in this case the icon is displayed in the right side.
    */
-  rightIcon?: __React.ReactNode | string;
+  rightIcon?: React.ReactNode | string;
   /**
    * If true, the item displays a ripple effect on click. By default it's inherited from the parent element.
    */
@@ -241,7 +242,7 @@ interface ListItemProps extends __ReactToolbox.Props {
   to?: string;
 }
 
-export class ListItem extends __React.Component<ListItemProps, {}> { }
+export class ListItem extends React.Component<ListItemProps, {}> { }
 
 export interface ListSubHeaderTheme {
   /**
@@ -250,7 +251,7 @@ export interface ListSubHeaderTheme {
   subheader?: string;
 }
 
-interface ListSubHeaderProps extends __ReactToolbox.Props {
+interface ListSubHeaderProps extends ReactToolbox.Props {
   /**
    * Text that will be displayed.
    */
@@ -261,4 +262,4 @@ interface ListSubHeaderProps extends __ReactToolbox.Props {
   theme?: ListSubHeaderTheme;
 }
 
-export class ListSubHeader extends __React.Component<ListSubHeaderProps, {}> { }
+export class ListSubHeader extends React.Component<ListSubHeaderProps, {}> { }
diff --git a/lib/menu/index.d.ts b/lib/menu/index.d.ts
index 505d5a8f4..5d9fccdfd 100644
--- a/lib/menu/index.d.ts
+++ b/lib/menu/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface MenuTheme {
   /**
@@ -43,7 +44,7 @@ export interface MenuTheme {
   topRight?: string;
 }
 
-interface MenuProps extends __ReactToolbox.Props {
+interface MenuProps extends ReactToolbox.Props {
   /**
    * If true, the menu will be displayed as opened by default.
    * @default false
@@ -52,7 +53,7 @@ interface MenuProps extends __ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * Callback that will be called when the menu is being hidden.
    */
@@ -95,7 +96,7 @@ interface MenuProps extends __ReactToolbox.Props {
   theme?: MenuTheme;
 }
 
-export class Menu extends __React.Component<MenuProps, {}> { }
+export class Menu extends React.Component<MenuProps, {}> { }
 
 export interface IconMenuTheme {
   /**
@@ -108,16 +109,16 @@ export interface IconMenuTheme {
   iconMenu?: string;
 }
 
-interface IconMenuProps extends __ReactToolbox.Props {
+interface IconMenuProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * Icon font key string or Element to display the opener icon.
    * @default more_vert
    */
-  icon?: __React.ReactNode | string;
+  icon?: React.ReactNode | string;
   /**
    * If true, the icon will show a ripple when is clicked.
    * @default true
@@ -160,7 +161,7 @@ interface IconMenuProps extends __ReactToolbox.Props {
   theme?: IconMenuTheme;
 }
 
-export class IconMenu extends __React.Component<IconMenuProps, {}> { }
+export class IconMenu extends React.Component<IconMenuProps, {}> { }
 
 export interface MenuDividerTheme {
   /**
@@ -169,14 +170,14 @@ export interface MenuDividerTheme {
   menuDivider?: string;
 }
 
-interface MenuDividerProps extends __ReactToolbox.Props {
+interface MenuDividerProps extends ReactToolbox.Props {
   /**
    * Classnames object defining the component style.
    */
   theme?: MenuDividerTheme;
 }
 
-export class MenuDivider extends __React.Component<MenuDividerProps, {}> { }
+export class MenuDivider extends React.Component<MenuDividerProps, {}> { }
 
 export interface MenuItemTheme {
   /**
@@ -205,7 +206,7 @@ export interface MenuItemTheme {
   shortcut?: string;
 }
 
-interface MenuItemProps extends __ReactToolbox.Props {
+interface MenuItemProps extends ReactToolbox.Props {
   /**
    * The text to include in the menu item. Required.
    */
@@ -213,7 +214,7 @@ interface MenuItemProps extends __ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * If true, the item will be displayed as disabled and is not selectable.
    * @default false
@@ -222,7 +223,7 @@ interface MenuItemProps extends __ReactToolbox.Props {
   /**
    * Icon font key string or Element to display in the right side of the option.
    */
-  icon?: __React.ReactNode | string;
+  icon?: React.ReactNode | string;
   /**
    * Transferred from the Menu component for selectable menus. Indicates if it's the current active option.
    * @default false
@@ -238,4 +239,4 @@ interface MenuItemProps extends __ReactToolbox.Props {
   theme?: MenuItemTheme;
 }
 
-export class MenuItem extends __React.Component<MenuItemProps, {}> { }
+export class MenuItem extends React.Component<MenuItemProps, {}> { }
diff --git a/lib/navigation/index.d.ts b/lib/navigation/index.d.ts
index d3425234e..a2795a8da 100644
--- a/lib/navigation/index.d.ts
+++ b/lib/navigation/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface NavigationTheme {
   /**
@@ -19,7 +20,7 @@ export interface NavigationTheme {
   vertical?: string;
 }
 
-interface NavigationProps extends __ReactToolbox.Props {
+interface NavigationProps extends ReactToolbox.Props {
   /**
    * Array of objects that will be represented as <Button/> so the keys will be transferred as properties the Button Component.
    */
@@ -27,7 +28,7 @@ interface NavigationProps extends __ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * Array of objects similar to actions but that will be rendered as <Link/> component definition.
    */
@@ -43,4 +44,4 @@ interface NavigationProps extends __ReactToolbox.Props {
   type?: "vertical" | "horizontal";
 }
 
-export class Navigation extends __React.Component<NavigationProps, {}> { }
+export class Navigation extends React.Component<NavigationProps, {}> { }
diff --git a/lib/progress_bar/index.d.ts b/lib/progress_bar/index.d.ts
index 73fa7c33f..7d0096e93 100644
--- a/lib/progress_bar/index.d.ts
+++ b/lib/progress_bar/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface ProgressBarTheme {
   /**
@@ -35,7 +36,7 @@ export interface ProgressBarTheme {
   value?: string;
 }
 
-interface ProgressBarProps extends __ReactToolbox.Props {
+interface ProgressBarProps extends ReactToolbox.Props {
   /**
    * Value of a secondary progress bar useful for buffering.
    * @default 0
@@ -77,6 +78,6 @@ interface ProgressBarProps extends __ReactToolbox.Props {
   value?: number;
 }
 
-export class ProgressBar extends __React.Component<ProgressBarProps, {}> { }
+export class ProgressBar extends React.Component<ProgressBarProps, {}> { }
 
 export default ProgressBar;
diff --git a/lib/radio/index.d.ts b/lib/radio/index.d.ts
index 93b1fe041..8cc2695de 100644
--- a/lib/radio/index.d.ts
+++ b/lib/radio/index.d.ts
@@ -1,10 +1,11 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
-interface RadioGroupProps extends __ReactToolbox.Props {
+interface RadioGroupProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * If true, the group will be displayed as disabled.
    * @default false
@@ -24,7 +25,7 @@ interface RadioGroupProps extends __ReactToolbox.Props {
   value?: any;
 }
 
-export class RadioGroup extends __React.Component<RadioGroupProps, {}> { }
+export class RadioGroup extends React.Component<RadioGroupProps, {}> { }
 
 export interface RadioButtonTheme {
   /**
@@ -57,7 +58,7 @@ export interface RadioButtonTheme {
   text?: string;
 }
 
-interface RadioButtonProps extends __ReactToolbox.Props {
+interface RadioButtonProps extends ReactToolbox.Props {
   /**
    * If true, the input element will be selected by default. Transferred from the parent.
    * @default false
@@ -71,7 +72,7 @@ interface RadioButtonProps extends __ReactToolbox.Props {
   /**
    * Label for the radio button.
    */
-  label?: __React.ReactNode | string;
+  label?: React.ReactNode | string;
   /**
    * Name for the input element.
    */
@@ -98,4 +99,4 @@ interface RadioButtonProps extends __ReactToolbox.Props {
   value?: any;
 }
 
-export class RadioButton extends __React.Component<RadioButtonProps, {}> { }
+export class RadioButton extends React.Component<RadioButtonProps, {}> { }
diff --git a/lib/ripple/index.d.ts b/lib/ripple/index.d.ts
index f12351cf8..998de2ab1 100644
--- a/lib/ripple/index.d.ts
+++ b/lib/ripple/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface RippleTheme {
   /**
@@ -23,7 +24,7 @@ interface RippleProps {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * True in case you want a centered ripple.
    * @default false
@@ -44,6 +45,6 @@ interface RippleProps {
   theme?: RippleTheme;
 }
 
-export class Ripple extends __React.Component<RippleProps, {}> { }
+export class Ripple extends React.Component<RippleProps, {}> { }
 
 export default Ripple;
diff --git a/lib/slider/index.d.ts b/lib/slider/index.d.ts
index e78e0bcef..41014b23e 100644
--- a/lib/slider/index.d.ts
+++ b/lib/slider/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface SliderTheme {
   /**
@@ -55,7 +56,7 @@ export interface SliderTheme {
   snaps?: string;
 }
 
-interface SliderProps extends __ReactToolbox.Props {
+interface SliderProps extends ReactToolbox.Props {
   /**
    * If true, an input is shown and the user can set the slider from keyboard value.
    * @default false
@@ -101,6 +102,6 @@ interface SliderProps extends __ReactToolbox.Props {
   value?: number;
 }
 
-export class Slider extends __React.Component<SliderProps, {}> { }
+export class Slider extends React.Component<SliderProps, {}> { }
 
 export default Slider;
diff --git a/lib/snackbar/index.d.ts b/lib/snackbar/index.d.ts
index d51bd71cc..adf1b8390 100644
--- a/lib/snackbar/index.d.ts
+++ b/lib/snackbar/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface SnackbarTheme {
   /**
@@ -35,7 +36,7 @@ export interface SnackbarTheme {
   warning?: string;
 }
 
-interface SnackbarProps extends __ReactToolbox.Props {
+interface SnackbarProps extends ReactToolbox.Props {
   /**
    * Label for the action component inside the Snackbar.
    */
@@ -48,7 +49,7 @@ interface SnackbarProps extends __ReactToolbox.Props {
   /**
    * String key for an icon or Element which will be displayed in left side of the snackbar.
    */
-  icon?: __React.ReactNode | string;
+  icon?: React.ReactNode | string;
   /**
    * Text to display in the content. Required.
    */
@@ -71,6 +72,6 @@ interface SnackbarProps extends __ReactToolbox.Props {
   type?: "accept" | "cancel" | "warning";
 }
 
-export class Snackbar extends __React.Component<SnackbarProps, {}> { }
+export class Snackbar extends React.Component<SnackbarProps, {}> { }
 
 export default Snackbar;
diff --git a/lib/switch/index.d.ts b/lib/switch/index.d.ts
index f42ff881a..fd1ab6e0e 100644
--- a/lib/switch/index.d.ts
+++ b/lib/switch/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface SwitchTheme {
   /**
@@ -35,7 +36,7 @@ export interface SwitchTheme {
   thumb?: string;
 }
 
-interface SwitchProps extends __ReactToolbox.Props {
+interface SwitchProps extends ReactToolbox.Props {
   /**
    * If true, the switch will be enabled.
    * @default false
@@ -72,6 +73,6 @@ interface SwitchProps extends __ReactToolbox.Props {
   theme?: SwitchTheme;
 }
 
-export class Switch extends __React.Component<SwitchProps, {}> { }
+export class Switch extends React.Component<SwitchProps, {}> { }
 
 export default Switch;
diff --git a/lib/table/index.d.ts b/lib/table/index.d.ts
index f77029943..044b5141b 100644
--- a/lib/table/index.d.ts
+++ b/lib/table/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface TableTheme {
   /**
@@ -23,7 +24,7 @@ export interface TableTheme {
   table?: string;
 }
 
-interface TableProps extends __ReactToolbox.Props {
+interface TableProps extends ReactToolbox.Props {
   /**
    * If true, component will show a heading using model field names.
    * @default true
@@ -65,6 +66,6 @@ interface TableProps extends __ReactToolbox.Props {
   theme?: TableTheme;
 }
 
-export class Table extends __React.Component<TableProps, {}> { }
+export class Table extends React.Component<TableProps, {}> { }
 
 export default Table;
diff --git a/lib/tabs/index.d.ts b/lib/tabs/index.d.ts
index fa30a3823..15e5ee75d 100644
--- a/lib/tabs/index.d.ts
+++ b/lib/tabs/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface TabsTheme {
   /**
@@ -23,11 +24,11 @@ export interface TabsTheme {
   tab?: string;
 }
 
-interface TabsProps extends __ReactToolbox.Props {
+interface TabsProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
-  children?: __React.ReactNode;
+  children?: React.ReactNode;
   /**
    * Disable the animation below the active tab.
    * @default false
@@ -48,7 +49,7 @@ interface TabsProps extends __ReactToolbox.Props {
   theme?: TabsTheme;
 }
 
-export class Tabs extends __React.Component<TabsProps, {}> { }
+export class Tabs extends React.Component<TabsProps, {}> { }
 
 export interface TabTheme {
   /**
@@ -69,7 +70,7 @@ export interface TabTheme {
   label?: string;
 }
 
-interface TabProps extends __ReactToolbox.Props {
+interface TabProps extends ReactToolbox.Props {
   /**
    * If true, the current component is visible.
    */
@@ -102,4 +103,4 @@ interface TabProps extends __ReactToolbox.Props {
   theme?: TabTheme;
 }
 
-export class Tab extends __React.Component<TabProps, {}> { }
+export class Tab extends React.Component<TabProps, {}> { }
diff --git a/lib/time_picker/index.d.ts b/lib/time_picker/index.d.ts
index 0254cd542..63f6237e3 100644
--- a/lib/time_picker/index.d.ts
+++ b/lib/time_picker/index.d.ts
@@ -1,4 +1,5 @@
-import __ReactToolbox from "../index";
+import * as React from "react";
+import ReactToolbox from "../index";
 
 export interface TimePickerTheme {
   /**
@@ -103,7 +104,7 @@ interface TimePickerProps {
   /**
    * A key to identify an Icon from Material Design Icons or a custom Icon Element.
    */
-  icon?: __React.ReactNode | string;
+  icon?: React.ReactNode | string;
   /**
    * This class will be applied to Input component of TimePicker.
    */
@@ -131,6 +132,6 @@ interface TimePickerProps {
   value?: Date;
 }
 
-export class TimePicker extends __React.Component<TimePickerProps, {}> { }
+export class TimePicker extends React.Component<TimePickerProps, {}> { }
 
 export default TimePicker;
diff --git a/lib/tooltip/index.d.ts b/lib/tooltip/index.d.ts
index 13c7032c7..35523937f 100644
--- a/lib/tooltip/index.d.ts
+++ b/lib/tooltip/index.d.ts
@@ -1,3 +1,4 @@
+import * as React from "react";
 export interface TooltipTheme {
   /**
    * Added to the tooltip element.
@@ -33,7 +34,7 @@ interface TooltipProps {
   tooltipHideOnClick?: boolean;
 }
 
-declare class TooltipComponent<P, S> extends __React.Component<P, S> {
+declare class TooltipComponent<P, S> extends React.Component<P, S> {
   props: P & TooltipProps;
 }
 
@@ -41,6 +42,6 @@ interface TooltippedComponentClass<P> extends TooltipProps {
   new (props?: P, context?: any): TooltipComponent<P, any>;
 }
 
-export function Tooltip<P>(componentClass: __React.ComponentClass<P>): TooltippedComponentClass<P>;
+export function Tooltip<P>(componentClass: React.ComponentClass<P>): TooltippedComponentClass<P>;
 
 export default Tooltip;

From dcd53a4e751672fc768dc44b9e1380158ebc7592 Mon Sep 17 00:00:00 2001
From: Tucker Connelly <web@tuckerconnelly.com>
Date: Fri, 2 Sep 2016 11:32:55 -0400
Subject: [PATCH 0783/1024] Make Table multi-selectable again

---
 components/table/Table.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/table/Table.js b/components/table/Table.js
index 89d4d0667..f52f464ba 100644
--- a/components/table/Table.js
+++ b/components/table/Table.js
@@ -42,11 +42,11 @@ const factory = (TableHead, TableRow) => {
 
     handleRowSelect = (index) => {
       if (this.props.onSelect) {
-        let newSelection = [];
+        let newSelection = [...this.props.selected];
         if (this.props.multiSelectable) {
           const position = this.props.selected.indexOf(index);
-          newSelection = this.props.selected.indexOf(index) !== -1
-            ? this.props.selected.filter((el, idx) => idx !== position)
+          newSelection = position !== -1
+            ? newSelection.filter((el, idx) => idx !== position)
             : newSelection.concat([index]);
         } else {
           newSelection = [index];

From e2d7517036ea9f859a7ddaa6e621ff1fe9ef6c16 Mon Sep 17 00:00:00 2001
From: Tucker Connelly <web@tuckerconnelly.com>
Date: Fri, 2 Sep 2016 12:09:10 -0400
Subject: [PATCH 0784/1024] Commit build

---
 lib/autocomplete/Autocomplete.js    | 30 +++++++++---------
 lib/button/Button.js                |  4 +--
 lib/button/IconButton.js            |  4 +--
 lib/button/theme.scss               |  6 ++--
 lib/checkbox/Checkbox.js            |  4 +--
 lib/date_picker/Calendar.js         |  4 +--
 lib/date_picker/CalendarDay.js      |  4 +--
 lib/date_picker/CalendarMonth.js    |  4 +--
 lib/date_picker/DatePicker.js       |  4 +--
 lib/date_picker/DatePickerDialog.js |  4 +--
 lib/dialog/theme.scss               | 12 ++++++++
 lib/dropdown/Dropdown.js            |  4 +--
 lib/form/Form.js                    |  4 +--
 lib/hoc/ActivableRenderer.js        |  4 +--
 lib/hoc/Portal.js                   |  2 +-
 lib/input/Input.js                  |  4 +--
 lib/list/List.js                    |  2 +-
 lib/list/ListItem.js                |  4 +--
 lib/list/ListItemContent.js         |  2 +-
 lib/menu/IconMenu.js                |  7 +++--
 lib/menu/Menu.js                    |  4 +--
 lib/menu/MenuItem.js                |  4 +--
 lib/overlay/Overlay.js              |  2 +-
 lib/progress_bar/ProgressBar.js     |  2 +-
 lib/radio/RadioButton.js            |  4 +--
 lib/radio/RadioGroup.js             |  4 +--
 lib/ripple/Ripple.js                | 39 ++++++++++++------------
 lib/slider/Slider.js                |  4 +--
 lib/snackbar/Snackbar.js            |  2 +-
 lib/switch/Switch.js                |  4 +--
 lib/table/Table.js                  | 10 +++---
 lib/table/TableRow.js               |  4 +--
 lib/tabs/Tab.js                     |  4 +--
 lib/tabs/TabContent.js              |  2 +-
 lib/tabs/Tabs.js                    | 47 ++++++++++++++++++++++++-----
 lib/tabs/__tests__/index.spec.js    | 41 ++++++++++++++++++++++++-
 lib/tabs/_config.scss               |  7 +++++
 lib/tabs/theme.scss                 | 24 +++++++++++++++
 lib/time_picker/Clock.js            |  4 +--
 lib/time_picker/ClockFace.js        |  4 +--
 lib/time_picker/ClockHand.js        |  4 +--
 lib/time_picker/ClockHours.js       |  4 +--
 lib/time_picker/ClockMinutes.js     |  4 +--
 lib/time_picker/TimePicker.js       |  4 +--
 lib/time_picker/TimePickerDialog.js |  4 +--
 lib/tooltip/Tooltip.js              | 12 ++++----
 lib/utils/utils.js                  |  9 ++++++
 47 files changed, 250 insertions(+), 120 deletions(-)

diff --git a/lib/autocomplete/Autocomplete.js b/lib/autocomplete/Autocomplete.js
index 70f2a8dbc..a03d125e0 100644
--- a/lib/autocomplete/Autocomplete.js
+++ b/lib/autocomplete/Autocomplete.js
@@ -64,7 +64,7 @@ var factory = function factory(Chip, Input) {
     _inherits(Autocomplete, _Component);
 
     function Autocomplete() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -74,7 +74,7 @@ var factory = function factory(Chip, Input) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Autocomplete)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Autocomplete.__proto__ || Object.getPrototypeOf(Autocomplete)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         direction: _this.props.direction,
         focus: false,
         showAllSuggestions: _this.props.showSuggestionsWhenValueIsSet,
@@ -109,7 +109,7 @@ var factory = function factory(Chip, Input) {
             }
             _this.setState({ active: target });
           }
-          _this.select(target, event);
+          _this.select(event, target);
         }
 
         if (event.which === 27) _reactDom2.default.findDOMNode(_this).querySelector('input').blur();
@@ -123,10 +123,11 @@ var factory = function factory(Chip, Input) {
         }
       }, _this.handleSuggestionHover = function (event) {
         _this.setState({ active: event.target.id });
-      }, _this.select = function (event) {
+      }, _this.select = function (event, target) {
         _events2.default.pauseEvent(event);
         var values = _this.values(_this.props.value);
-        _this.handleChange([event.target.id].concat(_toConsumableArray(values.keys())), event);
+        var newValue = target === void 0 ? event.target.id : target;
+        _this.handleChange([newValue].concat(_toConsumableArray(values.keys())), event);
       }, _temp), _possibleConstructorReturn(_this, _ret);
     }
 
@@ -176,7 +177,8 @@ var factory = function factory(Chip, Input) {
       key: 'suggestions',
       value: function suggestions() {
         var suggest = new Map();
-        var query = (this.state.query || (!this.props.multiple ? this.props.value : '')).toLowerCase().trim() || '';
+        var rawQuery = this.state.query || this.props.multiple ? '' : this.props.value;
+        var query = (rawQuery || '').toLowerCase().trim();
         var values = this.values();
         var source = this.source();
 
@@ -333,11 +335,11 @@ var factory = function factory(Chip, Input) {
         var _this2 = this;
 
         if (this.props.multiple) {
-          var selectedItems = [].concat(_toConsumableArray(this.values())).map(function (_ref) {
-            var _ref2 = _slicedToArray(_ref, 2);
+          var selectedItems = [].concat(_toConsumableArray(this.values())).map(function (_ref2) {
+            var _ref3 = _slicedToArray(_ref2, 2);
 
-            var key = _ref2[0];
-            var value = _ref2[1];
+            var key = _ref3[0];
+            var value = _ref3[1];
 
             return _react2.default.createElement(
               Chip,
@@ -365,11 +367,11 @@ var factory = function factory(Chip, Input) {
 
         var theme = this.props.theme;
 
-        var suggestions = [].concat(_toConsumableArray(this.suggestions())).map(function (_ref3) {
-          var _ref4 = _slicedToArray(_ref3, 2);
+        var suggestions = [].concat(_toConsumableArray(this.suggestions())).map(function (_ref4) {
+          var _ref5 = _slicedToArray(_ref4, 2);
 
-          var key = _ref4[0];
-          var value = _ref4[1];
+          var key = _ref5[0];
+          var value = _ref5[1];
 
           var className = (0, _classnames5.default)(theme.suggestion, _defineProperty({}, theme.active, _this3.state.active === key));
           return _react2.default.createElement(
diff --git a/lib/button/Button.js b/lib/button/Button.js
index 2b9e424f5..b38aeb3b7 100644
--- a/lib/button/Button.js
+++ b/lib/button/Button.js
@@ -46,7 +46,7 @@ var factory = function factory(ripple, FontIcon) {
     _inherits(Button, _Component);
 
     function Button() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -56,7 +56,7 @@ var factory = function factory(ripple, FontIcon) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Button)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Button.__proto__ || Object.getPrototypeOf(Button)).call.apply(_ref, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
         _this.refs.button.blur();
         if (_this.props.onMouseUp) _this.props.onMouseUp(event);
       }, _this.handleMouseLeave = function (event) {
diff --git a/lib/button/IconButton.js b/lib/button/IconButton.js
index 98f6331b6..40f22fd91 100644
--- a/lib/button/IconButton.js
+++ b/lib/button/IconButton.js
@@ -46,7 +46,7 @@ var factory = function factory(ripple, FontIcon) {
     _inherits(IconButton, _Component);
 
     function IconButton() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -56,7 +56,7 @@ var factory = function factory(ripple, FontIcon) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(IconButton)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = IconButton.__proto__ || Object.getPrototypeOf(IconButton)).call.apply(_ref, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
         _this.refs.button.blur();
         if (_this.props.onMouseUp) _this.props.onMouseUp(event);
       }, _this.handleMouseLeave = function (event) {
diff --git a/lib/button/theme.scss b/lib/button/theme.scss
index f57d6027e..cff21b375 100644
--- a/lib/button/theme.scss
+++ b/lib/button/theme.scss
@@ -31,14 +31,14 @@
   > span:not([data-react-toolbox="tooltip"]) {
     display: inline-block;
     line-height: $button-height;
-    vertical-align: middle;
+    vertical-align: top;
   }
   > svg {
     display: inline-block;
     width: 1em;
     height: $button-height;
     font-size: 120%;
-    vertical-align: middle;
+    vertical-align: top;
     fill: currentColor;
   }
   > * {
@@ -126,7 +126,7 @@
   > .icon, svg {
     font-size: $button-toggle-font-size;
     line-height: $button-height;
-    vertical-align: middle;
+    vertical-align: top;
   }
   > .rippleWrapper {
     border-radius: 50%;
diff --git a/lib/checkbox/Checkbox.js b/lib/checkbox/Checkbox.js
index 164ffb674..a7d090d32 100644
--- a/lib/checkbox/Checkbox.js
+++ b/lib/checkbox/Checkbox.js
@@ -46,7 +46,7 @@ var factory = function factory(Check) {
     _inherits(Checkbox, _Component);
 
     function Checkbox() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -56,7 +56,7 @@ var factory = function factory(Check) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Checkbox)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleToggle = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Checkbox.__proto__ || Object.getPrototypeOf(Checkbox)).call.apply(_ref, [this].concat(args))), _this), _this.handleToggle = function (event) {
         if (event.pageX !== 0 && event.pageY !== 0) _this.blur();
         if (!_this.props.disabled && _this.props.onChange) {
           _this.props.onChange(!_this.props.checked, event);
diff --git a/lib/date_picker/Calendar.js b/lib/date_picker/Calendar.js
index d4e5a6630..1cc97b143 100644
--- a/lib/date_picker/Calendar.js
+++ b/lib/date_picker/Calendar.js
@@ -43,7 +43,7 @@ var factory = function factory(IconButton) {
     _inherits(Calendar, _Component);
 
     function Calendar() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -53,7 +53,7 @@ var factory = function factory(IconButton) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Calendar)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Calendar.__proto__ || Object.getPrototypeOf(Calendar)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         viewDate: _this.props.selectedDate
       }, _this.handleDayClick = function (day) {
         _this.props.onChange(_time2.default.setDay(_this.state.viewDate, day), true);
diff --git a/lib/date_picker/CalendarDay.js b/lib/date_picker/CalendarDay.js
index 023206fde..af1b4a944 100644
--- a/lib/date_picker/CalendarDay.js
+++ b/lib/date_picker/CalendarDay.js
@@ -32,7 +32,7 @@ var Day = function (_Component) {
   _inherits(Day, _Component);
 
   function Day() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -42,7 +42,7 @@ var Day = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Day)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function () {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Day.__proto__ || Object.getPrototypeOf(Day)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function () {
       if (!_this.props.disabled && _this.props.onClick) {
         _this.props.onClick(_this.props.day);
       }
diff --git a/lib/date_picker/CalendarMonth.js b/lib/date_picker/CalendarMonth.js
index 772c665e3..ad3afbe25 100644
--- a/lib/date_picker/CalendarMonth.js
+++ b/lib/date_picker/CalendarMonth.js
@@ -36,7 +36,7 @@ var Month = function (_Component) {
   _inherits(Month, _Component);
 
   function Month() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -46,7 +46,7 @@ var Month = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Month)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleDayClick = function (day) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Month.__proto__ || Object.getPrototypeOf(Month)).call.apply(_ref, [this].concat(args))), _this), _this.handleDayClick = function (day) {
       if (_this.props.onDayClick) _this.props.onDayClick(day);
     }, _temp), _possibleConstructorReturn(_this, _ret);
   }
diff --git a/lib/date_picker/DatePicker.js b/lib/date_picker/DatePicker.js
index a8409ea52..afaf0b1a8 100644
--- a/lib/date_picker/DatePicker.js
+++ b/lib/date_picker/DatePicker.js
@@ -66,7 +66,7 @@ var factory = function factory(Input, DatePickerDialog) {
     _inherits(DatePicker, _Component);
 
     function DatePicker() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -76,7 +76,7 @@ var factory = function factory(Input, DatePickerDialog) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(DatePicker)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = DatePicker.__proto__ || Object.getPrototypeOf(DatePicker)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         active: _this.props.active
       }, _this.handleDismiss = function () {
         _this.setState({ active: false });
diff --git a/lib/date_picker/DatePickerDialog.js b/lib/date_picker/DatePickerDialog.js
index 0a3d91105..2c227b4c6 100644
--- a/lib/date_picker/DatePickerDialog.js
+++ b/lib/date_picker/DatePickerDialog.js
@@ -31,7 +31,7 @@ var factory = function factory(Dialog, Calendar) {
     _inherits(CalendarDialog, _Component);
 
     function CalendarDialog() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -41,7 +41,7 @@ var factory = function factory(Dialog, Calendar) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(CalendarDialog)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = CalendarDialog.__proto__ || Object.getPrototypeOf(CalendarDialog)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         display: 'months',
         date: _this.props.value
       }, _this.handleNewDate = function (value, dayClick) {
diff --git a/lib/dialog/theme.scss b/lib/dialog/theme.scss
index 62e7388db..c7ac36f7f 100644
--- a/lib/dialog/theme.scss
+++ b/lib/dialog/theme.scss
@@ -47,6 +47,18 @@
   width: 96vw;
 }
 
+.fullscreen {
+  width: 96vw;
+
+  @media screen and (max-width: $layout-breakpoint-xs) {
+    max-width: 100vw;
+    max-height: 100vh;
+    min-height: 100vh;
+    width: 100vw;
+    border-radius: 0;
+  }
+}
+
 .title {
   @include typo-title();
   flex-grow: 0;
diff --git a/lib/dropdown/Dropdown.js b/lib/dropdown/Dropdown.js
index a9fe5171c..5009fcc6f 100644
--- a/lib/dropdown/Dropdown.js
+++ b/lib/dropdown/Dropdown.js
@@ -50,7 +50,7 @@ var factory = function factory(Input) {
     _inherits(Dropdown, _Component);
 
     function Dropdown() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -60,7 +60,7 @@ var factory = function factory(Input) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Dropdown)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Dropdown.__proto__ || Object.getPrototypeOf(Dropdown)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         active: false,
         up: false
       }, _this.close = function () {
diff --git a/lib/form/Form.js b/lib/form/Form.js
index 7de399c99..fe56e77f7 100644
--- a/lib/form/Form.js
+++ b/lib/form/Form.js
@@ -80,7 +80,7 @@ var factory = function factory(Autocomplete, Button, Checkbox, DatePicker, Dropd
     _inherits(Form, _Component);
 
     function Form() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -90,7 +90,7 @@ var factory = function factory(Autocomplete, Button, Checkbox, DatePicker, Dropd
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Form)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.onSubmit = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Form.__proto__ || Object.getPrototypeOf(Form)).call.apply(_ref, [this].concat(args))), _this), _this.onSubmit = function (event) {
         event.preventDefault();
         if (_this.props.onSubmit) _this.props.onSubmit(event);
       }, _this.onChange = function (field, value, event) {
diff --git a/lib/hoc/ActivableRenderer.js b/lib/hoc/ActivableRenderer.js
index e64654f71..f15f41a35 100644
--- a/lib/hoc/ActivableRenderer.js
+++ b/lib/hoc/ActivableRenderer.js
@@ -31,7 +31,7 @@ var ActivableRendererFactory = function ActivableRendererFactory() {
       _inherits(ActivableRenderer, _Component);
 
       function ActivableRenderer() {
-        var _Object$getPrototypeO;
+        var _ref;
 
         var _temp, _this, _ret;
 
@@ -41,7 +41,7 @@ var ActivableRendererFactory = function ActivableRendererFactory() {
           args[_key] = arguments[_key];
         }
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(ActivableRenderer)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ActivableRenderer.__proto__ || Object.getPrototypeOf(ActivableRenderer)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
           active: _this.props.active,
           rendered: _this.props.active
         }, _temp), _possibleConstructorReturn(_this, _ret);
diff --git a/lib/hoc/Portal.js b/lib/hoc/Portal.js
index bf12d9039..0d8cda45a 100644
--- a/lib/hoc/Portal.js
+++ b/lib/hoc/Portal.js
@@ -28,7 +28,7 @@ var Portal = function (_Component) {
   function Portal() {
     _classCallCheck(this, Portal);
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(Portal).apply(this, arguments));
+    return _possibleConstructorReturn(this, (Portal.__proto__ || Object.getPrototypeOf(Portal)).apply(this, arguments));
   }
 
   _createClass(Portal, [{
diff --git a/lib/input/Input.js b/lib/input/Input.js
index d29f218bc..e561fc219 100644
--- a/lib/input/Input.js
+++ b/lib/input/Input.js
@@ -44,7 +44,7 @@ var factory = function factory(FontIcon) {
     _inherits(Input, _React$Component);
 
     function Input() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -54,7 +54,7 @@ var factory = function factory(FontIcon) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Input)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleChange = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Input.__proto__ || Object.getPrototypeOf(Input)).call.apply(_ref, [this].concat(args))), _this), _this.handleChange = function (event) {
         var _this$props = _this.props;
         var onChange = _this$props.onChange;
         var multiline = _this$props.multiline;
diff --git a/lib/list/List.js b/lib/list/List.js
index cd315c954..eac163f81 100644
--- a/lib/list/List.js
+++ b/lib/list/List.js
@@ -38,7 +38,7 @@ var factory = function factory(ListItem) {
     function List() {
       _classCallCheck(this, List);
 
-      return _possibleConstructorReturn(this, Object.getPrototypeOf(List).apply(this, arguments));
+      return _possibleConstructorReturn(this, (List.__proto__ || Object.getPrototypeOf(List)).apply(this, arguments));
     }
 
     _createClass(List, [{
diff --git a/lib/list/ListItem.js b/lib/list/ListItem.js
index 193dec03f..3358acddb 100644
--- a/lib/list/ListItem.js
+++ b/lib/list/ListItem.js
@@ -44,7 +44,7 @@ var factory = function factory(ripple, ListItemLayout, ListItemContent) {
     _inherits(ListItem, _Component);
 
     function ListItem() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -54,7 +54,7 @@ var factory = function factory(ripple, ListItemLayout, ListItemContent) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(ListItem)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ListItem.__proto__ || Object.getPrototypeOf(ListItem)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
         if (_this.props.onClick && !_this.props.disabled) {
           _this.props.onClick(event);
         }
diff --git a/lib/list/ListItemContent.js b/lib/list/ListItemContent.js
index f9924b4a0..f288d9dff 100644
--- a/lib/list/ListItemContent.js
+++ b/lib/list/ListItemContent.js
@@ -42,7 +42,7 @@ var factory = function factory(ListItemText) {
     function ListItemContent() {
       _classCallCheck(this, ListItemContent);
 
-      return _possibleConstructorReturn(this, Object.getPrototypeOf(ListItemContent).apply(this, arguments));
+      return _possibleConstructorReturn(this, (ListItemContent.__proto__ || Object.getPrototypeOf(ListItemContent)).apply(this, arguments));
     }
 
     _createClass(ListItemContent, [{
diff --git a/lib/menu/IconMenu.js b/lib/menu/IconMenu.js
index 062b856fa..70bff718d 100644
--- a/lib/menu/IconMenu.js
+++ b/lib/menu/IconMenu.js
@@ -40,7 +40,7 @@ var factory = function factory(IconButton, Menu) {
     _inherits(IconMenu, _Component);
 
     function IconMenu() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -50,7 +50,7 @@ var factory = function factory(IconButton, Menu) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(IconMenu)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = IconMenu.__proto__ || Object.getPrototypeOf(IconMenu)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         active: false
       }, _this.handleButtonClick = function (event) {
         _this.setState({ active: !_this.state.active });
@@ -84,7 +84,8 @@ var factory = function factory(IconButton, Menu) {
               position: this.props.position,
               ripple: this.props.menuRipple,
               selectable: this.props.selectable,
-              selected: this.props.selected
+              selected: this.props.selected,
+              theme: this.props.theme
             },
             this.props.children
           )
diff --git a/lib/menu/Menu.js b/lib/menu/Menu.js
index bcc8ed066..51ab885d7 100644
--- a/lib/menu/Menu.js
+++ b/lib/menu/Menu.js
@@ -53,7 +53,7 @@ var factory = function factory(MenuItem) {
     _inherits(Menu, _Component);
 
     function Menu() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -63,7 +63,7 @@ var factory = function factory(MenuItem) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Menu)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Menu.__proto__ || Object.getPrototypeOf(Menu)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         active: _this.props.active,
         rippled: false
       }, _this.handleDocumentClick = function (event) {
diff --git a/lib/menu/MenuItem.js b/lib/menu/MenuItem.js
index 7562dfa0b..2670f4325 100644
--- a/lib/menu/MenuItem.js
+++ b/lib/menu/MenuItem.js
@@ -46,7 +46,7 @@ var factory = function factory(ripple) {
     _inherits(MenuItem, _Component);
 
     function MenuItem() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -56,7 +56,7 @@ var factory = function factory(ripple) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(MenuItem)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = MenuItem.__proto__ || Object.getPrototypeOf(MenuItem)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
         if (_this.props.onClick && !_this.props.disabled) {
           _this.props.onClick(event, _this);
         }
diff --git a/lib/overlay/Overlay.js b/lib/overlay/Overlay.js
index 0bf6de75e..5fa1d7d61 100644
--- a/lib/overlay/Overlay.js
+++ b/lib/overlay/Overlay.js
@@ -39,7 +39,7 @@ var Overlay = function (_Component) {
   function Overlay() {
     _classCallCheck(this, Overlay);
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(Overlay).apply(this, arguments));
+    return _possibleConstructorReturn(this, (Overlay.__proto__ || Object.getPrototypeOf(Overlay)).apply(this, arguments));
   }
 
   _createClass(Overlay, [{
diff --git a/lib/progress_bar/ProgressBar.js b/lib/progress_bar/ProgressBar.js
index c1a36201a..f8a16e85e 100644
--- a/lib/progress_bar/ProgressBar.js
+++ b/lib/progress_bar/ProgressBar.js
@@ -39,7 +39,7 @@ var ProgressBar = function (_Component) {
   function ProgressBar() {
     _classCallCheck(this, ProgressBar);
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(ProgressBar).apply(this, arguments));
+    return _possibleConstructorReturn(this, (ProgressBar.__proto__ || Object.getPrototypeOf(ProgressBar)).apply(this, arguments));
   }
 
   _createClass(ProgressBar, [{
diff --git a/lib/radio/RadioButton.js b/lib/radio/RadioButton.js
index 7fe8abe0b..71ee095a7 100644
--- a/lib/radio/RadioButton.js
+++ b/lib/radio/RadioButton.js
@@ -44,7 +44,7 @@ var factory = function factory(Radio) {
     _inherits(RadioButton, _Component);
 
     function RadioButton() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -54,7 +54,7 @@ var factory = function factory(Radio) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(RadioButton)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RadioButton.__proto__ || Object.getPrototypeOf(RadioButton)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
         var _this$props = _this.props;
         var checked = _this$props.checked;
         var disabled = _this$props.disabled;
diff --git a/lib/radio/RadioGroup.js b/lib/radio/RadioGroup.js
index e85ce1dd9..a69b9fe36 100644
--- a/lib/radio/RadioGroup.js
+++ b/lib/radio/RadioGroup.js
@@ -34,7 +34,7 @@ var factory = function factory(RadioButton) {
     _inherits(RadioGroup, _Component);
 
     function RadioGroup() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -44,7 +44,7 @@ var factory = function factory(RadioButton) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(RadioGroup)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleChange = function (value) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RadioGroup.__proto__ || Object.getPrototypeOf(RadioGroup)).call.apply(_ref, [this].concat(args))), _this), _this.handleChange = function (value) {
         if (_this.props.onChange) _this.props.onChange(value);
       }, _temp), _possibleConstructorReturn(_this, _ret);
     }
diff --git a/lib/ripple/Ripple.js b/lib/ripple/Ripple.js
index 4400c42f4..cf2c19494 100644
--- a/lib/ripple/Ripple.js
+++ b/lib/ripple/Ripple.js
@@ -22,9 +22,9 @@ var _classnames2 = require('classnames');
 
 var _classnames3 = _interopRequireDefault(_classnames2);
 
-var _reactAddonsUpdate = require('react-addons-update');
+var _immutabilityHelper = require('immutability-helper');
 
-var _reactAddonsUpdate2 = _interopRequireDefault(_reactAddonsUpdate);
+var _immutabilityHelper2 = _interopRequireDefault(_immutabilityHelper);
 
 var _reactCssThemr = require('react-css-themr');
 
@@ -38,6 +38,10 @@ var _prefixer = require('../utils/prefixer');
 
 var _prefixer2 = _interopRequireDefault(_prefixer);
 
+var _utils = require('../utils/utils');
+
+var _utils2 = _interopRequireDefault(_utils);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -76,7 +80,7 @@ var rippleFactory = function rippleFactory() {
       _inherits(RippledComponent, _Component);
 
       function RippledComponent() {
-        var _Object$getPrototypeO;
+        var _ref;
 
         var _temp, _this, _ret;
 
@@ -86,7 +90,7 @@ var rippleFactory = function rippleFactory() {
           args[_key] = arguments[_key];
         }
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(RippledComponent)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RippledComponent.__proto__ || Object.getPrototypeOf(RippledComponent)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
           ripples: {}
         }, _this.handleMouseDown = function (event) {
           if (_this.props.onMouseDown) _this.props.onMouseDown(event);
@@ -146,10 +150,7 @@ var rippleFactory = function rippleFactory() {
             if (e.propertyName === 'opacity') {
               if (self.props.onRippleEnded) self.props.onRippleEnded(e);
               _events2.default.removeEventListenerOnTransitionEnded(self.refs[rippleKey], onOpacityEnd);
-              self.setState({ ripples: (0, _reactAddonsUpdate2.default)(self.state.ripples, _defineProperty({}, rippleKey, { $apply: function $apply(ripplesState) {
-                    delete ripplesState[rippleKey];
-                    return ripplesState;
-                  } })) });
+              self.setState({ ripples: _utils2.default.removeObjectKey(rippleKey, self.state.ripples) });
             }
           });
         }
@@ -184,9 +185,9 @@ var rippleFactory = function rippleFactory() {
               var endRipple = _this3.addRippleDeactivateEventListener(isTouch, key);
               var initialState = { active: false, restarting: true, top: top, left: left, width: width, endRipple: endRipple };
               var runningState = { active: true, restarting: false };
-              _this3.setState((0, _reactAddonsUpdate2.default)(_this3.state, { ripples: _defineProperty({}, key, { $set: initialState }) }), function () {
+              _this3.setState((0, _immutabilityHelper2.default)(_this3.state, { ripples: _defineProperty({}, key, { $set: initialState }) }), function () {
                 _this3.refs[key].offsetWidth; //eslint-disable-line no-unused-expressions
-                _this3.setState((0, _reactAddonsUpdate2.default)(_this3.state, { ripples: _defineProperty({}, key, { $merge: runningState }) }));
+                _this3.setState((0, _immutabilityHelper2.default)(_this3.state, { ripples: _defineProperty({}, key, { $merge: runningState }) }));
               });
             })();
           }
@@ -249,7 +250,7 @@ var rippleFactory = function rippleFactory() {
         key: 'getNextKey',
         value: function getNextKey() {
           this.currentCount = this.currentCount ? this.currentCount + 1 : 1;
-          return this.currentCount.toString();
+          return 'ripple' + this.currentCount;
         }
 
         /**
@@ -262,7 +263,7 @@ var rippleFactory = function rippleFactory() {
       }, {
         key: 'getLastKey',
         value: function getLastKey() {
-          return this.currentCount.toString();
+          return 'ripple' + this.currentCount;
         }
 
         /**
@@ -300,19 +301,19 @@ var rippleFactory = function rippleFactory() {
           var self = this;
           return function endRipple() {
             document.removeEventListener(eventType, endRipple);
-            self.setState({ ripples: (0, _reactAddonsUpdate2.default)(self.state.ripples, _defineProperty({}, rippleKey, { $merge: { active: false } })) });
+            self.setState({ ripples: (0, _immutabilityHelper2.default)(self.state.ripples, _defineProperty({}, rippleKey, { $merge: { active: false } })) });
           };
         }
       }, {
         key: 'renderRipple',
-        value: function renderRipple(key, className, _ref) {
+        value: function renderRipple(key, className, _ref2) {
           var _classnames;
 
-          var active = _ref.active;
-          var left = _ref.left;
-          var restarting = _ref.restarting;
-          var top = _ref.top;
-          var width = _ref.width;
+          var active = _ref2.active;
+          var left = _ref2.left;
+          var restarting = _ref2.restarting;
+          var top = _ref2.top;
+          var width = _ref2.width;
 
           var scale = restarting ? 0 : 1;
           var transform = 'translate3d(' + (-width / 2 + left) + 'px, ' + (-width / 2 + top) + 'px, 0) scale(' + scale + ')';
diff --git a/lib/slider/Slider.js b/lib/slider/Slider.js
index c838283e5..10ac52441 100644
--- a/lib/slider/Slider.js
+++ b/lib/slider/Slider.js
@@ -58,7 +58,7 @@ var factory = function factory(ProgressBar, Input) {
     _inherits(Slider, _Component);
 
     function Slider() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -68,7 +68,7 @@ var factory = function factory(ProgressBar, Input) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Slider)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Slider.__proto__ || Object.getPrototypeOf(Slider)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         inputFocused: false,
         inputValue: null,
         sliderLength: 0,
diff --git a/lib/snackbar/Snackbar.js b/lib/snackbar/Snackbar.js
index bbb90867a..b4ae2f999 100644
--- a/lib/snackbar/Snackbar.js
+++ b/lib/snackbar/Snackbar.js
@@ -52,7 +52,7 @@ var factory = function factory(Overlay, Button) {
     function Snackbar() {
       _classCallCheck(this, Snackbar);
 
-      return _possibleConstructorReturn(this, Object.getPrototypeOf(Snackbar).apply(this, arguments));
+      return _possibleConstructorReturn(this, (Snackbar.__proto__ || Object.getPrototypeOf(Snackbar)).apply(this, arguments));
     }
 
     _createClass(Snackbar, [{
diff --git a/lib/switch/Switch.js b/lib/switch/Switch.js
index 96ad9977a..b723eccbd 100644
--- a/lib/switch/Switch.js
+++ b/lib/switch/Switch.js
@@ -44,7 +44,7 @@ var factory = function factory(Thumb) {
     _inherits(Switch, _Component);
 
     function Switch() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -54,7 +54,7 @@ var factory = function factory(Thumb) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Switch)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleToggle = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Switch.__proto__ || Object.getPrototypeOf(Switch)).call.apply(_ref, [this].concat(args))), _this), _this.handleToggle = function (event) {
         if (event.pageX !== 0 && event.pageY !== 0) _this.blur();
         if (!_this.props.disabled && _this.props.onChange) {
           _this.props.onChange(!_this.props.checked, event);
diff --git a/lib/table/Table.js b/lib/table/Table.js
index addc42c95..19c436242 100644
--- a/lib/table/Table.js
+++ b/lib/table/Table.js
@@ -33,6 +33,8 @@ var _TableRow2 = _interopRequireDefault(_TableRow);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
@@ -44,7 +46,7 @@ var factory = function factory(TableHead, TableRow) {
     _inherits(Table, _Component);
 
     function Table() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -54,7 +56,7 @@ var factory = function factory(TableHead, TableRow) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Table)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleFullSelect = function () {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Table.__proto__ || Object.getPrototypeOf(Table)).call.apply(_ref, [this].concat(args))), _this), _this.handleFullSelect = function () {
         if (_this.props.onSelect) {
           var _this$props = _this.props;
           var source = _this$props.source;
@@ -67,11 +69,11 @@ var factory = function factory(TableHead, TableRow) {
         }
       }, _this.handleRowSelect = function (index) {
         if (_this.props.onSelect) {
-          var newSelection = [];
+          var newSelection = [].concat(_toConsumableArray(_this.props.selected));
           if (_this.props.multiSelectable) {
             (function () {
               var position = _this.props.selected.indexOf(index);
-              newSelection = _this.props.selected.indexOf(index) !== -1 ? _this.props.selected.filter(function (el, idx) {
+              newSelection = position !== -1 ? newSelection.filter(function (el, idx) {
                 return idx !== position;
               }) : newSelection.concat([index]);
             })();
diff --git a/lib/table/TableRow.js b/lib/table/TableRow.js
index ae0a25ccc..b6405e136 100644
--- a/lib/table/TableRow.js
+++ b/lib/table/TableRow.js
@@ -33,7 +33,7 @@ var factory = function factory(Checkbox) {
     _inherits(TableRow, _Component);
 
     function TableRow() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -43,7 +43,7 @@ var factory = function factory(Checkbox) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TableRow)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleInputChange = function (index, key, type, event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TableRow.__proto__ || Object.getPrototypeOf(TableRow)).call.apply(_ref, [this].concat(args))), _this), _this.handleInputChange = function (index, key, type, event) {
         var value = type === 'checkbox' ? event.target.checked : event.target.value;
         var onChange = _this.props.model[key].onChange || _this.props.onChange;
         onChange(index, key, value);
diff --git a/lib/tabs/Tab.js b/lib/tabs/Tab.js
index 7035a5b53..60240cdac 100644
--- a/lib/tabs/Tab.js
+++ b/lib/tabs/Tab.js
@@ -37,7 +37,7 @@ var Tab = function (_Component) {
   _inherits(Tab, _Component);
 
   function Tab() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -47,7 +47,7 @@ var Tab = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Tab)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function (event) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Tab.__proto__ || Object.getPrototypeOf(Tab)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
       if (!_this.props.disabled && _this.props.onClick) {
         _this.props.onClick(event);
       }
diff --git a/lib/tabs/TabContent.js b/lib/tabs/TabContent.js
index 96f3538be..65bd7a6a6 100644
--- a/lib/tabs/TabContent.js
+++ b/lib/tabs/TabContent.js
@@ -35,7 +35,7 @@ var TabContent = function (_Component) {
   function TabContent() {
     _classCallCheck(this, TabContent);
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(TabContent).apply(this, arguments));
+    return _possibleConstructorReturn(this, (TabContent.__proto__ || Object.getPrototypeOf(TabContent)).apply(this, arguments));
   }
 
   _createClass(TabContent, [{
diff --git a/lib/tabs/Tabs.js b/lib/tabs/Tabs.js
index 1dc68473e..34eda37db 100644
--- a/lib/tabs/Tabs.js
+++ b/lib/tabs/Tabs.js
@@ -11,9 +11,9 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _classnames = require('classnames');
+var _classnames2 = require('classnames');
 
-var _classnames2 = _interopRequireDefault(_classnames);
+var _classnames3 = _interopRequireDefault(_classnames2);
 
 var _reactCssThemr = require('react-css-themr');
 
@@ -29,6 +29,8 @@ var _TabContent2 = _interopRequireDefault(_TabContent);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
@@ -40,7 +42,7 @@ var factory = function factory(Tab, TabContent) {
     _inherits(Tabs, _Component);
 
     function Tabs() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -50,11 +52,22 @@ var factory = function factory(Tab, TabContent) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Tabs)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Tabs.__proto__ || Object.getPrototypeOf(Tabs)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         pointer: {}
       }, _this.handleHeaderClick = function (event) {
         var idx = parseInt(event.currentTarget.id);
         if (_this.props.onChange) _this.props.onChange(idx);
+      }, _this.handleResize = function () {
+        if (!_this.props.fixed) {
+          return;
+        }
+
+        if (_this.resizeTimeout) {
+          clearTimeout(_this.resizeTimeout);
+        }
+        _this.resizeTimeout = setTimeout(_this.handleResizeEnd, 50);
+      }, _this.handleResizeEnd = function () {
+        _this.updatePointer(_this.props.index);
       }, _temp), _possibleConstructorReturn(_this, _ret);
     }
 
@@ -62,6 +75,8 @@ var factory = function factory(Tab, TabContent) {
       key: 'componentDidMount',
       value: function componentDidMount() {
         !this.props.disableAnimatedBottomBorder && this.updatePointer(this.props.index);
+        window.addEventListener('resize', this.handleResize);
+        this.handleResize();
       }
     }, {
       key: 'componentWillReceiveProps',
@@ -71,6 +86,8 @@ var factory = function factory(Tab, TabContent) {
     }, {
       key: 'componentWillUnmount',
       value: function componentWillUnmount() {
+        window.removeEventListener('resize', this.handleResize);
+        clearTimeout(this.resizeTimeout);
         clearTimeout(this.pointerTimeout);
       }
     }, {
@@ -121,8 +138,12 @@ var factory = function factory(Tab, TabContent) {
           return _react2.default.cloneElement(item, {
             id: idx,
             key: idx,
+            theme: _this4.props.theme,
             active: _this4.props.index === idx,
-            onClick: _this4.handleHeaderClick
+            onClick: function onClick(event) {
+              _this4.handleHeaderClick(event);
+              item.props.onClick && item.props.onClick(event);
+            }
           });
         });
       }
@@ -138,6 +159,7 @@ var factory = function factory(Tab, TabContent) {
         if (contents && contents[activeIdx]) {
           return _react2.default.cloneElement(contents[activeIdx], {
             key: activeIdx,
+            theme: this.props.theme,
             active: true,
             tabIndex: activeIdx
           });
@@ -146,18 +168,23 @@ var factory = function factory(Tab, TabContent) {
     }, {
       key: 'render',
       value: function render() {
+        var _classnames;
+
         var _props = this.props;
         var className = _props.className;
         var theme = _props.theme;
+        var fixed = _props.fixed;
+        var inverse = _props.inverse;
 
         var _parseChildren = this.parseChildren();
 
         var headers = _parseChildren.headers;
         var contents = _parseChildren.contents;
 
+        var classes = (0, _classnames3.default)(theme.tabs, className, (_classnames = {}, _defineProperty(_classnames, theme.fixed, fixed), _defineProperty(_classnames, theme.inverse, inverse), _classnames));
         return _react2.default.createElement(
           'div',
-          { ref: 'tabs', 'data-react-toolbox': 'tabs', className: (0, _classnames2.default)(theme.tabs, className) },
+          { ref: 'tabs', 'data-react-toolbox': 'tabs', className: classes },
           _react2.default.createElement(
             'nav',
             { className: theme.navigation, ref: 'navigation' },
@@ -176,16 +203,22 @@ var factory = function factory(Tab, TabContent) {
     children: _react.PropTypes.node,
     className: _react.PropTypes.string,
     disableAnimatedBottomBorder: _react.PropTypes.bool,
+    fixed: _react.PropTypes.bool,
     index: _react.PropTypes.number,
+    inverse: _react.PropTypes.bool,
     onChange: _react.PropTypes.func,
     theme: _react.PropTypes.shape({
+      fixed: _react.PropTypes.string,
+      inverse: _react.PropTypes.string,
       navigation: _react.PropTypes.string,
       pointer: _react.PropTypes.string,
       tabs: _react.PropTypes.string
     })
   };
   Tabs.defaultProps = {
-    index: 0
+    index: 0,
+    fixed: false,
+    inverse: false
   };
 
 
diff --git a/lib/tabs/__tests__/index.spec.js b/lib/tabs/__tests__/index.spec.js
index 9f6ffa9cf..4995f871b 100644
--- a/lib/tabs/__tests__/index.spec.js
+++ b/lib/tabs/__tests__/index.spec.js
@@ -18,6 +18,10 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
+var _reactDom = require('react-dom');
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
 var _Tabs = require('../Tabs');
 
 var _Tabs2 = _interopRequireDefault(_Tabs);
@@ -30,6 +34,10 @@ var _TabContent = require('../TabContent');
 
 var _TabContent2 = _interopRequireDefault(_TabContent);
 
+var _theme = require('../theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -38,6 +46,11 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
+var getRenderedClassName = function getRenderedClassName(tree, TargetComponent) {
+  var rendered = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, TargetComponent);
+  return _reactDom2.default.findDOMNode(rendered).getAttribute('class');
+};
+
 describe('Tabs', function () {
   var tabContents = void 0,
       composition = void 0;
@@ -49,7 +62,7 @@ describe('Tabs', function () {
       function Composition() {
         _classCallCheck(this, Composition);
 
-        var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Composition).call(this));
+        var _this = _possibleConstructorReturn(this, (Composition.__proto__ || Object.getPrototypeOf(Composition)).call(this));
 
         _this.state = { index: 0 };
         return _this;
@@ -97,4 +110,30 @@ describe('Tabs', function () {
     (0, _expect2.default)(tabContents.length).toEqual(1);
     (0, _expect2.default)(tabContents[0].props.tabIndex).toEqual(1);
   });
+
+  describe('#render', function () {
+    it('does not use fixed by default', function () {
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Tabs2.default, { theme: _theme2.default }));
+      var className = getRenderedClassName(tree, _Tabs.Tabs);
+      (0, _expect2.default)(className).toNotContain(_theme2.default.fixed);
+    });
+
+    it('uses fixed when set', function () {
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Tabs2.default, { theme: _theme2.default, fixed: true }));
+      var className = getRenderedClassName(tree, _Tabs.Tabs);
+      (0, _expect2.default)(className).toContain(_theme2.default.fixed);
+    });
+
+    it('does not use inverse by default', function () {
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Tabs2.default, { theme: _theme2.default }));
+      var className = getRenderedClassName(tree, _Tabs.Tabs);
+      (0, _expect2.default)(className).toNotContain(_theme2.default.inverse);
+    });
+
+    it('uses inverse when set', function () {
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Tabs2.default, { theme: _theme2.default, inverse: true }));
+      var className = getRenderedClassName(tree, _Tabs.Tabs);
+      (0, _expect2.default)(className).toContain(_theme2.default.inverse);
+    });
+  });
 });
\ No newline at end of file
diff --git a/lib/tabs/_config.scss b/lib/tabs/_config.scss
index f67e55875..4a03d6419 100644
--- a/lib/tabs/_config.scss
+++ b/lib/tabs/_config.scss
@@ -9,3 +9,10 @@ $tab-pointer-height: .2 * $unit !default;
 $tab-text: $color-black !default;
 $tab-text-color: $tab-text !default;
 $tab-text-inactive-color: rgba($tab-text, .7) !default;
+
+// Inverse
+$tab-inverse-bar-color: $color-primary !default;
+$tab-inverse-pointer-color: $color-accent !default;
+$tab-inverse-text: $color-primary-contrast !default;
+$tab-inverse-text-color: $tab-inverse-text !default;
+$tab-inverse-text-inactive-color: rgba($tab-inverse-text, .7) !default;
diff --git a/lib/tabs/theme.scss b/lib/tabs/theme.scss
index f2e77760e..9d9fda29d 100644
--- a/lib/tabs/theme.scss
+++ b/lib/tabs/theme.scss
@@ -61,3 +61,27 @@
     display: block;
   }
 }
+
+.fixed {
+  .label {
+    flex: 1;
+    text-align: center;
+  }
+}
+
+.inverse {
+  .navigation {
+    background-color: $tab-inverse-bar-color;
+  }
+
+  .label {
+    color: $tab-inverse-text-inactive-color;
+    &.active {
+      color: $tab-inverse-text-color;
+    }
+  }
+
+  .pointer {
+    background-color: $tab-inverse-pointer-color;
+  }
+}
diff --git a/lib/time_picker/Clock.js b/lib/time_picker/Clock.js
index 2b74f0a1c..aaa55accb 100644
--- a/lib/time_picker/Clock.js
+++ b/lib/time_picker/Clock.js
@@ -40,7 +40,7 @@ var Clock = function (_Component) {
   _inherits(Clock, _Component);
 
   function Clock() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -50,7 +50,7 @@ var Clock = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Clock)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Clock.__proto__ || Object.getPrototypeOf(Clock)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
       center: { x: null, y: null },
       radius: 0
     }, _this.handleHourChange = function (hours) {
diff --git a/lib/time_picker/ClockFace.js b/lib/time_picker/ClockFace.js
index 54ca26407..b2604a0c2 100644
--- a/lib/time_picker/ClockFace.js
+++ b/lib/time_picker/ClockFace.js
@@ -28,7 +28,7 @@ var Face = function (_Component) {
   _inherits(Face, _Component);
 
   function Face() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -38,7 +38,7 @@ var Face = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Face)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.renderNumber = function (number, idx) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Face.__proto__ || Object.getPrototypeOf(Face)).call.apply(_ref, [this].concat(args))), _this), _this.renderNumber = function (number, idx) {
       var _this$props = _this.props;
       var active = _this$props.active;
       var radius = _this$props.radius;
diff --git a/lib/time_picker/ClockHand.js b/lib/time_picker/ClockHand.js
index 053b19e07..d16bdaeab 100644
--- a/lib/time_picker/ClockHand.js
+++ b/lib/time_picker/ClockHand.js
@@ -34,7 +34,7 @@ var Hand = function (_Component) {
   _inherits(Hand, _Component);
 
   function Hand() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -44,7 +44,7 @@ var Hand = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Hand)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Hand.__proto__ || Object.getPrototypeOf(Hand)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
       knobWidth: 0
     }, _this.handleMouseMove = function (event) {
       _this.move(_events2.default.getMousePosition(event));
diff --git a/lib/time_picker/ClockHours.js b/lib/time_picker/ClockHours.js
index 85a711ab1..3b4ee10fd 100644
--- a/lib/time_picker/ClockHours.js
+++ b/lib/time_picker/ClockHours.js
@@ -41,7 +41,7 @@ var Hours = function (_Component) {
   _inherits(Hours, _Component);
 
   function Hours() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -51,7 +51,7 @@ var Hours = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Hours)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Hours.__proto__ || Object.getPrototypeOf(Hours)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
       inner: _this.props.format === '24hr' && _this.props.selected > 0 && _this.props.selected <= 12
     }, _this.handleHandMove = function (degrees, radius) {
       var currentInner = radius < _this.props.radius - _this.props.spacing * innerSpacing;
diff --git a/lib/time_picker/ClockMinutes.js b/lib/time_picker/ClockMinutes.js
index 780a90ba4..0b21e74a5 100644
--- a/lib/time_picker/ClockMinutes.js
+++ b/lib/time_picker/ClockMinutes.js
@@ -37,7 +37,7 @@ var Minutes = function (_Component) {
   _inherits(Minutes, _Component);
 
   function Minutes() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -47,7 +47,7 @@ var Minutes = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Minutes)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleHandMove = function (degrees) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Minutes.__proto__ || Object.getPrototypeOf(Minutes)).call.apply(_ref, [this].concat(args))), _this), _this.handleHandMove = function (degrees) {
       _this.props.onChange(degrees / step);
     }, _this.handleMouseDown = function (event) {
       _this.refs.hand.mouseStart(event);
diff --git a/lib/time_picker/TimePicker.js b/lib/time_picker/TimePicker.js
index d4dc2e755..2e0a06ae3 100644
--- a/lib/time_picker/TimePicker.js
+++ b/lib/time_picker/TimePicker.js
@@ -58,7 +58,7 @@ var factory = function factory(TimePickerDialog, Input) {
     _inherits(TimePicker, _Component);
 
     function TimePicker() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -68,7 +68,7 @@ var factory = function factory(TimePickerDialog, Input) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TimePicker)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TimePicker.__proto__ || Object.getPrototypeOf(TimePicker)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         active: _this.props.active
       }, _this.handleDismiss = function () {
         _this.setState({ active: false });
diff --git a/lib/time_picker/TimePickerDialog.js b/lib/time_picker/TimePickerDialog.js
index 92e55b2db..9d4dcefb9 100644
--- a/lib/time_picker/TimePickerDialog.js
+++ b/lib/time_picker/TimePickerDialog.js
@@ -35,7 +35,7 @@ var factory = function factory(Dialog) {
     _inherits(TimePickerDialog, _Component);
 
     function TimePickerDialog() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -45,7 +45,7 @@ var factory = function factory(Dialog) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TimePickerDialog)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TimePickerDialog.__proto__ || Object.getPrototypeOf(TimePickerDialog)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         display: 'hours',
         displayTime: _this.props.value
       }, _this.handleClockChange = function (value) {
diff --git a/lib/tooltip/Tooltip.js b/lib/tooltip/Tooltip.js
index b77620ef5..a57b41d73 100644
--- a/lib/tooltip/Tooltip.js
+++ b/lib/tooltip/Tooltip.js
@@ -78,7 +78,7 @@ var tooltipFactory = function tooltipFactory() {
       _inherits(TooltippedComponent, _Component);
 
       function TooltippedComponent() {
-        var _Object$getPrototypeO;
+        var _ref;
 
         var _temp, _this, _ret;
 
@@ -88,7 +88,7 @@ var tooltipFactory = function tooltipFactory() {
           args[_key] = arguments[_key];
         }
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TooltippedComponent)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TooltippedComponent.__proto__ || Object.getPrototypeOf(TooltippedComponent)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
           active: false,
           position: _this.props.tooltipPosition,
           visible: false
@@ -118,12 +118,12 @@ var tooltipFactory = function tooltipFactory() {
         }
       }, {
         key: 'activate',
-        value: function activate(_ref) {
+        value: function activate(_ref2) {
           var _this2 = this;
 
-          var top = _ref.top;
-          var left = _ref.left;
-          var position = _ref.position;
+          var top = _ref2.top;
+          var left = _ref2.left;
+          var position = _ref2.position;
 
           if (this.timeout) clearTimeout(this.timeout);
           this.setState({ visible: true, position: position });
diff --git a/lib/utils/utils.js b/lib/utils/utils.js
index e31db2442..e95ea63c1 100644
--- a/lib/utils/utils.js
+++ b/lib/utils/utils.js
@@ -60,5 +60,14 @@ exports.default = {
       return value ? 'on' : '';
     }
     return value;
+  },
+  removeObjectKey: function removeObjectKey(key, object) {
+    var newObject = {};
+    Object.keys(object).filter(function (k) {
+      return k !== key;
+    }).forEach(function (k) {
+      newObject[k] = object[k];
+    });
+    return newObject;
   }
 };
\ No newline at end of file

From 6a488b3e210c755a323d165565bd0c4ef4da7366 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 3 Sep 2016 11:48:05 +0200
Subject: [PATCH 0785/1024] Better tabs with icons

---
 components/tabs/Tab.js       | 20 +++++---------------
 components/tabs/_config.scss |  2 ++
 components/tabs/theme.scss   | 18 ++++++++++++++++++
 3 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/components/tabs/Tab.js b/components/tabs/Tab.js
index e5138f6df..13e9f0de5 100644
--- a/components/tabs/Tab.js
+++ b/components/tabs/Tab.js
@@ -42,34 +42,24 @@ class Tab extends Component {
     }
   };
 
-  renderIcon = () => {
-    if (!this.props.icon) {
-      return null;
-    } else {
-      return (
-        <div>
-          <FontIcon value={this.props.icon}/>
-        </div>
-      );
-    }
-  };
-
   render () {
     const {
       onActive, // eslint-disable-line
-      active, activeClassName, className, disabled, hidden, theme, ...other
+      active, activeClassName, className, disabled, hidden, label, icon, theme, ...other
     } = this.props;
     const _className = classnames(theme.label, {
       [theme.active]: active,
       [theme.hidden]: hidden,
+      [theme.withText]: label,
+      [theme.withIcon]: icon,
       [theme.disabled]: disabled,
       [activeClassName]: active
     }, className);
 
     return (
       <label {...other} data-react-toolbox='tab' className={_className} onClick={this.handleClick}>
-        {this.renderIcon()}
-        {this.props.label}
+        {icon && <FontIcon className={theme.icon} value={icon}/>}
+        {label}
       </label>
     );
   }
diff --git a/components/tabs/_config.scss b/components/tabs/_config.scss
index 4a03d6419..e5ee9c8e0 100644
--- a/components/tabs/_config.scss
+++ b/components/tabs/_config.scss
@@ -1,6 +1,8 @@
 $tab-label-disabled-opacity: .2 !default;
 $tab-label-h-padding: 1.2 * $unit !default;
 $tab-label-height: 4.8 * $unit !default;
+$tab-icon-height: 2.4 * $unit !default;
+$tab-icon-margin-bottom: .8 * $unit !default;
 $tab-text-height: 1.4 * $unit !default;
 $tab-label-v-padding: ($tab-label-height - $tab-text-height) / 2 !default;
 $tab-navigation-border-color: $color-divider !default;
diff --git a/components/tabs/theme.scss b/components/tabs/theme.scss
index ae687cff0..d5f25367e 100644
--- a/components/tabs/theme.scss
+++ b/components/tabs/theme.scss
@@ -38,6 +38,24 @@
   &.hidden {
     display: none;
   }
+
+  &.withIcon {
+    padding-top: ($tab-label-v-padding - $tab-icon-margin-bottom / 2);
+    padding-bottom: ($tab-label-v-padding - $tab-icon-margin-bottom / 2);
+  }
+
+  &.withText {
+    .icon {
+      margin-bottom: $tab-icon-margin-bottom;
+    }
+  }
+}
+
+.icon {
+  display: block;
+  height: $tab-icon-height;
+  margin: 0 auto;
+  line-height: $tab-icon-height;
 }
 
 .pointer {

From fcea0e437f9f59ed09718680940479367e945fbb Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 3 Sep 2016 12:23:22 +0200
Subject: [PATCH 0786/1024] DI change in AppBar

---
 components/app_bar/AppBar.js | 111 ++++++++++++++++++-----------------
 components/app_bar/index.js  |   4 +-
 spec/components/button.js    |   8 +--
 3 files changed, 65 insertions(+), 58 deletions(-)

diff --git a/components/app_bar/AppBar.js b/components/app_bar/AppBar.js
index bd2b27b10..de74eac42 100644
--- a/components/app_bar/AppBar.js
+++ b/components/app_bar/AppBar.js
@@ -2,64 +2,69 @@ import React, { PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
 import { APP_BAR } from '../identifiers.js';
-import FontIcon from '../font_icon/FontIcon.js';
+import InjectedFontIcon from '../font_icon/FontIcon.js';
 
-const AppBar = ({ theme, title, ...props }) => {
-  const className = classnames(theme.appBar, {
-    [theme.fixed]: props.fixed,
-    [theme.flat]: props.flat
-  }, props.className);
-  const { leftIcon, onLeftIconClick, rightIcon, onRightIconClick } = props;
+const factory = (FontIcon) => {
+  const AppBar = ({ children, leftIcon, onLeftIconClick, onRightIconClick, rightIcon, theme, title, ...props }) => {
+    const className = classnames(theme.appBar, {
+      [theme.fixed]: props.fixed,
+      [theme.flat]: props.flat
+    }, props.className);
 
-  return (
-    <header className={className} data-react-toolbox='app-bar'>
-      {leftIcon ? <FontIcon
-        className={classnames(theme.leftIcon)}
-        value={leftIcon}
-        onClick={onLeftIconClick}/> : null
-      }
-      {title ? <h1 className={classnames(theme.title)}>{title}</h1> : null}
-      {props.children}
-      {rightIcon ? <FontIcon
-        className={classnames(theme.rightIcon)}
-        value={rightIcon}
-        onClick={onRightIconClick}/> : null
-      }
-    </header>
-  );
-};
+    return (
+      <header className={className} data-react-toolbox='app-bar'>
+        {leftIcon && <FontIcon
+          className={classnames(theme.leftIcon)}
+          onClick={onLeftIconClick}
+          value={leftIcon} />
+        }
+        {title && <h1 className={classnames(theme.title)}>{title}</h1>}
+        {children}
+        {rightIcon && <FontIcon
+          className={classnames(theme.rightIcon)}
+          onClick={onRightIconClick}
+          value={rightIcon} />
+        }
+      </header>
+    );
+  };
 
-AppBar.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  fixed: PropTypes.bool,
-  flat: PropTypes.bool,
-  leftIcon: PropTypes.oneOfType(
-    PropTypes.string,
-    PropTypes.element
-  ),
-  onLeftIconClick: PropTypes.func,
-  onRightIconClick: PropTypes.func,
-  rightIcon: PropTypes.oneOfType(
-    PropTypes.string,
-    PropTypes.element
-  ),
-  theme: PropTypes.shape({
-    appBar: PropTypes.string,
-    leftIcon: PropTypes.string,
-    rightIcon: PropTypes.string,
-    fixed: PropTypes.string,
-    flat: PropTypes.string,
+  AppBar.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    fixed: PropTypes.bool,
+    flat: PropTypes.bool,
+    leftIcon: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.element
+    ]),
+    onLeftIconClick: PropTypes.func,
+    onRightIconClick: PropTypes.func,
+    rightIcon: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.element
+    ]),
+    theme: PropTypes.shape({
+      appBar: PropTypes.string,
+      fixed: PropTypes.string,
+      flat: PropTypes.string,
+      leftIcon: PropTypes.string,
+      rightIcon: PropTypes.string,
+      title: PropTypes.string
+    }),
     title: PropTypes.string
-  }),
-  title: PropTypes.string
-};
+  };
+
+  AppBar.defaultProps = {
+    className: '',
+    fixed: false,
+    flat: false
+  };
 
-AppBar.defaultProps = {
-  className: '',
-  fixed: false,
-  flat: false
+  return AppBar;
 };
 
-export default themr(APP_BAR)(AppBar);
+const AppBar = factory(InjectedFontIcon);
+export default themr(APP_BAR, null)(AppBar);
+export { factory as appBarFactory };
 export { AppBar };
diff --git a/components/app_bar/index.js b/components/app_bar/index.js
index 998ed5a7d..4f6f17f84 100644
--- a/components/app_bar/index.js
+++ b/components/app_bar/index.js
@@ -1,8 +1,10 @@
 import { themr } from 'react-css-themr';
-import { AppBar } from './AppBar.js';
 import { APP_BAR } from '../identifiers.js';
+import { appBarFactory } from './AppBar.js';
+import FontIcon from '../font_icon/FontIcon.js';
 import theme from './theme.scss';
 
+const AppBar = appBarFactory(FontIcon);
 const ThemedAppBar = themr(APP_BAR, theme)(AppBar);
 
 export default ThemedAppBar;
diff --git a/spec/components/button.js b/spec/components/button.js
index 1a841ee7b..f74691b35 100644
--- a/spec/components/button.js
+++ b/spec/components/button.js
@@ -29,12 +29,12 @@ const ButtonTest = () => (
       Icon Buttons should align in the vertical center, to see this we need to
       put them next to text or highlight thier background color.
     </p>
-    <IconButton icon='menu' style={{'background-color': 'red'}} inverse />
-    <span style={{'vertical-align': 'middle'}}>Menu</span>
+    <IconButton icon='menu' style={{backgroundColor: 'red'}} inverse />
+    <span style={{verticalAlign: 'middle'}}>Menu</span>
     <IconButton icon='menu' />
-    <span style={{'vertical-align': 'middle'}}>Menu</span>
+    <span style={{verticalAlign: 'middle'}}>Menu</span>
     <IconButton><GithubIcon /></IconButton>
-    <span style={{'vertical-align': 'middle'}}>Github</span>
+    <span style={{verticalAlign: 'middle'}}>Github</span>
   </section>
 );
 

From 6ddaf9a2169f8e07a71b4ddf00787dbe8423f96d Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 3 Sep 2016 12:35:49 +0200
Subject: [PATCH 0787/1024] Ajust pointer

---
 components/dropdown/theme.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/dropdown/theme.scss b/components/dropdown/theme.scss
index d29a6e672..537bfc344 100644
--- a/components/dropdown/theme.scss
+++ b/components/dropdown/theme.scss
@@ -37,7 +37,7 @@
 }
 
 .value {
-  > .input {
+  > input {
     cursor: pointer;
   }
   &:after {

From d86e4a59568f2a0f590c6a5c527594d72d2d5fcf Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 3 Sep 2016 14:25:12 +0200
Subject: [PATCH 0788/1024] Fix #755

---
 components/autocomplete/Autocomplete.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index 9f42f9471..388be95eb 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -118,10 +118,9 @@ const factory = (Chip, Input) => {
      if (event.which === 13) {
        let target = this.state.active;
        if (!target) {
-         target = [...this.suggestions().keys()][0];
-         if (!target && this.props.allowCreate) {
-           target = this.state.query;
-         }
+         target = this.props.allowCreate
+           ? this.state.query
+           : [...this.suggestions().keys()][0];
          this.setState({active: target});
        }
        this.select(event, target);

From c71f58028b4f0e923ba1ccd35960f7f92516fcc0 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 3 Sep 2016 16:02:04 +0200
Subject: [PATCH 0789/1024] Clone RadioButton children in RadioGroup

---
 components/radio/RadioGroup.js | 20 +++++++-------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/components/radio/RadioGroup.js b/components/radio/RadioGroup.js
index fa86ebcb1..7c6126391 100644
--- a/components/radio/RadioGroup.js
+++ b/components/radio/RadioGroup.js
@@ -24,19 +24,13 @@ const factory = (RadioButton) => {
     };
 
     renderRadioButtons () {
-      return React.Children.map(this.props.children, (radio, idx) => {
-        return (
-          <RadioButton
-            {...radio.props}
-            checked={radio.props.value === this.props.value}
-            disabled={this.props.disabled || radio.props.disabled}
-            key={idx}
-            label={radio.props.label}
-            onChange={this.handleChange.bind(this, radio.props.value)}
-            value={radio.props.value}
-          />
-        );
-      });
+      return React.Children.map(this.props.children, radio => (
+        React.cloneElement(radio, {
+          checked: radio.props.value === this.props.value,
+          disabled: this.props.disabled || radio.props.disabled,
+          onChange: this.handleChange.bind(this, radio.props.value)
+        })
+      ));
     }
 
     render () {

From cd72ffb440a966766daf868715a5765eb6852433 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 3 Sep 2016 16:03:04 +0200
Subject: [PATCH 0790/1024] Latest build

---
 lib/app_bar/AppBar.js               | 105 ++++++++++++++++++---------
 lib/app_bar/index.d.ts              |  32 +++++++++
 lib/app_bar/index.js                |   9 ++-
 lib/app_bar/theme.scss              |  21 ++++++
 lib/autocomplete/Autocomplete.js    |  25 +++----
 lib/button/Button.js                |   4 +-
 lib/button/IconButton.js            |   4 +-
 lib/checkbox/Checkbox.js            |   4 +-
 lib/date_picker/Calendar.js         |   4 +-
 lib/date_picker/CalendarDay.js      |   4 +-
 lib/date_picker/CalendarMonth.js    |   4 +-
 lib/date_picker/DatePicker.js       |   4 +-
 lib/date_picker/DatePickerDialog.js |   4 +-
 lib/dropdown/Dropdown.js            |   4 +-
 lib/dropdown/theme.scss             |   2 +-
 lib/form/Form.js                    |   4 +-
 lib/hoc/ActivableRenderer.js        |   4 +-
 lib/hoc/Portal.js                   |   2 +-
 lib/index.d.ts                      |   7 +-
 lib/input/Input.js                  |   4 +-
 lib/list/List.js                    |   2 +-
 lib/list/ListItem.js                |   4 +-
 lib/list/ListItemContent.js         |   2 +-
 lib/list/index.d.ts                 |   2 +-
 lib/menu/IconMenu.js                |   4 +-
 lib/menu/Menu.js                    |   4 +-
 lib/menu/MenuItem.js                |   4 +-
 lib/overlay/Overlay.js              |   2 +-
 lib/progress_bar/ProgressBar.js     |   2 +-
 lib/radio/RadioButton.js            |   4 +-
 lib/radio/RadioGroup.js             |  17 ++---
 lib/ripple/Ripple.js                |  16 ++---
 lib/slider/Slider.js                |   4 +-
 lib/snackbar/Snackbar.js            |   2 +-
 lib/switch/Switch.js                |   4 +-
 lib/table/Table.js                  |   4 +-
 lib/table/TableRow.js               |   4 +-
 lib/table/theme.scss                |   7 +-
 lib/tabs/Tab.js                     |  18 +++--
 lib/tabs/TabContent.js              |   2 +-
 lib/tabs/Tabs.js                    |  31 ++++----
 lib/tabs/__tests__/index.spec.js    | 107 +++++++++++++++++++---------
 lib/tabs/_config.scss               |   2 +
 lib/tabs/theme.scss                 |  19 +++++
 lib/time_picker/Clock.js            |   4 +-
 lib/time_picker/ClockFace.js        |   4 +-
 lib/time_picker/ClockHand.js        |   4 +-
 lib/time_picker/ClockHours.js       |   4 +-
 lib/time_picker/ClockMinutes.js     |   4 +-
 lib/time_picker/TimePicker.js       |   4 +-
 lib/time_picker/TimePickerDialog.js |   4 +-
 lib/tooltip/Tooltip.js              |  12 ++--
 52 files changed, 359 insertions(+), 199 deletions(-)

diff --git a/lib/app_bar/AppBar.js b/lib/app_bar/AppBar.js
index ebf43b0f7..9358457b2 100644
--- a/lib/app_bar/AppBar.js
+++ b/lib/app_bar/AppBar.js
@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.AppBar = undefined;
+exports.AppBar = exports.appBarFactory = undefined;
 
 var _react = require('react');
 
@@ -17,45 +17,82 @@ var _reactCssThemr = require('react-css-themr');
 
 var _identifiers = require('../identifiers.js');
 
+var _FontIcon = require('../font_icon/FontIcon.js');
+
+var _FontIcon2 = _interopRequireDefault(_FontIcon);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-var AppBar = function AppBar(_ref) {
-  var _classnames;
-
-  var theme = _ref.theme;
-
-  var props = _objectWithoutProperties(_ref, ['theme']);
-
-  var className = (0, _classnames3.default)(theme.appBar, (_classnames = {}, _defineProperty(_classnames, theme.fixed, props.fixed), _defineProperty(_classnames, theme.flat, props.flat), _classnames), props.className);
-
-  return _react2.default.createElement(
-    'header',
-    { className: className, 'data-react-toolbox': 'app-bar' },
-    props.children
-  );
-};
-
-AppBar.propTypes = {
-  children: _react.PropTypes.node,
-  className: _react.PropTypes.string,
-  fixed: _react.PropTypes.bool,
-  flat: _react.PropTypes.bool,
-  theme: _react.PropTypes.shape({
-    appBar: _react.PropTypes.string,
-    fixed: _react.PropTypes.string,
-    flat: _react.PropTypes.string
-  })
-};
-
-AppBar.defaultProps = {
-  className: '',
-  fixed: false,
-  flat: false
+var factory = function factory(FontIcon) {
+  var AppBar = function AppBar(_ref) {
+    var _classnames;
+
+    var children = _ref.children;
+    var leftIcon = _ref.leftIcon;
+    var onLeftIconClick = _ref.onLeftIconClick;
+    var onRightIconClick = _ref.onRightIconClick;
+    var rightIcon = _ref.rightIcon;
+    var theme = _ref.theme;
+    var title = _ref.title;
+
+    var props = _objectWithoutProperties(_ref, ['children', 'leftIcon', 'onLeftIconClick', 'onRightIconClick', 'rightIcon', 'theme', 'title']);
+
+    var className = (0, _classnames3.default)(theme.appBar, (_classnames = {}, _defineProperty(_classnames, theme.fixed, props.fixed), _defineProperty(_classnames, theme.flat, props.flat), _classnames), props.className);
+
+    return _react2.default.createElement(
+      'header',
+      { className: className, 'data-react-toolbox': 'app-bar' },
+      leftIcon && _react2.default.createElement(FontIcon, {
+        className: (0, _classnames3.default)(theme.leftIcon),
+        onClick: onLeftIconClick,
+        value: leftIcon }),
+      title && _react2.default.createElement(
+        'h1',
+        { className: (0, _classnames3.default)(theme.title) },
+        title
+      ),
+      children,
+      rightIcon && _react2.default.createElement(FontIcon, {
+        className: (0, _classnames3.default)(theme.rightIcon),
+        onClick: onRightIconClick,
+        value: rightIcon })
+    );
+  };
+
+  AppBar.propTypes = {
+    children: _react.PropTypes.node,
+    className: _react.PropTypes.string,
+    fixed: _react.PropTypes.bool,
+    flat: _react.PropTypes.bool,
+    leftIcon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    onLeftIconClick: _react.PropTypes.func,
+    onRightIconClick: _react.PropTypes.func,
+    rightIcon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    theme: _react.PropTypes.shape({
+      appBar: _react.PropTypes.string,
+      fixed: _react.PropTypes.string,
+      flat: _react.PropTypes.string,
+      leftIcon: _react.PropTypes.string,
+      rightIcon: _react.PropTypes.string,
+      title: _react.PropTypes.string
+    }),
+    title: _react.PropTypes.string
+  };
+
+  AppBar.defaultProps = {
+    className: '',
+    fixed: false,
+    flat: false
+  };
+
+  return AppBar;
 };
 
-exports.default = (0, _reactCssThemr.themr)(_identifiers.APP_BAR)(AppBar);
+var AppBar = factory(_FontIcon2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.APP_BAR, null)(AppBar);
+exports.appBarFactory = factory;
 exports.AppBar = AppBar;
\ No newline at end of file
diff --git a/lib/app_bar/index.d.ts b/lib/app_bar/index.d.ts
index fa3f99222..fb868bb1a 100644
--- a/lib/app_bar/index.d.ts
+++ b/lib/app_bar/index.d.ts
@@ -14,6 +14,18 @@ export interface AppBarTheme {
    * Added to the root element when the app bar is flat.
    */
   flat?: string;
+  /**
+   * Used as the app bar title.
+   */
+  title ?: string;
+  /**
+   * Added to the left icon app bar element.
+   */
+  leftIcon?: string;
+  /**
+   * Added to the right icon app bar element.
+   */
+  rightIcon?: string;
 }
 
 interface AppBarProps extends ReactToolbox.Props {
@@ -31,6 +43,26 @@ interface AppBarProps extends ReactToolbox.Props {
    * @default false
    */
   flat?: boolean;
+  /**
+   * If it exists it is used as the AppBar title
+   */
+  title?: string;
+  /**
+   * If it exists it is used as the AppBar left icon
+   */
+  leftIcon?: string;
+  /**
+   * Called when the left icon is clicked
+   */
+  onLeftIconClick?: Function;
+  /**
+   * If it exists it is used as the AppBar right icon
+   */
+  rightIcon?: string;
+  /**
+   * Called when the righticon is clicked
+   */
+  onRightIconClick?: Function;
   /**
    * Classnames object defining the component style.
    */
diff --git a/lib/app_bar/index.js b/lib/app_bar/index.js
index 8fa609cc6..a7f72b869 100644
--- a/lib/app_bar/index.js
+++ b/lib/app_bar/index.js
@@ -7,9 +7,13 @@ exports.AppBar = undefined;
 
 var _reactCssThemr = require('react-css-themr');
 
+var _identifiers = require('../identifiers.js');
+
 var _AppBar = require('./AppBar.js');
 
-var _identifiers = require('../identifiers.js');
+var _FontIcon = require('../font_icon/FontIcon.js');
+
+var _FontIcon2 = _interopRequireDefault(_FontIcon);
 
 var _theme = require('./theme.scss');
 
@@ -17,7 +21,8 @@ var _theme2 = _interopRequireDefault(_theme);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var ThemedAppBar = (0, _reactCssThemr.themr)(_identifiers.APP_BAR, _theme2.default)(_AppBar.AppBar);
+var AppBar = (0, _AppBar.appBarFactory)(_FontIcon2.default);
+var ThemedAppBar = (0, _reactCssThemr.themr)(_identifiers.APP_BAR, _theme2.default)(AppBar);
 
 exports.default = ThemedAppBar;
 exports.AppBar = ThemedAppBar;
\ No newline at end of file
diff --git a/lib/app_bar/theme.scss b/lib/app_bar/theme.scss
index 56147f646..f0d55d0c4 100644
--- a/lib/app_bar/theme.scss
+++ b/lib/app_bar/theme.scss
@@ -35,4 +35,25 @@
   a {
     color: $appbar-contrast;
   }
+
+  .title {
+    flex-grow: 1;
+    font-size: 1.8 * $unit;
+    font-weight: bold;
+    > small {
+      font-size: 1.8 * $unit;
+      font-weight: normal;
+    }
+  }
+
+  .leftIcon {
+    padding: 1.2 * $unit 1.2 * $unit 1.2 * $unit 0;
+    text-align: left;
+  }
+
+  .rightIcon {
+    padding: 1.2 * $unit 0 1.2 * $unit 1.2 * $unit;
+    margin-left: auto;
+    text-align: right;
+  }
 }
diff --git a/lib/autocomplete/Autocomplete.js b/lib/autocomplete/Autocomplete.js
index a03d125e0..22c958147 100644
--- a/lib/autocomplete/Autocomplete.js
+++ b/lib/autocomplete/Autocomplete.js
@@ -64,7 +64,7 @@ var factory = function factory(Chip, Input) {
     _inherits(Autocomplete, _Component);
 
     function Autocomplete() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -74,7 +74,7 @@ var factory = function factory(Chip, Input) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Autocomplete.__proto__ || Object.getPrototypeOf(Autocomplete)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Autocomplete)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
         direction: _this.props.direction,
         focus: false,
         showAllSuggestions: _this.props.showSuggestionsWhenValueIsSet,
@@ -103,10 +103,7 @@ var factory = function factory(Chip, Input) {
         if (event.which === 13) {
           var target = _this.state.active;
           if (!target) {
-            target = [].concat(_toConsumableArray(_this.suggestions().keys()))[0];
-            if (!target && _this.props.allowCreate) {
-              target = _this.state.query;
-            }
+            target = _this.props.allowCreate ? _this.state.query : [].concat(_toConsumableArray(_this.suggestions().keys()))[0];
             _this.setState({ active: target });
           }
           _this.select(event, target);
@@ -335,11 +332,11 @@ var factory = function factory(Chip, Input) {
         var _this2 = this;
 
         if (this.props.multiple) {
-          var selectedItems = [].concat(_toConsumableArray(this.values())).map(function (_ref2) {
-            var _ref3 = _slicedToArray(_ref2, 2);
+          var selectedItems = [].concat(_toConsumableArray(this.values())).map(function (_ref) {
+            var _ref2 = _slicedToArray(_ref, 2);
 
-            var key = _ref3[0];
-            var value = _ref3[1];
+            var key = _ref2[0];
+            var value = _ref2[1];
 
             return _react2.default.createElement(
               Chip,
@@ -367,11 +364,11 @@ var factory = function factory(Chip, Input) {
 
         var theme = this.props.theme;
 
-        var suggestions = [].concat(_toConsumableArray(this.suggestions())).map(function (_ref4) {
-          var _ref5 = _slicedToArray(_ref4, 2);
+        var suggestions = [].concat(_toConsumableArray(this.suggestions())).map(function (_ref3) {
+          var _ref4 = _slicedToArray(_ref3, 2);
 
-          var key = _ref5[0];
-          var value = _ref5[1];
+          var key = _ref4[0];
+          var value = _ref4[1];
 
           var className = (0, _classnames5.default)(theme.suggestion, _defineProperty({}, theme.active, _this3.state.active === key));
           return _react2.default.createElement(
diff --git a/lib/button/Button.js b/lib/button/Button.js
index b38aeb3b7..2b9e424f5 100644
--- a/lib/button/Button.js
+++ b/lib/button/Button.js
@@ -46,7 +46,7 @@ var factory = function factory(ripple, FontIcon) {
     _inherits(Button, _Component);
 
     function Button() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -56,7 +56,7 @@ var factory = function factory(ripple, FontIcon) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Button.__proto__ || Object.getPrototypeOf(Button)).call.apply(_ref, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Button)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
         _this.refs.button.blur();
         if (_this.props.onMouseUp) _this.props.onMouseUp(event);
       }, _this.handleMouseLeave = function (event) {
diff --git a/lib/button/IconButton.js b/lib/button/IconButton.js
index 40f22fd91..98f6331b6 100644
--- a/lib/button/IconButton.js
+++ b/lib/button/IconButton.js
@@ -46,7 +46,7 @@ var factory = function factory(ripple, FontIcon) {
     _inherits(IconButton, _Component);
 
     function IconButton() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -56,7 +56,7 @@ var factory = function factory(ripple, FontIcon) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = IconButton.__proto__ || Object.getPrototypeOf(IconButton)).call.apply(_ref, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(IconButton)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
         _this.refs.button.blur();
         if (_this.props.onMouseUp) _this.props.onMouseUp(event);
       }, _this.handleMouseLeave = function (event) {
diff --git a/lib/checkbox/Checkbox.js b/lib/checkbox/Checkbox.js
index a7d090d32..164ffb674 100644
--- a/lib/checkbox/Checkbox.js
+++ b/lib/checkbox/Checkbox.js
@@ -46,7 +46,7 @@ var factory = function factory(Check) {
     _inherits(Checkbox, _Component);
 
     function Checkbox() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -56,7 +56,7 @@ var factory = function factory(Check) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Checkbox.__proto__ || Object.getPrototypeOf(Checkbox)).call.apply(_ref, [this].concat(args))), _this), _this.handleToggle = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Checkbox)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleToggle = function (event) {
         if (event.pageX !== 0 && event.pageY !== 0) _this.blur();
         if (!_this.props.disabled && _this.props.onChange) {
           _this.props.onChange(!_this.props.checked, event);
diff --git a/lib/date_picker/Calendar.js b/lib/date_picker/Calendar.js
index 3e0f8ae96..ddbea1ba2 100644
--- a/lib/date_picker/Calendar.js
+++ b/lib/date_picker/Calendar.js
@@ -43,7 +43,7 @@ var factory = function factory(IconButton) {
     _inherits(Calendar, _Component);
 
     function Calendar() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -53,7 +53,7 @@ var factory = function factory(IconButton) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Calendar.__proto__ || Object.getPrototypeOf(Calendar)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Calendar)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
         viewDate: _this.props.selectedDate
       }, _this.handleDayClick = function (day) {
         _this.props.onChange(_time2.default.setDay(_this.state.viewDate, day), true);
diff --git a/lib/date_picker/CalendarDay.js b/lib/date_picker/CalendarDay.js
index af1b4a944..023206fde 100644
--- a/lib/date_picker/CalendarDay.js
+++ b/lib/date_picker/CalendarDay.js
@@ -32,7 +32,7 @@ var Day = function (_Component) {
   _inherits(Day, _Component);
 
   function Day() {
-    var _ref;
+    var _Object$getPrototypeO;
 
     var _temp, _this, _ret;
 
@@ -42,7 +42,7 @@ var Day = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Day.__proto__ || Object.getPrototypeOf(Day)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function () {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Day)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function () {
       if (!_this.props.disabled && _this.props.onClick) {
         _this.props.onClick(_this.props.day);
       }
diff --git a/lib/date_picker/CalendarMonth.js b/lib/date_picker/CalendarMonth.js
index ad3afbe25..772c665e3 100644
--- a/lib/date_picker/CalendarMonth.js
+++ b/lib/date_picker/CalendarMonth.js
@@ -36,7 +36,7 @@ var Month = function (_Component) {
   _inherits(Month, _Component);
 
   function Month() {
-    var _ref;
+    var _Object$getPrototypeO;
 
     var _temp, _this, _ret;
 
@@ -46,7 +46,7 @@ var Month = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Month.__proto__ || Object.getPrototypeOf(Month)).call.apply(_ref, [this].concat(args))), _this), _this.handleDayClick = function (day) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Month)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleDayClick = function (day) {
       if (_this.props.onDayClick) _this.props.onDayClick(day);
     }, _temp), _possibleConstructorReturn(_this, _ret);
   }
diff --git a/lib/date_picker/DatePicker.js b/lib/date_picker/DatePicker.js
index d1feea874..c029e7b20 100644
--- a/lib/date_picker/DatePicker.js
+++ b/lib/date_picker/DatePicker.js
@@ -66,7 +66,7 @@ var factory = function factory(Input, DatePickerDialog) {
     _inherits(DatePicker, _Component);
 
     function DatePicker() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -76,7 +76,7 @@ var factory = function factory(Input, DatePickerDialog) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = DatePicker.__proto__ || Object.getPrototypeOf(DatePicker)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(DatePicker)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
         active: _this.props.active
       }, _this.handleDismiss = function () {
         _this.setState({ active: false });
diff --git a/lib/date_picker/DatePickerDialog.js b/lib/date_picker/DatePickerDialog.js
index c9f934b2e..eca036556 100644
--- a/lib/date_picker/DatePickerDialog.js
+++ b/lib/date_picker/DatePickerDialog.js
@@ -31,7 +31,7 @@ var factory = function factory(Dialog, Calendar) {
     _inherits(CalendarDialog, _Component);
 
     function CalendarDialog() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -41,7 +41,7 @@ var factory = function factory(Dialog, Calendar) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = CalendarDialog.__proto__ || Object.getPrototypeOf(CalendarDialog)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(CalendarDialog)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
         display: 'months',
         date: _this.props.value
       }, _this.handleNewDate = function (value, dayClick) {
diff --git a/lib/dropdown/Dropdown.js b/lib/dropdown/Dropdown.js
index 66bafcab1..4f9d2dbff 100644
--- a/lib/dropdown/Dropdown.js
+++ b/lib/dropdown/Dropdown.js
@@ -50,7 +50,7 @@ var factory = function factory(Input) {
     _inherits(Dropdown, _Component);
 
     function Dropdown() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -60,7 +60,7 @@ var factory = function factory(Input) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Dropdown.__proto__ || Object.getPrototypeOf(Dropdown)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Dropdown)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
         active: false,
         up: false
       }, _this.close = function () {
diff --git a/lib/dropdown/theme.scss b/lib/dropdown/theme.scss
index d29a6e672..537bfc344 100644
--- a/lib/dropdown/theme.scss
+++ b/lib/dropdown/theme.scss
@@ -37,7 +37,7 @@
 }
 
 .value {
-  > .input {
+  > input {
     cursor: pointer;
   }
   &:after {
diff --git a/lib/form/Form.js b/lib/form/Form.js
index fe56e77f7..7de399c99 100644
--- a/lib/form/Form.js
+++ b/lib/form/Form.js
@@ -80,7 +80,7 @@ var factory = function factory(Autocomplete, Button, Checkbox, DatePicker, Dropd
     _inherits(Form, _Component);
 
     function Form() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -90,7 +90,7 @@ var factory = function factory(Autocomplete, Button, Checkbox, DatePicker, Dropd
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Form.__proto__ || Object.getPrototypeOf(Form)).call.apply(_ref, [this].concat(args))), _this), _this.onSubmit = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Form)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.onSubmit = function (event) {
         event.preventDefault();
         if (_this.props.onSubmit) _this.props.onSubmit(event);
       }, _this.onChange = function (field, value, event) {
diff --git a/lib/hoc/ActivableRenderer.js b/lib/hoc/ActivableRenderer.js
index f15f41a35..e64654f71 100644
--- a/lib/hoc/ActivableRenderer.js
+++ b/lib/hoc/ActivableRenderer.js
@@ -31,7 +31,7 @@ var ActivableRendererFactory = function ActivableRendererFactory() {
       _inherits(ActivableRenderer, _Component);
 
       function ActivableRenderer() {
-        var _ref;
+        var _Object$getPrototypeO;
 
         var _temp, _this, _ret;
 
@@ -41,7 +41,7 @@ var ActivableRendererFactory = function ActivableRendererFactory() {
           args[_key] = arguments[_key];
         }
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ActivableRenderer.__proto__ || Object.getPrototypeOf(ActivableRenderer)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(ActivableRenderer)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
           active: _this.props.active,
           rendered: _this.props.active
         }, _temp), _possibleConstructorReturn(_this, _ret);
diff --git a/lib/hoc/Portal.js b/lib/hoc/Portal.js
index 0d8cda45a..bf12d9039 100644
--- a/lib/hoc/Portal.js
+++ b/lib/hoc/Portal.js
@@ -28,7 +28,7 @@ var Portal = function (_Component) {
   function Portal() {
     _classCallCheck(this, Portal);
 
-    return _possibleConstructorReturn(this, (Portal.__proto__ || Object.getPrototypeOf(Portal)).apply(this, arguments));
+    return _possibleConstructorReturn(this, Object.getPrototypeOf(Portal).apply(this, arguments));
   }
 
   _createClass(Portal, [{
diff --git a/lib/index.d.ts b/lib/index.d.ts
index 63841d434..7113d389f 100644
--- a/lib/index.d.ts
+++ b/lib/index.d.ts
@@ -1,5 +1,4 @@
-import * as React from "react";
-export declare namespace ReactToolbox {
+export declare namespace __ReactToolbox {
   interface Props {
     /**
      * Set a class for the root component.
@@ -49,8 +48,8 @@ export declare namespace ReactToolbox {
     /**
      * Set inline style for the root component.
      */
-    style?: React.CSSProperties;
+    style?: __React.CSSProperties;
   }
 }
 
-export default ReactToolbox;
+export default __ReactToolbox;
diff --git a/lib/input/Input.js b/lib/input/Input.js
index e561fc219..d29f218bc 100644
--- a/lib/input/Input.js
+++ b/lib/input/Input.js
@@ -44,7 +44,7 @@ var factory = function factory(FontIcon) {
     _inherits(Input, _React$Component);
 
     function Input() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -54,7 +54,7 @@ var factory = function factory(FontIcon) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Input.__proto__ || Object.getPrototypeOf(Input)).call.apply(_ref, [this].concat(args))), _this), _this.handleChange = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Input)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleChange = function (event) {
         var _this$props = _this.props;
         var onChange = _this$props.onChange;
         var multiline = _this$props.multiline;
diff --git a/lib/list/List.js b/lib/list/List.js
index eac163f81..cd315c954 100644
--- a/lib/list/List.js
+++ b/lib/list/List.js
@@ -38,7 +38,7 @@ var factory = function factory(ListItem) {
     function List() {
       _classCallCheck(this, List);
 
-      return _possibleConstructorReturn(this, (List.__proto__ || Object.getPrototypeOf(List)).apply(this, arguments));
+      return _possibleConstructorReturn(this, Object.getPrototypeOf(List).apply(this, arguments));
     }
 
     _createClass(List, [{
diff --git a/lib/list/ListItem.js b/lib/list/ListItem.js
index 3358acddb..193dec03f 100644
--- a/lib/list/ListItem.js
+++ b/lib/list/ListItem.js
@@ -44,7 +44,7 @@ var factory = function factory(ripple, ListItemLayout, ListItemContent) {
     _inherits(ListItem, _Component);
 
     function ListItem() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -54,7 +54,7 @@ var factory = function factory(ripple, ListItemLayout, ListItemContent) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ListItem.__proto__ || Object.getPrototypeOf(ListItem)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(ListItem)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function (event) {
         if (_this.props.onClick && !_this.props.disabled) {
           _this.props.onClick(event);
         }
diff --git a/lib/list/ListItemContent.js b/lib/list/ListItemContent.js
index f288d9dff..f9924b4a0 100644
--- a/lib/list/ListItemContent.js
+++ b/lib/list/ListItemContent.js
@@ -42,7 +42,7 @@ var factory = function factory(ListItemText) {
     function ListItemContent() {
       _classCallCheck(this, ListItemContent);
 
-      return _possibleConstructorReturn(this, (ListItemContent.__proto__ || Object.getPrototypeOf(ListItemContent)).apply(this, arguments));
+      return _possibleConstructorReturn(this, Object.getPrototypeOf(ListItemContent).apply(this, arguments));
     }
 
     _createClass(ListItemContent, [{
diff --git a/lib/list/index.d.ts b/lib/list/index.d.ts
index a3b671196..e352ded4b 100644
--- a/lib/list/index.d.ts
+++ b/lib/list/index.d.ts
@@ -255,7 +255,7 @@ interface ListSubHeaderProps extends ReactToolbox.Props {
   /**
    * Text that will be displayed.
    */
-  caption?: boolean;
+  caption?: string;
   /**
    * Classnames object defining the component style.
    */
diff --git a/lib/menu/IconMenu.js b/lib/menu/IconMenu.js
index 70bff718d..f076af1b4 100644
--- a/lib/menu/IconMenu.js
+++ b/lib/menu/IconMenu.js
@@ -40,7 +40,7 @@ var factory = function factory(IconButton, Menu) {
     _inherits(IconMenu, _Component);
 
     function IconMenu() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -50,7 +50,7 @@ var factory = function factory(IconButton, Menu) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = IconMenu.__proto__ || Object.getPrototypeOf(IconMenu)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(IconMenu)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
         active: false
       }, _this.handleButtonClick = function (event) {
         _this.setState({ active: !_this.state.active });
diff --git a/lib/menu/Menu.js b/lib/menu/Menu.js
index 51ab885d7..bcc8ed066 100644
--- a/lib/menu/Menu.js
+++ b/lib/menu/Menu.js
@@ -53,7 +53,7 @@ var factory = function factory(MenuItem) {
     _inherits(Menu, _Component);
 
     function Menu() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -63,7 +63,7 @@ var factory = function factory(MenuItem) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Menu.__proto__ || Object.getPrototypeOf(Menu)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Menu)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
         active: _this.props.active,
         rippled: false
       }, _this.handleDocumentClick = function (event) {
diff --git a/lib/menu/MenuItem.js b/lib/menu/MenuItem.js
index 2670f4325..7562dfa0b 100644
--- a/lib/menu/MenuItem.js
+++ b/lib/menu/MenuItem.js
@@ -46,7 +46,7 @@ var factory = function factory(ripple) {
     _inherits(MenuItem, _Component);
 
     function MenuItem() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -56,7 +56,7 @@ var factory = function factory(ripple) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = MenuItem.__proto__ || Object.getPrototypeOf(MenuItem)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(MenuItem)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function (event) {
         if (_this.props.onClick && !_this.props.disabled) {
           _this.props.onClick(event, _this);
         }
diff --git a/lib/overlay/Overlay.js b/lib/overlay/Overlay.js
index 5fa1d7d61..0bf6de75e 100644
--- a/lib/overlay/Overlay.js
+++ b/lib/overlay/Overlay.js
@@ -39,7 +39,7 @@ var Overlay = function (_Component) {
   function Overlay() {
     _classCallCheck(this, Overlay);
 
-    return _possibleConstructorReturn(this, (Overlay.__proto__ || Object.getPrototypeOf(Overlay)).apply(this, arguments));
+    return _possibleConstructorReturn(this, Object.getPrototypeOf(Overlay).apply(this, arguments));
   }
 
   _createClass(Overlay, [{
diff --git a/lib/progress_bar/ProgressBar.js b/lib/progress_bar/ProgressBar.js
index f8a16e85e..c1a36201a 100644
--- a/lib/progress_bar/ProgressBar.js
+++ b/lib/progress_bar/ProgressBar.js
@@ -39,7 +39,7 @@ var ProgressBar = function (_Component) {
   function ProgressBar() {
     _classCallCheck(this, ProgressBar);
 
-    return _possibleConstructorReturn(this, (ProgressBar.__proto__ || Object.getPrototypeOf(ProgressBar)).apply(this, arguments));
+    return _possibleConstructorReturn(this, Object.getPrototypeOf(ProgressBar).apply(this, arguments));
   }
 
   _createClass(ProgressBar, [{
diff --git a/lib/radio/RadioButton.js b/lib/radio/RadioButton.js
index 71ee095a7..7fe8abe0b 100644
--- a/lib/radio/RadioButton.js
+++ b/lib/radio/RadioButton.js
@@ -44,7 +44,7 @@ var factory = function factory(Radio) {
     _inherits(RadioButton, _Component);
 
     function RadioButton() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -54,7 +54,7 @@ var factory = function factory(Radio) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RadioButton.__proto__ || Object.getPrototypeOf(RadioButton)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(RadioButton)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function (event) {
         var _this$props = _this.props;
         var checked = _this$props.checked;
         var disabled = _this$props.disabled;
diff --git a/lib/radio/RadioGroup.js b/lib/radio/RadioGroup.js
index a69b9fe36..0610b94d1 100644
--- a/lib/radio/RadioGroup.js
+++ b/lib/radio/RadioGroup.js
@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.RadioGroup = exports.radioGroupFactory = undefined;
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
 var _react = require('react');
@@ -34,7 +32,7 @@ var factory = function factory(RadioButton) {
     _inherits(RadioGroup, _Component);
 
     function RadioGroup() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -44,7 +42,7 @@ var factory = function factory(RadioButton) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RadioGroup.__proto__ || Object.getPrototypeOf(RadioGroup)).call.apply(_ref, [this].concat(args))), _this), _this.handleChange = function (value) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(RadioGroup)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleChange = function (value) {
         if (_this.props.onChange) _this.props.onChange(value);
       }, _temp), _possibleConstructorReturn(_this, _ret);
     }
@@ -54,15 +52,12 @@ var factory = function factory(RadioButton) {
       value: function renderRadioButtons() {
         var _this2 = this;
 
-        return _react2.default.Children.map(this.props.children, function (radio, idx) {
-          return _react2.default.createElement(RadioButton, _extends({}, radio.props, {
+        return _react2.default.Children.map(this.props.children, function (radio) {
+          return _react2.default.cloneElement(radio, {
             checked: radio.props.value === _this2.props.value,
             disabled: _this2.props.disabled || radio.props.disabled,
-            key: idx,
-            label: radio.props.label,
-            onChange: _this2.handleChange.bind(_this2, radio.props.value),
-            value: radio.props.value
-          }));
+            onChange: _this2.handleChange.bind(_this2, radio.props.value)
+          });
         });
       }
     }, {
diff --git a/lib/ripple/Ripple.js b/lib/ripple/Ripple.js
index cf2c19494..49e562e0e 100644
--- a/lib/ripple/Ripple.js
+++ b/lib/ripple/Ripple.js
@@ -80,7 +80,7 @@ var rippleFactory = function rippleFactory() {
       _inherits(RippledComponent, _Component);
 
       function RippledComponent() {
-        var _ref;
+        var _Object$getPrototypeO;
 
         var _temp, _this, _ret;
 
@@ -90,7 +90,7 @@ var rippleFactory = function rippleFactory() {
           args[_key] = arguments[_key];
         }
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RippledComponent.__proto__ || Object.getPrototypeOf(RippledComponent)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(RippledComponent)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
           ripples: {}
         }, _this.handleMouseDown = function (event) {
           if (_this.props.onMouseDown) _this.props.onMouseDown(event);
@@ -306,14 +306,14 @@ var rippleFactory = function rippleFactory() {
         }
       }, {
         key: 'renderRipple',
-        value: function renderRipple(key, className, _ref2) {
+        value: function renderRipple(key, className, _ref) {
           var _classnames;
 
-          var active = _ref2.active;
-          var left = _ref2.left;
-          var restarting = _ref2.restarting;
-          var top = _ref2.top;
-          var width = _ref2.width;
+          var active = _ref.active;
+          var left = _ref.left;
+          var restarting = _ref.restarting;
+          var top = _ref.top;
+          var width = _ref.width;
 
           var scale = restarting ? 0 : 1;
           var transform = 'translate3d(' + (-width / 2 + left) + 'px, ' + (-width / 2 + top) + 'px, 0) scale(' + scale + ')';
diff --git a/lib/slider/Slider.js b/lib/slider/Slider.js
index 10ac52441..c838283e5 100644
--- a/lib/slider/Slider.js
+++ b/lib/slider/Slider.js
@@ -58,7 +58,7 @@ var factory = function factory(ProgressBar, Input) {
     _inherits(Slider, _Component);
 
     function Slider() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -68,7 +68,7 @@ var factory = function factory(ProgressBar, Input) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Slider.__proto__ || Object.getPrototypeOf(Slider)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Slider)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
         inputFocused: false,
         inputValue: null,
         sliderLength: 0,
diff --git a/lib/snackbar/Snackbar.js b/lib/snackbar/Snackbar.js
index b4ae2f999..bbb90867a 100644
--- a/lib/snackbar/Snackbar.js
+++ b/lib/snackbar/Snackbar.js
@@ -52,7 +52,7 @@ var factory = function factory(Overlay, Button) {
     function Snackbar() {
       _classCallCheck(this, Snackbar);
 
-      return _possibleConstructorReturn(this, (Snackbar.__proto__ || Object.getPrototypeOf(Snackbar)).apply(this, arguments));
+      return _possibleConstructorReturn(this, Object.getPrototypeOf(Snackbar).apply(this, arguments));
     }
 
     _createClass(Snackbar, [{
diff --git a/lib/switch/Switch.js b/lib/switch/Switch.js
index b723eccbd..96ad9977a 100644
--- a/lib/switch/Switch.js
+++ b/lib/switch/Switch.js
@@ -44,7 +44,7 @@ var factory = function factory(Thumb) {
     _inherits(Switch, _Component);
 
     function Switch() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -54,7 +54,7 @@ var factory = function factory(Thumb) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Switch.__proto__ || Object.getPrototypeOf(Switch)).call.apply(_ref, [this].concat(args))), _this), _this.handleToggle = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Switch)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleToggle = function (event) {
         if (event.pageX !== 0 && event.pageY !== 0) _this.blur();
         if (!_this.props.disabled && _this.props.onChange) {
           _this.props.onChange(!_this.props.checked, event);
diff --git a/lib/table/Table.js b/lib/table/Table.js
index 19c436242..f0540d147 100644
--- a/lib/table/Table.js
+++ b/lib/table/Table.js
@@ -46,7 +46,7 @@ var factory = function factory(TableHead, TableRow) {
     _inherits(Table, _Component);
 
     function Table() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -56,7 +56,7 @@ var factory = function factory(TableHead, TableRow) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Table.__proto__ || Object.getPrototypeOf(Table)).call.apply(_ref, [this].concat(args))), _this), _this.handleFullSelect = function () {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Table)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleFullSelect = function () {
         if (_this.props.onSelect) {
           var _this$props = _this.props;
           var source = _this$props.source;
diff --git a/lib/table/TableRow.js b/lib/table/TableRow.js
index b6405e136..ae0a25ccc 100644
--- a/lib/table/TableRow.js
+++ b/lib/table/TableRow.js
@@ -33,7 +33,7 @@ var factory = function factory(Checkbox) {
     _inherits(TableRow, _Component);
 
     function TableRow() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -43,7 +43,7 @@ var factory = function factory(Checkbox) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TableRow.__proto__ || Object.getPrototypeOf(TableRow)).call.apply(_ref, [this].concat(args))), _this), _this.handleInputChange = function (index, key, type, event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TableRow)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleInputChange = function (index, key, type, event) {
         var value = type === 'checkbox' ? event.target.checked : event.target.value;
         var onChange = _this.props.model[key].onChange || _this.props.onChange;
         onChange(index, key, value);
diff --git a/lib/table/theme.scss b/lib/table/theme.scss
index 50db57d34..3b8521f15 100644
--- a/lib/table/theme.scss
+++ b/lib/table/theme.scss
@@ -8,10 +8,10 @@
   font-size: $font-size-tiny;
   color: $table-text-color;
   text-align: left;
+  border-spacing: 0;
   tr {
     height: $table-row-height;
     line-height: $table-row-height;
-    border-bottom: $table-row-divider;
   }
   th {
     font-weight: $font-weight-bold;
@@ -20,6 +20,7 @@
     }
   }
   th, td {
+    border-bottom: $table-row-divider;
     position: relative;
     padding: 0 $table-row-offset;
     &.selectable {
@@ -35,7 +36,9 @@
 .row {
   transition: background-color $animation-duration $animation-curve-default;
   &:last-child {
-    border-color: transparent;
+    td {
+      border-color: transparent;
+    }
   }
   > td {
     > input {
diff --git a/lib/tabs/Tab.js b/lib/tabs/Tab.js
index 60240cdac..f1c272a0d 100644
--- a/lib/tabs/Tab.js
+++ b/lib/tabs/Tab.js
@@ -17,6 +17,8 @@ var _classnames2 = require('classnames');
 
 var _classnames3 = _interopRequireDefault(_classnames2);
 
+var _font_icon = require('../font_icon');
+
 var _reactCssThemr = require('react-css-themr');
 
 var _identifiers = require('../identifiers.js');
@@ -37,7 +39,7 @@ var Tab = function (_Component) {
   _inherits(Tab, _Component);
 
   function Tab() {
-    var _ref;
+    var _Object$getPrototypeO;
 
     var _temp, _this, _ret;
 
@@ -47,7 +49,7 @@ var Tab = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Tab.__proto__ || Object.getPrototypeOf(Tab)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Tab)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function (event) {
       if (!_this.props.disabled && _this.props.onClick) {
         _this.props.onClick(event);
       }
@@ -73,16 +75,19 @@ var Tab = function (_Component) {
       var className = _props.className;
       var disabled = _props.disabled;
       var hidden = _props.hidden;
+      var label = _props.label;
+      var icon = _props.icon;
       var theme = _props.theme;
 
-      var other = _objectWithoutProperties(_props, ['onActive', 'active', 'activeClassName', 'className', 'disabled', 'hidden', 'theme']);
+      var other = _objectWithoutProperties(_props, ['onActive', 'active', 'activeClassName', 'className', 'disabled', 'hidden', 'label', 'icon', 'theme']);
 
-      var _className = (0, _classnames3.default)(theme.label, (_classnames = {}, _defineProperty(_classnames, theme.active, active), _defineProperty(_classnames, theme.hidden, hidden), _defineProperty(_classnames, theme.disabled, disabled), _defineProperty(_classnames, activeClassName, active), _classnames), className);
+      var _className = (0, _classnames3.default)(theme.label, (_classnames = {}, _defineProperty(_classnames, theme.active, active), _defineProperty(_classnames, theme.hidden, hidden), _defineProperty(_classnames, theme.withText, label), _defineProperty(_classnames, theme.withIcon, icon), _defineProperty(_classnames, theme.disabled, disabled), _defineProperty(_classnames, activeClassName, active), _classnames), className);
 
       return _react2.default.createElement(
         'label',
         _extends({}, other, { 'data-react-toolbox': 'tab', className: _className, onClick: this.handleClick }),
-        this.props.label
+        icon && _react2.default.createElement(_font_icon.FontIcon, { className: theme.icon, value: icon }),
+        label
       );
     }
   }]);
@@ -96,7 +101,8 @@ Tab.propTypes = {
   className: _react.PropTypes.string,
   disabled: _react.PropTypes.bool,
   hidden: _react.PropTypes.bool,
-  label: _react.PropTypes.any.isRequired,
+  icon: _react.PropTypes.node,
+  label: _react.PropTypes.node,
   onActive: _react.PropTypes.func,
   onClick: _react.PropTypes.func,
   theme: _react.PropTypes.shape({
diff --git a/lib/tabs/TabContent.js b/lib/tabs/TabContent.js
index 65bd7a6a6..96f3538be 100644
--- a/lib/tabs/TabContent.js
+++ b/lib/tabs/TabContent.js
@@ -35,7 +35,7 @@ var TabContent = function (_Component) {
   function TabContent() {
     _classCallCheck(this, TabContent);
 
-    return _possibleConstructorReturn(this, (TabContent.__proto__ || Object.getPrototypeOf(TabContent)).apply(this, arguments));
+    return _possibleConstructorReturn(this, Object.getPrototypeOf(TabContent).apply(this, arguments));
   }
 
   _createClass(TabContent, [{
diff --git a/lib/tabs/Tabs.js b/lib/tabs/Tabs.js
index 34eda37db..1905592cc 100644
--- a/lib/tabs/Tabs.js
+++ b/lib/tabs/Tabs.js
@@ -42,7 +42,7 @@ var factory = function factory(Tab, TabContent) {
     _inherits(Tabs, _Component);
 
     function Tabs() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -52,7 +52,7 @@ var factory = function factory(Tab, TabContent) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Tabs.__proto__ || Object.getPrototypeOf(Tabs)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Tabs)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
         pointer: {}
       }, _this.handleHeaderClick = function (event) {
         var idx = parseInt(event.currentTarget.id);
@@ -152,18 +152,23 @@ var factory = function factory(Tab, TabContent) {
       value: function renderContents(contents) {
         var _this5 = this;
 
-        var activeIdx = contents.findIndex(function (item, idx) {
-          return _this5.props.index === idx;
+        var contentElements = contents.map(function (item, idx) {
+          return _react2.default.cloneElement(item, {
+            key: idx,
+            theme: _this5.props.theme,
+            active: _this5.props.index === idx,
+            hidden: _this5.props.index !== idx && _this5.props.hideMode === 'display',
+            tabIndex: idx
+          });
         });
 
-        if (contents && contents[activeIdx]) {
-          return _react2.default.cloneElement(contents[activeIdx], {
-            key: activeIdx,
-            theme: this.props.theme,
-            active: true,
-            tabIndex: activeIdx
-          });
+        if (this.props.hideMode === 'display') {
+          return contentElements;
         }
+
+        return contentElements.filter(function (item, idx) {
+          return idx === _this5.props.index;
+        });
       }
     }, {
       key: 'render',
@@ -204,6 +209,7 @@ var factory = function factory(Tab, TabContent) {
     className: _react.PropTypes.string,
     disableAnimatedBottomBorder: _react.PropTypes.bool,
     fixed: _react.PropTypes.bool,
+    hideMode: _react.PropTypes.oneOf(['display', 'unmounted']),
     index: _react.PropTypes.number,
     inverse: _react.PropTypes.bool,
     onChange: _react.PropTypes.func,
@@ -218,7 +224,8 @@ var factory = function factory(Tab, TabContent) {
   Tabs.defaultProps = {
     index: 0,
     fixed: false,
-    inverse: false
+    inverse: false,
+    hideMode: 'unmounted'
   };
 
 
diff --git a/lib/tabs/__tests__/index.spec.js b/lib/tabs/__tests__/index.spec.js
index 4995f871b..de59ddee1 100644
--- a/lib/tabs/__tests__/index.spec.js
+++ b/lib/tabs/__tests__/index.spec.js
@@ -1,5 +1,7 @@
 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
 var _expect = require('expect');
@@ -55,45 +57,43 @@ describe('Tabs', function () {
   var tabContents = void 0,
       composition = void 0;
 
-  it('only renders the current tab', function () {
-    var Composition = function (_Component) {
-      _inherits(Composition, _Component);
-
-      function Composition() {
-        _classCallCheck(this, Composition);
-
-        var _this = _possibleConstructorReturn(this, (Composition.__proto__ || Object.getPrototypeOf(Composition)).call(this));
-
-        _this.state = { index: 0 };
-        return _this;
+  var Composition = function (_Component) {
+    _inherits(Composition, _Component);
+
+    function Composition() {
+      _classCallCheck(this, Composition);
+
+      var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Composition).call(this));
+
+      _this.state = { index: 0 };
+      return _this;
+    }
+
+    _createClass(Composition, [{
+      key: 'render',
+      value: function render() {
+        return _react2.default.createElement(
+          _Tabs2.default,
+          _extends({ index: this.state.index }, this.props),
+          _react2.default.createElement(
+            _Tab2.default,
+            { label: 'tab1' },
+            'tab1'
+          ),
+          _react2.default.createElement(
+            _Tab2.default,
+            { label: 'tab2' },
+            'tab2'
+          )
+        );
       }
+    }]);
 
-      _createClass(Composition, [{
-        key: 'render',
-        value: function render() {
-          return _react2.default.createElement(
-            _Tabs2.default,
-            { index: this.state.index },
-            _react2.default.createElement(
-              _Tab2.default,
-              { label: 'tab1' },
-              'tab1'
-            ),
-            _react2.default.createElement(
-              _Tab2.default,
-              { label: 'tab2' },
-              'tab2'
-            )
-          );
-        }
-      }]);
-
-      return Composition;
-    }(_react.Component);
+    return Composition;
+  }(_react.Component);
 
+  it('defaults to only rendering the current tab', function () {
     // initial render
-
-
     composition = _testing2.default.renderComponent(Composition);
 
     tabContents = _reactAddonsTestUtils2.default.scryRenderedComponentsWithType(composition, _TabContent2.default);
@@ -111,6 +111,43 @@ describe('Tabs', function () {
     (0, _expect2.default)(tabContents[0].props.tabIndex).toEqual(1);
   });
 
+  it('renders inactive tabs when hideMode is set to display', function () {
+    // initial render
+    composition = _testing2.default.renderComponent(Composition, { hideMode: 'display' });
+
+    tabContents = _reactAddonsTestUtils2.default.scryRenderedComponentsWithType(composition, _TabContent2.default);
+
+    (0, _expect2.default)(tabContents.length).toEqual(2);
+
+    var tabOne = tabContents.find(function (tab) {
+      return tab.props.children === 'tab1';
+    });
+    var tabTwo = tabContents.find(function (tab) {
+      return tab.props.children === 'tab2';
+    });
+
+    (0, _expect2.default)(tabOne.props.hidden).toEqual(false);
+    (0, _expect2.default)(tabTwo.props.hidden).toEqual(true);
+
+    // after tab change
+    composition.setState({ index: 1 });
+    composition.forceUpdate();
+
+    tabContents = _reactAddonsTestUtils2.default.scryRenderedComponentsWithType(composition, _TabContent2.default);
+
+    (0, _expect2.default)(tabContents.length).toEqual(2);
+
+    tabOne = tabContents.find(function (tab) {
+      return tab.props.children === 'tab1';
+    });
+    tabTwo = tabContents.find(function (tab) {
+      return tab.props.children === 'tab2';
+    });
+
+    (0, _expect2.default)(tabOne.props.hidden).toEqual(true);
+    (0, _expect2.default)(tabTwo.props.hidden).toEqual(false);
+  });
+
   describe('#render', function () {
     it('does not use fixed by default', function () {
       var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Tabs2.default, { theme: _theme2.default }));
diff --git a/lib/tabs/_config.scss b/lib/tabs/_config.scss
index 4a03d6419..e5ee9c8e0 100644
--- a/lib/tabs/_config.scss
+++ b/lib/tabs/_config.scss
@@ -1,6 +1,8 @@
 $tab-label-disabled-opacity: .2 !default;
 $tab-label-h-padding: 1.2 * $unit !default;
 $tab-label-height: 4.8 * $unit !default;
+$tab-icon-height: 2.4 * $unit !default;
+$tab-icon-margin-bottom: .8 * $unit !default;
 $tab-text-height: 1.4 * $unit !default;
 $tab-label-v-padding: ($tab-label-height - $tab-text-height) / 2 !default;
 $tab-navigation-border-color: $color-divider !default;
diff --git a/lib/tabs/theme.scss b/lib/tabs/theme.scss
index 9d9fda29d..d5f25367e 100644
--- a/lib/tabs/theme.scss
+++ b/lib/tabs/theme.scss
@@ -21,6 +21,7 @@
   font-weight: $font-weight-semi-bold;
   line-height: 1;
   color: $tab-text-inactive-color;
+  text-align: center;
   text-transform: uppercase;
   transition-timing-function: $animation-curve-default;
   transition-duration: $animation-duration;
@@ -37,6 +38,24 @@
   &.hidden {
     display: none;
   }
+
+  &.withIcon {
+    padding-top: ($tab-label-v-padding - $tab-icon-margin-bottom / 2);
+    padding-bottom: ($tab-label-v-padding - $tab-icon-margin-bottom / 2);
+  }
+
+  &.withText {
+    .icon {
+      margin-bottom: $tab-icon-margin-bottom;
+    }
+  }
+}
+
+.icon {
+  display: block;
+  height: $tab-icon-height;
+  margin: 0 auto;
+  line-height: $tab-icon-height;
 }
 
 .pointer {
diff --git a/lib/time_picker/Clock.js b/lib/time_picker/Clock.js
index aaa55accb..2b74f0a1c 100644
--- a/lib/time_picker/Clock.js
+++ b/lib/time_picker/Clock.js
@@ -40,7 +40,7 @@ var Clock = function (_Component) {
   _inherits(Clock, _Component);
 
   function Clock() {
-    var _ref;
+    var _Object$getPrototypeO;
 
     var _temp, _this, _ret;
 
@@ -50,7 +50,7 @@ var Clock = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Clock.__proto__ || Object.getPrototypeOf(Clock)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Clock)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
       center: { x: null, y: null },
       radius: 0
     }, _this.handleHourChange = function (hours) {
diff --git a/lib/time_picker/ClockFace.js b/lib/time_picker/ClockFace.js
index b2604a0c2..54ca26407 100644
--- a/lib/time_picker/ClockFace.js
+++ b/lib/time_picker/ClockFace.js
@@ -28,7 +28,7 @@ var Face = function (_Component) {
   _inherits(Face, _Component);
 
   function Face() {
-    var _ref;
+    var _Object$getPrototypeO;
 
     var _temp, _this, _ret;
 
@@ -38,7 +38,7 @@ var Face = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Face.__proto__ || Object.getPrototypeOf(Face)).call.apply(_ref, [this].concat(args))), _this), _this.renderNumber = function (number, idx) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Face)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.renderNumber = function (number, idx) {
       var _this$props = _this.props;
       var active = _this$props.active;
       var radius = _this$props.radius;
diff --git a/lib/time_picker/ClockHand.js b/lib/time_picker/ClockHand.js
index d16bdaeab..053b19e07 100644
--- a/lib/time_picker/ClockHand.js
+++ b/lib/time_picker/ClockHand.js
@@ -34,7 +34,7 @@ var Hand = function (_Component) {
   _inherits(Hand, _Component);
 
   function Hand() {
-    var _ref;
+    var _Object$getPrototypeO;
 
     var _temp, _this, _ret;
 
@@ -44,7 +44,7 @@ var Hand = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Hand.__proto__ || Object.getPrototypeOf(Hand)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Hand)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
       knobWidth: 0
     }, _this.handleMouseMove = function (event) {
       _this.move(_events2.default.getMousePosition(event));
diff --git a/lib/time_picker/ClockHours.js b/lib/time_picker/ClockHours.js
index 3b4ee10fd..85a711ab1 100644
--- a/lib/time_picker/ClockHours.js
+++ b/lib/time_picker/ClockHours.js
@@ -41,7 +41,7 @@ var Hours = function (_Component) {
   _inherits(Hours, _Component);
 
   function Hours() {
-    var _ref;
+    var _Object$getPrototypeO;
 
     var _temp, _this, _ret;
 
@@ -51,7 +51,7 @@ var Hours = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Hours.__proto__ || Object.getPrototypeOf(Hours)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Hours)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
       inner: _this.props.format === '24hr' && _this.props.selected > 0 && _this.props.selected <= 12
     }, _this.handleHandMove = function (degrees, radius) {
       var currentInner = radius < _this.props.radius - _this.props.spacing * innerSpacing;
diff --git a/lib/time_picker/ClockMinutes.js b/lib/time_picker/ClockMinutes.js
index 0b21e74a5..780a90ba4 100644
--- a/lib/time_picker/ClockMinutes.js
+++ b/lib/time_picker/ClockMinutes.js
@@ -37,7 +37,7 @@ var Minutes = function (_Component) {
   _inherits(Minutes, _Component);
 
   function Minutes() {
-    var _ref;
+    var _Object$getPrototypeO;
 
     var _temp, _this, _ret;
 
@@ -47,7 +47,7 @@ var Minutes = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Minutes.__proto__ || Object.getPrototypeOf(Minutes)).call.apply(_ref, [this].concat(args))), _this), _this.handleHandMove = function (degrees) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Minutes)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleHandMove = function (degrees) {
       _this.props.onChange(degrees / step);
     }, _this.handleMouseDown = function (event) {
       _this.refs.hand.mouseStart(event);
diff --git a/lib/time_picker/TimePicker.js b/lib/time_picker/TimePicker.js
index 2e0a06ae3..d4dc2e755 100644
--- a/lib/time_picker/TimePicker.js
+++ b/lib/time_picker/TimePicker.js
@@ -58,7 +58,7 @@ var factory = function factory(TimePickerDialog, Input) {
     _inherits(TimePicker, _Component);
 
     function TimePicker() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -68,7 +68,7 @@ var factory = function factory(TimePickerDialog, Input) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TimePicker.__proto__ || Object.getPrototypeOf(TimePicker)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TimePicker)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
         active: _this.props.active
       }, _this.handleDismiss = function () {
         _this.setState({ active: false });
diff --git a/lib/time_picker/TimePickerDialog.js b/lib/time_picker/TimePickerDialog.js
index 9d4dcefb9..92e55b2db 100644
--- a/lib/time_picker/TimePickerDialog.js
+++ b/lib/time_picker/TimePickerDialog.js
@@ -35,7 +35,7 @@ var factory = function factory(Dialog) {
     _inherits(TimePickerDialog, _Component);
 
     function TimePickerDialog() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -45,7 +45,7 @@ var factory = function factory(Dialog) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TimePickerDialog.__proto__ || Object.getPrototypeOf(TimePickerDialog)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TimePickerDialog)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
         display: 'hours',
         displayTime: _this.props.value
       }, _this.handleClockChange = function (value) {
diff --git a/lib/tooltip/Tooltip.js b/lib/tooltip/Tooltip.js
index a57b41d73..b77620ef5 100644
--- a/lib/tooltip/Tooltip.js
+++ b/lib/tooltip/Tooltip.js
@@ -78,7 +78,7 @@ var tooltipFactory = function tooltipFactory() {
       _inherits(TooltippedComponent, _Component);
 
       function TooltippedComponent() {
-        var _ref;
+        var _Object$getPrototypeO;
 
         var _temp, _this, _ret;
 
@@ -88,7 +88,7 @@ var tooltipFactory = function tooltipFactory() {
           args[_key] = arguments[_key];
         }
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TooltippedComponent.__proto__ || Object.getPrototypeOf(TooltippedComponent)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TooltippedComponent)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
           active: false,
           position: _this.props.tooltipPosition,
           visible: false
@@ -118,12 +118,12 @@ var tooltipFactory = function tooltipFactory() {
         }
       }, {
         key: 'activate',
-        value: function activate(_ref2) {
+        value: function activate(_ref) {
           var _this2 = this;
 
-          var top = _ref2.top;
-          var left = _ref2.left;
-          var position = _ref2.position;
+          var top = _ref.top;
+          var left = _ref.left;
+          var position = _ref.position;
 
           if (this.timeout) clearTimeout(this.timeout);
           this.setState({ visible: true, position: position });

From ccc1699cc466b04c0d01920416d8a9d5443cb6e1 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 3 Sep 2016 16:08:52 +0200
Subject: [PATCH 0791/1024] Fix #630

---
 components/radio/RadioGroup.js | 15 +++++++++------
 components/utils/react.js      |  3 +++
 lib/radio/RadioGroup.js        | 12 +++++++-----
 lib/utils/react.js             |  9 +++++++++
 4 files changed, 28 insertions(+), 11 deletions(-)
 create mode 100644 components/utils/react.js
 create mode 100644 lib/utils/react.js

diff --git a/components/radio/RadioGroup.js b/components/radio/RadioGroup.js
index 7c6126391..d15d50371 100644
--- a/components/radio/RadioGroup.js
+++ b/components/radio/RadioGroup.js
@@ -2,6 +2,7 @@ import React, { Component, PropTypes } from 'react';
 import { themr } from 'react-css-themr';
 import { RADIO } from '../identifiers.js';
 import InjectRadioButton from './RadioButton.js';
+import { isComponentOfType } from '../utils/react.js';
 
 const factory = (RadioButton) => {
   class RadioGroup extends Component {
@@ -24,12 +25,14 @@ const factory = (RadioButton) => {
     };
 
     renderRadioButtons () {
-      return React.Children.map(this.props.children, radio => (
-        React.cloneElement(radio, {
-          checked: radio.props.value === this.props.value,
-          disabled: this.props.disabled || radio.props.disabled,
-          onChange: this.handleChange.bind(this, radio.props.value)
-        })
+      return React.Children.map(this.props.children, child => (
+        !isComponentOfType(RadioButton, child)
+          ? child
+          : React.cloneElement(child, {
+              checked: child.props.value === this.props.value,
+              disabled: this.props.disabled || child.props.disabled,
+              onChange: this.handleChange.bind(this, child.props.value)
+            })
       ));
     }
 
diff --git a/components/utils/react.js b/components/utils/react.js
new file mode 100644
index 000000000..01860283b
--- /dev/null
+++ b/components/utils/react.js
@@ -0,0 +1,3 @@
+export function isComponentOfType (classType, reactElement) {
+  return reactElement && reactElement.type === classType;
+}
diff --git a/lib/radio/RadioGroup.js b/lib/radio/RadioGroup.js
index 0610b94d1..aa7ff0bc2 100644
--- a/lib/radio/RadioGroup.js
+++ b/lib/radio/RadioGroup.js
@@ -19,6 +19,8 @@ var _RadioButton = require('./RadioButton.js');
 
 var _RadioButton2 = _interopRequireDefault(_RadioButton);
 
+var _react3 = require('../utils/react.js');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -52,11 +54,11 @@ var factory = function factory(RadioButton) {
       value: function renderRadioButtons() {
         var _this2 = this;
 
-        return _react2.default.Children.map(this.props.children, function (radio) {
-          return _react2.default.cloneElement(radio, {
-            checked: radio.props.value === _this2.props.value,
-            disabled: _this2.props.disabled || radio.props.disabled,
-            onChange: _this2.handleChange.bind(_this2, radio.props.value)
+        return _react2.default.Children.map(this.props.children, function (child) {
+          return !(0, _react3.isComponentOfType)(RadioButton, child) ? child : _react2.default.cloneElement(child, {
+            checked: child.props.value === _this2.props.value,
+            disabled: _this2.props.disabled || child.props.disabled,
+            onChange: _this2.handleChange.bind(_this2, child.props.value)
           });
         });
       }
diff --git a/lib/utils/react.js b/lib/utils/react.js
new file mode 100644
index 000000000..c6267df1f
--- /dev/null
+++ b/lib/utils/react.js
@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isComponentOfType = isComponentOfType;
+function isComponentOfType(classType, reactElement) {
+  return reactElement && reactElement.type === classType;
+}
\ No newline at end of file

From 80a8a9e69f445835bcc48d32689100d937f034e2 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 3 Sep 2016 16:27:01 +0200
Subject: [PATCH 0792/1024] Fix linting issues

---
 components/dialog/theme.scss | 4 ++--
 components/table/theme.scss  | 2 +-
 lib/dialog/theme.scss        | 4 ++--
 lib/table/theme.scss         | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/dialog/theme.scss b/components/dialog/theme.scss
index c7ac36f7f..6293fe480 100644
--- a/components/dialog/theme.scss
+++ b/components/dialog/theme.scss
@@ -51,10 +51,10 @@
   width: 96vw;
 
   @media screen and (max-width: $layout-breakpoint-xs) {
+    width: 100vw;
     max-width: 100vw;
-    max-height: 100vh;
     min-height: 100vh;
-    width: 100vw;
+    max-height: 100vh;
     border-radius: 0;
   }
 }
diff --git a/components/table/theme.scss b/components/table/theme.scss
index 3b8521f15..232ed4268 100644
--- a/components/table/theme.scss
+++ b/components/table/theme.scss
@@ -20,9 +20,9 @@
     }
   }
   th, td {
-    border-bottom: $table-row-divider;
     position: relative;
     padding: 0 $table-row-offset;
+    border-bottom: $table-row-divider;
     &.selectable {
       width: 1.8 * $unit;
       padding-right: 0;
diff --git a/lib/dialog/theme.scss b/lib/dialog/theme.scss
index c7ac36f7f..6293fe480 100644
--- a/lib/dialog/theme.scss
+++ b/lib/dialog/theme.scss
@@ -51,10 +51,10 @@
   width: 96vw;
 
   @media screen and (max-width: $layout-breakpoint-xs) {
+    width: 100vw;
     max-width: 100vw;
-    max-height: 100vh;
     min-height: 100vh;
-    width: 100vw;
+    max-height: 100vh;
     border-radius: 0;
   }
 }
diff --git a/lib/table/theme.scss b/lib/table/theme.scss
index 3b8521f15..232ed4268 100644
--- a/lib/table/theme.scss
+++ b/lib/table/theme.scss
@@ -20,9 +20,9 @@
     }
   }
   th, td {
-    border-bottom: $table-row-divider;
     position: relative;
     padding: 0 $table-row-offset;
+    border-bottom: $table-row-divider;
     &.selectable {
       width: 1.8 * $unit;
       padding-right: 0;

From ace21d969e37e0cd1066a63f123b1166567b827e Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 3 Sep 2016 16:45:58 +0200
Subject: [PATCH 0793/1024] =?UTF-8?q?=F0=9F=99=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .bumpedrc | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.bumpedrc b/.bumpedrc
index a3983285e..04826e51e 100644
--- a/.bumpedrc
+++ b/.bumpedrc
@@ -31,7 +31,7 @@ plugins:
 
     'Publishing tag at Github':
       plugin: 'bumped-terminal'
-      command: 'git tag $newVersion && git push && git push --tags'
+      command: 'git tag $newVersion && git push origin dev && git push --tags origin dev'
 
     'Publishing at NPM':
       plugin: 'bumped-terminal'

From 9bed502df00839c129a88feb4f3e20ae8cf333f8 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 3 Sep 2016 16:46:53 +0200
Subject: [PATCH 0794/1024] Release 1.2.0

---
 package.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index ab489c998..4e90f9159 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "react-toolbox",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "homepage": "http://www.react-toolbox.com/",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "main": "./lib",
   "author": {
     "name": "React Toolbox Team",
@@ -25,8 +25,8 @@
     "url": "git+https://github.com/react-toolbox/react-toolbox.git"
   },
   "bugs": {
-    "url": "https://github.com/react-toolbox/react-toolbox/issues",
-    "email": "issues@react-toolbox.com"
+    "email": "issues@react-toolbox.com",
+    "url": "https://github.com/react-toolbox/react-toolbox/issues"
   },
   "keywords": [
     "components",

From 48c04c0f3781ae50aaf0c52b8f2e28a7008f4a3c Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 5 Sep 2016 20:28:24 +0200
Subject: [PATCH 0795/1024] Fix #768

---
 components/ripple/Ripple.js | 26 +++++++++++---------------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/components/ripple/Ripple.js b/components/ripple/Ripple.js
index e919e18fb..cbf0d6b9a 100644
--- a/components/ripple/Ripple.js
+++ b/components/ripple/Ripple.js
@@ -240,21 +240,17 @@ const rippleFactory = (options = {}) => {
       }
 
       render () {
-        if (!this.props.ripple) {
-          return <ComposedComponent {...this.props} />;
-        } else {
-          const { ripples } = this.state;
-          const {
-            ripple, onRippleEnded, rippleCentered, rippleMultiple, rippleSpread, //eslint-disable-line no-unused-vars
-            children, rippleClassName: className, ...other
-          } = this.props;
-          return (
-            <ComposedComponent {...other} onMouseDown={this.handleMouseDown} onTouchStart={this.handleTouchStart}>
-              {children ? children : null}
-              {Object.keys(ripples).map(key => this.renderRipple(key, className, ripples[key]))}
-            </ComposedComponent>
-          );
-        }
+        const { ripples } = this.state;
+        const { onRippleEnded, rippleCentered, rippleMultiple, rippleSpread, // eslint-disable-line
+          children, ripple, rippleClassName, ...other } = this.props;
+
+        if (!ripple) return <ComposedComponent children={children} {...other} />;
+        return (
+          <ComposedComponent {...other} onMouseDown={this.handleMouseDown} onTouchStart={this.handleTouchStart}>
+            {children}
+            {Object.keys(ripples).map(key => this.renderRipple(key, rippleClassName, ripples[key]))}
+          </ComposedComponent>
+        );
       }
     }
 

From 199befece32ab17c91ca9249e91c24cc2271ed81 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 5 Sep 2016 22:36:24 +0200
Subject: [PATCH 0796/1024] Change active tab display to flex

---
 components/tabs/theme.scss |  2 +-
 lib/ripple/Ripple.js       | 53 +++++++++++++++-----------------------
 lib/tabs/theme.scss        |  2 +-
 3 files changed, 23 insertions(+), 34 deletions(-)

diff --git a/components/tabs/theme.scss b/components/tabs/theme.scss
index d5f25367e..0f5eb602d 100644
--- a/components/tabs/theme.scss
+++ b/components/tabs/theme.scss
@@ -77,7 +77,7 @@
     display: none;
   }
   &.active {
-    display: block;
+    display: flex;
   }
 }
 
diff --git a/lib/ripple/Ripple.js b/lib/ripple/Ripple.js
index 49e562e0e..9d728173d 100644
--- a/lib/ripple/Ripple.js
+++ b/lib/ripple/Ripple.js
@@ -4,8 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
-
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -334,36 +332,27 @@ var rippleFactory = function rippleFactory() {
         value: function render() {
           var _this4 = this;
 
-          if (!this.props.ripple) {
-            return _react2.default.createElement(ComposedComponent, this.props);
-          } else {
-            var _ret3 = function () {
-              var ripples = _this4.state.ripples;
-              var _props2 = _this4.props;
-              var ripple = _props2.ripple;
-              var onRippleEnded = _props2.onRippleEnded;
-              var rippleCentered = _props2.rippleCentered;
-              var rippleMultiple = _props2.rippleMultiple;
-              var rippleSpread = _props2.rippleSpread;
-              var children = _props2.children;
-              var className = _props2.rippleClassName;
-
-              var other = _objectWithoutProperties(_props2, ['ripple', 'onRippleEnded', 'rippleCentered', 'rippleMultiple', 'rippleSpread', 'children', 'rippleClassName']);
-
-              return {
-                v: _react2.default.createElement(
-                  ComposedComponent,
-                  _extends({}, other, { onMouseDown: _this4.handleMouseDown, onTouchStart: _this4.handleTouchStart }),
-                  children ? children : null,
-                  Object.keys(ripples).map(function (key) {
-                    return _this4.renderRipple(key, className, ripples[key]);
-                  })
-                )
-              };
-            }();
-
-            if ((typeof _ret3 === 'undefined' ? 'undefined' : _typeof(_ret3)) === "object") return _ret3.v;
-          }
+          var ripples = this.state.ripples;
+          var _props2 = this.props;
+          var onRippleEnded = _props2.onRippleEnded;
+          var rippleCentered = _props2.rippleCentered;
+          var rippleMultiple = _props2.rippleMultiple;
+          var rippleSpread = _props2.rippleSpread;
+          var children = _props2.children;
+          var ripple = _props2.ripple;
+          var rippleClassName = _props2.rippleClassName;
+
+          var other = _objectWithoutProperties(_props2, ['onRippleEnded', 'rippleCentered', 'rippleMultiple', 'rippleSpread', 'children', 'ripple', 'rippleClassName']);
+
+          if (!ripple) return _react2.default.createElement(ComposedComponent, _extends({ children: children }, other));
+          return _react2.default.createElement(
+            ComposedComponent,
+            _extends({}, other, { onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart }),
+            children,
+            Object.keys(ripples).map(function (key) {
+              return _this4.renderRipple(key, rippleClassName, ripples[key]);
+            })
+          );
         }
       }]);
 
diff --git a/lib/tabs/theme.scss b/lib/tabs/theme.scss
index d5f25367e..0f5eb602d 100644
--- a/lib/tabs/theme.scss
+++ b/lib/tabs/theme.scss
@@ -77,7 +77,7 @@
     display: none;
   }
   &.active {
-    display: block;
+    display: flex;
   }
 }
 

From bbee9ef7c144c793c76190622bc7fa9fa9fa9ad7 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 6 Sep 2016 22:19:28 +0200
Subject: [PATCH 0797/1024] Fix #770

---
 components/autocomplete/Autocomplete.js | 2 +-
 lib/autocomplete/Autocomplete.js        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index 388be95eb..8002715b8 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -163,7 +163,7 @@ const factory = (Chip, Input) => {
 
    suggestions () {
      let suggest = new Map();
-     const rawQuery = this.state.query || this.props.multiple ? '' : this.props.value;
+     const rawQuery = this.state.query || (this.props.multiple ? '' : this.props.value);
      const query = (rawQuery || '').toLowerCase().trim();
      const values = this.values();
      const source = this.source();
diff --git a/lib/autocomplete/Autocomplete.js b/lib/autocomplete/Autocomplete.js
index 22c958147..dfb005d15 100644
--- a/lib/autocomplete/Autocomplete.js
+++ b/lib/autocomplete/Autocomplete.js
@@ -174,7 +174,7 @@ var factory = function factory(Chip, Input) {
       key: 'suggestions',
       value: function suggestions() {
         var suggest = new Map();
-        var rawQuery = this.state.query || this.props.multiple ? '' : this.props.value;
+        var rawQuery = this.state.query || (this.props.multiple ? '' : this.props.value);
         var query = (rawQuery || '').toLowerCase().trim();
         var values = this.values();
         var source = this.source();

From 3b5c6bd62f3f58a39e1e332b49a66c52513958d7 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 6 Sep 2016 22:21:55 +0200
Subject: [PATCH 0798/1024] Release 1.2.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4e90f9159..ab1f791ee 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "react-toolbox",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "homepage": "http://www.react-toolbox.com/",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "main": "./lib",
   "author": {
     "name": "React Toolbox Team",

From 405c23e778421ea1c264675ab9f1aed1c490b194 Mon Sep 17 00:00:00 2001
From: Alex Cornejo <acornejo@gmail.com>
Date: Tue, 6 Sep 2016 23:32:32 -0700
Subject: [PATCH 0799/1024] fix active year style in date picker.

The active year font-size didn't have the units set (which means it
didn't work). Also to better match the material design spec the
font-weight for active years is set to semi-bold.
---
 components/date_picker/_config.scss | 2 +-
 components/date_picker/theme.scss   | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/date_picker/_config.scss b/components/date_picker/_config.scss
index ba9155399..62acee078 100644
--- a/components/date_picker/_config.scss
+++ b/components/date_picker/_config.scss
@@ -21,7 +21,7 @@ $calendar-primary-contrast-color: $calendar-primary-contrast !default;
 $calendar-primary-hover-color: rgba($calendar-primary, .21) !default;
 $calendar-arrows-color: $palette-grey-600 !default;
 $calendar-arrows-font-size: 2 * $unit !default;
-$calendar-year-font-size: 2.4 !default;
+$calendar-year-font-size: 2.4 * $unit !default;
 $calendar-day-font-size: 1.3 * $unit !default;
 $calendar-day-disable-opacity: 0.25 !default;
 $calendar-row-height: 3 * $unit !default;
diff --git a/components/date_picker/theme.scss b/components/date_picker/theme.scss
index ef3c6b67f..a1ee39156 100644
--- a/components/date_picker/theme.scss
+++ b/components/date_picker/theme.scss
@@ -101,6 +101,7 @@
     cursor: pointer;
     &.active {
       font-size: $calendar-year-font-size;
+      font-weight: $font-weight-semi-bold;
       color: $calendar-primary-color;
     }
   }

From 3c6273e95b4f9a07e3967e863b79268f4663c939 Mon Sep 17 00:00:00 2001
From: Alex Cornejo <acornejo@gmail.com>
Date: Tue, 6 Sep 2016 23:45:04 -0700
Subject: [PATCH 0800/1024] minor style tweak in spec.

Add overflow-x: scroll to the sections, since when testing the spec in
mobile phones the table component doesn't fit.
---
 spec/style.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/spec/style.scss b/spec/style.scss
index ac92d051e..87422bf71 100644
--- a/spec/style.scss
+++ b/spec/style.scss
@@ -146,3 +146,7 @@ $offset: 1.8 * $unit;
     height: 40px;
   }
 }
+
+section {
+    overflow-x: scroll;
+}

From 5795b415610fd172494b43207dc75681180bd2ba Mon Sep 17 00:00:00 2001
From: Per Bergqwist <pbergqwist@contractor.ea.com>
Date: Wed, 7 Sep 2016 09:47:07 +0200
Subject: [PATCH 0801/1024] Fix import warning using npm types and typescript

---
 components/index.d.ts | 7 ++++---
 lib/index.d.ts        | 7 ++++---
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/components/index.d.ts b/components/index.d.ts
index 7113d389f..63841d434 100644
--- a/components/index.d.ts
+++ b/components/index.d.ts
@@ -1,4 +1,5 @@
-export declare namespace __ReactToolbox {
+import * as React from "react";
+export declare namespace ReactToolbox {
   interface Props {
     /**
      * Set a class for the root component.
@@ -48,8 +49,8 @@ export declare namespace __ReactToolbox {
     /**
      * Set inline style for the root component.
      */
-    style?: __React.CSSProperties;
+    style?: React.CSSProperties;
   }
 }
 
-export default __ReactToolbox;
+export default ReactToolbox;
diff --git a/lib/index.d.ts b/lib/index.d.ts
index 7113d389f..63841d434 100644
--- a/lib/index.d.ts
+++ b/lib/index.d.ts
@@ -1,4 +1,5 @@
-export declare namespace __ReactToolbox {
+import * as React from "react";
+export declare namespace ReactToolbox {
   interface Props {
     /**
      * Set a class for the root component.
@@ -48,8 +49,8 @@ export declare namespace __ReactToolbox {
     /**
      * Set inline style for the root component.
      */
-    style?: __React.CSSProperties;
+    style?: React.CSSProperties;
   }
 }
 
-export default __ReactToolbox;
+export default ReactToolbox;

From f0774034b5e29f622ec84201223ceac2d96a8ef0 Mon Sep 17 00:00:00 2001
From: Aleksander Vognild Burkow <aleksanderburkow@gmail.com>
Date: Wed, 7 Sep 2016 13:11:56 +0200
Subject: [PATCH 0802/1024] Pass down theme from Card title to nested Avatar

The current approach to theme the nested avatar was by adding a div:first-child selector in the .cardTitle class.
A bit less than ergonomic.
---
 components/card/CardTitle.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/card/CardTitle.js b/components/card/CardTitle.js
index bbeda1945..87cd358e7 100644
--- a/components/card/CardTitle.js
+++ b/components/card/CardTitle.js
@@ -13,7 +13,7 @@ const factory = (Avatar) => {
 
     return (
       <div className={classes} {...other}>
-        {typeof avatar === 'string' ? <Avatar image={avatar} /> : avatar}
+        {typeof avatar === 'string' ? <Avatar image={avatar} theme={theme} /> : avatar}
         <div>
           {title && <h5 className={theme.title}>{title}</h5>}
           {children && typeof children === 'string' && (

From ac8b6d61a7c1304a8bffd7f43fd9f07d8046748c Mon Sep 17 00:00:00 2001
From: Antony Lau <laucheukhim@gmail.com>
Date: Wed, 7 Sep 2016 23:46:44 +0800
Subject: [PATCH 0803/1024] Replace onMouseDown with onClick in DatePicker and
 TimePicker

---
 components/date_picker/DatePicker.js | 6 ++++--
 components/time_picker/TimePicker.js | 6 ++++--
 lib/date_picker/DatePicker.js        | 6 ++++--
 lib/time_picker/TimePicker.js        | 6 ++++--
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/components/date_picker/DatePicker.js b/components/date_picker/DatePicker.js
index 418d6fdac..b692a58cf 100644
--- a/components/date_picker/DatePicker.js
+++ b/components/date_picker/DatePicker.js
@@ -35,6 +35,7 @@ const factory = (Input, DatePickerDialog) => {
       onChange: PropTypes.func,
       onEscKeyDown: PropTypes.func,
       onKeyPress: PropTypes.func,
+      onClick: PropTypes.func,
       onOverlayClick: PropTypes.func,
       readonly: PropTypes.bool,
       sundayFirstDayOfWeek: React.PropTypes.bool,
@@ -77,9 +78,10 @@ const factory = (Input, DatePickerDialog) => {
       this.setState({active: false});
     };
 
-    handleInputMouseDown = (event) => {
+    handleInputClick = (event) => {
       events.pauseEvent(event);
       this.setState({active: true});
+      if (this.props.onClick) this.props.onClick(event);
     };
 
     handleInputKeyPress = (event) => {
@@ -116,7 +118,7 @@ const factory = (Input, DatePickerDialog) => {
             name={this.props.name}
             onFocus={this.handleInputFocus}
             onKeyPress={this.handleInputKeyPress}
-            onMouseDown={this.handleInputMouseDown}
+            onClick={this.handleInputClick}
             readOnly
             type='text'
             value={formattedDate}
diff --git a/components/time_picker/TimePicker.js b/components/time_picker/TimePicker.js
index dcef30bab..c651377d5 100644
--- a/components/time_picker/TimePicker.js
+++ b/components/time_picker/TimePicker.js
@@ -21,6 +21,7 @@ const factory = (TimePickerDialog, Input) => {
       onChange: PropTypes.func,
       onEscKeyDown: PropTypes.func,
       onKeyPress: PropTypes.func,
+      onClick: PropTypes.func,
       onOverlayClick: PropTypes.func,
       readonly: PropTypes.bool,
       theme: PropTypes.shape({
@@ -59,9 +60,10 @@ const factory = (TimePickerDialog, Input) => {
       this.setState({active: false});
     };
 
-    handleInputMouseDown = (event) => {
+    handleInputClick = (event) => {
       events.pauseEvent(event);
       this.setState({active: true});
+      if (this.props.onClick) this.props.onClick(event);
     };
 
     handleInputKeyPress = (event) => {
@@ -93,7 +95,7 @@ const factory = (TimePickerDialog, Input) => {
             label={this.props.label}
             name={this.props.name}
             onKeyPress={this.handleInputKeyPress}
-            onMouseDown={this.handleInputMouseDown}
+            onClick={this.handleInputClick}
             readOnly
             type='text'
             value={formattedTime}
diff --git a/lib/date_picker/DatePicker.js b/lib/date_picker/DatePicker.js
index c029e7b20..c969479b4 100644
--- a/lib/date_picker/DatePicker.js
+++ b/lib/date_picker/DatePicker.js
@@ -86,9 +86,10 @@ var factory = function factory(Input, DatePickerDialog) {
       }, _this.handleInputBlur = function (event) {
         _events2.default.pauseEvent(event);
         _this.setState({ active: false });
-      }, _this.handleInputMouseDown = function (event) {
+      }, _this.handleInputClick = function (event) {
         _events2.default.pauseEvent(event);
         _this.setState({ active: true });
+        if (_this.props.onClick) _this.props.onClick(event);
       }, _this.handleInputKeyPress = function (event) {
         if (event.charCode === 13) {
           _events2.default.pauseEvent(event);
@@ -143,7 +144,7 @@ var factory = function factory(Input, DatePickerDialog) {
             name: this.props.name,
             onFocus: this.handleInputFocus,
             onKeyPress: this.handleInputKeyPress,
-            onMouseDown: this.handleInputMouseDown,
+            onClick: this.handleInputClick,
             readOnly: true,
             type: 'text',
             value: formattedDate
@@ -187,6 +188,7 @@ var factory = function factory(Input, DatePickerDialog) {
     onChange: _react.PropTypes.func,
     onEscKeyDown: _react.PropTypes.func,
     onKeyPress: _react.PropTypes.func,
+    onClick: _react.PropTypes.func,
     onOverlayClick: _react.PropTypes.func,
     readonly: _react.PropTypes.bool,
     sundayFirstDayOfWeek: _react2.default.PropTypes.bool,
diff --git a/lib/time_picker/TimePicker.js b/lib/time_picker/TimePicker.js
index d4dc2e755..f44cc0402 100644
--- a/lib/time_picker/TimePicker.js
+++ b/lib/time_picker/TimePicker.js
@@ -78,9 +78,10 @@ var factory = function factory(TimePickerDialog, Input) {
       }, _this.handleInputBlur = function (event) {
         _events2.default.pauseEvent(event);
         _this.setState({ active: false });
-      }, _this.handleInputMouseDown = function (event) {
+      }, _this.handleInputClick = function (event) {
         _events2.default.pauseEvent(event);
         _this.setState({ active: true });
+        if (_this.props.onClick) _this.props.onClick(event);
       }, _this.handleInputKeyPress = function (event) {
         if (event.charCode === 13) {
           _events2.default.pauseEvent(event);
@@ -125,7 +126,7 @@ var factory = function factory(TimePickerDialog, Input) {
             label: this.props.label,
             name: this.props.name,
             onKeyPress: this.handleInputKeyPress,
-            onMouseDown: this.handleInputMouseDown,
+            onClick: this.handleInputClick,
             readOnly: true,
             type: 'text',
             value: formattedTime
@@ -160,6 +161,7 @@ var factory = function factory(TimePickerDialog, Input) {
     onChange: _react.PropTypes.func,
     onEscKeyDown: _react.PropTypes.func,
     onKeyPress: _react.PropTypes.func,
+    onClick: _react.PropTypes.func,
     onOverlayClick: _react.PropTypes.func,
     readonly: _react.PropTypes.bool,
     theme: _react.PropTypes.shape({

From b8d59f7b4cfdc373f796df8da5173718fd9f11ef Mon Sep 17 00:00:00 2001
From: Maksim <kodermax@gmail.com>
Date: Mon, 12 Sep 2016 13:34:16 +0300
Subject: [PATCH 0804/1024] Russian locale

---
 components/utils/time.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/components/utils/time.js b/components/utils/time.js
index 6b75b2fbe..3373e7d34 100644
--- a/components/utils/time.js
+++ b/components/utils/time.js
@@ -110,6 +110,13 @@ const dateLocales = {
     weekdays: 'dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi'.split('_'),
     weekdaysShort: 'dim._lun._mar._mer._jeu._ven._sam.'.split('_'),
     weekdaysLetter: []
+  },
+  ru: {
+    months: 'Январь_Февраль_Март_Апрель_Май_Июнь_Июльy_Август_Сентябрь_Октябрь_Ноябрь_Декабрь'.split('_'),
+    monthsShort: 'Янв_Фев_Мар_Апр_Май_Июн_Июл_Авг_Сен_Окт_Ноя_Дек'.split('_'),
+    weekdays: 'Воскресенье_Понедельник_Вторник_Среда_Четверг_Пятница_Суббота'.split('_'),
+    weekdaysShort: 'Вс_Пн_Вт_Ср_Чт_Пт_Сб'.split('_'),
+    weekdaysLetter: []
   }
 };
 const time = {

From 9edc8bd32d87fe640e4439ae90f09b3d7ceaacee Mon Sep 17 00:00:00 2001
From: Nathan Ducrey <nducrey@carlipa.com>
Date: Wed, 14 Sep 2016 10:25:38 +0200
Subject: [PATCH 0805/1024] Add onBlur and onFocus props in Autocomplete
 component

---
 components/autocomplete/Autocomplete.js | 4 ++++
 components/autocomplete/readme.md       | 2 ++
 2 files changed, 6 insertions(+)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index 8002715b8..fae682080 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -23,7 +23,9 @@ const factory = (Chip, Input) => {
      error: PropTypes.string,
      label: PropTypes.string,
      multiple: PropTypes.bool,
+     onBlur: PropTypes.func,
      onChange: PropTypes.func,
+     onFocus: PropTypes.func,
      selectedPosition: PropTypes.oneOf(['above', 'below']),
      showSuggestionsWhenValueIsSet: PropTypes.bool,
      source: PropTypes.any,
@@ -91,6 +93,7 @@ const factory = (Chip, Input) => {
 
    handleQueryBlur = () => {
      if (this.state.focus) this.setState({focus: false});
+     if (this.props.onBlur) this.props.onBlur();
    };
 
    handleQueryChange = (value) => {
@@ -100,6 +103,7 @@ const factory = (Chip, Input) => {
    handleQueryFocus = () => {
      this.refs.suggestions.scrollTop = 0;
      this.setState({active: '', focus: true});
+     if (this.props.onFocus) this.props.onFocus();
    };
 
    handleQueryKeyDown = (event) => {
diff --git a/components/autocomplete/readme.md b/components/autocomplete/readme.md
index e6f1dfc94..79b2fdee6 100644
--- a/components/autocomplete/readme.md
+++ b/components/autocomplete/readme.md
@@ -50,7 +50,9 @@ If you want to provide a theme via context, the component key is `RTAutocomplete
 | `error`             | `String`               |                 | Sets the error string for the internal input element.|
 | `label`             | `String`               |                 | The text string to use for the floating label element.|
 | `multiple`          | `Bool`                 | `true`          | If true, component can hold multiple values.|
+| `onBlur`            | `Function`             |                 | Callback function that is fired when component is blurred.|
 | `onChange`          | `Function`             |                 | Callback function that is fired when the components's value changes.|
+| `onFocus`           | `Function`             |                 | Callback function that is fired when component is focused.|
 | `source`            | `Object` or `Array`    |                 | Object of key/values or array representing all items suggested. |
 | `selectedPosition`  | `String`               |  `above`        | Determines if the selected list is shown above or below input. It can be `above` or `below`. |
 | `showSuggestionsWhenValueIsSet` | `Bool`     | `false`         | If true, the list of suggestions will not be filtered when a value is selected, until the query is modified. |

From df97407ebf89524af69b584ce72cfbbbbc328096 Mon Sep 17 00:00:00 2001
From: Stian Jensen <stianjensen2000@gmail.com>
Date: Wed, 14 Sep 2016 16:18:23 +0200
Subject: [PATCH 0806/1024] Correct docs for CardTitle component

`large` is applied when the CardTitle has no avatar, not the other way around.
---
 components/card/readme.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/card/readme.md b/components/card/readme.md
index 0ecb41ac7..5b2049515 100644
--- a/components/card/readme.md
+++ b/components/card/readme.md
@@ -74,8 +74,8 @@ A versatile title block that can be used in various places on the card, includin
 | Name     | Description|
 |:---------|:-----------|
 | `cardTitle` | Class used for the root element.|
-| `large` | Added to the root element when the card has avatar.|
-| `small` | Added to the root element when the card has no avatar.|
+| `large` | Added to the root element when the card has no avatar.|
+| `small` | Added to the root element when the card has avatar.|
 | `subtitle` | Added to the subtitle element.|
 | `title` | Added to the title element.|
 

From bcb091bbf9fc21d764ca6fa697c344de4f23b253 Mon Sep 17 00:00:00 2001
From: James Browne <james@dynamic.do>
Date: Thu, 15 Sep 2016 17:13:22 +0100
Subject: [PATCH 0807/1024] Makes sure that overlay: hidden is removed from the
 body tag when an overlay is closed in IE11.

---
 components/overlay/Overlay.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/overlay/Overlay.js b/components/overlay/Overlay.js
index e2ff39187..9bf49b962 100644
--- a/components/overlay/Overlay.js
+++ b/components/overlay/Overlay.js
@@ -33,7 +33,7 @@ class Overlay extends Component {
 
   componentWillUpdate (nextProps) {
     if (nextProps.active && !this.props.active) document.body.style.overflow = 'hidden';
-    if (!nextProps.active && this.props.active) document.body.style.overflow = null;
+    if (!nextProps.active && this.props.active) document.body.style.overflow = "";
   }
 
   componentDidUpdate () {
@@ -43,7 +43,7 @@ class Overlay extends Component {
   }
 
   componentWillUnmount () {
-    document.body.style.overflow = null;
+    document.body.style.overflow = "";
     if (this.escKeyListener) {
       document.body.removeEventListener('keydown', this.handleEscKey);
       this.escKeyListener = null;

From 02cd7b57cffe2a4e3d568c7f00e4d1f8ad78be55 Mon Sep 17 00:00:00 2001
From: James Browne <james@dynamic.do>
Date: Fri, 16 Sep 2016 09:49:30 +0100
Subject: [PATCH 0808/1024] Changes double quotes to single quotes

---
 components/overlay/Overlay.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/overlay/Overlay.js b/components/overlay/Overlay.js
index 9bf49b962..4bbe09909 100644
--- a/components/overlay/Overlay.js
+++ b/components/overlay/Overlay.js
@@ -33,7 +33,7 @@ class Overlay extends Component {
 
   componentWillUpdate (nextProps) {
     if (nextProps.active && !this.props.active) document.body.style.overflow = 'hidden';
-    if (!nextProps.active && this.props.active) document.body.style.overflow = "";
+    if (!nextProps.active && this.props.active) document.body.style.overflow = '';
   }
 
   componentDidUpdate () {
@@ -43,7 +43,7 @@ class Overlay extends Component {
   }
 
   componentWillUnmount () {
-    document.body.style.overflow = "";
+    document.body.style.overflow = '';
     if (this.escKeyListener) {
       document.body.removeEventListener('keydown', this.handleEscKey);
       this.escKeyListener = null;

From 67d4628e8200a28fd9885e5ea626759c9a903880 Mon Sep 17 00:00:00 2001
From: Alex Cornejo <acornejo@gmail.com>
Date: Thu, 8 Sep 2016 23:40:22 -0700
Subject: [PATCH 0809/1024] appbar: fonticon -> iconbutton

---
 components/app_bar/AppBar.js  | 18 ++++++++++--------
 components/app_bar/index.js   |  4 ++--
 components/app_bar/readme.md  |  4 ++--
 components/app_bar/theme.scss |  6 ++----
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/components/app_bar/AppBar.js b/components/app_bar/AppBar.js
index de74eac42..246dbcd56 100644
--- a/components/app_bar/AppBar.js
+++ b/components/app_bar/AppBar.js
@@ -2,9 +2,9 @@ import React, { PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
 import { APP_BAR } from '../identifiers.js';
-import InjectedFontIcon from '../font_icon/FontIcon.js';
+import InjectIconButton from '../button/IconButton.js';
 
-const factory = (FontIcon) => {
+const factory = (IconButton) => {
   const AppBar = ({ children, leftIcon, onLeftIconClick, onRightIconClick, rightIcon, theme, title, ...props }) => {
     const className = classnames(theme.appBar, {
       [theme.fixed]: props.fixed,
@@ -13,17 +13,19 @@ const factory = (FontIcon) => {
 
     return (
       <header className={className} data-react-toolbox='app-bar'>
-        {leftIcon && <FontIcon
+        {leftIcon && <IconButton
+          inverse
           className={classnames(theme.leftIcon)}
           onClick={onLeftIconClick}
-          value={leftIcon} />
+          icon={leftIcon} />
         }
         {title && <h1 className={classnames(theme.title)}>{title}</h1>}
         {children}
-        {rightIcon && <FontIcon
+        {rightIcon && <IconButton
+          inverse
           className={classnames(theme.rightIcon)}
           onClick={onRightIconClick}
-          value={rightIcon} />
+          icon={rightIcon} />
         }
       </header>
     );
@@ -64,7 +66,7 @@ const factory = (FontIcon) => {
   return AppBar;
 };
 
-const AppBar = factory(InjectedFontIcon);
-export default themr(APP_BAR, null)(AppBar);
+const AppBar = factory(InjectIconButton);
+export default themr(APP_BAR)(AppBar);
 export { factory as appBarFactory };
 export { AppBar };
diff --git a/components/app_bar/index.js b/components/app_bar/index.js
index 4f6f17f84..ff38bf7cc 100644
--- a/components/app_bar/index.js
+++ b/components/app_bar/index.js
@@ -1,10 +1,10 @@
 import { themr } from 'react-css-themr';
 import { APP_BAR } from '../identifiers.js';
 import { appBarFactory } from './AppBar.js';
-import FontIcon from '../font_icon/FontIcon.js';
+import { IconButton } from '../button';
 import theme from './theme.scss';
 
-const AppBar = appBarFactory(FontIcon);
+const AppBar = appBarFactory(IconButton);
 const ThemedAppBar = themr(APP_BAR, theme)(AppBar);
 
 export default ThemedAppBar;
diff --git a/components/app_bar/readme.md b/components/app_bar/readme.md
index 5cb3c2792..78989e89f 100644
--- a/components/app_bar/readme.md
+++ b/components/app_bar/readme.md
@@ -26,9 +26,9 @@ The `AppBar` component provides properties for the common use cases of `title`,
 | `flat`             | `Bool`     | `false` | If true, the AppBar shows a shadow.|
 | `theme`            | `Object`   | `null`  | Classnames object defining the component style.|
 | `title`            | `String`   | `null`  | Title used for the appbar.|
-| `leftIcon`         | `String`   | `null`  | Left icon.|
+| `leftIcon`         | `String|Element`   | `null`  | Left icon.|
 | `onLeftIconClick`  | `Function` | `null`  | Called on left icon click event.|
-| `rightIcon`        | `String`   | `null`  | Right icon.|
+| `rightIcon`        | `String|Element`   | `null`  | Right icon.|
 | `onRightIconClick` | `Function` | `null`  | Called on right icon click event.|
 
 ## Theme
diff --git a/components/app_bar/theme.scss b/components/app_bar/theme.scss
index f0d55d0c4..4c4f93d70 100644
--- a/components/app_bar/theme.scss
+++ b/components/app_bar/theme.scss
@@ -47,13 +47,11 @@
   }
 
   .leftIcon {
-    padding: 1.2 * $unit 1.2 * $unit 1.2 * $unit 0;
-    text-align: left;
+    margin-left: -1.2 * $unit;
   }
 
   .rightIcon {
-    padding: 1.2 * $unit 0 1.2 * $unit 1.2 * $unit;
     margin-left: auto;
-    text-align: right;
+    margin-right: -1.2 * $unit;
   }
 }

From 04215a58457eac35b509736d8daaf552c2e319a2 Mon Sep 17 00:00:00 2001
From: Tucker Connelly <web@tuckerconnelly.com>
Date: Fri, 9 Sep 2016 14:22:24 -0400
Subject: [PATCH 0810/1024] Use contentEditable for editable table cells

---
 components/table/TableRow.js        | 28 ++++++++++++++++++++--------
 lib/autocomplete/Autocomplete.js    | 20 ++++++++++----------
 lib/button/Button.js                |  4 ++--
 lib/button/IconButton.js            |  4 ++--
 lib/checkbox/Checkbox.js            |  4 ++--
 lib/date_picker/Calendar.js         |  4 ++--
 lib/date_picker/CalendarDay.js      |  4 ++--
 lib/date_picker/CalendarMonth.js    |  4 ++--
 lib/date_picker/DatePicker.js       |  4 ++--
 lib/date_picker/DatePickerDialog.js |  4 ++--
 lib/date_picker/_config.scss        |  2 +-
 lib/date_picker/theme.scss          |  1 +
 lib/dropdown/Dropdown.js            |  4 ++--
 lib/form/Form.js                    |  4 ++--
 lib/hoc/ActivableRenderer.js        |  4 ++--
 lib/hoc/Portal.js                   |  2 +-
 lib/input/Input.js                  |  4 ++--
 lib/list/List.js                    |  2 +-
 lib/list/ListItem.js                |  4 ++--
 lib/list/ListItemContent.js         |  2 +-
 lib/menu/IconMenu.js                |  4 ++--
 lib/menu/Menu.js                    |  4 ++--
 lib/menu/MenuItem.js                |  4 ++--
 lib/overlay/Overlay.js              |  2 +-
 lib/progress_bar/ProgressBar.js     |  2 +-
 lib/radio/RadioButton.js            |  4 ++--
 lib/radio/RadioGroup.js             |  4 ++--
 lib/ripple/Ripple.js                | 16 ++++++++--------
 lib/slider/Slider.js                |  4 ++--
 lib/snackbar/Snackbar.js            |  2 +-
 lib/switch/Switch.js                |  4 ++--
 lib/table/Table.js                  |  4 ++--
 lib/table/TableRow.js               | 28 ++++++++++++++++++++--------
 lib/tabs/Tab.js                     |  4 ++--
 lib/tabs/TabContent.js              |  2 +-
 lib/tabs/Tabs.js                    |  4 ++--
 lib/tabs/__tests__/index.spec.js    |  2 +-
 lib/time_picker/Clock.js            |  4 ++--
 lib/time_picker/ClockFace.js        |  4 ++--
 lib/time_picker/ClockHand.js        |  4 ++--
 lib/time_picker/ClockHours.js       |  4 ++--
 lib/time_picker/ClockMinutes.js     |  4 ++--
 lib/time_picker/TimePicker.js       |  4 ++--
 lib/time_picker/TimePickerDialog.js |  4 ++--
 lib/tooltip/Tooltip.js              | 12 ++++++------
 45 files changed, 134 insertions(+), 109 deletions(-)

diff --git a/components/table/TableRow.js b/components/table/TableRow.js
index 00822dcc2..3ded2d011 100644
--- a/components/table/TableRow.js
+++ b/components/table/TableRow.js
@@ -62,14 +62,26 @@ const factory = (Checkbox) => {
       const inputType = utils.inputTypeForPrototype(this.props.model[key].type);
       const inputValue = utils.prepareValueForInput(value, inputType);
       const checked = inputType === 'checkbox' && value ? true : null;
-      return (
-        <input
-          checked={checked}
-          onChange={this.handleInputChange.bind(null, index, key, inputType)}
-          type={inputType}
-          value={inputValue}
-        />
-      );
+
+      if (inputType === 'text') {
+        return (
+          <div
+            contentEditable
+            suppressContentEditableWarning
+            onInput={this.handleInputChange.bind(null, index, key, inputType)}>
+            {inputValue}
+          </div>
+        );
+      } else {
+        return (
+          <input
+            checked={checked}
+            onChange={this.handleInputChange.bind(null, index, key, inputType)}
+            type={inputType}
+            value={inputValue}
+          />
+        );
+      }
     }
 
     render () {
diff --git a/lib/autocomplete/Autocomplete.js b/lib/autocomplete/Autocomplete.js
index dfb005d15..aed49f61e 100644
--- a/lib/autocomplete/Autocomplete.js
+++ b/lib/autocomplete/Autocomplete.js
@@ -64,7 +64,7 @@ var factory = function factory(Chip, Input) {
     _inherits(Autocomplete, _Component);
 
     function Autocomplete() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -74,7 +74,7 @@ var factory = function factory(Chip, Input) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Autocomplete)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Autocomplete.__proto__ || Object.getPrototypeOf(Autocomplete)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         direction: _this.props.direction,
         focus: false,
         showAllSuggestions: _this.props.showSuggestionsWhenValueIsSet,
@@ -332,11 +332,11 @@ var factory = function factory(Chip, Input) {
         var _this2 = this;
 
         if (this.props.multiple) {
-          var selectedItems = [].concat(_toConsumableArray(this.values())).map(function (_ref) {
-            var _ref2 = _slicedToArray(_ref, 2);
+          var selectedItems = [].concat(_toConsumableArray(this.values())).map(function (_ref2) {
+            var _ref3 = _slicedToArray(_ref2, 2);
 
-            var key = _ref2[0];
-            var value = _ref2[1];
+            var key = _ref3[0];
+            var value = _ref3[1];
 
             return _react2.default.createElement(
               Chip,
@@ -364,11 +364,11 @@ var factory = function factory(Chip, Input) {
 
         var theme = this.props.theme;
 
-        var suggestions = [].concat(_toConsumableArray(this.suggestions())).map(function (_ref3) {
-          var _ref4 = _slicedToArray(_ref3, 2);
+        var suggestions = [].concat(_toConsumableArray(this.suggestions())).map(function (_ref4) {
+          var _ref5 = _slicedToArray(_ref4, 2);
 
-          var key = _ref4[0];
-          var value = _ref4[1];
+          var key = _ref5[0];
+          var value = _ref5[1];
 
           var className = (0, _classnames5.default)(theme.suggestion, _defineProperty({}, theme.active, _this3.state.active === key));
           return _react2.default.createElement(
diff --git a/lib/button/Button.js b/lib/button/Button.js
index 2b9e424f5..b38aeb3b7 100644
--- a/lib/button/Button.js
+++ b/lib/button/Button.js
@@ -46,7 +46,7 @@ var factory = function factory(ripple, FontIcon) {
     _inherits(Button, _Component);
 
     function Button() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -56,7 +56,7 @@ var factory = function factory(ripple, FontIcon) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Button)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Button.__proto__ || Object.getPrototypeOf(Button)).call.apply(_ref, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
         _this.refs.button.blur();
         if (_this.props.onMouseUp) _this.props.onMouseUp(event);
       }, _this.handleMouseLeave = function (event) {
diff --git a/lib/button/IconButton.js b/lib/button/IconButton.js
index 98f6331b6..40f22fd91 100644
--- a/lib/button/IconButton.js
+++ b/lib/button/IconButton.js
@@ -46,7 +46,7 @@ var factory = function factory(ripple, FontIcon) {
     _inherits(IconButton, _Component);
 
     function IconButton() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -56,7 +56,7 @@ var factory = function factory(ripple, FontIcon) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(IconButton)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = IconButton.__proto__ || Object.getPrototypeOf(IconButton)).call.apply(_ref, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
         _this.refs.button.blur();
         if (_this.props.onMouseUp) _this.props.onMouseUp(event);
       }, _this.handleMouseLeave = function (event) {
diff --git a/lib/checkbox/Checkbox.js b/lib/checkbox/Checkbox.js
index 164ffb674..a7d090d32 100644
--- a/lib/checkbox/Checkbox.js
+++ b/lib/checkbox/Checkbox.js
@@ -46,7 +46,7 @@ var factory = function factory(Check) {
     _inherits(Checkbox, _Component);
 
     function Checkbox() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -56,7 +56,7 @@ var factory = function factory(Check) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Checkbox)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleToggle = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Checkbox.__proto__ || Object.getPrototypeOf(Checkbox)).call.apply(_ref, [this].concat(args))), _this), _this.handleToggle = function (event) {
         if (event.pageX !== 0 && event.pageY !== 0) _this.blur();
         if (!_this.props.disabled && _this.props.onChange) {
           _this.props.onChange(!_this.props.checked, event);
diff --git a/lib/date_picker/Calendar.js b/lib/date_picker/Calendar.js
index ddbea1ba2..3e0f8ae96 100644
--- a/lib/date_picker/Calendar.js
+++ b/lib/date_picker/Calendar.js
@@ -43,7 +43,7 @@ var factory = function factory(IconButton) {
     _inherits(Calendar, _Component);
 
     function Calendar() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -53,7 +53,7 @@ var factory = function factory(IconButton) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Calendar)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Calendar.__proto__ || Object.getPrototypeOf(Calendar)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         viewDate: _this.props.selectedDate
       }, _this.handleDayClick = function (day) {
         _this.props.onChange(_time2.default.setDay(_this.state.viewDate, day), true);
diff --git a/lib/date_picker/CalendarDay.js b/lib/date_picker/CalendarDay.js
index 023206fde..af1b4a944 100644
--- a/lib/date_picker/CalendarDay.js
+++ b/lib/date_picker/CalendarDay.js
@@ -32,7 +32,7 @@ var Day = function (_Component) {
   _inherits(Day, _Component);
 
   function Day() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -42,7 +42,7 @@ var Day = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Day)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function () {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Day.__proto__ || Object.getPrototypeOf(Day)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function () {
       if (!_this.props.disabled && _this.props.onClick) {
         _this.props.onClick(_this.props.day);
       }
diff --git a/lib/date_picker/CalendarMonth.js b/lib/date_picker/CalendarMonth.js
index 772c665e3..ad3afbe25 100644
--- a/lib/date_picker/CalendarMonth.js
+++ b/lib/date_picker/CalendarMonth.js
@@ -36,7 +36,7 @@ var Month = function (_Component) {
   _inherits(Month, _Component);
 
   function Month() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -46,7 +46,7 @@ var Month = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Month)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleDayClick = function (day) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Month.__proto__ || Object.getPrototypeOf(Month)).call.apply(_ref, [this].concat(args))), _this), _this.handleDayClick = function (day) {
       if (_this.props.onDayClick) _this.props.onDayClick(day);
     }, _temp), _possibleConstructorReturn(_this, _ret);
   }
diff --git a/lib/date_picker/DatePicker.js b/lib/date_picker/DatePicker.js
index c029e7b20..d1feea874 100644
--- a/lib/date_picker/DatePicker.js
+++ b/lib/date_picker/DatePicker.js
@@ -66,7 +66,7 @@ var factory = function factory(Input, DatePickerDialog) {
     _inherits(DatePicker, _Component);
 
     function DatePicker() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -76,7 +76,7 @@ var factory = function factory(Input, DatePickerDialog) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(DatePicker)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = DatePicker.__proto__ || Object.getPrototypeOf(DatePicker)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         active: _this.props.active
       }, _this.handleDismiss = function () {
         _this.setState({ active: false });
diff --git a/lib/date_picker/DatePickerDialog.js b/lib/date_picker/DatePickerDialog.js
index eca036556..c9f934b2e 100644
--- a/lib/date_picker/DatePickerDialog.js
+++ b/lib/date_picker/DatePickerDialog.js
@@ -31,7 +31,7 @@ var factory = function factory(Dialog, Calendar) {
     _inherits(CalendarDialog, _Component);
 
     function CalendarDialog() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -41,7 +41,7 @@ var factory = function factory(Dialog, Calendar) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(CalendarDialog)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = CalendarDialog.__proto__ || Object.getPrototypeOf(CalendarDialog)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         display: 'months',
         date: _this.props.value
       }, _this.handleNewDate = function (value, dayClick) {
diff --git a/lib/date_picker/_config.scss b/lib/date_picker/_config.scss
index ba9155399..62acee078 100644
--- a/lib/date_picker/_config.scss
+++ b/lib/date_picker/_config.scss
@@ -21,7 +21,7 @@ $calendar-primary-contrast-color: $calendar-primary-contrast !default;
 $calendar-primary-hover-color: rgba($calendar-primary, .21) !default;
 $calendar-arrows-color: $palette-grey-600 !default;
 $calendar-arrows-font-size: 2 * $unit !default;
-$calendar-year-font-size: 2.4 !default;
+$calendar-year-font-size: 2.4 * $unit !default;
 $calendar-day-font-size: 1.3 * $unit !default;
 $calendar-day-disable-opacity: 0.25 !default;
 $calendar-row-height: 3 * $unit !default;
diff --git a/lib/date_picker/theme.scss b/lib/date_picker/theme.scss
index ef3c6b67f..a1ee39156 100644
--- a/lib/date_picker/theme.scss
+++ b/lib/date_picker/theme.scss
@@ -101,6 +101,7 @@
     cursor: pointer;
     &.active {
       font-size: $calendar-year-font-size;
+      font-weight: $font-weight-semi-bold;
       color: $calendar-primary-color;
     }
   }
diff --git a/lib/dropdown/Dropdown.js b/lib/dropdown/Dropdown.js
index 4f9d2dbff..66bafcab1 100644
--- a/lib/dropdown/Dropdown.js
+++ b/lib/dropdown/Dropdown.js
@@ -50,7 +50,7 @@ var factory = function factory(Input) {
     _inherits(Dropdown, _Component);
 
     function Dropdown() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -60,7 +60,7 @@ var factory = function factory(Input) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Dropdown)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Dropdown.__proto__ || Object.getPrototypeOf(Dropdown)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         active: false,
         up: false
       }, _this.close = function () {
diff --git a/lib/form/Form.js b/lib/form/Form.js
index 7de399c99..fe56e77f7 100644
--- a/lib/form/Form.js
+++ b/lib/form/Form.js
@@ -80,7 +80,7 @@ var factory = function factory(Autocomplete, Button, Checkbox, DatePicker, Dropd
     _inherits(Form, _Component);
 
     function Form() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -90,7 +90,7 @@ var factory = function factory(Autocomplete, Button, Checkbox, DatePicker, Dropd
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Form)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.onSubmit = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Form.__proto__ || Object.getPrototypeOf(Form)).call.apply(_ref, [this].concat(args))), _this), _this.onSubmit = function (event) {
         event.preventDefault();
         if (_this.props.onSubmit) _this.props.onSubmit(event);
       }, _this.onChange = function (field, value, event) {
diff --git a/lib/hoc/ActivableRenderer.js b/lib/hoc/ActivableRenderer.js
index e64654f71..f15f41a35 100644
--- a/lib/hoc/ActivableRenderer.js
+++ b/lib/hoc/ActivableRenderer.js
@@ -31,7 +31,7 @@ var ActivableRendererFactory = function ActivableRendererFactory() {
       _inherits(ActivableRenderer, _Component);
 
       function ActivableRenderer() {
-        var _Object$getPrototypeO;
+        var _ref;
 
         var _temp, _this, _ret;
 
@@ -41,7 +41,7 @@ var ActivableRendererFactory = function ActivableRendererFactory() {
           args[_key] = arguments[_key];
         }
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(ActivableRenderer)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ActivableRenderer.__proto__ || Object.getPrototypeOf(ActivableRenderer)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
           active: _this.props.active,
           rendered: _this.props.active
         }, _temp), _possibleConstructorReturn(_this, _ret);
diff --git a/lib/hoc/Portal.js b/lib/hoc/Portal.js
index bf12d9039..0d8cda45a 100644
--- a/lib/hoc/Portal.js
+++ b/lib/hoc/Portal.js
@@ -28,7 +28,7 @@ var Portal = function (_Component) {
   function Portal() {
     _classCallCheck(this, Portal);
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(Portal).apply(this, arguments));
+    return _possibleConstructorReturn(this, (Portal.__proto__ || Object.getPrototypeOf(Portal)).apply(this, arguments));
   }
 
   _createClass(Portal, [{
diff --git a/lib/input/Input.js b/lib/input/Input.js
index d29f218bc..e561fc219 100644
--- a/lib/input/Input.js
+++ b/lib/input/Input.js
@@ -44,7 +44,7 @@ var factory = function factory(FontIcon) {
     _inherits(Input, _React$Component);
 
     function Input() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -54,7 +54,7 @@ var factory = function factory(FontIcon) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Input)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleChange = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Input.__proto__ || Object.getPrototypeOf(Input)).call.apply(_ref, [this].concat(args))), _this), _this.handleChange = function (event) {
         var _this$props = _this.props;
         var onChange = _this$props.onChange;
         var multiline = _this$props.multiline;
diff --git a/lib/list/List.js b/lib/list/List.js
index cd315c954..eac163f81 100644
--- a/lib/list/List.js
+++ b/lib/list/List.js
@@ -38,7 +38,7 @@ var factory = function factory(ListItem) {
     function List() {
       _classCallCheck(this, List);
 
-      return _possibleConstructorReturn(this, Object.getPrototypeOf(List).apply(this, arguments));
+      return _possibleConstructorReturn(this, (List.__proto__ || Object.getPrototypeOf(List)).apply(this, arguments));
     }
 
     _createClass(List, [{
diff --git a/lib/list/ListItem.js b/lib/list/ListItem.js
index 193dec03f..3358acddb 100644
--- a/lib/list/ListItem.js
+++ b/lib/list/ListItem.js
@@ -44,7 +44,7 @@ var factory = function factory(ripple, ListItemLayout, ListItemContent) {
     _inherits(ListItem, _Component);
 
     function ListItem() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -54,7 +54,7 @@ var factory = function factory(ripple, ListItemLayout, ListItemContent) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(ListItem)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ListItem.__proto__ || Object.getPrototypeOf(ListItem)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
         if (_this.props.onClick && !_this.props.disabled) {
           _this.props.onClick(event);
         }
diff --git a/lib/list/ListItemContent.js b/lib/list/ListItemContent.js
index f9924b4a0..f288d9dff 100644
--- a/lib/list/ListItemContent.js
+++ b/lib/list/ListItemContent.js
@@ -42,7 +42,7 @@ var factory = function factory(ListItemText) {
     function ListItemContent() {
       _classCallCheck(this, ListItemContent);
 
-      return _possibleConstructorReturn(this, Object.getPrototypeOf(ListItemContent).apply(this, arguments));
+      return _possibleConstructorReturn(this, (ListItemContent.__proto__ || Object.getPrototypeOf(ListItemContent)).apply(this, arguments));
     }
 
     _createClass(ListItemContent, [{
diff --git a/lib/menu/IconMenu.js b/lib/menu/IconMenu.js
index f076af1b4..70bff718d 100644
--- a/lib/menu/IconMenu.js
+++ b/lib/menu/IconMenu.js
@@ -40,7 +40,7 @@ var factory = function factory(IconButton, Menu) {
     _inherits(IconMenu, _Component);
 
     function IconMenu() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -50,7 +50,7 @@ var factory = function factory(IconButton, Menu) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(IconMenu)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = IconMenu.__proto__ || Object.getPrototypeOf(IconMenu)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         active: false
       }, _this.handleButtonClick = function (event) {
         _this.setState({ active: !_this.state.active });
diff --git a/lib/menu/Menu.js b/lib/menu/Menu.js
index bcc8ed066..51ab885d7 100644
--- a/lib/menu/Menu.js
+++ b/lib/menu/Menu.js
@@ -53,7 +53,7 @@ var factory = function factory(MenuItem) {
     _inherits(Menu, _Component);
 
     function Menu() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -63,7 +63,7 @@ var factory = function factory(MenuItem) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Menu)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Menu.__proto__ || Object.getPrototypeOf(Menu)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         active: _this.props.active,
         rippled: false
       }, _this.handleDocumentClick = function (event) {
diff --git a/lib/menu/MenuItem.js b/lib/menu/MenuItem.js
index 7562dfa0b..2670f4325 100644
--- a/lib/menu/MenuItem.js
+++ b/lib/menu/MenuItem.js
@@ -46,7 +46,7 @@ var factory = function factory(ripple) {
     _inherits(MenuItem, _Component);
 
     function MenuItem() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -56,7 +56,7 @@ var factory = function factory(ripple) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(MenuItem)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = MenuItem.__proto__ || Object.getPrototypeOf(MenuItem)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
         if (_this.props.onClick && !_this.props.disabled) {
           _this.props.onClick(event, _this);
         }
diff --git a/lib/overlay/Overlay.js b/lib/overlay/Overlay.js
index 0bf6de75e..5fa1d7d61 100644
--- a/lib/overlay/Overlay.js
+++ b/lib/overlay/Overlay.js
@@ -39,7 +39,7 @@ var Overlay = function (_Component) {
   function Overlay() {
     _classCallCheck(this, Overlay);
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(Overlay).apply(this, arguments));
+    return _possibleConstructorReturn(this, (Overlay.__proto__ || Object.getPrototypeOf(Overlay)).apply(this, arguments));
   }
 
   _createClass(Overlay, [{
diff --git a/lib/progress_bar/ProgressBar.js b/lib/progress_bar/ProgressBar.js
index c1a36201a..f8a16e85e 100644
--- a/lib/progress_bar/ProgressBar.js
+++ b/lib/progress_bar/ProgressBar.js
@@ -39,7 +39,7 @@ var ProgressBar = function (_Component) {
   function ProgressBar() {
     _classCallCheck(this, ProgressBar);
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(ProgressBar).apply(this, arguments));
+    return _possibleConstructorReturn(this, (ProgressBar.__proto__ || Object.getPrototypeOf(ProgressBar)).apply(this, arguments));
   }
 
   _createClass(ProgressBar, [{
diff --git a/lib/radio/RadioButton.js b/lib/radio/RadioButton.js
index 7fe8abe0b..71ee095a7 100644
--- a/lib/radio/RadioButton.js
+++ b/lib/radio/RadioButton.js
@@ -44,7 +44,7 @@ var factory = function factory(Radio) {
     _inherits(RadioButton, _Component);
 
     function RadioButton() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -54,7 +54,7 @@ var factory = function factory(Radio) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(RadioButton)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RadioButton.__proto__ || Object.getPrototypeOf(RadioButton)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
         var _this$props = _this.props;
         var checked = _this$props.checked;
         var disabled = _this$props.disabled;
diff --git a/lib/radio/RadioGroup.js b/lib/radio/RadioGroup.js
index aa7ff0bc2..15c87f023 100644
--- a/lib/radio/RadioGroup.js
+++ b/lib/radio/RadioGroup.js
@@ -34,7 +34,7 @@ var factory = function factory(RadioButton) {
     _inherits(RadioGroup, _Component);
 
     function RadioGroup() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -44,7 +44,7 @@ var factory = function factory(RadioButton) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(RadioGroup)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleChange = function (value) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RadioGroup.__proto__ || Object.getPrototypeOf(RadioGroup)).call.apply(_ref, [this].concat(args))), _this), _this.handleChange = function (value) {
         if (_this.props.onChange) _this.props.onChange(value);
       }, _temp), _possibleConstructorReturn(_this, _ret);
     }
diff --git a/lib/ripple/Ripple.js b/lib/ripple/Ripple.js
index 9d728173d..230ac9fd0 100644
--- a/lib/ripple/Ripple.js
+++ b/lib/ripple/Ripple.js
@@ -78,7 +78,7 @@ var rippleFactory = function rippleFactory() {
       _inherits(RippledComponent, _Component);
 
       function RippledComponent() {
-        var _Object$getPrototypeO;
+        var _ref;
 
         var _temp, _this, _ret;
 
@@ -88,7 +88,7 @@ var rippleFactory = function rippleFactory() {
           args[_key] = arguments[_key];
         }
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(RippledComponent)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RippledComponent.__proto__ || Object.getPrototypeOf(RippledComponent)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
           ripples: {}
         }, _this.handleMouseDown = function (event) {
           if (_this.props.onMouseDown) _this.props.onMouseDown(event);
@@ -304,14 +304,14 @@ var rippleFactory = function rippleFactory() {
         }
       }, {
         key: 'renderRipple',
-        value: function renderRipple(key, className, _ref) {
+        value: function renderRipple(key, className, _ref2) {
           var _classnames;
 
-          var active = _ref.active;
-          var left = _ref.left;
-          var restarting = _ref.restarting;
-          var top = _ref.top;
-          var width = _ref.width;
+          var active = _ref2.active;
+          var left = _ref2.left;
+          var restarting = _ref2.restarting;
+          var top = _ref2.top;
+          var width = _ref2.width;
 
           var scale = restarting ? 0 : 1;
           var transform = 'translate3d(' + (-width / 2 + left) + 'px, ' + (-width / 2 + top) + 'px, 0) scale(' + scale + ')';
diff --git a/lib/slider/Slider.js b/lib/slider/Slider.js
index c838283e5..10ac52441 100644
--- a/lib/slider/Slider.js
+++ b/lib/slider/Slider.js
@@ -58,7 +58,7 @@ var factory = function factory(ProgressBar, Input) {
     _inherits(Slider, _Component);
 
     function Slider() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -68,7 +68,7 @@ var factory = function factory(ProgressBar, Input) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Slider)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Slider.__proto__ || Object.getPrototypeOf(Slider)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         inputFocused: false,
         inputValue: null,
         sliderLength: 0,
diff --git a/lib/snackbar/Snackbar.js b/lib/snackbar/Snackbar.js
index bbb90867a..b4ae2f999 100644
--- a/lib/snackbar/Snackbar.js
+++ b/lib/snackbar/Snackbar.js
@@ -52,7 +52,7 @@ var factory = function factory(Overlay, Button) {
     function Snackbar() {
       _classCallCheck(this, Snackbar);
 
-      return _possibleConstructorReturn(this, Object.getPrototypeOf(Snackbar).apply(this, arguments));
+      return _possibleConstructorReturn(this, (Snackbar.__proto__ || Object.getPrototypeOf(Snackbar)).apply(this, arguments));
     }
 
     _createClass(Snackbar, [{
diff --git a/lib/switch/Switch.js b/lib/switch/Switch.js
index 96ad9977a..b723eccbd 100644
--- a/lib/switch/Switch.js
+++ b/lib/switch/Switch.js
@@ -44,7 +44,7 @@ var factory = function factory(Thumb) {
     _inherits(Switch, _Component);
 
     function Switch() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -54,7 +54,7 @@ var factory = function factory(Thumb) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Switch)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleToggle = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Switch.__proto__ || Object.getPrototypeOf(Switch)).call.apply(_ref, [this].concat(args))), _this), _this.handleToggle = function (event) {
         if (event.pageX !== 0 && event.pageY !== 0) _this.blur();
         if (!_this.props.disabled && _this.props.onChange) {
           _this.props.onChange(!_this.props.checked, event);
diff --git a/lib/table/Table.js b/lib/table/Table.js
index f0540d147..19c436242 100644
--- a/lib/table/Table.js
+++ b/lib/table/Table.js
@@ -46,7 +46,7 @@ var factory = function factory(TableHead, TableRow) {
     _inherits(Table, _Component);
 
     function Table() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -56,7 +56,7 @@ var factory = function factory(TableHead, TableRow) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Table)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleFullSelect = function () {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Table.__proto__ || Object.getPrototypeOf(Table)).call.apply(_ref, [this].concat(args))), _this), _this.handleFullSelect = function () {
         if (_this.props.onSelect) {
           var _this$props = _this.props;
           var source = _this$props.source;
diff --git a/lib/table/TableRow.js b/lib/table/TableRow.js
index ae0a25ccc..eeb4073f2 100644
--- a/lib/table/TableRow.js
+++ b/lib/table/TableRow.js
@@ -33,7 +33,7 @@ var factory = function factory(Checkbox) {
     _inherits(TableRow, _Component);
 
     function TableRow() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -43,7 +43,7 @@ var factory = function factory(Checkbox) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TableRow)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleInputChange = function (index, key, type, event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TableRow.__proto__ || Object.getPrototypeOf(TableRow)).call.apply(_ref, [this].concat(args))), _this), _this.handleInputChange = function (index, key, type, event) {
         var value = type === 'checkbox' ? event.target.checked : event.target.value;
         var onChange = _this.props.model[key].onChange || _this.props.onChange;
         onChange(index, key, value);
@@ -99,12 +99,24 @@ var factory = function factory(Checkbox) {
         var inputType = _utils2.default.inputTypeForPrototype(this.props.model[key].type);
         var inputValue = _utils2.default.prepareValueForInput(value, inputType);
         var checked = inputType === 'checkbox' && value ? true : null;
-        return _react2.default.createElement('input', {
-          checked: checked,
-          onChange: this.handleInputChange.bind(null, index, key, inputType),
-          type: inputType,
-          value: inputValue
-        });
+
+        if (inputType === 'text') {
+          return _react2.default.createElement(
+            'div',
+            {
+              contentEditable: true,
+              suppressContentEditableWarning: true,
+              onInput: this.handleInputChange.bind(null, index, key, inputType) },
+            inputValue
+          );
+        } else {
+          return _react2.default.createElement('input', {
+            checked: checked,
+            onChange: this.handleInputChange.bind(null, index, key, inputType),
+            type: inputType,
+            value: inputValue
+          });
+        }
       }
     }, {
       key: 'render',
diff --git a/lib/tabs/Tab.js b/lib/tabs/Tab.js
index f1c272a0d..901468ffa 100644
--- a/lib/tabs/Tab.js
+++ b/lib/tabs/Tab.js
@@ -39,7 +39,7 @@ var Tab = function (_Component) {
   _inherits(Tab, _Component);
 
   function Tab() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -49,7 +49,7 @@ var Tab = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Tab)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function (event) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Tab.__proto__ || Object.getPrototypeOf(Tab)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
       if (!_this.props.disabled && _this.props.onClick) {
         _this.props.onClick(event);
       }
diff --git a/lib/tabs/TabContent.js b/lib/tabs/TabContent.js
index 96f3538be..65bd7a6a6 100644
--- a/lib/tabs/TabContent.js
+++ b/lib/tabs/TabContent.js
@@ -35,7 +35,7 @@ var TabContent = function (_Component) {
   function TabContent() {
     _classCallCheck(this, TabContent);
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(TabContent).apply(this, arguments));
+    return _possibleConstructorReturn(this, (TabContent.__proto__ || Object.getPrototypeOf(TabContent)).apply(this, arguments));
   }
 
   _createClass(TabContent, [{
diff --git a/lib/tabs/Tabs.js b/lib/tabs/Tabs.js
index 1905592cc..3e72319b8 100644
--- a/lib/tabs/Tabs.js
+++ b/lib/tabs/Tabs.js
@@ -42,7 +42,7 @@ var factory = function factory(Tab, TabContent) {
     _inherits(Tabs, _Component);
 
     function Tabs() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -52,7 +52,7 @@ var factory = function factory(Tab, TabContent) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Tabs)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Tabs.__proto__ || Object.getPrototypeOf(Tabs)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         pointer: {}
       }, _this.handleHeaderClick = function (event) {
         var idx = parseInt(event.currentTarget.id);
diff --git a/lib/tabs/__tests__/index.spec.js b/lib/tabs/__tests__/index.spec.js
index de59ddee1..32bca1a3b 100644
--- a/lib/tabs/__tests__/index.spec.js
+++ b/lib/tabs/__tests__/index.spec.js
@@ -63,7 +63,7 @@ describe('Tabs', function () {
     function Composition() {
       _classCallCheck(this, Composition);
 
-      var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Composition).call(this));
+      var _this = _possibleConstructorReturn(this, (Composition.__proto__ || Object.getPrototypeOf(Composition)).call(this));
 
       _this.state = { index: 0 };
       return _this;
diff --git a/lib/time_picker/Clock.js b/lib/time_picker/Clock.js
index 2b74f0a1c..aaa55accb 100644
--- a/lib/time_picker/Clock.js
+++ b/lib/time_picker/Clock.js
@@ -40,7 +40,7 @@ var Clock = function (_Component) {
   _inherits(Clock, _Component);
 
   function Clock() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -50,7 +50,7 @@ var Clock = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Clock)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Clock.__proto__ || Object.getPrototypeOf(Clock)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
       center: { x: null, y: null },
       radius: 0
     }, _this.handleHourChange = function (hours) {
diff --git a/lib/time_picker/ClockFace.js b/lib/time_picker/ClockFace.js
index 54ca26407..b2604a0c2 100644
--- a/lib/time_picker/ClockFace.js
+++ b/lib/time_picker/ClockFace.js
@@ -28,7 +28,7 @@ var Face = function (_Component) {
   _inherits(Face, _Component);
 
   function Face() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -38,7 +38,7 @@ var Face = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Face)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.renderNumber = function (number, idx) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Face.__proto__ || Object.getPrototypeOf(Face)).call.apply(_ref, [this].concat(args))), _this), _this.renderNumber = function (number, idx) {
       var _this$props = _this.props;
       var active = _this$props.active;
       var radius = _this$props.radius;
diff --git a/lib/time_picker/ClockHand.js b/lib/time_picker/ClockHand.js
index 053b19e07..d16bdaeab 100644
--- a/lib/time_picker/ClockHand.js
+++ b/lib/time_picker/ClockHand.js
@@ -34,7 +34,7 @@ var Hand = function (_Component) {
   _inherits(Hand, _Component);
 
   function Hand() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -44,7 +44,7 @@ var Hand = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Hand)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Hand.__proto__ || Object.getPrototypeOf(Hand)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
       knobWidth: 0
     }, _this.handleMouseMove = function (event) {
       _this.move(_events2.default.getMousePosition(event));
diff --git a/lib/time_picker/ClockHours.js b/lib/time_picker/ClockHours.js
index 85a711ab1..3b4ee10fd 100644
--- a/lib/time_picker/ClockHours.js
+++ b/lib/time_picker/ClockHours.js
@@ -41,7 +41,7 @@ var Hours = function (_Component) {
   _inherits(Hours, _Component);
 
   function Hours() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -51,7 +51,7 @@ var Hours = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Hours)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Hours.__proto__ || Object.getPrototypeOf(Hours)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
       inner: _this.props.format === '24hr' && _this.props.selected > 0 && _this.props.selected <= 12
     }, _this.handleHandMove = function (degrees, radius) {
       var currentInner = radius < _this.props.radius - _this.props.spacing * innerSpacing;
diff --git a/lib/time_picker/ClockMinutes.js b/lib/time_picker/ClockMinutes.js
index 780a90ba4..0b21e74a5 100644
--- a/lib/time_picker/ClockMinutes.js
+++ b/lib/time_picker/ClockMinutes.js
@@ -37,7 +37,7 @@ var Minutes = function (_Component) {
   _inherits(Minutes, _Component);
 
   function Minutes() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -47,7 +47,7 @@ var Minutes = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Minutes)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleHandMove = function (degrees) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Minutes.__proto__ || Object.getPrototypeOf(Minutes)).call.apply(_ref, [this].concat(args))), _this), _this.handleHandMove = function (degrees) {
       _this.props.onChange(degrees / step);
     }, _this.handleMouseDown = function (event) {
       _this.refs.hand.mouseStart(event);
diff --git a/lib/time_picker/TimePicker.js b/lib/time_picker/TimePicker.js
index d4dc2e755..2e0a06ae3 100644
--- a/lib/time_picker/TimePicker.js
+++ b/lib/time_picker/TimePicker.js
@@ -58,7 +58,7 @@ var factory = function factory(TimePickerDialog, Input) {
     _inherits(TimePicker, _Component);
 
     function TimePicker() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -68,7 +68,7 @@ var factory = function factory(TimePickerDialog, Input) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TimePicker)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TimePicker.__proto__ || Object.getPrototypeOf(TimePicker)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         active: _this.props.active
       }, _this.handleDismiss = function () {
         _this.setState({ active: false });
diff --git a/lib/time_picker/TimePickerDialog.js b/lib/time_picker/TimePickerDialog.js
index 92e55b2db..9d4dcefb9 100644
--- a/lib/time_picker/TimePickerDialog.js
+++ b/lib/time_picker/TimePickerDialog.js
@@ -35,7 +35,7 @@ var factory = function factory(Dialog) {
     _inherits(TimePickerDialog, _Component);
 
     function TimePickerDialog() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -45,7 +45,7 @@ var factory = function factory(Dialog) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TimePickerDialog)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TimePickerDialog.__proto__ || Object.getPrototypeOf(TimePickerDialog)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         display: 'hours',
         displayTime: _this.props.value
       }, _this.handleClockChange = function (value) {
diff --git a/lib/tooltip/Tooltip.js b/lib/tooltip/Tooltip.js
index b77620ef5..a57b41d73 100644
--- a/lib/tooltip/Tooltip.js
+++ b/lib/tooltip/Tooltip.js
@@ -78,7 +78,7 @@ var tooltipFactory = function tooltipFactory() {
       _inherits(TooltippedComponent, _Component);
 
       function TooltippedComponent() {
-        var _Object$getPrototypeO;
+        var _ref;
 
         var _temp, _this, _ret;
 
@@ -88,7 +88,7 @@ var tooltipFactory = function tooltipFactory() {
           args[_key] = arguments[_key];
         }
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TooltippedComponent)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TooltippedComponent.__proto__ || Object.getPrototypeOf(TooltippedComponent)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
           active: false,
           position: _this.props.tooltipPosition,
           visible: false
@@ -118,12 +118,12 @@ var tooltipFactory = function tooltipFactory() {
         }
       }, {
         key: 'activate',
-        value: function activate(_ref) {
+        value: function activate(_ref2) {
           var _this2 = this;
 
-          var top = _ref.top;
-          var left = _ref.left;
-          var position = _ref.position;
+          var top = _ref2.top;
+          var left = _ref2.left;
+          var position = _ref2.position;
 
           if (this.timeout) clearTimeout(this.timeout);
           this.setState({ visible: true, position: position });

From 6c153026dcdbb7f590646b9f8c0672d286103557 Mon Sep 17 00:00:00 2001
From: Tucker Connelly <web@tuckerconnelly.com>
Date: Fri, 9 Sep 2016 14:53:29 -0400
Subject: [PATCH 0811/1024] Fix event value

---
 components/table/TableRow.js | 15 ++++++++++++++-
 lib/table/TableRow.js        | 15 ++++++++++++++-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/components/table/TableRow.js b/components/table/TableRow.js
index 3ded2d011..38b00d2f9 100644
--- a/components/table/TableRow.js
+++ b/components/table/TableRow.js
@@ -21,7 +21,20 @@ const factory = (Checkbox) => {
     };
 
     handleInputChange = (index, key, type, event) => {
-      const value = type === 'checkbox' ? event.target.checked : event.target.value;
+      let value;
+      switch (type) {
+        case 'checkbox':
+          value = event.target.checked;
+          break;
+        // Handle contentEditable
+        case 'text':
+          value = event.target.textContent;
+          break;
+        default:
+          value = event.target.value;
+          break;
+      }
+
       const onChange = this.props.model[key].onChange || this.props.onChange;
       onChange(index, key, value);
     };
diff --git a/lib/table/TableRow.js b/lib/table/TableRow.js
index eeb4073f2..92f7dc9c0 100644
--- a/lib/table/TableRow.js
+++ b/lib/table/TableRow.js
@@ -44,7 +44,20 @@ var factory = function factory(Checkbox) {
       }
 
       return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TableRow.__proto__ || Object.getPrototypeOf(TableRow)).call.apply(_ref, [this].concat(args))), _this), _this.handleInputChange = function (index, key, type, event) {
-        var value = type === 'checkbox' ? event.target.checked : event.target.value;
+        var value = void 0;
+        switch (type) {
+          case 'checkbox':
+            value = event.target.checked;
+            break;
+          // Handle contentEditable
+          case 'text':
+            value = event.target.textContent;
+            break;
+          default:
+            value = event.target.value;
+            break;
+        }
+
         var onChange = _this.props.model[key].onChange || _this.props.onChange;
         onChange(index, key, value);
       }, _temp), _possibleConstructorReturn(_this, _ret);

From c3e6c8381578a166113959e5d47080c1925df7f9 Mon Sep 17 00:00:00 2001
From: Tucker Connelly <web@tuckerconnelly.com>
Date: Mon, 19 Sep 2016 14:23:56 -0400
Subject: [PATCH 0812/1024] Revert "Use contentEditable for editable table
 cells"

This reverts commit 04215a58457eac35b509736d8daaf552c2e319a2.
---
 components/table/TableRow.js        | 28 +++++-------------
 lib/autocomplete/Autocomplete.js    | 20 ++++++-------
 lib/button/Button.js                |  4 +--
 lib/button/IconButton.js            |  4 +--
 lib/checkbox/Checkbox.js            |  4 +--
 lib/date_picker/Calendar.js         |  4 +--
 lib/date_picker/CalendarDay.js      |  4 +--
 lib/date_picker/CalendarMonth.js    |  4 +--
 lib/date_picker/DatePicker.js       |  4 +--
 lib/date_picker/DatePickerDialog.js |  4 +--
 lib/date_picker/_config.scss        |  2 +-
 lib/date_picker/theme.scss          |  1 -
 lib/dropdown/Dropdown.js            |  4 +--
 lib/form/Form.js                    |  4 +--
 lib/hoc/ActivableRenderer.js        |  4 +--
 lib/hoc/Portal.js                   |  2 +-
 lib/input/Input.js                  |  4 +--
 lib/list/List.js                    |  2 +-
 lib/list/ListItem.js                |  4 +--
 lib/list/ListItemContent.js         |  2 +-
 lib/menu/IconMenu.js                |  4 +--
 lib/menu/Menu.js                    |  4 +--
 lib/menu/MenuItem.js                |  4 +--
 lib/overlay/Overlay.js              |  2 +-
 lib/progress_bar/ProgressBar.js     |  2 +-
 lib/radio/RadioButton.js            |  4 +--
 lib/radio/RadioGroup.js             |  4 +--
 lib/ripple/Ripple.js                | 16 +++++-----
 lib/slider/Slider.js                |  4 +--
 lib/snackbar/Snackbar.js            |  2 +-
 lib/switch/Switch.js                |  4 +--
 lib/table/Table.js                  |  4 +--
 lib/table/TableRow.js               | 45 +++++++----------------------
 lib/tabs/Tab.js                     |  4 +--
 lib/tabs/TabContent.js              |  2 +-
 lib/tabs/Tabs.js                    |  4 +--
 lib/tabs/__tests__/index.spec.js    |  2 +-
 lib/time_picker/Clock.js            |  4 +--
 lib/time_picker/ClockFace.js        |  4 +--
 lib/time_picker/ClockHand.js        |  4 +--
 lib/time_picker/ClockHours.js       |  4 +--
 lib/time_picker/ClockMinutes.js     |  4 +--
 lib/time_picker/TimePicker.js       |  4 +--
 lib/time_picker/TimePickerDialog.js |  4 +--
 lib/tooltip/Tooltip.js              | 12 ++++----
 45 files changed, 111 insertions(+), 149 deletions(-)

diff --git a/components/table/TableRow.js b/components/table/TableRow.js
index 38b00d2f9..4049c94eb 100644
--- a/components/table/TableRow.js
+++ b/components/table/TableRow.js
@@ -75,26 +75,14 @@ const factory = (Checkbox) => {
       const inputType = utils.inputTypeForPrototype(this.props.model[key].type);
       const inputValue = utils.prepareValueForInput(value, inputType);
       const checked = inputType === 'checkbox' && value ? true : null;
-
-      if (inputType === 'text') {
-        return (
-          <div
-            contentEditable
-            suppressContentEditableWarning
-            onInput={this.handleInputChange.bind(null, index, key, inputType)}>
-            {inputValue}
-          </div>
-        );
-      } else {
-        return (
-          <input
-            checked={checked}
-            onChange={this.handleInputChange.bind(null, index, key, inputType)}
-            type={inputType}
-            value={inputValue}
-          />
-        );
-      }
+      return (
+        <input
+          checked={checked}
+          onChange={this.handleInputChange.bind(null, index, key, inputType)}
+          type={inputType}
+          value={inputValue}
+        />
+      );
     }
 
     render () {
diff --git a/lib/autocomplete/Autocomplete.js b/lib/autocomplete/Autocomplete.js
index aed49f61e..dfb005d15 100644
--- a/lib/autocomplete/Autocomplete.js
+++ b/lib/autocomplete/Autocomplete.js
@@ -64,7 +64,7 @@ var factory = function factory(Chip, Input) {
     _inherits(Autocomplete, _Component);
 
     function Autocomplete() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -74,7 +74,7 @@ var factory = function factory(Chip, Input) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Autocomplete.__proto__ || Object.getPrototypeOf(Autocomplete)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Autocomplete)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
         direction: _this.props.direction,
         focus: false,
         showAllSuggestions: _this.props.showSuggestionsWhenValueIsSet,
@@ -332,11 +332,11 @@ var factory = function factory(Chip, Input) {
         var _this2 = this;
 
         if (this.props.multiple) {
-          var selectedItems = [].concat(_toConsumableArray(this.values())).map(function (_ref2) {
-            var _ref3 = _slicedToArray(_ref2, 2);
+          var selectedItems = [].concat(_toConsumableArray(this.values())).map(function (_ref) {
+            var _ref2 = _slicedToArray(_ref, 2);
 
-            var key = _ref3[0];
-            var value = _ref3[1];
+            var key = _ref2[0];
+            var value = _ref2[1];
 
             return _react2.default.createElement(
               Chip,
@@ -364,11 +364,11 @@ var factory = function factory(Chip, Input) {
 
         var theme = this.props.theme;
 
-        var suggestions = [].concat(_toConsumableArray(this.suggestions())).map(function (_ref4) {
-          var _ref5 = _slicedToArray(_ref4, 2);
+        var suggestions = [].concat(_toConsumableArray(this.suggestions())).map(function (_ref3) {
+          var _ref4 = _slicedToArray(_ref3, 2);
 
-          var key = _ref5[0];
-          var value = _ref5[1];
+          var key = _ref4[0];
+          var value = _ref4[1];
 
           var className = (0, _classnames5.default)(theme.suggestion, _defineProperty({}, theme.active, _this3.state.active === key));
           return _react2.default.createElement(
diff --git a/lib/button/Button.js b/lib/button/Button.js
index b38aeb3b7..2b9e424f5 100644
--- a/lib/button/Button.js
+++ b/lib/button/Button.js
@@ -46,7 +46,7 @@ var factory = function factory(ripple, FontIcon) {
     _inherits(Button, _Component);
 
     function Button() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -56,7 +56,7 @@ var factory = function factory(ripple, FontIcon) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Button.__proto__ || Object.getPrototypeOf(Button)).call.apply(_ref, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Button)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
         _this.refs.button.blur();
         if (_this.props.onMouseUp) _this.props.onMouseUp(event);
       }, _this.handleMouseLeave = function (event) {
diff --git a/lib/button/IconButton.js b/lib/button/IconButton.js
index 40f22fd91..98f6331b6 100644
--- a/lib/button/IconButton.js
+++ b/lib/button/IconButton.js
@@ -46,7 +46,7 @@ var factory = function factory(ripple, FontIcon) {
     _inherits(IconButton, _Component);
 
     function IconButton() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -56,7 +56,7 @@ var factory = function factory(ripple, FontIcon) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = IconButton.__proto__ || Object.getPrototypeOf(IconButton)).call.apply(_ref, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(IconButton)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
         _this.refs.button.blur();
         if (_this.props.onMouseUp) _this.props.onMouseUp(event);
       }, _this.handleMouseLeave = function (event) {
diff --git a/lib/checkbox/Checkbox.js b/lib/checkbox/Checkbox.js
index a7d090d32..164ffb674 100644
--- a/lib/checkbox/Checkbox.js
+++ b/lib/checkbox/Checkbox.js
@@ -46,7 +46,7 @@ var factory = function factory(Check) {
     _inherits(Checkbox, _Component);
 
     function Checkbox() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -56,7 +56,7 @@ var factory = function factory(Check) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Checkbox.__proto__ || Object.getPrototypeOf(Checkbox)).call.apply(_ref, [this].concat(args))), _this), _this.handleToggle = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Checkbox)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleToggle = function (event) {
         if (event.pageX !== 0 && event.pageY !== 0) _this.blur();
         if (!_this.props.disabled && _this.props.onChange) {
           _this.props.onChange(!_this.props.checked, event);
diff --git a/lib/date_picker/Calendar.js b/lib/date_picker/Calendar.js
index 3e0f8ae96..ddbea1ba2 100644
--- a/lib/date_picker/Calendar.js
+++ b/lib/date_picker/Calendar.js
@@ -43,7 +43,7 @@ var factory = function factory(IconButton) {
     _inherits(Calendar, _Component);
 
     function Calendar() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -53,7 +53,7 @@ var factory = function factory(IconButton) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Calendar.__proto__ || Object.getPrototypeOf(Calendar)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Calendar)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
         viewDate: _this.props.selectedDate
       }, _this.handleDayClick = function (day) {
         _this.props.onChange(_time2.default.setDay(_this.state.viewDate, day), true);
diff --git a/lib/date_picker/CalendarDay.js b/lib/date_picker/CalendarDay.js
index af1b4a944..023206fde 100644
--- a/lib/date_picker/CalendarDay.js
+++ b/lib/date_picker/CalendarDay.js
@@ -32,7 +32,7 @@ var Day = function (_Component) {
   _inherits(Day, _Component);
 
   function Day() {
-    var _ref;
+    var _Object$getPrototypeO;
 
     var _temp, _this, _ret;
 
@@ -42,7 +42,7 @@ var Day = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Day.__proto__ || Object.getPrototypeOf(Day)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function () {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Day)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function () {
       if (!_this.props.disabled && _this.props.onClick) {
         _this.props.onClick(_this.props.day);
       }
diff --git a/lib/date_picker/CalendarMonth.js b/lib/date_picker/CalendarMonth.js
index ad3afbe25..772c665e3 100644
--- a/lib/date_picker/CalendarMonth.js
+++ b/lib/date_picker/CalendarMonth.js
@@ -36,7 +36,7 @@ var Month = function (_Component) {
   _inherits(Month, _Component);
 
   function Month() {
-    var _ref;
+    var _Object$getPrototypeO;
 
     var _temp, _this, _ret;
 
@@ -46,7 +46,7 @@ var Month = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Month.__proto__ || Object.getPrototypeOf(Month)).call.apply(_ref, [this].concat(args))), _this), _this.handleDayClick = function (day) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Month)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleDayClick = function (day) {
       if (_this.props.onDayClick) _this.props.onDayClick(day);
     }, _temp), _possibleConstructorReturn(_this, _ret);
   }
diff --git a/lib/date_picker/DatePicker.js b/lib/date_picker/DatePicker.js
index d1feea874..c029e7b20 100644
--- a/lib/date_picker/DatePicker.js
+++ b/lib/date_picker/DatePicker.js
@@ -66,7 +66,7 @@ var factory = function factory(Input, DatePickerDialog) {
     _inherits(DatePicker, _Component);
 
     function DatePicker() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -76,7 +76,7 @@ var factory = function factory(Input, DatePickerDialog) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = DatePicker.__proto__ || Object.getPrototypeOf(DatePicker)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(DatePicker)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
         active: _this.props.active
       }, _this.handleDismiss = function () {
         _this.setState({ active: false });
diff --git a/lib/date_picker/DatePickerDialog.js b/lib/date_picker/DatePickerDialog.js
index c9f934b2e..eca036556 100644
--- a/lib/date_picker/DatePickerDialog.js
+++ b/lib/date_picker/DatePickerDialog.js
@@ -31,7 +31,7 @@ var factory = function factory(Dialog, Calendar) {
     _inherits(CalendarDialog, _Component);
 
     function CalendarDialog() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -41,7 +41,7 @@ var factory = function factory(Dialog, Calendar) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = CalendarDialog.__proto__ || Object.getPrototypeOf(CalendarDialog)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(CalendarDialog)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
         display: 'months',
         date: _this.props.value
       }, _this.handleNewDate = function (value, dayClick) {
diff --git a/lib/date_picker/_config.scss b/lib/date_picker/_config.scss
index 62acee078..ba9155399 100644
--- a/lib/date_picker/_config.scss
+++ b/lib/date_picker/_config.scss
@@ -21,7 +21,7 @@ $calendar-primary-contrast-color: $calendar-primary-contrast !default;
 $calendar-primary-hover-color: rgba($calendar-primary, .21) !default;
 $calendar-arrows-color: $palette-grey-600 !default;
 $calendar-arrows-font-size: 2 * $unit !default;
-$calendar-year-font-size: 2.4 * $unit !default;
+$calendar-year-font-size: 2.4 !default;
 $calendar-day-font-size: 1.3 * $unit !default;
 $calendar-day-disable-opacity: 0.25 !default;
 $calendar-row-height: 3 * $unit !default;
diff --git a/lib/date_picker/theme.scss b/lib/date_picker/theme.scss
index a1ee39156..ef3c6b67f 100644
--- a/lib/date_picker/theme.scss
+++ b/lib/date_picker/theme.scss
@@ -101,7 +101,6 @@
     cursor: pointer;
     &.active {
       font-size: $calendar-year-font-size;
-      font-weight: $font-weight-semi-bold;
       color: $calendar-primary-color;
     }
   }
diff --git a/lib/dropdown/Dropdown.js b/lib/dropdown/Dropdown.js
index 66bafcab1..4f9d2dbff 100644
--- a/lib/dropdown/Dropdown.js
+++ b/lib/dropdown/Dropdown.js
@@ -50,7 +50,7 @@ var factory = function factory(Input) {
     _inherits(Dropdown, _Component);
 
     function Dropdown() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -60,7 +60,7 @@ var factory = function factory(Input) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Dropdown.__proto__ || Object.getPrototypeOf(Dropdown)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Dropdown)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
         active: false,
         up: false
       }, _this.close = function () {
diff --git a/lib/form/Form.js b/lib/form/Form.js
index fe56e77f7..7de399c99 100644
--- a/lib/form/Form.js
+++ b/lib/form/Form.js
@@ -80,7 +80,7 @@ var factory = function factory(Autocomplete, Button, Checkbox, DatePicker, Dropd
     _inherits(Form, _Component);
 
     function Form() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -90,7 +90,7 @@ var factory = function factory(Autocomplete, Button, Checkbox, DatePicker, Dropd
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Form.__proto__ || Object.getPrototypeOf(Form)).call.apply(_ref, [this].concat(args))), _this), _this.onSubmit = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Form)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.onSubmit = function (event) {
         event.preventDefault();
         if (_this.props.onSubmit) _this.props.onSubmit(event);
       }, _this.onChange = function (field, value, event) {
diff --git a/lib/hoc/ActivableRenderer.js b/lib/hoc/ActivableRenderer.js
index f15f41a35..e64654f71 100644
--- a/lib/hoc/ActivableRenderer.js
+++ b/lib/hoc/ActivableRenderer.js
@@ -31,7 +31,7 @@ var ActivableRendererFactory = function ActivableRendererFactory() {
       _inherits(ActivableRenderer, _Component);
 
       function ActivableRenderer() {
-        var _ref;
+        var _Object$getPrototypeO;
 
         var _temp, _this, _ret;
 
@@ -41,7 +41,7 @@ var ActivableRendererFactory = function ActivableRendererFactory() {
           args[_key] = arguments[_key];
         }
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ActivableRenderer.__proto__ || Object.getPrototypeOf(ActivableRenderer)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(ActivableRenderer)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
           active: _this.props.active,
           rendered: _this.props.active
         }, _temp), _possibleConstructorReturn(_this, _ret);
diff --git a/lib/hoc/Portal.js b/lib/hoc/Portal.js
index 0d8cda45a..bf12d9039 100644
--- a/lib/hoc/Portal.js
+++ b/lib/hoc/Portal.js
@@ -28,7 +28,7 @@ var Portal = function (_Component) {
   function Portal() {
     _classCallCheck(this, Portal);
 
-    return _possibleConstructorReturn(this, (Portal.__proto__ || Object.getPrototypeOf(Portal)).apply(this, arguments));
+    return _possibleConstructorReturn(this, Object.getPrototypeOf(Portal).apply(this, arguments));
   }
 
   _createClass(Portal, [{
diff --git a/lib/input/Input.js b/lib/input/Input.js
index e561fc219..d29f218bc 100644
--- a/lib/input/Input.js
+++ b/lib/input/Input.js
@@ -44,7 +44,7 @@ var factory = function factory(FontIcon) {
     _inherits(Input, _React$Component);
 
     function Input() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -54,7 +54,7 @@ var factory = function factory(FontIcon) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Input.__proto__ || Object.getPrototypeOf(Input)).call.apply(_ref, [this].concat(args))), _this), _this.handleChange = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Input)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleChange = function (event) {
         var _this$props = _this.props;
         var onChange = _this$props.onChange;
         var multiline = _this$props.multiline;
diff --git a/lib/list/List.js b/lib/list/List.js
index eac163f81..cd315c954 100644
--- a/lib/list/List.js
+++ b/lib/list/List.js
@@ -38,7 +38,7 @@ var factory = function factory(ListItem) {
     function List() {
       _classCallCheck(this, List);
 
-      return _possibleConstructorReturn(this, (List.__proto__ || Object.getPrototypeOf(List)).apply(this, arguments));
+      return _possibleConstructorReturn(this, Object.getPrototypeOf(List).apply(this, arguments));
     }
 
     _createClass(List, [{
diff --git a/lib/list/ListItem.js b/lib/list/ListItem.js
index 3358acddb..193dec03f 100644
--- a/lib/list/ListItem.js
+++ b/lib/list/ListItem.js
@@ -44,7 +44,7 @@ var factory = function factory(ripple, ListItemLayout, ListItemContent) {
     _inherits(ListItem, _Component);
 
     function ListItem() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -54,7 +54,7 @@ var factory = function factory(ripple, ListItemLayout, ListItemContent) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ListItem.__proto__ || Object.getPrototypeOf(ListItem)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(ListItem)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function (event) {
         if (_this.props.onClick && !_this.props.disabled) {
           _this.props.onClick(event);
         }
diff --git a/lib/list/ListItemContent.js b/lib/list/ListItemContent.js
index f288d9dff..f9924b4a0 100644
--- a/lib/list/ListItemContent.js
+++ b/lib/list/ListItemContent.js
@@ -42,7 +42,7 @@ var factory = function factory(ListItemText) {
     function ListItemContent() {
       _classCallCheck(this, ListItemContent);
 
-      return _possibleConstructorReturn(this, (ListItemContent.__proto__ || Object.getPrototypeOf(ListItemContent)).apply(this, arguments));
+      return _possibleConstructorReturn(this, Object.getPrototypeOf(ListItemContent).apply(this, arguments));
     }
 
     _createClass(ListItemContent, [{
diff --git a/lib/menu/IconMenu.js b/lib/menu/IconMenu.js
index 70bff718d..f076af1b4 100644
--- a/lib/menu/IconMenu.js
+++ b/lib/menu/IconMenu.js
@@ -40,7 +40,7 @@ var factory = function factory(IconButton, Menu) {
     _inherits(IconMenu, _Component);
 
     function IconMenu() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -50,7 +50,7 @@ var factory = function factory(IconButton, Menu) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = IconMenu.__proto__ || Object.getPrototypeOf(IconMenu)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(IconMenu)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
         active: false
       }, _this.handleButtonClick = function (event) {
         _this.setState({ active: !_this.state.active });
diff --git a/lib/menu/Menu.js b/lib/menu/Menu.js
index 51ab885d7..bcc8ed066 100644
--- a/lib/menu/Menu.js
+++ b/lib/menu/Menu.js
@@ -53,7 +53,7 @@ var factory = function factory(MenuItem) {
     _inherits(Menu, _Component);
 
     function Menu() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -63,7 +63,7 @@ var factory = function factory(MenuItem) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Menu.__proto__ || Object.getPrototypeOf(Menu)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Menu)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
         active: _this.props.active,
         rippled: false
       }, _this.handleDocumentClick = function (event) {
diff --git a/lib/menu/MenuItem.js b/lib/menu/MenuItem.js
index 2670f4325..7562dfa0b 100644
--- a/lib/menu/MenuItem.js
+++ b/lib/menu/MenuItem.js
@@ -46,7 +46,7 @@ var factory = function factory(ripple) {
     _inherits(MenuItem, _Component);
 
     function MenuItem() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -56,7 +56,7 @@ var factory = function factory(ripple) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = MenuItem.__proto__ || Object.getPrototypeOf(MenuItem)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(MenuItem)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function (event) {
         if (_this.props.onClick && !_this.props.disabled) {
           _this.props.onClick(event, _this);
         }
diff --git a/lib/overlay/Overlay.js b/lib/overlay/Overlay.js
index 5fa1d7d61..0bf6de75e 100644
--- a/lib/overlay/Overlay.js
+++ b/lib/overlay/Overlay.js
@@ -39,7 +39,7 @@ var Overlay = function (_Component) {
   function Overlay() {
     _classCallCheck(this, Overlay);
 
-    return _possibleConstructorReturn(this, (Overlay.__proto__ || Object.getPrototypeOf(Overlay)).apply(this, arguments));
+    return _possibleConstructorReturn(this, Object.getPrototypeOf(Overlay).apply(this, arguments));
   }
 
   _createClass(Overlay, [{
diff --git a/lib/progress_bar/ProgressBar.js b/lib/progress_bar/ProgressBar.js
index f8a16e85e..c1a36201a 100644
--- a/lib/progress_bar/ProgressBar.js
+++ b/lib/progress_bar/ProgressBar.js
@@ -39,7 +39,7 @@ var ProgressBar = function (_Component) {
   function ProgressBar() {
     _classCallCheck(this, ProgressBar);
 
-    return _possibleConstructorReturn(this, (ProgressBar.__proto__ || Object.getPrototypeOf(ProgressBar)).apply(this, arguments));
+    return _possibleConstructorReturn(this, Object.getPrototypeOf(ProgressBar).apply(this, arguments));
   }
 
   _createClass(ProgressBar, [{
diff --git a/lib/radio/RadioButton.js b/lib/radio/RadioButton.js
index 71ee095a7..7fe8abe0b 100644
--- a/lib/radio/RadioButton.js
+++ b/lib/radio/RadioButton.js
@@ -44,7 +44,7 @@ var factory = function factory(Radio) {
     _inherits(RadioButton, _Component);
 
     function RadioButton() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -54,7 +54,7 @@ var factory = function factory(Radio) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RadioButton.__proto__ || Object.getPrototypeOf(RadioButton)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(RadioButton)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function (event) {
         var _this$props = _this.props;
         var checked = _this$props.checked;
         var disabled = _this$props.disabled;
diff --git a/lib/radio/RadioGroup.js b/lib/radio/RadioGroup.js
index 15c87f023..aa7ff0bc2 100644
--- a/lib/radio/RadioGroup.js
+++ b/lib/radio/RadioGroup.js
@@ -34,7 +34,7 @@ var factory = function factory(RadioButton) {
     _inherits(RadioGroup, _Component);
 
     function RadioGroup() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -44,7 +44,7 @@ var factory = function factory(RadioButton) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RadioGroup.__proto__ || Object.getPrototypeOf(RadioGroup)).call.apply(_ref, [this].concat(args))), _this), _this.handleChange = function (value) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(RadioGroup)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleChange = function (value) {
         if (_this.props.onChange) _this.props.onChange(value);
       }, _temp), _possibleConstructorReturn(_this, _ret);
     }
diff --git a/lib/ripple/Ripple.js b/lib/ripple/Ripple.js
index 230ac9fd0..9d728173d 100644
--- a/lib/ripple/Ripple.js
+++ b/lib/ripple/Ripple.js
@@ -78,7 +78,7 @@ var rippleFactory = function rippleFactory() {
       _inherits(RippledComponent, _Component);
 
       function RippledComponent() {
-        var _ref;
+        var _Object$getPrototypeO;
 
         var _temp, _this, _ret;
 
@@ -88,7 +88,7 @@ var rippleFactory = function rippleFactory() {
           args[_key] = arguments[_key];
         }
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RippledComponent.__proto__ || Object.getPrototypeOf(RippledComponent)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(RippledComponent)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
           ripples: {}
         }, _this.handleMouseDown = function (event) {
           if (_this.props.onMouseDown) _this.props.onMouseDown(event);
@@ -304,14 +304,14 @@ var rippleFactory = function rippleFactory() {
         }
       }, {
         key: 'renderRipple',
-        value: function renderRipple(key, className, _ref2) {
+        value: function renderRipple(key, className, _ref) {
           var _classnames;
 
-          var active = _ref2.active;
-          var left = _ref2.left;
-          var restarting = _ref2.restarting;
-          var top = _ref2.top;
-          var width = _ref2.width;
+          var active = _ref.active;
+          var left = _ref.left;
+          var restarting = _ref.restarting;
+          var top = _ref.top;
+          var width = _ref.width;
 
           var scale = restarting ? 0 : 1;
           var transform = 'translate3d(' + (-width / 2 + left) + 'px, ' + (-width / 2 + top) + 'px, 0) scale(' + scale + ')';
diff --git a/lib/slider/Slider.js b/lib/slider/Slider.js
index 10ac52441..c838283e5 100644
--- a/lib/slider/Slider.js
+++ b/lib/slider/Slider.js
@@ -58,7 +58,7 @@ var factory = function factory(ProgressBar, Input) {
     _inherits(Slider, _Component);
 
     function Slider() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -68,7 +68,7 @@ var factory = function factory(ProgressBar, Input) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Slider.__proto__ || Object.getPrototypeOf(Slider)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Slider)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
         inputFocused: false,
         inputValue: null,
         sliderLength: 0,
diff --git a/lib/snackbar/Snackbar.js b/lib/snackbar/Snackbar.js
index b4ae2f999..bbb90867a 100644
--- a/lib/snackbar/Snackbar.js
+++ b/lib/snackbar/Snackbar.js
@@ -52,7 +52,7 @@ var factory = function factory(Overlay, Button) {
     function Snackbar() {
       _classCallCheck(this, Snackbar);
 
-      return _possibleConstructorReturn(this, (Snackbar.__proto__ || Object.getPrototypeOf(Snackbar)).apply(this, arguments));
+      return _possibleConstructorReturn(this, Object.getPrototypeOf(Snackbar).apply(this, arguments));
     }
 
     _createClass(Snackbar, [{
diff --git a/lib/switch/Switch.js b/lib/switch/Switch.js
index b723eccbd..96ad9977a 100644
--- a/lib/switch/Switch.js
+++ b/lib/switch/Switch.js
@@ -44,7 +44,7 @@ var factory = function factory(Thumb) {
     _inherits(Switch, _Component);
 
     function Switch() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -54,7 +54,7 @@ var factory = function factory(Thumb) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Switch.__proto__ || Object.getPrototypeOf(Switch)).call.apply(_ref, [this].concat(args))), _this), _this.handleToggle = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Switch)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleToggle = function (event) {
         if (event.pageX !== 0 && event.pageY !== 0) _this.blur();
         if (!_this.props.disabled && _this.props.onChange) {
           _this.props.onChange(!_this.props.checked, event);
diff --git a/lib/table/Table.js b/lib/table/Table.js
index 19c436242..f0540d147 100644
--- a/lib/table/Table.js
+++ b/lib/table/Table.js
@@ -46,7 +46,7 @@ var factory = function factory(TableHead, TableRow) {
     _inherits(Table, _Component);
 
     function Table() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -56,7 +56,7 @@ var factory = function factory(TableHead, TableRow) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Table.__proto__ || Object.getPrototypeOf(Table)).call.apply(_ref, [this].concat(args))), _this), _this.handleFullSelect = function () {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Table)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleFullSelect = function () {
         if (_this.props.onSelect) {
           var _this$props = _this.props;
           var source = _this$props.source;
diff --git a/lib/table/TableRow.js b/lib/table/TableRow.js
index 92f7dc9c0..1514a07e3 100644
--- a/lib/table/TableRow.js
+++ b/lib/table/TableRow.js
@@ -33,7 +33,7 @@ var factory = function factory(Checkbox) {
     _inherits(TableRow, _Component);
 
     function TableRow() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -43,21 +43,8 @@ var factory = function factory(Checkbox) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TableRow.__proto__ || Object.getPrototypeOf(TableRow)).call.apply(_ref, [this].concat(args))), _this), _this.handleInputChange = function (index, key, type, event) {
-        var value = void 0;
-        switch (type) {
-          case 'checkbox':
-            value = event.target.checked;
-            break;
-          // Handle contentEditable
-          case 'text':
-            value = event.target.textContent;
-            break;
-          default:
-            value = event.target.value;
-            break;
-        }
-
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TableRow)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleInputChange = function (index, key, type, event) {
+        var value = type === 'checkbox' ? event.target.checked : event.target.value;
         var onChange = _this.props.model[key].onChange || _this.props.onChange;
         onChange(index, key, value);
       }, _temp), _possibleConstructorReturn(_this, _ret);
@@ -112,24 +99,12 @@ var factory = function factory(Checkbox) {
         var inputType = _utils2.default.inputTypeForPrototype(this.props.model[key].type);
         var inputValue = _utils2.default.prepareValueForInput(value, inputType);
         var checked = inputType === 'checkbox' && value ? true : null;
-
-        if (inputType === 'text') {
-          return _react2.default.createElement(
-            'div',
-            {
-              contentEditable: true,
-              suppressContentEditableWarning: true,
-              onInput: this.handleInputChange.bind(null, index, key, inputType) },
-            inputValue
-          );
-        } else {
-          return _react2.default.createElement('input', {
-            checked: checked,
-            onChange: this.handleInputChange.bind(null, index, key, inputType),
-            type: inputType,
-            value: inputValue
-          });
-        }
+        return _react2.default.createElement('input', {
+          checked: checked,
+          onChange: this.handleInputChange.bind(null, index, key, inputType),
+          type: inputType,
+          value: inputValue
+        });
       }
     }, {
       key: 'render',
@@ -170,4 +145,4 @@ var factory = function factory(Checkbox) {
   return TableRow;
 };
 
-exports.default = factory;
\ No newline at end of file
+exports.default = factory;
diff --git a/lib/tabs/Tab.js b/lib/tabs/Tab.js
index 901468ffa..f1c272a0d 100644
--- a/lib/tabs/Tab.js
+++ b/lib/tabs/Tab.js
@@ -39,7 +39,7 @@ var Tab = function (_Component) {
   _inherits(Tab, _Component);
 
   function Tab() {
-    var _ref;
+    var _Object$getPrototypeO;
 
     var _temp, _this, _ret;
 
@@ -49,7 +49,7 @@ var Tab = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Tab.__proto__ || Object.getPrototypeOf(Tab)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Tab)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function (event) {
       if (!_this.props.disabled && _this.props.onClick) {
         _this.props.onClick(event);
       }
diff --git a/lib/tabs/TabContent.js b/lib/tabs/TabContent.js
index 65bd7a6a6..96f3538be 100644
--- a/lib/tabs/TabContent.js
+++ b/lib/tabs/TabContent.js
@@ -35,7 +35,7 @@ var TabContent = function (_Component) {
   function TabContent() {
     _classCallCheck(this, TabContent);
 
-    return _possibleConstructorReturn(this, (TabContent.__proto__ || Object.getPrototypeOf(TabContent)).apply(this, arguments));
+    return _possibleConstructorReturn(this, Object.getPrototypeOf(TabContent).apply(this, arguments));
   }
 
   _createClass(TabContent, [{
diff --git a/lib/tabs/Tabs.js b/lib/tabs/Tabs.js
index 3e72319b8..1905592cc 100644
--- a/lib/tabs/Tabs.js
+++ b/lib/tabs/Tabs.js
@@ -42,7 +42,7 @@ var factory = function factory(Tab, TabContent) {
     _inherits(Tabs, _Component);
 
     function Tabs() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -52,7 +52,7 @@ var factory = function factory(Tab, TabContent) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Tabs.__proto__ || Object.getPrototypeOf(Tabs)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Tabs)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
         pointer: {}
       }, _this.handleHeaderClick = function (event) {
         var idx = parseInt(event.currentTarget.id);
diff --git a/lib/tabs/__tests__/index.spec.js b/lib/tabs/__tests__/index.spec.js
index 32bca1a3b..de59ddee1 100644
--- a/lib/tabs/__tests__/index.spec.js
+++ b/lib/tabs/__tests__/index.spec.js
@@ -63,7 +63,7 @@ describe('Tabs', function () {
     function Composition() {
       _classCallCheck(this, Composition);
 
-      var _this = _possibleConstructorReturn(this, (Composition.__proto__ || Object.getPrototypeOf(Composition)).call(this));
+      var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Composition).call(this));
 
       _this.state = { index: 0 };
       return _this;
diff --git a/lib/time_picker/Clock.js b/lib/time_picker/Clock.js
index aaa55accb..2b74f0a1c 100644
--- a/lib/time_picker/Clock.js
+++ b/lib/time_picker/Clock.js
@@ -40,7 +40,7 @@ var Clock = function (_Component) {
   _inherits(Clock, _Component);
 
   function Clock() {
-    var _ref;
+    var _Object$getPrototypeO;
 
     var _temp, _this, _ret;
 
@@ -50,7 +50,7 @@ var Clock = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Clock.__proto__ || Object.getPrototypeOf(Clock)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Clock)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
       center: { x: null, y: null },
       radius: 0
     }, _this.handleHourChange = function (hours) {
diff --git a/lib/time_picker/ClockFace.js b/lib/time_picker/ClockFace.js
index b2604a0c2..54ca26407 100644
--- a/lib/time_picker/ClockFace.js
+++ b/lib/time_picker/ClockFace.js
@@ -28,7 +28,7 @@ var Face = function (_Component) {
   _inherits(Face, _Component);
 
   function Face() {
-    var _ref;
+    var _Object$getPrototypeO;
 
     var _temp, _this, _ret;
 
@@ -38,7 +38,7 @@ var Face = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Face.__proto__ || Object.getPrototypeOf(Face)).call.apply(_ref, [this].concat(args))), _this), _this.renderNumber = function (number, idx) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Face)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.renderNumber = function (number, idx) {
       var _this$props = _this.props;
       var active = _this$props.active;
       var radius = _this$props.radius;
diff --git a/lib/time_picker/ClockHand.js b/lib/time_picker/ClockHand.js
index d16bdaeab..053b19e07 100644
--- a/lib/time_picker/ClockHand.js
+++ b/lib/time_picker/ClockHand.js
@@ -34,7 +34,7 @@ var Hand = function (_Component) {
   _inherits(Hand, _Component);
 
   function Hand() {
-    var _ref;
+    var _Object$getPrototypeO;
 
     var _temp, _this, _ret;
 
@@ -44,7 +44,7 @@ var Hand = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Hand.__proto__ || Object.getPrototypeOf(Hand)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Hand)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
       knobWidth: 0
     }, _this.handleMouseMove = function (event) {
       _this.move(_events2.default.getMousePosition(event));
diff --git a/lib/time_picker/ClockHours.js b/lib/time_picker/ClockHours.js
index 3b4ee10fd..85a711ab1 100644
--- a/lib/time_picker/ClockHours.js
+++ b/lib/time_picker/ClockHours.js
@@ -41,7 +41,7 @@ var Hours = function (_Component) {
   _inherits(Hours, _Component);
 
   function Hours() {
-    var _ref;
+    var _Object$getPrototypeO;
 
     var _temp, _this, _ret;
 
@@ -51,7 +51,7 @@ var Hours = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Hours.__proto__ || Object.getPrototypeOf(Hours)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Hours)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
       inner: _this.props.format === '24hr' && _this.props.selected > 0 && _this.props.selected <= 12
     }, _this.handleHandMove = function (degrees, radius) {
       var currentInner = radius < _this.props.radius - _this.props.spacing * innerSpacing;
diff --git a/lib/time_picker/ClockMinutes.js b/lib/time_picker/ClockMinutes.js
index 0b21e74a5..780a90ba4 100644
--- a/lib/time_picker/ClockMinutes.js
+++ b/lib/time_picker/ClockMinutes.js
@@ -37,7 +37,7 @@ var Minutes = function (_Component) {
   _inherits(Minutes, _Component);
 
   function Minutes() {
-    var _ref;
+    var _Object$getPrototypeO;
 
     var _temp, _this, _ret;
 
@@ -47,7 +47,7 @@ var Minutes = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Minutes.__proto__ || Object.getPrototypeOf(Minutes)).call.apply(_ref, [this].concat(args))), _this), _this.handleHandMove = function (degrees) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Minutes)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleHandMove = function (degrees) {
       _this.props.onChange(degrees / step);
     }, _this.handleMouseDown = function (event) {
       _this.refs.hand.mouseStart(event);
diff --git a/lib/time_picker/TimePicker.js b/lib/time_picker/TimePicker.js
index 2e0a06ae3..d4dc2e755 100644
--- a/lib/time_picker/TimePicker.js
+++ b/lib/time_picker/TimePicker.js
@@ -58,7 +58,7 @@ var factory = function factory(TimePickerDialog, Input) {
     _inherits(TimePicker, _Component);
 
     function TimePicker() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -68,7 +68,7 @@ var factory = function factory(TimePickerDialog, Input) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TimePicker.__proto__ || Object.getPrototypeOf(TimePicker)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TimePicker)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
         active: _this.props.active
       }, _this.handleDismiss = function () {
         _this.setState({ active: false });
diff --git a/lib/time_picker/TimePickerDialog.js b/lib/time_picker/TimePickerDialog.js
index 9d4dcefb9..92e55b2db 100644
--- a/lib/time_picker/TimePickerDialog.js
+++ b/lib/time_picker/TimePickerDialog.js
@@ -35,7 +35,7 @@ var factory = function factory(Dialog) {
     _inherits(TimePickerDialog, _Component);
 
     function TimePickerDialog() {
-      var _ref;
+      var _Object$getPrototypeO;
 
       var _temp, _this, _ret;
 
@@ -45,7 +45,7 @@ var factory = function factory(Dialog) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TimePickerDialog.__proto__ || Object.getPrototypeOf(TimePickerDialog)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TimePickerDialog)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
         display: 'hours',
         displayTime: _this.props.value
       }, _this.handleClockChange = function (value) {
diff --git a/lib/tooltip/Tooltip.js b/lib/tooltip/Tooltip.js
index a57b41d73..b77620ef5 100644
--- a/lib/tooltip/Tooltip.js
+++ b/lib/tooltip/Tooltip.js
@@ -78,7 +78,7 @@ var tooltipFactory = function tooltipFactory() {
       _inherits(TooltippedComponent, _Component);
 
       function TooltippedComponent() {
-        var _ref;
+        var _Object$getPrototypeO;
 
         var _temp, _this, _ret;
 
@@ -88,7 +88,7 @@ var tooltipFactory = function tooltipFactory() {
           args[_key] = arguments[_key];
         }
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TooltippedComponent.__proto__ || Object.getPrototypeOf(TooltippedComponent)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TooltippedComponent)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
           active: false,
           position: _this.props.tooltipPosition,
           visible: false
@@ -118,12 +118,12 @@ var tooltipFactory = function tooltipFactory() {
         }
       }, {
         key: 'activate',
-        value: function activate(_ref2) {
+        value: function activate(_ref) {
           var _this2 = this;
 
-          var top = _ref2.top;
-          var left = _ref2.left;
-          var position = _ref2.position;
+          var top = _ref.top;
+          var left = _ref.left;
+          var position = _ref.position;
 
           if (this.timeout) clearTimeout(this.timeout);
           this.setState({ visible: true, position: position });

From 3e1e7b2ee6a436eba3a8c6cc8c66e39eb1cb602b Mon Sep 17 00:00:00 2001
From: Tucker Connelly <web@tuckerconnelly.com>
Date: Mon, 19 Sep 2016 14:25:17 -0400
Subject: [PATCH 0813/1024] Revert "Fix event value"

This reverts commit 6c153026dcdbb7f590646b9f8c0672d286103557.
---
 components/table/TableRow.js | 15 +--------------
 lib/table/TableRow.js        |  2 +-
 2 files changed, 2 insertions(+), 15 deletions(-)

diff --git a/components/table/TableRow.js b/components/table/TableRow.js
index 4049c94eb..00822dcc2 100644
--- a/components/table/TableRow.js
+++ b/components/table/TableRow.js
@@ -21,20 +21,7 @@ const factory = (Checkbox) => {
     };
 
     handleInputChange = (index, key, type, event) => {
-      let value;
-      switch (type) {
-        case 'checkbox':
-          value = event.target.checked;
-          break;
-        // Handle contentEditable
-        case 'text':
-          value = event.target.textContent;
-          break;
-        default:
-          value = event.target.value;
-          break;
-      }
-
+      const value = type === 'checkbox' ? event.target.checked : event.target.value;
       const onChange = this.props.model[key].onChange || this.props.onChange;
       onChange(index, key, value);
     };
diff --git a/lib/table/TableRow.js b/lib/table/TableRow.js
index 1514a07e3..fe751cf88 100644
--- a/lib/table/TableRow.js
+++ b/lib/table/TableRow.js
@@ -43,7 +43,7 @@ var factory = function factory(Checkbox) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TableRow)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleInputChange = function (index, key, type, event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TableRow.__proto__ || Object.getPrototypeOf(TableRow)).call.apply(_ref, [this].concat(args))), _this), _this.handleInputChange = function (index, key, type, event) {
         var value = type === 'checkbox' ? event.target.checked : event.target.value;
         var onChange = _this.props.model[key].onChange || _this.props.onChange;
         onChange(index, key, value);

From 0fb83bfdda3b8885dbd1b00e67bde24980bc648a Mon Sep 17 00:00:00 2001
From: Tucker Connelly <web@tuckerconnelly.com>
Date: Mon, 19 Sep 2016 14:26:07 -0400
Subject: [PATCH 0814/1024] Re-apply changes

---
 components/table/TableRow.js | 43 ++++++++++++++++++++++++++++--------
 1 file changed, 34 insertions(+), 9 deletions(-)

diff --git a/components/table/TableRow.js b/components/table/TableRow.js
index 00822dcc2..38b00d2f9 100644
--- a/components/table/TableRow.js
+++ b/components/table/TableRow.js
@@ -21,7 +21,20 @@ const factory = (Checkbox) => {
     };
 
     handleInputChange = (index, key, type, event) => {
-      const value = type === 'checkbox' ? event.target.checked : event.target.value;
+      let value;
+      switch (type) {
+        case 'checkbox':
+          value = event.target.checked;
+          break;
+        // Handle contentEditable
+        case 'text':
+          value = event.target.textContent;
+          break;
+        default:
+          value = event.target.value;
+          break;
+      }
+
       const onChange = this.props.model[key].onChange || this.props.onChange;
       onChange(index, key, value);
     };
@@ -62,14 +75,26 @@ const factory = (Checkbox) => {
       const inputType = utils.inputTypeForPrototype(this.props.model[key].type);
       const inputValue = utils.prepareValueForInput(value, inputType);
       const checked = inputType === 'checkbox' && value ? true : null;
-      return (
-        <input
-          checked={checked}
-          onChange={this.handleInputChange.bind(null, index, key, inputType)}
-          type={inputType}
-          value={inputValue}
-        />
-      );
+
+      if (inputType === 'text') {
+        return (
+          <div
+            contentEditable
+            suppressContentEditableWarning
+            onInput={this.handleInputChange.bind(null, index, key, inputType)}>
+            {inputValue}
+          </div>
+        );
+      } else {
+        return (
+          <input
+            checked={checked}
+            onChange={this.handleInputChange.bind(null, index, key, inputType)}
+            type={inputType}
+            value={inputValue}
+          />
+        );
+      }
     }
 
     render () {

From 1c259ff435e726d9e1bd459ba81111536d9c597d Mon Sep 17 00:00:00 2001
From: Parmesh Krishen <therealparmesh@outlook.com>
Date: Wed, 7 Sep 2016 16:24:02 -0500
Subject: [PATCH 0815/1024] Fixing issue where closing an overlay on top of
 another overlay re-enables document body scrolling unnecessarily.

---
 components/overlay/Overlay.js | 6 +++---
 lib/overlay/Overlay.js        | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/overlay/Overlay.js b/components/overlay/Overlay.js
index 4bbe09909..5c54e8aa3 100644
--- a/components/overlay/Overlay.js
+++ b/components/overlay/Overlay.js
@@ -33,7 +33,7 @@ class Overlay extends Component {
 
   componentWillUpdate (nextProps) {
     if (nextProps.active && !this.props.active) document.body.style.overflow = 'hidden';
-    if (!nextProps.active && this.props.active) document.body.style.overflow = '';
+    if (!nextProps.active && this.props.active && !document.querySelectorAll('[data-react-toolbox="overlay"]')[1]) document.body.style.overflow = '';
   }
 
   componentDidUpdate () {
@@ -43,7 +43,7 @@ class Overlay extends Component {
   }
 
   componentWillUnmount () {
-    document.body.style.overflow = '';
+    if (!document.querySelectorAll('[data-react-toolbox="overlay"]')[1]) document.body.style.overflow = '';
     if (this.escKeyListener) {
       document.body.removeEventListener('keydown', this.handleEscKey);
       this.escKeyListener = null;
@@ -65,7 +65,7 @@ class Overlay extends Component {
 
     return (
       <Portal>
-        <div className={_className}>
+        <div className={_className} data-react-toolbox="overlay">
           <div className={theme.backdrop} onClick={onClick} />
           {children}
         </div>
diff --git a/lib/overlay/Overlay.js b/lib/overlay/Overlay.js
index 0bf6de75e..f5662715b 100644
--- a/lib/overlay/Overlay.js
+++ b/lib/overlay/Overlay.js
@@ -39,7 +39,7 @@ var Overlay = function (_Component) {
   function Overlay() {
     _classCallCheck(this, Overlay);
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(Overlay).apply(this, arguments));
+    return _possibleConstructorReturn(this, (Overlay.__proto__ || Object.getPrototypeOf(Overlay)).apply(this, arguments));
   }
 
   _createClass(Overlay, [{
@@ -54,7 +54,7 @@ var Overlay = function (_Component) {
     key: 'componentWillUpdate',
     value: function componentWillUpdate(nextProps) {
       if (nextProps.active && !this.props.active) document.body.style.overflow = 'hidden';
-      if (!nextProps.active && this.props.active) document.body.style.overflow = null;
+      if (!nextProps.active && this.props.active && !document.querySelectorAll('[data-react-toolbox="overlay"]')[1]) document.body.style.overflow = '';
     }
   }, {
     key: 'componentDidUpdate',
@@ -66,7 +66,7 @@ var Overlay = function (_Component) {
   }, {
     key: 'componentWillUnmount',
     value: function componentWillUnmount() {
-      document.body.style.overflow = null;
+      if (!document.querySelectorAll('[data-react-toolbox="overlay"]')[1]) document.body.style.overflow = '';
       if (this.escKeyListener) {
         document.body.removeEventListener('keydown', this.handleEscKey);
         this.escKeyListener = null;
@@ -99,7 +99,7 @@ var Overlay = function (_Component) {
         null,
         _react2.default.createElement(
           'div',
-          { className: _className },
+          { className: _className, 'data-react-toolbox': 'overlay' },
           _react2.default.createElement('div', { className: theme.backdrop, onClick: onClick }),
           children
         )

From 4e93e1387d6f6701cc5322c796ccd87362110d64 Mon Sep 17 00:00:00 2001
From: Christopher Hiester <chris.hiester@gmail.com>
Date: Thu, 22 Sep 2016 11:08:21 -0400
Subject: [PATCH 0816/1024] Add table header model details to docs for table

---
 components/table/readme.md | 55 ++++++++++++++++++++++++--------------
 1 file changed, 35 insertions(+), 20 deletions(-)

diff --git a/components/table/readme.md b/components/table/readme.md
index 5353fe4de..77d761844 100644
--- a/components/table/readme.md
+++ b/components/table/readme.md
@@ -1,15 +1,29 @@
 # Table
 
-The Table component is an enhanced version of the standard HTML `<table>`. A data-table consists of rows and columns of well-formatted data, presented with appropriate user interaction capabilities. This component uses a solid typed model, helping you to create formatted formated cells. These cells can be editable if you subscribe to `onChange` method who dispatch then new source with each change.
+The Table component is an enhanced version of the standard HTML `<table>`. A data-table consists of rows and columns of well-formatted data, presented with appropriate user interaction capabilities. This component uses a solid typed model, helping you to create formatted cells. These cells can be editable if you subscribe to `onChange` method who dispatch then new source with each change.
+
+A note about models and table headers: By default, the table header text uses name of the property in the model. Additionally, the table header text is automatically set in title case (first letter of each word capitalized). Thus, if you use the property name `twitter` in your model, the displayed table header will be `Twitter`. You can override the default text by including a `title` attribute, as demonstrated in the example below for the `birthdate` property. You may also override the title case in your own theme's css. In the following example, we force the first letter of the table header text to lowercase, using SCSS syntax:
+
+```
+.table {
+  th {
+    &:first-letter {
+      text-transform: lowercase !important;
+    }
+  }
+}
+```
 
 <!-- example -->
+
 ```jsx
 import Table from 'react-toolbox/lib/table';
 
 const UserModel = {
   name: {type: String},
   twitter: {type: String},
-  birthdate: {type: Date},
+  birthdate: {type: Date,
+    title: 'Date of Birth'},
   cats: {type: Number},
   dogs: {type: Number},
   active: {type: Boolean}
@@ -47,30 +61,31 @@ class TableTest extends React.Component {
     );
   }
 }
+`
 ```
 
 This component can be styled by context providing a theme with the key `RTTable` through the theme provider.
 
 ## Properties
 
-| Name              | Type            | Default         | Description|
-|:-----|:-----|:-----|:-----|
-| `className`       | `String`        | `''`            | Sets a custom class to style the Component.|
-| `heading`         | `Boolean`       | `true`          | If true, component will show a heading using model field names.|
-| `model`           | `Object`        |                 | Object describing the data model that represents each object in the `source`.|
-| `onChange`        | `Function`      |                 | Callback function that is fired when an item in a row changes. If set, rows are editable. |
-| `onSelect`        | `Function`      |                 | Callback function invoked when the row selection changes.|
-| `selectable`      | `Boolean`       | `true`          | If true, each row will display a checkbox to allow the user to select that one row.|
-| `multiSelectable` | `Boolean`       | `true`          | If true, the header and each row will display a checkbox to allow the user to select multiple rows.|
-| `selected`        | `Array`         |                 | Array of indexes of the items in the source that should appear as selected.|
-| `source`          | `Array`         |                 | Array of objects representing each item to show.|
+Name              | Type       | Default | Description
+:---------------- | :--------- | :------ | :--------------------------------------------------------------------------------------------------
+`className`       | `String`   | `''`    | Sets a custom class to style the Component.
+`heading`         | `Boolean`  | `true`  | If true, component will show a heading using model field names.
+`model`           | `Object`   |         | Object describing the data model that represents each object in the `source`.
+`onChange`        | `Function` |         | Callback function that is fired when an item in a row changes. If set, rows are editable.
+`onSelect`        | `Function` |         | Callback function invoked when the row selection changes.
+`selectable`      | `Boolean`  | `true`  | If true, each row will display a checkbox to allow the user to select that one row.
+`multiSelectable` | `Boolean`  | `true`  | If true, the header and each row will display a checkbox to allow the user to select multiple rows.
+`selected`        | `Array`    |         | Array of indexes of the items in the source that should appear as selected.
+`source`          | `Array`    |         | Array of objects representing each item to show.
 
 ## Theme
 
-| Name     | Description|
-|:---------|:-----------|
-| `editable` | It will be added to a row in case it is editable.|
-| `row` | Used for the row element.|
-| `selectable` | It will be added to a row in case it is selectable.|
-| `selected` | Added to a row in case it is selected.|
-| `table` | Classname used for the root element.|
+Name         | Description
+:----------- | :--------------------------------------------------
+`editable`   | It will be added to a row in case it is editable.
+`row`        | Used for the row element.
+`selectable` | It will be added to a row in case it is selectable.
+`selected`   | Added to a row in case it is selected.
+`table`      | Classname used for the root element.

From 6940013182d6faa98cec4027010ec69ed24d9010 Mon Sep 17 00:00:00 2001
From: Christopher Hiester <chris.hiester@gmail.com>
Date: Thu, 22 Sep 2016 11:18:10 -0400
Subject: [PATCH 0817/1024] adjust scss after testing

---
 components/table/readme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/table/readme.md b/components/table/readme.md
index 77d761844..94950a5a2 100644
--- a/components/table/readme.md
+++ b/components/table/readme.md
@@ -8,7 +8,7 @@ A note about models and table headers: By default, the table header text uses na
 .table {
   th {
     &:first-letter {
-      text-transform: lowercase !important;
+      text-transform: lowercase;
     }
   }
 }

From b8516b41ad9129f813615b0dbcf788396c1e523b Mon Sep 17 00:00:00 2001
From: Christopher Hiester <chris.hiester@gmail.com>
Date: Thu, 22 Sep 2016 11:19:38 -0400
Subject: [PATCH 0818/1024] add emphasis to note

---
 components/table/readme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/table/readme.md b/components/table/readme.md
index 94950a5a2..4a3853740 100644
--- a/components/table/readme.md
+++ b/components/table/readme.md
@@ -2,7 +2,7 @@
 
 The Table component is an enhanced version of the standard HTML `<table>`. A data-table consists of rows and columns of well-formatted data, presented with appropriate user interaction capabilities. This component uses a solid typed model, helping you to create formatted cells. These cells can be editable if you subscribe to `onChange` method who dispatch then new source with each change.
 
-A note about models and table headers: By default, the table header text uses name of the property in the model. Additionally, the table header text is automatically set in title case (first letter of each word capitalized). Thus, if you use the property name `twitter` in your model, the displayed table header will be `Twitter`. You can override the default text by including a `title` attribute, as demonstrated in the example below for the `birthdate` property. You may also override the title case in your own theme's css. In the following example, we force the first letter of the table header text to lowercase, using SCSS syntax:
+*A note about models and table headers*: By default, the table header text uses name of the property in the model. Additionally, the table header text is automatically set in title case (first letter of each word capitalized). Thus, if you use the property name `twitter` in your model, the displayed table header will be `Twitter`. You can override the default text by including a `title` attribute, as demonstrated in the example below for the `birthdate` property. You may also override the title case in your own theme's css. In the following example, we force the first letter of the table header text to lowercase, using SCSS syntax:
 
 ```
 .table {

From d01ff6db7eab1edb7d763dbd6b01b129c485c739 Mon Sep 17 00:00:00 2001
From: Tucker Connelly <web@tuckerconnelly.com>
Date: Thu, 22 Sep 2016 11:56:45 -0700
Subject: [PATCH 0819/1024] Use guard clause instead of conditional

---
 components/table/TableRow.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/components/table/TableRow.js b/components/table/TableRow.js
index 38b00d2f9..24e59ff25 100644
--- a/components/table/TableRow.js
+++ b/components/table/TableRow.js
@@ -85,16 +85,16 @@ const factory = (Checkbox) => {
             {inputValue}
           </div>
         );
-      } else {
-        return (
-          <input
-            checked={checked}
-            onChange={this.handleInputChange.bind(null, index, key, inputType)}
-            type={inputType}
-            value={inputValue}
-          />
-        );
       }
+
+      return (
+        <input
+          checked={checked}
+          onChange={this.handleInputChange.bind(null, index, key, inputType)}
+          type={inputType}
+          value={inputValue}
+        />
+      );
     }
 
     render () {

From 8b5193829a6b552e26bdc8ce7a14b57aa481b701 Mon Sep 17 00:00:00 2001
From: Amila Welihinda <amilajack@users.noreply.github.com>
Date: Sun, 25 Sep 2016 10:09:41 -0700
Subject: [PATCH 0820/1024] Removed semvar lock from travis ci node versions

---
 .travis.yml | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/.travis.yml b/.travis.yml
index 18457a66c..32f6e0478 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,6 +1,11 @@
+sudo: false
+
 language: node_js
+
 node_js:
-  - "4.3.2"
+  - 6
+  - 4
+  
 script:
   - npm run lint
   - npm test

From 390e7694db89529fb8d58217a11502de6d81cbf3 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 27 Sep 2016 00:00:20 +0200
Subject: [PATCH 0821/1024] Fix #787

---
 components/tooltip/Tooltip.js | 5 ++++-
 spec/components/tooltip.js    | 5 +++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/components/tooltip/Tooltip.js b/components/tooltip/Tooltip.js
index 8da69e6f6..64d3ff360 100644
--- a/components/tooltip/Tooltip.js
+++ b/components/tooltip/Tooltip.js
@@ -45,7 +45,10 @@ const tooltipFactory = (options = {}) => {
           tooltipActive: PropTypes.string,
           tooltipWrapper: PropTypes.string
         }),
-        tooltip: PropTypes.string,
+        tooltip: PropTypes.oneOfType([
+          PropTypes.string,
+          PropTypes.node
+        ]),
         tooltipDelay: PropTypes.number,
         tooltipHideOnClick: PropTypes.bool,
         tooltipPosition: PropTypes.oneOf(Object.keys(POSITION).map(key => POSITION[key]))
diff --git a/spec/components/tooltip.js b/spec/components/tooltip.js
index 525076362..8e87a2965 100644
--- a/spec/components/tooltip.js
+++ b/spec/components/tooltip.js
@@ -17,6 +17,11 @@ const TooltipTest = () => (
     <TooltipButton label='Bookmark' icon='bookmark' raised primary tooltip='Bookmark Tooltip' tooltipDelay={1000} />
     <TooltipButton icon='add' floating accent tooltip='Floating Tooltip' />
     <TooltipButton icon='add' floating disabled tooltip='Floating can not be shown' />
+    <TooltipButton
+      icon='add'
+      floating
+      tooltip={<div><p>An example with</p><p>Multiline!</p></div>}
+    />
     <TooltipInput tooltip='lorem ipsum...' />
     <p>Lorem ipsum dolor sit amet, <TooltipStrong tooltip='This is a auto show tooltip'>consectetur</TooltipStrong> adipiscing elit.</p>
   </section>

From f34f3788fdad10cb6e452716b6bd793c160fedfe Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 27 Sep 2016 00:00:47 +0200
Subject: [PATCH 0822/1024] Latest build

---
 lib/app_bar/AppBar.js            | 20 +++++++++++---------
 lib/app_bar/index.js             |  6 ++----
 lib/app_bar/theme.scss           |  6 ++----
 lib/autocomplete/Autocomplete.js |  4 ++++
 lib/card/CardTitle.js            |  2 +-
 lib/date_picker/_config.scss     |  2 +-
 lib/date_picker/theme.scss       |  1 +
 lib/overlay/Overlay.js           |  4 ++--
 lib/tooltip/Tooltip.js           |  2 +-
 lib/utils/time.js                |  7 +++++++
 10 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/lib/app_bar/AppBar.js b/lib/app_bar/AppBar.js
index 9358457b2..d800d1dc2 100644
--- a/lib/app_bar/AppBar.js
+++ b/lib/app_bar/AppBar.js
@@ -17,9 +17,9 @@ var _reactCssThemr = require('react-css-themr');
 
 var _identifiers = require('../identifiers.js');
 
-var _FontIcon = require('../font_icon/FontIcon.js');
+var _IconButton = require('../button/IconButton.js');
 
-var _FontIcon2 = _interopRequireDefault(_FontIcon);
+var _IconButton2 = _interopRequireDefault(_IconButton);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -27,7 +27,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-var factory = function factory(FontIcon) {
+var factory = function factory(IconButton) {
   var AppBar = function AppBar(_ref) {
     var _classnames;
 
@@ -46,20 +46,22 @@ var factory = function factory(FontIcon) {
     return _react2.default.createElement(
       'header',
       { className: className, 'data-react-toolbox': 'app-bar' },
-      leftIcon && _react2.default.createElement(FontIcon, {
+      leftIcon && _react2.default.createElement(IconButton, {
+        inverse: true,
         className: (0, _classnames3.default)(theme.leftIcon),
         onClick: onLeftIconClick,
-        value: leftIcon }),
+        icon: leftIcon }),
       title && _react2.default.createElement(
         'h1',
         { className: (0, _classnames3.default)(theme.title) },
         title
       ),
       children,
-      rightIcon && _react2.default.createElement(FontIcon, {
+      rightIcon && _react2.default.createElement(IconButton, {
+        inverse: true,
         className: (0, _classnames3.default)(theme.rightIcon),
         onClick: onRightIconClick,
-        value: rightIcon })
+        icon: rightIcon })
     );
   };
 
@@ -92,7 +94,7 @@ var factory = function factory(FontIcon) {
   return AppBar;
 };
 
-var AppBar = factory(_FontIcon2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.APP_BAR, null)(AppBar);
+var AppBar = factory(_IconButton2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.APP_BAR)(AppBar);
 exports.appBarFactory = factory;
 exports.AppBar = AppBar;
\ No newline at end of file
diff --git a/lib/app_bar/index.js b/lib/app_bar/index.js
index a7f72b869..101ec9466 100644
--- a/lib/app_bar/index.js
+++ b/lib/app_bar/index.js
@@ -11,9 +11,7 @@ var _identifiers = require('../identifiers.js');
 
 var _AppBar = require('./AppBar.js');
 
-var _FontIcon = require('../font_icon/FontIcon.js');
-
-var _FontIcon2 = _interopRequireDefault(_FontIcon);
+var _button = require('../button');
 
 var _theme = require('./theme.scss');
 
@@ -21,7 +19,7 @@ var _theme2 = _interopRequireDefault(_theme);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var AppBar = (0, _AppBar.appBarFactory)(_FontIcon2.default);
+var AppBar = (0, _AppBar.appBarFactory)(_button.IconButton);
 var ThemedAppBar = (0, _reactCssThemr.themr)(_identifiers.APP_BAR, _theme2.default)(AppBar);
 
 exports.default = ThemedAppBar;
diff --git a/lib/app_bar/theme.scss b/lib/app_bar/theme.scss
index f0d55d0c4..4c4f93d70 100644
--- a/lib/app_bar/theme.scss
+++ b/lib/app_bar/theme.scss
@@ -47,13 +47,11 @@
   }
 
   .leftIcon {
-    padding: 1.2 * $unit 1.2 * $unit 1.2 * $unit 0;
-    text-align: left;
+    margin-left: -1.2 * $unit;
   }
 
   .rightIcon {
-    padding: 1.2 * $unit 0 1.2 * $unit 1.2 * $unit;
     margin-left: auto;
-    text-align: right;
+    margin-right: -1.2 * $unit;
   }
 }
diff --git a/lib/autocomplete/Autocomplete.js b/lib/autocomplete/Autocomplete.js
index dfb005d15..8b3235683 100644
--- a/lib/autocomplete/Autocomplete.js
+++ b/lib/autocomplete/Autocomplete.js
@@ -88,11 +88,13 @@ var factory = function factory(Chip, Input) {
         });
       }, _this.handleQueryBlur = function () {
         if (_this.state.focus) _this.setState({ focus: false });
+        if (_this.props.onBlur) _this.props.onBlur();
       }, _this.handleQueryChange = function (value) {
         _this.setState({ query: value, showAllSuggestions: false });
       }, _this.handleQueryFocus = function () {
         _this.refs.suggestions.scrollTop = 0;
         _this.setState({ active: '', focus: true });
+        if (_this.props.onFocus) _this.props.onFocus();
       }, _this.handleQueryKeyDown = function (event) {
         // Clear query when pressing backspace and showing all suggestions.
         var shouldClearQuery = event.which === 8 && _this.props.showSuggestionsWhenValueIsSet && _this.state.showAllSuggestions;
@@ -441,7 +443,9 @@ var factory = function factory(Chip, Input) {
     error: _react.PropTypes.string,
     label: _react.PropTypes.string,
     multiple: _react.PropTypes.bool,
+    onBlur: _react.PropTypes.func,
     onChange: _react.PropTypes.func,
+    onFocus: _react.PropTypes.func,
     selectedPosition: _react.PropTypes.oneOf(['above', 'below']),
     showSuggestionsWhenValueIsSet: _react.PropTypes.bool,
     source: _react.PropTypes.any,
diff --git a/lib/card/CardTitle.js b/lib/card/CardTitle.js
index fbf2b62e1..f4f1898d8 100644
--- a/lib/card/CardTitle.js
+++ b/lib/card/CardTitle.js
@@ -47,7 +47,7 @@ var factory = function factory(Avatar) {
     return _react2.default.createElement(
       'div',
       _extends({ className: classes }, other),
-      typeof avatar === 'string' ? _react2.default.createElement(Avatar, { image: avatar }) : avatar,
+      typeof avatar === 'string' ? _react2.default.createElement(Avatar, { image: avatar, theme: theme }) : avatar,
       _react2.default.createElement(
         'div',
         null,
diff --git a/lib/date_picker/_config.scss b/lib/date_picker/_config.scss
index ba9155399..62acee078 100644
--- a/lib/date_picker/_config.scss
+++ b/lib/date_picker/_config.scss
@@ -21,7 +21,7 @@ $calendar-primary-contrast-color: $calendar-primary-contrast !default;
 $calendar-primary-hover-color: rgba($calendar-primary, .21) !default;
 $calendar-arrows-color: $palette-grey-600 !default;
 $calendar-arrows-font-size: 2 * $unit !default;
-$calendar-year-font-size: 2.4 !default;
+$calendar-year-font-size: 2.4 * $unit !default;
 $calendar-day-font-size: 1.3 * $unit !default;
 $calendar-day-disable-opacity: 0.25 !default;
 $calendar-row-height: 3 * $unit !default;
diff --git a/lib/date_picker/theme.scss b/lib/date_picker/theme.scss
index ef3c6b67f..a1ee39156 100644
--- a/lib/date_picker/theme.scss
+++ b/lib/date_picker/theme.scss
@@ -101,6 +101,7 @@
     cursor: pointer;
     &.active {
       font-size: $calendar-year-font-size;
+      font-weight: $font-weight-semi-bold;
       color: $calendar-primary-color;
     }
   }
diff --git a/lib/overlay/Overlay.js b/lib/overlay/Overlay.js
index 0bf6de75e..c75d7943b 100644
--- a/lib/overlay/Overlay.js
+++ b/lib/overlay/Overlay.js
@@ -54,7 +54,7 @@ var Overlay = function (_Component) {
     key: 'componentWillUpdate',
     value: function componentWillUpdate(nextProps) {
       if (nextProps.active && !this.props.active) document.body.style.overflow = 'hidden';
-      if (!nextProps.active && this.props.active) document.body.style.overflow = null;
+      if (!nextProps.active && this.props.active) document.body.style.overflow = '';
     }
   }, {
     key: 'componentDidUpdate',
@@ -66,7 +66,7 @@ var Overlay = function (_Component) {
   }, {
     key: 'componentWillUnmount',
     value: function componentWillUnmount() {
-      document.body.style.overflow = null;
+      document.body.style.overflow = '';
       if (this.escKeyListener) {
         document.body.removeEventListener('keydown', this.handleEscKey);
         this.escKeyListener = null;
diff --git a/lib/tooltip/Tooltip.js b/lib/tooltip/Tooltip.js
index b77620ef5..cf4b75bf9 100644
--- a/lib/tooltip/Tooltip.js
+++ b/lib/tooltip/Tooltip.js
@@ -276,7 +276,7 @@ var tooltipFactory = function tooltipFactory() {
         tooltipActive: _react.PropTypes.string,
         tooltipWrapper: _react.PropTypes.string
       }),
-      tooltip: _react.PropTypes.string,
+      tooltip: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.node]),
       tooltipDelay: _react.PropTypes.number,
       tooltipHideOnClick: _react.PropTypes.bool,
       tooltipPosition: _react.PropTypes.oneOf(Object.keys(POSITION).map(function (key) {
diff --git a/lib/utils/time.js b/lib/utils/time.js
index 4774957c3..f7229353f 100644
--- a/lib/utils/time.js
+++ b/lib/utils/time.js
@@ -115,6 +115,13 @@ var dateLocales = {
     weekdays: 'dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi'.split('_'),
     weekdaysShort: 'dim._lun._mar._mer._jeu._ven._sam.'.split('_'),
     weekdaysLetter: []
+  },
+  ru: {
+    months: 'Январь_Февраль_Март_Апрель_Май_Июнь_Июльy_Август_Сентябрь_Октябрь_Ноябрь_Декабрь'.split('_'),
+    monthsShort: 'Янв_Фев_Мар_Апр_Май_Июн_Июл_Авг_Сен_Окт_Ноя_Дек'.split('_'),
+    weekdays: 'Воскресенье_Понедельник_Вторник_Среда_Четверг_Пятница_Суббота'.split('_'),
+    weekdaysShort: 'Вс_Пн_Вт_Ср_Чт_Пт_Сб'.split('_'),
+    weekdaysLetter: []
   }
 };
 var time = {

From 70b0a3f595410b1841cd6d5f786f7dfe9f5ef253 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 27 Sep 2016 00:18:23 +0200
Subject: [PATCH 0823/1024] Fixes #794

---
 components/slider/Slider.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/slider/Slider.js b/components/slider/Slider.js
index 691d42390..9b3670fc6 100644
--- a/components/slider/Slider.js
+++ b/components/slider/Slider.js
@@ -4,7 +4,6 @@ import classnames from 'classnames';
 import { themr } from 'react-css-themr';
 import { SLIDER } from '../identifiers.js';
 import events from '../utils/events.js';
-import prefixer from '../utils/prefixer.js';
 import utils from '../utils/utils.js';
 import InjectProgressBar from '../progress_bar/ProgressBar.js';
 import InjectInput from '../input/Input.js';
@@ -186,7 +185,8 @@ const factory = (ProgressBar, Input) => {
 
     knobOffset () {
       const { max, min } = this.props;
-      return this.state.sliderLength * (this.props.value - min) / (max - min);
+      const translated = this.state.sliderLength * (this.props.value - min) / (max - min);
+      return translated * 100 / this.state.sliderLength;
     }
 
     move (position) {
@@ -252,7 +252,7 @@ const factory = (ProgressBar, Input) => {
 
     render () {
       const { theme } = this.props;
-      const knobStyles = prefixer({transform: `translateX(${this.knobOffset()}px)`});
+      const knobStyles = {left: `${this.knobOffset()}%`};
       const className = classnames(theme.slider, {
         [theme.editable]: this.props.editable,
         [theme.pinned]: this.props.pinned,

From dea14144b8969eca748d4899fb05bc8c52734a31 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 27 Sep 2016 00:19:14 +0200
Subject: [PATCH 0824/1024] Latest build

---
 lib/date_picker/DatePicker.js | 6 ++++--
 lib/overlay/Overlay.js        | 6 +++---
 lib/slider/Slider.js          | 9 +++------
 lib/time_picker/TimePicker.js | 6 ++++--
 4 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/lib/date_picker/DatePicker.js b/lib/date_picker/DatePicker.js
index c029e7b20..c969479b4 100644
--- a/lib/date_picker/DatePicker.js
+++ b/lib/date_picker/DatePicker.js
@@ -86,9 +86,10 @@ var factory = function factory(Input, DatePickerDialog) {
       }, _this.handleInputBlur = function (event) {
         _events2.default.pauseEvent(event);
         _this.setState({ active: false });
-      }, _this.handleInputMouseDown = function (event) {
+      }, _this.handleInputClick = function (event) {
         _events2.default.pauseEvent(event);
         _this.setState({ active: true });
+        if (_this.props.onClick) _this.props.onClick(event);
       }, _this.handleInputKeyPress = function (event) {
         if (event.charCode === 13) {
           _events2.default.pauseEvent(event);
@@ -143,7 +144,7 @@ var factory = function factory(Input, DatePickerDialog) {
             name: this.props.name,
             onFocus: this.handleInputFocus,
             onKeyPress: this.handleInputKeyPress,
-            onMouseDown: this.handleInputMouseDown,
+            onClick: this.handleInputClick,
             readOnly: true,
             type: 'text',
             value: formattedDate
@@ -187,6 +188,7 @@ var factory = function factory(Input, DatePickerDialog) {
     onChange: _react.PropTypes.func,
     onEscKeyDown: _react.PropTypes.func,
     onKeyPress: _react.PropTypes.func,
+    onClick: _react.PropTypes.func,
     onOverlayClick: _react.PropTypes.func,
     readonly: _react.PropTypes.bool,
     sundayFirstDayOfWeek: _react2.default.PropTypes.bool,
diff --git a/lib/overlay/Overlay.js b/lib/overlay/Overlay.js
index c75d7943b..21d96c8cd 100644
--- a/lib/overlay/Overlay.js
+++ b/lib/overlay/Overlay.js
@@ -54,7 +54,7 @@ var Overlay = function (_Component) {
     key: 'componentWillUpdate',
     value: function componentWillUpdate(nextProps) {
       if (nextProps.active && !this.props.active) document.body.style.overflow = 'hidden';
-      if (!nextProps.active && this.props.active) document.body.style.overflow = '';
+      if (!nextProps.active && this.props.active && !document.querySelectorAll('[data-react-toolbox="overlay"]')[1]) document.body.style.overflow = '';
     }
   }, {
     key: 'componentDidUpdate',
@@ -66,7 +66,7 @@ var Overlay = function (_Component) {
   }, {
     key: 'componentWillUnmount',
     value: function componentWillUnmount() {
-      document.body.style.overflow = '';
+      if (!document.querySelectorAll('[data-react-toolbox="overlay"]')[1]) document.body.style.overflow = '';
       if (this.escKeyListener) {
         document.body.removeEventListener('keydown', this.handleEscKey);
         this.escKeyListener = null;
@@ -99,7 +99,7 @@ var Overlay = function (_Component) {
         null,
         _react2.default.createElement(
           'div',
-          { className: _className },
+          { className: _className, 'data-react-toolbox': 'overlay' },
           _react2.default.createElement('div', { className: theme.backdrop, onClick: onClick }),
           children
         )
diff --git a/lib/slider/Slider.js b/lib/slider/Slider.js
index c838283e5..cfd2171b4 100644
--- a/lib/slider/Slider.js
+++ b/lib/slider/Slider.js
@@ -27,10 +27,6 @@ var _events = require('../utils/events.js');
 
 var _events2 = _interopRequireDefault(_events);
 
-var _prefixer = require('../utils/prefixer.js');
-
-var _prefixer2 = _interopRequireDefault(_prefixer);
-
 var _utils = require('../utils/utils.js');
 
 var _utils2 = _interopRequireDefault(_utils);
@@ -197,7 +193,8 @@ var factory = function factory(ProgressBar, Input) {
         var max = _props.max;
         var min = _props.min;
 
-        return this.state.sliderLength * (this.props.value - min) / (max - min);
+        var translated = this.state.sliderLength * (this.props.value - min) / (max - min);
+        return translated * 100 / this.state.sliderLength;
       }
     }, {
       key: 'move',
@@ -282,7 +279,7 @@ var factory = function factory(ProgressBar, Input) {
 
         var theme = this.props.theme;
 
-        var knobStyles = (0, _prefixer2.default)({ transform: 'translateX(' + this.knobOffset() + 'px)' });
+        var knobStyles = { left: this.knobOffset() + '%' };
         var className = (0, _classnames3.default)(theme.slider, (_classnames = {}, _defineProperty(_classnames, theme.editable, this.props.editable), _defineProperty(_classnames, theme.pinned, this.props.pinned), _defineProperty(_classnames, theme.pressed, this.state.pressed), _defineProperty(_classnames, theme.ring, this.props.value === this.props.min), _classnames), this.props.className);
 
         return _react2.default.createElement(
diff --git a/lib/time_picker/TimePicker.js b/lib/time_picker/TimePicker.js
index d4dc2e755..f44cc0402 100644
--- a/lib/time_picker/TimePicker.js
+++ b/lib/time_picker/TimePicker.js
@@ -78,9 +78,10 @@ var factory = function factory(TimePickerDialog, Input) {
       }, _this.handleInputBlur = function (event) {
         _events2.default.pauseEvent(event);
         _this.setState({ active: false });
-      }, _this.handleInputMouseDown = function (event) {
+      }, _this.handleInputClick = function (event) {
         _events2.default.pauseEvent(event);
         _this.setState({ active: true });
+        if (_this.props.onClick) _this.props.onClick(event);
       }, _this.handleInputKeyPress = function (event) {
         if (event.charCode === 13) {
           _events2.default.pauseEvent(event);
@@ -125,7 +126,7 @@ var factory = function factory(TimePickerDialog, Input) {
             label: this.props.label,
             name: this.props.name,
             onKeyPress: this.handleInputKeyPress,
-            onMouseDown: this.handleInputMouseDown,
+            onClick: this.handleInputClick,
             readOnly: true,
             type: 'text',
             value: formattedTime
@@ -160,6 +161,7 @@ var factory = function factory(TimePickerDialog, Input) {
     onChange: _react.PropTypes.func,
     onEscKeyDown: _react.PropTypes.func,
     onKeyPress: _react.PropTypes.func,
+    onClick: _react.PropTypes.func,
     onOverlayClick: _react.PropTypes.func,
     readonly: _react.PropTypes.bool,
     theme: _react.PropTypes.shape({

From 2ce1d4c2db199774dd2d9fd6862b1f7cae07efe7 Mon Sep 17 00:00:00 2001
From: Stian Jensen <me@stianj.com>
Date: Tue, 27 Sep 2016 15:28:26 +0200
Subject: [PATCH 0825/1024] Apply Checkbox style property to internal .check

This will allow you to override the styles of the visible check element
instead of the hidden input element.

This fixes #791.
---
 components/checkbox/Check.js    | 6 ++++--
 components/checkbox/Checkbox.js | 3 ++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/components/checkbox/Check.js b/components/checkbox/Check.js
index e06c44423..30595954f 100644
--- a/components/checkbox/Check.js
+++ b/components/checkbox/Check.js
@@ -2,11 +2,12 @@ import React, { PropTypes } from 'react';
 import classnames from 'classnames';
 
 const factory = (ripple) => {
-  const Check = ({checked, children, onMouseDown, theme}) => (
+  const Check = ({checked, children, onMouseDown, theme, style}) => (
     <div
       data-react-toolbox='check'
       className={classnames(theme.check, { [theme.checked]: checked })}
       onMouseDown={onMouseDown}
+      style={style}
     >
       {children}
     </div>
@@ -19,7 +20,8 @@ const factory = (ripple) => {
     theme: PropTypes.shape({
       check: PropTypes.string,
       checked: PropTypes.string
-    })
+    }),
+    style: PropTypes.object
   };
 
   return ripple(Check);
diff --git a/components/checkbox/Checkbox.js b/components/checkbox/Checkbox.js
index 5f7128ea3..9aef31c42 100644
--- a/components/checkbox/Checkbox.js
+++ b/components/checkbox/Checkbox.js
@@ -47,7 +47,7 @@ const factory = (Check) => {
     }
 
     render () {
-      const { onChange, theme, ...others } = this.props; //eslint-disable-line no-unused-vars
+      const { onChange, theme, style, ...others } = this.props; //eslint-disable-line no-unused-vars
       const className = classnames(theme.field, {
         [theme.disabled]: this.props.disabled
       }, this.props.className);
@@ -66,6 +66,7 @@ const factory = (Check) => {
             checked={this.props.checked}
             disabled={this.props.disabled}
             rippleClassName={theme.ripple}
+            style={style}
             theme={this.props.theme}
           />
           {this.props.label ? <span data-react-toolbox='label' className={theme.text}>{this.props.label}</span> : null}

From b67f4c7d0919f06a66d149e15a611fa1dd03a36d Mon Sep 17 00:00:00 2001
From: Sreehari <hari_sree@yahoo.com>
Date: Wed, 28 Sep 2016 21:34:52 +0530
Subject: [PATCH 0826/1024] Fix multiple default exports in Datepicker

---
 components/date_picker/index.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/components/date_picker/index.js b/components/date_picker/index.js
index 09b730d81..c9242d321 100644
--- a/components/date_picker/index.js
+++ b/components/date_picker/index.js
@@ -1,5 +1,3 @@
-export default from './DatePicker';
-
 import { themr } from 'react-css-themr';
 import { DATE_PICKER, DIALOG } from '../identifiers.js';
 import { datePickerFactory } from './DatePicker.js';

From 7c39493b9ba3ea8ebc1aec9d3f25458f0bba39e3 Mon Sep 17 00:00:00 2001
From: Ryan McAfee <Ryan.McAfee@eleadcrm.com>
Date: Wed, 28 Sep 2016 12:52:36 -0500
Subject: [PATCH 0827/1024] Removed duplicate export from Datepicker Fixed
 issue with sass npm script not working on Windows

---
 components/date_picker/index.js | 2 --
 package.json                    | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/components/date_picker/index.js b/components/date_picker/index.js
index 09b730d81..c9242d321 100644
--- a/components/date_picker/index.js
+++ b/components/date_picker/index.js
@@ -1,5 +1,3 @@
-export default from './DatePicker';
-
 import { themr } from 'react-css-themr';
 import { DATE_PICKER, DIALOG } from '../identifiers.js';
 import { datePickerFactory } from './DatePicker.js';
diff --git a/package.json b/package.json
index ab1f791ee..776bdc375 100644
--- a/package.json
+++ b/package.json
@@ -105,7 +105,7 @@
     "prebuild": "npm run clean",
     "prepublish": "npm run build",
     "release": "bumped release",
-    "sass": "cpx './components/**/*.scss' ./lib",
+    "sass": "cpx \"./components/**/*.scss\" ./lib",
     "start": "cross-env NODE_ENV=development UV_THREADPOOL_SIZE=100 node ./server",
     "test": "cross-env NODE_ENV=test karma start",
     "test:watch": "cross-env NODE_ENV=test karma start --no-single-run",

From ee6f0d7275a050747ca3ea94bc2dabb465cb3638 Mon Sep 17 00:00:00 2001
From: Ryan McAfee <Ryan.McAfee@eleadcrm.com>
Date: Wed, 28 Sep 2016 12:56:33 -0500
Subject: [PATCH 0828/1024] Bugfix: Typescript definitions can now be copied
 over on Windows

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 776bdc375..1056be0d4 100644
--- a/package.json
+++ b/package.json
@@ -109,7 +109,7 @@
     "start": "cross-env NODE_ENV=development UV_THREADPOOL_SIZE=100 node ./server",
     "test": "cross-env NODE_ENV=test karma start",
     "test:watch": "cross-env NODE_ENV=test karma start --no-single-run",
-    "tsd": "cpx './components/**/*.d.ts' ./lib"
+    "tsd": "cpx \"./components/**/*.d.ts\" ./lib"
   },
   "license": "MIT",
   "peerDependencies": {

From d374cc5c6424529f011c1efa3c9d6c7a0eebd5cc Mon Sep 17 00:00:00 2001
From: Ryan McAfee <Ryan.McAfee@eleadcrm.com>
Date: Wed, 28 Sep 2016 13:11:06 -0500
Subject: [PATCH 0829/1024] Added row click support

---
 components/table/Table.js    | 5 +++++
 components/table/TableRow.js | 3 +--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/components/table/Table.js b/components/table/Table.js
index f52f464ba..7e42e4f67 100644
--- a/components/table/Table.js
+++ b/components/table/Table.js
@@ -61,6 +61,10 @@ const factory = (TableHead, TableRow) => {
       }
     };
 
+    handleRowClick = (index, event) => {
+      this.props.onRowClick ? this.props.onRowClick(index, event) : "";
+    }
+
     renderHead () {
       if (this.props.heading) {
         const {model, selected, source, selectable, multiSelectable} = this.props;
@@ -90,6 +94,7 @@ const factory = (TableHead, TableRow) => {
               model={model}
               onChange={onChange ? this.handleRowChange.bind(this) : undefined}
               onSelect={this.handleRowSelect.bind(this, index)}
+              onRowClick={this.handleRowClick.bind(this, index)}
               selectable={selectable}
               selected={selected.indexOf(index) !== -1}
               theme={theme}
diff --git a/components/table/TableRow.js b/components/table/TableRow.js
index 00822dcc2..2fe0abe6c 100644
--- a/components/table/TableRow.js
+++ b/components/table/TableRow.js
@@ -8,7 +8,6 @@ const factory = (Checkbox) => {
       data: PropTypes.object,
       index: PropTypes.number,
       model: PropTypes.object,
-      onChange: PropTypes.func,
       onSelect: PropTypes.func,
       selectable: PropTypes.bool,
       selected: PropTypes.bool,
@@ -38,7 +37,7 @@ const factory = (Checkbox) => {
 
     renderCells () {
       return Object.keys(this.props.model).map((key) => {
-        return <td key={key}>{this.renderCell(key)}</td>;
+        return <td key={key} onClick={this.props.onRowClick}>{this.renderCell(key)}</td>
       });
     }
 

From 31136186fe0ab3eb5b8b4d5b2b164de7dc1458be Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 2 Oct 2016 12:38:45 +0200
Subject: [PATCH 0830/1024] Fixes #797

---
 components/radio/_config.scss |  2 +-
 components/radio/theme.scss   | 13 ++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/components/radio/_config.scss b/components/radio/_config.scss
index 42bc3e9dd..0c335c7cc 100644
--- a/components/radio/_config.scss
+++ b/components/radio/_config.scss
@@ -1,5 +1,5 @@
 $radio-field-margin-bottom: 1.5 * $unit !default;
-$radio-button-size: 1.6 * $unit !default;
+$radio-button-size: 2 * $unit !default;
 $radio-inner-margin: $radio-button-size / 4 !default;
 $radio-inner-color: $color-primary !default;
 $radio-focus-color: rgba($color-black, 0.1) !default;
diff --git a/components/radio/theme.scss b/components/radio/theme.scss
index 5d0645089..93eac42ef 100644
--- a/components/radio/theme.scss
+++ b/components/radio/theme.scss
@@ -13,16 +13,15 @@
   border: .2 * $unit solid $radio-text-color;
   border-radius: 50%;
   &:before {
-    @include material-animation-default();
     position: absolute;
-    top: $radio-inner-margin - .2 * $unit;
-    left: $radio-inner-margin - .2 * $unit;
-    width: $radio-button-size - $radio-inner-margin * 2;
-    height: $radio-button-size - $radio-inner-margin * 2;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
     content: "";
     background-color: $radio-inner-color;
     border-radius: 50%;
-    transition: transform;
+    transition: transform $animation-duration $animation-curve-default;
     transform: scale(0);
   }
 
@@ -37,7 +36,7 @@
   @extend .radio;
   border: .2 * $unit solid $radio-inner-color;
   &:before {
-    transform: scale(1);
+    transform: scale(0.65);
   }
 }
 

From edbfd30ebadbd756ea06599ed5c4ea66cbaf98e8 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 3 Oct 2016 20:49:58 +0200
Subject: [PATCH 0831/1024] Latest build

---
 lib/radio/_config.scss |  2 +-
 lib/radio/theme.scss   | 13 ++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/lib/radio/_config.scss b/lib/radio/_config.scss
index 42bc3e9dd..0c335c7cc 100644
--- a/lib/radio/_config.scss
+++ b/lib/radio/_config.scss
@@ -1,5 +1,5 @@
 $radio-field-margin-bottom: 1.5 * $unit !default;
-$radio-button-size: 1.6 * $unit !default;
+$radio-button-size: 2 * $unit !default;
 $radio-inner-margin: $radio-button-size / 4 !default;
 $radio-inner-color: $color-primary !default;
 $radio-focus-color: rgba($color-black, 0.1) !default;
diff --git a/lib/radio/theme.scss b/lib/radio/theme.scss
index 5d0645089..93eac42ef 100644
--- a/lib/radio/theme.scss
+++ b/lib/radio/theme.scss
@@ -13,16 +13,15 @@
   border: .2 * $unit solid $radio-text-color;
   border-radius: 50%;
   &:before {
-    @include material-animation-default();
     position: absolute;
-    top: $radio-inner-margin - .2 * $unit;
-    left: $radio-inner-margin - .2 * $unit;
-    width: $radio-button-size - $radio-inner-margin * 2;
-    height: $radio-button-size - $radio-inner-margin * 2;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
     content: "";
     background-color: $radio-inner-color;
     border-radius: 50%;
-    transition: transform;
+    transition: transform $animation-duration $animation-curve-default;
     transform: scale(0);
   }
 
@@ -37,7 +36,7 @@
   @extend .radio;
   border: .2 * $unit solid $radio-inner-color;
   &:before {
-    transform: scale(1);
+    transform: scale(0.65);
   }
 }
 

From d7abd106ad1a2211785fdf66778f4a10f5ec6c78 Mon Sep 17 00:00:00 2001
From: rubenmoya <rmoyarodriguez@gmail.com>
Date: Mon, 3 Oct 2016 21:37:48 +0200
Subject: [PATCH 0832/1024] add missing styles for lgTablet and smTablet layout
 breakpoints

---
 components/layout/NavDrawer.js |  2 +-
 components/layout/readme.md    |  4 ++--
 components/layout/theme.scss   | 12 ++++++++++++
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/components/layout/NavDrawer.js b/components/layout/NavDrawer.js
index 2abba2c8a..05c34def0 100644
--- a/components/layout/NavDrawer.js
+++ b/components/layout/NavDrawer.js
@@ -31,7 +31,7 @@ NavDrawer.propTypes = {
   children: PropTypes.any,
   className: PropTypes.string,
   onOverlayClick: PropTypes.func,
-  permanentAt: PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'xxl', 'xxxl']),
+  permanentAt: PropTypes.oneOf(['sm', 'smTablet', 'md', 'lg', 'lgTablet', 'xl', 'xxl', 'xxxl']),
   pinned: PropTypes.bool,
   scrollY: PropTypes.bool,
   theme: PropTypes.shape({
diff --git a/components/layout/readme.md b/components/layout/readme.md
index 28593ffa2..7ee9197f9 100644
--- a/components/layout/readme.md
+++ b/components/layout/readme.md
@@ -71,10 +71,10 @@ The Layout's subcomponents can alter their appearance and behavior based on the
 |:-----|:-----|:-----|
 | 480px | `xxs` | Phone (portrait) |
 | 600px | `xs` | Small tablet, phone (landscape) |
-| 720px | `sm-tablet` | Small tablet (portrait) |
+| 720px | `smTablet` | Small tablet (portrait) |
 | 840px | `sm` | Large tablet (portrait) |
 | 960px | `md` | Small tablet (landscape) |
-| 1024px | `lg-tablet` | Large tablet (landscape) |
+| 1024px | `lgTablet` | Large tablet (landscape) |
 | 1280px | `lg` | Large tablet (landscape), desktop |
 | 1440px | `xl` | desktop |
 | 1600px | `xxl` | desktop |
diff --git a/components/layout/theme.scss b/components/layout/theme.scss
index a07c02924..17275cd16 100644
--- a/components/layout/theme.scss
+++ b/components/layout/theme.scss
@@ -108,6 +108,12 @@
       }
     }
 
+    @media screen and (min-width: $layout-breakpoint-sm-tablet) {
+      &.smTabletPermanent {
+        @include permanent();
+      }
+    }
+
     @media screen and (min-width: $layout-breakpoint-md) {
       &.mdPermanent {
         @include permanent();
@@ -120,6 +126,12 @@
       }
     }
 
+    @media screen and (min-width: $layout-breakpoint-lg-tablet) {
+      &.lgTabletPermanent {
+        @include permanent();
+      }
+    }
+
     @media screen and (min-width: $layout-breakpoint-xl) {
       &.xlPermanent {
         @include permanent();

From 183dfe031c07939f3a14eb29d2c1ce01adf9f91a Mon Sep 17 00:00:00 2001
From: Maxim Komlev <maximkomlev@bitbucket.org>
Date: Wed, 5 Oct 2016 14:20:29 -0700
Subject: [PATCH 0833/1024] + Pager control, actually it is not defined at
 matereal design but definitely it is helpful to have. the control is based on
 react-toolbox controls and corresponds to matereal design. It is highly
 customisable and it follows default style patterns of react-toolbox
 components. actually what differentiate the control from others similar that
 it has always const set of buttons and the set depends on two properties:
 number of total pages (latsPage) and number of visible pages at block. e.g.
 [<][1][...][4][5][6][...][8][>] or [<][1][2][3][4][5][...][8][>] or
 [<][1][...][4][5][6][7][8][>] where block size is 3. it gives smooth user
 experience. A layouting is based on flex but easily can be rewritten using
 inline-block at custom theme.

example is added to specs.
---
 components/identifiers.js     |   1 +
 components/index.js           |   1 +
 components/pager/_config.scss |   3 +
 components/pager/index.d.ts   | 111 +++++++++++++
 components/pager/index.js     |  11 ++
 components/pager/pager.js     | 305 ++++++++++++++++++++++++++++++++++
 components/pager/readme.md    |  63 +++++++
 components/pager/theme.scss   |  25 +++
 spec/components/pager.js      |  68 ++++++++
 spec/root.js                  |   2 +
 spec/style.scss               |   7 +
 11 files changed, 597 insertions(+)
 create mode 100644 components/pager/_config.scss
 create mode 100644 components/pager/index.d.ts
 create mode 100644 components/pager/index.js
 create mode 100644 components/pager/pager.js
 create mode 100644 components/pager/readme.md
 create mode 100644 components/pager/theme.scss
 create mode 100644 spec/components/pager.js

diff --git a/components/identifiers.js b/components/identifiers.js
index fa5902dc6..863ca6b55 100644
--- a/components/identifiers.js
+++ b/components/identifiers.js
@@ -25,3 +25,4 @@ export const TABLE = 'RTTable';
 export const TABS = 'RTTabs';
 export const TOOLTIP = 'RTTooltip';
 export const TIME_PICKER = 'RTTimePicker';
+export const PAGER = 'RTPager';
diff --git a/components/index.js b/components/index.js
index 4d83a958a..150d7fdec 100644
--- a/components/index.js
+++ b/components/index.js
@@ -28,3 +28,4 @@ export Table from './table';
 export * from './tabs';
 export Tooltip from './tooltip';
 export TimePicker from './time_picker';
+export Pager from './pager';
\ No newline at end of file
diff --git a/components/pager/_config.scss b/components/pager/_config.scss
new file mode 100644
index 000000000..14cb04d9b
--- /dev/null
+++ b/components/pager/_config.scss
@@ -0,0 +1,3 @@
+@import "http://github.com/button/config";
+
+$button-margin: 0rem .5rem 0rem 0rem !default;
\ No newline at end of file
diff --git a/components/pager/index.d.ts b/components/pager/index.d.ts
new file mode 100644
index 000000000..fd98d878b
--- /dev/null
+++ b/components/pager/index.d.ts
@@ -0,0 +1,111 @@
+import * as React from "react";
+import ReactToolbox from "./index";
+
+export interface PagerTheme {
+  /**
+   * Used for the root element.
+   */
+  pager?: string;
+  /**
+   * Used for the active page.
+   */
+  active?: string;
+  /**
+   * Used for the next and previous page buttons.
+   */
+  leftRightArrowButton?: string;
+  /**
+   * Used for the next and previous range pages buttons.
+   */
+  leftRightRangeButton?: string;
+  /**
+   * Used for the regular page buttons.
+   */
+  pagesButton?: string;
+}
+
+interface PagerProps extends ReactToolbox.Props {
+  /**
+   *  Used for the previous button content.
+   */
+  prevButtonContent?: string;
+  /**
+   * Used for the left range button content
+   */
+  rangeLeftButtonContent?: string;
+  /**
+   * Used for the right range button content
+   */
+  rangeRightButtonContent?: string;
+  /**
+   * Used for the next button content
+   */
+  nextButtonContent?: string;
+  /**
+   * A Number with the currently selected page
+   */
+  currentPage?: number;
+  /**
+   * A Number of last page.
+   */
+  lastPage?: number;
+  /**
+   * A Number of pages visible in control except next, previous and ranges buttons, the minimum value is 2.
+   */
+  visiblePagesBlockSize?: number;
+  /**
+   * Callback called when the page is changing.
+   */
+  onPageChange?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: PagerTheme;
+  /**
+   * This class will be applied to the root elemt.
+   */
+  pagerClassName?: string;
+  /**
+   * Defining default style of next, previous buttons. 
+   * it can have following styles:
+   *    accent,
+   *    flat,
+   *    inverse,
+   *    mini,
+   *    neutral,
+   *    primary,
+   *    raised,
+   *    toggle
+   */
+  leftRightArrowButtonTypes?: object;
+  /**
+   * Defining default style of left, right range buttons. 
+   * it can have following styles:
+   *    accent,
+   *    flat,
+   *    inverse,
+   *    mini,
+   *    neutral,
+   *    primary,
+   *    raised,
+   *    toggle
+   */
+  leftRightRangeButtonTypes?: object;
+  /**
+   * Defining default style of regular page buttons. 
+   * it can have following styles:
+   *    accent,
+   *    flat,
+   *    inverse,
+   *    mini,
+   *    neutral,
+   *    primary,
+   *    raised,
+   *    toggle
+   */
+  pagesButtonTypes?: object;
+}
+
+export class Pager extends React.Component<PagerProps, {}> { }
+
+export default Pager;
diff --git a/components/pager/index.js b/components/pager/index.js
new file mode 100644
index 000000000..0e5348ac7
--- /dev/null
+++ b/components/pager/index.js
@@ -0,0 +1,11 @@
+import { themr } from 'react-css-themr';
+import { PAGER } from '../identifiers.js';
+import { pagerFactory } from './pager.js';
+import { Button } from '../button';
+import theme from './theme.scss';
+
+const Pager = pagerFactory(Button);
+
+const ThemedPager = themr(PAGER, theme)(Pager);
+export default ThemedPager;
+export { ThemedPager as Pager };
diff --git a/components/pager/pager.js b/components/pager/pager.js
new file mode 100644
index 000000000..3e9cf5764
--- /dev/null
+++ b/components/pager/pager.js
@@ -0,0 +1,305 @@
+import React, { Component, PropTypes } from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+
+import Button from '../button';
+import { PAGER } from '../identifiers.js';
+
+const isOnePage = (first, last) => {
+    return first === last || !last;
+};
+
+const isBorderPage = (curr, border) => {
+    return curr === border;
+};
+
+const initialVisiblePagesBlockSize = 3;
+const initialCurrentPage = 1;
+const first = 1;
+
+const factory = (Button) => {
+  class Pager extends Component {
+
+    static propTypes = {
+        pagerClassName:  PropTypes.string,
+        prevButtonContent: React.PropTypes.oneOfType([
+                                    React.PropTypes.string,
+                                    React.PropTypes.element
+                                ]),
+        rangeLeftButtonContent: React.PropTypes.oneOfType([
+                                    React.PropTypes.string,
+                                    React.PropTypes.element
+                                ]),
+        rangeRightButtonContent: React.PropTypes.oneOfType([
+                                    React.PropTypes.string,
+                                    React.PropTypes.element
+                                ]),
+        nextButtonContent: React.PropTypes.oneOfType([
+                                    React.PropTypes.string,
+                                    React.PropTypes.element
+                                ]),
+        leftRightArrowButtonTypes :React.PropTypes.object,
+        leftRightRangeButtonTypes :React.PropTypes.object,
+        pagesButtonTypes :React.PropTypes.object,
+        theme: PropTypes.shape({
+            pager: PropTypes.string,
+            active: PropTypes.string,
+            leftRightArrowButton: PropTypes.string,
+            leftRightRangeButton: PropTypes.string,
+            pagesButton: PropTypes.string
+        }),
+        currentPage: React.PropTypes.number.isRequired,
+        lastPage: React.PropTypes.number.isRequired,
+        visiblePagesBlockSize: React.PropTypes.number.isRequired,
+        onPageChange: React.PropTypes.func
+    };
+
+    static defaultProps = {
+            prevButtonContent: '\u003C',
+            rangeLeftButtonContent: '...',
+            rangeRightButtonContent: '...',
+            nextButtonContent: '\u003E',
+            leftRightArrowButtonTypes:  {raised: true},
+            leftRightRangeButtonTypes:  {flat: true},
+            pagesButtonTypes: {flat: true},
+            visiblePagesBlockSize: initialVisiblePagesBlockSize,
+            currentPage: initialCurrentPage,
+            lastPage: initialCurrentPage
+    };
+
+    state = {
+        currentPage: this.props.currentPage,
+        lastPage: this.props.lastPage
+    };
+
+    componentWillReceiveProps (nextProps) {
+      if (nextProps.currentPage && !isNaN(Number(nextProps.currentPage)) &&
+        this.state.currentPage !== nextProps.currentPage) {
+        this.setState({ 
+            currentPage: Number(nextProps.currentPage < first ? first : nextProps.currentPage)
+        });
+      }
+      if (nextProps.lastPage && !isNaN(Number(nextProps.lastPage)) &&
+        this.state.lastPage !== nextProps.lastPage) {
+        this.setState({ 
+            lastPage: Number(nextProps.lastPage < first ? first : nextProps.lastPage)
+        });
+      }
+    };
+
+    handlerPageClick(page)
+    {
+        var oldValue = this.state.currentPage;
+        var newValue = page;
+
+        if (this.props.onPageChange) {
+            this.props.onPageChange(oldValue, newValue);
+        }
+
+        this.setState({
+            currentPage: newValue
+        });
+    };
+
+    handlerRangeClick(key)
+    {
+        var curr = this.state.currentPage;
+        var last = this.state.lastPage;
+
+        var right = !this._ranges.rightStart ? last : this._ranges.rightStart;
+        var left = !this._ranges.leftEnd ? first : this._ranges.leftEnd;
+        
+        var newValue = curr;
+        if (key === 'prev') {
+            var sum = first + left;
+            newValue = (sum >> 1); //rounding to left
+        }
+        else {
+            var sum = last + right;
+            newValue = (sum >> 1) + (sum % 2); //rounding to right
+        }
+
+        if (this.props.onPageChange) {
+            this.props.onPageChange(curr, newValue);
+        }
+
+        this.setState({
+            currentPage: newValue
+        });
+    };
+
+    handlerPrevNextClick(key)
+    {
+        var oldValue = this.state.currentPage;
+        var newValue = key === 'prev' ? oldValue - 1 : oldValue + 1;
+        
+        if (this.props.onPageChange) {
+            this.props.onPageChange(oldValue, newValue);
+        }
+
+        this.setState({
+            currentPage: newValue
+        });
+    };
+
+    //fields
+    _ranges = {
+        leftEnd: null, 
+        rightStart: null
+    };
+
+    //rendering
+    //private methods
+    renderPages(curr, last)
+    {
+        last = last < first ? first : last;
+        if (curr < first || curr > last)
+        {
+            curr = curr < first ? first : curr > last ? last : curr;
+            this.setState({
+                currentPage: curr
+            });
+        }
+
+        /*
+        * adjustment of start and end elements at range to have equal elements during navigation
+        * 2 - because we already have the rendered first and last button
+        */
+        var adjustment = 2;
+        var content = [];
+
+        var blockSize = this.props.visiblePagesBlockSize === 1 ? adjustment : this.props.visiblePagesBlockSize;
+
+        var padding = blockSize >> 1;
+        var left = curr - padding * (blockSize % 2); //in case of even visiblePagesBlockSize
+        var right = curr + padding;
+
+        var blocksNumber = Math.ceil(last / blockSize);
+        var currentBlock = Math.ceil(curr / blockSize);
+
+        var start = ((currentBlock - 1) * blockSize) + first;        
+        var end = start + blockSize - first;        
+
+        if (currentBlock === 1) { //adjust set of buttons if current is on the left boundary  
+            end += adjustment;
+            end = (last - first) === end ? last : end;
+        } else if (currentBlock < blocksNumber) { //adjustment set of buttons if current is between boundaries
+            start = left;
+            end = right;
+
+            currentBlock = Math.ceil(end / blockSize);
+        }
+        
+        if (currentBlock === blocksNumber) { //adjustment set of buttons if current is on the right boundary
+            start = last - (blockSize + adjustment - first);
+            start = start - 1 <= first ? first : start;
+            end = last;
+        }
+
+        if (currentBlock > 1 && (start - 1) > first) {
+            content.push(
+                <Button 
+                    key={first}
+                    {...this.props.pagesButtonTypes}
+                    className={classnames(this.props.theme.pagesButton, (curr === first ? this.props.theme.active : null))} 
+                    onClick={this.handlerPageClick.bind(this, first)}>
+                    { String(first) }
+                </Button>
+            );
+
+            content.push(
+                <Button
+                    key={'prev'}
+                    {...this.props.leftRightRangeButtonTypes}
+                    className={classnames(this.props.theme.leftRightRangeButton)}
+                    onClick={this.handlerRangeClick.bind(this, 'prev')}>
+                    { this.props.rangeLeftButtonContent }
+                </Button>
+            );
+        }
+
+        for(var i = start; i <= last && i <= end; ++i) {
+            content.push(
+                    <Button 
+                        key={i}
+                        {...this.props.pagesButtonTypes}
+                        className={classnames(this.props.theme.pagesButton, (curr === i ? this.props.theme.active : null))} 
+                        onClick={this.handlerPageClick.bind(this, i)}>
+                        { String(i) }
+                    </Button>
+                );
+        }
+
+        if (currentBlock < blocksNumber && end < last) {
+            content.push(
+                <Button
+                    key={'next'}
+                    {...this.props.leftRightRangeButtonTypes}
+                    className={classnames(this.props.theme.leftRightRangeButton)}
+                    onClick={this.handlerRangeClick.bind(this, 'next')}>
+                    { this.props.rangeRightButtonContent }
+                </Button>
+            );
+
+            content.push(
+                <Button 
+                    key={last}
+                    {...this.props.pagesButtonTypes}
+                    className={classnames(this.props.theme.pagesButton, (curr === last ? this.props.theme.active : null))} 
+                    onClick={this.handlerPageClick.bind(this, last)}>
+                    { String(last) }
+                </Button>
+            );
+        }
+
+        // keep range boundaries to calculate correct navigation through the range 
+        this._ranges.leftEnd = start;
+        this._ranges.rightStart = end - 1;
+
+        return content;
+    };
+
+    render() {
+        const {leftRightArrowButtonTypes, prevButtonContent, nextButtonContent, 
+                pagerClassName, currentPage, lastPage, theme, ...other} = this.props;
+
+        if (lastPage < first)
+        {
+            console.error("ArgumentOutOfRangeException: last Page must be bigger or equal first = 1.");
+        }
+
+        return (
+            <div data-react-toolbox='pager' className={classnames(theme.pager, pagerClassName)} >
+
+                <Button 
+                    {...leftRightArrowButtonTypes}
+                    disabled={isOnePage(first, this.state.lastPage) || isBorderPage(this.state.currentPage, first)}
+                    className={theme.leftRightArrowButton} 
+                    onClick={this.handlerPrevNextClick.bind(this, 'prev')}>
+                    { prevButtonContent }
+                </Button>
+                {
+                    this.renderPages(this.state.currentPage, this.state.lastPage)
+                }
+                <Button 
+                    {...leftRightArrowButtonTypes}
+                    disabled={isOnePage(first, this.state.lastPage) || isBorderPage(this.state.currentPage, this.state.lastPage)}
+                    className={theme.leftRightArrowButton}                         
+                    onClick={this.handlerPrevNextClick.bind(this, 'next')}>
+                    { nextButtonContent }
+                </Button>
+
+            </div>);
+        };
+    }
+
+    return Pager;
+};
+
+const Pager = factory(Button);
+
+export default themr(PAGER)(Pager);
+export {
+  factory as pagerFactory
+};
+export { Pager };
diff --git a/components/pager/readme.md b/components/pager/readme.md
new file mode 100644
index 000000000..3fee2f6f7
--- /dev/null
+++ b/components/pager/readme.md
@@ -0,0 +1,63 @@
+# Pager
+
+Provides functionality of pagination control, actually the component is not defined at(https://www.google.com/design/spec/components), but designed by using standart components from material design. 
+It is easy to use and configure, also it is highly customizable.
+
+<!-- example -->
+```jsx
+import Pager from 'react-toolbox/lib/pager';
+import FontIcon from 'react-toolbox/lib/font_icon';
+
+const ProgressTest = () => {
+
+    var onPageChange = function (oldPage, newPage)
+    {
+        //server call to update content according current page
+        console.info("Previous page : " + oldPage + ", Selected page: " + newPage);
+    }
+
+    return (
+      <Pager 
+        prevButtonContent={ (<FontIcon value='chevron_left' />) }
+        nextButtonContent={ (<FontIcon value='chevron_right' />) }
+        rangeLeftButtonContent={(<FontIcon value='more_horiz' />)}
+        rangeRightButtonContent={(<FontIcon value='more_horiz' />)}
+        lastPage={29}
+        currentPage={5}
+        visiblePagesBlockSize={3}
+        onPageChange={onPageChange}
+      />
+  );
+};
+```
+
+If you want to provide a theme via context, the component key is `RTPager`.
+
+## Properties
+
+| Name          | Type        | Default         | Description|
+|:-----|:-----|:-----|:-----|
+| `prevButtonContent`              | `String`    | `\u003C`            | Used for the previous button content.|
+| `nextButtonContent`              | `String`    | `\u003E`            | Used for the next button content.|
+| `rangeLeftButtonContent`         | `String`    | `...`               | Used for the left range button content.|
+| `rangeRightButtonContent`        | `String`    | `...`               | Used for the right range button content.|
+| `currentPage`                    | `Number`    | `1`                 | A Number with the currently selected page.|
+| `lastPage`                       | `Number`    | `1`                 | A Number of last page.|
+| `visiblePagesBlockSize`          | `Number`    | `3`                 | A Number of pages visible in control except next, previous and ranges buttons, the minimum value is 2.|
+| `onPageChange`                   | `Function`  |                     | Callback called when the page is changing.|
+| `theme`                          | `String`    |                     | Classnames object defining the component style.|
+| `pagerClassName`                 | `String`    |                     | This class will be applied to the root elemt.|
+| `leftRightArrowButtonTypes`      | `Object`    | {raised: true}      | Defining default style of next, previous buttons.|
+| `leftRightRangeButtonTypes`      | `Object`    | {flat: true}        | Defining default style of left, right range buttons.|
+| `pagesButtonTypes`               | `Object`    | {flat: true}        | Defining default style of regular page buttons.|
+
+
+## Theme
+
+| Name     | Description|
+|:---------|:-----------|
+| `pager` | Used for the root element.|
+| `active` | Used for the active page.|
+| `leftRightArrowButton` | Used for the next and previous page buttons.|
+| `leftRightRangeButton` | Used for the next and previous range pages buttons.|
+| `pagesButton` | Used for the regular page buttons.|
\ No newline at end of file
diff --git a/components/pager/theme.scss b/components/pager/theme.scss
new file mode 100644
index 000000000..9d481fe40
--- /dev/null
+++ b/components/pager/theme.scss
@@ -0,0 +1,25 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+
+.pager {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: center;
+
+    .leftRightArrowButton,
+    .leftRightRangeButton,
+    .pagesButton {
+        display: flex;
+        flex-shrink: 0;
+
+        min-width: $button-height;
+        margin: $button-margin;
+    }
+
+    .active {
+        text-decoration: underline;
+    }
+}
\ No newline at end of file
diff --git a/spec/components/pager.js b/spec/components/pager.js
new file mode 100644
index 000000000..d0c5cebc2
--- /dev/null
+++ b/spec/components/pager.js
@@ -0,0 +1,68 @@
+import React, { Component, PropTypes } from 'react';
+import Pager from '../../components/pager';
+import FontIcon from '../../components/font_icon';
+import Input from '../../components/input';
+import style from '../style';
+
+class PagerTest extends React.Component {
+
+  static propTypes = {
+    visiblePagesBlockSize:  PropTypes.number
+  };
+
+  static defaultProps = {
+    visiblePagesBlockSize: 3
+  };
+
+  state = {
+    lastPage: 29,
+    currentPage: 5
+  };
+
+  onInputChange = (name, value) => {
+    var state = this.state;
+
+    state[name] = value;
+
+    this.setState({
+        ...state
+    });
+  };
+
+  onPageChange(oldPage, newPage)
+  {
+    console.info("Previous page : " + oldPage + ", Selected page: " + newPage);
+  };
+
+  render () {
+
+    return (
+      <section>
+        <h5>Pager</h5>
+        <p>Pager based on Material design.</p>
+
+        <div className={style.pager}>
+          <Pager 
+              prevButtonContent={ (<FontIcon value='chevron_left' />) }
+              nextButtonContent={ (<FontIcon value='chevron_right' />) }
+              rangeLeftButtonContent={(<FontIcon value='more_horiz' />)}
+              rangeRightButtonContent={(<FontIcon value='more_horiz' />)}
+              lastPage={this.state.lastPage}
+              currentPage={this.state.currentPage}
+              visiblePagesBlockSize={this.props.visiblePagesBlockSize}
+              onPageChange={this.onPageChange}
+          />
+        </div>
+
+        <Input
+          type='number'
+          value={this.state.lastPage}
+          label='Last Page' onChange={this.onInputChange.bind(this, 'lastPage')}
+        />
+
+      </section>
+    );
+  }
+}
+
+export default PagerTest;
diff --git a/spec/root.js b/spec/root.js
index ddf1a6b9b..1dd371507 100644
--- a/spec/root.js
+++ b/spec/root.js
@@ -19,6 +19,7 @@ import Input from './components/input';
 import Layout from './components/layout';
 import List from './components/list';
 import Menu from './components/menu';
+import Pager from './components/pager';
 import Pickers from './components/pickers';
 import Progress from './components/progress';
 import Radio from './components/radio';
@@ -63,6 +64,7 @@ const Root = () => (
     <List />
     <Menu />
     <Pickers />
+    <Pager />
     <Progress />
     <Radio />
     <Slider />
diff --git a/spec/style.scss b/spec/style.scss
index 87422bf71..5260c512d 100644
--- a/spec/style.scss
+++ b/spec/style.scss
@@ -150,3 +150,10 @@ $offset: 1.8 * $unit;
 section {
     overflow-x: scroll;
 }
+
+.pager
+{
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+}
\ No newline at end of file

From e4339de7c5d9414f5af67de5da7756bb0964ccb9 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 6 Oct 2016 20:11:39 +0200
Subject: [PATCH 0834/1024] Fix #813

---
 components/list/ListItemContent.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/list/ListItemContent.js b/components/list/ListItemContent.js
index 4779821f3..d8e67ac42 100644
--- a/components/list/ListItemContent.js
+++ b/components/list/ListItemContent.js
@@ -48,7 +48,7 @@ const factory = (ListItemText) => {
   return ListItemContent;
 };
 
-const ListItemContent = themr(LIST)(InjectListItemText);
-export default ListItemContent;
+const ListItemContent = factory(InjectListItemText);
+export default themr(LIST)(ListItemContent);
 export { factory as listItemContentFactory };
 export { ListItemContent };

From ff7dd4d2ff6199b6b968207d6a243060194bea49 Mon Sep 17 00:00:00 2001
From: Maxim Komlev <maximkomlev@bitbucket.org>
Date: Thu, 6 Oct 2016 11:18:15 -0700
Subject: [PATCH 0835/1024] * fixed code linting

---
 components/pager/pager.js | 206 ++++++++++++++++++--------------------
 spec/components/pager.js  |  31 +++---
 2 files changed, 115 insertions(+), 122 deletions(-)

diff --git a/components/pager/pager.js b/components/pager/pager.js
index 3e9cf5764..85f2e48e4 100644
--- a/components/pager/pager.js
+++ b/components/pager/pager.js
@@ -2,7 +2,7 @@ import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
 
-import Button from '../button';
+import InjectButton from '../button';
 import { PAGER } from '../identifiers.js';
 
 const isOnePage = (first, last) => {
@@ -21,26 +21,29 @@ const factory = (Button) => {
   class Pager extends Component {
 
     static propTypes = {
-        pagerClassName:  PropTypes.string,
+        currentPage: React.PropTypes.number.isRequired,
+        lastPage: React.PropTypes.number.isRequired,
+        leftRightArrowButtonTypes: React.PropTypes.object,
+        leftRightRangeButtonTypes: React.PropTypes.object,
+        nextButtonContent: React.PropTypes.oneOfType([
+            React.PropTypes.string,
+            React.PropTypes.element
+        ]),
+        onPageChange: React.PropTypes.func,
+        pagerClassName: PropTypes.string,
+        pagesButtonTypes: React.PropTypes.object,
         prevButtonContent: React.PropTypes.oneOfType([
-                                    React.PropTypes.string,
-                                    React.PropTypes.element
-                                ]),
+            React.PropTypes.string,
+            React.PropTypes.element
+        ]),
         rangeLeftButtonContent: React.PropTypes.oneOfType([
-                                    React.PropTypes.string,
-                                    React.PropTypes.element
-                                ]),
+            React.PropTypes.string,
+            React.PropTypes.element
+        ]),
         rangeRightButtonContent: React.PropTypes.oneOfType([
-                                    React.PropTypes.string,
-                                    React.PropTypes.element
-                                ]),
-        nextButtonContent: React.PropTypes.oneOfType([
-                                    React.PropTypes.string,
-                                    React.PropTypes.element
-                                ]),
-        leftRightArrowButtonTypes :React.PropTypes.object,
-        leftRightRangeButtonTypes :React.PropTypes.object,
-        pagesButtonTypes :React.PropTypes.object,
+            React.PropTypes.string,
+            React.PropTypes.element
+        ]),
         theme: PropTypes.shape({
             pager: PropTypes.string,
             active: PropTypes.string,
@@ -48,49 +51,45 @@ const factory = (Button) => {
             leftRightRangeButton: PropTypes.string,
             pagesButton: PropTypes.string
         }),
-        currentPage: React.PropTypes.number.isRequired,
-        lastPage: React.PropTypes.number.isRequired,
-        visiblePagesBlockSize: React.PropTypes.number.isRequired,
-        onPageChange: React.PropTypes.func
-    };
+        visiblePagesBlockSize: React.PropTypes.number.isRequired
+    }
 
     static defaultProps = {
-            prevButtonContent: '\u003C',
-            rangeLeftButtonContent: '...',
-            rangeRightButtonContent: '...',
-            nextButtonContent: '\u003E',
-            leftRightArrowButtonTypes:  {raised: true},
-            leftRightRangeButtonTypes:  {flat: true},
-            pagesButtonTypes: {flat: true},
-            visiblePagesBlockSize: initialVisiblePagesBlockSize,
-            currentPage: initialCurrentPage,
-            lastPage: initialCurrentPage
-    };
+        currentPage: initialCurrentPage,
+        lastPage: initialCurrentPage,
+        leftRightArrowButtonTypes: {raised: true},
+        leftRightRangeButtonTypes: {flat: true},
+        nextButtonContent: '\u003E',
+        pagesButtonTypes: {flat: true},
+        prevButtonContent: '\u003C',
+        rangeLeftButtonContent: '...',
+        rangeRightButtonContent: '...',
+        visiblePagesBlockSize: initialVisiblePagesBlockSize
+    }
 
     state = {
         currentPage: this.props.currentPage,
         lastPage: this.props.lastPage
-    };
+    }
 
     componentWillReceiveProps (nextProps) {
-      if (nextProps.currentPage && !isNaN(Number(nextProps.currentPage)) &&
-        this.state.currentPage !== nextProps.currentPage) {
-        this.setState({ 
+      if (nextProps.currentPage && !isNaN(Number(nextProps.currentPage))
+        && this.state.currentPage !== nextProps.currentPage) {
+        this.setState({
             currentPage: Number(nextProps.currentPage < first ? first : nextProps.currentPage)
         });
       }
-      if (nextProps.lastPage && !isNaN(Number(nextProps.lastPage)) &&
-        this.state.lastPage !== nextProps.lastPage) {
-        this.setState({ 
+      if (nextProps.lastPage && !isNaN(Number(nextProps.lastPage))
+        && this.state.lastPage !== nextProps.lastPage) {
+        this.setState({
             lastPage: Number(nextProps.lastPage < first ? first : nextProps.lastPage)
         });
       }
-    };
+    }
 
-    handlerPageClick(page)
-    {
-        var oldValue = this.state.currentPage;
-        var newValue = page;
+    handlerPageClick (page) {
+        const oldValue = this.state.currentPage;
+        const newValue = page;
 
         if (this.props.onPageChange) {
             this.props.onPageChange(oldValue, newValue);
@@ -99,23 +98,21 @@ const factory = (Button) => {
         this.setState({
             currentPage: newValue
         });
-    };
+    }
 
-    handlerRangeClick(key)
-    {
-        var curr = this.state.currentPage;
-        var last = this.state.lastPage;
+    handlerRangeClick (key) {
+        const curr = this.state.currentPage;
+        const last = this.state.lastPage;
 
-        var right = !this._ranges.rightStart ? last : this._ranges.rightStart;
-        var left = !this._ranges.leftEnd ? first : this._ranges.leftEnd;
-        
-        var newValue = curr;
+        const right = !this._ranges.rightStart ? last : this._ranges.rightStart;
+        const left = !this._ranges.leftEnd ? first : this._ranges.leftEnd;
+
+        let newValue = curr;
+        let sum = first + left;
         if (key === 'prev') {
-            var sum = first + left;
             newValue = (sum >> 1); //rounding to left
-        }
-        else {
-            var sum = last + right;
+        } else {
+            sum = last + right;
             newValue = (sum >> 1) + (sum % 2); //rounding to right
         }
 
@@ -126,13 +123,12 @@ const factory = (Button) => {
         this.setState({
             currentPage: newValue
         });
-    };
+    }
+
+    handlerPrevNextClick (key) {
+        const oldValue = this.state.currentPage;
+        const newValue = key === 'prev' ? oldValue - 1 : oldValue + 1;
 
-    handlerPrevNextClick(key)
-    {
-        var oldValue = this.state.currentPage;
-        var newValue = key === 'prev' ? oldValue - 1 : oldValue + 1;
-        
         if (this.props.onPageChange) {
             this.props.onPageChange(oldValue, newValue);
         }
@@ -140,21 +136,20 @@ const factory = (Button) => {
         this.setState({
             currentPage: newValue
         });
-    };
+    }
 
     //fields
     _ranges = {
-        leftEnd: null, 
+        leftEnd: null,
         rightStart: null
-    };
+    }
 
     //rendering
     //private methods
-    renderPages(curr, last)
-    {
-        last = last < first ? first : last;
-        if (curr < first || curr > last)
-        {
+    renderPages (currPage, lastPage) {
+        let curr = currPage;
+        let last = lastPage < first ? first : lastPage;
+        if (curr < first || curr > last) {
             curr = curr < first ? first : curr > last ? last : curr;
             this.setState({
                 currentPage: curr
@@ -165,22 +160,22 @@ const factory = (Button) => {
         * adjustment of start and end elements at range to have equal elements during navigation
         * 2 - because we already have the rendered first and last button
         */
-        var adjustment = 2;
-        var content = [];
+        const adjustment = 2;
+        const content = [];
 
-        var blockSize = this.props.visiblePagesBlockSize === 1 ? adjustment : this.props.visiblePagesBlockSize;
+        const blockSize = this.props.visiblePagesBlockSize === 1 ? adjustment : this.props.visiblePagesBlockSize;
 
-        var padding = blockSize >> 1;
-        var left = curr - padding * (blockSize % 2); //in case of even visiblePagesBlockSize
-        var right = curr + padding;
+        const padding = blockSize >> 1;
+        const left = curr - padding * (blockSize % 2); //in case of even visiblePagesBlockSize
+        const right = curr + padding;
 
-        var blocksNumber = Math.ceil(last / blockSize);
-        var currentBlock = Math.ceil(curr / blockSize);
+        const blocksNumber = Math.ceil(last / blockSize);
+        let currentBlock = Math.ceil(curr / blockSize);
 
-        var start = ((currentBlock - 1) * blockSize) + first;        
-        var end = start + blockSize - first;        
+        let start = ((currentBlock - 1) * blockSize) + first;
+        let end = start + blockSize - first;
 
-        if (currentBlock === 1) { //adjust set of buttons if current is on the left boundary  
+        if (currentBlock === 1) { //adjust set of buttons if current is on the left boundary
             end += adjustment;
             end = (last - first) === end ? last : end;
         } else if (currentBlock < blocksNumber) { //adjustment set of buttons if current is between boundaries
@@ -189,7 +184,7 @@ const factory = (Button) => {
 
             currentBlock = Math.ceil(end / blockSize);
         }
-        
+
         if (currentBlock === blocksNumber) { //adjustment set of buttons if current is on the right boundary
             start = last - (blockSize + adjustment - first);
             start = start - 1 <= first ? first : start;
@@ -198,10 +193,10 @@ const factory = (Button) => {
 
         if (currentBlock > 1 && (start - 1) > first) {
             content.push(
-                <Button 
+                <Button
                     key={first}
                     {...this.props.pagesButtonTypes}
-                    className={classnames(this.props.theme.pagesButton, (curr === first ? this.props.theme.active : null))} 
+                    className={classnames(this.props.theme.pagesButton, (curr === first ? this.props.theme.active : null))}
                     onClick={this.handlerPageClick.bind(this, first)}>
                     { String(first) }
                 </Button>
@@ -218,12 +213,12 @@ const factory = (Button) => {
             );
         }
 
-        for(var i = start; i <= last && i <= end; ++i) {
+        for (let i = start; i <= last && i <= end; ++i) {
             content.push(
-                    <Button 
+                    <Button
                         key={i}
                         {...this.props.pagesButtonTypes}
-                        className={classnames(this.props.theme.pagesButton, (curr === i ? this.props.theme.active : null))} 
+                        className={classnames(this.props.theme.pagesButton, (curr === i ? this.props.theme.active : null))}
                         onClick={this.handlerPageClick.bind(this, i)}>
                         { String(i) }
                     </Button>
@@ -242,61 +237,60 @@ const factory = (Button) => {
             );
 
             content.push(
-                <Button 
+                <Button
                     key={last}
                     {...this.props.pagesButtonTypes}
-                    className={classnames(this.props.theme.pagesButton, (curr === last ? this.props.theme.active : null))} 
+                    className={classnames(this.props.theme.pagesButton, (curr === last ? this.props.theme.active : null))}
                     onClick={this.handlerPageClick.bind(this, last)}>
                     { String(last) }
                 </Button>
             );
         }
 
-        // keep range boundaries to calculate correct navigation through the range 
+        // keep range boundaries to calculate correct navigation through the range
         this._ranges.leftEnd = start;
         this._ranges.rightStart = end - 1;
 
         return content;
-    };
+    }
 
-    render() {
-        const {leftRightArrowButtonTypes, prevButtonContent, nextButtonContent, 
-                pagerClassName, currentPage, lastPage, theme, ...other} = this.props;
+    render () {
+        const {leftRightArrowButtonTypes, prevButtonContent, nextButtonContent,
+                pagerClassName, lastPage, theme} = this.props;
 
-        if (lastPage < first)
-        {
-            console.error("ArgumentOutOfRangeException: last Page must be bigger or equal first = 1.");
+        if (lastPage < first) {
+            console.error('ArgumentOutOfRangeException: last Page must be bigger or equal first = 1.');
         }
 
         return (
             <div data-react-toolbox='pager' className={classnames(theme.pager, pagerClassName)} >
 
-                <Button 
+                <Button
                     {...leftRightArrowButtonTypes}
                     disabled={isOnePage(first, this.state.lastPage) || isBorderPage(this.state.currentPage, first)}
-                    className={theme.leftRightArrowButton} 
+                    className={theme.leftRightArrowButton}
                     onClick={this.handlerPrevNextClick.bind(this, 'prev')}>
                     { prevButtonContent }
                 </Button>
                 {
                     this.renderPages(this.state.currentPage, this.state.lastPage)
                 }
-                <Button 
+                <Button
                     {...leftRightArrowButtonTypes}
                     disabled={isOnePage(first, this.state.lastPage) || isBorderPage(this.state.currentPage, this.state.lastPage)}
-                    className={theme.leftRightArrowButton}                         
+                    className={theme.leftRightArrowButton}
                     onClick={this.handlerPrevNextClick.bind(this, 'next')}>
                     { nextButtonContent }
                 </Button>
 
             </div>);
-        };
+        }
     }
 
     return Pager;
 };
 
-const Pager = factory(Button);
+const Pager = factory(InjectButton);
 
 export default themr(PAGER)(Pager);
 export {
diff --git a/spec/components/pager.js b/spec/components/pager.js
index d0c5cebc2..b1394617b 100644
--- a/spec/components/pager.js
+++ b/spec/components/pager.js
@@ -1,4 +1,4 @@
-import React, { Component, PropTypes } from 'react';
+import React, { PropTypes } from 'react';
 import Pager from '../../components/pager';
 import FontIcon from '../../components/font_icon';
 import Input from '../../components/input';
@@ -7,32 +7,31 @@ import style from '../style';
 class PagerTest extends React.Component {
 
   static propTypes = {
-    visiblePagesBlockSize:  PropTypes.number
+    visiblePagesBlockSize: PropTypes.number
   };
 
   static defaultProps = {
     visiblePagesBlockSize: 3
-  };
+  }
 
   state = {
     lastPage: 29,
     currentPage: 5
-  };
+  }
 
   onInputChange = (name, value) => {
-    var state = this.state;
+    const state = this.state;
 
     state[name] = value;
 
     this.setState({
         ...state
     });
-  };
+  }
 
-  onPageChange(oldPage, newPage)
-  {
-    console.info("Previous page : " + oldPage + ", Selected page: " + newPage);
-  };
+  onPageChange (oldPage, newPage) {
+    console.info('Previous page : ' + oldPage + ', Selected page: ' + newPage);
+  }
 
   render () {
 
@@ -42,11 +41,11 @@ class PagerTest extends React.Component {
         <p>Pager based on Material design.</p>
 
         <div className={style.pager}>
-          <Pager 
-              prevButtonContent={ (<FontIcon value='chevron_left' />) }
-              nextButtonContent={ (<FontIcon value='chevron_right' />) }
-              rangeLeftButtonContent={(<FontIcon value='more_horiz' />)}
-              rangeRightButtonContent={(<FontIcon value='more_horiz' />)}
+          <Pager
+              prevButtonContent={<FontIcon value='chevron_left' />}
+              nextButtonContent={<FontIcon value='chevron_right' />}
+              rangeLeftButtonContent={<FontIcon value='more_horiz' />}
+              rangeRightButtonContent={<FontIcon value='more_horiz' />}
               lastPage={this.state.lastPage}
               currentPage={this.state.currentPage}
               visiblePagesBlockSize={this.props.visiblePagesBlockSize}
@@ -63,6 +62,6 @@ class PagerTest extends React.Component {
       </section>
     );
   }
-}
+};
 
 export default PagerTest;

From a59395e887f9871bab751ee3430348a658ab78b5 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 6 Oct 2016 20:18:35 +0200
Subject: [PATCH 0836/1024] Fix #816

---
 components/menu/Menu.js | 17 ++++++++++++++---
 spec/style.scss         |  4 ----
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/components/menu/Menu.js b/components/menu/Menu.js
index d8fe6515a..67bc5e490 100644
--- a/components/menu/Menu.js
+++ b/components/menu/Menu.js
@@ -105,21 +105,32 @@ const factory = (MenuItem) => {
 
     componentWillUpdate (nextProps, nextState) {
       if (!this.state.active && nextState.active) {
-        events.addEventsToDocument({click: this.handleDocumentClick});
+        events.addEventsToDocument({
+          click: this.handleDocumentClick,
+          touchstart: this.handleDocumentClick
+        });
       }
     }
 
     componentDidUpdate (prevProps, prevState) {
       if (prevState.active && !this.state.active) {
         if (this.props.onHide) this.props.onHide();
-        events.removeEventsFromDocument({click: this.handleDocumentClick});
+        events.removeEventsFromDocument({
+          click: this.handleDocumentClick,
+          touchstart: this.handleDocumentClick
+        });
       } else if (!prevState.active && this.state.active && this.props.onShow) {
         this.props.onShow();
       }
     }
 
     componentWillUnmount () {
-      if (this.state.active) events.removeEventsFromDocument({click: this.handleDocumentClick});
+      if (this.state.active) {
+        events.removeEventsFromDocument({
+          click: this.handleDocumentClick,
+          touchstart: this.handleDocumentClick
+        });
+      }
       clearTimeout(this.positionTimeoutHandle);
       clearTimeout(this.activateTimeoutHandle);
     }
diff --git a/spec/style.scss b/spec/style.scss
index 87422bf71..ac92d051e 100644
--- a/spec/style.scss
+++ b/spec/style.scss
@@ -146,7 +146,3 @@ $offset: 1.8 * $unit;
     height: 40px;
   }
 }
-
-section {
-    overflow-x: scroll;
-}

From f4f5ae885eb851a089e145714f0c886d66eea53b Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 6 Oct 2016 20:21:50 +0200
Subject: [PATCH 0837/1024] Fix #814

---
 components/tabs/Tabs.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/components/tabs/Tabs.js b/components/tabs/Tabs.js
index 9e93b0d4e..aefb17902 100644
--- a/components/tabs/Tabs.js
+++ b/components/tabs/Tabs.js
@@ -58,10 +58,6 @@ const factory = (Tab, TabContent) => {
     };
 
     handleResize = () => {
-      if (!this.props.fixed) {
-        return;
-      }
-
       if (this.resizeTimeout) {
         clearTimeout(this.resizeTimeout);
       }

From 8c21e30e72af4bc36c0bac0ea12e39ebafe519be Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 6 Oct 2016 20:29:36 +0200
Subject: [PATCH 0838/1024] Fix linter errors

---
 components/app_bar/theme.scss        | 2 +-
 components/checkbox/Check.js         | 4 ++--
 components/checkbox/Checkbox.js      | 1 +
 components/date_picker/DatePicker.js | 2 +-
 components/time_picker/TimePicker.js | 2 +-
 5 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/components/app_bar/theme.scss b/components/app_bar/theme.scss
index 4c4f93d70..a51acf4f3 100644
--- a/components/app_bar/theme.scss
+++ b/components/app_bar/theme.scss
@@ -51,7 +51,7 @@
   }
 
   .rightIcon {
-    margin-left: auto;
     margin-right: -1.2 * $unit;
+    margin-left: auto;
   }
 }
diff --git a/components/checkbox/Check.js b/components/checkbox/Check.js
index 30595954f..c2980d530 100644
--- a/components/checkbox/Check.js
+++ b/components/checkbox/Check.js
@@ -17,11 +17,11 @@ const factory = (ripple) => {
     checked: PropTypes.bool,
     children: PropTypes.any,
     onMouseDown: PropTypes.func,
+    style: PropTypes.object,
     theme: PropTypes.shape({
       check: PropTypes.string,
       checked: PropTypes.string
-    }),
-    style: PropTypes.object
+    })
   };
 
   return ripple(Check);
diff --git a/components/checkbox/Checkbox.js b/components/checkbox/Checkbox.js
index 9aef31c42..3caac041f 100644
--- a/components/checkbox/Checkbox.js
+++ b/components/checkbox/Checkbox.js
@@ -17,6 +17,7 @@ const factory = (Check) => {
       ]),
       name: PropTypes.string,
       onChange: PropTypes.func,
+      style: PropTypes.object,
       theme: PropTypes.shape({
         disabled: PropTypes.string,
         field: PropTypes.string,
diff --git a/components/date_picker/DatePicker.js b/components/date_picker/DatePicker.js
index b692a58cf..6a07c13bd 100644
--- a/components/date_picker/DatePicker.js
+++ b/components/date_picker/DatePicker.js
@@ -33,9 +33,9 @@ const factory = (Input, DatePickerDialog) => {
       minDate: PropTypes.object,
       name: PropTypes.string,
       onChange: PropTypes.func,
+      onClick: PropTypes.func,
       onEscKeyDown: PropTypes.func,
       onKeyPress: PropTypes.func,
-      onClick: PropTypes.func,
       onOverlayClick: PropTypes.func,
       readonly: PropTypes.bool,
       sundayFirstDayOfWeek: React.PropTypes.bool,
diff --git a/components/time_picker/TimePicker.js b/components/time_picker/TimePicker.js
index c651377d5..c0aa1c6de 100644
--- a/components/time_picker/TimePicker.js
+++ b/components/time_picker/TimePicker.js
@@ -19,9 +19,9 @@ const factory = (TimePickerDialog, Input) => {
       label: PropTypes.string,
       name: PropTypes.string,
       onChange: PropTypes.func,
+      onClick: PropTypes.func,
       onEscKeyDown: PropTypes.func,
       onKeyPress: PropTypes.func,
-      onClick: PropTypes.func,
       onOverlayClick: PropTypes.func,
       readonly: PropTypes.bool,
       theme: PropTypes.shape({

From 0d7d78f3b1439d6e29299670c945dd8ac3c9776b Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 6 Oct 2016 20:29:58 +0200
Subject: [PATCH 0839/1024] Latest build

---
 lib/app_bar/theme.scss        |  2 +-
 lib/checkbox/Check.js         |  5 ++++-
 lib/checkbox/Checkbox.js      |  5 ++++-
 lib/date_picker/DatePicker.js |  2 +-
 lib/date_picker/index.js      | 13 +++----------
 lib/list/ListItemContent.js   |  4 ++--
 lib/menu/Menu.js              | 17 ++++++++++++++---
 lib/tabs/Tabs.js              |  4 ----
 lib/time_picker/TimePicker.js |  2 +-
 9 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/lib/app_bar/theme.scss b/lib/app_bar/theme.scss
index 4c4f93d70..a51acf4f3 100644
--- a/lib/app_bar/theme.scss
+++ b/lib/app_bar/theme.scss
@@ -51,7 +51,7 @@
   }
 
   .rightIcon {
-    margin-left: auto;
     margin-right: -1.2 * $unit;
+    margin-left: auto;
   }
 }
diff --git a/lib/checkbox/Check.js b/lib/checkbox/Check.js
index 8e7de820c..129450cb4 100644
--- a/lib/checkbox/Check.js
+++ b/lib/checkbox/Check.js
@@ -22,12 +22,14 @@ var factory = function factory(ripple) {
     var children = _ref.children;
     var onMouseDown = _ref.onMouseDown;
     var theme = _ref.theme;
+    var style = _ref.style;
     return _react2.default.createElement(
       'div',
       {
         'data-react-toolbox': 'check',
         className: (0, _classnames3.default)(theme.check, _defineProperty({}, theme.checked, checked)),
-        onMouseDown: onMouseDown
+        onMouseDown: onMouseDown,
+        style: style
       },
       children
     );
@@ -37,6 +39,7 @@ var factory = function factory(ripple) {
     checked: _react.PropTypes.bool,
     children: _react.PropTypes.any,
     onMouseDown: _react.PropTypes.func,
+    style: _react.PropTypes.object,
     theme: _react.PropTypes.shape({
       check: _react.PropTypes.string,
       checked: _react.PropTypes.string
diff --git a/lib/checkbox/Checkbox.js b/lib/checkbox/Checkbox.js
index 164ffb674..5b4ae9bdd 100644
--- a/lib/checkbox/Checkbox.js
+++ b/lib/checkbox/Checkbox.js
@@ -80,8 +80,9 @@ var factory = function factory(Check) {
         var _props = this.props;
         var onChange = _props.onChange;
         var theme = _props.theme;
+        var style = _props.style;
 
-        var others = _objectWithoutProperties(_props, ['onChange', 'theme']); //eslint-disable-line no-unused-vars
+        var others = _objectWithoutProperties(_props, ['onChange', 'theme', 'style']); //eslint-disable-line no-unused-vars
 
 
         var className = (0, _classnames3.default)(theme.field, _defineProperty({}, theme.disabled, this.props.disabled), this.props.className);
@@ -100,6 +101,7 @@ var factory = function factory(Check) {
             checked: this.props.checked,
             disabled: this.props.disabled,
             rippleClassName: theme.ripple,
+            style: style,
             theme: this.props.theme
           }),
           this.props.label ? _react2.default.createElement(
@@ -121,6 +123,7 @@ var factory = function factory(Check) {
     label: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.node]),
     name: _react.PropTypes.string,
     onChange: _react.PropTypes.func,
+    style: _react.PropTypes.object,
     theme: _react.PropTypes.shape({
       disabled: _react.PropTypes.string,
       field: _react.PropTypes.string,
diff --git a/lib/date_picker/DatePicker.js b/lib/date_picker/DatePicker.js
index c969479b4..1ac61bc76 100644
--- a/lib/date_picker/DatePicker.js
+++ b/lib/date_picker/DatePicker.js
@@ -186,9 +186,9 @@ var factory = function factory(Input, DatePickerDialog) {
     minDate: _react.PropTypes.object,
     name: _react.PropTypes.string,
     onChange: _react.PropTypes.func,
+    onClick: _react.PropTypes.func,
     onEscKeyDown: _react.PropTypes.func,
     onKeyPress: _react.PropTypes.func,
-    onClick: _react.PropTypes.func,
     onOverlayClick: _react.PropTypes.func,
     readonly: _react.PropTypes.bool,
     sundayFirstDayOfWeek: _react2.default.PropTypes.bool,
diff --git a/lib/date_picker/index.js b/lib/date_picker/index.js
index ae257be56..887fdaf75 100644
--- a/lib/date_picker/index.js
+++ b/lib/date_picker/index.js
@@ -3,17 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DatePickerDialog = exports.DatePicker = exports.default = undefined;
-
-var _DatePicker = require('./DatePicker');
-
-var _DatePicker2 = _interopRequireDefault(_DatePicker);
+exports.DatePickerDialog = exports.DatePicker = undefined;
 
 var _reactCssThemr = require('react-css-themr');
 
 var _identifiers = require('../identifiers.js');
 
-var _DatePicker3 = require('./DatePicker.js');
+var _DatePicker = require('./DatePicker.js');
 
 var _DatePickerDialog = require('./DatePickerDialog.js');
 
@@ -39,12 +35,9 @@ var _theme2 = _interopRequireDefault(_theme);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-exports.default = _DatePicker2.default;
-
-
 var Calendar = (0, _Calendar2.default)(_button.IconButton);
 var DatePickerDialog = (0, _DatePickerDialog2.default)(_dialog2.default, Calendar);
-var DatePicker = (0, _DatePicker3.datePickerFactory)(_input2.default, DatePickerDialog);
+var DatePicker = (0, _DatePicker.datePickerFactory)(_input2.default, DatePickerDialog);
 
 var ThemedDatePicker = (0, _reactCssThemr.themr)(_identifiers.DATE_PICKER, _theme2.default)(DatePicker);
 exports.default = ThemedDatePicker;
diff --git a/lib/list/ListItemContent.js b/lib/list/ListItemContent.js
index f9924b4a0..25b922070 100644
--- a/lib/list/ListItemContent.js
+++ b/lib/list/ListItemContent.js
@@ -110,7 +110,7 @@ var factory = function factory(ListItemText) {
   return ListItemContent;
 };
 
-var ListItemContent = (0, _reactCssThemr.themr)(_identifiers.LIST)(_ListItemText2.default);
-exports.default = ListItemContent;
+var ListItemContent = factory(_ListItemText2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListItemContent);
 exports.listItemContentFactory = factory;
 exports.ListItemContent = ListItemContent;
\ No newline at end of file
diff --git a/lib/menu/Menu.js b/lib/menu/Menu.js
index bcc8ed066..ca67b900d 100644
--- a/lib/menu/Menu.js
+++ b/lib/menu/Menu.js
@@ -142,7 +142,10 @@ var factory = function factory(MenuItem) {
       key: 'componentWillUpdate',
       value: function componentWillUpdate(nextProps, nextState) {
         if (!this.state.active && nextState.active) {
-          _utils.events.addEventsToDocument({ click: this.handleDocumentClick });
+          _utils.events.addEventsToDocument({
+            click: this.handleDocumentClick,
+            touchstart: this.handleDocumentClick
+          });
         }
       }
     }, {
@@ -150,7 +153,10 @@ var factory = function factory(MenuItem) {
       value: function componentDidUpdate(prevProps, prevState) {
         if (prevState.active && !this.state.active) {
           if (this.props.onHide) this.props.onHide();
-          _utils.events.removeEventsFromDocument({ click: this.handleDocumentClick });
+          _utils.events.removeEventsFromDocument({
+            click: this.handleDocumentClick,
+            touchstart: this.handleDocumentClick
+          });
         } else if (!prevState.active && this.state.active && this.props.onShow) {
           this.props.onShow();
         }
@@ -158,7 +164,12 @@ var factory = function factory(MenuItem) {
     }, {
       key: 'componentWillUnmount',
       value: function componentWillUnmount() {
-        if (this.state.active) _utils.events.removeEventsFromDocument({ click: this.handleDocumentClick });
+        if (this.state.active) {
+          _utils.events.removeEventsFromDocument({
+            click: this.handleDocumentClick,
+            touchstart: this.handleDocumentClick
+          });
+        }
         clearTimeout(this.positionTimeoutHandle);
         clearTimeout(this.activateTimeoutHandle);
       }
diff --git a/lib/tabs/Tabs.js b/lib/tabs/Tabs.js
index 1905592cc..016646856 100644
--- a/lib/tabs/Tabs.js
+++ b/lib/tabs/Tabs.js
@@ -58,10 +58,6 @@ var factory = function factory(Tab, TabContent) {
         var idx = parseInt(event.currentTarget.id);
         if (_this.props.onChange) _this.props.onChange(idx);
       }, _this.handleResize = function () {
-        if (!_this.props.fixed) {
-          return;
-        }
-
         if (_this.resizeTimeout) {
           clearTimeout(_this.resizeTimeout);
         }
diff --git a/lib/time_picker/TimePicker.js b/lib/time_picker/TimePicker.js
index f44cc0402..59c6e8b4d 100644
--- a/lib/time_picker/TimePicker.js
+++ b/lib/time_picker/TimePicker.js
@@ -159,9 +159,9 @@ var factory = function factory(TimePickerDialog, Input) {
     label: _react.PropTypes.string,
     name: _react.PropTypes.string,
     onChange: _react.PropTypes.func,
+    onClick: _react.PropTypes.func,
     onEscKeyDown: _react.PropTypes.func,
     onKeyPress: _react.PropTypes.func,
-    onClick: _react.PropTypes.func,
     onOverlayClick: _react.PropTypes.func,
     readonly: _react.PropTypes.bool,
     theme: _react.PropTypes.shape({

From 07d1d51c59f9e6a985442d7f86a87b7998ec09ca Mon Sep 17 00:00:00 2001
From: Maxim Komlev <maximkomlev@bitbucket.org>
Date: Thu, 6 Oct 2016 11:49:15 -0700
Subject: [PATCH 0840/1024] * fixed
 /home/travis/build/react-toolbox/react-toolbox/components/index.js   31:2 
 error  Newline required at end of file but not found  eol-last

/home/travis/build/react-toolbox/react-toolbox/spec/components/pager.js
  65:2  warning  Unnecessary semicolon  no-extra-semi

/home/travis/build/react-toolbox/react-toolbox/components/checkbox/Checkbox.js
  50:32  error  'style' is missing in props validation  react/prop-types
---
 components/checkbox/Checkbox.js | 1 +
 components/index.js             | 2 +-
 spec/components/pager.js        | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/checkbox/Checkbox.js b/components/checkbox/Checkbox.js
index 9aef31c42..3caac041f 100644
--- a/components/checkbox/Checkbox.js
+++ b/components/checkbox/Checkbox.js
@@ -17,6 +17,7 @@ const factory = (Check) => {
       ]),
       name: PropTypes.string,
       onChange: PropTypes.func,
+      style: PropTypes.object,
       theme: PropTypes.shape({
         disabled: PropTypes.string,
         field: PropTypes.string,
diff --git a/components/index.js b/components/index.js
index 150d7fdec..a8c4fa626 100644
--- a/components/index.js
+++ b/components/index.js
@@ -28,4 +28,4 @@ export Table from './table';
 export * from './tabs';
 export Tooltip from './tooltip';
 export TimePicker from './time_picker';
-export Pager from './pager';
\ No newline at end of file
+export Pager from './pager';
diff --git a/spec/components/pager.js b/spec/components/pager.js
index b1394617b..16ce7ed32 100644
--- a/spec/components/pager.js
+++ b/spec/components/pager.js
@@ -62,6 +62,6 @@ class PagerTest extends React.Component {
       </section>
     );
   }
-};
+}
 
 export default PagerTest;

From 4d5f4cf02f8da6c855312cdd11d088f5e9cfaf8b Mon Sep 17 00:00:00 2001
From: Alex Cornejo <acornejo@gmail.com>
Date: Thu, 25 Aug 2016 00:14:35 -0700
Subject: [PATCH 0841/1024] navbar hide on scroll behavior.

Add basic hide on scroll behavior for navbar. As described in

https://material.google.com/patterns/scrolling-techniques.html#scrolling-techniques-app-bar-scrollable-regions
---
 components/app_bar/AppBar.js  | 136 ++++++++++++++++++++--------------
 components/app_bar/readme.md  |  16 ++--
 components/app_bar/theme.scss |   8 ++
 3 files changed, 99 insertions(+), 61 deletions(-)

diff --git a/components/app_bar/AppBar.js b/components/app_bar/AppBar.js
index 246dbcd56..ff3c402ad 100644
--- a/components/app_bar/AppBar.js
+++ b/components/app_bar/AppBar.js
@@ -1,67 +1,95 @@
 import React, { PropTypes } from 'react';
+import ReactDOM from 'react-dom';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
 import { APP_BAR } from '../identifiers.js';
 import InjectIconButton from '../button/IconButton.js';
 
 const factory = (IconButton) => {
-  const AppBar = ({ children, leftIcon, onLeftIconClick, onRightIconClick, rightIcon, theme, title, ...props }) => {
-    const className = classnames(theme.appBar, {
-      [theme.fixed]: props.fixed,
-      [theme.flat]: props.flat
-    }, props.className);
+  class AppBar extends React.Component {
+    static propTypes = {
+      children: PropTypes.node,
+      className: PropTypes.string,
+      fixed: PropTypes.bool,
+      flat: PropTypes.bool,
+      leftIcon: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.element
+      ]),
+      onLeftIconClick: PropTypes.func,
+      onRightIconClick: PropTypes.func,
+      rightIcon: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.element
+      ]),
+      scrollHide: PropTypes.bool,
+      theme: PropTypes.shape({
+        appBar: PropTypes.string,
+        fixed: PropTypes.string,
+        flat: PropTypes.string,
+        leftIcon: PropTypes.string,
+        rightIcon: PropTypes.string,
+        title: PropTypes.string
+      }),
+      title: PropTypes.string
+    };
 
-    return (
-      <header className={className} data-react-toolbox='app-bar'>
-        {leftIcon && <IconButton
-          inverse
-          className={classnames(theme.leftIcon)}
-          onClick={onLeftIconClick}
-          icon={leftIcon} />
-        }
-        {title && <h1 className={classnames(theme.title)}>{title}</h1>}
-        {children}
-        {rightIcon && <IconButton
-          inverse
-          className={classnames(theme.rightIcon)}
-          onClick={onRightIconClick}
-          icon={rightIcon} />
-        }
-      </header>
-    );
-  };
+    static defaultProps = {
+      className: '',
+      fixed: false,
+      flat: false,
+      scrollHide: false
+    };
 
-  AppBar.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    fixed: PropTypes.bool,
-    flat: PropTypes.bool,
-    leftIcon: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.element
-    ]),
-    onLeftIconClick: PropTypes.func,
-    onRightIconClick: PropTypes.func,
-    rightIcon: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.element
-    ]),
-    theme: PropTypes.shape({
-      appBar: PropTypes.string,
-      fixed: PropTypes.string,
-      flat: PropTypes.string,
-      leftIcon: PropTypes.string,
-      rightIcon: PropTypes.string,
-      title: PropTypes.string
-    }),
-    title: PropTypes.string
-  };
+    state = {hidden: false, height: 0};
+
+    componentDidMount () {
+      window.addEventListener('scroll', this.handleScroll);
+      const height = ReactDOM.findDOMNode(this).clientHeight;
+      this.setState({height});
+      this.curScroll = window.scrollY;
+    }
+
+    componentWillUnmount () {
+      window.removeEventListener('scroll', this.handleScroll);
+    }
+
+    handleScroll = () => {
+      if (!this.props.scrollHide) return;
+      const scrollDiff = this.curScroll - window.scrollY;
+      const hidden = scrollDiff < 0 && window.scrollY !== undefined && window.scrollY > this.state.height;
+      this.setState({hidden});
+      this.curScroll = window.scrollY;
+    };
+
+    render () {
+      const { children, leftIcon, onLeftIconClick, onRightIconClick, rightIcon, theme, title } = this.props;
+      const className = classnames(theme.appBar, {
+        [theme.fixed]: this.props.fixed,
+        [theme.flat]: this.props.flat,
+        [theme.scrollHide]: this.state.hidden
+      }, this.props.className);
 
-  AppBar.defaultProps = {
-    className: '',
-    fixed: false,
-    flat: false
-  };
+      return (
+        <header className={className} data-react-toolbox='app-bar'>
+          {leftIcon && <IconButton
+            inverse
+            className={classnames(theme.leftIcon)}
+            onClick={onLeftIconClick}
+            icon={leftIcon} />
+          }
+          {title && <h1 className={classnames(theme.title)}>{title}</h1>}
+          {children}
+          {rightIcon && <IconButton
+            inverse
+            className={classnames(theme.rightIcon)}
+            onClick={onRightIconClick}
+            icon={rightIcon} />
+          }
+        </header>
+      );
+    }
+  }
 
   return AppBar;
 };
diff --git a/components/app_bar/readme.md b/components/app_bar/readme.md
index 78989e89f..6530eb981 100644
--- a/components/app_bar/readme.md
+++ b/components/app_bar/readme.md
@@ -33,10 +33,12 @@ The `AppBar` component provides properties for the common use cases of `title`,
 
 ## Theme
 
-| Name        | Description|
-|:------------|:-----------|
-| `appBar`    | Used for the component root element.|
-| `fixed`     | Added to the root element when the app bar is fixed.|
-| `title`     | Added to the title element of the app bar.|
-| `leftIcon`  | Added to the left icon element when the app bar.|
-| `rightIcon` | Added to the right icon element when the app bar.|
+| Name         | Description|
+|:-------------|:-----------|
+| `appBar`     | Used for the component root element.|
+| `fixed`      | Added to the root element when the app bar is fixed.|
+| `flat`       | Added to the root element when the app bar is flat.|
+| `title`      | Added to the title element of the app bar.|
+| `leftIcon`   | Added to the left icon element when the app bar.|
+| `rightIcon`  | Added to the right icon element when the app bar.|
+| `scrollHide` | Added to the root element when the app bar is hidden during scroll.|
diff --git a/components/app_bar/theme.scss b/components/app_bar/theme.scss
index a51acf4f3..04584eb69 100644
--- a/components/app_bar/theme.scss
+++ b/components/app_bar/theme.scss
@@ -54,4 +54,12 @@
     margin-right: -1.2 * $unit;
     margin-left: auto;
   }
+
+  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition-duration: .5s;
+  transition-property: transform;
+
+  &.scrollHide {
+    transform: translateY(-100%);
+  }
 }

From e549e25c1beb2b87c165dd6ae4513d4b5dea9f50 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Fri, 7 Oct 2016 14:26:39 +0200
Subject: [PATCH 0842/1024] Small style change

---
 components/table/TableRow.js |  6 +++---
 lib/table/TableRow.js        | 29 ++++++++++++++++++++++++++---
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/components/table/TableRow.js b/components/table/TableRow.js
index 24e59ff25..2ddf4c79f 100644
--- a/components/table/TableRow.js
+++ b/components/table/TableRow.js
@@ -79,11 +79,11 @@ const factory = (Checkbox) => {
       if (inputType === 'text') {
         return (
           <div
+            children={inputValue}
             contentEditable
             suppressContentEditableWarning
-            onInput={this.handleInputChange.bind(null, index, key, inputType)}>
-            {inputValue}
-          </div>
+            onInput={this.handleInputChange.bind(null, index, key, inputType)}
+          />
         );
       }
 
diff --git a/lib/table/TableRow.js b/lib/table/TableRow.js
index fe751cf88..460c7886b 100644
--- a/lib/table/TableRow.js
+++ b/lib/table/TableRow.js
@@ -43,8 +43,21 @@ var factory = function factory(Checkbox) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TableRow.__proto__ || Object.getPrototypeOf(TableRow)).call.apply(_ref, [this].concat(args))), _this), _this.handleInputChange = function (index, key, type, event) {
-        var value = type === 'checkbox' ? event.target.checked : event.target.value;
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TableRow)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleInputChange = function (index, key, type, event) {
+        var value = void 0;
+        switch (type) {
+          case 'checkbox':
+            value = event.target.checked;
+            break;
+          // Handle contentEditable
+          case 'text':
+            value = event.target.textContent;
+            break;
+          default:
+            value = event.target.value;
+            break;
+        }
+
         var onChange = _this.props.model[key].onChange || _this.props.onChange;
         onChange(index, key, value);
       }, _temp), _possibleConstructorReturn(_this, _ret);
@@ -99,6 +112,16 @@ var factory = function factory(Checkbox) {
         var inputType = _utils2.default.inputTypeForPrototype(this.props.model[key].type);
         var inputValue = _utils2.default.prepareValueForInput(value, inputType);
         var checked = inputType === 'checkbox' && value ? true : null;
+
+        if (inputType === 'text') {
+          return _react2.default.createElement('div', {
+            children: inputValue,
+            contentEditable: true,
+            suppressContentEditableWarning: true,
+            onInput: this.handleInputChange.bind(null, index, key, inputType)
+          });
+        }
+
         return _react2.default.createElement('input', {
           checked: checked,
           onChange: this.handleInputChange.bind(null, index, key, inputType),
@@ -145,4 +168,4 @@ var factory = function factory(Checkbox) {
   return TableRow;
 };
 
-exports.default = factory;
+exports.default = factory;
\ No newline at end of file

From 7dfd3c590830ab421678040f8081cef27da0468b Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Fri, 7 Oct 2016 14:40:28 +0200
Subject: [PATCH 0843/1024] Only add scroll AppBar listener if hideable and
 remove ReactDOM

---
 components/app_bar/AppBar.js | 40 ++++++++++++++++++++++++++++--------
 1 file changed, 32 insertions(+), 8 deletions(-)

diff --git a/components/app_bar/AppBar.js b/components/app_bar/AppBar.js
index ff3c402ad..00913f706 100644
--- a/components/app_bar/AppBar.js
+++ b/components/app_bar/AppBar.js
@@ -1,5 +1,4 @@
 import React, { PropTypes } from 'react';
-import ReactDOM from 'react-dom';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
 import { APP_BAR } from '../identifiers.js';
@@ -44,18 +43,39 @@ const factory = (IconButton) => {
     state = {hidden: false, height: 0};
 
     componentDidMount () {
-      window.addEventListener('scroll', this.handleScroll);
-      const height = ReactDOM.findDOMNode(this).clientHeight;
-      this.setState({height});
-      this.curScroll = window.scrollY;
+      if (this.props.scrollHide) {
+        this.initializeScroll();
+      }
+    }
+
+    componentWillReceiveProps (nextProps) {
+      if (!this.props.scrollHide && nextProps.scrollHide) {
+        this.initializeScroll();
+      }
+
+      if (this.props.scrollHide && !nextProps.scrollHide) {
+        this.endScroll();
+      }
     }
 
     componentWillUnmount () {
-      window.removeEventListener('scroll', this.handleScroll);
+      if (this.props.scrollHide) {
+        this.endScroll();
+      }
     }
 
+    initializeScroll = () => {
+      window.addEventListener('scroll', this.handleScroll);
+      const { height } = this.rootNode.getBoundingClientRect();
+      this.curScroll = window.scrollY;
+      this.setState({height});
+    };
+
+    endScroll = () => {
+      window.removeEventListener('scroll', this.handleScroll);
+    };
+
     handleScroll = () => {
-      if (!this.props.scrollHide) return;
       const scrollDiff = this.curScroll - window.scrollY;
       const hidden = scrollDiff < 0 && window.scrollY !== undefined && window.scrollY > this.state.height;
       this.setState({hidden});
@@ -71,7 +91,11 @@ const factory = (IconButton) => {
       }, this.props.className);
 
       return (
-        <header className={className} data-react-toolbox='app-bar'>
+        <header
+          className={className}
+          data-react-toolbox='app-bar'
+          ref={node => {this.rootNode = node;}}
+        >
           {leftIcon && <IconButton
             inverse
             className={classnames(theme.leftIcon)}

From 561136594ad436dfaf8824af23919fcc116748d2 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Fri, 7 Oct 2016 14:43:52 +0200
Subject: [PATCH 0844/1024] Fix linter errors

---
 components/table/Table.js    |   5 +-
 components/table/TableRow.js |   4 +-
 lib/app_bar/AppBar.js        | 156 ++++++++++++++++++++++++++---------
 lib/app_bar/theme.scss       |   8 ++
 lib/layout/NavDrawer.js      |   2 +-
 lib/layout/theme.scss        |  12 +++
 lib/table/Table.js           |   6 ++
 lib/table/TableRow.js        |   3 +-
 8 files changed, 153 insertions(+), 43 deletions(-)

diff --git a/components/table/Table.js b/components/table/Table.js
index 7e42e4f67..ec01b9c7b 100644
--- a/components/table/Table.js
+++ b/components/table/Table.js
@@ -14,6 +14,7 @@ const factory = (TableHead, TableRow) => {
       model: PropTypes.object,
       multiSelectable: PropTypes.bool,
       onChange: PropTypes.func,
+      onRowClick: PropTypes.func,
       onSelect: PropTypes.func,
       selectable: PropTypes.bool,
       selected: PropTypes.array,
@@ -62,7 +63,9 @@ const factory = (TableHead, TableRow) => {
     };
 
     handleRowClick = (index, event) => {
-      this.props.onRowClick ? this.props.onRowClick(index, event) : "";
+      if (this.props.onRowClick) {
+        this.props.onRowClick(index, event);
+      }
     }
 
     renderHead () {
diff --git a/components/table/TableRow.js b/components/table/TableRow.js
index 1d1c26862..e46b22bc2 100644
--- a/components/table/TableRow.js
+++ b/components/table/TableRow.js
@@ -8,6 +8,8 @@ const factory = (Checkbox) => {
       data: PropTypes.object,
       index: PropTypes.number,
       model: PropTypes.object,
+      onChange: PropTypes.func,
+      onRowClick: PropTypes.onRowChange,
       onSelect: PropTypes.func,
       selectable: PropTypes.bool,
       selected: PropTypes.bool,
@@ -50,7 +52,7 @@ const factory = (Checkbox) => {
 
     renderCells () {
       return Object.keys(this.props.model).map((key) => {
-        return <td key={key} onClick={this.props.onRowClick}>{this.renderCell(key)}</td>
+        return <td key={key} onClick={this.props.onRowClick}>{this.renderCell(key)}</td>;
       });
     }
 
diff --git a/lib/app_bar/AppBar.js b/lib/app_bar/AppBar.js
index d800d1dc2..9d79919ef 100644
--- a/lib/app_bar/AppBar.js
+++ b/lib/app_bar/AppBar.js
@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AppBar = exports.appBarFactory = undefined;
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
@@ -25,45 +27,119 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
 var factory = function factory(IconButton) {
-  var AppBar = function AppBar(_ref) {
-    var _classnames;
-
-    var children = _ref.children;
-    var leftIcon = _ref.leftIcon;
-    var onLeftIconClick = _ref.onLeftIconClick;
-    var onRightIconClick = _ref.onRightIconClick;
-    var rightIcon = _ref.rightIcon;
-    var theme = _ref.theme;
-    var title = _ref.title;
-
-    var props = _objectWithoutProperties(_ref, ['children', 'leftIcon', 'onLeftIconClick', 'onRightIconClick', 'rightIcon', 'theme', 'title']);
-
-    var className = (0, _classnames3.default)(theme.appBar, (_classnames = {}, _defineProperty(_classnames, theme.fixed, props.fixed), _defineProperty(_classnames, theme.flat, props.flat), _classnames), props.className);
-
-    return _react2.default.createElement(
-      'header',
-      { className: className, 'data-react-toolbox': 'app-bar' },
-      leftIcon && _react2.default.createElement(IconButton, {
-        inverse: true,
-        className: (0, _classnames3.default)(theme.leftIcon),
-        onClick: onLeftIconClick,
-        icon: leftIcon }),
-      title && _react2.default.createElement(
-        'h1',
-        { className: (0, _classnames3.default)(theme.title) },
-        title
-      ),
-      children,
-      rightIcon && _react2.default.createElement(IconButton, {
-        inverse: true,
-        className: (0, _classnames3.default)(theme.rightIcon),
-        onClick: onRightIconClick,
-        icon: rightIcon })
-    );
-  };
+  var AppBar = function (_React$Component) {
+    _inherits(AppBar, _React$Component);
+
+    function AppBar() {
+      var _Object$getPrototypeO;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, AppBar);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(AppBar)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { hidden: false, height: 0 }, _this.initializeScroll = function () {
+        window.addEventListener('scroll', _this.handleScroll);
+
+        var _this$rootNode$getBou = _this.rootNode.getBoundingClientRect();
+
+        var height = _this$rootNode$getBou.height;
+
+        _this.curScroll = window.scrollY;
+        _this.setState({ height: height });
+      }, _this.endScroll = function () {
+        window.removeEventListener('scroll', _this.handleScroll);
+      }, _this.handleScroll = function () {
+        var scrollDiff = _this.curScroll - window.scrollY;
+        var hidden = scrollDiff < 0 && window.scrollY !== undefined && window.scrollY > _this.state.height;
+        _this.setState({ hidden: hidden });
+        _this.curScroll = window.scrollY;
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(AppBar, [{
+      key: 'componentDidMount',
+      value: function componentDidMount() {
+        if (this.props.scrollHide) {
+          this.initializeScroll();
+        }
+      }
+    }, {
+      key: 'componentWillReceiveProps',
+      value: function componentWillReceiveProps(nextProps) {
+        if (!this.props.scrollHide && nextProps.scrollHide) {
+          this.initializeScroll();
+        }
+
+        if (this.props.scrollHide && !nextProps.scrollHide) {
+          this.endScroll();
+        }
+      }
+    }, {
+      key: 'componentWillUnmount',
+      value: function componentWillUnmount() {
+        if (this.props.scrollHide) {
+          this.endScroll();
+        }
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _classnames,
+            _this2 = this;
+
+        var _props = this.props;
+        var children = _props.children;
+        var leftIcon = _props.leftIcon;
+        var onLeftIconClick = _props.onLeftIconClick;
+        var onRightIconClick = _props.onRightIconClick;
+        var rightIcon = _props.rightIcon;
+        var theme = _props.theme;
+        var title = _props.title;
+
+        var className = (0, _classnames3.default)(theme.appBar, (_classnames = {}, _defineProperty(_classnames, theme.fixed, this.props.fixed), _defineProperty(_classnames, theme.flat, this.props.flat), _defineProperty(_classnames, theme.scrollHide, this.state.hidden), _classnames), this.props.className);
+
+        return _react2.default.createElement(
+          'header',
+          {
+            className: className,
+            'data-react-toolbox': 'app-bar',
+            ref: function ref(node) {
+              _this2.rootNode = node;
+            }
+          },
+          leftIcon && _react2.default.createElement(IconButton, {
+            inverse: true,
+            className: (0, _classnames3.default)(theme.leftIcon),
+            onClick: onLeftIconClick,
+            icon: leftIcon }),
+          title && _react2.default.createElement(
+            'h1',
+            { className: (0, _classnames3.default)(theme.title) },
+            title
+          ),
+          children,
+          rightIcon && _react2.default.createElement(IconButton, {
+            inverse: true,
+            className: (0, _classnames3.default)(theme.rightIcon),
+            onClick: onRightIconClick,
+            icon: rightIcon })
+        );
+      }
+    }]);
+
+    return AppBar;
+  }(_react2.default.Component);
 
   AppBar.propTypes = {
     children: _react.PropTypes.node,
@@ -74,6 +150,7 @@ var factory = function factory(IconButton) {
     onLeftIconClick: _react.PropTypes.func,
     onRightIconClick: _react.PropTypes.func,
     rightIcon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    scrollHide: _react.PropTypes.bool,
     theme: _react.PropTypes.shape({
       appBar: _react.PropTypes.string,
       fixed: _react.PropTypes.string,
@@ -84,13 +161,14 @@ var factory = function factory(IconButton) {
     }),
     title: _react.PropTypes.string
   };
-
   AppBar.defaultProps = {
     className: '',
     fixed: false,
-    flat: false
+    flat: false,
+    scrollHide: false
   };
 
+
   return AppBar;
 };
 
diff --git a/lib/app_bar/theme.scss b/lib/app_bar/theme.scss
index a51acf4f3..04584eb69 100644
--- a/lib/app_bar/theme.scss
+++ b/lib/app_bar/theme.scss
@@ -54,4 +54,12 @@
     margin-right: -1.2 * $unit;
     margin-left: auto;
   }
+
+  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition-duration: .5s;
+  transition-property: transform;
+
+  &.scrollHide {
+    transform: translateY(-100%);
+  }
 }
diff --git a/lib/layout/NavDrawer.js b/lib/layout/NavDrawer.js
index 9401ffa5e..94c28c6ff 100644
--- a/lib/layout/NavDrawer.js
+++ b/lib/layout/NavDrawer.js
@@ -58,7 +58,7 @@ NavDrawer.propTypes = {
   children: _react.PropTypes.any,
   className: _react.PropTypes.string,
   onOverlayClick: _react.PropTypes.func,
-  permanentAt: _react.PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'xxl', 'xxxl']),
+  permanentAt: _react.PropTypes.oneOf(['sm', 'smTablet', 'md', 'lg', 'lgTablet', 'xl', 'xxl', 'xxxl']),
   pinned: _react.PropTypes.bool,
   scrollY: _react.PropTypes.bool,
   theme: _react.PropTypes.shape({
diff --git a/lib/layout/theme.scss b/lib/layout/theme.scss
index a07c02924..17275cd16 100644
--- a/lib/layout/theme.scss
+++ b/lib/layout/theme.scss
@@ -108,6 +108,12 @@
       }
     }
 
+    @media screen and (min-width: $layout-breakpoint-sm-tablet) {
+      &.smTabletPermanent {
+        @include permanent();
+      }
+    }
+
     @media screen and (min-width: $layout-breakpoint-md) {
       &.mdPermanent {
         @include permanent();
@@ -120,6 +126,12 @@
       }
     }
 
+    @media screen and (min-width: $layout-breakpoint-lg-tablet) {
+      &.lgTabletPermanent {
+        @include permanent();
+      }
+    }
+
     @media screen and (min-width: $layout-breakpoint-xl) {
       &.xlPermanent {
         @include permanent();
diff --git a/lib/table/Table.js b/lib/table/Table.js
index f0540d147..a99038151 100644
--- a/lib/table/Table.js
+++ b/lib/table/Table.js
@@ -86,6 +86,10 @@ var factory = function factory(TableHead, TableRow) {
         if (_this.props.onChange) {
           _this.props.onChange(index, key, value);
         }
+      }, _this.handleRowClick = function (index, event) {
+        if (_this.props.onRowClick) {
+          _this.props.onRowClick(index, event);
+        }
       }, _temp), _possibleConstructorReturn(_this, _ret);
     }
 
@@ -135,6 +139,7 @@ var factory = function factory(TableHead, TableRow) {
               model: model,
               onChange: onChange ? _this2.handleRowChange.bind(_this2) : undefined,
               onSelect: _this2.handleRowSelect.bind(_this2, index),
+              onRowClick: _this2.handleRowClick.bind(_this2, index),
               selectable: selectable,
               selected: selected.indexOf(index) !== -1,
               theme: theme
@@ -167,6 +172,7 @@ var factory = function factory(TableHead, TableRow) {
     model: _react.PropTypes.object,
     multiSelectable: _react.PropTypes.bool,
     onChange: _react.PropTypes.func,
+    onRowClick: _react.PropTypes.func,
     onSelect: _react.PropTypes.func,
     selectable: _react.PropTypes.bool,
     selected: _react.PropTypes.array,
diff --git a/lib/table/TableRow.js b/lib/table/TableRow.js
index 460c7886b..31ecdb186 100644
--- a/lib/table/TableRow.js
+++ b/lib/table/TableRow.js
@@ -82,7 +82,7 @@ var factory = function factory(Checkbox) {
         return Object.keys(this.props.model).map(function (key) {
           return _react2.default.createElement(
             'td',
-            { key: key },
+            { key: key, onClick: _this2.props.onRowClick },
             _this2.renderCell(key)
           );
         });
@@ -153,6 +153,7 @@ var factory = function factory(Checkbox) {
     index: _react.PropTypes.number,
     model: _react.PropTypes.object,
     onChange: _react.PropTypes.func,
+    onRowClick: _react.PropTypes.onRowChange,
     onSelect: _react.PropTypes.func,
     selectable: _react.PropTypes.bool,
     selected: _react.PropTypes.bool,

From c7ef9ea772449e34eb6ae025a56aa99bda933dde Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Fri, 7 Oct 2016 14:47:15 +0200
Subject: [PATCH 0845/1024] =?UTF-8?q?Fix=20small=20typo=20=F0=9F=90=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/table/TableRow.js | 2 +-
 lib/table/TableRow.js        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/table/TableRow.js b/components/table/TableRow.js
index e46b22bc2..8b47c13f2 100644
--- a/components/table/TableRow.js
+++ b/components/table/TableRow.js
@@ -9,7 +9,7 @@ const factory = (Checkbox) => {
       index: PropTypes.number,
       model: PropTypes.object,
       onChange: PropTypes.func,
-      onRowClick: PropTypes.onRowChange,
+      onRowClick: PropTypes.func,
       onSelect: PropTypes.func,
       selectable: PropTypes.bool,
       selected: PropTypes.bool,
diff --git a/lib/table/TableRow.js b/lib/table/TableRow.js
index 31ecdb186..c2cbe306f 100644
--- a/lib/table/TableRow.js
+++ b/lib/table/TableRow.js
@@ -153,7 +153,7 @@ var factory = function factory(Checkbox) {
     index: _react.PropTypes.number,
     model: _react.PropTypes.object,
     onChange: _react.PropTypes.func,
-    onRowClick: _react.PropTypes.onRowChange,
+    onRowClick: _react.PropTypes.func,
     onSelect: _react.PropTypes.func,
     selectable: _react.PropTypes.bool,
     selected: _react.PropTypes.bool,

From ca1de7320164c9ce8a4bfa58df33e1915c8bfe91 Mon Sep 17 00:00:00 2001
From: Roman Rott <roman.rott@gmail.com>
Date: Fri, 7 Oct 2016 23:45:00 +0300
Subject: [PATCH 0846/1024] Fixed Tooltip TypeError when quickly hovering
 between multiple tooltips

---
 components/utils/events.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/utils/events.js b/components/utils/events.js
index e885eb1fd..b3bb60a22 100644
--- a/components/utils/events.js
+++ b/components/utils/events.js
@@ -63,7 +63,7 @@ const TRANSITIONS = {
 
 function transitionEventNamesFor (element) {
   for (const transition in TRANSITIONS) {
-    if (element.style[transition] !== undefined) {
+    if (element && element.style[transition] !== undefined) {
       return TRANSITIONS[transition];
     }
   }

From 724fafa7ea0931160a638ed7dbf2a765f9d44233 Mon Sep 17 00:00:00 2001
From: Maxim Komlev <maximkomlev@bitbucket.org>
Date: Fri, 7 Oct 2016 15:16:51 -0700
Subject: [PATCH 0847/1024] + BrowseButton

---
 components/button/BrowseButton.js | 110 ++++++++++++++++++++++++++
 components/button/index.d.ts      | 125 ++++++++++++++++++++++++++++++
 components/button/index.js        |   4 +
 components/button/theme.scss      |  11 +++
 spec/components/button.js         |   9 ++-
 5 files changed, 257 insertions(+), 2 deletions(-)
 create mode 100644 components/button/BrowseButton.js

diff --git a/components/button/BrowseButton.js b/components/button/BrowseButton.js
new file mode 100644
index 000000000..50d17d731
--- /dev/null
+++ b/components/button/BrowseButton.js
@@ -0,0 +1,110 @@
+import React, { Component, PropTypes } from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { BUTTON } from '../identifiers.js';
+import InjectFontIcon from '../font_icon/FontIcon.js';
+import rippleFactory from '../ripple/Ripple.js';
+
+const factory = (ripple, FontIcon) => {
+  class SimpleBrowseButton extends Component {
+    static propTypes = {
+      accent: PropTypes.bool,
+      children: PropTypes.node,
+      className: PropTypes.string,
+      disabled: PropTypes.bool,
+      flat: PropTypes.bool,
+      floating: PropTypes.bool,
+      icon: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.element
+      ]),
+      inverse: PropTypes.bool,
+      label: PropTypes.string,
+      mini: PropTypes.bool,
+      neutral: PropTypes.bool,
+      onChange: PropTypes.func,
+      onMouseLeave: PropTypes.func,
+      onMouseUp: PropTypes.func,
+      primary: PropTypes.bool,
+      raised: PropTypes.bool,
+      theme: PropTypes.shape({
+        accent: PropTypes.string,
+        button: PropTypes.string,
+        flat: PropTypes.string,
+        floating: PropTypes.string,
+        icon: PropTypes.string,
+        inverse: PropTypes.string,
+        mini: PropTypes.string,
+        neutral: PropTypes.string,
+        primary: PropTypes.string,
+        raised: PropTypes.string,
+        rippleWrapper: PropTypes.string,
+        toggle: PropTypes.string
+      }),
+      type: PropTypes.string
+    };
+
+    static defaultProps = {
+      accent: false,
+      className: '',
+      flat: false,
+      floating: false,
+      mini: false,
+      neutral: true,
+      primary: false,
+      raised: false
+    };
+
+    handleMouseUp = (event) => {
+      this.refs.label.blur();
+      if (this.props.onMouseUp) this.props.onMouseUp(event);
+    };
+
+    handleMouseLeave = (event) => {
+      this.refs.label.blur();
+      if (this.props.onMouseLeave) this.props.onMouseLeave(event);
+    };
+
+    handleFileChange = (event) => {
+      if (this.props.onChange) this.props.onChange(event);
+    };
+
+    render () {
+        const { accent, children, className, flat, floating, icon,
+            inverse, label, mini, neutral, primary, theme, raised, ...others} = this.props;
+        const element = 'label';
+        const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
+        const shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : 'flat';
+
+        const classes = classnames(theme.button, [theme[shape]], {
+          [theme[level]]: neutral,
+          [theme.mini]: mini,
+          [theme.inverse]: inverse
+        }, className);
+
+        const props = {
+          ...others,
+          ref: 'label',
+          className: classes,
+          disabled: this.props.disabled,
+          onMouseUp: this.handleMouseUp,
+          onMouseLeave: this.handleMouseLeave,
+          'data-react-toolbox': 'label'
+        };
+
+        return React.createElement(element, props,
+          icon ? <FontIcon className={theme.icon} value={icon}/> : null,
+          <span>{label}</span>,
+          <input className={classes} type="file" onChange={this.handleFileChange}/>,
+          children
+        );
+    }
+  }
+
+  return ripple(SimpleBrowseButton);
+};
+
+const BrowseButton = factory(rippleFactory({ centered: false }), InjectFontIcon);
+export default themr(BUTTON)(BrowseButton);
+export { factory as browseButtonFactory };
+export { BrowseButton };
diff --git a/components/button/index.d.ts b/components/button/index.d.ts
index 7368a24f6..e713f70aa 100644
--- a/components/button/index.d.ts
+++ b/components/button/index.d.ts
@@ -210,3 +210,128 @@ interface IconButtonProps extends ReactToolbox.Props {
 }
 
 export class IconButton extends React.Component<IconButtonProps, {}> { }
+
+export interface BrowseButtonTheme {
+  /**
+   * Used for the root in case button is accent.
+   */
+  accent?: string;
+  /**
+   * Used for the root element in any button.
+   */
+  button?: string;
+  /**
+   * Used when the button is flat for the root element.
+   */
+  flat?: string;
+  /**
+   * Used when the button is floating for the root element.
+   */
+  floating?: string;
+  /**
+   * For the icon inside a button.
+   */
+  icon?: string;
+  /**
+   * Used when colors are inverted.
+   */
+  inverse?: string;
+  /**
+   * Used for mini floating buttons.
+   */
+  mini?: string;
+  /**
+   * Used for neutral colored buttons.
+   */
+  neutral?: string;
+  /**
+   * Used for primary buttons when button is primary.
+   */
+  primary?: string;
+  /**
+   * Used when the button is raised for root element.
+   */
+  raised?: string;
+  /**
+   * Used for the ripple element.
+   */
+  rippleWrapper?: string;
+  /**
+   * Used for toggle buttons in the root element.
+   */
+  toggle?: string;
+}
+
+interface BrowseButtonProps extends ReactToolbox.Props {
+  /**
+   * Indicates if the button should have accent color.
+   * @default false
+   */
+  accent?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If true, the button will have a flat look.
+   * @default false
+   */
+  flat?: boolean;
+  /**
+   * If true, the button will have a floating look.
+   * @default false
+   */
+  floating?: boolean;
+  /**
+   * Creates a link for the button.
+   */
+  href?: string;
+  /**
+   * Value of the icon (See Font Icon Component).
+   */
+  icon?: React.ReactNode | string;
+  /**
+   * If true, the neutral colors are inverted. Useful to put a button over a dark background.
+   */
+  inverse?: boolean;
+  /**
+   * The text string to use for the name of the button.
+   */
+  label?: string;
+  /**
+   * To be used with floating button. If true, the button will be smaller.
+   * @default false
+   */
+  mini?: boolean;
+  /**
+   * Set it to false if you don't want the neutral styles to be included.
+   * @default true
+   */
+  neutral?: boolean;
+  /**
+   * Indicates if the button should have primary color.
+   * @default false
+   */
+  primary?: boolean;
+  /**
+   * If true, the button will have a raised look.
+   * @default false
+   */
+  raised?: boolean;
+  /**
+   * If true, component will have a ripple effect on click.
+   * @default true
+   */
+  ripple?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: BrowseButtonTheme;
+}
+
+export class BrowseButton extends React.Component<BrowseButtonProps, {}> { }
diff --git a/components/button/index.js b/components/button/index.js
index b2767af2e..126272d2e 100644
--- a/components/button/index.js
+++ b/components/button/index.js
@@ -1,6 +1,7 @@
 import { BUTTON } from '../identifiers.js';
 import { themr } from 'react-css-themr';
 import { buttonFactory } from './Button.js';
+import { browseButtonFactory } from './BrowseButton.js';
 import { iconButtonFactory } from './IconButton.js';
 import FontIcon from '../font_icon/FontIcon.js';
 import themedRippleFactory from '../ripple';
@@ -8,9 +9,12 @@ import theme from './theme.scss';
 
 const Button = buttonFactory(themedRippleFactory({ centered: false }), FontIcon);
 const IconButton = iconButtonFactory(themedRippleFactory({centered: true}), FontIcon);
+const BrowseButton = browseButtonFactory(themedRippleFactory({ centered: false }), FontIcon);
 const ThemedButton = themr(BUTTON, theme)(Button);
 const ThemedIconButton = themr(BUTTON, theme)(IconButton);
+const ThemedBrowseButton = themr(BUTTON, theme)(BrowseButton);
 
 export default ThemedButton;
 export { ThemedButton as Button };
 export { ThemedIconButton as IconButton };
+export { ThemedBrowseButton as BrowseButton };
diff --git a/components/button/theme.scss b/components/button/theme.scss
index cff21b375..b178189f1 100644
--- a/components/button/theme.scss
+++ b/components/button/theme.scss
@@ -6,6 +6,17 @@
 
 .button {
   position: relative;
+
+  > input {
+    width: 0.1px !important;
+    height: 0.1px !important;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
+  }
 }
 
 %button {
diff --git a/spec/components/button.js b/spec/components/button.js
index f74691b35..03ed7d2ba 100644
--- a/spec/components/button.js
+++ b/spec/components/button.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import GithubIcon from './github_icon';
-import { Button, IconButton } from '../../components/button';
+import { Button, IconButton, BrowseButton } from '../../components/button';
 
 const ButtonTest = () => (
   <section>
@@ -35,7 +35,12 @@ const ButtonTest = () => (
     <span style={{verticalAlign: 'middle'}}>Menu</span>
     <IconButton><GithubIcon /></IconButton>
     <span style={{verticalAlign: 'middle'}}>Github</span>
-  </section>
+    <h5>Browse Button</h5>
+    <br/>
+    <BrowseButton icon='folder_open' label='BROWSE' raised primary />
+    &nbsp;
+    <BrowseButton label='BROWSE' raised />
+</section>
 );
 
 function rippleEnded () {

From 9019239f7204976799c2ab78493ef1931ffe1c47 Mon Sep 17 00:00:00 2001
From: Maxim Komlev <maximkomlev@bitbucket.org>
Date: Fri, 7 Oct 2016 15:18:01 -0700
Subject: [PATCH 0848/1024] * example container for pager

---
 spec/style.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/spec/style.scss b/spec/style.scss
index ac92d051e..7b19fe42b 100644
--- a/spec/style.scss
+++ b/spec/style.scss
@@ -146,3 +146,10 @@ $offset: 1.8 * $unit;
     height: 40px;
   }
 }
+
+.pager
+ {
+   display: flex;
+   flex-flow: row nowrap;
+   justify-content: center;
+ } 
\ No newline at end of file

From 089c5b69f7e22bbe2bb05c1f3dac675e61d8aa16 Mon Sep 17 00:00:00 2001
From: Maxim Komlev <maximkomlev@bitbucket.org>
Date: Fri, 7 Oct 2016 16:16:08 -0700
Subject: [PATCH 0849/1024] + pushed file browser button branch

---
 components/identifiers.js     |   1 -
 components/index.js           |   1 -
 components/pager/_config.scss |   3 -
 components/pager/index.d.ts   | 111 -------------
 components/pager/index.js     |  11 --
 components/pager/pager.js     | 299 ----------------------------------
 components/pager/readme.md    |  63 -------
 components/pager/theme.scss   |  25 ---
 spec/components/pager.js      |  67 --------
 spec/root.js                  |   2 -
 spec/style.scss               |   7 -
 11 files changed, 590 deletions(-)
 delete mode 100644 components/pager/_config.scss
 delete mode 100644 components/pager/index.d.ts
 delete mode 100644 components/pager/index.js
 delete mode 100644 components/pager/pager.js
 delete mode 100644 components/pager/readme.md
 delete mode 100644 components/pager/theme.scss
 delete mode 100644 spec/components/pager.js

diff --git a/components/identifiers.js b/components/identifiers.js
index 863ca6b55..fa5902dc6 100644
--- a/components/identifiers.js
+++ b/components/identifiers.js
@@ -25,4 +25,3 @@ export const TABLE = 'RTTable';
 export const TABS = 'RTTabs';
 export const TOOLTIP = 'RTTooltip';
 export const TIME_PICKER = 'RTTimePicker';
-export const PAGER = 'RTPager';
diff --git a/components/index.js b/components/index.js
index a8c4fa626..4d83a958a 100644
--- a/components/index.js
+++ b/components/index.js
@@ -28,4 +28,3 @@ export Table from './table';
 export * from './tabs';
 export Tooltip from './tooltip';
 export TimePicker from './time_picker';
-export Pager from './pager';
diff --git a/components/pager/_config.scss b/components/pager/_config.scss
deleted file mode 100644
index 14cb04d9b..000000000
--- a/components/pager/_config.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import "http://github.com/button/config";
-
-$button-margin: 0rem .5rem 0rem 0rem !default;
\ No newline at end of file
diff --git a/components/pager/index.d.ts b/components/pager/index.d.ts
deleted file mode 100644
index fd98d878b..000000000
--- a/components/pager/index.d.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "./index";
-
-export interface PagerTheme {
-  /**
-   * Used for the root element.
-   */
-  pager?: string;
-  /**
-   * Used for the active page.
-   */
-  active?: string;
-  /**
-   * Used for the next and previous page buttons.
-   */
-  leftRightArrowButton?: string;
-  /**
-   * Used for the next and previous range pages buttons.
-   */
-  leftRightRangeButton?: string;
-  /**
-   * Used for the regular page buttons.
-   */
-  pagesButton?: string;
-}
-
-interface PagerProps extends ReactToolbox.Props {
-  /**
-   *  Used for the previous button content.
-   */
-  prevButtonContent?: string;
-  /**
-   * Used for the left range button content
-   */
-  rangeLeftButtonContent?: string;
-  /**
-   * Used for the right range button content
-   */
-  rangeRightButtonContent?: string;
-  /**
-   * Used for the next button content
-   */
-  nextButtonContent?: string;
-  /**
-   * A Number with the currently selected page
-   */
-  currentPage?: number;
-  /**
-   * A Number of last page.
-   */
-  lastPage?: number;
-  /**
-   * A Number of pages visible in control except next, previous and ranges buttons, the minimum value is 2.
-   */
-  visiblePagesBlockSize?: number;
-  /**
-   * Callback called when the page is changing.
-   */
-  onPageChange?: Function;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: PagerTheme;
-  /**
-   * This class will be applied to the root elemt.
-   */
-  pagerClassName?: string;
-  /**
-   * Defining default style of next, previous buttons. 
-   * it can have following styles:
-   *    accent,
-   *    flat,
-   *    inverse,
-   *    mini,
-   *    neutral,
-   *    primary,
-   *    raised,
-   *    toggle
-   */
-  leftRightArrowButtonTypes?: object;
-  /**
-   * Defining default style of left, right range buttons. 
-   * it can have following styles:
-   *    accent,
-   *    flat,
-   *    inverse,
-   *    mini,
-   *    neutral,
-   *    primary,
-   *    raised,
-   *    toggle
-   */
-  leftRightRangeButtonTypes?: object;
-  /**
-   * Defining default style of regular page buttons. 
-   * it can have following styles:
-   *    accent,
-   *    flat,
-   *    inverse,
-   *    mini,
-   *    neutral,
-   *    primary,
-   *    raised,
-   *    toggle
-   */
-  pagesButtonTypes?: object;
-}
-
-export class Pager extends React.Component<PagerProps, {}> { }
-
-export default Pager;
diff --git a/components/pager/index.js b/components/pager/index.js
deleted file mode 100644
index 0e5348ac7..000000000
--- a/components/pager/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { themr } from 'react-css-themr';
-import { PAGER } from '../identifiers.js';
-import { pagerFactory } from './pager.js';
-import { Button } from '../button';
-import theme from './theme.scss';
-
-const Pager = pagerFactory(Button);
-
-const ThemedPager = themr(PAGER, theme)(Pager);
-export default ThemedPager;
-export { ThemedPager as Pager };
diff --git a/components/pager/pager.js b/components/pager/pager.js
deleted file mode 100644
index 85f2e48e4..000000000
--- a/components/pager/pager.js
+++ /dev/null
@@ -1,299 +0,0 @@
-import React, { Component, PropTypes } from 'react';
-import classnames from 'classnames';
-import { themr } from 'react-css-themr';
-
-import InjectButton from '../button';
-import { PAGER } from '../identifiers.js';
-
-const isOnePage = (first, last) => {
-    return first === last || !last;
-};
-
-const isBorderPage = (curr, border) => {
-    return curr === border;
-};
-
-const initialVisiblePagesBlockSize = 3;
-const initialCurrentPage = 1;
-const first = 1;
-
-const factory = (Button) => {
-  class Pager extends Component {
-
-    static propTypes = {
-        currentPage: React.PropTypes.number.isRequired,
-        lastPage: React.PropTypes.number.isRequired,
-        leftRightArrowButtonTypes: React.PropTypes.object,
-        leftRightRangeButtonTypes: React.PropTypes.object,
-        nextButtonContent: React.PropTypes.oneOfType([
-            React.PropTypes.string,
-            React.PropTypes.element
-        ]),
-        onPageChange: React.PropTypes.func,
-        pagerClassName: PropTypes.string,
-        pagesButtonTypes: React.PropTypes.object,
-        prevButtonContent: React.PropTypes.oneOfType([
-            React.PropTypes.string,
-            React.PropTypes.element
-        ]),
-        rangeLeftButtonContent: React.PropTypes.oneOfType([
-            React.PropTypes.string,
-            React.PropTypes.element
-        ]),
-        rangeRightButtonContent: React.PropTypes.oneOfType([
-            React.PropTypes.string,
-            React.PropTypes.element
-        ]),
-        theme: PropTypes.shape({
-            pager: PropTypes.string,
-            active: PropTypes.string,
-            leftRightArrowButton: PropTypes.string,
-            leftRightRangeButton: PropTypes.string,
-            pagesButton: PropTypes.string
-        }),
-        visiblePagesBlockSize: React.PropTypes.number.isRequired
-    }
-
-    static defaultProps = {
-        currentPage: initialCurrentPage,
-        lastPage: initialCurrentPage,
-        leftRightArrowButtonTypes: {raised: true},
-        leftRightRangeButtonTypes: {flat: true},
-        nextButtonContent: '\u003E',
-        pagesButtonTypes: {flat: true},
-        prevButtonContent: '\u003C',
-        rangeLeftButtonContent: '...',
-        rangeRightButtonContent: '...',
-        visiblePagesBlockSize: initialVisiblePagesBlockSize
-    }
-
-    state = {
-        currentPage: this.props.currentPage,
-        lastPage: this.props.lastPage
-    }
-
-    componentWillReceiveProps (nextProps) {
-      if (nextProps.currentPage && !isNaN(Number(nextProps.currentPage))
-        && this.state.currentPage !== nextProps.currentPage) {
-        this.setState({
-            currentPage: Number(nextProps.currentPage < first ? first : nextProps.currentPage)
-        });
-      }
-      if (nextProps.lastPage && !isNaN(Number(nextProps.lastPage))
-        && this.state.lastPage !== nextProps.lastPage) {
-        this.setState({
-            lastPage: Number(nextProps.lastPage < first ? first : nextProps.lastPage)
-        });
-      }
-    }
-
-    handlerPageClick (page) {
-        const oldValue = this.state.currentPage;
-        const newValue = page;
-
-        if (this.props.onPageChange) {
-            this.props.onPageChange(oldValue, newValue);
-        }
-
-        this.setState({
-            currentPage: newValue
-        });
-    }
-
-    handlerRangeClick (key) {
-        const curr = this.state.currentPage;
-        const last = this.state.lastPage;
-
-        const right = !this._ranges.rightStart ? last : this._ranges.rightStart;
-        const left = !this._ranges.leftEnd ? first : this._ranges.leftEnd;
-
-        let newValue = curr;
-        let sum = first + left;
-        if (key === 'prev') {
-            newValue = (sum >> 1); //rounding to left
-        } else {
-            sum = last + right;
-            newValue = (sum >> 1) + (sum % 2); //rounding to right
-        }
-
-        if (this.props.onPageChange) {
-            this.props.onPageChange(curr, newValue);
-        }
-
-        this.setState({
-            currentPage: newValue
-        });
-    }
-
-    handlerPrevNextClick (key) {
-        const oldValue = this.state.currentPage;
-        const newValue = key === 'prev' ? oldValue - 1 : oldValue + 1;
-
-        if (this.props.onPageChange) {
-            this.props.onPageChange(oldValue, newValue);
-        }
-
-        this.setState({
-            currentPage: newValue
-        });
-    }
-
-    //fields
-    _ranges = {
-        leftEnd: null,
-        rightStart: null
-    }
-
-    //rendering
-    //private methods
-    renderPages (currPage, lastPage) {
-        let curr = currPage;
-        let last = lastPage < first ? first : lastPage;
-        if (curr < first || curr > last) {
-            curr = curr < first ? first : curr > last ? last : curr;
-            this.setState({
-                currentPage: curr
-            });
-        }
-
-        /*
-        * adjustment of start and end elements at range to have equal elements during navigation
-        * 2 - because we already have the rendered first and last button
-        */
-        const adjustment = 2;
-        const content = [];
-
-        const blockSize = this.props.visiblePagesBlockSize === 1 ? adjustment : this.props.visiblePagesBlockSize;
-
-        const padding = blockSize >> 1;
-        const left = curr - padding * (blockSize % 2); //in case of even visiblePagesBlockSize
-        const right = curr + padding;
-
-        const blocksNumber = Math.ceil(last / blockSize);
-        let currentBlock = Math.ceil(curr / blockSize);
-
-        let start = ((currentBlock - 1) * blockSize) + first;
-        let end = start + blockSize - first;
-
-        if (currentBlock === 1) { //adjust set of buttons if current is on the left boundary
-            end += adjustment;
-            end = (last - first) === end ? last : end;
-        } else if (currentBlock < blocksNumber) { //adjustment set of buttons if current is between boundaries
-            start = left;
-            end = right;
-
-            currentBlock = Math.ceil(end / blockSize);
-        }
-
-        if (currentBlock === blocksNumber) { //adjustment set of buttons if current is on the right boundary
-            start = last - (blockSize + adjustment - first);
-            start = start - 1 <= first ? first : start;
-            end = last;
-        }
-
-        if (currentBlock > 1 && (start - 1) > first) {
-            content.push(
-                <Button
-                    key={first}
-                    {...this.props.pagesButtonTypes}
-                    className={classnames(this.props.theme.pagesButton, (curr === first ? this.props.theme.active : null))}
-                    onClick={this.handlerPageClick.bind(this, first)}>
-                    { String(first) }
-                </Button>
-            );
-
-            content.push(
-                <Button
-                    key={'prev'}
-                    {...this.props.leftRightRangeButtonTypes}
-                    className={classnames(this.props.theme.leftRightRangeButton)}
-                    onClick={this.handlerRangeClick.bind(this, 'prev')}>
-                    { this.props.rangeLeftButtonContent }
-                </Button>
-            );
-        }
-
-        for (let i = start; i <= last && i <= end; ++i) {
-            content.push(
-                    <Button
-                        key={i}
-                        {...this.props.pagesButtonTypes}
-                        className={classnames(this.props.theme.pagesButton, (curr === i ? this.props.theme.active : null))}
-                        onClick={this.handlerPageClick.bind(this, i)}>
-                        { String(i) }
-                    </Button>
-                );
-        }
-
-        if (currentBlock < blocksNumber && end < last) {
-            content.push(
-                <Button
-                    key={'next'}
-                    {...this.props.leftRightRangeButtonTypes}
-                    className={classnames(this.props.theme.leftRightRangeButton)}
-                    onClick={this.handlerRangeClick.bind(this, 'next')}>
-                    { this.props.rangeRightButtonContent }
-                </Button>
-            );
-
-            content.push(
-                <Button
-                    key={last}
-                    {...this.props.pagesButtonTypes}
-                    className={classnames(this.props.theme.pagesButton, (curr === last ? this.props.theme.active : null))}
-                    onClick={this.handlerPageClick.bind(this, last)}>
-                    { String(last) }
-                </Button>
-            );
-        }
-
-        // keep range boundaries to calculate correct navigation through the range
-        this._ranges.leftEnd = start;
-        this._ranges.rightStart = end - 1;
-
-        return content;
-    }
-
-    render () {
-        const {leftRightArrowButtonTypes, prevButtonContent, nextButtonContent,
-                pagerClassName, lastPage, theme} = this.props;
-
-        if (lastPage < first) {
-            console.error('ArgumentOutOfRangeException: last Page must be bigger or equal first = 1.');
-        }
-
-        return (
-            <div data-react-toolbox='pager' className={classnames(theme.pager, pagerClassName)} >
-
-                <Button
-                    {...leftRightArrowButtonTypes}
-                    disabled={isOnePage(first, this.state.lastPage) || isBorderPage(this.state.currentPage, first)}
-                    className={theme.leftRightArrowButton}
-                    onClick={this.handlerPrevNextClick.bind(this, 'prev')}>
-                    { prevButtonContent }
-                </Button>
-                {
-                    this.renderPages(this.state.currentPage, this.state.lastPage)
-                }
-                <Button
-                    {...leftRightArrowButtonTypes}
-                    disabled={isOnePage(first, this.state.lastPage) || isBorderPage(this.state.currentPage, this.state.lastPage)}
-                    className={theme.leftRightArrowButton}
-                    onClick={this.handlerPrevNextClick.bind(this, 'next')}>
-                    { nextButtonContent }
-                </Button>
-
-            </div>);
-        }
-    }
-
-    return Pager;
-};
-
-const Pager = factory(InjectButton);
-
-export default themr(PAGER)(Pager);
-export {
-  factory as pagerFactory
-};
-export { Pager };
diff --git a/components/pager/readme.md b/components/pager/readme.md
deleted file mode 100644
index 3fee2f6f7..000000000
--- a/components/pager/readme.md
+++ /dev/null
@@ -1,63 +0,0 @@
-# Pager
-
-Provides functionality of pagination control, actually the component is not defined at(https://www.google.com/design/spec/components), but designed by using standart components from material design. 
-It is easy to use and configure, also it is highly customizable.
-
-<!-- example -->
-```jsx
-import Pager from 'react-toolbox/lib/pager';
-import FontIcon from 'react-toolbox/lib/font_icon';
-
-const ProgressTest = () => {
-
-    var onPageChange = function (oldPage, newPage)
-    {
-        //server call to update content according current page
-        console.info("Previous page : " + oldPage + ", Selected page: " + newPage);
-    }
-
-    return (
-      <Pager 
-        prevButtonContent={ (<FontIcon value='chevron_left' />) }
-        nextButtonContent={ (<FontIcon value='chevron_right' />) }
-        rangeLeftButtonContent={(<FontIcon value='more_horiz' />)}
-        rangeRightButtonContent={(<FontIcon value='more_horiz' />)}
-        lastPage={29}
-        currentPage={5}
-        visiblePagesBlockSize={3}
-        onPageChange={onPageChange}
-      />
-  );
-};
-```
-
-If you want to provide a theme via context, the component key is `RTPager`.
-
-## Properties
-
-| Name          | Type        | Default         | Description|
-|:-----|:-----|:-----|:-----|
-| `prevButtonContent`              | `String`    | `\u003C`            | Used for the previous button content.|
-| `nextButtonContent`              | `String`    | `\u003E`            | Used for the next button content.|
-| `rangeLeftButtonContent`         | `String`    | `...`               | Used for the left range button content.|
-| `rangeRightButtonContent`        | `String`    | `...`               | Used for the right range button content.|
-| `currentPage`                    | `Number`    | `1`                 | A Number with the currently selected page.|
-| `lastPage`                       | `Number`    | `1`                 | A Number of last page.|
-| `visiblePagesBlockSize`          | `Number`    | `3`                 | A Number of pages visible in control except next, previous and ranges buttons, the minimum value is 2.|
-| `onPageChange`                   | `Function`  |                     | Callback called when the page is changing.|
-| `theme`                          | `String`    |                     | Classnames object defining the component style.|
-| `pagerClassName`                 | `String`    |                     | This class will be applied to the root elemt.|
-| `leftRightArrowButtonTypes`      | `Object`    | {raised: true}      | Defining default style of next, previous buttons.|
-| `leftRightRangeButtonTypes`      | `Object`    | {flat: true}        | Defining default style of left, right range buttons.|
-| `pagesButtonTypes`               | `Object`    | {flat: true}        | Defining default style of regular page buttons.|
-
-
-## Theme
-
-| Name     | Description|
-|:---------|:-----------|
-| `pager` | Used for the root element.|
-| `active` | Used for the active page.|
-| `leftRightArrowButton` | Used for the next and previous page buttons.|
-| `leftRightRangeButton` | Used for the next and previous range pages buttons.|
-| `pagesButton` | Used for the regular page buttons.|
\ No newline at end of file
diff --git a/components/pager/theme.scss b/components/pager/theme.scss
deleted file mode 100644
index 9d481fe40..000000000
--- a/components/pager/theme.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.pager {
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: center;
-    align-items: center;
-
-    .leftRightArrowButton,
-    .leftRightRangeButton,
-    .pagesButton {
-        display: flex;
-        flex-shrink: 0;
-
-        min-width: $button-height;
-        margin: $button-margin;
-    }
-
-    .active {
-        text-decoration: underline;
-    }
-}
\ No newline at end of file
diff --git a/spec/components/pager.js b/spec/components/pager.js
deleted file mode 100644
index 16ce7ed32..000000000
--- a/spec/components/pager.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import React, { PropTypes } from 'react';
-import Pager from '../../components/pager';
-import FontIcon from '../../components/font_icon';
-import Input from '../../components/input';
-import style from '../style';
-
-class PagerTest extends React.Component {
-
-  static propTypes = {
-    visiblePagesBlockSize: PropTypes.number
-  };
-
-  static defaultProps = {
-    visiblePagesBlockSize: 3
-  }
-
-  state = {
-    lastPage: 29,
-    currentPage: 5
-  }
-
-  onInputChange = (name, value) => {
-    const state = this.state;
-
-    state[name] = value;
-
-    this.setState({
-        ...state
-    });
-  }
-
-  onPageChange (oldPage, newPage) {
-    console.info('Previous page : ' + oldPage + ', Selected page: ' + newPage);
-  }
-
-  render () {
-
-    return (
-      <section>
-        <h5>Pager</h5>
-        <p>Pager based on Material design.</p>
-
-        <div className={style.pager}>
-          <Pager
-              prevButtonContent={<FontIcon value='chevron_left' />}
-              nextButtonContent={<FontIcon value='chevron_right' />}
-              rangeLeftButtonContent={<FontIcon value='more_horiz' />}
-              rangeRightButtonContent={<FontIcon value='more_horiz' />}
-              lastPage={this.state.lastPage}
-              currentPage={this.state.currentPage}
-              visiblePagesBlockSize={this.props.visiblePagesBlockSize}
-              onPageChange={this.onPageChange}
-          />
-        </div>
-
-        <Input
-          type='number'
-          value={this.state.lastPage}
-          label='Last Page' onChange={this.onInputChange.bind(this, 'lastPage')}
-        />
-
-      </section>
-    );
-  }
-}
-
-export default PagerTest;
diff --git a/spec/root.js b/spec/root.js
index 1dd371507..ddf1a6b9b 100644
--- a/spec/root.js
+++ b/spec/root.js
@@ -19,7 +19,6 @@ import Input from './components/input';
 import Layout from './components/layout';
 import List from './components/list';
 import Menu from './components/menu';
-import Pager from './components/pager';
 import Pickers from './components/pickers';
 import Progress from './components/progress';
 import Radio from './components/radio';
@@ -64,7 +63,6 @@ const Root = () => (
     <List />
     <Menu />
     <Pickers />
-    <Pager />
     <Progress />
     <Radio />
     <Slider />
diff --git a/spec/style.scss b/spec/style.scss
index 7b19fe42b..ac92d051e 100644
--- a/spec/style.scss
+++ b/spec/style.scss
@@ -146,10 +146,3 @@ $offset: 1.8 * $unit;
     height: 40px;
   }
 }
-
-.pager
- {
-   display: flex;
-   flex-flow: row nowrap;
-   justify-content: center;
- } 
\ No newline at end of file

From 9d3bba3c31b96bdc53c7d7daceeb0624e6beb78c Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 8 Oct 2016 12:27:57 +0200
Subject: [PATCH 0850/1024] Fix #819

---
 components/snackbar/Snackbar.js | 13 ++++++++++---
 components/snackbar/readme.md   |  3 ++-
 spec/components/snackbar.js     |  5 +++--
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/components/snackbar/Snackbar.js b/components/snackbar/Snackbar.js
index 79f30f74b..4ff381438 100644
--- a/components/snackbar/Snackbar.js
+++ b/components/snackbar/Snackbar.js
@@ -12,12 +12,16 @@ const factory = (Overlay, Button) => {
     static propTypes = {
       action: PropTypes.string,
       active: PropTypes.bool,
+      children: PropTypes.node,
       className: PropTypes.string,
       icon: PropTypes.oneOfType([
         PropTypes.string,
         PropTypes.element
       ]),
-      label: PropTypes.string,
+      label: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.element
+      ]),
       onClick: PropTypes.func,
       onTimeout: PropTypes.func,
       theme: PropTypes.shape({
@@ -49,7 +53,7 @@ const factory = (Overlay, Button) => {
     }
 
     render () {
-      const {action, active, icon, label, onClick, theme, type } = this.props;
+      const {action, active, children, icon, label, onClick, theme, type } = this.props;
       const className = classnames([theme.snackbar, theme[type]], {
         [theme.active]: active
       }, this.props.className);
@@ -58,7 +62,10 @@ const factory = (Overlay, Button) => {
         <Overlay invisible>
           <div data-react-toolbox='snackbar' className={className}>
             {icon ? <FontIcon value={icon} className={theme.icon} /> : null}
-            <span className={theme.label}>{label}</span>
+            <span className={theme.label}>
+              {label}
+              {children}
+            </span>
             {action ? <Button className={theme.button} label={action} onClick={onClick}/> : null}
           </div>
         </Overlay>
diff --git a/components/snackbar/readme.md b/components/snackbar/readme.md
index 1985194e0..92f22e023 100644
--- a/components/snackbar/readme.md
+++ b/components/snackbar/readme.md
@@ -41,9 +41,10 @@ This component can be styled by context providing a theme with the key `RTSnackb
 |:-----|:-----|:-----|:-----|
 | `action`      | `String`                |               | Label for the action component inside the Snackbar.|
 | `active`      | `Boolean`               |  `false`      | If true, the snackbar will be active.|
+| `children`    | `String or Element`     |  `false`      | Text or node to be displayed in the content as alternative to `label`.|
 | `className`   | `String`                | `''`          | Additional class name to provide custom styling.|
 | `icon`        | `String` or `Element`   |               | String key for an icon or Element which will be displayed in left side of the snackbar.|
-| `label`       | `String`                |               | Text to display in the content. Required.|
+| `label`       | `String or Element`     |               | Text to display in the content.|
 | `onClick`     | `Function`              |               | Callback function that will be called when the button action is clicked.|
 | `onTimeout`   | `Function`              |               | Callback function when finish the set timeout.|
 | `timeout`     | `Number`                |               | Amount of time in milliseconds after the Snackbar will be automatically hidden.|
diff --git a/spec/components/snackbar.js b/spec/components/snackbar.js
index e43d6fee4..2f063475c 100644
--- a/spec/components/snackbar.js
+++ b/spec/components/snackbar.js
@@ -29,12 +29,13 @@ class SnackbarTest extends React.Component {
           action='http://github.com/Hide'
           active={this.state.active}
           icon='question_answer'
-          label='Snackbar action cancel'
           timeout={2000}
           onClick={this.handleSnackbarClick}
           onTimeout={this.handleSnackbarTimeout}
           type='warning'
-        />
+        >
+          Snackbar action <strong>cancel</strong>
+        </Snackbar>
       </section>
     );
   }

From feaa28e4c8d932ba0539397118fab4c5c85590db Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 8 Oct 2016 12:40:55 +0200
Subject: [PATCH 0851/1024] Fix #841

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 1056be0d4..e7b8b4ef6 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
   "dependencies": {
     "classnames": "~2.2.5",
     "core-js": "~2.4.0",
-    "react-css-themr": "~1.2.0"
+    "react-css-themr": "~1.4.1"
   },
   "devDependencies": {
     "autoprefixer": "~6.4.0",

From 991ab80c2e00900d7386c47db664e75d8dc369da Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 8 Oct 2016 12:51:21 +0200
Subject: [PATCH 0852/1024] Latest build

---
 lib/app_bar/AppBar.js               |  4 ++--
 lib/autocomplete/Autocomplete.js    | 20 ++++++++++----------
 lib/button/Button.js                |  4 ++--
 lib/button/IconButton.js            |  4 ++--
 lib/checkbox/Checkbox.js            |  4 ++--
 lib/date_picker/Calendar.js         |  4 ++--
 lib/date_picker/CalendarDay.js      |  4 ++--
 lib/date_picker/CalendarMonth.js    |  4 ++--
 lib/date_picker/DatePicker.js       |  4 ++--
 lib/date_picker/DatePickerDialog.js |  4 ++--
 lib/dropdown/Dropdown.js            |  4 ++--
 lib/form/Form.js                    |  4 ++--
 lib/hoc/ActivableRenderer.js        |  6 +++---
 lib/hoc/Portal.js                   |  2 +-
 lib/input/Input.js                  |  6 +++---
 lib/list/List.js                    |  2 +-
 lib/list/ListItem.js                |  4 ++--
 lib/list/ListItemContent.js         |  2 +-
 lib/menu/IconMenu.js                |  4 ++--
 lib/menu/Menu.js                    |  4 ++--
 lib/menu/MenuItem.js                |  4 ++--
 lib/overlay/Overlay.js              |  2 +-
 lib/progress_bar/ProgressBar.js     |  2 +-
 lib/radio/RadioButton.js            |  4 ++--
 lib/radio/RadioGroup.js             |  4 ++--
 lib/ripple/Ripple.js                | 18 +++++++++---------
 lib/slider/Slider.js                |  4 ++--
 lib/snackbar/Snackbar.js            |  9 ++++++---
 lib/switch/Switch.js                |  4 ++--
 lib/table/Table.js                  |  4 ++--
 lib/table/TableRow.js               |  4 ++--
 lib/tabs/Tab.js                     |  4 ++--
 lib/tabs/TabContent.js              |  2 +-
 lib/tabs/Tabs.js                    |  4 ++--
 lib/tabs/__tests__/index.spec.js    |  2 +-
 lib/time_picker/Clock.js            |  4 ++--
 lib/time_picker/ClockFace.js        |  4 ++--
 lib/time_picker/ClockHand.js        |  4 ++--
 lib/time_picker/ClockHours.js       |  4 ++--
 lib/time_picker/ClockMinutes.js     |  4 ++--
 lib/time_picker/TimePicker.js       |  4 ++--
 lib/time_picker/TimePickerDialog.js |  4 ++--
 lib/tooltip/Tooltip.js              | 14 +++++++-------
 lib/utils/events.js                 |  2 +-
 lib/utils/prefixer.js               |  2 +-
 lib/utils/testing.js                |  4 ++--
 lib/utils/time.js                   | 12 ++++++------
 lib/utils/utils.js                  |  6 +++---
 48 files changed, 118 insertions(+), 115 deletions(-)

diff --git a/lib/app_bar/AppBar.js b/lib/app_bar/AppBar.js
index 9d79919ef..4ae2106e9 100644
--- a/lib/app_bar/AppBar.js
+++ b/lib/app_bar/AppBar.js
@@ -38,7 +38,7 @@ var factory = function factory(IconButton) {
     _inherits(AppBar, _React$Component);
 
     function AppBar() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -48,7 +48,7 @@ var factory = function factory(IconButton) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(AppBar)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { hidden: false, height: 0 }, _this.initializeScroll = function () {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = AppBar.__proto__ || Object.getPrototypeOf(AppBar)).call.apply(_ref, [this].concat(args))), _this), _this.state = { hidden: false, height: 0 }, _this.initializeScroll = function () {
         window.addEventListener('scroll', _this.handleScroll);
 
         var _this$rootNode$getBou = _this.rootNode.getBoundingClientRect();
diff --git a/lib/autocomplete/Autocomplete.js b/lib/autocomplete/Autocomplete.js
index 8b3235683..5fa0e59eb 100644
--- a/lib/autocomplete/Autocomplete.js
+++ b/lib/autocomplete/Autocomplete.js
@@ -64,7 +64,7 @@ var factory = function factory(Chip, Input) {
     _inherits(Autocomplete, _Component);
 
     function Autocomplete() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -74,7 +74,7 @@ var factory = function factory(Chip, Input) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Autocomplete)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Autocomplete.__proto__ || Object.getPrototypeOf(Autocomplete)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         direction: _this.props.direction,
         focus: false,
         showAllSuggestions: _this.props.showSuggestionsWhenValueIsSet,
@@ -334,11 +334,11 @@ var factory = function factory(Chip, Input) {
         var _this2 = this;
 
         if (this.props.multiple) {
-          var selectedItems = [].concat(_toConsumableArray(this.values())).map(function (_ref) {
-            var _ref2 = _slicedToArray(_ref, 2);
+          var selectedItems = [].concat(_toConsumableArray(this.values())).map(function (_ref2) {
+            var _ref3 = _slicedToArray(_ref2, 2);
 
-            var key = _ref2[0];
-            var value = _ref2[1];
+            var key = _ref3[0];
+            var value = _ref3[1];
 
             return _react2.default.createElement(
               Chip,
@@ -366,11 +366,11 @@ var factory = function factory(Chip, Input) {
 
         var theme = this.props.theme;
 
-        var suggestions = [].concat(_toConsumableArray(this.suggestions())).map(function (_ref3) {
-          var _ref4 = _slicedToArray(_ref3, 2);
+        var suggestions = [].concat(_toConsumableArray(this.suggestions())).map(function (_ref4) {
+          var _ref5 = _slicedToArray(_ref4, 2);
 
-          var key = _ref4[0];
-          var value = _ref4[1];
+          var key = _ref5[0];
+          var value = _ref5[1];
 
           var className = (0, _classnames5.default)(theme.suggestion, _defineProperty({}, theme.active, _this3.state.active === key));
           return _react2.default.createElement(
diff --git a/lib/button/Button.js b/lib/button/Button.js
index 2b9e424f5..b38aeb3b7 100644
--- a/lib/button/Button.js
+++ b/lib/button/Button.js
@@ -46,7 +46,7 @@ var factory = function factory(ripple, FontIcon) {
     _inherits(Button, _Component);
 
     function Button() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -56,7 +56,7 @@ var factory = function factory(ripple, FontIcon) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Button)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Button.__proto__ || Object.getPrototypeOf(Button)).call.apply(_ref, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
         _this.refs.button.blur();
         if (_this.props.onMouseUp) _this.props.onMouseUp(event);
       }, _this.handleMouseLeave = function (event) {
diff --git a/lib/button/IconButton.js b/lib/button/IconButton.js
index 98f6331b6..40f22fd91 100644
--- a/lib/button/IconButton.js
+++ b/lib/button/IconButton.js
@@ -46,7 +46,7 @@ var factory = function factory(ripple, FontIcon) {
     _inherits(IconButton, _Component);
 
     function IconButton() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -56,7 +56,7 @@ var factory = function factory(ripple, FontIcon) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(IconButton)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = IconButton.__proto__ || Object.getPrototypeOf(IconButton)).call.apply(_ref, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
         _this.refs.button.blur();
         if (_this.props.onMouseUp) _this.props.onMouseUp(event);
       }, _this.handleMouseLeave = function (event) {
diff --git a/lib/checkbox/Checkbox.js b/lib/checkbox/Checkbox.js
index 5b4ae9bdd..136f82e8b 100644
--- a/lib/checkbox/Checkbox.js
+++ b/lib/checkbox/Checkbox.js
@@ -46,7 +46,7 @@ var factory = function factory(Check) {
     _inherits(Checkbox, _Component);
 
     function Checkbox() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -56,7 +56,7 @@ var factory = function factory(Check) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Checkbox)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleToggle = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Checkbox.__proto__ || Object.getPrototypeOf(Checkbox)).call.apply(_ref, [this].concat(args))), _this), _this.handleToggle = function (event) {
         if (event.pageX !== 0 && event.pageY !== 0) _this.blur();
         if (!_this.props.disabled && _this.props.onChange) {
           _this.props.onChange(!_this.props.checked, event);
diff --git a/lib/date_picker/Calendar.js b/lib/date_picker/Calendar.js
index ddbea1ba2..3e0f8ae96 100644
--- a/lib/date_picker/Calendar.js
+++ b/lib/date_picker/Calendar.js
@@ -43,7 +43,7 @@ var factory = function factory(IconButton) {
     _inherits(Calendar, _Component);
 
     function Calendar() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -53,7 +53,7 @@ var factory = function factory(IconButton) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Calendar)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Calendar.__proto__ || Object.getPrototypeOf(Calendar)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         viewDate: _this.props.selectedDate
       }, _this.handleDayClick = function (day) {
         _this.props.onChange(_time2.default.setDay(_this.state.viewDate, day), true);
diff --git a/lib/date_picker/CalendarDay.js b/lib/date_picker/CalendarDay.js
index 023206fde..af1b4a944 100644
--- a/lib/date_picker/CalendarDay.js
+++ b/lib/date_picker/CalendarDay.js
@@ -32,7 +32,7 @@ var Day = function (_Component) {
   _inherits(Day, _Component);
 
   function Day() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -42,7 +42,7 @@ var Day = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Day)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function () {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Day.__proto__ || Object.getPrototypeOf(Day)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function () {
       if (!_this.props.disabled && _this.props.onClick) {
         _this.props.onClick(_this.props.day);
       }
diff --git a/lib/date_picker/CalendarMonth.js b/lib/date_picker/CalendarMonth.js
index 772c665e3..ad3afbe25 100644
--- a/lib/date_picker/CalendarMonth.js
+++ b/lib/date_picker/CalendarMonth.js
@@ -36,7 +36,7 @@ var Month = function (_Component) {
   _inherits(Month, _Component);
 
   function Month() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -46,7 +46,7 @@ var Month = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Month)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleDayClick = function (day) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Month.__proto__ || Object.getPrototypeOf(Month)).call.apply(_ref, [this].concat(args))), _this), _this.handleDayClick = function (day) {
       if (_this.props.onDayClick) _this.props.onDayClick(day);
     }, _temp), _possibleConstructorReturn(_this, _ret);
   }
diff --git a/lib/date_picker/DatePicker.js b/lib/date_picker/DatePicker.js
index 1ac61bc76..a07554039 100644
--- a/lib/date_picker/DatePicker.js
+++ b/lib/date_picker/DatePicker.js
@@ -66,7 +66,7 @@ var factory = function factory(Input, DatePickerDialog) {
     _inherits(DatePicker, _Component);
 
     function DatePicker() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -76,7 +76,7 @@ var factory = function factory(Input, DatePickerDialog) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(DatePicker)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = DatePicker.__proto__ || Object.getPrototypeOf(DatePicker)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         active: _this.props.active
       }, _this.handleDismiss = function () {
         _this.setState({ active: false });
diff --git a/lib/date_picker/DatePickerDialog.js b/lib/date_picker/DatePickerDialog.js
index eca036556..c9f934b2e 100644
--- a/lib/date_picker/DatePickerDialog.js
+++ b/lib/date_picker/DatePickerDialog.js
@@ -31,7 +31,7 @@ var factory = function factory(Dialog, Calendar) {
     _inherits(CalendarDialog, _Component);
 
     function CalendarDialog() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -41,7 +41,7 @@ var factory = function factory(Dialog, Calendar) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(CalendarDialog)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = CalendarDialog.__proto__ || Object.getPrototypeOf(CalendarDialog)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         display: 'months',
         date: _this.props.value
       }, _this.handleNewDate = function (value, dayClick) {
diff --git a/lib/dropdown/Dropdown.js b/lib/dropdown/Dropdown.js
index 4f9d2dbff..66bafcab1 100644
--- a/lib/dropdown/Dropdown.js
+++ b/lib/dropdown/Dropdown.js
@@ -50,7 +50,7 @@ var factory = function factory(Input) {
     _inherits(Dropdown, _Component);
 
     function Dropdown() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -60,7 +60,7 @@ var factory = function factory(Input) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Dropdown)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Dropdown.__proto__ || Object.getPrototypeOf(Dropdown)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         active: false,
         up: false
       }, _this.close = function () {
diff --git a/lib/form/Form.js b/lib/form/Form.js
index 7de399c99..fe56e77f7 100644
--- a/lib/form/Form.js
+++ b/lib/form/Form.js
@@ -80,7 +80,7 @@ var factory = function factory(Autocomplete, Button, Checkbox, DatePicker, Dropd
     _inherits(Form, _Component);
 
     function Form() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -90,7 +90,7 @@ var factory = function factory(Autocomplete, Button, Checkbox, DatePicker, Dropd
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Form)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.onSubmit = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Form.__proto__ || Object.getPrototypeOf(Form)).call.apply(_ref, [this].concat(args))), _this), _this.onSubmit = function (event) {
         event.preventDefault();
         if (_this.props.onSubmit) _this.props.onSubmit(event);
       }, _this.onChange = function (field, value, event) {
diff --git a/lib/hoc/ActivableRenderer.js b/lib/hoc/ActivableRenderer.js
index e64654f71..b43301a5c 100644
--- a/lib/hoc/ActivableRenderer.js
+++ b/lib/hoc/ActivableRenderer.js
@@ -23,7 +23,7 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
 var ActivableRendererFactory = function ActivableRendererFactory() {
-  var options = arguments.length <= 0 || arguments[0] === undefined ? { delay: 500 } : arguments[0];
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : { delay: 500 };
   return function (ActivableComponent) {
     var _class, _temp2;
 
@@ -31,7 +31,7 @@ var ActivableRendererFactory = function ActivableRendererFactory() {
       _inherits(ActivableRenderer, _Component);
 
       function ActivableRenderer() {
-        var _Object$getPrototypeO;
+        var _ref;
 
         var _temp, _this, _ret;
 
@@ -41,7 +41,7 @@ var ActivableRendererFactory = function ActivableRendererFactory() {
           args[_key] = arguments[_key];
         }
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(ActivableRenderer)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ActivableRenderer.__proto__ || Object.getPrototypeOf(ActivableRenderer)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
           active: _this.props.active,
           rendered: _this.props.active
         }, _temp), _possibleConstructorReturn(_this, _ret);
diff --git a/lib/hoc/Portal.js b/lib/hoc/Portal.js
index bf12d9039..0d8cda45a 100644
--- a/lib/hoc/Portal.js
+++ b/lib/hoc/Portal.js
@@ -28,7 +28,7 @@ var Portal = function (_Component) {
   function Portal() {
     _classCallCheck(this, Portal);
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(Portal).apply(this, arguments));
+    return _possibleConstructorReturn(this, (Portal.__proto__ || Object.getPrototypeOf(Portal)).apply(this, arguments));
   }
 
   _createClass(Portal, [{
diff --git a/lib/input/Input.js b/lib/input/Input.js
index d29f218bc..7383da6e5 100644
--- a/lib/input/Input.js
+++ b/lib/input/Input.js
@@ -7,7 +7,7 @@ exports.Input = exports.inputFactory = undefined;
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
@@ -44,7 +44,7 @@ var factory = function factory(FontIcon) {
     _inherits(Input, _React$Component);
 
     function Input() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -54,7 +54,7 @@ var factory = function factory(FontIcon) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Input)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleChange = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Input.__proto__ || Object.getPrototypeOf(Input)).call.apply(_ref, [this].concat(args))), _this), _this.handleChange = function (event) {
         var _this$props = _this.props;
         var onChange = _this$props.onChange;
         var multiline = _this$props.multiline;
diff --git a/lib/list/List.js b/lib/list/List.js
index cd315c954..eac163f81 100644
--- a/lib/list/List.js
+++ b/lib/list/List.js
@@ -38,7 +38,7 @@ var factory = function factory(ListItem) {
     function List() {
       _classCallCheck(this, List);
 
-      return _possibleConstructorReturn(this, Object.getPrototypeOf(List).apply(this, arguments));
+      return _possibleConstructorReturn(this, (List.__proto__ || Object.getPrototypeOf(List)).apply(this, arguments));
     }
 
     _createClass(List, [{
diff --git a/lib/list/ListItem.js b/lib/list/ListItem.js
index 193dec03f..3358acddb 100644
--- a/lib/list/ListItem.js
+++ b/lib/list/ListItem.js
@@ -44,7 +44,7 @@ var factory = function factory(ripple, ListItemLayout, ListItemContent) {
     _inherits(ListItem, _Component);
 
     function ListItem() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -54,7 +54,7 @@ var factory = function factory(ripple, ListItemLayout, ListItemContent) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(ListItem)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ListItem.__proto__ || Object.getPrototypeOf(ListItem)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
         if (_this.props.onClick && !_this.props.disabled) {
           _this.props.onClick(event);
         }
diff --git a/lib/list/ListItemContent.js b/lib/list/ListItemContent.js
index 25b922070..e8296af05 100644
--- a/lib/list/ListItemContent.js
+++ b/lib/list/ListItemContent.js
@@ -42,7 +42,7 @@ var factory = function factory(ListItemText) {
     function ListItemContent() {
       _classCallCheck(this, ListItemContent);
 
-      return _possibleConstructorReturn(this, Object.getPrototypeOf(ListItemContent).apply(this, arguments));
+      return _possibleConstructorReturn(this, (ListItemContent.__proto__ || Object.getPrototypeOf(ListItemContent)).apply(this, arguments));
     }
 
     _createClass(ListItemContent, [{
diff --git a/lib/menu/IconMenu.js b/lib/menu/IconMenu.js
index f076af1b4..70bff718d 100644
--- a/lib/menu/IconMenu.js
+++ b/lib/menu/IconMenu.js
@@ -40,7 +40,7 @@ var factory = function factory(IconButton, Menu) {
     _inherits(IconMenu, _Component);
 
     function IconMenu() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -50,7 +50,7 @@ var factory = function factory(IconButton, Menu) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(IconMenu)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = IconMenu.__proto__ || Object.getPrototypeOf(IconMenu)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         active: false
       }, _this.handleButtonClick = function (event) {
         _this.setState({ active: !_this.state.active });
diff --git a/lib/menu/Menu.js b/lib/menu/Menu.js
index ca67b900d..fb8199dc2 100644
--- a/lib/menu/Menu.js
+++ b/lib/menu/Menu.js
@@ -53,7 +53,7 @@ var factory = function factory(MenuItem) {
     _inherits(Menu, _Component);
 
     function Menu() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -63,7 +63,7 @@ var factory = function factory(MenuItem) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Menu)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Menu.__proto__ || Object.getPrototypeOf(Menu)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         active: _this.props.active,
         rippled: false
       }, _this.handleDocumentClick = function (event) {
diff --git a/lib/menu/MenuItem.js b/lib/menu/MenuItem.js
index 7562dfa0b..2670f4325 100644
--- a/lib/menu/MenuItem.js
+++ b/lib/menu/MenuItem.js
@@ -46,7 +46,7 @@ var factory = function factory(ripple) {
     _inherits(MenuItem, _Component);
 
     function MenuItem() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -56,7 +56,7 @@ var factory = function factory(ripple) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(MenuItem)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = MenuItem.__proto__ || Object.getPrototypeOf(MenuItem)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
         if (_this.props.onClick && !_this.props.disabled) {
           _this.props.onClick(event, _this);
         }
diff --git a/lib/overlay/Overlay.js b/lib/overlay/Overlay.js
index 21d96c8cd..f5662715b 100644
--- a/lib/overlay/Overlay.js
+++ b/lib/overlay/Overlay.js
@@ -39,7 +39,7 @@ var Overlay = function (_Component) {
   function Overlay() {
     _classCallCheck(this, Overlay);
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(Overlay).apply(this, arguments));
+    return _possibleConstructorReturn(this, (Overlay.__proto__ || Object.getPrototypeOf(Overlay)).apply(this, arguments));
   }
 
   _createClass(Overlay, [{
diff --git a/lib/progress_bar/ProgressBar.js b/lib/progress_bar/ProgressBar.js
index c1a36201a..f8a16e85e 100644
--- a/lib/progress_bar/ProgressBar.js
+++ b/lib/progress_bar/ProgressBar.js
@@ -39,7 +39,7 @@ var ProgressBar = function (_Component) {
   function ProgressBar() {
     _classCallCheck(this, ProgressBar);
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(ProgressBar).apply(this, arguments));
+    return _possibleConstructorReturn(this, (ProgressBar.__proto__ || Object.getPrototypeOf(ProgressBar)).apply(this, arguments));
   }
 
   _createClass(ProgressBar, [{
diff --git a/lib/radio/RadioButton.js b/lib/radio/RadioButton.js
index 7fe8abe0b..71ee095a7 100644
--- a/lib/radio/RadioButton.js
+++ b/lib/radio/RadioButton.js
@@ -44,7 +44,7 @@ var factory = function factory(Radio) {
     _inherits(RadioButton, _Component);
 
     function RadioButton() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -54,7 +54,7 @@ var factory = function factory(Radio) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(RadioButton)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RadioButton.__proto__ || Object.getPrototypeOf(RadioButton)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
         var _this$props = _this.props;
         var checked = _this$props.checked;
         var disabled = _this$props.disabled;
diff --git a/lib/radio/RadioGroup.js b/lib/radio/RadioGroup.js
index aa7ff0bc2..15c87f023 100644
--- a/lib/radio/RadioGroup.js
+++ b/lib/radio/RadioGroup.js
@@ -34,7 +34,7 @@ var factory = function factory(RadioButton) {
     _inherits(RadioGroup, _Component);
 
     function RadioGroup() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -44,7 +44,7 @@ var factory = function factory(RadioButton) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(RadioGroup)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleChange = function (value) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RadioGroup.__proto__ || Object.getPrototypeOf(RadioGroup)).call.apply(_ref, [this].concat(args))), _this), _this.handleChange = function (value) {
         if (_this.props.onChange) _this.props.onChange(value);
       }, _temp), _possibleConstructorReturn(_this, _ret);
     }
diff --git a/lib/ripple/Ripple.js b/lib/ripple/Ripple.js
index 9d728173d..79a0f35b9 100644
--- a/lib/ripple/Ripple.js
+++ b/lib/ripple/Ripple.js
@@ -61,7 +61,7 @@ var defaults = {
 };
 
 var rippleFactory = function rippleFactory() {
-  var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
   var _defaults$options = _extends({}, defaults, options);
 
@@ -78,7 +78,7 @@ var rippleFactory = function rippleFactory() {
       _inherits(RippledComponent, _Component);
 
       function RippledComponent() {
-        var _Object$getPrototypeO;
+        var _ref;
 
         var _temp, _this, _ret;
 
@@ -88,7 +88,7 @@ var rippleFactory = function rippleFactory() {
           args[_key] = arguments[_key];
         }
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(RippledComponent)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RippledComponent.__proto__ || Object.getPrototypeOf(RippledComponent)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
           ripples: {}
         }, _this.handleMouseDown = function (event) {
           if (_this.props.onMouseDown) _this.props.onMouseDown(event);
@@ -304,14 +304,14 @@ var rippleFactory = function rippleFactory() {
         }
       }, {
         key: 'renderRipple',
-        value: function renderRipple(key, className, _ref) {
+        value: function renderRipple(key, className, _ref2) {
           var _classnames;
 
-          var active = _ref.active;
-          var left = _ref.left;
-          var restarting = _ref.restarting;
-          var top = _ref.top;
-          var width = _ref.width;
+          var active = _ref2.active;
+          var left = _ref2.left;
+          var restarting = _ref2.restarting;
+          var top = _ref2.top;
+          var width = _ref2.width;
 
           var scale = restarting ? 0 : 1;
           var transform = 'translate3d(' + (-width / 2 + left) + 'px, ' + (-width / 2 + top) + 'px, 0) scale(' + scale + ')';
diff --git a/lib/slider/Slider.js b/lib/slider/Slider.js
index cfd2171b4..0ec33d19e 100644
--- a/lib/slider/Slider.js
+++ b/lib/slider/Slider.js
@@ -54,7 +54,7 @@ var factory = function factory(ProgressBar, Input) {
     _inherits(Slider, _Component);
 
     function Slider() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -64,7 +64,7 @@ var factory = function factory(ProgressBar, Input) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Slider)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Slider.__proto__ || Object.getPrototypeOf(Slider)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         inputFocused: false,
         inputValue: null,
         sliderLength: 0,
diff --git a/lib/snackbar/Snackbar.js b/lib/snackbar/Snackbar.js
index bbb90867a..18ea42271 100644
--- a/lib/snackbar/Snackbar.js
+++ b/lib/snackbar/Snackbar.js
@@ -52,7 +52,7 @@ var factory = function factory(Overlay, Button) {
     function Snackbar() {
       _classCallCheck(this, Snackbar);
 
-      return _possibleConstructorReturn(this, Object.getPrototypeOf(Snackbar).apply(this, arguments));
+      return _possibleConstructorReturn(this, (Snackbar.__proto__ || Object.getPrototypeOf(Snackbar)).apply(this, arguments));
     }
 
     _createClass(Snackbar, [{
@@ -79,6 +79,7 @@ var factory = function factory(Overlay, Button) {
         var _props = this.props;
         var action = _props.action;
         var active = _props.active;
+        var children = _props.children;
         var icon = _props.icon;
         var label = _props.label;
         var onClick = _props.onClick;
@@ -97,7 +98,8 @@ var factory = function factory(Overlay, Button) {
             _react2.default.createElement(
               'span',
               { className: theme.label },
-              label
+              label,
+              children
             ),
             action ? _react2.default.createElement(Button, { className: theme.button, label: action, onClick: onClick }) : null
           )
@@ -111,9 +113,10 @@ var factory = function factory(Overlay, Button) {
   Snackbar.propTypes = {
     action: _react.PropTypes.string,
     active: _react.PropTypes.bool,
+    children: _react.PropTypes.node,
     className: _react.PropTypes.string,
     icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-    label: _react.PropTypes.string,
+    label: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
     onClick: _react.PropTypes.func,
     onTimeout: _react.PropTypes.func,
     theme: _react.PropTypes.shape({
diff --git a/lib/switch/Switch.js b/lib/switch/Switch.js
index 96ad9977a..b723eccbd 100644
--- a/lib/switch/Switch.js
+++ b/lib/switch/Switch.js
@@ -44,7 +44,7 @@ var factory = function factory(Thumb) {
     _inherits(Switch, _Component);
 
     function Switch() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -54,7 +54,7 @@ var factory = function factory(Thumb) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Switch)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleToggle = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Switch.__proto__ || Object.getPrototypeOf(Switch)).call.apply(_ref, [this].concat(args))), _this), _this.handleToggle = function (event) {
         if (event.pageX !== 0 && event.pageY !== 0) _this.blur();
         if (!_this.props.disabled && _this.props.onChange) {
           _this.props.onChange(!_this.props.checked, event);
diff --git a/lib/table/Table.js b/lib/table/Table.js
index a99038151..aadc261cc 100644
--- a/lib/table/Table.js
+++ b/lib/table/Table.js
@@ -46,7 +46,7 @@ var factory = function factory(TableHead, TableRow) {
     _inherits(Table, _Component);
 
     function Table() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -56,7 +56,7 @@ var factory = function factory(TableHead, TableRow) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Table)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleFullSelect = function () {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Table.__proto__ || Object.getPrototypeOf(Table)).call.apply(_ref, [this].concat(args))), _this), _this.handleFullSelect = function () {
         if (_this.props.onSelect) {
           var _this$props = _this.props;
           var source = _this$props.source;
diff --git a/lib/table/TableRow.js b/lib/table/TableRow.js
index c2cbe306f..c7140602d 100644
--- a/lib/table/TableRow.js
+++ b/lib/table/TableRow.js
@@ -33,7 +33,7 @@ var factory = function factory(Checkbox) {
     _inherits(TableRow, _Component);
 
     function TableRow() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -43,7 +43,7 @@ var factory = function factory(Checkbox) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TableRow)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleInputChange = function (index, key, type, event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TableRow.__proto__ || Object.getPrototypeOf(TableRow)).call.apply(_ref, [this].concat(args))), _this), _this.handleInputChange = function (index, key, type, event) {
         var value = void 0;
         switch (type) {
           case 'checkbox':
diff --git a/lib/tabs/Tab.js b/lib/tabs/Tab.js
index f1c272a0d..901468ffa 100644
--- a/lib/tabs/Tab.js
+++ b/lib/tabs/Tab.js
@@ -39,7 +39,7 @@ var Tab = function (_Component) {
   _inherits(Tab, _Component);
 
   function Tab() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -49,7 +49,7 @@ var Tab = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Tab)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function (event) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Tab.__proto__ || Object.getPrototypeOf(Tab)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
       if (!_this.props.disabled && _this.props.onClick) {
         _this.props.onClick(event);
       }
diff --git a/lib/tabs/TabContent.js b/lib/tabs/TabContent.js
index 96f3538be..65bd7a6a6 100644
--- a/lib/tabs/TabContent.js
+++ b/lib/tabs/TabContent.js
@@ -35,7 +35,7 @@ var TabContent = function (_Component) {
   function TabContent() {
     _classCallCheck(this, TabContent);
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(TabContent).apply(this, arguments));
+    return _possibleConstructorReturn(this, (TabContent.__proto__ || Object.getPrototypeOf(TabContent)).apply(this, arguments));
   }
 
   _createClass(TabContent, [{
diff --git a/lib/tabs/Tabs.js b/lib/tabs/Tabs.js
index 016646856..2e0d4de09 100644
--- a/lib/tabs/Tabs.js
+++ b/lib/tabs/Tabs.js
@@ -42,7 +42,7 @@ var factory = function factory(Tab, TabContent) {
     _inherits(Tabs, _Component);
 
     function Tabs() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -52,7 +52,7 @@ var factory = function factory(Tab, TabContent) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Tabs)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Tabs.__proto__ || Object.getPrototypeOf(Tabs)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         pointer: {}
       }, _this.handleHeaderClick = function (event) {
         var idx = parseInt(event.currentTarget.id);
diff --git a/lib/tabs/__tests__/index.spec.js b/lib/tabs/__tests__/index.spec.js
index de59ddee1..32bca1a3b 100644
--- a/lib/tabs/__tests__/index.spec.js
+++ b/lib/tabs/__tests__/index.spec.js
@@ -63,7 +63,7 @@ describe('Tabs', function () {
     function Composition() {
       _classCallCheck(this, Composition);
 
-      var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Composition).call(this));
+      var _this = _possibleConstructorReturn(this, (Composition.__proto__ || Object.getPrototypeOf(Composition)).call(this));
 
       _this.state = { index: 0 };
       return _this;
diff --git a/lib/time_picker/Clock.js b/lib/time_picker/Clock.js
index 2b74f0a1c..aaa55accb 100644
--- a/lib/time_picker/Clock.js
+++ b/lib/time_picker/Clock.js
@@ -40,7 +40,7 @@ var Clock = function (_Component) {
   _inherits(Clock, _Component);
 
   function Clock() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -50,7 +50,7 @@ var Clock = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Clock)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Clock.__proto__ || Object.getPrototypeOf(Clock)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
       center: { x: null, y: null },
       radius: 0
     }, _this.handleHourChange = function (hours) {
diff --git a/lib/time_picker/ClockFace.js b/lib/time_picker/ClockFace.js
index 54ca26407..b2604a0c2 100644
--- a/lib/time_picker/ClockFace.js
+++ b/lib/time_picker/ClockFace.js
@@ -28,7 +28,7 @@ var Face = function (_Component) {
   _inherits(Face, _Component);
 
   function Face() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -38,7 +38,7 @@ var Face = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Face)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.renderNumber = function (number, idx) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Face.__proto__ || Object.getPrototypeOf(Face)).call.apply(_ref, [this].concat(args))), _this), _this.renderNumber = function (number, idx) {
       var _this$props = _this.props;
       var active = _this$props.active;
       var radius = _this$props.radius;
diff --git a/lib/time_picker/ClockHand.js b/lib/time_picker/ClockHand.js
index 053b19e07..d16bdaeab 100644
--- a/lib/time_picker/ClockHand.js
+++ b/lib/time_picker/ClockHand.js
@@ -34,7 +34,7 @@ var Hand = function (_Component) {
   _inherits(Hand, _Component);
 
   function Hand() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -44,7 +44,7 @@ var Hand = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Hand)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Hand.__proto__ || Object.getPrototypeOf(Hand)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
       knobWidth: 0
     }, _this.handleMouseMove = function (event) {
       _this.move(_events2.default.getMousePosition(event));
diff --git a/lib/time_picker/ClockHours.js b/lib/time_picker/ClockHours.js
index 85a711ab1..3b4ee10fd 100644
--- a/lib/time_picker/ClockHours.js
+++ b/lib/time_picker/ClockHours.js
@@ -41,7 +41,7 @@ var Hours = function (_Component) {
   _inherits(Hours, _Component);
 
   function Hours() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -51,7 +51,7 @@ var Hours = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Hours)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Hours.__proto__ || Object.getPrototypeOf(Hours)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
       inner: _this.props.format === '24hr' && _this.props.selected > 0 && _this.props.selected <= 12
     }, _this.handleHandMove = function (degrees, radius) {
       var currentInner = radius < _this.props.radius - _this.props.spacing * innerSpacing;
diff --git a/lib/time_picker/ClockMinutes.js b/lib/time_picker/ClockMinutes.js
index 780a90ba4..0b21e74a5 100644
--- a/lib/time_picker/ClockMinutes.js
+++ b/lib/time_picker/ClockMinutes.js
@@ -37,7 +37,7 @@ var Minutes = function (_Component) {
   _inherits(Minutes, _Component);
 
   function Minutes() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -47,7 +47,7 @@ var Minutes = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Minutes)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleHandMove = function (degrees) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Minutes.__proto__ || Object.getPrototypeOf(Minutes)).call.apply(_ref, [this].concat(args))), _this), _this.handleHandMove = function (degrees) {
       _this.props.onChange(degrees / step);
     }, _this.handleMouseDown = function (event) {
       _this.refs.hand.mouseStart(event);
diff --git a/lib/time_picker/TimePicker.js b/lib/time_picker/TimePicker.js
index 59c6e8b4d..530f5f779 100644
--- a/lib/time_picker/TimePicker.js
+++ b/lib/time_picker/TimePicker.js
@@ -58,7 +58,7 @@ var factory = function factory(TimePickerDialog, Input) {
     _inherits(TimePicker, _Component);
 
     function TimePicker() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -68,7 +68,7 @@ var factory = function factory(TimePickerDialog, Input) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TimePicker)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TimePicker.__proto__ || Object.getPrototypeOf(TimePicker)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         active: _this.props.active
       }, _this.handleDismiss = function () {
         _this.setState({ active: false });
diff --git a/lib/time_picker/TimePickerDialog.js b/lib/time_picker/TimePickerDialog.js
index 92e55b2db..9d4dcefb9 100644
--- a/lib/time_picker/TimePickerDialog.js
+++ b/lib/time_picker/TimePickerDialog.js
@@ -35,7 +35,7 @@ var factory = function factory(Dialog) {
     _inherits(TimePickerDialog, _Component);
 
     function TimePickerDialog() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -45,7 +45,7 @@ var factory = function factory(Dialog) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TimePickerDialog)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TimePickerDialog.__proto__ || Object.getPrototypeOf(TimePickerDialog)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         display: 'hours',
         displayTime: _this.props.value
       }, _this.handleClockChange = function (value) {
diff --git a/lib/tooltip/Tooltip.js b/lib/tooltip/Tooltip.js
index cf4b75bf9..6b3f80715 100644
--- a/lib/tooltip/Tooltip.js
+++ b/lib/tooltip/Tooltip.js
@@ -62,7 +62,7 @@ var defaults = {
 };
 
 var tooltipFactory = function tooltipFactory() {
-  var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
   var _defaults$options = _extends({}, defaults, options);
 
@@ -78,7 +78,7 @@ var tooltipFactory = function tooltipFactory() {
       _inherits(TooltippedComponent, _Component);
 
       function TooltippedComponent() {
-        var _Object$getPrototypeO;
+        var _ref;
 
         var _temp, _this, _ret;
 
@@ -88,7 +88,7 @@ var tooltipFactory = function tooltipFactory() {
           args[_key] = arguments[_key];
         }
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TooltippedComponent)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TooltippedComponent.__proto__ || Object.getPrototypeOf(TooltippedComponent)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
           active: false,
           position: _this.props.tooltipPosition,
           visible: false
@@ -118,12 +118,12 @@ var tooltipFactory = function tooltipFactory() {
         }
       }, {
         key: 'activate',
-        value: function activate(_ref) {
+        value: function activate(_ref2) {
           var _this2 = this;
 
-          var top = _ref.top;
-          var left = _ref.left;
-          var position = _ref.position;
+          var top = _ref2.top;
+          var left = _ref2.left;
+          var position = _ref2.position;
 
           if (this.timeout) clearTimeout(this.timeout);
           this.setState({ visible: true, position: position });
diff --git a/lib/utils/events.js b/lib/utils/events.js
index 6e5978dec..eb283acee 100644
--- a/lib/utils/events.js
+++ b/lib/utils/events.js
@@ -62,7 +62,7 @@ var TRANSITIONS = {
 
 function transitionEventNamesFor(element) {
   for (var transition in TRANSITIONS) {
-    if (element.style[transition] !== undefined) {
+    if (element && element.style[transition] !== undefined) {
       return TRANSITIONS[transition];
     }
   }
diff --git a/lib/utils/prefixer.js b/lib/utils/prefixer.js
index 895313f8f..34cb4aa22 100644
--- a/lib/utils/prefixer.js
+++ b/lib/utils/prefixer.js
@@ -31,7 +31,7 @@ function addPrefixesTo(style, property, value) {
 }
 
 function prefixer(style) {
-  var defaultValue = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
+  var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
   var _style = defaultValue;
   for (var property in style) {
diff --git a/lib/utils/testing.js b/lib/utils/testing.js
index d8f2a1dd7..e82f77931 100644
--- a/lib/utils/testing.js
+++ b/lib/utils/testing.js
@@ -16,8 +16,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 exports.default = {
   renderComponent: function renderComponent(Component) {
-    var props = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
-    var state = arguments.length <= 2 || arguments[2] === undefined ? {} : arguments[2];
+    var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var state = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
 
     var component = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(Component, props));
     if (state !== {}) {
diff --git a/lib/utils/time.js b/lib/utils/time.js
index f7229353f..c8addd502 100644
--- a/lib/utils/time.js
+++ b/lib/utils/time.js
@@ -141,33 +141,33 @@ var time = {
     return d.getHours() >= 12 ? 'pm' : 'am';
   },
   getFullMonth: function getFullMonth(d) {
-    var locale = arguments.length <= 1 || arguments[1] === undefined ? 'en' : arguments[1];
+    var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
 
     var month = d.getMonth();
     var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en;
     return l.hasOwnProperty('months') ? l.months[month] || 'Unknown' : 'Unknown';
   },
   getShortMonth: function getShortMonth(d) {
-    var locale = arguments.length <= 1 || arguments[1] === undefined ? 'en' : arguments[1];
+    var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
 
     var month = d.getMonth();
     var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en;
     return l.hasOwnProperty('monthsShort') ? l.monthsShort[month] || 'Unknown' : 'Unknown';
   },
   getFullDayOfWeek: function getFullDayOfWeek(day) {
-    var locale = arguments.length <= 1 || arguments[1] === undefined ? 'en' : arguments[1];
+    var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
 
     var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en;
     return l.hasOwnProperty('weekdays') ? l.weekdays[day] || 'Unknown' : 'Unknown';
   },
   getShortDayOfWeek: function getShortDayOfWeek(day) {
-    var locale = arguments.length <= 1 || arguments[1] === undefined ? 'en' : arguments[1];
+    var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
 
     var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en;
     return l.hasOwnProperty('weekdaysShort') ? l.weekdaysShort[day] || 'Unknown' : 'Unknown';
   },
   getDayOfWeekLetter: function getDayOfWeekLetter(day) {
-    var locale = arguments.length <= 1 || arguments[1] === undefined ? 'en' : arguments[1];
+    var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
 
     var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en;
     return l.hasOwnProperty('weekdaysLetter') ? l.weekdaysLetter[day] || this.getFullDayOfWeek(day, locale).charAt(0) : 'Unknown';
@@ -262,7 +262,7 @@ var time = {
     return diff1 < diff2 ? date1 : date2;
   },
   formatDate: function formatDate(date) {
-    var locale = arguments.length <= 1 || arguments[1] === undefined ? 'en' : arguments[1];
+    var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
 
     if (locale === 'en') {
       return date.getDate() + ' ' + time.getFullMonth(date, locale) + ' ' + date.getFullYear();
diff --git a/lib/utils/utils.js b/lib/utils/utils.js
index e95ea63c1..80d7d5139 100644
--- a/lib/utils/utils.js
+++ b/lib/utils/utils.js
@@ -13,9 +13,9 @@ exports.default = {
     return angle < 0 ? 360 + angle : angle;
   },
   range: function range() {
-    var start = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];
-    var stop = arguments.length <= 1 || arguments[1] === undefined ? null : arguments[1];
-    var step = arguments.length <= 2 || arguments[2] === undefined ? 1 : arguments[2];
+    var start = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    var stop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    var step = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
     var _start = 0;
     var _stop = start;
 

From a1f10a85e699e4d4d23976069bca983aaa121753 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 8 Oct 2016 12:51:38 +0200
Subject: [PATCH 0853/1024] Fix #845

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index e7b8b4ef6..6d2207c0a 100644
--- a/package.json
+++ b/package.json
@@ -72,7 +72,7 @@
     "karma-webpack": "~1.7.0",
     "mocha": "~3.0.1",
     "node-sass": "~3.7.0",
-    "normalize.css": "~4.2.0",
+    "normalize.css": "~5.0.0",
     "phantomjs": "~2.1.7",
     "phantomjs-polyfill": "0.0.2",
     "phantomjs-prebuilt": "~2.1.7",
@@ -115,7 +115,7 @@
   "peerDependencies": {
     "classnames": "~2.2.0",
     "immutability-helper": "~2.0.0",
-    "normalize.css": "~4.2.0",
+    "normalize.css": "~5.0.0",
     "react": "~0.14 || ~15.3.0",
     "react-addons-css-transition-group": "~0.14.0 || ~15.3.0",
     "react-dom": "~0.14.0 || ~15.3.0"

From a93bcd712779367e43d4bb56157bb2c5c563155f Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 8 Oct 2016 13:01:06 +0200
Subject: [PATCH 0854/1024] Add normalize as a dependency

---
 package.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 6d2207c0a..39cd41b19 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
   "dependencies": {
     "classnames": "~2.2.5",
     "core-js": "~2.4.0",
+    "normalize.css": "~5.0.0",
     "react-css-themr": "~1.4.1"
   },
   "devDependencies": {
@@ -72,7 +73,6 @@
     "karma-webpack": "~1.7.0",
     "mocha": "~3.0.1",
     "node-sass": "~3.7.0",
-    "normalize.css": "~5.0.0",
     "phantomjs": "~2.1.7",
     "phantomjs-polyfill": "0.0.2",
     "phantomjs-prebuilt": "~2.1.7",
@@ -115,7 +115,6 @@
   "peerDependencies": {
     "classnames": "~2.2.0",
     "immutability-helper": "~2.0.0",
-    "normalize.css": "~5.0.0",
     "react": "~0.14 || ~15.3.0",
     "react-addons-css-transition-group": "~0.14.0 || ~15.3.0",
     "react-dom": "~0.14.0 || ~15.3.0"

From e90a188a37153f42320011f31cf82a9dc7c112e5 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 8 Oct 2016 13:01:42 +0200
Subject: [PATCH 0855/1024] Release 1.2.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 39cd41b19..32c258af1 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "react-toolbox",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "homepage": "http://www.react-toolbox.com/",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "main": "./lib",
   "author": {
     "name": "React Toolbox Team",

From 1fa9a0a58d77bfce097cca17f9bfb2fc1f9b9e5f Mon Sep 17 00:00:00 2001
From: Roman Rott <roman.rott@gmail.com>
Date: Sun, 9 Oct 2016 14:37:43 +0300
Subject: [PATCH 0856/1024] Updated to show hint on input if lable is empty

---
 components/input/Input.js                                   | 2 +-
 components/input/theme.scss                                 | 6 +++++-
 .../layout/main/modules/examples/input_example_1.txt        | 3 ++-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/components/input/Input.js b/components/input/Input.js
index 4038bef50..9b8dd9298 100644
--- a/components/input/Input.js
+++ b/components/input/Input.js
@@ -184,7 +184,7 @@ const factory = (FontIcon) => {
                 {required ? <span className={theme.required}> * </span> : null}
               </label>
             : null}
-          {hint ? <span className={theme.hint}>{hint}</span> : null}
+          {hint ? <span hidden={labelText} className={theme.hint}>{hint}</span> : null}
           {error ? <span className={theme.error}>{error}</span> : null}
           {maxLength ? <span className={theme.counter}>{length}/{maxLength}</span> : null}
           {children}
diff --git a/components/input/theme.scss b/components/input/theme.scss
index b6b6c8130..9e29b9b4a 100644
--- a/components/input/theme.scss
+++ b/components/input/theme.scss
@@ -46,6 +46,7 @@
       color: $input-text-required-color;
     }
     ~ .hint {
+      display: block;
       opacity: $input-hint-opacity;
     }
     ~ .icon {
@@ -57,6 +58,9 @@
       top: $input-focus-label-top;
       font-size: $input-label-font-size;
     }
+    &.filled ~ .hint {
+      opacity: 0;
+    }
   }
   &.filled ~ .label.fixed, &.filled ~ .hint {
     display: none;
@@ -87,7 +91,7 @@
   line-height: $input-field-font-size;
   color: $input-text-label-color;
   pointer-events: none;
-  opacity: 0;
+  opacity: $input-hint-opacity;
   transition-timing-function: $animation-curve-default;
   transition-duration: $animation-duration;
   transition-property: opacity;
diff --git a/docs/app/components/layout/main/modules/examples/input_example_1.txt b/docs/app/components/layout/main/modules/examples/input_example_1.txt
index d4a89a62c..70327ee94 100644
--- a/docs/app/components/layout/main/modules/examples/input_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/input_example_1.txt
@@ -1,5 +1,5 @@
 class InputTest extends React.Component {
-  state = { name: '', phone: '', multiline: '', email: '', hint: '' };
+  state = { name: '', phone: '', multiline: '', email: '', hint: '', label: '' };
 
   handleChange = (name, value) => {
     this.setState({...this.state, [name]: value});
@@ -9,6 +9,7 @@ class InputTest extends React.Component {
     return (
       <section>
         <Input type='text' label='Name' name='name' value={this.state.name} onChange={this.handleChange.bind(this, 'name')} maxLength={16} />
+        <Input type='text' hint='With Hint, no label' name='name' value={this.state.label} onChange={this.handleChange.bind(this, 'label')} maxLength={16} />
         <Input type='text' label='Disabled field' disabled />
         <Input type='text' multiline label='Multiline' maxLength={20} value={this.state.multiline} onChange={this.handleChange.bind(this, 'multiline')} />
         <Input type='email' label='Email address' icon='email' value={this.state.email} onChange={this.handleChange.bind(this, 'email')} />

From 42543f4f8500c18e9b1c69eae43a3dd3f90d55d0 Mon Sep 17 00:00:00 2001
From: Roman Rott <roman.rott@gmail.com>
Date: Sun, 9 Oct 2016 21:18:16 +0300
Subject: [PATCH 0857/1024] Added ::after pseudo to CardMedia to fix issue in
 FF

---
 components/card/theme.scss | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/components/card/theme.scss b/components/card/theme.scss
index 1fbdef151..c49ea5cf6 100644
--- a/components/card/theme.scss
+++ b/components/card/theme.scss
@@ -27,7 +27,6 @@
   background-size: cover;
   &.wide, &.square {
     width: 100%;
-    height: 0;
     .content {
       position: absolute;
       height: 100%;
@@ -36,10 +35,15 @@
       max-width: 100%;
     }
   }
-  &.wide {
+  &::after {
+    display: block;
+    height: 0;
+    content: "";
+  }
+  &.wide::after {
     padding-top: 56.25%;
   }
-  &.square {
+  &.square::after {
     padding-top: 100%;
   }
   .content {

From c768a72622a7c08186f8d7a3af82508c5fca5174 Mon Sep 17 00:00:00 2001
From: Roman Rott <roman.rott@gmail.com>
Date: Mon, 10 Oct 2016 10:46:01 +0300
Subject: [PATCH 0858/1024] Fixed typo in dateLocales for russian locale

---
 components/utils/time.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/utils/time.js b/components/utils/time.js
index 3373e7d34..dbf80aec5 100644
--- a/components/utils/time.js
+++ b/components/utils/time.js
@@ -112,7 +112,7 @@ const dateLocales = {
     weekdaysLetter: []
   },
   ru: {
-    months: 'Январь_Февраль_Март_Апрель_Май_Июнь_Июльy_Август_Сентябрь_Октябрь_Ноябрь_Декабрь'.split('_'),
+    months: 'Январь_Февраль_Март_Апрель_Май_Июнь_Июль_Август_Сентябрь_Октябрь_Ноябрь_Декабрь'.split('_'),
     monthsShort: 'Янв_Фев_Мар_Апр_Май_Июн_Июл_Авг_Сен_Окт_Ноя_Дек'.split('_'),
     weekdays: 'Воскресенье_Понедельник_Вторник_Среда_Четверг_Пятница_Суббота'.split('_'),
     weekdaysShort: 'Вс_Пн_Вт_Ср_Чт_Пт_Сб'.split('_'),

From c9dc84840497e1ea181680c5ac8fba6cefd24d01 Mon Sep 17 00:00:00 2001
From: Roman Rott <roman.rott@gmail.com>
Date: Mon, 10 Oct 2016 11:08:30 +0300
Subject: [PATCH 0859/1024] Added Ukrainian locale

---
 components/utils/time.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/components/utils/time.js b/components/utils/time.js
index 3373e7d34..753b02262 100644
--- a/components/utils/time.js
+++ b/components/utils/time.js
@@ -117,6 +117,13 @@ const dateLocales = {
     weekdays: 'Воскресенье_Понедельник_Вторник_Среда_Четверг_Пятница_Суббота'.split('_'),
     weekdaysShort: 'Вс_Пн_Вт_Ср_Чт_Пт_Сб'.split('_'),
     weekdaysLetter: []
+  },
+  ua: {
+    months: 'Січень_Лютий_Березень_Квітень_Травень_Червень_Липень_Серпень_Вересень_Жовтень_Листопад_Грудень'.split('_'),
+    monthsShort: 'Січ_Лют_Берез_Квіт_Трав_Черв_Лип_Серп_Верес_Жовт_Листоп_Груд'.split('_'),
+    weekdays: 'Неділя_Понеділок_Вівторок_Середа_Четвер_П’ятниця_Субота'.split('_'),
+    weekdaysShort: 'Нд_Пн_Вт_Ср_Чт_Пт_Сб'.split('_'),
+    weekdaysLetter: []
   }
 };
 const time = {

From e99a396a632c84f5a8cacc4c06fbe47b9f02f53a Mon Sep 17 00:00:00 2001
From: Stian Jensen <me@stianj.com>
Date: Mon, 3 Oct 2016 22:49:40 +0200
Subject: [PATCH 0860/1024] Add attributes for ok & cancel labels

In DatePicker and TimePicker.

The attribute names are chosen to be the same as in material-ui

This fixes #805.
---
 components/date_picker/DatePicker.js       | 8 ++++++--
 components/date_picker/DatePickerDialog.js | 8 ++++++--
 components/time_picker/TimePicker.js       | 7 ++++++-
 components/time_picker/TimePickerDialog.js | 8 ++++++--
 4 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/components/date_picker/DatePicker.js b/components/date_picker/DatePicker.js
index b692a58cf..68715c87b 100644
--- a/components/date_picker/DatePicker.js
+++ b/components/date_picker/DatePicker.js
@@ -16,6 +16,7 @@ const factory = (Input, DatePickerDialog) => {
     static propTypes = {
       active: PropTypes.bool,
       autoOk: PropTypes.bool,
+      cancelLabel: PropTypes.string,
       className: PropTypes.string,
       error: PropTypes.string,
       icon: PropTypes.oneOfType([
@@ -32,6 +33,7 @@ const factory = (Input, DatePickerDialog) => {
       maxDate: PropTypes.object,
       minDate: PropTypes.object,
       name: PropTypes.string,
+      okLabel: PropTypes.string,
       onChange: PropTypes.func,
       onEscKeyDown: PropTypes.func,
       onKeyPress: PropTypes.func,
@@ -99,8 +101,8 @@ const factory = (Input, DatePickerDialog) => {
 
     render () {
       const { active, // eslint-disable-line
-        autoOk, inputClassName, inputFormat, locale, maxDate, minDate,
-        onEscKeyDown, onOverlayClick, readonly, sundayFirstDayOfWeek, value,
+        autoOk, cancelLabel, inputClassName, inputFormat, locale, maxDate, minDate,
+        okLabel, onEscKeyDown, onOverlayClick, readonly, sundayFirstDayOfWeek, value,
         ...others } = this.props;
       const finalInputFormat = inputFormat || time.formatDate;
       const date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined;
@@ -126,11 +128,13 @@ const factory = (Input, DatePickerDialog) => {
           <DatePickerDialog
             active={this.state.active}
             autoOk={autoOk}
+            cancelLabel={cancelLabel}
             className={this.props.className}
             locale={locale}
             maxDate={maxDate}
             minDate={minDate}
             name={this.props.name}
+            okLabel={okLabel}
             onDismiss={this.handleDismiss}
             onEscKeyDown={onEscKeyDown || this.handleDismiss}
             onOverlayClick={onOverlayClick || this.handleDismiss}
diff --git a/components/date_picker/DatePickerDialog.js b/components/date_picker/DatePickerDialog.js
index af54440aa..d626fb0e8 100644
--- a/components/date_picker/DatePickerDialog.js
+++ b/components/date_picker/DatePickerDialog.js
@@ -7,6 +7,7 @@ const factory = (Dialog, Calendar) => {
     static propTypes = {
       active: PropTypes.bool,
       autoOk: PropTypes.bool,
+      cancelLabel: PropTypes.string,
       className: PropTypes.string,
       locale: React.PropTypes.oneOfType([
         React.PropTypes.string,
@@ -15,6 +16,7 @@ const factory = (Dialog, Calendar) => {
       maxDate: PropTypes.object,
       minDate: PropTypes.object,
       name: PropTypes.string,
+      okLabel: PropTypes.string,
       onDismiss: PropTypes.func,
       onEscKeyDown: PropTypes.func,
       onOverlayClick: PropTypes.func,
@@ -35,7 +37,9 @@ const factory = (Dialog, Calendar) => {
 
     static defaultProps = {
       active: false,
+      cancelLabel: 'Cancel',
       className: '',
+      okLabel: 'Ok',
       value: new Date()
     };
 
@@ -82,8 +86,8 @@ const factory = (Dialog, Calendar) => {
     };
 
     actions = [
-      { label: 'Cancel', className: this.props.theme.button, onClick: this.props.onDismiss },
-      { label: 'Ok', className: this.props.theme.button, name: this.props.name, onClick: this.handleSelect }
+      { label: this.props.cancelLabel, className: this.props.theme.button, onClick: this.props.onDismiss },
+      { label: this.props.okLabel, className: this.props.theme.button, name: this.props.name, onClick: this.handleSelect }
     ];
 
     render () {
diff --git a/components/time_picker/TimePicker.js b/components/time_picker/TimePicker.js
index c651377d5..6d56cec1c 100644
--- a/components/time_picker/TimePicker.js
+++ b/components/time_picker/TimePicker.js
@@ -12,12 +12,14 @@ const factory = (TimePickerDialog, Input) => {
   class TimePicker extends Component {
     static propTypes = {
       active: PropTypes.bool,
+      cancelLabel: PropTypes.string,
       className: PropTypes.string,
       error: PropTypes.string,
       format: PropTypes.oneOf(['24hr', 'ampm']),
       inputClassName: PropTypes.string,
       label: PropTypes.string,
       name: PropTypes.string,
+      okLabel: PropTypes.string,
       onChange: PropTypes.func,
       onEscKeyDown: PropTypes.func,
       onKeyPress: PropTypes.func,
@@ -82,7 +84,8 @@ const factory = (TimePickerDialog, Input) => {
     render () {
       const {
         active, // eslint-disable-line
-        format, inputClassName, onEscKeyDown, onOverlayClick, readonly, value, ...others
+        cancelLabel, format, inputClassName, okLabel, onEscKeyDown, onOverlayClick,
+        readonly, value, ...others
       } = this.props;
       const formattedTime = value ? time.formatTime(value, format) : '';
       return (
@@ -102,9 +105,11 @@ const factory = (TimePickerDialog, Input) => {
           />
           <TimePickerDialog
             active={this.state.active}
+            cancelLabel={cancelLabel}
             className={this.props.className}
             format={format}
             name={this.props.name}
+            okLabel={okLabel}
             onDismiss={this.handleDismiss}
             onEscKeyDown={onEscKeyDown}
             onOverlayClick={onOverlayClick}
diff --git a/components/time_picker/TimePickerDialog.js b/components/time_picker/TimePickerDialog.js
index 3e962960f..c38d19869 100644
--- a/components/time_picker/TimePickerDialog.js
+++ b/components/time_picker/TimePickerDialog.js
@@ -7,9 +7,11 @@ const factory = (Dialog) => {
   class TimePickerDialog extends Component {
     static propTypes = {
       active: PropTypes.bool,
+      cancelLabel: PropTypes.string,
       className: PropTypes.string,
       format: PropTypes.oneOf(['24hr', 'ampm']),
       name: PropTypes.string,
+      okLabel: PropTypes.string,
       onDismiss: PropTypes.func,
       onEscKeyDown: PropTypes.func,
       onOverlayClick: PropTypes.func,
@@ -34,7 +36,9 @@ const factory = (Dialog) => {
 
     static defaultProps = {
       active: false,
+      cancelLabel: 'Cancel',
       format: '24hr',
+      okLabel: 'Ok',
       value: new Date()
     };
 
@@ -70,8 +74,8 @@ const factory = (Dialog) => {
     };
 
     actions = [
-      { label: 'Cancel', className: this.props.theme.button, onClick: this.props.onDismiss },
-      { label: 'Ok', className: this.props.theme.button, name: this.props.name, onClick: this.handleSelect }
+      { label: this.props.cancelLabel, className: this.props.theme.button, onClick: this.props.onDismiss },
+      { label: this.props.okLabel, className: this.props.theme.button, name: this.props.name, onClick: this.handleSelect }
     ];
 
     formatHours () {

From 0df0854487b29fb0fa610d938321b937d01b5841 Mon Sep 17 00:00:00 2001
From: HaNdTriX <handtrix@gmail.com>
Date: Tue, 11 Oct 2016 14:23:36 +0200
Subject: [PATCH 0861/1024] Add onScroll prop to Panel

---
 components/layout/Panel.js  | 5 +++--
 components/layout/readme.md | 1 +
 lib/layout/Panel.js         | 4 +++-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/components/layout/Panel.js b/components/layout/Panel.js
index ffc1e6191..658b2ae48 100644
--- a/components/layout/Panel.js
+++ b/components/layout/Panel.js
@@ -3,13 +3,13 @@ import classnames from 'classnames';
 import { themr } from 'react-css-themr';
 import { LAYOUT } from '../identifiers.js';
 
-const Panel = ({ children, className, scrollY, theme }) => {
+const Panel = ({ children, className, onScroll, scrollY, theme }) => {
   const _className = classnames(theme.panel, {
     [theme.scrollY]: scrollY
   }, className);
 
   return (
-    <div data-react-toolbox='panel' className={_className}>
+    <div data-react-toolbox='panel' onScroll={onScroll} className={_className}>
       {children}
     </div>
   );
@@ -18,6 +18,7 @@ const Panel = ({ children, className, scrollY, theme }) => {
 Panel.propTypes = {
   children: PropTypes.any,
   className: PropTypes.string,
+  onScroll: PropTypes.func,
   scrollY: PropTypes.bool,
   theme: PropTypes.shape({
     panel: PropTypes.string,
diff --git a/components/layout/readme.md b/components/layout/readme.md
index 7ee9197f9..74a563249 100644
--- a/components/layout/readme.md
+++ b/components/layout/readme.md
@@ -148,6 +148,7 @@ The `Panel` is the main content area within a `Layout`.  It is a full-height fle
 ### Properties
 | Name | Type | Default | Description |
 |:-----|:-----|:-----|:-----|
+| `onScroll` | `Function` | | Callback function to be invoked when the component scrolls. |
 | `scrollY` | `bool` | `false` | If true, the panel will vertically scroll all content. |
 | `className` | `string` |  | Additional class(es) for custom styling. |
 
diff --git a/lib/layout/Panel.js b/lib/layout/Panel.js
index bbdb2dfe3..e684b1d11 100644
--- a/lib/layout/Panel.js
+++ b/lib/layout/Panel.js
@@ -24,6 +24,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var Panel = function Panel(_ref) {
   var children = _ref.children;
   var className = _ref.className;
+  var onScroll = _ref.onScroll;
   var scrollY = _ref.scrollY;
   var theme = _ref.theme;
 
@@ -31,7 +32,7 @@ var Panel = function Panel(_ref) {
 
   return _react2.default.createElement(
     'div',
-    { 'data-react-toolbox': 'panel', className: _className },
+    { 'data-react-toolbox': 'panel', onScroll: onScroll, className: _className },
     children
   );
 };
@@ -39,6 +40,7 @@ var Panel = function Panel(_ref) {
 Panel.propTypes = {
   children: _react.PropTypes.any,
   className: _react.PropTypes.string,
+  onScroll: _react.PropTypes.func,
   scrollY: _react.PropTypes.bool,
   theme: _react.PropTypes.shape({
     panel: _react.PropTypes.string,

From f912729ef7afd7a7dbd8aa74cc239b13d3b8b1e9 Mon Sep 17 00:00:00 2001
From: Roman Rott <roman.rott@gmail.com>
Date: Tue, 11 Oct 2016 23:12:12 +0300
Subject: [PATCH 0862/1024] Added required to Dropdown

---
 components/dropdown/Dropdown.js | 21 ++++++++++++++++-----
 components/dropdown/readme.md   |  1 +
 components/dropdown/theme.scss  |  6 ++++++
 spec/components/dropdown.js     |  8 ++++++++
 4 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/components/dropdown/Dropdown.js b/components/dropdown/Dropdown.js
index 9bbfcb465..4f4c70481 100644
--- a/components/dropdown/Dropdown.js
+++ b/components/dropdown/Dropdown.js
@@ -20,6 +20,7 @@ const factory = (Input) => {
       onChange: PropTypes.func,
       onClick: PropTypes.func,
       onFocus: PropTypes.func,
+      required: PropTypes.bool,
       source: PropTypes.array.isRequired,
       template: PropTypes.func,
       theme: PropTypes.shape({
@@ -30,6 +31,7 @@ const factory = (Input) => {
         errored: PropTypes.string,
         field: PropTypes.string,
         label: PropTypes.string,
+        required: PropTypes.bool,
         selected: PropTypes.string,
         templateValue: PropTypes.string,
         up: PropTypes.string,
@@ -46,7 +48,8 @@ const factory = (Input) => {
       auto: true,
       className: '',
       allowBlank: true,
-      disabled: false
+      disabled: false,
+      required: false
     };
 
     state = {
@@ -118,7 +121,8 @@ const factory = (Input) => {
       const { theme } = this.props;
       const className = classnames(theme.field, {
         [theme.errored]: this.props.error,
-        [theme.disabled]: this.props.disabled
+        [theme.disabled]: this.props.disabled,
+        [theme.required]: this.props.required
       });
 
       return (
@@ -126,7 +130,12 @@ const factory = (Input) => {
           <div className={`${theme.templateValue} ${theme.value}`}>
             {this.props.template(selected)}
           </div>
-          {this.props.label ? <label className={theme.label}>{this.props.label}</label> : null}
+          {this.props.label
+            ? <label className={theme.label}>
+                {this.props.label}
+                {this.props.required ? <span className={theme.required}> * </span> : null}
+              </label>
+            : null}
           {this.props.error ? <span className={theme.error}>{this.props.error}</span> : null}
         </div>
       );
@@ -143,12 +152,13 @@ const factory = (Input) => {
     };
 
     render () {
-      const {template, theme, source, allowBlank, auto, ...others} = this.props; //eslint-disable-line no-unused-vars
+      const {template, theme, source, allowBlank, auto, required, ...others} = this.props; //eslint-disable-line no-unused-vars
       const selected = this.getSelectedItem();
       const className = classnames(theme.dropdown, {
         [theme.up]: this.state.up,
         [theme.active]: this.state.active,
-        [theme.disabled]: this.props.disabled
+        [theme.disabled]: this.props.disabled,
+        [theme.required]: this.props.required
       }, this.props.className);
 
       return (
@@ -157,6 +167,7 @@ const factory = (Input) => {
             {...others}
             className={theme.value}
             onClick={this.handleClick}
+            required={this.props.required}
             readOnly
             type={template && selected ? 'hidden' : null}
             value={selected && selected.label ? selected.label : ''}
diff --git a/components/dropdown/readme.md b/components/dropdown/readme.md
index cb177a40c..0b054f7da 100644
--- a/components/dropdown/readme.md
+++ b/components/dropdown/readme.md
@@ -51,6 +51,7 @@ If you want to provide a theme via context, the component key is `RTDropdown`.
 | `source`     | `Array`    |         | Array of data objects with the data to represent in the dropdown.|
 | `template`   | `Function` |         | Callback function that returns a JSX template to represent the element.|
 | `value`      | `String`   |         | Default value using JSON data.|
+| `required`   | `Boolean`  | `false` | If true, the dropdown has a required attribute.|
 
 ## Theming
 
diff --git a/components/dropdown/theme.scss b/components/dropdown/theme.scss
index 537bfc344..607afa2a6 100644
--- a/components/dropdown/theme.scss
+++ b/components/dropdown/theme.scss
@@ -69,6 +69,9 @@
     > .templateValue {
       border-bottom: 1px solid $input-text-error-color;
     }
+    > .label > .required {
+      color: $input-text-required-color;
+    }
   }
   &.disabled {
     pointer-events: none;
@@ -96,6 +99,9 @@
   font-size: $input-label-font-size;
   line-height: $input-field-font-size;
   color: $input-text-label-color;
+  .required {
+    color: $input-text-required-color;
+  }
 }
 
 .error {
diff --git a/spec/components/dropdown.js b/spec/components/dropdown.js
index e749c30fc..5688f4140 100644
--- a/spec/components/dropdown.js
+++ b/spec/components/dropdown.js
@@ -63,6 +63,14 @@ class DropdownTest extends React.Component {
           onChange={this.handleChange.bind(this, 'dropdown3')}
           source={countries}
         />
+
+        <Dropdown
+          label="Country"
+          ref="dropdown5"
+          onChange={this.handleChange.bind(this, 'dropdown5')}
+          source={countries}
+          required
+        />
       </section>
     );
   }

From a88174a54cfecf9ec373e64cbd6cfb47abe00353 Mon Sep 17 00:00:00 2001
From: HaNdTriX <handtrix@gmail.com>
Date: Wed, 12 Oct 2016 15:08:49 +0200
Subject: [PATCH 0863/1024] Fix Overlay event bug

---
 components/overlay/Overlay.js | 13 +++++--------
 lib/overlay/Overlay.js        | 32 +++++++++++++++++---------------
 2 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/components/overlay/Overlay.js b/components/overlay/Overlay.js
index 5c54e8aa3..ffce05dc2 100644
--- a/components/overlay/Overlay.js
+++ b/components/overlay/Overlay.js
@@ -26,7 +26,7 @@ class Overlay extends Component {
 
   componentDidMount () {
     if (this.props.active) {
-      this.escKeyListener = document.body.addEventListener('keydown', this.handleEscKey.bind(this));
+      document.body.addEventListener('keydown', this.handleEscKey);
       document.body.style.overflow = 'hidden';
     }
   }
@@ -37,20 +37,17 @@ class Overlay extends Component {
   }
 
   componentDidUpdate () {
-    if (this.props.active && !this.escKeyListener) {
-      this.escKeyListener = document.body.addEventListener('keydown', this.handleEscKey.bind(this));
+    if (this.props.active) {
+      document.body.addEventListener('keydown', this.handleEscKey);
     }
   }
 
   componentWillUnmount () {
     if (!document.querySelectorAll('[data-react-toolbox="overlay"]')[1]) document.body.style.overflow = '';
-    if (this.escKeyListener) {
-      document.body.removeEventListener('keydown', this.handleEscKey);
-      this.escKeyListener = null;
-    }
+    document.body.removeEventListener('keydown', this.handleEscKey);
   }
 
-  handleEscKey (e) {
+  handleEscKey = (e) => {
     if (this.props.active && this.props.onEscKeyDown && e.which === 27) {
       this.props.onEscKeyDown(e);
     }
diff --git a/lib/overlay/Overlay.js b/lib/overlay/Overlay.js
index f5662715b..536edce8b 100644
--- a/lib/overlay/Overlay.js
+++ b/lib/overlay/Overlay.js
@@ -37,16 +37,28 @@ var Overlay = function (_Component) {
   _inherits(Overlay, _Component);
 
   function Overlay() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
     _classCallCheck(this, Overlay);
 
-    return _possibleConstructorReturn(this, (Overlay.__proto__ || Object.getPrototypeOf(Overlay)).apply(this, arguments));
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Overlay.__proto__ || Object.getPrototypeOf(Overlay)).call.apply(_ref, [this].concat(args))), _this), _this.handleEscKey = function (e) {
+      if (_this.props.active && _this.props.onEscKeyDown && e.which === 27) {
+        _this.props.onEscKeyDown(e);
+      }
+    }, _temp), _possibleConstructorReturn(_this, _ret);
   }
 
   _createClass(Overlay, [{
     key: 'componentDidMount',
     value: function componentDidMount() {
       if (this.props.active) {
-        this.escKeyListener = document.body.addEventListener('keydown', this.handleEscKey.bind(this));
+        document.body.addEventListener('keydown', this.handleEscKey);
         document.body.style.overflow = 'hidden';
       }
     }
@@ -59,25 +71,15 @@ var Overlay = function (_Component) {
   }, {
     key: 'componentDidUpdate',
     value: function componentDidUpdate() {
-      if (this.props.active && !this.escKeyListener) {
-        this.escKeyListener = document.body.addEventListener('keydown', this.handleEscKey.bind(this));
+      if (this.props.active) {
+        document.body.addEventListener('keydown', this.handleEscKey);
       }
     }
   }, {
     key: 'componentWillUnmount',
     value: function componentWillUnmount() {
       if (!document.querySelectorAll('[data-react-toolbox="overlay"]')[1]) document.body.style.overflow = '';
-      if (this.escKeyListener) {
-        document.body.removeEventListener('keydown', this.handleEscKey);
-        this.escKeyListener = null;
-      }
-    }
-  }, {
-    key: 'handleEscKey',
-    value: function handleEscKey(e) {
-      if (this.props.active && this.props.onEscKeyDown && e.which === 27) {
-        this.props.onEscKeyDown(e);
-      }
+      document.body.removeEventListener('keydown', this.handleEscKey);
     }
   }, {
     key: 'render',

From f8c0c7fecef6d7b9a79ebdefeb0f2733a7f06b1d Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 12 Oct 2016 17:04:52 +0200
Subject: [PATCH 0864/1024] Remove importants

---
 components/button/theme.scss | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/button/theme.scss b/components/button/theme.scss
index b178189f1..4eb6f098e 100644
--- a/components/button/theme.scss
+++ b/components/button/theme.scss
@@ -8,14 +8,14 @@
   position: relative;
 
   > input {
-    width: 0.1px !important;
-    height: 0.1px !important;
-    opacity: 0;
-    overflow: hidden;
     position: absolute;
-    z-index: 0 !important;
-    padding: 0 !important;
-    margin: 0 !important;
+    z-index: 0;
+    width: 0.1px;
+    height: 0.1px;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    opacity: 0;
   }
 }
 

From 0641a0d51a56d5726638de2a1113401df3bffd8a Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 12 Oct 2016 17:09:19 +0200
Subject: [PATCH 0865/1024] Latest build

---
 lib/button/BrowseButton.js          | 169 ++++++++++++++++++++++++++++
 lib/button/index.d.ts               | 125 ++++++++++++++++++++
 lib/button/index.js                 |   9 +-
 lib/button/theme.scss               |  11 ++
 lib/card/theme.scss                 |  10 +-
 lib/date_picker/DatePicker.js       |   8 +-
 lib/date_picker/DatePickerDialog.js |   6 +-
 lib/dropdown/Dropdown.js            |  20 +++-
 lib/dropdown/theme.scss             |   6 +
 lib/time_picker/TimePicker.js       |   8 +-
 lib/time_picker/TimePickerDialog.js |   6 +-
 lib/utils/time.js                   |   9 +-
 12 files changed, 372 insertions(+), 15 deletions(-)
 create mode 100644 lib/button/BrowseButton.js

diff --git a/lib/button/BrowseButton.js b/lib/button/BrowseButton.js
new file mode 100644
index 000000000..732fefc72
--- /dev/null
+++ b/lib/button/BrowseButton.js
@@ -0,0 +1,169 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BrowseButton = exports.browseButtonFactory = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _FontIcon = require('../font_icon/FontIcon.js');
+
+var _FontIcon2 = _interopRequireDefault(_FontIcon);
+
+var _Ripple = require('../ripple/Ripple.js');
+
+var _Ripple2 = _interopRequireDefault(_Ripple);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(ripple, FontIcon) {
+  var SimpleBrowseButton = function (_Component) {
+    _inherits(SimpleBrowseButton, _Component);
+
+    function SimpleBrowseButton() {
+      var _ref;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, SimpleBrowseButton);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = SimpleBrowseButton.__proto__ || Object.getPrototypeOf(SimpleBrowseButton)).call.apply(_ref, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
+        _this.refs.label.blur();
+        if (_this.props.onMouseUp) _this.props.onMouseUp(event);
+      }, _this.handleMouseLeave = function (event) {
+        _this.refs.label.blur();
+        if (_this.props.onMouseLeave) _this.props.onMouseLeave(event);
+      }, _this.handleFileChange = function (event) {
+        if (_this.props.onChange) _this.props.onChange(event);
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(SimpleBrowseButton, [{
+      key: 'render',
+      value: function render() {
+        var _classnames;
+
+        var _props = this.props;
+        var accent = _props.accent;
+        var children = _props.children;
+        var className = _props.className;
+        var flat = _props.flat;
+        var floating = _props.floating;
+        var icon = _props.icon;
+        var inverse = _props.inverse;
+        var label = _props.label;
+        var mini = _props.mini;
+        var neutral = _props.neutral;
+        var primary = _props.primary;
+        var theme = _props.theme;
+        var raised = _props.raised;
+
+        var others = _objectWithoutProperties(_props, ['accent', 'children', 'className', 'flat', 'floating', 'icon', 'inverse', 'label', 'mini', 'neutral', 'primary', 'theme', 'raised']);
+
+        var element = 'label';
+        var level = primary ? 'primary' : accent ? 'accent' : 'neutral';
+        var shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : 'flat';
+
+        var classes = (0, _classnames3.default)(theme.button, [theme[shape]], (_classnames = {}, _defineProperty(_classnames, theme[level], neutral), _defineProperty(_classnames, theme.mini, mini), _defineProperty(_classnames, theme.inverse, inverse), _classnames), className);
+
+        var props = _extends({}, others, {
+          ref: 'label',
+          className: classes,
+          disabled: this.props.disabled,
+          onMouseUp: this.handleMouseUp,
+          onMouseLeave: this.handleMouseLeave,
+          'data-react-toolbox': 'label'
+        });
+
+        return _react2.default.createElement(element, props, icon ? _react2.default.createElement(FontIcon, { className: theme.icon, value: icon }) : null, _react2.default.createElement(
+          'span',
+          null,
+          label
+        ), _react2.default.createElement('input', { className: classes, type: 'file', onChange: this.handleFileChange }), children);
+      }
+    }]);
+
+    return SimpleBrowseButton;
+  }(_react.Component);
+
+  SimpleBrowseButton.propTypes = {
+    accent: _react.PropTypes.bool,
+    children: _react.PropTypes.node,
+    className: _react.PropTypes.string,
+    disabled: _react.PropTypes.bool,
+    flat: _react.PropTypes.bool,
+    floating: _react.PropTypes.bool,
+    icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    inverse: _react.PropTypes.bool,
+    label: _react.PropTypes.string,
+    mini: _react.PropTypes.bool,
+    neutral: _react.PropTypes.bool,
+    onChange: _react.PropTypes.func,
+    onMouseLeave: _react.PropTypes.func,
+    onMouseUp: _react.PropTypes.func,
+    primary: _react.PropTypes.bool,
+    raised: _react.PropTypes.bool,
+    theme: _react.PropTypes.shape({
+      accent: _react.PropTypes.string,
+      button: _react.PropTypes.string,
+      flat: _react.PropTypes.string,
+      floating: _react.PropTypes.string,
+      icon: _react.PropTypes.string,
+      inverse: _react.PropTypes.string,
+      mini: _react.PropTypes.string,
+      neutral: _react.PropTypes.string,
+      primary: _react.PropTypes.string,
+      raised: _react.PropTypes.string,
+      rippleWrapper: _react.PropTypes.string,
+      toggle: _react.PropTypes.string
+    }),
+    type: _react.PropTypes.string
+  };
+  SimpleBrowseButton.defaultProps = {
+    accent: false,
+    className: '',
+    flat: false,
+    floating: false,
+    mini: false,
+    neutral: true,
+    primary: false,
+    raised: false
+  };
+
+
+  return ripple(SimpleBrowseButton);
+};
+
+var BrowseButton = factory((0, _Ripple2.default)({ centered: false }), _FontIcon2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.BUTTON)(BrowseButton);
+exports.browseButtonFactory = factory;
+exports.BrowseButton = BrowseButton;
\ No newline at end of file
diff --git a/lib/button/index.d.ts b/lib/button/index.d.ts
index 7368a24f6..e713f70aa 100644
--- a/lib/button/index.d.ts
+++ b/lib/button/index.d.ts
@@ -210,3 +210,128 @@ interface IconButtonProps extends ReactToolbox.Props {
 }
 
 export class IconButton extends React.Component<IconButtonProps, {}> { }
+
+export interface BrowseButtonTheme {
+  /**
+   * Used for the root in case button is accent.
+   */
+  accent?: string;
+  /**
+   * Used for the root element in any button.
+   */
+  button?: string;
+  /**
+   * Used when the button is flat for the root element.
+   */
+  flat?: string;
+  /**
+   * Used when the button is floating for the root element.
+   */
+  floating?: string;
+  /**
+   * For the icon inside a button.
+   */
+  icon?: string;
+  /**
+   * Used when colors are inverted.
+   */
+  inverse?: string;
+  /**
+   * Used for mini floating buttons.
+   */
+  mini?: string;
+  /**
+   * Used for neutral colored buttons.
+   */
+  neutral?: string;
+  /**
+   * Used for primary buttons when button is primary.
+   */
+  primary?: string;
+  /**
+   * Used when the button is raised for root element.
+   */
+  raised?: string;
+  /**
+   * Used for the ripple element.
+   */
+  rippleWrapper?: string;
+  /**
+   * Used for toggle buttons in the root element.
+   */
+  toggle?: string;
+}
+
+interface BrowseButtonProps extends ReactToolbox.Props {
+  /**
+   * Indicates if the button should have accent color.
+   * @default false
+   */
+  accent?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If true, the button will have a flat look.
+   * @default false
+   */
+  flat?: boolean;
+  /**
+   * If true, the button will have a floating look.
+   * @default false
+   */
+  floating?: boolean;
+  /**
+   * Creates a link for the button.
+   */
+  href?: string;
+  /**
+   * Value of the icon (See Font Icon Component).
+   */
+  icon?: React.ReactNode | string;
+  /**
+   * If true, the neutral colors are inverted. Useful to put a button over a dark background.
+   */
+  inverse?: boolean;
+  /**
+   * The text string to use for the name of the button.
+   */
+  label?: string;
+  /**
+   * To be used with floating button. If true, the button will be smaller.
+   * @default false
+   */
+  mini?: boolean;
+  /**
+   * Set it to false if you don't want the neutral styles to be included.
+   * @default true
+   */
+  neutral?: boolean;
+  /**
+   * Indicates if the button should have primary color.
+   * @default false
+   */
+  primary?: boolean;
+  /**
+   * If true, the button will have a raised look.
+   * @default false
+   */
+  raised?: boolean;
+  /**
+   * If true, component will have a ripple effect on click.
+   * @default true
+   */
+  ripple?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: BrowseButtonTheme;
+}
+
+export class BrowseButton extends React.Component<BrowseButtonProps, {}> { }
diff --git a/lib/button/index.js b/lib/button/index.js
index 60623eae7..fe05c0beb 100644
--- a/lib/button/index.js
+++ b/lib/button/index.js
@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.IconButton = exports.Button = undefined;
+exports.BrowseButton = exports.IconButton = exports.Button = undefined;
 
 var _identifiers = require('../identifiers.js');
 
@@ -11,6 +11,8 @@ var _reactCssThemr = require('react-css-themr');
 
 var _Button = require('./Button.js');
 
+var _BrowseButton = require('./BrowseButton.js');
+
 var _IconButton = require('./IconButton.js');
 
 var _FontIcon = require('../font_icon/FontIcon.js');
@@ -29,9 +31,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var Button = (0, _Button.buttonFactory)((0, _ripple2.default)({ centered: false }), _FontIcon2.default);
 var IconButton = (0, _IconButton.iconButtonFactory)((0, _ripple2.default)({ centered: true }), _FontIcon2.default);
+var BrowseButton = (0, _BrowseButton.browseButtonFactory)((0, _ripple2.default)({ centered: false }), _FontIcon2.default);
 var ThemedButton = (0, _reactCssThemr.themr)(_identifiers.BUTTON, _theme2.default)(Button);
 var ThemedIconButton = (0, _reactCssThemr.themr)(_identifiers.BUTTON, _theme2.default)(IconButton);
+var ThemedBrowseButton = (0, _reactCssThemr.themr)(_identifiers.BUTTON, _theme2.default)(BrowseButton);
 
 exports.default = ThemedButton;
 exports.Button = ThemedButton;
-exports.IconButton = ThemedIconButton;
\ No newline at end of file
+exports.IconButton = ThemedIconButton;
+exports.BrowseButton = ThemedBrowseButton;
\ No newline at end of file
diff --git a/lib/button/theme.scss b/lib/button/theme.scss
index cff21b375..4eb6f098e 100644
--- a/lib/button/theme.scss
+++ b/lib/button/theme.scss
@@ -6,6 +6,17 @@
 
 .button {
   position: relative;
+
+  > input {
+    position: absolute;
+    z-index: 0;
+    width: 0.1px;
+    height: 0.1px;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    opacity: 0;
+  }
 }
 
 %button {
diff --git a/lib/card/theme.scss b/lib/card/theme.scss
index 1fbdef151..c49ea5cf6 100644
--- a/lib/card/theme.scss
+++ b/lib/card/theme.scss
@@ -27,7 +27,6 @@
   background-size: cover;
   &.wide, &.square {
     width: 100%;
-    height: 0;
     .content {
       position: absolute;
       height: 100%;
@@ -36,10 +35,15 @@
       max-width: 100%;
     }
   }
-  &.wide {
+  &::after {
+    display: block;
+    height: 0;
+    content: "";
+  }
+  &.wide::after {
     padding-top: 56.25%;
   }
-  &.square {
+  &.square::after {
     padding-top: 100%;
   }
   .content {
diff --git a/lib/date_picker/DatePicker.js b/lib/date_picker/DatePicker.js
index a07554039..a14df37aa 100644
--- a/lib/date_picker/DatePicker.js
+++ b/lib/date_picker/DatePicker.js
@@ -115,18 +115,20 @@ var factory = function factory(Input, DatePickerDialog) {
         var _props = this.props;
         var active = _props.active;
         var autoOk = _props.autoOk;
+        var cancelLabel = _props.cancelLabel;
         var inputClassName = _props.inputClassName;
         var inputFormat = _props.inputFormat;
         var locale = _props.locale;
         var maxDate = _props.maxDate;
         var minDate = _props.minDate;
+        var okLabel = _props.okLabel;
         var onEscKeyDown = _props.onEscKeyDown;
         var onOverlayClick = _props.onOverlayClick;
         var readonly = _props.readonly;
         var sundayFirstDayOfWeek = _props.sundayFirstDayOfWeek;
         var value = _props.value;
 
-        var others = _objectWithoutProperties(_props, ['active', 'autoOk', 'inputClassName', 'inputFormat', 'locale', 'maxDate', 'minDate', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'sundayFirstDayOfWeek', 'value']);
+        var others = _objectWithoutProperties(_props, ['active', 'autoOk', 'cancelLabel', 'inputClassName', 'inputFormat', 'locale', 'maxDate', 'minDate', 'okLabel', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'sundayFirstDayOfWeek', 'value']);
 
         var finalInputFormat = inputFormat || _time2.default.formatDate;
         var date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined;
@@ -152,11 +154,13 @@ var factory = function factory(Input, DatePickerDialog) {
           _react2.default.createElement(DatePickerDialog, {
             active: this.state.active,
             autoOk: autoOk,
+            cancelLabel: cancelLabel,
             className: this.props.className,
             locale: locale,
             maxDate: maxDate,
             minDate: minDate,
             name: this.props.name,
+            okLabel: okLabel,
             onDismiss: this.handleDismiss,
             onEscKeyDown: onEscKeyDown || this.handleDismiss,
             onOverlayClick: onOverlayClick || this.handleDismiss,
@@ -175,6 +179,7 @@ var factory = function factory(Input, DatePickerDialog) {
   DatePicker.propTypes = {
     active: _react.PropTypes.bool,
     autoOk: _react.PropTypes.bool,
+    cancelLabel: _react.PropTypes.string,
     className: _react.PropTypes.string,
     error: _react.PropTypes.string,
     icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
@@ -185,6 +190,7 @@ var factory = function factory(Input, DatePickerDialog) {
     maxDate: _react.PropTypes.object,
     minDate: _react.PropTypes.object,
     name: _react.PropTypes.string,
+    okLabel: _react.PropTypes.string,
     onChange: _react.PropTypes.func,
     onClick: _react.PropTypes.func,
     onEscKeyDown: _react.PropTypes.func,
diff --git a/lib/date_picker/DatePickerDialog.js b/lib/date_picker/DatePickerDialog.js
index c9f934b2e..14bc4c72a 100644
--- a/lib/date_picker/DatePickerDialog.js
+++ b/lib/date_picker/DatePickerDialog.js
@@ -65,7 +65,7 @@ var factory = function factory(Dialog, Calendar) {
         if (Object.prototype.toString.call(date) === '[object Date]') {
           _this.handleNewDate(date, false);
         }
-      }, _this.actions = [{ label: 'Cancel', className: _this.props.theme.button, onClick: _this.props.onDismiss }, { label: 'Ok', className: _this.props.theme.button, name: _this.props.name, onClick: _this.handleSelect }], _temp), _possibleConstructorReturn(_this, _ret);
+      }, _this.actions = [{ label: _this.props.cancelLabel, className: _this.props.theme.button, onClick: _this.props.onDismiss }, { label: _this.props.okLabel, className: _this.props.theme.button, name: _this.props.name, onClick: _this.handleSelect }], _temp), _possibleConstructorReturn(_this, _ret);
     }
 
     _createClass(CalendarDialog, [{
@@ -142,11 +142,13 @@ var factory = function factory(Dialog, Calendar) {
   CalendarDialog.propTypes = {
     active: _react.PropTypes.bool,
     autoOk: _react.PropTypes.bool,
+    cancelLabel: _react.PropTypes.string,
     className: _react.PropTypes.string,
     locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
     maxDate: _react.PropTypes.object,
     minDate: _react.PropTypes.object,
     name: _react.PropTypes.string,
+    okLabel: _react.PropTypes.string,
     onDismiss: _react.PropTypes.func,
     onEscKeyDown: _react.PropTypes.func,
     onOverlayClick: _react.PropTypes.func,
@@ -166,7 +168,9 @@ var factory = function factory(Dialog, Calendar) {
   };
   CalendarDialog.defaultProps = {
     active: false,
+    cancelLabel: 'Cancel',
     className: '',
+    okLabel: 'Ok',
     value: new Date()
   };
 
diff --git a/lib/dropdown/Dropdown.js b/lib/dropdown/Dropdown.js
index 66bafcab1..e4edc28b6 100644
--- a/lib/dropdown/Dropdown.js
+++ b/lib/dropdown/Dropdown.js
@@ -157,7 +157,7 @@ var factory = function factory(Input) {
 
         var theme = this.props.theme;
 
-        var className = (0, _classnames4.default)(theme.field, (_classnames = {}, _defineProperty(_classnames, theme.errored, this.props.error), _defineProperty(_classnames, theme.disabled, this.props.disabled), _classnames));
+        var className = (0, _classnames4.default)(theme.field, (_classnames = {}, _defineProperty(_classnames, theme.errored, this.props.error), _defineProperty(_classnames, theme.disabled, this.props.disabled), _defineProperty(_classnames, theme.required, this.props.required), _classnames));
 
         return _react2.default.createElement(
           'div',
@@ -170,7 +170,12 @@ var factory = function factory(Input) {
           this.props.label ? _react2.default.createElement(
             'label',
             { className: theme.label },
-            this.props.label
+            this.props.label,
+            this.props.required ? _react2.default.createElement(
+              'span',
+              { className: theme.required },
+              ' * '
+            ) : null
           ) : null,
           this.props.error ? _react2.default.createElement(
             'span',
@@ -190,12 +195,13 @@ var factory = function factory(Input) {
         var source = _props.source;
         var allowBlank = _props.allowBlank;
         var auto = _props.auto;
+        var required = _props.required;
 
-        var others = _objectWithoutProperties(_props, ['template', 'theme', 'source', 'allowBlank', 'auto']); //eslint-disable-line no-unused-vars
+        var others = _objectWithoutProperties(_props, ['template', 'theme', 'source', 'allowBlank', 'auto', 'required']); //eslint-disable-line no-unused-vars
 
 
         var selected = this.getSelectedItem();
-        var className = (0, _classnames4.default)(theme.dropdown, (_classnames2 = {}, _defineProperty(_classnames2, theme.up, this.state.up), _defineProperty(_classnames2, theme.active, this.state.active), _defineProperty(_classnames2, theme.disabled, this.props.disabled), _classnames2), this.props.className);
+        var className = (0, _classnames4.default)(theme.dropdown, (_classnames2 = {}, _defineProperty(_classnames2, theme.up, this.state.up), _defineProperty(_classnames2, theme.active, this.state.active), _defineProperty(_classnames2, theme.disabled, this.props.disabled), _defineProperty(_classnames2, theme.required, this.props.required), _classnames2), this.props.className);
 
         return _react2.default.createElement(
           'div',
@@ -203,6 +209,7 @@ var factory = function factory(Input) {
           _react2.default.createElement(Input, _extends({}, others, {
             className: theme.value,
             onClick: this.handleClick,
+            required: this.props.required,
             readOnly: true,
             type: template && selected ? 'hidden' : null,
             value: selected && selected.label ? selected.label : ''
@@ -232,6 +239,7 @@ var factory = function factory(Input) {
     onChange: _react.PropTypes.func,
     onClick: _react.PropTypes.func,
     onFocus: _react.PropTypes.func,
+    required: _react.PropTypes.bool,
     source: _react.PropTypes.array.isRequired,
     template: _react.PropTypes.func,
     theme: _react.PropTypes.shape({
@@ -242,6 +250,7 @@ var factory = function factory(Input) {
       errored: _react.PropTypes.string,
       field: _react.PropTypes.string,
       label: _react.PropTypes.string,
+      required: _react.PropTypes.bool,
       selected: _react.PropTypes.string,
       templateValue: _react.PropTypes.string,
       up: _react.PropTypes.string,
@@ -254,7 +263,8 @@ var factory = function factory(Input) {
     auto: true,
     className: '',
     allowBlank: true,
-    disabled: false
+    disabled: false,
+    required: false
   };
 
 
diff --git a/lib/dropdown/theme.scss b/lib/dropdown/theme.scss
index 537bfc344..607afa2a6 100644
--- a/lib/dropdown/theme.scss
+++ b/lib/dropdown/theme.scss
@@ -69,6 +69,9 @@
     > .templateValue {
       border-bottom: 1px solid $input-text-error-color;
     }
+    > .label > .required {
+      color: $input-text-required-color;
+    }
   }
   &.disabled {
     pointer-events: none;
@@ -96,6 +99,9 @@
   font-size: $input-label-font-size;
   line-height: $input-field-font-size;
   color: $input-text-label-color;
+  .required {
+    color: $input-text-required-color;
+  }
 }
 
 .error {
diff --git a/lib/time_picker/TimePicker.js b/lib/time_picker/TimePicker.js
index 530f5f779..20cab415c 100644
--- a/lib/time_picker/TimePicker.js
+++ b/lib/time_picker/TimePicker.js
@@ -106,14 +106,16 @@ var factory = function factory(TimePickerDialog, Input) {
       value: function render() {
         var _props = this.props;
         var active = _props.active;
+        var cancelLabel = _props.cancelLabel;
         var format = _props.format;
         var inputClassName = _props.inputClassName;
+        var okLabel = _props.okLabel;
         var onEscKeyDown = _props.onEscKeyDown;
         var onOverlayClick = _props.onOverlayClick;
         var readonly = _props.readonly;
         var value = _props.value;
 
-        var others = _objectWithoutProperties(_props, ['active', 'format', 'inputClassName', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'value']);
+        var others = _objectWithoutProperties(_props, ['active', 'cancelLabel', 'format', 'inputClassName', 'okLabel', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'value']);
 
         var formattedTime = value ? _time2.default.formatTime(value, format) : '';
         return _react2.default.createElement(
@@ -133,9 +135,11 @@ var factory = function factory(TimePickerDialog, Input) {
           })),
           _react2.default.createElement(TimePickerDialog, {
             active: this.state.active,
+            cancelLabel: cancelLabel,
             className: this.props.className,
             format: format,
             name: this.props.name,
+            okLabel: okLabel,
             onDismiss: this.handleDismiss,
             onEscKeyDown: onEscKeyDown,
             onOverlayClick: onOverlayClick,
@@ -152,12 +156,14 @@ var factory = function factory(TimePickerDialog, Input) {
 
   TimePicker.propTypes = {
     active: _react.PropTypes.bool,
+    cancelLabel: _react.PropTypes.string,
     className: _react.PropTypes.string,
     error: _react.PropTypes.string,
     format: _react.PropTypes.oneOf(['24hr', 'ampm']),
     inputClassName: _react.PropTypes.string,
     label: _react.PropTypes.string,
     name: _react.PropTypes.string,
+    okLabel: _react.PropTypes.string,
     onChange: _react.PropTypes.func,
     onClick: _react.PropTypes.func,
     onEscKeyDown: _react.PropTypes.func,
diff --git a/lib/time_picker/TimePickerDialog.js b/lib/time_picker/TimePickerDialog.js
index 9d4dcefb9..b5e7c48bd 100644
--- a/lib/time_picker/TimePickerDialog.js
+++ b/lib/time_picker/TimePickerDialog.js
@@ -58,7 +58,7 @@ var factory = function factory(Dialog) {
         if (_this.state.display === 'hours') _this.setState({ display: 'minutes' });
       }, _this.switchDisplay = function (event) {
         _this.setState({ display: event.target.id });
-      }, _this.actions = [{ label: 'Cancel', className: _this.props.theme.button, onClick: _this.props.onDismiss }, { label: 'Ok', className: _this.props.theme.button, name: _this.props.name, onClick: _this.handleSelect }], _temp), _possibleConstructorReturn(_this, _ret);
+      }, _this.actions = [{ label: _this.props.cancelLabel, className: _this.props.theme.button, onClick: _this.props.onDismiss }, { label: _this.props.okLabel, className: _this.props.theme.button, name: _this.props.name, onClick: _this.handleSelect }], _temp), _possibleConstructorReturn(_this, _ret);
     }
 
     _createClass(TimePickerDialog, [{
@@ -154,9 +154,11 @@ var factory = function factory(Dialog) {
 
   TimePickerDialog.propTypes = {
     active: _react.PropTypes.bool,
+    cancelLabel: _react.PropTypes.string,
     className: _react.PropTypes.string,
     format: _react.PropTypes.oneOf(['24hr', 'ampm']),
     name: _react.PropTypes.string,
+    okLabel: _react.PropTypes.string,
     onDismiss: _react.PropTypes.func,
     onEscKeyDown: _react.PropTypes.func,
     onOverlayClick: _react.PropTypes.func,
@@ -180,7 +182,9 @@ var factory = function factory(Dialog) {
   };
   TimePickerDialog.defaultProps = {
     active: false,
+    cancelLabel: 'Cancel',
     format: '24hr',
+    okLabel: 'Ok',
     value: new Date()
   };
 
diff --git a/lib/utils/time.js b/lib/utils/time.js
index c8addd502..863b4586d 100644
--- a/lib/utils/time.js
+++ b/lib/utils/time.js
@@ -117,11 +117,18 @@ var dateLocales = {
     weekdaysLetter: []
   },
   ru: {
-    months: 'Январь_Февраль_Март_Апрель_Май_Июнь_Июльy_Август_Сентябрь_Октябрь_Ноябрь_Декабрь'.split('_'),
+    months: 'Январь_Февраль_Март_Апрель_Май_Июнь_Июль_Август_Сентябрь_Октябрь_Ноябрь_Декабрь'.split('_'),
     monthsShort: 'Янв_Фев_Мар_Апр_Май_Июн_Июл_Авг_Сен_Окт_Ноя_Дек'.split('_'),
     weekdays: 'Воскресенье_Понедельник_Вторник_Среда_Четверг_Пятница_Суббота'.split('_'),
     weekdaysShort: 'Вс_Пн_Вт_Ср_Чт_Пт_Сб'.split('_'),
     weekdaysLetter: []
+  },
+  ua: {
+    months: 'Січень_Лютий_Березень_Квітень_Травень_Червень_Липень_Серпень_Вересень_Жовтень_Листопад_Грудень'.split('_'),
+    monthsShort: 'Січ_Лют_Берез_Квіт_Трав_Черв_Лип_Серп_Верес_Жовт_Листоп_Груд'.split('_'),
+    weekdays: 'Неділя_Понеділок_Вівторок_Середа_Четвер_П’ятниця_Субота'.split('_'),
+    weekdaysShort: 'Нд_Пн_Вт_Ср_Чт_Пт_Сб'.split('_'),
+    weekdaysLetter: []
   }
 };
 var time = {

From dd1d5d146618f53c1f4a12277cd5b280101b9e1b Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 12 Oct 2016 17:12:48 +0200
Subject: [PATCH 0866/1024] Release 1.2.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 32c258af1..4ff7a22e9 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "react-toolbox",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "homepage": "http://www.react-toolbox.com/",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "main": "./lib",
   "author": {
     "name": "React Toolbox Team",

From a50c1c406ec4193c200c9fdd1d3bd3aef1318851 Mon Sep 17 00:00:00 2001
From: Matthew <matthew@amristar.com>
Date: Thu, 13 Oct 2016 08:15:33 +0800
Subject: [PATCH 0867/1024] * Added multiline height, see #811

---
 components/input/Input.js  | 31 +++++++++++++++++++------------
 components/input/readme.md |  3 ++-
 spec/components/input.js   |  4 +++-
 3 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/components/input/Input.js b/components/input/Input.js
index 4038bef50..286bd30a5 100644
--- a/components/input/Input.js
+++ b/components/input/Input.js
@@ -41,7 +41,8 @@ const factory = (FontIcon) => {
         withIcon: React.PropTypes.string
       }),
       type: React.PropTypes.string,
-      value: React.PropTypes.any
+      value: React.PropTypes.any,
+      rows: React.PropTypes.number,
     };
 
     static defaultProps = {
@@ -94,15 +95,21 @@ const factory = (FontIcon) => {
 
     handleAutoresize = () => {
       const element = this.refs.input;
-      // compute the height difference between inner height and outer height
-      const style = getComputedStyle(element, null);
-      const heightOffset = style.boxSizing === 'content-box'
-        ? -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom))
-        : parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
-
-      // resize the input to its content size
-      element.style.height = 'auto';
-      element.style.height = `${element.scrollHeight + heightOffset}px`;
+      const rows = this.props.rows;
+
+      if (typeof rows === 'number' && !isNaN(rows)) {
+        element.style.height = null;
+      } else {
+        // compute the height difference between inner height and outer height
+        const style = getComputedStyle(element, null);
+        const heightOffset = style.boxSizing === 'content-box'
+          ? -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom))
+          : parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
+
+        // resize the input to its content size
+        element.style.height = 'auto';
+        element.style.height = `${element.scrollHeight + heightOffset}px`;
+      }
     }
 
     handleKeyPress = (event) => {
@@ -137,7 +144,7 @@ const factory = (FontIcon) => {
     render () {
       const { children, disabled, error, floating, hint, icon,
               name, label: labelText, maxLength, multiline, required,
-              theme, type, value, onKeyPress, ...others} = this.props;
+              theme, type, value, onKeyPress, rows = 1, ...others} = this.props;
       const length = maxLength && value ? value.length : 0;
       const labelClassName = classnames(theme.label, {[theme.fixed]: !floating});
 
@@ -169,7 +176,7 @@ const factory = (FontIcon) => {
         inputElementProps.maxLength = maxLength;
         inputElementProps.onKeyPress = onKeyPress;
       } else {
-        inputElementProps.rows = 1;
+        inputElementProps.rows = rows;
         inputElementProps.onKeyPress = this.handleKeyPress;
       }
 
diff --git a/components/input/readme.md b/components/input/readme.md
index 42b5c66d9..81154a5c5 100644
--- a/components/input/readme.md
+++ b/components/input/readme.md
@@ -40,8 +40,9 @@ If you want to provide a theme via context, the component key is `RTInput`.
 | `hint`          | `String`                | `''`            | The text string to use for hint text element.|
 | `icon`          | `String` or `Element`   |                 | Name of an icon to use as a label for the input.|
 | `label`         | `String`                |                 | The text string to use for the floating label element.|
-| `maxLength`     | `Number`                |                 |Specifies the maximum number of characters allowed in the component.|
+| `maxLength`     | `Number`                |                 | Specifies the maximum number of characters allowed in the component.|
 | `multiline`     | `Boolean`               | `false`         | If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.|
+| `rows`          | `Number`                |                 | The number of rows the multiline input field has.|
 | `onBlur`        | `Function`              |                 | Callback function that is fired when component is blurred.|
 | `onChange`      | `Function`              |                 | Callback function that is fired when the component's value changes.|
 | `onFocus`       | `Function`              |                 | Callback function that is fired when component is focused.|
diff --git a/spec/components/input.js b/spec/components/input.js
index 88da57c75..856c64f8f 100644
--- a/spec/components/input.js
+++ b/spec/components/input.js
@@ -8,7 +8,8 @@ class InputTest extends React.Component {
     withIcon: '',
     withCustomIcon: '',
     withHintCustomIcon: '',
-    multilineHint: 'Long Description here'
+    multilineHint: 'Long Description here',
+	multilineRows: 'A\n\B\nC\nD\nE\nF'
   };
 
   handleChange = (name, value) => {
@@ -29,6 +30,7 @@ class InputTest extends React.Component {
         <Input type='email' value={this.state.fixedLabel} label='Label fixed' floating={false} onChange={this.handleChange.bind(this, 'fixedLabel')} />
         <Input type='text' value='Read only' readOnly label='Phone Number' />
         <Input type='email' value={this.state.multilineHint} label='Description' hint='Enter Description' multiline onChange={this.handleChange.bind(this, 'multilineHint')} />
+		<Input type='text' value={this.state.multilineRows} label='Row Limited Description' hint='Enter Description' multiline rows={4} onChange={this.handleChange.bind(this, 'multilineRows')} />
         <Input type='text' label='Disabled field' disabled />
         <Input type='tel' value={this.state.withIcon} required label='With icon' onChange={this.handleChange.bind(this, 'withIcon')} icon='phone' />
         <Input type='tel' value={this.state.withCustomIcon} label='With custom icon' onChange={this.handleChange.bind(this, 'withCustomIcon')} icon='favorite' />

From 7856f9241d2788352841e785706ff8af0ce4b4b3 Mon Sep 17 00:00:00 2001
From: Matthew <matthew@amristar.com>
Date: Thu, 13 Oct 2016 08:19:21 +0800
Subject: [PATCH 0868/1024] * Fixed indentation.

---
 spec/components/input.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/spec/components/input.js b/spec/components/input.js
index 856c64f8f..61c57a07a 100644
--- a/spec/components/input.js
+++ b/spec/components/input.js
@@ -9,7 +9,7 @@ class InputTest extends React.Component {
     withCustomIcon: '',
     withHintCustomIcon: '',
     multilineHint: 'Long Description here',
-	multilineRows: 'A\n\B\nC\nD\nE\nF'
+    multilineRows: 'A\n\B\nC\nD\nE\nF'
   };
 
   handleChange = (name, value) => {
@@ -30,7 +30,7 @@ class InputTest extends React.Component {
         <Input type='email' value={this.state.fixedLabel} label='Label fixed' floating={false} onChange={this.handleChange.bind(this, 'fixedLabel')} />
         <Input type='text' value='Read only' readOnly label='Phone Number' />
         <Input type='email' value={this.state.multilineHint} label='Description' hint='Enter Description' multiline onChange={this.handleChange.bind(this, 'multilineHint')} />
-		<Input type='text' value={this.state.multilineRows} label='Row Limited Description' hint='Enter Description' multiline rows={4} onChange={this.handleChange.bind(this, 'multilineRows')} />
+        <Input type='text' value={this.state.multilineRows} label='Row Limited Description' hint='Enter Description' multiline rows={4} onChange={this.handleChange.bind(this, 'multilineRows')} />
         <Input type='text' label='Disabled field' disabled />
         <Input type='tel' value={this.state.withIcon} required label='With icon' onChange={this.handleChange.bind(this, 'withIcon')} icon='phone' />
         <Input type='tel' value={this.state.withCustomIcon} label='With custom icon' onChange={this.handleChange.bind(this, 'withCustomIcon')} icon='favorite' />

From 8d62c8fe552fc980c992d862257f7fbf9e60d735 Mon Sep 17 00:00:00 2001
From: Matthew <matthew@amristar.com>
Date: Thu, 13 Oct 2016 13:19:06 +0800
Subject: [PATCH 0869/1024] * Fixed trailing comma.

---
 components/input/Input.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/input/Input.js b/components/input/Input.js
index 286bd30a5..6629db920 100644
--- a/components/input/Input.js
+++ b/components/input/Input.js
@@ -26,6 +26,7 @@ const factory = (FontIcon) => {
       onFocus: React.PropTypes.func,
       onKeyPress: React.PropTypes.func,
       required: React.PropTypes.bool,
+      rows: React.PropTypes.number,
       theme: React.PropTypes.shape({
         bar: React.PropTypes.string,
         counter: React.PropTypes.string,
@@ -41,8 +42,7 @@ const factory = (FontIcon) => {
         withIcon: React.PropTypes.string
       }),
       type: React.PropTypes.string,
-      value: React.PropTypes.any,
-      rows: React.PropTypes.number,
+      value: React.PropTypes.any
     };
 
     static defaultProps = {

From be81e4d4ea5944435a230b6e54c06ea94d91ad45 Mon Sep 17 00:00:00 2001
From: Ferenc Radius <ferenc@servicebook.link>
Date: Fri, 14 Oct 2016 09:58:13 +0200
Subject: [PATCH 0870/1024] fix type of theme.required fixing issue #867

---
 components/dropdown/Dropdown.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/dropdown/Dropdown.js b/components/dropdown/Dropdown.js
index 4f4c70481..b780b0110 100644
--- a/components/dropdown/Dropdown.js
+++ b/components/dropdown/Dropdown.js
@@ -31,7 +31,7 @@ const factory = (Input) => {
         errored: PropTypes.string,
         field: PropTypes.string,
         label: PropTypes.string,
-        required: PropTypes.bool,
+        required: PropTypes.string,
         selected: PropTypes.string,
         templateValue: PropTypes.string,
         up: PropTypes.string,

From 5cea4e3a1bc2307ebd2be37ffa3ace85de84772a Mon Sep 17 00:00:00 2001
From: Roman Rott <roman.rott@gmail.com>
Date: Sat, 15 Oct 2016 14:37:18 +0300
Subject: [PATCH 0871/1024] Fixed issue with rendering calendar incorrectly
 when first day of a month is Sunday

---
 components/date_picker/CalendarDay.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/date_picker/CalendarDay.js b/components/date_picker/CalendarDay.js
index c61ac43eb..12829f912 100644
--- a/components/date_picker/CalendarDay.js
+++ b/components/date_picker/CalendarDay.js
@@ -20,8 +20,9 @@ class Day extends Component {
   dayStyle () {
     if (this.props.day === 1) {
       const e = (this.props.sundayFirstDayOfWeek) ? 0 : 1;
+      const firstDay = time.getFirstWeekDay(this.props.viewDate) - e;
       return {
-        marginLeft: `${(time.getFirstWeekDay(this.props.viewDate) - e) * 100 / 7}%`
+        marginLeft: `${ (firstDay >= 0 ? firstDay : 6) * 100 / 7 }%`
       };
     }
   }

From c2da4d8547546f5ea5f2a3cacf6c6a3ce856f32a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=20Javier=20Se=C3=B1aris?= <pepesenaris@gmail.com>
Date: Sun, 16 Oct 2016 12:49:32 -0300
Subject: [PATCH 0872/1024] Add optional cancel handler in dialog dismiss

---
 components/date_picker/DatePicker.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/date_picker/DatePicker.js b/components/date_picker/DatePicker.js
index 6a07c13bd..ec8a2b6e0 100644
--- a/components/date_picker/DatePicker.js
+++ b/components/date_picker/DatePicker.js
@@ -34,6 +34,7 @@ const factory = (Input, DatePickerDialog) => {
       name: PropTypes.string,
       onChange: PropTypes.func,
       onClick: PropTypes.func,
+      onDismiss: PropTypes.func,
       onEscKeyDown: PropTypes.func,
       onKeyPress: PropTypes.func,
       onOverlayClick: PropTypes.func,
@@ -101,7 +102,7 @@ const factory = (Input, DatePickerDialog) => {
       const { active, // eslint-disable-line
         autoOk, inputClassName, inputFormat, locale, maxDate, minDate,
         onEscKeyDown, onOverlayClick, readonly, sundayFirstDayOfWeek, value,
-        ...others } = this.props;
+        onDismiss, ...others } = this.props;
       const finalInputFormat = inputFormat || time.formatDate;
       const date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined;
       const formattedDate = date === undefined ? '' : finalInputFormat(value, locale);
@@ -131,7 +132,7 @@ const factory = (Input, DatePickerDialog) => {
             maxDate={maxDate}
             minDate={minDate}
             name={this.props.name}
-            onDismiss={this.handleDismiss}
+            onDismiss={onDismiss || this.handleDismiss}
             onEscKeyDown={onEscKeyDown || this.handleDismiss}
             onOverlayClick={onOverlayClick || this.handleDismiss}
             onSelect={this.handleSelect}

From 3e170c579b31923202cdfe9ae73d35ba4390809c Mon Sep 17 00:00:00 2001
From: Panjie Setiawan Wicaksono <panjie@panjiesw.com>
Date: Tue, 18 Oct 2016 22:44:01 +0700
Subject: [PATCH 0873/1024] ts def typo fix and addtions

---
 components/autocomplete/index.d.ts | 2 +-
 components/date_picker/index.d.ts  | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/autocomplete/index.d.ts b/components/autocomplete/index.d.ts
index 2826c62d9..b2c560d0f 100644
--- a/components/autocomplete/index.d.ts
+++ b/components/autocomplete/index.d.ts
@@ -81,7 +81,7 @@ interface AutocompleteProps extends ReactToolbox.Props {
    * If true, the list of suggestions will not be filtered when a value is selected.
    * @default false
    */
-  showSuggestionsWHenValueIsSet?: boolean;
+  showSuggestionsWhenValueIsSet?: boolean;
   /**
    * Object of key/values or array representing all items suggested.
    */
diff --git a/components/date_picker/index.d.ts b/components/date_picker/index.d.ts
index aa9fc3f83..6a8ffe91e 100644
--- a/components/date_picker/index.d.ts
+++ b/components/date_picker/index.d.ts
@@ -134,6 +134,10 @@ interface DatePickerProps extends ReactToolbox.Props {
    * Callback to be invoked when the dialog overlay is clicked.
    */
   onOverlayClick?: Function;
+  /**
+   * The input element will be readonly and look like disabled.
+   */
+  readonly?: boolean;
   /**
    * Classnames object defining the component style.
    */

From aec132c9a32016eb068e74d10d5f1b15297919c2 Mon Sep 17 00:00:00 2001
From: Maxim Komlev <maximkomlev@bitbucket.org>
Date: Tue, 18 Oct 2016 14:46:56 -0700
Subject: [PATCH 0874/1024] merge

---
 lib/button/theme.scss  | 14 +++++++-------
 lib/overlay/Overlay.js | 32 +++++++++++++++-----------------
 2 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/lib/button/theme.scss b/lib/button/theme.scss
index 4eb6f098e..b178189f1 100644
--- a/lib/button/theme.scss
+++ b/lib/button/theme.scss
@@ -8,14 +8,14 @@
   position: relative;
 
   > input {
-    position: absolute;
-    z-index: 0;
-    width: 0.1px;
-    height: 0.1px;
-    padding: 0;
-    margin: 0;
-    overflow: hidden;
+    width: 0.1px !important;
+    height: 0.1px !important;
     opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
   }
 }
 
diff --git a/lib/overlay/Overlay.js b/lib/overlay/Overlay.js
index 536edce8b..f5662715b 100644
--- a/lib/overlay/Overlay.js
+++ b/lib/overlay/Overlay.js
@@ -37,28 +37,16 @@ var Overlay = function (_Component) {
   _inherits(Overlay, _Component);
 
   function Overlay() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
     _classCallCheck(this, Overlay);
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Overlay.__proto__ || Object.getPrototypeOf(Overlay)).call.apply(_ref, [this].concat(args))), _this), _this.handleEscKey = function (e) {
-      if (_this.props.active && _this.props.onEscKeyDown && e.which === 27) {
-        _this.props.onEscKeyDown(e);
-      }
-    }, _temp), _possibleConstructorReturn(_this, _ret);
+    return _possibleConstructorReturn(this, (Overlay.__proto__ || Object.getPrototypeOf(Overlay)).apply(this, arguments));
   }
 
   _createClass(Overlay, [{
     key: 'componentDidMount',
     value: function componentDidMount() {
       if (this.props.active) {
-        document.body.addEventListener('keydown', this.handleEscKey);
+        this.escKeyListener = document.body.addEventListener('keydown', this.handleEscKey.bind(this));
         document.body.style.overflow = 'hidden';
       }
     }
@@ -71,15 +59,25 @@ var Overlay = function (_Component) {
   }, {
     key: 'componentDidUpdate',
     value: function componentDidUpdate() {
-      if (this.props.active) {
-        document.body.addEventListener('keydown', this.handleEscKey);
+      if (this.props.active && !this.escKeyListener) {
+        this.escKeyListener = document.body.addEventListener('keydown', this.handleEscKey.bind(this));
       }
     }
   }, {
     key: 'componentWillUnmount',
     value: function componentWillUnmount() {
       if (!document.querySelectorAll('[data-react-toolbox="overlay"]')[1]) document.body.style.overflow = '';
-      document.body.removeEventListener('keydown', this.handleEscKey);
+      if (this.escKeyListener) {
+        document.body.removeEventListener('keydown', this.handleEscKey);
+        this.escKeyListener = null;
+      }
+    }
+  }, {
+    key: 'handleEscKey',
+    value: function handleEscKey(e) {
+      if (this.props.active && this.props.onEscKeyDown && e.which === 27) {
+        this.props.onEscKeyDown(e);
+      }
     }
   }, {
     key: 'render',

From c5f05fba9e93b7d1da22bb6cdfcc16f0fadd8093 Mon Sep 17 00:00:00 2001
From: Mateusz Mrowiec <mateusz.mrowiec@rspective.pl>
Date: Wed, 19 Oct 2016 14:20:07 +0200
Subject: [PATCH 0875/1024] Implement disabled state for Slider and Progressi
 Bar

---
 components/progress_bar/ProgressBar.js                   | 4 +++-
 components/progress_bar/_config.scss                     | 1 +
 components/progress_bar/index.d.ts                       | 5 +++++
 components/progress_bar/readme.md                        | 1 +
 components/progress_bar/theme.scss                       | 9 +++++++++
 components/slider/Slider.js                              | 4 ++++
 components/slider/_config.scss                           | 1 +
 components/slider/index.d.ts                             | 5 +++++
 components/slider/readme.md                              | 6 +++++-
 components/slider/theme.scss                             | 7 +++++++
 .../main/modules/examples/progressbar_example_1.txt      | 2 ++
 .../layout/main/modules/examples/slider_example_1.txt    | 5 ++++-
 spec/components/slider.js                                | 5 ++++-
 13 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/components/progress_bar/ProgressBar.js b/components/progress_bar/ProgressBar.js
index 2d27ecec4..fb38d85cc 100644
--- a/components/progress_bar/ProgressBar.js
+++ b/components/progress_bar/ProgressBar.js
@@ -8,6 +8,7 @@ class ProgressBar extends Component {
   static propTypes = {
     buffer: PropTypes.number,
     className: PropTypes.string,
+    disabled: PropTypes.bool,
     max: PropTypes.number,
     min: PropTypes.number,
     mode: PropTypes.oneOf(['determinate', 'indeterminate']),
@@ -79,7 +80,7 @@ class ProgressBar extends Component {
   }
 
   render () {
-    const { className, max, min, mode, multicolor, type, theme, value } = this.props;
+    const { className, disabled, max, min, mode, multicolor, type, theme, value } = this.props;
     const _className = classnames(theme[type], {
       [theme[mode]]: mode,
       [theme.multicolor]: multicolor
@@ -87,6 +88,7 @@ class ProgressBar extends Component {
 
     return (
       <div
+        disabled={disabled}
         data-react-toolbox='progress-bar'
         aria-valuenow={value}
         aria-valuemin={min}
diff --git a/components/progress_bar/_config.scss b/components/progress_bar/_config.scss
index f554b346b..143a80963 100644
--- a/components/progress_bar/_config.scss
+++ b/components/progress_bar/_config.scss
@@ -1,6 +1,7 @@
 $progress-height: .4 * $unit !default;
 $progress-main-color: $color-primary !default;
 $progress-secondary-color: rgba($color-primary-contrast, 0.7) !default;
+$progress-disabled-color: rgba($color-black, 0.26) !default;
 $circle-wrapper-width: 60 !default;
 $circle-radius: 25 !default;
 $scale-ratio: $circle-radius / 20 !default;
diff --git a/components/progress_bar/index.d.ts b/components/progress_bar/index.d.ts
index 7d0096e93..8b0b961e1 100644
--- a/components/progress_bar/index.d.ts
+++ b/components/progress_bar/index.d.ts
@@ -42,6 +42,11 @@ interface ProgressBarProps extends ReactToolbox.Props {
    * @default 0
    */
   buffer?: number;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
   /**
    * Maximum value permitted.
    * @default 100
diff --git a/components/progress_bar/readme.md b/components/progress_bar/readme.md
index 760af9f4e..9ca0963c8 100644
--- a/components/progress_bar/readme.md
+++ b/components/progress_bar/readme.md
@@ -22,6 +22,7 @@ If you want to provide a theme via context, the component key is `RTProgressBar`
 |:-----|:-----|:-----|:-----|
 | `buffer`      | `Number`    | `0`             | Value of a secondary progress bar useful for buffering.|
 | `className`   | `String`    | `''`            | Additional class name to provide custom styling.|
+| `disabled`    | `Boolean`   | `false`         | If true, component will be disabled.|
 | `max`         | `Number`    | `100`           | Maximum value permitted.|
 | `min`         | `Number`    | `0`             | Minimum value permitted.|
 | `mode`        | `String`    | `indeterminate` | Mode of the progress bar, it can be `determinate` or `indeterminate`.|
diff --git a/components/progress_bar/theme.scss b/components/progress_bar/theme.scss
index bcbc64d90..6f5cc2c1c 100644
--- a/components/progress_bar/theme.scss
+++ b/components/progress_bar/theme.scss
@@ -32,11 +32,20 @@
   background-color: $progress-main-color;
 }
 
+[disabled] .value {
+  background-color: $progress-disabled-color;
+}
+
 .buffer {
   background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
   linear-gradient(to right, $progress-main-color, $progress-main-color);
 }
 
+[disabled] .buffer {
+  background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
+  linear-gradient(to right, $progress-disabled-color, $progress-disabled-color);
+}
+
 .circular {
   position: relative;
   display: inline-block;
diff --git a/components/slider/Slider.js b/components/slider/Slider.js
index 9b3670fc6..ff02dd735 100644
--- a/components/slider/Slider.js
+++ b/components/slider/Slider.js
@@ -12,6 +12,7 @@ const factory = (ProgressBar, Input) => {
   class Slider extends Component {
     static propTypes = {
       className: PropTypes.string,
+      disabled: PropTypes.bool,
       editable: PropTypes.bool,
       max: PropTypes.number,
       min: PropTypes.number,
@@ -255,6 +256,7 @@ const factory = (ProgressBar, Input) => {
       const knobStyles = {left: `${this.knobOffset()}%`};
       const className = classnames(theme.slider, {
         [theme.editable]: this.props.editable,
+        [theme.disabled]: this.props.disabled,
         [theme.pinned]: this.props.pinned,
         [theme.pressed]: this.state.pressed,
         [theme.ring]: this.props.value === this.props.min
@@ -263,6 +265,7 @@ const factory = (ProgressBar, Input) => {
       return (
         <div
           className={className}
+          disabled={this.props.disabled}
           data-react-toolbox='slider'
           onBlur={this.handleSliderBlur}
           onFocus={this.handleSliderFocus}
@@ -286,6 +289,7 @@ const factory = (ProgressBar, Input) => {
 
             <div className={theme.progress}>
               <ProgressBar
+                disabled={this.props.disabled}
                 ref='progressbar'
                 className={theme.innerprogress}
                 max={this.props.max}
diff --git a/components/slider/_config.scss b/components/slider/_config.scss
index a5b0799b2..6563e3015 100644
--- a/components/slider/_config.scss
+++ b/components/slider/_config.scss
@@ -1,5 +1,6 @@
 $slider-main-color: $color-primary !default;
 $slider-main-color-contrast: $color-primary-contrast !default;
+$slider-disabled-color: rgba(177, 177, 177, 1) !default;
 $slider-snap-color: $color-black !default;
 $slider-knob-size: 3.2 * $unit !default;
 $slider-inner-knob-size: 1.2 * $unit !default;
diff --git a/components/slider/index.d.ts b/components/slider/index.d.ts
index 41014b23e..3a58538a4 100644
--- a/components/slider/index.d.ts
+++ b/components/slider/index.d.ts
@@ -62,6 +62,11 @@ interface SliderProps extends ReactToolbox.Props {
    * @default false
    */
   editable?: boolean;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
   /**
    * Maximum value permitted.
    * @default 100
diff --git a/components/slider/readme.md b/components/slider/readme.md
index 4d46429ba..4830050a8 100644
--- a/components/slider/readme.md
+++ b/components/slider/readme.md
@@ -9,7 +9,8 @@ import Slider from 'react-toolbox/lib/slider';
 class SliderTest extends React.Component {
   state = {
     slider2: 5,
-    slider3: 1
+    slider3: 1,
+    slider4: 3
   };
 
   handleChange = (slider, value) => {
@@ -27,6 +28,8 @@ class SliderTest extends React.Component {
         <Slider min={0} max={10} editable value={this.state.slider2} onChange={this.handleChange.bind(this, 'slider2')} />
         <p>Pinned and with snaps</p>
         <Slider pinned snaps min={0} max={10} step={1} editable value={this.state.slider3} onChange={this.handleChange.bind(this, 'slider3')} />
+        <p>Disabled</p>
+        <Slider disabled min={0} max={10} value={this.state.slider4} onChange={this.handleChange.bind(this, 'slider4')} />
       </section>
     );
   }
@@ -40,6 +43,7 @@ This component can be styled by context providing a theme with the key `RTSlider
 | Name          | Type          | Default   | Description|
 |:-----|:-----|:-----|:-----|
 | `className`   | `String`      | `''`      | Additional class name to provide custom styling.|
+| `disabled`    | `Boolean`     | `false`   | If true, component will be disabled.|
 | `editable`    | `Boolean`     | `false`   | If true, an input is shown and the user can set the slider from keyboard value.|
 | `max`         | `Number`      | `100`     | Maximum value permitted.|
 | `min`         | `Number`      | `0`       | Minimum value permitted.|
diff --git a/components/slider/theme.scss b/components/slider/theme.scss
index bf3468152..310e80097 100644
--- a/components/slider/theme.scss
+++ b/components/slider/theme.scss
@@ -111,6 +111,13 @@
     border-radius: 50%;
     opacity: .26;
   }
+  &[disabled] {
+    pointer-events: none;
+    cursor: auto;
+    .innerknob {
+      background-color: $slider-disabled-color;
+    }
+  }
   &.editable {
     display: flex;
     flex-direction: row;
diff --git a/docs/app/components/layout/main/modules/examples/progressbar_example_1.txt b/docs/app/components/layout/main/modules/examples/progressbar_example_1.txt
index 0ed4e9fa9..c5fe1807c 100644
--- a/docs/app/components/layout/main/modules/examples/progressbar_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/progressbar_example_1.txt
@@ -43,6 +43,8 @@ class ProgressBarTest extends React.Component {
         <ProgressBar mode='indeterminate'/>
         <p style={{margin: '5px auto'}}>Circular</p>
         <ProgressBar type='circular' mode='indeterminate' multicolor />
+        <p style={{margin: '5px auto'}}>Disabled</p>
+        <ProgressBar disabled mode='determinate' value={57} min={0} max={100}/>
       </section>
     );
   }
diff --git a/docs/app/components/layout/main/modules/examples/slider_example_1.txt b/docs/app/components/layout/main/modules/examples/slider_example_1.txt
index c39c93421..0803c7b0e 100644
--- a/docs/app/components/layout/main/modules/examples/slider_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/slider_example_1.txt
@@ -1,7 +1,8 @@
 class SliderTest extends React.Component {
   state = {
     slider2: 5,
-    slider3: 1
+    slider3: 1,
+    slider4: 3
   };
 
   handleChange = (slider, value) => {
@@ -19,6 +20,8 @@ class SliderTest extends React.Component {
         <Slider min={0} max={10} editable value={this.state.slider2} onChange={this.handleChange.bind(this, 'slider2')} />
         <p>Pinned and with snaps</p>
         <Slider pinned snaps min={0} max={10} step={1} editable value={this.state.slider3} onChange={this.handleChange.bind(this, 'slider3')} />
+        <p>Disabled</p>
+        <Slider disabled min={0} max={10} value={this.state.slider4} onChange={this.handleChange.bind(this, 'slider4')} />
       </section>
     );
   }
diff --git a/spec/components/slider.js b/spec/components/slider.js
index 43bcb5e75..f0b5a04b2 100644
--- a/spec/components/slider.js
+++ b/spec/components/slider.js
@@ -4,7 +4,8 @@ import Slider from '../../components/slider';
 class SliderTest extends React.Component {
   state = {
     slider2: 5,
-    slider3: 1
+    slider3: 1,
+    slider4: 3
   };
 
   handleChange = (slider, value) => {
@@ -21,6 +22,8 @@ class SliderTest extends React.Component {
         <Slider min={0} max={10} editable value={this.state.slider2} onChange={this.handleChange.bind(this, 'slider2')} />
         <p>Pinned and with snaps</p>
         <Slider pinned snaps min={0} max={10} step={1} editable value={this.state.slider3} onChange={this.handleChange.bind(this, 'slider3')} />
+        <p>Disabled</p>
+        <Slider disabled min={0} max={10} value={this.state.slider4} onChange={this.handleChange.bind(this, 'slider4')} />
       </section>
     );
   }

From 0e5b0530d4ff70e4476eb94b8d830847bcfe42ad Mon Sep 17 00:00:00 2001
From: Maxim Komlev <maximkomlev@bitbucket.org>
Date: Tue, 18 Oct 2016 14:46:56 -0700
Subject: [PATCH 0876/1024] merge

---
 lib/button/theme.scss  | 14 +++++++-------
 lib/overlay/Overlay.js | 32 +++++++++++++++-----------------
 2 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/lib/button/theme.scss b/lib/button/theme.scss
index 4eb6f098e..b178189f1 100644
--- a/lib/button/theme.scss
+++ b/lib/button/theme.scss
@@ -8,14 +8,14 @@
   position: relative;
 
   > input {
-    position: absolute;
-    z-index: 0;
-    width: 0.1px;
-    height: 0.1px;
-    padding: 0;
-    margin: 0;
-    overflow: hidden;
+    width: 0.1px !important;
+    height: 0.1px !important;
     opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
   }
 }
 
diff --git a/lib/overlay/Overlay.js b/lib/overlay/Overlay.js
index 536edce8b..f5662715b 100644
--- a/lib/overlay/Overlay.js
+++ b/lib/overlay/Overlay.js
@@ -37,28 +37,16 @@ var Overlay = function (_Component) {
   _inherits(Overlay, _Component);
 
   function Overlay() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
     _classCallCheck(this, Overlay);
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Overlay.__proto__ || Object.getPrototypeOf(Overlay)).call.apply(_ref, [this].concat(args))), _this), _this.handleEscKey = function (e) {
-      if (_this.props.active && _this.props.onEscKeyDown && e.which === 27) {
-        _this.props.onEscKeyDown(e);
-      }
-    }, _temp), _possibleConstructorReturn(_this, _ret);
+    return _possibleConstructorReturn(this, (Overlay.__proto__ || Object.getPrototypeOf(Overlay)).apply(this, arguments));
   }
 
   _createClass(Overlay, [{
     key: 'componentDidMount',
     value: function componentDidMount() {
       if (this.props.active) {
-        document.body.addEventListener('keydown', this.handleEscKey);
+        this.escKeyListener = document.body.addEventListener('keydown', this.handleEscKey.bind(this));
         document.body.style.overflow = 'hidden';
       }
     }
@@ -71,15 +59,25 @@ var Overlay = function (_Component) {
   }, {
     key: 'componentDidUpdate',
     value: function componentDidUpdate() {
-      if (this.props.active) {
-        document.body.addEventListener('keydown', this.handleEscKey);
+      if (this.props.active && !this.escKeyListener) {
+        this.escKeyListener = document.body.addEventListener('keydown', this.handleEscKey.bind(this));
       }
     }
   }, {
     key: 'componentWillUnmount',
     value: function componentWillUnmount() {
       if (!document.querySelectorAll('[data-react-toolbox="overlay"]')[1]) document.body.style.overflow = '';
-      document.body.removeEventListener('keydown', this.handleEscKey);
+      if (this.escKeyListener) {
+        document.body.removeEventListener('keydown', this.handleEscKey);
+        this.escKeyListener = null;
+      }
+    }
+  }, {
+    key: 'handleEscKey',
+    value: function handleEscKey(e) {
+      if (this.props.active && this.props.onEscKeyDown && e.which === 27) {
+        this.props.onEscKeyDown(e);
+      }
     }
   }, {
     key: 'render',

From 3815afc3207f169fe97bc362a22bb34c06b3cbc9 Mon Sep 17 00:00:00 2001
From: Maxim Komlev <maximkomlev@bitbucket.org>
Date: Fri, 21 Oct 2016 17:43:03 -0700
Subject: [PATCH 0877/1024] merge

---
 lib/button/theme.scss          | 14 +++++++-------
 lib/date_picker/CalendarDay.js |  3 ++-
 lib/overlay/Overlay.js         | 32 +++++++++++++++++---------------
 3 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/lib/button/theme.scss b/lib/button/theme.scss
index b178189f1..4eb6f098e 100644
--- a/lib/button/theme.scss
+++ b/lib/button/theme.scss
@@ -8,14 +8,14 @@
   position: relative;
 
   > input {
-    width: 0.1px !important;
-    height: 0.1px !important;
-    opacity: 0;
-    overflow: hidden;
     position: absolute;
-    z-index: 0 !important;
-    padding: 0 !important;
-    margin: 0 !important;
+    z-index: 0;
+    width: 0.1px;
+    height: 0.1px;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    opacity: 0;
   }
 }
 
diff --git a/lib/date_picker/CalendarDay.js b/lib/date_picker/CalendarDay.js
index af1b4a944..0fcccb182 100644
--- a/lib/date_picker/CalendarDay.js
+++ b/lib/date_picker/CalendarDay.js
@@ -54,8 +54,9 @@ var Day = function (_Component) {
     value: function dayStyle() {
       if (this.props.day === 1) {
         var e = this.props.sundayFirstDayOfWeek ? 0 : 1;
+        var firstDay = _time2.default.getFirstWeekDay(this.props.viewDate) - e;
         return {
-          marginLeft: (_time2.default.getFirstWeekDay(this.props.viewDate) - e) * 100 / 7 + '%'
+          marginLeft: (firstDay >= 0 ? firstDay : 6) * 100 / 7 + '%'
         };
       }
     }
diff --git a/lib/overlay/Overlay.js b/lib/overlay/Overlay.js
index f5662715b..536edce8b 100644
--- a/lib/overlay/Overlay.js
+++ b/lib/overlay/Overlay.js
@@ -37,16 +37,28 @@ var Overlay = function (_Component) {
   _inherits(Overlay, _Component);
 
   function Overlay() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
     _classCallCheck(this, Overlay);
 
-    return _possibleConstructorReturn(this, (Overlay.__proto__ || Object.getPrototypeOf(Overlay)).apply(this, arguments));
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Overlay.__proto__ || Object.getPrototypeOf(Overlay)).call.apply(_ref, [this].concat(args))), _this), _this.handleEscKey = function (e) {
+      if (_this.props.active && _this.props.onEscKeyDown && e.which === 27) {
+        _this.props.onEscKeyDown(e);
+      }
+    }, _temp), _possibleConstructorReturn(_this, _ret);
   }
 
   _createClass(Overlay, [{
     key: 'componentDidMount',
     value: function componentDidMount() {
       if (this.props.active) {
-        this.escKeyListener = document.body.addEventListener('keydown', this.handleEscKey.bind(this));
+        document.body.addEventListener('keydown', this.handleEscKey);
         document.body.style.overflow = 'hidden';
       }
     }
@@ -59,25 +71,15 @@ var Overlay = function (_Component) {
   }, {
     key: 'componentDidUpdate',
     value: function componentDidUpdate() {
-      if (this.props.active && !this.escKeyListener) {
-        this.escKeyListener = document.body.addEventListener('keydown', this.handleEscKey.bind(this));
+      if (this.props.active) {
+        document.body.addEventListener('keydown', this.handleEscKey);
       }
     }
   }, {
     key: 'componentWillUnmount',
     value: function componentWillUnmount() {
       if (!document.querySelectorAll('[data-react-toolbox="overlay"]')[1]) document.body.style.overflow = '';
-      if (this.escKeyListener) {
-        document.body.removeEventListener('keydown', this.handleEscKey);
-        this.escKeyListener = null;
-      }
-    }
-  }, {
-    key: 'handleEscKey',
-    value: function handleEscKey(e) {
-      if (this.props.active && this.props.onEscKeyDown && e.which === 27) {
-        this.props.onEscKeyDown(e);
-      }
+      document.body.removeEventListener('keydown', this.handleEscKey);
     }
   }, {
     key: 'render',

From 17c791a94abb082481ab1bf16c34cb59e3274479 Mon Sep 17 00:00:00 2001
From: HaNdTriX <handtrix@gmail.com>
Date: Sat, 22 Oct 2016 14:50:01 +0200
Subject: [PATCH 0878/1024] Fix Switch white-space

---
 components/switch/theme.scss | 4 ++--
 lib/switch/theme.scss        | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/switch/theme.scss b/components/switch/theme.scss
index c01664379..08a5c2900 100644
--- a/components/switch/theme.scss
+++ b/components/switch/theme.scss
@@ -6,7 +6,7 @@
 .field {
   position: relative;
   display: block;
-  height: $switch-total-height;
+  height: auto;
   margin-bottom: $switch-field-margin-bottom;
   white-space: nowrap;
   vertical-align: middle;
@@ -18,7 +18,7 @@
   font-size: $switch-font-size;
   line-height: $switch-total-height;
   color: $switch-text-color;
-  white-space: nowrap;
+  white-space: normal;
   vertical-align: top;
 }
 
diff --git a/lib/switch/theme.scss b/lib/switch/theme.scss
index c01664379..08a5c2900 100644
--- a/lib/switch/theme.scss
+++ b/lib/switch/theme.scss
@@ -6,7 +6,7 @@
 .field {
   position: relative;
   display: block;
-  height: $switch-total-height;
+  height: auto;
   margin-bottom: $switch-field-margin-bottom;
   white-space: nowrap;
   vertical-align: middle;
@@ -18,7 +18,7 @@
   font-size: $switch-font-size;
   line-height: $switch-total-height;
   color: $switch-text-color;
-  white-space: nowrap;
+  white-space: normal;
   vertical-align: top;
 }
 

From b2ad4180f9f00eb9e6fb2ecf3389b350b5663082 Mon Sep 17 00:00:00 2001
From: Sebastian Gronewold <sebastian@elbstack.com>
Date: Sat, 22 Oct 2016 15:28:03 +0200
Subject: [PATCH 0879/1024] Add event to autocomplete onBlur

---
 components/autocomplete/Autocomplete.js | 4 ++--
 lib/autocomplete/Autocomplete.js        | 4 ++--
 lib/autocomplete/index.d.ts             | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index fae682080..100324454 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -91,9 +91,9 @@ const factory = (Chip, Input) => {
      );
    };
 
-   handleQueryBlur = () => {
+   handleQueryBlur = (event) => {
      if (this.state.focus) this.setState({focus: false});
-     if (this.props.onBlur) this.props.onBlur();
+     if (this.props.onBlur) this.props.onBlur(event);
    };
 
    handleQueryChange = (value) => {
diff --git a/lib/autocomplete/Autocomplete.js b/lib/autocomplete/Autocomplete.js
index 5fa0e59eb..11922c992 100644
--- a/lib/autocomplete/Autocomplete.js
+++ b/lib/autocomplete/Autocomplete.js
@@ -86,9 +86,9 @@ var factory = function factory(Chip, Input) {
         _this.setState({ focus: false, query: query, showAllSuggestions: _this.props.showSuggestionsWhenValueIsSet }, function () {
           _reactDom2.default.findDOMNode(_this).querySelector('input').blur();
         });
-      }, _this.handleQueryBlur = function () {
+      }, _this.handleQueryBlur = function (event) {
         if (_this.state.focus) _this.setState({ focus: false });
-        if (_this.props.onBlur) _this.props.onBlur();
+        if (_this.props.onBlur) _this.props.onBlur(event);
       }, _this.handleQueryChange = function (value) {
         _this.setState({ query: value, showAllSuggestions: false });
       }, _this.handleQueryFocus = function () {
diff --git a/lib/autocomplete/index.d.ts b/lib/autocomplete/index.d.ts
index 2826c62d9..b2c560d0f 100644
--- a/lib/autocomplete/index.d.ts
+++ b/lib/autocomplete/index.d.ts
@@ -81,7 +81,7 @@ interface AutocompleteProps extends ReactToolbox.Props {
    * If true, the list of suggestions will not be filtered when a value is selected.
    * @default false
    */
-  showSuggestionsWHenValueIsSet?: boolean;
+  showSuggestionsWhenValueIsSet?: boolean;
   /**
    * Object of key/values or array representing all items suggested.
    */

From d59a1396f04c0b7726af4518761d91363f204eea Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 22 Oct 2016 16:56:18 +0200
Subject: [PATCH 0880/1024] Add onDismiss for TimePicker

---
 components/date_picker/DatePicker.js | 9 ++++++---
 components/time_picker/TimePicker.js | 6 +++++-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/components/date_picker/DatePicker.js b/components/date_picker/DatePicker.js
index 63dd6fbda..19251f03f 100644
--- a/components/date_picker/DatePicker.js
+++ b/components/date_picker/DatePicker.js
@@ -69,6 +69,9 @@ const factory = (Input, DatePickerDialog) => {
 
     handleDismiss = () => {
       this.setState({active: false});
+      if (this.props.onDismiss) {
+        this.props.onDismiss();
+      }
     };
 
     handleInputFocus = (event) => {
@@ -101,10 +104,10 @@ const factory = (Input, DatePickerDialog) => {
     };
 
     render () {
-      const { active, // eslint-disable-line
+      const { active, onDismiss,// eslint-disable-line
         autoOk, cancelLabel, inputClassName, inputFormat, locale, maxDate, minDate,
         okLabel, onEscKeyDown, onOverlayClick, readonly, sundayFirstDayOfWeek, value,
-        onDismiss, ...others } = this.props;
+        ...others } = this.props;
       const finalInputFormat = inputFormat || time.formatDate;
       const date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined;
       const formattedDate = date === undefined ? '' : finalInputFormat(value, locale);
@@ -135,7 +138,7 @@ const factory = (Input, DatePickerDialog) => {
             maxDate={maxDate}
             minDate={minDate}
             name={this.props.name}
-            onDismiss={onDismiss || this.handleDismiss}
+            onDismiss={this.handleDismiss}
             okLabel={okLabel}
             onEscKeyDown={onEscKeyDown || this.handleDismiss}
             onOverlayClick={onOverlayClick || this.handleDismiss}
diff --git a/components/time_picker/TimePicker.js b/components/time_picker/TimePicker.js
index efa6caec0..9b26ef694 100644
--- a/components/time_picker/TimePicker.js
+++ b/components/time_picker/TimePicker.js
@@ -22,6 +22,7 @@ const factory = (TimePickerDialog, Input) => {
       okLabel: PropTypes.string,
       onChange: PropTypes.func,
       onClick: PropTypes.func,
+      onDismiss: PropTypes.func,
       onEscKeyDown: PropTypes.func,
       onKeyPress: PropTypes.func,
       onOverlayClick: PropTypes.func,
@@ -50,6 +51,9 @@ const factory = (TimePickerDialog, Input) => {
 
     handleDismiss = () => {
       this.setState({active: false});
+      if (this.props.onDismiss) {
+        this.props.onDismiss();
+      }
     };
 
     handleInputFocus = (event) => {
@@ -83,7 +87,7 @@ const factory = (TimePickerDialog, Input) => {
 
     render () {
       const {
-        active, // eslint-disable-line
+        active, onDismiss, // eslint-disable-line
         cancelLabel, format, inputClassName, okLabel, onEscKeyDown, onOverlayClick,
         readonly, value, ...others
       } = this.props;

From b66d10d2665ac56c98edbf31b30a9ee161da5d96 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 22 Oct 2016 17:12:41 +0200
Subject: [PATCH 0881/1024] Propagate disabled to Input in Slider

---
 components/slider/Slider.js | 1 +
 spec/components/slider.js   | 7 +++----
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/slider/Slider.js b/components/slider/Slider.js
index ff02dd735..e2bfb0895 100644
--- a/components/slider/Slider.js
+++ b/components/slider/Slider.js
@@ -242,6 +242,7 @@ const factory = (ProgressBar, Input) => {
           <Input
             ref='input'
             className={this.props.theme.input}
+            disabled={this.props.disabled}
             onFocus={this.handleInputFocus}
             onChange={this.handleInputChange}
             onBlur={this.handleInputBlur}
diff --git a/spec/components/slider.js b/spec/components/slider.js
index f0b5a04b2..244b49673 100644
--- a/spec/components/slider.js
+++ b/spec/components/slider.js
@@ -4,8 +4,7 @@ import Slider from '../../components/slider';
 class SliderTest extends React.Component {
   state = {
     slider2: 5,
-    slider3: 1,
-    slider4: 3
+    slider3: 1
   };
 
   handleChange = (slider, value) => {
@@ -22,8 +21,8 @@ class SliderTest extends React.Component {
         <Slider min={0} max={10} editable value={this.state.slider2} onChange={this.handleChange.bind(this, 'slider2')} />
         <p>Pinned and with snaps</p>
         <Slider pinned snaps min={0} max={10} step={1} editable value={this.state.slider3} onChange={this.handleChange.bind(this, 'slider3')} />
-        <p>Disabled</p>
-        <Slider disabled min={0} max={10} value={this.state.slider4} onChange={this.handleChange.bind(this, 'slider4')} />
+        <p>Disabled status</p>
+        <Slider disabled pinned snaps min={0} max={10} step={1} editable value={this.state.slider3} onChange={this.handleChange.bind(this, 'slider3')} />
       </section>
     );
   }

From 0063cc3ce5036c12b46dd31ff52de04ae9c3215e Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 22 Oct 2016 17:25:37 +0200
Subject: [PATCH 0882/1024] Downgrade normalize

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4ff7a22e9..6b6cf8e87 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
   "dependencies": {
     "classnames": "~2.2.5",
     "core-js": "~2.4.0",
-    "normalize.css": "~5.0.0",
+    "normalize.css": "~4.2.0",
     "react-css-themr": "~1.4.1"
   },
   "devDependencies": {

From fcbce3082e6131fddc3bfe78eff2297b16a06cae Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 22 Oct 2016 17:26:19 +0200
Subject: [PATCH 0883/1024] Ignore yarn.lock

---
 .gitignore | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 6781ff041..99bc5c1d3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 build
 node_modules
 npm-debug.log
+yarn.lock
 .idea
-.DS_Store
\ No newline at end of file
+.DS_Store

From 2e36de4f6744d63c49461f2d0ea82f478994a557 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 22 Oct 2016 17:35:55 +0200
Subject: [PATCH 0884/1024] Latest build

---
 lib/date_picker/CalendarDay.js  |  3 ++-
 lib/date_picker/DatePicker.js   |  9 +++++++--
 lib/date_picker/index.d.ts      |  4 ++++
 lib/dropdown/Dropdown.js        |  2 +-
 lib/input/Input.js              | 27 ++++++++++++++++++---------
 lib/input/theme.scss            |  6 +++++-
 lib/progress_bar/ProgressBar.js |  3 +++
 lib/progress_bar/_config.scss   |  1 +
 lib/progress_bar/index.d.ts     |  5 +++++
 lib/progress_bar/theme.scss     |  9 +++++++++
 lib/slider/Slider.js            |  6 +++++-
 lib/slider/_config.scss         |  1 +
 lib/slider/index.d.ts           |  5 +++++
 lib/slider/theme.scss           |  7 +++++++
 lib/time_picker/TimePicker.js   |  7 ++++++-
 15 files changed, 79 insertions(+), 16 deletions(-)

diff --git a/lib/date_picker/CalendarDay.js b/lib/date_picker/CalendarDay.js
index af1b4a944..0fcccb182 100644
--- a/lib/date_picker/CalendarDay.js
+++ b/lib/date_picker/CalendarDay.js
@@ -54,8 +54,9 @@ var Day = function (_Component) {
     value: function dayStyle() {
       if (this.props.day === 1) {
         var e = this.props.sundayFirstDayOfWeek ? 0 : 1;
+        var firstDay = _time2.default.getFirstWeekDay(this.props.viewDate) - e;
         return {
-          marginLeft: (_time2.default.getFirstWeekDay(this.props.viewDate) - e) * 100 / 7 + '%'
+          marginLeft: (firstDay >= 0 ? firstDay : 6) * 100 / 7 + '%'
         };
       }
     }
diff --git a/lib/date_picker/DatePicker.js b/lib/date_picker/DatePicker.js
index a14df37aa..2d12d8a82 100644
--- a/lib/date_picker/DatePicker.js
+++ b/lib/date_picker/DatePicker.js
@@ -80,6 +80,9 @@ var factory = function factory(Input, DatePickerDialog) {
         active: _this.props.active
       }, _this.handleDismiss = function () {
         _this.setState({ active: false });
+        if (_this.props.onDismiss) {
+          _this.props.onDismiss();
+        }
       }, _this.handleInputFocus = function (event) {
         _events2.default.pauseEvent(event);
         _this.setState({ active: true });
@@ -114,6 +117,7 @@ var factory = function factory(Input, DatePickerDialog) {
       value: function render() {
         var _props = this.props;
         var active = _props.active;
+        var onDismiss = _props.onDismiss;
         var autoOk = _props.autoOk;
         var cancelLabel = _props.cancelLabel;
         var inputClassName = _props.inputClassName;
@@ -128,7 +132,7 @@ var factory = function factory(Input, DatePickerDialog) {
         var sundayFirstDayOfWeek = _props.sundayFirstDayOfWeek;
         var value = _props.value;
 
-        var others = _objectWithoutProperties(_props, ['active', 'autoOk', 'cancelLabel', 'inputClassName', 'inputFormat', 'locale', 'maxDate', 'minDate', 'okLabel', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'sundayFirstDayOfWeek', 'value']);
+        var others = _objectWithoutProperties(_props, ['active', 'onDismiss', 'autoOk', 'cancelLabel', 'inputClassName', 'inputFormat', 'locale', 'maxDate', 'minDate', 'okLabel', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'sundayFirstDayOfWeek', 'value']);
 
         var finalInputFormat = inputFormat || _time2.default.formatDate;
         var date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined;
@@ -160,8 +164,8 @@ var factory = function factory(Input, DatePickerDialog) {
             maxDate: maxDate,
             minDate: minDate,
             name: this.props.name,
-            okLabel: okLabel,
             onDismiss: this.handleDismiss,
+            okLabel: okLabel,
             onEscKeyDown: onEscKeyDown || this.handleDismiss,
             onOverlayClick: onOverlayClick || this.handleDismiss,
             onSelect: this.handleSelect,
@@ -193,6 +197,7 @@ var factory = function factory(Input, DatePickerDialog) {
     okLabel: _react.PropTypes.string,
     onChange: _react.PropTypes.func,
     onClick: _react.PropTypes.func,
+    onDismiss: _react.PropTypes.func,
     onEscKeyDown: _react.PropTypes.func,
     onKeyPress: _react.PropTypes.func,
     onOverlayClick: _react.PropTypes.func,
diff --git a/lib/date_picker/index.d.ts b/lib/date_picker/index.d.ts
index aa9fc3f83..6a8ffe91e 100644
--- a/lib/date_picker/index.d.ts
+++ b/lib/date_picker/index.d.ts
@@ -134,6 +134,10 @@ interface DatePickerProps extends ReactToolbox.Props {
    * Callback to be invoked when the dialog overlay is clicked.
    */
   onOverlayClick?: Function;
+  /**
+   * The input element will be readonly and look like disabled.
+   */
+  readonly?: boolean;
   /**
    * Classnames object defining the component style.
    */
diff --git a/lib/dropdown/Dropdown.js b/lib/dropdown/Dropdown.js
index e4edc28b6..431cf7df4 100644
--- a/lib/dropdown/Dropdown.js
+++ b/lib/dropdown/Dropdown.js
@@ -250,7 +250,7 @@ var factory = function factory(Input) {
       errored: _react.PropTypes.string,
       field: _react.PropTypes.string,
       label: _react.PropTypes.string,
-      required: _react.PropTypes.bool,
+      required: _react.PropTypes.string,
       selected: _react.PropTypes.string,
       templateValue: _react.PropTypes.string,
       up: _react.PropTypes.string,
diff --git a/lib/input/Input.js b/lib/input/Input.js
index 7383da6e5..917097e5d 100644
--- a/lib/input/Input.js
+++ b/lib/input/Input.js
@@ -72,13 +72,19 @@ var factory = function factory(FontIcon) {
         if (onChange) onChange(value, event);
       }, _this.handleAutoresize = function () {
         var element = _this.refs.input;
-        // compute the height difference between inner height and outer height
-        var style = getComputedStyle(element, null);
-        var heightOffset = style.boxSizing === 'content-box' ? -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom)) : parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
+        var rows = _this.props.rows;
 
-        // resize the input to its content size
-        element.style.height = 'auto';
-        element.style.height = element.scrollHeight + heightOffset + 'px';
+        if (typeof rows === 'number' && !isNaN(rows)) {
+          element.style.height = null;
+        } else {
+          // compute the height difference between inner height and outer height
+          var style = getComputedStyle(element, null);
+          var heightOffset = style.boxSizing === 'content-box' ? -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom)) : parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
+
+          // resize the input to its content size
+          element.style.height = 'auto';
+          element.style.height = element.scrollHeight + heightOffset + 'px';
+        }
       }, _this.handleKeyPress = function (event) {
         // prevent insertion of more characters if we're a multiline input
         // and maxLength exists
@@ -164,8 +170,10 @@ var factory = function factory(FontIcon) {
         var type = _props.type;
         var value = _props.value;
         var onKeyPress = _props.onKeyPress;
+        var _props$rows = _props.rows;
+        var rows = _props$rows === undefined ? 1 : _props$rows;
 
-        var others = _objectWithoutProperties(_props, ['children', 'disabled', 'error', 'floating', 'hint', 'icon', 'name', 'label', 'maxLength', 'multiline', 'required', 'theme', 'type', 'value', 'onKeyPress']);
+        var others = _objectWithoutProperties(_props, ['children', 'disabled', 'error', 'floating', 'hint', 'icon', 'name', 'label', 'maxLength', 'multiline', 'required', 'theme', 'type', 'value', 'onKeyPress', 'rows']);
 
         var length = maxLength && value ? value.length : 0;
         var labelClassName = (0, _classnames5.default)(theme.label, _defineProperty({}, theme.fixed, !floating));
@@ -189,7 +197,7 @@ var factory = function factory(FontIcon) {
           inputElementProps.maxLength = maxLength;
           inputElementProps.onKeyPress = onKeyPress;
         } else {
-          inputElementProps.rows = 1;
+          inputElementProps.rows = rows;
           inputElementProps.onKeyPress = this.handleKeyPress;
         }
 
@@ -211,7 +219,7 @@ var factory = function factory(FontIcon) {
           ) : null,
           hint ? _react2.default.createElement(
             'span',
-            { className: theme.hint },
+            { hidden: labelText, className: theme.hint },
             hint
           ) : null,
           error ? _react2.default.createElement(
@@ -251,6 +259,7 @@ var factory = function factory(FontIcon) {
     onFocus: _react2.default.PropTypes.func,
     onKeyPress: _react2.default.PropTypes.func,
     required: _react2.default.PropTypes.bool,
+    rows: _react2.default.PropTypes.number,
     theme: _react2.default.PropTypes.shape({
       bar: _react2.default.PropTypes.string,
       counter: _react2.default.PropTypes.string,
diff --git a/lib/input/theme.scss b/lib/input/theme.scss
index b6b6c8130..9e29b9b4a 100644
--- a/lib/input/theme.scss
+++ b/lib/input/theme.scss
@@ -46,6 +46,7 @@
       color: $input-text-required-color;
     }
     ~ .hint {
+      display: block;
       opacity: $input-hint-opacity;
     }
     ~ .icon {
@@ -57,6 +58,9 @@
       top: $input-focus-label-top;
       font-size: $input-label-font-size;
     }
+    &.filled ~ .hint {
+      opacity: 0;
+    }
   }
   &.filled ~ .label.fixed, &.filled ~ .hint {
     display: none;
@@ -87,7 +91,7 @@
   line-height: $input-field-font-size;
   color: $input-text-label-color;
   pointer-events: none;
-  opacity: 0;
+  opacity: $input-hint-opacity;
   transition-timing-function: $animation-curve-default;
   transition-duration: $animation-duration;
   transition-property: opacity;
diff --git a/lib/progress_bar/ProgressBar.js b/lib/progress_bar/ProgressBar.js
index f8a16e85e..0063b753a 100644
--- a/lib/progress_bar/ProgressBar.js
+++ b/lib/progress_bar/ProgressBar.js
@@ -99,6 +99,7 @@ var ProgressBar = function (_Component) {
 
       var _props = this.props;
       var className = _props.className;
+      var disabled = _props.disabled;
       var max = _props.max;
       var min = _props.min;
       var mode = _props.mode;
@@ -112,6 +113,7 @@ var ProgressBar = function (_Component) {
       return _react2.default.createElement(
         'div',
         {
+          disabled: disabled,
           'data-react-toolbox': 'progress-bar',
           'aria-valuenow': value,
           'aria-valuemin': min,
@@ -129,6 +131,7 @@ var ProgressBar = function (_Component) {
 ProgressBar.propTypes = {
   buffer: _react.PropTypes.number,
   className: _react.PropTypes.string,
+  disabled: _react.PropTypes.bool,
   max: _react.PropTypes.number,
   min: _react.PropTypes.number,
   mode: _react.PropTypes.oneOf(['determinate', 'indeterminate']),
diff --git a/lib/progress_bar/_config.scss b/lib/progress_bar/_config.scss
index f554b346b..143a80963 100644
--- a/lib/progress_bar/_config.scss
+++ b/lib/progress_bar/_config.scss
@@ -1,6 +1,7 @@
 $progress-height: .4 * $unit !default;
 $progress-main-color: $color-primary !default;
 $progress-secondary-color: rgba($color-primary-contrast, 0.7) !default;
+$progress-disabled-color: rgba($color-black, 0.26) !default;
 $circle-wrapper-width: 60 !default;
 $circle-radius: 25 !default;
 $scale-ratio: $circle-radius / 20 !default;
diff --git a/lib/progress_bar/index.d.ts b/lib/progress_bar/index.d.ts
index 7d0096e93..8b0b961e1 100644
--- a/lib/progress_bar/index.d.ts
+++ b/lib/progress_bar/index.d.ts
@@ -42,6 +42,11 @@ interface ProgressBarProps extends ReactToolbox.Props {
    * @default 0
    */
   buffer?: number;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
   /**
    * Maximum value permitted.
    * @default 100
diff --git a/lib/progress_bar/theme.scss b/lib/progress_bar/theme.scss
index bcbc64d90..6f5cc2c1c 100644
--- a/lib/progress_bar/theme.scss
+++ b/lib/progress_bar/theme.scss
@@ -32,11 +32,20 @@
   background-color: $progress-main-color;
 }
 
+[disabled] .value {
+  background-color: $progress-disabled-color;
+}
+
 .buffer {
   background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
   linear-gradient(to right, $progress-main-color, $progress-main-color);
 }
 
+[disabled] .buffer {
+  background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
+  linear-gradient(to right, $progress-disabled-color, $progress-disabled-color);
+}
+
 .circular {
   position: relative;
   display: inline-block;
diff --git a/lib/slider/Slider.js b/lib/slider/Slider.js
index 0ec33d19e..3943b6c4f 100644
--- a/lib/slider/Slider.js
+++ b/lib/slider/Slider.js
@@ -265,6 +265,7 @@ var factory = function factory(ProgressBar, Input) {
           return _react2.default.createElement(Input, {
             ref: 'input',
             className: this.props.theme.input,
+            disabled: this.props.disabled,
             onFocus: this.handleInputFocus,
             onChange: this.handleInputChange,
             onBlur: this.handleInputBlur,
@@ -280,12 +281,13 @@ var factory = function factory(ProgressBar, Input) {
         var theme = this.props.theme;
 
         var knobStyles = { left: this.knobOffset() + '%' };
-        var className = (0, _classnames3.default)(theme.slider, (_classnames = {}, _defineProperty(_classnames, theme.editable, this.props.editable), _defineProperty(_classnames, theme.pinned, this.props.pinned), _defineProperty(_classnames, theme.pressed, this.state.pressed), _defineProperty(_classnames, theme.ring, this.props.value === this.props.min), _classnames), this.props.className);
+        var className = (0, _classnames3.default)(theme.slider, (_classnames = {}, _defineProperty(_classnames, theme.editable, this.props.editable), _defineProperty(_classnames, theme.disabled, this.props.disabled), _defineProperty(_classnames, theme.pinned, this.props.pinned), _defineProperty(_classnames, theme.pressed, this.state.pressed), _defineProperty(_classnames, theme.ring, this.props.value === this.props.min), _classnames), this.props.className);
 
         return _react2.default.createElement(
           'div',
           {
             className: className,
+            disabled: this.props.disabled,
             'data-react-toolbox': 'slider',
             onBlur: this.handleSliderBlur,
             onFocus: this.handleSliderFocus,
@@ -314,6 +316,7 @@ var factory = function factory(ProgressBar, Input) {
               'div',
               { className: theme.progress },
               _react2.default.createElement(ProgressBar, {
+                disabled: this.props.disabled,
                 ref: 'progressbar',
                 className: theme.innerprogress,
                 max: this.props.max,
@@ -334,6 +337,7 @@ var factory = function factory(ProgressBar, Input) {
 
   Slider.propTypes = {
     className: _react.PropTypes.string,
+    disabled: _react.PropTypes.bool,
     editable: _react.PropTypes.bool,
     max: _react.PropTypes.number,
     min: _react.PropTypes.number,
diff --git a/lib/slider/_config.scss b/lib/slider/_config.scss
index a5b0799b2..6563e3015 100644
--- a/lib/slider/_config.scss
+++ b/lib/slider/_config.scss
@@ -1,5 +1,6 @@
 $slider-main-color: $color-primary !default;
 $slider-main-color-contrast: $color-primary-contrast !default;
+$slider-disabled-color: rgba(177, 177, 177, 1) !default;
 $slider-snap-color: $color-black !default;
 $slider-knob-size: 3.2 * $unit !default;
 $slider-inner-knob-size: 1.2 * $unit !default;
diff --git a/lib/slider/index.d.ts b/lib/slider/index.d.ts
index 41014b23e..3a58538a4 100644
--- a/lib/slider/index.d.ts
+++ b/lib/slider/index.d.ts
@@ -62,6 +62,11 @@ interface SliderProps extends ReactToolbox.Props {
    * @default false
    */
   editable?: boolean;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
   /**
    * Maximum value permitted.
    * @default 100
diff --git a/lib/slider/theme.scss b/lib/slider/theme.scss
index bf3468152..310e80097 100644
--- a/lib/slider/theme.scss
+++ b/lib/slider/theme.scss
@@ -111,6 +111,13 @@
     border-radius: 50%;
     opacity: .26;
   }
+  &[disabled] {
+    pointer-events: none;
+    cursor: auto;
+    .innerknob {
+      background-color: $slider-disabled-color;
+    }
+  }
   &.editable {
     display: flex;
     flex-direction: row;
diff --git a/lib/time_picker/TimePicker.js b/lib/time_picker/TimePicker.js
index 20cab415c..27fc5901b 100644
--- a/lib/time_picker/TimePicker.js
+++ b/lib/time_picker/TimePicker.js
@@ -72,6 +72,9 @@ var factory = function factory(TimePickerDialog, Input) {
         active: _this.props.active
       }, _this.handleDismiss = function () {
         _this.setState({ active: false });
+        if (_this.props.onDismiss) {
+          _this.props.onDismiss();
+        }
       }, _this.handleInputFocus = function (event) {
         _events2.default.pauseEvent(event);
         _this.setState({ active: true });
@@ -106,6 +109,7 @@ var factory = function factory(TimePickerDialog, Input) {
       value: function render() {
         var _props = this.props;
         var active = _props.active;
+        var onDismiss = _props.onDismiss;
         var cancelLabel = _props.cancelLabel;
         var format = _props.format;
         var inputClassName = _props.inputClassName;
@@ -115,7 +119,7 @@ var factory = function factory(TimePickerDialog, Input) {
         var readonly = _props.readonly;
         var value = _props.value;
 
-        var others = _objectWithoutProperties(_props, ['active', 'cancelLabel', 'format', 'inputClassName', 'okLabel', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'value']);
+        var others = _objectWithoutProperties(_props, ['active', 'onDismiss', 'cancelLabel', 'format', 'inputClassName', 'okLabel', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'value']);
 
         var formattedTime = value ? _time2.default.formatTime(value, format) : '';
         return _react2.default.createElement(
@@ -166,6 +170,7 @@ var factory = function factory(TimePickerDialog, Input) {
     okLabel: _react.PropTypes.string,
     onChange: _react.PropTypes.func,
     onClick: _react.PropTypes.func,
+    onDismiss: _react.PropTypes.func,
     onEscKeyDown: _react.PropTypes.func,
     onKeyPress: _react.PropTypes.func,
     onOverlayClick: _react.PropTypes.func,

From 5b00bc3c3b73927b7181bccdfb4f558535d22f61 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 22 Oct 2016 17:57:19 +0200
Subject: [PATCH 0885/1024] Update deps adding eslint-plugin-airbnb

---
 package.json | 62 +++++++++++++++++++++++++---------------------------
 1 file changed, 30 insertions(+), 32 deletions(-)

diff --git a/package.json b/package.json
index 6b6cf8e87..380b4b786 100644
--- a/package.json
+++ b/package.json
@@ -42,57 +42,55 @@
     "react-css-themr": "~1.4.1"
   },
   "devDependencies": {
-    "autoprefixer": "~6.4.0",
-    "babel-cli": "~6.8.0",
-    "babel-core": "~6.13.2",
-    "babel-eslint": "~6.0.4",
+    "autoprefixer": "~6.5.1",
+    "babel-cli": "~6.16.0",
+    "babel-core": "~6.17.0",
+    "babel-eslint": "~7.0.0",
     "babel-loader": "~6.2.4",
     "babel-plugin-react-transform": "~2.0.2",
-    "babel-polyfill": "~6.13.0",
-    "babel-preset-es2015": "~6.13.2",
-    "babel-preset-react": "~6.5.0",
-    "babel-preset-stage-0": "~6.5.0",
-    "bluebird": "~3.3.5",
-    "cpx": "~1.3.1",
-    "cross-env": "~2.0.0",
-    "css-loader": "~0.23.1",
-    "eslint": "~3.2.2",
-    "eslint-plugin-babel": "~3.2.0",
-    "eslint-plugin-react": "~6.0.0",
+    "babel-polyfill": "~6.16.0",
+    "babel-preset-es2015": "~6.16.0",
+    "babel-preset-react": "~6.16.0",
+    "babel-preset-stage-0": "~6.16.0",
+    "cpx": "~1.5.0",
+    "cross-env": "~3.1.3",
+    "css-loader": "~0.25.0",
+    "eslint": "~3.8.1",
+    "eslint-import-resolver-webpack": "^0.6.0",
+    "eslint-plugin-babel": "~3.3.0",
+    "eslint-plugin-import": "^2.0.1",
+    "eslint-plugin-jsx-a11y": "^2.2.3",
+    "eslint-plugin-react": "~6.4.1",
     "expect": "~1.20.1",
-    "express": "~4.13.4",
+    "express": "~4.14.0",
     "extract-text-webpack-plugin": "~1.0.1",
     "git-dirty": "~1.0.2",
-    "glob": "~7.0.3",
+    "glob": "~7.1.1",
     "immutability-helper": "~2.0.0",
-    "karma": "~1.1.2",
-    "karma-chrome-launcher": "~1.0.1",
+    "karma": "~1.3.0",
     "karma-cli": "~1.0.0",
-    "karma-mocha": "~1.0.1",
+    "karma-mocha": "~1.2.0",
     "karma-phantomjs-launcher": "~1.0.0",
-    "karma-webpack": "~1.7.0",
-    "mocha": "~3.0.1",
-    "node-sass": "~3.7.0",
-    "phantomjs": "~2.1.7",
-    "phantomjs-polyfill": "0.0.2",
+    "karma-webpack": "~1.8.0",
+    "mocha": "~3.1.2",
+    "node-sass": "~3.10.1",
     "phantomjs-prebuilt": "~2.1.7",
-    "postcss-loader": "~0.9.1",
+    "postcss-loader": "~1.0.0",
     "react": "~15.3.0",
     "react-addons-css-transition-group": "~15.3.0",
     "react-addons-test-utils": "~15.3.0",
-    "react-docgen": "~2.8.2",
     "react-dom": "~15.3.0",
     "react-transform-catch-errors": "~1.0.2",
     "react-transform-hmr": "~1.0.4",
-    "redbox-react": "~1.2.4",
+    "redbox-react": "~1.3.2",
     "rimraf": "~2.5.2",
-    "sass-lint": "1.8.2",
+    "sass-lint": "1.9.1",
     "sass-loader": "~4.0.0",
-    "sinon": "git://github.com/sinonjs/sinon.git#b672042043517b9f84e14ed0fb8265126168778a",
+    "sinon": "^2.0.0-pre.2",
     "style-loader": "~0.13.1",
     "webpack": "~1.13.0",
-    "webpack-dev-middleware": "~1.6.1",
-    "webpack-hot-middleware": "~2.10.0"
+    "webpack-dev-middleware": "~1.8.4",
+    "webpack-hot-middleware": "~2.13.0"
   },
   "scripts": {
     "babel": "babel ./components --out-dir ./lib",

From d3e7f1fb47332d29ed3603ac340a159a32d0b1d6 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 22 Oct 2016 18:27:59 +0200
Subject: [PATCH 0886/1024] Restrict package versions

---
 package.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 380b4b786..3f926082b 100644
--- a/package.json
+++ b/package.json
@@ -56,10 +56,10 @@
     "cross-env": "~3.1.3",
     "css-loader": "~0.25.0",
     "eslint": "~3.8.1",
-    "eslint-import-resolver-webpack": "^0.6.0",
+    "eslint-import-resolver-webpack": "~0.6.0",
     "eslint-plugin-babel": "~3.3.0",
-    "eslint-plugin-import": "^2.0.1",
-    "eslint-plugin-jsx-a11y": "^2.2.3",
+    "eslint-plugin-import": "~2.0.1",
+    "eslint-plugin-jsx-a11y": "~2.2.3",
     "eslint-plugin-react": "~6.4.1",
     "expect": "~1.20.1",
     "express": "~4.14.0",
@@ -86,7 +86,7 @@
     "rimraf": "~2.5.2",
     "sass-lint": "1.9.1",
     "sass-loader": "~4.0.0",
-    "sinon": "^2.0.0-pre.2",
+    "sinon": "~2.0.0-pre.2",
     "style-loader": "~0.13.1",
     "webpack": "~1.13.0",
     "webpack-dev-middleware": "~1.8.4",

From 9931ac42bea4c30ecab3976bdc1fc0337ecfe90c Mon Sep 17 00:00:00 2001
From: Sebastian Gronewold <sebastian@elbstack.com>
Date: Sun, 23 Oct 2016 18:32:32 +0200
Subject: [PATCH 0887/1024] Pass currently active suggestion to onBlur handler

---
 components/autocomplete/Autocomplete.js | 2 +-
 lib/autocomplete/Autocomplete.js        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index 100324454..502f9cdb1 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -93,7 +93,7 @@ const factory = (Chip, Input) => {
 
    handleQueryBlur = (event) => {
      if (this.state.focus) this.setState({focus: false});
-     if (this.props.onBlur) this.props.onBlur(event);
+     if (this.props.onBlur) this.props.onBlur(event, this.state.active);
    };
 
    handleQueryChange = (value) => {
diff --git a/lib/autocomplete/Autocomplete.js b/lib/autocomplete/Autocomplete.js
index 11922c992..adbfbdd7d 100644
--- a/lib/autocomplete/Autocomplete.js
+++ b/lib/autocomplete/Autocomplete.js
@@ -88,7 +88,7 @@ var factory = function factory(Chip, Input) {
         });
       }, _this.handleQueryBlur = function (event) {
         if (_this.state.focus) _this.setState({ focus: false });
-        if (_this.props.onBlur) _this.props.onBlur(event);
+        if (_this.props.onBlur) _this.props.onBlur(event, _this.state.active);
       }, _this.handleQueryChange = function (value) {
         _this.setState({ query: value, showAllSuggestions: false });
       }, _this.handleQueryFocus = function () {

From c1e84e42bdfacdfab486ff73104947b30f20275b Mon Sep 17 00:00:00 2001
From: Andrey Okonetchnikov <andrej.okonetschnikow@gmail.com>
Date: Wed, 26 Oct 2016 15:53:25 +0200
Subject: [PATCH 0888/1024] [chore] Added lint-staged along with the config.

Lint-staged will run linters before the commit.
This allows enforcing code style and prevent from errors.
---
 .lintstagedrc | 7 +++++++
 package.json  | 4 ++++
 2 files changed, 11 insertions(+)
 create mode 100644 .lintstagedrc

diff --git a/.lintstagedrc b/.lintstagedrc
new file mode 100644
index 000000000..8a2904f4d
--- /dev/null
+++ b/.lintstagedrc
@@ -0,0 +1,7 @@
+{
+  "*.js": [
+    "eslint --fix",
+    "git add"
+  ],
+  "*.scss": "sass-lint --max-warnings 0 -v"
+}
diff --git a/package.json b/package.json
index 380b4b786..a954c1634 100644
--- a/package.json
+++ b/package.json
@@ -72,10 +72,12 @@
     "karma-mocha": "~1.2.0",
     "karma-phantomjs-launcher": "~1.0.0",
     "karma-webpack": "~1.8.0",
+    "lint-staged": "^3.2.0",
     "mocha": "~3.1.2",
     "node-sass": "~3.10.1",
     "phantomjs-prebuilt": "~2.1.7",
     "postcss-loader": "~1.0.0",
+    "pre-commit": "^1.1.3",
     "react": "~15.3.0",
     "react-addons-css-transition-group": "~15.3.0",
     "react-addons-test-utils": "~15.3.0",
@@ -99,6 +101,7 @@
     "lint": "npm run lint:js && npm run lint:scss",
     "lint:js": "eslint ./ --ext .js",
     "lint:scss": "sass-lint ./components/**/*.scss -v -i ./components/slider/style.scss",
+    "lint:staged": "lint-staged",
     "patch": "bumped release patch",
     "prebuild": "npm run clean",
     "prepublish": "npm run build",
@@ -109,6 +112,7 @@
     "test:watch": "cross-env NODE_ENV=test karma start --no-single-run",
     "tsd": "cpx \"./components/**/*.d.ts\" ./lib"
   },
+  "pre-commit": "lint:staged",
   "license": "MIT",
   "peerDependencies": {
     "classnames": "~2.2.0",

From 690a79ac56efd20ed0fb613760889402ec9fb953 Mon Sep 17 00:00:00 2001
From: rubenmoya <rmoyarodriguez@gmail.com>
Date: Fri, 28 Oct 2016 18:42:59 +0200
Subject: [PATCH 0889/1024] fix handleMultipleChange in autocomplete spec

---
 spec/components/autocomplete.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spec/components/autocomplete.js b/spec/components/autocomplete.js
index 6045ad1ee..638ed9330 100644
--- a/spec/components/autocomplete.js
+++ b/spec/components/autocomplete.js
@@ -16,7 +16,7 @@ class AutocompleteTest extends React.Component {
       multiple: value,
       countriesObject: {
         ...this.state.countriesObject,
-        ...!this.state.countriesObject[value[0]] ? {[value[0]]: value[0]} : {}
+        ...(value[0] && !this.state.countriesObject[value[0]]) ? {[value[0]]: value[0]} : {}
       }
     });
   };

From 466aac254f465dbda8860e15fe54c346ba6ae47f Mon Sep 17 00:00:00 2001
From: Justin Schultz <jaschultz25@gmail.com>
Date: Fri, 28 Oct 2016 14:21:01 -0600
Subject: [PATCH 0890/1024] Moves the enter check to onKeyDown

---
 components/autocomplete/Autocomplete.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index 502f9cdb1..9ee50db14 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -116,9 +116,7 @@ const factory = (Chip, Input) => {
      if (shouldClearQuery) {
        this.setState({query: ''});
      }
-   };
-
-   handleQueryKeyUp = (event) => {
+     
      if (event.which === 13) {
        let target = this.state.active;
        if (!target) {
@@ -129,7 +127,9 @@ const factory = (Chip, Input) => {
        }
        this.select(event, target);
      }
+   };
 
+   handleQueryKeyUp = (event) => {
      if (event.which === 27) ReactDOM.findDOMNode(this).querySelector('input').blur();
 
      if ([40, 38].indexOf(event.which) !== -1) {

From 53e016eb4d0cd3fbb50bc664657da931b3557f3b Mon Sep 17 00:00:00 2001
From: Maxim Komlev <maximkomlev@bitbucket.org>
Date: Sun, 30 Oct 2016 16:19:24 -0700
Subject: [PATCH 0891/1024] fixed layout for IE

---
 components/button/theme.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/button/theme.scss b/components/button/theme.scss
index 4eb6f098e..bceb0b29c 100644
--- a/components/button/theme.scss
+++ b/components/button/theme.scss
@@ -9,6 +9,8 @@
 
   > input {
     position: absolute;
+    top: 0;
+    left:0;
     z-index: 0;
     width: 0.1px;
     height: 0.1px;

From 879d0c2ce0f26c4346e7ed992f9d4525eb29d795 Mon Sep 17 00:00:00 2001
From: Felquis <felquis.gimenes@pagar.me>
Date: Mon, 31 Oct 2016 14:10:40 -0200
Subject: [PATCH 0892/1024] Fix red border in required inputs at Firefox fixes
 #916

---
 components/commons.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/components/commons.scss b/components/commons.scss
index 10c0ced55..54f9ba163 100644
--- a/components/commons.scss
+++ b/components/commons.scss
@@ -56,6 +56,11 @@ input:not([type="checkbox"]):not([type="radio"]), button {
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
 }
 
+// -- Remove firefox default style for required inputs
+input[required]:-moz-ui-invalid {
+  box-shadow: none;
+}
+
 // -- Material design font sizes
 h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
   @include typo-display-3($color-contrast: true);

From 03feeaf5b8692e035b41b2f27a46c3d8dedc1fbd Mon Sep 17 00:00:00 2001
From: Oden <ops991923@gmail.com>
Date: Mon, 31 Oct 2016 17:26:57 -0700
Subject: [PATCH 0893/1024] Fixed ListDividerProps

---
 components/list/index.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/list/index.d.ts b/components/list/index.d.ts
index e352ded4b..ad4ace447 100644
--- a/components/list/index.d.ts
+++ b/components/list/index.d.ts
@@ -131,7 +131,7 @@ interface ListDividerProps extends ReactToolbox.Props {
   theme?: ListDividerTheme;
 }
 
-export class ListDivider extends React.Component<ListDivider, {}> { }
+export class ListDivider extends React.Component<ListDividerProps, {}> { }
 
 export interface ListItemTheme {
   /**

From aa890c65882d37a51b5d078a53a9e8311fa81f22 Mon Sep 17 00:00:00 2001
From: Oden <ops991923@gmail.com>
Date: Mon, 31 Oct 2016 17:27:53 -0700
Subject: [PATCH 0894/1024] Fixed onTouchMove

---
 components/index.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/index.d.ts b/components/index.d.ts
index 63841d434..d18ecd7b0 100644
--- a/components/index.d.ts
+++ b/components/index.d.ts
@@ -44,7 +44,7 @@ export declare namespace ReactToolbox {
     onMouseOver?: Function;
     onTouchCancel?: Function;
     onTouchEnd?: Function;
-    uchMove?: Function;
+    onTouchMove?: Function;
     onTouchStart?: Function;
     /**
      * Set inline style for the root component.

From d4587d982b81cce8a76551390010023d45b79ba6 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 1 Nov 2016 14:26:45 +0100
Subject: [PATCH 0895/1024] Run build

---
 lib/ThemeProvider.js             |  54 ++++
 lib/app_bar/AppBar.js            |  21 +-
 lib/autocomplete/Autocomplete.js |  56 ++---
 lib/avatar/Avatar.js             |  17 +-
 lib/button/BrowseButton.js       |  31 ++-
 lib/button/Button.js             |  33 ++-
 lib/button/IconButton.js         |  23 +-
 lib/button/NuButton.js           | 184 ++++++++++++++
 lib/button/theme.scss            |  16 +-
 lib/card/Card.js                 |  11 +-
 lib/card/CardActions.js          |   9 +-
 lib/card/CardMedia.js            |  17 +-
 lib/card/CardText.js             |   9 +-
 lib/card/CardTitle.js            |  15 +-
 lib/checkbox/Check.js            |  10 +-
 lib/checkbox/Checkbox.js         |  11 +-
 lib/chip/Chip.js                 |  13 +-
 lib/date_picker/DatePicker.js    |  35 ++-
 lib/drawer/Drawer.js             |  12 +-
 lib/dropdown/Dropdown.js         |  17 +-
 lib/font_icon/FontIcon.js        |   9 +-
 lib/hoc/ActivableRenderer.js     |  13 +-
 lib/input/Input.js               |  55 ++---
 lib/layout/Layout.js             |   6 +-
 lib/layout/NavDrawer.js          |  18 +-
 lib/layout/Panel.js              |  10 +-
 lib/layout/Sidebar.js            |  12 +-
 lib/link/Link.js                 |  17 +-
 lib/list/ListCheckbox.js         |  20 +-
 lib/list/ListDivider.js          |   4 +-
 lib/list/ListItem.js             |  26 +-
 lib/list/ListItemAction.js       |  10 +-
 lib/list/ListItemActions.js      |   6 +-
 lib/list/ListItemContent.js      |  20 +-
 lib/list/ListItemText.js         |  11 +-
 lib/list/ListSubHeader.js        |   6 +-
 lib/menu/Menu.js                 |  46 ++--
 lib/menu/MenuItem.js             |  19 +-
 lib/navigation/Navigation.js     |  12 +-
 lib/overlay/Overlay.js           |  46 ++--
 lib/progress_bar/ProgressBar.js  |  27 +-
 lib/radio/Radio.js               |   9 +-
 lib/radio/RadioButton.js         |  25 +-
 lib/ripple/NuRipple.js           | 407 +++++++++++++++++++++++++++++++
 lib/ripple/Ripple.js             |  89 ++++---
 lib/slider/Slider.js             |  25 +-
 lib/snackbar/Snackbar.js         |  18 +-
 lib/styleUtils.js                |  52 ++++
 lib/switch/Switch.js             |  15 +-
 lib/switch/Thumb.js              |   7 +-
 lib/table/Table.js               |  38 +--
 lib/table/TableHead.js           |  12 +-
 lib/tabs/Tab.js                  |  23 +-
 lib/tabs/Tabs.js                 |  19 +-
 lib/time_picker/Clock.js         |   9 +-
 lib/time_picker/ClockFace.js     |  22 +-
 lib/time_picker/ClockHours.js    |  14 +-
 lib/time_picker/TimePicker.js    |  25 +-
 lib/tooltip/Tooltip.js           |  77 +++---
 lib/utils/utils.js               |   4 +-
 60 files changed, 1263 insertions(+), 614 deletions(-)
 create mode 100644 lib/ThemeProvider.js
 create mode 100644 lib/button/NuButton.js
 create mode 100644 lib/ripple/NuRipple.js
 create mode 100644 lib/styleUtils.js

diff --git a/lib/ThemeProvider.js b/lib/ThemeProvider.js
new file mode 100644
index 000000000..28dea07e5
--- /dev/null
+++ b/lib/ThemeProvider.js
@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getProperty = undefined;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _styledComponents = require('styled-components');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var getProperty = function getProperty(name) {
+  return function (props) {
+    var value = name.split('.').reduce(function (current, next) {
+      return current[next];
+    }, props.theme.reactToolbox);
+
+    return value;
+  };
+};
+
+var defaultTheme = {
+  animationCurveDefault: 'cubic-bezier(0.4, 0, 0.2, 1)',
+  animationCurveFastOutLinearIn: 'cubic-bezier(0.4, 0, 0.2, 1)',
+  primaryColor: 'rgba(63, 81, 181, 1)',
+  primaryColorContrast: 'rgba(255, 255, 255, 1)',
+  accentColor: 'rgba(255, 64, 129, 1)',
+  accentColorContrast: 'rgba(255, 255, 255, 1)',
+  shadow2p: '\n    0 2px 2px 0 rgba(0, 0, 0, 0.14),\n    0 3px 1px -2px rgba(0, 0, 0, 0.2),\n    0 1px 5px 0 rgba(0, 0, 0, 0.12);\n  '
+};
+
+var ReactToolboxThemeProvider = function ReactToolboxThemeProvider(props) {
+  var theme = {
+    reactToolbox: Object.assign({}, defaultTheme, props.theme)
+  };
+
+  return _react2.default.createElement(
+    _styledComponents.ThemeProvider,
+    { theme: theme },
+    props.children
+  );
+};
+
+ReactToolboxThemeProvider.propTypes = {
+  children: _react.PropTypes.node,
+  theme: _react.PropTypes.object
+};
+
+exports.default = ReactToolboxThemeProvider;
+exports.getProperty = getProperty;
\ No newline at end of file
diff --git a/lib/app_bar/AppBar.js b/lib/app_bar/AppBar.js
index 4ae2106e9..852b9277c 100644
--- a/lib/app_bar/AppBar.js
+++ b/lib/app_bar/AppBar.js
@@ -51,9 +51,8 @@ var factory = function factory(IconButton) {
       return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = AppBar.__proto__ || Object.getPrototypeOf(AppBar)).call.apply(_ref, [this].concat(args))), _this), _this.state = { hidden: false, height: 0 }, _this.initializeScroll = function () {
         window.addEventListener('scroll', _this.handleScroll);
 
-        var _this$rootNode$getBou = _this.rootNode.getBoundingClientRect();
-
-        var height = _this$rootNode$getBou.height;
+        var _this$rootNode$getBou = _this.rootNode.getBoundingClientRect(),
+            height = _this$rootNode$getBou.height;
 
         _this.curScroll = window.scrollY;
         _this.setState({ height: height });
@@ -98,14 +97,14 @@ var factory = function factory(IconButton) {
         var _classnames,
             _this2 = this;
 
-        var _props = this.props;
-        var children = _props.children;
-        var leftIcon = _props.leftIcon;
-        var onLeftIconClick = _props.onLeftIconClick;
-        var onRightIconClick = _props.onRightIconClick;
-        var rightIcon = _props.rightIcon;
-        var theme = _props.theme;
-        var title = _props.title;
+        var _props = this.props,
+            children = _props.children,
+            leftIcon = _props.leftIcon,
+            onLeftIconClick = _props.onLeftIconClick,
+            onRightIconClick = _props.onRightIconClick,
+            rightIcon = _props.rightIcon,
+            theme = _props.theme,
+            title = _props.title;
 
         var className = (0, _classnames3.default)(theme.appBar, (_classnames = {}, _defineProperty(_classnames, theme.fixed, this.props.fixed), _defineProperty(_classnames, theme.flat, this.props.flat), _defineProperty(_classnames, theme.scrollHide, this.state.hidden), _classnames), this.props.className);
 
diff --git a/lib/autocomplete/Autocomplete.js b/lib/autocomplete/Autocomplete.js
index 11922c992..6d3be4bf0 100644
--- a/lib/autocomplete/Autocomplete.js
+++ b/lib/autocomplete/Autocomplete.js
@@ -189,10 +189,9 @@ var factory = function factory(Chip, Input) {
 
           try {
             for (var _iterator = source[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-              var _step$value = _slicedToArray(_step.value, 2);
-
-              var key = _step$value[0];
-              var value = _step$value[1];
+              var _step$value = _slicedToArray(_step.value, 2),
+                  key = _step$value[0],
+                  value = _step$value[1];
 
               if (!values.has(key) && this.matches(value.toLowerCase().trim(), query)) {
                 suggest.set(key, value);
@@ -221,10 +220,9 @@ var factory = function factory(Chip, Input) {
 
           try {
             for (var _iterator2 = source[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
-              var _step2$value = _slicedToArray(_step2.value, 2);
-
-              var key = _step2$value[0];
-              var value = _step2$value[1];
+              var _step2$value = _slicedToArray(_step2.value, 2),
+                  key = _step2$value[0],
+                  value = _step2$value[1];
 
               if (this.matches(value.toLowerCase().trim(), query)) {
                 suggest.set(key, value);
@@ -295,10 +293,9 @@ var factory = function factory(Chip, Input) {
 
         try {
           for (var _iterator3 = this.source()[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
-            var _step3$value = _slicedToArray(_step3.value, 2);
-
-            var k = _step3$value[0];
-            var v = _step3$value[1];
+            var _step3$value = _slicedToArray(_step3.value, 2),
+                k = _step3$value[0],
+                v = _step3$value[1];
 
             if (vals.indexOf(k) !== -1) valueMap.set(k, v);
           }
@@ -335,10 +332,9 @@ var factory = function factory(Chip, Input) {
 
         if (this.props.multiple) {
           var selectedItems = [].concat(_toConsumableArray(this.values())).map(function (_ref2) {
-            var _ref3 = _slicedToArray(_ref2, 2);
-
-            var key = _ref3[0];
-            var value = _ref3[1];
+            var _ref3 = _slicedToArray(_ref2, 2),
+                key = _ref3[0],
+                value = _ref3[1];
 
             return _react2.default.createElement(
               Chip,
@@ -367,10 +363,9 @@ var factory = function factory(Chip, Input) {
         var theme = this.props.theme;
 
         var suggestions = [].concat(_toConsumableArray(this.suggestions())).map(function (_ref4) {
-          var _ref5 = _slicedToArray(_ref4, 2);
-
-          var key = _ref5[0];
-          var value = _ref5[1];
+          var _ref5 = _slicedToArray(_ref4, 2),
+              key = _ref5[0],
+              value = _ref5[1];
 
           var className = (0, _classnames5.default)(theme.suggestion, _defineProperty({}, theme.active, _this3.state.active === key));
           return _react2.default.createElement(
@@ -396,17 +391,16 @@ var factory = function factory(Chip, Input) {
     }, {
       key: 'render',
       value: function render() {
-        var _props = this.props;
-        var allowCreate = _props.allowCreate;
-        var error = _props.error;
-        var label = _props.label;
-        var source = _props.source;
-        var suggestionMatch = _props.suggestionMatch;
-        var selectedPosition = _props.selectedPosition;
-        var showSuggestionsWhenValueIsSet = _props.showSuggestionsWhenValueIsSet;
-        var theme = _props.theme;
-
-        var other = _objectWithoutProperties(_props, ['allowCreate', 'error', 'label', 'source', 'suggestionMatch', 'selectedPosition', 'showSuggestionsWhenValueIsSet', 'theme']);
+        var _props = this.props,
+            allowCreate = _props.allowCreate,
+            error = _props.error,
+            label = _props.label,
+            source = _props.source,
+            suggestionMatch = _props.suggestionMatch,
+            selectedPosition = _props.selectedPosition,
+            showSuggestionsWhenValueIsSet = _props.showSuggestionsWhenValueIsSet,
+            theme = _props.theme,
+            other = _objectWithoutProperties(_props, ['allowCreate', 'error', 'label', 'source', 'suggestionMatch', 'selectedPosition', 'showSuggestionsWhenValueIsSet', 'theme']);
 
         var className = (0, _classnames5.default)(theme.autocomplete, _defineProperty({}, theme.focus, this.state.focus), this.props.className);
 
diff --git a/lib/avatar/Avatar.js b/lib/avatar/Avatar.js
index 75bf7a4f3..368df2089 100644
--- a/lib/avatar/Avatar.js
+++ b/lib/avatar/Avatar.js
@@ -29,15 +29,14 @@ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in ob
 
 var factory = function factory(FontIcon) {
   var Avatar = function Avatar(_ref) {
-    var children = _ref.children;
-    var className = _ref.className;
-    var cover = _ref.cover;
-    var icon = _ref.icon;
-    var image = _ref.image;
-    var theme = _ref.theme;
-    var title = _ref.title;
-
-    var other = _objectWithoutProperties(_ref, ['children', 'className', 'cover', 'icon', 'image', 'theme', 'title']);
+    var children = _ref.children,
+        className = _ref.className,
+        cover = _ref.cover,
+        icon = _ref.icon,
+        image = _ref.image,
+        theme = _ref.theme,
+        title = _ref.title,
+        other = _objectWithoutProperties(_ref, ['children', 'className', 'cover', 'icon', 'image', 'theme', 'title']);
 
     return _react2.default.createElement(
       'div',
diff --git a/lib/button/BrowseButton.js b/lib/button/BrowseButton.js
index 732fefc72..d88381401 100644
--- a/lib/button/BrowseButton.js
+++ b/lib/button/BrowseButton.js
@@ -72,22 +72,21 @@ var factory = function factory(ripple, FontIcon) {
       value: function render() {
         var _classnames;
 
-        var _props = this.props;
-        var accent = _props.accent;
-        var children = _props.children;
-        var className = _props.className;
-        var flat = _props.flat;
-        var floating = _props.floating;
-        var icon = _props.icon;
-        var inverse = _props.inverse;
-        var label = _props.label;
-        var mini = _props.mini;
-        var neutral = _props.neutral;
-        var primary = _props.primary;
-        var theme = _props.theme;
-        var raised = _props.raised;
-
-        var others = _objectWithoutProperties(_props, ['accent', 'children', 'className', 'flat', 'floating', 'icon', 'inverse', 'label', 'mini', 'neutral', 'primary', 'theme', 'raised']);
+        var _props = this.props,
+            accent = _props.accent,
+            children = _props.children,
+            className = _props.className,
+            flat = _props.flat,
+            floating = _props.floating,
+            icon = _props.icon,
+            inverse = _props.inverse,
+            label = _props.label,
+            mini = _props.mini,
+            neutral = _props.neutral,
+            primary = _props.primary,
+            theme = _props.theme,
+            raised = _props.raised,
+            others = _objectWithoutProperties(_props, ['accent', 'children', 'className', 'flat', 'floating', 'icon', 'inverse', 'label', 'mini', 'neutral', 'primary', 'theme', 'raised']);
 
         var element = 'label';
         var level = primary ? 'primary' : accent ? 'accent' : 'neutral';
diff --git a/lib/button/Button.js b/lib/button/Button.js
index b38aeb3b7..7f72d880b 100644
--- a/lib/button/Button.js
+++ b/lib/button/Button.js
@@ -70,23 +70,22 @@ var factory = function factory(ripple, FontIcon) {
       value: function render() {
         var _classnames;
 
-        var _props = this.props;
-        var accent = _props.accent;
-        var children = _props.children;
-        var className = _props.className;
-        var flat = _props.flat;
-        var floating = _props.floating;
-        var href = _props.href;
-        var icon = _props.icon;
-        var inverse = _props.inverse;
-        var label = _props.label;
-        var mini = _props.mini;
-        var neutral = _props.neutral;
-        var primary = _props.primary;
-        var theme = _props.theme;
-        var raised = _props.raised;
-
-        var others = _objectWithoutProperties(_props, ['accent', 'children', 'className', 'flat', 'floating', 'href', 'icon', 'inverse', 'label', 'mini', 'neutral', 'primary', 'theme', 'raised']);
+        var _props = this.props,
+            accent = _props.accent,
+            children = _props.children,
+            className = _props.className,
+            flat = _props.flat,
+            floating = _props.floating,
+            href = _props.href,
+            icon = _props.icon,
+            inverse = _props.inverse,
+            label = _props.label,
+            mini = _props.mini,
+            neutral = _props.neutral,
+            primary = _props.primary,
+            theme = _props.theme,
+            raised = _props.raised,
+            others = _objectWithoutProperties(_props, ['accent', 'children', 'className', 'flat', 'floating', 'href', 'icon', 'inverse', 'label', 'mini', 'neutral', 'primary', 'theme', 'raised']);
 
         var element = href ? 'a' : 'button';
         var level = primary ? 'primary' : accent ? 'accent' : 'neutral';
diff --git a/lib/button/IconButton.js b/lib/button/IconButton.js
index 40f22fd91..4844cf2f7 100644
--- a/lib/button/IconButton.js
+++ b/lib/button/IconButton.js
@@ -70,18 +70,17 @@ var factory = function factory(ripple, FontIcon) {
       value: function render() {
         var _classnames;
 
-        var _props = this.props;
-        var accent = _props.accent;
-        var children = _props.children;
-        var className = _props.className;
-        var href = _props.href;
-        var icon = _props.icon;
-        var inverse = _props.inverse;
-        var neutral = _props.neutral;
-        var primary = _props.primary;
-        var theme = _props.theme;
-
-        var others = _objectWithoutProperties(_props, ['accent', 'children', 'className', 'href', 'icon', 'inverse', 'neutral', 'primary', 'theme']);
+        var _props = this.props,
+            accent = _props.accent,
+            children = _props.children,
+            className = _props.className,
+            href = _props.href,
+            icon = _props.icon,
+            inverse = _props.inverse,
+            neutral = _props.neutral,
+            primary = _props.primary,
+            theme = _props.theme,
+            others = _objectWithoutProperties(_props, ['accent', 'children', 'className', 'href', 'icon', 'inverse', 'neutral', 'primary', 'theme']);
 
         var element = href ? 'a' : 'button';
         var level = primary ? 'primary' : accent ? 'accent' : 'neutral';
diff --git a/lib/button/NuButton.js b/lib/button/NuButton.js
new file mode 100644
index 000000000..eb481d44e
--- /dev/null
+++ b/lib/button/NuButton.js
@@ -0,0 +1,184 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _templateObject = _taggedTemplateLiteral(['\n  align-content: center;\n  align-items: center;\n  border: 0;\n  cursor: pointer;\n  display: inline-block;\n  flex-direction: row;\n  font-size: ', ';\n  font-weight: 500;\n  height: ', ';\n  justify-content: center;\n  letter-spacing: 0;\n  line-height: ', ';\n  outline: none;\n  position: relative;\n  text-align: center;\n  text-decoration: none;\n  text-transform: uppercase;\n  transition:\n    box-shadow 0.2s ', ',\n    background-color 0.2s ', ',\n    color 0.2s ', ';\n  white-space: nowrap;\n  &::-moz-focus-inner {\n    border: 0;\n  }\n  &:visited {\n    color: inherit;\n  }\n  & > svg {\n    display: inline-block;\n    fill: currentColor;\n    font-size: 120%;\n    height: ', ';\n    vertical-align: top;\n    width: 1em;\n  }\n  & > i {\n    font-size: 120%;\n    display: inline-block;\n    line-height: ', ';\n    vertical-align: top;\n  }\n'], ['\n  align-content: center;\n  align-items: center;\n  border: 0;\n  cursor: pointer;\n  display: inline-block;\n  flex-direction: row;\n  font-size: ', ';\n  font-weight: 500;\n  height: ', ';\n  justify-content: center;\n  letter-spacing: 0;\n  line-height: ', ';\n  outline: none;\n  position: relative;\n  text-align: center;\n  text-decoration: none;\n  text-transform: uppercase;\n  transition:\n    box-shadow 0.2s ', ',\n    background-color 0.2s ', ',\n    color 0.2s ', ';\n  white-space: nowrap;\n  &::-moz-focus-inner {\n    border: 0;\n  }\n  &:visited {\n    color: inherit;\n  }\n  & > svg {\n    display: inline-block;\n    fill: currentColor;\n    font-size: 120%;\n    height: ', ';\n    vertical-align: top;\n    width: 1em;\n  }\n  & > i {\n    font-size: 120%;\n    display: inline-block;\n    line-height: ', ';\n    vertical-align: top;\n  }\n']),
+    _templateObject2 = _taggedTemplateLiteral(['\n    background: ', ' ;\n    border-radius: 2px;\n    box-shadow: ', ';\n    color: ', ' ;\n    min-width: 90px;\n    padding: 0 12px;\n    &:hover {\n      background: ', ';\n    }\n    &:focus:not(:active) {\n      box-shadow:\n        0 0 8px rgba(0, 0, 0, 0.18),\n        0 8px 16px rgba(0, 0, 0, 0.36);\n    }\n    & > i,\n    & > svg {\n      margin-right: 5px;\n    }\n  '], ['\n    background: ', ' ;\n    border-radius: 2px;\n    box-shadow: ', ';\n    color: ', ' ;\n    min-width: 90px;\n    padding: 0 12px;\n    &:hover {\n      background: ', ';\n    }\n    &:focus:not(:active) {\n      box-shadow:\n        0 0 8px rgba(0, 0, 0, 0.18),\n        0 8px 16px rgba(0, 0, 0, 0.36);\n    }\n    & > i,\n    & > svg {\n      margin-right: 5px;\n    }\n  ']),
+    _templateObject3 = _taggedTemplateLiteral(['\n    background: transparent;\n    border-radius: 2px;\n    color: ', ';\n    min-width: 90px;\n    padding: 0 12px;\n    &:focus:not(:active) {\n      background: ', ';\n    }\n    &:hover {\n      background: ', ';\n    }\n  '], ['\n    background: transparent;\n    border-radius: 2px;\n    color: ', ';\n    min-width: 90px;\n    padding: 0 12px;\n    &:focus:not(:active) {\n      background: ', ';\n    }\n    &:hover {\n      background: ', ';\n    }\n  ']),
+    _templateObject4 = _taggedTemplateLiteral(['\n    background: ', ' ;\n    border-radius: 50%;\n    box-shadow:\n      0 1px 1.5px 0 rgba(0, 0, 0, 0.12),\n      0 1px 1px 0 rgba(0, 0, 0, 0.24);\n    color: ', ';\n    font-size: 24px;\n    height: 56px;\n    width: 56px;\n    &:focus:not(:active) {\n      box-shadow:\n        0 0 8px rgba(0, 0, 0, 0.18),\n        0 8px 16px rgba(0, 0, 0, 0.36);\n    }\n  '], ['\n    background: ', ' ;\n    border-radius: 50%;\n    box-shadow:\n      0 1px 1.5px 0 rgba(0, 0, 0, 0.12),\n      0 1px 1px 0 rgba(0, 0, 0, 0.24);\n    color: ', ';\n    font-size: 24px;\n    height: 56px;\n    width: 56px;\n    &:focus:not(:active) {\n      box-shadow:\n        0 0 8px rgba(0, 0, 0, 0.18),\n        0 8px 16px rgba(0, 0, 0, 0.36);\n    }\n  ']),
+    _templateObject5 = _taggedTemplateLiteral(['\n  background: transparent;\n  border-radius: 50%;\n  color: ', ';\n  width: ', ';\n  &:focus:not(:active) {\n    background: ', ';\n  }\n'], ['\n  background: transparent;\n  border-radius: 50%;\n  color: ', ';\n  width: ', ';\n  &:focus:not(:active) {\n    background: ', ';\n  }\n']),
+    _templateObject6 = _taggedTemplateLiteral(['\n      background-color: ', ';\n      color: ', ';\n      &:hover {\n        background: ', ';\n      }\n    '], ['\n      background-color: ', ';\n      color: ', ';\n      &:hover {\n        background: ', ';\n      }\n    ']),
+    _templateObject7 = _taggedTemplateLiteral(['\n      color: ', ';\n      &:focus:not(:active) {\n        background: ', ';\n      }\n      &:hover {\n        background: ', ';\n      }\n    '], ['\n      color: ', ';\n      &:focus:not(:active) {\n        background: ', ';\n      }\n      &:hover {\n        background: ', ';\n      }\n    ']),
+    _templateObject8 = _taggedTemplateLiteral(['\n      color: ', ';\n      &:focus:not(:active) {\n        background: ', ';\n      }\n    '], ['\n      color: ', ';\n      &:focus:not(:active) {\n        background: ', ';\n      }\n    ']),
+    _templateObject9 = _taggedTemplateLiteral(['\n    ', '\n    ', '\n    ', '\n    ', '\n    ', '\n    ', '\n    ', '\n  '], ['\n    ', '\n    ', '\n    ', '\n    ', '\n    ', '\n    ', '\n    ', '\n  ']);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _styledComponents = require('styled-components');
+
+var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+var _font_icon = require('../font_icon');
+
+var _font_icon2 = _interopRequireDefault(_font_icon);
+
+var _ThemeProvider = require('../ThemeProvider');
+
+var _styleUtils = require('../styleUtils');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var button = (0, _styledComponents.css)(_templateObject, (0, _styleUtils.unit)(1.4), (0, _styleUtils.unit)(3.6), (0, _styleUtils.unit)(3.6), (0, _ThemeProvider.getProperty)('animationCurveDefault'), (0, _ThemeProvider.getProperty)('animationCurveDefault'), (0, _ThemeProvider.getProperty)('animationCurveDefault'), (0, _styleUtils.unit)(3.6), (0, _styleUtils.unit)(3.6));
+
+var raised = function raised(props) {
+  var color = props.inverse ? 'rgba(255, 255, 255, 1)' : 'rgba(33, 33, 33, 1)';
+  var background = props.inverse ? 'rgba(33, 33, 33, 1)' : 'rgba(255, 255, 255, 1)';
+  return (0, _styledComponents.css)(_templateObject2, background, (0, _ThemeProvider.getProperty)('shadow2p'), color, (0, _styleUtils.alpha)(background, 0.8));
+};
+
+var flat = function flat(props) {
+  var color = props.inverse ? 'rgba(255, 255, 255, 1)' : 'rgba(33, 33, 33, 1)';
+  return (0, _styledComponents.css)(_templateObject3, color, (0, _styleUtils.alpha)('rgba(33, 33, 33, 1)', 0.2), (0, _styleUtils.alpha)('rgba(33, 33, 33, 1)', 0.2));
+};
+
+var floating = function floating(props) {
+  var color = props.inverse ? 'rgba(255, 255, 255, 1)' : 'rgba(33, 33, 33, 1)';
+  var background = props.inverse ? 'rgba(33, 33, 33, 1)' : 'rgba(255, 255, 255, 1)';
+  return (0, _styledComponents.css)(_templateObject4, background, color);
+};
+
+var toggle = (0, _styledComponents.css)(_templateObject5, 'rgba(33, 33, 33, 1)', (0, _styleUtils.unit)(3.6), (0, _styleUtils.alpha)('rgba(33, 33, 33, 1)', 0.2));
+
+var colored = function colored(props, normal, contrast) {
+  if (props.raised || props.floating) {
+    return (0, _styledComponents.css)(_templateObject6, normal, contrast, (0, _styleUtils.alpha)(normal, 0.8));
+  } else if (props.flat) {
+    return (0, _styledComponents.css)(_templateObject7, normal, (0, _styleUtils.alpha)(normal, 0.2), (0, _styleUtils.alpha)(normal, 0.2));
+  } else if (props.toggle) {
+    return (0, _styledComponents.css)(_templateObject8, normal, (0, _styleUtils.alpha)(normal, 0.2));
+  }
+};
+
+var primary = function primary(props) {
+  return colored(props, (0, _ThemeProvider.getProperty)('primaryColor'), (0, _ThemeProvider.getProperty)('primaryColorContrast'));
+};
+
+var accent = function accent(props) {
+  return colored(props, (0, _ThemeProvider.getProperty)('accentColor'), (0, _ThemeProvider.getProperty)('accentColorContrast'));
+};
+
+var getButtonElement = function getButtonElement(tagName) {
+  return (0, _styledComponents2.default)(tagName)(_templateObject9, button, function (props) {
+    return props.flat && flat;
+  }, function (props) {
+    return props.floating && floating;
+  }, function (props) {
+    return props.raised && raised;
+  }, function (props) {
+    return props.toggle && toggle;
+  }, function (props) {
+    return props.primary && primary(props);
+  }, function (props) {
+    return props.accent && accent(props);
+  });
+};
+
+var factory = function factory(_ref) {
+  var FontIcon = _ref.FontIcon;
+
+  var InnerLink = getButtonElement('a');
+  var InnerButton = getButtonElement('button');
+
+  var Button = function (_Component) {
+    _inherits(Button, _Component);
+
+    function Button() {
+      var _ref2;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, Button);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref2 = Button.__proto__ || Object.getPrototypeOf(Button)).call.apply(_ref2, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
+        _this.rootNode.refs.button.blur();
+        if (_this.props.onMouseUp) {
+          _this.props.onMouseUp(event);
+        }
+      }, _this.handleMouseLeave = function (event) {
+        _this.rootNode.refs.button.blur();
+        if (_this.props.onMouseLeave) {
+          _this.props.onMouseLeave(event);
+        }
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(Button, [{
+      key: 'render',
+      value: function render() {
+        var _this2 = this;
+
+        var ButtonElement = this.props.href ? InnerLink : InnerButton;
+
+        var _props = this.props,
+            children = _props.children,
+            icon = _props.icon,
+            label = _props.label,
+            others = _objectWithoutProperties(_props, ['children', 'icon', 'label']);
+
+        return _react2.default.createElement(
+          ButtonElement,
+          _extends({}, others, {
+            onMouseUp: this.handleMouseUp,
+            onMouseLeave: this.handleMouseLeave,
+            innerRef: 'button',
+            ref: function ref(node) {
+              _this2.rootNode = node;
+            }
+          }),
+          icon && _react2.default.createElement(FontIcon, { value: icon }),
+          label,
+          children
+        );
+      }
+    }]);
+
+    return Button;
+  }(_react.Component);
+
+  Button.propTypes = {
+    children: _react.PropTypes.node,
+    href: _react.PropTypes.string,
+    icon: _react.PropTypes.string,
+    label: _react.PropTypes.string,
+    onMouseLeave: _react.PropTypes.func,
+    onMouseUp: _react.PropTypes.func
+  };
+
+
+  return Button;
+};
+
+var Button = factory({ FontIcon: _font_icon2.default });
+exports.default = Button;
\ No newline at end of file
diff --git a/lib/button/theme.scss b/lib/button/theme.scss
index b178189f1..bceb0b29c 100644
--- a/lib/button/theme.scss
+++ b/lib/button/theme.scss
@@ -8,14 +8,16 @@
   position: relative;
 
   > input {
-    width: 0.1px !important;
-    height: 0.1px !important;
-    opacity: 0;
-    overflow: hidden;
     position: absolute;
-    z-index: 0 !important;
-    padding: 0 !important;
-    margin: 0 !important;
+    top: 0;
+    left:0;
+    z-index: 0;
+    width: 0.1px;
+    height: 0.1px;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    opacity: 0;
   }
 }
 
diff --git a/lib/card/Card.js b/lib/card/Card.js
index 2f099b726..3067f7475 100644
--- a/lib/card/Card.js
+++ b/lib/card/Card.js
@@ -26,12 +26,11 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
 var Card = function Card(_ref) {
-  var children = _ref.children;
-  var className = _ref.className;
-  var raised = _ref.raised;
-  var theme = _ref.theme;
-
-  var other = _objectWithoutProperties(_ref, ['children', 'className', 'raised', 'theme']);
+  var children = _ref.children,
+      className = _ref.className,
+      raised = _ref.raised,
+      theme = _ref.theme,
+      other = _objectWithoutProperties(_ref, ['children', 'className', 'raised', 'theme']);
 
   var classes = (0, _classnames3.default)(theme.card, _defineProperty({}, theme.raised, raised), className);
 
diff --git a/lib/card/CardActions.js b/lib/card/CardActions.js
index d149b8b45..5c4cb45c6 100644
--- a/lib/card/CardActions.js
+++ b/lib/card/CardActions.js
@@ -24,11 +24,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
 var CardActions = function CardActions(_ref) {
-  var children = _ref.children;
-  var className = _ref.className;
-  var theme = _ref.theme;
-
-  var other = _objectWithoutProperties(_ref, ['children', 'className', 'theme']);
+  var children = _ref.children,
+      className = _ref.className,
+      theme = _ref.theme,
+      other = _objectWithoutProperties(_ref, ['children', 'className', 'theme']);
 
   return _react2.default.createElement(
     'div',
diff --git a/lib/card/CardMedia.js b/lib/card/CardMedia.js
index 7c2cb02a2..e0d86cc43 100644
--- a/lib/card/CardMedia.js
+++ b/lib/card/CardMedia.js
@@ -26,15 +26,14 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
 var CardMedia = function CardMedia(_ref) {
-  var aspectRatio = _ref.aspectRatio;
-  var children = _ref.children;
-  var className = _ref.className;
-  var color = _ref.color;
-  var contentOverlay = _ref.contentOverlay;
-  var image = _ref.image;
-  var theme = _ref.theme;
-
-  var other = _objectWithoutProperties(_ref, ['aspectRatio', 'children', 'className', 'color', 'contentOverlay', 'image', 'theme']);
+  var aspectRatio = _ref.aspectRatio,
+      children = _ref.children,
+      className = _ref.className,
+      color = _ref.color,
+      contentOverlay = _ref.contentOverlay,
+      image = _ref.image,
+      theme = _ref.theme,
+      other = _objectWithoutProperties(_ref, ['aspectRatio', 'children', 'className', 'color', 'contentOverlay', 'image', 'theme']);
 
   var classes = (0, _classnames4.default)(theme.cardMedia, _defineProperty({}, theme[aspectRatio], aspectRatio), className);
 
diff --git a/lib/card/CardText.js b/lib/card/CardText.js
index 832511ca7..b1ea09aea 100644
--- a/lib/card/CardText.js
+++ b/lib/card/CardText.js
@@ -24,11 +24,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
 var CardText = function CardText(_ref) {
-  var children = _ref.children;
-  var className = _ref.className;
-  var theme = _ref.theme;
-
-  var other = _objectWithoutProperties(_ref, ['children', 'className', 'theme']);
+  var children = _ref.children,
+      className = _ref.className,
+      theme = _ref.theme,
+      other = _objectWithoutProperties(_ref, ['children', 'className', 'theme']);
 
   return _react2.default.createElement(
     'div',
diff --git a/lib/card/CardTitle.js b/lib/card/CardTitle.js
index f4f1898d8..a6d278073 100644
--- a/lib/card/CardTitle.js
+++ b/lib/card/CardTitle.js
@@ -33,14 +33,13 @@ var factory = function factory(Avatar) {
   var CardTitle = function CardTitle(_ref) {
     var _classnames;
 
-    var avatar = _ref.avatar;
-    var children = _ref.children;
-    var className = _ref.className;
-    var subtitle = _ref.subtitle;
-    var theme = _ref.theme;
-    var title = _ref.title;
-
-    var other = _objectWithoutProperties(_ref, ['avatar', 'children', 'className', 'subtitle', 'theme', 'title']);
+    var avatar = _ref.avatar,
+        children = _ref.children,
+        className = _ref.className,
+        subtitle = _ref.subtitle,
+        theme = _ref.theme,
+        title = _ref.title,
+        other = _objectWithoutProperties(_ref, ['avatar', 'children', 'className', 'subtitle', 'theme', 'title']);
 
     var classes = (0, _classnames3.default)(theme.cardTitle, (_classnames = {}, _defineProperty(_classnames, theme.small, avatar), _defineProperty(_classnames, theme.large, !avatar), _classnames), className);
 
diff --git a/lib/checkbox/Check.js b/lib/checkbox/Check.js
index 129450cb4..90041ec49 100644
--- a/lib/checkbox/Check.js
+++ b/lib/checkbox/Check.js
@@ -18,11 +18,11 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 var factory = function factory(ripple) {
   var Check = function Check(_ref) {
-    var checked = _ref.checked;
-    var children = _ref.children;
-    var onMouseDown = _ref.onMouseDown;
-    var theme = _ref.theme;
-    var style = _ref.style;
+    var checked = _ref.checked,
+        children = _ref.children,
+        onMouseDown = _ref.onMouseDown,
+        theme = _ref.theme,
+        style = _ref.style;
     return _react2.default.createElement(
       'div',
       {
diff --git a/lib/checkbox/Checkbox.js b/lib/checkbox/Checkbox.js
index 136f82e8b..97c7320e9 100644
--- a/lib/checkbox/Checkbox.js
+++ b/lib/checkbox/Checkbox.js
@@ -77,12 +77,11 @@ var factory = function factory(Check) {
     }, {
       key: 'render',
       value: function render() {
-        var _props = this.props;
-        var onChange = _props.onChange;
-        var theme = _props.theme;
-        var style = _props.style;
-
-        var others = _objectWithoutProperties(_props, ['onChange', 'theme', 'style']); //eslint-disable-line no-unused-vars
+        var _props = this.props,
+            onChange = _props.onChange,
+            theme = _props.theme,
+            style = _props.style,
+            others = _objectWithoutProperties(_props, ['onChange', 'theme', 'style']); //eslint-disable-line no-unused-vars
 
 
         var className = (0, _classnames3.default)(theme.field, _defineProperty({}, theme.disabled, this.props.disabled), this.props.className);
diff --git a/lib/chip/Chip.js b/lib/chip/Chip.js
index a463c501b..3c4d947bb 100644
--- a/lib/chip/Chip.js
+++ b/lib/chip/Chip.js
@@ -33,13 +33,12 @@ var factory = function factory(Avatar) {
   var Chip = function Chip(_ref) {
     var _classnames;
 
-    var children = _ref.children;
-    var className = _ref.className;
-    var deletable = _ref.deletable;
-    var onDeleteClick = _ref.onDeleteClick;
-    var theme = _ref.theme;
-
-    var other = _objectWithoutProperties(_ref, ['children', 'className', 'deletable', 'onDeleteClick', 'theme']);
+    var children = _ref.children,
+        className = _ref.className,
+        deletable = _ref.deletable,
+        onDeleteClick = _ref.onDeleteClick,
+        theme = _ref.theme,
+        other = _objectWithoutProperties(_ref, ['children', 'className', 'deletable', 'onDeleteClick', 'theme']);
 
     var hasAvatar = false;
     if (_react2.default.Children.count(children)) {
diff --git a/lib/date_picker/DatePicker.js b/lib/date_picker/DatePicker.js
index 2d12d8a82..c5bb1ff10 100644
--- a/lib/date_picker/DatePicker.js
+++ b/lib/date_picker/DatePicker.js
@@ -115,24 +115,23 @@ var factory = function factory(Input, DatePickerDialog) {
     }, {
       key: 'render',
       value: function render() {
-        var _props = this.props;
-        var active = _props.active;
-        var onDismiss = _props.onDismiss;
-        var autoOk = _props.autoOk;
-        var cancelLabel = _props.cancelLabel;
-        var inputClassName = _props.inputClassName;
-        var inputFormat = _props.inputFormat;
-        var locale = _props.locale;
-        var maxDate = _props.maxDate;
-        var minDate = _props.minDate;
-        var okLabel = _props.okLabel;
-        var onEscKeyDown = _props.onEscKeyDown;
-        var onOverlayClick = _props.onOverlayClick;
-        var readonly = _props.readonly;
-        var sundayFirstDayOfWeek = _props.sundayFirstDayOfWeek;
-        var value = _props.value;
-
-        var others = _objectWithoutProperties(_props, ['active', 'onDismiss', 'autoOk', 'cancelLabel', 'inputClassName', 'inputFormat', 'locale', 'maxDate', 'minDate', 'okLabel', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'sundayFirstDayOfWeek', 'value']);
+        var _props = this.props,
+            active = _props.active,
+            onDismiss = _props.onDismiss,
+            autoOk = _props.autoOk,
+            cancelLabel = _props.cancelLabel,
+            inputClassName = _props.inputClassName,
+            inputFormat = _props.inputFormat,
+            locale = _props.locale,
+            maxDate = _props.maxDate,
+            minDate = _props.minDate,
+            okLabel = _props.okLabel,
+            onEscKeyDown = _props.onEscKeyDown,
+            onOverlayClick = _props.onOverlayClick,
+            readonly = _props.readonly,
+            sundayFirstDayOfWeek = _props.sundayFirstDayOfWeek,
+            value = _props.value,
+            others = _objectWithoutProperties(_props, ['active', 'onDismiss', 'autoOk', 'cancelLabel', 'inputClassName', 'inputFormat', 'locale', 'maxDate', 'minDate', 'okLabel', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'sundayFirstDayOfWeek', 'value']);
 
         var finalInputFormat = inputFormat || _time2.default.formatDate;
         var date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined;
diff --git a/lib/drawer/Drawer.js b/lib/drawer/Drawer.js
index cc101cc5a..608253e8e 100644
--- a/lib/drawer/Drawer.js
+++ b/lib/drawer/Drawer.js
@@ -31,12 +31,12 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 var factory = function factory(Overlay) {
   var Drawer = function Drawer(_ref) {
-    var active = _ref.active;
-    var children = _ref.children;
-    var className = _ref.className;
-    var onOverlayClick = _ref.onOverlayClick;
-    var theme = _ref.theme;
-    var type = _ref.type;
+    var active = _ref.active,
+        children = _ref.children,
+        className = _ref.className,
+        onOverlayClick = _ref.onOverlayClick,
+        theme = _ref.theme,
+        type = _ref.type;
 
     var _className = (0, _classnames3.default)([theme.drawer, theme[type]], _defineProperty({}, theme.active, active), className);
 
diff --git a/lib/dropdown/Dropdown.js b/lib/dropdown/Dropdown.js
index 431cf7df4..df4b6afa5 100644
--- a/lib/dropdown/Dropdown.js
+++ b/lib/dropdown/Dropdown.js
@@ -189,15 +189,14 @@ var factory = function factory(Input) {
       value: function render() {
         var _classnames2;
 
-        var _props = this.props;
-        var template = _props.template;
-        var theme = _props.theme;
-        var source = _props.source;
-        var allowBlank = _props.allowBlank;
-        var auto = _props.auto;
-        var required = _props.required;
-
-        var others = _objectWithoutProperties(_props, ['template', 'theme', 'source', 'allowBlank', 'auto', 'required']); //eslint-disable-line no-unused-vars
+        var _props = this.props,
+            template = _props.template,
+            theme = _props.theme,
+            source = _props.source,
+            allowBlank = _props.allowBlank,
+            auto = _props.auto,
+            required = _props.required,
+            others = _objectWithoutProperties(_props, ['template', 'theme', 'source', 'allowBlank', 'auto', 'required']); //eslint-disable-line no-unused-vars
 
 
         var selected = this.getSelectedItem();
diff --git a/lib/font_icon/FontIcon.js b/lib/font_icon/FontIcon.js
index aa6b71420..5438cac44 100644
--- a/lib/font_icon/FontIcon.js
+++ b/lib/font_icon/FontIcon.js
@@ -20,11 +20,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
 var FontIcon = function FontIcon(_ref) {
-  var children = _ref.children;
-  var className = _ref.className;
-  var value = _ref.value;
-
-  var other = _objectWithoutProperties(_ref, ['children', 'className', 'value']);
+  var children = _ref.children,
+      className = _ref.className,
+      value = _ref.value,
+      other = _objectWithoutProperties(_ref, ['children', 'className', 'value']);
 
   return _react2.default.createElement(
     'span',
diff --git a/lib/hoc/ActivableRenderer.js b/lib/hoc/ActivableRenderer.js
index b43301a5c..d5218ef58 100644
--- a/lib/hoc/ActivableRenderer.js
+++ b/lib/hoc/ActivableRenderer.js
@@ -80,15 +80,14 @@ var ActivableRendererFactory = function ActivableRendererFactory() {
       }, {
         key: 'render',
         value: function render() {
-          var _props = this.props;
-          var delay = _props.delay;
+          var _props = this.props,
+              delay = _props.delay,
+              others = _objectWithoutProperties(_props, ['delay']); // eslint-disable-line no-unused-vars
 
-          var others = _objectWithoutProperties(_props, ['delay']); // eslint-disable-line no-unused-vars
 
-
-          var _state = this.state;
-          var active = _state.active;
-          var rendered = _state.rendered;
+          var _state = this.state,
+              active = _state.active,
+              rendered = _state.rendered;
 
           return rendered ? _react2.default.createElement(ActivableComponent, _extends({}, others, { active: active })) : null;
         }
diff --git a/lib/input/Input.js b/lib/input/Input.js
index 917097e5d..ae958f05b 100644
--- a/lib/input/Input.js
+++ b/lib/input/Input.js
@@ -55,10 +55,10 @@ var factory = function factory(FontIcon) {
       }
 
       return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Input.__proto__ || Object.getPrototypeOf(Input)).call.apply(_ref, [this].concat(args))), _this), _this.handleChange = function (event) {
-        var _this$props = _this.props;
-        var onChange = _this$props.onChange;
-        var multiline = _this$props.multiline;
-        var maxLength = _this$props.maxLength;
+        var _this$props = _this.props,
+            onChange = _this$props.onChange,
+            multiline = _this$props.multiline,
+            maxLength = _this$props.maxLength;
 
         var valueFromEvent = event.target.value;
 
@@ -88,10 +88,10 @@ var factory = function factory(FontIcon) {
       }, _this.handleKeyPress = function (event) {
         // prevent insertion of more characters if we're a multiline input
         // and maxLength exists
-        var _this$props2 = _this.props;
-        var multiline = _this$props2.multiline;
-        var maxLength = _this$props2.maxLength;
-        var onKeyPress = _this$props2.onKeyPress;
+        var _this$props2 = _this.props,
+            multiline = _this$props2.multiline,
+            maxLength = _this$props2.maxLength,
+            onKeyPress = _this$props2.onKeyPress;
 
         if (multiline && maxLength) {
           // check if smt is selected, in which case the newly added charcter would
@@ -154,26 +154,25 @@ var factory = function factory(FontIcon) {
       value: function render() {
         var _classnames2;
 
-        var _props = this.props;
-        var children = _props.children;
-        var disabled = _props.disabled;
-        var error = _props.error;
-        var floating = _props.floating;
-        var hint = _props.hint;
-        var icon = _props.icon;
-        var name = _props.name;
-        var labelText = _props.label;
-        var maxLength = _props.maxLength;
-        var multiline = _props.multiline;
-        var required = _props.required;
-        var theme = _props.theme;
-        var type = _props.type;
-        var value = _props.value;
-        var onKeyPress = _props.onKeyPress;
-        var _props$rows = _props.rows;
-        var rows = _props$rows === undefined ? 1 : _props$rows;
-
-        var others = _objectWithoutProperties(_props, ['children', 'disabled', 'error', 'floating', 'hint', 'icon', 'name', 'label', 'maxLength', 'multiline', 'required', 'theme', 'type', 'value', 'onKeyPress', 'rows']);
+        var _props = this.props,
+            children = _props.children,
+            disabled = _props.disabled,
+            error = _props.error,
+            floating = _props.floating,
+            hint = _props.hint,
+            icon = _props.icon,
+            name = _props.name,
+            labelText = _props.label,
+            maxLength = _props.maxLength,
+            multiline = _props.multiline,
+            required = _props.required,
+            theme = _props.theme,
+            type = _props.type,
+            value = _props.value,
+            onKeyPress = _props.onKeyPress,
+            _props$rows = _props.rows,
+            rows = _props$rows === undefined ? 1 : _props$rows,
+            others = _objectWithoutProperties(_props, ['children', 'disabled', 'error', 'floating', 'hint', 'icon', 'name', 'label', 'maxLength', 'multiline', 'required', 'theme', 'type', 'value', 'onKeyPress', 'rows']);
 
         var length = maxLength && value ? value.length : 0;
         var labelClassName = (0, _classnames5.default)(theme.label, _defineProperty({}, theme.fixed, !floating));
diff --git a/lib/layout/Layout.js b/lib/layout/Layout.js
index a4af0244a..09a844bca 100644
--- a/lib/layout/Layout.js
+++ b/lib/layout/Layout.js
@@ -20,9 +20,9 @@ var _identifiers = require('../identifiers.js');
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var Layout = function Layout(_ref) {
-  var className = _ref.className;
-  var children = _ref.children;
-  var theme = _ref.theme;
+  var className = _ref.className,
+      children = _ref.children,
+      theme = _ref.theme;
   return _react2.default.createElement(
     'div',
     { 'data-react-toolbox': 'layout', className: (0, _classnames2.default)(theme.layout, className) },
diff --git a/lib/layout/NavDrawer.js b/lib/layout/NavDrawer.js
index 94c28c6ff..01ef80265 100644
--- a/lib/layout/NavDrawer.js
+++ b/lib/layout/NavDrawer.js
@@ -24,15 +24,15 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var NavDrawer = function NavDrawer(_ref) {
   var _classnames;
 
-  var active = _ref.active;
-  var children = _ref.children;
-  var className = _ref.className;
-  var onOverlayClick = _ref.onOverlayClick;
-  var permanentAt = _ref.permanentAt;
-  var pinned = _ref.pinned;
-  var scrollY = _ref.scrollY;
-  var theme = _ref.theme;
-  var width = _ref.width;
+  var active = _ref.active,
+      children = _ref.children,
+      className = _ref.className,
+      onOverlayClick = _ref.onOverlayClick,
+      permanentAt = _ref.permanentAt,
+      pinned = _ref.pinned,
+      scrollY = _ref.scrollY,
+      theme = _ref.theme,
+      width = _ref.width;
 
   var rootClasses = (0, _classnames4.default)([theme.navDrawer], (_classnames = {}, _defineProperty(_classnames, theme[permanentAt + 'Permanent'], permanentAt), _defineProperty(_classnames, theme.wide, width === 'wide'), _defineProperty(_classnames, theme.active, active), _defineProperty(_classnames, theme.pinned, pinned), _classnames), className);
 
diff --git a/lib/layout/Panel.js b/lib/layout/Panel.js
index e684b1d11..23a00d527 100644
--- a/lib/layout/Panel.js
+++ b/lib/layout/Panel.js
@@ -22,11 +22,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 var Panel = function Panel(_ref) {
-  var children = _ref.children;
-  var className = _ref.className;
-  var onScroll = _ref.onScroll;
-  var scrollY = _ref.scrollY;
-  var theme = _ref.theme;
+  var children = _ref.children,
+      className = _ref.className,
+      onScroll = _ref.onScroll,
+      scrollY = _ref.scrollY,
+      theme = _ref.theme;
 
   var _className = (0, _classnames3.default)(theme.panel, _defineProperty({}, theme.scrollY, scrollY), className);
 
diff --git a/lib/layout/Sidebar.js b/lib/layout/Sidebar.js
index 13e171218..d1c5a2513 100644
--- a/lib/layout/Sidebar.js
+++ b/lib/layout/Sidebar.js
@@ -22,12 +22,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 var Sidebar = function Sidebar(_ref) {
-  var children = _ref.children;
-  var className = _ref.className;
-  var pinned = _ref.pinned;
-  var scrollY = _ref.scrollY;
-  var theme = _ref.theme;
-  var width = _ref.width;
+  var children = _ref.children,
+      className = _ref.className,
+      pinned = _ref.pinned,
+      scrollY = _ref.scrollY,
+      theme = _ref.theme,
+      width = _ref.width;
 
   var wrapperClasses = (0, _classnames4.default)(theme.sidebar, theme['width-' + width], _defineProperty({}, theme.pinned, pinned), className);
 
diff --git a/lib/link/Link.js b/lib/link/Link.js
index 8a6f4b738..9fbe6ab27 100644
--- a/lib/link/Link.js
+++ b/lib/link/Link.js
@@ -30,15 +30,14 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
 var Link = function Link(_ref) {
-  var active = _ref.active;
-  var children = _ref.children;
-  var className = _ref.className;
-  var count = _ref.count;
-  var icon = _ref.icon;
-  var label = _ref.label;
-  var theme = _ref.theme;
-
-  var others = _objectWithoutProperties(_ref, ['active', 'children', 'className', 'count', 'icon', 'label', 'theme']);
+  var active = _ref.active,
+      children = _ref.children,
+      className = _ref.className,
+      count = _ref.count,
+      icon = _ref.icon,
+      label = _ref.label,
+      theme = _ref.theme,
+      others = _objectWithoutProperties(_ref, ['active', 'children', 'className', 'count', 'icon', 'label', 'theme']);
 
   var _className = (0, _classnames3.default)(theme.link, _defineProperty({}, theme.active, active), className);
 
diff --git a/lib/list/ListCheckbox.js b/lib/list/ListCheckbox.js
index ca8a5f287..6ce2097b7 100644
--- a/lib/list/ListCheckbox.js
+++ b/lib/list/ListCheckbox.js
@@ -31,16 +31,16 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 var factory = function factory(Checkbox, ListItemContent) {
   var ListCheckbox = function ListCheckbox(_ref) {
-    var caption = _ref.caption;
-    var checked = _ref.checked;
-    var className = _ref.className;
-    var disabled = _ref.disabled;
-    var legend = _ref.legend;
-    var name = _ref.name;
-    var onBlur = _ref.onBlur;
-    var onChange = _ref.onChange;
-    var onFocus = _ref.onFocus;
-    var theme = _ref.theme;
+    var caption = _ref.caption,
+        checked = _ref.checked,
+        className = _ref.className,
+        disabled = _ref.disabled,
+        legend = _ref.legend,
+        name = _ref.name,
+        onBlur = _ref.onBlur,
+        onChange = _ref.onChange,
+        onFocus = _ref.onFocus,
+        theme = _ref.theme;
 
     var _className = (0, _classnames3.default)(theme.item, theme.checkboxItem, _defineProperty({}, theme.disabled, disabled), className);
 
diff --git a/lib/list/ListDivider.js b/lib/list/ListDivider.js
index b9f71c064..4f2a1d143 100644
--- a/lib/list/ListDivider.js
+++ b/lib/list/ListDivider.js
@@ -16,8 +16,8 @@ var _identifiers = require('../identifiers.js');
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var ListDivider = function ListDivider(_ref) {
-  var inset = _ref.inset;
-  var theme = _ref.theme;
+  var inset = _ref.inset,
+      theme = _ref.theme;
   return _react2.default.createElement('hr', { className: inset ? theme.divider + ' ' + theme.inset : theme.divider });
 };
 
diff --git a/lib/list/ListItem.js b/lib/list/ListItem.js
index 3358acddb..5f8f58b72 100644
--- a/lib/list/ListItem.js
+++ b/lib/list/ListItem.js
@@ -75,10 +75,9 @@ var factory = function factory(ripple, ListItemLayout, ListItemContent) {
             return;
           }
 
-          var _child$props = child.props;
-          var listItemIgnore = _child$props.listItemIgnore;
-
-          var rest = _objectWithoutProperties(_child$props, ['listItemIgnore']);
+          var _child$props = child.props,
+              listItemIgnore = _child$props.listItemIgnore,
+              rest = _objectWithoutProperties(_child$props, ['listItemIgnore']);
 
           var strippedChild = _extends({}, child, { props: rest });
 
@@ -99,16 +98,15 @@ var factory = function factory(ripple, ListItemLayout, ListItemContent) {
     }, {
       key: 'render',
       value: function render() {
-        var _props = this.props;
-        var className = _props.className;
-        var onMouseDown = _props.onMouseDown;
-        var onTouchStart = _props.onTouchStart;
-        var to = _props.to;
-        var onClick = _props.onClick;
-        var hasRipple = _props.ripple;
-        var theme = _props.theme;
-
-        var other = _objectWithoutProperties(_props, ['className', 'onMouseDown', 'onTouchStart', 'to', 'onClick', 'ripple', 'theme']); //eslint-disable-line no-unused-vars
+        var _props = this.props,
+            className = _props.className,
+            onMouseDown = _props.onMouseDown,
+            onTouchStart = _props.onTouchStart,
+            to = _props.to,
+            onClick = _props.onClick,
+            hasRipple = _props.ripple,
+            theme = _props.theme,
+            other = _objectWithoutProperties(_props, ['className', 'onMouseDown', 'onTouchStart', 'to', 'onClick', 'ripple', 'theme']); //eslint-disable-line no-unused-vars
 
 
         var children = this.groupChildren();
diff --git a/lib/list/ListItemAction.js b/lib/list/ListItemAction.js
index 66e6532da..a2e40dd83 100644
--- a/lib/list/ListItemAction.js
+++ b/lib/list/ListItemAction.js
@@ -16,11 +16,11 @@ var _identifiers = require('../identifiers.js');
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var ListItemAction = function ListItemAction(_ref) {
-  var action = _ref.action;
-  var theme = _ref.theme;
-  var _action$props = action.props;
-  var onClick = _action$props.onClick;
-  var onMouseDown = _action$props.onMouseDown;
+  var action = _ref.action,
+      theme = _ref.theme;
+  var _action$props = action.props,
+      onClick = _action$props.onClick,
+      onMouseDown = _action$props.onMouseDown;
 
   var stopRipple = onClick && !onMouseDown;
   var stop = function stop(e) {
diff --git a/lib/list/ListItemActions.js b/lib/list/ListItemActions.js
index 309d28734..d19790595 100644
--- a/lib/list/ListItemActions.js
+++ b/lib/list/ListItemActions.js
@@ -21,9 +21,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var factory = function factory(ListItemAction) {
   var ListItemActions = function ListItemActions(_ref) {
-    var type = _ref.type;
-    var children = _ref.children;
-    var theme = _ref.theme;
+    var type = _ref.type,
+        children = _ref.children,
+        theme = _ref.theme;
 
     var validChildren = _react2.default.Children.toArray(children).filter(function (c) {
       return _react2.default.isValidElement(c);
diff --git a/lib/list/ListItemContent.js b/lib/list/ListItemContent.js
index e8296af05..6f51077e2 100644
--- a/lib/list/ListItemContent.js
+++ b/lib/list/ListItemContent.js
@@ -48,11 +48,11 @@ var factory = function factory(ListItemText) {
     _createClass(ListItemContent, [{
       key: 'getType',
       value: function getType() {
-        var _props = this.props;
-        var type = _props.type;
-        var children = _props.children;
-        var caption = _props.caption;
-        var legend = _props.legend;
+        var _props = this.props,
+            type = _props.type,
+            children = _props.children,
+            caption = _props.caption,
+            legend = _props.legend;
 
 
         var count = _react2.default.Children.count(children);
@@ -66,11 +66,11 @@ var factory = function factory(ListItemText) {
     }, {
       key: 'render',
       value: function render() {
-        var _props2 = this.props;
-        var children = _props2.children;
-        var caption = _props2.caption;
-        var legend = _props2.legend;
-        var theme = _props2.theme;
+        var _props2 = this.props,
+            children = _props2.children,
+            caption = _props2.caption,
+            legend = _props2.legend,
+            theme = _props2.theme;
 
         var className = (0, _classnames3.default)(theme.itemContentRoot, _defineProperty({}, theme[this.getType()], theme[this.getType()]));
 
diff --git a/lib/list/ListItemText.js b/lib/list/ListItemText.js
index 278fc2e99..8778f3144 100644
--- a/lib/list/ListItemText.js
+++ b/lib/list/ListItemText.js
@@ -26,12 +26,11 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
 var ListItemText = function ListItemText(_ref) {
-  var className = _ref.className;
-  var primary = _ref.primary;
-  var children = _ref.children;
-  var theme = _ref.theme;
-
-  var other = _objectWithoutProperties(_ref, ['className', 'primary', 'children', 'theme']);
+  var className = _ref.className,
+      primary = _ref.primary,
+      children = _ref.children,
+      theme = _ref.theme,
+      other = _objectWithoutProperties(_ref, ['className', 'primary', 'children', 'theme']);
 
   var _className = (0, _classnames3.default)(theme.itemText, _defineProperty({}, theme.primary, primary), className);
   return _react2.default.createElement(
diff --git a/lib/list/ListSubHeader.js b/lib/list/ListSubHeader.js
index a0a96355b..4e04c694b 100644
--- a/lib/list/ListSubHeader.js
+++ b/lib/list/ListSubHeader.js
@@ -20,9 +20,9 @@ var _identifiers = require('../identifiers.js');
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var ListSubHeader = function ListSubHeader(_ref) {
-  var caption = _ref.caption;
-  var className = _ref.className;
-  var theme = _ref.theme;
+  var caption = _ref.caption,
+      className = _ref.className,
+      theme = _ref.theme;
   return _react2.default.createElement(
     'h5',
     { className: (0, _classnames2.default)(theme.subheader, className) },
diff --git a/lib/menu/Menu.js b/lib/menu/Menu.js
index fb8199dc2..9c7017c31 100644
--- a/lib/menu/Menu.js
+++ b/lib/menu/Menu.js
@@ -71,9 +71,9 @@ var factory = function factory(MenuItem) {
           _this.setState({ active: false, rippled: false });
         }
       }, _this.handleSelect = function (item, event) {
-        var _item$props = item.props;
-        var value = _item$props.value;
-        var onClick = _item$props.onClick;
+        var _item$props = item.props,
+            value = _item$props.value,
+            onClick = _item$props.onClick;
 
         if (onClick) event.persist();
         _this.setState({ active: false, rippled: _this.props.ripple }, function () {
@@ -89,10 +89,9 @@ var factory = function factory(MenuItem) {
         var _this2 = this;
 
         this.positionTimeoutHandle = setTimeout(function () {
-          var _refs$menu$getBoundin = _this2.refs.menu.getBoundingClientRect();
-
-          var width = _refs$menu$getBoundin.width;
-          var height = _refs$menu$getBoundin.height;
+          var _refs$menu$getBoundin = _this2.refs.menu.getBoundingClientRect(),
+              width = _refs$menu$getBoundin.width,
+              height = _refs$menu$getBoundin.height;
 
           var position = _this2.props.position === POSITION.AUTO ? _this2.calculatePosition() : _this2.props.position;
           _this2.setState({ position: position, width: width, height: height });
@@ -179,17 +178,15 @@ var factory = function factory(MenuItem) {
         var parentNode = _reactDom2.default.findDOMNode(this).parentNode;
         if (!parentNode) return;
 
-        var _parentNode$getBoundi = parentNode.getBoundingClientRect();
-
-        var top = _parentNode$getBoundi.top;
-        var left = _parentNode$getBoundi.left;
-        var height = _parentNode$getBoundi.height;
-        var width = _parentNode$getBoundi.width;
+        var _parentNode$getBoundi = parentNode.getBoundingClientRect(),
+            top = _parentNode$getBoundi.top,
+            left = _parentNode$getBoundi.left,
+            height = _parentNode$getBoundi.height,
+            width = _parentNode$getBoundi.width;
 
-        var _utils$getViewport = _utils.utils.getViewport();
-
-        var wh = _utils$getViewport.height;
-        var ww = _utils$getViewport.width;
+        var _utils$getViewport = _utils.utils.getViewport(),
+            wh = _utils$getViewport.height,
+            ww = _utils$getViewport.width;
 
         var toTop = top < wh / 2 - height / 2;
         var toLeft = left < ww / 2 - width / 2;
@@ -198,10 +195,10 @@ var factory = function factory(MenuItem) {
     }, {
       key: 'getMenuStyle',
       value: function getMenuStyle() {
-        var _state = this.state;
-        var width = _state.width;
-        var height = _state.height;
-        var position = _state.position;
+        var _state = this.state,
+            width = _state.width,
+            height = _state.height,
+            position = _state.position;
 
         if (position !== POSITION.STATIC) {
           if (this.state.active) {
@@ -245,10 +242,9 @@ var factory = function factory(MenuItem) {
     }, {
       key: 'show',
       value: function show() {
-        var _refs$menu$getBoundin2 = this.refs.menu.getBoundingClientRect();
-
-        var width = _refs$menu$getBoundin2.width;
-        var height = _refs$menu$getBoundin2.height;
+        var _refs$menu$getBoundin2 = this.refs.menu.getBoundingClientRect(),
+            width = _refs$menu$getBoundin2.width,
+            height = _refs$menu$getBoundin2.height;
 
         this.setState({ active: true, width: width, height: height });
       }
diff --git a/lib/menu/MenuItem.js b/lib/menu/MenuItem.js
index 2670f4325..d854db0e2 100644
--- a/lib/menu/MenuItem.js
+++ b/lib/menu/MenuItem.js
@@ -68,16 +68,15 @@ var factory = function factory(ripple) {
       value: function render() {
         var _classnames;
 
-        var _props = this.props;
-        var icon = _props.icon;
-        var caption = _props.caption;
-        var children = _props.children;
-        var shortcut = _props.shortcut;
-        var selected = _props.selected;
-        var disabled = _props.disabled;
-        var theme = _props.theme;
-
-        var others = _objectWithoutProperties(_props, ['icon', 'caption', 'children', 'shortcut', 'selected', 'disabled', 'theme']);
+        var _props = this.props,
+            icon = _props.icon,
+            caption = _props.caption,
+            children = _props.children,
+            shortcut = _props.shortcut,
+            selected = _props.selected,
+            disabled = _props.disabled,
+            theme = _props.theme,
+            others = _objectWithoutProperties(_props, ['icon', 'caption', 'children', 'shortcut', 'selected', 'disabled', 'theme']);
 
         var className = (0, _classnames3.default)(theme.menuItem, (_classnames = {}, _defineProperty(_classnames, theme.selected, selected), _defineProperty(_classnames, theme.disabled, disabled), _classnames), this.props.className);
 
diff --git a/lib/navigation/Navigation.js b/lib/navigation/Navigation.js
index ec9e44f58..8d8876ffe 100644
--- a/lib/navigation/Navigation.js
+++ b/lib/navigation/Navigation.js
@@ -31,12 +31,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var factory = function factory(Button, Link) {
   var Navigation = function Navigation(_ref) {
-    var actions = _ref.actions;
-    var children = _ref.children;
-    var className = _ref.className;
-    var routes = _ref.routes;
-    var theme = _ref.theme;
-    var type = _ref.type;
+    var actions = _ref.actions,
+        children = _ref.children,
+        className = _ref.className,
+        routes = _ref.routes,
+        theme = _ref.theme,
+        type = _ref.type;
 
     var _className = (0, _classnames2.default)(theme[type], className);
     var buttons = actions.map(function (action, index) {
diff --git a/lib/overlay/Overlay.js b/lib/overlay/Overlay.js
index f5662715b..5f189bf77 100644
--- a/lib/overlay/Overlay.js
+++ b/lib/overlay/Overlay.js
@@ -37,16 +37,28 @@ var Overlay = function (_Component) {
   _inherits(Overlay, _Component);
 
   function Overlay() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
     _classCallCheck(this, Overlay);
 
-    return _possibleConstructorReturn(this, (Overlay.__proto__ || Object.getPrototypeOf(Overlay)).apply(this, arguments));
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Overlay.__proto__ || Object.getPrototypeOf(Overlay)).call.apply(_ref, [this].concat(args))), _this), _this.handleEscKey = function (e) {
+      if (_this.props.active && _this.props.onEscKeyDown && e.which === 27) {
+        _this.props.onEscKeyDown(e);
+      }
+    }, _temp), _possibleConstructorReturn(_this, _ret);
   }
 
   _createClass(Overlay, [{
     key: 'componentDidMount',
     value: function componentDidMount() {
       if (this.props.active) {
-        this.escKeyListener = document.body.addEventListener('keydown', this.handleEscKey.bind(this));
+        document.body.addEventListener('keydown', this.handleEscKey);
         document.body.style.overflow = 'hidden';
       }
     }
@@ -59,38 +71,28 @@ var Overlay = function (_Component) {
   }, {
     key: 'componentDidUpdate',
     value: function componentDidUpdate() {
-      if (this.props.active && !this.escKeyListener) {
-        this.escKeyListener = document.body.addEventListener('keydown', this.handleEscKey.bind(this));
+      if (this.props.active) {
+        document.body.addEventListener('keydown', this.handleEscKey);
       }
     }
   }, {
     key: 'componentWillUnmount',
     value: function componentWillUnmount() {
       if (!document.querySelectorAll('[data-react-toolbox="overlay"]')[1]) document.body.style.overflow = '';
-      if (this.escKeyListener) {
-        document.body.removeEventListener('keydown', this.handleEscKey);
-        this.escKeyListener = null;
-      }
-    }
-  }, {
-    key: 'handleEscKey',
-    value: function handleEscKey(e) {
-      if (this.props.active && this.props.onEscKeyDown && e.which === 27) {
-        this.props.onEscKeyDown(e);
-      }
+      document.body.removeEventListener('keydown', this.handleEscKey);
     }
   }, {
     key: 'render',
     value: function render() {
       var _classnames;
 
-      var _props = this.props;
-      var active = _props.active;
-      var className = _props.className;
-      var children = _props.children;
-      var invisible = _props.invisible;
-      var onClick = _props.onClick;
-      var theme = _props.theme;
+      var _props = this.props,
+          active = _props.active,
+          className = _props.className,
+          children = _props.children,
+          invisible = _props.invisible,
+          onClick = _props.onClick,
+          theme = _props.theme;
 
       var _className = (0, _classnames3.default)(theme.overlay, (_classnames = {}, _defineProperty(_classnames, theme.active, active), _defineProperty(_classnames, theme.invisible, invisible), _classnames), className);
 
diff --git a/lib/progress_bar/ProgressBar.js b/lib/progress_bar/ProgressBar.js
index 0063b753a..6e83348b7 100644
--- a/lib/progress_bar/ProgressBar.js
+++ b/lib/progress_bar/ProgressBar.js
@@ -80,10 +80,9 @@ var ProgressBar = function (_Component) {
   }, {
     key: 'renderLinear',
     value: function renderLinear() {
-      var _linearStyle = this.linearStyle();
-
-      var buffer = _linearStyle.buffer;
-      var value = _linearStyle.value;
+      var _linearStyle = this.linearStyle(),
+          buffer = _linearStyle.buffer,
+          value = _linearStyle.value;
 
       return _react2.default.createElement(
         'div',
@@ -97,16 +96,16 @@ var ProgressBar = function (_Component) {
     value: function render() {
       var _classnames;
 
-      var _props = this.props;
-      var className = _props.className;
-      var disabled = _props.disabled;
-      var max = _props.max;
-      var min = _props.min;
-      var mode = _props.mode;
-      var multicolor = _props.multicolor;
-      var type = _props.type;
-      var theme = _props.theme;
-      var value = _props.value;
+      var _props = this.props,
+          className = _props.className,
+          disabled = _props.disabled,
+          max = _props.max,
+          min = _props.min,
+          mode = _props.mode,
+          multicolor = _props.multicolor,
+          type = _props.type,
+          theme = _props.theme,
+          value = _props.value;
 
       var _className = (0, _classnames3.default)(theme[type], (_classnames = {}, _defineProperty(_classnames, theme[mode], mode), _defineProperty(_classnames, theme.multicolor, multicolor), _classnames), className);
 
diff --git a/lib/radio/Radio.js b/lib/radio/Radio.js
index 161c0b980..a3301d1c7 100644
--- a/lib/radio/Radio.js
+++ b/lib/radio/Radio.js
@@ -16,11 +16,10 @@ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in ob
 
 var factory = function factory(ripple) {
   var Radio = function Radio(_ref) {
-    var checked = _ref.checked;
-    var onMouseDown = _ref.onMouseDown;
-    var theme = _ref.theme;
-
-    var other = _objectWithoutProperties(_ref, ['checked', 'onMouseDown', 'theme']);
+    var checked = _ref.checked,
+        onMouseDown = _ref.onMouseDown,
+        theme = _ref.theme,
+        other = _objectWithoutProperties(_ref, ['checked', 'onMouseDown', 'theme']);
 
     return _react2.default.createElement('div', _extends({
       'data-react-toolbox': 'radio',
diff --git a/lib/radio/RadioButton.js b/lib/radio/RadioButton.js
index 71ee095a7..4f1d4724d 100644
--- a/lib/radio/RadioButton.js
+++ b/lib/radio/RadioButton.js
@@ -55,10 +55,10 @@ var factory = function factory(Radio) {
       }
 
       return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RadioButton.__proto__ || Object.getPrototypeOf(RadioButton)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
-        var _this$props = _this.props;
-        var checked = _this$props.checked;
-        var disabled = _this$props.disabled;
-        var onChange = _this$props.onChange;
+        var _this$props = _this.props,
+            checked = _this$props.checked,
+            disabled = _this$props.disabled,
+            onChange = _this$props.onChange;
 
         if (event.pageX !== 0 && event.pageY !== 0) _this.blur();
         if (!disabled && !checked && onChange) onChange(event, _this);
@@ -78,15 +78,14 @@ var factory = function factory(Radio) {
     }, {
       key: 'render',
       value: function render() {
-        var _props = this.props;
-        var className = _props.className;
-        var checked = _props.checked;
-        var disabled = _props.disabled;
-        var label = _props.label;
-        var theme = _props.theme;
-        var onChange = _props.onChange;
-
-        var others = _objectWithoutProperties(_props, ['className', 'checked', 'disabled', 'label', 'theme', 'onChange']); // eslint-disable-line
+        var _props = this.props,
+            className = _props.className,
+            checked = _props.checked,
+            disabled = _props.disabled,
+            label = _props.label,
+            theme = _props.theme,
+            onChange = _props.onChange,
+            others = _objectWithoutProperties(_props, ['className', 'checked', 'disabled', 'label', 'theme', 'onChange']); // eslint-disable-line
 
 
         var _className = (0, _classnames2.default)(theme[this.props.disabled ? 'disabled' : 'field'], className);
diff --git a/lib/ripple/NuRipple.js b/lib/ripple/NuRipple.js
new file mode 100644
index 000000000..45553b793
--- /dev/null
+++ b/lib/ripple/NuRipple.js
@@ -0,0 +1,407 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _templateObject = _taggedTemplateLiteral(['\n  bottom: 0;\n  left: 0;\n  pointer-events: none;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 1;\n'], ['\n  bottom: 0;\n  left: 0;\n  pointer-events: none;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 1;\n']),
+    _templateObject2 = _taggedTemplateLiteral(['\n  background-color: currentColor;\n  border-radius: 50%;\n  left: 50%;\n  pointer-events: none;\n  position: absolute;\n  top: 50%;\n  transform-origin: 50% 50%;\n  transition-duration: 800ms;\n  z-index: 100;\n  opacity: ', '\n  transition-property: ', ';\n'], ['\n  background-color: currentColor;\n  border-radius: 50%;\n  left: 50%;\n  pointer-events: none;\n  position: absolute;\n  top: 50%;\n  transform-origin: 50% 50%;\n  transition-duration: 800ms;\n  z-index: 100;\n  opacity: ', '\n  transition-property: ', ';\n']);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactDom = require('react-dom');
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
+var _immutabilityHelper = require('immutability-helper');
+
+var _immutabilityHelper2 = _interopRequireDefault(_immutabilityHelper);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _styledComponents = require('styled-components');
+
+var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+var _identifiers = require('../identifiers.js');
+
+var _events = require('../utils/events');
+
+var _events2 = _interopRequireDefault(_events);
+
+var _prefixer = require('../utils/prefixer');
+
+var _prefixer2 = _interopRequireDefault(_prefixer);
+
+var _utils = require('../utils/utils');
+
+var _utils2 = _interopRequireDefault(_utils);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var defaults = {
+  centered: false,
+  className: '',
+  multiple: true,
+  spread: 2,
+  theme: {}
+};
+
+var RippleWrapper = _styledComponents2.default.span(_templateObject);
+
+var RippleNode = _styledComponents2.default.span(_templateObject2, function (props) {
+  return props.restarting || props.active ? 0.3 : 0;
+}, function (props) {
+  return props.restarting ? 'none' : props.active ? 'transform' : 'opacity, transform';
+});
+
+var rippleFactory = function rippleFactory() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  var _defaults$options = _extends({}, defaults, options),
+      defaultCentered = _defaults$options.centered,
+      defaultClassName = _defaults$options.className,
+      defaultMultiple = _defaults$options.multiple,
+      defaultSpread = _defaults$options.spread,
+      defaultTheme = _defaults$options.theme,
+      props = _objectWithoutProperties(_defaults$options, ['centered', 'className', 'multiple', 'spread', 'theme']);
+
+  return function (ComposedComponent) {
+    var RippledComponent = function (_Component) {
+      _inherits(RippledComponent, _Component);
+
+      function RippledComponent() {
+        var _ref;
+
+        var _temp, _this, _ret;
+
+        _classCallCheck(this, RippledComponent);
+
+        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RippledComponent.__proto__ || Object.getPrototypeOf(RippledComponent)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+          ripples: {}
+        }, _this.ripples = [], _this.handleMouseDown = function (event) {
+          if (_this.props.onMouseDown) _this.props.onMouseDown(event);
+          if (!_this.props.disabled) {
+            var _events$getMousePosit = _events2.default.getMousePosition(event),
+                x = _events$getMousePosit.x,
+                y = _events$getMousePosit.y;
+
+            _this.animateRipple(x, y, false);
+          }
+        }, _this.handleTouchStart = function (event) {
+          if (_this.props.onTouchStart) _this.props.onTouchStart(event);
+          if (!_this.props.disabled) {
+            var _events$getTouchPosit = _events2.default.getTouchPosition(event),
+                x = _events$getTouchPosit.x,
+                y = _events$getTouchPosit.y;
+
+            _this.animateRipple(x, y, true);
+          }
+        }, _temp), _possibleConstructorReturn(_this, _ret);
+      }
+
+      _createClass(RippledComponent, [{
+        key: 'componentDidUpdate',
+        value: function componentDidUpdate(prevProps, prevState) {
+          // If a new ripple was just added, add a remove event listener to its animation
+          if (Object.keys(prevState.ripples).length < Object.keys(this.state.ripples).length) {
+            this.addRippleRemoveEventListener(this.getLastKey());
+          }
+        }
+      }, {
+        key: 'componentWillUnmount',
+        value: function componentWillUnmount() {
+          var _this2 = this;
+
+          // Remove document event listeners for ripple if they still exists
+          Object.keys(this.state.ripples).forEach(function (key) {
+            _this2.state.ripples[key].endRipple();
+          });
+        }
+      }, {
+        key: 'getRef',
+        value: function getRef(key) {
+          return this.ripples[key].refs.ripple;
+        }
+
+        /**
+         * Add an event listener to the reference with given key so when the animation transition
+         * ends we can be sure that it finished and it can be safely removed from the state.
+         * This function is called whenever a new ripple is added to the component.
+         *
+         * @param {String} rippleKey Is the key of the ripple to add the event.
+         */
+
+      }, {
+        key: 'addRippleRemoveEventListener',
+        value: function addRippleRemoveEventListener(rippleKey) {
+          var self = this;
+          _events2.default.addEventListenerOnTransitionEnded(this.getRef(rippleKey), function onOpacityEnd(e) {
+            if (e.propertyName === 'opacity') {
+              if (self.props.onRippleEnded) self.props.onRippleEnded(e);
+              _events2.default.removeEventListenerOnTransitionEnded(self.getRef(rippleKey), onOpacityEnd);
+              self.setState({ ripples: _utils2.default.removeObjectKey(rippleKey, self.state.ripples) });
+            }
+          });
+        }
+
+        /**
+         * Start a ripple animation on an specific point with touch or mouse events. First
+         * decides if the animation should trigger. If the ripple is multiple or there is no
+         * ripple present, it creates a new key. If it's a simple ripple and already exists,
+         * it just restarts the current ripple. The animation happens in two state changes
+         * to allow triggering via css.
+         *
+         * @param {Number} x Coordinate X on the screen where animation should start
+         * @param {Number} y Coordinate Y on the screen where animation should start
+         * @param {Boolean} isTouch Use events from touch or mouse.
+         */
+
+      }, {
+        key: 'animateRipple',
+        value: function animateRipple(x, y, isTouch) {
+          var _this3 = this;
+
+          if (this.rippleShouldTrigger(isTouch)) {
+            (function () {
+              var _getDescriptor = _this3.getDescriptor(x, y),
+                  top = _getDescriptor.top,
+                  left = _getDescriptor.left,
+                  width = _getDescriptor.width;
+
+              var noRipplesActive = Object.keys(_this3.state.ripples).length === 0;
+              var key = _this3.props.rippleMultiple || noRipplesActive ? _this3.getNextKey() : _this3.getLastKey();
+              var endRipple = _this3.addRippleDeactivateEventListener(isTouch, key);
+              var initialState = { active: false, restarting: true, top: top, left: left, width: width, endRipple: endRipple };
+              var runningState = { active: true, restarting: false };
+              _this3.setState((0, _immutabilityHelper2.default)(_this3.state, { ripples: _defineProperty({}, key, { $set: initialState }) }), function () {
+                _this3.getRef(key).offsetWidth; //eslint-disable-line no-unused-expressions
+                _this3.setState((0, _immutabilityHelper2.default)(_this3.state, { ripples: _defineProperty({}, key, { $merge: runningState }) }));
+              });
+            })();
+          }
+        }
+
+        /**
+         * Determine if a ripple should start depending if its a touch event. For mobile both
+         * touchStart and mouseDown are launched so in case is touch we should always trigger
+         * but if its not we should check if a touch was already triggered to decide.
+         *
+         * @param {Boolean} isTouch True in case a touch event triggered the ripple false otherwise.
+         * @return {Boolean} True in case the ripple should trigger or false if it shouldn't.
+         */
+
+      }, {
+        key: 'rippleShouldTrigger',
+        value: function rippleShouldTrigger(isTouch) {
+          var shouldStart = isTouch ? true : !this.touchCache;
+          this.touchCache = isTouch;
+          return shouldStart;
+        }
+
+        /**
+         * Find out a descriptor object for the ripple element being created depending on
+         * the position where the it was triggered and the component's dimensions.
+         *
+         * @param {Number} x Coordinate x in the viewport where ripple was triggered
+         * @param {Number} y Coordinate y in the viewport where ripple was triggered
+         * @return {Object} Descriptor element including position and size of the element
+         */
+
+      }, {
+        key: 'getDescriptor',
+        value: function getDescriptor(x, y) {
+          var _ReactDOM$findDOMNode = _reactDom2.default.findDOMNode(this).getBoundingClientRect(),
+              left = _ReactDOM$findDOMNode.left,
+              top = _ReactDOM$findDOMNode.top,
+              height = _ReactDOM$findDOMNode.height,
+              width = _ReactDOM$findDOMNode.width;
+
+          var _props = this.props,
+              centered = _props.rippleCentered,
+              spread = _props.rippleSpread;
+
+          return {
+            left: centered ? 0 : x - left - width / 2,
+            top: centered ? 0 : y - top - height / 2,
+            width: width * spread
+          };
+        }
+
+        /**
+         * Increments and internal counter and returns the next value as a string. It
+         * is used to assign key references to new ripple elements.
+         *
+         * @return {String} Key to be assigned to a ripple.
+         */
+
+      }, {
+        key: 'getNextKey',
+        value: function getNextKey() {
+          this.currentCount = this.currentCount ? this.currentCount + 1 : 1;
+          return 'ripple' + this.currentCount;
+        }
+
+        /**
+         * Return the last generated key for a ripple element. When there is only one ripple
+         * and to get the reference when a ripple was just created.
+         *
+         * @return {String} The last generated ripple key.
+         */
+
+      }, {
+        key: 'getLastKey',
+        value: function getLastKey() {
+          return 'ripple' + this.currentCount;
+        }
+
+        /**
+         * Add an event listener to the document needed to deactivate a ripple and make it dissappear.
+         * Deactivation can happen with a touchend or mouseup depending on the trigger type. The
+         * ending function is created from a factory function and returned.
+         *
+         * @param {Boolean} isTouch True in case the trigger was a touch event false otherwise.
+         * @param {String} rippleKey It's a key to identify the ripple that should be deactivated.
+         * @return {Function} Callback function that deactivates the ripple and removes the event listener
+         */
+
+      }, {
+        key: 'addRippleDeactivateEventListener',
+        value: function addRippleDeactivateEventListener(isTouch, rippleKey) {
+          var eventType = isTouch ? 'touchend' : 'mouseup';
+          var endRipple = this.createRippleDeactivateCallback(eventType, rippleKey);
+          document.addEventListener(eventType, endRipple);
+          return endRipple;
+        }
+
+        /**
+         * Generates a function that can be called to deactivate a given ripple and remove its finishing
+         * event listener. If is generated because we need to store it to be called on unmount in case
+         * the ripple is still running.
+         *
+         * @param {String} eventType Is the event type that can be touchend or mouseup
+         * @param {String} rippleKey Is the key representing the ripple
+         * @return {Function} Callback function that deactivates the ripple and removes the listener
+         */
+
+      }, {
+        key: 'createRippleDeactivateCallback',
+        value: function createRippleDeactivateCallback(eventType, rippleKey) {
+          var self = this;
+          return function endRipple() {
+            document.removeEventListener(eventType, endRipple);
+            self.setState({ ripples: (0, _immutabilityHelper2.default)(self.state.ripples, _defineProperty({}, rippleKey, { $merge: { active: false } })) });
+          };
+        }
+      }, {
+        key: 'renderRipple',
+        value: function renderRipple(key, className, _ref2) {
+          var _this4 = this;
+
+          var active = _ref2.active,
+              left = _ref2.left,
+              restarting = _ref2.restarting,
+              top = _ref2.top,
+              width = _ref2.width;
+
+          var scale = restarting ? 0 : 1;
+          var transform = 'translate3d(' + (-width / 2 + left) + 'px, ' + (-width / 2 + top) + 'px, 0) scale(' + scale + ')';
+          return _react2.default.createElement(
+            RippleWrapper,
+            _extends({ key: key }, props),
+            _react2.default.createElement(RippleNode, {
+              active: active,
+              innerRef: 'ripple',
+              ref: function ref(node) {
+                _this4.ripples[key] = node;
+              },
+              restarting: restarting,
+              style: (0, _prefixer2.default)({ transform: transform }, { width: width, height: width })
+            })
+          );
+        }
+      }, {
+        key: 'render',
+        value: function render() {
+          var _this5 = this;
+
+          var ripples = this.state.ripples;
+
+          var _props2 = this.props,
+              onRippleEnded = _props2.onRippleEnded,
+              rippleCentered = _props2.rippleCentered,
+              rippleMultiple = _props2.rippleMultiple,
+              rippleSpread = _props2.rippleSpread,
+              children = _props2.children,
+              ripple = _props2.ripple,
+              rippleClassName = _props2.rippleClassName,
+              other = _objectWithoutProperties(_props2, ['onRippleEnded', 'rippleCentered', 'rippleMultiple', 'rippleSpread', 'children', 'ripple', 'rippleClassName']);
+
+          if (!ripple) return _react2.default.createElement(ComposedComponent, _extends({ children: children }, other));
+          return _react2.default.createElement(
+            ComposedComponent,
+            _extends({}, other, { onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart }),
+            children,
+            Object.keys(ripples).map(function (key) {
+              return _this5.renderRipple(key, rippleClassName, ripples[key]);
+            })
+          );
+        }
+      }]);
+
+      return RippledComponent;
+    }(_react.Component);
+
+    RippledComponent.propTypes = {
+      children: _react.PropTypes.any,
+      disabled: _react.PropTypes.bool,
+      onRippleEnded: _react.PropTypes.func,
+      ripple: _react.PropTypes.bool,
+      rippleCentered: _react.PropTypes.bool,
+      rippleClassName: _react.PropTypes.string,
+      rippleMultiple: _react.PropTypes.bool,
+      rippleSpread: _react.PropTypes.number,
+      theme: _react.PropTypes.shape({
+        ripple: _react.PropTypes.string,
+        rippleActive: _react.PropTypes.string,
+        rippleRestarting: _react.PropTypes.string,
+        rippleWrapper: _react.PropTypes.string
+      })
+    };
+    RippledComponent.defaultProps = {
+      disabled: false,
+      ripple: true,
+      rippleCentered: defaultCentered,
+      rippleClassName: defaultClassName,
+      rippleMultiple: defaultMultiple,
+      rippleSpread: defaultSpread
+    };
+
+
+    return (0, _reactCssThemr.themr)(_identifiers.RIPPLE, defaultTheme)(RippledComponent);
+  };
+};
+
+exports.default = rippleFactory;
\ No newline at end of file
diff --git a/lib/ripple/Ripple.js b/lib/ripple/Ripple.js
index 79a0f35b9..b865cad0b 100644
--- a/lib/ripple/Ripple.js
+++ b/lib/ripple/Ripple.js
@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
@@ -63,15 +63,13 @@ var defaults = {
 var rippleFactory = function rippleFactory() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
-  var _defaults$options = _extends({}, defaults, options);
-
-  var defaultCentered = _defaults$options.centered;
-  var defaultClassName = _defaults$options.className;
-  var defaultMultiple = _defaults$options.multiple;
-  var defaultSpread = _defaults$options.spread;
-  var defaultTheme = _defaults$options.theme;
-
-  var props = _objectWithoutProperties(_defaults$options, ['centered', 'className', 'multiple', 'spread', 'theme']);
+  var _defaults$options = _extends({}, defaults, options),
+      defaultCentered = _defaults$options.centered,
+      defaultClassName = _defaults$options.className,
+      defaultMultiple = _defaults$options.multiple,
+      defaultSpread = _defaults$options.spread,
+      defaultTheme = _defaults$options.theme,
+      props = _objectWithoutProperties(_defaults$options, ['centered', 'className', 'multiple', 'spread', 'theme']);
 
   return function (ComposedComponent) {
     var RippledComponent = function (_Component) {
@@ -93,20 +91,18 @@ var rippleFactory = function rippleFactory() {
         }, _this.handleMouseDown = function (event) {
           if (_this.props.onMouseDown) _this.props.onMouseDown(event);
           if (!_this.props.disabled) {
-            var _events$getMousePosit = _events2.default.getMousePosition(event);
-
-            var x = _events$getMousePosit.x;
-            var y = _events$getMousePosit.y;
+            var _events$getMousePosit = _events2.default.getMousePosition(event),
+                x = _events$getMousePosit.x,
+                y = _events$getMousePosit.y;
 
             _this.animateRipple(x, y, false);
           }
         }, _this.handleTouchStart = function (event) {
           if (_this.props.onTouchStart) _this.props.onTouchStart(event);
           if (!_this.props.disabled) {
-            var _events$getTouchPosit = _events2.default.getTouchPosition(event);
-
-            var x = _events$getTouchPosit.x;
-            var y = _events$getTouchPosit.y;
+            var _events$getTouchPosit = _events2.default.getTouchPosition(event),
+                x = _events$getTouchPosit.x,
+                y = _events$getTouchPosit.y;
 
             _this.animateRipple(x, y, true);
           }
@@ -172,11 +168,10 @@ var rippleFactory = function rippleFactory() {
 
           if (this.rippleShouldTrigger(isTouch)) {
             (function () {
-              var _getDescriptor = _this3.getDescriptor(x, y);
-
-              var top = _getDescriptor.top;
-              var left = _getDescriptor.left;
-              var width = _getDescriptor.width;
+              var _getDescriptor = _this3.getDescriptor(x, y),
+                  top = _getDescriptor.top,
+                  left = _getDescriptor.left,
+                  width = _getDescriptor.width;
 
               var noRipplesActive = Object.keys(_this3.state.ripples).length === 0;
               var key = _this3.props.rippleMultiple || noRipplesActive ? _this3.getNextKey() : _this3.getLastKey();
@@ -220,15 +215,15 @@ var rippleFactory = function rippleFactory() {
       }, {
         key: 'getDescriptor',
         value: function getDescriptor(x, y) {
-          var _ReactDOM$findDOMNode = _reactDom2.default.findDOMNode(this).getBoundingClientRect();
+          var _ReactDOM$findDOMNode = _reactDom2.default.findDOMNode(this).getBoundingClientRect(),
+              left = _ReactDOM$findDOMNode.left,
+              top = _ReactDOM$findDOMNode.top,
+              height = _ReactDOM$findDOMNode.height,
+              width = _ReactDOM$findDOMNode.width;
 
-          var left = _ReactDOM$findDOMNode.left;
-          var top = _ReactDOM$findDOMNode.top;
-          var height = _ReactDOM$findDOMNode.height;
-          var width = _ReactDOM$findDOMNode.width;
-          var _props = this.props;
-          var centered = _props.rippleCentered;
-          var spread = _props.rippleSpread;
+          var _props = this.props,
+              centered = _props.rippleCentered,
+              spread = _props.rippleSpread;
 
           return {
             left: centered ? 0 : x - left - width / 2,
@@ -307,11 +302,11 @@ var rippleFactory = function rippleFactory() {
         value: function renderRipple(key, className, _ref2) {
           var _classnames;
 
-          var active = _ref2.active;
-          var left = _ref2.left;
-          var restarting = _ref2.restarting;
-          var top = _ref2.top;
-          var width = _ref2.width;
+          var active = _ref2.active,
+              left = _ref2.left,
+              restarting = _ref2.restarting,
+              top = _ref2.top,
+              width = _ref2.width;
 
           var scale = restarting ? 0 : 1;
           var transform = 'translate3d(' + (-width / 2 + left) + 'px, ' + (-width / 2 + top) + 'px, 0) scale(' + scale + ')';
@@ -333,16 +328,16 @@ var rippleFactory = function rippleFactory() {
           var _this4 = this;
 
           var ripples = this.state.ripples;
-          var _props2 = this.props;
-          var onRippleEnded = _props2.onRippleEnded;
-          var rippleCentered = _props2.rippleCentered;
-          var rippleMultiple = _props2.rippleMultiple;
-          var rippleSpread = _props2.rippleSpread;
-          var children = _props2.children;
-          var ripple = _props2.ripple;
-          var rippleClassName = _props2.rippleClassName;
-
-          var other = _objectWithoutProperties(_props2, ['onRippleEnded', 'rippleCentered', 'rippleMultiple', 'rippleSpread', 'children', 'ripple', 'rippleClassName']);
+
+          var _props2 = this.props,
+              onRippleEnded = _props2.onRippleEnded,
+              rippleCentered = _props2.rippleCentered,
+              rippleMultiple = _props2.rippleMultiple,
+              rippleSpread = _props2.rippleSpread,
+              children = _props2.children,
+              ripple = _props2.ripple,
+              rippleClassName = _props2.rippleClassName,
+              other = _objectWithoutProperties(_props2, ['onRippleEnded', 'rippleCentered', 'rippleMultiple', 'rippleSpread', 'children', 'ripple', 'rippleClassName']);
 
           if (!ripple) return _react2.default.createElement(ComposedComponent, _extends({ children: children }, other));
           return _react2.default.createElement(
diff --git a/lib/slider/Slider.js b/lib/slider/Slider.js
index 3943b6c4f..45ee6a19b 100644
--- a/lib/slider/Slider.js
+++ b/lib/slider/Slider.js
@@ -96,10 +96,9 @@ var factory = function factory(ProgressBar, Input) {
       }, _this.handleMouseUp = function () {
         _this.end(_this.getMouseEventMap());
       }, _this.handleResize = function (event, callback) {
-        var _ReactDOM$findDOMNode = _reactDom2.default.findDOMNode(_this.refs.progressbar).getBoundingClientRect();
-
-        var left = _ReactDOM$findDOMNode.left;
-        var right = _ReactDOM$findDOMNode.right;
+        var _ReactDOM$findDOMNode = _reactDom2.default.findDOMNode(_this.refs.progressbar).getBoundingClientRect(),
+            left = _ReactDOM$findDOMNode.left,
+            right = _ReactDOM$findDOMNode.right;
 
         var cb = callback || function () {};
         _this.setState({ sliderStart: left, sliderLength: right - left }, cb);
@@ -189,9 +188,9 @@ var factory = function factory(ProgressBar, Input) {
     }, {
       key: 'knobOffset',
       value: function knobOffset() {
-        var _props = this.props;
-        var max = _props.max;
-        var min = _props.min;
+        var _props = this.props,
+            max = _props.max,
+            min = _props.min;
 
         var translated = this.state.sliderLength * (this.props.value - min) / (max - min);
         return translated * 100 / this.state.sliderLength;
@@ -205,12 +204,12 @@ var factory = function factory(ProgressBar, Input) {
     }, {
       key: 'positionToValue',
       value: function positionToValue(position) {
-        var _state = this.state;
-        var start = _state.sliderStart;
-        var length = _state.sliderLength;
-        var _props2 = this.props;
-        var max = _props2.max;
-        var min = _props2.min;
+        var _state = this.state,
+            start = _state.sliderStart,
+            length = _state.sliderLength;
+        var _props2 = this.props,
+            max = _props2.max,
+            min = _props2.min;
 
         return this.trimValue((position.x - start) / length * (max - min) + min);
       }
diff --git a/lib/snackbar/Snackbar.js b/lib/snackbar/Snackbar.js
index 18ea42271..70d66ab99 100644
--- a/lib/snackbar/Snackbar.js
+++ b/lib/snackbar/Snackbar.js
@@ -76,15 +76,15 @@ var factory = function factory(Overlay, Button) {
     }, {
       key: 'render',
       value: function render() {
-        var _props = this.props;
-        var action = _props.action;
-        var active = _props.active;
-        var children = _props.children;
-        var icon = _props.icon;
-        var label = _props.label;
-        var onClick = _props.onClick;
-        var theme = _props.theme;
-        var type = _props.type;
+        var _props = this.props,
+            action = _props.action,
+            active = _props.active,
+            children = _props.children,
+            icon = _props.icon,
+            label = _props.label,
+            onClick = _props.onClick,
+            theme = _props.theme,
+            type = _props.type;
 
         var className = (0, _classnames3.default)([theme.snackbar, theme[type]], _defineProperty({}, theme.active, active), this.props.className);
 
diff --git a/lib/styleUtils.js b/lib/styleUtils.js
new file mode 100644
index 000000000..77a313b53
--- /dev/null
+++ b/lib/styleUtils.js
@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.unit = exports.alpha = undefined;
+
+var _color = require('color');
+
+var _color2 = _interopRequireDefault(_color);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+var ensure = function ensure(args) {
+  return function (value) {
+    return typeof value === 'function' ? value(args) : value;
+  };
+};
+
+var anyFunction = function anyFunction(values) {
+  return values.filter(function (value) {
+    return typeof value === 'function';
+  }).length > 0;
+};
+
+var withProps = function withProps(fn) {
+  return function () {
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return anyFunction(args) ? function (props) {
+      return fn.apply(undefined, _toConsumableArray(args.map(ensure(props))));
+    } : fn.apply(undefined, args);
+  };
+};
+
+var alpha = function alpha(colorString, alphaValue) {
+  return (0, _color2.default)(colorString).alpha(alphaValue).rgbaString();
+};
+
+var unit = function unit(value) {
+  return value * 10 + 'px';
+};
+
+var alphaWithProps = withProps(alpha);
+var unitWithProps = withProps(unit);
+
+exports.alpha = alphaWithProps;
+exports.unit = unitWithProps;
\ No newline at end of file
diff --git a/lib/switch/Switch.js b/lib/switch/Switch.js
index b723eccbd..6737c2c6c 100644
--- a/lib/switch/Switch.js
+++ b/lib/switch/Switch.js
@@ -75,14 +75,13 @@ var factory = function factory(Thumb) {
     }, {
       key: 'render',
       value: function render() {
-        var _props = this.props;
-        var className = _props.className;
-        var checked = _props.checked;
-        var disabled = _props.disabled;
-        var onChange = _props.onChange;
-        var theme = _props.theme;
-
-        var others = _objectWithoutProperties(_props, ['className', 'checked', 'disabled', 'onChange', 'theme']); //eslint-disable-line no-unused-vars
+        var _props = this.props,
+            className = _props.className,
+            checked = _props.checked,
+            disabled = _props.disabled,
+            onChange = _props.onChange,
+            theme = _props.theme,
+            others = _objectWithoutProperties(_props, ['className', 'checked', 'disabled', 'onChange', 'theme']); //eslint-disable-line no-unused-vars
 
 
         var _className = (0, _classnames2.default)(theme[disabled ? 'disabled' : 'field'], className);
diff --git a/lib/switch/Thumb.js b/lib/switch/Thumb.js
index 07af70068..1f41d9950 100644
--- a/lib/switch/Thumb.js
+++ b/lib/switch/Thumb.js
@@ -16,10 +16,9 @@ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in ob
 
 var factory = function factory(ripple) {
   var Thumb = function Thumb(_ref) {
-    var onMouseDown = _ref.onMouseDown;
-    var theme = _ref.theme;
-
-    var other = _objectWithoutProperties(_ref, ['onMouseDown', 'theme']);
+    var onMouseDown = _ref.onMouseDown,
+        theme = _ref.theme,
+        other = _objectWithoutProperties(_ref, ['onMouseDown', 'theme']);
 
     return _react2.default.createElement('span', _extends({ role: 'thumb', className: theme.thumb, onMouseDown: onMouseDown }, other));
   };
diff --git a/lib/table/Table.js b/lib/table/Table.js
index aadc261cc..98536edec 100644
--- a/lib/table/Table.js
+++ b/lib/table/Table.js
@@ -58,9 +58,9 @@ var factory = function factory(TableHead, TableRow) {
 
       return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Table.__proto__ || Object.getPrototypeOf(Table)).call.apply(_ref, [this].concat(args))), _this), _this.handleFullSelect = function () {
         if (_this.props.onSelect) {
-          var _this$props = _this.props;
-          var source = _this$props.source;
-          var selected = _this$props.selected;
+          var _this$props = _this.props,
+              source = _this$props.source,
+              selected = _this$props.selected;
 
           var newSelected = source.length === selected.length ? [] : source.map(function (i, idx) {
             return idx;
@@ -97,12 +97,12 @@ var factory = function factory(TableHead, TableRow) {
       key: 'renderHead',
       value: function renderHead() {
         if (this.props.heading) {
-          var _props = this.props;
-          var model = _props.model;
-          var selected = _props.selected;
-          var source = _props.source;
-          var selectable = _props.selectable;
-          var multiSelectable = _props.multiSelectable;
+          var _props = this.props,
+              model = _props.model,
+              selected = _props.selected,
+              source = _props.source,
+              selectable = _props.selectable,
+              multiSelectable = _props.multiSelectable;
 
           var isSelected = selected.length === source.length;
           return _react2.default.createElement(TableHead, {
@@ -120,13 +120,13 @@ var factory = function factory(TableHead, TableRow) {
       value: function renderBody() {
         var _this2 = this;
 
-        var _props2 = this.props;
-        var source = _props2.source;
-        var model = _props2.model;
-        var onChange = _props2.onChange;
-        var selectable = _props2.selectable;
-        var selected = _props2.selected;
-        var theme = _props2.theme;
+        var _props2 = this.props,
+            source = _props2.source,
+            model = _props2.model,
+            onChange = _props2.onChange,
+            selectable = _props2.selectable,
+            selected = _props2.selected,
+            theme = _props2.theme;
 
         return _react2.default.createElement(
           'tbody',
@@ -150,9 +150,9 @@ var factory = function factory(TableHead, TableRow) {
     }, {
       key: 'render',
       value: function render() {
-        var _props3 = this.props;
-        var className = _props3.className;
-        var theme = _props3.theme;
+        var _props3 = this.props,
+            className = _props3.className,
+            theme = _props3.theme;
 
         return _react2.default.createElement(
           'table',
diff --git a/lib/table/TableHead.js b/lib/table/TableHead.js
index dcc71513b..8a0ba5ca8 100644
--- a/lib/table/TableHead.js
+++ b/lib/table/TableHead.js
@@ -14,12 +14,12 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
 
 var factory = function factory(Checkbox) {
   var TableHead = function TableHead(_ref) {
-    var model = _ref.model;
-    var onSelect = _ref.onSelect;
-    var selectable = _ref.selectable;
-    var multiSelectable = _ref.multiSelectable;
-    var selected = _ref.selected;
-    var theme = _ref.theme;
+    var model = _ref.model,
+        onSelect = _ref.onSelect,
+        selectable = _ref.selectable,
+        multiSelectable = _ref.multiSelectable,
+        selected = _ref.selected,
+        theme = _ref.theme;
 
     var selectCell = void 0;
     var contentCells = Object.keys(model).map(function (key) {
diff --git a/lib/tabs/Tab.js b/lib/tabs/Tab.js
index 901468ffa..d077ec773 100644
--- a/lib/tabs/Tab.js
+++ b/lib/tabs/Tab.js
@@ -68,18 +68,17 @@ var Tab = function (_Component) {
     value: function render() {
       var _classnames;
 
-      var _props = this.props;
-      var onActive = _props.onActive;
-      var active = _props.active;
-      var activeClassName = _props.activeClassName;
-      var className = _props.className;
-      var disabled = _props.disabled;
-      var hidden = _props.hidden;
-      var label = _props.label;
-      var icon = _props.icon;
-      var theme = _props.theme;
-
-      var other = _objectWithoutProperties(_props, ['onActive', 'active', 'activeClassName', 'className', 'disabled', 'hidden', 'label', 'icon', 'theme']);
+      var _props = this.props,
+          onActive = _props.onActive,
+          active = _props.active,
+          activeClassName = _props.activeClassName,
+          className = _props.className,
+          disabled = _props.disabled,
+          hidden = _props.hidden,
+          label = _props.label,
+          icon = _props.icon,
+          theme = _props.theme,
+          other = _objectWithoutProperties(_props, ['onActive', 'active', 'activeClassName', 'className', 'disabled', 'hidden', 'label', 'icon', 'theme']);
 
       var _className = (0, _classnames3.default)(theme.label, (_classnames = {}, _defineProperty(_classnames, theme.active, active), _defineProperty(_classnames, theme.hidden, hidden), _defineProperty(_classnames, theme.withText, label), _defineProperty(_classnames, theme.withIcon, icon), _defineProperty(_classnames, theme.disabled, disabled), _defineProperty(_classnames, activeClassName, active), _classnames), className);
 
diff --git a/lib/tabs/Tabs.js b/lib/tabs/Tabs.js
index 2e0d4de09..2476ede93 100644
--- a/lib/tabs/Tabs.js
+++ b/lib/tabs/Tabs.js
@@ -171,16 +171,15 @@ var factory = function factory(Tab, TabContent) {
       value: function render() {
         var _classnames;
 
-        var _props = this.props;
-        var className = _props.className;
-        var theme = _props.theme;
-        var fixed = _props.fixed;
-        var inverse = _props.inverse;
-
-        var _parseChildren = this.parseChildren();
-
-        var headers = _parseChildren.headers;
-        var contents = _parseChildren.contents;
+        var _props = this.props,
+            className = _props.className,
+            theme = _props.theme,
+            fixed = _props.fixed,
+            inverse = _props.inverse;
+
+        var _parseChildren = this.parseChildren(),
+            headers = _parseChildren.headers,
+            contents = _parseChildren.contents;
 
         var classes = (0, _classnames3.default)(theme.tabs, className, (_classnames = {}, _defineProperty(_classnames, theme.fixed, fixed), _defineProperty(_classnames, theme.inverse, inverse), _classnames));
         return _react2.default.createElement(
diff --git a/lib/time_picker/Clock.js b/lib/time_picker/Clock.js
index aaa55accb..8a3748ceb 100644
--- a/lib/time_picker/Clock.js
+++ b/lib/time_picker/Clock.js
@@ -62,11 +62,10 @@ var Clock = function (_Component) {
         _this.props.onChange(_time2.default.setMinutes(_this.props.time, minutes));
       }
     }, _this.handleCalculateShape = function () {
-      var _this$refs$placeholde = _this.refs.placeholder.getBoundingClientRect();
-
-      var top = _this$refs$placeholde.top;
-      var left = _this$refs$placeholde.left;
-      var width = _this$refs$placeholde.width;
+      var _this$refs$placeholde = _this.refs.placeholder.getBoundingClientRect(),
+          top = _this$refs$placeholde.top,
+          left = _this$refs$placeholde.left,
+          width = _this$refs$placeholde.width;
 
       _this.setState({
         center: { x: left + width / 2 - window.pageXOffset, y: top + width / 2 - window.pageXOffset },
diff --git a/lib/time_picker/ClockFace.js b/lib/time_picker/ClockFace.js
index b2604a0c2..eacf9ec05 100644
--- a/lib/time_picker/ClockFace.js
+++ b/lib/time_picker/ClockFace.js
@@ -39,12 +39,12 @@ var Face = function (_Component) {
     }
 
     return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Face.__proto__ || Object.getPrototypeOf(Face)).call.apply(_ref, [this].concat(args))), _this), _this.renderNumber = function (number, idx) {
-      var _this$props = _this.props;
-      var active = _this$props.active;
-      var radius = _this$props.radius;
-      var spacing = _this$props.spacing;
-      var theme = _this$props.theme;
-      var twoDigits = _this$props.twoDigits;
+      var _this$props = _this.props,
+          active = _this$props.active,
+          radius = _this$props.radius,
+          spacing = _this$props.spacing,
+          theme = _this$props.theme,
+          twoDigits = _this$props.twoDigits;
 
       return _react2.default.createElement(
         'span',
@@ -78,11 +78,11 @@ var Face = function (_Component) {
   }, {
     key: 'render',
     value: function render() {
-      var _props = this.props;
-      var numbers = _props.numbers;
-      var onTouchStart = _props.onTouchStart;
-      var onMouseDown = _props.onMouseDown;
-      var theme = _props.theme;
+      var _props = this.props,
+          numbers = _props.numbers,
+          onTouchStart = _props.onTouchStart,
+          onMouseDown = _props.onMouseDown,
+          theme = _props.theme;
 
       return _react2.default.createElement(
         'div',
diff --git a/lib/time_picker/ClockHours.js b/lib/time_picker/ClockHours.js
index 3b4ee10fd..365c27724 100644
--- a/lib/time_picker/ClockHours.js
+++ b/lib/time_picker/ClockHours.js
@@ -96,13 +96,13 @@ var Hours = function (_Component) {
   }, {
     key: 'render',
     value: function render() {
-      var _props = this.props;
-      var format = _props.format;
-      var selected = _props.selected;
-      var radius = _props.radius;
-      var spacing = _props.spacing;
-      var center = _props.center;
-      var onHandMoved = _props.onHandMoved;
+      var _props = this.props,
+          format = _props.format,
+          selected = _props.selected,
+          radius = _props.radius,
+          spacing = _props.spacing,
+          center = _props.center,
+          onHandMoved = _props.onHandMoved;
 
       var is24hr = format === '24hr';
 
diff --git a/lib/time_picker/TimePicker.js b/lib/time_picker/TimePicker.js
index 27fc5901b..114f76ab4 100644
--- a/lib/time_picker/TimePicker.js
+++ b/lib/time_picker/TimePicker.js
@@ -107,19 +107,18 @@ var factory = function factory(TimePickerDialog, Input) {
     }, {
       key: 'render',
       value: function render() {
-        var _props = this.props;
-        var active = _props.active;
-        var onDismiss = _props.onDismiss;
-        var cancelLabel = _props.cancelLabel;
-        var format = _props.format;
-        var inputClassName = _props.inputClassName;
-        var okLabel = _props.okLabel;
-        var onEscKeyDown = _props.onEscKeyDown;
-        var onOverlayClick = _props.onOverlayClick;
-        var readonly = _props.readonly;
-        var value = _props.value;
-
-        var others = _objectWithoutProperties(_props, ['active', 'onDismiss', 'cancelLabel', 'format', 'inputClassName', 'okLabel', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'value']);
+        var _props = this.props,
+            active = _props.active,
+            onDismiss = _props.onDismiss,
+            cancelLabel = _props.cancelLabel,
+            format = _props.format,
+            inputClassName = _props.inputClassName,
+            okLabel = _props.okLabel,
+            onEscKeyDown = _props.onEscKeyDown,
+            onOverlayClick = _props.onOverlayClick,
+            readonly = _props.readonly,
+            value = _props.value,
+            others = _objectWithoutProperties(_props, ['active', 'onDismiss', 'cancelLabel', 'format', 'inputClassName', 'okLabel', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'value']);
 
         var formattedTime = value ? _time2.default.formatTime(value, format) : '';
         return _react2.default.createElement(
diff --git a/lib/tooltip/Tooltip.js b/lib/tooltip/Tooltip.js
index 6b3f80715..2890a4488 100644
--- a/lib/tooltip/Tooltip.js
+++ b/lib/tooltip/Tooltip.js
@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
@@ -64,14 +64,12 @@ var defaults = {
 var tooltipFactory = function tooltipFactory() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
-  var _defaults$options = _extends({}, defaults, options);
-
-  var defaultClassName = _defaults$options.className;
-  var defaultDelay = _defaults$options.delay;
-  var defaultHideOnClick = _defaults$options.hideOnClick;
-  var defaultPosition = _defaults$options.position;
-  var defaultTheme = _defaults$options.theme;
-
+  var _defaults$options = _extends({}, defaults, options),
+      defaultClassName = _defaults$options.className,
+      defaultDelay = _defaults$options.delay,
+      defaultHideOnClick = _defaults$options.hideOnClick,
+      defaultPosition = _defaults$options.position,
+      defaultTheme = _defaults$options.theme;
 
   return function (ComposedComponent) {
     var TooltippedComponent = function (_Component) {
@@ -121,9 +119,9 @@ var tooltipFactory = function tooltipFactory() {
         value: function activate(_ref2) {
           var _this2 = this;
 
-          var top = _ref2.top;
-          var left = _ref2.left;
-          var position = _ref2.position;
+          var top = _ref2.top,
+              left = _ref2.left,
+              position = _ref2.position;
 
           if (this.timeout) clearTimeout(this.timeout);
           this.setState({ visible: true, position: position });
@@ -150,18 +148,16 @@ var tooltipFactory = function tooltipFactory() {
           if (tooltipPosition === POSITION.HORIZONTAL) {
             var origin = element.getBoundingClientRect();
 
-            var _utils$getViewport = _utils2.default.getViewport();
-
-            var ww = _utils$getViewport.width;
+            var _utils$getViewport = _utils2.default.getViewport(),
+                ww = _utils$getViewport.width;
 
             var toRight = origin.left < ww / 2 - origin.width / 2;
             return toRight ? POSITION.RIGHT : POSITION.LEFT;
           } else if (tooltipPosition === POSITION.VERTICAL) {
             var _origin = element.getBoundingClientRect();
 
-            var _utils$getViewport2 = _utils2.default.getViewport();
-
-            var wh = _utils$getViewport2.height;
+            var _utils$getViewport2 = _utils2.default.getViewport(),
+                wh = _utils$getViewport2.height;
 
             var toBottom = _origin.top < wh / 2 - _origin.height / 2;
             return toBottom ? POSITION.BOTTOM : POSITION.TOP;
@@ -174,12 +170,11 @@ var tooltipFactory = function tooltipFactory() {
         value: function calculatePosition(element) {
           var position = this.getPosition(element);
 
-          var _element$getBoundingC = element.getBoundingClientRect();
-
-          var top = _element$getBoundingC.top;
-          var left = _element$getBoundingC.left;
-          var height = _element$getBoundingC.height;
-          var width = _element$getBoundingC.width;
+          var _element$getBoundingC = element.getBoundingClientRect(),
+              top = _element$getBoundingC.top,
+              left = _element$getBoundingC.left,
+              height = _element$getBoundingC.height,
+              width = _element$getBoundingC.width;
 
           var xOffset = window.scrollX || window.pageXOffset;
           var yOffset = window.scrollY || window.pageYOffset;
@@ -214,24 +209,24 @@ var tooltipFactory = function tooltipFactory() {
         value: function render() {
           var _classnames;
 
-          var _state = this.state;
-          var active = _state.active;
-          var left = _state.left;
-          var top = _state.top;
-          var position = _state.position;
-          var visible = _state.visible;
+          var _state = this.state,
+              active = _state.active,
+              left = _state.left,
+              top = _state.top,
+              position = _state.position,
+              visible = _state.visible;
 
           var positionClass = 'tooltip' + (position.charAt(0).toUpperCase() + position.slice(1));
-          var _props = this.props;
-          var children = _props.children;
-          var className = _props.className;
-          var theme = _props.theme;
-          var tooltip = _props.tooltip;
-          var tooltipDelay = _props.tooltipDelay;
-          var tooltipHideOnClick = _props.tooltipHideOnClick;
-          var tooltipPosition = _props.tooltipPosition;
-
-          var other = _objectWithoutProperties(_props, ['children', 'className', 'theme', 'tooltip', 'tooltipDelay', 'tooltipHideOnClick', 'tooltipPosition']);
+
+          var _props = this.props,
+              children = _props.children,
+              className = _props.className,
+              theme = _props.theme,
+              tooltip = _props.tooltip,
+              tooltipDelay = _props.tooltipDelay,
+              tooltipHideOnClick = _props.tooltipHideOnClick,
+              tooltipPosition = _props.tooltipPosition,
+              other = _objectWithoutProperties(_props, ['children', 'className', 'theme', 'tooltip', 'tooltipDelay', 'tooltipHideOnClick', 'tooltipPosition']);
 
           var _className = (0, _classnames3.default)(theme.tooltip, (_classnames = {}, _defineProperty(_classnames, theme.tooltipActive, active), _defineProperty(_classnames, theme[positionClass], theme[positionClass]), _classnames));
 
diff --git a/lib/utils/utils.js b/lib/utils/utils.js
index 80d7d5139..13e8d5442 100644
--- a/lib/utils/utils.js
+++ b/lib/utils/utils.js
@@ -16,8 +16,8 @@ exports.default = {
     var start = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
     var stop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
     var step = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-    var _start = 0;
-    var _stop = start;
+    var _start = 0,
+        _stop = start;
 
     if (stop !== null) {
       _start = start;

From be37dcd52dfdadb4ee5810ceb88fce759eef2bb1 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 1 Nov 2016 16:38:55 +0100
Subject: [PATCH 0896/1024] Latest build

---
 lib/ThemeProvider.js             |  54 ----
 lib/autocomplete/Autocomplete.js |   4 +-
 lib/button/NuButton.js           | 184 --------------
 lib/commons.scss                 |   5 +
 lib/index.d.ts                   |   2 +-
 lib/list/index.d.ts              |   2 +-
 lib/ripple/NuRipple.js           | 407 -------------------------------
 lib/styleUtils.js                |  52 ----
 8 files changed, 9 insertions(+), 701 deletions(-)
 delete mode 100644 lib/ThemeProvider.js
 delete mode 100644 lib/button/NuButton.js
 delete mode 100644 lib/ripple/NuRipple.js
 delete mode 100644 lib/styleUtils.js

diff --git a/lib/ThemeProvider.js b/lib/ThemeProvider.js
deleted file mode 100644
index 28dea07e5..000000000
--- a/lib/ThemeProvider.js
+++ /dev/null
@@ -1,54 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getProperty = undefined;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _styledComponents = require('styled-components');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var getProperty = function getProperty(name) {
-  return function (props) {
-    var value = name.split('.').reduce(function (current, next) {
-      return current[next];
-    }, props.theme.reactToolbox);
-
-    return value;
-  };
-};
-
-var defaultTheme = {
-  animationCurveDefault: 'cubic-bezier(0.4, 0, 0.2, 1)',
-  animationCurveFastOutLinearIn: 'cubic-bezier(0.4, 0, 0.2, 1)',
-  primaryColor: 'rgba(63, 81, 181, 1)',
-  primaryColorContrast: 'rgba(255, 255, 255, 1)',
-  accentColor: 'rgba(255, 64, 129, 1)',
-  accentColorContrast: 'rgba(255, 255, 255, 1)',
-  shadow2p: '\n    0 2px 2px 0 rgba(0, 0, 0, 0.14),\n    0 3px 1px -2px rgba(0, 0, 0, 0.2),\n    0 1px 5px 0 rgba(0, 0, 0, 0.12);\n  '
-};
-
-var ReactToolboxThemeProvider = function ReactToolboxThemeProvider(props) {
-  var theme = {
-    reactToolbox: Object.assign({}, defaultTheme, props.theme)
-  };
-
-  return _react2.default.createElement(
-    _styledComponents.ThemeProvider,
-    { theme: theme },
-    props.children
-  );
-};
-
-ReactToolboxThemeProvider.propTypes = {
-  children: _react.PropTypes.node,
-  theme: _react.PropTypes.object
-};
-
-exports.default = ReactToolboxThemeProvider;
-exports.getProperty = getProperty;
\ No newline at end of file
diff --git a/lib/autocomplete/Autocomplete.js b/lib/autocomplete/Autocomplete.js
index fa931b289..1a790e9f3 100644
--- a/lib/autocomplete/Autocomplete.js
+++ b/lib/autocomplete/Autocomplete.js
@@ -101,7 +101,7 @@ var factory = function factory(Chip, Input) {
         if (shouldClearQuery) {
           _this.setState({ query: '' });
         }
-      }, _this.handleQueryKeyUp = function (event) {
+
         if (event.which === 13) {
           var target = _this.state.active;
           if (!target) {
@@ -110,7 +110,7 @@ var factory = function factory(Chip, Input) {
           }
           _this.select(event, target);
         }
-
+      }, _this.handleQueryKeyUp = function (event) {
         if (event.which === 27) _reactDom2.default.findDOMNode(_this).querySelector('input').blur();
 
         if ([40, 38].indexOf(event.which) !== -1) {
diff --git a/lib/button/NuButton.js b/lib/button/NuButton.js
deleted file mode 100644
index eb481d44e..000000000
--- a/lib/button/NuButton.js
+++ /dev/null
@@ -1,184 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _templateObject = _taggedTemplateLiteral(['\n  align-content: center;\n  align-items: center;\n  border: 0;\n  cursor: pointer;\n  display: inline-block;\n  flex-direction: row;\n  font-size: ', ';\n  font-weight: 500;\n  height: ', ';\n  justify-content: center;\n  letter-spacing: 0;\n  line-height: ', ';\n  outline: none;\n  position: relative;\n  text-align: center;\n  text-decoration: none;\n  text-transform: uppercase;\n  transition:\n    box-shadow 0.2s ', ',\n    background-color 0.2s ', ',\n    color 0.2s ', ';\n  white-space: nowrap;\n  &::-moz-focus-inner {\n    border: 0;\n  }\n  &:visited {\n    color: inherit;\n  }\n  & > svg {\n    display: inline-block;\n    fill: currentColor;\n    font-size: 120%;\n    height: ', ';\n    vertical-align: top;\n    width: 1em;\n  }\n  & > i {\n    font-size: 120%;\n    display: inline-block;\n    line-height: ', ';\n    vertical-align: top;\n  }\n'], ['\n  align-content: center;\n  align-items: center;\n  border: 0;\n  cursor: pointer;\n  display: inline-block;\n  flex-direction: row;\n  font-size: ', ';\n  font-weight: 500;\n  height: ', ';\n  justify-content: center;\n  letter-spacing: 0;\n  line-height: ', ';\n  outline: none;\n  position: relative;\n  text-align: center;\n  text-decoration: none;\n  text-transform: uppercase;\n  transition:\n    box-shadow 0.2s ', ',\n    background-color 0.2s ', ',\n    color 0.2s ', ';\n  white-space: nowrap;\n  &::-moz-focus-inner {\n    border: 0;\n  }\n  &:visited {\n    color: inherit;\n  }\n  & > svg {\n    display: inline-block;\n    fill: currentColor;\n    font-size: 120%;\n    height: ', ';\n    vertical-align: top;\n    width: 1em;\n  }\n  & > i {\n    font-size: 120%;\n    display: inline-block;\n    line-height: ', ';\n    vertical-align: top;\n  }\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n    background: ', ' ;\n    border-radius: 2px;\n    box-shadow: ', ';\n    color: ', ' ;\n    min-width: 90px;\n    padding: 0 12px;\n    &:hover {\n      background: ', ';\n    }\n    &:focus:not(:active) {\n      box-shadow:\n        0 0 8px rgba(0, 0, 0, 0.18),\n        0 8px 16px rgba(0, 0, 0, 0.36);\n    }\n    & > i,\n    & > svg {\n      margin-right: 5px;\n    }\n  '], ['\n    background: ', ' ;\n    border-radius: 2px;\n    box-shadow: ', ';\n    color: ', ' ;\n    min-width: 90px;\n    padding: 0 12px;\n    &:hover {\n      background: ', ';\n    }\n    &:focus:not(:active) {\n      box-shadow:\n        0 0 8px rgba(0, 0, 0, 0.18),\n        0 8px 16px rgba(0, 0, 0, 0.36);\n    }\n    & > i,\n    & > svg {\n      margin-right: 5px;\n    }\n  ']),
-    _templateObject3 = _taggedTemplateLiteral(['\n    background: transparent;\n    border-radius: 2px;\n    color: ', ';\n    min-width: 90px;\n    padding: 0 12px;\n    &:focus:not(:active) {\n      background: ', ';\n    }\n    &:hover {\n      background: ', ';\n    }\n  '], ['\n    background: transparent;\n    border-radius: 2px;\n    color: ', ';\n    min-width: 90px;\n    padding: 0 12px;\n    &:focus:not(:active) {\n      background: ', ';\n    }\n    &:hover {\n      background: ', ';\n    }\n  ']),
-    _templateObject4 = _taggedTemplateLiteral(['\n    background: ', ' ;\n    border-radius: 50%;\n    box-shadow:\n      0 1px 1.5px 0 rgba(0, 0, 0, 0.12),\n      0 1px 1px 0 rgba(0, 0, 0, 0.24);\n    color: ', ';\n    font-size: 24px;\n    height: 56px;\n    width: 56px;\n    &:focus:not(:active) {\n      box-shadow:\n        0 0 8px rgba(0, 0, 0, 0.18),\n        0 8px 16px rgba(0, 0, 0, 0.36);\n    }\n  '], ['\n    background: ', ' ;\n    border-radius: 50%;\n    box-shadow:\n      0 1px 1.5px 0 rgba(0, 0, 0, 0.12),\n      0 1px 1px 0 rgba(0, 0, 0, 0.24);\n    color: ', ';\n    font-size: 24px;\n    height: 56px;\n    width: 56px;\n    &:focus:not(:active) {\n      box-shadow:\n        0 0 8px rgba(0, 0, 0, 0.18),\n        0 8px 16px rgba(0, 0, 0, 0.36);\n    }\n  ']),
-    _templateObject5 = _taggedTemplateLiteral(['\n  background: transparent;\n  border-radius: 50%;\n  color: ', ';\n  width: ', ';\n  &:focus:not(:active) {\n    background: ', ';\n  }\n'], ['\n  background: transparent;\n  border-radius: 50%;\n  color: ', ';\n  width: ', ';\n  &:focus:not(:active) {\n    background: ', ';\n  }\n']),
-    _templateObject6 = _taggedTemplateLiteral(['\n      background-color: ', ';\n      color: ', ';\n      &:hover {\n        background: ', ';\n      }\n    '], ['\n      background-color: ', ';\n      color: ', ';\n      &:hover {\n        background: ', ';\n      }\n    ']),
-    _templateObject7 = _taggedTemplateLiteral(['\n      color: ', ';\n      &:focus:not(:active) {\n        background: ', ';\n      }\n      &:hover {\n        background: ', ';\n      }\n    '], ['\n      color: ', ';\n      &:focus:not(:active) {\n        background: ', ';\n      }\n      &:hover {\n        background: ', ';\n      }\n    ']),
-    _templateObject8 = _taggedTemplateLiteral(['\n      color: ', ';\n      &:focus:not(:active) {\n        background: ', ';\n      }\n    '], ['\n      color: ', ';\n      &:focus:not(:active) {\n        background: ', ';\n      }\n    ']),
-    _templateObject9 = _taggedTemplateLiteral(['\n    ', '\n    ', '\n    ', '\n    ', '\n    ', '\n    ', '\n    ', '\n  '], ['\n    ', '\n    ', '\n    ', '\n    ', '\n    ', '\n    ', '\n    ', '\n  ']);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _font_icon = require('../font_icon');
-
-var _font_icon2 = _interopRequireDefault(_font_icon);
-
-var _ThemeProvider = require('../ThemeProvider');
-
-var _styleUtils = require('../styleUtils');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var button = (0, _styledComponents.css)(_templateObject, (0, _styleUtils.unit)(1.4), (0, _styleUtils.unit)(3.6), (0, _styleUtils.unit)(3.6), (0, _ThemeProvider.getProperty)('animationCurveDefault'), (0, _ThemeProvider.getProperty)('animationCurveDefault'), (0, _ThemeProvider.getProperty)('animationCurveDefault'), (0, _styleUtils.unit)(3.6), (0, _styleUtils.unit)(3.6));
-
-var raised = function raised(props) {
-  var color = props.inverse ? 'rgba(255, 255, 255, 1)' : 'rgba(33, 33, 33, 1)';
-  var background = props.inverse ? 'rgba(33, 33, 33, 1)' : 'rgba(255, 255, 255, 1)';
-  return (0, _styledComponents.css)(_templateObject2, background, (0, _ThemeProvider.getProperty)('shadow2p'), color, (0, _styleUtils.alpha)(background, 0.8));
-};
-
-var flat = function flat(props) {
-  var color = props.inverse ? 'rgba(255, 255, 255, 1)' : 'rgba(33, 33, 33, 1)';
-  return (0, _styledComponents.css)(_templateObject3, color, (0, _styleUtils.alpha)('rgba(33, 33, 33, 1)', 0.2), (0, _styleUtils.alpha)('rgba(33, 33, 33, 1)', 0.2));
-};
-
-var floating = function floating(props) {
-  var color = props.inverse ? 'rgba(255, 255, 255, 1)' : 'rgba(33, 33, 33, 1)';
-  var background = props.inverse ? 'rgba(33, 33, 33, 1)' : 'rgba(255, 255, 255, 1)';
-  return (0, _styledComponents.css)(_templateObject4, background, color);
-};
-
-var toggle = (0, _styledComponents.css)(_templateObject5, 'rgba(33, 33, 33, 1)', (0, _styleUtils.unit)(3.6), (0, _styleUtils.alpha)('rgba(33, 33, 33, 1)', 0.2));
-
-var colored = function colored(props, normal, contrast) {
-  if (props.raised || props.floating) {
-    return (0, _styledComponents.css)(_templateObject6, normal, contrast, (0, _styleUtils.alpha)(normal, 0.8));
-  } else if (props.flat) {
-    return (0, _styledComponents.css)(_templateObject7, normal, (0, _styleUtils.alpha)(normal, 0.2), (0, _styleUtils.alpha)(normal, 0.2));
-  } else if (props.toggle) {
-    return (0, _styledComponents.css)(_templateObject8, normal, (0, _styleUtils.alpha)(normal, 0.2));
-  }
-};
-
-var primary = function primary(props) {
-  return colored(props, (0, _ThemeProvider.getProperty)('primaryColor'), (0, _ThemeProvider.getProperty)('primaryColorContrast'));
-};
-
-var accent = function accent(props) {
-  return colored(props, (0, _ThemeProvider.getProperty)('accentColor'), (0, _ThemeProvider.getProperty)('accentColorContrast'));
-};
-
-var getButtonElement = function getButtonElement(tagName) {
-  return (0, _styledComponents2.default)(tagName)(_templateObject9, button, function (props) {
-    return props.flat && flat;
-  }, function (props) {
-    return props.floating && floating;
-  }, function (props) {
-    return props.raised && raised;
-  }, function (props) {
-    return props.toggle && toggle;
-  }, function (props) {
-    return props.primary && primary(props);
-  }, function (props) {
-    return props.accent && accent(props);
-  });
-};
-
-var factory = function factory(_ref) {
-  var FontIcon = _ref.FontIcon;
-
-  var InnerLink = getButtonElement('a');
-  var InnerButton = getButtonElement('button');
-
-  var Button = function (_Component) {
-    _inherits(Button, _Component);
-
-    function Button() {
-      var _ref2;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, Button);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref2 = Button.__proto__ || Object.getPrototypeOf(Button)).call.apply(_ref2, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
-        _this.rootNode.refs.button.blur();
-        if (_this.props.onMouseUp) {
-          _this.props.onMouseUp(event);
-        }
-      }, _this.handleMouseLeave = function (event) {
-        _this.rootNode.refs.button.blur();
-        if (_this.props.onMouseLeave) {
-          _this.props.onMouseLeave(event);
-        }
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(Button, [{
-      key: 'render',
-      value: function render() {
-        var _this2 = this;
-
-        var ButtonElement = this.props.href ? InnerLink : InnerButton;
-
-        var _props = this.props,
-            children = _props.children,
-            icon = _props.icon,
-            label = _props.label,
-            others = _objectWithoutProperties(_props, ['children', 'icon', 'label']);
-
-        return _react2.default.createElement(
-          ButtonElement,
-          _extends({}, others, {
-            onMouseUp: this.handleMouseUp,
-            onMouseLeave: this.handleMouseLeave,
-            innerRef: 'button',
-            ref: function ref(node) {
-              _this2.rootNode = node;
-            }
-          }),
-          icon && _react2.default.createElement(FontIcon, { value: icon }),
-          label,
-          children
-        );
-      }
-    }]);
-
-    return Button;
-  }(_react.Component);
-
-  Button.propTypes = {
-    children: _react.PropTypes.node,
-    href: _react.PropTypes.string,
-    icon: _react.PropTypes.string,
-    label: _react.PropTypes.string,
-    onMouseLeave: _react.PropTypes.func,
-    onMouseUp: _react.PropTypes.func
-  };
-
-
-  return Button;
-};
-
-var Button = factory({ FontIcon: _font_icon2.default });
-exports.default = Button;
\ No newline at end of file
diff --git a/lib/commons.scss b/lib/commons.scss
index 10c0ced55..54f9ba163 100644
--- a/lib/commons.scss
+++ b/lib/commons.scss
@@ -56,6 +56,11 @@ input:not([type="checkbox"]):not([type="radio"]), button {
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
 }
 
+// -- Remove firefox default style for required inputs
+input[required]:-moz-ui-invalid {
+  box-shadow: none;
+}
+
 // -- Material design font sizes
 h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
   @include typo-display-3($color-contrast: true);
diff --git a/lib/index.d.ts b/lib/index.d.ts
index 63841d434..d18ecd7b0 100644
--- a/lib/index.d.ts
+++ b/lib/index.d.ts
@@ -44,7 +44,7 @@ export declare namespace ReactToolbox {
     onMouseOver?: Function;
     onTouchCancel?: Function;
     onTouchEnd?: Function;
-    uchMove?: Function;
+    onTouchMove?: Function;
     onTouchStart?: Function;
     /**
      * Set inline style for the root component.
diff --git a/lib/list/index.d.ts b/lib/list/index.d.ts
index e352ded4b..ad4ace447 100644
--- a/lib/list/index.d.ts
+++ b/lib/list/index.d.ts
@@ -131,7 +131,7 @@ interface ListDividerProps extends ReactToolbox.Props {
   theme?: ListDividerTheme;
 }
 
-export class ListDivider extends React.Component<ListDivider, {}> { }
+export class ListDivider extends React.Component<ListDividerProps, {}> { }
 
 export interface ListItemTheme {
   /**
diff --git a/lib/ripple/NuRipple.js b/lib/ripple/NuRipple.js
deleted file mode 100644
index 45553b793..000000000
--- a/lib/ripple/NuRipple.js
+++ /dev/null
@@ -1,407 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _templateObject = _taggedTemplateLiteral(['\n  bottom: 0;\n  left: 0;\n  pointer-events: none;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 1;\n'], ['\n  bottom: 0;\n  left: 0;\n  pointer-events: none;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 1;\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n  background-color: currentColor;\n  border-radius: 50%;\n  left: 50%;\n  pointer-events: none;\n  position: absolute;\n  top: 50%;\n  transform-origin: 50% 50%;\n  transition-duration: 800ms;\n  z-index: 100;\n  opacity: ', '\n  transition-property: ', ';\n'], ['\n  background-color: currentColor;\n  border-radius: 50%;\n  left: 50%;\n  pointer-events: none;\n  position: absolute;\n  top: 50%;\n  transform-origin: 50% 50%;\n  transition-duration: 800ms;\n  z-index: 100;\n  opacity: ', '\n  transition-property: ', ';\n']);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactDom = require('react-dom');
-
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
-var _immutabilityHelper = require('immutability-helper');
-
-var _immutabilityHelper2 = _interopRequireDefault(_immutabilityHelper);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _identifiers = require('../identifiers.js');
-
-var _events = require('../utils/events');
-
-var _events2 = _interopRequireDefault(_events);
-
-var _prefixer = require('../utils/prefixer');
-
-var _prefixer2 = _interopRequireDefault(_prefixer);
-
-var _utils = require('../utils/utils');
-
-var _utils2 = _interopRequireDefault(_utils);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var defaults = {
-  centered: false,
-  className: '',
-  multiple: true,
-  spread: 2,
-  theme: {}
-};
-
-var RippleWrapper = _styledComponents2.default.span(_templateObject);
-
-var RippleNode = _styledComponents2.default.span(_templateObject2, function (props) {
-  return props.restarting || props.active ? 0.3 : 0;
-}, function (props) {
-  return props.restarting ? 'none' : props.active ? 'transform' : 'opacity, transform';
-});
-
-var rippleFactory = function rippleFactory() {
-  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
-  var _defaults$options = _extends({}, defaults, options),
-      defaultCentered = _defaults$options.centered,
-      defaultClassName = _defaults$options.className,
-      defaultMultiple = _defaults$options.multiple,
-      defaultSpread = _defaults$options.spread,
-      defaultTheme = _defaults$options.theme,
-      props = _objectWithoutProperties(_defaults$options, ['centered', 'className', 'multiple', 'spread', 'theme']);
-
-  return function (ComposedComponent) {
-    var RippledComponent = function (_Component) {
-      _inherits(RippledComponent, _Component);
-
-      function RippledComponent() {
-        var _ref;
-
-        var _temp, _this, _ret;
-
-        _classCallCheck(this, RippledComponent);
-
-        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
-
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RippledComponent.__proto__ || Object.getPrototypeOf(RippledComponent)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-          ripples: {}
-        }, _this.ripples = [], _this.handleMouseDown = function (event) {
-          if (_this.props.onMouseDown) _this.props.onMouseDown(event);
-          if (!_this.props.disabled) {
-            var _events$getMousePosit = _events2.default.getMousePosition(event),
-                x = _events$getMousePosit.x,
-                y = _events$getMousePosit.y;
-
-            _this.animateRipple(x, y, false);
-          }
-        }, _this.handleTouchStart = function (event) {
-          if (_this.props.onTouchStart) _this.props.onTouchStart(event);
-          if (!_this.props.disabled) {
-            var _events$getTouchPosit = _events2.default.getTouchPosition(event),
-                x = _events$getTouchPosit.x,
-                y = _events$getTouchPosit.y;
-
-            _this.animateRipple(x, y, true);
-          }
-        }, _temp), _possibleConstructorReturn(_this, _ret);
-      }
-
-      _createClass(RippledComponent, [{
-        key: 'componentDidUpdate',
-        value: function componentDidUpdate(prevProps, prevState) {
-          // If a new ripple was just added, add a remove event listener to its animation
-          if (Object.keys(prevState.ripples).length < Object.keys(this.state.ripples).length) {
-            this.addRippleRemoveEventListener(this.getLastKey());
-          }
-        }
-      }, {
-        key: 'componentWillUnmount',
-        value: function componentWillUnmount() {
-          var _this2 = this;
-
-          // Remove document event listeners for ripple if they still exists
-          Object.keys(this.state.ripples).forEach(function (key) {
-            _this2.state.ripples[key].endRipple();
-          });
-        }
-      }, {
-        key: 'getRef',
-        value: function getRef(key) {
-          return this.ripples[key].refs.ripple;
-        }
-
-        /**
-         * Add an event listener to the reference with given key so when the animation transition
-         * ends we can be sure that it finished and it can be safely removed from the state.
-         * This function is called whenever a new ripple is added to the component.
-         *
-         * @param {String} rippleKey Is the key of the ripple to add the event.
-         */
-
-      }, {
-        key: 'addRippleRemoveEventListener',
-        value: function addRippleRemoveEventListener(rippleKey) {
-          var self = this;
-          _events2.default.addEventListenerOnTransitionEnded(this.getRef(rippleKey), function onOpacityEnd(e) {
-            if (e.propertyName === 'opacity') {
-              if (self.props.onRippleEnded) self.props.onRippleEnded(e);
-              _events2.default.removeEventListenerOnTransitionEnded(self.getRef(rippleKey), onOpacityEnd);
-              self.setState({ ripples: _utils2.default.removeObjectKey(rippleKey, self.state.ripples) });
-            }
-          });
-        }
-
-        /**
-         * Start a ripple animation on an specific point with touch or mouse events. First
-         * decides if the animation should trigger. If the ripple is multiple or there is no
-         * ripple present, it creates a new key. If it's a simple ripple and already exists,
-         * it just restarts the current ripple. The animation happens in two state changes
-         * to allow triggering via css.
-         *
-         * @param {Number} x Coordinate X on the screen where animation should start
-         * @param {Number} y Coordinate Y on the screen where animation should start
-         * @param {Boolean} isTouch Use events from touch or mouse.
-         */
-
-      }, {
-        key: 'animateRipple',
-        value: function animateRipple(x, y, isTouch) {
-          var _this3 = this;
-
-          if (this.rippleShouldTrigger(isTouch)) {
-            (function () {
-              var _getDescriptor = _this3.getDescriptor(x, y),
-                  top = _getDescriptor.top,
-                  left = _getDescriptor.left,
-                  width = _getDescriptor.width;
-
-              var noRipplesActive = Object.keys(_this3.state.ripples).length === 0;
-              var key = _this3.props.rippleMultiple || noRipplesActive ? _this3.getNextKey() : _this3.getLastKey();
-              var endRipple = _this3.addRippleDeactivateEventListener(isTouch, key);
-              var initialState = { active: false, restarting: true, top: top, left: left, width: width, endRipple: endRipple };
-              var runningState = { active: true, restarting: false };
-              _this3.setState((0, _immutabilityHelper2.default)(_this3.state, { ripples: _defineProperty({}, key, { $set: initialState }) }), function () {
-                _this3.getRef(key).offsetWidth; //eslint-disable-line no-unused-expressions
-                _this3.setState((0, _immutabilityHelper2.default)(_this3.state, { ripples: _defineProperty({}, key, { $merge: runningState }) }));
-              });
-            })();
-          }
-        }
-
-        /**
-         * Determine if a ripple should start depending if its a touch event. For mobile both
-         * touchStart and mouseDown are launched so in case is touch we should always trigger
-         * but if its not we should check if a touch was already triggered to decide.
-         *
-         * @param {Boolean} isTouch True in case a touch event triggered the ripple false otherwise.
-         * @return {Boolean} True in case the ripple should trigger or false if it shouldn't.
-         */
-
-      }, {
-        key: 'rippleShouldTrigger',
-        value: function rippleShouldTrigger(isTouch) {
-          var shouldStart = isTouch ? true : !this.touchCache;
-          this.touchCache = isTouch;
-          return shouldStart;
-        }
-
-        /**
-         * Find out a descriptor object for the ripple element being created depending on
-         * the position where the it was triggered and the component's dimensions.
-         *
-         * @param {Number} x Coordinate x in the viewport where ripple was triggered
-         * @param {Number} y Coordinate y in the viewport where ripple was triggered
-         * @return {Object} Descriptor element including position and size of the element
-         */
-
-      }, {
-        key: 'getDescriptor',
-        value: function getDescriptor(x, y) {
-          var _ReactDOM$findDOMNode = _reactDom2.default.findDOMNode(this).getBoundingClientRect(),
-              left = _ReactDOM$findDOMNode.left,
-              top = _ReactDOM$findDOMNode.top,
-              height = _ReactDOM$findDOMNode.height,
-              width = _ReactDOM$findDOMNode.width;
-
-          var _props = this.props,
-              centered = _props.rippleCentered,
-              spread = _props.rippleSpread;
-
-          return {
-            left: centered ? 0 : x - left - width / 2,
-            top: centered ? 0 : y - top - height / 2,
-            width: width * spread
-          };
-        }
-
-        /**
-         * Increments and internal counter and returns the next value as a string. It
-         * is used to assign key references to new ripple elements.
-         *
-         * @return {String} Key to be assigned to a ripple.
-         */
-
-      }, {
-        key: 'getNextKey',
-        value: function getNextKey() {
-          this.currentCount = this.currentCount ? this.currentCount + 1 : 1;
-          return 'ripple' + this.currentCount;
-        }
-
-        /**
-         * Return the last generated key for a ripple element. When there is only one ripple
-         * and to get the reference when a ripple was just created.
-         *
-         * @return {String} The last generated ripple key.
-         */
-
-      }, {
-        key: 'getLastKey',
-        value: function getLastKey() {
-          return 'ripple' + this.currentCount;
-        }
-
-        /**
-         * Add an event listener to the document needed to deactivate a ripple and make it dissappear.
-         * Deactivation can happen with a touchend or mouseup depending on the trigger type. The
-         * ending function is created from a factory function and returned.
-         *
-         * @param {Boolean} isTouch True in case the trigger was a touch event false otherwise.
-         * @param {String} rippleKey It's a key to identify the ripple that should be deactivated.
-         * @return {Function} Callback function that deactivates the ripple and removes the event listener
-         */
-
-      }, {
-        key: 'addRippleDeactivateEventListener',
-        value: function addRippleDeactivateEventListener(isTouch, rippleKey) {
-          var eventType = isTouch ? 'touchend' : 'mouseup';
-          var endRipple = this.createRippleDeactivateCallback(eventType, rippleKey);
-          document.addEventListener(eventType, endRipple);
-          return endRipple;
-        }
-
-        /**
-         * Generates a function that can be called to deactivate a given ripple and remove its finishing
-         * event listener. If is generated because we need to store it to be called on unmount in case
-         * the ripple is still running.
-         *
-         * @param {String} eventType Is the event type that can be touchend or mouseup
-         * @param {String} rippleKey Is the key representing the ripple
-         * @return {Function} Callback function that deactivates the ripple and removes the listener
-         */
-
-      }, {
-        key: 'createRippleDeactivateCallback',
-        value: function createRippleDeactivateCallback(eventType, rippleKey) {
-          var self = this;
-          return function endRipple() {
-            document.removeEventListener(eventType, endRipple);
-            self.setState({ ripples: (0, _immutabilityHelper2.default)(self.state.ripples, _defineProperty({}, rippleKey, { $merge: { active: false } })) });
-          };
-        }
-      }, {
-        key: 'renderRipple',
-        value: function renderRipple(key, className, _ref2) {
-          var _this4 = this;
-
-          var active = _ref2.active,
-              left = _ref2.left,
-              restarting = _ref2.restarting,
-              top = _ref2.top,
-              width = _ref2.width;
-
-          var scale = restarting ? 0 : 1;
-          var transform = 'translate3d(' + (-width / 2 + left) + 'px, ' + (-width / 2 + top) + 'px, 0) scale(' + scale + ')';
-          return _react2.default.createElement(
-            RippleWrapper,
-            _extends({ key: key }, props),
-            _react2.default.createElement(RippleNode, {
-              active: active,
-              innerRef: 'ripple',
-              ref: function ref(node) {
-                _this4.ripples[key] = node;
-              },
-              restarting: restarting,
-              style: (0, _prefixer2.default)({ transform: transform }, { width: width, height: width })
-            })
-          );
-        }
-      }, {
-        key: 'render',
-        value: function render() {
-          var _this5 = this;
-
-          var ripples = this.state.ripples;
-
-          var _props2 = this.props,
-              onRippleEnded = _props2.onRippleEnded,
-              rippleCentered = _props2.rippleCentered,
-              rippleMultiple = _props2.rippleMultiple,
-              rippleSpread = _props2.rippleSpread,
-              children = _props2.children,
-              ripple = _props2.ripple,
-              rippleClassName = _props2.rippleClassName,
-              other = _objectWithoutProperties(_props2, ['onRippleEnded', 'rippleCentered', 'rippleMultiple', 'rippleSpread', 'children', 'ripple', 'rippleClassName']);
-
-          if (!ripple) return _react2.default.createElement(ComposedComponent, _extends({ children: children }, other));
-          return _react2.default.createElement(
-            ComposedComponent,
-            _extends({}, other, { onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart }),
-            children,
-            Object.keys(ripples).map(function (key) {
-              return _this5.renderRipple(key, rippleClassName, ripples[key]);
-            })
-          );
-        }
-      }]);
-
-      return RippledComponent;
-    }(_react.Component);
-
-    RippledComponent.propTypes = {
-      children: _react.PropTypes.any,
-      disabled: _react.PropTypes.bool,
-      onRippleEnded: _react.PropTypes.func,
-      ripple: _react.PropTypes.bool,
-      rippleCentered: _react.PropTypes.bool,
-      rippleClassName: _react.PropTypes.string,
-      rippleMultiple: _react.PropTypes.bool,
-      rippleSpread: _react.PropTypes.number,
-      theme: _react.PropTypes.shape({
-        ripple: _react.PropTypes.string,
-        rippleActive: _react.PropTypes.string,
-        rippleRestarting: _react.PropTypes.string,
-        rippleWrapper: _react.PropTypes.string
-      })
-    };
-    RippledComponent.defaultProps = {
-      disabled: false,
-      ripple: true,
-      rippleCentered: defaultCentered,
-      rippleClassName: defaultClassName,
-      rippleMultiple: defaultMultiple,
-      rippleSpread: defaultSpread
-    };
-
-
-    return (0, _reactCssThemr.themr)(_identifiers.RIPPLE, defaultTheme)(RippledComponent);
-  };
-};
-
-exports.default = rippleFactory;
\ No newline at end of file
diff --git a/lib/styleUtils.js b/lib/styleUtils.js
deleted file mode 100644
index 77a313b53..000000000
--- a/lib/styleUtils.js
+++ /dev/null
@@ -1,52 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.unit = exports.alpha = undefined;
-
-var _color = require('color');
-
-var _color2 = _interopRequireDefault(_color);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
-var ensure = function ensure(args) {
-  return function (value) {
-    return typeof value === 'function' ? value(args) : value;
-  };
-};
-
-var anyFunction = function anyFunction(values) {
-  return values.filter(function (value) {
-    return typeof value === 'function';
-  }).length > 0;
-};
-
-var withProps = function withProps(fn) {
-  return function () {
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return anyFunction(args) ? function (props) {
-      return fn.apply(undefined, _toConsumableArray(args.map(ensure(props))));
-    } : fn.apply(undefined, args);
-  };
-};
-
-var alpha = function alpha(colorString, alphaValue) {
-  return (0, _color2.default)(colorString).alpha(alphaValue).rgbaString();
-};
-
-var unit = function unit(value) {
-  return value * 10 + 'px';
-};
-
-var alphaWithProps = withProps(alpha);
-var unitWithProps = withProps(unit);
-
-exports.alpha = alphaWithProps;
-exports.unit = unitWithProps;
\ No newline at end of file

From d72218364ab500dce565864c4e68f6d2e4d30d70 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 1 Nov 2016 16:42:51 +0100
Subject: [PATCH 0897/1024] Relative css and js for docs

---
 docs/www/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/www/index.html b/docs/www/index.html
index ae3105bc9..a875ef4b5 100644
--- a/docs/www/index.html
+++ b/docs/www/index.html
@@ -29,7 +29,7 @@
     <link rel="canonical" href="http://www.react-toolbox.com/">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
-    <link rel="stylesheet" href="http://github.com/docs.css">
+    <link rel="stylesheet" href="http://github.com/docs.css">
   </head>
 
   <body>
@@ -44,6 +44,6 @@
 
     </script>
     <div id="app"></div>
-    <script src="http://github.com/docs.js"></script>
+    <script src="http://github.com/docs.js"></script>
   </body>
 </html>

From dfc9b3e02622fde164f42324d1b6388fdbe844f3 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 1 Nov 2016 16:56:40 +0100
Subject: [PATCH 0898/1024] Proper images links

---
 docs/app/components/layout/home/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/app/components/layout/home/index.js b/docs/app/components/layout/home/index.js
index 561bed46a..7151e329d 100644
--- a/docs/app/components/layout/home/index.js
+++ b/docs/app/components/layout/home/index.js
@@ -59,7 +59,7 @@ const Home = () => (
       <h3>About the authors</h3>
       <ul className={style.authors}>
         <Card className={style.author}>
-          <CardMedia aspectRatio='wide' image='/images/javivelasco.jpg' />
+          <CardMedia aspectRatio='wide' image='images/javivelasco.jpg' />
           <CardTitle title="Javi Velasco" subtitle="@javivelasco" />
           <CardText>Software gardener • Film, music & comic lover • Frontend Engineer at Audiense  • Any biographer in the room?</CardText>
           <CardActions>
@@ -69,7 +69,7 @@ const Home = () => (
         </Card>
 
         <Card className={style.author}>
-          <CardMedia aspectRatio='wide' image='/images/soyjavi.jpg' />
+          <CardMedia aspectRatio='wide' image='images/soyjavi.jpg' />
           <CardTitle title="Javi Jiménez" subtitle="@soyjavi" />
           <CardText>Creative Doer · A complicated #human who builds stuff · #author · #opensource lover · #traveller · with a dark past being CEO & CTO</CardText>
           <CardActions>

From 57320a0fb526341e4423fe3ba8ae8e1dd790f0cc Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 1 Nov 2016 17:01:39 +0100
Subject: [PATCH 0899/1024] Pass linter

---
 components/autocomplete/Autocomplete.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index 9ee50db14..22502c3c3 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -116,7 +116,7 @@ const factory = (Chip, Input) => {
      if (shouldClearQuery) {
        this.setState({query: ''});
      }
-     
+
      if (event.which === 13) {
        let target = this.state.active;
        if (!target) {

From ccb396f4d78d1c7c7e02a59808bec6deab611d88 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 1 Nov 2016 17:02:21 +0100
Subject: [PATCH 0900/1024] Release 1.2.4

---
 package.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 977313e13..72449495b 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "react-toolbox",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "homepage": "http://www.react-toolbox.com/",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "main": "./lib",
   "author": {
     "name": "React Toolbox Team",
@@ -112,7 +112,6 @@
     "test:watch": "cross-env NODE_ENV=test karma start --no-single-run",
     "tsd": "cpx \"./components/**/*.d.ts\" ./lib"
   },
-  "pre-commit": "lint:staged",
   "license": "MIT",
   "peerDependencies": {
     "classnames": "~2.2.0",
@@ -120,5 +119,6 @@
     "react": "~0.14 || ~15.3.0",
     "react-addons-css-transition-group": "~0.14.0 || ~15.3.0",
     "react-dom": "~0.14.0 || ~15.3.0"
-  }
+  },
+  "pre-commit": "lint:staged"
 }

From 736eeeb55f77db823e0b4e83d0f3a1b5ce1046fa Mon Sep 17 00:00:00 2001
From: rubenmoya <rmoyarodriguez@gmail.com>
Date: Wed, 2 Nov 2016 09:46:19 +0100
Subject: [PATCH 0901/1024] remove icon from Snackbar

---
 components/snackbar/Snackbar.js                           | 8 +-------
 components/snackbar/index.d.ts                            | 8 --------
 components/snackbar/readme.md                             | 3 ---
 components/snackbar/theme.scss                            | 4 ----
 .../layout/main/modules/examples/snackbar_example_1.txt   | 1 -
 spec/components/snackbar.js                               | 1 -
 6 files changed, 1 insertion(+), 24 deletions(-)

diff --git a/components/snackbar/Snackbar.js b/components/snackbar/Snackbar.js
index 4ff381438..b8d417128 100644
--- a/components/snackbar/Snackbar.js
+++ b/components/snackbar/Snackbar.js
@@ -3,7 +3,6 @@ import classnames from 'classnames';
 import { themr } from 'react-css-themr';
 import { SNACKBAR } from '../identifiers.js';
 import ActivableRenderer from '../hoc/ActivableRenderer.js';
-import FontIcon from '../font_icon/FontIcon.js';
 import InjectOverlay from '../overlay/Overlay.js';
 import InjectButton from '../button/Button.js';
 
@@ -14,10 +13,6 @@ const factory = (Overlay, Button) => {
       active: PropTypes.bool,
       children: PropTypes.node,
       className: PropTypes.string,
-      icon: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.element
-      ]),
       label: PropTypes.oneOfType([
         PropTypes.string,
         PropTypes.element
@@ -53,7 +48,7 @@ const factory = (Overlay, Button) => {
     }
 
     render () {
-      const {action, active, children, icon, label, onClick, theme, type } = this.props;
+      const {action, active, children, label, onClick, theme, type } = this.props;
       const className = classnames([theme.snackbar, theme[type]], {
         [theme.active]: active
       }, this.props.className);
@@ -61,7 +56,6 @@ const factory = (Overlay, Button) => {
       return (
         <Overlay invisible>
           <div data-react-toolbox='snackbar' className={className}>
-            {icon ? <FontIcon value={icon} className={theme.icon} /> : null}
             <span className={theme.label}>
               {label}
               {children}
diff --git a/components/snackbar/index.d.ts b/components/snackbar/index.d.ts
index adf1b8390..cc95d3a88 100644
--- a/components/snackbar/index.d.ts
+++ b/components/snackbar/index.d.ts
@@ -18,10 +18,6 @@ export interface SnackbarTheme {
    * Added to the root element in case it's cancel type.
    */
   cancel?: string;
-  /**
-   * Used for the icon element.
-   */
-  icon?: string;
   /**
    * Used for the label element.
    */
@@ -46,10 +42,6 @@ interface SnackbarProps extends ReactToolbox.Props {
    * @default true
    */
   active?: boolean;
-  /**
-   * String key for an icon or Element which will be displayed in left side of the snackbar.
-   */
-  icon?: React.ReactNode | string;
   /**
    * Text to display in the content. Required.
    */
diff --git a/components/snackbar/readme.md b/components/snackbar/readme.md
index 92f22e023..7728354a8 100644
--- a/components/snackbar/readme.md
+++ b/components/snackbar/readme.md
@@ -21,7 +21,6 @@ class SnackbarTest extends React.Component {
         <Button label='Show Snackbar' raised onClick={this.handleClick} />
         <Snackbar
           action='http://github.com/Nice'
-          icon='question_answer'
           label='A new developer started using React Toolbox'
           onClick={this.handleSnackbarClick}
           ref='snackbar'
@@ -43,7 +42,6 @@ This component can be styled by context providing a theme with the key `RTSnackb
 | `active`      | `Boolean`               |  `false`      | If true, the snackbar will be active.|
 | `children`    | `String or Element`     |  `false`      | Text or node to be displayed in the content as alternative to `label`.|
 | `className`   | `String`                | `''`          | Additional class name to provide custom styling.|
-| `icon`        | `String` or `Element`   |               | String key for an icon or Element which will be displayed in left side of the snackbar.|
 | `label`       | `String or Element`     |               | Text to display in the content.|
 | `onClick`     | `Function`              |               | Callback function that will be called when the button action is clicked.|
 | `onTimeout`   | `Function`              |               | Callback function when finish the set timeout.|
@@ -58,7 +56,6 @@ This component can be styled by context providing a theme with the key `RTSnackb
 | `active` | Added to the root element when its active.|
 | `button` | Used for the button inside the component.|
 | `cancel` | Added to the root element in case it's cancel type.|
-| `icon` | Used for the icon element.|
 | `label` | Used for the label element.|
 | `snackbar` | Used as the className for the root element of the component.|
 | `warning` | Added to the root element in case it's warning type.|
diff --git a/components/snackbar/theme.scss b/components/snackbar/theme.scss
index e9e7071ac..4c7d0770e 100644
--- a/components/snackbar/theme.scss
+++ b/components/snackbar/theme.scss
@@ -35,10 +35,6 @@
   }
 }
 
-.icon {
-  margin-right: $snackbar-vertical-offset;
-}
-
 .label {
   flex-grow: 1;
   font-size: $font-size-small;
diff --git a/docs/app/components/layout/main/modules/examples/snackbar_example_1.txt b/docs/app/components/layout/main/modules/examples/snackbar_example_1.txt
index 1841ecb13..b996ed0b9 100644
--- a/docs/app/components/layout/main/modules/examples/snackbar_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/snackbar_example_1.txt
@@ -24,7 +24,6 @@ class SnackbarTest extends React.Component {
         <Snackbar
           action='http://github.com/Dismiss'
           active={this.state.active}
-          icon='question_answer'
           label='Snackbar action cancel'
           timeout={2000}
           onClick={this.handleSnackbarClick}
diff --git a/spec/components/snackbar.js b/spec/components/snackbar.js
index 2f063475c..c9c83ab05 100644
--- a/spec/components/snackbar.js
+++ b/spec/components/snackbar.js
@@ -28,7 +28,6 @@ class SnackbarTest extends React.Component {
         <Snackbar
           action='http://github.com/Hide'
           active={this.state.active}
-          icon='question_answer'
           timeout={2000}
           onClick={this.handleSnackbarClick}
           onTimeout={this.handleSnackbarTimeout}

From 62f55cae1ee09896eaf3e982adcb63bf5b392705 Mon Sep 17 00:00:00 2001
From: Antti Ahti <antti.ahti@gmail.com>
Date: Wed, 2 Nov 2016 22:09:18 +0200
Subject: [PATCH 0902/1024] Support elements in icon attribute in IconButton

This makes IconButton more flexible. It also makes icon elements work
when used with leftIcon/rightIcon attributes in AppBar.
---
 components/button/IconButton.js                                 | 2 +-
 components/button/readme.md                                     | 1 +
 .../layout/main/modules/examples/button_example_1.txt           | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/button/IconButton.js b/components/button/IconButton.js
index 3b4b3438c..e2d8b4953 100644
--- a/components/button/IconButton.js
+++ b/components/button/IconButton.js
@@ -65,7 +65,7 @@ const factory = (ripple, FontIcon) => {
       };
 
       return React.createElement(element, props,
-        icon ? <FontIcon className={theme.icon} value={icon}/> : null,
+        icon ? typeof icon === 'string' ? <FontIcon className={theme.icon} value={icon} /> : icon : null,
         children
       );
     }
diff --git a/components/button/readme.md b/components/button/readme.md
index ec079dab9..41aa3547c 100644
--- a/components/button/readme.md
+++ b/components/button/readme.md
@@ -23,6 +23,7 @@ const TestButtons = () => (
     <Button icon='add' floating />
     <Button icon='add' floating accent mini />
     <IconButton icon='favorite' accent />
+    <IconButton icon={<GithubIcon />} accent />
     <IconButton primary><GithubIcon /></IconButton>
     <Button icon='add' label='Add this' flat primary />
     <Button icon='add' label='Add this' flat disabled />
diff --git a/docs/app/components/layout/main/modules/examples/button_example_1.txt b/docs/app/components/layout/main/modules/examples/button_example_1.txt
index 75d2a1681..a550584aa 100644
--- a/docs/app/components/layout/main/modules/examples/button_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/button_example_1.txt
@@ -15,6 +15,7 @@ const ButtonsTest = () => (
     <Button icon='add' floating />
     <Button icon='add' floating accent mini />
     <IconButton icon='favorite' accent />
+    <IconButton icon={<GithubIcon />} accent />
     <IconButton primary><GithubIcon /></IconButton>
     <Button icon='add' label='Add this' flat primary />
     <Button icon='add' label='Add this' flat disabled />

From ebf523dce7ef96a82c152447bf24bf3279e3e782 Mon Sep 17 00:00:00 2001
From: Antti Ahti <antti.ahti@gmail.com>
Date: Wed, 2 Nov 2016 22:20:21 +0200
Subject: [PATCH 0903/1024] Add AppBar example

---
 components/app_bar/readme.md                    | 17 ++++++++++++++---
 .../layout/main/modules/components.js           |  4 +++-
 .../main/modules/examples/app_bar_example_1.txt | 16 ++++++++++++++++
 3 files changed, 33 insertions(+), 4 deletions(-)
 create mode 100644 docs/app/components/layout/main/modules/examples/app_bar_example_1.txt

diff --git a/components/app_bar/readme.md b/components/app_bar/readme.md
index 6530eb981..8eae071d0 100644
--- a/components/app_bar/readme.md
+++ b/components/app_bar/readme.md
@@ -2,13 +2,24 @@
 
 The app bar is a special kind of toolbar that’s used for branding, navigation, search, and actions. Usually it contains controls on the right and left side and a title with the current section or app name. You should give the content with children elements.
 
+<!-- example -->
 ```jsx
 import AppBar from 'react-toolbox/lib/app_bar';
+import Navigation from 'react-toolbox/lib/navigation';
+import Link from 'react-toolbox/lib/Link';
+
+const GithubIcon = () => (
+  <svg viewBox="0 0 284 277">
+    <g><path d="M141.888675,0.0234927555 C63.5359948,0.0234927555 0,63.5477395 0,141.912168 C0,204.6023 40.6554239,257.788232 97.0321356,276.549924 C104.12328,277.86336 106.726656,273.471926 106.726656,269.724287 C106.726656,266.340838 106.595077,255.16371 106.533987,243.307542 C67.0604204,251.890693 58.7310279,226.56652 58.7310279,226.56652 C52.2766299,210.166193 42.9768456,205.805304 42.9768456,205.805304 C30.1032937,196.998939 43.9472374,197.17986 43.9472374,197.17986 C58.1953153,198.180797 65.6976425,211.801527 65.6976425,211.801527 C78.35268,233.493192 98.8906827,227.222064 106.987463,223.596605 C108.260955,214.426049 111.938106,208.166669 115.995895,204.623447 C84.4804813,201.035582 51.3508808,188.869264 51.3508808,134.501475 C51.3508808,119.01045 56.8936274,106.353063 65.9701981,96.4165325 C64.4969882,92.842765 59.6403297,78.411417 67.3447241,58.8673023 C67.3447241,58.8673023 79.2596322,55.0538738 106.374213,73.4114319 C117.692318,70.2676443 129.83044,68.6910512 141.888675,68.63701 C153.94691,68.6910512 166.09443,70.2676443 177.433682,73.4114319 C204.515368,55.0538738 216.413829,58.8673023 216.413829,58.8673023 C224.13702,78.411417 219.278012,92.842765 217.804802,96.4165325 C226.902519,106.353063 232.407672,119.01045 232.407672,134.501475 C232.407672,188.998493 199.214632,200.997988 167.619331,204.510665 C172.708602,208.913848 177.243363,217.54869 177.243363,230.786433 C177.243363,249.771339 177.078889,265.050898 177.078889,269.724287 C177.078889,273.500121 179.632923,277.92445 186.825101,276.531127 C243.171268,257.748288 283.775,204.581154 283.775,141.912168 C283.775,63.5477395 220.248404,0.0234927555 141.888675,0.0234927555" /></g>
+  </svg>
+);
 
 const AppBarTest = () => (
-  <AppBar fixed flat>
-    <a href="http://github.com/home">React Toolbox Docs</a>
-    <Navigation />
+  <AppBar title='React Toolbox' leftIcon='menu' rightIcon={<GithubIcon />}>
+    <Navigation type='horizontal'>
+      <Link href='http://' label='Inbox' icon='inbox' />
+      <Link href='http://' active label='Profile' icon='person' />
+    </Navigation>
   </AppBar>
 );
 ```
diff --git a/docs/app/components/layout/main/modules/components.js b/docs/app/components/layout/main/modules/components.js
index 41a7ad780..8e6477742 100644
--- a/docs/app/components/layout/main/modules/components.js
+++ b/docs/app/components/layout/main/modules/components.js
@@ -29,6 +29,7 @@ import Tooltip from 'react-toolbox/tooltip/readme';
 import TimePicker from 'react-toolbox/time_picker/readme';
 
 // Examples for the Playground
+import AppBarExample1 from './examples/app_bar_example_1.txt';
 import AutocompleteExample1 from './examples/autocomplete_example_1.txt';
 import AvatarExample1 from './examples/avatar_example_1.txt';
 import ButtonExample1 from './examples/button_example_1.txt';
@@ -61,7 +62,8 @@ export default {
   app_bar: {
     name: 'App Bar',
     docs: AppBar,
-    path: '/components/app_bar'
+    path: '/components/app_bar',
+    examples: [AppBarExample1]
   },
   autocomplete: {
     name: 'Autocomplete',
diff --git a/docs/app/components/layout/main/modules/examples/app_bar_example_1.txt b/docs/app/components/layout/main/modules/examples/app_bar_example_1.txt
new file mode 100644
index 000000000..246fb96a8
--- /dev/null
+++ b/docs/app/components/layout/main/modules/examples/app_bar_example_1.txt
@@ -0,0 +1,16 @@
+const GithubIcon = () => (
+  <svg viewBox="0 0 284 277">
+    <g><path d="M141.888675,0.0234927555 C63.5359948,0.0234927555 0,63.5477395 0,141.912168 C0,204.6023 40.6554239,257.788232 97.0321356,276.549924 C104.12328,277.86336 106.726656,273.471926 106.726656,269.724287 C106.726656,266.340838 106.595077,255.16371 106.533987,243.307542 C67.0604204,251.890693 58.7310279,226.56652 58.7310279,226.56652 C52.2766299,210.166193 42.9768456,205.805304 42.9768456,205.805304 C30.1032937,196.998939 43.9472374,197.17986 43.9472374,197.17986 C58.1953153,198.180797 65.6976425,211.801527 65.6976425,211.801527 C78.35268,233.493192 98.8906827,227.222064 106.987463,223.596605 C108.260955,214.426049 111.938106,208.166669 115.995895,204.623447 C84.4804813,201.035582 51.3508808,188.869264 51.3508808,134.501475 C51.3508808,119.01045 56.8936274,106.353063 65.9701981,96.4165325 C64.4969882,92.842765 59.6403297,78.411417 67.3447241,58.8673023 C67.3447241,58.8673023 79.2596322,55.0538738 106.374213,73.4114319 C117.692318,70.2676443 129.83044,68.6910512 141.888675,68.63701 C153.94691,68.6910512 166.09443,70.2676443 177.433682,73.4114319 C204.515368,55.0538738 216.413829,58.8673023 216.413829,58.8673023 C224.13702,78.411417 219.278012,92.842765 217.804802,96.4165325 C226.902519,106.353063 232.407672,119.01045 232.407672,134.501475 C232.407672,188.998493 199.214632,200.997988 167.619331,204.510665 C172.708602,208.913848 177.243363,217.54869 177.243363,230.786433 C177.243363,249.771339 177.078889,265.050898 177.078889,269.724287 C177.078889,273.500121 179.632923,277.92445 186.825101,276.531127 C243.171268,257.748288 283.775,204.581154 283.775,141.912168 C283.775,63.5477395 220.248404,0.0234927555 141.888675,0.0234927555" /></g>
+  </svg>
+);
+
+const AppBarTest = () => (
+  <AppBar title="React Toolbox" leftIcon="menu" rightIcon={<GithubIcon />}>
+    <Navigation type="horizontal">
+      <Link href="http://" label="Inbox" icon="inbox" />
+      <Link href="http://" active label="Profile" icon="person" />
+    </Navigation>
+  </AppBar>
+);
+
+return <AppBarTest />

From 2e2047927c8bb3b11ae07cb604732a4f7db13d11 Mon Sep 17 00:00:00 2001
From: Antti Ahti <antti.ahti@gmail.com>
Date: Wed, 2 Nov 2016 22:21:26 +0200
Subject: [PATCH 0904/1024] Use AppBar attributes instead of IconButton in
 example

---
 components/layout/readme.md                                     | 2 +-
 .../layout/main/modules/examples/layout_example_1.txt           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/layout/readme.md b/components/layout/readme.md
index 74a563249..fb672e78a 100644
--- a/components/layout/readme.md
+++ b/components/layout/readme.md
@@ -37,7 +37,7 @@ class LayoutTest extends React.Component {
                     </p>
                 </NavDrawer>
                 <Panel>
-                    <AppBar><IconButton icon='menu' inverse={ true } onClick={ this.toggleDrawerActive }/></AppBar>
+                    <AppBar leftIcon='menu' onLeftIconClick={ this.toggleDrawerActive } />
                     <div style={{ flex: 1, overflowY: 'auto', padding: '1.8rem' }}>
                         <h1>Main Content</h1>
                         <p>Main content goes here.</p>
diff --git a/docs/app/components/layout/main/modules/examples/layout_example_1.txt b/docs/app/components/layout/main/modules/examples/layout_example_1.txt
index 0844289cc..77aa21e60 100644
--- a/docs/app/components/layout/main/modules/examples/layout_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/layout_example_1.txt
@@ -28,7 +28,7 @@ class LayoutTest extends React.Component {
                     </p>
                 </NavDrawer>
                 <Panel>
-                    <AppBar><IconButton icon='menu' inverse={ true } onClick={ this.toggleDrawerActive }/></AppBar>
+                    <AppBar leftIcon='menu' onLeftIconClick={ this.toggleDrawerActive } />
                     <div style={{ flex: 1, overflowY: 'auto', padding: '1.8rem' }}>
                         <h1>Main Content</h1>
                         <p>Main content goes here.</p>

From 03a334cc0983c1b7558ef3de211bb926ec9e97cd Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 3 Nov 2016 19:00:21 +0100
Subject: [PATCH 0905/1024] Run build

---
 lib/button/IconButton.js | 2 +-
 lib/snackbar/Snackbar.js | 7 -------
 lib/snackbar/index.d.ts  | 8 --------
 lib/snackbar/theme.scss  | 4 ----
 4 files changed, 1 insertion(+), 20 deletions(-)

diff --git a/lib/button/IconButton.js b/lib/button/IconButton.js
index 4844cf2f7..81bdd19cb 100644
--- a/lib/button/IconButton.js
+++ b/lib/button/IconButton.js
@@ -96,7 +96,7 @@ var factory = function factory(ripple, FontIcon) {
           'data-react-toolbox': 'button'
         });
 
-        return _react2.default.createElement(element, props, icon ? _react2.default.createElement(FontIcon, { className: theme.icon, value: icon }) : null, children);
+        return _react2.default.createElement(element, props, icon ? typeof icon === 'string' ? _react2.default.createElement(FontIcon, { className: theme.icon, value: icon }) : icon : null, children);
       }
     }]);
 
diff --git a/lib/snackbar/Snackbar.js b/lib/snackbar/Snackbar.js
index 70d66ab99..2535733a6 100644
--- a/lib/snackbar/Snackbar.js
+++ b/lib/snackbar/Snackbar.js
@@ -23,10 +23,6 @@ var _ActivableRenderer = require('../hoc/ActivableRenderer.js');
 
 var _ActivableRenderer2 = _interopRequireDefault(_ActivableRenderer);
 
-var _FontIcon = require('../font_icon/FontIcon.js');
-
-var _FontIcon2 = _interopRequireDefault(_FontIcon);
-
 var _Overlay = require('../overlay/Overlay.js');
 
 var _Overlay2 = _interopRequireDefault(_Overlay);
@@ -80,7 +76,6 @@ var factory = function factory(Overlay, Button) {
             action = _props.action,
             active = _props.active,
             children = _props.children,
-            icon = _props.icon,
             label = _props.label,
             onClick = _props.onClick,
             theme = _props.theme,
@@ -94,7 +89,6 @@ var factory = function factory(Overlay, Button) {
           _react2.default.createElement(
             'div',
             { 'data-react-toolbox': 'snackbar', className: className },
-            icon ? _react2.default.createElement(_FontIcon2.default, { value: icon, className: theme.icon }) : null,
             _react2.default.createElement(
               'span',
               { className: theme.label },
@@ -115,7 +109,6 @@ var factory = function factory(Overlay, Button) {
     active: _react.PropTypes.bool,
     children: _react.PropTypes.node,
     className: _react.PropTypes.string,
-    icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
     label: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
     onClick: _react.PropTypes.func,
     onTimeout: _react.PropTypes.func,
diff --git a/lib/snackbar/index.d.ts b/lib/snackbar/index.d.ts
index adf1b8390..cc95d3a88 100644
--- a/lib/snackbar/index.d.ts
+++ b/lib/snackbar/index.d.ts
@@ -18,10 +18,6 @@ export interface SnackbarTheme {
    * Added to the root element in case it's cancel type.
    */
   cancel?: string;
-  /**
-   * Used for the icon element.
-   */
-  icon?: string;
   /**
    * Used for the label element.
    */
@@ -46,10 +42,6 @@ interface SnackbarProps extends ReactToolbox.Props {
    * @default true
    */
   active?: boolean;
-  /**
-   * String key for an icon or Element which will be displayed in left side of the snackbar.
-   */
-  icon?: React.ReactNode | string;
   /**
    * Text to display in the content. Required.
    */
diff --git a/lib/snackbar/theme.scss b/lib/snackbar/theme.scss
index e9e7071ac..4c7d0770e 100644
--- a/lib/snackbar/theme.scss
+++ b/lib/snackbar/theme.scss
@@ -35,10 +35,6 @@
   }
 }
 
-.icon {
-  margin-right: $snackbar-vertical-offset;
-}
-
 .label {
   flex-grow: 1;
   font-size: $font-size-small;

From e7b0d463d20d1c5ad41171fba97f93114e3614be Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 3 Nov 2016 19:01:15 +0100
Subject: [PATCH 0906/1024] Release 1.2.5

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 72449495b..880274293 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "react-toolbox",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "homepage": "http://www.react-toolbox.com/",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "main": "./lib",
   "author": {
     "name": "React Toolbox Team",

From 00a0a9f16ab85dc03547f7de5a4ff21255d05150 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 5 Nov 2016 12:04:59 +0100
Subject: [PATCH 0907/1024] Fix #930

---
 components/date_picker/DatePicker.js | 2 +-
 components/time_picker/TimePicker.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/date_picker/DatePicker.js b/components/date_picker/DatePicker.js
index 19251f03f..8c9c6bb9e 100644
--- a/components/date_picker/DatePicker.js
+++ b/components/date_picker/DatePicker.js
@@ -62,7 +62,7 @@ const factory = (Input, DatePickerDialog) => {
     };
 
     componentWillReceiveProps (nextProps) {
-      if (this.state.active !== nextProps.active) {
+      if (nextProps.active !== this.props.active && this.state.active !== nextProps.active) {
         this.setState({ active: nextProps.active });
       }
     }
diff --git a/components/time_picker/TimePicker.js b/components/time_picker/TimePicker.js
index 9b26ef694..ebceb501e 100644
--- a/components/time_picker/TimePicker.js
+++ b/components/time_picker/TimePicker.js
@@ -44,7 +44,7 @@ const factory = (TimePickerDialog, Input) => {
     };
 
     componentWillReceiveProps (nextProps) {
-      if (this.state.active !== nextProps.active) {
+      if (nextProps.active !== this.props.active && this.state.active !== nextProps.active) {
         this.setState({ active: nextProps.active });
       }
     }

From e240cf237e35c46bc94011d2f9e4f7dabc33e658 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 5 Nov 2016 12:22:44 +0100
Subject: [PATCH 0908/1024] Fix #866

---
 components/dropdown/Dropdown.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/components/dropdown/Dropdown.js b/components/dropdown/Dropdown.js
index b780b0110..fca2da3b9 100644
--- a/components/dropdown/Dropdown.js
+++ b/components/dropdown/Dropdown.js
@@ -59,22 +59,27 @@ const factory = (Input) => {
 
     componentWillUpdate (nextProps, nextState) {
       if (!this.state.active && nextState.active) {
-        events.addEventsToDocument({click: this.handleDocumentClick});
+        events.addEventsToDocument(this.getDocumentEvents());
       }
     }
 
     componentDidUpdate (prevProps, prevState) {
       if (prevState.active && !this.state.active) {
-        events.removeEventsFromDocument({click: this.handleDocumentClick});
+        events.removeEventsFromDocument(this.getDocumentEvents());
       }
     }
 
     componentWillUnmount () {
       if (this.state.active) {
-        events.removeEventsFromDocument({click: this.handleDocumentClick});
+        events.removeEventsFromDocument(this.getDocumentEvents());
       }
     }
 
+    getDocumentEvents = () => ({
+      click: this.handleDocumentClick,
+      touchend: this.handleDocumentClick
+    });
+
     close = () => {
       if (this.state.active) {
         this.setState({active: false});
@@ -94,6 +99,7 @@ const factory = (Input) => {
       const up = this.props.auto ? client.top > ((screen_height / 2) + client.height) : false;
       if (this.props.onClick) this.props.onClick(event);
       if (this.props.onFocus) this.props.onFocus(event);
+      if (this.inputNode) this.inputNode.blur();
       this.setState({active: true, up});
     };
 
@@ -169,6 +175,7 @@ const factory = (Input) => {
             onClick={this.handleClick}
             required={this.props.required}
             readOnly
+            ref={node => { this.inputNode = node && node.getWrappedInstance(); }}
             type={template && selected ? 'hidden' : null}
             value={selected && selected.label ? selected.label : ''}
           />

From c3a614c05e67b99e3d54b6da06246b7fbaf867c0 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 5 Nov 2016 12:23:32 +0100
Subject: [PATCH 0909/1024] Add internal ip to easily test other devices

---
 package.json |  1 +
 server.js    | 11 +++++++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 880274293..eeb1304c0 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,7 @@
     "git-dirty": "~1.0.2",
     "glob": "~7.1.1",
     "immutability-helper": "~2.0.0",
+    "internal-ip": "~1.2.0",
     "karma": "~1.3.0",
     "karma-cli": "~1.0.0",
     "karma-mocha": "~1.2.0",
diff --git a/server.js b/server.js
index e52c1bbc3..19af0fa5e 100644
--- a/server.js
+++ b/server.js
@@ -1,6 +1,7 @@
 const path = require('path');
 const express = require('express');
 const webpack = require('webpack');
+const internalIp = require('internal-ip');
 const config = require('./webpack.config.development');
 
 const app = express();
@@ -20,11 +21,17 @@ app.get('*', function (req, res) {
   res.sendFile(path.join(__dirname, './spec/index.html'));
 });
 
-app.listen(8080, '0.0.0.0', function (err) {
+const port = 8080;
+const ip = internalIp.v4();
+
+app.listen(port, (err) => {
   if (err) {
     console.log(err);
     return;
   }
 
-  console.log('Listening at http://0.0.0.0:8080');
+  console.log(' --------------------------------------');
+  console.log(`    Local: http://0.0.0.0:${port}`);
+  console.log(` External: http://${ip}:${port}`);
+  console.log(' --------------------------------------');
 });

From 9d8c975cc46327a470d08d7cda7b755914489773 Mon Sep 17 00:00:00 2001
From: Antti Ahti <antti.ahti@gmail.com>
Date: Sat, 5 Nov 2016 13:32:57 +0200
Subject: [PATCH 0910/1024] Add example of multiword icon name

The Material UI documentation mentions icon names like "account circle".
It was not documented anywhere that the separator has to be an
underscore: "account_circle".
---
 components/font_icon/readme.md                                   | 1 +
 .../layout/main/modules/examples/font_icon_example_1.txt         | 1 +
 2 files changed, 2 insertions(+)

diff --git a/components/font_icon/readme.md b/components/font_icon/readme.md
index eb28a7b0c..6ead0ef9b 100644
--- a/components/font_icon/readme.md
+++ b/components/font_icon/readme.md
@@ -10,6 +10,7 @@ const FontIcons = () => (
   <span>
     <FontIcon value='add' />
     <FontIcon value='favorite' />
+    <FontIcon value='account_circle' />
     <FontIcon>star</FontIcon>
   </span>
 );
diff --git a/docs/app/components/layout/main/modules/examples/font_icon_example_1.txt b/docs/app/components/layout/main/modules/examples/font_icon_example_1.txt
index dfaebaf96..ca44de5c3 100644
--- a/docs/app/components/layout/main/modules/examples/font_icon_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/font_icon_example_1.txt
@@ -2,6 +2,7 @@ const FontIcons = () => (
   <span>
     <FontIcon value='add' />
     <FontIcon value='favorite' />
+    <FontIcon value='account_circle' />
     <FontIcon>star</FontIcon>
   </span>
 );

From d0a9032fe7c616fcce78c50865d134c87c1b9746 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 6 Nov 2016 12:36:31 +0100
Subject: [PATCH 0911/1024] Fix #877

---
 components/autocomplete/Autocomplete.js | 3 ++-
 components/autocomplete/readme.md       | 3 ++-
 components/autocomplete/theme.scss      | 9 ---------
 3 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index 22502c3c3..897c64049 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -35,7 +35,6 @@ const factory = (Chip, Input) => {
        autocomplete: PropTypes.string,
        focus: PropTypes.string,
        input: PropTypes.string,
-       label: PropTypes.string,
        suggestion: PropTypes.string,
        suggestions: PropTypes.string,
        up: PropTypes.string,
@@ -308,6 +307,8 @@ const factory = (Chip, Input) => {
            onFocus={this.handleQueryFocus}
            onKeyDown={this.handleQueryKeyDown}
            onKeyUp={this.handleQueryKeyUp}
+           theme={theme}
+           themeNamespace="input"
            value={this.state.query}
          />
          {this.renderSuggestions()}
diff --git a/components/autocomplete/readme.md b/components/autocomplete/readme.md
index 79b2fdee6..6e30ea2e4 100644
--- a/components/autocomplete/readme.md
+++ b/components/autocomplete/readme.md
@@ -63,13 +63,14 @@ Additional properties will be passed to the Input Component so you can use `hint
 
 ## Theme
 
+This component uses an `Input` under the covers. The theme object is passed down namespaced under `input` keyword. This means you can use the same theme classNames from `Input` component but namespaced with `input`. For example, to style the label you have to use `inputLabel` className.
+
 | Name     | Description|
 |:---------|:-----------|
 | `active` | Used for a suggestion when it's active.|
 | `autocomplete`  | Used for the root element.|
 | `focus`   | Used when the input is focused.|
 | `input`   | Used to style the `Input` component.|
-| `label`   | Used for the label.|
 | `suggestion`   | Used to style each suggestion.|
 | `suggestions`   | Used to style the suggestions container.|
 | `up`   | Used for the suggestions when it's opening to the top.|
diff --git a/components/autocomplete/theme.scss b/components/autocomplete/theme.scss
index 320f8c8ef..f12136579 100644
--- a/components/autocomplete/theme.scss
+++ b/components/autocomplete/theme.scss
@@ -8,9 +8,6 @@
   position: relative;
   padding: $unit 0;
   &.focus {
-    .label {
-      color: $autocomplete-color-primary;
-    }
     .suggestions {
       max-height: $autocomplete-overflow-max-height;
       visibility: visible;
@@ -19,12 +16,6 @@
   }
 }
 
-.label {
-  font-size: $font-size-tiny;
-  color: $color-text-secondary;
-  transition: color $animation-duration $animation-curve-default;
-}
-
 .values {
   flex-direction: row;
   flex-wrap: wrap;

From 1fefbae412707d11749b4086fe526c03492e9cdd Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 6 Nov 2016 13:02:22 +0100
Subject: [PATCH 0912/1024] Fix #883

---
 components/autocomplete/Autocomplete.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index 897c64049..c527e5446 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -96,7 +96,7 @@ const factory = (Chip, Input) => {
    };
 
    handleQueryChange = (value) => {
-     this.setState({query: value, showAllSuggestions: false});
+     this.setState({query: value, showAllSuggestions: false, active: null});
    };
 
    handleQueryFocus = () => {

From 89647815cbb7eae9426d4063d4634b8d6ec196d2 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 6 Nov 2016 13:45:38 +0100
Subject: [PATCH 0913/1024] Fix #250

---
 components/checkbox/theme.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/checkbox/theme.scss b/components/checkbox/theme.scss
index 3c77203b8..55b179205 100644
--- a/components/checkbox/theme.scss
+++ b/components/checkbox/theme.scss
@@ -28,6 +28,7 @@
 }
 
 .input {
+  position: absolute;
   width: 0;
   height: 0;
   overflow: hidden;

From df8146535048828429eb4ccffe8c0cbeae9e2ba5 Mon Sep 17 00:00:00 2001
From: Antti Ahti <antti.ahti@gmail.com>
Date: Sun, 6 Nov 2016 21:18:36 +0200
Subject: [PATCH 0914/1024] Update Google URLs

---
 README.md                                             |  4 ++--
 components/_globals.scss                              |  6 +++---
 components/button/readme.md                           |  2 +-
 components/card/readme.md                             |  2 +-
 components/checkbox/readme.md                         |  2 +-
 components/date_picker/readme.md                      |  2 +-
 components/dialog/readme.md                           |  2 +-
 components/drawer/readme.md                           |  2 +-
 components/font_icon/readme.md                        |  2 +-
 components/input/readme.md                            |  2 +-
 components/layout/_config.scss                        |  2 +-
 components/layout/readme.md                           | 10 +++++-----
 components/list/readme.md                             |  2 +-
 components/menu/readme.md                             |  2 +-
 components/progress_bar/readme.md                     |  2 +-
 components/radio/readme.md                            |  2 +-
 components/slider/readme.md                           |  2 +-
 components/tabs/readme.md                             |  2 +-
 components/time_picker/readme.md                      |  2 +-
 docs/app/components/layout/install/install.md         |  4 ++--
 docs/app/components/layout/main/modules/components.md |  2 +-
 lib/_globals.scss                                     |  6 +++---
 22 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/README.md b/README.md
index bfb6c699f..b7ea44063 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 [![npm version](https://img.shields.io/npm/v/react-toolbox.svg?style=flat-square)](https://www.npmjs.com/package/react-toolbox) [![Build Status](http://img.shields.io/travis/react-toolbox/react-toolbox/master.svg?style=flat-square)](https://travis-ci.org/react-toolbox/react-toolbox) [![NPM Status](http://img.shields.io/npm/dm/react-toolbox.svg?style=flat-square)](https://www.npmjs.org/package/react-toolbox) [![react-toolbox channel on discord](https://img.shields.io/badge/discord-%23react--toolbox%20%40%20reactiflux-61dafb.svg?style=flat-square)](https://discord.gg/0ZcbPKXt5bW9FLzM) [![Donate](https://img.shields.io/badge/donate-paypal-blue.svg?style=flat-square)](https://paypal.me/javivelasco)
 
-React Toolbox is a set of [React](http://facebook.github.io/react/) components that implement [Google's Material Design specification](https://www.google.com/design/spec/material-design/introduction.html). It's powered by [CSS Modules](https://github.com/css-modules/css-modules) and harmoniously integrates with your [webpack](http://webpack.github.io/) workflow, although you can use any other module bundler. You can take a tour through our documentation website and try the components live!
+React Toolbox is a set of [React](http://facebook.github.io/react/) components that implement [Google's Material Design specification](https://material.google.com/). It's powered by [CSS Modules](https://github.com/css-modules/css-modules) and harmoniously integrates with your [webpack](http://webpack.github.io/) workflow, although you can use any other module bundler. You can take a tour through our documentation website and try the components live!
 
 ## Installation
 
@@ -179,7 +179,7 @@ A couple of things here. First you need to use raw components to get this styles
 
 ## Roboto Font and Material Design Icons
 
-React Toolbox assumes that you are importing [Roboto Font](https://fonts.google.com/specimen/Roboto) and [Material Design Icons](https://www.google.com/design/icons/).
+React Toolbox assumes that you are importing [Roboto Font](https://fonts.google.com/specimen/Roboto) and [Material Design Icons](https://material.io/icons/).
 
 In order to import the fonts for you, we'd need to include them in the CSS which is considered a bad practice. If you are not including them in your app, go to the linked sites and follow the instructions.
 
diff --git a/components/_globals.scss b/components/_globals.scss
index 191881082..73edd5f9e 100644
--- a/components/_globals.scss
+++ b/components/_globals.scss
@@ -56,16 +56,16 @@ $z-index-lower: -200 !default;
 
 //-- Breakpoints
 // height of app bar
-// https://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-keylines-spacing
+// https://material.google.com/layout/metrics-keylines.html#metrics-keylines-keylines-spacing
 $standard-increment-mobile: (5.6 * $unit) !default;
 $standard-increment-desktop: (6.4 * $unit) !default;
 
-// https://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-baseline-grids
+// https://material.google.com/layout/metrics-keylines.html#metrics-keylines-baseline-grids
 $baseline-grid: (0.8 * $unit) !default;
 $layout-gutter-width-sm: ($baseline-grid * 2) !default;
 $layout-gutter-width: ($baseline-grid * 3) !default;
 
-// https://www.google.com/design/spec/layout/responsive-ui.html#responsive-ui-breakpoints
+// https://material.google.com/layout/responsive-ui.html#responsive-ui-breakpoints
 // 4 columns
 $layout-breakpoint-xxs: 480px !default;
 // 8 columns
diff --git a/components/button/readme.md b/components/button/readme.md
index 41aa3547c..9bbe4ac36 100644
--- a/components/button/readme.md
+++ b/components/button/readme.md
@@ -1,6 +1,6 @@
 # Button
 
-A [button](https://www.google.com/design/spec/components/buttons.html) clearly communicates what action will occur when the user touches it. It consists of text, an image, or both, designed in accordance with your app’s color theme.
+A [button](https://material.google.com/components/buttons.html) clearly communicates what action will occur when the user touches it. It consists of text, an image, or both, designed in accordance with your app’s color theme.
 
 <!-- example -->
 ```jsx
diff --git a/components/card/readme.md b/components/card/readme.md
index 5b2049515..1cd1b88a3 100644
--- a/components/card/readme.md
+++ b/components/card/readme.md
@@ -1,6 +1,6 @@
 # Card
 
-A [Card](https://www.google.com/design/spec/components/cards.html) is a piece of paper with unique related data that serves as an entry point to more detailed information. For example, a card could contain a photo, text, and a link about a single subject.
+A [Card](https://material.google.com/components/cards.html) is a piece of paper with unique related data that serves as an entry point to more detailed information. For example, a card could contain a photo, text, and a link about a single subject.
 
 Cards are composed of multiple subcomponents in React Toolbox. You can combine each of the subcomponents to create all different Material Design Cards given in the spec.
 
diff --git a/components/checkbox/readme.md b/components/checkbox/readme.md
index a6d1d0f05..b14af09e1 100644
--- a/components/checkbox/readme.md
+++ b/components/checkbox/readme.md
@@ -1,6 +1,6 @@
 # Checkbox
 
-[Checkboxes](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox) allow the user to select multiple options from a set. If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches. If you have a single option, avoid using a checkbox and use an on/off switch instead.
+[Checkboxes](https://material.google.com/components/selection-controls.html#selection-controls-checkbox) allow the user to select multiple options from a set. If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches. If you have a single option, avoid using a checkbox and use an on/off switch instead.
 
 <!-- example -->
 ```jsx
diff --git a/components/date_picker/readme.md b/components/date_picker/readme.md
index 06eeae5e5..a66e35b7d 100644
--- a/components/date_picker/readme.md
+++ b/components/date_picker/readme.md
@@ -1,6 +1,6 @@
 # Date Picker
 
-A [dialog](https://www.google.com/design/spec/components/pickers.html#pickers-date-pickers) date  picker is used to select a single date. The selected day is indicated by a filled circle. The current day is indicated by a different color and type weight.
+A [dialog](https://material.google.com/components/pickers.html#pickers-date-pickers) date  picker is used to select a single date. The selected day is indicated by a filled circle. The current day is indicated by a different color and type weight.
 
 <!-- example -->
 ```jsx
diff --git a/components/dialog/readme.md b/components/dialog/readme.md
index e3c2bb46a..5b26bf5ee 100644
--- a/components/dialog/readme.md
+++ b/components/dialog/readme.md
@@ -1,6 +1,6 @@
 # Dialog
 
-[Dialogs](https://www.google.com/design/spec/components/dialogs.html) contain text and UI controls focused on a specific task. They inform users about critical information, require users to make decisions, or involve multiple tasks. You would need an additional component to take actions and display or hide the dialog.
+[Dialogs](https://material.google.com/components/dialogs.html) contain text and UI controls focused on a specific task. They inform users about critical information, require users to make decisions, or involve multiple tasks. You would need an additional component to take actions and display or hide the dialog.
 
 <!-- example -->
 ```jsx
diff --git a/components/drawer/readme.md b/components/drawer/readme.md
index fe28bb9f7..3c2f795c0 100644
--- a/components/drawer/readme.md
+++ b/components/drawer/readme.md
@@ -1,6 +1,6 @@
 # Drawer
 
-The [navigation drawer](https://www.google.com/design/spec/patterns/navigation-drawer.html) slides in from the left. It is a common pattern found in Google apps and follows the keylines and metrics for lists.
+The [navigation drawer](https://material.google.com/patterns/navigation-drawer.html) slides in from the left. It is a common pattern found in Google apps and follows the keylines and metrics for lists.
 
 <!-- example -->
 ```jsx
diff --git a/components/font_icon/readme.md b/components/font_icon/readme.md
index 6ead0ef9b..3ceb3ea10 100644
--- a/components/font_icon/readme.md
+++ b/components/font_icon/readme.md
@@ -1,6 +1,6 @@
 # Font Icon
 
-The font icon component is used to represent an icon from the [Google Material Design](https://www.google.com/design/icons/) icon font. React Toolbox does **not** provide the font icon for you. You need to get the icons using whatever method you want. We recommend to import the font and the associated CSS from Google Fonts as is specified [here](http://google.github.io/material-design-icons/#getting-icons).
+The font icon component is used to represent an icon from the [Google Material Design](https://material.io/icons/) icon font. React Toolbox does **not** provide the font icon for you. You need to get the icons using whatever method you want. We recommend to import the font and the associated CSS from Google Fonts as is specified [here](http://google.github.io/material-design-icons/#getting-icons).
 
 <!-- example -->
 ```jsx
diff --git a/components/input/readme.md b/components/input/readme.md
index 81154a5c5..495a93f65 100644
--- a/components/input/readme.md
+++ b/components/input/readme.md
@@ -1,6 +1,6 @@
 # Input
 
-Although we are calling them Inputs they actually correspond to Material Design [Text fields](https://www.google.com/design/spec/components/text-fields.html). It allows a user to input text and it's the base for other components like the autocomplete.
+Although we are calling them Inputs they actually correspond to Material Design [Text fields](https://material.google.com/components/text-fields.html). It allows a user to input text and it's the base for other components like the autocomplete.
 
 <!-- example -->
 ```jsx
diff --git a/components/layout/_config.scss b/components/layout/_config.scss
index a1b318f7a..16f778f18 100644
--- a/components/layout/_config.scss
+++ b/components/layout/_config.scss
@@ -5,7 +5,7 @@ $drawer-text-color: $palette-grey-800 !default;
 $drawer-overlay-color: $color-black !default;
 $drawer-overlay-opacity: .6 !default;
 
-// from: https://www.google.com/design/spec/layout/structure.html#structure-side-nav
+// from: https://material.google.com/layout/structure.html#structure-side-nav
 $navigation-drawer-desktop-width: 5 * $standard-increment-desktop !default;
 $navigation-drawer-max-desktop-width: 40 * $unit !default;
 
diff --git a/components/layout/readme.md b/components/layout/readme.md
index fb672e78a..7a0d88d82 100644
--- a/components/layout/readme.md
+++ b/components/layout/readme.md
@@ -1,6 +1,6 @@
 # Layout
 
-A Layout is a container that can hold a main content area with an optional navigation drawer (on the left) and/or sidebar (on the right). According to the [material design spec](https://www.google.com/design/spec/layout/structure.html#structure-side-nav), the left drawer is typically used for navigation or identity-based content, while the right sidebar is secondary content related to the main content.
+A Layout is a container that can hold a main content area with an optional navigation drawer (on the left) and/or sidebar (on the right). According to the [material design spec](https://material.google.com/layout/structure.html#structure-side-nav), the left drawer is typically used for navigation or identity-based content, while the right sidebar is secondary content related to the main content.
 
 <!-- example -->
 ```jsx
@@ -65,7 +65,7 @@ The primary layout component. This acts as the main container that all subcompon
 
 ### Breakpoints and Increments
 
-The Layout's subcomponents can alter their appearance and behavior based on the current screen size. The layout uses the screen breakpoints described in the [material design spec](https://www.google.com/design/spec/layout/responsive-ui.html#responsive-ui-breakpoints), namely:
+The Layout's subcomponents can alter their appearance and behavior based on the current screen size. The layout uses the screen breakpoints described in the [material design spec](https://material.google.com/layout/responsive-ui.html#responsive-ui-breakpoints), namely:
 
 | Width | Abreviation | Typical Device |
 |:-----|:-----|:-----|
@@ -80,7 +80,7 @@ The Layout's subcomponents can alter their appearance and behavior based on the
 | 1600px | `xxl` | desktop |
 | 1920px | `xxxl` | desktop |
 
-The components also make use of [standard increments](https://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-sizing-by-increments), which is a unit equal to the height of the action bar. At mobile sizes (< `xs`) the increment is 56px. On larger screens, it is 64px.
+The components also make use of [standard increments](https://material.google.com/layout/metrics-keylines.html#metrics-keylines-sizing-by-increments), which is a unit equal to the height of the action bar. At mobile sizes (< `xs`) the increment is 56px. On larger screens, it is 64px.
 
 ### Content Area Layout
 
@@ -103,7 +103,7 @@ The themed key the `Layout` in general is `ToolboxLayout`. For the `Layout` wrap
 
 ## NavDrawer
 
-The [navigation drawer](https://www.google.com/design/spec/patterns/navigation-drawer.html) slides in from the left and usually holds [the application's main navigation](https://www.google.com/design/spec/layout/structure.html#structure-side-nav). The drawer's width is based on the screen size:
+The [navigation drawer](https://material.google.com/patterns/navigation-drawer.html) slides in from the left and usually holds [the application's main navigation](https://material.google.com/layout/structure.html#structure-side-nav). The drawer's width is based on the screen size:
 
 | Breakpoint | Drawer Width | Notes |
 |:-----|:-----|:-----|
@@ -160,7 +160,7 @@ The `Panel` is the main content area within a `Layout`.  It is a full-height fle
 
 ## Sidebar
 
-The `Sidebar` is an extra drawer that docks to the right side of the `Layout`. The sidebar's width can be set either to a multiple of the "standard increment" (1 - 12 increments) or as a percentage of the parent `Layout` width (25%, 33%, 50%, 66%, 75%, 100%). Regardless of the width set, at mobile screen sizes the sidebar acts like a full-screen dialog that covers the entire screen (see [examples](https://www.google.com/design/spec/layout/structure.html#structure-side-nav)).
+The `Sidebar` is an extra drawer that docks to the right side of the `Layout`. The sidebar's width can be set either to a multiple of the "standard increment" (1 - 12 increments) or as a percentage of the parent `Layout` width (25%, 33%, 50%, 66%, 75%, 100%). Regardless of the width set, at mobile screen sizes the sidebar acts like a full-screen dialog that covers the entire screen (see [examples](https://material.google.com/layout/structure.html#structure-side-nav)).
 
 ### Properties
 | Name | Type | Default | Description |
diff --git a/components/list/readme.md b/components/list/readme.md
index 49021ccc4..edc4c93de 100644
--- a/components/list/readme.md
+++ b/components/list/readme.md
@@ -1,6 +1,6 @@
 # List
 
-A [list component](https://www.google.com/design/spec/components/lists.html) consists of a single continuous column of tessellated sub-divisions of equal width called rows that function as containers for tiles. Tiles hold content, and can vary in height within a list.
+A [list component](https://material.google.com/components/lists.html) consists of a single continuous column of tessellated sub-divisions of equal width called rows that function as containers for tiles. Tiles hold content, and can vary in height within a list.
 
 Lists are best suited to presenting a homogeneous data type or sets of data types, such as images and text, optimized for reading comprehension with the goal of differentiating between like data types or qualities within a single data type. You can compose lists based on subcomponents.
 
diff --git a/components/menu/readme.md b/components/menu/readme.md
index 2a5876c2c..e88357ed2 100644
--- a/components/menu/readme.md
+++ b/components/menu/readme.md
@@ -1,6 +1,6 @@
 # Menu
 
-A [Menu](https://www.google.com/design/spec/components/menus.html) is a temporary piece of material emitted from a button, an action, a pointer, or another control that contains at least two menu items. Each menu item is a discrete option or action that can affect the app, the view, or selected elements within a view. Menus should not be used as a primary method for navigation within an app. You can compose a menu based on a few subcomponents, same as for Lists.
+A [Menu](https://material.google.com/components/menus.html) is a temporary piece of material emitted from a button, an action, a pointer, or another control that contains at least two menu items. Each menu item is a discrete option or action that can affect the app, the view, or selected elements within a view. Menus should not be used as a primary method for navigation within an app. You can compose a menu based on a few subcomponents, same as for Lists.
 
 <!-- example -->
 ```jsx
diff --git a/components/progress_bar/readme.md b/components/progress_bar/readme.md
index 9ca0963c8..813043f13 100644
--- a/components/progress_bar/readme.md
+++ b/components/progress_bar/readme.md
@@ -1,6 +1,6 @@
 # Progress Bar
 
-Minimize visual changes that occur while your app loads content by representing each operation with a single [activity indicator](https://www.google.com/design/spec/components/progress-activity.html). For example, a refresh operation should display either a refresh bar or an activity circle, but not both.
+Minimize visual changes that occur while your app loads content by representing each operation with a single [activity indicator](https://material.google.com/components/progress-activity.html). For example, a refresh operation should display either a refresh bar or an activity circle, but not both.
 
 <!-- example -->
 ```jsx
diff --git a/components/radio/readme.md b/components/radio/readme.md
index 0e95454e4..78f8df4f5 100644
--- a/components/radio/readme.md
+++ b/components/radio/readme.md
@@ -1,6 +1,6 @@
 # Radio buttons
 
-[Radio buttons](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-radio-button) allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side. Otherwise, consider a dropdown, which uses less space than displaying all options. They should always be used along with `RadioGroup`.
+[Radio buttons](https://material.google.com/components/selection-controls.html#selection-controls-radio-button) allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side. Otherwise, consider a dropdown, which uses less space than displaying all options. They should always be used along with `RadioGroup`.
 
 You can provide the theme for this component using the key `ToolboxButton`
 
diff --git a/components/slider/readme.md b/components/slider/readme.md
index 4830050a8..57eaa2558 100644
--- a/components/slider/readme.md
+++ b/components/slider/readme.md
@@ -1,6 +1,6 @@
 # Slider
 
-[Sliders](https://www.google.com/design/spec/components/sliders.html#) let users select a value from a continuous or discrete range of values by moving the slider thumb. The smallest value is to the left, the largest to the right. Sliders can have icons to the left and right of the bar that reflect the value intensity. The interactive nature of the slider makes it a great choice for settings that reflect intensity levels, such as volume, brightness, or color saturation.
+[Sliders](https://material.google.com/components/sliders.html) let users select a value from a continuous or discrete range of values by moving the slider thumb. The smallest value is to the left, the largest to the right. Sliders can have icons to the left and right of the bar that reflect the value intensity. The interactive nature of the slider makes it a great choice for settings that reflect intensity levels, such as volume, brightness, or color saturation.
 
 <!-- example -->
 ```jsx
diff --git a/components/tabs/readme.md b/components/tabs/readme.md
index 1ead805ac..07680ce95 100644
--- a/components/tabs/readme.md
+++ b/components/tabs/readme.md
@@ -1,6 +1,6 @@
 # Tabs
 
-[Tabs](https://www.google.com/design/spec/components/tabs.html) make it easy to explore and switch between different views or functional aspects of an app or to browse categorized data sets.  Tabs are composed with their content, but only the active tab's content is rendered.  In the future, we may add the ability to render headers only, with event listeners.
+[Tabs](https://material.google.com/components/tabs.html) make it easy to explore and switch between different views or functional aspects of an app or to browse categorized data sets.  Tabs are composed with their content, but only the active tab's content is rendered.  In the future, we may add the ability to render headers only, with event listeners.
 
 <!-- example -->
 ```jsx
diff --git a/components/time_picker/readme.md b/components/time_picker/readme.md
index bdf879a8d..2224128e4 100644
--- a/components/time_picker/readme.md
+++ b/components/time_picker/readme.md
@@ -1,6 +1,6 @@
 # Time Picker
 
-A [dialog picker](https://www.google.com/design/spec/components/pickers.html#pickers-time-pickers) is used to select a single time (hours:minutes). The selected time is indicated by the filled circle at the end of the clock hand.
+A [dialog picker](https://material.google.com/components/pickers.html#pickers-time-pickers) is used to select a single time (hours:minutes). The selected time is indicated by the filled circle at the end of the clock hand.
 
 <!-- example -->
 ```jsx
diff --git a/docs/app/components/layout/install/install.md b/docs/app/components/layout/install/install.md
index 9ba7392d2..07662def0 100644
--- a/docs/app/components/layout/install/install.md
+++ b/docs/app/components/layout/install/install.md
@@ -1,6 +1,6 @@
 # Installation, usage and customization
 
-React Toolbox is a set of [React](http://facebook.github.io/react/) components that implement [Google's Material Design specification](https://www.google.com/design/spec/material-design/introduction.html). It's powered by [CSS Modules](https://github.com/css-modules/css-modules) and harmoniously integrates with your [webpack](http://webpack.github.io/) workflow, although you can use any other module bundler. You can take a tour through our documentation website and try the components live!
+React Toolbox is a set of [React](http://facebook.github.io/react/) components that implement [Google's Material Design specification](https://material.google.com/). It's powered by [CSS Modules](https://github.com/css-modules/css-modules) and harmoniously integrates with your [webpack](http://webpack.github.io/) workflow, although you can use any other module bundler. You can take a tour through our documentation website and try the components live!
 
 ## Installation
 
@@ -177,7 +177,7 @@ A couple of things here. First you need to use raw components to get this styles
 
 ## Roboto Font and Material Design Icons
 
-React Toolbox assumes that you are importing [Roboto Font](https://www.google.com/fonts/specimen/Roboto) and [Material Design Icons](https://www.google.com/design/icons/).
+React Toolbox assumes that you are importing [Roboto Font](https://fonts.google.com/specimen/Roboto) and [Material Design Icons](https://material.io/icons/).
 
 In order to import the fonts for you, we'd need to include them in the CSS which is considered a bad practice. If you are not including them in your app, go to the linked sites and follow the instructions.
 
diff --git a/docs/app/components/layout/main/modules/components.md b/docs/app/components/layout/main/modules/components.md
index cf55b6f90..3a69810dd 100644
--- a/docs/app/components/layout/main/modules/components.md
+++ b/docs/app/components/layout/main/modules/components.md
@@ -1,6 +1,6 @@
 # React Toolbox Components
 
-React Toolbox is a library of [React](http://facebook.github.io/react/) Components based on [Google's Material Design specification](https://www.google.com/design/spec/material-design/introduction.html). The main purpose of this documentation is to explore each of the components and learn how to use them. To make the best possible experience and to experiment with the components' properties and methods, we've created a playground to try the components live.
+React Toolbox is a library of [React](http://facebook.github.io/react/) Components based on [Google's Material Design specification](https://material.google.com/). The main purpose of this documentation is to explore each of the components and learn how to use them. To make the best possible experience and to experiment with the components' properties and methods, we've created a playground to try the components live.
 
 On the top right side of the screen you will see a round button with a code icon. It opens a playground with a small in-browser editor and an area to render what you type in real time. Inside the documentation of each component you will see one or multiple example code boxes. Each of them can include a button to open the given code in the playground.
 
diff --git a/lib/_globals.scss b/lib/_globals.scss
index 191881082..73edd5f9e 100644
--- a/lib/_globals.scss
+++ b/lib/_globals.scss
@@ -56,16 +56,16 @@ $z-index-lower: -200 !default;
 
 //-- Breakpoints
 // height of app bar
-// https://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-keylines-spacing
+// https://material.google.com/layout/metrics-keylines.html#metrics-keylines-keylines-spacing
 $standard-increment-mobile: (5.6 * $unit) !default;
 $standard-increment-desktop: (6.4 * $unit) !default;
 
-// https://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-baseline-grids
+// https://material.google.com/layout/metrics-keylines.html#metrics-keylines-baseline-grids
 $baseline-grid: (0.8 * $unit) !default;
 $layout-gutter-width-sm: ($baseline-grid * 2) !default;
 $layout-gutter-width: ($baseline-grid * 3) !default;
 
-// https://www.google.com/design/spec/layout/responsive-ui.html#responsive-ui-breakpoints
+// https://material.google.com/layout/responsive-ui.html#responsive-ui-breakpoints
 // 4 columns
 $layout-breakpoint-xxs: 480px !default;
 // 8 columns

From 9deddd8021790db9d0e4288b713a67f945c3b260 Mon Sep 17 00:00:00 2001
From: zverev <alexander.zverev@gmail.com>
Date: Mon, 7 Nov 2016 11:43:10 +0300
Subject: [PATCH 0915/1024] Update react-css-themr (~1.6.0)

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index eeb1304c0..e52b2bf56 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
     "classnames": "~2.2.5",
     "core-js": "~2.4.0",
     "normalize.css": "~4.2.0",
-    "react-css-themr": "~1.4.1"
+    "react-css-themr": "~1.6.0"
   },
   "devDependencies": {
     "autoprefixer": "~6.5.1",

From 6f0db34febe243d53d478fcfba37b43676ccaf21 Mon Sep 17 00:00:00 2001
From: dhamilton91 <dhamilton91@hotmail.com>
Date: Tue, 8 Nov 2016 09:06:34 -0500
Subject: [PATCH 0916/1024] Added enabled and disabled date properties to date
 picker.

---
 components/date_picker/Calendar.js         |  4 ++++
 components/date_picker/CalendarMonth.js    | 18 +++++++++++++++++-
 components/date_picker/DatePicker.js       |  6 +++++-
 components/date_picker/DatePickerDialog.js |  6 +++++-
 components/date_picker/readme.md           |  2 ++
 spec/components/pickers.js                 | 17 +++++++++++++++++
 6 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/components/date_picker/Calendar.js b/components/date_picker/Calendar.js
index 17d122da9..b8628fe74 100644
--- a/components/date_picker/Calendar.js
+++ b/components/date_picker/Calendar.js
@@ -10,7 +10,9 @@ const DIRECTION_STEPS = { left: -1, right: 1 };
 const factory = (IconButton) => {
   class Calendar extends Component {
     static propTypes = {
+      disabledDates: React.PropTypes.array,
       display: PropTypes.oneOf(['months', 'years']),
+      enabledDates: React.PropTypes.array,
       handleSelect: PropTypes.func,
       locale: React.PropTypes.oneOfType([
         React.PropTypes.string,
@@ -125,6 +127,8 @@ const factory = (IconButton) => {
           <IconButton id='right' className={theme.next} icon='chevron_right' onClick={this.changeViewMonth} />
           <CssTransitionGroup transitionName={animation} transitionEnterTimeout={350} transitionLeaveTimeout={350}>
             <CalendarMonth
+              enabledDates={this.props.enabledDates}
+              disabledDates={this.props.disabledDates}
               key={this.state.viewDate.getMonth()}
               locale={this.props.locale}
               maxDate={this.props.maxDate}
diff --git a/components/date_picker/CalendarMonth.js b/components/date_picker/CalendarMonth.js
index 8810505c8..38df2f2d5 100644
--- a/components/date_picker/CalendarMonth.js
+++ b/components/date_picker/CalendarMonth.js
@@ -5,6 +5,8 @@ import CalendarDay from './CalendarDay.js';
 
 class Month extends Component {
   static propTypes = {
+    disabledDates: React.PropTypes.array,
+    enabledDates: React.PropTypes.array,
     locale: React.PropTypes.oneOfType([
       React.PropTypes.string,
       React.PropTypes.object
@@ -27,6 +29,20 @@ class Month extends Component {
     if (this.props.onDayClick) this.props.onDayClick(day);
   };
 
+  isDayDisabled (date) {
+    const {minDate, maxDate, enabledDates, disabledDates} = this.props;
+    return time.dateOutOfRange(date, minDate, maxDate)
+        || (enabledDates && enabledDates.length > 0 && !this.findDate(date, enabledDates))
+        || (disabledDates && disabledDates.length > 0 && this.findDate(date, disabledDates));
+  }
+
+  findDate (comparisonDate, dates){
+    for (const date of dates){
+        if (comparisonDate.getTime() === date.getTime()) return true;
+    }
+    return false;
+  }
+
   renderWeeks () {
     const days = utils.range(0, 7).map(d => time.getDayOfWeekLetter(d, this.props.locale));
     const source = (this.props.sundayFirstDayOfWeek) ? days : [...days.slice(1), days[0]];
@@ -36,7 +52,7 @@ class Month extends Component {
   renderDays () {
     return utils.range(1, time.getDaysInMonth(this.props.viewDate) + 1).map(i => {
       const date = new Date(this.props.viewDate.getFullYear(), this.props.viewDate.getMonth(), i);
-      const disabled = time.dateOutOfRange(date, this.props.minDate, this.props.maxDate);
+      const disabled = this.isDayDisabled(date);
 
       return (
         <CalendarDay
diff --git a/components/date_picker/DatePicker.js b/components/date_picker/DatePicker.js
index 8c9c6bb9e..4d5163ec7 100644
--- a/components/date_picker/DatePicker.js
+++ b/components/date_picker/DatePicker.js
@@ -18,6 +18,8 @@ const factory = (Input, DatePickerDialog) => {
       autoOk: PropTypes.bool,
       cancelLabel: PropTypes.string,
       className: PropTypes.string,
+      disabledDates: React.PropTypes.array,
+      enabledDates: React.PropTypes.array,
       error: PropTypes.string,
       icon: PropTypes.oneOfType([
         PropTypes.string,
@@ -105,7 +107,7 @@ const factory = (Input, DatePickerDialog) => {
 
     render () {
       const { active, onDismiss,// eslint-disable-line
-        autoOk, cancelLabel, inputClassName, inputFormat, locale, maxDate, minDate,
+        autoOk, cancelLabel, enabledDates, disabledDates, inputClassName, inputFormat, locale, maxDate, minDate,
         okLabel, onEscKeyDown, onOverlayClick, readonly, sundayFirstDayOfWeek, value,
         ...others } = this.props;
       const finalInputFormat = inputFormat || time.formatDate;
@@ -134,6 +136,8 @@ const factory = (Input, DatePickerDialog) => {
             autoOk={autoOk}
             cancelLabel={cancelLabel}
             className={this.props.className}
+            disabledDates={disabledDates}
+            enabledDates={enabledDates}
             locale={locale}
             maxDate={maxDate}
             minDate={minDate}
diff --git a/components/date_picker/DatePickerDialog.js b/components/date_picker/DatePickerDialog.js
index d626fb0e8..278f59c39 100644
--- a/components/date_picker/DatePickerDialog.js
+++ b/components/date_picker/DatePickerDialog.js
@@ -9,6 +9,8 @@ const factory = (Dialog, Calendar) => {
       autoOk: PropTypes.bool,
       cancelLabel: PropTypes.string,
       className: PropTypes.string,
+      disabledDates: PropTypes.array,
+      enabledDates: PropTypes.array,
       locale: React.PropTypes.oneOfType([
         React.PropTypes.string,
         React.PropTypes.object
@@ -119,7 +121,9 @@ const factory = (Dialog, Calendar) => {
 
           <div className={theme.calendarWrapper}>
             <Calendar
+              disabledDates={this.props.disabledDates}
               display={this.state.display}
+              enabledDates={this.props.enabledDates}
               handleSelect={this.handleSelect}
               maxDate={this.props.maxDate}
               minDate={this.props.minDate}
@@ -127,7 +131,7 @@ const factory = (Dialog, Calendar) => {
               selectedDate={this.state.date}
               theme={this.props.theme}
               locale={this.props.locale}
-              sundayFirstDayOfWeek={this.props.sundayFirstDayOfWeek} />
+              sundayFirstDayOfWeek={this.props.sundayFirstDayOfWeek}/>
           </div>
         </Dialog>
       );
diff --git a/components/date_picker/readme.md b/components/date_picker/readme.md
index 06eeae5e5..21e83383b 100644
--- a/components/date_picker/readme.md
+++ b/components/date_picker/readme.md
@@ -49,6 +49,8 @@ If you want to provide a theme via context, the component key is `RTDatePicker`.
 | `active`        | `Boolean`       | `false`       | Allows to control if the picker should be shown from outside. Beware you should update the prop when the Dialog is closed. |
 | `autoOk`        | `Boolean`       | `false`       | Automatically selects a date upon clicking on a day. |
 | `className`     | `String`        |               | This class will be placed at the top of the `DatePickerDialog` component so you can provide custom styles.|
+| `disabledDates`     | `Array`        |               | An array of date objects which will be disabled in the calendar. All other dates will be enabled.|
+| `enabledDates`     | `Array`        |               | An array of date objects which will be enabled in the calendar. All other dates will be disabled.|
 | `inputClassName`| `String`        |               | This class will be applied to `Input` component of `DatePicker`. |
 | `inputFormat`   | `Function`      |               | Function to format the date displayed on the input. |
 | `label`         | `String`        |               | The text string to use for the floating label element in the input component.|
diff --git a/spec/components/pickers.js b/spec/components/pickers.js
index 3c1f996e1..2f3c128b4 100644
--- a/spec/components/pickers.js
+++ b/spec/components/pickers.js
@@ -8,6 +8,9 @@ const min_datetime = new Date(new Date(datetime).setDate(8));
 const max_datetime = new Date(new Date(datetime).setDate(24));
 datetime.setHours(17);
 datetime.setMinutes(28);
+const today = new Date();
+today.setHours(0, 0, 0, 0);
+const enabledDisabledDates = [new Date(today.getTime()), new Date(today.setDate(today.getDate() - 1))];
 
 class PickersTest extends React.Component {
   state = {
@@ -91,6 +94,20 @@ class PickersTest extends React.Component {
           value={this.state.date4}
         />
 
+        <DatePicker
+          label='Date picker with enabled dates'
+          onChange={this.handleChange.bind(this, 'date5')}
+          enabledDates={enabledDisabledDates}
+          value={this.state.date5}
+        />
+
+        <DatePicker
+          label='Date picker with disabled dates'
+          onChange={this.handleChange.bind(this, 'date6')}
+          disabledDates={enabledDisabledDates}
+          value={this.state.date6}
+        />
+
         <TimePicker
           label='Start time'
           onChange={this.handleChange.bind(this, 'time1')}

From 591889576c9b2880cab5eebe355cc1b88ee7836e Mon Sep 17 00:00:00 2001
From: Alexander Pinnecke <alexander.pinnecke@googlemail.com>
Date: Wed, 9 Nov 2016 18:34:54 +0100
Subject: [PATCH 0917/1024] Added german time settings

---
 components/utils/time.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/components/utils/time.js b/components/utils/time.js
index f7c9cede9..a6958fe2c 100644
--- a/components/utils/time.js
+++ b/components/utils/time.js
@@ -1,4 +1,11 @@
 const dateLocales = {
+  de: {
+    months: 'Januar_Februar_März_April_Mai_Juni_Juli_August_September_Oktober_November_Dezember'.split('_'),
+    monthsShort: 'Jan_Feb_März_Apr_Mai_Juni_Juli_Aug_Sept_Okt_Nov_Dez'.split('_'),
+    weekdays: 'Montag_Dienstag_Mittwoch_Donnerstag_Freitag_Samstag_Sonntag'.split('_'),
+    weekdaysShort: 'Mo_Di_Mi_Do_Fr_Sa_So'.split('_'),
+    weekdaysLetter: 'M_D_M_D_F_S_S'.split('_'),
+  },
   en: {
     months: 'January_February_March_April_May_June_July_August_September_October_November_December'.split('_'),
     monthsShort: 'Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec'.split('_'),

From 2657a94f33f07866a6aee623dc65ccc793eca7fd Mon Sep 17 00:00:00 2001
From: Alexander Pinnecke <alexander.pinnecke@googlemail.com>
Date: Wed, 9 Nov 2016 18:36:10 +0100
Subject: [PATCH 0918/1024] Added german time to docs

---
 components/date_picker/readme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/date_picker/readme.md b/components/date_picker/readme.md
index 06eeae5e5..ddfe54dd1 100644
--- a/components/date_picker/readme.md
+++ b/components/date_picker/readme.md
@@ -52,7 +52,7 @@ If you want to provide a theme via context, the component key is `RTDatePicker`.
 | `inputClassName`| `String`        |               | This class will be applied to `Input` component of `DatePicker`. |
 | `inputFormat`   | `Function`      |               | Function to format the date displayed on the input. |
 | `label`         | `String`        |               | The text string to use for the floating label element in the input component.|
-| `locale`        | `String` or `Object` | `'en'`     | Set the locale for the date picker dialog ('en','es','af','ar','be','bg','bn','bo','br','bs','ca','gl','eu','pt','it',fr'). Object is supported too (see example above). |
+| `locale`        | `String` or `Object` | `'en'`     | Set the locale for the date picker dialog ('de','en','es','af','ar','be','bg','bn','bo','br','bs','ca','gl','eu','pt','it',fr'). Object is supported too (see example above). |
 | `maxDate`       | `Date`          |               | Date object with the maximum selectable date. |
 | `minDate`       | `Date`          |               | Date object with the minimum selectable date. |
 | `onChange`      | `Function`      |               | Callback called when the picker value is changed.|

From e74e58e175b45216ef49b12c53a591bd469c6a13 Mon Sep 17 00:00:00 2001
From: Alexander Pinnecke <alexander.pinnecke@googlemail.com>
Date: Wed, 9 Nov 2016 18:40:53 +0100
Subject: [PATCH 0919/1024] Fix sunday to be first day of week

---
 components/utils/time.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/utils/time.js b/components/utils/time.js
index a6958fe2c..c688d56d8 100644
--- a/components/utils/time.js
+++ b/components/utils/time.js
@@ -2,9 +2,9 @@ const dateLocales = {
   de: {
     months: 'Januar_Februar_März_April_Mai_Juni_Juli_August_September_Oktober_November_Dezember'.split('_'),
     monthsShort: 'Jan_Feb_März_Apr_Mai_Juni_Juli_Aug_Sept_Okt_Nov_Dez'.split('_'),
-    weekdays: 'Montag_Dienstag_Mittwoch_Donnerstag_Freitag_Samstag_Sonntag'.split('_'),
-    weekdaysShort: 'Mo_Di_Mi_Do_Fr_Sa_So'.split('_'),
-    weekdaysLetter: 'M_D_M_D_F_S_S'.split('_'),
+    weekdays: 'Sonntag_Montag_Dienstag_Mittwoch_Donnerstag_Freitag_Samstag'.split('_'),
+    weekdaysShort: 'So_Mo_Di_Mi_Do_Fr_Sa'.split('_'),
+    weekdaysLetter: 'S_M_D_M_D_F_S'.split('_'),
   },
   en: {
     months: 'January_February_March_April_May_June_July_August_September_October_November_December'.split('_'),

From adf3567b18ad32450f6e424a5165bbafc4fe99d3 Mon Sep 17 00:00:00 2001
From: Alexander Pinnecke <alexander.pinnecke@googlemail.com>
Date: Wed, 9 Nov 2016 23:37:34 +0100
Subject: [PATCH 0920/1024] Fix linter issue with trailing comma in time utils

---
 components/utils/time.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/utils/time.js b/components/utils/time.js
index c688d56d8..e2545a933 100644
--- a/components/utils/time.js
+++ b/components/utils/time.js
@@ -4,7 +4,7 @@ const dateLocales = {
     monthsShort: 'Jan_Feb_März_Apr_Mai_Juni_Juli_Aug_Sept_Okt_Nov_Dez'.split('_'),
     weekdays: 'Sonntag_Montag_Dienstag_Mittwoch_Donnerstag_Freitag_Samstag'.split('_'),
     weekdaysShort: 'So_Mo_Di_Mi_Do_Fr_Sa'.split('_'),
-    weekdaysLetter: 'S_M_D_M_D_F_S'.split('_'),
+    weekdaysLetter: 'S_M_D_M_D_F_S'.split('_')
   },
   en: {
     months: 'January_February_March_April_May_June_July_August_September_October_November_December'.split('_'),

From 001a87181f890d5d799c65b8bb281e4af9581e52 Mon Sep 17 00:00:00 2001
From: Pit <anotherpit@gmail.com>
Date: Fri, 11 Nov 2016 00:45:15 +0300
Subject: [PATCH 0921/1024] Add Tabs' `inverse` and `hideMode` props in d.ts

---
 components/tabs/index.d.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/components/tabs/index.d.ts b/components/tabs/index.d.ts
index 15e5ee75d..d4d737b7c 100644
--- a/components/tabs/index.d.ts
+++ b/components/tabs/index.d.ts
@@ -39,6 +39,17 @@ interface TabsProps extends ReactToolbox.Props {
    * @default 0
    */
   index?: number;
+  /**
+   * `unmounted` mode will not mount the tab content of inactive tabs.
+   * `display` mode will mount but hide inactive tabs. 
+   * Consider holding state outside of the Tabs component before using `display` mode
+   * @default unmounted
+   */
+  hideMode?: 'display' | 'unmounted';
+  /**
+   * If True, the tabs will have an inverse style.
+   */
+  inverse?: boolean;
   /**
    * Callback function that is fired when the tab changes.
    */

From fb855bd140aeb23c360f7f0c53e6ffda72516833 Mon Sep 17 00:00:00 2001
From: Kristoffer Rene Eckhoff <kristoffereckhoff@gmail.com>
Date: Fri, 11 Nov 2016 14:54:44 +0100
Subject: [PATCH 0922/1024] Add no localization

Based on moment.js localizations
https://github.com/moment/moment/blob/develop/locale/nb.js
---
 lib/utils/time.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/lib/utils/time.js b/lib/utils/time.js
index 863b4586d..883fbc6c7 100644
--- a/lib/utils/time.js
+++ b/lib/utils/time.js
@@ -4,6 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var dateLocales = {
+   no: {
+    months: 'januar_februar_mars_april_mai_juni_juli_august_september_oktober_november_desember'.split('_'),
+    monthsShort: 'jan._feb._mars_april_mai_juni_juli_aug._sep._okt._nov._des.'.split('_'),
+    weekdays: 'søndag_mandag_tirsdag_onsdag_torsdag_fredag_lørdag'.split('_'),
+    weekdaysShort: 'sø._ma._ti._on._to._fr._lø'.split('_'),
+    weekdaysLetter: []
+  },
   en: {
     months: 'January_February_March_April_May_June_July_August_September_October_November_December'.split('_'),
     monthsShort: 'Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec'.split('_'),
@@ -279,4 +286,4 @@ var time = {
   }
 };
 
-exports.default = time;
\ No newline at end of file
+exports.default = time;

From 7eb6680998a794658c1142f84e94ca8744755c9d Mon Sep 17 00:00:00 2001
From: Kristoffer Rene Eckhoff <kristoffereckhoff@gmail.com>
Date: Fri, 11 Nov 2016 14:56:40 +0100
Subject: [PATCH 0923/1024] Add no localization

Based on moment.js norwegian time localization:
https://github.com/moment/moment/blob/develop/locale/nb.js
---
 components/utils/time.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/components/utils/time.js b/components/utils/time.js
index f7c9cede9..8929e3426 100644
--- a/components/utils/time.js
+++ b/components/utils/time.js
@@ -1,4 +1,11 @@
 const dateLocales = {
+   no: {
+    months: 'januar_februar_mars_april_mai_juni_juli_august_september_oktober_november_desember'.split('_'),
+    monthsShort: 'jan._feb._mars_april_mai_juni_juli_aug._sep._okt._nov._des.'.split('_'),
+    weekdays: 'søndag_mandag_tirsdag_onsdag_torsdag_fredag_lørdag'.split('_'),
+    weekdaysShort: 'sø._ma._ti._on._to._fr._lø'.split('_'),
+    weekdaysLetter: []
+  },
   en: {
     months: 'January_February_March_April_May_June_July_August_September_October_November_December'.split('_'),
     monthsShort: 'Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec'.split('_'),

From a4887282f448277093f31712ec95e6742cbccc40 Mon Sep 17 00:00:00 2001
From: Kristoffer Rene Eckhoff <kristoffereckhoff@gmail.com>
Date: Fri, 11 Nov 2016 16:20:29 +0100
Subject: [PATCH 0924/1024] Use 3 letter name instead of 2 plus .

---
 components/utils/time.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/utils/time.js b/components/utils/time.js
index 8929e3426..c2d703e96 100644
--- a/components/utils/time.js
+++ b/components/utils/time.js
@@ -3,7 +3,7 @@ const dateLocales = {
     months: 'januar_februar_mars_april_mai_juni_juli_august_september_oktober_november_desember'.split('_'),
     monthsShort: 'jan._feb._mars_april_mai_juni_juli_aug._sep._okt._nov._des.'.split('_'),
     weekdays: 'søndag_mandag_tirsdag_onsdag_torsdag_fredag_lørdag'.split('_'),
-    weekdaysShort: 'sø._ma._ti._on._to._fr._lø'.split('_'),
+    weekdaysShort: 'søn._man._tir_ons_tor_fre_lør'.split('_'),
     weekdaysLetter: []
   },
   en: {

From 47c314b033aae0b2eafb73dc604ede654940ff98 Mon Sep 17 00:00:00 2001
From: Kristoffer Rene Eckhoff <kristoffereckhoff@gmail.com>
Date: Fri, 11 Nov 2016 16:21:14 +0100
Subject: [PATCH 0925/1024] Use 3 letter name instead of 2+. for shortname day

---
 components/utils/time.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/utils/time.js b/components/utils/time.js
index c2d703e96..a09e2eb66 100644
--- a/components/utils/time.js
+++ b/components/utils/time.js
@@ -3,7 +3,7 @@ const dateLocales = {
     months: 'januar_februar_mars_april_mai_juni_juli_august_september_oktober_november_desember'.split('_'),
     monthsShort: 'jan._feb._mars_april_mai_juni_juli_aug._sep._okt._nov._des.'.split('_'),
     weekdays: 'søndag_mandag_tirsdag_onsdag_torsdag_fredag_lørdag'.split('_'),
-    weekdaysShort: 'søn._man._tir_ons_tor_fre_lør'.split('_'),
+    weekdaysShort: 'søn_man_tir_ons_tor_fre_lør'.split('_'),
     weekdaysLetter: []
   },
   en: {

From 40ba89c39cba1e156ed13fdf1e80cb34e848f75b Mon Sep 17 00:00:00 2001
From: Kristoffer Rene Eckhoff <kristoffereckhoff@gmail.com>
Date: Fri, 11 Nov 2016 16:22:17 +0100
Subject: [PATCH 0926/1024] Use 3 letter day name instead of 2 + .

---
 lib/utils/time.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/utils/time.js b/lib/utils/time.js
index 883fbc6c7..168b3107b 100644
--- a/lib/utils/time.js
+++ b/lib/utils/time.js
@@ -8,7 +8,7 @@ var dateLocales = {
     months: 'januar_februar_mars_april_mai_juni_juli_august_september_oktober_november_desember'.split('_'),
     monthsShort: 'jan._feb._mars_april_mai_juni_juli_aug._sep._okt._nov._des.'.split('_'),
     weekdays: 'søndag_mandag_tirsdag_onsdag_torsdag_fredag_lørdag'.split('_'),
-    weekdaysShort: 'sø._ma._ti._on._to._fr._lø'.split('_'),
+    weekdaysShort: 'søn_man_tir_ons_tor_fre_lør'.split('_'),
     weekdaysLetter: []
   },
   en: {

From 95b7403782ca1511f551bcff5b3f08984ef5cd11 Mon Sep 17 00:00:00 2001
From: rubenmoya <rmoyarodriguez@gmail.com>
Date: Mon, 14 Nov 2016 10:31:26 +0100
Subject: [PATCH 0927/1024] fix (#943): prevent navdrawer toggle when clicking
 on it

---
 components/layout/NavDrawer.js | 11 +++++------
 components/layout/_mixins.scss | 10 ++++------
 components/layout/theme.scss   |  4 +++-
 3 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/components/layout/NavDrawer.js b/components/layout/NavDrawer.js
index 05c34def0..f484bc518 100644
--- a/components/layout/NavDrawer.js
+++ b/components/layout/NavDrawer.js
@@ -16,12 +16,11 @@ const NavDrawer = ({ active, children, className, onOverlayClick, permanentAt, p
   });
 
   return (
-    <div data-react-toolbox='nav-drawer' className={rootClasses} onClick={onOverlayClick}>
-      <div data-react-toolbox='nav-drawer-scrim' className={theme.scrim}>
-        <aside data-react-toolbox='nav-drawer-content' className={drawerClasses}>
-          {children}
-        </aside>
-      </div>
+    <div data-react-toolbox='nav-drawer' className={rootClasses}>
+      <div data-react-toolbox='nav-drawer-scrim' className={theme.scrim} onClick={onOverlayClick} />
+      <aside data-react-toolbox='nav-drawer-content' className={drawerClasses}>
+        {children}
+      </aside>
     </div>
   );
 };
diff --git a/components/layout/_mixins.scss b/components/layout/_mixins.scss
index 1ace8de42..e998d174f 100644
--- a/components/layout/_mixins.scss
+++ b/components/layout/_mixins.scss
@@ -1,11 +1,9 @@
 @mixin open() {
   transition-delay: $animation-delay;
-  & > .scrim {
-    & > .drawerContent {
-      pointer-events: all;
-      transition-delay: $animation-delay;
-      transform: translateX(0);
-    }
+  .drawerContent {
+    pointer-events: all;
+    transition-delay: $animation-delay;
+    transform: translateX(0);
   }
 }
 
diff --git a/components/layout/theme.scss b/components/layout/theme.scss
index 17275cd16..405d5121b 100644
--- a/components/layout/theme.scss
+++ b/components/layout/theme.scss
@@ -29,7 +29,7 @@
       top: 0;
       bottom: 0;
       left: 0;
-      z-index: $z-index-highest;
+      z-index: $z-index-higher;
       width: 0;
       height: 100%;
       background-color: rgba($drawer-overlay-color, 0);
@@ -38,6 +38,8 @@
 
     .drawerContent {
       @include shadow-2dp();
+      position: absolute;
+      z-index: $z-index-highest;
       display: flex;
       width: $navigation-drawer-mobile-width;
       max-width: $navigation-drawer-max-mobile-width;

From c6706aef2a771eb36e7a1c89e13f2a1d02ad5c8e Mon Sep 17 00:00:00 2001
From: Maxim Komlev <maximkomlev@bitbucket.org>
Date: Tue, 15 Nov 2016 21:22:00 -0800
Subject: [PATCH 0928/1024] added extension topic at readme.md

---
 README.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/README.md b/README.md
index bfb6c699f..1ff0d058d 100644
--- a/README.md
+++ b/README.md
@@ -215,6 +215,11 @@ $ npm start
 
 Local documentation will then be available at `http://localhost:8081/`.
 
+## Extensions
+
+The additional components which are not covered by [Google Material Design](https://www.google.com/design/spec/material-design/introduction.html) but often used such as Pager, FilePicker,... are available in:
+    [on github: react-toolbox-additions](https://github.com/MaximKomlev/react-toolbox-additions), [on npm: react-toolbox-additions](https://www.npmjs.com/package/react-toolbox-additions)
+
 ## License
 
 This project is licensed under the terms of the [MIT license](https://github.com/react-toolbox/react-toolbox/blob/master/LICENSE).

From 00da4dd81546885e9b710ad6133e49a59d6ffe70 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 16 Nov 2016 11:34:16 +0100
Subject: [PATCH 0929/1024] Fix #894

---
 components/dialog/theme.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/dialog/theme.scss b/components/dialog/theme.scss
index 6293fe480..8757bdf0b 100644
--- a/components/dialog/theme.scss
+++ b/components/dialog/theme.scss
@@ -69,7 +69,6 @@
 .body {
   flex-grow: 2;
   padding: $dialog-content-padding;
-  overflow-y: auto;
   color: $color-text-secondary;
 }
 

From 956ea5778b131b376b297482541cd982303058a9 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 16 Nov 2016 12:14:55 +0100
Subject: [PATCH 0930/1024] Fix #900

---
 components/time_picker/TimePickerDialog.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/components/time_picker/TimePickerDialog.js b/components/time_picker/TimePickerDialog.js
index c38d19869..17cd7cbcd 100644
--- a/components/time_picker/TimePickerDialog.js
+++ b/components/time_picker/TimePickerDialog.js
@@ -44,9 +44,15 @@ const factory = (Dialog) => {
 
     state = {
       display: 'hours',
-      displayTime: this.props.value
+      displayTime: new Date(this.props.value.getTime())
     };
 
+    componentWillUpdate (nextProps) {
+      if (nextProps.value.getTime() !== this.state.displayTime.getTime()) {
+        this.setState({ displayTime: new Date(nextProps.value.getTime()) });
+      }
+    }
+
     componentDidUpdate (prevProps) {
       if (!prevProps.active && this.props.active) {
         setTimeout(this.refs.clock.handleCalculateShape, 1000);

From e40c77442e17fef178c8164fd4218f73f36bd161 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 16 Nov 2016 12:16:17 +0100
Subject: [PATCH 0931/1024] Latest build

---
 lib/autocomplete/Autocomplete.js    |  5 +++--
 lib/autocomplete/theme.scss         |  9 ---------
 lib/checkbox/theme.scss             |  1 +
 lib/date_picker/DatePicker.js       |  2 +-
 lib/dialog/theme.scss               |  1 -
 lib/dropdown/Dropdown.js            | 18 ++++++++++++++----
 lib/time_picker/TimePicker.js       |  2 +-
 lib/time_picker/TimePickerDialog.js |  9 ++++++++-
 8 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/lib/autocomplete/Autocomplete.js b/lib/autocomplete/Autocomplete.js
index 1a790e9f3..33f4a1690 100644
--- a/lib/autocomplete/Autocomplete.js
+++ b/lib/autocomplete/Autocomplete.js
@@ -90,7 +90,7 @@ var factory = function factory(Chip, Input) {
         if (_this.state.focus) _this.setState({ focus: false });
         if (_this.props.onBlur) _this.props.onBlur(event, _this.state.active);
       }, _this.handleQueryChange = function (value) {
-        _this.setState({ query: value, showAllSuggestions: false });
+        _this.setState({ query: value, showAllSuggestions: false, active: null });
       }, _this.handleQueryFocus = function () {
         _this.refs.suggestions.scrollTop = 0;
         _this.setState({ active: '', focus: true });
@@ -418,6 +418,8 @@ var factory = function factory(Chip, Input) {
             onFocus: this.handleQueryFocus,
             onKeyDown: this.handleQueryKeyDown,
             onKeyUp: this.handleQueryKeyUp,
+            theme: theme,
+            themeNamespace: 'input',
             value: this.state.query
           })),
           this.renderSuggestions(),
@@ -449,7 +451,6 @@ var factory = function factory(Chip, Input) {
       autocomplete: _react.PropTypes.string,
       focus: _react.PropTypes.string,
       input: _react.PropTypes.string,
-      label: _react.PropTypes.string,
       suggestion: _react.PropTypes.string,
       suggestions: _react.PropTypes.string,
       up: _react.PropTypes.string,
diff --git a/lib/autocomplete/theme.scss b/lib/autocomplete/theme.scss
index 320f8c8ef..f12136579 100644
--- a/lib/autocomplete/theme.scss
+++ b/lib/autocomplete/theme.scss
@@ -8,9 +8,6 @@
   position: relative;
   padding: $unit 0;
   &.focus {
-    .label {
-      color: $autocomplete-color-primary;
-    }
     .suggestions {
       max-height: $autocomplete-overflow-max-height;
       visibility: visible;
@@ -19,12 +16,6 @@
   }
 }
 
-.label {
-  font-size: $font-size-tiny;
-  color: $color-text-secondary;
-  transition: color $animation-duration $animation-curve-default;
-}
-
 .values {
   flex-direction: row;
   flex-wrap: wrap;
diff --git a/lib/checkbox/theme.scss b/lib/checkbox/theme.scss
index 3c77203b8..55b179205 100644
--- a/lib/checkbox/theme.scss
+++ b/lib/checkbox/theme.scss
@@ -28,6 +28,7 @@
 }
 
 .input {
+  position: absolute;
   width: 0;
   height: 0;
   overflow: hidden;
diff --git a/lib/date_picker/DatePicker.js b/lib/date_picker/DatePicker.js
index c5bb1ff10..fc73f80d3 100644
--- a/lib/date_picker/DatePicker.js
+++ b/lib/date_picker/DatePicker.js
@@ -108,7 +108,7 @@ var factory = function factory(Input, DatePickerDialog) {
     _createClass(DatePicker, [{
       key: 'componentWillReceiveProps',
       value: function componentWillReceiveProps(nextProps) {
-        if (this.state.active !== nextProps.active) {
+        if (nextProps.active !== this.props.active && this.state.active !== nextProps.active) {
           this.setState({ active: nextProps.active });
         }
       }
diff --git a/lib/dialog/theme.scss b/lib/dialog/theme.scss
index 6293fe480..8757bdf0b 100644
--- a/lib/dialog/theme.scss
+++ b/lib/dialog/theme.scss
@@ -69,7 +69,6 @@
 .body {
   flex-grow: 2;
   padding: $dialog-content-padding;
-  overflow-y: auto;
   color: $color-text-secondary;
 }
 
diff --git a/lib/dropdown/Dropdown.js b/lib/dropdown/Dropdown.js
index df4b6afa5..f03cfe9f2 100644
--- a/lib/dropdown/Dropdown.js
+++ b/lib/dropdown/Dropdown.js
@@ -63,6 +63,11 @@ var factory = function factory(Input) {
       return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Dropdown.__proto__ || Object.getPrototypeOf(Dropdown)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         active: false,
         up: false
+      }, _this.getDocumentEvents = function () {
+        return {
+          click: _this.handleDocumentClick,
+          touchend: _this.handleDocumentClick
+        };
       }, _this.close = function () {
         if (_this.state.active) {
           _this.setState({ active: false });
@@ -78,6 +83,7 @@ var factory = function factory(Input) {
         var up = _this.props.auto ? client.top > screen_height / 2 + client.height : false;
         if (_this.props.onClick) _this.props.onClick(event);
         if (_this.props.onFocus) _this.props.onFocus(event);
+        if (_this.inputNode) _this.inputNode.blur();
         _this.setState({ active: true, up: up });
       }, _this.handleSelect = function (item, event) {
         if (_this.props.onBlur) _this.props.onBlur(event);
@@ -133,21 +139,21 @@ var factory = function factory(Input) {
       key: 'componentWillUpdate',
       value: function componentWillUpdate(nextProps, nextState) {
         if (!this.state.active && nextState.active) {
-          _events2.default.addEventsToDocument({ click: this.handleDocumentClick });
+          _events2.default.addEventsToDocument(this.getDocumentEvents());
         }
       }
     }, {
       key: 'componentDidUpdate',
       value: function componentDidUpdate(prevProps, prevState) {
         if (prevState.active && !this.state.active) {
-          _events2.default.removeEventsFromDocument({ click: this.handleDocumentClick });
+          _events2.default.removeEventsFromDocument(this.getDocumentEvents());
         }
       }
     }, {
       key: 'componentWillUnmount',
       value: function componentWillUnmount() {
         if (this.state.active) {
-          _events2.default.removeEventsFromDocument({ click: this.handleDocumentClick });
+          _events2.default.removeEventsFromDocument(this.getDocumentEvents());
         }
       }
     }, {
@@ -187,7 +193,8 @@ var factory = function factory(Input) {
     }, {
       key: 'render',
       value: function render() {
-        var _classnames2;
+        var _classnames2,
+            _this2 = this;
 
         var _props = this.props,
             template = _props.template,
@@ -210,6 +217,9 @@ var factory = function factory(Input) {
             onClick: this.handleClick,
             required: this.props.required,
             readOnly: true,
+            ref: function ref(node) {
+              _this2.inputNode = node && node.getWrappedInstance();
+            },
             type: template && selected ? 'hidden' : null,
             value: selected && selected.label ? selected.label : ''
           })),
diff --git a/lib/time_picker/TimePicker.js b/lib/time_picker/TimePicker.js
index 114f76ab4..b71e6d9ea 100644
--- a/lib/time_picker/TimePicker.js
+++ b/lib/time_picker/TimePicker.js
@@ -100,7 +100,7 @@ var factory = function factory(TimePickerDialog, Input) {
     _createClass(TimePicker, [{
       key: 'componentWillReceiveProps',
       value: function componentWillReceiveProps(nextProps) {
-        if (this.state.active !== nextProps.active) {
+        if (nextProps.active !== this.props.active && this.state.active !== nextProps.active) {
           this.setState({ active: nextProps.active });
         }
       }
diff --git a/lib/time_picker/TimePickerDialog.js b/lib/time_picker/TimePickerDialog.js
index b5e7c48bd..5ff0ca659 100644
--- a/lib/time_picker/TimePickerDialog.js
+++ b/lib/time_picker/TimePickerDialog.js
@@ -47,7 +47,7 @@ var factory = function factory(Dialog) {
 
       return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TimePickerDialog.__proto__ || Object.getPrototypeOf(TimePickerDialog)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         display: 'hours',
-        displayTime: _this.props.value
+        displayTime: new Date(_this.props.value.getTime())
       }, _this.handleClockChange = function (value) {
         _this.setState({ displayTime: value });
       }, _this.handleSelect = function (event) {
@@ -62,6 +62,13 @@ var factory = function factory(Dialog) {
     }
 
     _createClass(TimePickerDialog, [{
+      key: 'componentWillUpdate',
+      value: function componentWillUpdate(nextProps) {
+        if (nextProps.value.getTime() !== this.state.displayTime.getTime()) {
+          this.setState({ displayTime: new Date(nextProps.value.getTime()) });
+        }
+      }
+    }, {
       key: 'componentDidUpdate',
       value: function componentDidUpdate(prevProps) {
         if (!prevProps.active && this.props.active) {

From a73fab29d33cfb2260c2bce959b8493a35892cb4 Mon Sep 17 00:00:00 2001
From: Alan Pearce <alan.pearce@alttag.org>
Date: Wed, 16 Nov 2016 22:41:31 -0800
Subject: [PATCH 0932/1024] Update instructions for running docs locally

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index bfb6c699f..77dec8f98 100644
--- a/README.md
+++ b/README.md
@@ -207,6 +207,7 @@ To start the documentation site locally, you'll need to install the dependencies
 
 ```
 $ git clone https://github.com/react-toolbox/react-toolbox.git
+$ cd react-toolbox/
 $ npm install
 $ cd docs/
 $ npm install

From 9cd7fba6b59d8949f620957807ccdc861eec2568 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Fri, 18 Nov 2016 18:35:20 +0100
Subject: [PATCH 0933/1024] Fix #902

---
 components/snackbar/Snackbar.js | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/components/snackbar/Snackbar.js b/components/snackbar/Snackbar.js
index b8d417128..2f6374871 100644
--- a/components/snackbar/Snackbar.js
+++ b/components/snackbar/Snackbar.js
@@ -33,13 +33,15 @@ const factory = (Overlay, Button) => {
       type: PropTypes.oneOf([ 'accept', 'cancel', 'warning' ])
     };
 
+    componentDidMount () {
+      if (this.props.active && this.props.timeout) {
+        this.scheduleTimeout(this.props);
+      }
+    }
+
     componentWillReceiveProps (nextProps) {
       if (nextProps.active && nextProps.timeout) {
-        if (this.curTimeout) clearTimeout(this.curTimeout);
-        this.curTimeout = setTimeout(() => {
-          nextProps.onTimeout();
-          this.curTimeout = null;
-        }, nextProps.timeout);
+        this.scheduleTimeout(nextProps);
       }
     }
 
@@ -47,6 +49,15 @@ const factory = (Overlay, Button) => {
       clearTimeout(this.curTimeout);
     }
 
+    scheduleTimeout = props => {
+      const { onTimeout, timeout } = props;
+      if (this.curTimeout) clearTimeout(this.curTimeout);
+      this.curTimeout = setTimeout(() => {
+        if (onTimeout) onTimeout();
+        this.curTimeout = null;
+      }, timeout);
+    }
+
     render () {
       const {action, active, children, label, onClick, theme, type } = this.props;
       const className = classnames([theme.snackbar, theme[type]], {

From 173cff00d8d8ae21473638d0160f1f5c49511edb Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Fri, 18 Nov 2016 18:47:39 +0100
Subject: [PATCH 0934/1024] Fix #904

---
 components/autocomplete/Autocomplete.js | 18 ++++++++++++------
 spec/components/autocomplete.js         |  1 +
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index c527e5446..4eabac7dc 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -21,6 +21,7 @@ const factory = (Chip, Input) => {
      direction: PropTypes.oneOf(['auto', 'up', 'down']),
      disabled: PropTypes.bool,
      error: PropTypes.string,
+     keepFocusOnChange: PropTypes.bool,
      label: PropTypes.string,
      multiple: PropTypes.bool,
      onBlur: PropTypes.func,
@@ -48,8 +49,9 @@ const factory = (Chip, Input) => {
      allowCreate: false,
      className: '',
      direction: 'auto',
-     selectedPosition: 'above',
+     keepFocusOnChange: false,
      multiple: true,
+     selectedPosition: 'above',
      showSuggestionsWhenValueIsSet: false,
      source: {},
      suggestionMatch: 'start'
@@ -82,12 +84,16 @@ const factory = (Chip, Input) => {
 
    handleChange = (keys, event) => {
      const key = this.props.multiple ? keys : keys[0];
+     const { showSuggestionsWhenValueIsSet: showAllSuggestions } = this.props;
      const query = this.query(key);
      if (this.props.onChange) this.props.onChange(key, event);
-     this.setState(
-       {focus: false, query, showAllSuggestions: this.props.showSuggestionsWhenValueIsSet},
-       () => { ReactDOM.findDOMNode(this).querySelector('input').blur(); }
-     );
+     if (this.props.keepFocusOnChange) {
+       this.setState({ query, showAllSuggestions });
+     } else {
+       this.setState({ focus: false, query, showAllSuggestions }, () => {
+         ReactDOM.findDOMNode(this).querySelector('input').blur();
+       });
+     }
    };
 
    handleQueryBlur = (event) => {
@@ -286,7 +292,7 @@ const factory = (Chip, Input) => {
    render () {
      const {
       allowCreate, error, label, source, suggestionMatch, //eslint-disable-line no-unused-vars
-      selectedPosition, showSuggestionsWhenValueIsSet,    //eslint-disable-line no-unused-vars
+      selectedPosition, keepFocusOnChange, showSuggestionsWhenValueIsSet,    //eslint-disable-line no-unused-vars
       theme, ...other
     } = this.props;
      const className = classnames(theme.autocomplete, {
diff --git a/spec/components/autocomplete.js b/spec/components/autocomplete.js
index 638ed9330..99362b4ef 100644
--- a/spec/components/autocomplete.js
+++ b/spec/components/autocomplete.js
@@ -37,6 +37,7 @@ class AutocompleteTest extends React.Component {
 
         <Autocomplete
           allowCreate
+          keepFocusOnChange
           label="Pick multiple elements..."
           onChange={this.handleMultipleChange}
           source={this.state.countriesObject}

From 25bba26244fa12ca436b8c6fd4487f227e35ffbc Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Fri, 18 Nov 2016 19:15:13 +0100
Subject: [PATCH 0935/1024] Fix #910

---
 components/list/List.js | 13 +++++++++----
 spec/components/list.js |  2 +-
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/components/list/List.js b/components/list/List.js
index 6091e496c..f7b46517e 100644
--- a/components/list/List.js
+++ b/components/list/List.js
@@ -4,6 +4,12 @@ import { themr } from 'react-css-themr';
 import { LIST } from '../identifiers.js';
 import InjectListItem from './ListItem.js';
 
+const mergeProp = (propName, child, parent) => (
+  child[propName] !== undefined
+  ? child[propName]
+  : parent[propName]
+);
+
 const factory = (ListItem) => {
   class List extends Component {
     static propTypes = {
@@ -25,10 +31,9 @@ const factory = (ListItem) => {
     renderItems () {
       return React.Children.map(this.props.children, (item) => {
         if (item.type === ListItem) {
-          return React.cloneElement(item, {
-            ripple: this.props.ripple,
-            selectable: this.props.selectable
-          });
+          const selectable = mergeProp('selectable', item.props, this.props);
+          const ripple = mergeProp('ripple', item.props, this.props);
+          return React.cloneElement(item, { selectable, ripple });
         } else {
           return React.cloneElement(item);
         }
diff --git a/spec/components/list.js b/spec/components/list.js
index 431a8b88a..45a4d6aa6 100644
--- a/spec/components/list.js
+++ b/spec/components/list.js
@@ -32,7 +32,7 @@ class ListTest extends React.Component {
           <List selectable ripple>
             <ListSubHeader caption='Contacts' />
             <ListItem caption='Inbox' leftIcon='inbox' />
-            <ListItem caption='Outbox' leftIcon='send' />
+            <ListItem caption='Outbox' selectable={false} ripple={false} leftIcon='send' />
             <ListItem caption='Trash' leftIcon='delete' />
             <ListItem caption='Spam' leftIcon='report' />
           </List>

From 056551e7b2c856b4884eb2ddf38eacd5c4ac02c1 Mon Sep 17 00:00:00 2001
From: Christian Droulers <droulers.christian@gmail.com>
Date: Fri, 18 Nov 2016 14:41:24 -0500
Subject: [PATCH 0936/1024] Add "tooltipShowOnClick" to Tooltip component

---
 components/tooltip/Tooltip.js | 18 +++++++++++++++---
 spec/components/tooltip.js    |  8 ++++++++
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/components/tooltip/Tooltip.js b/components/tooltip/Tooltip.js
index 64d3ff360..5f0102ba5 100644
--- a/components/tooltip/Tooltip.js
+++ b/components/tooltip/Tooltip.js
@@ -19,6 +19,7 @@ const defaults = {
   className: '',
   delay: 0,
   hideOnClick: true,
+  showOnClick: false,
   position: POSITION.VERTICAL,
   theme: {}
 };
@@ -28,6 +29,7 @@ const tooltipFactory = (options = {}) => {
     className: defaultClassName,
     delay: defaultDelay,
     hideOnClick: defaultHideOnClick,
+    showOnClick: defaultShowOnClick,
     position: defaultPosition,
     theme: defaultTheme
   } = {...defaults, ...options};
@@ -51,14 +53,16 @@ const tooltipFactory = (options = {}) => {
         ]),
         tooltipDelay: PropTypes.number,
         tooltipHideOnClick: PropTypes.bool,
-        tooltipPosition: PropTypes.oneOf(Object.keys(POSITION).map(key => POSITION[key]))
+        tooltipPosition: PropTypes.oneOf(Object.keys(POSITION).map(key => POSITION[key])),
+        tooltipShowOnClick: PropTypes.bool
       };
 
       static defaultProps = {
         className: defaultClassName,
         tooltipDelay: defaultDelay,
         tooltipHideOnClick: defaultHideOnClick,
-        tooltipPosition: defaultPosition
+        tooltipPosition: defaultPosition,
+        tooltipShowOnClick: defaultShowOnClick
       };
 
       state = {
@@ -158,7 +162,14 @@ const tooltipFactory = (options = {}) => {
       };
 
       handleClick = (event) => {
-        if (this.props.tooltipHideOnClick) this.deactivate();
+        if (this.props.tooltipHideOnClick && this.state.active) {
+            this.deactivate();
+        }
+
+        if (this.props.tooltipShowOnClick && !this.state.active) {
+          this.activate(this.calculatePosition(event.target));
+        }
+
         if (this.props.onClick) this.props.onClick(event);
       };
 
@@ -173,6 +184,7 @@ const tooltipFactory = (options = {}) => {
           tooltipDelay,       //eslint-disable-line no-unused-vars
           tooltipHideOnClick, //eslint-disable-line no-unused-vars
           tooltipPosition,    //eslint-disable-line no-unused-vars
+          tooltipShowOnClick, //eslint-disable-line no-unused-vars
           ...other
         } = this.props;
 
diff --git a/spec/components/tooltip.js b/spec/components/tooltip.js
index 8e87a2965..54ef43b4d 100644
--- a/spec/components/tooltip.js
+++ b/spec/components/tooltip.js
@@ -24,6 +24,14 @@ const TooltipTest = () => (
     />
     <TooltipInput tooltip='lorem ipsum...' />
     <p>Lorem ipsum dolor sit amet, <TooltipStrong tooltip='This is a auto show tooltip'>consectetur</TooltipStrong> adipiscing elit.</p>
+    <p>
+      Click this next word to show and hide on click:
+      {' '}
+      <TooltipStrong tooltip='This is a auto show tooltip' tooltipShowOnClick>
+        oh hai
+      </TooltipStrong>
+      {' '}. This is useful for mobile!
+    </p>
   </section>
 );
 

From 525c6b1e0caa32e266d27df8cb14a9c48942cf28 Mon Sep 17 00:00:00 2001
From: Alexandre Borela <alexandre@borela.tech>
Date: Fri, 18 Nov 2016 18:08:11 -0200
Subject: [PATCH 0937/1024] Restrict dependencies to major versions only.

---
 package.json | 118 +++++++++++++++++++++++++--------------------------
 1 file changed, 59 insertions(+), 59 deletions(-)

diff --git a/package.json b/package.json
index eeb1304c0..588ce8b86 100644
--- a/package.json
+++ b/package.json
@@ -36,64 +36,64 @@
     "toolkit"
   ],
   "dependencies": {
-    "classnames": "~2.2.5",
-    "core-js": "~2.4.0",
-    "normalize.css": "~4.2.0",
-    "react-css-themr": "~1.4.1"
+    "classnames": "^2.2.5",
+    "core-js": "^2.4.0",
+    "normalize.css": "^4.2.0",
+    "react-css-themr": "^1.4.1"
   },
   "devDependencies": {
-    "autoprefixer": "~6.5.1",
-    "babel-cli": "~6.16.0",
-    "babel-core": "~6.17.0",
-    "babel-eslint": "~7.0.0",
-    "babel-loader": "~6.2.4",
-    "babel-plugin-react-transform": "~2.0.2",
-    "babel-polyfill": "~6.16.0",
-    "babel-preset-es2015": "~6.16.0",
-    "babel-preset-react": "~6.16.0",
-    "babel-preset-stage-0": "~6.16.0",
-    "cpx": "~1.5.0",
-    "cross-env": "~3.1.3",
-    "css-loader": "~0.25.0",
-    "eslint": "~3.8.1",
-    "eslint-import-resolver-webpack": "~0.6.0",
-    "eslint-plugin-babel": "~3.3.0",
-    "eslint-plugin-import": "~2.0.1",
-    "eslint-plugin-jsx-a11y": "~2.2.3",
-    "eslint-plugin-react": "~6.4.1",
-    "expect": "~1.20.1",
-    "express": "~4.14.0",
-    "extract-text-webpack-plugin": "~1.0.1",
-    "git-dirty": "~1.0.2",
-    "glob": "~7.1.1",
-    "immutability-helper": "~2.0.0",
-    "internal-ip": "~1.2.0",
-    "karma": "~1.3.0",
-    "karma-cli": "~1.0.0",
-    "karma-mocha": "~1.2.0",
-    "karma-phantomjs-launcher": "~1.0.0",
-    "karma-webpack": "~1.8.0",
+    "autoprefixer": "^6.5.1",
+    "babel-cli": "^6.16.0",
+    "babel-core": "^6.17.0",
+    "babel-eslint": "^7.0.0",
+    "babel-loader": "^6.2.4",
+    "babel-plugin-react-transform": "^2.0.2",
+    "babel-polyfill": "^6.16.0",
+    "babel-preset-es2015": "^6.16.0",
+    "babel-preset-react": "^6.16.0",
+    "babel-preset-stage-0": "^6.16.0",
+    "cpx": "^1.5.0",
+    "cross-env": "^3.1.3",
+    "css-loader": "^0.25.0",
+    "eslint": "^3.8.1",
+    "eslint-import-resolver-webpack": "^0.6.0",
+    "eslint-plugin-babel": "^3.3.0",
+    "eslint-plugin-import": "^2.0.1",
+    "eslint-plugin-jsx-a11y": "^2.2.3",
+    "eslint-plugin-react": "^6.4.1",
+    "expect": "^1.20.1",
+    "express": "^4.14.0",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "git-dirty": "^1.0.2",
+    "glob": "^7.1.1",
+    "immutability-helper": "^2.0.0",
+    "internal-ip": "^1.2.0",
+    "karma": "^1.3.0",
+    "karma-cli": "^1.0.0",
+    "karma-mocha": "^1.2.0",
+    "karma-phantomjs-launcher": "^1.0.0",
+    "karma-webpack": "^1.8.0",
     "lint-staged": "^3.2.0",
-    "mocha": "~3.1.2",
-    "node-sass": "~3.10.1",
-    "phantomjs-prebuilt": "~2.1.7",
-    "postcss-loader": "~1.0.0",
+    "mocha": "^3.1.2",
+    "node-sass": "^3.10.1",
+    "phantomjs-prebuilt": "^2.1.7",
+    "postcss-loader": "^1.0.0",
     "pre-commit": "^1.1.3",
-    "react": "~15.3.0",
-    "react-addons-css-transition-group": "~15.3.0",
-    "react-addons-test-utils": "~15.3.0",
-    "react-dom": "~15.3.0",
-    "react-transform-catch-errors": "~1.0.2",
-    "react-transform-hmr": "~1.0.4",
-    "redbox-react": "~1.3.2",
-    "rimraf": "~2.5.2",
-    "sass-lint": "1.9.1",
-    "sass-loader": "~4.0.0",
-    "sinon": "~2.0.0-pre.2",
-    "style-loader": "~0.13.1",
-    "webpack": "~1.13.0",
-    "webpack-dev-middleware": "~1.8.4",
-    "webpack-hot-middleware": "~2.13.0"
+    "react": "^15.3.0",
+    "react-addons-css-transition-group": "^15.3.0",
+    "react-addons-test-utils": "^15.3.0",
+    "react-dom": "^15.3.0",
+    "react-transform-catch-errors": "^1.0.2",
+    "react-transform-hmr": "^1.0.4",
+    "redbox-react": "^1.3.2",
+    "rimraf": "^2.5.2",
+    "sass-lint": "^1.9.1",
+    "sass-loader": "^4.0.0",
+    "sinon": "^2.0.0-pre.2",
+    "style-loader": "^0.13.1",
+    "webpack": "^1.13.0",
+    "webpack-dev-middleware": "^1.8.4",
+    "webpack-hot-middleware": "^2.13.0"
   },
   "scripts": {
     "babel": "babel ./components --out-dir ./lib",
@@ -115,11 +115,11 @@
   },
   "license": "MIT",
   "peerDependencies": {
-    "classnames": "~2.2.0",
-    "immutability-helper": "~2.0.0",
-    "react": "~0.14 || ~15.3.0",
-    "react-addons-css-transition-group": "~0.14.0 || ~15.3.0",
-    "react-dom": "~0.14.0 || ~15.3.0"
+    "classnames": "^2.2.0",
+    "immutability-helper": "^2.0.0",
+    "react": "^0.14.0 || ^15.3.0",
+    "react-addons-css-transition-group": "^0.14.0 || ^15.3.0",
+    "react-dom": "^0.14.0 || ^15.3.0"
   },
   "pre-commit": "lint:staged"
 }

From cc9a78269a0e44b775d3e98a9811cc64a831d187 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 19 Nov 2016 12:35:06 +0100
Subject: [PATCH 0938/1024] Fix #915

---
 components/hoc/ActivableRenderer.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/components/hoc/ActivableRenderer.js b/components/hoc/ActivableRenderer.js
index 6eccf6680..d7ac8ad12 100644
--- a/components/hoc/ActivableRenderer.js
+++ b/components/hoc/ActivableRenderer.js
@@ -1,7 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 
-const ActivableRendererFactory = (options = {delay: 500}) => (ActivableComponent) => {
-  return class ActivableRenderer extends Component {
+const ActivableRendererFactory = (options = {delay: 500}) =>
+  ActivableComponent => class ActivableRenderer extends Component {
     static propTypes = {
       active: PropTypes.bool.isRequired,
       children: PropTypes.any,
@@ -22,10 +22,15 @@ const ActivableRendererFactory = (options = {delay: 500}) => (ActivableComponent
       if (!nextProps.active && this.props.active) this.deactivateAndUnrender();
     }
 
+    componentWillUnmount () {
+      clearTimeout(this.activateTimeout);
+      clearTimeout(this.unrenderTimeout);
+    }
+
     renderAndActivate () {
       if (this.unrenderTimeout) clearTimeout(this.unrenderTimeout);
       this.setState({ rendered: true, active: false }, () => {
-        setTimeout(() => this.setState({ active: true }), 20);
+        this.activateTimeout = setTimeout(() => this.setState({ active: true }), 20);
       });
     }
 
@@ -46,6 +51,5 @@ const ActivableRendererFactory = (options = {delay: 500}) => (ActivableComponent
         : null;
     }
   };
-};
 
 export default ActivableRendererFactory;

From 276e891ac14e00b09c9fa844c63d27881f8cde14 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 19 Nov 2016 22:49:47 +0100
Subject: [PATCH 0939/1024] Fix #297

---
 components/dropdown/Dropdown.js | 43 ++++++++++++++++++++++++++-------
 1 file changed, 34 insertions(+), 9 deletions(-)

diff --git a/components/dropdown/Dropdown.js b/components/dropdown/Dropdown.js
index fca2da3b9..158ec4614 100644
--- a/components/dropdown/Dropdown.js
+++ b/components/dropdown/Dropdown.js
@@ -80,6 +80,14 @@ const factory = (Input) => {
       touchend: this.handleDocumentClick
     });
 
+    open = () => {
+      const client = event.target.getBoundingClientRect();
+      const screenHeight = window.innerHeight || document.documentElement.offsetHeight;
+      const up = this.props.auto ? client.top > ((screenHeight / 2) + client.height) : false;
+      if (this.inputNode) this.inputNode.blur();
+      this.setState({active: true, up});
+    };
+
     close = () => {
       if (this.state.active) {
         this.setState({active: false});
@@ -93,14 +101,9 @@ const factory = (Input) => {
     };
 
     handleClick = (event) => {
+      this.open();
       events.pauseEvent(event);
-      const client = event.target.getBoundingClientRect();
-      const screen_height = window.innerHeight || document.documentElement.offsetHeight;
-      const up = this.props.auto ? client.top > ((screen_height / 2) + client.height) : false;
       if (this.props.onClick) this.props.onClick(event);
-      if (this.props.onFocus) this.props.onFocus(event);
-      if (this.inputNode) this.inputNode.blur();
-      this.setState({active: true, up});
     };
 
     handleSelect = (item, event) => {
@@ -110,7 +113,7 @@ const factory = (Input) => {
           event.target.name = this.props.name;
         }
         this.props.onChange(item, event);
-        this.setState({active: false});
+        this.close();
       }
     };
 
@@ -157,8 +160,23 @@ const factory = (Input) => {
       );
     };
 
+    handleFocus = event => {
+      event.stopPropagation();
+      if (!this.props.disabled) this.open();
+      if (this.props.onFocus) this.props.onFocus(event);
+    };
+
+    handleBlur = event => {
+      event.stopPropagation();
+      if (this.state.active) this.close();
+      if (this.props.onBlur) this.props.onBlur(event);
+    }
+
     render () {
-      const {template, theme, source, allowBlank, auto, required, ...others} = this.props; //eslint-disable-line no-unused-vars
+      const {
+        allowBlank, auto, required, onChange, onFocus, onBlur, //eslint-disable-line no-unused-vars
+        source, template, theme, ...others
+      } = this.props;
       const selected = this.getSelectedItem();
       const className = classnames(theme.dropdown, {
         [theme.up]: this.state.up,
@@ -168,9 +186,16 @@ const factory = (Input) => {
       }, this.props.className);
 
       return (
-        <div data-react-toolbox='dropdown' className={className}>
+        <div
+          className={className}
+          data-react-toolbox='dropdown'
+          onBlur={this.handleBlur}
+          onFocus={this.handleFocus}
+          tabIndex="0"
+        >
           <Input
             {...others}
+            tabIndex="-1"
             className={theme.value}
             onClick={this.handleClick}
             required={this.props.required}

From 02b38e8cedc5d706de9b9eb0cfe7607e9a593d8d Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 20 Nov 2016 11:39:03 +0100
Subject: [PATCH 0940/1024] Fix #941

---
 components/checkbox/Checkbox.js | 20 +++++++++++---------
 components/radio/RadioButton.js | 10 ++++++----
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/components/checkbox/Checkbox.js b/components/checkbox/Checkbox.js
index 3caac041f..69199d024 100644
--- a/components/checkbox/Checkbox.js
+++ b/components/checkbox/Checkbox.js
@@ -40,15 +40,15 @@ const factory = (Check) => {
     };
 
     blur () {
-      this.refs.input.blur();
+      this.inputNode && this.inputNode.blur();
     }
 
     focus () {
-      this.refs.input.focus();
+      this.inputNode && this.inputNode.focus();
     }
 
     render () {
-      const { onChange, theme, style, ...others } = this.props; //eslint-disable-line no-unused-vars
+      const { checked, disabled, label, style, theme, ...others } = this.props;
       const className = classnames(theme.field, {
         [theme.disabled]: this.props.disabled
       }, this.props.className);
@@ -57,20 +57,22 @@ const factory = (Check) => {
         <label data-react-toolbox='checkbox' className={className}>
           <input
             {...others}
+            checked={checked}
             className={theme.input}
+            disabled={disabled}
+            onChange={() => {}}
             onClick={this.handleToggle}
-            readOnly
-            ref='input'
+            ref={node => { this.inputNode = node; }}
             type='checkbox'
           />
           <Check
-            checked={this.props.checked}
-            disabled={this.props.disabled}
+            checked={checked}
+            disabled={disabled}
             rippleClassName={theme.ripple}
             style={style}
-            theme={this.props.theme}
+            theme={theme}
           />
-          {this.props.label ? <span data-react-toolbox='label' className={theme.text}>{this.props.label}</span> : null}
+          {label ? <span data-react-toolbox='label' className={theme.text}>{label}</span> : null}
         </label>
       );
     }
diff --git a/components/radio/RadioButton.js b/components/radio/RadioButton.js
index 85a4e279f..1628aa81e 100644
--- a/components/radio/RadioButton.js
+++ b/components/radio/RadioButton.js
@@ -41,11 +41,11 @@ const factory = (Radio) => {
     };
 
     blur () {
-      this.refs.input.blur();
+      this.inputNode && this.inputNode.blur();
     }
 
     focus () {
-      this.refs.input.focus();
+      this.inputNode && this.inputNode.focus();
     }
 
     render () {
@@ -55,10 +55,12 @@ const factory = (Radio) => {
         <label data-react-toolbox='radio-button' className={_className}>
           <input
             {...others}
+            checked={checked}
             className={theme.input}
+            disabled={disabled}
             onClick={this.handleClick}
-            readOnly
-            ref='input'
+            onChange={() => {}}
+            ref={node => { this.inputNode = node; }}
             type='radio'
           />
         <Radio checked={checked} disabled={disabled} theme={theme} />

From 6fb1bcd0c635fe4adf858eb32271a92ac8148066 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 20 Nov 2016 11:51:43 +0100
Subject: [PATCH 0941/1024] Fix #983

---
 components/autocomplete/Autocomplete.js | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index 4eabac7dc..3e9060b0c 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -106,7 +106,7 @@ const factory = (Chip, Input) => {
    };
 
    handleQueryFocus = () => {
-     this.refs.suggestions.scrollTop = 0;
+     this.suggestionsNode.scrollTop = 0;
      this.setState({active: '', focus: true});
      if (this.props.onFocus) this.props.onFocus();
    };
@@ -152,7 +152,7 @@ const factory = (Chip, Input) => {
 
    calculateDirection () {
      if (this.props.direction === 'auto') {
-       const client = ReactDOM.findDOMNode(this.refs.input).getBoundingClientRect();
+       const client = ReactDOM.findDOMNode(this.inputNode).getBoundingClientRect();
        const screen_height = window.innerHeight || document.documentElement.offsetHeight;
        const up = client.top > ((screen_height / 2) + client.height);
        return up ? 'up' : 'down';
@@ -285,8 +285,14 @@ const factory = (Chip, Input) => {
        );
      });
 
-     const className = classnames(theme.suggestions, {[theme.up]: this.state.direction === 'up'});
-     return <ul ref='suggestions' className={className}>{suggestions}</ul>;
+     return (
+       <ul
+         className={classnames(theme.suggestions, {[theme.up]: this.state.direction === 'up'})}
+         ref={node => { this.suggestionsNode = node; }}
+       >
+         {suggestions}
+       </ul>
+     );
    }
 
    render () {
@@ -304,7 +310,8 @@ const factory = (Chip, Input) => {
          {this.props.selectedPosition === 'above' ? this.renderSelected() : null}
          <Input
            {...other}
-           ref='input'
+           ref={node => { this.inputNode = node; }}
+           autoComplete="off"
            className={theme.input}
            error={error}
            label={label}

From f0f996e9570eb88ffc4f171d15322566162f3fe6 Mon Sep 17 00:00:00 2001
From: Thomas Wolfe <tewolfe2@gmail.com>
Date: Sun, 20 Nov 2016 15:21:28 -0800
Subject: [PATCH 0942/1024] Error in allowBlank

Should be If false
---
 components/dropdown/readme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/dropdown/readme.md b/components/dropdown/readme.md
index 0b054f7da..170650962 100644
--- a/components/dropdown/readme.md
+++ b/components/dropdown/readme.md
@@ -39,7 +39,7 @@ If you want to provide a theme via context, the component key is `RTDropdown`.
 
 | Name         | Type       | Default | Description |
 |:-------------|:-----------|:--------|:------------|
-| `allowBlank` | `Boolean`  | `true`  | If true the dropdown will preselect the first item if the supplied value matches none of the options' values.|
+| `allowBlank` | `Boolean`  | `true`  | If false the dropdown will preselect the first item if the supplied value matches none of the options' values.|
 | `auto`       | `Boolean`  | `true`  | If true, the dropdown will open up or down depending on the position in the screen.|
 | `className`  | `String`   | `''`    | Set the class to give custom styles to the dropdown.|
 | `disabled`   | `Boolean`  | `false` | Set the component as disabled.|

From d49817003f3be6cec1d0e6b9cce152abad95b76b Mon Sep 17 00:00:00 2001
From: Parmesh Krishen <therealparmesh@outlook.com>
Date: Thu, 17 Nov 2016 11:05:14 -0600
Subject: [PATCH 0943/1024] Implementing tab pagination per material design
 specifications.

---
 components/button/theme.scss |  2 +-
 components/tabs/Tabs.js      | 59 ++++++++++++++++++----
 components/tabs/theme.scss   | 37 +++++++++++++-
 lib/button/theme.scss        |  2 +-
 lib/tabs/Tabs.js             | 94 ++++++++++++++++++++++++++++--------
 lib/tabs/theme.scss          | 37 +++++++++++++-
 6 files changed, 196 insertions(+), 35 deletions(-)

diff --git a/components/button/theme.scss b/components/button/theme.scss
index bceb0b29c..adf91cd0f 100644
--- a/components/button/theme.scss
+++ b/components/button/theme.scss
@@ -10,7 +10,7 @@
   > input {
     position: absolute;
     top: 0;
-    left:0;
+    left: 0;
     z-index: 0;
     width: 0.1px;
     height: 0.1px;
diff --git a/components/tabs/Tabs.js b/components/tabs/Tabs.js
index aefb17902..ad0d32008 100644
--- a/components/tabs/Tabs.js
+++ b/components/tabs/Tabs.js
@@ -33,7 +33,8 @@ const factory = (Tab, TabContent) => {
     };
 
     state = {
-      pointer: {}
+      pointer: {},
+      arrows: {}
     };
 
     componentDidMount () {
@@ -50,6 +51,7 @@ const factory = (Tab, TabContent) => {
       window.removeEventListener('resize', this.handleResize);
       clearTimeout(this.resizeTimeout);
       clearTimeout(this.pointerTimeout);
+      clearTimeout(this.arrowsTimeout);
     }
 
     handleHeaderClick = (event) => {
@@ -66,6 +68,7 @@ const factory = (Tab, TabContent) => {
 
     handleResizeEnd = () => {
       this.updatePointer(this.props.index);
+      this.updateArrows();
     };
 
     parseChildren () {
@@ -89,18 +92,48 @@ const factory = (Tab, TabContent) => {
     updatePointer (idx) {
       clearTimeout(this.pointerTimeout);
       this.pointerTimeout = setTimeout(() => {
-        const startPoint = this.refs.tabs.getBoundingClientRect().left;
+        const nav = this.refs.navigation.getBoundingClientRect();
         const label = this.refs.navigation.children[idx].getBoundingClientRect();
+        const scrollLeft = this.refs.navigation.scrollLeft;
         this.setState({
           pointer: {
-            top: `${this.refs.navigation.getBoundingClientRect().height}px`,
-            left: `${label.left - startPoint}px`,
+            top: `${nav.height}px`,
+            left: `${label.left - nav.left + scrollLeft}px`,
             width: `${label.width}px`
           }
         });
       }, 20);
     }
 
+    updateArrows () {
+      clearTimeout(this.arrowsTimeout);
+      this.arrowsTimeout = setTimeout(() => {
+        const nav = this.refs.navigation;
+        this.setState({
+          arrows: {
+            left: nav.scrollLeft > 0,
+            right: nav.scrollWidth > nav.clientWidth && (nav.scrollLeft + nav.clientWidth) < nav.scrollWidth
+          }
+        });
+      }, 20);
+    }
+
+    scrollNavigationLeft = () => {
+      const oldScrollLeft = this.refs.navigation.scrollLeft;
+      this.refs.navigation.scrollLeft -= this.refs.navigation.clientWidth;
+      if (this.refs.navigation.scrollLeft !== oldScrollLeft) {
+        this.updateArrows();
+      }
+    }
+
+    scrollNavigationRight = () => {
+      const oldScrollLeft = this.refs.navigation.scrollLeft;
+      this.refs.navigation.scrollLeft += this.refs.navigation.clientWidth;
+      if (this.refs.navigation.scrollLeft !== oldScrollLeft) {
+        this.updateArrows();
+      }
+    }
+
     renderHeaders (headers) {
       return headers.map((item, idx) => {
         return React.cloneElement(item, {
@@ -108,7 +141,7 @@ const factory = (Tab, TabContent) => {
           key: idx,
           theme: this.props.theme,
           active: this.props.index === idx,
-          onClick: event => {
+          onClick: (event) => {
             this.handleHeaderClick(event);
             item.props.onClick && item.props.onClick(event);
           }
@@ -147,10 +180,18 @@ const factory = (Tab, TabContent) => {
       );
       return (
         <div ref='tabs' data-react-toolbox='tabs' className={classes}>
-          <nav className={theme.navigation} ref='navigation'>
-            {this.renderHeaders(headers)}
-          </nav>
-          <span className={theme.pointer} style={this.state.pointer} />
+          <div className={theme.navigationContainer}>
+            <div className={classnames(theme.arrowContainer, { [theme.invisible]: !(this.state.arrows.left || this.state.arrows.right) })} onClick={this.scrollNavigationLeft}>
+              <span className={classnames('material-icons', theme.arrow, { [theme.invisible]: !this.state.arrows.left })}>keyboard_arrow_left</span>
+            </div>
+            <nav className={theme.navigation} ref='navigation'>
+              {this.renderHeaders(headers)}
+              <span className={theme.pointer} style={this.state.pointer} />
+            </nav>
+            <div className={classnames(theme.arrowContainer, { [theme.invisible]: !(this.state.arrows.left || this.state.arrows.right) })} onClick={this.scrollNavigationRight}>
+              <span className={classnames('material-icons', theme.arrow, { [theme.invisible]: !this.state.arrows.right })}>keyboard_arrow_right</span>
+            </div>
+          </div>
           {this.renderContents(contents)}
         </div>
       );
diff --git a/components/tabs/theme.scss b/components/tabs/theme.scss
index 0f5eb602d..4c59913e0 100644
--- a/components/tabs/theme.scss
+++ b/components/tabs/theme.scss
@@ -4,17 +4,46 @@
 @import "http://github.com/config";
 
 .tabs {
-  position: relative;
   display: flex;
   flex-direction: column;
 }
 
 .navigation {
+  position: relative;
   display: flex;
   flex-direction: row;
+  overflow-x: hidden;
   box-shadow: inset 0 -1px $tab-navigation-border-color;
 }
 
+.navigationContainer {
+  display: flex;
+
+  .navigation {
+    flex: 1;
+  }
+}
+
+.arrow {
+  padding: 0 $tab-label-h-padding;
+  color: $tab-text-color;
+
+  &.invisible {
+    visibility: hidden;
+  }
+}
+
+.arrowContainer {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  box-shadow: inset 0 -1px $tab-navigation-border-color;
+
+  &.invisible {
+    display: none;
+  }
+}
+
 .label {
   padding: $tab-label-v-padding $tab-label-h-padding;
   font-size: $tab-text-height;
@@ -89,7 +118,7 @@
 }
 
 .inverse {
-  .navigation {
+  .navigation, .arrowContainer {
     background-color: $tab-inverse-bar-color;
   }
 
@@ -100,6 +129,10 @@
     }
   }
 
+  .arrow {
+    color: $tab-inverse-text-color;
+  }
+
   .pointer {
     background-color: $tab-inverse-pointer-color;
   }
diff --git a/lib/button/theme.scss b/lib/button/theme.scss
index bceb0b29c..adf91cd0f 100644
--- a/lib/button/theme.scss
+++ b/lib/button/theme.scss
@@ -10,7 +10,7 @@
   > input {
     position: absolute;
     top: 0;
-    left:0;
+    left: 0;
     z-index: 0;
     width: 0.1px;
     height: 0.1px;
diff --git a/lib/tabs/Tabs.js b/lib/tabs/Tabs.js
index 2476ede93..0c82d0185 100644
--- a/lib/tabs/Tabs.js
+++ b/lib/tabs/Tabs.js
@@ -11,9 +11,9 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _classnames2 = require('classnames');
+var _classnames6 = require('classnames');
 
-var _classnames3 = _interopRequireDefault(_classnames2);
+var _classnames7 = _interopRequireDefault(_classnames6);
 
 var _reactCssThemr = require('react-css-themr');
 
@@ -53,7 +53,8 @@ var factory = function factory(Tab, TabContent) {
       }
 
       return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Tabs.__proto__ || Object.getPrototypeOf(Tabs)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-        pointer: {}
+        pointer: {},
+        arrows: {}
       }, _this.handleHeaderClick = function (event) {
         var idx = parseInt(event.currentTarget.id);
         if (_this.props.onChange) _this.props.onChange(idx);
@@ -64,6 +65,19 @@ var factory = function factory(Tab, TabContent) {
         _this.resizeTimeout = setTimeout(_this.handleResizeEnd, 50);
       }, _this.handleResizeEnd = function () {
         _this.updatePointer(_this.props.index);
+        _this.updateArrows();
+      }, _this.scrollNavigationLeft = function () {
+        var oldScrollLeft = _this.refs.navigation.scrollLeft;
+        _this.refs.navigation.scrollLeft -= _this.refs.navigation.clientWidth;
+        if (_this.refs.navigation.scrollLeft !== oldScrollLeft) {
+          _this.updateArrows();
+        }
+      }, _this.scrollNavigationRight = function () {
+        var oldScrollLeft = _this.refs.navigation.scrollLeft;
+        _this.refs.navigation.scrollLeft += _this.refs.navigation.clientWidth;
+        if (_this.refs.navigation.scrollLeft !== oldScrollLeft) {
+          _this.updateArrows();
+        }
       }, _temp), _possibleConstructorReturn(_this, _ret);
     }
 
@@ -85,6 +99,7 @@ var factory = function factory(Tab, TabContent) {
         window.removeEventListener('resize', this.handleResize);
         clearTimeout(this.resizeTimeout);
         clearTimeout(this.pointerTimeout);
+        clearTimeout(this.arrowsTimeout);
       }
     }, {
       key: 'parseChildren',
@@ -114,30 +129,47 @@ var factory = function factory(Tab, TabContent) {
 
         clearTimeout(this.pointerTimeout);
         this.pointerTimeout = setTimeout(function () {
-          var startPoint = _this3.refs.tabs.getBoundingClientRect().left;
+          var nav = _this3.refs.navigation.getBoundingClientRect();
           var label = _this3.refs.navigation.children[idx].getBoundingClientRect();
+          var scrollLeft = _this3.refs.navigation.scrollLeft;
           _this3.setState({
             pointer: {
-              top: _this3.refs.navigation.getBoundingClientRect().height + 'px',
-              left: label.left - startPoint + 'px',
+              top: nav.height + 'px',
+              left: label.left - nav.left + scrollLeft + 'px',
               width: label.width + 'px'
             }
           });
         }, 20);
       }
+    }, {
+      key: 'updateArrows',
+      value: function updateArrows() {
+        var _this4 = this;
+
+        clearTimeout(this.arrowsTimeout);
+        this.arrowsTimeout = setTimeout(function () {
+          var nav = _this4.refs.navigation;
+          _this4.setState({
+            arrows: {
+              left: nav.scrollLeft > 0,
+              right: nav.scrollWidth > nav.clientWidth && nav.scrollLeft + nav.clientWidth < nav.scrollWidth
+            }
+          });
+        }, 20);
+      }
     }, {
       key: 'renderHeaders',
       value: function renderHeaders(headers) {
-        var _this4 = this;
+        var _this5 = this;
 
         return headers.map(function (item, idx) {
           return _react2.default.cloneElement(item, {
             id: idx,
             key: idx,
-            theme: _this4.props.theme,
-            active: _this4.props.index === idx,
+            theme: _this5.props.theme,
+            active: _this5.props.index === idx,
             onClick: function onClick(event) {
-              _this4.handleHeaderClick(event);
+              _this5.handleHeaderClick(event);
               item.props.onClick && item.props.onClick(event);
             }
           });
@@ -146,14 +178,14 @@ var factory = function factory(Tab, TabContent) {
     }, {
       key: 'renderContents',
       value: function renderContents(contents) {
-        var _this5 = this;
+        var _this6 = this;
 
         var contentElements = contents.map(function (item, idx) {
           return _react2.default.cloneElement(item, {
             key: idx,
-            theme: _this5.props.theme,
-            active: _this5.props.index === idx,
-            hidden: _this5.props.index !== idx && _this5.props.hideMode === 'display',
+            theme: _this6.props.theme,
+            active: _this6.props.index === idx,
+            hidden: _this6.props.index !== idx && _this6.props.hideMode === 'display',
             tabIndex: idx
           });
         });
@@ -163,7 +195,7 @@ var factory = function factory(Tab, TabContent) {
         }
 
         return contentElements.filter(function (item, idx) {
-          return idx === _this5.props.index;
+          return idx === _this6.props.index;
         });
       }
     }, {
@@ -181,16 +213,38 @@ var factory = function factory(Tab, TabContent) {
             headers = _parseChildren.headers,
             contents = _parseChildren.contents;
 
-        var classes = (0, _classnames3.default)(theme.tabs, className, (_classnames = {}, _defineProperty(_classnames, theme.fixed, fixed), _defineProperty(_classnames, theme.inverse, inverse), _classnames));
+        var classes = (0, _classnames7.default)(theme.tabs, className, (_classnames = {}, _defineProperty(_classnames, theme.fixed, fixed), _defineProperty(_classnames, theme.inverse, inverse), _classnames));
         return _react2.default.createElement(
           'div',
           { ref: 'tabs', 'data-react-toolbox': 'tabs', className: classes },
           _react2.default.createElement(
-            'nav',
-            { className: theme.navigation, ref: 'navigation' },
-            this.renderHeaders(headers)
+            'div',
+            { className: theme.navigationContainer },
+            _react2.default.createElement(
+              'div',
+              { className: (0, _classnames7.default)(theme.arrowContainer, _defineProperty({}, theme.invisible, !(this.state.arrows.left || this.state.arrows.right))), onClick: this.scrollNavigationLeft },
+              _react2.default.createElement(
+                'span',
+                { className: (0, _classnames7.default)('material-icons', theme.arrow, _defineProperty({}, theme.invisible, !this.state.arrows.left)) },
+                'keyboard_arrow_left'
+              )
+            ),
+            _react2.default.createElement(
+              'nav',
+              { className: theme.navigation, ref: 'navigation' },
+              this.renderHeaders(headers),
+              _react2.default.createElement('span', { className: theme.pointer, style: this.state.pointer })
+            ),
+            _react2.default.createElement(
+              'div',
+              { className: (0, _classnames7.default)(theme.arrowContainer, _defineProperty({}, theme.invisible, !(this.state.arrows.left || this.state.arrows.right))), onClick: this.scrollNavigationRight },
+              _react2.default.createElement(
+                'span',
+                { className: (0, _classnames7.default)('material-icons', theme.arrow, _defineProperty({}, theme.invisible, !this.state.arrows.right)) },
+                'keyboard_arrow_right'
+              )
+            )
           ),
-          _react2.default.createElement('span', { className: theme.pointer, style: this.state.pointer }),
           this.renderContents(contents)
         );
       }
diff --git a/lib/tabs/theme.scss b/lib/tabs/theme.scss
index 0f5eb602d..4c59913e0 100644
--- a/lib/tabs/theme.scss
+++ b/lib/tabs/theme.scss
@@ -4,17 +4,46 @@
 @import "http://github.com/config";
 
 .tabs {
-  position: relative;
   display: flex;
   flex-direction: column;
 }
 
 .navigation {
+  position: relative;
   display: flex;
   flex-direction: row;
+  overflow-x: hidden;
   box-shadow: inset 0 -1px $tab-navigation-border-color;
 }
 
+.navigationContainer {
+  display: flex;
+
+  .navigation {
+    flex: 1;
+  }
+}
+
+.arrow {
+  padding: 0 $tab-label-h-padding;
+  color: $tab-text-color;
+
+  &.invisible {
+    visibility: hidden;
+  }
+}
+
+.arrowContainer {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  box-shadow: inset 0 -1px $tab-navigation-border-color;
+
+  &.invisible {
+    display: none;
+  }
+}
+
 .label {
   padding: $tab-label-v-padding $tab-label-h-padding;
   font-size: $tab-text-height;
@@ -89,7 +118,7 @@
 }
 
 .inverse {
-  .navigation {
+  .navigation, .arrowContainer {
     background-color: $tab-inverse-bar-color;
   }
 
@@ -100,6 +129,10 @@
     }
   }
 
+  .arrow {
+    color: $tab-inverse-text-color;
+  }
+
   .pointer {
     background-color: $tab-inverse-pointer-color;
   }

From ccf8c356de99522b5034fbe45bcb545a11f8b8a4 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 21 Nov 2016 09:21:49 +0100
Subject: [PATCH 0944/1024] Update deps

---
 lib/autocomplete/Autocomplete.js | 38 +++++++++++++++++++-------
 lib/checkbox/Checkbox.js         | 33 ++++++++++++++---------
 lib/dropdown/Dropdown.js         | 44 +++++++++++++++++++++---------
 lib/hoc/ActivableRenderer.js     |  8 +++++-
 lib/list/List.js                 | 11 +++++---
 lib/radio/RadioButton.js         | 14 +++++++---
 lib/snackbar/Snackbar.js         | 34 +++++++++++++++++------
 package.json                     | 46 ++++++++++++++++----------------
 8 files changed, 152 insertions(+), 76 deletions(-)

diff --git a/lib/autocomplete/Autocomplete.js b/lib/autocomplete/Autocomplete.js
index 33f4a1690..eeea6ec0e 100644
--- a/lib/autocomplete/Autocomplete.js
+++ b/lib/autocomplete/Autocomplete.js
@@ -81,18 +81,24 @@ var factory = function factory(Chip, Input) {
         query: _this.query(_this.props.value)
       }, _this.handleChange = function (keys, event) {
         var key = _this.props.multiple ? keys : keys[0];
+        var showAllSuggestions = _this.props.showSuggestionsWhenValueIsSet;
+
         var query = _this.query(key);
         if (_this.props.onChange) _this.props.onChange(key, event);
-        _this.setState({ focus: false, query: query, showAllSuggestions: _this.props.showSuggestionsWhenValueIsSet }, function () {
-          _reactDom2.default.findDOMNode(_this).querySelector('input').blur();
-        });
+        if (_this.props.keepFocusOnChange) {
+          _this.setState({ query: query, showAllSuggestions: showAllSuggestions });
+        } else {
+          _this.setState({ focus: false, query: query, showAllSuggestions: showAllSuggestions }, function () {
+            _reactDom2.default.findDOMNode(_this).querySelector('input').blur();
+          });
+        }
       }, _this.handleQueryBlur = function (event) {
         if (_this.state.focus) _this.setState({ focus: false });
         if (_this.props.onBlur) _this.props.onBlur(event, _this.state.active);
       }, _this.handleQueryChange = function (value) {
         _this.setState({ query: value, showAllSuggestions: false, active: null });
       }, _this.handleQueryFocus = function () {
-        _this.refs.suggestions.scrollTop = 0;
+        _this.suggestionsNode.scrollTop = 0;
         _this.setState({ active: '', focus: true });
         if (_this.props.onFocus) _this.props.onFocus();
       }, _this.handleQueryKeyDown = function (event) {
@@ -154,7 +160,7 @@ var factory = function factory(Chip, Input) {
       key: 'calculateDirection',
       value: function calculateDirection() {
         if (this.props.direction === 'auto') {
-          var client = _reactDom2.default.findDOMNode(this.refs.input).getBoundingClientRect();
+          var client = _reactDom2.default.findDOMNode(this.inputNode).getBoundingClientRect();
           var screen_height = window.innerHeight || document.documentElement.offsetHeight;
           var up = client.top > screen_height / 2 + client.height;
           return up ? 'up' : 'down';
@@ -381,16 +387,22 @@ var factory = function factory(Chip, Input) {
           );
         });
 
-        var className = (0, _classnames5.default)(theme.suggestions, _defineProperty({}, theme.up, this.state.direction === 'up'));
         return _react2.default.createElement(
           'ul',
-          { ref: 'suggestions', className: className },
+          {
+            className: (0, _classnames5.default)(theme.suggestions, _defineProperty({}, theme.up, this.state.direction === 'up')),
+            ref: function ref(node) {
+              _this3.suggestionsNode = node;
+            }
+          },
           suggestions
         );
       }
     }, {
       key: 'render',
       value: function render() {
+        var _this4 = this;
+
         var _props = this.props,
             allowCreate = _props.allowCreate,
             error = _props.error,
@@ -398,9 +410,10 @@ var factory = function factory(Chip, Input) {
             source = _props.source,
             suggestionMatch = _props.suggestionMatch,
             selectedPosition = _props.selectedPosition,
+            keepFocusOnChange = _props.keepFocusOnChange,
             showSuggestionsWhenValueIsSet = _props.showSuggestionsWhenValueIsSet,
             theme = _props.theme,
-            other = _objectWithoutProperties(_props, ['allowCreate', 'error', 'label', 'source', 'suggestionMatch', 'selectedPosition', 'showSuggestionsWhenValueIsSet', 'theme']);
+            other = _objectWithoutProperties(_props, ['allowCreate', 'error', 'label', 'source', 'suggestionMatch', 'selectedPosition', 'keepFocusOnChange', 'showSuggestionsWhenValueIsSet', 'theme']);
 
         var className = (0, _classnames5.default)(theme.autocomplete, _defineProperty({}, theme.focus, this.state.focus), this.props.className);
 
@@ -409,7 +422,10 @@ var factory = function factory(Chip, Input) {
           { 'data-react-toolbox': 'autocomplete', className: className },
           this.props.selectedPosition === 'above' ? this.renderSelected() : null,
           _react2.default.createElement(Input, _extends({}, other, {
-            ref: 'input',
+            ref: function ref(node) {
+              _this4.inputNode = node;
+            },
+            autoComplete: 'off',
             className: theme.input,
             error: error,
             label: label,
@@ -437,6 +453,7 @@ var factory = function factory(Chip, Input) {
     direction: _react.PropTypes.oneOf(['auto', 'up', 'down']),
     disabled: _react.PropTypes.bool,
     error: _react.PropTypes.string,
+    keepFocusOnChange: _react.PropTypes.bool,
     label: _react.PropTypes.string,
     multiple: _react.PropTypes.bool,
     onBlur: _react.PropTypes.func,
@@ -463,8 +480,9 @@ var factory = function factory(Chip, Input) {
     allowCreate: false,
     className: '',
     direction: 'auto',
-    selectedPosition: 'above',
+    keepFocusOnChange: false,
     multiple: true,
+    selectedPosition: 'above',
     showSuggestionsWhenValueIsSet: false,
     source: {},
     suggestionMatch: 'start'
diff --git a/lib/checkbox/Checkbox.js b/lib/checkbox/Checkbox.js
index 97c7320e9..245822443 100644
--- a/lib/checkbox/Checkbox.js
+++ b/lib/checkbox/Checkbox.js
@@ -67,22 +67,25 @@ var factory = function factory(Check) {
     _createClass(Checkbox, [{
       key: 'blur',
       value: function blur() {
-        this.refs.input.blur();
+        this.inputNode && this.inputNode.blur();
       }
     }, {
       key: 'focus',
       value: function focus() {
-        this.refs.input.focus();
+        this.inputNode && this.inputNode.focus();
       }
     }, {
       key: 'render',
       value: function render() {
+        var _this2 = this;
+
         var _props = this.props,
-            onChange = _props.onChange,
-            theme = _props.theme,
+            checked = _props.checked,
+            disabled = _props.disabled,
+            label = _props.label,
             style = _props.style,
-            others = _objectWithoutProperties(_props, ['onChange', 'theme', 'style']); //eslint-disable-line no-unused-vars
-
+            theme = _props.theme,
+            others = _objectWithoutProperties(_props, ['checked', 'disabled', 'label', 'style', 'theme']);
 
         var className = (0, _classnames3.default)(theme.field, _defineProperty({}, theme.disabled, this.props.disabled), this.props.className);
 
@@ -90,23 +93,27 @@ var factory = function factory(Check) {
           'label',
           { 'data-react-toolbox': 'checkbox', className: className },
           _react2.default.createElement('input', _extends({}, others, {
+            checked: checked,
             className: theme.input,
+            disabled: disabled,
+            onChange: function onChange() {},
             onClick: this.handleToggle,
-            readOnly: true,
-            ref: 'input',
+            ref: function ref(node) {
+              _this2.inputNode = node;
+            },
             type: 'checkbox'
           })),
           _react2.default.createElement(Check, {
-            checked: this.props.checked,
-            disabled: this.props.disabled,
+            checked: checked,
+            disabled: disabled,
             rippleClassName: theme.ripple,
             style: style,
-            theme: this.props.theme
+            theme: theme
           }),
-          this.props.label ? _react2.default.createElement(
+          label ? _react2.default.createElement(
             'span',
             { 'data-react-toolbox': 'label', className: theme.text },
-            this.props.label
+            label
           ) : null
         );
       }
diff --git a/lib/dropdown/Dropdown.js b/lib/dropdown/Dropdown.js
index f03cfe9f2..55994c8ac 100644
--- a/lib/dropdown/Dropdown.js
+++ b/lib/dropdown/Dropdown.js
@@ -68,6 +68,12 @@ var factory = function factory(Input) {
           click: _this.handleDocumentClick,
           touchend: _this.handleDocumentClick
         };
+      }, _this.open = function () {
+        var client = event.target.getBoundingClientRect();
+        var screenHeight = window.innerHeight || document.documentElement.offsetHeight;
+        var up = _this.props.auto ? client.top > screenHeight / 2 + client.height : false;
+        if (_this.inputNode) _this.inputNode.blur();
+        _this.setState({ active: true, up: up });
       }, _this.close = function () {
         if (_this.state.active) {
           _this.setState({ active: false });
@@ -77,14 +83,9 @@ var factory = function factory(Input) {
           _this.setState({ active: false });
         }
       }, _this.handleClick = function (event) {
+        _this.open();
         _events2.default.pauseEvent(event);
-        var client = event.target.getBoundingClientRect();
-        var screen_height = window.innerHeight || document.documentElement.offsetHeight;
-        var up = _this.props.auto ? client.top > screen_height / 2 + client.height : false;
         if (_this.props.onClick) _this.props.onClick(event);
-        if (_this.props.onFocus) _this.props.onFocus(event);
-        if (_this.inputNode) _this.inputNode.blur();
-        _this.setState({ active: true, up: up });
       }, _this.handleSelect = function (item, event) {
         if (_this.props.onBlur) _this.props.onBlur(event);
         if (!_this.props.disabled && _this.props.onChange) {
@@ -92,7 +93,7 @@ var factory = function factory(Input) {
             event.target.name = _this.props.name;
           }
           _this.props.onChange(item, event);
-          _this.setState({ active: false });
+          _this.close();
         }
       }, _this.getSelectedItem = function () {
         var _iteratorNormalCompletion = true;
@@ -132,6 +133,14 @@ var factory = function factory(Input) {
           { key: idx, className: className, onClick: _this.handleSelect.bind(_this, item.value) },
           _this.props.template ? _this.props.template(item) : item.label
         );
+      }, _this.handleFocus = function (event) {
+        event.stopPropagation();
+        if (!_this.props.disabled) _this.open();
+        if (_this.props.onFocus) _this.props.onFocus(event);
+      }, _this.handleBlur = function (event) {
+        event.stopPropagation();
+        if (_this.state.active) _this.close();
+        if (_this.props.onBlur) _this.props.onBlur(event);
       }, _temp), _possibleConstructorReturn(_this, _ret);
     }
 
@@ -197,22 +206,31 @@ var factory = function factory(Input) {
             _this2 = this;
 
         var _props = this.props,
-            template = _props.template,
-            theme = _props.theme,
-            source = _props.source,
             allowBlank = _props.allowBlank,
             auto = _props.auto,
             required = _props.required,
-            others = _objectWithoutProperties(_props, ['template', 'theme', 'source', 'allowBlank', 'auto', 'required']); //eslint-disable-line no-unused-vars
-
+            onChange = _props.onChange,
+            onFocus = _props.onFocus,
+            onBlur = _props.onBlur,
+            source = _props.source,
+            template = _props.template,
+            theme = _props.theme,
+            others = _objectWithoutProperties(_props, ['allowBlank', 'auto', 'required', 'onChange', 'onFocus', 'onBlur', 'source', 'template', 'theme']);
 
         var selected = this.getSelectedItem();
         var className = (0, _classnames4.default)(theme.dropdown, (_classnames2 = {}, _defineProperty(_classnames2, theme.up, this.state.up), _defineProperty(_classnames2, theme.active, this.state.active), _defineProperty(_classnames2, theme.disabled, this.props.disabled), _defineProperty(_classnames2, theme.required, this.props.required), _classnames2), this.props.className);
 
         return _react2.default.createElement(
           'div',
-          { 'data-react-toolbox': 'dropdown', className: className },
+          {
+            className: className,
+            'data-react-toolbox': 'dropdown',
+            onBlur: this.handleBlur,
+            onFocus: this.handleFocus,
+            tabIndex: '0'
+          },
           _react2.default.createElement(Input, _extends({}, others, {
+            tabIndex: '-1',
             className: theme.value,
             onClick: this.handleClick,
             required: this.props.required,
diff --git a/lib/hoc/ActivableRenderer.js b/lib/hoc/ActivableRenderer.js
index d5218ef58..09c34f986 100644
--- a/lib/hoc/ActivableRenderer.js
+++ b/lib/hoc/ActivableRenderer.js
@@ -53,6 +53,12 @@ var ActivableRendererFactory = function ActivableRendererFactory() {
           if (nextProps.active && !this.props.active) this.renderAndActivate();
           if (!nextProps.active && this.props.active) this.deactivateAndUnrender();
         }
+      }, {
+        key: 'componentWillUnmount',
+        value: function componentWillUnmount() {
+          clearTimeout(this.activateTimeout);
+          clearTimeout(this.unrenderTimeout);
+        }
       }, {
         key: 'renderAndActivate',
         value: function renderAndActivate() {
@@ -60,7 +66,7 @@ var ActivableRendererFactory = function ActivableRendererFactory() {
 
           if (this.unrenderTimeout) clearTimeout(this.unrenderTimeout);
           this.setState({ rendered: true, active: false }, function () {
-            setTimeout(function () {
+            _this2.activateTimeout = setTimeout(function () {
               return _this2.setState({ active: true });
             }, 20);
           });
diff --git a/lib/list/List.js b/lib/list/List.js
index eac163f81..d0859031e 100644
--- a/lib/list/List.js
+++ b/lib/list/List.js
@@ -31,6 +31,10 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
+var mergeProp = function mergeProp(propName, child, parent) {
+  return child[propName] !== undefined ? child[propName] : parent[propName];
+};
+
 var factory = function factory(ListItem) {
   var List = function (_Component) {
     _inherits(List, _Component);
@@ -48,10 +52,9 @@ var factory = function factory(ListItem) {
 
         return _react2.default.Children.map(this.props.children, function (item) {
           if (item.type === ListItem) {
-            return _react2.default.cloneElement(item, {
-              ripple: _this2.props.ripple,
-              selectable: _this2.props.selectable
-            });
+            var selectable = mergeProp('selectable', item.props, _this2.props);
+            var ripple = mergeProp('ripple', item.props, _this2.props);
+            return _react2.default.cloneElement(item, { selectable: selectable, ripple: ripple });
           } else {
             return _react2.default.cloneElement(item);
           }
diff --git a/lib/radio/RadioButton.js b/lib/radio/RadioButton.js
index 4f1d4724d..cc0f32bc9 100644
--- a/lib/radio/RadioButton.js
+++ b/lib/radio/RadioButton.js
@@ -68,16 +68,18 @@ var factory = function factory(Radio) {
     _createClass(RadioButton, [{
       key: 'blur',
       value: function blur() {
-        this.refs.input.blur();
+        this.inputNode && this.inputNode.blur();
       }
     }, {
       key: 'focus',
       value: function focus() {
-        this.refs.input.focus();
+        this.inputNode && this.inputNode.focus();
       }
     }, {
       key: 'render',
       value: function render() {
+        var _this2 = this;
+
         var _props = this.props,
             className = _props.className,
             checked = _props.checked,
@@ -93,10 +95,14 @@ var factory = function factory(Radio) {
           'label',
           { 'data-react-toolbox': 'radio-button', className: _className },
           _react2.default.createElement('input', _extends({}, others, {
+            checked: checked,
             className: theme.input,
+            disabled: disabled,
             onClick: this.handleClick,
-            readOnly: true,
-            ref: 'input',
+            onChange: function onChange() {},
+            ref: function ref(node) {
+              _this2.inputNode = node;
+            },
             type: 'radio'
           })),
           _react2.default.createElement(Radio, { checked: checked, disabled: disabled, theme: theme }),
diff --git a/lib/snackbar/Snackbar.js b/lib/snackbar/Snackbar.js
index 2535733a6..653de0162 100644
--- a/lib/snackbar/Snackbar.js
+++ b/lib/snackbar/Snackbar.js
@@ -46,22 +46,40 @@ var factory = function factory(Overlay, Button) {
     _inherits(Snackbar, _Component);
 
     function Snackbar() {
+      var _ref;
+
+      var _temp, _this, _ret;
+
       _classCallCheck(this, Snackbar);
 
-      return _possibleConstructorReturn(this, (Snackbar.__proto__ || Object.getPrototypeOf(Snackbar)).apply(this, arguments));
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Snackbar.__proto__ || Object.getPrototypeOf(Snackbar)).call.apply(_ref, [this].concat(args))), _this), _this.scheduleTimeout = function (props) {
+        var onTimeout = props.onTimeout,
+            timeout = props.timeout;
+
+        if (_this.curTimeout) clearTimeout(_this.curTimeout);
+        _this.curTimeout = setTimeout(function () {
+          if (onTimeout) onTimeout();
+          _this.curTimeout = null;
+        }, timeout);
+      }, _temp), _possibleConstructorReturn(_this, _ret);
     }
 
     _createClass(Snackbar, [{
+      key: 'componentDidMount',
+      value: function componentDidMount() {
+        if (this.props.active && this.props.timeout) {
+          this.scheduleTimeout(this.props);
+        }
+      }
+    }, {
       key: 'componentWillReceiveProps',
       value: function componentWillReceiveProps(nextProps) {
-        var _this2 = this;
-
         if (nextProps.active && nextProps.timeout) {
-          if (this.curTimeout) clearTimeout(this.curTimeout);
-          this.curTimeout = setTimeout(function () {
-            nextProps.onTimeout();
-            _this2.curTimeout = null;
-          }, nextProps.timeout);
+          this.scheduleTimeout(nextProps);
         }
       }
     }, {
diff --git a/package.json b/package.json
index 588ce8b86..6c6af0897 100644
--- a/package.json
+++ b/package.json
@@ -39,28 +39,28 @@
     "classnames": "^2.2.5",
     "core-js": "^2.4.0",
     "normalize.css": "^4.2.0",
-    "react-css-themr": "^1.4.1"
+    "react-css-themr": "^1.6.0"
   },
   "devDependencies": {
     "autoprefixer": "^6.5.1",
-    "babel-cli": "^6.16.0",
-    "babel-core": "^6.17.0",
-    "babel-eslint": "^7.0.0",
+    "babel-cli": "^6.18.0",
+    "babel-core": "^6.18.2",
+    "babel-eslint": "^7.1.1",
     "babel-loader": "^6.2.4",
     "babel-plugin-react-transform": "^2.0.2",
     "babel-polyfill": "^6.16.0",
-    "babel-preset-es2015": "^6.16.0",
+    "babel-preset-es2015": "^6.18.0",
     "babel-preset-react": "^6.16.0",
     "babel-preset-stage-0": "^6.16.0",
     "cpx": "^1.5.0",
     "cross-env": "^3.1.3",
-    "css-loader": "^0.25.0",
-    "eslint": "^3.8.1",
-    "eslint-import-resolver-webpack": "^0.6.0",
-    "eslint-plugin-babel": "^3.3.0",
-    "eslint-plugin-import": "^2.0.1",
-    "eslint-plugin-jsx-a11y": "^2.2.3",
-    "eslint-plugin-react": "^6.4.1",
+    "css-loader": "^0.26.0",
+    "eslint": "^3.10.2",
+    "eslint-import-resolver-webpack": "^0.7.0",
+    "eslint-plugin-babel": "^4.0.0",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-jsx-a11y": "^3.0.1",
+    "eslint-plugin-react": "^6.7.1",
     "expect": "^1.20.1",
     "express": "^4.14.0",
     "extract-text-webpack-plugin": "^1.0.1",
@@ -70,24 +70,24 @@
     "internal-ip": "^1.2.0",
     "karma": "^1.3.0",
     "karma-cli": "^1.0.0",
-    "karma-mocha": "^1.2.0",
+    "karma-mocha": "^1.3.0",
     "karma-phantomjs-launcher": "^1.0.0",
     "karma-webpack": "^1.8.0",
     "lint-staged": "^3.2.0",
     "mocha": "^3.1.2",
-    "node-sass": "^3.10.1",
+    "node-sass": "^3.13.0",
     "phantomjs-prebuilt": "^2.1.7",
-    "postcss-loader": "^1.0.0",
+    "postcss-loader": "^1.1.1",
     "pre-commit": "^1.1.3",
-    "react": "^15.3.0",
-    "react-addons-css-transition-group": "^15.3.0",
-    "react-addons-test-utils": "^15.3.0",
-    "react-dom": "^15.3.0",
+    "react": "^15.4.0",
+    "react-addons-css-transition-group": "^15.4.0",
+    "react-addons-test-utils": "^15.4.0",
+    "react-dom": "^15.4.0",
     "react-transform-catch-errors": "^1.0.2",
     "react-transform-hmr": "^1.0.4",
     "redbox-react": "^1.3.2",
     "rimraf": "^2.5.2",
-    "sass-lint": "^1.9.1",
+    "sass-lint": "^1.10.2",
     "sass-loader": "^4.0.0",
     "sinon": "^2.0.0-pre.2",
     "style-loader": "^0.13.1",
@@ -117,9 +117,9 @@
   "peerDependencies": {
     "classnames": "^2.2.0",
     "immutability-helper": "^2.0.0",
-    "react": "^0.14.0 || ^15.3.0",
-    "react-addons-css-transition-group": "^0.14.0 || ^15.3.0",
-    "react-dom": "^0.14.0 || ^15.3.0"
+    "react": "^0.14 || ~15.4.0",
+    "react-addons-css-transition-group": "^0.14.0 || ~15.4.0",
+    "react-dom": "^0.14.0 || ~15.4.0"
   },
   "pre-commit": "lint:staged"
 }

From 66a630cf578654559d4c07ff5b39401980a6b3d1 Mon Sep 17 00:00:00 2001
From: rubenmoya <rmoyarodriguez@gmail.com>
Date: Mon, 21 Nov 2016 20:07:44 +0100
Subject: [PATCH 0945/1024] fix (#942): slider increments with steps

---
 components/slider/Slider.js | 5 +++--
 spec/components/slider.js   | 4 ++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/components/slider/Slider.js b/components/slider/Slider.js
index e2bfb0895..df1abd89f 100644
--- a/components/slider/Slider.js
+++ b/components/slider/Slider.js
@@ -197,8 +197,9 @@ const factory = (ProgressBar, Input) => {
 
     positionToValue (position) {
       const { sliderStart: start, sliderLength: length } = this.state;
-      const { max, min } = this.props;
-      return this.trimValue((position.x - start) / length * (max - min) + min);
+      const { max, min, step } = this.props;
+      const pos = (position.x - start) / length * (max - min);
+      return this.trimValue(Math.round(pos / step) * step + min);
     }
 
     start (position) {
diff --git a/spec/components/slider.js b/spec/components/slider.js
index 244b49673..f6977bd7e 100644
--- a/spec/components/slider.js
+++ b/spec/components/slider.js
@@ -20,9 +20,9 @@ class SliderTest extends React.Component {
         <p>With steps, initial value and editable</p>
         <Slider min={0} max={10} editable value={this.state.slider2} onChange={this.handleChange.bind(this, 'slider2')} />
         <p>Pinned and with snaps</p>
-        <Slider pinned snaps min={0} max={10} step={1} editable value={this.state.slider3} onChange={this.handleChange.bind(this, 'slider3')} />
+        <Slider pinned snaps min={0} max={10} step={2} editable value={this.state.slider3} onChange={this.handleChange.bind(this, 'slider3')} />
         <p>Disabled status</p>
-        <Slider disabled pinned snaps min={0} max={10} step={1} editable value={this.state.slider3} onChange={this.handleChange.bind(this, 'slider3')} />
+        <Slider disabled pinned snaps min={0} max={10} step={2} editable value={this.state.slider3} onChange={this.handleChange.bind(this, 'slider3')} />
       </section>
     );
   }

From 2e2a8fdc123b584aacd6dbc9da017a78728e1068 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 22 Nov 2016 08:46:32 +0100
Subject: [PATCH 0946/1024] Fix #898

---
 .gitignore                              |    2 +-
 docs/yarn.lock                          | 4354 +++++++++++++++++
 lib/_colors.scss                        |  301 --
 lib/_globals.scss                       |   81 -
 lib/_mixins.scss                        |  260 -
 lib/animations/index.js                 |   29 -
 lib/animations/slide-left.scss          |   26 -
 lib/animations/slide-right.scss         |   29 -
 lib/animations/zoom-in.scss             |   33 -
 lib/animations/zoom-out.scss            |   33 -
 lib/app_bar/AppBar.js                   |  177 -
 lib/app_bar/_config.scss                |    8 -
 lib/app_bar/index.d.ts                  |   74 -
 lib/app_bar/index.js                    |   26 -
 lib/app_bar/theme.scss                  |   65 -
 lib/autocomplete/Autocomplete.js        |  498 --
 lib/autocomplete/_config.scss           |    7 -
 lib/autocomplete/index.d.ts             |  106 -
 lib/autocomplete/index.js               |   32 -
 lib/autocomplete/theme.scss             |   76 -
 lib/avatar/Avatar.js                    |   80 -
 lib/avatar/_config.scss                 |    4 -
 lib/avatar/index.d.ts                   |   48 -
 lib/avatar/index.js                     |   28 -
 lib/avatar/theme.scss                   |   44 -
 lib/button/BrowseButton.js              |  168 -
 lib/button/Button.js                    |  164 -
 lib/button/IconButton.js                |  135 -
 lib/button/__test__/index.spec.js       |   66 -
 lib/button/_config.scss                 |   21 -
 lib/button/_mixins.scss                 |   17 -
 lib/button/index.d.ts                   |  337 --
 lib/button/index.js                     |   42 -
 lib/button/theme.scss                   |  182 -
 lib/card/Card.js                        |   55 -
 lib/card/CardActions.js                 |   48 -
 lib/card/CardMedia.js                   |   75 -
 lib/card/CardText.js                    |   52 -
 lib/card/CardTitle.js                   |   93 -
 lib/card/_config.scss                   |    7 -
 lib/card/index.d.ts                     |  103 -
 lib/card/index.js                       |   44 -
 lib/card/theme.scss                     |  126 -
 lib/checkbox/Check.js                   |   52 -
 lib/checkbox/Checkbox.js                |  154 -
 lib/checkbox/_config.scss               |   12 -
 lib/checkbox/index.d.ts                 |   70 -
 lib/checkbox/index.js                   |   32 -
 lib/checkbox/theme.scss                 |  121 -
 lib/chip/Chip.js                        |   97 -
 lib/chip/_config.scss                   |   17 -
 lib/chip/index.d.ts                     |   53 -
 lib/chip/index.js                       |   28 -
 lib/chip/theme.scss                     |   68 -
 lib/commons.scss                        |   95 -
 lib/date_picker/Calendar.js             |  208 -
 lib/date_picker/CalendarDay.js          |  106 -
 lib/date_picker/CalendarMonth.js        |  137 -
 lib/date_picker/DatePicker.js           |  227 -
 lib/date_picker/DatePickerDialog.js     |  181 -
 lib/date_picker/__test__/index.spec.js  |   96 -
 lib/date_picker/_config.scss            |   31 -
 lib/date_picker/index.d.ts              |  153 -
 lib/date_picker/index.js                |   48 -
 lib/date_picker/theme.scss              |  156 -
 lib/dialog/Dialog.js                    |  113 -
 lib/dialog/_config.scss                 |    6 -
 lib/dialog/index.d.ts                   |   93 -
 lib/dialog/index.js                     |   32 -
 lib/dialog/theme.scss                   |   86 -
 lib/drawer/Drawer.js                    |   85 -
 lib/drawer/_config.scss                 |    4 -
 lib/drawer/index.d.ts                   |   54 -
 lib/drawer/index.js                     |   26 -
 lib/drawer/theme.scss                   |   43 -
 lib/dropdown/Dropdown.js                |  304 --
 lib/dropdown/_config.scss               |    6 -
 lib/dropdown/index.d.ts                 |  115 -
 lib/dropdown/index.js                   |   26 -
 lib/dropdown/theme.scss                 |  138 -
 lib/font_icon/FontIcon.js               |   50 -
 lib/font_icon/index.d.ts                |   17 -
 lib/font_icon/index.js                  |   15 -
 lib/form/Form.js                        |  151 -
 lib/form/index.js                       |   55 -
 lib/hoc/ActivableRenderer.js            |  113 -
 lib/hoc/Portal.js                       |  145 -
 lib/identifiers.js                      |   32 -
 lib/index.d.ts                          |   56 -
 lib/index.js                            |  206 -
 lib/input/Input.js                      |  296 --
 lib/input/_config.scss                  |   20 -
 lib/input/index.d.ts                    |  136 -
 lib/input/index.js                      |   28 -
 lib/input/theme.scss                    |  156 -
 lib/layout/Layout.js                    |   48 -
 lib/layout/NavDrawer.js                 |   90 -
 lib/layout/Panel.js                     |   57 -
 lib/layout/Sidebar.js                   |   69 -
 lib/layout/_config.scss                 |   18 -
 lib/layout/_mixins.scss                 |   29 -
 lib/layout/index.d.ts                   |  194 -
 lib/layout/index.js                     |   34 -
 lib/layout/theme.scss                   |  323 --
 lib/link/Link.js                        |   82 -
 lib/link/index.d.ts                     |   51 -
 lib/link/index.js                       |   23 -
 lib/link/theme.scss                     |   37 -
 lib/list/List.js                        |   99 -
 lib/list/ListCheckbox.js                |   93 -
 lib/list/ListDivider.js                 |   37 -
 lib/list/ListItem.js                    |  156 -
 lib/list/ListItemAction.js              |   44 -
 lib/list/ListItemActions.js             |   56 -
 lib/list/ListItemContent.js             |  116 -
 lib/list/ListItemLayout.js              |  104 -
 lib/list/ListItemText.js                |   58 -
 lib/list/ListSubHeader.js               |   44 -
 lib/list/_config.scss                   |   18 -
 lib/list/index.d.ts                     |  265 -
 lib/list/index.js                       |   69 -
 lib/list/theme.scss                     |  159 -
 lib/menu/IconMenu.js                    |  133 -
 lib/menu/Menu.js                        |  324 --
 lib/menu/MenuDivider.js                 |   30 -
 lib/menu/MenuItem.js                    |  136 -
 lib/menu/__test__/index.spec.js         |   51 -
 lib/menu/_config.scss                   |   16 -
 lib/menu/index.d.ts                     |  242 -
 lib/menu/index.js                       |   43 -
 lib/menu/theme.scss                     |  154 -
 lib/navigation/Navigation.js            |   86 -
 lib/navigation/_config.scss             |    2 -
 lib/navigation/index.d.ts               |   47 -
 lib/navigation/index.js                 |   26 -
 lib/navigation/theme.scss               |   26 -
 lib/overlay/Overlay.js                  |  133 -
 lib/overlay/_config.scss                |    2 -
 lib/overlay/index.js                    |   22 -
 lib/overlay/theme.scss                  |   42 -
 lib/progress_bar/ProgressBar.js         |  162 -
 lib/progress_bar/__test__/index.spec.js |   92 -
 lib/progress_bar/_config.scss           |    7 -
 lib/progress_bar/index.d.ts             |   88 -
 lib/progress_bar/index.js               |   23 -
 lib/progress_bar/theme.scss             |  146 -
 lib/radio/Radio.js                      |   45 -
 lib/radio/RadioButton.js                |  152 -
 lib/radio/RadioGroup.js                 |   99 -
 lib/radio/_config.scss                  |    9 -
 lib/radio/index.d.ts                    |  102 -
 lib/radio/index.js                      |   36 -
 lib/radio/theme.scss                    |   95 -
 lib/ripple/Ripple.js                    |  387 --
 lib/ripple/_config.scss                 |    3 -
 lib/ripple/index.d.ts                   |   50 -
 lib/ripple/index.js                     |   21 -
 lib/ripple/theme.scss                   |   42 -
 lib/slider/Slider.js                    |  382 --
 lib/slider/__tests__/index.spec.js      |  202 -
 lib/slider/_config.scss                 |   13 -
 lib/slider/index.d.ts                   |  112 -
 lib/slider/index.js                     |   26 -
 lib/slider/theme.scss                   |  200 -
 lib/snackbar/Snackbar.js                |  154 -
 lib/snackbar/_config.scss               |    9 -
 lib/snackbar/index.d.ts                 |   69 -
 lib/snackbar/index.js                   |   27 -
 lib/snackbar/theme.scss                 |   49 -
 lib/switch/Switch.js                    |  151 -
 lib/switch/Thumb.js                     |   37 -
 lib/switch/_config.scss                 |   22 -
 lib/switch/index.d.ts                   |   78 -
 lib/switch/index.js                     |   36 -
 lib/switch/theme.scss                   |  123 -
 lib/table/Table.js                      |  203 -
 lib/table/TableHead.js                  |   75 -
 lib/table/TableRow.js                   |  172 -
 lib/table/_config.scss                  |    5 -
 lib/table/index.d.ts                    |   71 -
 lib/table/index.js                      |   38 -
 lib/table/theme.scss                    |   59 -
 lib/tabs/Tab.js                         |  121 -
 lib/tabs/TabContent.js                  |   72 -
 lib/tabs/Tabs.js                        |  233 -
 lib/tabs/__tests__/index.spec.js        |  176 -
 lib/tabs/_config.scss                   |   20 -
 lib/tabs/index.d.ts                     |  106 -
 lib/tabs/index.js                       |   32 -
 lib/tabs/theme.scss                     |  106 -
 lib/time_picker/Clock.js                |  181 -
 lib/time_picker/ClockFace.js            |  122 -
 lib/time_picker/ClockHand.js            |  175 -
 lib/time_picker/ClockHours.js           |  149 -
 lib/time_picker/ClockMinutes.js         |  105 -
 lib/time_picker/TimePicker.js           |  196 -
 lib/time_picker/TimePickerDialog.js     |  202 -
 lib/time_picker/_config.scss            |   27 -
 lib/time_picker/index.d.ts              |  137 -
 lib/time_picker/index.js                |   35 -
 lib/time_picker/theme.scss              |  168 -
 lib/tooltip/Tooltip.js                  |  293 --
 lib/tooltip/_config.scss                |    8 -
 lib/tooltip/index.d.ts                  |   47 -
 lib/tooltip/index.js                    |   24 -
 lib/tooltip/theme.scss                  |   55 -
 lib/utils/events.js                     |   69 -
 lib/utils/index.js                      |   30 -
 lib/utils/polyfills.js                  |   15 -
 lib/utils/prefixer.js                   |   47 -
 lib/utils/react.js                      |    9 -
 lib/utils/testing.js                    |   38 -
 lib/utils/time.js                       |  282 --
 lib/utils/utils.js                      |   73 -
 yarn.lock                               | 5915 +++++++++++++++++++++++
 215 files changed, 10270 insertions(+), 19663 deletions(-)
 create mode 100644 docs/yarn.lock
 delete mode 100644 lib/_colors.scss
 delete mode 100644 lib/_globals.scss
 delete mode 100644 lib/_mixins.scss
 delete mode 100644 lib/animations/index.js
 delete mode 100644 lib/animations/slide-left.scss
 delete mode 100644 lib/animations/slide-right.scss
 delete mode 100644 lib/animations/zoom-in.scss
 delete mode 100644 lib/animations/zoom-out.scss
 delete mode 100644 lib/app_bar/AppBar.js
 delete mode 100644 lib/app_bar/_config.scss
 delete mode 100644 lib/app_bar/index.d.ts
 delete mode 100644 lib/app_bar/index.js
 delete mode 100644 lib/app_bar/theme.scss
 delete mode 100644 lib/autocomplete/Autocomplete.js
 delete mode 100644 lib/autocomplete/_config.scss
 delete mode 100644 lib/autocomplete/index.d.ts
 delete mode 100644 lib/autocomplete/index.js
 delete mode 100644 lib/autocomplete/theme.scss
 delete mode 100644 lib/avatar/Avatar.js
 delete mode 100644 lib/avatar/_config.scss
 delete mode 100644 lib/avatar/index.d.ts
 delete mode 100644 lib/avatar/index.js
 delete mode 100644 lib/avatar/theme.scss
 delete mode 100644 lib/button/BrowseButton.js
 delete mode 100644 lib/button/Button.js
 delete mode 100644 lib/button/IconButton.js
 delete mode 100644 lib/button/__test__/index.spec.js
 delete mode 100644 lib/button/_config.scss
 delete mode 100644 lib/button/_mixins.scss
 delete mode 100644 lib/button/index.d.ts
 delete mode 100644 lib/button/index.js
 delete mode 100644 lib/button/theme.scss
 delete mode 100644 lib/card/Card.js
 delete mode 100644 lib/card/CardActions.js
 delete mode 100644 lib/card/CardMedia.js
 delete mode 100644 lib/card/CardText.js
 delete mode 100644 lib/card/CardTitle.js
 delete mode 100644 lib/card/_config.scss
 delete mode 100644 lib/card/index.d.ts
 delete mode 100644 lib/card/index.js
 delete mode 100644 lib/card/theme.scss
 delete mode 100644 lib/checkbox/Check.js
 delete mode 100644 lib/checkbox/Checkbox.js
 delete mode 100644 lib/checkbox/_config.scss
 delete mode 100644 lib/checkbox/index.d.ts
 delete mode 100644 lib/checkbox/index.js
 delete mode 100644 lib/checkbox/theme.scss
 delete mode 100644 lib/chip/Chip.js
 delete mode 100644 lib/chip/_config.scss
 delete mode 100644 lib/chip/index.d.ts
 delete mode 100644 lib/chip/index.js
 delete mode 100644 lib/chip/theme.scss
 delete mode 100644 lib/commons.scss
 delete mode 100644 lib/date_picker/Calendar.js
 delete mode 100644 lib/date_picker/CalendarDay.js
 delete mode 100644 lib/date_picker/CalendarMonth.js
 delete mode 100644 lib/date_picker/DatePicker.js
 delete mode 100644 lib/date_picker/DatePickerDialog.js
 delete mode 100644 lib/date_picker/__test__/index.spec.js
 delete mode 100644 lib/date_picker/_config.scss
 delete mode 100644 lib/date_picker/index.d.ts
 delete mode 100644 lib/date_picker/index.js
 delete mode 100644 lib/date_picker/theme.scss
 delete mode 100644 lib/dialog/Dialog.js
 delete mode 100644 lib/dialog/_config.scss
 delete mode 100644 lib/dialog/index.d.ts
 delete mode 100644 lib/dialog/index.js
 delete mode 100644 lib/dialog/theme.scss
 delete mode 100644 lib/drawer/Drawer.js
 delete mode 100644 lib/drawer/_config.scss
 delete mode 100644 lib/drawer/index.d.ts
 delete mode 100644 lib/drawer/index.js
 delete mode 100644 lib/drawer/theme.scss
 delete mode 100644 lib/dropdown/Dropdown.js
 delete mode 100644 lib/dropdown/_config.scss
 delete mode 100644 lib/dropdown/index.d.ts
 delete mode 100644 lib/dropdown/index.js
 delete mode 100644 lib/dropdown/theme.scss
 delete mode 100644 lib/font_icon/FontIcon.js
 delete mode 100644 lib/font_icon/index.d.ts
 delete mode 100644 lib/font_icon/index.js
 delete mode 100644 lib/form/Form.js
 delete mode 100644 lib/form/index.js
 delete mode 100644 lib/hoc/ActivableRenderer.js
 delete mode 100644 lib/hoc/Portal.js
 delete mode 100644 lib/identifiers.js
 delete mode 100644 lib/index.d.ts
 delete mode 100644 lib/index.js
 delete mode 100644 lib/input/Input.js
 delete mode 100644 lib/input/_config.scss
 delete mode 100644 lib/input/index.d.ts
 delete mode 100644 lib/input/index.js
 delete mode 100644 lib/input/theme.scss
 delete mode 100644 lib/layout/Layout.js
 delete mode 100644 lib/layout/NavDrawer.js
 delete mode 100644 lib/layout/Panel.js
 delete mode 100644 lib/layout/Sidebar.js
 delete mode 100644 lib/layout/_config.scss
 delete mode 100644 lib/layout/_mixins.scss
 delete mode 100644 lib/layout/index.d.ts
 delete mode 100644 lib/layout/index.js
 delete mode 100644 lib/layout/theme.scss
 delete mode 100644 lib/link/Link.js
 delete mode 100644 lib/link/index.d.ts
 delete mode 100644 lib/link/index.js
 delete mode 100644 lib/link/theme.scss
 delete mode 100644 lib/list/List.js
 delete mode 100644 lib/list/ListCheckbox.js
 delete mode 100644 lib/list/ListDivider.js
 delete mode 100644 lib/list/ListItem.js
 delete mode 100644 lib/list/ListItemAction.js
 delete mode 100644 lib/list/ListItemActions.js
 delete mode 100644 lib/list/ListItemContent.js
 delete mode 100644 lib/list/ListItemLayout.js
 delete mode 100644 lib/list/ListItemText.js
 delete mode 100644 lib/list/ListSubHeader.js
 delete mode 100644 lib/list/_config.scss
 delete mode 100644 lib/list/index.d.ts
 delete mode 100644 lib/list/index.js
 delete mode 100644 lib/list/theme.scss
 delete mode 100644 lib/menu/IconMenu.js
 delete mode 100644 lib/menu/Menu.js
 delete mode 100644 lib/menu/MenuDivider.js
 delete mode 100644 lib/menu/MenuItem.js
 delete mode 100644 lib/menu/__test__/index.spec.js
 delete mode 100644 lib/menu/_config.scss
 delete mode 100644 lib/menu/index.d.ts
 delete mode 100644 lib/menu/index.js
 delete mode 100644 lib/menu/theme.scss
 delete mode 100644 lib/navigation/Navigation.js
 delete mode 100644 lib/navigation/_config.scss
 delete mode 100644 lib/navigation/index.d.ts
 delete mode 100644 lib/navigation/index.js
 delete mode 100644 lib/navigation/theme.scss
 delete mode 100644 lib/overlay/Overlay.js
 delete mode 100644 lib/overlay/_config.scss
 delete mode 100644 lib/overlay/index.js
 delete mode 100644 lib/overlay/theme.scss
 delete mode 100644 lib/progress_bar/ProgressBar.js
 delete mode 100644 lib/progress_bar/__test__/index.spec.js
 delete mode 100644 lib/progress_bar/_config.scss
 delete mode 100644 lib/progress_bar/index.d.ts
 delete mode 100644 lib/progress_bar/index.js
 delete mode 100644 lib/progress_bar/theme.scss
 delete mode 100644 lib/radio/Radio.js
 delete mode 100644 lib/radio/RadioButton.js
 delete mode 100644 lib/radio/RadioGroup.js
 delete mode 100644 lib/radio/_config.scss
 delete mode 100644 lib/radio/index.d.ts
 delete mode 100644 lib/radio/index.js
 delete mode 100644 lib/radio/theme.scss
 delete mode 100644 lib/ripple/Ripple.js
 delete mode 100644 lib/ripple/_config.scss
 delete mode 100644 lib/ripple/index.d.ts
 delete mode 100644 lib/ripple/index.js
 delete mode 100644 lib/ripple/theme.scss
 delete mode 100644 lib/slider/Slider.js
 delete mode 100644 lib/slider/__tests__/index.spec.js
 delete mode 100644 lib/slider/_config.scss
 delete mode 100644 lib/slider/index.d.ts
 delete mode 100644 lib/slider/index.js
 delete mode 100644 lib/slider/theme.scss
 delete mode 100644 lib/snackbar/Snackbar.js
 delete mode 100644 lib/snackbar/_config.scss
 delete mode 100644 lib/snackbar/index.d.ts
 delete mode 100644 lib/snackbar/index.js
 delete mode 100644 lib/snackbar/theme.scss
 delete mode 100644 lib/switch/Switch.js
 delete mode 100644 lib/switch/Thumb.js
 delete mode 100644 lib/switch/_config.scss
 delete mode 100644 lib/switch/index.d.ts
 delete mode 100644 lib/switch/index.js
 delete mode 100644 lib/switch/theme.scss
 delete mode 100644 lib/table/Table.js
 delete mode 100644 lib/table/TableHead.js
 delete mode 100644 lib/table/TableRow.js
 delete mode 100644 lib/table/_config.scss
 delete mode 100644 lib/table/index.d.ts
 delete mode 100644 lib/table/index.js
 delete mode 100644 lib/table/theme.scss
 delete mode 100644 lib/tabs/Tab.js
 delete mode 100644 lib/tabs/TabContent.js
 delete mode 100644 lib/tabs/Tabs.js
 delete mode 100644 lib/tabs/__tests__/index.spec.js
 delete mode 100644 lib/tabs/_config.scss
 delete mode 100644 lib/tabs/index.d.ts
 delete mode 100644 lib/tabs/index.js
 delete mode 100644 lib/tabs/theme.scss
 delete mode 100644 lib/time_picker/Clock.js
 delete mode 100644 lib/time_picker/ClockFace.js
 delete mode 100644 lib/time_picker/ClockHand.js
 delete mode 100644 lib/time_picker/ClockHours.js
 delete mode 100644 lib/time_picker/ClockMinutes.js
 delete mode 100644 lib/time_picker/TimePicker.js
 delete mode 100644 lib/time_picker/TimePickerDialog.js
 delete mode 100644 lib/time_picker/_config.scss
 delete mode 100644 lib/time_picker/index.d.ts
 delete mode 100644 lib/time_picker/index.js
 delete mode 100644 lib/time_picker/theme.scss
 delete mode 100644 lib/tooltip/Tooltip.js
 delete mode 100644 lib/tooltip/_config.scss
 delete mode 100644 lib/tooltip/index.d.ts
 delete mode 100644 lib/tooltip/index.js
 delete mode 100644 lib/tooltip/theme.scss
 delete mode 100644 lib/utils/events.js
 delete mode 100644 lib/utils/index.js
 delete mode 100644 lib/utils/polyfills.js
 delete mode 100644 lib/utils/prefixer.js
 delete mode 100644 lib/utils/react.js
 delete mode 100644 lib/utils/testing.js
 delete mode 100644 lib/utils/time.js
 delete mode 100644 lib/utils/utils.js
 create mode 100644 yarn.lock

diff --git a/.gitignore b/.gitignore
index 99bc5c1d3..5aba682b1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,6 @@
+lib
 build
 node_modules
 npm-debug.log
-yarn.lock
 .idea
 .DS_Store
diff --git a/docs/yarn.lock b/docs/yarn.lock
new file mode 100644
index 000000000..6df4a071d
--- /dev/null
+++ b/docs/yarn.lock
@@ -0,0 +1,4354 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+abbrev@1:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.0.9.tgz#91b4792588a7738c25f35dd6f63752a2f8776135"
+
+accepts@~1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.3.tgz#c3ca7434938648c3e0d9c1e328dd68b622c284ca"
+  dependencies:
+    mime-types "~2.1.11"
+    negotiator "0.6.1"
+
+acorn@^3.0.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
+
+align-text@^0.1.1, align-text@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
+  dependencies:
+    kind-of "^3.0.2"
+    longest "^1.0.1"
+    repeat-string "^1.5.2"
+
+alphanum-sort@^1.0.1, alphanum-sort@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
+
+amdefine@>=0.0.4:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.0.tgz#fd17474700cb5cc9c2b709f0be9d23ce3c198c33"
+
+ansi-html@0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.6.tgz#bda8e33dd2ee1c20f54c08eb405713cbfc0ed80e"
+
+ansi-regex@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.0.0.tgz#c5061b6e0ef8a81775e50f5d66151bf6bf371107"
+
+ansi-styles@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
+
+anymatch@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.0.tgz#a3e52fa39168c825ff57b0248126ce5a8ff95507"
+  dependencies:
+    arrify "^1.0.0"
+    micromatch "^2.1.5"
+
+aproba@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.0.4.tgz#2713680775e7614c8ba186c065d4e2e52d1072c0"
+
+are-we-there-yet@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.2.tgz#80e470e95a084794fe1899262c5667c6e88de1b3"
+  dependencies:
+    delegates "^1.0.0"
+    readable-stream "^2.0.0 || ^1.1.13"
+
+argparse@^1.0.7:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.9.tgz#73d83bc263f86e97f8cc4f6bae1b0e90a7d22c86"
+  dependencies:
+    sprintf-js "~1.0.2"
+
+arr-diff@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
+  dependencies:
+    arr-flatten "^1.0.1"
+
+arr-flatten@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.0.1.tgz#e5ffe54d45e19f32f216e91eb99c8ce892bb604b"
+
+array-find-index@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
+
+array-flatten@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
+
+array-index@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-index/-/array-index-1.0.0.tgz#ec56a749ee103e4e08c790b9c353df16055b97f9"
+  dependencies:
+    debug "^2.2.0"
+    es6-symbol "^3.0.2"
+
+array-union@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
+  dependencies:
+    array-uniq "^1.0.1"
+
+array-uniq@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
+
+array-unique@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
+
+arrify@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
+
+asap@~2.0.3:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f"
+
+asn1@~0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.3.tgz#dac8787713c9966849fc8180777ebe9c1ddf3b86"
+
+assert-plus@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-0.2.0.tgz#d74e1b87e7affc0db8aadb7021f3fe48101ab234"
+
+assert-plus@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
+
+assert@^1.1.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/assert/-/assert-1.4.1.tgz#99912d591836b5a6f5b345c0f07eefc08fc65d91"
+  dependencies:
+    util "0.10.3"
+
+ast-types@0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.9.0.tgz#c8721c8747ae4d5b29b929e99c5317b4e8745623"
+
+async-each@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
+
+async-foreach@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/async-foreach/-/async-foreach-0.1.3.tgz#36121f845c0578172de419a97dbeb1d16ec34542"
+
+async@^0.9.0:
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d"
+
+async@^1.3.0, async@^1.5.0, async@1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
+
+async@^2.0.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.1.2.tgz#612a4ab45ef42a70cde806bad86ee6db047e8385"
+  dependencies:
+    lodash "^4.14.0"
+
+async@~0.2.6:
+  version "0.2.10"
+  resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+
+autoprefixer@^6.3.1, autoprefixer@^6.4.0:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.5.1.tgz#ae759a5221e709f3da17c2d656230e67c43cbb75"
+  dependencies:
+    browserslist "~1.4.0"
+    caniuse-db "^1.0.30000554"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    postcss "^5.2.4"
+    postcss-value-parser "^3.2.3"
+
+aws-sign2@~0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
+
+aws4@^1.2.1:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.5.0.tgz#0a29ffb79c31c9e712eeb087e8e7a64b4a56d755"
+
+babel-code-frame@^6.16.0:
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.16.0.tgz#f90e60da0862909d3ce098733b5d3987c97cb8de"
+  dependencies:
+    chalk "^1.1.0"
+    esutils "^2.0.2"
+    js-tokens "^2.0.0"
+
+babel-core@^6.13.2, babel-core@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.18.0.tgz#bb5ce9bc0a956e6e94e2f12d597abb3b0b330deb"
+  dependencies:
+    babel-code-frame "^6.16.0"
+    babel-generator "^6.18.0"
+    babel-helpers "^6.16.0"
+    babel-messages "^6.8.0"
+    babel-register "^6.18.0"
+    babel-runtime "^6.9.1"
+    babel-template "^6.16.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+    babylon "^6.11.0"
+    convert-source-map "^1.1.0"
+    debug "^2.1.1"
+    json5 "^0.5.0"
+    lodash "^4.2.0"
+    minimatch "^3.0.2"
+    path-is-absolute "^1.0.0"
+    private "^0.1.6"
+    slash "^1.0.0"
+    source-map "^0.5.0"
+
+babel-eslint@^6.0.4:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-6.1.2.tgz#5293419fe3672d66598d327da9694567ba6a5f2f"
+  dependencies:
+    babel-traverse "^6.0.20"
+    babel-types "^6.0.19"
+    babylon "^6.0.18"
+    lodash.assign "^4.0.0"
+    lodash.pickby "^4.0.0"
+
+babel-generator@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.18.0.tgz#e4f104cb3063996d9850556a45aae4a022060a07"
+  dependencies:
+    babel-messages "^6.8.0"
+    babel-runtime "^6.9.0"
+    babel-types "^6.18.0"
+    detect-indent "^4.0.0"
+    jsesc "^1.3.0"
+    lodash "^4.2.0"
+    source-map "^0.5.0"
+
+babel-helper-bindify-decorators@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-bindify-decorators/-/babel-helper-bindify-decorators-6.18.0.tgz#fc00c573676a6e702fffa00019580892ec8780a5"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-helper-builder-binary-assignment-operator-visitor@^6.8.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-builder-binary-assignment-operator-visitor/-/babel-helper-builder-binary-assignment-operator-visitor-6.18.0.tgz#8ae814989f7a53682152e3401a04fabd0bb333a6"
+  dependencies:
+    babel-helper-explode-assignable-expression "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-types "^6.18.0"
+
+babel-helper-builder-react-jsx@^6.8.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-builder-react-jsx/-/babel-helper-builder-react-jsx-6.18.0.tgz#ab02f19a2eb7ace936dd87fa55896d02be59bf71"
+  dependencies:
+    babel-runtime "^6.9.0"
+    babel-types "^6.18.0"
+    esutils "^2.0.0"
+    lodash "^4.2.0"
+
+babel-helper-call-delegate@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-call-delegate/-/babel-helper-call-delegate-6.18.0.tgz#05b14aafa430884b034097ef29e9f067ea4133bd"
+  dependencies:
+    babel-helper-hoist-variables "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-helper-define-map@^6.18.0, babel-helper-define-map@^6.8.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-define-map/-/babel-helper-define-map-6.18.0.tgz#8d6c85dc7fbb4c19be3de40474d18e97c3676ec2"
+  dependencies:
+    babel-helper-function-name "^6.18.0"
+    babel-runtime "^6.9.0"
+    babel-types "^6.18.0"
+    lodash "^4.2.0"
+
+babel-helper-explode-assignable-expression@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-explode-assignable-expression/-/babel-helper-explode-assignable-expression-6.18.0.tgz#14b8e8c2d03ad735d4b20f1840b24cd1f65239fe"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-helper-explode-class@^6.8.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-explode-class/-/babel-helper-explode-class-6.18.0.tgz#c44f76f4fa23b9c5d607cbac5d4115e7a76f62cb"
+  dependencies:
+    babel-helper-bindify-decorators "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-helper-function-name@^6.18.0, babel-helper-function-name@^6.8.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-function-name/-/babel-helper-function-name-6.18.0.tgz#68ec71aeba1f3e28b2a6f0730190b754a9bf30e6"
+  dependencies:
+    babel-helper-get-function-arity "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.8.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-helper-get-function-arity@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-get-function-arity/-/babel-helper-get-function-arity-6.18.0.tgz#a5b19695fd3f9cdfc328398b47dafcd7094f9f24"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-types "^6.18.0"
+
+babel-helper-hoist-variables@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-hoist-variables/-/babel-helper-hoist-variables-6.18.0.tgz#a835b5ab8b46d6de9babefae4d98ea41e866b82a"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-types "^6.18.0"
+
+babel-helper-optimise-call-expression@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-optimise-call-expression/-/babel-helper-optimise-call-expression-6.18.0.tgz#9261d0299ee1a4f08a6dd28b7b7c777348fd8f0f"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-types "^6.18.0"
+
+babel-helper-regex@^6.8.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-regex/-/babel-helper-regex-6.18.0.tgz#ae0ebfd77de86cb2f1af258e2cc20b5fe893ecc6"
+  dependencies:
+    babel-runtime "^6.9.0"
+    babel-types "^6.18.0"
+    lodash "^4.2.0"
+
+babel-helper-remap-async-to-generator@^6.16.0, babel-helper-remap-async-to-generator@^6.16.2:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-remap-async-to-generator/-/babel-helper-remap-async-to-generator-6.18.0.tgz#336cdf3cab650bb191b02fc16a3708e7be7f9ce5"
+  dependencies:
+    babel-helper-function-name "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.16.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-helper-replace-supers@^6.18.0, babel-helper-replace-supers@^6.8.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-replace-supers/-/babel-helper-replace-supers-6.18.0.tgz#28ec69877be4144dbd64f4cc3a337e89f29a924e"
+  dependencies:
+    babel-helper-optimise-call-expression "^6.18.0"
+    babel-messages "^6.8.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.16.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-helpers@^6.16.0:
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/babel-helpers/-/babel-helpers-6.16.0.tgz#1095ec10d99279460553e67eb3eee9973d3867e3"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-template "^6.16.0"
+
+babel-loader@^6.2.4:
+  version "6.2.7"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-6.2.7.tgz#16fdbf64328030dc5a606827d389c8b92a2a8032"
+  dependencies:
+    find-cache-dir "^0.1.1"
+    loader-utils "^0.2.11"
+    mkdirp "^0.5.1"
+    object-assign "^4.0.1"
+
+babel-messages@^6.8.0:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.8.0.tgz#bf504736ca967e6d65ef0adb5a2a5f947c8e0eb9"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-check-es2015-constants@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.8.0.tgz#dbf024c32ed37bfda8dee1e76da02386a8d26fe7"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-react-transform@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-react-transform/-/babel-plugin-react-transform-2.0.2.tgz#515bbfa996893981142d90b1f9b1635de2995109"
+  dependencies:
+    lodash "^4.6.1"
+
+babel-plugin-syntax-async-functions@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
+
+babel-plugin-syntax-async-generators@^6.5.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-generators/-/babel-plugin-syntax-async-generators-6.13.0.tgz#6bc963ebb16eccbae6b92b596eb7f35c342a8b9a"
+
+babel-plugin-syntax-class-constructor-call@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-class-constructor-call/-/babel-plugin-syntax-class-constructor-call-6.18.0.tgz#9cb9d39fe43c8600bec8146456ddcbd4e1a76416"
+
+babel-plugin-syntax-class-properties@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz#d7eb23b79a317f8543962c505b827c7d6cac27de"
+
+babel-plugin-syntax-decorators@^6.13.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz#312563b4dbde3cc806cee3e416cceeaddd11ac0b"
+
+babel-plugin-syntax-do-expressions@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-do-expressions/-/babel-plugin-syntax-do-expressions-6.13.0.tgz#5747756139aa26d390d09410b03744ba07e4796d"
+
+babel-plugin-syntax-dynamic-import@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz#8d6a26229c83745a9982a441051572caa179b1da"
+
+babel-plugin-syntax-exponentiation-operator@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"
+
+babel-plugin-syntax-export-extensions@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-export-extensions/-/babel-plugin-syntax-export-extensions-6.13.0.tgz#70a1484f0f9089a4e84ad44bac353c95b9b12721"
+
+babel-plugin-syntax-flow@^6.18.0, babel-plugin-syntax-flow@^6.3.13:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d"
+
+babel-plugin-syntax-function-bind@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-function-bind/-/babel-plugin-syntax-function-bind-6.13.0.tgz#48c495f177bdf31a981e732f55adc0bdd2601f46"
+
+babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+
+babel-plugin-syntax-object-rest-spread@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
+
+babel-plugin-syntax-trailing-function-commas@^6.3.13:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-6.13.0.tgz#2b84b7d53dd744f94ff1fad7669406274b23f541"
+
+babel-plugin-transform-async-generator-functions@^6.17.0:
+  version "6.17.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-async-generator-functions/-/babel-plugin-transform-async-generator-functions-6.17.0.tgz#d0b5a2b2f0940f2b245fa20a00519ed7bc6cae54"
+  dependencies:
+    babel-helper-remap-async-to-generator "^6.16.2"
+    babel-plugin-syntax-async-generators "^6.5.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-async-to-generator@^6.16.0:
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-async-to-generator/-/babel-plugin-transform-async-to-generator-6.16.0.tgz#19ec36cb1486b59f9f468adfa42ce13908ca2999"
+  dependencies:
+    babel-helper-remap-async-to-generator "^6.16.0"
+    babel-plugin-syntax-async-functions "^6.8.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-class-constructor-call@^6.3.13:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-constructor-call/-/babel-plugin-transform-class-constructor-call-6.18.0.tgz#80855e38a1ab47b8c6c647f8ea1bcd2c00ca3aae"
+  dependencies:
+    babel-plugin-syntax-class-constructor-call "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.8.0"
+
+babel-plugin-transform-class-properties@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.18.0.tgz#bc1266a39d4c8726e0bd7b15c56235177e6ede57"
+  dependencies:
+    babel-helper-function-name "^6.18.0"
+    babel-plugin-syntax-class-properties "^6.8.0"
+    babel-runtime "^6.9.1"
+
+babel-plugin-transform-decorators@^6.13.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-decorators/-/babel-plugin-transform-decorators-6.13.0.tgz#82d65c1470ae83e2d13eebecb0a1c2476d62da9d"
+  dependencies:
+    babel-helper-define-map "^6.8.0"
+    babel-helper-explode-class "^6.8.0"
+    babel-plugin-syntax-decorators "^6.13.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.8.0"
+    babel-types "^6.13.0"
+
+babel-plugin-transform-do-expressions@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-do-expressions/-/babel-plugin-transform-do-expressions-6.8.0.tgz#fda692af339835cc255bb7544efb8f7c1306c273"
+  dependencies:
+    babel-plugin-syntax-do-expressions "^6.8.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-arrow-functions@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.8.0.tgz#5b63afc3181bdc9a8c4d481b5a4f3f7d7fef3d9d"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-block-scoped-functions@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoped-functions/-/babel-plugin-transform-es2015-block-scoped-functions-6.8.0.tgz#ed95d629c4b5a71ae29682b998f70d9833eb366d"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-block-scoping@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoping/-/babel-plugin-transform-es2015-block-scoping-6.18.0.tgz#3bfdcfec318d46df22525cdea88f1978813653af"
+  dependencies:
+    babel-runtime "^6.9.0"
+    babel-template "^6.15.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+    lodash "^4.2.0"
+
+babel-plugin-transform-es2015-classes@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-classes/-/babel-plugin-transform-es2015-classes-6.18.0.tgz#ffe7a17321bf83e494dcda0ae3fc72df48ffd1d9"
+  dependencies:
+    babel-helper-define-map "^6.18.0"
+    babel-helper-function-name "^6.18.0"
+    babel-helper-optimise-call-expression "^6.18.0"
+    babel-helper-replace-supers "^6.18.0"
+    babel-messages "^6.8.0"
+    babel-runtime "^6.9.0"
+    babel-template "^6.14.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-plugin-transform-es2015-computed-properties@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-computed-properties/-/babel-plugin-transform-es2015-computed-properties-6.8.0.tgz#f51010fd61b3bd7b6b60a5fdfd307bb7a5279870"
+  dependencies:
+    babel-helper-define-map "^6.8.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.8.0"
+
+babel-plugin-transform-es2015-destructuring@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-destructuring/-/babel-plugin-transform-es2015-destructuring-6.18.0.tgz#a08fb89415ab82058649558bedb7bf8dafa76ba5"
+  dependencies:
+    babel-runtime "^6.9.0"
+
+babel-plugin-transform-es2015-duplicate-keys@^6.6.0:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-duplicate-keys/-/babel-plugin-transform-es2015-duplicate-keys-6.8.0.tgz#fd8f7f7171fc108cc1c70c3164b9f15a81c25f7d"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-types "^6.8.0"
+
+babel-plugin-transform-es2015-for-of@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-for-of/-/babel-plugin-transform-es2015-for-of-6.18.0.tgz#4c517504db64bf8cfc119a6b8f177211f2028a70"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-function-name@^6.9.0:
+  version "6.9.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-function-name/-/babel-plugin-transform-es2015-function-name-6.9.0.tgz#8c135b17dbd064e5bba56ec511baaee2fca82719"
+  dependencies:
+    babel-helper-function-name "^6.8.0"
+    babel-runtime "^6.9.0"
+    babel-types "^6.9.0"
+
+babel-plugin-transform-es2015-literals@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-literals/-/babel-plugin-transform-es2015-literals-6.8.0.tgz#50aa2e5c7958fc2ab25d74ec117e0cc98f046468"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-modules-amd@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-amd/-/babel-plugin-transform-es2015-modules-amd-6.18.0.tgz#49a054cbb762bdf9ae2d8a807076cfade6141e40"
+  dependencies:
+    babel-plugin-transform-es2015-modules-commonjs "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.8.0"
+
+babel-plugin-transform-es2015-modules-commonjs@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.18.0.tgz#c15ae5bb11b32a0abdcc98a5837baa4ee8d67bcc"
+  dependencies:
+    babel-plugin-transform-strict-mode "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.16.0"
+    babel-types "^6.18.0"
+
+babel-plugin-transform-es2015-modules-systemjs@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-systemjs/-/babel-plugin-transform-es2015-modules-systemjs-6.18.0.tgz#f09294707163edae4d3b3e8bfacecd01d920b7ad"
+  dependencies:
+    babel-helper-hoist-variables "^6.18.0"
+    babel-runtime "^6.11.6"
+    babel-template "^6.14.0"
+
+babel-plugin-transform-es2015-modules-umd@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-umd/-/babel-plugin-transform-es2015-modules-umd-6.18.0.tgz#23351770ece5c1f8e83ed67cb1d7992884491e50"
+  dependencies:
+    babel-plugin-transform-es2015-modules-amd "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.8.0"
+
+babel-plugin-transform-es2015-object-super@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-object-super/-/babel-plugin-transform-es2015-object-super-6.8.0.tgz#1b858740a5a4400887c23dcff6f4d56eea4a24c5"
+  dependencies:
+    babel-helper-replace-supers "^6.8.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-parameters@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-parameters/-/babel-plugin-transform-es2015-parameters-6.18.0.tgz#9b2cfe238c549f1635ba27fc1daa858be70608b1"
+  dependencies:
+    babel-helper-call-delegate "^6.18.0"
+    babel-helper-get-function-arity "^6.18.0"
+    babel-runtime "^6.9.0"
+    babel-template "^6.16.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-plugin-transform-es2015-shorthand-properties@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-shorthand-properties/-/babel-plugin-transform-es2015-shorthand-properties-6.18.0.tgz#e2ede3b7df47bf980151926534d1dd0cbea58f43"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-types "^6.18.0"
+
+babel-plugin-transform-es2015-spread@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-spread/-/babel-plugin-transform-es2015-spread-6.8.0.tgz#0217f737e3b821fa5a669f187c6ed59205f05e9c"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-sticky-regex@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-sticky-regex/-/babel-plugin-transform-es2015-sticky-regex-6.8.0.tgz#e73d300a440a35d5c64f5c2a344dc236e3df47be"
+  dependencies:
+    babel-helper-regex "^6.8.0"
+    babel-runtime "^6.0.0"
+    babel-types "^6.8.0"
+
+babel-plugin-transform-es2015-template-literals@^6.6.0:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-template-literals/-/babel-plugin-transform-es2015-template-literals-6.8.0.tgz#86eb876d0a2c635da4ec048b4f7de9dfc897e66b"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-typeof-symbol@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-typeof-symbol/-/babel-plugin-transform-es2015-typeof-symbol-6.18.0.tgz#0b14c48629c90ff47a0650077f6aa699bee35798"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-unicode-regex@^6.3.13:
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-unicode-regex/-/babel-plugin-transform-es2015-unicode-regex-6.11.0.tgz#6298ceabaad88d50a3f4f392d8de997260f6ef2c"
+  dependencies:
+    babel-helper-regex "^6.8.0"
+    babel-runtime "^6.0.0"
+    regexpu-core "^2.0.0"
+
+babel-plugin-transform-exponentiation-operator@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-exponentiation-operator/-/babel-plugin-transform-exponentiation-operator-6.8.0.tgz#db25742e9339eade676ca9acec46f955599a68a4"
+  dependencies:
+    babel-helper-builder-binary-assignment-operator-visitor "^6.8.0"
+    babel-plugin-syntax-exponentiation-operator "^6.8.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-export-extensions@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-export-extensions/-/babel-plugin-transform-export-extensions-6.8.0.tgz#fa80ff655b636549431bfd38f6b817bd82e47f5b"
+  dependencies:
+    babel-plugin-syntax-export-extensions "^6.8.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-flow-strip-types@^6.3.13:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-flow-strip-types/-/babel-plugin-transform-flow-strip-types-6.18.0.tgz#4d3e642158661e9b40db457c004a30817fa32592"
+  dependencies:
+    babel-plugin-syntax-flow "^6.18.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-function-bind@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-function-bind/-/babel-plugin-transform-function-bind-6.8.0.tgz#e7f334ce69f50d28fe850a822eaaab9fa4f4d821"
+  dependencies:
+    babel-plugin-syntax-function-bind "^6.8.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-object-rest-spread@^6.16.0:
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.16.0.tgz#db441d56fffc1999052fdebe2e2f25ebd28e36a9"
+  dependencies:
+    babel-plugin-syntax-object-rest-spread "^6.8.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-react-display-name@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-display-name/-/babel-plugin-transform-react-display-name-6.8.0.tgz#f7a084977383d728bdbdc2835bba0159577f660e"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-react-jsx-self@^6.11.0:
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx-self/-/babel-plugin-transform-react-jsx-self-6.11.0.tgz#605c9450c1429f97a930f7e1dfe3f0d9d0dbd0f4"
+  dependencies:
+    babel-plugin-syntax-jsx "^6.8.0"
+    babel-runtime "^6.9.0"
+
+babel-plugin-transform-react-jsx-source@^6.3.13:
+  version "6.9.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx-source/-/babel-plugin-transform-react-jsx-source-6.9.0.tgz#af684a05c2067a86e0957d4f343295ccf5dccf00"
+  dependencies:
+    babel-plugin-syntax-jsx "^6.8.0"
+    babel-runtime "^6.9.0"
+
+babel-plugin-transform-react-jsx@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx/-/babel-plugin-transform-react-jsx-6.8.0.tgz#94759942f70af18c617189aa7f3593f1644a71ab"
+  dependencies:
+    babel-helper-builder-react-jsx "^6.8.0"
+    babel-plugin-syntax-jsx "^6.8.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-regenerator@^6.16.0:
+  version "6.16.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.16.1.tgz#a75de6b048a14154aae14b0122756c5bed392f59"
+  dependencies:
+    babel-runtime "^6.9.0"
+    babel-types "^6.16.0"
+    private "~0.1.5"
+
+babel-plugin-transform-strict-mode@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.18.0.tgz#df7cf2991fe046f44163dcd110d5ca43bc652b9d"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-types "^6.18.0"
+
+babel-preset-es2015@^6.13.2:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-es2015/-/babel-preset-es2015-6.18.0.tgz#b8c70df84ec948c43dcf2bf770e988eb7da88312"
+  dependencies:
+    babel-plugin-check-es2015-constants "^6.3.13"
+    babel-plugin-transform-es2015-arrow-functions "^6.3.13"
+    babel-plugin-transform-es2015-block-scoped-functions "^6.3.13"
+    babel-plugin-transform-es2015-block-scoping "^6.18.0"
+    babel-plugin-transform-es2015-classes "^6.18.0"
+    babel-plugin-transform-es2015-computed-properties "^6.3.13"
+    babel-plugin-transform-es2015-destructuring "^6.18.0"
+    babel-plugin-transform-es2015-duplicate-keys "^6.6.0"
+    babel-plugin-transform-es2015-for-of "^6.18.0"
+    babel-plugin-transform-es2015-function-name "^6.9.0"
+    babel-plugin-transform-es2015-literals "^6.3.13"
+    babel-plugin-transform-es2015-modules-amd "^6.18.0"
+    babel-plugin-transform-es2015-modules-commonjs "^6.18.0"
+    babel-plugin-transform-es2015-modules-systemjs "^6.18.0"
+    babel-plugin-transform-es2015-modules-umd "^6.18.0"
+    babel-plugin-transform-es2015-object-super "^6.3.13"
+    babel-plugin-transform-es2015-parameters "^6.18.0"
+    babel-plugin-transform-es2015-shorthand-properties "^6.18.0"
+    babel-plugin-transform-es2015-spread "^6.3.13"
+    babel-plugin-transform-es2015-sticky-regex "^6.3.13"
+    babel-plugin-transform-es2015-template-literals "^6.6.0"
+    babel-plugin-transform-es2015-typeof-symbol "^6.18.0"
+    babel-plugin-transform-es2015-unicode-regex "^6.3.13"
+    babel-plugin-transform-regenerator "^6.16.0"
+
+babel-preset-react@^6.5.0:
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-react/-/babel-preset-react-6.16.0.tgz#aa117d60de0928607e343c4828906e4661824316"
+  dependencies:
+    babel-plugin-syntax-flow "^6.3.13"
+    babel-plugin-syntax-jsx "^6.3.13"
+    babel-plugin-transform-flow-strip-types "^6.3.13"
+    babel-plugin-transform-react-display-name "^6.3.13"
+    babel-plugin-transform-react-jsx "^6.3.13"
+    babel-plugin-transform-react-jsx-self "^6.11.0"
+    babel-plugin-transform-react-jsx-source "^6.3.13"
+
+babel-preset-stage-0@^6.5.0:
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-stage-0/-/babel-preset-stage-0-6.16.0.tgz#f5a263c420532fd57491f1a7315b3036e428f823"
+  dependencies:
+    babel-plugin-transform-do-expressions "^6.3.13"
+    babel-plugin-transform-function-bind "^6.3.13"
+    babel-preset-stage-1 "^6.16.0"
+
+babel-preset-stage-1@^6.16.0:
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-stage-1/-/babel-preset-stage-1-6.16.0.tgz#9d31fbbdae7b17c549fd3ac93e3cf6902695e479"
+  dependencies:
+    babel-plugin-transform-class-constructor-call "^6.3.13"
+    babel-plugin-transform-export-extensions "^6.3.13"
+    babel-preset-stage-2 "^6.16.0"
+
+babel-preset-stage-2@^6.13.0, babel-preset-stage-2@^6.16.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-stage-2/-/babel-preset-stage-2-6.18.0.tgz#9eb7bf9a8e91c68260d5ba7500493caaada4b5b5"
+  dependencies:
+    babel-plugin-syntax-dynamic-import "^6.18.0"
+    babel-plugin-transform-class-properties "^6.18.0"
+    babel-plugin-transform-decorators "^6.13.0"
+    babel-preset-stage-3 "^6.17.0"
+
+babel-preset-stage-3@^6.17.0:
+  version "6.17.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-stage-3/-/babel-preset-stage-3-6.17.0.tgz#b6638e46db6e91e3f889013d8ce143917c685e39"
+  dependencies:
+    babel-plugin-syntax-trailing-function-commas "^6.3.13"
+    babel-plugin-transform-async-generator-functions "^6.17.0"
+    babel-plugin-transform-async-to-generator "^6.16.0"
+    babel-plugin-transform-exponentiation-operator "^6.3.13"
+    babel-plugin-transform-object-rest-spread "^6.16.0"
+
+babel-register@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.18.0.tgz#892e2e03865078dd90ad2c715111ec4449b32a68"
+  dependencies:
+    babel-core "^6.18.0"
+    babel-runtime "^6.11.6"
+    core-js "^2.4.0"
+    home-or-tmp "^2.0.0"
+    lodash "^4.2.0"
+    mkdirp "^0.5.1"
+    source-map-support "^0.4.2"
+
+babel-runtime@^6.0.0, babel-runtime@^6.11.6, babel-runtime@^6.9.0, babel-runtime@^6.9.1:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.18.0.tgz#0f4177ffd98492ef13b9f823e9994a02584c9078"
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.9.5"
+
+babel-standalone@^6.7.7:
+  version "6.18.1"
+  resolved "https://registry.yarnpkg.com/babel-standalone/-/babel-standalone-6.18.1.tgz#17914105fcbcad958d554e0f4ea63ca31e7a6a82"
+
+babel-template@^6.14.0, babel-template@^6.15.0, babel-template@^6.16.0, babel-template@^6.8.0:
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.16.0.tgz#e149dd1a9f03a35f817ddbc4d0481988e7ebc8ca"
+  dependencies:
+    babel-runtime "^6.9.0"
+    babel-traverse "^6.16.0"
+    babel-types "^6.16.0"
+    babylon "^6.11.0"
+    lodash "^4.2.0"
+
+babel-traverse@^6.0.20, babel-traverse@^6.16.0, babel-traverse@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.18.0.tgz#5aeaa980baed2a07c8c47329cd90c3b90c80f05e"
+  dependencies:
+    babel-code-frame "^6.16.0"
+    babel-messages "^6.8.0"
+    babel-runtime "^6.9.0"
+    babel-types "^6.18.0"
+    babylon "^6.11.0"
+    debug "^2.2.0"
+    globals "^9.0.0"
+    invariant "^2.2.0"
+    lodash "^4.2.0"
+
+babel-types@^6.0.19, babel-types@^6.13.0, babel-types@^6.16.0, babel-types@^6.18.0, babel-types@^6.8.0, babel-types@^6.9.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.18.0.tgz#1f7d5a73474c59eb9151b2417bbff4e4fce7c3f8"
+  dependencies:
+    babel-runtime "^6.9.1"
+    esutils "^2.0.2"
+    lodash "^4.2.0"
+    to-fast-properties "^1.0.1"
+
+babylon@^6.0.18, babylon@^6.11.0:
+  version "6.13.1"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.13.1.tgz#adca350e088f0467647157652bafead6ddb8dfdb"
+
+balanced-match@^0.4.1, balanced-match@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838"
+
+balanced-match@~0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.1.0.tgz#b504bd05869b39259dd0c5efc35d843176dccc4a"
+
+base64-js@^1.0.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.0.tgz#a39992d723584811982be5e290bb6a53d86700f1"
+
+Base64@~0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/Base64/-/Base64-0.2.1.tgz#ba3a4230708e186705065e66babdd4c35cf60028"
+
+bcrypt-pbkdf@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.0.tgz#3ca76b85241c7170bf7d9703e7b9aa74630040d4"
+  dependencies:
+    tweetnacl "^0.14.3"
+
+big.js@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.1.3.tgz#4cada2193652eb3ca9ec8e55c9015669c9806978"
+
+binary-extensions@^1.0.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.7.0.tgz#6c1610db163abfb34edfe42fa423343a1e01185d"
+
+block-stream@*:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
+  dependencies:
+    inherits "~2.0.0"
+
+bluebird@^3.4.6:
+  version "3.4.6"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.4.6.tgz#01da8d821d87813d158967e743d5fe6c62cf8c0f"
+
+boolbase@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
+
+boom@2.x.x:
+  version "2.10.1"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-2.10.1.tgz#39c8918ceff5799f83f9492a848f625add0c766f"
+  dependencies:
+    hoek "2.x.x"
+
+brace-expansion@^1.0.0:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.6.tgz#7197d7eaa9b87e648390ea61fc66c84427420df9"
+  dependencies:
+    balanced-match "^0.4.1"
+    concat-map "0.0.1"
+
+braces@^1.8.2:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
+  dependencies:
+    expand-range "^1.8.1"
+    preserve "^0.2.0"
+    repeat-element "^1.1.2"
+
+browserify-zlib@~0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.1.4.tgz#bb35f8a519f600e0fa6b8485241c979d0141fb2d"
+  dependencies:
+    pako "~0.2.0"
+
+browserslist@~1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.4.0.tgz#9cfdcf5384d9158f5b70da2aa00b30e8ff019049"
+  dependencies:
+    caniuse-db "^1.0.30000539"
+
+buffer-shims@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/buffer-shims/-/buffer-shims-1.0.0.tgz#9978ce317388c649ad8793028c3477ef044a8b51"
+
+buffer@^4.9.0:
+  version "4.9.1"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.1.tgz#6d1bb601b07a4efced97094132093027c95bc298"
+  dependencies:
+    base64-js "^1.0.2"
+    ieee754 "^1.1.4"
+    isarray "^1.0.0"
+
+builtin-modules@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
+
+camel-case@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73"
+  dependencies:
+    no-case "^2.2.0"
+    upper-case "^1.1.1"
+
+camelcase-keys@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7"
+  dependencies:
+    camelcase "^2.0.0"
+    map-obj "^1.0.0"
+
+camelcase@^1.0.2:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
+
+camelcase@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
+
+camelcase@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
+
+caniuse-db@^1.0.30000539, caniuse-db@^1.0.30000554:
+  version "1.0.30000572"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000572.tgz#81d0aa6b7de2d785c8dcab135502983276cc707d"
+
+caseless@~0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.11.0.tgz#715b96ea9841593cc33067923f5ec60ebda4f7d7"
+
+center-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/center-align/-/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad"
+  dependencies:
+    align-text "^0.1.3"
+    lazy-cache "^1.0.3"
+
+chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
+  dependencies:
+    ansi-styles "^2.2.1"
+    escape-string-regexp "^1.0.2"
+    has-ansi "^2.0.0"
+    strip-ansi "^3.0.0"
+    supports-color "^2.0.0"
+
+change-case@3.0.x:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/change-case/-/change-case-3.0.0.tgz#6c9c8e35f8790870a82b6b0745be8c3cbef9b081"
+  dependencies:
+    camel-case "^3.0.0"
+    constant-case "^2.0.0"
+    dot-case "^2.1.0"
+    header-case "^1.0.0"
+    is-lower-case "^1.1.0"
+    is-upper-case "^1.1.0"
+    lower-case "^1.1.1"
+    lower-case-first "^1.0.0"
+    no-case "^2.2.0"
+    param-case "^2.1.0"
+    pascal-case "^2.0.0"
+    path-case "^2.1.0"
+    sentence-case "^2.1.0"
+    snake-case "^2.1.0"
+    swap-case "^1.1.0"
+    title-case "^2.1.0"
+    upper-case "^1.1.1"
+    upper-case-first "^1.1.0"
+
+cheerio@^0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-0.18.0.tgz#4e1c06377e725b740e996e0dfec353863de677fa"
+  dependencies:
+    CSSselect "~0.4.0"
+    dom-serializer "~0.0.0"
+    entities "~1.1.1"
+    htmlparser2 "~3.8.1"
+    lodash "~2.4.1"
+
+chokidar@^1.0.0:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.6.1.tgz#2f4447ab5e96e50fb3d789fd90d4c72e0e4c70c2"
+  dependencies:
+    anymatch "^1.3.0"
+    async-each "^1.0.0"
+    glob-parent "^2.0.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^2.0.0"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+  optionalDependencies:
+    fsevents "^1.0.0"
+
+clap@^1.0.9:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/clap/-/clap-1.1.1.tgz#a8a93e0bfb7581ac199c4f001a5525a724ce696d"
+  dependencies:
+    chalk "^1.1.3"
+
+classnames@^2.2.5:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
+
+clean-css@3.4.x:
+  version "3.4.20"
+  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-3.4.20.tgz#c0d8963b5448e030f0bcd3ddd0dac4dfe3dea501"
+  dependencies:
+    commander "2.8.x"
+    source-map "0.4.x"
+
+cliui@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
+  dependencies:
+    center-align "^0.1.1"
+    right-align "^0.1.1"
+    wordwrap "0.0.2"
+
+cliui@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
+  dependencies:
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wrap-ansi "^2.0.0"
+
+clone@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.2.tgz#260b7a99ebb1edfe247538175f783243cb19d149"
+
+coa@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/coa/-/coa-1.0.1.tgz#7f959346cfc8719e3f7233cd6852854a7c67d8a3"
+  dependencies:
+    q "^1.1.2"
+
+code-point-at@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.0.1.tgz#1104cd34f9b5b45d3eba88f1babc1924e1ce35fb"
+  dependencies:
+    number-is-nan "^1.0.0"
+
+codemirror@^5.14.2:
+  version "5.20.2"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.20.2.tgz#918e0ece96d57a99030b2f8b33011284bed5217a"
+
+collections@^0.2.0:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/collections/-/collections-0.2.2.tgz#1f23026b2ef36f927eecc901e99c5f0d48fa334e"
+  dependencies:
+    weak-map "1.0.0"
+
+color-convert@^1.3.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.6.0.tgz#7592755faf53938a05b1ea8e5374cab77d6dd190"
+  dependencies:
+    color-name "^1.1.1"
+
+color-name@^1.0.0, color-name@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.1.tgz#4b1415304cf50028ea81643643bd82ea05803689"
+
+color-string@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-0.3.0.tgz#27d46fb67025c5c2fa25993bfbf579e47841b991"
+  dependencies:
+    color-name "^1.0.0"
+
+color@^0.11.0:
+  version "0.11.3"
+  resolved "https://registry.yarnpkg.com/color/-/color-0.11.3.tgz#4bad1d0d52499dd00dbd6f0868442467e49394e6"
+  dependencies:
+    clone "^1.0.2"
+    color-convert "^1.3.0"
+    color-string "^0.3.0"
+
+colormin@^1.0.5:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/colormin/-/colormin-1.1.2.tgz#ea2f7420a72b96881a38aae59ec124a6f7298133"
+  dependencies:
+    color "^0.11.0"
+    css-color-names "0.0.4"
+    has "^1.0.1"
+
+colors@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
+
+combined-stream@^1.0.5, combined-stream@~1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009"
+  dependencies:
+    delayed-stream "~1.0.0"
+
+commander@^2.9.0, commander@2.9.0, commander@2.9.x:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
+  dependencies:
+    graceful-readlink ">= 1.0.0"
+
+commander@2.8.x:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.8.1.tgz#06be367febfda0c330aa1e2a072d3dc9762425d4"
+  dependencies:
+    graceful-readlink ">= 1.0.0"
+
+commondir@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+
+console-browserify@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10"
+  dependencies:
+    date-now "^0.1.4"
+
+console-control-strings@^1.0.0, console-control-strings@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
+
+constant-case@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/constant-case/-/constant-case-2.0.0.tgz#4175764d389d3fa9c8ecd29186ed6005243b6a46"
+  dependencies:
+    snake-case "^2.1.0"
+    upper-case "^1.1.1"
+
+constants-browserify@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-0.0.1.tgz#92577db527ba6c4cf0a4568d84bc031f441e21f2"
+
+content-disposition@0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.1.tgz#87476c6a67c8daa87e32e87616df883ba7fb071b"
+
+content-type@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.2.tgz#b7d113aee7a8dd27bd21133c4dc2529df1721eed"
+
+convert-source-map@^1.1.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.3.0.tgz#e9f3e9c6e2728efc2676696a70eb382f73106a67"
+
+cookie-signature@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
+
+cookie@0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
+
+core-js@^1.0.0:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
+
+core-js@^2.4.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.4.1.tgz#4de911e667b0eae9124e34254b53aea6fc618d3e"
+
+core-util-is@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
+
+cross-env@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-2.0.1.tgz#f283b4039ea759ada9ab7e987ad3bddb241b79a6"
+  dependencies:
+    cross-spawn "^3.0.1"
+    lodash.assign "^3.2.0"
+
+cross-spawn@^3.0.0, cross-spawn@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-3.0.1.tgz#1256037ecb9f0c5f79e3d6ef135e30770184b982"
+  dependencies:
+    lru-cache "^4.0.1"
+    which "^1.2.9"
+
+cryptiles@2.x.x:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-2.0.5.tgz#3bdfecdc608147c1c67202fa291e7dca59eaa3b8"
+  dependencies:
+    boom "2.x.x"
+
+crypto-browserify@~3.2.6:
+  version "3.2.8"
+  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.2.8.tgz#b9b11dbe6d9651dd882a01e6cc467df718ecf189"
+  dependencies:
+    pbkdf2-compat "2.0.1"
+    ripemd160 "0.2.0"
+    sha.js "2.2.6"
+
+css-color-names@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
+
+css-loader@^0.23.1:
+  version "0.23.1"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.23.1.tgz#9fa23f2b5c0965235910ad5ecef3b8a36390fe50"
+  dependencies:
+    css-selector-tokenizer "^0.5.1"
+    cssnano ">=2.6.1 <4"
+    loader-utils "~0.2.2"
+    lodash.camelcase "^3.0.1"
+    object-assign "^4.0.1"
+    postcss "^5.0.6"
+    postcss-modules-extract-imports "^1.0.0"
+    postcss-modules-local-by-default "^1.0.1"
+    postcss-modules-scope "^1.0.0"
+    postcss-modules-values "^1.1.0"
+    source-list-map "^0.1.4"
+
+css-select@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
+  dependencies:
+    boolbase "~1.0.0"
+    css-what "2.1"
+    domutils "1.5.1"
+    nth-check "~1.0.1"
+
+css-selector-tokenizer@^0.5.1:
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.5.4.tgz#139bafd34a35fd0c1428487049e0699e6f6a2c21"
+  dependencies:
+    cssesc "^0.1.0"
+    fastparse "^1.1.1"
+
+css-selector-tokenizer@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.6.0.tgz#6445f582c7930d241dcc5007a43d6fcb8f073152"
+  dependencies:
+    cssesc "^0.1.0"
+    fastparse "^1.1.1"
+    regexpu-core "^1.0.0"
+
+css-what@2.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
+
+cssesc@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
+
+"cssnano@>=2.6.1 <4":
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-3.8.0.tgz#bb90ac5292f42b679d9a05f6da0e9697556bb80d"
+  dependencies:
+    autoprefixer "^6.3.1"
+    decamelize "^1.1.2"
+    defined "^1.0.0"
+    has "^1.0.1"
+    object-assign "^4.0.1"
+    postcss "^5.0.14"
+    postcss-calc "^5.2.0"
+    postcss-colormin "^2.1.8"
+    postcss-convert-values "^2.3.4"
+    postcss-discard-comments "^2.0.4"
+    postcss-discard-duplicates "^2.0.1"
+    postcss-discard-empty "^2.0.1"
+    postcss-discard-overridden "^0.1.1"
+    postcss-discard-unused "^2.2.1"
+    postcss-filter-plugins "^2.0.0"
+    postcss-merge-idents "^2.1.5"
+    postcss-merge-longhand "^2.0.1"
+    postcss-merge-rules "^2.0.3"
+    postcss-minify-font-values "^1.0.2"
+    postcss-minify-gradients "^1.0.1"
+    postcss-minify-params "^1.0.4"
+    postcss-minify-selectors "^2.0.4"
+    postcss-normalize-charset "^1.1.0"
+    postcss-normalize-url "^3.0.7"
+    postcss-ordered-values "^2.1.0"
+    postcss-reduce-idents "^2.2.2"
+    postcss-reduce-initial "^1.0.0"
+    postcss-reduce-transforms "^1.0.3"
+    postcss-svgo "^2.1.1"
+    postcss-unique-selectors "^2.0.2"
+    postcss-value-parser "^3.2.3"
+    postcss-zindex "^2.0.1"
+
+csso@~2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-2.2.1.tgz#51fbb5347e50e81e6ed51668a48490ae6fe2afe2"
+  dependencies:
+    clap "^1.0.9"
+    source-map "^0.5.3"
+
+CSSselect@~0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/CSSselect/-/CSSselect-0.4.1.tgz#f8ab7e1f8418ce63cda6eb7bd778a85d7ec492b2"
+  dependencies:
+    CSSwhat "0.4"
+    domutils "1.4"
+
+CSSwhat@0.4:
+  version "0.4.7"
+  resolved "https://registry.yarnpkg.com/CSSwhat/-/CSSwhat-0.4.7.tgz#867da0ff39f778613242c44cfea83f0aa4ebdf9b"
+
+currently-unhandled@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
+  dependencies:
+    array-find-index "^1.0.1"
+
+d@^0.1.1, d@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/d/-/d-0.1.1.tgz#da184c535d18d8ee7ba2aa229b914009fae11309"
+  dependencies:
+    es5-ext "~0.10.2"
+
+dashdash@^1.12.0:
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.0.tgz#29e486c5418bf0f356034a993d51686a33e84141"
+  dependencies:
+    assert-plus "^1.0.0"
+
+date-now@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
+
+debug@^2.1.1, debug@^2.2.0, debug@~2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.2.0.tgz#f87057e995b1a1f6ae6a4960664137bc56f039da"
+  dependencies:
+    ms "0.7.1"
+
+decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+
+deep-equal@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
+
+deep-extend@~0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.1.tgz#efe4113d08085f4e6f9687759810f807469e2253"
+
+defined@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+
+delegates@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
+
+depd@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.0.tgz#e1bd82c6aab6ced965b97b88b17ed3e528ca18c3"
+
+destroy@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
+
+detect-indent@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-4.0.0.tgz#f76d064352cdf43a1cb6ce619c4ee3a9475de208"
+  dependencies:
+    repeating "^2.0.0"
+
+dom-converter@~0.1:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.1.4.tgz#a45ef5727b890c9bffe6d7c876e7b19cb0e17f3b"
+  dependencies:
+    utila "~0.3"
+
+dom-serializer@~0.0.0:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.0.1.tgz#9589827f1e32d22c37c829adabd59b3247af8eaf"
+  dependencies:
+    domelementtype "~1.1.1"
+    entities "~1.1.1"
+
+dom-serializer@0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
+  dependencies:
+    domelementtype "~1.1.1"
+    entities "~1.1.1"
+
+dom-walk@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"
+
+domain-browser@^1.1.1:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
+
+domelementtype@~1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.1.3.tgz#bd28773e2642881aec51544924299c5cd822185b"
+
+domelementtype@1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.0.tgz#b17aed82e8ab59e52dd9c19b1756e0fc187204c2"
+
+domhandler@2.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.1.0.tgz#d2646f5e57f6c3bab11cf6cb05d3c0acf7412594"
+  dependencies:
+    domelementtype "1"
+
+domhandler@2.3:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.3.0.tgz#2de59a0822d5027fabff6f032c2b25a2a8abe738"
+  dependencies:
+    domelementtype "1"
+
+domutils@1.1:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.1.6.tgz#bddc3de099b9a2efacc51c623f28f416ecc57485"
+  dependencies:
+    domelementtype "1"
+
+domutils@1.4:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.4.3.tgz#0865513796c6b306031850e175516baf80b72a6f"
+  dependencies:
+    domelementtype "1"
+
+domutils@1.5, domutils@1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
+  dependencies:
+    dom-serializer "0"
+    domelementtype "1"
+
+dot-case@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-2.1.0.tgz#4b43dd0d7403c34cb645424add397e80bfe85ca6"
+  dependencies:
+    no-case "^2.2.0"
+
+ecc-jsbn@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
+  dependencies:
+    jsbn "~0.1.0"
+
+ee-first@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+
+emojis-list@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
+
+encodeurl@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20"
+
+encoding@^0.1.11:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
+  dependencies:
+    iconv-lite "~0.4.13"
+
+enhanced-resolve@~0.9.0:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-0.9.1.tgz#4d6e689b3725f86090927ccc86cd9f1635b89e2e"
+  dependencies:
+    graceful-fs "^4.1.2"
+    memory-fs "^0.2.0"
+    tapable "^0.1.8"
+
+entities@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
+
+entities@1.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-1.0.0.tgz#b2987aa3821347fcde642b24fdfc9e4fb712bf26"
+
+errno@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.4.tgz#b896e23a9e5e8ba33871fc996abd3635fc9a1c7d"
+  dependencies:
+    prr "~0.0.0"
+
+error-ex@^1.2.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.0.tgz#e67b43f3e82c96ea3a584ffee0b9fc3325d802d9"
+  dependencies:
+    is-arrayish "^0.2.1"
+
+error-stack-parser@^1.3.6:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-1.3.6.tgz#e0e73b93e417138d1cd7c0b746b1a4a14854c292"
+  dependencies:
+    stackframe "^0.3.1"
+
+es5-ext@^0.10.7, es5-ext@~0.10.11, es5-ext@~0.10.2:
+  version "0.10.12"
+  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.12.tgz#aa84641d4db76b62abba5e45fd805ecbab140047"
+  dependencies:
+    es6-iterator "2"
+    es6-symbol "~3.1"
+
+es6-iterator@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.0.tgz#bd968567d61635e33c0b80727613c9cb4b096bac"
+  dependencies:
+    d "^0.1.1"
+    es5-ext "^0.10.7"
+    es6-symbol "3"
+
+es6-symbol@^3.0.2, es6-symbol@~3.1, es6-symbol@3:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.0.tgz#94481c655e7a7cad82eba832d97d5433496d7ffa"
+  dependencies:
+    d "~0.1.1"
+    es5-ext "~0.10.11"
+
+es6-templates@^0.2.2:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/es6-templates/-/es6-templates-0.2.3.tgz#5cb9ac9fb1ded6eb1239342b81d792bbb4078ee4"
+  dependencies:
+    recast "~0.11.12"
+    through "~2.3.6"
+
+escape-html@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
+
+escape-string-regexp@^1.0.2:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+
+esprima@^2.6.0:
+  version "2.7.3"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
+
+esprima@~3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.1.tgz#02dbcc5ac3ece81070377f99158ec742ab5dda06"
+
+esutils@^2.0.0, esutils@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
+
+etag@~1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.7.0.tgz#03d30b5f67dd6e632d2945d30d6652731a34d5d8"
+
+events@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
+
+expand-brackets@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
+  dependencies:
+    is-posix-bracket "^0.1.0"
+
+expand-range@^1.8.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-1.8.2.tgz#a299effd335fe2721ebae8e257ec79644fc85337"
+  dependencies:
+    fill-range "^2.1.0"
+
+express@^4.13.4:
+  version "4.14.0"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.14.0.tgz#c1ee3f42cdc891fb3dc650a8922d51ec847d0d66"
+  dependencies:
+    accepts "~1.3.3"
+    array-flatten "1.1.1"
+    content-disposition "0.5.1"
+    content-type "~1.0.2"
+    cookie "0.3.1"
+    cookie-signature "1.0.6"
+    debug "~2.2.0"
+    depd "~1.1.0"
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    etag "~1.7.0"
+    finalhandler "0.5.0"
+    fresh "0.3.0"
+    merge-descriptors "1.0.1"
+    methods "~1.1.2"
+    on-finished "~2.3.0"
+    parseurl "~1.3.1"
+    path-to-regexp "0.1.7"
+    proxy-addr "~1.1.2"
+    qs "6.2.0"
+    range-parser "~1.2.0"
+    send "0.14.1"
+    serve-static "~1.11.1"
+    type-is "~1.6.13"
+    utils-merge "1.0.0"
+    vary "~1.1.0"
+
+extend@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.0.tgz#5a474353b9f3353ddd8176dfd37b91c83a46f1d4"
+
+extglob@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
+  dependencies:
+    is-extglob "^1.0.0"
+
+extract-text-webpack-plugin@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-1.0.1.tgz#c95bf3cbaac49dc96f1dc6e072549fbb654ccd2c"
+  dependencies:
+    async "^1.5.0"
+    loader-utils "^0.2.3"
+    webpack-sources "^0.1.0"
+
+extsprintf@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.0.2.tgz#e1080e0658e300b06294990cc70e1502235fd550"
+
+fastparse@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
+
+fbjs@^0.8.4:
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.5.tgz#f69ba8a876096cb1b9bffe4d7c1e71c19d39d008"
+  dependencies:
+    core-js "^1.0.0"
+    immutable "^3.7.6"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    ua-parser-js "^0.7.9"
+
+filename-regex@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.0.tgz#996e3e80479b98b9897f15a8a58b3d084e926775"
+
+fill-range@^2.1.0:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.3.tgz#50b77dfd7e469bc7492470963699fe7a8485a723"
+  dependencies:
+    is-number "^2.1.0"
+    isobject "^2.0.0"
+    randomatic "^1.1.3"
+    repeat-element "^1.1.2"
+    repeat-string "^1.5.2"
+
+finalhandler@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-0.5.0.tgz#e9508abece9b6dba871a6942a1d7911b91911ac7"
+  dependencies:
+    debug "~2.2.0"
+    escape-html "~1.0.3"
+    on-finished "~2.3.0"
+    statuses "~1.3.0"
+    unpipe "~1.0.0"
+
+find-cache-dir@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-0.1.1.tgz#c8defae57c8a52a8a784f9e31c57c742e993a0b9"
+  dependencies:
+    commondir "^1.0.1"
+    mkdirp "^0.5.1"
+    pkg-dir "^1.0.0"
+
+find-up@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
+  dependencies:
+    path-exists "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+flatten@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
+
+for-in@^0.1.5:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.6.tgz#c9f96e89bfad18a545af5ec3ed352a1d9e5b4dc8"
+
+for-own@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.4.tgz#0149b41a39088c7515f51ebe1c1386d45f935072"
+  dependencies:
+    for-in "^0.1.5"
+
+forever-agent@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
+
+form-data@~2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.1.1.tgz#4adf0342e1a79afa1e84c8c320a9ffc82392a1f3"
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.5"
+    mime-types "^2.1.12"
+
+forwarded@~0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.0.tgz#19ef9874c4ae1c297bcf078fde63a09b66a84363"
+
+fresh@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.3.0.tgz#651f838e22424e7566de161d8358caa199f83d4f"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+
+fsevents@^1.0.0:
+  version "1.0.14"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.0.14.tgz#558e8cc38643d8ef40fe45158486d0d25758eee4"
+  dependencies:
+    nan "^2.3.0"
+    node-pre-gyp "^0.6.29"
+
+fstream-ignore@~1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/fstream-ignore/-/fstream-ignore-1.0.5.tgz#9c31dae34767018fe1d249b24dada67d092da105"
+  dependencies:
+    fstream "^1.0.0"
+    inherits "2"
+    minimatch "^3.0.0"
+
+fstream@^1.0.0, fstream@^1.0.2, fstream@~1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.10.tgz#604e8a92fe26ffd9f6fae30399d4984e1ab22822"
+  dependencies:
+    graceful-fs "^4.1.2"
+    inherits "~2.0.0"
+    mkdirp ">=0.5 0"
+    rimraf "2"
+
+function-bind@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.0.tgz#16176714c801798e4e8f2cf7f7529467bb4a5771"
+
+gauge@~2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.6.0.tgz#d35301ad18e96902b4751dcbbe40f4218b942a46"
+  dependencies:
+    aproba "^1.0.3"
+    console-control-strings "^1.0.0"
+    has-color "^0.1.7"
+    has-unicode "^2.0.0"
+    object-assign "^4.1.0"
+    signal-exit "^3.0.0"
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wide-align "^1.1.0"
+
+gaze@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/gaze/-/gaze-1.1.2.tgz#847224677adb8870d679257ed3388fdb61e40105"
+  dependencies:
+    globule "^1.0.0"
+
+generate-function@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/generate-function/-/generate-function-2.0.0.tgz#6858fe7c0969b7d4e9093337647ac79f60dfbe74"
+
+generate-object-property@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/generate-object-property/-/generate-object-property-1.2.0.tgz#9c0e1c40308ce804f4783618b937fa88f99d50d0"
+  dependencies:
+    is-property "^1.0.0"
+
+get-caller-file@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
+
+get-stdin@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
+
+getpass@^0.1.1:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.6.tgz#283ffd9fc1256840875311c1b60e8c40187110e6"
+  dependencies:
+    assert-plus "^1.0.0"
+
+gh-pages@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/gh-pages/-/gh-pages-0.11.0.tgz#93313c6dcbfc74d426bc89a29ebff6420acc3c1b"
+  dependencies:
+    async "1.5.2"
+    commander "2.9.0"
+    globby "^4.0.0"
+    graceful-fs "4.1.2"
+    q "1.4.1"
+    q-io "1.13.2"
+    wrench "1.5.8"
+
+glob-base@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
+  dependencies:
+    glob-parent "^2.0.0"
+    is-glob "^2.0.0"
+
+glob-parent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28"
+  dependencies:
+    is-glob "^2.0.0"
+
+glob@^6.0.1:
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-6.0.4.tgz#0f08860f6a155127b2fadd4f9ce24b1aab6e4d22"
+  dependencies:
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "2 || 3"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@~7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.1.tgz#805211df04faaf1c63a3600306cdf5ade50b2ec8"
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.2"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+global@^4.3.0:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/global/-/global-4.3.1.tgz#5f757908c7cbabce54f386ae440e11e26b7916df"
+  dependencies:
+    min-document "^2.19.0"
+    process "~0.5.1"
+
+globals@^9.0.0:
+  version "9.12.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-9.12.0.tgz#992ce90828c3a55fa8f16fada177adb64664cf9d"
+
+globby@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-4.1.0.tgz#080f54549ec1b82a6c60e631fc82e1211dbe95f8"
+  dependencies:
+    array-union "^1.0.1"
+    arrify "^1.0.0"
+    glob "^6.0.1"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+globule@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/globule/-/globule-1.1.0.tgz#c49352e4dc183d85893ee825385eb994bb6df45f"
+  dependencies:
+    glob "~7.1.1"
+    lodash "~4.16.4"
+    minimatch "~3.0.2"
+
+graceful-fs@^4.1.2:
+  version "4.1.9"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.9.tgz#baacba37d19d11f9d146d3578bc99958c3787e29"
+
+graceful-fs@4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.2.tgz#fe2239b7574972e67e41f808823f9bfa4a991e37"
+
+"graceful-readlink@>= 1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
+
+har-validator@~2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-2.0.6.tgz#cdcbc08188265ad119b6a5a7c8ab70eecfb5d27d"
+  dependencies:
+    chalk "^1.1.1"
+    commander "^2.9.0"
+    is-my-json-valid "^2.12.4"
+    pinkie-promise "^2.0.0"
+
+has-ansi@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
+  dependencies:
+    ansi-regex "^2.0.0"
+
+has-color@^0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/has-color/-/has-color-0.1.7.tgz#67144a5260c34fc3cca677d041daf52fe7b78b2f"
+
+has-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
+
+has-unicode@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
+
+has@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.1.tgz#8461733f538b0837c9361e39a9ab9e9704dc2f28"
+  dependencies:
+    function-bind "^1.0.2"
+
+hawk@~3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
+  dependencies:
+    boom "2.x.x"
+    cryptiles "2.x.x"
+    hoek "2.x.x"
+    sntp "1.x.x"
+
+he@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/he/-/he-0.5.0.tgz#2c05ffaef90b68e860f3fd2b54ef580989277ee2"
+
+he@1.1.x:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/he/-/he-1.1.0.tgz#29319d49beec13a9b1f3c4f9b2a6dde4859bb2a7"
+
+header-case@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/header-case/-/header-case-1.0.0.tgz#d9e335909505d56051ec16a0106821889e910781"
+  dependencies:
+    no-case "^2.2.0"
+    upper-case "^1.1.3"
+
+"highlight-loader@git://github.com/javivelasco/highlight-loader.git#master":
+  version "0.4.5"
+  resolved "git://github.com/javivelasco/highlight-loader.git#24a6155f81190a34ec923d98c3aec3f6930939ff"
+  dependencies:
+    cheerio "^0.18.0"
+    he "^0.5.0"
+    highlight.js "^8.4.0"
+
+highlight.js@^8.4.0:
+  version "8.9.1"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-8.9.1.tgz#b8a9c5493212a9392f0222b649c9611497ebfb88"
+
+highlight.js@^9.3.0:
+  version "9.7.0"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.7.0.tgz#e7a926bf3079c65b2ae50314878e456a009b4aac"
+
+history@^2.1.1, history@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/history/-/history-2.1.2.tgz#4aa2de897a0e4867e4539843be6ecdb2986bfdec"
+  dependencies:
+    deep-equal "^1.0.0"
+    invariant "^2.0.0"
+    query-string "^3.0.0"
+    warning "^2.0.0"
+
+hoek@2.x.x:
+  version "2.16.3"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
+
+hoist-non-react-statics@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"
+
+home-or-tmp@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.1"
+
+hosted-git-info@^2.1.4:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.1.5.tgz#0ba81d90da2e25ab34a332e6ec77936e1598118b"
+
+html-comment-regex@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.1.tgz#668b93776eaae55ebde8f3ad464b307a4963625e"
+
+html-entities@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.0.tgz#41948caf85ce82fed36e4e6a0ed371a6664379e2"
+
+html-loader@^0.4.3:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/html-loader/-/html-loader-0.4.4.tgz#f2b5b9acd5e035ff3ab5fd369c13c97a7bb014da"
+  dependencies:
+    es6-templates "^0.2.2"
+    fastparse "^1.1.1"
+    html-minifier "^3.0.1"
+    loader-utils "^0.2.15"
+    object-assign "^4.1.0"
+
+html-minifier@^3.0.1, html-minifier@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.1.0.tgz#e0b35d7a1fff89ae989e2fa51c572bc0d1f2d1f6"
+  dependencies:
+    change-case "3.0.x"
+    clean-css "3.4.x"
+    commander "2.9.x"
+    he "1.1.x"
+    ncname "1.0.x"
+    relateurl "0.2.x"
+    uglify-js "2.7.x"
+
+html-webpack-plugin@^2.16.1:
+  version "2.24.1"
+  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-2.24.1.tgz#7f45fc678f66eac2d433f22336b4399da023b57e"
+  dependencies:
+    bluebird "^3.4.6"
+    html-minifier "^3.1.0"
+    loader-utils "^0.2.16"
+    lodash "^4.16.4"
+    pretty-error "^2.0.2"
+    toposort "^1.0.0"
+
+htmlparser2@~3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.3.0.tgz#cc70d05a59f6542e43f0e685c982e14c924a9efe"
+  dependencies:
+    domelementtype "1"
+    domhandler "2.1"
+    domutils "1.1"
+    readable-stream "1.0"
+
+htmlparser2@~3.8.1:
+  version "3.8.3"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.8.3.tgz#996c28b191516a8be86501a7d79757e5c70c1068"
+  dependencies:
+    domelementtype "1"
+    domhandler "2.3"
+    domutils "1.5"
+    entities "1.0"
+    readable-stream "1.1"
+
+http-browserify@^1.3.2:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/http-browserify/-/http-browserify-1.7.0.tgz#33795ade72df88acfbfd36773cefeda764735b20"
+  dependencies:
+    Base64 "~0.2.0"
+    inherits "~2.0.1"
+
+http-errors@~1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.5.0.tgz#b1cb3d8260fd8e2386cad3189045943372d48211"
+  dependencies:
+    inherits "2.0.1"
+    setprototypeof "1.0.1"
+    statuses ">= 1.3.0 < 2"
+
+http-signature@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"
+  dependencies:
+    assert-plus "^0.2.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+https-browserify@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.0.tgz#b3ffdfe734b2a3d4a9efd58e8654c91fce86eafd"
+
+iconv-lite@~0.4.13:
+  version "0.4.13"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2"
+
+icss-replace-symbols@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.0.2.tgz#cb0b6054eb3af6edc9ab1d62d01933e2d4c8bfa5"
+
+ieee754@^1.1.4:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
+
+immutable@^3.7.6:
+  version "3.8.1"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.1.tgz#200807f11ab0f72710ea485542de088075f68cd2"
+
+in-publish@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/in-publish/-/in-publish-2.0.0.tgz#e20ff5e3a2afc2690320b6dc552682a9c7fadf51"
+
+indent-string@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-2.1.0.tgz#8e2d48348742121b4a8218b7a137e9a52049dc80"
+  dependencies:
+    repeating "^2.0.0"
+
+indexes-of@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
+
+indexof@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@^2.0.1, inherits@~2.0.0, inherits@~2.0.1, inherits@2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+
+inherits@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
+
+ini@~1.3.0:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
+
+interpret@^0.6.4:
+  version "0.6.6"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-0.6.6.tgz#fecd7a18e7ce5ca6abfb953e1f86213a49f1625b"
+
+invariant@^2.0.0, invariant@^2.2.0, invariant@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.1.tgz#b097010547668c7e337028ebe816ebe36c8a8d54"
+  dependencies:
+    loose-envify "^1.0.0"
+
+invert-kv@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
+
+ipaddr.js@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.1.1.tgz#c791d95f52b29c1247d5df80ada39b8a73647230"
+
+is-absolute-url@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-2.0.0.tgz#9c4b20b0e5c0cbef9a479a367ede6f991679f359"
+
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+
+is-binary-path@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
+  dependencies:
+    binary-extensions "^1.0.0"
+
+is-buffer@^1.0.2:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.4.tgz#cfc86ccd5dc5a52fa80489111c6920c457e2d98b"
+
+is-builtin-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-builtin-module/-/is-builtin-module-1.0.0.tgz#540572d34f7ac3119f8f76c30cbc1b1e037affbe"
+  dependencies:
+    builtin-modules "^1.0.0"
+
+is-dotfile@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.2.tgz#2c132383f39199f8edc268ca01b9b007d205cc4d"
+
+is-equal-shallow@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz#2238098fc221de0bcfa5d9eac4c45d638aa1c534"
+  dependencies:
+    is-primitive "^2.0.0"
+
+is-extendable@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
+
+is-extglob@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
+
+is-finite@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.0.2.tgz#cc6677695602be550ef11e8b4aa6305342b6d0aa"
+  dependencies:
+    number-is-nan "^1.0.0"
+
+is-fullwidth-code-point@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
+  dependencies:
+    number-is-nan "^1.0.0"
+
+is-glob@^2.0.0, is-glob@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
+  dependencies:
+    is-extglob "^1.0.0"
+
+is-lower-case@^1.1.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/is-lower-case/-/is-lower-case-1.1.3.tgz#7e147be4768dc466db3bfb21cc60b31e6ad69393"
+  dependencies:
+    lower-case "^1.1.0"
+
+is-my-json-valid@^2.12.4:
+  version "2.15.0"
+  resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.15.0.tgz#936edda3ca3c211fd98f3b2d3e08da43f7b2915b"
+  dependencies:
+    generate-function "^2.0.0"
+    generate-object-property "^1.1.0"
+    jsonpointer "^4.0.0"
+    xtend "^4.0.0"
+
+is-number@^2.0.2, is-number@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-2.1.0.tgz#01fcbbb393463a548f2f466cce16dece49db908f"
+  dependencies:
+    kind-of "^3.0.2"
+
+is-plain-obj@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
+
+is-posix-bracket@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz#3334dc79774368e92f016e6fbc0a88f5cd6e6bc4"
+
+is-primitive@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
+
+is-property@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-property/-/is-property-1.0.2.tgz#57fe1c4e48474edd65b09911f26b1cd4095dda84"
+
+is-stream@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
+
+is-svg@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-2.0.1.tgz#f93ab3bf1d6bbca30e9753cd3485b1300eebc013"
+  dependencies:
+    html-comment-regex "^1.1.0"
+
+is-typedarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+
+is-upper-case@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/is-upper-case/-/is-upper-case-1.1.2.tgz#8d0b1fa7e7933a1e58483600ec7d9661cbaf756f"
+  dependencies:
+    upper-case "^1.1.0"
+
+is-utf8@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
+
+isarray@^1.0.0, isarray@~1.0.0, isarray@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+
+isexe@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-1.1.2.tgz#36f3e22e60750920f5e7241a476a8c6a42275ad0"
+
+isobject@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
+  dependencies:
+    isarray "1.0.0"
+
+isomorphic-fetch@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
+  dependencies:
+    node-fetch "^1.0.1"
+    whatwg-fetch ">=0.10.0"
+
+isstream@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+
+jodid25519@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/jodid25519/-/jodid25519-1.0.2.tgz#06d4912255093419477d425633606e0e90782967"
+  dependencies:
+    jsbn "~0.1.0"
+
+js-base64@^2.1.9:
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.1.9.tgz#f0e80ae039a4bd654b5f281fc93f04a914a7fcce"
+
+js-tokens@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-2.0.0.tgz#79903f5563ee778cc1162e6dcf1a0027c97f9cb5"
+
+js-yaml@~3.6.1:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.6.1.tgz#6e5fe67d8b205ce4d22fad05b7781e8dadcc4b30"
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^2.6.0"
+
+jsbn@~0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.0.tgz#650987da0dd74f4ebf5a11377a2aa2d273e97dfd"
+
+jsesc@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-1.3.0.tgz#46c3fec8c1892b12b0833db9bc7622176dbab34b"
+
+jsesc@~0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
+
+json-schema@0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
+
+json-stringify-safe@~5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
+
+json5@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.0.tgz#9b20715b026cbe3778fd769edccd822d8332a5b2"
+
+jsonpointer@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-4.0.0.tgz#6661e161d2fc445f19f98430231343722e1fcbd5"
+
+jsprim@^1.2.2:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.3.1.tgz#2a7256f70412a29ee3670aaca625994c4dcff252"
+  dependencies:
+    extsprintf "1.0.2"
+    json-schema "0.2.3"
+    verror "1.3.6"
+
+kind-of@^3.0.2:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.0.4.tgz#7b8ecf18a4e17f8269d73b501c9f232c96887a74"
+  dependencies:
+    is-buffer "^1.0.2"
+
+lazy-cache@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
+
+lcid@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835"
+  dependencies:
+    invert-kv "^1.0.0"
+
+load-json-file@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^2.2.0"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+    strip-bom "^2.0.0"
+
+loader-utils@^0.2.11, loader-utils@^0.2.14, loader-utils@^0.2.15, loader-utils@^0.2.16, loader-utils@^0.2.3, loader-utils@^0.2.7, loader-utils@~0.2.2:
+  version "0.2.16"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.16.tgz#f08632066ed8282835dff88dfb52704765adee6d"
+  dependencies:
+    big.js "^3.1.3"
+    emojis-list "^2.0.0"
+    json5 "^0.5.0"
+    object-assign "^4.0.1"
+
+lodash._baseassign@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/lodash._baseassign/-/lodash._baseassign-3.2.0.tgz#8c38a099500f215ad09e59f1722fd0c52bfe0a4e"
+  dependencies:
+    lodash._basecopy "^3.0.0"
+    lodash.keys "^3.0.0"
+
+lodash._basecopy@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz#8da0e6a876cf344c0ad8a54882111dd3c5c7ca36"
+
+lodash._bindcallback@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e"
+
+lodash._createassigner@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/lodash._createassigner/-/lodash._createassigner-3.1.1.tgz#838a5bae2fdaca63ac22dee8e19fa4e6d6970b11"
+  dependencies:
+    lodash._bindcallback "^3.0.0"
+    lodash._isiterateecall "^3.0.0"
+    lodash.restparam "^3.0.0"
+
+lodash._createcompounder@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lodash._createcompounder/-/lodash._createcompounder-3.0.0.tgz#5dd2cb55372d6e70e0e2392fb2304d6631091075"
+  dependencies:
+    lodash.deburr "^3.0.0"
+    lodash.words "^3.0.0"
+
+lodash._getnative@^3.0.0:
+  version "3.9.1"
+  resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
+
+lodash._isiterateecall@^3.0.0:
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz#5203ad7ba425fae842460e696db9cf3e6aac057c"
+
+lodash._root@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/lodash._root/-/lodash._root-3.0.1.tgz#fba1c4524c19ee9a5f8136b4609f017cf4ded692"
+
+lodash.assign@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-3.2.0.tgz#3ce9f0234b4b2223e296b8fa0ac1fee8ebca64fa"
+  dependencies:
+    lodash._baseassign "^3.0.0"
+    lodash._createassigner "^3.0.0"
+    lodash.keys "^3.0.0"
+
+lodash.assign@^4.0.0, lodash.assign@^4.0.3, lodash.assign@^4.0.6, lodash.assign@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
+
+lodash.camelcase@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-3.0.1.tgz#932c8b87f8a4377897c67197533282f97aeac298"
+  dependencies:
+    lodash._createcompounder "^3.0.0"
+
+lodash.clonedeep@^4.3.2:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
+
+lodash.deburr@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.deburr/-/lodash.deburr-3.2.0.tgz#6da8f54334a366a7cf4c4c76ef8d80aa1b365ed5"
+  dependencies:
+    lodash._root "^3.0.0"
+
+lodash.indexof@^4.0.5:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/lodash.indexof/-/lodash.indexof-4.0.5.tgz#53714adc2cddd6ed87638f893aa9b6c24e31ef3c"
+
+lodash.isarguments@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
+
+lodash.isarray@^3.0.0:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
+
+lodash.keys@^3.0.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a"
+  dependencies:
+    lodash._getnative "^3.0.0"
+    lodash.isarguments "^3.0.0"
+    lodash.isarray "^3.0.0"
+
+lodash.pickby@^4.0.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.pickby/-/lodash.pickby-4.6.0.tgz#7dea21d8c18d7703a27c704c15d3b84a67e33aff"
+
+lodash.restparam@^3.0.0:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
+
+lodash.words@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.words/-/lodash.words-3.2.0.tgz#4e2a8649bc08745b17c695b1a3ce8fee596623b3"
+  dependencies:
+    lodash._root "^3.0.0"
+
+lodash@^4.0.0, lodash@^4.14.0, lodash@^4.16.4, lodash@^4.2.0, lodash@^4.6.1, lodash@~4.16.4:
+  version "4.16.6"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.16.6.tgz#d22c9ac660288f3843e16ba7d2b5d06cca27d777"
+
+lodash@~2.4.1:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-2.4.2.tgz#fadd834b9683073da179b3eae6d9c0d15053f73e"
+
+longest@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
+
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.0.tgz#6b26248c42f6d4fa4b0d8542f78edfcde35642a8"
+  dependencies:
+    js-tokens "^2.0.0"
+
+loud-rejection@^1.0.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"
+  dependencies:
+    currently-unhandled "^0.4.1"
+    signal-exit "^3.0.0"
+
+lower-case-first@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/lower-case-first/-/lower-case-first-1.0.2.tgz#e5da7c26f29a7073be02d52bac9980e5922adfa1"
+  dependencies:
+    lower-case "^1.1.2"
+
+lower-case@^1.1.0, lower-case@^1.1.1, lower-case@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.3.tgz#c92393d976793eee5ba4edb583cf8eae35bd9bfb"
+
+lru-cache@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.0.1.tgz#1343955edaf2e37d9b9e7ee7241e27c4b9fb72be"
+  dependencies:
+    pseudomap "^1.0.1"
+    yallist "^2.0.0"
+
+macaddress@^0.2.8:
+  version "0.2.8"
+  resolved "https://registry.yarnpkg.com/macaddress/-/macaddress-0.2.8.tgz#5904dc537c39ec6dbefeae902327135fa8511f12"
+
+map-obj@^1.0.0, map-obj@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
+
+markdown-loader@^0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/markdown-loader/-/markdown-loader-0.1.7.tgz#2ab6616fd17652a7cbfe66540781b55e4f19e267"
+  dependencies:
+    loader-utils "^0.2.7"
+    marked "^0.3.2"
+    object-assign "^2.0.0"
+
+marked@^0.3.2:
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.6.tgz#b2c6c618fccece4ef86c4fc6cb8a7cbf5aeda8d7"
+
+math-expression-evaluator@^1.2.14:
+  version "1.2.14"
+  resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.14.tgz#39511771ed9602405fba9affff17eb4d2a3843ab"
+  dependencies:
+    lodash.indexof "^4.0.5"
+
+media-typer@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
+
+memory-fs@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.2.0.tgz#f2bb25368bc121e391c2520de92969caee0a0290"
+
+memory-fs@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.3.0.tgz#7bcc6b629e3a43e871d7e29aca6ae8a7f15cbb20"
+  dependencies:
+    errno "^0.1.3"
+    readable-stream "^2.0.1"
+
+meow@^3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
+  dependencies:
+    camelcase-keys "^2.0.0"
+    decamelize "^1.1.2"
+    loud-rejection "^1.0.0"
+    map-obj "^1.0.1"
+    minimist "^1.1.3"
+    normalize-package-data "^2.3.4"
+    object-assign "^4.0.1"
+    read-pkg-up "^1.0.1"
+    redent "^1.0.0"
+    trim-newlines "^1.0.0"
+
+merge-descriptors@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
+
+methods@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
+
+micromatch@^2.1.5:
+  version "2.3.11"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
+  dependencies:
+    arr-diff "^2.0.0"
+    array-unique "^0.2.1"
+    braces "^1.8.2"
+    expand-brackets "^0.1.4"
+    extglob "^0.3.1"
+    filename-regex "^2.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.1"
+    kind-of "^3.0.2"
+    normalize-path "^2.0.1"
+    object.omit "^2.0.0"
+    parse-glob "^3.0.4"
+    regex-cache "^0.4.2"
+
+mime-db@~1.24.0:
+  version "1.24.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.24.0.tgz#e2d13f939f0016c6e4e9ad25a8652f126c467f0c"
+
+mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.7:
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.12.tgz#152ba256777020dd4663f54c2e7bc26381e71729"
+  dependencies:
+    mime-db "~1.24.0"
+
+mime@^1.2.11, mime@^1.3.4, mime@1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53"
+
+mimeparse@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/mimeparse/-/mimeparse-0.1.4.tgz#dafb02752370fd226093ae3152c271af01ac254a"
+
+min-document@^2.19.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
+  dependencies:
+    dom-walk "^0.1.0"
+
+minimatch@^3.0.0, minimatch@^3.0.2, minimatch@~3.0.2, "minimatch@2 || 3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.3.tgz#2a4e4090b96b2db06a9d7df01055a62a77c9b774"
+  dependencies:
+    brace-expansion "^1.0.0"
+
+minimist@^1.1.3, minimist@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
+
+minimist@~0.0.1:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
+
+minimist@0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
+
+mkdirp@^0.5.0, mkdirp@^0.5.1, "mkdirp@>=0.5 0", mkdirp@~0.5.0, mkdirp@~0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
+  dependencies:
+    minimist "0.0.8"
+
+ms@0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"
+
+nan@^2.3.0, nan@^2.3.2:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.4.0.tgz#fb3c59d45fe4effe215f0b890f8adf6eb32d2232"
+
+ncname@1.0.x:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/ncname/-/ncname-1.0.0.tgz#5b57ad18b1ca092864ef62b0b1ed8194f383b71c"
+  dependencies:
+    xml-char-classes "^1.0.0"
+
+negotiator@0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
+
+no-case@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.0.tgz#ca2825ccb76b18e6f79d573dcfbf1eace33dd164"
+  dependencies:
+    lower-case "^1.1.1"
+
+node-dir@^0.1.6:
+  version "0.1.16"
+  resolved "https://registry.yarnpkg.com/node-dir/-/node-dir-0.1.16.tgz#d2ef583aa50b90d93db8cdd26fcea58353957fe4"
+  dependencies:
+    minimatch "^3.0.2"
+
+node-fetch@^1.0.1:
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.6.3.tgz#dc234edd6489982d58e8f0db4f695029abcd8c04"
+  dependencies:
+    encoding "^0.1.11"
+    is-stream "^1.0.1"
+
+node-gyp@^3.3.1:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.4.0.tgz#dda558393b3ecbbe24c9e6b8703c71194c63fa36"
+  dependencies:
+    fstream "^1.0.0"
+    glob "^7.0.3"
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    mkdirp "^0.5.0"
+    nopt "2 || 3"
+    npmlog "0 || 1 || 2 || 3"
+    osenv "0"
+    path-array "^1.0.0"
+    request "2"
+    rimraf "2"
+    semver "2.x || 3.x || 4 || 5"
+    tar "^2.0.0"
+    which "1"
+
+node-libs-browser@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-0.6.0.tgz#244806d44d319e048bc8607b5cc4eaf9a29d2e3c"
+  dependencies:
+    assert "^1.1.1"
+    browserify-zlib "~0.1.4"
+    buffer "^4.9.0"
+    console-browserify "^1.1.0"
+    constants-browserify "0.0.1"
+    crypto-browserify "~3.2.6"
+    domain-browser "^1.1.1"
+    events "^1.0.0"
+    http-browserify "^1.3.2"
+    https-browserify "0.0.0"
+    os-browserify "~0.1.2"
+    path-browserify "0.0.0"
+    process "^0.11.0"
+    punycode "^1.2.4"
+    querystring-es3 "~0.2.0"
+    readable-stream "^1.1.13"
+    stream-browserify "^1.0.0"
+    string_decoder "~0.10.25"
+    timers-browserify "^1.0.1"
+    tty-browserify "0.0.0"
+    url "~0.10.1"
+    util "~0.10.3"
+    vm-browserify "0.0.4"
+
+node-pre-gyp@^0.6.29:
+  version "0.6.31"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.31.tgz#d8a00ddaa301a940615dbcc8caad4024d58f6017"
+  dependencies:
+    mkdirp "~0.5.1"
+    nopt "~3.0.6"
+    npmlog "^4.0.0"
+    rc "~1.1.6"
+    request "^2.75.0"
+    rimraf "~2.5.4"
+    semver "~5.3.0"
+    tar "~2.2.1"
+    tar-pack "~3.3.0"
+
+node-sass@^3.7.0:
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-3.10.1.tgz#c535b2e1a5439240591e06d7308cb663820d616c"
+  dependencies:
+    async-foreach "^0.1.3"
+    chalk "^1.1.1"
+    cross-spawn "^3.0.0"
+    gaze "^1.0.0"
+    get-stdin "^4.0.1"
+    glob "^7.0.3"
+    in-publish "^2.0.0"
+    lodash.assign "^4.2.0"
+    lodash.clonedeep "^4.3.2"
+    meow "^3.7.0"
+    mkdirp "^0.5.1"
+    nan "^2.3.2"
+    node-gyp "^3.3.1"
+    npmlog "^4.0.0"
+    request "^2.61.0"
+    sass-graph "^2.1.1"
+
+node-uuid@~1.4.7:
+  version "1.4.7"
+  resolved "https://registry.yarnpkg.com/node-uuid/-/node-uuid-1.4.7.tgz#6da5a17668c4b3dd59623bda11cf7fa4c1f60a6f"
+
+nopt@~3.0.6, "nopt@2 || 3":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
+  dependencies:
+    abbrev "1"
+
+normalize-package-data@^2.3.2, normalize-package-data@^2.3.4:
+  version "2.3.5"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.3.5.tgz#8d924f142960e1777e7ffe170543631cc7cb02df"
+  dependencies:
+    hosted-git-info "^2.1.4"
+    is-builtin-module "^1.0.0"
+    semver "2 || 3 || 4 || 5"
+    validate-npm-package-license "^3.0.1"
+
+normalize-path@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.0.1.tgz#47886ac1662760d4261b7d979d241709d3ce3f7a"
+
+normalize-range@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
+
+normalize-url@^1.4.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.7.0.tgz#d82452d98d38821cffddab4d77a5f8d20ce66db0"
+  dependencies:
+    object-assign "^4.0.1"
+    prepend-http "^1.0.0"
+    query-string "^4.1.0"
+    sort-keys "^1.0.0"
+
+npmlog@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.0.0.tgz#e094503961c70c1774eb76692080e8d578a9f88f"
+  dependencies:
+    are-we-there-yet "~1.1.2"
+    console-control-strings "~1.1.0"
+    gauge "~2.6.0"
+    set-blocking "~2.0.0"
+
+"npmlog@0 || 1 || 2 || 3":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-3.1.2.tgz#2d46fa874337af9498a2f12bb43d8d0be4a36873"
+  dependencies:
+    are-we-there-yet "~1.1.2"
+    console-control-strings "~1.1.0"
+    gauge "~2.6.0"
+    set-blocking "~2.0.0"
+
+nth-check@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.1.tgz#9929acdf628fc2c41098deab82ac580cf149aae4"
+  dependencies:
+    boolbase "~1.0.0"
+
+num2fraction@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
+
+number-is-nan@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
+
+oauth-sign@~0.8.1:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
+
+object-assign@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-2.1.1.tgz#43c36e5d569ff8e4816c4efa8be02d26967c18aa"
+
+object-assign@^4.0.1, object-assign@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.0.tgz#7a3b3d0e98063d43f4c03f2e8ae6cd51a86883a0"
+
+object.omit@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
+  dependencies:
+    for-own "^0.1.4"
+    is-extendable "^0.1.1"
+
+on-finished@~2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
+  dependencies:
+    ee-first "1.1.1"
+
+once@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  dependencies:
+    wrappy "1"
+
+once@~1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.3.3.tgz#b2e261557ce4c314ec8304f3fa82663e4297ca20"
+  dependencies:
+    wrappy "1"
+
+optimist@~0.6.0:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
+  dependencies:
+    minimist "~0.0.1"
+    wordwrap "~0.0.2"
+
+os-browserify@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.1.2.tgz#49ca0293e0b19590a5f5de10c7f265a617d8fe54"
+
+os-homedir@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+
+os-locale@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-1.4.0.tgz#20f9f17ae29ed345e8bde583b13d2009803c14d9"
+  dependencies:
+    lcid "^1.0.0"
+
+os-tmpdir@^1.0.0, os-tmpdir@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
+
+osenv@0:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.3.tgz#83cf05c6d6458fc4d5ac6362ea325d92f2754217"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.0"
+
+pako@~0.2.0:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
+
+param-case@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/param-case/-/param-case-2.1.0.tgz#2619f90fd6c829ed0b958f1c84ed03a745a6d70a"
+  dependencies:
+    no-case "^2.2.0"
+
+parse-glob@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
+  dependencies:
+    glob-base "^0.3.0"
+    is-dotfile "^1.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.0"
+
+parse-json@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-2.2.0.tgz#f480f40434ef80741f8469099f8dea18f55a4dc9"
+  dependencies:
+    error-ex "^1.2.0"
+
+parseurl@~1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.1.tgz#c8ab8c9223ba34888aa64a297b28853bec18da56"
+
+pascal-case@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/pascal-case/-/pascal-case-2.0.0.tgz#39c248bde5a8dc02d5160696bdb01e044d016ee1"
+  dependencies:
+    camel-case "^3.0.0"
+    upper-case-first "^1.1.0"
+
+path-array@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-array/-/path-array-1.0.1.tgz#7e2f0f35f07a2015122b868b7eac0eb2c4fec271"
+  dependencies:
+    array-index "^1.0.0"
+
+path-browserify@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.0.tgz#a0b870729aae214005b7d5032ec2cbbb0fb4451a"
+
+path-case@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/path-case/-/path-case-2.1.0.tgz#5ac491de642936e5dfe0e18d16c461b8be8cf073"
+  dependencies:
+    no-case "^2.2.0"
+
+path-exists@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b"
+  dependencies:
+    pinkie-promise "^2.0.0"
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+
+path-to-regexp@0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
+
+path-type@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
+  dependencies:
+    graceful-fs "^4.1.2"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+pbkdf2-compat@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pbkdf2-compat/-/pbkdf2-compat-2.0.1.tgz#b6e0c8fa99494d94e0511575802a59a5c142f288"
+
+pify@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+
+pinkie-promise@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
+  dependencies:
+    pinkie "^2.0.0"
+
+pinkie@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
+
+pkg-dir@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-1.0.0.tgz#7a4b508a8d5bb2d629d447056ff4e9c9314cf3d4"
+  dependencies:
+    find-up "^1.0.0"
+
+postcss-calc@^5.2.0:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-5.3.1.tgz#77bae7ca928ad85716e2fda42f261bf7c1d65b5e"
+  dependencies:
+    postcss "^5.0.2"
+    postcss-message-helpers "^2.0.0"
+    reduce-css-calc "^1.2.6"
+
+postcss-colormin@^2.1.8:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-2.2.1.tgz#dc5421b6ae6f779ef6bfd47352b94abe59d0316b"
+  dependencies:
+    colormin "^1.0.5"
+    postcss "^5.0.13"
+    postcss-value-parser "^3.2.3"
+
+postcss-convert-values@^2.3.4:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-2.4.1.tgz#45dce4d4e33b7d967b97a4d937f270ea98d2fe7a"
+  dependencies:
+    postcss "^5.0.11"
+    postcss-value-parser "^3.1.2"
+
+postcss-discard-comments@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz#befe89fafd5b3dace5ccce51b76b81514be00e3d"
+  dependencies:
+    postcss "^5.0.14"
+
+postcss-discard-duplicates@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-2.0.1.tgz#5fae3f1a71df3e19cffb37309d1a7dba56c4589c"
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-discard-empty@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-2.1.0.tgz#d2b4bd9d5ced5ebd8dcade7640c7d7cd7f4f92b5"
+  dependencies:
+    postcss "^5.0.14"
+
+postcss-discard-overridden@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-0.1.1.tgz#8b1eaf554f686fb288cd874c55667b0aa3668d58"
+  dependencies:
+    postcss "^5.0.16"
+
+postcss-discard-unused@^2.2.1:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/postcss-discard-unused/-/postcss-discard-unused-2.2.2.tgz#5d72f7d05d11de0a9589e001958067ccae1b4931"
+  dependencies:
+    postcss "^5.0.14"
+    uniqs "^2.0.0"
+
+postcss-filter-plugins@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-filter-plugins/-/postcss-filter-plugins-2.0.2.tgz#6d85862534d735ac420e4a85806e1f5d4286d84c"
+  dependencies:
+    postcss "^5.0.4"
+    uniqid "^4.0.0"
+
+postcss-loader@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-0.9.1.tgz#87a3e70f58e46d68a75badc6725d9ea4773fd1d7"
+  dependencies:
+    loader-utils "^0.2.14"
+    postcss "^5.0.19"
+
+postcss-merge-idents@^2.1.5:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/postcss-merge-idents/-/postcss-merge-idents-2.1.7.tgz#4c5530313c08e1d5b3bbf3d2bbc747e278eea270"
+  dependencies:
+    has "^1.0.1"
+    postcss "^5.0.10"
+    postcss-value-parser "^3.1.1"
+
+postcss-merge-longhand@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-2.0.1.tgz#ff59b5dec6d586ce2cea183138f55c5876fa9cdc"
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-merge-rules@^2.0.3:
+  version "2.0.10"
+  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-2.0.10.tgz#54b360be804e7e69a5c7222635247b92a3569e9b"
+  dependencies:
+    postcss "^5.0.4"
+    vendors "^1.0.0"
+
+postcss-message-helpers@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-message-helpers/-/postcss-message-helpers-2.0.0.tgz#a4f2f4fab6e4fe002f0aed000478cdf52f9ba60e"
+
+postcss-minify-font-values@^1.0.2:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-1.0.5.tgz#4b58edb56641eba7c8474ab3526cafd7bbdecb69"
+  dependencies:
+    object-assign "^4.0.1"
+    postcss "^5.0.4"
+    postcss-value-parser "^3.0.2"
+
+postcss-minify-gradients@^1.0.1:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-1.0.5.tgz#5dbda11373703f83cfb4a3ea3881d8d75ff5e6e1"
+  dependencies:
+    postcss "^5.0.12"
+    postcss-value-parser "^3.3.0"
+
+postcss-minify-params@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-1.0.5.tgz#82d602643b8616a61fb3634d7ede0289836d67f9"
+  dependencies:
+    alphanum-sort "^1.0.1"
+    postcss "^5.0.2"
+    postcss-value-parser "^3.0.2"
+    uniqs "^2.0.0"
+
+postcss-minify-selectors@^2.0.4:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-2.0.5.tgz#4e1f966fb49c95266804016ba9a3c6645bb601e0"
+  dependencies:
+    alphanum-sort "^1.0.2"
+    postcss "^5.0.14"
+    postcss-selector-parser "^2.0.0"
+
+postcss-modules-extract-imports@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.0.1.tgz#8fb3fef9a6dd0420d3f6d4353cf1ff73f2b2a341"
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-modules-local-by-default@^1.0.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.1.1.tgz#29a10673fa37d19251265ca2ba3150d9040eb4ce"
+  dependencies:
+    css-selector-tokenizer "^0.6.0"
+    postcss "^5.0.4"
+
+postcss-modules-scope@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-1.0.2.tgz#ff977395e5e06202d7362290b88b1e8cd049de29"
+  dependencies:
+    css-selector-tokenizer "^0.6.0"
+    postcss "^5.0.4"
+
+postcss-modules-values@^1.1.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-1.2.2.tgz#f0e7d476fe1ed88c5e4c7f97533a3e772ad94ca1"
+  dependencies:
+    icss-replace-symbols "^1.0.2"
+    postcss "^5.0.14"
+
+postcss-normalize-charset@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-1.1.0.tgz#2fbd30e12248c442981d31ea2484d46fd0628970"
+  dependencies:
+    postcss "^5.0.5"
+
+postcss-normalize-url@^3.0.7:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-3.0.7.tgz#6bd90d0a4bc5a1df22c26ea65c53257dc3829f4e"
+  dependencies:
+    is-absolute-url "^2.0.0"
+    normalize-url "^1.4.0"
+    postcss "^5.0.14"
+    postcss-value-parser "^3.2.3"
+
+postcss-ordered-values@^2.1.0:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-2.2.2.tgz#be8b511741fab2dac8e614a2302e9d10267b0771"
+  dependencies:
+    postcss "^5.0.4"
+    postcss-value-parser "^3.0.1"
+
+postcss-reduce-idents@^2.2.2:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-idents/-/postcss-reduce-idents-2.3.1.tgz#024e8e219f52773313408573db9645ba62d2d2fe"
+  dependencies:
+    postcss "^5.0.4"
+    postcss-value-parser "^3.0.2"
+
+postcss-reduce-initial@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-1.0.0.tgz#8f739b938289ef2e48936d7101783e4741ca9bbb"
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-reduce-transforms@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-1.0.4.tgz#ff76f4d8212437b31c298a42d2e1444025771ae1"
+  dependencies:
+    has "^1.0.1"
+    postcss "^5.0.8"
+    postcss-value-parser "^3.0.1"
+
+postcss-selector-parser@^2.0.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.1.tgz#fdbf696103b12b0a64060e5610507f410491f7c8"
+  dependencies:
+    flatten "^1.0.2"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
+postcss-svgo@^2.1.1:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-2.1.5.tgz#46fc0363f01bab6a36a9abb01c229fcc45363094"
+  dependencies:
+    is-svg "^2.0.0"
+    postcss "^5.0.14"
+    postcss-value-parser "^3.2.3"
+    svgo "^0.7.0"
+
+postcss-unique-selectors@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-2.0.2.tgz#981d57d29ddcb33e7b1dfe1fd43b8649f933ca1d"
+  dependencies:
+    alphanum-sort "^1.0.1"
+    postcss "^5.0.4"
+    uniqs "^2.0.0"
+
+postcss-value-parser@^3.0.1, postcss-value-parser@^3.0.2, postcss-value-parser@^3.1.1, postcss-value-parser@^3.1.2, postcss-value-parser@^3.2.3, postcss-value-parser@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15"
+
+postcss-zindex@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-zindex/-/postcss-zindex-2.1.1.tgz#ea3fbe656c9738aa8729e2ee96ec2a46089b720f"
+  dependencies:
+    postcss "^5.0.4"
+    uniqs "^2.0.0"
+
+postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.19, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.4:
+  version "5.2.5"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.5.tgz#ec428c27dffc7fac65961340a9b022fa4af5f056"
+  dependencies:
+    chalk "^1.1.3"
+    js-base64 "^2.1.9"
+    source-map "^0.5.6"
+    supports-color "^3.1.2"
+
+prepend-http@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
+
+preserve@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
+
+pretty-error@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.0.2.tgz#a7db19cbb529ca9f0af3d3a2f77d5caf8e5dec23"
+  dependencies:
+    renderkid "~2.0.0"
+    utila "~0.4"
+
+private@^0.1.6, private@~0.1.5:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/private/-/private-0.1.6.tgz#55c6a976d0f9bafb9924851350fe47b9b5fbb7c1"
+
+process-nextick-args@~1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
+
+process@^0.11.0, process@~0.11.0:
+  version "0.11.9"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.9.tgz#7bd5ad21aa6253e7da8682264f1e11d11c0318c1"
+
+process@~0.5.1:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.5.2.tgz#1638d8a8e34c2f440a91db95ab9aeb677fc185cf"
+
+promise@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-7.1.1.tgz#489654c692616b8aa55b0724fa809bb7db49c5bf"
+  dependencies:
+    asap "~2.0.3"
+
+proxy-addr@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.2.tgz#b4cc5f22610d9535824c123aef9d3cf73c40ba37"
+  dependencies:
+    forwarded "~0.1.0"
+    ipaddr.js "1.1.1"
+
+prr@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/prr/-/prr-0.0.0.tgz#1a84b85908325501411853d0081ee3fa86e2926a"
+
+pseudomap@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
+
+punycode@^1.2.4, punycode@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+
+punycode@1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
+
+q-io@1.13.2:
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/q-io/-/q-io-1.13.2.tgz#eea130d481ddb5e1aa1bc5a66855f7391d06f003"
+  dependencies:
+    collections "^0.2.0"
+    mime "^1.2.11"
+    mimeparse "^0.1.4"
+    q "^1.0.1"
+    qs "^1.2.1"
+    url2 "^0.0.0"
+
+q@^1.0.1, q@^1.1.2, q@1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.4.1.tgz#55705bcd93c5f3673530c2c2cbc0c2b3addc286e"
+
+qs@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-1.2.2.tgz#19b57ff24dc2a99ce1f8bdf6afcda59f8ef61f88"
+
+qs@~6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.3.0.tgz#f403b264f23bc01228c74131b407f18d5ea5d442"
+
+qs@6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.2.0.tgz#3b7848c03c2dece69a9522b0fae8c4126d745f3b"
+
+query-string@^3.0.0:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-3.0.3.tgz#ae2e14b4d05071d4e9b9eb4873c35b0dcd42e638"
+  dependencies:
+    strict-uri-encode "^1.0.0"
+
+query-string@^4.1.0:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.2.3.tgz#9f27273d207a25a8ee4c7b8c74dcd45d556db822"
+  dependencies:
+    object-assign "^4.1.0"
+    strict-uri-encode "^1.0.0"
+
+querystring-es3@~0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
+
+querystring@^0.2.0, querystring@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
+
+randomatic@^1.1.3:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.5.tgz#5e9ef5f2d573c67bd2b8124ae90b5156e457840b"
+  dependencies:
+    is-number "^2.0.2"
+    kind-of "^3.0.2"
+
+range-parser@^1.0.3, range-parser@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e"
+
+raw-loader@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-0.5.1.tgz#0c3d0beaed8a01c966d9787bf778281252a979aa"
+
+rc@~1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.1.6.tgz#43651b76b6ae53b5c802f1151fa3fc3b059969c9"
+  dependencies:
+    deep-extend "~0.4.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~1.0.4"
+
+react-css-themr@^1.2.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/react-css-themr/-/react-css-themr-1.4.1.tgz#26fa63fe0a8f7343b019f088f88475ca89da2d5a"
+  dependencies:
+    invariant "^2.2.1"
+
+react-deep-force-update@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-1.0.1.tgz#f911b5be1d2a6fe387507dd6e9a767aa2924b4c7"
+
+react-dom@^15.2.0:
+  version "15.3.2"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.3.2.tgz#c46b0aa5380d7b838e7a59c4a7beff2ed315531f"
+
+react-proxy@^1.1.7:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/react-proxy/-/react-proxy-1.1.8.tgz#9dbfd9d927528c3aa9f444e4558c37830ab8c26a"
+  dependencies:
+    lodash "^4.6.1"
+    react-deep-force-update "^1.0.0"
+
+react-router@^2.4.0:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-2.8.1.tgz#73e9491f6ceb316d0f779829081863e378ee4ed7"
+  dependencies:
+    history "^2.1.2"
+    hoist-non-react-statics "^1.2.0"
+    invariant "^2.2.1"
+    loose-envify "^1.2.0"
+    warning "^3.0.0"
+
+react-transform-catch-errors@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/react-transform-catch-errors/-/react-transform-catch-errors-1.0.2.tgz#1b4d4a76e97271896fc16fe3086c793ec88a9eeb"
+
+react-transform-hmr@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/react-transform-hmr/-/react-transform-hmr-1.0.4.tgz#e1a40bd0aaefc72e8dfd7a7cda09af85066397bb"
+  dependencies:
+    global "^4.3.0"
+    react-proxy "^1.1.7"
+
+react@^15.2.0:
+  version "15.3.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-15.3.2.tgz#a7bccd2fee8af126b0317e222c28d1d54528d09e"
+  dependencies:
+    fbjs "^0.8.4"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.0"
+
+read-pkg-up@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
+  dependencies:
+    find-up "^1.0.0"
+    read-pkg "^1.0.0"
+
+read-pkg@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28"
+  dependencies:
+    load-json-file "^1.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^1.0.0"
+
+readable-stream@^1.0.27-1, readable-stream@^1.1.13:
+  version "1.1.14"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
+"readable-stream@^2.0.0 || ^1.1.13", readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@~2.1.4:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.1.5.tgz#66fa8b720e1438b364681f2ad1a63c618448c9d0"
+  dependencies:
+    buffer-shims "^1.0.0"
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    string_decoder "~0.10.x"
+    util-deprecate "~1.0.1"
+
+readable-stream@1.0:
+  version "1.0.34"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
+readable-stream@1.1:
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.13.tgz#f6eef764f514c89e2b9e23146a75ba106756d23e"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
+readdirp@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.1.0.tgz#4ed0ad060df3073300c48440373f72d1cc642d78"
+  dependencies:
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    readable-stream "^2.0.2"
+    set-immediate-shim "^1.0.1"
+
+recast@~0.11.12:
+  version "0.11.15"
+  resolved "https://registry.yarnpkg.com/recast/-/recast-0.11.15.tgz#3d03ee4f74b2ef4aa2f6ea2059d92db843d1316c"
+  dependencies:
+    ast-types "0.9.0"
+    esprima "~3.1.0"
+    private "~0.1.5"
+    source-map "~0.5.0"
+
+redbox-react@^1.2.4:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/redbox-react/-/redbox-react-1.3.2.tgz#bc12ca4f88705d29aaace7a12183d3ec14dd33f1"
+  dependencies:
+    error-stack-parser "^1.3.6"
+    object-assign "^4.0.1"
+
+redent@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"
+  dependencies:
+    indent-string "^2.1.0"
+    strip-indent "^1.0.1"
+
+reduce-css-calc@^1.2.6:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz#747c914e049614a4c9cfbba629871ad1d2927716"
+  dependencies:
+    balanced-match "^0.4.2"
+    math-expression-evaluator "^1.2.14"
+    reduce-function-call "^1.0.1"
+
+reduce-function-call@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/reduce-function-call/-/reduce-function-call-1.0.1.tgz#fa02e126e695824263cab91d3a5b0fdc1dd27a9a"
+  dependencies:
+    balanced-match "~0.1.0"
+
+regenerate@^1.2.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.1.tgz#0300203a5d2fdcf89116dce84275d011f5903f33"
+
+regenerator-runtime@^0.9.5:
+  version "0.9.5"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.9.5.tgz#403d6d40a4bdff9c330dd9392dcbb2d9a8bba1fc"
+
+regex-cache@^0.4.2:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.3.tgz#9b1a6c35d4d0dfcef5711ae651e8e9d3d7114145"
+  dependencies:
+    is-equal-shallow "^0.1.3"
+    is-primitive "^2.0.0"
+
+regexpu-core@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-1.0.0.tgz#86a763f58ee4d7c2f6b102e4764050de7ed90c6b"
+  dependencies:
+    regenerate "^1.2.1"
+    regjsgen "^0.2.0"
+    regjsparser "^0.1.4"
+
+regexpu-core@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-2.0.0.tgz#49d038837b8dcf8bfa5b9a42139938e6ea2ae240"
+  dependencies:
+    regenerate "^1.2.1"
+    regjsgen "^0.2.0"
+    regjsparser "^0.1.4"
+
+regjsgen@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.2.0.tgz#6c016adeac554f75823fe37ac05b92d5a4edb1f7"
+
+regjsparser@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.1.5.tgz#7ee8f84dc6fa792d3fd0ae228d24bd949ead205c"
+  dependencies:
+    jsesc "~0.5.0"
+
+relateurl@0.2.x:
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
+
+renderkid@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-2.0.0.tgz#1859753e7a5adbf35443aba0d4e4579e78abee85"
+  dependencies:
+    css-select "^1.1.0"
+    dom-converter "~0.1"
+    htmlparser2 "~3.3.0"
+    strip-ansi "^3.0.0"
+    utila "~0.3"
+
+repeat-element@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a"
+
+repeat-string@^1.5.2:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+
+repeating@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/repeating/-/repeating-2.0.1.tgz#5214c53a926d3552707527fbab415dbc08d06dda"
+  dependencies:
+    is-finite "^1.0.0"
+
+request@^2.61.0, request@^2.75.0, request@2:
+  version "2.76.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.76.0.tgz#be44505afef70360a0436955106be3945d95560e"
+  dependencies:
+    aws-sign2 "~0.6.0"
+    aws4 "^1.2.1"
+    caseless "~0.11.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~2.1.1"
+    har-validator "~2.0.6"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    node-uuid "~1.4.7"
+    oauth-sign "~0.8.1"
+    qs "~6.3.0"
+    stringstream "~0.0.4"
+    tough-cookie "~2.3.0"
+    tunnel-agent "~0.4.1"
+
+require-directory@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
+
+require-main-filename@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
+
+right-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
+  dependencies:
+    align-text "^0.1.1"
+
+rimraf@~2.5.1, rimraf@~2.5.4, rimraf@2:
+  version "2.5.4"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.5.4.tgz#96800093cbf1a0c86bd95b4625467535c29dfa04"
+  dependencies:
+    glob "^7.0.5"
+
+ripemd160@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-0.2.0.tgz#2bf198bde167cacfa51c0a928e84b68bbe171fce"
+
+sass-graph@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/sass-graph/-/sass-graph-2.1.2.tgz#965104be23e8103cb7e5f710df65935b317da57b"
+  dependencies:
+    glob "^7.0.0"
+    lodash "^4.0.0"
+    yargs "^4.7.1"
+
+sass-loader@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-4.0.2.tgz#a616eb770366543e64f547c8630f39c4da75f15d"
+  dependencies:
+    async "^2.0.1"
+    loader-utils "^0.2.15"
+    object-assign "^4.1.0"
+
+sax@~1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.1.tgz#7b8e656190b228e81a66aea748480d828cd2d37a"
+
+semver@~5.3.0, "semver@2 || 3 || 4 || 5", "semver@2.x || 3.x || 4 || 5":
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
+
+send@0.14.1:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.14.1.tgz#a954984325392f51532a7760760e459598c89f7a"
+  dependencies:
+    debug "~2.2.0"
+    depd "~1.1.0"
+    destroy "~1.0.4"
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    etag "~1.7.0"
+    fresh "0.3.0"
+    http-errors "~1.5.0"
+    mime "1.3.4"
+    ms "0.7.1"
+    on-finished "~2.3.0"
+    range-parser "~1.2.0"
+    statuses "~1.3.0"
+
+sentence-case@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/sentence-case/-/sentence-case-2.1.0.tgz#d592fbed457fd1a59e3af0ee17e99f6fd70d7efd"
+  dependencies:
+    no-case "^2.2.0"
+    upper-case-first "^1.1.2"
+
+serve-static@~1.11.1:
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.11.1.tgz#d6cce7693505f733c759de57befc1af76c0f0805"
+  dependencies:
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    parseurl "~1.3.1"
+    send "0.14.1"
+
+set-blocking@^2.0.0, set-blocking@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+
+set-immediate-shim@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
+
+setprototypeof@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.0.1.tgz#52009b27888c4dc48f591949c0a8275834c1ca7e"
+
+sha.js@2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.2.6.tgz#17ddeddc5f722fb66501658895461977867315ba"
+
+signal-exit@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.1.tgz#5a4c884992b63a7acd9badb7894c3ee9cfccad81"
+
+slash@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
+
+snake-case@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-2.1.0.tgz#41bdb1b73f30ec66a04d4e2cad1b76387d4d6d9f"
+  dependencies:
+    no-case "^2.2.0"
+
+sntp@1.x.x:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"
+  dependencies:
+    hoek "2.x.x"
+
+sort-keys@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad"
+  dependencies:
+    is-plain-obj "^1.0.0"
+
+source-list-map@^0.1.4, source-list-map@~0.1.0:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.6.tgz#e1e6f94f0b40c4d28dcf8f5b8766e0e45636877f"
+
+source-map-support@^0.4.2:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.6.tgz#32552aa64b458392a85eab3b0b5ee61527167aeb"
+  dependencies:
+    source-map "^0.5.3"
+
+source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.0, source-map@~0.5.1, source-map@~0.5.3:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
+
+source-map@~0.4.1, source-map@0.4.x:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
+  dependencies:
+    amdefine ">=0.0.4"
+
+spdx-correct@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-1.0.2.tgz#4b3073d933ff51f3912f03ac5519498a4150db40"
+  dependencies:
+    spdx-license-ids "^1.0.2"
+
+spdx-expression-parse@~1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-1.0.4.tgz#9bdf2f20e1f40ed447fbe273266191fced51626c"
+
+spdx-license-ids@^1.0.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-1.2.2.tgz#c9df7a3424594ade6bd11900d596696dc06bac57"
+
+sprintf-js@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+
+sshpk@^1.7.0:
+  version "1.10.1"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.10.1.tgz#30e1a5d329244974a1af61511339d595af6638b0"
+  dependencies:
+    asn1 "~0.2.3"
+    assert-plus "^1.0.0"
+    dashdash "^1.12.0"
+    getpass "^0.1.1"
+  optionalDependencies:
+    bcrypt-pbkdf "^1.0.0"
+    ecc-jsbn "~0.1.1"
+    jodid25519 "^1.0.0"
+    jsbn "~0.1.0"
+    tweetnacl "~0.14.0"
+
+stackframe@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-0.3.1.tgz#33aa84f1177a5548c8935533cbfeb3420975f5a4"
+
+"statuses@>= 1.3.0 < 2", statuses@~1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.0.tgz#8e55758cb20e7682c1f4fce8dcab30bf01d1e07a"
+
+stream-browserify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-1.0.0.tgz#bf9b4abfb42b274d751479e44e0ff2656b6f1193"
+  dependencies:
+    inherits "~2.0.1"
+    readable-stream "^1.0.27-1"
+
+strict-uri-encode@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
+
+string_decoder@~0.10.25, string_decoder@~0.10.x:
+  version "0.10.31"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
+
+string-width@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
+  dependencies:
+    code-point-at "^1.0.0"
+    is-fullwidth-code-point "^1.0.0"
+    strip-ansi "^3.0.0"
+
+stringstream@~0.0.4:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878"
+
+strip-ansi@^3.0.0, strip-ansi@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
+  dependencies:
+    ansi-regex "^2.0.0"
+
+strip-bom@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
+  dependencies:
+    is-utf8 "^0.2.0"
+
+strip-indent@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-1.0.1.tgz#0c7962a6adefa7bbd4ac366460a638552ae1a0a2"
+  dependencies:
+    get-stdin "^4.0.1"
+
+strip-json-comments@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-1.0.4.tgz#1e15fbcac97d3ee99bf2d73b4c656b082bbafb91"
+
+style-loader@^0.13.1:
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.13.1.tgz#468280efbc0473023cd3a6cd56e33b5a1d7fc3a9"
+  dependencies:
+    loader-utils "^0.2.7"
+
+supports-color@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
+
+supports-color@^3.1.0, supports-color@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.1.2.tgz#72a262894d9d408b956ca05ff37b2ed8a6e2a2d5"
+  dependencies:
+    has-flag "^1.0.0"
+
+svgo@^0.7.0:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.1.tgz#287320fed972cb097e72c2bb1685f96fe08f8034"
+  dependencies:
+    coa "~1.0.1"
+    colors "~1.1.2"
+    csso "~2.2.1"
+    js-yaml "~3.6.1"
+    mkdirp "~0.5.1"
+    sax "~1.2.1"
+    whet.extend "~0.9.9"
+
+swap-case@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/swap-case/-/swap-case-1.1.2.tgz#c39203a4587385fad3c850a0bd1bcafa081974e3"
+  dependencies:
+    lower-case "^1.1.1"
+    upper-case "^1.1.1"
+
+tapable@^0.1.8, tapable@~0.1.8:
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.1.10.tgz#29c35707c2b70e50d07482b5d202e8ed446dafd4"
+
+tar-pack@~3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.3.0.tgz#30931816418f55afc4d21775afdd6720cee45dae"
+  dependencies:
+    debug "~2.2.0"
+    fstream "~1.0.10"
+    fstream-ignore "~1.0.5"
+    once "~1.3.3"
+    readable-stream "~2.1.4"
+    rimraf "~2.5.1"
+    tar "~2.2.1"
+    uid-number "~0.0.6"
+
+tar@^2.0.0, tar@~2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.1.tgz#8e4d2a256c0e2185c6b18ad694aec968b83cb1d1"
+  dependencies:
+    block-stream "*"
+    fstream "^1.0.2"
+    inherits "2"
+
+through@~2.3.6:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+
+timers-browserify@^1.0.1:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-1.4.2.tgz#c9c58b575be8407375cb5e2462dacee74359f41d"
+  dependencies:
+    process "~0.11.0"
+
+title-case@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/title-case/-/title-case-2.1.0.tgz#c68ccb4232079ded64f94b91b4941ade91391979"
+  dependencies:
+    no-case "^2.2.0"
+    upper-case "^1.0.3"
+
+to-fast-properties@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.2.tgz#f3f5c0c3ba7299a7ef99427e44633257ade43320"
+
+toposort@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.0.tgz#b66cf385a1a8a8e68e45b8259e7f55875e8b06ef"
+
+tough-cookie@~2.3.0:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.2.tgz#f081f76e4c85720e6c37a5faced737150d84072a"
+  dependencies:
+    punycode "^1.4.1"
+
+transfer-webpack-plugin@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/transfer-webpack-plugin/-/transfer-webpack-plugin-0.1.4.tgz#6b5adedc58cbaa89ddcb9eb4e90e36f67655ed76"
+  dependencies:
+    node-dir "^0.1.6"
+    vow "^0.4.9"
+
+trim-newlines@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
+
+tty-browserify@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
+
+tunnel-agent@~0.4.1:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.4.3.tgz#6373db76909fe570e08d73583365ed828a74eeeb"
+
+tweetnacl@^0.14.3, tweetnacl@~0.14.0:
+  version "0.14.3"
+  resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.3.tgz#3da382f670f25ded78d7b3d1792119bca0b7132d"
+
+type-is@~1.6.13:
+  version "1.6.13"
+  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.13.tgz#6e83ba7bc30cd33a7bb0b7fb00737a2085bf9d08"
+  dependencies:
+    media-typer "0.3.0"
+    mime-types "~2.1.11"
+
+ua-parser-js@^0.7.9:
+  version "0.7.10"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.10.tgz#917559ddcce07cbc09ece7d80495e4c268f4ef9f"
+
+uglify-js@~2.7.3, uglify-js@2.7.x:
+  version "2.7.4"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.7.4.tgz#a295a0de12b6a650c031c40deb0dc40b14568bd2"
+  dependencies:
+    async "~0.2.6"
+    source-map "~0.5.1"
+    uglify-to-browserify "~1.0.0"
+    yargs "~3.10.0"
+
+uglify-to-browserify@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
+
+uid-number@~0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
+
+uniq@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
+
+uniqid@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/uniqid/-/uniqid-4.1.0.tgz#33d9679f65022f48988a03fd24e7dcaf8f109eca"
+  dependencies:
+    macaddress "^0.2.8"
+
+uniqs@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
+
+unpipe@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+
+upper-case-first@^1.1.0, upper-case-first@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/upper-case-first/-/upper-case-first-1.1.2.tgz#5d79bedcff14419518fd2edb0a0507c9b6859115"
+  dependencies:
+    upper-case "^1.1.1"
+
+upper-case@^1.0.3, upper-case@^1.1.0, upper-case@^1.1.1, upper-case@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
+
+url@~0.10.1:
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/url/-/url-0.10.3.tgz#021e4d9c7705f21bbf37d03ceb58767402774c64"
+  dependencies:
+    punycode "1.3.2"
+    querystring "0.2.0"
+
+url2@^0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/url2/-/url2-0.0.0.tgz#4eaabd1d5c3ac90d62ab4485c998422865a04b1a"
+
+util-deprecate@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+
+util@~0.10.3, util@0.10.3:
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
+  dependencies:
+    inherits "2.0.1"
+
+utila@~0.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/utila/-/utila-0.3.3.tgz#d7e8e7d7e309107092b05f8d9688824d633a4226"
+
+utila@~0.4:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
+
+utils-merge@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.0.tgz#0294fb922bb9375153541c4f7096231f287c8af8"
+
+validate-npm-package-license@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz#2804babe712ad3379459acfbe24746ab2c303fbc"
+  dependencies:
+    spdx-correct "~1.0.0"
+    spdx-expression-parse "~1.0.0"
+
+vary@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.0.tgz#e1e5affbbd16ae768dd2674394b9ad3022653140"
+
+vendors@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.1.tgz#37ad73c8ee417fb3d580e785312307d274847f22"
+
+verror@1.3.6:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/verror/-/verror-1.3.6.tgz#cff5df12946d297d2baaefaa2689e25be01c005c"
+  dependencies:
+    extsprintf "1.0.2"
+
+vm-browserify@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
+  dependencies:
+    indexof "0.0.1"
+
+vow@^0.4.9:
+  version "0.4.13"
+  resolved "https://registry.yarnpkg.com/vow/-/vow-0.4.13.tgz#e7c14f1bd9c8be0e7359a4597fe2d1ef6d1a7e88"
+
+warning@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-2.1.0.tgz#21220d9c63afc77a8c92111e011af705ce0c6901"
+  dependencies:
+    loose-envify "^1.0.0"
+
+warning@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
+  dependencies:
+    loose-envify "^1.0.0"
+
+watchpack@^0.2.1:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-0.2.9.tgz#62eaa4ab5e5ba35fdfc018275626e3c0f5e3fb0b"
+  dependencies:
+    async "^0.9.0"
+    chokidar "^1.0.0"
+    graceful-fs "^4.1.2"
+
+weak-map@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/weak-map/-/weak-map-1.0.0.tgz#b66e56a9df0bd25a76bbf1b514db129080614a37"
+
+webpack-core@~0.6.0:
+  version "0.6.8"
+  resolved "https://registry.yarnpkg.com/webpack-core/-/webpack-core-0.6.8.tgz#edf9135de00a6a3c26dd0f14b208af0aa4af8d0a"
+  dependencies:
+    source-list-map "~0.1.0"
+    source-map "~0.4.1"
+
+webpack-dev-middleware@^1.6.1:
+  version "1.8.4"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.8.4.tgz#e8765c9122887ce9e3abd4cc9c3eb31b61e0948d"
+  dependencies:
+    memory-fs "~0.3.0"
+    mime "^1.3.4"
+    path-is-absolute "^1.0.0"
+    range-parser "^1.0.3"
+
+webpack-hot-middleware@^2.10.0:
+  version "2.13.1"
+  resolved "https://registry.yarnpkg.com/webpack-hot-middleware/-/webpack-hot-middleware-2.13.1.tgz#104350e044be58ba3b7ef1c39513d69562841975"
+  dependencies:
+    ansi-html "0.0.6"
+    html-entities "^1.2.0"
+    querystring "^0.2.0"
+    strip-ansi "^3.0.0"
+
+webpack-sources@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-0.1.2.tgz#057a3f3255f8ba561b901d9150589aa103a57e65"
+  dependencies:
+    source-list-map "~0.1.0"
+    source-map "~0.5.3"
+
+webpack@^1.13.0:
+  version "1.13.3"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-1.13.3.tgz#e79c46fe5a37c5ca70084ba0894c595cdcb42815"
+  dependencies:
+    acorn "^3.0.0"
+    async "^1.3.0"
+    clone "^1.0.2"
+    enhanced-resolve "~0.9.0"
+    interpret "^0.6.4"
+    loader-utils "^0.2.11"
+    memory-fs "~0.3.0"
+    mkdirp "~0.5.0"
+    node-libs-browser "^0.6.0"
+    optimist "~0.6.0"
+    supports-color "^3.1.0"
+    tapable "~0.1.8"
+    uglify-js "~2.7.3"
+    watchpack "^0.2.1"
+    webpack-core "~0.6.0"
+
+whatwg-fetch@>=0.10.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-1.0.0.tgz#01c2ac4df40e236aaa18480e3be74bd5c8eb798e"
+
+whet.extend@~0.9.9:
+  version "0.9.9"
+  resolved "https://registry.yarnpkg.com/whet.extend/-/whet.extend-0.9.9.tgz#f877d5bf648c97e5aa542fadc16d6a259b9c11a1"
+
+which-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
+
+which@^1.2.9, which@1:
+  version "1.2.11"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.2.11.tgz#c8b2eeea6b8c1659fa7c1dd4fdaabe9533dc5e8b"
+  dependencies:
+    isexe "^1.1.1"
+
+wide-align@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.0.tgz#40edde802a71fea1f070da3e62dcda2e7add96ad"
+  dependencies:
+    string-width "^1.0.1"
+
+window-size@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.2.0.tgz#b4315bb4214a3d7058ebeee892e13fa24d98b075"
+
+window-size@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
+
+wordwrap@~0.0.2:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+
+wordwrap@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
+
+wrap-ansi@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.0.0.tgz#7d30f8f873f9a5bbc3a64dabc8d177e071ae426f"
+  dependencies:
+    string-width "^1.0.1"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+
+wrench@1.5.8:
+  version "1.5.8"
+  resolved "https://registry.yarnpkg.com/wrench/-/wrench-1.5.8.tgz#7a31c97f7869246d76c5cf2f5c977a1c4c8e5ab5"
+
+xml-char-classes@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/xml-char-classes/-/xml-char-classes-1.0.0.tgz#64657848a20ffc5df583a42ad8a277b4512bbc4d"
+
+xtend@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
+
+y18n@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
+
+yallist@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.0.0.tgz#306c543835f09ee1a4cb23b7bce9ab341c91cdd4"
+
+yargs-parser@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-2.4.1.tgz#85568de3cf150ff49fa51825f03a8c880ddcc5c4"
+  dependencies:
+    camelcase "^3.0.0"
+    lodash.assign "^4.0.6"
+
+yargs@^4.7.1:
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-4.8.1.tgz#c0c42924ca4aaa6b0e6da1739dfb216439f9ddc0"
+  dependencies:
+    cliui "^3.2.0"
+    decamelize "^1.1.1"
+    get-caller-file "^1.0.1"
+    lodash.assign "^4.0.3"
+    os-locale "^1.4.0"
+    read-pkg-up "^1.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^1.0.1"
+    which-module "^1.0.0"
+    window-size "^0.2.0"
+    y18n "^3.2.1"
+    yargs-parser "^2.4.1"
+
+yargs@~3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
+  dependencies:
+    camelcase "^1.0.2"
+    cliui "^2.1.0"
+    decamelize "^1.0.0"
+    window-size "0.1.0"
+
diff --git a/lib/_colors.scss b/lib/_colors.scss
deleted file mode 100644
index c2eb5099c..000000000
--- a/lib/_colors.scss
+++ /dev/null
@@ -1,301 +0,0 @@
-//-- Color definitions taken from Material Design Lite
-
-// Red
-$palette-red-50: rgb(255,235,238);
-$palette-red-100: rgb(255,205,210);
-$palette-red-200: rgb(239,154,154);
-$palette-red-300: rgb(229,115,115);
-$palette-red-400: rgb(239,83,80);
-$palette-red-500: rgb(244,67,54);
-$palette-red-600: rgb(229,57,53);
-$palette-red-700: rgb(211,47,47);
-$palette-red-800: rgb(198,40,40);
-$palette-red-900: rgb(183,28,28);
-$palette-red-a100: rgb(255,138,128);
-$palette-red-a200: rgb(255,82,82);
-$palette-red-a400: rgb(255,23,68);
-$palette-red-a700: rgb(213,0,0);
-
-// Pink
-$palette-pink-50: rgb(252,228,236);
-$palette-pink-100: rgb(248,187,208);
-$palette-pink-200: rgb(244,143,177);
-$palette-pink-300: rgb(240,98,146);
-$palette-pink-400: rgb(236,64,122);
-$palette-pink-500: rgb(233,30,99);
-$palette-pink-600: rgb(216,27,96);
-$palette-pink-700: rgb(194,24,91);
-$palette-pink-800: rgb(173,20,87);
-$palette-pink-900: rgb(136,14,79);
-$palette-pink-a100: rgb(255,128,171);
-$palette-pink-a200: rgb(255,64,129);
-$palette-pink-a400: rgb(245,0,87);
-$palette-pink-a700: rgb(197,17,98);
-
-// Purple
-$palette-purple-50: rgb(243,229,245);
-$palette-purple-100: rgb(225,190,231);
-$palette-purple-200: rgb(206,147,216);
-$palette-purple-300: rgb(186,104,200);
-$palette-purple-400: rgb(171,71,188);
-$palette-purple-500: rgb(156,39,176);
-$palette-purple-600: rgb(142,36,170);
-$palette-purple-700: rgb(123,31,162);
-$palette-purple-800: rgb(106,27,154);
-$palette-purple-900: rgb(74,20,140);
-$palette-purple-a100: rgb(234,128,252);
-$palette-purple-a200: rgb(224,64,251);
-$palette-purple-a400: rgb(213,0,249);
-$palette-purple-a700: rgb(170,0,255);
-
-//Deep Purple
-$palette-deep-purple-50: rgb(237,231,246);
-$palette-deep-purple-100: rgb(209,196,233);
-$palette-deep-purple-200: rgb(179,157,219);
-$palette-deep-purple-300: rgb(149,117,205);
-$palette-deep-purple-400: rgb(126,87,194);
-$palette-deep-purple-500: rgb(103,58,183);
-$palette-deep-purple-600: rgb(94,53,177);
-$palette-deep-purple-700: rgb(81,45,168);
-$palette-deep-purple-800: rgb(69,39,160);
-$palette-deep-purple-900: rgb(49,27,146);
-$palette-deep-purple-a100: rgb(179,136,255);
-$palette-deep-purple-a200: rgb(124,77,255);
-$palette-deep-purple-a400: rgb(101,31,255);
-$palette-deep-purple-a700: rgb(98,0,234);
-
-// Indigo
-$palette-indigo-50: rgb(232,234,246);
-$palette-indigo-100: rgb(197,202,233);
-$palette-indigo-200: rgb(159,168,218);
-$palette-indigo-300: rgb(121,134,203);
-$palette-indigo-400: rgb(92,107,192);
-$palette-indigo-500: rgb(63,81,181);
-$palette-indigo-600: rgb(57,73,171);
-$palette-indigo-700: rgb(48,63,159);
-$palette-indigo-800: rgb(40,53,147);
-$palette-indigo-900: rgb(26,35,126);
-$palette-indigo-a100: rgb(140,158,255);
-$palette-indigo-a200: rgb(83,109,254);
-$palette-indigo-a400: rgb(61,90,254);
-$palette-indigo-a700: rgb(48,79,254);
-
-// Blue
-$palette-blue-50: rgb(227,242,253);
-$palette-blue-100: rgb(187,222,251);
-$palette-blue-200: rgb(144,202,249);
-$palette-blue-300: rgb(100,181,246);
-$palette-blue-400: rgb(66,165,245);
-$palette-blue-500: rgb(33,150,243);
-$palette-blue-600: rgb(30,136,229);
-$palette-blue-700: rgb(25,118,210);
-$palette-blue-800: rgb(21,101,192);
-$palette-blue-900: rgb(13,71,161);
-$palette-blue-a100: rgb(130,177,255);
-$palette-blue-a200: rgb(68,138,255);
-$palette-blue-a400: rgb(41,121,255);
-$palette-blue-a700: rgb(41,98,255);
-
-// Light Blue
-$palette-light-blue-50: rgb(225,245,254);
-$palette-light-blue-100: rgb(179,229,252);
-$palette-light-blue-200: rgb(129,212,250);
-$palette-light-blue-300: rgb(79,195,247);
-$palette-light-blue-400: rgb(41,182,246);
-$palette-light-blue-500: rgb(3,169,244);
-$palette-light-blue-600: rgb(3,155,229);
-$palette-light-blue-700: rgb(2,136,209);
-$palette-light-blue-800: rgb(2,119,189);
-$palette-light-blue-900: rgb(1,87,155);
-$palette-light-blue-a100: rgb(128,216,255);
-$palette-light-blue-a200: rgb(64,196,255);
-$palette-light-blue-a400: rgb(0,176,255);
-$palette-light-blue-a700: rgb(0,145,234);
-
-// Cyan
-$palette-cyan-50: rgb(224,247,250);
-$palette-cyan-100: rgb(178,235,242);
-$palette-cyan-200: rgb(128,222,234);
-$palette-cyan-300: rgb(77,208,225);
-$palette-cyan-400: rgb(38,198,218);
-$palette-cyan-500: rgb(0,188,212);
-$palette-cyan-600: rgb(0,172,193);
-$palette-cyan-700: rgb(0,151,167);
-$palette-cyan-800: rgb(0,131,143);
-$palette-cyan-900: rgb(0,96,100);
-$palette-cyan-a100: rgb(132,255,255);
-$palette-cyan-a200: rgb(24,255,255);
-$palette-cyan-a400: rgb(0,229,255);
-$palette-cyan-a700: rgb(0,184,212);
-
-// Teal
-$palette-teal-50: rgb(224,242,241);
-$palette-teal-100: rgb(178,223,219);
-$palette-teal-200: rgb(128,203,196);
-$palette-teal-300: rgb(77,182,172);
-$palette-teal-400: rgb(38,166,154);
-$palette-teal-500: rgb(0,150,136);
-$palette-teal-600: rgb(0,137,123);
-$palette-teal-700: rgb(0,121,107);
-$palette-teal-800: rgb(0,105,92);
-$palette-teal-900: rgb(0,77,64);
-$palette-teal-a100: rgb(167,255,235);
-$palette-teal-a200: rgb(100,255,218);
-$palette-teal-a400: rgb(29,233,182);
-$palette-teal-a700: rgb(0,191,165);
-
-// Green
-$palette-green-50: rgb(232,245,233);
-$palette-green-100: rgb(200,230,201);
-$palette-green-200: rgb(165,214,167);
-$palette-green-300: rgb(129,199,132);
-$palette-green-400: rgb(102,187,106);
-$palette-green-500: rgb(76,175,80);
-$palette-green-600: rgb(67,160,71);
-$palette-green-700: rgb(56,142,60);
-$palette-green-800: rgb(46,125,50);
-$palette-green-900: rgb(27,94,32);
-$palette-green-a100: rgb(185,246,202);
-$palette-green-a200: rgb(105,240,174);
-$palette-green-a400: rgb(0,230,118);
-$palette-green-a700: rgb(0,200,83);
-
-// Green
-$palette-light-green-50: rgb(241,248,233);
-$palette-light-green-100: rgb(220,237,200);
-$palette-light-green-200: rgb(197,225,165);
-$palette-light-green-300: rgb(174,213,129);
-$palette-light-green-400: rgb(156,204,101);
-$palette-light-green-500: rgb(139,195,74);
-$palette-light-green-600: rgb(124,179,66);
-$palette-light-green-700: rgb(104,159,56);
-$palette-light-green-800: rgb(85,139,47);
-$palette-light-green-900: rgb(51,105,30);
-$palette-light-green-a100: rgb(204,255,144);
-$palette-light-green-a200: rgb(178,255,89);
-$palette-light-green-a400: rgb(118,255,3);
-$palette-light-green-a700: rgb(100,221,23);
-
-// Lime
-$palette-lime-50: rgb(249,251,231);
-$palette-lime-100: rgb(240,244,195);
-$palette-lime-200: rgb(230,238,156);
-$palette-lime-300: rgb(220,231,117);
-$palette-lime-400: rgb(212,225,87);
-$palette-lime-500: rgb(205,220,57);
-$palette-lime-600: rgb(192,202,51);
-$palette-lime-700: rgb(175,180,43);
-$palette-lime-800: rgb(158,157,36);
-$palette-lime-900: rgb(130,119,23);
-$palette-lime-a100: rgb(244,255,129);
-$palette-lime-a200: rgb(238,255,65);
-$palette-lime-a400: rgb(198,255,0);
-$palette-lime-a700: rgb(174,234,0);
-
-// Yellow
-$palette-yellow-50: rgb(255,253,231);
-$palette-yellow-100: rgb(255,249,196);
-$palette-yellow-200: rgb(255,245,157);
-$palette-yellow-300: rgb(255,241,118);
-$palette-yellow-400: rgb(255,238,88);
-$palette-yellow-500: rgb(255,235,59);
-$palette-yellow-600: rgb(253,216,53);
-$palette-yellow-700: rgb(251,192,45);
-$palette-yellow-800: rgb(249,168,37);
-$palette-yellow-900: rgb(245,127,23);
-$palette-yellow-a100: rgb(255,255,141);
-$palette-yellow-a200: rgb(255,255,0);
-$palette-yellow-a400: rgb(255,234,0);
-$palette-yellow-a700: rgb(255,214,0);
-
-// Amber
-$palette-amber-50: rgb(255,248,225);
-$palette-amber-100: rgb(255,236,179);
-$palette-amber-200: rgb(255,224,130);
-$palette-amber-300: rgb(255,213,79);
-$palette-amber-400: rgb(255,202,40);
-$palette-amber-500: rgb(255,193,7);
-$palette-amber-600: rgb(255,179,0);
-$palette-amber-700: rgb(255,160,0);
-$palette-amber-800: rgb(255,143,0);
-$palette-amber-900: rgb(255,111,0);
-$palette-amber-a100: rgb(255,229,127);
-$palette-amber-a200: rgb(255,215,64);
-$palette-amber-a400: rgb(255,196,0);
-$palette-amber-a700: rgb(255,171,0);
-
-// Orange
-$palette-orange-50: rgb(255,243,224);
-$palette-orange-100: rgb(255,224,178);
-$palette-orange-200: rgb(255,204,128);
-$palette-orange-300: rgb(255,183,77);
-$palette-orange-400: rgb(255,167,38);
-$palette-orange-500: rgb(255,152,0);
-$palette-orange-600: rgb(251,140,0);
-$palette-orange-700: rgb(245,124,0);
-$palette-orange-800: rgb(239,108,0);
-$palette-orange-900: rgb(230,81,0);
-$palette-orange-a100: rgb(255,209,128);
-$palette-orange-a200: rgb(255,171,64);
-$palette-orange-a400: rgb(255,145,0);
-$palette-orange-a700: rgb(255,109,0);
-
-// Deep Orange
-$palette-deep-orange-50: rgb(251,233,231);
-$palette-deep-orange-100: rgb(255,204,188);
-$palette-deep-orange-200: rgb(255,171,145);
-$palette-deep-orange-300: rgb(255,138,101);
-$palette-deep-orange-400: rgb(255,112,67);
-$palette-deep-orange-500: rgb(255,87,34);
-$palette-deep-orange-600: rgb(244,81,30);
-$palette-deep-orange-700: rgb(230,74,25);
-$palette-deep-orange-800: rgb(216,67,21);
-$palette-deep-orange-900: rgb(191,54,12);
-$palette-deep-orange-a100: rgb(255,158,128);
-$palette-deep-orange-a200: rgb(255,110,64);
-$palette-deep-orange-a400: rgb(255,61,0);
-$palette-deep-orange-a700: rgb(221,44,0);
-
-// Brown
-$palette-brown-50: rgb(239,235,233);
-$palette-brown-100: rgb(215,204,200);
-$palette-brown-200: rgb(188,170,164);
-$palette-brown-300: rgb(161,136,127);
-$palette-brown-400: rgb(141,110,99);
-$palette-brown-500: rgb(121,85,72);
-$palette-brown-600: rgb(109,76,65);
-$palette-brown-700: rgb(93,64,55);
-$palette-brown-800: rgb(78,52,46);
-$palette-brown-900: rgb(62,39,35);
-
-// Grey
-$palette-grey-50: rgb(250,250,250);
-$palette-grey-100: rgb(245,245,245);
-$palette-grey-200: rgb(238,238,238);
-$palette-grey-300: rgb(224,224,224);
-$palette-grey-400: rgb(189,189,189);
-$palette-grey-500: rgb(158,158,158);
-$palette-grey-600: rgb(117,117,117);
-$palette-grey-700: rgb(97,97,97);
-$palette-grey-800: rgb(66,66,66);
-$palette-grey-900: rgb(33,33,33);
-
-// Blue Grey
-$palette-blue-grey-50: rgb(236,239,241);
-$palette-blue-grey-100: rgb(207,216,220);
-$palette-blue-grey-200: rgb(176,190,197);
-$palette-blue-grey-300: rgb(144,164,174);
-$palette-blue-grey-400: rgb(120,144,156);
-$palette-blue-grey-500: rgb(96,125,139);
-$palette-blue-grey-600: rgb(84,110,122);
-$palette-blue-grey-700: rgb(69,90,100);
-$palette-blue-grey-800: rgb(55,71,79);
-$palette-blue-grey-900: rgb(38,50,56);
-
-$color-black: rgb(0,0,0);
-$color-white: rgb(255,255,255);
-
-//-- The two possible colors for overlayed text.
-$styleguide-generate-template: false !default;
-$color-dark-contrast: $color-white !default;
-$color-light-contrast: $color-black !default;
diff --git a/lib/_globals.scss b/lib/_globals.scss
deleted file mode 100644
index 73edd5f9e..000000000
--- a/lib/_globals.scss
+++ /dev/null
@@ -1,81 +0,0 @@
-//-- Color configuration
-$color-divider: $palette-grey-200 !default;
-$color-background: $color-white !default;
-$color-text: $palette-grey-900 !default;
-$color-text-secondary: $palette-grey-600 !default;
-
-$color-primary: $palette-indigo-500 !default;
-$color-primary-dark: $palette-indigo-700 !default;
-$color-accent: $palette-pink-a200 !default;
-$color-accent-dark: $palette-pink-700 !default;
-$color-primary-contrast: $color-dark-contrast !default;
-$color-accent-contrast: $color-dark-contrast !default;
-
-//-- Sizing
-$unit: 1rem !default;
-
-// -- Fonts
-$preferred-font: "Roboto", "Helvetica", "Arial", sans-serif !default;
-$font-size: 1.6 * $unit !default;
-$font-size-tiny: 1.2 * $unit !default;
-$font-size-small: 1.4 * $unit !default;
-$font-size-normal: $font-size !default;
-$font-size-big: 1.8 * $unit !default;
-$font-weight-thin: 300 !default;
-$font-weight-normal: 400 !default;
-$font-weight-semi-bold: 500 !default;
-$font-weight-bold: 700 !default;
-
-//-- Shadows
-$shadow-key-umbra-opacity: 0.2 !default;
-$shadow-key-penumbra-opacity: 0.14 !default;
-$shadow-ambient-shadow-opacity: 0.12 !default;
-
-//-- Depth Shadows
-$zdepth-shadow-1: 0 1px 6px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.24);
-$zdepth-shadow-2: 0 3px 10px rgba(0,0,0,.16), 0 3px 10px rgba(0,0,0,.23);
-$zdepth-shadow-3: 0 10px 30px rgba(0,0,0,.19), 0 6px 10px rgba(0,0,0,.23);
-$zdepth-shadow-4: 0 14px 45px rgba(0,0,0,.25), 0 10px 18px rgba(0,0,0,.22);
-$zdepth-shadow-5: 0 19px 60px rgba(0,0,0,.3), 0 15px 20px rgba(0,0,0,.22);
-
-//-- Animation
-$animation-duration: .35s;
-$animation-delay: $animation-duration / 5;
-$animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
-$animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;
-$animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
-$animation-curve-default: $animation-curve-fast-out-slow-in !default;
-
-//-- Indexes
-$z-index-highest: 300 !default;
-$z-index-higher: 200 !default;
-$z-index-high: 100 !default;
-$z-index-normal: 1 !default;
-$z-index-low: -100 !default;
-$z-index-lower: -200 !default;
-
-//-- Breakpoints
-// height of app bar
-// https://material.google.com/layout/metrics-keylines.html#metrics-keylines-keylines-spacing
-$standard-increment-mobile: (5.6 * $unit) !default;
-$standard-increment-desktop: (6.4 * $unit) !default;
-
-// https://material.google.com/layout/metrics-keylines.html#metrics-keylines-baseline-grids
-$baseline-grid: (0.8 * $unit) !default;
-$layout-gutter-width-sm: ($baseline-grid * 2) !default;
-$layout-gutter-width: ($baseline-grid * 3) !default;
-
-// https://material.google.com/layout/responsive-ui.html#responsive-ui-breakpoints
-// 4 columns
-$layout-breakpoint-xxs: 480px !default;
-// 8 columns
-$layout-breakpoint-xs: 600px !default;
-// 12 columns
-$layout-breakpoint-sm-tablet: 720px !default;
-$layout-breakpoint-sm: 840px !default;
-$layout-breakpoint-md: 960px !default;
-$layout-breakpoint-lg-tablet: 1024px !default;
-$layout-breakpoint-lg: 1280px !default;
-$layout-breakpoint-xl: 1440px !default;
-$layout-breakpoint-xxl: 1600px !default;
-$layout-breakpoint-xxxl: 1920px !default;
diff --git a/lib/_mixins.scss b/lib/_mixins.scss
deleted file mode 100644
index 40490c702..000000000
--- a/lib/_mixins.scss
+++ /dev/null
@@ -1,260 +0,0 @@
-// scss-lint:disable VendorPrefix
-@mixin typo-preferred-font($use-preferred: true) {
-  @if $use-preferred {
-    font-family: $preferred-font;
-  }
-}
-
-@mixin typo-display-4($color-contrast: false, $use-preferred: true) {
-  @include typo-preferred-font($use-preferred);
-  font-size: $unit * 11.2;
-  font-weight: 300;
-  line-height: 1;
-  letter-spacing: -.04em;
-
-  @if $color-contrast {
-    opacity: .54;
-  }
-}
-
-@mixin typo-display-3($color-contrast: false, $use-preferred: true) {
-  @include typo-preferred-font($use-preferred);
-  font-size: $unit * 5.6;
-  font-weight: 400;
-  line-height: 1.35;
-  letter-spacing: -.02em;
-
-  @if $color-contrast {
-    opacity: .54;
-  }
-}
-
-@mixin typo-display-2($color-contrast: false, $use-preferred: true) {
-  @include typo-preferred-font($use-preferred);
-  font-size: $unit * 4.5;
-  font-weight: 400;
-  line-height: $unit * 4.8;
-
-  @if $color-contrast {
-    opacity: .54;
-  }
-}
-
-@mixin typo-display-1($color-contrast: false, $use-preferred: true) {
-  @include typo-preferred-font($use-preferred);
-  font-size: $unit * 3.4;
-  font-weight: 400;
-  line-height: $unit * 4;
-
-  @if $color-contrast {
-    opacity: .54;
-  }
-}
-
-@mixin typo-headline($color-contrast: false, $use-preferred: true) {
-  @include typo-preferred-font($use-preferred);
-  font-size: $unit * 2.4;
-  font-weight: 400;
-  line-height: $unit * 3.2;
-  -moz-osx-font-smoothing: grayscale;
-
-  @if $color-contrast {
-    opacity: .87;
-  }
-}
-
-@mixin typo-title($color-contrast: false, $use-preferred: true) {
-  @include typo-preferred-font($use-preferred);
-  font-size: $unit * 2;
-  font-weight: 500;
-  line-height: 1;
-  letter-spacing: .02em;
-
-  @if $color-contrast {
-    opacity: .87;
-  }
-}
-
-@mixin typo-subhead($color-contrast: false, $use-preferred: true) {
-  @include typo-preferred-font($use-preferred);
-  font-size: $unit * 1.6;
-  font-weight: 400;
-  line-height: $unit * 2.4;
-  letter-spacing: .04em;
-
-  @if $color-contrast {
-    opacity: .87;
-  }
-}
-
-@mixin typo-subhead-2($color-contrast: false, $use-preferred: true) {
-  @include typo-preferred-font($use-preferred);
-  font-size: $unit * 1.6;
-  font-weight: 400;
-  line-height: $unit * 2.8;
-  letter-spacing: .04em;
-
-  @if $color-contrast {
-    opacity: .87;
-  }
-}
-
-@mixin typo-body-2($color-contrast: false, $use-preferred: false) {
-  @include typo-preferred-font($use-preferred);
-  font-size: $unit * 1.4;
-  line-height: $unit * 2.4;
-  letter-spacing: 0;
-
-  @if $use-preferred {
-    font-weight: 500;
-  } @else {
-    font-weight: bold;
-  }
-
-  @if $color-contrast {
-    opacity: .87;
-  }
-}
-
-@mixin typo-body-1($color-contrast: false, $use-preferred: false) {
-  @include typo-preferred-font($use-preferred);
-  font-size: $unit * 1.4;
-  font-weight: 400;
-  line-height: $unit * 2.4;
-  letter-spacing: 0;
-
-  @if $color-contrast {
-    opacity: .87;
-  }
-}
-
-@mixin typo-caption($color-contrast: false, $use-preferred: false) {
-  @include typo-preferred-font($use-preferred);
-  font-size: $unit * 1.2;
-  font-weight: 400;
-  line-height: 1;
-  letter-spacing: 0;
-
-  @if $color-contrast {
-    opacity: .54;
-  }
-}
-
-@mixin typo-blockquote($color-contrast: false, $use-preferred: true) {
-  @include typo-preferred-font($use-preferred);
-  position: relative;
-  font-size: $unit * 2.4;
-  font-style: italic;
-  font-weight: 300;
-  line-height: 1.35;
-  letter-spacing: .08em;
-
-  &:before {
-    position: absolute;
-    left: -.5em;
-    content: "“";
-  }
-
-  &:after {
-    margin-left: -.05em;
-    content: "”";
-  }
-
-  @if $color-contrast {
-    opacity: .54;
-  }
-}
-
-@mixin typo-menu($color-contrast: false, $use-preferred: true) {
-  @include typo-preferred-font($use-preferred);
-  font-size: $unit * 1.4;
-  font-weight: 500;
-  line-height: 1;
-  letter-spacing: 0;
-
-  @if $color-contrast {
-    opacity: .87;
-  }
-}
-
-@mixin typo-button($color-contrast: false, $use-preferred: true) {
-  @include typo-preferred-font($use-preferred);
-  font-size: $unit * 1.4;
-  font-weight: 500;
-  line-height: 1;
-  text-transform: uppercase;
-  letter-spacing: 0;
-
-  @if $color-contrast {
-    opacity: .87;
-  }
-}
-
-//-- Shadows
-@mixin focus-shadow() {
-  box-shadow: 0 0 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .36);
-}
-
-@mixin shadow-2dp() {
-  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-  0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
-  0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
-}
-
-@mixin shadow-3dp() {
-  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-  0 3px 3px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
-  0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
-}
-
-@mixin shadow-4dp() {
-  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-  0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
-  0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
-}
-
-@mixin shadow-6dp() {
-  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-  0 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
-  0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
-}
-
-@mixin shadow-8dp() {
-  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-  0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
-  0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity);
-}
-
-@mixin shadow-16dp() {
-  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-  0 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
-  0 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity);
-}
-
-//-- Animations
-@mixin material-animation-fast-out-slow-in($duration: .2s) {
-  transition-timing-function: $animation-curve-fast-out-slow-in;
-  transition-duration: $duration;
-}
-
-@mixin material-animation-linear-out-slow-in($duration: .2s) {
-  transition-timing-function: $animation-curve-linear-out-slow-in;
-  transition-duration: $duration;
-}
-
-@mixin material-animation-fast-out-linear-in($duration: .2s) {
-  transition-timing-function: $animation-curve-fast-out-linear-in;
-  transition-duration: $duration;
-}
-
-@mixin material-animation-default($duration: .2s) {
-  transition-timing-function: $animation-curve-default;
-  transition-duration: $duration;
-}
-
-@mixin no-webkit-scrollbar {
-  &::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-  }
-}
diff --git a/lib/animations/index.js b/lib/animations/index.js
deleted file mode 100644
index 787971bcc..000000000
--- a/lib/animations/index.js
+++ /dev/null
@@ -1,29 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ZoomOut = exports.ZoomIn = exports.SlideRight = exports.SlideLeft = undefined;
-
-var _slideLeft = require('./slide-left.scss');
-
-var _slideLeft2 = _interopRequireDefault(_slideLeft);
-
-var _slideRight = require('./slide-right.scss');
-
-var _slideRight2 = _interopRequireDefault(_slideRight);
-
-var _zoomIn = require('./zoom-in.scss');
-
-var _zoomIn2 = _interopRequireDefault(_zoomIn);
-
-var _zoomOut = require('./zoom-out.scss');
-
-var _zoomOut2 = _interopRequireDefault(_zoomOut);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.SlideLeft = _slideLeft2.default;
-exports.SlideRight = _slideRight2.default;
-exports.ZoomIn = _zoomIn2.default;
-exports.ZoomOut = _zoomOut2.default;
\ No newline at end of file
diff --git a/lib/animations/slide-left.scss b/lib/animations/slide-left.scss
deleted file mode 100644
index aba039958..000000000
--- a/lib/animations/slide-left.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-.enter, .leave {
-  position: absolute;
-  transition-timing-function: ease-in-out;
-  transition-duration: .35s;
-  transition-property: transform, opacity;
-}
-
-.enter {
-  opacity: 0;
-  transform: translate3d(-100%, 0, 0);
-
-  &.enterActive {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-.leave {
-  opacity: 1;
-  transform: translate3d(0, 0, 0);
-
-  &.leaveActive {
-    opacity: 0;
-    transform: translate3d(100%, 0, 0);
-  }
-}
diff --git a/lib/animations/slide-right.scss b/lib/animations/slide-right.scss
deleted file mode 100644
index 95d0e15d9..000000000
--- a/lib/animations/slide-right.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.enter, .leave {
-  position: absolute;
-}
-
-.enterActive, .leaveActive {
-  transition-timing-function: ease-in-out;
-  transition-duration: 350ms;
-  transition-property: transform, opacity;
-}
-
-.enter {
-  opacity: 0;
-  transform: translateX(100%);
-
-  &.enterActive {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-.leave {
-  opacity: 1;
-  transform: translateX(0);
-
-  &.leaveActive {
-    opacity: 0;
-    transform: translateX(-100%);
-  }
-}
diff --git a/lib/animations/zoom-in.scss b/lib/animations/zoom-in.scss
deleted file mode 100644
index d752e9401..000000000
--- a/lib/animations/zoom-in.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-
-.enter, .leave {
-  position: absolute;
-}
-
-.enterActive, .leaveActive {
-  transition: transform, opacity;
-  transition-timing-function: $animation-curve-fast-out-slow-in;
-  transition-duration: 500ms;
-}
-
-.enter {
-  opacity: 0;
-  transform: scale(0.85);
-
-  &.enterActive {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-.leave {
-  opacity: 1;
-  transform: scale(1);
-
-  &.leaveActive {
-    opacity: 0;
-    transform: scale(1.25);
-  }
-}
diff --git a/lib/animations/zoom-out.scss b/lib/animations/zoom-out.scss
deleted file mode 100644
index cf1500fc1..000000000
--- a/lib/animations/zoom-out.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-
-.enter, .leave {
-  position: absolute;
-}
-
-.enterActive, .leaveActive {
-  transition: transform, opacity;
-  transition-timing-function: $animation-curve-fast-out-slow-in;
-  transition-duration: 500ms;
-}
-
-.enter {
-  opacity: 0;
-  transform: scale(1.25);
-
-  &.enterActive {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-.leave {
-  opacity: 1;
-  transform: scale(1);
-
-  &.leaveActive {
-    opacity: 0;
-    transform: scale(0.85);
-  }
-}
diff --git a/lib/app_bar/AppBar.js b/lib/app_bar/AppBar.js
deleted file mode 100644
index 852b9277c..000000000
--- a/lib/app_bar/AppBar.js
+++ /dev/null
@@ -1,177 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AppBar = exports.appBarFactory = undefined;
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _IconButton = require('../button/IconButton.js');
-
-var _IconButton2 = _interopRequireDefault(_IconButton);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(IconButton) {
-  var AppBar = function (_React$Component) {
-    _inherits(AppBar, _React$Component);
-
-    function AppBar() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, AppBar);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = AppBar.__proto__ || Object.getPrototypeOf(AppBar)).call.apply(_ref, [this].concat(args))), _this), _this.state = { hidden: false, height: 0 }, _this.initializeScroll = function () {
-        window.addEventListener('scroll', _this.handleScroll);
-
-        var _this$rootNode$getBou = _this.rootNode.getBoundingClientRect(),
-            height = _this$rootNode$getBou.height;
-
-        _this.curScroll = window.scrollY;
-        _this.setState({ height: height });
-      }, _this.endScroll = function () {
-        window.removeEventListener('scroll', _this.handleScroll);
-      }, _this.handleScroll = function () {
-        var scrollDiff = _this.curScroll - window.scrollY;
-        var hidden = scrollDiff < 0 && window.scrollY !== undefined && window.scrollY > _this.state.height;
-        _this.setState({ hidden: hidden });
-        _this.curScroll = window.scrollY;
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(AppBar, [{
-      key: 'componentDidMount',
-      value: function componentDidMount() {
-        if (this.props.scrollHide) {
-          this.initializeScroll();
-        }
-      }
-    }, {
-      key: 'componentWillReceiveProps',
-      value: function componentWillReceiveProps(nextProps) {
-        if (!this.props.scrollHide && nextProps.scrollHide) {
-          this.initializeScroll();
-        }
-
-        if (this.props.scrollHide && !nextProps.scrollHide) {
-          this.endScroll();
-        }
-      }
-    }, {
-      key: 'componentWillUnmount',
-      value: function componentWillUnmount() {
-        if (this.props.scrollHide) {
-          this.endScroll();
-        }
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var _classnames,
-            _this2 = this;
-
-        var _props = this.props,
-            children = _props.children,
-            leftIcon = _props.leftIcon,
-            onLeftIconClick = _props.onLeftIconClick,
-            onRightIconClick = _props.onRightIconClick,
-            rightIcon = _props.rightIcon,
-            theme = _props.theme,
-            title = _props.title;
-
-        var className = (0, _classnames3.default)(theme.appBar, (_classnames = {}, _defineProperty(_classnames, theme.fixed, this.props.fixed), _defineProperty(_classnames, theme.flat, this.props.flat), _defineProperty(_classnames, theme.scrollHide, this.state.hidden), _classnames), this.props.className);
-
-        return _react2.default.createElement(
-          'header',
-          {
-            className: className,
-            'data-react-toolbox': 'app-bar',
-            ref: function ref(node) {
-              _this2.rootNode = node;
-            }
-          },
-          leftIcon && _react2.default.createElement(IconButton, {
-            inverse: true,
-            className: (0, _classnames3.default)(theme.leftIcon),
-            onClick: onLeftIconClick,
-            icon: leftIcon }),
-          title && _react2.default.createElement(
-            'h1',
-            { className: (0, _classnames3.default)(theme.title) },
-            title
-          ),
-          children,
-          rightIcon && _react2.default.createElement(IconButton, {
-            inverse: true,
-            className: (0, _classnames3.default)(theme.rightIcon),
-            onClick: onRightIconClick,
-            icon: rightIcon })
-        );
-      }
-    }]);
-
-    return AppBar;
-  }(_react2.default.Component);
-
-  AppBar.propTypes = {
-    children: _react.PropTypes.node,
-    className: _react.PropTypes.string,
-    fixed: _react.PropTypes.bool,
-    flat: _react.PropTypes.bool,
-    leftIcon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-    onLeftIconClick: _react.PropTypes.func,
-    onRightIconClick: _react.PropTypes.func,
-    rightIcon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-    scrollHide: _react.PropTypes.bool,
-    theme: _react.PropTypes.shape({
-      appBar: _react.PropTypes.string,
-      fixed: _react.PropTypes.string,
-      flat: _react.PropTypes.string,
-      leftIcon: _react.PropTypes.string,
-      rightIcon: _react.PropTypes.string,
-      title: _react.PropTypes.string
-    }),
-    title: _react.PropTypes.string
-  };
-  AppBar.defaultProps = {
-    className: '',
-    fixed: false,
-    flat: false,
-    scrollHide: false
-  };
-
-
-  return AppBar;
-};
-
-var AppBar = factory(_IconButton2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.APP_BAR)(AppBar);
-exports.appBarFactory = factory;
-exports.AppBar = AppBar;
\ No newline at end of file
diff --git a/lib/app_bar/_config.scss b/lib/app_bar/_config.scss
deleted file mode 100644
index 5c76b6189..000000000
--- a/lib/app_bar/_config.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-$appbar-color: $color-primary-dark !default;
-$appbar-contrast: $color-primary-contrast !default;
-$appbar-title-total-distance: 8 * $unit !default;
-$appbar-height: 6.4 * $unit !default;
-$appbar-height-m-portrait: 5.6 * $unit !default;
-$appbar-height-m-landscape: 4.8 * $unit !default;
-$appbar-h-padding: 2.4 * $unit !default;
-$appbar-title-distance: $appbar-title-total-distance - $appbar-h-padding !default;
diff --git a/lib/app_bar/index.d.ts b/lib/app_bar/index.d.ts
deleted file mode 100644
index fb868bb1a..000000000
--- a/lib/app_bar/index.d.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface AppBarTheme {
-  /**
-   * Used for the component root element.
-   */
-  appBar?: string;
-  /**
-   * Added to the root element when the app bar is fixed.
-   */
-  fixed?: string;
-  /**
-   * Added to the root element when the app bar is flat.
-   */
-  flat?: string;
-  /**
-   * Used as the app bar title.
-   */
-  title ?: string;
-  /**
-   * Added to the left icon app bar element.
-   */
-  leftIcon?: string;
-  /**
-   * Added to the right icon app bar element.
-   */
-  rightIcon?: string;
-}
-
-interface AppBarProps extends ReactToolbox.Props {
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * Determine if the bar should have position fixed or relative.
-   * @default false
-   */
-  fixed?: boolean;
-  /**
-   * If true, the AppBar shows a shadow.
-   * @default false
-   */
-  flat?: boolean;
-  /**
-   * If it exists it is used as the AppBar title
-   */
-  title?: string;
-  /**
-   * If it exists it is used as the AppBar left icon
-   */
-  leftIcon?: string;
-  /**
-   * Called when the left icon is clicked
-   */
-  onLeftIconClick?: Function;
-  /**
-   * If it exists it is used as the AppBar right icon
-   */
-  rightIcon?: string;
-  /**
-   * Called when the righticon is clicked
-   */
-  onRightIconClick?: Function;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: AppBarTheme;
-}
-
-export class AppBar extends React.Component<AppBarProps, {}> { }
-
-export default AppBar;
diff --git a/lib/app_bar/index.js b/lib/app_bar/index.js
deleted file mode 100644
index 101ec9466..000000000
--- a/lib/app_bar/index.js
+++ /dev/null
@@ -1,26 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AppBar = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _AppBar = require('./AppBar.js');
-
-var _button = require('../button');
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var AppBar = (0, _AppBar.appBarFactory)(_button.IconButton);
-var ThemedAppBar = (0, _reactCssThemr.themr)(_identifiers.APP_BAR, _theme2.default)(AppBar);
-
-exports.default = ThemedAppBar;
-exports.AppBar = ThemedAppBar;
\ No newline at end of file
diff --git a/lib/app_bar/theme.scss b/lib/app_bar/theme.scss
deleted file mode 100644
index 04584eb69..000000000
--- a/lib/app_bar/theme.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.appBar {
-  display: flex;
-  height: $appbar-height;
-  align-items: center;
-  padding: 0 $appbar-h-padding;
-  color: $appbar-contrast;
-  background: $appbar-color;
-
-  @media screen and (max-width: $layout-breakpoint-xxs) and (orientation: portrait) {
-    height: $appbar-height-m-portrait;
-  }
-
-  @media screen and (max-width: $layout-breakpoint-xs) and (orientation: landscape) {
-    height: $appbar-height-m-landscape;
-  }
-
-  &:not(.flat) {
-    z-index: $z-index-high;
-    box-shadow: 0 2px 5px rgba(0,0,0,.26);
-  }
-
-  &.fixed {
-    position: fixed;
-    top: 0;
-    right: 0;
-    left: 0;
-    z-index: $z-index-highest;
-  }
-
-  a {
-    color: $appbar-contrast;
-  }
-
-  .title {
-    flex-grow: 1;
-    font-size: 1.8 * $unit;
-    font-weight: bold;
-    > small {
-      font-size: 1.8 * $unit;
-      font-weight: normal;
-    }
-  }
-
-  .leftIcon {
-    margin-left: -1.2 * $unit;
-  }
-
-  .rightIcon {
-    margin-right: -1.2 * $unit;
-    margin-left: auto;
-  }
-
-  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-  transition-duration: .5s;
-  transition-property: transform;
-
-  &.scrollHide {
-    transform: translateY(-100%);
-  }
-}
diff --git a/lib/autocomplete/Autocomplete.js b/lib/autocomplete/Autocomplete.js
deleted file mode 100644
index eeea6ec0e..000000000
--- a/lib/autocomplete/Autocomplete.js
+++ /dev/null
@@ -1,498 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Autocomplete = exports.autocompleteFactory = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactDom = require('react-dom');
-
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
-var _classnames4 = require('classnames');
-
-var _classnames5 = _interopRequireDefault(_classnames4);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Chip = require('../chip/Chip.js');
-
-var _Chip2 = _interopRequireDefault(_Chip);
-
-var _Input = require('../input/Input.js');
-
-var _Input2 = _interopRequireDefault(_Input);
-
-var _events = require('../utils/events.js');
-
-var _events2 = _interopRequireDefault(_events);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var POSITION = {
-  AUTO: 'auto',
-  DOWN: 'down',
-  UP: 'up'
-};
-
-var factory = function factory(Chip, Input) {
-  var Autocomplete = function (_Component) {
-    _inherits(Autocomplete, _Component);
-
-    function Autocomplete() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, Autocomplete);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Autocomplete.__proto__ || Object.getPrototypeOf(Autocomplete)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-        direction: _this.props.direction,
-        focus: false,
-        showAllSuggestions: _this.props.showSuggestionsWhenValueIsSet,
-        query: _this.query(_this.props.value)
-      }, _this.handleChange = function (keys, event) {
-        var key = _this.props.multiple ? keys : keys[0];
-        var showAllSuggestions = _this.props.showSuggestionsWhenValueIsSet;
-
-        var query = _this.query(key);
-        if (_this.props.onChange) _this.props.onChange(key, event);
-        if (_this.props.keepFocusOnChange) {
-          _this.setState({ query: query, showAllSuggestions: showAllSuggestions });
-        } else {
-          _this.setState({ focus: false, query: query, showAllSuggestions: showAllSuggestions }, function () {
-            _reactDom2.default.findDOMNode(_this).querySelector('input').blur();
-          });
-        }
-      }, _this.handleQueryBlur = function (event) {
-        if (_this.state.focus) _this.setState({ focus: false });
-        if (_this.props.onBlur) _this.props.onBlur(event, _this.state.active);
-      }, _this.handleQueryChange = function (value) {
-        _this.setState({ query: value, showAllSuggestions: false, active: null });
-      }, _this.handleQueryFocus = function () {
-        _this.suggestionsNode.scrollTop = 0;
-        _this.setState({ active: '', focus: true });
-        if (_this.props.onFocus) _this.props.onFocus();
-      }, _this.handleQueryKeyDown = function (event) {
-        // Clear query when pressing backspace and showing all suggestions.
-        var shouldClearQuery = event.which === 8 && _this.props.showSuggestionsWhenValueIsSet && _this.state.showAllSuggestions;
-        if (shouldClearQuery) {
-          _this.setState({ query: '' });
-        }
-
-        if (event.which === 13) {
-          var target = _this.state.active;
-          if (!target) {
-            target = _this.props.allowCreate ? _this.state.query : [].concat(_toConsumableArray(_this.suggestions().keys()))[0];
-            _this.setState({ active: target });
-          }
-          _this.select(event, target);
-        }
-      }, _this.handleQueryKeyUp = function (event) {
-        if (event.which === 27) _reactDom2.default.findDOMNode(_this).querySelector('input').blur();
-
-        if ([40, 38].indexOf(event.which) !== -1) {
-          var suggestionsKeys = [].concat(_toConsumableArray(_this.suggestions().keys()));
-          var index = suggestionsKeys.indexOf(_this.state.active) + (event.which === 40 ? +1 : -1);
-          if (index < 0) index = suggestionsKeys.length - 1;
-          if (index >= suggestionsKeys.length) index = 0;
-          _this.setState({ active: suggestionsKeys[index] });
-        }
-      }, _this.handleSuggestionHover = function (event) {
-        _this.setState({ active: event.target.id });
-      }, _this.select = function (event, target) {
-        _events2.default.pauseEvent(event);
-        var values = _this.values(_this.props.value);
-        var newValue = target === void 0 ? event.target.id : target;
-        _this.handleChange([newValue].concat(_toConsumableArray(values.keys())), event);
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(Autocomplete, [{
-      key: 'componentWillReceiveProps',
-      value: function componentWillReceiveProps(nextProps) {
-        if (!this.props.multiple) {
-          this.setState({
-            query: this.query(nextProps.value)
-          });
-        }
-      }
-    }, {
-      key: 'shouldComponentUpdate',
-      value: function shouldComponentUpdate(nextProps, nextState) {
-        if (!this.state.focus && nextState.focus && this.props.direction === POSITION.AUTO) {
-          var direction = this.calculateDirection();
-          if (this.state.direction !== direction) {
-            this.setState({ direction: direction });
-          }
-        }
-        return true;
-      }
-    }, {
-      key: 'calculateDirection',
-      value: function calculateDirection() {
-        if (this.props.direction === 'auto') {
-          var client = _reactDom2.default.findDOMNode(this.inputNode).getBoundingClientRect();
-          var screen_height = window.innerHeight || document.documentElement.offsetHeight;
-          var up = client.top > screen_height / 2 + client.height;
-          return up ? 'up' : 'down';
-        } else {
-          return this.props.direction;
-        }
-      }
-    }, {
-      key: 'query',
-      value: function query(key) {
-        var query_value = '';
-        if (!this.props.multiple && key) {
-          var source_value = this.source().get(key);
-          query_value = source_value ? source_value : key;
-        }
-        return query_value;
-      }
-    }, {
-      key: 'suggestions',
-      value: function suggestions() {
-        var suggest = new Map();
-        var rawQuery = this.state.query || (this.props.multiple ? '' : this.props.value);
-        var query = (rawQuery || '').toLowerCase().trim();
-        var values = this.values();
-        var source = this.source();
-
-        // Suggest any non-set value which matches the query
-        if (this.props.multiple) {
-          var _iteratorNormalCompletion = true;
-          var _didIteratorError = false;
-          var _iteratorError = undefined;
-
-          try {
-            for (var _iterator = source[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-              var _step$value = _slicedToArray(_step.value, 2),
-                  key = _step$value[0],
-                  value = _step$value[1];
-
-              if (!values.has(key) && this.matches(value.toLowerCase().trim(), query)) {
-                suggest.set(key, value);
-              }
-            }
-
-            // When multiple is false, suggest any value which matches the query if showAllSuggestions is false
-          } catch (err) {
-            _didIteratorError = true;
-            _iteratorError = err;
-          } finally {
-            try {
-              if (!_iteratorNormalCompletion && _iterator.return) {
-                _iterator.return();
-              }
-            } finally {
-              if (_didIteratorError) {
-                throw _iteratorError;
-              }
-            }
-          }
-        } else if (query && !this.state.showAllSuggestions) {
-          var _iteratorNormalCompletion2 = true;
-          var _didIteratorError2 = false;
-          var _iteratorError2 = undefined;
-
-          try {
-            for (var _iterator2 = source[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
-              var _step2$value = _slicedToArray(_step2.value, 2),
-                  key = _step2$value[0],
-                  value = _step2$value[1];
-
-              if (this.matches(value.toLowerCase().trim(), query)) {
-                suggest.set(key, value);
-              }
-            }
-
-            // When multiple is false, suggest all values when showAllSuggestions is true
-          } catch (err) {
-            _didIteratorError2 = true;
-            _iteratorError2 = err;
-          } finally {
-            try {
-              if (!_iteratorNormalCompletion2 && _iterator2.return) {
-                _iterator2.return();
-              }
-            } finally {
-              if (_didIteratorError2) {
-                throw _iteratorError2;
-              }
-            }
-          }
-        } else {
-          suggest = source;
-        }
-
-        return suggest;
-      }
-    }, {
-      key: 'matches',
-      value: function matches(value, query) {
-        var suggestionMatch = this.props.suggestionMatch;
-
-
-        if (suggestionMatch === 'start') {
-          return value.startsWith(query);
-        } else if (suggestionMatch === 'anywhere') {
-          return value.includes(query);
-        } else if (suggestionMatch === 'word') {
-          var re = new RegExp('\\b' + query, 'g');
-          return re.test(value);
-        }
-
-        return false;
-      }
-    }, {
-      key: 'source',
-      value: function source() {
-        var src = this.props.source;
-
-        if (src.hasOwnProperty('length')) {
-          return new Map(src.map(function (item) {
-            return Array.isArray(item) ? [].concat(_toConsumableArray(item)) : [item, item];
-          }));
-        } else {
-          return new Map(Object.keys(src).map(function (key) {
-            return [key, src[key]];
-          }));
-        }
-      }
-    }, {
-      key: 'values',
-      value: function values() {
-        var valueMap = new Map();
-        var vals = this.props.multiple ? this.props.value : [this.props.value];
-        var _iteratorNormalCompletion3 = true;
-        var _didIteratorError3 = false;
-        var _iteratorError3 = undefined;
-
-        try {
-          for (var _iterator3 = this.source()[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
-            var _step3$value = _slicedToArray(_step3.value, 2),
-                k = _step3$value[0],
-                v = _step3$value[1];
-
-            if (vals.indexOf(k) !== -1) valueMap.set(k, v);
-          }
-        } catch (err) {
-          _didIteratorError3 = true;
-          _iteratorError3 = err;
-        } finally {
-          try {
-            if (!_iteratorNormalCompletion3 && _iterator3.return) {
-              _iterator3.return();
-            }
-          } finally {
-            if (_didIteratorError3) {
-              throw _iteratorError3;
-            }
-          }
-        }
-
-        return valueMap;
-      }
-    }, {
-      key: 'unselect',
-      value: function unselect(key, event) {
-        if (!this.props.disabled) {
-          var values = this.values(this.props.value);
-          values.delete(key);
-          this.handleChange([].concat(_toConsumableArray(values.keys())), event);
-        }
-      }
-    }, {
-      key: 'renderSelected',
-      value: function renderSelected() {
-        var _this2 = this;
-
-        if (this.props.multiple) {
-          var selectedItems = [].concat(_toConsumableArray(this.values())).map(function (_ref2) {
-            var _ref3 = _slicedToArray(_ref2, 2),
-                key = _ref3[0],
-                value = _ref3[1];
-
-            return _react2.default.createElement(
-              Chip,
-              {
-                key: key,
-                className: _this2.props.theme.value,
-                deletable: true,
-                onDeleteClick: _this2.unselect.bind(_this2, key)
-              },
-              value
-            );
-          });
-
-          return _react2.default.createElement(
-            'ul',
-            { className: this.props.theme.values },
-            selectedItems
-          );
-        }
-      }
-    }, {
-      key: 'renderSuggestions',
-      value: function renderSuggestions() {
-        var _this3 = this;
-
-        var theme = this.props.theme;
-
-        var suggestions = [].concat(_toConsumableArray(this.suggestions())).map(function (_ref4) {
-          var _ref5 = _slicedToArray(_ref4, 2),
-              key = _ref5[0],
-              value = _ref5[1];
-
-          var className = (0, _classnames5.default)(theme.suggestion, _defineProperty({}, theme.active, _this3.state.active === key));
-          return _react2.default.createElement(
-            'li',
-            {
-              id: key,
-              key: key,
-              className: className,
-              onMouseDown: _this3.select,
-              onMouseOver: _this3.handleSuggestionHover
-            },
-            value
-          );
-        });
-
-        return _react2.default.createElement(
-          'ul',
-          {
-            className: (0, _classnames5.default)(theme.suggestions, _defineProperty({}, theme.up, this.state.direction === 'up')),
-            ref: function ref(node) {
-              _this3.suggestionsNode = node;
-            }
-          },
-          suggestions
-        );
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var _this4 = this;
-
-        var _props = this.props,
-            allowCreate = _props.allowCreate,
-            error = _props.error,
-            label = _props.label,
-            source = _props.source,
-            suggestionMatch = _props.suggestionMatch,
-            selectedPosition = _props.selectedPosition,
-            keepFocusOnChange = _props.keepFocusOnChange,
-            showSuggestionsWhenValueIsSet = _props.showSuggestionsWhenValueIsSet,
-            theme = _props.theme,
-            other = _objectWithoutProperties(_props, ['allowCreate', 'error', 'label', 'source', 'suggestionMatch', 'selectedPosition', 'keepFocusOnChange', 'showSuggestionsWhenValueIsSet', 'theme']);
-
-        var className = (0, _classnames5.default)(theme.autocomplete, _defineProperty({}, theme.focus, this.state.focus), this.props.className);
-
-        return _react2.default.createElement(
-          'div',
-          { 'data-react-toolbox': 'autocomplete', className: className },
-          this.props.selectedPosition === 'above' ? this.renderSelected() : null,
-          _react2.default.createElement(Input, _extends({}, other, {
-            ref: function ref(node) {
-              _this4.inputNode = node;
-            },
-            autoComplete: 'off',
-            className: theme.input,
-            error: error,
-            label: label,
-            onBlur: this.handleQueryBlur,
-            onChange: this.handleQueryChange,
-            onFocus: this.handleQueryFocus,
-            onKeyDown: this.handleQueryKeyDown,
-            onKeyUp: this.handleQueryKeyUp,
-            theme: theme,
-            themeNamespace: 'input',
-            value: this.state.query
-          })),
-          this.renderSuggestions(),
-          this.props.selectedPosition === 'below' ? this.renderSelected() : null
-        );
-      }
-    }]);
-
-    return Autocomplete;
-  }(_react.Component);
-
-  Autocomplete.propTypes = {
-    allowCreate: _react.PropTypes.bool,
-    className: _react.PropTypes.string,
-    direction: _react.PropTypes.oneOf(['auto', 'up', 'down']),
-    disabled: _react.PropTypes.bool,
-    error: _react.PropTypes.string,
-    keepFocusOnChange: _react.PropTypes.bool,
-    label: _react.PropTypes.string,
-    multiple: _react.PropTypes.bool,
-    onBlur: _react.PropTypes.func,
-    onChange: _react.PropTypes.func,
-    onFocus: _react.PropTypes.func,
-    selectedPosition: _react.PropTypes.oneOf(['above', 'below']),
-    showSuggestionsWhenValueIsSet: _react.PropTypes.bool,
-    source: _react.PropTypes.any,
-    suggestionMatch: _react.PropTypes.oneOf(['start', 'anywhere', 'word']),
-    theme: _react.PropTypes.shape({
-      active: _react.PropTypes.string,
-      autocomplete: _react.PropTypes.string,
-      focus: _react.PropTypes.string,
-      input: _react.PropTypes.string,
-      suggestion: _react.PropTypes.string,
-      suggestions: _react.PropTypes.string,
-      up: _react.PropTypes.string,
-      value: _react.PropTypes.string,
-      values: _react.PropTypes.string
-    }),
-    value: _react.PropTypes.any
-  };
-  Autocomplete.defaultProps = {
-    allowCreate: false,
-    className: '',
-    direction: 'auto',
-    keepFocusOnChange: false,
-    multiple: true,
-    selectedPosition: 'above',
-    showSuggestionsWhenValueIsSet: false,
-    source: {},
-    suggestionMatch: 'start'
-  };
-
-
-  return Autocomplete;
-};
-
-var Autocomplete = factory(_Chip2.default, _Input2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.AUTOCOMPLETE)(Autocomplete);
-exports.autocompleteFactory = factory;
-exports.Autocomplete = Autocomplete;
\ No newline at end of file
diff --git a/lib/autocomplete/_config.scss b/lib/autocomplete/_config.scss
deleted file mode 100644
index e0280558e..000000000
--- a/lib/autocomplete/_config.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-$autocomplete-color-primary-contrast: $color-primary-contrast !default;
-$autocomplete-color-primary: $color-primary !default;
-$autocomplete-overflow-max-height: 45vh !default;
-$autocomplete-suggestion-active-background: $palette-grey-200 !default;
-$autocomplete-suggestion-padding: $unit !default;
-$autocomplete-suggestions-background: $color-white !default;
-$autocomplete-value-margin: $unit * .25 $unit * .5 $unit * .25 0 !default;
diff --git a/lib/autocomplete/index.d.ts b/lib/autocomplete/index.d.ts
deleted file mode 100644
index b2c560d0f..000000000
--- a/lib/autocomplete/index.d.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface AutocompleteTheme {
-  /**
-   * Used for a suggestion when it's active.
-   */
-  active?: string;
-  /**
-   * Used for the root element.
-   */
-  autocomplete?: string;
-  /**
-   * Used when the input is focused.
-   */
-  focus?: string;
-  /**
-   * Used to style the Input component.
-   */
-  input?: string;
-  /**
-   * Used for the label.
-   */
-  label?: string;
-  /**
-   * Used to style each suggestion.
-   */
-  suggestion?: string;
-  /**
-   * Used to style the suggestions container.
-   */
-  suggestions?: string;
-  /**
-   * Used for the suggestions when it's opening to the top.
-   */
-  up?: string;
-  /**
-   * Classname used for a single value.
-   */
-  value?: string;
-  /**
-   * Classname used for the values container.
-   */
-  values?: string;
-}
-
-interface AutocompleteProps extends ReactToolbox.Props {
-  /**
-   * Determines the opening direction. It can be auto, up or down.
-   * @default auto
-   */
-  direction?: "auto" | "up" | "down";
-  /**
-   * If true, component will be disabled.
-   */
-  disabled?: boolean;
-  /**
-   * Sets the error string for the internal input element.
-   * @default false
-   */
-  error?: string;
-  /**
-   * The text string to use for the floating label element.
-   */
-  label?: string;
-  /**
-   * If true, component can hold multiple values.
-   */
-  multiple?: boolean;
-  /**
-   * Callback function that is fired when the components's value changes.
-   * @default auto
-   */
-  onChange?: Function;
-  /**
-   * Determines if the selected list is shown above or below input. It can be above or below.
-   * @default above
-   */
-  selectedPosition?: "above" | "below";
-  /**
-   * If true, the list of suggestions will not be filtered when a value is selected.
-   * @default false
-   */
-  showSuggestionsWhenValueIsSet?: boolean;
-  /**
-   * Object of key/values or array representing all items suggested.
-   */
-  source?: any;
-  /**
-   * Determines how suggestions are supplied.
-   * @default start
-   */
-  suggestionMatch?: "start" | "anywhere" | "word";
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: AutocompleteTheme;
-  /**
-   * Value or array of values currently selected component.
-   */
-  value?: any;
-}
-
-export class Autocomplete extends React.Component<AutocompleteProps, {}> { }
-
-export default Autocomplete;
diff --git a/lib/autocomplete/index.js b/lib/autocomplete/index.js
deleted file mode 100644
index 6720adeae..000000000
--- a/lib/autocomplete/index.js
+++ /dev/null
@@ -1,32 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Autocomplete = undefined;
-
-var _identifiers = require('../identifiers.js');
-
-var _reactCssThemr = require('react-css-themr');
-
-var _Autocomplete = require('./Autocomplete.js');
-
-var _chip = require('../chip');
-
-var _chip2 = _interopRequireDefault(_chip);
-
-var _input = require('../input');
-
-var _input2 = _interopRequireDefault(_input);
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var Autocomplete = (0, _Autocomplete.autocompleteFactory)(_chip2.default, _input2.default);
-var ThemedAutocomplete = (0, _reactCssThemr.themr)(_identifiers.AUTOCOMPLETE, _theme2.default)(Autocomplete);
-
-exports.default = ThemedAutocomplete;
-exports.Autocomplete = ThemedAutocomplete;
\ No newline at end of file
diff --git a/lib/autocomplete/theme.scss b/lib/autocomplete/theme.scss
deleted file mode 100644
index f12136579..000000000
--- a/lib/autocomplete/theme.scss
+++ /dev/null
@@ -1,76 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-@import "http://github.com/input/config";
-
-.autocomplete {
-  position: relative;
-  padding: $unit 0;
-  &.focus {
-    .suggestions {
-      max-height: $autocomplete-overflow-max-height;
-      visibility: visible;
-      box-shadow: $zdepth-shadow-1;
-    }
-  }
-}
-
-.values {
-  flex-direction: row;
-  flex-wrap: wrap;
-  padding-bottom: $unit / 2;
-}
-
-.value {
-  margin: $autocomplete-value-margin;
-}
-
-.suggestions {
-  @include no-webkit-scrollbar;
-  position: absolute;
-  z-index: $z-index-high;
-  width: 100%;
-  max-height: 0;
-  overflow-x: hidden;
-  overflow-y: auto;
-  visibility: hidden;
-  background-color: $autocomplete-suggestions-background;
-  transition-timing-function: $animation-curve-default;
-  transition-duration: $animation-duration;
-  transition-property: max-height, box-shadow;
-  &:not(.up) {
-    margin-top: - $input-padding;
-  }
-  &.up {
-    bottom: 0;
-  }
-}
-
-.suggestion {
-  padding: $autocomplete-suggestion-padding;
-  font-size: $input-field-font-size;
-  cursor: pointer;
-  &.active {
-    background-color: $autocomplete-suggestion-active-background;
-  }
-}
-
-.input {
-  position: relative;
-  &:after {
-    $size: ($input-field-height / 7);
-    $border: $size solid transparent;
-    position: absolute;
-    top: 50%;
-    right: $input-chevron-offset;
-    width: 0;
-    height: 0;
-    pointer-events: none;
-    content: "";
-    border-top: $size solid $input-text-bottom-border-color;
-    border-right: $border;
-    border-left: $border;
-    transition: transform $animation-duration $animation-curve-default;
-  }
-}
diff --git a/lib/avatar/Avatar.js b/lib/avatar/Avatar.js
deleted file mode 100644
index 368df2089..000000000
--- a/lib/avatar/Avatar.js
+++ /dev/null
@@ -1,80 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Avatar = exports.avatarFactory = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _FontIcon = require('../font_icon/FontIcon.js');
-
-var _FontIcon2 = _interopRequireDefault(_FontIcon);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-var factory = function factory(FontIcon) {
-  var Avatar = function Avatar(_ref) {
-    var children = _ref.children,
-        className = _ref.className,
-        cover = _ref.cover,
-        icon = _ref.icon,
-        image = _ref.image,
-        theme = _ref.theme,
-        title = _ref.title,
-        other = _objectWithoutProperties(_ref, ['children', 'className', 'cover', 'icon', 'image', 'theme', 'title']);
-
-    return _react2.default.createElement(
-      'div',
-      _extends({ 'data-react-toolbox': 'avatar', className: (0, _classnames2.default)(theme.avatar, className) }, other),
-      children,
-      cover && typeof image === 'string' && _react2.default.createElement('span', { alt: title, className: theme.image, style: { backgroundImage: 'url('http://github.com/+%20image%20+')' } }),
-      !cover && (typeof image === 'string' ? _react2.default.createElement('img', { alt: title, className: theme.image, src: image, title: title }) : image),
-      typeof icon === 'string' ? _react2.default.createElement(FontIcon, { className: theme.letter, value: icon }) : icon,
-      title ? _react2.default.createElement(
-        'span',
-        { className: theme.letter },
-        title[0]
-      ) : null
-    );
-  };
-
-  Avatar.propTypes = {
-    children: _react.PropTypes.node,
-    className: _react.PropTypes.string,
-    cover: _react.PropTypes.bool,
-    icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-    image: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-    theme: _react.PropTypes.shape({
-      avatar: _react.PropTypes.string,
-      image: _react.PropTypes.string,
-      letter: _react.PropTypes.string
-    }),
-    title: _react.PropTypes.string
-  };
-
-  Avatar.defaultProps = {
-    cover: false
-  };
-
-  return Avatar;
-};
-
-var Avatar = factory(_FontIcon2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.AVATAR)(Avatar);
-exports.avatarFactory = factory;
-exports.Avatar = Avatar;
\ No newline at end of file
diff --git a/lib/avatar/_config.scss b/lib/avatar/_config.scss
deleted file mode 100644
index a2922fb60..000000000
--- a/lib/avatar/_config.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-$avatar-color: $color-white !default;
-$avatar-background: $palette-grey-500 !default;
-$avatar-size: 4 * $unit !default;
-$avatar-font-size: 2.4 * $unit !default;
diff --git a/lib/avatar/index.d.ts b/lib/avatar/index.d.ts
deleted file mode 100644
index c2ddc6950..000000000
--- a/lib/avatar/index.d.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface AvatarTheme {
-  /**
-   * Used for the root class of the element.
-   */
-  avatar?: string;
-  /**
-   * Added to the root element when the component has image.
-   */
-  image?: string;
-  /**
-   * Used for the root element if the component shows the letter.
-   */
-  letter?: string;
-}
-
-interface AvatarProps extends ReactToolbox.Props {
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * Set to true if your image is not squared so it will be used as a cover for the element.
-   */
-  cover?: boolean;
-  /**
-   * A key to identify an Icon from Material Design Icons or a custom Icon Element.
-   */
-  icon?: React.ReactNode | string;
-  /**
-   * An image source or an image element.
-   */
-  image?: React.ReactNode | string;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: AvatarTheme;
-  /**
-   * A title for the image. If no image is provided, the first letter will be displayed as the avatar.
-   */
-  title?: string;
-}
-
-export class Avatar extends React.Component<AvatarProps, {}> { }
-
-export default Avatar;
diff --git a/lib/avatar/index.js b/lib/avatar/index.js
deleted file mode 100644
index 247561ab6..000000000
--- a/lib/avatar/index.js
+++ /dev/null
@@ -1,28 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Avatar = undefined;
-
-var _identifiers = require('../identifiers.js');
-
-var _reactCssThemr = require('react-css-themr');
-
-var _Avatar = require('./Avatar.js');
-
-var _FontIcon = require('../font_icon/FontIcon.js');
-
-var _FontIcon2 = _interopRequireDefault(_FontIcon);
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var Avatar = (0, _Avatar.avatarFactory)(_FontIcon2.default);
-var ThemedAvatar = (0, _reactCssThemr.themr)(_identifiers.AVATAR, _theme2.default)(Avatar);
-
-exports.default = ThemedAvatar;
-exports.Avatar = ThemedAvatar;
\ No newline at end of file
diff --git a/lib/avatar/theme.scss b/lib/avatar/theme.scss
deleted file mode 100644
index 9514782ae..000000000
--- a/lib/avatar/theme.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.avatar {
-  position: relative;
-  display: inline-block;
-  width: $avatar-size;
-  height: $avatar-size;
-  overflow: hidden;
-  font-size: $avatar-font-size;
-  color: $avatar-color;
-  text-align: center;
-  vertical-align: middle;
-  background-color: $avatar-background;
-  border-radius: 50%;
-  > svg {
-    width: 1em;
-    height: $avatar-size;
-    fill: currentColor;
-  }
-  > img {
-    max-width: 100%;
-    height: auto;
-  }
-}
-
-.image {
-  position: absolute;
-  display: block;
-  width: 100%;
-  height: 100%;
-  background-color: transparent;
-  background-position: center;
-  background-size: cover;
-  border-radius: 50%;
-}
-
-.letter {
-  display: block;
-  width: 100%;
-  line-height: $avatar-size;
-}
diff --git a/lib/button/BrowseButton.js b/lib/button/BrowseButton.js
deleted file mode 100644
index d88381401..000000000
--- a/lib/button/BrowseButton.js
+++ /dev/null
@@ -1,168 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.BrowseButton = exports.browseButtonFactory = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _FontIcon = require('../font_icon/FontIcon.js');
-
-var _FontIcon2 = _interopRequireDefault(_FontIcon);
-
-var _Ripple = require('../ripple/Ripple.js');
-
-var _Ripple2 = _interopRequireDefault(_Ripple);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(ripple, FontIcon) {
-  var SimpleBrowseButton = function (_Component) {
-    _inherits(SimpleBrowseButton, _Component);
-
-    function SimpleBrowseButton() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, SimpleBrowseButton);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = SimpleBrowseButton.__proto__ || Object.getPrototypeOf(SimpleBrowseButton)).call.apply(_ref, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
-        _this.refs.label.blur();
-        if (_this.props.onMouseUp) _this.props.onMouseUp(event);
-      }, _this.handleMouseLeave = function (event) {
-        _this.refs.label.blur();
-        if (_this.props.onMouseLeave) _this.props.onMouseLeave(event);
-      }, _this.handleFileChange = function (event) {
-        if (_this.props.onChange) _this.props.onChange(event);
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(SimpleBrowseButton, [{
-      key: 'render',
-      value: function render() {
-        var _classnames;
-
-        var _props = this.props,
-            accent = _props.accent,
-            children = _props.children,
-            className = _props.className,
-            flat = _props.flat,
-            floating = _props.floating,
-            icon = _props.icon,
-            inverse = _props.inverse,
-            label = _props.label,
-            mini = _props.mini,
-            neutral = _props.neutral,
-            primary = _props.primary,
-            theme = _props.theme,
-            raised = _props.raised,
-            others = _objectWithoutProperties(_props, ['accent', 'children', 'className', 'flat', 'floating', 'icon', 'inverse', 'label', 'mini', 'neutral', 'primary', 'theme', 'raised']);
-
-        var element = 'label';
-        var level = primary ? 'primary' : accent ? 'accent' : 'neutral';
-        var shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : 'flat';
-
-        var classes = (0, _classnames3.default)(theme.button, [theme[shape]], (_classnames = {}, _defineProperty(_classnames, theme[level], neutral), _defineProperty(_classnames, theme.mini, mini), _defineProperty(_classnames, theme.inverse, inverse), _classnames), className);
-
-        var props = _extends({}, others, {
-          ref: 'label',
-          className: classes,
-          disabled: this.props.disabled,
-          onMouseUp: this.handleMouseUp,
-          onMouseLeave: this.handleMouseLeave,
-          'data-react-toolbox': 'label'
-        });
-
-        return _react2.default.createElement(element, props, icon ? _react2.default.createElement(FontIcon, { className: theme.icon, value: icon }) : null, _react2.default.createElement(
-          'span',
-          null,
-          label
-        ), _react2.default.createElement('input', { className: classes, type: 'file', onChange: this.handleFileChange }), children);
-      }
-    }]);
-
-    return SimpleBrowseButton;
-  }(_react.Component);
-
-  SimpleBrowseButton.propTypes = {
-    accent: _react.PropTypes.bool,
-    children: _react.PropTypes.node,
-    className: _react.PropTypes.string,
-    disabled: _react.PropTypes.bool,
-    flat: _react.PropTypes.bool,
-    floating: _react.PropTypes.bool,
-    icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-    inverse: _react.PropTypes.bool,
-    label: _react.PropTypes.string,
-    mini: _react.PropTypes.bool,
-    neutral: _react.PropTypes.bool,
-    onChange: _react.PropTypes.func,
-    onMouseLeave: _react.PropTypes.func,
-    onMouseUp: _react.PropTypes.func,
-    primary: _react.PropTypes.bool,
-    raised: _react.PropTypes.bool,
-    theme: _react.PropTypes.shape({
-      accent: _react.PropTypes.string,
-      button: _react.PropTypes.string,
-      flat: _react.PropTypes.string,
-      floating: _react.PropTypes.string,
-      icon: _react.PropTypes.string,
-      inverse: _react.PropTypes.string,
-      mini: _react.PropTypes.string,
-      neutral: _react.PropTypes.string,
-      primary: _react.PropTypes.string,
-      raised: _react.PropTypes.string,
-      rippleWrapper: _react.PropTypes.string,
-      toggle: _react.PropTypes.string
-    }),
-    type: _react.PropTypes.string
-  };
-  SimpleBrowseButton.defaultProps = {
-    accent: false,
-    className: '',
-    flat: false,
-    floating: false,
-    mini: false,
-    neutral: true,
-    primary: false,
-    raised: false
-  };
-
-
-  return ripple(SimpleBrowseButton);
-};
-
-var BrowseButton = factory((0, _Ripple2.default)({ centered: false }), _FontIcon2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.BUTTON)(BrowseButton);
-exports.browseButtonFactory = factory;
-exports.BrowseButton = BrowseButton;
\ No newline at end of file
diff --git a/lib/button/Button.js b/lib/button/Button.js
deleted file mode 100644
index 7f72d880b..000000000
--- a/lib/button/Button.js
+++ /dev/null
@@ -1,164 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Button = exports.buttonFactory = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _FontIcon = require('../font_icon/FontIcon.js');
-
-var _FontIcon2 = _interopRequireDefault(_FontIcon);
-
-var _Ripple = require('../ripple/Ripple.js');
-
-var _Ripple2 = _interopRequireDefault(_Ripple);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(ripple, FontIcon) {
-  var Button = function (_Component) {
-    _inherits(Button, _Component);
-
-    function Button() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, Button);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Button.__proto__ || Object.getPrototypeOf(Button)).call.apply(_ref, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
-        _this.refs.button.blur();
-        if (_this.props.onMouseUp) _this.props.onMouseUp(event);
-      }, _this.handleMouseLeave = function (event) {
-        _this.refs.button.blur();
-        if (_this.props.onMouseLeave) _this.props.onMouseLeave(event);
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(Button, [{
-      key: 'render',
-      value: function render() {
-        var _classnames;
-
-        var _props = this.props,
-            accent = _props.accent,
-            children = _props.children,
-            className = _props.className,
-            flat = _props.flat,
-            floating = _props.floating,
-            href = _props.href,
-            icon = _props.icon,
-            inverse = _props.inverse,
-            label = _props.label,
-            mini = _props.mini,
-            neutral = _props.neutral,
-            primary = _props.primary,
-            theme = _props.theme,
-            raised = _props.raised,
-            others = _objectWithoutProperties(_props, ['accent', 'children', 'className', 'flat', 'floating', 'href', 'icon', 'inverse', 'label', 'mini', 'neutral', 'primary', 'theme', 'raised']);
-
-        var element = href ? 'a' : 'button';
-        var level = primary ? 'primary' : accent ? 'accent' : 'neutral';
-        var shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : 'flat';
-
-        var classes = (0, _classnames3.default)(theme.button, [theme[shape]], (_classnames = {}, _defineProperty(_classnames, theme[level], neutral), _defineProperty(_classnames, theme.mini, mini), _defineProperty(_classnames, theme.inverse, inverse), _classnames), className);
-
-        var props = _extends({}, others, {
-          href: href,
-          ref: 'button',
-          className: classes,
-          disabled: this.props.disabled,
-          onMouseUp: this.handleMouseUp,
-          onMouseLeave: this.handleMouseLeave,
-          'data-react-toolbox': 'button'
-        });
-
-        return _react2.default.createElement(element, props, icon ? _react2.default.createElement(FontIcon, { className: theme.icon, value: icon }) : null, label, children);
-      }
-    }]);
-
-    return Button;
-  }(_react.Component);
-
-  Button.propTypes = {
-    accent: _react.PropTypes.bool,
-    children: _react.PropTypes.node,
-    className: _react.PropTypes.string,
-    disabled: _react.PropTypes.bool,
-    flat: _react.PropTypes.bool,
-    floating: _react.PropTypes.bool,
-    href: _react.PropTypes.string,
-    icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-    inverse: _react.PropTypes.bool,
-    label: _react.PropTypes.string,
-    mini: _react.PropTypes.bool,
-    neutral: _react.PropTypes.bool,
-    onMouseLeave: _react.PropTypes.func,
-    onMouseUp: _react.PropTypes.func,
-    primary: _react.PropTypes.bool,
-    raised: _react.PropTypes.bool,
-    theme: _react.PropTypes.shape({
-      accent: _react.PropTypes.string,
-      button: _react.PropTypes.string,
-      flat: _react.PropTypes.string,
-      floating: _react.PropTypes.string,
-      icon: _react.PropTypes.string,
-      inverse: _react.PropTypes.string,
-      mini: _react.PropTypes.string,
-      neutral: _react.PropTypes.string,
-      primary: _react.PropTypes.string,
-      raised: _react.PropTypes.string,
-      rippleWrapper: _react.PropTypes.string,
-      toggle: _react.PropTypes.string
-    }),
-    type: _react.PropTypes.string
-  };
-  Button.defaultProps = {
-    accent: false,
-    className: '',
-    flat: false,
-    floating: false,
-    mini: false,
-    neutral: true,
-    primary: false,
-    raised: false
-  };
-
-
-  return ripple(Button);
-};
-
-var Button = factory((0, _Ripple2.default)({ centered: false }), _FontIcon2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.BUTTON)(Button);
-exports.buttonFactory = factory;
-exports.Button = Button;
\ No newline at end of file
diff --git a/lib/button/IconButton.js b/lib/button/IconButton.js
deleted file mode 100644
index 81bdd19cb..000000000
--- a/lib/button/IconButton.js
+++ /dev/null
@@ -1,135 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.IconButton = exports.iconButtonFactory = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _FontIcon = require('../font_icon/FontIcon.js');
-
-var _FontIcon2 = _interopRequireDefault(_FontIcon);
-
-var _Ripple = require('../ripple/Ripple.js');
-
-var _Ripple2 = _interopRequireDefault(_Ripple);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(ripple, FontIcon) {
-  var IconButton = function (_Component) {
-    _inherits(IconButton, _Component);
-
-    function IconButton() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, IconButton);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = IconButton.__proto__ || Object.getPrototypeOf(IconButton)).call.apply(_ref, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
-        _this.refs.button.blur();
-        if (_this.props.onMouseUp) _this.props.onMouseUp(event);
-      }, _this.handleMouseLeave = function (event) {
-        _this.refs.button.blur();
-        if (_this.props.onMouseLeave) _this.props.onMouseLeave(event);
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(IconButton, [{
-      key: 'render',
-      value: function render() {
-        var _classnames;
-
-        var _props = this.props,
-            accent = _props.accent,
-            children = _props.children,
-            className = _props.className,
-            href = _props.href,
-            icon = _props.icon,
-            inverse = _props.inverse,
-            neutral = _props.neutral,
-            primary = _props.primary,
-            theme = _props.theme,
-            others = _objectWithoutProperties(_props, ['accent', 'children', 'className', 'href', 'icon', 'inverse', 'neutral', 'primary', 'theme']);
-
-        var element = href ? 'a' : 'button';
-        var level = primary ? 'primary' : accent ? 'accent' : 'neutral';
-        var classes = (0, _classnames3.default)([theme.toggle], (_classnames = {}, _defineProperty(_classnames, theme[level], neutral), _defineProperty(_classnames, theme.inverse, inverse), _classnames), className);
-
-        var props = _extends({}, others, {
-          href: href,
-          ref: 'button',
-          className: classes,
-          disabled: this.props.disabled,
-          onMouseUp: this.handleMouseUp,
-          onMouseLeave: this.handleMouseLeave,
-          'data-react-toolbox': 'button'
-        });
-
-        return _react2.default.createElement(element, props, icon ? typeof icon === 'string' ? _react2.default.createElement(FontIcon, { className: theme.icon, value: icon }) : icon : null, children);
-      }
-    }]);
-
-    return IconButton;
-  }(_react.Component);
-
-  IconButton.propTypes = {
-    accent: _react.PropTypes.bool,
-    children: _react.PropTypes.node,
-    className: _react.PropTypes.string,
-    disabled: _react.PropTypes.bool,
-    href: _react.PropTypes.string,
-    icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-    inverse: _react.PropTypes.bool,
-    neutral: _react.PropTypes.bool,
-    onMouseLeave: _react.PropTypes.func,
-    onMouseUp: _react.PropTypes.func,
-    primary: _react.PropTypes.bool,
-    theme: _react.PropTypes.object,
-    type: _react.PropTypes.string
-  };
-  IconButton.defaultProps = {
-    accent: false,
-    className: '',
-    neutral: true,
-    primary: false
-  };
-
-
-  return ripple(IconButton);
-};
-
-var IconButton = factory((0, _Ripple2.default)({ centered: true }), _FontIcon2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.BUTTON)(IconButton);
-exports.iconButtonFactory = factory;
-exports.IconButton = IconButton;
\ No newline at end of file
diff --git a/lib/button/__test__/index.spec.js b/lib/button/__test__/index.spec.js
deleted file mode 100644
index 67d402c74..000000000
--- a/lib/button/__test__/index.spec.js
+++ /dev/null
@@ -1,66 +0,0 @@
-'use strict';
-
-var _expect = require('expect');
-
-var _expect2 = _interopRequireDefault(_expect);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactDom = require('react-dom');
-
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
-var _reactAddonsTestUtils = require('react-addons-test-utils');
-
-var _reactAddonsTestUtils2 = _interopRequireDefault(_reactAddonsTestUtils);
-
-var _theme = require('../theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-var _Button = require('../Button');
-
-var _Button2 = _interopRequireDefault(_Button);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var getRenderedClassName = function getRenderedClassName(tree, Component) {
-  var rendered = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, Component);
-  return _reactDom2.default.findDOMNode(rendered).getAttribute('class');
-};
-
-describe('Button', function () {
-  describe('#render', function () {
-    it('uses flat and neutral styles by default', function () {
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Button2.default, { theme: _theme2.default }));
-      var className = getRenderedClassName(tree, _Button.Button);
-      (0, _expect2.default)(className).toContain(_theme2.default.flat);
-      (0, _expect2.default)(className).toContain(_theme2.default.neutral);
-    });
-
-    it('renders accent button with accent style', function () {
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Button2.default, { accent: true, theme: _theme2.default }));
-      var className = getRenderedClassName(tree, _Button.Button);
-      (0, _expect2.default)(className).toContain(_theme2.default.flat);
-      (0, _expect2.default)(className).toContain(_theme2.default.accent);
-    });
-
-    it('renders mini button with mini style', function () {
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Button2.default, { floating: true, mini: true, theme: _theme2.default }));
-      var className = getRenderedClassName(tree, _Button.Button);
-      (0, _expect2.default)(className).toContain(_theme2.default.floating);
-      (0, _expect2.default)(className).toContain(_theme2.default.neutral);
-      (0, _expect2.default)(className).toContain(_theme2.default.mini);
-    });
-
-    it('renders mini accented button with both styles', function () {
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Button2.default, { accent: true, mini: true, theme: _theme2.default }));
-      var className = getRenderedClassName(tree, _Button.Button);
-      (0, _expect2.default)(className).toContain(_theme2.default.flat);
-      (0, _expect2.default)(className).toContain(_theme2.default.accent);
-      (0, _expect2.default)(className).toContain(_theme2.default.mini);
-    });
-  });
-});
\ No newline at end of file
diff --git a/lib/button/_config.scss b/lib/button/_config.scss
deleted file mode 100644
index 4a37d8b0c..000000000
--- a/lib/button/_config.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-$button-neutral-color: $color-white !default;
-$button-neutral-color-contrast: $palette-grey-900 !default;
-$button-neutral-color-hover: rgba($palette-grey-900, .2) !default;
-$button-primary-color-contrast: $color-primary-contrast !default;
-$button-primary-color-hover: rgba($color-primary, .2) !default;
-$button-primary-color: $color-primary !default;
-$button-accent-color-contrast: $color-primary-contrast !default;
-$button-accent-color-hover: rgba($color-accent, .2) !default;
-$button-accent-color: $color-accent !default;
-$button-disabled-text-color: rgba($color-black, 0.26) !default;
-$button-disabled-background-color: rgba($color-black, 0.12) !default;
-$button-border-radius: 0.2 * $unit !default;
-$button-floating-font-size: $unit * 2.4 !default;
-$button-floating-height: $unit * 5.6 !default;
-$button-floating-mini-height: $unit * 4 !default;
-$button-floating-mini-font-size: $button-floating-mini-height / 2.25 !default;
-$button-height: $unit * 3.6 !default;
-$button-squared-icon-margin: $unit * .6 !default;
-$button-squared-min-width: 9 * $unit !default;
-$button-squared-padding: 0 $unit * 1.2 !default;
-$button-toggle-font-size: $unit * 2 !default;
diff --git a/lib/button/_mixins.scss b/lib/button/_mixins.scss
deleted file mode 100644
index 305be037a..000000000
--- a/lib/button/_mixins.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@mixin btn-colors($name, $color, $background, $hover) {
-  .#{$name}:not([disabled]) {
-    &.raised, &.floating {
-      color: $color;
-      background: $background;
-    }
-    &.flat, &.toggle {
-      color: $background;
-      &:focus:not(:active) {
-        background: $hover;
-      }
-    }
-    &.flat:hover {
-      background: $hover;
-    }
-  }
-}
diff --git a/lib/button/index.d.ts b/lib/button/index.d.ts
deleted file mode 100644
index e713f70aa..000000000
--- a/lib/button/index.d.ts
+++ /dev/null
@@ -1,337 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface ButtonTheme {
-  /**
-   * Used for the root in case button is accent.
-   */
-  accent?: string;
-  /**
-   * Used for the root element in any button.
-   */
-  button?: string;
-  /**
-   * Used when the button is flat for the root element.
-   */
-  flat?: string;
-  /**
-   * Used when the button is floating for the root element.
-   */
-  floating?: string;
-  /**
-   * For the icon inside a button.
-   */
-  icon?: string;
-  /**
-   * Used when colors are inverted.
-   */
-  inverse?: string;
-  /**
-   * Used for mini floating buttons.
-   */
-  mini?: string;
-  /**
-   * Used for neutral colored buttons.
-   */
-  neutral?: string;
-  /**
-   * Used for primary buttons when button is primary.
-   */
-  primary?: string;
-  /**
-   * Used when the button is raised for root element.
-   */
-  raised?: string;
-  /**
-   * Used for the ripple element.
-   */
-  rippleWrapper?: string;
-  /**
-   * Used for toggle buttons in the root element.
-   */
-  toggle?: string;
-}
-
-interface ButtonProps extends ReactToolbox.Props {
-  /**
-   * Indicates if the button should have accent color.
-   * @default false
-   */
-  accent?: boolean;
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * If true, component will be disabled.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * If true, the button will have a flat look.
-   * @default false
-   */
-  flat?: boolean;
-  /**
-   * If true, the button will have a floating look.
-   * @default false
-   */
-  floating?: boolean;
-  /**
-   * Creates a link for the button.
-   */
-  href?: string;
-  /**
-   * Value of the icon (See Font Icon Component).
-   */
-  icon?: React.ReactNode | string;
-  /**
-   * If true, the neutral colors are inverted. Useful to put a button over a dark background.
-   */
-  inverse?: boolean;
-  /**
-   * The text string to use for the name of the button.
-   */
-  label?: string;
-  /**
-   * To be used with floating button. If true, the button will be smaller.
-   * @default false
-   */
-  mini?: boolean;
-  /**
-   * Set it to false if you don't want the neutral styles to be included.
-   * @default true
-   */
-  neutral?: boolean;
-  /**
-   * Indicates if the button should have primary color.
-   * @default false
-   */
-  primary?: boolean;
-  /**
-   * If true, the button will have a raised look.
-   * @default false
-   */
-  raised?: boolean;
-  /**
-   * If true, component will have a ripple effect on click.
-   * @default true
-   */
-  ripple?: boolean;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: ButtonTheme;
-}
-
-export class Button extends React.Component<ButtonProps, {}> { }
-
-export interface IconButtonTheme {
-  /**
-   * Used for the root in case button is accent.
-   */
-  accent?: string;
-  /**
-   * Used for the root element in any button.
-   */
-  button?: string;
-  /**
-   * For the icon inside a button.
-   */
-  icon?: string;
-  /**
-   * Used when colors are inverted.
-   */
-  inverse?: string;
-  /**
-   * Used for neutral colored buttons.
-   */
-  neutral?: string;
-  /**
-   * Used for primary buttons when button is primary.
-   */
-  primary?: string;
-  /**
-   * Used for the ripple element.
-   */
-  rippleWrapper?: string;
-  /**
-   * Used for toggle buttons in the root element.
-   */
-  toggle?: string;
-}
-
-interface IconButtonProps extends ReactToolbox.Props {
-  /**
-   * Indicates if the button should have accent color.
-   * @default false
-   */
-  accent?: boolean;
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * If true, component will be disabled.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * Creates a link for the button.
-   */
-  href?: string;
-  /**
-   * Value of the icon (See Font Icon Component).
-   */
-  icon?: React.ReactNode | string;
-  /**
-   * If true, the neutral colors are inverted. Useful to put a button over a dark background.
-   */
-  inverse?: boolean;
-  /**
-   * Set it to false if you don't want the neutral styles to be included.
-   * @default true
-   */
-  neutral?: boolean;
-  /**
-   * Indicates if the button should have primary color.
-   * @default false
-   */
-  primary?: boolean;
-  /**
-   * If true, component will have a ripple effect on click.
-   * @default true
-   */
-  ripple?: boolean;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: IconButtonTheme;
-}
-
-export class IconButton extends React.Component<IconButtonProps, {}> { }
-
-export interface BrowseButtonTheme {
-  /**
-   * Used for the root in case button is accent.
-   */
-  accent?: string;
-  /**
-   * Used for the root element in any button.
-   */
-  button?: string;
-  /**
-   * Used when the button is flat for the root element.
-   */
-  flat?: string;
-  /**
-   * Used when the button is floating for the root element.
-   */
-  floating?: string;
-  /**
-   * For the icon inside a button.
-   */
-  icon?: string;
-  /**
-   * Used when colors are inverted.
-   */
-  inverse?: string;
-  /**
-   * Used for mini floating buttons.
-   */
-  mini?: string;
-  /**
-   * Used for neutral colored buttons.
-   */
-  neutral?: string;
-  /**
-   * Used for primary buttons when button is primary.
-   */
-  primary?: string;
-  /**
-   * Used when the button is raised for root element.
-   */
-  raised?: string;
-  /**
-   * Used for the ripple element.
-   */
-  rippleWrapper?: string;
-  /**
-   * Used for toggle buttons in the root element.
-   */
-  toggle?: string;
-}
-
-interface BrowseButtonProps extends ReactToolbox.Props {
-  /**
-   * Indicates if the button should have accent color.
-   * @default false
-   */
-  accent?: boolean;
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * If true, component will be disabled.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * If true, the button will have a flat look.
-   * @default false
-   */
-  flat?: boolean;
-  /**
-   * If true, the button will have a floating look.
-   * @default false
-   */
-  floating?: boolean;
-  /**
-   * Creates a link for the button.
-   */
-  href?: string;
-  /**
-   * Value of the icon (See Font Icon Component).
-   */
-  icon?: React.ReactNode | string;
-  /**
-   * If true, the neutral colors are inverted. Useful to put a button over a dark background.
-   */
-  inverse?: boolean;
-  /**
-   * The text string to use for the name of the button.
-   */
-  label?: string;
-  /**
-   * To be used with floating button. If true, the button will be smaller.
-   * @default false
-   */
-  mini?: boolean;
-  /**
-   * Set it to false if you don't want the neutral styles to be included.
-   * @default true
-   */
-  neutral?: boolean;
-  /**
-   * Indicates if the button should have primary color.
-   * @default false
-   */
-  primary?: boolean;
-  /**
-   * If true, the button will have a raised look.
-   * @default false
-   */
-  raised?: boolean;
-  /**
-   * If true, component will have a ripple effect on click.
-   * @default true
-   */
-  ripple?: boolean;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: BrowseButtonTheme;
-}
-
-export class BrowseButton extends React.Component<BrowseButtonProps, {}> { }
diff --git a/lib/button/index.js b/lib/button/index.js
deleted file mode 100644
index fe05c0beb..000000000
--- a/lib/button/index.js
+++ /dev/null
@@ -1,42 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.BrowseButton = exports.IconButton = exports.Button = undefined;
-
-var _identifiers = require('../identifiers.js');
-
-var _reactCssThemr = require('react-css-themr');
-
-var _Button = require('./Button.js');
-
-var _BrowseButton = require('./BrowseButton.js');
-
-var _IconButton = require('./IconButton.js');
-
-var _FontIcon = require('../font_icon/FontIcon.js');
-
-var _FontIcon2 = _interopRequireDefault(_FontIcon);
-
-var _ripple = require('../ripple');
-
-var _ripple2 = _interopRequireDefault(_ripple);
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var Button = (0, _Button.buttonFactory)((0, _ripple2.default)({ centered: false }), _FontIcon2.default);
-var IconButton = (0, _IconButton.iconButtonFactory)((0, _ripple2.default)({ centered: true }), _FontIcon2.default);
-var BrowseButton = (0, _BrowseButton.browseButtonFactory)((0, _ripple2.default)({ centered: false }), _FontIcon2.default);
-var ThemedButton = (0, _reactCssThemr.themr)(_identifiers.BUTTON, _theme2.default)(Button);
-var ThemedIconButton = (0, _reactCssThemr.themr)(_identifiers.BUTTON, _theme2.default)(IconButton);
-var ThemedBrowseButton = (0, _reactCssThemr.themr)(_identifiers.BUTTON, _theme2.default)(BrowseButton);
-
-exports.default = ThemedButton;
-exports.Button = ThemedButton;
-exports.IconButton = ThemedIconButton;
-exports.BrowseButton = ThemedBrowseButton;
\ No newline at end of file
diff --git a/lib/button/theme.scss b/lib/button/theme.scss
deleted file mode 100644
index bceb0b29c..000000000
--- a/lib/button/theme.scss
+++ /dev/null
@@ -1,182 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-@import "http://github.com/mixins";
-
-.button {
-  position: relative;
-
-  > input {
-    position: absolute;
-    top: 0;
-    left:0;
-    z-index: 0;
-    width: 0.1px;
-    height: 0.1px;
-    padding: 0;
-    margin: 0;
-    overflow: hidden;
-    opacity: 0;
-  }
-}
-
-%button {
-  @include typo-button();
-  position: relative;
-  display: inline-block;
-  height: $button-height;
-  flex-direction: row;
-  align-content: center;
-  align-items: center;
-  justify-content: center;
-  line-height: $button-height;
-  text-align: center;
-  text-decoration: none;
-  white-space: nowrap;
-  cursor: pointer;
-  border: 0;
-  outline: none;
-  transition: box-shadow .2s $animation-curve-fast-out-linear-in, background-color .2s $animation-curve-default, color .2s $animation-curve-default;
-  &::-moz-focus-inner {
-    border: 0;
-  }
-  > span:not([data-react-toolbox="tooltip"]) {
-    display: inline-block;
-    line-height: $button-height;
-    vertical-align: top;
-  }
-  > svg {
-    display: inline-block;
-    width: 1em;
-    height: $button-height;
-    font-size: 120%;
-    vertical-align: top;
-    fill: currentColor;
-  }
-  > * {
-    pointer-events: none;
-  }
-  > .rippleWrapper {
-    overflow: hidden;
-  }
-  &[disabled] {
-    color: $button-disabled-text-color;
-    pointer-events: none;
-    cursor: auto;
-  }
-}
-
-%squared {
-  min-width: $button-squared-min-width;
-  padding: $button-squared-padding;
-  border-radius: $button-border-radius;
-  .icon {
-    margin-right: $button-squared-icon-margin;
-    font-size: 120%;
-    vertical-align: middle;
-  }
-  > svg {
-    margin-right: .5 * $unit;
-  }
-}
-
-%solid {
-  &[disabled] {
-    @include shadow-2dp();
-    background-color: $button-disabled-background-color;
-  }
-  &:active {
-    @include shadow-4dp();
-  }
-  &:focus:not(:active) {
-    @include focus-shadow();
-  }
-}
-
-.raised {
-  @extend %button;
-  @extend %squared;
-  @extend %solid;
-  @include shadow-2dp();
-}
-
-.flat {
-  @extend %button;
-  @extend %squared;
-  background: transparent;
-}
-
-.floating {
-  @extend %button;
-  @extend %solid;
-  width: $button-floating-height;
-  height: $button-floating-height;
-  font-size: $button-floating-font-size;
-  border-radius: 50%;
-  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);
-  .icon {
-    line-height: $button-floating-height;
-  }
-  > .rippleWrapper {
-    border-radius: 50%;
-  }
-  &.mini {
-    width: $button-floating-mini-height;
-    height: $button-floating-mini-height;
-    font-size: $button-floating-mini-font-size;
-    .icon {
-      line-height: $button-floating-mini-height;
-    }
-  }
-}
-
-.toggle {
-  @extend %button;
-  width: $button-height;
-  background: transparent;
-  border-radius: 50%;
-  > .icon, svg {
-    font-size: $button-toggle-font-size;
-    line-height: $button-height;
-    vertical-align: top;
-  }
-  > .rippleWrapper {
-    border-radius: 50%;
-  }
-}
-
-.neutral:not([disabled]) {
-  &.raised, &.floating {
-    color: $button-neutral-color-contrast;
-    background-color: $button-neutral-color;
-  }
-  &.flat, &.toggle {
-    color: $button-neutral-color-contrast;
-    &:focus:not(:active) {
-      background: $button-neutral-color-hover;
-    }
-  }
-  &.flat:hover {
-    background: $button-neutral-color-hover;
-  }
-
-  &.inverse {
-    &.raised, &.floating {
-      color: $button-neutral-color;
-      background-color: $button-neutral-color-contrast;
-    }
-    &.flat, &.toggle {
-      color: $button-neutral-color;
-      &:focus:not(:active) {
-        background: $button-neutral-color-hover;
-      }
-    }
-    &.flat:hover {
-      background: $button-neutral-color-hover;
-    }
-  }
-}
-
-@include btn-colors("primary", $button-primary-color-contrast, $button-primary-color, $button-primary-color-hover);
-@include btn-colors("accent", $button-accent-color-contrast, $button-accent-color, $button-accent-color-hover);
diff --git a/lib/card/Card.js b/lib/card/Card.js
deleted file mode 100644
index 3067f7475..000000000
--- a/lib/card/Card.js
+++ /dev/null
@@ -1,55 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Card = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _identifiers = require('../identifiers.js');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-var Card = function Card(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      raised = _ref.raised,
-      theme = _ref.theme,
-      other = _objectWithoutProperties(_ref, ['children', 'className', 'raised', 'theme']);
-
-  var classes = (0, _classnames3.default)(theme.card, _defineProperty({}, theme.raised, raised), className);
-
-  return _react2.default.createElement(
-    'div',
-    _extends({ 'data-react-toolbox': 'card', className: classes }, other),
-    children
-  );
-};
-
-Card.propTypes = {
-  children: _react.PropTypes.any,
-  className: _react.PropTypes.string,
-  raised: _react.PropTypes.bool,
-  theme: _react.PropTypes.shape({
-    card: _react.PropTypes.string,
-    raised: _react.PropTypes.string
-  })
-};
-
-exports.default = (0, _reactCssThemr.themr)(_identifiers.CARD)(Card);
-exports.Card = Card;
\ No newline at end of file
diff --git a/lib/card/CardActions.js b/lib/card/CardActions.js
deleted file mode 100644
index 5c4cb45c6..000000000
--- a/lib/card/CardActions.js
+++ /dev/null
@@ -1,48 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CardActions = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _identifiers = require('../identifiers.js');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-var CardActions = function CardActions(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      theme = _ref.theme,
-      other = _objectWithoutProperties(_ref, ['children', 'className', 'theme']);
-
-  return _react2.default.createElement(
-    'div',
-    _extends({ className: (0, _classnames2.default)(theme.cardActions, className) }, other),
-    children
-  );
-};
-
-CardActions.propTypes = {
-  children: _react.PropTypes.any,
-  className: _react.PropTypes.string,
-  theme: _react.PropTypes.shape({
-    cardActions: _react.PropTypes.string
-  })
-};
-
-exports.default = (0, _reactCssThemr.themr)(_identifiers.CARD)(CardActions);
-exports.CardActions = CardActions;
\ No newline at end of file
diff --git a/lib/card/CardMedia.js b/lib/card/CardMedia.js
deleted file mode 100644
index e0d86cc43..000000000
--- a/lib/card/CardMedia.js
+++ /dev/null
@@ -1,75 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CardMedia = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _classnames3 = require('classnames');
-
-var _classnames4 = _interopRequireDefault(_classnames3);
-
-var _identifiers = require('../identifiers.js');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-var CardMedia = function CardMedia(_ref) {
-  var aspectRatio = _ref.aspectRatio,
-      children = _ref.children,
-      className = _ref.className,
-      color = _ref.color,
-      contentOverlay = _ref.contentOverlay,
-      image = _ref.image,
-      theme = _ref.theme,
-      other = _objectWithoutProperties(_ref, ['aspectRatio', 'children', 'className', 'color', 'contentOverlay', 'image', 'theme']);
-
-  var classes = (0, _classnames4.default)(theme.cardMedia, _defineProperty({}, theme[aspectRatio], aspectRatio), className);
-
-  var innerClasses = (0, _classnames4.default)(theme.content, _defineProperty({}, theme.contentOverlay, contentOverlay));
-
-  var bgStyle = {
-    backgroundColor: color ? color : undefined,
-    backgroundImage: typeof image === 'string' ? 'url(http://github.com/''%20+%20image%20+%20'/')' : undefined
-  };
-
-  return _react2.default.createElement(
-    'div',
-    _extends({ style: bgStyle, className: classes }, other),
-    _react2.default.createElement(
-      'div',
-      { className: innerClasses },
-      children
-    )
-  );
-};
-
-CardMedia.propTypes = {
-  aspectRatio: _react.PropTypes.oneOf(['wide', 'square']),
-  children: _react.PropTypes.any,
-  className: _react.PropTypes.string,
-  color: _react.PropTypes.string,
-  contentOverlay: _react.PropTypes.bool,
-  image: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-  theme: _react.PropTypes.shape({
-    cardMedia: _react.PropTypes.string,
-    content: _react.PropTypes.string,
-    contentOverlay: _react.PropTypes.string,
-    square: _react.PropTypes.string,
-    wide: _react.PropTypes.string
-  })
-};
-
-exports.default = (0, _reactCssThemr.themr)(_identifiers.CARD)(CardMedia);
-exports.CardMedia = CardMedia;
\ No newline at end of file
diff --git a/lib/card/CardText.js b/lib/card/CardText.js
deleted file mode 100644
index b1ea09aea..000000000
--- a/lib/card/CardText.js
+++ /dev/null
@@ -1,52 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CardText = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _identifiers = require('../identifiers.js');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-var CardText = function CardText(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      theme = _ref.theme,
-      other = _objectWithoutProperties(_ref, ['children', 'className', 'theme']);
-
-  return _react2.default.createElement(
-    'div',
-    _extends({ className: (0, _classnames2.default)(theme.cardText, className) }, other),
-    typeof children === 'string' ? _react2.default.createElement(
-      'p',
-      null,
-      children
-    ) : children
-  );
-};
-
-CardText.propTypes = {
-  children: _react.PropTypes.any,
-  className: _react.PropTypes.string,
-  theme: _react.PropTypes.shape({
-    cardText: _react.PropTypes.string
-  })
-};
-
-exports.default = (0, _reactCssThemr.themr)(_identifiers.CARD)(CardText);
-exports.CardText = CardText;
\ No newline at end of file
diff --git a/lib/card/CardTitle.js b/lib/card/CardTitle.js
deleted file mode 100644
index a6d278073..000000000
--- a/lib/card/CardTitle.js
+++ /dev/null
@@ -1,93 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.cardTitleFactory = exports.CardTitle = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Avatar = require('../avatar/Avatar.js');
-
-var _Avatar2 = _interopRequireDefault(_Avatar);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-var factory = function factory(Avatar) {
-  var CardTitle = function CardTitle(_ref) {
-    var _classnames;
-
-    var avatar = _ref.avatar,
-        children = _ref.children,
-        className = _ref.className,
-        subtitle = _ref.subtitle,
-        theme = _ref.theme,
-        title = _ref.title,
-        other = _objectWithoutProperties(_ref, ['avatar', 'children', 'className', 'subtitle', 'theme', 'title']);
-
-    var classes = (0, _classnames3.default)(theme.cardTitle, (_classnames = {}, _defineProperty(_classnames, theme.small, avatar), _defineProperty(_classnames, theme.large, !avatar), _classnames), className);
-
-    return _react2.default.createElement(
-      'div',
-      _extends({ className: classes }, other),
-      typeof avatar === 'string' ? _react2.default.createElement(Avatar, { image: avatar, theme: theme }) : avatar,
-      _react2.default.createElement(
-        'div',
-        null,
-        title && _react2.default.createElement(
-          'h5',
-          { className: theme.title },
-          title
-        ),
-        children && typeof children === 'string' && _react2.default.createElement(
-          'h5',
-          { className: theme.title },
-          children
-        ),
-        subtitle && _react2.default.createElement(
-          'p',
-          { className: theme.subtitle },
-          subtitle
-        ),
-        children && typeof children !== 'string' && children
-      )
-    );
-  };
-
-  CardTitle.propTypes = {
-    avatar: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-    children: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element, _react.PropTypes.array]),
-    className: _react.PropTypes.string,
-    subtitle: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-    theme: _react.PropTypes.shape({
-      large: _react.PropTypes.string,
-      title: _react.PropTypes.string,
-      small: _react.PropTypes.string,
-      subtitle: _react.PropTypes.string
-    }),
-    title: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element])
-  };
-
-  return CardTitle;
-};
-
-var CardTitle = factory(_Avatar2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.CARD)(CardTitle);
-exports.CardTitle = CardTitle;
-exports.cardTitleFactory = factory;
\ No newline at end of file
diff --git a/lib/card/_config.scss b/lib/card/_config.scss
deleted file mode 100644
index c89b3cb53..000000000
--- a/lib/card/_config.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-$card-color-white: $color-white !default;
-$card-text-overlay: rgba($color-black, 0.35) !default;
-$card-background-color: $card-color-white !default;
-$card-padding-sm: .8 * $unit !default;
-$card-padding: 1.6 * $unit !default;
-$card-padding-lg: 2 * $unit !default;
-$card-font-size: $font-size-small !default;
diff --git a/lib/card/index.d.ts b/lib/card/index.d.ts
deleted file mode 100644
index 824771fac..000000000
--- a/lib/card/index.d.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface CardTheme {
-  card?: string;
-  raised?: string;
-}
-
-interface CardProps extends ReactToolbox.Props {
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  raised?: boolean;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: CardTheme;
-}
-
-export class Card extends React.Component<CardProps, {}> { }
-
-export interface CardActionsTheme {
-  cardActions?: string;
-}
-
-interface CardActionsProps extends ReactToolbox.Props {
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: CardActionsTheme;
-}
-
-export class CardActions extends React.Component<CardActionsProps, {}> { }
-
-export interface CardMediaTheme {
-  cardMedia?: string;
-  content?: string;
-  contentOverlay?: string;
-  square?: string;
-  wide?: string;
-}
-
-interface CardMediaProps extends ReactToolbox.Props {
-  aspectRatio?: "wide" | "square";
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  color?: string;
-  contentOverlay?: boolean;
-  image?: React.ReactNode | string;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: CardMediaTheme;
-}
-
-export class CardMedia extends React.Component<CardMediaProps, {}> { }
-
-export interface CardTextTheme {
-  cardText?: string;
-}
-
-interface CardTextProps extends ReactToolbox.Props {
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: CardTextTheme;
-}
-
-export class CardText extends React.Component<CardTextProps, {}> { }
-
-export interface CardTitleTheme {
-  large?: string;
-  title?: string;
-  small?: string;
-  subtitle?: string;
-}
-
-interface CardTitleProps extends ReactToolbox.Props {
-  avatar?: React.ReactNode | string;
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  subtitle?: React.ReactNode | string;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: CardTitleTheme;
-  title?: React.ReactNode | string;
-}
-
-export class CardTitle extends React.Component<CardTitleProps, {}> { }
diff --git a/lib/card/index.js b/lib/card/index.js
deleted file mode 100644
index d124b681e..000000000
--- a/lib/card/index.js
+++ /dev/null
@@ -1,44 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CardTitle = exports.CardText = exports.CardMedia = exports.CardActions = exports.Card = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Card = require('./Card.js');
-
-var _CardActions = require('./CardActions.js');
-
-var _CardMedia = require('./CardMedia.js');
-
-var _CardText = require('./CardText.js');
-
-var _CardTitle = require('./CardTitle.js');
-
-var _avatar = require('../avatar');
-
-var _avatar2 = _interopRequireDefault(_avatar);
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var CardTitle = (0, _CardTitle.cardTitleFactory)(_avatar2.default);
-var ThemedCard = (0, _reactCssThemr.themr)(_identifiers.CARD, _theme2.default)(_Card.Card);
-var ThemedCardActions = (0, _reactCssThemr.themr)(_identifiers.CARD, _theme2.default)(_CardActions.CardActions);
-var ThemedCardMedia = (0, _reactCssThemr.themr)(_identifiers.CARD, _theme2.default)(_CardMedia.CardMedia);
-var ThemedCardText = (0, _reactCssThemr.themr)(_identifiers.CARD, _theme2.default)(_CardText.CardText);
-var ThemedCardTitle = (0, _reactCssThemr.themr)(_identifiers.CARD, _theme2.default)(CardTitle);
-
-exports.default = ThemedCard;
-exports.Card = ThemedCard;
-exports.CardActions = ThemedCardActions;
-exports.CardMedia = ThemedCardMedia;
-exports.CardText = ThemedCardText;
-exports.CardTitle = ThemedCardTitle;
\ No newline at end of file
diff --git a/lib/card/theme.scss b/lib/card/theme.scss
deleted file mode 100644
index c49ea5cf6..000000000
--- a/lib/card/theme.scss
+++ /dev/null
@@ -1,126 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.card {
-  @include shadow-2dp();
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  overflow: hidden;
-  font-size: $card-font-size;
-  background: $card-background-color;
-  border-radius: .2 * $unit;
-  &.raised {
-    @include shadow-8dp();
-  }
-  [data-react-toolbox="avatar"] {
-    display: block;
-  }
-}
-
-.cardMedia {
-  position: relative;
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: cover;
-  &.wide, &.square {
-    width: 100%;
-    .content {
-      position: absolute;
-      height: 100%;
-    }
-    .content > iframe, .content > video, .content > img {
-      max-width: 100%;
-    }
-  }
-  &::after {
-    display: block;
-    height: 0;
-    content: "";
-  }
-  &.wide::after {
-    padding-top: 56.25%;
-  }
-  &.square::after {
-    padding-top: 100%;
-  }
-  .content {
-    position: relative;
-    top: 0;
-    left: 0;
-    display: flex;
-    width: 100%;
-    flex-direction: column;
-    justify-content: flex-end;
-    overflow: hidden;
-  }
-  .contentOverlay {
-    .cardTitle, .cardActions, .cardText {
-      background-color: $card-text-overlay;
-    }
-  }
-}
-
-.cardTitle {
-  display: flex;
-  align-items: center;
-  [data-react-toolbox="avatar"] {
-    margin-right: 1.3 * $unit;
-  }
-  .subtitle {
-    color: $color-text-secondary;
-  }
-  &.large {
-    padding: $card-padding-lg $card-padding ($card-padding - .2 * $unit);
-    .title {
-      @include typo-headline();
-      line-height: 1.25;
-    }
-  }
-  &.small {
-    padding: $card-padding;
-    .title {
-      @include typo-body-2(false, true);
-      line-height: 1.4;
-    }
-    .subtitle {
-      font-weight: 500;
-      line-height: 1.4;
-    }
-  }
-  .cardMedia & {
-    .title, .subtitle {
-      color: $card-color-white;
-    }
-  }
-}
-
-.cardTitle, .cardText {
-  padding: ($card-padding - .2 * $unit) $card-padding;
-  &:last-child {
-    padding-bottom: $card-padding-lg;
-  }
-  + .cardText {
-    padding-top: 0;
-  }
-}
-
-.cardActions {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  padding: $card-padding-sm;
-  [data-react-toolbox="button"] {
-    min-width: 0;
-    padding: 0 $card-padding-sm;
-    margin: 0 $card-padding-sm / 2;
-    &:first-child {
-      margin-left: 0;
-    }
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-}
diff --git a/lib/checkbox/Check.js b/lib/checkbox/Check.js
deleted file mode 100644
index 90041ec49..000000000
--- a/lib/checkbox/Check.js
+++ /dev/null
@@ -1,52 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var factory = function factory(ripple) {
-  var Check = function Check(_ref) {
-    var checked = _ref.checked,
-        children = _ref.children,
-        onMouseDown = _ref.onMouseDown,
-        theme = _ref.theme,
-        style = _ref.style;
-    return _react2.default.createElement(
-      'div',
-      {
-        'data-react-toolbox': 'check',
-        className: (0, _classnames3.default)(theme.check, _defineProperty({}, theme.checked, checked)),
-        onMouseDown: onMouseDown,
-        style: style
-      },
-      children
-    );
-  };
-
-  Check.propTypes = {
-    checked: _react.PropTypes.bool,
-    children: _react.PropTypes.any,
-    onMouseDown: _react.PropTypes.func,
-    style: _react.PropTypes.object,
-    theme: _react.PropTypes.shape({
-      check: _react.PropTypes.string,
-      checked: _react.PropTypes.string
-    })
-  };
-
-  return ripple(Check);
-};
-
-exports.default = factory;
\ No newline at end of file
diff --git a/lib/checkbox/Checkbox.js b/lib/checkbox/Checkbox.js
deleted file mode 100644
index 245822443..000000000
--- a/lib/checkbox/Checkbox.js
+++ /dev/null
@@ -1,154 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Checkbox = exports.checkboxFactory = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Ripple = require('../ripple/Ripple.js');
-
-var _Ripple2 = _interopRequireDefault(_Ripple);
-
-var _Check = require('./Check.js');
-
-var _Check2 = _interopRequireDefault(_Check);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(Check) {
-  var Checkbox = function (_Component) {
-    _inherits(Checkbox, _Component);
-
-    function Checkbox() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, Checkbox);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Checkbox.__proto__ || Object.getPrototypeOf(Checkbox)).call.apply(_ref, [this].concat(args))), _this), _this.handleToggle = function (event) {
-        if (event.pageX !== 0 && event.pageY !== 0) _this.blur();
-        if (!_this.props.disabled && _this.props.onChange) {
-          _this.props.onChange(!_this.props.checked, event);
-        }
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(Checkbox, [{
-      key: 'blur',
-      value: function blur() {
-        this.inputNode && this.inputNode.blur();
-      }
-    }, {
-      key: 'focus',
-      value: function focus() {
-        this.inputNode && this.inputNode.focus();
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var _this2 = this;
-
-        var _props = this.props,
-            checked = _props.checked,
-            disabled = _props.disabled,
-            label = _props.label,
-            style = _props.style,
-            theme = _props.theme,
-            others = _objectWithoutProperties(_props, ['checked', 'disabled', 'label', 'style', 'theme']);
-
-        var className = (0, _classnames3.default)(theme.field, _defineProperty({}, theme.disabled, this.props.disabled), this.props.className);
-
-        return _react2.default.createElement(
-          'label',
-          { 'data-react-toolbox': 'checkbox', className: className },
-          _react2.default.createElement('input', _extends({}, others, {
-            checked: checked,
-            className: theme.input,
-            disabled: disabled,
-            onChange: function onChange() {},
-            onClick: this.handleToggle,
-            ref: function ref(node) {
-              _this2.inputNode = node;
-            },
-            type: 'checkbox'
-          })),
-          _react2.default.createElement(Check, {
-            checked: checked,
-            disabled: disabled,
-            rippleClassName: theme.ripple,
-            style: style,
-            theme: theme
-          }),
-          label ? _react2.default.createElement(
-            'span',
-            { 'data-react-toolbox': 'label', className: theme.text },
-            label
-          ) : null
-        );
-      }
-    }]);
-
-    return Checkbox;
-  }(_react.Component);
-
-  Checkbox.propTypes = {
-    checked: _react.PropTypes.bool,
-    className: _react.PropTypes.string,
-    disabled: _react.PropTypes.bool,
-    label: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.node]),
-    name: _react.PropTypes.string,
-    onChange: _react.PropTypes.func,
-    style: _react.PropTypes.object,
-    theme: _react.PropTypes.shape({
-      disabled: _react.PropTypes.string,
-      field: _react.PropTypes.string,
-      input: _react.PropTypes.string,
-      ripple: _react.PropTypes.string
-    })
-  };
-  Checkbox.defaultProps = {
-    checked: false,
-    className: '',
-    disabled: false
-  };
-
-
-  return Checkbox;
-};
-
-var Check = (0, _Check2.default)((0, _Ripple2.default)({ centered: true, spread: 2.6 }));
-var Checkbox = factory(Check);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.CHECKBOX)(Checkbox);
-exports.checkboxFactory = factory;
-exports.Checkbox = Checkbox;
\ No newline at end of file
diff --git a/lib/checkbox/_config.scss b/lib/checkbox/_config.scss
deleted file mode 100644
index 18266e498..000000000
--- a/lib/checkbox/_config.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-$checkbox-color: $color-primary !default;
-$checkbox-disabled-color: rgba($color-black, 0.26) !default;
-$checkbox-field-margin-bottom: 1.5 * $unit !default;
-$checkbox-focus-checked-color: rgba($color-primary, 0.26) !default;
-$checkbox-ripple-duration: 650ms !default;
-$checkbox-size: 1.8 * $unit !default;
-$checkbox-focus-color: rgba($color-black, 0.1) !default;
-$checkbox-focus-size: $checkbox-size * 2.3 !default;
-$checkbox-text-color: $color-black !default;
-$checkbox-text-font-size: $font-size-small !default;
-$checkbox-total-height: 1.8 * $unit !default;
-$checkbox-transition-duration: .2s !default;
diff --git a/lib/checkbox/index.d.ts b/lib/checkbox/index.d.ts
deleted file mode 100644
index 29c1045e7..000000000
--- a/lib/checkbox/index.d.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface CheckboxTheme {
-  /**
-   * Used as root in the check element.
-   */
-  check?: string;
-  /**
-   * Used for the check element when it's checked.
-   */
-  checked?: string;
-  /**
-   * Used when the component is disabled.
-   */
-  disabled?: string;
-  /**
-   * Used as the root class of the component.
-   */
-  field?: string;
-  /**
-   * Used for the input element.
-   */
-  input?: string;
-  /**
-   * Used for the ripple component.
-   */
-  ripple?: string;
-  /**
-   * Used for the text label.
-   */
-  text?: string;
-}
-
-interface CheckboxProps extends ReactToolbox.Props {
-  /**
-   * Value for the checkbox, can be true or false.
-   * @default false
-   */
-  checked?: boolean;
-  /**
-   * If true, the checkbox shown as disabled and cannot be modified.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * Text label to attach next to the checkbox element.
-   */
-  label?: React.ReactNode | string;
-  /**
-   * The name of the field to set in the input checkbox.
-   */
-  name?: string;
-  /**
-   * Callback called when the checkbox is blurred.
-   */
-  onBlur?: Function;
-  /**
-   * Callback called when the checkbox value is changed.
-   */
-  onChange?: Function;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: CheckboxTheme;
-}
-
-export class Checkbox extends React.Component<CheckboxProps, {}> { }
-
-export default Checkbox;
diff --git a/lib/checkbox/index.js b/lib/checkbox/index.js
deleted file mode 100644
index 5efa6e16c..000000000
--- a/lib/checkbox/index.js
+++ /dev/null
@@ -1,32 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Checkbox = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _ripple = require('../ripple');
-
-var _ripple2 = _interopRequireDefault(_ripple);
-
-var _Checkbox = require('./Checkbox.js');
-
-var _Check = require('./Check.js');
-
-var _Check2 = _interopRequireDefault(_Check);
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var ThemedCheck = (0, _Check2.default)((0, _ripple2.default)({ centered: true, spread: 2.6 }));
-var ThemedCheckbox = (0, _reactCssThemr.themr)(_identifiers.CHECKBOX, _theme2.default)((0, _Checkbox.checkboxFactory)(ThemedCheck));
-
-exports.default = ThemedCheckbox;
-exports.Checkbox = ThemedCheckbox;
\ No newline at end of file
diff --git a/lib/checkbox/theme.scss b/lib/checkbox/theme.scss
deleted file mode 100644
index 55b179205..000000000
--- a/lib/checkbox/theme.scss
+++ /dev/null
@@ -1,121 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.field {
-  position: relative;
-  display: block;
-  height: $checkbox-size;
-  margin-bottom: $checkbox-field-margin-bottom;
-  white-space: nowrap;
-  vertical-align: middle;
-  .ripple {
-    background-color: $checkbox-color;
-    opacity: .3;
-    transition-duration: $checkbox-ripple-duration;
-  }
-}
-
-.text {
-  display: inline-block;
-  padding-left: $unit;
-  font-size: $checkbox-text-font-size;
-  line-height: $checkbox-size;
-  color: $checkbox-text-color;
-  white-space: nowrap;
-  vertical-align: top;
-}
-
-.input {
-  position: absolute;
-  width: 0;
-  height: 0;
-  overflow: hidden;
-  opacity: 0;
-  &:focus ~ .check {
-    &:before {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      width: $checkbox-focus-size;
-      height: $checkbox-focus-size;
-      margin-top: - $checkbox-focus-size / 2;
-      margin-left: - $checkbox-focus-size / 2;
-      pointer-events: none;
-      content: "";
-      background-color: $checkbox-focus-color;
-      border-radius: 50%;
-    }
-    &.checked:before {
-      background-color: $checkbox-focus-checked-color;
-    }
-  }
-}
-
-.check {
-  position: relative;
-  display: inline-block;
-  width: $checkbox-size;
-  height: $checkbox-size;
-  vertical-align: top;
-  cursor: pointer;
-  border-color: $checkbox-text-color;
-  border-style: solid;
-  border-width: 2px;
-  border-radius: 2px;
-  transition-timing-function: $animation-curve-default;
-  transition-duration: $checkbox-transition-duration;
-  transition-property: background-color;
-  &.checked {
-    background-color: $checkbox-color;
-    border-color: $checkbox-color;
-    &:after {
-      position: absolute;
-      top: -.1 * $unit;
-      left: .4 * $unit;
-      width: .7 * $unit;
-      height: 1.2 * $unit;
-      content: "";
-      border-color: $color-background;
-      border-style: solid;
-      border-top: 0;
-      border-right-width: 2px;
-      border-bottom-width: 2px;
-      border-left: 0;
-      transform: rotate(45deg);
-      animation: checkmark-expand 140ms ease-out forwards;
-    }
-  }
-}
-
-.disabled {
-  > .text {
-    color: $checkbox-disabled-color;
-  }
-  > .check {
-    cursor: auto;
-    border-color: $checkbox-disabled-color;
-    &.checked {
-      cursor: auto;
-      background-color: $checkbox-disabled-color;
-      border-color: transparent;
-    }
-  }
-}
-
-@keyframes checkmark-expand {
-  0% {
-    top: .9 * $unit;
-    left: .6 * $unit;
-    width: 0;
-    height: 0;
-  }
-
-  100% {
-    top: -.1 * $unit;
-    left: .4 * $unit;
-    width: .7 * $unit;
-    height: 1.2 * $unit;
-  }
-}
diff --git a/lib/chip/Chip.js b/lib/chip/Chip.js
deleted file mode 100644
index 3c4d947bb..000000000
--- a/lib/chip/Chip.js
+++ /dev/null
@@ -1,97 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Chip = exports.chipFactory = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Avatar = require('../avatar/Avatar.js');
-
-var _Avatar2 = _interopRequireDefault(_Avatar);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-var factory = function factory(Avatar) {
-  var Chip = function Chip(_ref) {
-    var _classnames;
-
-    var children = _ref.children,
-        className = _ref.className,
-        deletable = _ref.deletable,
-        onDeleteClick = _ref.onDeleteClick,
-        theme = _ref.theme,
-        other = _objectWithoutProperties(_ref, ['children', 'className', 'deletable', 'onDeleteClick', 'theme']);
-
-    var hasAvatar = false;
-    if (_react2.default.Children.count(children)) {
-      var firstChild = children[0];
-      hasAvatar = firstChild && firstChild.type && firstChild.type === Avatar;
-    }
-
-    var classes = (0, _classnames3.default)(theme.chip, (_classnames = {}, _defineProperty(_classnames, theme.deletable, !!deletable), _defineProperty(_classnames, theme.avatar, !!hasAvatar), _classnames), className);
-
-    return _react2.default.createElement(
-      'div',
-      _extends({ 'data-react-toolbox': 'chip', className: classes }, other),
-      typeof children === 'string' ? _react2.default.createElement(
-        'span',
-        null,
-        children
-      ) : children,
-      deletable ? _react2.default.createElement(
-        'span',
-        { className: theme.delete, onClick: onDeleteClick },
-        _react2.default.createElement(
-          'svg',
-          { viewBox: '0 0 40 40', className: theme.deleteIcon },
-          _react2.default.createElement('path', { className: theme.deleteX, d: 'M 12,12 L 28,28 M 28,12 L 12,28' })
-        )
-      ) : null
-    );
-  };
-
-  Chip.propTypes = {
-    children: _react.PropTypes.node,
-    className: _react.PropTypes.string,
-    deletable: _react.PropTypes.bool,
-    onDeleteClick: _react.PropTypes.func,
-    theme: _react.PropTypes.shape({
-      avatar: _react.PropTypes.string,
-      chip: _react.PropTypes.string,
-      deletable: _react.PropTypes.string,
-      delete: _react.PropTypes.string,
-      deleteIcon: _react.PropTypes.string,
-      deleteX: _react.PropTypes.string
-    })
-  };
-
-  Chip.defaultProps = {
-    className: '',
-    deletable: false
-  };
-
-  return Chip;
-};
-
-var Chip = factory(_Avatar2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.CHIP)(Chip);
-exports.chipFactory = factory;
-exports.Chip = Chip;
\ No newline at end of file
diff --git a/lib/chip/_config.scss b/lib/chip/_config.scss
deleted file mode 100644
index a335b2f66..000000000
--- a/lib/chip/_config.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-$chip-height: 3.2 * $unit !default;
-$chip-padding: 1.2 * $unit !default;
-$chip-margin-right: 0.25 * $unit !default;
-$chip-background: $palette-grey-200 !default;
-
-$chip-icon-font-size: 2 * $unit !default;
-$chip-icon-margin-right: 0.8 * $unit !default;
-
-$chip-color: $color-text-secondary !default;
-$chip-font-size: $font-size-small !default;
-
-$chip-remove-size: 2.4 * $unit !default;
-$chip-remove-margin: 0.4 * $unit !default;
-$chip-remove-stroke-width: 0.4 * $unit !default;
-$chip-remove-background: $palette-grey-400 !default;
-$chip-remove-background-hover: $palette-grey-500 !default;
-$chip-remove-color: $color-white !default;
diff --git a/lib/chip/index.d.ts b/lib/chip/index.d.ts
deleted file mode 100644
index 832ca408c..000000000
--- a/lib/chip/index.d.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface ChipTheme {
-  /**
-   * Added to the root element when the component includes an avatar.
-   */
-  avatar?: string;
-  /**
-   * Used for the root element.
-   */
-  chip?: string;
-  /**
-   * Added to the root element when the component is deletable.
-   */
-  deletable?: string;
-  /**
-   * Used for the delete element wrapper.
-   */
-  delete?: string;
-  /**
-   * Used for the delete icon.
-   */
-  deleteIcon?: string;
-  /**
-   * Used for the delete svg inner layer.
-   */
-  deleteX?: string;
-}
-
-interface ChipProps extends ReactToolbox.Props {
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * If true, the chip will be rendered with a delete icon.
-   * @default false
-   */
-  deletable?: boolean;
-  /**
-   * Callback to be invoked when the delete icon is clicked.
-   */
-  onDeleteClick?: Function;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: ChipTheme;
-}
-
-export class Chip extends React.Component<ChipProps, {}> { }
-
-export default Chip;
diff --git a/lib/chip/index.js b/lib/chip/index.js
deleted file mode 100644
index 5a62d8219..000000000
--- a/lib/chip/index.js
+++ /dev/null
@@ -1,28 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Chip = undefined;
-
-var _identifiers = require('../identifiers.js');
-
-var _reactCssThemr = require('react-css-themr');
-
-var _Chip = require('./Chip.js');
-
-var _avatar = require('../avatar');
-
-var _avatar2 = _interopRequireDefault(_avatar);
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var Chip = (0, _Chip.chipFactory)(_avatar2.default);
-var ThemedChip = (0, _reactCssThemr.themr)(_identifiers.CHIP, _theme2.default)(Chip);
-
-exports.default = ThemedChip;
-exports.Chip = ThemedChip;
\ No newline at end of file
diff --git a/lib/chip/theme.scss b/lib/chip/theme.scss
deleted file mode 100644
index 4baa8f9c9..000000000
--- a/lib/chip/theme.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.chip {
-  position: relative;
-  display: inline-block;
-  max-width: 100%;
-  padding: 0 $chip-padding;
-  margin-right: $chip-margin-right;
-  overflow: hidden;
-  font-size: $chip-font-size;
-  line-height: $chip-height;
-  color: $chip-color;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  background-color: $chip-background;
-  border-radius: $chip-height;
-}
-
-.avatar {
-  padding-left: 0;
-
-  > [data-react-toolbox="avatar"] {
-    width: $chip-height;
-    height: $chip-height;
-    margin-right: $chip-icon-margin-right;
-    vertical-align: middle;
-
-    > span {
-      font-size: $chip-icon-font-size;
-      line-height: $chip-height;
-    }
-  }
-}
-
-.deletable {
-  padding-right: $chip-remove-size + 2 * $chip-remove-margin;
-}
-
-.delete {
-  position: absolute;
-  right: 0;
-  display: inline-block;
-  width: $chip-remove-size;
-  height: $chip-remove-size;
-  padding: $chip-remove-margin;
-  margin: $chip-remove-margin;
-  vertical-align: middle;
-  cursor: pointer;
-}
-
-.delete:hover .deleteIcon {
-  background: $chip-remove-background-hover;
-}
-
-.deleteIcon {
-  vertical-align: top;
-  background: $chip-remove-background;
-  border-radius: $chip-remove-size;
-
-  .deleteX {
-    fill: transparent;
-    stroke-width: $chip-remove-stroke-width;
-    stroke: $chip-remove-color;
-  }
-}
diff --git a/lib/commons.scss b/lib/commons.scss
deleted file mode 100644
index 54f9ba163..000000000
--- a/lib/commons.scss
+++ /dev/null
@@ -1,95 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/~normalize.css";
-
-html {
-  font-size: 62.5%;
-}
-
-body {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  font-family: Roboto, sans-serif;
-  font-size: 1.6rem;
-  -webkit-touch-callout: none;
-  * {
-    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-  }
-}
-
-a, abbr, address, article, aside, audio, b, blockquote, body, caption, cite,
-code, dd, del, dfn, dialog, div, dl, dt, em, fieldset, figure, footer, form, h1,
-h2, h3, h4, h5, h6, header, hgroup, hr, html, i, iframe, img, ins, kbd, label,
-legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span,
-strong, sub, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
-  padding: 0;
-  margin: 0;
-  border: 0;
-  outline: 0;
-}
-
-*, *:before, *:after {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-h1, h2, h3, h4, h5, h6, label, p, button, abbr, a, span, small {
-  font-smoothing: antialiased;
-  -webkit-font-smoothing: antialiased;
-  text-size-adjust: 100%;
-}
-
-a {
-  text-decoration: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-
-input:not([type="checkbox"]):not([type="radio"]), button {
-  outline: none;
-  appearance: none;
-  -webkit-touch-callout: none;
-  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-}
-
-// -- Remove firefox default style for required inputs
-input[required]:-moz-ui-invalid {
-  box-shadow: none;
-}
-
-// -- Material design font sizes
-h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
-  @include typo-display-3($color-contrast: true);
-}
-
-h1 {
-  @include typo-display-3;
-}
-
-h2 {
-  @include typo-display-2;
-}
-
-h3 {
-  @include typo-display-1;
-}
-
-h4 {
-  @include typo-headline;
-}
-
-h5 {
-  @include typo-title;
-}
-
-h6 {
-  @include typo-subhead;
-}
-
-p {
-  @include typo-body-1;
-}
diff --git a/lib/date_picker/Calendar.js b/lib/date_picker/Calendar.js
deleted file mode 100644
index 3e0f8ae96..000000000
--- a/lib/date_picker/Calendar.js
+++ /dev/null
@@ -1,208 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactAddonsCssTransitionGroup = require('react-addons-css-transition-group');
-
-var _reactAddonsCssTransitionGroup2 = _interopRequireDefault(_reactAddonsCssTransitionGroup);
-
-var _animations = require('../animations');
-
-var _time = require('../utils/time.js');
-
-var _time2 = _interopRequireDefault(_time);
-
-var _utils = require('../utils/utils.js');
-
-var _utils2 = _interopRequireDefault(_utils);
-
-var _CalendarMonth = require('./CalendarMonth.js');
-
-var _CalendarMonth2 = _interopRequireDefault(_CalendarMonth);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var DIRECTION_STEPS = { left: -1, right: 1 };
-
-var factory = function factory(IconButton) {
-  var Calendar = function (_Component) {
-    _inherits(Calendar, _Component);
-
-    function Calendar() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, Calendar);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Calendar.__proto__ || Object.getPrototypeOf(Calendar)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-        viewDate: _this.props.selectedDate
-      }, _this.handleDayClick = function (day) {
-        _this.props.onChange(_time2.default.setDay(_this.state.viewDate, day), true);
-      }, _this.handleYearClick = function (event) {
-        var year = parseInt(event.currentTarget.id);
-        var viewDate = _time2.default.setYear(_this.props.selectedDate, year);
-        _this.setState({ viewDate: viewDate });
-        _this.props.onChange(viewDate, false);
-      }, _this.handleKeys = function (e) {
-        var selectedDate = _this.props.selectedDate;
-
-
-        if (e.which === 37 || e.which === 38 || e.which === 39 || e.which === 40 || e.which === 13) e.preventDefault();
-
-        switch (e.which) {
-          case 13:
-            _this.props.handleSelect();break; // enter
-          case 37:
-            _this.handleDayArrowKey(_time2.default.addDays(selectedDate, -1));break; // left
-          case 38:
-            _this.handleDayArrowKey(_time2.default.addDays(selectedDate, -7));break; // up
-          case 39:
-            _this.handleDayArrowKey(_time2.default.addDays(selectedDate, 1));break; // right
-          case 40:
-            _this.handleDayArrowKey(_time2.default.addDays(selectedDate, 7));break; // down
-          default:
-            break;
-        }
-      }, _this.handleDayArrowKey = function (date) {
-        _this.setState({ viewDate: date });
-        _this.props.onChange(date, false);
-      }, _this.changeViewMonth = function (event) {
-        var direction = event.currentTarget.id;
-        _this.setState({
-          direction: direction,
-          viewDate: _time2.default.addMonths(_this.state.viewDate, DIRECTION_STEPS[direction])
-        });
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(Calendar, [{
-      key: 'componentWillMount',
-      value: function componentWillMount() {
-        document.body.addEventListener('keydown', this.handleKeys);
-      }
-    }, {
-      key: 'componentDidUpdate',
-      value: function componentDidUpdate() {
-        if (this.refs.activeYear) {
-          this.scrollToActive();
-        }
-      }
-    }, {
-      key: 'componentWillUnmount',
-      value: function componentWillUnmount() {
-        document.body.removeEventListener('keydown', this.handleKeys);
-      }
-    }, {
-      key: 'scrollToActive',
-      value: function scrollToActive() {
-        this.refs.years.scrollTop = this.refs.activeYear.offsetTop - this.refs.years.offsetHeight / 2 + this.refs.activeYear.offsetHeight / 2;
-      }
-    }, {
-      key: 'renderYears',
-      value: function renderYears() {
-        var _this2 = this;
-
-        return _react2.default.createElement(
-          'ul',
-          { 'data-react-toolbox': 'years', ref: 'years', className: this.props.theme.years },
-          _utils2.default.range(1900, 2100).map(function (year) {
-            return _react2.default.createElement('li', {
-              children: year,
-              className: year === _this2.state.viewDate.getFullYear() ? _this2.props.theme.active : '',
-              id: year,
-              key: year,
-              onClick: _this2.handleYearClick,
-              ref: year === _this2.state.viewDate.getFullYear() ? 'activeYear' : undefined
-            });
-          })
-        );
-      }
-    }, {
-      key: 'renderMonths',
-      value: function renderMonths() {
-        var theme = this.props.theme;
-
-        var animation = this.state.direction === 'left' ? _animations.SlideLeft : _animations.SlideRight;
-        return _react2.default.createElement(
-          'div',
-          { 'data-react-toolbox': 'calendar' },
-          _react2.default.createElement(IconButton, { id: 'left', className: theme.prev, icon: 'chevron_left', onClick: this.changeViewMonth }),
-          _react2.default.createElement(IconButton, { id: 'right', className: theme.next, icon: 'chevron_right', onClick: this.changeViewMonth }),
-          _react2.default.createElement(
-            _reactAddonsCssTransitionGroup2.default,
-            { transitionName: animation, transitionEnterTimeout: 350, transitionLeaveTimeout: 350 },
-            _react2.default.createElement(_CalendarMonth2.default, {
-              key: this.state.viewDate.getMonth(),
-              locale: this.props.locale,
-              maxDate: this.props.maxDate,
-              minDate: this.props.minDate,
-              onDayClick: this.handleDayClick,
-              selectedDate: this.props.selectedDate,
-              sundayFirstDayOfWeek: this.props.sundayFirstDayOfWeek,
-              theme: this.props.theme,
-              viewDate: this.state.viewDate
-            })
-          )
-        );
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        return _react2.default.createElement(
-          'div',
-          { className: this.props.theme.calendar },
-          this.props.display === 'months' ? this.renderMonths() : this.renderYears()
-        );
-      }
-    }]);
-
-    return Calendar;
-  }(_react.Component);
-
-  Calendar.propTypes = {
-    display: _react.PropTypes.oneOf(['months', 'years']),
-    handleSelect: _react.PropTypes.func,
-    locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
-    maxDate: _react.PropTypes.object,
-    minDate: _react.PropTypes.object,
-    onChange: _react.PropTypes.func,
-    selectedDate: _react.PropTypes.object,
-    sundayFirstDayOfWeek: _react2.default.PropTypes.bool,
-    theme: _react.PropTypes.shape({
-      active: _react.PropTypes.string,
-      calendar: _react.PropTypes.string,
-      next: _react.PropTypes.string,
-      prev: _react.PropTypes.string,
-      years: _react.PropTypes.string
-    }),
-    viewDate: _react.PropTypes.object
-  };
-  Calendar.defaultProps = {
-    display: 'months',
-    selectedDate: new Date()
-  };
-
-
-  return Calendar;
-};
-
-exports.default = factory;
\ No newline at end of file
diff --git a/lib/date_picker/CalendarDay.js b/lib/date_picker/CalendarDay.js
deleted file mode 100644
index 0fcccb182..000000000
--- a/lib/date_picker/CalendarDay.js
+++ /dev/null
@@ -1,106 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _time = require('../utils/time.js');
-
-var _time2 = _interopRequireDefault(_time);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var Day = function (_Component) {
-  _inherits(Day, _Component);
-
-  function Day() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    _classCallCheck(this, Day);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Day.__proto__ || Object.getPrototypeOf(Day)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function () {
-      if (!_this.props.disabled && _this.props.onClick) {
-        _this.props.onClick(_this.props.day);
-      }
-    }, _temp), _possibleConstructorReturn(_this, _ret);
-  }
-
-  _createClass(Day, [{
-    key: 'dayStyle',
-    value: function dayStyle() {
-      if (this.props.day === 1) {
-        var e = this.props.sundayFirstDayOfWeek ? 0 : 1;
-        var firstDay = _time2.default.getFirstWeekDay(this.props.viewDate) - e;
-        return {
-          marginLeft: (firstDay >= 0 ? firstDay : 6) * 100 / 7 + '%'
-        };
-      }
-    }
-  }, {
-    key: 'isSelected',
-    value: function isSelected() {
-      var sameYear = this.props.viewDate.getFullYear() === this.props.selectedDate.getFullYear();
-      var sameMonth = this.props.viewDate.getMonth() === this.props.selectedDate.getMonth();
-      var sameDay = this.props.day === this.props.selectedDate.getDate();
-      return sameYear && sameMonth && sameDay;
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _classnames;
-
-      var className = (0, _classnames3.default)(this.props.theme.day, (_classnames = {}, _defineProperty(_classnames, this.props.theme.active, this.isSelected()), _defineProperty(_classnames, this.props.theme.disabled, this.props.disabled), _classnames));
-
-      return _react2.default.createElement(
-        'div',
-        { 'data-react-toolbox': 'day', className: className, style: this.dayStyle() },
-        _react2.default.createElement(
-          'span',
-          { onClick: this.handleClick },
-          this.props.day
-        )
-      );
-    }
-  }]);
-
-  return Day;
-}(_react.Component);
-
-Day.propTypes = {
-  day: _react.PropTypes.number,
-  disabled: _react.PropTypes.bool,
-  onClick: _react.PropTypes.func,
-  selectedDate: _react.PropTypes.object,
-  sundayFirstDayOfWeek: _react.PropTypes.bool,
-  theme: _react.PropTypes.shape({
-    active: _react.PropTypes.string,
-    day: _react.PropTypes.string,
-    disabled: _react.PropTypes.string
-  }),
-  viewDate: _react.PropTypes.object
-};
-exports.default = Day;
\ No newline at end of file
diff --git a/lib/date_picker/CalendarMonth.js b/lib/date_picker/CalendarMonth.js
deleted file mode 100644
index ad3afbe25..000000000
--- a/lib/date_picker/CalendarMonth.js
+++ /dev/null
@@ -1,137 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _time = require('../utils/time.js');
-
-var _time2 = _interopRequireDefault(_time);
-
-var _utils = require('../utils/utils.js');
-
-var _utils2 = _interopRequireDefault(_utils);
-
-var _CalendarDay = require('./CalendarDay.js');
-
-var _CalendarDay2 = _interopRequireDefault(_CalendarDay);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var Month = function (_Component) {
-  _inherits(Month, _Component);
-
-  function Month() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    _classCallCheck(this, Month);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Month.__proto__ || Object.getPrototypeOf(Month)).call.apply(_ref, [this].concat(args))), _this), _this.handleDayClick = function (day) {
-      if (_this.props.onDayClick) _this.props.onDayClick(day);
-    }, _temp), _possibleConstructorReturn(_this, _ret);
-  }
-
-  _createClass(Month, [{
-    key: 'renderWeeks',
-    value: function renderWeeks() {
-      var _this2 = this;
-
-      var days = _utils2.default.range(0, 7).map(function (d) {
-        return _time2.default.getDayOfWeekLetter(d, _this2.props.locale);
-      });
-      var source = this.props.sundayFirstDayOfWeek ? days : [].concat(_toConsumableArray(days.slice(1)), [days[0]]);
-      return source.map(function (d, i) {
-        return _react2.default.createElement(
-          'span',
-          { key: i },
-          d
-        );
-      });
-    }
-  }, {
-    key: 'renderDays',
-    value: function renderDays() {
-      var _this3 = this;
-
-      return _utils2.default.range(1, _time2.default.getDaysInMonth(this.props.viewDate) + 1).map(function (i) {
-        var date = new Date(_this3.props.viewDate.getFullYear(), _this3.props.viewDate.getMonth(), i);
-        var disabled = _time2.default.dateOutOfRange(date, _this3.props.minDate, _this3.props.maxDate);
-
-        return _react2.default.createElement(_CalendarDay2.default, {
-          key: i,
-          day: i,
-          disabled: disabled,
-          onClick: _this3.handleDayClick,
-          selectedDate: _this3.props.selectedDate,
-          theme: _this3.props.theme,
-          viewDate: _this3.props.viewDate,
-          sundayFirstDayOfWeek: _this3.props.sundayFirstDayOfWeek
-        });
-      });
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      return _react2.default.createElement(
-        'div',
-        { 'data-react-toolbox': 'month', className: this.props.theme.month },
-        _react2.default.createElement(
-          'span',
-          { className: this.props.theme.title },
-          _time2.default.getFullMonth(this.props.viewDate, this.props.locale),
-          ' ',
-          this.props.viewDate.getFullYear()
-        ),
-        _react2.default.createElement(
-          'div',
-          { className: this.props.theme.week },
-          this.renderWeeks()
-        ),
-        _react2.default.createElement(
-          'div',
-          { className: this.props.theme.days },
-          this.renderDays()
-        )
-      );
-    }
-  }]);
-
-  return Month;
-}(_react.Component);
-
-Month.propTypes = {
-  locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
-  maxDate: _react.PropTypes.object,
-  minDate: _react.PropTypes.object,
-  onDayClick: _react.PropTypes.func,
-  selectedDate: _react.PropTypes.object,
-  sundayFirstDayOfWeek: _react2.default.PropTypes.bool,
-  theme: _react.PropTypes.shape({
-    days: _react.PropTypes.string,
-    month: _react.PropTypes.string,
-    title: _react.PropTypes.string,
-    week: _react.PropTypes.string
-  }),
-  viewDate: _react.PropTypes.object
-};
-exports.default = Month;
\ No newline at end of file
diff --git a/lib/date_picker/DatePicker.js b/lib/date_picker/DatePicker.js
deleted file mode 100644
index fc73f80d3..000000000
--- a/lib/date_picker/DatePicker.js
+++ /dev/null
@@ -1,227 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DatePicker = exports.datePickerFactory = exports.DatePickerDialog = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _events = require('../utils/events.js');
-
-var _events2 = _interopRequireDefault(_events);
-
-var _time = require('../utils/time.js');
-
-var _time2 = _interopRequireDefault(_time);
-
-var _IconButton = require('../button/IconButton.js');
-
-var _IconButton2 = _interopRequireDefault(_IconButton);
-
-var _Input = require('../input/Input.js');
-
-var _Input2 = _interopRequireDefault(_Input);
-
-var _Dialog = require('../dialog/Dialog.js');
-
-var _Dialog2 = _interopRequireDefault(_Dialog);
-
-var _Calendar = require('./Calendar.js');
-
-var _Calendar2 = _interopRequireDefault(_Calendar);
-
-var _DatePickerDialog = require('./DatePickerDialog.js');
-
-var _DatePickerDialog2 = _interopRequireDefault(_DatePickerDialog);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(Input, DatePickerDialog) {
-  var DatePicker = function (_Component) {
-    _inherits(DatePicker, _Component);
-
-    function DatePicker() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, DatePicker);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = DatePicker.__proto__ || Object.getPrototypeOf(DatePicker)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-        active: _this.props.active
-      }, _this.handleDismiss = function () {
-        _this.setState({ active: false });
-        if (_this.props.onDismiss) {
-          _this.props.onDismiss();
-        }
-      }, _this.handleInputFocus = function (event) {
-        _events2.default.pauseEvent(event);
-        _this.setState({ active: true });
-      }, _this.handleInputBlur = function (event) {
-        _events2.default.pauseEvent(event);
-        _this.setState({ active: false });
-      }, _this.handleInputClick = function (event) {
-        _events2.default.pauseEvent(event);
-        _this.setState({ active: true });
-        if (_this.props.onClick) _this.props.onClick(event);
-      }, _this.handleInputKeyPress = function (event) {
-        if (event.charCode === 13) {
-          _events2.default.pauseEvent(event);
-          _this.setState({ active: true });
-        }
-        if (_this.props.onKeyPress) _this.props.onKeyPress(event);
-      }, _this.handleSelect = function (value, event) {
-        if (_this.props.onChange) _this.props.onChange(value, event);
-        _this.setState({ active: false });
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(DatePicker, [{
-      key: 'componentWillReceiveProps',
-      value: function componentWillReceiveProps(nextProps) {
-        if (nextProps.active !== this.props.active && this.state.active !== nextProps.active) {
-          this.setState({ active: nextProps.active });
-        }
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var _props = this.props,
-            active = _props.active,
-            onDismiss = _props.onDismiss,
-            autoOk = _props.autoOk,
-            cancelLabel = _props.cancelLabel,
-            inputClassName = _props.inputClassName,
-            inputFormat = _props.inputFormat,
-            locale = _props.locale,
-            maxDate = _props.maxDate,
-            minDate = _props.minDate,
-            okLabel = _props.okLabel,
-            onEscKeyDown = _props.onEscKeyDown,
-            onOverlayClick = _props.onOverlayClick,
-            readonly = _props.readonly,
-            sundayFirstDayOfWeek = _props.sundayFirstDayOfWeek,
-            value = _props.value,
-            others = _objectWithoutProperties(_props, ['active', 'onDismiss', 'autoOk', 'cancelLabel', 'inputClassName', 'inputFormat', 'locale', 'maxDate', 'minDate', 'okLabel', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'sundayFirstDayOfWeek', 'value']);
-
-        var finalInputFormat = inputFormat || _time2.default.formatDate;
-        var date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined;
-        var formattedDate = date === undefined ? '' : finalInputFormat(value, locale);
-
-        return _react2.default.createElement(
-          'div',
-          { 'data-react-toolbox': 'date-picker' },
-          _react2.default.createElement(Input, _extends({}, others, {
-            className: (0, _classnames3.default)(this.props.theme.input, _defineProperty({}, inputClassName, inputClassName)),
-            disabled: readonly,
-            error: this.props.error,
-            icon: this.props.icon,
-            label: this.props.label,
-            name: this.props.name,
-            onFocus: this.handleInputFocus,
-            onKeyPress: this.handleInputKeyPress,
-            onClick: this.handleInputClick,
-            readOnly: true,
-            type: 'text',
-            value: formattedDate
-          })),
-          _react2.default.createElement(DatePickerDialog, {
-            active: this.state.active,
-            autoOk: autoOk,
-            cancelLabel: cancelLabel,
-            className: this.props.className,
-            locale: locale,
-            maxDate: maxDate,
-            minDate: minDate,
-            name: this.props.name,
-            onDismiss: this.handleDismiss,
-            okLabel: okLabel,
-            onEscKeyDown: onEscKeyDown || this.handleDismiss,
-            onOverlayClick: onOverlayClick || this.handleDismiss,
-            onSelect: this.handleSelect,
-            sundayFirstDayOfWeek: sundayFirstDayOfWeek,
-            theme: this.props.theme,
-            value: date
-          })
-        );
-      }
-    }]);
-
-    return DatePicker;
-  }(_react.Component);
-
-  DatePicker.propTypes = {
-    active: _react.PropTypes.bool,
-    autoOk: _react.PropTypes.bool,
-    cancelLabel: _react.PropTypes.string,
-    className: _react.PropTypes.string,
-    error: _react.PropTypes.string,
-    icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-    inputClassName: _react.PropTypes.string,
-    inputFormat: _react.PropTypes.func,
-    label: _react.PropTypes.string,
-    locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
-    maxDate: _react.PropTypes.object,
-    minDate: _react.PropTypes.object,
-    name: _react.PropTypes.string,
-    okLabel: _react.PropTypes.string,
-    onChange: _react.PropTypes.func,
-    onClick: _react.PropTypes.func,
-    onDismiss: _react.PropTypes.func,
-    onEscKeyDown: _react.PropTypes.func,
-    onKeyPress: _react.PropTypes.func,
-    onOverlayClick: _react.PropTypes.func,
-    readonly: _react.PropTypes.bool,
-    sundayFirstDayOfWeek: _react2.default.PropTypes.bool,
-    theme: _react.PropTypes.shape({
-      input: _react.PropTypes.string
-    }),
-    value: _react.PropTypes.oneOfType([_react.PropTypes.instanceOf(Date), _react.PropTypes.string])
-  };
-  DatePicker.defaultProps = {
-    active: false,
-    locale: 'en',
-    sundayFirstDayOfWeek: false
-  };
-
-
-  return DatePicker;
-};
-
-var Calendar = (0, _Calendar2.default)(_IconButton2.default);
-var DatePickerDialog = (0, _DatePickerDialog2.default)(_Dialog2.default, Calendar);
-var DatePicker = factory(_Input2.default, DatePickerDialog);
-
-exports.default = (0, _reactCssThemr.themr)(_identifiers.DATE_PICKER)(DatePicker);
-exports.DatePickerDialog = DatePickerDialog;
-exports.datePickerFactory = factory;
-exports.DatePicker = DatePicker;
\ No newline at end of file
diff --git a/lib/date_picker/DatePickerDialog.js b/lib/date_picker/DatePickerDialog.js
deleted file mode 100644
index 14bc4c72a..000000000
--- a/lib/date_picker/DatePickerDialog.js
+++ /dev/null
@@ -1,181 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _time = require('../utils/time.js');
-
-var _time2 = _interopRequireDefault(_time);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(Dialog, Calendar) {
-  var CalendarDialog = function (_Component) {
-    _inherits(CalendarDialog, _Component);
-
-    function CalendarDialog() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, CalendarDialog);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = CalendarDialog.__proto__ || Object.getPrototypeOf(CalendarDialog)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-        display: 'months',
-        date: _this.props.value
-      }, _this.handleNewDate = function (value, dayClick) {
-        var state = { display: 'months', date: value };
-        if (_time2.default.dateOutOfRange(value, _this.props.minDate, _this.props.maxDate)) {
-          if (_this.props.maxDate && _this.props.minDate) {
-            state.date = _time2.default.closestDate(value, _this.props.maxDate, _this.props.minDate);
-          } else {
-            state.date = _this.props.maxDate || _this.props.minDate;
-          }
-        }
-        _this.setState(state);
-        if (dayClick && _this.props.autoOk && _this.props.onSelect) {
-          _this.props.onSelect(value);
-        }
-      }, _this.handleSelect = function (event) {
-        if (_this.props.onSelect) _this.props.onSelect(_this.state.date, event);
-      }, _this.handleSwitchDisplay = function (event) {
-        _this.setState({ display: event.target.id });
-      }, _this.updateStateDate = function (date) {
-        if (Object.prototype.toString.call(date) === '[object Date]') {
-          _this.handleNewDate(date, false);
-        }
-      }, _this.actions = [{ label: _this.props.cancelLabel, className: _this.props.theme.button, onClick: _this.props.onDismiss }, { label: _this.props.okLabel, className: _this.props.theme.button, name: _this.props.name, onClick: _this.handleSelect }], _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(CalendarDialog, [{
-      key: 'componentWillMount',
-      value: function componentWillMount() {
-        this.updateStateDate(this.props.value);
-      }
-    }, {
-      key: 'componentWillReceiveProps',
-      value: function componentWillReceiveProps(nextProps) {
-        this.updateStateDate(nextProps.value);
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var theme = this.props.theme;
-
-        var display = this.state.display + 'Display';
-        var className = (0, _classnames2.default)(theme.dialog, this.props.className);
-        var headerClassName = (0, _classnames2.default)(theme.header, theme[display]);
-        var shortDayOfWeek = _time2.default.getShortDayOfWeek(this.state.date.getDay(), this.props.locale);
-        var shortMonth = _time2.default.getShortMonth(this.state.date, this.props.locale);
-        var date = this.state.date.getDate();
-
-        return _react2.default.createElement(
-          Dialog,
-          {
-            actions: this.actions,
-            active: this.props.active,
-            className: className,
-            onEscKeyDown: this.props.onEscKeyDown,
-            onOverlayClick: this.props.onOverlayClick,
-            type: 'custom'
-          },
-          _react2.default.createElement(
-            'header',
-            { className: headerClassName },
-            _react2.default.createElement(
-              'span',
-              { id: 'years', className: theme.year, onClick: this.handleSwitchDisplay },
-              this.state.date.getFullYear()
-            ),
-            _react2.default.createElement(
-              'h3',
-              { id: 'months', className: theme.date, onClick: this.handleSwitchDisplay },
-              shortDayOfWeek,
-              ', ',
-              shortMonth,
-              ' ',
-              date
-            )
-          ),
-          _react2.default.createElement(
-            'div',
-            { className: theme.calendarWrapper },
-            _react2.default.createElement(Calendar, {
-              display: this.state.display,
-              handleSelect: this.handleSelect,
-              maxDate: this.props.maxDate,
-              minDate: this.props.minDate,
-              onChange: this.handleNewDate,
-              selectedDate: this.state.date,
-              theme: this.props.theme,
-              locale: this.props.locale,
-              sundayFirstDayOfWeek: this.props.sundayFirstDayOfWeek })
-          )
-        );
-      }
-    }]);
-
-    return CalendarDialog;
-  }(_react.Component);
-
-  CalendarDialog.propTypes = {
-    active: _react.PropTypes.bool,
-    autoOk: _react.PropTypes.bool,
-    cancelLabel: _react.PropTypes.string,
-    className: _react.PropTypes.string,
-    locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
-    maxDate: _react.PropTypes.object,
-    minDate: _react.PropTypes.object,
-    name: _react.PropTypes.string,
-    okLabel: _react.PropTypes.string,
-    onDismiss: _react.PropTypes.func,
-    onEscKeyDown: _react.PropTypes.func,
-    onOverlayClick: _react.PropTypes.func,
-    onSelect: _react.PropTypes.func,
-    sundayFirstDayOfWeek: _react2.default.PropTypes.bool,
-    theme: _react.PropTypes.shape({
-      button: _react.PropTypes.string,
-      calendarWrapper: _react.PropTypes.string,
-      date: _react.PropTypes.string,
-      dialog: _react.PropTypes.string,
-      header: _react.PropTypes.string,
-      monthsDisplay: _react.PropTypes.string,
-      year: _react.PropTypes.string,
-      yearsDisplay: _react.PropTypes.string
-    }),
-    value: _react.PropTypes.object
-  };
-  CalendarDialog.defaultProps = {
-    active: false,
-    cancelLabel: 'Cancel',
-    className: '',
-    okLabel: 'Ok',
-    value: new Date()
-  };
-
-
-  return CalendarDialog;
-};
-
-exports.default = factory;
\ No newline at end of file
diff --git a/lib/date_picker/__test__/index.spec.js b/lib/date_picker/__test__/index.spec.js
deleted file mode 100644
index 169eba080..000000000
--- a/lib/date_picker/__test__/index.spec.js
+++ /dev/null
@@ -1,96 +0,0 @@
-'use strict';
-
-var _expect = require('expect');
-
-var _expect2 = _interopRequireDefault(_expect);
-
-var _theme = require('../theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-var _DatePicker = require('../DatePicker');
-
-var _testing = require('../../utils/testing');
-
-var _testing2 = _interopRequireDefault(_testing);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-describe('DatePickerDialog', function () {
-  describe('#on mount', function () {
-    it('passes value through to calendar if no maxDate/minDate specified', function () {
-      var value = new Date(2016, 1, 1);
-      var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, { theme: _theme2.default, value: value });
-      (0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(value);
-    });
-
-    describe('when minDate but not maxDate specified', function () {
-      var minDate = new Date(2016, 1, 2);
-
-      it('passes through a value after minDate', function () {
-        var value = new Date(2016, 1, 3);
-        var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, { theme: _theme2.default, value: value, minDate: minDate });
-        (0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(value);
-      });
-
-      it('sanitises a value before minDate to minDate', function () {
-        var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, {
-          theme: _theme2.default, value: new Date(2016, 1, 1), minDate: minDate
-        });
-        (0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(minDate);
-      });
-    });
-
-    describe('when maxDate but not minDate specified', function () {
-      var maxDate = new Date(2016, 1, 2);
-
-      it('passes through a value before maxDate', function () {
-        var value = new Date(2016, 1, 1);
-        var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, { theme: _theme2.default, value: value, maxDate: maxDate });
-        (0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(value);
-      });
-
-      it('sanitises a value after maxDate to maxDate', function () {
-        var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, {
-          theme: _theme2.default, value: new Date(2016, 1, 3), maxDate: maxDate
-        });
-        (0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(maxDate);
-      });
-    });
-
-    describe('if both minDate and maxDate are set', function () {
-      var minDate = new Date(2016, 1, 2);
-      var maxDate = new Date(2016, 1, 4);
-
-      it('sanitises value to minDate if value is before minDate', function () {
-        var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, {
-          theme: _theme2.default,
-          value: new Date(2016, 1, 1),
-          minDate: minDate,
-          maxDate: maxDate
-        });
-        (0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(minDate);
-      });
-
-      it('sanitises value to maxDate if value is after maxDate', function () {
-        var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, {
-          theme: _theme2.default,
-          value: new Date(2016, 1, 5),
-          minDate: minDate,
-          maxDate: maxDate
-        });
-        (0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(maxDate);
-      });
-
-      it('doesn\'t sanitise when value is between maxDate/minDate', function () {
-        var value = new Date(2016, 1, 3);
-        var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, { theme: _theme2.default, value: value, minDate: minDate, maxDate: maxDate });
-        (0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(value);
-      });
-    });
-
-    function getDatePassedToCalendar(wrapper) {
-      return wrapper.props.children[1].props.children.props.selectedDate;
-    }
-  });
-});
\ No newline at end of file
diff --git a/lib/date_picker/_config.scss b/lib/date_picker/_config.scss
deleted file mode 100644
index 62acee078..000000000
--- a/lib/date_picker/_config.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-$datepicker-primary: $color-primary !default;
-$datepicker-primary-contrast: $color-primary-contrast !default;
-$datepicker-primary-dark: $color-primary-dark !default;
-$datepicker-primary-color: $datepicker-primary !default;
-$datepicker-primary-hover-color: rgba($datepicker-primary, .2) !default;
-$datepicker-primary-contrast-color: $datepicker-primary-contrast !default;
-$datepicker-primary-dark-color: $datepicker-primary-dark !default;
-$datepicker-dialog-width: 33 * $unit !default;
-$datepicker-inactive-opacity: .6 !default;
-$datepicker-weekday-line-height: 2 * $unit !default;
-$datepicker-weekday-font-size: $font-size-small !default;
-$datepicker-month-font-size: $font-size-big !default;
-$datepicker-day-font-size: 5 * $unit !default;
-$datepicker-day-line-height: 4 * $unit !default;
-$datepicker-year-font-size: $font-size-small !default;
-
-$calendar-primary: $color-primary !default;
-$calendar-primary-contrast: $color-primary-contrast !default;
-$calendar-primary-color: $calendar-primary !default;
-$calendar-primary-contrast-color: $calendar-primary-contrast !default;
-$calendar-primary-hover-color: rgba($calendar-primary, .21) !default;
-$calendar-arrows-color: $palette-grey-600 !default;
-$calendar-arrows-font-size: 2 * $unit !default;
-$calendar-year-font-size: 2.4 * $unit !default;
-$calendar-day-font-size: 1.3 * $unit !default;
-$calendar-day-disable-opacity: 0.25 !default;
-$calendar-row-height: 3 * $unit !default;
-$calendar-day-padding-topbottom: .2 * $unit !default;
-$calendar-day-padding-leftright: 0 !default;
-$calendar-title-height: 3.6 * $unit !default;
-$calendar-total-height: $calendar-row-height * 7 + $calendar-title-height + $calendar-day-padding-topbottom * 12 !default;
diff --git a/lib/date_picker/index.d.ts b/lib/date_picker/index.d.ts
deleted file mode 100644
index 6a8ffe91e..000000000
--- a/lib/date_picker/index.d.ts
+++ /dev/null
@@ -1,153 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface DatePickerTheme {
-  /**
-   * Used for the active day and year.
-   */
-  active?: string;
-  /**
-   * Used for the buttons in the dialog.
-   */
-  button?: string;
-  /**
-   * Used for the calendar root element.
-   */
-  calendar?: string;
-  /**
-   * Used as wrapper for the calendar component inside dialog.
-   */
-  calendarWrapper?: string;
-  /**
-   * Used for the date element inside header.
-   */
-  date?: string;
-  /**
-   * Used for the day element inside the calendar.
-   */
-  day?: string;
-  /**
-   * Used for the list of days inside a month.
-   */
-  days?: string;
-  /**
-   * Used for the dialog component.
-   */
-  dialog?: string;
-  /**
-   * Added to day element when day is disabled.
-   */
-  disabled?: string;
-  /**
-   * Used for the dialog header,.
-   */
-  header?: string;
-  /**
-   * Used for Input element that opens the picker.
-   */
-  input?: string;
-  /**
-   * Used for the month root element.
-   */
-  month?: string;
-  /**
-   * Added to the root dialog when months are displayed.
-   */
-  monthsDisplay?: string;
-  /**
-   * Used for the next month icon.
-   */
-  next?: string;
-  /**
-   * Used for the prev month icon.
-   */
-  prev?: string;
-  /**
-   * Used for the month title element.
-   */
-  title?: string;
-  /**
-   * Used for the weekdays wrapper.
-   */
-  week?: string;
-  /**
-   * Used for the year element inside header.
-   */
-  year?: string;
-  /**
-   * Used for the years list in years view.
-   */
-  years?: string;
-  /**
-   * Added to the root dialog when years are displayed.
-   */
-  yearsDisplay?: string;
-}
-
-interface DatePickerProps extends ReactToolbox.Props {
-  /**
-   * Automatically selects a date upon clicking on a day
-   * @default false
-   */
-  autoOk?: boolean;
-  /**
-   * Give an error node to display under the field.
-   */
-  error?: string;
-  /**
-   * A key to identify an Icon from Material Design Icons or a custom Icon Element.
-   */
-  icon?: React.ReactNode | string;
-  /**
-   * This class will be applied to Input component of DatePicker.
-   */
-  inputClassName?: string;
-  /**
-   * Function to format the date displayed on the input.
-   */
-  inputFormat?: Function;
-  /**
-   * The text string to use for the floating label element in the input component.
-   */
-  label?: string;
-  /**
-   * Date object with the maximum selectable date.
-   */
-  maxDate?: Date;
-  /**
-   * Date object with the minimum selectable date.
-   */
-  minDate?: Date;
-  /**
-   * Name for the input field.
-   */
-  name?: string;
-  /**
-   * Callback called when the picker value is changed.
-   */
-  onChange?: Function;
-  /**
-   * Callback called when the ESC key is pressed with the overlay active.
-   */
-  onEscKeyDown?: Function;
-  /**
-   * Callback to be invoked when the dialog overlay is clicked.
-   */
-  onOverlayClick?: Function;
-  /**
-   * The input element will be readonly and look like disabled.
-   */
-  readonly?: boolean;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: DatePickerTheme;
-  /**
-   * Date object with the currently selected date.
-   */
-  value?: Date | string;
-}
-
-export class DatePicker extends React.Component<DatePickerProps, {}> { }
-
-export default DatePicker;
diff --git a/lib/date_picker/index.js b/lib/date_picker/index.js
deleted file mode 100644
index 887fdaf75..000000000
--- a/lib/date_picker/index.js
+++ /dev/null
@@ -1,48 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DatePickerDialog = exports.DatePicker = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _DatePicker = require('./DatePicker.js');
-
-var _DatePickerDialog = require('./DatePickerDialog.js');
-
-var _DatePickerDialog2 = _interopRequireDefault(_DatePickerDialog);
-
-var _Calendar = require('./Calendar.js');
-
-var _Calendar2 = _interopRequireDefault(_Calendar);
-
-var _button = require('../button');
-
-var _input = require('../input');
-
-var _input2 = _interopRequireDefault(_input);
-
-var _dialog = require('../dialog');
-
-var _dialog2 = _interopRequireDefault(_dialog);
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var Calendar = (0, _Calendar2.default)(_button.IconButton);
-var DatePickerDialog = (0, _DatePickerDialog2.default)(_dialog2.default, Calendar);
-var DatePicker = (0, _DatePicker.datePickerFactory)(_input2.default, DatePickerDialog);
-
-var ThemedDatePicker = (0, _reactCssThemr.themr)(_identifiers.DATE_PICKER, _theme2.default)(DatePicker);
-exports.default = ThemedDatePicker;
-exports.DatePicker = ThemedDatePicker;
-
-
-var ThemedDatePickerDialog = (0, _reactCssThemr.themr)(_identifiers.DIALOG, _theme2.default)(DatePickerDialog);
-exports.DatePickerDialog = ThemedDatePickerDialog;
\ No newline at end of file
diff --git a/lib/date_picker/theme.scss b/lib/date_picker/theme.scss
deleted file mode 100644
index a1ee39156..000000000
--- a/lib/date_picker/theme.scss
+++ /dev/null
@@ -1,156 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.input:not(.disabled) > .inputElement {
-  cursor: pointer;
-}
-
-.header {
-  padding: 1.6 * $unit 2 * $unit;
-  color: $datepicker-primary-contrast-color;
-  cursor: pointer;
-  background-color: $datepicker-primary-color;
-}
-
-.year {
-  display: inline-block;
-  font-size: $datepicker-year-font-size;
-  transition: opacity, font-size $animation-duration $animation-curve-default;
-}
-
-.date {
-  display: block;
-  font-weight: $font-weight-semi-bold;
-  text-transform: capitalize;
-  transition: opacity $animation-duration $animation-curve-default;
-}
-
-.calendarWrapper {
-  padding: $unit .5 * $unit 0;
-}
-
-.yearsDisplay {
-  .date {
-    opacity: $datepicker-inactive-opacity;
-  }
-  .year {
-    font-size: $font-size-normal;
-  }
-}
-
-.monthsDisplay {
-  .year {
-    opacity: $datepicker-inactive-opacity;
-  }
-}
-
-.dialog {
-  width: $datepicker-dialog-width;
-  > [role="body"] {
-    padding: 0;
-  }
-  > [role="navigation"] > .button {
-    color: $datepicker-primary-color;
-    &:hover {
-      background: $datepicker-primary-hover-color;
-    }
-    &:focus:not(:active) {
-      background: $datepicker-primary-hover-color;
-    }
-  }
-}
-
-.calendar {
-  position: relative;
-  height: $calendar-total-height;
-  overflow: hidden;
-  font-size: $font-size-small;
-  line-height: $calendar-row-height;
-  text-align: center;
-  background: $calendar-primary-contrast-color;
-  .prev, .next {
-    position: absolute;
-    top: 0;
-    z-index: $z-index-high;
-    height: 3.6 * $unit;
-    cursor: pointer;
-    opacity: .7;
-  }
-  .prev {
-    left: 0;
-  }
-  .next {
-    right: 0;
-  }
-}
-
-.title {
-  display: inline-block;
-  font-weight: 500;
-  line-height: $calendar-row-height;
-}
-
-.years {
-  height: 100%;
-  overflow-y: auto;
-  font-size: $font-size-big;
-  > li {
-    line-height: 2.4;
-    cursor: pointer;
-    &.active {
-      font-size: $calendar-year-font-size;
-      font-weight: $font-weight-semi-bold;
-      color: $calendar-primary-color;
-    }
-  }
-}
-
-.week {
-  display: flex;
-  height: $calendar-row-height;
-  flex-wrap: wrap;
-  font-size: $calendar-day-font-size;
-  line-height: $calendar-row-height;
-  opacity: .5;
-  > span {
-    flex: 0 0 (100% / 7);
-  }
-}
-
-.days {
-  display: flex;
-  flex-wrap: wrap;
-  font-size: $calendar-day-font-size;
-}
-
-.day {
-  flex: 0 0 (100% / 7);
-  padding: $calendar-day-padding-topbottom $calendar-day-padding-leftright;
-  > span {
-    display: inline-block;
-    width: $calendar-row-height;
-    height: $calendar-row-height;
-    line-height: $calendar-row-height;
-    border-radius: 50%;
-  }
-  &:hover:not(.active):not(.disabled) > span {
-    color: $calendar-primary-contrast-color;
-    background: $calendar-primary-hover-color;
-  }
-  &.active > span {
-    color: $calendar-primary-contrast-color;
-    background: $calendar-primary-color;
-  }
-  &:hover:not(.disabled) > span {
-    cursor: pointer;
-  }
-  &.disabled {
-    opacity: $calendar-day-disable-opacity;
-  }
-}
-
-.month {
-  background-color: $calendar-primary-contrast-color;
-}
diff --git a/lib/dialog/Dialog.js b/lib/dialog/Dialog.js
deleted file mode 100644
index 05e044d50..000000000
--- a/lib/dialog/Dialog.js
+++ /dev/null
@@ -1,113 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.dialogFactory = exports.Dialog = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _classnames3 = require('classnames');
-
-var _classnames4 = _interopRequireDefault(_classnames3);
-
-var _identifiers = require('../identifiers.js');
-
-var _ActivableRenderer = require('../hoc/ActivableRenderer.js');
-
-var _ActivableRenderer2 = _interopRequireDefault(_ActivableRenderer);
-
-var _Button = require('../button/Button.js');
-
-var _Button2 = _interopRequireDefault(_Button);
-
-var _Overlay = require('../overlay/Overlay.js');
-
-var _Overlay2 = _interopRequireDefault(_Overlay);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var factory = function factory(Overlay, Button) {
-  var Dialog = function Dialog(props) {
-    var actions = props.actions.map(function (action, idx) {
-      var className = (0, _classnames4.default)(props.theme.button, _defineProperty({}, action.className, action.className));
-      return _react2.default.createElement(Button, _extends({ key: idx }, action, { className: className }));
-    });
-
-    var className = (0, _classnames4.default)([props.theme.dialog, props.theme[props.type]], _defineProperty({}, props.theme.active, props.active), props.className);
-
-    return _react2.default.createElement(
-      Overlay,
-      {
-        active: props.active,
-        onClick: props.onOverlayClick,
-        onEscKeyDown: props.onEscKeyDown,
-        onMouseDown: props.onOverlayMouseDown,
-        onMouseMove: props.onOverlayMouseMove,
-        onMouseUp: props.onOverlayMouseUp
-      },
-      _react2.default.createElement(
-        'div',
-        { 'data-react-toolbox': 'dialog', className: className },
-        _react2.default.createElement(
-          'section',
-          { role: 'body', className: props.theme.body },
-          props.title ? _react2.default.createElement(
-            'h6',
-            { className: props.theme.title },
-            props.title
-          ) : null,
-          props.children
-        ),
-        actions.length ? _react2.default.createElement(
-          'nav',
-          { role: 'navigation', className: props.theme.navigation },
-          actions
-        ) : null
-      )
-    );
-  };
-
-  Dialog.propTypes = {
-    actions: _react.PropTypes.array,
-    active: _react.PropTypes.bool,
-    children: _react.PropTypes.node,
-    className: _react.PropTypes.string,
-    onEscKeyDown: _react.PropTypes.func,
-    onOverlayClick: _react.PropTypes.func,
-    onOverlayMouseDown: _react.PropTypes.func,
-    onOverlayMouseMove: _react.PropTypes.func,
-    onOverlayMouseUp: _react.PropTypes.func,
-    theme: _react.PropTypes.shape({
-      active: _react.PropTypes.string,
-      body: _react.PropTypes.string,
-      button: _react.PropTypes.string,
-      dialog: _react.PropTypes.string,
-      navigation: _react.PropTypes.string,
-      title: _react.PropTypes.string
-    }),
-    title: _react.PropTypes.string,
-    type: _react.PropTypes.string
-  };
-
-  Dialog.defaultProps = {
-    actions: [],
-    active: false,
-    type: 'normal'
-  };
-
-  return (0, _ActivableRenderer2.default)()(Dialog);
-};
-
-var Dialog = factory(_Overlay2.default, _Button2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.DIALOG)(Dialog);
-exports.Dialog = Dialog;
-exports.dialogFactory = factory;
\ No newline at end of file
diff --git a/lib/dialog/_config.scss b/lib/dialog/_config.scss
deleted file mode 100644
index c522075c9..000000000
--- a/lib/dialog/_config.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-$dialog-border-radius: .2 * $unit !default;
-$dialog-color-title: $color-black !default;
-$dialog-color-white: $color-white !default;
-$dialog-content-padding: 2.4 * $unit !default;
-$dialog-navigation-padding: .8 * $unit !default;
-$dialog-translate-y: 4 * $unit !default;
diff --git a/lib/dialog/index.d.ts b/lib/dialog/index.d.ts
deleted file mode 100644
index eb95ee3ae..000000000
--- a/lib/dialog/index.d.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface DialogTheme {
-  /**
-   * Used for the root when the dialog is active.
-   */
-  active?: string;
-  /**
-   * Used to wrap the dialog body.
-   */
-  body?: string;
-  /**
-   * Used in buttons when the dialog implements actions.
-   */
-  button?: string;
-  /**
-   * Used for the root element.
-   */
-  dialog?: string;
-  /**
-   * Used for the navigation element when it implements actions.
-   */
-  navigation?: string;
-  /**
-   * Used for the title element of the dialog.
-   */
-  title?: string;
-}
-
-interface DialogActionProps {
-  /**
-   * The text string to use for the name of the button.
-   */
-  label?: string;
-  /**
-   * Callback called when the component is clicked.
-   */
-  onClick?: Function;
-}
-
-interface DialogProps extends ReactToolbox.Props {
-  /**
-   * A array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons.
-   */
-  actions?: DialogActionProps[];
-  /**
-   * If true, the dialog will be active.
-   * @default false
-   */
-  active?: boolean;
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * Callback called when the ESC key is pressed with the overlay active.
-   */
-  onEscKeyDown?: Function;
-  /**
-   * Callback to be invoked when the dialog overlay is clicked.
-   */
-  onOverlayClick?: Function;
-  /**
-   * Callback called when the mouse button is pressed on the overlay.
-   */
-  onOverlayMouseDown?: Function;
-  /**
-   * Callback called when the mouse is moving over the overlay.
-   */
-  onOverlayMouseMove?: Function;
-  /**
-   * Callback called when the mouse button is released over the overlay.
-   */
-  onOverlayMouseUp?: Function;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: DialogTheme;
-  /**
-   * The text string to use as standar title of the dialog.
-   */
-  title?: string;
-  /**
-   * Used to determine the size of the dialog. It can be small, normal or large.
-   * @default normal
-   */
-  type?: string;
-}
-
-export class Dialog extends React.Component<DialogProps, {}> { }
-
-export default Dialog;
diff --git a/lib/dialog/index.js b/lib/dialog/index.js
deleted file mode 100644
index 5a81c7e2c..000000000
--- a/lib/dialog/index.js
+++ /dev/null
@@ -1,32 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Dialog = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Dialog = require('./Dialog.js');
-
-var _overlay = require('../overlay');
-
-var _overlay2 = _interopRequireDefault(_overlay);
-
-var _button = require('../button');
-
-var _button2 = _interopRequireDefault(_button);
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var Dialog = (0, _Dialog.dialogFactory)(_overlay2.default, _button2.default);
-var ThemedDialog = (0, _reactCssThemr.themr)(_identifiers.DIALOG, _theme2.default)(Dialog);
-
-exports.default = ThemedDialog;
-exports.Dialog = ThemedDialog;
\ No newline at end of file
diff --git a/lib/dialog/theme.scss b/lib/dialog/theme.scss
deleted file mode 100644
index 8757bdf0b..000000000
--- a/lib/dialog/theme.scss
+++ /dev/null
@@ -1,86 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.dialog {
-  display: flex;
-  max-width: 96vw;
-  max-height: 96vh;
-  flex-direction: column;
-  background-color: $dialog-color-white;
-  border-radius: $dialog-border-radius;
-  box-shadow: $zdepth-shadow-5;
-  opacity: 0;
-  transition-delay: $animation-delay;
-  transition-timing-function: $animation-curve-default;
-  transition-duration: $animation-duration;
-  transition-property: opacity, transform;
-  transform: translateY(-$dialog-translate-y);
-  &.active {
-    opacity: 1;
-    transform: translateY(0%);
-  }
-}
-
-.small {
-  width: 30vw;
-
-  @media screen and (max-width: $layout-breakpoint-sm-tablet) {
-    width: 50vw;
-  }
-
-  @media screen and (max-width: $layout-breakpoint-xs) {
-    width: 75vw;
-  }
-}
-
-.normal {
-  width: 50vw;
-
-  @media screen and (max-width: $layout-breakpoint-xs) {
-    width: 96vw;
-  }
-}
-
-.large {
-  width: 96vw;
-}
-
-.fullscreen {
-  width: 96vw;
-
-  @media screen and (max-width: $layout-breakpoint-xs) {
-    width: 100vw;
-    max-width: 100vw;
-    min-height: 100vh;
-    max-height: 100vh;
-    border-radius: 0;
-  }
-}
-
-.title {
-  @include typo-title();
-  flex-grow: 0;
-  margin-bottom: 1.6 * $unit;
-  color: $dialog-color-title;
-}
-
-.body {
-  flex-grow: 2;
-  padding: $dialog-content-padding;
-  color: $color-text-secondary;
-}
-
-.navigation {
-  flex-grow: 0;
-  padding: $dialog-navigation-padding;
-  text-align: right;
-}
-
-.button {
-  min-width: 0;
-  padding-right: $dialog-navigation-padding;
-  padding-left: $dialog-navigation-padding;
-  margin-left: $dialog-navigation-padding;
-}
diff --git a/lib/drawer/Drawer.js b/lib/drawer/Drawer.js
deleted file mode 100644
index 608253e8e..000000000
--- a/lib/drawer/Drawer.js
+++ /dev/null
@@ -1,85 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Drawer = exports.drawerFactory = undefined;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _identifiers = require('../identifiers.js');
-
-var _ActivableRenderer = require('../hoc/ActivableRenderer.js');
-
-var _ActivableRenderer2 = _interopRequireDefault(_ActivableRenderer);
-
-var _Overlay = require('../overlay/Overlay.js');
-
-var _Overlay2 = _interopRequireDefault(_Overlay);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var factory = function factory(Overlay) {
-  var Drawer = function Drawer(_ref) {
-    var active = _ref.active,
-        children = _ref.children,
-        className = _ref.className,
-        onOverlayClick = _ref.onOverlayClick,
-        theme = _ref.theme,
-        type = _ref.type;
-
-    var _className = (0, _classnames3.default)([theme.drawer, theme[type]], _defineProperty({}, theme.active, active), className);
-
-    return _react2.default.createElement(
-      Overlay,
-      { active: active, onClick: onOverlayClick },
-      _react2.default.createElement(
-        'div',
-        { 'data-react-toolbox': 'drawer', className: _className },
-        _react2.default.createElement(
-          'aside',
-          { className: theme.content },
-          children
-        )
-      )
-    );
-  };
-
-  Drawer.propTypes = {
-    active: _react.PropTypes.bool,
-    children: _react.PropTypes.node,
-    className: _react.PropTypes.string,
-    onOverlayClick: _react.PropTypes.func,
-    theme: _react.PropTypes.shape({
-      active: _react.PropTypes.string,
-      content: _react.PropTypes.string,
-      drawer: _react.PropTypes.string,
-      left: _react.PropTypes.string,
-      right: _react.PropTypes.string
-    }),
-    type: _react.PropTypes.oneOf(['left', 'right'])
-  };
-
-  Drawer.defaultProps = {
-    active: false,
-    className: '',
-    type: 'left'
-  };
-
-  return (0, _ActivableRenderer2.default)()(Drawer);
-};
-
-var Drawer = factory(_Overlay2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.DRAWER)(Drawer);
-exports.drawerFactory = factory;
-exports.Drawer = Drawer;
\ No newline at end of file
diff --git a/lib/drawer/_config.scss b/lib/drawer/_config.scss
deleted file mode 100644
index 2401bc696..000000000
--- a/lib/drawer/_config.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-$drawer-background-color: $palette-grey-50 !default;
-$drawer-border-color: $palette-grey-300 !default;
-$drawer-text-color: $palette-grey-800 !default;
-$drawer-width: 24 * $unit !default;
diff --git a/lib/drawer/index.d.ts b/lib/drawer/index.d.ts
deleted file mode 100644
index 2c0a84783..000000000
--- a/lib/drawer/index.d.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface DrawerTheme {
-  /**
-   * Used for the root class when the drawer is active.
-   */
-  active?: string;
-  /**
-   * Used for the drawer content.
-   */
-  content?: string;
-  /**
-   * Root class.
-   */
-  drawer?: string;
-  /**
-   * Added to the root class when drawer is to the left.
-   */
-  left?: string;
-  /**
-   * Added to the root class when drawer is to the right.
-   */
-  right?: string;
-}
-
-interface DrawerProps extends ReactToolbox.Props {
-  /**
-   * If true, the drawer will be visible.
-   * @default false
-   */
-  active?: boolean;
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * Callback function to be invoked when the overlay is clicked.
-   */
-  onOverlayClick?: Function;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: DrawerTheme;
-  /**
-   * Type of drawer. It can be left or right to display the drawer on the left or right side of the screen.
-   * @default left
-   */
-  type?: "left" | "right";
-}
-
-export class Drawer extends React.Component<DrawerProps, {}> { }
-
-export default Drawer;
diff --git a/lib/drawer/index.js b/lib/drawer/index.js
deleted file mode 100644
index 71d9a5ecc..000000000
--- a/lib/drawer/index.js
+++ /dev/null
@@ -1,26 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Drawer = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _overlay = require('../overlay');
-
-var _Drawer = require('./Drawer.js');
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var Drawer = (0, _Drawer.drawerFactory)(_overlay.Overlay);
-var ThemedDrawer = (0, _reactCssThemr.themr)(_identifiers.DRAWER, _theme2.default)(Drawer);
-
-exports.default = ThemedDrawer;
-exports.Drawer = ThemedDrawer;
\ No newline at end of file
diff --git a/lib/drawer/theme.scss b/lib/drawer/theme.scss
deleted file mode 100644
index a089640a3..000000000
--- a/lib/drawer/theme.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.drawer {
-  @include shadow-2dp();
-  position: absolute;
-  top: 0;
-  display: block;
-  width: $drawer-width;
-  height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-  color: $drawer-text-color;
-  pointer-events: none;
-  background-color: $drawer-background-color;
-  transition-delay: 0s;
-  transition-timing-function: $animation-curve-default;
-  transition-duration: $animation-duration;
-  transition-property: transform;
-  transform-style: preserve-3d;
-  will-change: transform;
-  &.active {
-    pointer-events: all;
-    transition-delay: $animation-delay;
-    transform: translateX(0);
-  }
-  &.right {
-    right: 0;
-    border-left: 1px solid $drawer-border-color;
-    &:not(.active) {
-      transform: translateX(100%);
-    }
-  }
-  &.left {
-    left: 0;
-    border-right: 1px solid $drawer-border-color;
-    &:not(.active) {
-      transform: translateX(- 100%);
-    }
-  }
-}
diff --git a/lib/dropdown/Dropdown.js b/lib/dropdown/Dropdown.js
deleted file mode 100644
index 55994c8ac..000000000
--- a/lib/dropdown/Dropdown.js
+++ /dev/null
@@ -1,304 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Dropdown = exports.dropdownFactory = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactDom = require('react-dom');
-
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
-var _classnames3 = require('classnames');
-
-var _classnames4 = _interopRequireDefault(_classnames3);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Input = require('../input/Input.js');
-
-var _Input2 = _interopRequireDefault(_Input);
-
-var _events = require('../utils/events.js');
-
-var _events2 = _interopRequireDefault(_events);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(Input) {
-  var Dropdown = function (_Component) {
-    _inherits(Dropdown, _Component);
-
-    function Dropdown() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, Dropdown);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Dropdown.__proto__ || Object.getPrototypeOf(Dropdown)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-        active: false,
-        up: false
-      }, _this.getDocumentEvents = function () {
-        return {
-          click: _this.handleDocumentClick,
-          touchend: _this.handleDocumentClick
-        };
-      }, _this.open = function () {
-        var client = event.target.getBoundingClientRect();
-        var screenHeight = window.innerHeight || document.documentElement.offsetHeight;
-        var up = _this.props.auto ? client.top > screenHeight / 2 + client.height : false;
-        if (_this.inputNode) _this.inputNode.blur();
-        _this.setState({ active: true, up: up });
-      }, _this.close = function () {
-        if (_this.state.active) {
-          _this.setState({ active: false });
-        }
-      }, _this.handleDocumentClick = function (event) {
-        if (_this.state.active && !_events2.default.targetIsDescendant(event, _reactDom2.default.findDOMNode(_this))) {
-          _this.setState({ active: false });
-        }
-      }, _this.handleClick = function (event) {
-        _this.open();
-        _events2.default.pauseEvent(event);
-        if (_this.props.onClick) _this.props.onClick(event);
-      }, _this.handleSelect = function (item, event) {
-        if (_this.props.onBlur) _this.props.onBlur(event);
-        if (!_this.props.disabled && _this.props.onChange) {
-          if (_this.props.name) {
-            event.target.name = _this.props.name;
-          }
-          _this.props.onChange(item, event);
-          _this.close();
-        }
-      }, _this.getSelectedItem = function () {
-        var _iteratorNormalCompletion = true;
-        var _didIteratorError = false;
-        var _iteratorError = undefined;
-
-        try {
-          for (var _iterator = _this.props.source[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-            var item = _step.value;
-
-            if (item.value === _this.props.value) return item;
-          }
-        } catch (err) {
-          _didIteratorError = true;
-          _iteratorError = err;
-        } finally {
-          try {
-            if (!_iteratorNormalCompletion && _iterator.return) {
-              _iterator.return();
-            }
-          } finally {
-            if (_didIteratorError) {
-              throw _iteratorError;
-            }
-          }
-        }
-
-        if (!_this.props.allowBlank) {
-          return _this.props.source[0];
-        }
-      }, _this.renderValue = function (item, idx) {
-        var theme = _this.props.theme;
-
-        var className = item.value === _this.props.value ? theme.selected : null;
-        return _react2.default.createElement(
-          'li',
-          { key: idx, className: className, onClick: _this.handleSelect.bind(_this, item.value) },
-          _this.props.template ? _this.props.template(item) : item.label
-        );
-      }, _this.handleFocus = function (event) {
-        event.stopPropagation();
-        if (!_this.props.disabled) _this.open();
-        if (_this.props.onFocus) _this.props.onFocus(event);
-      }, _this.handleBlur = function (event) {
-        event.stopPropagation();
-        if (_this.state.active) _this.close();
-        if (_this.props.onBlur) _this.props.onBlur(event);
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(Dropdown, [{
-      key: 'componentWillUpdate',
-      value: function componentWillUpdate(nextProps, nextState) {
-        if (!this.state.active && nextState.active) {
-          _events2.default.addEventsToDocument(this.getDocumentEvents());
-        }
-      }
-    }, {
-      key: 'componentDidUpdate',
-      value: function componentDidUpdate(prevProps, prevState) {
-        if (prevState.active && !this.state.active) {
-          _events2.default.removeEventsFromDocument(this.getDocumentEvents());
-        }
-      }
-    }, {
-      key: 'componentWillUnmount',
-      value: function componentWillUnmount() {
-        if (this.state.active) {
-          _events2.default.removeEventsFromDocument(this.getDocumentEvents());
-        }
-      }
-    }, {
-      key: 'renderTemplateValue',
-      value: function renderTemplateValue(selected) {
-        var _classnames;
-
-        var theme = this.props.theme;
-
-        var className = (0, _classnames4.default)(theme.field, (_classnames = {}, _defineProperty(_classnames, theme.errored, this.props.error), _defineProperty(_classnames, theme.disabled, this.props.disabled), _defineProperty(_classnames, theme.required, this.props.required), _classnames));
-
-        return _react2.default.createElement(
-          'div',
-          { className: className, onClick: this.handleClick },
-          _react2.default.createElement(
-            'div',
-            { className: theme.templateValue + ' ' + theme.value },
-            this.props.template(selected)
-          ),
-          this.props.label ? _react2.default.createElement(
-            'label',
-            { className: theme.label },
-            this.props.label,
-            this.props.required ? _react2.default.createElement(
-              'span',
-              { className: theme.required },
-              ' * '
-            ) : null
-          ) : null,
-          this.props.error ? _react2.default.createElement(
-            'span',
-            { className: theme.error },
-            this.props.error
-          ) : null
-        );
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var _classnames2,
-            _this2 = this;
-
-        var _props = this.props,
-            allowBlank = _props.allowBlank,
-            auto = _props.auto,
-            required = _props.required,
-            onChange = _props.onChange,
-            onFocus = _props.onFocus,
-            onBlur = _props.onBlur,
-            source = _props.source,
-            template = _props.template,
-            theme = _props.theme,
-            others = _objectWithoutProperties(_props, ['allowBlank', 'auto', 'required', 'onChange', 'onFocus', 'onBlur', 'source', 'template', 'theme']);
-
-        var selected = this.getSelectedItem();
-        var className = (0, _classnames4.default)(theme.dropdown, (_classnames2 = {}, _defineProperty(_classnames2, theme.up, this.state.up), _defineProperty(_classnames2, theme.active, this.state.active), _defineProperty(_classnames2, theme.disabled, this.props.disabled), _defineProperty(_classnames2, theme.required, this.props.required), _classnames2), this.props.className);
-
-        return _react2.default.createElement(
-          'div',
-          {
-            className: className,
-            'data-react-toolbox': 'dropdown',
-            onBlur: this.handleBlur,
-            onFocus: this.handleFocus,
-            tabIndex: '0'
-          },
-          _react2.default.createElement(Input, _extends({}, others, {
-            tabIndex: '-1',
-            className: theme.value,
-            onClick: this.handleClick,
-            required: this.props.required,
-            readOnly: true,
-            ref: function ref(node) {
-              _this2.inputNode = node && node.getWrappedInstance();
-            },
-            type: template && selected ? 'hidden' : null,
-            value: selected && selected.label ? selected.label : ''
-          })),
-          template && selected ? this.renderTemplateValue(selected) : null,
-          _react2.default.createElement(
-            'ul',
-            { className: theme.values, ref: 'values' },
-            source.map(this.renderValue)
-          )
-        );
-      }
-    }]);
-
-    return Dropdown;
-  }(_react.Component);
-
-  Dropdown.propTypes = {
-    allowBlank: _react.PropTypes.bool,
-    auto: _react.PropTypes.bool,
-    className: _react.PropTypes.string,
-    disabled: _react.PropTypes.bool,
-    error: _react.PropTypes.string,
-    label: _react.PropTypes.string,
-    name: _react.PropTypes.string,
-    onBlur: _react.PropTypes.func,
-    onChange: _react.PropTypes.func,
-    onClick: _react.PropTypes.func,
-    onFocus: _react.PropTypes.func,
-    required: _react.PropTypes.bool,
-    source: _react.PropTypes.array.isRequired,
-    template: _react.PropTypes.func,
-    theme: _react.PropTypes.shape({
-      active: _react.PropTypes.string,
-      disabled: _react.PropTypes.string,
-      dropdown: _react.PropTypes.string,
-      error: _react.PropTypes.string,
-      errored: _react.PropTypes.string,
-      field: _react.PropTypes.string,
-      label: _react.PropTypes.string,
-      required: _react.PropTypes.string,
-      selected: _react.PropTypes.string,
-      templateValue: _react.PropTypes.string,
-      up: _react.PropTypes.string,
-      value: _react.PropTypes.string,
-      values: _react.PropTypes.string
-    }),
-    value: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number])
-  };
-  Dropdown.defaultProps = {
-    auto: true,
-    className: '',
-    allowBlank: true,
-    disabled: false,
-    required: false
-  };
-
-
-  return Dropdown;
-};
-
-var Dropdown = factory(_Input2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.DROPDOWN)(Dropdown);
-exports.dropdownFactory = factory;
-exports.Dropdown = Dropdown;
\ No newline at end of file
diff --git a/lib/dropdown/_config.scss b/lib/dropdown/_config.scss
deleted file mode 100644
index 364815c0b..000000000
--- a/lib/dropdown/_config.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-$dropdown-color-white: $color-white !default;
-$dropdown-color-primary: $color-primary !default;
-$dropdown-color-primary-contrast: $color-primary-contrast !default;
-$dropdown-value-hover-background: $palette-grey-200 !default;
-$dropdown-overflow-max-height: 45vh !default;
-$dropdown-value-border-radius: .2 * $unit !default;
diff --git a/lib/dropdown/index.d.ts b/lib/dropdown/index.d.ts
deleted file mode 100644
index 2c0f207ed..000000000
--- a/lib/dropdown/index.d.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface DropdownTheme {
-  /**
-   * Added to the root element when the dropdown is active.
-   */
-  active?: string;
-  /**
-   * Added to the root element when it's disabled.
-   */
-  disabled?: string;
-  /**
-   * Root element class.
-   */
-  dropdown?: string;
-  /**
-   * Used for the error element.
-   */
-  error?: string;
-  /**
-   * Added to the inner wrapper if it's errored.
-   */
-  errored?: string;
-  /**
-   * Used for the inner wrapper of the component.
-   */
-  field?: string;
-  /**
-   * Used for the the label element.
-   */
-  label?: string;
-  /**
-   * Used to highlight the selected value.
-   */
-  selected?: string;
-  /**
-   * Used as a wrapper for the given template value.
-   */
-  templateValue?: string;
-  /**
-   * Added to the root element when it's opening up.
-   */
-  up?: string;
-  /**
-   * Used for each value in the dropdown component.
-   */
-  value?: string;
-  /**
-   * Used for the list of values.
-   */
-  values?: string;
-}
-
-interface DropdownProps extends ReactToolbox.Props {
-  /**
-   * If true the dropdown will preselect the first item if the supplied value matches none of the options' values.
-   * @default true
-   */
-  allowBlank?: boolean;
-  /**
-   * If true, the dropdown will open up or down depending on the position in the screen.
-   * @default true
-   */
-  auto?: boolean;
-  /**
-   * Set the component as disabled.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * Give an error string to display under the field.
-   */
-  error?: string;
-  /**
-   * The text string to use for the floating label element.
-   */
-  label?: string;
-  /**
-   * Name for the input field.
-   */
-  name?: string;
-  /**
-   * Callback function that is fired when the component is blurred.
-   */
-  onBlur?: Function;
-  /**
-   * Callback function that is fired when the component's value changes.
-   */
-  onChange?: Function;
-  /**
-   * Callback function that is fired when the component is focused.
-   */
-  onFocus?: Function;
-  /**
-   * Array of data objects with the data to represent in the dropdown.
-   */
-  source: any[];
-  /**
-   * Callback function that returns a JSX template to represent the element.
-   */
-  template?: Function;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: DropdownTheme;
-  /**
-   * Default value using JSON data.
-   */
-  value?: string | number;
-}
-
-export class Dropdown extends React.Component<DropdownProps, {}> { }
-
-export default Dropdown;
diff --git a/lib/dropdown/index.js b/lib/dropdown/index.js
deleted file mode 100644
index b2de898e7..000000000
--- a/lib/dropdown/index.js
+++ /dev/null
@@ -1,26 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Dropdown = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Dropdown = require('./Dropdown.js');
-
-var _input = require('../input');
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var Dropdown = (0, _Dropdown.dropdownFactory)(_input.Input);
-var ThemedDropdown = (0, _reactCssThemr.themr)(_identifiers.DROPDOWN, _theme2.default)(Dropdown);
-
-exports.default = ThemedDropdown;
-exports.Dropdown = ThemedDropdown;
\ No newline at end of file
diff --git a/lib/dropdown/theme.scss b/lib/dropdown/theme.scss
deleted file mode 100644
index 607afa2a6..000000000
--- a/lib/dropdown/theme.scss
+++ /dev/null
@@ -1,138 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/input/config";
-@import "http://github.com/config";
-
-.dropdown {
-  position: relative;
-  &:not(.active) {
-    > .values {
-      max-height: 0;
-      visibility: hidden;
-    }
-  }
-  &.active {
-    > .label, > .value {
-      opacity: .5;
-    }
-    > .values {
-      max-height: $dropdown-overflow-max-height;
-      visibility: visible;
-      box-shadow: $zdepth-shadow-1;
-    }
-  }
-  &:not(.up) > .values {
-    top: 0;
-    bottom: auto;
-  }
-  &.up > .values {
-    top: auto;
-    bottom: 0;
-  }
-  &.disabled {
-    pointer-events: none;
-    cursor: normal;
-  }
-}
-
-.value {
-  > input {
-    cursor: pointer;
-  }
-  &:after {
-    $size: ($input-field-height / 7);
-    $border: $size solid transparent;
-    position: absolute;
-    top: 50%;
-    right: $input-chevron-offset;
-    width: 0;
-    height: 0;
-    pointer-events: none;
-    content: "";
-    border-top: $size solid $input-text-bottom-border-color;
-    border-right: $border;
-    border-left: $border;
-    transition: transform $animation-duration $animation-curve-default;
-  }
-}
-
-.field {
-  position: relative;
-  padding: $input-padding 0;
-  cursor: pointer;
-  &.errored {
-    padding-bottom: 0;
-    > .label {
-      color: $input-text-error-color;
-    }
-    > .templateValue {
-      border-bottom: 1px solid $input-text-error-color;
-    }
-    > .label > .required {
-      color: $input-text-required-color;
-    }
-  }
-  &.disabled {
-    pointer-events: none;
-    cursor: normal;
-    > .templateValue {
-      border-bottom-style: dotted;
-      opacity: .7;
-    }
-  }
-}
-
-.templateValue {
-  position: relative;
-  min-height: $input-field-height;
-  padding: $input-field-padding 0;
-  color: $color-text;
-  background-color: $input-text-background-color;
-  border-bottom: 1px solid $input-text-bottom-border-color;
-}
-
-.label {
-  position: absolute;
-  top: $input-focus-label-top;
-  left: 0;
-  font-size: $input-label-font-size;
-  line-height: $input-field-font-size;
-  color: $input-text-label-color;
-  .required {
-    color: $input-text-required-color;
-  }
-}
-
-.error {
-  margin-bottom: - $input-underline-height;
-  font-size: $input-label-font-size;
-  line-height: $input-underline-height;
-  color: $input-text-error-color;
-}
-
-.values {
-  @include no-webkit-scrollbar;
-  position: absolute;
-  z-index: $z-index-high;
-  width: 100%;
-  overflow-y: auto;
-  list-style: none;
-  background-color: $dropdown-color-white;
-  border-radius: $dropdown-value-border-radius;
-  transition-timing-function: $animation-curve-default;
-  transition-duration: $animation-duration;
-  transition-property: max-height, box-shadow;
-  > * {
-    position: relative;
-    padding: $unit;
-    overflow: hidden;
-    cursor: pointer;
-    &:hover {
-      background-color: $dropdown-value-hover-background;
-    }
-    &.selected {
-      color: $dropdown-color-primary;
-    }
-  }
-}
diff --git a/lib/font_icon/FontIcon.js b/lib/font_icon/FontIcon.js
deleted file mode 100644
index 5438cac44..000000000
--- a/lib/font_icon/FontIcon.js
+++ /dev/null
@@ -1,50 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FontIcon = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-var FontIcon = function FontIcon(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      value = _ref.value,
-      other = _objectWithoutProperties(_ref, ['children', 'className', 'value']);
-
-  return _react2.default.createElement(
-    'span',
-    _extends({
-      'data-react-toolbox': 'font-icon',
-      className: (0, _classnames2.default)({ 'material-icons': typeof value === 'string' || typeof children === 'string' }, className)
-    }, other),
-    value,
-    children
-  );
-};
-
-FontIcon.propTypes = {
-  children: _react.PropTypes.any,
-  className: _react.PropTypes.string,
-  value: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element])
-};
-
-FontIcon.defaultProps = {
-  className: ''
-};
-
-exports.default = FontIcon;
-exports.FontIcon = FontIcon;
\ No newline at end of file
diff --git a/lib/font_icon/index.d.ts b/lib/font_icon/index.d.ts
deleted file mode 100644
index 11ca3c014..000000000
--- a/lib/font_icon/index.d.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-interface FontIconProps extends ReactToolbox.Props {
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * The key string for the icon you want be displayed.
-   */
-  value?: React.ReactNode | string;
-}
-
-export class FontIcon extends React.Component<FontIconProps, {}> { }
-
-export default FontIcon;
diff --git a/lib/font_icon/index.js b/lib/font_icon/index.js
deleted file mode 100644
index 8f7ca8346..000000000
--- a/lib/font_icon/index.js
+++ /dev/null
@@ -1,15 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FontIcon = undefined;
-
-var _FontIcon = require('./FontIcon.js');
-
-var _FontIcon2 = _interopRequireDefault(_FontIcon);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = _FontIcon2.default;
-exports.FontIcon = _FontIcon2.default;
\ No newline at end of file
diff --git a/lib/form/Form.js b/lib/form/Form.js
deleted file mode 100644
index fe56e77f7..000000000
--- a/lib/form/Form.js
+++ /dev/null
@@ -1,151 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Form = exports.formFactory = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _Autocomplete = require('../autocomplete/Autocomplete.js');
-
-var _Autocomplete2 = _interopRequireDefault(_Autocomplete);
-
-var _Button = require('../button/Button.js');
-
-var _Button2 = _interopRequireDefault(_Button);
-
-var _Checkbox = require('../checkbox/Checkbox.js');
-
-var _Checkbox2 = _interopRequireDefault(_Checkbox);
-
-var _DatePicker = require('../date_picker/DatePicker.js');
-
-var _DatePicker2 = _interopRequireDefault(_DatePicker);
-
-var _Dropdown = require('../dropdown/Dropdown.js');
-
-var _Dropdown2 = _interopRequireDefault(_Dropdown);
-
-var _Input = require('../input/Input.js');
-
-var _Input2 = _interopRequireDefault(_Input);
-
-var _RadioGroup = require('../radio/RadioGroup.js');
-
-var _RadioGroup2 = _interopRequireDefault(_RadioGroup);
-
-var _Slider = require('../slider/Slider.js');
-
-var _Slider2 = _interopRequireDefault(_Slider);
-
-var _Switch = require('../switch/Switch.js');
-
-var _Switch2 = _interopRequireDefault(_Switch);
-
-var _TimePicker = require('../time_picker/TimePicker.js');
-
-var _TimePicker2 = _interopRequireDefault(_TimePicker);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(Autocomplete, Button, Checkbox, DatePicker, Dropdown, Input, RadioGroup, Slider, Switch, TimePicker) {
-
-  var COMPONENTS = {
-    'autocomplete': Autocomplete,
-    'button': Button,
-    'checkbox': Checkbox,
-    'datepicker': DatePicker,
-    'dropdown': Dropdown,
-    'input': Input,
-    'radioGroup': RadioGroup,
-    'slider': Slider,
-    'switch': Switch,
-    'timepicker': TimePicker
-  };
-
-  var Form = function (_Component) {
-    _inherits(Form, _Component);
-
-    function Form() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, Form);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Form.__proto__ || Object.getPrototypeOf(Form)).call.apply(_ref, [this].concat(args))), _this), _this.onSubmit = function (event) {
-        event.preventDefault();
-        if (_this.props.onSubmit) _this.props.onSubmit(event);
-      }, _this.onChange = function (field, value, event) {
-        if (_this.props.onChange) _this.props.onChange(field, value, event);
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(Form, [{
-      key: 'renderFields',
-      value: function renderFields() {
-        var _this2 = this;
-
-        return Object.keys(this.props.model).map(function (field, index) {
-          var properties = _this2.props.model[field];
-          var Field = COMPONENTS[properties.kind.toLowerCase()];
-          return _react2.default.createElement(Field, _extends({ key: index }, properties, { onChange: _this2.onChange.bind(_this2, field) }));
-        });
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        return _react2.default.createElement(
-          'form',
-          { 'data-react-toolbox': 'form', className: this.props.className, onSubmit: this.onSubmit },
-          this.renderFields(),
-          this.props.children
-        );
-      }
-    }]);
-
-    return Form;
-  }(_react.Component);
-
-  Form.propTypes = {
-    attributes: _react.PropTypes.array,
-    children: _react.PropTypes.node,
-    className: _react.PropTypes.string,
-    model: _react.PropTypes.object,
-    onChange: _react.PropTypes.func,
-    onError: _react.PropTypes.func,
-    onSubmit: _react.PropTypes.func,
-    onValid: _react.PropTypes.func,
-    storage: _react.PropTypes.string
-  };
-  Form.defaultProps = {
-    attributes: [],
-    className: ''
-  };
-
-
-  return Form;
-};
-
-var Form = factory(_Autocomplete2.default, _Button2.default, _Checkbox2.default, _DatePicker2.default, _Dropdown2.default, _Input2.default, _RadioGroup2.default, _Slider2.default, _Switch2.default, _TimePicker2.default);
-
-exports.default = Form;
-exports.formFactory = factory;
-exports.Form = Form;
\ No newline at end of file
diff --git a/lib/form/index.js b/lib/form/index.js
deleted file mode 100644
index ee5d2741d..000000000
--- a/lib/form/index.js
+++ /dev/null
@@ -1,55 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Form = undefined;
-
-var _Form = require('./Form.js');
-
-var _autocomplete = require('../autocomplete');
-
-var _autocomplete2 = _interopRequireDefault(_autocomplete);
-
-var _button = require('../button');
-
-var _button2 = _interopRequireDefault(_button);
-
-var _checkbox = require('../checkbox');
-
-var _checkbox2 = _interopRequireDefault(_checkbox);
-
-var _date_picker = require('../date_picker');
-
-var _date_picker2 = _interopRequireDefault(_date_picker);
-
-var _dropdown = require('../dropdown');
-
-var _dropdown2 = _interopRequireDefault(_dropdown);
-
-var _input = require('../input');
-
-var _input2 = _interopRequireDefault(_input);
-
-var _radio = require('../radio');
-
-var _radio2 = _interopRequireDefault(_radio);
-
-var _slider = require('../slider');
-
-var _slider2 = _interopRequireDefault(_slider);
-
-var _switch = require('../switch');
-
-var _switch2 = _interopRequireDefault(_switch);
-
-var _time_picker = require('../time_picker');
-
-var _time_picker2 = _interopRequireDefault(_time_picker);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var ThemedForm = (0, _Form.formFactory)(_autocomplete2.default, _button2.default, _checkbox2.default, _date_picker2.default, _dropdown2.default, _input2.default, _radio2.default, _slider2.default, _switch2.default, _time_picker2.default);
-
-exports.default = ThemedForm;
-exports.Form = ThemedForm;
\ No newline at end of file
diff --git a/lib/hoc/ActivableRenderer.js b/lib/hoc/ActivableRenderer.js
deleted file mode 100644
index 09c34f986..000000000
--- a/lib/hoc/ActivableRenderer.js
+++ /dev/null
@@ -1,113 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var ActivableRendererFactory = function ActivableRendererFactory() {
-  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : { delay: 500 };
-  return function (ActivableComponent) {
-    var _class, _temp2;
-
-    return _temp2 = _class = function (_Component) {
-      _inherits(ActivableRenderer, _Component);
-
-      function ActivableRenderer() {
-        var _ref;
-
-        var _temp, _this, _ret;
-
-        _classCallCheck(this, ActivableRenderer);
-
-        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
-
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ActivableRenderer.__proto__ || Object.getPrototypeOf(ActivableRenderer)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-          active: _this.props.active,
-          rendered: _this.props.active
-        }, _temp), _possibleConstructorReturn(_this, _ret);
-      }
-
-      _createClass(ActivableRenderer, [{
-        key: 'componentWillReceiveProps',
-        value: function componentWillReceiveProps(nextProps) {
-          if (nextProps.active && !this.props.active) this.renderAndActivate();
-          if (!nextProps.active && this.props.active) this.deactivateAndUnrender();
-        }
-      }, {
-        key: 'componentWillUnmount',
-        value: function componentWillUnmount() {
-          clearTimeout(this.activateTimeout);
-          clearTimeout(this.unrenderTimeout);
-        }
-      }, {
-        key: 'renderAndActivate',
-        value: function renderAndActivate() {
-          var _this2 = this;
-
-          if (this.unrenderTimeout) clearTimeout(this.unrenderTimeout);
-          this.setState({ rendered: true, active: false }, function () {
-            _this2.activateTimeout = setTimeout(function () {
-              return _this2.setState({ active: true });
-            }, 20);
-          });
-        }
-      }, {
-        key: 'deactivateAndUnrender',
-        value: function deactivateAndUnrender() {
-          var _this3 = this;
-
-          this.setState({ rendered: true, active: false }, function () {
-            _this3.unrenderTimeout = setTimeout(function () {
-              _this3.setState({ rendered: false });
-              _this3.unrenderTimeout = null;
-            }, _this3.props.delay);
-          });
-        }
-      }, {
-        key: 'render',
-        value: function render() {
-          var _props = this.props,
-              delay = _props.delay,
-              others = _objectWithoutProperties(_props, ['delay']); // eslint-disable-line no-unused-vars
-
-
-          var _state = this.state,
-              active = _state.active,
-              rendered = _state.rendered;
-
-          return rendered ? _react2.default.createElement(ActivableComponent, _extends({}, others, { active: active })) : null;
-        }
-      }]);
-
-      return ActivableRenderer;
-    }(_react.Component), _class.propTypes = {
-      active: _react.PropTypes.bool.isRequired,
-      children: _react.PropTypes.any,
-      delay: _react.PropTypes.number
-    }, _class.defaultProps = {
-      delay: options.delay
-    }, _temp2;
-  };
-};
-
-exports.default = ActivableRendererFactory;
\ No newline at end of file
diff --git a/lib/hoc/Portal.js b/lib/hoc/Portal.js
deleted file mode 100644
index 0d8cda45a..000000000
--- a/lib/hoc/Portal.js
+++ /dev/null
@@ -1,145 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactDom = require('react-dom');
-
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var Portal = function (_Component) {
-  _inherits(Portal, _Component);
-
-  function Portal() {
-    _classCallCheck(this, Portal);
-
-    return _possibleConstructorReturn(this, (Portal.__proto__ || Object.getPrototypeOf(Portal)).apply(this, arguments));
-  }
-
-  _createClass(Portal, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      this._renderOverlay();
-    }
-  }, {
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(nextProps) {
-      if (this._overlayTarget && nextProps.container !== this.props.container) {
-        this._portalContainerNode.removeChild(this._overlayTarget);
-        this._portalContainerNode = getContainer(nextProps.container);
-        this._portalContainerNode.appendChild(this._overlayTarget);
-      }
-    }
-  }, {
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate() {
-      this._renderOverlay();
-    }
-  }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      this._unrenderOverlay();
-      this._unmountOverlayTarget();
-    }
-  }, {
-    key: '_mountOverlayTarget',
-    value: function _mountOverlayTarget() {
-      if (!this._overlayTarget) {
-        this._overlayTarget = document.createElement('div');
-        this._portalContainerNode = getContainer(this.props.container);
-        this._portalContainerNode.appendChild(this._overlayTarget);
-      }
-    }
-  }, {
-    key: '_unmountOverlayTarget',
-    value: function _unmountOverlayTarget() {
-      if (this._overlayTarget) {
-        this._portalContainerNode.removeChild(this._overlayTarget);
-        this._overlayTarget = null;
-      }
-      this._portalContainerNode = null;
-    }
-  }, {
-    key: '_renderOverlay',
-    value: function _renderOverlay() {
-      var overlay = !this.props.children ? null : _react2.default.Children.only(this.props.children);
-
-      if (overlay !== null) {
-        this._mountOverlayTarget();
-        this._overlayInstance = _reactDom2.default.unstable_renderSubtreeIntoContainer(this, overlay, this._overlayTarget);
-      } else {
-        this._unrenderOverlay();
-        this._unmountOverlayTarget();
-      }
-    }
-  }, {
-    key: '_unrenderOverlay',
-    value: function _unrenderOverlay() {
-      if (this._overlayTarget) {
-        _reactDom2.default.unmountComponentAtNode(this._overlayTarget);
-        this._overlayInstance = null;
-      }
-    }
-  }, {
-    key: 'getMountNode',
-    value: function getMountNode() {
-      return this._overlayTarget;
-    }
-  }, {
-    key: 'getOverlayDOMNode',
-    value: function getOverlayDOMNode() {
-      if (!this.isMounted()) {
-        throw new Error('getOverlayDOMNode(): A component must be mounted to have a DOM node.');
-      }
-
-      if (this._overlayInstance) {
-        if (this._overlayInstance.getWrappedDOMNode) {
-          return this._overlayInstance.getWrappedDOMNode();
-        } else {
-          return _reactDom2.default.findDOMNode(this._overlayInstance);
-        }
-      }
-
-      return null;
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      return null;
-    }
-  }]);
-
-  return Portal;
-}(_react.Component);
-
-Portal.propTypes = {
-  children: _react.PropTypes.any,
-  container: _react.PropTypes.any,
-  lockBody: _react.PropTypes.bool
-};
-Portal.defaultProps = {
-  lockBody: true
-};
-
-
-function getContainer(container) {
-  var _container = typeof container === 'function' ? container() : container;
-  return _reactDom2.default.findDOMNode(_container) || document.body;
-}
-
-exports.default = Portal;
\ No newline at end of file
diff --git a/lib/identifiers.js b/lib/identifiers.js
deleted file mode 100644
index f5fcaef20..000000000
--- a/lib/identifiers.js
+++ /dev/null
@@ -1,32 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var APP_BAR = exports.APP_BAR = 'RTAppBar';
-var AUTOCOMPLETE = exports.AUTOCOMPLETE = 'RTAutocomplete';
-var AVATAR = exports.AVATAR = 'RTAvatar';
-var BUTTON = exports.BUTTON = 'RTButton';
-var CARD = exports.CARD = 'RTCard';
-var CHIP = exports.CHIP = 'RTChip';
-var CHECKBOX = exports.CHECKBOX = 'RTCheckbox';
-var DATE_PICKER = exports.DATE_PICKER = 'RTDatePicker';
-var DIALOG = exports.DIALOG = 'RTDialog';
-var DROPDOWN = exports.DROPDOWN = 'RTDropdown';
-var INPUT = exports.INPUT = 'RTInput';
-var LAYOUT = exports.LAYOUT = 'RTLayout';
-var LINK = exports.LINK = 'RTLink';
-var LIST = exports.LIST = 'RTList';
-var MENU = exports.MENU = 'RTMenu';
-var NAVIGATION = exports.NAVIGATION = 'RTNavigation';
-var OVERLAY = exports.OVERLAY = 'RTOverlay';
-var PROGRESS_BAR = exports.PROGRESS_BAR = 'RTProgressBar';
-var RADIO = exports.RADIO = 'RTRadio';
-var RIPPLE = exports.RIPPLE = 'RTRipple';
-var SLIDER = exports.SLIDER = 'RTSlider';
-var SNACKBAR = exports.SNACKBAR = 'RTSnackbar';
-var SWITCH = exports.SWITCH = 'RTSwitch';
-var TABLE = exports.TABLE = 'RTTable';
-var TABS = exports.TABS = 'RTTabs';
-var TOOLTIP = exports.TOOLTIP = 'RTTooltip';
-var TIME_PICKER = exports.TIME_PICKER = 'RTTimePicker';
\ No newline at end of file
diff --git a/lib/index.d.ts b/lib/index.d.ts
deleted file mode 100644
index d18ecd7b0..000000000
--- a/lib/index.d.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import * as React from "react";
-export declare namespace ReactToolbox {
-  interface Props {
-    /**
-     * Set a class for the root component.
-     */
-    className?: string;
-    /**
-     * Key used to uniquely identify the element within an Array.
-     */
-    key?: string | number;
-    /**
-     * Callback called when the component is clicked.
-     */
-    onClick?: Function;
-    /**
-     * Fires after the mouse is released from the Component.
-     */
-    onMouseUp?: Function;
-    /**
-     * Callback called when the mouse enters the Component.
-     */
-    onMouseEnter?: Function;
-    /**
-     * Callback called when the mouse leaves the Component.
-     */
-    onMouseLeave?: Function;
-    /**
-     * Callback called when the mouse press the Component.
-     */
-    onMouseDown?: Function;
-    onContextMenu?: Function;
-    onDoubleClick?: Function;
-    onDrag?: Function;
-    onDragEnd?: Function;
-    onDragEnter?: Function;
-    onDragExit?: Function;
-    onDragLeave?: Function;
-    onDragOver?: Function;
-    onDragStart?: Function;
-    onDrop?: Function;
-    onMouseMove?: Function;
-    onMouseOut?: Function;
-    onMouseOver?: Function;
-    onTouchCancel?: Function;
-    onTouchEnd?: Function;
-    onTouchMove?: Function;
-    onTouchStart?: Function;
-    /**
-     * Set inline style for the root component.
-     */
-    style?: React.CSSProperties;
-  }
-}
-
-export default ReactToolbox;
diff --git a/lib/index.js b/lib/index.js
deleted file mode 100644
index b4f37c537..000000000
--- a/lib/index.js
+++ /dev/null
@@ -1,206 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TimePicker = exports.Tooltip = exports.Table = exports.Switch = exports.Snackbar = exports.Slider = exports.Ripple = exports.ProgressBar = exports.Navigation = exports.Link = exports.Input = exports.Form = exports.FontIcon = exports.Dropdown = exports.Drawer = exports.Dialog = exports.DatePicker = exports.Checkbox = exports.Chip = exports.Avatar = exports.Autocomplete = exports.AppBar = undefined;
-
-var _button = require('./button');
-
-Object.keys(_button).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _button[key];
-    }
-  });
-});
-
-var _card = require('./card');
-
-Object.keys(_card).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _card[key];
-    }
-  });
-});
-
-var _layout = require('./layout');
-
-Object.keys(_layout).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _layout[key];
-    }
-  });
-});
-
-var _list = require('./list');
-
-Object.keys(_list).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _list[key];
-    }
-  });
-});
-
-var _menu = require('./menu');
-
-Object.keys(_menu).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _menu[key];
-    }
-  });
-});
-
-var _radio = require('./radio');
-
-Object.keys(_radio).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _radio[key];
-    }
-  });
-});
-
-var _tabs = require('./tabs');
-
-Object.keys(_tabs).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _tabs[key];
-    }
-  });
-});
-
-require('./utils/polyfills');
-
-var _app_bar = require('./app_bar');
-
-var _app_bar2 = _interopRequireDefault(_app_bar);
-
-var _autocomplete = require('./autocomplete');
-
-var _autocomplete2 = _interopRequireDefault(_autocomplete);
-
-var _avatar = require('./avatar');
-
-var _avatar2 = _interopRequireDefault(_avatar);
-
-var _chip = require('./chip');
-
-var _chip2 = _interopRequireDefault(_chip);
-
-var _checkbox = require('./checkbox');
-
-var _checkbox2 = _interopRequireDefault(_checkbox);
-
-var _date_picker = require('./date_picker');
-
-var _date_picker2 = _interopRequireDefault(_date_picker);
-
-var _dialog = require('./dialog');
-
-var _dialog2 = _interopRequireDefault(_dialog);
-
-var _drawer = require('./drawer');
-
-var _drawer2 = _interopRequireDefault(_drawer);
-
-var _dropdown = require('./dropdown');
-
-var _dropdown2 = _interopRequireDefault(_dropdown);
-
-var _font_icon = require('./font_icon');
-
-var _font_icon2 = _interopRequireDefault(_font_icon);
-
-var _form = require('./form');
-
-var _form2 = _interopRequireDefault(_form);
-
-var _input = require('./input');
-
-var _input2 = _interopRequireDefault(_input);
-
-var _link = require('./link');
-
-var _link2 = _interopRequireDefault(_link);
-
-var _navigation = require('./navigation');
-
-var _navigation2 = _interopRequireDefault(_navigation);
-
-var _progress_bar = require('./progress_bar');
-
-var _progress_bar2 = _interopRequireDefault(_progress_bar);
-
-var _ripple = require('./ripple');
-
-var _ripple2 = _interopRequireDefault(_ripple);
-
-var _slider = require('./slider');
-
-var _slider2 = _interopRequireDefault(_slider);
-
-var _snackbar = require('./snackbar');
-
-var _snackbar2 = _interopRequireDefault(_snackbar);
-
-var _switch = require('./switch');
-
-var _switch2 = _interopRequireDefault(_switch);
-
-var _table = require('./table');
-
-var _table2 = _interopRequireDefault(_table);
-
-var _tooltip = require('./tooltip');
-
-var _tooltip2 = _interopRequireDefault(_tooltip);
-
-var _time_picker = require('./time_picker');
-
-var _time_picker2 = _interopRequireDefault(_time_picker);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.AppBar = _app_bar2.default; // Import polyfills for IE11
-
-exports.Autocomplete = _autocomplete2.default;
-exports.Avatar = _avatar2.default;
-exports.Chip = _chip2.default;
-exports.Checkbox = _checkbox2.default;
-exports.DatePicker = _date_picker2.default;
-exports.Dialog = _dialog2.default;
-exports.Drawer = _drawer2.default;
-exports.Dropdown = _dropdown2.default;
-exports.FontIcon = _font_icon2.default;
-exports.Form = _form2.default;
-exports.Input = _input2.default;
-exports.Link = _link2.default;
-exports.Navigation = _navigation2.default;
-exports.ProgressBar = _progress_bar2.default;
-exports.Ripple = _ripple2.default;
-exports.Slider = _slider2.default;
-exports.Snackbar = _snackbar2.default;
-exports.Switch = _switch2.default;
-exports.Table = _table2.default;
-exports.Tooltip = _tooltip2.default;
-exports.TimePicker = _time_picker2.default;
\ No newline at end of file
diff --git a/lib/input/Input.js b/lib/input/Input.js
deleted file mode 100644
index ae958f05b..000000000
--- a/lib/input/Input.js
+++ /dev/null
@@ -1,296 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Input = exports.inputFactory = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames4 = require('classnames');
-
-var _classnames5 = _interopRequireDefault(_classnames4);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _FontIcon = require('../font_icon/FontIcon.js');
-
-var _FontIcon2 = _interopRequireDefault(_FontIcon);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(FontIcon) {
-  var Input = function (_React$Component) {
-    _inherits(Input, _React$Component);
-
-    function Input() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, Input);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Input.__proto__ || Object.getPrototypeOf(Input)).call.apply(_ref, [this].concat(args))), _this), _this.handleChange = function (event) {
-        var _this$props = _this.props,
-            onChange = _this$props.onChange,
-            multiline = _this$props.multiline,
-            maxLength = _this$props.maxLength;
-
-        var valueFromEvent = event.target.value;
-
-        // Trim value to maxLength if that exists (only on multiline inputs).
-        // Note that this is still required even tho we have the onKeyPress filter
-        // because the user could paste smt in the textarea.
-        var haveToTrim = multiline && maxLength && event.target.value.length > maxLength;
-        var value = haveToTrim ? valueFromEvent.substr(0, maxLength) : valueFromEvent;
-
-        // propagate to to store and therefore to the input
-        if (onChange) onChange(value, event);
-      }, _this.handleAutoresize = function () {
-        var element = _this.refs.input;
-        var rows = _this.props.rows;
-
-        if (typeof rows === 'number' && !isNaN(rows)) {
-          element.style.height = null;
-        } else {
-          // compute the height difference between inner height and outer height
-          var style = getComputedStyle(element, null);
-          var heightOffset = style.boxSizing === 'content-box' ? -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom)) : parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
-
-          // resize the input to its content size
-          element.style.height = 'auto';
-          element.style.height = element.scrollHeight + heightOffset + 'px';
-        }
-      }, _this.handleKeyPress = function (event) {
-        // prevent insertion of more characters if we're a multiline input
-        // and maxLength exists
-        var _this$props2 = _this.props,
-            multiline = _this$props2.multiline,
-            maxLength = _this$props2.maxLength,
-            onKeyPress = _this$props2.onKeyPress;
-
-        if (multiline && maxLength) {
-          // check if smt is selected, in which case the newly added charcter would
-          // replace the selected characters, so the length of value doesn't actually
-          // increase.
-          var isReplacing = event.target.selectionEnd - event.target.selectionStart;
-          var value = event.target.value;
-
-          if (!isReplacing && value.length === maxLength) {
-            event.preventDefault();
-            event.stopPropagation();
-            return;
-          }
-        }
-
-        if (onKeyPress) onKeyPress(event);
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(Input, [{
-      key: 'componentDidMount',
-      value: function componentDidMount() {
-        if (this.props.multiline) {
-          window.addEventListener('resize', this.handleAutoresize);
-          this.handleAutoresize();
-        }
-      }
-    }, {
-      key: 'componentWillReceiveProps',
-      value: function componentWillReceiveProps(nextProps) {
-        if (!this.props.multiline && nextProps.multiline) {
-          window.addEventListener('resize', this.handleAutoresize);
-        } else if (this.props.multiline && !nextProps.multiline) {
-          window.removeEventListener('resize', this.handleAutoresize);
-        }
-      }
-    }, {
-      key: 'componentDidUpdate',
-      value: function componentDidUpdate() {
-        // resize the textarea, if nessesary
-        if (this.props.multiline) this.handleAutoresize();
-      }
-    }, {
-      key: 'componentWillUnmount',
-      value: function componentWillUnmount() {
-        if (this.props.multiline) window.removeEventListener('resize', this.handleAutoresize);
-      }
-    }, {
-      key: 'blur',
-      value: function blur() {
-        this.refs.input.blur();
-      }
-    }, {
-      key: 'focus',
-      value: function focus() {
-        this.refs.input.focus();
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var _classnames2;
-
-        var _props = this.props,
-            children = _props.children,
-            disabled = _props.disabled,
-            error = _props.error,
-            floating = _props.floating,
-            hint = _props.hint,
-            icon = _props.icon,
-            name = _props.name,
-            labelText = _props.label,
-            maxLength = _props.maxLength,
-            multiline = _props.multiline,
-            required = _props.required,
-            theme = _props.theme,
-            type = _props.type,
-            value = _props.value,
-            onKeyPress = _props.onKeyPress,
-            _props$rows = _props.rows,
-            rows = _props$rows === undefined ? 1 : _props$rows,
-            others = _objectWithoutProperties(_props, ['children', 'disabled', 'error', 'floating', 'hint', 'icon', 'name', 'label', 'maxLength', 'multiline', 'required', 'theme', 'type', 'value', 'onKeyPress', 'rows']);
-
-        var length = maxLength && value ? value.length : 0;
-        var labelClassName = (0, _classnames5.default)(theme.label, _defineProperty({}, theme.fixed, !floating));
-
-        var className = (0, _classnames5.default)(theme.input, (_classnames2 = {}, _defineProperty(_classnames2, theme.disabled, disabled), _defineProperty(_classnames2, theme.errored, error), _defineProperty(_classnames2, theme.hidden, type === 'hidden'), _defineProperty(_classnames2, theme.withIcon, icon), _classnames2), this.props.className);
-
-        var valuePresent = value !== null && value !== undefined && value !== '' && !((typeof value === 'undefined' ? 'undefined' : _typeof(value)) === Number && isNaN(value));
-
-        var inputElementProps = _extends({}, others, {
-          className: (0, _classnames5.default)(theme.inputElement, _defineProperty({}, theme.filled, valuePresent)),
-          onChange: this.handleChange,
-          ref: 'input',
-          role: 'input',
-          name: name,
-          disabled: disabled,
-          required: required,
-          type: type,
-          value: value
-        });
-        if (!multiline) {
-          inputElementProps.maxLength = maxLength;
-          inputElementProps.onKeyPress = onKeyPress;
-        } else {
-          inputElementProps.rows = rows;
-          inputElementProps.onKeyPress = this.handleKeyPress;
-        }
-
-        return _react2.default.createElement(
-          'div',
-          { 'data-react-toolbox': 'input', className: className },
-          _react2.default.createElement(multiline ? 'textarea' : 'input', inputElementProps),
-          icon ? _react2.default.createElement(FontIcon, { className: theme.icon, value: icon }) : null,
-          _react2.default.createElement('span', { className: theme.bar }),
-          labelText ? _react2.default.createElement(
-            'label',
-            { className: labelClassName },
-            labelText,
-            required ? _react2.default.createElement(
-              'span',
-              { className: theme.required },
-              ' * '
-            ) : null
-          ) : null,
-          hint ? _react2.default.createElement(
-            'span',
-            { hidden: labelText, className: theme.hint },
-            hint
-          ) : null,
-          error ? _react2.default.createElement(
-            'span',
-            { className: theme.error },
-            error
-          ) : null,
-          maxLength ? _react2.default.createElement(
-            'span',
-            { className: theme.counter },
-            length,
-            '/',
-            maxLength
-          ) : null,
-          children
-        );
-      }
-    }]);
-
-    return Input;
-  }(_react2.default.Component);
-
-  Input.propTypes = {
-    children: _react2.default.PropTypes.any,
-    className: _react2.default.PropTypes.string,
-    disabled: _react2.default.PropTypes.bool,
-    error: _react2.default.PropTypes.string,
-    floating: _react2.default.PropTypes.bool,
-    hint: _react2.default.PropTypes.string,
-    icon: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.element]),
-    label: _react2.default.PropTypes.string,
-    maxLength: _react2.default.PropTypes.number,
-    multiline: _react2.default.PropTypes.bool,
-    name: _react2.default.PropTypes.string,
-    onBlur: _react2.default.PropTypes.func,
-    onChange: _react2.default.PropTypes.func,
-    onFocus: _react2.default.PropTypes.func,
-    onKeyPress: _react2.default.PropTypes.func,
-    required: _react2.default.PropTypes.bool,
-    rows: _react2.default.PropTypes.number,
-    theme: _react2.default.PropTypes.shape({
-      bar: _react2.default.PropTypes.string,
-      counter: _react2.default.PropTypes.string,
-      disabled: _react2.default.PropTypes.string,
-      error: _react2.default.PropTypes.string,
-      errored: _react2.default.PropTypes.string,
-      hidden: _react2.default.PropTypes.string,
-      hint: _react2.default.PropTypes.string,
-      icon: _react2.default.PropTypes.string,
-      input: _react2.default.PropTypes.string,
-      inputElement: _react2.default.PropTypes.string,
-      required: _react2.default.PropTypes.string,
-      withIcon: _react2.default.PropTypes.string
-    }),
-    type: _react2.default.PropTypes.string,
-    value: _react2.default.PropTypes.any
-  };
-  Input.defaultProps = {
-    className: '',
-    hint: '',
-    disabled: false,
-    floating: true,
-    multiline: false,
-    required: false,
-    type: 'text'
-  };
-
-
-  return Input;
-};
-
-var Input = factory(_FontIcon2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.INPUT, null, { withRef: true })(Input);
-exports.inputFactory = factory;
-exports.Input = Input;
\ No newline at end of file
diff --git a/lib/input/_config.scss b/lib/input/_config.scss
deleted file mode 100644
index ff9f58cda..000000000
--- a/lib/input/_config.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-$input-padding: 2 * $unit !default;
-$input-field-padding: .8 * $unit !default;
-$input-field-font-size: 1.6 * $unit !default;
-$input-field-height: $input-field-padding * 2 + $input-field-font-size * 1.4 !default;
-$input-label-font-size: 1.2 * $unit !default;
-$input-focus-label-top: .6 * $unit !default;
-$input-text-background-color: transparent !default;
-$input-text-label-color: rgba($color-black, 0.26) !default;
-$input-text-bottom-border-color: rgba($color-black, 0.12) !default;
-$input-text-highlight-color: $color-primary !default;
-$input-text-disabled-color: $input-text-bottom-border-color !default;
-$input-text-disabled-text-color: $input-text-label-color !default;
-$input-text-error-color: rgb(222, 50, 38) !default;
-$input-text-required-color: rgb(222, 50, 38) !default;
-$input-underline-height:  2 * $unit !default;
-$input-icon-font-size: 2.4 * $unit !default;
-$input-icon-size: 2 * $input-icon-font-size !default;
-$input-icon-offset: 1.6 * $unit !default;
-$input-chevron-offset: .8 * $unit !default;
-$input-hint-opacity: 1 !default;
diff --git a/lib/input/index.d.ts b/lib/input/index.d.ts
deleted file mode 100644
index b1db642a2..000000000
--- a/lib/input/index.d.ts
+++ /dev/null
@@ -1,136 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface InputTheme {
-  /**
-   * Used for the bar under the input.
-   */
-  bar?: string;
-  /**
-   * Used for the counter element.
-   */
-  counter?: string;
-  /**
-   * Added to the root class when input is disabled.
-   */
-  disabled?: string;
-  /**
-   * Used for the text error.
-   */
-  error?: string;
-  /**
-   * Added to the root class when input is errored.
-   */
-  errored?: string;
-  /**
-   * Used when the input is hidden.
-   */
-  hidden?: string;
-  /**
-   * Used for the hint text.
-   */
-  hint?: string;
-  /**
-   * Used for the icon in case the input has icon.
-   */
-  icon?: string;
-  /**
-   * Used as root class for the component.
-   */
-  input?: string;
-  /**
-   * Used for the HTML input element.
-   */
-  inputElement?: string;
-  /**
-   * Used in case the input is required.
-   */
-  required?: string;
-  /**
-   * Added to the root class if the input has icon.
-   */
-  withIcon?: string;
-}
-
-interface InputProps extends ReactToolbox.Props {
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * If true, component will be disabled.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * Give an error node to display under the field.
-   */
-  error?: string;
-  /**
-   * Indicates if the label is floating in the input field or not.
-   * @default true
-   */
-  floating?: boolean;
-  /**
-   * The text string to use for hint text element.
-   */
-  hint?: string;
-  /**
-   * Name of an icon to use as a label for the input.
-   */
-  icon?: React.ReactNode | string;
-  /**
-   * The text string to use for the floating label element.
-   */
-  label?: string;
-  /**
-   * Specifies the maximum number of characters allowed in the component
-   */
-  maxLength?: number;
-  /**
-   * If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.
-   * @default false
-   */
-  multiline?: boolean;
-  /**
-   * Name for the input field.
-   */
-  name?: string;
-  /**
-   * Callback function that is fired when component is blurred.
-   */
-  onBlur?: Function;
-  /**
-   * Callback function that is fired when the component's value changes
-   */
-  onChange?: Function;
-  /**
-   * Callback function that is fired when component is focused.
-   */
-  onFocus?: Function;
-  /**
-   * Callback function that is fired when a key is pressed.
-   */
-  onKeyPress?: Function;
-  /**
-   * If true, the html input has a required attribute.
-   * @default false
-   */
-  required?: boolean;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: InputTheme;
-  /**
-   * Type of the input element. It can be a valid HTML5 input type
-   */
-  type?: string;
-  /**
-   * Current value of the input element.
-   */
-  value?: any;
-}
-
-export class Input extends React.Component<InputProps, {}> { }
-
-export default Input;
diff --git a/lib/input/index.js b/lib/input/index.js
deleted file mode 100644
index a8c751634..000000000
--- a/lib/input/index.js
+++ /dev/null
@@ -1,28 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Input = undefined;
-
-var _identifiers = require('../identifiers.js');
-
-var _reactCssThemr = require('react-css-themr');
-
-var _Input = require('./Input.js');
-
-var _FontIcon = require('../font_icon/FontIcon.js');
-
-var _FontIcon2 = _interopRequireDefault(_FontIcon);
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var Input = (0, _Input.inputFactory)(_FontIcon2.default);
-var ThemedInput = (0, _reactCssThemr.themr)(_identifiers.INPUT, _theme2.default, { withRef: true })(Input);
-
-exports.default = ThemedInput;
-exports.Input = ThemedInput;
\ No newline at end of file
diff --git a/lib/input/theme.scss b/lib/input/theme.scss
deleted file mode 100644
index 9e29b9b4a..000000000
--- a/lib/input/theme.scss
+++ /dev/null
@@ -1,156 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.input {
-  position: relative;
-  padding: $input-padding 0;
-  &.withIcon {
-    margin-left: $input-icon-size;
-  }
-}
-
-.icon {
-  position: absolute;
-  top: $input-icon-offset;
-  left: -$input-icon-size;
-  display: block;
-  width: $input-icon-size;
-  height: $input-icon-size;
-  font-size: $input-icon-font-size !important;
-  line-height: $input-icon-size !important;
-  color: $input-text-label-color;
-  text-align: center;
-  transition: color $animation-duration $animation-curve-default;
-}
-
-.inputElement {
-  display: block;
-  width: 100%;
-  padding: $input-field-padding 0;
-  font-size: $input-field-font-size;
-  color: $color-text;
-  background-color: $input-text-background-color;
-  border: 0;
-  border-bottom: 1px solid $input-text-bottom-border-color;
-  outline: none;
-  &:focus:not([disabled]):not([readonly]) {
-    ~ .bar:before, ~ .bar:after {
-      width: 50%;
-    }
-    ~ .label:not(.fixed) {
-      color: $input-text-highlight-color;
-    }
-    ~ .label > .required {
-      color: $input-text-required-color;
-    }
-    ~ .hint {
-      display: block;
-      opacity: $input-hint-opacity;
-    }
-    ~ .icon {
-      color: $input-text-highlight-color;
-    }
-  }
-  &:focus:not([disabled]):not([readonly]), &.filled, &[type="date"], &[type="time"] {
-    ~ .label:not(.fixed) {
-      top: $input-focus-label-top;
-      font-size: $input-label-font-size;
-    }
-    &.filled ~ .hint {
-      opacity: 0;
-    }
-  }
-  &.filled ~ .label.fixed, &.filled ~ .hint {
-    display: none;
-  }
-}
-
-.label {
-  position: absolute;
-  top: $input-padding + (1.5 * $input-field-padding);
-  left: 0;
-  font-size: $input-field-font-size;
-  line-height: $input-field-font-size;
-  color: $input-text-label-color;
-  pointer-events: none;
-  transition-timing-function: $animation-curve-default;
-  transition-duration: $animation-duration;
-  transition-property: top, font-size, color;
-  &.fixed ~ .hint {
-    display: none;
-  }
-}
-
-.hint {
-  position: absolute;
-  top: $input-padding + (1.5 * $input-field-padding);
-  left: 0;
-  font-size: $input-field-font-size;
-  line-height: $input-field-font-size;
-  color: $input-text-label-color;
-  pointer-events: none;
-  opacity: $input-hint-opacity;
-  transition-timing-function: $animation-curve-default;
-  transition-duration: $animation-duration;
-  transition-property: opacity;
-}
-
-.bar {
-  position: relative;
-  display: block;
-  width: 100%;
-  &:before, &:after {
-    @include material-animation-default();
-    position: absolute;
-    bottom: 0;
-    width: 0;
-    height: 2px;
-    content: "";
-    background-color: $input-text-highlight-color;
-    transition-property: width, background-color;
-  }
-  &:before {
-    left: 50%;
-  }
-  &:after {
-    right: 50%;
-  }
-}
-
-.error, .counter {
-  margin-bottom: - $input-underline-height;
-  font-size: $input-label-font-size;
-  line-height: $input-underline-height;
-  color: $input-text-error-color;
-}
-
-.counter {
-  position: absolute;
-  right: 0;
-  color: $input-text-label-color;
-}
-
-.disabled > .inputElement {
-  color: $input-text-disabled-text-color;
-  border-bottom-style: dotted;
-}
-
-.errored {
-  padding-bottom: 0;
-  > .inputElement {
-    margin-top: 1px;
-    border-bottom-color: $input-text-error-color;
-  }
-  > .counter, > .label {
-    color: $input-text-error-color;
-  }
-  > .label > .required {
-    color: $input-text-required-color;
-  }
-}
-
-.hidden {
-  display: none;
-}
diff --git a/lib/layout/Layout.js b/lib/layout/Layout.js
deleted file mode 100644
index 09a844bca..000000000
--- a/lib/layout/Layout.js
+++ /dev/null
@@ -1,48 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Layout = undefined;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _identifiers = require('../identifiers.js');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var Layout = function Layout(_ref) {
-  var className = _ref.className,
-      children = _ref.children,
-      theme = _ref.theme;
-  return _react2.default.createElement(
-    'div',
-    { 'data-react-toolbox': 'layout', className: (0, _classnames2.default)(theme.layout, className) },
-    _react2.default.Children.map(children, function (child) {
-      return _react2.default.cloneElement(child, { theme: theme });
-    })
-  );
-};
-
-Layout.propTypes = {
-  children: _react.PropTypes.oneOfType([_react.PropTypes.arrayOf(_react.PropTypes.element), _react.PropTypes.element]),
-  className: _react.PropTypes.string,
-  theme: _react.PropTypes.shape({
-    layout: _react.PropTypes.string
-  })
-};
-
-Layout.defaultProps = {
-  className: ''
-};
-
-exports.default = (0, _reactCssThemr.themr)(_identifiers.LAYOUT)(Layout);
-exports.Layout = Layout;
\ No newline at end of file
diff --git a/lib/layout/NavDrawer.js b/lib/layout/NavDrawer.js
deleted file mode 100644
index 01ef80265..000000000
--- a/lib/layout/NavDrawer.js
+++ /dev/null
@@ -1,90 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.NavDrawer = undefined;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames3 = require('classnames');
-
-var _classnames4 = _interopRequireDefault(_classnames3);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var NavDrawer = function NavDrawer(_ref) {
-  var _classnames;
-
-  var active = _ref.active,
-      children = _ref.children,
-      className = _ref.className,
-      onOverlayClick = _ref.onOverlayClick,
-      permanentAt = _ref.permanentAt,
-      pinned = _ref.pinned,
-      scrollY = _ref.scrollY,
-      theme = _ref.theme,
-      width = _ref.width;
-
-  var rootClasses = (0, _classnames4.default)([theme.navDrawer], (_classnames = {}, _defineProperty(_classnames, theme[permanentAt + 'Permanent'], permanentAt), _defineProperty(_classnames, theme.wide, width === 'wide'), _defineProperty(_classnames, theme.active, active), _defineProperty(_classnames, theme.pinned, pinned), _classnames), className);
-
-  var drawerClasses = (0, _classnames4.default)(theme.drawerContent, _defineProperty({}, theme.scrollY, scrollY));
-
-  return _react2.default.createElement(
-    'div',
-    { 'data-react-toolbox': 'nav-drawer', className: rootClasses, onClick: onOverlayClick },
-    _react2.default.createElement(
-      'div',
-      { 'data-react-toolbox': 'nav-drawer-scrim', className: theme.scrim },
-      _react2.default.createElement(
-        'aside',
-        { 'data-react-toolbox': 'nav-drawer-content', className: drawerClasses },
-        children
-      )
-    )
-  );
-};
-
-NavDrawer.propTypes = {
-  active: _react.PropTypes.bool,
-  children: _react.PropTypes.any,
-  className: _react.PropTypes.string,
-  onOverlayClick: _react.PropTypes.func,
-  permanentAt: _react.PropTypes.oneOf(['sm', 'smTablet', 'md', 'lg', 'lgTablet', 'xl', 'xxl', 'xxxl']),
-  pinned: _react.PropTypes.bool,
-  scrollY: _react.PropTypes.bool,
-  theme: _react.PropTypes.shape({
-    active: _react.PropTypes.string,
-    drawerContent: _react.PropTypes.string,
-    lgPermanent: _react.PropTypes.string,
-    mdPermanent: _react.PropTypes.string,
-    navDrawer: _react.PropTypes.string,
-    pinned: _react.PropTypes.string,
-    scrim: _react.PropTypes.string,
-    scrollY: _react.PropTypes.string,
-    smPermanent: _react.PropTypes.string,
-    wide: _react.PropTypes.string,
-    xlPermanent: _react.PropTypes.string,
-    xxlPermanent: _react.PropTypes.string,
-    xxxlPermanent: _react.PropTypes.string
-  }),
-  width: _react.PropTypes.oneOf(['normal', 'wide'])
-};
-
-NavDrawer.defaultProps = {
-  active: false,
-  className: '',
-  scrollY: false,
-  width: 'normal'
-};
-
-exports.default = (0, _reactCssThemr.themr)(_identifiers.LAYOUT)(NavDrawer);
-exports.NavDrawer = NavDrawer;
\ No newline at end of file
diff --git a/lib/layout/Panel.js b/lib/layout/Panel.js
deleted file mode 100644
index 23a00d527..000000000
--- a/lib/layout/Panel.js
+++ /dev/null
@@ -1,57 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Panel = undefined;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var Panel = function Panel(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      onScroll = _ref.onScroll,
-      scrollY = _ref.scrollY,
-      theme = _ref.theme;
-
-  var _className = (0, _classnames3.default)(theme.panel, _defineProperty({}, theme.scrollY, scrollY), className);
-
-  return _react2.default.createElement(
-    'div',
-    { 'data-react-toolbox': 'panel', onScroll: onScroll, className: _className },
-    children
-  );
-};
-
-Panel.propTypes = {
-  children: _react.PropTypes.any,
-  className: _react.PropTypes.string,
-  onScroll: _react.PropTypes.func,
-  scrollY: _react.PropTypes.bool,
-  theme: _react.PropTypes.shape({
-    panel: _react.PropTypes.string,
-    scrollY: _react.PropTypes.string
-  })
-};
-
-Panel.defaultProps = {
-  className: '',
-  scrollY: false
-};
-
-exports.default = (0, _reactCssThemr.themr)(_identifiers.LAYOUT)(Panel);
-exports.Panel = Panel;
\ No newline at end of file
diff --git a/lib/layout/Sidebar.js b/lib/layout/Sidebar.js
deleted file mode 100644
index d1c5a2513..000000000
--- a/lib/layout/Sidebar.js
+++ /dev/null
@@ -1,69 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Sidebar = undefined;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames3 = require('classnames');
-
-var _classnames4 = _interopRequireDefault(_classnames3);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var Sidebar = function Sidebar(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      pinned = _ref.pinned,
-      scrollY = _ref.scrollY,
-      theme = _ref.theme,
-      width = _ref.width;
-
-  var wrapperClasses = (0, _classnames4.default)(theme.sidebar, theme['width-' + width], _defineProperty({}, theme.pinned, pinned), className);
-
-  var innerClasses = (0, _classnames4.default)(theme.sidebarContent, _defineProperty({}, theme.scrollY, scrollY));
-
-  return _react2.default.createElement(
-    'div',
-    { 'data-react-toolbox': 'sidebar', className: wrapperClasses },
-    _react2.default.createElement(
-      'aside',
-      { 'data-react-toolbox': 'sidebar-content', className: innerClasses },
-      children
-    )
-  );
-};
-
-Sidebar.propTypes = {
-  children: _react.PropTypes.any,
-  className: _react.PropTypes.string,
-  pinned: _react.PropTypes.bool,
-  scrollY: _react.PropTypes.bool,
-  theme: _react.PropTypes.shape({
-    pinned: _react.PropTypes.string,
-    scrollY: _react.PropTypes.string,
-    sidebar: _react.PropTypes.string,
-    sidebarContent: _react.PropTypes.string
-  }),
-  width: _react.PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 25, 33, 50, 66, 75, 100])
-};
-
-Sidebar.defaultProps = {
-  className: '',
-  pinned: false,
-  scrollY: false,
-  width: 5
-};
-
-exports.default = (0, _reactCssThemr.themr)(_identifiers.LAYOUT)(Sidebar);
-exports.Sidebar = Sidebar;
\ No newline at end of file
diff --git a/lib/layout/_config.scss b/lib/layout/_config.scss
deleted file mode 100644
index a1b318f7a..000000000
--- a/lib/layout/_config.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-$drawer-background-color: $palette-grey-50 !default;
-$drawer-border-color: $palette-grey-300 !default;
-$drawer-text-color: $palette-grey-800 !default;
-
-$drawer-overlay-color: $color-black !default;
-$drawer-overlay-opacity: .6 !default;
-
-// from: https://www.google.com/design/spec/layout/structure.html#structure-side-nav
-$navigation-drawer-desktop-width: 5 * $standard-increment-desktop !default;
-$navigation-drawer-max-desktop-width: 40 * $unit !default;
-
-// Mobile:
-// Width = Screen width − 56 dp
-// Maximum width: 320dp
-$navigation-drawer-mobile-width: 5 * $standard-increment-mobile !default;
-
-// sass doesn't like use of variable here: calc(100% - $standard-increment-mobile);
-$navigation-drawer-max-mobile-width: calc(100% - 5.6rem) !default;
diff --git a/lib/layout/_mixins.scss b/lib/layout/_mixins.scss
deleted file mode 100644
index 1ace8de42..000000000
--- a/lib/layout/_mixins.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@mixin open() {
-  transition-delay: $animation-delay;
-  & > .scrim {
-    & > .drawerContent {
-      pointer-events: all;
-      transition-delay: $animation-delay;
-      transform: translateX(0);
-    }
-  }
-}
-
-@mixin permanent() {
-  @include open();
-
-  width: $navigation-drawer-desktop-width;
-  max-width: $navigation-drawer-desktop-width;
-
-  &.wide {
-    width: $navigation-drawer-max-desktop-width;
-    max-width: $navigation-drawer-max-desktop-width;
-  }
-
-  &.active {
-    & > .scrim {
-      width: 0;
-      background-color: rgba($drawer-overlay-color, 0);
-    }
-  }
-}
diff --git a/lib/layout/index.d.ts b/lib/layout/index.d.ts
deleted file mode 100644
index 10004fc25..000000000
--- a/lib/layout/index.d.ts
+++ /dev/null
@@ -1,194 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface LayoutTheme {
-  /**
-   * Class used in the container to position and align inner items.
-   */
-  layout?: string;
-}
-
-interface LayoutProps extends ReactToolbox.Props {
-  /**
-   * Children to pass through the component.
-   */
-  children?: [NavDrawer | Panel | Sidebar];
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: LayoutTheme;
-}
-
-export class Layout extends React.Component<LayoutProps, {}> { }
-
-export interface NavDrawerTheme {
-  /**
-   * Used when the drawer is active.
-   */
-  active?: string;
-  /**
-   * Used for the content of the drawer.
-   */
-  drawerContent?: string;
-  /**
-   * Added to the root class for large drawer.
-   */
-  lgPermangent?: string;
-  /**
-   * Added to the root class for medium drawer.
-   */
-  mdPermangent?: string;
-  /**
-   * Root class for the drawer.
-   */
-  navDrawer?: string;
-  /**
-   * Added to the root class if positioning is pinned.
-   */
-  pinned?: string;
-  /**
-   * Used as a wrapper for the drawer content.
-   */
-  scrim?: string;
-  /**
-   * Added to the drawer content if its scrollable.
-   */
-  scrollY?: string;
-  /**
-   * Added to the root class for small drawer.
-   */
-  smPermanent?: string;
-  /**
-   * Added to the root class if width is wide.
-   */
-  wide?: string;
-  /**
-   * Added to the root class for extra big drawer.
-   */
-  xlPermanent?: string;
-  /**
-   * Added to the root class for super big drawer.
-   */
-  xxlPermangent?: string;
-  /**
-   * Added to the root class for largest possible drawer.
-   */
-  xxxlPermangent?: string;
-}
-
-interface NavDrawerProps extends ReactToolbox.Props {
-  /**
-   * If true, the drawer will be shown as an overlay.
-   * @default false
-   */
-  active?: boolean;
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * Callback function to be invoked when the overlay is clicked.
-   */
-  onOverlayClick?: Function;
-  /**
-   * The breakpoint at which the drawer is automatically pinned.
-   */
-  permanentAt?: "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
-  /**
-   * If true, the drawer will be pinned open. pinned takes precedence over active.
-   * @default false
-   */
-  pinned?: boolean;
-  /**
-   * If true, the drawer will vertically scroll all content.
-   * @default false
-   */
-  scrollY?: boolean;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: NavDrawerTheme;
-  /**
-   * 320px or 400px. Only applicable above the sm breakpoint.
-   * @default normal
-   */
-  width?: "normal" | "wide";
-}
-
-export class NavDrawer extends React.Component<NavDrawerProps, {}> { }
-
-export interface PanelTheme {
-  /**
-   * Used as the root class of the panel component.
-   */
-  panel?: string;
-  /**
-   * Used in case the panel is scrollable.
-   */
-  scrollY?: string;
-}
-
-interface PanelProps extends ReactToolbox.Props {
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * If true, the panel will vertically scroll all content.
-   * @default false
-   */
-  scrollY?: boolean;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: PanelTheme;
-}
-
-export class Panel extends React.Component<PanelProps, {}> { }
-
-export interface SidebarTheme {
-  /**
-   * Added to the root class if sidebar is pinned.
-   */
-  pinned?: string;
-  /**
-   * Add to the content of sidebar if its scrollable.
-   */
-  scrollY?: string;
-  /**
-   * Root class of the sidebar.
-   */
-  sidebar?: string;
-  /**
-   * Used in for the content element of the sidebar.
-   */
-  sidebarContent?: string;
-}
-
-interface SidebarProps extends ReactToolbox.Props {
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * If true, the sidebar will be pinned open.
-   * @default false
-   */
-  pinned?: boolean;
-  /**
-   * If true, the sidebar will vertically scroll all content
-   * @default false
-   */
-  scrollY?: boolean;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: SidebarTheme;
-  /**
-   * Width in standard increments (1-12) or percentage (25, 33, 50, 66, 75, 100)
-   * @default 5
-   */
-  width?: number; // 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 25 | 33 | 50 | 66 | 75 | 100;
-}
-
-export class Sidebar extends React.Component<SidebarProps, {}> { }
diff --git a/lib/layout/index.js b/lib/layout/index.js
deleted file mode 100644
index 47bfa886a..000000000
--- a/lib/layout/index.js
+++ /dev/null
@@ -1,34 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Sidebar = exports.NavDrawer = exports.Panel = exports.Layout = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Layout = require('./Layout.js');
-
-var _Panel = require('./Panel.js');
-
-var _NavDrawer = require('./NavDrawer.js');
-
-var _Sidebar = require('./Sidebar.js');
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var ThemedLayout = (0, _reactCssThemr.themr)(_identifiers.LAYOUT, _theme2.default)(_Layout.Layout);
-var ThemedPanel = (0, _reactCssThemr.themr)(_identifiers.LAYOUT, _theme2.default)(_Panel.Panel);
-var ThemedNavDrawer = (0, _reactCssThemr.themr)(_identifiers.LAYOUT, _theme2.default)(_NavDrawer.NavDrawer);
-var ThemedSidebar = (0, _reactCssThemr.themr)(_identifiers.LAYOUT, _theme2.default)(_Sidebar.Sidebar);
-
-exports.Layout = ThemedLayout;
-exports.Panel = ThemedPanel;
-exports.NavDrawer = ThemedNavDrawer;
-exports.Sidebar = ThemedSidebar;
\ No newline at end of file
diff --git a/lib/layout/theme.scss b/lib/layout/theme.scss
deleted file mode 100644
index 17275cd16..000000000
--- a/lib/layout/theme.scss
+++ /dev/null
@@ -1,323 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-@import "http://github.com/mixins";
-
-.layout {
-  position: relative;
-  display: flex;
-  width: 100%;
-  height: 100%;
-  flex-direction: row;
-  align-items: stretch;
-  justify-content: space-between;
-  overflow-y: hidden;
-
-  .navDrawer {
-    width: 0;
-    min-width: 0;
-    height: 100%;
-    overflow-x: hidden;
-    overflow-y: hidden;
-    transition-timing-function: $animation-curve-default;
-    transition-duration: $animation-duration;
-    transition-property: width, min-width;
-
-    .scrim {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      z-index: $z-index-highest;
-      width: 0;
-      height: 100%;
-      background-color: rgba($drawer-overlay-color, 0);
-      transition: background-color $animation-duration $animation-curve-default, width 10ms linear $animation-duration;
-    }
-
-    .drawerContent {
-      @include shadow-2dp();
-      display: flex;
-      width: $navigation-drawer-mobile-width;
-      max-width: $navigation-drawer-max-mobile-width;
-      height: 100%;
-      flex-direction: column;
-      align-items: stretch;
-      justify-content: space-between;
-      overflow-x: hidden;
-      overflow-y: hidden;
-      color: $drawer-text-color;
-      pointer-events: none;
-      background-color: $drawer-background-color;
-      border-right: 1px solid $drawer-border-color;
-      transition: transform $animation-duration $animation-curve-default;
-      transform: translateX(-100%);
-
-      &.scrollY {
-        overflow-y: auto;
-      }
-    }
-
-    &.pinned {
-      @include open();
-      width: $navigation-drawer-mobile-width;
-      max-width: $navigation-drawer-max-mobile-width;
-    }
-
-    &.active {
-      &:not(.pinned) {
-        @include open();
-        .scrim {
-          width: 100%;
-          background-color: rgba($drawer-overlay-color, $drawer-overlay-opacity);
-          transition: background-color $animation-duration $animation-curve-default;
-        }
-      }
-    }
-
-    // Larger than mobile width drawer
-    @media screen and (min-width: $layout-breakpoint-xs) {
-      &.pinned {
-        width: $navigation-drawer-desktop-width;
-        max-width: $navigation-drawer-desktop-width;
-      }
-
-      .drawerContent {
-        width: $navigation-drawer-desktop-width;
-        max-width: $navigation-drawer-desktop-width;
-      }
-
-      &.wide {
-        &.pinned {
-          width: $navigation-drawer-max-desktop-width;
-          max-width: $navigation-drawer-max-desktop-width;
-        }
-
-        .drawerContent {
-          width: $navigation-drawer-max-desktop-width;
-          max-width: $navigation-drawer-max-desktop-width;
-        }
-      }
-    }
-
-    // Permanent screen, ignore .active and make part of layout
-    @media screen and (min-width: $layout-breakpoint-sm) {
-      &.smPermanent {
-        @include permanent();
-      }
-    }
-
-    @media screen and (min-width: $layout-breakpoint-sm-tablet) {
-      &.smTabletPermanent {
-        @include permanent();
-      }
-    }
-
-    @media screen and (min-width: $layout-breakpoint-md) {
-      &.mdPermanent {
-        @include permanent();
-      }
-    }
-
-    @media screen and (min-width: $layout-breakpoint-lg) {
-      &.lgPermanent {
-        @include permanent();
-      }
-    }
-
-    @media screen and (min-width: $layout-breakpoint-lg-tablet) {
-      &.lgTabletPermanent {
-        @include permanent();
-      }
-    }
-
-    @media screen and (min-width: $layout-breakpoint-xl) {
-      &.xlPermanent {
-        @include permanent();
-      }
-    }
-
-    @media screen and (min-width: $layout-breakpoint-xxl) {
-      &.xxlPermanent {
-        @include permanent();
-      }
-    }
-
-    @media screen and (min-width: $layout-breakpoint-xxxl) {
-      &.xxxlPermanent {
-        @include permanent();
-      }
-    }
-  }
-
-  & .layout {
-    .scrim {
-      z-index: $z-index-highest - 1;
-    }
-    & .layout {
-      .scrim {
-        z-index: $z-index-highest - 2;
-      }
-    }
-  }
-
-  .panel {
-    position: relative;
-    display: flex;
-    height: 100%;
-    flex: 1;
-    flex-direction: column;
-    align-items: stretch;
-    justify-content: space-between;
-    overflow-y: hidden;
-
-    &.scrollY {
-      overflow-y: auto;
-    }
-  }
-
-  .sidebar {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    z-index: $z-index-highest - 1;
-    width: 0;
-    height: 100%;
-    overflow-x: hidden;
-    overflow-y: hidden;
-    color: $drawer-text-color;
-    background-color: $drawer-background-color;
-    transition-timing-function: $animation-curve-default;
-    transition-duration: $animation-duration;
-    transition-property: width;
-
-    .sidebarContent {
-      display: flex;
-      height: 100%;
-      flex-direction: column;
-      align-items: stretch;
-      justify-content: space-between;
-      overflow-y: hidden;
-
-      &.scrollY {
-        overflow-y: auto;
-      }
-    }
-
-    $increments: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12);
-
-    @each $increment in $increments {
-      &.width-#{$increment} {
-        $mobile: $standard-increment-mobile * $increment;
-        $desktop: $standard-increment-desktop * $increment;
-
-        .sidebarContent {
-          min-width: 100%;
-        }
-
-        &.pinned {
-          width: 100%;
-        }
-
-        @if $increment < 10 {
-          @media screen and (min-width: $layout-breakpoint-xs) and (orientation: landscape) {
-            position: relative;
-
-            .sidebarContent {
-              min-width: $mobile;
-            }
-
-            &.pinned {
-              width: $mobile;
-            }
-          }
-
-          @media screen and (min-width: $layout-breakpoint-xs) and (orientation: portrait) {
-            position: relative;
-
-            .sidebarContent {
-              min-width: $desktop;
-            }
-
-            &.pinned {
-              width: $desktop;
-            }
-          }
-        }
-
-        @if $increment < 11 {
-          @media screen and (min-width: $layout-breakpoint-sm-tablet) {
-            position: relative;
-
-            .sidebarContent {
-              min-width: $desktop;
-            }
-
-            &.pinned {
-              width: $desktop;
-            }
-          }
-        }
-
-        @media screen and (min-width: $layout-breakpoint-sm) {
-          position: relative;
-
-          .sidebarContent {
-            min-width: $desktop;
-          }
-
-          &.pinned {
-            width: $desktop;
-          }
-        }
-      }
-    }
-
-
-    $percentages: (25, 33, 50, 66, 75);
-
-    &.width-100 {
-      position: absolute;
-
-      .sidebarContent {
-        min-width: 100%;
-      }
-
-      &.pinned {
-        width: 100%;
-      }
-    }
-
-    @each $pct in $percentages {
-      &.width-#{$pct} {
-        position: absolute;
-
-        .sidebarContent {
-          min-width: 100%;
-        }
-
-        &.pinned {
-          width: 100%;
-        }
-      }
-    }
-
-    @media screen and (min-width: $layout-breakpoint-sm-tablet) {
-      @each $pct in $percentages {
-        &.width-#{$pct} {
-          position: relative;
-
-          .sidebarContent {
-            min-width: $pct * 1%;
-          }
-
-          &.pinned {
-            width: $pct * 1%;
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/lib/link/Link.js b/lib/link/Link.js
deleted file mode 100644
index 9fbe6ab27..000000000
--- a/lib/link/Link.js
+++ /dev/null
@@ -1,82 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Link = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _FontIcon = require('../font_icon/FontIcon.js');
-
-var _FontIcon2 = _interopRequireDefault(_FontIcon);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-var Link = function Link(_ref) {
-  var active = _ref.active,
-      children = _ref.children,
-      className = _ref.className,
-      count = _ref.count,
-      icon = _ref.icon,
-      label = _ref.label,
-      theme = _ref.theme,
-      others = _objectWithoutProperties(_ref, ['active', 'children', 'className', 'count', 'icon', 'label', 'theme']);
-
-  var _className = (0, _classnames3.default)(theme.link, _defineProperty({}, theme.active, active), className);
-
-  return _react2.default.createElement(
-    'a',
-    _extends({ 'data-react-toolbox': 'link', className: _className }, others),
-    icon ? _react2.default.createElement(_FontIcon2.default, { className: theme.icon, value: icon }) : null,
-    label ? _react2.default.createElement(
-      'abbr',
-      null,
-      label
-    ) : null,
-    count && parseInt(count) !== 0 ? _react2.default.createElement(
-      'small',
-      null,
-      count
-    ) : null,
-    children
-  );
-};
-
-Link.propTypes = {
-  active: _react.PropTypes.bool,
-  children: _react.PropTypes.node,
-  className: _react.PropTypes.string,
-  count: _react.PropTypes.number,
-  icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-  label: _react.PropTypes.string,
-  theme: _react.PropTypes.shape({
-    active: _react.PropTypes.string,
-    icon: _react.PropTypes.string,
-    link: _react.PropTypes.string
-  })
-};
-
-Link.defaultProps = {
-  active: false,
-  className: ''
-};
-
-exports.default = (0, _reactCssThemr.themr)(_identifiers.LINK)(Link);
-exports.Link = Link;
\ No newline at end of file
diff --git a/lib/link/index.d.ts b/lib/link/index.d.ts
deleted file mode 100644
index 67da3fa11..000000000
--- a/lib/link/index.d.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface LinkTheme {
-  /**
-   * Added to the root element if the Link is active.
-   */
-  active?: string;
-  /**
-   * Used for the icon element if it's present.
-   */
-  icon?: string;
-  /**
-   * Used for the root element.
-   */
-  link?: string;
-}
-
-interface LinkProps extends ReactToolbox.Props {
-  /**
-   * If true, adds active style to link.
-   * @default false
-   */
-  active?: boolean;
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * Sets a count number.
-   */
-  count?: number;
-  /**
-   * Sets the anchor link.
-   */
-  href?: string;
-  /**
-   * An icon key string to include a FontIcon component in front of the text.
-   */
-  icon?: React.ReactNode | string;
-  /**
-   * The text string used for the text content of the link.
-   */
-  label?: string;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: LinkTheme;
-}
-
-export class Link extends React.Component<LinkProps, {}> { }
diff --git a/lib/link/index.js b/lib/link/index.js
deleted file mode 100644
index a0e50a865..000000000
--- a/lib/link/index.js
+++ /dev/null
@@ -1,23 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Link = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Link = require('./Link.js');
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var ThemedLink = (0, _reactCssThemr.themr)(_identifiers.LINK, _theme2.default)(_Link.Link);
-
-exports.default = ThemedLink;
-exports.Link = ThemedLink;
\ No newline at end of file
diff --git a/lib/link/theme.scss b/lib/link/theme.scss
deleted file mode 100644
index 11eb90844..000000000
--- a/lib/link/theme.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-
-.icon {
-  margin-right: $unit;
-  font-size: 1.8 * $unit;
-}
-
-.link {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-content: center;
-  align-items: center;
-  justify-content: center;
-  line-height: 1.5;
-  cursor: pointer;
-  transition: opacity $animation-duration $animation-curve-default;
-  &:not(.active) {
-    opacity: .5;
-  }
-  &:hover, &:active {
-    opacity: 1;
-  }
-  > * {
-    vertical-align: middle;
-  }
-  > abbr {
-    text-transform: capitalize;
-  }
-  > small {
-    margin-left: .8 * $unit;
-    font-size: $font-size-tiny;
-    text-align: center;
-  }
-}
diff --git a/lib/list/List.js b/lib/list/List.js
deleted file mode 100644
index d0859031e..000000000
--- a/lib/list/List.js
+++ /dev/null
@@ -1,99 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.List = exports.listFactory = undefined;
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _ListItem = require('./ListItem.js');
-
-var _ListItem2 = _interopRequireDefault(_ListItem);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var mergeProp = function mergeProp(propName, child, parent) {
-  return child[propName] !== undefined ? child[propName] : parent[propName];
-};
-
-var factory = function factory(ListItem) {
-  var List = function (_Component) {
-    _inherits(List, _Component);
-
-    function List() {
-      _classCallCheck(this, List);
-
-      return _possibleConstructorReturn(this, (List.__proto__ || Object.getPrototypeOf(List)).apply(this, arguments));
-    }
-
-    _createClass(List, [{
-      key: 'renderItems',
-      value: function renderItems() {
-        var _this2 = this;
-
-        return _react2.default.Children.map(this.props.children, function (item) {
-          if (item.type === ListItem) {
-            var selectable = mergeProp('selectable', item.props, _this2.props);
-            var ripple = mergeProp('ripple', item.props, _this2.props);
-            return _react2.default.cloneElement(item, { selectable: selectable, ripple: ripple });
-          } else {
-            return _react2.default.cloneElement(item);
-          }
-        });
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        return _react2.default.createElement(
-          'ul',
-          { 'data-react-toolbox': 'list', className: (0, _classnames2.default)(this.props.theme.list, this.props.className) },
-          this.renderItems()
-        );
-      }
-    }]);
-
-    return List;
-  }(_react.Component);
-
-  List.propTypes = {
-    children: _react.PropTypes.node,
-    className: _react.PropTypes.string,
-    ripple: _react.PropTypes.bool,
-    selectable: _react.PropTypes.bool,
-    theme: _react.PropTypes.shape({
-      list: _react.PropTypes.string
-    })
-  };
-  List.defaultProps = {
-    className: '',
-    ripple: false,
-    selectable: false
-  };
-
-
-  return List;
-};
-
-var List = factory(_ListItem2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(List);
-exports.listFactory = factory;
-exports.List = List;
\ No newline at end of file
diff --git a/lib/list/ListCheckbox.js b/lib/list/ListCheckbox.js
deleted file mode 100644
index 6ce2097b7..000000000
--- a/lib/list/ListCheckbox.js
+++ /dev/null
@@ -1,93 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ListCheckbox = exports.listCheckboxFactory = undefined;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Checkbox = require('../checkbox/Checkbox.js');
-
-var _Checkbox2 = _interopRequireDefault(_Checkbox);
-
-var _ListItemContent = require('./ListItemContent.js');
-
-var _ListItemContent2 = _interopRequireDefault(_ListItemContent);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var factory = function factory(Checkbox, ListItemContent) {
-  var ListCheckbox = function ListCheckbox(_ref) {
-    var caption = _ref.caption,
-        checked = _ref.checked,
-        className = _ref.className,
-        disabled = _ref.disabled,
-        legend = _ref.legend,
-        name = _ref.name,
-        onBlur = _ref.onBlur,
-        onChange = _ref.onChange,
-        onFocus = _ref.onFocus,
-        theme = _ref.theme;
-
-    var _className = (0, _classnames3.default)(theme.item, theme.checkboxItem, _defineProperty({}, theme.disabled, disabled), className);
-
-    return _react2.default.createElement(
-      'li',
-      { className: _className },
-      _react2.default.createElement(Checkbox, {
-        checked: checked,
-        className: theme.checkbox,
-        disabled: disabled,
-        label: _react2.default.createElement(ListItemContent, { caption: caption, legend: legend }),
-        name: name,
-        onBlur: onBlur,
-        onChange: onChange,
-        onFocus: onFocus
-      })
-    );
-  };
-
-  ListCheckbox.propTypes = {
-    caption: _react.PropTypes.string,
-    checked: _react.PropTypes.bool,
-    className: _react.PropTypes.string,
-    disabled: _react.PropTypes.bool,
-    legend: _react.PropTypes.string,
-    name: _react.PropTypes.string,
-    onBlur: _react.PropTypes.func,
-    onChange: _react.PropTypes.func,
-    onFocus: _react.PropTypes.func,
-    theme: _react.PropTypes.shape({
-      checkbox: _react.PropTypes.string,
-      checkboxItem: _react.PropTypes.string,
-      disabled: _react.PropTypes.string,
-      item: _react.PropTypes.string
-    })
-  };
-
-  ListCheckbox.defaultProps = {
-    checked: false,
-    disabled: false
-  };
-
-  return ListCheckbox;
-};
-
-var ListCheckbox = factory(_Checkbox2.default, _ListItemContent2.default);
-
-exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListCheckbox);
-exports.listCheckboxFactory = factory;
-exports.ListCheckbox = ListCheckbox;
\ No newline at end of file
diff --git a/lib/list/ListDivider.js b/lib/list/ListDivider.js
deleted file mode 100644
index 4f2a1d143..000000000
--- a/lib/list/ListDivider.js
+++ /dev/null
@@ -1,37 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ListDivider = undefined;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var ListDivider = function ListDivider(_ref) {
-  var inset = _ref.inset,
-      theme = _ref.theme;
-  return _react2.default.createElement('hr', { className: inset ? theme.divider + ' ' + theme.inset : theme.divider });
-};
-
-ListDivider.propTypes = {
-  inset: _react.PropTypes.bool,
-  theme: _react.PropTypes.shape({
-    divider: _react.PropTypes.string,
-    inset: _react.PropTypes.string
-  })
-};
-
-ListDivider.defaultProps = {
-  inset: false
-};
-
-exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListDivider);
-exports.ListDivider = ListDivider;
\ No newline at end of file
diff --git a/lib/list/ListItem.js b/lib/list/ListItem.js
deleted file mode 100644
index 5f8f58b72..000000000
--- a/lib/list/ListItem.js
+++ /dev/null
@@ -1,156 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ListItem = exports.listItemFactory = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _ListItemContent = require('./ListItemContent.js');
-
-var _ListItemContent2 = _interopRequireDefault(_ListItemContent);
-
-var _ListItemLayout = require('./ListItemLayout.js');
-
-var _ListItemLayout2 = _interopRequireDefault(_ListItemLayout);
-
-var _Ripple = require('../ripple/Ripple.js');
-
-var _Ripple2 = _interopRequireDefault(_Ripple);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(ripple, ListItemLayout, ListItemContent) {
-  var ListItem = function (_Component) {
-    _inherits(ListItem, _Component);
-
-    function ListItem() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, ListItem);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ListItem.__proto__ || Object.getPrototypeOf(ListItem)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
-        if (_this.props.onClick && !_this.props.disabled) {
-          _this.props.onClick(event);
-        }
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(ListItem, [{
-      key: 'groupChildren',
-      value: function groupChildren() {
-        var children = {
-          leftActions: [],
-          rightActions: [],
-          ignored: []
-        };
-
-        _react2.default.Children.forEach(this.props.children, function (child, i) {
-          if (!_react2.default.isValidElement(child)) {
-            return;
-          }
-
-          var _child$props = child.props,
-              listItemIgnore = _child$props.listItemIgnore,
-              rest = _objectWithoutProperties(_child$props, ['listItemIgnore']);
-
-          var strippedChild = _extends({}, child, { props: rest });
-
-          if (listItemIgnore) {
-            children.ignored.push(strippedChild);
-            return;
-          }
-          if (child.type === ListItemContent) {
-            children.itemContent = strippedChild;
-            return;
-          }
-          var bucket = children.itemContent ? 'rightActions' : 'leftActions';
-          children[bucket].push(_extends({}, strippedChild, { key: i }));
-        });
-
-        return children;
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var _props = this.props,
-            className = _props.className,
-            onMouseDown = _props.onMouseDown,
-            onTouchStart = _props.onTouchStart,
-            to = _props.to,
-            onClick = _props.onClick,
-            hasRipple = _props.ripple,
-            theme = _props.theme,
-            other = _objectWithoutProperties(_props, ['className', 'onMouseDown', 'onTouchStart', 'to', 'onClick', 'ripple', 'theme']); //eslint-disable-line no-unused-vars
-
-
-        var children = this.groupChildren();
-        var content = _react2.default.createElement(ListItemLayout, _extends({ theme: theme }, children, other));
-        return _react2.default.createElement(
-          'li',
-          { className: theme.listItem + ' ' + className, onClick: this.handleClick, onMouseDown: onMouseDown, onTouchStart: onTouchStart },
-          to ? _react2.default.createElement(
-            'a',
-            { href: this.props.to },
-            content
-          ) : content,
-          children.ignored
-        );
-      }
-    }]);
-
-    return ListItem;
-  }(_react.Component);
-
-  ListItem.propTypes = {
-    children: _react.PropTypes.any,
-    className: _react.PropTypes.string,
-    disabled: _react.PropTypes.bool,
-    onClick: _react.PropTypes.func,
-    ripple: _react.PropTypes.bool,
-    theme: _react.PropTypes.shape({
-      listItem: _react.PropTypes.string
-    }),
-    to: _react.PropTypes.string
-  };
-  ListItem.defaultProps = {
-    className: '',
-    disabled: false,
-    ripple: false
-  };
-
-
-  return ripple(ListItem);
-};
-
-var ripple = (0, _Ripple2.default)({ centered: false, listItemIgnore: true });
-var ListItem = factory(ripple, _ListItemLayout2.default, _ListItemContent2.default);
-
-exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListItem);
-exports.listItemFactory = factory;
-exports.ListItem = ListItem;
\ No newline at end of file
diff --git a/lib/list/ListItemAction.js b/lib/list/ListItemAction.js
deleted file mode 100644
index a2e40dd83..000000000
--- a/lib/list/ListItemAction.js
+++ /dev/null
@@ -1,44 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ListItemAction = undefined;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var ListItemAction = function ListItemAction(_ref) {
-  var action = _ref.action,
-      theme = _ref.theme;
-  var _action$props = action.props,
-      onClick = _action$props.onClick,
-      onMouseDown = _action$props.onMouseDown;
-
-  var stopRipple = onClick && !onMouseDown;
-  var stop = function stop(e) {
-    return e.stopPropagation();
-  };
-  return _react2.default.createElement(
-    'span',
-    { className: theme.itemAction, onMouseDown: stopRipple && stop, onClick: onClick && stop },
-    action
-  );
-};
-
-ListItemAction.propTypes = {
-  action: _react.PropTypes.object,
-  theme: _react.PropTypes.shape({
-    itemAction: _react.PropTypes.string
-  })
-};
-
-exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListItemAction);
-exports.ListItemAction = ListItemAction;
\ No newline at end of file
diff --git a/lib/list/ListItemActions.js b/lib/list/ListItemActions.js
deleted file mode 100644
index d19790595..000000000
--- a/lib/list/ListItemActions.js
+++ /dev/null
@@ -1,56 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ListItemActions = exports.listItemActionsFactory = undefined;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _ListItemAction = require('./ListItemAction.js');
-
-var _ListItemAction2 = _interopRequireDefault(_ListItemAction);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var factory = function factory(ListItemAction) {
-  var ListItemActions = function ListItemActions(_ref) {
-    var type = _ref.type,
-        children = _ref.children,
-        theme = _ref.theme;
-
-    var validChildren = _react2.default.Children.toArray(children).filter(function (c) {
-      return _react2.default.isValidElement(c);
-    });
-
-    return _react2.default.createElement(
-      'span',
-      { className: theme[type] },
-      validChildren.map(function (action, i) {
-        return _react2.default.createElement(ListItemAction, { key: i, theme: theme, action: action });
-      })
-    );
-  };
-
-  ListItemActions.propTypes = {
-    children: _react.PropTypes.any,
-    theme: _react.PropTypes.shape({
-      left: _react.PropTypes.string,
-      right: _react.PropTypes.string
-    }),
-    type: _react.PropTypes.oneOf(['left', 'right'])
-  };
-
-  return ListItemActions;
-};
-
-var ListItemActions = factory(_ListItemAction2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListItemActions);
-exports.listItemActionsFactory = factory;
-exports.ListItemActions = ListItemActions;
\ No newline at end of file
diff --git a/lib/list/ListItemContent.js b/lib/list/ListItemContent.js
deleted file mode 100644
index 6f51077e2..000000000
--- a/lib/list/ListItemContent.js
+++ /dev/null
@@ -1,116 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ListItemContent = exports.listItemContentFactory = undefined;
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _ListItemText = require('./ListItemText.js');
-
-var _ListItemText2 = _interopRequireDefault(_ListItemText);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var types = ['auto', 'normal', 'large'];
-
-var factory = function factory(ListItemText) {
-  var ListItemContent = function (_Component) {
-    _inherits(ListItemContent, _Component);
-
-    function ListItemContent() {
-      _classCallCheck(this, ListItemContent);
-
-      return _possibleConstructorReturn(this, (ListItemContent.__proto__ || Object.getPrototypeOf(ListItemContent)).apply(this, arguments));
-    }
-
-    _createClass(ListItemContent, [{
-      key: 'getType',
-      value: function getType() {
-        var _props = this.props,
-            type = _props.type,
-            children = _props.children,
-            caption = _props.caption,
-            legend = _props.legend;
-
-
-        var count = _react2.default.Children.count(children);
-        [caption, legend].forEach(function (s) {
-          count += s ? 1 : 0;
-        });
-        var typeIndex = Math.min(count, types.length);
-
-        return type || types[typeIndex];
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var _props2 = this.props,
-            children = _props2.children,
-            caption = _props2.caption,
-            legend = _props2.legend,
-            theme = _props2.theme;
-
-        var className = (0, _classnames3.default)(theme.itemContentRoot, _defineProperty({}, theme[this.getType()], theme[this.getType()]));
-
-        return _react2.default.createElement(
-          'span',
-          { className: className },
-          caption && _react2.default.createElement(
-            ListItemText,
-            { theme: theme, primary: true },
-            caption
-          ),
-          legend && _react2.default.createElement(
-            ListItemText,
-            { theme: theme },
-            legend
-          ),
-          children
-        );
-      }
-    }]);
-
-    return ListItemContent;
-  }(_react.Component);
-
-  ListItemContent.propTypes = {
-    caption: _react.PropTypes.string,
-    children: _react.PropTypes.any,
-    legend: _react.PropTypes.string,
-    theme: _react.PropTypes.shape({
-      itemContentRoot: _react.PropTypes.string,
-      large: _react.PropTypes.string
-    }),
-    type: _react.PropTypes.oneOf(types)
-  };
-
-
-  return ListItemContent;
-};
-
-var ListItemContent = factory(_ListItemText2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListItemContent);
-exports.listItemContentFactory = factory;
-exports.ListItemContent = ListItemContent;
\ No newline at end of file
diff --git a/lib/list/ListItemLayout.js b/lib/list/ListItemLayout.js
deleted file mode 100644
index 22080f4a7..000000000
--- a/lib/list/ListItemLayout.js
+++ /dev/null
@@ -1,104 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ListItemLayout = exports.listItemLayoutFactory = undefined;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _FontIcon = require('../font_icon/FontIcon.js');
-
-var _FontIcon2 = _interopRequireDefault(_FontIcon);
-
-var _Avatar = require('../avatar/Avatar.js');
-
-var _Avatar2 = _interopRequireDefault(_Avatar);
-
-var _ListItemContent = require('./ListItemContent.js');
-
-var _ListItemContent2 = _interopRequireDefault(_ListItemContent);
-
-var _ListItemActions = require('./ListItemActions.js');
-
-var _ListItemActions2 = _interopRequireDefault(_ListItemActions);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var factory = function factory(Avatar, ListItemContent, ListItemActions) {
-  var ListItemLayout = function ListItemLayout(props) {
-    var _classnames;
-
-    var className = (0, _classnames3.default)(props.theme.item, (_classnames = {}, _defineProperty(_classnames, props.theme.disabled, props.disabled), _defineProperty(_classnames, props.theme.selectable, props.selectable), _classnames), props.className);
-
-    var leftActions = [props.leftIcon && _react2.default.createElement(_FontIcon2.default, { value: props.leftIcon, key: 'leftIcon' }), props.avatar && _react2.default.createElement(Avatar, { image: props.avatar, key: 'avatar' })].concat(_toConsumableArray(props.leftActions));
-    var rightActions = [props.rightIcon && _react2.default.createElement(_FontIcon2.default, { value: props.rightIcon, key: 'rightIcon' })].concat(_toConsumableArray(props.rightActions));
-    var content = props.itemContent || _react2.default.createElement(ListItemContent, { theme: props.theme, caption: props.caption, legend: props.legend });
-    var emptyActions = function emptyActions(item) {
-      return !item[0] && !item[1] && !item[2];
-    };
-
-    return _react2.default.createElement(
-      'span',
-      { className: className },
-      !emptyActions(leftActions) > 0 && _react2.default.createElement(
-        ListItemActions,
-        { type: 'left', theme: props.theme },
-        leftActions
-      ),
-      content,
-      !emptyActions(rightActions) > 0 && _react2.default.createElement(
-        ListItemActions,
-        { type: 'right', theme: props.theme },
-        rightActions
-      )
-    );
-  };
-
-  ListItemLayout.propTypes = {
-    avatar: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-    caption: _react.PropTypes.string,
-    children: _react.PropTypes.any,
-    className: _react.PropTypes.string,
-    disabled: _react.PropTypes.bool,
-    itemContent: _react.PropTypes.element,
-    leftActions: _react.PropTypes.array,
-    leftIcon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-    legend: _react.PropTypes.string,
-    rightActions: _react.PropTypes.array,
-    rightIcon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-    selectable: _react.PropTypes.bool,
-    theme: _react.PropTypes.shape({
-      disabled: _react.PropTypes.string,
-      item: _react.PropTypes.string,
-      selectable: _react.PropTypes.string
-    }),
-    to: _react.PropTypes.string
-  };
-
-  ListItemLayout.defaultProps = {
-    disabled: false,
-    selectable: false
-  };
-
-  return ListItemLayout;
-};
-
-var ListItemLayout = factory(_Avatar2.default, _ListItemContent2.default, _ListItemActions2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListItemLayout);
-exports.listItemLayoutFactory = factory;
-exports.ListItemLayout = ListItemLayout;
\ No newline at end of file
diff --git a/lib/list/ListItemText.js b/lib/list/ListItemText.js
deleted file mode 100644
index 8778f3144..000000000
--- a/lib/list/ListItemText.js
+++ /dev/null
@@ -1,58 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ListItemText = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-var ListItemText = function ListItemText(_ref) {
-  var className = _ref.className,
-      primary = _ref.primary,
-      children = _ref.children,
-      theme = _ref.theme,
-      other = _objectWithoutProperties(_ref, ['className', 'primary', 'children', 'theme']);
-
-  var _className = (0, _classnames3.default)(theme.itemText, _defineProperty({}, theme.primary, primary), className);
-  return _react2.default.createElement(
-    'span',
-    _extends({ 'data-react-toolbox': 'list-item-text', className: _className }, other),
-    children
-  );
-};
-
-ListItemText.propTypes = {
-  children: _react.PropTypes.any,
-  className: _react.PropTypes.string,
-  primary: _react.PropTypes.bool,
-  theme: _react.PropTypes.shape({
-    itemText: _react.PropTypes.string,
-    primary: _react.PropTypes.string
-  })
-};
-
-ListItemText.defaultProps = {
-  primary: false
-};
-
-exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListItemText);
-exports.ListItemText = ListItemText;
\ No newline at end of file
diff --git a/lib/list/ListSubHeader.js b/lib/list/ListSubHeader.js
deleted file mode 100644
index 4e04c694b..000000000
--- a/lib/list/ListSubHeader.js
+++ /dev/null
@@ -1,44 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ListSubHeader = undefined;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var ListSubHeader = function ListSubHeader(_ref) {
-  var caption = _ref.caption,
-      className = _ref.className,
-      theme = _ref.theme;
-  return _react2.default.createElement(
-    'h5',
-    { className: (0, _classnames2.default)(theme.subheader, className) },
-    caption
-  );
-};
-
-ListSubHeader.propTypes = {
-  caption: _react.PropTypes.string,
-  className: _react.PropTypes.string,
-  theme: _react.PropTypes.object
-};
-
-ListSubHeader.defaultProps = {
-  className: ''
-};
-
-exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListSubHeader);
-exports.ListSubHeader = ListSubHeader;
\ No newline at end of file
diff --git a/lib/list/_config.scss b/lib/list/_config.scss
deleted file mode 100644
index a8814551f..000000000
--- a/lib/list/_config.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-$list-vertical-padding: .8 * $unit !default;
-$list-horizontal-padding: 1.6 * $unit !default;
-$list-content-left-spacing: 7.2 * $unit !default;
-$list-subheader-height: 4.8 * $unit !default;
-$list-subheader-font-size: 1.4 * $unit !default;
-$list-subheader-font-weight: 500 !default;
-$list-divider-height: .1 * $unit !default;
-$list-item-min-height: 4.8 * $unit !default;
-$list-item-min-height-legend: 7.2 * $unit !default;
-$list-item-hover-color: $palette-grey-200 !default;
-$list-item-legend-margin-top: .3 * $unit !default;
-$list-item-icon-font-size: 2.4 * $unit !default;
-$list-item-icon-size: 1.8 * $unit !default;
-$list-item-right-icon-margin: $list-content-left-spacing - 2 * $list-horizontal-padding - $list-item-icon-size !default;
-$list-item-right-checkbox-margin: $list-item-right-icon-margin + $list-horizontal-padding !default;
-$list-item-avatar-height: 4 * $unit !default;
-$list-item-avatar-margin: .8 * $unit !default;
-$list-item-child-margin: .8 * $unit !default;
diff --git a/lib/list/index.d.ts b/lib/list/index.d.ts
deleted file mode 100644
index ad4ace447..000000000
--- a/lib/list/index.d.ts
+++ /dev/null
@@ -1,265 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface ListTheme {
-  /**
-   * Used for the root element of the list.
-   */
-  list?: string;
-}
-
-interface ListProps extends ReactToolbox.Props {
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * If true, each element in the list will have a ripple effect on click
-   * @default false
-   */
-  ripple?: boolean;
-  /**
-   * If true, the elements in the list will display a hover effect and a pointer cursor.
-   * @default false
-   */
-  selectable?: boolean;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: ListTheme;
-}
-
-export class List extends React.Component<ListProps, {}> { }
-
-export interface ListCheckboxTheme {
-  /**
-   * Used as a wrapper class for the subheader element.
-   */
-  checkbox?: string;
-  /**
-   * Added to the checkbox element.
-   */
-  checkboxItem?: string;
-  /**
-   * Added to the inner content if its a disabled item.
-   */
-  disabled?: string;
-  /**
-   * Used for the inner content of a list item.
-   */
-  item?: string;
-  /**
-   * Used for the content wrapper element in list item.
-   */
-  itemContentRoot?: string;
-  /**
-   * Added to the text inside of the list item.
-   */
-  itemText?: string;
-  /**
-   * Added to the content wrapper element if size is large.
-   */
-  large?: string;
-  /**
-   * Added to the text inside of the list item if its primary.
-   */
-  primary?: string;
-}
-
-interface ListCheckboxProps extends ReactToolbox.Props {
-  /**
-   * Main text of the item. Required.
-   */
-  caption?: string;
-  /**
-   * If true the checkbox appears checked by default.
-   * @default false
-   */
-  checked?: boolean;
-  /**
-   * If true, the item is displayed as disabled and it's not clickable.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * Secondary text to display under the caption.
-   */
-  legend?: string;
-  /**
-   * Name for the checkbox input item.
-   */
-  name?: string;
-  /**
-   * Callback called when the input element is blurred.
-   */
-  onBlur?: Function;
-  /**
-   * Callback called when the input element is changed.
-   */
-  onChange?: Function;
-  /**
-   * Callback called when the input element is focused.
-   */
-  onFocus?: Function;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: ListCheckboxTheme;
-}
-
-export class ListCheckbox extends React.Component<ListCheckboxProps, {}> { }
-
-export interface ListDividerTheme {
-  /**
-   * Added to the root element.
-   */
-  divider?: string;
-  /**
-   * Added to root element if inset is true.
-   */
-  inset?: string;
-}
-
-interface ListDividerProps extends ReactToolbox.Props {
-  /**
-   * If true, will leave a space at the left side.
-   */
-  inset?: boolean;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: ListDividerTheme;
-}
-
-export class ListDivider extends React.Component<ListDividerProps, {}> { }
-
-export interface ListItemTheme {
-  /**
-   * Added to the inner content if its a disabled item.
-   */
-  disabled?: string;
-  /**
-   * Used for the inner content of a list item.
-   */
-  item?: string;
-  /**
-   * Used for each action element (left/right).
-   */
-  itemAction?: string;
-  /**
-   * Used for the content wrapper element in list item.
-   */
-  itemContentRoot?: string;
-  /**
-   * Added to the text inside of the list item.
-   */
-  itemText?: string;
-  /**
-   * Added to the content wrapper element if size is large.
-   */
-  large?: string;
-  /**
-   * Added for the element that wraps left actions.
-   */
-  left?: string;
-  /**
-   * Used for the root element of the list.
-   */
-  listItem?: string;
-  /**
-   * Added to the text inside of the list item if its primary.
-   */
-  primary?: string;
-  /**
-   * Added for the element that wraps right actions.
-   */
-  right?: string;
-  /**
-   * Added to the inner content if its a selectable item.
-   */
-  selectable?: string;
-}
-
-interface ListItemProps extends ReactToolbox.Props {
-  /**
-   * A string URL to specify an avatar in the left side of the item.
-   */
-  avatar?: React.ReactNode | string;
-  /**
-   * Main text of the item.
-   */
-  caption?: string;
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * If true, the item is displayed as disabled and is not clickable.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * An element that will be displayed as the item. If set, this will override caption and legend.
-   */
-  itemContent?: React.ReactNode;
-  /**
-   * A list of elements that are placed on the left side of the item and after the avatar attribute.
-   */
-  leftActions?: React.ReactNode;
-  /**
-   * A string key of a font icon or element to display an icon in the left side of the item.
-   */
-  leftIcon?: React.ReactNode | string;
-  /**
-   * Secondary text to display under the caption.
-   */
-  legend?: string;
-  /**
-   * A list of elements that are placed on the right side of the item and after the rightIcon attribute.
-   */
-  rightActions?: React.ReactNode;
-  /**
-   * The same as the leftIcon but in this case the icon is displayed in the right side.
-   */
-  rightIcon?: React.ReactNode | string;
-  /**
-   * If true, the item displays a ripple effect on click. By default it's inherited from the parent element.
-   */
-  ripple?: boolean;
-  /**
-   * If true, the elements in the list will display a hover effect and a pointer cursor. Inherited from the parent.
-   * @default false
-   */
-  selectable?: boolean;
-  /**
-   * Classnames object defining the component style.
-   * @default false
-   */
-  theme?: ListItemTheme;
-  /**
-   * In case you want to provide the item as a link, you can pass this property to specify the href.
-   */
-  to?: string;
-}
-
-export class ListItem extends React.Component<ListItemProps, {}> { }
-
-export interface ListSubHeaderTheme {
-  /**
-   * Used as a wrapper class for the subheader element.
-   */
-  subheader?: string;
-}
-
-interface ListSubHeaderProps extends ReactToolbox.Props {
-  /**
-   * Text that will be displayed.
-   */
-  caption?: string;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: ListSubHeaderTheme;
-}
-
-export class ListSubHeader extends React.Component<ListSubHeaderProps, {}> { }
diff --git a/lib/list/index.js b/lib/list/index.js
deleted file mode 100644
index a7445462f..000000000
--- a/lib/list/index.js
+++ /dev/null
@@ -1,69 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.List = exports.ListItem = exports.ListDivider = exports.ListCheckbox = exports.ListItemText = exports.ListSubHeader = exports.ListItemLayout = exports.ListItemContent = exports.ListItemActions = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _avatar = require('../avatar');
-
-var _checkbox = require('../checkbox');
-
-var _ListItemText = require('./ListItemText.js');
-
-var _ListItemAction = require('./ListItemAction.js');
-
-var _ListSubHeader = require('./ListSubHeader.js');
-
-var _ListDivider = require('./ListDivider.js');
-
-var _List = require('./List.js');
-
-var _ListItem = require('./ListItem.js');
-
-var _ListCheckbox = require('./ListCheckbox.js');
-
-var _ListItemActions = require('./ListItemActions.js');
-
-var _ListItemContent = require('./ListItemContent.js');
-
-var _ListItemLayout = require('./ListItemLayout.js');
-
-var _ripple = require('../ripple');
-
-var _ripple2 = _interopRequireDefault(_ripple);
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var applyTheme = function applyTheme(Component) {
-  return (0, _reactCssThemr.themr)(_identifiers.LIST, _theme2.default)(Component);
-};
-var ripple = (0, _ripple2.default)({ centered: false, listItemIgnore: true });
-var ThemedListItemAction = applyTheme(_ListItemAction.ListItemAction);
-var ThemedListSubHeader = applyTheme(_ListSubHeader.ListSubHeader);
-var ThemedListItemText = applyTheme(_ListItemText.ListItemText);
-var ThemedListDivider = applyTheme(_ListDivider.ListDivider);
-var ThemedListItemContent = applyTheme((0, _ListItemContent.listItemContentFactory)(ThemedListItemText));
-var ThemedListItemActions = applyTheme((0, _ListItemActions.listItemActionsFactory)(ThemedListItemAction));
-var ThemedListItemLayout = applyTheme((0, _ListItemLayout.listItemLayoutFactory)(_avatar.Avatar, ThemedListItemContent, ThemedListItemActions));
-var ThemedListCheckbox = applyTheme((0, _ListCheckbox.listCheckboxFactory)(_checkbox.Checkbox, ThemedListItemContent));
-var ThemedListItem = applyTheme((0, _ListItem.listItemFactory)(ripple, ThemedListItemLayout, ThemedListItemContent));
-var ThemedList = applyTheme((0, _List.listFactory)(ThemedListItem));
-
-exports.ListItemActions = ThemedListItemActions;
-exports.ListItemContent = ThemedListItemContent;
-exports.ListItemLayout = ThemedListItemLayout;
-exports.ListSubHeader = ThemedListSubHeader;
-exports.ListItemText = ThemedListItemText;
-exports.ListCheckbox = ThemedListCheckbox;
-exports.ListDivider = ThemedListDivider;
-exports.ListItem = ThemedListItem;
-exports.List = ThemedList;
\ No newline at end of file
diff --git a/lib/list/theme.scss b/lib/list/theme.scss
deleted file mode 100644
index e432fcccb..000000000
--- a/lib/list/theme.scss
+++ /dev/null
@@ -1,159 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.list {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  padding: $list-vertical-padding 0;
-  text-align: left;
-  white-space: nowrap;
-  list-style: none;
-}
-
-.subheader {
-  padding-left: $list-horizontal-padding;
-  margin: - $list-vertical-padding 0 0;
-  font-size: $list-subheader-font-size;
-  font-weight: $list-subheader-font-weight;
-  line-height: $list-subheader-height;
-  color: $color-text-secondary;
-}
-
-.divider {
-  height: $list-divider-height;
-  margin: - $list-divider-height 0 0;
-  background-color: $color-divider;
-  border: 0;
-  &.inset {
-    margin-right: $list-horizontal-padding;
-    margin-left: $list-content-left-spacing;
-  }
-  .list + & {
-    margin-top: - $list-vertical-padding;
-  }
-  .listItem ~ & {
-    margin-top: $list-vertical-padding;
-    margin-bottom: $list-vertical-padding;
-  }
-}
-
-.listItem {
-  position: relative;
-  > [data-react-toolbox="ripple"] {
-    overflow: hidden;
-  }
-
-  .ripple {
-    color: $color-text-secondary;
-  }
-}
-
-.item {
-  position: relative;
-  display: flex;
-  min-height: $list-item-min-height;
-  align-items: center;
-  padding: 0 $list-horizontal-padding;
-  color: $color-text;
-  &.selectable:not(.disabled):hover {
-    cursor: pointer;
-    background-color: $list-item-hover-color;
-  }
-  &.disabled {
-    pointer-events: none;
-    &:not(.checkboxItem) {
-      opacity: .5;
-    }
-    > .checkbox > [data-react-toolbox="label"] {
-      opacity: .5;
-    }
-  }
-}
-
-.left {
-  [data-react-toolbox="font-icon"] {
-    width: $list-item-icon-size;
-  }
-  & :last-child {
-    > [data-react-toolbox="font-icon"] {
-      margin-right: $list-item-right-icon-margin;
-    }
-  }
-}
-
-.right {
-  > :last-child  {
-    margin-right: 0;
-  }
-
-  > :first-child {
-    margin-left: $list-horizontal-padding;
-  }
-}
-
-.left, .right {
-  display: flex;
-  flex: 0 0 auto;
-  align-items: center;
-  vertical-align: middle;
-}
-
-.itemAction {
-  display: flex;
-  margin: $list-item-child-margin $list-horizontal-padding $list-item-child-margin 0;
-
-  > * {
-    padding: 0;
-  }
-
-  > [data-react-toolbox="font-icon"] {
-    font-size: $list-item-icon-font-size;
-    color: $color-text-secondary;
-  }
-}
-
-.itemContentRoot {
-  display: block;
-  flex-grow: 1;
-  &.large {
-    display: flex;
-    height: $list-item-min-height-legend;
-    flex-direction: column;
-    justify-content: center;
-  }
-}
-
-.checkbox {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  min-height: $list-item-min-height;
-  align-items: center;
-  margin: 0;
-  cursor: pointer;
-  > [data-react-toolbox="check"] {
-    margin-right: $list-item-right-checkbox-margin;
-  }
-  > [data-react-toolbox="label"] {
-    padding-left: 0;
-  }
-}
-
-.itemText {
-  display: block;
-
-  &:not(.primary) {
-    padding-top: $list-item-legend-margin-top;
-    font-size: $font-size-small;
-    color: $color-text-secondary;
-    white-space: normal;
-  }
-
-  &.primary {
-    font-size: $font-size-normal;
-    color: $color-text;
-  }
-}
diff --git a/lib/menu/IconMenu.js b/lib/menu/IconMenu.js
deleted file mode 100644
index 70bff718d..000000000
--- a/lib/menu/IconMenu.js
+++ /dev/null
@@ -1,133 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.IconMenu = exports.iconMenuFactory = undefined;
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _IconButton = require('../button/IconButton.js');
-
-var _IconButton2 = _interopRequireDefault(_IconButton);
-
-var _Menu = require('./Menu.js');
-
-var _Menu2 = _interopRequireDefault(_Menu);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(IconButton, Menu) {
-  var IconMenu = function (_Component) {
-    _inherits(IconMenu, _Component);
-
-    function IconMenu() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, IconMenu);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = IconMenu.__proto__ || Object.getPrototypeOf(IconMenu)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-        active: false
-      }, _this.handleButtonClick = function (event) {
-        _this.setState({ active: !_this.state.active });
-        if (_this.props.onClick) _this.props.onClick(event);
-      }, _this.handleMenuHide = function () {
-        _this.setState({ active: false });
-        if (_this.props.onHide) _this.props.onHide();
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(IconMenu, [{
-      key: 'render',
-      value: function render() {
-        return _react2.default.createElement(
-          'div',
-          { className: (0, _classnames2.default)(this.props.theme.iconMenu, this.props.className) },
-          _react2.default.createElement(IconButton, {
-            className: this.props.theme.icon,
-            icon: this.props.icon,
-            onClick: this.handleButtonClick,
-            ripple: this.props.iconRipple
-          }),
-          _react2.default.createElement(
-            Menu,
-            {
-              ref: 'menu',
-              active: this.state.active,
-              onHide: this.handleMenuHide,
-              onSelect: this.props.onSelect,
-              onShow: this.props.onShow,
-              position: this.props.position,
-              ripple: this.props.menuRipple,
-              selectable: this.props.selectable,
-              selected: this.props.selected,
-              theme: this.props.theme
-            },
-            this.props.children
-          )
-        );
-      }
-    }]);
-
-    return IconMenu;
-  }(_react.Component);
-
-  IconMenu.propTypes = {
-    children: _react.PropTypes.node,
-    className: _react.PropTypes.string,
-    icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-    iconRipple: _react.PropTypes.bool,
-    menuRipple: _react.PropTypes.bool,
-    onClick: _react.PropTypes.func,
-    onHide: _react.PropTypes.func,
-    onSelect: _react.PropTypes.func,
-    onShow: _react.PropTypes.func,
-    position: _react.PropTypes.string,
-    selectable: _react.PropTypes.bool,
-    selected: _react.PropTypes.any,
-    theme: _react.PropTypes.shape({
-      icon: _react.PropTypes.string,
-      iconMenu: _react.PropTypes.string
-    })
-  };
-  IconMenu.defaultProps = {
-    className: '',
-    icon: 'more_vert',
-    iconRipple: true,
-    menuRipple: true,
-    position: 'auto',
-    selectable: false
-  };
-
-
-  return IconMenu;
-};
-
-var IconMenu = factory(_IconButton2.default, _Menu2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.MENU)(IconMenu);
-exports.iconMenuFactory = factory;
-exports.IconMenu = IconMenu;
\ No newline at end of file
diff --git a/lib/menu/Menu.js b/lib/menu/Menu.js
deleted file mode 100644
index 9c7017c31..000000000
--- a/lib/menu/Menu.js
+++ /dev/null
@@ -1,324 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Menu = exports.menuFactory = undefined;
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactDom = require('react-dom');
-
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _utils = require('../utils');
-
-var _MenuItem = require('./MenuItem.js');
-
-var _MenuItem2 = _interopRequireDefault(_MenuItem);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var POSITION = {
-  AUTO: 'auto',
-  STATIC: 'static',
-  TOP_LEFT: 'topLeft',
-  TOP_RIGHT: 'topRight',
-  BOTTOM_LEFT: 'bottomLeft',
-  BOTTOM_RIGHT: 'bottomRight'
-};
-
-var factory = function factory(MenuItem) {
-  var Menu = function (_Component) {
-    _inherits(Menu, _Component);
-
-    function Menu() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, Menu);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Menu.__proto__ || Object.getPrototypeOf(Menu)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-        active: _this.props.active,
-        rippled: false
-      }, _this.handleDocumentClick = function (event) {
-        if (_this.state.active && !_utils.events.targetIsDescendant(event, _reactDom2.default.findDOMNode(_this))) {
-          _this.setState({ active: false, rippled: false });
-        }
-      }, _this.handleSelect = function (item, event) {
-        var _item$props = item.props,
-            value = _item$props.value,
-            onClick = _item$props.onClick;
-
-        if (onClick) event.persist();
-        _this.setState({ active: false, rippled: _this.props.ripple }, function () {
-          if (onClick) onClick(event);
-          if (_this.props.onSelect) _this.props.onSelect(value);
-        });
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(Menu, [{
-      key: 'componentDidMount',
-      value: function componentDidMount() {
-        var _this2 = this;
-
-        this.positionTimeoutHandle = setTimeout(function () {
-          var _refs$menu$getBoundin = _this2.refs.menu.getBoundingClientRect(),
-              width = _refs$menu$getBoundin.width,
-              height = _refs$menu$getBoundin.height;
-
-          var position = _this2.props.position === POSITION.AUTO ? _this2.calculatePosition() : _this2.props.position;
-          _this2.setState({ position: position, width: width, height: height });
-        });
-      }
-    }, {
-      key: 'componentWillReceiveProps',
-      value: function componentWillReceiveProps(nextProps) {
-        var _this3 = this;
-
-        if (this.props.position !== nextProps.position) {
-          var position = nextProps.position === POSITION.AUTO ? this.calculatePosition() : nextProps.position;
-          this.setState({ position: position });
-        }
-
-        /**
-         * If the menu is going to be activated via props and its not active, verify
-         * the position is appropriated and then show it recalculating position if its
-         * wrong. It should be shown in two consecutive setState.
-         */
-        if (!this.props.active && nextProps.active && !this.state.active) {
-          if (nextProps.position === POSITION.AUTO) {
-            var _position = this.calculatePosition();
-            if (this.state.position !== _position) {
-              this.setState({ position: _position, active: false }, function () {
-                _this3.activateTimeoutHandle = setTimeout(function () {
-                  _this3.show();
-                }, 20);
-              });
-            } else {
-              this.show();
-            }
-          } else {
-            this.show();
-          }
-        }
-
-        /**
-         * If the menu is being deactivated via props and the current state is
-         * active, it should be hid.
-         */
-        if (this.props.active && !nextProps.active && this.state.active) {
-          this.hide();
-        }
-      }
-    }, {
-      key: 'componentWillUpdate',
-      value: function componentWillUpdate(nextProps, nextState) {
-        if (!this.state.active && nextState.active) {
-          _utils.events.addEventsToDocument({
-            click: this.handleDocumentClick,
-            touchstart: this.handleDocumentClick
-          });
-        }
-      }
-    }, {
-      key: 'componentDidUpdate',
-      value: function componentDidUpdate(prevProps, prevState) {
-        if (prevState.active && !this.state.active) {
-          if (this.props.onHide) this.props.onHide();
-          _utils.events.removeEventsFromDocument({
-            click: this.handleDocumentClick,
-            touchstart: this.handleDocumentClick
-          });
-        } else if (!prevState.active && this.state.active && this.props.onShow) {
-          this.props.onShow();
-        }
-      }
-    }, {
-      key: 'componentWillUnmount',
-      value: function componentWillUnmount() {
-        if (this.state.active) {
-          _utils.events.removeEventsFromDocument({
-            click: this.handleDocumentClick,
-            touchstart: this.handleDocumentClick
-          });
-        }
-        clearTimeout(this.positionTimeoutHandle);
-        clearTimeout(this.activateTimeoutHandle);
-      }
-    }, {
-      key: 'calculatePosition',
-      value: function calculatePosition() {
-        var parentNode = _reactDom2.default.findDOMNode(this).parentNode;
-        if (!parentNode) return;
-
-        var _parentNode$getBoundi = parentNode.getBoundingClientRect(),
-            top = _parentNode$getBoundi.top,
-            left = _parentNode$getBoundi.left,
-            height = _parentNode$getBoundi.height,
-            width = _parentNode$getBoundi.width;
-
-        var _utils$getViewport = _utils.utils.getViewport(),
-            wh = _utils$getViewport.height,
-            ww = _utils$getViewport.width;
-
-        var toTop = top < wh / 2 - height / 2;
-        var toLeft = left < ww / 2 - width / 2;
-        return '' + (toTop ? 'top' : 'bottom') + (toLeft ? 'Left' : 'Right');
-      }
-    }, {
-      key: 'getMenuStyle',
-      value: function getMenuStyle() {
-        var _state = this.state,
-            width = _state.width,
-            height = _state.height,
-            position = _state.position;
-
-        if (position !== POSITION.STATIC) {
-          if (this.state.active) {
-            return { clip: 'rect(0 ' + width + 'px ' + height + 'px 0)' };
-          } else if (position === POSITION.TOP_RIGHT) {
-            return { clip: 'rect(0 ' + width + 'px 0 ' + width + 'px)' };
-          } else if (position === POSITION.BOTTOM_RIGHT) {
-            return { clip: 'rect(' + height + 'px ' + width + 'px ' + height + 'px ' + width + 'px)' };
-          } else if (position === POSITION.BOTTOM_LEFT) {
-            return { clip: 'rect(' + height + 'px 0 ' + height + 'px 0)' };
-          } else if (position === POSITION.TOP_LEFT) {
-            return { clip: 'rect(0 0 0 0)' };
-          }
-        }
-      }
-    }, {
-      key: 'getRootStyle',
-      value: function getRootStyle() {
-        if (this.state.position !== POSITION.STATIC) {
-          return { width: this.state.width, height: this.state.height };
-        }
-      }
-    }, {
-      key: 'renderItems',
-      value: function renderItems() {
-        var _this4 = this;
-
-        return _react2.default.Children.map(this.props.children, function (item) {
-          if (!item) return item;
-          if (item.type === MenuItem) {
-            return _react2.default.cloneElement(item, {
-              ripple: item.props.ripple || _this4.props.ripple,
-              selected: typeof item.props.value !== 'undefined' && _this4.props.selectable && item.props.value === _this4.props.selected,
-              onClick: _this4.handleSelect.bind(_this4, item)
-            });
-          } else {
-            return _react2.default.cloneElement(item);
-          }
-        });
-      }
-    }, {
-      key: 'show',
-      value: function show() {
-        var _refs$menu$getBoundin2 = this.refs.menu.getBoundingClientRect(),
-            width = _refs$menu$getBoundin2.width,
-            height = _refs$menu$getBoundin2.height;
-
-        this.setState({ active: true, width: width, height: height });
-      }
-    }, {
-      key: 'hide',
-      value: function hide() {
-        this.setState({ active: false });
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var _classnames;
-
-        var theme = this.props.theme;
-
-        var outlineStyle = { width: this.state.width, height: this.state.height };
-        var className = (0, _classnames3.default)([theme.menu, theme[this.state.position]], (_classnames = {}, _defineProperty(_classnames, theme.active, this.state.active), _defineProperty(_classnames, theme.rippled, this.state.rippled), _classnames), this.props.className);
-
-        return _react2.default.createElement(
-          'div',
-          { 'data-react-toolbox': 'menu', className: className, style: this.getRootStyle() },
-          this.props.outline ? _react2.default.createElement('div', { className: theme.outline, style: outlineStyle }) : null,
-          _react2.default.createElement(
-            'ul',
-            { ref: 'menu', className: theme.menuInner, style: this.getMenuStyle() },
-            this.renderItems()
-          )
-        );
-      }
-    }]);
-
-    return Menu;
-  }(_react.Component);
-
-  Menu.propTypes = {
-    active: _react.PropTypes.bool,
-    children: _react.PropTypes.node,
-    className: _react.PropTypes.string,
-    onHide: _react.PropTypes.func,
-    onSelect: _react.PropTypes.func,
-    onShow: _react.PropTypes.func,
-    outline: _react.PropTypes.bool,
-    position: _react.PropTypes.oneOf(Object.keys(POSITION).map(function (key) {
-      return POSITION[key];
-    })),
-    ripple: _react.PropTypes.bool,
-    selectable: _react.PropTypes.bool,
-    selected: _react.PropTypes.any,
-    theme: _react.PropTypes.shape({
-      active: _react.PropTypes.string,
-      bottomLeft: _react.PropTypes.string,
-      bottomRight: _react.PropTypes.string,
-      menu: _react.PropTypes.string,
-      menuInner: _react.PropTypes.string,
-      outline: _react.PropTypes.string,
-      rippled: _react.PropTypes.string,
-      static: _react.PropTypes.string,
-      topLeft: _react.PropTypes.string,
-      topRight: _react.PropTypes.string
-    })
-  };
-  Menu.defaultProps = {
-    active: false,
-    outline: true,
-    position: POSITION.STATIC,
-    ripple: true,
-    selectable: true
-  };
-
-
-  return Menu;
-};
-
-var Menu = factory(_MenuItem2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.MENU)(Menu);
-exports.menuFactory = factory;
-exports.Menu = Menu;
\ No newline at end of file
diff --git a/lib/menu/MenuDivider.js b/lib/menu/MenuDivider.js
deleted file mode 100644
index cf8455141..000000000
--- a/lib/menu/MenuDivider.js
+++ /dev/null
@@ -1,30 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MenuDivider = undefined;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var MenuDivider = function MenuDivider(_ref) {
-  var theme = _ref.theme;
-  return _react2.default.createElement('hr', { 'data-react-toolbox': 'menu-divider', className: theme.menuDivider });
-};
-
-MenuDivider.propTypes = {
-  theme: _react.PropTypes.shape({
-    menuDivider: _react.PropTypes.string
-  })
-};
-
-exports.default = (0, _reactCssThemr.themr)(_identifiers.MENU)(MenuDivider);
-exports.MenuDivider = MenuDivider;
\ No newline at end of file
diff --git a/lib/menu/MenuItem.js b/lib/menu/MenuItem.js
deleted file mode 100644
index d854db0e2..000000000
--- a/lib/menu/MenuItem.js
+++ /dev/null
@@ -1,136 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MenuItem = exports.menuItemFactory = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _FontIcon = require('../font_icon/FontIcon.js');
-
-var _FontIcon2 = _interopRequireDefault(_FontIcon);
-
-var _Ripple = require('../ripple/Ripple.js');
-
-var _Ripple2 = _interopRequireDefault(_Ripple);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(ripple) {
-  var MenuItem = function (_Component) {
-    _inherits(MenuItem, _Component);
-
-    function MenuItem() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, MenuItem);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = MenuItem.__proto__ || Object.getPrototypeOf(MenuItem)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
-        if (_this.props.onClick && !_this.props.disabled) {
-          _this.props.onClick(event, _this);
-        }
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(MenuItem, [{
-      key: 'render',
-      value: function render() {
-        var _classnames;
-
-        var _props = this.props,
-            icon = _props.icon,
-            caption = _props.caption,
-            children = _props.children,
-            shortcut = _props.shortcut,
-            selected = _props.selected,
-            disabled = _props.disabled,
-            theme = _props.theme,
-            others = _objectWithoutProperties(_props, ['icon', 'caption', 'children', 'shortcut', 'selected', 'disabled', 'theme']);
-
-        var className = (0, _classnames3.default)(theme.menuItem, (_classnames = {}, _defineProperty(_classnames, theme.selected, selected), _defineProperty(_classnames, theme.disabled, disabled), _classnames), this.props.className);
-
-        return _react2.default.createElement(
-          'li',
-          _extends({}, others, { 'data-react-toolbox': 'menu-item', className: className, onClick: this.handleClick }),
-          icon ? _react2.default.createElement(_FontIcon2.default, { value: icon, className: theme.icon }) : null,
-          _react2.default.createElement(
-            'span',
-            { className: theme.caption },
-            caption
-          ),
-          shortcut ? _react2.default.createElement(
-            'small',
-            { className: theme.shortcut },
-            shortcut
-          ) : null,
-          children
-        );
-      }
-    }]);
-
-    return MenuItem;
-  }(_react.Component);
-
-  MenuItem.propTypes = {
-    caption: _react.PropTypes.string,
-    children: _react.PropTypes.any,
-    className: _react.PropTypes.string,
-    disabled: _react.PropTypes.bool,
-    icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-    onClick: _react.PropTypes.func,
-    selected: _react.PropTypes.bool,
-    shortcut: _react.PropTypes.string,
-    theme: _react.PropTypes.shape({
-      caption: _react.PropTypes.string,
-      disabled: _react.PropTypes.string,
-      icon: _react.PropTypes.string,
-      menuItem: _react.PropTypes.string,
-      selected: _react.PropTypes.string,
-      shortcut: _react.PropTypes.string
-    })
-  };
-  MenuItem.defaultProps = {
-    className: '',
-    disabled: false,
-    selected: false
-  };
-
-
-  return ripple(MenuItem);
-};
-
-var MenuItem = factory((0, _Ripple2.default)({}));
-exports.default = (0, _reactCssThemr.themr)(_identifiers.MENU)(MenuItem);
-exports.menuItemFactory = factory;
-exports.MenuItem = MenuItem;
\ No newline at end of file
diff --git a/lib/menu/__test__/index.spec.js b/lib/menu/__test__/index.spec.js
deleted file mode 100644
index 8fa0b4163..000000000
--- a/lib/menu/__test__/index.spec.js
+++ /dev/null
@@ -1,51 +0,0 @@
-'use strict';
-
-var _expect = require('expect');
-
-var _expect2 = _interopRequireDefault(_expect);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactDom = require('react-dom');
-
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
-var _reactAddonsTestUtils = require('react-addons-test-utils');
-
-var _reactAddonsTestUtils2 = _interopRequireDefault(_reactAddonsTestUtils);
-
-var _Menu = require('../Menu');
-
-var _Menu2 = _interopRequireDefault(_Menu);
-
-var _MenuItem = require('../MenuItem');
-
-var _MenuItem2 = _interopRequireDefault(_MenuItem);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-describe('MenuItem', function () {
-  describe('#onClick', function () {
-    it('passes to listener the event', function () {
-      var listenerCalled = false;
-      var handleClick = function handleClick(event) {
-        listenerCalled = true;
-        (0, _expect2.default)(event).toExist();
-        (0, _expect2.default)(event.target).toExist();
-      };
-
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(
-        _Menu2.default,
-        null,
-        _react2.default.createElement(_MenuItem2.default, { key: '1', onClick: handleClick })
-      ));
-
-      var menuItem = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _MenuItem.MenuItem);
-      _reactAddonsTestUtils2.default.Simulate.click(_reactDom2.default.findDOMNode(menuItem));
-
-      (0, _expect2.default)(listenerCalled).toBe(true);
-    });
-  });
-});
\ No newline at end of file
diff --git a/lib/menu/_config.scss b/lib/menu/_config.scss
deleted file mode 100644
index 0b5343661..000000000
--- a/lib/menu/_config.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-$menu-expand-duration: .3s !default;
-$menu-fade-duration: .2s !default;
-$menu-ripple-delay: .3s !default;
-$menu-background-color: $color-white !default;
-$menu-padding: .8 * $unit 0 !default;
-$menu-outline-border-radius: .2 * $unit !default;
-$menu-item-hover-background: $palette-grey-200 !default;
-$menu-item-selected-background: transparent !default;
-$menu-item-icon-font-size: 2.4 * $unit !default;
-$menu-item-icon-size: 1.6 * $menu-item-icon-font-size !default;
-$menu-item-height: 4.8 * $unit !default;
-$menu-item-padding: 1.6 * $unit !default;
-$menu-item-font-size: 1.6 * $unit !default;
-$menu-divider-height: (4.8 * $unit) / 4 !default;
-$menu-icon-size: 2.3 * $unit !default;
-$menu-icon-ripple-duration: 650ms !default;
diff --git a/lib/menu/index.d.ts b/lib/menu/index.d.ts
deleted file mode 100644
index 5d9fccdfd..000000000
--- a/lib/menu/index.d.ts
+++ /dev/null
@@ -1,242 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface MenuTheme {
-  /**
-   * Added to the root element when menu is active.
-   */
-  active?: string;
-  /**
-   * Added to the root when position is bottom left.
-   */
-  bottomLeft?: string;
-  /**
-   * Added to the root when position is bottom right.
-   */
-  bottomRight?: string;
-  /**
-   * Used for the root element of the menu.
-   */
-  menu?: string;
-  /**
-   * Used for the inner wrapper.
-   */
-  menuInner?: string;
-  /**
-   * Used to draw the outline.
-   */
-  outline?: string;
-  /**
-   * Added to the menu in case if should have ripple.
-   */
-  rippled?: string;
-  /**
-   * Added to the root in case its static.
-   */
-  static?: string;
-  /**
-   * Added to the root when position is top left.
-   */
-  topLeft?: string;
-  /**
-   * Added to the root when position is top right.
-   */
-  topRight?: string;
-}
-
-interface MenuProps extends ReactToolbox.Props {
-  /**
-   * If true, the menu will be displayed as opened by default.
-   * @default false
-   */
-  active?: boolean;
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * Callback that will be called when the menu is being hidden.
-   */
-  onHide?: Function;
-  /**
-   * Callback that will be invoked when a menu item is selected.
-   */
-  onSelect?: Function;
-  /**
-   * Callback that will be invoked when the menu is being shown.
-   */
-  onShow?: Function;
-  /**
-   * If true the menu wrapper will show an outline with a soft shadow.
-   * @default false
-   */
-  outline?: boolean;
-  /**
-   * Determine the position of the menu. With static value the menu will be always shown, auto means that the it will decide the opening direction based on the current position. To force a position use topLeft, topRight, bottomLeft, bottomRight.
-   * @default static
-   */
-  position?: "auto" | "static" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
-  /**
-   * If true, the menu items will show a ripple effect on click.
-   * @default true
-   */
-  ripple?: boolean;
-  /**
-   * If true, the menu will keep a value to highlight the active child item.
-   * @default false
-   */
-  selectable?: boolean;
-  /**
-   * Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted.
-   */
-  selected?: any;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: MenuTheme;
-}
-
-export class Menu extends React.Component<MenuProps, {}> { }
-
-export interface IconMenuTheme {
-  /**
-   * Used for the icon element.
-   */
-  icon?: string;
-  /**
-   * Used for the root element of the icon menu.
-   */
-  iconMenu?: string;
-}
-
-interface IconMenuProps extends ReactToolbox.Props {
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * Icon font key string or Element to display the opener icon.
-   * @default more_vert
-   */
-  icon?: React.ReactNode | string;
-  /**
-   * If true, the icon will show a ripple when is clicked.
-   * @default true
-   */
-  iconRipple?: boolean;
-  /**
-   * Transferred to the Menu component.
-   * @default true
-   */
-  menuRipple?: boolean;
-  /**
-   * Callback that will be called when the menu is being hidden.
-   */
-  onHide?: Function;
-  /**
-   * Callback that will be invoked when a menu item is selected.
-   */
-  onSelect?: Function;
-  /**
-   * Callback that will be invoked when the menu is being shown.
-   */
-  onShow?: Function;
-  /**
-   * Determines the position of the menu. This property is transferred to the inner Menu component.
-   * @default auto
-   */
-  position?: "auto" | "static" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
-  /**
-   * If true, the menu will keep a value to highlight the active child item.
-   * @default false
-   */
-  selectable?: boolean;
-  /**
-   * Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted.
-   */
-  selected?: any;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: IconMenuTheme;
-}
-
-export class IconMenu extends React.Component<IconMenuProps, {}> { }
-
-export interface MenuDividerTheme {
-  /**
-   *
-   */
-  menuDivider?: string;
-}
-
-interface MenuDividerProps extends ReactToolbox.Props {
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: MenuDividerTheme;
-}
-
-export class MenuDivider extends React.Component<MenuDividerProps, {}> { }
-
-export interface MenuItemTheme {
-  /**
-   * Used for the caption inside the item.
-   */
-  caption?: string;
-  /**
-   * Added to the root element if it's disabled.
-   */
-  disabled?: string;
-  /**
-   * Used for the icon element if exists.
-   */
-  icon?: string;
-  /**
-   * Used as the root class for the component.
-   */
-  menuItem?: string;
-  /**
-   * Added to the root element in case it's selected.
-   */
-  selected?: string;
-  /**
-   * Used for the shortcut element if exists.
-   */
-  shortcut?: string;
-}
-
-interface MenuItemProps extends ReactToolbox.Props {
-  /**
-   * The text to include in the menu item. Required.
-   */
-  caption: string;
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * If true, the item will be displayed as disabled and is not selectable.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * Icon font key string or Element to display in the right side of the option.
-   */
-  icon?: React.ReactNode | string;
-  /**
-   * Transferred from the Menu component for selectable menus. Indicates if it's the current active option.
-   * @default false
-   */
-  selected?: boolean;
-  /**
-   * Displays shortcut text on the right side of the caption attribute.
-   */
-  shortcut?: string;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: MenuItemTheme;
-}
-
-export class MenuItem extends React.Component<MenuItemProps, {}> { }
diff --git a/lib/menu/index.js b/lib/menu/index.js
deleted file mode 100644
index 56f87c943..000000000
--- a/lib/menu/index.js
+++ /dev/null
@@ -1,43 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.IconMenu = exports.Menu = exports.MenuItem = exports.MenuDivider = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _button = require('../button');
-
-var _MenuDivider = require('./MenuDivider.js');
-
-var _MenuItem = require('./MenuItem.js');
-
-var _Menu = require('./Menu.js');
-
-var _IconMenu = require('./IconMenu.js');
-
-var _ripple = require('../ripple');
-
-var _ripple2 = _interopRequireDefault(_ripple);
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var applyTheme = function applyTheme(Component) {
-  return (0, _reactCssThemr.themr)(_identifiers.MENU, _theme2.default)(Component);
-};
-var ThemedMenuDivider = applyTheme(_MenuDivider.MenuDivider);
-var ThemedMenuItem = applyTheme((0, _MenuItem.menuItemFactory)((0, _ripple2.default)({})));
-var ThemedMenu = applyTheme((0, _Menu.menuFactory)(ThemedMenuItem));
-var ThemedIconMenu = applyTheme((0, _IconMenu.iconMenuFactory)(_button.IconButton, ThemedMenu));
-
-exports.MenuDivider = ThemedMenuDivider;
-exports.MenuItem = ThemedMenuItem;
-exports.Menu = ThemedMenu;
-exports.IconMenu = ThemedIconMenu;
\ No newline at end of file
diff --git a/lib/menu/theme.scss b/lib/menu/theme.scss
deleted file mode 100644
index 9f4ec9b3c..000000000
--- a/lib/menu/theme.scss
+++ /dev/null
@@ -1,154 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.iconMenu {
-  position: relative;
-  display: inline-block;
-  text-align: center;
-  .icon {
-    cursor: pointer;
-  }
-}
-
-.menu {
-  position: relative;
-  display: inline-block;
-  &.topLeft {
-    position: absolute;
-    top: 0;
-    left: 0;
-    > .outline {
-      transform-origin: 0 0;
-    }
-  }
-  &.topRight {
-    position: absolute;
-    top: 0;
-    right: 0;
-    > .outline {
-      transform-origin: 100% 0;
-    }
-  }
-  &.bottomLeft {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    > .outline {
-      transform-origin: 0 100%;
-    }
-  }
-  &.bottomRight {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    > .outline {
-      transform-origin: 100% 100%;
-    }
-  }
-  &:not(.static) {
-    z-index: $z-index-higher;
-    pointer-events: none;
-    > .outline {
-      opacity: 0;
-      transition: transform $menu-expand-duration $animation-curve-default,
-      opacity $menu-fade-duration $animation-curve-default;
-      transform: scale(0);
-      will-change: transform;
-    }
-    > .menuInner {
-      position: absolute;
-      top: 0;
-      left: 0;
-      opacity: 0;
-    }
-    &.rippled:not(.active) {
-      > .outline {
-        transition-delay: $menu-ripple-delay;
-      }
-      > .menuInner {
-        transition-delay: $menu-ripple-delay;
-      }
-    }
-    &.active {
-      pointer-events: all;
-      > .outline {
-        opacity: 1;
-        transform: scale(1);
-      }
-      > .menuInner {
-        opacity: 1;
-        transition: opacity $menu-fade-duration $animation-curve-default,
-        clip $menu-expand-duration $animation-curve-default;
-      }
-    }
-  }
-}
-
-.outline {
-  @include shadow-2dp();
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: block;
-  background-color: $menu-background-color;
-  border-radius: $menu-outline-border-radius;
-}
-
-.menuInner {
-  position: relative;
-  display: block;
-  padding: $menu-padding;
-  text-align: left;
-  white-space: nowrap;
-  list-style: none;
-}
-
-.menuItem {
-  position: relative;
-  display: flex;
-  height: $menu-item-height;
-  align-items: center;
-  padding: 0 $menu-item-padding;
-  overflow: hidden;
-  font-size: $menu-item-font-size;
-  color: $color-text;
-  &:not(.disabled):hover {
-    cursor: pointer;
-    background-color: $menu-item-hover-background;
-  }
-  &.disabled {
-    pointer-events: none;
-    opacity: .5;
-  }
-  &.selected {
-    font-weight: 500;
-    background-color: $menu-item-selected-background;
-  }
-  .ripple {
-    color: $color-text-secondary;
-  }
-
-  .icon {
-    width: $menu-item-icon-size;
-    font-size: $menu-item-icon-font-size !important;
-  }
-}
-
-.caption {
-  flex-grow: 1;
-  font-size: $font-size-normal;
-}
-
-.shortcut {
-  margin-left: $menu-item-padding;
-}
-
-.menuDivider {
-  display: block;
-  width: 100%;
-  height: 1px;
-  margin: $menu-divider-height 0;
-  background-color: $color-divider;
-}
diff --git a/lib/navigation/Navigation.js b/lib/navigation/Navigation.js
deleted file mode 100644
index 8d8876ffe..000000000
--- a/lib/navigation/Navigation.js
+++ /dev/null
@@ -1,86 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Navigation = exports.navigationFactory = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Button = require('../button/Button.js');
-
-var _Button2 = _interopRequireDefault(_Button);
-
-var _Link = require('../link/Link.js');
-
-var _Link2 = _interopRequireDefault(_Link);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var factory = function factory(Button, Link) {
-  var Navigation = function Navigation(_ref) {
-    var actions = _ref.actions,
-        children = _ref.children,
-        className = _ref.className,
-        routes = _ref.routes,
-        theme = _ref.theme,
-        type = _ref.type;
-
-    var _className = (0, _classnames2.default)(theme[type], className);
-    var buttons = actions.map(function (action, index) {
-      return _react2.default.createElement(Button, _extends({ className: theme.button, key: index }, action));
-    });
-
-    var links = routes.map(function (route, index) {
-      return _react2.default.createElement(Link, _extends({ className: theme.link, key: index }, route));
-    });
-
-    return _react2.default.createElement(
-      'nav',
-      { 'data-react-toolbox': 'navigation', className: _className },
-      links,
-      buttons,
-      children
-    );
-  };
-
-  Navigation.propTypes = {
-    actions: _react.PropTypes.array,
-    children: _react.PropTypes.node,
-    className: _react.PropTypes.string,
-    routes: _react.PropTypes.array,
-    theme: _react.PropTypes.shape({
-      button: _react.PropTypes.string,
-      horizontal: _react.PropTypes.string,
-      link: _react.PropTypes.string,
-      vertical: _react.PropTypes.string
-    }),
-    type: _react.PropTypes.oneOf(['vertical', 'horizontal'])
-  };
-
-  Navigation.defaultProps = {
-    actions: [],
-    className: '',
-    type: 'horizontal',
-    routes: []
-  };
-
-  return Navigation;
-};
-
-var Navigation = factory(_Button2.default, _Link2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.NAVIGATION)(Navigation);
-exports.navigationFactory = factory;
-exports.Navigation = Navigation;
\ No newline at end of file
diff --git a/lib/navigation/_config.scss b/lib/navigation/_config.scss
deleted file mode 100644
index 6b654ac73..000000000
--- a/lib/navigation/_config.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-$navigation-space: $unit !default;
-$navigation-color: $color-black !default;
diff --git a/lib/navigation/index.d.ts b/lib/navigation/index.d.ts
deleted file mode 100644
index a2795a8da..000000000
--- a/lib/navigation/index.d.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface NavigationTheme {
-  /**
-   * Used for buttons provided in the component.
-   */
-  button?: string;
-  /**
-   * Used for the root element if the layout is horizontal.
-   */
-  horizontal?: string;
-  /**
-   * Used for links provided in the component.
-   */
-  link?: string;
-  /**
-   * Used for the root element if the layout is vertical.
-   */
-  vertical?: string;
-}
-
-interface NavigationProps extends ReactToolbox.Props {
-  /**
-   * Array of objects that will be represented as <Button/> so the keys will be transferred as properties the Button Component.
-   */
-  actions?: any[];
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * Array of objects similar to actions but that will be rendered as <Link/> component definition.
-   */
-  routes?: any[];
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: NavigationTheme;
-  /**
-   * Type of the navigation, it can be vertical or horizontal.
-   * @default horizontal
-   */
-  type?: "vertical" | "horizontal";
-}
-
-export class Navigation extends React.Component<NavigationProps, {}> { }
diff --git a/lib/navigation/index.js b/lib/navigation/index.js
deleted file mode 100644
index 386b3ecee..000000000
--- a/lib/navigation/index.js
+++ /dev/null
@@ -1,26 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Navigation = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Navigation = require('./Navigation.js');
-
-var _button = require('../button');
-
-var _link = require('../link');
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var ThemedNavigation = (0, _reactCssThemr.themr)(_identifiers.NAVIGATION, _theme2.default)((0, _Navigation.navigationFactory)(_button.Button, _link.Link));
-exports.default = ThemedNavigation;
-exports.Navigation = ThemedNavigation;
\ No newline at end of file
diff --git a/lib/navigation/theme.scss b/lib/navigation/theme.scss
deleted file mode 100644
index 2d8375fd2..000000000
--- a/lib/navigation/theme.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.horizontal {
-  > [data-react-toolbox="button"], > [data-react-toolbox="link"] {
-    display: inline-block;
-    margin: 0 $navigation-space / 2;
-  }
-}
-
-.vertical {
-  > [data-react-toolbox="button"], > [data-react-toolbox="link"] {
-    display: block;
-    margin: $navigation-space / 2;
-  }
-}
-
-.vertical, .horizontal {
-  padding: $navigation-space / 2;
-
-  > [data-react-toolbox="link"] {
-    color: $navigation-color;
-  }
-}
diff --git a/lib/overlay/Overlay.js b/lib/overlay/Overlay.js
deleted file mode 100644
index 5f189bf77..000000000
--- a/lib/overlay/Overlay.js
+++ /dev/null
@@ -1,133 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Overlay = undefined;
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Portal = require('../hoc/Portal.js');
-
-var _Portal2 = _interopRequireDefault(_Portal);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var Overlay = function (_Component) {
-  _inherits(Overlay, _Component);
-
-  function Overlay() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    _classCallCheck(this, Overlay);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Overlay.__proto__ || Object.getPrototypeOf(Overlay)).call.apply(_ref, [this].concat(args))), _this), _this.handleEscKey = function (e) {
-      if (_this.props.active && _this.props.onEscKeyDown && e.which === 27) {
-        _this.props.onEscKeyDown(e);
-      }
-    }, _temp), _possibleConstructorReturn(_this, _ret);
-  }
-
-  _createClass(Overlay, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      if (this.props.active) {
-        document.body.addEventListener('keydown', this.handleEscKey);
-        document.body.style.overflow = 'hidden';
-      }
-    }
-  }, {
-    key: 'componentWillUpdate',
-    value: function componentWillUpdate(nextProps) {
-      if (nextProps.active && !this.props.active) document.body.style.overflow = 'hidden';
-      if (!nextProps.active && this.props.active && !document.querySelectorAll('[data-react-toolbox="overlay"]')[1]) document.body.style.overflow = '';
-    }
-  }, {
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate() {
-      if (this.props.active) {
-        document.body.addEventListener('keydown', this.handleEscKey);
-      }
-    }
-  }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      if (!document.querySelectorAll('[data-react-toolbox="overlay"]')[1]) document.body.style.overflow = '';
-      document.body.removeEventListener('keydown', this.handleEscKey);
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _classnames;
-
-      var _props = this.props,
-          active = _props.active,
-          className = _props.className,
-          children = _props.children,
-          invisible = _props.invisible,
-          onClick = _props.onClick,
-          theme = _props.theme;
-
-      var _className = (0, _classnames3.default)(theme.overlay, (_classnames = {}, _defineProperty(_classnames, theme.active, active), _defineProperty(_classnames, theme.invisible, invisible), _classnames), className);
-
-      return _react2.default.createElement(
-        _Portal2.default,
-        null,
-        _react2.default.createElement(
-          'div',
-          { className: _className, 'data-react-toolbox': 'overlay' },
-          _react2.default.createElement('div', { className: theme.backdrop, onClick: onClick }),
-          children
-        )
-      );
-    }
-  }]);
-
-  return Overlay;
-}(_react.Component);
-
-Overlay.propTypes = {
-  active: _react.PropTypes.bool,
-  children: _react.PropTypes.node,
-  className: _react.PropTypes.string,
-  invisible: _react.PropTypes.bool,
-  onClick: _react.PropTypes.func,
-  onEscKeyDown: _react.PropTypes.func,
-  theme: _react.PropTypes.shape({
-    active: _react.PropTypes.string,
-    backdrop: _react.PropTypes.string,
-    invisible: _react.PropTypes.string,
-    overlay: _react.PropTypes.string
-  })
-};
-Overlay.defaultProps = {
-  invisible: false
-};
-exports.default = (0, _reactCssThemr.themr)(_identifiers.OVERLAY)(Overlay);
-exports.Overlay = Overlay;
\ No newline at end of file
diff --git a/lib/overlay/_config.scss b/lib/overlay/_config.scss
deleted file mode 100644
index ccba4d3c7..000000000
--- a/lib/overlay/_config.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-$overlay-color: $color-black !default;
-$overlay-opacity: .6 !default;
diff --git a/lib/overlay/index.js b/lib/overlay/index.js
deleted file mode 100644
index 96c77eeee..000000000
--- a/lib/overlay/index.js
+++ /dev/null
@@ -1,22 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Overlay = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Overlay = require('./Overlay.js');
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var ThemedOverlay = (0, _reactCssThemr.themr)(_identifiers.OVERLAY, _theme2.default)(_Overlay.Overlay);
-exports.default = ThemedOverlay;
-exports.Overlay = ThemedOverlay;
\ No newline at end of file
diff --git a/lib/overlay/theme.scss b/lib/overlay/theme.scss
deleted file mode 100644
index e740884ea..000000000
--- a/lib/overlay/theme.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: $z-index-highest;
-  display: flex;
-  width: 100vw;
-  height: 100vh;
-  flex-direction: column;
-  align-content: center;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-  &.invisible > *:not(.backdrop) {
-    pointer-events: all;
-  }
-}
-
-.backdrop {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: $overlay-color;
-  opacity: 0;
-  transition-timing-function: $animation-curve-default;
-  transition-duration: $animation-duration;
-  transition-property: opacity;
-}
-
-.active {
-  pointer-events: all;
-  > .backdrop {
-    opacity: $overlay-opacity;
-  }
-}
diff --git a/lib/progress_bar/ProgressBar.js b/lib/progress_bar/ProgressBar.js
deleted file mode 100644
index 6e83348b7..000000000
--- a/lib/progress_bar/ProgressBar.js
+++ /dev/null
@@ -1,162 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ProgressBar = undefined;
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _prefixer = require('../utils/prefixer.js');
-
-var _prefixer2 = _interopRequireDefault(_prefixer);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var ProgressBar = function (_Component) {
-  _inherits(ProgressBar, _Component);
-
-  function ProgressBar() {
-    _classCallCheck(this, ProgressBar);
-
-    return _possibleConstructorReturn(this, (ProgressBar.__proto__ || Object.getPrototypeOf(ProgressBar)).apply(this, arguments));
-  }
-
-  _createClass(ProgressBar, [{
-    key: 'calculateRatio',
-    value: function calculateRatio(value) {
-      if (value < this.props.min) return 0;
-      if (value > this.props.max) return 1;
-      return (value - this.props.min) / (this.props.max - this.props.min);
-    }
-  }, {
-    key: 'circularStyle',
-    value: function circularStyle() {
-      if (this.props.mode !== 'indeterminate') {
-        return { strokeDasharray: 2 * Math.PI * 25 * this.calculateRatio(this.props.value) + ', 400' };
-      }
-    }
-  }, {
-    key: 'linearStyle',
-    value: function linearStyle() {
-      if (this.props.mode !== 'indeterminate') {
-        return {
-          buffer: (0, _prefixer2.default)({ transform: 'scaleX(' + this.calculateRatio(this.props.buffer) + ')' }),
-          value: (0, _prefixer2.default)({ transform: 'scaleX(' + this.calculateRatio(this.props.value) + ')' })
-        };
-      } else {
-        return {};
-      }
-    }
-  }, {
-    key: 'renderCircular',
-    value: function renderCircular() {
-      return _react2.default.createElement(
-        'svg',
-        { className: this.props.theme.circle, viewBox: '0 0 60 60' },
-        _react2.default.createElement('circle', { className: this.props.theme.path, style: this.circularStyle(), cx: '30', cy: '30', r: '25' })
-      );
-    }
-  }, {
-    key: 'renderLinear',
-    value: function renderLinear() {
-      var _linearStyle = this.linearStyle(),
-          buffer = _linearStyle.buffer,
-          value = _linearStyle.value;
-
-      return _react2.default.createElement(
-        'div',
-        null,
-        _react2.default.createElement('span', { ref: 'buffer', 'data-ref': 'buffer', className: this.props.theme.buffer, style: buffer }),
-        _react2.default.createElement('span', { ref: 'value', 'data-ref': 'value', className: this.props.theme.value, style: value })
-      );
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _classnames;
-
-      var _props = this.props,
-          className = _props.className,
-          disabled = _props.disabled,
-          max = _props.max,
-          min = _props.min,
-          mode = _props.mode,
-          multicolor = _props.multicolor,
-          type = _props.type,
-          theme = _props.theme,
-          value = _props.value;
-
-      var _className = (0, _classnames3.default)(theme[type], (_classnames = {}, _defineProperty(_classnames, theme[mode], mode), _defineProperty(_classnames, theme.multicolor, multicolor), _classnames), className);
-
-      return _react2.default.createElement(
-        'div',
-        {
-          disabled: disabled,
-          'data-react-toolbox': 'progress-bar',
-          'aria-valuenow': value,
-          'aria-valuemin': min,
-          'aria-valuemax': max,
-          className: _className
-        },
-        type === 'circular' ? this.renderCircular() : this.renderLinear()
-      );
-    }
-  }]);
-
-  return ProgressBar;
-}(_react.Component);
-
-ProgressBar.propTypes = {
-  buffer: _react.PropTypes.number,
-  className: _react.PropTypes.string,
-  disabled: _react.PropTypes.bool,
-  max: _react.PropTypes.number,
-  min: _react.PropTypes.number,
-  mode: _react.PropTypes.oneOf(['determinate', 'indeterminate']),
-  multicolor: _react.PropTypes.bool,
-  theme: _react.PropTypes.shape({
-    buffer: _react.PropTypes.string,
-    circle: _react.PropTypes.string,
-    circular: _react.PropTypes.string,
-    indeterminate: _react.PropTypes.string,
-    linear: _react.PropTypes.string,
-    multicolor: _react.PropTypes.string,
-    path: _react.PropTypes.string,
-    value: _react.PropTypes.string
-  }),
-  type: _react.PropTypes.oneOf(['linear', 'circular']),
-  value: _react.PropTypes.number
-};
-ProgressBar.defaultProps = {
-  buffer: 0,
-  className: '',
-  max: 100,
-  min: 0,
-  mode: 'indeterminate',
-  multicolor: false,
-  type: 'linear',
-  value: 0
-};
-exports.default = (0, _reactCssThemr.themr)(_identifiers.PROGRESS_BAR)(ProgressBar);
-exports.ProgressBar = ProgressBar;
\ No newline at end of file
diff --git a/lib/progress_bar/__test__/index.spec.js b/lib/progress_bar/__test__/index.spec.js
deleted file mode 100644
index ec2d796d7..000000000
--- a/lib/progress_bar/__test__/index.spec.js
+++ /dev/null
@@ -1,92 +0,0 @@
-'use strict';
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _expect = require('expect');
-
-var _expect2 = _interopRequireDefault(_expect);
-
-var _reactAddonsTestUtils = require('react-addons-test-utils');
-
-var _reactAddonsTestUtils2 = _interopRequireDefault(_reactAddonsTestUtils);
-
-var _ProgressBar = require('../ProgressBar');
-
-var _ProgressBar2 = _interopRequireDefault(_ProgressBar);
-
-var _theme = require('../theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-var _testing = require('../../utils/testing');
-
-var _testing2 = _interopRequireDefault(_testing);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-describe('ProgressBar', function () {
-  var progressBar = void 0;
-
-  describe('#calculateRatio', function () {
-    before(function () {
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_ProgressBar2.default, { min: 100, max: 300, theme: _theme2.default }));
-      progressBar = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _ProgressBar.ProgressBar);
-    });
-
-    it('calculates the right ratio', function () {
-      (0, _expect2.default)(progressBar.calculateRatio(150)).toEqual(0.25);
-    });
-
-    it('gets 0 when value is less than min', function () {
-      (0, _expect2.default)(progressBar.calculateRatio(10)).toEqual(0);
-    });
-
-    it('gets 1 when value is more than max', function () {
-      (0, _expect2.default)(progressBar.calculateRatio(400)).toEqual(1);
-    });
-  });
-
-  describe('#render', function () {
-    var buffer = void 0,
-        value = void 0,
-        wrapper = void 0,
-        circle = void 0,
-        strokeLength = void 0;
-
-    it('renders the value and buffer bars when it is linear', function () {
-      wrapper = _testing2.default.shallowRenderComponent(_ProgressBar.ProgressBar, { theme: _theme2.default }).props.children;
-      (0, _expect2.default)(wrapper.props.children.length).toEqual(2);
-      (0, _expect2.default)(wrapper.props.children[0].ref).toEqual('buffer');
-      (0, _expect2.default)(wrapper.props.children[1].ref).toEqual('value');
-    });
-
-    it('renders the value and buffer bars when it is linear', function () {
-      progressBar = _testing2.default.shallowRenderComponent(_ProgressBar.ProgressBar, { mode: 'determinate', value: 30, buffer: 60, theme: _theme2.default });
-      buffer = progressBar.props.children.props.children[0];
-      value = progressBar.props.children.props.children[1];
-      (0, _expect2.default)(buffer.props.style.transform).toEqual('scaleX(' + 0.6 + ')');
-      (0, _expect2.default)(value.props.style.transform).toEqual('scaleX(' + 0.3 + ')');
-    });
-
-    it('renders the svg circle when it is circular', function () {
-      progressBar = _testing2.default.shallowRenderComponent(_ProgressBar.ProgressBar, { type: 'circular', theme: _theme2.default });
-      (0, _expect2.default)(progressBar.props.children.type).toEqual('svg');
-      (0, _expect2.default)(progressBar.props.children.props.children.type).toEqual('circle');
-    });
-
-    it('renders the proper circle length style when it is circular and determinate', function () {
-      progressBar = _testing2.default.shallowRenderComponent(_ProgressBar.ProgressBar, { type: 'circular', mode: 'determinate', value: 30, theme: _theme2.default });
-      circle = progressBar.props.children.props.children;
-      strokeLength = 2 * Math.PI * circle.props.r * 0.3;
-      (0, _expect2.default)(circle.props.style.strokeDasharray).toEqual(strokeLength + ', 400');
-    });
-
-    it('contains mode and className in its className', function () {
-      progressBar = _testing2.default.shallowRenderComponent(_ProgressBar.ProgressBar, { mode: 'determinate', className: 'tight', theme: _theme2.default });
-      (0, _expect2.default)(progressBar.props.className).toContain(_theme2.default.determinate);
-      (0, _expect2.default)(progressBar.props.className).toContain(_theme2.default.tight);
-    });
-  });
-});
\ No newline at end of file
diff --git a/lib/progress_bar/_config.scss b/lib/progress_bar/_config.scss
deleted file mode 100644
index 143a80963..000000000
--- a/lib/progress_bar/_config.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-$progress-height: .4 * $unit !default;
-$progress-main-color: $color-primary !default;
-$progress-secondary-color: rgba($color-primary-contrast, 0.7) !default;
-$progress-disabled-color: rgba($color-black, 0.26) !default;
-$circle-wrapper-width: 60 !default;
-$circle-radius: 25 !default;
-$scale-ratio: $circle-radius / 20 !default;
diff --git a/lib/progress_bar/index.d.ts b/lib/progress_bar/index.d.ts
deleted file mode 100644
index 8b0b961e1..000000000
--- a/lib/progress_bar/index.d.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface ProgressBarTheme {
-  /**
-   * Used to style the buffer element in the linear progress.
-   */
-  buffer?: string;
-  /**
-   * Used for the circle element in the circular progress.
-   */
-  circle?: string;
-  /**
-   * Used for the root element when the type is circular.
-   */
-  circular?: string;
-  /**
-   * Added to the root element if mode is indeterminate.
-   */
-  indeterminate?: string;
-  /**
-   * Used for the root element when the type is linear.
-   */
-  linear?: string;
-  /**
-   * Added to the root if the component is multicolor (circular).
-   */
-  multicolor?: string;
-  /**
-   * Used for the inner path in the circular progress.
-   */
-  path?: string;
-  /**
-   * Used to style the value element in the linear progress.
-   */
-  value?: string;
-}
-
-interface ProgressBarProps extends ReactToolbox.Props {
-  /**
-   * Value of a secondary progress bar useful for buffering.
-   * @default 0
-   */
-  buffer?: number;
-  /**
-   * If true, component will be disabled.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * Maximum value permitted.
-   * @default 100
-   */
-  max?: number;
-  /**
-   * Minimum value permitted.
-   * @default 0
-   */
-  min?: number;
-  /**
-   * Mode of the progress bar, it can be determinate or indeterminate.
-   * @default indeterminate
-   */
-  mode?: "determinate" | "indeterminate";
-  /**
-   * If true, the circular progress bar will be changing its color.
-   * @default false
-   */
-  multicolor?: boolean;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: ProgressBarTheme;
-  /**
-   * Type of the progress bar, it can be circular or linear.
-   * @default linear
-   */
-  type?: "linear" | "circular";
-  /**
-   * Value of the current progress.
-   * @default 0
-   */
-  value?: number;
-}
-
-export class ProgressBar extends React.Component<ProgressBarProps, {}> { }
-
-export default ProgressBar;
diff --git a/lib/progress_bar/index.js b/lib/progress_bar/index.js
deleted file mode 100644
index a61b09a24..000000000
--- a/lib/progress_bar/index.js
+++ /dev/null
@@ -1,23 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ProgressBar = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _ProgressBar = require('./ProgressBar.js');
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var ThemedProgressBar = (0, _reactCssThemr.themr)(_identifiers.PROGRESS_BAR, _theme2.default)(_ProgressBar.ProgressBar);
-
-exports.default = ThemedProgressBar;
-exports.ProgressBar = ThemedProgressBar;
\ No newline at end of file
diff --git a/lib/progress_bar/theme.scss b/lib/progress_bar/theme.scss
deleted file mode 100644
index 6f5cc2c1c..000000000
--- a/lib/progress_bar/theme.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.linear {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  height: $progress-height;
-  overflow: hidden;
-  background: $color-divider;
-  &.indeterminate .value {
-    transform-origin: center center;
-    animation: linear-indeterminate-bar 1s linear infinite;
-  }
-}
-
-.value, .buffer {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  transition-timing-function: $animation-curve-default;
-  transition-duration: $animation-duration;
-  transform: scaleX(0);
-  transform-origin: left center;
-}
-
-.value {
-  background-color: $progress-main-color;
-}
-
-[disabled] .value {
-  background-color: $progress-disabled-color;
-}
-
-.buffer {
-  background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
-  linear-gradient(to right, $progress-main-color, $progress-main-color);
-}
-
-[disabled] .buffer {
-  background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
-  linear-gradient(to right, $progress-disabled-color, $progress-disabled-color);
-}
-
-.circular {
-  position: relative;
-  display: inline-block;
-  width: $circle-wrapper-width * 1px;
-  height: $circle-wrapper-width * 1px;
-  transform: rotate(-90deg);
-  &.indeterminate {
-    .circle {
-      animation: circular-indeterminate-bar-rotate 2s linear infinite;
-    }
-    .path {
-      animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite;
-
-      stroke-dasharray: $scale-ratio * 1, $scale-ratio * 200;
-      stroke-dashoffset: 0;
-    }
-    &.multicolor .path {
-      animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite,
-      colors (1.5s * 4) ease-in-out infinite;
-    }
-  }
-}
-
-.circle {
-  width: 100%;
-  height: 100%;
-}
-
-.path {
-  transition: stroke-dasharray $animation-duration $animation-curve-default;
-  fill: none;
-
-  stroke-dasharray: 0, $scale-ratio * 200;
-  stroke-dashoffset: 0;
-  stroke-linecap: round;
-  stroke-miterlimit: 20;
-  stroke-width: 4;
-  stroke: $progress-main-color;
-}
-
-@keyframes linear-indeterminate-bar {
-  0% {
-    transform: translate(-50%) scaleX(0);
-  }
-
-  50% {
-    transform: translate(-0%) scaleX(.3);
-  }
-
-  100% {
-    transform: translate(50%) scaleX(0);
-  }
-}
-
-@keyframes circular-indeterminate-bar-rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes circular-indeterminate-bar-dash {
-  0% {
-    stroke-dasharray: $scale-ratio * 1, $scale-ratio * 200;
-    stroke-dashoffset: $scale-ratio * 0;
-  }
-
-  50% {
-    stroke-dasharray: $scale-ratio * 89, $scale-ratio * 200;
-    stroke-dashoffset: $scale-ratio * -35;
-  }
-
-  100% {
-    stroke-dasharray: $scale-ratio * 89, $scale-ratio * 200;
-    stroke-dashoffset: $scale-ratio * -124;
-  }
-}
-
-@keyframes colors {
-  0% {
-    stroke: #4285f4;
-  }
-
-  25% {
-    stroke: #de3e35;
-  }
-
-  50% {
-    stroke: #f7c223;
-  }
-
-  75% {
-    stroke: #1b9a59;
-  }
-
-  100% {
-    stroke: #4285f4;
-  }
-}
diff --git a/lib/radio/Radio.js b/lib/radio/Radio.js
deleted file mode 100644
index a3301d1c7..000000000
--- a/lib/radio/Radio.js
+++ /dev/null
@@ -1,45 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-var factory = function factory(ripple) {
-  var Radio = function Radio(_ref) {
-    var checked = _ref.checked,
-        onMouseDown = _ref.onMouseDown,
-        theme = _ref.theme,
-        other = _objectWithoutProperties(_ref, ['checked', 'onMouseDown', 'theme']);
-
-    return _react2.default.createElement('div', _extends({
-      'data-react-toolbox': 'radio',
-      className: theme[checked ? 'radioChecked' : 'radio'],
-      onMouseDown: onMouseDown
-    }, other));
-  };
-
-  Radio.propTypes = {
-    checked: _react.PropTypes.bool,
-    children: _react.PropTypes.any,
-    onMouseDown: _react.PropTypes.func,
-    theme: _react.PropTypes.shape({
-      radio: _react.PropTypes.string,
-      radioChecked: _react.PropTypes.string,
-      ripple: _react.PropTypes.string
-    })
-  };
-
-  return ripple(Radio);
-};
-
-exports.default = factory;
\ No newline at end of file
diff --git a/lib/radio/RadioButton.js b/lib/radio/RadioButton.js
deleted file mode 100644
index cc0f32bc9..000000000
--- a/lib/radio/RadioButton.js
+++ /dev/null
@@ -1,152 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.RadioButton = exports.radioButtonFactory = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Ripple = require('../ripple/Ripple.js');
-
-var _Ripple2 = _interopRequireDefault(_Ripple);
-
-var _Radio = require('./Radio.js');
-
-var _Radio2 = _interopRequireDefault(_Radio);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(Radio) {
-  var RadioButton = function (_Component) {
-    _inherits(RadioButton, _Component);
-
-    function RadioButton() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, RadioButton);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RadioButton.__proto__ || Object.getPrototypeOf(RadioButton)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
-        var _this$props = _this.props,
-            checked = _this$props.checked,
-            disabled = _this$props.disabled,
-            onChange = _this$props.onChange;
-
-        if (event.pageX !== 0 && event.pageY !== 0) _this.blur();
-        if (!disabled && !checked && onChange) onChange(event, _this);
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(RadioButton, [{
-      key: 'blur',
-      value: function blur() {
-        this.inputNode && this.inputNode.blur();
-      }
-    }, {
-      key: 'focus',
-      value: function focus() {
-        this.inputNode && this.inputNode.focus();
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var _this2 = this;
-
-        var _props = this.props,
-            className = _props.className,
-            checked = _props.checked,
-            disabled = _props.disabled,
-            label = _props.label,
-            theme = _props.theme,
-            onChange = _props.onChange,
-            others = _objectWithoutProperties(_props, ['className', 'checked', 'disabled', 'label', 'theme', 'onChange']); // eslint-disable-line
-
-
-        var _className = (0, _classnames2.default)(theme[this.props.disabled ? 'disabled' : 'field'], className);
-        return _react2.default.createElement(
-          'label',
-          { 'data-react-toolbox': 'radio-button', className: _className },
-          _react2.default.createElement('input', _extends({}, others, {
-            checked: checked,
-            className: theme.input,
-            disabled: disabled,
-            onClick: this.handleClick,
-            onChange: function onChange() {},
-            ref: function ref(node) {
-              _this2.inputNode = node;
-            },
-            type: 'radio'
-          })),
-          _react2.default.createElement(Radio, { checked: checked, disabled: disabled, theme: theme }),
-          label ? _react2.default.createElement(
-            'span',
-            { className: theme.text },
-            label
-          ) : null
-        );
-      }
-    }]);
-
-    return RadioButton;
-  }(_react.Component);
-
-  RadioButton.propTypes = {
-    checked: _react.PropTypes.bool,
-    className: _react.PropTypes.string,
-    disabled: _react.PropTypes.bool,
-    label: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.node]),
-    name: _react.PropTypes.string,
-    onBlur: _react.PropTypes.func,
-    onChange: _react.PropTypes.func,
-    onFocus: _react.PropTypes.func,
-    theme: _react.PropTypes.shape({
-      disabled: _react.PropTypes.string,
-      field: _react.PropTypes.string,
-      input: _react.PropTypes.string,
-      text: _react.PropTypes.string
-    }),
-    value: _react.PropTypes.any
-  };
-  RadioButton.defaultProps = {
-    checked: false,
-    className: '',
-    disabled: false
-  };
-
-
-  return RadioButton;
-};
-
-var Radio = (0, _Radio2.default)((0, _Ripple2.default)({ centered: true, spread: 2.6 }));
-var RadioButton = factory(Radio);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.RADIO)(RadioButton);
-exports.radioButtonFactory = factory;
-exports.RadioButton = RadioButton;
\ No newline at end of file
diff --git a/lib/radio/RadioGroup.js b/lib/radio/RadioGroup.js
deleted file mode 100644
index 15c87f023..000000000
--- a/lib/radio/RadioGroup.js
+++ /dev/null
@@ -1,99 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.RadioGroup = exports.radioGroupFactory = undefined;
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _RadioButton = require('./RadioButton.js');
-
-var _RadioButton2 = _interopRequireDefault(_RadioButton);
-
-var _react3 = require('../utils/react.js');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(RadioButton) {
-  var RadioGroup = function (_Component) {
-    _inherits(RadioGroup, _Component);
-
-    function RadioGroup() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, RadioGroup);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RadioGroup.__proto__ || Object.getPrototypeOf(RadioGroup)).call.apply(_ref, [this].concat(args))), _this), _this.handleChange = function (value) {
-        if (_this.props.onChange) _this.props.onChange(value);
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(RadioGroup, [{
-      key: 'renderRadioButtons',
-      value: function renderRadioButtons() {
-        var _this2 = this;
-
-        return _react2.default.Children.map(this.props.children, function (child) {
-          return !(0, _react3.isComponentOfType)(RadioButton, child) ? child : _react2.default.cloneElement(child, {
-            checked: child.props.value === _this2.props.value,
-            disabled: _this2.props.disabled || child.props.disabled,
-            onChange: _this2.handleChange.bind(_this2, child.props.value)
-          });
-        });
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        return _react2.default.createElement(
-          'div',
-          { 'data-react-toolbox': 'radio-group', className: this.props.className },
-          this.renderRadioButtons()
-        );
-      }
-    }]);
-
-    return RadioGroup;
-  }(_react.Component);
-
-  RadioGroup.propTypes = {
-    children: _react.PropTypes.node,
-    className: _react.PropTypes.string,
-    disabled: _react.PropTypes.bool,
-    name: _react.PropTypes.string,
-    onChange: _react.PropTypes.func,
-    value: _react.PropTypes.any
-  };
-  RadioGroup.defaultProps = {
-    className: '',
-    disabled: false
-  };
-
-
-  return RadioGroup;
-};
-
-var RadioGroup = factory(_RadioButton2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.RADIO)(RadioGroup);
-exports.radioGroupFactory = factory;
-exports.RadioGroup = RadioGroup;
\ No newline at end of file
diff --git a/lib/radio/_config.scss b/lib/radio/_config.scss
deleted file mode 100644
index 0c335c7cc..000000000
--- a/lib/radio/_config.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-$radio-field-margin-bottom: 1.5 * $unit !default;
-$radio-button-size: 2 * $unit !default;
-$radio-inner-margin: $radio-button-size / 4 !default;
-$radio-inner-color: $color-primary !default;
-$radio-focus-color: rgba($color-black, 0.1) !default;
-$radio-checked-focus-color: rgba($color-primary, 0.26) !default;
-$radio-text-color: $color-black !default;
-$radio-disabled-color: rgba($color-black, 0.26) !default;
-$radio-text-font-size: 1.4 * $unit !default;
diff --git a/lib/radio/index.d.ts b/lib/radio/index.d.ts
deleted file mode 100644
index 8cc2695de..000000000
--- a/lib/radio/index.d.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-interface RadioGroupProps extends ReactToolbox.Props {
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * If true, the group will be displayed as disabled.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * Name for the input element group.
-   */
-  name?: string;
-  /**
-   * Callback function that will be invoked when the value changes.
-   */
-  onChange?: Function;
-  /**
-   * Default value selected in the radio group.
-   */
-  value?: any;
-}
-
-export class RadioGroup extends React.Component<RadioGroupProps, {}> { }
-
-export interface RadioButtonTheme {
-  /**
-   * Used to for the radio element.
-   */
-  radio?: string;
-  /**
-   * Used for the radio element when it's checked.
-   */
-  radioChecked?: string;
-  /**
-   * To provide styles for the ripple.
-   */
-  ripple?: string;
-  /**
-   * Added to the root of the Radio in case it's disabled.
-   */
-  disabled?: string;
-  /**
-   * Used as the root class of the component.
-   */
-  field?: string;
-  /**
-   * Used for the input element.
-   */
-  input?: string;
-  /**
-   * Used to style the text label element.
-   */
-  text?: string;
-}
-
-interface RadioButtonProps extends ReactToolbox.Props {
-  /**
-   * If true, the input element will be selected by default. Transferred from the parent.
-   * @default false
-   */
-  checked?: boolean;
-  /**
-   * If true, the item will be displayed as disabled.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * Label for the radio button.
-   */
-  label?: React.ReactNode | string;
-  /**
-   * Name for the input element.
-   */
-  name?: string;
-  /**
-   * Callback function that will be invoked when the input is blurred.
-   */
-  onBlur?: Function;
-  /**
-   * Callback function that will be invoked when the value changes.
-   */
-  onChange?: Function;
-  /**
-   * Callback function that will be invoked when the input is focused.
-   */
-  onFocus?: Function;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: RadioButtonTheme;
-  /**
-   * Value for the radio button.
-   */
-  value?: any;
-}
-
-export class RadioButton extends React.Component<RadioButtonProps, {}> { }
diff --git a/lib/radio/index.js b/lib/radio/index.js
deleted file mode 100644
index b8cfd8400..000000000
--- a/lib/radio/index.js
+++ /dev/null
@@ -1,36 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.RadioGroup = exports.RadioButton = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _ripple = require('../ripple');
-
-var _ripple2 = _interopRequireDefault(_ripple);
-
-var _Radio = require('./Radio.js');
-
-var _Radio2 = _interopRequireDefault(_Radio);
-
-var _RadioButton = require('./RadioButton.js');
-
-var _RadioGroup = require('./RadioGroup.js');
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var ThemedRadio = (0, _Radio2.default)((0, _ripple2.default)({ centered: true, spread: 2.6 }));
-var ThemedRadioButton = (0, _reactCssThemr.themr)(_identifiers.RADIO, _theme2.default)((0, _RadioButton.radioButtonFactory)(ThemedRadio));
-var ThemedRadioGroup = (0, _reactCssThemr.themr)(_identifiers.RADIO, _theme2.default)((0, _RadioGroup.radioGroupFactory)(ThemedRadioButton));
-
-exports.default = ThemedRadioButton;
-exports.RadioButton = ThemedRadioButton;
-exports.RadioGroup = ThemedRadioGroup;
\ No newline at end of file
diff --git a/lib/radio/theme.scss b/lib/radio/theme.scss
deleted file mode 100644
index 93eac42ef..000000000
--- a/lib/radio/theme.scss
+++ /dev/null
@@ -1,95 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.radio {
-  position: relative;
-  display: inline-block;
-  width: $radio-button-size;
-  height: $radio-button-size;
-  vertical-align: top;
-  cursor: pointer;
-  border: .2 * $unit solid $radio-text-color;
-  border-radius: 50%;
-  &:before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    content: "";
-    background-color: $radio-inner-color;
-    border-radius: 50%;
-    transition: transform $animation-duration $animation-curve-default;
-    transform: scale(0);
-  }
-
-  .ripple {
-    background-color: $radio-inner-color;
-    opacity: .3;
-    transition-duration: 650ms;
-  }
-}
-
-.radioChecked {
-  @extend .radio;
-  border: .2 * $unit solid $radio-inner-color;
-  &:before {
-    transform: scale(0.65);
-  }
-}
-
-.field {
-  position: relative;
-  display: block;
-  height: $radio-button-size;
-  margin-bottom: $radio-field-margin-bottom;
-  white-space: nowrap;
-  vertical-align: middle;
-}
-
-.text {
-  display: inline-block;
-  padding-left: $unit;
-  font-size: $radio-text-font-size;
-  line-height: $radio-button-size;
-  color: $radio-text-color;
-  white-space: nowrap;
-  vertical-align: top;
-}
-
-.input {
-  position: absolute;
-  width: 0;
-  height: 0;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  opacity: 0;
-  appearance: none;
-  &:focus ~ .radio {
-    box-shadow: 0 0 0 $unit $radio-focus-color;
-  }
-  &:focus ~ .radioChecked {
-    box-shadow: 0 0 0 $unit $radio-checked-focus-color;
-  }
-}
-
-.disabled {
-  @extend .field;
-  .text {
-    color: $radio-disabled-color;
-  }
-  .radio {
-    cursor: auto;
-    border-color: $radio-disabled-color;
-  }
-  .radioChecked {
-    cursor: auto;
-    border-color: $radio-disabled-color;
-    &:before {
-      background-color: $radio-disabled-color;
-    }
-  }
-}
diff --git a/lib/ripple/Ripple.js b/lib/ripple/Ripple.js
deleted file mode 100644
index b865cad0b..000000000
--- a/lib/ripple/Ripple.js
+++ /dev/null
@@ -1,387 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactDom = require('react-dom');
-
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _immutabilityHelper = require('immutability-helper');
-
-var _immutabilityHelper2 = _interopRequireDefault(_immutabilityHelper);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _events = require('../utils/events');
-
-var _events2 = _interopRequireDefault(_events);
-
-var _prefixer = require('../utils/prefixer');
-
-var _prefixer2 = _interopRequireDefault(_prefixer);
-
-var _utils = require('../utils/utils');
-
-var _utils2 = _interopRequireDefault(_utils);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-var defaults = {
-  centered: false,
-  className: '',
-  multiple: true,
-  spread: 2,
-  theme: {}
-};
-
-var rippleFactory = function rippleFactory() {
-  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
-  var _defaults$options = _extends({}, defaults, options),
-      defaultCentered = _defaults$options.centered,
-      defaultClassName = _defaults$options.className,
-      defaultMultiple = _defaults$options.multiple,
-      defaultSpread = _defaults$options.spread,
-      defaultTheme = _defaults$options.theme,
-      props = _objectWithoutProperties(_defaults$options, ['centered', 'className', 'multiple', 'spread', 'theme']);
-
-  return function (ComposedComponent) {
-    var RippledComponent = function (_Component) {
-      _inherits(RippledComponent, _Component);
-
-      function RippledComponent() {
-        var _ref;
-
-        var _temp, _this, _ret;
-
-        _classCallCheck(this, RippledComponent);
-
-        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
-
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RippledComponent.__proto__ || Object.getPrototypeOf(RippledComponent)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-          ripples: {}
-        }, _this.handleMouseDown = function (event) {
-          if (_this.props.onMouseDown) _this.props.onMouseDown(event);
-          if (!_this.props.disabled) {
-            var _events$getMousePosit = _events2.default.getMousePosition(event),
-                x = _events$getMousePosit.x,
-                y = _events$getMousePosit.y;
-
-            _this.animateRipple(x, y, false);
-          }
-        }, _this.handleTouchStart = function (event) {
-          if (_this.props.onTouchStart) _this.props.onTouchStart(event);
-          if (!_this.props.disabled) {
-            var _events$getTouchPosit = _events2.default.getTouchPosition(event),
-                x = _events$getTouchPosit.x,
-                y = _events$getTouchPosit.y;
-
-            _this.animateRipple(x, y, true);
-          }
-        }, _temp), _possibleConstructorReturn(_this, _ret);
-      }
-
-      _createClass(RippledComponent, [{
-        key: 'componentDidUpdate',
-        value: function componentDidUpdate(prevProps, prevState) {
-          // If a new ripple was just added, add a remove event listener to its animation
-          if (Object.keys(prevState.ripples).length < Object.keys(this.state.ripples).length) {
-            this.addRippleRemoveEventListener(this.getLastKey());
-          }
-        }
-      }, {
-        key: 'componentWillUnmount',
-        value: function componentWillUnmount() {
-          var _this2 = this;
-
-          // Remove document event listeners for ripple if they still exists
-          Object.keys(this.state.ripples).forEach(function (key) {
-            _this2.state.ripples[key].endRipple();
-          });
-        }
-
-        /**
-         * Add an event listener to the reference with given key so when the animation transition
-         * ends we can be sure that it finished and it can be safely removed from the state.
-         * This function is called whenever a new ripple is added to the component.
-         *
-         * @param {String} rippleKey Is the key of the ripple to add the event.
-         */
-
-      }, {
-        key: 'addRippleRemoveEventListener',
-        value: function addRippleRemoveEventListener(rippleKey) {
-          var self = this;
-          _events2.default.addEventListenerOnTransitionEnded(this.refs[rippleKey], function onOpacityEnd(e) {
-            if (e.propertyName === 'opacity') {
-              if (self.props.onRippleEnded) self.props.onRippleEnded(e);
-              _events2.default.removeEventListenerOnTransitionEnded(self.refs[rippleKey], onOpacityEnd);
-              self.setState({ ripples: _utils2.default.removeObjectKey(rippleKey, self.state.ripples) });
-            }
-          });
-        }
-
-        /**
-         * Start a ripple animation on an specific point with touch or mouse events. First
-         * decides if the animation should trigger. If the ripple is multiple or there is no
-         * ripple present, it creates a new key. If it's a simple ripple and already exists,
-         * it just restarts the current ripple. The animation happens in two state changes
-         * to allow triggering via css.
-         *
-         * @param {Number} x Coordinate X on the screen where animation should start
-         * @param {Number} y Coordinate Y on the screen where animation should start
-         * @param {Boolean} isTouch Use events from touch or mouse.
-         */
-
-      }, {
-        key: 'animateRipple',
-        value: function animateRipple(x, y, isTouch) {
-          var _this3 = this;
-
-          if (this.rippleShouldTrigger(isTouch)) {
-            (function () {
-              var _getDescriptor = _this3.getDescriptor(x, y),
-                  top = _getDescriptor.top,
-                  left = _getDescriptor.left,
-                  width = _getDescriptor.width;
-
-              var noRipplesActive = Object.keys(_this3.state.ripples).length === 0;
-              var key = _this3.props.rippleMultiple || noRipplesActive ? _this3.getNextKey() : _this3.getLastKey();
-              var endRipple = _this3.addRippleDeactivateEventListener(isTouch, key);
-              var initialState = { active: false, restarting: true, top: top, left: left, width: width, endRipple: endRipple };
-              var runningState = { active: true, restarting: false };
-              _this3.setState((0, _immutabilityHelper2.default)(_this3.state, { ripples: _defineProperty({}, key, { $set: initialState }) }), function () {
-                _this3.refs[key].offsetWidth; //eslint-disable-line no-unused-expressions
-                _this3.setState((0, _immutabilityHelper2.default)(_this3.state, { ripples: _defineProperty({}, key, { $merge: runningState }) }));
-              });
-            })();
-          }
-        }
-
-        /**
-         * Determine if a ripple should start depending if its a touch event. For mobile both
-         * touchStart and mouseDown are launched so in case is touch we should always trigger
-         * but if its not we should check if a touch was already triggered to decide.
-         *
-         * @param {Boolean} isTouch True in case a touch event triggered the ripple false otherwise.
-         * @return {Boolean} True in case the ripple should trigger or false if it shouldn't.
-         */
-
-      }, {
-        key: 'rippleShouldTrigger',
-        value: function rippleShouldTrigger(isTouch) {
-          var shouldStart = isTouch ? true : !this.touchCache;
-          this.touchCache = isTouch;
-          return shouldStart;
-        }
-
-        /**
-         * Find out a descriptor object for the ripple element being created depending on
-         * the position where the it was triggered and the component's dimensions.
-         *
-         * @param {Number} x Coordinate x in the viewport where ripple was triggered
-         * @param {Number} y Coordinate y in the viewport where ripple was triggered
-         * @return {Object} Descriptor element including position and size of the element
-         */
-
-      }, {
-        key: 'getDescriptor',
-        value: function getDescriptor(x, y) {
-          var _ReactDOM$findDOMNode = _reactDom2.default.findDOMNode(this).getBoundingClientRect(),
-              left = _ReactDOM$findDOMNode.left,
-              top = _ReactDOM$findDOMNode.top,
-              height = _ReactDOM$findDOMNode.height,
-              width = _ReactDOM$findDOMNode.width;
-
-          var _props = this.props,
-              centered = _props.rippleCentered,
-              spread = _props.rippleSpread;
-
-          return {
-            left: centered ? 0 : x - left - width / 2,
-            top: centered ? 0 : y - top - height / 2,
-            width: width * spread
-          };
-        }
-
-        /**
-         * Increments and internal counter and returns the next value as a string. It
-         * is used to assign key references to new ripple elements.
-         *
-         * @return {String} Key to be assigned to a ripple.
-         */
-
-      }, {
-        key: 'getNextKey',
-        value: function getNextKey() {
-          this.currentCount = this.currentCount ? this.currentCount + 1 : 1;
-          return 'ripple' + this.currentCount;
-        }
-
-        /**
-         * Return the last generated key for a ripple element. When there is only one ripple
-         * and to get the reference when a ripple was just created.
-         *
-         * @return {String} The last generated ripple key.
-         */
-
-      }, {
-        key: 'getLastKey',
-        value: function getLastKey() {
-          return 'ripple' + this.currentCount;
-        }
-
-        /**
-         * Add an event listener to the document needed to deactivate a ripple and make it dissappear.
-         * Deactivation can happen with a touchend or mouseup depending on the trigger type. The
-         * ending function is created from a factory function and returned.
-         *
-         * @param {Boolean} isTouch True in case the trigger was a touch event false otherwise.
-         * @param {String} rippleKey It's a key to identify the ripple that should be deactivated.
-         * @return {Function} Callback function that deactivates the ripple and removes the event listener
-         */
-
-      }, {
-        key: 'addRippleDeactivateEventListener',
-        value: function addRippleDeactivateEventListener(isTouch, rippleKey) {
-          var eventType = isTouch ? 'touchend' : 'mouseup';
-          var endRipple = this.createRippleDeactivateCallback(eventType, rippleKey);
-          document.addEventListener(eventType, endRipple);
-          return endRipple;
-        }
-
-        /**
-         * Generates a function that can be called to deactivate a given ripple and remove its finishing
-         * event listener. If is generated because we need to store it to be called on unmount in case
-         * the ripple is still running.
-         *
-         * @param {String} eventType Is the event type that can be touchend or mouseup
-         * @param {String} rippleKey Is the key representing the ripple
-         * @return {Function} Callback function that deactivates the ripple and removes the listener
-         */
-
-      }, {
-        key: 'createRippleDeactivateCallback',
-        value: function createRippleDeactivateCallback(eventType, rippleKey) {
-          var self = this;
-          return function endRipple() {
-            document.removeEventListener(eventType, endRipple);
-            self.setState({ ripples: (0, _immutabilityHelper2.default)(self.state.ripples, _defineProperty({}, rippleKey, { $merge: { active: false } })) });
-          };
-        }
-      }, {
-        key: 'renderRipple',
-        value: function renderRipple(key, className, _ref2) {
-          var _classnames;
-
-          var active = _ref2.active,
-              left = _ref2.left,
-              restarting = _ref2.restarting,
-              top = _ref2.top,
-              width = _ref2.width;
-
-          var scale = restarting ? 0 : 1;
-          var transform = 'translate3d(' + (-width / 2 + left) + 'px, ' + (-width / 2 + top) + 'px, 0) scale(' + scale + ')';
-          var _className = (0, _classnames3.default)(this.props.theme.ripple, (_classnames = {}, _defineProperty(_classnames, this.props.theme.rippleActive, active), _defineProperty(_classnames, this.props.theme.rippleRestarting, restarting), _classnames), className);
-          return _react2.default.createElement(
-            'span',
-            _extends({ key: key, 'data-react-toolbox': 'ripple', className: this.props.theme.rippleWrapper }, props),
-            _react2.default.createElement('span', {
-              role: 'ripple',
-              ref: key,
-              className: _className,
-              style: (0, _prefixer2.default)({ transform: transform }, { width: width, height: width })
-            })
-          );
-        }
-      }, {
-        key: 'render',
-        value: function render() {
-          var _this4 = this;
-
-          var ripples = this.state.ripples;
-
-          var _props2 = this.props,
-              onRippleEnded = _props2.onRippleEnded,
-              rippleCentered = _props2.rippleCentered,
-              rippleMultiple = _props2.rippleMultiple,
-              rippleSpread = _props2.rippleSpread,
-              children = _props2.children,
-              ripple = _props2.ripple,
-              rippleClassName = _props2.rippleClassName,
-              other = _objectWithoutProperties(_props2, ['onRippleEnded', 'rippleCentered', 'rippleMultiple', 'rippleSpread', 'children', 'ripple', 'rippleClassName']);
-
-          if (!ripple) return _react2.default.createElement(ComposedComponent, _extends({ children: children }, other));
-          return _react2.default.createElement(
-            ComposedComponent,
-            _extends({}, other, { onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart }),
-            children,
-            Object.keys(ripples).map(function (key) {
-              return _this4.renderRipple(key, rippleClassName, ripples[key]);
-            })
-          );
-        }
-      }]);
-
-      return RippledComponent;
-    }(_react.Component);
-
-    RippledComponent.propTypes = {
-      children: _react.PropTypes.any,
-      disabled: _react.PropTypes.bool,
-      onRippleEnded: _react.PropTypes.func,
-      ripple: _react.PropTypes.bool,
-      rippleCentered: _react.PropTypes.bool,
-      rippleClassName: _react.PropTypes.string,
-      rippleMultiple: _react.PropTypes.bool,
-      rippleSpread: _react.PropTypes.number,
-      theme: _react.PropTypes.shape({
-        ripple: _react.PropTypes.string,
-        rippleActive: _react.PropTypes.string,
-        rippleRestarting: _react.PropTypes.string,
-        rippleWrapper: _react.PropTypes.string
-      })
-    };
-    RippledComponent.defaultProps = {
-      disabled: false,
-      ripple: true,
-      rippleCentered: defaultCentered,
-      rippleClassName: defaultClassName,
-      rippleMultiple: defaultMultiple,
-      rippleSpread: defaultSpread
-    };
-
-
-    return (0, _reactCssThemr.themr)(_identifiers.RIPPLE, defaultTheme)(RippledComponent);
-  };
-};
-
-exports.default = rippleFactory;
\ No newline at end of file
diff --git a/lib/ripple/_config.scss b/lib/ripple/_config.scss
deleted file mode 100644
index 8c26b6f10..000000000
--- a/lib/ripple/_config.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-$ripple-duration: 800ms !default;
-$ripple-final-opacity: .3 !default;
-$ripple-size: 15 * $unit !default;
diff --git a/lib/ripple/index.d.ts b/lib/ripple/index.d.ts
deleted file mode 100644
index 998de2ab1..000000000
--- a/lib/ripple/index.d.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface RippleTheme {
-  /**
-   * Root classname for the ripple.
-   */
-  ripple?: string;
-  /**
-   * Applied when the ripple is active.
-   */
-  rippleActive?: string;
-  /**
-   * Applied when the ripple is restarting.
-   */
-  rippleRestarting?: string;
-  /**
-   * Wrapper class to fit to the parent element.
-   */
-  rippleWrapper?: string;
-}
-
-interface RippleProps {
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * True in case you want a centered ripple.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * Function that will be called when the ripple animation ends.
-   */
-  onRippleEnded?: Function;
-  /**
-   * Factor to indicate how much should the ripple spread under the component.
-   * @default 2
-   */
-  spread?: number;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: RippleTheme;
-}
-
-export class Ripple extends React.Component<RippleProps, {}> { }
-
-export default Ripple;
diff --git a/lib/ripple/index.js b/lib/ripple/index.js
deleted file mode 100644
index a63d64d47..000000000
--- a/lib/ripple/index.js
+++ /dev/null
@@ -1,21 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _Ripple = require('./Ripple.js');
-
-var _Ripple2 = _interopRequireDefault(_Ripple);
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = function (options) {
-  return (0, _Ripple2.default)(_extends({}, options, { theme: _theme2.default }));
-};
\ No newline at end of file
diff --git a/lib/ripple/theme.scss b/lib/ripple/theme.scss
deleted file mode 100644
index 6212078db..000000000
--- a/lib/ripple/theme.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-%ripple {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  z-index: $z-index-high;
-  pointer-events: none;
-  background-color: currentColor;
-  border-radius: 50%;
-  transform-origin: 50% 50%;
-}
-
-.rippleWrapper {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: $z-index-normal;
-  pointer-events: none;
-}
-
-.ripple {
-  @extend %ripple;
-  transition-duration: $ripple-duration;
-  &.rippleRestarting {
-    opacity: $ripple-final-opacity;
-    transition-property: none;
-  }
-  &.rippleActive {
-    opacity: $ripple-final-opacity;
-    transition-property: transform;
-  }
-  &:not(.rippleActive):not(.rippleRestarting) {
-    opacity: 0;
-    transition-property: opacity, transform;
-  }
-}
diff --git a/lib/slider/Slider.js b/lib/slider/Slider.js
deleted file mode 100644
index 45ee6a19b..000000000
--- a/lib/slider/Slider.js
+++ /dev/null
@@ -1,382 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Slider = exports.sliderFactory = undefined;
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactDom = require('react-dom');
-
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _events = require('../utils/events.js');
-
-var _events2 = _interopRequireDefault(_events);
-
-var _utils = require('../utils/utils.js');
-
-var _utils2 = _interopRequireDefault(_utils);
-
-var _ProgressBar = require('../progress_bar/ProgressBar.js');
-
-var _ProgressBar2 = _interopRequireDefault(_ProgressBar);
-
-var _Input = require('../input/Input.js');
-
-var _Input2 = _interopRequireDefault(_Input);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(ProgressBar, Input) {
-  var Slider = function (_Component) {
-    _inherits(Slider, _Component);
-
-    function Slider() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, Slider);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Slider.__proto__ || Object.getPrototypeOf(Slider)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-        inputFocused: false,
-        inputValue: null,
-        sliderLength: 0,
-        sliderStart: 0
-      }, _this.handleInputFocus = function () {
-        _this.setState({
-          inputFocused: true,
-          inputValue: _this.valueForInput(_this.props.value)
-        });
-      }, _this.handleInputChange = function (value) {
-        _this.setState({ inputValue: value });
-      }, _this.handleInputBlur = function (event) {
-        var value = _this.state.inputValue || 0;
-        _this.setState({ inputFocused: false, inputValue: null }, function () {
-          _this.props.onChange(_this.trimValue(value), event);
-        });
-      }, _this.handleKeyDown = function (event) {
-        if ([13, 27].indexOf(event.keyCode) !== -1) _this.getInput().blur();
-        if (event.keyCode === 38) _this.addToValue(_this.props.step);
-        if (event.keyCode === 40) _this.addToValue(-_this.props.step);
-      }, _this.handleMouseDown = function (event) {
-        if (_this.state.inputFocused) _this.getInput().blur();
-        _events2.default.addEventsToDocument(_this.getMouseEventMap());
-        _this.start(_events2.default.getMousePosition(event));
-        _events2.default.pauseEvent(event);
-      }, _this.handleMouseMove = function (event) {
-        _events2.default.pauseEvent(event);
-        _this.move(_events2.default.getMousePosition(event));
-      }, _this.handleMouseUp = function () {
-        _this.end(_this.getMouseEventMap());
-      }, _this.handleResize = function (event, callback) {
-        var _ReactDOM$findDOMNode = _reactDom2.default.findDOMNode(_this.refs.progressbar).getBoundingClientRect(),
-            left = _ReactDOM$findDOMNode.left,
-            right = _ReactDOM$findDOMNode.right;
-
-        var cb = callback || function () {};
-        _this.setState({ sliderStart: left, sliderLength: right - left }, cb);
-      }, _this.handleSliderBlur = function () {
-        _events2.default.removeEventsFromDocument(_this.getKeyboardEvents());
-      }, _this.handleSliderFocus = function () {
-        _events2.default.addEventsToDocument(_this.getKeyboardEvents());
-      }, _this.handleTouchEnd = function () {
-        _this.end(_this.getTouchEventMap());
-      }, _this.handleTouchMove = function (event) {
-        _this.move(_events2.default.getTouchPosition(event));
-      }, _this.handleTouchStart = function (event) {
-        if (_this.state.inputFocused) _this.getInput().blur();
-        _this.start(_events2.default.getTouchPosition(event));
-        _events2.default.addEventsToDocument(_this.getTouchEventMap());
-        _events2.default.pauseEvent(event);
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(Slider, [{
-      key: 'componentDidMount',
-      value: function componentDidMount() {
-        window.addEventListener('resize', this.handleResize);
-        this.handleResize();
-      }
-    }, {
-      key: 'componentWillReceiveProps',
-      value: function componentWillReceiveProps(nextProps) {
-        if (this.state.inputFocused && this.props.value !== nextProps.value) {
-          this.setState({ inputValue: this.valueForInput(nextProps.value) });
-        }
-      }
-    }, {
-      key: 'shouldComponentUpdate',
-      value: function shouldComponentUpdate(nextProps, nextState) {
-        return this.state.inputFocused || !nextState.inputFocused;
-      }
-    }, {
-      key: 'componentWillUnmount',
-      value: function componentWillUnmount() {
-        window.removeEventListener('resize', this.handleResize);
-        _events2.default.removeEventsFromDocument(this.getMouseEventMap());
-        _events2.default.removeEventsFromDocument(this.getTouchEventMap());
-        _events2.default.removeEventsFromDocument(this.getKeyboardEvents());
-      }
-    }, {
-      key: 'addToValue',
-      value: function addToValue(increment) {
-        var value = this.state.inputFocused ? parseFloat(this.state.inputValue) : this.props.value;
-        value = this.trimValue(value + increment);
-        if (value !== this.props.value) this.props.onChange(value);
-      }
-    }, {
-      key: 'getInput',
-      value: function getInput() {
-        return this.refs.input && this.refs.input.getWrappedInstance ? this.refs.input.getWrappedInstance() : this.refs.input;
-      }
-    }, {
-      key: 'getKeyboardEvents',
-      value: function getKeyboardEvents() {
-        return {
-          keydown: this.handleKeyDown
-        };
-      }
-    }, {
-      key: 'getMouseEventMap',
-      value: function getMouseEventMap() {
-        return {
-          mousemove: this.handleMouseMove,
-          mouseup: this.handleMouseUp
-        };
-      }
-    }, {
-      key: 'getTouchEventMap',
-      value: function getTouchEventMap() {
-        return {
-          touchmove: this.handleTouchMove,
-          touchend: this.handleTouchEnd
-        };
-      }
-    }, {
-      key: 'end',
-      value: function end(revents) {
-        _events2.default.removeEventsFromDocument(revents);
-        this.setState({ pressed: false });
-      }
-    }, {
-      key: 'knobOffset',
-      value: function knobOffset() {
-        var _props = this.props,
-            max = _props.max,
-            min = _props.min;
-
-        var translated = this.state.sliderLength * (this.props.value - min) / (max - min);
-        return translated * 100 / this.state.sliderLength;
-      }
-    }, {
-      key: 'move',
-      value: function move(position) {
-        var newValue = this.positionToValue(position);
-        if (newValue !== this.props.value) this.props.onChange(newValue);
-      }
-    }, {
-      key: 'positionToValue',
-      value: function positionToValue(position) {
-        var _state = this.state,
-            start = _state.sliderStart,
-            length = _state.sliderLength;
-        var _props2 = this.props,
-            max = _props2.max,
-            min = _props2.min;
-
-        return this.trimValue((position.x - start) / length * (max - min) + min);
-      }
-    }, {
-      key: 'start',
-      value: function start(position) {
-        var _this2 = this;
-
-        this.handleResize(null, function () {
-          _this2.setState({ pressed: true });
-          _this2.props.onChange(_this2.positionToValue(position));
-        });
-      }
-    }, {
-      key: 'stepDecimals',
-      value: function stepDecimals() {
-        return (this.props.step.toString().split('.')[1] || []).length;
-      }
-    }, {
-      key: 'trimValue',
-      value: function trimValue(value) {
-        if (value < this.props.min) return this.props.min;
-        if (value > this.props.max) return this.props.max;
-        return _utils2.default.round(value, this.stepDecimals());
-      }
-    }, {
-      key: 'valueForInput',
-      value: function valueForInput(value) {
-        var decimals = this.stepDecimals();
-        return decimals > 0 ? value.toFixed(decimals) : value.toString();
-      }
-    }, {
-      key: 'renderSnaps',
-      value: function renderSnaps() {
-        var _this3 = this;
-
-        if (this.props.snaps) {
-          return _react2.default.createElement(
-            'div',
-            { ref: 'snaps', className: this.props.theme.snaps },
-            _utils2.default.range(0, (this.props.max - this.props.min) / this.props.step).map(function (i) {
-              return _react2.default.createElement('div', { key: 'span-' + i, className: _this3.props.theme.snap });
-            })
-          );
-        }
-      }
-    }, {
-      key: 'renderInput',
-      value: function renderInput() {
-        if (this.props.editable) {
-          var value = this.state.inputFocused ? this.state.inputValue : this.valueForInput(this.props.value);
-          return _react2.default.createElement(Input, {
-            ref: 'input',
-            className: this.props.theme.input,
-            disabled: this.props.disabled,
-            onFocus: this.handleInputFocus,
-            onChange: this.handleInputChange,
-            onBlur: this.handleInputBlur,
-            value: value
-          });
-        }
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var _classnames;
-
-        var theme = this.props.theme;
-
-        var knobStyles = { left: this.knobOffset() + '%' };
-        var className = (0, _classnames3.default)(theme.slider, (_classnames = {}, _defineProperty(_classnames, theme.editable, this.props.editable), _defineProperty(_classnames, theme.disabled, this.props.disabled), _defineProperty(_classnames, theme.pinned, this.props.pinned), _defineProperty(_classnames, theme.pressed, this.state.pressed), _defineProperty(_classnames, theme.ring, this.props.value === this.props.min), _classnames), this.props.className);
-
-        return _react2.default.createElement(
-          'div',
-          {
-            className: className,
-            disabled: this.props.disabled,
-            'data-react-toolbox': 'slider',
-            onBlur: this.handleSliderBlur,
-            onFocus: this.handleSliderFocus,
-            tabIndex: '0'
-          },
-          _react2.default.createElement(
-            'div',
-            {
-              ref: 'slider',
-              className: theme.container,
-              onMouseDown: this.handleMouseDown,
-              onTouchStart: this.handleTouchStart
-            },
-            _react2.default.createElement(
-              'div',
-              {
-                ref: 'knob',
-                className: theme.knob,
-                onMouseDown: this.handleMouseDown,
-                onTouchStart: this.handleTouchStart,
-                style: knobStyles
-              },
-              _react2.default.createElement('div', { className: theme.innerknob, 'data-value': parseInt(this.props.value) })
-            ),
-            _react2.default.createElement(
-              'div',
-              { className: theme.progress },
-              _react2.default.createElement(ProgressBar, {
-                disabled: this.props.disabled,
-                ref: 'progressbar',
-                className: theme.innerprogress,
-                max: this.props.max,
-                min: this.props.min,
-                mode: 'determinate',
-                value: this.props.value
-              }),
-              this.renderSnaps()
-            )
-          ),
-          this.renderInput()
-        );
-      }
-    }]);
-
-    return Slider;
-  }(_react.Component);
-
-  Slider.propTypes = {
-    className: _react.PropTypes.string,
-    disabled: _react.PropTypes.bool,
-    editable: _react.PropTypes.bool,
-    max: _react.PropTypes.number,
-    min: _react.PropTypes.number,
-    onChange: _react.PropTypes.func,
-    pinned: _react.PropTypes.bool,
-    snaps: _react.PropTypes.bool,
-    step: _react.PropTypes.number,
-    theme: _react.PropTypes.shape({
-      container: _react.PropTypes.string,
-      editable: _react.PropTypes.string,
-      innerknob: _react.PropTypes.string,
-      innerprogress: _react.PropTypes.string,
-      input: _react.PropTypes.string,
-      knob: _react.PropTypes.string,
-      pinned: _react.PropTypes.string,
-      pressed: _react.PropTypes.string,
-      progress: _react.PropTypes.string,
-      ring: _react.PropTypes.string,
-      slider: _react.PropTypes.string,
-      snap: _react.PropTypes.string,
-      snaps: _react.PropTypes.string
-    }),
-    value: _react.PropTypes.number
-  };
-  Slider.defaultProps = {
-    className: '',
-    editable: false,
-    max: 100,
-    min: 0,
-    pinned: false,
-    snaps: false,
-    step: 0.01,
-    value: 0
-  };
-
-
-  return Slider;
-};
-
-var Slider = factory(_ProgressBar2.default, _Input2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.SLIDER)(Slider);
-exports.sliderFactory = factory;
-exports.Slider = Slider;
\ No newline at end of file
diff --git a/lib/slider/__tests__/index.spec.js b/lib/slider/__tests__/index.spec.js
deleted file mode 100644
index 92507525b..000000000
--- a/lib/slider/__tests__/index.spec.js
+++ /dev/null
@@ -1,202 +0,0 @@
-'use strict';
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactAddonsTestUtils = require('react-addons-test-utils');
-
-var _reactAddonsTestUtils2 = _interopRequireDefault(_reactAddonsTestUtils);
-
-var _sinon = require('sinon');
-
-var _sinon2 = _interopRequireDefault(_sinon);
-
-var _expect = require('expect');
-
-var _expect2 = _interopRequireDefault(_expect);
-
-var _ProgressBar = require('../../progress_bar/ProgressBar.js');
-
-var _Input = require('../../input/Input.js');
-
-var _Input2 = _interopRequireDefault(_Input);
-
-var _Slider = require('../Slider.js');
-
-var _Slider2 = _interopRequireDefault(_Slider);
-
-var _testing = require('../../utils/testing');
-
-var _testing2 = _interopRequireDefault(_testing);
-
-var _theme = require('../theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-describe('Slider', function () {
-  var slider = void 0,
-      progress = void 0,
-      input = void 0,
-      onChange = void 0;
-
-  describe('#positionToValue', function () {
-    before(function () {
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { min: -500, max: 500 }));
-      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
-      slider.setState({ sliderStart: 500, sliderLength: 100 });
-    });
-
-    it('returns min when position is less than origin', function () {
-      (0, _expect2.default)(slider.positionToValue({ x: 400 })).toEqual(-500);
-    });
-
-    it('returns max when position is more and origin plus length', function () {
-      (0, _expect2.default)(slider.positionToValue({ x: 900 })).toEqual(500);
-    });
-
-    it('returns the proper position when the position is inside slider', function () {
-      (0, _expect2.default)(slider.positionToValue({ x: 520 })).toEqual(-300);
-    });
-  });
-
-  describe('#trimValue', function () {
-    before(function () {
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { min: 0, max: 100, step: 0.1 }));
-      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
-    });
-
-    it('rounds to the proper number', function () {
-      (0, _expect2.default)(slider.trimValue(57.16)).toEqual(57.2);
-      (0, _expect2.default)(slider.trimValue(57.12)).toEqual(57.10);
-    });
-
-    it('returns min if number is less than min', function () {
-      (0, _expect2.default)(slider.trimValue(-57.16)).toEqual(0);
-    });
-
-    it('returns max if number is more than max', function () {
-      (0, _expect2.default)(slider.trimValue(257.16)).toEqual(100);
-    });
-  });
-
-  describe('#valueForInput', function () {
-    before(function () {
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { min: 0, max: 100, step: 0.01 }));
-      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
-    });
-
-    it('returns a fixed number when an integer is given', function () {
-      (0, _expect2.default)(slider.valueForInput(4)).toEqual('4.00');
-    });
-
-    it('returns a fixed number when a float is given', function () {
-      (0, _expect2.default)(slider.valueForInput(4.06)).toEqual('4.06');
-    });
-  });
-
-  describe('#knobOffset', function () {
-    it('returns the corresponding offset for a given value and slider length/start', function () {
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { min: -500, max: 500, value: -250 }));
-      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
-      slider.setState({ sliderStart: 500, sliderLength: 100 });
-      (0, _expect2.default)(slider.knobOffset()).toEqual(25);
-    });
-  });
-
-  describe('#render', function () {
-    it('contains a linear progress bar with proper properties', function () {
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { min: 100, max: 1000, value: 140 }));
-      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
-      progress = _reactAddonsTestUtils2.default.findRenderedComponentWithType(slider, _ProgressBar.ProgressBar);
-      (0, _expect2.default)(progress.props.mode).toEqual('determinate');
-      (0, _expect2.default)(progress.props.type).toEqual('linear');
-      (0, _expect2.default)(progress.props.value).toEqual(140);
-      (0, _expect2.default)(progress.props.min).toEqual(100);
-      (0, _expect2.default)(progress.props.max).toEqual(1000);
-    });
-
-    it('contains an input component if its editable', function () {
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { editable: true, value: 130 }));
-      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
-      input = _reactAddonsTestUtils2.default.findRenderedComponentWithType(slider, _Input2.default);
-      (0, _expect2.default)(parseInt(input.props.value)).toEqual(slider.props.value);
-    });
-
-    it('contains the proper number of snaps when snapped', function () {
-      slider = _testing2.default.shallowRenderComponent(_Slider.Slider, { editable: true, pinned: true, theme: _theme2.default });
-      (0, _expect2.default)(slider.props.className).toContain(_theme2.default.ring);
-      (0, _expect2.default)(slider.props.className).toContain(_theme2.default.pinned);
-      slider = _testing2.default.shallowRenderComponent(_Slider.Slider, { editable: true, value: 50, theme: _theme2.default });
-      (0, _expect2.default)(slider.props.className).toNotContain(_theme2.default.ring);
-    });
-  });
-
-  describe('#events', function () {
-    beforeEach(function () {
-      onChange = _sinon2.default.spy();
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { min: -500, max: 500, onChange: onChange }));
-      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
-      slider.setState({ sliderStart: 0, sliderLength: 1000 });
-      slider.handleResize = function (event, callback) {
-        callback();
-      };
-    });
-
-    it('sets pressed state when knob is clicked', function () {
-      _reactAddonsTestUtils2.default.Simulate.mouseDown(slider.refs.knob);
-      (0, _expect2.default)(slider.state.pressed).toEqual(true);
-    });
-
-    it('sets pressed state when knob is touched', function () {
-      _reactAddonsTestUtils2.default.Simulate.touchStart(slider.refs.knob, { touches: [{ pageX: 200 }] });
-      (0, _expect2.default)(slider.state.pressed).toEqual(true);
-    });
-
-    it('sets a proper value when the slider is clicked', function () {
-      _reactAddonsTestUtils2.default.Simulate.mouseDown(slider.refs.slider, { pageX: 200 });
-      (0, _expect2.default)(onChange.called).toEqual(true);
-      (0, _expect2.default)(onChange.getCall(0).args[0]).toEqual(-300);
-    });
-
-    it('sets a proper value when the slider is touched', function () {
-      _reactAddonsTestUtils2.default.Simulate.touchStart(slider.refs.slider, { touches: [{ pageX: 200, pageY: 0 }] });
-      (0, _expect2.default)(onChange.called).toEqual(true);
-      (0, _expect2.default)(onChange.getCall(0).args[0]).toEqual(-300);
-    });
-
-    it('changes input value when slider changes', function () {
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { editable: true, onChange: onChange }));
-      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
-      slider.setState({ sliderStart: 0, sliderLength: 1000 });
-      slider.handleResize = function (event, callback) {
-        callback();
-      };
-      input = _reactAddonsTestUtils2.default.findRenderedComponentWithType(slider, _Input2.default);
-      _reactAddonsTestUtils2.default.Simulate.mouseDown(slider.refs.slider, { pageX: 900 });
-      (0, _expect2.default)(onChange.called).toEqual(true);
-      (0, _expect2.default)(onChange.getCall(0).args[0]).toEqual(90);
-    });
-
-    it('changes its value when input is blurred', function () {
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { editable: true, value: 50, onChange: onChange }));
-      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
-      input = _reactAddonsTestUtils2.default.findRenderedComponentWithType(slider, _Input.Input);
-      _reactAddonsTestUtils2.default.Simulate.change(input.refs.input, { target: { value: '80' } });
-      _reactAddonsTestUtils2.default.Simulate.blur(input.refs.input);
-      (0, _expect2.default)(onChange.called).toEqual(true);
-      (0, _expect2.default)(onChange.getCall(0).args[0]).toEqual(80);
-    });
-
-    it('calls onChange callback when the value is changed', function () {
-      var onChangeSpy = _sinon2.default.spy();
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { onChange: onChangeSpy }));
-      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
-      slider.setState({ sliderStart: 0, sliderLength: 1000 });
-      _reactAddonsTestUtils2.default.Simulate.mouseDown(slider.refs.slider, { pageX: 900 });
-      (0, _expect2.default)(onChangeSpy.called).toEqual(true);
-    });
-  });
-});
\ No newline at end of file
diff --git a/lib/slider/_config.scss b/lib/slider/_config.scss
deleted file mode 100644
index 6563e3015..000000000
--- a/lib/slider/_config.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-$slider-main-color: $color-primary !default;
-$slider-main-color-contrast: $color-primary-contrast !default;
-$slider-disabled-color: rgba(177, 177, 177, 1) !default;
-$slider-snap-color: $color-black !default;
-$slider-knob-size: 3.2 * $unit !default;
-$slider-inner-knob-size: 1.2 * $unit !default;
-$slider-snap-size: .2 * $unit !default;
-$slider-input-width: 5 * $unit !default;
-$slider-bar-height: .2 * $unit !default;
-$slider-pin-size: 2.6 * $unit !default;
-$slider-pin-elevation: 1.7 * $unit !default;
-$slider-side-separation: 1 * $unit !default;
-$slider-empty-knob-border: .2 * $unit !default;
diff --git a/lib/slider/index.d.ts b/lib/slider/index.d.ts
deleted file mode 100644
index 3a58538a4..000000000
--- a/lib/slider/index.d.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface SliderTheme {
-  /**
-   * Used as an inner container of the root component.
-   */
-  container?: string;
-  /**
-   * Added to the root of in case the Slider is editable.
-   */
-  editable?: string;
-  /**
-   * Used to style the inner element of the knob.
-   */
-  innerknob?: string;
-  /**
-   * Provided to the ProgressBar component.
-   */
-  innerprogress?: string;
-  /**
-   * Provided to the Input element in case it's editable.
-   */
-  input?: string;
-  /**
-   * Used to style the outer layer of the knob.
-   */
-  knob?: string;
-  /**
-   * Added to the root in case the Slider is pinned.
-   */
-  pinned?: string;
-  /**
-   * Added to the root in case the state is pressed.
-   */
-  pressed?: string;
-  /**
-   * Used as an outer wrapper for the ProgressBar.
-   */
-  progress?: string;
-  /**
-   * Used in the root when the knob should be a ring.
-   */
-  ring?: string;
-  /**
-   * Class used for the root element.
-   */
-  slider?: string;
-  /**
-   * Used for every individual snap element.
-   */
-  snap?: string;
-  /**
-   * Used as a wrapper for the group of snaps when it's snapped.
-   */
-  snaps?: string;
-}
-
-interface SliderProps extends ReactToolbox.Props {
-  /**
-   * If true, an input is shown and the user can set the slider from keyboard value.
-   * @default false
-   */
-  editable?: boolean;
-  /**
-   * If true, component will be disabled.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * Maximum value permitted.
-   * @default 100
-   */
-  max?: number;
-  /**
-   * Minimum value permitted.
-   * @default 0
-   */
-  min?: number;
-  /**
-   * Callback function that will be invoked when the slider value changes.
-   */
-  onChange?: Function;
-  /**
-   * If true, a pin with numeric value label is shown when the slider thumb is pressed. Use for settings for which users need to know the exact value of the setting.
-   * @default false
-   */
-  pinned?: boolean;
-  /**
-   * If true, the slider thumb snaps to tick marks evenly spaced based on the step property value.
-   * @default false
-   */
-  snaps?: boolean;
-  /**
-   * Amount to vary the value when the knob is moved or increase/decrease is called.
-   * @default 0.01
-   */
-  step?: number;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: SliderTheme;
-  /**
-   * Current value of the slider.
-   * @default 0
-   */
-  value?: number;
-}
-
-export class Slider extends React.Component<SliderProps, {}> { }
-
-export default Slider;
diff --git a/lib/slider/index.js b/lib/slider/index.js
deleted file mode 100644
index ddcc2d7f2..000000000
--- a/lib/slider/index.js
+++ /dev/null
@@ -1,26 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Slider = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _progress_bar = require('../progress_bar');
-
-var _input = require('../input');
-
-var _Slider = require('./Slider.js');
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var ThemedSlider = (0, _reactCssThemr.themr)(_identifiers.SLIDER, _theme2.default)((0, _Slider.sliderFactory)(_progress_bar.ProgressBar, _input.Input));
-exports.default = ThemedSlider;
-exports.Slider = ThemedSlider;
\ No newline at end of file
diff --git a/lib/slider/theme.scss b/lib/slider/theme.scss
deleted file mode 100644
index 310e80097..000000000
--- a/lib/slider/theme.scss
+++ /dev/null
@@ -1,200 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.container {
-  position: relative;
-  width: calc(100% - #{$slider-knob-size});
-  height: $slider-knob-size;
-  margin-right: $slider-knob-size;
-  user-select: none;
-  &:not(:last-child) {
-    margin-right: $slider-side-separation + $slider-knob-size;
-  }
-  &:not(:first-child) {
-    margin-left: $slider-side-separation;
-  }
-}
-
-.knob {
-  position: relative;
-  top: 0;
-  left: 0;
-  z-index: $z-index-higher;
-  display: flex;
-  width: $slider-knob-size;
-  height: $slider-knob-size;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  background-color: transparent;
-}
-
-.innerknob {
-  z-index: $z-index-high;
-  width: $slider-inner-knob-size;
-  height: $slider-inner-knob-size;
-  background-color: $slider-main-color;
-  border-radius: 50%;
-  transition-timing-function: $animation-curve-default;
-  transition-duration: .1s;
-  transition-property: height, width, background-color, border;
-}
-
-.snaps {
-  position: absolute;
-  top: $slider-knob-size / 2 - $slider-snap-size / 2;
-  left: 0;
-  display: flex;
-  width: calc(100% + #{$slider-snap-size});
-  height: $slider-snap-size;
-  flex-direction: row;
-  pointer-events: none;
-  &:after {
-    display: block;
-    width: $slider-snap-size;
-    height: $slider-snap-size;
-    content: "";
-    background-color: $slider-snap-color;
-    border-radius: 50%;
-  }
-}
-
-.snap {
-  flex: 1;
-  &:after {
-    display: block;
-    width: $slider-snap-size;
-    height: $slider-snap-size;
-    content: "";
-    background-color: $slider-snap-color;
-    border-radius: 50%;
-  }
-}
-
-.input {
-  width: $slider-input-width;
-  padding: 0;
-  margin-bottom: 0;
-  > input {
-    text-align: center;
-  }
-}
-
-.progress {
-  position: absolute;
-  top: 0;
-  left: $slider-knob-size / 2;
-  width: 100%;
-  height: 100%;
-  .innerprogress {
-    position: absolute;
-    top: $slider-knob-size / 2 - $slider-bar-height / 2;
-    height: $slider-bar-height;
-    [data-ref="value"] {
-      transition-duration: 0s;
-    }
-  }
-}
-
-.slider {
-  &:focus .knob:before {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: $z-index-normal;
-    content: "";
-    background-color: $slider-main-color;
-    border-radius: 50%;
-    opacity: .26;
-  }
-  &[disabled] {
-    pointer-events: none;
-    cursor: auto;
-    .innerknob {
-      background-color: $slider-disabled-color;
-    }
-  }
-  &.editable {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-  &.pinned .innerknob {
-    &:before {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: $slider-pin-size;
-      height: $slider-pin-size;
-      margin-left: ($slider-knob-size - $slider-pin-size) / 2;
-      content: "";
-      background-color: $slider-main-color;
-      border-radius: 50% 50% 50% 0;
-      transition: transform .2s ease, background-color .18s ease;
-      transform: rotate(-45deg) scale(0) translate(0);
-    }
-    &:after {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: $slider-knob-size;
-      height: $slider-pin-size;
-      font-size: 10px;
-      color: $color-background;
-      text-align: center;
-      content: attr(data-value);
-      transition: transform .2s ease, background-color .18s ease;
-      transform: scale(0) translate(0);
-    }
-  }
-  &.pressed {
-    &.pinned .innerknob {
-      &:before {
-        transition-delay: 100ms;
-        transform: rotate(-45deg) scale(1) translate($slider-pin-elevation, - $slider-pin-elevation);
-      }
-      &:after {
-        transition-delay: 100ms;
-        transform: scale(1) translate(0, - $slider-pin-elevation);
-      }
-    }
-    &:not(.pinned) {
-      &.ring .progress {
-        left: $slider-knob-size / 2 + ($slider-knob-size - $slider-empty-knob-border * 2) / 2;
-        width: calc(100% - #{($slider-knob-size - $slider-empty-knob-border * 2) / 2});
-      }
-      .innerknob {
-        width: 100%;
-        height: 100%;
-        transform: translateZ(0);
-      }
-    }
-  }
-  &.ring {
-    .innerknob {
-      background-color: transparent;
-      border: $slider-empty-knob-border solid $color-divider;
-      &:before {
-        background-color: $slider-main-color;
-      }
-    }
-    .progress {
-      left: $slider-knob-size / 2 + $slider-empty-knob-border * 2;
-      width: calc(100% - #{$slider-empty-knob-border * 2});
-      transition: left .18s ease, width .18s ease;
-    }
-    &.pinned {
-      .innerknob {
-        background-color: $color-background;
-      }
-      .progress {
-        left: $slider-knob-size / 2;
-        width: calc(100%);
-      }
-    }
-  }
-}
diff --git a/lib/snackbar/Snackbar.js b/lib/snackbar/Snackbar.js
deleted file mode 100644
index 653de0162..000000000
--- a/lib/snackbar/Snackbar.js
+++ /dev/null
@@ -1,154 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Snackbar = exports.snackbarFactory = undefined;
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _ActivableRenderer = require('../hoc/ActivableRenderer.js');
-
-var _ActivableRenderer2 = _interopRequireDefault(_ActivableRenderer);
-
-var _Overlay = require('../overlay/Overlay.js');
-
-var _Overlay2 = _interopRequireDefault(_Overlay);
-
-var _Button = require('../button/Button.js');
-
-var _Button2 = _interopRequireDefault(_Button);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(Overlay, Button) {
-  var Snackbar = function (_Component) {
-    _inherits(Snackbar, _Component);
-
-    function Snackbar() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, Snackbar);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Snackbar.__proto__ || Object.getPrototypeOf(Snackbar)).call.apply(_ref, [this].concat(args))), _this), _this.scheduleTimeout = function (props) {
-        var onTimeout = props.onTimeout,
-            timeout = props.timeout;
-
-        if (_this.curTimeout) clearTimeout(_this.curTimeout);
-        _this.curTimeout = setTimeout(function () {
-          if (onTimeout) onTimeout();
-          _this.curTimeout = null;
-        }, timeout);
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(Snackbar, [{
-      key: 'componentDidMount',
-      value: function componentDidMount() {
-        if (this.props.active && this.props.timeout) {
-          this.scheduleTimeout(this.props);
-        }
-      }
-    }, {
-      key: 'componentWillReceiveProps',
-      value: function componentWillReceiveProps(nextProps) {
-        if (nextProps.active && nextProps.timeout) {
-          this.scheduleTimeout(nextProps);
-        }
-      }
-    }, {
-      key: 'componentWillUnmount',
-      value: function componentWillUnmount() {
-        clearTimeout(this.curTimeout);
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var _props = this.props,
-            action = _props.action,
-            active = _props.active,
-            children = _props.children,
-            label = _props.label,
-            onClick = _props.onClick,
-            theme = _props.theme,
-            type = _props.type;
-
-        var className = (0, _classnames3.default)([theme.snackbar, theme[type]], _defineProperty({}, theme.active, active), this.props.className);
-
-        return _react2.default.createElement(
-          Overlay,
-          { invisible: true },
-          _react2.default.createElement(
-            'div',
-            { 'data-react-toolbox': 'snackbar', className: className },
-            _react2.default.createElement(
-              'span',
-              { className: theme.label },
-              label,
-              children
-            ),
-            action ? _react2.default.createElement(Button, { className: theme.button, label: action, onClick: onClick }) : null
-          )
-        );
-      }
-    }]);
-
-    return Snackbar;
-  }(_react.Component);
-
-  Snackbar.propTypes = {
-    action: _react.PropTypes.string,
-    active: _react.PropTypes.bool,
-    children: _react.PropTypes.node,
-    className: _react.PropTypes.string,
-    label: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-    onClick: _react.PropTypes.func,
-    onTimeout: _react.PropTypes.func,
-    theme: _react.PropTypes.shape({
-      accept: _react.PropTypes.string,
-      active: _react.PropTypes.string,
-      button: _react.PropTypes.string,
-      cancel: _react.PropTypes.string,
-      icon: _react.PropTypes.string,
-      label: _react.PropTypes.string,
-      snackbar: _react.PropTypes.string,
-      warning: _react.PropTypes.string
-    }),
-    timeout: _react.PropTypes.number,
-    type: _react.PropTypes.oneOf(['accept', 'cancel', 'warning'])
-  };
-
-
-  return (0, _ActivableRenderer2.default)()(Snackbar);
-};
-
-var Snackbar = factory(_Overlay2.default, _Button2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.SNACKBAR)(Snackbar);
-exports.snackbarFactory = factory;
-exports.Snackbar = Snackbar;
\ No newline at end of file
diff --git a/lib/snackbar/_config.scss b/lib/snackbar/_config.scss
deleted file mode 100644
index 69f7cdf50..000000000
--- a/lib/snackbar/_config.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-$snackbar-color-cancel: $palette-red-500 !default;
-$snackbar-color-accept: $palette-green-500 !default;
-$snackbar-color-warning: $palette-lime-a200 !default;
-$snackbar-background-color: $color-text !default;
-$snackbar-border-radius: .2 * $unit !default;
-$snackbar-button-offset: 4.8 * $unit !default;
-$snackbar-color: $color-white !default;
-$snackbar-horizontal-offset: 2.4 * $unit !default;
-$snackbar-vertical-offset: 1.4 * $unit !default;
diff --git a/lib/snackbar/index.d.ts b/lib/snackbar/index.d.ts
deleted file mode 100644
index cc95d3a88..000000000
--- a/lib/snackbar/index.d.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface SnackbarTheme {
-  /**
-   * Added to the root element in case it's accept type.
-   */
-  accept?: string;
-  /**
-   * Added to the root element when its active.
-   */
-  active?: string;
-  /**
-   * Used for the button inside the component.
-   */
-  button?: string;
-  /**
-   * Added to the root element in case it's cancel type.
-   */
-  cancel?: string;
-  /**
-   * Used for the label element.
-   */
-  label?: string;
-  /**
-   * Used as the className for the root element of the component.
-   */
-  snackbar?: string;
-  /**
-   * Added to the root element in case it's warning type.
-   */
-  warning?: string;
-}
-
-interface SnackbarProps extends ReactToolbox.Props {
-  /**
-   * Label for the action component inside the Snackbar.
-   */
-  action?: string;
-  /**
-   * If true, the snackbar will be active.
-   * @default true
-   */
-  active?: boolean;
-  /**
-   * Text to display in the content. Required.
-   */
-  label: string;
-  /**
-   * Callback function when finish the set timeout.
-   */
-  onTimeout?: Function;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: SnackbarTheme;
-  /**
-   * Amount of time in milliseconds after the Snackbar will be automatically hidden.
-   */
-  timeout?: number;
-  /**
-   * Indicates the action type. Can be accept, warning or cancel
-   */
-  type?: "accept" | "cancel" | "warning";
-}
-
-export class Snackbar extends React.Component<SnackbarProps, {}> { }
-
-export default Snackbar;
diff --git a/lib/snackbar/index.js b/lib/snackbar/index.js
deleted file mode 100644
index 4af5c61fd..000000000
--- a/lib/snackbar/index.js
+++ /dev/null
@@ -1,27 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Snackbar = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Snackbar = require('./Snackbar.js');
-
-var _overlay = require('../overlay');
-
-var _button = require('../button');
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var ThemedSnackbar = (0, _reactCssThemr.themr)(_identifiers.SNACKBAR, _theme2.default)((0, _Snackbar.snackbarFactory)(_overlay.Overlay, _button.Button));
-
-exports.default = ThemedSnackbar;
-exports.Snackbar = ThemedSnackbar;
\ No newline at end of file
diff --git a/lib/snackbar/theme.scss b/lib/snackbar/theme.scss
deleted file mode 100644
index 4c7d0770e..000000000
--- a/lib/snackbar/theme.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.snackbar {
-  position: fixed;
-  right: $snackbar-horizontal-offset;
-  bottom: 0;
-  left: $snackbar-horizontal-offset;
-  z-index: $z-index-higher;
-  display: flex;
-  align-items: center;
-  padding: $snackbar-vertical-offset $snackbar-horizontal-offset;
-  margin: 0 auto;
-  margin-top: $snackbar-vertical-offset;
-  color: $snackbar-color;
-  background-color: $snackbar-background-color;
-  border-radius: $snackbar-border-radius;
-  transition: all $animation-duration $animation-curve-default $animation-duration;
-  &.accept .button {
-    color: $snackbar-color-accept;
-  }
-  &.warning .button {
-    color: $snackbar-color-warning;
-  }
-  &.cancel .button {
-    color: $snackbar-color-cancel;
-  }
-  &:not(.active) {
-    transform: translateY(100%);
-  }
-  &.active {
-    transform: translateY(0%);
-  }
-}
-
-.label {
-  flex-grow: 1;
-  font-size: $font-size-small;
-}
-
-.button {
-  min-width: inherit;
-  margin-top: - $snackbar-vertical-offset / 2;
-  margin-right: - $snackbar-horizontal-offset / 2;
-  margin-bottom: - $snackbar-vertical-offset / 2;
-  margin-left: $snackbar-button-offset;
-}
diff --git a/lib/switch/Switch.js b/lib/switch/Switch.js
deleted file mode 100644
index 6737c2c6c..000000000
--- a/lib/switch/Switch.js
+++ /dev/null
@@ -1,151 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Switch = exports.switchFactory = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Ripple = require('../ripple/Ripple.js');
-
-var _Ripple2 = _interopRequireDefault(_Ripple);
-
-var _Thumb = require('./Thumb.js');
-
-var _Thumb2 = _interopRequireDefault(_Thumb);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(Thumb) {
-  var Switch = function (_Component) {
-    _inherits(Switch, _Component);
-
-    function Switch() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, Switch);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Switch.__proto__ || Object.getPrototypeOf(Switch)).call.apply(_ref, [this].concat(args))), _this), _this.handleToggle = function (event) {
-        if (event.pageX !== 0 && event.pageY !== 0) _this.blur();
-        if (!_this.props.disabled && _this.props.onChange) {
-          _this.props.onChange(!_this.props.checked, event);
-        }
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(Switch, [{
-      key: 'blur',
-      value: function blur() {
-        this.refs.input.blur();
-      }
-    }, {
-      key: 'focus',
-      value: function focus() {
-        this.refs.input.focus();
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var _props = this.props,
-            className = _props.className,
-            checked = _props.checked,
-            disabled = _props.disabled,
-            onChange = _props.onChange,
-            theme = _props.theme,
-            others = _objectWithoutProperties(_props, ['className', 'checked', 'disabled', 'onChange', 'theme']); //eslint-disable-line no-unused-vars
-
-
-        var _className = (0, _classnames2.default)(theme[disabled ? 'disabled' : 'field'], className);
-        return _react2.default.createElement(
-          'label',
-          { 'data-react-toolbox': 'switch', className: _className },
-          _react2.default.createElement('input', _extends({}, others, {
-            checked: this.props.checked,
-            className: theme.input,
-            onClick: this.handleToggle,
-            readOnly: true,
-            ref: 'input',
-            type: 'checkbox'
-          })),
-          _react2.default.createElement(
-            'span',
-            { className: theme[checked ? 'on' : 'off'] },
-            _react2.default.createElement(Thumb, { disabled: this.props.disabled, theme: theme })
-          ),
-          this.props.label ? _react2.default.createElement(
-            'span',
-            { className: theme.text },
-            this.props.label
-          ) : null
-        );
-      }
-    }]);
-
-    return Switch;
-  }(_react.Component);
-
-  Switch.propTypes = {
-    checked: _react.PropTypes.bool,
-    className: _react.PropTypes.string,
-    disabled: _react.PropTypes.bool,
-    label: _react.PropTypes.string,
-    name: _react.PropTypes.string,
-    onBlur: _react.PropTypes.func,
-    onChange: _react.PropTypes.func,
-    onFocus: _react.PropTypes.func,
-    theme: _react.PropTypes.shape({
-      disabled: _react.PropTypes.string,
-      field: _react.PropTypes.string,
-      input: _react.PropTypes.string,
-      off: _react.PropTypes.string,
-      on: _react.PropTypes.string,
-      ripple: _react.PropTypes.string,
-      text: _react.PropTypes.string,
-      thumb: _react.PropTypes.string
-    })
-  };
-  Switch.defaultProps = {
-    checked: false,
-    className: '',
-    disabled: false
-  };
-
-
-  return Switch;
-};
-
-var Thumb = (0, _Thumb2.default)((0, _Ripple2.default)({ centered: true, spread: 2.6 }));
-var Switch = factory(Thumb);
-
-exports.default = (0, _reactCssThemr.themr)(_identifiers.SWITCH)(Switch);
-exports.switchFactory = factory;
-exports.Switch = Switch;
\ No newline at end of file
diff --git a/lib/switch/Thumb.js b/lib/switch/Thumb.js
deleted file mode 100644
index 1f41d9950..000000000
--- a/lib/switch/Thumb.js
+++ /dev/null
@@ -1,37 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-var factory = function factory(ripple) {
-  var Thumb = function Thumb(_ref) {
-    var onMouseDown = _ref.onMouseDown,
-        theme = _ref.theme,
-        other = _objectWithoutProperties(_ref, ['onMouseDown', 'theme']);
-
-    return _react2.default.createElement('span', _extends({ role: 'thumb', className: theme.thumb, onMouseDown: onMouseDown }, other));
-  };
-
-  Thumb.propTypes = {
-    children: _react.PropTypes.any,
-    theme: _react.PropTypes.shape({
-      ripple: _react.PropTypes.string,
-      thumb: _react.PropTypes.string
-    })
-  };
-
-  return ripple(Thumb);
-};
-
-exports.default = factory;
\ No newline at end of file
diff --git a/lib/switch/_config.scss b/lib/switch/_config.scss
deleted file mode 100644
index 784084717..000000000
--- a/lib/switch/_config.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-$switch-color: $color-primary !default;
-$switch-text-color: $color-black !default;
-$switch-thumb-off-color: $palette-grey-50 !default;
-$switch-track-on-color: rgba($color-primary, 0.5) !default;
-$switch-track-off-color: rgba($color-black, 0.26) !default;
-$switch-off-ripple-color: rgba($color-black, 0.4) !default;
-$switch-on-focus-color: rgba($color-primary, 0.26) !default;
-$switch-off-focus-color: rgba($color-black, 0.1) !default;
-$switch-disabled-thumb-color: $palette-grey-400 !default;
-$switch-disabled-track-color: rgba($color-black, 0.12) !default;
-$switch-disabled-text-color: rgba($color-black, 0.26) !default;
-$switch-total-height: 2.4 * $unit !default;
-$switch-track-length: 3.6 * $unit !default;
-$switch-track-height: 1.4 * $unit !default;
-$switch-thumb-size: 2 * $unit !default;
-$switch-thumb-on-color: $switch-color !default;
-$switch-focus-init-size: .8 * $unit !default;
-$switch-focus-size: $switch-total-height * 2 !default;
-$switch-focus-diff: ($switch-focus-size - $switch-focus-init-size) / 2 !default;
-$switch-ripple-duration: 650ms !default;
-$switch-font-size: $font-size-small !default;
-$switch-field-margin-bottom: 1.5 * $unit !default;
diff --git a/lib/switch/index.d.ts b/lib/switch/index.d.ts
deleted file mode 100644
index fd1ab6e0e..000000000
--- a/lib/switch/index.d.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface SwitchTheme {
-  /**
-   * Used for the root element if the component is disabled.
-   */
-  disabled?: string;
-  /**
-   * Used for the root element if the component is not disabled.
-   */
-  field?: string;
-  /**
-   * Used for the input element.
-   */
-  input?: string;
-  /**
-   * Used for a wrapper around the thumb if checked is false.
-   */
-  off?: string;
-  /**
-   * Used for a wrapper around the thumb if checked is true.
-   */
-  on?: string;
-  /**
-   * Used for the ripple inside the switch.
-   */
-  ripple?: string;
-  /**
-   * Used for the text label element.
-   */
-  text?: string;
-  /**
-   * Used for the thumb element.
-   */
-  thumb?: string;
-}
-
-interface SwitchProps extends ReactToolbox.Props {
-  /**
-   * If true, the switch will be enabled.
-   * @default false
-   */
-  checked?: boolean;
-  /**
-   * If true, component will be disabled.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * The text string to use for the floating label element.
-   */
-  label?: string;
-  /**
-   * The text string used as name of the input.
-   */
-  name?: string;
-  /**
-   * Callback function that is fired when when the switch is blurred.
-   */
-  onBlur?: Function;
-  /**
-   * Callback function that is fired when the component's value changes.
-   */
-  onChange?: Function;
-  /**
-   * Callback function that is fired when the switch is focused.
-   */
-  onFocus?: Function;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: SwitchTheme;
-}
-
-export class Switch extends React.Component<SwitchProps, {}> { }
-
-export default Switch;
diff --git a/lib/switch/index.js b/lib/switch/index.js
deleted file mode 100644
index 6e717b50d..000000000
--- a/lib/switch/index.js
+++ /dev/null
@@ -1,36 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Switch = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _Switch = require('./Switch.js');
-
-var _identifiers = require('../identifiers.js');
-
-var _Thumb = require('./Thumb.js');
-
-var _Thumb2 = _interopRequireDefault(_Thumb);
-
-var _ripple = require('../ripple');
-
-var _ripple2 = _interopRequireDefault(_ripple);
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var applyTheme = function applyTheme(Component) {
-  return (0, _reactCssThemr.themr)(_identifiers.SWITCH, _theme2.default)(Component);
-};
-var ripple = (0, _ripple2.default)({ centered: true, spread: 2.6 });
-var ThemedThumb = applyTheme((0, _Thumb2.default)(ripple));
-var ThemedSwitch = applyTheme((0, _Switch.switchFactory)(ThemedThumb));
-
-exports.default = ThemedSwitch;
-exports.Switch = ThemedSwitch;
\ No newline at end of file
diff --git a/lib/switch/theme.scss b/lib/switch/theme.scss
deleted file mode 100644
index 08a5c2900..000000000
--- a/lib/switch/theme.scss
+++ /dev/null
@@ -1,123 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.field {
-  position: relative;
-  display: block;
-  height: auto;
-  margin-bottom: $switch-field-margin-bottom;
-  white-space: nowrap;
-  vertical-align: middle;
-}
-
-.text {
-  display: inline-block;
-  padding-left: $unit;
-  font-size: $switch-font-size;
-  line-height: $switch-total-height;
-  color: $switch-text-color;
-  white-space: normal;
-  vertical-align: top;
-}
-
-%switch {
-  position: relative;
-  display: inline-block;
-  width: $switch-track-length;
-  height: $switch-track-height;
-  margin-top: ($switch-total-height - $switch-track-height) / 2;
-  vertical-align: top;
-  cursor: pointer;
-  border-radius: $switch-track-height;
-}
-
-.thumb {
-  @include material-animation-default(.28s);
-  position: absolute;
-  top: ($switch-track-height - $switch-thumb-size) / 2;
-  width: $switch-thumb-size;
-  height: $switch-thumb-size;
-  cursor: pointer;
-  border-radius: 50%;
-  transition-property: left;
-
-  .ripple {
-    background-color: $switch-color;
-    opacity: .3;
-    transition-duration: $switch-ripple-duration;
-  }
-}
-
-.on {
-  @extend %switch;
-  background: $switch-track-on-color;
-  .thumb {
-    @include shadow-3dp();
-    left: $switch-track-length - $switch-thumb-size;
-    background: $switch-thumb-on-color;
-  }
-}
-
-.off {
-  @extend %switch;
-  background: $switch-track-off-color;
-  .thumb {
-    @include shadow-2dp();
-    left: 0;
-    background: $switch-thumb-off-color;
-  }
-  .ripple {
-    background: $switch-off-ripple-color;
-  }
-}
-
-%thumb-focus {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  box-sizing: border-box;
-  display: inline-block;
-  width: $switch-focus-init-size;
-  height: $switch-focus-init-size;
-  content: "";
-  background-color: transparent;
-  border-radius: 50%;
-  transform: translate(- $switch-focus-init-size / 2, - $switch-focus-init-size / 2);
-}
-
-.input {
-  width: 0;
-  height: 0;
-  overflow: hidden;
-  opacity: 0;
-  &:focus:not(:active) {
-    + .switch-on > .thumb:before {
-      @extend %thumb-focus;
-      background-color: $switch-on-focus-color;
-      box-shadow: 0 0 0 $switch-focus-diff $switch-on-focus-color;
-    }
-    + .switch-off > .thumb:before {
-      @extend %thumb-focus;
-      background-color: $switch-off-focus-color;
-      box-shadow: 0 0 0 $switch-focus-diff $switch-off-focus-color;
-    }
-  }
-}
-
-.disabled {
-  @extend .field;
-  .text {
-    color: $switch-disabled-text-color;
-  }
-  .on, .off {
-    cursor: auto;
-    background: $switch-disabled-track-color;
-  }
-  .thumb {
-    cursor: auto;
-    background-color: $switch-disabled-thumb-color;
-    border-color: transparent;
-  }
-}
diff --git a/lib/table/Table.js b/lib/table/Table.js
deleted file mode 100644
index 98536edec..000000000
--- a/lib/table/Table.js
+++ /dev/null
@@ -1,203 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Table = exports.tableFactory = undefined;
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Checkbox = require('../checkbox/Checkbox.js');
-
-var _Checkbox2 = _interopRequireDefault(_Checkbox);
-
-var _TableHead = require('./TableHead.js');
-
-var _TableHead2 = _interopRequireDefault(_TableHead);
-
-var _TableRow = require('./TableRow.js');
-
-var _TableRow2 = _interopRequireDefault(_TableRow);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(TableHead, TableRow) {
-  var Table = function (_Component) {
-    _inherits(Table, _Component);
-
-    function Table() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, Table);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Table.__proto__ || Object.getPrototypeOf(Table)).call.apply(_ref, [this].concat(args))), _this), _this.handleFullSelect = function () {
-        if (_this.props.onSelect) {
-          var _this$props = _this.props,
-              source = _this$props.source,
-              selected = _this$props.selected;
-
-          var newSelected = source.length === selected.length ? [] : source.map(function (i, idx) {
-            return idx;
-          });
-          _this.props.onSelect(newSelected);
-        }
-      }, _this.handleRowSelect = function (index) {
-        if (_this.props.onSelect) {
-          var newSelection = [].concat(_toConsumableArray(_this.props.selected));
-          if (_this.props.multiSelectable) {
-            (function () {
-              var position = _this.props.selected.indexOf(index);
-              newSelection = position !== -1 ? newSelection.filter(function (el, idx) {
-                return idx !== position;
-              }) : newSelection.concat([index]);
-            })();
-          } else {
-            newSelection = [index];
-          }
-          _this.props.onSelect(newSelection);
-        }
-      }, _this.handleRowChange = function (index, key, value) {
-        if (_this.props.onChange) {
-          _this.props.onChange(index, key, value);
-        }
-      }, _this.handleRowClick = function (index, event) {
-        if (_this.props.onRowClick) {
-          _this.props.onRowClick(index, event);
-        }
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(Table, [{
-      key: 'renderHead',
-      value: function renderHead() {
-        if (this.props.heading) {
-          var _props = this.props,
-              model = _props.model,
-              selected = _props.selected,
-              source = _props.source,
-              selectable = _props.selectable,
-              multiSelectable = _props.multiSelectable;
-
-          var isSelected = selected.length === source.length;
-          return _react2.default.createElement(TableHead, {
-            model: model,
-            onSelect: this.handleFullSelect,
-            selectable: selectable,
-            multiSelectable: multiSelectable,
-            selected: isSelected,
-            theme: this.props.theme
-          });
-        }
-      }
-    }, {
-      key: 'renderBody',
-      value: function renderBody() {
-        var _this2 = this;
-
-        var _props2 = this.props,
-            source = _props2.source,
-            model = _props2.model,
-            onChange = _props2.onChange,
-            selectable = _props2.selectable,
-            selected = _props2.selected,
-            theme = _props2.theme;
-
-        return _react2.default.createElement(
-          'tbody',
-          null,
-          source.map(function (data, index) {
-            return _react2.default.createElement(TableRow, {
-              data: data,
-              index: index,
-              key: index,
-              model: model,
-              onChange: onChange ? _this2.handleRowChange.bind(_this2) : undefined,
-              onSelect: _this2.handleRowSelect.bind(_this2, index),
-              onRowClick: _this2.handleRowClick.bind(_this2, index),
-              selectable: selectable,
-              selected: selected.indexOf(index) !== -1,
-              theme: theme
-            });
-          })
-        );
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var _props3 = this.props,
-            className = _props3.className,
-            theme = _props3.theme;
-
-        return _react2.default.createElement(
-          'table',
-          { 'data-react-toolbox': 'table', className: (0, _classnames2.default)(theme.table, className) },
-          this.renderHead(),
-          this.renderBody()
-        );
-      }
-    }]);
-
-    return Table;
-  }(_react.Component);
-
-  Table.propTypes = {
-    className: _react.PropTypes.string,
-    heading: _react.PropTypes.bool,
-    model: _react.PropTypes.object,
-    multiSelectable: _react.PropTypes.bool,
-    onChange: _react.PropTypes.func,
-    onRowClick: _react.PropTypes.func,
-    onSelect: _react.PropTypes.func,
-    selectable: _react.PropTypes.bool,
-    selected: _react.PropTypes.array,
-    source: _react.PropTypes.array,
-    theme: _react.PropTypes.shape({
-      table: _react.PropTypes.string
-    })
-  };
-  Table.defaultProps = {
-    className: '',
-    heading: true,
-    selectable: true,
-    multiSelectable: true,
-    selected: [],
-    source: []
-  };
-
-
-  return Table;
-};
-
-var TableHead = (0, _TableHead2.default)(_Checkbox2.default);
-var TableRow = (0, _TableRow2.default)(_Checkbox2.default);
-var Table = factory(TableHead, TableRow);
-
-exports.default = (0, _reactCssThemr.themr)(_identifiers.TABLE)(Table);
-exports.tableFactory = factory;
-exports.Table = Table;
\ No newline at end of file
diff --git a/lib/table/TableHead.js b/lib/table/TableHead.js
deleted file mode 100644
index 8a0ba5ca8..000000000
--- a/lib/table/TableHead.js
+++ /dev/null
@@ -1,75 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
-var factory = function factory(Checkbox) {
-  var TableHead = function TableHead(_ref) {
-    var model = _ref.model,
-        onSelect = _ref.onSelect,
-        selectable = _ref.selectable,
-        multiSelectable = _ref.multiSelectable,
-        selected = _ref.selected,
-        theme = _ref.theme;
-
-    var selectCell = void 0;
-    var contentCells = Object.keys(model).map(function (key) {
-      var name = model[key].title || key;
-      return _react2.default.createElement(
-        'th',
-        { key: key },
-        name
-      );
-    });
-
-    if (selectable && multiSelectable) {
-      selectCell = _react2.default.createElement(
-        'th',
-        { key: 'select', className: theme.selectable },
-        _react2.default.createElement(Checkbox, { onChange: onSelect, checked: selected })
-      );
-    } else if (selectable) {
-      selectCell = _react2.default.createElement('th', { key: 'select', className: theme.selectable });
-    }
-    return _react2.default.createElement(
-      'thead',
-      null,
-      _react2.default.createElement(
-        'tr',
-        null,
-        [selectCell].concat(_toConsumableArray(contentCells))
-      )
-    );
-  };
-
-  TableHead.propTypes = {
-    className: _react.PropTypes.string,
-    model: _react.PropTypes.object,
-    multiSelectable: _react.PropTypes.bool,
-    onSelect: _react.PropTypes.func,
-    selectable: _react.PropTypes.bool,
-    selected: _react.PropTypes.bool,
-    theme: _react.PropTypes.shape({
-      selectable: _react.PropTypes.string
-    })
-  };
-
-  TableHead.defaultProps = {
-    className: '',
-    model: {},
-    selected: false
-  };
-
-  return TableHead;
-};
-
-exports.default = factory;
\ No newline at end of file
diff --git a/lib/table/TableRow.js b/lib/table/TableRow.js
deleted file mode 100644
index c7140602d..000000000
--- a/lib/table/TableRow.js
+++ /dev/null
@@ -1,172 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _utils = require('../utils/utils');
-
-var _utils2 = _interopRequireDefault(_utils);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(Checkbox) {
-  var TableRow = function (_Component) {
-    _inherits(TableRow, _Component);
-
-    function TableRow() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, TableRow);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TableRow.__proto__ || Object.getPrototypeOf(TableRow)).call.apply(_ref, [this].concat(args))), _this), _this.handleInputChange = function (index, key, type, event) {
-        var value = void 0;
-        switch (type) {
-          case 'checkbox':
-            value = event.target.checked;
-            break;
-          // Handle contentEditable
-          case 'text':
-            value = event.target.textContent;
-            break;
-          default:
-            value = event.target.value;
-            break;
-        }
-
-        var onChange = _this.props.model[key].onChange || _this.props.onChange;
-        onChange(index, key, value);
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(TableRow, [{
-      key: 'renderSelectCell',
-      value: function renderSelectCell() {
-        if (this.props.selectable) {
-          return _react2.default.createElement(
-            'td',
-            { className: this.props.theme.selectable },
-            _react2.default.createElement(Checkbox, { checked: this.props.selected, onChange: this.props.onSelect })
-          );
-        }
-      }
-    }, {
-      key: 'renderCells',
-      value: function renderCells() {
-        var _this2 = this;
-
-        return Object.keys(this.props.model).map(function (key) {
-          return _react2.default.createElement(
-            'td',
-            { key: key, onClick: _this2.props.onRowClick },
-            _this2.renderCell(key)
-          );
-        });
-      }
-    }, {
-      key: 'renderCell',
-      value: function renderCell(key) {
-        var value = this.props.data[key];
-
-        // if the value is a valid React element return it directly, since it
-        // cannot be edited and should not be converted to a string...
-        if (_react2.default.isValidElement(value)) {
-          return value;
-        }
-
-        var onChange = this.props.model[key].onChange || this.props.onChange;
-        if (onChange) {
-          return this.renderInput(key, value);
-        } else if (value) {
-          return value.toString();
-        }
-      }
-    }, {
-      key: 'renderInput',
-      value: function renderInput(key, value) {
-        var index = this.props.index;
-        var inputType = _utils2.default.inputTypeForPrototype(this.props.model[key].type);
-        var inputValue = _utils2.default.prepareValueForInput(value, inputType);
-        var checked = inputType === 'checkbox' && value ? true : null;
-
-        if (inputType === 'text') {
-          return _react2.default.createElement('div', {
-            children: inputValue,
-            contentEditable: true,
-            suppressContentEditableWarning: true,
-            onInput: this.handleInputChange.bind(null, index, key, inputType)
-          });
-        }
-
-        return _react2.default.createElement('input', {
-          checked: checked,
-          onChange: this.handleInputChange.bind(null, index, key, inputType),
-          type: inputType,
-          value: inputValue
-        });
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var _classnames;
-
-        var className = (0, _classnames3.default)(this.props.theme.row, (_classnames = {}, _defineProperty(_classnames, this.props.theme.editable, this.props.onChange), _defineProperty(_classnames, this.props.theme.selected, this.props.selected), _classnames));
-
-        return _react2.default.createElement(
-          'tr',
-          { 'data-react-toolbox-table': 'row', className: className },
-          this.renderSelectCell(),
-          this.renderCells()
-        );
-      }
-    }]);
-
-    return TableRow;
-  }(_react.Component);
-
-  TableRow.propTypes = {
-    data: _react.PropTypes.object,
-    index: _react.PropTypes.number,
-    model: _react.PropTypes.object,
-    onChange: _react.PropTypes.func,
-    onRowClick: _react.PropTypes.func,
-    onSelect: _react.PropTypes.func,
-    selectable: _react.PropTypes.bool,
-    selected: _react.PropTypes.bool,
-    theme: _react.PropTypes.shape({
-      editable: _react.PropTypes.string,
-      row: _react.PropTypes.string,
-      selectable: _react.PropTypes.string,
-      selected: _react.PropTypes.string
-    })
-  };
-
-
-  return TableRow;
-};
-
-exports.default = factory;
\ No newline at end of file
diff --git a/lib/table/_config.scss b/lib/table/_config.scss
deleted file mode 100644
index 7ec3b5a2b..000000000
--- a/lib/table/_config.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-$table-row-height: 48px !default;
-$table-row-divider: solid 1px rgba(0,0,0,.12) !default;
-$table-row-offset: 1.8 * $unit !default;
-$table-row-highlight: #eee !default;
-$table-text-color: #757575 !default;
diff --git a/lib/table/index.d.ts b/lib/table/index.d.ts
deleted file mode 100644
index 044b5141b..000000000
--- a/lib/table/index.d.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface TableTheme {
-  /**
-   * It will be added to a row in case it is editable.
-   */
-  editable?: string;
-  /**
-   * Used for the row element.
-   */
-  row?: string;
-  /**
-   * It will be added to a row in case it is selectable.
-   */
-  selectable?: string;
-  /**
-   * Added to a row in case it is selected.
-   */
-  selected?: string;
-  /**
-   * Classname used for the root element.
-   */
-  table?: string;
-}
-
-interface TableProps extends ReactToolbox.Props {
-  /**
-   * If true, component will show a heading using model field names.
-   * @default true
-   */
-  heading?: boolean;
-  /**
-   * Object describing the data model that represents each object in the source.
-   */
-  model?: any;
-  /**
-   * Callback function that is fired when an item in a row changes. If set, rows are editable.
-   */
-  onChange?: Function;
-  /**
-   * Callback function invoked when the row selection changes.
-   */
-  onSelect?: Function;
-  /**
-   * If true, each row will display a checkbox to allow the user to select that one row.
-   * @default true
-   */
-  selectable?: boolean;
-  /**
-   * If true, the header and each row will display a checkbox to allow the user to select multiple rows.
-   * @default true
-   */
-  multiSelectable?: boolean;
-  /**
-   * Array of indexes of the items in the source that should appear as selected.
-   */
-  selected?: any[];
-  /**
-   * Array of objects representing each item to show.
-   */
-  source?: any[];
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: TableTheme;
-}
-
-export class Table extends React.Component<TableProps, {}> { }
-
-export default Table;
diff --git a/lib/table/index.js b/lib/table/index.js
deleted file mode 100644
index 994d96cb2..000000000
--- a/lib/table/index.js
+++ /dev/null
@@ -1,38 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Table = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _checkbox = require('../checkbox');
-
-var _Table = require('./Table.js');
-
-var _TableHead = require('./TableHead.js');
-
-var _TableHead2 = _interopRequireDefault(_TableHead);
-
-var _TableRow = require('./TableRow.js');
-
-var _TableRow2 = _interopRequireDefault(_TableRow);
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var applyTheme = function applyTheme(Component) {
-  return (0, _reactCssThemr.themr)(_identifiers.TABLE, _theme2.default)(Component);
-};
-var ThemedTableHead = applyTheme((0, _TableHead2.default)(_checkbox.Checkbox));
-var ThemedTableRow = applyTheme((0, _TableRow2.default)(_checkbox.Checkbox));
-var ThemedTable = applyTheme((0, _Table.tableFactory)(ThemedTableHead, ThemedTableRow));
-
-exports.default = ThemedTable;
-exports.Table = ThemedTable;
\ No newline at end of file
diff --git a/lib/table/theme.scss b/lib/table/theme.scss
deleted file mode 100644
index 232ed4268..000000000
--- a/lib/table/theme.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.table {
-  width: 100%;
-  font-size: $font-size-tiny;
-  color: $table-text-color;
-  text-align: left;
-  border-spacing: 0;
-  tr {
-    height: $table-row-height;
-    line-height: $table-row-height;
-  }
-  th {
-    font-weight: $font-weight-bold;
-    &:first-letter {
-      text-transform: capitalize;
-    }
-  }
-  th, td {
-    position: relative;
-    padding: 0 $table-row-offset;
-    border-bottom: $table-row-divider;
-    &.selectable {
-      width: 1.8 * $unit;
-      padding-right: 0;
-      > * {
-        margin: 0;
-      }
-    }
-  }
-}
-
-.row {
-  transition: background-color $animation-duration $animation-curve-default;
-  &:last-child {
-    td {
-      border-color: transparent;
-    }
-  }
-  > td {
-    > input {
-      display: block;
-      width: 100%;
-      background-color: transparent;
-      border: 0;
-    }
-  }
-}
-
-.selected, .row:hover {
-  background-color: $table-row-highlight;
-}
-
-.editable > * {
-  cursor: pointer;
-}
diff --git a/lib/tabs/Tab.js b/lib/tabs/Tab.js
deleted file mode 100644
index d077ec773..000000000
--- a/lib/tabs/Tab.js
+++ /dev/null
@@ -1,121 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Tab = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _font_icon = require('../font_icon');
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var Tab = function (_Component) {
-  _inherits(Tab, _Component);
-
-  function Tab() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    _classCallCheck(this, Tab);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Tab.__proto__ || Object.getPrototypeOf(Tab)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
-      if (!_this.props.disabled && _this.props.onClick) {
-        _this.props.onClick(event);
-      }
-    }, _temp), _possibleConstructorReturn(_this, _ret);
-  }
-
-  _createClass(Tab, [{
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate(prevProps) {
-      if (!prevProps.active && this.props.active && this.props.onActive) {
-        this.props.onActive();
-      }
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _classnames;
-
-      var _props = this.props,
-          onActive = _props.onActive,
-          active = _props.active,
-          activeClassName = _props.activeClassName,
-          className = _props.className,
-          disabled = _props.disabled,
-          hidden = _props.hidden,
-          label = _props.label,
-          icon = _props.icon,
-          theme = _props.theme,
-          other = _objectWithoutProperties(_props, ['onActive', 'active', 'activeClassName', 'className', 'disabled', 'hidden', 'label', 'icon', 'theme']);
-
-      var _className = (0, _classnames3.default)(theme.label, (_classnames = {}, _defineProperty(_classnames, theme.active, active), _defineProperty(_classnames, theme.hidden, hidden), _defineProperty(_classnames, theme.withText, label), _defineProperty(_classnames, theme.withIcon, icon), _defineProperty(_classnames, theme.disabled, disabled), _defineProperty(_classnames, activeClassName, active), _classnames), className);
-
-      return _react2.default.createElement(
-        'label',
-        _extends({}, other, { 'data-react-toolbox': 'tab', className: _className, onClick: this.handleClick }),
-        icon && _react2.default.createElement(_font_icon.FontIcon, { className: theme.icon, value: icon }),
-        label
-      );
-    }
-  }]);
-
-  return Tab;
-}(_react.Component);
-
-Tab.propTypes = {
-  active: _react.PropTypes.bool,
-  activeClassName: _react.PropTypes.string,
-  className: _react.PropTypes.string,
-  disabled: _react.PropTypes.bool,
-  hidden: _react.PropTypes.bool,
-  icon: _react.PropTypes.node,
-  label: _react.PropTypes.node,
-  onActive: _react.PropTypes.func,
-  onClick: _react.PropTypes.func,
-  theme: _react.PropTypes.shape({
-    active: _react.PropTypes.string,
-    disabled: _react.PropTypes.string,
-    hidden: _react.PropTypes.string,
-    label: _react.PropTypes.string
-  })
-};
-Tab.defaultProps = {
-  active: false,
-  className: '',
-  disabled: false,
-  hidden: false
-};
-exports.default = (0, _reactCssThemr.themr)(_identifiers.TABS)(Tab);
-exports.Tab = Tab;
\ No newline at end of file
diff --git a/lib/tabs/TabContent.js b/lib/tabs/TabContent.js
deleted file mode 100644
index 65bd7a6a6..000000000
--- a/lib/tabs/TabContent.js
+++ /dev/null
@@ -1,72 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TabContent = undefined;
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var TabContent = function (_Component) {
-  _inherits(TabContent, _Component);
-
-  function TabContent() {
-    _classCallCheck(this, TabContent);
-
-    return _possibleConstructorReturn(this, (TabContent.__proto__ || Object.getPrototypeOf(TabContent)).apply(this, arguments));
-  }
-
-  _createClass(TabContent, [{
-    key: 'render',
-    value: function render() {
-      var className = (0, _classnames3.default)(this.props.theme.tab, _defineProperty({}, this.props.theme.active, this.props.active), this.props.className);
-
-      return _react2.default.createElement(
-        'section',
-        { className: className, tabIndex: this.props.tabIndex },
-        this.props.children
-      );
-    }
-  }]);
-
-  return TabContent;
-}(_react.Component);
-
-TabContent.propTypes = {
-  active: _react.PropTypes.bool,
-  children: _react.PropTypes.node,
-  className: _react.PropTypes.string,
-  tabIndex: _react.PropTypes.number,
-  theme: _react.PropTypes.shape({
-    active: _react.PropTypes.string,
-    tab: _react.PropTypes.string
-  })
-};
-TabContent.defaultProps = {
-  active: false,
-  className: ''
-};
-exports.default = (0, _reactCssThemr.themr)(_identifiers.TABS)(TabContent);
-exports.TabContent = TabContent;
\ No newline at end of file
diff --git a/lib/tabs/Tabs.js b/lib/tabs/Tabs.js
deleted file mode 100644
index 2476ede93..000000000
--- a/lib/tabs/Tabs.js
+++ /dev/null
@@ -1,233 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Tabs = exports.tabsFactory = undefined;
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Tab = require('./Tab.js');
-
-var _Tab2 = _interopRequireDefault(_Tab);
-
-var _TabContent = require('./TabContent.js');
-
-var _TabContent2 = _interopRequireDefault(_TabContent);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(Tab, TabContent) {
-  var Tabs = function (_Component) {
-    _inherits(Tabs, _Component);
-
-    function Tabs() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, Tabs);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Tabs.__proto__ || Object.getPrototypeOf(Tabs)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-        pointer: {}
-      }, _this.handleHeaderClick = function (event) {
-        var idx = parseInt(event.currentTarget.id);
-        if (_this.props.onChange) _this.props.onChange(idx);
-      }, _this.handleResize = function () {
-        if (_this.resizeTimeout) {
-          clearTimeout(_this.resizeTimeout);
-        }
-        _this.resizeTimeout = setTimeout(_this.handleResizeEnd, 50);
-      }, _this.handleResizeEnd = function () {
-        _this.updatePointer(_this.props.index);
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(Tabs, [{
-      key: 'componentDidMount',
-      value: function componentDidMount() {
-        !this.props.disableAnimatedBottomBorder && this.updatePointer(this.props.index);
-        window.addEventListener('resize', this.handleResize);
-        this.handleResize();
-      }
-    }, {
-      key: 'componentWillReceiveProps',
-      value: function componentWillReceiveProps(nextProps) {
-        !this.props.disableAnimatedBottomBorder && this.updatePointer(nextProps.index);
-      }
-    }, {
-      key: 'componentWillUnmount',
-      value: function componentWillUnmount() {
-        window.removeEventListener('resize', this.handleResize);
-        clearTimeout(this.resizeTimeout);
-        clearTimeout(this.pointerTimeout);
-      }
-    }, {
-      key: 'parseChildren',
-      value: function parseChildren() {
-        var _this2 = this;
-
-        var headers = [];
-        var contents = [];
-
-        _react2.default.Children.forEach(this.props.children, function (item) {
-          if (item.type === Tab) {
-            headers.push(item);
-            if (item.props.children) {
-              contents.push(_react2.default.createElement(TabContent, { children: item.props.children, theme: _this2.props.theme }));
-            }
-          } else if (item.type === TabContent) {
-            contents.push(item);
-          }
-        });
-
-        return { headers: headers, contents: contents };
-      }
-    }, {
-      key: 'updatePointer',
-      value: function updatePointer(idx) {
-        var _this3 = this;
-
-        clearTimeout(this.pointerTimeout);
-        this.pointerTimeout = setTimeout(function () {
-          var startPoint = _this3.refs.tabs.getBoundingClientRect().left;
-          var label = _this3.refs.navigation.children[idx].getBoundingClientRect();
-          _this3.setState({
-            pointer: {
-              top: _this3.refs.navigation.getBoundingClientRect().height + 'px',
-              left: label.left - startPoint + 'px',
-              width: label.width + 'px'
-            }
-          });
-        }, 20);
-      }
-    }, {
-      key: 'renderHeaders',
-      value: function renderHeaders(headers) {
-        var _this4 = this;
-
-        return headers.map(function (item, idx) {
-          return _react2.default.cloneElement(item, {
-            id: idx,
-            key: idx,
-            theme: _this4.props.theme,
-            active: _this4.props.index === idx,
-            onClick: function onClick(event) {
-              _this4.handleHeaderClick(event);
-              item.props.onClick && item.props.onClick(event);
-            }
-          });
-        });
-      }
-    }, {
-      key: 'renderContents',
-      value: function renderContents(contents) {
-        var _this5 = this;
-
-        var contentElements = contents.map(function (item, idx) {
-          return _react2.default.cloneElement(item, {
-            key: idx,
-            theme: _this5.props.theme,
-            active: _this5.props.index === idx,
-            hidden: _this5.props.index !== idx && _this5.props.hideMode === 'display',
-            tabIndex: idx
-          });
-        });
-
-        if (this.props.hideMode === 'display') {
-          return contentElements;
-        }
-
-        return contentElements.filter(function (item, idx) {
-          return idx === _this5.props.index;
-        });
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var _classnames;
-
-        var _props = this.props,
-            className = _props.className,
-            theme = _props.theme,
-            fixed = _props.fixed,
-            inverse = _props.inverse;
-
-        var _parseChildren = this.parseChildren(),
-            headers = _parseChildren.headers,
-            contents = _parseChildren.contents;
-
-        var classes = (0, _classnames3.default)(theme.tabs, className, (_classnames = {}, _defineProperty(_classnames, theme.fixed, fixed), _defineProperty(_classnames, theme.inverse, inverse), _classnames));
-        return _react2.default.createElement(
-          'div',
-          { ref: 'tabs', 'data-react-toolbox': 'tabs', className: classes },
-          _react2.default.createElement(
-            'nav',
-            { className: theme.navigation, ref: 'navigation' },
-            this.renderHeaders(headers)
-          ),
-          _react2.default.createElement('span', { className: theme.pointer, style: this.state.pointer }),
-          this.renderContents(contents)
-        );
-      }
-    }]);
-
-    return Tabs;
-  }(_react.Component);
-
-  Tabs.propTypes = {
-    children: _react.PropTypes.node,
-    className: _react.PropTypes.string,
-    disableAnimatedBottomBorder: _react.PropTypes.bool,
-    fixed: _react.PropTypes.bool,
-    hideMode: _react.PropTypes.oneOf(['display', 'unmounted']),
-    index: _react.PropTypes.number,
-    inverse: _react.PropTypes.bool,
-    onChange: _react.PropTypes.func,
-    theme: _react.PropTypes.shape({
-      fixed: _react.PropTypes.string,
-      inverse: _react.PropTypes.string,
-      navigation: _react.PropTypes.string,
-      pointer: _react.PropTypes.string,
-      tabs: _react.PropTypes.string
-    })
-  };
-  Tabs.defaultProps = {
-    index: 0,
-    fixed: false,
-    inverse: false,
-    hideMode: 'unmounted'
-  };
-
-
-  return Tabs;
-};
-
-var Tabs = factory(_Tab2.default, _TabContent2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.TABS)(Tabs);
-exports.tabsFactory = factory;
-exports.Tabs = Tabs;
\ No newline at end of file
diff --git a/lib/tabs/__tests__/index.spec.js b/lib/tabs/__tests__/index.spec.js
deleted file mode 100644
index 32bca1a3b..000000000
--- a/lib/tabs/__tests__/index.spec.js
+++ /dev/null
@@ -1,176 +0,0 @@
-'use strict';
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _expect = require('expect');
-
-var _expect2 = _interopRequireDefault(_expect);
-
-var _testing = require('../../utils/testing');
-
-var _testing2 = _interopRequireDefault(_testing);
-
-var _reactAddonsTestUtils = require('react-addons-test-utils');
-
-var _reactAddonsTestUtils2 = _interopRequireDefault(_reactAddonsTestUtils);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactDom = require('react-dom');
-
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
-var _Tabs = require('../Tabs');
-
-var _Tabs2 = _interopRequireDefault(_Tabs);
-
-var _Tab = require('../Tab');
-
-var _Tab2 = _interopRequireDefault(_Tab);
-
-var _TabContent = require('../TabContent');
-
-var _TabContent2 = _interopRequireDefault(_TabContent);
-
-var _theme = require('../theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var getRenderedClassName = function getRenderedClassName(tree, TargetComponent) {
-  var rendered = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, TargetComponent);
-  return _reactDom2.default.findDOMNode(rendered).getAttribute('class');
-};
-
-describe('Tabs', function () {
-  var tabContents = void 0,
-      composition = void 0;
-
-  var Composition = function (_Component) {
-    _inherits(Composition, _Component);
-
-    function Composition() {
-      _classCallCheck(this, Composition);
-
-      var _this = _possibleConstructorReturn(this, (Composition.__proto__ || Object.getPrototypeOf(Composition)).call(this));
-
-      _this.state = { index: 0 };
-      return _this;
-    }
-
-    _createClass(Composition, [{
-      key: 'render',
-      value: function render() {
-        return _react2.default.createElement(
-          _Tabs2.default,
-          _extends({ index: this.state.index }, this.props),
-          _react2.default.createElement(
-            _Tab2.default,
-            { label: 'tab1' },
-            'tab1'
-          ),
-          _react2.default.createElement(
-            _Tab2.default,
-            { label: 'tab2' },
-            'tab2'
-          )
-        );
-      }
-    }]);
-
-    return Composition;
-  }(_react.Component);
-
-  it('defaults to only rendering the current tab', function () {
-    // initial render
-    composition = _testing2.default.renderComponent(Composition);
-
-    tabContents = _reactAddonsTestUtils2.default.scryRenderedComponentsWithType(composition, _TabContent2.default);
-
-    (0, _expect2.default)(tabContents.length).toEqual(1);
-    (0, _expect2.default)(tabContents[0].props.tabIndex).toEqual(0);
-
-    // after tab change
-    composition.setState({ index: 1 });
-    composition.forceUpdate();
-
-    tabContents = _reactAddonsTestUtils2.default.scryRenderedComponentsWithType(composition, _TabContent2.default);
-
-    (0, _expect2.default)(tabContents.length).toEqual(1);
-    (0, _expect2.default)(tabContents[0].props.tabIndex).toEqual(1);
-  });
-
-  it('renders inactive tabs when hideMode is set to display', function () {
-    // initial render
-    composition = _testing2.default.renderComponent(Composition, { hideMode: 'display' });
-
-    tabContents = _reactAddonsTestUtils2.default.scryRenderedComponentsWithType(composition, _TabContent2.default);
-
-    (0, _expect2.default)(tabContents.length).toEqual(2);
-
-    var tabOne = tabContents.find(function (tab) {
-      return tab.props.children === 'tab1';
-    });
-    var tabTwo = tabContents.find(function (tab) {
-      return tab.props.children === 'tab2';
-    });
-
-    (0, _expect2.default)(tabOne.props.hidden).toEqual(false);
-    (0, _expect2.default)(tabTwo.props.hidden).toEqual(true);
-
-    // after tab change
-    composition.setState({ index: 1 });
-    composition.forceUpdate();
-
-    tabContents = _reactAddonsTestUtils2.default.scryRenderedComponentsWithType(composition, _TabContent2.default);
-
-    (0, _expect2.default)(tabContents.length).toEqual(2);
-
-    tabOne = tabContents.find(function (tab) {
-      return tab.props.children === 'tab1';
-    });
-    tabTwo = tabContents.find(function (tab) {
-      return tab.props.children === 'tab2';
-    });
-
-    (0, _expect2.default)(tabOne.props.hidden).toEqual(true);
-    (0, _expect2.default)(tabTwo.props.hidden).toEqual(false);
-  });
-
-  describe('#render', function () {
-    it('does not use fixed by default', function () {
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Tabs2.default, { theme: _theme2.default }));
-      var className = getRenderedClassName(tree, _Tabs.Tabs);
-      (0, _expect2.default)(className).toNotContain(_theme2.default.fixed);
-    });
-
-    it('uses fixed when set', function () {
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Tabs2.default, { theme: _theme2.default, fixed: true }));
-      var className = getRenderedClassName(tree, _Tabs.Tabs);
-      (0, _expect2.default)(className).toContain(_theme2.default.fixed);
-    });
-
-    it('does not use inverse by default', function () {
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Tabs2.default, { theme: _theme2.default }));
-      var className = getRenderedClassName(tree, _Tabs.Tabs);
-      (0, _expect2.default)(className).toNotContain(_theme2.default.inverse);
-    });
-
-    it('uses inverse when set', function () {
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Tabs2.default, { theme: _theme2.default, inverse: true }));
-      var className = getRenderedClassName(tree, _Tabs.Tabs);
-      (0, _expect2.default)(className).toContain(_theme2.default.inverse);
-    });
-  });
-});
\ No newline at end of file
diff --git a/lib/tabs/_config.scss b/lib/tabs/_config.scss
deleted file mode 100644
index e5ee9c8e0..000000000
--- a/lib/tabs/_config.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-$tab-label-disabled-opacity: .2 !default;
-$tab-label-h-padding: 1.2 * $unit !default;
-$tab-label-height: 4.8 * $unit !default;
-$tab-icon-height: 2.4 * $unit !default;
-$tab-icon-margin-bottom: .8 * $unit !default;
-$tab-text-height: 1.4 * $unit !default;
-$tab-label-v-padding: ($tab-label-height - $tab-text-height) / 2 !default;
-$tab-navigation-border-color: $color-divider !default;
-$tab-pointer-color: $color-primary !default;
-$tab-pointer-height: .2 * $unit !default;
-$tab-text: $color-black !default;
-$tab-text-color: $tab-text !default;
-$tab-text-inactive-color: rgba($tab-text, .7) !default;
-
-// Inverse
-$tab-inverse-bar-color: $color-primary !default;
-$tab-inverse-pointer-color: $color-accent !default;
-$tab-inverse-text: $color-primary-contrast !default;
-$tab-inverse-text-color: $tab-inverse-text !default;
-$tab-inverse-text-inactive-color: rgba($tab-inverse-text, .7) !default;
diff --git a/lib/tabs/index.d.ts b/lib/tabs/index.d.ts
deleted file mode 100644
index 15e5ee75d..000000000
--- a/lib/tabs/index.d.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface TabsTheme {
-  /**
-   * Added to the active tab content and header.
-   */
-  active?: string;
-  /**
-   * Used for the navigation element.
-   */
-  navigation?: string;
-  /**
-   * Used for the moving underline element.
-   */
-  pointer?: string;
-  /**
-   * Used as a root classname for the component.
-   */
-  tabs?: string;
-  /**
-   * Used for the tab content element.
-   */
-  tab?: string;
-}
-
-interface TabsProps extends ReactToolbox.Props {
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * Disable the animation below the active tab.
-   * @default false
-   */
-  disableAnimatedBottomBorder?: boolean;
-  /**
-   * Current
-   * @default 0
-   */
-  index?: number;
-  /**
-   * Callback function that is fired when the tab changes.
-   */
-  onChange?: Function;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: TabsTheme;
-}
-
-export class Tabs extends React.Component<TabsProps, {}> { }
-
-export interface TabTheme {
-  /**
-   * Added to the navigation tab element in case it's active.
-   */
-  active?: string;
-  /**
-   * Added to the navigation tab element in case it's disabled.
-   */
-  disabled?: string;
-  /**
-   * Added to the navigation tab element in case it's hidden.
-   */
-  hidden?: string;
-  /**
-   * Added to the navigation tab element in case it's active.
-   */
-  label?: string;
-}
-
-interface TabProps extends ReactToolbox.Props {
-  /**
-   * If true, the current component is visible.
-   */
-  active?: boolean;
-  /**
-   * Additional class name to provide custom styling for the active tab.
-   */
-  activeClassName?: string;
-  /**
-   * If true, the current component is not clickable.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * If true, the current component is not visible.
-   * @default false
-   */
-  hidden?: boolean;
-  /**
-   * Label text for navigation header. Required.
-   */
-  label: string;
-  /**
-   * Callback function that is fired when the tab is activated.
-   */
-  onActive?: Function;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: TabTheme;
-}
-
-export class Tab extends React.Component<TabProps, {}> { }
diff --git a/lib/tabs/index.js b/lib/tabs/index.js
deleted file mode 100644
index a96995f5c..000000000
--- a/lib/tabs/index.js
+++ /dev/null
@@ -1,32 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Tabs = exports.Tab = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Tabs = require('./Tabs.js');
-
-var _TabContent = require('./TabContent.js');
-
-var _Tab = require('./Tab.js');
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var applyTheme = function applyTheme(Component) {
-  return (0, _reactCssThemr.themr)(_identifiers.TABS, _theme2.default)(Component);
-};
-var ThemedTabContent = applyTheme(_TabContent.TabContent);
-var ThemedTab = applyTheme(_Tab.Tab);
-var ThemedTabs = applyTheme((0, _Tabs.tabsFactory)(ThemedTab, ThemedTabContent));
-
-exports.Tab = ThemedTab;
-exports.Tabs = ThemedTabs;
\ No newline at end of file
diff --git a/lib/tabs/theme.scss b/lib/tabs/theme.scss
deleted file mode 100644
index 0f5eb602d..000000000
--- a/lib/tabs/theme.scss
+++ /dev/null
@@ -1,106 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.tabs {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-}
-
-.navigation {
-  display: flex;
-  flex-direction: row;
-  box-shadow: inset 0 -1px $tab-navigation-border-color;
-}
-
-.label {
-  padding: $tab-label-v-padding $tab-label-h-padding;
-  font-size: $tab-text-height;
-  font-weight: $font-weight-semi-bold;
-  line-height: 1;
-  color: $tab-text-inactive-color;
-  text-align: center;
-  text-transform: uppercase;
-  transition-timing-function: $animation-curve-default;
-  transition-duration: $animation-duration;
-  transition-property: box-shadow, color;
-  &.active {
-    color: $tab-text-color;
-  }
-  &.disabled {
-    opacity: $tab-label-disabled-opacity;
-  }
-  &:not(.disabled) {
-    cursor: pointer;
-  }
-  &.hidden {
-    display: none;
-  }
-
-  &.withIcon {
-    padding-top: ($tab-label-v-padding - $tab-icon-margin-bottom / 2);
-    padding-bottom: ($tab-label-v-padding - $tab-icon-margin-bottom / 2);
-  }
-
-  &.withText {
-    .icon {
-      margin-bottom: $tab-icon-margin-bottom;
-    }
-  }
-}
-
-.icon {
-  display: block;
-  height: $tab-icon-height;
-  margin: 0 auto;
-  line-height: $tab-icon-height;
-}
-
-.pointer {
-  position: absolute;
-  width: 0;
-  height: $tab-pointer-height;
-  margin-top: - $tab-pointer-height;
-  background-color: $tab-pointer-color;
-  transition-timing-function: $animation-curve-default;
-  transition-duration: $animation-duration;
-  transition-property: left, width;
-}
-
-.tab {
-  display: flex;
-  flex-direction: column;
-  padding: $tab-label-v-padding $tab-label-h-padding;
-  &:not(.active) {
-    display: none;
-  }
-  &.active {
-    display: flex;
-  }
-}
-
-.fixed {
-  .label {
-    flex: 1;
-    text-align: center;
-  }
-}
-
-.inverse {
-  .navigation {
-    background-color: $tab-inverse-bar-color;
-  }
-
-  .label {
-    color: $tab-inverse-text-inactive-color;
-    &.active {
-      color: $tab-inverse-text-color;
-    }
-  }
-
-  .pointer {
-    background-color: $tab-inverse-pointer-color;
-  }
-}
diff --git a/lib/time_picker/Clock.js b/lib/time_picker/Clock.js
deleted file mode 100644
index 8a3748ceb..000000000
--- a/lib/time_picker/Clock.js
+++ /dev/null
@@ -1,181 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactAddonsCssTransitionGroup = require('react-addons-css-transition-group');
-
-var _reactAddonsCssTransitionGroup2 = _interopRequireDefault(_reactAddonsCssTransitionGroup);
-
-var _animations = require('../animations');
-
-var _time = require('../utils/time.js');
-
-var _time2 = _interopRequireDefault(_time);
-
-var _ClockHours = require('./ClockHours.js');
-
-var _ClockHours2 = _interopRequireDefault(_ClockHours);
-
-var _ClockMinutes = require('./ClockMinutes.js');
-
-var _ClockMinutes2 = _interopRequireDefault(_ClockMinutes);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var Clock = function (_Component) {
-  _inherits(Clock, _Component);
-
-  function Clock() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    _classCallCheck(this, Clock);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Clock.__proto__ || Object.getPrototypeOf(Clock)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      center: { x: null, y: null },
-      radius: 0
-    }, _this.handleHourChange = function (hours) {
-      if (_this.props.time.getHours() !== hours) {
-        _this.props.onChange(_time2.default.setHours(_this.props.time, _this.adaptHourToFormat(hours)));
-      }
-    }, _this.handleMinuteChange = function (minutes) {
-      if (_this.props.time.getMinutes() !== minutes) {
-        _this.props.onChange(_time2.default.setMinutes(_this.props.time, minutes));
-      }
-    }, _this.handleCalculateShape = function () {
-      var _this$refs$placeholde = _this.refs.placeholder.getBoundingClientRect(),
-          top = _this$refs$placeholde.top,
-          left = _this$refs$placeholde.left,
-          width = _this$refs$placeholde.width;
-
-      _this.setState({
-        center: { x: left + width / 2 - window.pageXOffset, y: top + width / 2 - window.pageXOffset },
-        radius: width / 2
-      });
-    }, _temp), _possibleConstructorReturn(_this, _ret);
-  }
-
-  _createClass(Clock, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      var _this2 = this;
-
-      window.addEventListener('resize', this.handleCalculateShape);
-      setTimeout(function () {
-        _this2.handleCalculateShape();
-      });
-    }
-  }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      window.removeEventListener('resize', this.handleCalculateShape);
-    }
-  }, {
-    key: 'adaptHourToFormat',
-    value: function adaptHourToFormat(hour) {
-      if (this.props.format === 'ampm') {
-        if (_time2.default.getTimeMode(this.props.time) === 'pm') {
-          return hour < 12 ? hour + 12 : hour;
-        } else {
-          return hour === 12 ? 0 : hour;
-        }
-      } else {
-        return hour;
-      }
-    }
-  }, {
-    key: 'renderHours',
-    value: function renderHours() {
-      return _react2.default.createElement(_ClockHours2.default, {
-        center: this.state.center,
-        format: this.props.format,
-        onChange: this.handleHourChange,
-        radius: this.state.radius,
-        selected: this.props.time.getHours(),
-        spacing: this.state.radius * 0.18,
-        onHandMoved: this.props.onHandMoved,
-        theme: this.props.theme
-      });
-    }
-  }, {
-    key: 'renderMinutes',
-    value: function renderMinutes() {
-      return _react2.default.createElement(_ClockMinutes2.default, {
-        center: this.state.center,
-        onChange: this.handleMinuteChange,
-        radius: this.state.radius,
-        selected: this.props.time.getMinutes(),
-        spacing: this.state.radius * 0.18,
-        onHandMoved: this.props.onHandMoved,
-        theme: this.props.theme
-      });
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var theme = this.props.theme;
-
-      var animation = this.props.display === 'hours' ? _animations.ZoomOut : _animations.ZoomIn;
-      return _react2.default.createElement(
-        'div',
-        { 'data-react-toolbox': 'clock', className: theme.clock },
-        _react2.default.createElement(
-          'div',
-          { ref: 'placeholder', className: theme.placeholder, style: { height: this.state.radius * 2 } },
-          _react2.default.createElement(
-            _reactAddonsCssTransitionGroup2.default,
-            { transitionName: animation, transitionEnterTimeout: 500, transitionLeaveTimeout: 500 },
-            _react2.default.createElement(
-              'div',
-              { key: this.props.display, className: theme.clockWrapper, style: { height: this.state.radius * 2 } },
-              this.props.display === 'hours' ? this.renderHours() : null,
-              this.props.display === 'minutes' ? this.renderMinutes() : null
-            )
-          )
-        )
-      );
-    }
-  }]);
-
-  return Clock;
-}(_react.Component);
-
-Clock.propTypes = {
-  className: _react.PropTypes.string,
-  display: _react.PropTypes.oneOf(['hours', 'minutes']),
-  format: _react.PropTypes.oneOf(['24hr', 'ampm']),
-  onChange: _react.PropTypes.func,
-  onHandMoved: _react.PropTypes.func,
-  theme: _react.PropTypes.shape({
-    clock: _react.PropTypes.string,
-    clockWrapper: _react.PropTypes.string,
-    placeholder: _react.PropTypes.string
-  }),
-  time: _react.PropTypes.object
-};
-Clock.defaultProps = {
-  className: '',
-  display: 'hours',
-  format: '24hr',
-  time: new Date()
-};
-exports.default = Clock;
\ No newline at end of file
diff --git a/lib/time_picker/ClockFace.js b/lib/time_picker/ClockFace.js
deleted file mode 100644
index eacf9ec05..000000000
--- a/lib/time_picker/ClockFace.js
+++ /dev/null
@@ -1,122 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var Face = function (_Component) {
-  _inherits(Face, _Component);
-
-  function Face() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    _classCallCheck(this, Face);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Face.__proto__ || Object.getPrototypeOf(Face)).call.apply(_ref, [this].concat(args))), _this), _this.renderNumber = function (number, idx) {
-      var _this$props = _this.props,
-          active = _this$props.active,
-          radius = _this$props.radius,
-          spacing = _this$props.spacing,
-          theme = _this$props.theme,
-          twoDigits = _this$props.twoDigits;
-
-      return _react2.default.createElement(
-        'span',
-        {
-          className: (0, _classnames3.default)(theme.number, _defineProperty({}, theme.active, number === active)),
-          style: _this.numberStyle(radius - spacing, idx + 1),
-          key: number
-        },
-        twoDigits ? ('0' + number).slice(-2) : number
-      );
-    }, _temp), _possibleConstructorReturn(_this, _ret);
-  }
-
-  _createClass(Face, [{
-    key: 'numberStyle',
-    value: function numberStyle(rad, num) {
-      return {
-        position: 'absolute',
-        left: rad + rad * Math.sin(360 * (Math.PI / 180) / 12 * (num - 1)) + this.props.spacing,
-        top: rad - rad * Math.cos(360 * (Math.PI / 180) / 12 * (num - 1)) + this.props.spacing
-      };
-    }
-  }, {
-    key: 'faceStyle',
-    value: function faceStyle() {
-      return {
-        height: this.props.radius * 2,
-        width: this.props.radius * 2
-      };
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          numbers = _props.numbers,
-          onTouchStart = _props.onTouchStart,
-          onMouseDown = _props.onMouseDown,
-          theme = _props.theme;
-
-      return _react2.default.createElement(
-        'div',
-        {
-          ref: 'root',
-          className: theme.face,
-          onTouchStart: onTouchStart,
-          onMouseDown: onMouseDown,
-          style: this.faceStyle()
-        },
-        numbers.map(this.renderNumber)
-      );
-    }
-  }]);
-
-  return Face;
-}(_react.Component);
-
-Face.propTypes = {
-  active: _react.PropTypes.number,
-  numbers: _react.PropTypes.array,
-  radius: _react.PropTypes.number,
-  spacing: _react.PropTypes.number,
-  theme: _react.PropTypes.shape({
-    active: _react.PropTypes.string,
-    face: _react.PropTypes.string,
-    number: _react.PropTypes.string
-  }),
-  twoDigits: _react.PropTypes.bool
-};
-Face.defaultProps = {
-  active: null,
-  numbers: [],
-  radius: 0,
-  twoDigits: false
-};
-exports.default = Face;
\ No newline at end of file
diff --git a/lib/time_picker/ClockHand.js b/lib/time_picker/ClockHand.js
deleted file mode 100644
index d16bdaeab..000000000
--- a/lib/time_picker/ClockHand.js
+++ /dev/null
@@ -1,175 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _events = require('../utils/events.js');
-
-var _events2 = _interopRequireDefault(_events);
-
-var _prefixer = require('../utils/prefixer.js');
-
-var _prefixer2 = _interopRequireDefault(_prefixer);
-
-var _utils = require('../utils/utils.js');
-
-var _utils2 = _interopRequireDefault(_utils);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var Hand = function (_Component) {
-  _inherits(Hand, _Component);
-
-  function Hand() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    _classCallCheck(this, Hand);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Hand.__proto__ || Object.getPrototypeOf(Hand)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      knobWidth: 0
-    }, _this.handleMouseMove = function (event) {
-      _this.move(_events2.default.getMousePosition(event));
-    }, _this.handleTouchMove = function (event) {
-      _this.move(_events2.default.getTouchPosition(event));
-    }, _this.handleMouseUp = function () {
-      _this.end(_this.getMouseEventMap());
-    }, _this.handleTouchEnd = function () {
-      _this.end(_this.getTouchEventMap());
-    }, _temp), _possibleConstructorReturn(_this, _ret);
-  }
-
-  _createClass(Hand, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      var _this2 = this;
-
-      setTimeout(function () {
-        _this2.setState({ knobWidth: _this2.refs.knob.offsetWidth });
-      });
-    }
-  }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      _events2.default.removeEventsFromDocument(this.getMouseEventMap());
-      _events2.default.removeEventsFromDocument(this.getTouchEventMap());
-    }
-  }, {
-    key: 'getMouseEventMap',
-    value: function getMouseEventMap() {
-      return {
-        mousemove: this.handleMouseMove,
-        mouseup: this.handleMouseUp
-      };
-    }
-  }, {
-    key: 'getTouchEventMap',
-    value: function getTouchEventMap() {
-      return {
-        touchmove: this.handleTouchMove,
-        touchend: this.handleTouchEnd
-      };
-    }
-  }, {
-    key: 'mouseStart',
-    value: function mouseStart(event) {
-      _events2.default.addEventsToDocument(this.getMouseEventMap());
-      this.move(_events2.default.getMousePosition(event));
-    }
-  }, {
-    key: 'touchStart',
-    value: function touchStart(event) {
-      _events2.default.addEventsToDocument(this.getTouchEventMap());
-      this.move(_events2.default.getTouchPosition(event));
-      _events2.default.pauseEvent(event);
-    }
-  }, {
-    key: 'getPositionRadius',
-    value: function getPositionRadius(position) {
-      var x = this.props.origin.x - position.x;
-      var y = this.props.origin.y - position.y;
-      return Math.sqrt(x * x + y * y);
-    }
-  }, {
-    key: 'trimAngleToValue',
-    value: function trimAngleToValue(angle) {
-      return this.props.step * Math.round(angle / this.props.step);
-    }
-  }, {
-    key: 'positionToAngle',
-    value: function positionToAngle(position) {
-      return _utils2.default.angle360FromPositions(this.props.origin.x, this.props.origin.y, position.x, position.y);
-    }
-  }, {
-    key: 'end',
-    value: function end(evts) {
-      if (this.props.onMoved) this.props.onMoved();
-      _events2.default.removeEventsFromDocument(evts);
-    }
-  }, {
-    key: 'move',
-    value: function move(position) {
-      var degrees = this.trimAngleToValue(this.positionToAngle(position));
-      var radius = this.getPositionRadius(position);
-      if (this.props.onMove) this.props.onMove(degrees === 360 ? 0 : degrees, radius);
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var theme = this.props.theme;
-
-      var className = theme.hand + ' ' + this.props.className;
-      var handStyle = (0, _prefixer2.default)({
-        height: this.props.length - this.state.knobWidth / 2,
-        transform: 'rotate(' + this.props.angle + 'deg)'
-      });
-
-      return _react2.default.createElement(
-        'div',
-        { className: className, style: handStyle },
-        _react2.default.createElement('div', { ref: 'knob', className: theme.knob })
-      );
-    }
-  }]);
-
-  return Hand;
-}(_react.Component);
-
-Hand.propTypes = {
-  angle: _react.PropTypes.number,
-  className: _react.PropTypes.string,
-  length: _react.PropTypes.number,
-  onMove: _react.PropTypes.func,
-  onMoved: _react.PropTypes.func,
-  origin: _react.PropTypes.object,
-  step: _react.PropTypes.number,
-  theme: _react.PropTypes.shape({
-    hand: _react.PropTypes.string,
-    knob: _react.PropTypes.string
-  })
-};
-Hand.defaultProps = {
-  className: '',
-  angle: 0,
-  length: 0,
-  origin: {}
-};
-exports.default = Hand;
\ No newline at end of file
diff --git a/lib/time_picker/ClockHours.js b/lib/time_picker/ClockHours.js
deleted file mode 100644
index 365c27724..000000000
--- a/lib/time_picker/ClockHours.js
+++ /dev/null
@@ -1,149 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _utils = require('../utils/utils.js');
-
-var _utils2 = _interopRequireDefault(_utils);
-
-var _ClockHand = require('./ClockHand.js');
-
-var _ClockHand2 = _interopRequireDefault(_ClockHand);
-
-var _ClockFace = require('./ClockFace.js');
-
-var _ClockFace2 = _interopRequireDefault(_ClockFace);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
-var outerNumbers = [0].concat(_toConsumableArray(_utils2.default.range(13, 24)));
-var innerNumbers = [12].concat(_toConsumableArray(_utils2.default.range(1, 12)));
-var innerSpacing = 1.7;
-var step = 360 / 12;
-
-var Hours = function (_Component) {
-  _inherits(Hours, _Component);
-
-  function Hours() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    _classCallCheck(this, Hours);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Hours.__proto__ || Object.getPrototypeOf(Hours)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      inner: _this.props.format === '24hr' && _this.props.selected > 0 && _this.props.selected <= 12
-    }, _this.handleHandMove = function (degrees, radius) {
-      var currentInner = radius < _this.props.radius - _this.props.spacing * innerSpacing;
-      if (_this.props.format === '24hr' && _this.state.inner !== currentInner) {
-        _this.setState({ inner: currentInner }, function () {
-          _this.props.onChange(_this.valueFromDegrees(degrees));
-        });
-      } else {
-        _this.props.onChange(_this.valueFromDegrees(degrees));
-      }
-    }, _this.handleMouseDown = function (event) {
-      _this.refs.hand.mouseStart(event);
-    }, _this.handleTouchStart = function (event) {
-      _this.refs.hand.touchStart(event);
-    }, _temp), _possibleConstructorReturn(_this, _ret);
-  }
-
-  _createClass(Hours, [{
-    key: 'valueFromDegrees',
-    value: function valueFromDegrees(degrees) {
-      if (this.props.format === 'ampm' || this.props.format === '24hr' && this.state.inner) {
-        return innerNumbers[degrees / step];
-      } else {
-        return outerNumbers[degrees / step];
-      }
-    }
-  }, {
-    key: 'renderInnerFace',
-    value: function renderInnerFace(innerRadius) {
-      if (this.props.format === '24hr') {
-        return _react2.default.createElement(_ClockFace2.default, {
-          onTouchStart: this.handleTouchStart,
-          onMouseDown: this.handleMouseDown,
-          numbers: innerNumbers,
-          spacing: this.props.spacing,
-          radius: innerRadius,
-          theme: this.props.theme,
-          active: this.props.selected
-        });
-      }
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          format = _props.format,
-          selected = _props.selected,
-          radius = _props.radius,
-          spacing = _props.spacing,
-          center = _props.center,
-          onHandMoved = _props.onHandMoved;
-
-      var is24hr = format === '24hr';
-
-      return _react2.default.createElement(
-        'div',
-        null,
-        _react2.default.createElement(_ClockFace2.default, {
-          onTouchStart: this.handleTouchStart,
-          onMouseDown: this.handleMouseDown,
-          numbers: is24hr ? outerNumbers : innerNumbers,
-          spacing: spacing,
-          radius: radius,
-          twoDigits: is24hr,
-          active: is24hr ? selected : selected % 12 || 12,
-          theme: this.props.theme
-        }),
-        this.renderInnerFace(radius - spacing * innerSpacing),
-        _react2.default.createElement(_ClockHand2.default, { ref: 'hand',
-          angle: selected * step,
-          length: (this.state.inner ? radius - spacing * innerSpacing : radius) - spacing,
-          onMove: this.handleHandMove,
-          theme: this.props.theme,
-          onMoved: onHandMoved,
-          origin: center,
-          step: step
-        })
-      );
-    }
-  }]);
-
-  return Hours;
-}(_react.Component);
-
-Hours.propTypes = {
-  center: _react.PropTypes.object,
-  format: _react.PropTypes.oneOf(['24hr', 'ampm']),
-  onChange: _react.PropTypes.func,
-  onHandMoved: _react.PropTypes.func,
-  radius: _react.PropTypes.number,
-  selected: _react.PropTypes.number,
-  spacing: _react.PropTypes.number,
-  theme: _react.PropTypes.object
-};
-exports.default = Hours;
\ No newline at end of file
diff --git a/lib/time_picker/ClockMinutes.js b/lib/time_picker/ClockMinutes.js
deleted file mode 100644
index 0b21e74a5..000000000
--- a/lib/time_picker/ClockMinutes.js
+++ /dev/null
@@ -1,105 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _utils = require('../utils/utils.js');
-
-var _utils2 = _interopRequireDefault(_utils);
-
-var _ClockHand = require('./ClockHand.js');
-
-var _ClockHand2 = _interopRequireDefault(_ClockHand);
-
-var _ClockFace = require('./ClockFace.js');
-
-var _ClockFace2 = _interopRequireDefault(_ClockFace);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var minutes = _utils2.default.range(0, 60, 5);
-var step = 360 / 60;
-
-var Minutes = function (_Component) {
-  _inherits(Minutes, _Component);
-
-  function Minutes() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    _classCallCheck(this, Minutes);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Minutes.__proto__ || Object.getPrototypeOf(Minutes)).call.apply(_ref, [this].concat(args))), _this), _this.handleHandMove = function (degrees) {
-      _this.props.onChange(degrees / step);
-    }, _this.handleMouseDown = function (event) {
-      _this.refs.hand.mouseStart(event);
-    }, _this.handleTouchStart = function (event) {
-      _this.refs.hand.touchStart(event);
-    }, _temp), _possibleConstructorReturn(_this, _ret);
-  }
-
-  _createClass(Minutes, [{
-    key: 'render',
-    value: function render() {
-      return _react2.default.createElement(
-        'div',
-        null,
-        _react2.default.createElement(_ClockFace2.default, {
-          onTouchStart: this.handleTouchStart,
-          onMouseDown: this.handleMouseDown,
-          numbers: minutes,
-          spacing: this.props.spacing,
-          radius: this.props.radius,
-          active: this.props.selected,
-          theme: this.props.theme,
-          twoDigits: true
-        }),
-        _react2.default.createElement(_ClockHand2.default, { ref: 'hand',
-          className: minutes.indexOf(this.props.selected) === -1 ? this.props.theme.small : '',
-          angle: this.props.selected * step,
-          length: this.props.radius - this.props.spacing,
-          onMove: this.handleHandMove,
-          origin: this.props.center,
-          theme: this.props.theme,
-          step: step
-        })
-      );
-    }
-  }]);
-
-  return Minutes;
-}(_react.Component);
-
-Minutes.propTypes = {
-  center: _react.PropTypes.object,
-  onChange: _react.PropTypes.func,
-  radius: _react.PropTypes.number,
-  selected: _react.PropTypes.number,
-  spacing: _react.PropTypes.number,
-  theme: _react.PropTypes.shape({
-    small: _react.PropTypes.string
-  })
-};
-Minutes.defaultProps = {
-  selected: 0,
-  onChange: null
-};
-exports.default = Minutes;
\ No newline at end of file
diff --git a/lib/time_picker/TimePicker.js b/lib/time_picker/TimePicker.js
deleted file mode 100644
index b71e6d9ea..000000000
--- a/lib/time_picker/TimePicker.js
+++ /dev/null
@@ -1,196 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TimePicker = exports.timePickerFactory = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _events = require('../utils/events.js');
-
-var _events2 = _interopRequireDefault(_events);
-
-var _time = require('../utils/time.js');
-
-var _time2 = _interopRequireDefault(_time);
-
-var _Dialog = require('../dialog/Dialog.js');
-
-var _Dialog2 = _interopRequireDefault(_Dialog);
-
-var _Input = require('../input/Input.js');
-
-var _Input2 = _interopRequireDefault(_Input);
-
-var _TimePickerDialog = require('./TimePickerDialog.js');
-
-var _TimePickerDialog2 = _interopRequireDefault(_TimePickerDialog);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(TimePickerDialog, Input) {
-  var TimePicker = function (_Component) {
-    _inherits(TimePicker, _Component);
-
-    function TimePicker() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, TimePicker);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TimePicker.__proto__ || Object.getPrototypeOf(TimePicker)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-        active: _this.props.active
-      }, _this.handleDismiss = function () {
-        _this.setState({ active: false });
-        if (_this.props.onDismiss) {
-          _this.props.onDismiss();
-        }
-      }, _this.handleInputFocus = function (event) {
-        _events2.default.pauseEvent(event);
-        _this.setState({ active: true });
-      }, _this.handleInputBlur = function (event) {
-        _events2.default.pauseEvent(event);
-        _this.setState({ active: false });
-      }, _this.handleInputClick = function (event) {
-        _events2.default.pauseEvent(event);
-        _this.setState({ active: true });
-        if (_this.props.onClick) _this.props.onClick(event);
-      }, _this.handleInputKeyPress = function (event) {
-        if (event.charCode === 13) {
-          _events2.default.pauseEvent(event);
-          _this.setState({ active: true });
-        }
-        if (_this.props.onKeyPress) _this.props.onKeyPress(event);
-      }, _this.handleSelect = function (value, event) {
-        if (_this.props.onChange) _this.props.onChange(value, event);
-        _this.setState({ active: false });
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(TimePicker, [{
-      key: 'componentWillReceiveProps',
-      value: function componentWillReceiveProps(nextProps) {
-        if (nextProps.active !== this.props.active && this.state.active !== nextProps.active) {
-          this.setState({ active: nextProps.active });
-        }
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var _props = this.props,
-            active = _props.active,
-            onDismiss = _props.onDismiss,
-            cancelLabel = _props.cancelLabel,
-            format = _props.format,
-            inputClassName = _props.inputClassName,
-            okLabel = _props.okLabel,
-            onEscKeyDown = _props.onEscKeyDown,
-            onOverlayClick = _props.onOverlayClick,
-            readonly = _props.readonly,
-            value = _props.value,
-            others = _objectWithoutProperties(_props, ['active', 'onDismiss', 'cancelLabel', 'format', 'inputClassName', 'okLabel', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'value']);
-
-        var formattedTime = value ? _time2.default.formatTime(value, format) : '';
-        return _react2.default.createElement(
-          'div',
-          { 'data-react-toolbox': 'time-picker' },
-          _react2.default.createElement(Input, _extends({}, others, {
-            className: (0, _classnames3.default)(this.props.theme.input, _defineProperty({}, inputClassName, inputClassName)),
-            disabled: readonly,
-            error: this.props.error,
-            label: this.props.label,
-            name: this.props.name,
-            onKeyPress: this.handleInputKeyPress,
-            onClick: this.handleInputClick,
-            readOnly: true,
-            type: 'text',
-            value: formattedTime
-          })),
-          _react2.default.createElement(TimePickerDialog, {
-            active: this.state.active,
-            cancelLabel: cancelLabel,
-            className: this.props.className,
-            format: format,
-            name: this.props.name,
-            okLabel: okLabel,
-            onDismiss: this.handleDismiss,
-            onEscKeyDown: onEscKeyDown,
-            onOverlayClick: onOverlayClick,
-            onSelect: this.handleSelect,
-            theme: this.props.theme,
-            value: this.props.value
-          })
-        );
-      }
-    }]);
-
-    return TimePicker;
-  }(_react.Component);
-
-  TimePicker.propTypes = {
-    active: _react.PropTypes.bool,
-    cancelLabel: _react.PropTypes.string,
-    className: _react.PropTypes.string,
-    error: _react.PropTypes.string,
-    format: _react.PropTypes.oneOf(['24hr', 'ampm']),
-    inputClassName: _react.PropTypes.string,
-    label: _react.PropTypes.string,
-    name: _react.PropTypes.string,
-    okLabel: _react.PropTypes.string,
-    onChange: _react.PropTypes.func,
-    onClick: _react.PropTypes.func,
-    onDismiss: _react.PropTypes.func,
-    onEscKeyDown: _react.PropTypes.func,
-    onKeyPress: _react.PropTypes.func,
-    onOverlayClick: _react.PropTypes.func,
-    readonly: _react.PropTypes.bool,
-    theme: _react.PropTypes.shape({
-      input: _react.PropTypes.string
-    }),
-    value: _react.PropTypes.object
-  };
-  TimePicker.defaultProps = {
-    active: false,
-    className: '',
-    format: '24hr'
-  };
-
-
-  return TimePicker;
-};
-
-var TimePickerDialog = (0, _TimePickerDialog2.default)(_Dialog2.default);
-var TimePicker = factory(TimePickerDialog, _Input2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.TIME_PICKER)(TimePicker);
-exports.timePickerFactory = factory;
-exports.TimePicker = TimePicker;
\ No newline at end of file
diff --git a/lib/time_picker/TimePickerDialog.js b/lib/time_picker/TimePickerDialog.js
deleted file mode 100644
index 5ff0ca659..000000000
--- a/lib/time_picker/TimePickerDialog.js
+++ /dev/null
@@ -1,202 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _time = require('../utils/time.js');
-
-var _time2 = _interopRequireDefault(_time);
-
-var _Clock = require('./Clock.js');
-
-var _Clock2 = _interopRequireDefault(_Clock);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(Dialog) {
-  var TimePickerDialog = function (_Component) {
-    _inherits(TimePickerDialog, _Component);
-
-    function TimePickerDialog() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, TimePickerDialog);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TimePickerDialog.__proto__ || Object.getPrototypeOf(TimePickerDialog)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-        display: 'hours',
-        displayTime: new Date(_this.props.value.getTime())
-      }, _this.handleClockChange = function (value) {
-        _this.setState({ displayTime: value });
-      }, _this.handleSelect = function (event) {
-        _this.props.onSelect(_this.state.displayTime, event);
-      }, _this.toggleTimeMode = function () {
-        _this.setState({ displayTime: _time2.default.toggleTimeMode(_this.state.displayTime) });
-      }, _this.handleHandMoved = function () {
-        if (_this.state.display === 'hours') _this.setState({ display: 'minutes' });
-      }, _this.switchDisplay = function (event) {
-        _this.setState({ display: event.target.id });
-      }, _this.actions = [{ label: _this.props.cancelLabel, className: _this.props.theme.button, onClick: _this.props.onDismiss }, { label: _this.props.okLabel, className: _this.props.theme.button, name: _this.props.name, onClick: _this.handleSelect }], _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(TimePickerDialog, [{
-      key: 'componentWillUpdate',
-      value: function componentWillUpdate(nextProps) {
-        if (nextProps.value.getTime() !== this.state.displayTime.getTime()) {
-          this.setState({ displayTime: new Date(nextProps.value.getTime()) });
-        }
-      }
-    }, {
-      key: 'componentDidUpdate',
-      value: function componentDidUpdate(prevProps) {
-        if (!prevProps.active && this.props.active) {
-          setTimeout(this.refs.clock.handleCalculateShape, 1000);
-        }
-      }
-    }, {
-      key: 'formatHours',
-      value: function formatHours() {
-        if (this.props.format === 'ampm') {
-          return this.state.displayTime.getHours() % 12 || 12;
-        } else {
-          return this.state.displayTime.getHours();
-        }
-      }
-    }, {
-      key: 'renderAMPMLabels',
-      value: function renderAMPMLabels() {
-        var theme = this.props.theme;
-
-        if (this.props.format === 'ampm') {
-          return _react2.default.createElement(
-            'div',
-            { className: theme.ampm },
-            _react2.default.createElement(
-              'span',
-              { className: theme.am, onClick: this.toggleTimeMode },
-              'AM'
-            ),
-            _react2.default.createElement(
-              'span',
-              { className: theme.pm, onClick: this.toggleTimeMode },
-              'PM'
-            )
-          );
-        }
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var theme = this.props.theme;
-
-        var display = this.state.display + 'Display';
-        var format = _time2.default.getTimeMode(this.state.displayTime) + 'Format';
-        var className = (0, _classnames2.default)([theme.dialog, theme[display], theme[format]], this.props.className);
-        return _react2.default.createElement(
-          Dialog,
-          {
-            actions: this.actions,
-            active: this.props.active,
-            className: className,
-            onEscKeyDown: this.props.onEscKeyDown,
-            onOverlayClick: this.props.onOverlayClick
-          },
-          _react2.default.createElement(
-            'header',
-            { className: theme.header },
-            _react2.default.createElement(
-              'span',
-              { id: 'hours', className: theme.hours, onClick: this.switchDisplay },
-              ('0' + this.formatHours()).slice(-2)
-            ),
-            _react2.default.createElement(
-              'span',
-              { className: theme.separator },
-              ':'
-            ),
-            _react2.default.createElement(
-              'span',
-              { id: 'minutes', className: theme.minutes, onClick: this.switchDisplay },
-              ('0' + this.state.displayTime.getMinutes()).slice(-2)
-            ),
-            this.renderAMPMLabels()
-          ),
-          _react2.default.createElement(_Clock2.default, {
-            ref: 'clock',
-            display: this.state.display,
-            format: this.props.format,
-            onChange: this.handleClockChange,
-            onHandMoved: this.handleHandMoved,
-            theme: this.props.theme,
-            time: this.state.displayTime
-          })
-        );
-      }
-    }]);
-
-    return TimePickerDialog;
-  }(_react.Component);
-
-  TimePickerDialog.propTypes = {
-    active: _react.PropTypes.bool,
-    cancelLabel: _react.PropTypes.string,
-    className: _react.PropTypes.string,
-    format: _react.PropTypes.oneOf(['24hr', 'ampm']),
-    name: _react.PropTypes.string,
-    okLabel: _react.PropTypes.string,
-    onDismiss: _react.PropTypes.func,
-    onEscKeyDown: _react.PropTypes.func,
-    onOverlayClick: _react.PropTypes.func,
-    onSelect: _react.PropTypes.func,
-    theme: _react.PropTypes.shape({
-      am: _react.PropTypes.string,
-      amFormat: _react.PropTypes.string,
-      ampm: _react.PropTypes.string,
-      button: _react.PropTypes.string,
-      dialog: _react.PropTypes.string,
-      header: _react.PropTypes.string,
-      hours: _react.PropTypes.string,
-      hoursDisplay: _react.PropTypes.string,
-      minutes: _react.PropTypes.string,
-      minutesDisplay: _react.PropTypes.string,
-      pm: _react.PropTypes.string,
-      pmFormat: _react.PropTypes.string,
-      separator: _react.PropTypes.string
-    }),
-    value: _react.PropTypes.object
-  };
-  TimePickerDialog.defaultProps = {
-    active: false,
-    cancelLabel: 'Cancel',
-    format: '24hr',
-    okLabel: 'Ok',
-    value: new Date()
-  };
-
-
-  return TimePickerDialog;
-};
-
-exports.default = factory;
\ No newline at end of file
diff --git a/lib/time_picker/_config.scss b/lib/time_picker/_config.scss
deleted file mode 100644
index 51fbd509b..000000000
--- a/lib/time_picker/_config.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-$timepicker-header-font-size: 5.2 * $unit !default;
-$timepicker-header-padding: $unit !default;
-$timepicker-ampm-font-size: 1.6 * $unit !default;
-$timepicker-primary: $color-primary !default;
-$timepicker-primary-contrast: $color-primary-contrast !default;
-$timepicker-primary-dark: $color-primary-dark !default;
-$timepicker-primary-color: $timepicker-primary !default;
-$timepicker-primary-hover-color: rgba($timepicker-primary, .2) !default;
-$timepicker-primary-contrast-color: $timepicker-primary-contrast !default;
-$timepicker-primary-dark-color: $timepicker-primary-dark !default;
-$timepicker-ampm-height: 2.2 * $unit !default;
-$timepicker-ampm-width: 4 * $unit !default;
-$timepicker-dialog-width: 30 * $unit !default;
-
-$clock-padding: 1.5 * $unit 2 * $unit !default;
-$clock-primary: $color-primary !default;
-$clock-primary-contrast: $color-primary-contrast !default;
-$clock-primary-dark: $color-primary-dark !default;
-$clock-primary-color: $clock-primary !default;
-$clock-primary-hover-color: rgba($clock-primary, .2) !default;
-$clock-primary-contrast-color: $clock-primary-contrast !default;
-$clock-primary-dark-color: $clock-primary-dark !default;
-$clock-number-size: 2 * $unit !default;
-$clock-hand-width: .4 * $unit !default;
-$clock-hand-dot-size: 1 * $unit !default;
-$clock-knob-size: 3.4 * $unit !default;
-$clock-knob-small-size: 1.2 * $unit !default;
diff --git a/lib/time_picker/index.d.ts b/lib/time_picker/index.d.ts
deleted file mode 100644
index 63f6237e3..000000000
--- a/lib/time_picker/index.d.ts
+++ /dev/null
@@ -1,137 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface TimePickerTheme {
-  /**
-   * Added to the number which is active in clock face.
-   */
-  active?: string;
-  /**
-   * AM label in dialog header when mode is AM/PM.
-   */
-  am?: string;
-  /**
-   * Added to the dialog when the selected format is AM.
-   */
-  amFormat?: string;
-  /**
-   * Wrapper for AM and PM labels in header when mode is AM/PM.
-   */
-  ampm?: string;
-  /**
-   * Used for buttons inside the dialog of the picker.
-   */
-  button?: string;
-  /**
-   * Clock root class element.
-   */
-  clock?: string;
-  /**
-   * Wrapper for the proper positioning of the clock.
-   */
-  clockWrapper?: string;
-  /**
-   * Used for the dialog component.
-   */
-  dialog?: string;
-  /**
-   * Used to style the clock face.
-   */
-  face?: string;
-  /**
-   * Used for the clock's hand.
-   */
-  hand?: string;
-  /**
-   * Dialog header wrapper class.
-   */
-  header?: string;
-  /**
-   * Used for hours in dialog header.
-   */
-  hours?: string;
-  /**
-   * Added to the dialog hours are displayed.
-   */
-  hoursDisplay?: string;
-  /**
-   * Used for Input element that opens the picker.
-   */
-  input?: string;
-  /**
-   * Used for the knob of the hand.
-   */
-  knob?: string;
-  /**
-   * Used for minutes in dialog header.
-   */
-  minutes?: string;
-  /**
-   * Added to the dialog minutes are displayed.
-   */
-  minutesDisplay?: string;
-  /**
-   * Each of the numbers in the clock's face.
-   */
-  number?: string;
-  /**
-   * Placeholder for the clock inside the dialog (inner wrapper).
-   */
-  placeholder?: string;
-  /**
-   * PM label in dialog header when mode is AM/PM.
-   */
-  pm?: string;
-  /**
-   * Added to the dialog when the selected format is PM.
-   */
-  pmFormat?: string;
-  /**
-   * Is the : separator between hours and minutes in dialog header.
-   */
-  separator?: string;
-  /**
-   * Added to the knob when no round number is selected.
-   */
-  small?: string;
-}
-
-interface TimePickerProps {
-  /**
-   * Provide error text which will be displayed under the field.
-   */
-  error?: string;
-  /**
-   * A key to identify an Icon from Material Design Icons or a custom Icon Element.
-   */
-  icon?: React.ReactNode | string;
-  /**
-   * This class will be applied to Input component of TimePicker.
-   */
-  inputClassName?: string;
-  /**
-   * Format to display the clock. It can be 24hr or ampm.
-   * @default false
-   */
-  format?: "24hr" | "ampm";
-  /**
-   * The text string to use for the floating label element in the input component.
-   */
-  label?: string;
-  /**
-   * Callback called when the picker value is changed.
-   */
-  onChange?: Function;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: TimePickerTheme;
-  /**
-   * Datetime object with currrently selected time.
-   */
-  value?: Date;
-}
-
-export class TimePicker extends React.Component<TimePickerProps, {}> { }
-
-export default TimePicker;
diff --git a/lib/time_picker/index.js b/lib/time_picker/index.js
deleted file mode 100644
index 8753ebd3e..000000000
--- a/lib/time_picker/index.js
+++ /dev/null
@@ -1,35 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TimePicker = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _TimePicker = require('./TimePicker.js');
-
-var _TimePickerDialog = require('./TimePickerDialog.js');
-
-var _TimePickerDialog2 = _interopRequireDefault(_TimePickerDialog);
-
-var _dialog = require('../dialog');
-
-var _dialog2 = _interopRequireDefault(_dialog);
-
-var _input = require('../input');
-
-var _input2 = _interopRequireDefault(_input);
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var TimePickerDialog = (0, _TimePickerDialog2.default)(_dialog2.default);
-var ThemedTimePicker = (0, _reactCssThemr.themr)(_identifiers.TIME_PICKER, _theme2.default)((0, _TimePicker.timePickerFactory)(TimePickerDialog, _input2.default));
-exports.default = ThemedTimePicker;
-exports.TimePicker = ThemedTimePicker;
\ No newline at end of file
diff --git a/lib/time_picker/theme.scss b/lib/time_picker/theme.scss
deleted file mode 100644
index 328cdc43e..000000000
--- a/lib/time_picker/theme.scss
+++ /dev/null
@@ -1,168 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.input:not(.disabled) > .inputElement {
-  cursor: pointer;
-}
-
-.header {
-  position: relative;
-  width: 100%;
-  padding: $timepicker-header-padding;
-  font-size: $timepicker-header-font-size;
-  color: $timepicker-primary-contrast-color;
-  text-align: center;
-  background: $timepicker-primary-color;
-}
-
-.hours, .minutes {
-  display: inline-block;
-  cursor: pointer;
-  opacity: .6;
-}
-
-.separator {
-  margin: 0 $timepicker-header-padding / 2;
-  opacity: .6;
-}
-
-.ampm {
-  position: absolute;
-  top: 50%;
-  right: 2 * $unit;
-  width: $timepicker-ampm-width;
-  height: $timepicker-ampm-height * 2;
-  margin-top: - $timepicker-ampm-height;
-  font-size: $timepicker-ampm-font-size;
-  line-height: $timepicker-ampm-height;
-  text-align: center;
-}
-
-.am, .pm {
-  display: block;
-  cursor: pointer;
-  opacity: .6;
-}
-
-.dialog {
-  width: $timepicker-dialog-width;
-  > [role="body"] {
-    padding: 0;
-    overflow-y: visible;
-  }
-  > [role="navigation"] > .button {
-    color: $timepicker-primary-color;
-    &:hover {
-      background: $timepicker-primary-hover-color;
-    }
-    &:focus:not(:active) {
-      background: $timepicker-primary-hover-color;
-    }
-  }
-  &.hoursDisplay .hours, &.minutesDisplay .minutes, &.amFormat .am,
-  &.pmFormat .pm {
-    opacity: 1;
-  }
-}
-
-.clock {
-  padding: $clock-padding;
-}
-
-.placeholder {
-  position: relative;
-  z-index: $z-index-high;
-}
-
-.clockWrapper {
-  position: absolute;
-  width: 100%;
-  background-color: $color-divider;
-  border-radius: 50%;
-}
-
-.face {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  z-index: $z-index-high;
-  cursor: pointer;
-  border-radius: 50%;
-  transform: translateX(-50%) translateY(-50%);
-}
-
-.number {
-  position: relative;
-  width: $clock-number-size;
-  height: $clock-number-size;
-  margin-top: - $clock-number-size / 2;
-  margin-left: - $clock-number-size / 2;
-  text-align: center;
-  pointer-events: none;
-  user-select: none;
-  &.active {
-    color: $clock-primary-contrast-color;
-  }
-}
-
-.hand {
-  position: absolute;
-  bottom: 50%;
-  left: 50%;
-  display: block;
-  width: $clock-hand-width;
-  margin-left: - $clock-hand-width / 2;
-  background-color: $clock-primary-color;
-  transform-origin: 50% 100%;
-  &:before {
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    width: $clock-hand-dot-size;
-    height: $clock-hand-dot-size;
-    margin-bottom: - $clock-hand-dot-size / 2;
-    margin-left: - $clock-hand-dot-size / 2;
-    content: "";
-    background-color: $clock-primary-color;
-    border-radius: 50%;
-  }
-  &.small > .knob {
-    background-color: $clock-primary-hover-color;
-    &:after {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      width: $clock-knob-small-size;
-      height: $clock-knob-small-size;
-      margin-top: - $clock-knob-small-size / 2;
-      margin-left: - $clock-knob-small-size / 2;
-      content: "";
-      background: $clock-primary-color;
-      border-radius: 50%;
-    }
-    &:before {
-      position: absolute;
-      bottom: 0;
-      left: 50%;
-      width: $clock-hand-width;
-      height: $clock-knob-size - $clock-knob-small-size;
-      margin-left: - $clock-hand-width / 2;
-      content: "";
-      background: $clock-primary-color;
-    }
-  }
-}
-
-.knob {
-  position: absolute;
-  top: - $clock-knob-size;
-  left: 50%;
-  width: $clock-knob-size;
-  height: $clock-knob-size;
-  margin-left: - $clock-knob-size / 2;
-  cursor: pointer;
-  background-color: $clock-primary-color;
-  border-radius: 50%;
-}
diff --git a/lib/tooltip/Tooltip.js b/lib/tooltip/Tooltip.js
deleted file mode 100644
index 2890a4488..000000000
--- a/lib/tooltip/Tooltip.js
+++ /dev/null
@@ -1,293 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _Portal = require('../hoc/Portal');
-
-var _Portal2 = _interopRequireDefault(_Portal);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _events = require('../utils/events');
-
-var _events2 = _interopRequireDefault(_events);
-
-var _utils = require('../utils/utils');
-
-var _utils2 = _interopRequireDefault(_utils);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var POSITION = {
-  BOTTOM: 'bottom',
-  HORIZONTAL: 'horizontal',
-  LEFT: 'left',
-  RIGHT: 'right',
-  TOP: 'top',
-  VERTICAL: 'vertical'
-};
-
-var defaults = {
-  className: '',
-  delay: 0,
-  hideOnClick: true,
-  position: POSITION.VERTICAL,
-  theme: {}
-};
-
-var tooltipFactory = function tooltipFactory() {
-  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
-  var _defaults$options = _extends({}, defaults, options),
-      defaultClassName = _defaults$options.className,
-      defaultDelay = _defaults$options.delay,
-      defaultHideOnClick = _defaults$options.hideOnClick,
-      defaultPosition = _defaults$options.position,
-      defaultTheme = _defaults$options.theme;
-
-  return function (ComposedComponent) {
-    var TooltippedComponent = function (_Component) {
-      _inherits(TooltippedComponent, _Component);
-
-      function TooltippedComponent() {
-        var _ref;
-
-        var _temp, _this, _ret;
-
-        _classCallCheck(this, TooltippedComponent);
-
-        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
-
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TooltippedComponent.__proto__ || Object.getPrototypeOf(TooltippedComponent)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-          active: false,
-          position: _this.props.tooltipPosition,
-          visible: false
-        }, _this.onTransformEnd = function (e) {
-          if (e.propertyName === 'transform') {
-            _events2.default.removeEventListenerOnTransitionEnded(_this.refs.tooltip, _this.onTransformEnd);
-            _this.setState({ visible: false });
-          }
-        }, _this.handleMouseEnter = function (event) {
-          _this.activate(_this.calculatePosition(event.target));
-          if (_this.props.onMouseEnter) _this.props.onMouseEnter(event);
-        }, _this.handleMouseLeave = function (event) {
-          _this.deactivate();
-          if (_this.props.onMouseLeave) _this.props.onMouseLeave(event);
-        }, _this.handleClick = function (event) {
-          if (_this.props.tooltipHideOnClick) _this.deactivate();
-          if (_this.props.onClick) _this.props.onClick(event);
-        }, _temp), _possibleConstructorReturn(_this, _ret);
-      }
-
-      _createClass(TooltippedComponent, [{
-        key: 'componentWillUnmount',
-        value: function componentWillUnmount() {
-          if (this.refs.tooltip) {
-            _events2.default.removeEventListenerOnTransitionEnded(this.refs.tooltip, this.onTransformEnd);
-          }
-        }
-      }, {
-        key: 'activate',
-        value: function activate(_ref2) {
-          var _this2 = this;
-
-          var top = _ref2.top,
-              left = _ref2.left,
-              position = _ref2.position;
-
-          if (this.timeout) clearTimeout(this.timeout);
-          this.setState({ visible: true, position: position });
-          this.timeout = setTimeout(function () {
-            _this2.setState({ active: true, top: top, left: left });
-          }, this.props.tooltipDelay);
-        }
-      }, {
-        key: 'deactivate',
-        value: function deactivate() {
-          if (this.timeout) clearTimeout(this.timeout);
-          if (this.state.active) {
-            _events2.default.addEventListenerOnTransitionEnded(this.refs.tooltip, this.onTransformEnd);
-            this.setState({ active: false });
-          } else if (this.state.visible) {
-            this.setState({ visible: false });
-          }
-        }
-      }, {
-        key: 'getPosition',
-        value: function getPosition(element) {
-          var tooltipPosition = this.props.tooltipPosition;
-
-          if (tooltipPosition === POSITION.HORIZONTAL) {
-            var origin = element.getBoundingClientRect();
-
-            var _utils$getViewport = _utils2.default.getViewport(),
-                ww = _utils$getViewport.width;
-
-            var toRight = origin.left < ww / 2 - origin.width / 2;
-            return toRight ? POSITION.RIGHT : POSITION.LEFT;
-          } else if (tooltipPosition === POSITION.VERTICAL) {
-            var _origin = element.getBoundingClientRect();
-
-            var _utils$getViewport2 = _utils2.default.getViewport(),
-                wh = _utils$getViewport2.height;
-
-            var toBottom = _origin.top < wh / 2 - _origin.height / 2;
-            return toBottom ? POSITION.BOTTOM : POSITION.TOP;
-          } else {
-            return tooltipPosition;
-          }
-        }
-      }, {
-        key: 'calculatePosition',
-        value: function calculatePosition(element) {
-          var position = this.getPosition(element);
-
-          var _element$getBoundingC = element.getBoundingClientRect(),
-              top = _element$getBoundingC.top,
-              left = _element$getBoundingC.left,
-              height = _element$getBoundingC.height,
-              width = _element$getBoundingC.width;
-
-          var xOffset = window.scrollX || window.pageXOffset;
-          var yOffset = window.scrollY || window.pageYOffset;
-          if (position === POSITION.BOTTOM) {
-            return {
-              top: top + height + yOffset,
-              left: left + width / 2 + xOffset,
-              position: position
-            };
-          } else if (position === POSITION.TOP) {
-            return {
-              top: top + yOffset,
-              left: left + width / 2 + xOffset,
-              position: position
-            };
-          } else if (position === POSITION.LEFT) {
-            return {
-              top: top + height / 2 + yOffset,
-              left: left + xOffset,
-              position: position
-            };
-          } else if (position === POSITION.RIGHT) {
-            return {
-              top: top + height / 2 + yOffset,
-              left: left + width + xOffset,
-              position: position
-            };
-          }
-        }
-      }, {
-        key: 'render',
-        value: function render() {
-          var _classnames;
-
-          var _state = this.state,
-              active = _state.active,
-              left = _state.left,
-              top = _state.top,
-              position = _state.position,
-              visible = _state.visible;
-
-          var positionClass = 'tooltip' + (position.charAt(0).toUpperCase() + position.slice(1));
-
-          var _props = this.props,
-              children = _props.children,
-              className = _props.className,
-              theme = _props.theme,
-              tooltip = _props.tooltip,
-              tooltipDelay = _props.tooltipDelay,
-              tooltipHideOnClick = _props.tooltipHideOnClick,
-              tooltipPosition = _props.tooltipPosition,
-              other = _objectWithoutProperties(_props, ['children', 'className', 'theme', 'tooltip', 'tooltipDelay', 'tooltipHideOnClick', 'tooltipPosition']);
-
-          var _className = (0, _classnames3.default)(theme.tooltip, (_classnames = {}, _defineProperty(_classnames, theme.tooltipActive, active), _defineProperty(_classnames, theme[positionClass], theme[positionClass]), _classnames));
-
-          return _react2.default.createElement(
-            ComposedComponent,
-            _extends({}, other, {
-              className: className,
-              onClick: this.handleClick,
-              onMouseEnter: this.handleMouseEnter,
-              onMouseLeave: this.handleMouseLeave,
-              theme: theme
-            }),
-            children ? children : null,
-            visible && _react2.default.createElement(
-              _Portal2.default,
-              null,
-              _react2.default.createElement(
-                'span',
-                { ref: 'tooltip', className: _className, 'data-react-toolbox': 'tooltip', style: { top: top, left: left } },
-                _react2.default.createElement(
-                  'span',
-                  { className: theme.tooltipInner },
-                  tooltip
-                )
-              )
-            )
-          );
-        }
-      }]);
-
-      return TooltippedComponent;
-    }(_react.Component);
-
-    TooltippedComponent.propTypes = {
-      children: _react.PropTypes.any,
-      className: _react.PropTypes.string,
-      onClick: _react.PropTypes.func,
-      onMouseEnter: _react.PropTypes.func,
-      onMouseLeave: _react.PropTypes.func,
-      theme: _react.PropTypes.shape({
-        tooltip: _react.PropTypes.string,
-        tooltipActive: _react.PropTypes.string,
-        tooltipWrapper: _react.PropTypes.string
-      }),
-      tooltip: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.node]),
-      tooltipDelay: _react.PropTypes.number,
-      tooltipHideOnClick: _react.PropTypes.bool,
-      tooltipPosition: _react.PropTypes.oneOf(Object.keys(POSITION).map(function (key) {
-        return POSITION[key];
-      }))
-    };
-    TooltippedComponent.defaultProps = {
-      className: defaultClassName,
-      tooltipDelay: defaultDelay,
-      tooltipHideOnClick: defaultHideOnClick,
-      tooltipPosition: defaultPosition
-    };
-
-
-    return (0, _reactCssThemr.themr)(_identifiers.TOOLTIP, defaultTheme)(TooltippedComponent);
-  };
-};
-
-exports.default = tooltipFactory;
\ No newline at end of file
diff --git a/lib/tooltip/_config.scss b/lib/tooltip/_config.scss
deleted file mode 100644
index 042410519..000000000
--- a/lib/tooltip/_config.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-$tooltip-background: rgba(97,97,97,.9) !default;
-$tooltip-margin: 0.5 * $unit !default;
-$tooltip-border-radius: .2 * $unit !default;
-$tooltip-color: #fff !default;
-$tooltip-font-size: $unit !default;
-$tooltip-max-width: 17 * $unit !default;
-$tooltip-padding: .8 * $unit !default;
-$tooltip-animation-duration: 200ms !default;
diff --git a/lib/tooltip/index.d.ts b/lib/tooltip/index.d.ts
deleted file mode 100644
index 35523937f..000000000
--- a/lib/tooltip/index.d.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import * as React from "react";
-export interface TooltipTheme {
-  /**
-   * Added to the tooltip element.
-   */
-  tooltip?: string;
-  /**
-   * Added to the root when the tooltip is active.
-   */
-  tooltipActive?: string;
-  /**
-   * Wrapper for the root element used to position the tooltip.
-   */
-  tooltipWrapper?: string;
-}
-
-interface TooltipProps {
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: TooltipTheme;
-  /**
-   * The text string to use for the tooltip.
-   */
-  tooltip?: string;
-  /**
-   * Amount of time in miliseconds spent before the tooltip is visible.
-   */
-  tooltipDelay?: number;
-  /**
-   * If true, the Tooltip hides after a click in the host component.
-   * @default true
-   */
-  tooltipHideOnClick?: boolean;
-}
-
-declare class TooltipComponent<P, S> extends React.Component<P, S> {
-  props: P & TooltipProps;
-}
-
-interface TooltippedComponentClass<P> extends TooltipProps {
-  new (props?: P, context?: any): TooltipComponent<P, any>;
-}
-
-export function Tooltip<P>(componentClass: React.ComponentClass<P>): TooltippedComponentClass<P>;
-
-export default Tooltip;
diff --git a/lib/tooltip/index.js b/lib/tooltip/index.js
deleted file mode 100644
index 43d4180a9..000000000
--- a/lib/tooltip/index.js
+++ /dev/null
@@ -1,24 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.tooltipFactory = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _Tooltip = require('./Tooltip.js');
-
-var _Tooltip2 = _interopRequireDefault(_Tooltip);
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var themedTooltipFactory = function themedTooltipFactory(options) {
-  return (0, _Tooltip2.default)(_extends({}, options, { theme: _theme2.default }));
-};
-exports.default = (0, _Tooltip2.default)({ theme: _theme2.default });
-exports.tooltipFactory = themedTooltipFactory;
\ No newline at end of file
diff --git a/lib/tooltip/theme.scss b/lib/tooltip/theme.scss
deleted file mode 100644
index 3daa20a8c..000000000
--- a/lib/tooltip/theme.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.tooltip {
-  position: absolute;
-  z-index: $z-index-higher;
-  display: block;
-  max-width: $tooltip-max-width;
-  padding: $tooltip-margin;
-  font-family: Roboto, sans-serif;
-  font-size: $tooltip-font-size;
-  font-weight: $font-weight-bold;
-  line-height: $font-size-small;
-  text-align: center;
-  text-transform: none;
-  pointer-events: none;
-  transition: $animation-curve-default $tooltip-animation-duration transform;
-  transform: scale(0) translateX(-50%);
-  transform-origin: top left;
-
-  &.tooltipActive {
-    transform: scale(1) translateX(-50%);
-  }
-
-  &.tooltipTop {
-    transform: scale(0) translateX(-50%) translateY(-100%);
-    &.tooltipActive {
-      transform: scale(1) translateX(-50%) translateY(-100%);
-    }
-  }
-
-  &.tooltipLeft {
-    transform: scale(0) translateX(-100%) translateY(-50%);
-    &.tooltipActive {
-      transform: scale(1) translateX(-100%) translateY(-50%);
-    }
-  }
-
-  &.tooltipRight {
-    transform: scale(0) translateX(0) translateY(-50%);
-    &.tooltipActive {
-      transform: scale(1) translateX(0) translateY(-50%);
-    }
-  }
-}
-
-.tooltipInner {
-  display: block;
-  padding: $tooltip-padding;
-  color: $tooltip-color;
-  background: $tooltip-background;
-  border-radius: $tooltip-border-radius;
-}
diff --git a/lib/utils/events.js b/lib/utils/events.js
deleted file mode 100644
index eb283acee..000000000
--- a/lib/utils/events.js
+++ /dev/null
@@ -1,69 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = {
-  getMousePosition: function getMousePosition(event) {
-    return {
-      x: event.pageX - (window.scrollX || window.pageXOffset),
-      y: event.pageY - (window.scrollY || window.pageYOffset)
-    };
-  },
-  getTouchPosition: function getTouchPosition(event) {
-    return {
-      x: event.touches[0].pageX - (window.scrollX || window.pageXOffset),
-      y: event.touches[0].pageY - (window.scrollY || window.pageYOffset)
-    };
-  },
-  pauseEvent: function pauseEvent(event) {
-    event.stopPropagation();
-    event.preventDefault();
-  },
-  addEventsToDocument: function addEventsToDocument(eventMap) {
-    for (var key in eventMap) {
-      document.addEventListener(key, eventMap[key], false);
-    }
-  },
-  removeEventsFromDocument: function removeEventsFromDocument(eventMap) {
-    for (var key in eventMap) {
-      document.removeEventListener(key, eventMap[key], false);
-    }
-  },
-  targetIsDescendant: function targetIsDescendant(event, parent) {
-    var node = event.target;
-    while (node !== null) {
-      if (node === parent) return true;
-      node = node.parentNode;
-    }
-    return false;
-  },
-  addEventListenerOnTransitionEnded: function addEventListenerOnTransitionEnded(element, fn) {
-    var eventName = transitionEventNamesFor(element);
-    if (!eventName) return false;
-    element.addEventListener(eventName, fn);
-    return true;
-  },
-  removeEventListenerOnTransitionEnded: function removeEventListenerOnTransitionEnded(element, fn) {
-    var eventName = transitionEventNamesFor(element);
-    if (!eventName) return false;
-    element.removeEventListener(eventName, fn);
-    return true;
-  }
-};
-
-
-var TRANSITIONS = {
-  'transition': 'transitionend',
-  'OTransition': 'oTransitionEnd',
-  'MozTransition': 'transitionend',
-  'WebkitTransition': 'webkitTransitionEnd'
-};
-
-function transitionEventNamesFor(element) {
-  for (var transition in TRANSITIONS) {
-    if (element && element.style[transition] !== undefined) {
-      return TRANSITIONS[transition];
-    }
-  }
-}
\ No newline at end of file
diff --git a/lib/utils/index.js b/lib/utils/index.js
deleted file mode 100644
index d1bd0ea43..000000000
--- a/lib/utils/index.js
+++ /dev/null
@@ -1,30 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.utils = exports.time = exports.prefixer = exports.events = undefined;
-
-var _events = require('./events.js');
-
-var _events2 = _interopRequireDefault(_events);
-
-var _prefixer = require('./prefixer.js');
-
-var _prefixer2 = _interopRequireDefault(_prefixer);
-
-var _time = require('./time.js');
-
-var _time2 = _interopRequireDefault(_time);
-
-var _utils = require('./utils.js');
-
-var _utils2 = _interopRequireDefault(_utils);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = { events: _events2.default, prefixer: _prefixer2.default, time: _time2.default, utils: _utils2.default };
-exports.events = _events2.default;
-exports.prefixer = _prefixer2.default;
-exports.time = _time2.default;
-exports.utils = _utils2.default;
\ No newline at end of file
diff --git a/lib/utils/polyfills.js b/lib/utils/polyfills.js
deleted file mode 100644
index 74df99bbb..000000000
--- a/lib/utils/polyfills.js
+++ /dev/null
@@ -1,15 +0,0 @@
-'use strict';
-
-require('core-js/fn/array/from');
-
-require('core-js/fn/array/iterator');
-
-require('core-js/fn/array/find-index');
-
-require('core-js/fn/map');
-
-require('core-js/fn/string/starts-with');
-
-require('core-js/fn/string/includes');
-
-require('core-js/fn/symbol');
\ No newline at end of file
diff --git a/lib/utils/prefixer.js b/lib/utils/prefixer.js
deleted file mode 100644
index 34cb4aa22..000000000
--- a/lib/utils/prefixer.js
+++ /dev/null
@@ -1,47 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var WEBKIT = 'Webkit';
-var MICROSOFT = 'Ms';
-
-var properties = {
-  transform: [WEBKIT, MICROSOFT]
-};
-
-function capitalize(string) {
-  return string.charAt(0).toUpperCase() + string.substr(1);
-}
-
-function getPrefixes(property, value) {
-  return properties[property].reduce(function (acc, item) {
-    acc['' + item + capitalize(property)] = value;
-    return acc;
-  }, {});
-}
-
-function addPrefixesTo(style, property, value) {
-  var vendor = getPrefixes(property, value);
-  for (var prefix in vendor) {
-    style[prefix] = vendor[prefix];
-  }
-
-  return style;
-}
-
-function prefixer(style) {
-  var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-  var _style = defaultValue;
-  for (var property in style) {
-    _style[property] = style[property];
-    if (properties[property]) {
-      addPrefixesTo(_style, property, style[property]);
-    }
-  }
-
-  return _style;
-}
-
-exports.default = prefixer;
\ No newline at end of file
diff --git a/lib/utils/react.js b/lib/utils/react.js
deleted file mode 100644
index c6267df1f..000000000
--- a/lib/utils/react.js
+++ /dev/null
@@ -1,9 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isComponentOfType = isComponentOfType;
-function isComponentOfType(classType, reactElement) {
-  return reactElement && reactElement.type === classType;
-}
\ No newline at end of file
diff --git a/lib/utils/testing.js b/lib/utils/testing.js
deleted file mode 100644
index e82f77931..000000000
--- a/lib/utils/testing.js
+++ /dev/null
@@ -1,38 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactAddonsTestUtils = require('react-addons-test-utils');
-
-var _reactAddonsTestUtils2 = _interopRequireDefault(_reactAddonsTestUtils);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = {
-  renderComponent: function renderComponent(Component) {
-    var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    var state = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-
-    var component = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(Component, props));
-    if (state !== {}) {
-      component.setState(state);
-    }
-    return component;
-  },
-  shallowRenderComponent: function shallowRenderComponent(component, props) {
-    var shallowRenderer = _reactAddonsTestUtils2.default.createRenderer();
-
-    for (var _len = arguments.length, children = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
-      children[_key - 2] = arguments[_key];
-    }
-
-    shallowRenderer.render(_react2.default.createElement(component, props, children.length > 1 ? children : children[0]));
-    return shallowRenderer.getRenderOutput();
-  }
-};
\ No newline at end of file
diff --git a/lib/utils/time.js b/lib/utils/time.js
deleted file mode 100644
index 863b4586d..000000000
--- a/lib/utils/time.js
+++ /dev/null
@@ -1,282 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var dateLocales = {
-  en: {
-    months: 'January_February_March_April_May_June_July_August_September_October_November_December'.split('_'),
-    monthsShort: 'Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec'.split('_'),
-    weekdays: 'Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday'.split('_'),
-    weekdaysShort: 'Sun_Mon_Tue_Wed_Thu_Fri_Sat'.split('_'),
-    weekdaysLetter: []
-  },
-  es: {
-    months: 'enero_febrero_marzo_abril_mayo_junio_julio_agosto_septiembre_octubre_noviembre_diciembre'.split('_'),
-    monthsShort: 'ene_feb_mar_abr_may_jun_jul_ago_sep_oct_nov_dic'.split('_'),
-    weekdays: 'domingo_lunes_martes_miércoles_jueves_viernes_sábado'.split('_'),
-    weekdaysShort: 'dom._lun._mar._mié._jue._vie._sáb.'.split('_'),
-    weekdaysLetter: 'D_L_M_X_J_V_S'.split('_')
-  },
-  af: {
-    months: 'Januarie_Februarie_Maart_April_Mei_Junie_Julie_Augustus_September_Oktober_November_Desember'.split('_'),
-    monthsShort: 'Jan_Feb_Mrt_Apr_Mei_Jun_Jul_Aug_Sep_Okt_Nov_Des'.split('_'),
-    weekdays: 'Sondag_Maandag_Dinsdag_Woensdag_Donderdag_Vrydag_Saterdag'.split('_'),
-    weekdaysShort: 'Son_Maa_Din_Woe_Don_Vry_Sat'.split('_'),
-    weekdaysLetter: []
-  },
-  ar: {
-    months: ['كانون الثاني يناير', 'شباط فبراير', 'آذار مارس', 'نيسان أبريل', 'أيار مايو', 'حزيران يونيو', 'تموز يوليو', 'آب أغسطس', 'أيلول سبتمبر', 'تشرين الأول أكتوبر', 'تشرين الثاني نوفمبر', 'كانون الأول ديسمبر'],
-    monthsShort: ['كانون الثاني يناير', 'شباط فبراير', 'آذار مارس', 'نيسان أبريل', 'أيار مايو', 'حزيران يونيو', 'تموز يوليو', 'آب أغسطس', 'أيلول سبتمبر', 'تشرين الأول أكتوبر', 'تشرين الثاني نوفمبر', 'كانون الأول ديسمبر'],
-    weekdays: 'الأحد_الإثنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت'.split('_'),
-    weekdaysShort: 'أحد_إثنين_ثلاثاء_أربعاء_خميس_جمعة_سبت'.split('_'),
-    weekdaysLetter: []
-  },
-  be: {
-    months: 'студзень_люты_сакавік_красавік_травень_чэрвень_ліпень_жнівень_верасень_кастрычнік_лістапад_снежань'.split('_'),
-    monthsShort: 'студ_лют_сак_крас_трав_чэрв_ліп_жнів_вер_каст_ліст_снеж'.split('_'),
-    weekdays: 'нядзеля_панядзелак_аўторак_серада_чацвер_пятніца_субота'.split('_'),
-    weekdaysShort: 'нд_пн_ат_ср_чц_пт_сб'.split('_'),
-    weekdaysLetter: []
-  },
-  bg: {
-    months: 'януари_февруари_март_април_май_юни_юли_август_септември_октомври_ноември_декември'.split('_'),
-    monthsShort: 'янр_фев_мар_апр_май_юни_юли_авг_сеп_окт_ное_дек'.split('_'),
-    weekdays: 'неделя_понеделник_вторник_сряда_четвъртък_петък_събота'.split('_'),
-    weekdaysShort: 'нед_пон_вто_сря_чет_пет_съб'.split('_'),
-    weekdaysLetter: []
-  },
-  bn: {
-    months: 'জানুয়ারী_ফেবুয়ারী_মার্চ_এপ্রিল_মে_জুন_জুলাই_অগাস্ট_সেপ্টেম্বর_অক্টোবর_নভেম্বর_ডিসেম্বর'.split('_'),
-    monthsShort: 'জানু_ফেব_মার্চ_এপর_মে_জুন_জুল_অগ_সেপ্ট_অক্টো_নভ_ডিসেম্'.split('_'),
-    weekdays: 'রবিবার_সোমবার_মঙ্গলবার_বুধবার_বৃহস্পত্তিবার_শুক্রবার_শনিবার'.split('_'),
-    weekdaysShort: 'রবি_সোম_মঙ্গল_বুধ_বৃহস্পত্তি_শুক্র_শনি'.split('_'),
-    weekdaysLetter: []
-  },
-  bo: {
-    months: 'ཟླ་བ་དང་པོ_ཟླ་བ་གཉིས་པ_ཟླ་བ་གསུམ་པ_ཟླ་བ་བཞི་པ_ཟླ་བ་ལྔ་པ_ཟླ་བ་དྲུག་པ_ཟླ་བ་བདུན་པ_ཟླ་བ་བརྒྱད་པ_ཟླ་བ་དགུ་པ_ཟླ་བ་བཅུ་པ_ཟླ་བ་བཅུ་གཅིག་པ_ཟླ་བ་བཅུ་གཉིས་པ'.split('_'),
-    monthsShort: 'ཟླ་བ་དང་པོ_ཟླ་བ་གཉིས་པ_ཟླ་བ་གསུམ་པ_ཟླ་བ་བཞི་པ_ཟླ་བ་ལྔ་པ_ཟླ་བ་དྲུག་པ_ཟླ་བ་བདུན་པ_ཟླ་བ་བརྒྱད་པ_ཟླ་བ་དགུ་པ_ཟླ་བ་བཅུ་པ_ཟླ་བ་བཅུ་གཅིག་པ_ཟླ་བ་བཅུ་གཉིས་པ'.split('_'),
-    weekdays: 'གཟའ་ཉི་མ་_གཟའ་ཟླ་བ་_གཟའ་མིག་དམར་_གཟའ་ལྷག་པ་_གཟའ་ཕུར་བུ_གཟའ་པ་སངས་_གཟའ་སྤེན་པ་'.split('_'),
-    weekdaysShort: 'ཉི་མ་_ཟླ་བ་_མིག་དམར་_ལྷག་པ་_ཕུར་བུ_པ་སངས་_སྤེན་པ་'.split('_'),
-    weekdaysLetter: []
-  },
-  br: {
-    months: 'Genver_C\'hwevrer_Meurzh_Ebrel_Mae_Mezheven_Gouere_Eost_Gwengolo_Here_Du_Kerzu'.split('_'),
-    monthsShort: 'Gen_C\'hwe_Meu_Ebr_Mae_Eve_Gou_Eos_Gwe_Her_Du_Ker'.split('_'),
-    weekdays: 'Sul_Lun_Meurzh_Merc\'her_Yaou_Gwener_Sadorn'.split('_'),
-    weekdaysShort: 'Sul_Lun_Meu_Mer_Yao_Gwe_Sad'.split('_'),
-    weekdaysLetter: []
-  },
-  bs: {
-    months: 'januar_februar_mart_april_maj_juni_juli_august_septembar_oktobar_novembar_decembar'.split('_'),
-    monthsShort: 'jan._feb._mar._apr._maj._jun._jul._aug._sep._okt._nov._dec.'.split('_'),
-    weekdays: 'nedjelja_ponedjeljak_utorak_srijeda_četvrtak_petak_subota'.split('_'),
-    weekdaysShort: 'ned._pon._uto._sri._čet._pet._sub.'.split('_'),
-    weekdaysLetter: []
-  },
-  ca: {
-    months: 'gener_febrer_març_abril_maig_juny_juliol_agost_setembre_octubre_novembre_desembre'.split('_'),
-    monthsShort: 'gen._febr._mar._abr._mai._jun._jul._ag._set._oct._nov._des.'.split('_'),
-    weekdays: 'diumenge_dilluns_dimarts_dimecres_dijous_divendres_dissabte'.split('_'),
-    weekdaysShort: 'dg._dl._dt._dc._dj._dv._ds.'.split('_'),
-    weekdaysLetter: 'Dg_Dl_Dt_Dc_Dj_Dv_Ds'.split('_')
-  },
-  gl: {
-    months: 'Xaneiro_Febreiro_Marzo_Abril_Maio_Xuño_Xullo_Agosto_Setembro_Outubro_Novembro_Decembro'.split('_'),
-    monthsShort: 'Xan._Feb._Mar._Abr._Mai._Xuñ._Xul._Ago._Set._Out._Nov._Dec.'.split('_'),
-    weekdays: 'Domingo_Luns_Martes_Mércores_Xoves_Venres_Sábado'.split('_'),
-    weekdaysShort: 'Dom._Lun._Mar._Mér._Xov._Ven._Sáb.'.split('_'),
-    weekdaysLetter: 'Do_Lu_Ma_Mé_Xo_Ve_Sá'.split('_')
-  },
-  eu: {
-    months: 'urtarrila_otsaila_martxoa_apirila_maiatza_ekaina_uztaila_abuztua_iraila_urria_azaroa_abendua'.split('_'),
-    monthsShort: 'urt._ots._mar._api._mai._eka._uzt._abu._ira._urr._aza._abe.'.split('_'),
-    weekdays: 'igandea_astelehena_asteartea_asteazkena_osteguna_ostirala_larunbata'.split('_'),
-    weekdaysShort: 'ig._al._ar._az._og._ol._lr.'.split('_'),
-    weekdaysLetter: 'ig_al_ar_az_og_ol_lr'.split('_')
-  },
-  pt: {
-    months: 'Janeiro_Fevereiro_Março_Abril_Maio_Junho_Julho_Agosto_Setembro_Outubro_Novembro_Dezembro'.split('_'),
-    monthsShort: 'Jan_Fev_Mar_Abr_Mai_Jun_Jul_Ago_Set_Out_Nov_Dez'.split('_'),
-    weekdays: 'Domingo_Segunda-Feira_Terça-Feira_Quarta-Feira_Quinta-Feira_Sexta-Feira_Sábado'.split('_'),
-    weekdaysShort: 'Dom_Seg_Ter_Qua_Qui_Sex_Sáb'.split('_'),
-    weekdaysLetter: []
-  },
-  it: {
-    months: 'gennaio_febbraio_marzo_aprile_maggio_giugno_luglio_agosto_settembre_ottobre_novembre_dicembre'.split('_'),
-    monthsShort: 'gen_feb_mar_apr_mag_giu_lug_ago_set_ott_nov_dic'.split('_'),
-    weekdays: 'Domenica_Lunedì_Martedì_Mercoledì_Giovedì_Venerdì_Sabato'.split('_'),
-    weekdaysShort: 'Dom_Lun_Mar_Mer_Gio_Ven_Sab'.split('_'),
-    weekdaysLetter: []
-  },
-  fr: {
-    months: 'janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre'.split('_'),
-    monthsShort: 'janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.'.split('_'),
-    weekdays: 'dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi'.split('_'),
-    weekdaysShort: 'dim._lun._mar._mer._jeu._ven._sam.'.split('_'),
-    weekdaysLetter: []
-  },
-  ru: {
-    months: 'Январь_Февраль_Март_Апрель_Май_Июнь_Июль_Август_Сентябрь_Октябрь_Ноябрь_Декабрь'.split('_'),
-    monthsShort: 'Янв_Фев_Мар_Апр_Май_Июн_Июл_Авг_Сен_Окт_Ноя_Дек'.split('_'),
-    weekdays: 'Воскресенье_Понедельник_Вторник_Среда_Четверг_Пятница_Суббота'.split('_'),
-    weekdaysShort: 'Вс_Пн_Вт_Ср_Чт_Пт_Сб'.split('_'),
-    weekdaysLetter: []
-  },
-  ua: {
-    months: 'Січень_Лютий_Березень_Квітень_Травень_Червень_Липень_Серпень_Вересень_Жовтень_Листопад_Грудень'.split('_'),
-    monthsShort: 'Січ_Лют_Берез_Квіт_Трав_Черв_Лип_Серп_Верес_Жовт_Листоп_Груд'.split('_'),
-    weekdays: 'Неділя_Понеділок_Вівторок_Середа_Четвер_П’ятниця_Субота'.split('_'),
-    weekdaysShort: 'Нд_Пн_Вт_Ср_Чт_Пт_Сб'.split('_'),
-    weekdaysLetter: []
-  }
-};
-var time = {
-  getDaysInMonth: function getDaysInMonth(d) {
-    var resultDate = this.getFirstDayOfMonth(d);
-    resultDate.setMonth(resultDate.getMonth() + 1);
-    resultDate.setDate(resultDate.getDate() - 1);
-    return resultDate.getDate();
-  },
-  getFirstDayOfMonth: function getFirstDayOfMonth(d) {
-    return new Date(d.getFullYear(), d.getMonth(), 1);
-  },
-  getFirstWeekDay: function getFirstWeekDay(d) {
-    return this.getFirstDayOfMonth(d).getDay();
-  },
-  getTimeMode: function getTimeMode(d) {
-    return d.getHours() >= 12 ? 'pm' : 'am';
-  },
-  getFullMonth: function getFullMonth(d) {
-    var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
-
-    var month = d.getMonth();
-    var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en;
-    return l.hasOwnProperty('months') ? l.months[month] || 'Unknown' : 'Unknown';
-  },
-  getShortMonth: function getShortMonth(d) {
-    var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
-
-    var month = d.getMonth();
-    var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en;
-    return l.hasOwnProperty('monthsShort') ? l.monthsShort[month] || 'Unknown' : 'Unknown';
-  },
-  getFullDayOfWeek: function getFullDayOfWeek(day) {
-    var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
-
-    var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en;
-    return l.hasOwnProperty('weekdays') ? l.weekdays[day] || 'Unknown' : 'Unknown';
-  },
-  getShortDayOfWeek: function getShortDayOfWeek(day) {
-    var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
-
-    var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en;
-    return l.hasOwnProperty('weekdaysShort') ? l.weekdaysShort[day] || 'Unknown' : 'Unknown';
-  },
-  getDayOfWeekLetter: function getDayOfWeekLetter(day) {
-    var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
-
-    var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en;
-    return l.hasOwnProperty('weekdaysLetter') ? l.weekdaysLetter[day] || this.getFullDayOfWeek(day, locale).charAt(0) : 'Unknown';
-  },
-  clone: function clone(d) {
-    return new Date(d.getTime());
-  },
-  cloneAsDate: function cloneAsDate(d) {
-    var clonedDate = this.clone(d);
-    clonedDate.setHours(0, 0, 0, 0);
-    return clonedDate;
-  },
-  isDateObject: function isDateObject(d) {
-    return d instanceof Date;
-  },
-  addDays: function addDays(d, days) {
-    var newDate = this.clone(d);
-    newDate.setDate(d.getDate() + days);
-    return newDate;
-  },
-  addMonths: function addMonths(d, months) {
-    var newDate = this.clone(d);
-    newDate.setMonth(d.getMonth() + months, 1);
-    return newDate;
-  },
-  addYears: function addYears(d, years) {
-    var newDate = this.clone(d);
-    newDate.setFullYear(d.getFullYear() + years);
-    return newDate;
-  },
-  setDay: function setDay(d, day) {
-    var newDate = this.clone(d);
-    newDate.setDate(day);
-    return newDate;
-  },
-  setMonth: function setMonth(d, month) {
-    var newDate = this.clone(d);
-    newDate.setMonth(month);
-    return newDate;
-  },
-  setYear: function setYear(d, year) {
-    var newDate = this.clone(d);
-    newDate.setFullYear(year);
-    return newDate;
-  },
-  setHours: function setHours(d, hours) {
-    var newDate = this.clone(d);
-    newDate.setHours(hours);
-    return newDate;
-  },
-  setMinutes: function setMinutes(d, minutes) {
-    var newDate = this.clone(d);
-    newDate.setMinutes(minutes);
-    return newDate;
-  },
-  toggleTimeMode: function toggleTimeMode(d) {
-    var newDate = this.clone(d);
-    var hours = newDate.getHours();
-
-    newDate.setHours(hours - (hours > 12 ? -12 : 12));
-    return newDate;
-  },
-  formatTime: function formatTime(date, format) {
-    var hours = date.getHours();
-    var mins = date.getMinutes().toString();
-
-    if (format === 'ampm') {
-      var isAM = hours < 12;
-      var additional = isAM ? ' am' : ' pm';
-
-      hours = hours % 12;
-      hours = (hours || 12).toString();
-      if (mins.length < 2) mins = '0' + mins;
-
-      return hours + (mins === '00' ? '' : ':' + mins) + additional;
-    }
-
-    hours = hours.toString();
-    if (hours.length < 2) hours = '0' + hours;
-    if (mins.length < 2) mins = '0' + mins;
-    return hours + ':' + mins;
-  },
-  dateOutOfRange: function dateOutOfRange(date, minDate, maxDate) {
-    return minDate && !(date >= minDate) || maxDate && !(date <= maxDate);
-  },
-  closestDate: function closestDate(to, date1, date2) {
-    var toTime = to.getTime();
-
-    var diff1 = Math.abs(toTime - date1.getTime());
-    var diff2 = Math.abs(toTime - date2.getTime());
-
-    return diff1 < diff2 ? date1 : date2;
-  },
-  formatDate: function formatDate(date) {
-    var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
-
-    if (locale === 'en') {
-      return date.getDate() + ' ' + time.getFullMonth(date, locale) + ' ' + date.getFullYear();
-    } else {
-      return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear();
-    }
-  }
-};
-
-exports.default = time;
\ No newline at end of file
diff --git a/lib/utils/utils.js b/lib/utils/utils.js
deleted file mode 100644
index 13e8d5442..000000000
--- a/lib/utils/utils.js
+++ /dev/null
@@ -1,73 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = {
-  angleFromPositions: function angleFromPositions(cx, cy, ex, ey) {
-    var theta = Math.atan2(ey - cy, ex - cx) + Math.PI / 2;
-    return theta * 180 / Math.PI;
-  },
-  angle360FromPositions: function angle360FromPositions(cx, cy, ex, ey) {
-    var angle = this.angleFromPositions(cx, cy, ex, ey);
-    return angle < 0 ? 360 + angle : angle;
-  },
-  range: function range() {
-    var start = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-    var stop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    var step = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-    var _start = 0,
-        _stop = start;
-
-    if (stop !== null) {
-      _start = start;
-      _stop = stop;
-    }
-    var length = Math.max(Math.ceil((_stop - _start) / step), 0);
-    var range = Array(length);
-
-    for (var idx = 0; idx < length; idx++, _start += step) {
-      range[idx] = _start;
-    }
-
-    return range;
-  },
-  round: function round(number, decimals) {
-    if (!isNaN(parseFloat(number)) && isFinite(number)) {
-      var decimalPower = Math.pow(10, decimals);
-      return Math.round(parseFloat(number) * decimalPower) / decimalPower;
-    }
-    return NaN;
-  },
-  getViewport: function getViewport() {
-    return {
-      height: window.innerHeight || document.documentElement.offsetHeight,
-      width: window.innerWidth || document.documentElement.offsetWidth
-    };
-  },
-  cloneObject: function cloneObject(object) {
-    return JSON.parse(JSON.stringify(object));
-  },
-  inputTypeForPrototype: function inputTypeForPrototype(prototype) {
-    if (prototype === Date) return 'date';
-    if (prototype === Number) return 'number';
-    if (prototype === Boolean) return 'checkbox';
-    return 'text';
-  },
-  prepareValueForInput: function prepareValueForInput(value, type) {
-    if (type === 'date') return new Date(value).toISOString().slice(0, 10);
-    if (type === 'checkbox') {
-      return value ? 'on' : '';
-    }
-    return value;
-  },
-  removeObjectKey: function removeObjectKey(key, object) {
-    var newObject = {};
-    Object.keys(object).filter(function (k) {
-      return k !== key;
-    }).forEach(function (k) {
-      newObject[k] = object[k];
-    });
-    return newObject;
-  }
-};
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 000000000..535934a96
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,5915 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+Base64@~0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/Base64/-/Base64-0.2.1.tgz#ba3a4230708e186705065e66babdd4c35cf60028"
+
+abbrev@1:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.0.9.tgz#91b4792588a7738c25f35dd6f63752a2f8776135"
+
+accepts@1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.1.4.tgz#d71c96f7d41d0feda2c38cd14e8a27c04158df4a"
+  dependencies:
+    mime-types "~2.0.4"
+    negotiator "0.4.9"
+
+accepts@~1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.3.tgz#c3ca7434938648c3e0d9c1e328dd68b622c284ca"
+  dependencies:
+    mime-types "~2.1.11"
+    negotiator "0.6.1"
+
+acorn-jsx@^3.0.0, acorn-jsx@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-3.0.1.tgz#afdf9488fb1ecefc8348f6fb22f464e32a58b36b"
+  dependencies:
+    acorn "^3.0.4"
+
+acorn@^3.0.0, acorn@^3.0.4:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
+
+acorn@^4.0.1:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.3.tgz#1a3e850b428e73ba6b09d1cc527f5aaad4d03ef1"
+
+after@0.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/after/-/after-0.8.1.tgz#ab5d4fb883f596816d3515f8f791c0af486dd627"
+
+ajv-keywords@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.1.1.tgz#02550bc605a3e576041565628af972e06c549d50"
+
+ajv@^4.7.0:
+  version "4.8.2"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.8.2.tgz#65486936ca36fea39a1504332a78bebd5d447bdc"
+  dependencies:
+    co "^4.6.0"
+    json-stable-stringify "^1.0.1"
+
+align-text@^0.1.1, align-text@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
+  dependencies:
+    kind-of "^3.0.2"
+    longest "^1.0.1"
+    repeat-string "^1.5.2"
+
+alphanum-sort@^1.0.1, alphanum-sort@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
+
+amdefine@>=0.0.4:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.0.tgz#fd17474700cb5cc9c2b709f0be9d23ce3c198c33"
+
+ansi-escapes@^1.0.0, ansi-escapes@^1.1.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
+
+ansi-html@0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.6.tgz#bda8e33dd2ee1c20f54c08eb405713cbfc0ed80e"
+
+ansi-regex@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.0.0.tgz#c5061b6e0ef8a81775e50f5d66151bf6bf371107"
+
+ansi-styles@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
+
+anymatch@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.0.tgz#a3e52fa39168c825ff57b0248126ce5a8ff95507"
+  dependencies:
+    arrify "^1.0.0"
+    micromatch "^2.1.5"
+
+app-root-path@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/app-root-path/-/app-root-path-2.0.1.tgz#cd62dcf8e4fd5a417efc664d2e5b10653c651b46"
+
+aproba@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.0.4.tgz#2713680775e7614c8ba186c065d4e2e52d1072c0"
+
+are-we-there-yet@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.2.tgz#80e470e95a084794fe1899262c5667c6e88de1b3"
+  dependencies:
+    delegates "^1.0.0"
+    readable-stream "^2.0.0 || ^1.1.13"
+
+argparse@^1.0.7:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.9.tgz#73d83bc263f86e97f8cc4f6bae1b0e90a7d22c86"
+  dependencies:
+    sprintf-js "~1.0.2"
+
+arr-diff@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
+  dependencies:
+    arr-flatten "^1.0.1"
+
+arr-flatten@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.0.1.tgz#e5ffe54d45e19f32f216e91eb99c8ce892bb604b"
+
+array-filter@~0.0.0:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-0.0.1.tgz#7da8cf2e26628ed732803581fd21f67cacd2eeec"
+
+array-find-index@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
+
+array-find@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-find/-/array-find-1.0.0.tgz#6c8e286d11ed768327f8e62ecee87353ca3e78b8"
+
+array-flatten@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
+
+array-index@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-index/-/array-index-1.0.0.tgz#ec56a749ee103e4e08c790b9c353df16055b97f9"
+  dependencies:
+    debug "^2.2.0"
+    es6-symbol "^3.0.2"
+
+array-map@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/array-map/-/array-map-0.0.0.tgz#88a2bab73d1cf7bcd5c1b118a003f66f665fa662"
+
+array-reduce@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/array-reduce/-/array-reduce-0.0.0.tgz#173899d3ffd1c7d9383e4479525dbe278cab5f2b"
+
+array-slice@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/array-slice/-/array-slice-0.2.3.tgz#dd3cfb80ed7973a75117cdac69b0b99ec86186f5"
+
+array-union@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
+  dependencies:
+    array-uniq "^1.0.1"
+
+array-uniq@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
+
+array-unique@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
+
+arraybuffer.slice@0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/arraybuffer.slice/-/arraybuffer.slice-0.0.6.tgz#f33b2159f0532a3f3107a272c0ccfbd1ad2979ca"
+
+arrify@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
+
+asap@~2.0.3:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f"
+
+asn1.js@^4.0.0:
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.8.1.tgz#3949b7f5fd1e8bedc13be3abebf477f93490c810"
+  dependencies:
+    bn.js "^4.0.0"
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+
+asn1@~0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.3.tgz#dac8787713c9966849fc8180777ebe9c1ddf3b86"
+
+assert-plus@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-0.2.0.tgz#d74e1b87e7affc0db8aadb7021f3fe48101ab234"
+
+assert-plus@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
+
+assert@^1.1.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/assert/-/assert-1.4.1.tgz#99912d591836b5a6f5b345c0f07eefc08fc65d91"
+  dependencies:
+    util "0.10.3"
+
+async-each@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
+
+async-foreach@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/async-foreach/-/async-foreach-0.1.3.tgz#36121f845c0578172de419a97dbeb1d16ec34542"
+
+async@^0.9.0, async@~0.9.0:
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d"
+
+async@^1.3.0, async@^1.5.0:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
+
+async@^2.0.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.1.2.tgz#612a4ab45ef42a70cde806bad86ee6db047e8385"
+  dependencies:
+    lodash "^4.14.0"
+
+async@~0.2.6:
+  version "0.2.10"
+  resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+
+autoprefixer@^6.3.1, autoprefixer@^6.5.1:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.5.3.tgz#2d853af66d04449fcf50db3066279ab54c3e4b01"
+  dependencies:
+    browserslist "~1.4.0"
+    caniuse-db "^1.0.30000578"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    postcss "^5.2.5"
+    postcss-value-parser "^3.2.3"
+
+aws-sign2@~0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
+
+aws4@^1.2.1:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.5.0.tgz#0a29ffb79c31c9e712eeb087e8e7a64b4a56d755"
+
+babel-cli@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-cli/-/babel-cli-6.18.0.tgz#92117f341add9dead90f6fa7d0a97c0cc08ec186"
+  dependencies:
+    babel-core "^6.18.0"
+    babel-polyfill "^6.16.0"
+    babel-register "^6.18.0"
+    babel-runtime "^6.9.0"
+    commander "^2.8.1"
+    convert-source-map "^1.1.0"
+    fs-readdir-recursive "^1.0.0"
+    glob "^5.0.5"
+    lodash "^4.2.0"
+    output-file-sync "^1.1.0"
+    path-is-absolute "^1.0.0"
+    slash "^1.0.0"
+    source-map "^0.5.0"
+    v8flags "^2.0.10"
+  optionalDependencies:
+    chokidar "^1.0.0"
+
+babel-code-frame@^6.11.0, babel-code-frame@^6.16.0:
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.16.0.tgz#f90e60da0862909d3ce098733b5d3987c97cb8de"
+  dependencies:
+    chalk "^1.1.0"
+    esutils "^2.0.2"
+    js-tokens "^2.0.0"
+
+babel-core@^6.18.0, babel-core@^6.18.2:
+  version "6.18.2"
+  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.18.2.tgz#d8bb14dd6986fa4f3566a26ceda3964fa0e04e5b"
+  dependencies:
+    babel-code-frame "^6.16.0"
+    babel-generator "^6.18.0"
+    babel-helpers "^6.16.0"
+    babel-messages "^6.8.0"
+    babel-register "^6.18.0"
+    babel-runtime "^6.9.1"
+    babel-template "^6.16.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+    babylon "^6.11.0"
+    convert-source-map "^1.1.0"
+    debug "^2.1.1"
+    json5 "^0.5.0"
+    lodash "^4.2.0"
+    minimatch "^3.0.2"
+    path-is-absolute "^1.0.0"
+    private "^0.1.6"
+    slash "^1.0.0"
+    source-map "^0.5.0"
+
+babel-eslint@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-7.1.1.tgz#8a6a884f085aa7060af69cfc77341c2f99370fb2"
+  dependencies:
+    babel-code-frame "^6.16.0"
+    babel-traverse "^6.15.0"
+    babel-types "^6.15.0"
+    babylon "^6.13.0"
+    lodash.pickby "^4.6.0"
+
+babel-generator@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.18.0.tgz#e4f104cb3063996d9850556a45aae4a022060a07"
+  dependencies:
+    babel-messages "^6.8.0"
+    babel-runtime "^6.9.0"
+    babel-types "^6.18.0"
+    detect-indent "^4.0.0"
+    jsesc "^1.3.0"
+    lodash "^4.2.0"
+    source-map "^0.5.0"
+
+babel-helper-bindify-decorators@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-bindify-decorators/-/babel-helper-bindify-decorators-6.18.0.tgz#fc00c573676a6e702fffa00019580892ec8780a5"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-helper-builder-binary-assignment-operator-visitor@^6.8.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-builder-binary-assignment-operator-visitor/-/babel-helper-builder-binary-assignment-operator-visitor-6.18.0.tgz#8ae814989f7a53682152e3401a04fabd0bb333a6"
+  dependencies:
+    babel-helper-explode-assignable-expression "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-types "^6.18.0"
+
+babel-helper-builder-react-jsx@^6.8.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-builder-react-jsx/-/babel-helper-builder-react-jsx-6.18.0.tgz#ab02f19a2eb7ace936dd87fa55896d02be59bf71"
+  dependencies:
+    babel-runtime "^6.9.0"
+    babel-types "^6.18.0"
+    esutils "^2.0.0"
+    lodash "^4.2.0"
+
+babel-helper-call-delegate@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-call-delegate/-/babel-helper-call-delegate-6.18.0.tgz#05b14aafa430884b034097ef29e9f067ea4133bd"
+  dependencies:
+    babel-helper-hoist-variables "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-helper-define-map@^6.18.0, babel-helper-define-map@^6.8.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-define-map/-/babel-helper-define-map-6.18.0.tgz#8d6c85dc7fbb4c19be3de40474d18e97c3676ec2"
+  dependencies:
+    babel-helper-function-name "^6.18.0"
+    babel-runtime "^6.9.0"
+    babel-types "^6.18.0"
+    lodash "^4.2.0"
+
+babel-helper-explode-assignable-expression@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-explode-assignable-expression/-/babel-helper-explode-assignable-expression-6.18.0.tgz#14b8e8c2d03ad735d4b20f1840b24cd1f65239fe"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-helper-explode-class@^6.8.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-explode-class/-/babel-helper-explode-class-6.18.0.tgz#c44f76f4fa23b9c5d607cbac5d4115e7a76f62cb"
+  dependencies:
+    babel-helper-bindify-decorators "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-helper-function-name@^6.18.0, babel-helper-function-name@^6.8.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-function-name/-/babel-helper-function-name-6.18.0.tgz#68ec71aeba1f3e28b2a6f0730190b754a9bf30e6"
+  dependencies:
+    babel-helper-get-function-arity "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.8.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-helper-get-function-arity@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-get-function-arity/-/babel-helper-get-function-arity-6.18.0.tgz#a5b19695fd3f9cdfc328398b47dafcd7094f9f24"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-types "^6.18.0"
+
+babel-helper-hoist-variables@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-hoist-variables/-/babel-helper-hoist-variables-6.18.0.tgz#a835b5ab8b46d6de9babefae4d98ea41e866b82a"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-types "^6.18.0"
+
+babel-helper-optimise-call-expression@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-optimise-call-expression/-/babel-helper-optimise-call-expression-6.18.0.tgz#9261d0299ee1a4f08a6dd28b7b7c777348fd8f0f"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-types "^6.18.0"
+
+babel-helper-regex@^6.8.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-regex/-/babel-helper-regex-6.18.0.tgz#ae0ebfd77de86cb2f1af258e2cc20b5fe893ecc6"
+  dependencies:
+    babel-runtime "^6.9.0"
+    babel-types "^6.18.0"
+    lodash "^4.2.0"
+
+babel-helper-remap-async-to-generator@^6.16.0, babel-helper-remap-async-to-generator@^6.16.2:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-remap-async-to-generator/-/babel-helper-remap-async-to-generator-6.18.0.tgz#336cdf3cab650bb191b02fc16a3708e7be7f9ce5"
+  dependencies:
+    babel-helper-function-name "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.16.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-helper-replace-supers@^6.18.0, babel-helper-replace-supers@^6.8.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-replace-supers/-/babel-helper-replace-supers-6.18.0.tgz#28ec69877be4144dbd64f4cc3a337e89f29a924e"
+  dependencies:
+    babel-helper-optimise-call-expression "^6.18.0"
+    babel-messages "^6.8.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.16.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-helpers@^6.16.0:
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/babel-helpers/-/babel-helpers-6.16.0.tgz#1095ec10d99279460553e67eb3eee9973d3867e3"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-template "^6.16.0"
+
+babel-loader@^6.2.4:
+  version "6.2.8"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-6.2.8.tgz#30d7183aef60afc140b36443676b7acb4c12ac9c"
+  dependencies:
+    find-cache-dir "^0.1.1"
+    loader-utils "^0.2.11"
+    mkdirp "^0.5.1"
+    object-assign "^4.0.1"
+
+babel-messages@^6.8.0:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.8.0.tgz#bf504736ca967e6d65ef0adb5a2a5f947c8e0eb9"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-check-es2015-constants@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.8.0.tgz#dbf024c32ed37bfda8dee1e76da02386a8d26fe7"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-react-transform@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-react-transform/-/babel-plugin-react-transform-2.0.2.tgz#515bbfa996893981142d90b1f9b1635de2995109"
+  dependencies:
+    lodash "^4.6.1"
+
+babel-plugin-syntax-async-functions@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
+
+babel-plugin-syntax-async-generators@^6.5.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-generators/-/babel-plugin-syntax-async-generators-6.13.0.tgz#6bc963ebb16eccbae6b92b596eb7f35c342a8b9a"
+
+babel-plugin-syntax-class-constructor-call@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-class-constructor-call/-/babel-plugin-syntax-class-constructor-call-6.18.0.tgz#9cb9d39fe43c8600bec8146456ddcbd4e1a76416"
+
+babel-plugin-syntax-class-properties@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz#d7eb23b79a317f8543962c505b827c7d6cac27de"
+
+babel-plugin-syntax-decorators@^6.13.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz#312563b4dbde3cc806cee3e416cceeaddd11ac0b"
+
+babel-plugin-syntax-do-expressions@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-do-expressions/-/babel-plugin-syntax-do-expressions-6.13.0.tgz#5747756139aa26d390d09410b03744ba07e4796d"
+
+babel-plugin-syntax-dynamic-import@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz#8d6a26229c83745a9982a441051572caa179b1da"
+
+babel-plugin-syntax-exponentiation-operator@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"
+
+babel-plugin-syntax-export-extensions@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-export-extensions/-/babel-plugin-syntax-export-extensions-6.13.0.tgz#70a1484f0f9089a4e84ad44bac353c95b9b12721"
+
+babel-plugin-syntax-flow@^6.18.0, babel-plugin-syntax-flow@^6.3.13:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d"
+
+babel-plugin-syntax-function-bind@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-function-bind/-/babel-plugin-syntax-function-bind-6.13.0.tgz#48c495f177bdf31a981e732f55adc0bdd2601f46"
+
+babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+
+babel-plugin-syntax-object-rest-spread@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
+
+babel-plugin-syntax-trailing-function-commas@^6.3.13:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-6.13.0.tgz#2b84b7d53dd744f94ff1fad7669406274b23f541"
+
+babel-plugin-transform-async-generator-functions@^6.17.0:
+  version "6.17.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-async-generator-functions/-/babel-plugin-transform-async-generator-functions-6.17.0.tgz#d0b5a2b2f0940f2b245fa20a00519ed7bc6cae54"
+  dependencies:
+    babel-helper-remap-async-to-generator "^6.16.2"
+    babel-plugin-syntax-async-generators "^6.5.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-async-to-generator@^6.16.0:
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-async-to-generator/-/babel-plugin-transform-async-to-generator-6.16.0.tgz#19ec36cb1486b59f9f468adfa42ce13908ca2999"
+  dependencies:
+    babel-helper-remap-async-to-generator "^6.16.0"
+    babel-plugin-syntax-async-functions "^6.8.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-class-constructor-call@^6.3.13:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-constructor-call/-/babel-plugin-transform-class-constructor-call-6.18.0.tgz#80855e38a1ab47b8c6c647f8ea1bcd2c00ca3aae"
+  dependencies:
+    babel-plugin-syntax-class-constructor-call "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.8.0"
+
+babel-plugin-transform-class-properties@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.18.0.tgz#bc1266a39d4c8726e0bd7b15c56235177e6ede57"
+  dependencies:
+    babel-helper-function-name "^6.18.0"
+    babel-plugin-syntax-class-properties "^6.8.0"
+    babel-runtime "^6.9.1"
+
+babel-plugin-transform-decorators@^6.13.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-decorators/-/babel-plugin-transform-decorators-6.13.0.tgz#82d65c1470ae83e2d13eebecb0a1c2476d62da9d"
+  dependencies:
+    babel-helper-define-map "^6.8.0"
+    babel-helper-explode-class "^6.8.0"
+    babel-plugin-syntax-decorators "^6.13.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.8.0"
+    babel-types "^6.13.0"
+
+babel-plugin-transform-do-expressions@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-do-expressions/-/babel-plugin-transform-do-expressions-6.8.0.tgz#fda692af339835cc255bb7544efb8f7c1306c273"
+  dependencies:
+    babel-plugin-syntax-do-expressions "^6.8.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-arrow-functions@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.8.0.tgz#5b63afc3181bdc9a8c4d481b5a4f3f7d7fef3d9d"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-block-scoped-functions@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoped-functions/-/babel-plugin-transform-es2015-block-scoped-functions-6.8.0.tgz#ed95d629c4b5a71ae29682b998f70d9833eb366d"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-block-scoping@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoping/-/babel-plugin-transform-es2015-block-scoping-6.18.0.tgz#3bfdcfec318d46df22525cdea88f1978813653af"
+  dependencies:
+    babel-runtime "^6.9.0"
+    babel-template "^6.15.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+    lodash "^4.2.0"
+
+babel-plugin-transform-es2015-classes@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-classes/-/babel-plugin-transform-es2015-classes-6.18.0.tgz#ffe7a17321bf83e494dcda0ae3fc72df48ffd1d9"
+  dependencies:
+    babel-helper-define-map "^6.18.0"
+    babel-helper-function-name "^6.18.0"
+    babel-helper-optimise-call-expression "^6.18.0"
+    babel-helper-replace-supers "^6.18.0"
+    babel-messages "^6.8.0"
+    babel-runtime "^6.9.0"
+    babel-template "^6.14.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-plugin-transform-es2015-computed-properties@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-computed-properties/-/babel-plugin-transform-es2015-computed-properties-6.8.0.tgz#f51010fd61b3bd7b6b60a5fdfd307bb7a5279870"
+  dependencies:
+    babel-helper-define-map "^6.8.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.8.0"
+
+babel-plugin-transform-es2015-destructuring@^6.18.0:
+  version "6.19.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-destructuring/-/babel-plugin-transform-es2015-destructuring-6.19.0.tgz#ff1d911c4b3f4cab621bd66702a869acd1900533"
+  dependencies:
+    babel-runtime "^6.9.0"
+
+babel-plugin-transform-es2015-duplicate-keys@^6.6.0:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-duplicate-keys/-/babel-plugin-transform-es2015-duplicate-keys-6.8.0.tgz#fd8f7f7171fc108cc1c70c3164b9f15a81c25f7d"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-types "^6.8.0"
+
+babel-plugin-transform-es2015-for-of@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-for-of/-/babel-plugin-transform-es2015-for-of-6.18.0.tgz#4c517504db64bf8cfc119a6b8f177211f2028a70"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-function-name@^6.9.0:
+  version "6.9.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-function-name/-/babel-plugin-transform-es2015-function-name-6.9.0.tgz#8c135b17dbd064e5bba56ec511baaee2fca82719"
+  dependencies:
+    babel-helper-function-name "^6.8.0"
+    babel-runtime "^6.9.0"
+    babel-types "^6.9.0"
+
+babel-plugin-transform-es2015-literals@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-literals/-/babel-plugin-transform-es2015-literals-6.8.0.tgz#50aa2e5c7958fc2ab25d74ec117e0cc98f046468"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-modules-amd@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-amd/-/babel-plugin-transform-es2015-modules-amd-6.18.0.tgz#49a054cbb762bdf9ae2d8a807076cfade6141e40"
+  dependencies:
+    babel-plugin-transform-es2015-modules-commonjs "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.8.0"
+
+babel-plugin-transform-es2015-modules-commonjs@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.18.0.tgz#c15ae5bb11b32a0abdcc98a5837baa4ee8d67bcc"
+  dependencies:
+    babel-plugin-transform-strict-mode "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.16.0"
+    babel-types "^6.18.0"
+
+babel-plugin-transform-es2015-modules-systemjs@^6.18.0:
+  version "6.19.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-systemjs/-/babel-plugin-transform-es2015-modules-systemjs-6.19.0.tgz#50438136eba74527efa00a5b0fefaf1dc4071da6"
+  dependencies:
+    babel-helper-hoist-variables "^6.18.0"
+    babel-runtime "^6.11.6"
+    babel-template "^6.14.0"
+
+babel-plugin-transform-es2015-modules-umd@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-umd/-/babel-plugin-transform-es2015-modules-umd-6.18.0.tgz#23351770ece5c1f8e83ed67cb1d7992884491e50"
+  dependencies:
+    babel-plugin-transform-es2015-modules-amd "^6.18.0"
+    babel-runtime "^6.0.0"
+    babel-template "^6.8.0"
+
+babel-plugin-transform-es2015-object-super@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-object-super/-/babel-plugin-transform-es2015-object-super-6.8.0.tgz#1b858740a5a4400887c23dcff6f4d56eea4a24c5"
+  dependencies:
+    babel-helper-replace-supers "^6.8.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-parameters@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-parameters/-/babel-plugin-transform-es2015-parameters-6.18.0.tgz#9b2cfe238c549f1635ba27fc1daa858be70608b1"
+  dependencies:
+    babel-helper-call-delegate "^6.18.0"
+    babel-helper-get-function-arity "^6.18.0"
+    babel-runtime "^6.9.0"
+    babel-template "^6.16.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+
+babel-plugin-transform-es2015-shorthand-properties@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-shorthand-properties/-/babel-plugin-transform-es2015-shorthand-properties-6.18.0.tgz#e2ede3b7df47bf980151926534d1dd0cbea58f43"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-types "^6.18.0"
+
+babel-plugin-transform-es2015-spread@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-spread/-/babel-plugin-transform-es2015-spread-6.8.0.tgz#0217f737e3b821fa5a669f187c6ed59205f05e9c"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-sticky-regex@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-sticky-regex/-/babel-plugin-transform-es2015-sticky-regex-6.8.0.tgz#e73d300a440a35d5c64f5c2a344dc236e3df47be"
+  dependencies:
+    babel-helper-regex "^6.8.0"
+    babel-runtime "^6.0.0"
+    babel-types "^6.8.0"
+
+babel-plugin-transform-es2015-template-literals@^6.6.0:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-template-literals/-/babel-plugin-transform-es2015-template-literals-6.8.0.tgz#86eb876d0a2c635da4ec048b4f7de9dfc897e66b"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-typeof-symbol@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-typeof-symbol/-/babel-plugin-transform-es2015-typeof-symbol-6.18.0.tgz#0b14c48629c90ff47a0650077f6aa699bee35798"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-es2015-unicode-regex@^6.3.13:
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-unicode-regex/-/babel-plugin-transform-es2015-unicode-regex-6.11.0.tgz#6298ceabaad88d50a3f4f392d8de997260f6ef2c"
+  dependencies:
+    babel-helper-regex "^6.8.0"
+    babel-runtime "^6.0.0"
+    regexpu-core "^2.0.0"
+
+babel-plugin-transform-exponentiation-operator@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-exponentiation-operator/-/babel-plugin-transform-exponentiation-operator-6.8.0.tgz#db25742e9339eade676ca9acec46f955599a68a4"
+  dependencies:
+    babel-helper-builder-binary-assignment-operator-visitor "^6.8.0"
+    babel-plugin-syntax-exponentiation-operator "^6.8.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-export-extensions@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-export-extensions/-/babel-plugin-transform-export-extensions-6.8.0.tgz#fa80ff655b636549431bfd38f6b817bd82e47f5b"
+  dependencies:
+    babel-plugin-syntax-export-extensions "^6.8.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-flow-strip-types@^6.3.13:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-flow-strip-types/-/babel-plugin-transform-flow-strip-types-6.18.0.tgz#4d3e642158661e9b40db457c004a30817fa32592"
+  dependencies:
+    babel-plugin-syntax-flow "^6.18.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-function-bind@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-function-bind/-/babel-plugin-transform-function-bind-6.8.0.tgz#e7f334ce69f50d28fe850a822eaaab9fa4f4d821"
+  dependencies:
+    babel-plugin-syntax-function-bind "^6.8.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-object-rest-spread@^6.16.0:
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.16.0.tgz#db441d56fffc1999052fdebe2e2f25ebd28e36a9"
+  dependencies:
+    babel-plugin-syntax-object-rest-spread "^6.8.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-react-display-name@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-display-name/-/babel-plugin-transform-react-display-name-6.8.0.tgz#f7a084977383d728bdbdc2835bba0159577f660e"
+  dependencies:
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-react-jsx-self@^6.11.0:
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx-self/-/babel-plugin-transform-react-jsx-self-6.11.0.tgz#605c9450c1429f97a930f7e1dfe3f0d9d0dbd0f4"
+  dependencies:
+    babel-plugin-syntax-jsx "^6.8.0"
+    babel-runtime "^6.9.0"
+
+babel-plugin-transform-react-jsx-source@^6.3.13:
+  version "6.9.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx-source/-/babel-plugin-transform-react-jsx-source-6.9.0.tgz#af684a05c2067a86e0957d4f343295ccf5dccf00"
+  dependencies:
+    babel-plugin-syntax-jsx "^6.8.0"
+    babel-runtime "^6.9.0"
+
+babel-plugin-transform-react-jsx@^6.3.13:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx/-/babel-plugin-transform-react-jsx-6.8.0.tgz#94759942f70af18c617189aa7f3593f1644a71ab"
+  dependencies:
+    babel-helper-builder-react-jsx "^6.8.0"
+    babel-plugin-syntax-jsx "^6.8.0"
+    babel-runtime "^6.0.0"
+
+babel-plugin-transform-regenerator@^6.16.0:
+  version "6.16.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.16.1.tgz#a75de6b048a14154aae14b0122756c5bed392f59"
+  dependencies:
+    babel-runtime "^6.9.0"
+    babel-types "^6.16.0"
+    private "~0.1.5"
+
+babel-plugin-transform-strict-mode@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.18.0.tgz#df7cf2991fe046f44163dcd110d5ca43bc652b9d"
+  dependencies:
+    babel-runtime "^6.0.0"
+    babel-types "^6.18.0"
+
+babel-polyfill@^6.16.0:
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.16.0.tgz#2d45021df87e26a374b6d4d1a9c65964d17f2422"
+  dependencies:
+    babel-runtime "^6.9.1"
+    core-js "^2.4.0"
+    regenerator-runtime "^0.9.5"
+
+babel-preset-es2015@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-es2015/-/babel-preset-es2015-6.18.0.tgz#b8c70df84ec948c43dcf2bf770e988eb7da88312"
+  dependencies:
+    babel-plugin-check-es2015-constants "^6.3.13"
+    babel-plugin-transform-es2015-arrow-functions "^6.3.13"
+    babel-plugin-transform-es2015-block-scoped-functions "^6.3.13"
+    babel-plugin-transform-es2015-block-scoping "^6.18.0"
+    babel-plugin-transform-es2015-classes "^6.18.0"
+    babel-plugin-transform-es2015-computed-properties "^6.3.13"
+    babel-plugin-transform-es2015-destructuring "^6.18.0"
+    babel-plugin-transform-es2015-duplicate-keys "^6.6.0"
+    babel-plugin-transform-es2015-for-of "^6.18.0"
+    babel-plugin-transform-es2015-function-name "^6.9.0"
+    babel-plugin-transform-es2015-literals "^6.3.13"
+    babel-plugin-transform-es2015-modules-amd "^6.18.0"
+    babel-plugin-transform-es2015-modules-commonjs "^6.18.0"
+    babel-plugin-transform-es2015-modules-systemjs "^6.18.0"
+    babel-plugin-transform-es2015-modules-umd "^6.18.0"
+    babel-plugin-transform-es2015-object-super "^6.3.13"
+    babel-plugin-transform-es2015-parameters "^6.18.0"
+    babel-plugin-transform-es2015-shorthand-properties "^6.18.0"
+    babel-plugin-transform-es2015-spread "^6.3.13"
+    babel-plugin-transform-es2015-sticky-regex "^6.3.13"
+    babel-plugin-transform-es2015-template-literals "^6.6.0"
+    babel-plugin-transform-es2015-typeof-symbol "^6.18.0"
+    babel-plugin-transform-es2015-unicode-regex "^6.3.13"
+    babel-plugin-transform-regenerator "^6.16.0"
+
+babel-preset-react@^6.16.0:
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-react/-/babel-preset-react-6.16.0.tgz#aa117d60de0928607e343c4828906e4661824316"
+  dependencies:
+    babel-plugin-syntax-flow "^6.3.13"
+    babel-plugin-syntax-jsx "^6.3.13"
+    babel-plugin-transform-flow-strip-types "^6.3.13"
+    babel-plugin-transform-react-display-name "^6.3.13"
+    babel-plugin-transform-react-jsx "^6.3.13"
+    babel-plugin-transform-react-jsx-self "^6.11.0"
+    babel-plugin-transform-react-jsx-source "^6.3.13"
+
+babel-preset-stage-0@^6.16.0:
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-stage-0/-/babel-preset-stage-0-6.16.0.tgz#f5a263c420532fd57491f1a7315b3036e428f823"
+  dependencies:
+    babel-plugin-transform-do-expressions "^6.3.13"
+    babel-plugin-transform-function-bind "^6.3.13"
+    babel-preset-stage-1 "^6.16.0"
+
+babel-preset-stage-1@^6.16.0:
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-stage-1/-/babel-preset-stage-1-6.16.0.tgz#9d31fbbdae7b17c549fd3ac93e3cf6902695e479"
+  dependencies:
+    babel-plugin-transform-class-constructor-call "^6.3.13"
+    babel-plugin-transform-export-extensions "^6.3.13"
+    babel-preset-stage-2 "^6.16.0"
+
+babel-preset-stage-2@^6.16.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-stage-2/-/babel-preset-stage-2-6.18.0.tgz#9eb7bf9a8e91c68260d5ba7500493caaada4b5b5"
+  dependencies:
+    babel-plugin-syntax-dynamic-import "^6.18.0"
+    babel-plugin-transform-class-properties "^6.18.0"
+    babel-plugin-transform-decorators "^6.13.0"
+    babel-preset-stage-3 "^6.17.0"
+
+babel-preset-stage-3@^6.17.0:
+  version "6.17.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-stage-3/-/babel-preset-stage-3-6.17.0.tgz#b6638e46db6e91e3f889013d8ce143917c685e39"
+  dependencies:
+    babel-plugin-syntax-trailing-function-commas "^6.3.13"
+    babel-plugin-transform-async-generator-functions "^6.17.0"
+    babel-plugin-transform-async-to-generator "^6.16.0"
+    babel-plugin-transform-exponentiation-operator "^6.3.13"
+    babel-plugin-transform-object-rest-spread "^6.16.0"
+
+babel-register@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.18.0.tgz#892e2e03865078dd90ad2c715111ec4449b32a68"
+  dependencies:
+    babel-core "^6.18.0"
+    babel-runtime "^6.11.6"
+    core-js "^2.4.0"
+    home-or-tmp "^2.0.0"
+    lodash "^4.2.0"
+    mkdirp "^0.5.1"
+    source-map-support "^0.4.2"
+
+babel-runtime@^6.0.0, babel-runtime@^6.11.6, babel-runtime@^6.9.0, babel-runtime@^6.9.1, babel-runtime@^6.9.2:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.18.0.tgz#0f4177ffd98492ef13b9f823e9994a02584c9078"
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.9.5"
+
+babel-template@^6.14.0, babel-template@^6.15.0, babel-template@^6.16.0, babel-template@^6.8.0:
+  version "6.16.0"
+  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.16.0.tgz#e149dd1a9f03a35f817ddbc4d0481988e7ebc8ca"
+  dependencies:
+    babel-runtime "^6.9.0"
+    babel-traverse "^6.16.0"
+    babel-types "^6.16.0"
+    babylon "^6.11.0"
+    lodash "^4.2.0"
+
+babel-traverse@^6.15.0, babel-traverse@^6.16.0, babel-traverse@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.18.0.tgz#5aeaa980baed2a07c8c47329cd90c3b90c80f05e"
+  dependencies:
+    babel-code-frame "^6.16.0"
+    babel-messages "^6.8.0"
+    babel-runtime "^6.9.0"
+    babel-types "^6.18.0"
+    babylon "^6.11.0"
+    debug "^2.2.0"
+    globals "^9.0.0"
+    invariant "^2.2.0"
+    lodash "^4.2.0"
+
+babel-types@^6.13.0, babel-types@^6.15.0, babel-types@^6.16.0, babel-types@^6.18.0, babel-types@^6.8.0, babel-types@^6.9.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.18.0.tgz#1f7d5a73474c59eb9151b2417bbff4e4fce7c3f8"
+  dependencies:
+    babel-runtime "^6.9.1"
+    esutils "^2.0.2"
+    lodash "^4.2.0"
+    to-fast-properties "^1.0.1"
+
+babylon@^6.11.0, babylon@^6.13.0:
+  version "6.13.1"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.13.1.tgz#adca350e088f0467647157652bafead6ddb8dfdb"
+
+backo2@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947"
+
+balanced-match@^0.4.1, balanced-match@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838"
+
+balanced-match@~0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.1.0.tgz#b504bd05869b39259dd0c5efc35d843176dccc4a"
+
+base64-arraybuffer@0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.1.2.tgz#474df4a9f2da24e05df3158c3b1db3c3cd46a154"
+
+base64-js@^1.0.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.0.tgz#a39992d723584811982be5e290bb6a53d86700f1"
+
+base64id@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/base64id/-/base64id-0.1.0.tgz#02ce0fdeee0cef4f40080e1e73e834f0b1bfce3f"
+
+bcrypt-pbkdf@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.0.tgz#3ca76b85241c7170bf7d9703e7b9aa74630040d4"
+  dependencies:
+    tweetnacl "^0.14.3"
+
+benchmark@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/benchmark/-/benchmark-1.0.0.tgz#2f1e2fa4c359f11122aa183082218e957e390c73"
+
+better-assert@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/better-assert/-/better-assert-1.0.2.tgz#40866b9e1b9e0b55b481894311e68faffaebc522"
+  dependencies:
+    callsite "1.0.0"
+
+big.js@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.1.3.tgz#4cada2193652eb3ca9ec8e55c9015669c9806978"
+
+binary-extensions@^1.0.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.7.0.tgz#6c1610db163abfb34edfe42fa423343a1e01185d"
+
+bl@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/bl/-/bl-1.1.2.tgz#fdca871a99713aa00d19e3bbba41c44787a65398"
+  dependencies:
+    readable-stream "~2.0.5"
+
+blob@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/blob/-/blob-0.0.4.tgz#bcf13052ca54463f30f9fc7e95b9a47630a94921"
+
+block-stream@*:
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
+  dependencies:
+    inherits "~2.0.0"
+
+bluebird@^3.3.0:
+  version "3.4.6"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.4.6.tgz#01da8d821d87813d158967e743d5fe6c62cf8c0f"
+
+bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
+  version "4.11.6"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.6.tgz#53344adb14617a13f6e8dd2ce28905d1c0ba3215"
+
+body-parser@^1.12.4:
+  version "1.15.2"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.15.2.tgz#d7578cf4f1d11d5f6ea804cef35dc7a7ff6dae67"
+  dependencies:
+    bytes "2.4.0"
+    content-type "~1.0.2"
+    debug "~2.2.0"
+    depd "~1.1.0"
+    http-errors "~1.5.0"
+    iconv-lite "0.4.13"
+    on-finished "~2.3.0"
+    qs "6.2.0"
+    raw-body "~2.1.7"
+    type-is "~1.6.13"
+
+boom@2.x.x:
+  version "2.10.1"
+  resolved "https://registry.yarnpkg.com/boom/-/boom-2.10.1.tgz#39c8918ceff5799f83f9492a848f625add0c766f"
+  dependencies:
+    hoek "2.x.x"
+
+brace-expansion@^1.0.0:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.6.tgz#7197d7eaa9b87e648390ea61fc66c84427420df9"
+  dependencies:
+    balanced-match "^0.4.1"
+    concat-map "0.0.1"
+
+braces@^0.1.2:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-0.1.5.tgz#c085711085291d8b75fdd74eab0f8597280711e6"
+  dependencies:
+    expand-range "^0.1.0"
+
+braces@^1.8.2:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
+  dependencies:
+    expand-range "^1.8.1"
+    preserve "^0.2.0"
+    repeat-element "^1.1.2"
+
+brorand@^1.0.1:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.0.6.tgz#4028706b915f91f7b349a2e0bf3c376039d216e5"
+
+browser-stdout@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/browser-stdout/-/browser-stdout-1.3.0.tgz#f351d32969d32fa5d7a5567154263d928ae3bd1f"
+
+browserify-aes@^1.0.0, browserify-aes@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.0.6.tgz#5e7725dbdef1fd5930d4ebab48567ce451c48a0a"
+  dependencies:
+    buffer-xor "^1.0.2"
+    cipher-base "^1.0.0"
+    create-hash "^1.1.0"
+    evp_bytestokey "^1.0.0"
+    inherits "^2.0.1"
+
+browserify-cipher@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/browserify-cipher/-/browserify-cipher-1.0.0.tgz#9988244874bf5ed4e28da95666dcd66ac8fc363a"
+  dependencies:
+    browserify-aes "^1.0.4"
+    browserify-des "^1.0.0"
+    evp_bytestokey "^1.0.0"
+
+browserify-des@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/browserify-des/-/browserify-des-1.0.0.tgz#daa277717470922ed2fe18594118a175439721dd"
+  dependencies:
+    cipher-base "^1.0.1"
+    des.js "^1.0.0"
+    inherits "^2.0.1"
+
+browserify-rsa@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.0.1.tgz#21e0abfaf6f2029cf2fafb133567a701d4135524"
+  dependencies:
+    bn.js "^4.1.0"
+    randombytes "^2.0.1"
+
+browserify-sign@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.0.0.tgz#10773910c3c206d5420a46aad8694f820b85968f"
+  dependencies:
+    bn.js "^4.1.1"
+    browserify-rsa "^4.0.0"
+    create-hash "^1.1.0"
+    create-hmac "^1.1.2"
+    elliptic "^6.0.0"
+    inherits "^2.0.1"
+    parse-asn1 "^5.0.0"
+
+browserify-zlib@~0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.1.4.tgz#bb35f8a519f600e0fa6b8485241c979d0141fb2d"
+  dependencies:
+    pako "~0.2.0"
+
+browserslist@~1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.4.0.tgz#9cfdcf5384d9158f5b70da2aa00b30e8ff019049"
+  dependencies:
+    caniuse-db "^1.0.30000539"
+
+buffer-shims@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/buffer-shims/-/buffer-shims-1.0.0.tgz#9978ce317388c649ad8793028c3477ef044a8b51"
+
+buffer-xor@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9"
+
+buffer@^4.3.0, buffer@^4.9.0:
+  version "4.9.1"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.1.tgz#6d1bb601b07a4efced97094132093027c95bc298"
+  dependencies:
+    base64-js "^1.0.2"
+    ieee754 "^1.1.4"
+    isarray "^1.0.0"
+
+builtin-modules@^1.0.0, builtin-modules@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
+
+bytes@2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-2.4.0.tgz#7d97196f9d5baf7f6935e25985549edd2a6c2339"
+
+caller-path@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-0.1.0.tgz#94085ef63581ecd3daa92444a8fe94e82577751f"
+  dependencies:
+    callsites "^0.2.0"
+
+callsite@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/callsite/-/callsite-1.0.0.tgz#280398e5d664bd74038b6f0905153e6e8af1bc20"
+
+callsites@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/callsites/-/callsites-0.2.0.tgz#afab96262910a7f33c19a5775825c69f34e350ca"
+
+camelcase-keys@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7"
+  dependencies:
+    camelcase "^2.0.0"
+    map-obj "^1.0.0"
+
+camelcase@^1.0.2:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
+
+camelcase@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
+
+camelcase@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
+
+caniuse-db@^1.0.30000539, caniuse-db@^1.0.30000578:
+  version "1.0.30000584"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000584.tgz#cfbce897a48145fa73f96d893025581e838648c4"
+
+caseless@~0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.11.0.tgz#715b96ea9841593cc33067923f5ec60ebda4f7d7"
+
+center-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/center-align/-/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad"
+  dependencies:
+    align-text "^0.1.3"
+    lazy-cache "^1.0.3"
+
+chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
+  dependencies:
+    ansi-styles "^2.2.1"
+    escape-string-regexp "^1.0.2"
+    has-ansi "^2.0.0"
+    strip-ansi "^3.0.0"
+    supports-color "^2.0.0"
+
+chokidar@^1.0.0, chokidar@^1.4.1, chokidar@^1.6.0:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.6.1.tgz#2f4447ab5e96e50fb3d789fd90d4c72e0e4c70c2"
+  dependencies:
+    anymatch "^1.3.0"
+    async-each "^1.0.0"
+    glob-parent "^2.0.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^2.0.0"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+  optionalDependencies:
+    fsevents "^1.0.0"
+
+cipher-base@^1.0.0, cipher-base@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.3.tgz#eeabf194419ce900da3018c207d212f2a6df0a07"
+  dependencies:
+    inherits "^2.0.1"
+
+circular-json@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.1.tgz#be8b36aefccde8b3ca7aa2d6afc07a37242c0d2d"
+
+clap@^1.0.9:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/clap/-/clap-1.1.1.tgz#a8a93e0bfb7581ac199c4f001a5525a724ce696d"
+  dependencies:
+    chalk "^1.1.3"
+
+classnames@^2.2.5:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
+
+cli-cursor@^1.0.1, cli-cursor@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-1.0.2.tgz#64da3f7d56a54412e59794bd62dc35295e8f2987"
+  dependencies:
+    restore-cursor "^1.0.1"
+
+cli-spinners@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-0.1.2.tgz#bb764d88e185fb9e1e6a2a1f19772318f605e31c"
+
+cli-truncate@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/cli-truncate/-/cli-truncate-0.2.1.tgz#9f15cfbb0705005369216c626ac7d05ab90dd574"
+  dependencies:
+    slice-ansi "0.0.4"
+    string-width "^1.0.1"
+
+cli-width@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.1.0.tgz#b234ca209b29ef66fc518d9b98d5847b00edf00a"
+
+cliui@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
+  dependencies:
+    center-align "^0.1.1"
+    right-align "^0.1.1"
+    wordwrap "0.0.2"
+
+cliui@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
+  dependencies:
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wrap-ansi "^2.0.0"
+
+clone@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.2.tgz#260b7a99ebb1edfe247538175f783243cb19d149"
+
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+
+coa@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/coa/-/coa-1.0.1.tgz#7f959346cfc8719e3f7233cd6852854a7c67d8a3"
+  dependencies:
+    q "^1.1.2"
+
+code-point-at@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.0.1.tgz#1104cd34f9b5b45d3eba88f1babc1924e1ce35fb"
+  dependencies:
+    number-is-nan "^1.0.0"
+
+color-convert@^1.3.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.5.0.tgz#7a2b4efb4488df85bca6443cb038b7100fbe7de1"
+
+color-name@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.1.tgz#4b1415304cf50028ea81643643bd82ea05803689"
+
+color-string@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-0.3.0.tgz#27d46fb67025c5c2fa25993bfbf579e47841b991"
+  dependencies:
+    color-name "^1.0.0"
+
+color@^0.11.0:
+  version "0.11.3"
+  resolved "https://registry.yarnpkg.com/color/-/color-0.11.3.tgz#4bad1d0d52499dd00dbd6f0868442467e49394e6"
+  dependencies:
+    clone "^1.0.2"
+    color-convert "^1.3.0"
+    color-string "^0.3.0"
+
+colormin@^1.0.5:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/colormin/-/colormin-1.1.2.tgz#ea2f7420a72b96881a38aae59ec124a6f7298133"
+  dependencies:
+    color "^0.11.0"
+    css-color-names "0.0.4"
+    has "^1.0.1"
+
+colors@^1.1.0, colors@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
+
+combine-lists@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/combine-lists/-/combine-lists-1.0.1.tgz#458c07e09e0d900fc28b70a3fec2dacd1d2cb7f6"
+  dependencies:
+    lodash "^4.5.0"
+
+combined-stream@^1.0.5, combined-stream@~1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009"
+  dependencies:
+    delayed-stream "~1.0.0"
+
+commander@2.9.0, commander@^2.8.1, commander@^2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
+  dependencies:
+    graceful-readlink ">= 1.0.0"
+
+commondir@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
+
+component-bind@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/component-bind/-/component-bind-1.0.0.tgz#00c608ab7dcd93897c0009651b1d3a8e1e73bbd1"
+
+component-emitter@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.1.2.tgz#296594f2753daa63996d2af08d15a95116c9aec3"
+
+component-emitter@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.0.tgz#ccd113a86388d06482d03de3fc7df98526ba8efe"
+
+component-inherit@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/component-inherit/-/component-inherit-0.0.3.tgz#645fc4adf58b72b649d5cae65135619db26ff143"
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+
+concat-stream@1.5.0, concat-stream@^1.4.6, concat-stream@^1.4.7:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.5.0.tgz#53f7d43c51c5e43f81c8fdd03321c631be68d611"
+  dependencies:
+    inherits "~2.0.1"
+    readable-stream "~2.0.0"
+    typedarray "~0.0.5"
+
+connect@^3.3.5:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/connect/-/connect-3.5.0.tgz#b357525a0b4c1f50599cd983e1d9efeea9677198"
+  dependencies:
+    debug "~2.2.0"
+    finalhandler "0.5.0"
+    parseurl "~1.3.1"
+    utils-merge "1.0.0"
+
+console-browserify@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10"
+  dependencies:
+    date-now "^0.1.4"
+
+console-control-strings@^1.0.0, console-control-strings@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
+
+constants-browserify@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-0.0.1.tgz#92577db527ba6c4cf0a4568d84bc031f441e21f2"
+
+constants-browserify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
+
+contains-path@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/contains-path/-/contains-path-0.1.0.tgz#fe8cf184ff6670b6baef01a9d4861a5cbec4120a"
+
+content-disposition@0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.1.tgz#87476c6a67c8daa87e32e87616df883ba7fb071b"
+
+content-type@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.2.tgz#b7d113aee7a8dd27bd21133c4dc2529df1721eed"
+
+convert-source-map@^1.1.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.3.0.tgz#e9f3e9c6e2728efc2676696a70eb382f73106a67"
+
+cookie-signature@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
+
+cookie@0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
+
+core-js@^1.0.0:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
+
+core-js@^2.2.0, core-js@^2.4.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.4.1.tgz#4de911e667b0eae9124e34254b53aea6fc618d3e"
+
+core-util-is@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
+
+cosmiconfig@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-1.1.0.tgz#0dea0f9804efdfb929fbb1b188e25553ea053d37"
+  dependencies:
+    graceful-fs "^4.1.2"
+    js-yaml "^3.4.3"
+    minimist "^1.2.0"
+    object-assign "^4.0.1"
+    os-homedir "^1.0.1"
+    parse-json "^2.2.0"
+    pinkie-promise "^2.0.0"
+    require-from-string "^1.1.0"
+
+cosmiconfig@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-2.1.0.tgz#26e384a2055ea4e087050e5e08d53eb4eac8f86e"
+  dependencies:
+    graceful-fs "^4.1.2"
+    js-yaml "^3.4.3"
+    minimist "^1.2.0"
+    object-assign "^4.1.0"
+    os-homedir "^1.0.1"
+    parse-json "^2.2.0"
+    require-from-string "^1.1.0"
+
+cpx@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/cpx/-/cpx-1.5.0.tgz#185be018511d87270dedccc293171e37655ab88f"
+  dependencies:
+    babel-runtime "^6.9.2"
+    chokidar "^1.6.0"
+    duplexer "^0.1.1"
+    glob "^7.0.5"
+    glob2base "^0.0.12"
+    minimatch "^3.0.2"
+    mkdirp "^0.5.1"
+    resolve "^1.1.7"
+    safe-buffer "^5.0.1"
+    shell-quote "^1.6.1"
+    subarg "^1.0.0"
+
+create-ecdh@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.0.tgz#888c723596cdf7612f6498233eebd7a35301737d"
+  dependencies:
+    bn.js "^4.1.0"
+    elliptic "^6.0.0"
+
+create-hash@^1.1.0, create-hash@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.1.2.tgz#51210062d7bb7479f6c65bb41a92208b1d61abad"
+  dependencies:
+    cipher-base "^1.0.1"
+    inherits "^2.0.1"
+    ripemd160 "^1.0.0"
+    sha.js "^2.3.6"
+
+create-hmac@^1.1.0, create-hmac@^1.1.2:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/create-hmac/-/create-hmac-1.1.4.tgz#d3fb4ba253eb8b3f56e39ea2fbcb8af747bd3170"
+  dependencies:
+    create-hash "^1.1.0"
+    inherits "^2.0.1"
+
+cross-env@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-3.1.3.tgz#58cd8231808f50089708b091f7dd37275a8e8154"
+  dependencies:
+    cross-spawn "^3.0.1"
+
+cross-spawn-async@^2.0.0:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/cross-spawn-async/-/cross-spawn-async-2.2.5.tgz#845ff0c0834a3ded9d160daca6d390906bb288cc"
+  dependencies:
+    lru-cache "^4.0.0"
+    which "^1.2.8"
+
+cross-spawn@2.0.x:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-2.0.1.tgz#ab6fd893a099759d9b85220e3a64397de946b0f6"
+  dependencies:
+    cross-spawn-async "^2.0.0"
+    spawn-sync "1.0.13"
+
+cross-spawn@^3.0.0, cross-spawn@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-3.0.1.tgz#1256037ecb9f0c5f79e3d6ef135e30770184b982"
+  dependencies:
+    lru-cache "^4.0.1"
+    which "^1.2.9"
+
+cross-spawn@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-4.0.2.tgz#7b9247621c23adfdd3856004a823cbe397424d41"
+  dependencies:
+    lru-cache "^4.0.1"
+    which "^1.2.9"
+
+cryptiles@2.x.x:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-2.0.5.tgz#3bdfecdc608147c1c67202fa291e7dca59eaa3b8"
+  dependencies:
+    boom "2.x.x"
+
+crypto-browserify@^3.11.0:
+  version "3.11.0"
+  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.11.0.tgz#3652a0906ab9b2a7e0c3ce66a408e957a2485522"
+  dependencies:
+    browserify-cipher "^1.0.0"
+    browserify-sign "^4.0.0"
+    create-ecdh "^4.0.0"
+    create-hash "^1.1.0"
+    create-hmac "^1.1.0"
+    diffie-hellman "^5.0.0"
+    inherits "^2.0.1"
+    pbkdf2 "^3.0.3"
+    public-encrypt "^4.0.0"
+    randombytes "^2.0.0"
+
+crypto-browserify@~3.2.6:
+  version "3.2.8"
+  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.2.8.tgz#b9b11dbe6d9651dd882a01e6cc467df718ecf189"
+  dependencies:
+    pbkdf2-compat "2.0.1"
+    ripemd160 "0.2.0"
+    sha.js "2.2.6"
+
+css-color-names@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
+
+css-loader@^0.26.0:
+  version "0.26.0"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.26.0.tgz#160d378f5b8e0fd4ff6daf4f3580e2219b33025f"
+  dependencies:
+    babel-code-frame "^6.11.0"
+    css-selector-tokenizer "^0.7.0"
+    cssnano ">=2.6.1 <4"
+    loader-utils "~0.2.2"
+    lodash.camelcase "^4.3.0"
+    object-assign "^4.0.1"
+    postcss "^5.0.6"
+    postcss-modules-extract-imports "^1.0.0"
+    postcss-modules-local-by-default "^1.0.1"
+    postcss-modules-scope "^1.0.0"
+    postcss-modules-values "^1.1.0"
+    source-list-map "^0.1.4"
+
+css-selector-tokenizer@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.6.0.tgz#6445f582c7930d241dcc5007a43d6fcb8f073152"
+  dependencies:
+    cssesc "^0.1.0"
+    fastparse "^1.1.1"
+    regexpu-core "^1.0.0"
+
+css-selector-tokenizer@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.0.tgz#e6988474ae8c953477bf5e7efecfceccd9cf4c86"
+  dependencies:
+    cssesc "^0.1.0"
+    fastparse "^1.1.1"
+    regexpu-core "^1.0.0"
+
+cssesc@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
+
+"cssnano@>=2.6.1 <4":
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-3.8.0.tgz#bb90ac5292f42b679d9a05f6da0e9697556bb80d"
+  dependencies:
+    autoprefixer "^6.3.1"
+    decamelize "^1.1.2"
+    defined "^1.0.0"
+    has "^1.0.1"
+    object-assign "^4.0.1"
+    postcss "^5.0.14"
+    postcss-calc "^5.2.0"
+    postcss-colormin "^2.1.8"
+    postcss-convert-values "^2.3.4"
+    postcss-discard-comments "^2.0.4"
+    postcss-discard-duplicates "^2.0.1"
+    postcss-discard-empty "^2.0.1"
+    postcss-discard-overridden "^0.1.1"
+    postcss-discard-unused "^2.2.1"
+    postcss-filter-plugins "^2.0.0"
+    postcss-merge-idents "^2.1.5"
+    postcss-merge-longhand "^2.0.1"
+    postcss-merge-rules "^2.0.3"
+    postcss-minify-font-values "^1.0.2"
+    postcss-minify-gradients "^1.0.1"
+    postcss-minify-params "^1.0.4"
+    postcss-minify-selectors "^2.0.4"
+    postcss-normalize-charset "^1.1.0"
+    postcss-normalize-url "^3.0.7"
+    postcss-ordered-values "^2.1.0"
+    postcss-reduce-idents "^2.2.2"
+    postcss-reduce-initial "^1.0.0"
+    postcss-reduce-transforms "^1.0.3"
+    postcss-svgo "^2.1.1"
+    postcss-unique-selectors "^2.0.2"
+    postcss-value-parser "^3.2.3"
+    postcss-zindex "^2.0.1"
+
+csso@~2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-2.2.1.tgz#51fbb5347e50e81e6ed51668a48490ae6fe2afe2"
+  dependencies:
+    clap "^1.0.9"
+    source-map "^0.5.3"
+
+currently-unhandled@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
+  dependencies:
+    array-find-index "^1.0.1"
+
+custom-event@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/custom-event/-/custom-event-1.0.1.tgz#5d02a46850adf1b4a317946a3928fccb5bfd0425"
+
+d@^0.1.1, d@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/d/-/d-0.1.1.tgz#da184c535d18d8ee7ba2aa229b914009fae11309"
+  dependencies:
+    es5-ext "~0.10.2"
+
+damerau-levenshtein@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.3.tgz#ae4f4ce0b62acae10ff63a01bb08f652f5213af2"
+
+dashdash@^1.12.0:
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.0.tgz#29e486c5418bf0f356034a993d51686a33e84141"
+  dependencies:
+    assert-plus "^1.0.0"
+
+date-now@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
+
+debug@0.7.4:
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-0.7.4.tgz#06e1ea8082c2cb14e39806e22e2f6f757f92af39"
+
+debug@2.2.0, debug@^2.1.1, debug@^2.2.0, debug@~2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.2.0.tgz#f87057e995b1a1f6ae6a4960664137bc56f039da"
+  dependencies:
+    ms "0.7.1"
+
+decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+
+deep-extend@~0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.1.tgz#efe4113d08085f4e6f9687759810f807469e2253"
+
+deep-is@~0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
+
+define-properties@^1.1.1, define-properties@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.2.tgz#83a73f2fea569898fb737193c8f873caf6d45c94"
+  dependencies:
+    foreach "^2.0.5"
+    object-keys "^1.0.8"
+
+defined@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
+
+del@^2.0.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/del/-/del-2.2.2.tgz#c12c981d067846c84bcaf862cff930d907ffd1a8"
+  dependencies:
+    globby "^5.0.0"
+    is-path-cwd "^1.0.0"
+    is-path-in-cwd "^1.0.0"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+    rimraf "^2.2.8"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+
+delegates@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
+
+depd@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.0.tgz#e1bd82c6aab6ced965b97b88b17ed3e528ca18c3"
+
+des.js@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.0.tgz#c074d2e2aa6a8a9a07dbd61f9a15c2cd83ec8ecc"
+  dependencies:
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+
+destroy@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
+
+detect-indent@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-4.0.0.tgz#f76d064352cdf43a1cb6ce619c4ee3a9475de208"
+  dependencies:
+    repeating "^2.0.0"
+
+di@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/di/-/di-0.0.1.tgz#806649326ceaa7caa3306d75d985ea2748ba913c"
+
+diff@1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-1.4.0.tgz#7f28d2eb9ee7b15a97efd89ce63dcfdaa3ccbabf"
+
+diffie-hellman@^5.0.0:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.2.tgz#b5835739270cfe26acf632099fded2a07f209e5e"
+  dependencies:
+    bn.js "^4.1.0"
+    miller-rabin "^4.0.0"
+    randombytes "^2.0.0"
+
+doctrine@1.5.0, doctrine@^1.2.2:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.5.0.tgz#379dce730f6166f76cefa4e6707a159b02c5a6fa"
+  dependencies:
+    esutils "^2.0.2"
+    isarray "^1.0.0"
+
+dom-serialize@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/dom-serialize/-/dom-serialize-2.2.1.tgz#562ae8999f44be5ea3076f5419dcd59eb43ac95b"
+  dependencies:
+    custom-event "~1.0.0"
+    ent "~2.2.0"
+    extend "^3.0.0"
+    void-elements "^2.0.0"
+
+dom-walk@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"
+
+domain-browser@^1.1.1:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
+
+duplexer@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
+
+ecc-jsbn@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
+  dependencies:
+    jsbn "~0.1.0"
+
+ee-first@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+
+elegant-spinner@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/elegant-spinner/-/elegant-spinner-1.0.1.tgz#db043521c95d7e303fd8f345bedc3349cfb0729e"
+
+elliptic@^6.0.0:
+  version "6.3.2"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.3.2.tgz#e4c81e0829cf0a65ab70e998b8232723b5c1bc48"
+  dependencies:
+    bn.js "^4.4.0"
+    brorand "^1.0.1"
+    hash.js "^1.0.0"
+    inherits "^2.0.1"
+
+emojis-list@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
+
+encodeurl@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20"
+
+encoding@^0.1.11:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
+  dependencies:
+    iconv-lite "~0.4.13"
+
+engine.io-client@1.6.9:
+  version "1.6.9"
+  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-1.6.9.tgz#1d6ad48048a5083c95096943b29d36efdb212401"
+  dependencies:
+    component-emitter "1.1.2"
+    component-inherit "0.0.3"
+    debug "2.2.0"
+    engine.io-parser "1.2.4"
+    has-cors "1.1.0"
+    indexof "0.0.1"
+    parsejson "0.0.1"
+    parseqs "0.0.2"
+    parseuri "0.0.4"
+    ws "1.0.1"
+    xmlhttprequest-ssl "1.5.1"
+    yeast "0.1.2"
+
+engine.io-parser@1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-1.2.4.tgz#e0897b0bf14e792d4cd2a5950553919c56948c42"
+  dependencies:
+    after "0.8.1"
+    arraybuffer.slice "0.0.6"
+    base64-arraybuffer "0.1.2"
+    blob "0.0.4"
+    has-binary "0.1.6"
+    utf8 "2.1.0"
+
+engine.io@1.6.10:
+  version "1.6.10"
+  resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-1.6.10.tgz#f87d84e1bd21d1a2ec7f8deef0c62054acdfb27a"
+  dependencies:
+    accepts "1.1.4"
+    base64id "0.1.0"
+    debug "2.2.0"
+    engine.io-parser "1.2.4"
+    ws "1.0.1"
+
+enhanced-resolve@~0.9.0:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-0.9.1.tgz#4d6e689b3725f86090927ccc86cd9f1635b89e2e"
+  dependencies:
+    graceful-fs "^4.1.2"
+    memory-fs "^0.2.0"
+    tapable "^0.1.8"
+
+ent@~2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/ent/-/ent-2.2.0.tgz#e964219325a21d05f44466a2f686ed6ce5f5dd1d"
+
+errno@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.4.tgz#b896e23a9e5e8ba33871fc996abd3635fc9a1c7d"
+  dependencies:
+    prr "~0.0.0"
+
+error-ex@^1.2.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.0.tgz#e67b43f3e82c96ea3a584ffee0b9fc3325d802d9"
+  dependencies:
+    is-arrayish "^0.2.1"
+
+error-stack-parser@^1.3.6:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-1.3.6.tgz#e0e73b93e417138d1cd7c0b746b1a4a14854c292"
+  dependencies:
+    stackframe "^0.3.1"
+
+es-abstract@^1.3.2:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.6.1.tgz#bb8a2064120abcf928a086ea3d9043114285ec99"
+  dependencies:
+    es-to-primitive "^1.1.1"
+    function-bind "^1.1.0"
+    is-callable "^1.1.3"
+    is-regex "^1.0.3"
+
+es-to-primitive@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.1.1.tgz#45355248a88979034b6792e19bb81f2b7975dd0d"
+  dependencies:
+    is-callable "^1.1.1"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.1"
+
+es5-ext@^0.10.7, es5-ext@^0.10.8, es5-ext@~0.10.11, es5-ext@~0.10.2, es5-ext@~0.10.7:
+  version "0.10.12"
+  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.12.tgz#aa84641d4db76b62abba5e45fd805ecbab140047"
+  dependencies:
+    es6-iterator "2"
+    es6-symbol "~3.1"
+
+es6-iterator@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.0.tgz#bd968567d61635e33c0b80727613c9cb4b096bac"
+  dependencies:
+    d "^0.1.1"
+    es5-ext "^0.10.7"
+    es6-symbol "3"
+
+es6-map@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/es6-map/-/es6-map-0.1.4.tgz#a34b147be224773a4d7da8072794cefa3632b897"
+  dependencies:
+    d "~0.1.1"
+    es5-ext "~0.10.11"
+    es6-iterator "2"
+    es6-set "~0.1.3"
+    es6-symbol "~3.1.0"
+    event-emitter "~0.3.4"
+
+es6-promise@~4.0.3:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.0.5.tgz#7882f30adde5b240ccfa7f7d78c548330951ae42"
+
+es6-set@~0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/es6-set/-/es6-set-0.1.4.tgz#9516b6761c2964b92ff479456233a247dc707ce8"
+  dependencies:
+    d "~0.1.1"
+    es5-ext "~0.10.11"
+    es6-iterator "2"
+    es6-symbol "3"
+    event-emitter "~0.3.4"
+
+es6-symbol@3, es6-symbol@^3.0.2, es6-symbol@~3.1, es6-symbol@~3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.0.tgz#94481c655e7a7cad82eba832d97d5433496d7ffa"
+  dependencies:
+    d "~0.1.1"
+    es5-ext "~0.10.11"
+
+es6-weak-map@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/es6-weak-map/-/es6-weak-map-2.0.1.tgz#0d2bbd8827eb5fb4ba8f97fbfea50d43db21ea81"
+  dependencies:
+    d "^0.1.1"
+    es5-ext "^0.10.8"
+    es6-iterator "2"
+    es6-symbol "3"
+
+escape-html@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
+
+escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+
+escope@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/escope/-/escope-3.6.0.tgz#e01975e812781a163a6dadfdd80398dc64c889c3"
+  dependencies:
+    es6-map "^0.1.3"
+    es6-weak-map "^2.0.1"
+    esrecurse "^4.1.0"
+    estraverse "^4.1.1"
+
+eslint-import-resolver-node@^0.2.0:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.2.3.tgz#5add8106e8c928db2cba232bcd9efa846e3da16c"
+  dependencies:
+    debug "^2.2.0"
+    object-assign "^4.0.1"
+    resolve "^1.1.6"
+
+eslint-import-resolver-webpack@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-webpack/-/eslint-import-resolver-webpack-0.7.0.tgz#25c755b593f2533be69235bd6c65aa7c5285fb68"
+  dependencies:
+    array-find "^1.0.0"
+    debug "^2.2.0"
+    enhanced-resolve "~0.9.0"
+    find-root "^0.1.1"
+    interpret "^1.0.0"
+    is-absolute "^0.2.3"
+    lodash.get "^3.7.0"
+    node-libs-browser "^1.0.0"
+    resolve "^1.1.7"
+    semver "^5.3.0"
+
+eslint-module-utils@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.0.0.tgz#a6f8c21d901358759cdc35dbac1982ae1ee58bce"
+  dependencies:
+    debug "2.2.0"
+    pkg-dir "^1.0.0"
+
+eslint-plugin-babel@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-babel/-/eslint-plugin-babel-4.0.0.tgz#a92114e2c493ac3034b030d7ecf96e174a76ef3f"
+
+eslint-plugin-import@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.2.0.tgz#72ba306fad305d67c4816348a4699a4229ac8b4e"
+  dependencies:
+    builtin-modules "^1.1.1"
+    contains-path "^0.1.0"
+    debug "^2.2.0"
+    doctrine "1.5.0"
+    eslint-import-resolver-node "^0.2.0"
+    eslint-module-utils "^2.0.0"
+    has "^1.0.1"
+    lodash.cond "^4.3.0"
+    minimatch "^3.0.3"
+    pkg-up "^1.0.0"
+
+eslint-plugin-jsx-a11y@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-3.0.1.tgz#38f22742a5752a8e72db693d7cd86e13a357da25"
+  dependencies:
+    damerau-levenshtein "^1.0.0"
+    jsx-ast-utils "^1.0.0"
+    object-assign "^4.0.1"
+
+eslint-plugin-react@^6.7.1:
+  version "6.7.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-6.7.1.tgz#1af96aea545856825157d97c1b50d5a8fb64a5a7"
+  dependencies:
+    doctrine "^1.2.2"
+    jsx-ast-utils "^1.3.3"
+
+eslint@^2.7.0:
+  version "2.13.1"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-2.13.1.tgz#e4cc8fa0f009fb829aaae23855a29360be1f6c11"
+  dependencies:
+    chalk "^1.1.3"
+    concat-stream "^1.4.6"
+    debug "^2.1.1"
+    doctrine "^1.2.2"
+    es6-map "^0.1.3"
+    escope "^3.6.0"
+    espree "^3.1.6"
+    estraverse "^4.2.0"
+    esutils "^2.0.2"
+    file-entry-cache "^1.1.1"
+    glob "^7.0.3"
+    globals "^9.2.0"
+    ignore "^3.1.2"
+    imurmurhash "^0.1.4"
+    inquirer "^0.12.0"
+    is-my-json-valid "^2.10.0"
+    is-resolvable "^1.0.0"
+    js-yaml "^3.5.1"
+    json-stable-stringify "^1.0.0"
+    levn "^0.3.0"
+    lodash "^4.0.0"
+    mkdirp "^0.5.0"
+    optionator "^0.8.1"
+    path-is-absolute "^1.0.0"
+    path-is-inside "^1.0.1"
+    pluralize "^1.2.1"
+    progress "^1.1.8"
+    require-uncached "^1.0.2"
+    shelljs "^0.6.0"
+    strip-json-comments "~1.0.1"
+    table "^3.7.8"
+    text-table "~0.2.0"
+    user-home "^2.0.0"
+
+eslint@^3.10.2:
+  version "3.10.2"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-3.10.2.tgz#c9a10e8bf6e9d65651204778c503341f1eac3ce7"
+  dependencies:
+    babel-code-frame "^6.16.0"
+    chalk "^1.1.3"
+    concat-stream "^1.4.6"
+    debug "^2.1.1"
+    doctrine "^1.2.2"
+    escope "^3.6.0"
+    espree "^3.3.1"
+    estraverse "^4.2.0"
+    esutils "^2.0.2"
+    file-entry-cache "^2.0.0"
+    glob "^7.0.3"
+    globals "^9.2.0"
+    ignore "^3.2.0"
+    imurmurhash "^0.1.4"
+    inquirer "^0.12.0"
+    is-my-json-valid "^2.10.0"
+    is-resolvable "^1.0.0"
+    js-yaml "^3.5.1"
+    json-stable-stringify "^1.0.0"
+    levn "^0.3.0"
+    lodash "^4.0.0"
+    mkdirp "^0.5.0"
+    natural-compare "^1.4.0"
+    optionator "^0.8.2"
+    path-is-inside "^1.0.1"
+    pluralize "^1.2.1"
+    progress "^1.1.8"
+    require-uncached "^1.0.2"
+    shelljs "^0.7.5"
+    strip-bom "^3.0.0"
+    strip-json-comments "~1.0.1"
+    table "^3.7.8"
+    text-table "~0.2.0"
+    user-home "^2.0.0"
+
+espree@^3.1.6, espree@^3.3.1:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-3.3.2.tgz#dbf3fadeb4ecb4d4778303e50103b3d36c88b89c"
+  dependencies:
+    acorn "^4.0.1"
+    acorn-jsx "^3.0.0"
+
+esprima@^2.6.0:
+  version "2.7.3"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
+
+esrecurse@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.1.0.tgz#4713b6536adf7f2ac4f327d559e7756bff648220"
+  dependencies:
+    estraverse "~4.1.0"
+    object-assign "^4.0.1"
+
+estraverse@^4.1.1, estraverse@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
+
+estraverse@~4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.1.1.tgz#f6caca728933a850ef90661d0e17982ba47111a2"
+
+esutils@^2.0.0, esutils@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
+
+etag@~1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.7.0.tgz#03d30b5f67dd6e632d2945d30d6652731a34d5d8"
+
+event-emitter@~0.3.4:
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.4.tgz#8d63ddfb4cfe1fae3b32ca265c4c720222080bb5"
+  dependencies:
+    d "~0.1.1"
+    es5-ext "~0.10.7"
+
+eventemitter3@1.x.x:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-1.2.0.tgz#1c86991d816ad1e504750e73874224ecf3bec508"
+
+events@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
+
+evp_bytestokey@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.0.tgz#497b66ad9fef65cd7c08a6180824ba1476b66e53"
+  dependencies:
+    create-hash "^1.1.1"
+
+execa@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-0.5.0.tgz#a57456764b990e3e52f6eff7f17a9cc2ff2e7ccc"
+  dependencies:
+    cross-spawn "^4.0.0"
+    get-stream "^2.2.0"
+    is-stream "^1.1.0"
+    npm-run-path "^2.0.0"
+    signal-exit "^3.0.0"
+    strip-eof "^1.0.0"
+
+exit-hook@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-1.1.1.tgz#f05ca233b48c05d54fff07765df8507e95c02ff8"
+
+expand-braces@^0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/expand-braces/-/expand-braces-0.1.2.tgz#488b1d1d2451cb3d3a6b192cfc030f44c5855fea"
+  dependencies:
+    array-slice "^0.2.3"
+    array-unique "^0.2.1"
+    braces "^0.1.2"
+
+expand-brackets@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
+  dependencies:
+    is-posix-bracket "^0.1.0"
+
+expand-range@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-0.1.1.tgz#4cb8eda0993ca56fa4f41fc42f3cbb4ccadff044"
+  dependencies:
+    is-number "^0.1.1"
+    repeat-string "^0.2.2"
+
+expand-range@^1.8.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-1.8.2.tgz#a299effd335fe2721ebae8e257ec79644fc85337"
+  dependencies:
+    fill-range "^2.1.0"
+
+expect@^1.20.1:
+  version "1.20.2"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-1.20.2.tgz#d458fe4c56004036bae3232416a3f6361f04f965"
+  dependencies:
+    define-properties "~1.1.2"
+    has "^1.0.1"
+    is-equal "^1.5.1"
+    is-regex "^1.0.3"
+    object-inspect "^1.1.0"
+    object-keys "^1.0.9"
+    tmatch "^2.0.1"
+
+express@^4.14.0:
+  version "4.14.0"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.14.0.tgz#c1ee3f42cdc891fb3dc650a8922d51ec847d0d66"
+  dependencies:
+    accepts "~1.3.3"
+    array-flatten "1.1.1"
+    content-disposition "0.5.1"
+    content-type "~1.0.2"
+    cookie "0.3.1"
+    cookie-signature "1.0.6"
+    debug "~2.2.0"
+    depd "~1.1.0"
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    etag "~1.7.0"
+    finalhandler "0.5.0"
+    fresh "0.3.0"
+    merge-descriptors "1.0.1"
+    methods "~1.1.2"
+    on-finished "~2.3.0"
+    parseurl "~1.3.1"
+    path-to-regexp "0.1.7"
+    proxy-addr "~1.1.2"
+    qs "6.2.0"
+    range-parser "~1.2.0"
+    send "0.14.1"
+    serve-static "~1.11.1"
+    type-is "~1.6.13"
+    utils-merge "1.0.0"
+    vary "~1.1.0"
+
+extend@^3.0.0, extend@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.0.tgz#5a474353b9f3353ddd8176dfd37b91c83a46f1d4"
+
+extglob@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
+  dependencies:
+    is-extglob "^1.0.0"
+
+extract-text-webpack-plugin@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-1.0.1.tgz#c95bf3cbaac49dc96f1dc6e072549fbb654ccd2c"
+  dependencies:
+    async "^1.5.0"
+    loader-utils "^0.2.3"
+    webpack-sources "^0.1.0"
+
+extract-zip@~1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-1.5.0.tgz#92ccf6d81ef70a9fa4c1747114ccef6d8688a6c4"
+  dependencies:
+    concat-stream "1.5.0"
+    debug "0.7.4"
+    mkdirp "0.5.0"
+    yauzl "2.4.1"
+
+extsprintf@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.0.2.tgz#e1080e0658e300b06294990cc70e1502235fd550"
+
+fast-levenshtein@~2.0.4:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.5.tgz#bd33145744519ab1c36c3ee9f31f08e9079b67f2"
+
+fastparse@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
+
+fbjs@^0.8.1, fbjs@^0.8.4:
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.5.tgz#f69ba8a876096cb1b9bffe4d7c1e71c19d39d008"
+  dependencies:
+    core-js "^1.0.0"
+    immutable "^3.7.6"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    ua-parser-js "^0.7.9"
+
+fd-slicer@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.0.1.tgz#8b5bcbd9ec327c5041bf9ab023fd6750f1177e65"
+  dependencies:
+    pend "~1.2.0"
+
+figures@^1.3.5, figures@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/figures/-/figures-1.7.0.tgz#cbe1e3affcf1cd44b80cadfed28dc793a9701d2e"
+  dependencies:
+    escape-string-regexp "^1.0.5"
+    object-assign "^4.1.0"
+
+file-entry-cache@^1.1.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-1.3.1.tgz#44c61ea607ae4be9c1402f41f44270cbfe334ff8"
+  dependencies:
+    flat-cache "^1.2.1"
+    object-assign "^4.0.1"
+
+file-entry-cache@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-2.0.0.tgz#c392990c3e684783d838b8c84a45d8a048458361"
+  dependencies:
+    flat-cache "^1.2.1"
+    object-assign "^4.0.1"
+
+filename-regex@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.0.tgz#996e3e80479b98b9897f15a8a58b3d084e926775"
+
+fill-range@^2.1.0:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.3.tgz#50b77dfd7e469bc7492470963699fe7a8485a723"
+  dependencies:
+    is-number "^2.1.0"
+    isobject "^2.0.0"
+    randomatic "^1.1.3"
+    repeat-element "^1.1.2"
+    repeat-string "^1.5.2"
+
+finalhandler@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-0.5.0.tgz#e9508abece9b6dba871a6942a1d7911b91911ac7"
+  dependencies:
+    debug "~2.2.0"
+    escape-html "~1.0.3"
+    on-finished "~2.3.0"
+    statuses "~1.3.0"
+    unpipe "~1.0.0"
+
+find-cache-dir@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-0.1.1.tgz#c8defae57c8a52a8a784f9e31c57c742e993a0b9"
+  dependencies:
+    commondir "^1.0.1"
+    mkdirp "^0.5.1"
+    pkg-dir "^1.0.0"
+
+find-index@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/find-index/-/find-index-0.1.1.tgz#675d358b2ca3892d795a1ab47232f8b6e2e0dde4"
+
+find-root@^0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/find-root/-/find-root-0.1.2.tgz#98d2267cff1916ccaf2743b3a0eea81d79d7dcd1"
+
+find-up@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
+  dependencies:
+    path-exists "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+flat-cache@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-1.2.1.tgz#6c837d6225a7de5659323740b36d5361f71691ff"
+  dependencies:
+    circular-json "^0.3.0"
+    del "^2.0.2"
+    graceful-fs "^4.1.2"
+    write "^0.2.1"
+
+flatten@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
+
+for-in@^0.1.5:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.6.tgz#c9f96e89bfad18a545af5ec3ed352a1d9e5b4dc8"
+
+for-own@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.4.tgz#0149b41a39088c7515f51ebe1c1386d45f935072"
+  dependencies:
+    for-in "^0.1.5"
+
+foreach@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
+
+forever-agent@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
+
+form-data@~1.0.0-rc4:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-1.0.1.tgz#ae315db9a4907fa065502304a66d7733475ee37c"
+  dependencies:
+    async "^2.0.1"
+    combined-stream "^1.0.5"
+    mime-types "^2.1.11"
+
+form-data@~2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.1.1.tgz#4adf0342e1a79afa1e84c8c320a9ffc82392a1f3"
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.5"
+    mime-types "^2.1.12"
+
+formatio@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/formatio/-/formatio-1.1.1.tgz#5ed3ccd636551097383465d996199100e86161e9"
+  dependencies:
+    samsam "~1.1"
+
+forwarded@~0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.0.tgz#19ef9874c4ae1c297bcf078fde63a09b66a84363"
+
+fresh@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.3.0.tgz#651f838e22424e7566de161d8358caa199f83d4f"
+
+front-matter@2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/front-matter/-/front-matter-2.1.0.tgz#0bdff42cbad2b35c07ac7085811789759f9858c0"
+  dependencies:
+    js-yaml "^3.4.6"
+
+fs-extra@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-1.0.0.tgz#cd3ce5f7e7cb6145883fcae3191e9877f8587950"
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^2.1.0"
+    klaw "^1.0.0"
+
+fs-extra@~0.30.0:
+  version "0.30.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.30.0.tgz#f233ffcc08d4da7d432daa449776989db1df93f0"
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^2.1.0"
+    klaw "^1.0.0"
+    path-is-absolute "^1.0.0"
+    rimraf "^2.2.8"
+
+fs-readdir-recursive@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs-readdir-recursive/-/fs-readdir-recursive-1.0.0.tgz#8cd1745c8b4f8a29c8caec392476921ba195f560"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+
+fsevents@^1.0.0:
+  version "1.0.14"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.0.14.tgz#558e8cc38643d8ef40fe45158486d0d25758eee4"
+  dependencies:
+    nan "^2.3.0"
+    node-pre-gyp "^0.6.29"
+
+fstream-ignore@~1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/fstream-ignore/-/fstream-ignore-1.0.5.tgz#9c31dae34767018fe1d249b24dada67d092da105"
+  dependencies:
+    fstream "^1.0.0"
+    inherits "2"
+    minimatch "^3.0.0"
+
+fstream@^1.0.0, fstream@^1.0.2, fstream@~1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.10.tgz#604e8a92fe26ffd9f6fae30399d4984e1ab22822"
+  dependencies:
+    graceful-fs "^4.1.2"
+    inherits "~2.0.0"
+    mkdirp ">=0.5 0"
+    rimraf "2"
+
+function-bind@^1.0.2, function-bind@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.0.tgz#16176714c801798e4e8f2cf7f7529467bb4a5771"
+
+gauge@~2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.6.0.tgz#d35301ad18e96902b4751dcbbe40f4218b942a46"
+  dependencies:
+    aproba "^1.0.3"
+    console-control-strings "^1.0.0"
+    has-color "^0.1.7"
+    has-unicode "^2.0.0"
+    object-assign "^4.1.0"
+    signal-exit "^3.0.0"
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wide-align "^1.1.0"
+
+gaze@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/gaze/-/gaze-1.1.2.tgz#847224677adb8870d679257ed3388fdb61e40105"
+  dependencies:
+    globule "^1.0.0"
+
+generate-function@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/generate-function/-/generate-function-2.0.0.tgz#6858fe7c0969b7d4e9093337647ac79f60dfbe74"
+
+generate-object-property@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/generate-object-property/-/generate-object-property-1.2.0.tgz#9c0e1c40308ce804f4783618b937fa88f99d50d0"
+  dependencies:
+    is-property "^1.0.0"
+
+get-caller-file@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
+
+get-stdin@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
+
+get-stream@^2.2.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-2.3.1.tgz#5f38f93f346009666ee0150a054167f91bdd95de"
+  dependencies:
+    object-assign "^4.0.1"
+    pinkie-promise "^2.0.0"
+
+getpass@^0.1.1:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.6.tgz#283ffd9fc1256840875311c1b60e8c40187110e6"
+  dependencies:
+    assert-plus "^1.0.0"
+
+git-dirty@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/git-dirty/-/git-dirty-1.0.2.tgz#fbbd2cfd36fb5f87cb36e95c508e2e896724e116"
+
+glob-base@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
+  dependencies:
+    glob-parent "^2.0.0"
+    is-glob "^2.0.0"
+
+glob-parent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28"
+  dependencies:
+    is-glob "^2.0.0"
+
+glob2base@^0.0.12:
+  version "0.0.12"
+  resolved "https://registry.yarnpkg.com/glob2base/-/glob2base-0.0.12.tgz#9d419b3e28f12e83a362164a277055922c9c0d56"
+  dependencies:
+    find-index "^0.1.1"
+
+glob@7.0.5:
+  version "7.0.5"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.0.5.tgz#b4202a69099bbb4d292a7c1b95b6682b67ebdc95"
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.2"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^5.0.5:
+  version "5.0.15"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-5.0.15.tgz#1bc936b9e02f4a603fcc222ecf7633d30b8b93b1"
+  dependencies:
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "2 || 3"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@~7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.1.tgz#805211df04faaf1c63a3600306cdf5ade50b2ec8"
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.2"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+global@^4.3.0:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/global/-/global-4.3.1.tgz#5f757908c7cbabce54f386ae440e11e26b7916df"
+  dependencies:
+    min-document "^2.19.0"
+    process "~0.5.1"
+
+globals@^9.0.0, globals@^9.2.0:
+  version "9.12.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-9.12.0.tgz#992ce90828c3a55fa8f16fada177adb64664cf9d"
+
+globby@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-5.0.0.tgz#ebd84667ca0dbb330b99bcfc68eac2bc54370e0d"
+  dependencies:
+    array-union "^1.0.1"
+    arrify "^1.0.0"
+    glob "^7.0.3"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+globule@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/globule/-/globule-1.1.0.tgz#c49352e4dc183d85893ee825385eb994bb6df45f"
+  dependencies:
+    glob "~7.1.1"
+    lodash "~4.16.4"
+    minimatch "~3.0.2"
+
+gonzales-pe@3.4.7:
+  version "3.4.7"
+  resolved "https://registry.yarnpkg.com/gonzales-pe/-/gonzales-pe-3.4.7.tgz#17c7be67ad6caff6277a3e387ac736e983d280ec"
+  dependencies:
+    minimist "1.1.x"
+
+graceful-fs@^4.1.2, graceful-fs@^4.1.4, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
+  version "4.1.9"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.9.tgz#baacba37d19d11f9d146d3578bc99958c3787e29"
+
+"graceful-readlink@>= 1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
+
+growl@1.9.2:
+  version "1.9.2"
+  resolved "https://registry.yarnpkg.com/growl/-/growl-1.9.2.tgz#0ea7743715db8d8de2c5ede1775e1b45ac85c02f"
+
+har-validator@~2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-2.0.6.tgz#cdcbc08188265ad119b6a5a7c8ab70eecfb5d27d"
+  dependencies:
+    chalk "^1.1.1"
+    commander "^2.9.0"
+    is-my-json-valid "^2.12.4"
+    pinkie-promise "^2.0.0"
+
+has-ansi@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
+  dependencies:
+    ansi-regex "^2.0.0"
+
+has-binary@0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/has-binary/-/has-binary-0.1.6.tgz#25326f39cfa4f616ad8787894e3af2cfbc7b6e10"
+  dependencies:
+    isarray "0.0.1"
+
+has-binary@0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/has-binary/-/has-binary-0.1.7.tgz#68e61eb16210c9545a0a5cce06a873912fe1e68c"
+  dependencies:
+    isarray "0.0.1"
+
+has-color@^0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/has-color/-/has-color-0.1.7.tgz#67144a5260c34fc3cca677d041daf52fe7b78b2f"
+
+has-cors@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/has-cors/-/has-cors-1.1.0.tgz#5e474793f7ea9843d1bb99c23eef49ff126fff39"
+
+has-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
+
+has-unicode@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
+
+has@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.1.tgz#8461733f538b0837c9361e39a9ab9e9704dc2f28"
+  dependencies:
+    function-bind "^1.0.2"
+
+hash.js@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.0.3.tgz#1332ff00156c0a0ffdd8236013d07b77a0451573"
+  dependencies:
+    inherits "^2.0.1"
+
+hasha@~2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/hasha/-/hasha-2.2.0.tgz#78d7cbfc1e6d66303fe79837365984517b2f6ee1"
+  dependencies:
+    is-stream "^1.0.1"
+    pinkie-promise "^2.0.0"
+
+hawk@~3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
+  dependencies:
+    boom "2.x.x"
+    cryptiles "2.x.x"
+    hoek "2.x.x"
+    sntp "1.x.x"
+
+hoek@2.x.x:
+  version "2.16.3"
+  resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
+
+home-or-tmp@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.1"
+
+hosted-git-info@^2.1.4:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.1.5.tgz#0ba81d90da2e25ab34a332e6ec77936e1598118b"
+
+html-comment-regex@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.1.tgz#668b93776eaae55ebde8f3ad464b307a4963625e"
+
+html-entities@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.0.tgz#41948caf85ce82fed36e4e6a0ed371a6664379e2"
+
+http-browserify@^1.3.2:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/http-browserify/-/http-browserify-1.7.0.tgz#33795ade72df88acfbfd36773cefeda764735b20"
+  dependencies:
+    Base64 "~0.2.0"
+    inherits "~2.0.1"
+
+http-errors@~1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.5.0.tgz#b1cb3d8260fd8e2386cad3189045943372d48211"
+  dependencies:
+    inherits "2.0.1"
+    setprototypeof "1.0.1"
+    statuses ">= 1.3.0 < 2"
+
+http-proxy@^1.13.0:
+  version "1.15.2"
+  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.15.2.tgz#642fdcaffe52d3448d2bda3b0079e9409064da31"
+  dependencies:
+    eventemitter3 "1.x.x"
+    requires-port "1.x.x"
+
+http-signature@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"
+  dependencies:
+    assert-plus "^0.2.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+https-browserify@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.0.tgz#b3ffdfe734b2a3d4a9efd58e8654c91fce86eafd"
+
+https-browserify@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
+
+iconv-lite@0.4.13, iconv-lite@~0.4.13:
+  version "0.4.13"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2"
+
+icss-replace-symbols@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.0.2.tgz#cb0b6054eb3af6edc9ab1d62d01933e2d4c8bfa5"
+
+ieee754@^1.1.4:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
+
+ignore@^3.1.2, ignore@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.2.0.tgz#8d88f03c3002a0ac52114db25d2c673b0bf1e435"
+
+immutability-helper@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/immutability-helper/-/immutability-helper-2.0.0.tgz#371657666eacf96f731f9f97e5cccd920b13a5d4"
+  dependencies:
+    invariant "^2.2.0"
+
+immutable@^3.7.6:
+  version "3.8.1"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.1.tgz#200807f11ab0f72710ea485542de088075f68cd2"
+
+imurmurhash@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+
+in-publish@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/in-publish/-/in-publish-2.0.0.tgz#e20ff5e3a2afc2690320b6dc552682a9c7fadf51"
+
+indent-string@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-2.1.0.tgz#8e2d48348742121b4a8218b7a137e9a52049dc80"
+  dependencies:
+    repeating "^2.0.0"
+
+indent-string@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-3.0.0.tgz#ddab23d32113ef04b67ab4cf4a0951c1a85fd60c"
+  dependencies:
+    repeating "^3.0.0"
+
+indexes-of@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
+
+indexof@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2, inherits@^2.0.1, inherits@~2.0.0, inherits@~2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+
+inherits@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
+
+ini@~1.3.0:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
+
+inquirer@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-0.12.0.tgz#1ef2bfd63504df0bc75785fff8c2c41df12f077e"
+  dependencies:
+    ansi-escapes "^1.1.0"
+    ansi-regex "^2.0.0"
+    chalk "^1.0.0"
+    cli-cursor "^1.0.1"
+    cli-width "^2.0.0"
+    figures "^1.3.5"
+    lodash "^4.3.0"
+    readline2 "^1.0.1"
+    run-async "^0.1.0"
+    rx-lite "^3.1.2"
+    string-width "^1.0.1"
+    strip-ansi "^3.0.0"
+    through "^2.3.6"
+
+internal-ip@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-1.2.0.tgz#ae9fbf93b984878785d50a8de1b356956058cf5c"
+  dependencies:
+    meow "^3.3.0"
+
+interpret@^0.6.4:
+  version "0.6.6"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-0.6.6.tgz#fecd7a18e7ce5ca6abfb953e1f86213a49f1625b"
+
+interpret@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.1.tgz#d579fb7f693b858004947af39fa0db49f795602c"
+
+invariant@^2.2.0, invariant@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.1.tgz#b097010547668c7e337028ebe816ebe36c8a8d54"
+  dependencies:
+    loose-envify "^1.0.0"
+
+invert-kv@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
+
+ipaddr.js@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.1.1.tgz#c791d95f52b29c1247d5df80ada39b8a73647230"
+
+is-absolute-url@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-2.0.0.tgz#9c4b20b0e5c0cbef9a479a367ede6f991679f359"
+
+is-absolute@^0.2.3:
+  version "0.2.6"
+  resolved "https://registry.yarnpkg.com/is-absolute/-/is-absolute-0.2.6.tgz#20de69f3db942ef2d87b9c2da36f172235b1b5eb"
+  dependencies:
+    is-relative "^0.2.1"
+    is-windows "^0.2.0"
+
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+
+is-arrow-function@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/is-arrow-function/-/is-arrow-function-2.0.3.tgz#29be2c2d8d9450852b8bbafb635ba7b8d8e87ec2"
+  dependencies:
+    is-callable "^1.0.4"
+
+is-binary-path@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
+  dependencies:
+    binary-extensions "^1.0.0"
+
+is-boolean-object@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.0.tgz#98f8b28030684219a95f375cfbd88ce3405dff93"
+
+is-buffer@^1.0.2:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.4.tgz#cfc86ccd5dc5a52fa80489111c6920c457e2d98b"
+
+is-builtin-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-builtin-module/-/is-builtin-module-1.0.0.tgz#540572d34f7ac3119f8f76c30cbc1b1e037affbe"
+  dependencies:
+    builtin-modules "^1.0.0"
+
+is-callable@^1.0.4, is-callable@^1.1.1, is-callable@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.3.tgz#86eb75392805ddc33af71c92a0eedf74ee7604b2"
+
+is-date-object@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.1.tgz#9aa20eb6aeebbff77fbd33e74ca01b33581d3a16"
+
+is-dotfile@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.2.tgz#2c132383f39199f8edc268ca01b9b007d205cc4d"
+
+is-equal-shallow@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz#2238098fc221de0bcfa5d9eac4c45d638aa1c534"
+  dependencies:
+    is-primitive "^2.0.0"
+
+is-equal@^1.5.1:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/is-equal/-/is-equal-1.5.3.tgz#05b7fa3a1122cbc71c1ef41ce0142d5532013b29"
+  dependencies:
+    has "^1.0.1"
+    is-arrow-function "^2.0.3"
+    is-boolean-object "^1.0.0"
+    is-callable "^1.1.3"
+    is-date-object "^1.0.1"
+    is-generator-function "^1.0.3"
+    is-number-object "^1.0.3"
+    is-regex "^1.0.3"
+    is-string "^1.0.4"
+    is-symbol "^1.0.1"
+    object.entries "^1.0.3"
+
+is-extendable@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
+
+is-extglob@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
+
+is-finite@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.0.2.tgz#cc6677695602be550ef11e8b4aa6305342b6d0aa"
+  dependencies:
+    number-is-nan "^1.0.0"
+
+is-fullwidth-code-point@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
+  dependencies:
+    number-is-nan "^1.0.0"
+
+is-fullwidth-code-point@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
+
+is-generator-function@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.0.3.tgz#d374ca57e807444fa2658be3728ed6b174b326b1"
+
+is-glob@^2.0.0, is-glob@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
+  dependencies:
+    is-extglob "^1.0.0"
+
+is-my-json-valid@^2.10.0, is-my-json-valid@^2.12.4:
+  version "2.15.0"
+  resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.15.0.tgz#936edda3ca3c211fd98f3b2d3e08da43f7b2915b"
+  dependencies:
+    generate-function "^2.0.0"
+    generate-object-property "^1.1.0"
+    jsonpointer "^4.0.0"
+    xtend "^4.0.0"
+
+is-number-object@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.3.tgz#f265ab89a9f445034ef6aff15a8f00b00f551799"
+
+is-number@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-0.1.1.tgz#69a7af116963d47206ec9bd9b48a14216f1e3806"
+
+is-number@^2.0.2, is-number@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-2.1.0.tgz#01fcbbb393463a548f2f466cce16dece49db908f"
+  dependencies:
+    kind-of "^3.0.2"
+
+is-path-cwd@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-1.0.0.tgz#d225ec23132e89edd38fda767472e62e65f1106d"
+
+is-path-in-cwd@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-1.0.0.tgz#6477582b8214d602346094567003be8a9eac04dc"
+  dependencies:
+    is-path-inside "^1.0.0"
+
+is-path-inside@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-1.0.0.tgz#fc06e5a1683fbda13de667aff717bbc10a48f37f"
+  dependencies:
+    path-is-inside "^1.0.1"
+
+is-plain-obj@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
+
+is-posix-bracket@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz#3334dc79774368e92f016e6fbc0a88f5cd6e6bc4"
+
+is-primitive@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
+
+is-promise@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
+
+is-property@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-property/-/is-property-1.0.2.tgz#57fe1c4e48474edd65b09911f26b1cd4095dda84"
+
+is-regex@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.3.tgz#0d55182bddf9f2fde278220aec3a75642c908637"
+
+is-relative@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-relative/-/is-relative-0.2.1.tgz#d27f4c7d516d175fb610db84bbeef23c3bc97aa5"
+  dependencies:
+    is-unc-path "^0.1.1"
+
+is-resolvable@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.0.0.tgz#8df57c61ea2e3c501408d100fb013cf8d6e0cc62"
+  dependencies:
+    tryit "^1.0.1"
+
+is-stream@^1.0.1, is-stream@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
+
+is-string@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.4.tgz#cc3a9b69857d621e963725a24caeec873b826e64"
+
+is-svg@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-2.0.1.tgz#f93ab3bf1d6bbca30e9753cd3485b1300eebc013"
+  dependencies:
+    html-comment-regex "^1.1.0"
+
+is-symbol@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.1.tgz#3cc59f00025194b6ab2e38dbae6689256b660572"
+
+is-typedarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+
+is-unc-path@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-unc-path/-/is-unc-path-0.1.1.tgz#ab2533d77ad733561124c3dc0f5cd8b90054c86b"
+  dependencies:
+    unc-path-regex "^0.1.0"
+
+is-utf8@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
+
+is-windows@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-0.2.0.tgz#de1aa6d63ea29dd248737b69f1ff8b8002d2108c"
+
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+
+isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+
+isbinaryfile@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-3.0.1.tgz#6e99573675372e841a0520c036b41513d783e79e"
+
+isexe@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-1.1.2.tgz#36f3e22e60750920f5e7241a476a8c6a42275ad0"
+
+isobject@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
+  dependencies:
+    isarray "1.0.0"
+
+isomorphic-fetch@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
+  dependencies:
+    node-fetch "^1.0.1"
+    whatwg-fetch ">=0.10.0"
+
+isstream@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+
+jodid25519@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/jodid25519/-/jodid25519-1.0.2.tgz#06d4912255093419477d425633606e0e90782967"
+  dependencies:
+    jsbn "~0.1.0"
+
+js-base64@^2.1.9:
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.1.9.tgz#f0e80ae039a4bd654b5f281fc93f04a914a7fcce"
+
+js-tokens@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-1.0.3.tgz#14e56eb68c8f1a92c43d59f5014ec29dc20f2ae1"
+
+js-tokens@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-2.0.0.tgz#79903f5563ee778cc1162e6dcf1a0027c97f9cb5"
+
+js-yaml@^3.4.3, js-yaml@^3.4.6, js-yaml@^3.5.1, js-yaml@^3.5.4, js-yaml@~3.6.1:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.6.1.tgz#6e5fe67d8b205ce4d22fad05b7781e8dadcc4b30"
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^2.6.0"
+
+jsbn@~0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.0.tgz#650987da0dd74f4ebf5a11377a2aa2d273e97dfd"
+
+jsesc@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-1.3.0.tgz#46c3fec8c1892b12b0833db9bc7622176dbab34b"
+
+jsesc@~0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
+
+json-schema@0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
+
+json-stable-stringify@^1.0.0, json-stable-stringify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
+  dependencies:
+    jsonify "~0.0.0"
+
+json-stringify-safe@~5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
+
+json3@3.2.6:
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/json3/-/json3-3.2.6.tgz#f6efc93c06a04de9aec53053df2559bb19e2038b"
+
+json3@3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.2.tgz#3c0434743df93e2f5c42aee7b19bcb483575f4e1"
+
+json5@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.0.tgz#9b20715b026cbe3778fd769edccd822d8332a5b2"
+
+jsonfile@^2.1.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8"
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
+jsonify@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
+
+jsonpointer@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-4.0.0.tgz#6661e161d2fc445f19f98430231343722e1fcbd5"
+
+jsprim@^1.2.2:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.3.1.tgz#2a7256f70412a29ee3670aaca625994c4dcff252"
+  dependencies:
+    extsprintf "1.0.2"
+    json-schema "0.2.3"
+    verror "1.3.6"
+
+jsx-ast-utils@^1.0.0, jsx-ast-utils@^1.3.3:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-1.3.4.tgz#0257ed1cc4b1e65b39d7d9940f9fb4f20f7ba0a9"
+  dependencies:
+    acorn-jsx "^3.0.1"
+    object-assign "^4.1.0"
+
+karma-cli@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/karma-cli/-/karma-cli-1.0.1.tgz#ae6c3c58a313a1d00b45164c455b9b86ce17f960"
+  dependencies:
+    resolve "^1.1.6"
+
+karma-mocha@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/karma-mocha/-/karma-mocha-1.3.0.tgz#eeaac7ffc0e201eb63c467440d2b69c7cf3778bf"
+  dependencies:
+    minimist "1.2.0"
+
+karma-phantomjs-launcher@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/karma-phantomjs-launcher/-/karma-phantomjs-launcher-1.0.2.tgz#19e1041498fd75563ed86730a22c1fe579fa8fb1"
+  dependencies:
+    lodash "^4.0.1"
+    phantomjs-prebuilt "^2.1.7"
+
+karma-webpack@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/karma-webpack/-/karma-webpack-1.8.0.tgz#340c7999eb3745b47becab47d0d304dac2c55257"
+  dependencies:
+    async "~0.9.0"
+    loader-utils "^0.2.5"
+    lodash "^3.8.0"
+    source-map "^0.1.41"
+    webpack-dev-middleware "^1.0.11"
+
+karma@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/karma/-/karma-1.3.0.tgz#b2b94e8f499fadd0069d54f9aef4a4d48ec5cc1f"
+  dependencies:
+    bluebird "^3.3.0"
+    body-parser "^1.12.4"
+    chokidar "^1.4.1"
+    colors "^1.1.0"
+    combine-lists "^1.0.0"
+    connect "^3.3.5"
+    core-js "^2.2.0"
+    di "^0.0.1"
+    dom-serialize "^2.2.0"
+    expand-braces "^0.1.1"
+    glob "^7.0.3"
+    graceful-fs "^4.1.2"
+    http-proxy "^1.13.0"
+    isbinaryfile "^3.0.0"
+    lodash "^3.8.0"
+    log4js "^0.6.31"
+    mime "^1.3.4"
+    minimatch "^3.0.0"
+    optimist "^0.6.1"
+    qjobs "^1.1.4"
+    range-parser "^1.2.0"
+    rimraf "^2.3.3"
+    socket.io "1.4.7"
+    source-map "^0.5.3"
+    tmp "0.0.28"
+    useragent "^2.1.9"
+
+kew@~0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/kew/-/kew-0.7.0.tgz#79d93d2d33363d6fdd2970b335d9141ad591d79b"
+
+kind-of@^3.0.2:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.0.4.tgz#7b8ecf18a4e17f8269d73b501c9f232c96887a74"
+  dependencies:
+    is-buffer "^1.0.2"
+
+klaw@^1.0.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/klaw/-/klaw-1.3.1.tgz#4088433b46b3b1ba259d78785d8e96f73ba02439"
+  optionalDependencies:
+    graceful-fs "^4.1.9"
+
+lazy-cache@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
+
+lcid@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835"
+  dependencies:
+    invert-kv "^1.0.0"
+
+levn@^0.3.0, levn@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
+  dependencies:
+    prelude-ls "~1.1.2"
+    type-check "~0.3.2"
+
+lint-staged@^3.2.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-3.2.1.tgz#c7b7bcec417f6def1f6430e401fc881f0298d97a"
+  dependencies:
+    app-root-path "^2.0.0"
+    cosmiconfig "^1.1.0"
+    execa "^0.5.0"
+    listr "^0.7.0"
+    minimatch "^3.0.0"
+    npm-which "^3.0.1"
+    staged-git-files "0.0.4"
+    which "^1.2.11"
+
+listr-silent-renderer@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/listr-silent-renderer/-/listr-silent-renderer-1.0.0.tgz#c097f02747d139f07852abe418a2d6e18c83f7ee"
+
+listr-update-renderer@^0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/listr-update-renderer/-/listr-update-renderer-0.1.2.tgz#bb534ff4b704048e66a9aac45487a365a8d956d5"
+  dependencies:
+    chalk "^1.1.3"
+    cli-truncate "^0.2.1"
+    elegant-spinner "^1.0.1"
+    figures "^1.7.0"
+    indent-string "^3.0.0"
+    log-symbols "^1.0.2"
+    log-update "^1.0.2"
+    strip-ansi "^3.0.1"
+
+listr-verbose-renderer@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/listr-verbose-renderer/-/listr-verbose-renderer-0.1.0.tgz#7b6c67b31e4e12e5e3127a726a495869f6af4ff8"
+  dependencies:
+    chalk "^1.1.3"
+    cli-cursor "^1.0.2"
+    figures "^1.7.0"
+
+listr@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/listr/-/listr-0.7.0.tgz#b94ba2a5072daad8bff6d3984b50afc590c3d8e5"
+  dependencies:
+    chalk "^1.1.3"
+    cli-truncate "^0.2.1"
+    figures "^1.7.0"
+    indent-string "^2.1.0"
+    is-promise "^2.1.0"
+    is-stream "^1.1.0"
+    listr-silent-renderer "^1.0.0"
+    listr-update-renderer "^0.1.1"
+    listr-verbose-renderer "^0.1.0"
+    log-symbols "^1.0.2"
+    log-update "^1.0.2"
+    ora "^0.2.3"
+    rxjs "^5.0.0-beta.11"
+    stream-to-observable "^0.1.0"
+    strip-ansi "^3.0.1"
+
+load-json-file@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^2.2.0"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+    strip-bom "^2.0.0"
+
+loader-utils@^0.2.11, loader-utils@^0.2.15, loader-utils@^0.2.16, loader-utils@^0.2.3, loader-utils@^0.2.5, loader-utils@^0.2.7, loader-utils@~0.2.2:
+  version "0.2.16"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.16.tgz#f08632066ed8282835dff88dfb52704765adee6d"
+  dependencies:
+    big.js "^3.1.3"
+    emojis-list "^2.0.0"
+    json5 "^0.5.0"
+    object-assign "^4.0.1"
+
+lodash._baseassign@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/lodash._baseassign/-/lodash._baseassign-3.2.0.tgz#8c38a099500f215ad09e59f1722fd0c52bfe0a4e"
+  dependencies:
+    lodash._basecopy "^3.0.0"
+    lodash.keys "^3.0.0"
+
+lodash._basecopy@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz#8da0e6a876cf344c0ad8a54882111dd3c5c7ca36"
+
+lodash._basecreate@^3.0.0:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/lodash._basecreate/-/lodash._basecreate-3.0.3.tgz#1bc661614daa7fc311b7d03bf16806a0213cf821"
+
+lodash._baseget@^3.0.0:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/lodash._baseget/-/lodash._baseget-3.7.2.tgz#1b6ae1d5facf3c25532350a13c1197cb8bb674f4"
+
+lodash._getnative@^3.0.0:
+  version "3.9.1"
+  resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
+
+lodash._isiterateecall@^3.0.0:
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz#5203ad7ba425fae842460e696db9cf3e6aac057c"
+
+lodash._topath@^3.0.0:
+  version "3.8.1"
+  resolved "https://registry.yarnpkg.com/lodash._topath/-/lodash._topath-3.8.1.tgz#3ec5e2606014f4cb97f755fe6914edd8bfc00eac"
+  dependencies:
+    lodash.isarray "^3.0.0"
+
+lodash.assign@^4.0.3, lodash.assign@^4.0.6, lodash.assign@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
+
+lodash.camelcase@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
+
+lodash.capitalize@^4.1.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/lodash.capitalize/-/lodash.capitalize-4.2.1.tgz#f826c9b4e2a8511d84e3aca29db05e1a4f3b72a9"
+
+lodash.clonedeep@^4.3.2:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
+
+lodash.cond@^4.3.0:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/lodash.cond/-/lodash.cond-4.5.2.tgz#f471a1da486be60f6ab955d17115523dd1d255d5"
+
+lodash.create@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.create/-/lodash.create-3.1.1.tgz#d7f2849f0dbda7e04682bb8cd72ab022461debe7"
+  dependencies:
+    lodash._baseassign "^3.0.0"
+    lodash._basecreate "^3.0.0"
+    lodash._isiterateecall "^3.0.0"
+
+lodash.get@^3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-3.7.0.tgz#3ce68ae2c91683b281cc5394128303cbf75e691f"
+  dependencies:
+    lodash._baseget "^3.0.0"
+    lodash._topath "^3.0.0"
+
+lodash.indexof@^4.0.5:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/lodash.indexof/-/lodash.indexof-4.0.5.tgz#53714adc2cddd6ed87638f893aa9b6c24e31ef3c"
+
+lodash.isarguments@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
+
+lodash.isarray@^3.0.0:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
+
+lodash.kebabcase@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36"
+
+lodash.keys@^3.0.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a"
+  dependencies:
+    lodash._getnative "^3.0.0"
+    lodash.isarguments "^3.0.0"
+    lodash.isarray "^3.0.0"
+
+lodash.pickby@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.pickby/-/lodash.pickby-4.6.0.tgz#7dea21d8c18d7703a27c704c15d3b84a67e33aff"
+
+lodash@^3.8.0:
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
+
+lodash@^4.0.0, lodash@^4.0.1, lodash@^4.14.0, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.5.0, lodash@^4.6.1, lodash@~4.16.4:
+  version "4.16.4"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.16.4.tgz#01ce306b9bad1319f2a5528674f88297aeb70127"
+
+log-symbols@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-1.0.2.tgz#376ff7b58ea3086a0f09facc74617eca501e1a18"
+  dependencies:
+    chalk "^1.0.0"
+
+log-update@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/log-update/-/log-update-1.0.2.tgz#19929f64c4093d2d2e7075a1dad8af59c296b8d1"
+  dependencies:
+    ansi-escapes "^1.0.0"
+    cli-cursor "^1.0.2"
+
+log4js@^0.6.31:
+  version "0.6.38"
+  resolved "https://registry.yarnpkg.com/log4js/-/log4js-0.6.38.tgz#2c494116695d6fb25480943d3fc872e662a522fd"
+  dependencies:
+    readable-stream "~1.0.2"
+    semver "~4.3.3"
+
+lolex@^1.4.0:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/lolex/-/lolex-1.5.1.tgz#dbcf7c687cbc22e59d1a8d40208a720252f521d8"
+
+longest@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
+
+loose-envify@^1.0.0, loose-envify@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.2.0.tgz#69a65aad3de542cf4ee0f4fe74e8e33c709ccb0f"
+  dependencies:
+    js-tokens "^1.0.1"
+
+loud-rejection@^1.0.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"
+  dependencies:
+    currently-unhandled "^0.4.1"
+    signal-exit "^3.0.0"
+
+lru-cache@2.2.x:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.2.4.tgz#6c658619becf14031d0d0b594b16042ce4dc063d"
+
+lru-cache@^4.0.0, lru-cache@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.0.1.tgz#1343955edaf2e37d9b9e7ee7241e27c4b9fb72be"
+  dependencies:
+    pseudomap "^1.0.1"
+    yallist "^2.0.0"
+
+macaddress@^0.2.8:
+  version "0.2.8"
+  resolved "https://registry.yarnpkg.com/macaddress/-/macaddress-0.2.8.tgz#5904dc537c39ec6dbefeae902327135fa8511f12"
+
+map-obj@^1.0.0, map-obj@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
+
+math-expression-evaluator@^1.2.14:
+  version "1.2.14"
+  resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.14.tgz#39511771ed9602405fba9affff17eb4d2a3843ab"
+  dependencies:
+    lodash.indexof "^4.0.5"
+
+media-typer@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
+
+memory-fs@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.2.0.tgz#f2bb25368bc121e391c2520de92969caee0a0290"
+
+memory-fs@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.3.0.tgz#7bcc6b629e3a43e871d7e29aca6ae8a7f15cbb20"
+  dependencies:
+    errno "^0.1.3"
+    readable-stream "^2.0.1"
+
+meow@^3.3.0, meow@^3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
+  dependencies:
+    camelcase-keys "^2.0.0"
+    decamelize "^1.1.2"
+    loud-rejection "^1.0.0"
+    map-obj "^1.0.1"
+    minimist "^1.1.3"
+    normalize-package-data "^2.3.4"
+    object-assign "^4.0.1"
+    read-pkg-up "^1.0.1"
+    redent "^1.0.0"
+    trim-newlines "^1.0.0"
+
+merge-descriptors@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
+
+merge@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/merge/-/merge-1.2.0.tgz#7531e39d4949c281a66b8c5a6e0265e8b05894da"
+
+methods@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
+
+micromatch@^2.1.5:
+  version "2.3.11"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
+  dependencies:
+    arr-diff "^2.0.0"
+    array-unique "^0.2.1"
+    braces "^1.8.2"
+    expand-brackets "^0.1.4"
+    extglob "^0.3.1"
+    filename-regex "^2.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.1"
+    kind-of "^3.0.2"
+    normalize-path "^2.0.1"
+    object.omit "^2.0.0"
+    parse-glob "^3.0.4"
+    regex-cache "^0.4.2"
+
+miller-rabin@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.0.tgz#4a62fb1d42933c05583982f4c716f6fb9e6c6d3d"
+  dependencies:
+    bn.js "^4.0.0"
+    brorand "^1.0.1"
+
+mime-db@~1.12.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.12.0.tgz#3d0c63180f458eb10d325aaa37d7c58ae312e9d7"
+
+mime-db@~1.24.0:
+  version "1.24.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.24.0.tgz#e2d13f939f0016c6e4e9ad25a8652f126c467f0c"
+
+mime-types@^2.1.11, mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.7:
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.12.tgz#152ba256777020dd4663f54c2e7bc26381e71729"
+  dependencies:
+    mime-db "~1.24.0"
+
+mime-types@~2.0.4:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.0.14.tgz#310e159db23e077f8bb22b748dabfa4957140aa6"
+  dependencies:
+    mime-db "~1.12.0"
+
+mime@1.3.4, mime@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53"
+
+min-document@^2.19.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
+  dependencies:
+    dom-walk "^0.1.0"
+
+minimalistic-assert@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"
+
+"minimatch@2 || 3", minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@~3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.3.tgz#2a4e4090b96b2db06a9d7df01055a62a77c9b774"
+  dependencies:
+    brace-expansion "^1.0.0"
+
+minimist@0.0.8, minimist@~0.0.1:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
+
+minimist@1.1.x:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.1.3.tgz#3bedfd91a92d39016fcfaa1c681e8faa1a1efda8"
+
+minimist@1.2.0, minimist@^1.1.0, minimist@^1.1.3, minimist@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
+
+mkdirp@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.0.tgz#1d73076a6df986cd9344e15e71fcc05a4c9abf12"
+  dependencies:
+    minimist "0.0.8"
+
+mkdirp@0.5.1, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
+  dependencies:
+    minimist "0.0.8"
+
+mocha@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/mocha/-/mocha-3.1.2.tgz#51f93b432bf7e1b175ffc22883ccd0be32dba6b5"
+  dependencies:
+    browser-stdout "1.3.0"
+    commander "2.9.0"
+    debug "2.2.0"
+    diff "1.4.0"
+    escape-string-regexp "1.0.5"
+    glob "7.0.5"
+    growl "1.9.2"
+    json3 "3.3.2"
+    lodash.create "3.1.1"
+    mkdirp "0.5.1"
+    supports-color "3.1.2"
+
+ms@0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"
+
+mute-stream@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.5.tgz#8fbfabb0a98a253d3184331f9e8deb7372fac6c0"
+
+nan@^2.3.0, nan@^2.3.2:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.4.0.tgz#fb3c59d45fe4effe215f0b890f8adf6eb32d2232"
+
+natural-compare@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
+
+negotiator@0.4.9:
+  version "0.4.9"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.4.9.tgz#92e46b6db53c7e421ed64a2bc94f08be7630df3f"
+
+negotiator@0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
+
+node-fetch@^1.0.1:
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.6.3.tgz#dc234edd6489982d58e8f0db4f695029abcd8c04"
+  dependencies:
+    encoding "^0.1.11"
+    is-stream "^1.0.1"
+
+node-gyp@^3.3.1:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.4.0.tgz#dda558393b3ecbbe24c9e6b8703c71194c63fa36"
+  dependencies:
+    fstream "^1.0.0"
+    glob "^7.0.3"
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    mkdirp "^0.5.0"
+    nopt "2 || 3"
+    npmlog "0 || 1 || 2 || 3"
+    osenv "0"
+    path-array "^1.0.0"
+    request "2"
+    rimraf "2"
+    semver "2.x || 3.x || 4 || 5"
+    tar "^2.0.0"
+    which "1"
+
+node-libs-browser@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-0.6.0.tgz#244806d44d319e048bc8607b5cc4eaf9a29d2e3c"
+  dependencies:
+    assert "^1.1.1"
+    browserify-zlib "~0.1.4"
+    buffer "^4.9.0"
+    console-browserify "^1.1.0"
+    constants-browserify "0.0.1"
+    crypto-browserify "~3.2.6"
+    domain-browser "^1.1.1"
+    events "^1.0.0"
+    http-browserify "^1.3.2"
+    https-browserify "0.0.0"
+    os-browserify "~0.1.2"
+    path-browserify "0.0.0"
+    process "^0.11.0"
+    punycode "^1.2.4"
+    querystring-es3 "~0.2.0"
+    readable-stream "^1.1.13"
+    stream-browserify "^1.0.0"
+    string_decoder "~0.10.25"
+    timers-browserify "^1.0.1"
+    tty-browserify "0.0.0"
+    url "~0.10.1"
+    util "~0.10.3"
+    vm-browserify "0.0.4"
+
+node-libs-browser@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-1.0.0.tgz#ff8ad6c2cfa78043bdd0091ec07f0aaa581620fc"
+  dependencies:
+    assert "^1.1.1"
+    browserify-zlib "~0.1.4"
+    buffer "^4.3.0"
+    console-browserify "^1.1.0"
+    constants-browserify "^1.0.0"
+    crypto-browserify "^3.11.0"
+    domain-browser "^1.1.1"
+    events "^1.0.0"
+    http-browserify "^1.3.2"
+    https-browserify "0.0.1"
+    os-browserify "~0.2.0"
+    path-browserify "0.0.0"
+    process "~0.11.0"
+    punycode "^1.2.4"
+    querystring-es3 "~0.2.0"
+    readable-stream "^2.0.5"
+    stream-browserify "^2.0.1"
+    string_decoder "~0.10.25"
+    timers-browserify "^1.0.1"
+    tty-browserify "0.0.0"
+    url "~0.11.0"
+    util "~0.10.3"
+    vm-browserify "0.0.4"
+
+node-pre-gyp@^0.6.29:
+  version "0.6.31"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.31.tgz#d8a00ddaa301a940615dbcc8caad4024d58f6017"
+  dependencies:
+    mkdirp "~0.5.1"
+    nopt "~3.0.6"
+    npmlog "^4.0.0"
+    rc "~1.1.6"
+    request "^2.75.0"
+    rimraf "~2.5.4"
+    semver "~5.3.0"
+    tar "~2.2.1"
+    tar-pack "~3.3.0"
+
+node-sass@^3.13.0:
+  version "3.13.0"
+  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-3.13.0.tgz#d08b95bdebf40941571bd2c16a9334b980f8924f"
+  dependencies:
+    async-foreach "^0.1.3"
+    chalk "^1.1.1"
+    cross-spawn "^3.0.0"
+    gaze "^1.0.0"
+    get-stdin "^4.0.1"
+    glob "^7.0.3"
+    in-publish "^2.0.0"
+    lodash.assign "^4.2.0"
+    lodash.clonedeep "^4.3.2"
+    meow "^3.7.0"
+    mkdirp "^0.5.1"
+    nan "^2.3.2"
+    node-gyp "^3.3.1"
+    npmlog "^4.0.0"
+    request "^2.61.0"
+    sass-graph "^2.1.1"
+
+node-uuid@~1.4.7:
+  version "1.4.7"
+  resolved "https://registry.yarnpkg.com/node-uuid/-/node-uuid-1.4.7.tgz#6da5a17668c4b3dd59623bda11cf7fa4c1f60a6f"
+
+"nopt@2 || 3", nopt@~3.0.6:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
+  dependencies:
+    abbrev "1"
+
+normalize-package-data@^2.3.2, normalize-package-data@^2.3.4:
+  version "2.3.5"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.3.5.tgz#8d924f142960e1777e7ffe170543631cc7cb02df"
+  dependencies:
+    hosted-git-info "^2.1.4"
+    is-builtin-module "^1.0.0"
+    semver "2 || 3 || 4 || 5"
+    validate-npm-package-license "^3.0.1"
+
+normalize-path@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.0.1.tgz#47886ac1662760d4261b7d979d241709d3ce3f7a"
+
+normalize-range@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
+
+normalize-url@^1.4.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.7.0.tgz#d82452d98d38821cffddab4d77a5f8d20ce66db0"
+  dependencies:
+    object-assign "^4.0.1"
+    prepend-http "^1.0.0"
+    query-string "^4.1.0"
+    sort-keys "^1.0.0"
+
+normalize.css@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-4.2.0.tgz#21d66cc557154d4379fd1e079ec7de58a379b099"
+
+npm-path@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/npm-path/-/npm-path-2.0.2.tgz#6462f098bb38e21e335a8c6f42d21d7b57f098c8"
+  dependencies:
+    which "^1.2.10"
+
+npm-run-path@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
+  dependencies:
+    path-key "^2.0.0"
+
+npm-which@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/npm-which/-/npm-which-3.0.1.tgz#9225f26ec3a285c209cae67c3b11a6b4ab7140aa"
+  dependencies:
+    commander "^2.9.0"
+    npm-path "^2.0.2"
+    which "^1.2.10"
+
+"npmlog@0 || 1 || 2 || 3":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-3.1.2.tgz#2d46fa874337af9498a2f12bb43d8d0be4a36873"
+  dependencies:
+    are-we-there-yet "~1.1.2"
+    console-control-strings "~1.1.0"
+    gauge "~2.6.0"
+    set-blocking "~2.0.0"
+
+npmlog@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.0.0.tgz#e094503961c70c1774eb76692080e8d578a9f88f"
+  dependencies:
+    are-we-there-yet "~1.1.2"
+    console-control-strings "~1.1.0"
+    gauge "~2.6.0"
+    set-blocking "~2.0.0"
+
+num2fraction@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
+
+number-is-nan@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
+
+oauth-sign@~0.8.1:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
+
+object-assign@^4.0.1, object-assign@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.0.tgz#7a3b3d0e98063d43f4c03f2e8ae6cd51a86883a0"
+
+object-component@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/object-component/-/object-component-0.0.3.tgz#f0c69aa50efc95b866c186f400a33769cb2f1291"
+
+object-inspect@^1.1.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.2.1.tgz#3b62226eb8f6d441751c7d8f22a20ff80ac9dc3f"
+
+object-keys@^1.0.8, object-keys@^1.0.9:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"
+
+object.entries@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.0.3.tgz#f42cc75363a4f9aa7037bcfb3bab3be4ffc78027"
+  dependencies:
+    define-properties "^1.1.1"
+    es-abstract "^1.3.2"
+    function-bind "^1.0.2"
+    has "^1.0.1"
+
+object.omit@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
+  dependencies:
+    for-own "^0.1.4"
+    is-extendable "^0.1.1"
+
+on-finished@~2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
+  dependencies:
+    ee-first "1.1.1"
+
+once@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  dependencies:
+    wrappy "1"
+
+once@~1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.3.3.tgz#b2e261557ce4c314ec8304f3fa82663e4297ca20"
+  dependencies:
+    wrappy "1"
+
+onetime@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-1.1.0.tgz#a1f7838f8314c516f05ecefcbc4ccfe04b4ed789"
+
+optimist@^0.6.1, optimist@~0.6.0:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
+  dependencies:
+    minimist "~0.0.1"
+    wordwrap "~0.0.2"
+
+optionator@^0.8.1, optionator@^0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.2.tgz#364c5e409d3f4d6301d6c0b4c05bba50180aeb64"
+  dependencies:
+    deep-is "~0.1.3"
+    fast-levenshtein "~2.0.4"
+    levn "~0.3.0"
+    prelude-ls "~1.1.2"
+    type-check "~0.3.2"
+    wordwrap "~1.0.0"
+
+options@>=0.0.5:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/options/-/options-0.0.6.tgz#ec22d312806bb53e731773e7cdaefcf1c643128f"
+
+ora@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/ora/-/ora-0.2.3.tgz#37527d220adcd53c39b73571d754156d5db657a4"
+  dependencies:
+    chalk "^1.1.1"
+    cli-cursor "^1.0.2"
+    cli-spinners "^0.1.2"
+    object-assign "^4.0.1"
+
+os-browserify@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.1.2.tgz#49ca0293e0b19590a5f5de10c7f265a617d8fe54"
+
+os-browserify@~0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.2.1.tgz#63fc4ccee5d2d7763d26bbf8601078e6c2e0044f"
+
+os-homedir@^1.0.0, os-homedir@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+
+os-locale@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-1.4.0.tgz#20f9f17ae29ed345e8bde583b13d2009803c14d9"
+  dependencies:
+    lcid "^1.0.0"
+
+os-shim@^0.1.2:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/os-shim/-/os-shim-0.1.3.tgz#6b62c3791cf7909ea35ed46e17658bb417cb3917"
+
+os-tmpdir@^1.0.0, os-tmpdir@^1.0.1, os-tmpdir@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
+
+osenv@0:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.3.tgz#83cf05c6d6458fc4d5ac6362ea325d92f2754217"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.0"
+
+output-file-sync@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/output-file-sync/-/output-file-sync-1.1.2.tgz#d0a33eefe61a205facb90092e826598d5245ce76"
+  dependencies:
+    graceful-fs "^4.1.4"
+    mkdirp "^0.5.1"
+    object-assign "^4.1.0"
+
+pako@~0.2.0:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
+
+parse-asn1@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.0.0.tgz#35060f6d5015d37628c770f4e091a0b5a278bc23"
+  dependencies:
+    asn1.js "^4.0.0"
+    browserify-aes "^1.0.0"
+    create-hash "^1.1.0"
+    evp_bytestokey "^1.0.0"
+    pbkdf2 "^3.0.3"
+
+parse-glob@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
+  dependencies:
+    glob-base "^0.3.0"
+    is-dotfile "^1.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.0"
+
+parse-json@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-2.2.0.tgz#f480f40434ef80741f8469099f8dea18f55a4dc9"
+  dependencies:
+    error-ex "^1.2.0"
+
+parsejson@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/parsejson/-/parsejson-0.0.1.tgz#9b10c6c0d825ab589e685153826de0a3ba278bcc"
+  dependencies:
+    better-assert "~1.0.0"
+
+parseqs@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/parseqs/-/parseqs-0.0.2.tgz#9dfe70b2cddac388bde4f35b1f240fa58adbe6c7"
+  dependencies:
+    better-assert "~1.0.0"
+
+parseuri@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/parseuri/-/parseuri-0.0.4.tgz#806582a39887e1ea18dd5e2fe0e01902268e9350"
+  dependencies:
+    better-assert "~1.0.0"
+
+parseurl@~1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.1.tgz#c8ab8c9223ba34888aa64a297b28853bec18da56"
+
+path-array@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-array/-/path-array-1.0.1.tgz#7e2f0f35f07a2015122b868b7eac0eb2c4fec271"
+  dependencies:
+    array-index "^1.0.0"
+
+path-browserify@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.0.tgz#a0b870729aae214005b7d5032ec2cbbb0fb4451a"
+
+path-exists@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b"
+  dependencies:
+    pinkie-promise "^2.0.0"
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+
+path-is-inside@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
+
+path-key@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
+
+path-to-regexp@0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
+
+path-type@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
+  dependencies:
+    graceful-fs "^4.1.2"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+pbkdf2-compat@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pbkdf2-compat/-/pbkdf2-compat-2.0.1.tgz#b6e0c8fa99494d94e0511575802a59a5c142f288"
+
+pbkdf2@^3.0.3:
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.9.tgz#f2c4b25a600058b3c3773c086c37dbbee1ffe693"
+  dependencies:
+    create-hmac "^1.1.2"
+
+pend@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
+
+phantomjs-prebuilt@^2.1.7:
+  version "2.1.13"
+  resolved "https://registry.yarnpkg.com/phantomjs-prebuilt/-/phantomjs-prebuilt-2.1.13.tgz#66556ad9e965d893ca5a7dc9e763df7e8697f76d"
+  dependencies:
+    es6-promise "~4.0.3"
+    extract-zip "~1.5.0"
+    fs-extra "~0.30.0"
+    hasha "~2.2.0"
+    kew "~0.7.0"
+    progress "~1.1.8"
+    request "~2.74.0"
+    request-progress "~2.0.1"
+    which "~1.2.10"
+
+pify@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+
+pinkie-promise@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
+  dependencies:
+    pinkie "^2.0.0"
+
+pinkie@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
+
+pkg-dir@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-1.0.0.tgz#7a4b508a8d5bb2d629d447056ff4e9c9314cf3d4"
+  dependencies:
+    find-up "^1.0.0"
+
+pkg-up@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-1.0.0.tgz#3e08fb461525c4421624a33b9f7e6d0af5b05a26"
+  dependencies:
+    find-up "^1.0.0"
+
+pluralize@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-1.2.1.tgz#d1a21483fd22bb41e58a12fa3421823140897c45"
+
+postcss-calc@^5.2.0:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-5.3.1.tgz#77bae7ca928ad85716e2fda42f261bf7c1d65b5e"
+  dependencies:
+    postcss "^5.0.2"
+    postcss-message-helpers "^2.0.0"
+    reduce-css-calc "^1.2.6"
+
+postcss-colormin@^2.1.8:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-2.2.1.tgz#dc5421b6ae6f779ef6bfd47352b94abe59d0316b"
+  dependencies:
+    colormin "^1.0.5"
+    postcss "^5.0.13"
+    postcss-value-parser "^3.2.3"
+
+postcss-convert-values@^2.3.4:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-2.4.1.tgz#45dce4d4e33b7d967b97a4d937f270ea98d2fe7a"
+  dependencies:
+    postcss "^5.0.11"
+    postcss-value-parser "^3.1.2"
+
+postcss-discard-comments@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz#befe89fafd5b3dace5ccce51b76b81514be00e3d"
+  dependencies:
+    postcss "^5.0.14"
+
+postcss-discard-duplicates@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-2.0.1.tgz#5fae3f1a71df3e19cffb37309d1a7dba56c4589c"
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-discard-empty@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-2.1.0.tgz#d2b4bd9d5ced5ebd8dcade7640c7d7cd7f4f92b5"
+  dependencies:
+    postcss "^5.0.14"
+
+postcss-discard-overridden@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-0.1.1.tgz#8b1eaf554f686fb288cd874c55667b0aa3668d58"
+  dependencies:
+    postcss "^5.0.16"
+
+postcss-discard-unused@^2.2.1:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/postcss-discard-unused/-/postcss-discard-unused-2.2.2.tgz#5d72f7d05d11de0a9589e001958067ccae1b4931"
+  dependencies:
+    postcss "^5.0.14"
+    uniqs "^2.0.0"
+
+postcss-filter-plugins@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-filter-plugins/-/postcss-filter-plugins-2.0.2.tgz#6d85862534d735ac420e4a85806e1f5d4286d84c"
+  dependencies:
+    postcss "^5.0.4"
+    uniqid "^4.0.0"
+
+postcss-load-config@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-1.0.0.tgz#1399f60dcd6bd9c3124b2eb22960f77f9dc08b3d"
+  dependencies:
+    cosmiconfig "^2.1.0"
+    object-assign "^4.1.0"
+    postcss-load-options "^1.0.2"
+    postcss-load-plugins "^2.0.0"
+
+postcss-load-options@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-load-options/-/postcss-load-options-1.0.2.tgz#b99eb5759a588f4b2dd8b6471c6985f72060e7b0"
+  dependencies:
+    cosmiconfig "^2.1.0"
+    object-assign "^4.1.0"
+
+postcss-load-plugins@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-plugins/-/postcss-load-plugins-2.0.0.tgz#2840d8df1d1c57ebcb1d41b5f60d45796504b43f"
+  dependencies:
+    cosmiconfig "^2.1.0"
+    object-assign "^4.1.0"
+
+postcss-loader@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-1.1.1.tgz#cbc4cb75fbdcfa6c9fc3c7ec342ae04064f1c8fb"
+  dependencies:
+    loader-utils "^0.2.16"
+    object-assign "^4.1.0"
+    postcss "^5.2.5"
+    postcss-load-config "^1.0.0"
+
+postcss-merge-idents@^2.1.5:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/postcss-merge-idents/-/postcss-merge-idents-2.1.7.tgz#4c5530313c08e1d5b3bbf3d2bbc747e278eea270"
+  dependencies:
+    has "^1.0.1"
+    postcss "^5.0.10"
+    postcss-value-parser "^3.1.1"
+
+postcss-merge-longhand@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-2.0.1.tgz#ff59b5dec6d586ce2cea183138f55c5876fa9cdc"
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-merge-rules@^2.0.3:
+  version "2.0.10"
+  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-2.0.10.tgz#54b360be804e7e69a5c7222635247b92a3569e9b"
+  dependencies:
+    postcss "^5.0.4"
+    vendors "^1.0.0"
+
+postcss-message-helpers@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-message-helpers/-/postcss-message-helpers-2.0.0.tgz#a4f2f4fab6e4fe002f0aed000478cdf52f9ba60e"
+
+postcss-minify-font-values@^1.0.2:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-1.0.5.tgz#4b58edb56641eba7c8474ab3526cafd7bbdecb69"
+  dependencies:
+    object-assign "^4.0.1"
+    postcss "^5.0.4"
+    postcss-value-parser "^3.0.2"
+
+postcss-minify-gradients@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-1.0.4.tgz#47d4fef7efbcc64e541fae6115c9a3cc84d47006"
+  dependencies:
+    postcss "^5.0.12"
+    postcss-value-parser "^3.3.0"
+
+postcss-minify-params@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-1.0.5.tgz#82d602643b8616a61fb3634d7ede0289836d67f9"
+  dependencies:
+    alphanum-sort "^1.0.1"
+    postcss "^5.0.2"
+    postcss-value-parser "^3.0.2"
+    uniqs "^2.0.0"
+
+postcss-minify-selectors@^2.0.4:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-2.0.5.tgz#4e1f966fb49c95266804016ba9a3c6645bb601e0"
+  dependencies:
+    alphanum-sort "^1.0.2"
+    postcss "^5.0.14"
+    postcss-selector-parser "^2.0.0"
+
+postcss-modules-extract-imports@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.0.1.tgz#8fb3fef9a6dd0420d3f6d4353cf1ff73f2b2a341"
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-modules-local-by-default@^1.0.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.1.1.tgz#29a10673fa37d19251265ca2ba3150d9040eb4ce"
+  dependencies:
+    css-selector-tokenizer "^0.6.0"
+    postcss "^5.0.4"
+
+postcss-modules-scope@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-1.0.2.tgz#ff977395e5e06202d7362290b88b1e8cd049de29"
+  dependencies:
+    css-selector-tokenizer "^0.6.0"
+    postcss "^5.0.4"
+
+postcss-modules-values@^1.1.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-1.2.2.tgz#f0e7d476fe1ed88c5e4c7f97533a3e772ad94ca1"
+  dependencies:
+    icss-replace-symbols "^1.0.2"
+    postcss "^5.0.14"
+
+postcss-normalize-charset@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-1.1.0.tgz#2fbd30e12248c442981d31ea2484d46fd0628970"
+  dependencies:
+    postcss "^5.0.5"
+
+postcss-normalize-url@^3.0.7:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-3.0.7.tgz#6bd90d0a4bc5a1df22c26ea65c53257dc3829f4e"
+  dependencies:
+    is-absolute-url "^2.0.0"
+    normalize-url "^1.4.0"
+    postcss "^5.0.14"
+    postcss-value-parser "^3.2.3"
+
+postcss-ordered-values@^2.1.0:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-2.2.2.tgz#be8b511741fab2dac8e614a2302e9d10267b0771"
+  dependencies:
+    postcss "^5.0.4"
+    postcss-value-parser "^3.0.1"
+
+postcss-reduce-idents@^2.2.2:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-idents/-/postcss-reduce-idents-2.3.1.tgz#024e8e219f52773313408573db9645ba62d2d2fe"
+  dependencies:
+    postcss "^5.0.4"
+    postcss-value-parser "^3.0.2"
+
+postcss-reduce-initial@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-1.0.0.tgz#8f739b938289ef2e48936d7101783e4741ca9bbb"
+  dependencies:
+    postcss "^5.0.4"
+
+postcss-reduce-transforms@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-1.0.3.tgz#fc193e435a973c10f9801c74700a830f79643343"
+  dependencies:
+    postcss "^5.0.8"
+    postcss-value-parser "^3.0.1"
+
+postcss-selector-parser@^2.0.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.1.tgz#fdbf696103b12b0a64060e5610507f410491f7c8"
+  dependencies:
+    flatten "^1.0.2"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
+postcss-svgo@^2.1.1:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-2.1.5.tgz#46fc0363f01bab6a36a9abb01c229fcc45363094"
+  dependencies:
+    is-svg "^2.0.0"
+    postcss "^5.0.14"
+    postcss-value-parser "^3.2.3"
+    svgo "^0.7.0"
+
+postcss-unique-selectors@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-2.0.2.tgz#981d57d29ddcb33e7b1dfe1fd43b8649f933ca1d"
+  dependencies:
+    alphanum-sort "^1.0.1"
+    postcss "^5.0.4"
+    uniqs "^2.0.0"
+
+postcss-value-parser@^3.0.1, postcss-value-parser@^3.0.2, postcss-value-parser@^3.1.1, postcss-value-parser@^3.1.2, postcss-value-parser@^3.2.3, postcss-value-parser@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15"
+
+postcss-zindex@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-zindex/-/postcss-zindex-2.1.1.tgz#ea3fbe656c9738aa8729e2ee96ec2a46089b720f"
+  dependencies:
+    postcss "^5.0.4"
+    uniqs "^2.0.0"
+
+postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.5:
+  version "5.2.5"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.5.tgz#ec428c27dffc7fac65961340a9b022fa4af5f056"
+  dependencies:
+    chalk "^1.1.3"
+    js-base64 "^2.1.9"
+    source-map "^0.5.6"
+    supports-color "^3.1.2"
+
+postinstall-build@^2.0.0:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/postinstall-build/-/postinstall-build-2.1.3.tgz#9d1886ab2949619f4c206afbe1aea95debe45c94"
+
+pre-commit@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/pre-commit/-/pre-commit-1.1.3.tgz#6d5ed90740472072958c711a15f676aa2c231377"
+  dependencies:
+    cross-spawn "2.0.x"
+    which "1.2.x"
+
+prelude-ls@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
+
+prepend-http@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
+
+preserve@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
+
+private@^0.1.6, private@~0.1.5:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/private/-/private-0.1.6.tgz#55c6a976d0f9bafb9924851350fe47b9b5fbb7c1"
+
+process-nextick-args@~1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
+
+process@^0.11.0, process@~0.11.0:
+  version "0.11.9"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.9.tgz#7bd5ad21aa6253e7da8682264f1e11d11c0318c1"
+
+process@~0.5.1:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.5.2.tgz#1638d8a8e34c2f440a91db95ab9aeb677fc185cf"
+
+progress@^1.1.8, progress@~1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/progress/-/progress-1.1.8.tgz#e260c78f6161cdd9b0e56cc3e0a85de17c7a57be"
+
+promise@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-7.1.1.tgz#489654c692616b8aa55b0724fa809bb7db49c5bf"
+  dependencies:
+    asap "~2.0.3"
+
+proxy-addr@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.2.tgz#b4cc5f22610d9535824c123aef9d3cf73c40ba37"
+  dependencies:
+    forwarded "~0.1.0"
+    ipaddr.js "1.1.1"
+
+prr@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/prr/-/prr-0.0.0.tgz#1a84b85908325501411853d0081ee3fa86e2926a"
+
+pseudomap@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
+
+public-encrypt@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.0.tgz#39f699f3a46560dd5ebacbca693caf7c65c18cc6"
+  dependencies:
+    bn.js "^4.1.0"
+    browserify-rsa "^4.0.0"
+    create-hash "^1.1.0"
+    parse-asn1 "^5.0.0"
+    randombytes "^2.0.1"
+
+punycode@1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
+
+punycode@^1.2.4, punycode@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+
+q@^1.1.2:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.4.1.tgz#55705bcd93c5f3673530c2c2cbc0c2b3addc286e"
+
+qjobs@^1.1.4:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/qjobs/-/qjobs-1.1.5.tgz#659de9f2cf8dcc27a1481276f205377272382e73"
+
+qs@6.2.0, qs@~6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.2.0.tgz#3b7848c03c2dece69a9522b0fae8c4126d745f3b"
+
+qs@~6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.3.0.tgz#f403b264f23bc01228c74131b407f18d5ea5d442"
+
+query-string@^4.1.0:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.2.3.tgz#9f27273d207a25a8ee4c7b8c74dcd45d556db822"
+  dependencies:
+    object-assign "^4.1.0"
+    strict-uri-encode "^1.0.0"
+
+querystring-es3@~0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
+
+querystring@0.2.0, querystring@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
+
+randomatic@^1.1.3:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.5.tgz#5e9ef5f2d573c67bd2b8124ae90b5156e457840b"
+  dependencies:
+    is-number "^2.0.2"
+    kind-of "^3.0.2"
+
+randombytes@^2.0.0, randombytes@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.0.3.tgz#674c99760901c3c4112771a31e521dc349cc09ec"
+
+range-parser@^1.0.3, range-parser@^1.2.0, range-parser@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e"
+
+raw-body@~2.1.7:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.1.7.tgz#adfeace2e4fb3098058014d08c072dcc59758774"
+  dependencies:
+    bytes "2.4.0"
+    iconv-lite "0.4.13"
+    unpipe "1.0.0"
+
+rc@~1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.1.6.tgz#43651b76b6ae53b5c802f1151fa3fc3b059969c9"
+  dependencies:
+    deep-extend "~0.4.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~1.0.4"
+
+react-addons-css-transition-group@^15.4.0:
+  version "15.4.0"
+  resolved "https://registry.yarnpkg.com/react-addons-css-transition-group/-/react-addons-css-transition-group-15.4.0.tgz#410aa74533629974de33cfeaa85945066ff181cd"
+
+react-addons-test-utils@^15.4.0:
+  version "15.4.0"
+  resolved "https://registry.yarnpkg.com/react-addons-test-utils/-/react-addons-test-utils-15.4.0.tgz#bd326904916b80de6a466248ef52cdfc1799e963"
+
+react-css-themr@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/react-css-themr/-/react-css-themr-1.6.0.tgz#334634dc5fb8ed0c93b9696289a6a29635ec8b57"
+  dependencies:
+    invariant "^2.2.1"
+
+react-deep-force-update@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-1.0.1.tgz#f911b5be1d2a6fe387507dd6e9a767aa2924b4c7"
+
+react-dom@^15.4.0:
+  version "15.4.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.4.0.tgz#6a97a69000966570db48c746bc4b7b0ca50d1534"
+  dependencies:
+    fbjs "^0.8.1"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.0"
+
+react-proxy@^1.1.7:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/react-proxy/-/react-proxy-1.1.8.tgz#9dbfd9d927528c3aa9f444e4558c37830ab8c26a"
+  dependencies:
+    lodash "^4.6.1"
+    react-deep-force-update "^1.0.0"
+
+react-transform-catch-errors@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/react-transform-catch-errors/-/react-transform-catch-errors-1.0.2.tgz#1b4d4a76e97271896fc16fe3086c793ec88a9eeb"
+
+react-transform-hmr@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/react-transform-hmr/-/react-transform-hmr-1.0.4.tgz#e1a40bd0aaefc72e8dfd7a7cda09af85066397bb"
+  dependencies:
+    global "^4.3.0"
+    react-proxy "^1.1.7"
+
+react@^15.4.0:
+  version "15.4.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-15.4.0.tgz#736c1c7c542e8088127106e1f450b010f86d172b"
+  dependencies:
+    fbjs "^0.8.4"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.0"
+
+read-pkg-up@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
+  dependencies:
+    find-up "^1.0.0"
+    read-pkg "^1.0.0"
+
+read-pkg@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28"
+  dependencies:
+    load-json-file "^1.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^1.0.0"
+
+readable-stream@^1.0.27-1, readable-stream@^1.1.13:
+  version "1.1.14"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
+"readable-stream@^2.0.0 || ^1.1.13", readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@~2.0.0, readable-stream@~2.0.5:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.0.6.tgz#8f90341e68a53ccc928788dacfcd11b36eb9b78e"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    string_decoder "~0.10.x"
+    util-deprecate "~1.0.1"
+
+readable-stream@~1.0.2:
+  version "1.0.34"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
+readable-stream@~2.1.4:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.1.5.tgz#66fa8b720e1438b364681f2ad1a63c618448c9d0"
+  dependencies:
+    buffer-shims "^1.0.0"
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    string_decoder "~0.10.x"
+    util-deprecate "~1.0.1"
+
+readdirp@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.1.0.tgz#4ed0ad060df3073300c48440373f72d1cc642d78"
+  dependencies:
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    readable-stream "^2.0.2"
+    set-immediate-shim "^1.0.1"
+
+readline2@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/readline2/-/readline2-1.0.1.tgz#41059608ffc154757b715d9989d199ffbf372e35"
+  dependencies:
+    code-point-at "^1.0.0"
+    is-fullwidth-code-point "^1.0.0"
+    mute-stream "0.0.5"
+
+rechoir@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
+  dependencies:
+    resolve "^1.1.6"
+
+redbox-react@^1.3.2:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/redbox-react/-/redbox-react-1.3.3.tgz#63ec9c2cb9c620c46e2b9f8543b4898f1b787e41"
+  dependencies:
+    error-stack-parser "^1.3.6"
+    object-assign "^4.0.1"
+
+redent@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"
+  dependencies:
+    indent-string "^2.1.0"
+    strip-indent "^1.0.1"
+
+reduce-css-calc@^1.2.6:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz#747c914e049614a4c9cfbba629871ad1d2927716"
+  dependencies:
+    balanced-match "^0.4.2"
+    math-expression-evaluator "^1.2.14"
+    reduce-function-call "^1.0.1"
+
+reduce-function-call@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/reduce-function-call/-/reduce-function-call-1.0.1.tgz#fa02e126e695824263cab91d3a5b0fdc1dd27a9a"
+  dependencies:
+    balanced-match "~0.1.0"
+
+regenerate@^1.2.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.1.tgz#0300203a5d2fdcf89116dce84275d011f5903f33"
+
+regenerator-runtime@^0.9.5:
+  version "0.9.5"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.9.5.tgz#403d6d40a4bdff9c330dd9392dcbb2d9a8bba1fc"
+
+regex-cache@^0.4.2:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.3.tgz#9b1a6c35d4d0dfcef5711ae651e8e9d3d7114145"
+  dependencies:
+    is-equal-shallow "^0.1.3"
+    is-primitive "^2.0.0"
+
+regexpu-core@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-1.0.0.tgz#86a763f58ee4d7c2f6b102e4764050de7ed90c6b"
+  dependencies:
+    regenerate "^1.2.1"
+    regjsgen "^0.2.0"
+    regjsparser "^0.1.4"
+
+regexpu-core@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-2.0.0.tgz#49d038837b8dcf8bfa5b9a42139938e6ea2ae240"
+  dependencies:
+    regenerate "^1.2.1"
+    regjsgen "^0.2.0"
+    regjsparser "^0.1.4"
+
+regjsgen@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.2.0.tgz#6c016adeac554f75823fe37ac05b92d5a4edb1f7"
+
+regjsparser@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.1.5.tgz#7ee8f84dc6fa792d3fd0ae228d24bd949ead205c"
+  dependencies:
+    jsesc "~0.5.0"
+
+repeat-element@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a"
+
+repeat-string@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-0.2.2.tgz#c7a8d3236068362059a7e4651fc6884e8b1fb4ae"
+
+repeat-string@^1.5.2:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+
+repeating@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/repeating/-/repeating-2.0.1.tgz#5214c53a926d3552707527fbab415dbc08d06dda"
+  dependencies:
+    is-finite "^1.0.0"
+
+repeating@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/repeating/-/repeating-3.0.0.tgz#f4c376fdd2015761f6f96f4303b1224d581e802f"
+
+request-progress@~2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/request-progress/-/request-progress-2.0.1.tgz#5d36bb57961c673aa5b788dbc8141fdf23b44e08"
+  dependencies:
+    throttleit "^1.0.0"
+
+request@2, request@^2.61.0, request@^2.75.0:
+  version "2.76.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.76.0.tgz#be44505afef70360a0436955106be3945d95560e"
+  dependencies:
+    aws-sign2 "~0.6.0"
+    aws4 "^1.2.1"
+    caseless "~0.11.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~2.1.1"
+    har-validator "~2.0.6"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    node-uuid "~1.4.7"
+    oauth-sign "~0.8.1"
+    qs "~6.3.0"
+    stringstream "~0.0.4"
+    tough-cookie "~2.3.0"
+    tunnel-agent "~0.4.1"
+
+request@~2.74.0:
+  version "2.74.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.74.0.tgz#7693ca768bbb0ea5c8ce08c084a45efa05b892ab"
+  dependencies:
+    aws-sign2 "~0.6.0"
+    aws4 "^1.2.1"
+    bl "~1.1.2"
+    caseless "~0.11.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~1.0.0-rc4"
+    har-validator "~2.0.6"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    node-uuid "~1.4.7"
+    oauth-sign "~0.8.1"
+    qs "~6.2.0"
+    stringstream "~0.0.4"
+    tough-cookie "~2.3.0"
+    tunnel-agent "~0.4.1"
+
+require-directory@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
+
+require-from-string@^1.1.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-1.2.1.tgz#529c9ccef27380adfec9a2f965b649bbee636418"
+
+require-main-filename@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
+
+require-uncached@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/require-uncached/-/require-uncached-1.0.2.tgz#67dad3b733089e77030124678a459589faf6a7ec"
+  dependencies:
+    caller-path "^0.1.0"
+    resolve-from "^1.0.0"
+
+requires-port@1.x.x:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+
+resolve-from@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226"
+
+resolve@^1.1.6, resolve@^1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
+
+restore-cursor@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-1.0.1.tgz#34661f46886327fed2991479152252df92daa541"
+  dependencies:
+    exit-hook "^1.0.0"
+    onetime "^1.0.0"
+
+right-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
+  dependencies:
+    align-text "^0.1.1"
+
+rimraf@2, rimraf@^2.2.8, rimraf@^2.3.3, rimraf@^2.5.2, rimraf@~2.5.1, rimraf@~2.5.4:
+  version "2.5.4"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.5.4.tgz#96800093cbf1a0c86bd95b4625467535c29dfa04"
+  dependencies:
+    glob "^7.0.5"
+
+ripemd160@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-0.2.0.tgz#2bf198bde167cacfa51c0a928e84b68bbe171fce"
+
+ripemd160@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-1.0.1.tgz#93a4bbd4942bc574b69a8fa57c71de10ecca7d6e"
+
+run-async@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/run-async/-/run-async-0.1.0.tgz#c8ad4a5e110661e402a7d21b530e009f25f8e389"
+  dependencies:
+    once "^1.3.0"
+
+rx-lite@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-3.1.2.tgz#19ce502ca572665f3b647b10939f97fd1615f102"
+
+rxjs@^5.0.0-beta.11:
+  version "5.0.0-rc.3"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.0.0-rc.3.tgz#d8bc390d83277846b2d2afa1acf3c5f4f114a8d5"
+  dependencies:
+    symbol-observable "^1.0.1"
+
+safe-buffer@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.0.1.tgz#d263ca54696cd8a306b5ca6551e92de57918fbe7"
+
+samsam@^1.1.3:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/samsam/-/samsam-1.2.1.tgz#edd39093a3184370cb859243b2bdf255e7d8ea67"
+
+samsam@~1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/samsam/-/samsam-1.1.3.tgz#9f5087419b4d091f232571e7fa52e90b0f552621"
+
+sass-graph@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/sass-graph/-/sass-graph-2.1.2.tgz#965104be23e8103cb7e5f710df65935b317da57b"
+  dependencies:
+    glob "^7.0.0"
+    lodash "^4.0.0"
+    yargs "^4.7.1"
+
+sass-lint@^1.10.2:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/sass-lint/-/sass-lint-1.10.2.tgz#825bd6b0da79ddd36a42ffae5b6d44ac4922502b"
+  dependencies:
+    commander "^2.8.1"
+    eslint "^2.7.0"
+    front-matter "2.1.0"
+    fs-extra "^1.0.0"
+    glob "^7.0.0"
+    globule "^1.0.0"
+    gonzales-pe "3.4.7"
+    js-yaml "^3.5.4"
+    lodash.capitalize "^4.1.0"
+    lodash.kebabcase "^4.0.0"
+    merge "^1.2.0"
+    path-is-absolute "^1.0.0"
+    util "^0.10.3"
+
+sass-loader@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-4.0.2.tgz#a616eb770366543e64f547c8630f39c4da75f15d"
+  dependencies:
+    async "^2.0.1"
+    loader-utils "^0.2.15"
+    object-assign "^4.1.0"
+
+sax@~1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.1.tgz#7b8e656190b228e81a66aea748480d828cd2d37a"
+
+"semver@2 || 3 || 4 || 5", "semver@2.x || 3.x || 4 || 5", semver@^5.3.0, semver@~5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
+
+semver@~4.3.3:
+  version "4.3.6"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-4.3.6.tgz#300bc6e0e86374f7ba61068b5b1ecd57fc6532da"
+
+send@0.14.1:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.14.1.tgz#a954984325392f51532a7760760e459598c89f7a"
+  dependencies:
+    debug "~2.2.0"
+    depd "~1.1.0"
+    destroy "~1.0.4"
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    etag "~1.7.0"
+    fresh "0.3.0"
+    http-errors "~1.5.0"
+    mime "1.3.4"
+    ms "0.7.1"
+    on-finished "~2.3.0"
+    range-parser "~1.2.0"
+    statuses "~1.3.0"
+
+serve-static@~1.11.1:
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.11.1.tgz#d6cce7693505f733c759de57befc1af76c0f0805"
+  dependencies:
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    parseurl "~1.3.1"
+    send "0.14.1"
+
+set-blocking@^2.0.0, set-blocking@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+
+set-immediate-shim@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
+
+setprototypeof@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.0.1.tgz#52009b27888c4dc48f591949c0a8275834c1ca7e"
+
+sha.js@2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.2.6.tgz#17ddeddc5f722fb66501658895461977867315ba"
+
+sha.js@^2.3.6:
+  version "2.4.5"
+  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.5.tgz#27d171efcc82a118b99639ff581660242b506e7c"
+  dependencies:
+    inherits "^2.0.1"
+
+shell-quote@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.6.1.tgz#f4781949cce402697127430ea3b3c5476f481767"
+  dependencies:
+    array-filter "~0.0.0"
+    array-map "~0.0.0"
+    array-reduce "~0.0.0"
+    jsonify "~0.0.0"
+
+shelljs@^0.6.0:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.6.1.tgz#ec6211bed1920442088fe0f70b2837232ed2c8a8"
+
+shelljs@^0.7.5:
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.7.5.tgz#2eef7a50a21e1ccf37da00df767ec69e30ad0675"
+  dependencies:
+    glob "^7.0.0"
+    interpret "^1.0.0"
+    rechoir "^0.6.2"
+
+signal-exit@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.1.tgz#5a4c884992b63a7acd9badb7894c3ee9cfccad81"
+
+sinon@^2.0.0-pre.2:
+  version "2.0.0-pre.4"
+  resolved "https://registry.yarnpkg.com/sinon/-/sinon-2.0.0-pre.4.tgz#f29fbcca8d2fa73b633a3b0c0e4e3c78f2360c2c"
+  dependencies:
+    formatio "1.1.1"
+    lolex "^1.4.0"
+    samsam "^1.1.3"
+    text-encoding "0.5.2"
+
+slash@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
+
+slice-ansi@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-0.0.4.tgz#edbf8903f66f7ce2f8eafd6ceed65e264c831b35"
+
+sntp@1.x.x:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"
+  dependencies:
+    hoek "2.x.x"
+
+socket.io-adapter@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/socket.io-adapter/-/socket.io-adapter-0.4.0.tgz#fb9f82ab1aa65290bf72c3657955b930a991a24f"
+  dependencies:
+    debug "2.2.0"
+    socket.io-parser "2.2.2"
+
+socket.io-client@1.4.6:
+  version "1.4.6"
+  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-1.4.6.tgz#49b0ba537efd15b8297c84016e642e1c7c752c3d"
+  dependencies:
+    backo2 "1.0.2"
+    component-bind "1.0.0"
+    component-emitter "1.2.0"
+    debug "2.2.0"
+    engine.io-client "1.6.9"
+    has-binary "0.1.7"
+    indexof "0.0.1"
+    object-component "0.0.3"
+    parseuri "0.0.4"
+    socket.io-parser "2.2.6"
+    to-array "0.1.4"
+
+socket.io-parser@2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-2.2.2.tgz#3d7af6b64497e956b7d9fe775f999716027f9417"
+  dependencies:
+    benchmark "1.0.0"
+    component-emitter "1.1.2"
+    debug "0.7.4"
+    isarray "0.0.1"
+    json3 "3.2.6"
+
+socket.io-parser@2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-2.2.6.tgz#38dfd61df50dcf8ab1d9e2091322bf902ba28b99"
+  dependencies:
+    benchmark "1.0.0"
+    component-emitter "1.1.2"
+    debug "2.2.0"
+    isarray "0.0.1"
+    json3 "3.3.2"
+
+socket.io@1.4.7:
+  version "1.4.7"
+  resolved "https://registry.yarnpkg.com/socket.io/-/socket.io-1.4.7.tgz#92b7f7cb88c5797d4daee279fe8075dbe6d3fa1c"
+  dependencies:
+    debug "2.2.0"
+    engine.io "1.6.10"
+    has-binary "0.1.7"
+    socket.io-adapter "0.4.0"
+    socket.io-client "1.4.6"
+    socket.io-parser "2.2.6"
+
+sort-keys@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad"
+  dependencies:
+    is-plain-obj "^1.0.0"
+
+source-list-map@^0.1.4, source-list-map@~0.1.0:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.6.tgz#e1e6f94f0b40c4d28dcf8f5b8766e0e45636877f"
+
+source-map-support@^0.4.2:
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.5.tgz#4438df4219e1b3c7feb674614b4c67f9722db1e4"
+  dependencies:
+    source-map "^0.5.3"
+
+source-map@^0.1.41:
+  version "0.1.43"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346"
+  dependencies:
+    amdefine ">=0.0.4"
+
+source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.1, source-map@~0.5.3:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
+
+source-map@~0.4.1:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
+  dependencies:
+    amdefine ">=0.0.4"
+
+spawn-sync@1.0.13:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/spawn-sync/-/spawn-sync-1.0.13.tgz#904091b9ad48a0f3afb0e84752154c01e82fd8d8"
+  dependencies:
+    concat-stream "^1.4.7"
+    os-shim "^0.1.2"
+
+spdx-correct@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-1.0.2.tgz#4b3073d933ff51f3912f03ac5519498a4150db40"
+  dependencies:
+    spdx-license-ids "^1.0.2"
+
+spdx-expression-parse@~1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-1.0.4.tgz#9bdf2f20e1f40ed447fbe273266191fced51626c"
+
+spdx-license-ids@^1.0.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-1.2.2.tgz#c9df7a3424594ade6bd11900d596696dc06bac57"
+
+sprintf-js@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+
+sshpk@^1.7.0:
+  version "1.10.1"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.10.1.tgz#30e1a5d329244974a1af61511339d595af6638b0"
+  dependencies:
+    asn1 "~0.2.3"
+    assert-plus "^1.0.0"
+    dashdash "^1.12.0"
+    getpass "^0.1.1"
+  optionalDependencies:
+    bcrypt-pbkdf "^1.0.0"
+    ecc-jsbn "~0.1.1"
+    jodid25519 "^1.0.0"
+    jsbn "~0.1.0"
+    tweetnacl "~0.14.0"
+
+stackframe@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-0.3.1.tgz#33aa84f1177a5548c8935533cbfeb3420975f5a4"
+
+staged-git-files@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/staged-git-files/-/staged-git-files-0.0.4.tgz#d797e1b551ca7a639dec0237dc6eb4bb9be17d35"
+
+"statuses@>= 1.3.0 < 2", statuses@~1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.0.tgz#8e55758cb20e7682c1f4fce8dcab30bf01d1e07a"
+
+stream-browserify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-1.0.0.tgz#bf9b4abfb42b274d751479e44e0ff2656b6f1193"
+  dependencies:
+    inherits "~2.0.1"
+    readable-stream "^1.0.27-1"
+
+stream-browserify@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db"
+  dependencies:
+    inherits "~2.0.1"
+    readable-stream "^2.0.2"
+
+stream-to-observable@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/stream-to-observable/-/stream-to-observable-0.1.0.tgz#45bf1d9f2d7dc09bed81f1c307c430e68b84cffe"
+
+strict-uri-encode@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
+
+string-width@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
+  dependencies:
+    code-point-at "^1.0.0"
+    is-fullwidth-code-point "^1.0.0"
+    strip-ansi "^3.0.0"
+
+string-width@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.0.0.tgz#635c5436cc72a6e0c387ceca278d4e2eec52687e"
+  dependencies:
+    is-fullwidth-code-point "^2.0.0"
+    strip-ansi "^3.0.0"
+
+string_decoder@~0.10.25, string_decoder@~0.10.x:
+  version "0.10.31"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
+
+stringstream@~0.0.4:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878"
+
+strip-ansi@^3.0.0, strip-ansi@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
+  dependencies:
+    ansi-regex "^2.0.0"
+
+strip-bom@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
+  dependencies:
+    is-utf8 "^0.2.0"
+
+strip-bom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
+
+strip-eof@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
+
+strip-indent@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-1.0.1.tgz#0c7962a6adefa7bbd4ac366460a638552ae1a0a2"
+  dependencies:
+    get-stdin "^4.0.1"
+
+strip-json-comments@~1.0.1, strip-json-comments@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-1.0.4.tgz#1e15fbcac97d3ee99bf2d73b4c656b082bbafb91"
+
+style-loader@^0.13.1:
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.13.1.tgz#468280efbc0473023cd3a6cd56e33b5a1d7fc3a9"
+  dependencies:
+    loader-utils "^0.2.7"
+
+subarg@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/subarg/-/subarg-1.0.0.tgz#f62cf17581e996b48fc965699f54c06ae268b8d2"
+  dependencies:
+    minimist "^1.1.0"
+
+supports-color@3.1.2, supports-color@^3.1.0, supports-color@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.1.2.tgz#72a262894d9d408b956ca05ff37b2ed8a6e2a2d5"
+  dependencies:
+    has-flag "^1.0.0"
+
+supports-color@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
+
+svgo@^0.7.0:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.1.tgz#287320fed972cb097e72c2bb1685f96fe08f8034"
+  dependencies:
+    coa "~1.0.1"
+    colors "~1.1.2"
+    csso "~2.2.1"
+    js-yaml "~3.6.1"
+    mkdirp "~0.5.1"
+    sax "~1.2.1"
+    whet.extend "~0.9.9"
+
+symbol-observable@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.4.tgz#29bf615d4aa7121bdd898b22d4b3f9bc4e2aa03d"
+
+table@^3.7.8:
+  version "3.8.3"
+  resolved "https://registry.yarnpkg.com/table/-/table-3.8.3.tgz#2bbc542f0fda9861a755d3947fefd8b3f513855f"
+  dependencies:
+    ajv "^4.7.0"
+    ajv-keywords "^1.0.0"
+    chalk "^1.1.1"
+    lodash "^4.0.0"
+    slice-ansi "0.0.4"
+    string-width "^2.0.0"
+
+tapable@^0.1.8, tapable@~0.1.8:
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.1.10.tgz#29c35707c2b70e50d07482b5d202e8ed446dafd4"
+
+tar-pack@~3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.3.0.tgz#30931816418f55afc4d21775afdd6720cee45dae"
+  dependencies:
+    debug "~2.2.0"
+    fstream "~1.0.10"
+    fstream-ignore "~1.0.5"
+    once "~1.3.3"
+    readable-stream "~2.1.4"
+    rimraf "~2.5.1"
+    tar "~2.2.1"
+    uid-number "~0.0.6"
+
+tar@^2.0.0, tar@~2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.1.tgz#8e4d2a256c0e2185c6b18ad694aec968b83cb1d1"
+  dependencies:
+    block-stream "*"
+    fstream "^1.0.2"
+    inherits "2"
+
+text-encoding@0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/text-encoding/-/text-encoding-0.5.2.tgz#85b4660819f088777609465551690fea137d824a"
+
+text-table@~0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
+
+throttleit@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-1.0.0.tgz#9e785836daf46743145a5984b6268d828528ac6c"
+
+through@^2.3.6:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+
+timers-browserify@^1.0.1:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-1.4.2.tgz#c9c58b575be8407375cb5e2462dacee74359f41d"
+  dependencies:
+    process "~0.11.0"
+
+tmatch@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/tmatch/-/tmatch-2.0.1.tgz#0c56246f33f30da1b8d3d72895abaf16660f38cf"
+
+tmp@0.0.28:
+  version "0.0.28"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.28.tgz#172735b7f614ea7af39664fa84cf0de4e515d120"
+  dependencies:
+    os-tmpdir "~1.0.1"
+
+to-array@0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/to-array/-/to-array-0.1.4.tgz#17e6c11f73dd4f3d74cda7a4ff3238e9ad9bf890"
+
+to-fast-properties@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.2.tgz#f3f5c0c3ba7299a7ef99427e44633257ade43320"
+
+tough-cookie@~2.3.0:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.2.tgz#f081f76e4c85720e6c37a5faced737150d84072a"
+  dependencies:
+    punycode "^1.4.1"
+
+trim-newlines@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
+
+tryit@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tryit/-/tryit-1.0.3.tgz#393be730a9446fd1ead6da59a014308f36c289cb"
+
+tty-browserify@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
+
+tunnel-agent@~0.4.1:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.4.3.tgz#6373db76909fe570e08d73583365ed828a74eeeb"
+
+tweetnacl@^0.14.3, tweetnacl@~0.14.0:
+  version "0.14.3"
+  resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.3.tgz#3da382f670f25ded78d7b3d1792119bca0b7132d"
+
+type-check@~0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
+  dependencies:
+    prelude-ls "~1.1.2"
+
+type-is@~1.6.13:
+  version "1.6.13"
+  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.13.tgz#6e83ba7bc30cd33a7bb0b7fb00737a2085bf9d08"
+  dependencies:
+    media-typer "0.3.0"
+    mime-types "~2.1.11"
+
+typedarray@~0.0.5:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+
+ua-parser-js@^0.7.9:
+  version "0.7.10"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.10.tgz#917559ddcce07cbc09ece7d80495e4c268f4ef9f"
+
+uglify-js@~2.7.3:
+  version "2.7.4"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.7.4.tgz#a295a0de12b6a650c031c40deb0dc40b14568bd2"
+  dependencies:
+    async "~0.2.6"
+    source-map "~0.5.1"
+    uglify-to-browserify "~1.0.0"
+    yargs "~3.10.0"
+
+uglify-to-browserify@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
+
+uid-number@~0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
+
+ultron@1.0.x:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.0.2.tgz#ace116ab557cd197386a4e88f4685378c8b2e4fa"
+
+unc-path-regex@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/unc-path-regex/-/unc-path-regex-0.1.2.tgz#e73dd3d7b0d7c5ed86fbac6b0ae7d8c6a69d50fa"
+
+uniq@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
+
+uniqid@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/uniqid/-/uniqid-4.1.0.tgz#33d9679f65022f48988a03fd24e7dcaf8f109eca"
+  dependencies:
+    macaddress "^0.2.8"
+
+uniqs@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
+
+unpipe@1.0.0, unpipe@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+
+url@~0.10.1:
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/url/-/url-0.10.3.tgz#021e4d9c7705f21bbf37d03ceb58767402774c64"
+  dependencies:
+    punycode "1.3.2"
+    querystring "0.2.0"
+
+url@~0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
+  dependencies:
+    punycode "1.3.2"
+    querystring "0.2.0"
+
+user-home@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/user-home/-/user-home-1.1.1.tgz#2b5be23a32b63a7c9deb8d0f28d485724a3df190"
+
+user-home@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/user-home/-/user-home-2.0.0.tgz#9c70bfd8169bc1dcbf48604e0f04b8b49cde9e9f"
+  dependencies:
+    os-homedir "^1.0.0"
+
+useragent@^2.1.9:
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/useragent/-/useragent-2.1.9.tgz#4dba2bc4dad1875777ab15de3ff8098b475000b7"
+  dependencies:
+    lru-cache "2.2.x"
+
+utf8@2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/utf8/-/utf8-2.1.0.tgz#0cfec5c8052d44a23e3aaa908104e8075f95dfd5"
+
+util-deprecate@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+
+util@0.10.3, util@^0.10.3, util@~0.10.3:
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
+  dependencies:
+    inherits "2.0.1"
+
+utils-merge@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.0.tgz#0294fb922bb9375153541c4f7096231f287c8af8"
+
+v8flags@^2.0.10:
+  version "2.0.11"
+  resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-2.0.11.tgz#bca8f30f0d6d60612cc2c00641e6962d42ae6881"
+  dependencies:
+    user-home "^1.1.1"
+
+validate-npm-package-license@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz#2804babe712ad3379459acfbe24746ab2c303fbc"
+  dependencies:
+    spdx-correct "~1.0.0"
+    spdx-expression-parse "~1.0.0"
+
+vary@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.0.tgz#e1e5affbbd16ae768dd2674394b9ad3022653140"
+
+vendors@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.1.tgz#37ad73c8ee417fb3d580e785312307d274847f22"
+
+verror@1.3.6:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/verror/-/verror-1.3.6.tgz#cff5df12946d297d2baaefaa2689e25be01c005c"
+  dependencies:
+    extsprintf "1.0.2"
+
+vm-browserify@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
+  dependencies:
+    indexof "0.0.1"
+
+void-elements@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
+
+watchpack@^0.2.1:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-0.2.9.tgz#62eaa4ab5e5ba35fdfc018275626e3c0f5e3fb0b"
+  dependencies:
+    async "^0.9.0"
+    chokidar "^1.0.0"
+    graceful-fs "^4.1.2"
+
+webpack-core@~0.6.0:
+  version "0.6.8"
+  resolved "https://registry.yarnpkg.com/webpack-core/-/webpack-core-0.6.8.tgz#edf9135de00a6a3c26dd0f14b208af0aa4af8d0a"
+  dependencies:
+    source-list-map "~0.1.0"
+    source-map "~0.4.1"
+
+webpack-dev-middleware@^1.0.11, webpack-dev-middleware@^1.8.4:
+  version "1.8.4"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.8.4.tgz#e8765c9122887ce9e3abd4cc9c3eb31b61e0948d"
+  dependencies:
+    memory-fs "~0.3.0"
+    mime "^1.3.4"
+    path-is-absolute "^1.0.0"
+    range-parser "^1.0.3"
+
+webpack-hot-middleware@^2.13.0:
+  version "2.13.2"
+  resolved "https://registry.yarnpkg.com/webpack-hot-middleware/-/webpack-hot-middleware-2.13.2.tgz#6500b15e6d4f1a9590f8df708183f4d2ac2c3e9e"
+  dependencies:
+    ansi-html "0.0.6"
+    html-entities "^1.2.0"
+    querystring "^0.2.0"
+    strip-ansi "^3.0.0"
+
+webpack-sources@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-0.1.2.tgz#057a3f3255f8ba561b901d9150589aa103a57e65"
+  dependencies:
+    source-list-map "~0.1.0"
+    source-map "~0.5.3"
+
+webpack@^1.13.0:
+  version "1.13.3"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-1.13.3.tgz#e79c46fe5a37c5ca70084ba0894c595cdcb42815"
+  dependencies:
+    acorn "^3.0.0"
+    async "^1.3.0"
+    clone "^1.0.2"
+    enhanced-resolve "~0.9.0"
+    interpret "^0.6.4"
+    loader-utils "^0.2.11"
+    memory-fs "~0.3.0"
+    mkdirp "~0.5.0"
+    node-libs-browser "^0.6.0"
+    optimist "~0.6.0"
+    supports-color "^3.1.0"
+    tapable "~0.1.8"
+    uglify-js "~2.7.3"
+    watchpack "^0.2.1"
+    webpack-core "~0.6.0"
+
+whatwg-fetch@>=0.10.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-1.0.0.tgz#01c2ac4df40e236aaa18480e3be74bd5c8eb798e"
+
+whet.extend@~0.9.9:
+  version "0.9.9"
+  resolved "https://registry.yarnpkg.com/whet.extend/-/whet.extend-0.9.9.tgz#f877d5bf648c97e5aa542fadc16d6a259b9c11a1"
+
+which-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
+
+which@1, which@1.2.x, which@^1.2.10, which@^1.2.11, which@^1.2.8, which@^1.2.9, which@~1.2.10:
+  version "1.2.12"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.2.12.tgz#de67b5e450269f194909ef23ece4ebe416fa1192"
+  dependencies:
+    isexe "^1.1.1"
+
+wide-align@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.0.tgz#40edde802a71fea1f070da3e62dcda2e7add96ad"
+  dependencies:
+    string-width "^1.0.1"
+
+window-size@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
+
+window-size@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.2.0.tgz#b4315bb4214a3d7058ebeee892e13fa24d98b075"
+
+wordwrap@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
+
+wordwrap@~0.0.2:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+
+wordwrap@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
+
+wrap-ansi@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.0.0.tgz#7d30f8f873f9a5bbc3a64dabc8d177e071ae426f"
+  dependencies:
+    string-width "^1.0.1"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+
+write@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/write/-/write-0.2.1.tgz#5fc03828e264cea3fe91455476f7a3c566cb0757"
+  dependencies:
+    mkdirp "^0.5.1"
+
+ws@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-1.0.1.tgz#7d0b2a2e58cddd819039c29c9de65045e1b310e9"
+  dependencies:
+    options ">=0.0.5"
+    ultron "1.0.x"
+
+xmlhttprequest-ssl@1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.1.tgz#3b7741fea4a86675976e908d296d4445961faa67"
+
+xtend@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
+
+y18n@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
+
+yallist@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.0.0.tgz#306c543835f09ee1a4cb23b7bce9ab341c91cdd4"
+
+yargs-parser@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-2.4.1.tgz#85568de3cf150ff49fa51825f03a8c880ddcc5c4"
+  dependencies:
+    camelcase "^3.0.0"
+    lodash.assign "^4.0.6"
+
+yargs@^4.7.1:
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-4.8.1.tgz#c0c42924ca4aaa6b0e6da1739dfb216439f9ddc0"
+  dependencies:
+    cliui "^3.2.0"
+    decamelize "^1.1.1"
+    get-caller-file "^1.0.1"
+    lodash.assign "^4.0.3"
+    os-locale "^1.4.0"
+    read-pkg-up "^1.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^1.0.1"
+    which-module "^1.0.0"
+    window-size "^0.2.0"
+    y18n "^3.2.1"
+    yargs-parser "^2.4.1"
+
+yargs@~3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
+  dependencies:
+    camelcase "^1.0.2"
+    cliui "^2.1.0"
+    decamelize "^1.0.0"
+    window-size "0.1.0"
+
+yauzl@2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.4.1.tgz#9528f442dab1b2284e58b4379bb194e22e0c4005"
+  dependencies:
+    fd-slicer "~1.0.1"
+
+yeast@0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"

From ad0bcc33d5535e06572c7146a24207093b0e0164 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 22 Nov 2016 09:45:38 +0100
Subject: [PATCH 0947/1024] Inject and use FontIcon and minor rendering changes
 for Tabs

---
 components/tabs/Tabs.js    | 151 +++++++++++++++++--------------------
 components/tabs/index.js   |   3 +-
 components/tabs/theme.scss |  19 +++--
 spec/components/tabs.js    |   2 +-
 4 files changed, 85 insertions(+), 90 deletions(-)

diff --git a/components/tabs/Tabs.js b/components/tabs/Tabs.js
index ad0d32008..b9f6a7f6e 100644
--- a/components/tabs/Tabs.js
+++ b/components/tabs/Tabs.js
@@ -2,10 +2,11 @@ import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
 import { TABS } from '../identifiers.js';
+import InjectFontIcon from '../font_icon/FontIcon.js';
 import InjectTab from './Tab.js';
 import InjectTabContent from './TabContent.js';
 
-const factory = (Tab, TabContent) => {
+const factory = (Tab, TabContent, FontIcon) => {
   class Tabs extends Component {
     static propTypes = {
       children: PropTypes.node,
@@ -38,13 +39,12 @@ const factory = (Tab, TabContent) => {
     };
 
     componentDidMount () {
-      !this.props.disableAnimatedBottomBorder && this.updatePointer(this.props.index);
       window.addEventListener('resize', this.handleResize);
       this.handleResize();
     }
 
     componentWillReceiveProps (nextProps) {
-      !this.props.disableAnimatedBottomBorder && this.updatePointer(nextProps.index);
+      this.updatePointer(nextProps.index);
     }
 
     componentWillUnmount () {
@@ -60,16 +60,52 @@ const factory = (Tab, TabContent) => {
     };
 
     handleResize = () => {
-      if (this.resizeTimeout) {
-        clearTimeout(this.resizeTimeout);
-      }
-      this.resizeTimeout = setTimeout(this.handleResizeEnd, 50);
+      if (this.resizeTimeout) clearTimeout(this.resizeTimeout);
+      this.resizeTimeout = setTimeout(() => {
+        this.updatePointer(this.props.index);
+        this.updateArrows();
+      }, 100);
     };
 
-    handleResizeEnd = () => {
-      this.updatePointer(this.props.index);
-      this.updateArrows();
-    };
+    updatePointer = idx => {
+      if (this.navigationNode && this.navigationNode.children[idx]) {
+        const nav = this.navigationNode.getBoundingClientRect();
+        const label = this.navigationNode.children[idx].getBoundingClientRect();
+        const scrollLeft = this.navigationNode.scrollLeft;
+        this.setState({
+          pointer: {
+            top: `${nav.height}px`,
+            left: `${label.left - nav.left + scrollLeft}px`,
+            width: `${label.width}px`
+          }
+        });
+      }
+    }
+
+    updateArrows = () => {
+      const nav = this.navigationNode;
+      this.setState({
+        arrows: {
+          left: nav.scrollLeft > 0,
+          right: nav.scrollWidth > nav.clientWidth
+            && (nav.scrollLeft + nav.clientWidth) < nav.scrollWidth
+        }
+      });
+    }
+
+    scrollNavigation = (factor) => {
+      const oldScrollLeft = this.navigationNode.scrollLeft;
+      this.navigationNode.scrollLeft += factor * this.navigationNode.clientWidth;
+      if (this.navigationNode.scrollLeft !== oldScrollLeft) {
+        this.updateArrows();
+      }
+    }
+
+    scrollRight = () =>
+      this.scrollNavigation(-1);
+
+    scrollLeft = () =>
+      this.scrollNavigation(+1);
 
     parseChildren () {
       const headers = [];
@@ -89,51 +125,6 @@ const factory = (Tab, TabContent) => {
       return {headers, contents};
     }
 
-    updatePointer (idx) {
-      clearTimeout(this.pointerTimeout);
-      this.pointerTimeout = setTimeout(() => {
-        const nav = this.refs.navigation.getBoundingClientRect();
-        const label = this.refs.navigation.children[idx].getBoundingClientRect();
-        const scrollLeft = this.refs.navigation.scrollLeft;
-        this.setState({
-          pointer: {
-            top: `${nav.height}px`,
-            left: `${label.left - nav.left + scrollLeft}px`,
-            width: `${label.width}px`
-          }
-        });
-      }, 20);
-    }
-
-    updateArrows () {
-      clearTimeout(this.arrowsTimeout);
-      this.arrowsTimeout = setTimeout(() => {
-        const nav = this.refs.navigation;
-        this.setState({
-          arrows: {
-            left: nav.scrollLeft > 0,
-            right: nav.scrollWidth > nav.clientWidth && (nav.scrollLeft + nav.clientWidth) < nav.scrollWidth
-          }
-        });
-      }, 20);
-    }
-
-    scrollNavigationLeft = () => {
-      const oldScrollLeft = this.refs.navigation.scrollLeft;
-      this.refs.navigation.scrollLeft -= this.refs.navigation.clientWidth;
-      if (this.refs.navigation.scrollLeft !== oldScrollLeft) {
-        this.updateArrows();
-      }
-    }
-
-    scrollNavigationRight = () => {
-      const oldScrollLeft = this.refs.navigation.scrollLeft;
-      this.refs.navigation.scrollLeft += this.refs.navigation.clientWidth;
-      if (this.refs.navigation.scrollLeft !== oldScrollLeft) {
-        this.updateArrows();
-      }
-    }
-
     renderHeaders (headers) {
       return headers.map((item, idx) => {
         return React.cloneElement(item, {
@@ -160,37 +151,37 @@ const factory = (Tab, TabContent) => {
         });
       });
 
-      if (this.props.hideMode === 'display') {
-        return contentElements;
-      }
-
-      return contentElements.filter((item, idx) => (idx === this.props.index));
+      return this.props.hideMode === 'display'
+        ? contentElements
+        : contentElements.filter((item, idx) => (idx === this.props.index));
     }
 
     render () {
-      const { className, theme, fixed, inverse } = this.props;
+      const { className, disableAnimatedBottomBorder, theme, fixed, inverse } = this.props;
+      const { left: hasLeftArrow, right: hasRightArrow } = this.state.arrows;
       const { headers, contents } = this.parseChildren();
-      const classes = classnames(
-        theme.tabs,
-        className,
-        {
-          [theme.fixed]: fixed,
-          [theme.inverse]: inverse
-        }
-      );
+      const classNamePointer = classnames(theme.pointer, {
+        [theme.disableAnimation]: disableAnimatedBottomBorder
+      });
+
+      const classNames = classnames(theme.tabs, {
+        [theme.fixed]: fixed,
+        [theme.inverse]: inverse
+      }, className);
+
       return (
-        <div ref='tabs' data-react-toolbox='tabs' className={classes}>
+        <div data-react-toolbox='tabs' className={classNames}>
           <div className={theme.navigationContainer}>
-            <div className={classnames(theme.arrowContainer, { [theme.invisible]: !(this.state.arrows.left || this.state.arrows.right) })} onClick={this.scrollNavigationLeft}>
-              <span className={classnames('material-icons', theme.arrow, { [theme.invisible]: !this.state.arrows.left })}>keyboard_arrow_left</span>
-            </div>
-            <nav className={theme.navigation} ref='navigation'>
+            {hasLeftArrow && <div className={theme.arrowContainer} onClick={this.scrollRight}>
+              <FontIcon className={theme.arrow} value="keyboard_arrow_left" />
+            </div>}
+            <nav className={theme.navigation} ref={node => {this.navigationNode = node; }}>
               {this.renderHeaders(headers)}
-              <span className={theme.pointer} style={this.state.pointer} />
+              <span className={classNamePointer} style={this.state.pointer} />
             </nav>
-            <div className={classnames(theme.arrowContainer, { [theme.invisible]: !(this.state.arrows.left || this.state.arrows.right) })} onClick={this.scrollNavigationRight}>
-              <span className={classnames('material-icons', theme.arrow, { [theme.invisible]: !this.state.arrows.right })}>keyboard_arrow_right</span>
-            </div>
+            {hasRightArrow && <div className={theme.arrowContainer} onClick={this.scrollLeft}>
+              <FontIcon className={theme.arrow} value="keyboard_arrow_right" />
+            </div>}
           </div>
           {this.renderContents(contents)}
         </div>
@@ -201,7 +192,7 @@ const factory = (Tab, TabContent) => {
   return Tabs;
 };
 
-const Tabs = factory(InjectTab, InjectTabContent);
+const Tabs = factory(InjectTab, InjectTabContent, InjectFontIcon);
 export default themr(TABS)(Tabs);
 export { factory as tabsFactory };
 export { Tabs };
diff --git a/components/tabs/index.js b/components/tabs/index.js
index 85c995a61..728020542 100644
--- a/components/tabs/index.js
+++ b/components/tabs/index.js
@@ -3,12 +3,13 @@ import { TABS } from '../identifiers.js';
 import { tabsFactory } from './Tabs.js';
 import { TabContent } from './TabContent.js';
 import { Tab } from './Tab.js';
+import FontIcon from '../font_icon/FontIcon.js';
 import theme from './theme.scss';
 
 const applyTheme = (Component) => themr(TABS, theme)(Component);
 const ThemedTabContent = applyTheme(TabContent);
 const ThemedTab = applyTheme(Tab);
-const ThemedTabs = applyTheme(tabsFactory(ThemedTab, ThemedTabContent));
+const ThemedTabs = applyTheme(tabsFactory(ThemedTab, ThemedTabContent, FontIcon));
 
 export { ThemedTab as Tab };
 export { ThemedTabs as Tabs };
diff --git a/components/tabs/theme.scss b/components/tabs/theme.scss
index 4c59913e0..85ae18bec 100644
--- a/components/tabs/theme.scss
+++ b/components/tabs/theme.scss
@@ -27,10 +27,6 @@
 .arrow {
   padding: 0 $tab-label-h-padding;
   color: $tab-text-color;
-
-  &.invisible {
-    visibility: hidden;
-  }
 }
 
 .arrowContainer {
@@ -38,10 +34,6 @@
   align-items: center;
   cursor: pointer;
   box-shadow: inset 0 -1px $tab-navigation-border-color;
-
-  &.invisible {
-    display: none;
-  }
 }
 
 .label {
@@ -55,15 +47,19 @@
   transition-timing-function: $animation-curve-default;
   transition-duration: $animation-duration;
   transition-property: box-shadow, color;
+
   &.active {
     color: $tab-text-color;
   }
+
   &.disabled {
     opacity: $tab-label-disabled-opacity;
   }
+
   &:not(.disabled) {
     cursor: pointer;
   }
+
   &.hidden {
     display: none;
   }
@@ -96,15 +92,21 @@
   transition-timing-function: $animation-curve-default;
   transition-duration: $animation-duration;
   transition-property: left, width;
+
+  &.disableAnimation {
+    transition: none;
+  }
 }
 
 .tab {
   display: flex;
   flex-direction: column;
   padding: $tab-label-v-padding $tab-label-h-padding;
+
   &:not(.active) {
     display: none;
   }
+
   &.active {
     display: flex;
   }
@@ -124,6 +126,7 @@
 
   .label {
     color: $tab-inverse-text-inactive-color;
+
     &.active {
       color: $tab-inverse-text-color;
     }
diff --git a/spec/components/tabs.js b/spec/components/tabs.js
index a956388ab..0ce6018d8 100644
--- a/spec/components/tabs.js
+++ b/spec/components/tabs.js
@@ -29,7 +29,7 @@ class TabsTest extends React.Component {
       <section>
         <h5>Tabs</h5>
         <p>This tabs can be disabled or hidden</p>
-        <Tabs index={this.state.index} onChange={this.handleTabChange}>
+        <Tabs disableAnimatedBottomBorder index={this.state.index} onChange={this.handleTabChange}>
           <Tab label='Primary'><small>Primary content</small></Tab>
           <Tab label='Secondary' onActive={this.handleActive}><small>Secondary content</small></Tab>
           <Tab label='Third' disabled><small>Disabled content</small></Tab>

From 9a1b7d54f3aa7b8436e0ea1e4a62b40de17c0ca5 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 22 Nov 2016 09:47:23 +0100
Subject: [PATCH 0948/1024] Remove unneeded timeouts from Tabs

---
 components/tabs/Tabs.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/components/tabs/Tabs.js b/components/tabs/Tabs.js
index b9f6a7f6e..94782d3da 100644
--- a/components/tabs/Tabs.js
+++ b/components/tabs/Tabs.js
@@ -50,8 +50,6 @@ const factory = (Tab, TabContent, FontIcon) => {
     componentWillUnmount () {
       window.removeEventListener('resize', this.handleResize);
       clearTimeout(this.resizeTimeout);
-      clearTimeout(this.pointerTimeout);
-      clearTimeout(this.arrowsTimeout);
     }
 
     handleHeaderClick = (event) => {

From a1ad40e8415c3b1a0b6fdf49b93cc552a93ce82d Mon Sep 17 00:00:00 2001
From: Alexandre Borela <alexandre@borela.tech>
Date: Tue, 22 Nov 2016 08:12:11 -0200
Subject: [PATCH 0949/1024] Fix Autocomplete mouse selection.

---
 components/autocomplete/Autocomplete.js | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index 3e9060b0c..bc55bf900 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -96,6 +96,17 @@ const factory = (Chip, Input) => {
      }
    };
 
+   handleMouseDown = event => {
+     let target = this.state.active;
+     if (!target) {
+       target = this.props.allowCreate
+         ? this.state.query
+         : [...this.suggestions().keys()][0];
+       this.setState({active: target});
+     }
+     this.select(event, target);
+   }
+
    handleQueryBlur = (event) => {
      if (this.state.focus) this.setState({focus: false});
      if (this.props.onBlur) this.props.onBlur(event, this.state.active);
@@ -277,7 +288,7 @@ const factory = (Chip, Input) => {
            id={key}
            key={key}
            className={className}
-           onMouseDown={this.select}
+           onMouseDown={this.handleMouseDown}
            onMouseOver={this.handleSuggestionHover}
          >
            {value}

From f7a3b6d85b4f543dc6243005d00bd043c5348380 Mon Sep 17 00:00:00 2001
From: Alexandre Borela <alexandre@borela.tech>
Date: Tue, 22 Nov 2016 08:20:43 -0200
Subject: [PATCH 0950/1024] Extract reused logic.

---
 components/autocomplete/Autocomplete.js | 31 +++++++++++--------------
 1 file changed, 14 insertions(+), 17 deletions(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index bc55bf900..4297e22f7 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -97,14 +97,7 @@ const factory = (Chip, Input) => {
    };
 
    handleMouseDown = event => {
-     let target = this.state.active;
-     if (!target) {
-       target = this.props.allowCreate
-         ? this.state.query
-         : [...this.suggestions().keys()][0];
-       this.setState({active: target});
-     }
-     this.select(event, target);
+     this.selectOrCreateActiveItem();
    }
 
    handleQueryBlur = (event) => {
@@ -134,14 +127,7 @@ const factory = (Chip, Input) => {
      }
 
      if (event.which === 13) {
-       let target = this.state.active;
-       if (!target) {
-         target = this.props.allowCreate
-           ? this.state.query
-           : [...this.suggestions().keys()][0];
-         this.setState({active: target});
-       }
-       this.select(event, target);
+       this.selectOrCreateActiveItem();
      }
    };
 
@@ -179,7 +165,18 @@ const factory = (Chip, Input) => {
         query_value = source_value ? source_value : key;
       }
       return query_value;
-    }
+   }
+
+   selectOrCreateActiveItem() {
+     let target = this.state.active;
+     if (!target) {
+       target = this.props.allowCreate
+         ? this.state.query
+         : [...this.suggestions().keys()][0];
+       this.setState({active: target});
+     }
+     this.select(event, target);
+   }
 
    suggestions () {
      let suggest = new Map();

From 4cd756de834a1f6e23bb59b6e7090a9059c40084 Mon Sep 17 00:00:00 2001
From: Alexandre Borela <alexandre@borela.tech>
Date: Tue, 22 Nov 2016 09:56:58 -0200
Subject: [PATCH 0951/1024] Fix code style.

---
 components/autocomplete/Autocomplete.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index 4297e22f7..1409a99b0 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -167,7 +167,7 @@ const factory = (Chip, Input) => {
       return query_value;
    }
 
-   selectOrCreateActiveItem() {
+   selectOrCreateActiveItem () {
      let target = this.state.active;
      if (!target) {
        target = this.props.allowCreate

From 0683e7dc4ba1a1d7b9866a8f8308b614fe103eb7 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 22 Nov 2016 16:38:03 +0100
Subject: [PATCH 0952/1024] Refactor

---
 components/date_picker/CalendarMonth.js    | 23 +++++++++++-----------
 components/date_picker/DatePicker.js       |  6 +++---
 components/date_picker/DatePickerDialog.js |  3 ++-
 3 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/components/date_picker/CalendarMonth.js b/components/date_picker/CalendarMonth.js
index 38df2f2d5..d7f9e1e43 100644
--- a/components/date_picker/CalendarMonth.js
+++ b/components/date_picker/CalendarMonth.js
@@ -25,22 +25,23 @@ class Month extends Component {
     viewDate: PropTypes.object
   };
 
+  static defaultProps = {
+    disabledDates: [],
+    enabledDates: []
+  };
+
   handleDayClick = (day) => {
     if (this.props.onDayClick) this.props.onDayClick(day);
   };
 
   isDayDisabled (date) {
     const {minDate, maxDate, enabledDates, disabledDates} = this.props;
+    const compareDate = compDate => date.getTime() === compDate.getTime();
+    const dateInDisabled = disabledDates.filter(compareDate).length > 0;
+    const dateInEnabled = enabledDates.filter(compareDate).length > 0;
     return time.dateOutOfRange(date, minDate, maxDate)
-        || (enabledDates && enabledDates.length > 0 && !this.findDate(date, enabledDates))
-        || (disabledDates && disabledDates.length > 0 && this.findDate(date, disabledDates));
-  }
-
-  findDate (comparisonDate, dates){
-    for (const date of dates){
-        if (comparisonDate.getTime() === date.getTime()) return true;
-    }
-    return false;
+      || (enabledDates.length > 0 && !dateInEnabled)
+      || dateInDisabled;
   }
 
   renderWeeks () {
@@ -52,13 +53,11 @@ class Month extends Component {
   renderDays () {
     return utils.range(1, time.getDaysInMonth(this.props.viewDate) + 1).map(i => {
       const date = new Date(this.props.viewDate.getFullYear(), this.props.viewDate.getMonth(), i);
-      const disabled = this.isDayDisabled(date);
-
       return (
         <CalendarDay
           key={i}
           day={i}
-          disabled={disabled}
+          disabled={this.isDayDisabled(date)}
           onClick={this.handleDayClick}
           selectedDate={this.props.selectedDate}
           theme={this.props.theme}
diff --git a/components/date_picker/DatePicker.js b/components/date_picker/DatePicker.js
index 4d5163ec7..12b5d3afc 100644
--- a/components/date_picker/DatePicker.js
+++ b/components/date_picker/DatePicker.js
@@ -107,9 +107,9 @@ const factory = (Input, DatePickerDialog) => {
 
     render () {
       const { active, onDismiss,// eslint-disable-line
-        autoOk, cancelLabel, enabledDates, disabledDates, inputClassName, inputFormat, locale, maxDate, minDate,
-        okLabel, onEscKeyDown, onOverlayClick, readonly, sundayFirstDayOfWeek, value,
-        ...others } = this.props;
+        autoOk, cancelLabel, enabledDates, disabledDates, inputClassName, inputFormat,
+        locale, maxDate, minDate, okLabel, onEscKeyDown, onOverlayClick, readonly,
+        sundayFirstDayOfWeek, value, ...others } = this.props;
       const finalInputFormat = inputFormat || time.formatDate;
       const date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined;
       const formattedDate = date === undefined ? '' : finalInputFormat(value, locale);
diff --git a/components/date_picker/DatePickerDialog.js b/components/date_picker/DatePickerDialog.js
index 278f59c39..21447056a 100644
--- a/components/date_picker/DatePickerDialog.js
+++ b/components/date_picker/DatePickerDialog.js
@@ -131,7 +131,8 @@ const factory = (Dialog, Calendar) => {
               selectedDate={this.state.date}
               theme={this.props.theme}
               locale={this.props.locale}
-              sundayFirstDayOfWeek={this.props.sundayFirstDayOfWeek}/>
+              sundayFirstDayOfWeek={this.props.sundayFirstDayOfWeek}
+            />
           </div>
         </Dialog>
       );

From fb52c00a147165ddb51caf9e9902a8861e9ffc7b Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 22 Nov 2016 16:44:47 +0100
Subject: [PATCH 0953/1024] Fix #953

---
 components/button/Button.js     | 6 ++++--
 components/button/IconButton.js | 6 ++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/components/button/Button.js b/components/button/Button.js
index 2b3048d69..3ffc90aae 100644
--- a/components/button/Button.js
+++ b/components/button/Button.js
@@ -52,7 +52,8 @@ const factory = (ripple, FontIcon) => {
       mini: false,
       neutral: true,
       primary: false,
-      raised: false
+      raised: false,
+      type: 'button'
     };
 
     handleMouseUp = (event) => {
@@ -67,7 +68,7 @@ const factory = (ripple, FontIcon) => {
 
     render () {
       const { accent, children, className, flat, floating, href, icon,
-        inverse, label, mini, neutral, primary, theme, raised, ...others} = this.props;
+        inverse, label, mini, neutral, primary, theme, type, raised, ...others} = this.props;
       const element = href ? 'a' : 'button';
       const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
       const shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : 'flat';
@@ -86,6 +87,7 @@ const factory = (ripple, FontIcon) => {
         disabled: this.props.disabled,
         onMouseUp: this.handleMouseUp,
         onMouseLeave: this.handleMouseLeave,
+        type: !href ? type : null,
         'data-react-toolbox': 'button'
       };
 
diff --git a/components/button/IconButton.js b/components/button/IconButton.js
index e2d8b4953..d0cec6eb1 100644
--- a/components/button/IconButton.js
+++ b/components/button/IconButton.js
@@ -30,7 +30,8 @@ const factory = (ripple, FontIcon) => {
       accent: false,
       className: '',
       neutral: true,
-      primary: false
+      primary: false,
+      type: 'button'
     };
 
     handleMouseUp = (event) => {
@@ -45,7 +46,7 @@ const factory = (ripple, FontIcon) => {
 
     render () {
       const {accent, children, className, href, icon, inverse, neutral,
-        primary, theme, ...others} = this.props;
+        primary, theme, type, ...others} = this.props;
       const element = href ? 'a' : 'button';
       const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
       const classes = classnames([theme.toggle], {
@@ -61,6 +62,7 @@ const factory = (ripple, FontIcon) => {
         disabled: this.props.disabled,
         onMouseUp: this.handleMouseUp,
         onMouseLeave: this.handleMouseLeave,
+        type: !href ? type : null,
         'data-react-toolbox': 'button'
       };
 

From 091a1fa38a0c4c684ec4f371b62a572f304a4f08 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 23 Nov 2016 09:59:51 +0100
Subject: [PATCH 0954/1024] Fix #409

---
 components/checkbox/Checkbox.js |  7 ++++---
 components/menu/IconMenu.js     | 29 ++++++++++++++++-------------
 components/radio/RadioButton.js | 13 +++++++++----
 3 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/components/checkbox/Checkbox.js b/components/checkbox/Checkbox.js
index 69199d024..5a1877854 100644
--- a/components/checkbox/Checkbox.js
+++ b/components/checkbox/Checkbox.js
@@ -9,6 +9,7 @@ const factory = (Check) => {
   class Checkbox extends Component {
     static propTypes = {
       checked: PropTypes.bool,
+      children: PropTypes.node,
       className: PropTypes.string,
       disabled: PropTypes.bool,
       label: PropTypes.oneOfType([
@@ -48,15 +49,14 @@ const factory = (Check) => {
     }
 
     render () {
-      const { checked, disabled, label, style, theme, ...others } = this.props;
+      const { checked, children, disabled, label, style, theme, ...others } = this.props;
       const className = classnames(theme.field, {
         [theme.disabled]: this.props.disabled
       }, this.props.className);
 
       return (
-        <label data-react-toolbox='checkbox' className={className}>
+        <label {...others} data-react-toolbox='checkbox' className={className}>
           <input
-            {...others}
             checked={checked}
             className={theme.input}
             disabled={disabled}
@@ -73,6 +73,7 @@ const factory = (Check) => {
             theme={theme}
           />
           {label ? <span data-react-toolbox='label' className={theme.text}>{label}</span> : null}
+          {children}
         </label>
       );
     }
diff --git a/components/menu/IconMenu.js b/components/menu/IconMenu.js
index 4427412b8..190b3cba9 100644
--- a/components/menu/IconMenu.js
+++ b/components/menu/IconMenu.js
@@ -53,27 +53,30 @@ const factory = (IconButton, Menu) => {
     }
 
     render () {
+      const {
+        children, className, icon, iconRipple, menuRipple, onHide, // eslint-disable-line
+        onSelect, onShow, position, selectable, selected, theme, ...other
+      } = this.props;
       return (
-        <div className={classnames(this.props.theme.iconMenu, this.props.className)}>
+        <div {...other} className={classnames(theme.iconMenu, className)}>
           <IconButton
-            className={this.props.theme.icon}
-            icon={this.props.icon}
+            className={theme.icon}
+            icon={icon}
             onClick={this.handleButtonClick}
-            ripple={this.props.iconRipple}
+            ripple={iconRipple}
           />
           <Menu
-            ref='menu'
             active={this.state.active}
             onHide={this.handleMenuHide}
-            onSelect={this.props.onSelect}
-            onShow={this.props.onShow}
-            position={this.props.position}
-            ripple={this.props.menuRipple}
-            selectable={this.props.selectable}
-            selected={this.props.selected}
-            theme={this.props.theme}
+            onSelect={onSelect}
+            onShow={onShow}
+            position={position}
+            ripple={menuRipple}
+            selectable={selectable}
+            selected={selected}
+            theme={theme}
           >
-            {this.props.children}
+            {children}
           </Menu>
         </div>
       );
diff --git a/components/radio/RadioButton.js b/components/radio/RadioButton.js
index 1628aa81e..2cd719dfa 100644
--- a/components/radio/RadioButton.js
+++ b/components/radio/RadioButton.js
@@ -9,6 +9,7 @@ const factory = (Radio) => {
   class RadioButton extends Component {
     static propTypes = {
       checked: PropTypes.bool,
+      children: PropTypes.node,
       className: PropTypes.string,
       disabled: PropTypes.bool,
       label: PropTypes.oneOfType([
@@ -49,12 +50,15 @@ const factory = (Radio) => {
     }
 
     render () {
-      const { className, checked, disabled, label, theme, onChange, ...others } = this.props;  // eslint-disable-line
+      const { checked, children, className, disabled, label, onChange, theme, ...others } = this.props; // eslint-disable-line
       const _className = classnames(theme[this.props.disabled ? 'disabled' : 'field'], className);
       return (
-        <label data-react-toolbox='radio-button' className={_className}>
+        <label
+          {...others}
+          data-react-toolbox='radio-button'
+          className={_className}
+        >
           <input
-            {...others}
             checked={checked}
             className={theme.input}
             disabled={disabled}
@@ -63,8 +67,9 @@ const factory = (Radio) => {
             ref={node => { this.inputNode = node; }}
             type='radio'
           />
-        <Radio checked={checked} disabled={disabled} theme={theme} />
+          <Radio checked={checked} disabled={disabled} theme={theme} />
           {label ? <span className={theme.text}>{label}</span> : null}
+          {children}
         </label>
       );
     }

From 8052a7794fbbc199f3872022b0b15efc9b8d3311 Mon Sep 17 00:00:00 2001
From: James Browne <james@dynamic.do>
Date: Wed, 23 Nov 2016 17:39:04 +0000
Subject: [PATCH 0955/1024] Adds a hook to get the autocomplete query value.

---
 components/autocomplete/Autocomplete.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index 22502c3c3..d6caa0c10 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -25,6 +25,7 @@ const factory = (Chip, Input) => {
      multiple: PropTypes.bool,
      onBlur: PropTypes.func,
      onChange: PropTypes.func,
+     onQueryChange: PropTypes.func,
      onFocus: PropTypes.func,
      selectedPosition: PropTypes.oneOf(['above', 'below']),
      showSuggestionsWhenValueIsSet: PropTypes.bool,
@@ -97,6 +98,7 @@ const factory = (Chip, Input) => {
    };
 
    handleQueryChange = (value) => {
+     if (this.props.onQueryChange) this.props.onQueryChange(value);
      this.setState({query: value, showAllSuggestions: false});
    };
 

From 350463c6504f8eb2a4ee46f69a7513c2cc7f446c Mon Sep 17 00:00:00 2001
From: James Browne <james@dynamic.do>
Date: Wed, 23 Nov 2016 18:12:48 +0000
Subject: [PATCH 0956/1024] Adds missing file

---
 lib/autocomplete/Autocomplete.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/lib/autocomplete/Autocomplete.js b/lib/autocomplete/Autocomplete.js
index 1a790e9f3..f4666a8fd 100644
--- a/lib/autocomplete/Autocomplete.js
+++ b/lib/autocomplete/Autocomplete.js
@@ -90,6 +90,7 @@ var factory = function factory(Chip, Input) {
         if (_this.state.focus) _this.setState({ focus: false });
         if (_this.props.onBlur) _this.props.onBlur(event, _this.state.active);
       }, _this.handleQueryChange = function (value) {
+        if (_this.props.onQueryChange) _this.props.onQueryChange(value);
         _this.setState({ query: value, showAllSuggestions: false });
       }, _this.handleQueryFocus = function () {
         _this.refs.suggestions.scrollTop = 0;
@@ -439,6 +440,7 @@ var factory = function factory(Chip, Input) {
     multiple: _react.PropTypes.bool,
     onBlur: _react.PropTypes.func,
     onChange: _react.PropTypes.func,
+    onQueryChange: _react.PropTypes.func,
     onFocus: _react.PropTypes.func,
     selectedPosition: _react.PropTypes.oneOf(['above', 'below']),
     showSuggestionsWhenValueIsSet: _react.PropTypes.bool,

From 941e41d6d0dace33a99877a6ebd56a10d9fc0b72 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 24 Nov 2016 08:58:25 +0100
Subject: [PATCH 0957/1024] Fix #939

---
 components/tabs/index.d.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/tabs/index.d.ts b/components/tabs/index.d.ts
index d4d737b7c..1dbdeda09 100644
--- a/components/tabs/index.d.ts
+++ b/components/tabs/index.d.ts
@@ -41,7 +41,7 @@ interface TabsProps extends ReactToolbox.Props {
   index?: number;
   /**
    * `unmounted` mode will not mount the tab content of inactive tabs.
-   * `display` mode will mount but hide inactive tabs. 
+   * `display` mode will mount but hide inactive tabs.
    * Consider holding state outside of the Tabs component before using `display` mode
    * @default unmounted
    */
@@ -50,6 +50,10 @@ interface TabsProps extends ReactToolbox.Props {
    * If True, the tabs will have an inverse style.
    */
   inverse?: boolean;
+  /**
+   * If True, the tabs will be fixed, covering the whole width.
+   */
+  fixed?: boolean;
   /**
    * Callback function that is fired when the tab changes.
    */

From fb263f40721b7005400f3d3245d364bcd43f2cb2 Mon Sep 17 00:00:00 2001
From: James Browne <james@dynamic.do>
Date: Thu, 24 Nov 2016 11:09:39 +0000
Subject: [PATCH 0958/1024] Adds type definitions. Makes it possible to hide
 the Chips.

---
 components/autocomplete/Autocomplete.js | 2 +-
 components/autocomplete/index.d.ts      | 7 ++++++-
 lib/autocomplete/Autocomplete.js        | 2 +-
 lib/autocomplete/index.d.ts             | 7 ++++++-
 4 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index d6caa0c10..a38953399 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -27,7 +27,7 @@ const factory = (Chip, Input) => {
      onChange: PropTypes.func,
      onQueryChange: PropTypes.func,
      onFocus: PropTypes.func,
-     selectedPosition: PropTypes.oneOf(['above', 'below']),
+     selectedPosition: PropTypes.oneOf(['above', 'below', 'none']),
      showSuggestionsWhenValueIsSet: PropTypes.bool,
      source: PropTypes.any,
      suggestionMatch: PropTypes.oneOf(['start', 'anywhere', 'word']),
diff --git a/components/autocomplete/index.d.ts b/components/autocomplete/index.d.ts
index b2c560d0f..5a8185187 100644
--- a/components/autocomplete/index.d.ts
+++ b/components/autocomplete/index.d.ts
@@ -72,11 +72,16 @@ interface AutocompleteProps extends ReactToolbox.Props {
    * @default auto
    */
   onChange?: Function;
+  /**
+   * Callback function that is fired when the components's query value changes.
+   * @default auto
+   */
+  onQueryChange?: Function;
   /**
    * Determines if the selected list is shown above or below input. It can be above or below.
    * @default above
    */
-  selectedPosition?: "above" | "below";
+  selectedPosition?: "above" | "below" | "none";
   /**
    * If true, the list of suggestions will not be filtered when a value is selected.
    * @default false
diff --git a/lib/autocomplete/Autocomplete.js b/lib/autocomplete/Autocomplete.js
index f4666a8fd..15e90571b 100644
--- a/lib/autocomplete/Autocomplete.js
+++ b/lib/autocomplete/Autocomplete.js
@@ -442,7 +442,7 @@ var factory = function factory(Chip, Input) {
     onChange: _react.PropTypes.func,
     onQueryChange: _react.PropTypes.func,
     onFocus: _react.PropTypes.func,
-    selectedPosition: _react.PropTypes.oneOf(['above', 'below']),
+    selectedPosition: _react.PropTypes.oneOf(['above', 'below', 'none']),
     showSuggestionsWhenValueIsSet: _react.PropTypes.bool,
     source: _react.PropTypes.any,
     suggestionMatch: _react.PropTypes.oneOf(['start', 'anywhere', 'word']),
diff --git a/lib/autocomplete/index.d.ts b/lib/autocomplete/index.d.ts
index b2c560d0f..5a8185187 100644
--- a/lib/autocomplete/index.d.ts
+++ b/lib/autocomplete/index.d.ts
@@ -72,11 +72,16 @@ interface AutocompleteProps extends ReactToolbox.Props {
    * @default auto
    */
   onChange?: Function;
+  /**
+   * Callback function that is fired when the components's query value changes.
+   * @default auto
+   */
+  onQueryChange?: Function;
   /**
    * Determines if the selected list is shown above or below input. It can be above or below.
    * @default above
    */
-  selectedPosition?: "above" | "below";
+  selectedPosition?: "above" | "below" | "none";
   /**
    * If true, the list of suggestions will not be filtered when a value is selected.
    * @default false

From 5c79ef0be66e50cbc3de962671150a8847ae6392 Mon Sep 17 00:00:00 2001
From: Alexandre Borela <alexandre@borela.tech>
Date: Thu, 24 Nov 2016 12:30:36 -0200
Subject: [PATCH 0959/1024] Pass event to selection.

---
 components/autocomplete/Autocomplete.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index 1409a99b0..b7bc56f29 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -96,8 +96,8 @@ const factory = (Chip, Input) => {
      }
    };
 
-   handleMouseDown = event => {
-     this.selectOrCreateActiveItem();
+   handleMouseDown = (event) => {
+     this.selectOrCreateActiveItem(event);
    }
 
    handleQueryBlur = (event) => {
@@ -127,7 +127,7 @@ const factory = (Chip, Input) => {
      }
 
      if (event.which === 13) {
-       this.selectOrCreateActiveItem();
+       this.selectOrCreateActiveItem(event);
      }
    };
 
@@ -167,7 +167,7 @@ const factory = (Chip, Input) => {
       return query_value;
    }
 
-   selectOrCreateActiveItem () {
+   selectOrCreateActiveItem (event) {
      let target = this.state.active;
      if (!target) {
        target = this.props.allowCreate

From 77a1db6d5f5d63a0efe54cb96911be15b9284bce Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 24 Nov 2016 20:00:05 +0100
Subject: [PATCH 0960/1024] Extend extensions

---
 README.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/README.md b/README.md
index b35fd113f..98a2befeb 100644
--- a/README.md
+++ b/README.md
@@ -217,8 +217,7 @@ Local documentation will then be available at `http://localhost:8081/`.
 
 ## Extensions
 
-The additional components which are not covered by [Google Material Design](https://www.google.com/design/spec/material-design/introduction.html) but often used such as Pager, FilePicker,... are available in:
-    [on github: react-toolbox-additions](https://github.com/MaximKomlev/react-toolbox-additions), [on npm: react-toolbox-additions](https://www.npmjs.com/package/react-toolbox-additions)
+We don't officially support components that are not covered by [Google Material Design](https://www.google.com/design/spec/material-design/introduction.html). If you want to implement some complementary component feel free to open a PR adding your a link in this section. For now you can check [on github: react-toolbox-additions](https://github.com/MaximKomlev/react-toolbox-additions) and [on npm: react-toolbox-additions](https://www.npmjs.com/package/react-toolbox-additions).
 
 ## License
 

From 9d732f4b19dee80fae571bdf0e6bea259291c0c5 Mon Sep 17 00:00:00 2001
From: James Browne <james@dynamic.do>
Date: Fri, 25 Nov 2016 10:59:10 +0000
Subject: [PATCH 0961/1024] Removes onQueryChange from props that are passed
 down to the Input element in Autocomplete

---
 components/autocomplete/Autocomplete.js | 2 +-
 lib/autocomplete/Autocomplete.js        | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index a38953399..8ed3b68db 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -289,7 +289,7 @@ const factory = (Chip, Input) => {
    render () {
      const {
       allowCreate, error, label, source, suggestionMatch, //eslint-disable-line no-unused-vars
-      selectedPosition, showSuggestionsWhenValueIsSet,    //eslint-disable-line no-unused-vars
+      selectedPosition, showSuggestionsWhenValueIsSet, onQueryChange,    //eslint-disable-line no-unused-vars
       theme, ...other
     } = this.props;
      const className = classnames(theme.autocomplete, {
diff --git a/lib/autocomplete/Autocomplete.js b/lib/autocomplete/Autocomplete.js
index 15e90571b..4cbbb0dfb 100644
--- a/lib/autocomplete/Autocomplete.js
+++ b/lib/autocomplete/Autocomplete.js
@@ -400,8 +400,9 @@ var factory = function factory(Chip, Input) {
             suggestionMatch = _props.suggestionMatch,
             selectedPosition = _props.selectedPosition,
             showSuggestionsWhenValueIsSet = _props.showSuggestionsWhenValueIsSet,
+            onQueryChange = _props.onQueryChange,
             theme = _props.theme,
-            other = _objectWithoutProperties(_props, ['allowCreate', 'error', 'label', 'source', 'suggestionMatch', 'selectedPosition', 'showSuggestionsWhenValueIsSet', 'theme']);
+            other = _objectWithoutProperties(_props, ['allowCreate', 'error', 'label', 'source', 'suggestionMatch', 'selectedPosition', 'showSuggestionsWhenValueIsSet', 'onQueryChange', 'theme']);
 
         var className = (0, _classnames5.default)(theme.autocomplete, _defineProperty({}, theme.focus, this.state.focus), this.props.className);
 

From 6eda1f90c0c4a200afe3a86472365a31cba55ea2 Mon Sep 17 00:00:00 2001
From: mhasbini <mohammad.hasbini@gmail.com>
Date: Fri, 25 Nov 2016 14:55:35 +0200
Subject: [PATCH 0962/1024] add required attribute to DropdownProps interface

---
 components/dropdown/index.d.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/components/dropdown/index.d.ts b/components/dropdown/index.d.ts
index 2c0f207ed..ebf3b10e3 100644
--- a/components/dropdown/index.d.ts
+++ b/components/dropdown/index.d.ts
@@ -108,6 +108,10 @@ interface DropdownProps extends ReactToolbox.Props {
    * Default value using JSON data.
    */
   value?: string | number;
+  /**
+   * If true, the dropdown has a required attribute.
+   */
+  required?: boolean;
 }
 
 export class Dropdown extends React.Component<DropdownProps, {}> { }

From 3c468d1f1ee8ee818dea58c7653a8661f5834662 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Fri, 25 Nov 2016 19:51:38 +0100
Subject: [PATCH 0963/1024] Add tooltipShowOnClick to README

---
 components/tooltip/readme.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/tooltip/readme.md b/components/tooltip/readme.md
index 54f7fefcd..98c4e3a36 100644
--- a/components/tooltip/readme.md
+++ b/components/tooltip/readme.md
@@ -38,6 +38,7 @@ In any component you decorate with the Tooltip you'd get some additional props:
 | `tooltipDelay`        | `Number`      |               | Amount of time in miliseconds spent before the tooltip is visible.|
 | `tooltipHideOnClick`  | `Boolean`     | `true`        | If true, the Tooltip hides after a click in the host component.|
 | `tooltipPosition`     | `String`      | `vertical`    | Determines the position of the tooltip. It can be automatic with `vertical` and `horizontal` values or forced with `bottom`, `top`, `left` or `right`.|
+| `tooltipShowOnClick`  | `Boolean`     | `false`       | Determines the tooltip should be toggled when clicked. This is useful for mobile where there is no mouse enter.|
 
 ## Theming
 

From 8b4c9bce521fa4f5228edd3e5e5cf30258e29134 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Fri, 25 Nov 2016 21:27:06 +0100
Subject: [PATCH 0964/1024] Release 1.3.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 6c6af0897..542f7894e 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "react-toolbox",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "homepage": "http://www.react-toolbox.com/",
-  "version": "1.2.5",
+  "version": "1.3.0",
   "main": "./lib",
   "author": {
     "name": "React Toolbox Team",

From 049b3f66124435bda049e2f30f573f513fb7590a Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 27 Nov 2016 12:34:34 +0100
Subject: [PATCH 0965/1024] Fixes #999

---
 components/checkbox/Checkbox.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/checkbox/Checkbox.js b/components/checkbox/Checkbox.js
index 5a1877854..60539be08 100644
--- a/components/checkbox/Checkbox.js
+++ b/components/checkbox/Checkbox.js
@@ -49,7 +49,7 @@ const factory = (Check) => {
     }
 
     render () {
-      const { checked, children, disabled, label, style, theme, ...others } = this.props;
+      const { checked, children, disabled, label, style, onChange, theme, ...others } = this.props; // eslint-disable-line
       const className = classnames(theme.field, {
         [theme.disabled]: this.props.disabled
       }, this.props.className);

From 8734eceb37e3b50e0ab1a715fd779a83aaa859a5 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 27 Nov 2016 12:51:20 +0100
Subject: [PATCH 0966/1024] Fixes #964

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index 88e583839..cffe52929 100644
--- a/README.md
+++ b/README.md
@@ -177,6 +177,8 @@ render(
 
 A couple of things here. First you need to use raw components to get this styles properly applied. Second, you have to add dependency themes by yourself. For example, the `Button` requires `Ripple` so you have to provide styles for both of them.
 
+Also, recall that all components accepts a theme verifying required classNames but there may be some missing. If any property is missing you can check the selectors you want to override straight in the DevTools.
+
 ## Roboto Font and Material Design Icons
 
 React Toolbox assumes that you are importing [Roboto Font](https://fonts.google.com/specimen/Roboto) and [Material Design Icons](https://material.io/icons/).

From 4c154e86ceb0d5f29057e43cc594f763aebccb67 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 27 Nov 2016 13:20:46 +0100
Subject: [PATCH 0967/1024] Fixes #236

---
 components/button/_config.scss   | 2 ++
 components/button/theme.scss     | 5 +++++
 components/date_picker/readme.md | 1 +
 3 files changed, 8 insertions(+)

diff --git a/components/button/_config.scss b/components/button/_config.scss
index 4a37d8b0c..98aa2c246 100644
--- a/components/button/_config.scss
+++ b/components/button/_config.scss
@@ -9,6 +9,8 @@ $button-accent-color-hover: rgba($color-accent, .2) !default;
 $button-accent-color: $color-accent !default;
 $button-disabled-text-color: rgba($color-black, 0.26) !default;
 $button-disabled-background-color: rgba($color-black, 0.12) !default;
+$button-disabled-text-color-inverse: rgba($color-white, 0.54) !default;
+$button-disabled-background-inverse: rgba($color-white, 0.08) !default;
 $button-border-radius: 0.2 * $unit !default;
 $button-floating-font-size: $unit * 2.4 !default;
 $button-floating-height: $unit * 5.6 !default;
diff --git a/components/button/theme.scss b/components/button/theme.scss
index adf91cd0f..9c450ef83 100644
--- a/components/button/theme.scss
+++ b/components/button/theme.scss
@@ -178,5 +178,10 @@
   }
 }
 
+.neutral.inverse[disabled] {
+  color: $button-disabled-text-color-inverse;
+  background-color: $button-disabled-background-inverse;
+}
+
 @include btn-colors("primary", $button-primary-color-contrast, $button-primary-color, $button-primary-color-hover);
 @include btn-colors("accent", $button-accent-color-contrast, $button-accent-color, $button-accent-color-hover);
diff --git a/components/date_picker/readme.md b/components/date_picker/readme.md
index 83df3596a..8410f60de 100644
--- a/components/date_picker/readme.md
+++ b/components/date_picker/readme.md
@@ -79,6 +79,7 @@ If you want to provide a theme via context, the component key is `RTDatePicker`.
 | `disabled` | Added to day element when day is disabled.|
 | `header` | Used for the dialog header,.|
 | `input` | Used for Input element that opens the picker.|
+| `label` | Used for the label element.|
 | `month` | Used for the month root element.|
 | `monthsDisplay` | Added to the root dialog when months are displayed.|
 | `next` | Used for the next month icon.|

From 2f5e0f5f358db8119913204814596711fd62cefd Mon Sep 17 00:00:00 2001
From: makieno <makien.osman@q2web.de>
Date: Wed, 30 Nov 2016 11:05:55 +0100
Subject: [PATCH 0968/1024] Dropdown auto fix

Dropdown's property `auto` isn't working (anymore), and always opens down even if the Dropdown is positioned in the lower half of the screen.
---
 components/dropdown/Dropdown.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/dropdown/Dropdown.js b/components/dropdown/Dropdown.js
index 158ec4614..bad93e45a 100644
--- a/components/dropdown/Dropdown.js
+++ b/components/dropdown/Dropdown.js
@@ -80,7 +80,7 @@ const factory = (Input) => {
       touchend: this.handleDocumentClick
     });
 
-    open = () => {
+    open = (event) => {
       const client = event.target.getBoundingClientRect();
       const screenHeight = window.innerHeight || document.documentElement.offsetHeight;
       const up = this.props.auto ? client.top > ((screenHeight / 2) + client.height) : false;
@@ -101,7 +101,7 @@ const factory = (Input) => {
     };
 
     handleClick = (event) => {
-      this.open();
+      this.open(event);
       events.pauseEvent(event);
       if (this.props.onClick) this.props.onClick(event);
     };
@@ -162,7 +162,7 @@ const factory = (Input) => {
 
     handleFocus = event => {
       event.stopPropagation();
-      if (!this.props.disabled) this.open();
+      if (!this.props.disabled) this.open(event);
       if (this.props.onFocus) this.props.onFocus(event);
     };
 

From e3011160664fadb72d22d8c97b62a7762e2f2e01 Mon Sep 17 00:00:00 2001
From: Craig Cartmell <craigcartmell1@gmail.com>
Date: Wed, 30 Nov 2016 13:43:15 +0000
Subject: [PATCH 0969/1024] Added logic to show selected chips even if they
 don't exist in source (showSelectedWhenNotInSource). Object is now accepted
 in value prop and should match source. WIP.

---
 .eslintrc                               |   2 +-
 components/autocomplete/Autocomplete.js | 211 ++++++++++++++++++------
 lib/autocomplete/Autocomplete.js        |   8 +-
 spec/components/autocomplete.js         |  44 ++++-
 4 files changed, 207 insertions(+), 58 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 50fa67e3a..136e551f9 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -162,6 +162,7 @@
       "location": "start"
     }],
     "no-with": [2],
+    "object-shorthand": [2],
     "one-var": [0],
     "operator-assignment": [0, "always"],
     "operator-linebreak": [2, "before"],
@@ -200,7 +201,6 @@
     "yoda": [2, "never", {
       "exceptRange": true
     }],
-    "babel/object-shorthand": [2],
     "react/display-name": 0,
     "react/jsx-boolean-value": 1,
     "react/jsx-closing-bracket-location": 0,
diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index 8ed3b68db..67439bd60 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -21,6 +21,7 @@ const factory = (Chip, Input) => {
      direction: PropTypes.oneOf(['auto', 'up', 'down']),
      disabled: PropTypes.bool,
      error: PropTypes.string,
+     keepFocusOnChange: PropTypes.bool,
      label: PropTypes.string,
      multiple: PropTypes.bool,
      onBlur: PropTypes.func,
@@ -28,6 +29,7 @@ const factory = (Chip, Input) => {
      onQueryChange: PropTypes.func,
      onFocus: PropTypes.func,
      selectedPosition: PropTypes.oneOf(['above', 'below', 'none']),
+     showSelectedWhenNotInSource: PropTypes.bool,
      showSuggestionsWhenValueIsSet: PropTypes.bool,
      source: PropTypes.any,
      suggestionMatch: PropTypes.oneOf(['start', 'anywhere', 'word']),
@@ -36,7 +38,6 @@ const factory = (Chip, Input) => {
        autocomplete: PropTypes.string,
        focus: PropTypes.string,
        input: PropTypes.string,
-       label: PropTypes.string,
        suggestion: PropTypes.string,
        suggestions: PropTypes.string,
        up: PropTypes.string,
@@ -50,9 +51,11 @@ const factory = (Chip, Input) => {
      allowCreate: false,
      className: '',
      direction: 'auto',
-     selectedPosition: 'above',
+     keepFocusOnChange: false,
      multiple: true,
+     selectedPosition: 'above',
      showSuggestionsWhenValueIsSet: false,
+     showSelectedWhenNotInSource: false,
      source: {},
      suggestionMatch: 'start'
    };
@@ -61,15 +64,31 @@ const factory = (Chip, Input) => {
      direction: this.props.direction,
      focus: false,
      showAllSuggestions: this.props.showSuggestionsWhenValueIsSet,
-     query: this.query(this.props.value)
+     query: this.query(this.props.value),
+     valueIsObject: false
    };
 
+   componentDidMount () {
+     this.setState({
+       // TODO: Move to method
+       valueIsObject: !Array.isArray(this.props.value) && typeof this.props.value === 'object'
+     });
+   }
+
    componentWillReceiveProps (nextProps) {
      if (!this.props.multiple) {
        this.setState({
          query: this.query(nextProps.value)
        });
      }
+     // TODO: Better comparison?
+     if (nextProps.multiple && this.props.value !== nextProps.value) {
+       console.log('value has changed fo real', nextProps.value);
+       this.setState({
+         // TODO: Move to method
+         valueIsObject: !Array.isArray(nextProps.value) && typeof nextProps.value === 'object'
+       });
+     }
    }
 
    shouldComponentUpdate (nextProps, nextState) {
@@ -82,14 +101,25 @@ const factory = (Chip, Input) => {
      return true;
    }
 
-   handleChange = (keys, event) => {
-     const key = this.props.multiple ? keys : keys[0];
-     const query = this.query(key);
-     if (this.props.onChange) this.props.onChange(key, event);
-     this.setState(
-       {focus: false, query, showAllSuggestions: this.props.showSuggestionsWhenValueIsSet},
-       () => { ReactDOM.findDOMNode(this).querySelector('input').blur(); }
-     );
+   handleChange = (values, event) => {
+     console.log('handle change', values);
+     const value = this.props.multiple ? values : values[0];
+     console.log('new keys here in handle change', value);
+     const { showSuggestionsWhenValueIsSet: showAllSuggestions } = this.props;
+     const query = this.query(value);
+     // TODO: Pass back key/value if object originally supplied for value
+     if (this.props.onChange) this.props.onChange(value, event);
+     if (this.props.keepFocusOnChange) {
+       this.setState({ query, showAllSuggestions });
+     } else {
+       this.setState({ focus: false, query, showAllSuggestions }, () => {
+         ReactDOM.findDOMNode(this).querySelector('input').blur();
+       });
+     }
+   };
+
+   handleMouseDown = () => {
+     this.selectOrCreateActiveItem();
    };
 
    handleQueryBlur = (event) => {
@@ -99,11 +129,11 @@ const factory = (Chip, Input) => {
 
    handleQueryChange = (value) => {
      if (this.props.onQueryChange) this.props.onQueryChange(value);
-     this.setState({query: value, showAllSuggestions: false});
+     this.setState({query: value, showAllSuggestions: false, active: null});
    };
 
    handleQueryFocus = () => {
-     this.refs.suggestions.scrollTop = 0;
+     this.suggestionsNode.scrollTop = 0;
      this.setState({active: '', focus: true});
      if (this.props.onFocus) this.props.onFocus();
    };
@@ -120,14 +150,7 @@ const factory = (Chip, Input) => {
      }
 
      if (event.which === 13) {
-       let target = this.state.active;
-       if (!target) {
-         target = this.props.allowCreate
-           ? this.state.query
-           : [...this.suggestions().keys()][0];
-         this.setState({active: target});
-       }
-       this.select(event, target);
+       this.selectOrCreateActiveItem();
      }
    };
 
@@ -149,7 +172,7 @@ const factory = (Chip, Input) => {
 
    calculateDirection () {
      if (this.props.direction === 'auto') {
-       const client = ReactDOM.findDOMNode(this.refs.input).getBoundingClientRect();
+       const client = ReactDOM.findDOMNode(this.inputNode).getBoundingClientRect();
        const screen_height = window.innerHeight || document.documentElement.offsetHeight;
        const up = client.top > ((screen_height / 2) + client.height);
        return up ? 'up' : 'down';
@@ -165,7 +188,18 @@ const factory = (Chip, Input) => {
         query_value = source_value ? source_value : key;
       }
       return query_value;
-    }
+   }
+
+   selectOrCreateActiveItem () {
+     let target = this.state.active;
+     if (!target) {
+       target = this.props.allowCreate
+         ? this.state.query
+         : [...this.suggestions().keys()][0];
+       this.setState({active: target});
+     }
+     this.select(event, target);
+   }
 
    suggestions () {
      let suggest = new Map();
@@ -174,15 +208,17 @@ const factory = (Chip, Input) => {
      const values = this.values();
      const source = this.source();
 
+     console.log('in suggestions', values);
      // Suggest any non-set value which matches the query
      if (this.props.multiple) {
        for (const [key, value] of source) {
-         if (!values.has(key) && this.matches(value.toLowerCase().trim(), query)) {
+         //if ((Array.isArray(values) && !values.has(key)) && this.matches(value.toLowerCase().trim(), query)) {
+         if ((!values.has(key)) && this.matches(value.toLowerCase().trim(), query)) {
            suggest.set(key, value);
          }
        }
 
-     // When multiple is false, suggest any value which matches the query if showAllSuggestions is false
+     // When multipleArray is false, suggest any value which matches the query if showAllSuggestions is false
      } else if (query && !this.state.showAllSuggestions) {
        for (const [key, value] of source) {
          if (this.matches(value.toLowerCase().trim(), query)) {
@@ -190,7 +226,7 @@ const factory = (Chip, Input) => {
          }
        }
 
-     // When multiple is false, suggest all values when showAllSuggestions is true
+     // When multipleArray is false, suggest all values when showAllSuggestions is true
      } else {
        suggest = source;
      }
@@ -223,43 +259,117 @@ const factory = (Chip, Input) => {
    }
 
    values () {
-     const valueMap = new Map();
      const vals = this.props.multiple ? this.props.value : [this.props.value];
+
+     if (this.props.showSelectedWhenNotInSource && typeof vals === 'object') {
+       return new Map(Object.entries(vals));
+     }
+
+     const valueMap = new Map();
      for (const [k, v] of this.source()) {
-       if (vals.indexOf(k) !== -1) valueMap.set(k, v);
+       if ((Array.isArray(vals) && vals.indexOf(k) !== -1) || (k in vals)) {
+         valueMap.set(k, v);
+       }
      }
      return valueMap;
    }
 
    select = (event, target) => {
      events.pauseEvent(event);
-     const values = this.values(this.props.value);
+     let values = this.values(this.props.value);
+     const source = this.source();
      const newValue = target === void 0 ? event.target.id : target;
+     console.log('selected', target, event.target);
+     if (this.state.valueIsObject) {
+       console.log('current values', values);
+       console.log('new value', newValue);
+
+       const sourceObj = Array.from(source).reduce((obj, [k, value]) => {
+         console.log('reducer', 'key', k, 'value', value);
+         if (k === newValue) {
+           obj[k] = value; // Be careful! ES6 Maps may have non-String keys.
+         }
+         return obj;
+       }, {});
+
+       values = Array.from(values).reduce((obj, [ke, value]) => {
+         console.log('reducer', 'key', ke, 'value', value);
+           obj[ke] = value; // Be careful! ES6 Maps may have non-String keys.
+          return obj;
+       }, {});
+
+       console.log('new obj', sourceObj);
+
+       return this.handleChange(Object.assign(values, sourceObj), event);
+     }
+
      this.handleChange([newValue, ...values.keys()], event);
    };
 
    unselect (key, event) {
      if (!this.props.disabled) {
        const values = this.values(this.props.value);
+
+       console.log('unselected vals', values, 'key', key);
+       /*if (typeof values === 'object') {
+         delete values[key];
+
+         return this.handleChange(Object.keys(values), event);
+       }*/
+
        values.delete(key);
+
+       console.log('new keys', values.keys());
+
+       if (this.state.valueIsObject) {
+         const valuesObj = Array.from(values).reduce((obj, [k, value]) => {
+           obj[k] = value; // Be careful! ES6 Maps may have non-String keys.
+           return obj;
+         }, {});
+
+         return this.handleChange(valuesObj, event);
+       }
        this.handleChange([...values.keys()], event);
      }
    }
 
    renderSelected () {
      if (this.props.multiple) {
-       const selectedItems = [...this.values()].map(([key, value]) => {
-         return (
-           <Chip
-             key={key}
-             className={this.props.theme.value}
-             deletable
-             onDeleteClick={this.unselect.bind(this, key)}
-           >
-             {value}
-           </Chip>
-         );
-       });
+       let selectedItems = [];
+
+       if (typeof this.values() === 'object') {
+         console.log('values here', this.values().keys());
+
+         // TODO: Extract to renderSelectedFromObject and renderSelectedFromArray methods
+         selectedItems = [...this.values()].map(([key, value]) => {
+           console.log('key', key, 'value', value, 'name', this.values()[key]);
+           return (
+             <Chip
+               key={key}
+               className={this.props.theme.value}
+               deletable
+               onDeleteClick={this.unselect.bind(this, key)}
+             >
+               {value}
+             </Chip>
+           );
+         });
+       } else {
+         selectedItems = [...this.values()].map(([key, value]) => {
+           return (
+             <Chip
+               key={key}
+               className={this.props.theme.value}
+               deletable
+               onDeleteClick={this.unselect.bind(this, key)}
+             >
+               {value}
+             </Chip>
+           );
+         });
+       }
+
+       console.log('items', selectedItems);
 
        return <ul className={this.props.theme.values}>{selectedItems}</ul>;
      }
@@ -274,7 +384,7 @@ const factory = (Chip, Input) => {
            id={key}
            key={key}
            className={className}
-           onMouseDown={this.select}
+           onMouseDown={this.handleMouseDown}
            onMouseOver={this.handleSuggestionHover}
          >
            {value}
@@ -282,14 +392,20 @@ const factory = (Chip, Input) => {
        );
      });
 
-     const className = classnames(theme.suggestions, {[theme.up]: this.state.direction === 'up'});
-     return <ul ref='suggestions' className={className}>{suggestions}</ul>;
+     return (
+       <ul
+         className={classnames(theme.suggestions, {[theme.up]: this.state.direction === 'up'})}
+         ref={node => { this.suggestionsNode = node; }}
+       >
+         {suggestions}
+       </ul>
+     );
    }
 
    render () {
      const {
       allowCreate, error, label, source, suggestionMatch, //eslint-disable-line no-unused-vars
-      selectedPosition, showSuggestionsWhenValueIsSet, onQueryChange,    //eslint-disable-line no-unused-vars
+      selectedPosition, keepFocusOnChange, showSuggestionsWhenValueIsSet, showSelectedWhenNotInSource, onQueryChange, //eslint-disable-line no-unused-vars
       theme, ...other
     } = this.props;
      const className = classnames(theme.autocomplete, {
@@ -301,7 +417,8 @@ const factory = (Chip, Input) => {
          {this.props.selectedPosition === 'above' ? this.renderSelected() : null}
          <Input
            {...other}
-           ref='input'
+           ref={node => { this.inputNode = node; }}
+           autoComplete="off"
            className={theme.input}
            error={error}
            label={label}
@@ -310,6 +427,8 @@ const factory = (Chip, Input) => {
            onFocus={this.handleQueryFocus}
            onKeyDown={this.handleQueryKeyDown}
            onKeyUp={this.handleQueryKeyUp}
+           theme={theme}
+           themeNamespace="input"
            value={this.state.query}
          />
          {this.renderSuggestions()}
diff --git a/lib/autocomplete/Autocomplete.js b/lib/autocomplete/Autocomplete.js
index 4cbbb0dfb..081ca71b7 100644
--- a/lib/autocomplete/Autocomplete.js
+++ b/lib/autocomplete/Autocomplete.js
@@ -80,7 +80,7 @@ var factory = function factory(Chip, Input) {
         showAllSuggestions: _this.props.showSuggestionsWhenValueIsSet,
         query: _this.query(_this.props.value)
       }, _this.handleChange = function (keys, event) {
-        var key = _this.props.multiple ? keys : keys[0];
+        var key = _this.props.multipleArray ? keys : keys[0];
         var query = _this.query(key);
         if (_this.props.onChange) _this.props.onChange(key, event);
         _this.setState({ focus: false, query: query, showAllSuggestions: _this.props.showSuggestionsWhenValueIsSet }, function () {
@@ -199,7 +199,7 @@ var factory = function factory(Chip, Input) {
               }
             }
 
-            // When multiple is false, suggest any value which matches the query if showAllSuggestions is false
+            // When multipleArray is false, suggest any value which matches the query if showAllSuggestions is false
           } catch (err) {
             _didIteratorError = true;
             _iteratorError = err;
@@ -230,7 +230,7 @@ var factory = function factory(Chip, Input) {
               }
             }
 
-            // When multiple is false, suggest all values when showAllSuggestions is true
+            // When multipleArray is false, suggest all values when showAllSuggestions is true
           } catch (err) {
             _didIteratorError2 = true;
             _iteratorError2 = err;
@@ -479,4 +479,4 @@ var factory = function factory(Chip, Input) {
 var Autocomplete = factory(_Chip2.default, _Input2.default);
 exports.default = (0, _reactCssThemr.themr)(_identifiers.AUTOCOMPLETE)(Autocomplete);
 exports.autocompleteFactory = factory;
-exports.Autocomplete = Autocomplete;
\ No newline at end of file
+exports.Autocomplete = Autocomplete;
diff --git a/spec/components/autocomplete.js b/spec/components/autocomplete.js
index 638ed9330..c7c855471 100644
--- a/spec/components/autocomplete.js
+++ b/spec/components/autocomplete.js
@@ -5,15 +5,18 @@ class AutocompleteTest extends React.Component {
   state = {
     simple: 'Spain',
     simpleShowAll: 'England',
-    multiple: ['ES-es', 'TH-th'],
+    multipleArray: ['ES-es', 'TH-th'],
+    multipleObject: {'ES-es': 'Spain', 'TH-th': 'Thailand'},
     countriesArray: ['Spain', 'England', 'USA', 'Thailand', 'Tongo', 'Slovenia'],
-    countriesObject: {'ES-es': 'Spain', 'TH-th': 'Thailand', 'EN-gb': 'England',
-      'EN-en': 'United States of America', 'EN-nz': 'New Zealand'}
+    countriesObject: {
+      'EN-gb': 'England',
+      'EN-en': 'United States of America', 'EN-nz': 'New Zealand'
+    }
   };
 
-  handleMultipleChange = (value) => {
+  handleMultipleArrayChange = (value) => {
     this.setState({
-      multiple: value,
+      multipleArray: value,
       countriesObject: {
         ...this.state.countriesObject,
         ...(value[0] && !this.state.countriesObject[value[0]]) ? {[value[0]]: value[0]} : {}
@@ -21,6 +24,12 @@ class AutocompleteTest extends React.Component {
     });
   };
 
+  handleMultipleObjectChange = (value) => {
+    this.setState({
+      multipleObject: value
+    });
+  };
+
   handleSimpleChange = (value) => {
     this.setState({simple: value});
   };
@@ -29,6 +38,15 @@ class AutocompleteTest extends React.Component {
     this.setState({simpleShowAll: value});
   };
 
+  handleQueryChange = () => {
+    /*this.setState({
+      countriesObject: {
+        'EN-gb': 'England',
+        'EN-en': 'United States of America', 'EN-nz': 'New Zealand'
+      },
+    })*/
+  };
+
   render () {
     return (
       <section>
@@ -38,10 +56,22 @@ class AutocompleteTest extends React.Component {
         <Autocomplete
           allowCreate
           label="Pick multiple elements..."
-          onChange={this.handleMultipleChange}
+          onChange={this.handleMultipleArrayChange}
+          //onQueryChange={this.handleQueryChange}
+          source={this.state.countriesObject}
+          suggestionMatch="anywhere"
+          value={this.state.multipleArray}
+        />
+
+        <Autocomplete
+          allowCreate
+          label="Pick multiple elements (showValuesWhenNotInSource example)..."
+          onChange={this.handleMultipleObjectChange}
+          //onQueryChange={this.handleQueryChange}
+          showSelectedWhenNotInSource
           source={this.state.countriesObject}
           suggestionMatch="anywhere"
-          value={this.state.multiple}
+          value={this.state.multipleObject}
         />
 
         <Autocomplete

From 3237ad0828303b1c87b10a3bbe4b7ffbd771a30b Mon Sep 17 00:00:00 2001
From: Craig Cartmell <craigcartmell1@gmail.com>
Date: Wed, 30 Nov 2016 15:05:52 +0000
Subject: [PATCH 0970/1024] Tidy up

---
 components/autocomplete/Autocomplete.js | 129 ++++++++----------------
 spec/components/autocomplete.js         |  13 +--
 2 files changed, 42 insertions(+), 100 deletions(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index 67439bd60..89fa5ab86 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -65,14 +65,11 @@ const factory = (Chip, Input) => {
      focus: false,
      showAllSuggestions: this.props.showSuggestionsWhenValueIsSet,
      query: this.query(this.props.value),
-     valueIsObject: false
+     isValueAnObject: false
    };
 
    componentDidMount () {
-     this.setState({
-       // TODO: Move to method
-       valueIsObject: !Array.isArray(this.props.value) && typeof this.props.value === 'object'
-     });
+     this.setIsValueAnObject();
    }
 
    componentWillReceiveProps (nextProps) {
@@ -81,13 +78,9 @@ const factory = (Chip, Input) => {
          query: this.query(nextProps.value)
        });
      }
-     // TODO: Better comparison?
+
      if (nextProps.multiple && this.props.value !== nextProps.value) {
-       console.log('value has changed fo real', nextProps.value);
-       this.setState({
-         // TODO: Move to method
-         valueIsObject: !Array.isArray(nextProps.value) && typeof nextProps.value === 'object'
-       });
+        this.setIsValueAnObject();
      }
    }
 
@@ -102,12 +95,9 @@ const factory = (Chip, Input) => {
    }
 
    handleChange = (values, event) => {
-     console.log('handle change', values);
      const value = this.props.multiple ? values : values[0];
-     console.log('new keys here in handle change', value);
      const { showSuggestionsWhenValueIsSet: showAllSuggestions } = this.props;
      const query = this.query(value);
-     // TODO: Pass back key/value if object originally supplied for value
      if (this.props.onChange) this.props.onChange(value, event);
      if (this.props.keepFocusOnChange) {
        this.setState({ query, showAllSuggestions });
@@ -208,17 +198,15 @@ const factory = (Chip, Input) => {
      const values = this.values();
      const source = this.source();
 
-     console.log('in suggestions', values);
      // Suggest any non-set value which matches the query
      if (this.props.multiple) {
        for (const [key, value] of source) {
-         //if ((Array.isArray(values) && !values.has(key)) && this.matches(value.toLowerCase().trim(), query)) {
-         if ((!values.has(key)) && this.matches(value.toLowerCase().trim(), query)) {
+         if (!values.has(key) && this.matches(value.toLowerCase().trim(), query)) {
            suggest.set(key, value);
          }
        }
 
-     // When multipleArray is false, suggest any value which matches the query if showAllSuggestions is false
+     // When multiple is false, suggest any value which matches the query if showAllSuggestions is false
      } else if (query && !this.state.showAllSuggestions) {
        for (const [key, value] of source) {
          if (this.matches(value.toLowerCase().trim(), query)) {
@@ -226,7 +214,7 @@ const factory = (Chip, Input) => {
          }
        }
 
-     // When multipleArray is false, suggest all values when showAllSuggestions is true
+     // When multiple is false, suggest all values when showAllSuggestions is true
      } else {
        suggest = source;
      }
@@ -261,7 +249,7 @@ const factory = (Chip, Input) => {
    values () {
      const vals = this.props.multiple ? this.props.value : [this.props.value];
 
-     if (this.props.showSelectedWhenNotInSource && typeof vals === 'object') {
+     if (this.props.showSelectedWhenNotInSource && this.state.isValueAnObject) {
        return new Map(Object.entries(vals));
      }
 
@@ -276,31 +264,19 @@ const factory = (Chip, Input) => {
 
    select = (event, target) => {
      events.pauseEvent(event);
-     let values = this.values(this.props.value);
+     const values = this.values(this.props.value);
      const source = this.source();
      const newValue = target === void 0 ? event.target.id : target;
-     console.log('selected', target, event.target);
-     if (this.state.valueIsObject) {
-       console.log('current values', values);
-       console.log('new value', newValue);
 
-       const sourceObj = Array.from(source).reduce((obj, [k, value]) => {
-         console.log('reducer', 'key', k, 'value', value);
+     if (this.state.isValueAnObject) {
+       const newItem = Array.from(source).reduce((obj, [k, value]) => {
          if (k === newValue) {
-           obj[k] = value; // Be careful! ES6 Maps may have non-String keys.
+           obj[k] = value;
          }
          return obj;
        }, {});
 
-       values = Array.from(values).reduce((obj, [ke, value]) => {
-         console.log('reducer', 'key', ke, 'value', value);
-           obj[ke] = value; // Be careful! ES6 Maps may have non-String keys.
-          return obj;
-       }, {});
-
-       console.log('new obj', sourceObj);
-
-       return this.handleChange(Object.assign(values, sourceObj), event);
+       return this.handleChange(Object.assign(this.mapToObject(values), newItem), event);
      }
 
      this.handleChange([newValue, ...values.keys()], event);
@@ -310,66 +286,43 @@ const factory = (Chip, Input) => {
      if (!this.props.disabled) {
        const values = this.values(this.props.value);
 
-       console.log('unselected vals', values, 'key', key);
-       /*if (typeof values === 'object') {
-         delete values[key];
-
-         return this.handleChange(Object.keys(values), event);
-       }*/
-
        values.delete(key);
 
-       console.log('new keys', values.keys());
-
-       if (this.state.valueIsObject) {
-         const valuesObj = Array.from(values).reduce((obj, [k, value]) => {
-           obj[k] = value; // Be careful! ES6 Maps may have non-String keys.
-           return obj;
-         }, {});
-
-         return this.handleChange(valuesObj, event);
+       if (this.state.isValueAnObject) {
+         return this.handleChange(this.mapToObject(values), event);
        }
+
        this.handleChange([...values.keys()], event);
      }
    }
 
+   setIsValueAnObject () {
+      this.setState({
+        isValueAnObject: !Array.isArray(this.props.value) && typeof this.props.value === 'object'
+      });
+    }
+
+    mapToObject (map) {
+      return Array.from(map).reduce((obj, [k, value]) => {
+        obj[k] = value;
+        return obj;
+      }, {});
+    }
+
    renderSelected () {
      if (this.props.multiple) {
-       let selectedItems = [];
-
-       if (typeof this.values() === 'object') {
-         console.log('values here', this.values().keys());
-
-         // TODO: Extract to renderSelectedFromObject and renderSelectedFromArray methods
-         selectedItems = [...this.values()].map(([key, value]) => {
-           console.log('key', key, 'value', value, 'name', this.values()[key]);
-           return (
-             <Chip
-               key={key}
-               className={this.props.theme.value}
-               deletable
-               onDeleteClick={this.unselect.bind(this, key)}
-             >
-               {value}
-             </Chip>
-           );
-         });
-       } else {
-         selectedItems = [...this.values()].map(([key, value]) => {
-           return (
-             <Chip
-               key={key}
-               className={this.props.theme.value}
-               deletable
-               onDeleteClick={this.unselect.bind(this, key)}
-             >
-               {value}
-             </Chip>
-           );
-         });
-       }
-
-       console.log('items', selectedItems);
+       const selectedItems = [...this.values()].map(([key, value]) => {
+         return (
+           <Chip
+             key={key}
+             className={this.props.theme.value}
+             deletable
+             onDeleteClick={this.unselect.bind(this, key)}
+           >
+             {value}
+           </Chip>
+         );
+       });
 
        return <ul className={this.props.theme.values}>{selectedItems}</ul>;
      }
diff --git a/spec/components/autocomplete.js b/spec/components/autocomplete.js
index c7c855471..44d29db50 100644
--- a/spec/components/autocomplete.js
+++ b/spec/components/autocomplete.js
@@ -38,15 +38,6 @@ class AutocompleteTest extends React.Component {
     this.setState({simpleShowAll: value});
   };
 
-  handleQueryChange = () => {
-    /*this.setState({
-      countriesObject: {
-        'EN-gb': 'England',
-        'EN-en': 'United States of America', 'EN-nz': 'New Zealand'
-      },
-    })*/
-  };
-
   render () {
     return (
       <section>
@@ -57,7 +48,6 @@ class AutocompleteTest extends React.Component {
           allowCreate
           label="Pick multiple elements..."
           onChange={this.handleMultipleArrayChange}
-          //onQueryChange={this.handleQueryChange}
           source={this.state.countriesObject}
           suggestionMatch="anywhere"
           value={this.state.multipleArray}
@@ -65,9 +55,8 @@ class AutocompleteTest extends React.Component {
 
         <Autocomplete
           allowCreate
-          label="Pick multiple elements (showValuesWhenNotInSource example)..."
+          label="Pick multiple elements with object value..."
           onChange={this.handleMultipleObjectChange}
-          //onQueryChange={this.handleQueryChange}
           showSelectedWhenNotInSource
           source={this.state.countriesObject}
           suggestionMatch="anywhere"

From 4378f468c3f2c1154b0cafad49f5e57c64a13064 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 30 Nov 2016 17:04:00 +0100
Subject: [PATCH 0971/1024] Fixes #1001

---
 components/checkbox/Checkbox.js | 14 ++++++++++++--
 components/radio/RadioButton.js | 12 +++++++++---
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/components/checkbox/Checkbox.js b/components/checkbox/Checkbox.js
index 60539be08..e963deb21 100644
--- a/components/checkbox/Checkbox.js
+++ b/components/checkbox/Checkbox.js
@@ -18,6 +18,8 @@ const factory = (Check) => {
       ]),
       name: PropTypes.string,
       onChange: PropTypes.func,
+      onMouseEnter: PropTypes.func,
+      onMouseLeave: PropTypes.func,
       style: PropTypes.object,
       theme: PropTypes.shape({
         disabled: PropTypes.string,
@@ -49,17 +51,25 @@ const factory = (Check) => {
     }
 
     render () {
-      const { checked, children, disabled, label, style, onChange, theme, ...others } = this.props; // eslint-disable-line
+      const { checked, children, disabled, label, name, style, onChange, // eslint-disable-line
+        onMouseEnter, onMouseLeave, theme, ...others } = this.props;
       const className = classnames(theme.field, {
         [theme.disabled]: this.props.disabled
       }, this.props.className);
 
       return (
-        <label {...others} data-react-toolbox='checkbox' className={className}>
+        <label
+          data-react-toolbox='checkbox'
+          className={className}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+        >
           <input
+            {...others}
             checked={checked}
             className={theme.input}
             disabled={disabled}
+            name={name}
             onChange={() => {}}
             onClick={this.handleToggle}
             ref={node => { this.inputNode = node; }}
diff --git a/components/radio/RadioButton.js b/components/radio/RadioButton.js
index 2cd719dfa..8add1fe6d 100644
--- a/components/radio/RadioButton.js
+++ b/components/radio/RadioButton.js
@@ -20,6 +20,8 @@ const factory = (Radio) => {
       onBlur: PropTypes.func,
       onChange: PropTypes.func,
       onFocus: PropTypes.func,
+      onMouseEnter: PropTypes.func,
+      onMouseLeave: PropTypes.func,
       theme: PropTypes.shape({
         disabled: PropTypes.string,
         field: PropTypes.string,
@@ -50,20 +52,24 @@ const factory = (Radio) => {
     }
 
     render () {
-      const { checked, children, className, disabled, label, onChange, theme, ...others } = this.props; // eslint-disable-line
+      const { checked, children, className, disabled, label, name, onChange,  // eslint-disable-line
+        onMouseEnter, onMouseLeave, theme, ...others } = this.props;
       const _className = classnames(theme[this.props.disabled ? 'disabled' : 'field'], className);
       return (
         <label
-          {...others}
           data-react-toolbox='radio-button'
           className={_className}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
         >
           <input
+            {...others}
             checked={checked}
             className={theme.input}
             disabled={disabled}
-            onClick={this.handleClick}
+            name={name}
             onChange={() => {}}
+            onClick={this.handleClick}
             ref={node => { this.inputNode = node; }}
             type='radio'
           />

From c3f351004f67ad7fc5d94105f517158703181a4e Mon Sep 17 00:00:00 2001
From: Craig Cartmell <craigcartmell1@gmail.com>
Date: Wed, 30 Nov 2016 16:11:33 +0000
Subject: [PATCH 0972/1024] Built

---
 lib/autocomplete/Autocomplete.js | 572 +++++++++++++++++++++++++++++++
 lib/autocomplete/index.d.ts      |   7 +-
 2 files changed, 578 insertions(+), 1 deletion(-)

diff --git a/lib/autocomplete/Autocomplete.js b/lib/autocomplete/Autocomplete.js
index e69de29bb..85cf9460f 100644
--- a/lib/autocomplete/Autocomplete.js
+++ b/lib/autocomplete/Autocomplete.js
@@ -0,0 +1,572 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Autocomplete = exports.autocompleteFactory = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactDom = require('react-dom');
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
+var _classnames4 = require('classnames');
+
+var _classnames5 = _interopRequireDefault(_classnames4);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Chip = require('../chip/Chip.js');
+
+var _Chip2 = _interopRequireDefault(_Chip);
+
+var _Input = require('../input/Input.js');
+
+var _Input2 = _interopRequireDefault(_Input);
+
+var _events = require('../utils/events.js');
+
+var _events2 = _interopRequireDefault(_events);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var POSITION = {
+  AUTO: 'auto',
+  DOWN: 'down',
+  UP: 'up'
+};
+
+var factory = function factory(Chip, Input) {
+  var Autocomplete = function (_Component) {
+    _inherits(Autocomplete, _Component);
+
+    function Autocomplete() {
+      var _ref;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, Autocomplete);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Autocomplete.__proto__ || Object.getPrototypeOf(Autocomplete)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+        direction: _this.props.direction,
+        focus: false,
+        showAllSuggestions: _this.props.showSuggestionsWhenValueIsSet,
+        query: _this.query(_this.props.value),
+        isValueAnObject: false
+      }, _this.handleChange = function (values, event) {
+        var value = _this.props.multiple ? values : values[0];
+        var showAllSuggestions = _this.props.showSuggestionsWhenValueIsSet;
+
+        var query = _this.query(value);
+        if (_this.props.onChange) _this.props.onChange(value, event);
+        if (_this.props.keepFocusOnChange) {
+          _this.setState({ query: query, showAllSuggestions: showAllSuggestions });
+        } else {
+          _this.setState({ focus: false, query: query, showAllSuggestions: showAllSuggestions }, function () {
+            _reactDom2.default.findDOMNode(_this).querySelector('input').blur();
+          });
+        }
+      }, _this.handleMouseDown = function () {
+        _this.selectOrCreateActiveItem();
+      }, _this.handleQueryBlur = function (event) {
+        if (_this.state.focus) _this.setState({ focus: false });
+        if (_this.props.onBlur) _this.props.onBlur(event, _this.state.active);
+      }, _this.handleQueryChange = function (value) {
+        if (_this.props.onQueryChange) _this.props.onQueryChange(value);
+        _this.setState({ query: value, showAllSuggestions: false, active: null });
+      }, _this.handleQueryFocus = function () {
+        _this.suggestionsNode.scrollTop = 0;
+        _this.setState({ active: '', focus: true });
+        if (_this.props.onFocus) _this.props.onFocus();
+      }, _this.handleQueryKeyDown = function (event) {
+        // Clear query when pressing backspace and showing all suggestions.
+        var shouldClearQuery = event.which === 8 && _this.props.showSuggestionsWhenValueIsSet && _this.state.showAllSuggestions;
+        if (shouldClearQuery) {
+          _this.setState({ query: '' });
+        }
+
+        if (event.which === 13) {
+          _this.selectOrCreateActiveItem();
+        }
+      }, _this.handleQueryKeyUp = function (event) {
+        if (event.which === 27) _reactDom2.default.findDOMNode(_this).querySelector('input').blur();
+
+        if ([40, 38].indexOf(event.which) !== -1) {
+          var suggestionsKeys = [].concat(_toConsumableArray(_this.suggestions().keys()));
+          var index = suggestionsKeys.indexOf(_this.state.active) + (event.which === 40 ? +1 : -1);
+          if (index < 0) index = suggestionsKeys.length - 1;
+          if (index >= suggestionsKeys.length) index = 0;
+          _this.setState({ active: suggestionsKeys[index] });
+        }
+      }, _this.handleSuggestionHover = function (event) {
+        _this.setState({ active: event.target.id });
+      }, _this.select = function (event, target) {
+        _events2.default.pauseEvent(event);
+        var values = _this.values(_this.props.value);
+        var source = _this.source();
+        var newValue = target === void 0 ? event.target.id : target;
+
+        if (_this.state.isValueAnObject) {
+          var newItem = Array.from(source).reduce(function (obj, _ref2) {
+            var _ref3 = _slicedToArray(_ref2, 2),
+                k = _ref3[0],
+                value = _ref3[1];
+
+            if (k === newValue) {
+              obj[k] = value;
+            }
+            return obj;
+          }, {});
+
+          return _this.handleChange(Object.assign(_this.mapToObject(values), newItem), event);
+        }
+
+        _this.handleChange([newValue].concat(_toConsumableArray(values.keys())), event);
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(Autocomplete, [{
+      key: 'componentDidMount',
+      value: function componentDidMount() {
+        this.setIsValueAnObject();
+      }
+    }, {
+      key: 'componentWillReceiveProps',
+      value: function componentWillReceiveProps(nextProps) {
+        if (!this.props.multiple) {
+          this.setState({
+            query: this.query(nextProps.value)
+          });
+        }
+
+        if (nextProps.multiple && this.props.value !== nextProps.value) {
+          this.setIsValueAnObject();
+        }
+      }
+    }, {
+      key: 'shouldComponentUpdate',
+      value: function shouldComponentUpdate(nextProps, nextState) {
+        if (!this.state.focus && nextState.focus && this.props.direction === POSITION.AUTO) {
+          var direction = this.calculateDirection();
+          if (this.state.direction !== direction) {
+            this.setState({ direction: direction });
+          }
+        }
+        return true;
+      }
+    }, {
+      key: 'calculateDirection',
+      value: function calculateDirection() {
+        if (this.props.direction === 'auto') {
+          var client = _reactDom2.default.findDOMNode(this.inputNode).getBoundingClientRect();
+          var screen_height = window.innerHeight || document.documentElement.offsetHeight;
+          var up = client.top > screen_height / 2 + client.height;
+          return up ? 'up' : 'down';
+        } else {
+          return this.props.direction;
+        }
+      }
+    }, {
+      key: 'query',
+      value: function query(key) {
+        var query_value = '';
+        if (!this.props.multiple && key) {
+          var source_value = this.source().get(key);
+          query_value = source_value ? source_value : key;
+        }
+        return query_value;
+      }
+    }, {
+      key: 'selectOrCreateActiveItem',
+      value: function selectOrCreateActiveItem() {
+        var target = this.state.active;
+        if (!target) {
+          target = this.props.allowCreate ? this.state.query : [].concat(_toConsumableArray(this.suggestions().keys()))[0];
+          this.setState({ active: target });
+        }
+        this.select(event, target);
+      }
+    }, {
+      key: 'suggestions',
+      value: function suggestions() {
+        var suggest = new Map();
+        var rawQuery = this.state.query || (this.props.multiple ? '' : this.props.value);
+        var query = (rawQuery || '').toLowerCase().trim();
+        var values = this.values();
+        var source = this.source();
+
+        // Suggest any non-set value which matches the query
+        if (this.props.multiple) {
+          var _iteratorNormalCompletion = true;
+          var _didIteratorError = false;
+          var _iteratorError = undefined;
+
+          try {
+            for (var _iterator = source[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+              var _step$value = _slicedToArray(_step.value, 2),
+                  key = _step$value[0],
+                  value = _step$value[1];
+
+              if (!values.has(key) && this.matches(value.toLowerCase().trim(), query)) {
+                suggest.set(key, value);
+              }
+            }
+
+            // When multiple is false, suggest any value which matches the query if showAllSuggestions is false
+          } catch (err) {
+            _didIteratorError = true;
+            _iteratorError = err;
+          } finally {
+            try {
+              if (!_iteratorNormalCompletion && _iterator.return) {
+                _iterator.return();
+              }
+            } finally {
+              if (_didIteratorError) {
+                throw _iteratorError;
+              }
+            }
+          }
+        } else if (query && !this.state.showAllSuggestions) {
+          var _iteratorNormalCompletion2 = true;
+          var _didIteratorError2 = false;
+          var _iteratorError2 = undefined;
+
+          try {
+            for (var _iterator2 = source[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+              var _step2$value = _slicedToArray(_step2.value, 2),
+                  key = _step2$value[0],
+                  value = _step2$value[1];
+
+              if (this.matches(value.toLowerCase().trim(), query)) {
+                suggest.set(key, value);
+              }
+            }
+
+            // When multiple is false, suggest all values when showAllSuggestions is true
+          } catch (err) {
+            _didIteratorError2 = true;
+            _iteratorError2 = err;
+          } finally {
+            try {
+              if (!_iteratorNormalCompletion2 && _iterator2.return) {
+                _iterator2.return();
+              }
+            } finally {
+              if (_didIteratorError2) {
+                throw _iteratorError2;
+              }
+            }
+          }
+        } else {
+          suggest = source;
+        }
+
+        return suggest;
+      }
+    }, {
+      key: 'matches',
+      value: function matches(value, query) {
+        var suggestionMatch = this.props.suggestionMatch;
+
+
+        if (suggestionMatch === 'start') {
+          return value.startsWith(query);
+        } else if (suggestionMatch === 'anywhere') {
+          return value.includes(query);
+        } else if (suggestionMatch === 'word') {
+          var re = new RegExp('\\b' + query, 'g');
+          return re.test(value);
+        }
+
+        return false;
+      }
+    }, {
+      key: 'source',
+      value: function source() {
+        var src = this.props.source;
+
+        if (src.hasOwnProperty('length')) {
+          return new Map(src.map(function (item) {
+            return Array.isArray(item) ? [].concat(_toConsumableArray(item)) : [item, item];
+          }));
+        } else {
+          return new Map(Object.keys(src).map(function (key) {
+            return [key, src[key]];
+          }));
+        }
+      }
+    }, {
+      key: 'values',
+      value: function values() {
+        var vals = this.props.multiple ? this.props.value : [this.props.value];
+
+        if (this.props.showSelectedWhenNotInSource && this.state.isValueAnObject) {
+          return new Map(Object.entries(vals));
+        }
+
+        var valueMap = new Map();
+        var _iteratorNormalCompletion3 = true;
+        var _didIteratorError3 = false;
+        var _iteratorError3 = undefined;
+
+        try {
+          for (var _iterator3 = this.source()[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
+            var _step3$value = _slicedToArray(_step3.value, 2),
+                k = _step3$value[0],
+                v = _step3$value[1];
+
+            if (Array.isArray(vals) && vals.indexOf(k) !== -1 || k in vals) {
+              valueMap.set(k, v);
+            }
+          }
+        } catch (err) {
+          _didIteratorError3 = true;
+          _iteratorError3 = err;
+        } finally {
+          try {
+            if (!_iteratorNormalCompletion3 && _iterator3.return) {
+              _iterator3.return();
+            }
+          } finally {
+            if (_didIteratorError3) {
+              throw _iteratorError3;
+            }
+          }
+        }
+
+        return valueMap;
+      }
+    }, {
+      key: 'unselect',
+      value: function unselect(key, event) {
+        if (!this.props.disabled) {
+          var values = this.values(this.props.value);
+
+          values.delete(key);
+
+          if (this.state.isValueAnObject) {
+            return this.handleChange(this.mapToObject(values), event);
+          }
+
+          this.handleChange([].concat(_toConsumableArray(values.keys())), event);
+        }
+      }
+    }, {
+      key: 'setIsValueAnObject',
+      value: function setIsValueAnObject() {
+        this.setState({
+          isValueAnObject: !Array.isArray(this.props.value) && _typeof(this.props.value) === 'object'
+        });
+      }
+    }, {
+      key: 'mapToObject',
+      value: function mapToObject(map) {
+        return Array.from(map).reduce(function (obj, _ref4) {
+          var _ref5 = _slicedToArray(_ref4, 2),
+              k = _ref5[0],
+              value = _ref5[1];
+
+          obj[k] = value;
+          return obj;
+        }, {});
+      }
+    }, {
+      key: 'renderSelected',
+      value: function renderSelected() {
+        var _this2 = this;
+
+        if (this.props.multiple) {
+          var selectedItems = [].concat(_toConsumableArray(this.values())).map(function (_ref6) {
+            var _ref7 = _slicedToArray(_ref6, 2),
+                key = _ref7[0],
+                value = _ref7[1];
+
+            return _react2.default.createElement(
+              Chip,
+              {
+                key: key,
+                className: _this2.props.theme.value,
+                deletable: true,
+                onDeleteClick: _this2.unselect.bind(_this2, key)
+              },
+              value
+            );
+          });
+
+          return _react2.default.createElement(
+            'ul',
+            { className: this.props.theme.values },
+            selectedItems
+          );
+        }
+      }
+    }, {
+      key: 'renderSuggestions',
+      value: function renderSuggestions() {
+        var _this3 = this;
+
+        var theme = this.props.theme;
+
+        var suggestions = [].concat(_toConsumableArray(this.suggestions())).map(function (_ref8) {
+          var _ref9 = _slicedToArray(_ref8, 2),
+              key = _ref9[0],
+              value = _ref9[1];
+
+          var className = (0, _classnames5.default)(theme.suggestion, _defineProperty({}, theme.active, _this3.state.active === key));
+          return _react2.default.createElement(
+            'li',
+            {
+              id: key,
+              key: key,
+              className: className,
+              onMouseDown: _this3.handleMouseDown,
+              onMouseOver: _this3.handleSuggestionHover
+            },
+            value
+          );
+        });
+
+        return _react2.default.createElement(
+          'ul',
+          {
+            className: (0, _classnames5.default)(theme.suggestions, _defineProperty({}, theme.up, this.state.direction === 'up')),
+            ref: function ref(node) {
+              _this3.suggestionsNode = node;
+            }
+          },
+          suggestions
+        );
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _this4 = this;
+
+        var _props = this.props,
+            allowCreate = _props.allowCreate,
+            error = _props.error,
+            label = _props.label,
+            source = _props.source,
+            suggestionMatch = _props.suggestionMatch,
+            selectedPosition = _props.selectedPosition,
+            keepFocusOnChange = _props.keepFocusOnChange,
+            showSuggestionsWhenValueIsSet = _props.showSuggestionsWhenValueIsSet,
+            showSelectedWhenNotInSource = _props.showSelectedWhenNotInSource,
+            onQueryChange = _props.onQueryChange,
+            theme = _props.theme,
+            other = _objectWithoutProperties(_props, ['allowCreate', 'error', 'label', 'source', 'suggestionMatch', 'selectedPosition', 'keepFocusOnChange', 'showSuggestionsWhenValueIsSet', 'showSelectedWhenNotInSource', 'onQueryChange', 'theme']);
+
+        var className = (0, _classnames5.default)(theme.autocomplete, _defineProperty({}, theme.focus, this.state.focus), this.props.className);
+
+        return _react2.default.createElement(
+          'div',
+          { 'data-react-toolbox': 'autocomplete', className: className },
+          this.props.selectedPosition === 'above' ? this.renderSelected() : null,
+          _react2.default.createElement(Input, _extends({}, other, {
+            ref: function ref(node) {
+              _this4.inputNode = node;
+            },
+            autoComplete: 'off',
+            className: theme.input,
+            error: error,
+            label: label,
+            onBlur: this.handleQueryBlur,
+            onChange: this.handleQueryChange,
+            onFocus: this.handleQueryFocus,
+            onKeyDown: this.handleQueryKeyDown,
+            onKeyUp: this.handleQueryKeyUp,
+            theme: theme,
+            themeNamespace: 'input',
+            value: this.state.query
+          })),
+          this.renderSuggestions(),
+          this.props.selectedPosition === 'below' ? this.renderSelected() : null
+        );
+      }
+    }]);
+
+    return Autocomplete;
+  }(_react.Component);
+
+  Autocomplete.propTypes = {
+    allowCreate: _react.PropTypes.bool,
+    className: _react.PropTypes.string,
+    direction: _react.PropTypes.oneOf(['auto', 'up', 'down']),
+    disabled: _react.PropTypes.bool,
+    error: _react.PropTypes.string,
+    keepFocusOnChange: _react.PropTypes.bool,
+    label: _react.PropTypes.string,
+    multiple: _react.PropTypes.bool,
+    onBlur: _react.PropTypes.func,
+    onChange: _react.PropTypes.func,
+    onFocus: _react.PropTypes.func,
+    onQueryChange: _react.PropTypes.func,
+    selectedPosition: _react.PropTypes.oneOf(['above', 'below', 'none']),
+    showSelectedWhenNotInSource: _react.PropTypes.bool,
+    showSuggestionsWhenValueIsSet: _react.PropTypes.bool,
+    source: _react.PropTypes.any,
+    suggestionMatch: _react.PropTypes.oneOf(['start', 'anywhere', 'word']),
+    theme: _react.PropTypes.shape({
+      active: _react.PropTypes.string,
+      autocomplete: _react.PropTypes.string,
+      focus: _react.PropTypes.string,
+      input: _react.PropTypes.string,
+      suggestion: _react.PropTypes.string,
+      suggestions: _react.PropTypes.string,
+      up: _react.PropTypes.string,
+      value: _react.PropTypes.string,
+      values: _react.PropTypes.string
+    }),
+    value: _react.PropTypes.any
+  };
+  Autocomplete.defaultProps = {
+    allowCreate: false,
+    className: '',
+    direction: 'auto',
+    keepFocusOnChange: false,
+    multiple: true,
+    selectedPosition: 'above',
+    showSuggestionsWhenValueIsSet: false,
+    showSelectedWhenNotInSource: false,
+    source: {},
+    suggestionMatch: 'start'
+  };
+
+
+  return Autocomplete;
+};
+
+var Autocomplete = factory(_Chip2.default, _Input2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.AUTOCOMPLETE)(Autocomplete);
+exports.autocompleteFactory = factory;
+exports.Autocomplete = Autocomplete;
\ No newline at end of file
diff --git a/lib/autocomplete/index.d.ts b/lib/autocomplete/index.d.ts
index b2c560d0f..5a8185187 100644
--- a/lib/autocomplete/index.d.ts
+++ b/lib/autocomplete/index.d.ts
@@ -72,11 +72,16 @@ interface AutocompleteProps extends ReactToolbox.Props {
    * @default auto
    */
   onChange?: Function;
+  /**
+   * Callback function that is fired when the components's query value changes.
+   * @default auto
+   */
+  onQueryChange?: Function;
   /**
    * Determines if the selected list is shown above or below input. It can be above or below.
    * @default above
    */
-  selectedPosition?: "above" | "below";
+  selectedPosition?: "above" | "below" | "none";
   /**
    * If true, the list of suggestions will not be filtered when a value is selected.
    * @default false

From 942d56fbfe55eee7216b66112ed8be7b4a08046e Mon Sep 17 00:00:00 2001
From: Craig Cartmell <craigcartmell1@gmail.com>
Date: Wed, 30 Nov 2016 16:21:26 +0000
Subject: [PATCH 0973/1024] Published lib

---
 lib/_colors.scss                        | 301 ++++++++++++++++++
 lib/_globals.scss                       |  81 +++++
 lib/_mixins.scss                        | 260 ++++++++++++++++
 lib/animations/index.js                 |  29 ++
 lib/animations/slide-left.scss          |  26 ++
 lib/animations/slide-right.scss         |  29 ++
 lib/animations/zoom-in.scss             |  33 ++
 lib/animations/zoom-out.scss            |  33 ++
 lib/app_bar/AppBar.js                   | 177 +++++++++++
 lib/app_bar/_config.scss                |   8 +
 lib/app_bar/index.d.ts                  |  74 +++++
 lib/app_bar/index.js                    |  26 ++
 lib/app_bar/theme.scss                  |  65 ++++
 lib/autocomplete/_config.scss           |   7 +
 lib/autocomplete/index.js               |  32 ++
 lib/autocomplete/theme.scss             |  76 +++++
 lib/avatar/Avatar.js                    |  80 +++++
 lib/avatar/_config.scss                 |   4 +
 lib/avatar/index.d.ts                   |  48 +++
 lib/avatar/index.js                     |  28 ++
 lib/avatar/theme.scss                   |  44 +++
 lib/button/BrowseButton.js              | 168 ++++++++++
 lib/button/Button.js                    | 167 ++++++++++
 lib/button/IconButton.js                | 138 +++++++++
 lib/button/__test__/index.spec.js       |  66 ++++
 lib/button/_config.scss                 |  21 ++
 lib/button/_mixins.scss                 |  17 ++
 lib/button/index.d.ts                   | 337 +++++++++++++++++++++
 lib/button/index.js                     |  42 +++
 lib/button/theme.scss                   | 182 +++++++++++
 lib/card/Card.js                        |  55 ++++
 lib/card/CardActions.js                 |  48 +++
 lib/card/CardMedia.js                   |  75 +++++
 lib/card/CardText.js                    |  52 ++++
 lib/card/CardTitle.js                   |  93 ++++++
 lib/card/_config.scss                   |   7 +
 lib/card/index.d.ts                     | 103 +++++++
 lib/card/index.js                       |  44 +++
 lib/card/theme.scss                     | 126 ++++++++
 lib/checkbox/Check.js                   |  52 ++++
 lib/checkbox/Checkbox.js                | 157 ++++++++++
 lib/checkbox/_config.scss               |  12 +
 lib/checkbox/index.d.ts                 |  70 +++++
 lib/checkbox/index.js                   |  32 ++
 lib/checkbox/theme.scss                 | 121 ++++++++
 lib/chip/Chip.js                        |  97 ++++++
 lib/chip/_config.scss                   |  17 ++
 lib/chip/index.d.ts                     |  53 ++++
 lib/chip/index.js                       |  28 ++
 lib/chip/theme.scss                     |  68 +++++
 lib/commons.scss                        |  95 ++++++
 lib/date_picker/Calendar.js             | 212 +++++++++++++
 lib/date_picker/CalendarDay.js          | 106 +++++++
 lib/date_picker/CalendarMonth.js        | 157 ++++++++++
 lib/date_picker/DatePicker.js           | 233 ++++++++++++++
 lib/date_picker/DatePickerDialog.js     | 186 ++++++++++++
 lib/date_picker/__test__/index.spec.js  |  96 ++++++
 lib/date_picker/_config.scss            |  31 ++
 lib/date_picker/index.d.ts              | 153 ++++++++++
 lib/date_picker/index.js                |  48 +++
 lib/date_picker/theme.scss              | 156 ++++++++++
 lib/dialog/Dialog.js                    | 113 +++++++
 lib/dialog/_config.scss                 |   6 +
 lib/dialog/index.d.ts                   |  93 ++++++
 lib/dialog/index.js                     |  32 ++
 lib/dialog/theme.scss                   |  86 ++++++
 lib/drawer/Drawer.js                    |  85 ++++++
 lib/drawer/_config.scss                 |   4 +
 lib/drawer/index.d.ts                   |  54 ++++
 lib/drawer/index.js                     |  26 ++
 lib/drawer/theme.scss                   |  43 +++
 lib/dropdown/Dropdown.js                | 304 +++++++++++++++++++
 lib/dropdown/_config.scss               |   6 +
 lib/dropdown/index.d.ts                 | 115 +++++++
 lib/dropdown/index.js                   |  26 ++
 lib/dropdown/theme.scss                 | 138 +++++++++
 lib/font_icon/FontIcon.js               |  50 +++
 lib/font_icon/index.d.ts                |  17 ++
 lib/font_icon/index.js                  |  15 +
 lib/form/Form.js                        | 151 +++++++++
 lib/form/index.js                       |  55 ++++
 lib/hoc/ActivableRenderer.js            | 113 +++++++
 lib/hoc/Portal.js                       | 145 +++++++++
 lib/identifiers.js                      |  32 ++
 lib/index.d.ts                          |  56 ++++
 lib/index.js                            | 206 +++++++++++++
 lib/input/Input.js                      | 296 ++++++++++++++++++
 lib/input/_config.scss                  |  20 ++
 lib/input/index.d.ts                    | 136 +++++++++
 lib/input/index.js                      |  28 ++
 lib/input/theme.scss                    | 156 ++++++++++
 lib/layout/Layout.js                    |  48 +++
 lib/layout/NavDrawer.js                 |  87 ++++++
 lib/layout/Panel.js                     |  57 ++++
 lib/layout/Sidebar.js                   |  69 +++++
 lib/layout/_config.scss                 |  18 ++
 lib/layout/_mixins.scss                 |  27 ++
 lib/layout/index.d.ts                   | 194 ++++++++++++
 lib/layout/index.js                     |  34 +++
 lib/layout/theme.scss                   | 325 ++++++++++++++++++++
 lib/link/Link.js                        |  82 +++++
 lib/link/index.d.ts                     |  51 ++++
 lib/link/index.js                       |  23 ++
 lib/link/theme.scss                     |  37 +++
 lib/list/List.js                        |  99 ++++++
 lib/list/ListCheckbox.js                |  93 ++++++
 lib/list/ListDivider.js                 |  37 +++
 lib/list/ListItem.js                    | 156 ++++++++++
 lib/list/ListItemAction.js              |  44 +++
 lib/list/ListItemActions.js             |  56 ++++
 lib/list/ListItemContent.js             | 116 +++++++
 lib/list/ListItemLayout.js              | 104 +++++++
 lib/list/ListItemText.js                |  58 ++++
 lib/list/ListSubHeader.js               |  44 +++
 lib/list/_config.scss                   |  18 ++
 lib/list/index.d.ts                     | 265 ++++++++++++++++
 lib/list/index.js                       |  69 +++++
 lib/list/theme.scss                     | 159 ++++++++++
 lib/menu/IconMenu.js                    | 151 +++++++++
 lib/menu/Menu.js                        | 324 ++++++++++++++++++++
 lib/menu/MenuDivider.js                 |  30 ++
 lib/menu/MenuItem.js                    | 136 +++++++++
 lib/menu/__test__/index.spec.js         |  51 ++++
 lib/menu/_config.scss                   |  16 +
 lib/menu/index.d.ts                     | 242 +++++++++++++++
 lib/menu/index.js                       |  43 +++
 lib/menu/theme.scss                     | 154 ++++++++++
 lib/navigation/Navigation.js            |  86 ++++++
 lib/navigation/_config.scss             |   2 +
 lib/navigation/index.d.ts               |  47 +++
 lib/navigation/index.js                 |  26 ++
 lib/navigation/theme.scss               |  26 ++
 lib/overlay/Overlay.js                  | 133 ++++++++
 lib/overlay/_config.scss                |   2 +
 lib/overlay/index.js                    |  22 ++
 lib/overlay/theme.scss                  |  42 +++
 lib/progress_bar/ProgressBar.js         | 162 ++++++++++
 lib/progress_bar/__test__/index.spec.js |  92 ++++++
 lib/progress_bar/_config.scss           |   7 +
 lib/progress_bar/index.d.ts             |  88 ++++++
 lib/progress_bar/index.js               |  23 ++
 lib/progress_bar/theme.scss             | 146 +++++++++
 lib/radio/Radio.js                      |  45 +++
 lib/radio/RadioButton.js                | 158 ++++++++++
 lib/radio/RadioGroup.js                 |  99 ++++++
 lib/radio/_config.scss                  |   9 +
 lib/radio/index.d.ts                    | 102 +++++++
 lib/radio/index.js                      |  36 +++
 lib/radio/theme.scss                    |  95 ++++++
 lib/ripple/Ripple.js                    | 387 ++++++++++++++++++++++++
 lib/ripple/_config.scss                 |   3 +
 lib/ripple/index.d.ts                   |  50 +++
 lib/ripple/index.js                     |  21 ++
 lib/ripple/theme.scss                   |  42 +++
 lib/slider/Slider.js                    | 384 +++++++++++++++++++++++
 lib/slider/__tests__/index.spec.js      | 202 +++++++++++++
 lib/slider/_config.scss                 |  13 +
 lib/slider/index.d.ts                   | 112 +++++++
 lib/slider/index.js                     |  26 ++
 lib/slider/theme.scss                   | 200 ++++++++++++
 lib/snackbar/Snackbar.js                | 154 ++++++++++
 lib/snackbar/_config.scss               |   9 +
 lib/snackbar/index.d.ts                 |  69 +++++
 lib/snackbar/index.js                   |  27 ++
 lib/snackbar/theme.scss                 |  49 +++
 lib/switch/Switch.js                    | 151 +++++++++
 lib/switch/Thumb.js                     |  37 +++
 lib/switch/_config.scss                 |  22 ++
 lib/switch/index.d.ts                   |  78 +++++
 lib/switch/index.js                     |  36 +++
 lib/switch/theme.scss                   | 123 ++++++++
 lib/table/Table.js                      | 203 +++++++++++++
 lib/table/TableHead.js                  |  75 +++++
 lib/table/TableRow.js                   | 172 +++++++++++
 lib/table/_config.scss                  |   5 +
 lib/table/index.d.ts                    |  71 +++++
 lib/table/index.js                      |  38 +++
 lib/table/theme.scss                    |  59 ++++
 lib/tabs/Tab.js                         | 121 ++++++++
 lib/tabs/TabContent.js                  |  72 +++++
 lib/tabs/Tabs.js                        | 268 ++++++++++++++++
 lib/tabs/__tests__/index.spec.js        | 176 +++++++++++
 lib/tabs/_config.scss                   |  20 ++
 lib/tabs/index.d.ts                     | 117 +++++++
 lib/tabs/index.js                       |  36 +++
 lib/tabs/theme.scss                     | 142 +++++++++
 lib/time_picker/Clock.js                | 181 +++++++++++
 lib/time_picker/ClockFace.js            | 122 ++++++++
 lib/time_picker/ClockHand.js            | 175 +++++++++++
 lib/time_picker/ClockHours.js           | 149 +++++++++
 lib/time_picker/ClockMinutes.js         | 105 +++++++
 lib/time_picker/TimePicker.js           | 196 ++++++++++++
 lib/time_picker/TimePickerDialog.js     | 202 +++++++++++++
 lib/time_picker/_config.scss            |  27 ++
 lib/time_picker/index.d.ts              | 137 +++++++++
 lib/time_picker/index.js                |  35 +++
 lib/time_picker/theme.scss              | 168 ++++++++++
 lib/tooltip/Tooltip.js                  | 293 ++++++++++++++++++
 lib/tooltip/_config.scss                |   8 +
 lib/tooltip/index.d.ts                  |  47 +++
 lib/tooltip/index.js                    |  24 ++
 lib/tooltip/theme.scss                  |  55 ++++
 lib/utils/events.js                     |  69 +++++
 lib/utils/index.js                      |  30 ++
 lib/utils/polyfills.js                  |  15 +
 lib/utils/prefixer.js                   |  47 +++
 lib/utils/react.js                      |   9 +
 lib/utils/testing.js                    |  38 +++
 lib/utils/time.js                       | 297 ++++++++++++++++++
 lib/utils/utils.js                      |  73 +++++
 210 files changed, 19226 insertions(+)
 create mode 100644 lib/_colors.scss
 create mode 100644 lib/_globals.scss
 create mode 100644 lib/_mixins.scss
 create mode 100644 lib/animations/index.js
 create mode 100644 lib/animations/slide-left.scss
 create mode 100644 lib/animations/slide-right.scss
 create mode 100644 lib/animations/zoom-in.scss
 create mode 100644 lib/animations/zoom-out.scss
 create mode 100644 lib/app_bar/AppBar.js
 create mode 100644 lib/app_bar/_config.scss
 create mode 100644 lib/app_bar/index.d.ts
 create mode 100644 lib/app_bar/index.js
 create mode 100644 lib/app_bar/theme.scss
 create mode 100644 lib/autocomplete/_config.scss
 create mode 100644 lib/autocomplete/index.js
 create mode 100644 lib/autocomplete/theme.scss
 create mode 100644 lib/avatar/Avatar.js
 create mode 100644 lib/avatar/_config.scss
 create mode 100644 lib/avatar/index.d.ts
 create mode 100644 lib/avatar/index.js
 create mode 100644 lib/avatar/theme.scss
 create mode 100644 lib/button/BrowseButton.js
 create mode 100644 lib/button/Button.js
 create mode 100644 lib/button/IconButton.js
 create mode 100644 lib/button/__test__/index.spec.js
 create mode 100644 lib/button/_config.scss
 create mode 100644 lib/button/_mixins.scss
 create mode 100644 lib/button/index.d.ts
 create mode 100644 lib/button/index.js
 create mode 100644 lib/button/theme.scss
 create mode 100644 lib/card/Card.js
 create mode 100644 lib/card/CardActions.js
 create mode 100644 lib/card/CardMedia.js
 create mode 100644 lib/card/CardText.js
 create mode 100644 lib/card/CardTitle.js
 create mode 100644 lib/card/_config.scss
 create mode 100644 lib/card/index.d.ts
 create mode 100644 lib/card/index.js
 create mode 100644 lib/card/theme.scss
 create mode 100644 lib/checkbox/Check.js
 create mode 100644 lib/checkbox/Checkbox.js
 create mode 100644 lib/checkbox/_config.scss
 create mode 100644 lib/checkbox/index.d.ts
 create mode 100644 lib/checkbox/index.js
 create mode 100644 lib/checkbox/theme.scss
 create mode 100644 lib/chip/Chip.js
 create mode 100644 lib/chip/_config.scss
 create mode 100644 lib/chip/index.d.ts
 create mode 100644 lib/chip/index.js
 create mode 100644 lib/chip/theme.scss
 create mode 100644 lib/commons.scss
 create mode 100644 lib/date_picker/Calendar.js
 create mode 100644 lib/date_picker/CalendarDay.js
 create mode 100644 lib/date_picker/CalendarMonth.js
 create mode 100644 lib/date_picker/DatePicker.js
 create mode 100644 lib/date_picker/DatePickerDialog.js
 create mode 100644 lib/date_picker/__test__/index.spec.js
 create mode 100644 lib/date_picker/_config.scss
 create mode 100644 lib/date_picker/index.d.ts
 create mode 100644 lib/date_picker/index.js
 create mode 100644 lib/date_picker/theme.scss
 create mode 100644 lib/dialog/Dialog.js
 create mode 100644 lib/dialog/_config.scss
 create mode 100644 lib/dialog/index.d.ts
 create mode 100644 lib/dialog/index.js
 create mode 100644 lib/dialog/theme.scss
 create mode 100644 lib/drawer/Drawer.js
 create mode 100644 lib/drawer/_config.scss
 create mode 100644 lib/drawer/index.d.ts
 create mode 100644 lib/drawer/index.js
 create mode 100644 lib/drawer/theme.scss
 create mode 100644 lib/dropdown/Dropdown.js
 create mode 100644 lib/dropdown/_config.scss
 create mode 100644 lib/dropdown/index.d.ts
 create mode 100644 lib/dropdown/index.js
 create mode 100644 lib/dropdown/theme.scss
 create mode 100644 lib/font_icon/FontIcon.js
 create mode 100644 lib/font_icon/index.d.ts
 create mode 100644 lib/font_icon/index.js
 create mode 100644 lib/form/Form.js
 create mode 100644 lib/form/index.js
 create mode 100644 lib/hoc/ActivableRenderer.js
 create mode 100644 lib/hoc/Portal.js
 create mode 100644 lib/identifiers.js
 create mode 100644 lib/index.d.ts
 create mode 100644 lib/index.js
 create mode 100644 lib/input/Input.js
 create mode 100644 lib/input/_config.scss
 create mode 100644 lib/input/index.d.ts
 create mode 100644 lib/input/index.js
 create mode 100644 lib/input/theme.scss
 create mode 100644 lib/layout/Layout.js
 create mode 100644 lib/layout/NavDrawer.js
 create mode 100644 lib/layout/Panel.js
 create mode 100644 lib/layout/Sidebar.js
 create mode 100644 lib/layout/_config.scss
 create mode 100644 lib/layout/_mixins.scss
 create mode 100644 lib/layout/index.d.ts
 create mode 100644 lib/layout/index.js
 create mode 100644 lib/layout/theme.scss
 create mode 100644 lib/link/Link.js
 create mode 100644 lib/link/index.d.ts
 create mode 100644 lib/link/index.js
 create mode 100644 lib/link/theme.scss
 create mode 100644 lib/list/List.js
 create mode 100644 lib/list/ListCheckbox.js
 create mode 100644 lib/list/ListDivider.js
 create mode 100644 lib/list/ListItem.js
 create mode 100644 lib/list/ListItemAction.js
 create mode 100644 lib/list/ListItemActions.js
 create mode 100644 lib/list/ListItemContent.js
 create mode 100644 lib/list/ListItemLayout.js
 create mode 100644 lib/list/ListItemText.js
 create mode 100644 lib/list/ListSubHeader.js
 create mode 100644 lib/list/_config.scss
 create mode 100644 lib/list/index.d.ts
 create mode 100644 lib/list/index.js
 create mode 100644 lib/list/theme.scss
 create mode 100644 lib/menu/IconMenu.js
 create mode 100644 lib/menu/Menu.js
 create mode 100644 lib/menu/MenuDivider.js
 create mode 100644 lib/menu/MenuItem.js
 create mode 100644 lib/menu/__test__/index.spec.js
 create mode 100644 lib/menu/_config.scss
 create mode 100644 lib/menu/index.d.ts
 create mode 100644 lib/menu/index.js
 create mode 100644 lib/menu/theme.scss
 create mode 100644 lib/navigation/Navigation.js
 create mode 100644 lib/navigation/_config.scss
 create mode 100644 lib/navigation/index.d.ts
 create mode 100644 lib/navigation/index.js
 create mode 100644 lib/navigation/theme.scss
 create mode 100644 lib/overlay/Overlay.js
 create mode 100644 lib/overlay/_config.scss
 create mode 100644 lib/overlay/index.js
 create mode 100644 lib/overlay/theme.scss
 create mode 100644 lib/progress_bar/ProgressBar.js
 create mode 100644 lib/progress_bar/__test__/index.spec.js
 create mode 100644 lib/progress_bar/_config.scss
 create mode 100644 lib/progress_bar/index.d.ts
 create mode 100644 lib/progress_bar/index.js
 create mode 100644 lib/progress_bar/theme.scss
 create mode 100644 lib/radio/Radio.js
 create mode 100644 lib/radio/RadioButton.js
 create mode 100644 lib/radio/RadioGroup.js
 create mode 100644 lib/radio/_config.scss
 create mode 100644 lib/radio/index.d.ts
 create mode 100644 lib/radio/index.js
 create mode 100644 lib/radio/theme.scss
 create mode 100644 lib/ripple/Ripple.js
 create mode 100644 lib/ripple/_config.scss
 create mode 100644 lib/ripple/index.d.ts
 create mode 100644 lib/ripple/index.js
 create mode 100644 lib/ripple/theme.scss
 create mode 100644 lib/slider/Slider.js
 create mode 100644 lib/slider/__tests__/index.spec.js
 create mode 100644 lib/slider/_config.scss
 create mode 100644 lib/slider/index.d.ts
 create mode 100644 lib/slider/index.js
 create mode 100644 lib/slider/theme.scss
 create mode 100644 lib/snackbar/Snackbar.js
 create mode 100644 lib/snackbar/_config.scss
 create mode 100644 lib/snackbar/index.d.ts
 create mode 100644 lib/snackbar/index.js
 create mode 100644 lib/snackbar/theme.scss
 create mode 100644 lib/switch/Switch.js
 create mode 100644 lib/switch/Thumb.js
 create mode 100644 lib/switch/_config.scss
 create mode 100644 lib/switch/index.d.ts
 create mode 100644 lib/switch/index.js
 create mode 100644 lib/switch/theme.scss
 create mode 100644 lib/table/Table.js
 create mode 100644 lib/table/TableHead.js
 create mode 100644 lib/table/TableRow.js
 create mode 100644 lib/table/_config.scss
 create mode 100644 lib/table/index.d.ts
 create mode 100644 lib/table/index.js
 create mode 100644 lib/table/theme.scss
 create mode 100644 lib/tabs/Tab.js
 create mode 100644 lib/tabs/TabContent.js
 create mode 100644 lib/tabs/Tabs.js
 create mode 100644 lib/tabs/__tests__/index.spec.js
 create mode 100644 lib/tabs/_config.scss
 create mode 100644 lib/tabs/index.d.ts
 create mode 100644 lib/tabs/index.js
 create mode 100644 lib/tabs/theme.scss
 create mode 100644 lib/time_picker/Clock.js
 create mode 100644 lib/time_picker/ClockFace.js
 create mode 100644 lib/time_picker/ClockHand.js
 create mode 100644 lib/time_picker/ClockHours.js
 create mode 100644 lib/time_picker/ClockMinutes.js
 create mode 100644 lib/time_picker/TimePicker.js
 create mode 100644 lib/time_picker/TimePickerDialog.js
 create mode 100644 lib/time_picker/_config.scss
 create mode 100644 lib/time_picker/index.d.ts
 create mode 100644 lib/time_picker/index.js
 create mode 100644 lib/time_picker/theme.scss
 create mode 100644 lib/tooltip/Tooltip.js
 create mode 100644 lib/tooltip/_config.scss
 create mode 100644 lib/tooltip/index.d.ts
 create mode 100644 lib/tooltip/index.js
 create mode 100644 lib/tooltip/theme.scss
 create mode 100644 lib/utils/events.js
 create mode 100644 lib/utils/index.js
 create mode 100644 lib/utils/polyfills.js
 create mode 100644 lib/utils/prefixer.js
 create mode 100644 lib/utils/react.js
 create mode 100644 lib/utils/testing.js
 create mode 100644 lib/utils/time.js
 create mode 100644 lib/utils/utils.js

diff --git a/lib/_colors.scss b/lib/_colors.scss
new file mode 100644
index 000000000..c2eb5099c
--- /dev/null
+++ b/lib/_colors.scss
@@ -0,0 +1,301 @@
+//-- Color definitions taken from Material Design Lite
+
+// Red
+$palette-red-50: rgb(255,235,238);
+$palette-red-100: rgb(255,205,210);
+$palette-red-200: rgb(239,154,154);
+$palette-red-300: rgb(229,115,115);
+$palette-red-400: rgb(239,83,80);
+$palette-red-500: rgb(244,67,54);
+$palette-red-600: rgb(229,57,53);
+$palette-red-700: rgb(211,47,47);
+$palette-red-800: rgb(198,40,40);
+$palette-red-900: rgb(183,28,28);
+$palette-red-a100: rgb(255,138,128);
+$palette-red-a200: rgb(255,82,82);
+$palette-red-a400: rgb(255,23,68);
+$palette-red-a700: rgb(213,0,0);
+
+// Pink
+$palette-pink-50: rgb(252,228,236);
+$palette-pink-100: rgb(248,187,208);
+$palette-pink-200: rgb(244,143,177);
+$palette-pink-300: rgb(240,98,146);
+$palette-pink-400: rgb(236,64,122);
+$palette-pink-500: rgb(233,30,99);
+$palette-pink-600: rgb(216,27,96);
+$palette-pink-700: rgb(194,24,91);
+$palette-pink-800: rgb(173,20,87);
+$palette-pink-900: rgb(136,14,79);
+$palette-pink-a100: rgb(255,128,171);
+$palette-pink-a200: rgb(255,64,129);
+$palette-pink-a400: rgb(245,0,87);
+$palette-pink-a700: rgb(197,17,98);
+
+// Purple
+$palette-purple-50: rgb(243,229,245);
+$palette-purple-100: rgb(225,190,231);
+$palette-purple-200: rgb(206,147,216);
+$palette-purple-300: rgb(186,104,200);
+$palette-purple-400: rgb(171,71,188);
+$palette-purple-500: rgb(156,39,176);
+$palette-purple-600: rgb(142,36,170);
+$palette-purple-700: rgb(123,31,162);
+$palette-purple-800: rgb(106,27,154);
+$palette-purple-900: rgb(74,20,140);
+$palette-purple-a100: rgb(234,128,252);
+$palette-purple-a200: rgb(224,64,251);
+$palette-purple-a400: rgb(213,0,249);
+$palette-purple-a700: rgb(170,0,255);
+
+//Deep Purple
+$palette-deep-purple-50: rgb(237,231,246);
+$palette-deep-purple-100: rgb(209,196,233);
+$palette-deep-purple-200: rgb(179,157,219);
+$palette-deep-purple-300: rgb(149,117,205);
+$palette-deep-purple-400: rgb(126,87,194);
+$palette-deep-purple-500: rgb(103,58,183);
+$palette-deep-purple-600: rgb(94,53,177);
+$palette-deep-purple-700: rgb(81,45,168);
+$palette-deep-purple-800: rgb(69,39,160);
+$palette-deep-purple-900: rgb(49,27,146);
+$palette-deep-purple-a100: rgb(179,136,255);
+$palette-deep-purple-a200: rgb(124,77,255);
+$palette-deep-purple-a400: rgb(101,31,255);
+$palette-deep-purple-a700: rgb(98,0,234);
+
+// Indigo
+$palette-indigo-50: rgb(232,234,246);
+$palette-indigo-100: rgb(197,202,233);
+$palette-indigo-200: rgb(159,168,218);
+$palette-indigo-300: rgb(121,134,203);
+$palette-indigo-400: rgb(92,107,192);
+$palette-indigo-500: rgb(63,81,181);
+$palette-indigo-600: rgb(57,73,171);
+$palette-indigo-700: rgb(48,63,159);
+$palette-indigo-800: rgb(40,53,147);
+$palette-indigo-900: rgb(26,35,126);
+$palette-indigo-a100: rgb(140,158,255);
+$palette-indigo-a200: rgb(83,109,254);
+$palette-indigo-a400: rgb(61,90,254);
+$palette-indigo-a700: rgb(48,79,254);
+
+// Blue
+$palette-blue-50: rgb(227,242,253);
+$palette-blue-100: rgb(187,222,251);
+$palette-blue-200: rgb(144,202,249);
+$palette-blue-300: rgb(100,181,246);
+$palette-blue-400: rgb(66,165,245);
+$palette-blue-500: rgb(33,150,243);
+$palette-blue-600: rgb(30,136,229);
+$palette-blue-700: rgb(25,118,210);
+$palette-blue-800: rgb(21,101,192);
+$palette-blue-900: rgb(13,71,161);
+$palette-blue-a100: rgb(130,177,255);
+$palette-blue-a200: rgb(68,138,255);
+$palette-blue-a400: rgb(41,121,255);
+$palette-blue-a700: rgb(41,98,255);
+
+// Light Blue
+$palette-light-blue-50: rgb(225,245,254);
+$palette-light-blue-100: rgb(179,229,252);
+$palette-light-blue-200: rgb(129,212,250);
+$palette-light-blue-300: rgb(79,195,247);
+$palette-light-blue-400: rgb(41,182,246);
+$palette-light-blue-500: rgb(3,169,244);
+$palette-light-blue-600: rgb(3,155,229);
+$palette-light-blue-700: rgb(2,136,209);
+$palette-light-blue-800: rgb(2,119,189);
+$palette-light-blue-900: rgb(1,87,155);
+$palette-light-blue-a100: rgb(128,216,255);
+$palette-light-blue-a200: rgb(64,196,255);
+$palette-light-blue-a400: rgb(0,176,255);
+$palette-light-blue-a700: rgb(0,145,234);
+
+// Cyan
+$palette-cyan-50: rgb(224,247,250);
+$palette-cyan-100: rgb(178,235,242);
+$palette-cyan-200: rgb(128,222,234);
+$palette-cyan-300: rgb(77,208,225);
+$palette-cyan-400: rgb(38,198,218);
+$palette-cyan-500: rgb(0,188,212);
+$palette-cyan-600: rgb(0,172,193);
+$palette-cyan-700: rgb(0,151,167);
+$palette-cyan-800: rgb(0,131,143);
+$palette-cyan-900: rgb(0,96,100);
+$palette-cyan-a100: rgb(132,255,255);
+$palette-cyan-a200: rgb(24,255,255);
+$palette-cyan-a400: rgb(0,229,255);
+$palette-cyan-a700: rgb(0,184,212);
+
+// Teal
+$palette-teal-50: rgb(224,242,241);
+$palette-teal-100: rgb(178,223,219);
+$palette-teal-200: rgb(128,203,196);
+$palette-teal-300: rgb(77,182,172);
+$palette-teal-400: rgb(38,166,154);
+$palette-teal-500: rgb(0,150,136);
+$palette-teal-600: rgb(0,137,123);
+$palette-teal-700: rgb(0,121,107);
+$palette-teal-800: rgb(0,105,92);
+$palette-teal-900: rgb(0,77,64);
+$palette-teal-a100: rgb(167,255,235);
+$palette-teal-a200: rgb(100,255,218);
+$palette-teal-a400: rgb(29,233,182);
+$palette-teal-a700: rgb(0,191,165);
+
+// Green
+$palette-green-50: rgb(232,245,233);
+$palette-green-100: rgb(200,230,201);
+$palette-green-200: rgb(165,214,167);
+$palette-green-300: rgb(129,199,132);
+$palette-green-400: rgb(102,187,106);
+$palette-green-500: rgb(76,175,80);
+$palette-green-600: rgb(67,160,71);
+$palette-green-700: rgb(56,142,60);
+$palette-green-800: rgb(46,125,50);
+$palette-green-900: rgb(27,94,32);
+$palette-green-a100: rgb(185,246,202);
+$palette-green-a200: rgb(105,240,174);
+$palette-green-a400: rgb(0,230,118);
+$palette-green-a700: rgb(0,200,83);
+
+// Green
+$palette-light-green-50: rgb(241,248,233);
+$palette-light-green-100: rgb(220,237,200);
+$palette-light-green-200: rgb(197,225,165);
+$palette-light-green-300: rgb(174,213,129);
+$palette-light-green-400: rgb(156,204,101);
+$palette-light-green-500: rgb(139,195,74);
+$palette-light-green-600: rgb(124,179,66);
+$palette-light-green-700: rgb(104,159,56);
+$palette-light-green-800: rgb(85,139,47);
+$palette-light-green-900: rgb(51,105,30);
+$palette-light-green-a100: rgb(204,255,144);
+$palette-light-green-a200: rgb(178,255,89);
+$palette-light-green-a400: rgb(118,255,3);
+$palette-light-green-a700: rgb(100,221,23);
+
+// Lime
+$palette-lime-50: rgb(249,251,231);
+$palette-lime-100: rgb(240,244,195);
+$palette-lime-200: rgb(230,238,156);
+$palette-lime-300: rgb(220,231,117);
+$palette-lime-400: rgb(212,225,87);
+$palette-lime-500: rgb(205,220,57);
+$palette-lime-600: rgb(192,202,51);
+$palette-lime-700: rgb(175,180,43);
+$palette-lime-800: rgb(158,157,36);
+$palette-lime-900: rgb(130,119,23);
+$palette-lime-a100: rgb(244,255,129);
+$palette-lime-a200: rgb(238,255,65);
+$palette-lime-a400: rgb(198,255,0);
+$palette-lime-a700: rgb(174,234,0);
+
+// Yellow
+$palette-yellow-50: rgb(255,253,231);
+$palette-yellow-100: rgb(255,249,196);
+$palette-yellow-200: rgb(255,245,157);
+$palette-yellow-300: rgb(255,241,118);
+$palette-yellow-400: rgb(255,238,88);
+$palette-yellow-500: rgb(255,235,59);
+$palette-yellow-600: rgb(253,216,53);
+$palette-yellow-700: rgb(251,192,45);
+$palette-yellow-800: rgb(249,168,37);
+$palette-yellow-900: rgb(245,127,23);
+$palette-yellow-a100: rgb(255,255,141);
+$palette-yellow-a200: rgb(255,255,0);
+$palette-yellow-a400: rgb(255,234,0);
+$palette-yellow-a700: rgb(255,214,0);
+
+// Amber
+$palette-amber-50: rgb(255,248,225);
+$palette-amber-100: rgb(255,236,179);
+$palette-amber-200: rgb(255,224,130);
+$palette-amber-300: rgb(255,213,79);
+$palette-amber-400: rgb(255,202,40);
+$palette-amber-500: rgb(255,193,7);
+$palette-amber-600: rgb(255,179,0);
+$palette-amber-700: rgb(255,160,0);
+$palette-amber-800: rgb(255,143,0);
+$palette-amber-900: rgb(255,111,0);
+$palette-amber-a100: rgb(255,229,127);
+$palette-amber-a200: rgb(255,215,64);
+$palette-amber-a400: rgb(255,196,0);
+$palette-amber-a700: rgb(255,171,0);
+
+// Orange
+$palette-orange-50: rgb(255,243,224);
+$palette-orange-100: rgb(255,224,178);
+$palette-orange-200: rgb(255,204,128);
+$palette-orange-300: rgb(255,183,77);
+$palette-orange-400: rgb(255,167,38);
+$palette-orange-500: rgb(255,152,0);
+$palette-orange-600: rgb(251,140,0);
+$palette-orange-700: rgb(245,124,0);
+$palette-orange-800: rgb(239,108,0);
+$palette-orange-900: rgb(230,81,0);
+$palette-orange-a100: rgb(255,209,128);
+$palette-orange-a200: rgb(255,171,64);
+$palette-orange-a400: rgb(255,145,0);
+$palette-orange-a700: rgb(255,109,0);
+
+// Deep Orange
+$palette-deep-orange-50: rgb(251,233,231);
+$palette-deep-orange-100: rgb(255,204,188);
+$palette-deep-orange-200: rgb(255,171,145);
+$palette-deep-orange-300: rgb(255,138,101);
+$palette-deep-orange-400: rgb(255,112,67);
+$palette-deep-orange-500: rgb(255,87,34);
+$palette-deep-orange-600: rgb(244,81,30);
+$palette-deep-orange-700: rgb(230,74,25);
+$palette-deep-orange-800: rgb(216,67,21);
+$palette-deep-orange-900: rgb(191,54,12);
+$palette-deep-orange-a100: rgb(255,158,128);
+$palette-deep-orange-a200: rgb(255,110,64);
+$palette-deep-orange-a400: rgb(255,61,0);
+$palette-deep-orange-a700: rgb(221,44,0);
+
+// Brown
+$palette-brown-50: rgb(239,235,233);
+$palette-brown-100: rgb(215,204,200);
+$palette-brown-200: rgb(188,170,164);
+$palette-brown-300: rgb(161,136,127);
+$palette-brown-400: rgb(141,110,99);
+$palette-brown-500: rgb(121,85,72);
+$palette-brown-600: rgb(109,76,65);
+$palette-brown-700: rgb(93,64,55);
+$palette-brown-800: rgb(78,52,46);
+$palette-brown-900: rgb(62,39,35);
+
+// Grey
+$palette-grey-50: rgb(250,250,250);
+$palette-grey-100: rgb(245,245,245);
+$palette-grey-200: rgb(238,238,238);
+$palette-grey-300: rgb(224,224,224);
+$palette-grey-400: rgb(189,189,189);
+$palette-grey-500: rgb(158,158,158);
+$palette-grey-600: rgb(117,117,117);
+$palette-grey-700: rgb(97,97,97);
+$palette-grey-800: rgb(66,66,66);
+$palette-grey-900: rgb(33,33,33);
+
+// Blue Grey
+$palette-blue-grey-50: rgb(236,239,241);
+$palette-blue-grey-100: rgb(207,216,220);
+$palette-blue-grey-200: rgb(176,190,197);
+$palette-blue-grey-300: rgb(144,164,174);
+$palette-blue-grey-400: rgb(120,144,156);
+$palette-blue-grey-500: rgb(96,125,139);
+$palette-blue-grey-600: rgb(84,110,122);
+$palette-blue-grey-700: rgb(69,90,100);
+$palette-blue-grey-800: rgb(55,71,79);
+$palette-blue-grey-900: rgb(38,50,56);
+
+$color-black: rgb(0,0,0);
+$color-white: rgb(255,255,255);
+
+//-- The two possible colors for overlayed text.
+$styleguide-generate-template: false !default;
+$color-dark-contrast: $color-white !default;
+$color-light-contrast: $color-black !default;
diff --git a/lib/_globals.scss b/lib/_globals.scss
new file mode 100644
index 000000000..73edd5f9e
--- /dev/null
+++ b/lib/_globals.scss
@@ -0,0 +1,81 @@
+//-- Color configuration
+$color-divider: $palette-grey-200 !default;
+$color-background: $color-white !default;
+$color-text: $palette-grey-900 !default;
+$color-text-secondary: $palette-grey-600 !default;
+
+$color-primary: $palette-indigo-500 !default;
+$color-primary-dark: $palette-indigo-700 !default;
+$color-accent: $palette-pink-a200 !default;
+$color-accent-dark: $palette-pink-700 !default;
+$color-primary-contrast: $color-dark-contrast !default;
+$color-accent-contrast: $color-dark-contrast !default;
+
+//-- Sizing
+$unit: 1rem !default;
+
+// -- Fonts
+$preferred-font: "Roboto", "Helvetica", "Arial", sans-serif !default;
+$font-size: 1.6 * $unit !default;
+$font-size-tiny: 1.2 * $unit !default;
+$font-size-small: 1.4 * $unit !default;
+$font-size-normal: $font-size !default;
+$font-size-big: 1.8 * $unit !default;
+$font-weight-thin: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-semi-bold: 500 !default;
+$font-weight-bold: 700 !default;
+
+//-- Shadows
+$shadow-key-umbra-opacity: 0.2 !default;
+$shadow-key-penumbra-opacity: 0.14 !default;
+$shadow-ambient-shadow-opacity: 0.12 !default;
+
+//-- Depth Shadows
+$zdepth-shadow-1: 0 1px 6px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.24);
+$zdepth-shadow-2: 0 3px 10px rgba(0,0,0,.16), 0 3px 10px rgba(0,0,0,.23);
+$zdepth-shadow-3: 0 10px 30px rgba(0,0,0,.19), 0 6px 10px rgba(0,0,0,.23);
+$zdepth-shadow-4: 0 14px 45px rgba(0,0,0,.25), 0 10px 18px rgba(0,0,0,.22);
+$zdepth-shadow-5: 0 19px 60px rgba(0,0,0,.3), 0 15px 20px rgba(0,0,0,.22);
+
+//-- Animation
+$animation-duration: .35s;
+$animation-delay: $animation-duration / 5;
+$animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
+$animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;
+$animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
+$animation-curve-default: $animation-curve-fast-out-slow-in !default;
+
+//-- Indexes
+$z-index-highest: 300 !default;
+$z-index-higher: 200 !default;
+$z-index-high: 100 !default;
+$z-index-normal: 1 !default;
+$z-index-low: -100 !default;
+$z-index-lower: -200 !default;
+
+//-- Breakpoints
+// height of app bar
+// https://material.google.com/layout/metrics-keylines.html#metrics-keylines-keylines-spacing
+$standard-increment-mobile: (5.6 * $unit) !default;
+$standard-increment-desktop: (6.4 * $unit) !default;
+
+// https://material.google.com/layout/metrics-keylines.html#metrics-keylines-baseline-grids
+$baseline-grid: (0.8 * $unit) !default;
+$layout-gutter-width-sm: ($baseline-grid * 2) !default;
+$layout-gutter-width: ($baseline-grid * 3) !default;
+
+// https://material.google.com/layout/responsive-ui.html#responsive-ui-breakpoints
+// 4 columns
+$layout-breakpoint-xxs: 480px !default;
+// 8 columns
+$layout-breakpoint-xs: 600px !default;
+// 12 columns
+$layout-breakpoint-sm-tablet: 720px !default;
+$layout-breakpoint-sm: 840px !default;
+$layout-breakpoint-md: 960px !default;
+$layout-breakpoint-lg-tablet: 1024px !default;
+$layout-breakpoint-lg: 1280px !default;
+$layout-breakpoint-xl: 1440px !default;
+$layout-breakpoint-xxl: 1600px !default;
+$layout-breakpoint-xxxl: 1920px !default;
diff --git a/lib/_mixins.scss b/lib/_mixins.scss
new file mode 100644
index 000000000..40490c702
--- /dev/null
+++ b/lib/_mixins.scss
@@ -0,0 +1,260 @@
+// scss-lint:disable VendorPrefix
+@mixin typo-preferred-font($use-preferred: true) {
+  @if $use-preferred {
+    font-family: $preferred-font;
+  }
+}
+
+@mixin typo-display-4($color-contrast: false, $use-preferred: true) {
+  @include typo-preferred-font($use-preferred);
+  font-size: $unit * 11.2;
+  font-weight: 300;
+  line-height: 1;
+  letter-spacing: -.04em;
+
+  @if $color-contrast {
+    opacity: .54;
+  }
+}
+
+@mixin typo-display-3($color-contrast: false, $use-preferred: true) {
+  @include typo-preferred-font($use-preferred);
+  font-size: $unit * 5.6;
+  font-weight: 400;
+  line-height: 1.35;
+  letter-spacing: -.02em;
+
+  @if $color-contrast {
+    opacity: .54;
+  }
+}
+
+@mixin typo-display-2($color-contrast: false, $use-preferred: true) {
+  @include typo-preferred-font($use-preferred);
+  font-size: $unit * 4.5;
+  font-weight: 400;
+  line-height: $unit * 4.8;
+
+  @if $color-contrast {
+    opacity: .54;
+  }
+}
+
+@mixin typo-display-1($color-contrast: false, $use-preferred: true) {
+  @include typo-preferred-font($use-preferred);
+  font-size: $unit * 3.4;
+  font-weight: 400;
+  line-height: $unit * 4;
+
+  @if $color-contrast {
+    opacity: .54;
+  }
+}
+
+@mixin typo-headline($color-contrast: false, $use-preferred: true) {
+  @include typo-preferred-font($use-preferred);
+  font-size: $unit * 2.4;
+  font-weight: 400;
+  line-height: $unit * 3.2;
+  -moz-osx-font-smoothing: grayscale;
+
+  @if $color-contrast {
+    opacity: .87;
+  }
+}
+
+@mixin typo-title($color-contrast: false, $use-preferred: true) {
+  @include typo-preferred-font($use-preferred);
+  font-size: $unit * 2;
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: .02em;
+
+  @if $color-contrast {
+    opacity: .87;
+  }
+}
+
+@mixin typo-subhead($color-contrast: false, $use-preferred: true) {
+  @include typo-preferred-font($use-preferred);
+  font-size: $unit * 1.6;
+  font-weight: 400;
+  line-height: $unit * 2.4;
+  letter-spacing: .04em;
+
+  @if $color-contrast {
+    opacity: .87;
+  }
+}
+
+@mixin typo-subhead-2($color-contrast: false, $use-preferred: true) {
+  @include typo-preferred-font($use-preferred);
+  font-size: $unit * 1.6;
+  font-weight: 400;
+  line-height: $unit * 2.8;
+  letter-spacing: .04em;
+
+  @if $color-contrast {
+    opacity: .87;
+  }
+}
+
+@mixin typo-body-2($color-contrast: false, $use-preferred: false) {
+  @include typo-preferred-font($use-preferred);
+  font-size: $unit * 1.4;
+  line-height: $unit * 2.4;
+  letter-spacing: 0;
+
+  @if $use-preferred {
+    font-weight: 500;
+  } @else {
+    font-weight: bold;
+  }
+
+  @if $color-contrast {
+    opacity: .87;
+  }
+}
+
+@mixin typo-body-1($color-contrast: false, $use-preferred: false) {
+  @include typo-preferred-font($use-preferred);
+  font-size: $unit * 1.4;
+  font-weight: 400;
+  line-height: $unit * 2.4;
+  letter-spacing: 0;
+
+  @if $color-contrast {
+    opacity: .87;
+  }
+}
+
+@mixin typo-caption($color-contrast: false, $use-preferred: false) {
+  @include typo-preferred-font($use-preferred);
+  font-size: $unit * 1.2;
+  font-weight: 400;
+  line-height: 1;
+  letter-spacing: 0;
+
+  @if $color-contrast {
+    opacity: .54;
+  }
+}
+
+@mixin typo-blockquote($color-contrast: false, $use-preferred: true) {
+  @include typo-preferred-font($use-preferred);
+  position: relative;
+  font-size: $unit * 2.4;
+  font-style: italic;
+  font-weight: 300;
+  line-height: 1.35;
+  letter-spacing: .08em;
+
+  &:before {
+    position: absolute;
+    left: -.5em;
+    content: "“";
+  }
+
+  &:after {
+    margin-left: -.05em;
+    content: "”";
+  }
+
+  @if $color-contrast {
+    opacity: .54;
+  }
+}
+
+@mixin typo-menu($color-contrast: false, $use-preferred: true) {
+  @include typo-preferred-font($use-preferred);
+  font-size: $unit * 1.4;
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: 0;
+
+  @if $color-contrast {
+    opacity: .87;
+  }
+}
+
+@mixin typo-button($color-contrast: false, $use-preferred: true) {
+  @include typo-preferred-font($use-preferred);
+  font-size: $unit * 1.4;
+  font-weight: 500;
+  line-height: 1;
+  text-transform: uppercase;
+  letter-spacing: 0;
+
+  @if $color-contrast {
+    opacity: .87;
+  }
+}
+
+//-- Shadows
+@mixin focus-shadow() {
+  box-shadow: 0 0 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .36);
+}
+
+@mixin shadow-2dp() {
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+  0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
+  0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
+}
+
+@mixin shadow-3dp() {
+  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+  0 3px 3px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
+  0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
+}
+
+@mixin shadow-4dp() {
+  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+  0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
+  0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
+}
+
+@mixin shadow-6dp() {
+  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+  0 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
+  0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
+}
+
+@mixin shadow-8dp() {
+  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+  0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
+  0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity);
+}
+
+@mixin shadow-16dp() {
+  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+  0 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
+  0 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity);
+}
+
+//-- Animations
+@mixin material-animation-fast-out-slow-in($duration: .2s) {
+  transition-timing-function: $animation-curve-fast-out-slow-in;
+  transition-duration: $duration;
+}
+
+@mixin material-animation-linear-out-slow-in($duration: .2s) {
+  transition-timing-function: $animation-curve-linear-out-slow-in;
+  transition-duration: $duration;
+}
+
+@mixin material-animation-fast-out-linear-in($duration: .2s) {
+  transition-timing-function: $animation-curve-fast-out-linear-in;
+  transition-duration: $duration;
+}
+
+@mixin material-animation-default($duration: .2s) {
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $duration;
+}
+
+@mixin no-webkit-scrollbar {
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+}
diff --git a/lib/animations/index.js b/lib/animations/index.js
new file mode 100644
index 000000000..787971bcc
--- /dev/null
+++ b/lib/animations/index.js
@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ZoomOut = exports.ZoomIn = exports.SlideRight = exports.SlideLeft = undefined;
+
+var _slideLeft = require('./slide-left.scss');
+
+var _slideLeft2 = _interopRequireDefault(_slideLeft);
+
+var _slideRight = require('./slide-right.scss');
+
+var _slideRight2 = _interopRequireDefault(_slideRight);
+
+var _zoomIn = require('./zoom-in.scss');
+
+var _zoomIn2 = _interopRequireDefault(_zoomIn);
+
+var _zoomOut = require('./zoom-out.scss');
+
+var _zoomOut2 = _interopRequireDefault(_zoomOut);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.SlideLeft = _slideLeft2.default;
+exports.SlideRight = _slideRight2.default;
+exports.ZoomIn = _zoomIn2.default;
+exports.ZoomOut = _zoomOut2.default;
\ No newline at end of file
diff --git a/lib/animations/slide-left.scss b/lib/animations/slide-left.scss
new file mode 100644
index 000000000..aba039958
--- /dev/null
+++ b/lib/animations/slide-left.scss
@@ -0,0 +1,26 @@
+.enter, .leave {
+  position: absolute;
+  transition-timing-function: ease-in-out;
+  transition-duration: .35s;
+  transition-property: transform, opacity;
+}
+
+.enter {
+  opacity: 0;
+  transform: translate3d(-100%, 0, 0);
+
+  &.enterActive {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.leave {
+  opacity: 1;
+  transform: translate3d(0, 0, 0);
+
+  &.leaveActive {
+    opacity: 0;
+    transform: translate3d(100%, 0, 0);
+  }
+}
diff --git a/lib/animations/slide-right.scss b/lib/animations/slide-right.scss
new file mode 100644
index 000000000..95d0e15d9
--- /dev/null
+++ b/lib/animations/slide-right.scss
@@ -0,0 +1,29 @@
+.enter, .leave {
+  position: absolute;
+}
+
+.enterActive, .leaveActive {
+  transition-timing-function: ease-in-out;
+  transition-duration: 350ms;
+  transition-property: transform, opacity;
+}
+
+.enter {
+  opacity: 0;
+  transform: translateX(100%);
+
+  &.enterActive {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.leave {
+  opacity: 1;
+  transform: translateX(0);
+
+  &.leaveActive {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+}
diff --git a/lib/animations/zoom-in.scss b/lib/animations/zoom-in.scss
new file mode 100644
index 000000000..d752e9401
--- /dev/null
+++ b/lib/animations/zoom-in.scss
@@ -0,0 +1,33 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+
+.enter, .leave {
+  position: absolute;
+}
+
+.enterActive, .leaveActive {
+  transition: transform, opacity;
+  transition-timing-function: $animation-curve-fast-out-slow-in;
+  transition-duration: 500ms;
+}
+
+.enter {
+  opacity: 0;
+  transform: scale(0.85);
+
+  &.enterActive {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.leave {
+  opacity: 1;
+  transform: scale(1);
+
+  &.leaveActive {
+    opacity: 0;
+    transform: scale(1.25);
+  }
+}
diff --git a/lib/animations/zoom-out.scss b/lib/animations/zoom-out.scss
new file mode 100644
index 000000000..cf1500fc1
--- /dev/null
+++ b/lib/animations/zoom-out.scss
@@ -0,0 +1,33 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+
+.enter, .leave {
+  position: absolute;
+}
+
+.enterActive, .leaveActive {
+  transition: transform, opacity;
+  transition-timing-function: $animation-curve-fast-out-slow-in;
+  transition-duration: 500ms;
+}
+
+.enter {
+  opacity: 0;
+  transform: scale(1.25);
+
+  &.enterActive {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.leave {
+  opacity: 1;
+  transform: scale(1);
+
+  &.leaveActive {
+    opacity: 0;
+    transform: scale(0.85);
+  }
+}
diff --git a/lib/app_bar/AppBar.js b/lib/app_bar/AppBar.js
new file mode 100644
index 000000000..852b9277c
--- /dev/null
+++ b/lib/app_bar/AppBar.js
@@ -0,0 +1,177 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AppBar = exports.appBarFactory = undefined;
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _IconButton = require('../button/IconButton.js');
+
+var _IconButton2 = _interopRequireDefault(_IconButton);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(IconButton) {
+  var AppBar = function (_React$Component) {
+    _inherits(AppBar, _React$Component);
+
+    function AppBar() {
+      var _ref;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, AppBar);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = AppBar.__proto__ || Object.getPrototypeOf(AppBar)).call.apply(_ref, [this].concat(args))), _this), _this.state = { hidden: false, height: 0 }, _this.initializeScroll = function () {
+        window.addEventListener('scroll', _this.handleScroll);
+
+        var _this$rootNode$getBou = _this.rootNode.getBoundingClientRect(),
+            height = _this$rootNode$getBou.height;
+
+        _this.curScroll = window.scrollY;
+        _this.setState({ height: height });
+      }, _this.endScroll = function () {
+        window.removeEventListener('scroll', _this.handleScroll);
+      }, _this.handleScroll = function () {
+        var scrollDiff = _this.curScroll - window.scrollY;
+        var hidden = scrollDiff < 0 && window.scrollY !== undefined && window.scrollY > _this.state.height;
+        _this.setState({ hidden: hidden });
+        _this.curScroll = window.scrollY;
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(AppBar, [{
+      key: 'componentDidMount',
+      value: function componentDidMount() {
+        if (this.props.scrollHide) {
+          this.initializeScroll();
+        }
+      }
+    }, {
+      key: 'componentWillReceiveProps',
+      value: function componentWillReceiveProps(nextProps) {
+        if (!this.props.scrollHide && nextProps.scrollHide) {
+          this.initializeScroll();
+        }
+
+        if (this.props.scrollHide && !nextProps.scrollHide) {
+          this.endScroll();
+        }
+      }
+    }, {
+      key: 'componentWillUnmount',
+      value: function componentWillUnmount() {
+        if (this.props.scrollHide) {
+          this.endScroll();
+        }
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _classnames,
+            _this2 = this;
+
+        var _props = this.props,
+            children = _props.children,
+            leftIcon = _props.leftIcon,
+            onLeftIconClick = _props.onLeftIconClick,
+            onRightIconClick = _props.onRightIconClick,
+            rightIcon = _props.rightIcon,
+            theme = _props.theme,
+            title = _props.title;
+
+        var className = (0, _classnames3.default)(theme.appBar, (_classnames = {}, _defineProperty(_classnames, theme.fixed, this.props.fixed), _defineProperty(_classnames, theme.flat, this.props.flat), _defineProperty(_classnames, theme.scrollHide, this.state.hidden), _classnames), this.props.className);
+
+        return _react2.default.createElement(
+          'header',
+          {
+            className: className,
+            'data-react-toolbox': 'app-bar',
+            ref: function ref(node) {
+              _this2.rootNode = node;
+            }
+          },
+          leftIcon && _react2.default.createElement(IconButton, {
+            inverse: true,
+            className: (0, _classnames3.default)(theme.leftIcon),
+            onClick: onLeftIconClick,
+            icon: leftIcon }),
+          title && _react2.default.createElement(
+            'h1',
+            { className: (0, _classnames3.default)(theme.title) },
+            title
+          ),
+          children,
+          rightIcon && _react2.default.createElement(IconButton, {
+            inverse: true,
+            className: (0, _classnames3.default)(theme.rightIcon),
+            onClick: onRightIconClick,
+            icon: rightIcon })
+        );
+      }
+    }]);
+
+    return AppBar;
+  }(_react2.default.Component);
+
+  AppBar.propTypes = {
+    children: _react.PropTypes.node,
+    className: _react.PropTypes.string,
+    fixed: _react.PropTypes.bool,
+    flat: _react.PropTypes.bool,
+    leftIcon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    onLeftIconClick: _react.PropTypes.func,
+    onRightIconClick: _react.PropTypes.func,
+    rightIcon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    scrollHide: _react.PropTypes.bool,
+    theme: _react.PropTypes.shape({
+      appBar: _react.PropTypes.string,
+      fixed: _react.PropTypes.string,
+      flat: _react.PropTypes.string,
+      leftIcon: _react.PropTypes.string,
+      rightIcon: _react.PropTypes.string,
+      title: _react.PropTypes.string
+    }),
+    title: _react.PropTypes.string
+  };
+  AppBar.defaultProps = {
+    className: '',
+    fixed: false,
+    flat: false,
+    scrollHide: false
+  };
+
+
+  return AppBar;
+};
+
+var AppBar = factory(_IconButton2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.APP_BAR)(AppBar);
+exports.appBarFactory = factory;
+exports.AppBar = AppBar;
\ No newline at end of file
diff --git a/lib/app_bar/_config.scss b/lib/app_bar/_config.scss
new file mode 100644
index 000000000..5c76b6189
--- /dev/null
+++ b/lib/app_bar/_config.scss
@@ -0,0 +1,8 @@
+$appbar-color: $color-primary-dark !default;
+$appbar-contrast: $color-primary-contrast !default;
+$appbar-title-total-distance: 8 * $unit !default;
+$appbar-height: 6.4 * $unit !default;
+$appbar-height-m-portrait: 5.6 * $unit !default;
+$appbar-height-m-landscape: 4.8 * $unit !default;
+$appbar-h-padding: 2.4 * $unit !default;
+$appbar-title-distance: $appbar-title-total-distance - $appbar-h-padding !default;
diff --git a/lib/app_bar/index.d.ts b/lib/app_bar/index.d.ts
new file mode 100644
index 000000000..fb868bb1a
--- /dev/null
+++ b/lib/app_bar/index.d.ts
@@ -0,0 +1,74 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface AppBarTheme {
+  /**
+   * Used for the component root element.
+   */
+  appBar?: string;
+  /**
+   * Added to the root element when the app bar is fixed.
+   */
+  fixed?: string;
+  /**
+   * Added to the root element when the app bar is flat.
+   */
+  flat?: string;
+  /**
+   * Used as the app bar title.
+   */
+  title ?: string;
+  /**
+   * Added to the left icon app bar element.
+   */
+  leftIcon?: string;
+  /**
+   * Added to the right icon app bar element.
+   */
+  rightIcon?: string;
+}
+
+interface AppBarProps extends ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Determine if the bar should have position fixed or relative.
+   * @default false
+   */
+  fixed?: boolean;
+  /**
+   * If true, the AppBar shows a shadow.
+   * @default false
+   */
+  flat?: boolean;
+  /**
+   * If it exists it is used as the AppBar title
+   */
+  title?: string;
+  /**
+   * If it exists it is used as the AppBar left icon
+   */
+  leftIcon?: string;
+  /**
+   * Called when the left icon is clicked
+   */
+  onLeftIconClick?: Function;
+  /**
+   * If it exists it is used as the AppBar right icon
+   */
+  rightIcon?: string;
+  /**
+   * Called when the righticon is clicked
+   */
+  onRightIconClick?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: AppBarTheme;
+}
+
+export class AppBar extends React.Component<AppBarProps, {}> { }
+
+export default AppBar;
diff --git a/lib/app_bar/index.js b/lib/app_bar/index.js
new file mode 100644
index 000000000..101ec9466
--- /dev/null
+++ b/lib/app_bar/index.js
@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AppBar = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _AppBar = require('./AppBar.js');
+
+var _button = require('../button');
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var AppBar = (0, _AppBar.appBarFactory)(_button.IconButton);
+var ThemedAppBar = (0, _reactCssThemr.themr)(_identifiers.APP_BAR, _theme2.default)(AppBar);
+
+exports.default = ThemedAppBar;
+exports.AppBar = ThemedAppBar;
\ No newline at end of file
diff --git a/lib/app_bar/theme.scss b/lib/app_bar/theme.scss
new file mode 100644
index 000000000..04584eb69
--- /dev/null
+++ b/lib/app_bar/theme.scss
@@ -0,0 +1,65 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+
+.appBar {
+  display: flex;
+  height: $appbar-height;
+  align-items: center;
+  padding: 0 $appbar-h-padding;
+  color: $appbar-contrast;
+  background: $appbar-color;
+
+  @media screen and (max-width: $layout-breakpoint-xxs) and (orientation: portrait) {
+    height: $appbar-height-m-portrait;
+  }
+
+  @media screen and (max-width: $layout-breakpoint-xs) and (orientation: landscape) {
+    height: $appbar-height-m-landscape;
+  }
+
+  &:not(.flat) {
+    z-index: $z-index-high;
+    box-shadow: 0 2px 5px rgba(0,0,0,.26);
+  }
+
+  &.fixed {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: $z-index-highest;
+  }
+
+  a {
+    color: $appbar-contrast;
+  }
+
+  .title {
+    flex-grow: 1;
+    font-size: 1.8 * $unit;
+    font-weight: bold;
+    > small {
+      font-size: 1.8 * $unit;
+      font-weight: normal;
+    }
+  }
+
+  .leftIcon {
+    margin-left: -1.2 * $unit;
+  }
+
+  .rightIcon {
+    margin-right: -1.2 * $unit;
+    margin-left: auto;
+  }
+
+  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition-duration: .5s;
+  transition-property: transform;
+
+  &.scrollHide {
+    transform: translateY(-100%);
+  }
+}
diff --git a/lib/autocomplete/_config.scss b/lib/autocomplete/_config.scss
new file mode 100644
index 000000000..e0280558e
--- /dev/null
+++ b/lib/autocomplete/_config.scss
@@ -0,0 +1,7 @@
+$autocomplete-color-primary-contrast: $color-primary-contrast !default;
+$autocomplete-color-primary: $color-primary !default;
+$autocomplete-overflow-max-height: 45vh !default;
+$autocomplete-suggestion-active-background: $palette-grey-200 !default;
+$autocomplete-suggestion-padding: $unit !default;
+$autocomplete-suggestions-background: $color-white !default;
+$autocomplete-value-margin: $unit * .25 $unit * .5 $unit * .25 0 !default;
diff --git a/lib/autocomplete/index.js b/lib/autocomplete/index.js
new file mode 100644
index 000000000..6720adeae
--- /dev/null
+++ b/lib/autocomplete/index.js
@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Autocomplete = undefined;
+
+var _identifiers = require('../identifiers.js');
+
+var _reactCssThemr = require('react-css-themr');
+
+var _Autocomplete = require('./Autocomplete.js');
+
+var _chip = require('../chip');
+
+var _chip2 = _interopRequireDefault(_chip);
+
+var _input = require('../input');
+
+var _input2 = _interopRequireDefault(_input);
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Autocomplete = (0, _Autocomplete.autocompleteFactory)(_chip2.default, _input2.default);
+var ThemedAutocomplete = (0, _reactCssThemr.themr)(_identifiers.AUTOCOMPLETE, _theme2.default)(Autocomplete);
+
+exports.default = ThemedAutocomplete;
+exports.Autocomplete = ThemedAutocomplete;
\ No newline at end of file
diff --git a/lib/autocomplete/theme.scss b/lib/autocomplete/theme.scss
new file mode 100644
index 000000000..f12136579
--- /dev/null
+++ b/lib/autocomplete/theme.scss
@@ -0,0 +1,76 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+@import "http://github.com/input/config";
+
+.autocomplete {
+  position: relative;
+  padding: $unit 0;
+  &.focus {
+    .suggestions {
+      max-height: $autocomplete-overflow-max-height;
+      visibility: visible;
+      box-shadow: $zdepth-shadow-1;
+    }
+  }
+}
+
+.values {
+  flex-direction: row;
+  flex-wrap: wrap;
+  padding-bottom: $unit / 2;
+}
+
+.value {
+  margin: $autocomplete-value-margin;
+}
+
+.suggestions {
+  @include no-webkit-scrollbar;
+  position: absolute;
+  z-index: $z-index-high;
+  width: 100%;
+  max-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  visibility: hidden;
+  background-color: $autocomplete-suggestions-background;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transition-property: max-height, box-shadow;
+  &:not(.up) {
+    margin-top: - $input-padding;
+  }
+  &.up {
+    bottom: 0;
+  }
+}
+
+.suggestion {
+  padding: $autocomplete-suggestion-padding;
+  font-size: $input-field-font-size;
+  cursor: pointer;
+  &.active {
+    background-color: $autocomplete-suggestion-active-background;
+  }
+}
+
+.input {
+  position: relative;
+  &:after {
+    $size: ($input-field-height / 7);
+    $border: $size solid transparent;
+    position: absolute;
+    top: 50%;
+    right: $input-chevron-offset;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+    content: "";
+    border-top: $size solid $input-text-bottom-border-color;
+    border-right: $border;
+    border-left: $border;
+    transition: transform $animation-duration $animation-curve-default;
+  }
+}
diff --git a/lib/avatar/Avatar.js b/lib/avatar/Avatar.js
new file mode 100644
index 000000000..368df2089
--- /dev/null
+++ b/lib/avatar/Avatar.js
@@ -0,0 +1,80 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Avatar = exports.avatarFactory = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _FontIcon = require('../font_icon/FontIcon.js');
+
+var _FontIcon2 = _interopRequireDefault(_FontIcon);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+var factory = function factory(FontIcon) {
+  var Avatar = function Avatar(_ref) {
+    var children = _ref.children,
+        className = _ref.className,
+        cover = _ref.cover,
+        icon = _ref.icon,
+        image = _ref.image,
+        theme = _ref.theme,
+        title = _ref.title,
+        other = _objectWithoutProperties(_ref, ['children', 'className', 'cover', 'icon', 'image', 'theme', 'title']);
+
+    return _react2.default.createElement(
+      'div',
+      _extends({ 'data-react-toolbox': 'avatar', className: (0, _classnames2.default)(theme.avatar, className) }, other),
+      children,
+      cover && typeof image === 'string' && _react2.default.createElement('span', { alt: title, className: theme.image, style: { backgroundImage: 'url('http://github.com/+%20image%20+')' } }),
+      !cover && (typeof image === 'string' ? _react2.default.createElement('img', { alt: title, className: theme.image, src: image, title: title }) : image),
+      typeof icon === 'string' ? _react2.default.createElement(FontIcon, { className: theme.letter, value: icon }) : icon,
+      title ? _react2.default.createElement(
+        'span',
+        { className: theme.letter },
+        title[0]
+      ) : null
+    );
+  };
+
+  Avatar.propTypes = {
+    children: _react.PropTypes.node,
+    className: _react.PropTypes.string,
+    cover: _react.PropTypes.bool,
+    icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    image: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    theme: _react.PropTypes.shape({
+      avatar: _react.PropTypes.string,
+      image: _react.PropTypes.string,
+      letter: _react.PropTypes.string
+    }),
+    title: _react.PropTypes.string
+  };
+
+  Avatar.defaultProps = {
+    cover: false
+  };
+
+  return Avatar;
+};
+
+var Avatar = factory(_FontIcon2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.AVATAR)(Avatar);
+exports.avatarFactory = factory;
+exports.Avatar = Avatar;
\ No newline at end of file
diff --git a/lib/avatar/_config.scss b/lib/avatar/_config.scss
new file mode 100644
index 000000000..a2922fb60
--- /dev/null
+++ b/lib/avatar/_config.scss
@@ -0,0 +1,4 @@
+$avatar-color: $color-white !default;
+$avatar-background: $palette-grey-500 !default;
+$avatar-size: 4 * $unit !default;
+$avatar-font-size: 2.4 * $unit !default;
diff --git a/lib/avatar/index.d.ts b/lib/avatar/index.d.ts
new file mode 100644
index 000000000..c2ddc6950
--- /dev/null
+++ b/lib/avatar/index.d.ts
@@ -0,0 +1,48 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface AvatarTheme {
+  /**
+   * Used for the root class of the element.
+   */
+  avatar?: string;
+  /**
+   * Added to the root element when the component has image.
+   */
+  image?: string;
+  /**
+   * Used for the root element if the component shows the letter.
+   */
+  letter?: string;
+}
+
+interface AvatarProps extends ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Set to true if your image is not squared so it will be used as a cover for the element.
+   */
+  cover?: boolean;
+  /**
+   * A key to identify an Icon from Material Design Icons or a custom Icon Element.
+   */
+  icon?: React.ReactNode | string;
+  /**
+   * An image source or an image element.
+   */
+  image?: React.ReactNode | string;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: AvatarTheme;
+  /**
+   * A title for the image. If no image is provided, the first letter will be displayed as the avatar.
+   */
+  title?: string;
+}
+
+export class Avatar extends React.Component<AvatarProps, {}> { }
+
+export default Avatar;
diff --git a/lib/avatar/index.js b/lib/avatar/index.js
new file mode 100644
index 000000000..247561ab6
--- /dev/null
+++ b/lib/avatar/index.js
@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Avatar = undefined;
+
+var _identifiers = require('../identifiers.js');
+
+var _reactCssThemr = require('react-css-themr');
+
+var _Avatar = require('./Avatar.js');
+
+var _FontIcon = require('../font_icon/FontIcon.js');
+
+var _FontIcon2 = _interopRequireDefault(_FontIcon);
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Avatar = (0, _Avatar.avatarFactory)(_FontIcon2.default);
+var ThemedAvatar = (0, _reactCssThemr.themr)(_identifiers.AVATAR, _theme2.default)(Avatar);
+
+exports.default = ThemedAvatar;
+exports.Avatar = ThemedAvatar;
\ No newline at end of file
diff --git a/lib/avatar/theme.scss b/lib/avatar/theme.scss
new file mode 100644
index 000000000..9514782ae
--- /dev/null
+++ b/lib/avatar/theme.scss
@@ -0,0 +1,44 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+
+.avatar {
+  position: relative;
+  display: inline-block;
+  width: $avatar-size;
+  height: $avatar-size;
+  overflow: hidden;
+  font-size: $avatar-font-size;
+  color: $avatar-color;
+  text-align: center;
+  vertical-align: middle;
+  background-color: $avatar-background;
+  border-radius: 50%;
+  > svg {
+    width: 1em;
+    height: $avatar-size;
+    fill: currentColor;
+  }
+  > img {
+    max-width: 100%;
+    height: auto;
+  }
+}
+
+.image {
+  position: absolute;
+  display: block;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  background-position: center;
+  background-size: cover;
+  border-radius: 50%;
+}
+
+.letter {
+  display: block;
+  width: 100%;
+  line-height: $avatar-size;
+}
diff --git a/lib/button/BrowseButton.js b/lib/button/BrowseButton.js
new file mode 100644
index 000000000..d88381401
--- /dev/null
+++ b/lib/button/BrowseButton.js
@@ -0,0 +1,168 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BrowseButton = exports.browseButtonFactory = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _FontIcon = require('../font_icon/FontIcon.js');
+
+var _FontIcon2 = _interopRequireDefault(_FontIcon);
+
+var _Ripple = require('../ripple/Ripple.js');
+
+var _Ripple2 = _interopRequireDefault(_Ripple);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(ripple, FontIcon) {
+  var SimpleBrowseButton = function (_Component) {
+    _inherits(SimpleBrowseButton, _Component);
+
+    function SimpleBrowseButton() {
+      var _ref;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, SimpleBrowseButton);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = SimpleBrowseButton.__proto__ || Object.getPrototypeOf(SimpleBrowseButton)).call.apply(_ref, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
+        _this.refs.label.blur();
+        if (_this.props.onMouseUp) _this.props.onMouseUp(event);
+      }, _this.handleMouseLeave = function (event) {
+        _this.refs.label.blur();
+        if (_this.props.onMouseLeave) _this.props.onMouseLeave(event);
+      }, _this.handleFileChange = function (event) {
+        if (_this.props.onChange) _this.props.onChange(event);
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(SimpleBrowseButton, [{
+      key: 'render',
+      value: function render() {
+        var _classnames;
+
+        var _props = this.props,
+            accent = _props.accent,
+            children = _props.children,
+            className = _props.className,
+            flat = _props.flat,
+            floating = _props.floating,
+            icon = _props.icon,
+            inverse = _props.inverse,
+            label = _props.label,
+            mini = _props.mini,
+            neutral = _props.neutral,
+            primary = _props.primary,
+            theme = _props.theme,
+            raised = _props.raised,
+            others = _objectWithoutProperties(_props, ['accent', 'children', 'className', 'flat', 'floating', 'icon', 'inverse', 'label', 'mini', 'neutral', 'primary', 'theme', 'raised']);
+
+        var element = 'label';
+        var level = primary ? 'primary' : accent ? 'accent' : 'neutral';
+        var shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : 'flat';
+
+        var classes = (0, _classnames3.default)(theme.button, [theme[shape]], (_classnames = {}, _defineProperty(_classnames, theme[level], neutral), _defineProperty(_classnames, theme.mini, mini), _defineProperty(_classnames, theme.inverse, inverse), _classnames), className);
+
+        var props = _extends({}, others, {
+          ref: 'label',
+          className: classes,
+          disabled: this.props.disabled,
+          onMouseUp: this.handleMouseUp,
+          onMouseLeave: this.handleMouseLeave,
+          'data-react-toolbox': 'label'
+        });
+
+        return _react2.default.createElement(element, props, icon ? _react2.default.createElement(FontIcon, { className: theme.icon, value: icon }) : null, _react2.default.createElement(
+          'span',
+          null,
+          label
+        ), _react2.default.createElement('input', { className: classes, type: 'file', onChange: this.handleFileChange }), children);
+      }
+    }]);
+
+    return SimpleBrowseButton;
+  }(_react.Component);
+
+  SimpleBrowseButton.propTypes = {
+    accent: _react.PropTypes.bool,
+    children: _react.PropTypes.node,
+    className: _react.PropTypes.string,
+    disabled: _react.PropTypes.bool,
+    flat: _react.PropTypes.bool,
+    floating: _react.PropTypes.bool,
+    icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    inverse: _react.PropTypes.bool,
+    label: _react.PropTypes.string,
+    mini: _react.PropTypes.bool,
+    neutral: _react.PropTypes.bool,
+    onChange: _react.PropTypes.func,
+    onMouseLeave: _react.PropTypes.func,
+    onMouseUp: _react.PropTypes.func,
+    primary: _react.PropTypes.bool,
+    raised: _react.PropTypes.bool,
+    theme: _react.PropTypes.shape({
+      accent: _react.PropTypes.string,
+      button: _react.PropTypes.string,
+      flat: _react.PropTypes.string,
+      floating: _react.PropTypes.string,
+      icon: _react.PropTypes.string,
+      inverse: _react.PropTypes.string,
+      mini: _react.PropTypes.string,
+      neutral: _react.PropTypes.string,
+      primary: _react.PropTypes.string,
+      raised: _react.PropTypes.string,
+      rippleWrapper: _react.PropTypes.string,
+      toggle: _react.PropTypes.string
+    }),
+    type: _react.PropTypes.string
+  };
+  SimpleBrowseButton.defaultProps = {
+    accent: false,
+    className: '',
+    flat: false,
+    floating: false,
+    mini: false,
+    neutral: true,
+    primary: false,
+    raised: false
+  };
+
+
+  return ripple(SimpleBrowseButton);
+};
+
+var BrowseButton = factory((0, _Ripple2.default)({ centered: false }), _FontIcon2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.BUTTON)(BrowseButton);
+exports.browseButtonFactory = factory;
+exports.BrowseButton = BrowseButton;
\ No newline at end of file
diff --git a/lib/button/Button.js b/lib/button/Button.js
new file mode 100644
index 000000000..136767ed8
--- /dev/null
+++ b/lib/button/Button.js
@@ -0,0 +1,167 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Button = exports.buttonFactory = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _FontIcon = require('../font_icon/FontIcon.js');
+
+var _FontIcon2 = _interopRequireDefault(_FontIcon);
+
+var _Ripple = require('../ripple/Ripple.js');
+
+var _Ripple2 = _interopRequireDefault(_Ripple);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(ripple, FontIcon) {
+  var Button = function (_Component) {
+    _inherits(Button, _Component);
+
+    function Button() {
+      var _ref;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, Button);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Button.__proto__ || Object.getPrototypeOf(Button)).call.apply(_ref, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
+        _this.refs.button.blur();
+        if (_this.props.onMouseUp) _this.props.onMouseUp(event);
+      }, _this.handleMouseLeave = function (event) {
+        _this.refs.button.blur();
+        if (_this.props.onMouseLeave) _this.props.onMouseLeave(event);
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(Button, [{
+      key: 'render',
+      value: function render() {
+        var _classnames;
+
+        var _props = this.props,
+            accent = _props.accent,
+            children = _props.children,
+            className = _props.className,
+            flat = _props.flat,
+            floating = _props.floating,
+            href = _props.href,
+            icon = _props.icon,
+            inverse = _props.inverse,
+            label = _props.label,
+            mini = _props.mini,
+            neutral = _props.neutral,
+            primary = _props.primary,
+            theme = _props.theme,
+            type = _props.type,
+            raised = _props.raised,
+            others = _objectWithoutProperties(_props, ['accent', 'children', 'className', 'flat', 'floating', 'href', 'icon', 'inverse', 'label', 'mini', 'neutral', 'primary', 'theme', 'type', 'raised']);
+
+        var element = href ? 'a' : 'button';
+        var level = primary ? 'primary' : accent ? 'accent' : 'neutral';
+        var shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : 'flat';
+
+        var classes = (0, _classnames3.default)(theme.button, [theme[shape]], (_classnames = {}, _defineProperty(_classnames, theme[level], neutral), _defineProperty(_classnames, theme.mini, mini), _defineProperty(_classnames, theme.inverse, inverse), _classnames), className);
+
+        var props = _extends({}, others, {
+          href: href,
+          ref: 'button',
+          className: classes,
+          disabled: this.props.disabled,
+          onMouseUp: this.handleMouseUp,
+          onMouseLeave: this.handleMouseLeave,
+          type: !href ? type : null,
+          'data-react-toolbox': 'button'
+        });
+
+        return _react2.default.createElement(element, props, icon ? _react2.default.createElement(FontIcon, { className: theme.icon, value: icon }) : null, label, children);
+      }
+    }]);
+
+    return Button;
+  }(_react.Component);
+
+  Button.propTypes = {
+    accent: _react.PropTypes.bool,
+    children: _react.PropTypes.node,
+    className: _react.PropTypes.string,
+    disabled: _react.PropTypes.bool,
+    flat: _react.PropTypes.bool,
+    floating: _react.PropTypes.bool,
+    href: _react.PropTypes.string,
+    icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    inverse: _react.PropTypes.bool,
+    label: _react.PropTypes.string,
+    mini: _react.PropTypes.bool,
+    neutral: _react.PropTypes.bool,
+    onMouseLeave: _react.PropTypes.func,
+    onMouseUp: _react.PropTypes.func,
+    primary: _react.PropTypes.bool,
+    raised: _react.PropTypes.bool,
+    theme: _react.PropTypes.shape({
+      accent: _react.PropTypes.string,
+      button: _react.PropTypes.string,
+      flat: _react.PropTypes.string,
+      floating: _react.PropTypes.string,
+      icon: _react.PropTypes.string,
+      inverse: _react.PropTypes.string,
+      mini: _react.PropTypes.string,
+      neutral: _react.PropTypes.string,
+      primary: _react.PropTypes.string,
+      raised: _react.PropTypes.string,
+      rippleWrapper: _react.PropTypes.string,
+      toggle: _react.PropTypes.string
+    }),
+    type: _react.PropTypes.string
+  };
+  Button.defaultProps = {
+    accent: false,
+    className: '',
+    flat: false,
+    floating: false,
+    mini: false,
+    neutral: true,
+    primary: false,
+    raised: false,
+    type: 'button'
+  };
+
+
+  return ripple(Button);
+};
+
+var Button = factory((0, _Ripple2.default)({ centered: false }), _FontIcon2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.BUTTON)(Button);
+exports.buttonFactory = factory;
+exports.Button = Button;
\ No newline at end of file
diff --git a/lib/button/IconButton.js b/lib/button/IconButton.js
new file mode 100644
index 000000000..c2dfdb8ab
--- /dev/null
+++ b/lib/button/IconButton.js
@@ -0,0 +1,138 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconButton = exports.iconButtonFactory = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _FontIcon = require('../font_icon/FontIcon.js');
+
+var _FontIcon2 = _interopRequireDefault(_FontIcon);
+
+var _Ripple = require('../ripple/Ripple.js');
+
+var _Ripple2 = _interopRequireDefault(_Ripple);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(ripple, FontIcon) {
+  var IconButton = function (_Component) {
+    _inherits(IconButton, _Component);
+
+    function IconButton() {
+      var _ref;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, IconButton);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = IconButton.__proto__ || Object.getPrototypeOf(IconButton)).call.apply(_ref, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
+        _this.refs.button.blur();
+        if (_this.props.onMouseUp) _this.props.onMouseUp(event);
+      }, _this.handleMouseLeave = function (event) {
+        _this.refs.button.blur();
+        if (_this.props.onMouseLeave) _this.props.onMouseLeave(event);
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(IconButton, [{
+      key: 'render',
+      value: function render() {
+        var _classnames;
+
+        var _props = this.props,
+            accent = _props.accent,
+            children = _props.children,
+            className = _props.className,
+            href = _props.href,
+            icon = _props.icon,
+            inverse = _props.inverse,
+            neutral = _props.neutral,
+            primary = _props.primary,
+            theme = _props.theme,
+            type = _props.type,
+            others = _objectWithoutProperties(_props, ['accent', 'children', 'className', 'href', 'icon', 'inverse', 'neutral', 'primary', 'theme', 'type']);
+
+        var element = href ? 'a' : 'button';
+        var level = primary ? 'primary' : accent ? 'accent' : 'neutral';
+        var classes = (0, _classnames3.default)([theme.toggle], (_classnames = {}, _defineProperty(_classnames, theme[level], neutral), _defineProperty(_classnames, theme.inverse, inverse), _classnames), className);
+
+        var props = _extends({}, others, {
+          href: href,
+          ref: 'button',
+          className: classes,
+          disabled: this.props.disabled,
+          onMouseUp: this.handleMouseUp,
+          onMouseLeave: this.handleMouseLeave,
+          type: !href ? type : null,
+          'data-react-toolbox': 'button'
+        });
+
+        return _react2.default.createElement(element, props, icon ? typeof icon === 'string' ? _react2.default.createElement(FontIcon, { className: theme.icon, value: icon }) : icon : null, children);
+      }
+    }]);
+
+    return IconButton;
+  }(_react.Component);
+
+  IconButton.propTypes = {
+    accent: _react.PropTypes.bool,
+    children: _react.PropTypes.node,
+    className: _react.PropTypes.string,
+    disabled: _react.PropTypes.bool,
+    href: _react.PropTypes.string,
+    icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    inverse: _react.PropTypes.bool,
+    neutral: _react.PropTypes.bool,
+    onMouseLeave: _react.PropTypes.func,
+    onMouseUp: _react.PropTypes.func,
+    primary: _react.PropTypes.bool,
+    theme: _react.PropTypes.object,
+    type: _react.PropTypes.string
+  };
+  IconButton.defaultProps = {
+    accent: false,
+    className: '',
+    neutral: true,
+    primary: false,
+    type: 'button'
+  };
+
+
+  return ripple(IconButton);
+};
+
+var IconButton = factory((0, _Ripple2.default)({ centered: true }), _FontIcon2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.BUTTON)(IconButton);
+exports.iconButtonFactory = factory;
+exports.IconButton = IconButton;
\ No newline at end of file
diff --git a/lib/button/__test__/index.spec.js b/lib/button/__test__/index.spec.js
new file mode 100644
index 000000000..67d402c74
--- /dev/null
+++ b/lib/button/__test__/index.spec.js
@@ -0,0 +1,66 @@
+'use strict';
+
+var _expect = require('expect');
+
+var _expect2 = _interopRequireDefault(_expect);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactDom = require('react-dom');
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
+var _reactAddonsTestUtils = require('react-addons-test-utils');
+
+var _reactAddonsTestUtils2 = _interopRequireDefault(_reactAddonsTestUtils);
+
+var _theme = require('../theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+var _Button = require('../Button');
+
+var _Button2 = _interopRequireDefault(_Button);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var getRenderedClassName = function getRenderedClassName(tree, Component) {
+  var rendered = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, Component);
+  return _reactDom2.default.findDOMNode(rendered).getAttribute('class');
+};
+
+describe('Button', function () {
+  describe('#render', function () {
+    it('uses flat and neutral styles by default', function () {
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Button2.default, { theme: _theme2.default }));
+      var className = getRenderedClassName(tree, _Button.Button);
+      (0, _expect2.default)(className).toContain(_theme2.default.flat);
+      (0, _expect2.default)(className).toContain(_theme2.default.neutral);
+    });
+
+    it('renders accent button with accent style', function () {
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Button2.default, { accent: true, theme: _theme2.default }));
+      var className = getRenderedClassName(tree, _Button.Button);
+      (0, _expect2.default)(className).toContain(_theme2.default.flat);
+      (0, _expect2.default)(className).toContain(_theme2.default.accent);
+    });
+
+    it('renders mini button with mini style', function () {
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Button2.default, { floating: true, mini: true, theme: _theme2.default }));
+      var className = getRenderedClassName(tree, _Button.Button);
+      (0, _expect2.default)(className).toContain(_theme2.default.floating);
+      (0, _expect2.default)(className).toContain(_theme2.default.neutral);
+      (0, _expect2.default)(className).toContain(_theme2.default.mini);
+    });
+
+    it('renders mini accented button with both styles', function () {
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Button2.default, { accent: true, mini: true, theme: _theme2.default }));
+      var className = getRenderedClassName(tree, _Button.Button);
+      (0, _expect2.default)(className).toContain(_theme2.default.flat);
+      (0, _expect2.default)(className).toContain(_theme2.default.accent);
+      (0, _expect2.default)(className).toContain(_theme2.default.mini);
+    });
+  });
+});
\ No newline at end of file
diff --git a/lib/button/_config.scss b/lib/button/_config.scss
new file mode 100644
index 000000000..4a37d8b0c
--- /dev/null
+++ b/lib/button/_config.scss
@@ -0,0 +1,21 @@
+$button-neutral-color: $color-white !default;
+$button-neutral-color-contrast: $palette-grey-900 !default;
+$button-neutral-color-hover: rgba($palette-grey-900, .2) !default;
+$button-primary-color-contrast: $color-primary-contrast !default;
+$button-primary-color-hover: rgba($color-primary, .2) !default;
+$button-primary-color: $color-primary !default;
+$button-accent-color-contrast: $color-primary-contrast !default;
+$button-accent-color-hover: rgba($color-accent, .2) !default;
+$button-accent-color: $color-accent !default;
+$button-disabled-text-color: rgba($color-black, 0.26) !default;
+$button-disabled-background-color: rgba($color-black, 0.12) !default;
+$button-border-radius: 0.2 * $unit !default;
+$button-floating-font-size: $unit * 2.4 !default;
+$button-floating-height: $unit * 5.6 !default;
+$button-floating-mini-height: $unit * 4 !default;
+$button-floating-mini-font-size: $button-floating-mini-height / 2.25 !default;
+$button-height: $unit * 3.6 !default;
+$button-squared-icon-margin: $unit * .6 !default;
+$button-squared-min-width: 9 * $unit !default;
+$button-squared-padding: 0 $unit * 1.2 !default;
+$button-toggle-font-size: $unit * 2 !default;
diff --git a/lib/button/_mixins.scss b/lib/button/_mixins.scss
new file mode 100644
index 000000000..305be037a
--- /dev/null
+++ b/lib/button/_mixins.scss
@@ -0,0 +1,17 @@
+@mixin btn-colors($name, $color, $background, $hover) {
+  .#{$name}:not([disabled]) {
+    &.raised, &.floating {
+      color: $color;
+      background: $background;
+    }
+    &.flat, &.toggle {
+      color: $background;
+      &:focus:not(:active) {
+        background: $hover;
+      }
+    }
+    &.flat:hover {
+      background: $hover;
+    }
+  }
+}
diff --git a/lib/button/index.d.ts b/lib/button/index.d.ts
new file mode 100644
index 000000000..e713f70aa
--- /dev/null
+++ b/lib/button/index.d.ts
@@ -0,0 +1,337 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface ButtonTheme {
+  /**
+   * Used for the root in case button is accent.
+   */
+  accent?: string;
+  /**
+   * Used for the root element in any button.
+   */
+  button?: string;
+  /**
+   * Used when the button is flat for the root element.
+   */
+  flat?: string;
+  /**
+   * Used when the button is floating for the root element.
+   */
+  floating?: string;
+  /**
+   * For the icon inside a button.
+   */
+  icon?: string;
+  /**
+   * Used when colors are inverted.
+   */
+  inverse?: string;
+  /**
+   * Used for mini floating buttons.
+   */
+  mini?: string;
+  /**
+   * Used for neutral colored buttons.
+   */
+  neutral?: string;
+  /**
+   * Used for primary buttons when button is primary.
+   */
+  primary?: string;
+  /**
+   * Used when the button is raised for root element.
+   */
+  raised?: string;
+  /**
+   * Used for the ripple element.
+   */
+  rippleWrapper?: string;
+  /**
+   * Used for toggle buttons in the root element.
+   */
+  toggle?: string;
+}
+
+interface ButtonProps extends ReactToolbox.Props {
+  /**
+   * Indicates if the button should have accent color.
+   * @default false
+   */
+  accent?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If true, the button will have a flat look.
+   * @default false
+   */
+  flat?: boolean;
+  /**
+   * If true, the button will have a floating look.
+   * @default false
+   */
+  floating?: boolean;
+  /**
+   * Creates a link for the button.
+   */
+  href?: string;
+  /**
+   * Value of the icon (See Font Icon Component).
+   */
+  icon?: React.ReactNode | string;
+  /**
+   * If true, the neutral colors are inverted. Useful to put a button over a dark background.
+   */
+  inverse?: boolean;
+  /**
+   * The text string to use for the name of the button.
+   */
+  label?: string;
+  /**
+   * To be used with floating button. If true, the button will be smaller.
+   * @default false
+   */
+  mini?: boolean;
+  /**
+   * Set it to false if you don't want the neutral styles to be included.
+   * @default true
+   */
+  neutral?: boolean;
+  /**
+   * Indicates if the button should have primary color.
+   * @default false
+   */
+  primary?: boolean;
+  /**
+   * If true, the button will have a raised look.
+   * @default false
+   */
+  raised?: boolean;
+  /**
+   * If true, component will have a ripple effect on click.
+   * @default true
+   */
+  ripple?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ButtonTheme;
+}
+
+export class Button extends React.Component<ButtonProps, {}> { }
+
+export interface IconButtonTheme {
+  /**
+   * Used for the root in case button is accent.
+   */
+  accent?: string;
+  /**
+   * Used for the root element in any button.
+   */
+  button?: string;
+  /**
+   * For the icon inside a button.
+   */
+  icon?: string;
+  /**
+   * Used when colors are inverted.
+   */
+  inverse?: string;
+  /**
+   * Used for neutral colored buttons.
+   */
+  neutral?: string;
+  /**
+   * Used for primary buttons when button is primary.
+   */
+  primary?: string;
+  /**
+   * Used for the ripple element.
+   */
+  rippleWrapper?: string;
+  /**
+   * Used for toggle buttons in the root element.
+   */
+  toggle?: string;
+}
+
+interface IconButtonProps extends ReactToolbox.Props {
+  /**
+   * Indicates if the button should have accent color.
+   * @default false
+   */
+  accent?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Creates a link for the button.
+   */
+  href?: string;
+  /**
+   * Value of the icon (See Font Icon Component).
+   */
+  icon?: React.ReactNode | string;
+  /**
+   * If true, the neutral colors are inverted. Useful to put a button over a dark background.
+   */
+  inverse?: boolean;
+  /**
+   * Set it to false if you don't want the neutral styles to be included.
+   * @default true
+   */
+  neutral?: boolean;
+  /**
+   * Indicates if the button should have primary color.
+   * @default false
+   */
+  primary?: boolean;
+  /**
+   * If true, component will have a ripple effect on click.
+   * @default true
+   */
+  ripple?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: IconButtonTheme;
+}
+
+export class IconButton extends React.Component<IconButtonProps, {}> { }
+
+export interface BrowseButtonTheme {
+  /**
+   * Used for the root in case button is accent.
+   */
+  accent?: string;
+  /**
+   * Used for the root element in any button.
+   */
+  button?: string;
+  /**
+   * Used when the button is flat for the root element.
+   */
+  flat?: string;
+  /**
+   * Used when the button is floating for the root element.
+   */
+  floating?: string;
+  /**
+   * For the icon inside a button.
+   */
+  icon?: string;
+  /**
+   * Used when colors are inverted.
+   */
+  inverse?: string;
+  /**
+   * Used for mini floating buttons.
+   */
+  mini?: string;
+  /**
+   * Used for neutral colored buttons.
+   */
+  neutral?: string;
+  /**
+   * Used for primary buttons when button is primary.
+   */
+  primary?: string;
+  /**
+   * Used when the button is raised for root element.
+   */
+  raised?: string;
+  /**
+   * Used for the ripple element.
+   */
+  rippleWrapper?: string;
+  /**
+   * Used for toggle buttons in the root element.
+   */
+  toggle?: string;
+}
+
+interface BrowseButtonProps extends ReactToolbox.Props {
+  /**
+   * Indicates if the button should have accent color.
+   * @default false
+   */
+  accent?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If true, the button will have a flat look.
+   * @default false
+   */
+  flat?: boolean;
+  /**
+   * If true, the button will have a floating look.
+   * @default false
+   */
+  floating?: boolean;
+  /**
+   * Creates a link for the button.
+   */
+  href?: string;
+  /**
+   * Value of the icon (See Font Icon Component).
+   */
+  icon?: React.ReactNode | string;
+  /**
+   * If true, the neutral colors are inverted. Useful to put a button over a dark background.
+   */
+  inverse?: boolean;
+  /**
+   * The text string to use for the name of the button.
+   */
+  label?: string;
+  /**
+   * To be used with floating button. If true, the button will be smaller.
+   * @default false
+   */
+  mini?: boolean;
+  /**
+   * Set it to false if you don't want the neutral styles to be included.
+   * @default true
+   */
+  neutral?: boolean;
+  /**
+   * Indicates if the button should have primary color.
+   * @default false
+   */
+  primary?: boolean;
+  /**
+   * If true, the button will have a raised look.
+   * @default false
+   */
+  raised?: boolean;
+  /**
+   * If true, component will have a ripple effect on click.
+   * @default true
+   */
+  ripple?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: BrowseButtonTheme;
+}
+
+export class BrowseButton extends React.Component<BrowseButtonProps, {}> { }
diff --git a/lib/button/index.js b/lib/button/index.js
new file mode 100644
index 000000000..fe05c0beb
--- /dev/null
+++ b/lib/button/index.js
@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BrowseButton = exports.IconButton = exports.Button = undefined;
+
+var _identifiers = require('../identifiers.js');
+
+var _reactCssThemr = require('react-css-themr');
+
+var _Button = require('./Button.js');
+
+var _BrowseButton = require('./BrowseButton.js');
+
+var _IconButton = require('./IconButton.js');
+
+var _FontIcon = require('../font_icon/FontIcon.js');
+
+var _FontIcon2 = _interopRequireDefault(_FontIcon);
+
+var _ripple = require('../ripple');
+
+var _ripple2 = _interopRequireDefault(_ripple);
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Button = (0, _Button.buttonFactory)((0, _ripple2.default)({ centered: false }), _FontIcon2.default);
+var IconButton = (0, _IconButton.iconButtonFactory)((0, _ripple2.default)({ centered: true }), _FontIcon2.default);
+var BrowseButton = (0, _BrowseButton.browseButtonFactory)((0, _ripple2.default)({ centered: false }), _FontIcon2.default);
+var ThemedButton = (0, _reactCssThemr.themr)(_identifiers.BUTTON, _theme2.default)(Button);
+var ThemedIconButton = (0, _reactCssThemr.themr)(_identifiers.BUTTON, _theme2.default)(IconButton);
+var ThemedBrowseButton = (0, _reactCssThemr.themr)(_identifiers.BUTTON, _theme2.default)(BrowseButton);
+
+exports.default = ThemedButton;
+exports.Button = ThemedButton;
+exports.IconButton = ThemedIconButton;
+exports.BrowseButton = ThemedBrowseButton;
\ No newline at end of file
diff --git a/lib/button/theme.scss b/lib/button/theme.scss
new file mode 100644
index 000000000..adf91cd0f
--- /dev/null
+++ b/lib/button/theme.scss
@@ -0,0 +1,182 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+@import "http://github.com/mixins";
+
+.button {
+  position: relative;
+
+  > input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    width: 0.1px;
+    height: 0.1px;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    opacity: 0;
+  }
+}
+
+%button {
+  @include typo-button();
+  position: relative;
+  display: inline-block;
+  height: $button-height;
+  flex-direction: row;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  line-height: $button-height;
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  border: 0;
+  outline: none;
+  transition: box-shadow .2s $animation-curve-fast-out-linear-in, background-color .2s $animation-curve-default, color .2s $animation-curve-default;
+  &::-moz-focus-inner {
+    border: 0;
+  }
+  > span:not([data-react-toolbox="tooltip"]) {
+    display: inline-block;
+    line-height: $button-height;
+    vertical-align: top;
+  }
+  > svg {
+    display: inline-block;
+    width: 1em;
+    height: $button-height;
+    font-size: 120%;
+    vertical-align: top;
+    fill: currentColor;
+  }
+  > * {
+    pointer-events: none;
+  }
+  > .rippleWrapper {
+    overflow: hidden;
+  }
+  &[disabled] {
+    color: $button-disabled-text-color;
+    pointer-events: none;
+    cursor: auto;
+  }
+}
+
+%squared {
+  min-width: $button-squared-min-width;
+  padding: $button-squared-padding;
+  border-radius: $button-border-radius;
+  .icon {
+    margin-right: $button-squared-icon-margin;
+    font-size: 120%;
+    vertical-align: middle;
+  }
+  > svg {
+    margin-right: .5 * $unit;
+  }
+}
+
+%solid {
+  &[disabled] {
+    @include shadow-2dp();
+    background-color: $button-disabled-background-color;
+  }
+  &:active {
+    @include shadow-4dp();
+  }
+  &:focus:not(:active) {
+    @include focus-shadow();
+  }
+}
+
+.raised {
+  @extend %button;
+  @extend %squared;
+  @extend %solid;
+  @include shadow-2dp();
+}
+
+.flat {
+  @extend %button;
+  @extend %squared;
+  background: transparent;
+}
+
+.floating {
+  @extend %button;
+  @extend %solid;
+  width: $button-floating-height;
+  height: $button-floating-height;
+  font-size: $button-floating-font-size;
+  border-radius: 50%;
+  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);
+  .icon {
+    line-height: $button-floating-height;
+  }
+  > .rippleWrapper {
+    border-radius: 50%;
+  }
+  &.mini {
+    width: $button-floating-mini-height;
+    height: $button-floating-mini-height;
+    font-size: $button-floating-mini-font-size;
+    .icon {
+      line-height: $button-floating-mini-height;
+    }
+  }
+}
+
+.toggle {
+  @extend %button;
+  width: $button-height;
+  background: transparent;
+  border-radius: 50%;
+  > .icon, svg {
+    font-size: $button-toggle-font-size;
+    line-height: $button-height;
+    vertical-align: top;
+  }
+  > .rippleWrapper {
+    border-radius: 50%;
+  }
+}
+
+.neutral:not([disabled]) {
+  &.raised, &.floating {
+    color: $button-neutral-color-contrast;
+    background-color: $button-neutral-color;
+  }
+  &.flat, &.toggle {
+    color: $button-neutral-color-contrast;
+    &:focus:not(:active) {
+      background: $button-neutral-color-hover;
+    }
+  }
+  &.flat:hover {
+    background: $button-neutral-color-hover;
+  }
+
+  &.inverse {
+    &.raised, &.floating {
+      color: $button-neutral-color;
+      background-color: $button-neutral-color-contrast;
+    }
+    &.flat, &.toggle {
+      color: $button-neutral-color;
+      &:focus:not(:active) {
+        background: $button-neutral-color-hover;
+      }
+    }
+    &.flat:hover {
+      background: $button-neutral-color-hover;
+    }
+  }
+}
+
+@include btn-colors("primary", $button-primary-color-contrast, $button-primary-color, $button-primary-color-hover);
+@include btn-colors("accent", $button-accent-color-contrast, $button-accent-color, $button-accent-color-hover);
diff --git a/lib/card/Card.js b/lib/card/Card.js
new file mode 100644
index 000000000..3067f7475
--- /dev/null
+++ b/lib/card/Card.js
@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Card = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _identifiers = require('../identifiers.js');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+var Card = function Card(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      raised = _ref.raised,
+      theme = _ref.theme,
+      other = _objectWithoutProperties(_ref, ['children', 'className', 'raised', 'theme']);
+
+  var classes = (0, _classnames3.default)(theme.card, _defineProperty({}, theme.raised, raised), className);
+
+  return _react2.default.createElement(
+    'div',
+    _extends({ 'data-react-toolbox': 'card', className: classes }, other),
+    children
+  );
+};
+
+Card.propTypes = {
+  children: _react.PropTypes.any,
+  className: _react.PropTypes.string,
+  raised: _react.PropTypes.bool,
+  theme: _react.PropTypes.shape({
+    card: _react.PropTypes.string,
+    raised: _react.PropTypes.string
+  })
+};
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.CARD)(Card);
+exports.Card = Card;
\ No newline at end of file
diff --git a/lib/card/CardActions.js b/lib/card/CardActions.js
new file mode 100644
index 000000000..5c4cb45c6
--- /dev/null
+++ b/lib/card/CardActions.js
@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CardActions = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _identifiers = require('../identifiers.js');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+var CardActions = function CardActions(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      theme = _ref.theme,
+      other = _objectWithoutProperties(_ref, ['children', 'className', 'theme']);
+
+  return _react2.default.createElement(
+    'div',
+    _extends({ className: (0, _classnames2.default)(theme.cardActions, className) }, other),
+    children
+  );
+};
+
+CardActions.propTypes = {
+  children: _react.PropTypes.any,
+  className: _react.PropTypes.string,
+  theme: _react.PropTypes.shape({
+    cardActions: _react.PropTypes.string
+  })
+};
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.CARD)(CardActions);
+exports.CardActions = CardActions;
\ No newline at end of file
diff --git a/lib/card/CardMedia.js b/lib/card/CardMedia.js
new file mode 100644
index 000000000..e0d86cc43
--- /dev/null
+++ b/lib/card/CardMedia.js
@@ -0,0 +1,75 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CardMedia = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _classnames3 = require('classnames');
+
+var _classnames4 = _interopRequireDefault(_classnames3);
+
+var _identifiers = require('../identifiers.js');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+var CardMedia = function CardMedia(_ref) {
+  var aspectRatio = _ref.aspectRatio,
+      children = _ref.children,
+      className = _ref.className,
+      color = _ref.color,
+      contentOverlay = _ref.contentOverlay,
+      image = _ref.image,
+      theme = _ref.theme,
+      other = _objectWithoutProperties(_ref, ['aspectRatio', 'children', 'className', 'color', 'contentOverlay', 'image', 'theme']);
+
+  var classes = (0, _classnames4.default)(theme.cardMedia, _defineProperty({}, theme[aspectRatio], aspectRatio), className);
+
+  var innerClasses = (0, _classnames4.default)(theme.content, _defineProperty({}, theme.contentOverlay, contentOverlay));
+
+  var bgStyle = {
+    backgroundColor: color ? color : undefined,
+    backgroundImage: typeof image === 'string' ? 'url(http://github.com/''%20+%20image%20+%20'/')' : undefined
+  };
+
+  return _react2.default.createElement(
+    'div',
+    _extends({ style: bgStyle, className: classes }, other),
+    _react2.default.createElement(
+      'div',
+      { className: innerClasses },
+      children
+    )
+  );
+};
+
+CardMedia.propTypes = {
+  aspectRatio: _react.PropTypes.oneOf(['wide', 'square']),
+  children: _react.PropTypes.any,
+  className: _react.PropTypes.string,
+  color: _react.PropTypes.string,
+  contentOverlay: _react.PropTypes.bool,
+  image: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+  theme: _react.PropTypes.shape({
+    cardMedia: _react.PropTypes.string,
+    content: _react.PropTypes.string,
+    contentOverlay: _react.PropTypes.string,
+    square: _react.PropTypes.string,
+    wide: _react.PropTypes.string
+  })
+};
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.CARD)(CardMedia);
+exports.CardMedia = CardMedia;
\ No newline at end of file
diff --git a/lib/card/CardText.js b/lib/card/CardText.js
new file mode 100644
index 000000000..b1ea09aea
--- /dev/null
+++ b/lib/card/CardText.js
@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CardText = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _identifiers = require('../identifiers.js');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+var CardText = function CardText(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      theme = _ref.theme,
+      other = _objectWithoutProperties(_ref, ['children', 'className', 'theme']);
+
+  return _react2.default.createElement(
+    'div',
+    _extends({ className: (0, _classnames2.default)(theme.cardText, className) }, other),
+    typeof children === 'string' ? _react2.default.createElement(
+      'p',
+      null,
+      children
+    ) : children
+  );
+};
+
+CardText.propTypes = {
+  children: _react.PropTypes.any,
+  className: _react.PropTypes.string,
+  theme: _react.PropTypes.shape({
+    cardText: _react.PropTypes.string
+  })
+};
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.CARD)(CardText);
+exports.CardText = CardText;
\ No newline at end of file
diff --git a/lib/card/CardTitle.js b/lib/card/CardTitle.js
new file mode 100644
index 000000000..a6d278073
--- /dev/null
+++ b/lib/card/CardTitle.js
@@ -0,0 +1,93 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cardTitleFactory = exports.CardTitle = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Avatar = require('../avatar/Avatar.js');
+
+var _Avatar2 = _interopRequireDefault(_Avatar);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+var factory = function factory(Avatar) {
+  var CardTitle = function CardTitle(_ref) {
+    var _classnames;
+
+    var avatar = _ref.avatar,
+        children = _ref.children,
+        className = _ref.className,
+        subtitle = _ref.subtitle,
+        theme = _ref.theme,
+        title = _ref.title,
+        other = _objectWithoutProperties(_ref, ['avatar', 'children', 'className', 'subtitle', 'theme', 'title']);
+
+    var classes = (0, _classnames3.default)(theme.cardTitle, (_classnames = {}, _defineProperty(_classnames, theme.small, avatar), _defineProperty(_classnames, theme.large, !avatar), _classnames), className);
+
+    return _react2.default.createElement(
+      'div',
+      _extends({ className: classes }, other),
+      typeof avatar === 'string' ? _react2.default.createElement(Avatar, { image: avatar, theme: theme }) : avatar,
+      _react2.default.createElement(
+        'div',
+        null,
+        title && _react2.default.createElement(
+          'h5',
+          { className: theme.title },
+          title
+        ),
+        children && typeof children === 'string' && _react2.default.createElement(
+          'h5',
+          { className: theme.title },
+          children
+        ),
+        subtitle && _react2.default.createElement(
+          'p',
+          { className: theme.subtitle },
+          subtitle
+        ),
+        children && typeof children !== 'string' && children
+      )
+    );
+  };
+
+  CardTitle.propTypes = {
+    avatar: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    children: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element, _react.PropTypes.array]),
+    className: _react.PropTypes.string,
+    subtitle: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    theme: _react.PropTypes.shape({
+      large: _react.PropTypes.string,
+      title: _react.PropTypes.string,
+      small: _react.PropTypes.string,
+      subtitle: _react.PropTypes.string
+    }),
+    title: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element])
+  };
+
+  return CardTitle;
+};
+
+var CardTitle = factory(_Avatar2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.CARD)(CardTitle);
+exports.CardTitle = CardTitle;
+exports.cardTitleFactory = factory;
\ No newline at end of file
diff --git a/lib/card/_config.scss b/lib/card/_config.scss
new file mode 100644
index 000000000..c89b3cb53
--- /dev/null
+++ b/lib/card/_config.scss
@@ -0,0 +1,7 @@
+$card-color-white: $color-white !default;
+$card-text-overlay: rgba($color-black, 0.35) !default;
+$card-background-color: $card-color-white !default;
+$card-padding-sm: .8 * $unit !default;
+$card-padding: 1.6 * $unit !default;
+$card-padding-lg: 2 * $unit !default;
+$card-font-size: $font-size-small !default;
diff --git a/lib/card/index.d.ts b/lib/card/index.d.ts
new file mode 100644
index 000000000..824771fac
--- /dev/null
+++ b/lib/card/index.d.ts
@@ -0,0 +1,103 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface CardTheme {
+  card?: string;
+  raised?: string;
+}
+
+interface CardProps extends ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  raised?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: CardTheme;
+}
+
+export class Card extends React.Component<CardProps, {}> { }
+
+export interface CardActionsTheme {
+  cardActions?: string;
+}
+
+interface CardActionsProps extends ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: CardActionsTheme;
+}
+
+export class CardActions extends React.Component<CardActionsProps, {}> { }
+
+export interface CardMediaTheme {
+  cardMedia?: string;
+  content?: string;
+  contentOverlay?: string;
+  square?: string;
+  wide?: string;
+}
+
+interface CardMediaProps extends ReactToolbox.Props {
+  aspectRatio?: "wide" | "square";
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  color?: string;
+  contentOverlay?: boolean;
+  image?: React.ReactNode | string;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: CardMediaTheme;
+}
+
+export class CardMedia extends React.Component<CardMediaProps, {}> { }
+
+export interface CardTextTheme {
+  cardText?: string;
+}
+
+interface CardTextProps extends ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: CardTextTheme;
+}
+
+export class CardText extends React.Component<CardTextProps, {}> { }
+
+export interface CardTitleTheme {
+  large?: string;
+  title?: string;
+  small?: string;
+  subtitle?: string;
+}
+
+interface CardTitleProps extends ReactToolbox.Props {
+  avatar?: React.ReactNode | string;
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  subtitle?: React.ReactNode | string;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: CardTitleTheme;
+  title?: React.ReactNode | string;
+}
+
+export class CardTitle extends React.Component<CardTitleProps, {}> { }
diff --git a/lib/card/index.js b/lib/card/index.js
new file mode 100644
index 000000000..d124b681e
--- /dev/null
+++ b/lib/card/index.js
@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CardTitle = exports.CardText = exports.CardMedia = exports.CardActions = exports.Card = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Card = require('./Card.js');
+
+var _CardActions = require('./CardActions.js');
+
+var _CardMedia = require('./CardMedia.js');
+
+var _CardText = require('./CardText.js');
+
+var _CardTitle = require('./CardTitle.js');
+
+var _avatar = require('../avatar');
+
+var _avatar2 = _interopRequireDefault(_avatar);
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var CardTitle = (0, _CardTitle.cardTitleFactory)(_avatar2.default);
+var ThemedCard = (0, _reactCssThemr.themr)(_identifiers.CARD, _theme2.default)(_Card.Card);
+var ThemedCardActions = (0, _reactCssThemr.themr)(_identifiers.CARD, _theme2.default)(_CardActions.CardActions);
+var ThemedCardMedia = (0, _reactCssThemr.themr)(_identifiers.CARD, _theme2.default)(_CardMedia.CardMedia);
+var ThemedCardText = (0, _reactCssThemr.themr)(_identifiers.CARD, _theme2.default)(_CardText.CardText);
+var ThemedCardTitle = (0, _reactCssThemr.themr)(_identifiers.CARD, _theme2.default)(CardTitle);
+
+exports.default = ThemedCard;
+exports.Card = ThemedCard;
+exports.CardActions = ThemedCardActions;
+exports.CardMedia = ThemedCardMedia;
+exports.CardText = ThemedCardText;
+exports.CardTitle = ThemedCardTitle;
\ No newline at end of file
diff --git a/lib/card/theme.scss b/lib/card/theme.scss
new file mode 100644
index 000000000..c49ea5cf6
--- /dev/null
+++ b/lib/card/theme.scss
@@ -0,0 +1,126 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+
+.card {
+  @include shadow-2dp();
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  overflow: hidden;
+  font-size: $card-font-size;
+  background: $card-background-color;
+  border-radius: .2 * $unit;
+  &.raised {
+    @include shadow-8dp();
+  }
+  [data-react-toolbox="avatar"] {
+    display: block;
+  }
+}
+
+.cardMedia {
+  position: relative;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: cover;
+  &.wide, &.square {
+    width: 100%;
+    .content {
+      position: absolute;
+      height: 100%;
+    }
+    .content > iframe, .content > video, .content > img {
+      max-width: 100%;
+    }
+  }
+  &::after {
+    display: block;
+    height: 0;
+    content: "";
+  }
+  &.wide::after {
+    padding-top: 56.25%;
+  }
+  &.square::after {
+    padding-top: 100%;
+  }
+  .content {
+    position: relative;
+    top: 0;
+    left: 0;
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    justify-content: flex-end;
+    overflow: hidden;
+  }
+  .contentOverlay {
+    .cardTitle, .cardActions, .cardText {
+      background-color: $card-text-overlay;
+    }
+  }
+}
+
+.cardTitle {
+  display: flex;
+  align-items: center;
+  [data-react-toolbox="avatar"] {
+    margin-right: 1.3 * $unit;
+  }
+  .subtitle {
+    color: $color-text-secondary;
+  }
+  &.large {
+    padding: $card-padding-lg $card-padding ($card-padding - .2 * $unit);
+    .title {
+      @include typo-headline();
+      line-height: 1.25;
+    }
+  }
+  &.small {
+    padding: $card-padding;
+    .title {
+      @include typo-body-2(false, true);
+      line-height: 1.4;
+    }
+    .subtitle {
+      font-weight: 500;
+      line-height: 1.4;
+    }
+  }
+  .cardMedia & {
+    .title, .subtitle {
+      color: $card-color-white;
+    }
+  }
+}
+
+.cardTitle, .cardText {
+  padding: ($card-padding - .2 * $unit) $card-padding;
+  &:last-child {
+    padding-bottom: $card-padding-lg;
+  }
+  + .cardText {
+    padding-top: 0;
+  }
+}
+
+.cardActions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: $card-padding-sm;
+  [data-react-toolbox="button"] {
+    min-width: 0;
+    padding: 0 $card-padding-sm;
+    margin: 0 $card-padding-sm / 2;
+    &:first-child {
+      margin-left: 0;
+    }
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
diff --git a/lib/checkbox/Check.js b/lib/checkbox/Check.js
new file mode 100644
index 000000000..90041ec49
--- /dev/null
+++ b/lib/checkbox/Check.js
@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var factory = function factory(ripple) {
+  var Check = function Check(_ref) {
+    var checked = _ref.checked,
+        children = _ref.children,
+        onMouseDown = _ref.onMouseDown,
+        theme = _ref.theme,
+        style = _ref.style;
+    return _react2.default.createElement(
+      'div',
+      {
+        'data-react-toolbox': 'check',
+        className: (0, _classnames3.default)(theme.check, _defineProperty({}, theme.checked, checked)),
+        onMouseDown: onMouseDown,
+        style: style
+      },
+      children
+    );
+  };
+
+  Check.propTypes = {
+    checked: _react.PropTypes.bool,
+    children: _react.PropTypes.any,
+    onMouseDown: _react.PropTypes.func,
+    style: _react.PropTypes.object,
+    theme: _react.PropTypes.shape({
+      check: _react.PropTypes.string,
+      checked: _react.PropTypes.string
+    })
+  };
+
+  return ripple(Check);
+};
+
+exports.default = factory;
\ No newline at end of file
diff --git a/lib/checkbox/Checkbox.js b/lib/checkbox/Checkbox.js
new file mode 100644
index 000000000..da387e640
--- /dev/null
+++ b/lib/checkbox/Checkbox.js
@@ -0,0 +1,157 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Checkbox = exports.checkboxFactory = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Ripple = require('../ripple/Ripple.js');
+
+var _Ripple2 = _interopRequireDefault(_Ripple);
+
+var _Check = require('./Check.js');
+
+var _Check2 = _interopRequireDefault(_Check);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(Check) {
+  var Checkbox = function (_Component) {
+    _inherits(Checkbox, _Component);
+
+    function Checkbox() {
+      var _ref;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, Checkbox);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Checkbox.__proto__ || Object.getPrototypeOf(Checkbox)).call.apply(_ref, [this].concat(args))), _this), _this.handleToggle = function (event) {
+        if (event.pageX !== 0 && event.pageY !== 0) _this.blur();
+        if (!_this.props.disabled && _this.props.onChange) {
+          _this.props.onChange(!_this.props.checked, event);
+        }
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(Checkbox, [{
+      key: 'blur',
+      value: function blur() {
+        this.inputNode && this.inputNode.blur();
+      }
+    }, {
+      key: 'focus',
+      value: function focus() {
+        this.inputNode && this.inputNode.focus();
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _this2 = this;
+
+        var _props = this.props,
+            checked = _props.checked,
+            children = _props.children,
+            disabled = _props.disabled,
+            label = _props.label,
+            style = _props.style,
+            theme = _props.theme,
+            others = _objectWithoutProperties(_props, ['checked', 'children', 'disabled', 'label', 'style', 'theme']);
+
+        var className = (0, _classnames3.default)(theme.field, _defineProperty({}, theme.disabled, this.props.disabled), this.props.className);
+
+        return _react2.default.createElement(
+          'label',
+          _extends({}, others, { 'data-react-toolbox': 'checkbox', className: className }),
+          _react2.default.createElement('input', {
+            checked: checked,
+            className: theme.input,
+            disabled: disabled,
+            onChange: function onChange() {},
+            onClick: this.handleToggle,
+            ref: function ref(node) {
+              _this2.inputNode = node;
+            },
+            type: 'checkbox'
+          }),
+          _react2.default.createElement(Check, {
+            checked: checked,
+            disabled: disabled,
+            rippleClassName: theme.ripple,
+            style: style,
+            theme: theme
+          }),
+          label ? _react2.default.createElement(
+            'span',
+            { 'data-react-toolbox': 'label', className: theme.text },
+            label
+          ) : null,
+          children
+        );
+      }
+    }]);
+
+    return Checkbox;
+  }(_react.Component);
+
+  Checkbox.propTypes = {
+    checked: _react.PropTypes.bool,
+    children: _react.PropTypes.node,
+    className: _react.PropTypes.string,
+    disabled: _react.PropTypes.bool,
+    label: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.node]),
+    name: _react.PropTypes.string,
+    onChange: _react.PropTypes.func,
+    style: _react.PropTypes.object,
+    theme: _react.PropTypes.shape({
+      disabled: _react.PropTypes.string,
+      field: _react.PropTypes.string,
+      input: _react.PropTypes.string,
+      ripple: _react.PropTypes.string
+    })
+  };
+  Checkbox.defaultProps = {
+    checked: false,
+    className: '',
+    disabled: false
+  };
+
+
+  return Checkbox;
+};
+
+var Check = (0, _Check2.default)((0, _Ripple2.default)({ centered: true, spread: 2.6 }));
+var Checkbox = factory(Check);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.CHECKBOX)(Checkbox);
+exports.checkboxFactory = factory;
+exports.Checkbox = Checkbox;
\ No newline at end of file
diff --git a/lib/checkbox/_config.scss b/lib/checkbox/_config.scss
new file mode 100644
index 000000000..18266e498
--- /dev/null
+++ b/lib/checkbox/_config.scss
@@ -0,0 +1,12 @@
+$checkbox-color: $color-primary !default;
+$checkbox-disabled-color: rgba($color-black, 0.26) !default;
+$checkbox-field-margin-bottom: 1.5 * $unit !default;
+$checkbox-focus-checked-color: rgba($color-primary, 0.26) !default;
+$checkbox-ripple-duration: 650ms !default;
+$checkbox-size: 1.8 * $unit !default;
+$checkbox-focus-color: rgba($color-black, 0.1) !default;
+$checkbox-focus-size: $checkbox-size * 2.3 !default;
+$checkbox-text-color: $color-black !default;
+$checkbox-text-font-size: $font-size-small !default;
+$checkbox-total-height: 1.8 * $unit !default;
+$checkbox-transition-duration: .2s !default;
diff --git a/lib/checkbox/index.d.ts b/lib/checkbox/index.d.ts
new file mode 100644
index 000000000..29c1045e7
--- /dev/null
+++ b/lib/checkbox/index.d.ts
@@ -0,0 +1,70 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface CheckboxTheme {
+  /**
+   * Used as root in the check element.
+   */
+  check?: string;
+  /**
+   * Used for the check element when it's checked.
+   */
+  checked?: string;
+  /**
+   * Used when the component is disabled.
+   */
+  disabled?: string;
+  /**
+   * Used as the root class of the component.
+   */
+  field?: string;
+  /**
+   * Used for the input element.
+   */
+  input?: string;
+  /**
+   * Used for the ripple component.
+   */
+  ripple?: string;
+  /**
+   * Used for the text label.
+   */
+  text?: string;
+}
+
+interface CheckboxProps extends ReactToolbox.Props {
+  /**
+   * Value for the checkbox, can be true or false.
+   * @default false
+   */
+  checked?: boolean;
+  /**
+   * If true, the checkbox shown as disabled and cannot be modified.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Text label to attach next to the checkbox element.
+   */
+  label?: React.ReactNode | string;
+  /**
+   * The name of the field to set in the input checkbox.
+   */
+  name?: string;
+  /**
+   * Callback called when the checkbox is blurred.
+   */
+  onBlur?: Function;
+  /**
+   * Callback called when the checkbox value is changed.
+   */
+  onChange?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: CheckboxTheme;
+}
+
+export class Checkbox extends React.Component<CheckboxProps, {}> { }
+
+export default Checkbox;
diff --git a/lib/checkbox/index.js b/lib/checkbox/index.js
new file mode 100644
index 000000000..5efa6e16c
--- /dev/null
+++ b/lib/checkbox/index.js
@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Checkbox = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _ripple = require('../ripple');
+
+var _ripple2 = _interopRequireDefault(_ripple);
+
+var _Checkbox = require('./Checkbox.js');
+
+var _Check = require('./Check.js');
+
+var _Check2 = _interopRequireDefault(_Check);
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ThemedCheck = (0, _Check2.default)((0, _ripple2.default)({ centered: true, spread: 2.6 }));
+var ThemedCheckbox = (0, _reactCssThemr.themr)(_identifiers.CHECKBOX, _theme2.default)((0, _Checkbox.checkboxFactory)(ThemedCheck));
+
+exports.default = ThemedCheckbox;
+exports.Checkbox = ThemedCheckbox;
\ No newline at end of file
diff --git a/lib/checkbox/theme.scss b/lib/checkbox/theme.scss
new file mode 100644
index 000000000..55b179205
--- /dev/null
+++ b/lib/checkbox/theme.scss
@@ -0,0 +1,121 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+
+.field {
+  position: relative;
+  display: block;
+  height: $checkbox-size;
+  margin-bottom: $checkbox-field-margin-bottom;
+  white-space: nowrap;
+  vertical-align: middle;
+  .ripple {
+    background-color: $checkbox-color;
+    opacity: .3;
+    transition-duration: $checkbox-ripple-duration;
+  }
+}
+
+.text {
+  display: inline-block;
+  padding-left: $unit;
+  font-size: $checkbox-text-font-size;
+  line-height: $checkbox-size;
+  color: $checkbox-text-color;
+  white-space: nowrap;
+  vertical-align: top;
+}
+
+.input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  opacity: 0;
+  &:focus ~ .check {
+    &:before {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: $checkbox-focus-size;
+      height: $checkbox-focus-size;
+      margin-top: - $checkbox-focus-size / 2;
+      margin-left: - $checkbox-focus-size / 2;
+      pointer-events: none;
+      content: "";
+      background-color: $checkbox-focus-color;
+      border-radius: 50%;
+    }
+    &.checked:before {
+      background-color: $checkbox-focus-checked-color;
+    }
+  }
+}
+
+.check {
+  position: relative;
+  display: inline-block;
+  width: $checkbox-size;
+  height: $checkbox-size;
+  vertical-align: top;
+  cursor: pointer;
+  border-color: $checkbox-text-color;
+  border-style: solid;
+  border-width: 2px;
+  border-radius: 2px;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $checkbox-transition-duration;
+  transition-property: background-color;
+  &.checked {
+    background-color: $checkbox-color;
+    border-color: $checkbox-color;
+    &:after {
+      position: absolute;
+      top: -.1 * $unit;
+      left: .4 * $unit;
+      width: .7 * $unit;
+      height: 1.2 * $unit;
+      content: "";
+      border-color: $color-background;
+      border-style: solid;
+      border-top: 0;
+      border-right-width: 2px;
+      border-bottom-width: 2px;
+      border-left: 0;
+      transform: rotate(45deg);
+      animation: checkmark-expand 140ms ease-out forwards;
+    }
+  }
+}
+
+.disabled {
+  > .text {
+    color: $checkbox-disabled-color;
+  }
+  > .check {
+    cursor: auto;
+    border-color: $checkbox-disabled-color;
+    &.checked {
+      cursor: auto;
+      background-color: $checkbox-disabled-color;
+      border-color: transparent;
+    }
+  }
+}
+
+@keyframes checkmark-expand {
+  0% {
+    top: .9 * $unit;
+    left: .6 * $unit;
+    width: 0;
+    height: 0;
+  }
+
+  100% {
+    top: -.1 * $unit;
+    left: .4 * $unit;
+    width: .7 * $unit;
+    height: 1.2 * $unit;
+  }
+}
diff --git a/lib/chip/Chip.js b/lib/chip/Chip.js
new file mode 100644
index 000000000..3c4d947bb
--- /dev/null
+++ b/lib/chip/Chip.js
@@ -0,0 +1,97 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Chip = exports.chipFactory = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Avatar = require('../avatar/Avatar.js');
+
+var _Avatar2 = _interopRequireDefault(_Avatar);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+var factory = function factory(Avatar) {
+  var Chip = function Chip(_ref) {
+    var _classnames;
+
+    var children = _ref.children,
+        className = _ref.className,
+        deletable = _ref.deletable,
+        onDeleteClick = _ref.onDeleteClick,
+        theme = _ref.theme,
+        other = _objectWithoutProperties(_ref, ['children', 'className', 'deletable', 'onDeleteClick', 'theme']);
+
+    var hasAvatar = false;
+    if (_react2.default.Children.count(children)) {
+      var firstChild = children[0];
+      hasAvatar = firstChild && firstChild.type && firstChild.type === Avatar;
+    }
+
+    var classes = (0, _classnames3.default)(theme.chip, (_classnames = {}, _defineProperty(_classnames, theme.deletable, !!deletable), _defineProperty(_classnames, theme.avatar, !!hasAvatar), _classnames), className);
+
+    return _react2.default.createElement(
+      'div',
+      _extends({ 'data-react-toolbox': 'chip', className: classes }, other),
+      typeof children === 'string' ? _react2.default.createElement(
+        'span',
+        null,
+        children
+      ) : children,
+      deletable ? _react2.default.createElement(
+        'span',
+        { className: theme.delete, onClick: onDeleteClick },
+        _react2.default.createElement(
+          'svg',
+          { viewBox: '0 0 40 40', className: theme.deleteIcon },
+          _react2.default.createElement('path', { className: theme.deleteX, d: 'M 12,12 L 28,28 M 28,12 L 12,28' })
+        )
+      ) : null
+    );
+  };
+
+  Chip.propTypes = {
+    children: _react.PropTypes.node,
+    className: _react.PropTypes.string,
+    deletable: _react.PropTypes.bool,
+    onDeleteClick: _react.PropTypes.func,
+    theme: _react.PropTypes.shape({
+      avatar: _react.PropTypes.string,
+      chip: _react.PropTypes.string,
+      deletable: _react.PropTypes.string,
+      delete: _react.PropTypes.string,
+      deleteIcon: _react.PropTypes.string,
+      deleteX: _react.PropTypes.string
+    })
+  };
+
+  Chip.defaultProps = {
+    className: '',
+    deletable: false
+  };
+
+  return Chip;
+};
+
+var Chip = factory(_Avatar2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.CHIP)(Chip);
+exports.chipFactory = factory;
+exports.Chip = Chip;
\ No newline at end of file
diff --git a/lib/chip/_config.scss b/lib/chip/_config.scss
new file mode 100644
index 000000000..a335b2f66
--- /dev/null
+++ b/lib/chip/_config.scss
@@ -0,0 +1,17 @@
+$chip-height: 3.2 * $unit !default;
+$chip-padding: 1.2 * $unit !default;
+$chip-margin-right: 0.25 * $unit !default;
+$chip-background: $palette-grey-200 !default;
+
+$chip-icon-font-size: 2 * $unit !default;
+$chip-icon-margin-right: 0.8 * $unit !default;
+
+$chip-color: $color-text-secondary !default;
+$chip-font-size: $font-size-small !default;
+
+$chip-remove-size: 2.4 * $unit !default;
+$chip-remove-margin: 0.4 * $unit !default;
+$chip-remove-stroke-width: 0.4 * $unit !default;
+$chip-remove-background: $palette-grey-400 !default;
+$chip-remove-background-hover: $palette-grey-500 !default;
+$chip-remove-color: $color-white !default;
diff --git a/lib/chip/index.d.ts b/lib/chip/index.d.ts
new file mode 100644
index 000000000..832ca408c
--- /dev/null
+++ b/lib/chip/index.d.ts
@@ -0,0 +1,53 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface ChipTheme {
+  /**
+   * Added to the root element when the component includes an avatar.
+   */
+  avatar?: string;
+  /**
+   * Used for the root element.
+   */
+  chip?: string;
+  /**
+   * Added to the root element when the component is deletable.
+   */
+  deletable?: string;
+  /**
+   * Used for the delete element wrapper.
+   */
+  delete?: string;
+  /**
+   * Used for the delete icon.
+   */
+  deleteIcon?: string;
+  /**
+   * Used for the delete svg inner layer.
+   */
+  deleteX?: string;
+}
+
+interface ChipProps extends ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * If true, the chip will be rendered with a delete icon.
+   * @default false
+   */
+  deletable?: boolean;
+  /**
+   * Callback to be invoked when the delete icon is clicked.
+   */
+  onDeleteClick?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ChipTheme;
+}
+
+export class Chip extends React.Component<ChipProps, {}> { }
+
+export default Chip;
diff --git a/lib/chip/index.js b/lib/chip/index.js
new file mode 100644
index 000000000..5a62d8219
--- /dev/null
+++ b/lib/chip/index.js
@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Chip = undefined;
+
+var _identifiers = require('../identifiers.js');
+
+var _reactCssThemr = require('react-css-themr');
+
+var _Chip = require('./Chip.js');
+
+var _avatar = require('../avatar');
+
+var _avatar2 = _interopRequireDefault(_avatar);
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Chip = (0, _Chip.chipFactory)(_avatar2.default);
+var ThemedChip = (0, _reactCssThemr.themr)(_identifiers.CHIP, _theme2.default)(Chip);
+
+exports.default = ThemedChip;
+exports.Chip = ThemedChip;
\ No newline at end of file
diff --git a/lib/chip/theme.scss b/lib/chip/theme.scss
new file mode 100644
index 000000000..4baa8f9c9
--- /dev/null
+++ b/lib/chip/theme.scss
@@ -0,0 +1,68 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+
+.chip {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  padding: 0 $chip-padding;
+  margin-right: $chip-margin-right;
+  overflow: hidden;
+  font-size: $chip-font-size;
+  line-height: $chip-height;
+  color: $chip-color;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background-color: $chip-background;
+  border-radius: $chip-height;
+}
+
+.avatar {
+  padding-left: 0;
+
+  > [data-react-toolbox="avatar"] {
+    width: $chip-height;
+    height: $chip-height;
+    margin-right: $chip-icon-margin-right;
+    vertical-align: middle;
+
+    > span {
+      font-size: $chip-icon-font-size;
+      line-height: $chip-height;
+    }
+  }
+}
+
+.deletable {
+  padding-right: $chip-remove-size + 2 * $chip-remove-margin;
+}
+
+.delete {
+  position: absolute;
+  right: 0;
+  display: inline-block;
+  width: $chip-remove-size;
+  height: $chip-remove-size;
+  padding: $chip-remove-margin;
+  margin: $chip-remove-margin;
+  vertical-align: middle;
+  cursor: pointer;
+}
+
+.delete:hover .deleteIcon {
+  background: $chip-remove-background-hover;
+}
+
+.deleteIcon {
+  vertical-align: top;
+  background: $chip-remove-background;
+  border-radius: $chip-remove-size;
+
+  .deleteX {
+    fill: transparent;
+    stroke-width: $chip-remove-stroke-width;
+    stroke: $chip-remove-color;
+  }
+}
diff --git a/lib/commons.scss b/lib/commons.scss
new file mode 100644
index 000000000..54f9ba163
--- /dev/null
+++ b/lib/commons.scss
@@ -0,0 +1,95 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/~normalize.css";
+
+html {
+  font-size: 62.5%;
+}
+
+body {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  font-family: Roboto, sans-serif;
+  font-size: 1.6rem;
+  -webkit-touch-callout: none;
+  * {
+    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  }
+}
+
+a, abbr, address, article, aside, audio, b, blockquote, body, caption, cite,
+code, dd, del, dfn, dialog, div, dl, dt, em, fieldset, figure, footer, form, h1,
+h2, h3, h4, h5, h6, header, hgroup, hr, html, i, iframe, img, ins, kbd, label,
+legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span,
+strong, sub, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  outline: 0;
+}
+
+*, *:before, *:after {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+h1, h2, h3, h4, h5, h6, label, p, button, abbr, a, span, small {
+  font-smoothing: antialiased;
+  -webkit-font-smoothing: antialiased;
+  text-size-adjust: 100%;
+}
+
+a {
+  text-decoration: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+input:not([type="checkbox"]):not([type="radio"]), button {
+  outline: none;
+  appearance: none;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+}
+
+// -- Remove firefox default style for required inputs
+input[required]:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+// -- Material design font sizes
+h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
+  @include typo-display-3($color-contrast: true);
+}
+
+h1 {
+  @include typo-display-3;
+}
+
+h2 {
+  @include typo-display-2;
+}
+
+h3 {
+  @include typo-display-1;
+}
+
+h4 {
+  @include typo-headline;
+}
+
+h5 {
+  @include typo-title;
+}
+
+h6 {
+  @include typo-subhead;
+}
+
+p {
+  @include typo-body-1;
+}
diff --git a/lib/date_picker/Calendar.js b/lib/date_picker/Calendar.js
new file mode 100644
index 000000000..d8ce5acc4
--- /dev/null
+++ b/lib/date_picker/Calendar.js
@@ -0,0 +1,212 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactAddonsCssTransitionGroup = require('react-addons-css-transition-group');
+
+var _reactAddonsCssTransitionGroup2 = _interopRequireDefault(_reactAddonsCssTransitionGroup);
+
+var _animations = require('../animations');
+
+var _time = require('../utils/time.js');
+
+var _time2 = _interopRequireDefault(_time);
+
+var _utils = require('../utils/utils.js');
+
+var _utils2 = _interopRequireDefault(_utils);
+
+var _CalendarMonth = require('./CalendarMonth.js');
+
+var _CalendarMonth2 = _interopRequireDefault(_CalendarMonth);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var DIRECTION_STEPS = { left: -1, right: 1 };
+
+var factory = function factory(IconButton) {
+  var Calendar = function (_Component) {
+    _inherits(Calendar, _Component);
+
+    function Calendar() {
+      var _ref;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, Calendar);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Calendar.__proto__ || Object.getPrototypeOf(Calendar)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+        viewDate: _this.props.selectedDate
+      }, _this.handleDayClick = function (day) {
+        _this.props.onChange(_time2.default.setDay(_this.state.viewDate, day), true);
+      }, _this.handleYearClick = function (event) {
+        var year = parseInt(event.currentTarget.id);
+        var viewDate = _time2.default.setYear(_this.props.selectedDate, year);
+        _this.setState({ viewDate: viewDate });
+        _this.props.onChange(viewDate, false);
+      }, _this.handleKeys = function (e) {
+        var selectedDate = _this.props.selectedDate;
+
+
+        if (e.which === 37 || e.which === 38 || e.which === 39 || e.which === 40 || e.which === 13) e.preventDefault();
+
+        switch (e.which) {
+          case 13:
+            _this.props.handleSelect();break; // enter
+          case 37:
+            _this.handleDayArrowKey(_time2.default.addDays(selectedDate, -1));break; // left
+          case 38:
+            _this.handleDayArrowKey(_time2.default.addDays(selectedDate, -7));break; // up
+          case 39:
+            _this.handleDayArrowKey(_time2.default.addDays(selectedDate, 1));break; // right
+          case 40:
+            _this.handleDayArrowKey(_time2.default.addDays(selectedDate, 7));break; // down
+          default:
+            break;
+        }
+      }, _this.handleDayArrowKey = function (date) {
+        _this.setState({ viewDate: date });
+        _this.props.onChange(date, false);
+      }, _this.changeViewMonth = function (event) {
+        var direction = event.currentTarget.id;
+        _this.setState({
+          direction: direction,
+          viewDate: _time2.default.addMonths(_this.state.viewDate, DIRECTION_STEPS[direction])
+        });
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(Calendar, [{
+      key: 'componentWillMount',
+      value: function componentWillMount() {
+        document.body.addEventListener('keydown', this.handleKeys);
+      }
+    }, {
+      key: 'componentDidUpdate',
+      value: function componentDidUpdate() {
+        if (this.refs.activeYear) {
+          this.scrollToActive();
+        }
+      }
+    }, {
+      key: 'componentWillUnmount',
+      value: function componentWillUnmount() {
+        document.body.removeEventListener('keydown', this.handleKeys);
+      }
+    }, {
+      key: 'scrollToActive',
+      value: function scrollToActive() {
+        this.refs.years.scrollTop = this.refs.activeYear.offsetTop - this.refs.years.offsetHeight / 2 + this.refs.activeYear.offsetHeight / 2;
+      }
+    }, {
+      key: 'renderYears',
+      value: function renderYears() {
+        var _this2 = this;
+
+        return _react2.default.createElement(
+          'ul',
+          { 'data-react-toolbox': 'years', ref: 'years', className: this.props.theme.years },
+          _utils2.default.range(1900, 2100).map(function (year) {
+            return _react2.default.createElement('li', {
+              children: year,
+              className: year === _this2.state.viewDate.getFullYear() ? _this2.props.theme.active : '',
+              id: year,
+              key: year,
+              onClick: _this2.handleYearClick,
+              ref: year === _this2.state.viewDate.getFullYear() ? 'activeYear' : undefined
+            });
+          })
+        );
+      }
+    }, {
+      key: 'renderMonths',
+      value: function renderMonths() {
+        var theme = this.props.theme;
+
+        var animation = this.state.direction === 'left' ? _animations.SlideLeft : _animations.SlideRight;
+        return _react2.default.createElement(
+          'div',
+          { 'data-react-toolbox': 'calendar' },
+          _react2.default.createElement(IconButton, { id: 'left', className: theme.prev, icon: 'chevron_left', onClick: this.changeViewMonth }),
+          _react2.default.createElement(IconButton, { id: 'right', className: theme.next, icon: 'chevron_right', onClick: this.changeViewMonth }),
+          _react2.default.createElement(
+            _reactAddonsCssTransitionGroup2.default,
+            { transitionName: animation, transitionEnterTimeout: 350, transitionLeaveTimeout: 350 },
+            _react2.default.createElement(_CalendarMonth2.default, {
+              enabledDates: this.props.enabledDates,
+              disabledDates: this.props.disabledDates,
+              key: this.state.viewDate.getMonth(),
+              locale: this.props.locale,
+              maxDate: this.props.maxDate,
+              minDate: this.props.minDate,
+              onDayClick: this.handleDayClick,
+              selectedDate: this.props.selectedDate,
+              sundayFirstDayOfWeek: this.props.sundayFirstDayOfWeek,
+              theme: this.props.theme,
+              viewDate: this.state.viewDate
+            })
+          )
+        );
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        return _react2.default.createElement(
+          'div',
+          { className: this.props.theme.calendar },
+          this.props.display === 'months' ? this.renderMonths() : this.renderYears()
+        );
+      }
+    }]);
+
+    return Calendar;
+  }(_react.Component);
+
+  Calendar.propTypes = {
+    disabledDates: _react2.default.PropTypes.array,
+    display: _react.PropTypes.oneOf(['months', 'years']),
+    enabledDates: _react2.default.PropTypes.array,
+    handleSelect: _react.PropTypes.func,
+    locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
+    maxDate: _react.PropTypes.object,
+    minDate: _react.PropTypes.object,
+    onChange: _react.PropTypes.func,
+    selectedDate: _react.PropTypes.object,
+    sundayFirstDayOfWeek: _react2.default.PropTypes.bool,
+    theme: _react.PropTypes.shape({
+      active: _react.PropTypes.string,
+      calendar: _react.PropTypes.string,
+      next: _react.PropTypes.string,
+      prev: _react.PropTypes.string,
+      years: _react.PropTypes.string
+    }),
+    viewDate: _react.PropTypes.object
+  };
+  Calendar.defaultProps = {
+    display: 'months',
+    selectedDate: new Date()
+  };
+
+
+  return Calendar;
+};
+
+exports.default = factory;
\ No newline at end of file
diff --git a/lib/date_picker/CalendarDay.js b/lib/date_picker/CalendarDay.js
new file mode 100644
index 000000000..0fcccb182
--- /dev/null
+++ b/lib/date_picker/CalendarDay.js
@@ -0,0 +1,106 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _time = require('../utils/time.js');
+
+var _time2 = _interopRequireDefault(_time);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var Day = function (_Component) {
+  _inherits(Day, _Component);
+
+  function Day() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck(this, Day);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Day.__proto__ || Object.getPrototypeOf(Day)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function () {
+      if (!_this.props.disabled && _this.props.onClick) {
+        _this.props.onClick(_this.props.day);
+      }
+    }, _temp), _possibleConstructorReturn(_this, _ret);
+  }
+
+  _createClass(Day, [{
+    key: 'dayStyle',
+    value: function dayStyle() {
+      if (this.props.day === 1) {
+        var e = this.props.sundayFirstDayOfWeek ? 0 : 1;
+        var firstDay = _time2.default.getFirstWeekDay(this.props.viewDate) - e;
+        return {
+          marginLeft: (firstDay >= 0 ? firstDay : 6) * 100 / 7 + '%'
+        };
+      }
+    }
+  }, {
+    key: 'isSelected',
+    value: function isSelected() {
+      var sameYear = this.props.viewDate.getFullYear() === this.props.selectedDate.getFullYear();
+      var sameMonth = this.props.viewDate.getMonth() === this.props.selectedDate.getMonth();
+      var sameDay = this.props.day === this.props.selectedDate.getDate();
+      return sameYear && sameMonth && sameDay;
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _classnames;
+
+      var className = (0, _classnames3.default)(this.props.theme.day, (_classnames = {}, _defineProperty(_classnames, this.props.theme.active, this.isSelected()), _defineProperty(_classnames, this.props.theme.disabled, this.props.disabled), _classnames));
+
+      return _react2.default.createElement(
+        'div',
+        { 'data-react-toolbox': 'day', className: className, style: this.dayStyle() },
+        _react2.default.createElement(
+          'span',
+          { onClick: this.handleClick },
+          this.props.day
+        )
+      );
+    }
+  }]);
+
+  return Day;
+}(_react.Component);
+
+Day.propTypes = {
+  day: _react.PropTypes.number,
+  disabled: _react.PropTypes.bool,
+  onClick: _react.PropTypes.func,
+  selectedDate: _react.PropTypes.object,
+  sundayFirstDayOfWeek: _react.PropTypes.bool,
+  theme: _react.PropTypes.shape({
+    active: _react.PropTypes.string,
+    day: _react.PropTypes.string,
+    disabled: _react.PropTypes.string
+  }),
+  viewDate: _react.PropTypes.object
+};
+exports.default = Day;
\ No newline at end of file
diff --git a/lib/date_picker/CalendarMonth.js b/lib/date_picker/CalendarMonth.js
new file mode 100644
index 000000000..c52fe86c4
--- /dev/null
+++ b/lib/date_picker/CalendarMonth.js
@@ -0,0 +1,157 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _time = require('../utils/time.js');
+
+var _time2 = _interopRequireDefault(_time);
+
+var _utils = require('../utils/utils.js');
+
+var _utils2 = _interopRequireDefault(_utils);
+
+var _CalendarDay = require('./CalendarDay.js');
+
+var _CalendarDay2 = _interopRequireDefault(_CalendarDay);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var Month = function (_Component) {
+  _inherits(Month, _Component);
+
+  function Month() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck(this, Month);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Month.__proto__ || Object.getPrototypeOf(Month)).call.apply(_ref, [this].concat(args))), _this), _this.handleDayClick = function (day) {
+      if (_this.props.onDayClick) _this.props.onDayClick(day);
+    }, _temp), _possibleConstructorReturn(_this, _ret);
+  }
+
+  _createClass(Month, [{
+    key: 'isDayDisabled',
+    value: function isDayDisabled(date) {
+      var _props = this.props,
+          minDate = _props.minDate,
+          maxDate = _props.maxDate,
+          enabledDates = _props.enabledDates,
+          disabledDates = _props.disabledDates;
+
+      var compareDate = function compareDate(compDate) {
+        return date.getTime() === compDate.getTime();
+      };
+      var dateInDisabled = disabledDates.filter(compareDate).length > 0;
+      var dateInEnabled = enabledDates.filter(compareDate).length > 0;
+      return _time2.default.dateOutOfRange(date, minDate, maxDate) || enabledDates.length > 0 && !dateInEnabled || dateInDisabled;
+    }
+  }, {
+    key: 'renderWeeks',
+    value: function renderWeeks() {
+      var _this2 = this;
+
+      var days = _utils2.default.range(0, 7).map(function (d) {
+        return _time2.default.getDayOfWeekLetter(d, _this2.props.locale);
+      });
+      var source = this.props.sundayFirstDayOfWeek ? days : [].concat(_toConsumableArray(days.slice(1)), [days[0]]);
+      return source.map(function (d, i) {
+        return _react2.default.createElement(
+          'span',
+          { key: i },
+          d
+        );
+      });
+    }
+  }, {
+    key: 'renderDays',
+    value: function renderDays() {
+      var _this3 = this;
+
+      return _utils2.default.range(1, _time2.default.getDaysInMonth(this.props.viewDate) + 1).map(function (i) {
+        var date = new Date(_this3.props.viewDate.getFullYear(), _this3.props.viewDate.getMonth(), i);
+        return _react2.default.createElement(_CalendarDay2.default, {
+          key: i,
+          day: i,
+          disabled: _this3.isDayDisabled(date),
+          onClick: _this3.handleDayClick,
+          selectedDate: _this3.props.selectedDate,
+          theme: _this3.props.theme,
+          viewDate: _this3.props.viewDate,
+          sundayFirstDayOfWeek: _this3.props.sundayFirstDayOfWeek
+        });
+      });
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      return _react2.default.createElement(
+        'div',
+        { 'data-react-toolbox': 'month', className: this.props.theme.month },
+        _react2.default.createElement(
+          'span',
+          { className: this.props.theme.title },
+          _time2.default.getFullMonth(this.props.viewDate, this.props.locale),
+          ' ',
+          this.props.viewDate.getFullYear()
+        ),
+        _react2.default.createElement(
+          'div',
+          { className: this.props.theme.week },
+          this.renderWeeks()
+        ),
+        _react2.default.createElement(
+          'div',
+          { className: this.props.theme.days },
+          this.renderDays()
+        )
+      );
+    }
+  }]);
+
+  return Month;
+}(_react.Component);
+
+Month.propTypes = {
+  disabledDates: _react2.default.PropTypes.array,
+  enabledDates: _react2.default.PropTypes.array,
+  locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
+  maxDate: _react.PropTypes.object,
+  minDate: _react.PropTypes.object,
+  onDayClick: _react.PropTypes.func,
+  selectedDate: _react.PropTypes.object,
+  sundayFirstDayOfWeek: _react2.default.PropTypes.bool,
+  theme: _react.PropTypes.shape({
+    days: _react.PropTypes.string,
+    month: _react.PropTypes.string,
+    title: _react.PropTypes.string,
+    week: _react.PropTypes.string
+  }),
+  viewDate: _react.PropTypes.object
+};
+Month.defaultProps = {
+  disabledDates: [],
+  enabledDates: []
+};
+exports.default = Month;
\ No newline at end of file
diff --git a/lib/date_picker/DatePicker.js b/lib/date_picker/DatePicker.js
new file mode 100644
index 000000000..b9d0a7f2e
--- /dev/null
+++ b/lib/date_picker/DatePicker.js
@@ -0,0 +1,233 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatePicker = exports.datePickerFactory = exports.DatePickerDialog = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _events = require('../utils/events.js');
+
+var _events2 = _interopRequireDefault(_events);
+
+var _time = require('../utils/time.js');
+
+var _time2 = _interopRequireDefault(_time);
+
+var _IconButton = require('../button/IconButton.js');
+
+var _IconButton2 = _interopRequireDefault(_IconButton);
+
+var _Input = require('../input/Input.js');
+
+var _Input2 = _interopRequireDefault(_Input);
+
+var _Dialog = require('../dialog/Dialog.js');
+
+var _Dialog2 = _interopRequireDefault(_Dialog);
+
+var _Calendar = require('./Calendar.js');
+
+var _Calendar2 = _interopRequireDefault(_Calendar);
+
+var _DatePickerDialog = require('./DatePickerDialog.js');
+
+var _DatePickerDialog2 = _interopRequireDefault(_DatePickerDialog);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(Input, DatePickerDialog) {
+  var DatePicker = function (_Component) {
+    _inherits(DatePicker, _Component);
+
+    function DatePicker() {
+      var _ref;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, DatePicker);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = DatePicker.__proto__ || Object.getPrototypeOf(DatePicker)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+        active: _this.props.active
+      }, _this.handleDismiss = function () {
+        _this.setState({ active: false });
+        if (_this.props.onDismiss) {
+          _this.props.onDismiss();
+        }
+      }, _this.handleInputFocus = function (event) {
+        _events2.default.pauseEvent(event);
+        _this.setState({ active: true });
+      }, _this.handleInputBlur = function (event) {
+        _events2.default.pauseEvent(event);
+        _this.setState({ active: false });
+      }, _this.handleInputClick = function (event) {
+        _events2.default.pauseEvent(event);
+        _this.setState({ active: true });
+        if (_this.props.onClick) _this.props.onClick(event);
+      }, _this.handleInputKeyPress = function (event) {
+        if (event.charCode === 13) {
+          _events2.default.pauseEvent(event);
+          _this.setState({ active: true });
+        }
+        if (_this.props.onKeyPress) _this.props.onKeyPress(event);
+      }, _this.handleSelect = function (value, event) {
+        if (_this.props.onChange) _this.props.onChange(value, event);
+        _this.setState({ active: false });
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(DatePicker, [{
+      key: 'componentWillReceiveProps',
+      value: function componentWillReceiveProps(nextProps) {
+        if (nextProps.active !== this.props.active && this.state.active !== nextProps.active) {
+          this.setState({ active: nextProps.active });
+        }
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _props = this.props,
+            active = _props.active,
+            onDismiss = _props.onDismiss,
+            autoOk = _props.autoOk,
+            cancelLabel = _props.cancelLabel,
+            enabledDates = _props.enabledDates,
+            disabledDates = _props.disabledDates,
+            inputClassName = _props.inputClassName,
+            inputFormat = _props.inputFormat,
+            locale = _props.locale,
+            maxDate = _props.maxDate,
+            minDate = _props.minDate,
+            okLabel = _props.okLabel,
+            onEscKeyDown = _props.onEscKeyDown,
+            onOverlayClick = _props.onOverlayClick,
+            readonly = _props.readonly,
+            sundayFirstDayOfWeek = _props.sundayFirstDayOfWeek,
+            value = _props.value,
+            others = _objectWithoutProperties(_props, ['active', 'onDismiss', 'autoOk', 'cancelLabel', 'enabledDates', 'disabledDates', 'inputClassName', 'inputFormat', 'locale', 'maxDate', 'minDate', 'okLabel', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'sundayFirstDayOfWeek', 'value']);
+
+        var finalInputFormat = inputFormat || _time2.default.formatDate;
+        var date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined;
+        var formattedDate = date === undefined ? '' : finalInputFormat(value, locale);
+
+        return _react2.default.createElement(
+          'div',
+          { 'data-react-toolbox': 'date-picker' },
+          _react2.default.createElement(Input, _extends({}, others, {
+            className: (0, _classnames3.default)(this.props.theme.input, _defineProperty({}, inputClassName, inputClassName)),
+            disabled: readonly,
+            error: this.props.error,
+            icon: this.props.icon,
+            label: this.props.label,
+            name: this.props.name,
+            onFocus: this.handleInputFocus,
+            onKeyPress: this.handleInputKeyPress,
+            onClick: this.handleInputClick,
+            readOnly: true,
+            type: 'text',
+            value: formattedDate
+          })),
+          _react2.default.createElement(DatePickerDialog, {
+            active: this.state.active,
+            autoOk: autoOk,
+            cancelLabel: cancelLabel,
+            className: this.props.className,
+            disabledDates: disabledDates,
+            enabledDates: enabledDates,
+            locale: locale,
+            maxDate: maxDate,
+            minDate: minDate,
+            name: this.props.name,
+            onDismiss: this.handleDismiss,
+            okLabel: okLabel,
+            onEscKeyDown: onEscKeyDown || this.handleDismiss,
+            onOverlayClick: onOverlayClick || this.handleDismiss,
+            onSelect: this.handleSelect,
+            sundayFirstDayOfWeek: sundayFirstDayOfWeek,
+            theme: this.props.theme,
+            value: date
+          })
+        );
+      }
+    }]);
+
+    return DatePicker;
+  }(_react.Component);
+
+  DatePicker.propTypes = {
+    active: _react.PropTypes.bool,
+    autoOk: _react.PropTypes.bool,
+    cancelLabel: _react.PropTypes.string,
+    className: _react.PropTypes.string,
+    disabledDates: _react2.default.PropTypes.array,
+    enabledDates: _react2.default.PropTypes.array,
+    error: _react.PropTypes.string,
+    icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    inputClassName: _react.PropTypes.string,
+    inputFormat: _react.PropTypes.func,
+    label: _react.PropTypes.string,
+    locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
+    maxDate: _react.PropTypes.object,
+    minDate: _react.PropTypes.object,
+    name: _react.PropTypes.string,
+    okLabel: _react.PropTypes.string,
+    onChange: _react.PropTypes.func,
+    onClick: _react.PropTypes.func,
+    onDismiss: _react.PropTypes.func,
+    onEscKeyDown: _react.PropTypes.func,
+    onKeyPress: _react.PropTypes.func,
+    onOverlayClick: _react.PropTypes.func,
+    readonly: _react.PropTypes.bool,
+    sundayFirstDayOfWeek: _react2.default.PropTypes.bool,
+    theme: _react.PropTypes.shape({
+      input: _react.PropTypes.string
+    }),
+    value: _react.PropTypes.oneOfType([_react.PropTypes.instanceOf(Date), _react.PropTypes.string])
+  };
+  DatePicker.defaultProps = {
+    active: false,
+    locale: 'en',
+    sundayFirstDayOfWeek: false
+  };
+
+
+  return DatePicker;
+};
+
+var Calendar = (0, _Calendar2.default)(_IconButton2.default);
+var DatePickerDialog = (0, _DatePickerDialog2.default)(_Dialog2.default, Calendar);
+var DatePicker = factory(_Input2.default, DatePickerDialog);
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.DATE_PICKER)(DatePicker);
+exports.DatePickerDialog = DatePickerDialog;
+exports.datePickerFactory = factory;
+exports.DatePicker = DatePicker;
\ No newline at end of file
diff --git a/lib/date_picker/DatePickerDialog.js b/lib/date_picker/DatePickerDialog.js
new file mode 100644
index 000000000..e214a9a96
--- /dev/null
+++ b/lib/date_picker/DatePickerDialog.js
@@ -0,0 +1,186 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _time = require('../utils/time.js');
+
+var _time2 = _interopRequireDefault(_time);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(Dialog, Calendar) {
+  var CalendarDialog = function (_Component) {
+    _inherits(CalendarDialog, _Component);
+
+    function CalendarDialog() {
+      var _ref;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, CalendarDialog);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = CalendarDialog.__proto__ || Object.getPrototypeOf(CalendarDialog)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+        display: 'months',
+        date: _this.props.value
+      }, _this.handleNewDate = function (value, dayClick) {
+        var state = { display: 'months', date: value };
+        if (_time2.default.dateOutOfRange(value, _this.props.minDate, _this.props.maxDate)) {
+          if (_this.props.maxDate && _this.props.minDate) {
+            state.date = _time2.default.closestDate(value, _this.props.maxDate, _this.props.minDate);
+          } else {
+            state.date = _this.props.maxDate || _this.props.minDate;
+          }
+        }
+        _this.setState(state);
+        if (dayClick && _this.props.autoOk && _this.props.onSelect) {
+          _this.props.onSelect(value);
+        }
+      }, _this.handleSelect = function (event) {
+        if (_this.props.onSelect) _this.props.onSelect(_this.state.date, event);
+      }, _this.handleSwitchDisplay = function (event) {
+        _this.setState({ display: event.target.id });
+      }, _this.updateStateDate = function (date) {
+        if (Object.prototype.toString.call(date) === '[object Date]') {
+          _this.handleNewDate(date, false);
+        }
+      }, _this.actions = [{ label: _this.props.cancelLabel, className: _this.props.theme.button, onClick: _this.props.onDismiss }, { label: _this.props.okLabel, className: _this.props.theme.button, name: _this.props.name, onClick: _this.handleSelect }], _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(CalendarDialog, [{
+      key: 'componentWillMount',
+      value: function componentWillMount() {
+        this.updateStateDate(this.props.value);
+      }
+    }, {
+      key: 'componentWillReceiveProps',
+      value: function componentWillReceiveProps(nextProps) {
+        this.updateStateDate(nextProps.value);
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var theme = this.props.theme;
+
+        var display = this.state.display + 'Display';
+        var className = (0, _classnames2.default)(theme.dialog, this.props.className);
+        var headerClassName = (0, _classnames2.default)(theme.header, theme[display]);
+        var shortDayOfWeek = _time2.default.getShortDayOfWeek(this.state.date.getDay(), this.props.locale);
+        var shortMonth = _time2.default.getShortMonth(this.state.date, this.props.locale);
+        var date = this.state.date.getDate();
+
+        return _react2.default.createElement(
+          Dialog,
+          {
+            actions: this.actions,
+            active: this.props.active,
+            className: className,
+            onEscKeyDown: this.props.onEscKeyDown,
+            onOverlayClick: this.props.onOverlayClick,
+            type: 'custom'
+          },
+          _react2.default.createElement(
+            'header',
+            { className: headerClassName },
+            _react2.default.createElement(
+              'span',
+              { id: 'years', className: theme.year, onClick: this.handleSwitchDisplay },
+              this.state.date.getFullYear()
+            ),
+            _react2.default.createElement(
+              'h3',
+              { id: 'months', className: theme.date, onClick: this.handleSwitchDisplay },
+              shortDayOfWeek,
+              ', ',
+              shortMonth,
+              ' ',
+              date
+            )
+          ),
+          _react2.default.createElement(
+            'div',
+            { className: theme.calendarWrapper },
+            _react2.default.createElement(Calendar, {
+              disabledDates: this.props.disabledDates,
+              display: this.state.display,
+              enabledDates: this.props.enabledDates,
+              handleSelect: this.handleSelect,
+              maxDate: this.props.maxDate,
+              minDate: this.props.minDate,
+              onChange: this.handleNewDate,
+              selectedDate: this.state.date,
+              theme: this.props.theme,
+              locale: this.props.locale,
+              sundayFirstDayOfWeek: this.props.sundayFirstDayOfWeek
+            })
+          )
+        );
+      }
+    }]);
+
+    return CalendarDialog;
+  }(_react.Component);
+
+  CalendarDialog.propTypes = {
+    active: _react.PropTypes.bool,
+    autoOk: _react.PropTypes.bool,
+    cancelLabel: _react.PropTypes.string,
+    className: _react.PropTypes.string,
+    disabledDates: _react.PropTypes.array,
+    enabledDates: _react.PropTypes.array,
+    locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
+    maxDate: _react.PropTypes.object,
+    minDate: _react.PropTypes.object,
+    name: _react.PropTypes.string,
+    okLabel: _react.PropTypes.string,
+    onDismiss: _react.PropTypes.func,
+    onEscKeyDown: _react.PropTypes.func,
+    onOverlayClick: _react.PropTypes.func,
+    onSelect: _react.PropTypes.func,
+    sundayFirstDayOfWeek: _react2.default.PropTypes.bool,
+    theme: _react.PropTypes.shape({
+      button: _react.PropTypes.string,
+      calendarWrapper: _react.PropTypes.string,
+      date: _react.PropTypes.string,
+      dialog: _react.PropTypes.string,
+      header: _react.PropTypes.string,
+      monthsDisplay: _react.PropTypes.string,
+      year: _react.PropTypes.string,
+      yearsDisplay: _react.PropTypes.string
+    }),
+    value: _react.PropTypes.object
+  };
+  CalendarDialog.defaultProps = {
+    active: false,
+    cancelLabel: 'Cancel',
+    className: '',
+    okLabel: 'Ok',
+    value: new Date()
+  };
+
+
+  return CalendarDialog;
+};
+
+exports.default = factory;
\ No newline at end of file
diff --git a/lib/date_picker/__test__/index.spec.js b/lib/date_picker/__test__/index.spec.js
new file mode 100644
index 000000000..169eba080
--- /dev/null
+++ b/lib/date_picker/__test__/index.spec.js
@@ -0,0 +1,96 @@
+'use strict';
+
+var _expect = require('expect');
+
+var _expect2 = _interopRequireDefault(_expect);
+
+var _theme = require('../theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+var _DatePicker = require('../DatePicker');
+
+var _testing = require('../../utils/testing');
+
+var _testing2 = _interopRequireDefault(_testing);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('DatePickerDialog', function () {
+  describe('#on mount', function () {
+    it('passes value through to calendar if no maxDate/minDate specified', function () {
+      var value = new Date(2016, 1, 1);
+      var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, { theme: _theme2.default, value: value });
+      (0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(value);
+    });
+
+    describe('when minDate but not maxDate specified', function () {
+      var minDate = new Date(2016, 1, 2);
+
+      it('passes through a value after minDate', function () {
+        var value = new Date(2016, 1, 3);
+        var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, { theme: _theme2.default, value: value, minDate: minDate });
+        (0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(value);
+      });
+
+      it('sanitises a value before minDate to minDate', function () {
+        var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, {
+          theme: _theme2.default, value: new Date(2016, 1, 1), minDate: minDate
+        });
+        (0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(minDate);
+      });
+    });
+
+    describe('when maxDate but not minDate specified', function () {
+      var maxDate = new Date(2016, 1, 2);
+
+      it('passes through a value before maxDate', function () {
+        var value = new Date(2016, 1, 1);
+        var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, { theme: _theme2.default, value: value, maxDate: maxDate });
+        (0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(value);
+      });
+
+      it('sanitises a value after maxDate to maxDate', function () {
+        var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, {
+          theme: _theme2.default, value: new Date(2016, 1, 3), maxDate: maxDate
+        });
+        (0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(maxDate);
+      });
+    });
+
+    describe('if both minDate and maxDate are set', function () {
+      var minDate = new Date(2016, 1, 2);
+      var maxDate = new Date(2016, 1, 4);
+
+      it('sanitises value to minDate if value is before minDate', function () {
+        var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, {
+          theme: _theme2.default,
+          value: new Date(2016, 1, 1),
+          minDate: minDate,
+          maxDate: maxDate
+        });
+        (0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(minDate);
+      });
+
+      it('sanitises value to maxDate if value is after maxDate', function () {
+        var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, {
+          theme: _theme2.default,
+          value: new Date(2016, 1, 5),
+          minDate: minDate,
+          maxDate: maxDate
+        });
+        (0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(maxDate);
+      });
+
+      it('doesn\'t sanitise when value is between maxDate/minDate', function () {
+        var value = new Date(2016, 1, 3);
+        var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, { theme: _theme2.default, value: value, minDate: minDate, maxDate: maxDate });
+        (0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(value);
+      });
+    });
+
+    function getDatePassedToCalendar(wrapper) {
+      return wrapper.props.children[1].props.children.props.selectedDate;
+    }
+  });
+});
\ No newline at end of file
diff --git a/lib/date_picker/_config.scss b/lib/date_picker/_config.scss
new file mode 100644
index 000000000..62acee078
--- /dev/null
+++ b/lib/date_picker/_config.scss
@@ -0,0 +1,31 @@
+$datepicker-primary: $color-primary !default;
+$datepicker-primary-contrast: $color-primary-contrast !default;
+$datepicker-primary-dark: $color-primary-dark !default;
+$datepicker-primary-color: $datepicker-primary !default;
+$datepicker-primary-hover-color: rgba($datepicker-primary, .2) !default;
+$datepicker-primary-contrast-color: $datepicker-primary-contrast !default;
+$datepicker-primary-dark-color: $datepicker-primary-dark !default;
+$datepicker-dialog-width: 33 * $unit !default;
+$datepicker-inactive-opacity: .6 !default;
+$datepicker-weekday-line-height: 2 * $unit !default;
+$datepicker-weekday-font-size: $font-size-small !default;
+$datepicker-month-font-size: $font-size-big !default;
+$datepicker-day-font-size: 5 * $unit !default;
+$datepicker-day-line-height: 4 * $unit !default;
+$datepicker-year-font-size: $font-size-small !default;
+
+$calendar-primary: $color-primary !default;
+$calendar-primary-contrast: $color-primary-contrast !default;
+$calendar-primary-color: $calendar-primary !default;
+$calendar-primary-contrast-color: $calendar-primary-contrast !default;
+$calendar-primary-hover-color: rgba($calendar-primary, .21) !default;
+$calendar-arrows-color: $palette-grey-600 !default;
+$calendar-arrows-font-size: 2 * $unit !default;
+$calendar-year-font-size: 2.4 * $unit !default;
+$calendar-day-font-size: 1.3 * $unit !default;
+$calendar-day-disable-opacity: 0.25 !default;
+$calendar-row-height: 3 * $unit !default;
+$calendar-day-padding-topbottom: .2 * $unit !default;
+$calendar-day-padding-leftright: 0 !default;
+$calendar-title-height: 3.6 * $unit !default;
+$calendar-total-height: $calendar-row-height * 7 + $calendar-title-height + $calendar-day-padding-topbottom * 12 !default;
diff --git a/lib/date_picker/index.d.ts b/lib/date_picker/index.d.ts
new file mode 100644
index 000000000..6a8ffe91e
--- /dev/null
+++ b/lib/date_picker/index.d.ts
@@ -0,0 +1,153 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface DatePickerTheme {
+  /**
+   * Used for the active day and year.
+   */
+  active?: string;
+  /**
+   * Used for the buttons in the dialog.
+   */
+  button?: string;
+  /**
+   * Used for the calendar root element.
+   */
+  calendar?: string;
+  /**
+   * Used as wrapper for the calendar component inside dialog.
+   */
+  calendarWrapper?: string;
+  /**
+   * Used for the date element inside header.
+   */
+  date?: string;
+  /**
+   * Used for the day element inside the calendar.
+   */
+  day?: string;
+  /**
+   * Used for the list of days inside a month.
+   */
+  days?: string;
+  /**
+   * Used for the dialog component.
+   */
+  dialog?: string;
+  /**
+   * Added to day element when day is disabled.
+   */
+  disabled?: string;
+  /**
+   * Used for the dialog header,.
+   */
+  header?: string;
+  /**
+   * Used for Input element that opens the picker.
+   */
+  input?: string;
+  /**
+   * Used for the month root element.
+   */
+  month?: string;
+  /**
+   * Added to the root dialog when months are displayed.
+   */
+  monthsDisplay?: string;
+  /**
+   * Used for the next month icon.
+   */
+  next?: string;
+  /**
+   * Used for the prev month icon.
+   */
+  prev?: string;
+  /**
+   * Used for the month title element.
+   */
+  title?: string;
+  /**
+   * Used for the weekdays wrapper.
+   */
+  week?: string;
+  /**
+   * Used for the year element inside header.
+   */
+  year?: string;
+  /**
+   * Used for the years list in years view.
+   */
+  years?: string;
+  /**
+   * Added to the root dialog when years are displayed.
+   */
+  yearsDisplay?: string;
+}
+
+interface DatePickerProps extends ReactToolbox.Props {
+  /**
+   * Automatically selects a date upon clicking on a day
+   * @default false
+   */
+  autoOk?: boolean;
+  /**
+   * Give an error node to display under the field.
+   */
+  error?: string;
+  /**
+   * A key to identify an Icon from Material Design Icons or a custom Icon Element.
+   */
+  icon?: React.ReactNode | string;
+  /**
+   * This class will be applied to Input component of DatePicker.
+   */
+  inputClassName?: string;
+  /**
+   * Function to format the date displayed on the input.
+   */
+  inputFormat?: Function;
+  /**
+   * The text string to use for the floating label element in the input component.
+   */
+  label?: string;
+  /**
+   * Date object with the maximum selectable date.
+   */
+  maxDate?: Date;
+  /**
+   * Date object with the minimum selectable date.
+   */
+  minDate?: Date;
+  /**
+   * Name for the input field.
+   */
+  name?: string;
+  /**
+   * Callback called when the picker value is changed.
+   */
+  onChange?: Function;
+  /**
+   * Callback called when the ESC key is pressed with the overlay active.
+   */
+  onEscKeyDown?: Function;
+  /**
+   * Callback to be invoked when the dialog overlay is clicked.
+   */
+  onOverlayClick?: Function;
+  /**
+   * The input element will be readonly and look like disabled.
+   */
+  readonly?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: DatePickerTheme;
+  /**
+   * Date object with the currently selected date.
+   */
+  value?: Date | string;
+}
+
+export class DatePicker extends React.Component<DatePickerProps, {}> { }
+
+export default DatePicker;
diff --git a/lib/date_picker/index.js b/lib/date_picker/index.js
new file mode 100644
index 000000000..887fdaf75
--- /dev/null
+++ b/lib/date_picker/index.js
@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatePickerDialog = exports.DatePicker = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _DatePicker = require('./DatePicker.js');
+
+var _DatePickerDialog = require('./DatePickerDialog.js');
+
+var _DatePickerDialog2 = _interopRequireDefault(_DatePickerDialog);
+
+var _Calendar = require('./Calendar.js');
+
+var _Calendar2 = _interopRequireDefault(_Calendar);
+
+var _button = require('../button');
+
+var _input = require('../input');
+
+var _input2 = _interopRequireDefault(_input);
+
+var _dialog = require('../dialog');
+
+var _dialog2 = _interopRequireDefault(_dialog);
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Calendar = (0, _Calendar2.default)(_button.IconButton);
+var DatePickerDialog = (0, _DatePickerDialog2.default)(_dialog2.default, Calendar);
+var DatePicker = (0, _DatePicker.datePickerFactory)(_input2.default, DatePickerDialog);
+
+var ThemedDatePicker = (0, _reactCssThemr.themr)(_identifiers.DATE_PICKER, _theme2.default)(DatePicker);
+exports.default = ThemedDatePicker;
+exports.DatePicker = ThemedDatePicker;
+
+
+var ThemedDatePickerDialog = (0, _reactCssThemr.themr)(_identifiers.DIALOG, _theme2.default)(DatePickerDialog);
+exports.DatePickerDialog = ThemedDatePickerDialog;
\ No newline at end of file
diff --git a/lib/date_picker/theme.scss b/lib/date_picker/theme.scss
new file mode 100644
index 000000000..a1ee39156
--- /dev/null
+++ b/lib/date_picker/theme.scss
@@ -0,0 +1,156 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+
+.input:not(.disabled) > .inputElement {
+  cursor: pointer;
+}
+
+.header {
+  padding: 1.6 * $unit 2 * $unit;
+  color: $datepicker-primary-contrast-color;
+  cursor: pointer;
+  background-color: $datepicker-primary-color;
+}
+
+.year {
+  display: inline-block;
+  font-size: $datepicker-year-font-size;
+  transition: opacity, font-size $animation-duration $animation-curve-default;
+}
+
+.date {
+  display: block;
+  font-weight: $font-weight-semi-bold;
+  text-transform: capitalize;
+  transition: opacity $animation-duration $animation-curve-default;
+}
+
+.calendarWrapper {
+  padding: $unit .5 * $unit 0;
+}
+
+.yearsDisplay {
+  .date {
+    opacity: $datepicker-inactive-opacity;
+  }
+  .year {
+    font-size: $font-size-normal;
+  }
+}
+
+.monthsDisplay {
+  .year {
+    opacity: $datepicker-inactive-opacity;
+  }
+}
+
+.dialog {
+  width: $datepicker-dialog-width;
+  > [role="body"] {
+    padding: 0;
+  }
+  > [role="navigation"] > .button {
+    color: $datepicker-primary-color;
+    &:hover {
+      background: $datepicker-primary-hover-color;
+    }
+    &:focus:not(:active) {
+      background: $datepicker-primary-hover-color;
+    }
+  }
+}
+
+.calendar {
+  position: relative;
+  height: $calendar-total-height;
+  overflow: hidden;
+  font-size: $font-size-small;
+  line-height: $calendar-row-height;
+  text-align: center;
+  background: $calendar-primary-contrast-color;
+  .prev, .next {
+    position: absolute;
+    top: 0;
+    z-index: $z-index-high;
+    height: 3.6 * $unit;
+    cursor: pointer;
+    opacity: .7;
+  }
+  .prev {
+    left: 0;
+  }
+  .next {
+    right: 0;
+  }
+}
+
+.title {
+  display: inline-block;
+  font-weight: 500;
+  line-height: $calendar-row-height;
+}
+
+.years {
+  height: 100%;
+  overflow-y: auto;
+  font-size: $font-size-big;
+  > li {
+    line-height: 2.4;
+    cursor: pointer;
+    &.active {
+      font-size: $calendar-year-font-size;
+      font-weight: $font-weight-semi-bold;
+      color: $calendar-primary-color;
+    }
+  }
+}
+
+.week {
+  display: flex;
+  height: $calendar-row-height;
+  flex-wrap: wrap;
+  font-size: $calendar-day-font-size;
+  line-height: $calendar-row-height;
+  opacity: .5;
+  > span {
+    flex: 0 0 (100% / 7);
+  }
+}
+
+.days {
+  display: flex;
+  flex-wrap: wrap;
+  font-size: $calendar-day-font-size;
+}
+
+.day {
+  flex: 0 0 (100% / 7);
+  padding: $calendar-day-padding-topbottom $calendar-day-padding-leftright;
+  > span {
+    display: inline-block;
+    width: $calendar-row-height;
+    height: $calendar-row-height;
+    line-height: $calendar-row-height;
+    border-radius: 50%;
+  }
+  &:hover:not(.active):not(.disabled) > span {
+    color: $calendar-primary-contrast-color;
+    background: $calendar-primary-hover-color;
+  }
+  &.active > span {
+    color: $calendar-primary-contrast-color;
+    background: $calendar-primary-color;
+  }
+  &:hover:not(.disabled) > span {
+    cursor: pointer;
+  }
+  &.disabled {
+    opacity: $calendar-day-disable-opacity;
+  }
+}
+
+.month {
+  background-color: $calendar-primary-contrast-color;
+}
diff --git a/lib/dialog/Dialog.js b/lib/dialog/Dialog.js
new file mode 100644
index 000000000..05e044d50
--- /dev/null
+++ b/lib/dialog/Dialog.js
@@ -0,0 +1,113 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dialogFactory = exports.Dialog = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _classnames3 = require('classnames');
+
+var _classnames4 = _interopRequireDefault(_classnames3);
+
+var _identifiers = require('../identifiers.js');
+
+var _ActivableRenderer = require('../hoc/ActivableRenderer.js');
+
+var _ActivableRenderer2 = _interopRequireDefault(_ActivableRenderer);
+
+var _Button = require('../button/Button.js');
+
+var _Button2 = _interopRequireDefault(_Button);
+
+var _Overlay = require('../overlay/Overlay.js');
+
+var _Overlay2 = _interopRequireDefault(_Overlay);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var factory = function factory(Overlay, Button) {
+  var Dialog = function Dialog(props) {
+    var actions = props.actions.map(function (action, idx) {
+      var className = (0, _classnames4.default)(props.theme.button, _defineProperty({}, action.className, action.className));
+      return _react2.default.createElement(Button, _extends({ key: idx }, action, { className: className }));
+    });
+
+    var className = (0, _classnames4.default)([props.theme.dialog, props.theme[props.type]], _defineProperty({}, props.theme.active, props.active), props.className);
+
+    return _react2.default.createElement(
+      Overlay,
+      {
+        active: props.active,
+        onClick: props.onOverlayClick,
+        onEscKeyDown: props.onEscKeyDown,
+        onMouseDown: props.onOverlayMouseDown,
+        onMouseMove: props.onOverlayMouseMove,
+        onMouseUp: props.onOverlayMouseUp
+      },
+      _react2.default.createElement(
+        'div',
+        { 'data-react-toolbox': 'dialog', className: className },
+        _react2.default.createElement(
+          'section',
+          { role: 'body', className: props.theme.body },
+          props.title ? _react2.default.createElement(
+            'h6',
+            { className: props.theme.title },
+            props.title
+          ) : null,
+          props.children
+        ),
+        actions.length ? _react2.default.createElement(
+          'nav',
+          { role: 'navigation', className: props.theme.navigation },
+          actions
+        ) : null
+      )
+    );
+  };
+
+  Dialog.propTypes = {
+    actions: _react.PropTypes.array,
+    active: _react.PropTypes.bool,
+    children: _react.PropTypes.node,
+    className: _react.PropTypes.string,
+    onEscKeyDown: _react.PropTypes.func,
+    onOverlayClick: _react.PropTypes.func,
+    onOverlayMouseDown: _react.PropTypes.func,
+    onOverlayMouseMove: _react.PropTypes.func,
+    onOverlayMouseUp: _react.PropTypes.func,
+    theme: _react.PropTypes.shape({
+      active: _react.PropTypes.string,
+      body: _react.PropTypes.string,
+      button: _react.PropTypes.string,
+      dialog: _react.PropTypes.string,
+      navigation: _react.PropTypes.string,
+      title: _react.PropTypes.string
+    }),
+    title: _react.PropTypes.string,
+    type: _react.PropTypes.string
+  };
+
+  Dialog.defaultProps = {
+    actions: [],
+    active: false,
+    type: 'normal'
+  };
+
+  return (0, _ActivableRenderer2.default)()(Dialog);
+};
+
+var Dialog = factory(_Overlay2.default, _Button2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.DIALOG)(Dialog);
+exports.Dialog = Dialog;
+exports.dialogFactory = factory;
\ No newline at end of file
diff --git a/lib/dialog/_config.scss b/lib/dialog/_config.scss
new file mode 100644
index 000000000..c522075c9
--- /dev/null
+++ b/lib/dialog/_config.scss
@@ -0,0 +1,6 @@
+$dialog-border-radius: .2 * $unit !default;
+$dialog-color-title: $color-black !default;
+$dialog-color-white: $color-white !default;
+$dialog-content-padding: 2.4 * $unit !default;
+$dialog-navigation-padding: .8 * $unit !default;
+$dialog-translate-y: 4 * $unit !default;
diff --git a/lib/dialog/index.d.ts b/lib/dialog/index.d.ts
new file mode 100644
index 000000000..eb95ee3ae
--- /dev/null
+++ b/lib/dialog/index.d.ts
@@ -0,0 +1,93 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface DialogTheme {
+  /**
+   * Used for the root when the dialog is active.
+   */
+  active?: string;
+  /**
+   * Used to wrap the dialog body.
+   */
+  body?: string;
+  /**
+   * Used in buttons when the dialog implements actions.
+   */
+  button?: string;
+  /**
+   * Used for the root element.
+   */
+  dialog?: string;
+  /**
+   * Used for the navigation element when it implements actions.
+   */
+  navigation?: string;
+  /**
+   * Used for the title element of the dialog.
+   */
+  title?: string;
+}
+
+interface DialogActionProps {
+  /**
+   * The text string to use for the name of the button.
+   */
+  label?: string;
+  /**
+   * Callback called when the component is clicked.
+   */
+  onClick?: Function;
+}
+
+interface DialogProps extends ReactToolbox.Props {
+  /**
+   * A array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons.
+   */
+  actions?: DialogActionProps[];
+  /**
+   * If true, the dialog will be active.
+   * @default false
+   */
+  active?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Callback called when the ESC key is pressed with the overlay active.
+   */
+  onEscKeyDown?: Function;
+  /**
+   * Callback to be invoked when the dialog overlay is clicked.
+   */
+  onOverlayClick?: Function;
+  /**
+   * Callback called when the mouse button is pressed on the overlay.
+   */
+  onOverlayMouseDown?: Function;
+  /**
+   * Callback called when the mouse is moving over the overlay.
+   */
+  onOverlayMouseMove?: Function;
+  /**
+   * Callback called when the mouse button is released over the overlay.
+   */
+  onOverlayMouseUp?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: DialogTheme;
+  /**
+   * The text string to use as standar title of the dialog.
+   */
+  title?: string;
+  /**
+   * Used to determine the size of the dialog. It can be small, normal or large.
+   * @default normal
+   */
+  type?: string;
+}
+
+export class Dialog extends React.Component<DialogProps, {}> { }
+
+export default Dialog;
diff --git a/lib/dialog/index.js b/lib/dialog/index.js
new file mode 100644
index 000000000..5a81c7e2c
--- /dev/null
+++ b/lib/dialog/index.js
@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Dialog = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Dialog = require('./Dialog.js');
+
+var _overlay = require('../overlay');
+
+var _overlay2 = _interopRequireDefault(_overlay);
+
+var _button = require('../button');
+
+var _button2 = _interopRequireDefault(_button);
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Dialog = (0, _Dialog.dialogFactory)(_overlay2.default, _button2.default);
+var ThemedDialog = (0, _reactCssThemr.themr)(_identifiers.DIALOG, _theme2.default)(Dialog);
+
+exports.default = ThemedDialog;
+exports.Dialog = ThemedDialog;
\ No newline at end of file
diff --git a/lib/dialog/theme.scss b/lib/dialog/theme.scss
new file mode 100644
index 000000000..8757bdf0b
--- /dev/null
+++ b/lib/dialog/theme.scss
@@ -0,0 +1,86 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+
+.dialog {
+  display: flex;
+  max-width: 96vw;
+  max-height: 96vh;
+  flex-direction: column;
+  background-color: $dialog-color-white;
+  border-radius: $dialog-border-radius;
+  box-shadow: $zdepth-shadow-5;
+  opacity: 0;
+  transition-delay: $animation-delay;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transition-property: opacity, transform;
+  transform: translateY(-$dialog-translate-y);
+  &.active {
+    opacity: 1;
+    transform: translateY(0%);
+  }
+}
+
+.small {
+  width: 30vw;
+
+  @media screen and (max-width: $layout-breakpoint-sm-tablet) {
+    width: 50vw;
+  }
+
+  @media screen and (max-width: $layout-breakpoint-xs) {
+    width: 75vw;
+  }
+}
+
+.normal {
+  width: 50vw;
+
+  @media screen and (max-width: $layout-breakpoint-xs) {
+    width: 96vw;
+  }
+}
+
+.large {
+  width: 96vw;
+}
+
+.fullscreen {
+  width: 96vw;
+
+  @media screen and (max-width: $layout-breakpoint-xs) {
+    width: 100vw;
+    max-width: 100vw;
+    min-height: 100vh;
+    max-height: 100vh;
+    border-radius: 0;
+  }
+}
+
+.title {
+  @include typo-title();
+  flex-grow: 0;
+  margin-bottom: 1.6 * $unit;
+  color: $dialog-color-title;
+}
+
+.body {
+  flex-grow: 2;
+  padding: $dialog-content-padding;
+  color: $color-text-secondary;
+}
+
+.navigation {
+  flex-grow: 0;
+  padding: $dialog-navigation-padding;
+  text-align: right;
+}
+
+.button {
+  min-width: 0;
+  padding-right: $dialog-navigation-padding;
+  padding-left: $dialog-navigation-padding;
+  margin-left: $dialog-navigation-padding;
+}
diff --git a/lib/drawer/Drawer.js b/lib/drawer/Drawer.js
new file mode 100644
index 000000000..608253e8e
--- /dev/null
+++ b/lib/drawer/Drawer.js
@@ -0,0 +1,85 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Drawer = exports.drawerFactory = undefined;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _identifiers = require('../identifiers.js');
+
+var _ActivableRenderer = require('../hoc/ActivableRenderer.js');
+
+var _ActivableRenderer2 = _interopRequireDefault(_ActivableRenderer);
+
+var _Overlay = require('../overlay/Overlay.js');
+
+var _Overlay2 = _interopRequireDefault(_Overlay);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var factory = function factory(Overlay) {
+  var Drawer = function Drawer(_ref) {
+    var active = _ref.active,
+        children = _ref.children,
+        className = _ref.className,
+        onOverlayClick = _ref.onOverlayClick,
+        theme = _ref.theme,
+        type = _ref.type;
+
+    var _className = (0, _classnames3.default)([theme.drawer, theme[type]], _defineProperty({}, theme.active, active), className);
+
+    return _react2.default.createElement(
+      Overlay,
+      { active: active, onClick: onOverlayClick },
+      _react2.default.createElement(
+        'div',
+        { 'data-react-toolbox': 'drawer', className: _className },
+        _react2.default.createElement(
+          'aside',
+          { className: theme.content },
+          children
+        )
+      )
+    );
+  };
+
+  Drawer.propTypes = {
+    active: _react.PropTypes.bool,
+    children: _react.PropTypes.node,
+    className: _react.PropTypes.string,
+    onOverlayClick: _react.PropTypes.func,
+    theme: _react.PropTypes.shape({
+      active: _react.PropTypes.string,
+      content: _react.PropTypes.string,
+      drawer: _react.PropTypes.string,
+      left: _react.PropTypes.string,
+      right: _react.PropTypes.string
+    }),
+    type: _react.PropTypes.oneOf(['left', 'right'])
+  };
+
+  Drawer.defaultProps = {
+    active: false,
+    className: '',
+    type: 'left'
+  };
+
+  return (0, _ActivableRenderer2.default)()(Drawer);
+};
+
+var Drawer = factory(_Overlay2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.DRAWER)(Drawer);
+exports.drawerFactory = factory;
+exports.Drawer = Drawer;
\ No newline at end of file
diff --git a/lib/drawer/_config.scss b/lib/drawer/_config.scss
new file mode 100644
index 000000000..2401bc696
--- /dev/null
+++ b/lib/drawer/_config.scss
@@ -0,0 +1,4 @@
+$drawer-background-color: $palette-grey-50 !default;
+$drawer-border-color: $palette-grey-300 !default;
+$drawer-text-color: $palette-grey-800 !default;
+$drawer-width: 24 * $unit !default;
diff --git a/lib/drawer/index.d.ts b/lib/drawer/index.d.ts
new file mode 100644
index 000000000..2c0a84783
--- /dev/null
+++ b/lib/drawer/index.d.ts
@@ -0,0 +1,54 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface DrawerTheme {
+  /**
+   * Used for the root class when the drawer is active.
+   */
+  active?: string;
+  /**
+   * Used for the drawer content.
+   */
+  content?: string;
+  /**
+   * Root class.
+   */
+  drawer?: string;
+  /**
+   * Added to the root class when drawer is to the left.
+   */
+  left?: string;
+  /**
+   * Added to the root class when drawer is to the right.
+   */
+  right?: string;
+}
+
+interface DrawerProps extends ReactToolbox.Props {
+  /**
+   * If true, the drawer will be visible.
+   * @default false
+   */
+  active?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Callback function to be invoked when the overlay is clicked.
+   */
+  onOverlayClick?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: DrawerTheme;
+  /**
+   * Type of drawer. It can be left or right to display the drawer on the left or right side of the screen.
+   * @default left
+   */
+  type?: "left" | "right";
+}
+
+export class Drawer extends React.Component<DrawerProps, {}> { }
+
+export default Drawer;
diff --git a/lib/drawer/index.js b/lib/drawer/index.js
new file mode 100644
index 000000000..71d9a5ecc
--- /dev/null
+++ b/lib/drawer/index.js
@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Drawer = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _overlay = require('../overlay');
+
+var _Drawer = require('./Drawer.js');
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Drawer = (0, _Drawer.drawerFactory)(_overlay.Overlay);
+var ThemedDrawer = (0, _reactCssThemr.themr)(_identifiers.DRAWER, _theme2.default)(Drawer);
+
+exports.default = ThemedDrawer;
+exports.Drawer = ThemedDrawer;
\ No newline at end of file
diff --git a/lib/drawer/theme.scss b/lib/drawer/theme.scss
new file mode 100644
index 000000000..a089640a3
--- /dev/null
+++ b/lib/drawer/theme.scss
@@ -0,0 +1,43 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+
+.drawer {
+  @include shadow-2dp();
+  position: absolute;
+  top: 0;
+  display: block;
+  width: $drawer-width;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  color: $drawer-text-color;
+  pointer-events: none;
+  background-color: $drawer-background-color;
+  transition-delay: 0s;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transition-property: transform;
+  transform-style: preserve-3d;
+  will-change: transform;
+  &.active {
+    pointer-events: all;
+    transition-delay: $animation-delay;
+    transform: translateX(0);
+  }
+  &.right {
+    right: 0;
+    border-left: 1px solid $drawer-border-color;
+    &:not(.active) {
+      transform: translateX(100%);
+    }
+  }
+  &.left {
+    left: 0;
+    border-right: 1px solid $drawer-border-color;
+    &:not(.active) {
+      transform: translateX(- 100%);
+    }
+  }
+}
diff --git a/lib/dropdown/Dropdown.js b/lib/dropdown/Dropdown.js
new file mode 100644
index 000000000..55994c8ac
--- /dev/null
+++ b/lib/dropdown/Dropdown.js
@@ -0,0 +1,304 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Dropdown = exports.dropdownFactory = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactDom = require('react-dom');
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
+var _classnames3 = require('classnames');
+
+var _classnames4 = _interopRequireDefault(_classnames3);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Input = require('../input/Input.js');
+
+var _Input2 = _interopRequireDefault(_Input);
+
+var _events = require('../utils/events.js');
+
+var _events2 = _interopRequireDefault(_events);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(Input) {
+  var Dropdown = function (_Component) {
+    _inherits(Dropdown, _Component);
+
+    function Dropdown() {
+      var _ref;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, Dropdown);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Dropdown.__proto__ || Object.getPrototypeOf(Dropdown)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+        active: false,
+        up: false
+      }, _this.getDocumentEvents = function () {
+        return {
+          click: _this.handleDocumentClick,
+          touchend: _this.handleDocumentClick
+        };
+      }, _this.open = function () {
+        var client = event.target.getBoundingClientRect();
+        var screenHeight = window.innerHeight || document.documentElement.offsetHeight;
+        var up = _this.props.auto ? client.top > screenHeight / 2 + client.height : false;
+        if (_this.inputNode) _this.inputNode.blur();
+        _this.setState({ active: true, up: up });
+      }, _this.close = function () {
+        if (_this.state.active) {
+          _this.setState({ active: false });
+        }
+      }, _this.handleDocumentClick = function (event) {
+        if (_this.state.active && !_events2.default.targetIsDescendant(event, _reactDom2.default.findDOMNode(_this))) {
+          _this.setState({ active: false });
+        }
+      }, _this.handleClick = function (event) {
+        _this.open();
+        _events2.default.pauseEvent(event);
+        if (_this.props.onClick) _this.props.onClick(event);
+      }, _this.handleSelect = function (item, event) {
+        if (_this.props.onBlur) _this.props.onBlur(event);
+        if (!_this.props.disabled && _this.props.onChange) {
+          if (_this.props.name) {
+            event.target.name = _this.props.name;
+          }
+          _this.props.onChange(item, event);
+          _this.close();
+        }
+      }, _this.getSelectedItem = function () {
+        var _iteratorNormalCompletion = true;
+        var _didIteratorError = false;
+        var _iteratorError = undefined;
+
+        try {
+          for (var _iterator = _this.props.source[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+            var item = _step.value;
+
+            if (item.value === _this.props.value) return item;
+          }
+        } catch (err) {
+          _didIteratorError = true;
+          _iteratorError = err;
+        } finally {
+          try {
+            if (!_iteratorNormalCompletion && _iterator.return) {
+              _iterator.return();
+            }
+          } finally {
+            if (_didIteratorError) {
+              throw _iteratorError;
+            }
+          }
+        }
+
+        if (!_this.props.allowBlank) {
+          return _this.props.source[0];
+        }
+      }, _this.renderValue = function (item, idx) {
+        var theme = _this.props.theme;
+
+        var className = item.value === _this.props.value ? theme.selected : null;
+        return _react2.default.createElement(
+          'li',
+          { key: idx, className: className, onClick: _this.handleSelect.bind(_this, item.value) },
+          _this.props.template ? _this.props.template(item) : item.label
+        );
+      }, _this.handleFocus = function (event) {
+        event.stopPropagation();
+        if (!_this.props.disabled) _this.open();
+        if (_this.props.onFocus) _this.props.onFocus(event);
+      }, _this.handleBlur = function (event) {
+        event.stopPropagation();
+        if (_this.state.active) _this.close();
+        if (_this.props.onBlur) _this.props.onBlur(event);
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(Dropdown, [{
+      key: 'componentWillUpdate',
+      value: function componentWillUpdate(nextProps, nextState) {
+        if (!this.state.active && nextState.active) {
+          _events2.default.addEventsToDocument(this.getDocumentEvents());
+        }
+      }
+    }, {
+      key: 'componentDidUpdate',
+      value: function componentDidUpdate(prevProps, prevState) {
+        if (prevState.active && !this.state.active) {
+          _events2.default.removeEventsFromDocument(this.getDocumentEvents());
+        }
+      }
+    }, {
+      key: 'componentWillUnmount',
+      value: function componentWillUnmount() {
+        if (this.state.active) {
+          _events2.default.removeEventsFromDocument(this.getDocumentEvents());
+        }
+      }
+    }, {
+      key: 'renderTemplateValue',
+      value: function renderTemplateValue(selected) {
+        var _classnames;
+
+        var theme = this.props.theme;
+
+        var className = (0, _classnames4.default)(theme.field, (_classnames = {}, _defineProperty(_classnames, theme.errored, this.props.error), _defineProperty(_classnames, theme.disabled, this.props.disabled), _defineProperty(_classnames, theme.required, this.props.required), _classnames));
+
+        return _react2.default.createElement(
+          'div',
+          { className: className, onClick: this.handleClick },
+          _react2.default.createElement(
+            'div',
+            { className: theme.templateValue + ' ' + theme.value },
+            this.props.template(selected)
+          ),
+          this.props.label ? _react2.default.createElement(
+            'label',
+            { className: theme.label },
+            this.props.label,
+            this.props.required ? _react2.default.createElement(
+              'span',
+              { className: theme.required },
+              ' * '
+            ) : null
+          ) : null,
+          this.props.error ? _react2.default.createElement(
+            'span',
+            { className: theme.error },
+            this.props.error
+          ) : null
+        );
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _classnames2,
+            _this2 = this;
+
+        var _props = this.props,
+            allowBlank = _props.allowBlank,
+            auto = _props.auto,
+            required = _props.required,
+            onChange = _props.onChange,
+            onFocus = _props.onFocus,
+            onBlur = _props.onBlur,
+            source = _props.source,
+            template = _props.template,
+            theme = _props.theme,
+            others = _objectWithoutProperties(_props, ['allowBlank', 'auto', 'required', 'onChange', 'onFocus', 'onBlur', 'source', 'template', 'theme']);
+
+        var selected = this.getSelectedItem();
+        var className = (0, _classnames4.default)(theme.dropdown, (_classnames2 = {}, _defineProperty(_classnames2, theme.up, this.state.up), _defineProperty(_classnames2, theme.active, this.state.active), _defineProperty(_classnames2, theme.disabled, this.props.disabled), _defineProperty(_classnames2, theme.required, this.props.required), _classnames2), this.props.className);
+
+        return _react2.default.createElement(
+          'div',
+          {
+            className: className,
+            'data-react-toolbox': 'dropdown',
+            onBlur: this.handleBlur,
+            onFocus: this.handleFocus,
+            tabIndex: '0'
+          },
+          _react2.default.createElement(Input, _extends({}, others, {
+            tabIndex: '-1',
+            className: theme.value,
+            onClick: this.handleClick,
+            required: this.props.required,
+            readOnly: true,
+            ref: function ref(node) {
+              _this2.inputNode = node && node.getWrappedInstance();
+            },
+            type: template && selected ? 'hidden' : null,
+            value: selected && selected.label ? selected.label : ''
+          })),
+          template && selected ? this.renderTemplateValue(selected) : null,
+          _react2.default.createElement(
+            'ul',
+            { className: theme.values, ref: 'values' },
+            source.map(this.renderValue)
+          )
+        );
+      }
+    }]);
+
+    return Dropdown;
+  }(_react.Component);
+
+  Dropdown.propTypes = {
+    allowBlank: _react.PropTypes.bool,
+    auto: _react.PropTypes.bool,
+    className: _react.PropTypes.string,
+    disabled: _react.PropTypes.bool,
+    error: _react.PropTypes.string,
+    label: _react.PropTypes.string,
+    name: _react.PropTypes.string,
+    onBlur: _react.PropTypes.func,
+    onChange: _react.PropTypes.func,
+    onClick: _react.PropTypes.func,
+    onFocus: _react.PropTypes.func,
+    required: _react.PropTypes.bool,
+    source: _react.PropTypes.array.isRequired,
+    template: _react.PropTypes.func,
+    theme: _react.PropTypes.shape({
+      active: _react.PropTypes.string,
+      disabled: _react.PropTypes.string,
+      dropdown: _react.PropTypes.string,
+      error: _react.PropTypes.string,
+      errored: _react.PropTypes.string,
+      field: _react.PropTypes.string,
+      label: _react.PropTypes.string,
+      required: _react.PropTypes.string,
+      selected: _react.PropTypes.string,
+      templateValue: _react.PropTypes.string,
+      up: _react.PropTypes.string,
+      value: _react.PropTypes.string,
+      values: _react.PropTypes.string
+    }),
+    value: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number])
+  };
+  Dropdown.defaultProps = {
+    auto: true,
+    className: '',
+    allowBlank: true,
+    disabled: false,
+    required: false
+  };
+
+
+  return Dropdown;
+};
+
+var Dropdown = factory(_Input2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.DROPDOWN)(Dropdown);
+exports.dropdownFactory = factory;
+exports.Dropdown = Dropdown;
\ No newline at end of file
diff --git a/lib/dropdown/_config.scss b/lib/dropdown/_config.scss
new file mode 100644
index 000000000..364815c0b
--- /dev/null
+++ b/lib/dropdown/_config.scss
@@ -0,0 +1,6 @@
+$dropdown-color-white: $color-white !default;
+$dropdown-color-primary: $color-primary !default;
+$dropdown-color-primary-contrast: $color-primary-contrast !default;
+$dropdown-value-hover-background: $palette-grey-200 !default;
+$dropdown-overflow-max-height: 45vh !default;
+$dropdown-value-border-radius: .2 * $unit !default;
diff --git a/lib/dropdown/index.d.ts b/lib/dropdown/index.d.ts
new file mode 100644
index 000000000..2c0f207ed
--- /dev/null
+++ b/lib/dropdown/index.d.ts
@@ -0,0 +1,115 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface DropdownTheme {
+  /**
+   * Added to the root element when the dropdown is active.
+   */
+  active?: string;
+  /**
+   * Added to the root element when it's disabled.
+   */
+  disabled?: string;
+  /**
+   * Root element class.
+   */
+  dropdown?: string;
+  /**
+   * Used for the error element.
+   */
+  error?: string;
+  /**
+   * Added to the inner wrapper if it's errored.
+   */
+  errored?: string;
+  /**
+   * Used for the inner wrapper of the component.
+   */
+  field?: string;
+  /**
+   * Used for the the label element.
+   */
+  label?: string;
+  /**
+   * Used to highlight the selected value.
+   */
+  selected?: string;
+  /**
+   * Used as a wrapper for the given template value.
+   */
+  templateValue?: string;
+  /**
+   * Added to the root element when it's opening up.
+   */
+  up?: string;
+  /**
+   * Used for each value in the dropdown component.
+   */
+  value?: string;
+  /**
+   * Used for the list of values.
+   */
+  values?: string;
+}
+
+interface DropdownProps extends ReactToolbox.Props {
+  /**
+   * If true the dropdown will preselect the first item if the supplied value matches none of the options' values.
+   * @default true
+   */
+  allowBlank?: boolean;
+  /**
+   * If true, the dropdown will open up or down depending on the position in the screen.
+   * @default true
+   */
+  auto?: boolean;
+  /**
+   * Set the component as disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Give an error string to display under the field.
+   */
+  error?: string;
+  /**
+   * The text string to use for the floating label element.
+   */
+  label?: string;
+  /**
+   * Name for the input field.
+   */
+  name?: string;
+  /**
+   * Callback function that is fired when the component is blurred.
+   */
+  onBlur?: Function;
+  /**
+   * Callback function that is fired when the component's value changes.
+   */
+  onChange?: Function;
+  /**
+   * Callback function that is fired when the component is focused.
+   */
+  onFocus?: Function;
+  /**
+   * Array of data objects with the data to represent in the dropdown.
+   */
+  source: any[];
+  /**
+   * Callback function that returns a JSX template to represent the element.
+   */
+  template?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: DropdownTheme;
+  /**
+   * Default value using JSON data.
+   */
+  value?: string | number;
+}
+
+export class Dropdown extends React.Component<DropdownProps, {}> { }
+
+export default Dropdown;
diff --git a/lib/dropdown/index.js b/lib/dropdown/index.js
new file mode 100644
index 000000000..b2de898e7
--- /dev/null
+++ b/lib/dropdown/index.js
@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Dropdown = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Dropdown = require('./Dropdown.js');
+
+var _input = require('../input');
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Dropdown = (0, _Dropdown.dropdownFactory)(_input.Input);
+var ThemedDropdown = (0, _reactCssThemr.themr)(_identifiers.DROPDOWN, _theme2.default)(Dropdown);
+
+exports.default = ThemedDropdown;
+exports.Dropdown = ThemedDropdown;
\ No newline at end of file
diff --git a/lib/dropdown/theme.scss b/lib/dropdown/theme.scss
new file mode 100644
index 000000000..607afa2a6
--- /dev/null
+++ b/lib/dropdown/theme.scss
@@ -0,0 +1,138 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/input/config";
+@import "http://github.com/config";
+
+.dropdown {
+  position: relative;
+  &:not(.active) {
+    > .values {
+      max-height: 0;
+      visibility: hidden;
+    }
+  }
+  &.active {
+    > .label, > .value {
+      opacity: .5;
+    }
+    > .values {
+      max-height: $dropdown-overflow-max-height;
+      visibility: visible;
+      box-shadow: $zdepth-shadow-1;
+    }
+  }
+  &:not(.up) > .values {
+    top: 0;
+    bottom: auto;
+  }
+  &.up > .values {
+    top: auto;
+    bottom: 0;
+  }
+  &.disabled {
+    pointer-events: none;
+    cursor: normal;
+  }
+}
+
+.value {
+  > input {
+    cursor: pointer;
+  }
+  &:after {
+    $size: ($input-field-height / 7);
+    $border: $size solid transparent;
+    position: absolute;
+    top: 50%;
+    right: $input-chevron-offset;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+    content: "";
+    border-top: $size solid $input-text-bottom-border-color;
+    border-right: $border;
+    border-left: $border;
+    transition: transform $animation-duration $animation-curve-default;
+  }
+}
+
+.field {
+  position: relative;
+  padding: $input-padding 0;
+  cursor: pointer;
+  &.errored {
+    padding-bottom: 0;
+    > .label {
+      color: $input-text-error-color;
+    }
+    > .templateValue {
+      border-bottom: 1px solid $input-text-error-color;
+    }
+    > .label > .required {
+      color: $input-text-required-color;
+    }
+  }
+  &.disabled {
+    pointer-events: none;
+    cursor: normal;
+    > .templateValue {
+      border-bottom-style: dotted;
+      opacity: .7;
+    }
+  }
+}
+
+.templateValue {
+  position: relative;
+  min-height: $input-field-height;
+  padding: $input-field-padding 0;
+  color: $color-text;
+  background-color: $input-text-background-color;
+  border-bottom: 1px solid $input-text-bottom-border-color;
+}
+
+.label {
+  position: absolute;
+  top: $input-focus-label-top;
+  left: 0;
+  font-size: $input-label-font-size;
+  line-height: $input-field-font-size;
+  color: $input-text-label-color;
+  .required {
+    color: $input-text-required-color;
+  }
+}
+
+.error {
+  margin-bottom: - $input-underline-height;
+  font-size: $input-label-font-size;
+  line-height: $input-underline-height;
+  color: $input-text-error-color;
+}
+
+.values {
+  @include no-webkit-scrollbar;
+  position: absolute;
+  z-index: $z-index-high;
+  width: 100%;
+  overflow-y: auto;
+  list-style: none;
+  background-color: $dropdown-color-white;
+  border-radius: $dropdown-value-border-radius;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transition-property: max-height, box-shadow;
+  > * {
+    position: relative;
+    padding: $unit;
+    overflow: hidden;
+    cursor: pointer;
+    &:hover {
+      background-color: $dropdown-value-hover-background;
+    }
+    &.selected {
+      color: $dropdown-color-primary;
+    }
+  }
+}
diff --git a/lib/font_icon/FontIcon.js b/lib/font_icon/FontIcon.js
new file mode 100644
index 000000000..5438cac44
--- /dev/null
+++ b/lib/font_icon/FontIcon.js
@@ -0,0 +1,50 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FontIcon = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+var FontIcon = function FontIcon(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      value = _ref.value,
+      other = _objectWithoutProperties(_ref, ['children', 'className', 'value']);
+
+  return _react2.default.createElement(
+    'span',
+    _extends({
+      'data-react-toolbox': 'font-icon',
+      className: (0, _classnames2.default)({ 'material-icons': typeof value === 'string' || typeof children === 'string' }, className)
+    }, other),
+    value,
+    children
+  );
+};
+
+FontIcon.propTypes = {
+  children: _react.PropTypes.any,
+  className: _react.PropTypes.string,
+  value: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element])
+};
+
+FontIcon.defaultProps = {
+  className: ''
+};
+
+exports.default = FontIcon;
+exports.FontIcon = FontIcon;
\ No newline at end of file
diff --git a/lib/font_icon/index.d.ts b/lib/font_icon/index.d.ts
new file mode 100644
index 000000000..11ca3c014
--- /dev/null
+++ b/lib/font_icon/index.d.ts
@@ -0,0 +1,17 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+interface FontIconProps extends ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * The key string for the icon you want be displayed.
+   */
+  value?: React.ReactNode | string;
+}
+
+export class FontIcon extends React.Component<FontIconProps, {}> { }
+
+export default FontIcon;
diff --git a/lib/font_icon/index.js b/lib/font_icon/index.js
new file mode 100644
index 000000000..8f7ca8346
--- /dev/null
+++ b/lib/font_icon/index.js
@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FontIcon = undefined;
+
+var _FontIcon = require('./FontIcon.js');
+
+var _FontIcon2 = _interopRequireDefault(_FontIcon);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = _FontIcon2.default;
+exports.FontIcon = _FontIcon2.default;
\ No newline at end of file
diff --git a/lib/form/Form.js b/lib/form/Form.js
new file mode 100644
index 000000000..fe56e77f7
--- /dev/null
+++ b/lib/form/Form.js
@@ -0,0 +1,151 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Form = exports.formFactory = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _Autocomplete = require('../autocomplete/Autocomplete.js');
+
+var _Autocomplete2 = _interopRequireDefault(_Autocomplete);
+
+var _Button = require('../button/Button.js');
+
+var _Button2 = _interopRequireDefault(_Button);
+
+var _Checkbox = require('../checkbox/Checkbox.js');
+
+var _Checkbox2 = _interopRequireDefault(_Checkbox);
+
+var _DatePicker = require('../date_picker/DatePicker.js');
+
+var _DatePicker2 = _interopRequireDefault(_DatePicker);
+
+var _Dropdown = require('../dropdown/Dropdown.js');
+
+var _Dropdown2 = _interopRequireDefault(_Dropdown);
+
+var _Input = require('../input/Input.js');
+
+var _Input2 = _interopRequireDefault(_Input);
+
+var _RadioGroup = require('../radio/RadioGroup.js');
+
+var _RadioGroup2 = _interopRequireDefault(_RadioGroup);
+
+var _Slider = require('../slider/Slider.js');
+
+var _Slider2 = _interopRequireDefault(_Slider);
+
+var _Switch = require('../switch/Switch.js');
+
+var _Switch2 = _interopRequireDefault(_Switch);
+
+var _TimePicker = require('../time_picker/TimePicker.js');
+
+var _TimePicker2 = _interopRequireDefault(_TimePicker);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(Autocomplete, Button, Checkbox, DatePicker, Dropdown, Input, RadioGroup, Slider, Switch, TimePicker) {
+
+  var COMPONENTS = {
+    'autocomplete': Autocomplete,
+    'button': Button,
+    'checkbox': Checkbox,
+    'datepicker': DatePicker,
+    'dropdown': Dropdown,
+    'input': Input,
+    'radioGroup': RadioGroup,
+    'slider': Slider,
+    'switch': Switch,
+    'timepicker': TimePicker
+  };
+
+  var Form = function (_Component) {
+    _inherits(Form, _Component);
+
+    function Form() {
+      var _ref;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, Form);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Form.__proto__ || Object.getPrototypeOf(Form)).call.apply(_ref, [this].concat(args))), _this), _this.onSubmit = function (event) {
+        event.preventDefault();
+        if (_this.props.onSubmit) _this.props.onSubmit(event);
+      }, _this.onChange = function (field, value, event) {
+        if (_this.props.onChange) _this.props.onChange(field, value, event);
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(Form, [{
+      key: 'renderFields',
+      value: function renderFields() {
+        var _this2 = this;
+
+        return Object.keys(this.props.model).map(function (field, index) {
+          var properties = _this2.props.model[field];
+          var Field = COMPONENTS[properties.kind.toLowerCase()];
+          return _react2.default.createElement(Field, _extends({ key: index }, properties, { onChange: _this2.onChange.bind(_this2, field) }));
+        });
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        return _react2.default.createElement(
+          'form',
+          { 'data-react-toolbox': 'form', className: this.props.className, onSubmit: this.onSubmit },
+          this.renderFields(),
+          this.props.children
+        );
+      }
+    }]);
+
+    return Form;
+  }(_react.Component);
+
+  Form.propTypes = {
+    attributes: _react.PropTypes.array,
+    children: _react.PropTypes.node,
+    className: _react.PropTypes.string,
+    model: _react.PropTypes.object,
+    onChange: _react.PropTypes.func,
+    onError: _react.PropTypes.func,
+    onSubmit: _react.PropTypes.func,
+    onValid: _react.PropTypes.func,
+    storage: _react.PropTypes.string
+  };
+  Form.defaultProps = {
+    attributes: [],
+    className: ''
+  };
+
+
+  return Form;
+};
+
+var Form = factory(_Autocomplete2.default, _Button2.default, _Checkbox2.default, _DatePicker2.default, _Dropdown2.default, _Input2.default, _RadioGroup2.default, _Slider2.default, _Switch2.default, _TimePicker2.default);
+
+exports.default = Form;
+exports.formFactory = factory;
+exports.Form = Form;
\ No newline at end of file
diff --git a/lib/form/index.js b/lib/form/index.js
new file mode 100644
index 000000000..ee5d2741d
--- /dev/null
+++ b/lib/form/index.js
@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Form = undefined;
+
+var _Form = require('./Form.js');
+
+var _autocomplete = require('../autocomplete');
+
+var _autocomplete2 = _interopRequireDefault(_autocomplete);
+
+var _button = require('../button');
+
+var _button2 = _interopRequireDefault(_button);
+
+var _checkbox = require('../checkbox');
+
+var _checkbox2 = _interopRequireDefault(_checkbox);
+
+var _date_picker = require('../date_picker');
+
+var _date_picker2 = _interopRequireDefault(_date_picker);
+
+var _dropdown = require('../dropdown');
+
+var _dropdown2 = _interopRequireDefault(_dropdown);
+
+var _input = require('../input');
+
+var _input2 = _interopRequireDefault(_input);
+
+var _radio = require('../radio');
+
+var _radio2 = _interopRequireDefault(_radio);
+
+var _slider = require('../slider');
+
+var _slider2 = _interopRequireDefault(_slider);
+
+var _switch = require('../switch');
+
+var _switch2 = _interopRequireDefault(_switch);
+
+var _time_picker = require('../time_picker');
+
+var _time_picker2 = _interopRequireDefault(_time_picker);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ThemedForm = (0, _Form.formFactory)(_autocomplete2.default, _button2.default, _checkbox2.default, _date_picker2.default, _dropdown2.default, _input2.default, _radio2.default, _slider2.default, _switch2.default, _time_picker2.default);
+
+exports.default = ThemedForm;
+exports.Form = ThemedForm;
\ No newline at end of file
diff --git a/lib/hoc/ActivableRenderer.js b/lib/hoc/ActivableRenderer.js
new file mode 100644
index 000000000..09c34f986
--- /dev/null
+++ b/lib/hoc/ActivableRenderer.js
@@ -0,0 +1,113 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var ActivableRendererFactory = function ActivableRendererFactory() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : { delay: 500 };
+  return function (ActivableComponent) {
+    var _class, _temp2;
+
+    return _temp2 = _class = function (_Component) {
+      _inherits(ActivableRenderer, _Component);
+
+      function ActivableRenderer() {
+        var _ref;
+
+        var _temp, _this, _ret;
+
+        _classCallCheck(this, ActivableRenderer);
+
+        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ActivableRenderer.__proto__ || Object.getPrototypeOf(ActivableRenderer)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+          active: _this.props.active,
+          rendered: _this.props.active
+        }, _temp), _possibleConstructorReturn(_this, _ret);
+      }
+
+      _createClass(ActivableRenderer, [{
+        key: 'componentWillReceiveProps',
+        value: function componentWillReceiveProps(nextProps) {
+          if (nextProps.active && !this.props.active) this.renderAndActivate();
+          if (!nextProps.active && this.props.active) this.deactivateAndUnrender();
+        }
+      }, {
+        key: 'componentWillUnmount',
+        value: function componentWillUnmount() {
+          clearTimeout(this.activateTimeout);
+          clearTimeout(this.unrenderTimeout);
+        }
+      }, {
+        key: 'renderAndActivate',
+        value: function renderAndActivate() {
+          var _this2 = this;
+
+          if (this.unrenderTimeout) clearTimeout(this.unrenderTimeout);
+          this.setState({ rendered: true, active: false }, function () {
+            _this2.activateTimeout = setTimeout(function () {
+              return _this2.setState({ active: true });
+            }, 20);
+          });
+        }
+      }, {
+        key: 'deactivateAndUnrender',
+        value: function deactivateAndUnrender() {
+          var _this3 = this;
+
+          this.setState({ rendered: true, active: false }, function () {
+            _this3.unrenderTimeout = setTimeout(function () {
+              _this3.setState({ rendered: false });
+              _this3.unrenderTimeout = null;
+            }, _this3.props.delay);
+          });
+        }
+      }, {
+        key: 'render',
+        value: function render() {
+          var _props = this.props,
+              delay = _props.delay,
+              others = _objectWithoutProperties(_props, ['delay']); // eslint-disable-line no-unused-vars
+
+
+          var _state = this.state,
+              active = _state.active,
+              rendered = _state.rendered;
+
+          return rendered ? _react2.default.createElement(ActivableComponent, _extends({}, others, { active: active })) : null;
+        }
+      }]);
+
+      return ActivableRenderer;
+    }(_react.Component), _class.propTypes = {
+      active: _react.PropTypes.bool.isRequired,
+      children: _react.PropTypes.any,
+      delay: _react.PropTypes.number
+    }, _class.defaultProps = {
+      delay: options.delay
+    }, _temp2;
+  };
+};
+
+exports.default = ActivableRendererFactory;
\ No newline at end of file
diff --git a/lib/hoc/Portal.js b/lib/hoc/Portal.js
new file mode 100644
index 000000000..0d8cda45a
--- /dev/null
+++ b/lib/hoc/Portal.js
@@ -0,0 +1,145 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactDom = require('react-dom');
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var Portal = function (_Component) {
+  _inherits(Portal, _Component);
+
+  function Portal() {
+    _classCallCheck(this, Portal);
+
+    return _possibleConstructorReturn(this, (Portal.__proto__ || Object.getPrototypeOf(Portal)).apply(this, arguments));
+  }
+
+  _createClass(Portal, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this._renderOverlay();
+    }
+  }, {
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      if (this._overlayTarget && nextProps.container !== this.props.container) {
+        this._portalContainerNode.removeChild(this._overlayTarget);
+        this._portalContainerNode = getContainer(nextProps.container);
+        this._portalContainerNode.appendChild(this._overlayTarget);
+      }
+    }
+  }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate() {
+      this._renderOverlay();
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      this._unrenderOverlay();
+      this._unmountOverlayTarget();
+    }
+  }, {
+    key: '_mountOverlayTarget',
+    value: function _mountOverlayTarget() {
+      if (!this._overlayTarget) {
+        this._overlayTarget = document.createElement('div');
+        this._portalContainerNode = getContainer(this.props.container);
+        this._portalContainerNode.appendChild(this._overlayTarget);
+      }
+    }
+  }, {
+    key: '_unmountOverlayTarget',
+    value: function _unmountOverlayTarget() {
+      if (this._overlayTarget) {
+        this._portalContainerNode.removeChild(this._overlayTarget);
+        this._overlayTarget = null;
+      }
+      this._portalContainerNode = null;
+    }
+  }, {
+    key: '_renderOverlay',
+    value: function _renderOverlay() {
+      var overlay = !this.props.children ? null : _react2.default.Children.only(this.props.children);
+
+      if (overlay !== null) {
+        this._mountOverlayTarget();
+        this._overlayInstance = _reactDom2.default.unstable_renderSubtreeIntoContainer(this, overlay, this._overlayTarget);
+      } else {
+        this._unrenderOverlay();
+        this._unmountOverlayTarget();
+      }
+    }
+  }, {
+    key: '_unrenderOverlay',
+    value: function _unrenderOverlay() {
+      if (this._overlayTarget) {
+        _reactDom2.default.unmountComponentAtNode(this._overlayTarget);
+        this._overlayInstance = null;
+      }
+    }
+  }, {
+    key: 'getMountNode',
+    value: function getMountNode() {
+      return this._overlayTarget;
+    }
+  }, {
+    key: 'getOverlayDOMNode',
+    value: function getOverlayDOMNode() {
+      if (!this.isMounted()) {
+        throw new Error('getOverlayDOMNode(): A component must be mounted to have a DOM node.');
+      }
+
+      if (this._overlayInstance) {
+        if (this._overlayInstance.getWrappedDOMNode) {
+          return this._overlayInstance.getWrappedDOMNode();
+        } else {
+          return _reactDom2.default.findDOMNode(this._overlayInstance);
+        }
+      }
+
+      return null;
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      return null;
+    }
+  }]);
+
+  return Portal;
+}(_react.Component);
+
+Portal.propTypes = {
+  children: _react.PropTypes.any,
+  container: _react.PropTypes.any,
+  lockBody: _react.PropTypes.bool
+};
+Portal.defaultProps = {
+  lockBody: true
+};
+
+
+function getContainer(container) {
+  var _container = typeof container === 'function' ? container() : container;
+  return _reactDom2.default.findDOMNode(_container) || document.body;
+}
+
+exports.default = Portal;
\ No newline at end of file
diff --git a/lib/identifiers.js b/lib/identifiers.js
new file mode 100644
index 000000000..f5fcaef20
--- /dev/null
+++ b/lib/identifiers.js
@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var APP_BAR = exports.APP_BAR = 'RTAppBar';
+var AUTOCOMPLETE = exports.AUTOCOMPLETE = 'RTAutocomplete';
+var AVATAR = exports.AVATAR = 'RTAvatar';
+var BUTTON = exports.BUTTON = 'RTButton';
+var CARD = exports.CARD = 'RTCard';
+var CHIP = exports.CHIP = 'RTChip';
+var CHECKBOX = exports.CHECKBOX = 'RTCheckbox';
+var DATE_PICKER = exports.DATE_PICKER = 'RTDatePicker';
+var DIALOG = exports.DIALOG = 'RTDialog';
+var DROPDOWN = exports.DROPDOWN = 'RTDropdown';
+var INPUT = exports.INPUT = 'RTInput';
+var LAYOUT = exports.LAYOUT = 'RTLayout';
+var LINK = exports.LINK = 'RTLink';
+var LIST = exports.LIST = 'RTList';
+var MENU = exports.MENU = 'RTMenu';
+var NAVIGATION = exports.NAVIGATION = 'RTNavigation';
+var OVERLAY = exports.OVERLAY = 'RTOverlay';
+var PROGRESS_BAR = exports.PROGRESS_BAR = 'RTProgressBar';
+var RADIO = exports.RADIO = 'RTRadio';
+var RIPPLE = exports.RIPPLE = 'RTRipple';
+var SLIDER = exports.SLIDER = 'RTSlider';
+var SNACKBAR = exports.SNACKBAR = 'RTSnackbar';
+var SWITCH = exports.SWITCH = 'RTSwitch';
+var TABLE = exports.TABLE = 'RTTable';
+var TABS = exports.TABS = 'RTTabs';
+var TOOLTIP = exports.TOOLTIP = 'RTTooltip';
+var TIME_PICKER = exports.TIME_PICKER = 'RTTimePicker';
\ No newline at end of file
diff --git a/lib/index.d.ts b/lib/index.d.ts
new file mode 100644
index 000000000..d18ecd7b0
--- /dev/null
+++ b/lib/index.d.ts
@@ -0,0 +1,56 @@
+import * as React from "react";
+export declare namespace ReactToolbox {
+  interface Props {
+    /**
+     * Set a class for the root component.
+     */
+    className?: string;
+    /**
+     * Key used to uniquely identify the element within an Array.
+     */
+    key?: string | number;
+    /**
+     * Callback called when the component is clicked.
+     */
+    onClick?: Function;
+    /**
+     * Fires after the mouse is released from the Component.
+     */
+    onMouseUp?: Function;
+    /**
+     * Callback called when the mouse enters the Component.
+     */
+    onMouseEnter?: Function;
+    /**
+     * Callback called when the mouse leaves the Component.
+     */
+    onMouseLeave?: Function;
+    /**
+     * Callback called when the mouse press the Component.
+     */
+    onMouseDown?: Function;
+    onContextMenu?: Function;
+    onDoubleClick?: Function;
+    onDrag?: Function;
+    onDragEnd?: Function;
+    onDragEnter?: Function;
+    onDragExit?: Function;
+    onDragLeave?: Function;
+    onDragOver?: Function;
+    onDragStart?: Function;
+    onDrop?: Function;
+    onMouseMove?: Function;
+    onMouseOut?: Function;
+    onMouseOver?: Function;
+    onTouchCancel?: Function;
+    onTouchEnd?: Function;
+    onTouchMove?: Function;
+    onTouchStart?: Function;
+    /**
+     * Set inline style for the root component.
+     */
+    style?: React.CSSProperties;
+  }
+}
+
+export default ReactToolbox;
diff --git a/lib/index.js b/lib/index.js
new file mode 100644
index 000000000..b4f37c537
--- /dev/null
+++ b/lib/index.js
@@ -0,0 +1,206 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TimePicker = exports.Tooltip = exports.Table = exports.Switch = exports.Snackbar = exports.Slider = exports.Ripple = exports.ProgressBar = exports.Navigation = exports.Link = exports.Input = exports.Form = exports.FontIcon = exports.Dropdown = exports.Drawer = exports.Dialog = exports.DatePicker = exports.Checkbox = exports.Chip = exports.Avatar = exports.Autocomplete = exports.AppBar = undefined;
+
+var _button = require('./button');
+
+Object.keys(_button).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _button[key];
+    }
+  });
+});
+
+var _card = require('./card');
+
+Object.keys(_card).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _card[key];
+    }
+  });
+});
+
+var _layout = require('./layout');
+
+Object.keys(_layout).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _layout[key];
+    }
+  });
+});
+
+var _list = require('./list');
+
+Object.keys(_list).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _list[key];
+    }
+  });
+});
+
+var _menu = require('./menu');
+
+Object.keys(_menu).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _menu[key];
+    }
+  });
+});
+
+var _radio = require('./radio');
+
+Object.keys(_radio).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _radio[key];
+    }
+  });
+});
+
+var _tabs = require('./tabs');
+
+Object.keys(_tabs).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _tabs[key];
+    }
+  });
+});
+
+require('./utils/polyfills');
+
+var _app_bar = require('./app_bar');
+
+var _app_bar2 = _interopRequireDefault(_app_bar);
+
+var _autocomplete = require('./autocomplete');
+
+var _autocomplete2 = _interopRequireDefault(_autocomplete);
+
+var _avatar = require('./avatar');
+
+var _avatar2 = _interopRequireDefault(_avatar);
+
+var _chip = require('./chip');
+
+var _chip2 = _interopRequireDefault(_chip);
+
+var _checkbox = require('./checkbox');
+
+var _checkbox2 = _interopRequireDefault(_checkbox);
+
+var _date_picker = require('./date_picker');
+
+var _date_picker2 = _interopRequireDefault(_date_picker);
+
+var _dialog = require('./dialog');
+
+var _dialog2 = _interopRequireDefault(_dialog);
+
+var _drawer = require('./drawer');
+
+var _drawer2 = _interopRequireDefault(_drawer);
+
+var _dropdown = require('./dropdown');
+
+var _dropdown2 = _interopRequireDefault(_dropdown);
+
+var _font_icon = require('./font_icon');
+
+var _font_icon2 = _interopRequireDefault(_font_icon);
+
+var _form = require('./form');
+
+var _form2 = _interopRequireDefault(_form);
+
+var _input = require('./input');
+
+var _input2 = _interopRequireDefault(_input);
+
+var _link = require('./link');
+
+var _link2 = _interopRequireDefault(_link);
+
+var _navigation = require('./navigation');
+
+var _navigation2 = _interopRequireDefault(_navigation);
+
+var _progress_bar = require('./progress_bar');
+
+var _progress_bar2 = _interopRequireDefault(_progress_bar);
+
+var _ripple = require('./ripple');
+
+var _ripple2 = _interopRequireDefault(_ripple);
+
+var _slider = require('./slider');
+
+var _slider2 = _interopRequireDefault(_slider);
+
+var _snackbar = require('./snackbar');
+
+var _snackbar2 = _interopRequireDefault(_snackbar);
+
+var _switch = require('./switch');
+
+var _switch2 = _interopRequireDefault(_switch);
+
+var _table = require('./table');
+
+var _table2 = _interopRequireDefault(_table);
+
+var _tooltip = require('./tooltip');
+
+var _tooltip2 = _interopRequireDefault(_tooltip);
+
+var _time_picker = require('./time_picker');
+
+var _time_picker2 = _interopRequireDefault(_time_picker);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.AppBar = _app_bar2.default; // Import polyfills for IE11
+
+exports.Autocomplete = _autocomplete2.default;
+exports.Avatar = _avatar2.default;
+exports.Chip = _chip2.default;
+exports.Checkbox = _checkbox2.default;
+exports.DatePicker = _date_picker2.default;
+exports.Dialog = _dialog2.default;
+exports.Drawer = _drawer2.default;
+exports.Dropdown = _dropdown2.default;
+exports.FontIcon = _font_icon2.default;
+exports.Form = _form2.default;
+exports.Input = _input2.default;
+exports.Link = _link2.default;
+exports.Navigation = _navigation2.default;
+exports.ProgressBar = _progress_bar2.default;
+exports.Ripple = _ripple2.default;
+exports.Slider = _slider2.default;
+exports.Snackbar = _snackbar2.default;
+exports.Switch = _switch2.default;
+exports.Table = _table2.default;
+exports.Tooltip = _tooltip2.default;
+exports.TimePicker = _time_picker2.default;
\ No newline at end of file
diff --git a/lib/input/Input.js b/lib/input/Input.js
new file mode 100644
index 000000000..ae958f05b
--- /dev/null
+++ b/lib/input/Input.js
@@ -0,0 +1,296 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Input = exports.inputFactory = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames4 = require('classnames');
+
+var _classnames5 = _interopRequireDefault(_classnames4);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _FontIcon = require('../font_icon/FontIcon.js');
+
+var _FontIcon2 = _interopRequireDefault(_FontIcon);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(FontIcon) {
+  var Input = function (_React$Component) {
+    _inherits(Input, _React$Component);
+
+    function Input() {
+      var _ref;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, Input);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Input.__proto__ || Object.getPrototypeOf(Input)).call.apply(_ref, [this].concat(args))), _this), _this.handleChange = function (event) {
+        var _this$props = _this.props,
+            onChange = _this$props.onChange,
+            multiline = _this$props.multiline,
+            maxLength = _this$props.maxLength;
+
+        var valueFromEvent = event.target.value;
+
+        // Trim value to maxLength if that exists (only on multiline inputs).
+        // Note that this is still required even tho we have the onKeyPress filter
+        // because the user could paste smt in the textarea.
+        var haveToTrim = multiline && maxLength && event.target.value.length > maxLength;
+        var value = haveToTrim ? valueFromEvent.substr(0, maxLength) : valueFromEvent;
+
+        // propagate to to store and therefore to the input
+        if (onChange) onChange(value, event);
+      }, _this.handleAutoresize = function () {
+        var element = _this.refs.input;
+        var rows = _this.props.rows;
+
+        if (typeof rows === 'number' && !isNaN(rows)) {
+          element.style.height = null;
+        } else {
+          // compute the height difference between inner height and outer height
+          var style = getComputedStyle(element, null);
+          var heightOffset = style.boxSizing === 'content-box' ? -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom)) : parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
+
+          // resize the input to its content size
+          element.style.height = 'auto';
+          element.style.height = element.scrollHeight + heightOffset + 'px';
+        }
+      }, _this.handleKeyPress = function (event) {
+        // prevent insertion of more characters if we're a multiline input
+        // and maxLength exists
+        var _this$props2 = _this.props,
+            multiline = _this$props2.multiline,
+            maxLength = _this$props2.maxLength,
+            onKeyPress = _this$props2.onKeyPress;
+
+        if (multiline && maxLength) {
+          // check if smt is selected, in which case the newly added charcter would
+          // replace the selected characters, so the length of value doesn't actually
+          // increase.
+          var isReplacing = event.target.selectionEnd - event.target.selectionStart;
+          var value = event.target.value;
+
+          if (!isReplacing && value.length === maxLength) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+          }
+        }
+
+        if (onKeyPress) onKeyPress(event);
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(Input, [{
+      key: 'componentDidMount',
+      value: function componentDidMount() {
+        if (this.props.multiline) {
+          window.addEventListener('resize', this.handleAutoresize);
+          this.handleAutoresize();
+        }
+      }
+    }, {
+      key: 'componentWillReceiveProps',
+      value: function componentWillReceiveProps(nextProps) {
+        if (!this.props.multiline && nextProps.multiline) {
+          window.addEventListener('resize', this.handleAutoresize);
+        } else if (this.props.multiline && !nextProps.multiline) {
+          window.removeEventListener('resize', this.handleAutoresize);
+        }
+      }
+    }, {
+      key: 'componentDidUpdate',
+      value: function componentDidUpdate() {
+        // resize the textarea, if nessesary
+        if (this.props.multiline) this.handleAutoresize();
+      }
+    }, {
+      key: 'componentWillUnmount',
+      value: function componentWillUnmount() {
+        if (this.props.multiline) window.removeEventListener('resize', this.handleAutoresize);
+      }
+    }, {
+      key: 'blur',
+      value: function blur() {
+        this.refs.input.blur();
+      }
+    }, {
+      key: 'focus',
+      value: function focus() {
+        this.refs.input.focus();
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _classnames2;
+
+        var _props = this.props,
+            children = _props.children,
+            disabled = _props.disabled,
+            error = _props.error,
+            floating = _props.floating,
+            hint = _props.hint,
+            icon = _props.icon,
+            name = _props.name,
+            labelText = _props.label,
+            maxLength = _props.maxLength,
+            multiline = _props.multiline,
+            required = _props.required,
+            theme = _props.theme,
+            type = _props.type,
+            value = _props.value,
+            onKeyPress = _props.onKeyPress,
+            _props$rows = _props.rows,
+            rows = _props$rows === undefined ? 1 : _props$rows,
+            others = _objectWithoutProperties(_props, ['children', 'disabled', 'error', 'floating', 'hint', 'icon', 'name', 'label', 'maxLength', 'multiline', 'required', 'theme', 'type', 'value', 'onKeyPress', 'rows']);
+
+        var length = maxLength && value ? value.length : 0;
+        var labelClassName = (0, _classnames5.default)(theme.label, _defineProperty({}, theme.fixed, !floating));
+
+        var className = (0, _classnames5.default)(theme.input, (_classnames2 = {}, _defineProperty(_classnames2, theme.disabled, disabled), _defineProperty(_classnames2, theme.errored, error), _defineProperty(_classnames2, theme.hidden, type === 'hidden'), _defineProperty(_classnames2, theme.withIcon, icon), _classnames2), this.props.className);
+
+        var valuePresent = value !== null && value !== undefined && value !== '' && !((typeof value === 'undefined' ? 'undefined' : _typeof(value)) === Number && isNaN(value));
+
+        var inputElementProps = _extends({}, others, {
+          className: (0, _classnames5.default)(theme.inputElement, _defineProperty({}, theme.filled, valuePresent)),
+          onChange: this.handleChange,
+          ref: 'input',
+          role: 'input',
+          name: name,
+          disabled: disabled,
+          required: required,
+          type: type,
+          value: value
+        });
+        if (!multiline) {
+          inputElementProps.maxLength = maxLength;
+          inputElementProps.onKeyPress = onKeyPress;
+        } else {
+          inputElementProps.rows = rows;
+          inputElementProps.onKeyPress = this.handleKeyPress;
+        }
+
+        return _react2.default.createElement(
+          'div',
+          { 'data-react-toolbox': 'input', className: className },
+          _react2.default.createElement(multiline ? 'textarea' : 'input', inputElementProps),
+          icon ? _react2.default.createElement(FontIcon, { className: theme.icon, value: icon }) : null,
+          _react2.default.createElement('span', { className: theme.bar }),
+          labelText ? _react2.default.createElement(
+            'label',
+            { className: labelClassName },
+            labelText,
+            required ? _react2.default.createElement(
+              'span',
+              { className: theme.required },
+              ' * '
+            ) : null
+          ) : null,
+          hint ? _react2.default.createElement(
+            'span',
+            { hidden: labelText, className: theme.hint },
+            hint
+          ) : null,
+          error ? _react2.default.createElement(
+            'span',
+            { className: theme.error },
+            error
+          ) : null,
+          maxLength ? _react2.default.createElement(
+            'span',
+            { className: theme.counter },
+            length,
+            '/',
+            maxLength
+          ) : null,
+          children
+        );
+      }
+    }]);
+
+    return Input;
+  }(_react2.default.Component);
+
+  Input.propTypes = {
+    children: _react2.default.PropTypes.any,
+    className: _react2.default.PropTypes.string,
+    disabled: _react2.default.PropTypes.bool,
+    error: _react2.default.PropTypes.string,
+    floating: _react2.default.PropTypes.bool,
+    hint: _react2.default.PropTypes.string,
+    icon: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.element]),
+    label: _react2.default.PropTypes.string,
+    maxLength: _react2.default.PropTypes.number,
+    multiline: _react2.default.PropTypes.bool,
+    name: _react2.default.PropTypes.string,
+    onBlur: _react2.default.PropTypes.func,
+    onChange: _react2.default.PropTypes.func,
+    onFocus: _react2.default.PropTypes.func,
+    onKeyPress: _react2.default.PropTypes.func,
+    required: _react2.default.PropTypes.bool,
+    rows: _react2.default.PropTypes.number,
+    theme: _react2.default.PropTypes.shape({
+      bar: _react2.default.PropTypes.string,
+      counter: _react2.default.PropTypes.string,
+      disabled: _react2.default.PropTypes.string,
+      error: _react2.default.PropTypes.string,
+      errored: _react2.default.PropTypes.string,
+      hidden: _react2.default.PropTypes.string,
+      hint: _react2.default.PropTypes.string,
+      icon: _react2.default.PropTypes.string,
+      input: _react2.default.PropTypes.string,
+      inputElement: _react2.default.PropTypes.string,
+      required: _react2.default.PropTypes.string,
+      withIcon: _react2.default.PropTypes.string
+    }),
+    type: _react2.default.PropTypes.string,
+    value: _react2.default.PropTypes.any
+  };
+  Input.defaultProps = {
+    className: '',
+    hint: '',
+    disabled: false,
+    floating: true,
+    multiline: false,
+    required: false,
+    type: 'text'
+  };
+
+
+  return Input;
+};
+
+var Input = factory(_FontIcon2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.INPUT, null, { withRef: true })(Input);
+exports.inputFactory = factory;
+exports.Input = Input;
\ No newline at end of file
diff --git a/lib/input/_config.scss b/lib/input/_config.scss
new file mode 100644
index 000000000..ff9f58cda
--- /dev/null
+++ b/lib/input/_config.scss
@@ -0,0 +1,20 @@
+$input-padding: 2 * $unit !default;
+$input-field-padding: .8 * $unit !default;
+$input-field-font-size: 1.6 * $unit !default;
+$input-field-height: $input-field-padding * 2 + $input-field-font-size * 1.4 !default;
+$input-label-font-size: 1.2 * $unit !default;
+$input-focus-label-top: .6 * $unit !default;
+$input-text-background-color: transparent !default;
+$input-text-label-color: rgba($color-black, 0.26) !default;
+$input-text-bottom-border-color: rgba($color-black, 0.12) !default;
+$input-text-highlight-color: $color-primary !default;
+$input-text-disabled-color: $input-text-bottom-border-color !default;
+$input-text-disabled-text-color: $input-text-label-color !default;
+$input-text-error-color: rgb(222, 50, 38) !default;
+$input-text-required-color: rgb(222, 50, 38) !default;
+$input-underline-height:  2 * $unit !default;
+$input-icon-font-size: 2.4 * $unit !default;
+$input-icon-size: 2 * $input-icon-font-size !default;
+$input-icon-offset: 1.6 * $unit !default;
+$input-chevron-offset: .8 * $unit !default;
+$input-hint-opacity: 1 !default;
diff --git a/lib/input/index.d.ts b/lib/input/index.d.ts
new file mode 100644
index 000000000..b1db642a2
--- /dev/null
+++ b/lib/input/index.d.ts
@@ -0,0 +1,136 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface InputTheme {
+  /**
+   * Used for the bar under the input.
+   */
+  bar?: string;
+  /**
+   * Used for the counter element.
+   */
+  counter?: string;
+  /**
+   * Added to the root class when input is disabled.
+   */
+  disabled?: string;
+  /**
+   * Used for the text error.
+   */
+  error?: string;
+  /**
+   * Added to the root class when input is errored.
+   */
+  errored?: string;
+  /**
+   * Used when the input is hidden.
+   */
+  hidden?: string;
+  /**
+   * Used for the hint text.
+   */
+  hint?: string;
+  /**
+   * Used for the icon in case the input has icon.
+   */
+  icon?: string;
+  /**
+   * Used as root class for the component.
+   */
+  input?: string;
+  /**
+   * Used for the HTML input element.
+   */
+  inputElement?: string;
+  /**
+   * Used in case the input is required.
+   */
+  required?: string;
+  /**
+   * Added to the root class if the input has icon.
+   */
+  withIcon?: string;
+}
+
+interface InputProps extends ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Give an error node to display under the field.
+   */
+  error?: string;
+  /**
+   * Indicates if the label is floating in the input field or not.
+   * @default true
+   */
+  floating?: boolean;
+  /**
+   * The text string to use for hint text element.
+   */
+  hint?: string;
+  /**
+   * Name of an icon to use as a label for the input.
+   */
+  icon?: React.ReactNode | string;
+  /**
+   * The text string to use for the floating label element.
+   */
+  label?: string;
+  /**
+   * Specifies the maximum number of characters allowed in the component
+   */
+  maxLength?: number;
+  /**
+   * If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.
+   * @default false
+   */
+  multiline?: boolean;
+  /**
+   * Name for the input field.
+   */
+  name?: string;
+  /**
+   * Callback function that is fired when component is blurred.
+   */
+  onBlur?: Function;
+  /**
+   * Callback function that is fired when the component's value changes
+   */
+  onChange?: Function;
+  /**
+   * Callback function that is fired when component is focused.
+   */
+  onFocus?: Function;
+  /**
+   * Callback function that is fired when a key is pressed.
+   */
+  onKeyPress?: Function;
+  /**
+   * If true, the html input has a required attribute.
+   * @default false
+   */
+  required?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: InputTheme;
+  /**
+   * Type of the input element. It can be a valid HTML5 input type
+   */
+  type?: string;
+  /**
+   * Current value of the input element.
+   */
+  value?: any;
+}
+
+export class Input extends React.Component<InputProps, {}> { }
+
+export default Input;
diff --git a/lib/input/index.js b/lib/input/index.js
new file mode 100644
index 000000000..a8c751634
--- /dev/null
+++ b/lib/input/index.js
@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Input = undefined;
+
+var _identifiers = require('../identifiers.js');
+
+var _reactCssThemr = require('react-css-themr');
+
+var _Input = require('./Input.js');
+
+var _FontIcon = require('../font_icon/FontIcon.js');
+
+var _FontIcon2 = _interopRequireDefault(_FontIcon);
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Input = (0, _Input.inputFactory)(_FontIcon2.default);
+var ThemedInput = (0, _reactCssThemr.themr)(_identifiers.INPUT, _theme2.default, { withRef: true })(Input);
+
+exports.default = ThemedInput;
+exports.Input = ThemedInput;
\ No newline at end of file
diff --git a/lib/input/theme.scss b/lib/input/theme.scss
new file mode 100644
index 000000000..9e29b9b4a
--- /dev/null
+++ b/lib/input/theme.scss
@@ -0,0 +1,156 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+
+.input {
+  position: relative;
+  padding: $input-padding 0;
+  &.withIcon {
+    margin-left: $input-icon-size;
+  }
+}
+
+.icon {
+  position: absolute;
+  top: $input-icon-offset;
+  left: -$input-icon-size;
+  display: block;
+  width: $input-icon-size;
+  height: $input-icon-size;
+  font-size: $input-icon-font-size !important;
+  line-height: $input-icon-size !important;
+  color: $input-text-label-color;
+  text-align: center;
+  transition: color $animation-duration $animation-curve-default;
+}
+
+.inputElement {
+  display: block;
+  width: 100%;
+  padding: $input-field-padding 0;
+  font-size: $input-field-font-size;
+  color: $color-text;
+  background-color: $input-text-background-color;
+  border: 0;
+  border-bottom: 1px solid $input-text-bottom-border-color;
+  outline: none;
+  &:focus:not([disabled]):not([readonly]) {
+    ~ .bar:before, ~ .bar:after {
+      width: 50%;
+    }
+    ~ .label:not(.fixed) {
+      color: $input-text-highlight-color;
+    }
+    ~ .label > .required {
+      color: $input-text-required-color;
+    }
+    ~ .hint {
+      display: block;
+      opacity: $input-hint-opacity;
+    }
+    ~ .icon {
+      color: $input-text-highlight-color;
+    }
+  }
+  &:focus:not([disabled]):not([readonly]), &.filled, &[type="date"], &[type="time"] {
+    ~ .label:not(.fixed) {
+      top: $input-focus-label-top;
+      font-size: $input-label-font-size;
+    }
+    &.filled ~ .hint {
+      opacity: 0;
+    }
+  }
+  &.filled ~ .label.fixed, &.filled ~ .hint {
+    display: none;
+  }
+}
+
+.label {
+  position: absolute;
+  top: $input-padding + (1.5 * $input-field-padding);
+  left: 0;
+  font-size: $input-field-font-size;
+  line-height: $input-field-font-size;
+  color: $input-text-label-color;
+  pointer-events: none;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transition-property: top, font-size, color;
+  &.fixed ~ .hint {
+    display: none;
+  }
+}
+
+.hint {
+  position: absolute;
+  top: $input-padding + (1.5 * $input-field-padding);
+  left: 0;
+  font-size: $input-field-font-size;
+  line-height: $input-field-font-size;
+  color: $input-text-label-color;
+  pointer-events: none;
+  opacity: $input-hint-opacity;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transition-property: opacity;
+}
+
+.bar {
+  position: relative;
+  display: block;
+  width: 100%;
+  &:before, &:after {
+    @include material-animation-default();
+    position: absolute;
+    bottom: 0;
+    width: 0;
+    height: 2px;
+    content: "";
+    background-color: $input-text-highlight-color;
+    transition-property: width, background-color;
+  }
+  &:before {
+    left: 50%;
+  }
+  &:after {
+    right: 50%;
+  }
+}
+
+.error, .counter {
+  margin-bottom: - $input-underline-height;
+  font-size: $input-label-font-size;
+  line-height: $input-underline-height;
+  color: $input-text-error-color;
+}
+
+.counter {
+  position: absolute;
+  right: 0;
+  color: $input-text-label-color;
+}
+
+.disabled > .inputElement {
+  color: $input-text-disabled-text-color;
+  border-bottom-style: dotted;
+}
+
+.errored {
+  padding-bottom: 0;
+  > .inputElement {
+    margin-top: 1px;
+    border-bottom-color: $input-text-error-color;
+  }
+  > .counter, > .label {
+    color: $input-text-error-color;
+  }
+  > .label > .required {
+    color: $input-text-required-color;
+  }
+}
+
+.hidden {
+  display: none;
+}
diff --git a/lib/layout/Layout.js b/lib/layout/Layout.js
new file mode 100644
index 000000000..09a844bca
--- /dev/null
+++ b/lib/layout/Layout.js
@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Layout = undefined;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _identifiers = require('../identifiers.js');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Layout = function Layout(_ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      theme = _ref.theme;
+  return _react2.default.createElement(
+    'div',
+    { 'data-react-toolbox': 'layout', className: (0, _classnames2.default)(theme.layout, className) },
+    _react2.default.Children.map(children, function (child) {
+      return _react2.default.cloneElement(child, { theme: theme });
+    })
+  );
+};
+
+Layout.propTypes = {
+  children: _react.PropTypes.oneOfType([_react.PropTypes.arrayOf(_react.PropTypes.element), _react.PropTypes.element]),
+  className: _react.PropTypes.string,
+  theme: _react.PropTypes.shape({
+    layout: _react.PropTypes.string
+  })
+};
+
+Layout.defaultProps = {
+  className: ''
+};
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.LAYOUT)(Layout);
+exports.Layout = Layout;
\ No newline at end of file
diff --git a/lib/layout/NavDrawer.js b/lib/layout/NavDrawer.js
new file mode 100644
index 000000000..4e4cfbe2d
--- /dev/null
+++ b/lib/layout/NavDrawer.js
@@ -0,0 +1,87 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NavDrawer = undefined;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames3 = require('classnames');
+
+var _classnames4 = _interopRequireDefault(_classnames3);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var NavDrawer = function NavDrawer(_ref) {
+  var _classnames;
+
+  var active = _ref.active,
+      children = _ref.children,
+      className = _ref.className,
+      onOverlayClick = _ref.onOverlayClick,
+      permanentAt = _ref.permanentAt,
+      pinned = _ref.pinned,
+      scrollY = _ref.scrollY,
+      theme = _ref.theme,
+      width = _ref.width;
+
+  var rootClasses = (0, _classnames4.default)([theme.navDrawer], (_classnames = {}, _defineProperty(_classnames, theme[permanentAt + 'Permanent'], permanentAt), _defineProperty(_classnames, theme.wide, width === 'wide'), _defineProperty(_classnames, theme.active, active), _defineProperty(_classnames, theme.pinned, pinned), _classnames), className);
+
+  var drawerClasses = (0, _classnames4.default)(theme.drawerContent, _defineProperty({}, theme.scrollY, scrollY));
+
+  return _react2.default.createElement(
+    'div',
+    { 'data-react-toolbox': 'nav-drawer', className: rootClasses },
+    _react2.default.createElement('div', { 'data-react-toolbox': 'nav-drawer-scrim', className: theme.scrim, onClick: onOverlayClick }),
+    _react2.default.createElement(
+      'aside',
+      { 'data-react-toolbox': 'nav-drawer-content', className: drawerClasses },
+      children
+    )
+  );
+};
+
+NavDrawer.propTypes = {
+  active: _react.PropTypes.bool,
+  children: _react.PropTypes.any,
+  className: _react.PropTypes.string,
+  onOverlayClick: _react.PropTypes.func,
+  permanentAt: _react.PropTypes.oneOf(['sm', 'smTablet', 'md', 'lg', 'lgTablet', 'xl', 'xxl', 'xxxl']),
+  pinned: _react.PropTypes.bool,
+  scrollY: _react.PropTypes.bool,
+  theme: _react.PropTypes.shape({
+    active: _react.PropTypes.string,
+    drawerContent: _react.PropTypes.string,
+    lgPermanent: _react.PropTypes.string,
+    mdPermanent: _react.PropTypes.string,
+    navDrawer: _react.PropTypes.string,
+    pinned: _react.PropTypes.string,
+    scrim: _react.PropTypes.string,
+    scrollY: _react.PropTypes.string,
+    smPermanent: _react.PropTypes.string,
+    wide: _react.PropTypes.string,
+    xlPermanent: _react.PropTypes.string,
+    xxlPermanent: _react.PropTypes.string,
+    xxxlPermanent: _react.PropTypes.string
+  }),
+  width: _react.PropTypes.oneOf(['normal', 'wide'])
+};
+
+NavDrawer.defaultProps = {
+  active: false,
+  className: '',
+  scrollY: false,
+  width: 'normal'
+};
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.LAYOUT)(NavDrawer);
+exports.NavDrawer = NavDrawer;
\ No newline at end of file
diff --git a/lib/layout/Panel.js b/lib/layout/Panel.js
new file mode 100644
index 000000000..23a00d527
--- /dev/null
+++ b/lib/layout/Panel.js
@@ -0,0 +1,57 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Panel = undefined;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var Panel = function Panel(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      onScroll = _ref.onScroll,
+      scrollY = _ref.scrollY,
+      theme = _ref.theme;
+
+  var _className = (0, _classnames3.default)(theme.panel, _defineProperty({}, theme.scrollY, scrollY), className);
+
+  return _react2.default.createElement(
+    'div',
+    { 'data-react-toolbox': 'panel', onScroll: onScroll, className: _className },
+    children
+  );
+};
+
+Panel.propTypes = {
+  children: _react.PropTypes.any,
+  className: _react.PropTypes.string,
+  onScroll: _react.PropTypes.func,
+  scrollY: _react.PropTypes.bool,
+  theme: _react.PropTypes.shape({
+    panel: _react.PropTypes.string,
+    scrollY: _react.PropTypes.string
+  })
+};
+
+Panel.defaultProps = {
+  className: '',
+  scrollY: false
+};
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.LAYOUT)(Panel);
+exports.Panel = Panel;
\ No newline at end of file
diff --git a/lib/layout/Sidebar.js b/lib/layout/Sidebar.js
new file mode 100644
index 000000000..d1c5a2513
--- /dev/null
+++ b/lib/layout/Sidebar.js
@@ -0,0 +1,69 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Sidebar = undefined;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames3 = require('classnames');
+
+var _classnames4 = _interopRequireDefault(_classnames3);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var Sidebar = function Sidebar(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      pinned = _ref.pinned,
+      scrollY = _ref.scrollY,
+      theme = _ref.theme,
+      width = _ref.width;
+
+  var wrapperClasses = (0, _classnames4.default)(theme.sidebar, theme['width-' + width], _defineProperty({}, theme.pinned, pinned), className);
+
+  var innerClasses = (0, _classnames4.default)(theme.sidebarContent, _defineProperty({}, theme.scrollY, scrollY));
+
+  return _react2.default.createElement(
+    'div',
+    { 'data-react-toolbox': 'sidebar', className: wrapperClasses },
+    _react2.default.createElement(
+      'aside',
+      { 'data-react-toolbox': 'sidebar-content', className: innerClasses },
+      children
+    )
+  );
+};
+
+Sidebar.propTypes = {
+  children: _react.PropTypes.any,
+  className: _react.PropTypes.string,
+  pinned: _react.PropTypes.bool,
+  scrollY: _react.PropTypes.bool,
+  theme: _react.PropTypes.shape({
+    pinned: _react.PropTypes.string,
+    scrollY: _react.PropTypes.string,
+    sidebar: _react.PropTypes.string,
+    sidebarContent: _react.PropTypes.string
+  }),
+  width: _react.PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 25, 33, 50, 66, 75, 100])
+};
+
+Sidebar.defaultProps = {
+  className: '',
+  pinned: false,
+  scrollY: false,
+  width: 5
+};
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.LAYOUT)(Sidebar);
+exports.Sidebar = Sidebar;
\ No newline at end of file
diff --git a/lib/layout/_config.scss b/lib/layout/_config.scss
new file mode 100644
index 000000000..16f778f18
--- /dev/null
+++ b/lib/layout/_config.scss
@@ -0,0 +1,18 @@
+$drawer-background-color: $palette-grey-50 !default;
+$drawer-border-color: $palette-grey-300 !default;
+$drawer-text-color: $palette-grey-800 !default;
+
+$drawer-overlay-color: $color-black !default;
+$drawer-overlay-opacity: .6 !default;
+
+// from: https://material.google.com/layout/structure.html#structure-side-nav
+$navigation-drawer-desktop-width: 5 * $standard-increment-desktop !default;
+$navigation-drawer-max-desktop-width: 40 * $unit !default;
+
+// Mobile:
+// Width = Screen width − 56 dp
+// Maximum width: 320dp
+$navigation-drawer-mobile-width: 5 * $standard-increment-mobile !default;
+
+// sass doesn't like use of variable here: calc(100% - $standard-increment-mobile);
+$navigation-drawer-max-mobile-width: calc(100% - 5.6rem) !default;
diff --git a/lib/layout/_mixins.scss b/lib/layout/_mixins.scss
new file mode 100644
index 000000000..e998d174f
--- /dev/null
+++ b/lib/layout/_mixins.scss
@@ -0,0 +1,27 @@
+@mixin open() {
+  transition-delay: $animation-delay;
+  .drawerContent {
+    pointer-events: all;
+    transition-delay: $animation-delay;
+    transform: translateX(0);
+  }
+}
+
+@mixin permanent() {
+  @include open();
+
+  width: $navigation-drawer-desktop-width;
+  max-width: $navigation-drawer-desktop-width;
+
+  &.wide {
+    width: $navigation-drawer-max-desktop-width;
+    max-width: $navigation-drawer-max-desktop-width;
+  }
+
+  &.active {
+    & > .scrim {
+      width: 0;
+      background-color: rgba($drawer-overlay-color, 0);
+    }
+  }
+}
diff --git a/lib/layout/index.d.ts b/lib/layout/index.d.ts
new file mode 100644
index 000000000..10004fc25
--- /dev/null
+++ b/lib/layout/index.d.ts
@@ -0,0 +1,194 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface LayoutTheme {
+  /**
+   * Class used in the container to position and align inner items.
+   */
+  layout?: string;
+}
+
+interface LayoutProps extends ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: [NavDrawer | Panel | Sidebar];
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: LayoutTheme;
+}
+
+export class Layout extends React.Component<LayoutProps, {}> { }
+
+export interface NavDrawerTheme {
+  /**
+   * Used when the drawer is active.
+   */
+  active?: string;
+  /**
+   * Used for the content of the drawer.
+   */
+  drawerContent?: string;
+  /**
+   * Added to the root class for large drawer.
+   */
+  lgPermangent?: string;
+  /**
+   * Added to the root class for medium drawer.
+   */
+  mdPermangent?: string;
+  /**
+   * Root class for the drawer.
+   */
+  navDrawer?: string;
+  /**
+   * Added to the root class if positioning is pinned.
+   */
+  pinned?: string;
+  /**
+   * Used as a wrapper for the drawer content.
+   */
+  scrim?: string;
+  /**
+   * Added to the drawer content if its scrollable.
+   */
+  scrollY?: string;
+  /**
+   * Added to the root class for small drawer.
+   */
+  smPermanent?: string;
+  /**
+   * Added to the root class if width is wide.
+   */
+  wide?: string;
+  /**
+   * Added to the root class for extra big drawer.
+   */
+  xlPermanent?: string;
+  /**
+   * Added to the root class for super big drawer.
+   */
+  xxlPermangent?: string;
+  /**
+   * Added to the root class for largest possible drawer.
+   */
+  xxxlPermangent?: string;
+}
+
+interface NavDrawerProps extends ReactToolbox.Props {
+  /**
+   * If true, the drawer will be shown as an overlay.
+   * @default false
+   */
+  active?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Callback function to be invoked when the overlay is clicked.
+   */
+  onOverlayClick?: Function;
+  /**
+   * The breakpoint at which the drawer is automatically pinned.
+   */
+  permanentAt?: "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
+  /**
+   * If true, the drawer will be pinned open. pinned takes precedence over active.
+   * @default false
+   */
+  pinned?: boolean;
+  /**
+   * If true, the drawer will vertically scroll all content.
+   * @default false
+   */
+  scrollY?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: NavDrawerTheme;
+  /**
+   * 320px or 400px. Only applicable above the sm breakpoint.
+   * @default normal
+   */
+  width?: "normal" | "wide";
+}
+
+export class NavDrawer extends React.Component<NavDrawerProps, {}> { }
+
+export interface PanelTheme {
+  /**
+   * Used as the root class of the panel component.
+   */
+  panel?: string;
+  /**
+   * Used in case the panel is scrollable.
+   */
+  scrollY?: string;
+}
+
+interface PanelProps extends ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * If true, the panel will vertically scroll all content.
+   * @default false
+   */
+  scrollY?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: PanelTheme;
+}
+
+export class Panel extends React.Component<PanelProps, {}> { }
+
+export interface SidebarTheme {
+  /**
+   * Added to the root class if sidebar is pinned.
+   */
+  pinned?: string;
+  /**
+   * Add to the content of sidebar if its scrollable.
+   */
+  scrollY?: string;
+  /**
+   * Root class of the sidebar.
+   */
+  sidebar?: string;
+  /**
+   * Used in for the content element of the sidebar.
+   */
+  sidebarContent?: string;
+}
+
+interface SidebarProps extends ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * If true, the sidebar will be pinned open.
+   * @default false
+   */
+  pinned?: boolean;
+  /**
+   * If true, the sidebar will vertically scroll all content
+   * @default false
+   */
+  scrollY?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: SidebarTheme;
+  /**
+   * Width in standard increments (1-12) or percentage (25, 33, 50, 66, 75, 100)
+   * @default 5
+   */
+  width?: number; // 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 25 | 33 | 50 | 66 | 75 | 100;
+}
+
+export class Sidebar extends React.Component<SidebarProps, {}> { }
diff --git a/lib/layout/index.js b/lib/layout/index.js
new file mode 100644
index 000000000..47bfa886a
--- /dev/null
+++ b/lib/layout/index.js
@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Sidebar = exports.NavDrawer = exports.Panel = exports.Layout = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Layout = require('./Layout.js');
+
+var _Panel = require('./Panel.js');
+
+var _NavDrawer = require('./NavDrawer.js');
+
+var _Sidebar = require('./Sidebar.js');
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ThemedLayout = (0, _reactCssThemr.themr)(_identifiers.LAYOUT, _theme2.default)(_Layout.Layout);
+var ThemedPanel = (0, _reactCssThemr.themr)(_identifiers.LAYOUT, _theme2.default)(_Panel.Panel);
+var ThemedNavDrawer = (0, _reactCssThemr.themr)(_identifiers.LAYOUT, _theme2.default)(_NavDrawer.NavDrawer);
+var ThemedSidebar = (0, _reactCssThemr.themr)(_identifiers.LAYOUT, _theme2.default)(_Sidebar.Sidebar);
+
+exports.Layout = ThemedLayout;
+exports.Panel = ThemedPanel;
+exports.NavDrawer = ThemedNavDrawer;
+exports.Sidebar = ThemedSidebar;
\ No newline at end of file
diff --git a/lib/layout/theme.scss b/lib/layout/theme.scss
new file mode 100644
index 000000000..405d5121b
--- /dev/null
+++ b/lib/layout/theme.scss
@@ -0,0 +1,325 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+@import "http://github.com/mixins";
+
+.layout {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: row;
+  align-items: stretch;
+  justify-content: space-between;
+  overflow-y: hidden;
+
+  .navDrawer {
+    width: 0;
+    min-width: 0;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    transition-timing-function: $animation-curve-default;
+    transition-duration: $animation-duration;
+    transition-property: width, min-width;
+
+    .scrim {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      z-index: $z-index-higher;
+      width: 0;
+      height: 100%;
+      background-color: rgba($drawer-overlay-color, 0);
+      transition: background-color $animation-duration $animation-curve-default, width 10ms linear $animation-duration;
+    }
+
+    .drawerContent {
+      @include shadow-2dp();
+      position: absolute;
+      z-index: $z-index-highest;
+      display: flex;
+      width: $navigation-drawer-mobile-width;
+      max-width: $navigation-drawer-max-mobile-width;
+      height: 100%;
+      flex-direction: column;
+      align-items: stretch;
+      justify-content: space-between;
+      overflow-x: hidden;
+      overflow-y: hidden;
+      color: $drawer-text-color;
+      pointer-events: none;
+      background-color: $drawer-background-color;
+      border-right: 1px solid $drawer-border-color;
+      transition: transform $animation-duration $animation-curve-default;
+      transform: translateX(-100%);
+
+      &.scrollY {
+        overflow-y: auto;
+      }
+    }
+
+    &.pinned {
+      @include open();
+      width: $navigation-drawer-mobile-width;
+      max-width: $navigation-drawer-max-mobile-width;
+    }
+
+    &.active {
+      &:not(.pinned) {
+        @include open();
+        .scrim {
+          width: 100%;
+          background-color: rgba($drawer-overlay-color, $drawer-overlay-opacity);
+          transition: background-color $animation-duration $animation-curve-default;
+        }
+      }
+    }
+
+    // Larger than mobile width drawer
+    @media screen and (min-width: $layout-breakpoint-xs) {
+      &.pinned {
+        width: $navigation-drawer-desktop-width;
+        max-width: $navigation-drawer-desktop-width;
+      }
+
+      .drawerContent {
+        width: $navigation-drawer-desktop-width;
+        max-width: $navigation-drawer-desktop-width;
+      }
+
+      &.wide {
+        &.pinned {
+          width: $navigation-drawer-max-desktop-width;
+          max-width: $navigation-drawer-max-desktop-width;
+        }
+
+        .drawerContent {
+          width: $navigation-drawer-max-desktop-width;
+          max-width: $navigation-drawer-max-desktop-width;
+        }
+      }
+    }
+
+    // Permanent screen, ignore .active and make part of layout
+    @media screen and (min-width: $layout-breakpoint-sm) {
+      &.smPermanent {
+        @include permanent();
+      }
+    }
+
+    @media screen and (min-width: $layout-breakpoint-sm-tablet) {
+      &.smTabletPermanent {
+        @include permanent();
+      }
+    }
+
+    @media screen and (min-width: $layout-breakpoint-md) {
+      &.mdPermanent {
+        @include permanent();
+      }
+    }
+
+    @media screen and (min-width: $layout-breakpoint-lg) {
+      &.lgPermanent {
+        @include permanent();
+      }
+    }
+
+    @media screen and (min-width: $layout-breakpoint-lg-tablet) {
+      &.lgTabletPermanent {
+        @include permanent();
+      }
+    }
+
+    @media screen and (min-width: $layout-breakpoint-xl) {
+      &.xlPermanent {
+        @include permanent();
+      }
+    }
+
+    @media screen and (min-width: $layout-breakpoint-xxl) {
+      &.xxlPermanent {
+        @include permanent();
+      }
+    }
+
+    @media screen and (min-width: $layout-breakpoint-xxxl) {
+      &.xxxlPermanent {
+        @include permanent();
+      }
+    }
+  }
+
+  & .layout {
+    .scrim {
+      z-index: $z-index-highest - 1;
+    }
+    & .layout {
+      .scrim {
+        z-index: $z-index-highest - 2;
+      }
+    }
+  }
+
+  .panel {
+    position: relative;
+    display: flex;
+    height: 100%;
+    flex: 1;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: space-between;
+    overflow-y: hidden;
+
+    &.scrollY {
+      overflow-y: auto;
+    }
+  }
+
+  .sidebar {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: $z-index-highest - 1;
+    width: 0;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    color: $drawer-text-color;
+    background-color: $drawer-background-color;
+    transition-timing-function: $animation-curve-default;
+    transition-duration: $animation-duration;
+    transition-property: width;
+
+    .sidebarContent {
+      display: flex;
+      height: 100%;
+      flex-direction: column;
+      align-items: stretch;
+      justify-content: space-between;
+      overflow-y: hidden;
+
+      &.scrollY {
+        overflow-y: auto;
+      }
+    }
+
+    $increments: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12);
+
+    @each $increment in $increments {
+      &.width-#{$increment} {
+        $mobile: $standard-increment-mobile * $increment;
+        $desktop: $standard-increment-desktop * $increment;
+
+        .sidebarContent {
+          min-width: 100%;
+        }
+
+        &.pinned {
+          width: 100%;
+        }
+
+        @if $increment < 10 {
+          @media screen and (min-width: $layout-breakpoint-xs) and (orientation: landscape) {
+            position: relative;
+
+            .sidebarContent {
+              min-width: $mobile;
+            }
+
+            &.pinned {
+              width: $mobile;
+            }
+          }
+
+          @media screen and (min-width: $layout-breakpoint-xs) and (orientation: portrait) {
+            position: relative;
+
+            .sidebarContent {
+              min-width: $desktop;
+            }
+
+            &.pinned {
+              width: $desktop;
+            }
+          }
+        }
+
+        @if $increment < 11 {
+          @media screen and (min-width: $layout-breakpoint-sm-tablet) {
+            position: relative;
+
+            .sidebarContent {
+              min-width: $desktop;
+            }
+
+            &.pinned {
+              width: $desktop;
+            }
+          }
+        }
+
+        @media screen and (min-width: $layout-breakpoint-sm) {
+          position: relative;
+
+          .sidebarContent {
+            min-width: $desktop;
+          }
+
+          &.pinned {
+            width: $desktop;
+          }
+        }
+      }
+    }
+
+
+    $percentages: (25, 33, 50, 66, 75);
+
+    &.width-100 {
+      position: absolute;
+
+      .sidebarContent {
+        min-width: 100%;
+      }
+
+      &.pinned {
+        width: 100%;
+      }
+    }
+
+    @each $pct in $percentages {
+      &.width-#{$pct} {
+        position: absolute;
+
+        .sidebarContent {
+          min-width: 100%;
+        }
+
+        &.pinned {
+          width: 100%;
+        }
+      }
+    }
+
+    @media screen and (min-width: $layout-breakpoint-sm-tablet) {
+      @each $pct in $percentages {
+        &.width-#{$pct} {
+          position: relative;
+
+          .sidebarContent {
+            min-width: $pct * 1%;
+          }
+
+          &.pinned {
+            width: $pct * 1%;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/lib/link/Link.js b/lib/link/Link.js
new file mode 100644
index 000000000..9fbe6ab27
--- /dev/null
+++ b/lib/link/Link.js
@@ -0,0 +1,82 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Link = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _FontIcon = require('../font_icon/FontIcon.js');
+
+var _FontIcon2 = _interopRequireDefault(_FontIcon);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+var Link = function Link(_ref) {
+  var active = _ref.active,
+      children = _ref.children,
+      className = _ref.className,
+      count = _ref.count,
+      icon = _ref.icon,
+      label = _ref.label,
+      theme = _ref.theme,
+      others = _objectWithoutProperties(_ref, ['active', 'children', 'className', 'count', 'icon', 'label', 'theme']);
+
+  var _className = (0, _classnames3.default)(theme.link, _defineProperty({}, theme.active, active), className);
+
+  return _react2.default.createElement(
+    'a',
+    _extends({ 'data-react-toolbox': 'link', className: _className }, others),
+    icon ? _react2.default.createElement(_FontIcon2.default, { className: theme.icon, value: icon }) : null,
+    label ? _react2.default.createElement(
+      'abbr',
+      null,
+      label
+    ) : null,
+    count && parseInt(count) !== 0 ? _react2.default.createElement(
+      'small',
+      null,
+      count
+    ) : null,
+    children
+  );
+};
+
+Link.propTypes = {
+  active: _react.PropTypes.bool,
+  children: _react.PropTypes.node,
+  className: _react.PropTypes.string,
+  count: _react.PropTypes.number,
+  icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+  label: _react.PropTypes.string,
+  theme: _react.PropTypes.shape({
+    active: _react.PropTypes.string,
+    icon: _react.PropTypes.string,
+    link: _react.PropTypes.string
+  })
+};
+
+Link.defaultProps = {
+  active: false,
+  className: ''
+};
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.LINK)(Link);
+exports.Link = Link;
\ No newline at end of file
diff --git a/lib/link/index.d.ts b/lib/link/index.d.ts
new file mode 100644
index 000000000..67da3fa11
--- /dev/null
+++ b/lib/link/index.d.ts
@@ -0,0 +1,51 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface LinkTheme {
+  /**
+   * Added to the root element if the Link is active.
+   */
+  active?: string;
+  /**
+   * Used for the icon element if it's present.
+   */
+  icon?: string;
+  /**
+   * Used for the root element.
+   */
+  link?: string;
+}
+
+interface LinkProps extends ReactToolbox.Props {
+  /**
+   * If true, adds active style to link.
+   * @default false
+   */
+  active?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Sets a count number.
+   */
+  count?: number;
+  /**
+   * Sets the anchor link.
+   */
+  href?: string;
+  /**
+   * An icon key string to include a FontIcon component in front of the text.
+   */
+  icon?: React.ReactNode | string;
+  /**
+   * The text string used for the text content of the link.
+   */
+  label?: string;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: LinkTheme;
+}
+
+export class Link extends React.Component<LinkProps, {}> { }
diff --git a/lib/link/index.js b/lib/link/index.js
new file mode 100644
index 000000000..a0e50a865
--- /dev/null
+++ b/lib/link/index.js
@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Link = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Link = require('./Link.js');
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ThemedLink = (0, _reactCssThemr.themr)(_identifiers.LINK, _theme2.default)(_Link.Link);
+
+exports.default = ThemedLink;
+exports.Link = ThemedLink;
\ No newline at end of file
diff --git a/lib/link/theme.scss b/lib/link/theme.scss
new file mode 100644
index 000000000..11eb90844
--- /dev/null
+++ b/lib/link/theme.scss
@@ -0,0 +1,37 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+
+.icon {
+  margin-right: $unit;
+  font-size: 1.8 * $unit;
+}
+
+.link {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  line-height: 1.5;
+  cursor: pointer;
+  transition: opacity $animation-duration $animation-curve-default;
+  &:not(.active) {
+    opacity: .5;
+  }
+  &:hover, &:active {
+    opacity: 1;
+  }
+  > * {
+    vertical-align: middle;
+  }
+  > abbr {
+    text-transform: capitalize;
+  }
+  > small {
+    margin-left: .8 * $unit;
+    font-size: $font-size-tiny;
+    text-align: center;
+  }
+}
diff --git a/lib/list/List.js b/lib/list/List.js
new file mode 100644
index 000000000..d0859031e
--- /dev/null
+++ b/lib/list/List.js
@@ -0,0 +1,99 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.List = exports.listFactory = undefined;
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _ListItem = require('./ListItem.js');
+
+var _ListItem2 = _interopRequireDefault(_ListItem);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var mergeProp = function mergeProp(propName, child, parent) {
+  return child[propName] !== undefined ? child[propName] : parent[propName];
+};
+
+var factory = function factory(ListItem) {
+  var List = function (_Component) {
+    _inherits(List, _Component);
+
+    function List() {
+      _classCallCheck(this, List);
+
+      return _possibleConstructorReturn(this, (List.__proto__ || Object.getPrototypeOf(List)).apply(this, arguments));
+    }
+
+    _createClass(List, [{
+      key: 'renderItems',
+      value: function renderItems() {
+        var _this2 = this;
+
+        return _react2.default.Children.map(this.props.children, function (item) {
+          if (item.type === ListItem) {
+            var selectable = mergeProp('selectable', item.props, _this2.props);
+            var ripple = mergeProp('ripple', item.props, _this2.props);
+            return _react2.default.cloneElement(item, { selectable: selectable, ripple: ripple });
+          } else {
+            return _react2.default.cloneElement(item);
+          }
+        });
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        return _react2.default.createElement(
+          'ul',
+          { 'data-react-toolbox': 'list', className: (0, _classnames2.default)(this.props.theme.list, this.props.className) },
+          this.renderItems()
+        );
+      }
+    }]);
+
+    return List;
+  }(_react.Component);
+
+  List.propTypes = {
+    children: _react.PropTypes.node,
+    className: _react.PropTypes.string,
+    ripple: _react.PropTypes.bool,
+    selectable: _react.PropTypes.bool,
+    theme: _react.PropTypes.shape({
+      list: _react.PropTypes.string
+    })
+  };
+  List.defaultProps = {
+    className: '',
+    ripple: false,
+    selectable: false
+  };
+
+
+  return List;
+};
+
+var List = factory(_ListItem2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(List);
+exports.listFactory = factory;
+exports.List = List;
\ No newline at end of file
diff --git a/lib/list/ListCheckbox.js b/lib/list/ListCheckbox.js
new file mode 100644
index 000000000..6ce2097b7
--- /dev/null
+++ b/lib/list/ListCheckbox.js
@@ -0,0 +1,93 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListCheckbox = exports.listCheckboxFactory = undefined;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Checkbox = require('../checkbox/Checkbox.js');
+
+var _Checkbox2 = _interopRequireDefault(_Checkbox);
+
+var _ListItemContent = require('./ListItemContent.js');
+
+var _ListItemContent2 = _interopRequireDefault(_ListItemContent);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var factory = function factory(Checkbox, ListItemContent) {
+  var ListCheckbox = function ListCheckbox(_ref) {
+    var caption = _ref.caption,
+        checked = _ref.checked,
+        className = _ref.className,
+        disabled = _ref.disabled,
+        legend = _ref.legend,
+        name = _ref.name,
+        onBlur = _ref.onBlur,
+        onChange = _ref.onChange,
+        onFocus = _ref.onFocus,
+        theme = _ref.theme;
+
+    var _className = (0, _classnames3.default)(theme.item, theme.checkboxItem, _defineProperty({}, theme.disabled, disabled), className);
+
+    return _react2.default.createElement(
+      'li',
+      { className: _className },
+      _react2.default.createElement(Checkbox, {
+        checked: checked,
+        className: theme.checkbox,
+        disabled: disabled,
+        label: _react2.default.createElement(ListItemContent, { caption: caption, legend: legend }),
+        name: name,
+        onBlur: onBlur,
+        onChange: onChange,
+        onFocus: onFocus
+      })
+    );
+  };
+
+  ListCheckbox.propTypes = {
+    caption: _react.PropTypes.string,
+    checked: _react.PropTypes.bool,
+    className: _react.PropTypes.string,
+    disabled: _react.PropTypes.bool,
+    legend: _react.PropTypes.string,
+    name: _react.PropTypes.string,
+    onBlur: _react.PropTypes.func,
+    onChange: _react.PropTypes.func,
+    onFocus: _react.PropTypes.func,
+    theme: _react.PropTypes.shape({
+      checkbox: _react.PropTypes.string,
+      checkboxItem: _react.PropTypes.string,
+      disabled: _react.PropTypes.string,
+      item: _react.PropTypes.string
+    })
+  };
+
+  ListCheckbox.defaultProps = {
+    checked: false,
+    disabled: false
+  };
+
+  return ListCheckbox;
+};
+
+var ListCheckbox = factory(_Checkbox2.default, _ListItemContent2.default);
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListCheckbox);
+exports.listCheckboxFactory = factory;
+exports.ListCheckbox = ListCheckbox;
\ No newline at end of file
diff --git a/lib/list/ListDivider.js b/lib/list/ListDivider.js
new file mode 100644
index 000000000..4f2a1d143
--- /dev/null
+++ b/lib/list/ListDivider.js
@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListDivider = undefined;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ListDivider = function ListDivider(_ref) {
+  var inset = _ref.inset,
+      theme = _ref.theme;
+  return _react2.default.createElement('hr', { className: inset ? theme.divider + ' ' + theme.inset : theme.divider });
+};
+
+ListDivider.propTypes = {
+  inset: _react.PropTypes.bool,
+  theme: _react.PropTypes.shape({
+    divider: _react.PropTypes.string,
+    inset: _react.PropTypes.string
+  })
+};
+
+ListDivider.defaultProps = {
+  inset: false
+};
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListDivider);
+exports.ListDivider = ListDivider;
\ No newline at end of file
diff --git a/lib/list/ListItem.js b/lib/list/ListItem.js
new file mode 100644
index 000000000..5f8f58b72
--- /dev/null
+++ b/lib/list/ListItem.js
@@ -0,0 +1,156 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItem = exports.listItemFactory = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _ListItemContent = require('./ListItemContent.js');
+
+var _ListItemContent2 = _interopRequireDefault(_ListItemContent);
+
+var _ListItemLayout = require('./ListItemLayout.js');
+
+var _ListItemLayout2 = _interopRequireDefault(_ListItemLayout);
+
+var _Ripple = require('../ripple/Ripple.js');
+
+var _Ripple2 = _interopRequireDefault(_Ripple);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(ripple, ListItemLayout, ListItemContent) {
+  var ListItem = function (_Component) {
+    _inherits(ListItem, _Component);
+
+    function ListItem() {
+      var _ref;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, ListItem);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ListItem.__proto__ || Object.getPrototypeOf(ListItem)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
+        if (_this.props.onClick && !_this.props.disabled) {
+          _this.props.onClick(event);
+        }
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(ListItem, [{
+      key: 'groupChildren',
+      value: function groupChildren() {
+        var children = {
+          leftActions: [],
+          rightActions: [],
+          ignored: []
+        };
+
+        _react2.default.Children.forEach(this.props.children, function (child, i) {
+          if (!_react2.default.isValidElement(child)) {
+            return;
+          }
+
+          var _child$props = child.props,
+              listItemIgnore = _child$props.listItemIgnore,
+              rest = _objectWithoutProperties(_child$props, ['listItemIgnore']);
+
+          var strippedChild = _extends({}, child, { props: rest });
+
+          if (listItemIgnore) {
+            children.ignored.push(strippedChild);
+            return;
+          }
+          if (child.type === ListItemContent) {
+            children.itemContent = strippedChild;
+            return;
+          }
+          var bucket = children.itemContent ? 'rightActions' : 'leftActions';
+          children[bucket].push(_extends({}, strippedChild, { key: i }));
+        });
+
+        return children;
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _props = this.props,
+            className = _props.className,
+            onMouseDown = _props.onMouseDown,
+            onTouchStart = _props.onTouchStart,
+            to = _props.to,
+            onClick = _props.onClick,
+            hasRipple = _props.ripple,
+            theme = _props.theme,
+            other = _objectWithoutProperties(_props, ['className', 'onMouseDown', 'onTouchStart', 'to', 'onClick', 'ripple', 'theme']); //eslint-disable-line no-unused-vars
+
+
+        var children = this.groupChildren();
+        var content = _react2.default.createElement(ListItemLayout, _extends({ theme: theme }, children, other));
+        return _react2.default.createElement(
+          'li',
+          { className: theme.listItem + ' ' + className, onClick: this.handleClick, onMouseDown: onMouseDown, onTouchStart: onTouchStart },
+          to ? _react2.default.createElement(
+            'a',
+            { href: this.props.to },
+            content
+          ) : content,
+          children.ignored
+        );
+      }
+    }]);
+
+    return ListItem;
+  }(_react.Component);
+
+  ListItem.propTypes = {
+    children: _react.PropTypes.any,
+    className: _react.PropTypes.string,
+    disabled: _react.PropTypes.bool,
+    onClick: _react.PropTypes.func,
+    ripple: _react.PropTypes.bool,
+    theme: _react.PropTypes.shape({
+      listItem: _react.PropTypes.string
+    }),
+    to: _react.PropTypes.string
+  };
+  ListItem.defaultProps = {
+    className: '',
+    disabled: false,
+    ripple: false
+  };
+
+
+  return ripple(ListItem);
+};
+
+var ripple = (0, _Ripple2.default)({ centered: false, listItemIgnore: true });
+var ListItem = factory(ripple, _ListItemLayout2.default, _ListItemContent2.default);
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListItem);
+exports.listItemFactory = factory;
+exports.ListItem = ListItem;
\ No newline at end of file
diff --git a/lib/list/ListItemAction.js b/lib/list/ListItemAction.js
new file mode 100644
index 000000000..a2e40dd83
--- /dev/null
+++ b/lib/list/ListItemAction.js
@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItemAction = undefined;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ListItemAction = function ListItemAction(_ref) {
+  var action = _ref.action,
+      theme = _ref.theme;
+  var _action$props = action.props,
+      onClick = _action$props.onClick,
+      onMouseDown = _action$props.onMouseDown;
+
+  var stopRipple = onClick && !onMouseDown;
+  var stop = function stop(e) {
+    return e.stopPropagation();
+  };
+  return _react2.default.createElement(
+    'span',
+    { className: theme.itemAction, onMouseDown: stopRipple && stop, onClick: onClick && stop },
+    action
+  );
+};
+
+ListItemAction.propTypes = {
+  action: _react.PropTypes.object,
+  theme: _react.PropTypes.shape({
+    itemAction: _react.PropTypes.string
+  })
+};
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListItemAction);
+exports.ListItemAction = ListItemAction;
\ No newline at end of file
diff --git a/lib/list/ListItemActions.js b/lib/list/ListItemActions.js
new file mode 100644
index 000000000..d19790595
--- /dev/null
+++ b/lib/list/ListItemActions.js
@@ -0,0 +1,56 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItemActions = exports.listItemActionsFactory = undefined;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _ListItemAction = require('./ListItemAction.js');
+
+var _ListItemAction2 = _interopRequireDefault(_ListItemAction);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var factory = function factory(ListItemAction) {
+  var ListItemActions = function ListItemActions(_ref) {
+    var type = _ref.type,
+        children = _ref.children,
+        theme = _ref.theme;
+
+    var validChildren = _react2.default.Children.toArray(children).filter(function (c) {
+      return _react2.default.isValidElement(c);
+    });
+
+    return _react2.default.createElement(
+      'span',
+      { className: theme[type] },
+      validChildren.map(function (action, i) {
+        return _react2.default.createElement(ListItemAction, { key: i, theme: theme, action: action });
+      })
+    );
+  };
+
+  ListItemActions.propTypes = {
+    children: _react.PropTypes.any,
+    theme: _react.PropTypes.shape({
+      left: _react.PropTypes.string,
+      right: _react.PropTypes.string
+    }),
+    type: _react.PropTypes.oneOf(['left', 'right'])
+  };
+
+  return ListItemActions;
+};
+
+var ListItemActions = factory(_ListItemAction2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListItemActions);
+exports.listItemActionsFactory = factory;
+exports.ListItemActions = ListItemActions;
\ No newline at end of file
diff --git a/lib/list/ListItemContent.js b/lib/list/ListItemContent.js
new file mode 100644
index 000000000..6f51077e2
--- /dev/null
+++ b/lib/list/ListItemContent.js
@@ -0,0 +1,116 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItemContent = exports.listItemContentFactory = undefined;
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _ListItemText = require('./ListItemText.js');
+
+var _ListItemText2 = _interopRequireDefault(_ListItemText);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var types = ['auto', 'normal', 'large'];
+
+var factory = function factory(ListItemText) {
+  var ListItemContent = function (_Component) {
+    _inherits(ListItemContent, _Component);
+
+    function ListItemContent() {
+      _classCallCheck(this, ListItemContent);
+
+      return _possibleConstructorReturn(this, (ListItemContent.__proto__ || Object.getPrototypeOf(ListItemContent)).apply(this, arguments));
+    }
+
+    _createClass(ListItemContent, [{
+      key: 'getType',
+      value: function getType() {
+        var _props = this.props,
+            type = _props.type,
+            children = _props.children,
+            caption = _props.caption,
+            legend = _props.legend;
+
+
+        var count = _react2.default.Children.count(children);
+        [caption, legend].forEach(function (s) {
+          count += s ? 1 : 0;
+        });
+        var typeIndex = Math.min(count, types.length);
+
+        return type || types[typeIndex];
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _props2 = this.props,
+            children = _props2.children,
+            caption = _props2.caption,
+            legend = _props2.legend,
+            theme = _props2.theme;
+
+        var className = (0, _classnames3.default)(theme.itemContentRoot, _defineProperty({}, theme[this.getType()], theme[this.getType()]));
+
+        return _react2.default.createElement(
+          'span',
+          { className: className },
+          caption && _react2.default.createElement(
+            ListItemText,
+            { theme: theme, primary: true },
+            caption
+          ),
+          legend && _react2.default.createElement(
+            ListItemText,
+            { theme: theme },
+            legend
+          ),
+          children
+        );
+      }
+    }]);
+
+    return ListItemContent;
+  }(_react.Component);
+
+  ListItemContent.propTypes = {
+    caption: _react.PropTypes.string,
+    children: _react.PropTypes.any,
+    legend: _react.PropTypes.string,
+    theme: _react.PropTypes.shape({
+      itemContentRoot: _react.PropTypes.string,
+      large: _react.PropTypes.string
+    }),
+    type: _react.PropTypes.oneOf(types)
+  };
+
+
+  return ListItemContent;
+};
+
+var ListItemContent = factory(_ListItemText2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListItemContent);
+exports.listItemContentFactory = factory;
+exports.ListItemContent = ListItemContent;
\ No newline at end of file
diff --git a/lib/list/ListItemLayout.js b/lib/list/ListItemLayout.js
new file mode 100644
index 000000000..22080f4a7
--- /dev/null
+++ b/lib/list/ListItemLayout.js
@@ -0,0 +1,104 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItemLayout = exports.listItemLayoutFactory = undefined;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _FontIcon = require('../font_icon/FontIcon.js');
+
+var _FontIcon2 = _interopRequireDefault(_FontIcon);
+
+var _Avatar = require('../avatar/Avatar.js');
+
+var _Avatar2 = _interopRequireDefault(_Avatar);
+
+var _ListItemContent = require('./ListItemContent.js');
+
+var _ListItemContent2 = _interopRequireDefault(_ListItemContent);
+
+var _ListItemActions = require('./ListItemActions.js');
+
+var _ListItemActions2 = _interopRequireDefault(_ListItemActions);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var factory = function factory(Avatar, ListItemContent, ListItemActions) {
+  var ListItemLayout = function ListItemLayout(props) {
+    var _classnames;
+
+    var className = (0, _classnames3.default)(props.theme.item, (_classnames = {}, _defineProperty(_classnames, props.theme.disabled, props.disabled), _defineProperty(_classnames, props.theme.selectable, props.selectable), _classnames), props.className);
+
+    var leftActions = [props.leftIcon && _react2.default.createElement(_FontIcon2.default, { value: props.leftIcon, key: 'leftIcon' }), props.avatar && _react2.default.createElement(Avatar, { image: props.avatar, key: 'avatar' })].concat(_toConsumableArray(props.leftActions));
+    var rightActions = [props.rightIcon && _react2.default.createElement(_FontIcon2.default, { value: props.rightIcon, key: 'rightIcon' })].concat(_toConsumableArray(props.rightActions));
+    var content = props.itemContent || _react2.default.createElement(ListItemContent, { theme: props.theme, caption: props.caption, legend: props.legend });
+    var emptyActions = function emptyActions(item) {
+      return !item[0] && !item[1] && !item[2];
+    };
+
+    return _react2.default.createElement(
+      'span',
+      { className: className },
+      !emptyActions(leftActions) > 0 && _react2.default.createElement(
+        ListItemActions,
+        { type: 'left', theme: props.theme },
+        leftActions
+      ),
+      content,
+      !emptyActions(rightActions) > 0 && _react2.default.createElement(
+        ListItemActions,
+        { type: 'right', theme: props.theme },
+        rightActions
+      )
+    );
+  };
+
+  ListItemLayout.propTypes = {
+    avatar: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    caption: _react.PropTypes.string,
+    children: _react.PropTypes.any,
+    className: _react.PropTypes.string,
+    disabled: _react.PropTypes.bool,
+    itemContent: _react.PropTypes.element,
+    leftActions: _react.PropTypes.array,
+    leftIcon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    legend: _react.PropTypes.string,
+    rightActions: _react.PropTypes.array,
+    rightIcon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    selectable: _react.PropTypes.bool,
+    theme: _react.PropTypes.shape({
+      disabled: _react.PropTypes.string,
+      item: _react.PropTypes.string,
+      selectable: _react.PropTypes.string
+    }),
+    to: _react.PropTypes.string
+  };
+
+  ListItemLayout.defaultProps = {
+    disabled: false,
+    selectable: false
+  };
+
+  return ListItemLayout;
+};
+
+var ListItemLayout = factory(_Avatar2.default, _ListItemContent2.default, _ListItemActions2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListItemLayout);
+exports.listItemLayoutFactory = factory;
+exports.ListItemLayout = ListItemLayout;
\ No newline at end of file
diff --git a/lib/list/ListItemText.js b/lib/list/ListItemText.js
new file mode 100644
index 000000000..8778f3144
--- /dev/null
+++ b/lib/list/ListItemText.js
@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItemText = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+var ListItemText = function ListItemText(_ref) {
+  var className = _ref.className,
+      primary = _ref.primary,
+      children = _ref.children,
+      theme = _ref.theme,
+      other = _objectWithoutProperties(_ref, ['className', 'primary', 'children', 'theme']);
+
+  var _className = (0, _classnames3.default)(theme.itemText, _defineProperty({}, theme.primary, primary), className);
+  return _react2.default.createElement(
+    'span',
+    _extends({ 'data-react-toolbox': 'list-item-text', className: _className }, other),
+    children
+  );
+};
+
+ListItemText.propTypes = {
+  children: _react.PropTypes.any,
+  className: _react.PropTypes.string,
+  primary: _react.PropTypes.bool,
+  theme: _react.PropTypes.shape({
+    itemText: _react.PropTypes.string,
+    primary: _react.PropTypes.string
+  })
+};
+
+ListItemText.defaultProps = {
+  primary: false
+};
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListItemText);
+exports.ListItemText = ListItemText;
\ No newline at end of file
diff --git a/lib/list/ListSubHeader.js b/lib/list/ListSubHeader.js
new file mode 100644
index 000000000..4e04c694b
--- /dev/null
+++ b/lib/list/ListSubHeader.js
@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListSubHeader = undefined;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ListSubHeader = function ListSubHeader(_ref) {
+  var caption = _ref.caption,
+      className = _ref.className,
+      theme = _ref.theme;
+  return _react2.default.createElement(
+    'h5',
+    { className: (0, _classnames2.default)(theme.subheader, className) },
+    caption
+  );
+};
+
+ListSubHeader.propTypes = {
+  caption: _react.PropTypes.string,
+  className: _react.PropTypes.string,
+  theme: _react.PropTypes.object
+};
+
+ListSubHeader.defaultProps = {
+  className: ''
+};
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListSubHeader);
+exports.ListSubHeader = ListSubHeader;
\ No newline at end of file
diff --git a/lib/list/_config.scss b/lib/list/_config.scss
new file mode 100644
index 000000000..a8814551f
--- /dev/null
+++ b/lib/list/_config.scss
@@ -0,0 +1,18 @@
+$list-vertical-padding: .8 * $unit !default;
+$list-horizontal-padding: 1.6 * $unit !default;
+$list-content-left-spacing: 7.2 * $unit !default;
+$list-subheader-height: 4.8 * $unit !default;
+$list-subheader-font-size: 1.4 * $unit !default;
+$list-subheader-font-weight: 500 !default;
+$list-divider-height: .1 * $unit !default;
+$list-item-min-height: 4.8 * $unit !default;
+$list-item-min-height-legend: 7.2 * $unit !default;
+$list-item-hover-color: $palette-grey-200 !default;
+$list-item-legend-margin-top: .3 * $unit !default;
+$list-item-icon-font-size: 2.4 * $unit !default;
+$list-item-icon-size: 1.8 * $unit !default;
+$list-item-right-icon-margin: $list-content-left-spacing - 2 * $list-horizontal-padding - $list-item-icon-size !default;
+$list-item-right-checkbox-margin: $list-item-right-icon-margin + $list-horizontal-padding !default;
+$list-item-avatar-height: 4 * $unit !default;
+$list-item-avatar-margin: .8 * $unit !default;
+$list-item-child-margin: .8 * $unit !default;
diff --git a/lib/list/index.d.ts b/lib/list/index.d.ts
new file mode 100644
index 000000000..ad4ace447
--- /dev/null
+++ b/lib/list/index.d.ts
@@ -0,0 +1,265 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface ListTheme {
+  /**
+   * Used for the root element of the list.
+   */
+  list?: string;
+}
+
+interface ListProps extends ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * If true, each element in the list will have a ripple effect on click
+   * @default false
+   */
+  ripple?: boolean;
+  /**
+   * If true, the elements in the list will display a hover effect and a pointer cursor.
+   * @default false
+   */
+  selectable?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ListTheme;
+}
+
+export class List extends React.Component<ListProps, {}> { }
+
+export interface ListCheckboxTheme {
+  /**
+   * Used as a wrapper class for the subheader element.
+   */
+  checkbox?: string;
+  /**
+   * Added to the checkbox element.
+   */
+  checkboxItem?: string;
+  /**
+   * Added to the inner content if its a disabled item.
+   */
+  disabled?: string;
+  /**
+   * Used for the inner content of a list item.
+   */
+  item?: string;
+  /**
+   * Used for the content wrapper element in list item.
+   */
+  itemContentRoot?: string;
+  /**
+   * Added to the text inside of the list item.
+   */
+  itemText?: string;
+  /**
+   * Added to the content wrapper element if size is large.
+   */
+  large?: string;
+  /**
+   * Added to the text inside of the list item if its primary.
+   */
+  primary?: string;
+}
+
+interface ListCheckboxProps extends ReactToolbox.Props {
+  /**
+   * Main text of the item. Required.
+   */
+  caption?: string;
+  /**
+   * If true the checkbox appears checked by default.
+   * @default false
+   */
+  checked?: boolean;
+  /**
+   * If true, the item is displayed as disabled and it's not clickable.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Secondary text to display under the caption.
+   */
+  legend?: string;
+  /**
+   * Name for the checkbox input item.
+   */
+  name?: string;
+  /**
+   * Callback called when the input element is blurred.
+   */
+  onBlur?: Function;
+  /**
+   * Callback called when the input element is changed.
+   */
+  onChange?: Function;
+  /**
+   * Callback called when the input element is focused.
+   */
+  onFocus?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ListCheckboxTheme;
+}
+
+export class ListCheckbox extends React.Component<ListCheckboxProps, {}> { }
+
+export interface ListDividerTheme {
+  /**
+   * Added to the root element.
+   */
+  divider?: string;
+  /**
+   * Added to root element if inset is true.
+   */
+  inset?: string;
+}
+
+interface ListDividerProps extends ReactToolbox.Props {
+  /**
+   * If true, will leave a space at the left side.
+   */
+  inset?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ListDividerTheme;
+}
+
+export class ListDivider extends React.Component<ListDividerProps, {}> { }
+
+export interface ListItemTheme {
+  /**
+   * Added to the inner content if its a disabled item.
+   */
+  disabled?: string;
+  /**
+   * Used for the inner content of a list item.
+   */
+  item?: string;
+  /**
+   * Used for each action element (left/right).
+   */
+  itemAction?: string;
+  /**
+   * Used for the content wrapper element in list item.
+   */
+  itemContentRoot?: string;
+  /**
+   * Added to the text inside of the list item.
+   */
+  itemText?: string;
+  /**
+   * Added to the content wrapper element if size is large.
+   */
+  large?: string;
+  /**
+   * Added for the element that wraps left actions.
+   */
+  left?: string;
+  /**
+   * Used for the root element of the list.
+   */
+  listItem?: string;
+  /**
+   * Added to the text inside of the list item if its primary.
+   */
+  primary?: string;
+  /**
+   * Added for the element that wraps right actions.
+   */
+  right?: string;
+  /**
+   * Added to the inner content if its a selectable item.
+   */
+  selectable?: string;
+}
+
+interface ListItemProps extends ReactToolbox.Props {
+  /**
+   * A string URL to specify an avatar in the left side of the item.
+   */
+  avatar?: React.ReactNode | string;
+  /**
+   * Main text of the item.
+   */
+  caption?: string;
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * If true, the item is displayed as disabled and is not clickable.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * An element that will be displayed as the item. If set, this will override caption and legend.
+   */
+  itemContent?: React.ReactNode;
+  /**
+   * A list of elements that are placed on the left side of the item and after the avatar attribute.
+   */
+  leftActions?: React.ReactNode;
+  /**
+   * A string key of a font icon or element to display an icon in the left side of the item.
+   */
+  leftIcon?: React.ReactNode | string;
+  /**
+   * Secondary text to display under the caption.
+   */
+  legend?: string;
+  /**
+   * A list of elements that are placed on the right side of the item and after the rightIcon attribute.
+   */
+  rightActions?: React.ReactNode;
+  /**
+   * The same as the leftIcon but in this case the icon is displayed in the right side.
+   */
+  rightIcon?: React.ReactNode | string;
+  /**
+   * If true, the item displays a ripple effect on click. By default it's inherited from the parent element.
+   */
+  ripple?: boolean;
+  /**
+   * If true, the elements in the list will display a hover effect and a pointer cursor. Inherited from the parent.
+   * @default false
+   */
+  selectable?: boolean;
+  /**
+   * Classnames object defining the component style.
+   * @default false
+   */
+  theme?: ListItemTheme;
+  /**
+   * In case you want to provide the item as a link, you can pass this property to specify the href.
+   */
+  to?: string;
+}
+
+export class ListItem extends React.Component<ListItemProps, {}> { }
+
+export interface ListSubHeaderTheme {
+  /**
+   * Used as a wrapper class for the subheader element.
+   */
+  subheader?: string;
+}
+
+interface ListSubHeaderProps extends ReactToolbox.Props {
+  /**
+   * Text that will be displayed.
+   */
+  caption?: string;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ListSubHeaderTheme;
+}
+
+export class ListSubHeader extends React.Component<ListSubHeaderProps, {}> { }
diff --git a/lib/list/index.js b/lib/list/index.js
new file mode 100644
index 000000000..a7445462f
--- /dev/null
+++ b/lib/list/index.js
@@ -0,0 +1,69 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.List = exports.ListItem = exports.ListDivider = exports.ListCheckbox = exports.ListItemText = exports.ListSubHeader = exports.ListItemLayout = exports.ListItemContent = exports.ListItemActions = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _avatar = require('../avatar');
+
+var _checkbox = require('../checkbox');
+
+var _ListItemText = require('./ListItemText.js');
+
+var _ListItemAction = require('./ListItemAction.js');
+
+var _ListSubHeader = require('./ListSubHeader.js');
+
+var _ListDivider = require('./ListDivider.js');
+
+var _List = require('./List.js');
+
+var _ListItem = require('./ListItem.js');
+
+var _ListCheckbox = require('./ListCheckbox.js');
+
+var _ListItemActions = require('./ListItemActions.js');
+
+var _ListItemContent = require('./ListItemContent.js');
+
+var _ListItemLayout = require('./ListItemLayout.js');
+
+var _ripple = require('../ripple');
+
+var _ripple2 = _interopRequireDefault(_ripple);
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var applyTheme = function applyTheme(Component) {
+  return (0, _reactCssThemr.themr)(_identifiers.LIST, _theme2.default)(Component);
+};
+var ripple = (0, _ripple2.default)({ centered: false, listItemIgnore: true });
+var ThemedListItemAction = applyTheme(_ListItemAction.ListItemAction);
+var ThemedListSubHeader = applyTheme(_ListSubHeader.ListSubHeader);
+var ThemedListItemText = applyTheme(_ListItemText.ListItemText);
+var ThemedListDivider = applyTheme(_ListDivider.ListDivider);
+var ThemedListItemContent = applyTheme((0, _ListItemContent.listItemContentFactory)(ThemedListItemText));
+var ThemedListItemActions = applyTheme((0, _ListItemActions.listItemActionsFactory)(ThemedListItemAction));
+var ThemedListItemLayout = applyTheme((0, _ListItemLayout.listItemLayoutFactory)(_avatar.Avatar, ThemedListItemContent, ThemedListItemActions));
+var ThemedListCheckbox = applyTheme((0, _ListCheckbox.listCheckboxFactory)(_checkbox.Checkbox, ThemedListItemContent));
+var ThemedListItem = applyTheme((0, _ListItem.listItemFactory)(ripple, ThemedListItemLayout, ThemedListItemContent));
+var ThemedList = applyTheme((0, _List.listFactory)(ThemedListItem));
+
+exports.ListItemActions = ThemedListItemActions;
+exports.ListItemContent = ThemedListItemContent;
+exports.ListItemLayout = ThemedListItemLayout;
+exports.ListSubHeader = ThemedListSubHeader;
+exports.ListItemText = ThemedListItemText;
+exports.ListCheckbox = ThemedListCheckbox;
+exports.ListDivider = ThemedListDivider;
+exports.ListItem = ThemedListItem;
+exports.List = ThemedList;
\ No newline at end of file
diff --git a/lib/list/theme.scss b/lib/list/theme.scss
new file mode 100644
index 000000000..e432fcccb
--- /dev/null
+++ b/lib/list/theme.scss
@@ -0,0 +1,159 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+
+.list {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  padding: $list-vertical-padding 0;
+  text-align: left;
+  white-space: nowrap;
+  list-style: none;
+}
+
+.subheader {
+  padding-left: $list-horizontal-padding;
+  margin: - $list-vertical-padding 0 0;
+  font-size: $list-subheader-font-size;
+  font-weight: $list-subheader-font-weight;
+  line-height: $list-subheader-height;
+  color: $color-text-secondary;
+}
+
+.divider {
+  height: $list-divider-height;
+  margin: - $list-divider-height 0 0;
+  background-color: $color-divider;
+  border: 0;
+  &.inset {
+    margin-right: $list-horizontal-padding;
+    margin-left: $list-content-left-spacing;
+  }
+  .list + & {
+    margin-top: - $list-vertical-padding;
+  }
+  .listItem ~ & {
+    margin-top: $list-vertical-padding;
+    margin-bottom: $list-vertical-padding;
+  }
+}
+
+.listItem {
+  position: relative;
+  > [data-react-toolbox="ripple"] {
+    overflow: hidden;
+  }
+
+  .ripple {
+    color: $color-text-secondary;
+  }
+}
+
+.item {
+  position: relative;
+  display: flex;
+  min-height: $list-item-min-height;
+  align-items: center;
+  padding: 0 $list-horizontal-padding;
+  color: $color-text;
+  &.selectable:not(.disabled):hover {
+    cursor: pointer;
+    background-color: $list-item-hover-color;
+  }
+  &.disabled {
+    pointer-events: none;
+    &:not(.checkboxItem) {
+      opacity: .5;
+    }
+    > .checkbox > [data-react-toolbox="label"] {
+      opacity: .5;
+    }
+  }
+}
+
+.left {
+  [data-react-toolbox="font-icon"] {
+    width: $list-item-icon-size;
+  }
+  & :last-child {
+    > [data-react-toolbox="font-icon"] {
+      margin-right: $list-item-right-icon-margin;
+    }
+  }
+}
+
+.right {
+  > :last-child  {
+    margin-right: 0;
+  }
+
+  > :first-child {
+    margin-left: $list-horizontal-padding;
+  }
+}
+
+.left, .right {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  vertical-align: middle;
+}
+
+.itemAction {
+  display: flex;
+  margin: $list-item-child-margin $list-horizontal-padding $list-item-child-margin 0;
+
+  > * {
+    padding: 0;
+  }
+
+  > [data-react-toolbox="font-icon"] {
+    font-size: $list-item-icon-font-size;
+    color: $color-text-secondary;
+  }
+}
+
+.itemContentRoot {
+  display: block;
+  flex-grow: 1;
+  &.large {
+    display: flex;
+    height: $list-item-min-height-legend;
+    flex-direction: column;
+    justify-content: center;
+  }
+}
+
+.checkbox {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-height: $list-item-min-height;
+  align-items: center;
+  margin: 0;
+  cursor: pointer;
+  > [data-react-toolbox="check"] {
+    margin-right: $list-item-right-checkbox-margin;
+  }
+  > [data-react-toolbox="label"] {
+    padding-left: 0;
+  }
+}
+
+.itemText {
+  display: block;
+
+  &:not(.primary) {
+    padding-top: $list-item-legend-margin-top;
+    font-size: $font-size-small;
+    color: $color-text-secondary;
+    white-space: normal;
+  }
+
+  &.primary {
+    font-size: $font-size-normal;
+    color: $color-text;
+  }
+}
diff --git a/lib/menu/IconMenu.js b/lib/menu/IconMenu.js
new file mode 100644
index 000000000..7053f6bc5
--- /dev/null
+++ b/lib/menu/IconMenu.js
@@ -0,0 +1,151 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconMenu = exports.iconMenuFactory = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _IconButton = require('../button/IconButton.js');
+
+var _IconButton2 = _interopRequireDefault(_IconButton);
+
+var _Menu = require('./Menu.js');
+
+var _Menu2 = _interopRequireDefault(_Menu);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(IconButton, Menu) {
+  var IconMenu = function (_Component) {
+    _inherits(IconMenu, _Component);
+
+    function IconMenu() {
+      var _ref;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, IconMenu);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = IconMenu.__proto__ || Object.getPrototypeOf(IconMenu)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+        active: false
+      }, _this.handleButtonClick = function (event) {
+        _this.setState({ active: !_this.state.active });
+        if (_this.props.onClick) _this.props.onClick(event);
+      }, _this.handleMenuHide = function () {
+        _this.setState({ active: false });
+        if (_this.props.onHide) _this.props.onHide();
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(IconMenu, [{
+      key: 'render',
+      value: function render() {
+        var _props = this.props,
+            children = _props.children,
+            className = _props.className,
+            icon = _props.icon,
+            iconRipple = _props.iconRipple,
+            menuRipple = _props.menuRipple,
+            onHide = _props.onHide,
+            onSelect = _props.onSelect,
+            onShow = _props.onShow,
+            position = _props.position,
+            selectable = _props.selectable,
+            selected = _props.selected,
+            theme = _props.theme,
+            other = _objectWithoutProperties(_props, ['children', 'className', 'icon', 'iconRipple', 'menuRipple', 'onHide', 'onSelect', 'onShow', 'position', 'selectable', 'selected', 'theme']);
+
+        return _react2.default.createElement(
+          'div',
+          _extends({}, other, { className: (0, _classnames2.default)(theme.iconMenu, className) }),
+          _react2.default.createElement(IconButton, {
+            className: theme.icon,
+            icon: icon,
+            onClick: this.handleButtonClick,
+            ripple: iconRipple
+          }),
+          _react2.default.createElement(
+            Menu,
+            {
+              active: this.state.active,
+              onHide: this.handleMenuHide,
+              onSelect: onSelect,
+              onShow: onShow,
+              position: position,
+              ripple: menuRipple,
+              selectable: selectable,
+              selected: selected,
+              theme: theme
+            },
+            children
+          )
+        );
+      }
+    }]);
+
+    return IconMenu;
+  }(_react.Component);
+
+  IconMenu.propTypes = {
+    children: _react.PropTypes.node,
+    className: _react.PropTypes.string,
+    icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    iconRipple: _react.PropTypes.bool,
+    menuRipple: _react.PropTypes.bool,
+    onClick: _react.PropTypes.func,
+    onHide: _react.PropTypes.func,
+    onSelect: _react.PropTypes.func,
+    onShow: _react.PropTypes.func,
+    position: _react.PropTypes.string,
+    selectable: _react.PropTypes.bool,
+    selected: _react.PropTypes.any,
+    theme: _react.PropTypes.shape({
+      icon: _react.PropTypes.string,
+      iconMenu: _react.PropTypes.string
+    })
+  };
+  IconMenu.defaultProps = {
+    className: '',
+    icon: 'more_vert',
+    iconRipple: true,
+    menuRipple: true,
+    position: 'auto',
+    selectable: false
+  };
+
+
+  return IconMenu;
+};
+
+var IconMenu = factory(_IconButton2.default, _Menu2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.MENU)(IconMenu);
+exports.iconMenuFactory = factory;
+exports.IconMenu = IconMenu;
\ No newline at end of file
diff --git a/lib/menu/Menu.js b/lib/menu/Menu.js
new file mode 100644
index 000000000..9c7017c31
--- /dev/null
+++ b/lib/menu/Menu.js
@@ -0,0 +1,324 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Menu = exports.menuFactory = undefined;
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactDom = require('react-dom');
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _utils = require('../utils');
+
+var _MenuItem = require('./MenuItem.js');
+
+var _MenuItem2 = _interopRequireDefault(_MenuItem);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var POSITION = {
+  AUTO: 'auto',
+  STATIC: 'static',
+  TOP_LEFT: 'topLeft',
+  TOP_RIGHT: 'topRight',
+  BOTTOM_LEFT: 'bottomLeft',
+  BOTTOM_RIGHT: 'bottomRight'
+};
+
+var factory = function factory(MenuItem) {
+  var Menu = function (_Component) {
+    _inherits(Menu, _Component);
+
+    function Menu() {
+      var _ref;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, Menu);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Menu.__proto__ || Object.getPrototypeOf(Menu)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+        active: _this.props.active,
+        rippled: false
+      }, _this.handleDocumentClick = function (event) {
+        if (_this.state.active && !_utils.events.targetIsDescendant(event, _reactDom2.default.findDOMNode(_this))) {
+          _this.setState({ active: false, rippled: false });
+        }
+      }, _this.handleSelect = function (item, event) {
+        var _item$props = item.props,
+            value = _item$props.value,
+            onClick = _item$props.onClick;
+
+        if (onClick) event.persist();
+        _this.setState({ active: false, rippled: _this.props.ripple }, function () {
+          if (onClick) onClick(event);
+          if (_this.props.onSelect) _this.props.onSelect(value);
+        });
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(Menu, [{
+      key: 'componentDidMount',
+      value: function componentDidMount() {
+        var _this2 = this;
+
+        this.positionTimeoutHandle = setTimeout(function () {
+          var _refs$menu$getBoundin = _this2.refs.menu.getBoundingClientRect(),
+              width = _refs$menu$getBoundin.width,
+              height = _refs$menu$getBoundin.height;
+
+          var position = _this2.props.position === POSITION.AUTO ? _this2.calculatePosition() : _this2.props.position;
+          _this2.setState({ position: position, width: width, height: height });
+        });
+      }
+    }, {
+      key: 'componentWillReceiveProps',
+      value: function componentWillReceiveProps(nextProps) {
+        var _this3 = this;
+
+        if (this.props.position !== nextProps.position) {
+          var position = nextProps.position === POSITION.AUTO ? this.calculatePosition() : nextProps.position;
+          this.setState({ position: position });
+        }
+
+        /**
+         * If the menu is going to be activated via props and its not active, verify
+         * the position is appropriated and then show it recalculating position if its
+         * wrong. It should be shown in two consecutive setState.
+         */
+        if (!this.props.active && nextProps.active && !this.state.active) {
+          if (nextProps.position === POSITION.AUTO) {
+            var _position = this.calculatePosition();
+            if (this.state.position !== _position) {
+              this.setState({ position: _position, active: false }, function () {
+                _this3.activateTimeoutHandle = setTimeout(function () {
+                  _this3.show();
+                }, 20);
+              });
+            } else {
+              this.show();
+            }
+          } else {
+            this.show();
+          }
+        }
+
+        /**
+         * If the menu is being deactivated via props and the current state is
+         * active, it should be hid.
+         */
+        if (this.props.active && !nextProps.active && this.state.active) {
+          this.hide();
+        }
+      }
+    }, {
+      key: 'componentWillUpdate',
+      value: function componentWillUpdate(nextProps, nextState) {
+        if (!this.state.active && nextState.active) {
+          _utils.events.addEventsToDocument({
+            click: this.handleDocumentClick,
+            touchstart: this.handleDocumentClick
+          });
+        }
+      }
+    }, {
+      key: 'componentDidUpdate',
+      value: function componentDidUpdate(prevProps, prevState) {
+        if (prevState.active && !this.state.active) {
+          if (this.props.onHide) this.props.onHide();
+          _utils.events.removeEventsFromDocument({
+            click: this.handleDocumentClick,
+            touchstart: this.handleDocumentClick
+          });
+        } else if (!prevState.active && this.state.active && this.props.onShow) {
+          this.props.onShow();
+        }
+      }
+    }, {
+      key: 'componentWillUnmount',
+      value: function componentWillUnmount() {
+        if (this.state.active) {
+          _utils.events.removeEventsFromDocument({
+            click: this.handleDocumentClick,
+            touchstart: this.handleDocumentClick
+          });
+        }
+        clearTimeout(this.positionTimeoutHandle);
+        clearTimeout(this.activateTimeoutHandle);
+      }
+    }, {
+      key: 'calculatePosition',
+      value: function calculatePosition() {
+        var parentNode = _reactDom2.default.findDOMNode(this).parentNode;
+        if (!parentNode) return;
+
+        var _parentNode$getBoundi = parentNode.getBoundingClientRect(),
+            top = _parentNode$getBoundi.top,
+            left = _parentNode$getBoundi.left,
+            height = _parentNode$getBoundi.height,
+            width = _parentNode$getBoundi.width;
+
+        var _utils$getViewport = _utils.utils.getViewport(),
+            wh = _utils$getViewport.height,
+            ww = _utils$getViewport.width;
+
+        var toTop = top < wh / 2 - height / 2;
+        var toLeft = left < ww / 2 - width / 2;
+        return '' + (toTop ? 'top' : 'bottom') + (toLeft ? 'Left' : 'Right');
+      }
+    }, {
+      key: 'getMenuStyle',
+      value: function getMenuStyle() {
+        var _state = this.state,
+            width = _state.width,
+            height = _state.height,
+            position = _state.position;
+
+        if (position !== POSITION.STATIC) {
+          if (this.state.active) {
+            return { clip: 'rect(0 ' + width + 'px ' + height + 'px 0)' };
+          } else if (position === POSITION.TOP_RIGHT) {
+            return { clip: 'rect(0 ' + width + 'px 0 ' + width + 'px)' };
+          } else if (position === POSITION.BOTTOM_RIGHT) {
+            return { clip: 'rect(' + height + 'px ' + width + 'px ' + height + 'px ' + width + 'px)' };
+          } else if (position === POSITION.BOTTOM_LEFT) {
+            return { clip: 'rect(' + height + 'px 0 ' + height + 'px 0)' };
+          } else if (position === POSITION.TOP_LEFT) {
+            return { clip: 'rect(0 0 0 0)' };
+          }
+        }
+      }
+    }, {
+      key: 'getRootStyle',
+      value: function getRootStyle() {
+        if (this.state.position !== POSITION.STATIC) {
+          return { width: this.state.width, height: this.state.height };
+        }
+      }
+    }, {
+      key: 'renderItems',
+      value: function renderItems() {
+        var _this4 = this;
+
+        return _react2.default.Children.map(this.props.children, function (item) {
+          if (!item) return item;
+          if (item.type === MenuItem) {
+            return _react2.default.cloneElement(item, {
+              ripple: item.props.ripple || _this4.props.ripple,
+              selected: typeof item.props.value !== 'undefined' && _this4.props.selectable && item.props.value === _this4.props.selected,
+              onClick: _this4.handleSelect.bind(_this4, item)
+            });
+          } else {
+            return _react2.default.cloneElement(item);
+          }
+        });
+      }
+    }, {
+      key: 'show',
+      value: function show() {
+        var _refs$menu$getBoundin2 = this.refs.menu.getBoundingClientRect(),
+            width = _refs$menu$getBoundin2.width,
+            height = _refs$menu$getBoundin2.height;
+
+        this.setState({ active: true, width: width, height: height });
+      }
+    }, {
+      key: 'hide',
+      value: function hide() {
+        this.setState({ active: false });
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _classnames;
+
+        var theme = this.props.theme;
+
+        var outlineStyle = { width: this.state.width, height: this.state.height };
+        var className = (0, _classnames3.default)([theme.menu, theme[this.state.position]], (_classnames = {}, _defineProperty(_classnames, theme.active, this.state.active), _defineProperty(_classnames, theme.rippled, this.state.rippled), _classnames), this.props.className);
+
+        return _react2.default.createElement(
+          'div',
+          { 'data-react-toolbox': 'menu', className: className, style: this.getRootStyle() },
+          this.props.outline ? _react2.default.createElement('div', { className: theme.outline, style: outlineStyle }) : null,
+          _react2.default.createElement(
+            'ul',
+            { ref: 'menu', className: theme.menuInner, style: this.getMenuStyle() },
+            this.renderItems()
+          )
+        );
+      }
+    }]);
+
+    return Menu;
+  }(_react.Component);
+
+  Menu.propTypes = {
+    active: _react.PropTypes.bool,
+    children: _react.PropTypes.node,
+    className: _react.PropTypes.string,
+    onHide: _react.PropTypes.func,
+    onSelect: _react.PropTypes.func,
+    onShow: _react.PropTypes.func,
+    outline: _react.PropTypes.bool,
+    position: _react.PropTypes.oneOf(Object.keys(POSITION).map(function (key) {
+      return POSITION[key];
+    })),
+    ripple: _react.PropTypes.bool,
+    selectable: _react.PropTypes.bool,
+    selected: _react.PropTypes.any,
+    theme: _react.PropTypes.shape({
+      active: _react.PropTypes.string,
+      bottomLeft: _react.PropTypes.string,
+      bottomRight: _react.PropTypes.string,
+      menu: _react.PropTypes.string,
+      menuInner: _react.PropTypes.string,
+      outline: _react.PropTypes.string,
+      rippled: _react.PropTypes.string,
+      static: _react.PropTypes.string,
+      topLeft: _react.PropTypes.string,
+      topRight: _react.PropTypes.string
+    })
+  };
+  Menu.defaultProps = {
+    active: false,
+    outline: true,
+    position: POSITION.STATIC,
+    ripple: true,
+    selectable: true
+  };
+
+
+  return Menu;
+};
+
+var Menu = factory(_MenuItem2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.MENU)(Menu);
+exports.menuFactory = factory;
+exports.Menu = Menu;
\ No newline at end of file
diff --git a/lib/menu/MenuDivider.js b/lib/menu/MenuDivider.js
new file mode 100644
index 000000000..cf8455141
--- /dev/null
+++ b/lib/menu/MenuDivider.js
@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuDivider = undefined;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var MenuDivider = function MenuDivider(_ref) {
+  var theme = _ref.theme;
+  return _react2.default.createElement('hr', { 'data-react-toolbox': 'menu-divider', className: theme.menuDivider });
+};
+
+MenuDivider.propTypes = {
+  theme: _react.PropTypes.shape({
+    menuDivider: _react.PropTypes.string
+  })
+};
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.MENU)(MenuDivider);
+exports.MenuDivider = MenuDivider;
\ No newline at end of file
diff --git a/lib/menu/MenuItem.js b/lib/menu/MenuItem.js
new file mode 100644
index 000000000..d854db0e2
--- /dev/null
+++ b/lib/menu/MenuItem.js
@@ -0,0 +1,136 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuItem = exports.menuItemFactory = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _FontIcon = require('../font_icon/FontIcon.js');
+
+var _FontIcon2 = _interopRequireDefault(_FontIcon);
+
+var _Ripple = require('../ripple/Ripple.js');
+
+var _Ripple2 = _interopRequireDefault(_Ripple);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(ripple) {
+  var MenuItem = function (_Component) {
+    _inherits(MenuItem, _Component);
+
+    function MenuItem() {
+      var _ref;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, MenuItem);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = MenuItem.__proto__ || Object.getPrototypeOf(MenuItem)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
+        if (_this.props.onClick && !_this.props.disabled) {
+          _this.props.onClick(event, _this);
+        }
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(MenuItem, [{
+      key: 'render',
+      value: function render() {
+        var _classnames;
+
+        var _props = this.props,
+            icon = _props.icon,
+            caption = _props.caption,
+            children = _props.children,
+            shortcut = _props.shortcut,
+            selected = _props.selected,
+            disabled = _props.disabled,
+            theme = _props.theme,
+            others = _objectWithoutProperties(_props, ['icon', 'caption', 'children', 'shortcut', 'selected', 'disabled', 'theme']);
+
+        var className = (0, _classnames3.default)(theme.menuItem, (_classnames = {}, _defineProperty(_classnames, theme.selected, selected), _defineProperty(_classnames, theme.disabled, disabled), _classnames), this.props.className);
+
+        return _react2.default.createElement(
+          'li',
+          _extends({}, others, { 'data-react-toolbox': 'menu-item', className: className, onClick: this.handleClick }),
+          icon ? _react2.default.createElement(_FontIcon2.default, { value: icon, className: theme.icon }) : null,
+          _react2.default.createElement(
+            'span',
+            { className: theme.caption },
+            caption
+          ),
+          shortcut ? _react2.default.createElement(
+            'small',
+            { className: theme.shortcut },
+            shortcut
+          ) : null,
+          children
+        );
+      }
+    }]);
+
+    return MenuItem;
+  }(_react.Component);
+
+  MenuItem.propTypes = {
+    caption: _react.PropTypes.string,
+    children: _react.PropTypes.any,
+    className: _react.PropTypes.string,
+    disabled: _react.PropTypes.bool,
+    icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    onClick: _react.PropTypes.func,
+    selected: _react.PropTypes.bool,
+    shortcut: _react.PropTypes.string,
+    theme: _react.PropTypes.shape({
+      caption: _react.PropTypes.string,
+      disabled: _react.PropTypes.string,
+      icon: _react.PropTypes.string,
+      menuItem: _react.PropTypes.string,
+      selected: _react.PropTypes.string,
+      shortcut: _react.PropTypes.string
+    })
+  };
+  MenuItem.defaultProps = {
+    className: '',
+    disabled: false,
+    selected: false
+  };
+
+
+  return ripple(MenuItem);
+};
+
+var MenuItem = factory((0, _Ripple2.default)({}));
+exports.default = (0, _reactCssThemr.themr)(_identifiers.MENU)(MenuItem);
+exports.menuItemFactory = factory;
+exports.MenuItem = MenuItem;
\ No newline at end of file
diff --git a/lib/menu/__test__/index.spec.js b/lib/menu/__test__/index.spec.js
new file mode 100644
index 000000000..8fa0b4163
--- /dev/null
+++ b/lib/menu/__test__/index.spec.js
@@ -0,0 +1,51 @@
+'use strict';
+
+var _expect = require('expect');
+
+var _expect2 = _interopRequireDefault(_expect);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactDom = require('react-dom');
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
+var _reactAddonsTestUtils = require('react-addons-test-utils');
+
+var _reactAddonsTestUtils2 = _interopRequireDefault(_reactAddonsTestUtils);
+
+var _Menu = require('../Menu');
+
+var _Menu2 = _interopRequireDefault(_Menu);
+
+var _MenuItem = require('../MenuItem');
+
+var _MenuItem2 = _interopRequireDefault(_MenuItem);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('MenuItem', function () {
+  describe('#onClick', function () {
+    it('passes to listener the event', function () {
+      var listenerCalled = false;
+      var handleClick = function handleClick(event) {
+        listenerCalled = true;
+        (0, _expect2.default)(event).toExist();
+        (0, _expect2.default)(event.target).toExist();
+      };
+
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(
+        _Menu2.default,
+        null,
+        _react2.default.createElement(_MenuItem2.default, { key: '1', onClick: handleClick })
+      ));
+
+      var menuItem = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _MenuItem.MenuItem);
+      _reactAddonsTestUtils2.default.Simulate.click(_reactDom2.default.findDOMNode(menuItem));
+
+      (0, _expect2.default)(listenerCalled).toBe(true);
+    });
+  });
+});
\ No newline at end of file
diff --git a/lib/menu/_config.scss b/lib/menu/_config.scss
new file mode 100644
index 000000000..0b5343661
--- /dev/null
+++ b/lib/menu/_config.scss
@@ -0,0 +1,16 @@
+$menu-expand-duration: .3s !default;
+$menu-fade-duration: .2s !default;
+$menu-ripple-delay: .3s !default;
+$menu-background-color: $color-white !default;
+$menu-padding: .8 * $unit 0 !default;
+$menu-outline-border-radius: .2 * $unit !default;
+$menu-item-hover-background: $palette-grey-200 !default;
+$menu-item-selected-background: transparent !default;
+$menu-item-icon-font-size: 2.4 * $unit !default;
+$menu-item-icon-size: 1.6 * $menu-item-icon-font-size !default;
+$menu-item-height: 4.8 * $unit !default;
+$menu-item-padding: 1.6 * $unit !default;
+$menu-item-font-size: 1.6 * $unit !default;
+$menu-divider-height: (4.8 * $unit) / 4 !default;
+$menu-icon-size: 2.3 * $unit !default;
+$menu-icon-ripple-duration: 650ms !default;
diff --git a/lib/menu/index.d.ts b/lib/menu/index.d.ts
new file mode 100644
index 000000000..5d9fccdfd
--- /dev/null
+++ b/lib/menu/index.d.ts
@@ -0,0 +1,242 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface MenuTheme {
+  /**
+   * Added to the root element when menu is active.
+   */
+  active?: string;
+  /**
+   * Added to the root when position is bottom left.
+   */
+  bottomLeft?: string;
+  /**
+   * Added to the root when position is bottom right.
+   */
+  bottomRight?: string;
+  /**
+   * Used for the root element of the menu.
+   */
+  menu?: string;
+  /**
+   * Used for the inner wrapper.
+   */
+  menuInner?: string;
+  /**
+   * Used to draw the outline.
+   */
+  outline?: string;
+  /**
+   * Added to the menu in case if should have ripple.
+   */
+  rippled?: string;
+  /**
+   * Added to the root in case its static.
+   */
+  static?: string;
+  /**
+   * Added to the root when position is top left.
+   */
+  topLeft?: string;
+  /**
+   * Added to the root when position is top right.
+   */
+  topRight?: string;
+}
+
+interface MenuProps extends ReactToolbox.Props {
+  /**
+   * If true, the menu will be displayed as opened by default.
+   * @default false
+   */
+  active?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Callback that will be called when the menu is being hidden.
+   */
+  onHide?: Function;
+  /**
+   * Callback that will be invoked when a menu item is selected.
+   */
+  onSelect?: Function;
+  /**
+   * Callback that will be invoked when the menu is being shown.
+   */
+  onShow?: Function;
+  /**
+   * If true the menu wrapper will show an outline with a soft shadow.
+   * @default false
+   */
+  outline?: boolean;
+  /**
+   * Determine the position of the menu. With static value the menu will be always shown, auto means that the it will decide the opening direction based on the current position. To force a position use topLeft, topRight, bottomLeft, bottomRight.
+   * @default static
+   */
+  position?: "auto" | "static" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
+  /**
+   * If true, the menu items will show a ripple effect on click.
+   * @default true
+   */
+  ripple?: boolean;
+  /**
+   * If true, the menu will keep a value to highlight the active child item.
+   * @default false
+   */
+  selectable?: boolean;
+  /**
+   * Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted.
+   */
+  selected?: any;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: MenuTheme;
+}
+
+export class Menu extends React.Component<MenuProps, {}> { }
+
+export interface IconMenuTheme {
+  /**
+   * Used for the icon element.
+   */
+  icon?: string;
+  /**
+   * Used for the root element of the icon menu.
+   */
+  iconMenu?: string;
+}
+
+interface IconMenuProps extends ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Icon font key string or Element to display the opener icon.
+   * @default more_vert
+   */
+  icon?: React.ReactNode | string;
+  /**
+   * If true, the icon will show a ripple when is clicked.
+   * @default true
+   */
+  iconRipple?: boolean;
+  /**
+   * Transferred to the Menu component.
+   * @default true
+   */
+  menuRipple?: boolean;
+  /**
+   * Callback that will be called when the menu is being hidden.
+   */
+  onHide?: Function;
+  /**
+   * Callback that will be invoked when a menu item is selected.
+   */
+  onSelect?: Function;
+  /**
+   * Callback that will be invoked when the menu is being shown.
+   */
+  onShow?: Function;
+  /**
+   * Determines the position of the menu. This property is transferred to the inner Menu component.
+   * @default auto
+   */
+  position?: "auto" | "static" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
+  /**
+   * If true, the menu will keep a value to highlight the active child item.
+   * @default false
+   */
+  selectable?: boolean;
+  /**
+   * Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted.
+   */
+  selected?: any;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: IconMenuTheme;
+}
+
+export class IconMenu extends React.Component<IconMenuProps, {}> { }
+
+export interface MenuDividerTheme {
+  /**
+   *
+   */
+  menuDivider?: string;
+}
+
+interface MenuDividerProps extends ReactToolbox.Props {
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: MenuDividerTheme;
+}
+
+export class MenuDivider extends React.Component<MenuDividerProps, {}> { }
+
+export interface MenuItemTheme {
+  /**
+   * Used for the caption inside the item.
+   */
+  caption?: string;
+  /**
+   * Added to the root element if it's disabled.
+   */
+  disabled?: string;
+  /**
+   * Used for the icon element if exists.
+   */
+  icon?: string;
+  /**
+   * Used as the root class for the component.
+   */
+  menuItem?: string;
+  /**
+   * Added to the root element in case it's selected.
+   */
+  selected?: string;
+  /**
+   * Used for the shortcut element if exists.
+   */
+  shortcut?: string;
+}
+
+interface MenuItemProps extends ReactToolbox.Props {
+  /**
+   * The text to include in the menu item. Required.
+   */
+  caption: string;
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * If true, the item will be displayed as disabled and is not selectable.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Icon font key string or Element to display in the right side of the option.
+   */
+  icon?: React.ReactNode | string;
+  /**
+   * Transferred from the Menu component for selectable menus. Indicates if it's the current active option.
+   * @default false
+   */
+  selected?: boolean;
+  /**
+   * Displays shortcut text on the right side of the caption attribute.
+   */
+  shortcut?: string;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: MenuItemTheme;
+}
+
+export class MenuItem extends React.Component<MenuItemProps, {}> { }
diff --git a/lib/menu/index.js b/lib/menu/index.js
new file mode 100644
index 000000000..56f87c943
--- /dev/null
+++ b/lib/menu/index.js
@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconMenu = exports.Menu = exports.MenuItem = exports.MenuDivider = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _button = require('../button');
+
+var _MenuDivider = require('./MenuDivider.js');
+
+var _MenuItem = require('./MenuItem.js');
+
+var _Menu = require('./Menu.js');
+
+var _IconMenu = require('./IconMenu.js');
+
+var _ripple = require('../ripple');
+
+var _ripple2 = _interopRequireDefault(_ripple);
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var applyTheme = function applyTheme(Component) {
+  return (0, _reactCssThemr.themr)(_identifiers.MENU, _theme2.default)(Component);
+};
+var ThemedMenuDivider = applyTheme(_MenuDivider.MenuDivider);
+var ThemedMenuItem = applyTheme((0, _MenuItem.menuItemFactory)((0, _ripple2.default)({})));
+var ThemedMenu = applyTheme((0, _Menu.menuFactory)(ThemedMenuItem));
+var ThemedIconMenu = applyTheme((0, _IconMenu.iconMenuFactory)(_button.IconButton, ThemedMenu));
+
+exports.MenuDivider = ThemedMenuDivider;
+exports.MenuItem = ThemedMenuItem;
+exports.Menu = ThemedMenu;
+exports.IconMenu = ThemedIconMenu;
\ No newline at end of file
diff --git a/lib/menu/theme.scss b/lib/menu/theme.scss
new file mode 100644
index 000000000..9f4ec9b3c
--- /dev/null
+++ b/lib/menu/theme.scss
@@ -0,0 +1,154 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+
+.iconMenu {
+  position: relative;
+  display: inline-block;
+  text-align: center;
+  .icon {
+    cursor: pointer;
+  }
+}
+
+.menu {
+  position: relative;
+  display: inline-block;
+  &.topLeft {
+    position: absolute;
+    top: 0;
+    left: 0;
+    > .outline {
+      transform-origin: 0 0;
+    }
+  }
+  &.topRight {
+    position: absolute;
+    top: 0;
+    right: 0;
+    > .outline {
+      transform-origin: 100% 0;
+    }
+  }
+  &.bottomLeft {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    > .outline {
+      transform-origin: 0 100%;
+    }
+  }
+  &.bottomRight {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    > .outline {
+      transform-origin: 100% 100%;
+    }
+  }
+  &:not(.static) {
+    z-index: $z-index-higher;
+    pointer-events: none;
+    > .outline {
+      opacity: 0;
+      transition: transform $menu-expand-duration $animation-curve-default,
+      opacity $menu-fade-duration $animation-curve-default;
+      transform: scale(0);
+      will-change: transform;
+    }
+    > .menuInner {
+      position: absolute;
+      top: 0;
+      left: 0;
+      opacity: 0;
+    }
+    &.rippled:not(.active) {
+      > .outline {
+        transition-delay: $menu-ripple-delay;
+      }
+      > .menuInner {
+        transition-delay: $menu-ripple-delay;
+      }
+    }
+    &.active {
+      pointer-events: all;
+      > .outline {
+        opacity: 1;
+        transform: scale(1);
+      }
+      > .menuInner {
+        opacity: 1;
+        transition: opacity $menu-fade-duration $animation-curve-default,
+        clip $menu-expand-duration $animation-curve-default;
+      }
+    }
+  }
+}
+
+.outline {
+  @include shadow-2dp();
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  background-color: $menu-background-color;
+  border-radius: $menu-outline-border-radius;
+}
+
+.menuInner {
+  position: relative;
+  display: block;
+  padding: $menu-padding;
+  text-align: left;
+  white-space: nowrap;
+  list-style: none;
+}
+
+.menuItem {
+  position: relative;
+  display: flex;
+  height: $menu-item-height;
+  align-items: center;
+  padding: 0 $menu-item-padding;
+  overflow: hidden;
+  font-size: $menu-item-font-size;
+  color: $color-text;
+  &:not(.disabled):hover {
+    cursor: pointer;
+    background-color: $menu-item-hover-background;
+  }
+  &.disabled {
+    pointer-events: none;
+    opacity: .5;
+  }
+  &.selected {
+    font-weight: 500;
+    background-color: $menu-item-selected-background;
+  }
+  .ripple {
+    color: $color-text-secondary;
+  }
+
+  .icon {
+    width: $menu-item-icon-size;
+    font-size: $menu-item-icon-font-size !important;
+  }
+}
+
+.caption {
+  flex-grow: 1;
+  font-size: $font-size-normal;
+}
+
+.shortcut {
+  margin-left: $menu-item-padding;
+}
+
+.menuDivider {
+  display: block;
+  width: 100%;
+  height: 1px;
+  margin: $menu-divider-height 0;
+  background-color: $color-divider;
+}
diff --git a/lib/navigation/Navigation.js b/lib/navigation/Navigation.js
new file mode 100644
index 000000000..8d8876ffe
--- /dev/null
+++ b/lib/navigation/Navigation.js
@@ -0,0 +1,86 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Navigation = exports.navigationFactory = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Button = require('../button/Button.js');
+
+var _Button2 = _interopRequireDefault(_Button);
+
+var _Link = require('../link/Link.js');
+
+var _Link2 = _interopRequireDefault(_Link);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var factory = function factory(Button, Link) {
+  var Navigation = function Navigation(_ref) {
+    var actions = _ref.actions,
+        children = _ref.children,
+        className = _ref.className,
+        routes = _ref.routes,
+        theme = _ref.theme,
+        type = _ref.type;
+
+    var _className = (0, _classnames2.default)(theme[type], className);
+    var buttons = actions.map(function (action, index) {
+      return _react2.default.createElement(Button, _extends({ className: theme.button, key: index }, action));
+    });
+
+    var links = routes.map(function (route, index) {
+      return _react2.default.createElement(Link, _extends({ className: theme.link, key: index }, route));
+    });
+
+    return _react2.default.createElement(
+      'nav',
+      { 'data-react-toolbox': 'navigation', className: _className },
+      links,
+      buttons,
+      children
+    );
+  };
+
+  Navigation.propTypes = {
+    actions: _react.PropTypes.array,
+    children: _react.PropTypes.node,
+    className: _react.PropTypes.string,
+    routes: _react.PropTypes.array,
+    theme: _react.PropTypes.shape({
+      button: _react.PropTypes.string,
+      horizontal: _react.PropTypes.string,
+      link: _react.PropTypes.string,
+      vertical: _react.PropTypes.string
+    }),
+    type: _react.PropTypes.oneOf(['vertical', 'horizontal'])
+  };
+
+  Navigation.defaultProps = {
+    actions: [],
+    className: '',
+    type: 'horizontal',
+    routes: []
+  };
+
+  return Navigation;
+};
+
+var Navigation = factory(_Button2.default, _Link2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.NAVIGATION)(Navigation);
+exports.navigationFactory = factory;
+exports.Navigation = Navigation;
\ No newline at end of file
diff --git a/lib/navigation/_config.scss b/lib/navigation/_config.scss
new file mode 100644
index 000000000..6b654ac73
--- /dev/null
+++ b/lib/navigation/_config.scss
@@ -0,0 +1,2 @@
+$navigation-space: $unit !default;
+$navigation-color: $color-black !default;
diff --git a/lib/navigation/index.d.ts b/lib/navigation/index.d.ts
new file mode 100644
index 000000000..a2795a8da
--- /dev/null
+++ b/lib/navigation/index.d.ts
@@ -0,0 +1,47 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface NavigationTheme {
+  /**
+   * Used for buttons provided in the component.
+   */
+  button?: string;
+  /**
+   * Used for the root element if the layout is horizontal.
+   */
+  horizontal?: string;
+  /**
+   * Used for links provided in the component.
+   */
+  link?: string;
+  /**
+   * Used for the root element if the layout is vertical.
+   */
+  vertical?: string;
+}
+
+interface NavigationProps extends ReactToolbox.Props {
+  /**
+   * Array of objects that will be represented as <Button/> so the keys will be transferred as properties the Button Component.
+   */
+  actions?: any[];
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Array of objects similar to actions but that will be rendered as <Link/> component definition.
+   */
+  routes?: any[];
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: NavigationTheme;
+  /**
+   * Type of the navigation, it can be vertical or horizontal.
+   * @default horizontal
+   */
+  type?: "vertical" | "horizontal";
+}
+
+export class Navigation extends React.Component<NavigationProps, {}> { }
diff --git a/lib/navigation/index.js b/lib/navigation/index.js
new file mode 100644
index 000000000..386b3ecee
--- /dev/null
+++ b/lib/navigation/index.js
@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Navigation = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Navigation = require('./Navigation.js');
+
+var _button = require('../button');
+
+var _link = require('../link');
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ThemedNavigation = (0, _reactCssThemr.themr)(_identifiers.NAVIGATION, _theme2.default)((0, _Navigation.navigationFactory)(_button.Button, _link.Link));
+exports.default = ThemedNavigation;
+exports.Navigation = ThemedNavigation;
\ No newline at end of file
diff --git a/lib/navigation/theme.scss b/lib/navigation/theme.scss
new file mode 100644
index 000000000..2d8375fd2
--- /dev/null
+++ b/lib/navigation/theme.scss
@@ -0,0 +1,26 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+
+.horizontal {
+  > [data-react-toolbox="button"], > [data-react-toolbox="link"] {
+    display: inline-block;
+    margin: 0 $navigation-space / 2;
+  }
+}
+
+.vertical {
+  > [data-react-toolbox="button"], > [data-react-toolbox="link"] {
+    display: block;
+    margin: $navigation-space / 2;
+  }
+}
+
+.vertical, .horizontal {
+  padding: $navigation-space / 2;
+
+  > [data-react-toolbox="link"] {
+    color: $navigation-color;
+  }
+}
diff --git a/lib/overlay/Overlay.js b/lib/overlay/Overlay.js
new file mode 100644
index 000000000..5f189bf77
--- /dev/null
+++ b/lib/overlay/Overlay.js
@@ -0,0 +1,133 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Overlay = undefined;
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Portal = require('../hoc/Portal.js');
+
+var _Portal2 = _interopRequireDefault(_Portal);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var Overlay = function (_Component) {
+  _inherits(Overlay, _Component);
+
+  function Overlay() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck(this, Overlay);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Overlay.__proto__ || Object.getPrototypeOf(Overlay)).call.apply(_ref, [this].concat(args))), _this), _this.handleEscKey = function (e) {
+      if (_this.props.active && _this.props.onEscKeyDown && e.which === 27) {
+        _this.props.onEscKeyDown(e);
+      }
+    }, _temp), _possibleConstructorReturn(_this, _ret);
+  }
+
+  _createClass(Overlay, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      if (this.props.active) {
+        document.body.addEventListener('keydown', this.handleEscKey);
+        document.body.style.overflow = 'hidden';
+      }
+    }
+  }, {
+    key: 'componentWillUpdate',
+    value: function componentWillUpdate(nextProps) {
+      if (nextProps.active && !this.props.active) document.body.style.overflow = 'hidden';
+      if (!nextProps.active && this.props.active && !document.querySelectorAll('[data-react-toolbox="overlay"]')[1]) document.body.style.overflow = '';
+    }
+  }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate() {
+      if (this.props.active) {
+        document.body.addEventListener('keydown', this.handleEscKey);
+      }
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      if (!document.querySelectorAll('[data-react-toolbox="overlay"]')[1]) document.body.style.overflow = '';
+      document.body.removeEventListener('keydown', this.handleEscKey);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _classnames;
+
+      var _props = this.props,
+          active = _props.active,
+          className = _props.className,
+          children = _props.children,
+          invisible = _props.invisible,
+          onClick = _props.onClick,
+          theme = _props.theme;
+
+      var _className = (0, _classnames3.default)(theme.overlay, (_classnames = {}, _defineProperty(_classnames, theme.active, active), _defineProperty(_classnames, theme.invisible, invisible), _classnames), className);
+
+      return _react2.default.createElement(
+        _Portal2.default,
+        null,
+        _react2.default.createElement(
+          'div',
+          { className: _className, 'data-react-toolbox': 'overlay' },
+          _react2.default.createElement('div', { className: theme.backdrop, onClick: onClick }),
+          children
+        )
+      );
+    }
+  }]);
+
+  return Overlay;
+}(_react.Component);
+
+Overlay.propTypes = {
+  active: _react.PropTypes.bool,
+  children: _react.PropTypes.node,
+  className: _react.PropTypes.string,
+  invisible: _react.PropTypes.bool,
+  onClick: _react.PropTypes.func,
+  onEscKeyDown: _react.PropTypes.func,
+  theme: _react.PropTypes.shape({
+    active: _react.PropTypes.string,
+    backdrop: _react.PropTypes.string,
+    invisible: _react.PropTypes.string,
+    overlay: _react.PropTypes.string
+  })
+};
+Overlay.defaultProps = {
+  invisible: false
+};
+exports.default = (0, _reactCssThemr.themr)(_identifiers.OVERLAY)(Overlay);
+exports.Overlay = Overlay;
\ No newline at end of file
diff --git a/lib/overlay/_config.scss b/lib/overlay/_config.scss
new file mode 100644
index 000000000..ccba4d3c7
--- /dev/null
+++ b/lib/overlay/_config.scss
@@ -0,0 +1,2 @@
+$overlay-color: $color-black !default;
+$overlay-opacity: .6 !default;
diff --git a/lib/overlay/index.js b/lib/overlay/index.js
new file mode 100644
index 000000000..96c77eeee
--- /dev/null
+++ b/lib/overlay/index.js
@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Overlay = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Overlay = require('./Overlay.js');
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ThemedOverlay = (0, _reactCssThemr.themr)(_identifiers.OVERLAY, _theme2.default)(_Overlay.Overlay);
+exports.default = ThemedOverlay;
+exports.Overlay = ThemedOverlay;
\ No newline at end of file
diff --git a/lib/overlay/theme.scss b/lib/overlay/theme.scss
new file mode 100644
index 000000000..e740884ea
--- /dev/null
+++ b/lib/overlay/theme.scss
@@ -0,0 +1,42 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: $z-index-highest;
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  flex-direction: column;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  &.invisible > *:not(.backdrop) {
+    pointer-events: all;
+  }
+}
+
+.backdrop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: $overlay-color;
+  opacity: 0;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transition-property: opacity;
+}
+
+.active {
+  pointer-events: all;
+  > .backdrop {
+    opacity: $overlay-opacity;
+  }
+}
diff --git a/lib/progress_bar/ProgressBar.js b/lib/progress_bar/ProgressBar.js
new file mode 100644
index 000000000..6e83348b7
--- /dev/null
+++ b/lib/progress_bar/ProgressBar.js
@@ -0,0 +1,162 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProgressBar = undefined;
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _prefixer = require('../utils/prefixer.js');
+
+var _prefixer2 = _interopRequireDefault(_prefixer);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var ProgressBar = function (_Component) {
+  _inherits(ProgressBar, _Component);
+
+  function ProgressBar() {
+    _classCallCheck(this, ProgressBar);
+
+    return _possibleConstructorReturn(this, (ProgressBar.__proto__ || Object.getPrototypeOf(ProgressBar)).apply(this, arguments));
+  }
+
+  _createClass(ProgressBar, [{
+    key: 'calculateRatio',
+    value: function calculateRatio(value) {
+      if (value < this.props.min) return 0;
+      if (value > this.props.max) return 1;
+      return (value - this.props.min) / (this.props.max - this.props.min);
+    }
+  }, {
+    key: 'circularStyle',
+    value: function circularStyle() {
+      if (this.props.mode !== 'indeterminate') {
+        return { strokeDasharray: 2 * Math.PI * 25 * this.calculateRatio(this.props.value) + ', 400' };
+      }
+    }
+  }, {
+    key: 'linearStyle',
+    value: function linearStyle() {
+      if (this.props.mode !== 'indeterminate') {
+        return {
+          buffer: (0, _prefixer2.default)({ transform: 'scaleX(' + this.calculateRatio(this.props.buffer) + ')' }),
+          value: (0, _prefixer2.default)({ transform: 'scaleX(' + this.calculateRatio(this.props.value) + ')' })
+        };
+      } else {
+        return {};
+      }
+    }
+  }, {
+    key: 'renderCircular',
+    value: function renderCircular() {
+      return _react2.default.createElement(
+        'svg',
+        { className: this.props.theme.circle, viewBox: '0 0 60 60' },
+        _react2.default.createElement('circle', { className: this.props.theme.path, style: this.circularStyle(), cx: '30', cy: '30', r: '25' })
+      );
+    }
+  }, {
+    key: 'renderLinear',
+    value: function renderLinear() {
+      var _linearStyle = this.linearStyle(),
+          buffer = _linearStyle.buffer,
+          value = _linearStyle.value;
+
+      return _react2.default.createElement(
+        'div',
+        null,
+        _react2.default.createElement('span', { ref: 'buffer', 'data-ref': 'buffer', className: this.props.theme.buffer, style: buffer }),
+        _react2.default.createElement('span', { ref: 'value', 'data-ref': 'value', className: this.props.theme.value, style: value })
+      );
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _classnames;
+
+      var _props = this.props,
+          className = _props.className,
+          disabled = _props.disabled,
+          max = _props.max,
+          min = _props.min,
+          mode = _props.mode,
+          multicolor = _props.multicolor,
+          type = _props.type,
+          theme = _props.theme,
+          value = _props.value;
+
+      var _className = (0, _classnames3.default)(theme[type], (_classnames = {}, _defineProperty(_classnames, theme[mode], mode), _defineProperty(_classnames, theme.multicolor, multicolor), _classnames), className);
+
+      return _react2.default.createElement(
+        'div',
+        {
+          disabled: disabled,
+          'data-react-toolbox': 'progress-bar',
+          'aria-valuenow': value,
+          'aria-valuemin': min,
+          'aria-valuemax': max,
+          className: _className
+        },
+        type === 'circular' ? this.renderCircular() : this.renderLinear()
+      );
+    }
+  }]);
+
+  return ProgressBar;
+}(_react.Component);
+
+ProgressBar.propTypes = {
+  buffer: _react.PropTypes.number,
+  className: _react.PropTypes.string,
+  disabled: _react.PropTypes.bool,
+  max: _react.PropTypes.number,
+  min: _react.PropTypes.number,
+  mode: _react.PropTypes.oneOf(['determinate', 'indeterminate']),
+  multicolor: _react.PropTypes.bool,
+  theme: _react.PropTypes.shape({
+    buffer: _react.PropTypes.string,
+    circle: _react.PropTypes.string,
+    circular: _react.PropTypes.string,
+    indeterminate: _react.PropTypes.string,
+    linear: _react.PropTypes.string,
+    multicolor: _react.PropTypes.string,
+    path: _react.PropTypes.string,
+    value: _react.PropTypes.string
+  }),
+  type: _react.PropTypes.oneOf(['linear', 'circular']),
+  value: _react.PropTypes.number
+};
+ProgressBar.defaultProps = {
+  buffer: 0,
+  className: '',
+  max: 100,
+  min: 0,
+  mode: 'indeterminate',
+  multicolor: false,
+  type: 'linear',
+  value: 0
+};
+exports.default = (0, _reactCssThemr.themr)(_identifiers.PROGRESS_BAR)(ProgressBar);
+exports.ProgressBar = ProgressBar;
\ No newline at end of file
diff --git a/lib/progress_bar/__test__/index.spec.js b/lib/progress_bar/__test__/index.spec.js
new file mode 100644
index 000000000..ec2d796d7
--- /dev/null
+++ b/lib/progress_bar/__test__/index.spec.js
@@ -0,0 +1,92 @@
+'use strict';
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _expect = require('expect');
+
+var _expect2 = _interopRequireDefault(_expect);
+
+var _reactAddonsTestUtils = require('react-addons-test-utils');
+
+var _reactAddonsTestUtils2 = _interopRequireDefault(_reactAddonsTestUtils);
+
+var _ProgressBar = require('../ProgressBar');
+
+var _ProgressBar2 = _interopRequireDefault(_ProgressBar);
+
+var _theme = require('../theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+var _testing = require('../../utils/testing');
+
+var _testing2 = _interopRequireDefault(_testing);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('ProgressBar', function () {
+  var progressBar = void 0;
+
+  describe('#calculateRatio', function () {
+    before(function () {
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_ProgressBar2.default, { min: 100, max: 300, theme: _theme2.default }));
+      progressBar = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _ProgressBar.ProgressBar);
+    });
+
+    it('calculates the right ratio', function () {
+      (0, _expect2.default)(progressBar.calculateRatio(150)).toEqual(0.25);
+    });
+
+    it('gets 0 when value is less than min', function () {
+      (0, _expect2.default)(progressBar.calculateRatio(10)).toEqual(0);
+    });
+
+    it('gets 1 when value is more than max', function () {
+      (0, _expect2.default)(progressBar.calculateRatio(400)).toEqual(1);
+    });
+  });
+
+  describe('#render', function () {
+    var buffer = void 0,
+        value = void 0,
+        wrapper = void 0,
+        circle = void 0,
+        strokeLength = void 0;
+
+    it('renders the value and buffer bars when it is linear', function () {
+      wrapper = _testing2.default.shallowRenderComponent(_ProgressBar.ProgressBar, { theme: _theme2.default }).props.children;
+      (0, _expect2.default)(wrapper.props.children.length).toEqual(2);
+      (0, _expect2.default)(wrapper.props.children[0].ref).toEqual('buffer');
+      (0, _expect2.default)(wrapper.props.children[1].ref).toEqual('value');
+    });
+
+    it('renders the value and buffer bars when it is linear', function () {
+      progressBar = _testing2.default.shallowRenderComponent(_ProgressBar.ProgressBar, { mode: 'determinate', value: 30, buffer: 60, theme: _theme2.default });
+      buffer = progressBar.props.children.props.children[0];
+      value = progressBar.props.children.props.children[1];
+      (0, _expect2.default)(buffer.props.style.transform).toEqual('scaleX(' + 0.6 + ')');
+      (0, _expect2.default)(value.props.style.transform).toEqual('scaleX(' + 0.3 + ')');
+    });
+
+    it('renders the svg circle when it is circular', function () {
+      progressBar = _testing2.default.shallowRenderComponent(_ProgressBar.ProgressBar, { type: 'circular', theme: _theme2.default });
+      (0, _expect2.default)(progressBar.props.children.type).toEqual('svg');
+      (0, _expect2.default)(progressBar.props.children.props.children.type).toEqual('circle');
+    });
+
+    it('renders the proper circle length style when it is circular and determinate', function () {
+      progressBar = _testing2.default.shallowRenderComponent(_ProgressBar.ProgressBar, { type: 'circular', mode: 'determinate', value: 30, theme: _theme2.default });
+      circle = progressBar.props.children.props.children;
+      strokeLength = 2 * Math.PI * circle.props.r * 0.3;
+      (0, _expect2.default)(circle.props.style.strokeDasharray).toEqual(strokeLength + ', 400');
+    });
+
+    it('contains mode and className in its className', function () {
+      progressBar = _testing2.default.shallowRenderComponent(_ProgressBar.ProgressBar, { mode: 'determinate', className: 'tight', theme: _theme2.default });
+      (0, _expect2.default)(progressBar.props.className).toContain(_theme2.default.determinate);
+      (0, _expect2.default)(progressBar.props.className).toContain(_theme2.default.tight);
+    });
+  });
+});
\ No newline at end of file
diff --git a/lib/progress_bar/_config.scss b/lib/progress_bar/_config.scss
new file mode 100644
index 000000000..143a80963
--- /dev/null
+++ b/lib/progress_bar/_config.scss
@@ -0,0 +1,7 @@
+$progress-height: .4 * $unit !default;
+$progress-main-color: $color-primary !default;
+$progress-secondary-color: rgba($color-primary-contrast, 0.7) !default;
+$progress-disabled-color: rgba($color-black, 0.26) !default;
+$circle-wrapper-width: 60 !default;
+$circle-radius: 25 !default;
+$scale-ratio: $circle-radius / 20 !default;
diff --git a/lib/progress_bar/index.d.ts b/lib/progress_bar/index.d.ts
new file mode 100644
index 000000000..8b0b961e1
--- /dev/null
+++ b/lib/progress_bar/index.d.ts
@@ -0,0 +1,88 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface ProgressBarTheme {
+  /**
+   * Used to style the buffer element in the linear progress.
+   */
+  buffer?: string;
+  /**
+   * Used for the circle element in the circular progress.
+   */
+  circle?: string;
+  /**
+   * Used for the root element when the type is circular.
+   */
+  circular?: string;
+  /**
+   * Added to the root element if mode is indeterminate.
+   */
+  indeterminate?: string;
+  /**
+   * Used for the root element when the type is linear.
+   */
+  linear?: string;
+  /**
+   * Added to the root if the component is multicolor (circular).
+   */
+  multicolor?: string;
+  /**
+   * Used for the inner path in the circular progress.
+   */
+  path?: string;
+  /**
+   * Used to style the value element in the linear progress.
+   */
+  value?: string;
+}
+
+interface ProgressBarProps extends ReactToolbox.Props {
+  /**
+   * Value of a secondary progress bar useful for buffering.
+   * @default 0
+   */
+  buffer?: number;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Maximum value permitted.
+   * @default 100
+   */
+  max?: number;
+  /**
+   * Minimum value permitted.
+   * @default 0
+   */
+  min?: number;
+  /**
+   * Mode of the progress bar, it can be determinate or indeterminate.
+   * @default indeterminate
+   */
+  mode?: "determinate" | "indeterminate";
+  /**
+   * If true, the circular progress bar will be changing its color.
+   * @default false
+   */
+  multicolor?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ProgressBarTheme;
+  /**
+   * Type of the progress bar, it can be circular or linear.
+   * @default linear
+   */
+  type?: "linear" | "circular";
+  /**
+   * Value of the current progress.
+   * @default 0
+   */
+  value?: number;
+}
+
+export class ProgressBar extends React.Component<ProgressBarProps, {}> { }
+
+export default ProgressBar;
diff --git a/lib/progress_bar/index.js b/lib/progress_bar/index.js
new file mode 100644
index 000000000..a61b09a24
--- /dev/null
+++ b/lib/progress_bar/index.js
@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProgressBar = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _ProgressBar = require('./ProgressBar.js');
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ThemedProgressBar = (0, _reactCssThemr.themr)(_identifiers.PROGRESS_BAR, _theme2.default)(_ProgressBar.ProgressBar);
+
+exports.default = ThemedProgressBar;
+exports.ProgressBar = ThemedProgressBar;
\ No newline at end of file
diff --git a/lib/progress_bar/theme.scss b/lib/progress_bar/theme.scss
new file mode 100644
index 000000000..6f5cc2c1c
--- /dev/null
+++ b/lib/progress_bar/theme.scss
@@ -0,0 +1,146 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+
+.linear {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  height: $progress-height;
+  overflow: hidden;
+  background: $color-divider;
+  &.indeterminate .value {
+    transform-origin: center center;
+    animation: linear-indeterminate-bar 1s linear infinite;
+  }
+}
+
+.value, .buffer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transform: scaleX(0);
+  transform-origin: left center;
+}
+
+.value {
+  background-color: $progress-main-color;
+}
+
+[disabled] .value {
+  background-color: $progress-disabled-color;
+}
+
+.buffer {
+  background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
+  linear-gradient(to right, $progress-main-color, $progress-main-color);
+}
+
+[disabled] .buffer {
+  background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
+  linear-gradient(to right, $progress-disabled-color, $progress-disabled-color);
+}
+
+.circular {
+  position: relative;
+  display: inline-block;
+  width: $circle-wrapper-width * 1px;
+  height: $circle-wrapper-width * 1px;
+  transform: rotate(-90deg);
+  &.indeterminate {
+    .circle {
+      animation: circular-indeterminate-bar-rotate 2s linear infinite;
+    }
+    .path {
+      animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite;
+
+      stroke-dasharray: $scale-ratio * 1, $scale-ratio * 200;
+      stroke-dashoffset: 0;
+    }
+    &.multicolor .path {
+      animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite,
+      colors (1.5s * 4) ease-in-out infinite;
+    }
+  }
+}
+
+.circle {
+  width: 100%;
+  height: 100%;
+}
+
+.path {
+  transition: stroke-dasharray $animation-duration $animation-curve-default;
+  fill: none;
+
+  stroke-dasharray: 0, $scale-ratio * 200;
+  stroke-dashoffset: 0;
+  stroke-linecap: round;
+  stroke-miterlimit: 20;
+  stroke-width: 4;
+  stroke: $progress-main-color;
+}
+
+@keyframes linear-indeterminate-bar {
+  0% {
+    transform: translate(-50%) scaleX(0);
+  }
+
+  50% {
+    transform: translate(-0%) scaleX(.3);
+  }
+
+  100% {
+    transform: translate(50%) scaleX(0);
+  }
+}
+
+@keyframes circular-indeterminate-bar-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes circular-indeterminate-bar-dash {
+  0% {
+    stroke-dasharray: $scale-ratio * 1, $scale-ratio * 200;
+    stroke-dashoffset: $scale-ratio * 0;
+  }
+
+  50% {
+    stroke-dasharray: $scale-ratio * 89, $scale-ratio * 200;
+    stroke-dashoffset: $scale-ratio * -35;
+  }
+
+  100% {
+    stroke-dasharray: $scale-ratio * 89, $scale-ratio * 200;
+    stroke-dashoffset: $scale-ratio * -124;
+  }
+}
+
+@keyframes colors {
+  0% {
+    stroke: #4285f4;
+  }
+
+  25% {
+    stroke: #de3e35;
+  }
+
+  50% {
+    stroke: #f7c223;
+  }
+
+  75% {
+    stroke: #1b9a59;
+  }
+
+  100% {
+    stroke: #4285f4;
+  }
+}
diff --git a/lib/radio/Radio.js b/lib/radio/Radio.js
new file mode 100644
index 000000000..a3301d1c7
--- /dev/null
+++ b/lib/radio/Radio.js
@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+var factory = function factory(ripple) {
+  var Radio = function Radio(_ref) {
+    var checked = _ref.checked,
+        onMouseDown = _ref.onMouseDown,
+        theme = _ref.theme,
+        other = _objectWithoutProperties(_ref, ['checked', 'onMouseDown', 'theme']);
+
+    return _react2.default.createElement('div', _extends({
+      'data-react-toolbox': 'radio',
+      className: theme[checked ? 'radioChecked' : 'radio'],
+      onMouseDown: onMouseDown
+    }, other));
+  };
+
+  Radio.propTypes = {
+    checked: _react.PropTypes.bool,
+    children: _react.PropTypes.any,
+    onMouseDown: _react.PropTypes.func,
+    theme: _react.PropTypes.shape({
+      radio: _react.PropTypes.string,
+      radioChecked: _react.PropTypes.string,
+      ripple: _react.PropTypes.string
+    })
+  };
+
+  return ripple(Radio);
+};
+
+exports.default = factory;
\ No newline at end of file
diff --git a/lib/radio/RadioButton.js b/lib/radio/RadioButton.js
new file mode 100644
index 000000000..a654f75db
--- /dev/null
+++ b/lib/radio/RadioButton.js
@@ -0,0 +1,158 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RadioButton = exports.radioButtonFactory = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Ripple = require('../ripple/Ripple.js');
+
+var _Ripple2 = _interopRequireDefault(_Ripple);
+
+var _Radio = require('./Radio.js');
+
+var _Radio2 = _interopRequireDefault(_Radio);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(Radio) {
+  var RadioButton = function (_Component) {
+    _inherits(RadioButton, _Component);
+
+    function RadioButton() {
+      var _ref;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, RadioButton);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RadioButton.__proto__ || Object.getPrototypeOf(RadioButton)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
+        var _this$props = _this.props,
+            checked = _this$props.checked,
+            disabled = _this$props.disabled,
+            onChange = _this$props.onChange;
+
+        if (event.pageX !== 0 && event.pageY !== 0) _this.blur();
+        if (!disabled && !checked && onChange) onChange(event, _this);
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(RadioButton, [{
+      key: 'blur',
+      value: function blur() {
+        this.inputNode && this.inputNode.blur();
+      }
+    }, {
+      key: 'focus',
+      value: function focus() {
+        this.inputNode && this.inputNode.focus();
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _this2 = this;
+
+        var _props = this.props,
+            checked = _props.checked,
+            children = _props.children,
+            className = _props.className,
+            disabled = _props.disabled,
+            label = _props.label,
+            onChange = _props.onChange,
+            theme = _props.theme,
+            others = _objectWithoutProperties(_props, ['checked', 'children', 'className', 'disabled', 'label', 'onChange', 'theme']); // eslint-disable-line
+
+
+        var _className = (0, _classnames2.default)(theme[this.props.disabled ? 'disabled' : 'field'], className);
+        return _react2.default.createElement(
+          'label',
+          _extends({}, others, {
+            'data-react-toolbox': 'radio-button',
+            className: _className
+          }),
+          _react2.default.createElement('input', {
+            checked: checked,
+            className: theme.input,
+            disabled: disabled,
+            onClick: this.handleClick,
+            onChange: function onChange() {},
+            ref: function ref(node) {
+              _this2.inputNode = node;
+            },
+            type: 'radio'
+          }),
+          _react2.default.createElement(Radio, { checked: checked, disabled: disabled, theme: theme }),
+          label ? _react2.default.createElement(
+            'span',
+            { className: theme.text },
+            label
+          ) : null,
+          children
+        );
+      }
+    }]);
+
+    return RadioButton;
+  }(_react.Component);
+
+  RadioButton.propTypes = {
+    checked: _react.PropTypes.bool,
+    children: _react.PropTypes.node,
+    className: _react.PropTypes.string,
+    disabled: _react.PropTypes.bool,
+    label: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.node]),
+    name: _react.PropTypes.string,
+    onBlur: _react.PropTypes.func,
+    onChange: _react.PropTypes.func,
+    onFocus: _react.PropTypes.func,
+    theme: _react.PropTypes.shape({
+      disabled: _react.PropTypes.string,
+      field: _react.PropTypes.string,
+      input: _react.PropTypes.string,
+      text: _react.PropTypes.string
+    }),
+    value: _react.PropTypes.any
+  };
+  RadioButton.defaultProps = {
+    checked: false,
+    className: '',
+    disabled: false
+  };
+
+
+  return RadioButton;
+};
+
+var Radio = (0, _Radio2.default)((0, _Ripple2.default)({ centered: true, spread: 2.6 }));
+var RadioButton = factory(Radio);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.RADIO)(RadioButton);
+exports.radioButtonFactory = factory;
+exports.RadioButton = RadioButton;
\ No newline at end of file
diff --git a/lib/radio/RadioGroup.js b/lib/radio/RadioGroup.js
new file mode 100644
index 000000000..15c87f023
--- /dev/null
+++ b/lib/radio/RadioGroup.js
@@ -0,0 +1,99 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RadioGroup = exports.radioGroupFactory = undefined;
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _RadioButton = require('./RadioButton.js');
+
+var _RadioButton2 = _interopRequireDefault(_RadioButton);
+
+var _react3 = require('../utils/react.js');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(RadioButton) {
+  var RadioGroup = function (_Component) {
+    _inherits(RadioGroup, _Component);
+
+    function RadioGroup() {
+      var _ref;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, RadioGroup);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RadioGroup.__proto__ || Object.getPrototypeOf(RadioGroup)).call.apply(_ref, [this].concat(args))), _this), _this.handleChange = function (value) {
+        if (_this.props.onChange) _this.props.onChange(value);
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(RadioGroup, [{
+      key: 'renderRadioButtons',
+      value: function renderRadioButtons() {
+        var _this2 = this;
+
+        return _react2.default.Children.map(this.props.children, function (child) {
+          return !(0, _react3.isComponentOfType)(RadioButton, child) ? child : _react2.default.cloneElement(child, {
+            checked: child.props.value === _this2.props.value,
+            disabled: _this2.props.disabled || child.props.disabled,
+            onChange: _this2.handleChange.bind(_this2, child.props.value)
+          });
+        });
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        return _react2.default.createElement(
+          'div',
+          { 'data-react-toolbox': 'radio-group', className: this.props.className },
+          this.renderRadioButtons()
+        );
+      }
+    }]);
+
+    return RadioGroup;
+  }(_react.Component);
+
+  RadioGroup.propTypes = {
+    children: _react.PropTypes.node,
+    className: _react.PropTypes.string,
+    disabled: _react.PropTypes.bool,
+    name: _react.PropTypes.string,
+    onChange: _react.PropTypes.func,
+    value: _react.PropTypes.any
+  };
+  RadioGroup.defaultProps = {
+    className: '',
+    disabled: false
+  };
+
+
+  return RadioGroup;
+};
+
+var RadioGroup = factory(_RadioButton2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.RADIO)(RadioGroup);
+exports.radioGroupFactory = factory;
+exports.RadioGroup = RadioGroup;
\ No newline at end of file
diff --git a/lib/radio/_config.scss b/lib/radio/_config.scss
new file mode 100644
index 000000000..0c335c7cc
--- /dev/null
+++ b/lib/radio/_config.scss
@@ -0,0 +1,9 @@
+$radio-field-margin-bottom: 1.5 * $unit !default;
+$radio-button-size: 2 * $unit !default;
+$radio-inner-margin: $radio-button-size / 4 !default;
+$radio-inner-color: $color-primary !default;
+$radio-focus-color: rgba($color-black, 0.1) !default;
+$radio-checked-focus-color: rgba($color-primary, 0.26) !default;
+$radio-text-color: $color-black !default;
+$radio-disabled-color: rgba($color-black, 0.26) !default;
+$radio-text-font-size: 1.4 * $unit !default;
diff --git a/lib/radio/index.d.ts b/lib/radio/index.d.ts
new file mode 100644
index 000000000..8cc2695de
--- /dev/null
+++ b/lib/radio/index.d.ts
@@ -0,0 +1,102 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+interface RadioGroupProps extends ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * If true, the group will be displayed as disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Name for the input element group.
+   */
+  name?: string;
+  /**
+   * Callback function that will be invoked when the value changes.
+   */
+  onChange?: Function;
+  /**
+   * Default value selected in the radio group.
+   */
+  value?: any;
+}
+
+export class RadioGroup extends React.Component<RadioGroupProps, {}> { }
+
+export interface RadioButtonTheme {
+  /**
+   * Used to for the radio element.
+   */
+  radio?: string;
+  /**
+   * Used for the radio element when it's checked.
+   */
+  radioChecked?: string;
+  /**
+   * To provide styles for the ripple.
+   */
+  ripple?: string;
+  /**
+   * Added to the root of the Radio in case it's disabled.
+   */
+  disabled?: string;
+  /**
+   * Used as the root class of the component.
+   */
+  field?: string;
+  /**
+   * Used for the input element.
+   */
+  input?: string;
+  /**
+   * Used to style the text label element.
+   */
+  text?: string;
+}
+
+interface RadioButtonProps extends ReactToolbox.Props {
+  /**
+   * If true, the input element will be selected by default. Transferred from the parent.
+   * @default false
+   */
+  checked?: boolean;
+  /**
+   * If true, the item will be displayed as disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Label for the radio button.
+   */
+  label?: React.ReactNode | string;
+  /**
+   * Name for the input element.
+   */
+  name?: string;
+  /**
+   * Callback function that will be invoked when the input is blurred.
+   */
+  onBlur?: Function;
+  /**
+   * Callback function that will be invoked when the value changes.
+   */
+  onChange?: Function;
+  /**
+   * Callback function that will be invoked when the input is focused.
+   */
+  onFocus?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: RadioButtonTheme;
+  /**
+   * Value for the radio button.
+   */
+  value?: any;
+}
+
+export class RadioButton extends React.Component<RadioButtonProps, {}> { }
diff --git a/lib/radio/index.js b/lib/radio/index.js
new file mode 100644
index 000000000..b8cfd8400
--- /dev/null
+++ b/lib/radio/index.js
@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RadioGroup = exports.RadioButton = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _ripple = require('../ripple');
+
+var _ripple2 = _interopRequireDefault(_ripple);
+
+var _Radio = require('./Radio.js');
+
+var _Radio2 = _interopRequireDefault(_Radio);
+
+var _RadioButton = require('./RadioButton.js');
+
+var _RadioGroup = require('./RadioGroup.js');
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ThemedRadio = (0, _Radio2.default)((0, _ripple2.default)({ centered: true, spread: 2.6 }));
+var ThemedRadioButton = (0, _reactCssThemr.themr)(_identifiers.RADIO, _theme2.default)((0, _RadioButton.radioButtonFactory)(ThemedRadio));
+var ThemedRadioGroup = (0, _reactCssThemr.themr)(_identifiers.RADIO, _theme2.default)((0, _RadioGroup.radioGroupFactory)(ThemedRadioButton));
+
+exports.default = ThemedRadioButton;
+exports.RadioButton = ThemedRadioButton;
+exports.RadioGroup = ThemedRadioGroup;
\ No newline at end of file
diff --git a/lib/radio/theme.scss b/lib/radio/theme.scss
new file mode 100644
index 000000000..93eac42ef
--- /dev/null
+++ b/lib/radio/theme.scss
@@ -0,0 +1,95 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+
+.radio {
+  position: relative;
+  display: inline-block;
+  width: $radio-button-size;
+  height: $radio-button-size;
+  vertical-align: top;
+  cursor: pointer;
+  border: .2 * $unit solid $radio-text-color;
+  border-radius: 50%;
+  &:before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    content: "";
+    background-color: $radio-inner-color;
+    border-radius: 50%;
+    transition: transform $animation-duration $animation-curve-default;
+    transform: scale(0);
+  }
+
+  .ripple {
+    background-color: $radio-inner-color;
+    opacity: .3;
+    transition-duration: 650ms;
+  }
+}
+
+.radioChecked {
+  @extend .radio;
+  border: .2 * $unit solid $radio-inner-color;
+  &:before {
+    transform: scale(0.65);
+  }
+}
+
+.field {
+  position: relative;
+  display: block;
+  height: $radio-button-size;
+  margin-bottom: $radio-field-margin-bottom;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.text {
+  display: inline-block;
+  padding-left: $unit;
+  font-size: $radio-text-font-size;
+  line-height: $radio-button-size;
+  color: $radio-text-color;
+  white-space: nowrap;
+  vertical-align: top;
+}
+
+.input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  opacity: 0;
+  appearance: none;
+  &:focus ~ .radio {
+    box-shadow: 0 0 0 $unit $radio-focus-color;
+  }
+  &:focus ~ .radioChecked {
+    box-shadow: 0 0 0 $unit $radio-checked-focus-color;
+  }
+}
+
+.disabled {
+  @extend .field;
+  .text {
+    color: $radio-disabled-color;
+  }
+  .radio {
+    cursor: auto;
+    border-color: $radio-disabled-color;
+  }
+  .radioChecked {
+    cursor: auto;
+    border-color: $radio-disabled-color;
+    &:before {
+      background-color: $radio-disabled-color;
+    }
+  }
+}
diff --git a/lib/ripple/Ripple.js b/lib/ripple/Ripple.js
new file mode 100644
index 000000000..b865cad0b
--- /dev/null
+++ b/lib/ripple/Ripple.js
@@ -0,0 +1,387 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactDom = require('react-dom');
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _immutabilityHelper = require('immutability-helper');
+
+var _immutabilityHelper2 = _interopRequireDefault(_immutabilityHelper);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _events = require('../utils/events');
+
+var _events2 = _interopRequireDefault(_events);
+
+var _prefixer = require('../utils/prefixer');
+
+var _prefixer2 = _interopRequireDefault(_prefixer);
+
+var _utils = require('../utils/utils');
+
+var _utils2 = _interopRequireDefault(_utils);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+var defaults = {
+  centered: false,
+  className: '',
+  multiple: true,
+  spread: 2,
+  theme: {}
+};
+
+var rippleFactory = function rippleFactory() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  var _defaults$options = _extends({}, defaults, options),
+      defaultCentered = _defaults$options.centered,
+      defaultClassName = _defaults$options.className,
+      defaultMultiple = _defaults$options.multiple,
+      defaultSpread = _defaults$options.spread,
+      defaultTheme = _defaults$options.theme,
+      props = _objectWithoutProperties(_defaults$options, ['centered', 'className', 'multiple', 'spread', 'theme']);
+
+  return function (ComposedComponent) {
+    var RippledComponent = function (_Component) {
+      _inherits(RippledComponent, _Component);
+
+      function RippledComponent() {
+        var _ref;
+
+        var _temp, _this, _ret;
+
+        _classCallCheck(this, RippledComponent);
+
+        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RippledComponent.__proto__ || Object.getPrototypeOf(RippledComponent)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+          ripples: {}
+        }, _this.handleMouseDown = function (event) {
+          if (_this.props.onMouseDown) _this.props.onMouseDown(event);
+          if (!_this.props.disabled) {
+            var _events$getMousePosit = _events2.default.getMousePosition(event),
+                x = _events$getMousePosit.x,
+                y = _events$getMousePosit.y;
+
+            _this.animateRipple(x, y, false);
+          }
+        }, _this.handleTouchStart = function (event) {
+          if (_this.props.onTouchStart) _this.props.onTouchStart(event);
+          if (!_this.props.disabled) {
+            var _events$getTouchPosit = _events2.default.getTouchPosition(event),
+                x = _events$getTouchPosit.x,
+                y = _events$getTouchPosit.y;
+
+            _this.animateRipple(x, y, true);
+          }
+        }, _temp), _possibleConstructorReturn(_this, _ret);
+      }
+
+      _createClass(RippledComponent, [{
+        key: 'componentDidUpdate',
+        value: function componentDidUpdate(prevProps, prevState) {
+          // If a new ripple was just added, add a remove event listener to its animation
+          if (Object.keys(prevState.ripples).length < Object.keys(this.state.ripples).length) {
+            this.addRippleRemoveEventListener(this.getLastKey());
+          }
+        }
+      }, {
+        key: 'componentWillUnmount',
+        value: function componentWillUnmount() {
+          var _this2 = this;
+
+          // Remove document event listeners for ripple if they still exists
+          Object.keys(this.state.ripples).forEach(function (key) {
+            _this2.state.ripples[key].endRipple();
+          });
+        }
+
+        /**
+         * Add an event listener to the reference with given key so when the animation transition
+         * ends we can be sure that it finished and it can be safely removed from the state.
+         * This function is called whenever a new ripple is added to the component.
+         *
+         * @param {String} rippleKey Is the key of the ripple to add the event.
+         */
+
+      }, {
+        key: 'addRippleRemoveEventListener',
+        value: function addRippleRemoveEventListener(rippleKey) {
+          var self = this;
+          _events2.default.addEventListenerOnTransitionEnded(this.refs[rippleKey], function onOpacityEnd(e) {
+            if (e.propertyName === 'opacity') {
+              if (self.props.onRippleEnded) self.props.onRippleEnded(e);
+              _events2.default.removeEventListenerOnTransitionEnded(self.refs[rippleKey], onOpacityEnd);
+              self.setState({ ripples: _utils2.default.removeObjectKey(rippleKey, self.state.ripples) });
+            }
+          });
+        }
+
+        /**
+         * Start a ripple animation on an specific point with touch or mouse events. First
+         * decides if the animation should trigger. If the ripple is multiple or there is no
+         * ripple present, it creates a new key. If it's a simple ripple and already exists,
+         * it just restarts the current ripple. The animation happens in two state changes
+         * to allow triggering via css.
+         *
+         * @param {Number} x Coordinate X on the screen where animation should start
+         * @param {Number} y Coordinate Y on the screen where animation should start
+         * @param {Boolean} isTouch Use events from touch or mouse.
+         */
+
+      }, {
+        key: 'animateRipple',
+        value: function animateRipple(x, y, isTouch) {
+          var _this3 = this;
+
+          if (this.rippleShouldTrigger(isTouch)) {
+            (function () {
+              var _getDescriptor = _this3.getDescriptor(x, y),
+                  top = _getDescriptor.top,
+                  left = _getDescriptor.left,
+                  width = _getDescriptor.width;
+
+              var noRipplesActive = Object.keys(_this3.state.ripples).length === 0;
+              var key = _this3.props.rippleMultiple || noRipplesActive ? _this3.getNextKey() : _this3.getLastKey();
+              var endRipple = _this3.addRippleDeactivateEventListener(isTouch, key);
+              var initialState = { active: false, restarting: true, top: top, left: left, width: width, endRipple: endRipple };
+              var runningState = { active: true, restarting: false };
+              _this3.setState((0, _immutabilityHelper2.default)(_this3.state, { ripples: _defineProperty({}, key, { $set: initialState }) }), function () {
+                _this3.refs[key].offsetWidth; //eslint-disable-line no-unused-expressions
+                _this3.setState((0, _immutabilityHelper2.default)(_this3.state, { ripples: _defineProperty({}, key, { $merge: runningState }) }));
+              });
+            })();
+          }
+        }
+
+        /**
+         * Determine if a ripple should start depending if its a touch event. For mobile both
+         * touchStart and mouseDown are launched so in case is touch we should always trigger
+         * but if its not we should check if a touch was already triggered to decide.
+         *
+         * @param {Boolean} isTouch True in case a touch event triggered the ripple false otherwise.
+         * @return {Boolean} True in case the ripple should trigger or false if it shouldn't.
+         */
+
+      }, {
+        key: 'rippleShouldTrigger',
+        value: function rippleShouldTrigger(isTouch) {
+          var shouldStart = isTouch ? true : !this.touchCache;
+          this.touchCache = isTouch;
+          return shouldStart;
+        }
+
+        /**
+         * Find out a descriptor object for the ripple element being created depending on
+         * the position where the it was triggered and the component's dimensions.
+         *
+         * @param {Number} x Coordinate x in the viewport where ripple was triggered
+         * @param {Number} y Coordinate y in the viewport where ripple was triggered
+         * @return {Object} Descriptor element including position and size of the element
+         */
+
+      }, {
+        key: 'getDescriptor',
+        value: function getDescriptor(x, y) {
+          var _ReactDOM$findDOMNode = _reactDom2.default.findDOMNode(this).getBoundingClientRect(),
+              left = _ReactDOM$findDOMNode.left,
+              top = _ReactDOM$findDOMNode.top,
+              height = _ReactDOM$findDOMNode.height,
+              width = _ReactDOM$findDOMNode.width;
+
+          var _props = this.props,
+              centered = _props.rippleCentered,
+              spread = _props.rippleSpread;
+
+          return {
+            left: centered ? 0 : x - left - width / 2,
+            top: centered ? 0 : y - top - height / 2,
+            width: width * spread
+          };
+        }
+
+        /**
+         * Increments and internal counter and returns the next value as a string. It
+         * is used to assign key references to new ripple elements.
+         *
+         * @return {String} Key to be assigned to a ripple.
+         */
+
+      }, {
+        key: 'getNextKey',
+        value: function getNextKey() {
+          this.currentCount = this.currentCount ? this.currentCount + 1 : 1;
+          return 'ripple' + this.currentCount;
+        }
+
+        /**
+         * Return the last generated key for a ripple element. When there is only one ripple
+         * and to get the reference when a ripple was just created.
+         *
+         * @return {String} The last generated ripple key.
+         */
+
+      }, {
+        key: 'getLastKey',
+        value: function getLastKey() {
+          return 'ripple' + this.currentCount;
+        }
+
+        /**
+         * Add an event listener to the document needed to deactivate a ripple and make it dissappear.
+         * Deactivation can happen with a touchend or mouseup depending on the trigger type. The
+         * ending function is created from a factory function and returned.
+         *
+         * @param {Boolean} isTouch True in case the trigger was a touch event false otherwise.
+         * @param {String} rippleKey It's a key to identify the ripple that should be deactivated.
+         * @return {Function} Callback function that deactivates the ripple and removes the event listener
+         */
+
+      }, {
+        key: 'addRippleDeactivateEventListener',
+        value: function addRippleDeactivateEventListener(isTouch, rippleKey) {
+          var eventType = isTouch ? 'touchend' : 'mouseup';
+          var endRipple = this.createRippleDeactivateCallback(eventType, rippleKey);
+          document.addEventListener(eventType, endRipple);
+          return endRipple;
+        }
+
+        /**
+         * Generates a function that can be called to deactivate a given ripple and remove its finishing
+         * event listener. If is generated because we need to store it to be called on unmount in case
+         * the ripple is still running.
+         *
+         * @param {String} eventType Is the event type that can be touchend or mouseup
+         * @param {String} rippleKey Is the key representing the ripple
+         * @return {Function} Callback function that deactivates the ripple and removes the listener
+         */
+
+      }, {
+        key: 'createRippleDeactivateCallback',
+        value: function createRippleDeactivateCallback(eventType, rippleKey) {
+          var self = this;
+          return function endRipple() {
+            document.removeEventListener(eventType, endRipple);
+            self.setState({ ripples: (0, _immutabilityHelper2.default)(self.state.ripples, _defineProperty({}, rippleKey, { $merge: { active: false } })) });
+          };
+        }
+      }, {
+        key: 'renderRipple',
+        value: function renderRipple(key, className, _ref2) {
+          var _classnames;
+
+          var active = _ref2.active,
+              left = _ref2.left,
+              restarting = _ref2.restarting,
+              top = _ref2.top,
+              width = _ref2.width;
+
+          var scale = restarting ? 0 : 1;
+          var transform = 'translate3d(' + (-width / 2 + left) + 'px, ' + (-width / 2 + top) + 'px, 0) scale(' + scale + ')';
+          var _className = (0, _classnames3.default)(this.props.theme.ripple, (_classnames = {}, _defineProperty(_classnames, this.props.theme.rippleActive, active), _defineProperty(_classnames, this.props.theme.rippleRestarting, restarting), _classnames), className);
+          return _react2.default.createElement(
+            'span',
+            _extends({ key: key, 'data-react-toolbox': 'ripple', className: this.props.theme.rippleWrapper }, props),
+            _react2.default.createElement('span', {
+              role: 'ripple',
+              ref: key,
+              className: _className,
+              style: (0, _prefixer2.default)({ transform: transform }, { width: width, height: width })
+            })
+          );
+        }
+      }, {
+        key: 'render',
+        value: function render() {
+          var _this4 = this;
+
+          var ripples = this.state.ripples;
+
+          var _props2 = this.props,
+              onRippleEnded = _props2.onRippleEnded,
+              rippleCentered = _props2.rippleCentered,
+              rippleMultiple = _props2.rippleMultiple,
+              rippleSpread = _props2.rippleSpread,
+              children = _props2.children,
+              ripple = _props2.ripple,
+              rippleClassName = _props2.rippleClassName,
+              other = _objectWithoutProperties(_props2, ['onRippleEnded', 'rippleCentered', 'rippleMultiple', 'rippleSpread', 'children', 'ripple', 'rippleClassName']);
+
+          if (!ripple) return _react2.default.createElement(ComposedComponent, _extends({ children: children }, other));
+          return _react2.default.createElement(
+            ComposedComponent,
+            _extends({}, other, { onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart }),
+            children,
+            Object.keys(ripples).map(function (key) {
+              return _this4.renderRipple(key, rippleClassName, ripples[key]);
+            })
+          );
+        }
+      }]);
+
+      return RippledComponent;
+    }(_react.Component);
+
+    RippledComponent.propTypes = {
+      children: _react.PropTypes.any,
+      disabled: _react.PropTypes.bool,
+      onRippleEnded: _react.PropTypes.func,
+      ripple: _react.PropTypes.bool,
+      rippleCentered: _react.PropTypes.bool,
+      rippleClassName: _react.PropTypes.string,
+      rippleMultiple: _react.PropTypes.bool,
+      rippleSpread: _react.PropTypes.number,
+      theme: _react.PropTypes.shape({
+        ripple: _react.PropTypes.string,
+        rippleActive: _react.PropTypes.string,
+        rippleRestarting: _react.PropTypes.string,
+        rippleWrapper: _react.PropTypes.string
+      })
+    };
+    RippledComponent.defaultProps = {
+      disabled: false,
+      ripple: true,
+      rippleCentered: defaultCentered,
+      rippleClassName: defaultClassName,
+      rippleMultiple: defaultMultiple,
+      rippleSpread: defaultSpread
+    };
+
+
+    return (0, _reactCssThemr.themr)(_identifiers.RIPPLE, defaultTheme)(RippledComponent);
+  };
+};
+
+exports.default = rippleFactory;
\ No newline at end of file
diff --git a/lib/ripple/_config.scss b/lib/ripple/_config.scss
new file mode 100644
index 000000000..8c26b6f10
--- /dev/null
+++ b/lib/ripple/_config.scss
@@ -0,0 +1,3 @@
+$ripple-duration: 800ms !default;
+$ripple-final-opacity: .3 !default;
+$ripple-size: 15 * $unit !default;
diff --git a/lib/ripple/index.d.ts b/lib/ripple/index.d.ts
new file mode 100644
index 000000000..998de2ab1
--- /dev/null
+++ b/lib/ripple/index.d.ts
@@ -0,0 +1,50 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface RippleTheme {
+  /**
+   * Root classname for the ripple.
+   */
+  ripple?: string;
+  /**
+   * Applied when the ripple is active.
+   */
+  rippleActive?: string;
+  /**
+   * Applied when the ripple is restarting.
+   */
+  rippleRestarting?: string;
+  /**
+   * Wrapper class to fit to the parent element.
+   */
+  rippleWrapper?: string;
+}
+
+interface RippleProps {
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * True in case you want a centered ripple.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Function that will be called when the ripple animation ends.
+   */
+  onRippleEnded?: Function;
+  /**
+   * Factor to indicate how much should the ripple spread under the component.
+   * @default 2
+   */
+  spread?: number;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: RippleTheme;
+}
+
+export class Ripple extends React.Component<RippleProps, {}> { }
+
+export default Ripple;
diff --git a/lib/ripple/index.js b/lib/ripple/index.js
new file mode 100644
index 000000000..a63d64d47
--- /dev/null
+++ b/lib/ripple/index.js
@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _Ripple = require('./Ripple.js');
+
+var _Ripple2 = _interopRequireDefault(_Ripple);
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = function (options) {
+  return (0, _Ripple2.default)(_extends({}, options, { theme: _theme2.default }));
+};
\ No newline at end of file
diff --git a/lib/ripple/theme.scss b/lib/ripple/theme.scss
new file mode 100644
index 000000000..6212078db
--- /dev/null
+++ b/lib/ripple/theme.scss
@@ -0,0 +1,42 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+
+%ripple {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: $z-index-high;
+  pointer-events: none;
+  background-color: currentColor;
+  border-radius: 50%;
+  transform-origin: 50% 50%;
+}
+
+.rippleWrapper {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $z-index-normal;
+  pointer-events: none;
+}
+
+.ripple {
+  @extend %ripple;
+  transition-duration: $ripple-duration;
+  &.rippleRestarting {
+    opacity: $ripple-final-opacity;
+    transition-property: none;
+  }
+  &.rippleActive {
+    opacity: $ripple-final-opacity;
+    transition-property: transform;
+  }
+  &:not(.rippleActive):not(.rippleRestarting) {
+    opacity: 0;
+    transition-property: opacity, transform;
+  }
+}
diff --git a/lib/slider/Slider.js b/lib/slider/Slider.js
new file mode 100644
index 000000000..ba4efb6da
--- /dev/null
+++ b/lib/slider/Slider.js
@@ -0,0 +1,384 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Slider = exports.sliderFactory = undefined;
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactDom = require('react-dom');
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _events = require('../utils/events.js');
+
+var _events2 = _interopRequireDefault(_events);
+
+var _utils = require('../utils/utils.js');
+
+var _utils2 = _interopRequireDefault(_utils);
+
+var _ProgressBar = require('../progress_bar/ProgressBar.js');
+
+var _ProgressBar2 = _interopRequireDefault(_ProgressBar);
+
+var _Input = require('../input/Input.js');
+
+var _Input2 = _interopRequireDefault(_Input);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(ProgressBar, Input) {
+  var Slider = function (_Component) {
+    _inherits(Slider, _Component);
+
+    function Slider() {
+      var _ref;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, Slider);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Slider.__proto__ || Object.getPrototypeOf(Slider)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+        inputFocused: false,
+        inputValue: null,
+        sliderLength: 0,
+        sliderStart: 0
+      }, _this.handleInputFocus = function () {
+        _this.setState({
+          inputFocused: true,
+          inputValue: _this.valueForInput(_this.props.value)
+        });
+      }, _this.handleInputChange = function (value) {
+        _this.setState({ inputValue: value });
+      }, _this.handleInputBlur = function (event) {
+        var value = _this.state.inputValue || 0;
+        _this.setState({ inputFocused: false, inputValue: null }, function () {
+          _this.props.onChange(_this.trimValue(value), event);
+        });
+      }, _this.handleKeyDown = function (event) {
+        if ([13, 27].indexOf(event.keyCode) !== -1) _this.getInput().blur();
+        if (event.keyCode === 38) _this.addToValue(_this.props.step);
+        if (event.keyCode === 40) _this.addToValue(-_this.props.step);
+      }, _this.handleMouseDown = function (event) {
+        if (_this.state.inputFocused) _this.getInput().blur();
+        _events2.default.addEventsToDocument(_this.getMouseEventMap());
+        _this.start(_events2.default.getMousePosition(event));
+        _events2.default.pauseEvent(event);
+      }, _this.handleMouseMove = function (event) {
+        _events2.default.pauseEvent(event);
+        _this.move(_events2.default.getMousePosition(event));
+      }, _this.handleMouseUp = function () {
+        _this.end(_this.getMouseEventMap());
+      }, _this.handleResize = function (event, callback) {
+        var _ReactDOM$findDOMNode = _reactDom2.default.findDOMNode(_this.refs.progressbar).getBoundingClientRect(),
+            left = _ReactDOM$findDOMNode.left,
+            right = _ReactDOM$findDOMNode.right;
+
+        var cb = callback || function () {};
+        _this.setState({ sliderStart: left, sliderLength: right - left }, cb);
+      }, _this.handleSliderBlur = function () {
+        _events2.default.removeEventsFromDocument(_this.getKeyboardEvents());
+      }, _this.handleSliderFocus = function () {
+        _events2.default.addEventsToDocument(_this.getKeyboardEvents());
+      }, _this.handleTouchEnd = function () {
+        _this.end(_this.getTouchEventMap());
+      }, _this.handleTouchMove = function (event) {
+        _this.move(_events2.default.getTouchPosition(event));
+      }, _this.handleTouchStart = function (event) {
+        if (_this.state.inputFocused) _this.getInput().blur();
+        _this.start(_events2.default.getTouchPosition(event));
+        _events2.default.addEventsToDocument(_this.getTouchEventMap());
+        _events2.default.pauseEvent(event);
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(Slider, [{
+      key: 'componentDidMount',
+      value: function componentDidMount() {
+        window.addEventListener('resize', this.handleResize);
+        this.handleResize();
+      }
+    }, {
+      key: 'componentWillReceiveProps',
+      value: function componentWillReceiveProps(nextProps) {
+        if (this.state.inputFocused && this.props.value !== nextProps.value) {
+          this.setState({ inputValue: this.valueForInput(nextProps.value) });
+        }
+      }
+    }, {
+      key: 'shouldComponentUpdate',
+      value: function shouldComponentUpdate(nextProps, nextState) {
+        return this.state.inputFocused || !nextState.inputFocused;
+      }
+    }, {
+      key: 'componentWillUnmount',
+      value: function componentWillUnmount() {
+        window.removeEventListener('resize', this.handleResize);
+        _events2.default.removeEventsFromDocument(this.getMouseEventMap());
+        _events2.default.removeEventsFromDocument(this.getTouchEventMap());
+        _events2.default.removeEventsFromDocument(this.getKeyboardEvents());
+      }
+    }, {
+      key: 'addToValue',
+      value: function addToValue(increment) {
+        var value = this.state.inputFocused ? parseFloat(this.state.inputValue) : this.props.value;
+        value = this.trimValue(value + increment);
+        if (value !== this.props.value) this.props.onChange(value);
+      }
+    }, {
+      key: 'getInput',
+      value: function getInput() {
+        return this.refs.input && this.refs.input.getWrappedInstance ? this.refs.input.getWrappedInstance() : this.refs.input;
+      }
+    }, {
+      key: 'getKeyboardEvents',
+      value: function getKeyboardEvents() {
+        return {
+          keydown: this.handleKeyDown
+        };
+      }
+    }, {
+      key: 'getMouseEventMap',
+      value: function getMouseEventMap() {
+        return {
+          mousemove: this.handleMouseMove,
+          mouseup: this.handleMouseUp
+        };
+      }
+    }, {
+      key: 'getTouchEventMap',
+      value: function getTouchEventMap() {
+        return {
+          touchmove: this.handleTouchMove,
+          touchend: this.handleTouchEnd
+        };
+      }
+    }, {
+      key: 'end',
+      value: function end(revents) {
+        _events2.default.removeEventsFromDocument(revents);
+        this.setState({ pressed: false });
+      }
+    }, {
+      key: 'knobOffset',
+      value: function knobOffset() {
+        var _props = this.props,
+            max = _props.max,
+            min = _props.min;
+
+        var translated = this.state.sliderLength * (this.props.value - min) / (max - min);
+        return translated * 100 / this.state.sliderLength;
+      }
+    }, {
+      key: 'move',
+      value: function move(position) {
+        var newValue = this.positionToValue(position);
+        if (newValue !== this.props.value) this.props.onChange(newValue);
+      }
+    }, {
+      key: 'positionToValue',
+      value: function positionToValue(position) {
+        var _state = this.state,
+            start = _state.sliderStart,
+            length = _state.sliderLength;
+        var _props2 = this.props,
+            max = _props2.max,
+            min = _props2.min,
+            step = _props2.step;
+
+        var pos = (position.x - start) / length * (max - min);
+        return this.trimValue(Math.round(pos / step) * step + min);
+      }
+    }, {
+      key: 'start',
+      value: function start(position) {
+        var _this2 = this;
+
+        this.handleResize(null, function () {
+          _this2.setState({ pressed: true });
+          _this2.props.onChange(_this2.positionToValue(position));
+        });
+      }
+    }, {
+      key: 'stepDecimals',
+      value: function stepDecimals() {
+        return (this.props.step.toString().split('.')[1] || []).length;
+      }
+    }, {
+      key: 'trimValue',
+      value: function trimValue(value) {
+        if (value < this.props.min) return this.props.min;
+        if (value > this.props.max) return this.props.max;
+        return _utils2.default.round(value, this.stepDecimals());
+      }
+    }, {
+      key: 'valueForInput',
+      value: function valueForInput(value) {
+        var decimals = this.stepDecimals();
+        return decimals > 0 ? value.toFixed(decimals) : value.toString();
+      }
+    }, {
+      key: 'renderSnaps',
+      value: function renderSnaps() {
+        var _this3 = this;
+
+        if (this.props.snaps) {
+          return _react2.default.createElement(
+            'div',
+            { ref: 'snaps', className: this.props.theme.snaps },
+            _utils2.default.range(0, (this.props.max - this.props.min) / this.props.step).map(function (i) {
+              return _react2.default.createElement('div', { key: 'span-' + i, className: _this3.props.theme.snap });
+            })
+          );
+        }
+      }
+    }, {
+      key: 'renderInput',
+      value: function renderInput() {
+        if (this.props.editable) {
+          var value = this.state.inputFocused ? this.state.inputValue : this.valueForInput(this.props.value);
+          return _react2.default.createElement(Input, {
+            ref: 'input',
+            className: this.props.theme.input,
+            disabled: this.props.disabled,
+            onFocus: this.handleInputFocus,
+            onChange: this.handleInputChange,
+            onBlur: this.handleInputBlur,
+            value: value
+          });
+        }
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _classnames;
+
+        var theme = this.props.theme;
+
+        var knobStyles = { left: this.knobOffset() + '%' };
+        var className = (0, _classnames3.default)(theme.slider, (_classnames = {}, _defineProperty(_classnames, theme.editable, this.props.editable), _defineProperty(_classnames, theme.disabled, this.props.disabled), _defineProperty(_classnames, theme.pinned, this.props.pinned), _defineProperty(_classnames, theme.pressed, this.state.pressed), _defineProperty(_classnames, theme.ring, this.props.value === this.props.min), _classnames), this.props.className);
+
+        return _react2.default.createElement(
+          'div',
+          {
+            className: className,
+            disabled: this.props.disabled,
+            'data-react-toolbox': 'slider',
+            onBlur: this.handleSliderBlur,
+            onFocus: this.handleSliderFocus,
+            tabIndex: '0'
+          },
+          _react2.default.createElement(
+            'div',
+            {
+              ref: 'slider',
+              className: theme.container,
+              onMouseDown: this.handleMouseDown,
+              onTouchStart: this.handleTouchStart
+            },
+            _react2.default.createElement(
+              'div',
+              {
+                ref: 'knob',
+                className: theme.knob,
+                onMouseDown: this.handleMouseDown,
+                onTouchStart: this.handleTouchStart,
+                style: knobStyles
+              },
+              _react2.default.createElement('div', { className: theme.innerknob, 'data-value': parseInt(this.props.value) })
+            ),
+            _react2.default.createElement(
+              'div',
+              { className: theme.progress },
+              _react2.default.createElement(ProgressBar, {
+                disabled: this.props.disabled,
+                ref: 'progressbar',
+                className: theme.innerprogress,
+                max: this.props.max,
+                min: this.props.min,
+                mode: 'determinate',
+                value: this.props.value
+              }),
+              this.renderSnaps()
+            )
+          ),
+          this.renderInput()
+        );
+      }
+    }]);
+
+    return Slider;
+  }(_react.Component);
+
+  Slider.propTypes = {
+    className: _react.PropTypes.string,
+    disabled: _react.PropTypes.bool,
+    editable: _react.PropTypes.bool,
+    max: _react.PropTypes.number,
+    min: _react.PropTypes.number,
+    onChange: _react.PropTypes.func,
+    pinned: _react.PropTypes.bool,
+    snaps: _react.PropTypes.bool,
+    step: _react.PropTypes.number,
+    theme: _react.PropTypes.shape({
+      container: _react.PropTypes.string,
+      editable: _react.PropTypes.string,
+      innerknob: _react.PropTypes.string,
+      innerprogress: _react.PropTypes.string,
+      input: _react.PropTypes.string,
+      knob: _react.PropTypes.string,
+      pinned: _react.PropTypes.string,
+      pressed: _react.PropTypes.string,
+      progress: _react.PropTypes.string,
+      ring: _react.PropTypes.string,
+      slider: _react.PropTypes.string,
+      snap: _react.PropTypes.string,
+      snaps: _react.PropTypes.string
+    }),
+    value: _react.PropTypes.number
+  };
+  Slider.defaultProps = {
+    className: '',
+    editable: false,
+    max: 100,
+    min: 0,
+    pinned: false,
+    snaps: false,
+    step: 0.01,
+    value: 0
+  };
+
+
+  return Slider;
+};
+
+var Slider = factory(_ProgressBar2.default, _Input2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.SLIDER)(Slider);
+exports.sliderFactory = factory;
+exports.Slider = Slider;
\ No newline at end of file
diff --git a/lib/slider/__tests__/index.spec.js b/lib/slider/__tests__/index.spec.js
new file mode 100644
index 000000000..92507525b
--- /dev/null
+++ b/lib/slider/__tests__/index.spec.js
@@ -0,0 +1,202 @@
+'use strict';
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactAddonsTestUtils = require('react-addons-test-utils');
+
+var _reactAddonsTestUtils2 = _interopRequireDefault(_reactAddonsTestUtils);
+
+var _sinon = require('sinon');
+
+var _sinon2 = _interopRequireDefault(_sinon);
+
+var _expect = require('expect');
+
+var _expect2 = _interopRequireDefault(_expect);
+
+var _ProgressBar = require('../../progress_bar/ProgressBar.js');
+
+var _Input = require('../../input/Input.js');
+
+var _Input2 = _interopRequireDefault(_Input);
+
+var _Slider = require('../Slider.js');
+
+var _Slider2 = _interopRequireDefault(_Slider);
+
+var _testing = require('../../utils/testing');
+
+var _testing2 = _interopRequireDefault(_testing);
+
+var _theme = require('../theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('Slider', function () {
+  var slider = void 0,
+      progress = void 0,
+      input = void 0,
+      onChange = void 0;
+
+  describe('#positionToValue', function () {
+    before(function () {
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { min: -500, max: 500 }));
+      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
+      slider.setState({ sliderStart: 500, sliderLength: 100 });
+    });
+
+    it('returns min when position is less than origin', function () {
+      (0, _expect2.default)(slider.positionToValue({ x: 400 })).toEqual(-500);
+    });
+
+    it('returns max when position is more and origin plus length', function () {
+      (0, _expect2.default)(slider.positionToValue({ x: 900 })).toEqual(500);
+    });
+
+    it('returns the proper position when the position is inside slider', function () {
+      (0, _expect2.default)(slider.positionToValue({ x: 520 })).toEqual(-300);
+    });
+  });
+
+  describe('#trimValue', function () {
+    before(function () {
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { min: 0, max: 100, step: 0.1 }));
+      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
+    });
+
+    it('rounds to the proper number', function () {
+      (0, _expect2.default)(slider.trimValue(57.16)).toEqual(57.2);
+      (0, _expect2.default)(slider.trimValue(57.12)).toEqual(57.10);
+    });
+
+    it('returns min if number is less than min', function () {
+      (0, _expect2.default)(slider.trimValue(-57.16)).toEqual(0);
+    });
+
+    it('returns max if number is more than max', function () {
+      (0, _expect2.default)(slider.trimValue(257.16)).toEqual(100);
+    });
+  });
+
+  describe('#valueForInput', function () {
+    before(function () {
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { min: 0, max: 100, step: 0.01 }));
+      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
+    });
+
+    it('returns a fixed number when an integer is given', function () {
+      (0, _expect2.default)(slider.valueForInput(4)).toEqual('4.00');
+    });
+
+    it('returns a fixed number when a float is given', function () {
+      (0, _expect2.default)(slider.valueForInput(4.06)).toEqual('4.06');
+    });
+  });
+
+  describe('#knobOffset', function () {
+    it('returns the corresponding offset for a given value and slider length/start', function () {
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { min: -500, max: 500, value: -250 }));
+      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
+      slider.setState({ sliderStart: 500, sliderLength: 100 });
+      (0, _expect2.default)(slider.knobOffset()).toEqual(25);
+    });
+  });
+
+  describe('#render', function () {
+    it('contains a linear progress bar with proper properties', function () {
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { min: 100, max: 1000, value: 140 }));
+      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
+      progress = _reactAddonsTestUtils2.default.findRenderedComponentWithType(slider, _ProgressBar.ProgressBar);
+      (0, _expect2.default)(progress.props.mode).toEqual('determinate');
+      (0, _expect2.default)(progress.props.type).toEqual('linear');
+      (0, _expect2.default)(progress.props.value).toEqual(140);
+      (0, _expect2.default)(progress.props.min).toEqual(100);
+      (0, _expect2.default)(progress.props.max).toEqual(1000);
+    });
+
+    it('contains an input component if its editable', function () {
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { editable: true, value: 130 }));
+      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
+      input = _reactAddonsTestUtils2.default.findRenderedComponentWithType(slider, _Input2.default);
+      (0, _expect2.default)(parseInt(input.props.value)).toEqual(slider.props.value);
+    });
+
+    it('contains the proper number of snaps when snapped', function () {
+      slider = _testing2.default.shallowRenderComponent(_Slider.Slider, { editable: true, pinned: true, theme: _theme2.default });
+      (0, _expect2.default)(slider.props.className).toContain(_theme2.default.ring);
+      (0, _expect2.default)(slider.props.className).toContain(_theme2.default.pinned);
+      slider = _testing2.default.shallowRenderComponent(_Slider.Slider, { editable: true, value: 50, theme: _theme2.default });
+      (0, _expect2.default)(slider.props.className).toNotContain(_theme2.default.ring);
+    });
+  });
+
+  describe('#events', function () {
+    beforeEach(function () {
+      onChange = _sinon2.default.spy();
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { min: -500, max: 500, onChange: onChange }));
+      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
+      slider.setState({ sliderStart: 0, sliderLength: 1000 });
+      slider.handleResize = function (event, callback) {
+        callback();
+      };
+    });
+
+    it('sets pressed state when knob is clicked', function () {
+      _reactAddonsTestUtils2.default.Simulate.mouseDown(slider.refs.knob);
+      (0, _expect2.default)(slider.state.pressed).toEqual(true);
+    });
+
+    it('sets pressed state when knob is touched', function () {
+      _reactAddonsTestUtils2.default.Simulate.touchStart(slider.refs.knob, { touches: [{ pageX: 200 }] });
+      (0, _expect2.default)(slider.state.pressed).toEqual(true);
+    });
+
+    it('sets a proper value when the slider is clicked', function () {
+      _reactAddonsTestUtils2.default.Simulate.mouseDown(slider.refs.slider, { pageX: 200 });
+      (0, _expect2.default)(onChange.called).toEqual(true);
+      (0, _expect2.default)(onChange.getCall(0).args[0]).toEqual(-300);
+    });
+
+    it('sets a proper value when the slider is touched', function () {
+      _reactAddonsTestUtils2.default.Simulate.touchStart(slider.refs.slider, { touches: [{ pageX: 200, pageY: 0 }] });
+      (0, _expect2.default)(onChange.called).toEqual(true);
+      (0, _expect2.default)(onChange.getCall(0).args[0]).toEqual(-300);
+    });
+
+    it('changes input value when slider changes', function () {
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { editable: true, onChange: onChange }));
+      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
+      slider.setState({ sliderStart: 0, sliderLength: 1000 });
+      slider.handleResize = function (event, callback) {
+        callback();
+      };
+      input = _reactAddonsTestUtils2.default.findRenderedComponentWithType(slider, _Input2.default);
+      _reactAddonsTestUtils2.default.Simulate.mouseDown(slider.refs.slider, { pageX: 900 });
+      (0, _expect2.default)(onChange.called).toEqual(true);
+      (0, _expect2.default)(onChange.getCall(0).args[0]).toEqual(90);
+    });
+
+    it('changes its value when input is blurred', function () {
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { editable: true, value: 50, onChange: onChange }));
+      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
+      input = _reactAddonsTestUtils2.default.findRenderedComponentWithType(slider, _Input.Input);
+      _reactAddonsTestUtils2.default.Simulate.change(input.refs.input, { target: { value: '80' } });
+      _reactAddonsTestUtils2.default.Simulate.blur(input.refs.input);
+      (0, _expect2.default)(onChange.called).toEqual(true);
+      (0, _expect2.default)(onChange.getCall(0).args[0]).toEqual(80);
+    });
+
+    it('calls onChange callback when the value is changed', function () {
+      var onChangeSpy = _sinon2.default.spy();
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { onChange: onChangeSpy }));
+      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
+      slider.setState({ sliderStart: 0, sliderLength: 1000 });
+      _reactAddonsTestUtils2.default.Simulate.mouseDown(slider.refs.slider, { pageX: 900 });
+      (0, _expect2.default)(onChangeSpy.called).toEqual(true);
+    });
+  });
+});
\ No newline at end of file
diff --git a/lib/slider/_config.scss b/lib/slider/_config.scss
new file mode 100644
index 000000000..6563e3015
--- /dev/null
+++ b/lib/slider/_config.scss
@@ -0,0 +1,13 @@
+$slider-main-color: $color-primary !default;
+$slider-main-color-contrast: $color-primary-contrast !default;
+$slider-disabled-color: rgba(177, 177, 177, 1) !default;
+$slider-snap-color: $color-black !default;
+$slider-knob-size: 3.2 * $unit !default;
+$slider-inner-knob-size: 1.2 * $unit !default;
+$slider-snap-size: .2 * $unit !default;
+$slider-input-width: 5 * $unit !default;
+$slider-bar-height: .2 * $unit !default;
+$slider-pin-size: 2.6 * $unit !default;
+$slider-pin-elevation: 1.7 * $unit !default;
+$slider-side-separation: 1 * $unit !default;
+$slider-empty-knob-border: .2 * $unit !default;
diff --git a/lib/slider/index.d.ts b/lib/slider/index.d.ts
new file mode 100644
index 000000000..3a58538a4
--- /dev/null
+++ b/lib/slider/index.d.ts
@@ -0,0 +1,112 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface SliderTheme {
+  /**
+   * Used as an inner container of the root component.
+   */
+  container?: string;
+  /**
+   * Added to the root of in case the Slider is editable.
+   */
+  editable?: string;
+  /**
+   * Used to style the inner element of the knob.
+   */
+  innerknob?: string;
+  /**
+   * Provided to the ProgressBar component.
+   */
+  innerprogress?: string;
+  /**
+   * Provided to the Input element in case it's editable.
+   */
+  input?: string;
+  /**
+   * Used to style the outer layer of the knob.
+   */
+  knob?: string;
+  /**
+   * Added to the root in case the Slider is pinned.
+   */
+  pinned?: string;
+  /**
+   * Added to the root in case the state is pressed.
+   */
+  pressed?: string;
+  /**
+   * Used as an outer wrapper for the ProgressBar.
+   */
+  progress?: string;
+  /**
+   * Used in the root when the knob should be a ring.
+   */
+  ring?: string;
+  /**
+   * Class used for the root element.
+   */
+  slider?: string;
+  /**
+   * Used for every individual snap element.
+   */
+  snap?: string;
+  /**
+   * Used as a wrapper for the group of snaps when it's snapped.
+   */
+  snaps?: string;
+}
+
+interface SliderProps extends ReactToolbox.Props {
+  /**
+   * If true, an input is shown and the user can set the slider from keyboard value.
+   * @default false
+   */
+  editable?: boolean;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Maximum value permitted.
+   * @default 100
+   */
+  max?: number;
+  /**
+   * Minimum value permitted.
+   * @default 0
+   */
+  min?: number;
+  /**
+   * Callback function that will be invoked when the slider value changes.
+   */
+  onChange?: Function;
+  /**
+   * If true, a pin with numeric value label is shown when the slider thumb is pressed. Use for settings for which users need to know the exact value of the setting.
+   * @default false
+   */
+  pinned?: boolean;
+  /**
+   * If true, the slider thumb snaps to tick marks evenly spaced based on the step property value.
+   * @default false
+   */
+  snaps?: boolean;
+  /**
+   * Amount to vary the value when the knob is moved or increase/decrease is called.
+   * @default 0.01
+   */
+  step?: number;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: SliderTheme;
+  /**
+   * Current value of the slider.
+   * @default 0
+   */
+  value?: number;
+}
+
+export class Slider extends React.Component<SliderProps, {}> { }
+
+export default Slider;
diff --git a/lib/slider/index.js b/lib/slider/index.js
new file mode 100644
index 000000000..ddcc2d7f2
--- /dev/null
+++ b/lib/slider/index.js
@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Slider = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _progress_bar = require('../progress_bar');
+
+var _input = require('../input');
+
+var _Slider = require('./Slider.js');
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ThemedSlider = (0, _reactCssThemr.themr)(_identifiers.SLIDER, _theme2.default)((0, _Slider.sliderFactory)(_progress_bar.ProgressBar, _input.Input));
+exports.default = ThemedSlider;
+exports.Slider = ThemedSlider;
\ No newline at end of file
diff --git a/lib/slider/theme.scss b/lib/slider/theme.scss
new file mode 100644
index 000000000..310e80097
--- /dev/null
+++ b/lib/slider/theme.scss
@@ -0,0 +1,200 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+
+.container {
+  position: relative;
+  width: calc(100% - #{$slider-knob-size});
+  height: $slider-knob-size;
+  margin-right: $slider-knob-size;
+  user-select: none;
+  &:not(:last-child) {
+    margin-right: $slider-side-separation + $slider-knob-size;
+  }
+  &:not(:first-child) {
+    margin-left: $slider-side-separation;
+  }
+}
+
+.knob {
+  position: relative;
+  top: 0;
+  left: 0;
+  z-index: $z-index-higher;
+  display: flex;
+  width: $slider-knob-size;
+  height: $slider-knob-size;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+}
+
+.innerknob {
+  z-index: $z-index-high;
+  width: $slider-inner-knob-size;
+  height: $slider-inner-knob-size;
+  background-color: $slider-main-color;
+  border-radius: 50%;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: .1s;
+  transition-property: height, width, background-color, border;
+}
+
+.snaps {
+  position: absolute;
+  top: $slider-knob-size / 2 - $slider-snap-size / 2;
+  left: 0;
+  display: flex;
+  width: calc(100% + #{$slider-snap-size});
+  height: $slider-snap-size;
+  flex-direction: row;
+  pointer-events: none;
+  &:after {
+    display: block;
+    width: $slider-snap-size;
+    height: $slider-snap-size;
+    content: "";
+    background-color: $slider-snap-color;
+    border-radius: 50%;
+  }
+}
+
+.snap {
+  flex: 1;
+  &:after {
+    display: block;
+    width: $slider-snap-size;
+    height: $slider-snap-size;
+    content: "";
+    background-color: $slider-snap-color;
+    border-radius: 50%;
+  }
+}
+
+.input {
+  width: $slider-input-width;
+  padding: 0;
+  margin-bottom: 0;
+  > input {
+    text-align: center;
+  }
+}
+
+.progress {
+  position: absolute;
+  top: 0;
+  left: $slider-knob-size / 2;
+  width: 100%;
+  height: 100%;
+  .innerprogress {
+    position: absolute;
+    top: $slider-knob-size / 2 - $slider-bar-height / 2;
+    height: $slider-bar-height;
+    [data-ref="value"] {
+      transition-duration: 0s;
+    }
+  }
+}
+
+.slider {
+  &:focus .knob:before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: $z-index-normal;
+    content: "";
+    background-color: $slider-main-color;
+    border-radius: 50%;
+    opacity: .26;
+  }
+  &[disabled] {
+    pointer-events: none;
+    cursor: auto;
+    .innerknob {
+      background-color: $slider-disabled-color;
+    }
+  }
+  &.editable {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  &.pinned .innerknob {
+    &:before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: $slider-pin-size;
+      height: $slider-pin-size;
+      margin-left: ($slider-knob-size - $slider-pin-size) / 2;
+      content: "";
+      background-color: $slider-main-color;
+      border-radius: 50% 50% 50% 0;
+      transition: transform .2s ease, background-color .18s ease;
+      transform: rotate(-45deg) scale(0) translate(0);
+    }
+    &:after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: $slider-knob-size;
+      height: $slider-pin-size;
+      font-size: 10px;
+      color: $color-background;
+      text-align: center;
+      content: attr(data-value);
+      transition: transform .2s ease, background-color .18s ease;
+      transform: scale(0) translate(0);
+    }
+  }
+  &.pressed {
+    &.pinned .innerknob {
+      &:before {
+        transition-delay: 100ms;
+        transform: rotate(-45deg) scale(1) translate($slider-pin-elevation, - $slider-pin-elevation);
+      }
+      &:after {
+        transition-delay: 100ms;
+        transform: scale(1) translate(0, - $slider-pin-elevation);
+      }
+    }
+    &:not(.pinned) {
+      &.ring .progress {
+        left: $slider-knob-size / 2 + ($slider-knob-size - $slider-empty-knob-border * 2) / 2;
+        width: calc(100% - #{($slider-knob-size - $slider-empty-knob-border * 2) / 2});
+      }
+      .innerknob {
+        width: 100%;
+        height: 100%;
+        transform: translateZ(0);
+      }
+    }
+  }
+  &.ring {
+    .innerknob {
+      background-color: transparent;
+      border: $slider-empty-knob-border solid $color-divider;
+      &:before {
+        background-color: $slider-main-color;
+      }
+    }
+    .progress {
+      left: $slider-knob-size / 2 + $slider-empty-knob-border * 2;
+      width: calc(100% - #{$slider-empty-knob-border * 2});
+      transition: left .18s ease, width .18s ease;
+    }
+    &.pinned {
+      .innerknob {
+        background-color: $color-background;
+      }
+      .progress {
+        left: $slider-knob-size / 2;
+        width: calc(100%);
+      }
+    }
+  }
+}
diff --git a/lib/snackbar/Snackbar.js b/lib/snackbar/Snackbar.js
new file mode 100644
index 000000000..653de0162
--- /dev/null
+++ b/lib/snackbar/Snackbar.js
@@ -0,0 +1,154 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Snackbar = exports.snackbarFactory = undefined;
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _ActivableRenderer = require('../hoc/ActivableRenderer.js');
+
+var _ActivableRenderer2 = _interopRequireDefault(_ActivableRenderer);
+
+var _Overlay = require('../overlay/Overlay.js');
+
+var _Overlay2 = _interopRequireDefault(_Overlay);
+
+var _Button = require('../button/Button.js');
+
+var _Button2 = _interopRequireDefault(_Button);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(Overlay, Button) {
+  var Snackbar = function (_Component) {
+    _inherits(Snackbar, _Component);
+
+    function Snackbar() {
+      var _ref;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, Snackbar);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Snackbar.__proto__ || Object.getPrototypeOf(Snackbar)).call.apply(_ref, [this].concat(args))), _this), _this.scheduleTimeout = function (props) {
+        var onTimeout = props.onTimeout,
+            timeout = props.timeout;
+
+        if (_this.curTimeout) clearTimeout(_this.curTimeout);
+        _this.curTimeout = setTimeout(function () {
+          if (onTimeout) onTimeout();
+          _this.curTimeout = null;
+        }, timeout);
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(Snackbar, [{
+      key: 'componentDidMount',
+      value: function componentDidMount() {
+        if (this.props.active && this.props.timeout) {
+          this.scheduleTimeout(this.props);
+        }
+      }
+    }, {
+      key: 'componentWillReceiveProps',
+      value: function componentWillReceiveProps(nextProps) {
+        if (nextProps.active && nextProps.timeout) {
+          this.scheduleTimeout(nextProps);
+        }
+      }
+    }, {
+      key: 'componentWillUnmount',
+      value: function componentWillUnmount() {
+        clearTimeout(this.curTimeout);
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _props = this.props,
+            action = _props.action,
+            active = _props.active,
+            children = _props.children,
+            label = _props.label,
+            onClick = _props.onClick,
+            theme = _props.theme,
+            type = _props.type;
+
+        var className = (0, _classnames3.default)([theme.snackbar, theme[type]], _defineProperty({}, theme.active, active), this.props.className);
+
+        return _react2.default.createElement(
+          Overlay,
+          { invisible: true },
+          _react2.default.createElement(
+            'div',
+            { 'data-react-toolbox': 'snackbar', className: className },
+            _react2.default.createElement(
+              'span',
+              { className: theme.label },
+              label,
+              children
+            ),
+            action ? _react2.default.createElement(Button, { className: theme.button, label: action, onClick: onClick }) : null
+          )
+        );
+      }
+    }]);
+
+    return Snackbar;
+  }(_react.Component);
+
+  Snackbar.propTypes = {
+    action: _react.PropTypes.string,
+    active: _react.PropTypes.bool,
+    children: _react.PropTypes.node,
+    className: _react.PropTypes.string,
+    label: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    onClick: _react.PropTypes.func,
+    onTimeout: _react.PropTypes.func,
+    theme: _react.PropTypes.shape({
+      accept: _react.PropTypes.string,
+      active: _react.PropTypes.string,
+      button: _react.PropTypes.string,
+      cancel: _react.PropTypes.string,
+      icon: _react.PropTypes.string,
+      label: _react.PropTypes.string,
+      snackbar: _react.PropTypes.string,
+      warning: _react.PropTypes.string
+    }),
+    timeout: _react.PropTypes.number,
+    type: _react.PropTypes.oneOf(['accept', 'cancel', 'warning'])
+  };
+
+
+  return (0, _ActivableRenderer2.default)()(Snackbar);
+};
+
+var Snackbar = factory(_Overlay2.default, _Button2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.SNACKBAR)(Snackbar);
+exports.snackbarFactory = factory;
+exports.Snackbar = Snackbar;
\ No newline at end of file
diff --git a/lib/snackbar/_config.scss b/lib/snackbar/_config.scss
new file mode 100644
index 000000000..69f7cdf50
--- /dev/null
+++ b/lib/snackbar/_config.scss
@@ -0,0 +1,9 @@
+$snackbar-color-cancel: $palette-red-500 !default;
+$snackbar-color-accept: $palette-green-500 !default;
+$snackbar-color-warning: $palette-lime-a200 !default;
+$snackbar-background-color: $color-text !default;
+$snackbar-border-radius: .2 * $unit !default;
+$snackbar-button-offset: 4.8 * $unit !default;
+$snackbar-color: $color-white !default;
+$snackbar-horizontal-offset: 2.4 * $unit !default;
+$snackbar-vertical-offset: 1.4 * $unit !default;
diff --git a/lib/snackbar/index.d.ts b/lib/snackbar/index.d.ts
new file mode 100644
index 000000000..cc95d3a88
--- /dev/null
+++ b/lib/snackbar/index.d.ts
@@ -0,0 +1,69 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface SnackbarTheme {
+  /**
+   * Added to the root element in case it's accept type.
+   */
+  accept?: string;
+  /**
+   * Added to the root element when its active.
+   */
+  active?: string;
+  /**
+   * Used for the button inside the component.
+   */
+  button?: string;
+  /**
+   * Added to the root element in case it's cancel type.
+   */
+  cancel?: string;
+  /**
+   * Used for the label element.
+   */
+  label?: string;
+  /**
+   * Used as the className for the root element of the component.
+   */
+  snackbar?: string;
+  /**
+   * Added to the root element in case it's warning type.
+   */
+  warning?: string;
+}
+
+interface SnackbarProps extends ReactToolbox.Props {
+  /**
+   * Label for the action component inside the Snackbar.
+   */
+  action?: string;
+  /**
+   * If true, the snackbar will be active.
+   * @default true
+   */
+  active?: boolean;
+  /**
+   * Text to display in the content. Required.
+   */
+  label: string;
+  /**
+   * Callback function when finish the set timeout.
+   */
+  onTimeout?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: SnackbarTheme;
+  /**
+   * Amount of time in milliseconds after the Snackbar will be automatically hidden.
+   */
+  timeout?: number;
+  /**
+   * Indicates the action type. Can be accept, warning or cancel
+   */
+  type?: "accept" | "cancel" | "warning";
+}
+
+export class Snackbar extends React.Component<SnackbarProps, {}> { }
+
+export default Snackbar;
diff --git a/lib/snackbar/index.js b/lib/snackbar/index.js
new file mode 100644
index 000000000..4af5c61fd
--- /dev/null
+++ b/lib/snackbar/index.js
@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Snackbar = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Snackbar = require('./Snackbar.js');
+
+var _overlay = require('../overlay');
+
+var _button = require('../button');
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ThemedSnackbar = (0, _reactCssThemr.themr)(_identifiers.SNACKBAR, _theme2.default)((0, _Snackbar.snackbarFactory)(_overlay.Overlay, _button.Button));
+
+exports.default = ThemedSnackbar;
+exports.Snackbar = ThemedSnackbar;
\ No newline at end of file
diff --git a/lib/snackbar/theme.scss b/lib/snackbar/theme.scss
new file mode 100644
index 000000000..4c7d0770e
--- /dev/null
+++ b/lib/snackbar/theme.scss
@@ -0,0 +1,49 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+
+.snackbar {
+  position: fixed;
+  right: $snackbar-horizontal-offset;
+  bottom: 0;
+  left: $snackbar-horizontal-offset;
+  z-index: $z-index-higher;
+  display: flex;
+  align-items: center;
+  padding: $snackbar-vertical-offset $snackbar-horizontal-offset;
+  margin: 0 auto;
+  margin-top: $snackbar-vertical-offset;
+  color: $snackbar-color;
+  background-color: $snackbar-background-color;
+  border-radius: $snackbar-border-radius;
+  transition: all $animation-duration $animation-curve-default $animation-duration;
+  &.accept .button {
+    color: $snackbar-color-accept;
+  }
+  &.warning .button {
+    color: $snackbar-color-warning;
+  }
+  &.cancel .button {
+    color: $snackbar-color-cancel;
+  }
+  &:not(.active) {
+    transform: translateY(100%);
+  }
+  &.active {
+    transform: translateY(0%);
+  }
+}
+
+.label {
+  flex-grow: 1;
+  font-size: $font-size-small;
+}
+
+.button {
+  min-width: inherit;
+  margin-top: - $snackbar-vertical-offset / 2;
+  margin-right: - $snackbar-horizontal-offset / 2;
+  margin-bottom: - $snackbar-vertical-offset / 2;
+  margin-left: $snackbar-button-offset;
+}
diff --git a/lib/switch/Switch.js b/lib/switch/Switch.js
new file mode 100644
index 000000000..6737c2c6c
--- /dev/null
+++ b/lib/switch/Switch.js
@@ -0,0 +1,151 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Switch = exports.switchFactory = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Ripple = require('../ripple/Ripple.js');
+
+var _Ripple2 = _interopRequireDefault(_Ripple);
+
+var _Thumb = require('./Thumb.js');
+
+var _Thumb2 = _interopRequireDefault(_Thumb);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(Thumb) {
+  var Switch = function (_Component) {
+    _inherits(Switch, _Component);
+
+    function Switch() {
+      var _ref;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, Switch);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Switch.__proto__ || Object.getPrototypeOf(Switch)).call.apply(_ref, [this].concat(args))), _this), _this.handleToggle = function (event) {
+        if (event.pageX !== 0 && event.pageY !== 0) _this.blur();
+        if (!_this.props.disabled && _this.props.onChange) {
+          _this.props.onChange(!_this.props.checked, event);
+        }
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(Switch, [{
+      key: 'blur',
+      value: function blur() {
+        this.refs.input.blur();
+      }
+    }, {
+      key: 'focus',
+      value: function focus() {
+        this.refs.input.focus();
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _props = this.props,
+            className = _props.className,
+            checked = _props.checked,
+            disabled = _props.disabled,
+            onChange = _props.onChange,
+            theme = _props.theme,
+            others = _objectWithoutProperties(_props, ['className', 'checked', 'disabled', 'onChange', 'theme']); //eslint-disable-line no-unused-vars
+
+
+        var _className = (0, _classnames2.default)(theme[disabled ? 'disabled' : 'field'], className);
+        return _react2.default.createElement(
+          'label',
+          { 'data-react-toolbox': 'switch', className: _className },
+          _react2.default.createElement('input', _extends({}, others, {
+            checked: this.props.checked,
+            className: theme.input,
+            onClick: this.handleToggle,
+            readOnly: true,
+            ref: 'input',
+            type: 'checkbox'
+          })),
+          _react2.default.createElement(
+            'span',
+            { className: theme[checked ? 'on' : 'off'] },
+            _react2.default.createElement(Thumb, { disabled: this.props.disabled, theme: theme })
+          ),
+          this.props.label ? _react2.default.createElement(
+            'span',
+            { className: theme.text },
+            this.props.label
+          ) : null
+        );
+      }
+    }]);
+
+    return Switch;
+  }(_react.Component);
+
+  Switch.propTypes = {
+    checked: _react.PropTypes.bool,
+    className: _react.PropTypes.string,
+    disabled: _react.PropTypes.bool,
+    label: _react.PropTypes.string,
+    name: _react.PropTypes.string,
+    onBlur: _react.PropTypes.func,
+    onChange: _react.PropTypes.func,
+    onFocus: _react.PropTypes.func,
+    theme: _react.PropTypes.shape({
+      disabled: _react.PropTypes.string,
+      field: _react.PropTypes.string,
+      input: _react.PropTypes.string,
+      off: _react.PropTypes.string,
+      on: _react.PropTypes.string,
+      ripple: _react.PropTypes.string,
+      text: _react.PropTypes.string,
+      thumb: _react.PropTypes.string
+    })
+  };
+  Switch.defaultProps = {
+    checked: false,
+    className: '',
+    disabled: false
+  };
+
+
+  return Switch;
+};
+
+var Thumb = (0, _Thumb2.default)((0, _Ripple2.default)({ centered: true, spread: 2.6 }));
+var Switch = factory(Thumb);
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.SWITCH)(Switch);
+exports.switchFactory = factory;
+exports.Switch = Switch;
\ No newline at end of file
diff --git a/lib/switch/Thumb.js b/lib/switch/Thumb.js
new file mode 100644
index 000000000..1f41d9950
--- /dev/null
+++ b/lib/switch/Thumb.js
@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+var factory = function factory(ripple) {
+  var Thumb = function Thumb(_ref) {
+    var onMouseDown = _ref.onMouseDown,
+        theme = _ref.theme,
+        other = _objectWithoutProperties(_ref, ['onMouseDown', 'theme']);
+
+    return _react2.default.createElement('span', _extends({ role: 'thumb', className: theme.thumb, onMouseDown: onMouseDown }, other));
+  };
+
+  Thumb.propTypes = {
+    children: _react.PropTypes.any,
+    theme: _react.PropTypes.shape({
+      ripple: _react.PropTypes.string,
+      thumb: _react.PropTypes.string
+    })
+  };
+
+  return ripple(Thumb);
+};
+
+exports.default = factory;
\ No newline at end of file
diff --git a/lib/switch/_config.scss b/lib/switch/_config.scss
new file mode 100644
index 000000000..784084717
--- /dev/null
+++ b/lib/switch/_config.scss
@@ -0,0 +1,22 @@
+$switch-color: $color-primary !default;
+$switch-text-color: $color-black !default;
+$switch-thumb-off-color: $palette-grey-50 !default;
+$switch-track-on-color: rgba($color-primary, 0.5) !default;
+$switch-track-off-color: rgba($color-black, 0.26) !default;
+$switch-off-ripple-color: rgba($color-black, 0.4) !default;
+$switch-on-focus-color: rgba($color-primary, 0.26) !default;
+$switch-off-focus-color: rgba($color-black, 0.1) !default;
+$switch-disabled-thumb-color: $palette-grey-400 !default;
+$switch-disabled-track-color: rgba($color-black, 0.12) !default;
+$switch-disabled-text-color: rgba($color-black, 0.26) !default;
+$switch-total-height: 2.4 * $unit !default;
+$switch-track-length: 3.6 * $unit !default;
+$switch-track-height: 1.4 * $unit !default;
+$switch-thumb-size: 2 * $unit !default;
+$switch-thumb-on-color: $switch-color !default;
+$switch-focus-init-size: .8 * $unit !default;
+$switch-focus-size: $switch-total-height * 2 !default;
+$switch-focus-diff: ($switch-focus-size - $switch-focus-init-size) / 2 !default;
+$switch-ripple-duration: 650ms !default;
+$switch-font-size: $font-size-small !default;
+$switch-field-margin-bottom: 1.5 * $unit !default;
diff --git a/lib/switch/index.d.ts b/lib/switch/index.d.ts
new file mode 100644
index 000000000..fd1ab6e0e
--- /dev/null
+++ b/lib/switch/index.d.ts
@@ -0,0 +1,78 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface SwitchTheme {
+  /**
+   * Used for the root element if the component is disabled.
+   */
+  disabled?: string;
+  /**
+   * Used for the root element if the component is not disabled.
+   */
+  field?: string;
+  /**
+   * Used for the input element.
+   */
+  input?: string;
+  /**
+   * Used for a wrapper around the thumb if checked is false.
+   */
+  off?: string;
+  /**
+   * Used for a wrapper around the thumb if checked is true.
+   */
+  on?: string;
+  /**
+   * Used for the ripple inside the switch.
+   */
+  ripple?: string;
+  /**
+   * Used for the text label element.
+   */
+  text?: string;
+  /**
+   * Used for the thumb element.
+   */
+  thumb?: string;
+}
+
+interface SwitchProps extends ReactToolbox.Props {
+  /**
+   * If true, the switch will be enabled.
+   * @default false
+   */
+  checked?: boolean;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * The text string to use for the floating label element.
+   */
+  label?: string;
+  /**
+   * The text string used as name of the input.
+   */
+  name?: string;
+  /**
+   * Callback function that is fired when when the switch is blurred.
+   */
+  onBlur?: Function;
+  /**
+   * Callback function that is fired when the component's value changes.
+   */
+  onChange?: Function;
+  /**
+   * Callback function that is fired when the switch is focused.
+   */
+  onFocus?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: SwitchTheme;
+}
+
+export class Switch extends React.Component<SwitchProps, {}> { }
+
+export default Switch;
diff --git a/lib/switch/index.js b/lib/switch/index.js
new file mode 100644
index 000000000..6e717b50d
--- /dev/null
+++ b/lib/switch/index.js
@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Switch = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _Switch = require('./Switch.js');
+
+var _identifiers = require('../identifiers.js');
+
+var _Thumb = require('./Thumb.js');
+
+var _Thumb2 = _interopRequireDefault(_Thumb);
+
+var _ripple = require('../ripple');
+
+var _ripple2 = _interopRequireDefault(_ripple);
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var applyTheme = function applyTheme(Component) {
+  return (0, _reactCssThemr.themr)(_identifiers.SWITCH, _theme2.default)(Component);
+};
+var ripple = (0, _ripple2.default)({ centered: true, spread: 2.6 });
+var ThemedThumb = applyTheme((0, _Thumb2.default)(ripple));
+var ThemedSwitch = applyTheme((0, _Switch.switchFactory)(ThemedThumb));
+
+exports.default = ThemedSwitch;
+exports.Switch = ThemedSwitch;
\ No newline at end of file
diff --git a/lib/switch/theme.scss b/lib/switch/theme.scss
new file mode 100644
index 000000000..08a5c2900
--- /dev/null
+++ b/lib/switch/theme.scss
@@ -0,0 +1,123 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+
+.field {
+  position: relative;
+  display: block;
+  height: auto;
+  margin-bottom: $switch-field-margin-bottom;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.text {
+  display: inline-block;
+  padding-left: $unit;
+  font-size: $switch-font-size;
+  line-height: $switch-total-height;
+  color: $switch-text-color;
+  white-space: normal;
+  vertical-align: top;
+}
+
+%switch {
+  position: relative;
+  display: inline-block;
+  width: $switch-track-length;
+  height: $switch-track-height;
+  margin-top: ($switch-total-height - $switch-track-height) / 2;
+  vertical-align: top;
+  cursor: pointer;
+  border-radius: $switch-track-height;
+}
+
+.thumb {
+  @include material-animation-default(.28s);
+  position: absolute;
+  top: ($switch-track-height - $switch-thumb-size) / 2;
+  width: $switch-thumb-size;
+  height: $switch-thumb-size;
+  cursor: pointer;
+  border-radius: 50%;
+  transition-property: left;
+
+  .ripple {
+    background-color: $switch-color;
+    opacity: .3;
+    transition-duration: $switch-ripple-duration;
+  }
+}
+
+.on {
+  @extend %switch;
+  background: $switch-track-on-color;
+  .thumb {
+    @include shadow-3dp();
+    left: $switch-track-length - $switch-thumb-size;
+    background: $switch-thumb-on-color;
+  }
+}
+
+.off {
+  @extend %switch;
+  background: $switch-track-off-color;
+  .thumb {
+    @include shadow-2dp();
+    left: 0;
+    background: $switch-thumb-off-color;
+  }
+  .ripple {
+    background: $switch-off-ripple-color;
+  }
+}
+
+%thumb-focus {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  box-sizing: border-box;
+  display: inline-block;
+  width: $switch-focus-init-size;
+  height: $switch-focus-init-size;
+  content: "";
+  background-color: transparent;
+  border-radius: 50%;
+  transform: translate(- $switch-focus-init-size / 2, - $switch-focus-init-size / 2);
+}
+
+.input {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  opacity: 0;
+  &:focus:not(:active) {
+    + .switch-on > .thumb:before {
+      @extend %thumb-focus;
+      background-color: $switch-on-focus-color;
+      box-shadow: 0 0 0 $switch-focus-diff $switch-on-focus-color;
+    }
+    + .switch-off > .thumb:before {
+      @extend %thumb-focus;
+      background-color: $switch-off-focus-color;
+      box-shadow: 0 0 0 $switch-focus-diff $switch-off-focus-color;
+    }
+  }
+}
+
+.disabled {
+  @extend .field;
+  .text {
+    color: $switch-disabled-text-color;
+  }
+  .on, .off {
+    cursor: auto;
+    background: $switch-disabled-track-color;
+  }
+  .thumb {
+    cursor: auto;
+    background-color: $switch-disabled-thumb-color;
+    border-color: transparent;
+  }
+}
diff --git a/lib/table/Table.js b/lib/table/Table.js
new file mode 100644
index 000000000..98536edec
--- /dev/null
+++ b/lib/table/Table.js
@@ -0,0 +1,203 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Table = exports.tableFactory = undefined;
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Checkbox = require('../checkbox/Checkbox.js');
+
+var _Checkbox2 = _interopRequireDefault(_Checkbox);
+
+var _TableHead = require('./TableHead.js');
+
+var _TableHead2 = _interopRequireDefault(_TableHead);
+
+var _TableRow = require('./TableRow.js');
+
+var _TableRow2 = _interopRequireDefault(_TableRow);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(TableHead, TableRow) {
+  var Table = function (_Component) {
+    _inherits(Table, _Component);
+
+    function Table() {
+      var _ref;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, Table);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Table.__proto__ || Object.getPrototypeOf(Table)).call.apply(_ref, [this].concat(args))), _this), _this.handleFullSelect = function () {
+        if (_this.props.onSelect) {
+          var _this$props = _this.props,
+              source = _this$props.source,
+              selected = _this$props.selected;
+
+          var newSelected = source.length === selected.length ? [] : source.map(function (i, idx) {
+            return idx;
+          });
+          _this.props.onSelect(newSelected);
+        }
+      }, _this.handleRowSelect = function (index) {
+        if (_this.props.onSelect) {
+          var newSelection = [].concat(_toConsumableArray(_this.props.selected));
+          if (_this.props.multiSelectable) {
+            (function () {
+              var position = _this.props.selected.indexOf(index);
+              newSelection = position !== -1 ? newSelection.filter(function (el, idx) {
+                return idx !== position;
+              }) : newSelection.concat([index]);
+            })();
+          } else {
+            newSelection = [index];
+          }
+          _this.props.onSelect(newSelection);
+        }
+      }, _this.handleRowChange = function (index, key, value) {
+        if (_this.props.onChange) {
+          _this.props.onChange(index, key, value);
+        }
+      }, _this.handleRowClick = function (index, event) {
+        if (_this.props.onRowClick) {
+          _this.props.onRowClick(index, event);
+        }
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(Table, [{
+      key: 'renderHead',
+      value: function renderHead() {
+        if (this.props.heading) {
+          var _props = this.props,
+              model = _props.model,
+              selected = _props.selected,
+              source = _props.source,
+              selectable = _props.selectable,
+              multiSelectable = _props.multiSelectable;
+
+          var isSelected = selected.length === source.length;
+          return _react2.default.createElement(TableHead, {
+            model: model,
+            onSelect: this.handleFullSelect,
+            selectable: selectable,
+            multiSelectable: multiSelectable,
+            selected: isSelected,
+            theme: this.props.theme
+          });
+        }
+      }
+    }, {
+      key: 'renderBody',
+      value: function renderBody() {
+        var _this2 = this;
+
+        var _props2 = this.props,
+            source = _props2.source,
+            model = _props2.model,
+            onChange = _props2.onChange,
+            selectable = _props2.selectable,
+            selected = _props2.selected,
+            theme = _props2.theme;
+
+        return _react2.default.createElement(
+          'tbody',
+          null,
+          source.map(function (data, index) {
+            return _react2.default.createElement(TableRow, {
+              data: data,
+              index: index,
+              key: index,
+              model: model,
+              onChange: onChange ? _this2.handleRowChange.bind(_this2) : undefined,
+              onSelect: _this2.handleRowSelect.bind(_this2, index),
+              onRowClick: _this2.handleRowClick.bind(_this2, index),
+              selectable: selectable,
+              selected: selected.indexOf(index) !== -1,
+              theme: theme
+            });
+          })
+        );
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _props3 = this.props,
+            className = _props3.className,
+            theme = _props3.theme;
+
+        return _react2.default.createElement(
+          'table',
+          { 'data-react-toolbox': 'table', className: (0, _classnames2.default)(theme.table, className) },
+          this.renderHead(),
+          this.renderBody()
+        );
+      }
+    }]);
+
+    return Table;
+  }(_react.Component);
+
+  Table.propTypes = {
+    className: _react.PropTypes.string,
+    heading: _react.PropTypes.bool,
+    model: _react.PropTypes.object,
+    multiSelectable: _react.PropTypes.bool,
+    onChange: _react.PropTypes.func,
+    onRowClick: _react.PropTypes.func,
+    onSelect: _react.PropTypes.func,
+    selectable: _react.PropTypes.bool,
+    selected: _react.PropTypes.array,
+    source: _react.PropTypes.array,
+    theme: _react.PropTypes.shape({
+      table: _react.PropTypes.string
+    })
+  };
+  Table.defaultProps = {
+    className: '',
+    heading: true,
+    selectable: true,
+    multiSelectable: true,
+    selected: [],
+    source: []
+  };
+
+
+  return Table;
+};
+
+var TableHead = (0, _TableHead2.default)(_Checkbox2.default);
+var TableRow = (0, _TableRow2.default)(_Checkbox2.default);
+var Table = factory(TableHead, TableRow);
+
+exports.default = (0, _reactCssThemr.themr)(_identifiers.TABLE)(Table);
+exports.tableFactory = factory;
+exports.Table = Table;
\ No newline at end of file
diff --git a/lib/table/TableHead.js b/lib/table/TableHead.js
new file mode 100644
index 000000000..8a0ba5ca8
--- /dev/null
+++ b/lib/table/TableHead.js
@@ -0,0 +1,75 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+var factory = function factory(Checkbox) {
+  var TableHead = function TableHead(_ref) {
+    var model = _ref.model,
+        onSelect = _ref.onSelect,
+        selectable = _ref.selectable,
+        multiSelectable = _ref.multiSelectable,
+        selected = _ref.selected,
+        theme = _ref.theme;
+
+    var selectCell = void 0;
+    var contentCells = Object.keys(model).map(function (key) {
+      var name = model[key].title || key;
+      return _react2.default.createElement(
+        'th',
+        { key: key },
+        name
+      );
+    });
+
+    if (selectable && multiSelectable) {
+      selectCell = _react2.default.createElement(
+        'th',
+        { key: 'select', className: theme.selectable },
+        _react2.default.createElement(Checkbox, { onChange: onSelect, checked: selected })
+      );
+    } else if (selectable) {
+      selectCell = _react2.default.createElement('th', { key: 'select', className: theme.selectable });
+    }
+    return _react2.default.createElement(
+      'thead',
+      null,
+      _react2.default.createElement(
+        'tr',
+        null,
+        [selectCell].concat(_toConsumableArray(contentCells))
+      )
+    );
+  };
+
+  TableHead.propTypes = {
+    className: _react.PropTypes.string,
+    model: _react.PropTypes.object,
+    multiSelectable: _react.PropTypes.bool,
+    onSelect: _react.PropTypes.func,
+    selectable: _react.PropTypes.bool,
+    selected: _react.PropTypes.bool,
+    theme: _react.PropTypes.shape({
+      selectable: _react.PropTypes.string
+    })
+  };
+
+  TableHead.defaultProps = {
+    className: '',
+    model: {},
+    selected: false
+  };
+
+  return TableHead;
+};
+
+exports.default = factory;
\ No newline at end of file
diff --git a/lib/table/TableRow.js b/lib/table/TableRow.js
new file mode 100644
index 000000000..c7140602d
--- /dev/null
+++ b/lib/table/TableRow.js
@@ -0,0 +1,172 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _utils = require('../utils/utils');
+
+var _utils2 = _interopRequireDefault(_utils);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(Checkbox) {
+  var TableRow = function (_Component) {
+    _inherits(TableRow, _Component);
+
+    function TableRow() {
+      var _ref;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, TableRow);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TableRow.__proto__ || Object.getPrototypeOf(TableRow)).call.apply(_ref, [this].concat(args))), _this), _this.handleInputChange = function (index, key, type, event) {
+        var value = void 0;
+        switch (type) {
+          case 'checkbox':
+            value = event.target.checked;
+            break;
+          // Handle contentEditable
+          case 'text':
+            value = event.target.textContent;
+            break;
+          default:
+            value = event.target.value;
+            break;
+        }
+
+        var onChange = _this.props.model[key].onChange || _this.props.onChange;
+        onChange(index, key, value);
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(TableRow, [{
+      key: 'renderSelectCell',
+      value: function renderSelectCell() {
+        if (this.props.selectable) {
+          return _react2.default.createElement(
+            'td',
+            { className: this.props.theme.selectable },
+            _react2.default.createElement(Checkbox, { checked: this.props.selected, onChange: this.props.onSelect })
+          );
+        }
+      }
+    }, {
+      key: 'renderCells',
+      value: function renderCells() {
+        var _this2 = this;
+
+        return Object.keys(this.props.model).map(function (key) {
+          return _react2.default.createElement(
+            'td',
+            { key: key, onClick: _this2.props.onRowClick },
+            _this2.renderCell(key)
+          );
+        });
+      }
+    }, {
+      key: 'renderCell',
+      value: function renderCell(key) {
+        var value = this.props.data[key];
+
+        // if the value is a valid React element return it directly, since it
+        // cannot be edited and should not be converted to a string...
+        if (_react2.default.isValidElement(value)) {
+          return value;
+        }
+
+        var onChange = this.props.model[key].onChange || this.props.onChange;
+        if (onChange) {
+          return this.renderInput(key, value);
+        } else if (value) {
+          return value.toString();
+        }
+      }
+    }, {
+      key: 'renderInput',
+      value: function renderInput(key, value) {
+        var index = this.props.index;
+        var inputType = _utils2.default.inputTypeForPrototype(this.props.model[key].type);
+        var inputValue = _utils2.default.prepareValueForInput(value, inputType);
+        var checked = inputType === 'checkbox' && value ? true : null;
+
+        if (inputType === 'text') {
+          return _react2.default.createElement('div', {
+            children: inputValue,
+            contentEditable: true,
+            suppressContentEditableWarning: true,
+            onInput: this.handleInputChange.bind(null, index, key, inputType)
+          });
+        }
+
+        return _react2.default.createElement('input', {
+          checked: checked,
+          onChange: this.handleInputChange.bind(null, index, key, inputType),
+          type: inputType,
+          value: inputValue
+        });
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _classnames;
+
+        var className = (0, _classnames3.default)(this.props.theme.row, (_classnames = {}, _defineProperty(_classnames, this.props.theme.editable, this.props.onChange), _defineProperty(_classnames, this.props.theme.selected, this.props.selected), _classnames));
+
+        return _react2.default.createElement(
+          'tr',
+          { 'data-react-toolbox-table': 'row', className: className },
+          this.renderSelectCell(),
+          this.renderCells()
+        );
+      }
+    }]);
+
+    return TableRow;
+  }(_react.Component);
+
+  TableRow.propTypes = {
+    data: _react.PropTypes.object,
+    index: _react.PropTypes.number,
+    model: _react.PropTypes.object,
+    onChange: _react.PropTypes.func,
+    onRowClick: _react.PropTypes.func,
+    onSelect: _react.PropTypes.func,
+    selectable: _react.PropTypes.bool,
+    selected: _react.PropTypes.bool,
+    theme: _react.PropTypes.shape({
+      editable: _react.PropTypes.string,
+      row: _react.PropTypes.string,
+      selectable: _react.PropTypes.string,
+      selected: _react.PropTypes.string
+    })
+  };
+
+
+  return TableRow;
+};
+
+exports.default = factory;
\ No newline at end of file
diff --git a/lib/table/_config.scss b/lib/table/_config.scss
new file mode 100644
index 000000000..7ec3b5a2b
--- /dev/null
+++ b/lib/table/_config.scss
@@ -0,0 +1,5 @@
+$table-row-height: 48px !default;
+$table-row-divider: solid 1px rgba(0,0,0,.12) !default;
+$table-row-offset: 1.8 * $unit !default;
+$table-row-highlight: #eee !default;
+$table-text-color: #757575 !default;
diff --git a/lib/table/index.d.ts b/lib/table/index.d.ts
new file mode 100644
index 000000000..044b5141b
--- /dev/null
+++ b/lib/table/index.d.ts
@@ -0,0 +1,71 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface TableTheme {
+  /**
+   * It will be added to a row in case it is editable.
+   */
+  editable?: string;
+  /**
+   * Used for the row element.
+   */
+  row?: string;
+  /**
+   * It will be added to a row in case it is selectable.
+   */
+  selectable?: string;
+  /**
+   * Added to a row in case it is selected.
+   */
+  selected?: string;
+  /**
+   * Classname used for the root element.
+   */
+  table?: string;
+}
+
+interface TableProps extends ReactToolbox.Props {
+  /**
+   * If true, component will show a heading using model field names.
+   * @default true
+   */
+  heading?: boolean;
+  /**
+   * Object describing the data model that represents each object in the source.
+   */
+  model?: any;
+  /**
+   * Callback function that is fired when an item in a row changes. If set, rows are editable.
+   */
+  onChange?: Function;
+  /**
+   * Callback function invoked when the row selection changes.
+   */
+  onSelect?: Function;
+  /**
+   * If true, each row will display a checkbox to allow the user to select that one row.
+   * @default true
+   */
+  selectable?: boolean;
+  /**
+   * If true, the header and each row will display a checkbox to allow the user to select multiple rows.
+   * @default true
+   */
+  multiSelectable?: boolean;
+  /**
+   * Array of indexes of the items in the source that should appear as selected.
+   */
+  selected?: any[];
+  /**
+   * Array of objects representing each item to show.
+   */
+  source?: any[];
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: TableTheme;
+}
+
+export class Table extends React.Component<TableProps, {}> { }
+
+export default Table;
diff --git a/lib/table/index.js b/lib/table/index.js
new file mode 100644
index 000000000..994d96cb2
--- /dev/null
+++ b/lib/table/index.js
@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Table = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _checkbox = require('../checkbox');
+
+var _Table = require('./Table.js');
+
+var _TableHead = require('./TableHead.js');
+
+var _TableHead2 = _interopRequireDefault(_TableHead);
+
+var _TableRow = require('./TableRow.js');
+
+var _TableRow2 = _interopRequireDefault(_TableRow);
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var applyTheme = function applyTheme(Component) {
+  return (0, _reactCssThemr.themr)(_identifiers.TABLE, _theme2.default)(Component);
+};
+var ThemedTableHead = applyTheme((0, _TableHead2.default)(_checkbox.Checkbox));
+var ThemedTableRow = applyTheme((0, _TableRow2.default)(_checkbox.Checkbox));
+var ThemedTable = applyTheme((0, _Table.tableFactory)(ThemedTableHead, ThemedTableRow));
+
+exports.default = ThemedTable;
+exports.Table = ThemedTable;
\ No newline at end of file
diff --git a/lib/table/theme.scss b/lib/table/theme.scss
new file mode 100644
index 000000000..232ed4268
--- /dev/null
+++ b/lib/table/theme.scss
@@ -0,0 +1,59 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+
+.table {
+  width: 100%;
+  font-size: $font-size-tiny;
+  color: $table-text-color;
+  text-align: left;
+  border-spacing: 0;
+  tr {
+    height: $table-row-height;
+    line-height: $table-row-height;
+  }
+  th {
+    font-weight: $font-weight-bold;
+    &:first-letter {
+      text-transform: capitalize;
+    }
+  }
+  th, td {
+    position: relative;
+    padding: 0 $table-row-offset;
+    border-bottom: $table-row-divider;
+    &.selectable {
+      width: 1.8 * $unit;
+      padding-right: 0;
+      > * {
+        margin: 0;
+      }
+    }
+  }
+}
+
+.row {
+  transition: background-color $animation-duration $animation-curve-default;
+  &:last-child {
+    td {
+      border-color: transparent;
+    }
+  }
+  > td {
+    > input {
+      display: block;
+      width: 100%;
+      background-color: transparent;
+      border: 0;
+    }
+  }
+}
+
+.selected, .row:hover {
+  background-color: $table-row-highlight;
+}
+
+.editable > * {
+  cursor: pointer;
+}
diff --git a/lib/tabs/Tab.js b/lib/tabs/Tab.js
new file mode 100644
index 000000000..d077ec773
--- /dev/null
+++ b/lib/tabs/Tab.js
@@ -0,0 +1,121 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tab = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _font_icon = require('../font_icon');
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var Tab = function (_Component) {
+  _inherits(Tab, _Component);
+
+  function Tab() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck(this, Tab);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Tab.__proto__ || Object.getPrototypeOf(Tab)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
+      if (!_this.props.disabled && _this.props.onClick) {
+        _this.props.onClick(event);
+      }
+    }, _temp), _possibleConstructorReturn(_this, _ret);
+  }
+
+  _createClass(Tab, [{
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate(prevProps) {
+      if (!prevProps.active && this.props.active && this.props.onActive) {
+        this.props.onActive();
+      }
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _classnames;
+
+      var _props = this.props,
+          onActive = _props.onActive,
+          active = _props.active,
+          activeClassName = _props.activeClassName,
+          className = _props.className,
+          disabled = _props.disabled,
+          hidden = _props.hidden,
+          label = _props.label,
+          icon = _props.icon,
+          theme = _props.theme,
+          other = _objectWithoutProperties(_props, ['onActive', 'active', 'activeClassName', 'className', 'disabled', 'hidden', 'label', 'icon', 'theme']);
+
+      var _className = (0, _classnames3.default)(theme.label, (_classnames = {}, _defineProperty(_classnames, theme.active, active), _defineProperty(_classnames, theme.hidden, hidden), _defineProperty(_classnames, theme.withText, label), _defineProperty(_classnames, theme.withIcon, icon), _defineProperty(_classnames, theme.disabled, disabled), _defineProperty(_classnames, activeClassName, active), _classnames), className);
+
+      return _react2.default.createElement(
+        'label',
+        _extends({}, other, { 'data-react-toolbox': 'tab', className: _className, onClick: this.handleClick }),
+        icon && _react2.default.createElement(_font_icon.FontIcon, { className: theme.icon, value: icon }),
+        label
+      );
+    }
+  }]);
+
+  return Tab;
+}(_react.Component);
+
+Tab.propTypes = {
+  active: _react.PropTypes.bool,
+  activeClassName: _react.PropTypes.string,
+  className: _react.PropTypes.string,
+  disabled: _react.PropTypes.bool,
+  hidden: _react.PropTypes.bool,
+  icon: _react.PropTypes.node,
+  label: _react.PropTypes.node,
+  onActive: _react.PropTypes.func,
+  onClick: _react.PropTypes.func,
+  theme: _react.PropTypes.shape({
+    active: _react.PropTypes.string,
+    disabled: _react.PropTypes.string,
+    hidden: _react.PropTypes.string,
+    label: _react.PropTypes.string
+  })
+};
+Tab.defaultProps = {
+  active: false,
+  className: '',
+  disabled: false,
+  hidden: false
+};
+exports.default = (0, _reactCssThemr.themr)(_identifiers.TABS)(Tab);
+exports.Tab = Tab;
\ No newline at end of file
diff --git a/lib/tabs/TabContent.js b/lib/tabs/TabContent.js
new file mode 100644
index 000000000..65bd7a6a6
--- /dev/null
+++ b/lib/tabs/TabContent.js
@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TabContent = undefined;
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var TabContent = function (_Component) {
+  _inherits(TabContent, _Component);
+
+  function TabContent() {
+    _classCallCheck(this, TabContent);
+
+    return _possibleConstructorReturn(this, (TabContent.__proto__ || Object.getPrototypeOf(TabContent)).apply(this, arguments));
+  }
+
+  _createClass(TabContent, [{
+    key: 'render',
+    value: function render() {
+      var className = (0, _classnames3.default)(this.props.theme.tab, _defineProperty({}, this.props.theme.active, this.props.active), this.props.className);
+
+      return _react2.default.createElement(
+        'section',
+        { className: className, tabIndex: this.props.tabIndex },
+        this.props.children
+      );
+    }
+  }]);
+
+  return TabContent;
+}(_react.Component);
+
+TabContent.propTypes = {
+  active: _react.PropTypes.bool,
+  children: _react.PropTypes.node,
+  className: _react.PropTypes.string,
+  tabIndex: _react.PropTypes.number,
+  theme: _react.PropTypes.shape({
+    active: _react.PropTypes.string,
+    tab: _react.PropTypes.string
+  })
+};
+TabContent.defaultProps = {
+  active: false,
+  className: ''
+};
+exports.default = (0, _reactCssThemr.themr)(_identifiers.TABS)(TabContent);
+exports.TabContent = TabContent;
\ No newline at end of file
diff --git a/lib/tabs/Tabs.js b/lib/tabs/Tabs.js
new file mode 100644
index 000000000..8dc679cf5
--- /dev/null
+++ b/lib/tabs/Tabs.js
@@ -0,0 +1,268 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tabs = exports.tabsFactory = undefined;
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames3 = require('classnames');
+
+var _classnames4 = _interopRequireDefault(_classnames3);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _FontIcon = require('../font_icon/FontIcon.js');
+
+var _FontIcon2 = _interopRequireDefault(_FontIcon);
+
+var _Tab = require('./Tab.js');
+
+var _Tab2 = _interopRequireDefault(_Tab);
+
+var _TabContent = require('./TabContent.js');
+
+var _TabContent2 = _interopRequireDefault(_TabContent);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(Tab, TabContent, FontIcon) {
+  var Tabs = function (_Component) {
+    _inherits(Tabs, _Component);
+
+    function Tabs() {
+      var _ref;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, Tabs);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Tabs.__proto__ || Object.getPrototypeOf(Tabs)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+        pointer: {},
+        arrows: {}
+      }, _this.handleHeaderClick = function (event) {
+        var idx = parseInt(event.currentTarget.id);
+        if (_this.props.onChange) _this.props.onChange(idx);
+      }, _this.handleResize = function () {
+        if (_this.resizeTimeout) clearTimeout(_this.resizeTimeout);
+        _this.resizeTimeout = setTimeout(function () {
+          _this.updatePointer(_this.props.index);
+          _this.updateArrows();
+        }, 100);
+      }, _this.updatePointer = function (idx) {
+        if (_this.navigationNode && _this.navigationNode.children[idx]) {
+          var nav = _this.navigationNode.getBoundingClientRect();
+          var label = _this.navigationNode.children[idx].getBoundingClientRect();
+          var scrollLeft = _this.navigationNode.scrollLeft;
+          _this.setState({
+            pointer: {
+              top: nav.height + 'px',
+              left: label.left - nav.left + scrollLeft + 'px',
+              width: label.width + 'px'
+            }
+          });
+        }
+      }, _this.updateArrows = function () {
+        var nav = _this.navigationNode;
+        _this.setState({
+          arrows: {
+            left: nav.scrollLeft > 0,
+            right: nav.scrollWidth > nav.clientWidth && nav.scrollLeft + nav.clientWidth < nav.scrollWidth
+          }
+        });
+      }, _this.scrollNavigation = function (factor) {
+        var oldScrollLeft = _this.navigationNode.scrollLeft;
+        _this.navigationNode.scrollLeft += factor * _this.navigationNode.clientWidth;
+        if (_this.navigationNode.scrollLeft !== oldScrollLeft) {
+          _this.updateArrows();
+        }
+      }, _this.scrollRight = function () {
+        return _this.scrollNavigation(-1);
+      }, _this.scrollLeft = function () {
+        return _this.scrollNavigation(+1);
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(Tabs, [{
+      key: 'componentDidMount',
+      value: function componentDidMount() {
+        window.addEventListener('resize', this.handleResize);
+        this.handleResize();
+      }
+    }, {
+      key: 'componentWillReceiveProps',
+      value: function componentWillReceiveProps(nextProps) {
+        this.updatePointer(nextProps.index);
+      }
+    }, {
+      key: 'componentWillUnmount',
+      value: function componentWillUnmount() {
+        window.removeEventListener('resize', this.handleResize);
+        clearTimeout(this.resizeTimeout);
+      }
+    }, {
+      key: 'parseChildren',
+      value: function parseChildren() {
+        var _this2 = this;
+
+        var headers = [];
+        var contents = [];
+
+        _react2.default.Children.forEach(this.props.children, function (item) {
+          if (item.type === Tab) {
+            headers.push(item);
+            if (item.props.children) {
+              contents.push(_react2.default.createElement(TabContent, { children: item.props.children, theme: _this2.props.theme }));
+            }
+          } else if (item.type === TabContent) {
+            contents.push(item);
+          }
+        });
+
+        return { headers: headers, contents: contents };
+      }
+    }, {
+      key: 'renderHeaders',
+      value: function renderHeaders(headers) {
+        var _this3 = this;
+
+        return headers.map(function (item, idx) {
+          return _react2.default.cloneElement(item, {
+            id: idx,
+            key: idx,
+            theme: _this3.props.theme,
+            active: _this3.props.index === idx,
+            onClick: function onClick(event) {
+              _this3.handleHeaderClick(event);
+              item.props.onClick && item.props.onClick(event);
+            }
+          });
+        });
+      }
+    }, {
+      key: 'renderContents',
+      value: function renderContents(contents) {
+        var _this4 = this;
+
+        var contentElements = contents.map(function (item, idx) {
+          return _react2.default.cloneElement(item, {
+            key: idx,
+            theme: _this4.props.theme,
+            active: _this4.props.index === idx,
+            hidden: _this4.props.index !== idx && _this4.props.hideMode === 'display',
+            tabIndex: idx
+          });
+        });
+
+        return this.props.hideMode === 'display' ? contentElements : contentElements.filter(function (item, idx) {
+          return idx === _this4.props.index;
+        });
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _classnames2,
+            _this5 = this;
+
+        var _props = this.props,
+            className = _props.className,
+            disableAnimatedBottomBorder = _props.disableAnimatedBottomBorder,
+            theme = _props.theme,
+            fixed = _props.fixed,
+            inverse = _props.inverse;
+        var _state$arrows = this.state.arrows,
+            hasLeftArrow = _state$arrows.left,
+            hasRightArrow = _state$arrows.right;
+
+        var _parseChildren = this.parseChildren(),
+            headers = _parseChildren.headers,
+            contents = _parseChildren.contents;
+
+        var classNamePointer = (0, _classnames4.default)(theme.pointer, _defineProperty({}, theme.disableAnimation, disableAnimatedBottomBorder));
+
+        var classNames = (0, _classnames4.default)(theme.tabs, (_classnames2 = {}, _defineProperty(_classnames2, theme.fixed, fixed), _defineProperty(_classnames2, theme.inverse, inverse), _classnames2), className);
+
+        return _react2.default.createElement(
+          'div',
+          { 'data-react-toolbox': 'tabs', className: classNames },
+          _react2.default.createElement(
+            'div',
+            { className: theme.navigationContainer },
+            hasLeftArrow && _react2.default.createElement(
+              'div',
+              { className: theme.arrowContainer, onClick: this.scrollRight },
+              _react2.default.createElement(FontIcon, { className: theme.arrow, value: 'keyboard_arrow_left' })
+            ),
+            _react2.default.createElement(
+              'nav',
+              { className: theme.navigation, ref: function ref(node) {
+                  _this5.navigationNode = node;
+                } },
+              this.renderHeaders(headers),
+              _react2.default.createElement('span', { className: classNamePointer, style: this.state.pointer })
+            ),
+            hasRightArrow && _react2.default.createElement(
+              'div',
+              { className: theme.arrowContainer, onClick: this.scrollLeft },
+              _react2.default.createElement(FontIcon, { className: theme.arrow, value: 'keyboard_arrow_right' })
+            )
+          ),
+          this.renderContents(contents)
+        );
+      }
+    }]);
+
+    return Tabs;
+  }(_react.Component);
+
+  Tabs.propTypes = {
+    children: _react.PropTypes.node,
+    className: _react.PropTypes.string,
+    disableAnimatedBottomBorder: _react.PropTypes.bool,
+    fixed: _react.PropTypes.bool,
+    hideMode: _react.PropTypes.oneOf(['display', 'unmounted']),
+    index: _react.PropTypes.number,
+    inverse: _react.PropTypes.bool,
+    onChange: _react.PropTypes.func,
+    theme: _react.PropTypes.shape({
+      fixed: _react.PropTypes.string,
+      inverse: _react.PropTypes.string,
+      navigation: _react.PropTypes.string,
+      pointer: _react.PropTypes.string,
+      tabs: _react.PropTypes.string
+    })
+  };
+  Tabs.defaultProps = {
+    index: 0,
+    fixed: false,
+    inverse: false,
+    hideMode: 'unmounted'
+  };
+
+
+  return Tabs;
+};
+
+var Tabs = factory(_Tab2.default, _TabContent2.default, _FontIcon2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.TABS)(Tabs);
+exports.tabsFactory = factory;
+exports.Tabs = Tabs;
\ No newline at end of file
diff --git a/lib/tabs/__tests__/index.spec.js b/lib/tabs/__tests__/index.spec.js
new file mode 100644
index 000000000..32bca1a3b
--- /dev/null
+++ b/lib/tabs/__tests__/index.spec.js
@@ -0,0 +1,176 @@
+'use strict';
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _expect = require('expect');
+
+var _expect2 = _interopRequireDefault(_expect);
+
+var _testing = require('../../utils/testing');
+
+var _testing2 = _interopRequireDefault(_testing);
+
+var _reactAddonsTestUtils = require('react-addons-test-utils');
+
+var _reactAddonsTestUtils2 = _interopRequireDefault(_reactAddonsTestUtils);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactDom = require('react-dom');
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
+var _Tabs = require('../Tabs');
+
+var _Tabs2 = _interopRequireDefault(_Tabs);
+
+var _Tab = require('../Tab');
+
+var _Tab2 = _interopRequireDefault(_Tab);
+
+var _TabContent = require('../TabContent');
+
+var _TabContent2 = _interopRequireDefault(_TabContent);
+
+var _theme = require('../theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var getRenderedClassName = function getRenderedClassName(tree, TargetComponent) {
+  var rendered = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, TargetComponent);
+  return _reactDom2.default.findDOMNode(rendered).getAttribute('class');
+};
+
+describe('Tabs', function () {
+  var tabContents = void 0,
+      composition = void 0;
+
+  var Composition = function (_Component) {
+    _inherits(Composition, _Component);
+
+    function Composition() {
+      _classCallCheck(this, Composition);
+
+      var _this = _possibleConstructorReturn(this, (Composition.__proto__ || Object.getPrototypeOf(Composition)).call(this));
+
+      _this.state = { index: 0 };
+      return _this;
+    }
+
+    _createClass(Composition, [{
+      key: 'render',
+      value: function render() {
+        return _react2.default.createElement(
+          _Tabs2.default,
+          _extends({ index: this.state.index }, this.props),
+          _react2.default.createElement(
+            _Tab2.default,
+            { label: 'tab1' },
+            'tab1'
+          ),
+          _react2.default.createElement(
+            _Tab2.default,
+            { label: 'tab2' },
+            'tab2'
+          )
+        );
+      }
+    }]);
+
+    return Composition;
+  }(_react.Component);
+
+  it('defaults to only rendering the current tab', function () {
+    // initial render
+    composition = _testing2.default.renderComponent(Composition);
+
+    tabContents = _reactAddonsTestUtils2.default.scryRenderedComponentsWithType(composition, _TabContent2.default);
+
+    (0, _expect2.default)(tabContents.length).toEqual(1);
+    (0, _expect2.default)(tabContents[0].props.tabIndex).toEqual(0);
+
+    // after tab change
+    composition.setState({ index: 1 });
+    composition.forceUpdate();
+
+    tabContents = _reactAddonsTestUtils2.default.scryRenderedComponentsWithType(composition, _TabContent2.default);
+
+    (0, _expect2.default)(tabContents.length).toEqual(1);
+    (0, _expect2.default)(tabContents[0].props.tabIndex).toEqual(1);
+  });
+
+  it('renders inactive tabs when hideMode is set to display', function () {
+    // initial render
+    composition = _testing2.default.renderComponent(Composition, { hideMode: 'display' });
+
+    tabContents = _reactAddonsTestUtils2.default.scryRenderedComponentsWithType(composition, _TabContent2.default);
+
+    (0, _expect2.default)(tabContents.length).toEqual(2);
+
+    var tabOne = tabContents.find(function (tab) {
+      return tab.props.children === 'tab1';
+    });
+    var tabTwo = tabContents.find(function (tab) {
+      return tab.props.children === 'tab2';
+    });
+
+    (0, _expect2.default)(tabOne.props.hidden).toEqual(false);
+    (0, _expect2.default)(tabTwo.props.hidden).toEqual(true);
+
+    // after tab change
+    composition.setState({ index: 1 });
+    composition.forceUpdate();
+
+    tabContents = _reactAddonsTestUtils2.default.scryRenderedComponentsWithType(composition, _TabContent2.default);
+
+    (0, _expect2.default)(tabContents.length).toEqual(2);
+
+    tabOne = tabContents.find(function (tab) {
+      return tab.props.children === 'tab1';
+    });
+    tabTwo = tabContents.find(function (tab) {
+      return tab.props.children === 'tab2';
+    });
+
+    (0, _expect2.default)(tabOne.props.hidden).toEqual(true);
+    (0, _expect2.default)(tabTwo.props.hidden).toEqual(false);
+  });
+
+  describe('#render', function () {
+    it('does not use fixed by default', function () {
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Tabs2.default, { theme: _theme2.default }));
+      var className = getRenderedClassName(tree, _Tabs.Tabs);
+      (0, _expect2.default)(className).toNotContain(_theme2.default.fixed);
+    });
+
+    it('uses fixed when set', function () {
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Tabs2.default, { theme: _theme2.default, fixed: true }));
+      var className = getRenderedClassName(tree, _Tabs.Tabs);
+      (0, _expect2.default)(className).toContain(_theme2.default.fixed);
+    });
+
+    it('does not use inverse by default', function () {
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Tabs2.default, { theme: _theme2.default }));
+      var className = getRenderedClassName(tree, _Tabs.Tabs);
+      (0, _expect2.default)(className).toNotContain(_theme2.default.inverse);
+    });
+
+    it('uses inverse when set', function () {
+      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Tabs2.default, { theme: _theme2.default, inverse: true }));
+      var className = getRenderedClassName(tree, _Tabs.Tabs);
+      (0, _expect2.default)(className).toContain(_theme2.default.inverse);
+    });
+  });
+});
\ No newline at end of file
diff --git a/lib/tabs/_config.scss b/lib/tabs/_config.scss
new file mode 100644
index 000000000..e5ee9c8e0
--- /dev/null
+++ b/lib/tabs/_config.scss
@@ -0,0 +1,20 @@
+$tab-label-disabled-opacity: .2 !default;
+$tab-label-h-padding: 1.2 * $unit !default;
+$tab-label-height: 4.8 * $unit !default;
+$tab-icon-height: 2.4 * $unit !default;
+$tab-icon-margin-bottom: .8 * $unit !default;
+$tab-text-height: 1.4 * $unit !default;
+$tab-label-v-padding: ($tab-label-height - $tab-text-height) / 2 !default;
+$tab-navigation-border-color: $color-divider !default;
+$tab-pointer-color: $color-primary !default;
+$tab-pointer-height: .2 * $unit !default;
+$tab-text: $color-black !default;
+$tab-text-color: $tab-text !default;
+$tab-text-inactive-color: rgba($tab-text, .7) !default;
+
+// Inverse
+$tab-inverse-bar-color: $color-primary !default;
+$tab-inverse-pointer-color: $color-accent !default;
+$tab-inverse-text: $color-primary-contrast !default;
+$tab-inverse-text-color: $tab-inverse-text !default;
+$tab-inverse-text-inactive-color: rgba($tab-inverse-text, .7) !default;
diff --git a/lib/tabs/index.d.ts b/lib/tabs/index.d.ts
new file mode 100644
index 000000000..d4d737b7c
--- /dev/null
+++ b/lib/tabs/index.d.ts
@@ -0,0 +1,117 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface TabsTheme {
+  /**
+   * Added to the active tab content and header.
+   */
+  active?: string;
+  /**
+   * Used for the navigation element.
+   */
+  navigation?: string;
+  /**
+   * Used for the moving underline element.
+   */
+  pointer?: string;
+  /**
+   * Used as a root classname for the component.
+   */
+  tabs?: string;
+  /**
+   * Used for the tab content element.
+   */
+  tab?: string;
+}
+
+interface TabsProps extends ReactToolbox.Props {
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Disable the animation below the active tab.
+   * @default false
+   */
+  disableAnimatedBottomBorder?: boolean;
+  /**
+   * Current
+   * @default 0
+   */
+  index?: number;
+  /**
+   * `unmounted` mode will not mount the tab content of inactive tabs.
+   * `display` mode will mount but hide inactive tabs. 
+   * Consider holding state outside of the Tabs component before using `display` mode
+   * @default unmounted
+   */
+  hideMode?: 'display' | 'unmounted';
+  /**
+   * If True, the tabs will have an inverse style.
+   */
+  inverse?: boolean;
+  /**
+   * Callback function that is fired when the tab changes.
+   */
+  onChange?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: TabsTheme;
+}
+
+export class Tabs extends React.Component<TabsProps, {}> { }
+
+export interface TabTheme {
+  /**
+   * Added to the navigation tab element in case it's active.
+   */
+  active?: string;
+  /**
+   * Added to the navigation tab element in case it's disabled.
+   */
+  disabled?: string;
+  /**
+   * Added to the navigation tab element in case it's hidden.
+   */
+  hidden?: string;
+  /**
+   * Added to the navigation tab element in case it's active.
+   */
+  label?: string;
+}
+
+interface TabProps extends ReactToolbox.Props {
+  /**
+   * If true, the current component is visible.
+   */
+  active?: boolean;
+  /**
+   * Additional class name to provide custom styling for the active tab.
+   */
+  activeClassName?: string;
+  /**
+   * If true, the current component is not clickable.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If true, the current component is not visible.
+   * @default false
+   */
+  hidden?: boolean;
+  /**
+   * Label text for navigation header. Required.
+   */
+  label: string;
+  /**
+   * Callback function that is fired when the tab is activated.
+   */
+  onActive?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: TabTheme;
+}
+
+export class Tab extends React.Component<TabProps, {}> { }
diff --git a/lib/tabs/index.js b/lib/tabs/index.js
new file mode 100644
index 000000000..0cec1dfe9
--- /dev/null
+++ b/lib/tabs/index.js
@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tabs = exports.Tab = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _Tabs = require('./Tabs.js');
+
+var _TabContent = require('./TabContent.js');
+
+var _Tab = require('./Tab.js');
+
+var _FontIcon = require('../font_icon/FontIcon.js');
+
+var _FontIcon2 = _interopRequireDefault(_FontIcon);
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var applyTheme = function applyTheme(Component) {
+  return (0, _reactCssThemr.themr)(_identifiers.TABS, _theme2.default)(Component);
+};
+var ThemedTabContent = applyTheme(_TabContent.TabContent);
+var ThemedTab = applyTheme(_Tab.Tab);
+var ThemedTabs = applyTheme((0, _Tabs.tabsFactory)(ThemedTab, ThemedTabContent, _FontIcon2.default));
+
+exports.Tab = ThemedTab;
+exports.Tabs = ThemedTabs;
\ No newline at end of file
diff --git a/lib/tabs/theme.scss b/lib/tabs/theme.scss
new file mode 100644
index 000000000..85ae18bec
--- /dev/null
+++ b/lib/tabs/theme.scss
@@ -0,0 +1,142 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+
+.tabs {
+  display: flex;
+  flex-direction: column;
+}
+
+.navigation {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  overflow-x: hidden;
+  box-shadow: inset 0 -1px $tab-navigation-border-color;
+}
+
+.navigationContainer {
+  display: flex;
+
+  .navigation {
+    flex: 1;
+  }
+}
+
+.arrow {
+  padding: 0 $tab-label-h-padding;
+  color: $tab-text-color;
+}
+
+.arrowContainer {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  box-shadow: inset 0 -1px $tab-navigation-border-color;
+}
+
+.label {
+  padding: $tab-label-v-padding $tab-label-h-padding;
+  font-size: $tab-text-height;
+  font-weight: $font-weight-semi-bold;
+  line-height: 1;
+  color: $tab-text-inactive-color;
+  text-align: center;
+  text-transform: uppercase;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transition-property: box-shadow, color;
+
+  &.active {
+    color: $tab-text-color;
+  }
+
+  &.disabled {
+    opacity: $tab-label-disabled-opacity;
+  }
+
+  &:not(.disabled) {
+    cursor: pointer;
+  }
+
+  &.hidden {
+    display: none;
+  }
+
+  &.withIcon {
+    padding-top: ($tab-label-v-padding - $tab-icon-margin-bottom / 2);
+    padding-bottom: ($tab-label-v-padding - $tab-icon-margin-bottom / 2);
+  }
+
+  &.withText {
+    .icon {
+      margin-bottom: $tab-icon-margin-bottom;
+    }
+  }
+}
+
+.icon {
+  display: block;
+  height: $tab-icon-height;
+  margin: 0 auto;
+  line-height: $tab-icon-height;
+}
+
+.pointer {
+  position: absolute;
+  width: 0;
+  height: $tab-pointer-height;
+  margin-top: - $tab-pointer-height;
+  background-color: $tab-pointer-color;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transition-property: left, width;
+
+  &.disableAnimation {
+    transition: none;
+  }
+}
+
+.tab {
+  display: flex;
+  flex-direction: column;
+  padding: $tab-label-v-padding $tab-label-h-padding;
+
+  &:not(.active) {
+    display: none;
+  }
+
+  &.active {
+    display: flex;
+  }
+}
+
+.fixed {
+  .label {
+    flex: 1;
+    text-align: center;
+  }
+}
+
+.inverse {
+  .navigation, .arrowContainer {
+    background-color: $tab-inverse-bar-color;
+  }
+
+  .label {
+    color: $tab-inverse-text-inactive-color;
+
+    &.active {
+      color: $tab-inverse-text-color;
+    }
+  }
+
+  .arrow {
+    color: $tab-inverse-text-color;
+  }
+
+  .pointer {
+    background-color: $tab-inverse-pointer-color;
+  }
+}
diff --git a/lib/time_picker/Clock.js b/lib/time_picker/Clock.js
new file mode 100644
index 000000000..8a3748ceb
--- /dev/null
+++ b/lib/time_picker/Clock.js
@@ -0,0 +1,181 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactAddonsCssTransitionGroup = require('react-addons-css-transition-group');
+
+var _reactAddonsCssTransitionGroup2 = _interopRequireDefault(_reactAddonsCssTransitionGroup);
+
+var _animations = require('../animations');
+
+var _time = require('../utils/time.js');
+
+var _time2 = _interopRequireDefault(_time);
+
+var _ClockHours = require('./ClockHours.js');
+
+var _ClockHours2 = _interopRequireDefault(_ClockHours);
+
+var _ClockMinutes = require('./ClockMinutes.js');
+
+var _ClockMinutes2 = _interopRequireDefault(_ClockMinutes);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var Clock = function (_Component) {
+  _inherits(Clock, _Component);
+
+  function Clock() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck(this, Clock);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Clock.__proto__ || Object.getPrototypeOf(Clock)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      center: { x: null, y: null },
+      radius: 0
+    }, _this.handleHourChange = function (hours) {
+      if (_this.props.time.getHours() !== hours) {
+        _this.props.onChange(_time2.default.setHours(_this.props.time, _this.adaptHourToFormat(hours)));
+      }
+    }, _this.handleMinuteChange = function (minutes) {
+      if (_this.props.time.getMinutes() !== minutes) {
+        _this.props.onChange(_time2.default.setMinutes(_this.props.time, minutes));
+      }
+    }, _this.handleCalculateShape = function () {
+      var _this$refs$placeholde = _this.refs.placeholder.getBoundingClientRect(),
+          top = _this$refs$placeholde.top,
+          left = _this$refs$placeholde.left,
+          width = _this$refs$placeholde.width;
+
+      _this.setState({
+        center: { x: left + width / 2 - window.pageXOffset, y: top + width / 2 - window.pageXOffset },
+        radius: width / 2
+      });
+    }, _temp), _possibleConstructorReturn(_this, _ret);
+  }
+
+  _createClass(Clock, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      window.addEventListener('resize', this.handleCalculateShape);
+      setTimeout(function () {
+        _this2.handleCalculateShape();
+      });
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      window.removeEventListener('resize', this.handleCalculateShape);
+    }
+  }, {
+    key: 'adaptHourToFormat',
+    value: function adaptHourToFormat(hour) {
+      if (this.props.format === 'ampm') {
+        if (_time2.default.getTimeMode(this.props.time) === 'pm') {
+          return hour < 12 ? hour + 12 : hour;
+        } else {
+          return hour === 12 ? 0 : hour;
+        }
+      } else {
+        return hour;
+      }
+    }
+  }, {
+    key: 'renderHours',
+    value: function renderHours() {
+      return _react2.default.createElement(_ClockHours2.default, {
+        center: this.state.center,
+        format: this.props.format,
+        onChange: this.handleHourChange,
+        radius: this.state.radius,
+        selected: this.props.time.getHours(),
+        spacing: this.state.radius * 0.18,
+        onHandMoved: this.props.onHandMoved,
+        theme: this.props.theme
+      });
+    }
+  }, {
+    key: 'renderMinutes',
+    value: function renderMinutes() {
+      return _react2.default.createElement(_ClockMinutes2.default, {
+        center: this.state.center,
+        onChange: this.handleMinuteChange,
+        radius: this.state.radius,
+        selected: this.props.time.getMinutes(),
+        spacing: this.state.radius * 0.18,
+        onHandMoved: this.props.onHandMoved,
+        theme: this.props.theme
+      });
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var theme = this.props.theme;
+
+      var animation = this.props.display === 'hours' ? _animations.ZoomOut : _animations.ZoomIn;
+      return _react2.default.createElement(
+        'div',
+        { 'data-react-toolbox': 'clock', className: theme.clock },
+        _react2.default.createElement(
+          'div',
+          { ref: 'placeholder', className: theme.placeholder, style: { height: this.state.radius * 2 } },
+          _react2.default.createElement(
+            _reactAddonsCssTransitionGroup2.default,
+            { transitionName: animation, transitionEnterTimeout: 500, transitionLeaveTimeout: 500 },
+            _react2.default.createElement(
+              'div',
+              { key: this.props.display, className: theme.clockWrapper, style: { height: this.state.radius * 2 } },
+              this.props.display === 'hours' ? this.renderHours() : null,
+              this.props.display === 'minutes' ? this.renderMinutes() : null
+            )
+          )
+        )
+      );
+    }
+  }]);
+
+  return Clock;
+}(_react.Component);
+
+Clock.propTypes = {
+  className: _react.PropTypes.string,
+  display: _react.PropTypes.oneOf(['hours', 'minutes']),
+  format: _react.PropTypes.oneOf(['24hr', 'ampm']),
+  onChange: _react.PropTypes.func,
+  onHandMoved: _react.PropTypes.func,
+  theme: _react.PropTypes.shape({
+    clock: _react.PropTypes.string,
+    clockWrapper: _react.PropTypes.string,
+    placeholder: _react.PropTypes.string
+  }),
+  time: _react.PropTypes.object
+};
+Clock.defaultProps = {
+  className: '',
+  display: 'hours',
+  format: '24hr',
+  time: new Date()
+};
+exports.default = Clock;
\ No newline at end of file
diff --git a/lib/time_picker/ClockFace.js b/lib/time_picker/ClockFace.js
new file mode 100644
index 000000000..eacf9ec05
--- /dev/null
+++ b/lib/time_picker/ClockFace.js
@@ -0,0 +1,122 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var Face = function (_Component) {
+  _inherits(Face, _Component);
+
+  function Face() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck(this, Face);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Face.__proto__ || Object.getPrototypeOf(Face)).call.apply(_ref, [this].concat(args))), _this), _this.renderNumber = function (number, idx) {
+      var _this$props = _this.props,
+          active = _this$props.active,
+          radius = _this$props.radius,
+          spacing = _this$props.spacing,
+          theme = _this$props.theme,
+          twoDigits = _this$props.twoDigits;
+
+      return _react2.default.createElement(
+        'span',
+        {
+          className: (0, _classnames3.default)(theme.number, _defineProperty({}, theme.active, number === active)),
+          style: _this.numberStyle(radius - spacing, idx + 1),
+          key: number
+        },
+        twoDigits ? ('0' + number).slice(-2) : number
+      );
+    }, _temp), _possibleConstructorReturn(_this, _ret);
+  }
+
+  _createClass(Face, [{
+    key: 'numberStyle',
+    value: function numberStyle(rad, num) {
+      return {
+        position: 'absolute',
+        left: rad + rad * Math.sin(360 * (Math.PI / 180) / 12 * (num - 1)) + this.props.spacing,
+        top: rad - rad * Math.cos(360 * (Math.PI / 180) / 12 * (num - 1)) + this.props.spacing
+      };
+    }
+  }, {
+    key: 'faceStyle',
+    value: function faceStyle() {
+      return {
+        height: this.props.radius * 2,
+        width: this.props.radius * 2
+      };
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          numbers = _props.numbers,
+          onTouchStart = _props.onTouchStart,
+          onMouseDown = _props.onMouseDown,
+          theme = _props.theme;
+
+      return _react2.default.createElement(
+        'div',
+        {
+          ref: 'root',
+          className: theme.face,
+          onTouchStart: onTouchStart,
+          onMouseDown: onMouseDown,
+          style: this.faceStyle()
+        },
+        numbers.map(this.renderNumber)
+      );
+    }
+  }]);
+
+  return Face;
+}(_react.Component);
+
+Face.propTypes = {
+  active: _react.PropTypes.number,
+  numbers: _react.PropTypes.array,
+  radius: _react.PropTypes.number,
+  spacing: _react.PropTypes.number,
+  theme: _react.PropTypes.shape({
+    active: _react.PropTypes.string,
+    face: _react.PropTypes.string,
+    number: _react.PropTypes.string
+  }),
+  twoDigits: _react.PropTypes.bool
+};
+Face.defaultProps = {
+  active: null,
+  numbers: [],
+  radius: 0,
+  twoDigits: false
+};
+exports.default = Face;
\ No newline at end of file
diff --git a/lib/time_picker/ClockHand.js b/lib/time_picker/ClockHand.js
new file mode 100644
index 000000000..d16bdaeab
--- /dev/null
+++ b/lib/time_picker/ClockHand.js
@@ -0,0 +1,175 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _events = require('../utils/events.js');
+
+var _events2 = _interopRequireDefault(_events);
+
+var _prefixer = require('../utils/prefixer.js');
+
+var _prefixer2 = _interopRequireDefault(_prefixer);
+
+var _utils = require('../utils/utils.js');
+
+var _utils2 = _interopRequireDefault(_utils);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var Hand = function (_Component) {
+  _inherits(Hand, _Component);
+
+  function Hand() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck(this, Hand);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Hand.__proto__ || Object.getPrototypeOf(Hand)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      knobWidth: 0
+    }, _this.handleMouseMove = function (event) {
+      _this.move(_events2.default.getMousePosition(event));
+    }, _this.handleTouchMove = function (event) {
+      _this.move(_events2.default.getTouchPosition(event));
+    }, _this.handleMouseUp = function () {
+      _this.end(_this.getMouseEventMap());
+    }, _this.handleTouchEnd = function () {
+      _this.end(_this.getTouchEventMap());
+    }, _temp), _possibleConstructorReturn(_this, _ret);
+  }
+
+  _createClass(Hand, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      setTimeout(function () {
+        _this2.setState({ knobWidth: _this2.refs.knob.offsetWidth });
+      });
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      _events2.default.removeEventsFromDocument(this.getMouseEventMap());
+      _events2.default.removeEventsFromDocument(this.getTouchEventMap());
+    }
+  }, {
+    key: 'getMouseEventMap',
+    value: function getMouseEventMap() {
+      return {
+        mousemove: this.handleMouseMove,
+        mouseup: this.handleMouseUp
+      };
+    }
+  }, {
+    key: 'getTouchEventMap',
+    value: function getTouchEventMap() {
+      return {
+        touchmove: this.handleTouchMove,
+        touchend: this.handleTouchEnd
+      };
+    }
+  }, {
+    key: 'mouseStart',
+    value: function mouseStart(event) {
+      _events2.default.addEventsToDocument(this.getMouseEventMap());
+      this.move(_events2.default.getMousePosition(event));
+    }
+  }, {
+    key: 'touchStart',
+    value: function touchStart(event) {
+      _events2.default.addEventsToDocument(this.getTouchEventMap());
+      this.move(_events2.default.getTouchPosition(event));
+      _events2.default.pauseEvent(event);
+    }
+  }, {
+    key: 'getPositionRadius',
+    value: function getPositionRadius(position) {
+      var x = this.props.origin.x - position.x;
+      var y = this.props.origin.y - position.y;
+      return Math.sqrt(x * x + y * y);
+    }
+  }, {
+    key: 'trimAngleToValue',
+    value: function trimAngleToValue(angle) {
+      return this.props.step * Math.round(angle / this.props.step);
+    }
+  }, {
+    key: 'positionToAngle',
+    value: function positionToAngle(position) {
+      return _utils2.default.angle360FromPositions(this.props.origin.x, this.props.origin.y, position.x, position.y);
+    }
+  }, {
+    key: 'end',
+    value: function end(evts) {
+      if (this.props.onMoved) this.props.onMoved();
+      _events2.default.removeEventsFromDocument(evts);
+    }
+  }, {
+    key: 'move',
+    value: function move(position) {
+      var degrees = this.trimAngleToValue(this.positionToAngle(position));
+      var radius = this.getPositionRadius(position);
+      if (this.props.onMove) this.props.onMove(degrees === 360 ? 0 : degrees, radius);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var theme = this.props.theme;
+
+      var className = theme.hand + ' ' + this.props.className;
+      var handStyle = (0, _prefixer2.default)({
+        height: this.props.length - this.state.knobWidth / 2,
+        transform: 'rotate(' + this.props.angle + 'deg)'
+      });
+
+      return _react2.default.createElement(
+        'div',
+        { className: className, style: handStyle },
+        _react2.default.createElement('div', { ref: 'knob', className: theme.knob })
+      );
+    }
+  }]);
+
+  return Hand;
+}(_react.Component);
+
+Hand.propTypes = {
+  angle: _react.PropTypes.number,
+  className: _react.PropTypes.string,
+  length: _react.PropTypes.number,
+  onMove: _react.PropTypes.func,
+  onMoved: _react.PropTypes.func,
+  origin: _react.PropTypes.object,
+  step: _react.PropTypes.number,
+  theme: _react.PropTypes.shape({
+    hand: _react.PropTypes.string,
+    knob: _react.PropTypes.string
+  })
+};
+Hand.defaultProps = {
+  className: '',
+  angle: 0,
+  length: 0,
+  origin: {}
+};
+exports.default = Hand;
\ No newline at end of file
diff --git a/lib/time_picker/ClockHours.js b/lib/time_picker/ClockHours.js
new file mode 100644
index 000000000..365c27724
--- /dev/null
+++ b/lib/time_picker/ClockHours.js
@@ -0,0 +1,149 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _utils = require('../utils/utils.js');
+
+var _utils2 = _interopRequireDefault(_utils);
+
+var _ClockHand = require('./ClockHand.js');
+
+var _ClockHand2 = _interopRequireDefault(_ClockHand);
+
+var _ClockFace = require('./ClockFace.js');
+
+var _ClockFace2 = _interopRequireDefault(_ClockFace);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+var outerNumbers = [0].concat(_toConsumableArray(_utils2.default.range(13, 24)));
+var innerNumbers = [12].concat(_toConsumableArray(_utils2.default.range(1, 12)));
+var innerSpacing = 1.7;
+var step = 360 / 12;
+
+var Hours = function (_Component) {
+  _inherits(Hours, _Component);
+
+  function Hours() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck(this, Hours);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Hours.__proto__ || Object.getPrototypeOf(Hours)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      inner: _this.props.format === '24hr' && _this.props.selected > 0 && _this.props.selected <= 12
+    }, _this.handleHandMove = function (degrees, radius) {
+      var currentInner = radius < _this.props.radius - _this.props.spacing * innerSpacing;
+      if (_this.props.format === '24hr' && _this.state.inner !== currentInner) {
+        _this.setState({ inner: currentInner }, function () {
+          _this.props.onChange(_this.valueFromDegrees(degrees));
+        });
+      } else {
+        _this.props.onChange(_this.valueFromDegrees(degrees));
+      }
+    }, _this.handleMouseDown = function (event) {
+      _this.refs.hand.mouseStart(event);
+    }, _this.handleTouchStart = function (event) {
+      _this.refs.hand.touchStart(event);
+    }, _temp), _possibleConstructorReturn(_this, _ret);
+  }
+
+  _createClass(Hours, [{
+    key: 'valueFromDegrees',
+    value: function valueFromDegrees(degrees) {
+      if (this.props.format === 'ampm' || this.props.format === '24hr' && this.state.inner) {
+        return innerNumbers[degrees / step];
+      } else {
+        return outerNumbers[degrees / step];
+      }
+    }
+  }, {
+    key: 'renderInnerFace',
+    value: function renderInnerFace(innerRadius) {
+      if (this.props.format === '24hr') {
+        return _react2.default.createElement(_ClockFace2.default, {
+          onTouchStart: this.handleTouchStart,
+          onMouseDown: this.handleMouseDown,
+          numbers: innerNumbers,
+          spacing: this.props.spacing,
+          radius: innerRadius,
+          theme: this.props.theme,
+          active: this.props.selected
+        });
+      }
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          format = _props.format,
+          selected = _props.selected,
+          radius = _props.radius,
+          spacing = _props.spacing,
+          center = _props.center,
+          onHandMoved = _props.onHandMoved;
+
+      var is24hr = format === '24hr';
+
+      return _react2.default.createElement(
+        'div',
+        null,
+        _react2.default.createElement(_ClockFace2.default, {
+          onTouchStart: this.handleTouchStart,
+          onMouseDown: this.handleMouseDown,
+          numbers: is24hr ? outerNumbers : innerNumbers,
+          spacing: spacing,
+          radius: radius,
+          twoDigits: is24hr,
+          active: is24hr ? selected : selected % 12 || 12,
+          theme: this.props.theme
+        }),
+        this.renderInnerFace(radius - spacing * innerSpacing),
+        _react2.default.createElement(_ClockHand2.default, { ref: 'hand',
+          angle: selected * step,
+          length: (this.state.inner ? radius - spacing * innerSpacing : radius) - spacing,
+          onMove: this.handleHandMove,
+          theme: this.props.theme,
+          onMoved: onHandMoved,
+          origin: center,
+          step: step
+        })
+      );
+    }
+  }]);
+
+  return Hours;
+}(_react.Component);
+
+Hours.propTypes = {
+  center: _react.PropTypes.object,
+  format: _react.PropTypes.oneOf(['24hr', 'ampm']),
+  onChange: _react.PropTypes.func,
+  onHandMoved: _react.PropTypes.func,
+  radius: _react.PropTypes.number,
+  selected: _react.PropTypes.number,
+  spacing: _react.PropTypes.number,
+  theme: _react.PropTypes.object
+};
+exports.default = Hours;
\ No newline at end of file
diff --git a/lib/time_picker/ClockMinutes.js b/lib/time_picker/ClockMinutes.js
new file mode 100644
index 000000000..0b21e74a5
--- /dev/null
+++ b/lib/time_picker/ClockMinutes.js
@@ -0,0 +1,105 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _utils = require('../utils/utils.js');
+
+var _utils2 = _interopRequireDefault(_utils);
+
+var _ClockHand = require('./ClockHand.js');
+
+var _ClockHand2 = _interopRequireDefault(_ClockHand);
+
+var _ClockFace = require('./ClockFace.js');
+
+var _ClockFace2 = _interopRequireDefault(_ClockFace);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var minutes = _utils2.default.range(0, 60, 5);
+var step = 360 / 60;
+
+var Minutes = function (_Component) {
+  _inherits(Minutes, _Component);
+
+  function Minutes() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck(this, Minutes);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Minutes.__proto__ || Object.getPrototypeOf(Minutes)).call.apply(_ref, [this].concat(args))), _this), _this.handleHandMove = function (degrees) {
+      _this.props.onChange(degrees / step);
+    }, _this.handleMouseDown = function (event) {
+      _this.refs.hand.mouseStart(event);
+    }, _this.handleTouchStart = function (event) {
+      _this.refs.hand.touchStart(event);
+    }, _temp), _possibleConstructorReturn(_this, _ret);
+  }
+
+  _createClass(Minutes, [{
+    key: 'render',
+    value: function render() {
+      return _react2.default.createElement(
+        'div',
+        null,
+        _react2.default.createElement(_ClockFace2.default, {
+          onTouchStart: this.handleTouchStart,
+          onMouseDown: this.handleMouseDown,
+          numbers: minutes,
+          spacing: this.props.spacing,
+          radius: this.props.radius,
+          active: this.props.selected,
+          theme: this.props.theme,
+          twoDigits: true
+        }),
+        _react2.default.createElement(_ClockHand2.default, { ref: 'hand',
+          className: minutes.indexOf(this.props.selected) === -1 ? this.props.theme.small : '',
+          angle: this.props.selected * step,
+          length: this.props.radius - this.props.spacing,
+          onMove: this.handleHandMove,
+          origin: this.props.center,
+          theme: this.props.theme,
+          step: step
+        })
+      );
+    }
+  }]);
+
+  return Minutes;
+}(_react.Component);
+
+Minutes.propTypes = {
+  center: _react.PropTypes.object,
+  onChange: _react.PropTypes.func,
+  radius: _react.PropTypes.number,
+  selected: _react.PropTypes.number,
+  spacing: _react.PropTypes.number,
+  theme: _react.PropTypes.shape({
+    small: _react.PropTypes.string
+  })
+};
+Minutes.defaultProps = {
+  selected: 0,
+  onChange: null
+};
+exports.default = Minutes;
\ No newline at end of file
diff --git a/lib/time_picker/TimePicker.js b/lib/time_picker/TimePicker.js
new file mode 100644
index 000000000..b71e6d9ea
--- /dev/null
+++ b/lib/time_picker/TimePicker.js
@@ -0,0 +1,196 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TimePicker = exports.timePickerFactory = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _events = require('../utils/events.js');
+
+var _events2 = _interopRequireDefault(_events);
+
+var _time = require('../utils/time.js');
+
+var _time2 = _interopRequireDefault(_time);
+
+var _Dialog = require('../dialog/Dialog.js');
+
+var _Dialog2 = _interopRequireDefault(_Dialog);
+
+var _Input = require('../input/Input.js');
+
+var _Input2 = _interopRequireDefault(_Input);
+
+var _TimePickerDialog = require('./TimePickerDialog.js');
+
+var _TimePickerDialog2 = _interopRequireDefault(_TimePickerDialog);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(TimePickerDialog, Input) {
+  var TimePicker = function (_Component) {
+    _inherits(TimePicker, _Component);
+
+    function TimePicker() {
+      var _ref;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, TimePicker);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TimePicker.__proto__ || Object.getPrototypeOf(TimePicker)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+        active: _this.props.active
+      }, _this.handleDismiss = function () {
+        _this.setState({ active: false });
+        if (_this.props.onDismiss) {
+          _this.props.onDismiss();
+        }
+      }, _this.handleInputFocus = function (event) {
+        _events2.default.pauseEvent(event);
+        _this.setState({ active: true });
+      }, _this.handleInputBlur = function (event) {
+        _events2.default.pauseEvent(event);
+        _this.setState({ active: false });
+      }, _this.handleInputClick = function (event) {
+        _events2.default.pauseEvent(event);
+        _this.setState({ active: true });
+        if (_this.props.onClick) _this.props.onClick(event);
+      }, _this.handleInputKeyPress = function (event) {
+        if (event.charCode === 13) {
+          _events2.default.pauseEvent(event);
+          _this.setState({ active: true });
+        }
+        if (_this.props.onKeyPress) _this.props.onKeyPress(event);
+      }, _this.handleSelect = function (value, event) {
+        if (_this.props.onChange) _this.props.onChange(value, event);
+        _this.setState({ active: false });
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(TimePicker, [{
+      key: 'componentWillReceiveProps',
+      value: function componentWillReceiveProps(nextProps) {
+        if (nextProps.active !== this.props.active && this.state.active !== nextProps.active) {
+          this.setState({ active: nextProps.active });
+        }
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _props = this.props,
+            active = _props.active,
+            onDismiss = _props.onDismiss,
+            cancelLabel = _props.cancelLabel,
+            format = _props.format,
+            inputClassName = _props.inputClassName,
+            okLabel = _props.okLabel,
+            onEscKeyDown = _props.onEscKeyDown,
+            onOverlayClick = _props.onOverlayClick,
+            readonly = _props.readonly,
+            value = _props.value,
+            others = _objectWithoutProperties(_props, ['active', 'onDismiss', 'cancelLabel', 'format', 'inputClassName', 'okLabel', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'value']);
+
+        var formattedTime = value ? _time2.default.formatTime(value, format) : '';
+        return _react2.default.createElement(
+          'div',
+          { 'data-react-toolbox': 'time-picker' },
+          _react2.default.createElement(Input, _extends({}, others, {
+            className: (0, _classnames3.default)(this.props.theme.input, _defineProperty({}, inputClassName, inputClassName)),
+            disabled: readonly,
+            error: this.props.error,
+            label: this.props.label,
+            name: this.props.name,
+            onKeyPress: this.handleInputKeyPress,
+            onClick: this.handleInputClick,
+            readOnly: true,
+            type: 'text',
+            value: formattedTime
+          })),
+          _react2.default.createElement(TimePickerDialog, {
+            active: this.state.active,
+            cancelLabel: cancelLabel,
+            className: this.props.className,
+            format: format,
+            name: this.props.name,
+            okLabel: okLabel,
+            onDismiss: this.handleDismiss,
+            onEscKeyDown: onEscKeyDown,
+            onOverlayClick: onOverlayClick,
+            onSelect: this.handleSelect,
+            theme: this.props.theme,
+            value: this.props.value
+          })
+        );
+      }
+    }]);
+
+    return TimePicker;
+  }(_react.Component);
+
+  TimePicker.propTypes = {
+    active: _react.PropTypes.bool,
+    cancelLabel: _react.PropTypes.string,
+    className: _react.PropTypes.string,
+    error: _react.PropTypes.string,
+    format: _react.PropTypes.oneOf(['24hr', 'ampm']),
+    inputClassName: _react.PropTypes.string,
+    label: _react.PropTypes.string,
+    name: _react.PropTypes.string,
+    okLabel: _react.PropTypes.string,
+    onChange: _react.PropTypes.func,
+    onClick: _react.PropTypes.func,
+    onDismiss: _react.PropTypes.func,
+    onEscKeyDown: _react.PropTypes.func,
+    onKeyPress: _react.PropTypes.func,
+    onOverlayClick: _react.PropTypes.func,
+    readonly: _react.PropTypes.bool,
+    theme: _react.PropTypes.shape({
+      input: _react.PropTypes.string
+    }),
+    value: _react.PropTypes.object
+  };
+  TimePicker.defaultProps = {
+    active: false,
+    className: '',
+    format: '24hr'
+  };
+
+
+  return TimePicker;
+};
+
+var TimePickerDialog = (0, _TimePickerDialog2.default)(_Dialog2.default);
+var TimePicker = factory(TimePickerDialog, _Input2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.TIME_PICKER)(TimePicker);
+exports.timePickerFactory = factory;
+exports.TimePicker = TimePicker;
\ No newline at end of file
diff --git a/lib/time_picker/TimePickerDialog.js b/lib/time_picker/TimePickerDialog.js
new file mode 100644
index 000000000..5ff0ca659
--- /dev/null
+++ b/lib/time_picker/TimePickerDialog.js
@@ -0,0 +1,202 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _time = require('../utils/time.js');
+
+var _time2 = _interopRequireDefault(_time);
+
+var _Clock = require('./Clock.js');
+
+var _Clock2 = _interopRequireDefault(_Clock);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(Dialog) {
+  var TimePickerDialog = function (_Component) {
+    _inherits(TimePickerDialog, _Component);
+
+    function TimePickerDialog() {
+      var _ref;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, TimePickerDialog);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TimePickerDialog.__proto__ || Object.getPrototypeOf(TimePickerDialog)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+        display: 'hours',
+        displayTime: new Date(_this.props.value.getTime())
+      }, _this.handleClockChange = function (value) {
+        _this.setState({ displayTime: value });
+      }, _this.handleSelect = function (event) {
+        _this.props.onSelect(_this.state.displayTime, event);
+      }, _this.toggleTimeMode = function () {
+        _this.setState({ displayTime: _time2.default.toggleTimeMode(_this.state.displayTime) });
+      }, _this.handleHandMoved = function () {
+        if (_this.state.display === 'hours') _this.setState({ display: 'minutes' });
+      }, _this.switchDisplay = function (event) {
+        _this.setState({ display: event.target.id });
+      }, _this.actions = [{ label: _this.props.cancelLabel, className: _this.props.theme.button, onClick: _this.props.onDismiss }, { label: _this.props.okLabel, className: _this.props.theme.button, name: _this.props.name, onClick: _this.handleSelect }], _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(TimePickerDialog, [{
+      key: 'componentWillUpdate',
+      value: function componentWillUpdate(nextProps) {
+        if (nextProps.value.getTime() !== this.state.displayTime.getTime()) {
+          this.setState({ displayTime: new Date(nextProps.value.getTime()) });
+        }
+      }
+    }, {
+      key: 'componentDidUpdate',
+      value: function componentDidUpdate(prevProps) {
+        if (!prevProps.active && this.props.active) {
+          setTimeout(this.refs.clock.handleCalculateShape, 1000);
+        }
+      }
+    }, {
+      key: 'formatHours',
+      value: function formatHours() {
+        if (this.props.format === 'ampm') {
+          return this.state.displayTime.getHours() % 12 || 12;
+        } else {
+          return this.state.displayTime.getHours();
+        }
+      }
+    }, {
+      key: 'renderAMPMLabels',
+      value: function renderAMPMLabels() {
+        var theme = this.props.theme;
+
+        if (this.props.format === 'ampm') {
+          return _react2.default.createElement(
+            'div',
+            { className: theme.ampm },
+            _react2.default.createElement(
+              'span',
+              { className: theme.am, onClick: this.toggleTimeMode },
+              'AM'
+            ),
+            _react2.default.createElement(
+              'span',
+              { className: theme.pm, onClick: this.toggleTimeMode },
+              'PM'
+            )
+          );
+        }
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var theme = this.props.theme;
+
+        var display = this.state.display + 'Display';
+        var format = _time2.default.getTimeMode(this.state.displayTime) + 'Format';
+        var className = (0, _classnames2.default)([theme.dialog, theme[display], theme[format]], this.props.className);
+        return _react2.default.createElement(
+          Dialog,
+          {
+            actions: this.actions,
+            active: this.props.active,
+            className: className,
+            onEscKeyDown: this.props.onEscKeyDown,
+            onOverlayClick: this.props.onOverlayClick
+          },
+          _react2.default.createElement(
+            'header',
+            { className: theme.header },
+            _react2.default.createElement(
+              'span',
+              { id: 'hours', className: theme.hours, onClick: this.switchDisplay },
+              ('0' + this.formatHours()).slice(-2)
+            ),
+            _react2.default.createElement(
+              'span',
+              { className: theme.separator },
+              ':'
+            ),
+            _react2.default.createElement(
+              'span',
+              { id: 'minutes', className: theme.minutes, onClick: this.switchDisplay },
+              ('0' + this.state.displayTime.getMinutes()).slice(-2)
+            ),
+            this.renderAMPMLabels()
+          ),
+          _react2.default.createElement(_Clock2.default, {
+            ref: 'clock',
+            display: this.state.display,
+            format: this.props.format,
+            onChange: this.handleClockChange,
+            onHandMoved: this.handleHandMoved,
+            theme: this.props.theme,
+            time: this.state.displayTime
+          })
+        );
+      }
+    }]);
+
+    return TimePickerDialog;
+  }(_react.Component);
+
+  TimePickerDialog.propTypes = {
+    active: _react.PropTypes.bool,
+    cancelLabel: _react.PropTypes.string,
+    className: _react.PropTypes.string,
+    format: _react.PropTypes.oneOf(['24hr', 'ampm']),
+    name: _react.PropTypes.string,
+    okLabel: _react.PropTypes.string,
+    onDismiss: _react.PropTypes.func,
+    onEscKeyDown: _react.PropTypes.func,
+    onOverlayClick: _react.PropTypes.func,
+    onSelect: _react.PropTypes.func,
+    theme: _react.PropTypes.shape({
+      am: _react.PropTypes.string,
+      amFormat: _react.PropTypes.string,
+      ampm: _react.PropTypes.string,
+      button: _react.PropTypes.string,
+      dialog: _react.PropTypes.string,
+      header: _react.PropTypes.string,
+      hours: _react.PropTypes.string,
+      hoursDisplay: _react.PropTypes.string,
+      minutes: _react.PropTypes.string,
+      minutesDisplay: _react.PropTypes.string,
+      pm: _react.PropTypes.string,
+      pmFormat: _react.PropTypes.string,
+      separator: _react.PropTypes.string
+    }),
+    value: _react.PropTypes.object
+  };
+  TimePickerDialog.defaultProps = {
+    active: false,
+    cancelLabel: 'Cancel',
+    format: '24hr',
+    okLabel: 'Ok',
+    value: new Date()
+  };
+
+
+  return TimePickerDialog;
+};
+
+exports.default = factory;
\ No newline at end of file
diff --git a/lib/time_picker/_config.scss b/lib/time_picker/_config.scss
new file mode 100644
index 000000000..51fbd509b
--- /dev/null
+++ b/lib/time_picker/_config.scss
@@ -0,0 +1,27 @@
+$timepicker-header-font-size: 5.2 * $unit !default;
+$timepicker-header-padding: $unit !default;
+$timepicker-ampm-font-size: 1.6 * $unit !default;
+$timepicker-primary: $color-primary !default;
+$timepicker-primary-contrast: $color-primary-contrast !default;
+$timepicker-primary-dark: $color-primary-dark !default;
+$timepicker-primary-color: $timepicker-primary !default;
+$timepicker-primary-hover-color: rgba($timepicker-primary, .2) !default;
+$timepicker-primary-contrast-color: $timepicker-primary-contrast !default;
+$timepicker-primary-dark-color: $timepicker-primary-dark !default;
+$timepicker-ampm-height: 2.2 * $unit !default;
+$timepicker-ampm-width: 4 * $unit !default;
+$timepicker-dialog-width: 30 * $unit !default;
+
+$clock-padding: 1.5 * $unit 2 * $unit !default;
+$clock-primary: $color-primary !default;
+$clock-primary-contrast: $color-primary-contrast !default;
+$clock-primary-dark: $color-primary-dark !default;
+$clock-primary-color: $clock-primary !default;
+$clock-primary-hover-color: rgba($clock-primary, .2) !default;
+$clock-primary-contrast-color: $clock-primary-contrast !default;
+$clock-primary-dark-color: $clock-primary-dark !default;
+$clock-number-size: 2 * $unit !default;
+$clock-hand-width: .4 * $unit !default;
+$clock-hand-dot-size: 1 * $unit !default;
+$clock-knob-size: 3.4 * $unit !default;
+$clock-knob-small-size: 1.2 * $unit !default;
diff --git a/lib/time_picker/index.d.ts b/lib/time_picker/index.d.ts
new file mode 100644
index 000000000..63f6237e3
--- /dev/null
+++ b/lib/time_picker/index.d.ts
@@ -0,0 +1,137 @@
+import * as React from "react";
+import ReactToolbox from "../index";
+
+export interface TimePickerTheme {
+  /**
+   * Added to the number which is active in clock face.
+   */
+  active?: string;
+  /**
+   * AM label in dialog header when mode is AM/PM.
+   */
+  am?: string;
+  /**
+   * Added to the dialog when the selected format is AM.
+   */
+  amFormat?: string;
+  /**
+   * Wrapper for AM and PM labels in header when mode is AM/PM.
+   */
+  ampm?: string;
+  /**
+   * Used for buttons inside the dialog of the picker.
+   */
+  button?: string;
+  /**
+   * Clock root class element.
+   */
+  clock?: string;
+  /**
+   * Wrapper for the proper positioning of the clock.
+   */
+  clockWrapper?: string;
+  /**
+   * Used for the dialog component.
+   */
+  dialog?: string;
+  /**
+   * Used to style the clock face.
+   */
+  face?: string;
+  /**
+   * Used for the clock's hand.
+   */
+  hand?: string;
+  /**
+   * Dialog header wrapper class.
+   */
+  header?: string;
+  /**
+   * Used for hours in dialog header.
+   */
+  hours?: string;
+  /**
+   * Added to the dialog hours are displayed.
+   */
+  hoursDisplay?: string;
+  /**
+   * Used for Input element that opens the picker.
+   */
+  input?: string;
+  /**
+   * Used for the knob of the hand.
+   */
+  knob?: string;
+  /**
+   * Used for minutes in dialog header.
+   */
+  minutes?: string;
+  /**
+   * Added to the dialog minutes are displayed.
+   */
+  minutesDisplay?: string;
+  /**
+   * Each of the numbers in the clock's face.
+   */
+  number?: string;
+  /**
+   * Placeholder for the clock inside the dialog (inner wrapper).
+   */
+  placeholder?: string;
+  /**
+   * PM label in dialog header when mode is AM/PM.
+   */
+  pm?: string;
+  /**
+   * Added to the dialog when the selected format is PM.
+   */
+  pmFormat?: string;
+  /**
+   * Is the : separator between hours and minutes in dialog header.
+   */
+  separator?: string;
+  /**
+   * Added to the knob when no round number is selected.
+   */
+  small?: string;
+}
+
+interface TimePickerProps {
+  /**
+   * Provide error text which will be displayed under the field.
+   */
+  error?: string;
+  /**
+   * A key to identify an Icon from Material Design Icons or a custom Icon Element.
+   */
+  icon?: React.ReactNode | string;
+  /**
+   * This class will be applied to Input component of TimePicker.
+   */
+  inputClassName?: string;
+  /**
+   * Format to display the clock. It can be 24hr or ampm.
+   * @default false
+   */
+  format?: "24hr" | "ampm";
+  /**
+   * The text string to use for the floating label element in the input component.
+   */
+  label?: string;
+  /**
+   * Callback called when the picker value is changed.
+   */
+  onChange?: Function;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: TimePickerTheme;
+  /**
+   * Datetime object with currrently selected time.
+   */
+  value?: Date;
+}
+
+export class TimePicker extends React.Component<TimePickerProps, {}> { }
+
+export default TimePicker;
diff --git a/lib/time_picker/index.js b/lib/time_picker/index.js
new file mode 100644
index 000000000..8753ebd3e
--- /dev/null
+++ b/lib/time_picker/index.js
@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TimePicker = undefined;
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _TimePicker = require('./TimePicker.js');
+
+var _TimePickerDialog = require('./TimePickerDialog.js');
+
+var _TimePickerDialog2 = _interopRequireDefault(_TimePickerDialog);
+
+var _dialog = require('../dialog');
+
+var _dialog2 = _interopRequireDefault(_dialog);
+
+var _input = require('../input');
+
+var _input2 = _interopRequireDefault(_input);
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var TimePickerDialog = (0, _TimePickerDialog2.default)(_dialog2.default);
+var ThemedTimePicker = (0, _reactCssThemr.themr)(_identifiers.TIME_PICKER, _theme2.default)((0, _TimePicker.timePickerFactory)(TimePickerDialog, _input2.default));
+exports.default = ThemedTimePicker;
+exports.TimePicker = ThemedTimePicker;
\ No newline at end of file
diff --git a/lib/time_picker/theme.scss b/lib/time_picker/theme.scss
new file mode 100644
index 000000000..328cdc43e
--- /dev/null
+++ b/lib/time_picker/theme.scss
@@ -0,0 +1,168 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+
+.input:not(.disabled) > .inputElement {
+  cursor: pointer;
+}
+
+.header {
+  position: relative;
+  width: 100%;
+  padding: $timepicker-header-padding;
+  font-size: $timepicker-header-font-size;
+  color: $timepicker-primary-contrast-color;
+  text-align: center;
+  background: $timepicker-primary-color;
+}
+
+.hours, .minutes {
+  display: inline-block;
+  cursor: pointer;
+  opacity: .6;
+}
+
+.separator {
+  margin: 0 $timepicker-header-padding / 2;
+  opacity: .6;
+}
+
+.ampm {
+  position: absolute;
+  top: 50%;
+  right: 2 * $unit;
+  width: $timepicker-ampm-width;
+  height: $timepicker-ampm-height * 2;
+  margin-top: - $timepicker-ampm-height;
+  font-size: $timepicker-ampm-font-size;
+  line-height: $timepicker-ampm-height;
+  text-align: center;
+}
+
+.am, .pm {
+  display: block;
+  cursor: pointer;
+  opacity: .6;
+}
+
+.dialog {
+  width: $timepicker-dialog-width;
+  > [role="body"] {
+    padding: 0;
+    overflow-y: visible;
+  }
+  > [role="navigation"] > .button {
+    color: $timepicker-primary-color;
+    &:hover {
+      background: $timepicker-primary-hover-color;
+    }
+    &:focus:not(:active) {
+      background: $timepicker-primary-hover-color;
+    }
+  }
+  &.hoursDisplay .hours, &.minutesDisplay .minutes, &.amFormat .am,
+  &.pmFormat .pm {
+    opacity: 1;
+  }
+}
+
+.clock {
+  padding: $clock-padding;
+}
+
+.placeholder {
+  position: relative;
+  z-index: $z-index-high;
+}
+
+.clockWrapper {
+  position: absolute;
+  width: 100%;
+  background-color: $color-divider;
+  border-radius: 50%;
+}
+
+.face {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: $z-index-high;
+  cursor: pointer;
+  border-radius: 50%;
+  transform: translateX(-50%) translateY(-50%);
+}
+
+.number {
+  position: relative;
+  width: $clock-number-size;
+  height: $clock-number-size;
+  margin-top: - $clock-number-size / 2;
+  margin-left: - $clock-number-size / 2;
+  text-align: center;
+  pointer-events: none;
+  user-select: none;
+  &.active {
+    color: $clock-primary-contrast-color;
+  }
+}
+
+.hand {
+  position: absolute;
+  bottom: 50%;
+  left: 50%;
+  display: block;
+  width: $clock-hand-width;
+  margin-left: - $clock-hand-width / 2;
+  background-color: $clock-primary-color;
+  transform-origin: 50% 100%;
+  &:before {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    width: $clock-hand-dot-size;
+    height: $clock-hand-dot-size;
+    margin-bottom: - $clock-hand-dot-size / 2;
+    margin-left: - $clock-hand-dot-size / 2;
+    content: "";
+    background-color: $clock-primary-color;
+    border-radius: 50%;
+  }
+  &.small > .knob {
+    background-color: $clock-primary-hover-color;
+    &:after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: $clock-knob-small-size;
+      height: $clock-knob-small-size;
+      margin-top: - $clock-knob-small-size / 2;
+      margin-left: - $clock-knob-small-size / 2;
+      content: "";
+      background: $clock-primary-color;
+      border-radius: 50%;
+    }
+    &:before {
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      width: $clock-hand-width;
+      height: $clock-knob-size - $clock-knob-small-size;
+      margin-left: - $clock-hand-width / 2;
+      content: "";
+      background: $clock-primary-color;
+    }
+  }
+}
+
+.knob {
+  position: absolute;
+  top: - $clock-knob-size;
+  left: 50%;
+  width: $clock-knob-size;
+  height: $clock-knob-size;
+  margin-left: - $clock-knob-size / 2;
+  cursor: pointer;
+  background-color: $clock-primary-color;
+  border-radius: 50%;
+}
diff --git a/lib/tooltip/Tooltip.js b/lib/tooltip/Tooltip.js
new file mode 100644
index 000000000..2890a4488
--- /dev/null
+++ b/lib/tooltip/Tooltip.js
@@ -0,0 +1,293 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _Portal = require('../hoc/Portal');
+
+var _Portal2 = _interopRequireDefault(_Portal);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _events = require('../utils/events');
+
+var _events2 = _interopRequireDefault(_events);
+
+var _utils = require('../utils/utils');
+
+var _utils2 = _interopRequireDefault(_utils);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var POSITION = {
+  BOTTOM: 'bottom',
+  HORIZONTAL: 'horizontal',
+  LEFT: 'left',
+  RIGHT: 'right',
+  TOP: 'top',
+  VERTICAL: 'vertical'
+};
+
+var defaults = {
+  className: '',
+  delay: 0,
+  hideOnClick: true,
+  position: POSITION.VERTICAL,
+  theme: {}
+};
+
+var tooltipFactory = function tooltipFactory() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  var _defaults$options = _extends({}, defaults, options),
+      defaultClassName = _defaults$options.className,
+      defaultDelay = _defaults$options.delay,
+      defaultHideOnClick = _defaults$options.hideOnClick,
+      defaultPosition = _defaults$options.position,
+      defaultTheme = _defaults$options.theme;
+
+  return function (ComposedComponent) {
+    var TooltippedComponent = function (_Component) {
+      _inherits(TooltippedComponent, _Component);
+
+      function TooltippedComponent() {
+        var _ref;
+
+        var _temp, _this, _ret;
+
+        _classCallCheck(this, TooltippedComponent);
+
+        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TooltippedComponent.__proto__ || Object.getPrototypeOf(TooltippedComponent)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+          active: false,
+          position: _this.props.tooltipPosition,
+          visible: false
+        }, _this.onTransformEnd = function (e) {
+          if (e.propertyName === 'transform') {
+            _events2.default.removeEventListenerOnTransitionEnded(_this.refs.tooltip, _this.onTransformEnd);
+            _this.setState({ visible: false });
+          }
+        }, _this.handleMouseEnter = function (event) {
+          _this.activate(_this.calculatePosition(event.target));
+          if (_this.props.onMouseEnter) _this.props.onMouseEnter(event);
+        }, _this.handleMouseLeave = function (event) {
+          _this.deactivate();
+          if (_this.props.onMouseLeave) _this.props.onMouseLeave(event);
+        }, _this.handleClick = function (event) {
+          if (_this.props.tooltipHideOnClick) _this.deactivate();
+          if (_this.props.onClick) _this.props.onClick(event);
+        }, _temp), _possibleConstructorReturn(_this, _ret);
+      }
+
+      _createClass(TooltippedComponent, [{
+        key: 'componentWillUnmount',
+        value: function componentWillUnmount() {
+          if (this.refs.tooltip) {
+            _events2.default.removeEventListenerOnTransitionEnded(this.refs.tooltip, this.onTransformEnd);
+          }
+        }
+      }, {
+        key: 'activate',
+        value: function activate(_ref2) {
+          var _this2 = this;
+
+          var top = _ref2.top,
+              left = _ref2.left,
+              position = _ref2.position;
+
+          if (this.timeout) clearTimeout(this.timeout);
+          this.setState({ visible: true, position: position });
+          this.timeout = setTimeout(function () {
+            _this2.setState({ active: true, top: top, left: left });
+          }, this.props.tooltipDelay);
+        }
+      }, {
+        key: 'deactivate',
+        value: function deactivate() {
+          if (this.timeout) clearTimeout(this.timeout);
+          if (this.state.active) {
+            _events2.default.addEventListenerOnTransitionEnded(this.refs.tooltip, this.onTransformEnd);
+            this.setState({ active: false });
+          } else if (this.state.visible) {
+            this.setState({ visible: false });
+          }
+        }
+      }, {
+        key: 'getPosition',
+        value: function getPosition(element) {
+          var tooltipPosition = this.props.tooltipPosition;
+
+          if (tooltipPosition === POSITION.HORIZONTAL) {
+            var origin = element.getBoundingClientRect();
+
+            var _utils$getViewport = _utils2.default.getViewport(),
+                ww = _utils$getViewport.width;
+
+            var toRight = origin.left < ww / 2 - origin.width / 2;
+            return toRight ? POSITION.RIGHT : POSITION.LEFT;
+          } else if (tooltipPosition === POSITION.VERTICAL) {
+            var _origin = element.getBoundingClientRect();
+
+            var _utils$getViewport2 = _utils2.default.getViewport(),
+                wh = _utils$getViewport2.height;
+
+            var toBottom = _origin.top < wh / 2 - _origin.height / 2;
+            return toBottom ? POSITION.BOTTOM : POSITION.TOP;
+          } else {
+            return tooltipPosition;
+          }
+        }
+      }, {
+        key: 'calculatePosition',
+        value: function calculatePosition(element) {
+          var position = this.getPosition(element);
+
+          var _element$getBoundingC = element.getBoundingClientRect(),
+              top = _element$getBoundingC.top,
+              left = _element$getBoundingC.left,
+              height = _element$getBoundingC.height,
+              width = _element$getBoundingC.width;
+
+          var xOffset = window.scrollX || window.pageXOffset;
+          var yOffset = window.scrollY || window.pageYOffset;
+          if (position === POSITION.BOTTOM) {
+            return {
+              top: top + height + yOffset,
+              left: left + width / 2 + xOffset,
+              position: position
+            };
+          } else if (position === POSITION.TOP) {
+            return {
+              top: top + yOffset,
+              left: left + width / 2 + xOffset,
+              position: position
+            };
+          } else if (position === POSITION.LEFT) {
+            return {
+              top: top + height / 2 + yOffset,
+              left: left + xOffset,
+              position: position
+            };
+          } else if (position === POSITION.RIGHT) {
+            return {
+              top: top + height / 2 + yOffset,
+              left: left + width + xOffset,
+              position: position
+            };
+          }
+        }
+      }, {
+        key: 'render',
+        value: function render() {
+          var _classnames;
+
+          var _state = this.state,
+              active = _state.active,
+              left = _state.left,
+              top = _state.top,
+              position = _state.position,
+              visible = _state.visible;
+
+          var positionClass = 'tooltip' + (position.charAt(0).toUpperCase() + position.slice(1));
+
+          var _props = this.props,
+              children = _props.children,
+              className = _props.className,
+              theme = _props.theme,
+              tooltip = _props.tooltip,
+              tooltipDelay = _props.tooltipDelay,
+              tooltipHideOnClick = _props.tooltipHideOnClick,
+              tooltipPosition = _props.tooltipPosition,
+              other = _objectWithoutProperties(_props, ['children', 'className', 'theme', 'tooltip', 'tooltipDelay', 'tooltipHideOnClick', 'tooltipPosition']);
+
+          var _className = (0, _classnames3.default)(theme.tooltip, (_classnames = {}, _defineProperty(_classnames, theme.tooltipActive, active), _defineProperty(_classnames, theme[positionClass], theme[positionClass]), _classnames));
+
+          return _react2.default.createElement(
+            ComposedComponent,
+            _extends({}, other, {
+              className: className,
+              onClick: this.handleClick,
+              onMouseEnter: this.handleMouseEnter,
+              onMouseLeave: this.handleMouseLeave,
+              theme: theme
+            }),
+            children ? children : null,
+            visible && _react2.default.createElement(
+              _Portal2.default,
+              null,
+              _react2.default.createElement(
+                'span',
+                { ref: 'tooltip', className: _className, 'data-react-toolbox': 'tooltip', style: { top: top, left: left } },
+                _react2.default.createElement(
+                  'span',
+                  { className: theme.tooltipInner },
+                  tooltip
+                )
+              )
+            )
+          );
+        }
+      }]);
+
+      return TooltippedComponent;
+    }(_react.Component);
+
+    TooltippedComponent.propTypes = {
+      children: _react.PropTypes.any,
+      className: _react.PropTypes.string,
+      onClick: _react.PropTypes.func,
+      onMouseEnter: _react.PropTypes.func,
+      onMouseLeave: _react.PropTypes.func,
+      theme: _react.PropTypes.shape({
+        tooltip: _react.PropTypes.string,
+        tooltipActive: _react.PropTypes.string,
+        tooltipWrapper: _react.PropTypes.string
+      }),
+      tooltip: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.node]),
+      tooltipDelay: _react.PropTypes.number,
+      tooltipHideOnClick: _react.PropTypes.bool,
+      tooltipPosition: _react.PropTypes.oneOf(Object.keys(POSITION).map(function (key) {
+        return POSITION[key];
+      }))
+    };
+    TooltippedComponent.defaultProps = {
+      className: defaultClassName,
+      tooltipDelay: defaultDelay,
+      tooltipHideOnClick: defaultHideOnClick,
+      tooltipPosition: defaultPosition
+    };
+
+
+    return (0, _reactCssThemr.themr)(_identifiers.TOOLTIP, defaultTheme)(TooltippedComponent);
+  };
+};
+
+exports.default = tooltipFactory;
\ No newline at end of file
diff --git a/lib/tooltip/_config.scss b/lib/tooltip/_config.scss
new file mode 100644
index 000000000..042410519
--- /dev/null
+++ b/lib/tooltip/_config.scss
@@ -0,0 +1,8 @@
+$tooltip-background: rgba(97,97,97,.9) !default;
+$tooltip-margin: 0.5 * $unit !default;
+$tooltip-border-radius: .2 * $unit !default;
+$tooltip-color: #fff !default;
+$tooltip-font-size: $unit !default;
+$tooltip-max-width: 17 * $unit !default;
+$tooltip-padding: .8 * $unit !default;
+$tooltip-animation-duration: 200ms !default;
diff --git a/lib/tooltip/index.d.ts b/lib/tooltip/index.d.ts
new file mode 100644
index 000000000..35523937f
--- /dev/null
+++ b/lib/tooltip/index.d.ts
@@ -0,0 +1,47 @@
+import * as React from "react";
+export interface TooltipTheme {
+  /**
+   * Added to the tooltip element.
+   */
+  tooltip?: string;
+  /**
+   * Added to the root when the tooltip is active.
+   */
+  tooltipActive?: string;
+  /**
+   * Wrapper for the root element used to position the tooltip.
+   */
+  tooltipWrapper?: string;
+}
+
+interface TooltipProps {
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: TooltipTheme;
+  /**
+   * The text string to use for the tooltip.
+   */
+  tooltip?: string;
+  /**
+   * Amount of time in miliseconds spent before the tooltip is visible.
+   */
+  tooltipDelay?: number;
+  /**
+   * If true, the Tooltip hides after a click in the host component.
+   * @default true
+   */
+  tooltipHideOnClick?: boolean;
+}
+
+declare class TooltipComponent<P, S> extends React.Component<P, S> {
+  props: P & TooltipProps;
+}
+
+interface TooltippedComponentClass<P> extends TooltipProps {
+  new (props?: P, context?: any): TooltipComponent<P, any>;
+}
+
+export function Tooltip<P>(componentClass: React.ComponentClass<P>): TooltippedComponentClass<P>;
+
+export default Tooltip;
diff --git a/lib/tooltip/index.js b/lib/tooltip/index.js
new file mode 100644
index 000000000..43d4180a9
--- /dev/null
+++ b/lib/tooltip/index.js
@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tooltipFactory = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _Tooltip = require('./Tooltip.js');
+
+var _Tooltip2 = _interopRequireDefault(_Tooltip);
+
+var _theme = require('./theme.scss');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var themedTooltipFactory = function themedTooltipFactory(options) {
+  return (0, _Tooltip2.default)(_extends({}, options, { theme: _theme2.default }));
+};
+exports.default = (0, _Tooltip2.default)({ theme: _theme2.default });
+exports.tooltipFactory = themedTooltipFactory;
\ No newline at end of file
diff --git a/lib/tooltip/theme.scss b/lib/tooltip/theme.scss
new file mode 100644
index 000000000..3daa20a8c
--- /dev/null
+++ b/lib/tooltip/theme.scss
@@ -0,0 +1,55 @@
+@import "http://github.com/colors";
+@import "http://github.com/globals";
+@import "http://github.com/mixins";
+@import "http://github.com/config";
+
+.tooltip {
+  position: absolute;
+  z-index: $z-index-higher;
+  display: block;
+  max-width: $tooltip-max-width;
+  padding: $tooltip-margin;
+  font-family: Roboto, sans-serif;
+  font-size: $tooltip-font-size;
+  font-weight: $font-weight-bold;
+  line-height: $font-size-small;
+  text-align: center;
+  text-transform: none;
+  pointer-events: none;
+  transition: $animation-curve-default $tooltip-animation-duration transform;
+  transform: scale(0) translateX(-50%);
+  transform-origin: top left;
+
+  &.tooltipActive {
+    transform: scale(1) translateX(-50%);
+  }
+
+  &.tooltipTop {
+    transform: scale(0) translateX(-50%) translateY(-100%);
+    &.tooltipActive {
+      transform: scale(1) translateX(-50%) translateY(-100%);
+    }
+  }
+
+  &.tooltipLeft {
+    transform: scale(0) translateX(-100%) translateY(-50%);
+    &.tooltipActive {
+      transform: scale(1) translateX(-100%) translateY(-50%);
+    }
+  }
+
+  &.tooltipRight {
+    transform: scale(0) translateX(0) translateY(-50%);
+    &.tooltipActive {
+      transform: scale(1) translateX(0) translateY(-50%);
+    }
+  }
+}
+
+.tooltipInner {
+  display: block;
+  padding: $tooltip-padding;
+  color: $tooltip-color;
+  background: $tooltip-background;
+  border-radius: $tooltip-border-radius;
+}
diff --git a/lib/utils/events.js b/lib/utils/events.js
new file mode 100644
index 000000000..eb283acee
--- /dev/null
+++ b/lib/utils/events.js
@@ -0,0 +1,69 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = {
+  getMousePosition: function getMousePosition(event) {
+    return {
+      x: event.pageX - (window.scrollX || window.pageXOffset),
+      y: event.pageY - (window.scrollY || window.pageYOffset)
+    };
+  },
+  getTouchPosition: function getTouchPosition(event) {
+    return {
+      x: event.touches[0].pageX - (window.scrollX || window.pageXOffset),
+      y: event.touches[0].pageY - (window.scrollY || window.pageYOffset)
+    };
+  },
+  pauseEvent: function pauseEvent(event) {
+    event.stopPropagation();
+    event.preventDefault();
+  },
+  addEventsToDocument: function addEventsToDocument(eventMap) {
+    for (var key in eventMap) {
+      document.addEventListener(key, eventMap[key], false);
+    }
+  },
+  removeEventsFromDocument: function removeEventsFromDocument(eventMap) {
+    for (var key in eventMap) {
+      document.removeEventListener(key, eventMap[key], false);
+    }
+  },
+  targetIsDescendant: function targetIsDescendant(event, parent) {
+    var node = event.target;
+    while (node !== null) {
+      if (node === parent) return true;
+      node = node.parentNode;
+    }
+    return false;
+  },
+  addEventListenerOnTransitionEnded: function addEventListenerOnTransitionEnded(element, fn) {
+    var eventName = transitionEventNamesFor(element);
+    if (!eventName) return false;
+    element.addEventListener(eventName, fn);
+    return true;
+  },
+  removeEventListenerOnTransitionEnded: function removeEventListenerOnTransitionEnded(element, fn) {
+    var eventName = transitionEventNamesFor(element);
+    if (!eventName) return false;
+    element.removeEventListener(eventName, fn);
+    return true;
+  }
+};
+
+
+var TRANSITIONS = {
+  'transition': 'transitionend',
+  'OTransition': 'oTransitionEnd',
+  'MozTransition': 'transitionend',
+  'WebkitTransition': 'webkitTransitionEnd'
+};
+
+function transitionEventNamesFor(element) {
+  for (var transition in TRANSITIONS) {
+    if (element && element.style[transition] !== undefined) {
+      return TRANSITIONS[transition];
+    }
+  }
+}
\ No newline at end of file
diff --git a/lib/utils/index.js b/lib/utils/index.js
new file mode 100644
index 000000000..d1bd0ea43
--- /dev/null
+++ b/lib/utils/index.js
@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.utils = exports.time = exports.prefixer = exports.events = undefined;
+
+var _events = require('./events.js');
+
+var _events2 = _interopRequireDefault(_events);
+
+var _prefixer = require('./prefixer.js');
+
+var _prefixer2 = _interopRequireDefault(_prefixer);
+
+var _time = require('./time.js');
+
+var _time2 = _interopRequireDefault(_time);
+
+var _utils = require('./utils.js');
+
+var _utils2 = _interopRequireDefault(_utils);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = { events: _events2.default, prefixer: _prefixer2.default, time: _time2.default, utils: _utils2.default };
+exports.events = _events2.default;
+exports.prefixer = _prefixer2.default;
+exports.time = _time2.default;
+exports.utils = _utils2.default;
\ No newline at end of file
diff --git a/lib/utils/polyfills.js b/lib/utils/polyfills.js
new file mode 100644
index 000000000..74df99bbb
--- /dev/null
+++ b/lib/utils/polyfills.js
@@ -0,0 +1,15 @@
+'use strict';
+
+require('core-js/fn/array/from');
+
+require('core-js/fn/array/iterator');
+
+require('core-js/fn/array/find-index');
+
+require('core-js/fn/map');
+
+require('core-js/fn/string/starts-with');
+
+require('core-js/fn/string/includes');
+
+require('core-js/fn/symbol');
\ No newline at end of file
diff --git a/lib/utils/prefixer.js b/lib/utils/prefixer.js
new file mode 100644
index 000000000..34cb4aa22
--- /dev/null
+++ b/lib/utils/prefixer.js
@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var WEBKIT = 'Webkit';
+var MICROSOFT = 'Ms';
+
+var properties = {
+  transform: [WEBKIT, MICROSOFT]
+};
+
+function capitalize(string) {
+  return string.charAt(0).toUpperCase() + string.substr(1);
+}
+
+function getPrefixes(property, value) {
+  return properties[property].reduce(function (acc, item) {
+    acc['' + item + capitalize(property)] = value;
+    return acc;
+  }, {});
+}
+
+function addPrefixesTo(style, property, value) {
+  var vendor = getPrefixes(property, value);
+  for (var prefix in vendor) {
+    style[prefix] = vendor[prefix];
+  }
+
+  return style;
+}
+
+function prefixer(style) {
+  var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+  var _style = defaultValue;
+  for (var property in style) {
+    _style[property] = style[property];
+    if (properties[property]) {
+      addPrefixesTo(_style, property, style[property]);
+    }
+  }
+
+  return _style;
+}
+
+exports.default = prefixer;
\ No newline at end of file
diff --git a/lib/utils/react.js b/lib/utils/react.js
new file mode 100644
index 000000000..c6267df1f
--- /dev/null
+++ b/lib/utils/react.js
@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isComponentOfType = isComponentOfType;
+function isComponentOfType(classType, reactElement) {
+  return reactElement && reactElement.type === classType;
+}
\ No newline at end of file
diff --git a/lib/utils/testing.js b/lib/utils/testing.js
new file mode 100644
index 000000000..e82f77931
--- /dev/null
+++ b/lib/utils/testing.js
@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactAddonsTestUtils = require('react-addons-test-utils');
+
+var _reactAddonsTestUtils2 = _interopRequireDefault(_reactAddonsTestUtils);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = {
+  renderComponent: function renderComponent(Component) {
+    var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var state = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+
+    var component = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(Component, props));
+    if (state !== {}) {
+      component.setState(state);
+    }
+    return component;
+  },
+  shallowRenderComponent: function shallowRenderComponent(component, props) {
+    var shallowRenderer = _reactAddonsTestUtils2.default.createRenderer();
+
+    for (var _len = arguments.length, children = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+      children[_key - 2] = arguments[_key];
+    }
+
+    shallowRenderer.render(_react2.default.createElement(component, props, children.length > 1 ? children : children[0]));
+    return shallowRenderer.getRenderOutput();
+  }
+};
\ No newline at end of file
diff --git a/lib/utils/time.js b/lib/utils/time.js
new file mode 100644
index 000000000..7f167ba97
--- /dev/null
+++ b/lib/utils/time.js
@@ -0,0 +1,297 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var dateLocales = {
+  de: {
+    months: 'Januar_Februar_März_April_Mai_Juni_Juli_August_September_Oktober_November_Dezember'.split('_'),
+    monthsShort: 'Jan_Feb_März_Apr_Mai_Juni_Juli_Aug_Sept_Okt_Nov_Dez'.split('_'),
+    weekdays: 'Sonntag_Montag_Dienstag_Mittwoch_Donnerstag_Freitag_Samstag'.split('_'),
+    weekdaysShort: 'So_Mo_Di_Mi_Do_Fr_Sa'.split('_'),
+    weekdaysLetter: 'S_M_D_M_D_F_S'.split('_')
+  },
+  no: {
+    months: 'januar_februar_mars_april_mai_juni_juli_august_september_oktober_november_desember'.split('_'),
+    monthsShort: 'jan._feb._mars_april_mai_juni_juli_aug._sep._okt._nov._des.'.split('_'),
+    weekdays: 'søndag_mandag_tirsdag_onsdag_torsdag_fredag_lørdag'.split('_'),
+    weekdaysShort: 'søn_man_tir_ons_tor_fre_lør'.split('_'),
+    weekdaysLetter: []
+  },
+  en: {
+    months: 'January_February_March_April_May_June_July_August_September_October_November_December'.split('_'),
+    monthsShort: 'Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec'.split('_'),
+    weekdays: 'Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday'.split('_'),
+    weekdaysShort: 'Sun_Mon_Tue_Wed_Thu_Fri_Sat'.split('_'),
+    weekdaysLetter: []
+  },
+  es: {
+    months: 'enero_febrero_marzo_abril_mayo_junio_julio_agosto_septiembre_octubre_noviembre_diciembre'.split('_'),
+    monthsShort: 'ene_feb_mar_abr_may_jun_jul_ago_sep_oct_nov_dic'.split('_'),
+    weekdays: 'domingo_lunes_martes_miércoles_jueves_viernes_sábado'.split('_'),
+    weekdaysShort: 'dom._lun._mar._mié._jue._vie._sáb.'.split('_'),
+    weekdaysLetter: 'D_L_M_X_J_V_S'.split('_')
+  },
+  af: {
+    months: 'Januarie_Februarie_Maart_April_Mei_Junie_Julie_Augustus_September_Oktober_November_Desember'.split('_'),
+    monthsShort: 'Jan_Feb_Mrt_Apr_Mei_Jun_Jul_Aug_Sep_Okt_Nov_Des'.split('_'),
+    weekdays: 'Sondag_Maandag_Dinsdag_Woensdag_Donderdag_Vrydag_Saterdag'.split('_'),
+    weekdaysShort: 'Son_Maa_Din_Woe_Don_Vry_Sat'.split('_'),
+    weekdaysLetter: []
+  },
+  ar: {
+    months: ['كانون الثاني يناير', 'شباط فبراير', 'آذار مارس', 'نيسان أبريل', 'أيار مايو', 'حزيران يونيو', 'تموز يوليو', 'آب أغسطس', 'أيلول سبتمبر', 'تشرين الأول أكتوبر', 'تشرين الثاني نوفمبر', 'كانون الأول ديسمبر'],
+    monthsShort: ['كانون الثاني يناير', 'شباط فبراير', 'آذار مارس', 'نيسان أبريل', 'أيار مايو', 'حزيران يونيو', 'تموز يوليو', 'آب أغسطس', 'أيلول سبتمبر', 'تشرين الأول أكتوبر', 'تشرين الثاني نوفمبر', 'كانون الأول ديسمبر'],
+    weekdays: 'الأحد_الإثنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت'.split('_'),
+    weekdaysShort: 'أحد_إثنين_ثلاثاء_أربعاء_خميس_جمعة_سبت'.split('_'),
+    weekdaysLetter: []
+  },
+  be: {
+    months: 'студзень_люты_сакавік_красавік_травень_чэрвень_ліпень_жнівень_верасень_кастрычнік_лістапад_снежань'.split('_'),
+    monthsShort: 'студ_лют_сак_крас_трав_чэрв_ліп_жнів_вер_каст_ліст_снеж'.split('_'),
+    weekdays: 'нядзеля_панядзелак_аўторак_серада_чацвер_пятніца_субота'.split('_'),
+    weekdaysShort: 'нд_пн_ат_ср_чц_пт_сб'.split('_'),
+    weekdaysLetter: []
+  },
+  bg: {
+    months: 'януари_февруари_март_април_май_юни_юли_август_септември_октомври_ноември_декември'.split('_'),
+    monthsShort: 'янр_фев_мар_апр_май_юни_юли_авг_сеп_окт_ное_дек'.split('_'),
+    weekdays: 'неделя_понеделник_вторник_сряда_четвъртък_петък_събота'.split('_'),
+    weekdaysShort: 'нед_пон_вто_сря_чет_пет_съб'.split('_'),
+    weekdaysLetter: []
+  },
+  bn: {
+    months: 'জানুয়ারী_ফেবুয়ারী_মার্চ_এপ্রিল_মে_জুন_জুলাই_অগাস্ট_সেপ্টেম্বর_অক্টোবর_নভেম্বর_ডিসেম্বর'.split('_'),
+    monthsShort: 'জানু_ফেব_মার্চ_এপর_মে_জুন_জুল_অগ_সেপ্ট_অক্টো_নভ_ডিসেম্'.split('_'),
+    weekdays: 'রবিবার_সোমবার_মঙ্গলবার_বুধবার_বৃহস্পত্তিবার_শুক্রবার_শনিবার'.split('_'),
+    weekdaysShort: 'রবি_সোম_মঙ্গল_বুধ_বৃহস্পত্তি_শুক্র_শনি'.split('_'),
+    weekdaysLetter: []
+  },
+  bo: {
+    months: 'ཟླ་བ་དང་པོ_ཟླ་བ་གཉིས་པ_ཟླ་བ་གསུམ་པ_ཟླ་བ་བཞི་པ_ཟླ་བ་ལྔ་པ_ཟླ་བ་དྲུག་པ_ཟླ་བ་བདུན་པ_ཟླ་བ་བརྒྱད་པ_ཟླ་བ་དགུ་པ_ཟླ་བ་བཅུ་པ_ཟླ་བ་བཅུ་གཅིག་པ_ཟླ་བ་བཅུ་གཉིས་པ'.split('_'),
+    monthsShort: 'ཟླ་བ་དང་པོ_ཟླ་བ་གཉིས་པ_ཟླ་བ་གསུམ་པ_ཟླ་བ་བཞི་པ_ཟླ་བ་ལྔ་པ_ཟླ་བ་དྲུག་པ_ཟླ་བ་བདུན་པ_ཟླ་བ་བརྒྱད་པ_ཟླ་བ་དགུ་པ_ཟླ་བ་བཅུ་པ_ཟླ་བ་བཅུ་གཅིག་པ_ཟླ་བ་བཅུ་གཉིས་པ'.split('_'),
+    weekdays: 'གཟའ་ཉི་མ་_གཟའ་ཟླ་བ་_གཟའ་མིག་དམར་_གཟའ་ལྷག་པ་_གཟའ་ཕུར་བུ_གཟའ་པ་སངས་_གཟའ་སྤེན་པ་'.split('_'),
+    weekdaysShort: 'ཉི་མ་_ཟླ་བ་_མིག་དམར་_ལྷག་པ་_ཕུར་བུ_པ་སངས་_སྤེན་པ་'.split('_'),
+    weekdaysLetter: []
+  },
+  br: {
+    months: 'Genver_C\'hwevrer_Meurzh_Ebrel_Mae_Mezheven_Gouere_Eost_Gwengolo_Here_Du_Kerzu'.split('_'),
+    monthsShort: 'Gen_C\'hwe_Meu_Ebr_Mae_Eve_Gou_Eos_Gwe_Her_Du_Ker'.split('_'),
+    weekdays: 'Sul_Lun_Meurzh_Merc\'her_Yaou_Gwener_Sadorn'.split('_'),
+    weekdaysShort: 'Sul_Lun_Meu_Mer_Yao_Gwe_Sad'.split('_'),
+    weekdaysLetter: []
+  },
+  bs: {
+    months: 'januar_februar_mart_april_maj_juni_juli_august_septembar_oktobar_novembar_decembar'.split('_'),
+    monthsShort: 'jan._feb._mar._apr._maj._jun._jul._aug._sep._okt._nov._dec.'.split('_'),
+    weekdays: 'nedjelja_ponedjeljak_utorak_srijeda_četvrtak_petak_subota'.split('_'),
+    weekdaysShort: 'ned._pon._uto._sri._čet._pet._sub.'.split('_'),
+    weekdaysLetter: []
+  },
+  ca: {
+    months: 'gener_febrer_març_abril_maig_juny_juliol_agost_setembre_octubre_novembre_desembre'.split('_'),
+    monthsShort: 'gen._febr._mar._abr._mai._jun._jul._ag._set._oct._nov._des.'.split('_'),
+    weekdays: 'diumenge_dilluns_dimarts_dimecres_dijous_divendres_dissabte'.split('_'),
+    weekdaysShort: 'dg._dl._dt._dc._dj._dv._ds.'.split('_'),
+    weekdaysLetter: 'Dg_Dl_Dt_Dc_Dj_Dv_Ds'.split('_')
+  },
+  gl: {
+    months: 'Xaneiro_Febreiro_Marzo_Abril_Maio_Xuño_Xullo_Agosto_Setembro_Outubro_Novembro_Decembro'.split('_'),
+    monthsShort: 'Xan._Feb._Mar._Abr._Mai._Xuñ._Xul._Ago._Set._Out._Nov._Dec.'.split('_'),
+    weekdays: 'Domingo_Luns_Martes_Mércores_Xoves_Venres_Sábado'.split('_'),
+    weekdaysShort: 'Dom._Lun._Mar._Mér._Xov._Ven._Sáb.'.split('_'),
+    weekdaysLetter: 'Do_Lu_Ma_Mé_Xo_Ve_Sá'.split('_')
+  },
+  eu: {
+    months: 'urtarrila_otsaila_martxoa_apirila_maiatza_ekaina_uztaila_abuztua_iraila_urria_azaroa_abendua'.split('_'),
+    monthsShort: 'urt._ots._mar._api._mai._eka._uzt._abu._ira._urr._aza._abe.'.split('_'),
+    weekdays: 'igandea_astelehena_asteartea_asteazkena_osteguna_ostirala_larunbata'.split('_'),
+    weekdaysShort: 'ig._al._ar._az._og._ol._lr.'.split('_'),
+    weekdaysLetter: 'ig_al_ar_az_og_ol_lr'.split('_')
+  },
+  pt: {
+    months: 'Janeiro_Fevereiro_Março_Abril_Maio_Junho_Julho_Agosto_Setembro_Outubro_Novembro_Dezembro'.split('_'),
+    monthsShort: 'Jan_Fev_Mar_Abr_Mai_Jun_Jul_Ago_Set_Out_Nov_Dez'.split('_'),
+    weekdays: 'Domingo_Segunda-Feira_Terça-Feira_Quarta-Feira_Quinta-Feira_Sexta-Feira_Sábado'.split('_'),
+    weekdaysShort: 'Dom_Seg_Ter_Qua_Qui_Sex_Sáb'.split('_'),
+    weekdaysLetter: []
+  },
+  it: {
+    months: 'gennaio_febbraio_marzo_aprile_maggio_giugno_luglio_agosto_settembre_ottobre_novembre_dicembre'.split('_'),
+    monthsShort: 'gen_feb_mar_apr_mag_giu_lug_ago_set_ott_nov_dic'.split('_'),
+    weekdays: 'Domenica_Lunedì_Martedì_Mercoledì_Giovedì_Venerdì_Sabato'.split('_'),
+    weekdaysShort: 'Dom_Lun_Mar_Mer_Gio_Ven_Sab'.split('_'),
+    weekdaysLetter: []
+  },
+  fr: {
+    months: 'janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre'.split('_'),
+    monthsShort: 'janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.'.split('_'),
+    weekdays: 'dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi'.split('_'),
+    weekdaysShort: 'dim._lun._mar._mer._jeu._ven._sam.'.split('_'),
+    weekdaysLetter: []
+  },
+  ru: {
+    months: 'Январь_Февраль_Март_Апрель_Май_Июнь_Июль_Август_Сентябрь_Октябрь_Ноябрь_Декабрь'.split('_'),
+    monthsShort: 'Янв_Фев_Мар_Апр_Май_Июн_Июл_Авг_Сен_Окт_Ноя_Дек'.split('_'),
+    weekdays: 'Воскресенье_Понедельник_Вторник_Среда_Четверг_Пятница_Суббота'.split('_'),
+    weekdaysShort: 'Вс_Пн_Вт_Ср_Чт_Пт_Сб'.split('_'),
+    weekdaysLetter: []
+  },
+  ua: {
+    months: 'Січень_Лютий_Березень_Квітень_Травень_Червень_Липень_Серпень_Вересень_Жовтень_Листопад_Грудень'.split('_'),
+    monthsShort: 'Січ_Лют_Берез_Квіт_Трав_Черв_Лип_Серп_Верес_Жовт_Листоп_Груд'.split('_'),
+    weekdays: 'Неділя_Понеділок_Вівторок_Середа_Четвер_П’ятниця_Субота'.split('_'),
+    weekdaysShort: 'Нд_Пн_Вт_Ср_Чт_Пт_Сб'.split('_'),
+    weekdaysLetter: []
+  }
+};
+
+var time = {
+  getDaysInMonth: function getDaysInMonth(d) {
+    var resultDate = this.getFirstDayOfMonth(d);
+    resultDate.setMonth(resultDate.getMonth() + 1);
+    resultDate.setDate(resultDate.getDate() - 1);
+    return resultDate.getDate();
+  },
+  getFirstDayOfMonth: function getFirstDayOfMonth(d) {
+    return new Date(d.getFullYear(), d.getMonth(), 1);
+  },
+  getFirstWeekDay: function getFirstWeekDay(d) {
+    return this.getFirstDayOfMonth(d).getDay();
+  },
+  getTimeMode: function getTimeMode(d) {
+    return d.getHours() >= 12 ? 'pm' : 'am';
+  },
+  getFullMonth: function getFullMonth(d) {
+    var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
+
+    var month = d.getMonth();
+    var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en;
+    return l.hasOwnProperty('months') ? l.months[month] || 'Unknown' : 'Unknown';
+  },
+  getShortMonth: function getShortMonth(d) {
+    var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
+
+    var month = d.getMonth();
+    var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en;
+    return l.hasOwnProperty('monthsShort') ? l.monthsShort[month] || 'Unknown' : 'Unknown';
+  },
+  getFullDayOfWeek: function getFullDayOfWeek(day) {
+    var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
+
+    var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en;
+    return l.hasOwnProperty('weekdays') ? l.weekdays[day] || 'Unknown' : 'Unknown';
+  },
+  getShortDayOfWeek: function getShortDayOfWeek(day) {
+    var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
+
+    var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en;
+    return l.hasOwnProperty('weekdaysShort') ? l.weekdaysShort[day] || 'Unknown' : 'Unknown';
+  },
+  getDayOfWeekLetter: function getDayOfWeekLetter(day) {
+    var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
+
+    var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en;
+    return l.hasOwnProperty('weekdaysLetter') ? l.weekdaysLetter[day] || this.getFullDayOfWeek(day, locale).charAt(0) : 'Unknown';
+  },
+  clone: function clone(d) {
+    return new Date(d.getTime());
+  },
+  cloneAsDate: function cloneAsDate(d) {
+    var clonedDate = this.clone(d);
+    clonedDate.setHours(0, 0, 0, 0);
+    return clonedDate;
+  },
+  isDateObject: function isDateObject(d) {
+    return d instanceof Date;
+  },
+  addDays: function addDays(d, days) {
+    var newDate = this.clone(d);
+    newDate.setDate(d.getDate() + days);
+    return newDate;
+  },
+  addMonths: function addMonths(d, months) {
+    var newDate = this.clone(d);
+    newDate.setMonth(d.getMonth() + months, 1);
+    return newDate;
+  },
+  addYears: function addYears(d, years) {
+    var newDate = this.clone(d);
+    newDate.setFullYear(d.getFullYear() + years);
+    return newDate;
+  },
+  setDay: function setDay(d, day) {
+    var newDate = this.clone(d);
+    newDate.setDate(day);
+    return newDate;
+  },
+  setMonth: function setMonth(d, month) {
+    var newDate = this.clone(d);
+    newDate.setMonth(month);
+    return newDate;
+  },
+  setYear: function setYear(d, year) {
+    var newDate = this.clone(d);
+    newDate.setFullYear(year);
+    return newDate;
+  },
+  setHours: function setHours(d, hours) {
+    var newDate = this.clone(d);
+    newDate.setHours(hours);
+    return newDate;
+  },
+  setMinutes: function setMinutes(d, minutes) {
+    var newDate = this.clone(d);
+    newDate.setMinutes(minutes);
+    return newDate;
+  },
+  toggleTimeMode: function toggleTimeMode(d) {
+    var newDate = this.clone(d);
+    var hours = newDate.getHours();
+
+    newDate.setHours(hours - (hours > 12 ? -12 : 12));
+    return newDate;
+  },
+  formatTime: function formatTime(date, format) {
+    var hours = date.getHours();
+    var mins = date.getMinutes().toString();
+
+    if (format === 'ampm') {
+      var isAM = hours < 12;
+      var additional = isAM ? ' am' : ' pm';
+
+      hours = hours % 12;
+      hours = (hours || 12).toString();
+      if (mins.length < 2) mins = '0' + mins;
+
+      return hours + (mins === '00' ? '' : ':' + mins) + additional;
+    }
+
+    hours = hours.toString();
+    if (hours.length < 2) hours = '0' + hours;
+    if (mins.length < 2) mins = '0' + mins;
+    return hours + ':' + mins;
+  },
+  dateOutOfRange: function dateOutOfRange(date, minDate, maxDate) {
+    return minDate && !(date >= minDate) || maxDate && !(date <= maxDate);
+  },
+  closestDate: function closestDate(to, date1, date2) {
+    var toTime = to.getTime();
+
+    var diff1 = Math.abs(toTime - date1.getTime());
+    var diff2 = Math.abs(toTime - date2.getTime());
+
+    return diff1 < diff2 ? date1 : date2;
+  },
+  formatDate: function formatDate(date) {
+    var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
+
+    if (locale === 'en') {
+      return date.getDate() + ' ' + time.getFullMonth(date, locale) + ' ' + date.getFullYear();
+    } else {
+      return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear();
+    }
+  }
+};
+
+exports.default = time;
\ No newline at end of file
diff --git a/lib/utils/utils.js b/lib/utils/utils.js
new file mode 100644
index 000000000..13e8d5442
--- /dev/null
+++ b/lib/utils/utils.js
@@ -0,0 +1,73 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = {
+  angleFromPositions: function angleFromPositions(cx, cy, ex, ey) {
+    var theta = Math.atan2(ey - cy, ex - cx) + Math.PI / 2;
+    return theta * 180 / Math.PI;
+  },
+  angle360FromPositions: function angle360FromPositions(cx, cy, ex, ey) {
+    var angle = this.angleFromPositions(cx, cy, ex, ey);
+    return angle < 0 ? 360 + angle : angle;
+  },
+  range: function range() {
+    var start = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    var stop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    var step = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+    var _start = 0,
+        _stop = start;
+
+    if (stop !== null) {
+      _start = start;
+      _stop = stop;
+    }
+    var length = Math.max(Math.ceil((_stop - _start) / step), 0);
+    var range = Array(length);
+
+    for (var idx = 0; idx < length; idx++, _start += step) {
+      range[idx] = _start;
+    }
+
+    return range;
+  },
+  round: function round(number, decimals) {
+    if (!isNaN(parseFloat(number)) && isFinite(number)) {
+      var decimalPower = Math.pow(10, decimals);
+      return Math.round(parseFloat(number) * decimalPower) / decimalPower;
+    }
+    return NaN;
+  },
+  getViewport: function getViewport() {
+    return {
+      height: window.innerHeight || document.documentElement.offsetHeight,
+      width: window.innerWidth || document.documentElement.offsetWidth
+    };
+  },
+  cloneObject: function cloneObject(object) {
+    return JSON.parse(JSON.stringify(object));
+  },
+  inputTypeForPrototype: function inputTypeForPrototype(prototype) {
+    if (prototype === Date) return 'date';
+    if (prototype === Number) return 'number';
+    if (prototype === Boolean) return 'checkbox';
+    return 'text';
+  },
+  prepareValueForInput: function prepareValueForInput(value, type) {
+    if (type === 'date') return new Date(value).toISOString().slice(0, 10);
+    if (type === 'checkbox') {
+      return value ? 'on' : '';
+    }
+    return value;
+  },
+  removeObjectKey: function removeObjectKey(key, object) {
+    var newObject = {};
+    Object.keys(object).filter(function (k) {
+      return k !== key;
+    }).forEach(function (k) {
+      newObject[k] = object[k];
+    });
+    return newObject;
+  }
+};
\ No newline at end of file

From d8a30f39ca2d7f24e9a4a80c4bc4416fa7429ce4 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 30 Nov 2016 18:23:11 +0100
Subject: [PATCH 0974/1024] Fixes #1007

---
 components/time_picker/TimePickerDialog.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/time_picker/TimePickerDialog.js b/components/time_picker/TimePickerDialog.js
index 17cd7cbcd..8ba81e282 100644
--- a/components/time_picker/TimePickerDialog.js
+++ b/components/time_picker/TimePickerDialog.js
@@ -47,7 +47,7 @@ const factory = (Dialog) => {
       displayTime: new Date(this.props.value.getTime())
     };
 
-    componentWillUpdate (nextProps) {
+    componentWillReceiveProps (nextProps) {
       if (nextProps.value.getTime() !== this.state.displayTime.getTime()) {
         this.setState({ displayTime: new Date(nextProps.value.getTime()) });
       }

From a8e1bb766857fda4af8ec9435d4c5c014fd20be1 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 30 Nov 2016 20:12:48 +0100
Subject: [PATCH 0975/1024] Release 1.3.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 542f7894e..1e216afce 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "react-toolbox",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "homepage": "http://www.react-toolbox.com/",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "main": "./lib",
   "author": {
     "name": "React Toolbox Team",

From 5a491aab7f67455cc7f52316b2d8481a4eeed2c7 Mon Sep 17 00:00:00 2001
From: Craig Cartmell <craigcartmell1@gmail.com>
Date: Thu, 1 Dec 2016 11:47:53 +0000
Subject: [PATCH 0976/1024] Build

---
 lib/autocomplete/Autocomplete.js    | 10 +++++-----
 lib/button/_config.scss             |  2 ++
 lib/button/theme.scss               |  5 +++++
 lib/checkbox/Checkbox.js            | 20 ++++++++++++++++----
 lib/dropdown/Dropdown.js            |  6 +++---
 lib/dropdown/index.d.ts             |  4 ++++
 lib/radio/RadioButton.js            | 23 +++++++++++++++--------
 lib/tabs/index.d.ts                 |  6 +++++-
 lib/time_picker/TimePickerDialog.js |  4 ++--
 lib/tooltip/Tooltip.js              | 20 ++++++++++++++++----
 10 files changed, 73 insertions(+), 27 deletions(-)

diff --git a/lib/autocomplete/Autocomplete.js b/lib/autocomplete/Autocomplete.js
index 85cf9460f..0ef105912 100644
--- a/lib/autocomplete/Autocomplete.js
+++ b/lib/autocomplete/Autocomplete.js
@@ -95,8 +95,8 @@ var factory = function factory(Chip, Input) {
             _reactDom2.default.findDOMNode(_this).querySelector('input').blur();
           });
         }
-      }, _this.handleMouseDown = function () {
-        _this.selectOrCreateActiveItem();
+      }, _this.handleMouseDown = function (event) {
+        _this.selectOrCreateActiveItem(event);
       }, _this.handleQueryBlur = function (event) {
         if (_this.state.focus) _this.setState({ focus: false });
         if (_this.props.onBlur) _this.props.onBlur(event, _this.state.active);
@@ -115,7 +115,7 @@ var factory = function factory(Chip, Input) {
         }
 
         if (event.which === 13) {
-          _this.selectOrCreateActiveItem();
+          _this.selectOrCreateActiveItem(event);
         }
       }, _this.handleQueryKeyUp = function (event) {
         if (event.which === 27) _reactDom2.default.findDOMNode(_this).querySelector('input').blur();
@@ -207,7 +207,7 @@ var factory = function factory(Chip, Input) {
       }
     }, {
       key: 'selectOrCreateActiveItem',
-      value: function selectOrCreateActiveItem() {
+      value: function selectOrCreateActiveItem(event) {
         var target = this.state.active;
         if (!target) {
           target = this.props.allowCreate ? this.state.query : [].concat(_toConsumableArray(this.suggestions().keys()))[0];
@@ -556,8 +556,8 @@ var factory = function factory(Chip, Input) {
     keepFocusOnChange: false,
     multiple: true,
     selectedPosition: 'above',
-    showSuggestionsWhenValueIsSet: false,
     showSelectedWhenNotInSource: false,
+    showSuggestionsWhenValueIsSet: false,
     source: {},
     suggestionMatch: 'start'
   };
diff --git a/lib/button/_config.scss b/lib/button/_config.scss
index 4a37d8b0c..98aa2c246 100644
--- a/lib/button/_config.scss
+++ b/lib/button/_config.scss
@@ -9,6 +9,8 @@ $button-accent-color-hover: rgba($color-accent, .2) !default;
 $button-accent-color: $color-accent !default;
 $button-disabled-text-color: rgba($color-black, 0.26) !default;
 $button-disabled-background-color: rgba($color-black, 0.12) !default;
+$button-disabled-text-color-inverse: rgba($color-white, 0.54) !default;
+$button-disabled-background-inverse: rgba($color-white, 0.08) !default;
 $button-border-radius: 0.2 * $unit !default;
 $button-floating-font-size: $unit * 2.4 !default;
 $button-floating-height: $unit * 5.6 !default;
diff --git a/lib/button/theme.scss b/lib/button/theme.scss
index adf91cd0f..9c450ef83 100644
--- a/lib/button/theme.scss
+++ b/lib/button/theme.scss
@@ -178,5 +178,10 @@
   }
 }
 
+.neutral.inverse[disabled] {
+  color: $button-disabled-text-color-inverse;
+  background-color: $button-disabled-background-inverse;
+}
+
 @include btn-colors("primary", $button-primary-color-contrast, $button-primary-color, $button-primary-color-hover);
 @include btn-colors("accent", $button-accent-color-contrast, $button-accent-color, $button-accent-color-hover);
diff --git a/lib/checkbox/Checkbox.js b/lib/checkbox/Checkbox.js
index da387e640..8c423d846 100644
--- a/lib/checkbox/Checkbox.js
+++ b/lib/checkbox/Checkbox.js
@@ -84,26 +84,36 @@ var factory = function factory(Check) {
             children = _props.children,
             disabled = _props.disabled,
             label = _props.label,
+            name = _props.name,
             style = _props.style,
+            onChange = _props.onChange,
+            onMouseEnter = _props.onMouseEnter,
+            onMouseLeave = _props.onMouseLeave,
             theme = _props.theme,
-            others = _objectWithoutProperties(_props, ['checked', 'children', 'disabled', 'label', 'style', 'theme']);
+            others = _objectWithoutProperties(_props, ['checked', 'children', 'disabled', 'label', 'name', 'style', 'onChange', 'onMouseEnter', 'onMouseLeave', 'theme']);
 
         var className = (0, _classnames3.default)(theme.field, _defineProperty({}, theme.disabled, this.props.disabled), this.props.className);
 
         return _react2.default.createElement(
           'label',
-          _extends({}, others, { 'data-react-toolbox': 'checkbox', className: className }),
-          _react2.default.createElement('input', {
+          {
+            'data-react-toolbox': 'checkbox',
+            className: className,
+            onMouseEnter: onMouseEnter,
+            onMouseLeave: onMouseLeave
+          },
+          _react2.default.createElement('input', _extends({}, others, {
             checked: checked,
             className: theme.input,
             disabled: disabled,
+            name: name,
             onChange: function onChange() {},
             onClick: this.handleToggle,
             ref: function ref(node) {
               _this2.inputNode = node;
             },
             type: 'checkbox'
-          }),
+          })),
           _react2.default.createElement(Check, {
             checked: checked,
             disabled: disabled,
@@ -132,6 +142,8 @@ var factory = function factory(Check) {
     label: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.node]),
     name: _react.PropTypes.string,
     onChange: _react.PropTypes.func,
+    onMouseEnter: _react.PropTypes.func,
+    onMouseLeave: _react.PropTypes.func,
     style: _react.PropTypes.object,
     theme: _react.PropTypes.shape({
       disabled: _react.PropTypes.string,
diff --git a/lib/dropdown/Dropdown.js b/lib/dropdown/Dropdown.js
index 55994c8ac..ba78dd99e 100644
--- a/lib/dropdown/Dropdown.js
+++ b/lib/dropdown/Dropdown.js
@@ -68,7 +68,7 @@ var factory = function factory(Input) {
           click: _this.handleDocumentClick,
           touchend: _this.handleDocumentClick
         };
-      }, _this.open = function () {
+      }, _this.open = function (event) {
         var client = event.target.getBoundingClientRect();
         var screenHeight = window.innerHeight || document.documentElement.offsetHeight;
         var up = _this.props.auto ? client.top > screenHeight / 2 + client.height : false;
@@ -83,7 +83,7 @@ var factory = function factory(Input) {
           _this.setState({ active: false });
         }
       }, _this.handleClick = function (event) {
-        _this.open();
+        _this.open(event);
         _events2.default.pauseEvent(event);
         if (_this.props.onClick) _this.props.onClick(event);
       }, _this.handleSelect = function (item, event) {
@@ -135,7 +135,7 @@ var factory = function factory(Input) {
         );
       }, _this.handleFocus = function (event) {
         event.stopPropagation();
-        if (!_this.props.disabled) _this.open();
+        if (!_this.props.disabled) _this.open(event);
         if (_this.props.onFocus) _this.props.onFocus(event);
       }, _this.handleBlur = function (event) {
         event.stopPropagation();
diff --git a/lib/dropdown/index.d.ts b/lib/dropdown/index.d.ts
index 2c0f207ed..ebf3b10e3 100644
--- a/lib/dropdown/index.d.ts
+++ b/lib/dropdown/index.d.ts
@@ -108,6 +108,10 @@ interface DropdownProps extends ReactToolbox.Props {
    * Default value using JSON data.
    */
   value?: string | number;
+  /**
+   * If true, the dropdown has a required attribute.
+   */
+  required?: boolean;
 }
 
 export class Dropdown extends React.Component<DropdownProps, {}> { }
diff --git a/lib/radio/RadioButton.js b/lib/radio/RadioButton.js
index a654f75db..3af9f039e 100644
--- a/lib/radio/RadioButton.js
+++ b/lib/radio/RadioButton.js
@@ -86,29 +86,34 @@ var factory = function factory(Radio) {
             className = _props.className,
             disabled = _props.disabled,
             label = _props.label,
+            name = _props.name,
             onChange = _props.onChange,
+            onMouseEnter = _props.onMouseEnter,
+            onMouseLeave = _props.onMouseLeave,
             theme = _props.theme,
-            others = _objectWithoutProperties(_props, ['checked', 'children', 'className', 'disabled', 'label', 'onChange', 'theme']); // eslint-disable-line
-
+            others = _objectWithoutProperties(_props, ['checked', 'children', 'className', 'disabled', 'label', 'name', 'onChange', 'onMouseEnter', 'onMouseLeave', 'theme']);
 
         var _className = (0, _classnames2.default)(theme[this.props.disabled ? 'disabled' : 'field'], className);
         return _react2.default.createElement(
           'label',
-          _extends({}, others, {
+          {
             'data-react-toolbox': 'radio-button',
-            className: _className
-          }),
-          _react2.default.createElement('input', {
+            className: _className,
+            onMouseEnter: onMouseEnter,
+            onMouseLeave: onMouseLeave
+          },
+          _react2.default.createElement('input', _extends({}, others, {
             checked: checked,
             className: theme.input,
             disabled: disabled,
-            onClick: this.handleClick,
+            name: name,
             onChange: function onChange() {},
+            onClick: this.handleClick,
             ref: function ref(node) {
               _this2.inputNode = node;
             },
             type: 'radio'
-          }),
+          })),
           _react2.default.createElement(Radio, { checked: checked, disabled: disabled, theme: theme }),
           label ? _react2.default.createElement(
             'span',
@@ -133,6 +138,8 @@ var factory = function factory(Radio) {
     onBlur: _react.PropTypes.func,
     onChange: _react.PropTypes.func,
     onFocus: _react.PropTypes.func,
+    onMouseEnter: _react.PropTypes.func,
+    onMouseLeave: _react.PropTypes.func,
     theme: _react.PropTypes.shape({
       disabled: _react.PropTypes.string,
       field: _react.PropTypes.string,
diff --git a/lib/tabs/index.d.ts b/lib/tabs/index.d.ts
index d4d737b7c..1dbdeda09 100644
--- a/lib/tabs/index.d.ts
+++ b/lib/tabs/index.d.ts
@@ -41,7 +41,7 @@ interface TabsProps extends ReactToolbox.Props {
   index?: number;
   /**
    * `unmounted` mode will not mount the tab content of inactive tabs.
-   * `display` mode will mount but hide inactive tabs. 
+   * `display` mode will mount but hide inactive tabs.
    * Consider holding state outside of the Tabs component before using `display` mode
    * @default unmounted
    */
@@ -50,6 +50,10 @@ interface TabsProps extends ReactToolbox.Props {
    * If True, the tabs will have an inverse style.
    */
   inverse?: boolean;
+  /**
+   * If True, the tabs will be fixed, covering the whole width.
+   */
+  fixed?: boolean;
   /**
    * Callback function that is fired when the tab changes.
    */
diff --git a/lib/time_picker/TimePickerDialog.js b/lib/time_picker/TimePickerDialog.js
index 5ff0ca659..0b9d049a2 100644
--- a/lib/time_picker/TimePickerDialog.js
+++ b/lib/time_picker/TimePickerDialog.js
@@ -62,8 +62,8 @@ var factory = function factory(Dialog) {
     }
 
     _createClass(TimePickerDialog, [{
-      key: 'componentWillUpdate',
-      value: function componentWillUpdate(nextProps) {
+      key: 'componentWillReceiveProps',
+      value: function componentWillReceiveProps(nextProps) {
         if (nextProps.value.getTime() !== this.state.displayTime.getTime()) {
           this.setState({ displayTime: new Date(nextProps.value.getTime()) });
         }
diff --git a/lib/tooltip/Tooltip.js b/lib/tooltip/Tooltip.js
index 2890a4488..f05a07bcf 100644
--- a/lib/tooltip/Tooltip.js
+++ b/lib/tooltip/Tooltip.js
@@ -57,6 +57,7 @@ var defaults = {
   className: '',
   delay: 0,
   hideOnClick: true,
+  showOnClick: false,
   position: POSITION.VERTICAL,
   theme: {}
 };
@@ -68,6 +69,7 @@ var tooltipFactory = function tooltipFactory() {
       defaultClassName = _defaults$options.className,
       defaultDelay = _defaults$options.delay,
       defaultHideOnClick = _defaults$options.hideOnClick,
+      defaultShowOnClick = _defaults$options.showOnClick,
       defaultPosition = _defaults$options.position,
       defaultTheme = _defaults$options.theme;
 
@@ -102,7 +104,14 @@ var tooltipFactory = function tooltipFactory() {
           _this.deactivate();
           if (_this.props.onMouseLeave) _this.props.onMouseLeave(event);
         }, _this.handleClick = function (event) {
-          if (_this.props.tooltipHideOnClick) _this.deactivate();
+          if (_this.props.tooltipHideOnClick && _this.state.active) {
+            _this.deactivate();
+          }
+
+          if (_this.props.tooltipShowOnClick && !_this.state.active) {
+            _this.activate(_this.calculatePosition(event.target));
+          }
+
           if (_this.props.onClick) _this.props.onClick(event);
         }, _temp), _possibleConstructorReturn(_this, _ret);
       }
@@ -226,7 +235,8 @@ var tooltipFactory = function tooltipFactory() {
               tooltipDelay = _props.tooltipDelay,
               tooltipHideOnClick = _props.tooltipHideOnClick,
               tooltipPosition = _props.tooltipPosition,
-              other = _objectWithoutProperties(_props, ['children', 'className', 'theme', 'tooltip', 'tooltipDelay', 'tooltipHideOnClick', 'tooltipPosition']);
+              tooltipShowOnClick = _props.tooltipShowOnClick,
+              other = _objectWithoutProperties(_props, ['children', 'className', 'theme', 'tooltip', 'tooltipDelay', 'tooltipHideOnClick', 'tooltipPosition', 'tooltipShowOnClick']);
 
           var _className = (0, _classnames3.default)(theme.tooltip, (_classnames = {}, _defineProperty(_classnames, theme.tooltipActive, active), _defineProperty(_classnames, theme[positionClass], theme[positionClass]), _classnames));
 
@@ -276,13 +286,15 @@ var tooltipFactory = function tooltipFactory() {
       tooltipHideOnClick: _react.PropTypes.bool,
       tooltipPosition: _react.PropTypes.oneOf(Object.keys(POSITION).map(function (key) {
         return POSITION[key];
-      }))
+      })),
+      tooltipShowOnClick: _react.PropTypes.bool
     };
     TooltippedComponent.defaultProps = {
       className: defaultClassName,
       tooltipDelay: defaultDelay,
       tooltipHideOnClick: defaultHideOnClick,
-      tooltipPosition: defaultPosition
+      tooltipPosition: defaultPosition,
+      tooltipShowOnClick: defaultShowOnClick
     };
 
 

From 71b7f518805a099703b36058da5506b8992bc370 Mon Sep 17 00:00:00 2001
From: Craig Cartmell <craigcartmell1@gmail.com>
Date: Thu, 1 Dec 2016 12:17:59 +0000
Subject: [PATCH 0977/1024] Removed lib

---
 lib/_colors.scss                        | 301 -------------
 lib/_globals.scss                       |  81 ----
 lib/_mixins.scss                        | 260 -----------
 lib/animations/index.js                 |  29 --
 lib/animations/slide-left.scss          |  26 --
 lib/animations/slide-right.scss         |  29 --
 lib/animations/zoom-in.scss             |  33 --
 lib/animations/zoom-out.scss            |  33 --
 lib/app_bar/AppBar.js                   | 177 --------
 lib/app_bar/_config.scss                |   8 -
 lib/app_bar/index.d.ts                  |  74 ---
 lib/app_bar/index.js                    |  26 --
 lib/app_bar/theme.scss                  |  65 ---
 lib/autocomplete/Autocomplete.js        | 572 ------------------------
 lib/autocomplete/_config.scss           |   7 -
 lib/autocomplete/index.d.ts             | 111 -----
 lib/autocomplete/index.js               |  32 --
 lib/autocomplete/theme.scss             |  76 ----
 lib/avatar/Avatar.js                    |  80 ----
 lib/avatar/_config.scss                 |   4 -
 lib/avatar/index.d.ts                   |  48 --
 lib/avatar/index.js                     |  28 --
 lib/avatar/theme.scss                   |  44 --
 lib/button/BrowseButton.js              | 168 -------
 lib/button/Button.js                    | 167 -------
 lib/button/IconButton.js                | 138 ------
 lib/button/__test__/index.spec.js       |  66 ---
 lib/button/_config.scss                 |  23 -
 lib/button/_mixins.scss                 |  17 -
 lib/button/index.d.ts                   | 337 --------------
 lib/button/index.js                     |  42 --
 lib/button/theme.scss                   | 187 --------
 lib/card/Card.js                        |  55 ---
 lib/card/CardActions.js                 |  48 --
 lib/card/CardMedia.js                   |  75 ----
 lib/card/CardText.js                    |  52 ---
 lib/card/CardTitle.js                   |  93 ----
 lib/card/_config.scss                   |   7 -
 lib/card/index.d.ts                     | 103 -----
 lib/card/index.js                       |  44 --
 lib/card/theme.scss                     | 126 ------
 lib/checkbox/Check.js                   |  52 ---
 lib/checkbox/Checkbox.js                | 169 -------
 lib/checkbox/_config.scss               |  12 -
 lib/checkbox/index.d.ts                 |  70 ---
 lib/checkbox/index.js                   |  32 --
 lib/checkbox/theme.scss                 | 121 -----
 lib/chip/Chip.js                        |  97 ----
 lib/chip/_config.scss                   |  17 -
 lib/chip/index.d.ts                     |  53 ---
 lib/chip/index.js                       |  28 --
 lib/chip/theme.scss                     |  68 ---
 lib/commons.scss                        |  95 ----
 lib/date_picker/Calendar.js             | 212 ---------
 lib/date_picker/CalendarDay.js          | 106 -----
 lib/date_picker/CalendarMonth.js        | 157 -------
 lib/date_picker/DatePicker.js           | 233 ----------
 lib/date_picker/DatePickerDialog.js     | 186 --------
 lib/date_picker/__test__/index.spec.js  |  96 ----
 lib/date_picker/_config.scss            |  31 --
 lib/date_picker/index.d.ts              | 153 -------
 lib/date_picker/index.js                |  48 --
 lib/date_picker/theme.scss              | 156 -------
 lib/dialog/Dialog.js                    | 113 -----
 lib/dialog/_config.scss                 |   6 -
 lib/dialog/index.d.ts                   |  93 ----
 lib/dialog/index.js                     |  32 --
 lib/dialog/theme.scss                   |  86 ----
 lib/drawer/Drawer.js                    |  85 ----
 lib/drawer/_config.scss                 |   4 -
 lib/drawer/index.d.ts                   |  54 ---
 lib/drawer/index.js                     |  26 --
 lib/drawer/theme.scss                   |  43 --
 lib/dropdown/Dropdown.js                | 304 -------------
 lib/dropdown/_config.scss               |   6 -
 lib/dropdown/index.d.ts                 | 119 -----
 lib/dropdown/index.js                   |  26 --
 lib/dropdown/theme.scss                 | 138 ------
 lib/font_icon/FontIcon.js               |  50 ---
 lib/font_icon/index.d.ts                |  17 -
 lib/font_icon/index.js                  |  15 -
 lib/form/Form.js                        | 151 -------
 lib/form/index.js                       |  55 ---
 lib/hoc/ActivableRenderer.js            | 113 -----
 lib/hoc/Portal.js                       | 145 ------
 lib/identifiers.js                      |  32 --
 lib/index.d.ts                          |  56 ---
 lib/index.js                            | 206 ---------
 lib/input/Input.js                      | 296 ------------
 lib/input/_config.scss                  |  20 -
 lib/input/index.d.ts                    | 136 ------
 lib/input/index.js                      |  28 --
 lib/input/theme.scss                    | 156 -------
 lib/layout/Layout.js                    |  48 --
 lib/layout/NavDrawer.js                 |  87 ----
 lib/layout/Panel.js                     |  57 ---
 lib/layout/Sidebar.js                   |  69 ---
 lib/layout/_config.scss                 |  18 -
 lib/layout/_mixins.scss                 |  27 --
 lib/layout/index.d.ts                   | 194 --------
 lib/layout/index.js                     |  34 --
 lib/layout/theme.scss                   | 325 --------------
 lib/link/Link.js                        |  82 ----
 lib/link/index.d.ts                     |  51 ---
 lib/link/index.js                       |  23 -
 lib/link/theme.scss                     |  37 --
 lib/list/List.js                        |  99 ----
 lib/list/ListCheckbox.js                |  93 ----
 lib/list/ListDivider.js                 |  37 --
 lib/list/ListItem.js                    | 156 -------
 lib/list/ListItemAction.js              |  44 --
 lib/list/ListItemActions.js             |  56 ---
 lib/list/ListItemContent.js             | 116 -----
 lib/list/ListItemLayout.js              | 104 -----
 lib/list/ListItemText.js                |  58 ---
 lib/list/ListSubHeader.js               |  44 --
 lib/list/_config.scss                   |  18 -
 lib/list/index.d.ts                     | 265 -----------
 lib/list/index.js                       |  69 ---
 lib/list/theme.scss                     | 159 -------
 lib/menu/IconMenu.js                    | 151 -------
 lib/menu/Menu.js                        | 324 --------------
 lib/menu/MenuDivider.js                 |  30 --
 lib/menu/MenuItem.js                    | 136 ------
 lib/menu/__test__/index.spec.js         |  51 ---
 lib/menu/_config.scss                   |  16 -
 lib/menu/index.d.ts                     | 242 ----------
 lib/menu/index.js                       |  43 --
 lib/menu/theme.scss                     | 154 -------
 lib/navigation/Navigation.js            |  86 ----
 lib/navigation/_config.scss             |   2 -
 lib/navigation/index.d.ts               |  47 --
 lib/navigation/index.js                 |  26 --
 lib/navigation/theme.scss               |  26 --
 lib/overlay/Overlay.js                  | 133 ------
 lib/overlay/_config.scss                |   2 -
 lib/overlay/index.js                    |  22 -
 lib/overlay/theme.scss                  |  42 --
 lib/progress_bar/ProgressBar.js         | 162 -------
 lib/progress_bar/__test__/index.spec.js |  92 ----
 lib/progress_bar/_config.scss           |   7 -
 lib/progress_bar/index.d.ts             |  88 ----
 lib/progress_bar/index.js               |  23 -
 lib/progress_bar/theme.scss             | 146 ------
 lib/radio/Radio.js                      |  45 --
 lib/radio/RadioButton.js                | 165 -------
 lib/radio/RadioGroup.js                 |  99 ----
 lib/radio/_config.scss                  |   9 -
 lib/radio/index.d.ts                    | 102 -----
 lib/radio/index.js                      |  36 --
 lib/radio/theme.scss                    |  95 ----
 lib/ripple/Ripple.js                    | 387 ----------------
 lib/ripple/_config.scss                 |   3 -
 lib/ripple/index.d.ts                   |  50 ---
 lib/ripple/index.js                     |  21 -
 lib/ripple/theme.scss                   |  42 --
 lib/slider/Slider.js                    | 384 ----------------
 lib/slider/__tests__/index.spec.js      | 202 ---------
 lib/slider/_config.scss                 |  13 -
 lib/slider/index.d.ts                   | 112 -----
 lib/slider/index.js                     |  26 --
 lib/slider/theme.scss                   | 200 ---------
 lib/snackbar/Snackbar.js                | 154 -------
 lib/snackbar/_config.scss               |   9 -
 lib/snackbar/index.d.ts                 |  69 ---
 lib/snackbar/index.js                   |  27 --
 lib/snackbar/theme.scss                 |  49 --
 lib/switch/Switch.js                    | 151 -------
 lib/switch/Thumb.js                     |  37 --
 lib/switch/_config.scss                 |  22 -
 lib/switch/index.d.ts                   |  78 ----
 lib/switch/index.js                     |  36 --
 lib/switch/theme.scss                   | 123 -----
 lib/table/Table.js                      | 203 ---------
 lib/table/TableHead.js                  |  75 ----
 lib/table/TableRow.js                   | 172 -------
 lib/table/_config.scss                  |   5 -
 lib/table/index.d.ts                    |  71 ---
 lib/table/index.js                      |  38 --
 lib/table/theme.scss                    |  59 ---
 lib/tabs/Tab.js                         | 121 -----
 lib/tabs/TabContent.js                  |  72 ---
 lib/tabs/Tabs.js                        | 268 -----------
 lib/tabs/__tests__/index.spec.js        | 176 --------
 lib/tabs/_config.scss                   |  20 -
 lib/tabs/index.d.ts                     | 121 -----
 lib/tabs/index.js                       |  36 --
 lib/tabs/theme.scss                     | 142 ------
 lib/time_picker/Clock.js                | 181 --------
 lib/time_picker/ClockFace.js            | 122 -----
 lib/time_picker/ClockHand.js            | 175 --------
 lib/time_picker/ClockHours.js           | 149 ------
 lib/time_picker/ClockMinutes.js         | 105 -----
 lib/time_picker/TimePicker.js           | 196 --------
 lib/time_picker/TimePickerDialog.js     | 202 ---------
 lib/time_picker/_config.scss            |  27 --
 lib/time_picker/index.d.ts              | 137 ------
 lib/time_picker/index.js                |  35 --
 lib/time_picker/theme.scss              | 168 -------
 lib/tooltip/Tooltip.js                  | 305 -------------
 lib/tooltip/_config.scss                |   8 -
 lib/tooltip/index.d.ts                  |  47 --
 lib/tooltip/index.js                    |  24 -
 lib/tooltip/theme.scss                  |  55 ---
 lib/utils/events.js                     |  69 ---
 lib/utils/index.js                      |  30 --
 lib/utils/polyfills.js                  |  15 -
 lib/utils/prefixer.js                   |  47 --
 lib/utils/react.js                      |   9 -
 lib/utils/testing.js                    |  38 --
 lib/utils/time.js                       | 297 ------------
 lib/utils/utils.js                      |  73 ---
 212 files changed, 19955 deletions(-)
 delete mode 100644 lib/_colors.scss
 delete mode 100644 lib/_globals.scss
 delete mode 100644 lib/_mixins.scss
 delete mode 100644 lib/animations/index.js
 delete mode 100644 lib/animations/slide-left.scss
 delete mode 100644 lib/animations/slide-right.scss
 delete mode 100644 lib/animations/zoom-in.scss
 delete mode 100644 lib/animations/zoom-out.scss
 delete mode 100644 lib/app_bar/AppBar.js
 delete mode 100644 lib/app_bar/_config.scss
 delete mode 100644 lib/app_bar/index.d.ts
 delete mode 100644 lib/app_bar/index.js
 delete mode 100644 lib/app_bar/theme.scss
 delete mode 100644 lib/autocomplete/Autocomplete.js
 delete mode 100644 lib/autocomplete/_config.scss
 delete mode 100644 lib/autocomplete/index.d.ts
 delete mode 100644 lib/autocomplete/index.js
 delete mode 100644 lib/autocomplete/theme.scss
 delete mode 100644 lib/avatar/Avatar.js
 delete mode 100644 lib/avatar/_config.scss
 delete mode 100644 lib/avatar/index.d.ts
 delete mode 100644 lib/avatar/index.js
 delete mode 100644 lib/avatar/theme.scss
 delete mode 100644 lib/button/BrowseButton.js
 delete mode 100644 lib/button/Button.js
 delete mode 100644 lib/button/IconButton.js
 delete mode 100644 lib/button/__test__/index.spec.js
 delete mode 100644 lib/button/_config.scss
 delete mode 100644 lib/button/_mixins.scss
 delete mode 100644 lib/button/index.d.ts
 delete mode 100644 lib/button/index.js
 delete mode 100644 lib/button/theme.scss
 delete mode 100644 lib/card/Card.js
 delete mode 100644 lib/card/CardActions.js
 delete mode 100644 lib/card/CardMedia.js
 delete mode 100644 lib/card/CardText.js
 delete mode 100644 lib/card/CardTitle.js
 delete mode 100644 lib/card/_config.scss
 delete mode 100644 lib/card/index.d.ts
 delete mode 100644 lib/card/index.js
 delete mode 100644 lib/card/theme.scss
 delete mode 100644 lib/checkbox/Check.js
 delete mode 100644 lib/checkbox/Checkbox.js
 delete mode 100644 lib/checkbox/_config.scss
 delete mode 100644 lib/checkbox/index.d.ts
 delete mode 100644 lib/checkbox/index.js
 delete mode 100644 lib/checkbox/theme.scss
 delete mode 100644 lib/chip/Chip.js
 delete mode 100644 lib/chip/_config.scss
 delete mode 100644 lib/chip/index.d.ts
 delete mode 100644 lib/chip/index.js
 delete mode 100644 lib/chip/theme.scss
 delete mode 100644 lib/commons.scss
 delete mode 100644 lib/date_picker/Calendar.js
 delete mode 100644 lib/date_picker/CalendarDay.js
 delete mode 100644 lib/date_picker/CalendarMonth.js
 delete mode 100644 lib/date_picker/DatePicker.js
 delete mode 100644 lib/date_picker/DatePickerDialog.js
 delete mode 100644 lib/date_picker/__test__/index.spec.js
 delete mode 100644 lib/date_picker/_config.scss
 delete mode 100644 lib/date_picker/index.d.ts
 delete mode 100644 lib/date_picker/index.js
 delete mode 100644 lib/date_picker/theme.scss
 delete mode 100644 lib/dialog/Dialog.js
 delete mode 100644 lib/dialog/_config.scss
 delete mode 100644 lib/dialog/index.d.ts
 delete mode 100644 lib/dialog/index.js
 delete mode 100644 lib/dialog/theme.scss
 delete mode 100644 lib/drawer/Drawer.js
 delete mode 100644 lib/drawer/_config.scss
 delete mode 100644 lib/drawer/index.d.ts
 delete mode 100644 lib/drawer/index.js
 delete mode 100644 lib/drawer/theme.scss
 delete mode 100644 lib/dropdown/Dropdown.js
 delete mode 100644 lib/dropdown/_config.scss
 delete mode 100644 lib/dropdown/index.d.ts
 delete mode 100644 lib/dropdown/index.js
 delete mode 100644 lib/dropdown/theme.scss
 delete mode 100644 lib/font_icon/FontIcon.js
 delete mode 100644 lib/font_icon/index.d.ts
 delete mode 100644 lib/font_icon/index.js
 delete mode 100644 lib/form/Form.js
 delete mode 100644 lib/form/index.js
 delete mode 100644 lib/hoc/ActivableRenderer.js
 delete mode 100644 lib/hoc/Portal.js
 delete mode 100644 lib/identifiers.js
 delete mode 100644 lib/index.d.ts
 delete mode 100644 lib/index.js
 delete mode 100644 lib/input/Input.js
 delete mode 100644 lib/input/_config.scss
 delete mode 100644 lib/input/index.d.ts
 delete mode 100644 lib/input/index.js
 delete mode 100644 lib/input/theme.scss
 delete mode 100644 lib/layout/Layout.js
 delete mode 100644 lib/layout/NavDrawer.js
 delete mode 100644 lib/layout/Panel.js
 delete mode 100644 lib/layout/Sidebar.js
 delete mode 100644 lib/layout/_config.scss
 delete mode 100644 lib/layout/_mixins.scss
 delete mode 100644 lib/layout/index.d.ts
 delete mode 100644 lib/layout/index.js
 delete mode 100644 lib/layout/theme.scss
 delete mode 100644 lib/link/Link.js
 delete mode 100644 lib/link/index.d.ts
 delete mode 100644 lib/link/index.js
 delete mode 100644 lib/link/theme.scss
 delete mode 100644 lib/list/List.js
 delete mode 100644 lib/list/ListCheckbox.js
 delete mode 100644 lib/list/ListDivider.js
 delete mode 100644 lib/list/ListItem.js
 delete mode 100644 lib/list/ListItemAction.js
 delete mode 100644 lib/list/ListItemActions.js
 delete mode 100644 lib/list/ListItemContent.js
 delete mode 100644 lib/list/ListItemLayout.js
 delete mode 100644 lib/list/ListItemText.js
 delete mode 100644 lib/list/ListSubHeader.js
 delete mode 100644 lib/list/_config.scss
 delete mode 100644 lib/list/index.d.ts
 delete mode 100644 lib/list/index.js
 delete mode 100644 lib/list/theme.scss
 delete mode 100644 lib/menu/IconMenu.js
 delete mode 100644 lib/menu/Menu.js
 delete mode 100644 lib/menu/MenuDivider.js
 delete mode 100644 lib/menu/MenuItem.js
 delete mode 100644 lib/menu/__test__/index.spec.js
 delete mode 100644 lib/menu/_config.scss
 delete mode 100644 lib/menu/index.d.ts
 delete mode 100644 lib/menu/index.js
 delete mode 100644 lib/menu/theme.scss
 delete mode 100644 lib/navigation/Navigation.js
 delete mode 100644 lib/navigation/_config.scss
 delete mode 100644 lib/navigation/index.d.ts
 delete mode 100644 lib/navigation/index.js
 delete mode 100644 lib/navigation/theme.scss
 delete mode 100644 lib/overlay/Overlay.js
 delete mode 100644 lib/overlay/_config.scss
 delete mode 100644 lib/overlay/index.js
 delete mode 100644 lib/overlay/theme.scss
 delete mode 100644 lib/progress_bar/ProgressBar.js
 delete mode 100644 lib/progress_bar/__test__/index.spec.js
 delete mode 100644 lib/progress_bar/_config.scss
 delete mode 100644 lib/progress_bar/index.d.ts
 delete mode 100644 lib/progress_bar/index.js
 delete mode 100644 lib/progress_bar/theme.scss
 delete mode 100644 lib/radio/Radio.js
 delete mode 100644 lib/radio/RadioButton.js
 delete mode 100644 lib/radio/RadioGroup.js
 delete mode 100644 lib/radio/_config.scss
 delete mode 100644 lib/radio/index.d.ts
 delete mode 100644 lib/radio/index.js
 delete mode 100644 lib/radio/theme.scss
 delete mode 100644 lib/ripple/Ripple.js
 delete mode 100644 lib/ripple/_config.scss
 delete mode 100644 lib/ripple/index.d.ts
 delete mode 100644 lib/ripple/index.js
 delete mode 100644 lib/ripple/theme.scss
 delete mode 100644 lib/slider/Slider.js
 delete mode 100644 lib/slider/__tests__/index.spec.js
 delete mode 100644 lib/slider/_config.scss
 delete mode 100644 lib/slider/index.d.ts
 delete mode 100644 lib/slider/index.js
 delete mode 100644 lib/slider/theme.scss
 delete mode 100644 lib/snackbar/Snackbar.js
 delete mode 100644 lib/snackbar/_config.scss
 delete mode 100644 lib/snackbar/index.d.ts
 delete mode 100644 lib/snackbar/index.js
 delete mode 100644 lib/snackbar/theme.scss
 delete mode 100644 lib/switch/Switch.js
 delete mode 100644 lib/switch/Thumb.js
 delete mode 100644 lib/switch/_config.scss
 delete mode 100644 lib/switch/index.d.ts
 delete mode 100644 lib/switch/index.js
 delete mode 100644 lib/switch/theme.scss
 delete mode 100644 lib/table/Table.js
 delete mode 100644 lib/table/TableHead.js
 delete mode 100644 lib/table/TableRow.js
 delete mode 100644 lib/table/_config.scss
 delete mode 100644 lib/table/index.d.ts
 delete mode 100644 lib/table/index.js
 delete mode 100644 lib/table/theme.scss
 delete mode 100644 lib/tabs/Tab.js
 delete mode 100644 lib/tabs/TabContent.js
 delete mode 100644 lib/tabs/Tabs.js
 delete mode 100644 lib/tabs/__tests__/index.spec.js
 delete mode 100644 lib/tabs/_config.scss
 delete mode 100644 lib/tabs/index.d.ts
 delete mode 100644 lib/tabs/index.js
 delete mode 100644 lib/tabs/theme.scss
 delete mode 100644 lib/time_picker/Clock.js
 delete mode 100644 lib/time_picker/ClockFace.js
 delete mode 100644 lib/time_picker/ClockHand.js
 delete mode 100644 lib/time_picker/ClockHours.js
 delete mode 100644 lib/time_picker/ClockMinutes.js
 delete mode 100644 lib/time_picker/TimePicker.js
 delete mode 100644 lib/time_picker/TimePickerDialog.js
 delete mode 100644 lib/time_picker/_config.scss
 delete mode 100644 lib/time_picker/index.d.ts
 delete mode 100644 lib/time_picker/index.js
 delete mode 100644 lib/time_picker/theme.scss
 delete mode 100644 lib/tooltip/Tooltip.js
 delete mode 100644 lib/tooltip/_config.scss
 delete mode 100644 lib/tooltip/index.d.ts
 delete mode 100644 lib/tooltip/index.js
 delete mode 100644 lib/tooltip/theme.scss
 delete mode 100644 lib/utils/events.js
 delete mode 100644 lib/utils/index.js
 delete mode 100644 lib/utils/polyfills.js
 delete mode 100644 lib/utils/prefixer.js
 delete mode 100644 lib/utils/react.js
 delete mode 100644 lib/utils/testing.js
 delete mode 100644 lib/utils/time.js
 delete mode 100644 lib/utils/utils.js

diff --git a/lib/_colors.scss b/lib/_colors.scss
deleted file mode 100644
index c2eb5099c..000000000
--- a/lib/_colors.scss
+++ /dev/null
@@ -1,301 +0,0 @@
-//-- Color definitions taken from Material Design Lite
-
-// Red
-$palette-red-50: rgb(255,235,238);
-$palette-red-100: rgb(255,205,210);
-$palette-red-200: rgb(239,154,154);
-$palette-red-300: rgb(229,115,115);
-$palette-red-400: rgb(239,83,80);
-$palette-red-500: rgb(244,67,54);
-$palette-red-600: rgb(229,57,53);
-$palette-red-700: rgb(211,47,47);
-$palette-red-800: rgb(198,40,40);
-$palette-red-900: rgb(183,28,28);
-$palette-red-a100: rgb(255,138,128);
-$palette-red-a200: rgb(255,82,82);
-$palette-red-a400: rgb(255,23,68);
-$palette-red-a700: rgb(213,0,0);
-
-// Pink
-$palette-pink-50: rgb(252,228,236);
-$palette-pink-100: rgb(248,187,208);
-$palette-pink-200: rgb(244,143,177);
-$palette-pink-300: rgb(240,98,146);
-$palette-pink-400: rgb(236,64,122);
-$palette-pink-500: rgb(233,30,99);
-$palette-pink-600: rgb(216,27,96);
-$palette-pink-700: rgb(194,24,91);
-$palette-pink-800: rgb(173,20,87);
-$palette-pink-900: rgb(136,14,79);
-$palette-pink-a100: rgb(255,128,171);
-$palette-pink-a200: rgb(255,64,129);
-$palette-pink-a400: rgb(245,0,87);
-$palette-pink-a700: rgb(197,17,98);
-
-// Purple
-$palette-purple-50: rgb(243,229,245);
-$palette-purple-100: rgb(225,190,231);
-$palette-purple-200: rgb(206,147,216);
-$palette-purple-300: rgb(186,104,200);
-$palette-purple-400: rgb(171,71,188);
-$palette-purple-500: rgb(156,39,176);
-$palette-purple-600: rgb(142,36,170);
-$palette-purple-700: rgb(123,31,162);
-$palette-purple-800: rgb(106,27,154);
-$palette-purple-900: rgb(74,20,140);
-$palette-purple-a100: rgb(234,128,252);
-$palette-purple-a200: rgb(224,64,251);
-$palette-purple-a400: rgb(213,0,249);
-$palette-purple-a700: rgb(170,0,255);
-
-//Deep Purple
-$palette-deep-purple-50: rgb(237,231,246);
-$palette-deep-purple-100: rgb(209,196,233);
-$palette-deep-purple-200: rgb(179,157,219);
-$palette-deep-purple-300: rgb(149,117,205);
-$palette-deep-purple-400: rgb(126,87,194);
-$palette-deep-purple-500: rgb(103,58,183);
-$palette-deep-purple-600: rgb(94,53,177);
-$palette-deep-purple-700: rgb(81,45,168);
-$palette-deep-purple-800: rgb(69,39,160);
-$palette-deep-purple-900: rgb(49,27,146);
-$palette-deep-purple-a100: rgb(179,136,255);
-$palette-deep-purple-a200: rgb(124,77,255);
-$palette-deep-purple-a400: rgb(101,31,255);
-$palette-deep-purple-a700: rgb(98,0,234);
-
-// Indigo
-$palette-indigo-50: rgb(232,234,246);
-$palette-indigo-100: rgb(197,202,233);
-$palette-indigo-200: rgb(159,168,218);
-$palette-indigo-300: rgb(121,134,203);
-$palette-indigo-400: rgb(92,107,192);
-$palette-indigo-500: rgb(63,81,181);
-$palette-indigo-600: rgb(57,73,171);
-$palette-indigo-700: rgb(48,63,159);
-$palette-indigo-800: rgb(40,53,147);
-$palette-indigo-900: rgb(26,35,126);
-$palette-indigo-a100: rgb(140,158,255);
-$palette-indigo-a200: rgb(83,109,254);
-$palette-indigo-a400: rgb(61,90,254);
-$palette-indigo-a700: rgb(48,79,254);
-
-// Blue
-$palette-blue-50: rgb(227,242,253);
-$palette-blue-100: rgb(187,222,251);
-$palette-blue-200: rgb(144,202,249);
-$palette-blue-300: rgb(100,181,246);
-$palette-blue-400: rgb(66,165,245);
-$palette-blue-500: rgb(33,150,243);
-$palette-blue-600: rgb(30,136,229);
-$palette-blue-700: rgb(25,118,210);
-$palette-blue-800: rgb(21,101,192);
-$palette-blue-900: rgb(13,71,161);
-$palette-blue-a100: rgb(130,177,255);
-$palette-blue-a200: rgb(68,138,255);
-$palette-blue-a400: rgb(41,121,255);
-$palette-blue-a700: rgb(41,98,255);
-
-// Light Blue
-$palette-light-blue-50: rgb(225,245,254);
-$palette-light-blue-100: rgb(179,229,252);
-$palette-light-blue-200: rgb(129,212,250);
-$palette-light-blue-300: rgb(79,195,247);
-$palette-light-blue-400: rgb(41,182,246);
-$palette-light-blue-500: rgb(3,169,244);
-$palette-light-blue-600: rgb(3,155,229);
-$palette-light-blue-700: rgb(2,136,209);
-$palette-light-blue-800: rgb(2,119,189);
-$palette-light-blue-900: rgb(1,87,155);
-$palette-light-blue-a100: rgb(128,216,255);
-$palette-light-blue-a200: rgb(64,196,255);
-$palette-light-blue-a400: rgb(0,176,255);
-$palette-light-blue-a700: rgb(0,145,234);
-
-// Cyan
-$palette-cyan-50: rgb(224,247,250);
-$palette-cyan-100: rgb(178,235,242);
-$palette-cyan-200: rgb(128,222,234);
-$palette-cyan-300: rgb(77,208,225);
-$palette-cyan-400: rgb(38,198,218);
-$palette-cyan-500: rgb(0,188,212);
-$palette-cyan-600: rgb(0,172,193);
-$palette-cyan-700: rgb(0,151,167);
-$palette-cyan-800: rgb(0,131,143);
-$palette-cyan-900: rgb(0,96,100);
-$palette-cyan-a100: rgb(132,255,255);
-$palette-cyan-a200: rgb(24,255,255);
-$palette-cyan-a400: rgb(0,229,255);
-$palette-cyan-a700: rgb(0,184,212);
-
-// Teal
-$palette-teal-50: rgb(224,242,241);
-$palette-teal-100: rgb(178,223,219);
-$palette-teal-200: rgb(128,203,196);
-$palette-teal-300: rgb(77,182,172);
-$palette-teal-400: rgb(38,166,154);
-$palette-teal-500: rgb(0,150,136);
-$palette-teal-600: rgb(0,137,123);
-$palette-teal-700: rgb(0,121,107);
-$palette-teal-800: rgb(0,105,92);
-$palette-teal-900: rgb(0,77,64);
-$palette-teal-a100: rgb(167,255,235);
-$palette-teal-a200: rgb(100,255,218);
-$palette-teal-a400: rgb(29,233,182);
-$palette-teal-a700: rgb(0,191,165);
-
-// Green
-$palette-green-50: rgb(232,245,233);
-$palette-green-100: rgb(200,230,201);
-$palette-green-200: rgb(165,214,167);
-$palette-green-300: rgb(129,199,132);
-$palette-green-400: rgb(102,187,106);
-$palette-green-500: rgb(76,175,80);
-$palette-green-600: rgb(67,160,71);
-$palette-green-700: rgb(56,142,60);
-$palette-green-800: rgb(46,125,50);
-$palette-green-900: rgb(27,94,32);
-$palette-green-a100: rgb(185,246,202);
-$palette-green-a200: rgb(105,240,174);
-$palette-green-a400: rgb(0,230,118);
-$palette-green-a700: rgb(0,200,83);
-
-// Green
-$palette-light-green-50: rgb(241,248,233);
-$palette-light-green-100: rgb(220,237,200);
-$palette-light-green-200: rgb(197,225,165);
-$palette-light-green-300: rgb(174,213,129);
-$palette-light-green-400: rgb(156,204,101);
-$palette-light-green-500: rgb(139,195,74);
-$palette-light-green-600: rgb(124,179,66);
-$palette-light-green-700: rgb(104,159,56);
-$palette-light-green-800: rgb(85,139,47);
-$palette-light-green-900: rgb(51,105,30);
-$palette-light-green-a100: rgb(204,255,144);
-$palette-light-green-a200: rgb(178,255,89);
-$palette-light-green-a400: rgb(118,255,3);
-$palette-light-green-a700: rgb(100,221,23);
-
-// Lime
-$palette-lime-50: rgb(249,251,231);
-$palette-lime-100: rgb(240,244,195);
-$palette-lime-200: rgb(230,238,156);
-$palette-lime-300: rgb(220,231,117);
-$palette-lime-400: rgb(212,225,87);
-$palette-lime-500: rgb(205,220,57);
-$palette-lime-600: rgb(192,202,51);
-$palette-lime-700: rgb(175,180,43);
-$palette-lime-800: rgb(158,157,36);
-$palette-lime-900: rgb(130,119,23);
-$palette-lime-a100: rgb(244,255,129);
-$palette-lime-a200: rgb(238,255,65);
-$palette-lime-a400: rgb(198,255,0);
-$palette-lime-a700: rgb(174,234,0);
-
-// Yellow
-$palette-yellow-50: rgb(255,253,231);
-$palette-yellow-100: rgb(255,249,196);
-$palette-yellow-200: rgb(255,245,157);
-$palette-yellow-300: rgb(255,241,118);
-$palette-yellow-400: rgb(255,238,88);
-$palette-yellow-500: rgb(255,235,59);
-$palette-yellow-600: rgb(253,216,53);
-$palette-yellow-700: rgb(251,192,45);
-$palette-yellow-800: rgb(249,168,37);
-$palette-yellow-900: rgb(245,127,23);
-$palette-yellow-a100: rgb(255,255,141);
-$palette-yellow-a200: rgb(255,255,0);
-$palette-yellow-a400: rgb(255,234,0);
-$palette-yellow-a700: rgb(255,214,0);
-
-// Amber
-$palette-amber-50: rgb(255,248,225);
-$palette-amber-100: rgb(255,236,179);
-$palette-amber-200: rgb(255,224,130);
-$palette-amber-300: rgb(255,213,79);
-$palette-amber-400: rgb(255,202,40);
-$palette-amber-500: rgb(255,193,7);
-$palette-amber-600: rgb(255,179,0);
-$palette-amber-700: rgb(255,160,0);
-$palette-amber-800: rgb(255,143,0);
-$palette-amber-900: rgb(255,111,0);
-$palette-amber-a100: rgb(255,229,127);
-$palette-amber-a200: rgb(255,215,64);
-$palette-amber-a400: rgb(255,196,0);
-$palette-amber-a700: rgb(255,171,0);
-
-// Orange
-$palette-orange-50: rgb(255,243,224);
-$palette-orange-100: rgb(255,224,178);
-$palette-orange-200: rgb(255,204,128);
-$palette-orange-300: rgb(255,183,77);
-$palette-orange-400: rgb(255,167,38);
-$palette-orange-500: rgb(255,152,0);
-$palette-orange-600: rgb(251,140,0);
-$palette-orange-700: rgb(245,124,0);
-$palette-orange-800: rgb(239,108,0);
-$palette-orange-900: rgb(230,81,0);
-$palette-orange-a100: rgb(255,209,128);
-$palette-orange-a200: rgb(255,171,64);
-$palette-orange-a400: rgb(255,145,0);
-$palette-orange-a700: rgb(255,109,0);
-
-// Deep Orange
-$palette-deep-orange-50: rgb(251,233,231);
-$palette-deep-orange-100: rgb(255,204,188);
-$palette-deep-orange-200: rgb(255,171,145);
-$palette-deep-orange-300: rgb(255,138,101);
-$palette-deep-orange-400: rgb(255,112,67);
-$palette-deep-orange-500: rgb(255,87,34);
-$palette-deep-orange-600: rgb(244,81,30);
-$palette-deep-orange-700: rgb(230,74,25);
-$palette-deep-orange-800: rgb(216,67,21);
-$palette-deep-orange-900: rgb(191,54,12);
-$palette-deep-orange-a100: rgb(255,158,128);
-$palette-deep-orange-a200: rgb(255,110,64);
-$palette-deep-orange-a400: rgb(255,61,0);
-$palette-deep-orange-a700: rgb(221,44,0);
-
-// Brown
-$palette-brown-50: rgb(239,235,233);
-$palette-brown-100: rgb(215,204,200);
-$palette-brown-200: rgb(188,170,164);
-$palette-brown-300: rgb(161,136,127);
-$palette-brown-400: rgb(141,110,99);
-$palette-brown-500: rgb(121,85,72);
-$palette-brown-600: rgb(109,76,65);
-$palette-brown-700: rgb(93,64,55);
-$palette-brown-800: rgb(78,52,46);
-$palette-brown-900: rgb(62,39,35);
-
-// Grey
-$palette-grey-50: rgb(250,250,250);
-$palette-grey-100: rgb(245,245,245);
-$palette-grey-200: rgb(238,238,238);
-$palette-grey-300: rgb(224,224,224);
-$palette-grey-400: rgb(189,189,189);
-$palette-grey-500: rgb(158,158,158);
-$palette-grey-600: rgb(117,117,117);
-$palette-grey-700: rgb(97,97,97);
-$palette-grey-800: rgb(66,66,66);
-$palette-grey-900: rgb(33,33,33);
-
-// Blue Grey
-$palette-blue-grey-50: rgb(236,239,241);
-$palette-blue-grey-100: rgb(207,216,220);
-$palette-blue-grey-200: rgb(176,190,197);
-$palette-blue-grey-300: rgb(144,164,174);
-$palette-blue-grey-400: rgb(120,144,156);
-$palette-blue-grey-500: rgb(96,125,139);
-$palette-blue-grey-600: rgb(84,110,122);
-$palette-blue-grey-700: rgb(69,90,100);
-$palette-blue-grey-800: rgb(55,71,79);
-$palette-blue-grey-900: rgb(38,50,56);
-
-$color-black: rgb(0,0,0);
-$color-white: rgb(255,255,255);
-
-//-- The two possible colors for overlayed text.
-$styleguide-generate-template: false !default;
-$color-dark-contrast: $color-white !default;
-$color-light-contrast: $color-black !default;
diff --git a/lib/_globals.scss b/lib/_globals.scss
deleted file mode 100644
index 73edd5f9e..000000000
--- a/lib/_globals.scss
+++ /dev/null
@@ -1,81 +0,0 @@
-//-- Color configuration
-$color-divider: $palette-grey-200 !default;
-$color-background: $color-white !default;
-$color-text: $palette-grey-900 !default;
-$color-text-secondary: $palette-grey-600 !default;
-
-$color-primary: $palette-indigo-500 !default;
-$color-primary-dark: $palette-indigo-700 !default;
-$color-accent: $palette-pink-a200 !default;
-$color-accent-dark: $palette-pink-700 !default;
-$color-primary-contrast: $color-dark-contrast !default;
-$color-accent-contrast: $color-dark-contrast !default;
-
-//-- Sizing
-$unit: 1rem !default;
-
-// -- Fonts
-$preferred-font: "Roboto", "Helvetica", "Arial", sans-serif !default;
-$font-size: 1.6 * $unit !default;
-$font-size-tiny: 1.2 * $unit !default;
-$font-size-small: 1.4 * $unit !default;
-$font-size-normal: $font-size !default;
-$font-size-big: 1.8 * $unit !default;
-$font-weight-thin: 300 !default;
-$font-weight-normal: 400 !default;
-$font-weight-semi-bold: 500 !default;
-$font-weight-bold: 700 !default;
-
-//-- Shadows
-$shadow-key-umbra-opacity: 0.2 !default;
-$shadow-key-penumbra-opacity: 0.14 !default;
-$shadow-ambient-shadow-opacity: 0.12 !default;
-
-//-- Depth Shadows
-$zdepth-shadow-1: 0 1px 6px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.24);
-$zdepth-shadow-2: 0 3px 10px rgba(0,0,0,.16), 0 3px 10px rgba(0,0,0,.23);
-$zdepth-shadow-3: 0 10px 30px rgba(0,0,0,.19), 0 6px 10px rgba(0,0,0,.23);
-$zdepth-shadow-4: 0 14px 45px rgba(0,0,0,.25), 0 10px 18px rgba(0,0,0,.22);
-$zdepth-shadow-5: 0 19px 60px rgba(0,0,0,.3), 0 15px 20px rgba(0,0,0,.22);
-
-//-- Animation
-$animation-duration: .35s;
-$animation-delay: $animation-duration / 5;
-$animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
-$animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;
-$animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
-$animation-curve-default: $animation-curve-fast-out-slow-in !default;
-
-//-- Indexes
-$z-index-highest: 300 !default;
-$z-index-higher: 200 !default;
-$z-index-high: 100 !default;
-$z-index-normal: 1 !default;
-$z-index-low: -100 !default;
-$z-index-lower: -200 !default;
-
-//-- Breakpoints
-// height of app bar
-// https://material.google.com/layout/metrics-keylines.html#metrics-keylines-keylines-spacing
-$standard-increment-mobile: (5.6 * $unit) !default;
-$standard-increment-desktop: (6.4 * $unit) !default;
-
-// https://material.google.com/layout/metrics-keylines.html#metrics-keylines-baseline-grids
-$baseline-grid: (0.8 * $unit) !default;
-$layout-gutter-width-sm: ($baseline-grid * 2) !default;
-$layout-gutter-width: ($baseline-grid * 3) !default;
-
-// https://material.google.com/layout/responsive-ui.html#responsive-ui-breakpoints
-// 4 columns
-$layout-breakpoint-xxs: 480px !default;
-// 8 columns
-$layout-breakpoint-xs: 600px !default;
-// 12 columns
-$layout-breakpoint-sm-tablet: 720px !default;
-$layout-breakpoint-sm: 840px !default;
-$layout-breakpoint-md: 960px !default;
-$layout-breakpoint-lg-tablet: 1024px !default;
-$layout-breakpoint-lg: 1280px !default;
-$layout-breakpoint-xl: 1440px !default;
-$layout-breakpoint-xxl: 1600px !default;
-$layout-breakpoint-xxxl: 1920px !default;
diff --git a/lib/_mixins.scss b/lib/_mixins.scss
deleted file mode 100644
index 40490c702..000000000
--- a/lib/_mixins.scss
+++ /dev/null
@@ -1,260 +0,0 @@
-// scss-lint:disable VendorPrefix
-@mixin typo-preferred-font($use-preferred: true) {
-  @if $use-preferred {
-    font-family: $preferred-font;
-  }
-}
-
-@mixin typo-display-4($color-contrast: false, $use-preferred: true) {
-  @include typo-preferred-font($use-preferred);
-  font-size: $unit * 11.2;
-  font-weight: 300;
-  line-height: 1;
-  letter-spacing: -.04em;
-
-  @if $color-contrast {
-    opacity: .54;
-  }
-}
-
-@mixin typo-display-3($color-contrast: false, $use-preferred: true) {
-  @include typo-preferred-font($use-preferred);
-  font-size: $unit * 5.6;
-  font-weight: 400;
-  line-height: 1.35;
-  letter-spacing: -.02em;
-
-  @if $color-contrast {
-    opacity: .54;
-  }
-}
-
-@mixin typo-display-2($color-contrast: false, $use-preferred: true) {
-  @include typo-preferred-font($use-preferred);
-  font-size: $unit * 4.5;
-  font-weight: 400;
-  line-height: $unit * 4.8;
-
-  @if $color-contrast {
-    opacity: .54;
-  }
-}
-
-@mixin typo-display-1($color-contrast: false, $use-preferred: true) {
-  @include typo-preferred-font($use-preferred);
-  font-size: $unit * 3.4;
-  font-weight: 400;
-  line-height: $unit * 4;
-
-  @if $color-contrast {
-    opacity: .54;
-  }
-}
-
-@mixin typo-headline($color-contrast: false, $use-preferred: true) {
-  @include typo-preferred-font($use-preferred);
-  font-size: $unit * 2.4;
-  font-weight: 400;
-  line-height: $unit * 3.2;
-  -moz-osx-font-smoothing: grayscale;
-
-  @if $color-contrast {
-    opacity: .87;
-  }
-}
-
-@mixin typo-title($color-contrast: false, $use-preferred: true) {
-  @include typo-preferred-font($use-preferred);
-  font-size: $unit * 2;
-  font-weight: 500;
-  line-height: 1;
-  letter-spacing: .02em;
-
-  @if $color-contrast {
-    opacity: .87;
-  }
-}
-
-@mixin typo-subhead($color-contrast: false, $use-preferred: true) {
-  @include typo-preferred-font($use-preferred);
-  font-size: $unit * 1.6;
-  font-weight: 400;
-  line-height: $unit * 2.4;
-  letter-spacing: .04em;
-
-  @if $color-contrast {
-    opacity: .87;
-  }
-}
-
-@mixin typo-subhead-2($color-contrast: false, $use-preferred: true) {
-  @include typo-preferred-font($use-preferred);
-  font-size: $unit * 1.6;
-  font-weight: 400;
-  line-height: $unit * 2.8;
-  letter-spacing: .04em;
-
-  @if $color-contrast {
-    opacity: .87;
-  }
-}
-
-@mixin typo-body-2($color-contrast: false, $use-preferred: false) {
-  @include typo-preferred-font($use-preferred);
-  font-size: $unit * 1.4;
-  line-height: $unit * 2.4;
-  letter-spacing: 0;
-
-  @if $use-preferred {
-    font-weight: 500;
-  } @else {
-    font-weight: bold;
-  }
-
-  @if $color-contrast {
-    opacity: .87;
-  }
-}
-
-@mixin typo-body-1($color-contrast: false, $use-preferred: false) {
-  @include typo-preferred-font($use-preferred);
-  font-size: $unit * 1.4;
-  font-weight: 400;
-  line-height: $unit * 2.4;
-  letter-spacing: 0;
-
-  @if $color-contrast {
-    opacity: .87;
-  }
-}
-
-@mixin typo-caption($color-contrast: false, $use-preferred: false) {
-  @include typo-preferred-font($use-preferred);
-  font-size: $unit * 1.2;
-  font-weight: 400;
-  line-height: 1;
-  letter-spacing: 0;
-
-  @if $color-contrast {
-    opacity: .54;
-  }
-}
-
-@mixin typo-blockquote($color-contrast: false, $use-preferred: true) {
-  @include typo-preferred-font($use-preferred);
-  position: relative;
-  font-size: $unit * 2.4;
-  font-style: italic;
-  font-weight: 300;
-  line-height: 1.35;
-  letter-spacing: .08em;
-
-  &:before {
-    position: absolute;
-    left: -.5em;
-    content: "“";
-  }
-
-  &:after {
-    margin-left: -.05em;
-    content: "”";
-  }
-
-  @if $color-contrast {
-    opacity: .54;
-  }
-}
-
-@mixin typo-menu($color-contrast: false, $use-preferred: true) {
-  @include typo-preferred-font($use-preferred);
-  font-size: $unit * 1.4;
-  font-weight: 500;
-  line-height: 1;
-  letter-spacing: 0;
-
-  @if $color-contrast {
-    opacity: .87;
-  }
-}
-
-@mixin typo-button($color-contrast: false, $use-preferred: true) {
-  @include typo-preferred-font($use-preferred);
-  font-size: $unit * 1.4;
-  font-weight: 500;
-  line-height: 1;
-  text-transform: uppercase;
-  letter-spacing: 0;
-
-  @if $color-contrast {
-    opacity: .87;
-  }
-}
-
-//-- Shadows
-@mixin focus-shadow() {
-  box-shadow: 0 0 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .36);
-}
-
-@mixin shadow-2dp() {
-  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-  0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
-  0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
-}
-
-@mixin shadow-3dp() {
-  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-  0 3px 3px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
-  0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
-}
-
-@mixin shadow-4dp() {
-  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-  0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
-  0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
-}
-
-@mixin shadow-6dp() {
-  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-  0 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
-  0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
-}
-
-@mixin shadow-8dp() {
-  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-  0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
-  0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity);
-}
-
-@mixin shadow-16dp() {
-  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-  0 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
-  0 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity);
-}
-
-//-- Animations
-@mixin material-animation-fast-out-slow-in($duration: .2s) {
-  transition-timing-function: $animation-curve-fast-out-slow-in;
-  transition-duration: $duration;
-}
-
-@mixin material-animation-linear-out-slow-in($duration: .2s) {
-  transition-timing-function: $animation-curve-linear-out-slow-in;
-  transition-duration: $duration;
-}
-
-@mixin material-animation-fast-out-linear-in($duration: .2s) {
-  transition-timing-function: $animation-curve-fast-out-linear-in;
-  transition-duration: $duration;
-}
-
-@mixin material-animation-default($duration: .2s) {
-  transition-timing-function: $animation-curve-default;
-  transition-duration: $duration;
-}
-
-@mixin no-webkit-scrollbar {
-  &::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-  }
-}
diff --git a/lib/animations/index.js b/lib/animations/index.js
deleted file mode 100644
index 787971bcc..000000000
--- a/lib/animations/index.js
+++ /dev/null
@@ -1,29 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ZoomOut = exports.ZoomIn = exports.SlideRight = exports.SlideLeft = undefined;
-
-var _slideLeft = require('./slide-left.scss');
-
-var _slideLeft2 = _interopRequireDefault(_slideLeft);
-
-var _slideRight = require('./slide-right.scss');
-
-var _slideRight2 = _interopRequireDefault(_slideRight);
-
-var _zoomIn = require('./zoom-in.scss');
-
-var _zoomIn2 = _interopRequireDefault(_zoomIn);
-
-var _zoomOut = require('./zoom-out.scss');
-
-var _zoomOut2 = _interopRequireDefault(_zoomOut);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.SlideLeft = _slideLeft2.default;
-exports.SlideRight = _slideRight2.default;
-exports.ZoomIn = _zoomIn2.default;
-exports.ZoomOut = _zoomOut2.default;
\ No newline at end of file
diff --git a/lib/animations/slide-left.scss b/lib/animations/slide-left.scss
deleted file mode 100644
index aba039958..000000000
--- a/lib/animations/slide-left.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-.enter, .leave {
-  position: absolute;
-  transition-timing-function: ease-in-out;
-  transition-duration: .35s;
-  transition-property: transform, opacity;
-}
-
-.enter {
-  opacity: 0;
-  transform: translate3d(-100%, 0, 0);
-
-  &.enterActive {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-.leave {
-  opacity: 1;
-  transform: translate3d(0, 0, 0);
-
-  &.leaveActive {
-    opacity: 0;
-    transform: translate3d(100%, 0, 0);
-  }
-}
diff --git a/lib/animations/slide-right.scss b/lib/animations/slide-right.scss
deleted file mode 100644
index 95d0e15d9..000000000
--- a/lib/animations/slide-right.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.enter, .leave {
-  position: absolute;
-}
-
-.enterActive, .leaveActive {
-  transition-timing-function: ease-in-out;
-  transition-duration: 350ms;
-  transition-property: transform, opacity;
-}
-
-.enter {
-  opacity: 0;
-  transform: translateX(100%);
-
-  &.enterActive {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-.leave {
-  opacity: 1;
-  transform: translateX(0);
-
-  &.leaveActive {
-    opacity: 0;
-    transform: translateX(-100%);
-  }
-}
diff --git a/lib/animations/zoom-in.scss b/lib/animations/zoom-in.scss
deleted file mode 100644
index d752e9401..000000000
--- a/lib/animations/zoom-in.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-
-.enter, .leave {
-  position: absolute;
-}
-
-.enterActive, .leaveActive {
-  transition: transform, opacity;
-  transition-timing-function: $animation-curve-fast-out-slow-in;
-  transition-duration: 500ms;
-}
-
-.enter {
-  opacity: 0;
-  transform: scale(0.85);
-
-  &.enterActive {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-.leave {
-  opacity: 1;
-  transform: scale(1);
-
-  &.leaveActive {
-    opacity: 0;
-    transform: scale(1.25);
-  }
-}
diff --git a/lib/animations/zoom-out.scss b/lib/animations/zoom-out.scss
deleted file mode 100644
index cf1500fc1..000000000
--- a/lib/animations/zoom-out.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-
-.enter, .leave {
-  position: absolute;
-}
-
-.enterActive, .leaveActive {
-  transition: transform, opacity;
-  transition-timing-function: $animation-curve-fast-out-slow-in;
-  transition-duration: 500ms;
-}
-
-.enter {
-  opacity: 0;
-  transform: scale(1.25);
-
-  &.enterActive {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-.leave {
-  opacity: 1;
-  transform: scale(1);
-
-  &.leaveActive {
-    opacity: 0;
-    transform: scale(0.85);
-  }
-}
diff --git a/lib/app_bar/AppBar.js b/lib/app_bar/AppBar.js
deleted file mode 100644
index 852b9277c..000000000
--- a/lib/app_bar/AppBar.js
+++ /dev/null
@@ -1,177 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AppBar = exports.appBarFactory = undefined;
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _IconButton = require('../button/IconButton.js');
-
-var _IconButton2 = _interopRequireDefault(_IconButton);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(IconButton) {
-  var AppBar = function (_React$Component) {
-    _inherits(AppBar, _React$Component);
-
-    function AppBar() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, AppBar);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = AppBar.__proto__ || Object.getPrototypeOf(AppBar)).call.apply(_ref, [this].concat(args))), _this), _this.state = { hidden: false, height: 0 }, _this.initializeScroll = function () {
-        window.addEventListener('scroll', _this.handleScroll);
-
-        var _this$rootNode$getBou = _this.rootNode.getBoundingClientRect(),
-            height = _this$rootNode$getBou.height;
-
-        _this.curScroll = window.scrollY;
-        _this.setState({ height: height });
-      }, _this.endScroll = function () {
-        window.removeEventListener('scroll', _this.handleScroll);
-      }, _this.handleScroll = function () {
-        var scrollDiff = _this.curScroll - window.scrollY;
-        var hidden = scrollDiff < 0 && window.scrollY !== undefined && window.scrollY > _this.state.height;
-        _this.setState({ hidden: hidden });
-        _this.curScroll = window.scrollY;
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(AppBar, [{
-      key: 'componentDidMount',
-      value: function componentDidMount() {
-        if (this.props.scrollHide) {
-          this.initializeScroll();
-        }
-      }
-    }, {
-      key: 'componentWillReceiveProps',
-      value: function componentWillReceiveProps(nextProps) {
-        if (!this.props.scrollHide && nextProps.scrollHide) {
-          this.initializeScroll();
-        }
-
-        if (this.props.scrollHide && !nextProps.scrollHide) {
-          this.endScroll();
-        }
-      }
-    }, {
-      key: 'componentWillUnmount',
-      value: function componentWillUnmount() {
-        if (this.props.scrollHide) {
-          this.endScroll();
-        }
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var _classnames,
-            _this2 = this;
-
-        var _props = this.props,
-            children = _props.children,
-            leftIcon = _props.leftIcon,
-            onLeftIconClick = _props.onLeftIconClick,
-            onRightIconClick = _props.onRightIconClick,
-            rightIcon = _props.rightIcon,
-            theme = _props.theme,
-            title = _props.title;
-
-        var className = (0, _classnames3.default)(theme.appBar, (_classnames = {}, _defineProperty(_classnames, theme.fixed, this.props.fixed), _defineProperty(_classnames, theme.flat, this.props.flat), _defineProperty(_classnames, theme.scrollHide, this.state.hidden), _classnames), this.props.className);
-
-        return _react2.default.createElement(
-          'header',
-          {
-            className: className,
-            'data-react-toolbox': 'app-bar',
-            ref: function ref(node) {
-              _this2.rootNode = node;
-            }
-          },
-          leftIcon && _react2.default.createElement(IconButton, {
-            inverse: true,
-            className: (0, _classnames3.default)(theme.leftIcon),
-            onClick: onLeftIconClick,
-            icon: leftIcon }),
-          title && _react2.default.createElement(
-            'h1',
-            { className: (0, _classnames3.default)(theme.title) },
-            title
-          ),
-          children,
-          rightIcon && _react2.default.createElement(IconButton, {
-            inverse: true,
-            className: (0, _classnames3.default)(theme.rightIcon),
-            onClick: onRightIconClick,
-            icon: rightIcon })
-        );
-      }
-    }]);
-
-    return AppBar;
-  }(_react2.default.Component);
-
-  AppBar.propTypes = {
-    children: _react.PropTypes.node,
-    className: _react.PropTypes.string,
-    fixed: _react.PropTypes.bool,
-    flat: _react.PropTypes.bool,
-    leftIcon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-    onLeftIconClick: _react.PropTypes.func,
-    onRightIconClick: _react.PropTypes.func,
-    rightIcon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-    scrollHide: _react.PropTypes.bool,
-    theme: _react.PropTypes.shape({
-      appBar: _react.PropTypes.string,
-      fixed: _react.PropTypes.string,
-      flat: _react.PropTypes.string,
-      leftIcon: _react.PropTypes.string,
-      rightIcon: _react.PropTypes.string,
-      title: _react.PropTypes.string
-    }),
-    title: _react.PropTypes.string
-  };
-  AppBar.defaultProps = {
-    className: '',
-    fixed: false,
-    flat: false,
-    scrollHide: false
-  };
-
-
-  return AppBar;
-};
-
-var AppBar = factory(_IconButton2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.APP_BAR)(AppBar);
-exports.appBarFactory = factory;
-exports.AppBar = AppBar;
\ No newline at end of file
diff --git a/lib/app_bar/_config.scss b/lib/app_bar/_config.scss
deleted file mode 100644
index 5c76b6189..000000000
--- a/lib/app_bar/_config.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-$appbar-color: $color-primary-dark !default;
-$appbar-contrast: $color-primary-contrast !default;
-$appbar-title-total-distance: 8 * $unit !default;
-$appbar-height: 6.4 * $unit !default;
-$appbar-height-m-portrait: 5.6 * $unit !default;
-$appbar-height-m-landscape: 4.8 * $unit !default;
-$appbar-h-padding: 2.4 * $unit !default;
-$appbar-title-distance: $appbar-title-total-distance - $appbar-h-padding !default;
diff --git a/lib/app_bar/index.d.ts b/lib/app_bar/index.d.ts
deleted file mode 100644
index fb868bb1a..000000000
--- a/lib/app_bar/index.d.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface AppBarTheme {
-  /**
-   * Used for the component root element.
-   */
-  appBar?: string;
-  /**
-   * Added to the root element when the app bar is fixed.
-   */
-  fixed?: string;
-  /**
-   * Added to the root element when the app bar is flat.
-   */
-  flat?: string;
-  /**
-   * Used as the app bar title.
-   */
-  title ?: string;
-  /**
-   * Added to the left icon app bar element.
-   */
-  leftIcon?: string;
-  /**
-   * Added to the right icon app bar element.
-   */
-  rightIcon?: string;
-}
-
-interface AppBarProps extends ReactToolbox.Props {
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * Determine if the bar should have position fixed or relative.
-   * @default false
-   */
-  fixed?: boolean;
-  /**
-   * If true, the AppBar shows a shadow.
-   * @default false
-   */
-  flat?: boolean;
-  /**
-   * If it exists it is used as the AppBar title
-   */
-  title?: string;
-  /**
-   * If it exists it is used as the AppBar left icon
-   */
-  leftIcon?: string;
-  /**
-   * Called when the left icon is clicked
-   */
-  onLeftIconClick?: Function;
-  /**
-   * If it exists it is used as the AppBar right icon
-   */
-  rightIcon?: string;
-  /**
-   * Called when the righticon is clicked
-   */
-  onRightIconClick?: Function;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: AppBarTheme;
-}
-
-export class AppBar extends React.Component<AppBarProps, {}> { }
-
-export default AppBar;
diff --git a/lib/app_bar/index.js b/lib/app_bar/index.js
deleted file mode 100644
index 101ec9466..000000000
--- a/lib/app_bar/index.js
+++ /dev/null
@@ -1,26 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AppBar = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _AppBar = require('./AppBar.js');
-
-var _button = require('../button');
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var AppBar = (0, _AppBar.appBarFactory)(_button.IconButton);
-var ThemedAppBar = (0, _reactCssThemr.themr)(_identifiers.APP_BAR, _theme2.default)(AppBar);
-
-exports.default = ThemedAppBar;
-exports.AppBar = ThemedAppBar;
\ No newline at end of file
diff --git a/lib/app_bar/theme.scss b/lib/app_bar/theme.scss
deleted file mode 100644
index 04584eb69..000000000
--- a/lib/app_bar/theme.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.appBar {
-  display: flex;
-  height: $appbar-height;
-  align-items: center;
-  padding: 0 $appbar-h-padding;
-  color: $appbar-contrast;
-  background: $appbar-color;
-
-  @media screen and (max-width: $layout-breakpoint-xxs) and (orientation: portrait) {
-    height: $appbar-height-m-portrait;
-  }
-
-  @media screen and (max-width: $layout-breakpoint-xs) and (orientation: landscape) {
-    height: $appbar-height-m-landscape;
-  }
-
-  &:not(.flat) {
-    z-index: $z-index-high;
-    box-shadow: 0 2px 5px rgba(0,0,0,.26);
-  }
-
-  &.fixed {
-    position: fixed;
-    top: 0;
-    right: 0;
-    left: 0;
-    z-index: $z-index-highest;
-  }
-
-  a {
-    color: $appbar-contrast;
-  }
-
-  .title {
-    flex-grow: 1;
-    font-size: 1.8 * $unit;
-    font-weight: bold;
-    > small {
-      font-size: 1.8 * $unit;
-      font-weight: normal;
-    }
-  }
-
-  .leftIcon {
-    margin-left: -1.2 * $unit;
-  }
-
-  .rightIcon {
-    margin-right: -1.2 * $unit;
-    margin-left: auto;
-  }
-
-  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-  transition-duration: .5s;
-  transition-property: transform;
-
-  &.scrollHide {
-    transform: translateY(-100%);
-  }
-}
diff --git a/lib/autocomplete/Autocomplete.js b/lib/autocomplete/Autocomplete.js
deleted file mode 100644
index 0ef105912..000000000
--- a/lib/autocomplete/Autocomplete.js
+++ /dev/null
@@ -1,572 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Autocomplete = exports.autocompleteFactory = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
-
-var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactDom = require('react-dom');
-
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
-var _classnames4 = require('classnames');
-
-var _classnames5 = _interopRequireDefault(_classnames4);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Chip = require('../chip/Chip.js');
-
-var _Chip2 = _interopRequireDefault(_Chip);
-
-var _Input = require('../input/Input.js');
-
-var _Input2 = _interopRequireDefault(_Input);
-
-var _events = require('../utils/events.js');
-
-var _events2 = _interopRequireDefault(_events);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var POSITION = {
-  AUTO: 'auto',
-  DOWN: 'down',
-  UP: 'up'
-};
-
-var factory = function factory(Chip, Input) {
-  var Autocomplete = function (_Component) {
-    _inherits(Autocomplete, _Component);
-
-    function Autocomplete() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, Autocomplete);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Autocomplete.__proto__ || Object.getPrototypeOf(Autocomplete)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-        direction: _this.props.direction,
-        focus: false,
-        showAllSuggestions: _this.props.showSuggestionsWhenValueIsSet,
-        query: _this.query(_this.props.value),
-        isValueAnObject: false
-      }, _this.handleChange = function (values, event) {
-        var value = _this.props.multiple ? values : values[0];
-        var showAllSuggestions = _this.props.showSuggestionsWhenValueIsSet;
-
-        var query = _this.query(value);
-        if (_this.props.onChange) _this.props.onChange(value, event);
-        if (_this.props.keepFocusOnChange) {
-          _this.setState({ query: query, showAllSuggestions: showAllSuggestions });
-        } else {
-          _this.setState({ focus: false, query: query, showAllSuggestions: showAllSuggestions }, function () {
-            _reactDom2.default.findDOMNode(_this).querySelector('input').blur();
-          });
-        }
-      }, _this.handleMouseDown = function (event) {
-        _this.selectOrCreateActiveItem(event);
-      }, _this.handleQueryBlur = function (event) {
-        if (_this.state.focus) _this.setState({ focus: false });
-        if (_this.props.onBlur) _this.props.onBlur(event, _this.state.active);
-      }, _this.handleQueryChange = function (value) {
-        if (_this.props.onQueryChange) _this.props.onQueryChange(value);
-        _this.setState({ query: value, showAllSuggestions: false, active: null });
-      }, _this.handleQueryFocus = function () {
-        _this.suggestionsNode.scrollTop = 0;
-        _this.setState({ active: '', focus: true });
-        if (_this.props.onFocus) _this.props.onFocus();
-      }, _this.handleQueryKeyDown = function (event) {
-        // Clear query when pressing backspace and showing all suggestions.
-        var shouldClearQuery = event.which === 8 && _this.props.showSuggestionsWhenValueIsSet && _this.state.showAllSuggestions;
-        if (shouldClearQuery) {
-          _this.setState({ query: '' });
-        }
-
-        if (event.which === 13) {
-          _this.selectOrCreateActiveItem(event);
-        }
-      }, _this.handleQueryKeyUp = function (event) {
-        if (event.which === 27) _reactDom2.default.findDOMNode(_this).querySelector('input').blur();
-
-        if ([40, 38].indexOf(event.which) !== -1) {
-          var suggestionsKeys = [].concat(_toConsumableArray(_this.suggestions().keys()));
-          var index = suggestionsKeys.indexOf(_this.state.active) + (event.which === 40 ? +1 : -1);
-          if (index < 0) index = suggestionsKeys.length - 1;
-          if (index >= suggestionsKeys.length) index = 0;
-          _this.setState({ active: suggestionsKeys[index] });
-        }
-      }, _this.handleSuggestionHover = function (event) {
-        _this.setState({ active: event.target.id });
-      }, _this.select = function (event, target) {
-        _events2.default.pauseEvent(event);
-        var values = _this.values(_this.props.value);
-        var source = _this.source();
-        var newValue = target === void 0 ? event.target.id : target;
-
-        if (_this.state.isValueAnObject) {
-          var newItem = Array.from(source).reduce(function (obj, _ref2) {
-            var _ref3 = _slicedToArray(_ref2, 2),
-                k = _ref3[0],
-                value = _ref3[1];
-
-            if (k === newValue) {
-              obj[k] = value;
-            }
-            return obj;
-          }, {});
-
-          return _this.handleChange(Object.assign(_this.mapToObject(values), newItem), event);
-        }
-
-        _this.handleChange([newValue].concat(_toConsumableArray(values.keys())), event);
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(Autocomplete, [{
-      key: 'componentDidMount',
-      value: function componentDidMount() {
-        this.setIsValueAnObject();
-      }
-    }, {
-      key: 'componentWillReceiveProps',
-      value: function componentWillReceiveProps(nextProps) {
-        if (!this.props.multiple) {
-          this.setState({
-            query: this.query(nextProps.value)
-          });
-        }
-
-        if (nextProps.multiple && this.props.value !== nextProps.value) {
-          this.setIsValueAnObject();
-        }
-      }
-    }, {
-      key: 'shouldComponentUpdate',
-      value: function shouldComponentUpdate(nextProps, nextState) {
-        if (!this.state.focus && nextState.focus && this.props.direction === POSITION.AUTO) {
-          var direction = this.calculateDirection();
-          if (this.state.direction !== direction) {
-            this.setState({ direction: direction });
-          }
-        }
-        return true;
-      }
-    }, {
-      key: 'calculateDirection',
-      value: function calculateDirection() {
-        if (this.props.direction === 'auto') {
-          var client = _reactDom2.default.findDOMNode(this.inputNode).getBoundingClientRect();
-          var screen_height = window.innerHeight || document.documentElement.offsetHeight;
-          var up = client.top > screen_height / 2 + client.height;
-          return up ? 'up' : 'down';
-        } else {
-          return this.props.direction;
-        }
-      }
-    }, {
-      key: 'query',
-      value: function query(key) {
-        var query_value = '';
-        if (!this.props.multiple && key) {
-          var source_value = this.source().get(key);
-          query_value = source_value ? source_value : key;
-        }
-        return query_value;
-      }
-    }, {
-      key: 'selectOrCreateActiveItem',
-      value: function selectOrCreateActiveItem(event) {
-        var target = this.state.active;
-        if (!target) {
-          target = this.props.allowCreate ? this.state.query : [].concat(_toConsumableArray(this.suggestions().keys()))[0];
-          this.setState({ active: target });
-        }
-        this.select(event, target);
-      }
-    }, {
-      key: 'suggestions',
-      value: function suggestions() {
-        var suggest = new Map();
-        var rawQuery = this.state.query || (this.props.multiple ? '' : this.props.value);
-        var query = (rawQuery || '').toLowerCase().trim();
-        var values = this.values();
-        var source = this.source();
-
-        // Suggest any non-set value which matches the query
-        if (this.props.multiple) {
-          var _iteratorNormalCompletion = true;
-          var _didIteratorError = false;
-          var _iteratorError = undefined;
-
-          try {
-            for (var _iterator = source[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-              var _step$value = _slicedToArray(_step.value, 2),
-                  key = _step$value[0],
-                  value = _step$value[1];
-
-              if (!values.has(key) && this.matches(value.toLowerCase().trim(), query)) {
-                suggest.set(key, value);
-              }
-            }
-
-            // When multiple is false, suggest any value which matches the query if showAllSuggestions is false
-          } catch (err) {
-            _didIteratorError = true;
-            _iteratorError = err;
-          } finally {
-            try {
-              if (!_iteratorNormalCompletion && _iterator.return) {
-                _iterator.return();
-              }
-            } finally {
-              if (_didIteratorError) {
-                throw _iteratorError;
-              }
-            }
-          }
-        } else if (query && !this.state.showAllSuggestions) {
-          var _iteratorNormalCompletion2 = true;
-          var _didIteratorError2 = false;
-          var _iteratorError2 = undefined;
-
-          try {
-            for (var _iterator2 = source[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
-              var _step2$value = _slicedToArray(_step2.value, 2),
-                  key = _step2$value[0],
-                  value = _step2$value[1];
-
-              if (this.matches(value.toLowerCase().trim(), query)) {
-                suggest.set(key, value);
-              }
-            }
-
-            // When multiple is false, suggest all values when showAllSuggestions is true
-          } catch (err) {
-            _didIteratorError2 = true;
-            _iteratorError2 = err;
-          } finally {
-            try {
-              if (!_iteratorNormalCompletion2 && _iterator2.return) {
-                _iterator2.return();
-              }
-            } finally {
-              if (_didIteratorError2) {
-                throw _iteratorError2;
-              }
-            }
-          }
-        } else {
-          suggest = source;
-        }
-
-        return suggest;
-      }
-    }, {
-      key: 'matches',
-      value: function matches(value, query) {
-        var suggestionMatch = this.props.suggestionMatch;
-
-
-        if (suggestionMatch === 'start') {
-          return value.startsWith(query);
-        } else if (suggestionMatch === 'anywhere') {
-          return value.includes(query);
-        } else if (suggestionMatch === 'word') {
-          var re = new RegExp('\\b' + query, 'g');
-          return re.test(value);
-        }
-
-        return false;
-      }
-    }, {
-      key: 'source',
-      value: function source() {
-        var src = this.props.source;
-
-        if (src.hasOwnProperty('length')) {
-          return new Map(src.map(function (item) {
-            return Array.isArray(item) ? [].concat(_toConsumableArray(item)) : [item, item];
-          }));
-        } else {
-          return new Map(Object.keys(src).map(function (key) {
-            return [key, src[key]];
-          }));
-        }
-      }
-    }, {
-      key: 'values',
-      value: function values() {
-        var vals = this.props.multiple ? this.props.value : [this.props.value];
-
-        if (this.props.showSelectedWhenNotInSource && this.state.isValueAnObject) {
-          return new Map(Object.entries(vals));
-        }
-
-        var valueMap = new Map();
-        var _iteratorNormalCompletion3 = true;
-        var _didIteratorError3 = false;
-        var _iteratorError3 = undefined;
-
-        try {
-          for (var _iterator3 = this.source()[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
-            var _step3$value = _slicedToArray(_step3.value, 2),
-                k = _step3$value[0],
-                v = _step3$value[1];
-
-            if (Array.isArray(vals) && vals.indexOf(k) !== -1 || k in vals) {
-              valueMap.set(k, v);
-            }
-          }
-        } catch (err) {
-          _didIteratorError3 = true;
-          _iteratorError3 = err;
-        } finally {
-          try {
-            if (!_iteratorNormalCompletion3 && _iterator3.return) {
-              _iterator3.return();
-            }
-          } finally {
-            if (_didIteratorError3) {
-              throw _iteratorError3;
-            }
-          }
-        }
-
-        return valueMap;
-      }
-    }, {
-      key: 'unselect',
-      value: function unselect(key, event) {
-        if (!this.props.disabled) {
-          var values = this.values(this.props.value);
-
-          values.delete(key);
-
-          if (this.state.isValueAnObject) {
-            return this.handleChange(this.mapToObject(values), event);
-          }
-
-          this.handleChange([].concat(_toConsumableArray(values.keys())), event);
-        }
-      }
-    }, {
-      key: 'setIsValueAnObject',
-      value: function setIsValueAnObject() {
-        this.setState({
-          isValueAnObject: !Array.isArray(this.props.value) && _typeof(this.props.value) === 'object'
-        });
-      }
-    }, {
-      key: 'mapToObject',
-      value: function mapToObject(map) {
-        return Array.from(map).reduce(function (obj, _ref4) {
-          var _ref5 = _slicedToArray(_ref4, 2),
-              k = _ref5[0],
-              value = _ref5[1];
-
-          obj[k] = value;
-          return obj;
-        }, {});
-      }
-    }, {
-      key: 'renderSelected',
-      value: function renderSelected() {
-        var _this2 = this;
-
-        if (this.props.multiple) {
-          var selectedItems = [].concat(_toConsumableArray(this.values())).map(function (_ref6) {
-            var _ref7 = _slicedToArray(_ref6, 2),
-                key = _ref7[0],
-                value = _ref7[1];
-
-            return _react2.default.createElement(
-              Chip,
-              {
-                key: key,
-                className: _this2.props.theme.value,
-                deletable: true,
-                onDeleteClick: _this2.unselect.bind(_this2, key)
-              },
-              value
-            );
-          });
-
-          return _react2.default.createElement(
-            'ul',
-            { className: this.props.theme.values },
-            selectedItems
-          );
-        }
-      }
-    }, {
-      key: 'renderSuggestions',
-      value: function renderSuggestions() {
-        var _this3 = this;
-
-        var theme = this.props.theme;
-
-        var suggestions = [].concat(_toConsumableArray(this.suggestions())).map(function (_ref8) {
-          var _ref9 = _slicedToArray(_ref8, 2),
-              key = _ref9[0],
-              value = _ref9[1];
-
-          var className = (0, _classnames5.default)(theme.suggestion, _defineProperty({}, theme.active, _this3.state.active === key));
-          return _react2.default.createElement(
-            'li',
-            {
-              id: key,
-              key: key,
-              className: className,
-              onMouseDown: _this3.handleMouseDown,
-              onMouseOver: _this3.handleSuggestionHover
-            },
-            value
-          );
-        });
-
-        return _react2.default.createElement(
-          'ul',
-          {
-            className: (0, _classnames5.default)(theme.suggestions, _defineProperty({}, theme.up, this.state.direction === 'up')),
-            ref: function ref(node) {
-              _this3.suggestionsNode = node;
-            }
-          },
-          suggestions
-        );
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var _this4 = this;
-
-        var _props = this.props,
-            allowCreate = _props.allowCreate,
-            error = _props.error,
-            label = _props.label,
-            source = _props.source,
-            suggestionMatch = _props.suggestionMatch,
-            selectedPosition = _props.selectedPosition,
-            keepFocusOnChange = _props.keepFocusOnChange,
-            showSuggestionsWhenValueIsSet = _props.showSuggestionsWhenValueIsSet,
-            showSelectedWhenNotInSource = _props.showSelectedWhenNotInSource,
-            onQueryChange = _props.onQueryChange,
-            theme = _props.theme,
-            other = _objectWithoutProperties(_props, ['allowCreate', 'error', 'label', 'source', 'suggestionMatch', 'selectedPosition', 'keepFocusOnChange', 'showSuggestionsWhenValueIsSet', 'showSelectedWhenNotInSource', 'onQueryChange', 'theme']);
-
-        var className = (0, _classnames5.default)(theme.autocomplete, _defineProperty({}, theme.focus, this.state.focus), this.props.className);
-
-        return _react2.default.createElement(
-          'div',
-          { 'data-react-toolbox': 'autocomplete', className: className },
-          this.props.selectedPosition === 'above' ? this.renderSelected() : null,
-          _react2.default.createElement(Input, _extends({}, other, {
-            ref: function ref(node) {
-              _this4.inputNode = node;
-            },
-            autoComplete: 'off',
-            className: theme.input,
-            error: error,
-            label: label,
-            onBlur: this.handleQueryBlur,
-            onChange: this.handleQueryChange,
-            onFocus: this.handleQueryFocus,
-            onKeyDown: this.handleQueryKeyDown,
-            onKeyUp: this.handleQueryKeyUp,
-            theme: theme,
-            themeNamespace: 'input',
-            value: this.state.query
-          })),
-          this.renderSuggestions(),
-          this.props.selectedPosition === 'below' ? this.renderSelected() : null
-        );
-      }
-    }]);
-
-    return Autocomplete;
-  }(_react.Component);
-
-  Autocomplete.propTypes = {
-    allowCreate: _react.PropTypes.bool,
-    className: _react.PropTypes.string,
-    direction: _react.PropTypes.oneOf(['auto', 'up', 'down']),
-    disabled: _react.PropTypes.bool,
-    error: _react.PropTypes.string,
-    keepFocusOnChange: _react.PropTypes.bool,
-    label: _react.PropTypes.string,
-    multiple: _react.PropTypes.bool,
-    onBlur: _react.PropTypes.func,
-    onChange: _react.PropTypes.func,
-    onFocus: _react.PropTypes.func,
-    onQueryChange: _react.PropTypes.func,
-    selectedPosition: _react.PropTypes.oneOf(['above', 'below', 'none']),
-    showSelectedWhenNotInSource: _react.PropTypes.bool,
-    showSuggestionsWhenValueIsSet: _react.PropTypes.bool,
-    source: _react.PropTypes.any,
-    suggestionMatch: _react.PropTypes.oneOf(['start', 'anywhere', 'word']),
-    theme: _react.PropTypes.shape({
-      active: _react.PropTypes.string,
-      autocomplete: _react.PropTypes.string,
-      focus: _react.PropTypes.string,
-      input: _react.PropTypes.string,
-      suggestion: _react.PropTypes.string,
-      suggestions: _react.PropTypes.string,
-      up: _react.PropTypes.string,
-      value: _react.PropTypes.string,
-      values: _react.PropTypes.string
-    }),
-    value: _react.PropTypes.any
-  };
-  Autocomplete.defaultProps = {
-    allowCreate: false,
-    className: '',
-    direction: 'auto',
-    keepFocusOnChange: false,
-    multiple: true,
-    selectedPosition: 'above',
-    showSelectedWhenNotInSource: false,
-    showSuggestionsWhenValueIsSet: false,
-    source: {},
-    suggestionMatch: 'start'
-  };
-
-
-  return Autocomplete;
-};
-
-var Autocomplete = factory(_Chip2.default, _Input2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.AUTOCOMPLETE)(Autocomplete);
-exports.autocompleteFactory = factory;
-exports.Autocomplete = Autocomplete;
\ No newline at end of file
diff --git a/lib/autocomplete/_config.scss b/lib/autocomplete/_config.scss
deleted file mode 100644
index e0280558e..000000000
--- a/lib/autocomplete/_config.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-$autocomplete-color-primary-contrast: $color-primary-contrast !default;
-$autocomplete-color-primary: $color-primary !default;
-$autocomplete-overflow-max-height: 45vh !default;
-$autocomplete-suggestion-active-background: $palette-grey-200 !default;
-$autocomplete-suggestion-padding: $unit !default;
-$autocomplete-suggestions-background: $color-white !default;
-$autocomplete-value-margin: $unit * .25 $unit * .5 $unit * .25 0 !default;
diff --git a/lib/autocomplete/index.d.ts b/lib/autocomplete/index.d.ts
deleted file mode 100644
index 5a8185187..000000000
--- a/lib/autocomplete/index.d.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface AutocompleteTheme {
-  /**
-   * Used for a suggestion when it's active.
-   */
-  active?: string;
-  /**
-   * Used for the root element.
-   */
-  autocomplete?: string;
-  /**
-   * Used when the input is focused.
-   */
-  focus?: string;
-  /**
-   * Used to style the Input component.
-   */
-  input?: string;
-  /**
-   * Used for the label.
-   */
-  label?: string;
-  /**
-   * Used to style each suggestion.
-   */
-  suggestion?: string;
-  /**
-   * Used to style the suggestions container.
-   */
-  suggestions?: string;
-  /**
-   * Used for the suggestions when it's opening to the top.
-   */
-  up?: string;
-  /**
-   * Classname used for a single value.
-   */
-  value?: string;
-  /**
-   * Classname used for the values container.
-   */
-  values?: string;
-}
-
-interface AutocompleteProps extends ReactToolbox.Props {
-  /**
-   * Determines the opening direction. It can be auto, up or down.
-   * @default auto
-   */
-  direction?: "auto" | "up" | "down";
-  /**
-   * If true, component will be disabled.
-   */
-  disabled?: boolean;
-  /**
-   * Sets the error string for the internal input element.
-   * @default false
-   */
-  error?: string;
-  /**
-   * The text string to use for the floating label element.
-   */
-  label?: string;
-  /**
-   * If true, component can hold multiple values.
-   */
-  multiple?: boolean;
-  /**
-   * Callback function that is fired when the components's value changes.
-   * @default auto
-   */
-  onChange?: Function;
-  /**
-   * Callback function that is fired when the components's query value changes.
-   * @default auto
-   */
-  onQueryChange?: Function;
-  /**
-   * Determines if the selected list is shown above or below input. It can be above or below.
-   * @default above
-   */
-  selectedPosition?: "above" | "below" | "none";
-  /**
-   * If true, the list of suggestions will not be filtered when a value is selected.
-   * @default false
-   */
-  showSuggestionsWhenValueIsSet?: boolean;
-  /**
-   * Object of key/values or array representing all items suggested.
-   */
-  source?: any;
-  /**
-   * Determines how suggestions are supplied.
-   * @default start
-   */
-  suggestionMatch?: "start" | "anywhere" | "word";
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: AutocompleteTheme;
-  /**
-   * Value or array of values currently selected component.
-   */
-  value?: any;
-}
-
-export class Autocomplete extends React.Component<AutocompleteProps, {}> { }
-
-export default Autocomplete;
diff --git a/lib/autocomplete/index.js b/lib/autocomplete/index.js
deleted file mode 100644
index 6720adeae..000000000
--- a/lib/autocomplete/index.js
+++ /dev/null
@@ -1,32 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Autocomplete = undefined;
-
-var _identifiers = require('../identifiers.js');
-
-var _reactCssThemr = require('react-css-themr');
-
-var _Autocomplete = require('./Autocomplete.js');
-
-var _chip = require('../chip');
-
-var _chip2 = _interopRequireDefault(_chip);
-
-var _input = require('../input');
-
-var _input2 = _interopRequireDefault(_input);
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var Autocomplete = (0, _Autocomplete.autocompleteFactory)(_chip2.default, _input2.default);
-var ThemedAutocomplete = (0, _reactCssThemr.themr)(_identifiers.AUTOCOMPLETE, _theme2.default)(Autocomplete);
-
-exports.default = ThemedAutocomplete;
-exports.Autocomplete = ThemedAutocomplete;
\ No newline at end of file
diff --git a/lib/autocomplete/theme.scss b/lib/autocomplete/theme.scss
deleted file mode 100644
index f12136579..000000000
--- a/lib/autocomplete/theme.scss
+++ /dev/null
@@ -1,76 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-@import "http://github.com/input/config";
-
-.autocomplete {
-  position: relative;
-  padding: $unit 0;
-  &.focus {
-    .suggestions {
-      max-height: $autocomplete-overflow-max-height;
-      visibility: visible;
-      box-shadow: $zdepth-shadow-1;
-    }
-  }
-}
-
-.values {
-  flex-direction: row;
-  flex-wrap: wrap;
-  padding-bottom: $unit / 2;
-}
-
-.value {
-  margin: $autocomplete-value-margin;
-}
-
-.suggestions {
-  @include no-webkit-scrollbar;
-  position: absolute;
-  z-index: $z-index-high;
-  width: 100%;
-  max-height: 0;
-  overflow-x: hidden;
-  overflow-y: auto;
-  visibility: hidden;
-  background-color: $autocomplete-suggestions-background;
-  transition-timing-function: $animation-curve-default;
-  transition-duration: $animation-duration;
-  transition-property: max-height, box-shadow;
-  &:not(.up) {
-    margin-top: - $input-padding;
-  }
-  &.up {
-    bottom: 0;
-  }
-}
-
-.suggestion {
-  padding: $autocomplete-suggestion-padding;
-  font-size: $input-field-font-size;
-  cursor: pointer;
-  &.active {
-    background-color: $autocomplete-suggestion-active-background;
-  }
-}
-
-.input {
-  position: relative;
-  &:after {
-    $size: ($input-field-height / 7);
-    $border: $size solid transparent;
-    position: absolute;
-    top: 50%;
-    right: $input-chevron-offset;
-    width: 0;
-    height: 0;
-    pointer-events: none;
-    content: "";
-    border-top: $size solid $input-text-bottom-border-color;
-    border-right: $border;
-    border-left: $border;
-    transition: transform $animation-duration $animation-curve-default;
-  }
-}
diff --git a/lib/avatar/Avatar.js b/lib/avatar/Avatar.js
deleted file mode 100644
index 368df2089..000000000
--- a/lib/avatar/Avatar.js
+++ /dev/null
@@ -1,80 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Avatar = exports.avatarFactory = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _FontIcon = require('../font_icon/FontIcon.js');
-
-var _FontIcon2 = _interopRequireDefault(_FontIcon);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-var factory = function factory(FontIcon) {
-  var Avatar = function Avatar(_ref) {
-    var children = _ref.children,
-        className = _ref.className,
-        cover = _ref.cover,
-        icon = _ref.icon,
-        image = _ref.image,
-        theme = _ref.theme,
-        title = _ref.title,
-        other = _objectWithoutProperties(_ref, ['children', 'className', 'cover', 'icon', 'image', 'theme', 'title']);
-
-    return _react2.default.createElement(
-      'div',
-      _extends({ 'data-react-toolbox': 'avatar', className: (0, _classnames2.default)(theme.avatar, className) }, other),
-      children,
-      cover && typeof image === 'string' && _react2.default.createElement('span', { alt: title, className: theme.image, style: { backgroundImage: 'url('http://github.com/+%20image%20+')' } }),
-      !cover && (typeof image === 'string' ? _react2.default.createElement('img', { alt: title, className: theme.image, src: image, title: title }) : image),
-      typeof icon === 'string' ? _react2.default.createElement(FontIcon, { className: theme.letter, value: icon }) : icon,
-      title ? _react2.default.createElement(
-        'span',
-        { className: theme.letter },
-        title[0]
-      ) : null
-    );
-  };
-
-  Avatar.propTypes = {
-    children: _react.PropTypes.node,
-    className: _react.PropTypes.string,
-    cover: _react.PropTypes.bool,
-    icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-    image: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-    theme: _react.PropTypes.shape({
-      avatar: _react.PropTypes.string,
-      image: _react.PropTypes.string,
-      letter: _react.PropTypes.string
-    }),
-    title: _react.PropTypes.string
-  };
-
-  Avatar.defaultProps = {
-    cover: false
-  };
-
-  return Avatar;
-};
-
-var Avatar = factory(_FontIcon2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.AVATAR)(Avatar);
-exports.avatarFactory = factory;
-exports.Avatar = Avatar;
\ No newline at end of file
diff --git a/lib/avatar/_config.scss b/lib/avatar/_config.scss
deleted file mode 100644
index a2922fb60..000000000
--- a/lib/avatar/_config.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-$avatar-color: $color-white !default;
-$avatar-background: $palette-grey-500 !default;
-$avatar-size: 4 * $unit !default;
-$avatar-font-size: 2.4 * $unit !default;
diff --git a/lib/avatar/index.d.ts b/lib/avatar/index.d.ts
deleted file mode 100644
index c2ddc6950..000000000
--- a/lib/avatar/index.d.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface AvatarTheme {
-  /**
-   * Used for the root class of the element.
-   */
-  avatar?: string;
-  /**
-   * Added to the root element when the component has image.
-   */
-  image?: string;
-  /**
-   * Used for the root element if the component shows the letter.
-   */
-  letter?: string;
-}
-
-interface AvatarProps extends ReactToolbox.Props {
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * Set to true if your image is not squared so it will be used as a cover for the element.
-   */
-  cover?: boolean;
-  /**
-   * A key to identify an Icon from Material Design Icons or a custom Icon Element.
-   */
-  icon?: React.ReactNode | string;
-  /**
-   * An image source or an image element.
-   */
-  image?: React.ReactNode | string;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: AvatarTheme;
-  /**
-   * A title for the image. If no image is provided, the first letter will be displayed as the avatar.
-   */
-  title?: string;
-}
-
-export class Avatar extends React.Component<AvatarProps, {}> { }
-
-export default Avatar;
diff --git a/lib/avatar/index.js b/lib/avatar/index.js
deleted file mode 100644
index 247561ab6..000000000
--- a/lib/avatar/index.js
+++ /dev/null
@@ -1,28 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Avatar = undefined;
-
-var _identifiers = require('../identifiers.js');
-
-var _reactCssThemr = require('react-css-themr');
-
-var _Avatar = require('./Avatar.js');
-
-var _FontIcon = require('../font_icon/FontIcon.js');
-
-var _FontIcon2 = _interopRequireDefault(_FontIcon);
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var Avatar = (0, _Avatar.avatarFactory)(_FontIcon2.default);
-var ThemedAvatar = (0, _reactCssThemr.themr)(_identifiers.AVATAR, _theme2.default)(Avatar);
-
-exports.default = ThemedAvatar;
-exports.Avatar = ThemedAvatar;
\ No newline at end of file
diff --git a/lib/avatar/theme.scss b/lib/avatar/theme.scss
deleted file mode 100644
index 9514782ae..000000000
--- a/lib/avatar/theme.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.avatar {
-  position: relative;
-  display: inline-block;
-  width: $avatar-size;
-  height: $avatar-size;
-  overflow: hidden;
-  font-size: $avatar-font-size;
-  color: $avatar-color;
-  text-align: center;
-  vertical-align: middle;
-  background-color: $avatar-background;
-  border-radius: 50%;
-  > svg {
-    width: 1em;
-    height: $avatar-size;
-    fill: currentColor;
-  }
-  > img {
-    max-width: 100%;
-    height: auto;
-  }
-}
-
-.image {
-  position: absolute;
-  display: block;
-  width: 100%;
-  height: 100%;
-  background-color: transparent;
-  background-position: center;
-  background-size: cover;
-  border-radius: 50%;
-}
-
-.letter {
-  display: block;
-  width: 100%;
-  line-height: $avatar-size;
-}
diff --git a/lib/button/BrowseButton.js b/lib/button/BrowseButton.js
deleted file mode 100644
index d88381401..000000000
--- a/lib/button/BrowseButton.js
+++ /dev/null
@@ -1,168 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.BrowseButton = exports.browseButtonFactory = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _FontIcon = require('../font_icon/FontIcon.js');
-
-var _FontIcon2 = _interopRequireDefault(_FontIcon);
-
-var _Ripple = require('../ripple/Ripple.js');
-
-var _Ripple2 = _interopRequireDefault(_Ripple);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(ripple, FontIcon) {
-  var SimpleBrowseButton = function (_Component) {
-    _inherits(SimpleBrowseButton, _Component);
-
-    function SimpleBrowseButton() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, SimpleBrowseButton);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = SimpleBrowseButton.__proto__ || Object.getPrototypeOf(SimpleBrowseButton)).call.apply(_ref, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
-        _this.refs.label.blur();
-        if (_this.props.onMouseUp) _this.props.onMouseUp(event);
-      }, _this.handleMouseLeave = function (event) {
-        _this.refs.label.blur();
-        if (_this.props.onMouseLeave) _this.props.onMouseLeave(event);
-      }, _this.handleFileChange = function (event) {
-        if (_this.props.onChange) _this.props.onChange(event);
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(SimpleBrowseButton, [{
-      key: 'render',
-      value: function render() {
-        var _classnames;
-
-        var _props = this.props,
-            accent = _props.accent,
-            children = _props.children,
-            className = _props.className,
-            flat = _props.flat,
-            floating = _props.floating,
-            icon = _props.icon,
-            inverse = _props.inverse,
-            label = _props.label,
-            mini = _props.mini,
-            neutral = _props.neutral,
-            primary = _props.primary,
-            theme = _props.theme,
-            raised = _props.raised,
-            others = _objectWithoutProperties(_props, ['accent', 'children', 'className', 'flat', 'floating', 'icon', 'inverse', 'label', 'mini', 'neutral', 'primary', 'theme', 'raised']);
-
-        var element = 'label';
-        var level = primary ? 'primary' : accent ? 'accent' : 'neutral';
-        var shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : 'flat';
-
-        var classes = (0, _classnames3.default)(theme.button, [theme[shape]], (_classnames = {}, _defineProperty(_classnames, theme[level], neutral), _defineProperty(_classnames, theme.mini, mini), _defineProperty(_classnames, theme.inverse, inverse), _classnames), className);
-
-        var props = _extends({}, others, {
-          ref: 'label',
-          className: classes,
-          disabled: this.props.disabled,
-          onMouseUp: this.handleMouseUp,
-          onMouseLeave: this.handleMouseLeave,
-          'data-react-toolbox': 'label'
-        });
-
-        return _react2.default.createElement(element, props, icon ? _react2.default.createElement(FontIcon, { className: theme.icon, value: icon }) : null, _react2.default.createElement(
-          'span',
-          null,
-          label
-        ), _react2.default.createElement('input', { className: classes, type: 'file', onChange: this.handleFileChange }), children);
-      }
-    }]);
-
-    return SimpleBrowseButton;
-  }(_react.Component);
-
-  SimpleBrowseButton.propTypes = {
-    accent: _react.PropTypes.bool,
-    children: _react.PropTypes.node,
-    className: _react.PropTypes.string,
-    disabled: _react.PropTypes.bool,
-    flat: _react.PropTypes.bool,
-    floating: _react.PropTypes.bool,
-    icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-    inverse: _react.PropTypes.bool,
-    label: _react.PropTypes.string,
-    mini: _react.PropTypes.bool,
-    neutral: _react.PropTypes.bool,
-    onChange: _react.PropTypes.func,
-    onMouseLeave: _react.PropTypes.func,
-    onMouseUp: _react.PropTypes.func,
-    primary: _react.PropTypes.bool,
-    raised: _react.PropTypes.bool,
-    theme: _react.PropTypes.shape({
-      accent: _react.PropTypes.string,
-      button: _react.PropTypes.string,
-      flat: _react.PropTypes.string,
-      floating: _react.PropTypes.string,
-      icon: _react.PropTypes.string,
-      inverse: _react.PropTypes.string,
-      mini: _react.PropTypes.string,
-      neutral: _react.PropTypes.string,
-      primary: _react.PropTypes.string,
-      raised: _react.PropTypes.string,
-      rippleWrapper: _react.PropTypes.string,
-      toggle: _react.PropTypes.string
-    }),
-    type: _react.PropTypes.string
-  };
-  SimpleBrowseButton.defaultProps = {
-    accent: false,
-    className: '',
-    flat: false,
-    floating: false,
-    mini: false,
-    neutral: true,
-    primary: false,
-    raised: false
-  };
-
-
-  return ripple(SimpleBrowseButton);
-};
-
-var BrowseButton = factory((0, _Ripple2.default)({ centered: false }), _FontIcon2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.BUTTON)(BrowseButton);
-exports.browseButtonFactory = factory;
-exports.BrowseButton = BrowseButton;
\ No newline at end of file
diff --git a/lib/button/Button.js b/lib/button/Button.js
deleted file mode 100644
index 136767ed8..000000000
--- a/lib/button/Button.js
+++ /dev/null
@@ -1,167 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Button = exports.buttonFactory = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _FontIcon = require('../font_icon/FontIcon.js');
-
-var _FontIcon2 = _interopRequireDefault(_FontIcon);
-
-var _Ripple = require('../ripple/Ripple.js');
-
-var _Ripple2 = _interopRequireDefault(_Ripple);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(ripple, FontIcon) {
-  var Button = function (_Component) {
-    _inherits(Button, _Component);
-
-    function Button() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, Button);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Button.__proto__ || Object.getPrototypeOf(Button)).call.apply(_ref, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
-        _this.refs.button.blur();
-        if (_this.props.onMouseUp) _this.props.onMouseUp(event);
-      }, _this.handleMouseLeave = function (event) {
-        _this.refs.button.blur();
-        if (_this.props.onMouseLeave) _this.props.onMouseLeave(event);
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(Button, [{
-      key: 'render',
-      value: function render() {
-        var _classnames;
-
-        var _props = this.props,
-            accent = _props.accent,
-            children = _props.children,
-            className = _props.className,
-            flat = _props.flat,
-            floating = _props.floating,
-            href = _props.href,
-            icon = _props.icon,
-            inverse = _props.inverse,
-            label = _props.label,
-            mini = _props.mini,
-            neutral = _props.neutral,
-            primary = _props.primary,
-            theme = _props.theme,
-            type = _props.type,
-            raised = _props.raised,
-            others = _objectWithoutProperties(_props, ['accent', 'children', 'className', 'flat', 'floating', 'href', 'icon', 'inverse', 'label', 'mini', 'neutral', 'primary', 'theme', 'type', 'raised']);
-
-        var element = href ? 'a' : 'button';
-        var level = primary ? 'primary' : accent ? 'accent' : 'neutral';
-        var shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : 'flat';
-
-        var classes = (0, _classnames3.default)(theme.button, [theme[shape]], (_classnames = {}, _defineProperty(_classnames, theme[level], neutral), _defineProperty(_classnames, theme.mini, mini), _defineProperty(_classnames, theme.inverse, inverse), _classnames), className);
-
-        var props = _extends({}, others, {
-          href: href,
-          ref: 'button',
-          className: classes,
-          disabled: this.props.disabled,
-          onMouseUp: this.handleMouseUp,
-          onMouseLeave: this.handleMouseLeave,
-          type: !href ? type : null,
-          'data-react-toolbox': 'button'
-        });
-
-        return _react2.default.createElement(element, props, icon ? _react2.default.createElement(FontIcon, { className: theme.icon, value: icon }) : null, label, children);
-      }
-    }]);
-
-    return Button;
-  }(_react.Component);
-
-  Button.propTypes = {
-    accent: _react.PropTypes.bool,
-    children: _react.PropTypes.node,
-    className: _react.PropTypes.string,
-    disabled: _react.PropTypes.bool,
-    flat: _react.PropTypes.bool,
-    floating: _react.PropTypes.bool,
-    href: _react.PropTypes.string,
-    icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-    inverse: _react.PropTypes.bool,
-    label: _react.PropTypes.string,
-    mini: _react.PropTypes.bool,
-    neutral: _react.PropTypes.bool,
-    onMouseLeave: _react.PropTypes.func,
-    onMouseUp: _react.PropTypes.func,
-    primary: _react.PropTypes.bool,
-    raised: _react.PropTypes.bool,
-    theme: _react.PropTypes.shape({
-      accent: _react.PropTypes.string,
-      button: _react.PropTypes.string,
-      flat: _react.PropTypes.string,
-      floating: _react.PropTypes.string,
-      icon: _react.PropTypes.string,
-      inverse: _react.PropTypes.string,
-      mini: _react.PropTypes.string,
-      neutral: _react.PropTypes.string,
-      primary: _react.PropTypes.string,
-      raised: _react.PropTypes.string,
-      rippleWrapper: _react.PropTypes.string,
-      toggle: _react.PropTypes.string
-    }),
-    type: _react.PropTypes.string
-  };
-  Button.defaultProps = {
-    accent: false,
-    className: '',
-    flat: false,
-    floating: false,
-    mini: false,
-    neutral: true,
-    primary: false,
-    raised: false,
-    type: 'button'
-  };
-
-
-  return ripple(Button);
-};
-
-var Button = factory((0, _Ripple2.default)({ centered: false }), _FontIcon2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.BUTTON)(Button);
-exports.buttonFactory = factory;
-exports.Button = Button;
\ No newline at end of file
diff --git a/lib/button/IconButton.js b/lib/button/IconButton.js
deleted file mode 100644
index c2dfdb8ab..000000000
--- a/lib/button/IconButton.js
+++ /dev/null
@@ -1,138 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.IconButton = exports.iconButtonFactory = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _FontIcon = require('../font_icon/FontIcon.js');
-
-var _FontIcon2 = _interopRequireDefault(_FontIcon);
-
-var _Ripple = require('../ripple/Ripple.js');
-
-var _Ripple2 = _interopRequireDefault(_Ripple);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(ripple, FontIcon) {
-  var IconButton = function (_Component) {
-    _inherits(IconButton, _Component);
-
-    function IconButton() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, IconButton);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = IconButton.__proto__ || Object.getPrototypeOf(IconButton)).call.apply(_ref, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
-        _this.refs.button.blur();
-        if (_this.props.onMouseUp) _this.props.onMouseUp(event);
-      }, _this.handleMouseLeave = function (event) {
-        _this.refs.button.blur();
-        if (_this.props.onMouseLeave) _this.props.onMouseLeave(event);
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(IconButton, [{
-      key: 'render',
-      value: function render() {
-        var _classnames;
-
-        var _props = this.props,
-            accent = _props.accent,
-            children = _props.children,
-            className = _props.className,
-            href = _props.href,
-            icon = _props.icon,
-            inverse = _props.inverse,
-            neutral = _props.neutral,
-            primary = _props.primary,
-            theme = _props.theme,
-            type = _props.type,
-            others = _objectWithoutProperties(_props, ['accent', 'children', 'className', 'href', 'icon', 'inverse', 'neutral', 'primary', 'theme', 'type']);
-
-        var element = href ? 'a' : 'button';
-        var level = primary ? 'primary' : accent ? 'accent' : 'neutral';
-        var classes = (0, _classnames3.default)([theme.toggle], (_classnames = {}, _defineProperty(_classnames, theme[level], neutral), _defineProperty(_classnames, theme.inverse, inverse), _classnames), className);
-
-        var props = _extends({}, others, {
-          href: href,
-          ref: 'button',
-          className: classes,
-          disabled: this.props.disabled,
-          onMouseUp: this.handleMouseUp,
-          onMouseLeave: this.handleMouseLeave,
-          type: !href ? type : null,
-          'data-react-toolbox': 'button'
-        });
-
-        return _react2.default.createElement(element, props, icon ? typeof icon === 'string' ? _react2.default.createElement(FontIcon, { className: theme.icon, value: icon }) : icon : null, children);
-      }
-    }]);
-
-    return IconButton;
-  }(_react.Component);
-
-  IconButton.propTypes = {
-    accent: _react.PropTypes.bool,
-    children: _react.PropTypes.node,
-    className: _react.PropTypes.string,
-    disabled: _react.PropTypes.bool,
-    href: _react.PropTypes.string,
-    icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-    inverse: _react.PropTypes.bool,
-    neutral: _react.PropTypes.bool,
-    onMouseLeave: _react.PropTypes.func,
-    onMouseUp: _react.PropTypes.func,
-    primary: _react.PropTypes.bool,
-    theme: _react.PropTypes.object,
-    type: _react.PropTypes.string
-  };
-  IconButton.defaultProps = {
-    accent: false,
-    className: '',
-    neutral: true,
-    primary: false,
-    type: 'button'
-  };
-
-
-  return ripple(IconButton);
-};
-
-var IconButton = factory((0, _Ripple2.default)({ centered: true }), _FontIcon2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.BUTTON)(IconButton);
-exports.iconButtonFactory = factory;
-exports.IconButton = IconButton;
\ No newline at end of file
diff --git a/lib/button/__test__/index.spec.js b/lib/button/__test__/index.spec.js
deleted file mode 100644
index 67d402c74..000000000
--- a/lib/button/__test__/index.spec.js
+++ /dev/null
@@ -1,66 +0,0 @@
-'use strict';
-
-var _expect = require('expect');
-
-var _expect2 = _interopRequireDefault(_expect);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactDom = require('react-dom');
-
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
-var _reactAddonsTestUtils = require('react-addons-test-utils');
-
-var _reactAddonsTestUtils2 = _interopRequireDefault(_reactAddonsTestUtils);
-
-var _theme = require('../theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-var _Button = require('../Button');
-
-var _Button2 = _interopRequireDefault(_Button);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var getRenderedClassName = function getRenderedClassName(tree, Component) {
-  var rendered = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, Component);
-  return _reactDom2.default.findDOMNode(rendered).getAttribute('class');
-};
-
-describe('Button', function () {
-  describe('#render', function () {
-    it('uses flat and neutral styles by default', function () {
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Button2.default, { theme: _theme2.default }));
-      var className = getRenderedClassName(tree, _Button.Button);
-      (0, _expect2.default)(className).toContain(_theme2.default.flat);
-      (0, _expect2.default)(className).toContain(_theme2.default.neutral);
-    });
-
-    it('renders accent button with accent style', function () {
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Button2.default, { accent: true, theme: _theme2.default }));
-      var className = getRenderedClassName(tree, _Button.Button);
-      (0, _expect2.default)(className).toContain(_theme2.default.flat);
-      (0, _expect2.default)(className).toContain(_theme2.default.accent);
-    });
-
-    it('renders mini button with mini style', function () {
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Button2.default, { floating: true, mini: true, theme: _theme2.default }));
-      var className = getRenderedClassName(tree, _Button.Button);
-      (0, _expect2.default)(className).toContain(_theme2.default.floating);
-      (0, _expect2.default)(className).toContain(_theme2.default.neutral);
-      (0, _expect2.default)(className).toContain(_theme2.default.mini);
-    });
-
-    it('renders mini accented button with both styles', function () {
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Button2.default, { accent: true, mini: true, theme: _theme2.default }));
-      var className = getRenderedClassName(tree, _Button.Button);
-      (0, _expect2.default)(className).toContain(_theme2.default.flat);
-      (0, _expect2.default)(className).toContain(_theme2.default.accent);
-      (0, _expect2.default)(className).toContain(_theme2.default.mini);
-    });
-  });
-});
\ No newline at end of file
diff --git a/lib/button/_config.scss b/lib/button/_config.scss
deleted file mode 100644
index 98aa2c246..000000000
--- a/lib/button/_config.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-$button-neutral-color: $color-white !default;
-$button-neutral-color-contrast: $palette-grey-900 !default;
-$button-neutral-color-hover: rgba($palette-grey-900, .2) !default;
-$button-primary-color-contrast: $color-primary-contrast !default;
-$button-primary-color-hover: rgba($color-primary, .2) !default;
-$button-primary-color: $color-primary !default;
-$button-accent-color-contrast: $color-primary-contrast !default;
-$button-accent-color-hover: rgba($color-accent, .2) !default;
-$button-accent-color: $color-accent !default;
-$button-disabled-text-color: rgba($color-black, 0.26) !default;
-$button-disabled-background-color: rgba($color-black, 0.12) !default;
-$button-disabled-text-color-inverse: rgba($color-white, 0.54) !default;
-$button-disabled-background-inverse: rgba($color-white, 0.08) !default;
-$button-border-radius: 0.2 * $unit !default;
-$button-floating-font-size: $unit * 2.4 !default;
-$button-floating-height: $unit * 5.6 !default;
-$button-floating-mini-height: $unit * 4 !default;
-$button-floating-mini-font-size: $button-floating-mini-height / 2.25 !default;
-$button-height: $unit * 3.6 !default;
-$button-squared-icon-margin: $unit * .6 !default;
-$button-squared-min-width: 9 * $unit !default;
-$button-squared-padding: 0 $unit * 1.2 !default;
-$button-toggle-font-size: $unit * 2 !default;
diff --git a/lib/button/_mixins.scss b/lib/button/_mixins.scss
deleted file mode 100644
index 305be037a..000000000
--- a/lib/button/_mixins.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@mixin btn-colors($name, $color, $background, $hover) {
-  .#{$name}:not([disabled]) {
-    &.raised, &.floating {
-      color: $color;
-      background: $background;
-    }
-    &.flat, &.toggle {
-      color: $background;
-      &:focus:not(:active) {
-        background: $hover;
-      }
-    }
-    &.flat:hover {
-      background: $hover;
-    }
-  }
-}
diff --git a/lib/button/index.d.ts b/lib/button/index.d.ts
deleted file mode 100644
index e713f70aa..000000000
--- a/lib/button/index.d.ts
+++ /dev/null
@@ -1,337 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface ButtonTheme {
-  /**
-   * Used for the root in case button is accent.
-   */
-  accent?: string;
-  /**
-   * Used for the root element in any button.
-   */
-  button?: string;
-  /**
-   * Used when the button is flat for the root element.
-   */
-  flat?: string;
-  /**
-   * Used when the button is floating for the root element.
-   */
-  floating?: string;
-  /**
-   * For the icon inside a button.
-   */
-  icon?: string;
-  /**
-   * Used when colors are inverted.
-   */
-  inverse?: string;
-  /**
-   * Used for mini floating buttons.
-   */
-  mini?: string;
-  /**
-   * Used for neutral colored buttons.
-   */
-  neutral?: string;
-  /**
-   * Used for primary buttons when button is primary.
-   */
-  primary?: string;
-  /**
-   * Used when the button is raised for root element.
-   */
-  raised?: string;
-  /**
-   * Used for the ripple element.
-   */
-  rippleWrapper?: string;
-  /**
-   * Used for toggle buttons in the root element.
-   */
-  toggle?: string;
-}
-
-interface ButtonProps extends ReactToolbox.Props {
-  /**
-   * Indicates if the button should have accent color.
-   * @default false
-   */
-  accent?: boolean;
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * If true, component will be disabled.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * If true, the button will have a flat look.
-   * @default false
-   */
-  flat?: boolean;
-  /**
-   * If true, the button will have a floating look.
-   * @default false
-   */
-  floating?: boolean;
-  /**
-   * Creates a link for the button.
-   */
-  href?: string;
-  /**
-   * Value of the icon (See Font Icon Component).
-   */
-  icon?: React.ReactNode | string;
-  /**
-   * If true, the neutral colors are inverted. Useful to put a button over a dark background.
-   */
-  inverse?: boolean;
-  /**
-   * The text string to use for the name of the button.
-   */
-  label?: string;
-  /**
-   * To be used with floating button. If true, the button will be smaller.
-   * @default false
-   */
-  mini?: boolean;
-  /**
-   * Set it to false if you don't want the neutral styles to be included.
-   * @default true
-   */
-  neutral?: boolean;
-  /**
-   * Indicates if the button should have primary color.
-   * @default false
-   */
-  primary?: boolean;
-  /**
-   * If true, the button will have a raised look.
-   * @default false
-   */
-  raised?: boolean;
-  /**
-   * If true, component will have a ripple effect on click.
-   * @default true
-   */
-  ripple?: boolean;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: ButtonTheme;
-}
-
-export class Button extends React.Component<ButtonProps, {}> { }
-
-export interface IconButtonTheme {
-  /**
-   * Used for the root in case button is accent.
-   */
-  accent?: string;
-  /**
-   * Used for the root element in any button.
-   */
-  button?: string;
-  /**
-   * For the icon inside a button.
-   */
-  icon?: string;
-  /**
-   * Used when colors are inverted.
-   */
-  inverse?: string;
-  /**
-   * Used for neutral colored buttons.
-   */
-  neutral?: string;
-  /**
-   * Used for primary buttons when button is primary.
-   */
-  primary?: string;
-  /**
-   * Used for the ripple element.
-   */
-  rippleWrapper?: string;
-  /**
-   * Used for toggle buttons in the root element.
-   */
-  toggle?: string;
-}
-
-interface IconButtonProps extends ReactToolbox.Props {
-  /**
-   * Indicates if the button should have accent color.
-   * @default false
-   */
-  accent?: boolean;
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * If true, component will be disabled.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * Creates a link for the button.
-   */
-  href?: string;
-  /**
-   * Value of the icon (See Font Icon Component).
-   */
-  icon?: React.ReactNode | string;
-  /**
-   * If true, the neutral colors are inverted. Useful to put a button over a dark background.
-   */
-  inverse?: boolean;
-  /**
-   * Set it to false if you don't want the neutral styles to be included.
-   * @default true
-   */
-  neutral?: boolean;
-  /**
-   * Indicates if the button should have primary color.
-   * @default false
-   */
-  primary?: boolean;
-  /**
-   * If true, component will have a ripple effect on click.
-   * @default true
-   */
-  ripple?: boolean;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: IconButtonTheme;
-}
-
-export class IconButton extends React.Component<IconButtonProps, {}> { }
-
-export interface BrowseButtonTheme {
-  /**
-   * Used for the root in case button is accent.
-   */
-  accent?: string;
-  /**
-   * Used for the root element in any button.
-   */
-  button?: string;
-  /**
-   * Used when the button is flat for the root element.
-   */
-  flat?: string;
-  /**
-   * Used when the button is floating for the root element.
-   */
-  floating?: string;
-  /**
-   * For the icon inside a button.
-   */
-  icon?: string;
-  /**
-   * Used when colors are inverted.
-   */
-  inverse?: string;
-  /**
-   * Used for mini floating buttons.
-   */
-  mini?: string;
-  /**
-   * Used for neutral colored buttons.
-   */
-  neutral?: string;
-  /**
-   * Used for primary buttons when button is primary.
-   */
-  primary?: string;
-  /**
-   * Used when the button is raised for root element.
-   */
-  raised?: string;
-  /**
-   * Used for the ripple element.
-   */
-  rippleWrapper?: string;
-  /**
-   * Used for toggle buttons in the root element.
-   */
-  toggle?: string;
-}
-
-interface BrowseButtonProps extends ReactToolbox.Props {
-  /**
-   * Indicates if the button should have accent color.
-   * @default false
-   */
-  accent?: boolean;
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * If true, component will be disabled.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * If true, the button will have a flat look.
-   * @default false
-   */
-  flat?: boolean;
-  /**
-   * If true, the button will have a floating look.
-   * @default false
-   */
-  floating?: boolean;
-  /**
-   * Creates a link for the button.
-   */
-  href?: string;
-  /**
-   * Value of the icon (See Font Icon Component).
-   */
-  icon?: React.ReactNode | string;
-  /**
-   * If true, the neutral colors are inverted. Useful to put a button over a dark background.
-   */
-  inverse?: boolean;
-  /**
-   * The text string to use for the name of the button.
-   */
-  label?: string;
-  /**
-   * To be used with floating button. If true, the button will be smaller.
-   * @default false
-   */
-  mini?: boolean;
-  /**
-   * Set it to false if you don't want the neutral styles to be included.
-   * @default true
-   */
-  neutral?: boolean;
-  /**
-   * Indicates if the button should have primary color.
-   * @default false
-   */
-  primary?: boolean;
-  /**
-   * If true, the button will have a raised look.
-   * @default false
-   */
-  raised?: boolean;
-  /**
-   * If true, component will have a ripple effect on click.
-   * @default true
-   */
-  ripple?: boolean;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: BrowseButtonTheme;
-}
-
-export class BrowseButton extends React.Component<BrowseButtonProps, {}> { }
diff --git a/lib/button/index.js b/lib/button/index.js
deleted file mode 100644
index fe05c0beb..000000000
--- a/lib/button/index.js
+++ /dev/null
@@ -1,42 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.BrowseButton = exports.IconButton = exports.Button = undefined;
-
-var _identifiers = require('../identifiers.js');
-
-var _reactCssThemr = require('react-css-themr');
-
-var _Button = require('./Button.js');
-
-var _BrowseButton = require('./BrowseButton.js');
-
-var _IconButton = require('./IconButton.js');
-
-var _FontIcon = require('../font_icon/FontIcon.js');
-
-var _FontIcon2 = _interopRequireDefault(_FontIcon);
-
-var _ripple = require('../ripple');
-
-var _ripple2 = _interopRequireDefault(_ripple);
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var Button = (0, _Button.buttonFactory)((0, _ripple2.default)({ centered: false }), _FontIcon2.default);
-var IconButton = (0, _IconButton.iconButtonFactory)((0, _ripple2.default)({ centered: true }), _FontIcon2.default);
-var BrowseButton = (0, _BrowseButton.browseButtonFactory)((0, _ripple2.default)({ centered: false }), _FontIcon2.default);
-var ThemedButton = (0, _reactCssThemr.themr)(_identifiers.BUTTON, _theme2.default)(Button);
-var ThemedIconButton = (0, _reactCssThemr.themr)(_identifiers.BUTTON, _theme2.default)(IconButton);
-var ThemedBrowseButton = (0, _reactCssThemr.themr)(_identifiers.BUTTON, _theme2.default)(BrowseButton);
-
-exports.default = ThemedButton;
-exports.Button = ThemedButton;
-exports.IconButton = ThemedIconButton;
-exports.BrowseButton = ThemedBrowseButton;
\ No newline at end of file
diff --git a/lib/button/theme.scss b/lib/button/theme.scss
deleted file mode 100644
index 9c450ef83..000000000
--- a/lib/button/theme.scss
+++ /dev/null
@@ -1,187 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-@import "http://github.com/mixins";
-
-.button {
-  position: relative;
-
-  > input {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 0;
-    width: 0.1px;
-    height: 0.1px;
-    padding: 0;
-    margin: 0;
-    overflow: hidden;
-    opacity: 0;
-  }
-}
-
-%button {
-  @include typo-button();
-  position: relative;
-  display: inline-block;
-  height: $button-height;
-  flex-direction: row;
-  align-content: center;
-  align-items: center;
-  justify-content: center;
-  line-height: $button-height;
-  text-align: center;
-  text-decoration: none;
-  white-space: nowrap;
-  cursor: pointer;
-  border: 0;
-  outline: none;
-  transition: box-shadow .2s $animation-curve-fast-out-linear-in, background-color .2s $animation-curve-default, color .2s $animation-curve-default;
-  &::-moz-focus-inner {
-    border: 0;
-  }
-  > span:not([data-react-toolbox="tooltip"]) {
-    display: inline-block;
-    line-height: $button-height;
-    vertical-align: top;
-  }
-  > svg {
-    display: inline-block;
-    width: 1em;
-    height: $button-height;
-    font-size: 120%;
-    vertical-align: top;
-    fill: currentColor;
-  }
-  > * {
-    pointer-events: none;
-  }
-  > .rippleWrapper {
-    overflow: hidden;
-  }
-  &[disabled] {
-    color: $button-disabled-text-color;
-    pointer-events: none;
-    cursor: auto;
-  }
-}
-
-%squared {
-  min-width: $button-squared-min-width;
-  padding: $button-squared-padding;
-  border-radius: $button-border-radius;
-  .icon {
-    margin-right: $button-squared-icon-margin;
-    font-size: 120%;
-    vertical-align: middle;
-  }
-  > svg {
-    margin-right: .5 * $unit;
-  }
-}
-
-%solid {
-  &[disabled] {
-    @include shadow-2dp();
-    background-color: $button-disabled-background-color;
-  }
-  &:active {
-    @include shadow-4dp();
-  }
-  &:focus:not(:active) {
-    @include focus-shadow();
-  }
-}
-
-.raised {
-  @extend %button;
-  @extend %squared;
-  @extend %solid;
-  @include shadow-2dp();
-}
-
-.flat {
-  @extend %button;
-  @extend %squared;
-  background: transparent;
-}
-
-.floating {
-  @extend %button;
-  @extend %solid;
-  width: $button-floating-height;
-  height: $button-floating-height;
-  font-size: $button-floating-font-size;
-  border-radius: 50%;
-  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);
-  .icon {
-    line-height: $button-floating-height;
-  }
-  > .rippleWrapper {
-    border-radius: 50%;
-  }
-  &.mini {
-    width: $button-floating-mini-height;
-    height: $button-floating-mini-height;
-    font-size: $button-floating-mini-font-size;
-    .icon {
-      line-height: $button-floating-mini-height;
-    }
-  }
-}
-
-.toggle {
-  @extend %button;
-  width: $button-height;
-  background: transparent;
-  border-radius: 50%;
-  > .icon, svg {
-    font-size: $button-toggle-font-size;
-    line-height: $button-height;
-    vertical-align: top;
-  }
-  > .rippleWrapper {
-    border-radius: 50%;
-  }
-}
-
-.neutral:not([disabled]) {
-  &.raised, &.floating {
-    color: $button-neutral-color-contrast;
-    background-color: $button-neutral-color;
-  }
-  &.flat, &.toggle {
-    color: $button-neutral-color-contrast;
-    &:focus:not(:active) {
-      background: $button-neutral-color-hover;
-    }
-  }
-  &.flat:hover {
-    background: $button-neutral-color-hover;
-  }
-
-  &.inverse {
-    &.raised, &.floating {
-      color: $button-neutral-color;
-      background-color: $button-neutral-color-contrast;
-    }
-    &.flat, &.toggle {
-      color: $button-neutral-color;
-      &:focus:not(:active) {
-        background: $button-neutral-color-hover;
-      }
-    }
-    &.flat:hover {
-      background: $button-neutral-color-hover;
-    }
-  }
-}
-
-.neutral.inverse[disabled] {
-  color: $button-disabled-text-color-inverse;
-  background-color: $button-disabled-background-inverse;
-}
-
-@include btn-colors("primary", $button-primary-color-contrast, $button-primary-color, $button-primary-color-hover);
-@include btn-colors("accent", $button-accent-color-contrast, $button-accent-color, $button-accent-color-hover);
diff --git a/lib/card/Card.js b/lib/card/Card.js
deleted file mode 100644
index 3067f7475..000000000
--- a/lib/card/Card.js
+++ /dev/null
@@ -1,55 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Card = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _identifiers = require('../identifiers.js');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-var Card = function Card(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      raised = _ref.raised,
-      theme = _ref.theme,
-      other = _objectWithoutProperties(_ref, ['children', 'className', 'raised', 'theme']);
-
-  var classes = (0, _classnames3.default)(theme.card, _defineProperty({}, theme.raised, raised), className);
-
-  return _react2.default.createElement(
-    'div',
-    _extends({ 'data-react-toolbox': 'card', className: classes }, other),
-    children
-  );
-};
-
-Card.propTypes = {
-  children: _react.PropTypes.any,
-  className: _react.PropTypes.string,
-  raised: _react.PropTypes.bool,
-  theme: _react.PropTypes.shape({
-    card: _react.PropTypes.string,
-    raised: _react.PropTypes.string
-  })
-};
-
-exports.default = (0, _reactCssThemr.themr)(_identifiers.CARD)(Card);
-exports.Card = Card;
\ No newline at end of file
diff --git a/lib/card/CardActions.js b/lib/card/CardActions.js
deleted file mode 100644
index 5c4cb45c6..000000000
--- a/lib/card/CardActions.js
+++ /dev/null
@@ -1,48 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CardActions = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _identifiers = require('../identifiers.js');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-var CardActions = function CardActions(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      theme = _ref.theme,
-      other = _objectWithoutProperties(_ref, ['children', 'className', 'theme']);
-
-  return _react2.default.createElement(
-    'div',
-    _extends({ className: (0, _classnames2.default)(theme.cardActions, className) }, other),
-    children
-  );
-};
-
-CardActions.propTypes = {
-  children: _react.PropTypes.any,
-  className: _react.PropTypes.string,
-  theme: _react.PropTypes.shape({
-    cardActions: _react.PropTypes.string
-  })
-};
-
-exports.default = (0, _reactCssThemr.themr)(_identifiers.CARD)(CardActions);
-exports.CardActions = CardActions;
\ No newline at end of file
diff --git a/lib/card/CardMedia.js b/lib/card/CardMedia.js
deleted file mode 100644
index e0d86cc43..000000000
--- a/lib/card/CardMedia.js
+++ /dev/null
@@ -1,75 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CardMedia = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _classnames3 = require('classnames');
-
-var _classnames4 = _interopRequireDefault(_classnames3);
-
-var _identifiers = require('../identifiers.js');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-var CardMedia = function CardMedia(_ref) {
-  var aspectRatio = _ref.aspectRatio,
-      children = _ref.children,
-      className = _ref.className,
-      color = _ref.color,
-      contentOverlay = _ref.contentOverlay,
-      image = _ref.image,
-      theme = _ref.theme,
-      other = _objectWithoutProperties(_ref, ['aspectRatio', 'children', 'className', 'color', 'contentOverlay', 'image', 'theme']);
-
-  var classes = (0, _classnames4.default)(theme.cardMedia, _defineProperty({}, theme[aspectRatio], aspectRatio), className);
-
-  var innerClasses = (0, _classnames4.default)(theme.content, _defineProperty({}, theme.contentOverlay, contentOverlay));
-
-  var bgStyle = {
-    backgroundColor: color ? color : undefined,
-    backgroundImage: typeof image === 'string' ? 'url(http://github.com/''%20+%20image%20+%20'/')' : undefined
-  };
-
-  return _react2.default.createElement(
-    'div',
-    _extends({ style: bgStyle, className: classes }, other),
-    _react2.default.createElement(
-      'div',
-      { className: innerClasses },
-      children
-    )
-  );
-};
-
-CardMedia.propTypes = {
-  aspectRatio: _react.PropTypes.oneOf(['wide', 'square']),
-  children: _react.PropTypes.any,
-  className: _react.PropTypes.string,
-  color: _react.PropTypes.string,
-  contentOverlay: _react.PropTypes.bool,
-  image: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-  theme: _react.PropTypes.shape({
-    cardMedia: _react.PropTypes.string,
-    content: _react.PropTypes.string,
-    contentOverlay: _react.PropTypes.string,
-    square: _react.PropTypes.string,
-    wide: _react.PropTypes.string
-  })
-};
-
-exports.default = (0, _reactCssThemr.themr)(_identifiers.CARD)(CardMedia);
-exports.CardMedia = CardMedia;
\ No newline at end of file
diff --git a/lib/card/CardText.js b/lib/card/CardText.js
deleted file mode 100644
index b1ea09aea..000000000
--- a/lib/card/CardText.js
+++ /dev/null
@@ -1,52 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CardText = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _identifiers = require('../identifiers.js');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-var CardText = function CardText(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      theme = _ref.theme,
-      other = _objectWithoutProperties(_ref, ['children', 'className', 'theme']);
-
-  return _react2.default.createElement(
-    'div',
-    _extends({ className: (0, _classnames2.default)(theme.cardText, className) }, other),
-    typeof children === 'string' ? _react2.default.createElement(
-      'p',
-      null,
-      children
-    ) : children
-  );
-};
-
-CardText.propTypes = {
-  children: _react.PropTypes.any,
-  className: _react.PropTypes.string,
-  theme: _react.PropTypes.shape({
-    cardText: _react.PropTypes.string
-  })
-};
-
-exports.default = (0, _reactCssThemr.themr)(_identifiers.CARD)(CardText);
-exports.CardText = CardText;
\ No newline at end of file
diff --git a/lib/card/CardTitle.js b/lib/card/CardTitle.js
deleted file mode 100644
index a6d278073..000000000
--- a/lib/card/CardTitle.js
+++ /dev/null
@@ -1,93 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.cardTitleFactory = exports.CardTitle = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Avatar = require('../avatar/Avatar.js');
-
-var _Avatar2 = _interopRequireDefault(_Avatar);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-var factory = function factory(Avatar) {
-  var CardTitle = function CardTitle(_ref) {
-    var _classnames;
-
-    var avatar = _ref.avatar,
-        children = _ref.children,
-        className = _ref.className,
-        subtitle = _ref.subtitle,
-        theme = _ref.theme,
-        title = _ref.title,
-        other = _objectWithoutProperties(_ref, ['avatar', 'children', 'className', 'subtitle', 'theme', 'title']);
-
-    var classes = (0, _classnames3.default)(theme.cardTitle, (_classnames = {}, _defineProperty(_classnames, theme.small, avatar), _defineProperty(_classnames, theme.large, !avatar), _classnames), className);
-
-    return _react2.default.createElement(
-      'div',
-      _extends({ className: classes }, other),
-      typeof avatar === 'string' ? _react2.default.createElement(Avatar, { image: avatar, theme: theme }) : avatar,
-      _react2.default.createElement(
-        'div',
-        null,
-        title && _react2.default.createElement(
-          'h5',
-          { className: theme.title },
-          title
-        ),
-        children && typeof children === 'string' && _react2.default.createElement(
-          'h5',
-          { className: theme.title },
-          children
-        ),
-        subtitle && _react2.default.createElement(
-          'p',
-          { className: theme.subtitle },
-          subtitle
-        ),
-        children && typeof children !== 'string' && children
-      )
-    );
-  };
-
-  CardTitle.propTypes = {
-    avatar: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-    children: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element, _react.PropTypes.array]),
-    className: _react.PropTypes.string,
-    subtitle: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-    theme: _react.PropTypes.shape({
-      large: _react.PropTypes.string,
-      title: _react.PropTypes.string,
-      small: _react.PropTypes.string,
-      subtitle: _react.PropTypes.string
-    }),
-    title: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element])
-  };
-
-  return CardTitle;
-};
-
-var CardTitle = factory(_Avatar2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.CARD)(CardTitle);
-exports.CardTitle = CardTitle;
-exports.cardTitleFactory = factory;
\ No newline at end of file
diff --git a/lib/card/_config.scss b/lib/card/_config.scss
deleted file mode 100644
index c89b3cb53..000000000
--- a/lib/card/_config.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-$card-color-white: $color-white !default;
-$card-text-overlay: rgba($color-black, 0.35) !default;
-$card-background-color: $card-color-white !default;
-$card-padding-sm: .8 * $unit !default;
-$card-padding: 1.6 * $unit !default;
-$card-padding-lg: 2 * $unit !default;
-$card-font-size: $font-size-small !default;
diff --git a/lib/card/index.d.ts b/lib/card/index.d.ts
deleted file mode 100644
index 824771fac..000000000
--- a/lib/card/index.d.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface CardTheme {
-  card?: string;
-  raised?: string;
-}
-
-interface CardProps extends ReactToolbox.Props {
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  raised?: boolean;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: CardTheme;
-}
-
-export class Card extends React.Component<CardProps, {}> { }
-
-export interface CardActionsTheme {
-  cardActions?: string;
-}
-
-interface CardActionsProps extends ReactToolbox.Props {
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: CardActionsTheme;
-}
-
-export class CardActions extends React.Component<CardActionsProps, {}> { }
-
-export interface CardMediaTheme {
-  cardMedia?: string;
-  content?: string;
-  contentOverlay?: string;
-  square?: string;
-  wide?: string;
-}
-
-interface CardMediaProps extends ReactToolbox.Props {
-  aspectRatio?: "wide" | "square";
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  color?: string;
-  contentOverlay?: boolean;
-  image?: React.ReactNode | string;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: CardMediaTheme;
-}
-
-export class CardMedia extends React.Component<CardMediaProps, {}> { }
-
-export interface CardTextTheme {
-  cardText?: string;
-}
-
-interface CardTextProps extends ReactToolbox.Props {
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: CardTextTheme;
-}
-
-export class CardText extends React.Component<CardTextProps, {}> { }
-
-export interface CardTitleTheme {
-  large?: string;
-  title?: string;
-  small?: string;
-  subtitle?: string;
-}
-
-interface CardTitleProps extends ReactToolbox.Props {
-  avatar?: React.ReactNode | string;
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  subtitle?: React.ReactNode | string;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: CardTitleTheme;
-  title?: React.ReactNode | string;
-}
-
-export class CardTitle extends React.Component<CardTitleProps, {}> { }
diff --git a/lib/card/index.js b/lib/card/index.js
deleted file mode 100644
index d124b681e..000000000
--- a/lib/card/index.js
+++ /dev/null
@@ -1,44 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CardTitle = exports.CardText = exports.CardMedia = exports.CardActions = exports.Card = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Card = require('./Card.js');
-
-var _CardActions = require('./CardActions.js');
-
-var _CardMedia = require('./CardMedia.js');
-
-var _CardText = require('./CardText.js');
-
-var _CardTitle = require('./CardTitle.js');
-
-var _avatar = require('../avatar');
-
-var _avatar2 = _interopRequireDefault(_avatar);
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var CardTitle = (0, _CardTitle.cardTitleFactory)(_avatar2.default);
-var ThemedCard = (0, _reactCssThemr.themr)(_identifiers.CARD, _theme2.default)(_Card.Card);
-var ThemedCardActions = (0, _reactCssThemr.themr)(_identifiers.CARD, _theme2.default)(_CardActions.CardActions);
-var ThemedCardMedia = (0, _reactCssThemr.themr)(_identifiers.CARD, _theme2.default)(_CardMedia.CardMedia);
-var ThemedCardText = (0, _reactCssThemr.themr)(_identifiers.CARD, _theme2.default)(_CardText.CardText);
-var ThemedCardTitle = (0, _reactCssThemr.themr)(_identifiers.CARD, _theme2.default)(CardTitle);
-
-exports.default = ThemedCard;
-exports.Card = ThemedCard;
-exports.CardActions = ThemedCardActions;
-exports.CardMedia = ThemedCardMedia;
-exports.CardText = ThemedCardText;
-exports.CardTitle = ThemedCardTitle;
\ No newline at end of file
diff --git a/lib/card/theme.scss b/lib/card/theme.scss
deleted file mode 100644
index c49ea5cf6..000000000
--- a/lib/card/theme.scss
+++ /dev/null
@@ -1,126 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.card {
-  @include shadow-2dp();
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  overflow: hidden;
-  font-size: $card-font-size;
-  background: $card-background-color;
-  border-radius: .2 * $unit;
-  &.raised {
-    @include shadow-8dp();
-  }
-  [data-react-toolbox="avatar"] {
-    display: block;
-  }
-}
-
-.cardMedia {
-  position: relative;
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: cover;
-  &.wide, &.square {
-    width: 100%;
-    .content {
-      position: absolute;
-      height: 100%;
-    }
-    .content > iframe, .content > video, .content > img {
-      max-width: 100%;
-    }
-  }
-  &::after {
-    display: block;
-    height: 0;
-    content: "";
-  }
-  &.wide::after {
-    padding-top: 56.25%;
-  }
-  &.square::after {
-    padding-top: 100%;
-  }
-  .content {
-    position: relative;
-    top: 0;
-    left: 0;
-    display: flex;
-    width: 100%;
-    flex-direction: column;
-    justify-content: flex-end;
-    overflow: hidden;
-  }
-  .contentOverlay {
-    .cardTitle, .cardActions, .cardText {
-      background-color: $card-text-overlay;
-    }
-  }
-}
-
-.cardTitle {
-  display: flex;
-  align-items: center;
-  [data-react-toolbox="avatar"] {
-    margin-right: 1.3 * $unit;
-  }
-  .subtitle {
-    color: $color-text-secondary;
-  }
-  &.large {
-    padding: $card-padding-lg $card-padding ($card-padding - .2 * $unit);
-    .title {
-      @include typo-headline();
-      line-height: 1.25;
-    }
-  }
-  &.small {
-    padding: $card-padding;
-    .title {
-      @include typo-body-2(false, true);
-      line-height: 1.4;
-    }
-    .subtitle {
-      font-weight: 500;
-      line-height: 1.4;
-    }
-  }
-  .cardMedia & {
-    .title, .subtitle {
-      color: $card-color-white;
-    }
-  }
-}
-
-.cardTitle, .cardText {
-  padding: ($card-padding - .2 * $unit) $card-padding;
-  &:last-child {
-    padding-bottom: $card-padding-lg;
-  }
-  + .cardText {
-    padding-top: 0;
-  }
-}
-
-.cardActions {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  padding: $card-padding-sm;
-  [data-react-toolbox="button"] {
-    min-width: 0;
-    padding: 0 $card-padding-sm;
-    margin: 0 $card-padding-sm / 2;
-    &:first-child {
-      margin-left: 0;
-    }
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-}
diff --git a/lib/checkbox/Check.js b/lib/checkbox/Check.js
deleted file mode 100644
index 90041ec49..000000000
--- a/lib/checkbox/Check.js
+++ /dev/null
@@ -1,52 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var factory = function factory(ripple) {
-  var Check = function Check(_ref) {
-    var checked = _ref.checked,
-        children = _ref.children,
-        onMouseDown = _ref.onMouseDown,
-        theme = _ref.theme,
-        style = _ref.style;
-    return _react2.default.createElement(
-      'div',
-      {
-        'data-react-toolbox': 'check',
-        className: (0, _classnames3.default)(theme.check, _defineProperty({}, theme.checked, checked)),
-        onMouseDown: onMouseDown,
-        style: style
-      },
-      children
-    );
-  };
-
-  Check.propTypes = {
-    checked: _react.PropTypes.bool,
-    children: _react.PropTypes.any,
-    onMouseDown: _react.PropTypes.func,
-    style: _react.PropTypes.object,
-    theme: _react.PropTypes.shape({
-      check: _react.PropTypes.string,
-      checked: _react.PropTypes.string
-    })
-  };
-
-  return ripple(Check);
-};
-
-exports.default = factory;
\ No newline at end of file
diff --git a/lib/checkbox/Checkbox.js b/lib/checkbox/Checkbox.js
deleted file mode 100644
index 8c423d846..000000000
--- a/lib/checkbox/Checkbox.js
+++ /dev/null
@@ -1,169 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Checkbox = exports.checkboxFactory = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Ripple = require('../ripple/Ripple.js');
-
-var _Ripple2 = _interopRequireDefault(_Ripple);
-
-var _Check = require('./Check.js');
-
-var _Check2 = _interopRequireDefault(_Check);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(Check) {
-  var Checkbox = function (_Component) {
-    _inherits(Checkbox, _Component);
-
-    function Checkbox() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, Checkbox);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Checkbox.__proto__ || Object.getPrototypeOf(Checkbox)).call.apply(_ref, [this].concat(args))), _this), _this.handleToggle = function (event) {
-        if (event.pageX !== 0 && event.pageY !== 0) _this.blur();
-        if (!_this.props.disabled && _this.props.onChange) {
-          _this.props.onChange(!_this.props.checked, event);
-        }
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(Checkbox, [{
-      key: 'blur',
-      value: function blur() {
-        this.inputNode && this.inputNode.blur();
-      }
-    }, {
-      key: 'focus',
-      value: function focus() {
-        this.inputNode && this.inputNode.focus();
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var _this2 = this;
-
-        var _props = this.props,
-            checked = _props.checked,
-            children = _props.children,
-            disabled = _props.disabled,
-            label = _props.label,
-            name = _props.name,
-            style = _props.style,
-            onChange = _props.onChange,
-            onMouseEnter = _props.onMouseEnter,
-            onMouseLeave = _props.onMouseLeave,
-            theme = _props.theme,
-            others = _objectWithoutProperties(_props, ['checked', 'children', 'disabled', 'label', 'name', 'style', 'onChange', 'onMouseEnter', 'onMouseLeave', 'theme']);
-
-        var className = (0, _classnames3.default)(theme.field, _defineProperty({}, theme.disabled, this.props.disabled), this.props.className);
-
-        return _react2.default.createElement(
-          'label',
-          {
-            'data-react-toolbox': 'checkbox',
-            className: className,
-            onMouseEnter: onMouseEnter,
-            onMouseLeave: onMouseLeave
-          },
-          _react2.default.createElement('input', _extends({}, others, {
-            checked: checked,
-            className: theme.input,
-            disabled: disabled,
-            name: name,
-            onChange: function onChange() {},
-            onClick: this.handleToggle,
-            ref: function ref(node) {
-              _this2.inputNode = node;
-            },
-            type: 'checkbox'
-          })),
-          _react2.default.createElement(Check, {
-            checked: checked,
-            disabled: disabled,
-            rippleClassName: theme.ripple,
-            style: style,
-            theme: theme
-          }),
-          label ? _react2.default.createElement(
-            'span',
-            { 'data-react-toolbox': 'label', className: theme.text },
-            label
-          ) : null,
-          children
-        );
-      }
-    }]);
-
-    return Checkbox;
-  }(_react.Component);
-
-  Checkbox.propTypes = {
-    checked: _react.PropTypes.bool,
-    children: _react.PropTypes.node,
-    className: _react.PropTypes.string,
-    disabled: _react.PropTypes.bool,
-    label: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.node]),
-    name: _react.PropTypes.string,
-    onChange: _react.PropTypes.func,
-    onMouseEnter: _react.PropTypes.func,
-    onMouseLeave: _react.PropTypes.func,
-    style: _react.PropTypes.object,
-    theme: _react.PropTypes.shape({
-      disabled: _react.PropTypes.string,
-      field: _react.PropTypes.string,
-      input: _react.PropTypes.string,
-      ripple: _react.PropTypes.string
-    })
-  };
-  Checkbox.defaultProps = {
-    checked: false,
-    className: '',
-    disabled: false
-  };
-
-
-  return Checkbox;
-};
-
-var Check = (0, _Check2.default)((0, _Ripple2.default)({ centered: true, spread: 2.6 }));
-var Checkbox = factory(Check);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.CHECKBOX)(Checkbox);
-exports.checkboxFactory = factory;
-exports.Checkbox = Checkbox;
\ No newline at end of file
diff --git a/lib/checkbox/_config.scss b/lib/checkbox/_config.scss
deleted file mode 100644
index 18266e498..000000000
--- a/lib/checkbox/_config.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-$checkbox-color: $color-primary !default;
-$checkbox-disabled-color: rgba($color-black, 0.26) !default;
-$checkbox-field-margin-bottom: 1.5 * $unit !default;
-$checkbox-focus-checked-color: rgba($color-primary, 0.26) !default;
-$checkbox-ripple-duration: 650ms !default;
-$checkbox-size: 1.8 * $unit !default;
-$checkbox-focus-color: rgba($color-black, 0.1) !default;
-$checkbox-focus-size: $checkbox-size * 2.3 !default;
-$checkbox-text-color: $color-black !default;
-$checkbox-text-font-size: $font-size-small !default;
-$checkbox-total-height: 1.8 * $unit !default;
-$checkbox-transition-duration: .2s !default;
diff --git a/lib/checkbox/index.d.ts b/lib/checkbox/index.d.ts
deleted file mode 100644
index 29c1045e7..000000000
--- a/lib/checkbox/index.d.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface CheckboxTheme {
-  /**
-   * Used as root in the check element.
-   */
-  check?: string;
-  /**
-   * Used for the check element when it's checked.
-   */
-  checked?: string;
-  /**
-   * Used when the component is disabled.
-   */
-  disabled?: string;
-  /**
-   * Used as the root class of the component.
-   */
-  field?: string;
-  /**
-   * Used for the input element.
-   */
-  input?: string;
-  /**
-   * Used for the ripple component.
-   */
-  ripple?: string;
-  /**
-   * Used for the text label.
-   */
-  text?: string;
-}
-
-interface CheckboxProps extends ReactToolbox.Props {
-  /**
-   * Value for the checkbox, can be true or false.
-   * @default false
-   */
-  checked?: boolean;
-  /**
-   * If true, the checkbox shown as disabled and cannot be modified.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * Text label to attach next to the checkbox element.
-   */
-  label?: React.ReactNode | string;
-  /**
-   * The name of the field to set in the input checkbox.
-   */
-  name?: string;
-  /**
-   * Callback called when the checkbox is blurred.
-   */
-  onBlur?: Function;
-  /**
-   * Callback called when the checkbox value is changed.
-   */
-  onChange?: Function;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: CheckboxTheme;
-}
-
-export class Checkbox extends React.Component<CheckboxProps, {}> { }
-
-export default Checkbox;
diff --git a/lib/checkbox/index.js b/lib/checkbox/index.js
deleted file mode 100644
index 5efa6e16c..000000000
--- a/lib/checkbox/index.js
+++ /dev/null
@@ -1,32 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Checkbox = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _ripple = require('../ripple');
-
-var _ripple2 = _interopRequireDefault(_ripple);
-
-var _Checkbox = require('./Checkbox.js');
-
-var _Check = require('./Check.js');
-
-var _Check2 = _interopRequireDefault(_Check);
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var ThemedCheck = (0, _Check2.default)((0, _ripple2.default)({ centered: true, spread: 2.6 }));
-var ThemedCheckbox = (0, _reactCssThemr.themr)(_identifiers.CHECKBOX, _theme2.default)((0, _Checkbox.checkboxFactory)(ThemedCheck));
-
-exports.default = ThemedCheckbox;
-exports.Checkbox = ThemedCheckbox;
\ No newline at end of file
diff --git a/lib/checkbox/theme.scss b/lib/checkbox/theme.scss
deleted file mode 100644
index 55b179205..000000000
--- a/lib/checkbox/theme.scss
+++ /dev/null
@@ -1,121 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.field {
-  position: relative;
-  display: block;
-  height: $checkbox-size;
-  margin-bottom: $checkbox-field-margin-bottom;
-  white-space: nowrap;
-  vertical-align: middle;
-  .ripple {
-    background-color: $checkbox-color;
-    opacity: .3;
-    transition-duration: $checkbox-ripple-duration;
-  }
-}
-
-.text {
-  display: inline-block;
-  padding-left: $unit;
-  font-size: $checkbox-text-font-size;
-  line-height: $checkbox-size;
-  color: $checkbox-text-color;
-  white-space: nowrap;
-  vertical-align: top;
-}
-
-.input {
-  position: absolute;
-  width: 0;
-  height: 0;
-  overflow: hidden;
-  opacity: 0;
-  &:focus ~ .check {
-    &:before {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      width: $checkbox-focus-size;
-      height: $checkbox-focus-size;
-      margin-top: - $checkbox-focus-size / 2;
-      margin-left: - $checkbox-focus-size / 2;
-      pointer-events: none;
-      content: "";
-      background-color: $checkbox-focus-color;
-      border-radius: 50%;
-    }
-    &.checked:before {
-      background-color: $checkbox-focus-checked-color;
-    }
-  }
-}
-
-.check {
-  position: relative;
-  display: inline-block;
-  width: $checkbox-size;
-  height: $checkbox-size;
-  vertical-align: top;
-  cursor: pointer;
-  border-color: $checkbox-text-color;
-  border-style: solid;
-  border-width: 2px;
-  border-radius: 2px;
-  transition-timing-function: $animation-curve-default;
-  transition-duration: $checkbox-transition-duration;
-  transition-property: background-color;
-  &.checked {
-    background-color: $checkbox-color;
-    border-color: $checkbox-color;
-    &:after {
-      position: absolute;
-      top: -.1 * $unit;
-      left: .4 * $unit;
-      width: .7 * $unit;
-      height: 1.2 * $unit;
-      content: "";
-      border-color: $color-background;
-      border-style: solid;
-      border-top: 0;
-      border-right-width: 2px;
-      border-bottom-width: 2px;
-      border-left: 0;
-      transform: rotate(45deg);
-      animation: checkmark-expand 140ms ease-out forwards;
-    }
-  }
-}
-
-.disabled {
-  > .text {
-    color: $checkbox-disabled-color;
-  }
-  > .check {
-    cursor: auto;
-    border-color: $checkbox-disabled-color;
-    &.checked {
-      cursor: auto;
-      background-color: $checkbox-disabled-color;
-      border-color: transparent;
-    }
-  }
-}
-
-@keyframes checkmark-expand {
-  0% {
-    top: .9 * $unit;
-    left: .6 * $unit;
-    width: 0;
-    height: 0;
-  }
-
-  100% {
-    top: -.1 * $unit;
-    left: .4 * $unit;
-    width: .7 * $unit;
-    height: 1.2 * $unit;
-  }
-}
diff --git a/lib/chip/Chip.js b/lib/chip/Chip.js
deleted file mode 100644
index 3c4d947bb..000000000
--- a/lib/chip/Chip.js
+++ /dev/null
@@ -1,97 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Chip = exports.chipFactory = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Avatar = require('../avatar/Avatar.js');
-
-var _Avatar2 = _interopRequireDefault(_Avatar);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-var factory = function factory(Avatar) {
-  var Chip = function Chip(_ref) {
-    var _classnames;
-
-    var children = _ref.children,
-        className = _ref.className,
-        deletable = _ref.deletable,
-        onDeleteClick = _ref.onDeleteClick,
-        theme = _ref.theme,
-        other = _objectWithoutProperties(_ref, ['children', 'className', 'deletable', 'onDeleteClick', 'theme']);
-
-    var hasAvatar = false;
-    if (_react2.default.Children.count(children)) {
-      var firstChild = children[0];
-      hasAvatar = firstChild && firstChild.type && firstChild.type === Avatar;
-    }
-
-    var classes = (0, _classnames3.default)(theme.chip, (_classnames = {}, _defineProperty(_classnames, theme.deletable, !!deletable), _defineProperty(_classnames, theme.avatar, !!hasAvatar), _classnames), className);
-
-    return _react2.default.createElement(
-      'div',
-      _extends({ 'data-react-toolbox': 'chip', className: classes }, other),
-      typeof children === 'string' ? _react2.default.createElement(
-        'span',
-        null,
-        children
-      ) : children,
-      deletable ? _react2.default.createElement(
-        'span',
-        { className: theme.delete, onClick: onDeleteClick },
-        _react2.default.createElement(
-          'svg',
-          { viewBox: '0 0 40 40', className: theme.deleteIcon },
-          _react2.default.createElement('path', { className: theme.deleteX, d: 'M 12,12 L 28,28 M 28,12 L 12,28' })
-        )
-      ) : null
-    );
-  };
-
-  Chip.propTypes = {
-    children: _react.PropTypes.node,
-    className: _react.PropTypes.string,
-    deletable: _react.PropTypes.bool,
-    onDeleteClick: _react.PropTypes.func,
-    theme: _react.PropTypes.shape({
-      avatar: _react.PropTypes.string,
-      chip: _react.PropTypes.string,
-      deletable: _react.PropTypes.string,
-      delete: _react.PropTypes.string,
-      deleteIcon: _react.PropTypes.string,
-      deleteX: _react.PropTypes.string
-    })
-  };
-
-  Chip.defaultProps = {
-    className: '',
-    deletable: false
-  };
-
-  return Chip;
-};
-
-var Chip = factory(_Avatar2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.CHIP)(Chip);
-exports.chipFactory = factory;
-exports.Chip = Chip;
\ No newline at end of file
diff --git a/lib/chip/_config.scss b/lib/chip/_config.scss
deleted file mode 100644
index a335b2f66..000000000
--- a/lib/chip/_config.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-$chip-height: 3.2 * $unit !default;
-$chip-padding: 1.2 * $unit !default;
-$chip-margin-right: 0.25 * $unit !default;
-$chip-background: $palette-grey-200 !default;
-
-$chip-icon-font-size: 2 * $unit !default;
-$chip-icon-margin-right: 0.8 * $unit !default;
-
-$chip-color: $color-text-secondary !default;
-$chip-font-size: $font-size-small !default;
-
-$chip-remove-size: 2.4 * $unit !default;
-$chip-remove-margin: 0.4 * $unit !default;
-$chip-remove-stroke-width: 0.4 * $unit !default;
-$chip-remove-background: $palette-grey-400 !default;
-$chip-remove-background-hover: $palette-grey-500 !default;
-$chip-remove-color: $color-white !default;
diff --git a/lib/chip/index.d.ts b/lib/chip/index.d.ts
deleted file mode 100644
index 832ca408c..000000000
--- a/lib/chip/index.d.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface ChipTheme {
-  /**
-   * Added to the root element when the component includes an avatar.
-   */
-  avatar?: string;
-  /**
-   * Used for the root element.
-   */
-  chip?: string;
-  /**
-   * Added to the root element when the component is deletable.
-   */
-  deletable?: string;
-  /**
-   * Used for the delete element wrapper.
-   */
-  delete?: string;
-  /**
-   * Used for the delete icon.
-   */
-  deleteIcon?: string;
-  /**
-   * Used for the delete svg inner layer.
-   */
-  deleteX?: string;
-}
-
-interface ChipProps extends ReactToolbox.Props {
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * If true, the chip will be rendered with a delete icon.
-   * @default false
-   */
-  deletable?: boolean;
-  /**
-   * Callback to be invoked when the delete icon is clicked.
-   */
-  onDeleteClick?: Function;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: ChipTheme;
-}
-
-export class Chip extends React.Component<ChipProps, {}> { }
-
-export default Chip;
diff --git a/lib/chip/index.js b/lib/chip/index.js
deleted file mode 100644
index 5a62d8219..000000000
--- a/lib/chip/index.js
+++ /dev/null
@@ -1,28 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Chip = undefined;
-
-var _identifiers = require('../identifiers.js');
-
-var _reactCssThemr = require('react-css-themr');
-
-var _Chip = require('./Chip.js');
-
-var _avatar = require('../avatar');
-
-var _avatar2 = _interopRequireDefault(_avatar);
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var Chip = (0, _Chip.chipFactory)(_avatar2.default);
-var ThemedChip = (0, _reactCssThemr.themr)(_identifiers.CHIP, _theme2.default)(Chip);
-
-exports.default = ThemedChip;
-exports.Chip = ThemedChip;
\ No newline at end of file
diff --git a/lib/chip/theme.scss b/lib/chip/theme.scss
deleted file mode 100644
index 4baa8f9c9..000000000
--- a/lib/chip/theme.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.chip {
-  position: relative;
-  display: inline-block;
-  max-width: 100%;
-  padding: 0 $chip-padding;
-  margin-right: $chip-margin-right;
-  overflow: hidden;
-  font-size: $chip-font-size;
-  line-height: $chip-height;
-  color: $chip-color;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  background-color: $chip-background;
-  border-radius: $chip-height;
-}
-
-.avatar {
-  padding-left: 0;
-
-  > [data-react-toolbox="avatar"] {
-    width: $chip-height;
-    height: $chip-height;
-    margin-right: $chip-icon-margin-right;
-    vertical-align: middle;
-
-    > span {
-      font-size: $chip-icon-font-size;
-      line-height: $chip-height;
-    }
-  }
-}
-
-.deletable {
-  padding-right: $chip-remove-size + 2 * $chip-remove-margin;
-}
-
-.delete {
-  position: absolute;
-  right: 0;
-  display: inline-block;
-  width: $chip-remove-size;
-  height: $chip-remove-size;
-  padding: $chip-remove-margin;
-  margin: $chip-remove-margin;
-  vertical-align: middle;
-  cursor: pointer;
-}
-
-.delete:hover .deleteIcon {
-  background: $chip-remove-background-hover;
-}
-
-.deleteIcon {
-  vertical-align: top;
-  background: $chip-remove-background;
-  border-radius: $chip-remove-size;
-
-  .deleteX {
-    fill: transparent;
-    stroke-width: $chip-remove-stroke-width;
-    stroke: $chip-remove-color;
-  }
-}
diff --git a/lib/commons.scss b/lib/commons.scss
deleted file mode 100644
index 54f9ba163..000000000
--- a/lib/commons.scss
+++ /dev/null
@@ -1,95 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/~normalize.css";
-
-html {
-  font-size: 62.5%;
-}
-
-body {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  font-family: Roboto, sans-serif;
-  font-size: 1.6rem;
-  -webkit-touch-callout: none;
-  * {
-    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-  }
-}
-
-a, abbr, address, article, aside, audio, b, blockquote, body, caption, cite,
-code, dd, del, dfn, dialog, div, dl, dt, em, fieldset, figure, footer, form, h1,
-h2, h3, h4, h5, h6, header, hgroup, hr, html, i, iframe, img, ins, kbd, label,
-legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span,
-strong, sub, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
-  padding: 0;
-  margin: 0;
-  border: 0;
-  outline: 0;
-}
-
-*, *:before, *:after {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-h1, h2, h3, h4, h5, h6, label, p, button, abbr, a, span, small {
-  font-smoothing: antialiased;
-  -webkit-font-smoothing: antialiased;
-  text-size-adjust: 100%;
-}
-
-a {
-  text-decoration: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-
-input:not([type="checkbox"]):not([type="radio"]), button {
-  outline: none;
-  appearance: none;
-  -webkit-touch-callout: none;
-  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-}
-
-// -- Remove firefox default style for required inputs
-input[required]:-moz-ui-invalid {
-  box-shadow: none;
-}
-
-// -- Material design font sizes
-h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
-  @include typo-display-3($color-contrast: true);
-}
-
-h1 {
-  @include typo-display-3;
-}
-
-h2 {
-  @include typo-display-2;
-}
-
-h3 {
-  @include typo-display-1;
-}
-
-h4 {
-  @include typo-headline;
-}
-
-h5 {
-  @include typo-title;
-}
-
-h6 {
-  @include typo-subhead;
-}
-
-p {
-  @include typo-body-1;
-}
diff --git a/lib/date_picker/Calendar.js b/lib/date_picker/Calendar.js
deleted file mode 100644
index d8ce5acc4..000000000
--- a/lib/date_picker/Calendar.js
+++ /dev/null
@@ -1,212 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactAddonsCssTransitionGroup = require('react-addons-css-transition-group');
-
-var _reactAddonsCssTransitionGroup2 = _interopRequireDefault(_reactAddonsCssTransitionGroup);
-
-var _animations = require('../animations');
-
-var _time = require('../utils/time.js');
-
-var _time2 = _interopRequireDefault(_time);
-
-var _utils = require('../utils/utils.js');
-
-var _utils2 = _interopRequireDefault(_utils);
-
-var _CalendarMonth = require('./CalendarMonth.js');
-
-var _CalendarMonth2 = _interopRequireDefault(_CalendarMonth);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var DIRECTION_STEPS = { left: -1, right: 1 };
-
-var factory = function factory(IconButton) {
-  var Calendar = function (_Component) {
-    _inherits(Calendar, _Component);
-
-    function Calendar() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, Calendar);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Calendar.__proto__ || Object.getPrototypeOf(Calendar)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-        viewDate: _this.props.selectedDate
-      }, _this.handleDayClick = function (day) {
-        _this.props.onChange(_time2.default.setDay(_this.state.viewDate, day), true);
-      }, _this.handleYearClick = function (event) {
-        var year = parseInt(event.currentTarget.id);
-        var viewDate = _time2.default.setYear(_this.props.selectedDate, year);
-        _this.setState({ viewDate: viewDate });
-        _this.props.onChange(viewDate, false);
-      }, _this.handleKeys = function (e) {
-        var selectedDate = _this.props.selectedDate;
-
-
-        if (e.which === 37 || e.which === 38 || e.which === 39 || e.which === 40 || e.which === 13) e.preventDefault();
-
-        switch (e.which) {
-          case 13:
-            _this.props.handleSelect();break; // enter
-          case 37:
-            _this.handleDayArrowKey(_time2.default.addDays(selectedDate, -1));break; // left
-          case 38:
-            _this.handleDayArrowKey(_time2.default.addDays(selectedDate, -7));break; // up
-          case 39:
-            _this.handleDayArrowKey(_time2.default.addDays(selectedDate, 1));break; // right
-          case 40:
-            _this.handleDayArrowKey(_time2.default.addDays(selectedDate, 7));break; // down
-          default:
-            break;
-        }
-      }, _this.handleDayArrowKey = function (date) {
-        _this.setState({ viewDate: date });
-        _this.props.onChange(date, false);
-      }, _this.changeViewMonth = function (event) {
-        var direction = event.currentTarget.id;
-        _this.setState({
-          direction: direction,
-          viewDate: _time2.default.addMonths(_this.state.viewDate, DIRECTION_STEPS[direction])
-        });
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(Calendar, [{
-      key: 'componentWillMount',
-      value: function componentWillMount() {
-        document.body.addEventListener('keydown', this.handleKeys);
-      }
-    }, {
-      key: 'componentDidUpdate',
-      value: function componentDidUpdate() {
-        if (this.refs.activeYear) {
-          this.scrollToActive();
-        }
-      }
-    }, {
-      key: 'componentWillUnmount',
-      value: function componentWillUnmount() {
-        document.body.removeEventListener('keydown', this.handleKeys);
-      }
-    }, {
-      key: 'scrollToActive',
-      value: function scrollToActive() {
-        this.refs.years.scrollTop = this.refs.activeYear.offsetTop - this.refs.years.offsetHeight / 2 + this.refs.activeYear.offsetHeight / 2;
-      }
-    }, {
-      key: 'renderYears',
-      value: function renderYears() {
-        var _this2 = this;
-
-        return _react2.default.createElement(
-          'ul',
-          { 'data-react-toolbox': 'years', ref: 'years', className: this.props.theme.years },
-          _utils2.default.range(1900, 2100).map(function (year) {
-            return _react2.default.createElement('li', {
-              children: year,
-              className: year === _this2.state.viewDate.getFullYear() ? _this2.props.theme.active : '',
-              id: year,
-              key: year,
-              onClick: _this2.handleYearClick,
-              ref: year === _this2.state.viewDate.getFullYear() ? 'activeYear' : undefined
-            });
-          })
-        );
-      }
-    }, {
-      key: 'renderMonths',
-      value: function renderMonths() {
-        var theme = this.props.theme;
-
-        var animation = this.state.direction === 'left' ? _animations.SlideLeft : _animations.SlideRight;
-        return _react2.default.createElement(
-          'div',
-          { 'data-react-toolbox': 'calendar' },
-          _react2.default.createElement(IconButton, { id: 'left', className: theme.prev, icon: 'chevron_left', onClick: this.changeViewMonth }),
-          _react2.default.createElement(IconButton, { id: 'right', className: theme.next, icon: 'chevron_right', onClick: this.changeViewMonth }),
-          _react2.default.createElement(
-            _reactAddonsCssTransitionGroup2.default,
-            { transitionName: animation, transitionEnterTimeout: 350, transitionLeaveTimeout: 350 },
-            _react2.default.createElement(_CalendarMonth2.default, {
-              enabledDates: this.props.enabledDates,
-              disabledDates: this.props.disabledDates,
-              key: this.state.viewDate.getMonth(),
-              locale: this.props.locale,
-              maxDate: this.props.maxDate,
-              minDate: this.props.minDate,
-              onDayClick: this.handleDayClick,
-              selectedDate: this.props.selectedDate,
-              sundayFirstDayOfWeek: this.props.sundayFirstDayOfWeek,
-              theme: this.props.theme,
-              viewDate: this.state.viewDate
-            })
-          )
-        );
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        return _react2.default.createElement(
-          'div',
-          { className: this.props.theme.calendar },
-          this.props.display === 'months' ? this.renderMonths() : this.renderYears()
-        );
-      }
-    }]);
-
-    return Calendar;
-  }(_react.Component);
-
-  Calendar.propTypes = {
-    disabledDates: _react2.default.PropTypes.array,
-    display: _react.PropTypes.oneOf(['months', 'years']),
-    enabledDates: _react2.default.PropTypes.array,
-    handleSelect: _react.PropTypes.func,
-    locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
-    maxDate: _react.PropTypes.object,
-    minDate: _react.PropTypes.object,
-    onChange: _react.PropTypes.func,
-    selectedDate: _react.PropTypes.object,
-    sundayFirstDayOfWeek: _react2.default.PropTypes.bool,
-    theme: _react.PropTypes.shape({
-      active: _react.PropTypes.string,
-      calendar: _react.PropTypes.string,
-      next: _react.PropTypes.string,
-      prev: _react.PropTypes.string,
-      years: _react.PropTypes.string
-    }),
-    viewDate: _react.PropTypes.object
-  };
-  Calendar.defaultProps = {
-    display: 'months',
-    selectedDate: new Date()
-  };
-
-
-  return Calendar;
-};
-
-exports.default = factory;
\ No newline at end of file
diff --git a/lib/date_picker/CalendarDay.js b/lib/date_picker/CalendarDay.js
deleted file mode 100644
index 0fcccb182..000000000
--- a/lib/date_picker/CalendarDay.js
+++ /dev/null
@@ -1,106 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _time = require('../utils/time.js');
-
-var _time2 = _interopRequireDefault(_time);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var Day = function (_Component) {
-  _inherits(Day, _Component);
-
-  function Day() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    _classCallCheck(this, Day);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Day.__proto__ || Object.getPrototypeOf(Day)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function () {
-      if (!_this.props.disabled && _this.props.onClick) {
-        _this.props.onClick(_this.props.day);
-      }
-    }, _temp), _possibleConstructorReturn(_this, _ret);
-  }
-
-  _createClass(Day, [{
-    key: 'dayStyle',
-    value: function dayStyle() {
-      if (this.props.day === 1) {
-        var e = this.props.sundayFirstDayOfWeek ? 0 : 1;
-        var firstDay = _time2.default.getFirstWeekDay(this.props.viewDate) - e;
-        return {
-          marginLeft: (firstDay >= 0 ? firstDay : 6) * 100 / 7 + '%'
-        };
-      }
-    }
-  }, {
-    key: 'isSelected',
-    value: function isSelected() {
-      var sameYear = this.props.viewDate.getFullYear() === this.props.selectedDate.getFullYear();
-      var sameMonth = this.props.viewDate.getMonth() === this.props.selectedDate.getMonth();
-      var sameDay = this.props.day === this.props.selectedDate.getDate();
-      return sameYear && sameMonth && sameDay;
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _classnames;
-
-      var className = (0, _classnames3.default)(this.props.theme.day, (_classnames = {}, _defineProperty(_classnames, this.props.theme.active, this.isSelected()), _defineProperty(_classnames, this.props.theme.disabled, this.props.disabled), _classnames));
-
-      return _react2.default.createElement(
-        'div',
-        { 'data-react-toolbox': 'day', className: className, style: this.dayStyle() },
-        _react2.default.createElement(
-          'span',
-          { onClick: this.handleClick },
-          this.props.day
-        )
-      );
-    }
-  }]);
-
-  return Day;
-}(_react.Component);
-
-Day.propTypes = {
-  day: _react.PropTypes.number,
-  disabled: _react.PropTypes.bool,
-  onClick: _react.PropTypes.func,
-  selectedDate: _react.PropTypes.object,
-  sundayFirstDayOfWeek: _react.PropTypes.bool,
-  theme: _react.PropTypes.shape({
-    active: _react.PropTypes.string,
-    day: _react.PropTypes.string,
-    disabled: _react.PropTypes.string
-  }),
-  viewDate: _react.PropTypes.object
-};
-exports.default = Day;
\ No newline at end of file
diff --git a/lib/date_picker/CalendarMonth.js b/lib/date_picker/CalendarMonth.js
deleted file mode 100644
index c52fe86c4..000000000
--- a/lib/date_picker/CalendarMonth.js
+++ /dev/null
@@ -1,157 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _time = require('../utils/time.js');
-
-var _time2 = _interopRequireDefault(_time);
-
-var _utils = require('../utils/utils.js');
-
-var _utils2 = _interopRequireDefault(_utils);
-
-var _CalendarDay = require('./CalendarDay.js');
-
-var _CalendarDay2 = _interopRequireDefault(_CalendarDay);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var Month = function (_Component) {
-  _inherits(Month, _Component);
-
-  function Month() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    _classCallCheck(this, Month);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Month.__proto__ || Object.getPrototypeOf(Month)).call.apply(_ref, [this].concat(args))), _this), _this.handleDayClick = function (day) {
-      if (_this.props.onDayClick) _this.props.onDayClick(day);
-    }, _temp), _possibleConstructorReturn(_this, _ret);
-  }
-
-  _createClass(Month, [{
-    key: 'isDayDisabled',
-    value: function isDayDisabled(date) {
-      var _props = this.props,
-          minDate = _props.minDate,
-          maxDate = _props.maxDate,
-          enabledDates = _props.enabledDates,
-          disabledDates = _props.disabledDates;
-
-      var compareDate = function compareDate(compDate) {
-        return date.getTime() === compDate.getTime();
-      };
-      var dateInDisabled = disabledDates.filter(compareDate).length > 0;
-      var dateInEnabled = enabledDates.filter(compareDate).length > 0;
-      return _time2.default.dateOutOfRange(date, minDate, maxDate) || enabledDates.length > 0 && !dateInEnabled || dateInDisabled;
-    }
-  }, {
-    key: 'renderWeeks',
-    value: function renderWeeks() {
-      var _this2 = this;
-
-      var days = _utils2.default.range(0, 7).map(function (d) {
-        return _time2.default.getDayOfWeekLetter(d, _this2.props.locale);
-      });
-      var source = this.props.sundayFirstDayOfWeek ? days : [].concat(_toConsumableArray(days.slice(1)), [days[0]]);
-      return source.map(function (d, i) {
-        return _react2.default.createElement(
-          'span',
-          { key: i },
-          d
-        );
-      });
-    }
-  }, {
-    key: 'renderDays',
-    value: function renderDays() {
-      var _this3 = this;
-
-      return _utils2.default.range(1, _time2.default.getDaysInMonth(this.props.viewDate) + 1).map(function (i) {
-        var date = new Date(_this3.props.viewDate.getFullYear(), _this3.props.viewDate.getMonth(), i);
-        return _react2.default.createElement(_CalendarDay2.default, {
-          key: i,
-          day: i,
-          disabled: _this3.isDayDisabled(date),
-          onClick: _this3.handleDayClick,
-          selectedDate: _this3.props.selectedDate,
-          theme: _this3.props.theme,
-          viewDate: _this3.props.viewDate,
-          sundayFirstDayOfWeek: _this3.props.sundayFirstDayOfWeek
-        });
-      });
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      return _react2.default.createElement(
-        'div',
-        { 'data-react-toolbox': 'month', className: this.props.theme.month },
-        _react2.default.createElement(
-          'span',
-          { className: this.props.theme.title },
-          _time2.default.getFullMonth(this.props.viewDate, this.props.locale),
-          ' ',
-          this.props.viewDate.getFullYear()
-        ),
-        _react2.default.createElement(
-          'div',
-          { className: this.props.theme.week },
-          this.renderWeeks()
-        ),
-        _react2.default.createElement(
-          'div',
-          { className: this.props.theme.days },
-          this.renderDays()
-        )
-      );
-    }
-  }]);
-
-  return Month;
-}(_react.Component);
-
-Month.propTypes = {
-  disabledDates: _react2.default.PropTypes.array,
-  enabledDates: _react2.default.PropTypes.array,
-  locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
-  maxDate: _react.PropTypes.object,
-  minDate: _react.PropTypes.object,
-  onDayClick: _react.PropTypes.func,
-  selectedDate: _react.PropTypes.object,
-  sundayFirstDayOfWeek: _react2.default.PropTypes.bool,
-  theme: _react.PropTypes.shape({
-    days: _react.PropTypes.string,
-    month: _react.PropTypes.string,
-    title: _react.PropTypes.string,
-    week: _react.PropTypes.string
-  }),
-  viewDate: _react.PropTypes.object
-};
-Month.defaultProps = {
-  disabledDates: [],
-  enabledDates: []
-};
-exports.default = Month;
\ No newline at end of file
diff --git a/lib/date_picker/DatePicker.js b/lib/date_picker/DatePicker.js
deleted file mode 100644
index b9d0a7f2e..000000000
--- a/lib/date_picker/DatePicker.js
+++ /dev/null
@@ -1,233 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DatePicker = exports.datePickerFactory = exports.DatePickerDialog = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _events = require('../utils/events.js');
-
-var _events2 = _interopRequireDefault(_events);
-
-var _time = require('../utils/time.js');
-
-var _time2 = _interopRequireDefault(_time);
-
-var _IconButton = require('../button/IconButton.js');
-
-var _IconButton2 = _interopRequireDefault(_IconButton);
-
-var _Input = require('../input/Input.js');
-
-var _Input2 = _interopRequireDefault(_Input);
-
-var _Dialog = require('../dialog/Dialog.js');
-
-var _Dialog2 = _interopRequireDefault(_Dialog);
-
-var _Calendar = require('./Calendar.js');
-
-var _Calendar2 = _interopRequireDefault(_Calendar);
-
-var _DatePickerDialog = require('./DatePickerDialog.js');
-
-var _DatePickerDialog2 = _interopRequireDefault(_DatePickerDialog);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(Input, DatePickerDialog) {
-  var DatePicker = function (_Component) {
-    _inherits(DatePicker, _Component);
-
-    function DatePicker() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, DatePicker);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = DatePicker.__proto__ || Object.getPrototypeOf(DatePicker)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-        active: _this.props.active
-      }, _this.handleDismiss = function () {
-        _this.setState({ active: false });
-        if (_this.props.onDismiss) {
-          _this.props.onDismiss();
-        }
-      }, _this.handleInputFocus = function (event) {
-        _events2.default.pauseEvent(event);
-        _this.setState({ active: true });
-      }, _this.handleInputBlur = function (event) {
-        _events2.default.pauseEvent(event);
-        _this.setState({ active: false });
-      }, _this.handleInputClick = function (event) {
-        _events2.default.pauseEvent(event);
-        _this.setState({ active: true });
-        if (_this.props.onClick) _this.props.onClick(event);
-      }, _this.handleInputKeyPress = function (event) {
-        if (event.charCode === 13) {
-          _events2.default.pauseEvent(event);
-          _this.setState({ active: true });
-        }
-        if (_this.props.onKeyPress) _this.props.onKeyPress(event);
-      }, _this.handleSelect = function (value, event) {
-        if (_this.props.onChange) _this.props.onChange(value, event);
-        _this.setState({ active: false });
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(DatePicker, [{
-      key: 'componentWillReceiveProps',
-      value: function componentWillReceiveProps(nextProps) {
-        if (nextProps.active !== this.props.active && this.state.active !== nextProps.active) {
-          this.setState({ active: nextProps.active });
-        }
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var _props = this.props,
-            active = _props.active,
-            onDismiss = _props.onDismiss,
-            autoOk = _props.autoOk,
-            cancelLabel = _props.cancelLabel,
-            enabledDates = _props.enabledDates,
-            disabledDates = _props.disabledDates,
-            inputClassName = _props.inputClassName,
-            inputFormat = _props.inputFormat,
-            locale = _props.locale,
-            maxDate = _props.maxDate,
-            minDate = _props.minDate,
-            okLabel = _props.okLabel,
-            onEscKeyDown = _props.onEscKeyDown,
-            onOverlayClick = _props.onOverlayClick,
-            readonly = _props.readonly,
-            sundayFirstDayOfWeek = _props.sundayFirstDayOfWeek,
-            value = _props.value,
-            others = _objectWithoutProperties(_props, ['active', 'onDismiss', 'autoOk', 'cancelLabel', 'enabledDates', 'disabledDates', 'inputClassName', 'inputFormat', 'locale', 'maxDate', 'minDate', 'okLabel', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'sundayFirstDayOfWeek', 'value']);
-
-        var finalInputFormat = inputFormat || _time2.default.formatDate;
-        var date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined;
-        var formattedDate = date === undefined ? '' : finalInputFormat(value, locale);
-
-        return _react2.default.createElement(
-          'div',
-          { 'data-react-toolbox': 'date-picker' },
-          _react2.default.createElement(Input, _extends({}, others, {
-            className: (0, _classnames3.default)(this.props.theme.input, _defineProperty({}, inputClassName, inputClassName)),
-            disabled: readonly,
-            error: this.props.error,
-            icon: this.props.icon,
-            label: this.props.label,
-            name: this.props.name,
-            onFocus: this.handleInputFocus,
-            onKeyPress: this.handleInputKeyPress,
-            onClick: this.handleInputClick,
-            readOnly: true,
-            type: 'text',
-            value: formattedDate
-          })),
-          _react2.default.createElement(DatePickerDialog, {
-            active: this.state.active,
-            autoOk: autoOk,
-            cancelLabel: cancelLabel,
-            className: this.props.className,
-            disabledDates: disabledDates,
-            enabledDates: enabledDates,
-            locale: locale,
-            maxDate: maxDate,
-            minDate: minDate,
-            name: this.props.name,
-            onDismiss: this.handleDismiss,
-            okLabel: okLabel,
-            onEscKeyDown: onEscKeyDown || this.handleDismiss,
-            onOverlayClick: onOverlayClick || this.handleDismiss,
-            onSelect: this.handleSelect,
-            sundayFirstDayOfWeek: sundayFirstDayOfWeek,
-            theme: this.props.theme,
-            value: date
-          })
-        );
-      }
-    }]);
-
-    return DatePicker;
-  }(_react.Component);
-
-  DatePicker.propTypes = {
-    active: _react.PropTypes.bool,
-    autoOk: _react.PropTypes.bool,
-    cancelLabel: _react.PropTypes.string,
-    className: _react.PropTypes.string,
-    disabledDates: _react2.default.PropTypes.array,
-    enabledDates: _react2.default.PropTypes.array,
-    error: _react.PropTypes.string,
-    icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-    inputClassName: _react.PropTypes.string,
-    inputFormat: _react.PropTypes.func,
-    label: _react.PropTypes.string,
-    locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
-    maxDate: _react.PropTypes.object,
-    minDate: _react.PropTypes.object,
-    name: _react.PropTypes.string,
-    okLabel: _react.PropTypes.string,
-    onChange: _react.PropTypes.func,
-    onClick: _react.PropTypes.func,
-    onDismiss: _react.PropTypes.func,
-    onEscKeyDown: _react.PropTypes.func,
-    onKeyPress: _react.PropTypes.func,
-    onOverlayClick: _react.PropTypes.func,
-    readonly: _react.PropTypes.bool,
-    sundayFirstDayOfWeek: _react2.default.PropTypes.bool,
-    theme: _react.PropTypes.shape({
-      input: _react.PropTypes.string
-    }),
-    value: _react.PropTypes.oneOfType([_react.PropTypes.instanceOf(Date), _react.PropTypes.string])
-  };
-  DatePicker.defaultProps = {
-    active: false,
-    locale: 'en',
-    sundayFirstDayOfWeek: false
-  };
-
-
-  return DatePicker;
-};
-
-var Calendar = (0, _Calendar2.default)(_IconButton2.default);
-var DatePickerDialog = (0, _DatePickerDialog2.default)(_Dialog2.default, Calendar);
-var DatePicker = factory(_Input2.default, DatePickerDialog);
-
-exports.default = (0, _reactCssThemr.themr)(_identifiers.DATE_PICKER)(DatePicker);
-exports.DatePickerDialog = DatePickerDialog;
-exports.datePickerFactory = factory;
-exports.DatePicker = DatePicker;
\ No newline at end of file
diff --git a/lib/date_picker/DatePickerDialog.js b/lib/date_picker/DatePickerDialog.js
deleted file mode 100644
index e214a9a96..000000000
--- a/lib/date_picker/DatePickerDialog.js
+++ /dev/null
@@ -1,186 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _time = require('../utils/time.js');
-
-var _time2 = _interopRequireDefault(_time);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(Dialog, Calendar) {
-  var CalendarDialog = function (_Component) {
-    _inherits(CalendarDialog, _Component);
-
-    function CalendarDialog() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, CalendarDialog);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = CalendarDialog.__proto__ || Object.getPrototypeOf(CalendarDialog)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-        display: 'months',
-        date: _this.props.value
-      }, _this.handleNewDate = function (value, dayClick) {
-        var state = { display: 'months', date: value };
-        if (_time2.default.dateOutOfRange(value, _this.props.minDate, _this.props.maxDate)) {
-          if (_this.props.maxDate && _this.props.minDate) {
-            state.date = _time2.default.closestDate(value, _this.props.maxDate, _this.props.minDate);
-          } else {
-            state.date = _this.props.maxDate || _this.props.minDate;
-          }
-        }
-        _this.setState(state);
-        if (dayClick && _this.props.autoOk && _this.props.onSelect) {
-          _this.props.onSelect(value);
-        }
-      }, _this.handleSelect = function (event) {
-        if (_this.props.onSelect) _this.props.onSelect(_this.state.date, event);
-      }, _this.handleSwitchDisplay = function (event) {
-        _this.setState({ display: event.target.id });
-      }, _this.updateStateDate = function (date) {
-        if (Object.prototype.toString.call(date) === '[object Date]') {
-          _this.handleNewDate(date, false);
-        }
-      }, _this.actions = [{ label: _this.props.cancelLabel, className: _this.props.theme.button, onClick: _this.props.onDismiss }, { label: _this.props.okLabel, className: _this.props.theme.button, name: _this.props.name, onClick: _this.handleSelect }], _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(CalendarDialog, [{
-      key: 'componentWillMount',
-      value: function componentWillMount() {
-        this.updateStateDate(this.props.value);
-      }
-    }, {
-      key: 'componentWillReceiveProps',
-      value: function componentWillReceiveProps(nextProps) {
-        this.updateStateDate(nextProps.value);
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var theme = this.props.theme;
-
-        var display = this.state.display + 'Display';
-        var className = (0, _classnames2.default)(theme.dialog, this.props.className);
-        var headerClassName = (0, _classnames2.default)(theme.header, theme[display]);
-        var shortDayOfWeek = _time2.default.getShortDayOfWeek(this.state.date.getDay(), this.props.locale);
-        var shortMonth = _time2.default.getShortMonth(this.state.date, this.props.locale);
-        var date = this.state.date.getDate();
-
-        return _react2.default.createElement(
-          Dialog,
-          {
-            actions: this.actions,
-            active: this.props.active,
-            className: className,
-            onEscKeyDown: this.props.onEscKeyDown,
-            onOverlayClick: this.props.onOverlayClick,
-            type: 'custom'
-          },
-          _react2.default.createElement(
-            'header',
-            { className: headerClassName },
-            _react2.default.createElement(
-              'span',
-              { id: 'years', className: theme.year, onClick: this.handleSwitchDisplay },
-              this.state.date.getFullYear()
-            ),
-            _react2.default.createElement(
-              'h3',
-              { id: 'months', className: theme.date, onClick: this.handleSwitchDisplay },
-              shortDayOfWeek,
-              ', ',
-              shortMonth,
-              ' ',
-              date
-            )
-          ),
-          _react2.default.createElement(
-            'div',
-            { className: theme.calendarWrapper },
-            _react2.default.createElement(Calendar, {
-              disabledDates: this.props.disabledDates,
-              display: this.state.display,
-              enabledDates: this.props.enabledDates,
-              handleSelect: this.handleSelect,
-              maxDate: this.props.maxDate,
-              minDate: this.props.minDate,
-              onChange: this.handleNewDate,
-              selectedDate: this.state.date,
-              theme: this.props.theme,
-              locale: this.props.locale,
-              sundayFirstDayOfWeek: this.props.sundayFirstDayOfWeek
-            })
-          )
-        );
-      }
-    }]);
-
-    return CalendarDialog;
-  }(_react.Component);
-
-  CalendarDialog.propTypes = {
-    active: _react.PropTypes.bool,
-    autoOk: _react.PropTypes.bool,
-    cancelLabel: _react.PropTypes.string,
-    className: _react.PropTypes.string,
-    disabledDates: _react.PropTypes.array,
-    enabledDates: _react.PropTypes.array,
-    locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
-    maxDate: _react.PropTypes.object,
-    minDate: _react.PropTypes.object,
-    name: _react.PropTypes.string,
-    okLabel: _react.PropTypes.string,
-    onDismiss: _react.PropTypes.func,
-    onEscKeyDown: _react.PropTypes.func,
-    onOverlayClick: _react.PropTypes.func,
-    onSelect: _react.PropTypes.func,
-    sundayFirstDayOfWeek: _react2.default.PropTypes.bool,
-    theme: _react.PropTypes.shape({
-      button: _react.PropTypes.string,
-      calendarWrapper: _react.PropTypes.string,
-      date: _react.PropTypes.string,
-      dialog: _react.PropTypes.string,
-      header: _react.PropTypes.string,
-      monthsDisplay: _react.PropTypes.string,
-      year: _react.PropTypes.string,
-      yearsDisplay: _react.PropTypes.string
-    }),
-    value: _react.PropTypes.object
-  };
-  CalendarDialog.defaultProps = {
-    active: false,
-    cancelLabel: 'Cancel',
-    className: '',
-    okLabel: 'Ok',
-    value: new Date()
-  };
-
-
-  return CalendarDialog;
-};
-
-exports.default = factory;
\ No newline at end of file
diff --git a/lib/date_picker/__test__/index.spec.js b/lib/date_picker/__test__/index.spec.js
deleted file mode 100644
index 169eba080..000000000
--- a/lib/date_picker/__test__/index.spec.js
+++ /dev/null
@@ -1,96 +0,0 @@
-'use strict';
-
-var _expect = require('expect');
-
-var _expect2 = _interopRequireDefault(_expect);
-
-var _theme = require('../theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-var _DatePicker = require('../DatePicker');
-
-var _testing = require('../../utils/testing');
-
-var _testing2 = _interopRequireDefault(_testing);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-describe('DatePickerDialog', function () {
-  describe('#on mount', function () {
-    it('passes value through to calendar if no maxDate/minDate specified', function () {
-      var value = new Date(2016, 1, 1);
-      var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, { theme: _theme2.default, value: value });
-      (0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(value);
-    });
-
-    describe('when minDate but not maxDate specified', function () {
-      var minDate = new Date(2016, 1, 2);
-
-      it('passes through a value after minDate', function () {
-        var value = new Date(2016, 1, 3);
-        var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, { theme: _theme2.default, value: value, minDate: minDate });
-        (0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(value);
-      });
-
-      it('sanitises a value before minDate to minDate', function () {
-        var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, {
-          theme: _theme2.default, value: new Date(2016, 1, 1), minDate: minDate
-        });
-        (0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(minDate);
-      });
-    });
-
-    describe('when maxDate but not minDate specified', function () {
-      var maxDate = new Date(2016, 1, 2);
-
-      it('passes through a value before maxDate', function () {
-        var value = new Date(2016, 1, 1);
-        var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, { theme: _theme2.default, value: value, maxDate: maxDate });
-        (0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(value);
-      });
-
-      it('sanitises a value after maxDate to maxDate', function () {
-        var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, {
-          theme: _theme2.default, value: new Date(2016, 1, 3), maxDate: maxDate
-        });
-        (0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(maxDate);
-      });
-    });
-
-    describe('if both minDate and maxDate are set', function () {
-      var minDate = new Date(2016, 1, 2);
-      var maxDate = new Date(2016, 1, 4);
-
-      it('sanitises value to minDate if value is before minDate', function () {
-        var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, {
-          theme: _theme2.default,
-          value: new Date(2016, 1, 1),
-          minDate: minDate,
-          maxDate: maxDate
-        });
-        (0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(minDate);
-      });
-
-      it('sanitises value to maxDate if value is after maxDate', function () {
-        var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, {
-          theme: _theme2.default,
-          value: new Date(2016, 1, 5),
-          minDate: minDate,
-          maxDate: maxDate
-        });
-        (0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(maxDate);
-      });
-
-      it('doesn\'t sanitise when value is between maxDate/minDate', function () {
-        var value = new Date(2016, 1, 3);
-        var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, { theme: _theme2.default, value: value, minDate: minDate, maxDate: maxDate });
-        (0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(value);
-      });
-    });
-
-    function getDatePassedToCalendar(wrapper) {
-      return wrapper.props.children[1].props.children.props.selectedDate;
-    }
-  });
-});
\ No newline at end of file
diff --git a/lib/date_picker/_config.scss b/lib/date_picker/_config.scss
deleted file mode 100644
index 62acee078..000000000
--- a/lib/date_picker/_config.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-$datepicker-primary: $color-primary !default;
-$datepicker-primary-contrast: $color-primary-contrast !default;
-$datepicker-primary-dark: $color-primary-dark !default;
-$datepicker-primary-color: $datepicker-primary !default;
-$datepicker-primary-hover-color: rgba($datepicker-primary, .2) !default;
-$datepicker-primary-contrast-color: $datepicker-primary-contrast !default;
-$datepicker-primary-dark-color: $datepicker-primary-dark !default;
-$datepicker-dialog-width: 33 * $unit !default;
-$datepicker-inactive-opacity: .6 !default;
-$datepicker-weekday-line-height: 2 * $unit !default;
-$datepicker-weekday-font-size: $font-size-small !default;
-$datepicker-month-font-size: $font-size-big !default;
-$datepicker-day-font-size: 5 * $unit !default;
-$datepicker-day-line-height: 4 * $unit !default;
-$datepicker-year-font-size: $font-size-small !default;
-
-$calendar-primary: $color-primary !default;
-$calendar-primary-contrast: $color-primary-contrast !default;
-$calendar-primary-color: $calendar-primary !default;
-$calendar-primary-contrast-color: $calendar-primary-contrast !default;
-$calendar-primary-hover-color: rgba($calendar-primary, .21) !default;
-$calendar-arrows-color: $palette-grey-600 !default;
-$calendar-arrows-font-size: 2 * $unit !default;
-$calendar-year-font-size: 2.4 * $unit !default;
-$calendar-day-font-size: 1.3 * $unit !default;
-$calendar-day-disable-opacity: 0.25 !default;
-$calendar-row-height: 3 * $unit !default;
-$calendar-day-padding-topbottom: .2 * $unit !default;
-$calendar-day-padding-leftright: 0 !default;
-$calendar-title-height: 3.6 * $unit !default;
-$calendar-total-height: $calendar-row-height * 7 + $calendar-title-height + $calendar-day-padding-topbottom * 12 !default;
diff --git a/lib/date_picker/index.d.ts b/lib/date_picker/index.d.ts
deleted file mode 100644
index 6a8ffe91e..000000000
--- a/lib/date_picker/index.d.ts
+++ /dev/null
@@ -1,153 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface DatePickerTheme {
-  /**
-   * Used for the active day and year.
-   */
-  active?: string;
-  /**
-   * Used for the buttons in the dialog.
-   */
-  button?: string;
-  /**
-   * Used for the calendar root element.
-   */
-  calendar?: string;
-  /**
-   * Used as wrapper for the calendar component inside dialog.
-   */
-  calendarWrapper?: string;
-  /**
-   * Used for the date element inside header.
-   */
-  date?: string;
-  /**
-   * Used for the day element inside the calendar.
-   */
-  day?: string;
-  /**
-   * Used for the list of days inside a month.
-   */
-  days?: string;
-  /**
-   * Used for the dialog component.
-   */
-  dialog?: string;
-  /**
-   * Added to day element when day is disabled.
-   */
-  disabled?: string;
-  /**
-   * Used for the dialog header,.
-   */
-  header?: string;
-  /**
-   * Used for Input element that opens the picker.
-   */
-  input?: string;
-  /**
-   * Used for the month root element.
-   */
-  month?: string;
-  /**
-   * Added to the root dialog when months are displayed.
-   */
-  monthsDisplay?: string;
-  /**
-   * Used for the next month icon.
-   */
-  next?: string;
-  /**
-   * Used for the prev month icon.
-   */
-  prev?: string;
-  /**
-   * Used for the month title element.
-   */
-  title?: string;
-  /**
-   * Used for the weekdays wrapper.
-   */
-  week?: string;
-  /**
-   * Used for the year element inside header.
-   */
-  year?: string;
-  /**
-   * Used for the years list in years view.
-   */
-  years?: string;
-  /**
-   * Added to the root dialog when years are displayed.
-   */
-  yearsDisplay?: string;
-}
-
-interface DatePickerProps extends ReactToolbox.Props {
-  /**
-   * Automatically selects a date upon clicking on a day
-   * @default false
-   */
-  autoOk?: boolean;
-  /**
-   * Give an error node to display under the field.
-   */
-  error?: string;
-  /**
-   * A key to identify an Icon from Material Design Icons or a custom Icon Element.
-   */
-  icon?: React.ReactNode | string;
-  /**
-   * This class will be applied to Input component of DatePicker.
-   */
-  inputClassName?: string;
-  /**
-   * Function to format the date displayed on the input.
-   */
-  inputFormat?: Function;
-  /**
-   * The text string to use for the floating label element in the input component.
-   */
-  label?: string;
-  /**
-   * Date object with the maximum selectable date.
-   */
-  maxDate?: Date;
-  /**
-   * Date object with the minimum selectable date.
-   */
-  minDate?: Date;
-  /**
-   * Name for the input field.
-   */
-  name?: string;
-  /**
-   * Callback called when the picker value is changed.
-   */
-  onChange?: Function;
-  /**
-   * Callback called when the ESC key is pressed with the overlay active.
-   */
-  onEscKeyDown?: Function;
-  /**
-   * Callback to be invoked when the dialog overlay is clicked.
-   */
-  onOverlayClick?: Function;
-  /**
-   * The input element will be readonly and look like disabled.
-   */
-  readonly?: boolean;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: DatePickerTheme;
-  /**
-   * Date object with the currently selected date.
-   */
-  value?: Date | string;
-}
-
-export class DatePicker extends React.Component<DatePickerProps, {}> { }
-
-export default DatePicker;
diff --git a/lib/date_picker/index.js b/lib/date_picker/index.js
deleted file mode 100644
index 887fdaf75..000000000
--- a/lib/date_picker/index.js
+++ /dev/null
@@ -1,48 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DatePickerDialog = exports.DatePicker = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _DatePicker = require('./DatePicker.js');
-
-var _DatePickerDialog = require('./DatePickerDialog.js');
-
-var _DatePickerDialog2 = _interopRequireDefault(_DatePickerDialog);
-
-var _Calendar = require('./Calendar.js');
-
-var _Calendar2 = _interopRequireDefault(_Calendar);
-
-var _button = require('../button');
-
-var _input = require('../input');
-
-var _input2 = _interopRequireDefault(_input);
-
-var _dialog = require('../dialog');
-
-var _dialog2 = _interopRequireDefault(_dialog);
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var Calendar = (0, _Calendar2.default)(_button.IconButton);
-var DatePickerDialog = (0, _DatePickerDialog2.default)(_dialog2.default, Calendar);
-var DatePicker = (0, _DatePicker.datePickerFactory)(_input2.default, DatePickerDialog);
-
-var ThemedDatePicker = (0, _reactCssThemr.themr)(_identifiers.DATE_PICKER, _theme2.default)(DatePicker);
-exports.default = ThemedDatePicker;
-exports.DatePicker = ThemedDatePicker;
-
-
-var ThemedDatePickerDialog = (0, _reactCssThemr.themr)(_identifiers.DIALOG, _theme2.default)(DatePickerDialog);
-exports.DatePickerDialog = ThemedDatePickerDialog;
\ No newline at end of file
diff --git a/lib/date_picker/theme.scss b/lib/date_picker/theme.scss
deleted file mode 100644
index a1ee39156..000000000
--- a/lib/date_picker/theme.scss
+++ /dev/null
@@ -1,156 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.input:not(.disabled) > .inputElement {
-  cursor: pointer;
-}
-
-.header {
-  padding: 1.6 * $unit 2 * $unit;
-  color: $datepicker-primary-contrast-color;
-  cursor: pointer;
-  background-color: $datepicker-primary-color;
-}
-
-.year {
-  display: inline-block;
-  font-size: $datepicker-year-font-size;
-  transition: opacity, font-size $animation-duration $animation-curve-default;
-}
-
-.date {
-  display: block;
-  font-weight: $font-weight-semi-bold;
-  text-transform: capitalize;
-  transition: opacity $animation-duration $animation-curve-default;
-}
-
-.calendarWrapper {
-  padding: $unit .5 * $unit 0;
-}
-
-.yearsDisplay {
-  .date {
-    opacity: $datepicker-inactive-opacity;
-  }
-  .year {
-    font-size: $font-size-normal;
-  }
-}
-
-.monthsDisplay {
-  .year {
-    opacity: $datepicker-inactive-opacity;
-  }
-}
-
-.dialog {
-  width: $datepicker-dialog-width;
-  > [role="body"] {
-    padding: 0;
-  }
-  > [role="navigation"] > .button {
-    color: $datepicker-primary-color;
-    &:hover {
-      background: $datepicker-primary-hover-color;
-    }
-    &:focus:not(:active) {
-      background: $datepicker-primary-hover-color;
-    }
-  }
-}
-
-.calendar {
-  position: relative;
-  height: $calendar-total-height;
-  overflow: hidden;
-  font-size: $font-size-small;
-  line-height: $calendar-row-height;
-  text-align: center;
-  background: $calendar-primary-contrast-color;
-  .prev, .next {
-    position: absolute;
-    top: 0;
-    z-index: $z-index-high;
-    height: 3.6 * $unit;
-    cursor: pointer;
-    opacity: .7;
-  }
-  .prev {
-    left: 0;
-  }
-  .next {
-    right: 0;
-  }
-}
-
-.title {
-  display: inline-block;
-  font-weight: 500;
-  line-height: $calendar-row-height;
-}
-
-.years {
-  height: 100%;
-  overflow-y: auto;
-  font-size: $font-size-big;
-  > li {
-    line-height: 2.4;
-    cursor: pointer;
-    &.active {
-      font-size: $calendar-year-font-size;
-      font-weight: $font-weight-semi-bold;
-      color: $calendar-primary-color;
-    }
-  }
-}
-
-.week {
-  display: flex;
-  height: $calendar-row-height;
-  flex-wrap: wrap;
-  font-size: $calendar-day-font-size;
-  line-height: $calendar-row-height;
-  opacity: .5;
-  > span {
-    flex: 0 0 (100% / 7);
-  }
-}
-
-.days {
-  display: flex;
-  flex-wrap: wrap;
-  font-size: $calendar-day-font-size;
-}
-
-.day {
-  flex: 0 0 (100% / 7);
-  padding: $calendar-day-padding-topbottom $calendar-day-padding-leftright;
-  > span {
-    display: inline-block;
-    width: $calendar-row-height;
-    height: $calendar-row-height;
-    line-height: $calendar-row-height;
-    border-radius: 50%;
-  }
-  &:hover:not(.active):not(.disabled) > span {
-    color: $calendar-primary-contrast-color;
-    background: $calendar-primary-hover-color;
-  }
-  &.active > span {
-    color: $calendar-primary-contrast-color;
-    background: $calendar-primary-color;
-  }
-  &:hover:not(.disabled) > span {
-    cursor: pointer;
-  }
-  &.disabled {
-    opacity: $calendar-day-disable-opacity;
-  }
-}
-
-.month {
-  background-color: $calendar-primary-contrast-color;
-}
diff --git a/lib/dialog/Dialog.js b/lib/dialog/Dialog.js
deleted file mode 100644
index 05e044d50..000000000
--- a/lib/dialog/Dialog.js
+++ /dev/null
@@ -1,113 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.dialogFactory = exports.Dialog = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _classnames3 = require('classnames');
-
-var _classnames4 = _interopRequireDefault(_classnames3);
-
-var _identifiers = require('../identifiers.js');
-
-var _ActivableRenderer = require('../hoc/ActivableRenderer.js');
-
-var _ActivableRenderer2 = _interopRequireDefault(_ActivableRenderer);
-
-var _Button = require('../button/Button.js');
-
-var _Button2 = _interopRequireDefault(_Button);
-
-var _Overlay = require('../overlay/Overlay.js');
-
-var _Overlay2 = _interopRequireDefault(_Overlay);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var factory = function factory(Overlay, Button) {
-  var Dialog = function Dialog(props) {
-    var actions = props.actions.map(function (action, idx) {
-      var className = (0, _classnames4.default)(props.theme.button, _defineProperty({}, action.className, action.className));
-      return _react2.default.createElement(Button, _extends({ key: idx }, action, { className: className }));
-    });
-
-    var className = (0, _classnames4.default)([props.theme.dialog, props.theme[props.type]], _defineProperty({}, props.theme.active, props.active), props.className);
-
-    return _react2.default.createElement(
-      Overlay,
-      {
-        active: props.active,
-        onClick: props.onOverlayClick,
-        onEscKeyDown: props.onEscKeyDown,
-        onMouseDown: props.onOverlayMouseDown,
-        onMouseMove: props.onOverlayMouseMove,
-        onMouseUp: props.onOverlayMouseUp
-      },
-      _react2.default.createElement(
-        'div',
-        { 'data-react-toolbox': 'dialog', className: className },
-        _react2.default.createElement(
-          'section',
-          { role: 'body', className: props.theme.body },
-          props.title ? _react2.default.createElement(
-            'h6',
-            { className: props.theme.title },
-            props.title
-          ) : null,
-          props.children
-        ),
-        actions.length ? _react2.default.createElement(
-          'nav',
-          { role: 'navigation', className: props.theme.navigation },
-          actions
-        ) : null
-      )
-    );
-  };
-
-  Dialog.propTypes = {
-    actions: _react.PropTypes.array,
-    active: _react.PropTypes.bool,
-    children: _react.PropTypes.node,
-    className: _react.PropTypes.string,
-    onEscKeyDown: _react.PropTypes.func,
-    onOverlayClick: _react.PropTypes.func,
-    onOverlayMouseDown: _react.PropTypes.func,
-    onOverlayMouseMove: _react.PropTypes.func,
-    onOverlayMouseUp: _react.PropTypes.func,
-    theme: _react.PropTypes.shape({
-      active: _react.PropTypes.string,
-      body: _react.PropTypes.string,
-      button: _react.PropTypes.string,
-      dialog: _react.PropTypes.string,
-      navigation: _react.PropTypes.string,
-      title: _react.PropTypes.string
-    }),
-    title: _react.PropTypes.string,
-    type: _react.PropTypes.string
-  };
-
-  Dialog.defaultProps = {
-    actions: [],
-    active: false,
-    type: 'normal'
-  };
-
-  return (0, _ActivableRenderer2.default)()(Dialog);
-};
-
-var Dialog = factory(_Overlay2.default, _Button2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.DIALOG)(Dialog);
-exports.Dialog = Dialog;
-exports.dialogFactory = factory;
\ No newline at end of file
diff --git a/lib/dialog/_config.scss b/lib/dialog/_config.scss
deleted file mode 100644
index c522075c9..000000000
--- a/lib/dialog/_config.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-$dialog-border-radius: .2 * $unit !default;
-$dialog-color-title: $color-black !default;
-$dialog-color-white: $color-white !default;
-$dialog-content-padding: 2.4 * $unit !default;
-$dialog-navigation-padding: .8 * $unit !default;
-$dialog-translate-y: 4 * $unit !default;
diff --git a/lib/dialog/index.d.ts b/lib/dialog/index.d.ts
deleted file mode 100644
index eb95ee3ae..000000000
--- a/lib/dialog/index.d.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface DialogTheme {
-  /**
-   * Used for the root when the dialog is active.
-   */
-  active?: string;
-  /**
-   * Used to wrap the dialog body.
-   */
-  body?: string;
-  /**
-   * Used in buttons when the dialog implements actions.
-   */
-  button?: string;
-  /**
-   * Used for the root element.
-   */
-  dialog?: string;
-  /**
-   * Used for the navigation element when it implements actions.
-   */
-  navigation?: string;
-  /**
-   * Used for the title element of the dialog.
-   */
-  title?: string;
-}
-
-interface DialogActionProps {
-  /**
-   * The text string to use for the name of the button.
-   */
-  label?: string;
-  /**
-   * Callback called when the component is clicked.
-   */
-  onClick?: Function;
-}
-
-interface DialogProps extends ReactToolbox.Props {
-  /**
-   * A array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons.
-   */
-  actions?: DialogActionProps[];
-  /**
-   * If true, the dialog will be active.
-   * @default false
-   */
-  active?: boolean;
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * Callback called when the ESC key is pressed with the overlay active.
-   */
-  onEscKeyDown?: Function;
-  /**
-   * Callback to be invoked when the dialog overlay is clicked.
-   */
-  onOverlayClick?: Function;
-  /**
-   * Callback called when the mouse button is pressed on the overlay.
-   */
-  onOverlayMouseDown?: Function;
-  /**
-   * Callback called when the mouse is moving over the overlay.
-   */
-  onOverlayMouseMove?: Function;
-  /**
-   * Callback called when the mouse button is released over the overlay.
-   */
-  onOverlayMouseUp?: Function;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: DialogTheme;
-  /**
-   * The text string to use as standar title of the dialog.
-   */
-  title?: string;
-  /**
-   * Used to determine the size of the dialog. It can be small, normal or large.
-   * @default normal
-   */
-  type?: string;
-}
-
-export class Dialog extends React.Component<DialogProps, {}> { }
-
-export default Dialog;
diff --git a/lib/dialog/index.js b/lib/dialog/index.js
deleted file mode 100644
index 5a81c7e2c..000000000
--- a/lib/dialog/index.js
+++ /dev/null
@@ -1,32 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Dialog = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Dialog = require('./Dialog.js');
-
-var _overlay = require('../overlay');
-
-var _overlay2 = _interopRequireDefault(_overlay);
-
-var _button = require('../button');
-
-var _button2 = _interopRequireDefault(_button);
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var Dialog = (0, _Dialog.dialogFactory)(_overlay2.default, _button2.default);
-var ThemedDialog = (0, _reactCssThemr.themr)(_identifiers.DIALOG, _theme2.default)(Dialog);
-
-exports.default = ThemedDialog;
-exports.Dialog = ThemedDialog;
\ No newline at end of file
diff --git a/lib/dialog/theme.scss b/lib/dialog/theme.scss
deleted file mode 100644
index 8757bdf0b..000000000
--- a/lib/dialog/theme.scss
+++ /dev/null
@@ -1,86 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.dialog {
-  display: flex;
-  max-width: 96vw;
-  max-height: 96vh;
-  flex-direction: column;
-  background-color: $dialog-color-white;
-  border-radius: $dialog-border-radius;
-  box-shadow: $zdepth-shadow-5;
-  opacity: 0;
-  transition-delay: $animation-delay;
-  transition-timing-function: $animation-curve-default;
-  transition-duration: $animation-duration;
-  transition-property: opacity, transform;
-  transform: translateY(-$dialog-translate-y);
-  &.active {
-    opacity: 1;
-    transform: translateY(0%);
-  }
-}
-
-.small {
-  width: 30vw;
-
-  @media screen and (max-width: $layout-breakpoint-sm-tablet) {
-    width: 50vw;
-  }
-
-  @media screen and (max-width: $layout-breakpoint-xs) {
-    width: 75vw;
-  }
-}
-
-.normal {
-  width: 50vw;
-
-  @media screen and (max-width: $layout-breakpoint-xs) {
-    width: 96vw;
-  }
-}
-
-.large {
-  width: 96vw;
-}
-
-.fullscreen {
-  width: 96vw;
-
-  @media screen and (max-width: $layout-breakpoint-xs) {
-    width: 100vw;
-    max-width: 100vw;
-    min-height: 100vh;
-    max-height: 100vh;
-    border-radius: 0;
-  }
-}
-
-.title {
-  @include typo-title();
-  flex-grow: 0;
-  margin-bottom: 1.6 * $unit;
-  color: $dialog-color-title;
-}
-
-.body {
-  flex-grow: 2;
-  padding: $dialog-content-padding;
-  color: $color-text-secondary;
-}
-
-.navigation {
-  flex-grow: 0;
-  padding: $dialog-navigation-padding;
-  text-align: right;
-}
-
-.button {
-  min-width: 0;
-  padding-right: $dialog-navigation-padding;
-  padding-left: $dialog-navigation-padding;
-  margin-left: $dialog-navigation-padding;
-}
diff --git a/lib/drawer/Drawer.js b/lib/drawer/Drawer.js
deleted file mode 100644
index 608253e8e..000000000
--- a/lib/drawer/Drawer.js
+++ /dev/null
@@ -1,85 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Drawer = exports.drawerFactory = undefined;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _identifiers = require('../identifiers.js');
-
-var _ActivableRenderer = require('../hoc/ActivableRenderer.js');
-
-var _ActivableRenderer2 = _interopRequireDefault(_ActivableRenderer);
-
-var _Overlay = require('../overlay/Overlay.js');
-
-var _Overlay2 = _interopRequireDefault(_Overlay);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var factory = function factory(Overlay) {
-  var Drawer = function Drawer(_ref) {
-    var active = _ref.active,
-        children = _ref.children,
-        className = _ref.className,
-        onOverlayClick = _ref.onOverlayClick,
-        theme = _ref.theme,
-        type = _ref.type;
-
-    var _className = (0, _classnames3.default)([theme.drawer, theme[type]], _defineProperty({}, theme.active, active), className);
-
-    return _react2.default.createElement(
-      Overlay,
-      { active: active, onClick: onOverlayClick },
-      _react2.default.createElement(
-        'div',
-        { 'data-react-toolbox': 'drawer', className: _className },
-        _react2.default.createElement(
-          'aside',
-          { className: theme.content },
-          children
-        )
-      )
-    );
-  };
-
-  Drawer.propTypes = {
-    active: _react.PropTypes.bool,
-    children: _react.PropTypes.node,
-    className: _react.PropTypes.string,
-    onOverlayClick: _react.PropTypes.func,
-    theme: _react.PropTypes.shape({
-      active: _react.PropTypes.string,
-      content: _react.PropTypes.string,
-      drawer: _react.PropTypes.string,
-      left: _react.PropTypes.string,
-      right: _react.PropTypes.string
-    }),
-    type: _react.PropTypes.oneOf(['left', 'right'])
-  };
-
-  Drawer.defaultProps = {
-    active: false,
-    className: '',
-    type: 'left'
-  };
-
-  return (0, _ActivableRenderer2.default)()(Drawer);
-};
-
-var Drawer = factory(_Overlay2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.DRAWER)(Drawer);
-exports.drawerFactory = factory;
-exports.Drawer = Drawer;
\ No newline at end of file
diff --git a/lib/drawer/_config.scss b/lib/drawer/_config.scss
deleted file mode 100644
index 2401bc696..000000000
--- a/lib/drawer/_config.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-$drawer-background-color: $palette-grey-50 !default;
-$drawer-border-color: $palette-grey-300 !default;
-$drawer-text-color: $palette-grey-800 !default;
-$drawer-width: 24 * $unit !default;
diff --git a/lib/drawer/index.d.ts b/lib/drawer/index.d.ts
deleted file mode 100644
index 2c0a84783..000000000
--- a/lib/drawer/index.d.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface DrawerTheme {
-  /**
-   * Used for the root class when the drawer is active.
-   */
-  active?: string;
-  /**
-   * Used for the drawer content.
-   */
-  content?: string;
-  /**
-   * Root class.
-   */
-  drawer?: string;
-  /**
-   * Added to the root class when drawer is to the left.
-   */
-  left?: string;
-  /**
-   * Added to the root class when drawer is to the right.
-   */
-  right?: string;
-}
-
-interface DrawerProps extends ReactToolbox.Props {
-  /**
-   * If true, the drawer will be visible.
-   * @default false
-   */
-  active?: boolean;
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * Callback function to be invoked when the overlay is clicked.
-   */
-  onOverlayClick?: Function;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: DrawerTheme;
-  /**
-   * Type of drawer. It can be left or right to display the drawer on the left or right side of the screen.
-   * @default left
-   */
-  type?: "left" | "right";
-}
-
-export class Drawer extends React.Component<DrawerProps, {}> { }
-
-export default Drawer;
diff --git a/lib/drawer/index.js b/lib/drawer/index.js
deleted file mode 100644
index 71d9a5ecc..000000000
--- a/lib/drawer/index.js
+++ /dev/null
@@ -1,26 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Drawer = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _overlay = require('../overlay');
-
-var _Drawer = require('./Drawer.js');
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var Drawer = (0, _Drawer.drawerFactory)(_overlay.Overlay);
-var ThemedDrawer = (0, _reactCssThemr.themr)(_identifiers.DRAWER, _theme2.default)(Drawer);
-
-exports.default = ThemedDrawer;
-exports.Drawer = ThemedDrawer;
\ No newline at end of file
diff --git a/lib/drawer/theme.scss b/lib/drawer/theme.scss
deleted file mode 100644
index a089640a3..000000000
--- a/lib/drawer/theme.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.drawer {
-  @include shadow-2dp();
-  position: absolute;
-  top: 0;
-  display: block;
-  width: $drawer-width;
-  height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-  color: $drawer-text-color;
-  pointer-events: none;
-  background-color: $drawer-background-color;
-  transition-delay: 0s;
-  transition-timing-function: $animation-curve-default;
-  transition-duration: $animation-duration;
-  transition-property: transform;
-  transform-style: preserve-3d;
-  will-change: transform;
-  &.active {
-    pointer-events: all;
-    transition-delay: $animation-delay;
-    transform: translateX(0);
-  }
-  &.right {
-    right: 0;
-    border-left: 1px solid $drawer-border-color;
-    &:not(.active) {
-      transform: translateX(100%);
-    }
-  }
-  &.left {
-    left: 0;
-    border-right: 1px solid $drawer-border-color;
-    &:not(.active) {
-      transform: translateX(- 100%);
-    }
-  }
-}
diff --git a/lib/dropdown/Dropdown.js b/lib/dropdown/Dropdown.js
deleted file mode 100644
index ba78dd99e..000000000
--- a/lib/dropdown/Dropdown.js
+++ /dev/null
@@ -1,304 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Dropdown = exports.dropdownFactory = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactDom = require('react-dom');
-
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
-var _classnames3 = require('classnames');
-
-var _classnames4 = _interopRequireDefault(_classnames3);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Input = require('../input/Input.js');
-
-var _Input2 = _interopRequireDefault(_Input);
-
-var _events = require('../utils/events.js');
-
-var _events2 = _interopRequireDefault(_events);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(Input) {
-  var Dropdown = function (_Component) {
-    _inherits(Dropdown, _Component);
-
-    function Dropdown() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, Dropdown);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Dropdown.__proto__ || Object.getPrototypeOf(Dropdown)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-        active: false,
-        up: false
-      }, _this.getDocumentEvents = function () {
-        return {
-          click: _this.handleDocumentClick,
-          touchend: _this.handleDocumentClick
-        };
-      }, _this.open = function (event) {
-        var client = event.target.getBoundingClientRect();
-        var screenHeight = window.innerHeight || document.documentElement.offsetHeight;
-        var up = _this.props.auto ? client.top > screenHeight / 2 + client.height : false;
-        if (_this.inputNode) _this.inputNode.blur();
-        _this.setState({ active: true, up: up });
-      }, _this.close = function () {
-        if (_this.state.active) {
-          _this.setState({ active: false });
-        }
-      }, _this.handleDocumentClick = function (event) {
-        if (_this.state.active && !_events2.default.targetIsDescendant(event, _reactDom2.default.findDOMNode(_this))) {
-          _this.setState({ active: false });
-        }
-      }, _this.handleClick = function (event) {
-        _this.open(event);
-        _events2.default.pauseEvent(event);
-        if (_this.props.onClick) _this.props.onClick(event);
-      }, _this.handleSelect = function (item, event) {
-        if (_this.props.onBlur) _this.props.onBlur(event);
-        if (!_this.props.disabled && _this.props.onChange) {
-          if (_this.props.name) {
-            event.target.name = _this.props.name;
-          }
-          _this.props.onChange(item, event);
-          _this.close();
-        }
-      }, _this.getSelectedItem = function () {
-        var _iteratorNormalCompletion = true;
-        var _didIteratorError = false;
-        var _iteratorError = undefined;
-
-        try {
-          for (var _iterator = _this.props.source[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-            var item = _step.value;
-
-            if (item.value === _this.props.value) return item;
-          }
-        } catch (err) {
-          _didIteratorError = true;
-          _iteratorError = err;
-        } finally {
-          try {
-            if (!_iteratorNormalCompletion && _iterator.return) {
-              _iterator.return();
-            }
-          } finally {
-            if (_didIteratorError) {
-              throw _iteratorError;
-            }
-          }
-        }
-
-        if (!_this.props.allowBlank) {
-          return _this.props.source[0];
-        }
-      }, _this.renderValue = function (item, idx) {
-        var theme = _this.props.theme;
-
-        var className = item.value === _this.props.value ? theme.selected : null;
-        return _react2.default.createElement(
-          'li',
-          { key: idx, className: className, onClick: _this.handleSelect.bind(_this, item.value) },
-          _this.props.template ? _this.props.template(item) : item.label
-        );
-      }, _this.handleFocus = function (event) {
-        event.stopPropagation();
-        if (!_this.props.disabled) _this.open(event);
-        if (_this.props.onFocus) _this.props.onFocus(event);
-      }, _this.handleBlur = function (event) {
-        event.stopPropagation();
-        if (_this.state.active) _this.close();
-        if (_this.props.onBlur) _this.props.onBlur(event);
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(Dropdown, [{
-      key: 'componentWillUpdate',
-      value: function componentWillUpdate(nextProps, nextState) {
-        if (!this.state.active && nextState.active) {
-          _events2.default.addEventsToDocument(this.getDocumentEvents());
-        }
-      }
-    }, {
-      key: 'componentDidUpdate',
-      value: function componentDidUpdate(prevProps, prevState) {
-        if (prevState.active && !this.state.active) {
-          _events2.default.removeEventsFromDocument(this.getDocumentEvents());
-        }
-      }
-    }, {
-      key: 'componentWillUnmount',
-      value: function componentWillUnmount() {
-        if (this.state.active) {
-          _events2.default.removeEventsFromDocument(this.getDocumentEvents());
-        }
-      }
-    }, {
-      key: 'renderTemplateValue',
-      value: function renderTemplateValue(selected) {
-        var _classnames;
-
-        var theme = this.props.theme;
-
-        var className = (0, _classnames4.default)(theme.field, (_classnames = {}, _defineProperty(_classnames, theme.errored, this.props.error), _defineProperty(_classnames, theme.disabled, this.props.disabled), _defineProperty(_classnames, theme.required, this.props.required), _classnames));
-
-        return _react2.default.createElement(
-          'div',
-          { className: className, onClick: this.handleClick },
-          _react2.default.createElement(
-            'div',
-            { className: theme.templateValue + ' ' + theme.value },
-            this.props.template(selected)
-          ),
-          this.props.label ? _react2.default.createElement(
-            'label',
-            { className: theme.label },
-            this.props.label,
-            this.props.required ? _react2.default.createElement(
-              'span',
-              { className: theme.required },
-              ' * '
-            ) : null
-          ) : null,
-          this.props.error ? _react2.default.createElement(
-            'span',
-            { className: theme.error },
-            this.props.error
-          ) : null
-        );
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var _classnames2,
-            _this2 = this;
-
-        var _props = this.props,
-            allowBlank = _props.allowBlank,
-            auto = _props.auto,
-            required = _props.required,
-            onChange = _props.onChange,
-            onFocus = _props.onFocus,
-            onBlur = _props.onBlur,
-            source = _props.source,
-            template = _props.template,
-            theme = _props.theme,
-            others = _objectWithoutProperties(_props, ['allowBlank', 'auto', 'required', 'onChange', 'onFocus', 'onBlur', 'source', 'template', 'theme']);
-
-        var selected = this.getSelectedItem();
-        var className = (0, _classnames4.default)(theme.dropdown, (_classnames2 = {}, _defineProperty(_classnames2, theme.up, this.state.up), _defineProperty(_classnames2, theme.active, this.state.active), _defineProperty(_classnames2, theme.disabled, this.props.disabled), _defineProperty(_classnames2, theme.required, this.props.required), _classnames2), this.props.className);
-
-        return _react2.default.createElement(
-          'div',
-          {
-            className: className,
-            'data-react-toolbox': 'dropdown',
-            onBlur: this.handleBlur,
-            onFocus: this.handleFocus,
-            tabIndex: '0'
-          },
-          _react2.default.createElement(Input, _extends({}, others, {
-            tabIndex: '-1',
-            className: theme.value,
-            onClick: this.handleClick,
-            required: this.props.required,
-            readOnly: true,
-            ref: function ref(node) {
-              _this2.inputNode = node && node.getWrappedInstance();
-            },
-            type: template && selected ? 'hidden' : null,
-            value: selected && selected.label ? selected.label : ''
-          })),
-          template && selected ? this.renderTemplateValue(selected) : null,
-          _react2.default.createElement(
-            'ul',
-            { className: theme.values, ref: 'values' },
-            source.map(this.renderValue)
-          )
-        );
-      }
-    }]);
-
-    return Dropdown;
-  }(_react.Component);
-
-  Dropdown.propTypes = {
-    allowBlank: _react.PropTypes.bool,
-    auto: _react.PropTypes.bool,
-    className: _react.PropTypes.string,
-    disabled: _react.PropTypes.bool,
-    error: _react.PropTypes.string,
-    label: _react.PropTypes.string,
-    name: _react.PropTypes.string,
-    onBlur: _react.PropTypes.func,
-    onChange: _react.PropTypes.func,
-    onClick: _react.PropTypes.func,
-    onFocus: _react.PropTypes.func,
-    required: _react.PropTypes.bool,
-    source: _react.PropTypes.array.isRequired,
-    template: _react.PropTypes.func,
-    theme: _react.PropTypes.shape({
-      active: _react.PropTypes.string,
-      disabled: _react.PropTypes.string,
-      dropdown: _react.PropTypes.string,
-      error: _react.PropTypes.string,
-      errored: _react.PropTypes.string,
-      field: _react.PropTypes.string,
-      label: _react.PropTypes.string,
-      required: _react.PropTypes.string,
-      selected: _react.PropTypes.string,
-      templateValue: _react.PropTypes.string,
-      up: _react.PropTypes.string,
-      value: _react.PropTypes.string,
-      values: _react.PropTypes.string
-    }),
-    value: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number])
-  };
-  Dropdown.defaultProps = {
-    auto: true,
-    className: '',
-    allowBlank: true,
-    disabled: false,
-    required: false
-  };
-
-
-  return Dropdown;
-};
-
-var Dropdown = factory(_Input2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.DROPDOWN)(Dropdown);
-exports.dropdownFactory = factory;
-exports.Dropdown = Dropdown;
\ No newline at end of file
diff --git a/lib/dropdown/_config.scss b/lib/dropdown/_config.scss
deleted file mode 100644
index 364815c0b..000000000
--- a/lib/dropdown/_config.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-$dropdown-color-white: $color-white !default;
-$dropdown-color-primary: $color-primary !default;
-$dropdown-color-primary-contrast: $color-primary-contrast !default;
-$dropdown-value-hover-background: $palette-grey-200 !default;
-$dropdown-overflow-max-height: 45vh !default;
-$dropdown-value-border-radius: .2 * $unit !default;
diff --git a/lib/dropdown/index.d.ts b/lib/dropdown/index.d.ts
deleted file mode 100644
index ebf3b10e3..000000000
--- a/lib/dropdown/index.d.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface DropdownTheme {
-  /**
-   * Added to the root element when the dropdown is active.
-   */
-  active?: string;
-  /**
-   * Added to the root element when it's disabled.
-   */
-  disabled?: string;
-  /**
-   * Root element class.
-   */
-  dropdown?: string;
-  /**
-   * Used for the error element.
-   */
-  error?: string;
-  /**
-   * Added to the inner wrapper if it's errored.
-   */
-  errored?: string;
-  /**
-   * Used for the inner wrapper of the component.
-   */
-  field?: string;
-  /**
-   * Used for the the label element.
-   */
-  label?: string;
-  /**
-   * Used to highlight the selected value.
-   */
-  selected?: string;
-  /**
-   * Used as a wrapper for the given template value.
-   */
-  templateValue?: string;
-  /**
-   * Added to the root element when it's opening up.
-   */
-  up?: string;
-  /**
-   * Used for each value in the dropdown component.
-   */
-  value?: string;
-  /**
-   * Used for the list of values.
-   */
-  values?: string;
-}
-
-interface DropdownProps extends ReactToolbox.Props {
-  /**
-   * If true the dropdown will preselect the first item if the supplied value matches none of the options' values.
-   * @default true
-   */
-  allowBlank?: boolean;
-  /**
-   * If true, the dropdown will open up or down depending on the position in the screen.
-   * @default true
-   */
-  auto?: boolean;
-  /**
-   * Set the component as disabled.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * Give an error string to display under the field.
-   */
-  error?: string;
-  /**
-   * The text string to use for the floating label element.
-   */
-  label?: string;
-  /**
-   * Name for the input field.
-   */
-  name?: string;
-  /**
-   * Callback function that is fired when the component is blurred.
-   */
-  onBlur?: Function;
-  /**
-   * Callback function that is fired when the component's value changes.
-   */
-  onChange?: Function;
-  /**
-   * Callback function that is fired when the component is focused.
-   */
-  onFocus?: Function;
-  /**
-   * Array of data objects with the data to represent in the dropdown.
-   */
-  source: any[];
-  /**
-   * Callback function that returns a JSX template to represent the element.
-   */
-  template?: Function;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: DropdownTheme;
-  /**
-   * Default value using JSON data.
-   */
-  value?: string | number;
-  /**
-   * If true, the dropdown has a required attribute.
-   */
-  required?: boolean;
-}
-
-export class Dropdown extends React.Component<DropdownProps, {}> { }
-
-export default Dropdown;
diff --git a/lib/dropdown/index.js b/lib/dropdown/index.js
deleted file mode 100644
index b2de898e7..000000000
--- a/lib/dropdown/index.js
+++ /dev/null
@@ -1,26 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Dropdown = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Dropdown = require('./Dropdown.js');
-
-var _input = require('../input');
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var Dropdown = (0, _Dropdown.dropdownFactory)(_input.Input);
-var ThemedDropdown = (0, _reactCssThemr.themr)(_identifiers.DROPDOWN, _theme2.default)(Dropdown);
-
-exports.default = ThemedDropdown;
-exports.Dropdown = ThemedDropdown;
\ No newline at end of file
diff --git a/lib/dropdown/theme.scss b/lib/dropdown/theme.scss
deleted file mode 100644
index 607afa2a6..000000000
--- a/lib/dropdown/theme.scss
+++ /dev/null
@@ -1,138 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/input/config";
-@import "http://github.com/config";
-
-.dropdown {
-  position: relative;
-  &:not(.active) {
-    > .values {
-      max-height: 0;
-      visibility: hidden;
-    }
-  }
-  &.active {
-    > .label, > .value {
-      opacity: .5;
-    }
-    > .values {
-      max-height: $dropdown-overflow-max-height;
-      visibility: visible;
-      box-shadow: $zdepth-shadow-1;
-    }
-  }
-  &:not(.up) > .values {
-    top: 0;
-    bottom: auto;
-  }
-  &.up > .values {
-    top: auto;
-    bottom: 0;
-  }
-  &.disabled {
-    pointer-events: none;
-    cursor: normal;
-  }
-}
-
-.value {
-  > input {
-    cursor: pointer;
-  }
-  &:after {
-    $size: ($input-field-height / 7);
-    $border: $size solid transparent;
-    position: absolute;
-    top: 50%;
-    right: $input-chevron-offset;
-    width: 0;
-    height: 0;
-    pointer-events: none;
-    content: "";
-    border-top: $size solid $input-text-bottom-border-color;
-    border-right: $border;
-    border-left: $border;
-    transition: transform $animation-duration $animation-curve-default;
-  }
-}
-
-.field {
-  position: relative;
-  padding: $input-padding 0;
-  cursor: pointer;
-  &.errored {
-    padding-bottom: 0;
-    > .label {
-      color: $input-text-error-color;
-    }
-    > .templateValue {
-      border-bottom: 1px solid $input-text-error-color;
-    }
-    > .label > .required {
-      color: $input-text-required-color;
-    }
-  }
-  &.disabled {
-    pointer-events: none;
-    cursor: normal;
-    > .templateValue {
-      border-bottom-style: dotted;
-      opacity: .7;
-    }
-  }
-}
-
-.templateValue {
-  position: relative;
-  min-height: $input-field-height;
-  padding: $input-field-padding 0;
-  color: $color-text;
-  background-color: $input-text-background-color;
-  border-bottom: 1px solid $input-text-bottom-border-color;
-}
-
-.label {
-  position: absolute;
-  top: $input-focus-label-top;
-  left: 0;
-  font-size: $input-label-font-size;
-  line-height: $input-field-font-size;
-  color: $input-text-label-color;
-  .required {
-    color: $input-text-required-color;
-  }
-}
-
-.error {
-  margin-bottom: - $input-underline-height;
-  font-size: $input-label-font-size;
-  line-height: $input-underline-height;
-  color: $input-text-error-color;
-}
-
-.values {
-  @include no-webkit-scrollbar;
-  position: absolute;
-  z-index: $z-index-high;
-  width: 100%;
-  overflow-y: auto;
-  list-style: none;
-  background-color: $dropdown-color-white;
-  border-radius: $dropdown-value-border-radius;
-  transition-timing-function: $animation-curve-default;
-  transition-duration: $animation-duration;
-  transition-property: max-height, box-shadow;
-  > * {
-    position: relative;
-    padding: $unit;
-    overflow: hidden;
-    cursor: pointer;
-    &:hover {
-      background-color: $dropdown-value-hover-background;
-    }
-    &.selected {
-      color: $dropdown-color-primary;
-    }
-  }
-}
diff --git a/lib/font_icon/FontIcon.js b/lib/font_icon/FontIcon.js
deleted file mode 100644
index 5438cac44..000000000
--- a/lib/font_icon/FontIcon.js
+++ /dev/null
@@ -1,50 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FontIcon = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-var FontIcon = function FontIcon(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      value = _ref.value,
-      other = _objectWithoutProperties(_ref, ['children', 'className', 'value']);
-
-  return _react2.default.createElement(
-    'span',
-    _extends({
-      'data-react-toolbox': 'font-icon',
-      className: (0, _classnames2.default)({ 'material-icons': typeof value === 'string' || typeof children === 'string' }, className)
-    }, other),
-    value,
-    children
-  );
-};
-
-FontIcon.propTypes = {
-  children: _react.PropTypes.any,
-  className: _react.PropTypes.string,
-  value: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element])
-};
-
-FontIcon.defaultProps = {
-  className: ''
-};
-
-exports.default = FontIcon;
-exports.FontIcon = FontIcon;
\ No newline at end of file
diff --git a/lib/font_icon/index.d.ts b/lib/font_icon/index.d.ts
deleted file mode 100644
index 11ca3c014..000000000
--- a/lib/font_icon/index.d.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-interface FontIconProps extends ReactToolbox.Props {
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * The key string for the icon you want be displayed.
-   */
-  value?: React.ReactNode | string;
-}
-
-export class FontIcon extends React.Component<FontIconProps, {}> { }
-
-export default FontIcon;
diff --git a/lib/font_icon/index.js b/lib/font_icon/index.js
deleted file mode 100644
index 8f7ca8346..000000000
--- a/lib/font_icon/index.js
+++ /dev/null
@@ -1,15 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FontIcon = undefined;
-
-var _FontIcon = require('./FontIcon.js');
-
-var _FontIcon2 = _interopRequireDefault(_FontIcon);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = _FontIcon2.default;
-exports.FontIcon = _FontIcon2.default;
\ No newline at end of file
diff --git a/lib/form/Form.js b/lib/form/Form.js
deleted file mode 100644
index fe56e77f7..000000000
--- a/lib/form/Form.js
+++ /dev/null
@@ -1,151 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Form = exports.formFactory = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _Autocomplete = require('../autocomplete/Autocomplete.js');
-
-var _Autocomplete2 = _interopRequireDefault(_Autocomplete);
-
-var _Button = require('../button/Button.js');
-
-var _Button2 = _interopRequireDefault(_Button);
-
-var _Checkbox = require('../checkbox/Checkbox.js');
-
-var _Checkbox2 = _interopRequireDefault(_Checkbox);
-
-var _DatePicker = require('../date_picker/DatePicker.js');
-
-var _DatePicker2 = _interopRequireDefault(_DatePicker);
-
-var _Dropdown = require('../dropdown/Dropdown.js');
-
-var _Dropdown2 = _interopRequireDefault(_Dropdown);
-
-var _Input = require('../input/Input.js');
-
-var _Input2 = _interopRequireDefault(_Input);
-
-var _RadioGroup = require('../radio/RadioGroup.js');
-
-var _RadioGroup2 = _interopRequireDefault(_RadioGroup);
-
-var _Slider = require('../slider/Slider.js');
-
-var _Slider2 = _interopRequireDefault(_Slider);
-
-var _Switch = require('../switch/Switch.js');
-
-var _Switch2 = _interopRequireDefault(_Switch);
-
-var _TimePicker = require('../time_picker/TimePicker.js');
-
-var _TimePicker2 = _interopRequireDefault(_TimePicker);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(Autocomplete, Button, Checkbox, DatePicker, Dropdown, Input, RadioGroup, Slider, Switch, TimePicker) {
-
-  var COMPONENTS = {
-    'autocomplete': Autocomplete,
-    'button': Button,
-    'checkbox': Checkbox,
-    'datepicker': DatePicker,
-    'dropdown': Dropdown,
-    'input': Input,
-    'radioGroup': RadioGroup,
-    'slider': Slider,
-    'switch': Switch,
-    'timepicker': TimePicker
-  };
-
-  var Form = function (_Component) {
-    _inherits(Form, _Component);
-
-    function Form() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, Form);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Form.__proto__ || Object.getPrototypeOf(Form)).call.apply(_ref, [this].concat(args))), _this), _this.onSubmit = function (event) {
-        event.preventDefault();
-        if (_this.props.onSubmit) _this.props.onSubmit(event);
-      }, _this.onChange = function (field, value, event) {
-        if (_this.props.onChange) _this.props.onChange(field, value, event);
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(Form, [{
-      key: 'renderFields',
-      value: function renderFields() {
-        var _this2 = this;
-
-        return Object.keys(this.props.model).map(function (field, index) {
-          var properties = _this2.props.model[field];
-          var Field = COMPONENTS[properties.kind.toLowerCase()];
-          return _react2.default.createElement(Field, _extends({ key: index }, properties, { onChange: _this2.onChange.bind(_this2, field) }));
-        });
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        return _react2.default.createElement(
-          'form',
-          { 'data-react-toolbox': 'form', className: this.props.className, onSubmit: this.onSubmit },
-          this.renderFields(),
-          this.props.children
-        );
-      }
-    }]);
-
-    return Form;
-  }(_react.Component);
-
-  Form.propTypes = {
-    attributes: _react.PropTypes.array,
-    children: _react.PropTypes.node,
-    className: _react.PropTypes.string,
-    model: _react.PropTypes.object,
-    onChange: _react.PropTypes.func,
-    onError: _react.PropTypes.func,
-    onSubmit: _react.PropTypes.func,
-    onValid: _react.PropTypes.func,
-    storage: _react.PropTypes.string
-  };
-  Form.defaultProps = {
-    attributes: [],
-    className: ''
-  };
-
-
-  return Form;
-};
-
-var Form = factory(_Autocomplete2.default, _Button2.default, _Checkbox2.default, _DatePicker2.default, _Dropdown2.default, _Input2.default, _RadioGroup2.default, _Slider2.default, _Switch2.default, _TimePicker2.default);
-
-exports.default = Form;
-exports.formFactory = factory;
-exports.Form = Form;
\ No newline at end of file
diff --git a/lib/form/index.js b/lib/form/index.js
deleted file mode 100644
index ee5d2741d..000000000
--- a/lib/form/index.js
+++ /dev/null
@@ -1,55 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Form = undefined;
-
-var _Form = require('./Form.js');
-
-var _autocomplete = require('../autocomplete');
-
-var _autocomplete2 = _interopRequireDefault(_autocomplete);
-
-var _button = require('../button');
-
-var _button2 = _interopRequireDefault(_button);
-
-var _checkbox = require('../checkbox');
-
-var _checkbox2 = _interopRequireDefault(_checkbox);
-
-var _date_picker = require('../date_picker');
-
-var _date_picker2 = _interopRequireDefault(_date_picker);
-
-var _dropdown = require('../dropdown');
-
-var _dropdown2 = _interopRequireDefault(_dropdown);
-
-var _input = require('../input');
-
-var _input2 = _interopRequireDefault(_input);
-
-var _radio = require('../radio');
-
-var _radio2 = _interopRequireDefault(_radio);
-
-var _slider = require('../slider');
-
-var _slider2 = _interopRequireDefault(_slider);
-
-var _switch = require('../switch');
-
-var _switch2 = _interopRequireDefault(_switch);
-
-var _time_picker = require('../time_picker');
-
-var _time_picker2 = _interopRequireDefault(_time_picker);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var ThemedForm = (0, _Form.formFactory)(_autocomplete2.default, _button2.default, _checkbox2.default, _date_picker2.default, _dropdown2.default, _input2.default, _radio2.default, _slider2.default, _switch2.default, _time_picker2.default);
-
-exports.default = ThemedForm;
-exports.Form = ThemedForm;
\ No newline at end of file
diff --git a/lib/hoc/ActivableRenderer.js b/lib/hoc/ActivableRenderer.js
deleted file mode 100644
index 09c34f986..000000000
--- a/lib/hoc/ActivableRenderer.js
+++ /dev/null
@@ -1,113 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var ActivableRendererFactory = function ActivableRendererFactory() {
-  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : { delay: 500 };
-  return function (ActivableComponent) {
-    var _class, _temp2;
-
-    return _temp2 = _class = function (_Component) {
-      _inherits(ActivableRenderer, _Component);
-
-      function ActivableRenderer() {
-        var _ref;
-
-        var _temp, _this, _ret;
-
-        _classCallCheck(this, ActivableRenderer);
-
-        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
-
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ActivableRenderer.__proto__ || Object.getPrototypeOf(ActivableRenderer)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-          active: _this.props.active,
-          rendered: _this.props.active
-        }, _temp), _possibleConstructorReturn(_this, _ret);
-      }
-
-      _createClass(ActivableRenderer, [{
-        key: 'componentWillReceiveProps',
-        value: function componentWillReceiveProps(nextProps) {
-          if (nextProps.active && !this.props.active) this.renderAndActivate();
-          if (!nextProps.active && this.props.active) this.deactivateAndUnrender();
-        }
-      }, {
-        key: 'componentWillUnmount',
-        value: function componentWillUnmount() {
-          clearTimeout(this.activateTimeout);
-          clearTimeout(this.unrenderTimeout);
-        }
-      }, {
-        key: 'renderAndActivate',
-        value: function renderAndActivate() {
-          var _this2 = this;
-
-          if (this.unrenderTimeout) clearTimeout(this.unrenderTimeout);
-          this.setState({ rendered: true, active: false }, function () {
-            _this2.activateTimeout = setTimeout(function () {
-              return _this2.setState({ active: true });
-            }, 20);
-          });
-        }
-      }, {
-        key: 'deactivateAndUnrender',
-        value: function deactivateAndUnrender() {
-          var _this3 = this;
-
-          this.setState({ rendered: true, active: false }, function () {
-            _this3.unrenderTimeout = setTimeout(function () {
-              _this3.setState({ rendered: false });
-              _this3.unrenderTimeout = null;
-            }, _this3.props.delay);
-          });
-        }
-      }, {
-        key: 'render',
-        value: function render() {
-          var _props = this.props,
-              delay = _props.delay,
-              others = _objectWithoutProperties(_props, ['delay']); // eslint-disable-line no-unused-vars
-
-
-          var _state = this.state,
-              active = _state.active,
-              rendered = _state.rendered;
-
-          return rendered ? _react2.default.createElement(ActivableComponent, _extends({}, others, { active: active })) : null;
-        }
-      }]);
-
-      return ActivableRenderer;
-    }(_react.Component), _class.propTypes = {
-      active: _react.PropTypes.bool.isRequired,
-      children: _react.PropTypes.any,
-      delay: _react.PropTypes.number
-    }, _class.defaultProps = {
-      delay: options.delay
-    }, _temp2;
-  };
-};
-
-exports.default = ActivableRendererFactory;
\ No newline at end of file
diff --git a/lib/hoc/Portal.js b/lib/hoc/Portal.js
deleted file mode 100644
index 0d8cda45a..000000000
--- a/lib/hoc/Portal.js
+++ /dev/null
@@ -1,145 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactDom = require('react-dom');
-
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var Portal = function (_Component) {
-  _inherits(Portal, _Component);
-
-  function Portal() {
-    _classCallCheck(this, Portal);
-
-    return _possibleConstructorReturn(this, (Portal.__proto__ || Object.getPrototypeOf(Portal)).apply(this, arguments));
-  }
-
-  _createClass(Portal, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      this._renderOverlay();
-    }
-  }, {
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(nextProps) {
-      if (this._overlayTarget && nextProps.container !== this.props.container) {
-        this._portalContainerNode.removeChild(this._overlayTarget);
-        this._portalContainerNode = getContainer(nextProps.container);
-        this._portalContainerNode.appendChild(this._overlayTarget);
-      }
-    }
-  }, {
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate() {
-      this._renderOverlay();
-    }
-  }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      this._unrenderOverlay();
-      this._unmountOverlayTarget();
-    }
-  }, {
-    key: '_mountOverlayTarget',
-    value: function _mountOverlayTarget() {
-      if (!this._overlayTarget) {
-        this._overlayTarget = document.createElement('div');
-        this._portalContainerNode = getContainer(this.props.container);
-        this._portalContainerNode.appendChild(this._overlayTarget);
-      }
-    }
-  }, {
-    key: '_unmountOverlayTarget',
-    value: function _unmountOverlayTarget() {
-      if (this._overlayTarget) {
-        this._portalContainerNode.removeChild(this._overlayTarget);
-        this._overlayTarget = null;
-      }
-      this._portalContainerNode = null;
-    }
-  }, {
-    key: '_renderOverlay',
-    value: function _renderOverlay() {
-      var overlay = !this.props.children ? null : _react2.default.Children.only(this.props.children);
-
-      if (overlay !== null) {
-        this._mountOverlayTarget();
-        this._overlayInstance = _reactDom2.default.unstable_renderSubtreeIntoContainer(this, overlay, this._overlayTarget);
-      } else {
-        this._unrenderOverlay();
-        this._unmountOverlayTarget();
-      }
-    }
-  }, {
-    key: '_unrenderOverlay',
-    value: function _unrenderOverlay() {
-      if (this._overlayTarget) {
-        _reactDom2.default.unmountComponentAtNode(this._overlayTarget);
-        this._overlayInstance = null;
-      }
-    }
-  }, {
-    key: 'getMountNode',
-    value: function getMountNode() {
-      return this._overlayTarget;
-    }
-  }, {
-    key: 'getOverlayDOMNode',
-    value: function getOverlayDOMNode() {
-      if (!this.isMounted()) {
-        throw new Error('getOverlayDOMNode(): A component must be mounted to have a DOM node.');
-      }
-
-      if (this._overlayInstance) {
-        if (this._overlayInstance.getWrappedDOMNode) {
-          return this._overlayInstance.getWrappedDOMNode();
-        } else {
-          return _reactDom2.default.findDOMNode(this._overlayInstance);
-        }
-      }
-
-      return null;
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      return null;
-    }
-  }]);
-
-  return Portal;
-}(_react.Component);
-
-Portal.propTypes = {
-  children: _react.PropTypes.any,
-  container: _react.PropTypes.any,
-  lockBody: _react.PropTypes.bool
-};
-Portal.defaultProps = {
-  lockBody: true
-};
-
-
-function getContainer(container) {
-  var _container = typeof container === 'function' ? container() : container;
-  return _reactDom2.default.findDOMNode(_container) || document.body;
-}
-
-exports.default = Portal;
\ No newline at end of file
diff --git a/lib/identifiers.js b/lib/identifiers.js
deleted file mode 100644
index f5fcaef20..000000000
--- a/lib/identifiers.js
+++ /dev/null
@@ -1,32 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var APP_BAR = exports.APP_BAR = 'RTAppBar';
-var AUTOCOMPLETE = exports.AUTOCOMPLETE = 'RTAutocomplete';
-var AVATAR = exports.AVATAR = 'RTAvatar';
-var BUTTON = exports.BUTTON = 'RTButton';
-var CARD = exports.CARD = 'RTCard';
-var CHIP = exports.CHIP = 'RTChip';
-var CHECKBOX = exports.CHECKBOX = 'RTCheckbox';
-var DATE_PICKER = exports.DATE_PICKER = 'RTDatePicker';
-var DIALOG = exports.DIALOG = 'RTDialog';
-var DROPDOWN = exports.DROPDOWN = 'RTDropdown';
-var INPUT = exports.INPUT = 'RTInput';
-var LAYOUT = exports.LAYOUT = 'RTLayout';
-var LINK = exports.LINK = 'RTLink';
-var LIST = exports.LIST = 'RTList';
-var MENU = exports.MENU = 'RTMenu';
-var NAVIGATION = exports.NAVIGATION = 'RTNavigation';
-var OVERLAY = exports.OVERLAY = 'RTOverlay';
-var PROGRESS_BAR = exports.PROGRESS_BAR = 'RTProgressBar';
-var RADIO = exports.RADIO = 'RTRadio';
-var RIPPLE = exports.RIPPLE = 'RTRipple';
-var SLIDER = exports.SLIDER = 'RTSlider';
-var SNACKBAR = exports.SNACKBAR = 'RTSnackbar';
-var SWITCH = exports.SWITCH = 'RTSwitch';
-var TABLE = exports.TABLE = 'RTTable';
-var TABS = exports.TABS = 'RTTabs';
-var TOOLTIP = exports.TOOLTIP = 'RTTooltip';
-var TIME_PICKER = exports.TIME_PICKER = 'RTTimePicker';
\ No newline at end of file
diff --git a/lib/index.d.ts b/lib/index.d.ts
deleted file mode 100644
index d18ecd7b0..000000000
--- a/lib/index.d.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import * as React from "react";
-export declare namespace ReactToolbox {
-  interface Props {
-    /**
-     * Set a class for the root component.
-     */
-    className?: string;
-    /**
-     * Key used to uniquely identify the element within an Array.
-     */
-    key?: string | number;
-    /**
-     * Callback called when the component is clicked.
-     */
-    onClick?: Function;
-    /**
-     * Fires after the mouse is released from the Component.
-     */
-    onMouseUp?: Function;
-    /**
-     * Callback called when the mouse enters the Component.
-     */
-    onMouseEnter?: Function;
-    /**
-     * Callback called when the mouse leaves the Component.
-     */
-    onMouseLeave?: Function;
-    /**
-     * Callback called when the mouse press the Component.
-     */
-    onMouseDown?: Function;
-    onContextMenu?: Function;
-    onDoubleClick?: Function;
-    onDrag?: Function;
-    onDragEnd?: Function;
-    onDragEnter?: Function;
-    onDragExit?: Function;
-    onDragLeave?: Function;
-    onDragOver?: Function;
-    onDragStart?: Function;
-    onDrop?: Function;
-    onMouseMove?: Function;
-    onMouseOut?: Function;
-    onMouseOver?: Function;
-    onTouchCancel?: Function;
-    onTouchEnd?: Function;
-    onTouchMove?: Function;
-    onTouchStart?: Function;
-    /**
-     * Set inline style for the root component.
-     */
-    style?: React.CSSProperties;
-  }
-}
-
-export default ReactToolbox;
diff --git a/lib/index.js b/lib/index.js
deleted file mode 100644
index b4f37c537..000000000
--- a/lib/index.js
+++ /dev/null
@@ -1,206 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TimePicker = exports.Tooltip = exports.Table = exports.Switch = exports.Snackbar = exports.Slider = exports.Ripple = exports.ProgressBar = exports.Navigation = exports.Link = exports.Input = exports.Form = exports.FontIcon = exports.Dropdown = exports.Drawer = exports.Dialog = exports.DatePicker = exports.Checkbox = exports.Chip = exports.Avatar = exports.Autocomplete = exports.AppBar = undefined;
-
-var _button = require('./button');
-
-Object.keys(_button).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _button[key];
-    }
-  });
-});
-
-var _card = require('./card');
-
-Object.keys(_card).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _card[key];
-    }
-  });
-});
-
-var _layout = require('./layout');
-
-Object.keys(_layout).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _layout[key];
-    }
-  });
-});
-
-var _list = require('./list');
-
-Object.keys(_list).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _list[key];
-    }
-  });
-});
-
-var _menu = require('./menu');
-
-Object.keys(_menu).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _menu[key];
-    }
-  });
-});
-
-var _radio = require('./radio');
-
-Object.keys(_radio).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _radio[key];
-    }
-  });
-});
-
-var _tabs = require('./tabs');
-
-Object.keys(_tabs).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _tabs[key];
-    }
-  });
-});
-
-require('./utils/polyfills');
-
-var _app_bar = require('./app_bar');
-
-var _app_bar2 = _interopRequireDefault(_app_bar);
-
-var _autocomplete = require('./autocomplete');
-
-var _autocomplete2 = _interopRequireDefault(_autocomplete);
-
-var _avatar = require('./avatar');
-
-var _avatar2 = _interopRequireDefault(_avatar);
-
-var _chip = require('./chip');
-
-var _chip2 = _interopRequireDefault(_chip);
-
-var _checkbox = require('./checkbox');
-
-var _checkbox2 = _interopRequireDefault(_checkbox);
-
-var _date_picker = require('./date_picker');
-
-var _date_picker2 = _interopRequireDefault(_date_picker);
-
-var _dialog = require('./dialog');
-
-var _dialog2 = _interopRequireDefault(_dialog);
-
-var _drawer = require('./drawer');
-
-var _drawer2 = _interopRequireDefault(_drawer);
-
-var _dropdown = require('./dropdown');
-
-var _dropdown2 = _interopRequireDefault(_dropdown);
-
-var _font_icon = require('./font_icon');
-
-var _font_icon2 = _interopRequireDefault(_font_icon);
-
-var _form = require('./form');
-
-var _form2 = _interopRequireDefault(_form);
-
-var _input = require('./input');
-
-var _input2 = _interopRequireDefault(_input);
-
-var _link = require('./link');
-
-var _link2 = _interopRequireDefault(_link);
-
-var _navigation = require('./navigation');
-
-var _navigation2 = _interopRequireDefault(_navigation);
-
-var _progress_bar = require('./progress_bar');
-
-var _progress_bar2 = _interopRequireDefault(_progress_bar);
-
-var _ripple = require('./ripple');
-
-var _ripple2 = _interopRequireDefault(_ripple);
-
-var _slider = require('./slider');
-
-var _slider2 = _interopRequireDefault(_slider);
-
-var _snackbar = require('./snackbar');
-
-var _snackbar2 = _interopRequireDefault(_snackbar);
-
-var _switch = require('./switch');
-
-var _switch2 = _interopRequireDefault(_switch);
-
-var _table = require('./table');
-
-var _table2 = _interopRequireDefault(_table);
-
-var _tooltip = require('./tooltip');
-
-var _tooltip2 = _interopRequireDefault(_tooltip);
-
-var _time_picker = require('./time_picker');
-
-var _time_picker2 = _interopRequireDefault(_time_picker);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.AppBar = _app_bar2.default; // Import polyfills for IE11
-
-exports.Autocomplete = _autocomplete2.default;
-exports.Avatar = _avatar2.default;
-exports.Chip = _chip2.default;
-exports.Checkbox = _checkbox2.default;
-exports.DatePicker = _date_picker2.default;
-exports.Dialog = _dialog2.default;
-exports.Drawer = _drawer2.default;
-exports.Dropdown = _dropdown2.default;
-exports.FontIcon = _font_icon2.default;
-exports.Form = _form2.default;
-exports.Input = _input2.default;
-exports.Link = _link2.default;
-exports.Navigation = _navigation2.default;
-exports.ProgressBar = _progress_bar2.default;
-exports.Ripple = _ripple2.default;
-exports.Slider = _slider2.default;
-exports.Snackbar = _snackbar2.default;
-exports.Switch = _switch2.default;
-exports.Table = _table2.default;
-exports.Tooltip = _tooltip2.default;
-exports.TimePicker = _time_picker2.default;
\ No newline at end of file
diff --git a/lib/input/Input.js b/lib/input/Input.js
deleted file mode 100644
index ae958f05b..000000000
--- a/lib/input/Input.js
+++ /dev/null
@@ -1,296 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Input = exports.inputFactory = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames4 = require('classnames');
-
-var _classnames5 = _interopRequireDefault(_classnames4);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _FontIcon = require('../font_icon/FontIcon.js');
-
-var _FontIcon2 = _interopRequireDefault(_FontIcon);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(FontIcon) {
-  var Input = function (_React$Component) {
-    _inherits(Input, _React$Component);
-
-    function Input() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, Input);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Input.__proto__ || Object.getPrototypeOf(Input)).call.apply(_ref, [this].concat(args))), _this), _this.handleChange = function (event) {
-        var _this$props = _this.props,
-            onChange = _this$props.onChange,
-            multiline = _this$props.multiline,
-            maxLength = _this$props.maxLength;
-
-        var valueFromEvent = event.target.value;
-
-        // Trim value to maxLength if that exists (only on multiline inputs).
-        // Note that this is still required even tho we have the onKeyPress filter
-        // because the user could paste smt in the textarea.
-        var haveToTrim = multiline && maxLength && event.target.value.length > maxLength;
-        var value = haveToTrim ? valueFromEvent.substr(0, maxLength) : valueFromEvent;
-
-        // propagate to to store and therefore to the input
-        if (onChange) onChange(value, event);
-      }, _this.handleAutoresize = function () {
-        var element = _this.refs.input;
-        var rows = _this.props.rows;
-
-        if (typeof rows === 'number' && !isNaN(rows)) {
-          element.style.height = null;
-        } else {
-          // compute the height difference between inner height and outer height
-          var style = getComputedStyle(element, null);
-          var heightOffset = style.boxSizing === 'content-box' ? -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom)) : parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
-
-          // resize the input to its content size
-          element.style.height = 'auto';
-          element.style.height = element.scrollHeight + heightOffset + 'px';
-        }
-      }, _this.handleKeyPress = function (event) {
-        // prevent insertion of more characters if we're a multiline input
-        // and maxLength exists
-        var _this$props2 = _this.props,
-            multiline = _this$props2.multiline,
-            maxLength = _this$props2.maxLength,
-            onKeyPress = _this$props2.onKeyPress;
-
-        if (multiline && maxLength) {
-          // check if smt is selected, in which case the newly added charcter would
-          // replace the selected characters, so the length of value doesn't actually
-          // increase.
-          var isReplacing = event.target.selectionEnd - event.target.selectionStart;
-          var value = event.target.value;
-
-          if (!isReplacing && value.length === maxLength) {
-            event.preventDefault();
-            event.stopPropagation();
-            return;
-          }
-        }
-
-        if (onKeyPress) onKeyPress(event);
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(Input, [{
-      key: 'componentDidMount',
-      value: function componentDidMount() {
-        if (this.props.multiline) {
-          window.addEventListener('resize', this.handleAutoresize);
-          this.handleAutoresize();
-        }
-      }
-    }, {
-      key: 'componentWillReceiveProps',
-      value: function componentWillReceiveProps(nextProps) {
-        if (!this.props.multiline && nextProps.multiline) {
-          window.addEventListener('resize', this.handleAutoresize);
-        } else if (this.props.multiline && !nextProps.multiline) {
-          window.removeEventListener('resize', this.handleAutoresize);
-        }
-      }
-    }, {
-      key: 'componentDidUpdate',
-      value: function componentDidUpdate() {
-        // resize the textarea, if nessesary
-        if (this.props.multiline) this.handleAutoresize();
-      }
-    }, {
-      key: 'componentWillUnmount',
-      value: function componentWillUnmount() {
-        if (this.props.multiline) window.removeEventListener('resize', this.handleAutoresize);
-      }
-    }, {
-      key: 'blur',
-      value: function blur() {
-        this.refs.input.blur();
-      }
-    }, {
-      key: 'focus',
-      value: function focus() {
-        this.refs.input.focus();
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var _classnames2;
-
-        var _props = this.props,
-            children = _props.children,
-            disabled = _props.disabled,
-            error = _props.error,
-            floating = _props.floating,
-            hint = _props.hint,
-            icon = _props.icon,
-            name = _props.name,
-            labelText = _props.label,
-            maxLength = _props.maxLength,
-            multiline = _props.multiline,
-            required = _props.required,
-            theme = _props.theme,
-            type = _props.type,
-            value = _props.value,
-            onKeyPress = _props.onKeyPress,
-            _props$rows = _props.rows,
-            rows = _props$rows === undefined ? 1 : _props$rows,
-            others = _objectWithoutProperties(_props, ['children', 'disabled', 'error', 'floating', 'hint', 'icon', 'name', 'label', 'maxLength', 'multiline', 'required', 'theme', 'type', 'value', 'onKeyPress', 'rows']);
-
-        var length = maxLength && value ? value.length : 0;
-        var labelClassName = (0, _classnames5.default)(theme.label, _defineProperty({}, theme.fixed, !floating));
-
-        var className = (0, _classnames5.default)(theme.input, (_classnames2 = {}, _defineProperty(_classnames2, theme.disabled, disabled), _defineProperty(_classnames2, theme.errored, error), _defineProperty(_classnames2, theme.hidden, type === 'hidden'), _defineProperty(_classnames2, theme.withIcon, icon), _classnames2), this.props.className);
-
-        var valuePresent = value !== null && value !== undefined && value !== '' && !((typeof value === 'undefined' ? 'undefined' : _typeof(value)) === Number && isNaN(value));
-
-        var inputElementProps = _extends({}, others, {
-          className: (0, _classnames5.default)(theme.inputElement, _defineProperty({}, theme.filled, valuePresent)),
-          onChange: this.handleChange,
-          ref: 'input',
-          role: 'input',
-          name: name,
-          disabled: disabled,
-          required: required,
-          type: type,
-          value: value
-        });
-        if (!multiline) {
-          inputElementProps.maxLength = maxLength;
-          inputElementProps.onKeyPress = onKeyPress;
-        } else {
-          inputElementProps.rows = rows;
-          inputElementProps.onKeyPress = this.handleKeyPress;
-        }
-
-        return _react2.default.createElement(
-          'div',
-          { 'data-react-toolbox': 'input', className: className },
-          _react2.default.createElement(multiline ? 'textarea' : 'input', inputElementProps),
-          icon ? _react2.default.createElement(FontIcon, { className: theme.icon, value: icon }) : null,
-          _react2.default.createElement('span', { className: theme.bar }),
-          labelText ? _react2.default.createElement(
-            'label',
-            { className: labelClassName },
-            labelText,
-            required ? _react2.default.createElement(
-              'span',
-              { className: theme.required },
-              ' * '
-            ) : null
-          ) : null,
-          hint ? _react2.default.createElement(
-            'span',
-            { hidden: labelText, className: theme.hint },
-            hint
-          ) : null,
-          error ? _react2.default.createElement(
-            'span',
-            { className: theme.error },
-            error
-          ) : null,
-          maxLength ? _react2.default.createElement(
-            'span',
-            { className: theme.counter },
-            length,
-            '/',
-            maxLength
-          ) : null,
-          children
-        );
-      }
-    }]);
-
-    return Input;
-  }(_react2.default.Component);
-
-  Input.propTypes = {
-    children: _react2.default.PropTypes.any,
-    className: _react2.default.PropTypes.string,
-    disabled: _react2.default.PropTypes.bool,
-    error: _react2.default.PropTypes.string,
-    floating: _react2.default.PropTypes.bool,
-    hint: _react2.default.PropTypes.string,
-    icon: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.element]),
-    label: _react2.default.PropTypes.string,
-    maxLength: _react2.default.PropTypes.number,
-    multiline: _react2.default.PropTypes.bool,
-    name: _react2.default.PropTypes.string,
-    onBlur: _react2.default.PropTypes.func,
-    onChange: _react2.default.PropTypes.func,
-    onFocus: _react2.default.PropTypes.func,
-    onKeyPress: _react2.default.PropTypes.func,
-    required: _react2.default.PropTypes.bool,
-    rows: _react2.default.PropTypes.number,
-    theme: _react2.default.PropTypes.shape({
-      bar: _react2.default.PropTypes.string,
-      counter: _react2.default.PropTypes.string,
-      disabled: _react2.default.PropTypes.string,
-      error: _react2.default.PropTypes.string,
-      errored: _react2.default.PropTypes.string,
-      hidden: _react2.default.PropTypes.string,
-      hint: _react2.default.PropTypes.string,
-      icon: _react2.default.PropTypes.string,
-      input: _react2.default.PropTypes.string,
-      inputElement: _react2.default.PropTypes.string,
-      required: _react2.default.PropTypes.string,
-      withIcon: _react2.default.PropTypes.string
-    }),
-    type: _react2.default.PropTypes.string,
-    value: _react2.default.PropTypes.any
-  };
-  Input.defaultProps = {
-    className: '',
-    hint: '',
-    disabled: false,
-    floating: true,
-    multiline: false,
-    required: false,
-    type: 'text'
-  };
-
-
-  return Input;
-};
-
-var Input = factory(_FontIcon2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.INPUT, null, { withRef: true })(Input);
-exports.inputFactory = factory;
-exports.Input = Input;
\ No newline at end of file
diff --git a/lib/input/_config.scss b/lib/input/_config.scss
deleted file mode 100644
index ff9f58cda..000000000
--- a/lib/input/_config.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-$input-padding: 2 * $unit !default;
-$input-field-padding: .8 * $unit !default;
-$input-field-font-size: 1.6 * $unit !default;
-$input-field-height: $input-field-padding * 2 + $input-field-font-size * 1.4 !default;
-$input-label-font-size: 1.2 * $unit !default;
-$input-focus-label-top: .6 * $unit !default;
-$input-text-background-color: transparent !default;
-$input-text-label-color: rgba($color-black, 0.26) !default;
-$input-text-bottom-border-color: rgba($color-black, 0.12) !default;
-$input-text-highlight-color: $color-primary !default;
-$input-text-disabled-color: $input-text-bottom-border-color !default;
-$input-text-disabled-text-color: $input-text-label-color !default;
-$input-text-error-color: rgb(222, 50, 38) !default;
-$input-text-required-color: rgb(222, 50, 38) !default;
-$input-underline-height:  2 * $unit !default;
-$input-icon-font-size: 2.4 * $unit !default;
-$input-icon-size: 2 * $input-icon-font-size !default;
-$input-icon-offset: 1.6 * $unit !default;
-$input-chevron-offset: .8 * $unit !default;
-$input-hint-opacity: 1 !default;
diff --git a/lib/input/index.d.ts b/lib/input/index.d.ts
deleted file mode 100644
index b1db642a2..000000000
--- a/lib/input/index.d.ts
+++ /dev/null
@@ -1,136 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface InputTheme {
-  /**
-   * Used for the bar under the input.
-   */
-  bar?: string;
-  /**
-   * Used for the counter element.
-   */
-  counter?: string;
-  /**
-   * Added to the root class when input is disabled.
-   */
-  disabled?: string;
-  /**
-   * Used for the text error.
-   */
-  error?: string;
-  /**
-   * Added to the root class when input is errored.
-   */
-  errored?: string;
-  /**
-   * Used when the input is hidden.
-   */
-  hidden?: string;
-  /**
-   * Used for the hint text.
-   */
-  hint?: string;
-  /**
-   * Used for the icon in case the input has icon.
-   */
-  icon?: string;
-  /**
-   * Used as root class for the component.
-   */
-  input?: string;
-  /**
-   * Used for the HTML input element.
-   */
-  inputElement?: string;
-  /**
-   * Used in case the input is required.
-   */
-  required?: string;
-  /**
-   * Added to the root class if the input has icon.
-   */
-  withIcon?: string;
-}
-
-interface InputProps extends ReactToolbox.Props {
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * If true, component will be disabled.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * Give an error node to display under the field.
-   */
-  error?: string;
-  /**
-   * Indicates if the label is floating in the input field or not.
-   * @default true
-   */
-  floating?: boolean;
-  /**
-   * The text string to use for hint text element.
-   */
-  hint?: string;
-  /**
-   * Name of an icon to use as a label for the input.
-   */
-  icon?: React.ReactNode | string;
-  /**
-   * The text string to use for the floating label element.
-   */
-  label?: string;
-  /**
-   * Specifies the maximum number of characters allowed in the component
-   */
-  maxLength?: number;
-  /**
-   * If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.
-   * @default false
-   */
-  multiline?: boolean;
-  /**
-   * Name for the input field.
-   */
-  name?: string;
-  /**
-   * Callback function that is fired when component is blurred.
-   */
-  onBlur?: Function;
-  /**
-   * Callback function that is fired when the component's value changes
-   */
-  onChange?: Function;
-  /**
-   * Callback function that is fired when component is focused.
-   */
-  onFocus?: Function;
-  /**
-   * Callback function that is fired when a key is pressed.
-   */
-  onKeyPress?: Function;
-  /**
-   * If true, the html input has a required attribute.
-   * @default false
-   */
-  required?: boolean;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: InputTheme;
-  /**
-   * Type of the input element. It can be a valid HTML5 input type
-   */
-  type?: string;
-  /**
-   * Current value of the input element.
-   */
-  value?: any;
-}
-
-export class Input extends React.Component<InputProps, {}> { }
-
-export default Input;
diff --git a/lib/input/index.js b/lib/input/index.js
deleted file mode 100644
index a8c751634..000000000
--- a/lib/input/index.js
+++ /dev/null
@@ -1,28 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Input = undefined;
-
-var _identifiers = require('../identifiers.js');
-
-var _reactCssThemr = require('react-css-themr');
-
-var _Input = require('./Input.js');
-
-var _FontIcon = require('../font_icon/FontIcon.js');
-
-var _FontIcon2 = _interopRequireDefault(_FontIcon);
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var Input = (0, _Input.inputFactory)(_FontIcon2.default);
-var ThemedInput = (0, _reactCssThemr.themr)(_identifiers.INPUT, _theme2.default, { withRef: true })(Input);
-
-exports.default = ThemedInput;
-exports.Input = ThemedInput;
\ No newline at end of file
diff --git a/lib/input/theme.scss b/lib/input/theme.scss
deleted file mode 100644
index 9e29b9b4a..000000000
--- a/lib/input/theme.scss
+++ /dev/null
@@ -1,156 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.input {
-  position: relative;
-  padding: $input-padding 0;
-  &.withIcon {
-    margin-left: $input-icon-size;
-  }
-}
-
-.icon {
-  position: absolute;
-  top: $input-icon-offset;
-  left: -$input-icon-size;
-  display: block;
-  width: $input-icon-size;
-  height: $input-icon-size;
-  font-size: $input-icon-font-size !important;
-  line-height: $input-icon-size !important;
-  color: $input-text-label-color;
-  text-align: center;
-  transition: color $animation-duration $animation-curve-default;
-}
-
-.inputElement {
-  display: block;
-  width: 100%;
-  padding: $input-field-padding 0;
-  font-size: $input-field-font-size;
-  color: $color-text;
-  background-color: $input-text-background-color;
-  border: 0;
-  border-bottom: 1px solid $input-text-bottom-border-color;
-  outline: none;
-  &:focus:not([disabled]):not([readonly]) {
-    ~ .bar:before, ~ .bar:after {
-      width: 50%;
-    }
-    ~ .label:not(.fixed) {
-      color: $input-text-highlight-color;
-    }
-    ~ .label > .required {
-      color: $input-text-required-color;
-    }
-    ~ .hint {
-      display: block;
-      opacity: $input-hint-opacity;
-    }
-    ~ .icon {
-      color: $input-text-highlight-color;
-    }
-  }
-  &:focus:not([disabled]):not([readonly]), &.filled, &[type="date"], &[type="time"] {
-    ~ .label:not(.fixed) {
-      top: $input-focus-label-top;
-      font-size: $input-label-font-size;
-    }
-    &.filled ~ .hint {
-      opacity: 0;
-    }
-  }
-  &.filled ~ .label.fixed, &.filled ~ .hint {
-    display: none;
-  }
-}
-
-.label {
-  position: absolute;
-  top: $input-padding + (1.5 * $input-field-padding);
-  left: 0;
-  font-size: $input-field-font-size;
-  line-height: $input-field-font-size;
-  color: $input-text-label-color;
-  pointer-events: none;
-  transition-timing-function: $animation-curve-default;
-  transition-duration: $animation-duration;
-  transition-property: top, font-size, color;
-  &.fixed ~ .hint {
-    display: none;
-  }
-}
-
-.hint {
-  position: absolute;
-  top: $input-padding + (1.5 * $input-field-padding);
-  left: 0;
-  font-size: $input-field-font-size;
-  line-height: $input-field-font-size;
-  color: $input-text-label-color;
-  pointer-events: none;
-  opacity: $input-hint-opacity;
-  transition-timing-function: $animation-curve-default;
-  transition-duration: $animation-duration;
-  transition-property: opacity;
-}
-
-.bar {
-  position: relative;
-  display: block;
-  width: 100%;
-  &:before, &:after {
-    @include material-animation-default();
-    position: absolute;
-    bottom: 0;
-    width: 0;
-    height: 2px;
-    content: "";
-    background-color: $input-text-highlight-color;
-    transition-property: width, background-color;
-  }
-  &:before {
-    left: 50%;
-  }
-  &:after {
-    right: 50%;
-  }
-}
-
-.error, .counter {
-  margin-bottom: - $input-underline-height;
-  font-size: $input-label-font-size;
-  line-height: $input-underline-height;
-  color: $input-text-error-color;
-}
-
-.counter {
-  position: absolute;
-  right: 0;
-  color: $input-text-label-color;
-}
-
-.disabled > .inputElement {
-  color: $input-text-disabled-text-color;
-  border-bottom-style: dotted;
-}
-
-.errored {
-  padding-bottom: 0;
-  > .inputElement {
-    margin-top: 1px;
-    border-bottom-color: $input-text-error-color;
-  }
-  > .counter, > .label {
-    color: $input-text-error-color;
-  }
-  > .label > .required {
-    color: $input-text-required-color;
-  }
-}
-
-.hidden {
-  display: none;
-}
diff --git a/lib/layout/Layout.js b/lib/layout/Layout.js
deleted file mode 100644
index 09a844bca..000000000
--- a/lib/layout/Layout.js
+++ /dev/null
@@ -1,48 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Layout = undefined;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _identifiers = require('../identifiers.js');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var Layout = function Layout(_ref) {
-  var className = _ref.className,
-      children = _ref.children,
-      theme = _ref.theme;
-  return _react2.default.createElement(
-    'div',
-    { 'data-react-toolbox': 'layout', className: (0, _classnames2.default)(theme.layout, className) },
-    _react2.default.Children.map(children, function (child) {
-      return _react2.default.cloneElement(child, { theme: theme });
-    })
-  );
-};
-
-Layout.propTypes = {
-  children: _react.PropTypes.oneOfType([_react.PropTypes.arrayOf(_react.PropTypes.element), _react.PropTypes.element]),
-  className: _react.PropTypes.string,
-  theme: _react.PropTypes.shape({
-    layout: _react.PropTypes.string
-  })
-};
-
-Layout.defaultProps = {
-  className: ''
-};
-
-exports.default = (0, _reactCssThemr.themr)(_identifiers.LAYOUT)(Layout);
-exports.Layout = Layout;
\ No newline at end of file
diff --git a/lib/layout/NavDrawer.js b/lib/layout/NavDrawer.js
deleted file mode 100644
index 4e4cfbe2d..000000000
--- a/lib/layout/NavDrawer.js
+++ /dev/null
@@ -1,87 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.NavDrawer = undefined;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames3 = require('classnames');
-
-var _classnames4 = _interopRequireDefault(_classnames3);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var NavDrawer = function NavDrawer(_ref) {
-  var _classnames;
-
-  var active = _ref.active,
-      children = _ref.children,
-      className = _ref.className,
-      onOverlayClick = _ref.onOverlayClick,
-      permanentAt = _ref.permanentAt,
-      pinned = _ref.pinned,
-      scrollY = _ref.scrollY,
-      theme = _ref.theme,
-      width = _ref.width;
-
-  var rootClasses = (0, _classnames4.default)([theme.navDrawer], (_classnames = {}, _defineProperty(_classnames, theme[permanentAt + 'Permanent'], permanentAt), _defineProperty(_classnames, theme.wide, width === 'wide'), _defineProperty(_classnames, theme.active, active), _defineProperty(_classnames, theme.pinned, pinned), _classnames), className);
-
-  var drawerClasses = (0, _classnames4.default)(theme.drawerContent, _defineProperty({}, theme.scrollY, scrollY));
-
-  return _react2.default.createElement(
-    'div',
-    { 'data-react-toolbox': 'nav-drawer', className: rootClasses },
-    _react2.default.createElement('div', { 'data-react-toolbox': 'nav-drawer-scrim', className: theme.scrim, onClick: onOverlayClick }),
-    _react2.default.createElement(
-      'aside',
-      { 'data-react-toolbox': 'nav-drawer-content', className: drawerClasses },
-      children
-    )
-  );
-};
-
-NavDrawer.propTypes = {
-  active: _react.PropTypes.bool,
-  children: _react.PropTypes.any,
-  className: _react.PropTypes.string,
-  onOverlayClick: _react.PropTypes.func,
-  permanentAt: _react.PropTypes.oneOf(['sm', 'smTablet', 'md', 'lg', 'lgTablet', 'xl', 'xxl', 'xxxl']),
-  pinned: _react.PropTypes.bool,
-  scrollY: _react.PropTypes.bool,
-  theme: _react.PropTypes.shape({
-    active: _react.PropTypes.string,
-    drawerContent: _react.PropTypes.string,
-    lgPermanent: _react.PropTypes.string,
-    mdPermanent: _react.PropTypes.string,
-    navDrawer: _react.PropTypes.string,
-    pinned: _react.PropTypes.string,
-    scrim: _react.PropTypes.string,
-    scrollY: _react.PropTypes.string,
-    smPermanent: _react.PropTypes.string,
-    wide: _react.PropTypes.string,
-    xlPermanent: _react.PropTypes.string,
-    xxlPermanent: _react.PropTypes.string,
-    xxxlPermanent: _react.PropTypes.string
-  }),
-  width: _react.PropTypes.oneOf(['normal', 'wide'])
-};
-
-NavDrawer.defaultProps = {
-  active: false,
-  className: '',
-  scrollY: false,
-  width: 'normal'
-};
-
-exports.default = (0, _reactCssThemr.themr)(_identifiers.LAYOUT)(NavDrawer);
-exports.NavDrawer = NavDrawer;
\ No newline at end of file
diff --git a/lib/layout/Panel.js b/lib/layout/Panel.js
deleted file mode 100644
index 23a00d527..000000000
--- a/lib/layout/Panel.js
+++ /dev/null
@@ -1,57 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Panel = undefined;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var Panel = function Panel(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      onScroll = _ref.onScroll,
-      scrollY = _ref.scrollY,
-      theme = _ref.theme;
-
-  var _className = (0, _classnames3.default)(theme.panel, _defineProperty({}, theme.scrollY, scrollY), className);
-
-  return _react2.default.createElement(
-    'div',
-    { 'data-react-toolbox': 'panel', onScroll: onScroll, className: _className },
-    children
-  );
-};
-
-Panel.propTypes = {
-  children: _react.PropTypes.any,
-  className: _react.PropTypes.string,
-  onScroll: _react.PropTypes.func,
-  scrollY: _react.PropTypes.bool,
-  theme: _react.PropTypes.shape({
-    panel: _react.PropTypes.string,
-    scrollY: _react.PropTypes.string
-  })
-};
-
-Panel.defaultProps = {
-  className: '',
-  scrollY: false
-};
-
-exports.default = (0, _reactCssThemr.themr)(_identifiers.LAYOUT)(Panel);
-exports.Panel = Panel;
\ No newline at end of file
diff --git a/lib/layout/Sidebar.js b/lib/layout/Sidebar.js
deleted file mode 100644
index d1c5a2513..000000000
--- a/lib/layout/Sidebar.js
+++ /dev/null
@@ -1,69 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Sidebar = undefined;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames3 = require('classnames');
-
-var _classnames4 = _interopRequireDefault(_classnames3);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var Sidebar = function Sidebar(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      pinned = _ref.pinned,
-      scrollY = _ref.scrollY,
-      theme = _ref.theme,
-      width = _ref.width;
-
-  var wrapperClasses = (0, _classnames4.default)(theme.sidebar, theme['width-' + width], _defineProperty({}, theme.pinned, pinned), className);
-
-  var innerClasses = (0, _classnames4.default)(theme.sidebarContent, _defineProperty({}, theme.scrollY, scrollY));
-
-  return _react2.default.createElement(
-    'div',
-    { 'data-react-toolbox': 'sidebar', className: wrapperClasses },
-    _react2.default.createElement(
-      'aside',
-      { 'data-react-toolbox': 'sidebar-content', className: innerClasses },
-      children
-    )
-  );
-};
-
-Sidebar.propTypes = {
-  children: _react.PropTypes.any,
-  className: _react.PropTypes.string,
-  pinned: _react.PropTypes.bool,
-  scrollY: _react.PropTypes.bool,
-  theme: _react.PropTypes.shape({
-    pinned: _react.PropTypes.string,
-    scrollY: _react.PropTypes.string,
-    sidebar: _react.PropTypes.string,
-    sidebarContent: _react.PropTypes.string
-  }),
-  width: _react.PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 25, 33, 50, 66, 75, 100])
-};
-
-Sidebar.defaultProps = {
-  className: '',
-  pinned: false,
-  scrollY: false,
-  width: 5
-};
-
-exports.default = (0, _reactCssThemr.themr)(_identifiers.LAYOUT)(Sidebar);
-exports.Sidebar = Sidebar;
\ No newline at end of file
diff --git a/lib/layout/_config.scss b/lib/layout/_config.scss
deleted file mode 100644
index 16f778f18..000000000
--- a/lib/layout/_config.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-$drawer-background-color: $palette-grey-50 !default;
-$drawer-border-color: $palette-grey-300 !default;
-$drawer-text-color: $palette-grey-800 !default;
-
-$drawer-overlay-color: $color-black !default;
-$drawer-overlay-opacity: .6 !default;
-
-// from: https://material.google.com/layout/structure.html#structure-side-nav
-$navigation-drawer-desktop-width: 5 * $standard-increment-desktop !default;
-$navigation-drawer-max-desktop-width: 40 * $unit !default;
-
-// Mobile:
-// Width = Screen width − 56 dp
-// Maximum width: 320dp
-$navigation-drawer-mobile-width: 5 * $standard-increment-mobile !default;
-
-// sass doesn't like use of variable here: calc(100% - $standard-increment-mobile);
-$navigation-drawer-max-mobile-width: calc(100% - 5.6rem) !default;
diff --git a/lib/layout/_mixins.scss b/lib/layout/_mixins.scss
deleted file mode 100644
index e998d174f..000000000
--- a/lib/layout/_mixins.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-@mixin open() {
-  transition-delay: $animation-delay;
-  .drawerContent {
-    pointer-events: all;
-    transition-delay: $animation-delay;
-    transform: translateX(0);
-  }
-}
-
-@mixin permanent() {
-  @include open();
-
-  width: $navigation-drawer-desktop-width;
-  max-width: $navigation-drawer-desktop-width;
-
-  &.wide {
-    width: $navigation-drawer-max-desktop-width;
-    max-width: $navigation-drawer-max-desktop-width;
-  }
-
-  &.active {
-    & > .scrim {
-      width: 0;
-      background-color: rgba($drawer-overlay-color, 0);
-    }
-  }
-}
diff --git a/lib/layout/index.d.ts b/lib/layout/index.d.ts
deleted file mode 100644
index 10004fc25..000000000
--- a/lib/layout/index.d.ts
+++ /dev/null
@@ -1,194 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface LayoutTheme {
-  /**
-   * Class used in the container to position and align inner items.
-   */
-  layout?: string;
-}
-
-interface LayoutProps extends ReactToolbox.Props {
-  /**
-   * Children to pass through the component.
-   */
-  children?: [NavDrawer | Panel | Sidebar];
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: LayoutTheme;
-}
-
-export class Layout extends React.Component<LayoutProps, {}> { }
-
-export interface NavDrawerTheme {
-  /**
-   * Used when the drawer is active.
-   */
-  active?: string;
-  /**
-   * Used for the content of the drawer.
-   */
-  drawerContent?: string;
-  /**
-   * Added to the root class for large drawer.
-   */
-  lgPermangent?: string;
-  /**
-   * Added to the root class for medium drawer.
-   */
-  mdPermangent?: string;
-  /**
-   * Root class for the drawer.
-   */
-  navDrawer?: string;
-  /**
-   * Added to the root class if positioning is pinned.
-   */
-  pinned?: string;
-  /**
-   * Used as a wrapper for the drawer content.
-   */
-  scrim?: string;
-  /**
-   * Added to the drawer content if its scrollable.
-   */
-  scrollY?: string;
-  /**
-   * Added to the root class for small drawer.
-   */
-  smPermanent?: string;
-  /**
-   * Added to the root class if width is wide.
-   */
-  wide?: string;
-  /**
-   * Added to the root class for extra big drawer.
-   */
-  xlPermanent?: string;
-  /**
-   * Added to the root class for super big drawer.
-   */
-  xxlPermangent?: string;
-  /**
-   * Added to the root class for largest possible drawer.
-   */
-  xxxlPermangent?: string;
-}
-
-interface NavDrawerProps extends ReactToolbox.Props {
-  /**
-   * If true, the drawer will be shown as an overlay.
-   * @default false
-   */
-  active?: boolean;
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * Callback function to be invoked when the overlay is clicked.
-   */
-  onOverlayClick?: Function;
-  /**
-   * The breakpoint at which the drawer is automatically pinned.
-   */
-  permanentAt?: "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
-  /**
-   * If true, the drawer will be pinned open. pinned takes precedence over active.
-   * @default false
-   */
-  pinned?: boolean;
-  /**
-   * If true, the drawer will vertically scroll all content.
-   * @default false
-   */
-  scrollY?: boolean;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: NavDrawerTheme;
-  /**
-   * 320px or 400px. Only applicable above the sm breakpoint.
-   * @default normal
-   */
-  width?: "normal" | "wide";
-}
-
-export class NavDrawer extends React.Component<NavDrawerProps, {}> { }
-
-export interface PanelTheme {
-  /**
-   * Used as the root class of the panel component.
-   */
-  panel?: string;
-  /**
-   * Used in case the panel is scrollable.
-   */
-  scrollY?: string;
-}
-
-interface PanelProps extends ReactToolbox.Props {
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * If true, the panel will vertically scroll all content.
-   * @default false
-   */
-  scrollY?: boolean;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: PanelTheme;
-}
-
-export class Panel extends React.Component<PanelProps, {}> { }
-
-export interface SidebarTheme {
-  /**
-   * Added to the root class if sidebar is pinned.
-   */
-  pinned?: string;
-  /**
-   * Add to the content of sidebar if its scrollable.
-   */
-  scrollY?: string;
-  /**
-   * Root class of the sidebar.
-   */
-  sidebar?: string;
-  /**
-   * Used in for the content element of the sidebar.
-   */
-  sidebarContent?: string;
-}
-
-interface SidebarProps extends ReactToolbox.Props {
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * If true, the sidebar will be pinned open.
-   * @default false
-   */
-  pinned?: boolean;
-  /**
-   * If true, the sidebar will vertically scroll all content
-   * @default false
-   */
-  scrollY?: boolean;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: SidebarTheme;
-  /**
-   * Width in standard increments (1-12) or percentage (25, 33, 50, 66, 75, 100)
-   * @default 5
-   */
-  width?: number; // 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 25 | 33 | 50 | 66 | 75 | 100;
-}
-
-export class Sidebar extends React.Component<SidebarProps, {}> { }
diff --git a/lib/layout/index.js b/lib/layout/index.js
deleted file mode 100644
index 47bfa886a..000000000
--- a/lib/layout/index.js
+++ /dev/null
@@ -1,34 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Sidebar = exports.NavDrawer = exports.Panel = exports.Layout = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Layout = require('./Layout.js');
-
-var _Panel = require('./Panel.js');
-
-var _NavDrawer = require('./NavDrawer.js');
-
-var _Sidebar = require('./Sidebar.js');
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var ThemedLayout = (0, _reactCssThemr.themr)(_identifiers.LAYOUT, _theme2.default)(_Layout.Layout);
-var ThemedPanel = (0, _reactCssThemr.themr)(_identifiers.LAYOUT, _theme2.default)(_Panel.Panel);
-var ThemedNavDrawer = (0, _reactCssThemr.themr)(_identifiers.LAYOUT, _theme2.default)(_NavDrawer.NavDrawer);
-var ThemedSidebar = (0, _reactCssThemr.themr)(_identifiers.LAYOUT, _theme2.default)(_Sidebar.Sidebar);
-
-exports.Layout = ThemedLayout;
-exports.Panel = ThemedPanel;
-exports.NavDrawer = ThemedNavDrawer;
-exports.Sidebar = ThemedSidebar;
\ No newline at end of file
diff --git a/lib/layout/theme.scss b/lib/layout/theme.scss
deleted file mode 100644
index 405d5121b..000000000
--- a/lib/layout/theme.scss
+++ /dev/null
@@ -1,325 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-@import "http://github.com/mixins";
-
-.layout {
-  position: relative;
-  display: flex;
-  width: 100%;
-  height: 100%;
-  flex-direction: row;
-  align-items: stretch;
-  justify-content: space-between;
-  overflow-y: hidden;
-
-  .navDrawer {
-    width: 0;
-    min-width: 0;
-    height: 100%;
-    overflow-x: hidden;
-    overflow-y: hidden;
-    transition-timing-function: $animation-curve-default;
-    transition-duration: $animation-duration;
-    transition-property: width, min-width;
-
-    .scrim {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      z-index: $z-index-higher;
-      width: 0;
-      height: 100%;
-      background-color: rgba($drawer-overlay-color, 0);
-      transition: background-color $animation-duration $animation-curve-default, width 10ms linear $animation-duration;
-    }
-
-    .drawerContent {
-      @include shadow-2dp();
-      position: absolute;
-      z-index: $z-index-highest;
-      display: flex;
-      width: $navigation-drawer-mobile-width;
-      max-width: $navigation-drawer-max-mobile-width;
-      height: 100%;
-      flex-direction: column;
-      align-items: stretch;
-      justify-content: space-between;
-      overflow-x: hidden;
-      overflow-y: hidden;
-      color: $drawer-text-color;
-      pointer-events: none;
-      background-color: $drawer-background-color;
-      border-right: 1px solid $drawer-border-color;
-      transition: transform $animation-duration $animation-curve-default;
-      transform: translateX(-100%);
-
-      &.scrollY {
-        overflow-y: auto;
-      }
-    }
-
-    &.pinned {
-      @include open();
-      width: $navigation-drawer-mobile-width;
-      max-width: $navigation-drawer-max-mobile-width;
-    }
-
-    &.active {
-      &:not(.pinned) {
-        @include open();
-        .scrim {
-          width: 100%;
-          background-color: rgba($drawer-overlay-color, $drawer-overlay-opacity);
-          transition: background-color $animation-duration $animation-curve-default;
-        }
-      }
-    }
-
-    // Larger than mobile width drawer
-    @media screen and (min-width: $layout-breakpoint-xs) {
-      &.pinned {
-        width: $navigation-drawer-desktop-width;
-        max-width: $navigation-drawer-desktop-width;
-      }
-
-      .drawerContent {
-        width: $navigation-drawer-desktop-width;
-        max-width: $navigation-drawer-desktop-width;
-      }
-
-      &.wide {
-        &.pinned {
-          width: $navigation-drawer-max-desktop-width;
-          max-width: $navigation-drawer-max-desktop-width;
-        }
-
-        .drawerContent {
-          width: $navigation-drawer-max-desktop-width;
-          max-width: $navigation-drawer-max-desktop-width;
-        }
-      }
-    }
-
-    // Permanent screen, ignore .active and make part of layout
-    @media screen and (min-width: $layout-breakpoint-sm) {
-      &.smPermanent {
-        @include permanent();
-      }
-    }
-
-    @media screen and (min-width: $layout-breakpoint-sm-tablet) {
-      &.smTabletPermanent {
-        @include permanent();
-      }
-    }
-
-    @media screen and (min-width: $layout-breakpoint-md) {
-      &.mdPermanent {
-        @include permanent();
-      }
-    }
-
-    @media screen and (min-width: $layout-breakpoint-lg) {
-      &.lgPermanent {
-        @include permanent();
-      }
-    }
-
-    @media screen and (min-width: $layout-breakpoint-lg-tablet) {
-      &.lgTabletPermanent {
-        @include permanent();
-      }
-    }
-
-    @media screen and (min-width: $layout-breakpoint-xl) {
-      &.xlPermanent {
-        @include permanent();
-      }
-    }
-
-    @media screen and (min-width: $layout-breakpoint-xxl) {
-      &.xxlPermanent {
-        @include permanent();
-      }
-    }
-
-    @media screen and (min-width: $layout-breakpoint-xxxl) {
-      &.xxxlPermanent {
-        @include permanent();
-      }
-    }
-  }
-
-  & .layout {
-    .scrim {
-      z-index: $z-index-highest - 1;
-    }
-    & .layout {
-      .scrim {
-        z-index: $z-index-highest - 2;
-      }
-    }
-  }
-
-  .panel {
-    position: relative;
-    display: flex;
-    height: 100%;
-    flex: 1;
-    flex-direction: column;
-    align-items: stretch;
-    justify-content: space-between;
-    overflow-y: hidden;
-
-    &.scrollY {
-      overflow-y: auto;
-    }
-  }
-
-  .sidebar {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    z-index: $z-index-highest - 1;
-    width: 0;
-    height: 100%;
-    overflow-x: hidden;
-    overflow-y: hidden;
-    color: $drawer-text-color;
-    background-color: $drawer-background-color;
-    transition-timing-function: $animation-curve-default;
-    transition-duration: $animation-duration;
-    transition-property: width;
-
-    .sidebarContent {
-      display: flex;
-      height: 100%;
-      flex-direction: column;
-      align-items: stretch;
-      justify-content: space-between;
-      overflow-y: hidden;
-
-      &.scrollY {
-        overflow-y: auto;
-      }
-    }
-
-    $increments: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12);
-
-    @each $increment in $increments {
-      &.width-#{$increment} {
-        $mobile: $standard-increment-mobile * $increment;
-        $desktop: $standard-increment-desktop * $increment;
-
-        .sidebarContent {
-          min-width: 100%;
-        }
-
-        &.pinned {
-          width: 100%;
-        }
-
-        @if $increment < 10 {
-          @media screen and (min-width: $layout-breakpoint-xs) and (orientation: landscape) {
-            position: relative;
-
-            .sidebarContent {
-              min-width: $mobile;
-            }
-
-            &.pinned {
-              width: $mobile;
-            }
-          }
-
-          @media screen and (min-width: $layout-breakpoint-xs) and (orientation: portrait) {
-            position: relative;
-
-            .sidebarContent {
-              min-width: $desktop;
-            }
-
-            &.pinned {
-              width: $desktop;
-            }
-          }
-        }
-
-        @if $increment < 11 {
-          @media screen and (min-width: $layout-breakpoint-sm-tablet) {
-            position: relative;
-
-            .sidebarContent {
-              min-width: $desktop;
-            }
-
-            &.pinned {
-              width: $desktop;
-            }
-          }
-        }
-
-        @media screen and (min-width: $layout-breakpoint-sm) {
-          position: relative;
-
-          .sidebarContent {
-            min-width: $desktop;
-          }
-
-          &.pinned {
-            width: $desktop;
-          }
-        }
-      }
-    }
-
-
-    $percentages: (25, 33, 50, 66, 75);
-
-    &.width-100 {
-      position: absolute;
-
-      .sidebarContent {
-        min-width: 100%;
-      }
-
-      &.pinned {
-        width: 100%;
-      }
-    }
-
-    @each $pct in $percentages {
-      &.width-#{$pct} {
-        position: absolute;
-
-        .sidebarContent {
-          min-width: 100%;
-        }
-
-        &.pinned {
-          width: 100%;
-        }
-      }
-    }
-
-    @media screen and (min-width: $layout-breakpoint-sm-tablet) {
-      @each $pct in $percentages {
-        &.width-#{$pct} {
-          position: relative;
-
-          .sidebarContent {
-            min-width: $pct * 1%;
-          }
-
-          &.pinned {
-            width: $pct * 1%;
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/lib/link/Link.js b/lib/link/Link.js
deleted file mode 100644
index 9fbe6ab27..000000000
--- a/lib/link/Link.js
+++ /dev/null
@@ -1,82 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Link = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _FontIcon = require('../font_icon/FontIcon.js');
-
-var _FontIcon2 = _interopRequireDefault(_FontIcon);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-var Link = function Link(_ref) {
-  var active = _ref.active,
-      children = _ref.children,
-      className = _ref.className,
-      count = _ref.count,
-      icon = _ref.icon,
-      label = _ref.label,
-      theme = _ref.theme,
-      others = _objectWithoutProperties(_ref, ['active', 'children', 'className', 'count', 'icon', 'label', 'theme']);
-
-  var _className = (0, _classnames3.default)(theme.link, _defineProperty({}, theme.active, active), className);
-
-  return _react2.default.createElement(
-    'a',
-    _extends({ 'data-react-toolbox': 'link', className: _className }, others),
-    icon ? _react2.default.createElement(_FontIcon2.default, { className: theme.icon, value: icon }) : null,
-    label ? _react2.default.createElement(
-      'abbr',
-      null,
-      label
-    ) : null,
-    count && parseInt(count) !== 0 ? _react2.default.createElement(
-      'small',
-      null,
-      count
-    ) : null,
-    children
-  );
-};
-
-Link.propTypes = {
-  active: _react.PropTypes.bool,
-  children: _react.PropTypes.node,
-  className: _react.PropTypes.string,
-  count: _react.PropTypes.number,
-  icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-  label: _react.PropTypes.string,
-  theme: _react.PropTypes.shape({
-    active: _react.PropTypes.string,
-    icon: _react.PropTypes.string,
-    link: _react.PropTypes.string
-  })
-};
-
-Link.defaultProps = {
-  active: false,
-  className: ''
-};
-
-exports.default = (0, _reactCssThemr.themr)(_identifiers.LINK)(Link);
-exports.Link = Link;
\ No newline at end of file
diff --git a/lib/link/index.d.ts b/lib/link/index.d.ts
deleted file mode 100644
index 67da3fa11..000000000
--- a/lib/link/index.d.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface LinkTheme {
-  /**
-   * Added to the root element if the Link is active.
-   */
-  active?: string;
-  /**
-   * Used for the icon element if it's present.
-   */
-  icon?: string;
-  /**
-   * Used for the root element.
-   */
-  link?: string;
-}
-
-interface LinkProps extends ReactToolbox.Props {
-  /**
-   * If true, adds active style to link.
-   * @default false
-   */
-  active?: boolean;
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * Sets a count number.
-   */
-  count?: number;
-  /**
-   * Sets the anchor link.
-   */
-  href?: string;
-  /**
-   * An icon key string to include a FontIcon component in front of the text.
-   */
-  icon?: React.ReactNode | string;
-  /**
-   * The text string used for the text content of the link.
-   */
-  label?: string;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: LinkTheme;
-}
-
-export class Link extends React.Component<LinkProps, {}> { }
diff --git a/lib/link/index.js b/lib/link/index.js
deleted file mode 100644
index a0e50a865..000000000
--- a/lib/link/index.js
+++ /dev/null
@@ -1,23 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Link = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Link = require('./Link.js');
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var ThemedLink = (0, _reactCssThemr.themr)(_identifiers.LINK, _theme2.default)(_Link.Link);
-
-exports.default = ThemedLink;
-exports.Link = ThemedLink;
\ No newline at end of file
diff --git a/lib/link/theme.scss b/lib/link/theme.scss
deleted file mode 100644
index 11eb90844..000000000
--- a/lib/link/theme.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-
-.icon {
-  margin-right: $unit;
-  font-size: 1.8 * $unit;
-}
-
-.link {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-content: center;
-  align-items: center;
-  justify-content: center;
-  line-height: 1.5;
-  cursor: pointer;
-  transition: opacity $animation-duration $animation-curve-default;
-  &:not(.active) {
-    opacity: .5;
-  }
-  &:hover, &:active {
-    opacity: 1;
-  }
-  > * {
-    vertical-align: middle;
-  }
-  > abbr {
-    text-transform: capitalize;
-  }
-  > small {
-    margin-left: .8 * $unit;
-    font-size: $font-size-tiny;
-    text-align: center;
-  }
-}
diff --git a/lib/list/List.js b/lib/list/List.js
deleted file mode 100644
index d0859031e..000000000
--- a/lib/list/List.js
+++ /dev/null
@@ -1,99 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.List = exports.listFactory = undefined;
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _ListItem = require('./ListItem.js');
-
-var _ListItem2 = _interopRequireDefault(_ListItem);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var mergeProp = function mergeProp(propName, child, parent) {
-  return child[propName] !== undefined ? child[propName] : parent[propName];
-};
-
-var factory = function factory(ListItem) {
-  var List = function (_Component) {
-    _inherits(List, _Component);
-
-    function List() {
-      _classCallCheck(this, List);
-
-      return _possibleConstructorReturn(this, (List.__proto__ || Object.getPrototypeOf(List)).apply(this, arguments));
-    }
-
-    _createClass(List, [{
-      key: 'renderItems',
-      value: function renderItems() {
-        var _this2 = this;
-
-        return _react2.default.Children.map(this.props.children, function (item) {
-          if (item.type === ListItem) {
-            var selectable = mergeProp('selectable', item.props, _this2.props);
-            var ripple = mergeProp('ripple', item.props, _this2.props);
-            return _react2.default.cloneElement(item, { selectable: selectable, ripple: ripple });
-          } else {
-            return _react2.default.cloneElement(item);
-          }
-        });
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        return _react2.default.createElement(
-          'ul',
-          { 'data-react-toolbox': 'list', className: (0, _classnames2.default)(this.props.theme.list, this.props.className) },
-          this.renderItems()
-        );
-      }
-    }]);
-
-    return List;
-  }(_react.Component);
-
-  List.propTypes = {
-    children: _react.PropTypes.node,
-    className: _react.PropTypes.string,
-    ripple: _react.PropTypes.bool,
-    selectable: _react.PropTypes.bool,
-    theme: _react.PropTypes.shape({
-      list: _react.PropTypes.string
-    })
-  };
-  List.defaultProps = {
-    className: '',
-    ripple: false,
-    selectable: false
-  };
-
-
-  return List;
-};
-
-var List = factory(_ListItem2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(List);
-exports.listFactory = factory;
-exports.List = List;
\ No newline at end of file
diff --git a/lib/list/ListCheckbox.js b/lib/list/ListCheckbox.js
deleted file mode 100644
index 6ce2097b7..000000000
--- a/lib/list/ListCheckbox.js
+++ /dev/null
@@ -1,93 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ListCheckbox = exports.listCheckboxFactory = undefined;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Checkbox = require('../checkbox/Checkbox.js');
-
-var _Checkbox2 = _interopRequireDefault(_Checkbox);
-
-var _ListItemContent = require('./ListItemContent.js');
-
-var _ListItemContent2 = _interopRequireDefault(_ListItemContent);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var factory = function factory(Checkbox, ListItemContent) {
-  var ListCheckbox = function ListCheckbox(_ref) {
-    var caption = _ref.caption,
-        checked = _ref.checked,
-        className = _ref.className,
-        disabled = _ref.disabled,
-        legend = _ref.legend,
-        name = _ref.name,
-        onBlur = _ref.onBlur,
-        onChange = _ref.onChange,
-        onFocus = _ref.onFocus,
-        theme = _ref.theme;
-
-    var _className = (0, _classnames3.default)(theme.item, theme.checkboxItem, _defineProperty({}, theme.disabled, disabled), className);
-
-    return _react2.default.createElement(
-      'li',
-      { className: _className },
-      _react2.default.createElement(Checkbox, {
-        checked: checked,
-        className: theme.checkbox,
-        disabled: disabled,
-        label: _react2.default.createElement(ListItemContent, { caption: caption, legend: legend }),
-        name: name,
-        onBlur: onBlur,
-        onChange: onChange,
-        onFocus: onFocus
-      })
-    );
-  };
-
-  ListCheckbox.propTypes = {
-    caption: _react.PropTypes.string,
-    checked: _react.PropTypes.bool,
-    className: _react.PropTypes.string,
-    disabled: _react.PropTypes.bool,
-    legend: _react.PropTypes.string,
-    name: _react.PropTypes.string,
-    onBlur: _react.PropTypes.func,
-    onChange: _react.PropTypes.func,
-    onFocus: _react.PropTypes.func,
-    theme: _react.PropTypes.shape({
-      checkbox: _react.PropTypes.string,
-      checkboxItem: _react.PropTypes.string,
-      disabled: _react.PropTypes.string,
-      item: _react.PropTypes.string
-    })
-  };
-
-  ListCheckbox.defaultProps = {
-    checked: false,
-    disabled: false
-  };
-
-  return ListCheckbox;
-};
-
-var ListCheckbox = factory(_Checkbox2.default, _ListItemContent2.default);
-
-exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListCheckbox);
-exports.listCheckboxFactory = factory;
-exports.ListCheckbox = ListCheckbox;
\ No newline at end of file
diff --git a/lib/list/ListDivider.js b/lib/list/ListDivider.js
deleted file mode 100644
index 4f2a1d143..000000000
--- a/lib/list/ListDivider.js
+++ /dev/null
@@ -1,37 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ListDivider = undefined;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var ListDivider = function ListDivider(_ref) {
-  var inset = _ref.inset,
-      theme = _ref.theme;
-  return _react2.default.createElement('hr', { className: inset ? theme.divider + ' ' + theme.inset : theme.divider });
-};
-
-ListDivider.propTypes = {
-  inset: _react.PropTypes.bool,
-  theme: _react.PropTypes.shape({
-    divider: _react.PropTypes.string,
-    inset: _react.PropTypes.string
-  })
-};
-
-ListDivider.defaultProps = {
-  inset: false
-};
-
-exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListDivider);
-exports.ListDivider = ListDivider;
\ No newline at end of file
diff --git a/lib/list/ListItem.js b/lib/list/ListItem.js
deleted file mode 100644
index 5f8f58b72..000000000
--- a/lib/list/ListItem.js
+++ /dev/null
@@ -1,156 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ListItem = exports.listItemFactory = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _ListItemContent = require('./ListItemContent.js');
-
-var _ListItemContent2 = _interopRequireDefault(_ListItemContent);
-
-var _ListItemLayout = require('./ListItemLayout.js');
-
-var _ListItemLayout2 = _interopRequireDefault(_ListItemLayout);
-
-var _Ripple = require('../ripple/Ripple.js');
-
-var _Ripple2 = _interopRequireDefault(_Ripple);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(ripple, ListItemLayout, ListItemContent) {
-  var ListItem = function (_Component) {
-    _inherits(ListItem, _Component);
-
-    function ListItem() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, ListItem);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ListItem.__proto__ || Object.getPrototypeOf(ListItem)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
-        if (_this.props.onClick && !_this.props.disabled) {
-          _this.props.onClick(event);
-        }
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(ListItem, [{
-      key: 'groupChildren',
-      value: function groupChildren() {
-        var children = {
-          leftActions: [],
-          rightActions: [],
-          ignored: []
-        };
-
-        _react2.default.Children.forEach(this.props.children, function (child, i) {
-          if (!_react2.default.isValidElement(child)) {
-            return;
-          }
-
-          var _child$props = child.props,
-              listItemIgnore = _child$props.listItemIgnore,
-              rest = _objectWithoutProperties(_child$props, ['listItemIgnore']);
-
-          var strippedChild = _extends({}, child, { props: rest });
-
-          if (listItemIgnore) {
-            children.ignored.push(strippedChild);
-            return;
-          }
-          if (child.type === ListItemContent) {
-            children.itemContent = strippedChild;
-            return;
-          }
-          var bucket = children.itemContent ? 'rightActions' : 'leftActions';
-          children[bucket].push(_extends({}, strippedChild, { key: i }));
-        });
-
-        return children;
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var _props = this.props,
-            className = _props.className,
-            onMouseDown = _props.onMouseDown,
-            onTouchStart = _props.onTouchStart,
-            to = _props.to,
-            onClick = _props.onClick,
-            hasRipple = _props.ripple,
-            theme = _props.theme,
-            other = _objectWithoutProperties(_props, ['className', 'onMouseDown', 'onTouchStart', 'to', 'onClick', 'ripple', 'theme']); //eslint-disable-line no-unused-vars
-
-
-        var children = this.groupChildren();
-        var content = _react2.default.createElement(ListItemLayout, _extends({ theme: theme }, children, other));
-        return _react2.default.createElement(
-          'li',
-          { className: theme.listItem + ' ' + className, onClick: this.handleClick, onMouseDown: onMouseDown, onTouchStart: onTouchStart },
-          to ? _react2.default.createElement(
-            'a',
-            { href: this.props.to },
-            content
-          ) : content,
-          children.ignored
-        );
-      }
-    }]);
-
-    return ListItem;
-  }(_react.Component);
-
-  ListItem.propTypes = {
-    children: _react.PropTypes.any,
-    className: _react.PropTypes.string,
-    disabled: _react.PropTypes.bool,
-    onClick: _react.PropTypes.func,
-    ripple: _react.PropTypes.bool,
-    theme: _react.PropTypes.shape({
-      listItem: _react.PropTypes.string
-    }),
-    to: _react.PropTypes.string
-  };
-  ListItem.defaultProps = {
-    className: '',
-    disabled: false,
-    ripple: false
-  };
-
-
-  return ripple(ListItem);
-};
-
-var ripple = (0, _Ripple2.default)({ centered: false, listItemIgnore: true });
-var ListItem = factory(ripple, _ListItemLayout2.default, _ListItemContent2.default);
-
-exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListItem);
-exports.listItemFactory = factory;
-exports.ListItem = ListItem;
\ No newline at end of file
diff --git a/lib/list/ListItemAction.js b/lib/list/ListItemAction.js
deleted file mode 100644
index a2e40dd83..000000000
--- a/lib/list/ListItemAction.js
+++ /dev/null
@@ -1,44 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ListItemAction = undefined;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var ListItemAction = function ListItemAction(_ref) {
-  var action = _ref.action,
-      theme = _ref.theme;
-  var _action$props = action.props,
-      onClick = _action$props.onClick,
-      onMouseDown = _action$props.onMouseDown;
-
-  var stopRipple = onClick && !onMouseDown;
-  var stop = function stop(e) {
-    return e.stopPropagation();
-  };
-  return _react2.default.createElement(
-    'span',
-    { className: theme.itemAction, onMouseDown: stopRipple && stop, onClick: onClick && stop },
-    action
-  );
-};
-
-ListItemAction.propTypes = {
-  action: _react.PropTypes.object,
-  theme: _react.PropTypes.shape({
-    itemAction: _react.PropTypes.string
-  })
-};
-
-exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListItemAction);
-exports.ListItemAction = ListItemAction;
\ No newline at end of file
diff --git a/lib/list/ListItemActions.js b/lib/list/ListItemActions.js
deleted file mode 100644
index d19790595..000000000
--- a/lib/list/ListItemActions.js
+++ /dev/null
@@ -1,56 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ListItemActions = exports.listItemActionsFactory = undefined;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _ListItemAction = require('./ListItemAction.js');
-
-var _ListItemAction2 = _interopRequireDefault(_ListItemAction);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var factory = function factory(ListItemAction) {
-  var ListItemActions = function ListItemActions(_ref) {
-    var type = _ref.type,
-        children = _ref.children,
-        theme = _ref.theme;
-
-    var validChildren = _react2.default.Children.toArray(children).filter(function (c) {
-      return _react2.default.isValidElement(c);
-    });
-
-    return _react2.default.createElement(
-      'span',
-      { className: theme[type] },
-      validChildren.map(function (action, i) {
-        return _react2.default.createElement(ListItemAction, { key: i, theme: theme, action: action });
-      })
-    );
-  };
-
-  ListItemActions.propTypes = {
-    children: _react.PropTypes.any,
-    theme: _react.PropTypes.shape({
-      left: _react.PropTypes.string,
-      right: _react.PropTypes.string
-    }),
-    type: _react.PropTypes.oneOf(['left', 'right'])
-  };
-
-  return ListItemActions;
-};
-
-var ListItemActions = factory(_ListItemAction2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListItemActions);
-exports.listItemActionsFactory = factory;
-exports.ListItemActions = ListItemActions;
\ No newline at end of file
diff --git a/lib/list/ListItemContent.js b/lib/list/ListItemContent.js
deleted file mode 100644
index 6f51077e2..000000000
--- a/lib/list/ListItemContent.js
+++ /dev/null
@@ -1,116 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ListItemContent = exports.listItemContentFactory = undefined;
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _ListItemText = require('./ListItemText.js');
-
-var _ListItemText2 = _interopRequireDefault(_ListItemText);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var types = ['auto', 'normal', 'large'];
-
-var factory = function factory(ListItemText) {
-  var ListItemContent = function (_Component) {
-    _inherits(ListItemContent, _Component);
-
-    function ListItemContent() {
-      _classCallCheck(this, ListItemContent);
-
-      return _possibleConstructorReturn(this, (ListItemContent.__proto__ || Object.getPrototypeOf(ListItemContent)).apply(this, arguments));
-    }
-
-    _createClass(ListItemContent, [{
-      key: 'getType',
-      value: function getType() {
-        var _props = this.props,
-            type = _props.type,
-            children = _props.children,
-            caption = _props.caption,
-            legend = _props.legend;
-
-
-        var count = _react2.default.Children.count(children);
-        [caption, legend].forEach(function (s) {
-          count += s ? 1 : 0;
-        });
-        var typeIndex = Math.min(count, types.length);
-
-        return type || types[typeIndex];
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var _props2 = this.props,
-            children = _props2.children,
-            caption = _props2.caption,
-            legend = _props2.legend,
-            theme = _props2.theme;
-
-        var className = (0, _classnames3.default)(theme.itemContentRoot, _defineProperty({}, theme[this.getType()], theme[this.getType()]));
-
-        return _react2.default.createElement(
-          'span',
-          { className: className },
-          caption && _react2.default.createElement(
-            ListItemText,
-            { theme: theme, primary: true },
-            caption
-          ),
-          legend && _react2.default.createElement(
-            ListItemText,
-            { theme: theme },
-            legend
-          ),
-          children
-        );
-      }
-    }]);
-
-    return ListItemContent;
-  }(_react.Component);
-
-  ListItemContent.propTypes = {
-    caption: _react.PropTypes.string,
-    children: _react.PropTypes.any,
-    legend: _react.PropTypes.string,
-    theme: _react.PropTypes.shape({
-      itemContentRoot: _react.PropTypes.string,
-      large: _react.PropTypes.string
-    }),
-    type: _react.PropTypes.oneOf(types)
-  };
-
-
-  return ListItemContent;
-};
-
-var ListItemContent = factory(_ListItemText2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListItemContent);
-exports.listItemContentFactory = factory;
-exports.ListItemContent = ListItemContent;
\ No newline at end of file
diff --git a/lib/list/ListItemLayout.js b/lib/list/ListItemLayout.js
deleted file mode 100644
index 22080f4a7..000000000
--- a/lib/list/ListItemLayout.js
+++ /dev/null
@@ -1,104 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ListItemLayout = exports.listItemLayoutFactory = undefined;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _FontIcon = require('../font_icon/FontIcon.js');
-
-var _FontIcon2 = _interopRequireDefault(_FontIcon);
-
-var _Avatar = require('../avatar/Avatar.js');
-
-var _Avatar2 = _interopRequireDefault(_Avatar);
-
-var _ListItemContent = require('./ListItemContent.js');
-
-var _ListItemContent2 = _interopRequireDefault(_ListItemContent);
-
-var _ListItemActions = require('./ListItemActions.js');
-
-var _ListItemActions2 = _interopRequireDefault(_ListItemActions);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var factory = function factory(Avatar, ListItemContent, ListItemActions) {
-  var ListItemLayout = function ListItemLayout(props) {
-    var _classnames;
-
-    var className = (0, _classnames3.default)(props.theme.item, (_classnames = {}, _defineProperty(_classnames, props.theme.disabled, props.disabled), _defineProperty(_classnames, props.theme.selectable, props.selectable), _classnames), props.className);
-
-    var leftActions = [props.leftIcon && _react2.default.createElement(_FontIcon2.default, { value: props.leftIcon, key: 'leftIcon' }), props.avatar && _react2.default.createElement(Avatar, { image: props.avatar, key: 'avatar' })].concat(_toConsumableArray(props.leftActions));
-    var rightActions = [props.rightIcon && _react2.default.createElement(_FontIcon2.default, { value: props.rightIcon, key: 'rightIcon' })].concat(_toConsumableArray(props.rightActions));
-    var content = props.itemContent || _react2.default.createElement(ListItemContent, { theme: props.theme, caption: props.caption, legend: props.legend });
-    var emptyActions = function emptyActions(item) {
-      return !item[0] && !item[1] && !item[2];
-    };
-
-    return _react2.default.createElement(
-      'span',
-      { className: className },
-      !emptyActions(leftActions) > 0 && _react2.default.createElement(
-        ListItemActions,
-        { type: 'left', theme: props.theme },
-        leftActions
-      ),
-      content,
-      !emptyActions(rightActions) > 0 && _react2.default.createElement(
-        ListItemActions,
-        { type: 'right', theme: props.theme },
-        rightActions
-      )
-    );
-  };
-
-  ListItemLayout.propTypes = {
-    avatar: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-    caption: _react.PropTypes.string,
-    children: _react.PropTypes.any,
-    className: _react.PropTypes.string,
-    disabled: _react.PropTypes.bool,
-    itemContent: _react.PropTypes.element,
-    leftActions: _react.PropTypes.array,
-    leftIcon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-    legend: _react.PropTypes.string,
-    rightActions: _react.PropTypes.array,
-    rightIcon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-    selectable: _react.PropTypes.bool,
-    theme: _react.PropTypes.shape({
-      disabled: _react.PropTypes.string,
-      item: _react.PropTypes.string,
-      selectable: _react.PropTypes.string
-    }),
-    to: _react.PropTypes.string
-  };
-
-  ListItemLayout.defaultProps = {
-    disabled: false,
-    selectable: false
-  };
-
-  return ListItemLayout;
-};
-
-var ListItemLayout = factory(_Avatar2.default, _ListItemContent2.default, _ListItemActions2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListItemLayout);
-exports.listItemLayoutFactory = factory;
-exports.ListItemLayout = ListItemLayout;
\ No newline at end of file
diff --git a/lib/list/ListItemText.js b/lib/list/ListItemText.js
deleted file mode 100644
index 8778f3144..000000000
--- a/lib/list/ListItemText.js
+++ /dev/null
@@ -1,58 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ListItemText = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-var ListItemText = function ListItemText(_ref) {
-  var className = _ref.className,
-      primary = _ref.primary,
-      children = _ref.children,
-      theme = _ref.theme,
-      other = _objectWithoutProperties(_ref, ['className', 'primary', 'children', 'theme']);
-
-  var _className = (0, _classnames3.default)(theme.itemText, _defineProperty({}, theme.primary, primary), className);
-  return _react2.default.createElement(
-    'span',
-    _extends({ 'data-react-toolbox': 'list-item-text', className: _className }, other),
-    children
-  );
-};
-
-ListItemText.propTypes = {
-  children: _react.PropTypes.any,
-  className: _react.PropTypes.string,
-  primary: _react.PropTypes.bool,
-  theme: _react.PropTypes.shape({
-    itemText: _react.PropTypes.string,
-    primary: _react.PropTypes.string
-  })
-};
-
-ListItemText.defaultProps = {
-  primary: false
-};
-
-exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListItemText);
-exports.ListItemText = ListItemText;
\ No newline at end of file
diff --git a/lib/list/ListSubHeader.js b/lib/list/ListSubHeader.js
deleted file mode 100644
index 4e04c694b..000000000
--- a/lib/list/ListSubHeader.js
+++ /dev/null
@@ -1,44 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ListSubHeader = undefined;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var ListSubHeader = function ListSubHeader(_ref) {
-  var caption = _ref.caption,
-      className = _ref.className,
-      theme = _ref.theme;
-  return _react2.default.createElement(
-    'h5',
-    { className: (0, _classnames2.default)(theme.subheader, className) },
-    caption
-  );
-};
-
-ListSubHeader.propTypes = {
-  caption: _react.PropTypes.string,
-  className: _react.PropTypes.string,
-  theme: _react.PropTypes.object
-};
-
-ListSubHeader.defaultProps = {
-  className: ''
-};
-
-exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListSubHeader);
-exports.ListSubHeader = ListSubHeader;
\ No newline at end of file
diff --git a/lib/list/_config.scss b/lib/list/_config.scss
deleted file mode 100644
index a8814551f..000000000
--- a/lib/list/_config.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-$list-vertical-padding: .8 * $unit !default;
-$list-horizontal-padding: 1.6 * $unit !default;
-$list-content-left-spacing: 7.2 * $unit !default;
-$list-subheader-height: 4.8 * $unit !default;
-$list-subheader-font-size: 1.4 * $unit !default;
-$list-subheader-font-weight: 500 !default;
-$list-divider-height: .1 * $unit !default;
-$list-item-min-height: 4.8 * $unit !default;
-$list-item-min-height-legend: 7.2 * $unit !default;
-$list-item-hover-color: $palette-grey-200 !default;
-$list-item-legend-margin-top: .3 * $unit !default;
-$list-item-icon-font-size: 2.4 * $unit !default;
-$list-item-icon-size: 1.8 * $unit !default;
-$list-item-right-icon-margin: $list-content-left-spacing - 2 * $list-horizontal-padding - $list-item-icon-size !default;
-$list-item-right-checkbox-margin: $list-item-right-icon-margin + $list-horizontal-padding !default;
-$list-item-avatar-height: 4 * $unit !default;
-$list-item-avatar-margin: .8 * $unit !default;
-$list-item-child-margin: .8 * $unit !default;
diff --git a/lib/list/index.d.ts b/lib/list/index.d.ts
deleted file mode 100644
index ad4ace447..000000000
--- a/lib/list/index.d.ts
+++ /dev/null
@@ -1,265 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface ListTheme {
-  /**
-   * Used for the root element of the list.
-   */
-  list?: string;
-}
-
-interface ListProps extends ReactToolbox.Props {
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * If true, each element in the list will have a ripple effect on click
-   * @default false
-   */
-  ripple?: boolean;
-  /**
-   * If true, the elements in the list will display a hover effect and a pointer cursor.
-   * @default false
-   */
-  selectable?: boolean;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: ListTheme;
-}
-
-export class List extends React.Component<ListProps, {}> { }
-
-export interface ListCheckboxTheme {
-  /**
-   * Used as a wrapper class for the subheader element.
-   */
-  checkbox?: string;
-  /**
-   * Added to the checkbox element.
-   */
-  checkboxItem?: string;
-  /**
-   * Added to the inner content if its a disabled item.
-   */
-  disabled?: string;
-  /**
-   * Used for the inner content of a list item.
-   */
-  item?: string;
-  /**
-   * Used for the content wrapper element in list item.
-   */
-  itemContentRoot?: string;
-  /**
-   * Added to the text inside of the list item.
-   */
-  itemText?: string;
-  /**
-   * Added to the content wrapper element if size is large.
-   */
-  large?: string;
-  /**
-   * Added to the text inside of the list item if its primary.
-   */
-  primary?: string;
-}
-
-interface ListCheckboxProps extends ReactToolbox.Props {
-  /**
-   * Main text of the item. Required.
-   */
-  caption?: string;
-  /**
-   * If true the checkbox appears checked by default.
-   * @default false
-   */
-  checked?: boolean;
-  /**
-   * If true, the item is displayed as disabled and it's not clickable.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * Secondary text to display under the caption.
-   */
-  legend?: string;
-  /**
-   * Name for the checkbox input item.
-   */
-  name?: string;
-  /**
-   * Callback called when the input element is blurred.
-   */
-  onBlur?: Function;
-  /**
-   * Callback called when the input element is changed.
-   */
-  onChange?: Function;
-  /**
-   * Callback called when the input element is focused.
-   */
-  onFocus?: Function;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: ListCheckboxTheme;
-}
-
-export class ListCheckbox extends React.Component<ListCheckboxProps, {}> { }
-
-export interface ListDividerTheme {
-  /**
-   * Added to the root element.
-   */
-  divider?: string;
-  /**
-   * Added to root element if inset is true.
-   */
-  inset?: string;
-}
-
-interface ListDividerProps extends ReactToolbox.Props {
-  /**
-   * If true, will leave a space at the left side.
-   */
-  inset?: boolean;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: ListDividerTheme;
-}
-
-export class ListDivider extends React.Component<ListDividerProps, {}> { }
-
-export interface ListItemTheme {
-  /**
-   * Added to the inner content if its a disabled item.
-   */
-  disabled?: string;
-  /**
-   * Used for the inner content of a list item.
-   */
-  item?: string;
-  /**
-   * Used for each action element (left/right).
-   */
-  itemAction?: string;
-  /**
-   * Used for the content wrapper element in list item.
-   */
-  itemContentRoot?: string;
-  /**
-   * Added to the text inside of the list item.
-   */
-  itemText?: string;
-  /**
-   * Added to the content wrapper element if size is large.
-   */
-  large?: string;
-  /**
-   * Added for the element that wraps left actions.
-   */
-  left?: string;
-  /**
-   * Used for the root element of the list.
-   */
-  listItem?: string;
-  /**
-   * Added to the text inside of the list item if its primary.
-   */
-  primary?: string;
-  /**
-   * Added for the element that wraps right actions.
-   */
-  right?: string;
-  /**
-   * Added to the inner content if its a selectable item.
-   */
-  selectable?: string;
-}
-
-interface ListItemProps extends ReactToolbox.Props {
-  /**
-   * A string URL to specify an avatar in the left side of the item.
-   */
-  avatar?: React.ReactNode | string;
-  /**
-   * Main text of the item.
-   */
-  caption?: string;
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * If true, the item is displayed as disabled and is not clickable.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * An element that will be displayed as the item. If set, this will override caption and legend.
-   */
-  itemContent?: React.ReactNode;
-  /**
-   * A list of elements that are placed on the left side of the item and after the avatar attribute.
-   */
-  leftActions?: React.ReactNode;
-  /**
-   * A string key of a font icon or element to display an icon in the left side of the item.
-   */
-  leftIcon?: React.ReactNode | string;
-  /**
-   * Secondary text to display under the caption.
-   */
-  legend?: string;
-  /**
-   * A list of elements that are placed on the right side of the item and after the rightIcon attribute.
-   */
-  rightActions?: React.ReactNode;
-  /**
-   * The same as the leftIcon but in this case the icon is displayed in the right side.
-   */
-  rightIcon?: React.ReactNode | string;
-  /**
-   * If true, the item displays a ripple effect on click. By default it's inherited from the parent element.
-   */
-  ripple?: boolean;
-  /**
-   * If true, the elements in the list will display a hover effect and a pointer cursor. Inherited from the parent.
-   * @default false
-   */
-  selectable?: boolean;
-  /**
-   * Classnames object defining the component style.
-   * @default false
-   */
-  theme?: ListItemTheme;
-  /**
-   * In case you want to provide the item as a link, you can pass this property to specify the href.
-   */
-  to?: string;
-}
-
-export class ListItem extends React.Component<ListItemProps, {}> { }
-
-export interface ListSubHeaderTheme {
-  /**
-   * Used as a wrapper class for the subheader element.
-   */
-  subheader?: string;
-}
-
-interface ListSubHeaderProps extends ReactToolbox.Props {
-  /**
-   * Text that will be displayed.
-   */
-  caption?: string;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: ListSubHeaderTheme;
-}
-
-export class ListSubHeader extends React.Component<ListSubHeaderProps, {}> { }
diff --git a/lib/list/index.js b/lib/list/index.js
deleted file mode 100644
index a7445462f..000000000
--- a/lib/list/index.js
+++ /dev/null
@@ -1,69 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.List = exports.ListItem = exports.ListDivider = exports.ListCheckbox = exports.ListItemText = exports.ListSubHeader = exports.ListItemLayout = exports.ListItemContent = exports.ListItemActions = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _avatar = require('../avatar');
-
-var _checkbox = require('../checkbox');
-
-var _ListItemText = require('./ListItemText.js');
-
-var _ListItemAction = require('./ListItemAction.js');
-
-var _ListSubHeader = require('./ListSubHeader.js');
-
-var _ListDivider = require('./ListDivider.js');
-
-var _List = require('./List.js');
-
-var _ListItem = require('./ListItem.js');
-
-var _ListCheckbox = require('./ListCheckbox.js');
-
-var _ListItemActions = require('./ListItemActions.js');
-
-var _ListItemContent = require('./ListItemContent.js');
-
-var _ListItemLayout = require('./ListItemLayout.js');
-
-var _ripple = require('../ripple');
-
-var _ripple2 = _interopRequireDefault(_ripple);
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var applyTheme = function applyTheme(Component) {
-  return (0, _reactCssThemr.themr)(_identifiers.LIST, _theme2.default)(Component);
-};
-var ripple = (0, _ripple2.default)({ centered: false, listItemIgnore: true });
-var ThemedListItemAction = applyTheme(_ListItemAction.ListItemAction);
-var ThemedListSubHeader = applyTheme(_ListSubHeader.ListSubHeader);
-var ThemedListItemText = applyTheme(_ListItemText.ListItemText);
-var ThemedListDivider = applyTheme(_ListDivider.ListDivider);
-var ThemedListItemContent = applyTheme((0, _ListItemContent.listItemContentFactory)(ThemedListItemText));
-var ThemedListItemActions = applyTheme((0, _ListItemActions.listItemActionsFactory)(ThemedListItemAction));
-var ThemedListItemLayout = applyTheme((0, _ListItemLayout.listItemLayoutFactory)(_avatar.Avatar, ThemedListItemContent, ThemedListItemActions));
-var ThemedListCheckbox = applyTheme((0, _ListCheckbox.listCheckboxFactory)(_checkbox.Checkbox, ThemedListItemContent));
-var ThemedListItem = applyTheme((0, _ListItem.listItemFactory)(ripple, ThemedListItemLayout, ThemedListItemContent));
-var ThemedList = applyTheme((0, _List.listFactory)(ThemedListItem));
-
-exports.ListItemActions = ThemedListItemActions;
-exports.ListItemContent = ThemedListItemContent;
-exports.ListItemLayout = ThemedListItemLayout;
-exports.ListSubHeader = ThemedListSubHeader;
-exports.ListItemText = ThemedListItemText;
-exports.ListCheckbox = ThemedListCheckbox;
-exports.ListDivider = ThemedListDivider;
-exports.ListItem = ThemedListItem;
-exports.List = ThemedList;
\ No newline at end of file
diff --git a/lib/list/theme.scss b/lib/list/theme.scss
deleted file mode 100644
index e432fcccb..000000000
--- a/lib/list/theme.scss
+++ /dev/null
@@ -1,159 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.list {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  padding: $list-vertical-padding 0;
-  text-align: left;
-  white-space: nowrap;
-  list-style: none;
-}
-
-.subheader {
-  padding-left: $list-horizontal-padding;
-  margin: - $list-vertical-padding 0 0;
-  font-size: $list-subheader-font-size;
-  font-weight: $list-subheader-font-weight;
-  line-height: $list-subheader-height;
-  color: $color-text-secondary;
-}
-
-.divider {
-  height: $list-divider-height;
-  margin: - $list-divider-height 0 0;
-  background-color: $color-divider;
-  border: 0;
-  &.inset {
-    margin-right: $list-horizontal-padding;
-    margin-left: $list-content-left-spacing;
-  }
-  .list + & {
-    margin-top: - $list-vertical-padding;
-  }
-  .listItem ~ & {
-    margin-top: $list-vertical-padding;
-    margin-bottom: $list-vertical-padding;
-  }
-}
-
-.listItem {
-  position: relative;
-  > [data-react-toolbox="ripple"] {
-    overflow: hidden;
-  }
-
-  .ripple {
-    color: $color-text-secondary;
-  }
-}
-
-.item {
-  position: relative;
-  display: flex;
-  min-height: $list-item-min-height;
-  align-items: center;
-  padding: 0 $list-horizontal-padding;
-  color: $color-text;
-  &.selectable:not(.disabled):hover {
-    cursor: pointer;
-    background-color: $list-item-hover-color;
-  }
-  &.disabled {
-    pointer-events: none;
-    &:not(.checkboxItem) {
-      opacity: .5;
-    }
-    > .checkbox > [data-react-toolbox="label"] {
-      opacity: .5;
-    }
-  }
-}
-
-.left {
-  [data-react-toolbox="font-icon"] {
-    width: $list-item-icon-size;
-  }
-  & :last-child {
-    > [data-react-toolbox="font-icon"] {
-      margin-right: $list-item-right-icon-margin;
-    }
-  }
-}
-
-.right {
-  > :last-child  {
-    margin-right: 0;
-  }
-
-  > :first-child {
-    margin-left: $list-horizontal-padding;
-  }
-}
-
-.left, .right {
-  display: flex;
-  flex: 0 0 auto;
-  align-items: center;
-  vertical-align: middle;
-}
-
-.itemAction {
-  display: flex;
-  margin: $list-item-child-margin $list-horizontal-padding $list-item-child-margin 0;
-
-  > * {
-    padding: 0;
-  }
-
-  > [data-react-toolbox="font-icon"] {
-    font-size: $list-item-icon-font-size;
-    color: $color-text-secondary;
-  }
-}
-
-.itemContentRoot {
-  display: block;
-  flex-grow: 1;
-  &.large {
-    display: flex;
-    height: $list-item-min-height-legend;
-    flex-direction: column;
-    justify-content: center;
-  }
-}
-
-.checkbox {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  min-height: $list-item-min-height;
-  align-items: center;
-  margin: 0;
-  cursor: pointer;
-  > [data-react-toolbox="check"] {
-    margin-right: $list-item-right-checkbox-margin;
-  }
-  > [data-react-toolbox="label"] {
-    padding-left: 0;
-  }
-}
-
-.itemText {
-  display: block;
-
-  &:not(.primary) {
-    padding-top: $list-item-legend-margin-top;
-    font-size: $font-size-small;
-    color: $color-text-secondary;
-    white-space: normal;
-  }
-
-  &.primary {
-    font-size: $font-size-normal;
-    color: $color-text;
-  }
-}
diff --git a/lib/menu/IconMenu.js b/lib/menu/IconMenu.js
deleted file mode 100644
index 7053f6bc5..000000000
--- a/lib/menu/IconMenu.js
+++ /dev/null
@@ -1,151 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.IconMenu = exports.iconMenuFactory = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _IconButton = require('../button/IconButton.js');
-
-var _IconButton2 = _interopRequireDefault(_IconButton);
-
-var _Menu = require('./Menu.js');
-
-var _Menu2 = _interopRequireDefault(_Menu);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(IconButton, Menu) {
-  var IconMenu = function (_Component) {
-    _inherits(IconMenu, _Component);
-
-    function IconMenu() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, IconMenu);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = IconMenu.__proto__ || Object.getPrototypeOf(IconMenu)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-        active: false
-      }, _this.handleButtonClick = function (event) {
-        _this.setState({ active: !_this.state.active });
-        if (_this.props.onClick) _this.props.onClick(event);
-      }, _this.handleMenuHide = function () {
-        _this.setState({ active: false });
-        if (_this.props.onHide) _this.props.onHide();
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(IconMenu, [{
-      key: 'render',
-      value: function render() {
-        var _props = this.props,
-            children = _props.children,
-            className = _props.className,
-            icon = _props.icon,
-            iconRipple = _props.iconRipple,
-            menuRipple = _props.menuRipple,
-            onHide = _props.onHide,
-            onSelect = _props.onSelect,
-            onShow = _props.onShow,
-            position = _props.position,
-            selectable = _props.selectable,
-            selected = _props.selected,
-            theme = _props.theme,
-            other = _objectWithoutProperties(_props, ['children', 'className', 'icon', 'iconRipple', 'menuRipple', 'onHide', 'onSelect', 'onShow', 'position', 'selectable', 'selected', 'theme']);
-
-        return _react2.default.createElement(
-          'div',
-          _extends({}, other, { className: (0, _classnames2.default)(theme.iconMenu, className) }),
-          _react2.default.createElement(IconButton, {
-            className: theme.icon,
-            icon: icon,
-            onClick: this.handleButtonClick,
-            ripple: iconRipple
-          }),
-          _react2.default.createElement(
-            Menu,
-            {
-              active: this.state.active,
-              onHide: this.handleMenuHide,
-              onSelect: onSelect,
-              onShow: onShow,
-              position: position,
-              ripple: menuRipple,
-              selectable: selectable,
-              selected: selected,
-              theme: theme
-            },
-            children
-          )
-        );
-      }
-    }]);
-
-    return IconMenu;
-  }(_react.Component);
-
-  IconMenu.propTypes = {
-    children: _react.PropTypes.node,
-    className: _react.PropTypes.string,
-    icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-    iconRipple: _react.PropTypes.bool,
-    menuRipple: _react.PropTypes.bool,
-    onClick: _react.PropTypes.func,
-    onHide: _react.PropTypes.func,
-    onSelect: _react.PropTypes.func,
-    onShow: _react.PropTypes.func,
-    position: _react.PropTypes.string,
-    selectable: _react.PropTypes.bool,
-    selected: _react.PropTypes.any,
-    theme: _react.PropTypes.shape({
-      icon: _react.PropTypes.string,
-      iconMenu: _react.PropTypes.string
-    })
-  };
-  IconMenu.defaultProps = {
-    className: '',
-    icon: 'more_vert',
-    iconRipple: true,
-    menuRipple: true,
-    position: 'auto',
-    selectable: false
-  };
-
-
-  return IconMenu;
-};
-
-var IconMenu = factory(_IconButton2.default, _Menu2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.MENU)(IconMenu);
-exports.iconMenuFactory = factory;
-exports.IconMenu = IconMenu;
\ No newline at end of file
diff --git a/lib/menu/Menu.js b/lib/menu/Menu.js
deleted file mode 100644
index 9c7017c31..000000000
--- a/lib/menu/Menu.js
+++ /dev/null
@@ -1,324 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Menu = exports.menuFactory = undefined;
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactDom = require('react-dom');
-
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _utils = require('../utils');
-
-var _MenuItem = require('./MenuItem.js');
-
-var _MenuItem2 = _interopRequireDefault(_MenuItem);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var POSITION = {
-  AUTO: 'auto',
-  STATIC: 'static',
-  TOP_LEFT: 'topLeft',
-  TOP_RIGHT: 'topRight',
-  BOTTOM_LEFT: 'bottomLeft',
-  BOTTOM_RIGHT: 'bottomRight'
-};
-
-var factory = function factory(MenuItem) {
-  var Menu = function (_Component) {
-    _inherits(Menu, _Component);
-
-    function Menu() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, Menu);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Menu.__proto__ || Object.getPrototypeOf(Menu)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-        active: _this.props.active,
-        rippled: false
-      }, _this.handleDocumentClick = function (event) {
-        if (_this.state.active && !_utils.events.targetIsDescendant(event, _reactDom2.default.findDOMNode(_this))) {
-          _this.setState({ active: false, rippled: false });
-        }
-      }, _this.handleSelect = function (item, event) {
-        var _item$props = item.props,
-            value = _item$props.value,
-            onClick = _item$props.onClick;
-
-        if (onClick) event.persist();
-        _this.setState({ active: false, rippled: _this.props.ripple }, function () {
-          if (onClick) onClick(event);
-          if (_this.props.onSelect) _this.props.onSelect(value);
-        });
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(Menu, [{
-      key: 'componentDidMount',
-      value: function componentDidMount() {
-        var _this2 = this;
-
-        this.positionTimeoutHandle = setTimeout(function () {
-          var _refs$menu$getBoundin = _this2.refs.menu.getBoundingClientRect(),
-              width = _refs$menu$getBoundin.width,
-              height = _refs$menu$getBoundin.height;
-
-          var position = _this2.props.position === POSITION.AUTO ? _this2.calculatePosition() : _this2.props.position;
-          _this2.setState({ position: position, width: width, height: height });
-        });
-      }
-    }, {
-      key: 'componentWillReceiveProps',
-      value: function componentWillReceiveProps(nextProps) {
-        var _this3 = this;
-
-        if (this.props.position !== nextProps.position) {
-          var position = nextProps.position === POSITION.AUTO ? this.calculatePosition() : nextProps.position;
-          this.setState({ position: position });
-        }
-
-        /**
-         * If the menu is going to be activated via props and its not active, verify
-         * the position is appropriated and then show it recalculating position if its
-         * wrong. It should be shown in two consecutive setState.
-         */
-        if (!this.props.active && nextProps.active && !this.state.active) {
-          if (nextProps.position === POSITION.AUTO) {
-            var _position = this.calculatePosition();
-            if (this.state.position !== _position) {
-              this.setState({ position: _position, active: false }, function () {
-                _this3.activateTimeoutHandle = setTimeout(function () {
-                  _this3.show();
-                }, 20);
-              });
-            } else {
-              this.show();
-            }
-          } else {
-            this.show();
-          }
-        }
-
-        /**
-         * If the menu is being deactivated via props and the current state is
-         * active, it should be hid.
-         */
-        if (this.props.active && !nextProps.active && this.state.active) {
-          this.hide();
-        }
-      }
-    }, {
-      key: 'componentWillUpdate',
-      value: function componentWillUpdate(nextProps, nextState) {
-        if (!this.state.active && nextState.active) {
-          _utils.events.addEventsToDocument({
-            click: this.handleDocumentClick,
-            touchstart: this.handleDocumentClick
-          });
-        }
-      }
-    }, {
-      key: 'componentDidUpdate',
-      value: function componentDidUpdate(prevProps, prevState) {
-        if (prevState.active && !this.state.active) {
-          if (this.props.onHide) this.props.onHide();
-          _utils.events.removeEventsFromDocument({
-            click: this.handleDocumentClick,
-            touchstart: this.handleDocumentClick
-          });
-        } else if (!prevState.active && this.state.active && this.props.onShow) {
-          this.props.onShow();
-        }
-      }
-    }, {
-      key: 'componentWillUnmount',
-      value: function componentWillUnmount() {
-        if (this.state.active) {
-          _utils.events.removeEventsFromDocument({
-            click: this.handleDocumentClick,
-            touchstart: this.handleDocumentClick
-          });
-        }
-        clearTimeout(this.positionTimeoutHandle);
-        clearTimeout(this.activateTimeoutHandle);
-      }
-    }, {
-      key: 'calculatePosition',
-      value: function calculatePosition() {
-        var parentNode = _reactDom2.default.findDOMNode(this).parentNode;
-        if (!parentNode) return;
-
-        var _parentNode$getBoundi = parentNode.getBoundingClientRect(),
-            top = _parentNode$getBoundi.top,
-            left = _parentNode$getBoundi.left,
-            height = _parentNode$getBoundi.height,
-            width = _parentNode$getBoundi.width;
-
-        var _utils$getViewport = _utils.utils.getViewport(),
-            wh = _utils$getViewport.height,
-            ww = _utils$getViewport.width;
-
-        var toTop = top < wh / 2 - height / 2;
-        var toLeft = left < ww / 2 - width / 2;
-        return '' + (toTop ? 'top' : 'bottom') + (toLeft ? 'Left' : 'Right');
-      }
-    }, {
-      key: 'getMenuStyle',
-      value: function getMenuStyle() {
-        var _state = this.state,
-            width = _state.width,
-            height = _state.height,
-            position = _state.position;
-
-        if (position !== POSITION.STATIC) {
-          if (this.state.active) {
-            return { clip: 'rect(0 ' + width + 'px ' + height + 'px 0)' };
-          } else if (position === POSITION.TOP_RIGHT) {
-            return { clip: 'rect(0 ' + width + 'px 0 ' + width + 'px)' };
-          } else if (position === POSITION.BOTTOM_RIGHT) {
-            return { clip: 'rect(' + height + 'px ' + width + 'px ' + height + 'px ' + width + 'px)' };
-          } else if (position === POSITION.BOTTOM_LEFT) {
-            return { clip: 'rect(' + height + 'px 0 ' + height + 'px 0)' };
-          } else if (position === POSITION.TOP_LEFT) {
-            return { clip: 'rect(0 0 0 0)' };
-          }
-        }
-      }
-    }, {
-      key: 'getRootStyle',
-      value: function getRootStyle() {
-        if (this.state.position !== POSITION.STATIC) {
-          return { width: this.state.width, height: this.state.height };
-        }
-      }
-    }, {
-      key: 'renderItems',
-      value: function renderItems() {
-        var _this4 = this;
-
-        return _react2.default.Children.map(this.props.children, function (item) {
-          if (!item) return item;
-          if (item.type === MenuItem) {
-            return _react2.default.cloneElement(item, {
-              ripple: item.props.ripple || _this4.props.ripple,
-              selected: typeof item.props.value !== 'undefined' && _this4.props.selectable && item.props.value === _this4.props.selected,
-              onClick: _this4.handleSelect.bind(_this4, item)
-            });
-          } else {
-            return _react2.default.cloneElement(item);
-          }
-        });
-      }
-    }, {
-      key: 'show',
-      value: function show() {
-        var _refs$menu$getBoundin2 = this.refs.menu.getBoundingClientRect(),
-            width = _refs$menu$getBoundin2.width,
-            height = _refs$menu$getBoundin2.height;
-
-        this.setState({ active: true, width: width, height: height });
-      }
-    }, {
-      key: 'hide',
-      value: function hide() {
-        this.setState({ active: false });
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var _classnames;
-
-        var theme = this.props.theme;
-
-        var outlineStyle = { width: this.state.width, height: this.state.height };
-        var className = (0, _classnames3.default)([theme.menu, theme[this.state.position]], (_classnames = {}, _defineProperty(_classnames, theme.active, this.state.active), _defineProperty(_classnames, theme.rippled, this.state.rippled), _classnames), this.props.className);
-
-        return _react2.default.createElement(
-          'div',
-          { 'data-react-toolbox': 'menu', className: className, style: this.getRootStyle() },
-          this.props.outline ? _react2.default.createElement('div', { className: theme.outline, style: outlineStyle }) : null,
-          _react2.default.createElement(
-            'ul',
-            { ref: 'menu', className: theme.menuInner, style: this.getMenuStyle() },
-            this.renderItems()
-          )
-        );
-      }
-    }]);
-
-    return Menu;
-  }(_react.Component);
-
-  Menu.propTypes = {
-    active: _react.PropTypes.bool,
-    children: _react.PropTypes.node,
-    className: _react.PropTypes.string,
-    onHide: _react.PropTypes.func,
-    onSelect: _react.PropTypes.func,
-    onShow: _react.PropTypes.func,
-    outline: _react.PropTypes.bool,
-    position: _react.PropTypes.oneOf(Object.keys(POSITION).map(function (key) {
-      return POSITION[key];
-    })),
-    ripple: _react.PropTypes.bool,
-    selectable: _react.PropTypes.bool,
-    selected: _react.PropTypes.any,
-    theme: _react.PropTypes.shape({
-      active: _react.PropTypes.string,
-      bottomLeft: _react.PropTypes.string,
-      bottomRight: _react.PropTypes.string,
-      menu: _react.PropTypes.string,
-      menuInner: _react.PropTypes.string,
-      outline: _react.PropTypes.string,
-      rippled: _react.PropTypes.string,
-      static: _react.PropTypes.string,
-      topLeft: _react.PropTypes.string,
-      topRight: _react.PropTypes.string
-    })
-  };
-  Menu.defaultProps = {
-    active: false,
-    outline: true,
-    position: POSITION.STATIC,
-    ripple: true,
-    selectable: true
-  };
-
-
-  return Menu;
-};
-
-var Menu = factory(_MenuItem2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.MENU)(Menu);
-exports.menuFactory = factory;
-exports.Menu = Menu;
\ No newline at end of file
diff --git a/lib/menu/MenuDivider.js b/lib/menu/MenuDivider.js
deleted file mode 100644
index cf8455141..000000000
--- a/lib/menu/MenuDivider.js
+++ /dev/null
@@ -1,30 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MenuDivider = undefined;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var MenuDivider = function MenuDivider(_ref) {
-  var theme = _ref.theme;
-  return _react2.default.createElement('hr', { 'data-react-toolbox': 'menu-divider', className: theme.menuDivider });
-};
-
-MenuDivider.propTypes = {
-  theme: _react.PropTypes.shape({
-    menuDivider: _react.PropTypes.string
-  })
-};
-
-exports.default = (0, _reactCssThemr.themr)(_identifiers.MENU)(MenuDivider);
-exports.MenuDivider = MenuDivider;
\ No newline at end of file
diff --git a/lib/menu/MenuItem.js b/lib/menu/MenuItem.js
deleted file mode 100644
index d854db0e2..000000000
--- a/lib/menu/MenuItem.js
+++ /dev/null
@@ -1,136 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MenuItem = exports.menuItemFactory = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _FontIcon = require('../font_icon/FontIcon.js');
-
-var _FontIcon2 = _interopRequireDefault(_FontIcon);
-
-var _Ripple = require('../ripple/Ripple.js');
-
-var _Ripple2 = _interopRequireDefault(_Ripple);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(ripple) {
-  var MenuItem = function (_Component) {
-    _inherits(MenuItem, _Component);
-
-    function MenuItem() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, MenuItem);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = MenuItem.__proto__ || Object.getPrototypeOf(MenuItem)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
-        if (_this.props.onClick && !_this.props.disabled) {
-          _this.props.onClick(event, _this);
-        }
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(MenuItem, [{
-      key: 'render',
-      value: function render() {
-        var _classnames;
-
-        var _props = this.props,
-            icon = _props.icon,
-            caption = _props.caption,
-            children = _props.children,
-            shortcut = _props.shortcut,
-            selected = _props.selected,
-            disabled = _props.disabled,
-            theme = _props.theme,
-            others = _objectWithoutProperties(_props, ['icon', 'caption', 'children', 'shortcut', 'selected', 'disabled', 'theme']);
-
-        var className = (0, _classnames3.default)(theme.menuItem, (_classnames = {}, _defineProperty(_classnames, theme.selected, selected), _defineProperty(_classnames, theme.disabled, disabled), _classnames), this.props.className);
-
-        return _react2.default.createElement(
-          'li',
-          _extends({}, others, { 'data-react-toolbox': 'menu-item', className: className, onClick: this.handleClick }),
-          icon ? _react2.default.createElement(_FontIcon2.default, { value: icon, className: theme.icon }) : null,
-          _react2.default.createElement(
-            'span',
-            { className: theme.caption },
-            caption
-          ),
-          shortcut ? _react2.default.createElement(
-            'small',
-            { className: theme.shortcut },
-            shortcut
-          ) : null,
-          children
-        );
-      }
-    }]);
-
-    return MenuItem;
-  }(_react.Component);
-
-  MenuItem.propTypes = {
-    caption: _react.PropTypes.string,
-    children: _react.PropTypes.any,
-    className: _react.PropTypes.string,
-    disabled: _react.PropTypes.bool,
-    icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-    onClick: _react.PropTypes.func,
-    selected: _react.PropTypes.bool,
-    shortcut: _react.PropTypes.string,
-    theme: _react.PropTypes.shape({
-      caption: _react.PropTypes.string,
-      disabled: _react.PropTypes.string,
-      icon: _react.PropTypes.string,
-      menuItem: _react.PropTypes.string,
-      selected: _react.PropTypes.string,
-      shortcut: _react.PropTypes.string
-    })
-  };
-  MenuItem.defaultProps = {
-    className: '',
-    disabled: false,
-    selected: false
-  };
-
-
-  return ripple(MenuItem);
-};
-
-var MenuItem = factory((0, _Ripple2.default)({}));
-exports.default = (0, _reactCssThemr.themr)(_identifiers.MENU)(MenuItem);
-exports.menuItemFactory = factory;
-exports.MenuItem = MenuItem;
\ No newline at end of file
diff --git a/lib/menu/__test__/index.spec.js b/lib/menu/__test__/index.spec.js
deleted file mode 100644
index 8fa0b4163..000000000
--- a/lib/menu/__test__/index.spec.js
+++ /dev/null
@@ -1,51 +0,0 @@
-'use strict';
-
-var _expect = require('expect');
-
-var _expect2 = _interopRequireDefault(_expect);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactDom = require('react-dom');
-
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
-var _reactAddonsTestUtils = require('react-addons-test-utils');
-
-var _reactAddonsTestUtils2 = _interopRequireDefault(_reactAddonsTestUtils);
-
-var _Menu = require('../Menu');
-
-var _Menu2 = _interopRequireDefault(_Menu);
-
-var _MenuItem = require('../MenuItem');
-
-var _MenuItem2 = _interopRequireDefault(_MenuItem);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-describe('MenuItem', function () {
-  describe('#onClick', function () {
-    it('passes to listener the event', function () {
-      var listenerCalled = false;
-      var handleClick = function handleClick(event) {
-        listenerCalled = true;
-        (0, _expect2.default)(event).toExist();
-        (0, _expect2.default)(event.target).toExist();
-      };
-
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(
-        _Menu2.default,
-        null,
-        _react2.default.createElement(_MenuItem2.default, { key: '1', onClick: handleClick })
-      ));
-
-      var menuItem = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _MenuItem.MenuItem);
-      _reactAddonsTestUtils2.default.Simulate.click(_reactDom2.default.findDOMNode(menuItem));
-
-      (0, _expect2.default)(listenerCalled).toBe(true);
-    });
-  });
-});
\ No newline at end of file
diff --git a/lib/menu/_config.scss b/lib/menu/_config.scss
deleted file mode 100644
index 0b5343661..000000000
--- a/lib/menu/_config.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-$menu-expand-duration: .3s !default;
-$menu-fade-duration: .2s !default;
-$menu-ripple-delay: .3s !default;
-$menu-background-color: $color-white !default;
-$menu-padding: .8 * $unit 0 !default;
-$menu-outline-border-radius: .2 * $unit !default;
-$menu-item-hover-background: $palette-grey-200 !default;
-$menu-item-selected-background: transparent !default;
-$menu-item-icon-font-size: 2.4 * $unit !default;
-$menu-item-icon-size: 1.6 * $menu-item-icon-font-size !default;
-$menu-item-height: 4.8 * $unit !default;
-$menu-item-padding: 1.6 * $unit !default;
-$menu-item-font-size: 1.6 * $unit !default;
-$menu-divider-height: (4.8 * $unit) / 4 !default;
-$menu-icon-size: 2.3 * $unit !default;
-$menu-icon-ripple-duration: 650ms !default;
diff --git a/lib/menu/index.d.ts b/lib/menu/index.d.ts
deleted file mode 100644
index 5d9fccdfd..000000000
--- a/lib/menu/index.d.ts
+++ /dev/null
@@ -1,242 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface MenuTheme {
-  /**
-   * Added to the root element when menu is active.
-   */
-  active?: string;
-  /**
-   * Added to the root when position is bottom left.
-   */
-  bottomLeft?: string;
-  /**
-   * Added to the root when position is bottom right.
-   */
-  bottomRight?: string;
-  /**
-   * Used for the root element of the menu.
-   */
-  menu?: string;
-  /**
-   * Used for the inner wrapper.
-   */
-  menuInner?: string;
-  /**
-   * Used to draw the outline.
-   */
-  outline?: string;
-  /**
-   * Added to the menu in case if should have ripple.
-   */
-  rippled?: string;
-  /**
-   * Added to the root in case its static.
-   */
-  static?: string;
-  /**
-   * Added to the root when position is top left.
-   */
-  topLeft?: string;
-  /**
-   * Added to the root when position is top right.
-   */
-  topRight?: string;
-}
-
-interface MenuProps extends ReactToolbox.Props {
-  /**
-   * If true, the menu will be displayed as opened by default.
-   * @default false
-   */
-  active?: boolean;
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * Callback that will be called when the menu is being hidden.
-   */
-  onHide?: Function;
-  /**
-   * Callback that will be invoked when a menu item is selected.
-   */
-  onSelect?: Function;
-  /**
-   * Callback that will be invoked when the menu is being shown.
-   */
-  onShow?: Function;
-  /**
-   * If true the menu wrapper will show an outline with a soft shadow.
-   * @default false
-   */
-  outline?: boolean;
-  /**
-   * Determine the position of the menu. With static value the menu will be always shown, auto means that the it will decide the opening direction based on the current position. To force a position use topLeft, topRight, bottomLeft, bottomRight.
-   * @default static
-   */
-  position?: "auto" | "static" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
-  /**
-   * If true, the menu items will show a ripple effect on click.
-   * @default true
-   */
-  ripple?: boolean;
-  /**
-   * If true, the menu will keep a value to highlight the active child item.
-   * @default false
-   */
-  selectable?: boolean;
-  /**
-   * Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted.
-   */
-  selected?: any;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: MenuTheme;
-}
-
-export class Menu extends React.Component<MenuProps, {}> { }
-
-export interface IconMenuTheme {
-  /**
-   * Used for the icon element.
-   */
-  icon?: string;
-  /**
-   * Used for the root element of the icon menu.
-   */
-  iconMenu?: string;
-}
-
-interface IconMenuProps extends ReactToolbox.Props {
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * Icon font key string or Element to display the opener icon.
-   * @default more_vert
-   */
-  icon?: React.ReactNode | string;
-  /**
-   * If true, the icon will show a ripple when is clicked.
-   * @default true
-   */
-  iconRipple?: boolean;
-  /**
-   * Transferred to the Menu component.
-   * @default true
-   */
-  menuRipple?: boolean;
-  /**
-   * Callback that will be called when the menu is being hidden.
-   */
-  onHide?: Function;
-  /**
-   * Callback that will be invoked when a menu item is selected.
-   */
-  onSelect?: Function;
-  /**
-   * Callback that will be invoked when the menu is being shown.
-   */
-  onShow?: Function;
-  /**
-   * Determines the position of the menu. This property is transferred to the inner Menu component.
-   * @default auto
-   */
-  position?: "auto" | "static" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
-  /**
-   * If true, the menu will keep a value to highlight the active child item.
-   * @default false
-   */
-  selectable?: boolean;
-  /**
-   * Used for selectable menus. Indicates the current selected value so the child item with this value can be highlighted.
-   */
-  selected?: any;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: IconMenuTheme;
-}
-
-export class IconMenu extends React.Component<IconMenuProps, {}> { }
-
-export interface MenuDividerTheme {
-  /**
-   *
-   */
-  menuDivider?: string;
-}
-
-interface MenuDividerProps extends ReactToolbox.Props {
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: MenuDividerTheme;
-}
-
-export class MenuDivider extends React.Component<MenuDividerProps, {}> { }
-
-export interface MenuItemTheme {
-  /**
-   * Used for the caption inside the item.
-   */
-  caption?: string;
-  /**
-   * Added to the root element if it's disabled.
-   */
-  disabled?: string;
-  /**
-   * Used for the icon element if exists.
-   */
-  icon?: string;
-  /**
-   * Used as the root class for the component.
-   */
-  menuItem?: string;
-  /**
-   * Added to the root element in case it's selected.
-   */
-  selected?: string;
-  /**
-   * Used for the shortcut element if exists.
-   */
-  shortcut?: string;
-}
-
-interface MenuItemProps extends ReactToolbox.Props {
-  /**
-   * The text to include in the menu item. Required.
-   */
-  caption: string;
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * If true, the item will be displayed as disabled and is not selectable.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * Icon font key string or Element to display in the right side of the option.
-   */
-  icon?: React.ReactNode | string;
-  /**
-   * Transferred from the Menu component for selectable menus. Indicates if it's the current active option.
-   * @default false
-   */
-  selected?: boolean;
-  /**
-   * Displays shortcut text on the right side of the caption attribute.
-   */
-  shortcut?: string;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: MenuItemTheme;
-}
-
-export class MenuItem extends React.Component<MenuItemProps, {}> { }
diff --git a/lib/menu/index.js b/lib/menu/index.js
deleted file mode 100644
index 56f87c943..000000000
--- a/lib/menu/index.js
+++ /dev/null
@@ -1,43 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.IconMenu = exports.Menu = exports.MenuItem = exports.MenuDivider = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _button = require('../button');
-
-var _MenuDivider = require('./MenuDivider.js');
-
-var _MenuItem = require('./MenuItem.js');
-
-var _Menu = require('./Menu.js');
-
-var _IconMenu = require('./IconMenu.js');
-
-var _ripple = require('../ripple');
-
-var _ripple2 = _interopRequireDefault(_ripple);
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var applyTheme = function applyTheme(Component) {
-  return (0, _reactCssThemr.themr)(_identifiers.MENU, _theme2.default)(Component);
-};
-var ThemedMenuDivider = applyTheme(_MenuDivider.MenuDivider);
-var ThemedMenuItem = applyTheme((0, _MenuItem.menuItemFactory)((0, _ripple2.default)({})));
-var ThemedMenu = applyTheme((0, _Menu.menuFactory)(ThemedMenuItem));
-var ThemedIconMenu = applyTheme((0, _IconMenu.iconMenuFactory)(_button.IconButton, ThemedMenu));
-
-exports.MenuDivider = ThemedMenuDivider;
-exports.MenuItem = ThemedMenuItem;
-exports.Menu = ThemedMenu;
-exports.IconMenu = ThemedIconMenu;
\ No newline at end of file
diff --git a/lib/menu/theme.scss b/lib/menu/theme.scss
deleted file mode 100644
index 9f4ec9b3c..000000000
--- a/lib/menu/theme.scss
+++ /dev/null
@@ -1,154 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.iconMenu {
-  position: relative;
-  display: inline-block;
-  text-align: center;
-  .icon {
-    cursor: pointer;
-  }
-}
-
-.menu {
-  position: relative;
-  display: inline-block;
-  &.topLeft {
-    position: absolute;
-    top: 0;
-    left: 0;
-    > .outline {
-      transform-origin: 0 0;
-    }
-  }
-  &.topRight {
-    position: absolute;
-    top: 0;
-    right: 0;
-    > .outline {
-      transform-origin: 100% 0;
-    }
-  }
-  &.bottomLeft {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    > .outline {
-      transform-origin: 0 100%;
-    }
-  }
-  &.bottomRight {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    > .outline {
-      transform-origin: 100% 100%;
-    }
-  }
-  &:not(.static) {
-    z-index: $z-index-higher;
-    pointer-events: none;
-    > .outline {
-      opacity: 0;
-      transition: transform $menu-expand-duration $animation-curve-default,
-      opacity $menu-fade-duration $animation-curve-default;
-      transform: scale(0);
-      will-change: transform;
-    }
-    > .menuInner {
-      position: absolute;
-      top: 0;
-      left: 0;
-      opacity: 0;
-    }
-    &.rippled:not(.active) {
-      > .outline {
-        transition-delay: $menu-ripple-delay;
-      }
-      > .menuInner {
-        transition-delay: $menu-ripple-delay;
-      }
-    }
-    &.active {
-      pointer-events: all;
-      > .outline {
-        opacity: 1;
-        transform: scale(1);
-      }
-      > .menuInner {
-        opacity: 1;
-        transition: opacity $menu-fade-duration $animation-curve-default,
-        clip $menu-expand-duration $animation-curve-default;
-      }
-    }
-  }
-}
-
-.outline {
-  @include shadow-2dp();
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: block;
-  background-color: $menu-background-color;
-  border-radius: $menu-outline-border-radius;
-}
-
-.menuInner {
-  position: relative;
-  display: block;
-  padding: $menu-padding;
-  text-align: left;
-  white-space: nowrap;
-  list-style: none;
-}
-
-.menuItem {
-  position: relative;
-  display: flex;
-  height: $menu-item-height;
-  align-items: center;
-  padding: 0 $menu-item-padding;
-  overflow: hidden;
-  font-size: $menu-item-font-size;
-  color: $color-text;
-  &:not(.disabled):hover {
-    cursor: pointer;
-    background-color: $menu-item-hover-background;
-  }
-  &.disabled {
-    pointer-events: none;
-    opacity: .5;
-  }
-  &.selected {
-    font-weight: 500;
-    background-color: $menu-item-selected-background;
-  }
-  .ripple {
-    color: $color-text-secondary;
-  }
-
-  .icon {
-    width: $menu-item-icon-size;
-    font-size: $menu-item-icon-font-size !important;
-  }
-}
-
-.caption {
-  flex-grow: 1;
-  font-size: $font-size-normal;
-}
-
-.shortcut {
-  margin-left: $menu-item-padding;
-}
-
-.menuDivider {
-  display: block;
-  width: 100%;
-  height: 1px;
-  margin: $menu-divider-height 0;
-  background-color: $color-divider;
-}
diff --git a/lib/navigation/Navigation.js b/lib/navigation/Navigation.js
deleted file mode 100644
index 8d8876ffe..000000000
--- a/lib/navigation/Navigation.js
+++ /dev/null
@@ -1,86 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Navigation = exports.navigationFactory = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Button = require('../button/Button.js');
-
-var _Button2 = _interopRequireDefault(_Button);
-
-var _Link = require('../link/Link.js');
-
-var _Link2 = _interopRequireDefault(_Link);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var factory = function factory(Button, Link) {
-  var Navigation = function Navigation(_ref) {
-    var actions = _ref.actions,
-        children = _ref.children,
-        className = _ref.className,
-        routes = _ref.routes,
-        theme = _ref.theme,
-        type = _ref.type;
-
-    var _className = (0, _classnames2.default)(theme[type], className);
-    var buttons = actions.map(function (action, index) {
-      return _react2.default.createElement(Button, _extends({ className: theme.button, key: index }, action));
-    });
-
-    var links = routes.map(function (route, index) {
-      return _react2.default.createElement(Link, _extends({ className: theme.link, key: index }, route));
-    });
-
-    return _react2.default.createElement(
-      'nav',
-      { 'data-react-toolbox': 'navigation', className: _className },
-      links,
-      buttons,
-      children
-    );
-  };
-
-  Navigation.propTypes = {
-    actions: _react.PropTypes.array,
-    children: _react.PropTypes.node,
-    className: _react.PropTypes.string,
-    routes: _react.PropTypes.array,
-    theme: _react.PropTypes.shape({
-      button: _react.PropTypes.string,
-      horizontal: _react.PropTypes.string,
-      link: _react.PropTypes.string,
-      vertical: _react.PropTypes.string
-    }),
-    type: _react.PropTypes.oneOf(['vertical', 'horizontal'])
-  };
-
-  Navigation.defaultProps = {
-    actions: [],
-    className: '',
-    type: 'horizontal',
-    routes: []
-  };
-
-  return Navigation;
-};
-
-var Navigation = factory(_Button2.default, _Link2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.NAVIGATION)(Navigation);
-exports.navigationFactory = factory;
-exports.Navigation = Navigation;
\ No newline at end of file
diff --git a/lib/navigation/_config.scss b/lib/navigation/_config.scss
deleted file mode 100644
index 6b654ac73..000000000
--- a/lib/navigation/_config.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-$navigation-space: $unit !default;
-$navigation-color: $color-black !default;
diff --git a/lib/navigation/index.d.ts b/lib/navigation/index.d.ts
deleted file mode 100644
index a2795a8da..000000000
--- a/lib/navigation/index.d.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface NavigationTheme {
-  /**
-   * Used for buttons provided in the component.
-   */
-  button?: string;
-  /**
-   * Used for the root element if the layout is horizontal.
-   */
-  horizontal?: string;
-  /**
-   * Used for links provided in the component.
-   */
-  link?: string;
-  /**
-   * Used for the root element if the layout is vertical.
-   */
-  vertical?: string;
-}
-
-interface NavigationProps extends ReactToolbox.Props {
-  /**
-   * Array of objects that will be represented as <Button/> so the keys will be transferred as properties the Button Component.
-   */
-  actions?: any[];
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * Array of objects similar to actions but that will be rendered as <Link/> component definition.
-   */
-  routes?: any[];
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: NavigationTheme;
-  /**
-   * Type of the navigation, it can be vertical or horizontal.
-   * @default horizontal
-   */
-  type?: "vertical" | "horizontal";
-}
-
-export class Navigation extends React.Component<NavigationProps, {}> { }
diff --git a/lib/navigation/index.js b/lib/navigation/index.js
deleted file mode 100644
index 386b3ecee..000000000
--- a/lib/navigation/index.js
+++ /dev/null
@@ -1,26 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Navigation = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Navigation = require('./Navigation.js');
-
-var _button = require('../button');
-
-var _link = require('../link');
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var ThemedNavigation = (0, _reactCssThemr.themr)(_identifiers.NAVIGATION, _theme2.default)((0, _Navigation.navigationFactory)(_button.Button, _link.Link));
-exports.default = ThemedNavigation;
-exports.Navigation = ThemedNavigation;
\ No newline at end of file
diff --git a/lib/navigation/theme.scss b/lib/navigation/theme.scss
deleted file mode 100644
index 2d8375fd2..000000000
--- a/lib/navigation/theme.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.horizontal {
-  > [data-react-toolbox="button"], > [data-react-toolbox="link"] {
-    display: inline-block;
-    margin: 0 $navigation-space / 2;
-  }
-}
-
-.vertical {
-  > [data-react-toolbox="button"], > [data-react-toolbox="link"] {
-    display: block;
-    margin: $navigation-space / 2;
-  }
-}
-
-.vertical, .horizontal {
-  padding: $navigation-space / 2;
-
-  > [data-react-toolbox="link"] {
-    color: $navigation-color;
-  }
-}
diff --git a/lib/overlay/Overlay.js b/lib/overlay/Overlay.js
deleted file mode 100644
index 5f189bf77..000000000
--- a/lib/overlay/Overlay.js
+++ /dev/null
@@ -1,133 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Overlay = undefined;
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Portal = require('../hoc/Portal.js');
-
-var _Portal2 = _interopRequireDefault(_Portal);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var Overlay = function (_Component) {
-  _inherits(Overlay, _Component);
-
-  function Overlay() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    _classCallCheck(this, Overlay);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Overlay.__proto__ || Object.getPrototypeOf(Overlay)).call.apply(_ref, [this].concat(args))), _this), _this.handleEscKey = function (e) {
-      if (_this.props.active && _this.props.onEscKeyDown && e.which === 27) {
-        _this.props.onEscKeyDown(e);
-      }
-    }, _temp), _possibleConstructorReturn(_this, _ret);
-  }
-
-  _createClass(Overlay, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      if (this.props.active) {
-        document.body.addEventListener('keydown', this.handleEscKey);
-        document.body.style.overflow = 'hidden';
-      }
-    }
-  }, {
-    key: 'componentWillUpdate',
-    value: function componentWillUpdate(nextProps) {
-      if (nextProps.active && !this.props.active) document.body.style.overflow = 'hidden';
-      if (!nextProps.active && this.props.active && !document.querySelectorAll('[data-react-toolbox="overlay"]')[1]) document.body.style.overflow = '';
-    }
-  }, {
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate() {
-      if (this.props.active) {
-        document.body.addEventListener('keydown', this.handleEscKey);
-      }
-    }
-  }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      if (!document.querySelectorAll('[data-react-toolbox="overlay"]')[1]) document.body.style.overflow = '';
-      document.body.removeEventListener('keydown', this.handleEscKey);
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _classnames;
-
-      var _props = this.props,
-          active = _props.active,
-          className = _props.className,
-          children = _props.children,
-          invisible = _props.invisible,
-          onClick = _props.onClick,
-          theme = _props.theme;
-
-      var _className = (0, _classnames3.default)(theme.overlay, (_classnames = {}, _defineProperty(_classnames, theme.active, active), _defineProperty(_classnames, theme.invisible, invisible), _classnames), className);
-
-      return _react2.default.createElement(
-        _Portal2.default,
-        null,
-        _react2.default.createElement(
-          'div',
-          { className: _className, 'data-react-toolbox': 'overlay' },
-          _react2.default.createElement('div', { className: theme.backdrop, onClick: onClick }),
-          children
-        )
-      );
-    }
-  }]);
-
-  return Overlay;
-}(_react.Component);
-
-Overlay.propTypes = {
-  active: _react.PropTypes.bool,
-  children: _react.PropTypes.node,
-  className: _react.PropTypes.string,
-  invisible: _react.PropTypes.bool,
-  onClick: _react.PropTypes.func,
-  onEscKeyDown: _react.PropTypes.func,
-  theme: _react.PropTypes.shape({
-    active: _react.PropTypes.string,
-    backdrop: _react.PropTypes.string,
-    invisible: _react.PropTypes.string,
-    overlay: _react.PropTypes.string
-  })
-};
-Overlay.defaultProps = {
-  invisible: false
-};
-exports.default = (0, _reactCssThemr.themr)(_identifiers.OVERLAY)(Overlay);
-exports.Overlay = Overlay;
\ No newline at end of file
diff --git a/lib/overlay/_config.scss b/lib/overlay/_config.scss
deleted file mode 100644
index ccba4d3c7..000000000
--- a/lib/overlay/_config.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-$overlay-color: $color-black !default;
-$overlay-opacity: .6 !default;
diff --git a/lib/overlay/index.js b/lib/overlay/index.js
deleted file mode 100644
index 96c77eeee..000000000
--- a/lib/overlay/index.js
+++ /dev/null
@@ -1,22 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Overlay = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Overlay = require('./Overlay.js');
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var ThemedOverlay = (0, _reactCssThemr.themr)(_identifiers.OVERLAY, _theme2.default)(_Overlay.Overlay);
-exports.default = ThemedOverlay;
-exports.Overlay = ThemedOverlay;
\ No newline at end of file
diff --git a/lib/overlay/theme.scss b/lib/overlay/theme.scss
deleted file mode 100644
index e740884ea..000000000
--- a/lib/overlay/theme.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: $z-index-highest;
-  display: flex;
-  width: 100vw;
-  height: 100vh;
-  flex-direction: column;
-  align-content: center;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-  &.invisible > *:not(.backdrop) {
-    pointer-events: all;
-  }
-}
-
-.backdrop {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: $overlay-color;
-  opacity: 0;
-  transition-timing-function: $animation-curve-default;
-  transition-duration: $animation-duration;
-  transition-property: opacity;
-}
-
-.active {
-  pointer-events: all;
-  > .backdrop {
-    opacity: $overlay-opacity;
-  }
-}
diff --git a/lib/progress_bar/ProgressBar.js b/lib/progress_bar/ProgressBar.js
deleted file mode 100644
index 6e83348b7..000000000
--- a/lib/progress_bar/ProgressBar.js
+++ /dev/null
@@ -1,162 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ProgressBar = undefined;
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _prefixer = require('../utils/prefixer.js');
-
-var _prefixer2 = _interopRequireDefault(_prefixer);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var ProgressBar = function (_Component) {
-  _inherits(ProgressBar, _Component);
-
-  function ProgressBar() {
-    _classCallCheck(this, ProgressBar);
-
-    return _possibleConstructorReturn(this, (ProgressBar.__proto__ || Object.getPrototypeOf(ProgressBar)).apply(this, arguments));
-  }
-
-  _createClass(ProgressBar, [{
-    key: 'calculateRatio',
-    value: function calculateRatio(value) {
-      if (value < this.props.min) return 0;
-      if (value > this.props.max) return 1;
-      return (value - this.props.min) / (this.props.max - this.props.min);
-    }
-  }, {
-    key: 'circularStyle',
-    value: function circularStyle() {
-      if (this.props.mode !== 'indeterminate') {
-        return { strokeDasharray: 2 * Math.PI * 25 * this.calculateRatio(this.props.value) + ', 400' };
-      }
-    }
-  }, {
-    key: 'linearStyle',
-    value: function linearStyle() {
-      if (this.props.mode !== 'indeterminate') {
-        return {
-          buffer: (0, _prefixer2.default)({ transform: 'scaleX(' + this.calculateRatio(this.props.buffer) + ')' }),
-          value: (0, _prefixer2.default)({ transform: 'scaleX(' + this.calculateRatio(this.props.value) + ')' })
-        };
-      } else {
-        return {};
-      }
-    }
-  }, {
-    key: 'renderCircular',
-    value: function renderCircular() {
-      return _react2.default.createElement(
-        'svg',
-        { className: this.props.theme.circle, viewBox: '0 0 60 60' },
-        _react2.default.createElement('circle', { className: this.props.theme.path, style: this.circularStyle(), cx: '30', cy: '30', r: '25' })
-      );
-    }
-  }, {
-    key: 'renderLinear',
-    value: function renderLinear() {
-      var _linearStyle = this.linearStyle(),
-          buffer = _linearStyle.buffer,
-          value = _linearStyle.value;
-
-      return _react2.default.createElement(
-        'div',
-        null,
-        _react2.default.createElement('span', { ref: 'buffer', 'data-ref': 'buffer', className: this.props.theme.buffer, style: buffer }),
-        _react2.default.createElement('span', { ref: 'value', 'data-ref': 'value', className: this.props.theme.value, style: value })
-      );
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _classnames;
-
-      var _props = this.props,
-          className = _props.className,
-          disabled = _props.disabled,
-          max = _props.max,
-          min = _props.min,
-          mode = _props.mode,
-          multicolor = _props.multicolor,
-          type = _props.type,
-          theme = _props.theme,
-          value = _props.value;
-
-      var _className = (0, _classnames3.default)(theme[type], (_classnames = {}, _defineProperty(_classnames, theme[mode], mode), _defineProperty(_classnames, theme.multicolor, multicolor), _classnames), className);
-
-      return _react2.default.createElement(
-        'div',
-        {
-          disabled: disabled,
-          'data-react-toolbox': 'progress-bar',
-          'aria-valuenow': value,
-          'aria-valuemin': min,
-          'aria-valuemax': max,
-          className: _className
-        },
-        type === 'circular' ? this.renderCircular() : this.renderLinear()
-      );
-    }
-  }]);
-
-  return ProgressBar;
-}(_react.Component);
-
-ProgressBar.propTypes = {
-  buffer: _react.PropTypes.number,
-  className: _react.PropTypes.string,
-  disabled: _react.PropTypes.bool,
-  max: _react.PropTypes.number,
-  min: _react.PropTypes.number,
-  mode: _react.PropTypes.oneOf(['determinate', 'indeterminate']),
-  multicolor: _react.PropTypes.bool,
-  theme: _react.PropTypes.shape({
-    buffer: _react.PropTypes.string,
-    circle: _react.PropTypes.string,
-    circular: _react.PropTypes.string,
-    indeterminate: _react.PropTypes.string,
-    linear: _react.PropTypes.string,
-    multicolor: _react.PropTypes.string,
-    path: _react.PropTypes.string,
-    value: _react.PropTypes.string
-  }),
-  type: _react.PropTypes.oneOf(['linear', 'circular']),
-  value: _react.PropTypes.number
-};
-ProgressBar.defaultProps = {
-  buffer: 0,
-  className: '',
-  max: 100,
-  min: 0,
-  mode: 'indeterminate',
-  multicolor: false,
-  type: 'linear',
-  value: 0
-};
-exports.default = (0, _reactCssThemr.themr)(_identifiers.PROGRESS_BAR)(ProgressBar);
-exports.ProgressBar = ProgressBar;
\ No newline at end of file
diff --git a/lib/progress_bar/__test__/index.spec.js b/lib/progress_bar/__test__/index.spec.js
deleted file mode 100644
index ec2d796d7..000000000
--- a/lib/progress_bar/__test__/index.spec.js
+++ /dev/null
@@ -1,92 +0,0 @@
-'use strict';
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _expect = require('expect');
-
-var _expect2 = _interopRequireDefault(_expect);
-
-var _reactAddonsTestUtils = require('react-addons-test-utils');
-
-var _reactAddonsTestUtils2 = _interopRequireDefault(_reactAddonsTestUtils);
-
-var _ProgressBar = require('../ProgressBar');
-
-var _ProgressBar2 = _interopRequireDefault(_ProgressBar);
-
-var _theme = require('../theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-var _testing = require('../../utils/testing');
-
-var _testing2 = _interopRequireDefault(_testing);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-describe('ProgressBar', function () {
-  var progressBar = void 0;
-
-  describe('#calculateRatio', function () {
-    before(function () {
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_ProgressBar2.default, { min: 100, max: 300, theme: _theme2.default }));
-      progressBar = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _ProgressBar.ProgressBar);
-    });
-
-    it('calculates the right ratio', function () {
-      (0, _expect2.default)(progressBar.calculateRatio(150)).toEqual(0.25);
-    });
-
-    it('gets 0 when value is less than min', function () {
-      (0, _expect2.default)(progressBar.calculateRatio(10)).toEqual(0);
-    });
-
-    it('gets 1 when value is more than max', function () {
-      (0, _expect2.default)(progressBar.calculateRatio(400)).toEqual(1);
-    });
-  });
-
-  describe('#render', function () {
-    var buffer = void 0,
-        value = void 0,
-        wrapper = void 0,
-        circle = void 0,
-        strokeLength = void 0;
-
-    it('renders the value and buffer bars when it is linear', function () {
-      wrapper = _testing2.default.shallowRenderComponent(_ProgressBar.ProgressBar, { theme: _theme2.default }).props.children;
-      (0, _expect2.default)(wrapper.props.children.length).toEqual(2);
-      (0, _expect2.default)(wrapper.props.children[0].ref).toEqual('buffer');
-      (0, _expect2.default)(wrapper.props.children[1].ref).toEqual('value');
-    });
-
-    it('renders the value and buffer bars when it is linear', function () {
-      progressBar = _testing2.default.shallowRenderComponent(_ProgressBar.ProgressBar, { mode: 'determinate', value: 30, buffer: 60, theme: _theme2.default });
-      buffer = progressBar.props.children.props.children[0];
-      value = progressBar.props.children.props.children[1];
-      (0, _expect2.default)(buffer.props.style.transform).toEqual('scaleX(' + 0.6 + ')');
-      (0, _expect2.default)(value.props.style.transform).toEqual('scaleX(' + 0.3 + ')');
-    });
-
-    it('renders the svg circle when it is circular', function () {
-      progressBar = _testing2.default.shallowRenderComponent(_ProgressBar.ProgressBar, { type: 'circular', theme: _theme2.default });
-      (0, _expect2.default)(progressBar.props.children.type).toEqual('svg');
-      (0, _expect2.default)(progressBar.props.children.props.children.type).toEqual('circle');
-    });
-
-    it('renders the proper circle length style when it is circular and determinate', function () {
-      progressBar = _testing2.default.shallowRenderComponent(_ProgressBar.ProgressBar, { type: 'circular', mode: 'determinate', value: 30, theme: _theme2.default });
-      circle = progressBar.props.children.props.children;
-      strokeLength = 2 * Math.PI * circle.props.r * 0.3;
-      (0, _expect2.default)(circle.props.style.strokeDasharray).toEqual(strokeLength + ', 400');
-    });
-
-    it('contains mode and className in its className', function () {
-      progressBar = _testing2.default.shallowRenderComponent(_ProgressBar.ProgressBar, { mode: 'determinate', className: 'tight', theme: _theme2.default });
-      (0, _expect2.default)(progressBar.props.className).toContain(_theme2.default.determinate);
-      (0, _expect2.default)(progressBar.props.className).toContain(_theme2.default.tight);
-    });
-  });
-});
\ No newline at end of file
diff --git a/lib/progress_bar/_config.scss b/lib/progress_bar/_config.scss
deleted file mode 100644
index 143a80963..000000000
--- a/lib/progress_bar/_config.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-$progress-height: .4 * $unit !default;
-$progress-main-color: $color-primary !default;
-$progress-secondary-color: rgba($color-primary-contrast, 0.7) !default;
-$progress-disabled-color: rgba($color-black, 0.26) !default;
-$circle-wrapper-width: 60 !default;
-$circle-radius: 25 !default;
-$scale-ratio: $circle-radius / 20 !default;
diff --git a/lib/progress_bar/index.d.ts b/lib/progress_bar/index.d.ts
deleted file mode 100644
index 8b0b961e1..000000000
--- a/lib/progress_bar/index.d.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface ProgressBarTheme {
-  /**
-   * Used to style the buffer element in the linear progress.
-   */
-  buffer?: string;
-  /**
-   * Used for the circle element in the circular progress.
-   */
-  circle?: string;
-  /**
-   * Used for the root element when the type is circular.
-   */
-  circular?: string;
-  /**
-   * Added to the root element if mode is indeterminate.
-   */
-  indeterminate?: string;
-  /**
-   * Used for the root element when the type is linear.
-   */
-  linear?: string;
-  /**
-   * Added to the root if the component is multicolor (circular).
-   */
-  multicolor?: string;
-  /**
-   * Used for the inner path in the circular progress.
-   */
-  path?: string;
-  /**
-   * Used to style the value element in the linear progress.
-   */
-  value?: string;
-}
-
-interface ProgressBarProps extends ReactToolbox.Props {
-  /**
-   * Value of a secondary progress bar useful for buffering.
-   * @default 0
-   */
-  buffer?: number;
-  /**
-   * If true, component will be disabled.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * Maximum value permitted.
-   * @default 100
-   */
-  max?: number;
-  /**
-   * Minimum value permitted.
-   * @default 0
-   */
-  min?: number;
-  /**
-   * Mode of the progress bar, it can be determinate or indeterminate.
-   * @default indeterminate
-   */
-  mode?: "determinate" | "indeterminate";
-  /**
-   * If true, the circular progress bar will be changing its color.
-   * @default false
-   */
-  multicolor?: boolean;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: ProgressBarTheme;
-  /**
-   * Type of the progress bar, it can be circular or linear.
-   * @default linear
-   */
-  type?: "linear" | "circular";
-  /**
-   * Value of the current progress.
-   * @default 0
-   */
-  value?: number;
-}
-
-export class ProgressBar extends React.Component<ProgressBarProps, {}> { }
-
-export default ProgressBar;
diff --git a/lib/progress_bar/index.js b/lib/progress_bar/index.js
deleted file mode 100644
index a61b09a24..000000000
--- a/lib/progress_bar/index.js
+++ /dev/null
@@ -1,23 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ProgressBar = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _ProgressBar = require('./ProgressBar.js');
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var ThemedProgressBar = (0, _reactCssThemr.themr)(_identifiers.PROGRESS_BAR, _theme2.default)(_ProgressBar.ProgressBar);
-
-exports.default = ThemedProgressBar;
-exports.ProgressBar = ThemedProgressBar;
\ No newline at end of file
diff --git a/lib/progress_bar/theme.scss b/lib/progress_bar/theme.scss
deleted file mode 100644
index 6f5cc2c1c..000000000
--- a/lib/progress_bar/theme.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.linear {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  height: $progress-height;
-  overflow: hidden;
-  background: $color-divider;
-  &.indeterminate .value {
-    transform-origin: center center;
-    animation: linear-indeterminate-bar 1s linear infinite;
-  }
-}
-
-.value, .buffer {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  transition-timing-function: $animation-curve-default;
-  transition-duration: $animation-duration;
-  transform: scaleX(0);
-  transform-origin: left center;
-}
-
-.value {
-  background-color: $progress-main-color;
-}
-
-[disabled] .value {
-  background-color: $progress-disabled-color;
-}
-
-.buffer {
-  background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
-  linear-gradient(to right, $progress-main-color, $progress-main-color);
-}
-
-[disabled] .buffer {
-  background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
-  linear-gradient(to right, $progress-disabled-color, $progress-disabled-color);
-}
-
-.circular {
-  position: relative;
-  display: inline-block;
-  width: $circle-wrapper-width * 1px;
-  height: $circle-wrapper-width * 1px;
-  transform: rotate(-90deg);
-  &.indeterminate {
-    .circle {
-      animation: circular-indeterminate-bar-rotate 2s linear infinite;
-    }
-    .path {
-      animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite;
-
-      stroke-dasharray: $scale-ratio * 1, $scale-ratio * 200;
-      stroke-dashoffset: 0;
-    }
-    &.multicolor .path {
-      animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite,
-      colors (1.5s * 4) ease-in-out infinite;
-    }
-  }
-}
-
-.circle {
-  width: 100%;
-  height: 100%;
-}
-
-.path {
-  transition: stroke-dasharray $animation-duration $animation-curve-default;
-  fill: none;
-
-  stroke-dasharray: 0, $scale-ratio * 200;
-  stroke-dashoffset: 0;
-  stroke-linecap: round;
-  stroke-miterlimit: 20;
-  stroke-width: 4;
-  stroke: $progress-main-color;
-}
-
-@keyframes linear-indeterminate-bar {
-  0% {
-    transform: translate(-50%) scaleX(0);
-  }
-
-  50% {
-    transform: translate(-0%) scaleX(.3);
-  }
-
-  100% {
-    transform: translate(50%) scaleX(0);
-  }
-}
-
-@keyframes circular-indeterminate-bar-rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes circular-indeterminate-bar-dash {
-  0% {
-    stroke-dasharray: $scale-ratio * 1, $scale-ratio * 200;
-    stroke-dashoffset: $scale-ratio * 0;
-  }
-
-  50% {
-    stroke-dasharray: $scale-ratio * 89, $scale-ratio * 200;
-    stroke-dashoffset: $scale-ratio * -35;
-  }
-
-  100% {
-    stroke-dasharray: $scale-ratio * 89, $scale-ratio * 200;
-    stroke-dashoffset: $scale-ratio * -124;
-  }
-}
-
-@keyframes colors {
-  0% {
-    stroke: #4285f4;
-  }
-
-  25% {
-    stroke: #de3e35;
-  }
-
-  50% {
-    stroke: #f7c223;
-  }
-
-  75% {
-    stroke: #1b9a59;
-  }
-
-  100% {
-    stroke: #4285f4;
-  }
-}
diff --git a/lib/radio/Radio.js b/lib/radio/Radio.js
deleted file mode 100644
index a3301d1c7..000000000
--- a/lib/radio/Radio.js
+++ /dev/null
@@ -1,45 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-var factory = function factory(ripple) {
-  var Radio = function Radio(_ref) {
-    var checked = _ref.checked,
-        onMouseDown = _ref.onMouseDown,
-        theme = _ref.theme,
-        other = _objectWithoutProperties(_ref, ['checked', 'onMouseDown', 'theme']);
-
-    return _react2.default.createElement('div', _extends({
-      'data-react-toolbox': 'radio',
-      className: theme[checked ? 'radioChecked' : 'radio'],
-      onMouseDown: onMouseDown
-    }, other));
-  };
-
-  Radio.propTypes = {
-    checked: _react.PropTypes.bool,
-    children: _react.PropTypes.any,
-    onMouseDown: _react.PropTypes.func,
-    theme: _react.PropTypes.shape({
-      radio: _react.PropTypes.string,
-      radioChecked: _react.PropTypes.string,
-      ripple: _react.PropTypes.string
-    })
-  };
-
-  return ripple(Radio);
-};
-
-exports.default = factory;
\ No newline at end of file
diff --git a/lib/radio/RadioButton.js b/lib/radio/RadioButton.js
deleted file mode 100644
index 3af9f039e..000000000
--- a/lib/radio/RadioButton.js
+++ /dev/null
@@ -1,165 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.RadioButton = exports.radioButtonFactory = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Ripple = require('../ripple/Ripple.js');
-
-var _Ripple2 = _interopRequireDefault(_Ripple);
-
-var _Radio = require('./Radio.js');
-
-var _Radio2 = _interopRequireDefault(_Radio);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(Radio) {
-  var RadioButton = function (_Component) {
-    _inherits(RadioButton, _Component);
-
-    function RadioButton() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, RadioButton);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RadioButton.__proto__ || Object.getPrototypeOf(RadioButton)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
-        var _this$props = _this.props,
-            checked = _this$props.checked,
-            disabled = _this$props.disabled,
-            onChange = _this$props.onChange;
-
-        if (event.pageX !== 0 && event.pageY !== 0) _this.blur();
-        if (!disabled && !checked && onChange) onChange(event, _this);
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(RadioButton, [{
-      key: 'blur',
-      value: function blur() {
-        this.inputNode && this.inputNode.blur();
-      }
-    }, {
-      key: 'focus',
-      value: function focus() {
-        this.inputNode && this.inputNode.focus();
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var _this2 = this;
-
-        var _props = this.props,
-            checked = _props.checked,
-            children = _props.children,
-            className = _props.className,
-            disabled = _props.disabled,
-            label = _props.label,
-            name = _props.name,
-            onChange = _props.onChange,
-            onMouseEnter = _props.onMouseEnter,
-            onMouseLeave = _props.onMouseLeave,
-            theme = _props.theme,
-            others = _objectWithoutProperties(_props, ['checked', 'children', 'className', 'disabled', 'label', 'name', 'onChange', 'onMouseEnter', 'onMouseLeave', 'theme']);
-
-        var _className = (0, _classnames2.default)(theme[this.props.disabled ? 'disabled' : 'field'], className);
-        return _react2.default.createElement(
-          'label',
-          {
-            'data-react-toolbox': 'radio-button',
-            className: _className,
-            onMouseEnter: onMouseEnter,
-            onMouseLeave: onMouseLeave
-          },
-          _react2.default.createElement('input', _extends({}, others, {
-            checked: checked,
-            className: theme.input,
-            disabled: disabled,
-            name: name,
-            onChange: function onChange() {},
-            onClick: this.handleClick,
-            ref: function ref(node) {
-              _this2.inputNode = node;
-            },
-            type: 'radio'
-          })),
-          _react2.default.createElement(Radio, { checked: checked, disabled: disabled, theme: theme }),
-          label ? _react2.default.createElement(
-            'span',
-            { className: theme.text },
-            label
-          ) : null,
-          children
-        );
-      }
-    }]);
-
-    return RadioButton;
-  }(_react.Component);
-
-  RadioButton.propTypes = {
-    checked: _react.PropTypes.bool,
-    children: _react.PropTypes.node,
-    className: _react.PropTypes.string,
-    disabled: _react.PropTypes.bool,
-    label: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.node]),
-    name: _react.PropTypes.string,
-    onBlur: _react.PropTypes.func,
-    onChange: _react.PropTypes.func,
-    onFocus: _react.PropTypes.func,
-    onMouseEnter: _react.PropTypes.func,
-    onMouseLeave: _react.PropTypes.func,
-    theme: _react.PropTypes.shape({
-      disabled: _react.PropTypes.string,
-      field: _react.PropTypes.string,
-      input: _react.PropTypes.string,
-      text: _react.PropTypes.string
-    }),
-    value: _react.PropTypes.any
-  };
-  RadioButton.defaultProps = {
-    checked: false,
-    className: '',
-    disabled: false
-  };
-
-
-  return RadioButton;
-};
-
-var Radio = (0, _Radio2.default)((0, _Ripple2.default)({ centered: true, spread: 2.6 }));
-var RadioButton = factory(Radio);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.RADIO)(RadioButton);
-exports.radioButtonFactory = factory;
-exports.RadioButton = RadioButton;
\ No newline at end of file
diff --git a/lib/radio/RadioGroup.js b/lib/radio/RadioGroup.js
deleted file mode 100644
index 15c87f023..000000000
--- a/lib/radio/RadioGroup.js
+++ /dev/null
@@ -1,99 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.RadioGroup = exports.radioGroupFactory = undefined;
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _RadioButton = require('./RadioButton.js');
-
-var _RadioButton2 = _interopRequireDefault(_RadioButton);
-
-var _react3 = require('../utils/react.js');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(RadioButton) {
-  var RadioGroup = function (_Component) {
-    _inherits(RadioGroup, _Component);
-
-    function RadioGroup() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, RadioGroup);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RadioGroup.__proto__ || Object.getPrototypeOf(RadioGroup)).call.apply(_ref, [this].concat(args))), _this), _this.handleChange = function (value) {
-        if (_this.props.onChange) _this.props.onChange(value);
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(RadioGroup, [{
-      key: 'renderRadioButtons',
-      value: function renderRadioButtons() {
-        var _this2 = this;
-
-        return _react2.default.Children.map(this.props.children, function (child) {
-          return !(0, _react3.isComponentOfType)(RadioButton, child) ? child : _react2.default.cloneElement(child, {
-            checked: child.props.value === _this2.props.value,
-            disabled: _this2.props.disabled || child.props.disabled,
-            onChange: _this2.handleChange.bind(_this2, child.props.value)
-          });
-        });
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        return _react2.default.createElement(
-          'div',
-          { 'data-react-toolbox': 'radio-group', className: this.props.className },
-          this.renderRadioButtons()
-        );
-      }
-    }]);
-
-    return RadioGroup;
-  }(_react.Component);
-
-  RadioGroup.propTypes = {
-    children: _react.PropTypes.node,
-    className: _react.PropTypes.string,
-    disabled: _react.PropTypes.bool,
-    name: _react.PropTypes.string,
-    onChange: _react.PropTypes.func,
-    value: _react.PropTypes.any
-  };
-  RadioGroup.defaultProps = {
-    className: '',
-    disabled: false
-  };
-
-
-  return RadioGroup;
-};
-
-var RadioGroup = factory(_RadioButton2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.RADIO)(RadioGroup);
-exports.radioGroupFactory = factory;
-exports.RadioGroup = RadioGroup;
\ No newline at end of file
diff --git a/lib/radio/_config.scss b/lib/radio/_config.scss
deleted file mode 100644
index 0c335c7cc..000000000
--- a/lib/radio/_config.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-$radio-field-margin-bottom: 1.5 * $unit !default;
-$radio-button-size: 2 * $unit !default;
-$radio-inner-margin: $radio-button-size / 4 !default;
-$radio-inner-color: $color-primary !default;
-$radio-focus-color: rgba($color-black, 0.1) !default;
-$radio-checked-focus-color: rgba($color-primary, 0.26) !default;
-$radio-text-color: $color-black !default;
-$radio-disabled-color: rgba($color-black, 0.26) !default;
-$radio-text-font-size: 1.4 * $unit !default;
diff --git a/lib/radio/index.d.ts b/lib/radio/index.d.ts
deleted file mode 100644
index 8cc2695de..000000000
--- a/lib/radio/index.d.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-interface RadioGroupProps extends ReactToolbox.Props {
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * If true, the group will be displayed as disabled.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * Name for the input element group.
-   */
-  name?: string;
-  /**
-   * Callback function that will be invoked when the value changes.
-   */
-  onChange?: Function;
-  /**
-   * Default value selected in the radio group.
-   */
-  value?: any;
-}
-
-export class RadioGroup extends React.Component<RadioGroupProps, {}> { }
-
-export interface RadioButtonTheme {
-  /**
-   * Used to for the radio element.
-   */
-  radio?: string;
-  /**
-   * Used for the radio element when it's checked.
-   */
-  radioChecked?: string;
-  /**
-   * To provide styles for the ripple.
-   */
-  ripple?: string;
-  /**
-   * Added to the root of the Radio in case it's disabled.
-   */
-  disabled?: string;
-  /**
-   * Used as the root class of the component.
-   */
-  field?: string;
-  /**
-   * Used for the input element.
-   */
-  input?: string;
-  /**
-   * Used to style the text label element.
-   */
-  text?: string;
-}
-
-interface RadioButtonProps extends ReactToolbox.Props {
-  /**
-   * If true, the input element will be selected by default. Transferred from the parent.
-   * @default false
-   */
-  checked?: boolean;
-  /**
-   * If true, the item will be displayed as disabled.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * Label for the radio button.
-   */
-  label?: React.ReactNode | string;
-  /**
-   * Name for the input element.
-   */
-  name?: string;
-  /**
-   * Callback function that will be invoked when the input is blurred.
-   */
-  onBlur?: Function;
-  /**
-   * Callback function that will be invoked when the value changes.
-   */
-  onChange?: Function;
-  /**
-   * Callback function that will be invoked when the input is focused.
-   */
-  onFocus?: Function;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: RadioButtonTheme;
-  /**
-   * Value for the radio button.
-   */
-  value?: any;
-}
-
-export class RadioButton extends React.Component<RadioButtonProps, {}> { }
diff --git a/lib/radio/index.js b/lib/radio/index.js
deleted file mode 100644
index b8cfd8400..000000000
--- a/lib/radio/index.js
+++ /dev/null
@@ -1,36 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.RadioGroup = exports.RadioButton = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _ripple = require('../ripple');
-
-var _ripple2 = _interopRequireDefault(_ripple);
-
-var _Radio = require('./Radio.js');
-
-var _Radio2 = _interopRequireDefault(_Radio);
-
-var _RadioButton = require('./RadioButton.js');
-
-var _RadioGroup = require('./RadioGroup.js');
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var ThemedRadio = (0, _Radio2.default)((0, _ripple2.default)({ centered: true, spread: 2.6 }));
-var ThemedRadioButton = (0, _reactCssThemr.themr)(_identifiers.RADIO, _theme2.default)((0, _RadioButton.radioButtonFactory)(ThemedRadio));
-var ThemedRadioGroup = (0, _reactCssThemr.themr)(_identifiers.RADIO, _theme2.default)((0, _RadioGroup.radioGroupFactory)(ThemedRadioButton));
-
-exports.default = ThemedRadioButton;
-exports.RadioButton = ThemedRadioButton;
-exports.RadioGroup = ThemedRadioGroup;
\ No newline at end of file
diff --git a/lib/radio/theme.scss b/lib/radio/theme.scss
deleted file mode 100644
index 93eac42ef..000000000
--- a/lib/radio/theme.scss
+++ /dev/null
@@ -1,95 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.radio {
-  position: relative;
-  display: inline-block;
-  width: $radio-button-size;
-  height: $radio-button-size;
-  vertical-align: top;
-  cursor: pointer;
-  border: .2 * $unit solid $radio-text-color;
-  border-radius: 50%;
-  &:before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    content: "";
-    background-color: $radio-inner-color;
-    border-radius: 50%;
-    transition: transform $animation-duration $animation-curve-default;
-    transform: scale(0);
-  }
-
-  .ripple {
-    background-color: $radio-inner-color;
-    opacity: .3;
-    transition-duration: 650ms;
-  }
-}
-
-.radioChecked {
-  @extend .radio;
-  border: .2 * $unit solid $radio-inner-color;
-  &:before {
-    transform: scale(0.65);
-  }
-}
-
-.field {
-  position: relative;
-  display: block;
-  height: $radio-button-size;
-  margin-bottom: $radio-field-margin-bottom;
-  white-space: nowrap;
-  vertical-align: middle;
-}
-
-.text {
-  display: inline-block;
-  padding-left: $unit;
-  font-size: $radio-text-font-size;
-  line-height: $radio-button-size;
-  color: $radio-text-color;
-  white-space: nowrap;
-  vertical-align: top;
-}
-
-.input {
-  position: absolute;
-  width: 0;
-  height: 0;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  opacity: 0;
-  appearance: none;
-  &:focus ~ .radio {
-    box-shadow: 0 0 0 $unit $radio-focus-color;
-  }
-  &:focus ~ .radioChecked {
-    box-shadow: 0 0 0 $unit $radio-checked-focus-color;
-  }
-}
-
-.disabled {
-  @extend .field;
-  .text {
-    color: $radio-disabled-color;
-  }
-  .radio {
-    cursor: auto;
-    border-color: $radio-disabled-color;
-  }
-  .radioChecked {
-    cursor: auto;
-    border-color: $radio-disabled-color;
-    &:before {
-      background-color: $radio-disabled-color;
-    }
-  }
-}
diff --git a/lib/ripple/Ripple.js b/lib/ripple/Ripple.js
deleted file mode 100644
index b865cad0b..000000000
--- a/lib/ripple/Ripple.js
+++ /dev/null
@@ -1,387 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactDom = require('react-dom');
-
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _immutabilityHelper = require('immutability-helper');
-
-var _immutabilityHelper2 = _interopRequireDefault(_immutabilityHelper);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _events = require('../utils/events');
-
-var _events2 = _interopRequireDefault(_events);
-
-var _prefixer = require('../utils/prefixer');
-
-var _prefixer2 = _interopRequireDefault(_prefixer);
-
-var _utils = require('../utils/utils');
-
-var _utils2 = _interopRequireDefault(_utils);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-var defaults = {
-  centered: false,
-  className: '',
-  multiple: true,
-  spread: 2,
-  theme: {}
-};
-
-var rippleFactory = function rippleFactory() {
-  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
-  var _defaults$options = _extends({}, defaults, options),
-      defaultCentered = _defaults$options.centered,
-      defaultClassName = _defaults$options.className,
-      defaultMultiple = _defaults$options.multiple,
-      defaultSpread = _defaults$options.spread,
-      defaultTheme = _defaults$options.theme,
-      props = _objectWithoutProperties(_defaults$options, ['centered', 'className', 'multiple', 'spread', 'theme']);
-
-  return function (ComposedComponent) {
-    var RippledComponent = function (_Component) {
-      _inherits(RippledComponent, _Component);
-
-      function RippledComponent() {
-        var _ref;
-
-        var _temp, _this, _ret;
-
-        _classCallCheck(this, RippledComponent);
-
-        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
-
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RippledComponent.__proto__ || Object.getPrototypeOf(RippledComponent)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-          ripples: {}
-        }, _this.handleMouseDown = function (event) {
-          if (_this.props.onMouseDown) _this.props.onMouseDown(event);
-          if (!_this.props.disabled) {
-            var _events$getMousePosit = _events2.default.getMousePosition(event),
-                x = _events$getMousePosit.x,
-                y = _events$getMousePosit.y;
-
-            _this.animateRipple(x, y, false);
-          }
-        }, _this.handleTouchStart = function (event) {
-          if (_this.props.onTouchStart) _this.props.onTouchStart(event);
-          if (!_this.props.disabled) {
-            var _events$getTouchPosit = _events2.default.getTouchPosition(event),
-                x = _events$getTouchPosit.x,
-                y = _events$getTouchPosit.y;
-
-            _this.animateRipple(x, y, true);
-          }
-        }, _temp), _possibleConstructorReturn(_this, _ret);
-      }
-
-      _createClass(RippledComponent, [{
-        key: 'componentDidUpdate',
-        value: function componentDidUpdate(prevProps, prevState) {
-          // If a new ripple was just added, add a remove event listener to its animation
-          if (Object.keys(prevState.ripples).length < Object.keys(this.state.ripples).length) {
-            this.addRippleRemoveEventListener(this.getLastKey());
-          }
-        }
-      }, {
-        key: 'componentWillUnmount',
-        value: function componentWillUnmount() {
-          var _this2 = this;
-
-          // Remove document event listeners for ripple if they still exists
-          Object.keys(this.state.ripples).forEach(function (key) {
-            _this2.state.ripples[key].endRipple();
-          });
-        }
-
-        /**
-         * Add an event listener to the reference with given key so when the animation transition
-         * ends we can be sure that it finished and it can be safely removed from the state.
-         * This function is called whenever a new ripple is added to the component.
-         *
-         * @param {String} rippleKey Is the key of the ripple to add the event.
-         */
-
-      }, {
-        key: 'addRippleRemoveEventListener',
-        value: function addRippleRemoveEventListener(rippleKey) {
-          var self = this;
-          _events2.default.addEventListenerOnTransitionEnded(this.refs[rippleKey], function onOpacityEnd(e) {
-            if (e.propertyName === 'opacity') {
-              if (self.props.onRippleEnded) self.props.onRippleEnded(e);
-              _events2.default.removeEventListenerOnTransitionEnded(self.refs[rippleKey], onOpacityEnd);
-              self.setState({ ripples: _utils2.default.removeObjectKey(rippleKey, self.state.ripples) });
-            }
-          });
-        }
-
-        /**
-         * Start a ripple animation on an specific point with touch or mouse events. First
-         * decides if the animation should trigger. If the ripple is multiple or there is no
-         * ripple present, it creates a new key. If it's a simple ripple and already exists,
-         * it just restarts the current ripple. The animation happens in two state changes
-         * to allow triggering via css.
-         *
-         * @param {Number} x Coordinate X on the screen where animation should start
-         * @param {Number} y Coordinate Y on the screen where animation should start
-         * @param {Boolean} isTouch Use events from touch or mouse.
-         */
-
-      }, {
-        key: 'animateRipple',
-        value: function animateRipple(x, y, isTouch) {
-          var _this3 = this;
-
-          if (this.rippleShouldTrigger(isTouch)) {
-            (function () {
-              var _getDescriptor = _this3.getDescriptor(x, y),
-                  top = _getDescriptor.top,
-                  left = _getDescriptor.left,
-                  width = _getDescriptor.width;
-
-              var noRipplesActive = Object.keys(_this3.state.ripples).length === 0;
-              var key = _this3.props.rippleMultiple || noRipplesActive ? _this3.getNextKey() : _this3.getLastKey();
-              var endRipple = _this3.addRippleDeactivateEventListener(isTouch, key);
-              var initialState = { active: false, restarting: true, top: top, left: left, width: width, endRipple: endRipple };
-              var runningState = { active: true, restarting: false };
-              _this3.setState((0, _immutabilityHelper2.default)(_this3.state, { ripples: _defineProperty({}, key, { $set: initialState }) }), function () {
-                _this3.refs[key].offsetWidth; //eslint-disable-line no-unused-expressions
-                _this3.setState((0, _immutabilityHelper2.default)(_this3.state, { ripples: _defineProperty({}, key, { $merge: runningState }) }));
-              });
-            })();
-          }
-        }
-
-        /**
-         * Determine if a ripple should start depending if its a touch event. For mobile both
-         * touchStart and mouseDown are launched so in case is touch we should always trigger
-         * but if its not we should check if a touch was already triggered to decide.
-         *
-         * @param {Boolean} isTouch True in case a touch event triggered the ripple false otherwise.
-         * @return {Boolean} True in case the ripple should trigger or false if it shouldn't.
-         */
-
-      }, {
-        key: 'rippleShouldTrigger',
-        value: function rippleShouldTrigger(isTouch) {
-          var shouldStart = isTouch ? true : !this.touchCache;
-          this.touchCache = isTouch;
-          return shouldStart;
-        }
-
-        /**
-         * Find out a descriptor object for the ripple element being created depending on
-         * the position where the it was triggered and the component's dimensions.
-         *
-         * @param {Number} x Coordinate x in the viewport where ripple was triggered
-         * @param {Number} y Coordinate y in the viewport where ripple was triggered
-         * @return {Object} Descriptor element including position and size of the element
-         */
-
-      }, {
-        key: 'getDescriptor',
-        value: function getDescriptor(x, y) {
-          var _ReactDOM$findDOMNode = _reactDom2.default.findDOMNode(this).getBoundingClientRect(),
-              left = _ReactDOM$findDOMNode.left,
-              top = _ReactDOM$findDOMNode.top,
-              height = _ReactDOM$findDOMNode.height,
-              width = _ReactDOM$findDOMNode.width;
-
-          var _props = this.props,
-              centered = _props.rippleCentered,
-              spread = _props.rippleSpread;
-
-          return {
-            left: centered ? 0 : x - left - width / 2,
-            top: centered ? 0 : y - top - height / 2,
-            width: width * spread
-          };
-        }
-
-        /**
-         * Increments and internal counter and returns the next value as a string. It
-         * is used to assign key references to new ripple elements.
-         *
-         * @return {String} Key to be assigned to a ripple.
-         */
-
-      }, {
-        key: 'getNextKey',
-        value: function getNextKey() {
-          this.currentCount = this.currentCount ? this.currentCount + 1 : 1;
-          return 'ripple' + this.currentCount;
-        }
-
-        /**
-         * Return the last generated key for a ripple element. When there is only one ripple
-         * and to get the reference when a ripple was just created.
-         *
-         * @return {String} The last generated ripple key.
-         */
-
-      }, {
-        key: 'getLastKey',
-        value: function getLastKey() {
-          return 'ripple' + this.currentCount;
-        }
-
-        /**
-         * Add an event listener to the document needed to deactivate a ripple and make it dissappear.
-         * Deactivation can happen with a touchend or mouseup depending on the trigger type. The
-         * ending function is created from a factory function and returned.
-         *
-         * @param {Boolean} isTouch True in case the trigger was a touch event false otherwise.
-         * @param {String} rippleKey It's a key to identify the ripple that should be deactivated.
-         * @return {Function} Callback function that deactivates the ripple and removes the event listener
-         */
-
-      }, {
-        key: 'addRippleDeactivateEventListener',
-        value: function addRippleDeactivateEventListener(isTouch, rippleKey) {
-          var eventType = isTouch ? 'touchend' : 'mouseup';
-          var endRipple = this.createRippleDeactivateCallback(eventType, rippleKey);
-          document.addEventListener(eventType, endRipple);
-          return endRipple;
-        }
-
-        /**
-         * Generates a function that can be called to deactivate a given ripple and remove its finishing
-         * event listener. If is generated because we need to store it to be called on unmount in case
-         * the ripple is still running.
-         *
-         * @param {String} eventType Is the event type that can be touchend or mouseup
-         * @param {String} rippleKey Is the key representing the ripple
-         * @return {Function} Callback function that deactivates the ripple and removes the listener
-         */
-
-      }, {
-        key: 'createRippleDeactivateCallback',
-        value: function createRippleDeactivateCallback(eventType, rippleKey) {
-          var self = this;
-          return function endRipple() {
-            document.removeEventListener(eventType, endRipple);
-            self.setState({ ripples: (0, _immutabilityHelper2.default)(self.state.ripples, _defineProperty({}, rippleKey, { $merge: { active: false } })) });
-          };
-        }
-      }, {
-        key: 'renderRipple',
-        value: function renderRipple(key, className, _ref2) {
-          var _classnames;
-
-          var active = _ref2.active,
-              left = _ref2.left,
-              restarting = _ref2.restarting,
-              top = _ref2.top,
-              width = _ref2.width;
-
-          var scale = restarting ? 0 : 1;
-          var transform = 'translate3d(' + (-width / 2 + left) + 'px, ' + (-width / 2 + top) + 'px, 0) scale(' + scale + ')';
-          var _className = (0, _classnames3.default)(this.props.theme.ripple, (_classnames = {}, _defineProperty(_classnames, this.props.theme.rippleActive, active), _defineProperty(_classnames, this.props.theme.rippleRestarting, restarting), _classnames), className);
-          return _react2.default.createElement(
-            'span',
-            _extends({ key: key, 'data-react-toolbox': 'ripple', className: this.props.theme.rippleWrapper }, props),
-            _react2.default.createElement('span', {
-              role: 'ripple',
-              ref: key,
-              className: _className,
-              style: (0, _prefixer2.default)({ transform: transform }, { width: width, height: width })
-            })
-          );
-        }
-      }, {
-        key: 'render',
-        value: function render() {
-          var _this4 = this;
-
-          var ripples = this.state.ripples;
-
-          var _props2 = this.props,
-              onRippleEnded = _props2.onRippleEnded,
-              rippleCentered = _props2.rippleCentered,
-              rippleMultiple = _props2.rippleMultiple,
-              rippleSpread = _props2.rippleSpread,
-              children = _props2.children,
-              ripple = _props2.ripple,
-              rippleClassName = _props2.rippleClassName,
-              other = _objectWithoutProperties(_props2, ['onRippleEnded', 'rippleCentered', 'rippleMultiple', 'rippleSpread', 'children', 'ripple', 'rippleClassName']);
-
-          if (!ripple) return _react2.default.createElement(ComposedComponent, _extends({ children: children }, other));
-          return _react2.default.createElement(
-            ComposedComponent,
-            _extends({}, other, { onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart }),
-            children,
-            Object.keys(ripples).map(function (key) {
-              return _this4.renderRipple(key, rippleClassName, ripples[key]);
-            })
-          );
-        }
-      }]);
-
-      return RippledComponent;
-    }(_react.Component);
-
-    RippledComponent.propTypes = {
-      children: _react.PropTypes.any,
-      disabled: _react.PropTypes.bool,
-      onRippleEnded: _react.PropTypes.func,
-      ripple: _react.PropTypes.bool,
-      rippleCentered: _react.PropTypes.bool,
-      rippleClassName: _react.PropTypes.string,
-      rippleMultiple: _react.PropTypes.bool,
-      rippleSpread: _react.PropTypes.number,
-      theme: _react.PropTypes.shape({
-        ripple: _react.PropTypes.string,
-        rippleActive: _react.PropTypes.string,
-        rippleRestarting: _react.PropTypes.string,
-        rippleWrapper: _react.PropTypes.string
-      })
-    };
-    RippledComponent.defaultProps = {
-      disabled: false,
-      ripple: true,
-      rippleCentered: defaultCentered,
-      rippleClassName: defaultClassName,
-      rippleMultiple: defaultMultiple,
-      rippleSpread: defaultSpread
-    };
-
-
-    return (0, _reactCssThemr.themr)(_identifiers.RIPPLE, defaultTheme)(RippledComponent);
-  };
-};
-
-exports.default = rippleFactory;
\ No newline at end of file
diff --git a/lib/ripple/_config.scss b/lib/ripple/_config.scss
deleted file mode 100644
index 8c26b6f10..000000000
--- a/lib/ripple/_config.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-$ripple-duration: 800ms !default;
-$ripple-final-opacity: .3 !default;
-$ripple-size: 15 * $unit !default;
diff --git a/lib/ripple/index.d.ts b/lib/ripple/index.d.ts
deleted file mode 100644
index 998de2ab1..000000000
--- a/lib/ripple/index.d.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface RippleTheme {
-  /**
-   * Root classname for the ripple.
-   */
-  ripple?: string;
-  /**
-   * Applied when the ripple is active.
-   */
-  rippleActive?: string;
-  /**
-   * Applied when the ripple is restarting.
-   */
-  rippleRestarting?: string;
-  /**
-   * Wrapper class to fit to the parent element.
-   */
-  rippleWrapper?: string;
-}
-
-interface RippleProps {
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * True in case you want a centered ripple.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * Function that will be called when the ripple animation ends.
-   */
-  onRippleEnded?: Function;
-  /**
-   * Factor to indicate how much should the ripple spread under the component.
-   * @default 2
-   */
-  spread?: number;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: RippleTheme;
-}
-
-export class Ripple extends React.Component<RippleProps, {}> { }
-
-export default Ripple;
diff --git a/lib/ripple/index.js b/lib/ripple/index.js
deleted file mode 100644
index a63d64d47..000000000
--- a/lib/ripple/index.js
+++ /dev/null
@@ -1,21 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _Ripple = require('./Ripple.js');
-
-var _Ripple2 = _interopRequireDefault(_Ripple);
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = function (options) {
-  return (0, _Ripple2.default)(_extends({}, options, { theme: _theme2.default }));
-};
\ No newline at end of file
diff --git a/lib/ripple/theme.scss b/lib/ripple/theme.scss
deleted file mode 100644
index 6212078db..000000000
--- a/lib/ripple/theme.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-%ripple {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  z-index: $z-index-high;
-  pointer-events: none;
-  background-color: currentColor;
-  border-radius: 50%;
-  transform-origin: 50% 50%;
-}
-
-.rippleWrapper {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: $z-index-normal;
-  pointer-events: none;
-}
-
-.ripple {
-  @extend %ripple;
-  transition-duration: $ripple-duration;
-  &.rippleRestarting {
-    opacity: $ripple-final-opacity;
-    transition-property: none;
-  }
-  &.rippleActive {
-    opacity: $ripple-final-opacity;
-    transition-property: transform;
-  }
-  &:not(.rippleActive):not(.rippleRestarting) {
-    opacity: 0;
-    transition-property: opacity, transform;
-  }
-}
diff --git a/lib/slider/Slider.js b/lib/slider/Slider.js
deleted file mode 100644
index ba4efb6da..000000000
--- a/lib/slider/Slider.js
+++ /dev/null
@@ -1,384 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Slider = exports.sliderFactory = undefined;
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactDom = require('react-dom');
-
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _events = require('../utils/events.js');
-
-var _events2 = _interopRequireDefault(_events);
-
-var _utils = require('../utils/utils.js');
-
-var _utils2 = _interopRequireDefault(_utils);
-
-var _ProgressBar = require('../progress_bar/ProgressBar.js');
-
-var _ProgressBar2 = _interopRequireDefault(_ProgressBar);
-
-var _Input = require('../input/Input.js');
-
-var _Input2 = _interopRequireDefault(_Input);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(ProgressBar, Input) {
-  var Slider = function (_Component) {
-    _inherits(Slider, _Component);
-
-    function Slider() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, Slider);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Slider.__proto__ || Object.getPrototypeOf(Slider)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-        inputFocused: false,
-        inputValue: null,
-        sliderLength: 0,
-        sliderStart: 0
-      }, _this.handleInputFocus = function () {
-        _this.setState({
-          inputFocused: true,
-          inputValue: _this.valueForInput(_this.props.value)
-        });
-      }, _this.handleInputChange = function (value) {
-        _this.setState({ inputValue: value });
-      }, _this.handleInputBlur = function (event) {
-        var value = _this.state.inputValue || 0;
-        _this.setState({ inputFocused: false, inputValue: null }, function () {
-          _this.props.onChange(_this.trimValue(value), event);
-        });
-      }, _this.handleKeyDown = function (event) {
-        if ([13, 27].indexOf(event.keyCode) !== -1) _this.getInput().blur();
-        if (event.keyCode === 38) _this.addToValue(_this.props.step);
-        if (event.keyCode === 40) _this.addToValue(-_this.props.step);
-      }, _this.handleMouseDown = function (event) {
-        if (_this.state.inputFocused) _this.getInput().blur();
-        _events2.default.addEventsToDocument(_this.getMouseEventMap());
-        _this.start(_events2.default.getMousePosition(event));
-        _events2.default.pauseEvent(event);
-      }, _this.handleMouseMove = function (event) {
-        _events2.default.pauseEvent(event);
-        _this.move(_events2.default.getMousePosition(event));
-      }, _this.handleMouseUp = function () {
-        _this.end(_this.getMouseEventMap());
-      }, _this.handleResize = function (event, callback) {
-        var _ReactDOM$findDOMNode = _reactDom2.default.findDOMNode(_this.refs.progressbar).getBoundingClientRect(),
-            left = _ReactDOM$findDOMNode.left,
-            right = _ReactDOM$findDOMNode.right;
-
-        var cb = callback || function () {};
-        _this.setState({ sliderStart: left, sliderLength: right - left }, cb);
-      }, _this.handleSliderBlur = function () {
-        _events2.default.removeEventsFromDocument(_this.getKeyboardEvents());
-      }, _this.handleSliderFocus = function () {
-        _events2.default.addEventsToDocument(_this.getKeyboardEvents());
-      }, _this.handleTouchEnd = function () {
-        _this.end(_this.getTouchEventMap());
-      }, _this.handleTouchMove = function (event) {
-        _this.move(_events2.default.getTouchPosition(event));
-      }, _this.handleTouchStart = function (event) {
-        if (_this.state.inputFocused) _this.getInput().blur();
-        _this.start(_events2.default.getTouchPosition(event));
-        _events2.default.addEventsToDocument(_this.getTouchEventMap());
-        _events2.default.pauseEvent(event);
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(Slider, [{
-      key: 'componentDidMount',
-      value: function componentDidMount() {
-        window.addEventListener('resize', this.handleResize);
-        this.handleResize();
-      }
-    }, {
-      key: 'componentWillReceiveProps',
-      value: function componentWillReceiveProps(nextProps) {
-        if (this.state.inputFocused && this.props.value !== nextProps.value) {
-          this.setState({ inputValue: this.valueForInput(nextProps.value) });
-        }
-      }
-    }, {
-      key: 'shouldComponentUpdate',
-      value: function shouldComponentUpdate(nextProps, nextState) {
-        return this.state.inputFocused || !nextState.inputFocused;
-      }
-    }, {
-      key: 'componentWillUnmount',
-      value: function componentWillUnmount() {
-        window.removeEventListener('resize', this.handleResize);
-        _events2.default.removeEventsFromDocument(this.getMouseEventMap());
-        _events2.default.removeEventsFromDocument(this.getTouchEventMap());
-        _events2.default.removeEventsFromDocument(this.getKeyboardEvents());
-      }
-    }, {
-      key: 'addToValue',
-      value: function addToValue(increment) {
-        var value = this.state.inputFocused ? parseFloat(this.state.inputValue) : this.props.value;
-        value = this.trimValue(value + increment);
-        if (value !== this.props.value) this.props.onChange(value);
-      }
-    }, {
-      key: 'getInput',
-      value: function getInput() {
-        return this.refs.input && this.refs.input.getWrappedInstance ? this.refs.input.getWrappedInstance() : this.refs.input;
-      }
-    }, {
-      key: 'getKeyboardEvents',
-      value: function getKeyboardEvents() {
-        return {
-          keydown: this.handleKeyDown
-        };
-      }
-    }, {
-      key: 'getMouseEventMap',
-      value: function getMouseEventMap() {
-        return {
-          mousemove: this.handleMouseMove,
-          mouseup: this.handleMouseUp
-        };
-      }
-    }, {
-      key: 'getTouchEventMap',
-      value: function getTouchEventMap() {
-        return {
-          touchmove: this.handleTouchMove,
-          touchend: this.handleTouchEnd
-        };
-      }
-    }, {
-      key: 'end',
-      value: function end(revents) {
-        _events2.default.removeEventsFromDocument(revents);
-        this.setState({ pressed: false });
-      }
-    }, {
-      key: 'knobOffset',
-      value: function knobOffset() {
-        var _props = this.props,
-            max = _props.max,
-            min = _props.min;
-
-        var translated = this.state.sliderLength * (this.props.value - min) / (max - min);
-        return translated * 100 / this.state.sliderLength;
-      }
-    }, {
-      key: 'move',
-      value: function move(position) {
-        var newValue = this.positionToValue(position);
-        if (newValue !== this.props.value) this.props.onChange(newValue);
-      }
-    }, {
-      key: 'positionToValue',
-      value: function positionToValue(position) {
-        var _state = this.state,
-            start = _state.sliderStart,
-            length = _state.sliderLength;
-        var _props2 = this.props,
-            max = _props2.max,
-            min = _props2.min,
-            step = _props2.step;
-
-        var pos = (position.x - start) / length * (max - min);
-        return this.trimValue(Math.round(pos / step) * step + min);
-      }
-    }, {
-      key: 'start',
-      value: function start(position) {
-        var _this2 = this;
-
-        this.handleResize(null, function () {
-          _this2.setState({ pressed: true });
-          _this2.props.onChange(_this2.positionToValue(position));
-        });
-      }
-    }, {
-      key: 'stepDecimals',
-      value: function stepDecimals() {
-        return (this.props.step.toString().split('.')[1] || []).length;
-      }
-    }, {
-      key: 'trimValue',
-      value: function trimValue(value) {
-        if (value < this.props.min) return this.props.min;
-        if (value > this.props.max) return this.props.max;
-        return _utils2.default.round(value, this.stepDecimals());
-      }
-    }, {
-      key: 'valueForInput',
-      value: function valueForInput(value) {
-        var decimals = this.stepDecimals();
-        return decimals > 0 ? value.toFixed(decimals) : value.toString();
-      }
-    }, {
-      key: 'renderSnaps',
-      value: function renderSnaps() {
-        var _this3 = this;
-
-        if (this.props.snaps) {
-          return _react2.default.createElement(
-            'div',
-            { ref: 'snaps', className: this.props.theme.snaps },
-            _utils2.default.range(0, (this.props.max - this.props.min) / this.props.step).map(function (i) {
-              return _react2.default.createElement('div', { key: 'span-' + i, className: _this3.props.theme.snap });
-            })
-          );
-        }
-      }
-    }, {
-      key: 'renderInput',
-      value: function renderInput() {
-        if (this.props.editable) {
-          var value = this.state.inputFocused ? this.state.inputValue : this.valueForInput(this.props.value);
-          return _react2.default.createElement(Input, {
-            ref: 'input',
-            className: this.props.theme.input,
-            disabled: this.props.disabled,
-            onFocus: this.handleInputFocus,
-            onChange: this.handleInputChange,
-            onBlur: this.handleInputBlur,
-            value: value
-          });
-        }
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var _classnames;
-
-        var theme = this.props.theme;
-
-        var knobStyles = { left: this.knobOffset() + '%' };
-        var className = (0, _classnames3.default)(theme.slider, (_classnames = {}, _defineProperty(_classnames, theme.editable, this.props.editable), _defineProperty(_classnames, theme.disabled, this.props.disabled), _defineProperty(_classnames, theme.pinned, this.props.pinned), _defineProperty(_classnames, theme.pressed, this.state.pressed), _defineProperty(_classnames, theme.ring, this.props.value === this.props.min), _classnames), this.props.className);
-
-        return _react2.default.createElement(
-          'div',
-          {
-            className: className,
-            disabled: this.props.disabled,
-            'data-react-toolbox': 'slider',
-            onBlur: this.handleSliderBlur,
-            onFocus: this.handleSliderFocus,
-            tabIndex: '0'
-          },
-          _react2.default.createElement(
-            'div',
-            {
-              ref: 'slider',
-              className: theme.container,
-              onMouseDown: this.handleMouseDown,
-              onTouchStart: this.handleTouchStart
-            },
-            _react2.default.createElement(
-              'div',
-              {
-                ref: 'knob',
-                className: theme.knob,
-                onMouseDown: this.handleMouseDown,
-                onTouchStart: this.handleTouchStart,
-                style: knobStyles
-              },
-              _react2.default.createElement('div', { className: theme.innerknob, 'data-value': parseInt(this.props.value) })
-            ),
-            _react2.default.createElement(
-              'div',
-              { className: theme.progress },
-              _react2.default.createElement(ProgressBar, {
-                disabled: this.props.disabled,
-                ref: 'progressbar',
-                className: theme.innerprogress,
-                max: this.props.max,
-                min: this.props.min,
-                mode: 'determinate',
-                value: this.props.value
-              }),
-              this.renderSnaps()
-            )
-          ),
-          this.renderInput()
-        );
-      }
-    }]);
-
-    return Slider;
-  }(_react.Component);
-
-  Slider.propTypes = {
-    className: _react.PropTypes.string,
-    disabled: _react.PropTypes.bool,
-    editable: _react.PropTypes.bool,
-    max: _react.PropTypes.number,
-    min: _react.PropTypes.number,
-    onChange: _react.PropTypes.func,
-    pinned: _react.PropTypes.bool,
-    snaps: _react.PropTypes.bool,
-    step: _react.PropTypes.number,
-    theme: _react.PropTypes.shape({
-      container: _react.PropTypes.string,
-      editable: _react.PropTypes.string,
-      innerknob: _react.PropTypes.string,
-      innerprogress: _react.PropTypes.string,
-      input: _react.PropTypes.string,
-      knob: _react.PropTypes.string,
-      pinned: _react.PropTypes.string,
-      pressed: _react.PropTypes.string,
-      progress: _react.PropTypes.string,
-      ring: _react.PropTypes.string,
-      slider: _react.PropTypes.string,
-      snap: _react.PropTypes.string,
-      snaps: _react.PropTypes.string
-    }),
-    value: _react.PropTypes.number
-  };
-  Slider.defaultProps = {
-    className: '',
-    editable: false,
-    max: 100,
-    min: 0,
-    pinned: false,
-    snaps: false,
-    step: 0.01,
-    value: 0
-  };
-
-
-  return Slider;
-};
-
-var Slider = factory(_ProgressBar2.default, _Input2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.SLIDER)(Slider);
-exports.sliderFactory = factory;
-exports.Slider = Slider;
\ No newline at end of file
diff --git a/lib/slider/__tests__/index.spec.js b/lib/slider/__tests__/index.spec.js
deleted file mode 100644
index 92507525b..000000000
--- a/lib/slider/__tests__/index.spec.js
+++ /dev/null
@@ -1,202 +0,0 @@
-'use strict';
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactAddonsTestUtils = require('react-addons-test-utils');
-
-var _reactAddonsTestUtils2 = _interopRequireDefault(_reactAddonsTestUtils);
-
-var _sinon = require('sinon');
-
-var _sinon2 = _interopRequireDefault(_sinon);
-
-var _expect = require('expect');
-
-var _expect2 = _interopRequireDefault(_expect);
-
-var _ProgressBar = require('../../progress_bar/ProgressBar.js');
-
-var _Input = require('../../input/Input.js');
-
-var _Input2 = _interopRequireDefault(_Input);
-
-var _Slider = require('../Slider.js');
-
-var _Slider2 = _interopRequireDefault(_Slider);
-
-var _testing = require('../../utils/testing');
-
-var _testing2 = _interopRequireDefault(_testing);
-
-var _theme = require('../theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-describe('Slider', function () {
-  var slider = void 0,
-      progress = void 0,
-      input = void 0,
-      onChange = void 0;
-
-  describe('#positionToValue', function () {
-    before(function () {
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { min: -500, max: 500 }));
-      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
-      slider.setState({ sliderStart: 500, sliderLength: 100 });
-    });
-
-    it('returns min when position is less than origin', function () {
-      (0, _expect2.default)(slider.positionToValue({ x: 400 })).toEqual(-500);
-    });
-
-    it('returns max when position is more and origin plus length', function () {
-      (0, _expect2.default)(slider.positionToValue({ x: 900 })).toEqual(500);
-    });
-
-    it('returns the proper position when the position is inside slider', function () {
-      (0, _expect2.default)(slider.positionToValue({ x: 520 })).toEqual(-300);
-    });
-  });
-
-  describe('#trimValue', function () {
-    before(function () {
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { min: 0, max: 100, step: 0.1 }));
-      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
-    });
-
-    it('rounds to the proper number', function () {
-      (0, _expect2.default)(slider.trimValue(57.16)).toEqual(57.2);
-      (0, _expect2.default)(slider.trimValue(57.12)).toEqual(57.10);
-    });
-
-    it('returns min if number is less than min', function () {
-      (0, _expect2.default)(slider.trimValue(-57.16)).toEqual(0);
-    });
-
-    it('returns max if number is more than max', function () {
-      (0, _expect2.default)(slider.trimValue(257.16)).toEqual(100);
-    });
-  });
-
-  describe('#valueForInput', function () {
-    before(function () {
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { min: 0, max: 100, step: 0.01 }));
-      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
-    });
-
-    it('returns a fixed number when an integer is given', function () {
-      (0, _expect2.default)(slider.valueForInput(4)).toEqual('4.00');
-    });
-
-    it('returns a fixed number when a float is given', function () {
-      (0, _expect2.default)(slider.valueForInput(4.06)).toEqual('4.06');
-    });
-  });
-
-  describe('#knobOffset', function () {
-    it('returns the corresponding offset for a given value and slider length/start', function () {
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { min: -500, max: 500, value: -250 }));
-      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
-      slider.setState({ sliderStart: 500, sliderLength: 100 });
-      (0, _expect2.default)(slider.knobOffset()).toEqual(25);
-    });
-  });
-
-  describe('#render', function () {
-    it('contains a linear progress bar with proper properties', function () {
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { min: 100, max: 1000, value: 140 }));
-      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
-      progress = _reactAddonsTestUtils2.default.findRenderedComponentWithType(slider, _ProgressBar.ProgressBar);
-      (0, _expect2.default)(progress.props.mode).toEqual('determinate');
-      (0, _expect2.default)(progress.props.type).toEqual('linear');
-      (0, _expect2.default)(progress.props.value).toEqual(140);
-      (0, _expect2.default)(progress.props.min).toEqual(100);
-      (0, _expect2.default)(progress.props.max).toEqual(1000);
-    });
-
-    it('contains an input component if its editable', function () {
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { editable: true, value: 130 }));
-      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
-      input = _reactAddonsTestUtils2.default.findRenderedComponentWithType(slider, _Input2.default);
-      (0, _expect2.default)(parseInt(input.props.value)).toEqual(slider.props.value);
-    });
-
-    it('contains the proper number of snaps when snapped', function () {
-      slider = _testing2.default.shallowRenderComponent(_Slider.Slider, { editable: true, pinned: true, theme: _theme2.default });
-      (0, _expect2.default)(slider.props.className).toContain(_theme2.default.ring);
-      (0, _expect2.default)(slider.props.className).toContain(_theme2.default.pinned);
-      slider = _testing2.default.shallowRenderComponent(_Slider.Slider, { editable: true, value: 50, theme: _theme2.default });
-      (0, _expect2.default)(slider.props.className).toNotContain(_theme2.default.ring);
-    });
-  });
-
-  describe('#events', function () {
-    beforeEach(function () {
-      onChange = _sinon2.default.spy();
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { min: -500, max: 500, onChange: onChange }));
-      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
-      slider.setState({ sliderStart: 0, sliderLength: 1000 });
-      slider.handleResize = function (event, callback) {
-        callback();
-      };
-    });
-
-    it('sets pressed state when knob is clicked', function () {
-      _reactAddonsTestUtils2.default.Simulate.mouseDown(slider.refs.knob);
-      (0, _expect2.default)(slider.state.pressed).toEqual(true);
-    });
-
-    it('sets pressed state when knob is touched', function () {
-      _reactAddonsTestUtils2.default.Simulate.touchStart(slider.refs.knob, { touches: [{ pageX: 200 }] });
-      (0, _expect2.default)(slider.state.pressed).toEqual(true);
-    });
-
-    it('sets a proper value when the slider is clicked', function () {
-      _reactAddonsTestUtils2.default.Simulate.mouseDown(slider.refs.slider, { pageX: 200 });
-      (0, _expect2.default)(onChange.called).toEqual(true);
-      (0, _expect2.default)(onChange.getCall(0).args[0]).toEqual(-300);
-    });
-
-    it('sets a proper value when the slider is touched', function () {
-      _reactAddonsTestUtils2.default.Simulate.touchStart(slider.refs.slider, { touches: [{ pageX: 200, pageY: 0 }] });
-      (0, _expect2.default)(onChange.called).toEqual(true);
-      (0, _expect2.default)(onChange.getCall(0).args[0]).toEqual(-300);
-    });
-
-    it('changes input value when slider changes', function () {
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { editable: true, onChange: onChange }));
-      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
-      slider.setState({ sliderStart: 0, sliderLength: 1000 });
-      slider.handleResize = function (event, callback) {
-        callback();
-      };
-      input = _reactAddonsTestUtils2.default.findRenderedComponentWithType(slider, _Input2.default);
-      _reactAddonsTestUtils2.default.Simulate.mouseDown(slider.refs.slider, { pageX: 900 });
-      (0, _expect2.default)(onChange.called).toEqual(true);
-      (0, _expect2.default)(onChange.getCall(0).args[0]).toEqual(90);
-    });
-
-    it('changes its value when input is blurred', function () {
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { editable: true, value: 50, onChange: onChange }));
-      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
-      input = _reactAddonsTestUtils2.default.findRenderedComponentWithType(slider, _Input.Input);
-      _reactAddonsTestUtils2.default.Simulate.change(input.refs.input, { target: { value: '80' } });
-      _reactAddonsTestUtils2.default.Simulate.blur(input.refs.input);
-      (0, _expect2.default)(onChange.called).toEqual(true);
-      (0, _expect2.default)(onChange.getCall(0).args[0]).toEqual(80);
-    });
-
-    it('calls onChange callback when the value is changed', function () {
-      var onChangeSpy = _sinon2.default.spy();
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Slider2.default, { onChange: onChangeSpy }));
-      slider = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, _Slider.Slider);
-      slider.setState({ sliderStart: 0, sliderLength: 1000 });
-      _reactAddonsTestUtils2.default.Simulate.mouseDown(slider.refs.slider, { pageX: 900 });
-      (0, _expect2.default)(onChangeSpy.called).toEqual(true);
-    });
-  });
-});
\ No newline at end of file
diff --git a/lib/slider/_config.scss b/lib/slider/_config.scss
deleted file mode 100644
index 6563e3015..000000000
--- a/lib/slider/_config.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-$slider-main-color: $color-primary !default;
-$slider-main-color-contrast: $color-primary-contrast !default;
-$slider-disabled-color: rgba(177, 177, 177, 1) !default;
-$slider-snap-color: $color-black !default;
-$slider-knob-size: 3.2 * $unit !default;
-$slider-inner-knob-size: 1.2 * $unit !default;
-$slider-snap-size: .2 * $unit !default;
-$slider-input-width: 5 * $unit !default;
-$slider-bar-height: .2 * $unit !default;
-$slider-pin-size: 2.6 * $unit !default;
-$slider-pin-elevation: 1.7 * $unit !default;
-$slider-side-separation: 1 * $unit !default;
-$slider-empty-knob-border: .2 * $unit !default;
diff --git a/lib/slider/index.d.ts b/lib/slider/index.d.ts
deleted file mode 100644
index 3a58538a4..000000000
--- a/lib/slider/index.d.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface SliderTheme {
-  /**
-   * Used as an inner container of the root component.
-   */
-  container?: string;
-  /**
-   * Added to the root of in case the Slider is editable.
-   */
-  editable?: string;
-  /**
-   * Used to style the inner element of the knob.
-   */
-  innerknob?: string;
-  /**
-   * Provided to the ProgressBar component.
-   */
-  innerprogress?: string;
-  /**
-   * Provided to the Input element in case it's editable.
-   */
-  input?: string;
-  /**
-   * Used to style the outer layer of the knob.
-   */
-  knob?: string;
-  /**
-   * Added to the root in case the Slider is pinned.
-   */
-  pinned?: string;
-  /**
-   * Added to the root in case the state is pressed.
-   */
-  pressed?: string;
-  /**
-   * Used as an outer wrapper for the ProgressBar.
-   */
-  progress?: string;
-  /**
-   * Used in the root when the knob should be a ring.
-   */
-  ring?: string;
-  /**
-   * Class used for the root element.
-   */
-  slider?: string;
-  /**
-   * Used for every individual snap element.
-   */
-  snap?: string;
-  /**
-   * Used as a wrapper for the group of snaps when it's snapped.
-   */
-  snaps?: string;
-}
-
-interface SliderProps extends ReactToolbox.Props {
-  /**
-   * If true, an input is shown and the user can set the slider from keyboard value.
-   * @default false
-   */
-  editable?: boolean;
-  /**
-   * If true, component will be disabled.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * Maximum value permitted.
-   * @default 100
-   */
-  max?: number;
-  /**
-   * Minimum value permitted.
-   * @default 0
-   */
-  min?: number;
-  /**
-   * Callback function that will be invoked when the slider value changes.
-   */
-  onChange?: Function;
-  /**
-   * If true, a pin with numeric value label is shown when the slider thumb is pressed. Use for settings for which users need to know the exact value of the setting.
-   * @default false
-   */
-  pinned?: boolean;
-  /**
-   * If true, the slider thumb snaps to tick marks evenly spaced based on the step property value.
-   * @default false
-   */
-  snaps?: boolean;
-  /**
-   * Amount to vary the value when the knob is moved or increase/decrease is called.
-   * @default 0.01
-   */
-  step?: number;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: SliderTheme;
-  /**
-   * Current value of the slider.
-   * @default 0
-   */
-  value?: number;
-}
-
-export class Slider extends React.Component<SliderProps, {}> { }
-
-export default Slider;
diff --git a/lib/slider/index.js b/lib/slider/index.js
deleted file mode 100644
index ddcc2d7f2..000000000
--- a/lib/slider/index.js
+++ /dev/null
@@ -1,26 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Slider = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _progress_bar = require('../progress_bar');
-
-var _input = require('../input');
-
-var _Slider = require('./Slider.js');
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var ThemedSlider = (0, _reactCssThemr.themr)(_identifiers.SLIDER, _theme2.default)((0, _Slider.sliderFactory)(_progress_bar.ProgressBar, _input.Input));
-exports.default = ThemedSlider;
-exports.Slider = ThemedSlider;
\ No newline at end of file
diff --git a/lib/slider/theme.scss b/lib/slider/theme.scss
deleted file mode 100644
index 310e80097..000000000
--- a/lib/slider/theme.scss
+++ /dev/null
@@ -1,200 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.container {
-  position: relative;
-  width: calc(100% - #{$slider-knob-size});
-  height: $slider-knob-size;
-  margin-right: $slider-knob-size;
-  user-select: none;
-  &:not(:last-child) {
-    margin-right: $slider-side-separation + $slider-knob-size;
-  }
-  &:not(:first-child) {
-    margin-left: $slider-side-separation;
-  }
-}
-
-.knob {
-  position: relative;
-  top: 0;
-  left: 0;
-  z-index: $z-index-higher;
-  display: flex;
-  width: $slider-knob-size;
-  height: $slider-knob-size;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  background-color: transparent;
-}
-
-.innerknob {
-  z-index: $z-index-high;
-  width: $slider-inner-knob-size;
-  height: $slider-inner-knob-size;
-  background-color: $slider-main-color;
-  border-radius: 50%;
-  transition-timing-function: $animation-curve-default;
-  transition-duration: .1s;
-  transition-property: height, width, background-color, border;
-}
-
-.snaps {
-  position: absolute;
-  top: $slider-knob-size / 2 - $slider-snap-size / 2;
-  left: 0;
-  display: flex;
-  width: calc(100% + #{$slider-snap-size});
-  height: $slider-snap-size;
-  flex-direction: row;
-  pointer-events: none;
-  &:after {
-    display: block;
-    width: $slider-snap-size;
-    height: $slider-snap-size;
-    content: "";
-    background-color: $slider-snap-color;
-    border-radius: 50%;
-  }
-}
-
-.snap {
-  flex: 1;
-  &:after {
-    display: block;
-    width: $slider-snap-size;
-    height: $slider-snap-size;
-    content: "";
-    background-color: $slider-snap-color;
-    border-radius: 50%;
-  }
-}
-
-.input {
-  width: $slider-input-width;
-  padding: 0;
-  margin-bottom: 0;
-  > input {
-    text-align: center;
-  }
-}
-
-.progress {
-  position: absolute;
-  top: 0;
-  left: $slider-knob-size / 2;
-  width: 100%;
-  height: 100%;
-  .innerprogress {
-    position: absolute;
-    top: $slider-knob-size / 2 - $slider-bar-height / 2;
-    height: $slider-bar-height;
-    [data-ref="value"] {
-      transition-duration: 0s;
-    }
-  }
-}
-
-.slider {
-  &:focus .knob:before {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: $z-index-normal;
-    content: "";
-    background-color: $slider-main-color;
-    border-radius: 50%;
-    opacity: .26;
-  }
-  &[disabled] {
-    pointer-events: none;
-    cursor: auto;
-    .innerknob {
-      background-color: $slider-disabled-color;
-    }
-  }
-  &.editable {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-  &.pinned .innerknob {
-    &:before {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: $slider-pin-size;
-      height: $slider-pin-size;
-      margin-left: ($slider-knob-size - $slider-pin-size) / 2;
-      content: "";
-      background-color: $slider-main-color;
-      border-radius: 50% 50% 50% 0;
-      transition: transform .2s ease, background-color .18s ease;
-      transform: rotate(-45deg) scale(0) translate(0);
-    }
-    &:after {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: $slider-knob-size;
-      height: $slider-pin-size;
-      font-size: 10px;
-      color: $color-background;
-      text-align: center;
-      content: attr(data-value);
-      transition: transform .2s ease, background-color .18s ease;
-      transform: scale(0) translate(0);
-    }
-  }
-  &.pressed {
-    &.pinned .innerknob {
-      &:before {
-        transition-delay: 100ms;
-        transform: rotate(-45deg) scale(1) translate($slider-pin-elevation, - $slider-pin-elevation);
-      }
-      &:after {
-        transition-delay: 100ms;
-        transform: scale(1) translate(0, - $slider-pin-elevation);
-      }
-    }
-    &:not(.pinned) {
-      &.ring .progress {
-        left: $slider-knob-size / 2 + ($slider-knob-size - $slider-empty-knob-border * 2) / 2;
-        width: calc(100% - #{($slider-knob-size - $slider-empty-knob-border * 2) / 2});
-      }
-      .innerknob {
-        width: 100%;
-        height: 100%;
-        transform: translateZ(0);
-      }
-    }
-  }
-  &.ring {
-    .innerknob {
-      background-color: transparent;
-      border: $slider-empty-knob-border solid $color-divider;
-      &:before {
-        background-color: $slider-main-color;
-      }
-    }
-    .progress {
-      left: $slider-knob-size / 2 + $slider-empty-knob-border * 2;
-      width: calc(100% - #{$slider-empty-knob-border * 2});
-      transition: left .18s ease, width .18s ease;
-    }
-    &.pinned {
-      .innerknob {
-        background-color: $color-background;
-      }
-      .progress {
-        left: $slider-knob-size / 2;
-        width: calc(100%);
-      }
-    }
-  }
-}
diff --git a/lib/snackbar/Snackbar.js b/lib/snackbar/Snackbar.js
deleted file mode 100644
index 653de0162..000000000
--- a/lib/snackbar/Snackbar.js
+++ /dev/null
@@ -1,154 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Snackbar = exports.snackbarFactory = undefined;
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _ActivableRenderer = require('../hoc/ActivableRenderer.js');
-
-var _ActivableRenderer2 = _interopRequireDefault(_ActivableRenderer);
-
-var _Overlay = require('../overlay/Overlay.js');
-
-var _Overlay2 = _interopRequireDefault(_Overlay);
-
-var _Button = require('../button/Button.js');
-
-var _Button2 = _interopRequireDefault(_Button);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(Overlay, Button) {
-  var Snackbar = function (_Component) {
-    _inherits(Snackbar, _Component);
-
-    function Snackbar() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, Snackbar);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Snackbar.__proto__ || Object.getPrototypeOf(Snackbar)).call.apply(_ref, [this].concat(args))), _this), _this.scheduleTimeout = function (props) {
-        var onTimeout = props.onTimeout,
-            timeout = props.timeout;
-
-        if (_this.curTimeout) clearTimeout(_this.curTimeout);
-        _this.curTimeout = setTimeout(function () {
-          if (onTimeout) onTimeout();
-          _this.curTimeout = null;
-        }, timeout);
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(Snackbar, [{
-      key: 'componentDidMount',
-      value: function componentDidMount() {
-        if (this.props.active && this.props.timeout) {
-          this.scheduleTimeout(this.props);
-        }
-      }
-    }, {
-      key: 'componentWillReceiveProps',
-      value: function componentWillReceiveProps(nextProps) {
-        if (nextProps.active && nextProps.timeout) {
-          this.scheduleTimeout(nextProps);
-        }
-      }
-    }, {
-      key: 'componentWillUnmount',
-      value: function componentWillUnmount() {
-        clearTimeout(this.curTimeout);
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var _props = this.props,
-            action = _props.action,
-            active = _props.active,
-            children = _props.children,
-            label = _props.label,
-            onClick = _props.onClick,
-            theme = _props.theme,
-            type = _props.type;
-
-        var className = (0, _classnames3.default)([theme.snackbar, theme[type]], _defineProperty({}, theme.active, active), this.props.className);
-
-        return _react2.default.createElement(
-          Overlay,
-          { invisible: true },
-          _react2.default.createElement(
-            'div',
-            { 'data-react-toolbox': 'snackbar', className: className },
-            _react2.default.createElement(
-              'span',
-              { className: theme.label },
-              label,
-              children
-            ),
-            action ? _react2.default.createElement(Button, { className: theme.button, label: action, onClick: onClick }) : null
-          )
-        );
-      }
-    }]);
-
-    return Snackbar;
-  }(_react.Component);
-
-  Snackbar.propTypes = {
-    action: _react.PropTypes.string,
-    active: _react.PropTypes.bool,
-    children: _react.PropTypes.node,
-    className: _react.PropTypes.string,
-    label: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-    onClick: _react.PropTypes.func,
-    onTimeout: _react.PropTypes.func,
-    theme: _react.PropTypes.shape({
-      accept: _react.PropTypes.string,
-      active: _react.PropTypes.string,
-      button: _react.PropTypes.string,
-      cancel: _react.PropTypes.string,
-      icon: _react.PropTypes.string,
-      label: _react.PropTypes.string,
-      snackbar: _react.PropTypes.string,
-      warning: _react.PropTypes.string
-    }),
-    timeout: _react.PropTypes.number,
-    type: _react.PropTypes.oneOf(['accept', 'cancel', 'warning'])
-  };
-
-
-  return (0, _ActivableRenderer2.default)()(Snackbar);
-};
-
-var Snackbar = factory(_Overlay2.default, _Button2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.SNACKBAR)(Snackbar);
-exports.snackbarFactory = factory;
-exports.Snackbar = Snackbar;
\ No newline at end of file
diff --git a/lib/snackbar/_config.scss b/lib/snackbar/_config.scss
deleted file mode 100644
index 69f7cdf50..000000000
--- a/lib/snackbar/_config.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-$snackbar-color-cancel: $palette-red-500 !default;
-$snackbar-color-accept: $palette-green-500 !default;
-$snackbar-color-warning: $palette-lime-a200 !default;
-$snackbar-background-color: $color-text !default;
-$snackbar-border-radius: .2 * $unit !default;
-$snackbar-button-offset: 4.8 * $unit !default;
-$snackbar-color: $color-white !default;
-$snackbar-horizontal-offset: 2.4 * $unit !default;
-$snackbar-vertical-offset: 1.4 * $unit !default;
diff --git a/lib/snackbar/index.d.ts b/lib/snackbar/index.d.ts
deleted file mode 100644
index cc95d3a88..000000000
--- a/lib/snackbar/index.d.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface SnackbarTheme {
-  /**
-   * Added to the root element in case it's accept type.
-   */
-  accept?: string;
-  /**
-   * Added to the root element when its active.
-   */
-  active?: string;
-  /**
-   * Used for the button inside the component.
-   */
-  button?: string;
-  /**
-   * Added to the root element in case it's cancel type.
-   */
-  cancel?: string;
-  /**
-   * Used for the label element.
-   */
-  label?: string;
-  /**
-   * Used as the className for the root element of the component.
-   */
-  snackbar?: string;
-  /**
-   * Added to the root element in case it's warning type.
-   */
-  warning?: string;
-}
-
-interface SnackbarProps extends ReactToolbox.Props {
-  /**
-   * Label for the action component inside the Snackbar.
-   */
-  action?: string;
-  /**
-   * If true, the snackbar will be active.
-   * @default true
-   */
-  active?: boolean;
-  /**
-   * Text to display in the content. Required.
-   */
-  label: string;
-  /**
-   * Callback function when finish the set timeout.
-   */
-  onTimeout?: Function;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: SnackbarTheme;
-  /**
-   * Amount of time in milliseconds after the Snackbar will be automatically hidden.
-   */
-  timeout?: number;
-  /**
-   * Indicates the action type. Can be accept, warning or cancel
-   */
-  type?: "accept" | "cancel" | "warning";
-}
-
-export class Snackbar extends React.Component<SnackbarProps, {}> { }
-
-export default Snackbar;
diff --git a/lib/snackbar/index.js b/lib/snackbar/index.js
deleted file mode 100644
index 4af5c61fd..000000000
--- a/lib/snackbar/index.js
+++ /dev/null
@@ -1,27 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Snackbar = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Snackbar = require('./Snackbar.js');
-
-var _overlay = require('../overlay');
-
-var _button = require('../button');
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var ThemedSnackbar = (0, _reactCssThemr.themr)(_identifiers.SNACKBAR, _theme2.default)((0, _Snackbar.snackbarFactory)(_overlay.Overlay, _button.Button));
-
-exports.default = ThemedSnackbar;
-exports.Snackbar = ThemedSnackbar;
\ No newline at end of file
diff --git a/lib/snackbar/theme.scss b/lib/snackbar/theme.scss
deleted file mode 100644
index 4c7d0770e..000000000
--- a/lib/snackbar/theme.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.snackbar {
-  position: fixed;
-  right: $snackbar-horizontal-offset;
-  bottom: 0;
-  left: $snackbar-horizontal-offset;
-  z-index: $z-index-higher;
-  display: flex;
-  align-items: center;
-  padding: $snackbar-vertical-offset $snackbar-horizontal-offset;
-  margin: 0 auto;
-  margin-top: $snackbar-vertical-offset;
-  color: $snackbar-color;
-  background-color: $snackbar-background-color;
-  border-radius: $snackbar-border-radius;
-  transition: all $animation-duration $animation-curve-default $animation-duration;
-  &.accept .button {
-    color: $snackbar-color-accept;
-  }
-  &.warning .button {
-    color: $snackbar-color-warning;
-  }
-  &.cancel .button {
-    color: $snackbar-color-cancel;
-  }
-  &:not(.active) {
-    transform: translateY(100%);
-  }
-  &.active {
-    transform: translateY(0%);
-  }
-}
-
-.label {
-  flex-grow: 1;
-  font-size: $font-size-small;
-}
-
-.button {
-  min-width: inherit;
-  margin-top: - $snackbar-vertical-offset / 2;
-  margin-right: - $snackbar-horizontal-offset / 2;
-  margin-bottom: - $snackbar-vertical-offset / 2;
-  margin-left: $snackbar-button-offset;
-}
diff --git a/lib/switch/Switch.js b/lib/switch/Switch.js
deleted file mode 100644
index 6737c2c6c..000000000
--- a/lib/switch/Switch.js
+++ /dev/null
@@ -1,151 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Switch = exports.switchFactory = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Ripple = require('../ripple/Ripple.js');
-
-var _Ripple2 = _interopRequireDefault(_Ripple);
-
-var _Thumb = require('./Thumb.js');
-
-var _Thumb2 = _interopRequireDefault(_Thumb);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(Thumb) {
-  var Switch = function (_Component) {
-    _inherits(Switch, _Component);
-
-    function Switch() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, Switch);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Switch.__proto__ || Object.getPrototypeOf(Switch)).call.apply(_ref, [this].concat(args))), _this), _this.handleToggle = function (event) {
-        if (event.pageX !== 0 && event.pageY !== 0) _this.blur();
-        if (!_this.props.disabled && _this.props.onChange) {
-          _this.props.onChange(!_this.props.checked, event);
-        }
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(Switch, [{
-      key: 'blur',
-      value: function blur() {
-        this.refs.input.blur();
-      }
-    }, {
-      key: 'focus',
-      value: function focus() {
-        this.refs.input.focus();
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var _props = this.props,
-            className = _props.className,
-            checked = _props.checked,
-            disabled = _props.disabled,
-            onChange = _props.onChange,
-            theme = _props.theme,
-            others = _objectWithoutProperties(_props, ['className', 'checked', 'disabled', 'onChange', 'theme']); //eslint-disable-line no-unused-vars
-
-
-        var _className = (0, _classnames2.default)(theme[disabled ? 'disabled' : 'field'], className);
-        return _react2.default.createElement(
-          'label',
-          { 'data-react-toolbox': 'switch', className: _className },
-          _react2.default.createElement('input', _extends({}, others, {
-            checked: this.props.checked,
-            className: theme.input,
-            onClick: this.handleToggle,
-            readOnly: true,
-            ref: 'input',
-            type: 'checkbox'
-          })),
-          _react2.default.createElement(
-            'span',
-            { className: theme[checked ? 'on' : 'off'] },
-            _react2.default.createElement(Thumb, { disabled: this.props.disabled, theme: theme })
-          ),
-          this.props.label ? _react2.default.createElement(
-            'span',
-            { className: theme.text },
-            this.props.label
-          ) : null
-        );
-      }
-    }]);
-
-    return Switch;
-  }(_react.Component);
-
-  Switch.propTypes = {
-    checked: _react.PropTypes.bool,
-    className: _react.PropTypes.string,
-    disabled: _react.PropTypes.bool,
-    label: _react.PropTypes.string,
-    name: _react.PropTypes.string,
-    onBlur: _react.PropTypes.func,
-    onChange: _react.PropTypes.func,
-    onFocus: _react.PropTypes.func,
-    theme: _react.PropTypes.shape({
-      disabled: _react.PropTypes.string,
-      field: _react.PropTypes.string,
-      input: _react.PropTypes.string,
-      off: _react.PropTypes.string,
-      on: _react.PropTypes.string,
-      ripple: _react.PropTypes.string,
-      text: _react.PropTypes.string,
-      thumb: _react.PropTypes.string
-    })
-  };
-  Switch.defaultProps = {
-    checked: false,
-    className: '',
-    disabled: false
-  };
-
-
-  return Switch;
-};
-
-var Thumb = (0, _Thumb2.default)((0, _Ripple2.default)({ centered: true, spread: 2.6 }));
-var Switch = factory(Thumb);
-
-exports.default = (0, _reactCssThemr.themr)(_identifiers.SWITCH)(Switch);
-exports.switchFactory = factory;
-exports.Switch = Switch;
\ No newline at end of file
diff --git a/lib/switch/Thumb.js b/lib/switch/Thumb.js
deleted file mode 100644
index 1f41d9950..000000000
--- a/lib/switch/Thumb.js
+++ /dev/null
@@ -1,37 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-var factory = function factory(ripple) {
-  var Thumb = function Thumb(_ref) {
-    var onMouseDown = _ref.onMouseDown,
-        theme = _ref.theme,
-        other = _objectWithoutProperties(_ref, ['onMouseDown', 'theme']);
-
-    return _react2.default.createElement('span', _extends({ role: 'thumb', className: theme.thumb, onMouseDown: onMouseDown }, other));
-  };
-
-  Thumb.propTypes = {
-    children: _react.PropTypes.any,
-    theme: _react.PropTypes.shape({
-      ripple: _react.PropTypes.string,
-      thumb: _react.PropTypes.string
-    })
-  };
-
-  return ripple(Thumb);
-};
-
-exports.default = factory;
\ No newline at end of file
diff --git a/lib/switch/_config.scss b/lib/switch/_config.scss
deleted file mode 100644
index 784084717..000000000
--- a/lib/switch/_config.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-$switch-color: $color-primary !default;
-$switch-text-color: $color-black !default;
-$switch-thumb-off-color: $palette-grey-50 !default;
-$switch-track-on-color: rgba($color-primary, 0.5) !default;
-$switch-track-off-color: rgba($color-black, 0.26) !default;
-$switch-off-ripple-color: rgba($color-black, 0.4) !default;
-$switch-on-focus-color: rgba($color-primary, 0.26) !default;
-$switch-off-focus-color: rgba($color-black, 0.1) !default;
-$switch-disabled-thumb-color: $palette-grey-400 !default;
-$switch-disabled-track-color: rgba($color-black, 0.12) !default;
-$switch-disabled-text-color: rgba($color-black, 0.26) !default;
-$switch-total-height: 2.4 * $unit !default;
-$switch-track-length: 3.6 * $unit !default;
-$switch-track-height: 1.4 * $unit !default;
-$switch-thumb-size: 2 * $unit !default;
-$switch-thumb-on-color: $switch-color !default;
-$switch-focus-init-size: .8 * $unit !default;
-$switch-focus-size: $switch-total-height * 2 !default;
-$switch-focus-diff: ($switch-focus-size - $switch-focus-init-size) / 2 !default;
-$switch-ripple-duration: 650ms !default;
-$switch-font-size: $font-size-small !default;
-$switch-field-margin-bottom: 1.5 * $unit !default;
diff --git a/lib/switch/index.d.ts b/lib/switch/index.d.ts
deleted file mode 100644
index fd1ab6e0e..000000000
--- a/lib/switch/index.d.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface SwitchTheme {
-  /**
-   * Used for the root element if the component is disabled.
-   */
-  disabled?: string;
-  /**
-   * Used for the root element if the component is not disabled.
-   */
-  field?: string;
-  /**
-   * Used for the input element.
-   */
-  input?: string;
-  /**
-   * Used for a wrapper around the thumb if checked is false.
-   */
-  off?: string;
-  /**
-   * Used for a wrapper around the thumb if checked is true.
-   */
-  on?: string;
-  /**
-   * Used for the ripple inside the switch.
-   */
-  ripple?: string;
-  /**
-   * Used for the text label element.
-   */
-  text?: string;
-  /**
-   * Used for the thumb element.
-   */
-  thumb?: string;
-}
-
-interface SwitchProps extends ReactToolbox.Props {
-  /**
-   * If true, the switch will be enabled.
-   * @default false
-   */
-  checked?: boolean;
-  /**
-   * If true, component will be disabled.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * The text string to use for the floating label element.
-   */
-  label?: string;
-  /**
-   * The text string used as name of the input.
-   */
-  name?: string;
-  /**
-   * Callback function that is fired when when the switch is blurred.
-   */
-  onBlur?: Function;
-  /**
-   * Callback function that is fired when the component's value changes.
-   */
-  onChange?: Function;
-  /**
-   * Callback function that is fired when the switch is focused.
-   */
-  onFocus?: Function;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: SwitchTheme;
-}
-
-export class Switch extends React.Component<SwitchProps, {}> { }
-
-export default Switch;
diff --git a/lib/switch/index.js b/lib/switch/index.js
deleted file mode 100644
index 6e717b50d..000000000
--- a/lib/switch/index.js
+++ /dev/null
@@ -1,36 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Switch = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _Switch = require('./Switch.js');
-
-var _identifiers = require('../identifiers.js');
-
-var _Thumb = require('./Thumb.js');
-
-var _Thumb2 = _interopRequireDefault(_Thumb);
-
-var _ripple = require('../ripple');
-
-var _ripple2 = _interopRequireDefault(_ripple);
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var applyTheme = function applyTheme(Component) {
-  return (0, _reactCssThemr.themr)(_identifiers.SWITCH, _theme2.default)(Component);
-};
-var ripple = (0, _ripple2.default)({ centered: true, spread: 2.6 });
-var ThemedThumb = applyTheme((0, _Thumb2.default)(ripple));
-var ThemedSwitch = applyTheme((0, _Switch.switchFactory)(ThemedThumb));
-
-exports.default = ThemedSwitch;
-exports.Switch = ThemedSwitch;
\ No newline at end of file
diff --git a/lib/switch/theme.scss b/lib/switch/theme.scss
deleted file mode 100644
index 08a5c2900..000000000
--- a/lib/switch/theme.scss
+++ /dev/null
@@ -1,123 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.field {
-  position: relative;
-  display: block;
-  height: auto;
-  margin-bottom: $switch-field-margin-bottom;
-  white-space: nowrap;
-  vertical-align: middle;
-}
-
-.text {
-  display: inline-block;
-  padding-left: $unit;
-  font-size: $switch-font-size;
-  line-height: $switch-total-height;
-  color: $switch-text-color;
-  white-space: normal;
-  vertical-align: top;
-}
-
-%switch {
-  position: relative;
-  display: inline-block;
-  width: $switch-track-length;
-  height: $switch-track-height;
-  margin-top: ($switch-total-height - $switch-track-height) / 2;
-  vertical-align: top;
-  cursor: pointer;
-  border-radius: $switch-track-height;
-}
-
-.thumb {
-  @include material-animation-default(.28s);
-  position: absolute;
-  top: ($switch-track-height - $switch-thumb-size) / 2;
-  width: $switch-thumb-size;
-  height: $switch-thumb-size;
-  cursor: pointer;
-  border-radius: 50%;
-  transition-property: left;
-
-  .ripple {
-    background-color: $switch-color;
-    opacity: .3;
-    transition-duration: $switch-ripple-duration;
-  }
-}
-
-.on {
-  @extend %switch;
-  background: $switch-track-on-color;
-  .thumb {
-    @include shadow-3dp();
-    left: $switch-track-length - $switch-thumb-size;
-    background: $switch-thumb-on-color;
-  }
-}
-
-.off {
-  @extend %switch;
-  background: $switch-track-off-color;
-  .thumb {
-    @include shadow-2dp();
-    left: 0;
-    background: $switch-thumb-off-color;
-  }
-  .ripple {
-    background: $switch-off-ripple-color;
-  }
-}
-
-%thumb-focus {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  box-sizing: border-box;
-  display: inline-block;
-  width: $switch-focus-init-size;
-  height: $switch-focus-init-size;
-  content: "";
-  background-color: transparent;
-  border-radius: 50%;
-  transform: translate(- $switch-focus-init-size / 2, - $switch-focus-init-size / 2);
-}
-
-.input {
-  width: 0;
-  height: 0;
-  overflow: hidden;
-  opacity: 0;
-  &:focus:not(:active) {
-    + .switch-on > .thumb:before {
-      @extend %thumb-focus;
-      background-color: $switch-on-focus-color;
-      box-shadow: 0 0 0 $switch-focus-diff $switch-on-focus-color;
-    }
-    + .switch-off > .thumb:before {
-      @extend %thumb-focus;
-      background-color: $switch-off-focus-color;
-      box-shadow: 0 0 0 $switch-focus-diff $switch-off-focus-color;
-    }
-  }
-}
-
-.disabled {
-  @extend .field;
-  .text {
-    color: $switch-disabled-text-color;
-  }
-  .on, .off {
-    cursor: auto;
-    background: $switch-disabled-track-color;
-  }
-  .thumb {
-    cursor: auto;
-    background-color: $switch-disabled-thumb-color;
-    border-color: transparent;
-  }
-}
diff --git a/lib/table/Table.js b/lib/table/Table.js
deleted file mode 100644
index 98536edec..000000000
--- a/lib/table/Table.js
+++ /dev/null
@@ -1,203 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Table = exports.tableFactory = undefined;
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Checkbox = require('../checkbox/Checkbox.js');
-
-var _Checkbox2 = _interopRequireDefault(_Checkbox);
-
-var _TableHead = require('./TableHead.js');
-
-var _TableHead2 = _interopRequireDefault(_TableHead);
-
-var _TableRow = require('./TableRow.js');
-
-var _TableRow2 = _interopRequireDefault(_TableRow);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(TableHead, TableRow) {
-  var Table = function (_Component) {
-    _inherits(Table, _Component);
-
-    function Table() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, Table);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Table.__proto__ || Object.getPrototypeOf(Table)).call.apply(_ref, [this].concat(args))), _this), _this.handleFullSelect = function () {
-        if (_this.props.onSelect) {
-          var _this$props = _this.props,
-              source = _this$props.source,
-              selected = _this$props.selected;
-
-          var newSelected = source.length === selected.length ? [] : source.map(function (i, idx) {
-            return idx;
-          });
-          _this.props.onSelect(newSelected);
-        }
-      }, _this.handleRowSelect = function (index) {
-        if (_this.props.onSelect) {
-          var newSelection = [].concat(_toConsumableArray(_this.props.selected));
-          if (_this.props.multiSelectable) {
-            (function () {
-              var position = _this.props.selected.indexOf(index);
-              newSelection = position !== -1 ? newSelection.filter(function (el, idx) {
-                return idx !== position;
-              }) : newSelection.concat([index]);
-            })();
-          } else {
-            newSelection = [index];
-          }
-          _this.props.onSelect(newSelection);
-        }
-      }, _this.handleRowChange = function (index, key, value) {
-        if (_this.props.onChange) {
-          _this.props.onChange(index, key, value);
-        }
-      }, _this.handleRowClick = function (index, event) {
-        if (_this.props.onRowClick) {
-          _this.props.onRowClick(index, event);
-        }
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(Table, [{
-      key: 'renderHead',
-      value: function renderHead() {
-        if (this.props.heading) {
-          var _props = this.props,
-              model = _props.model,
-              selected = _props.selected,
-              source = _props.source,
-              selectable = _props.selectable,
-              multiSelectable = _props.multiSelectable;
-
-          var isSelected = selected.length === source.length;
-          return _react2.default.createElement(TableHead, {
-            model: model,
-            onSelect: this.handleFullSelect,
-            selectable: selectable,
-            multiSelectable: multiSelectable,
-            selected: isSelected,
-            theme: this.props.theme
-          });
-        }
-      }
-    }, {
-      key: 'renderBody',
-      value: function renderBody() {
-        var _this2 = this;
-
-        var _props2 = this.props,
-            source = _props2.source,
-            model = _props2.model,
-            onChange = _props2.onChange,
-            selectable = _props2.selectable,
-            selected = _props2.selected,
-            theme = _props2.theme;
-
-        return _react2.default.createElement(
-          'tbody',
-          null,
-          source.map(function (data, index) {
-            return _react2.default.createElement(TableRow, {
-              data: data,
-              index: index,
-              key: index,
-              model: model,
-              onChange: onChange ? _this2.handleRowChange.bind(_this2) : undefined,
-              onSelect: _this2.handleRowSelect.bind(_this2, index),
-              onRowClick: _this2.handleRowClick.bind(_this2, index),
-              selectable: selectable,
-              selected: selected.indexOf(index) !== -1,
-              theme: theme
-            });
-          })
-        );
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var _props3 = this.props,
-            className = _props3.className,
-            theme = _props3.theme;
-
-        return _react2.default.createElement(
-          'table',
-          { 'data-react-toolbox': 'table', className: (0, _classnames2.default)(theme.table, className) },
-          this.renderHead(),
-          this.renderBody()
-        );
-      }
-    }]);
-
-    return Table;
-  }(_react.Component);
-
-  Table.propTypes = {
-    className: _react.PropTypes.string,
-    heading: _react.PropTypes.bool,
-    model: _react.PropTypes.object,
-    multiSelectable: _react.PropTypes.bool,
-    onChange: _react.PropTypes.func,
-    onRowClick: _react.PropTypes.func,
-    onSelect: _react.PropTypes.func,
-    selectable: _react.PropTypes.bool,
-    selected: _react.PropTypes.array,
-    source: _react.PropTypes.array,
-    theme: _react.PropTypes.shape({
-      table: _react.PropTypes.string
-    })
-  };
-  Table.defaultProps = {
-    className: '',
-    heading: true,
-    selectable: true,
-    multiSelectable: true,
-    selected: [],
-    source: []
-  };
-
-
-  return Table;
-};
-
-var TableHead = (0, _TableHead2.default)(_Checkbox2.default);
-var TableRow = (0, _TableRow2.default)(_Checkbox2.default);
-var Table = factory(TableHead, TableRow);
-
-exports.default = (0, _reactCssThemr.themr)(_identifiers.TABLE)(Table);
-exports.tableFactory = factory;
-exports.Table = Table;
\ No newline at end of file
diff --git a/lib/table/TableHead.js b/lib/table/TableHead.js
deleted file mode 100644
index 8a0ba5ca8..000000000
--- a/lib/table/TableHead.js
+++ /dev/null
@@ -1,75 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
-var factory = function factory(Checkbox) {
-  var TableHead = function TableHead(_ref) {
-    var model = _ref.model,
-        onSelect = _ref.onSelect,
-        selectable = _ref.selectable,
-        multiSelectable = _ref.multiSelectable,
-        selected = _ref.selected,
-        theme = _ref.theme;
-
-    var selectCell = void 0;
-    var contentCells = Object.keys(model).map(function (key) {
-      var name = model[key].title || key;
-      return _react2.default.createElement(
-        'th',
-        { key: key },
-        name
-      );
-    });
-
-    if (selectable && multiSelectable) {
-      selectCell = _react2.default.createElement(
-        'th',
-        { key: 'select', className: theme.selectable },
-        _react2.default.createElement(Checkbox, { onChange: onSelect, checked: selected })
-      );
-    } else if (selectable) {
-      selectCell = _react2.default.createElement('th', { key: 'select', className: theme.selectable });
-    }
-    return _react2.default.createElement(
-      'thead',
-      null,
-      _react2.default.createElement(
-        'tr',
-        null,
-        [selectCell].concat(_toConsumableArray(contentCells))
-      )
-    );
-  };
-
-  TableHead.propTypes = {
-    className: _react.PropTypes.string,
-    model: _react.PropTypes.object,
-    multiSelectable: _react.PropTypes.bool,
-    onSelect: _react.PropTypes.func,
-    selectable: _react.PropTypes.bool,
-    selected: _react.PropTypes.bool,
-    theme: _react.PropTypes.shape({
-      selectable: _react.PropTypes.string
-    })
-  };
-
-  TableHead.defaultProps = {
-    className: '',
-    model: {},
-    selected: false
-  };
-
-  return TableHead;
-};
-
-exports.default = factory;
\ No newline at end of file
diff --git a/lib/table/TableRow.js b/lib/table/TableRow.js
deleted file mode 100644
index c7140602d..000000000
--- a/lib/table/TableRow.js
+++ /dev/null
@@ -1,172 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _utils = require('../utils/utils');
-
-var _utils2 = _interopRequireDefault(_utils);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(Checkbox) {
-  var TableRow = function (_Component) {
-    _inherits(TableRow, _Component);
-
-    function TableRow() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, TableRow);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TableRow.__proto__ || Object.getPrototypeOf(TableRow)).call.apply(_ref, [this].concat(args))), _this), _this.handleInputChange = function (index, key, type, event) {
-        var value = void 0;
-        switch (type) {
-          case 'checkbox':
-            value = event.target.checked;
-            break;
-          // Handle contentEditable
-          case 'text':
-            value = event.target.textContent;
-            break;
-          default:
-            value = event.target.value;
-            break;
-        }
-
-        var onChange = _this.props.model[key].onChange || _this.props.onChange;
-        onChange(index, key, value);
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(TableRow, [{
-      key: 'renderSelectCell',
-      value: function renderSelectCell() {
-        if (this.props.selectable) {
-          return _react2.default.createElement(
-            'td',
-            { className: this.props.theme.selectable },
-            _react2.default.createElement(Checkbox, { checked: this.props.selected, onChange: this.props.onSelect })
-          );
-        }
-      }
-    }, {
-      key: 'renderCells',
-      value: function renderCells() {
-        var _this2 = this;
-
-        return Object.keys(this.props.model).map(function (key) {
-          return _react2.default.createElement(
-            'td',
-            { key: key, onClick: _this2.props.onRowClick },
-            _this2.renderCell(key)
-          );
-        });
-      }
-    }, {
-      key: 'renderCell',
-      value: function renderCell(key) {
-        var value = this.props.data[key];
-
-        // if the value is a valid React element return it directly, since it
-        // cannot be edited and should not be converted to a string...
-        if (_react2.default.isValidElement(value)) {
-          return value;
-        }
-
-        var onChange = this.props.model[key].onChange || this.props.onChange;
-        if (onChange) {
-          return this.renderInput(key, value);
-        } else if (value) {
-          return value.toString();
-        }
-      }
-    }, {
-      key: 'renderInput',
-      value: function renderInput(key, value) {
-        var index = this.props.index;
-        var inputType = _utils2.default.inputTypeForPrototype(this.props.model[key].type);
-        var inputValue = _utils2.default.prepareValueForInput(value, inputType);
-        var checked = inputType === 'checkbox' && value ? true : null;
-
-        if (inputType === 'text') {
-          return _react2.default.createElement('div', {
-            children: inputValue,
-            contentEditable: true,
-            suppressContentEditableWarning: true,
-            onInput: this.handleInputChange.bind(null, index, key, inputType)
-          });
-        }
-
-        return _react2.default.createElement('input', {
-          checked: checked,
-          onChange: this.handleInputChange.bind(null, index, key, inputType),
-          type: inputType,
-          value: inputValue
-        });
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var _classnames;
-
-        var className = (0, _classnames3.default)(this.props.theme.row, (_classnames = {}, _defineProperty(_classnames, this.props.theme.editable, this.props.onChange), _defineProperty(_classnames, this.props.theme.selected, this.props.selected), _classnames));
-
-        return _react2.default.createElement(
-          'tr',
-          { 'data-react-toolbox-table': 'row', className: className },
-          this.renderSelectCell(),
-          this.renderCells()
-        );
-      }
-    }]);
-
-    return TableRow;
-  }(_react.Component);
-
-  TableRow.propTypes = {
-    data: _react.PropTypes.object,
-    index: _react.PropTypes.number,
-    model: _react.PropTypes.object,
-    onChange: _react.PropTypes.func,
-    onRowClick: _react.PropTypes.func,
-    onSelect: _react.PropTypes.func,
-    selectable: _react.PropTypes.bool,
-    selected: _react.PropTypes.bool,
-    theme: _react.PropTypes.shape({
-      editable: _react.PropTypes.string,
-      row: _react.PropTypes.string,
-      selectable: _react.PropTypes.string,
-      selected: _react.PropTypes.string
-    })
-  };
-
-
-  return TableRow;
-};
-
-exports.default = factory;
\ No newline at end of file
diff --git a/lib/table/_config.scss b/lib/table/_config.scss
deleted file mode 100644
index 7ec3b5a2b..000000000
--- a/lib/table/_config.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-$table-row-height: 48px !default;
-$table-row-divider: solid 1px rgba(0,0,0,.12) !default;
-$table-row-offset: 1.8 * $unit !default;
-$table-row-highlight: #eee !default;
-$table-text-color: #757575 !default;
diff --git a/lib/table/index.d.ts b/lib/table/index.d.ts
deleted file mode 100644
index 044b5141b..000000000
--- a/lib/table/index.d.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface TableTheme {
-  /**
-   * It will be added to a row in case it is editable.
-   */
-  editable?: string;
-  /**
-   * Used for the row element.
-   */
-  row?: string;
-  /**
-   * It will be added to a row in case it is selectable.
-   */
-  selectable?: string;
-  /**
-   * Added to a row in case it is selected.
-   */
-  selected?: string;
-  /**
-   * Classname used for the root element.
-   */
-  table?: string;
-}
-
-interface TableProps extends ReactToolbox.Props {
-  /**
-   * If true, component will show a heading using model field names.
-   * @default true
-   */
-  heading?: boolean;
-  /**
-   * Object describing the data model that represents each object in the source.
-   */
-  model?: any;
-  /**
-   * Callback function that is fired when an item in a row changes. If set, rows are editable.
-   */
-  onChange?: Function;
-  /**
-   * Callback function invoked when the row selection changes.
-   */
-  onSelect?: Function;
-  /**
-   * If true, each row will display a checkbox to allow the user to select that one row.
-   * @default true
-   */
-  selectable?: boolean;
-  /**
-   * If true, the header and each row will display a checkbox to allow the user to select multiple rows.
-   * @default true
-   */
-  multiSelectable?: boolean;
-  /**
-   * Array of indexes of the items in the source that should appear as selected.
-   */
-  selected?: any[];
-  /**
-   * Array of objects representing each item to show.
-   */
-  source?: any[];
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: TableTheme;
-}
-
-export class Table extends React.Component<TableProps, {}> { }
-
-export default Table;
diff --git a/lib/table/index.js b/lib/table/index.js
deleted file mode 100644
index 994d96cb2..000000000
--- a/lib/table/index.js
+++ /dev/null
@@ -1,38 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Table = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _checkbox = require('../checkbox');
-
-var _Table = require('./Table.js');
-
-var _TableHead = require('./TableHead.js');
-
-var _TableHead2 = _interopRequireDefault(_TableHead);
-
-var _TableRow = require('./TableRow.js');
-
-var _TableRow2 = _interopRequireDefault(_TableRow);
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var applyTheme = function applyTheme(Component) {
-  return (0, _reactCssThemr.themr)(_identifiers.TABLE, _theme2.default)(Component);
-};
-var ThemedTableHead = applyTheme((0, _TableHead2.default)(_checkbox.Checkbox));
-var ThemedTableRow = applyTheme((0, _TableRow2.default)(_checkbox.Checkbox));
-var ThemedTable = applyTheme((0, _Table.tableFactory)(ThemedTableHead, ThemedTableRow));
-
-exports.default = ThemedTable;
-exports.Table = ThemedTable;
\ No newline at end of file
diff --git a/lib/table/theme.scss b/lib/table/theme.scss
deleted file mode 100644
index 232ed4268..000000000
--- a/lib/table/theme.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.table {
-  width: 100%;
-  font-size: $font-size-tiny;
-  color: $table-text-color;
-  text-align: left;
-  border-spacing: 0;
-  tr {
-    height: $table-row-height;
-    line-height: $table-row-height;
-  }
-  th {
-    font-weight: $font-weight-bold;
-    &:first-letter {
-      text-transform: capitalize;
-    }
-  }
-  th, td {
-    position: relative;
-    padding: 0 $table-row-offset;
-    border-bottom: $table-row-divider;
-    &.selectable {
-      width: 1.8 * $unit;
-      padding-right: 0;
-      > * {
-        margin: 0;
-      }
-    }
-  }
-}
-
-.row {
-  transition: background-color $animation-duration $animation-curve-default;
-  &:last-child {
-    td {
-      border-color: transparent;
-    }
-  }
-  > td {
-    > input {
-      display: block;
-      width: 100%;
-      background-color: transparent;
-      border: 0;
-    }
-  }
-}
-
-.selected, .row:hover {
-  background-color: $table-row-highlight;
-}
-
-.editable > * {
-  cursor: pointer;
-}
diff --git a/lib/tabs/Tab.js b/lib/tabs/Tab.js
deleted file mode 100644
index d077ec773..000000000
--- a/lib/tabs/Tab.js
+++ /dev/null
@@ -1,121 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Tab = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _font_icon = require('../font_icon');
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var Tab = function (_Component) {
-  _inherits(Tab, _Component);
-
-  function Tab() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    _classCallCheck(this, Tab);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Tab.__proto__ || Object.getPrototypeOf(Tab)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
-      if (!_this.props.disabled && _this.props.onClick) {
-        _this.props.onClick(event);
-      }
-    }, _temp), _possibleConstructorReturn(_this, _ret);
-  }
-
-  _createClass(Tab, [{
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate(prevProps) {
-      if (!prevProps.active && this.props.active && this.props.onActive) {
-        this.props.onActive();
-      }
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _classnames;
-
-      var _props = this.props,
-          onActive = _props.onActive,
-          active = _props.active,
-          activeClassName = _props.activeClassName,
-          className = _props.className,
-          disabled = _props.disabled,
-          hidden = _props.hidden,
-          label = _props.label,
-          icon = _props.icon,
-          theme = _props.theme,
-          other = _objectWithoutProperties(_props, ['onActive', 'active', 'activeClassName', 'className', 'disabled', 'hidden', 'label', 'icon', 'theme']);
-
-      var _className = (0, _classnames3.default)(theme.label, (_classnames = {}, _defineProperty(_classnames, theme.active, active), _defineProperty(_classnames, theme.hidden, hidden), _defineProperty(_classnames, theme.withText, label), _defineProperty(_classnames, theme.withIcon, icon), _defineProperty(_classnames, theme.disabled, disabled), _defineProperty(_classnames, activeClassName, active), _classnames), className);
-
-      return _react2.default.createElement(
-        'label',
-        _extends({}, other, { 'data-react-toolbox': 'tab', className: _className, onClick: this.handleClick }),
-        icon && _react2.default.createElement(_font_icon.FontIcon, { className: theme.icon, value: icon }),
-        label
-      );
-    }
-  }]);
-
-  return Tab;
-}(_react.Component);
-
-Tab.propTypes = {
-  active: _react.PropTypes.bool,
-  activeClassName: _react.PropTypes.string,
-  className: _react.PropTypes.string,
-  disabled: _react.PropTypes.bool,
-  hidden: _react.PropTypes.bool,
-  icon: _react.PropTypes.node,
-  label: _react.PropTypes.node,
-  onActive: _react.PropTypes.func,
-  onClick: _react.PropTypes.func,
-  theme: _react.PropTypes.shape({
-    active: _react.PropTypes.string,
-    disabled: _react.PropTypes.string,
-    hidden: _react.PropTypes.string,
-    label: _react.PropTypes.string
-  })
-};
-Tab.defaultProps = {
-  active: false,
-  className: '',
-  disabled: false,
-  hidden: false
-};
-exports.default = (0, _reactCssThemr.themr)(_identifiers.TABS)(Tab);
-exports.Tab = Tab;
\ No newline at end of file
diff --git a/lib/tabs/TabContent.js b/lib/tabs/TabContent.js
deleted file mode 100644
index 65bd7a6a6..000000000
--- a/lib/tabs/TabContent.js
+++ /dev/null
@@ -1,72 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TabContent = undefined;
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var TabContent = function (_Component) {
-  _inherits(TabContent, _Component);
-
-  function TabContent() {
-    _classCallCheck(this, TabContent);
-
-    return _possibleConstructorReturn(this, (TabContent.__proto__ || Object.getPrototypeOf(TabContent)).apply(this, arguments));
-  }
-
-  _createClass(TabContent, [{
-    key: 'render',
-    value: function render() {
-      var className = (0, _classnames3.default)(this.props.theme.tab, _defineProperty({}, this.props.theme.active, this.props.active), this.props.className);
-
-      return _react2.default.createElement(
-        'section',
-        { className: className, tabIndex: this.props.tabIndex },
-        this.props.children
-      );
-    }
-  }]);
-
-  return TabContent;
-}(_react.Component);
-
-TabContent.propTypes = {
-  active: _react.PropTypes.bool,
-  children: _react.PropTypes.node,
-  className: _react.PropTypes.string,
-  tabIndex: _react.PropTypes.number,
-  theme: _react.PropTypes.shape({
-    active: _react.PropTypes.string,
-    tab: _react.PropTypes.string
-  })
-};
-TabContent.defaultProps = {
-  active: false,
-  className: ''
-};
-exports.default = (0, _reactCssThemr.themr)(_identifiers.TABS)(TabContent);
-exports.TabContent = TabContent;
\ No newline at end of file
diff --git a/lib/tabs/Tabs.js b/lib/tabs/Tabs.js
deleted file mode 100644
index 8dc679cf5..000000000
--- a/lib/tabs/Tabs.js
+++ /dev/null
@@ -1,268 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Tabs = exports.tabsFactory = undefined;
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames3 = require('classnames');
-
-var _classnames4 = _interopRequireDefault(_classnames3);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _FontIcon = require('../font_icon/FontIcon.js');
-
-var _FontIcon2 = _interopRequireDefault(_FontIcon);
-
-var _Tab = require('./Tab.js');
-
-var _Tab2 = _interopRequireDefault(_Tab);
-
-var _TabContent = require('./TabContent.js');
-
-var _TabContent2 = _interopRequireDefault(_TabContent);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(Tab, TabContent, FontIcon) {
-  var Tabs = function (_Component) {
-    _inherits(Tabs, _Component);
-
-    function Tabs() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, Tabs);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Tabs.__proto__ || Object.getPrototypeOf(Tabs)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-        pointer: {},
-        arrows: {}
-      }, _this.handleHeaderClick = function (event) {
-        var idx = parseInt(event.currentTarget.id);
-        if (_this.props.onChange) _this.props.onChange(idx);
-      }, _this.handleResize = function () {
-        if (_this.resizeTimeout) clearTimeout(_this.resizeTimeout);
-        _this.resizeTimeout = setTimeout(function () {
-          _this.updatePointer(_this.props.index);
-          _this.updateArrows();
-        }, 100);
-      }, _this.updatePointer = function (idx) {
-        if (_this.navigationNode && _this.navigationNode.children[idx]) {
-          var nav = _this.navigationNode.getBoundingClientRect();
-          var label = _this.navigationNode.children[idx].getBoundingClientRect();
-          var scrollLeft = _this.navigationNode.scrollLeft;
-          _this.setState({
-            pointer: {
-              top: nav.height + 'px',
-              left: label.left - nav.left + scrollLeft + 'px',
-              width: label.width + 'px'
-            }
-          });
-        }
-      }, _this.updateArrows = function () {
-        var nav = _this.navigationNode;
-        _this.setState({
-          arrows: {
-            left: nav.scrollLeft > 0,
-            right: nav.scrollWidth > nav.clientWidth && nav.scrollLeft + nav.clientWidth < nav.scrollWidth
-          }
-        });
-      }, _this.scrollNavigation = function (factor) {
-        var oldScrollLeft = _this.navigationNode.scrollLeft;
-        _this.navigationNode.scrollLeft += factor * _this.navigationNode.clientWidth;
-        if (_this.navigationNode.scrollLeft !== oldScrollLeft) {
-          _this.updateArrows();
-        }
-      }, _this.scrollRight = function () {
-        return _this.scrollNavigation(-1);
-      }, _this.scrollLeft = function () {
-        return _this.scrollNavigation(+1);
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(Tabs, [{
-      key: 'componentDidMount',
-      value: function componentDidMount() {
-        window.addEventListener('resize', this.handleResize);
-        this.handleResize();
-      }
-    }, {
-      key: 'componentWillReceiveProps',
-      value: function componentWillReceiveProps(nextProps) {
-        this.updatePointer(nextProps.index);
-      }
-    }, {
-      key: 'componentWillUnmount',
-      value: function componentWillUnmount() {
-        window.removeEventListener('resize', this.handleResize);
-        clearTimeout(this.resizeTimeout);
-      }
-    }, {
-      key: 'parseChildren',
-      value: function parseChildren() {
-        var _this2 = this;
-
-        var headers = [];
-        var contents = [];
-
-        _react2.default.Children.forEach(this.props.children, function (item) {
-          if (item.type === Tab) {
-            headers.push(item);
-            if (item.props.children) {
-              contents.push(_react2.default.createElement(TabContent, { children: item.props.children, theme: _this2.props.theme }));
-            }
-          } else if (item.type === TabContent) {
-            contents.push(item);
-          }
-        });
-
-        return { headers: headers, contents: contents };
-      }
-    }, {
-      key: 'renderHeaders',
-      value: function renderHeaders(headers) {
-        var _this3 = this;
-
-        return headers.map(function (item, idx) {
-          return _react2.default.cloneElement(item, {
-            id: idx,
-            key: idx,
-            theme: _this3.props.theme,
-            active: _this3.props.index === idx,
-            onClick: function onClick(event) {
-              _this3.handleHeaderClick(event);
-              item.props.onClick && item.props.onClick(event);
-            }
-          });
-        });
-      }
-    }, {
-      key: 'renderContents',
-      value: function renderContents(contents) {
-        var _this4 = this;
-
-        var contentElements = contents.map(function (item, idx) {
-          return _react2.default.cloneElement(item, {
-            key: idx,
-            theme: _this4.props.theme,
-            active: _this4.props.index === idx,
-            hidden: _this4.props.index !== idx && _this4.props.hideMode === 'display',
-            tabIndex: idx
-          });
-        });
-
-        return this.props.hideMode === 'display' ? contentElements : contentElements.filter(function (item, idx) {
-          return idx === _this4.props.index;
-        });
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var _classnames2,
-            _this5 = this;
-
-        var _props = this.props,
-            className = _props.className,
-            disableAnimatedBottomBorder = _props.disableAnimatedBottomBorder,
-            theme = _props.theme,
-            fixed = _props.fixed,
-            inverse = _props.inverse;
-        var _state$arrows = this.state.arrows,
-            hasLeftArrow = _state$arrows.left,
-            hasRightArrow = _state$arrows.right;
-
-        var _parseChildren = this.parseChildren(),
-            headers = _parseChildren.headers,
-            contents = _parseChildren.contents;
-
-        var classNamePointer = (0, _classnames4.default)(theme.pointer, _defineProperty({}, theme.disableAnimation, disableAnimatedBottomBorder));
-
-        var classNames = (0, _classnames4.default)(theme.tabs, (_classnames2 = {}, _defineProperty(_classnames2, theme.fixed, fixed), _defineProperty(_classnames2, theme.inverse, inverse), _classnames2), className);
-
-        return _react2.default.createElement(
-          'div',
-          { 'data-react-toolbox': 'tabs', className: classNames },
-          _react2.default.createElement(
-            'div',
-            { className: theme.navigationContainer },
-            hasLeftArrow && _react2.default.createElement(
-              'div',
-              { className: theme.arrowContainer, onClick: this.scrollRight },
-              _react2.default.createElement(FontIcon, { className: theme.arrow, value: 'keyboard_arrow_left' })
-            ),
-            _react2.default.createElement(
-              'nav',
-              { className: theme.navigation, ref: function ref(node) {
-                  _this5.navigationNode = node;
-                } },
-              this.renderHeaders(headers),
-              _react2.default.createElement('span', { className: classNamePointer, style: this.state.pointer })
-            ),
-            hasRightArrow && _react2.default.createElement(
-              'div',
-              { className: theme.arrowContainer, onClick: this.scrollLeft },
-              _react2.default.createElement(FontIcon, { className: theme.arrow, value: 'keyboard_arrow_right' })
-            )
-          ),
-          this.renderContents(contents)
-        );
-      }
-    }]);
-
-    return Tabs;
-  }(_react.Component);
-
-  Tabs.propTypes = {
-    children: _react.PropTypes.node,
-    className: _react.PropTypes.string,
-    disableAnimatedBottomBorder: _react.PropTypes.bool,
-    fixed: _react.PropTypes.bool,
-    hideMode: _react.PropTypes.oneOf(['display', 'unmounted']),
-    index: _react.PropTypes.number,
-    inverse: _react.PropTypes.bool,
-    onChange: _react.PropTypes.func,
-    theme: _react.PropTypes.shape({
-      fixed: _react.PropTypes.string,
-      inverse: _react.PropTypes.string,
-      navigation: _react.PropTypes.string,
-      pointer: _react.PropTypes.string,
-      tabs: _react.PropTypes.string
-    })
-  };
-  Tabs.defaultProps = {
-    index: 0,
-    fixed: false,
-    inverse: false,
-    hideMode: 'unmounted'
-  };
-
-
-  return Tabs;
-};
-
-var Tabs = factory(_Tab2.default, _TabContent2.default, _FontIcon2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.TABS)(Tabs);
-exports.tabsFactory = factory;
-exports.Tabs = Tabs;
\ No newline at end of file
diff --git a/lib/tabs/__tests__/index.spec.js b/lib/tabs/__tests__/index.spec.js
deleted file mode 100644
index 32bca1a3b..000000000
--- a/lib/tabs/__tests__/index.spec.js
+++ /dev/null
@@ -1,176 +0,0 @@
-'use strict';
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _expect = require('expect');
-
-var _expect2 = _interopRequireDefault(_expect);
-
-var _testing = require('../../utils/testing');
-
-var _testing2 = _interopRequireDefault(_testing);
-
-var _reactAddonsTestUtils = require('react-addons-test-utils');
-
-var _reactAddonsTestUtils2 = _interopRequireDefault(_reactAddonsTestUtils);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactDom = require('react-dom');
-
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
-var _Tabs = require('../Tabs');
-
-var _Tabs2 = _interopRequireDefault(_Tabs);
-
-var _Tab = require('../Tab');
-
-var _Tab2 = _interopRequireDefault(_Tab);
-
-var _TabContent = require('../TabContent');
-
-var _TabContent2 = _interopRequireDefault(_TabContent);
-
-var _theme = require('../theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var getRenderedClassName = function getRenderedClassName(tree, TargetComponent) {
-  var rendered = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, TargetComponent);
-  return _reactDom2.default.findDOMNode(rendered).getAttribute('class');
-};
-
-describe('Tabs', function () {
-  var tabContents = void 0,
-      composition = void 0;
-
-  var Composition = function (_Component) {
-    _inherits(Composition, _Component);
-
-    function Composition() {
-      _classCallCheck(this, Composition);
-
-      var _this = _possibleConstructorReturn(this, (Composition.__proto__ || Object.getPrototypeOf(Composition)).call(this));
-
-      _this.state = { index: 0 };
-      return _this;
-    }
-
-    _createClass(Composition, [{
-      key: 'render',
-      value: function render() {
-        return _react2.default.createElement(
-          _Tabs2.default,
-          _extends({ index: this.state.index }, this.props),
-          _react2.default.createElement(
-            _Tab2.default,
-            { label: 'tab1' },
-            'tab1'
-          ),
-          _react2.default.createElement(
-            _Tab2.default,
-            { label: 'tab2' },
-            'tab2'
-          )
-        );
-      }
-    }]);
-
-    return Composition;
-  }(_react.Component);
-
-  it('defaults to only rendering the current tab', function () {
-    // initial render
-    composition = _testing2.default.renderComponent(Composition);
-
-    tabContents = _reactAddonsTestUtils2.default.scryRenderedComponentsWithType(composition, _TabContent2.default);
-
-    (0, _expect2.default)(tabContents.length).toEqual(1);
-    (0, _expect2.default)(tabContents[0].props.tabIndex).toEqual(0);
-
-    // after tab change
-    composition.setState({ index: 1 });
-    composition.forceUpdate();
-
-    tabContents = _reactAddonsTestUtils2.default.scryRenderedComponentsWithType(composition, _TabContent2.default);
-
-    (0, _expect2.default)(tabContents.length).toEqual(1);
-    (0, _expect2.default)(tabContents[0].props.tabIndex).toEqual(1);
-  });
-
-  it('renders inactive tabs when hideMode is set to display', function () {
-    // initial render
-    composition = _testing2.default.renderComponent(Composition, { hideMode: 'display' });
-
-    tabContents = _reactAddonsTestUtils2.default.scryRenderedComponentsWithType(composition, _TabContent2.default);
-
-    (0, _expect2.default)(tabContents.length).toEqual(2);
-
-    var tabOne = tabContents.find(function (tab) {
-      return tab.props.children === 'tab1';
-    });
-    var tabTwo = tabContents.find(function (tab) {
-      return tab.props.children === 'tab2';
-    });
-
-    (0, _expect2.default)(tabOne.props.hidden).toEqual(false);
-    (0, _expect2.default)(tabTwo.props.hidden).toEqual(true);
-
-    // after tab change
-    composition.setState({ index: 1 });
-    composition.forceUpdate();
-
-    tabContents = _reactAddonsTestUtils2.default.scryRenderedComponentsWithType(composition, _TabContent2.default);
-
-    (0, _expect2.default)(tabContents.length).toEqual(2);
-
-    tabOne = tabContents.find(function (tab) {
-      return tab.props.children === 'tab1';
-    });
-    tabTwo = tabContents.find(function (tab) {
-      return tab.props.children === 'tab2';
-    });
-
-    (0, _expect2.default)(tabOne.props.hidden).toEqual(true);
-    (0, _expect2.default)(tabTwo.props.hidden).toEqual(false);
-  });
-
-  describe('#render', function () {
-    it('does not use fixed by default', function () {
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Tabs2.default, { theme: _theme2.default }));
-      var className = getRenderedClassName(tree, _Tabs.Tabs);
-      (0, _expect2.default)(className).toNotContain(_theme2.default.fixed);
-    });
-
-    it('uses fixed when set', function () {
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Tabs2.default, { theme: _theme2.default, fixed: true }));
-      var className = getRenderedClassName(tree, _Tabs.Tabs);
-      (0, _expect2.default)(className).toContain(_theme2.default.fixed);
-    });
-
-    it('does not use inverse by default', function () {
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Tabs2.default, { theme: _theme2.default }));
-      var className = getRenderedClassName(tree, _Tabs.Tabs);
-      (0, _expect2.default)(className).toNotContain(_theme2.default.inverse);
-    });
-
-    it('uses inverse when set', function () {
-      var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Tabs2.default, { theme: _theme2.default, inverse: true }));
-      var className = getRenderedClassName(tree, _Tabs.Tabs);
-      (0, _expect2.default)(className).toContain(_theme2.default.inverse);
-    });
-  });
-});
\ No newline at end of file
diff --git a/lib/tabs/_config.scss b/lib/tabs/_config.scss
deleted file mode 100644
index e5ee9c8e0..000000000
--- a/lib/tabs/_config.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-$tab-label-disabled-opacity: .2 !default;
-$tab-label-h-padding: 1.2 * $unit !default;
-$tab-label-height: 4.8 * $unit !default;
-$tab-icon-height: 2.4 * $unit !default;
-$tab-icon-margin-bottom: .8 * $unit !default;
-$tab-text-height: 1.4 * $unit !default;
-$tab-label-v-padding: ($tab-label-height - $tab-text-height) / 2 !default;
-$tab-navigation-border-color: $color-divider !default;
-$tab-pointer-color: $color-primary !default;
-$tab-pointer-height: .2 * $unit !default;
-$tab-text: $color-black !default;
-$tab-text-color: $tab-text !default;
-$tab-text-inactive-color: rgba($tab-text, .7) !default;
-
-// Inverse
-$tab-inverse-bar-color: $color-primary !default;
-$tab-inverse-pointer-color: $color-accent !default;
-$tab-inverse-text: $color-primary-contrast !default;
-$tab-inverse-text-color: $tab-inverse-text !default;
-$tab-inverse-text-inactive-color: rgba($tab-inverse-text, .7) !default;
diff --git a/lib/tabs/index.d.ts b/lib/tabs/index.d.ts
deleted file mode 100644
index 1dbdeda09..000000000
--- a/lib/tabs/index.d.ts
+++ /dev/null
@@ -1,121 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface TabsTheme {
-  /**
-   * Added to the active tab content and header.
-   */
-  active?: string;
-  /**
-   * Used for the navigation element.
-   */
-  navigation?: string;
-  /**
-   * Used for the moving underline element.
-   */
-  pointer?: string;
-  /**
-   * Used as a root classname for the component.
-   */
-  tabs?: string;
-  /**
-   * Used for the tab content element.
-   */
-  tab?: string;
-}
-
-interface TabsProps extends ReactToolbox.Props {
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * Disable the animation below the active tab.
-   * @default false
-   */
-  disableAnimatedBottomBorder?: boolean;
-  /**
-   * Current
-   * @default 0
-   */
-  index?: number;
-  /**
-   * `unmounted` mode will not mount the tab content of inactive tabs.
-   * `display` mode will mount but hide inactive tabs.
-   * Consider holding state outside of the Tabs component before using `display` mode
-   * @default unmounted
-   */
-  hideMode?: 'display' | 'unmounted';
-  /**
-   * If True, the tabs will have an inverse style.
-   */
-  inverse?: boolean;
-  /**
-   * If True, the tabs will be fixed, covering the whole width.
-   */
-  fixed?: boolean;
-  /**
-   * Callback function that is fired when the tab changes.
-   */
-  onChange?: Function;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: TabsTheme;
-}
-
-export class Tabs extends React.Component<TabsProps, {}> { }
-
-export interface TabTheme {
-  /**
-   * Added to the navigation tab element in case it's active.
-   */
-  active?: string;
-  /**
-   * Added to the navigation tab element in case it's disabled.
-   */
-  disabled?: string;
-  /**
-   * Added to the navigation tab element in case it's hidden.
-   */
-  hidden?: string;
-  /**
-   * Added to the navigation tab element in case it's active.
-   */
-  label?: string;
-}
-
-interface TabProps extends ReactToolbox.Props {
-  /**
-   * If true, the current component is visible.
-   */
-  active?: boolean;
-  /**
-   * Additional class name to provide custom styling for the active tab.
-   */
-  activeClassName?: string;
-  /**
-   * If true, the current component is not clickable.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * If true, the current component is not visible.
-   * @default false
-   */
-  hidden?: boolean;
-  /**
-   * Label text for navigation header. Required.
-   */
-  label: string;
-  /**
-   * Callback function that is fired when the tab is activated.
-   */
-  onActive?: Function;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: TabTheme;
-}
-
-export class Tab extends React.Component<TabProps, {}> { }
diff --git a/lib/tabs/index.js b/lib/tabs/index.js
deleted file mode 100644
index 0cec1dfe9..000000000
--- a/lib/tabs/index.js
+++ /dev/null
@@ -1,36 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Tabs = exports.Tab = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _Tabs = require('./Tabs.js');
-
-var _TabContent = require('./TabContent.js');
-
-var _Tab = require('./Tab.js');
-
-var _FontIcon = require('../font_icon/FontIcon.js');
-
-var _FontIcon2 = _interopRequireDefault(_FontIcon);
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var applyTheme = function applyTheme(Component) {
-  return (0, _reactCssThemr.themr)(_identifiers.TABS, _theme2.default)(Component);
-};
-var ThemedTabContent = applyTheme(_TabContent.TabContent);
-var ThemedTab = applyTheme(_Tab.Tab);
-var ThemedTabs = applyTheme((0, _Tabs.tabsFactory)(ThemedTab, ThemedTabContent, _FontIcon2.default));
-
-exports.Tab = ThemedTab;
-exports.Tabs = ThemedTabs;
\ No newline at end of file
diff --git a/lib/tabs/theme.scss b/lib/tabs/theme.scss
deleted file mode 100644
index 85ae18bec..000000000
--- a/lib/tabs/theme.scss
+++ /dev/null
@@ -1,142 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.tabs {
-  display: flex;
-  flex-direction: column;
-}
-
-.navigation {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  overflow-x: hidden;
-  box-shadow: inset 0 -1px $tab-navigation-border-color;
-}
-
-.navigationContainer {
-  display: flex;
-
-  .navigation {
-    flex: 1;
-  }
-}
-
-.arrow {
-  padding: 0 $tab-label-h-padding;
-  color: $tab-text-color;
-}
-
-.arrowContainer {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  box-shadow: inset 0 -1px $tab-navigation-border-color;
-}
-
-.label {
-  padding: $tab-label-v-padding $tab-label-h-padding;
-  font-size: $tab-text-height;
-  font-weight: $font-weight-semi-bold;
-  line-height: 1;
-  color: $tab-text-inactive-color;
-  text-align: center;
-  text-transform: uppercase;
-  transition-timing-function: $animation-curve-default;
-  transition-duration: $animation-duration;
-  transition-property: box-shadow, color;
-
-  &.active {
-    color: $tab-text-color;
-  }
-
-  &.disabled {
-    opacity: $tab-label-disabled-opacity;
-  }
-
-  &:not(.disabled) {
-    cursor: pointer;
-  }
-
-  &.hidden {
-    display: none;
-  }
-
-  &.withIcon {
-    padding-top: ($tab-label-v-padding - $tab-icon-margin-bottom / 2);
-    padding-bottom: ($tab-label-v-padding - $tab-icon-margin-bottom / 2);
-  }
-
-  &.withText {
-    .icon {
-      margin-bottom: $tab-icon-margin-bottom;
-    }
-  }
-}
-
-.icon {
-  display: block;
-  height: $tab-icon-height;
-  margin: 0 auto;
-  line-height: $tab-icon-height;
-}
-
-.pointer {
-  position: absolute;
-  width: 0;
-  height: $tab-pointer-height;
-  margin-top: - $tab-pointer-height;
-  background-color: $tab-pointer-color;
-  transition-timing-function: $animation-curve-default;
-  transition-duration: $animation-duration;
-  transition-property: left, width;
-
-  &.disableAnimation {
-    transition: none;
-  }
-}
-
-.tab {
-  display: flex;
-  flex-direction: column;
-  padding: $tab-label-v-padding $tab-label-h-padding;
-
-  &:not(.active) {
-    display: none;
-  }
-
-  &.active {
-    display: flex;
-  }
-}
-
-.fixed {
-  .label {
-    flex: 1;
-    text-align: center;
-  }
-}
-
-.inverse {
-  .navigation, .arrowContainer {
-    background-color: $tab-inverse-bar-color;
-  }
-
-  .label {
-    color: $tab-inverse-text-inactive-color;
-
-    &.active {
-      color: $tab-inverse-text-color;
-    }
-  }
-
-  .arrow {
-    color: $tab-inverse-text-color;
-  }
-
-  .pointer {
-    background-color: $tab-inverse-pointer-color;
-  }
-}
diff --git a/lib/time_picker/Clock.js b/lib/time_picker/Clock.js
deleted file mode 100644
index 8a3748ceb..000000000
--- a/lib/time_picker/Clock.js
+++ /dev/null
@@ -1,181 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactAddonsCssTransitionGroup = require('react-addons-css-transition-group');
-
-var _reactAddonsCssTransitionGroup2 = _interopRequireDefault(_reactAddonsCssTransitionGroup);
-
-var _animations = require('../animations');
-
-var _time = require('../utils/time.js');
-
-var _time2 = _interopRequireDefault(_time);
-
-var _ClockHours = require('./ClockHours.js');
-
-var _ClockHours2 = _interopRequireDefault(_ClockHours);
-
-var _ClockMinutes = require('./ClockMinutes.js');
-
-var _ClockMinutes2 = _interopRequireDefault(_ClockMinutes);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var Clock = function (_Component) {
-  _inherits(Clock, _Component);
-
-  function Clock() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    _classCallCheck(this, Clock);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Clock.__proto__ || Object.getPrototypeOf(Clock)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      center: { x: null, y: null },
-      radius: 0
-    }, _this.handleHourChange = function (hours) {
-      if (_this.props.time.getHours() !== hours) {
-        _this.props.onChange(_time2.default.setHours(_this.props.time, _this.adaptHourToFormat(hours)));
-      }
-    }, _this.handleMinuteChange = function (minutes) {
-      if (_this.props.time.getMinutes() !== minutes) {
-        _this.props.onChange(_time2.default.setMinutes(_this.props.time, minutes));
-      }
-    }, _this.handleCalculateShape = function () {
-      var _this$refs$placeholde = _this.refs.placeholder.getBoundingClientRect(),
-          top = _this$refs$placeholde.top,
-          left = _this$refs$placeholde.left,
-          width = _this$refs$placeholde.width;
-
-      _this.setState({
-        center: { x: left + width / 2 - window.pageXOffset, y: top + width / 2 - window.pageXOffset },
-        radius: width / 2
-      });
-    }, _temp), _possibleConstructorReturn(_this, _ret);
-  }
-
-  _createClass(Clock, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      var _this2 = this;
-
-      window.addEventListener('resize', this.handleCalculateShape);
-      setTimeout(function () {
-        _this2.handleCalculateShape();
-      });
-    }
-  }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      window.removeEventListener('resize', this.handleCalculateShape);
-    }
-  }, {
-    key: 'adaptHourToFormat',
-    value: function adaptHourToFormat(hour) {
-      if (this.props.format === 'ampm') {
-        if (_time2.default.getTimeMode(this.props.time) === 'pm') {
-          return hour < 12 ? hour + 12 : hour;
-        } else {
-          return hour === 12 ? 0 : hour;
-        }
-      } else {
-        return hour;
-      }
-    }
-  }, {
-    key: 'renderHours',
-    value: function renderHours() {
-      return _react2.default.createElement(_ClockHours2.default, {
-        center: this.state.center,
-        format: this.props.format,
-        onChange: this.handleHourChange,
-        radius: this.state.radius,
-        selected: this.props.time.getHours(),
-        spacing: this.state.radius * 0.18,
-        onHandMoved: this.props.onHandMoved,
-        theme: this.props.theme
-      });
-    }
-  }, {
-    key: 'renderMinutes',
-    value: function renderMinutes() {
-      return _react2.default.createElement(_ClockMinutes2.default, {
-        center: this.state.center,
-        onChange: this.handleMinuteChange,
-        radius: this.state.radius,
-        selected: this.props.time.getMinutes(),
-        spacing: this.state.radius * 0.18,
-        onHandMoved: this.props.onHandMoved,
-        theme: this.props.theme
-      });
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var theme = this.props.theme;
-
-      var animation = this.props.display === 'hours' ? _animations.ZoomOut : _animations.ZoomIn;
-      return _react2.default.createElement(
-        'div',
-        { 'data-react-toolbox': 'clock', className: theme.clock },
-        _react2.default.createElement(
-          'div',
-          { ref: 'placeholder', className: theme.placeholder, style: { height: this.state.radius * 2 } },
-          _react2.default.createElement(
-            _reactAddonsCssTransitionGroup2.default,
-            { transitionName: animation, transitionEnterTimeout: 500, transitionLeaveTimeout: 500 },
-            _react2.default.createElement(
-              'div',
-              { key: this.props.display, className: theme.clockWrapper, style: { height: this.state.radius * 2 } },
-              this.props.display === 'hours' ? this.renderHours() : null,
-              this.props.display === 'minutes' ? this.renderMinutes() : null
-            )
-          )
-        )
-      );
-    }
-  }]);
-
-  return Clock;
-}(_react.Component);
-
-Clock.propTypes = {
-  className: _react.PropTypes.string,
-  display: _react.PropTypes.oneOf(['hours', 'minutes']),
-  format: _react.PropTypes.oneOf(['24hr', 'ampm']),
-  onChange: _react.PropTypes.func,
-  onHandMoved: _react.PropTypes.func,
-  theme: _react.PropTypes.shape({
-    clock: _react.PropTypes.string,
-    clockWrapper: _react.PropTypes.string,
-    placeholder: _react.PropTypes.string
-  }),
-  time: _react.PropTypes.object
-};
-Clock.defaultProps = {
-  className: '',
-  display: 'hours',
-  format: '24hr',
-  time: new Date()
-};
-exports.default = Clock;
\ No newline at end of file
diff --git a/lib/time_picker/ClockFace.js b/lib/time_picker/ClockFace.js
deleted file mode 100644
index eacf9ec05..000000000
--- a/lib/time_picker/ClockFace.js
+++ /dev/null
@@ -1,122 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var Face = function (_Component) {
-  _inherits(Face, _Component);
-
-  function Face() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    _classCallCheck(this, Face);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Face.__proto__ || Object.getPrototypeOf(Face)).call.apply(_ref, [this].concat(args))), _this), _this.renderNumber = function (number, idx) {
-      var _this$props = _this.props,
-          active = _this$props.active,
-          radius = _this$props.radius,
-          spacing = _this$props.spacing,
-          theme = _this$props.theme,
-          twoDigits = _this$props.twoDigits;
-
-      return _react2.default.createElement(
-        'span',
-        {
-          className: (0, _classnames3.default)(theme.number, _defineProperty({}, theme.active, number === active)),
-          style: _this.numberStyle(radius - spacing, idx + 1),
-          key: number
-        },
-        twoDigits ? ('0' + number).slice(-2) : number
-      );
-    }, _temp), _possibleConstructorReturn(_this, _ret);
-  }
-
-  _createClass(Face, [{
-    key: 'numberStyle',
-    value: function numberStyle(rad, num) {
-      return {
-        position: 'absolute',
-        left: rad + rad * Math.sin(360 * (Math.PI / 180) / 12 * (num - 1)) + this.props.spacing,
-        top: rad - rad * Math.cos(360 * (Math.PI / 180) / 12 * (num - 1)) + this.props.spacing
-      };
-    }
-  }, {
-    key: 'faceStyle',
-    value: function faceStyle() {
-      return {
-        height: this.props.radius * 2,
-        width: this.props.radius * 2
-      };
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          numbers = _props.numbers,
-          onTouchStart = _props.onTouchStart,
-          onMouseDown = _props.onMouseDown,
-          theme = _props.theme;
-
-      return _react2.default.createElement(
-        'div',
-        {
-          ref: 'root',
-          className: theme.face,
-          onTouchStart: onTouchStart,
-          onMouseDown: onMouseDown,
-          style: this.faceStyle()
-        },
-        numbers.map(this.renderNumber)
-      );
-    }
-  }]);
-
-  return Face;
-}(_react.Component);
-
-Face.propTypes = {
-  active: _react.PropTypes.number,
-  numbers: _react.PropTypes.array,
-  radius: _react.PropTypes.number,
-  spacing: _react.PropTypes.number,
-  theme: _react.PropTypes.shape({
-    active: _react.PropTypes.string,
-    face: _react.PropTypes.string,
-    number: _react.PropTypes.string
-  }),
-  twoDigits: _react.PropTypes.bool
-};
-Face.defaultProps = {
-  active: null,
-  numbers: [],
-  radius: 0,
-  twoDigits: false
-};
-exports.default = Face;
\ No newline at end of file
diff --git a/lib/time_picker/ClockHand.js b/lib/time_picker/ClockHand.js
deleted file mode 100644
index d16bdaeab..000000000
--- a/lib/time_picker/ClockHand.js
+++ /dev/null
@@ -1,175 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _events = require('../utils/events.js');
-
-var _events2 = _interopRequireDefault(_events);
-
-var _prefixer = require('../utils/prefixer.js');
-
-var _prefixer2 = _interopRequireDefault(_prefixer);
-
-var _utils = require('../utils/utils.js');
-
-var _utils2 = _interopRequireDefault(_utils);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var Hand = function (_Component) {
-  _inherits(Hand, _Component);
-
-  function Hand() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    _classCallCheck(this, Hand);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Hand.__proto__ || Object.getPrototypeOf(Hand)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      knobWidth: 0
-    }, _this.handleMouseMove = function (event) {
-      _this.move(_events2.default.getMousePosition(event));
-    }, _this.handleTouchMove = function (event) {
-      _this.move(_events2.default.getTouchPosition(event));
-    }, _this.handleMouseUp = function () {
-      _this.end(_this.getMouseEventMap());
-    }, _this.handleTouchEnd = function () {
-      _this.end(_this.getTouchEventMap());
-    }, _temp), _possibleConstructorReturn(_this, _ret);
-  }
-
-  _createClass(Hand, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      var _this2 = this;
-
-      setTimeout(function () {
-        _this2.setState({ knobWidth: _this2.refs.knob.offsetWidth });
-      });
-    }
-  }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      _events2.default.removeEventsFromDocument(this.getMouseEventMap());
-      _events2.default.removeEventsFromDocument(this.getTouchEventMap());
-    }
-  }, {
-    key: 'getMouseEventMap',
-    value: function getMouseEventMap() {
-      return {
-        mousemove: this.handleMouseMove,
-        mouseup: this.handleMouseUp
-      };
-    }
-  }, {
-    key: 'getTouchEventMap',
-    value: function getTouchEventMap() {
-      return {
-        touchmove: this.handleTouchMove,
-        touchend: this.handleTouchEnd
-      };
-    }
-  }, {
-    key: 'mouseStart',
-    value: function mouseStart(event) {
-      _events2.default.addEventsToDocument(this.getMouseEventMap());
-      this.move(_events2.default.getMousePosition(event));
-    }
-  }, {
-    key: 'touchStart',
-    value: function touchStart(event) {
-      _events2.default.addEventsToDocument(this.getTouchEventMap());
-      this.move(_events2.default.getTouchPosition(event));
-      _events2.default.pauseEvent(event);
-    }
-  }, {
-    key: 'getPositionRadius',
-    value: function getPositionRadius(position) {
-      var x = this.props.origin.x - position.x;
-      var y = this.props.origin.y - position.y;
-      return Math.sqrt(x * x + y * y);
-    }
-  }, {
-    key: 'trimAngleToValue',
-    value: function trimAngleToValue(angle) {
-      return this.props.step * Math.round(angle / this.props.step);
-    }
-  }, {
-    key: 'positionToAngle',
-    value: function positionToAngle(position) {
-      return _utils2.default.angle360FromPositions(this.props.origin.x, this.props.origin.y, position.x, position.y);
-    }
-  }, {
-    key: 'end',
-    value: function end(evts) {
-      if (this.props.onMoved) this.props.onMoved();
-      _events2.default.removeEventsFromDocument(evts);
-    }
-  }, {
-    key: 'move',
-    value: function move(position) {
-      var degrees = this.trimAngleToValue(this.positionToAngle(position));
-      var radius = this.getPositionRadius(position);
-      if (this.props.onMove) this.props.onMove(degrees === 360 ? 0 : degrees, radius);
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var theme = this.props.theme;
-
-      var className = theme.hand + ' ' + this.props.className;
-      var handStyle = (0, _prefixer2.default)({
-        height: this.props.length - this.state.knobWidth / 2,
-        transform: 'rotate(' + this.props.angle + 'deg)'
-      });
-
-      return _react2.default.createElement(
-        'div',
-        { className: className, style: handStyle },
-        _react2.default.createElement('div', { ref: 'knob', className: theme.knob })
-      );
-    }
-  }]);
-
-  return Hand;
-}(_react.Component);
-
-Hand.propTypes = {
-  angle: _react.PropTypes.number,
-  className: _react.PropTypes.string,
-  length: _react.PropTypes.number,
-  onMove: _react.PropTypes.func,
-  onMoved: _react.PropTypes.func,
-  origin: _react.PropTypes.object,
-  step: _react.PropTypes.number,
-  theme: _react.PropTypes.shape({
-    hand: _react.PropTypes.string,
-    knob: _react.PropTypes.string
-  })
-};
-Hand.defaultProps = {
-  className: '',
-  angle: 0,
-  length: 0,
-  origin: {}
-};
-exports.default = Hand;
\ No newline at end of file
diff --git a/lib/time_picker/ClockHours.js b/lib/time_picker/ClockHours.js
deleted file mode 100644
index 365c27724..000000000
--- a/lib/time_picker/ClockHours.js
+++ /dev/null
@@ -1,149 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _utils = require('../utils/utils.js');
-
-var _utils2 = _interopRequireDefault(_utils);
-
-var _ClockHand = require('./ClockHand.js');
-
-var _ClockHand2 = _interopRequireDefault(_ClockHand);
-
-var _ClockFace = require('./ClockFace.js');
-
-var _ClockFace2 = _interopRequireDefault(_ClockFace);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
-var outerNumbers = [0].concat(_toConsumableArray(_utils2.default.range(13, 24)));
-var innerNumbers = [12].concat(_toConsumableArray(_utils2.default.range(1, 12)));
-var innerSpacing = 1.7;
-var step = 360 / 12;
-
-var Hours = function (_Component) {
-  _inherits(Hours, _Component);
-
-  function Hours() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    _classCallCheck(this, Hours);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Hours.__proto__ || Object.getPrototypeOf(Hours)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      inner: _this.props.format === '24hr' && _this.props.selected > 0 && _this.props.selected <= 12
-    }, _this.handleHandMove = function (degrees, radius) {
-      var currentInner = radius < _this.props.radius - _this.props.spacing * innerSpacing;
-      if (_this.props.format === '24hr' && _this.state.inner !== currentInner) {
-        _this.setState({ inner: currentInner }, function () {
-          _this.props.onChange(_this.valueFromDegrees(degrees));
-        });
-      } else {
-        _this.props.onChange(_this.valueFromDegrees(degrees));
-      }
-    }, _this.handleMouseDown = function (event) {
-      _this.refs.hand.mouseStart(event);
-    }, _this.handleTouchStart = function (event) {
-      _this.refs.hand.touchStart(event);
-    }, _temp), _possibleConstructorReturn(_this, _ret);
-  }
-
-  _createClass(Hours, [{
-    key: 'valueFromDegrees',
-    value: function valueFromDegrees(degrees) {
-      if (this.props.format === 'ampm' || this.props.format === '24hr' && this.state.inner) {
-        return innerNumbers[degrees / step];
-      } else {
-        return outerNumbers[degrees / step];
-      }
-    }
-  }, {
-    key: 'renderInnerFace',
-    value: function renderInnerFace(innerRadius) {
-      if (this.props.format === '24hr') {
-        return _react2.default.createElement(_ClockFace2.default, {
-          onTouchStart: this.handleTouchStart,
-          onMouseDown: this.handleMouseDown,
-          numbers: innerNumbers,
-          spacing: this.props.spacing,
-          radius: innerRadius,
-          theme: this.props.theme,
-          active: this.props.selected
-        });
-      }
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          format = _props.format,
-          selected = _props.selected,
-          radius = _props.radius,
-          spacing = _props.spacing,
-          center = _props.center,
-          onHandMoved = _props.onHandMoved;
-
-      var is24hr = format === '24hr';
-
-      return _react2.default.createElement(
-        'div',
-        null,
-        _react2.default.createElement(_ClockFace2.default, {
-          onTouchStart: this.handleTouchStart,
-          onMouseDown: this.handleMouseDown,
-          numbers: is24hr ? outerNumbers : innerNumbers,
-          spacing: spacing,
-          radius: radius,
-          twoDigits: is24hr,
-          active: is24hr ? selected : selected % 12 || 12,
-          theme: this.props.theme
-        }),
-        this.renderInnerFace(radius - spacing * innerSpacing),
-        _react2.default.createElement(_ClockHand2.default, { ref: 'hand',
-          angle: selected * step,
-          length: (this.state.inner ? radius - spacing * innerSpacing : radius) - spacing,
-          onMove: this.handleHandMove,
-          theme: this.props.theme,
-          onMoved: onHandMoved,
-          origin: center,
-          step: step
-        })
-      );
-    }
-  }]);
-
-  return Hours;
-}(_react.Component);
-
-Hours.propTypes = {
-  center: _react.PropTypes.object,
-  format: _react.PropTypes.oneOf(['24hr', 'ampm']),
-  onChange: _react.PropTypes.func,
-  onHandMoved: _react.PropTypes.func,
-  radius: _react.PropTypes.number,
-  selected: _react.PropTypes.number,
-  spacing: _react.PropTypes.number,
-  theme: _react.PropTypes.object
-};
-exports.default = Hours;
\ No newline at end of file
diff --git a/lib/time_picker/ClockMinutes.js b/lib/time_picker/ClockMinutes.js
deleted file mode 100644
index 0b21e74a5..000000000
--- a/lib/time_picker/ClockMinutes.js
+++ /dev/null
@@ -1,105 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _utils = require('../utils/utils.js');
-
-var _utils2 = _interopRequireDefault(_utils);
-
-var _ClockHand = require('./ClockHand.js');
-
-var _ClockHand2 = _interopRequireDefault(_ClockHand);
-
-var _ClockFace = require('./ClockFace.js');
-
-var _ClockFace2 = _interopRequireDefault(_ClockFace);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var minutes = _utils2.default.range(0, 60, 5);
-var step = 360 / 60;
-
-var Minutes = function (_Component) {
-  _inherits(Minutes, _Component);
-
-  function Minutes() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    _classCallCheck(this, Minutes);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Minutes.__proto__ || Object.getPrototypeOf(Minutes)).call.apply(_ref, [this].concat(args))), _this), _this.handleHandMove = function (degrees) {
-      _this.props.onChange(degrees / step);
-    }, _this.handleMouseDown = function (event) {
-      _this.refs.hand.mouseStart(event);
-    }, _this.handleTouchStart = function (event) {
-      _this.refs.hand.touchStart(event);
-    }, _temp), _possibleConstructorReturn(_this, _ret);
-  }
-
-  _createClass(Minutes, [{
-    key: 'render',
-    value: function render() {
-      return _react2.default.createElement(
-        'div',
-        null,
-        _react2.default.createElement(_ClockFace2.default, {
-          onTouchStart: this.handleTouchStart,
-          onMouseDown: this.handleMouseDown,
-          numbers: minutes,
-          spacing: this.props.spacing,
-          radius: this.props.radius,
-          active: this.props.selected,
-          theme: this.props.theme,
-          twoDigits: true
-        }),
-        _react2.default.createElement(_ClockHand2.default, { ref: 'hand',
-          className: minutes.indexOf(this.props.selected) === -1 ? this.props.theme.small : '',
-          angle: this.props.selected * step,
-          length: this.props.radius - this.props.spacing,
-          onMove: this.handleHandMove,
-          origin: this.props.center,
-          theme: this.props.theme,
-          step: step
-        })
-      );
-    }
-  }]);
-
-  return Minutes;
-}(_react.Component);
-
-Minutes.propTypes = {
-  center: _react.PropTypes.object,
-  onChange: _react.PropTypes.func,
-  radius: _react.PropTypes.number,
-  selected: _react.PropTypes.number,
-  spacing: _react.PropTypes.number,
-  theme: _react.PropTypes.shape({
-    small: _react.PropTypes.string
-  })
-};
-Minutes.defaultProps = {
-  selected: 0,
-  onChange: null
-};
-exports.default = Minutes;
\ No newline at end of file
diff --git a/lib/time_picker/TimePicker.js b/lib/time_picker/TimePicker.js
deleted file mode 100644
index b71e6d9ea..000000000
--- a/lib/time_picker/TimePicker.js
+++ /dev/null
@@ -1,196 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TimePicker = exports.timePickerFactory = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _events = require('../utils/events.js');
-
-var _events2 = _interopRequireDefault(_events);
-
-var _time = require('../utils/time.js');
-
-var _time2 = _interopRequireDefault(_time);
-
-var _Dialog = require('../dialog/Dialog.js');
-
-var _Dialog2 = _interopRequireDefault(_Dialog);
-
-var _Input = require('../input/Input.js');
-
-var _Input2 = _interopRequireDefault(_Input);
-
-var _TimePickerDialog = require('./TimePickerDialog.js');
-
-var _TimePickerDialog2 = _interopRequireDefault(_TimePickerDialog);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(TimePickerDialog, Input) {
-  var TimePicker = function (_Component) {
-    _inherits(TimePicker, _Component);
-
-    function TimePicker() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, TimePicker);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TimePicker.__proto__ || Object.getPrototypeOf(TimePicker)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-        active: _this.props.active
-      }, _this.handleDismiss = function () {
-        _this.setState({ active: false });
-        if (_this.props.onDismiss) {
-          _this.props.onDismiss();
-        }
-      }, _this.handleInputFocus = function (event) {
-        _events2.default.pauseEvent(event);
-        _this.setState({ active: true });
-      }, _this.handleInputBlur = function (event) {
-        _events2.default.pauseEvent(event);
-        _this.setState({ active: false });
-      }, _this.handleInputClick = function (event) {
-        _events2.default.pauseEvent(event);
-        _this.setState({ active: true });
-        if (_this.props.onClick) _this.props.onClick(event);
-      }, _this.handleInputKeyPress = function (event) {
-        if (event.charCode === 13) {
-          _events2.default.pauseEvent(event);
-          _this.setState({ active: true });
-        }
-        if (_this.props.onKeyPress) _this.props.onKeyPress(event);
-      }, _this.handleSelect = function (value, event) {
-        if (_this.props.onChange) _this.props.onChange(value, event);
-        _this.setState({ active: false });
-      }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(TimePicker, [{
-      key: 'componentWillReceiveProps',
-      value: function componentWillReceiveProps(nextProps) {
-        if (nextProps.active !== this.props.active && this.state.active !== nextProps.active) {
-          this.setState({ active: nextProps.active });
-        }
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var _props = this.props,
-            active = _props.active,
-            onDismiss = _props.onDismiss,
-            cancelLabel = _props.cancelLabel,
-            format = _props.format,
-            inputClassName = _props.inputClassName,
-            okLabel = _props.okLabel,
-            onEscKeyDown = _props.onEscKeyDown,
-            onOverlayClick = _props.onOverlayClick,
-            readonly = _props.readonly,
-            value = _props.value,
-            others = _objectWithoutProperties(_props, ['active', 'onDismiss', 'cancelLabel', 'format', 'inputClassName', 'okLabel', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'value']);
-
-        var formattedTime = value ? _time2.default.formatTime(value, format) : '';
-        return _react2.default.createElement(
-          'div',
-          { 'data-react-toolbox': 'time-picker' },
-          _react2.default.createElement(Input, _extends({}, others, {
-            className: (0, _classnames3.default)(this.props.theme.input, _defineProperty({}, inputClassName, inputClassName)),
-            disabled: readonly,
-            error: this.props.error,
-            label: this.props.label,
-            name: this.props.name,
-            onKeyPress: this.handleInputKeyPress,
-            onClick: this.handleInputClick,
-            readOnly: true,
-            type: 'text',
-            value: formattedTime
-          })),
-          _react2.default.createElement(TimePickerDialog, {
-            active: this.state.active,
-            cancelLabel: cancelLabel,
-            className: this.props.className,
-            format: format,
-            name: this.props.name,
-            okLabel: okLabel,
-            onDismiss: this.handleDismiss,
-            onEscKeyDown: onEscKeyDown,
-            onOverlayClick: onOverlayClick,
-            onSelect: this.handleSelect,
-            theme: this.props.theme,
-            value: this.props.value
-          })
-        );
-      }
-    }]);
-
-    return TimePicker;
-  }(_react.Component);
-
-  TimePicker.propTypes = {
-    active: _react.PropTypes.bool,
-    cancelLabel: _react.PropTypes.string,
-    className: _react.PropTypes.string,
-    error: _react.PropTypes.string,
-    format: _react.PropTypes.oneOf(['24hr', 'ampm']),
-    inputClassName: _react.PropTypes.string,
-    label: _react.PropTypes.string,
-    name: _react.PropTypes.string,
-    okLabel: _react.PropTypes.string,
-    onChange: _react.PropTypes.func,
-    onClick: _react.PropTypes.func,
-    onDismiss: _react.PropTypes.func,
-    onEscKeyDown: _react.PropTypes.func,
-    onKeyPress: _react.PropTypes.func,
-    onOverlayClick: _react.PropTypes.func,
-    readonly: _react.PropTypes.bool,
-    theme: _react.PropTypes.shape({
-      input: _react.PropTypes.string
-    }),
-    value: _react.PropTypes.object
-  };
-  TimePicker.defaultProps = {
-    active: false,
-    className: '',
-    format: '24hr'
-  };
-
-
-  return TimePicker;
-};
-
-var TimePickerDialog = (0, _TimePickerDialog2.default)(_Dialog2.default);
-var TimePicker = factory(TimePickerDialog, _Input2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.TIME_PICKER)(TimePicker);
-exports.timePickerFactory = factory;
-exports.TimePicker = TimePicker;
\ No newline at end of file
diff --git a/lib/time_picker/TimePickerDialog.js b/lib/time_picker/TimePickerDialog.js
deleted file mode 100644
index 0b9d049a2..000000000
--- a/lib/time_picker/TimePickerDialog.js
+++ /dev/null
@@ -1,202 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _time = require('../utils/time.js');
-
-var _time2 = _interopRequireDefault(_time);
-
-var _Clock = require('./Clock.js');
-
-var _Clock2 = _interopRequireDefault(_Clock);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var factory = function factory(Dialog) {
-  var TimePickerDialog = function (_Component) {
-    _inherits(TimePickerDialog, _Component);
-
-    function TimePickerDialog() {
-      var _ref;
-
-      var _temp, _this, _ret;
-
-      _classCallCheck(this, TimePickerDialog);
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TimePickerDialog.__proto__ || Object.getPrototypeOf(TimePickerDialog)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-        display: 'hours',
-        displayTime: new Date(_this.props.value.getTime())
-      }, _this.handleClockChange = function (value) {
-        _this.setState({ displayTime: value });
-      }, _this.handleSelect = function (event) {
-        _this.props.onSelect(_this.state.displayTime, event);
-      }, _this.toggleTimeMode = function () {
-        _this.setState({ displayTime: _time2.default.toggleTimeMode(_this.state.displayTime) });
-      }, _this.handleHandMoved = function () {
-        if (_this.state.display === 'hours') _this.setState({ display: 'minutes' });
-      }, _this.switchDisplay = function (event) {
-        _this.setState({ display: event.target.id });
-      }, _this.actions = [{ label: _this.props.cancelLabel, className: _this.props.theme.button, onClick: _this.props.onDismiss }, { label: _this.props.okLabel, className: _this.props.theme.button, name: _this.props.name, onClick: _this.handleSelect }], _temp), _possibleConstructorReturn(_this, _ret);
-    }
-
-    _createClass(TimePickerDialog, [{
-      key: 'componentWillReceiveProps',
-      value: function componentWillReceiveProps(nextProps) {
-        if (nextProps.value.getTime() !== this.state.displayTime.getTime()) {
-          this.setState({ displayTime: new Date(nextProps.value.getTime()) });
-        }
-      }
-    }, {
-      key: 'componentDidUpdate',
-      value: function componentDidUpdate(prevProps) {
-        if (!prevProps.active && this.props.active) {
-          setTimeout(this.refs.clock.handleCalculateShape, 1000);
-        }
-      }
-    }, {
-      key: 'formatHours',
-      value: function formatHours() {
-        if (this.props.format === 'ampm') {
-          return this.state.displayTime.getHours() % 12 || 12;
-        } else {
-          return this.state.displayTime.getHours();
-        }
-      }
-    }, {
-      key: 'renderAMPMLabels',
-      value: function renderAMPMLabels() {
-        var theme = this.props.theme;
-
-        if (this.props.format === 'ampm') {
-          return _react2.default.createElement(
-            'div',
-            { className: theme.ampm },
-            _react2.default.createElement(
-              'span',
-              { className: theme.am, onClick: this.toggleTimeMode },
-              'AM'
-            ),
-            _react2.default.createElement(
-              'span',
-              { className: theme.pm, onClick: this.toggleTimeMode },
-              'PM'
-            )
-          );
-        }
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var theme = this.props.theme;
-
-        var display = this.state.display + 'Display';
-        var format = _time2.default.getTimeMode(this.state.displayTime) + 'Format';
-        var className = (0, _classnames2.default)([theme.dialog, theme[display], theme[format]], this.props.className);
-        return _react2.default.createElement(
-          Dialog,
-          {
-            actions: this.actions,
-            active: this.props.active,
-            className: className,
-            onEscKeyDown: this.props.onEscKeyDown,
-            onOverlayClick: this.props.onOverlayClick
-          },
-          _react2.default.createElement(
-            'header',
-            { className: theme.header },
-            _react2.default.createElement(
-              'span',
-              { id: 'hours', className: theme.hours, onClick: this.switchDisplay },
-              ('0' + this.formatHours()).slice(-2)
-            ),
-            _react2.default.createElement(
-              'span',
-              { className: theme.separator },
-              ':'
-            ),
-            _react2.default.createElement(
-              'span',
-              { id: 'minutes', className: theme.minutes, onClick: this.switchDisplay },
-              ('0' + this.state.displayTime.getMinutes()).slice(-2)
-            ),
-            this.renderAMPMLabels()
-          ),
-          _react2.default.createElement(_Clock2.default, {
-            ref: 'clock',
-            display: this.state.display,
-            format: this.props.format,
-            onChange: this.handleClockChange,
-            onHandMoved: this.handleHandMoved,
-            theme: this.props.theme,
-            time: this.state.displayTime
-          })
-        );
-      }
-    }]);
-
-    return TimePickerDialog;
-  }(_react.Component);
-
-  TimePickerDialog.propTypes = {
-    active: _react.PropTypes.bool,
-    cancelLabel: _react.PropTypes.string,
-    className: _react.PropTypes.string,
-    format: _react.PropTypes.oneOf(['24hr', 'ampm']),
-    name: _react.PropTypes.string,
-    okLabel: _react.PropTypes.string,
-    onDismiss: _react.PropTypes.func,
-    onEscKeyDown: _react.PropTypes.func,
-    onOverlayClick: _react.PropTypes.func,
-    onSelect: _react.PropTypes.func,
-    theme: _react.PropTypes.shape({
-      am: _react.PropTypes.string,
-      amFormat: _react.PropTypes.string,
-      ampm: _react.PropTypes.string,
-      button: _react.PropTypes.string,
-      dialog: _react.PropTypes.string,
-      header: _react.PropTypes.string,
-      hours: _react.PropTypes.string,
-      hoursDisplay: _react.PropTypes.string,
-      minutes: _react.PropTypes.string,
-      minutesDisplay: _react.PropTypes.string,
-      pm: _react.PropTypes.string,
-      pmFormat: _react.PropTypes.string,
-      separator: _react.PropTypes.string
-    }),
-    value: _react.PropTypes.object
-  };
-  TimePickerDialog.defaultProps = {
-    active: false,
-    cancelLabel: 'Cancel',
-    format: '24hr',
-    okLabel: 'Ok',
-    value: new Date()
-  };
-
-
-  return TimePickerDialog;
-};
-
-exports.default = factory;
\ No newline at end of file
diff --git a/lib/time_picker/_config.scss b/lib/time_picker/_config.scss
deleted file mode 100644
index 51fbd509b..000000000
--- a/lib/time_picker/_config.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-$timepicker-header-font-size: 5.2 * $unit !default;
-$timepicker-header-padding: $unit !default;
-$timepicker-ampm-font-size: 1.6 * $unit !default;
-$timepicker-primary: $color-primary !default;
-$timepicker-primary-contrast: $color-primary-contrast !default;
-$timepicker-primary-dark: $color-primary-dark !default;
-$timepicker-primary-color: $timepicker-primary !default;
-$timepicker-primary-hover-color: rgba($timepicker-primary, .2) !default;
-$timepicker-primary-contrast-color: $timepicker-primary-contrast !default;
-$timepicker-primary-dark-color: $timepicker-primary-dark !default;
-$timepicker-ampm-height: 2.2 * $unit !default;
-$timepicker-ampm-width: 4 * $unit !default;
-$timepicker-dialog-width: 30 * $unit !default;
-
-$clock-padding: 1.5 * $unit 2 * $unit !default;
-$clock-primary: $color-primary !default;
-$clock-primary-contrast: $color-primary-contrast !default;
-$clock-primary-dark: $color-primary-dark !default;
-$clock-primary-color: $clock-primary !default;
-$clock-primary-hover-color: rgba($clock-primary, .2) !default;
-$clock-primary-contrast-color: $clock-primary-contrast !default;
-$clock-primary-dark-color: $clock-primary-dark !default;
-$clock-number-size: 2 * $unit !default;
-$clock-hand-width: .4 * $unit !default;
-$clock-hand-dot-size: 1 * $unit !default;
-$clock-knob-size: 3.4 * $unit !default;
-$clock-knob-small-size: 1.2 * $unit !default;
diff --git a/lib/time_picker/index.d.ts b/lib/time_picker/index.d.ts
deleted file mode 100644
index 63f6237e3..000000000
--- a/lib/time_picker/index.d.ts
+++ /dev/null
@@ -1,137 +0,0 @@
-import * as React from "react";
-import ReactToolbox from "../index";
-
-export interface TimePickerTheme {
-  /**
-   * Added to the number which is active in clock face.
-   */
-  active?: string;
-  /**
-   * AM label in dialog header when mode is AM/PM.
-   */
-  am?: string;
-  /**
-   * Added to the dialog when the selected format is AM.
-   */
-  amFormat?: string;
-  /**
-   * Wrapper for AM and PM labels in header when mode is AM/PM.
-   */
-  ampm?: string;
-  /**
-   * Used for buttons inside the dialog of the picker.
-   */
-  button?: string;
-  /**
-   * Clock root class element.
-   */
-  clock?: string;
-  /**
-   * Wrapper for the proper positioning of the clock.
-   */
-  clockWrapper?: string;
-  /**
-   * Used for the dialog component.
-   */
-  dialog?: string;
-  /**
-   * Used to style the clock face.
-   */
-  face?: string;
-  /**
-   * Used for the clock's hand.
-   */
-  hand?: string;
-  /**
-   * Dialog header wrapper class.
-   */
-  header?: string;
-  /**
-   * Used for hours in dialog header.
-   */
-  hours?: string;
-  /**
-   * Added to the dialog hours are displayed.
-   */
-  hoursDisplay?: string;
-  /**
-   * Used for Input element that opens the picker.
-   */
-  input?: string;
-  /**
-   * Used for the knob of the hand.
-   */
-  knob?: string;
-  /**
-   * Used for minutes in dialog header.
-   */
-  minutes?: string;
-  /**
-   * Added to the dialog minutes are displayed.
-   */
-  minutesDisplay?: string;
-  /**
-   * Each of the numbers in the clock's face.
-   */
-  number?: string;
-  /**
-   * Placeholder for the clock inside the dialog (inner wrapper).
-   */
-  placeholder?: string;
-  /**
-   * PM label in dialog header when mode is AM/PM.
-   */
-  pm?: string;
-  /**
-   * Added to the dialog when the selected format is PM.
-   */
-  pmFormat?: string;
-  /**
-   * Is the : separator between hours and minutes in dialog header.
-   */
-  separator?: string;
-  /**
-   * Added to the knob when no round number is selected.
-   */
-  small?: string;
-}
-
-interface TimePickerProps {
-  /**
-   * Provide error text which will be displayed under the field.
-   */
-  error?: string;
-  /**
-   * A key to identify an Icon from Material Design Icons or a custom Icon Element.
-   */
-  icon?: React.ReactNode | string;
-  /**
-   * This class will be applied to Input component of TimePicker.
-   */
-  inputClassName?: string;
-  /**
-   * Format to display the clock. It can be 24hr or ampm.
-   * @default false
-   */
-  format?: "24hr" | "ampm";
-  /**
-   * The text string to use for the floating label element in the input component.
-   */
-  label?: string;
-  /**
-   * Callback called when the picker value is changed.
-   */
-  onChange?: Function;
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: TimePickerTheme;
-  /**
-   * Datetime object with currrently selected time.
-   */
-  value?: Date;
-}
-
-export class TimePicker extends React.Component<TimePickerProps, {}> { }
-
-export default TimePicker;
diff --git a/lib/time_picker/index.js b/lib/time_picker/index.js
deleted file mode 100644
index 8753ebd3e..000000000
--- a/lib/time_picker/index.js
+++ /dev/null
@@ -1,35 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TimePicker = undefined;
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _TimePicker = require('./TimePicker.js');
-
-var _TimePickerDialog = require('./TimePickerDialog.js');
-
-var _TimePickerDialog2 = _interopRequireDefault(_TimePickerDialog);
-
-var _dialog = require('../dialog');
-
-var _dialog2 = _interopRequireDefault(_dialog);
-
-var _input = require('../input');
-
-var _input2 = _interopRequireDefault(_input);
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var TimePickerDialog = (0, _TimePickerDialog2.default)(_dialog2.default);
-var ThemedTimePicker = (0, _reactCssThemr.themr)(_identifiers.TIME_PICKER, _theme2.default)((0, _TimePicker.timePickerFactory)(TimePickerDialog, _input2.default));
-exports.default = ThemedTimePicker;
-exports.TimePicker = ThemedTimePicker;
\ No newline at end of file
diff --git a/lib/time_picker/theme.scss b/lib/time_picker/theme.scss
deleted file mode 100644
index 328cdc43e..000000000
--- a/lib/time_picker/theme.scss
+++ /dev/null
@@ -1,168 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.input:not(.disabled) > .inputElement {
-  cursor: pointer;
-}
-
-.header {
-  position: relative;
-  width: 100%;
-  padding: $timepicker-header-padding;
-  font-size: $timepicker-header-font-size;
-  color: $timepicker-primary-contrast-color;
-  text-align: center;
-  background: $timepicker-primary-color;
-}
-
-.hours, .minutes {
-  display: inline-block;
-  cursor: pointer;
-  opacity: .6;
-}
-
-.separator {
-  margin: 0 $timepicker-header-padding / 2;
-  opacity: .6;
-}
-
-.ampm {
-  position: absolute;
-  top: 50%;
-  right: 2 * $unit;
-  width: $timepicker-ampm-width;
-  height: $timepicker-ampm-height * 2;
-  margin-top: - $timepicker-ampm-height;
-  font-size: $timepicker-ampm-font-size;
-  line-height: $timepicker-ampm-height;
-  text-align: center;
-}
-
-.am, .pm {
-  display: block;
-  cursor: pointer;
-  opacity: .6;
-}
-
-.dialog {
-  width: $timepicker-dialog-width;
-  > [role="body"] {
-    padding: 0;
-    overflow-y: visible;
-  }
-  > [role="navigation"] > .button {
-    color: $timepicker-primary-color;
-    &:hover {
-      background: $timepicker-primary-hover-color;
-    }
-    &:focus:not(:active) {
-      background: $timepicker-primary-hover-color;
-    }
-  }
-  &.hoursDisplay .hours, &.minutesDisplay .minutes, &.amFormat .am,
-  &.pmFormat .pm {
-    opacity: 1;
-  }
-}
-
-.clock {
-  padding: $clock-padding;
-}
-
-.placeholder {
-  position: relative;
-  z-index: $z-index-high;
-}
-
-.clockWrapper {
-  position: absolute;
-  width: 100%;
-  background-color: $color-divider;
-  border-radius: 50%;
-}
-
-.face {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  z-index: $z-index-high;
-  cursor: pointer;
-  border-radius: 50%;
-  transform: translateX(-50%) translateY(-50%);
-}
-
-.number {
-  position: relative;
-  width: $clock-number-size;
-  height: $clock-number-size;
-  margin-top: - $clock-number-size / 2;
-  margin-left: - $clock-number-size / 2;
-  text-align: center;
-  pointer-events: none;
-  user-select: none;
-  &.active {
-    color: $clock-primary-contrast-color;
-  }
-}
-
-.hand {
-  position: absolute;
-  bottom: 50%;
-  left: 50%;
-  display: block;
-  width: $clock-hand-width;
-  margin-left: - $clock-hand-width / 2;
-  background-color: $clock-primary-color;
-  transform-origin: 50% 100%;
-  &:before {
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    width: $clock-hand-dot-size;
-    height: $clock-hand-dot-size;
-    margin-bottom: - $clock-hand-dot-size / 2;
-    margin-left: - $clock-hand-dot-size / 2;
-    content: "";
-    background-color: $clock-primary-color;
-    border-radius: 50%;
-  }
-  &.small > .knob {
-    background-color: $clock-primary-hover-color;
-    &:after {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      width: $clock-knob-small-size;
-      height: $clock-knob-small-size;
-      margin-top: - $clock-knob-small-size / 2;
-      margin-left: - $clock-knob-small-size / 2;
-      content: "";
-      background: $clock-primary-color;
-      border-radius: 50%;
-    }
-    &:before {
-      position: absolute;
-      bottom: 0;
-      left: 50%;
-      width: $clock-hand-width;
-      height: $clock-knob-size - $clock-knob-small-size;
-      margin-left: - $clock-hand-width / 2;
-      content: "";
-      background: $clock-primary-color;
-    }
-  }
-}
-
-.knob {
-  position: absolute;
-  top: - $clock-knob-size;
-  left: 50%;
-  width: $clock-knob-size;
-  height: $clock-knob-size;
-  margin-left: - $clock-knob-size / 2;
-  cursor: pointer;
-  background-color: $clock-primary-color;
-  border-radius: 50%;
-}
diff --git a/lib/tooltip/Tooltip.js b/lib/tooltip/Tooltip.js
deleted file mode 100644
index f05a07bcf..000000000
--- a/lib/tooltip/Tooltip.js
+++ /dev/null
@@ -1,305 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _Portal = require('../hoc/Portal');
-
-var _Portal2 = _interopRequireDefault(_Portal);
-
-var _classnames2 = require('classnames');
-
-var _classnames3 = _interopRequireDefault(_classnames2);
-
-var _reactCssThemr = require('react-css-themr');
-
-var _identifiers = require('../identifiers.js');
-
-var _events = require('../utils/events');
-
-var _events2 = _interopRequireDefault(_events);
-
-var _utils = require('../utils/utils');
-
-var _utils2 = _interopRequireDefault(_utils);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var POSITION = {
-  BOTTOM: 'bottom',
-  HORIZONTAL: 'horizontal',
-  LEFT: 'left',
-  RIGHT: 'right',
-  TOP: 'top',
-  VERTICAL: 'vertical'
-};
-
-var defaults = {
-  className: '',
-  delay: 0,
-  hideOnClick: true,
-  showOnClick: false,
-  position: POSITION.VERTICAL,
-  theme: {}
-};
-
-var tooltipFactory = function tooltipFactory() {
-  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
-  var _defaults$options = _extends({}, defaults, options),
-      defaultClassName = _defaults$options.className,
-      defaultDelay = _defaults$options.delay,
-      defaultHideOnClick = _defaults$options.hideOnClick,
-      defaultShowOnClick = _defaults$options.showOnClick,
-      defaultPosition = _defaults$options.position,
-      defaultTheme = _defaults$options.theme;
-
-  return function (ComposedComponent) {
-    var TooltippedComponent = function (_Component) {
-      _inherits(TooltippedComponent, _Component);
-
-      function TooltippedComponent() {
-        var _ref;
-
-        var _temp, _this, _ret;
-
-        _classCallCheck(this, TooltippedComponent);
-
-        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
-
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TooltippedComponent.__proto__ || Object.getPrototypeOf(TooltippedComponent)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-          active: false,
-          position: _this.props.tooltipPosition,
-          visible: false
-        }, _this.onTransformEnd = function (e) {
-          if (e.propertyName === 'transform') {
-            _events2.default.removeEventListenerOnTransitionEnded(_this.refs.tooltip, _this.onTransformEnd);
-            _this.setState({ visible: false });
-          }
-        }, _this.handleMouseEnter = function (event) {
-          _this.activate(_this.calculatePosition(event.target));
-          if (_this.props.onMouseEnter) _this.props.onMouseEnter(event);
-        }, _this.handleMouseLeave = function (event) {
-          _this.deactivate();
-          if (_this.props.onMouseLeave) _this.props.onMouseLeave(event);
-        }, _this.handleClick = function (event) {
-          if (_this.props.tooltipHideOnClick && _this.state.active) {
-            _this.deactivate();
-          }
-
-          if (_this.props.tooltipShowOnClick && !_this.state.active) {
-            _this.activate(_this.calculatePosition(event.target));
-          }
-
-          if (_this.props.onClick) _this.props.onClick(event);
-        }, _temp), _possibleConstructorReturn(_this, _ret);
-      }
-
-      _createClass(TooltippedComponent, [{
-        key: 'componentWillUnmount',
-        value: function componentWillUnmount() {
-          if (this.refs.tooltip) {
-            _events2.default.removeEventListenerOnTransitionEnded(this.refs.tooltip, this.onTransformEnd);
-          }
-        }
-      }, {
-        key: 'activate',
-        value: function activate(_ref2) {
-          var _this2 = this;
-
-          var top = _ref2.top,
-              left = _ref2.left,
-              position = _ref2.position;
-
-          if (this.timeout) clearTimeout(this.timeout);
-          this.setState({ visible: true, position: position });
-          this.timeout = setTimeout(function () {
-            _this2.setState({ active: true, top: top, left: left });
-          }, this.props.tooltipDelay);
-        }
-      }, {
-        key: 'deactivate',
-        value: function deactivate() {
-          if (this.timeout) clearTimeout(this.timeout);
-          if (this.state.active) {
-            _events2.default.addEventListenerOnTransitionEnded(this.refs.tooltip, this.onTransformEnd);
-            this.setState({ active: false });
-          } else if (this.state.visible) {
-            this.setState({ visible: false });
-          }
-        }
-      }, {
-        key: 'getPosition',
-        value: function getPosition(element) {
-          var tooltipPosition = this.props.tooltipPosition;
-
-          if (tooltipPosition === POSITION.HORIZONTAL) {
-            var origin = element.getBoundingClientRect();
-
-            var _utils$getViewport = _utils2.default.getViewport(),
-                ww = _utils$getViewport.width;
-
-            var toRight = origin.left < ww / 2 - origin.width / 2;
-            return toRight ? POSITION.RIGHT : POSITION.LEFT;
-          } else if (tooltipPosition === POSITION.VERTICAL) {
-            var _origin = element.getBoundingClientRect();
-
-            var _utils$getViewport2 = _utils2.default.getViewport(),
-                wh = _utils$getViewport2.height;
-
-            var toBottom = _origin.top < wh / 2 - _origin.height / 2;
-            return toBottom ? POSITION.BOTTOM : POSITION.TOP;
-          } else {
-            return tooltipPosition;
-          }
-        }
-      }, {
-        key: 'calculatePosition',
-        value: function calculatePosition(element) {
-          var position = this.getPosition(element);
-
-          var _element$getBoundingC = element.getBoundingClientRect(),
-              top = _element$getBoundingC.top,
-              left = _element$getBoundingC.left,
-              height = _element$getBoundingC.height,
-              width = _element$getBoundingC.width;
-
-          var xOffset = window.scrollX || window.pageXOffset;
-          var yOffset = window.scrollY || window.pageYOffset;
-          if (position === POSITION.BOTTOM) {
-            return {
-              top: top + height + yOffset,
-              left: left + width / 2 + xOffset,
-              position: position
-            };
-          } else if (position === POSITION.TOP) {
-            return {
-              top: top + yOffset,
-              left: left + width / 2 + xOffset,
-              position: position
-            };
-          } else if (position === POSITION.LEFT) {
-            return {
-              top: top + height / 2 + yOffset,
-              left: left + xOffset,
-              position: position
-            };
-          } else if (position === POSITION.RIGHT) {
-            return {
-              top: top + height / 2 + yOffset,
-              left: left + width + xOffset,
-              position: position
-            };
-          }
-        }
-      }, {
-        key: 'render',
-        value: function render() {
-          var _classnames;
-
-          var _state = this.state,
-              active = _state.active,
-              left = _state.left,
-              top = _state.top,
-              position = _state.position,
-              visible = _state.visible;
-
-          var positionClass = 'tooltip' + (position.charAt(0).toUpperCase() + position.slice(1));
-
-          var _props = this.props,
-              children = _props.children,
-              className = _props.className,
-              theme = _props.theme,
-              tooltip = _props.tooltip,
-              tooltipDelay = _props.tooltipDelay,
-              tooltipHideOnClick = _props.tooltipHideOnClick,
-              tooltipPosition = _props.tooltipPosition,
-              tooltipShowOnClick = _props.tooltipShowOnClick,
-              other = _objectWithoutProperties(_props, ['children', 'className', 'theme', 'tooltip', 'tooltipDelay', 'tooltipHideOnClick', 'tooltipPosition', 'tooltipShowOnClick']);
-
-          var _className = (0, _classnames3.default)(theme.tooltip, (_classnames = {}, _defineProperty(_classnames, theme.tooltipActive, active), _defineProperty(_classnames, theme[positionClass], theme[positionClass]), _classnames));
-
-          return _react2.default.createElement(
-            ComposedComponent,
-            _extends({}, other, {
-              className: className,
-              onClick: this.handleClick,
-              onMouseEnter: this.handleMouseEnter,
-              onMouseLeave: this.handleMouseLeave,
-              theme: theme
-            }),
-            children ? children : null,
-            visible && _react2.default.createElement(
-              _Portal2.default,
-              null,
-              _react2.default.createElement(
-                'span',
-                { ref: 'tooltip', className: _className, 'data-react-toolbox': 'tooltip', style: { top: top, left: left } },
-                _react2.default.createElement(
-                  'span',
-                  { className: theme.tooltipInner },
-                  tooltip
-                )
-              )
-            )
-          );
-        }
-      }]);
-
-      return TooltippedComponent;
-    }(_react.Component);
-
-    TooltippedComponent.propTypes = {
-      children: _react.PropTypes.any,
-      className: _react.PropTypes.string,
-      onClick: _react.PropTypes.func,
-      onMouseEnter: _react.PropTypes.func,
-      onMouseLeave: _react.PropTypes.func,
-      theme: _react.PropTypes.shape({
-        tooltip: _react.PropTypes.string,
-        tooltipActive: _react.PropTypes.string,
-        tooltipWrapper: _react.PropTypes.string
-      }),
-      tooltip: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.node]),
-      tooltipDelay: _react.PropTypes.number,
-      tooltipHideOnClick: _react.PropTypes.bool,
-      tooltipPosition: _react.PropTypes.oneOf(Object.keys(POSITION).map(function (key) {
-        return POSITION[key];
-      })),
-      tooltipShowOnClick: _react.PropTypes.bool
-    };
-    TooltippedComponent.defaultProps = {
-      className: defaultClassName,
-      tooltipDelay: defaultDelay,
-      tooltipHideOnClick: defaultHideOnClick,
-      tooltipPosition: defaultPosition,
-      tooltipShowOnClick: defaultShowOnClick
-    };
-
-
-    return (0, _reactCssThemr.themr)(_identifiers.TOOLTIP, defaultTheme)(TooltippedComponent);
-  };
-};
-
-exports.default = tooltipFactory;
\ No newline at end of file
diff --git a/lib/tooltip/_config.scss b/lib/tooltip/_config.scss
deleted file mode 100644
index 042410519..000000000
--- a/lib/tooltip/_config.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-$tooltip-background: rgba(97,97,97,.9) !default;
-$tooltip-margin: 0.5 * $unit !default;
-$tooltip-border-radius: .2 * $unit !default;
-$tooltip-color: #fff !default;
-$tooltip-font-size: $unit !default;
-$tooltip-max-width: 17 * $unit !default;
-$tooltip-padding: .8 * $unit !default;
-$tooltip-animation-duration: 200ms !default;
diff --git a/lib/tooltip/index.d.ts b/lib/tooltip/index.d.ts
deleted file mode 100644
index 35523937f..000000000
--- a/lib/tooltip/index.d.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import * as React from "react";
-export interface TooltipTheme {
-  /**
-   * Added to the tooltip element.
-   */
-  tooltip?: string;
-  /**
-   * Added to the root when the tooltip is active.
-   */
-  tooltipActive?: string;
-  /**
-   * Wrapper for the root element used to position the tooltip.
-   */
-  tooltipWrapper?: string;
-}
-
-interface TooltipProps {
-  /**
-   * Classnames object defining the component style.
-   */
-  theme?: TooltipTheme;
-  /**
-   * The text string to use for the tooltip.
-   */
-  tooltip?: string;
-  /**
-   * Amount of time in miliseconds spent before the tooltip is visible.
-   */
-  tooltipDelay?: number;
-  /**
-   * If true, the Tooltip hides after a click in the host component.
-   * @default true
-   */
-  tooltipHideOnClick?: boolean;
-}
-
-declare class TooltipComponent<P, S> extends React.Component<P, S> {
-  props: P & TooltipProps;
-}
-
-interface TooltippedComponentClass<P> extends TooltipProps {
-  new (props?: P, context?: any): TooltipComponent<P, any>;
-}
-
-export function Tooltip<P>(componentClass: React.ComponentClass<P>): TooltippedComponentClass<P>;
-
-export default Tooltip;
diff --git a/lib/tooltip/index.js b/lib/tooltip/index.js
deleted file mode 100644
index 43d4180a9..000000000
--- a/lib/tooltip/index.js
+++ /dev/null
@@ -1,24 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.tooltipFactory = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _Tooltip = require('./Tooltip.js');
-
-var _Tooltip2 = _interopRequireDefault(_Tooltip);
-
-var _theme = require('./theme.scss');
-
-var _theme2 = _interopRequireDefault(_theme);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var themedTooltipFactory = function themedTooltipFactory(options) {
-  return (0, _Tooltip2.default)(_extends({}, options, { theme: _theme2.default }));
-};
-exports.default = (0, _Tooltip2.default)({ theme: _theme2.default });
-exports.tooltipFactory = themedTooltipFactory;
\ No newline at end of file
diff --git a/lib/tooltip/theme.scss b/lib/tooltip/theme.scss
deleted file mode 100644
index 3daa20a8c..000000000
--- a/lib/tooltip/theme.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-@import "http://github.com/colors";
-@import "http://github.com/globals";
-@import "http://github.com/mixins";
-@import "http://github.com/config";
-
-.tooltip {
-  position: absolute;
-  z-index: $z-index-higher;
-  display: block;
-  max-width: $tooltip-max-width;
-  padding: $tooltip-margin;
-  font-family: Roboto, sans-serif;
-  font-size: $tooltip-font-size;
-  font-weight: $font-weight-bold;
-  line-height: $font-size-small;
-  text-align: center;
-  text-transform: none;
-  pointer-events: none;
-  transition: $animation-curve-default $tooltip-animation-duration transform;
-  transform: scale(0) translateX(-50%);
-  transform-origin: top left;
-
-  &.tooltipActive {
-    transform: scale(1) translateX(-50%);
-  }
-
-  &.tooltipTop {
-    transform: scale(0) translateX(-50%) translateY(-100%);
-    &.tooltipActive {
-      transform: scale(1) translateX(-50%) translateY(-100%);
-    }
-  }
-
-  &.tooltipLeft {
-    transform: scale(0) translateX(-100%) translateY(-50%);
-    &.tooltipActive {
-      transform: scale(1) translateX(-100%) translateY(-50%);
-    }
-  }
-
-  &.tooltipRight {
-    transform: scale(0) translateX(0) translateY(-50%);
-    &.tooltipActive {
-      transform: scale(1) translateX(0) translateY(-50%);
-    }
-  }
-}
-
-.tooltipInner {
-  display: block;
-  padding: $tooltip-padding;
-  color: $tooltip-color;
-  background: $tooltip-background;
-  border-radius: $tooltip-border-radius;
-}
diff --git a/lib/utils/events.js b/lib/utils/events.js
deleted file mode 100644
index eb283acee..000000000
--- a/lib/utils/events.js
+++ /dev/null
@@ -1,69 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = {
-  getMousePosition: function getMousePosition(event) {
-    return {
-      x: event.pageX - (window.scrollX || window.pageXOffset),
-      y: event.pageY - (window.scrollY || window.pageYOffset)
-    };
-  },
-  getTouchPosition: function getTouchPosition(event) {
-    return {
-      x: event.touches[0].pageX - (window.scrollX || window.pageXOffset),
-      y: event.touches[0].pageY - (window.scrollY || window.pageYOffset)
-    };
-  },
-  pauseEvent: function pauseEvent(event) {
-    event.stopPropagation();
-    event.preventDefault();
-  },
-  addEventsToDocument: function addEventsToDocument(eventMap) {
-    for (var key in eventMap) {
-      document.addEventListener(key, eventMap[key], false);
-    }
-  },
-  removeEventsFromDocument: function removeEventsFromDocument(eventMap) {
-    for (var key in eventMap) {
-      document.removeEventListener(key, eventMap[key], false);
-    }
-  },
-  targetIsDescendant: function targetIsDescendant(event, parent) {
-    var node = event.target;
-    while (node !== null) {
-      if (node === parent) return true;
-      node = node.parentNode;
-    }
-    return false;
-  },
-  addEventListenerOnTransitionEnded: function addEventListenerOnTransitionEnded(element, fn) {
-    var eventName = transitionEventNamesFor(element);
-    if (!eventName) return false;
-    element.addEventListener(eventName, fn);
-    return true;
-  },
-  removeEventListenerOnTransitionEnded: function removeEventListenerOnTransitionEnded(element, fn) {
-    var eventName = transitionEventNamesFor(element);
-    if (!eventName) return false;
-    element.removeEventListener(eventName, fn);
-    return true;
-  }
-};
-
-
-var TRANSITIONS = {
-  'transition': 'transitionend',
-  'OTransition': 'oTransitionEnd',
-  'MozTransition': 'transitionend',
-  'WebkitTransition': 'webkitTransitionEnd'
-};
-
-function transitionEventNamesFor(element) {
-  for (var transition in TRANSITIONS) {
-    if (element && element.style[transition] !== undefined) {
-      return TRANSITIONS[transition];
-    }
-  }
-}
\ No newline at end of file
diff --git a/lib/utils/index.js b/lib/utils/index.js
deleted file mode 100644
index d1bd0ea43..000000000
--- a/lib/utils/index.js
+++ /dev/null
@@ -1,30 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.utils = exports.time = exports.prefixer = exports.events = undefined;
-
-var _events = require('./events.js');
-
-var _events2 = _interopRequireDefault(_events);
-
-var _prefixer = require('./prefixer.js');
-
-var _prefixer2 = _interopRequireDefault(_prefixer);
-
-var _time = require('./time.js');
-
-var _time2 = _interopRequireDefault(_time);
-
-var _utils = require('./utils.js');
-
-var _utils2 = _interopRequireDefault(_utils);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = { events: _events2.default, prefixer: _prefixer2.default, time: _time2.default, utils: _utils2.default };
-exports.events = _events2.default;
-exports.prefixer = _prefixer2.default;
-exports.time = _time2.default;
-exports.utils = _utils2.default;
\ No newline at end of file
diff --git a/lib/utils/polyfills.js b/lib/utils/polyfills.js
deleted file mode 100644
index 74df99bbb..000000000
--- a/lib/utils/polyfills.js
+++ /dev/null
@@ -1,15 +0,0 @@
-'use strict';
-
-require('core-js/fn/array/from');
-
-require('core-js/fn/array/iterator');
-
-require('core-js/fn/array/find-index');
-
-require('core-js/fn/map');
-
-require('core-js/fn/string/starts-with');
-
-require('core-js/fn/string/includes');
-
-require('core-js/fn/symbol');
\ No newline at end of file
diff --git a/lib/utils/prefixer.js b/lib/utils/prefixer.js
deleted file mode 100644
index 34cb4aa22..000000000
--- a/lib/utils/prefixer.js
+++ /dev/null
@@ -1,47 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var WEBKIT = 'Webkit';
-var MICROSOFT = 'Ms';
-
-var properties = {
-  transform: [WEBKIT, MICROSOFT]
-};
-
-function capitalize(string) {
-  return string.charAt(0).toUpperCase() + string.substr(1);
-}
-
-function getPrefixes(property, value) {
-  return properties[property].reduce(function (acc, item) {
-    acc['' + item + capitalize(property)] = value;
-    return acc;
-  }, {});
-}
-
-function addPrefixesTo(style, property, value) {
-  var vendor = getPrefixes(property, value);
-  for (var prefix in vendor) {
-    style[prefix] = vendor[prefix];
-  }
-
-  return style;
-}
-
-function prefixer(style) {
-  var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-  var _style = defaultValue;
-  for (var property in style) {
-    _style[property] = style[property];
-    if (properties[property]) {
-      addPrefixesTo(_style, property, style[property]);
-    }
-  }
-
-  return _style;
-}
-
-exports.default = prefixer;
\ No newline at end of file
diff --git a/lib/utils/react.js b/lib/utils/react.js
deleted file mode 100644
index c6267df1f..000000000
--- a/lib/utils/react.js
+++ /dev/null
@@ -1,9 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isComponentOfType = isComponentOfType;
-function isComponentOfType(classType, reactElement) {
-  return reactElement && reactElement.type === classType;
-}
\ No newline at end of file
diff --git a/lib/utils/testing.js b/lib/utils/testing.js
deleted file mode 100644
index e82f77931..000000000
--- a/lib/utils/testing.js
+++ /dev/null
@@ -1,38 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactAddonsTestUtils = require('react-addons-test-utils');
-
-var _reactAddonsTestUtils2 = _interopRequireDefault(_reactAddonsTestUtils);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = {
-  renderComponent: function renderComponent(Component) {
-    var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    var state = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-
-    var component = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(Component, props));
-    if (state !== {}) {
-      component.setState(state);
-    }
-    return component;
-  },
-  shallowRenderComponent: function shallowRenderComponent(component, props) {
-    var shallowRenderer = _reactAddonsTestUtils2.default.createRenderer();
-
-    for (var _len = arguments.length, children = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
-      children[_key - 2] = arguments[_key];
-    }
-
-    shallowRenderer.render(_react2.default.createElement(component, props, children.length > 1 ? children : children[0]));
-    return shallowRenderer.getRenderOutput();
-  }
-};
\ No newline at end of file
diff --git a/lib/utils/time.js b/lib/utils/time.js
deleted file mode 100644
index 7f167ba97..000000000
--- a/lib/utils/time.js
+++ /dev/null
@@ -1,297 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var dateLocales = {
-  de: {
-    months: 'Januar_Februar_März_April_Mai_Juni_Juli_August_September_Oktober_November_Dezember'.split('_'),
-    monthsShort: 'Jan_Feb_März_Apr_Mai_Juni_Juli_Aug_Sept_Okt_Nov_Dez'.split('_'),
-    weekdays: 'Sonntag_Montag_Dienstag_Mittwoch_Donnerstag_Freitag_Samstag'.split('_'),
-    weekdaysShort: 'So_Mo_Di_Mi_Do_Fr_Sa'.split('_'),
-    weekdaysLetter: 'S_M_D_M_D_F_S'.split('_')
-  },
-  no: {
-    months: 'januar_februar_mars_april_mai_juni_juli_august_september_oktober_november_desember'.split('_'),
-    monthsShort: 'jan._feb._mars_april_mai_juni_juli_aug._sep._okt._nov._des.'.split('_'),
-    weekdays: 'søndag_mandag_tirsdag_onsdag_torsdag_fredag_lørdag'.split('_'),
-    weekdaysShort: 'søn_man_tir_ons_tor_fre_lør'.split('_'),
-    weekdaysLetter: []
-  },
-  en: {
-    months: 'January_February_March_April_May_June_July_August_September_October_November_December'.split('_'),
-    monthsShort: 'Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec'.split('_'),
-    weekdays: 'Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday'.split('_'),
-    weekdaysShort: 'Sun_Mon_Tue_Wed_Thu_Fri_Sat'.split('_'),
-    weekdaysLetter: []
-  },
-  es: {
-    months: 'enero_febrero_marzo_abril_mayo_junio_julio_agosto_septiembre_octubre_noviembre_diciembre'.split('_'),
-    monthsShort: 'ene_feb_mar_abr_may_jun_jul_ago_sep_oct_nov_dic'.split('_'),
-    weekdays: 'domingo_lunes_martes_miércoles_jueves_viernes_sábado'.split('_'),
-    weekdaysShort: 'dom._lun._mar._mié._jue._vie._sáb.'.split('_'),
-    weekdaysLetter: 'D_L_M_X_J_V_S'.split('_')
-  },
-  af: {
-    months: 'Januarie_Februarie_Maart_April_Mei_Junie_Julie_Augustus_September_Oktober_November_Desember'.split('_'),
-    monthsShort: 'Jan_Feb_Mrt_Apr_Mei_Jun_Jul_Aug_Sep_Okt_Nov_Des'.split('_'),
-    weekdays: 'Sondag_Maandag_Dinsdag_Woensdag_Donderdag_Vrydag_Saterdag'.split('_'),
-    weekdaysShort: 'Son_Maa_Din_Woe_Don_Vry_Sat'.split('_'),
-    weekdaysLetter: []
-  },
-  ar: {
-    months: ['كانون الثاني يناير', 'شباط فبراير', 'آذار مارس', 'نيسان أبريل', 'أيار مايو', 'حزيران يونيو', 'تموز يوليو', 'آب أغسطس', 'أيلول سبتمبر', 'تشرين الأول أكتوبر', 'تشرين الثاني نوفمبر', 'كانون الأول ديسمبر'],
-    monthsShort: ['كانون الثاني يناير', 'شباط فبراير', 'آذار مارس', 'نيسان أبريل', 'أيار مايو', 'حزيران يونيو', 'تموز يوليو', 'آب أغسطس', 'أيلول سبتمبر', 'تشرين الأول أكتوبر', 'تشرين الثاني نوفمبر', 'كانون الأول ديسمبر'],
-    weekdays: 'الأحد_الإثنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت'.split('_'),
-    weekdaysShort: 'أحد_إثنين_ثلاثاء_أربعاء_خميس_جمعة_سبت'.split('_'),
-    weekdaysLetter: []
-  },
-  be: {
-    months: 'студзень_люты_сакавік_красавік_травень_чэрвень_ліпень_жнівень_верасень_кастрычнік_лістапад_снежань'.split('_'),
-    monthsShort: 'студ_лют_сак_крас_трав_чэрв_ліп_жнів_вер_каст_ліст_снеж'.split('_'),
-    weekdays: 'нядзеля_панядзелак_аўторак_серада_чацвер_пятніца_субота'.split('_'),
-    weekdaysShort: 'нд_пн_ат_ср_чц_пт_сб'.split('_'),
-    weekdaysLetter: []
-  },
-  bg: {
-    months: 'януари_февруари_март_април_май_юни_юли_август_септември_октомври_ноември_декември'.split('_'),
-    monthsShort: 'янр_фев_мар_апр_май_юни_юли_авг_сеп_окт_ное_дек'.split('_'),
-    weekdays: 'неделя_понеделник_вторник_сряда_четвъртък_петък_събота'.split('_'),
-    weekdaysShort: 'нед_пон_вто_сря_чет_пет_съб'.split('_'),
-    weekdaysLetter: []
-  },
-  bn: {
-    months: 'জানুয়ারী_ফেবুয়ারী_মার্চ_এপ্রিল_মে_জুন_জুলাই_অগাস্ট_সেপ্টেম্বর_অক্টোবর_নভেম্বর_ডিসেম্বর'.split('_'),
-    monthsShort: 'জানু_ফেব_মার্চ_এপর_মে_জুন_জুল_অগ_সেপ্ট_অক্টো_নভ_ডিসেম্'.split('_'),
-    weekdays: 'রবিবার_সোমবার_মঙ্গলবার_বুধবার_বৃহস্পত্তিবার_শুক্রবার_শনিবার'.split('_'),
-    weekdaysShort: 'রবি_সোম_মঙ্গল_বুধ_বৃহস্পত্তি_শুক্র_শনি'.split('_'),
-    weekdaysLetter: []
-  },
-  bo: {
-    months: 'ཟླ་བ་དང་པོ_ཟླ་བ་གཉིས་པ_ཟླ་བ་གསུམ་པ_ཟླ་བ་བཞི་པ_ཟླ་བ་ལྔ་པ_ཟླ་བ་དྲུག་པ_ཟླ་བ་བདུན་པ_ཟླ་བ་བརྒྱད་པ_ཟླ་བ་དགུ་པ_ཟླ་བ་བཅུ་པ_ཟླ་བ་བཅུ་གཅིག་པ_ཟླ་བ་བཅུ་གཉིས་པ'.split('_'),
-    monthsShort: 'ཟླ་བ་དང་པོ_ཟླ་བ་གཉིས་པ_ཟླ་བ་གསུམ་པ_ཟླ་བ་བཞི་པ_ཟླ་བ་ལྔ་པ_ཟླ་བ་དྲུག་པ_ཟླ་བ་བདུན་པ_ཟླ་བ་བརྒྱད་པ_ཟླ་བ་དགུ་པ_ཟླ་བ་བཅུ་པ_ཟླ་བ་བཅུ་གཅིག་པ_ཟླ་བ་བཅུ་གཉིས་པ'.split('_'),
-    weekdays: 'གཟའ་ཉི་མ་_གཟའ་ཟླ་བ་_གཟའ་མིག་དམར་_གཟའ་ལྷག་པ་_གཟའ་ཕུར་བུ_གཟའ་པ་སངས་_གཟའ་སྤེན་པ་'.split('_'),
-    weekdaysShort: 'ཉི་མ་_ཟླ་བ་_མིག་དམར་_ལྷག་པ་_ཕུར་བུ_པ་སངས་_སྤེན་པ་'.split('_'),
-    weekdaysLetter: []
-  },
-  br: {
-    months: 'Genver_C\'hwevrer_Meurzh_Ebrel_Mae_Mezheven_Gouere_Eost_Gwengolo_Here_Du_Kerzu'.split('_'),
-    monthsShort: 'Gen_C\'hwe_Meu_Ebr_Mae_Eve_Gou_Eos_Gwe_Her_Du_Ker'.split('_'),
-    weekdays: 'Sul_Lun_Meurzh_Merc\'her_Yaou_Gwener_Sadorn'.split('_'),
-    weekdaysShort: 'Sul_Lun_Meu_Mer_Yao_Gwe_Sad'.split('_'),
-    weekdaysLetter: []
-  },
-  bs: {
-    months: 'januar_februar_mart_april_maj_juni_juli_august_septembar_oktobar_novembar_decembar'.split('_'),
-    monthsShort: 'jan._feb._mar._apr._maj._jun._jul._aug._sep._okt._nov._dec.'.split('_'),
-    weekdays: 'nedjelja_ponedjeljak_utorak_srijeda_četvrtak_petak_subota'.split('_'),
-    weekdaysShort: 'ned._pon._uto._sri._čet._pet._sub.'.split('_'),
-    weekdaysLetter: []
-  },
-  ca: {
-    months: 'gener_febrer_març_abril_maig_juny_juliol_agost_setembre_octubre_novembre_desembre'.split('_'),
-    monthsShort: 'gen._febr._mar._abr._mai._jun._jul._ag._set._oct._nov._des.'.split('_'),
-    weekdays: 'diumenge_dilluns_dimarts_dimecres_dijous_divendres_dissabte'.split('_'),
-    weekdaysShort: 'dg._dl._dt._dc._dj._dv._ds.'.split('_'),
-    weekdaysLetter: 'Dg_Dl_Dt_Dc_Dj_Dv_Ds'.split('_')
-  },
-  gl: {
-    months: 'Xaneiro_Febreiro_Marzo_Abril_Maio_Xuño_Xullo_Agosto_Setembro_Outubro_Novembro_Decembro'.split('_'),
-    monthsShort: 'Xan._Feb._Mar._Abr._Mai._Xuñ._Xul._Ago._Set._Out._Nov._Dec.'.split('_'),
-    weekdays: 'Domingo_Luns_Martes_Mércores_Xoves_Venres_Sábado'.split('_'),
-    weekdaysShort: 'Dom._Lun._Mar._Mér._Xov._Ven._Sáb.'.split('_'),
-    weekdaysLetter: 'Do_Lu_Ma_Mé_Xo_Ve_Sá'.split('_')
-  },
-  eu: {
-    months: 'urtarrila_otsaila_martxoa_apirila_maiatza_ekaina_uztaila_abuztua_iraila_urria_azaroa_abendua'.split('_'),
-    monthsShort: 'urt._ots._mar._api._mai._eka._uzt._abu._ira._urr._aza._abe.'.split('_'),
-    weekdays: 'igandea_astelehena_asteartea_asteazkena_osteguna_ostirala_larunbata'.split('_'),
-    weekdaysShort: 'ig._al._ar._az._og._ol._lr.'.split('_'),
-    weekdaysLetter: 'ig_al_ar_az_og_ol_lr'.split('_')
-  },
-  pt: {
-    months: 'Janeiro_Fevereiro_Março_Abril_Maio_Junho_Julho_Agosto_Setembro_Outubro_Novembro_Dezembro'.split('_'),
-    monthsShort: 'Jan_Fev_Mar_Abr_Mai_Jun_Jul_Ago_Set_Out_Nov_Dez'.split('_'),
-    weekdays: 'Domingo_Segunda-Feira_Terça-Feira_Quarta-Feira_Quinta-Feira_Sexta-Feira_Sábado'.split('_'),
-    weekdaysShort: 'Dom_Seg_Ter_Qua_Qui_Sex_Sáb'.split('_'),
-    weekdaysLetter: []
-  },
-  it: {
-    months: 'gennaio_febbraio_marzo_aprile_maggio_giugno_luglio_agosto_settembre_ottobre_novembre_dicembre'.split('_'),
-    monthsShort: 'gen_feb_mar_apr_mag_giu_lug_ago_set_ott_nov_dic'.split('_'),
-    weekdays: 'Domenica_Lunedì_Martedì_Mercoledì_Giovedì_Venerdì_Sabato'.split('_'),
-    weekdaysShort: 'Dom_Lun_Mar_Mer_Gio_Ven_Sab'.split('_'),
-    weekdaysLetter: []
-  },
-  fr: {
-    months: 'janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre'.split('_'),
-    monthsShort: 'janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.'.split('_'),
-    weekdays: 'dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi'.split('_'),
-    weekdaysShort: 'dim._lun._mar._mer._jeu._ven._sam.'.split('_'),
-    weekdaysLetter: []
-  },
-  ru: {
-    months: 'Январь_Февраль_Март_Апрель_Май_Июнь_Июль_Август_Сентябрь_Октябрь_Ноябрь_Декабрь'.split('_'),
-    monthsShort: 'Янв_Фев_Мар_Апр_Май_Июн_Июл_Авг_Сен_Окт_Ноя_Дек'.split('_'),
-    weekdays: 'Воскресенье_Понедельник_Вторник_Среда_Четверг_Пятница_Суббота'.split('_'),
-    weekdaysShort: 'Вс_Пн_Вт_Ср_Чт_Пт_Сб'.split('_'),
-    weekdaysLetter: []
-  },
-  ua: {
-    months: 'Січень_Лютий_Березень_Квітень_Травень_Червень_Липень_Серпень_Вересень_Жовтень_Листопад_Грудень'.split('_'),
-    monthsShort: 'Січ_Лют_Берез_Квіт_Трав_Черв_Лип_Серп_Верес_Жовт_Листоп_Груд'.split('_'),
-    weekdays: 'Неділя_Понеділок_Вівторок_Середа_Четвер_П’ятниця_Субота'.split('_'),
-    weekdaysShort: 'Нд_Пн_Вт_Ср_Чт_Пт_Сб'.split('_'),
-    weekdaysLetter: []
-  }
-};
-
-var time = {
-  getDaysInMonth: function getDaysInMonth(d) {
-    var resultDate = this.getFirstDayOfMonth(d);
-    resultDate.setMonth(resultDate.getMonth() + 1);
-    resultDate.setDate(resultDate.getDate() - 1);
-    return resultDate.getDate();
-  },
-  getFirstDayOfMonth: function getFirstDayOfMonth(d) {
-    return new Date(d.getFullYear(), d.getMonth(), 1);
-  },
-  getFirstWeekDay: function getFirstWeekDay(d) {
-    return this.getFirstDayOfMonth(d).getDay();
-  },
-  getTimeMode: function getTimeMode(d) {
-    return d.getHours() >= 12 ? 'pm' : 'am';
-  },
-  getFullMonth: function getFullMonth(d) {
-    var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
-
-    var month = d.getMonth();
-    var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en;
-    return l.hasOwnProperty('months') ? l.months[month] || 'Unknown' : 'Unknown';
-  },
-  getShortMonth: function getShortMonth(d) {
-    var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
-
-    var month = d.getMonth();
-    var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en;
-    return l.hasOwnProperty('monthsShort') ? l.monthsShort[month] || 'Unknown' : 'Unknown';
-  },
-  getFullDayOfWeek: function getFullDayOfWeek(day) {
-    var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
-
-    var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en;
-    return l.hasOwnProperty('weekdays') ? l.weekdays[day] || 'Unknown' : 'Unknown';
-  },
-  getShortDayOfWeek: function getShortDayOfWeek(day) {
-    var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
-
-    var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en;
-    return l.hasOwnProperty('weekdaysShort') ? l.weekdaysShort[day] || 'Unknown' : 'Unknown';
-  },
-  getDayOfWeekLetter: function getDayOfWeekLetter(day) {
-    var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
-
-    var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en;
-    return l.hasOwnProperty('weekdaysLetter') ? l.weekdaysLetter[day] || this.getFullDayOfWeek(day, locale).charAt(0) : 'Unknown';
-  },
-  clone: function clone(d) {
-    return new Date(d.getTime());
-  },
-  cloneAsDate: function cloneAsDate(d) {
-    var clonedDate = this.clone(d);
-    clonedDate.setHours(0, 0, 0, 0);
-    return clonedDate;
-  },
-  isDateObject: function isDateObject(d) {
-    return d instanceof Date;
-  },
-  addDays: function addDays(d, days) {
-    var newDate = this.clone(d);
-    newDate.setDate(d.getDate() + days);
-    return newDate;
-  },
-  addMonths: function addMonths(d, months) {
-    var newDate = this.clone(d);
-    newDate.setMonth(d.getMonth() + months, 1);
-    return newDate;
-  },
-  addYears: function addYears(d, years) {
-    var newDate = this.clone(d);
-    newDate.setFullYear(d.getFullYear() + years);
-    return newDate;
-  },
-  setDay: function setDay(d, day) {
-    var newDate = this.clone(d);
-    newDate.setDate(day);
-    return newDate;
-  },
-  setMonth: function setMonth(d, month) {
-    var newDate = this.clone(d);
-    newDate.setMonth(month);
-    return newDate;
-  },
-  setYear: function setYear(d, year) {
-    var newDate = this.clone(d);
-    newDate.setFullYear(year);
-    return newDate;
-  },
-  setHours: function setHours(d, hours) {
-    var newDate = this.clone(d);
-    newDate.setHours(hours);
-    return newDate;
-  },
-  setMinutes: function setMinutes(d, minutes) {
-    var newDate = this.clone(d);
-    newDate.setMinutes(minutes);
-    return newDate;
-  },
-  toggleTimeMode: function toggleTimeMode(d) {
-    var newDate = this.clone(d);
-    var hours = newDate.getHours();
-
-    newDate.setHours(hours - (hours > 12 ? -12 : 12));
-    return newDate;
-  },
-  formatTime: function formatTime(date, format) {
-    var hours = date.getHours();
-    var mins = date.getMinutes().toString();
-
-    if (format === 'ampm') {
-      var isAM = hours < 12;
-      var additional = isAM ? ' am' : ' pm';
-
-      hours = hours % 12;
-      hours = (hours || 12).toString();
-      if (mins.length < 2) mins = '0' + mins;
-
-      return hours + (mins === '00' ? '' : ':' + mins) + additional;
-    }
-
-    hours = hours.toString();
-    if (hours.length < 2) hours = '0' + hours;
-    if (mins.length < 2) mins = '0' + mins;
-    return hours + ':' + mins;
-  },
-  dateOutOfRange: function dateOutOfRange(date, minDate, maxDate) {
-    return minDate && !(date >= minDate) || maxDate && !(date <= maxDate);
-  },
-  closestDate: function closestDate(to, date1, date2) {
-    var toTime = to.getTime();
-
-    var diff1 = Math.abs(toTime - date1.getTime());
-    var diff2 = Math.abs(toTime - date2.getTime());
-
-    return diff1 < diff2 ? date1 : date2;
-  },
-  formatDate: function formatDate(date) {
-    var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
-
-    if (locale === 'en') {
-      return date.getDate() + ' ' + time.getFullMonth(date, locale) + ' ' + date.getFullYear();
-    } else {
-      return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear();
-    }
-  }
-};
-
-exports.default = time;
\ No newline at end of file
diff --git a/lib/utils/utils.js b/lib/utils/utils.js
deleted file mode 100644
index 13e8d5442..000000000
--- a/lib/utils/utils.js
+++ /dev/null
@@ -1,73 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = {
-  angleFromPositions: function angleFromPositions(cx, cy, ex, ey) {
-    var theta = Math.atan2(ey - cy, ex - cx) + Math.PI / 2;
-    return theta * 180 / Math.PI;
-  },
-  angle360FromPositions: function angle360FromPositions(cx, cy, ex, ey) {
-    var angle = this.angleFromPositions(cx, cy, ex, ey);
-    return angle < 0 ? 360 + angle : angle;
-  },
-  range: function range() {
-    var start = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-    var stop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    var step = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-    var _start = 0,
-        _stop = start;
-
-    if (stop !== null) {
-      _start = start;
-      _stop = stop;
-    }
-    var length = Math.max(Math.ceil((_stop - _start) / step), 0);
-    var range = Array(length);
-
-    for (var idx = 0; idx < length; idx++, _start += step) {
-      range[idx] = _start;
-    }
-
-    return range;
-  },
-  round: function round(number, decimals) {
-    if (!isNaN(parseFloat(number)) && isFinite(number)) {
-      var decimalPower = Math.pow(10, decimals);
-      return Math.round(parseFloat(number) * decimalPower) / decimalPower;
-    }
-    return NaN;
-  },
-  getViewport: function getViewport() {
-    return {
-      height: window.innerHeight || document.documentElement.offsetHeight,
-      width: window.innerWidth || document.documentElement.offsetWidth
-    };
-  },
-  cloneObject: function cloneObject(object) {
-    return JSON.parse(JSON.stringify(object));
-  },
-  inputTypeForPrototype: function inputTypeForPrototype(prototype) {
-    if (prototype === Date) return 'date';
-    if (prototype === Number) return 'number';
-    if (prototype === Boolean) return 'checkbox';
-    return 'text';
-  },
-  prepareValueForInput: function prepareValueForInput(value, type) {
-    if (type === 'date') return new Date(value).toISOString().slice(0, 10);
-    if (type === 'checkbox') {
-      return value ? 'on' : '';
-    }
-    return value;
-  },
-  removeObjectKey: function removeObjectKey(key, object) {
-    var newObject = {};
-    Object.keys(object).filter(function (k) {
-      return k !== key;
-    }).forEach(function (k) {
-      newObject[k] = object[k];
-    });
-    return newObject;
-  }
-};
\ No newline at end of file

From 0613cf7f0d77bed5e98f48667058c214f07409b9 Mon Sep 17 00:00:00 2001
From: Ezequiel Schwartzman <zequez@gmail.com>
Date: Fri, 2 Dec 2016 12:44:40 -0500
Subject: [PATCH 0978/1024] Make chips avatar detection work when decorated

---
 components/chip/Chip.js                |  3 +-
 components/chip/__test__/index.spec.js | 53 ++++++++++++++++++++++++++
 2 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 components/chip/__test__/index.spec.js

diff --git a/components/chip/Chip.js b/components/chip/Chip.js
index 3e8ea62d1..09d0a1011 100644
--- a/components/chip/Chip.js
+++ b/components/chip/Chip.js
@@ -8,7 +8,8 @@ const factory = (Avatar) => {
   const Chip = ({children, className, deletable, onDeleteClick, theme, ...other}) => {
     let hasAvatar = false;
     if (React.Children.count(children)) {
-      const firstChild = children[0];
+      const flatChildren = React.Children.toArray(children);
+      const firstChild = flatChildren[0];
       hasAvatar = firstChild && firstChild.type && firstChild.type === Avatar;
     }
 
diff --git a/components/chip/__test__/index.spec.js b/components/chip/__test__/index.spec.js
new file mode 100644
index 000000000..87caae620
--- /dev/null
+++ b/components/chip/__test__/index.spec.js
@@ -0,0 +1,53 @@
+import expect from 'expect';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ReactTestUtils from 'react-addons-test-utils';
+import { themr } from 'react-css-themr';
+import { CHIP } from '../../identifiers.js';
+import { chipFactory } from '../Chip';
+import { tooltipFactory } from '../../tooltip';
+
+const Avatar = ({title}) => <span>{title}</span>; // eslint-disable-line react/prop-types
+const Chip = themr(CHIP)(chipFactory(Avatar));
+
+describe('Chip', function () {
+  describe('with avatar', function () {
+    it('adds the avatar class to the element', function () {
+      const tree = ReactTestUtils.renderIntoDocument(
+        <Chip theme={{avatar: 'avatar-class'}}>
+          <Avatar title='Test'/>
+          <span>Test</span>
+        </Chip>
+      );
+      const chip = ReactTestUtils.findRenderedComponentWithType(tree, Chip);
+      const chipNode = ReactDOM.findDOMNode(chip);
+      expect(chipNode.className).toMatch(/\bavatar-class\b/);
+    });
+
+    it('works with non-flat children', function () {
+      const TooltippedChip = tooltipFactory()(Chip);
+      const tree = ReactTestUtils.renderIntoDocument(
+        <TooltippedChip theme={{avatar: 'avatar-class'}} tooltip='Test tooltip'>
+          <Avatar title='Test'/>
+          <span>Test</span>
+        </TooltippedChip>
+      );
+      const chip = ReactTestUtils.findRenderedComponentWithType(tree, Chip);
+      const chipNode = ReactDOM.findDOMNode(chip);
+      expect(chipNode.className).toMatch(/\bavatar-class\b/);
+    });
+  });
+
+  describe('without avatar', function () {
+    it('does not add avatar class to the element', function () {
+      const tree = ReactTestUtils.renderIntoDocument(
+        <Chip theme={{avatar: 'avatar-class'}}>
+          <span>Test</span>
+        </Chip>
+      );
+      const chip = ReactTestUtils.findRenderedComponentWithType(tree, Chip);
+      const chipNode = ReactDOM.findDOMNode(chip);
+      expect(chipNode.className).toNotMatch(/\bavatar-class\b/);
+    });
+  });
+});

From b3f99348d47172bdfaf596152339cf59ec1aa2e4 Mon Sep 17 00:00:00 2001
From: Ezequiel Schwartzman <zequez@gmail.com>
Date: Fri, 2 Dec 2016 13:03:16 -0500
Subject: [PATCH 0979/1024] Allow Tooltip factory to use string native
 components

---
 components/tooltip/Tooltip.js | 4 +++-
 spec/components/tooltip.js    | 5 +++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/components/tooltip/Tooltip.js b/components/tooltip/Tooltip.js
index 5f0102ba5..3b92b23ee 100644
--- a/components/tooltip/Tooltip.js
+++ b/components/tooltip/Tooltip.js
@@ -193,6 +193,8 @@ const tooltipFactory = (options = {}) => {
           [theme[positionClass]]: theme[positionClass]
         });
 
+        const isNative = typeof ComposedComponent === 'string';
+
         return (
           <ComposedComponent
             {...other}
@@ -200,7 +202,7 @@ const tooltipFactory = (options = {}) => {
             onClick={this.handleClick}
             onMouseEnter={this.handleMouseEnter}
             onMouseLeave={this.handleMouseLeave}
-            theme={theme}
+            {...isNative ? {} : {theme}}
           >
             {children ? children : null}
             {visible && (
diff --git a/spec/components/tooltip.js b/spec/components/tooltip.js
index 54ef43b4d..d2285a074 100644
--- a/spec/components/tooltip.js
+++ b/spec/components/tooltip.js
@@ -9,6 +9,7 @@ const TooltipStrong = Tooltip(({children, ...other}) => {
   delete other.theme;
   return <strong {...other}>{children}</strong>;
 });
+const TooltipStrongDirect = Tooltip('strong');
 
 const TooltipTest = () => (
   <section>
@@ -27,9 +28,9 @@ const TooltipTest = () => (
     <p>
       Click this next word to show and hide on click:
       {' '}
-      <TooltipStrong tooltip='This is a auto show tooltip' tooltipShowOnClick>
+      <TooltipStrongDirect tooltip='This is a auto show tooltip' tooltipShowOnClick>
         oh hai
-      </TooltipStrong>
+      </TooltipStrongDirect>
       {' '}. This is useful for mobile!
     </p>
   </section>

From 1e0aaec12c6e4e64998d1cfc0a63d88459c54e3e Mon Sep 17 00:00:00 2001
From: Ezequiel Schwartzman <zequez@gmail.com>
Date: Fri, 2 Dec 2016 13:10:04 -0500
Subject: [PATCH 0980/1024] Make Tooltip use currentTarget instead of target
 when calculating the position

---
 components/tooltip/Tooltip.js | 4 ++--
 spec/components/tooltip.js    | 7 +++++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/components/tooltip/Tooltip.js b/components/tooltip/Tooltip.js
index 3b92b23ee..34ee54194 100644
--- a/components/tooltip/Tooltip.js
+++ b/components/tooltip/Tooltip.js
@@ -152,7 +152,7 @@ const tooltipFactory = (options = {}) => {
       };
 
       handleMouseEnter = (event) => {
-        this.activate(this.calculatePosition(event.target));
+        this.activate(this.calculatePosition(event.currentTarget));
         if (this.props.onMouseEnter) this.props.onMouseEnter(event);
       };
 
@@ -167,7 +167,7 @@ const tooltipFactory = (options = {}) => {
         }
 
         if (this.props.tooltipShowOnClick && !this.state.active) {
-          this.activate(this.calculatePosition(event.target));
+          this.activate(this.calculatePosition(event.currentTarget));
         }
 
         if (this.props.onClick) this.props.onClick(event);
diff --git a/spec/components/tooltip.js b/spec/components/tooltip.js
index d2285a074..419955e25 100644
--- a/spec/components/tooltip.js
+++ b/spec/components/tooltip.js
@@ -2,6 +2,8 @@ import React from 'react';
 import Button from '../../components/button';
 import Input from '../../components/input';
 import Tooltip from '../../components/tooltip';
+import Chip from '../../components/chip';
+import Avatar from '../../components/avatar';
 
 const TooltipButton = Tooltip(Button);
 const TooltipInput = Tooltip(Input);
@@ -10,6 +12,7 @@ const TooltipStrong = Tooltip(({children, ...other}) => {
   return <strong {...other}>{children}</strong>;
 });
 const TooltipStrongDirect = Tooltip('strong');
+const ChipTooltip = Tooltip(Chip);
 
 const TooltipTest = () => (
   <section>
@@ -23,6 +26,10 @@ const TooltipTest = () => (
       floating
       tooltip={<div><p>An example with</p><p>Multiline!</p></div>}
     />
+    <ChipTooltip tooltip='Dolor sit amet' tooltipPosition='top'>
+      <Avatar icon='home'/>
+      <span>Tooltip in a chip</span>
+    </ChipTooltip>
     <TooltipInput tooltip='lorem ipsum...' />
     <p>Lorem ipsum dolor sit amet, <TooltipStrong tooltip='This is a auto show tooltip'>consectetur</TooltipStrong> adipiscing elit.</p>
     <p>

From c5b147307ec68d32d5ef8968102579cb143df43c Mon Sep 17 00:00:00 2001
From: T James <t22james@gmail.com>
Date: Mon, 5 Dec 2016 15:26:35 +1300
Subject: [PATCH 0981/1024] Enable theming of Input component inside Dropdown
 component. Related to #877 and #920 and commit #d0a9032

---
 components/dropdown/Dropdown.js | 2 ++
 components/dropdown/readme.md   | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/components/dropdown/Dropdown.js b/components/dropdown/Dropdown.js
index bad93e45a..f5dd2e269 100644
--- a/components/dropdown/Dropdown.js
+++ b/components/dropdown/Dropdown.js
@@ -202,6 +202,8 @@ const factory = (Input) => {
             readOnly
             ref={node => { this.inputNode = node && node.getWrappedInstance(); }}
             type={template && selected ? 'hidden' : null}
+            theme={theme}
+            themeNamespace="input"
             value={selected && selected.label ? selected.label : ''}
           />
         {template && selected ? this.renderTemplateValue(selected) : null}
diff --git a/components/dropdown/readme.md b/components/dropdown/readme.md
index 170650962..7d7870a4c 100644
--- a/components/dropdown/readme.md
+++ b/components/dropdown/readme.md
@@ -55,6 +55,8 @@ If you want to provide a theme via context, the component key is `RTDropdown`.
 
 ## Theming
 
+This component uses an `Input` under the covers. The theme object is passed down namespaced under `input` keyword. This means you can use the same theme classNames from `Input` component but namespaced with `input`. For example, to style the label you have to use `inputLabel` className.
+
 | Name            | Description|
 |:----------------|:-----------|
 | `active`        | Added to the root element when the dropdown is active.|

From 5b39cfd1dbd08e4cd60290f671066ed38629baa6 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 5 Dec 2016 22:23:01 +0100
Subject: [PATCH 0982/1024] Fixes #1016

---
 components/autocomplete/Autocomplete.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index b7bc56f29..c9e40ae8f 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -161,7 +161,7 @@ const factory = (Chip, Input) => {
    query (key) {
       let query_value = '';
       if (!this.props.multiple && key) {
-        const source_value = this.source().get(key);
+        const source_value = this.source().get(`${key}`);
         query_value = source_value ? source_value : key;
       }
       return query_value;
@@ -181,7 +181,7 @@ const factory = (Chip, Input) => {
    suggestions () {
      let suggest = new Map();
      const rawQuery = this.state.query || (this.props.multiple ? '' : this.props.value);
-     const query = (rawQuery || '').toLowerCase().trim();
+     const query = (`${rawQuery}`).toLowerCase().trim();
      const values = this.values();
      const source = this.source();
 
@@ -229,15 +229,16 @@ const factory = (Chip, Input) => {
      if (src.hasOwnProperty('length')) {
        return new Map(src.map((item) => Array.isArray(item) ? [...item] : [item, item]));
      } else {
-       return new Map(Object.keys(src).map((key) => [key, src[key]]));
+       return new Map(Object.keys(src).map((key) => [`${key}`, src[key]]));
      }
    }
 
    values () {
      const valueMap = new Map();
      const vals = this.props.multiple ? this.props.value : [this.props.value];
+     const stringVals = vals.map(v => `${v}`);
      for (const [k, v] of this.source()) {
-       if (vals.indexOf(k) !== -1) valueMap.set(k, v);
+       if (stringVals.indexOf(k) !== -1) valueMap.set(k, v);
      }
      return valueMap;
    }

From b83980d5b4486163bb685dfa0ba3b751108872d7 Mon Sep 17 00:00:00 2001
From: Craig Cartmell <craigcartmell1@gmail.com>
Date: Tue, 6 Dec 2016 09:43:11 +0000
Subject: [PATCH 0983/1024] Updated readme to include new
 showSelectedWhenNotInSource prop

---
 components/autocomplete/readme.md | 33 ++++++++++++++++---------------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/components/autocomplete/readme.md b/components/autocomplete/readme.md
index 6e30ea2e4..720cbd469 100644
--- a/components/autocomplete/readme.md
+++ b/components/autocomplete/readme.md
@@ -41,23 +41,24 @@ If you want to provide a theme via context, the component key is `RTAutocomplete
 
 ## Properties
 
-| Name                | Type                   | Default         | Description|
+| Name                | Type      | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `allowCreate`       | `Bool`                 | `false`         | Determines if user can create a new option with the current typed value |
-| `className`         | `String`               | `''`            | Sets a class to style of the Component.|
-| `direction`         | `String`               |  `auto`         | Determines the opening direction. It can be `auto`, `top` or `down`.|
-| `disabled`          | `Bool`                 |  `false`        | If true, component will be disabled.|
-| `error`             | `String`               |                 | Sets the error string for the internal input element.|
-| `label`             | `String`               |                 | The text string to use for the floating label element.|
-| `multiple`          | `Bool`                 | `true`          | If true, component can hold multiple values.|
-| `onBlur`            | `Function`             |                 | Callback function that is fired when component is blurred.|
-| `onChange`          | `Function`             |                 | Callback function that is fired when the components's value changes.|
-| `onFocus`           | `Function`             |                 | Callback function that is fired when component is focused.|
-| `source`            | `Object` or `Array`    |                 | Object of key/values or array representing all items suggested. |
-| `selectedPosition`  | `String`               |  `above`        | Determines if the selected list is shown above or below input. It can be `above` or `below`. |
-| `showSuggestionsWhenValueIsSet` | `Bool`     | `false`         | If true, the list of suggestions will not be filtered when a value is selected, until the query is modified. |
-| `suggestionMatch`   | `String`               | `start`         | Determines how suggestions are supplied. It can be `start` (query matches the start of a suggestion), `anywhere` (query matches anywhere inside the suggestion), or `word` (query matches the start of a word in the suggestion). |
-| `value`             | `String` or `Array`    |                 | Value or array of values currently selected component.|
+| `allowCreate`                   | `Bool`                        | `false` | Determines if user can create a new option with the current typed value |
+| `className`                     | `String`                      | `''`    | Sets a class to style of the Component.|
+| `direction`                     | `String`                      | `auto`  | Determines the opening direction. It can be `auto`, `top` or `down`. |
+| `disabled`                      | `Bool`                        | `false` | If true, component will be disabled. |
+| `error`                         | `String`                      |         | Sets the error string for the internal input element. |
+| `label`                         | `String`                      |         | The text string to use for the floating label element. |
+| `multiple`                      | `Bool`                        | `true`  | If true, component can hold multiple values. |
+| `onBlur`                        | `Function`                    |         | Callback function that is fired when component is blurred. |
+| `onChange`                      | `Function`                    |         | Callback function that is fired when the components's value changes. |
+| `onFocus`                       | `Function`                    |         | Callback function that is fired when component is focused. |
+| `source`                        | `Object` or `Array`           |         | Object of key/values or array representing all items suggested. |
+| `selectedPosition`              | `String`                      | `above` | Determines if the selected list is shown above or below input. It can be `above` or `below`. |
+| `showSelectedWhenNotInSource`   | `Bool`                        | `false` | Determines if the selected list is shown if the `value` keys don't exist in the source. Only works if passing the `value` prop as an Object. |
+| `showSuggestionsWhenValueIsSet` | `Bool`                        | `false` | If true, the list of suggestions will not be filtered when a value is selected, until the query is modified. |
+| `suggestionMatch`               | `String`                      | `start` | Determines how suggestions are supplied. It can be `start` (query matches the start of a suggestion), `anywhere` (query matches anywhere inside the suggestion), or `word` (query matches the start of a word in the suggestion). |
+| `value`                         | `String`, `Array` or `Object` |         | Value or array of values currently selected component. |
 
 Additional properties will be passed to the Input Component so you can use `hint`, `name` ... etc.
 

From d19249fd0e71187e00dccbe8faeee57430be3686 Mon Sep 17 00:00:00 2001
From: Craig Cartmell <craigcartmell1@gmail.com>
Date: Tue, 6 Dec 2016 09:45:12 +0000
Subject: [PATCH 0984/1024] Updated selectedPosition description in readme

---
 components/autocomplete/readme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/autocomplete/readme.md b/components/autocomplete/readme.md
index 720cbd469..0e0564db4 100644
--- a/components/autocomplete/readme.md
+++ b/components/autocomplete/readme.md
@@ -54,7 +54,7 @@ If you want to provide a theme via context, the component key is `RTAutocomplete
 | `onChange`                      | `Function`                    |         | Callback function that is fired when the components's value changes. |
 | `onFocus`                       | `Function`                    |         | Callback function that is fired when component is focused. |
 | `source`                        | `Object` or `Array`           |         | Object of key/values or array representing all items suggested. |
-| `selectedPosition`              | `String`                      | `above` | Determines if the selected list is shown above or below input. It can be `above` or `below`. |
+| `selectedPosition`              | `String`                      | `above` | Determines if the selected list is shown above or below input. It can be `above`, `below` or `none`. |
 | `showSelectedWhenNotInSource`   | `Bool`                        | `false` | Determines if the selected list is shown if the `value` keys don't exist in the source. Only works if passing the `value` prop as an Object. |
 | `showSuggestionsWhenValueIsSet` | `Bool`                        | `false` | If true, the list of suggestions will not be filtered when a value is selected, until the query is modified. |
 | `suggestionMatch`               | `String`                      | `start` | Determines how suggestions are supplied. It can be `start` (query matches the start of a suggestion), `anywhere` (query matches anywhere inside the suggestion), or `word` (query matches the start of a word in the suggestion). |

From 7d19b9af4a4b736daa63da479f7e34d8e29fc676 Mon Sep 17 00:00:00 2001
From: Craig Cartmell <craigcartmell1@gmail.com>
Date: Tue, 6 Dec 2016 09:49:13 +0000
Subject: [PATCH 0985/1024] Added onQueryChange description to readme

---
 components/autocomplete/readme.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/autocomplete/readme.md b/components/autocomplete/readme.md
index 0e0564db4..be000a4af 100644
--- a/components/autocomplete/readme.md
+++ b/components/autocomplete/readme.md
@@ -52,6 +52,7 @@ If you want to provide a theme via context, the component key is `RTAutocomplete
 | `multiple`                      | `Bool`                        | `true`  | If true, component can hold multiple values. |
 | `onBlur`                        | `Function`                    |         | Callback function that is fired when component is blurred. |
 | `onChange`                      | `Function`                    |         | Callback function that is fired when the components's value changes. |
+| `onQueryChange`                 | `Function`                    |         | Callback function that is fired when the components's query input value changes. |
 | `onFocus`                       | `Function`                    |         | Callback function that is fired when component is focused. |
 | `source`                        | `Object` or `Array`           |         | Object of key/values or array representing all items suggested. |
 | `selectedPosition`              | `String`                      | `above` | Determines if the selected list is shown above or below input. It can be `above`, `below` or `none`. |

From afb0f296a88159caa15d688bf482608ed3e4f44f Mon Sep 17 00:00:00 2001
From: Craig Cartmell <craigcartmell1@gmail.com>
Date: Tue, 6 Dec 2016 09:53:18 +0000
Subject: [PATCH 0986/1024] Added showSelectedWhenNotInSource to
 AutocompleteTheme

---
 components/autocomplete/index.d.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/components/autocomplete/index.d.ts b/components/autocomplete/index.d.ts
index 5a8185187..db661debc 100644
--- a/components/autocomplete/index.d.ts
+++ b/components/autocomplete/index.d.ts
@@ -82,6 +82,11 @@ interface AutocompleteProps extends ReactToolbox.Props {
    * @default above
    */
   selectedPosition?: "above" | "below" | "none";
+  /**
+   * Determines if the selected list is shown if the `value` keys don't exist in the source. Only works if passing the `value` prop as an Object.
+   * @default false
+   */
+  showSelectedWhenNotInSource?: boolean;
   /**
    * If true, the list of suggestions will not be filtered when a value is selected.
    * @default false

From 66090abc24625eb2ab648ed88e2507df04c504ae Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 6 Dec 2016 13:07:01 +0100
Subject: [PATCH 0987/1024] Release 1.3.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 1e216afce..ce71572f6 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "react-toolbox",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "homepage": "http://www.react-toolbox.com/",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "main": "./lib",
   "author": {
     "name": "React Toolbox Team",

From c18ffa40c3acf5d9093f5c1d1b9cf24ba24ba676 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 6 Dec 2016 13:11:04 +0100
Subject: [PATCH 0988/1024] Fixes #1025

---
 components/list/ListItemContent.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/components/list/ListItemContent.js b/components/list/ListItemContent.js
index d8e67ac42..d7fe630ea 100644
--- a/components/list/ListItemContent.js
+++ b/components/list/ListItemContent.js
@@ -9,7 +9,10 @@ const types = ['auto', 'normal', 'large'];
 const factory = (ListItemText) => {
   class ListItemContent extends Component {
     static propTypes = {
-      caption: PropTypes.string,
+      caption: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.node
+      ]),
       children: PropTypes.any,
       legend: PropTypes.string,
       theme: PropTypes.shape({

From 3d4d93bc7135d47db87cb2269af0936d8e680dee Mon Sep 17 00:00:00 2001
From: Craig Cartmell <craigcartmell1@gmail.com>
Date: Tue, 6 Dec 2016 14:17:27 +0000
Subject: [PATCH 0989/1024] Added safety check on vals

---
 components/autocomplete/Autocomplete.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index 5c860b9a4..83da46f6a 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -247,7 +247,9 @@ const factory = (Chip, Input) => {
    }
 
    values () {
-     const vals = this.props.multiple ? this.props.value : [this.props.value];
+     let vals = this.props.multiple ? this.props.value : [this.props.value];
+
+     if (!vals) vals = [];
 
      if (this.props.showSelectedWhenNotInSource && this.state.isValueAnObject) {
        return new Map(Object.entries(vals));

From d38abd1a91129932353c33691c28c20ec41c70bc Mon Sep 17 00:00:00 2001
From: Craig Cartmell <craigcartmell1@gmail.com>
Date: Wed, 7 Dec 2016 10:59:35 +0000
Subject: [PATCH 0990/1024] Cleaned up isValueAnObject check

---
 components/autocomplete/Autocomplete.js | 20 +++++---------------
 1 file changed, 5 insertions(+), 15 deletions(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index 83da46f6a..07de31640 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -68,20 +68,12 @@ const factory = (Chip, Input) => {
      isValueAnObject: false
    };
 
-   componentDidMount () {
-     this.setIsValueAnObject();
-   }
-
    componentWillReceiveProps (nextProps) {
      if (!this.props.multiple) {
        this.setState({
          query: this.query(nextProps.value)
        });
      }
-
-     if (nextProps.multiple && this.props.value !== nextProps.value) {
-        this.setIsValueAnObject();
-     }
    }
 
    shouldComponentUpdate (nextProps, nextState) {
@@ -251,7 +243,7 @@ const factory = (Chip, Input) => {
 
      if (!vals) vals = [];
 
-     if (this.props.showSelectedWhenNotInSource && this.state.isValueAnObject) {
+     if (this.props.showSelectedWhenNotInSource && this.isValueAnObject()) {
        return new Map(Object.entries(vals));
      }
 
@@ -271,7 +263,7 @@ const factory = (Chip, Input) => {
      const source = this.source();
      const newValue = target === void 0 ? event.target.id : target;
 
-     if (this.state.isValueAnObject) {
+     if (this.isValueAnObject()) {
        const newItem = Array.from(source).reduce((obj, [k, value]) => {
          if (k === newValue) {
            obj[k] = value;
@@ -291,7 +283,7 @@ const factory = (Chip, Input) => {
 
        values.delete(key);
 
-       if (this.state.isValueAnObject) {
+       if (this.isValueAnObject()) {
          return this.handleChange(this.mapToObject(values), event);
        }
 
@@ -299,10 +291,8 @@ const factory = (Chip, Input) => {
      }
    }
 
-   setIsValueAnObject () {
-      this.setState({
-        isValueAnObject: !Array.isArray(this.props.value) && typeof this.props.value === 'object'
-      });
+    isValueAnObject () {
+      return !Array.isArray(this.props.value) && typeof this.props.value === 'object';
     }
 
     mapToObject (map) {

From 7c6f5ae431ada519145a7c9d178c42351ce1ba71 Mon Sep 17 00:00:00 2001
From: Craig Cartmell <craigcartmell1@gmail.com>
Date: Wed, 7 Dec 2016 11:01:46 +0000
Subject: [PATCH 0991/1024] Reformat

---
 components/autocomplete/Autocomplete.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index 07de31640..8c0e67b3e 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -291,16 +291,16 @@ const factory = (Chip, Input) => {
      }
    }
 
-    isValueAnObject () {
+   isValueAnObject () {
       return !Array.isArray(this.props.value) && typeof this.props.value === 'object';
-    }
+   }
 
-    mapToObject (map) {
+   mapToObject (map) {
       return Array.from(map).reduce((obj, [k, value]) => {
         obj[k] = value;
         return obj;
       }, {});
-    }
+   }
 
    renderSelected () {
      if (this.props.multiple) {

From ce3fbfc913feffdc4be829f9e8d8757b1bc5d151 Mon Sep 17 00:00:00 2001
From: masakij <masakij@users.noreply.github.com>
Date: Mon, 12 Dec 2016 15:14:06 +0900
Subject: [PATCH 0992/1024] relaxing propTypes of Input & Autocomplete

---
 components/autocomplete/Autocomplete.js                     | 4 ++--
 components/autocomplete/index.d.ts                          | 4 ++--
 components/autocomplete/readme.md                           | 4 ++--
 components/input/Input.js                                   | 6 +++---
 components/input/index.d.ts                                 | 6 +++---
 components/input/readme.md                                  | 6 +++---
 .../layout/main/modules/examples/input_example_1.txt        | 1 +
 7 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index 83da46f6a..526395663 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -20,9 +20,9 @@ const factory = (Chip, Input) => {
      className: PropTypes.string,
      direction: PropTypes.oneOf(['auto', 'up', 'down']),
      disabled: PropTypes.bool,
-     error: PropTypes.string,
+     error: PropTypes.node,
      keepFocusOnChange: PropTypes.bool,
-     label: PropTypes.string,
+     label: PropTypes.node,
      multiple: PropTypes.bool,
      onBlur: PropTypes.func,
      onChange: PropTypes.func,
diff --git a/components/autocomplete/index.d.ts b/components/autocomplete/index.d.ts
index db661debc..40d7d2f3c 100644
--- a/components/autocomplete/index.d.ts
+++ b/components/autocomplete/index.d.ts
@@ -58,11 +58,11 @@ interface AutocompleteProps extends ReactToolbox.Props {
    * Sets the error string for the internal input element.
    * @default false
    */
-  error?: string;
+  error?: React.ReactNode;
   /**
    * The text string to use for the floating label element.
    */
-  label?: string;
+  label?: React.ReactNode;
   /**
    * If true, component can hold multiple values.
    */
diff --git a/components/autocomplete/readme.md b/components/autocomplete/readme.md
index be000a4af..c9bfe31de 100644
--- a/components/autocomplete/readme.md
+++ b/components/autocomplete/readme.md
@@ -47,8 +47,8 @@ If you want to provide a theme via context, the component key is `RTAutocomplete
 | `className`                     | `String`                      | `''`    | Sets a class to style of the Component.|
 | `direction`                     | `String`                      | `auto`  | Determines the opening direction. It can be `auto`, `top` or `down`. |
 | `disabled`                      | `Bool`                        | `false` | If true, component will be disabled. |
-| `error`                         | `String`                      |         | Sets the error string for the internal input element. |
-| `label`                         | `String`                      |         | The text string to use for the floating label element. |
+| `error`                         | `Node`                        |         | Sets the error string for the internal input element. |
+| `label`                         | `Node`                        |         | The text string to use for the floating label element. |
 | `multiple`                      | `Bool`                        | `true`  | If true, component can hold multiple values. |
 | `onBlur`                        | `Function`                    |         | Callback function that is fired when component is blurred. |
 | `onChange`                      | `Function`                    |         | Callback function that is fired when the components's value changes. |
diff --git a/components/input/Input.js b/components/input/Input.js
index 8ed50ef28..22924b73f 100644
--- a/components/input/Input.js
+++ b/components/input/Input.js
@@ -10,14 +10,14 @@ const factory = (FontIcon) => {
       children: React.PropTypes.any,
       className: React.PropTypes.string,
       disabled: React.PropTypes.bool,
-      error: React.PropTypes.string,
+      error: React.PropTypes.node,
       floating: React.PropTypes.bool,
-      hint: React.PropTypes.string,
+      hint: React.PropTypes.node,
       icon: React.PropTypes.oneOfType([
         React.PropTypes.string,
         React.PropTypes.element
       ]),
-      label: React.PropTypes.string,
+      label: React.PropTypes.node,
       maxLength: React.PropTypes.number,
       multiline: React.PropTypes.bool,
       name: React.PropTypes.string,
diff --git a/components/input/index.d.ts b/components/input/index.d.ts
index b1db642a2..c3d60d160 100644
--- a/components/input/index.d.ts
+++ b/components/input/index.d.ts
@@ -65,7 +65,7 @@ interface InputProps extends ReactToolbox.Props {
   /**
    * Give an error node to display under the field.
    */
-  error?: string;
+  error?: React.ReactNode;
   /**
    * Indicates if the label is floating in the input field or not.
    * @default true
@@ -74,7 +74,7 @@ interface InputProps extends ReactToolbox.Props {
   /**
    * The text string to use for hint text element.
    */
-  hint?: string;
+  hint?: React.ReactNode;
   /**
    * Name of an icon to use as a label for the input.
    */
@@ -82,7 +82,7 @@ interface InputProps extends ReactToolbox.Props {
   /**
    * The text string to use for the floating label element.
    */
-  label?: string;
+  label?: React.ReactNode;
   /**
    * Specifies the maximum number of characters allowed in the component
    */
diff --git a/components/input/readme.md b/components/input/readme.md
index 495a93f65..5c8a1998f 100644
--- a/components/input/readme.md
+++ b/components/input/readme.md
@@ -35,11 +35,11 @@ If you want to provide a theme via context, the component key is `RTInput`.
 |:-----|:-----|:-----|:-----|
 | `className`     | `String`                | `''`            | Sets a class name to give custom styles.|
 | `disabled`      | `Boolean`               | `false`         | If true, component will be disabled.|
-| `error`         | `String`                |                 | Give an error node to display under the field.|
+| `error`         | `Node`                  |                 | Give an error node to display under the field.|
 | `floating`      | `Boolean`               | `true`          | Indicates if the label is floating in the input field or not.|
-| `hint`          | `String`                | `''`            | The text string to use for hint text element.|
+| `hint`          | `Node`                  | `''`            | The text string to use for hint text element.|
 | `icon`          | `String` or `Element`   |                 | Name of an icon to use as a label for the input.|
-| `label`         | `String`                |                 | The text string to use for the floating label element.|
+| `label`         | `Node`                  |                 | The text string to use for the floating label element.|
 | `maxLength`     | `Number`                |                 | Specifies the maximum number of characters allowed in the component.|
 | `multiline`     | `Boolean`               | `false`         | If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.|
 | `rows`          | `Number`                |                 | The number of rows the multiline input field has.|
diff --git a/docs/app/components/layout/main/modules/examples/input_example_1.txt b/docs/app/components/layout/main/modules/examples/input_example_1.txt
index 70327ee94..80cdde523 100644
--- a/docs/app/components/layout/main/modules/examples/input_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/input_example_1.txt
@@ -15,6 +15,7 @@ class InputTest extends React.Component {
         <Input type='email' label='Email address' icon='email' value={this.state.email} onChange={this.handleChange.bind(this, 'email')} />
         <Input type='tel' label='Phone' name='phone' icon='phone' value={this.state.phone} onChange={this.handleChange.bind(this, 'phone')} />
         <Input type='text' value={this.state.hint} label='Required Field' hint='With Hint' required onChange={this.handleChange.bind(this, 'hint')} icon='share' />
+        <Input type='text' label='error' error={<span>Error!! <a href="#!" onClick={e => { e.preventDefault(); console.log('some help'); }}>?</a></span>} />
       </section>
     );
   }

From 3e67d354b2d83c2679cc69356cad22c5b3424ffd Mon Sep 17 00:00:00 2001
From: Ahmed <elazzabi.ahmed@gmail.com>
Date: Tue, 13 Dec 2016 15:04:42 +0000
Subject: [PATCH 0993/1024] Fix broken example in Card component

---
 components/card/readme.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/card/readme.md b/components/card/readme.md
index 1cd1b88a3..897a22157 100644
--- a/components/card/readme.md
+++ b/components/card/readme.md
@@ -7,6 +7,7 @@ Cards are composed of multiple subcomponents in React Toolbox. You can combine e
 <!-- example -->
 ```jsx
 import { Card, CardMedia, CardTitle, CardText, CardActions } from 'react-toolbox/lib/card';
+import {Button} from 'react-toolbox/lib/button';
 
 const dummyText = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.';
 

From f00687564b58d726a7bf9428c15acb6c7217d8a5 Mon Sep 17 00:00:00 2001
From: masakij <masakij@users.noreply.github.com>
Date: Wed, 14 Dec 2016 11:42:24 +0900
Subject: [PATCH 0994/1024] refactor propTypes more descriptive

---
 components/autocomplete/Autocomplete.js | 10 ++++++++--
 components/autocomplete/index.d.ts      |  4 ++--
 components/autocomplete/readme.md       |  4 ++--
 components/input/Input.js               | 15 ++++++++++++---
 components/input/index.d.ts             |  6 +++---
 components/input/readme.md              |  6 +++---
 6 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index 526395663..d9b431af8 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -20,9 +20,15 @@ const factory = (Chip, Input) => {
      className: PropTypes.string,
      direction: PropTypes.oneOf(['auto', 'up', 'down']),
      disabled: PropTypes.bool,
-     error: PropTypes.node,
+     error: React.PropTypes.oneOfType([
+       React.PropTypes.string,
+       React.PropTypes.node
+     ]),
      keepFocusOnChange: PropTypes.bool,
-     label: PropTypes.node,
+     label: React.PropTypes.oneOfType([
+       React.PropTypes.string,
+       React.PropTypes.node
+     ]),
      multiple: PropTypes.bool,
      onBlur: PropTypes.func,
      onChange: PropTypes.func,
diff --git a/components/autocomplete/index.d.ts b/components/autocomplete/index.d.ts
index 40d7d2f3c..904a096cc 100644
--- a/components/autocomplete/index.d.ts
+++ b/components/autocomplete/index.d.ts
@@ -58,11 +58,11 @@ interface AutocompleteProps extends ReactToolbox.Props {
    * Sets the error string for the internal input element.
    * @default false
    */
-  error?: React.ReactNode;
+  error?: string | React.ReactNode;
   /**
    * The text string to use for the floating label element.
    */
-  label?: React.ReactNode;
+  label?: string | React.ReactNode;
   /**
    * If true, component can hold multiple values.
    */
diff --git a/components/autocomplete/readme.md b/components/autocomplete/readme.md
index c9bfe31de..2812be86a 100644
--- a/components/autocomplete/readme.md
+++ b/components/autocomplete/readme.md
@@ -47,8 +47,8 @@ If you want to provide a theme via context, the component key is `RTAutocomplete
 | `className`                     | `String`                      | `''`    | Sets a class to style of the Component.|
 | `direction`                     | `String`                      | `auto`  | Determines the opening direction. It can be `auto`, `top` or `down`. |
 | `disabled`                      | `Bool`                        | `false` | If true, component will be disabled. |
-| `error`                         | `Node`                        |         | Sets the error string for the internal input element. |
-| `label`                         | `Node`                        |         | The text string to use for the floating label element. |
+| `error`                         | `String` or `Node`            |         | Sets the error string for the internal input element. |
+| `label`                         | `String` or `Node`            |         | The text string to use for the floating label element. |
 | `multiple`                      | `Bool`                        | `true`  | If true, component can hold multiple values. |
 | `onBlur`                        | `Function`                    |         | Callback function that is fired when component is blurred. |
 | `onChange`                      | `Function`                    |         | Callback function that is fired when the components's value changes. |
diff --git a/components/input/Input.js b/components/input/Input.js
index 22924b73f..71d23b69b 100644
--- a/components/input/Input.js
+++ b/components/input/Input.js
@@ -10,14 +10,23 @@ const factory = (FontIcon) => {
       children: React.PropTypes.any,
       className: React.PropTypes.string,
       disabled: React.PropTypes.bool,
-      error: React.PropTypes.node,
+      error: React.PropTypes.oneOfType([
+        React.PropTypes.string,
+        React.PropTypes.node
+      ]),
       floating: React.PropTypes.bool,
-      hint: React.PropTypes.node,
+      hint: React.PropTypes.oneOfType([
+        React.PropTypes.string,
+        React.PropTypes.node
+      ]),
       icon: React.PropTypes.oneOfType([
         React.PropTypes.string,
         React.PropTypes.element
       ]),
-      label: React.PropTypes.node,
+      label: React.PropTypes.oneOfType([
+        React.PropTypes.string,
+        React.PropTypes.node
+      ]),
       maxLength: React.PropTypes.number,
       multiline: React.PropTypes.bool,
       name: React.PropTypes.string,
diff --git a/components/input/index.d.ts b/components/input/index.d.ts
index c3d60d160..b0c082516 100644
--- a/components/input/index.d.ts
+++ b/components/input/index.d.ts
@@ -65,7 +65,7 @@ interface InputProps extends ReactToolbox.Props {
   /**
    * Give an error node to display under the field.
    */
-  error?: React.ReactNode;
+  error?: string | React.ReactNode;
   /**
    * Indicates if the label is floating in the input field or not.
    * @default true
@@ -74,7 +74,7 @@ interface InputProps extends ReactToolbox.Props {
   /**
    * The text string to use for hint text element.
    */
-  hint?: React.ReactNode;
+  hint?: string | React.ReactNode;
   /**
    * Name of an icon to use as a label for the input.
    */
@@ -82,7 +82,7 @@ interface InputProps extends ReactToolbox.Props {
   /**
    * The text string to use for the floating label element.
    */
-  label?: React.ReactNode;
+  label?: string | React.ReactNode;
   /**
    * Specifies the maximum number of characters allowed in the component
    */
diff --git a/components/input/readme.md b/components/input/readme.md
index 5c8a1998f..f05b54467 100644
--- a/components/input/readme.md
+++ b/components/input/readme.md
@@ -35,11 +35,11 @@ If you want to provide a theme via context, the component key is `RTInput`.
 |:-----|:-----|:-----|:-----|
 | `className`     | `String`                | `''`            | Sets a class name to give custom styles.|
 | `disabled`      | `Boolean`               | `false`         | If true, component will be disabled.|
-| `error`         | `Node`                  |                 | Give an error node to display under the field.|
+| `error`         | `String` or `Node`      |                 | Give an error node to display under the field.|
 | `floating`      | `Boolean`               | `true`          | Indicates if the label is floating in the input field or not.|
-| `hint`          | `Node`                  | `''`            | The text string to use for hint text element.|
+| `hint`          | `String` or `Node`      | `''`            | The text string to use for hint text element.|
 | `icon`          | `String` or `Element`   |                 | Name of an icon to use as a label for the input.|
-| `label`         | `Node`                  |                 | The text string to use for the floating label element.|
+| `label`         | `String` or `Node`      |                 | The text string to use for the floating label element.|
 | `maxLength`     | `Number`                |                 | Specifies the maximum number of characters allowed in the component.|
 | `multiline`     | `Boolean`               | `false`         | If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.|
 | `rows`          | `Number`                |                 | The number of rows the multiline input field has.|

From b419f449bcc7d744414cce333b68ec5e5500676a Mon Sep 17 00:00:00 2001
From: masakij <masakij@users.noreply.github.com>
Date: Fri, 16 Dec 2016 18:34:52 +0900
Subject: [PATCH 0995/1024] Add disabled dropdown item feature & add its test
 cases & update docs

---
 components/dropdown/Dropdown.js               |  7 ++-
 components/dropdown/__test__/index.spec.js    | 44 +++++++++++++++++++
 components/dropdown/_config.scss              |  1 +
 components/dropdown/theme.scss                |  6 ++-
 .../modules/examples/dropdown_example_1.txt   | 42 +++++++++++++-----
 5 files changed, 85 insertions(+), 15 deletions(-)
 create mode 100644 components/dropdown/__test__/index.spec.js

diff --git a/components/dropdown/Dropdown.js b/components/dropdown/Dropdown.js
index f5dd2e269..5f28dbdc0 100644
--- a/components/dropdown/Dropdown.js
+++ b/components/dropdown/Dropdown.js
@@ -152,9 +152,12 @@ const factory = (Input) => {
 
     renderValue = (item, idx) => {
       const { theme } = this.props;
-      const className = item.value === this.props.value ? theme.selected : null;
+      const className = classnames({
+        [theme.selected]: item.value === this.props.value,
+        [theme.disabled]: item.disabled
+      });
       return (
-        <li key={idx} className={className} onClick={this.handleSelect.bind(this, item.value)}>
+        <li key={idx} className={className} onClick={!item.disabled ? this.handleSelect.bind(this, item.value) : null}>
           {this.props.template ? this.props.template(item) : item.label}
         </li>
       );
diff --git a/components/dropdown/__test__/index.spec.js b/components/dropdown/__test__/index.spec.js
new file mode 100644
index 000000000..febdaf36b
--- /dev/null
+++ b/components/dropdown/__test__/index.spec.js
@@ -0,0 +1,44 @@
+import expect from 'expect';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {
+  renderIntoDocument,
+  scryRenderedDOMComponentsWithClass,
+  Simulate
+} from 'react-addons-test-utils';
+import sinon from 'sinon';
+import theme from '../theme.scss';
+import Dropdown, { Dropdown as RawDropdown } from '../Dropdown';
+
+
+describe('Dropdown', function () {
+  describe('#renderValue', function () {
+    const source = [
+      { value: 'EN-gb', label: 'England' },
+      { value: 'ES-es', label: 'Spain', disabled: true },
+      { value: 'TH-th', label: 'Thailand', disabled: true },
+      { value: 'EN-en', label: 'USA'}
+    ];
+    it('renders dropdown item with disabled style', function () {
+      const tree = renderIntoDocument(<Dropdown theme={theme} source={source} />);
+      const disabled = scryRenderedDOMComponentsWithClass(tree, theme.disabled);
+      expect(disabled.length).toEqual(2);
+    });
+    it('does not call onChange callback when disabled dorpdown item is clicked', function () {
+      const spy = sinon.spy();
+      const tree = renderIntoDocument(<Dropdown
+        theme={theme}
+        source={source}
+        value={source[0].value}
+        onChange={spy}
+      />);
+      const disabled = scryRenderedDOMComponentsWithClass(tree, theme.disabled);
+      expect(spy.called).toEqual(false);
+      Simulate.click(disabled[0]);
+      expect(spy.called).toEqual(false);
+      const selected = scryRenderedDOMComponentsWithClass(tree, theme.selected);
+      Simulate.click(selected[0]);
+      expect(spy.called).toEqual(true);
+    });
+  });
+});
diff --git a/components/dropdown/_config.scss b/components/dropdown/_config.scss
index 364815c0b..1b26341ba 100644
--- a/components/dropdown/_config.scss
+++ b/components/dropdown/_config.scss
@@ -1,6 +1,7 @@
 $dropdown-color-white: $color-white !default;
 $dropdown-color-primary: $color-primary !default;
 $dropdown-color-primary-contrast: $color-primary-contrast !default;
+$dropdown-color-disabled: rgba($color-black, 0.26) !default;
 $dropdown-value-hover-background: $palette-grey-200 !default;
 $dropdown-overflow-max-height: 45vh !default;
 $dropdown-value-border-radius: .2 * $unit !default;
diff --git a/components/dropdown/theme.scss b/components/dropdown/theme.scss
index 607afa2a6..0401c348f 100644
--- a/components/dropdown/theme.scss
+++ b/components/dropdown/theme.scss
@@ -128,11 +128,15 @@
     padding: $unit;
     overflow: hidden;
     cursor: pointer;
-    &:hover {
+    &:hover:not(.disabled) {
       background-color: $dropdown-value-hover-background;
     }
     &.selected {
       color: $dropdown-color-primary;
     }
+    &.disabled {
+      color: $dropdown-color-disabled;
+      cursor: not-allowed;
+    }
   }
 }
diff --git a/docs/app/components/layout/main/modules/examples/dropdown_example_1.txt b/docs/app/components/layout/main/modules/examples/dropdown_example_1.txt
index 4eb7a2341..362720330 100644
--- a/docs/app/components/layout/main/modules/examples/dropdown_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/dropdown_example_1.txt
@@ -1,17 +1,28 @@
 class DropdownTest extends React.Component {
   state = {
-    selected: 3
+    albumSelected: 3,
+    countrySelected: 'ES-es'
   };
 
   albums = [
     { value: 1, artist: 'Radiohead', album: 'In Rainbows', img: 'http://www.clasesdeperiodismo.com/wp-content/uploads/2012/02/radiohead-in-rainbows.png' },
     { value: 2, artist: 'QOTSA', album: 'Sons for the Deaf', img: 'http://static.musictoday.com/store/bands/93/product_large/MUDD6669.JPG' },
     { value: 3, artist: 'Kendrick Lamar', album: 'Good Kid Maad City', img: 'https://cdn.shopify.com/s/files/1/0131/9332/products/0bd4b1846ba3890f574810dbeddddf8c.500x500x1_grande.png?v=1425070323' },
-    { value: 4, artist: 'Pixies', album: 'Doolittle', img: 'http://www.resident-music.com/image/cache/data/Emilys_Packshots/Pixies/Pixies_Doolittlke-500x500.jpg' }
+    { value: 4, artist: 'Pixies', album: 'Doolittle', img: 'http://www.resident-music.com/image/cache/data/Emilys_Packshots/Pixies/Pixies_Doolittlke-500x500.jpg', disabled: true }
   ];
+  countries = [
+    { value: 'EN-gb', label: 'England' },
+    { value: 'ES-es', label: 'Spain'},
+    { value: 'TH-th', label: 'Thailand', disabled: true },
+    { value: 'EN-en', label: 'USA'}
+  ];
+
+  handleAlbumChange = (value) => {
+    this.setState({albumSelected: value});
+  };
 
-  handleChange = (value) => {
-    this.setState({selected: value});
+  handleCountryChange = (value) => {
+    this.setState({countrySelected: value});
   };
 
   customItem (item) {
@@ -48,14 +59,21 @@ class DropdownTest extends React.Component {
 
   render () {
     return (
-      <Dropdown
-        auto={false}
-        source={this.albums}
-        onChange={this.handleChange}
-        label='Select your favorite album'
-        template={this.customItem}
-        value={this.state.selected}
-      />
+      <div>
+        <Dropdown
+          auto={false}
+          source={this.albums}
+          onChange={this.handleAlbumChange}
+          label='Select your favorite album'
+          template={this.customItem}
+          value={this.state.albumSelected}
+        />
+        <Dropdown
+          source={this.countries}
+          onChange={this.handleCountryChange}
+          value={this.state.countrySelected}
+        />
+      </div>
     );
   }
 }

From 3550f3cf67c3271a601798b3ad259ced3c5d89f8 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 17 Dec 2016 19:29:48 +0100
Subject: [PATCH 0996/1024] Update dependencies

---
 package.json |  46 ++---
 yarn.lock    | 555 ++++++++++++++++++++++++++++++++++-----------------
 2 files changed, 397 insertions(+), 204 deletions(-)

diff --git a/package.json b/package.json
index ce71572f6..1f6cb5c21 100644
--- a/package.json
+++ b/package.json
@@ -39,28 +39,28 @@
     "classnames": "^2.2.5",
     "core-js": "^2.4.0",
     "normalize.css": "^4.2.0",
-    "react-css-themr": "^1.6.0"
+    "react-css-themr": "^1.7.0"
   },
   "devDependencies": {
-    "autoprefixer": "^6.5.1",
+    "autoprefixer": "^6.5.4",
     "babel-cli": "^6.18.0",
-    "babel-core": "^6.18.2",
+    "babel-core": "^6.21.0",
     "babel-eslint": "^7.1.1",
-    "babel-loader": "^6.2.4",
+    "babel-loader": "^6.2.10",
     "babel-plugin-react-transform": "^2.0.2",
-    "babel-polyfill": "^6.16.0",
+    "babel-polyfill": "^6.20.0",
     "babel-preset-es2015": "^6.18.0",
     "babel-preset-react": "^6.16.0",
     "babel-preset-stage-0": "^6.16.0",
     "cpx": "^1.5.0",
     "cross-env": "^3.1.3",
-    "css-loader": "^0.26.0",
-    "eslint": "^3.10.2",
-    "eslint-import-resolver-webpack": "^0.7.0",
+    "css-loader": "^0.26.1",
+    "eslint": "^3.12.2",
+    "eslint-import-resolver-webpack": "^0.8.0",
     "eslint-plugin-babel": "^4.0.0",
     "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-jsx-a11y": "^3.0.1",
-    "eslint-plugin-react": "^6.7.1",
+    "eslint-plugin-jsx-a11y": "^3.0.2",
+    "eslint-plugin-react": "^6.8.0",
     "expect": "^1.20.1",
     "express": "^4.14.0",
     "extract-text-webpack-plugin": "^1.0.1",
@@ -73,26 +73,26 @@
     "karma-mocha": "^1.3.0",
     "karma-phantomjs-launcher": "^1.0.0",
     "karma-webpack": "^1.8.0",
-    "lint-staged": "^3.2.0",
-    "mocha": "^3.1.2",
-    "node-sass": "^3.13.0",
-    "phantomjs-prebuilt": "^2.1.7",
-    "postcss-loader": "^1.1.1",
-    "pre-commit": "^1.1.3",
-    "react": "^15.4.0",
-    "react-addons-css-transition-group": "^15.4.0",
-    "react-addons-test-utils": "^15.4.0",
-    "react-dom": "^15.4.0",
+    "lint-staged": "^3.2.3",
+    "mocha": "^3.2.0",
+    "node-sass": "^4.0.0",
+    "phantomjs-prebuilt": "^2.1.14",
+    "postcss-loader": "^1.2.1",
+    "pre-commit": "^1.2.2",
+    "react": "^15.4.1",
+    "react-addons-css-transition-group": "^15.4.1",
+    "react-addons-test-utils": "^15.4.1",
+    "react-dom": "^15.4.1",
     "react-transform-catch-errors": "^1.0.2",
     "react-transform-hmr": "^1.0.4",
     "redbox-react": "^1.3.2",
     "rimraf": "^2.5.2",
     "sass-lint": "^1.10.2",
-    "sass-loader": "^4.0.0",
+    "sass-loader": "^4.1.0",
     "sinon": "^2.0.0-pre.2",
     "style-loader": "^0.13.1",
-    "webpack": "^1.13.0",
-    "webpack-dev-middleware": "^1.8.4",
+    "webpack": "^1.14.0",
+    "webpack-dev-middleware": "^1.9.0",
     "webpack-hot-middleware": "^2.13.0"
   },
   "scripts": {
diff --git a/yarn.lock b/yarn.lock
index 535934a96..0d678ef7a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -240,7 +240,7 @@ asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
 
-autoprefixer@^6.3.1, autoprefixer@^6.5.1:
+autoprefixer@^6.3.1:
   version "6.5.3"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.5.3.tgz#2d853af66d04449fcf50db3066279ab54c3e4b01"
   dependencies:
@@ -251,6 +251,17 @@ autoprefixer@^6.3.1, autoprefixer@^6.5.1:
     postcss "^5.2.5"
     postcss-value-parser "^3.2.3"
 
+autoprefixer@^6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.5.4.tgz#1386eb6708ccff36aefff70adc694ecfd60af1b0"
+  dependencies:
+    browserslist "~1.4.0"
+    caniuse-db "^1.0.30000597"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    postcss "^5.2.6"
+    postcss-value-parser "^3.2.3"
+
 aws-sign2@~0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
@@ -288,7 +299,15 @@ babel-code-frame@^6.11.0, babel-code-frame@^6.16.0:
     esutils "^2.0.2"
     js-tokens "^2.0.0"
 
-babel-core@^6.18.0, babel-core@^6.18.2:
+babel-code-frame@^6.20.0:
+  version "6.20.0"
+  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.20.0.tgz#b968f839090f9a8bc6d41938fb96cb84f7387b26"
+  dependencies:
+    chalk "^1.1.0"
+    esutils "^2.0.2"
+    js-tokens "^2.0.0"
+
+babel-core@^6.18.0:
   version "6.18.2"
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.18.2.tgz#d8bb14dd6986fa4f3566a26ceda3964fa0e04e5b"
   dependencies:
@@ -312,6 +331,30 @@ babel-core@^6.18.0, babel-core@^6.18.2:
     slash "^1.0.0"
     source-map "^0.5.0"
 
+babel-core@^6.21.0:
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.21.0.tgz#75525480c21c803f826ef3867d22c19f080a3724"
+  dependencies:
+    babel-code-frame "^6.20.0"
+    babel-generator "^6.21.0"
+    babel-helpers "^6.16.0"
+    babel-messages "^6.8.0"
+    babel-register "^6.18.0"
+    babel-runtime "^6.20.0"
+    babel-template "^6.16.0"
+    babel-traverse "^6.21.0"
+    babel-types "^6.21.0"
+    babylon "^6.11.0"
+    convert-source-map "^1.1.0"
+    debug "^2.1.1"
+    json5 "^0.5.0"
+    lodash "^4.2.0"
+    minimatch "^3.0.2"
+    path-is-absolute "^1.0.0"
+    private "^0.1.6"
+    slash "^1.0.0"
+    source-map "^0.5.0"
+
 babel-eslint@^7.1.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-7.1.1.tgz#8a6a884f085aa7060af69cfc77341c2f99370fb2"
@@ -334,6 +377,18 @@ babel-generator@^6.18.0:
     lodash "^4.2.0"
     source-map "^0.5.0"
 
+babel-generator@^6.21.0:
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.21.0.tgz#605f1269c489a1c75deeca7ea16d43d4656c8494"
+  dependencies:
+    babel-messages "^6.8.0"
+    babel-runtime "^6.20.0"
+    babel-types "^6.21.0"
+    detect-indent "^4.0.0"
+    jsesc "^1.3.0"
+    lodash "^4.2.0"
+    source-map "^0.5.0"
+
 babel-helper-bindify-decorators@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-helper-bindify-decorators/-/babel-helper-bindify-decorators-6.18.0.tgz#fc00c573676a6e702fffa00019580892ec8780a5"
@@ -461,9 +516,9 @@ babel-helpers@^6.16.0:
     babel-runtime "^6.0.0"
     babel-template "^6.16.0"
 
-babel-loader@^6.2.4:
-  version "6.2.8"
-  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-6.2.8.tgz#30d7183aef60afc140b36443676b7acb4c12ac9c"
+babel-loader@^6.2.10:
+  version "6.2.10"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-6.2.10.tgz#adefc2b242320cd5d15e65b31cea0e8b1b02d4b0"
   dependencies:
     find-cache-dir "^0.1.1"
     loader-utils "^0.2.11"
@@ -850,6 +905,14 @@ babel-polyfill@^6.16.0:
     core-js "^2.4.0"
     regenerator-runtime "^0.9.5"
 
+babel-polyfill@^6.20.0:
+  version "6.20.0"
+  resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.20.0.tgz#de4a371006139e20990aac0be367d398331204e7"
+  dependencies:
+    babel-runtime "^6.20.0"
+    core-js "^2.4.0"
+    regenerator-runtime "^0.10.0"
+
 babel-preset-es2015@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-preset-es2015/-/babel-preset-es2015-6.18.0.tgz#b8c70df84ec948c43dcf2bf770e988eb7da88312"
@@ -945,6 +1008,13 @@ babel-runtime@^6.0.0, babel-runtime@^6.11.6, babel-runtime@^6.9.0, babel-runtime
     core-js "^2.4.0"
     regenerator-runtime "^0.9.5"
 
+babel-runtime@^6.20.0:
+  version "6.20.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.20.0.tgz#87300bdcf4cd770f09bf0048c64204e17806d16f"
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.10.0"
+
 babel-template@^6.14.0, babel-template@^6.15.0, babel-template@^6.16.0, babel-template@^6.8.0:
   version "6.16.0"
   resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.16.0.tgz#e149dd1a9f03a35f817ddbc4d0481988e7ebc8ca"
@@ -969,6 +1039,20 @@ babel-traverse@^6.15.0, babel-traverse@^6.16.0, babel-traverse@^6.18.0:
     invariant "^2.2.0"
     lodash "^4.2.0"
 
+babel-traverse@^6.21.0:
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.21.0.tgz#69c6365804f1a4f69eb1213f85b00a818b8c21ad"
+  dependencies:
+    babel-code-frame "^6.20.0"
+    babel-messages "^6.8.0"
+    babel-runtime "^6.20.0"
+    babel-types "^6.21.0"
+    babylon "^6.11.0"
+    debug "^2.2.0"
+    globals "^9.0.0"
+    invariant "^2.2.0"
+    lodash "^4.2.0"
+
 babel-types@^6.13.0, babel-types@^6.15.0, babel-types@^6.16.0, babel-types@^6.18.0, babel-types@^6.8.0, babel-types@^6.9.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.18.0.tgz#1f7d5a73474c59eb9151b2417bbff4e4fce7c3f8"
@@ -978,6 +1062,15 @@ babel-types@^6.13.0, babel-types@^6.15.0, babel-types@^6.16.0, babel-types@^6.18
     lodash "^4.2.0"
     to-fast-properties "^1.0.1"
 
+babel-types@^6.21.0:
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.21.0.tgz#314b92168891ef6d3806b7f7a917fdf87c11a4b2"
+  dependencies:
+    babel-runtime "^6.20.0"
+    esutils "^2.0.2"
+    lodash "^4.2.0"
+    to-fast-properties "^1.0.1"
+
 babylon@^6.11.0, babylon@^6.13.0:
   version "6.13.1"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.13.1.tgz#adca350e088f0467647157652bafead6ddb8dfdb"
@@ -1104,6 +1197,12 @@ browser-stdout@1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/browser-stdout/-/browser-stdout-1.3.0.tgz#f351d32969d32fa5d7a5567154263d928ae3bd1f"
 
+browserify-aes@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-0.4.0.tgz#067149b668df31c4b58533e02d01e806d8608e2c"
+  dependencies:
+    inherits "^2.0.1"
+
 browserify-aes@^1.0.0, browserify-aes@^1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.0.6.tgz#5e7725dbdef1fd5930d4ebab48567ce451c48a0a"
@@ -1149,7 +1248,7 @@ browserify-sign@^4.0.0:
     inherits "^2.0.1"
     parse-asn1 "^5.0.0"
 
-browserify-zlib@~0.1.4:
+browserify-zlib@^0.1.4, browserify-zlib@~0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.1.4.tgz#bb35f8a519f600e0fa6b8485241c979d0141fb2d"
   dependencies:
@@ -1181,6 +1280,10 @@ builtin-modules@^1.0.0, builtin-modules@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
 
+builtin-status-codes@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-2.0.0.tgz#6f22003baacf003ccd287afe6872151fddc58579"
+
 bytes@2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-2.4.0.tgz#7d97196f9d5baf7f6935e25985549edd2a6c2339"
@@ -1222,6 +1325,10 @@ caniuse-db@^1.0.30000539, caniuse-db@^1.0.30000578:
   version "1.0.30000584"
   resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000584.tgz#cfbce897a48145fa73f96d893025581e838648c4"
 
+caniuse-db@^1.0.30000597:
+  version "1.0.30000597"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000597.tgz#b52e6cbe9dc83669affb98501629feaee1af6588"
+
 caseless@~0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.11.0.tgz#715b96ea9841593cc33067923f5ec60ebda4f7d7"
@@ -1438,10 +1545,6 @@ console-control-strings@^1.0.0, console-control-strings@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
 
-constants-browserify@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-0.0.1.tgz#92577db527ba6c4cf0a4568d84bc031f441e21f2"
-
 constants-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
@@ -1552,20 +1655,6 @@ cross-env@^3.1.3:
   dependencies:
     cross-spawn "^3.0.1"
 
-cross-spawn-async@^2.0.0:
-  version "2.2.5"
-  resolved "https://registry.yarnpkg.com/cross-spawn-async/-/cross-spawn-async-2.2.5.tgz#845ff0c0834a3ded9d160daca6d390906bb288cc"
-  dependencies:
-    lru-cache "^4.0.0"
-    which "^1.2.8"
-
-cross-spawn@2.0.x:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-2.0.1.tgz#ab6fd893a099759d9b85220e3a64397de946b0f6"
-  dependencies:
-    cross-spawn-async "^2.0.0"
-    spawn-sync "1.0.13"
-
 cross-spawn@^3.0.0, cross-spawn@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-3.0.1.tgz#1256037ecb9f0c5f79e3d6ef135e30770184b982"
@@ -1580,12 +1669,29 @@ cross-spawn@^4.0.0:
     lru-cache "^4.0.1"
     which "^1.2.9"
 
+cross-spawn@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.0.1.tgz#a3bbb302db2297cbea3c04edf36941f4613aa399"
+  dependencies:
+    lru-cache "^4.0.1"
+    shebang-command "^1.2.0"
+    which "^1.2.9"
+
 cryptiles@2.x.x:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-2.0.5.tgz#3bdfecdc608147c1c67202fa291e7dca59eaa3b8"
   dependencies:
     boom "2.x.x"
 
+crypto-browserify@3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.3.0.tgz#b9fc75bb4a0ed61dcf1cd5dae96eb30c9c3e506c"
+  dependencies:
+    browserify-aes "0.4.0"
+    pbkdf2-compat "2.0.1"
+    ripemd160 "0.2.0"
+    sha.js "2.2.6"
+
 crypto-browserify@^3.11.0:
   version "3.11.0"
   resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.11.0.tgz#3652a0906ab9b2a7e0c3ce66a408e957a2485522"
@@ -1601,21 +1707,13 @@ crypto-browserify@^3.11.0:
     public-encrypt "^4.0.0"
     randombytes "^2.0.0"
 
-crypto-browserify@~3.2.6:
-  version "3.2.8"
-  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.2.8.tgz#b9b11dbe6d9651dd882a01e6cc467df718ecf189"
-  dependencies:
-    pbkdf2-compat "2.0.1"
-    ripemd160 "0.2.0"
-    sha.js "2.2.6"
-
 css-color-names@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
 
-css-loader@^0.26.0:
-  version "0.26.0"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.26.0.tgz#160d378f5b8e0fd4ff6daf4f3580e2219b33025f"
+css-loader@^0.26.1:
+  version "0.26.1"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.26.1.tgz#2ba7f20131b93597496b3e9bb500785a49cd29ea"
   dependencies:
     babel-code-frame "^6.11.0"
     css-selector-tokenizer "^0.7.0"
@@ -2045,19 +2143,20 @@ eslint-import-resolver-node@^0.2.0:
     object-assign "^4.0.1"
     resolve "^1.1.6"
 
-eslint-import-resolver-webpack@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/eslint-import-resolver-webpack/-/eslint-import-resolver-webpack-0.7.0.tgz#25c755b593f2533be69235bd6c65aa7c5285fb68"
+eslint-import-resolver-webpack@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-webpack/-/eslint-import-resolver-webpack-0.8.0.tgz#025b5887bd26f27489d1a33b7d7b40c2c14d9b83"
   dependencies:
     array-find "^1.0.0"
     debug "^2.2.0"
     enhanced-resolve "~0.9.0"
     find-root "^0.1.1"
+    has "^1.0.1"
     interpret "^1.0.0"
     is-absolute "^0.2.3"
     lodash.get "^3.7.0"
     node-libs-browser "^1.0.0"
-    resolve "^1.1.7"
+    resolve "^1.2.0"
     semver "^5.3.0"
 
 eslint-module-utils@^2.0.0:
@@ -2086,20 +2185,20 @@ eslint-plugin-import@^2.2.0:
     minimatch "^3.0.3"
     pkg-up "^1.0.0"
 
-eslint-plugin-jsx-a11y@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-3.0.1.tgz#38f22742a5752a8e72db693d7cd86e13a357da25"
+eslint-plugin-jsx-a11y@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-3.0.2.tgz#9f0eabcafde3d2a2600d96a66adb90d099e841fe"
   dependencies:
     damerau-levenshtein "^1.0.0"
     jsx-ast-utils "^1.0.0"
     object-assign "^4.0.1"
 
-eslint-plugin-react@^6.7.1:
-  version "6.7.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-6.7.1.tgz#1af96aea545856825157d97c1b50d5a8fb64a5a7"
+eslint-plugin-react@^6.8.0:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-6.8.0.tgz#741ab5438a094532e5ce1bbb935d6832356f492d"
   dependencies:
     doctrine "^1.2.2"
-    jsx-ast-utils "^1.3.3"
+    jsx-ast-utils "^1.3.4"
 
 eslint@^2.7.0:
   version "2.13.1"
@@ -2139,9 +2238,9 @@ eslint@^2.7.0:
     text-table "~0.2.0"
     user-home "^2.0.0"
 
-eslint@^3.10.2:
-  version "3.10.2"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-3.10.2.tgz#c9a10e8bf6e9d65651204778c503341f1eac3ce7"
+eslint@^3.12.2:
+  version "3.12.2"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-3.12.2.tgz#6be5a9aa29658252abd7f91e9132bab1f26f3c34"
   dependencies:
     babel-code-frame "^6.16.0"
     chalk "^1.1.3"
@@ -2154,7 +2253,7 @@ eslint@^3.10.2:
     esutils "^2.0.2"
     file-entry-cache "^2.0.0"
     glob "^7.0.3"
-    globals "^9.2.0"
+    globals "^9.14.0"
     ignore "^3.2.0"
     imurmurhash "^0.1.4"
     inquirer "^0.12.0"
@@ -2510,7 +2609,7 @@ front-matter@2.1.0:
   dependencies:
     js-yaml "^3.4.6"
 
-fs-extra@^1.0.0:
+fs-extra@^1.0.0, fs-extra@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-1.0.0.tgz#cd3ce5f7e7cb6145883fcae3191e9877f8587950"
   dependencies:
@@ -2681,6 +2780,10 @@ globals@^9.0.0, globals@^9.2.0:
   version "9.12.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.12.0.tgz#992ce90828c3a55fa8f16fada177adb64664cf9d"
 
+globals@^9.14.0:
+  version "9.14.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-9.14.0.tgz#8859936af0038741263053b39d0e76ca241e4034"
+
 globby@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-5.0.0.tgz#ebd84667ca0dbb330b99bcfc68eac2bc54370e0d"
@@ -2842,10 +2945,6 @@ http-signature@~1.1.0:
     jsprim "^1.2.2"
     sshpk "^1.7.0"
 
-https-browserify@0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.0.tgz#b3ffdfe734b2a3d4a9efd58e8654c91fce86eafd"
-
 https-browserify@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
@@ -3307,7 +3406,7 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.3.6"
 
-jsx-ast-utils@^1.0.0, jsx-ast-utils@^1.3.3:
+jsx-ast-utils@^1.0.0, jsx-ast-utils@^1.3.4:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-1.3.4.tgz#0257ed1cc4b1e65b39d7d9940f9fb4f20f7ba0a9"
   dependencies:
@@ -3407,22 +3506,22 @@ levn@^0.3.0, levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
-lint-staged@^3.2.0:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-3.2.1.tgz#c7b7bcec417f6def1f6430e401fc881f0298d97a"
+lint-staged@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-3.2.3.tgz#74a72945b79ceb63ca18b984b02dc176045285cf"
   dependencies:
     app-root-path "^2.0.0"
     cosmiconfig "^1.1.0"
     execa "^0.5.0"
-    listr "^0.7.0"
+    listr "^0.9.0"
     minimatch "^3.0.0"
     npm-which "^3.0.1"
     staged-git-files "0.0.4"
     which "^1.2.11"
 
-listr-silent-renderer@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/listr-silent-renderer/-/listr-silent-renderer-1.0.0.tgz#c097f02747d139f07852abe418a2d6e18c83f7ee"
+listr-silent-renderer@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/listr-silent-renderer/-/listr-silent-renderer-1.1.1.tgz#924b5a3757153770bf1a8e3fbf74b8bbf3f9242e"
 
 listr-update-renderer@^0.1.1:
   version "0.1.2"
@@ -3437,17 +3536,17 @@ listr-update-renderer@^0.1.1:
     log-update "^1.0.2"
     strip-ansi "^3.0.1"
 
-listr-verbose-renderer@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/listr-verbose-renderer/-/listr-verbose-renderer-0.1.0.tgz#7b6c67b31e4e12e5e3127a726a495869f6af4ff8"
+listr-verbose-renderer@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/listr-verbose-renderer/-/listr-verbose-renderer-0.2.1.tgz#99adf0c5346a28a5947e53140e9654763982b1fa"
   dependencies:
     chalk "^1.1.3"
     cli-cursor "^1.0.2"
     figures "^1.7.0"
 
-listr@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/listr/-/listr-0.7.0.tgz#b94ba2a5072daad8bff6d3984b50afc590c3d8e5"
+listr@^0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/listr/-/listr-0.9.0.tgz#0ee78c5d95499f26042abe3334e10cacc9e81fcf"
   dependencies:
     chalk "^1.1.3"
     cli-truncate "^0.2.1"
@@ -3455,9 +3554,9 @@ listr@^0.7.0:
     indent-string "^2.1.0"
     is-promise "^2.1.0"
     is-stream "^1.1.0"
-    listr-silent-renderer "^1.0.0"
+    listr-silent-renderer "^1.1.1"
     listr-update-renderer "^0.1.1"
-    listr-verbose-renderer "^0.1.0"
+    listr-verbose-renderer "^0.2.1"
     log-symbols "^1.0.2"
     log-update "^1.0.2"
     ora "^0.2.3"
@@ -3564,6 +3663,10 @@ lodash.isarray@^3.0.0:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
 
+lodash.isarray@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-4.0.0.tgz#2aca496b28c4ca6d726715313590c02e6ea34403"
+
 lodash.kebabcase@^4.0.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36"
@@ -3576,6 +3679,10 @@ lodash.keys@^3.0.0:
     lodash.isarguments "^3.0.0"
     lodash.isarray "^3.0.0"
 
+lodash.mergewith@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz#150cf0a16791f5903b8891eab154609274bdea55"
+
 lodash.pickby@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.pickby/-/lodash.pickby-4.6.0.tgz#7dea21d8c18d7703a27c704c15d3b84a67e33aff"
@@ -3633,7 +3740,7 @@ lru-cache@2.2.x:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.2.4.tgz#6c658619becf14031d0d0b594b16042ce4dc063d"
 
-lru-cache@^4.0.0, lru-cache@^4.0.1:
+lru-cache@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.0.1.tgz#1343955edaf2e37d9b9e7ee7241e27c4b9fb72be"
   dependencies:
@@ -3669,6 +3776,13 @@ memory-fs@~0.3.0:
     errno "^0.1.3"
     readable-stream "^2.0.1"
 
+memory-fs@~0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
+  dependencies:
+    errno "^0.1.3"
+    readable-stream "^2.0.1"
+
 meow@^3.3.0, meow@^3.7.0:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
@@ -3785,9 +3899,9 @@ mkdirp@0.5.1, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkd
   dependencies:
     minimist "0.0.8"
 
-mocha@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/mocha/-/mocha-3.1.2.tgz#51f93b432bf7e1b175ffc22883ccd0be32dba6b5"
+mocha@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/mocha/-/mocha-3.2.0.tgz#7dc4f45e5088075171a68896814e6ae9eb7a85e3"
   dependencies:
     browser-stdout "1.3.0"
     commander "2.9.0"
@@ -3851,32 +3965,32 @@ node-gyp@^3.3.1:
     tar "^2.0.0"
     which "1"
 
-node-libs-browser@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-0.6.0.tgz#244806d44d319e048bc8607b5cc4eaf9a29d2e3c"
+node-libs-browser@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-0.7.0.tgz#3e272c0819e308935e26674408d7af0e1491b83b"
   dependencies:
     assert "^1.1.1"
-    browserify-zlib "~0.1.4"
+    browserify-zlib "^0.1.4"
     buffer "^4.9.0"
     console-browserify "^1.1.0"
-    constants-browserify "0.0.1"
-    crypto-browserify "~3.2.6"
+    constants-browserify "^1.0.0"
+    crypto-browserify "3.3.0"
     domain-browser "^1.1.1"
     events "^1.0.0"
-    http-browserify "^1.3.2"
-    https-browserify "0.0.0"
-    os-browserify "~0.1.2"
+    https-browserify "0.0.1"
+    os-browserify "^0.2.0"
     path-browserify "0.0.0"
     process "^0.11.0"
     punycode "^1.2.4"
-    querystring-es3 "~0.2.0"
-    readable-stream "^1.1.13"
-    stream-browserify "^1.0.0"
-    string_decoder "~0.10.25"
-    timers-browserify "^1.0.1"
+    querystring-es3 "^0.2.0"
+    readable-stream "^2.0.5"
+    stream-browserify "^2.0.1"
+    stream-http "^2.3.1"
+    string_decoder "^0.10.25"
+    timers-browserify "^2.0.2"
     tty-browserify "0.0.0"
-    url "~0.10.1"
-    util "~0.10.3"
+    url "^0.11.0"
+    util "^0.10.3"
     vm-browserify "0.0.4"
 
 node-libs-browser@^1.0.0:
@@ -3921,9 +4035,9 @@ node-pre-gyp@^0.6.29:
     tar "~2.2.1"
     tar-pack "~3.3.0"
 
-node-sass@^3.13.0:
-  version "3.13.0"
-  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-3.13.0.tgz#d08b95bdebf40941571bd2c16a9334b980f8924f"
+node-sass@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.0.0.tgz#3208301ad5a6096de227f3fc4c3ce682b9816afc"
   dependencies:
     async-foreach "^0.1.3"
     chalk "^1.1.1"
@@ -3934,6 +4048,8 @@ node-sass@^3.13.0:
     in-publish "^2.0.0"
     lodash.assign "^4.2.0"
     lodash.clonedeep "^4.3.2"
+    lodash.isarray "^4.0.0"
+    lodash.mergewith "^4.6.0"
     meow "^3.7.0"
     mkdirp "^0.5.1"
     nan "^2.3.2"
@@ -4117,11 +4233,7 @@ ora@^0.2.3:
     cli-spinners "^0.1.2"
     object-assign "^4.0.1"
 
-os-browserify@~0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.1.2.tgz#49ca0293e0b19590a5f5de10c7f265a617d8fe54"
-
-os-browserify@~0.2.0:
+os-browserify@^0.2.0, os-browserify@~0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.2.1.tgz#63fc4ccee5d2d7763d26bbf8601078e6c2e0044f"
 
@@ -4263,6 +4375,20 @@ pend@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
 
+phantomjs-prebuilt@^2.1.14:
+  version "2.1.14"
+  resolved "https://registry.yarnpkg.com/phantomjs-prebuilt/-/phantomjs-prebuilt-2.1.14.tgz#d53d311fcfb7d1d08ddb24014558f1188c516da0"
+  dependencies:
+    es6-promise "~4.0.3"
+    extract-zip "~1.5.0"
+    fs-extra "~1.0.0"
+    hasha "~2.2.0"
+    kew "~0.7.0"
+    progress "~1.1.8"
+    request "~2.79.0"
+    request-progress "~2.0.1"
+    which "~1.2.10"
+
 phantomjs-prebuilt@^2.1.7:
   version "2.1.13"
   resolved "https://registry.yarnpkg.com/phantomjs-prebuilt/-/phantomjs-prebuilt-2.1.13.tgz#66556ad9e965d893ca5a7dc9e763df7e8697f76d"
@@ -4391,13 +4517,13 @@ postcss-load-plugins@^2.0.0:
     cosmiconfig "^2.1.0"
     object-assign "^4.1.0"
 
-postcss-loader@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-1.1.1.tgz#cbc4cb75fbdcfa6c9fc3c7ec342ae04064f1c8fb"
+postcss-loader@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-1.2.1.tgz#8809ab184a9f903a01f660385f2e296ff563d22c"
   dependencies:
     loader-utils "^0.2.16"
     object-assign "^4.1.0"
-    postcss "^5.2.5"
+    postcss "^5.2.6"
     postcss-load-config "^1.0.0"
 
 postcss-merge-idents@^2.1.5:
@@ -4571,15 +4697,21 @@ postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0
     source-map "^0.5.6"
     supports-color "^3.1.2"
 
-postinstall-build@^2.0.0:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/postinstall-build/-/postinstall-build-2.1.3.tgz#9d1886ab2949619f4c206afbe1aea95debe45c94"
+postcss@^5.2.6:
+  version "5.2.6"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.6.tgz#a252cd67cd52585035f17e9ad12b35137a7bdd9e"
+  dependencies:
+    chalk "^1.1.3"
+    js-base64 "^2.1.9"
+    source-map "^0.5.6"
+    supports-color "^3.1.2"
 
-pre-commit@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/pre-commit/-/pre-commit-1.1.3.tgz#6d5ed90740472072958c711a15f676aa2c231377"
+pre-commit@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/pre-commit/-/pre-commit-1.2.2.tgz#dbcee0ee9de7235e57f79c56d7ce94641a69eec6"
   dependencies:
-    cross-spawn "2.0.x"
+    cross-spawn "^5.0.1"
+    spawn-sync "^1.0.15"
     which "1.2.x"
 
 prelude-ls@~1.1.2:
@@ -4676,7 +4808,7 @@ query-string@^4.1.0:
     object-assign "^4.1.0"
     strict-uri-encode "^1.0.0"
 
-querystring-es3@~0.2.0:
+querystring-es3@^0.2.0, querystring-es3@~0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
 
@@ -4716,17 +4848,17 @@ rc@~1.1.6:
     minimist "^1.2.0"
     strip-json-comments "~1.0.4"
 
-react-addons-css-transition-group@^15.4.0:
-  version "15.4.0"
-  resolved "https://registry.yarnpkg.com/react-addons-css-transition-group/-/react-addons-css-transition-group-15.4.0.tgz#410aa74533629974de33cfeaa85945066ff181cd"
+react-addons-css-transition-group@^15.4.1:
+  version "15.4.1"
+  resolved "https://registry.yarnpkg.com/react-addons-css-transition-group/-/react-addons-css-transition-group-15.4.1.tgz#60b133fac5116e4009e56ab0674dc2ddcc1a18f6"
 
-react-addons-test-utils@^15.4.0:
-  version "15.4.0"
-  resolved "https://registry.yarnpkg.com/react-addons-test-utils/-/react-addons-test-utils-15.4.0.tgz#bd326904916b80de6a466248ef52cdfc1799e963"
+react-addons-test-utils@^15.4.1:
+  version "15.4.1"
+  resolved "https://registry.yarnpkg.com/react-addons-test-utils/-/react-addons-test-utils-15.4.1.tgz#1e4caab151bf27cce26df5f9cb714f4fd8359ae1"
 
-react-css-themr@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/react-css-themr/-/react-css-themr-1.6.0.tgz#334634dc5fb8ed0c93b9696289a6a29635ec8b57"
+react-css-themr@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/react-css-themr/-/react-css-themr-1.7.0.tgz#dd8b04027e3967ed4ecfdd87922d215f4bc55be7"
   dependencies:
     invariant "^2.2.1"
 
@@ -4734,9 +4866,9 @@ react-deep-force-update@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-1.0.1.tgz#f911b5be1d2a6fe387507dd6e9a767aa2924b4c7"
 
-react-dom@^15.4.0:
-  version "15.4.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.4.0.tgz#6a97a69000966570db48c746bc4b7b0ca50d1534"
+react-dom@^15.4.1:
+  version "15.4.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.4.1.tgz#d54c913261aaedb17adc20410d029dcc18a1344a"
   dependencies:
     fbjs "^0.8.1"
     loose-envify "^1.1.0"
@@ -4760,9 +4892,9 @@ react-transform-hmr@^1.0.4:
     global "^4.3.0"
     react-proxy "^1.1.7"
 
-react@^15.4.0:
-  version "15.4.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-15.4.0.tgz#736c1c7c542e8088127106e1f450b010f86d172b"
+react@^15.4.1:
+  version "15.4.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-15.4.1.tgz#498e918602677a3983cd0fd206dfe700389a0dd6"
   dependencies:
     fbjs "^0.8.4"
     loose-envify "^1.1.0"
@@ -4783,16 +4915,19 @@ read-pkg@^1.0.0:
     normalize-package-data "^2.3.2"
     path-type "^1.0.0"
 
-readable-stream@^1.0.27-1, readable-stream@^1.1.13:
-  version "1.1.14"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"
+"readable-stream@^2.0.0 || ^1.1.13", readable-stream@^2.0.5, readable-stream@^2.1.0, readable-stream@~2.1.4:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.1.5.tgz#66fa8b720e1438b364681f2ad1a63c618448c9d0"
   dependencies:
+    buffer-shims "^1.0.0"
     core-util-is "~1.0.0"
     inherits "~2.0.1"
-    isarray "0.0.1"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
     string_decoder "~0.10.x"
+    util-deprecate "~1.0.1"
 
-"readable-stream@^2.0.0 || ^1.1.13", readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@~2.0.0, readable-stream@~2.0.5:
+readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@~2.0.0, readable-stream@~2.0.5:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.0.6.tgz#8f90341e68a53ccc928788dacfcd11b36eb9b78e"
   dependencies:
@@ -4812,18 +4947,6 @@ readable-stream@~1.0.2:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
-readable-stream@~2.1.4:
-  version "2.1.5"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.1.5.tgz#66fa8b720e1438b364681f2ad1a63c618448c9d0"
-  dependencies:
-    buffer-shims "^1.0.0"
-    core-util-is "~1.0.0"
-    inherits "~2.0.1"
-    isarray "~1.0.0"
-    process-nextick-args "~1.0.6"
-    string_decoder "~0.10.x"
-    util-deprecate "~1.0.1"
-
 readdirp@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.1.0.tgz#4ed0ad060df3073300c48440373f72d1cc642d78"
@@ -4879,6 +5002,10 @@ regenerate@^1.2.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.1.tgz#0300203a5d2fdcf89116dce84275d011f5903f33"
 
+regenerator-runtime@^0.10.0:
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.1.tgz#257f41961ce44558b18f7814af48c17559f9faeb"
+
 regenerator-runtime@^0.9.5:
   version "0.9.5"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.9.5.tgz#403d6d40a4bdff9c330dd9392dcbb2d9a8bba1fc"
@@ -4995,6 +5122,31 @@ request@~2.74.0:
     tough-cookie "~2.3.0"
     tunnel-agent "~0.4.1"
 
+request@~2.79.0:
+  version "2.79.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.79.0.tgz#4dfe5bf6be8b8cdc37fcf93e04b65577722710de"
+  dependencies:
+    aws-sign2 "~0.6.0"
+    aws4 "^1.2.1"
+    caseless "~0.11.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~2.1.1"
+    har-validator "~2.0.6"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    oauth-sign "~0.8.1"
+    qs "~6.3.0"
+    stringstream "~0.0.4"
+    tough-cookie "~2.3.0"
+    tunnel-agent "~0.4.1"
+    uuid "^3.0.0"
+
 require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
@@ -5026,6 +5178,10 @@ resolve@^1.1.6, resolve@^1.1.7:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
 
+resolve@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.2.0.tgz#9589c3f2f6149d1417a40becc1663db6ec6bc26c"
+
 restore-cursor@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-1.0.1.tgz#34661f46886327fed2991479152252df92daa541"
@@ -5107,9 +5263,9 @@ sass-lint@^1.10.2:
     path-is-absolute "^1.0.0"
     util "^0.10.3"
 
-sass-loader@^4.0.0:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-4.0.2.tgz#a616eb770366543e64f547c8630f39c4da75f15d"
+sass-loader@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-4.1.0.tgz#fd8604c5bf90001b173bb27540e8f2f5ed64602b"
   dependencies:
     async "^2.0.1"
     loader-utils "^0.2.15"
@@ -5119,14 +5275,14 @@ sax@~1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.1.tgz#7b8e656190b228e81a66aea748480d828cd2d37a"
 
-"semver@2 || 3 || 4 || 5", "semver@2.x || 3.x || 4 || 5", semver@^5.3.0, semver@~5.3.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
-
-semver@~4.3.3:
+"semver@2 || 3 || 4 || 5", semver@~4.3.3:
   version "4.3.6"
   resolved "https://registry.yarnpkg.com/semver/-/semver-4.3.6.tgz#300bc6e0e86374f7ba61068b5b1ecd57fc6532da"
 
+"semver@2.x || 3.x || 4 || 5", semver@^5.3.0, semver@~5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
+
 send@0.14.1:
   version "0.14.1"
   resolved "https://registry.yarnpkg.com/send/-/send-0.14.1.tgz#a954984325392f51532a7760760e459598c89f7a"
@@ -5162,6 +5318,10 @@ set-immediate-shim@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
 
+setimmediate@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+
 setprototypeof@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.0.1.tgz#52009b27888c4dc48f591949c0a8275834c1ca7e"
@@ -5176,6 +5336,16 @@ sha.js@^2.3.6:
   dependencies:
     inherits "^2.0.1"
 
+shebang-command@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
+  dependencies:
+    shebang-regex "^1.0.0"
+
+shebang-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
+
 shell-quote@^1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.6.1.tgz#f4781949cce402697127430ea3b3c5476f481767"
@@ -5288,6 +5458,10 @@ source-list-map@^0.1.4, source-list-map@~0.1.0:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.6.tgz#e1e6f94f0b40c4d28dcf8f5b8766e0e45636877f"
 
+source-list-map@~0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.7.tgz#d4b5ce2a46535c72c7e8527c71a77d250618172e"
+
 source-map-support@^0.4.2:
   version "0.4.5"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.5.tgz#4438df4219e1b3c7feb674614b4c67f9722db1e4"
@@ -5310,9 +5484,9 @@ source-map@~0.4.1:
   dependencies:
     amdefine ">=0.0.4"
 
-spawn-sync@1.0.13:
-  version "1.0.13"
-  resolved "https://registry.yarnpkg.com/spawn-sync/-/spawn-sync-1.0.13.tgz#904091b9ad48a0f3afb0e84752154c01e82fd8d8"
+spawn-sync@^1.0.15:
+  version "1.0.15"
+  resolved "https://registry.yarnpkg.com/spawn-sync/-/spawn-sync-1.0.15.tgz#b00799557eb7fb0c8376c29d44e8a1ea67e57476"
   dependencies:
     concat-stream "^1.4.7"
     os-shim "^0.1.2"
@@ -5362,13 +5536,6 @@ staged-git-files@0.0.4:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.0.tgz#8e55758cb20e7682c1f4fce8dcab30bf01d1e07a"
 
-stream-browserify@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-1.0.0.tgz#bf9b4abfb42b274d751479e44e0ff2656b6f1193"
-  dependencies:
-    inherits "~2.0.1"
-    readable-stream "^1.0.27-1"
-
 stream-browserify@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db"
@@ -5376,6 +5543,16 @@ stream-browserify@^2.0.1:
     inherits "~2.0.1"
     readable-stream "^2.0.2"
 
+stream-http@^2.3.1:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.5.0.tgz#585eee513217ed98fe199817e7313b6f772a6802"
+  dependencies:
+    builtin-status-codes "^2.0.0"
+    inherits "^2.0.1"
+    readable-stream "^2.1.0"
+    to-arraybuffer "^1.0.0"
+    xtend "^4.0.0"
+
 stream-to-observable@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/stream-to-observable/-/stream-to-observable-0.1.0.tgz#45bf1d9f2d7dc09bed81f1c307c430e68b84cffe"
@@ -5399,7 +5576,7 @@ string-width@^2.0.0:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^3.0.0"
 
-string_decoder@~0.10.25, string_decoder@~0.10.x:
+string_decoder@^0.10.25, string_decoder@~0.10.25, string_decoder@~0.10.x:
   version "0.10.31"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
 
@@ -5533,6 +5710,12 @@ timers-browserify@^1.0.1:
   dependencies:
     process "~0.11.0"
 
+timers-browserify@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.2.tgz#ab4883cf597dcd50af211349a00fbca56ac86b86"
+  dependencies:
+    setimmediate "^1.0.4"
+
 tmatch@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/tmatch/-/tmatch-2.0.1.tgz#0c56246f33f30da1b8d3d72895abaf16660f38cf"
@@ -5547,6 +5730,10 @@ to-array@0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/to-array/-/to-array-0.1.4.tgz#17e6c11f73dd4f3d74cda7a4ff3238e9ad9bf890"
 
+to-arraybuffer@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
+
 to-fast-properties@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.2.tgz#f3f5c0c3ba7299a7ef99427e44633257ade43320"
@@ -5641,14 +5828,7 @@ unpipe@1.0.0, unpipe@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
 
-url@~0.10.1:
-  version "0.10.3"
-  resolved "https://registry.yarnpkg.com/url/-/url-0.10.3.tgz#021e4d9c7705f21bbf37d03ceb58767402774c64"
-  dependencies:
-    punycode "1.3.2"
-    querystring "0.2.0"
-
-url@~0.11.0:
+url@^0.11.0, url@~0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
   dependencies:
@@ -5689,6 +5869,10 @@ utils-merge@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.0.tgz#0294fb922bb9375153541c4f7096231f287c8af8"
 
+uuid@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.1.tgz#6544bba2dfda8c1cf17e629a3a305e2bb1fee6c1"
+
 v8flags@^2.0.10:
   version "2.0.11"
   resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-2.0.11.tgz#bca8f30f0d6d60612cc2c00641e6962d42ae6881"
@@ -5734,14 +5918,14 @@ watchpack@^0.2.1:
     chokidar "^1.0.0"
     graceful-fs "^4.1.2"
 
-webpack-core@~0.6.0:
-  version "0.6.8"
-  resolved "https://registry.yarnpkg.com/webpack-core/-/webpack-core-0.6.8.tgz#edf9135de00a6a3c26dd0f14b208af0aa4af8d0a"
+webpack-core@~0.6.9:
+  version "0.6.9"
+  resolved "https://registry.yarnpkg.com/webpack-core/-/webpack-core-0.6.9.tgz#fc571588c8558da77be9efb6debdc5a3b172bdc2"
   dependencies:
-    source-list-map "~0.1.0"
+    source-list-map "~0.1.7"
     source-map "~0.4.1"
 
-webpack-dev-middleware@^1.0.11, webpack-dev-middleware@^1.8.4:
+webpack-dev-middleware@^1.0.11:
   version "1.8.4"
   resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.8.4.tgz#e8765c9122887ce9e3abd4cc9c3eb31b61e0948d"
   dependencies:
@@ -5750,6 +5934,15 @@ webpack-dev-middleware@^1.0.11, webpack-dev-middleware@^1.8.4:
     path-is-absolute "^1.0.0"
     range-parser "^1.0.3"
 
+webpack-dev-middleware@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.9.0.tgz#a1c67a3dfd8a5c5d62740aa0babe61758b4c84aa"
+  dependencies:
+    memory-fs "~0.4.1"
+    mime "^1.3.4"
+    path-is-absolute "^1.0.0"
+    range-parser "^1.0.3"
+
 webpack-hot-middleware@^2.13.0:
   version "2.13.2"
   resolved "https://registry.yarnpkg.com/webpack-hot-middleware/-/webpack-hot-middleware-2.13.2.tgz#6500b15e6d4f1a9590f8df708183f4d2ac2c3e9e"
@@ -5766,9 +5959,9 @@ webpack-sources@^0.1.0:
     source-list-map "~0.1.0"
     source-map "~0.5.3"
 
-webpack@^1.13.0:
-  version "1.13.3"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-1.13.3.tgz#e79c46fe5a37c5ca70084ba0894c595cdcb42815"
+webpack@^1.14.0:
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-1.14.0.tgz#54f1ffb92051a328a5b2057d6ae33c289462c823"
   dependencies:
     acorn "^3.0.0"
     async "^1.3.0"
@@ -5778,13 +5971,13 @@ webpack@^1.13.0:
     loader-utils "^0.2.11"
     memory-fs "~0.3.0"
     mkdirp "~0.5.0"
-    node-libs-browser "^0.6.0"
+    node-libs-browser "^0.7.0"
     optimist "~0.6.0"
     supports-color "^3.1.0"
     tapable "~0.1.8"
     uglify-js "~2.7.3"
     watchpack "^0.2.1"
-    webpack-core "~0.6.0"
+    webpack-core "~0.6.9"
 
 whatwg-fetch@>=0.10.0:
   version "1.0.0"
@@ -5798,7 +5991,7 @@ which-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
 
-which@1, which@1.2.x, which@^1.2.10, which@^1.2.11, which@^1.2.8, which@^1.2.9, which@~1.2.10:
+which@1, which@1.2.x, which@^1.2.10, which@^1.2.11, which@^1.2.9, which@~1.2.10:
   version "1.2.12"
   resolved "https://registry.yarnpkg.com/which/-/which-1.2.12.tgz#de67b5e450269f194909ef23ece4ebe416fa1192"
   dependencies:

From f66c24bea20b26b7385b32b13f221cb11c1914e6 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 17 Dec 2016 19:30:35 +0100
Subject: [PATCH 0997/1024] Release 1.3.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 1f6cb5c21..b16c39424 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "react-toolbox",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "homepage": "http://www.react-toolbox.com/",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "main": "./lib",
   "author": {
     "name": "React Toolbox Team",

From 0116d5d753f0b2aa8f2a766f83c32c2fb4829a27 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 17 Dec 2016 21:56:34 +0100
Subject: [PATCH 0998/1024] Downgrade node-sass

---
 package.json |   2 +-
 yarn.lock    | 289 +++++++--------------------------------------------
 2 files changed, 38 insertions(+), 253 deletions(-)

diff --git a/package.json b/package.json
index b16c39424..6680216a6 100644
--- a/package.json
+++ b/package.json
@@ -75,7 +75,7 @@
     "karma-webpack": "^1.8.0",
     "lint-staged": "^3.2.3",
     "mocha": "^3.2.0",
-    "node-sass": "^4.0.0",
+    "node-sass": "^3.13.0",
     "phantomjs-prebuilt": "^2.1.14",
     "postcss-loader": "^1.2.1",
     "pre-commit": "^1.2.2",
diff --git a/yarn.lock b/yarn.lock
index 0d678ef7a..e7f2653bf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -240,18 +240,7 @@ asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
 
-autoprefixer@^6.3.1:
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.5.3.tgz#2d853af66d04449fcf50db3066279ab54c3e4b01"
-  dependencies:
-    browserslist "~1.4.0"
-    caniuse-db "^1.0.30000578"
-    normalize-range "^0.1.2"
-    num2fraction "^1.2.2"
-    postcss "^5.2.5"
-    postcss-value-parser "^3.2.3"
-
-autoprefixer@^6.5.4:
+autoprefixer@^6.3.1, autoprefixer@^6.5.4:
   version "6.5.4"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.5.4.tgz#1386eb6708ccff36aefff70adc694ecfd60af1b0"
   dependencies:
@@ -291,15 +280,7 @@ babel-cli@^6.18.0:
   optionalDependencies:
     chokidar "^1.0.0"
 
-babel-code-frame@^6.11.0, babel-code-frame@^6.16.0:
-  version "6.16.0"
-  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.16.0.tgz#f90e60da0862909d3ce098733b5d3987c97cb8de"
-  dependencies:
-    chalk "^1.1.0"
-    esutils "^2.0.2"
-    js-tokens "^2.0.0"
-
-babel-code-frame@^6.20.0:
+babel-code-frame@^6.11.0, babel-code-frame@^6.16.0, babel-code-frame@^6.20.0:
   version "6.20.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.20.0.tgz#b968f839090f9a8bc6d41938fb96cb84f7387b26"
   dependencies:
@@ -307,31 +288,7 @@ babel-code-frame@^6.20.0:
     esutils "^2.0.2"
     js-tokens "^2.0.0"
 
-babel-core@^6.18.0:
-  version "6.18.2"
-  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.18.2.tgz#d8bb14dd6986fa4f3566a26ceda3964fa0e04e5b"
-  dependencies:
-    babel-code-frame "^6.16.0"
-    babel-generator "^6.18.0"
-    babel-helpers "^6.16.0"
-    babel-messages "^6.8.0"
-    babel-register "^6.18.0"
-    babel-runtime "^6.9.1"
-    babel-template "^6.16.0"
-    babel-traverse "^6.18.0"
-    babel-types "^6.18.0"
-    babylon "^6.11.0"
-    convert-source-map "^1.1.0"
-    debug "^2.1.1"
-    json5 "^0.5.0"
-    lodash "^4.2.0"
-    minimatch "^3.0.2"
-    path-is-absolute "^1.0.0"
-    private "^0.1.6"
-    slash "^1.0.0"
-    source-map "^0.5.0"
-
-babel-core@^6.21.0:
+babel-core@^6.18.0, babel-core@^6.21.0:
   version "6.21.0"
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.21.0.tgz#75525480c21c803f826ef3867d22c19f080a3724"
   dependencies:
@@ -365,18 +322,6 @@ babel-eslint@^7.1.1:
     babylon "^6.13.0"
     lodash.pickby "^4.6.0"
 
-babel-generator@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.18.0.tgz#e4f104cb3063996d9850556a45aae4a022060a07"
-  dependencies:
-    babel-messages "^6.8.0"
-    babel-runtime "^6.9.0"
-    babel-types "^6.18.0"
-    detect-indent "^4.0.0"
-    jsesc "^1.3.0"
-    lodash "^4.2.0"
-    source-map "^0.5.0"
-
 babel-generator@^6.21.0:
   version "6.21.0"
   resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.21.0.tgz#605f1269c489a1c75deeca7ea16d43d4656c8494"
@@ -897,15 +842,7 @@ babel-plugin-transform-strict-mode@^6.18.0:
     babel-runtime "^6.0.0"
     babel-types "^6.18.0"
 
-babel-polyfill@^6.16.0:
-  version "6.16.0"
-  resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.16.0.tgz#2d45021df87e26a374b6d4d1a9c65964d17f2422"
-  dependencies:
-    babel-runtime "^6.9.1"
-    core-js "^2.4.0"
-    regenerator-runtime "^0.9.5"
-
-babel-polyfill@^6.20.0:
+babel-polyfill@^6.16.0, babel-polyfill@^6.20.0:
   version "6.20.0"
   resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.20.0.tgz#de4a371006139e20990aac0be367d398331204e7"
   dependencies:
@@ -1001,20 +938,20 @@ babel-register@^6.18.0:
     mkdirp "^0.5.1"
     source-map-support "^0.4.2"
 
-babel-runtime@^6.0.0, babel-runtime@^6.11.6, babel-runtime@^6.9.0, babel-runtime@^6.9.1, babel-runtime@^6.9.2:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.18.0.tgz#0f4177ffd98492ef13b9f823e9994a02584c9078"
-  dependencies:
-    core-js "^2.4.0"
-    regenerator-runtime "^0.9.5"
-
-babel-runtime@^6.20.0:
+babel-runtime@^6.0.0, babel-runtime@^6.11.6, babel-runtime@^6.20.0, babel-runtime@^6.9.1, babel-runtime@^6.9.2:
   version "6.20.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.20.0.tgz#87300bdcf4cd770f09bf0048c64204e17806d16f"
   dependencies:
     core-js "^2.4.0"
     regenerator-runtime "^0.10.0"
 
+babel-runtime@^6.9.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.18.0.tgz#0f4177ffd98492ef13b9f823e9994a02584c9078"
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.9.5"
+
 babel-template@^6.14.0, babel-template@^6.15.0, babel-template@^6.16.0, babel-template@^6.8.0:
   version "6.16.0"
   resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.16.0.tgz#e149dd1a9f03a35f817ddbc4d0481988e7ebc8ca"
@@ -1025,21 +962,7 @@ babel-template@^6.14.0, babel-template@^6.15.0, babel-template@^6.16.0, babel-te
     babylon "^6.11.0"
     lodash "^4.2.0"
 
-babel-traverse@^6.15.0, babel-traverse@^6.16.0, babel-traverse@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.18.0.tgz#5aeaa980baed2a07c8c47329cd90c3b90c80f05e"
-  dependencies:
-    babel-code-frame "^6.16.0"
-    babel-messages "^6.8.0"
-    babel-runtime "^6.9.0"
-    babel-types "^6.18.0"
-    babylon "^6.11.0"
-    debug "^2.2.0"
-    globals "^9.0.0"
-    invariant "^2.2.0"
-    lodash "^4.2.0"
-
-babel-traverse@^6.21.0:
+babel-traverse@^6.15.0, babel-traverse@^6.16.0, babel-traverse@^6.18.0, babel-traverse@^6.21.0:
   version "6.21.0"
   resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.21.0.tgz#69c6365804f1a4f69eb1213f85b00a818b8c21ad"
   dependencies:
@@ -1053,16 +976,7 @@ babel-traverse@^6.21.0:
     invariant "^2.2.0"
     lodash "^4.2.0"
 
-babel-types@^6.13.0, babel-types@^6.15.0, babel-types@^6.16.0, babel-types@^6.18.0, babel-types@^6.8.0, babel-types@^6.9.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.18.0.tgz#1f7d5a73474c59eb9151b2417bbff4e4fce7c3f8"
-  dependencies:
-    babel-runtime "^6.9.1"
-    esutils "^2.0.2"
-    lodash "^4.2.0"
-    to-fast-properties "^1.0.1"
-
-babel-types@^6.21.0:
+babel-types@^6.13.0, babel-types@^6.15.0, babel-types@^6.16.0, babel-types@^6.18.0, babel-types@^6.21.0, babel-types@^6.8.0, babel-types@^6.9.0:
   version "6.21.0"
   resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.21.0.tgz#314b92168891ef6d3806b7f7a917fdf87c11a4b2"
   dependencies:
@@ -1123,12 +1037,6 @@ binary-extensions@^1.0.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.7.0.tgz#6c1610db163abfb34edfe42fa423343a1e01185d"
 
-bl@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/bl/-/bl-1.1.2.tgz#fdca871a99713aa00d19e3bbba41c44787a65398"
-  dependencies:
-    readable-stream "~2.0.5"
-
 blob@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/blob/-/blob-0.0.4.tgz#bcf13052ca54463f30f9fc7e95b9a47630a94921"
@@ -1321,11 +1229,7 @@ camelcase@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
 
-caniuse-db@^1.0.30000539, caniuse-db@^1.0.30000578:
-  version "1.0.30000584"
-  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000584.tgz#cfbce897a48145fa73f96d893025581e838648c4"
-
-caniuse-db@^1.0.30000597:
+caniuse-db@^1.0.30000539, caniuse-db@^1.0.30000597:
   version "1.0.30000597"
   resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000597.tgz#b52e6cbe9dc83669affb98501629feaee1af6588"
 
@@ -2573,14 +2477,6 @@ forever-agent@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
 
-form-data@~1.0.0-rc4:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-1.0.1.tgz#ae315db9a4907fa065502304a66d7733475ee37c"
-  dependencies:
-    async "^2.0.1"
-    combined-stream "^1.0.5"
-    mime-types "^2.1.11"
-
 form-data@~2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.1.1.tgz#4adf0342e1a79afa1e84c8c320a9ffc82392a1f3"
@@ -2617,16 +2513,6 @@ fs-extra@^1.0.0, fs-extra@~1.0.0:
     jsonfile "^2.1.0"
     klaw "^1.0.0"
 
-fs-extra@~0.30.0:
-  version "0.30.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.30.0.tgz#f233ffcc08d4da7d432daa449776989db1df93f0"
-  dependencies:
-    graceful-fs "^4.1.2"
-    jsonfile "^2.1.0"
-    klaw "^1.0.0"
-    path-is-absolute "^1.0.0"
-    rimraf "^2.2.8"
-
 fs-readdir-recursive@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs-readdir-recursive/-/fs-readdir-recursive-1.0.0.tgz#8cd1745c8b4f8a29c8caec392476921ba195f560"
@@ -2776,11 +2662,7 @@ global@^4.3.0:
     min-document "^2.19.0"
     process "~0.5.1"
 
-globals@^9.0.0, globals@^9.2.0:
-  version "9.12.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-9.12.0.tgz#992ce90828c3a55fa8f16fada177adb64664cf9d"
-
-globals@^9.14.0:
+globals@^9.0.0, globals@^9.14.0, globals@^9.2.0:
   version "9.14.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.14.0.tgz#8859936af0038741263053b39d0e76ca241e4034"
 
@@ -3663,10 +3545,6 @@ lodash.isarray@^3.0.0:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
 
-lodash.isarray@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-4.0.0.tgz#2aca496b28c4ca6d726715313590c02e6ea34403"
-
 lodash.kebabcase@^4.0.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36"
@@ -3679,10 +3557,6 @@ lodash.keys@^3.0.0:
     lodash.isarguments "^3.0.0"
     lodash.isarray "^3.0.0"
 
-lodash.mergewith@^4.6.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz#150cf0a16791f5903b8891eab154609274bdea55"
-
 lodash.pickby@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.pickby/-/lodash.pickby-4.6.0.tgz#7dea21d8c18d7703a27c704c15d3b84a67e33aff"
@@ -3843,7 +3717,7 @@ mime-db@~1.24.0:
   version "1.24.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.24.0.tgz#e2d13f939f0016c6e4e9ad25a8652f126c467f0c"
 
-mime-types@^2.1.11, mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.7:
+mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.7:
   version "2.1.12"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.12.tgz#152ba256777020dd4663f54c2e7bc26381e71729"
   dependencies:
@@ -4035,9 +3909,9 @@ node-pre-gyp@^0.6.29:
     tar "~2.2.1"
     tar-pack "~3.3.0"
 
-node-sass@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.0.0.tgz#3208301ad5a6096de227f3fc4c3ce682b9816afc"
+node-sass@^3.13.0:
+  version "3.13.1"
+  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-3.13.1.tgz#7240fbbff2396304b4223527ed3020589c004fc2"
   dependencies:
     async-foreach "^0.1.3"
     chalk "^1.1.1"
@@ -4048,8 +3922,6 @@ node-sass@^4.0.0:
     in-publish "^2.0.0"
     lodash.assign "^4.2.0"
     lodash.clonedeep "^4.3.2"
-    lodash.isarray "^4.0.0"
-    lodash.mergewith "^4.6.0"
     meow "^3.7.0"
     mkdirp "^0.5.1"
     nan "^2.3.2"
@@ -4058,10 +3930,6 @@ node-sass@^4.0.0:
     request "^2.61.0"
     sass-graph "^2.1.1"
 
-node-uuid@~1.4.7:
-  version "1.4.7"
-  resolved "https://registry.yarnpkg.com/node-uuid/-/node-uuid-1.4.7.tgz#6da5a17668c4b3dd59623bda11cf7fa4c1f60a6f"
-
 "nopt@2 || 3", nopt@~3.0.6:
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
@@ -4375,7 +4243,7 @@ pend@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
 
-phantomjs-prebuilt@^2.1.14:
+phantomjs-prebuilt@^2.1.14, phantomjs-prebuilt@^2.1.7:
   version "2.1.14"
   resolved "https://registry.yarnpkg.com/phantomjs-prebuilt/-/phantomjs-prebuilt-2.1.14.tgz#d53d311fcfb7d1d08ddb24014558f1188c516da0"
   dependencies:
@@ -4389,20 +4257,6 @@ phantomjs-prebuilt@^2.1.14:
     request-progress "~2.0.1"
     which "~1.2.10"
 
-phantomjs-prebuilt@^2.1.7:
-  version "2.1.13"
-  resolved "https://registry.yarnpkg.com/phantomjs-prebuilt/-/phantomjs-prebuilt-2.1.13.tgz#66556ad9e965d893ca5a7dc9e763df7e8697f76d"
-  dependencies:
-    es6-promise "~4.0.3"
-    extract-zip "~1.5.0"
-    fs-extra "~0.30.0"
-    hasha "~2.2.0"
-    kew "~0.7.0"
-    progress "~1.1.8"
-    request "~2.74.0"
-    request-progress "~2.0.1"
-    which "~1.2.10"
-
 pify@^2.0.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -4688,16 +4542,7 @@ postcss-zindex@^2.0.1:
     postcss "^5.0.4"
     uniqs "^2.0.0"
 
-postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.5:
-  version "5.2.5"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.5.tgz#ec428c27dffc7fac65961340a9b022fa4af5f056"
-  dependencies:
-    chalk "^1.1.3"
-    js-base64 "^2.1.9"
-    source-map "^0.5.6"
-    supports-color "^3.1.2"
-
-postcss@^5.2.6:
+postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.6:
   version "5.2.6"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.6.tgz#a252cd67cd52585035f17e9ad12b35137a7bdd9e"
   dependencies:
@@ -4793,7 +4638,7 @@ qjobs@^1.1.4:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/qjobs/-/qjobs-1.1.5.tgz#659de9f2cf8dcc27a1481276f205377272382e73"
 
-qs@6.2.0, qs@~6.2.0:
+qs@6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.2.0.tgz#3b7848c03c2dece69a9522b0fae8c4126d745f3b"
 
@@ -4915,7 +4760,7 @@ read-pkg@^1.0.0:
     normalize-package-data "^2.3.2"
     path-type "^1.0.0"
 
-"readable-stream@^2.0.0 || ^1.1.13", readable-stream@^2.0.5, readable-stream@^2.1.0, readable-stream@~2.1.4:
+"readable-stream@^2.0.0 || ^1.1.13", readable-stream@^2.1.0, readable-stream@~2.1.4:
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.1.5.tgz#66fa8b720e1438b364681f2ad1a63c618448c9d0"
   dependencies:
@@ -4927,7 +4772,7 @@ read-pkg@^1.0.0:
     string_decoder "~0.10.x"
     util-deprecate "~1.0.1"
 
-readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@~2.0.0, readable-stream@~2.0.5:
+readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@~2.0.0:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.0.6.tgz#8f90341e68a53ccc928788dacfcd11b36eb9b78e"
   dependencies:
@@ -5071,58 +4916,7 @@ request-progress@~2.0.1:
   dependencies:
     throttleit "^1.0.0"
 
-request@2, request@^2.61.0, request@^2.75.0:
-  version "2.76.0"
-  resolved "https://registry.yarnpkg.com/request/-/request-2.76.0.tgz#be44505afef70360a0436955106be3945d95560e"
-  dependencies:
-    aws-sign2 "~0.6.0"
-    aws4 "^1.2.1"
-    caseless "~0.11.0"
-    combined-stream "~1.0.5"
-    extend "~3.0.0"
-    forever-agent "~0.6.1"
-    form-data "~2.1.1"
-    har-validator "~2.0.6"
-    hawk "~3.1.3"
-    http-signature "~1.1.0"
-    is-typedarray "~1.0.0"
-    isstream "~0.1.2"
-    json-stringify-safe "~5.0.1"
-    mime-types "~2.1.7"
-    node-uuid "~1.4.7"
-    oauth-sign "~0.8.1"
-    qs "~6.3.0"
-    stringstream "~0.0.4"
-    tough-cookie "~2.3.0"
-    tunnel-agent "~0.4.1"
-
-request@~2.74.0:
-  version "2.74.0"
-  resolved "https://registry.yarnpkg.com/request/-/request-2.74.0.tgz#7693ca768bbb0ea5c8ce08c084a45efa05b892ab"
-  dependencies:
-    aws-sign2 "~0.6.0"
-    aws4 "^1.2.1"
-    bl "~1.1.2"
-    caseless "~0.11.0"
-    combined-stream "~1.0.5"
-    extend "~3.0.0"
-    forever-agent "~0.6.1"
-    form-data "~1.0.0-rc4"
-    har-validator "~2.0.6"
-    hawk "~3.1.3"
-    http-signature "~1.1.0"
-    is-typedarray "~1.0.0"
-    isstream "~0.1.2"
-    json-stringify-safe "~5.0.1"
-    mime-types "~2.1.7"
-    node-uuid "~1.4.7"
-    oauth-sign "~0.8.1"
-    qs "~6.2.0"
-    stringstream "~0.0.4"
-    tough-cookie "~2.3.0"
-    tunnel-agent "~0.4.1"
-
-request@~2.79.0:
+request@2, request@^2.61.0, request@^2.75.0, request@~2.79.0:
   version "2.79.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.79.0.tgz#4dfe5bf6be8b8cdc37fcf93e04b65577722710de"
   dependencies:
@@ -5174,14 +4968,14 @@ resolve-from@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226"
 
-resolve@^1.1.6, resolve@^1.1.7:
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
-
-resolve@^1.2.0:
+resolve@^1.1.6, resolve@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.2.0.tgz#9589c3f2f6149d1417a40becc1663db6ec6bc26c"
 
+resolve@^1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
+
 restore-cursor@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-1.0.1.tgz#34661f46886327fed2991479152252df92daa541"
@@ -5275,14 +5069,14 @@ sax@~1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.1.tgz#7b8e656190b228e81a66aea748480d828cd2d37a"
 
-"semver@2 || 3 || 4 || 5", semver@~4.3.3:
-  version "4.3.6"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-4.3.6.tgz#300bc6e0e86374f7ba61068b5b1ecd57fc6532da"
-
-"semver@2.x || 3.x || 4 || 5", semver@^5.3.0, semver@~5.3.0:
+"semver@2 || 3 || 4 || 5", "semver@2.x || 3.x || 4 || 5", semver@^5.3.0, semver@~5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
 
+semver@~4.3.3:
+  version "4.3.6"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-4.3.6.tgz#300bc6e0e86374f7ba61068b5b1ecd57fc6532da"
+
 send@0.14.1:
   version "0.14.1"
   resolved "https://registry.yarnpkg.com/send/-/send-0.14.1.tgz#a954984325392f51532a7760760e459598c89f7a"
@@ -5925,16 +5719,7 @@ webpack-core@~0.6.9:
     source-list-map "~0.1.7"
     source-map "~0.4.1"
 
-webpack-dev-middleware@^1.0.11:
-  version "1.8.4"
-  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.8.4.tgz#e8765c9122887ce9e3abd4cc9c3eb31b61e0948d"
-  dependencies:
-    memory-fs "~0.3.0"
-    mime "^1.3.4"
-    path-is-absolute "^1.0.0"
-    range-parser "^1.0.3"
-
-webpack-dev-middleware@^1.9.0:
+webpack-dev-middleware@^1.0.11, webpack-dev-middleware@^1.9.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.9.0.tgz#a1c67a3dfd8a5c5d62740aa0babe61758b4c84aa"
   dependencies:

From d7659131fc02585defb8917c6b88aa60451d0296 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 17 Dec 2016 22:16:41 +0100
Subject: [PATCH 0999/1024] Update documentation dependencies

---
 docs/package.json |  10 +-
 docs/yarn.lock    | 772 +++++++++++++++++++++-------------------------
 2 files changed, 360 insertions(+), 422 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index c990774d4..cb6db1679 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -21,25 +21,25 @@
   "devDependencies": {
     "autoprefixer": "^6.4.0",
     "babel-core": "^6.13.2",
-    "babel-eslint": "^6.0.4",
+    "babel-eslint": "^7.1.1",
     "babel-loader": "^6.2.4",
     "babel-plugin-react-transform": "^2.0.2",
     "babel-preset-es2015": "^6.13.2",
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-0": "^6.5.0",
     "babel-preset-stage-2": "^6.13.0",
-    "cross-env": "^2.0.0",
-    "css-loader": "^0.23.1",
+    "cross-env": "^3.1.3",
+    "css-loader": "^0.26.1",
     "express": "^4.13.4",
     "extract-text-webpack-plugin": "^1.0.1",
-    "gh-pages": "^0.11.0",
+    "gh-pages": "^0.12.0",
     "highlight-loader": "git://github.com/javivelasco/highlight-loader.git#master",
     "highlight.js": "^9.3.0",
     "html-loader": "^0.4.3",
     "html-webpack-plugin": "^2.16.1",
     "markdown-loader": "^0.1.7",
     "node-sass": "^3.7.0",
-    "postcss-loader": "^0.9.1",
+    "postcss-loader": "^1.2.1",
     "raw-loader": "^0.5.1",
     "react-transform-catch-errors": "^1.0.2",
     "react-transform-hmr": "^1.0.4",
diff --git a/docs/yarn.lock b/docs/yarn.lock
index 6df4a071d..cadbef018 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -1,5 +1,18 @@
 # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 # yarn lockfile v1
+
+
+CSSselect@~0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/CSSselect/-/CSSselect-0.4.1.tgz#f8ab7e1f8418ce63cda6eb7bd778a85d7ec492b2"
+  dependencies:
+    CSSwhat "0.4"
+    domutils "1.4"
+
+CSSwhat@0.4:
+  version "0.4.7"
+  resolved "https://registry.yarnpkg.com/CSSwhat/-/CSSwhat-0.4.7.tgz#867da0ff39f778613242c44cfea83f0aa4ebdf9b"
+
 abbrev@1:
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.0.9.tgz#91b4792588a7738c25f35dd6f63752a2f8776135"
@@ -144,20 +157,20 @@ async-foreach@^0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/async-foreach/-/async-foreach-0.1.3.tgz#36121f845c0578172de419a97dbeb1d16ec34542"
 
+async@2.1.2, async@^2.0.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.1.2.tgz#612a4ab45ef42a70cde806bad86ee6db047e8385"
+  dependencies:
+    lodash "^4.14.0"
+
 async@^0.9.0:
   version "0.9.2"
   resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d"
 
-async@^1.3.0, async@^1.5.0, async@1.5.2:
+async@^1.3.0, async@^1.5.0:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
 
-async@^2.0.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.1.2.tgz#612a4ab45ef42a70cde806bad86ee6db047e8385"
-  dependencies:
-    lodash "^4.14.0"
-
 async@~0.2.6:
   version "0.2.10"
   resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
@@ -167,14 +180,14 @@ asynckit@^0.4.0:
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
 
 autoprefixer@^6.3.1, autoprefixer@^6.4.0:
-  version "6.5.1"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.5.1.tgz#ae759a5221e709f3da17c2d656230e67c43cbb75"
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.5.4.tgz#1386eb6708ccff36aefff70adc694ecfd60af1b0"
   dependencies:
     browserslist "~1.4.0"
-    caniuse-db "^1.0.30000554"
+    caniuse-db "^1.0.30000597"
     normalize-range "^0.1.2"
     num2fraction "^1.2.2"
-    postcss "^5.2.4"
+    postcss "^5.2.6"
     postcss-value-parser "^3.2.3"
 
 aws-sign2@~0.6.0:
@@ -185,27 +198,27 @@ aws4@^1.2.1:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.5.0.tgz#0a29ffb79c31c9e712eeb087e8e7a64b4a56d755"
 
-babel-code-frame@^6.16.0:
-  version "6.16.0"
-  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.16.0.tgz#f90e60da0862909d3ce098733b5d3987c97cb8de"
+babel-code-frame@^6.11.0, babel-code-frame@^6.16.0, babel-code-frame@^6.20.0:
+  version "6.20.0"
+  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.20.0.tgz#b968f839090f9a8bc6d41938fb96cb84f7387b26"
   dependencies:
     chalk "^1.1.0"
     esutils "^2.0.2"
     js-tokens "^2.0.0"
 
 babel-core@^6.13.2, babel-core@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.18.0.tgz#bb5ce9bc0a956e6e94e2f12d597abb3b0b330deb"
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.21.0.tgz#75525480c21c803f826ef3867d22c19f080a3724"
   dependencies:
-    babel-code-frame "^6.16.0"
-    babel-generator "^6.18.0"
+    babel-code-frame "^6.20.0"
+    babel-generator "^6.21.0"
     babel-helpers "^6.16.0"
     babel-messages "^6.8.0"
     babel-register "^6.18.0"
-    babel-runtime "^6.9.1"
+    babel-runtime "^6.20.0"
     babel-template "^6.16.0"
-    babel-traverse "^6.18.0"
-    babel-types "^6.18.0"
+    babel-traverse "^6.21.0"
+    babel-types "^6.21.0"
     babylon "^6.11.0"
     convert-source-map "^1.1.0"
     debug "^2.1.1"
@@ -217,23 +230,23 @@ babel-core@^6.13.2, babel-core@^6.18.0:
     slash "^1.0.0"
     source-map "^0.5.0"
 
-babel-eslint@^6.0.4:
-  version "6.1.2"
-  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-6.1.2.tgz#5293419fe3672d66598d327da9694567ba6a5f2f"
+babel-eslint@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-7.1.1.tgz#8a6a884f085aa7060af69cfc77341c2f99370fb2"
   dependencies:
-    babel-traverse "^6.0.20"
-    babel-types "^6.0.19"
-    babylon "^6.0.18"
-    lodash.assign "^4.0.0"
-    lodash.pickby "^4.0.0"
+    babel-code-frame "^6.16.0"
+    babel-traverse "^6.15.0"
+    babel-types "^6.15.0"
+    babylon "^6.13.0"
+    lodash.pickby "^4.6.0"
 
-babel-generator@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.18.0.tgz#e4f104cb3063996d9850556a45aae4a022060a07"
+babel-generator@^6.21.0:
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.21.0.tgz#605f1269c489a1c75deeca7ea16d43d4656c8494"
   dependencies:
     babel-messages "^6.8.0"
-    babel-runtime "^6.9.0"
-    babel-types "^6.18.0"
+    babel-runtime "^6.20.0"
+    babel-types "^6.21.0"
     detect-indent "^4.0.0"
     jsesc "^1.3.0"
     lodash "^4.2.0"
@@ -367,8 +380,8 @@ babel-helpers@^6.16.0:
     babel-template "^6.16.0"
 
 babel-loader@^6.2.4:
-  version "6.2.7"
-  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-6.2.7.tgz#16fdbf64328030dc5a606827d389c8b92a2a8032"
+  version "6.2.10"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-6.2.10.tgz#adefc2b242320cd5d15e65b31cea0e8b1b02d4b0"
   dependencies:
     find-cache-dir "^0.1.1"
     loader-utils "^0.2.11"
@@ -835,16 +848,16 @@ babel-register@^6.18.0:
     mkdirp "^0.5.1"
     source-map-support "^0.4.2"
 
-babel-runtime@^6.0.0, babel-runtime@^6.11.6, babel-runtime@^6.9.0, babel-runtime@^6.9.1:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.18.0.tgz#0f4177ffd98492ef13b9f823e9994a02584c9078"
+babel-runtime@^6.0.0, babel-runtime@^6.11.6, babel-runtime@^6.20.0, babel-runtime@^6.9.0, babel-runtime@^6.9.1:
+  version "6.20.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.20.0.tgz#87300bdcf4cd770f09bf0048c64204e17806d16f"
   dependencies:
     core-js "^2.4.0"
-    regenerator-runtime "^0.9.5"
+    regenerator-runtime "^0.10.0"
 
 babel-standalone@^6.7.7:
-  version "6.18.1"
-  resolved "https://registry.yarnpkg.com/babel-standalone/-/babel-standalone-6.18.1.tgz#17914105fcbcad958d554e0f4ea63ca31e7a6a82"
+  version "6.19.0"
+  resolved "https://registry.yarnpkg.com/babel-standalone/-/babel-standalone-6.19.0.tgz#e3fa6169fd0afe6ccfd95c8856fbb5e87ec1784e"
 
 babel-template@^6.14.0, babel-template@^6.15.0, babel-template@^6.16.0, babel-template@^6.8.0:
   version "6.16.0"
@@ -856,30 +869,30 @@ babel-template@^6.14.0, babel-template@^6.15.0, babel-template@^6.16.0, babel-te
     babylon "^6.11.0"
     lodash "^4.2.0"
 
-babel-traverse@^6.0.20, babel-traverse@^6.16.0, babel-traverse@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.18.0.tgz#5aeaa980baed2a07c8c47329cd90c3b90c80f05e"
+babel-traverse@^6.15.0, babel-traverse@^6.16.0, babel-traverse@^6.18.0, babel-traverse@^6.21.0:
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.21.0.tgz#69c6365804f1a4f69eb1213f85b00a818b8c21ad"
   dependencies:
-    babel-code-frame "^6.16.0"
+    babel-code-frame "^6.20.0"
     babel-messages "^6.8.0"
-    babel-runtime "^6.9.0"
-    babel-types "^6.18.0"
+    babel-runtime "^6.20.0"
+    babel-types "^6.21.0"
     babylon "^6.11.0"
     debug "^2.2.0"
     globals "^9.0.0"
     invariant "^2.2.0"
     lodash "^4.2.0"
 
-babel-types@^6.0.19, babel-types@^6.13.0, babel-types@^6.16.0, babel-types@^6.18.0, babel-types@^6.8.0, babel-types@^6.9.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.18.0.tgz#1f7d5a73474c59eb9151b2417bbff4e4fce7c3f8"
+babel-types@^6.13.0, babel-types@^6.15.0, babel-types@^6.16.0, babel-types@^6.18.0, babel-types@^6.21.0, babel-types@^6.8.0, babel-types@^6.9.0:
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.21.0.tgz#314b92168891ef6d3806b7f7a917fdf87c11a4b2"
   dependencies:
-    babel-runtime "^6.9.1"
+    babel-runtime "^6.20.0"
     esutils "^2.0.2"
     lodash "^4.2.0"
     to-fast-properties "^1.0.1"
 
-babylon@^6.0.18, babylon@^6.11.0:
+babylon@^6.11.0, babylon@^6.13.0:
   version "6.13.1"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.13.1.tgz#adca350e088f0467647157652bafead6ddb8dfdb"
 
@@ -895,10 +908,6 @@ base64-js@^1.0.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.0.tgz#a39992d723584811982be5e290bb6a53d86700f1"
 
-Base64@~0.2.0:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/Base64/-/Base64-0.2.1.tgz#ba3a4230708e186705065e66babdd4c35cf60028"
-
 bcrypt-pbkdf@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.0.tgz#3ca76b85241c7170bf7d9703e7b9aa74630040d4"
@@ -948,7 +957,13 @@ braces@^1.8.2:
     preserve "^0.2.0"
     repeat-element "^1.1.2"
 
-browserify-zlib@~0.1.4:
+browserify-aes@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-0.4.0.tgz#067149b668df31c4b58533e02d01e806d8608e2c"
+  dependencies:
+    inherits "^2.0.1"
+
+browserify-zlib@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.1.4.tgz#bb35f8a519f600e0fa6b8485241c979d0141fb2d"
   dependencies:
@@ -976,6 +991,10 @@ builtin-modules@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
 
+builtin-status-codes@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-2.0.0.tgz#6f22003baacf003ccd287afe6872151fddc58579"
+
 camel-case@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73"
@@ -1002,9 +1021,9 @@ camelcase@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
 
-caniuse-db@^1.0.30000539, caniuse-db@^1.0.30000554:
-  version "1.0.30000572"
-  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000572.tgz#81d0aa6b7de2d785c8dcab135502983276cc707d"
+caniuse-db@^1.0.30000539, caniuse-db@^1.0.30000597:
+  version "1.0.30000597"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000597.tgz#b52e6cbe9dc83669affb98501629feaee1af6588"
 
 caseless@~0.11.0:
   version "0.11.0"
@@ -1125,8 +1144,8 @@ code-point-at@^1.0.0:
     number-is-nan "^1.0.0"
 
 codemirror@^5.14.2:
-  version "5.20.2"
-  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.20.2.tgz#918e0ece96d57a99030b2f8b33011284bed5217a"
+  version "5.21.0"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.21.0.tgz#9ec4caeda50807575b2115226bf12414f85d2246"
 
 collections@^0.2.0:
   version "0.2.2"
@@ -1176,18 +1195,18 @@ combined-stream@^1.0.5, combined-stream@~1.0.5:
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@^2.9.0, commander@2.9.0, commander@2.9.x:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
-  dependencies:
-    graceful-readlink ">= 1.0.0"
-
 commander@2.8.x:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.8.1.tgz#06be367febfda0c330aa1e2a072d3dc9762425d4"
   dependencies:
     graceful-readlink ">= 1.0.0"
 
+commander@2.9.0, commander@2.9.x, commander@^2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
+  dependencies:
+    graceful-readlink ">= 1.0.0"
+
 commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
@@ -1213,9 +1232,9 @@ constant-case@^2.0.0:
     snake-case "^2.1.0"
     upper-case "^1.1.1"
 
-constants-browserify@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-0.0.1.tgz#92577db527ba6c4cf0a4568d84bc031f441e21f2"
+constants-browserify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
 
 content-disposition@0.5.1:
   version "0.5.1"
@@ -1249,12 +1268,22 @@ core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
 
-cross-env@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-2.0.1.tgz#f283b4039ea759ada9ab7e987ad3bddb241b79a6"
+cosmiconfig@^2.1.0, cosmiconfig@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-2.1.1.tgz#817f2c2039347a1e9bf7d090c0923e53f749ca82"
+  dependencies:
+    js-yaml "^3.4.3"
+    minimist "^1.2.0"
+    object-assign "^4.1.0"
+    os-homedir "^1.0.1"
+    parse-json "^2.2.0"
+    require-from-string "^1.1.0"
+
+cross-env@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-3.1.3.tgz#58cd8231808f50089708b091f7dd37275a8e8154"
   dependencies:
     cross-spawn "^3.0.1"
-    lodash.assign "^3.2.0"
 
 cross-spawn@^3.0.0, cross-spawn@^3.0.1:
   version "3.0.1"
@@ -1269,10 +1298,11 @@ cryptiles@2.x.x:
   dependencies:
     boom "2.x.x"
 
-crypto-browserify@~3.2.6:
-  version "3.2.8"
-  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.2.8.tgz#b9b11dbe6d9651dd882a01e6cc467df718ecf189"
+crypto-browserify@3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.3.0.tgz#b9fc75bb4a0ed61dcf1cd5dae96eb30c9c3e506c"
   dependencies:
+    browserify-aes "0.4.0"
     pbkdf2-compat "2.0.1"
     ripemd160 "0.2.0"
     sha.js "2.2.6"
@@ -1281,14 +1311,15 @@ css-color-names@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
 
-css-loader@^0.23.1:
-  version "0.23.1"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.23.1.tgz#9fa23f2b5c0965235910ad5ecef3b8a36390fe50"
+css-loader@^0.26.1:
+  version "0.26.1"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.26.1.tgz#2ba7f20131b93597496b3e9bb500785a49cd29ea"
   dependencies:
-    css-selector-tokenizer "^0.5.1"
+    babel-code-frame "^6.11.0"
+    css-selector-tokenizer "^0.7.0"
     cssnano ">=2.6.1 <4"
     loader-utils "~0.2.2"
-    lodash.camelcase "^3.0.1"
+    lodash.camelcase "^4.3.0"
     object-assign "^4.0.1"
     postcss "^5.0.6"
     postcss-modules-extract-imports "^1.0.0"
@@ -1306,16 +1337,17 @@ css-select@^1.1.0:
     domutils "1.5.1"
     nth-check "~1.0.1"
 
-css-selector-tokenizer@^0.5.1:
-  version "0.5.4"
-  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.5.4.tgz#139bafd34a35fd0c1428487049e0699e6f6a2c21"
+css-selector-tokenizer@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.6.0.tgz#6445f582c7930d241dcc5007a43d6fcb8f073152"
   dependencies:
     cssesc "^0.1.0"
     fastparse "^1.1.1"
+    regexpu-core "^1.0.0"
 
-css-selector-tokenizer@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.6.0.tgz#6445f582c7930d241dcc5007a43d6fcb8f073152"
+css-selector-tokenizer@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.0.tgz#e6988474ae8c953477bf5e7efecfceccd9cf4c86"
   dependencies:
     cssesc "^0.1.0"
     fastparse "^1.1.1"
@@ -1373,17 +1405,6 @@ csso@~2.2.1:
     clap "^1.0.9"
     source-map "^0.5.3"
 
-CSSselect@~0.4.0:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/CSSselect/-/CSSselect-0.4.1.tgz#f8ab7e1f8418ce63cda6eb7bd778a85d7ec492b2"
-  dependencies:
-    CSSwhat "0.4"
-    domutils "1.4"
-
-CSSwhat@0.4:
-  version "0.4.7"
-  resolved "https://registry.yarnpkg.com/CSSwhat/-/CSSwhat-0.4.7.tgz#867da0ff39f778613242c44cfea83f0aa4ebdf9b"
-
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@@ -1456,20 +1477,13 @@ dom-converter@~0.1:
   dependencies:
     utila "~0.3"
 
-dom-serializer@~0.0.0:
+dom-serializer@0, dom-serializer@~0.0.0:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.0.1.tgz#9589827f1e32d22c37c829adabd59b3247af8eaf"
   dependencies:
     domelementtype "~1.1.1"
     entities "~1.1.1"
 
-dom-serializer@0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
-  dependencies:
-    domelementtype "~1.1.1"
-    entities "~1.1.1"
-
 dom-walk@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"
@@ -1478,14 +1492,10 @@ domain-browser@^1.1.1:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
 
-domelementtype@~1.1.1:
+domelementtype@1, domelementtype@~1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.1.3.tgz#bd28773e2642881aec51544924299c5cd822185b"
 
-domelementtype@1:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.0.tgz#b17aed82e8ab59e52dd9c19b1756e0fc187204c2"
-
 domhandler@2.1:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.1.0.tgz#d2646f5e57f6c3bab11cf6cb05d3c0acf7412594"
@@ -1555,14 +1565,14 @@ enhanced-resolve@~0.9.0:
     memory-fs "^0.2.0"
     tapable "^0.1.8"
 
-entities@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
-
 entities@1.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.0.0.tgz#b2987aa3821347fcde642b24fdfc9e4fb712bf26"
 
+entities@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
+
 errno@^0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.4.tgz#b896e23a9e5e8ba33871fc996abd3635fc9a1c7d"
@@ -1596,7 +1606,7 @@ es6-iterator@2:
     es5-ext "^0.10.7"
     es6-symbol "3"
 
-es6-symbol@^3.0.2, es6-symbol@~3.1, es6-symbol@3:
+es6-symbol@3, es6-symbol@^3.0.2, es6-symbol@~3.1:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.0.tgz#94481c655e7a7cad82eba832d97d5433496d7ffa"
   dependencies:
@@ -1707,7 +1717,7 @@ fastparse@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
 
-fbjs@^0.8.4:
+fbjs@^0.8.1, fbjs@^0.8.4:
   version "0.8.5"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.5.tgz#f69ba8a876096cb1b9bffe4d7c1e71c19d39d008"
   dependencies:
@@ -1868,17 +1878,17 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
-gh-pages@^0.11.0:
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/gh-pages/-/gh-pages-0.11.0.tgz#93313c6dcbfc74d426bc89a29ebff6420acc3c1b"
+gh-pages@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/gh-pages/-/gh-pages-0.12.0.tgz#d951e3ed98b85699d4b0418eb1a15b1a04988dc1"
   dependencies:
-    async "1.5.2"
+    async "2.1.2"
     commander "2.9.0"
-    globby "^4.0.0"
-    graceful-fs "4.1.2"
+    globby "^6.1.0"
+    graceful-fs "4.1.10"
     q "1.4.1"
     q-io "1.13.2"
-    wrench "1.5.8"
+    rimraf "^2.5.4"
 
 glob-base@^0.3.0:
   version "0.3.0"
@@ -1893,16 +1903,6 @@ glob-parent@^2.0.0:
   dependencies:
     is-glob "^2.0.0"
 
-glob@^6.0.1:
-  version "6.0.4"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-6.0.4.tgz#0f08860f6a155127b2fadd4f9ce24b1aab6e4d22"
-  dependencies:
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "2 || 3"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
 glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@~7.1.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.1.tgz#805211df04faaf1c63a3600306cdf5ade50b2ec8"
@@ -1925,13 +1925,12 @@ globals@^9.0.0:
   version "9.12.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.12.0.tgz#992ce90828c3a55fa8f16fada177adb64664cf9d"
 
-globby@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-4.1.0.tgz#080f54549ec1b82a6c60e631fc82e1211dbe95f8"
+globby@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
   dependencies:
     array-union "^1.0.1"
-    arrify "^1.0.0"
-    glob "^6.0.1"
+    glob "^7.0.3"
     object-assign "^4.0.1"
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
@@ -1944,11 +1943,11 @@ globule@^1.0.0:
     lodash "~4.16.4"
     minimatch "~3.0.2"
 
-graceful-fs@^4.1.2:
-  version "4.1.9"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.9.tgz#baacba37d19d11f9d146d3578bc99958c3787e29"
+graceful-fs@4.1.10:
+  version "4.1.10"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.10.tgz#f2d720c22092f743228775c75e3612632501f131"
 
-graceful-fs@4.1.2:
+graceful-fs@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.2.tgz#fe2239b7574972e67e41f808823f9bfa4a991e37"
 
@@ -1998,14 +1997,14 @@ hawk@~3.1.3:
     hoek "2.x.x"
     sntp "1.x.x"
 
-he@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/he/-/he-0.5.0.tgz#2c05ffaef90b68e860f3fd2b54ef580989277ee2"
-
 he@1.1.x:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.1.0.tgz#29319d49beec13a9b1f3c4f9b2a6dde4859bb2a7"
 
+he@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/he/-/he-0.5.0.tgz#2c05ffaef90b68e860f3fd2b54ef580989277ee2"
+
 header-case@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/header-case/-/header-case-1.0.0.tgz#d9e335909505d56051ec16a0106821889e910781"
@@ -2117,13 +2116,6 @@ htmlparser2@~3.8.1:
     entities "1.0"
     readable-stream "1.1"
 
-http-browserify@^1.3.2:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/http-browserify/-/http-browserify-1.7.0.tgz#33795ade72df88acfbfd36773cefeda764735b20"
-  dependencies:
-    Base64 "~0.2.0"
-    inherits "~2.0.1"
-
 http-errors@~1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.5.0.tgz#b1cb3d8260fd8e2386cad3189045943372d48211"
@@ -2140,9 +2132,9 @@ http-signature@~1.1.0:
     jsprim "^1.2.2"
     sshpk "^1.7.0"
 
-https-browserify@0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.0.tgz#b3ffdfe734b2a3d4a9efd58e8654c91fce86eafd"
+https-browserify@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
 
 iconv-lite@~0.4.13:
   version "0.4.13"
@@ -2185,11 +2177,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@^2.0.1, inherits@~2.0.0, inherits@~2.0.1, inherits@2:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
-
-inherits@2.0.1:
+inherits@2, inherits@2.0.1, inherits@^2.0.1, inherits@~2.0.0, inherits@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
 
@@ -2336,14 +2324,14 @@ is-utf8@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
 
-isarray@^1.0.0, isarray@~1.0.0, isarray@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
-
 isarray@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
 
+isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+
 isexe@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-1.1.2.tgz#36f3e22e60750920f5e7241a476a8c6a42275ad0"
@@ -2379,7 +2367,7 @@ js-tokens@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-2.0.0.tgz#79903f5563ee778cc1162e6dcf1a0027c97f9cb5"
 
-js-yaml@~3.6.1:
+js-yaml@^3.4.3, js-yaml@~3.6.1:
   version "3.6.1"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.6.1.tgz#6e5fe67d8b205ce4d22fad05b7781e8dadcc4b30"
   dependencies:
@@ -2448,7 +2436,7 @@ load-json-file@^1.0.0:
     pinkie-promise "^2.0.0"
     strip-bom "^2.0.0"
 
-loader-utils@^0.2.11, loader-utils@^0.2.14, loader-utils@^0.2.15, loader-utils@^0.2.16, loader-utils@^0.2.3, loader-utils@^0.2.7, loader-utils@~0.2.2:
+loader-utils@^0.2.11, loader-utils@^0.2.15, loader-utils@^0.2.16, loader-utils@^0.2.3, loader-utils@^0.2.7, loader-utils@~0.2.2:
   version "0.2.16"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.16.tgz#f08632066ed8282835dff88dfb52704765adee6d"
   dependencies:
@@ -2457,110 +2445,26 @@ loader-utils@^0.2.11, loader-utils@^0.2.14, loader-utils@^0.2.15, loader-utils@^
     json5 "^0.5.0"
     object-assign "^4.0.1"
 
-lodash._baseassign@^3.0.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/lodash._baseassign/-/lodash._baseassign-3.2.0.tgz#8c38a099500f215ad09e59f1722fd0c52bfe0a4e"
-  dependencies:
-    lodash._basecopy "^3.0.0"
-    lodash.keys "^3.0.0"
-
-lodash._basecopy@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz#8da0e6a876cf344c0ad8a54882111dd3c5c7ca36"
-
-lodash._bindcallback@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e"
-
-lodash._createassigner@^3.0.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/lodash._createassigner/-/lodash._createassigner-3.1.1.tgz#838a5bae2fdaca63ac22dee8e19fa4e6d6970b11"
-  dependencies:
-    lodash._bindcallback "^3.0.0"
-    lodash._isiterateecall "^3.0.0"
-    lodash.restparam "^3.0.0"
-
-lodash._createcompounder@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/lodash._createcompounder/-/lodash._createcompounder-3.0.0.tgz#5dd2cb55372d6e70e0e2392fb2304d6631091075"
-  dependencies:
-    lodash.deburr "^3.0.0"
-    lodash.words "^3.0.0"
-
-lodash._getnative@^3.0.0:
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
-
-lodash._isiterateecall@^3.0.0:
-  version "3.0.9"
-  resolved "https://registry.yarnpkg.com/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz#5203ad7ba425fae842460e696db9cf3e6aac057c"
-
-lodash._root@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/lodash._root/-/lodash._root-3.0.1.tgz#fba1c4524c19ee9a5f8136b4609f017cf4ded692"
-
-lodash.assign@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-3.2.0.tgz#3ce9f0234b4b2223e296b8fa0ac1fee8ebca64fa"
-  dependencies:
-    lodash._baseassign "^3.0.0"
-    lodash._createassigner "^3.0.0"
-    lodash.keys "^3.0.0"
-
-lodash.assign@^4.0.0, lodash.assign@^4.0.3, lodash.assign@^4.0.6, lodash.assign@^4.2.0:
+lodash.assign@^4.0.3, lodash.assign@^4.0.6, lodash.assign@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
 
-lodash.camelcase@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-3.0.1.tgz#932c8b87f8a4377897c67197533282f97aeac298"
-  dependencies:
-    lodash._createcompounder "^3.0.0"
+lodash.camelcase@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
 
 lodash.clonedeep@^4.3.2:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
 
-lodash.deburr@^3.0.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/lodash.deburr/-/lodash.deburr-3.2.0.tgz#6da8f54334a366a7cf4c4c76ef8d80aa1b365ed5"
-  dependencies:
-    lodash._root "^3.0.0"
-
 lodash.indexof@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/lodash.indexof/-/lodash.indexof-4.0.5.tgz#53714adc2cddd6ed87638f893aa9b6c24e31ef3c"
 
-lodash.isarguments@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
-
-lodash.isarray@^3.0.0:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
-
-lodash.keys@^3.0.0:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a"
-  dependencies:
-    lodash._getnative "^3.0.0"
-    lodash.isarguments "^3.0.0"
-    lodash.isarray "^3.0.0"
-
-lodash.pickby@^4.0.0:
+lodash.pickby@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.pickby/-/lodash.pickby-4.6.0.tgz#7dea21d8c18d7703a27c704c15d3b84a67e33aff"
 
-lodash.restparam@^3.0.0:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
-
-lodash.words@^3.0.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/lodash.words/-/lodash.words-3.2.0.tgz#4e2a8649bc08745b17c695b1a3ce8fee596623b3"
-  dependencies:
-    lodash._root "^3.0.0"
-
 lodash@^4.0.0, lodash@^4.14.0, lodash@^4.16.4, lodash@^4.2.0, lodash@^4.6.1, lodash@~4.16.4:
   version "4.16.6"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.16.6.tgz#d22c9ac660288f3843e16ba7d2b5d06cca27d777"
@@ -2644,6 +2548,13 @@ memory-fs@~0.3.0:
     errno "^0.1.3"
     readable-stream "^2.0.1"
 
+memory-fs@~0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
+  dependencies:
+    errno "^0.1.3"
+    readable-stream "^2.0.1"
+
 meow@^3.7.0:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
@@ -2695,7 +2606,7 @@ mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.7:
   dependencies:
     mime-db "~1.24.0"
 
-mime@^1.2.11, mime@^1.3.4, mime@1.3.4:
+mime@1.3.4, mime@^1.2.11, mime@^1.3.4:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53"
 
@@ -2709,25 +2620,21 @@ min-document@^2.19.0:
   dependencies:
     dom-walk "^0.1.0"
 
-minimatch@^3.0.0, minimatch@^3.0.2, minimatch@~3.0.2, "minimatch@2 || 3":
+minimatch@^3.0.0, minimatch@^3.0.2, minimatch@~3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.3.tgz#2a4e4090b96b2db06a9d7df01055a62a77c9b774"
   dependencies:
     brace-expansion "^1.0.0"
 
+minimist@0.0.8, minimist@~0.0.1:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
+
 minimist@^1.1.3, minimist@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
 
-minimist@~0.0.1:
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
-
-minimist@0.0.8:
-  version "0.0.8"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
-
-mkdirp@^0.5.0, mkdirp@^0.5.1, "mkdirp@>=0.5 0", mkdirp@~0.5.0, mkdirp@~0.5.1:
+"mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
   dependencies:
@@ -2789,32 +2696,32 @@ node-gyp@^3.3.1:
     tar "^2.0.0"
     which "1"
 
-node-libs-browser@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-0.6.0.tgz#244806d44d319e048bc8607b5cc4eaf9a29d2e3c"
+node-libs-browser@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-0.7.0.tgz#3e272c0819e308935e26674408d7af0e1491b83b"
   dependencies:
     assert "^1.1.1"
-    browserify-zlib "~0.1.4"
+    browserify-zlib "^0.1.4"
     buffer "^4.9.0"
     console-browserify "^1.1.0"
-    constants-browserify "0.0.1"
-    crypto-browserify "~3.2.6"
+    constants-browserify "^1.0.0"
+    crypto-browserify "3.3.0"
     domain-browser "^1.1.1"
     events "^1.0.0"
-    http-browserify "^1.3.2"
-    https-browserify "0.0.0"
-    os-browserify "~0.1.2"
+    https-browserify "0.0.1"
+    os-browserify "^0.2.0"
     path-browserify "0.0.0"
     process "^0.11.0"
     punycode "^1.2.4"
-    querystring-es3 "~0.2.0"
-    readable-stream "^1.1.13"
-    stream-browserify "^1.0.0"
-    string_decoder "~0.10.25"
-    timers-browserify "^1.0.1"
+    querystring-es3 "^0.2.0"
+    readable-stream "^2.0.5"
+    stream-browserify "^2.0.1"
+    stream-http "^2.3.1"
+    string_decoder "^0.10.25"
+    timers-browserify "^2.0.2"
     tty-browserify "0.0.0"
-    url "~0.10.1"
-    util "~0.10.3"
+    url "^0.11.0"
+    util "^0.10.3"
     vm-browserify "0.0.4"
 
 node-pre-gyp@^0.6.29:
@@ -2832,8 +2739,8 @@ node-pre-gyp@^0.6.29:
     tar-pack "~3.3.0"
 
 node-sass@^3.7.0:
-  version "3.10.1"
-  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-3.10.1.tgz#c535b2e1a5439240591e06d7308cb663820d616c"
+  version "3.13.1"
+  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-3.13.1.tgz#7240fbbff2396304b4223527ed3020589c004fc2"
   dependencies:
     async-foreach "^0.1.3"
     chalk "^1.1.1"
@@ -2856,7 +2763,7 @@ node-uuid@~1.4.7:
   version "1.4.7"
   resolved "https://registry.yarnpkg.com/node-uuid/-/node-uuid-1.4.7.tgz#6da5a17668c4b3dd59623bda11cf7fa4c1f60a6f"
 
-nopt@~3.0.6, "nopt@2 || 3":
+"nopt@2 || 3", nopt@~3.0.6:
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
   dependencies:
@@ -2888,18 +2795,18 @@ normalize-url@^1.4.0:
     query-string "^4.1.0"
     sort-keys "^1.0.0"
 
-npmlog@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.0.0.tgz#e094503961c70c1774eb76692080e8d578a9f88f"
+"npmlog@0 || 1 || 2 || 3":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-3.1.2.tgz#2d46fa874337af9498a2f12bb43d8d0be4a36873"
   dependencies:
     are-we-there-yet "~1.1.2"
     console-control-strings "~1.1.0"
     gauge "~2.6.0"
     set-blocking "~2.0.0"
 
-"npmlog@0 || 1 || 2 || 3":
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-3.1.2.tgz#2d46fa874337af9498a2f12bb43d8d0be4a36873"
+npmlog@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.0.0.tgz#e094503961c70c1774eb76692080e8d578a9f88f"
   dependencies:
     are-we-there-yet "~1.1.2"
     console-control-strings "~1.1.0"
@@ -2945,13 +2852,7 @@ on-finished@~2.3.0:
   dependencies:
     ee-first "1.1.1"
 
-once@^1.3.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
-  dependencies:
-    wrappy "1"
-
-once@~1.3.3:
+once@^1.3.0, once@~1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/once/-/once-1.3.3.tgz#b2e261557ce4c314ec8304f3fa82663e4297ca20"
   dependencies:
@@ -2964,11 +2865,11 @@ optimist@~0.6.0:
     minimist "~0.0.1"
     wordwrap "~0.0.2"
 
-os-browserify@~0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.1.2.tgz#49ca0293e0b19590a5f5de10c7f265a617d8fe54"
+os-browserify@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.2.1.tgz#63fc4ccee5d2d7763d26bbf8601078e6c2e0044f"
 
-os-homedir@^1.0.0:
+os-homedir@^1.0.0, os-homedir@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
 
@@ -3148,12 +3049,37 @@ postcss-filter-plugins@^2.0.0:
     postcss "^5.0.4"
     uniqid "^4.0.0"
 
-postcss-loader@^0.9.1:
-  version "0.9.1"
-  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-0.9.1.tgz#87a3e70f58e46d68a75badc6725d9ea4773fd1d7"
+postcss-load-config@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-1.0.0.tgz#1399f60dcd6bd9c3124b2eb22960f77f9dc08b3d"
+  dependencies:
+    cosmiconfig "^2.1.0"
+    object-assign "^4.1.0"
+    postcss-load-options "^1.0.2"
+    postcss-load-plugins "^2.0.0"
+
+postcss-load-options@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-load-options/-/postcss-load-options-1.0.2.tgz#b99eb5759a588f4b2dd8b6471c6985f72060e7b0"
+  dependencies:
+    cosmiconfig "^2.1.0"
+    object-assign "^4.1.0"
+
+postcss-load-plugins@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-plugins/-/postcss-load-plugins-2.1.0.tgz#dbb6f46271df8d16e19b5d691ebda5175ce424a0"
+  dependencies:
+    cosmiconfig "^2.1.1"
+    object-assign "^4.1.0"
+
+postcss-loader@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-1.2.1.tgz#8809ab184a9f903a01f660385f2e296ff563d22c"
   dependencies:
-    loader-utils "^0.2.14"
-    postcss "^5.0.19"
+    loader-utils "^0.2.16"
+    object-assign "^4.1.0"
+    postcss "^5.2.6"
+    postcss-load-config "^1.0.0"
 
 postcss-merge-idents@^2.1.5:
   version "2.1.7"
@@ -3318,9 +3244,9 @@ postcss-zindex@^2.0.1:
     postcss "^5.0.4"
     uniqs "^2.0.0"
 
-postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.19, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.4:
-  version "5.2.5"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.5.tgz#ec428c27dffc7fac65961340a9b022fa4af5f056"
+postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.6:
+  version "5.2.6"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.6.tgz#a252cd67cd52585035f17e9ad12b35137a7bdd9e"
   dependencies:
     chalk "^1.1.3"
     js-base64 "^2.1.9"
@@ -3350,7 +3276,7 @@ process-nextick-args@~1.0.6:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
 
-process@^0.11.0, process@~0.11.0:
+process@^0.11.0:
   version "0.11.9"
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.9.tgz#7bd5ad21aa6253e7da8682264f1e11d11c0318c1"
 
@@ -3379,14 +3305,14 @@ pseudomap@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
 
-punycode@^1.2.4, punycode@^1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
-
 punycode@1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
 
+punycode@^1.2.4, punycode@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+
 q-io@1.13.2:
   version "1.13.2"
   resolved "https://registry.yarnpkg.com/q-io/-/q-io-1.13.2.tgz#eea130d481ddb5e1aa1bc5a66855f7391d06f003"
@@ -3398,10 +3324,14 @@ q-io@1.13.2:
     qs "^1.2.1"
     url2 "^0.0.0"
 
-q@^1.0.1, q@^1.1.2, q@1.4.1:
+q@1.4.1, q@^1.0.1, q@^1.1.2:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.4.1.tgz#55705bcd93c5f3673530c2c2cbc0c2b3addc286e"
 
+qs@6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.2.0.tgz#3b7848c03c2dece69a9522b0fae8c4126d745f3b"
+
 qs@^1.2.1:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/qs/-/qs-1.2.2.tgz#19b57ff24dc2a99ce1f8bdf6afcda59f8ef61f88"
@@ -3410,10 +3340,6 @@ qs@~6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.3.0.tgz#f403b264f23bc01228c74131b407f18d5ea5d442"
 
-qs@6.2.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.2.0.tgz#3b7848c03c2dece69a9522b0fae8c4126d745f3b"
-
 query-string@^3.0.0:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/query-string/-/query-string-3.0.3.tgz#ae2e14b4d05071d4e9b9eb4873c35b0dcd42e638"
@@ -3427,11 +3353,11 @@ query-string@^4.1.0:
     object-assign "^4.1.0"
     strict-uri-encode "^1.0.0"
 
-querystring-es3@~0.2.0:
+querystring-es3@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
 
-querystring@^0.2.0, querystring@0.2.0:
+querystring@0.2.0, querystring@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
 
@@ -3460,8 +3386,8 @@ rc@~1.1.6:
     strip-json-comments "~1.0.4"
 
 react-css-themr@^1.2.0:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/react-css-themr/-/react-css-themr-1.4.1.tgz#26fa63fe0a8f7343b019f088f88475ca89da2d5a"
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/react-css-themr/-/react-css-themr-1.7.0.tgz#dd8b04027e3967ed4ecfdd87922d215f4bc55be7"
   dependencies:
     invariant "^2.2.1"
 
@@ -3470,8 +3396,12 @@ react-deep-force-update@^1.0.0:
   resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-1.0.1.tgz#f911b5be1d2a6fe387507dd6e9a767aa2924b4c7"
 
 react-dom@^15.2.0:
-  version "15.3.2"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.3.2.tgz#c46b0aa5380d7b838e7a59c4a7beff2ed315531f"
+  version "15.4.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.4.1.tgz#d54c913261aaedb17adc20410d029dcc18a1344a"
+  dependencies:
+    fbjs "^0.8.1"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.0"
 
 react-proxy@^1.1.7:
   version "1.1.8"
@@ -3502,8 +3432,8 @@ react-transform-hmr@^1.0.4:
     react-proxy "^1.1.7"
 
 react@^15.2.0:
-  version "15.3.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-15.3.2.tgz#a7bccd2fee8af126b0317e222c28d1d54528d09e"
+  version "15.4.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-15.4.1.tgz#498e918602677a3983cd0fd206dfe700389a0dd6"
   dependencies:
     fbjs "^0.8.4"
     loose-envify "^1.1.0"
@@ -3524,27 +3454,6 @@ read-pkg@^1.0.0:
     normalize-package-data "^2.3.2"
     path-type "^1.0.0"
 
-readable-stream@^1.0.27-1, readable-stream@^1.1.13:
-  version "1.1.14"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.1"
-    isarray "0.0.1"
-    string_decoder "~0.10.x"
-
-"readable-stream@^2.0.0 || ^1.1.13", readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@~2.1.4:
-  version "2.1.5"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.1.5.tgz#66fa8b720e1438b364681f2ad1a63c618448c9d0"
-  dependencies:
-    buffer-shims "^1.0.0"
-    core-util-is "~1.0.0"
-    inherits "~2.0.1"
-    isarray "~1.0.0"
-    process-nextick-args "~1.0.6"
-    string_decoder "~0.10.x"
-    util-deprecate "~1.0.1"
-
 readable-stream@1.0:
   version "1.0.34"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
@@ -3563,6 +3472,18 @@ readable-stream@1.1:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
+"readable-stream@^2.0.0 || ^1.1.13", readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.1.0, readable-stream@~2.1.4:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.1.5.tgz#66fa8b720e1438b364681f2ad1a63c618448c9d0"
+  dependencies:
+    buffer-shims "^1.0.0"
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    string_decoder "~0.10.x"
+    util-deprecate "~1.0.1"
+
 readdirp@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.1.0.tgz#4ed0ad060df3073300c48440373f72d1cc642d78"
@@ -3582,8 +3503,8 @@ recast@~0.11.12:
     source-map "~0.5.0"
 
 redbox-react@^1.2.4:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/redbox-react/-/redbox-react-1.3.2.tgz#bc12ca4f88705d29aaace7a12183d3ec14dd33f1"
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/redbox-react/-/redbox-react-1.3.3.tgz#63ec9c2cb9c620c46e2b9f8543b4898f1b787e41"
   dependencies:
     error-stack-parser "^1.3.6"
     object-assign "^4.0.1"
@@ -3613,9 +3534,9 @@ regenerate@^1.2.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.1.tgz#0300203a5d2fdcf89116dce84275d011f5903f33"
 
-regenerator-runtime@^0.9.5:
-  version "0.9.5"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.9.5.tgz#403d6d40a4bdff9c330dd9392dcbb2d9a8bba1fc"
+regenerator-runtime@^0.10.0:
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.1.tgz#257f41961ce44558b18f7814af48c17559f9faeb"
 
 regex-cache@^0.4.2:
   version "0.4.3"
@@ -3678,7 +3599,7 @@ repeating@^2.0.0:
   dependencies:
     is-finite "^1.0.0"
 
-request@^2.61.0, request@^2.75.0, request@2:
+request@2, request@^2.61.0, request@^2.75.0:
   version "2.76.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.76.0.tgz#be44505afef70360a0436955106be3945d95560e"
   dependencies:
@@ -3707,6 +3628,10 @@ require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
 
+require-from-string@^1.1.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-1.2.1.tgz#529c9ccef27380adfec9a2f965b649bbee636418"
+
 require-main-filename@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
@@ -3717,7 +3642,7 @@ right-align@^0.1.1:
   dependencies:
     align-text "^0.1.1"
 
-rimraf@~2.5.1, rimraf@~2.5.4, rimraf@2:
+rimraf@2, rimraf@^2.5.4, rimraf@~2.5.1, rimraf@~2.5.4:
   version "2.5.4"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.5.4.tgz#96800093cbf1a0c86bd95b4625467535c29dfa04"
   dependencies:
@@ -3736,8 +3661,8 @@ sass-graph@^2.1.1:
     yargs "^4.7.1"
 
 sass-loader@^4.0.0:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-4.0.2.tgz#a616eb770366543e64f547c8630f39c4da75f15d"
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-4.1.0.tgz#fd8604c5bf90001b173bb27540e8f2f5ed64602b"
   dependencies:
     async "^2.0.1"
     loader-utils "^0.2.15"
@@ -3747,7 +3672,7 @@ sax@~1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.1.tgz#7b8e656190b228e81a66aea748480d828cd2d37a"
 
-semver@~5.3.0, "semver@2 || 3 || 4 || 5", "semver@2.x || 3.x || 4 || 5":
+"semver@2 || 3 || 4 || 5", "semver@2.x || 3.x || 4 || 5", semver@~5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
 
@@ -3793,6 +3718,10 @@ set-immediate-shim@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
 
+setimmediate@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+
 setprototypeof@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.0.1.tgz#52009b27888c4dc48f591949c0a8275834c1ca7e"
@@ -3831,22 +3760,26 @@ source-list-map@^0.1.4, source-list-map@~0.1.0:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.6.tgz#e1e6f94f0b40c4d28dcf8f5b8766e0e45636877f"
 
+source-list-map@~0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.7.tgz#d4b5ce2a46535c72c7e8527c71a77d250618172e"
+
 source-map-support@^0.4.2:
   version "0.4.6"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.6.tgz#32552aa64b458392a85eab3b0b5ee61527167aeb"
   dependencies:
     source-map "^0.5.3"
 
-source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.0, source-map@~0.5.1, source-map@~0.5.3:
-  version "0.5.6"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
-
-source-map@~0.4.1, source-map@0.4.x:
+source-map@0.4.x, source-map@~0.4.1:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
   dependencies:
     amdefine ">=0.0.4"
 
+source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.0, source-map@~0.5.1, source-map@~0.5.3:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
+
 spdx-correct@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-1.0.2.tgz#4b3073d933ff51f3912f03ac5519498a4150db40"
@@ -3888,21 +3821,27 @@ stackframe@^0.3.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.0.tgz#8e55758cb20e7682c1f4fce8dcab30bf01d1e07a"
 
-stream-browserify@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-1.0.0.tgz#bf9b4abfb42b274d751479e44e0ff2656b6f1193"
+stream-browserify@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db"
   dependencies:
     inherits "~2.0.1"
-    readable-stream "^1.0.27-1"
+    readable-stream "^2.0.2"
+
+stream-http@^2.3.1:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.5.0.tgz#585eee513217ed98fe199817e7313b6f772a6802"
+  dependencies:
+    builtin-status-codes "^2.0.0"
+    inherits "^2.0.1"
+    readable-stream "^2.1.0"
+    to-arraybuffer "^1.0.0"
+    xtend "^4.0.0"
 
 strict-uri-encode@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
 
-string_decoder@~0.10.25, string_decoder@~0.10.x:
-  version "0.10.31"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
-
 string-width@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
@@ -3911,6 +3850,10 @@ string-width@^1.0.1:
     is-fullwidth-code-point "^1.0.0"
     strip-ansi "^3.0.0"
 
+string_decoder@^0.10.25, string_decoder@~0.10.x:
+  version "0.10.31"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
+
 stringstream@~0.0.4:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878"
@@ -4001,11 +3944,11 @@ through@~2.3.6:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
 
-timers-browserify@^1.0.1:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-1.4.2.tgz#c9c58b575be8407375cb5e2462dacee74359f41d"
+timers-browserify@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.2.tgz#ab4883cf597dcd50af211349a00fbca56ac86b86"
   dependencies:
-    process "~0.11.0"
+    setimmediate "^1.0.4"
 
 title-case@^2.1.0:
   version "2.1.0"
@@ -4014,6 +3957,10 @@ title-case@^2.1.0:
     no-case "^2.2.0"
     upper-case "^1.0.3"
 
+to-arraybuffer@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
+
 to-fast-properties@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.2.tgz#f3f5c0c3ba7299a7ef99427e44633257ade43320"
@@ -4062,7 +4009,7 @@ ua-parser-js@^0.7.9:
   version "0.7.10"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.10.tgz#917559ddcce07cbc09ece7d80495e4c268f4ef9f"
 
-uglify-js@~2.7.3, uglify-js@2.7.x:
+uglify-js@2.7.x, uglify-js@~2.7.3:
   version "2.7.4"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.7.4.tgz#a295a0de12b6a650c031c40deb0dc40b14568bd2"
   dependencies:
@@ -4107,22 +4054,22 @@ upper-case@^1.0.3, upper-case@^1.1.0, upper-case@^1.1.1, upper-case@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
 
-url@~0.10.1:
-  version "0.10.3"
-  resolved "https://registry.yarnpkg.com/url/-/url-0.10.3.tgz#021e4d9c7705f21bbf37d03ceb58767402774c64"
-  dependencies:
-    punycode "1.3.2"
-    querystring "0.2.0"
-
 url2@^0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/url2/-/url2-0.0.0.tgz#4eaabd1d5c3ac90d62ab4485c998422865a04b1a"
 
+url@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
+  dependencies:
+    punycode "1.3.2"
+    querystring "0.2.0"
+
 util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
 
-util@~0.10.3, util@0.10.3:
+util@0.10.3, util@^0.10.3:
   version "0.10.3"
   resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
   dependencies:
@@ -4195,25 +4142,25 @@ weak-map@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/weak-map/-/weak-map-1.0.0.tgz#b66e56a9df0bd25a76bbf1b514db129080614a37"
 
-webpack-core@~0.6.0:
-  version "0.6.8"
-  resolved "https://registry.yarnpkg.com/webpack-core/-/webpack-core-0.6.8.tgz#edf9135de00a6a3c26dd0f14b208af0aa4af8d0a"
+webpack-core@~0.6.9:
+  version "0.6.9"
+  resolved "https://registry.yarnpkg.com/webpack-core/-/webpack-core-0.6.9.tgz#fc571588c8558da77be9efb6debdc5a3b172bdc2"
   dependencies:
-    source-list-map "~0.1.0"
+    source-list-map "~0.1.7"
     source-map "~0.4.1"
 
 webpack-dev-middleware@^1.6.1:
-  version "1.8.4"
-  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.8.4.tgz#e8765c9122887ce9e3abd4cc9c3eb31b61e0948d"
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.9.0.tgz#a1c67a3dfd8a5c5d62740aa0babe61758b4c84aa"
   dependencies:
-    memory-fs "~0.3.0"
+    memory-fs "~0.4.1"
     mime "^1.3.4"
     path-is-absolute "^1.0.0"
     range-parser "^1.0.3"
 
 webpack-hot-middleware@^2.10.0:
-  version "2.13.1"
-  resolved "https://registry.yarnpkg.com/webpack-hot-middleware/-/webpack-hot-middleware-2.13.1.tgz#104350e044be58ba3b7ef1c39513d69562841975"
+  version "2.13.2"
+  resolved "https://registry.yarnpkg.com/webpack-hot-middleware/-/webpack-hot-middleware-2.13.2.tgz#6500b15e6d4f1a9590f8df708183f4d2ac2c3e9e"
   dependencies:
     ansi-html "0.0.6"
     html-entities "^1.2.0"
@@ -4228,8 +4175,8 @@ webpack-sources@^0.1.0:
     source-map "~0.5.3"
 
 webpack@^1.13.0:
-  version "1.13.3"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-1.13.3.tgz#e79c46fe5a37c5ca70084ba0894c595cdcb42815"
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-1.14.0.tgz#54f1ffb92051a328a5b2057d6ae33c289462c823"
   dependencies:
     acorn "^3.0.0"
     async "^1.3.0"
@@ -4239,13 +4186,13 @@ webpack@^1.13.0:
     loader-utils "^0.2.11"
     memory-fs "~0.3.0"
     mkdirp "~0.5.0"
-    node-libs-browser "^0.6.0"
+    node-libs-browser "^0.7.0"
     optimist "~0.6.0"
     supports-color "^3.1.0"
     tapable "~0.1.8"
     uglify-js "~2.7.3"
     watchpack "^0.2.1"
-    webpack-core "~0.6.0"
+    webpack-core "~0.6.9"
 
 whatwg-fetch@>=0.10.0:
   version "1.0.0"
@@ -4259,7 +4206,7 @@ which-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
 
-which@^1.2.9, which@1:
+which@1, which@^1.2.9:
   version "1.2.11"
   resolved "https://registry.yarnpkg.com/which/-/which-1.2.11.tgz#c8b2eeea6b8c1659fa7c1dd4fdaabe9533dc5e8b"
   dependencies:
@@ -4271,19 +4218,15 @@ wide-align@^1.1.0:
   dependencies:
     string-width "^1.0.1"
 
-window-size@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.2.0.tgz#b4315bb4214a3d7058ebeee892e13fa24d98b075"
-
 window-size@0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
 
-wordwrap@~0.0.2:
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+window-size@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.2.0.tgz#b4315bb4214a3d7058ebeee892e13fa24d98b075"
 
-wordwrap@0.0.2:
+wordwrap@0.0.2, wordwrap@~0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
 
@@ -4297,10 +4240,6 @@ wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
 
-wrench@1.5.8:
-  version "1.5.8"
-  resolved "https://registry.yarnpkg.com/wrench/-/wrench-1.5.8.tgz#7a31c97f7869246d76c5cf2f5c977a1c4c8e5ab5"
-
 xml-char-classes@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/xml-char-classes/-/xml-char-classes-1.0.0.tgz#64657848a20ffc5df583a42ad8a277b4512bbc4d"
@@ -4351,4 +4290,3 @@ yargs@~3.10.0:
     cliui "^2.1.0"
     decamelize "^1.0.0"
     window-size "0.1.0"
-

From 85b601099951aed0437f83bb4e51b0b5a552a530 Mon Sep 17 00:00:00 2001
From: Boris Serdiuk <just-boris@hotmail.com>
Date: Sun, 18 Dec 2016 18:27:12 +0100
Subject: [PATCH 1000/1024] Declare immutability-helper as direct dependency

---
 package.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 6680216a6..0d2ba99f8 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
   "dependencies": {
     "classnames": "^2.2.5",
     "core-js": "^2.4.0",
+    "immutability-helper": "^2.0.0",
     "normalize.css": "^4.2.0",
     "react-css-themr": "^1.7.0"
   },
@@ -115,8 +116,6 @@
   },
   "license": "MIT",
   "peerDependencies": {
-    "classnames": "^2.2.0",
-    "immutability-helper": "^2.0.0",
     "react": "^0.14 || ~15.4.0",
     "react-addons-css-transition-group": "^0.14.0 || ~15.4.0",
     "react-dom": "^0.14.0 || ~15.4.0"

From b5e0c6207e7663bc0bb4dfad4d7dd402312f8926 Mon Sep 17 00:00:00 2001
From: katzoo <katzoo@users.noreply.github.com>
Date: Mon, 19 Dec 2016 20:13:36 +0100
Subject: [PATCH 1001/1024] update typings to 1.3.3

---
 components/app_bar/index.d.ts      |  17 ++-
 components/autocomplete/index.d.ts |  35 ++++-
 components/avatar/index.d.ts       |   7 +-
 components/button/index.d.ts       | 183 +++++------------------
 components/card/index.d.ts         |  94 +++++++++++-
 components/checkbox/index.d.ts     |  10 +-
 components/chip/index.d.ts         |   2 +-
 components/date_picker/index.d.ts  |  70 ++++++++-
 components/dialog/index.d.ts       |   8 +-
 components/drawer/index.d.ts       |   2 +-
 components/dropdown/index.d.ts     |   7 +-
 components/font_icon/index.d.ts    |   6 +-
 components/input/index.d.ts        |   9 +-
 components/layout/index.d.ts       |  30 ++--
 components/link/index.d.ts         |   6 +-
 components/list/index.d.ts         | 232 +++++++++++++++++++++--------
 components/menu/index.d.ts         |  12 +-
 components/navigation/index.d.ts   |   2 +-
 components/overlay/index.d.ts      |  55 +++++++
 components/progress_bar/index.d.ts |   2 +-
 components/radio/index.d.ts        |  57 +++++--
 components/ripple/index.d.ts       |  17 ++-
 components/slider/index.d.ts       |   2 +-
 components/snackbar/index.d.ts     |  14 +-
 components/switch/index.d.ts       |   2 +-
 components/table/index.d.ts        | 116 ++++++++++++---
 components/tabs/index.d.ts         |  82 ++++++++--
 components/time_picker/index.d.ts  |  47 +++++-
 components/tooltip/index.d.ts      |  38 ++++-
 29 files changed, 853 insertions(+), 311 deletions(-)
 create mode 100644 components/overlay/index.d.ts

diff --git a/components/app_bar/index.d.ts b/components/app_bar/index.d.ts
index fb868bb1a..dcf07b8e1 100644
--- a/components/app_bar/index.d.ts
+++ b/components/app_bar/index.d.ts
@@ -17,7 +17,7 @@ export interface AppBarTheme {
   /**
    * Used as the app bar title.
    */
-  title ?: string;
+  title?: string;
   /**
    * Added to the left icon app bar element.
    */
@@ -26,9 +26,13 @@ export interface AppBarTheme {
    * Added to the right icon app bar element.
    */
   rightIcon?: string;
+  /**
+   * Added to the root element when the app bar is hidden during scroll.
+   */
+  scrollHide?: string;
 }
 
-interface AppBarProps extends ReactToolbox.Props {
+export interface AppBarProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
@@ -50,7 +54,7 @@ interface AppBarProps extends ReactToolbox.Props {
   /**
    * If it exists it is used as the AppBar left icon
    */
-  leftIcon?: string;
+  leftIcon?: string | React.ReactNode;
   /**
    * Called when the left icon is clicked
    */
@@ -58,11 +62,16 @@ interface AppBarProps extends ReactToolbox.Props {
   /**
    * If it exists it is used as the AppBar right icon
    */
-  rightIcon?: string;
+  rightIcon?: string | React.ReactNode;
   /**
    * Called when the righticon is clicked
    */
   onRightIconClick?: Function;
+  /**
+   * Whether AppBar should be hidden during scroll.
+   * @default false
+   */
+  scrollHide?: boolean;
   /**
    * Classnames object defining the component style.
    */
diff --git a/components/autocomplete/index.d.ts b/components/autocomplete/index.d.ts
index 904a096cc..96173afcc 100644
--- a/components/autocomplete/index.d.ts
+++ b/components/autocomplete/index.d.ts
@@ -1,5 +1,6 @@
 import * as React from "react";
 import ReactToolbox from "../index";
+import { InputTheme } from "../input"
 
 export interface AutocompleteTheme {
   /**
@@ -18,10 +19,6 @@ export interface AutocompleteTheme {
    * Used to style the Input component.
    */
   input?: string;
-  /**
-   * Used for the label.
-   */
-  label?: string;
   /**
    * Used to style each suggestion.
    */
@@ -44,7 +41,12 @@ export interface AutocompleteTheme {
   values?: string;
 }
 
-interface AutocompleteProps extends ReactToolbox.Props {
+export interface AutocompleteProps extends ReactToolbox.Props {
+  /**
+   * Determines if user can create a new option with the current typed value.
+   * @default false
+   */
+  allowCreate?: boolean;
   /**
    * Determines the opening direction. It can be auto, up or down.
    * @default auto
@@ -52,6 +54,7 @@ interface AutocompleteProps extends ReactToolbox.Props {
   direction?: "auto" | "up" | "down";
   /**
    * If true, component will be disabled.
+   * @default false
    */
   disabled?: boolean;
   /**
@@ -59,22 +62,34 @@ interface AutocompleteProps extends ReactToolbox.Props {
    * @default false
    */
   error?: string | React.ReactNode;
+  /**
+   * Whether component should keep focus after value change.
+   * @default false
+   */
+  keepFocusOnChange?: boolean;
   /**
    * The text string to use for the floating label element.
    */
   label?: string | React.ReactNode;
   /**
    * If true, component can hold multiple values.
+   * @default true
    */
   multiple?: boolean;
+  /**
+   * Callback function that is fired when component is blurred.
+   */
+  onBlur?: Function;
   /**
    * Callback function that is fired when the components's value changes.
-   * @default auto
    */
   onChange?: Function;
+  /**
+   * Callback function that is fired when component is focused.
+   */
+  onFocus?: Function;
   /**
    * Callback function that is fired when the components's query value changes.
-   * @default auto
    */
   onQueryChange?: Function;
   /**
@@ -104,11 +119,15 @@ interface AutocompleteProps extends ReactToolbox.Props {
   /**
    * Classnames object defining the component style.
    */
-  theme?: AutocompleteTheme;
+  theme?: AutocompleteTheme & InputTheme;
   /**
    * Value or array of values currently selected component.
    */
   value?: any;
+  /**
+   * Additional properties passed to inner Input component.
+   */
+  [key: string]: any;
 }
 
 export class Autocomplete extends React.Component<AutocompleteProps, {}> { }
diff --git a/components/avatar/index.d.ts b/components/avatar/index.d.ts
index c2ddc6950..2a4272081 100644
--- a/components/avatar/index.d.ts
+++ b/components/avatar/index.d.ts
@@ -16,13 +16,14 @@ export interface AvatarTheme {
   letter?: string;
 }
 
-interface AvatarProps extends ReactToolbox.Props {
+export interface AvatarProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
   children?: React.ReactNode;
   /**
    * Set to true if your image is not squared so it will be used as a cover for the element.
+   * @default false
    */
   cover?: boolean;
   /**
@@ -41,6 +42,10 @@ interface AvatarProps extends ReactToolbox.Props {
    * A title for the image. If no image is provided, the first letter will be displayed as the avatar.
    */
   title?: string;
+  /**
+   * Additional properties for component root element.
+   */
+  [key: string]: any;
 }
 
 export class Avatar extends React.Component<AvatarProps, {}> { }
diff --git a/components/button/index.d.ts b/components/button/index.d.ts
index e713f70aa..62ec7044b 100644
--- a/components/button/index.d.ts
+++ b/components/button/index.d.ts
@@ -52,7 +52,7 @@ export interface ButtonTheme {
   toggle?: string;
 }
 
-interface ButtonProps extends ReactToolbox.Props {
+interface ButtonBaseProps extends ReactToolbox.Props {
   /**
    * Indicates if the button should have accent color.
    * @default false
@@ -67,20 +67,6 @@ interface ButtonProps extends ReactToolbox.Props {
    * @default false
    */
   disabled?: boolean;
-  /**
-   * If true, the button will have a flat look.
-   * @default false
-   */
-  flat?: boolean;
-  /**
-   * If true, the button will have a floating look.
-   * @default false
-   */
-  floating?: boolean;
-  /**
-   * Creates a link for the button.
-   */
-  href?: string;
   /**
    * Value of the icon (See Font Icon Component).
    */
@@ -90,128 +76,73 @@ interface ButtonProps extends ReactToolbox.Props {
    */
   inverse?: boolean;
   /**
-   * The text string to use for the name of the button.
+   * Set it to false if you don't want the neutral styles to be included.
+   * @default true
    */
-  label?: string;
+  neutral?: boolean;
   /**
-   * To be used with floating button. If true, the button will be smaller.
-   * @default false
+   * Fires after the mouse leaves the Component.
    */
-  mini?: boolean;
+  onMouseLeave?: Function;
   /**
-   * Set it to false if you don't want the neutral styles to be included.
-   * @default true
+   * Fires after the mouse is released from the Component.
    */
-  neutral?: boolean;
+  onMouseUp?: Function;
   /**
    * Indicates if the button should have primary color.
    * @default false
    */
   primary?: boolean;
-  /**
-   * If true, the button will have a raised look.
-   * @default false
-   */
-  raised?: boolean;
   /**
    * If true, component will have a ripple effect on click.
    * @default true
    */
   ripple?: boolean;
   /**
-   * Classnames object defining the component style.
-   */
-  theme?: ButtonTheme;
-}
-
-export class Button extends React.Component<ButtonProps, {}> { }
-
-export interface IconButtonTheme {
-  /**
-   * Used for the root in case button is accent.
-   */
-  accent?: string;
-  /**
-   * Used for the root element in any button.
-   */
-  button?: string;
-  /**
-   * For the icon inside a button.
-   */
-  icon?: string;
-  /**
-   * Used when colors are inverted.
-   */
-  inverse?: string;
-  /**
-   * Used for neutral colored buttons.
-   */
-  neutral?: string;
-  /**
-   * Used for primary buttons when button is primary.
-   */
-  primary?: string;
-  /**
-   * Used for the ripple element.
-   */
-  rippleWrapper?: string;
-  /**
-   * Used for toggle buttons in the root element.
+   * Component root container type.
+   * @default button
    */
-  toggle?: string;
+  type?: string;
 }
 
-interface IconButtonProps extends ReactToolbox.Props {
+export interface ButtonProps extends ButtonBaseProps {
   /**
-   * Indicates if the button should have accent color.
+   * If true, the button will have a flat look.
    * @default false
    */
-  accent?: boolean;
-  /**
-   * Children to pass through the component.
-   */
-  children?: React.ReactNode;
+  flat?: boolean;
   /**
-   * If true, component will be disabled.
+   * If true, the button will have a floating look.
    * @default false
    */
-  disabled?: boolean;
+  floating?: boolean;
   /**
    * Creates a link for the button.
    */
   href?: string;
   /**
-   * Value of the icon (See Font Icon Component).
-   */
-  icon?: React.ReactNode | string;
-  /**
-   * If true, the neutral colors are inverted. Useful to put a button over a dark background.
-   */
-  inverse?: boolean;
-  /**
-   * Set it to false if you don't want the neutral styles to be included.
-   * @default true
+   * The text string to use for the name of the button.
    */
-  neutral?: boolean;
+  label?: string;
   /**
-   * Indicates if the button should have primary color.
+   * To be used with floating button. If true, the button will be smaller.
    * @default false
    */
-  primary?: boolean;
+  mini?: boolean;
   /**
-   * If true, component will have a ripple effect on click.
-   * @default true
+   * If true, the button will have a raised look.
+   * @default false
    */
-  ripple?: boolean;
+  raised?: boolean;
   /**
    * Classnames object defining the component style.
    */
-  theme?: IconButtonTheme;
+  theme?: ButtonTheme;
 }
 
-export class IconButton extends React.Component<IconButtonProps, {}> { }
+export class Button extends React.Component<ButtonProps, {}> { }
 
-export interface BrowseButtonTheme {
+export interface IconButtonTheme {
   /**
    * Used for the root in case button is accent.
    */
@@ -220,14 +151,6 @@ export interface BrowseButtonTheme {
    * Used for the root element in any button.
    */
   button?: string;
-  /**
-   * Used when the button is flat for the root element.
-   */
-  flat?: string;
-  /**
-   * Used when the button is floating for the root element.
-   */
-  floating?: string;
   /**
    * For the icon inside a button.
    */
@@ -236,10 +159,6 @@ export interface BrowseButtonTheme {
    * Used when colors are inverted.
    */
   inverse?: string;
-  /**
-   * Used for mini floating buttons.
-   */
-  mini?: string;
   /**
    * Used for neutral colored buttons.
    */
@@ -248,10 +167,6 @@ export interface BrowseButtonTheme {
    * Used for primary buttons when button is primary.
    */
   primary?: string;
-  /**
-   * Used when the button is raised for root element.
-   */
-  raised?: string;
   /**
    * Used for the ripple element.
    */
@@ -262,21 +177,22 @@ export interface BrowseButtonTheme {
   toggle?: string;
 }
 
-interface BrowseButtonProps extends ReactToolbox.Props {
+export interface IconButtonProps extends ButtonBaseProps {
   /**
-   * Indicates if the button should have accent color.
-   * @default false
-   */
-  accent?: boolean;
-  /**
-   * Children to pass through the component.
+   * Creates a link for the button.
    */
-  children?: React.ReactNode;
+  href?: string;
   /**
-   * If true, component will be disabled.
-   * @default false
+   * Classnames object defining the component style.
    */
-  disabled?: boolean;
+  theme?: IconButtonTheme;
+}
+
+export class IconButton extends React.Component<IconButtonProps, {}> { }
+
+export interface BrowseButtonTheme extends ButtonTheme { }
+
+export interface BrowseButtonProps extends ButtonBaseProps {
   /**
    * If true, the button will have a flat look.
    * @default false
@@ -291,14 +207,6 @@ interface BrowseButtonProps extends ReactToolbox.Props {
    * Creates a link for the button.
    */
   href?: string;
-  /**
-   * Value of the icon (See Font Icon Component).
-   */
-  icon?: React.ReactNode | string;
-  /**
-   * If true, the neutral colors are inverted. Useful to put a button over a dark background.
-   */
-  inverse?: boolean;
   /**
    * The text string to use for the name of the button.
    */
@@ -308,26 +216,11 @@ interface BrowseButtonProps extends ReactToolbox.Props {
    * @default false
    */
   mini?: boolean;
-  /**
-   * Set it to false if you don't want the neutral styles to be included.
-   * @default true
-   */
-  neutral?: boolean;
-  /**
-   * Indicates if the button should have primary color.
-   * @default false
-   */
-  primary?: boolean;
   /**
    * If true, the button will have a raised look.
    * @default false
    */
   raised?: boolean;
-  /**
-   * If true, component will have a ripple effect on click.
-   * @default true
-   */
-  ripple?: boolean;
   /**
    * Classnames object defining the component style.
    */
diff --git a/components/card/index.d.ts b/components/card/index.d.ts
index 824771fac..090a5d931 100644
--- a/components/card/index.d.ts
+++ b/components/card/index.d.ts
@@ -2,29 +2,46 @@ import * as React from "react";
 import ReactToolbox from "../index";
 
 export interface CardTheme {
+  /**
+   * Class used for the root element.
+   */
   card?: string;
+  /**
+    *Added to the root element in case the card is raised.
+   */
   raised?: string;
 }
 
-interface CardProps extends ReactToolbox.Props {
+export interface CardProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
   children?: React.ReactNode;
+  /**
+   * Increases the shadow depth to appear elevated.
+   * @default false
+   */
   raised?: boolean;
   /**
    * Classnames object defining the component style.
    */
   theme?: CardTheme;
+  /**
+   * Additional properties passed to component root.
+   */
+  [key: string]: any;
 }
 
 export class Card extends React.Component<CardProps, {}> { }
 
 export interface CardActionsTheme {
+  /**
+   * Used for a wrapper around actions as the root element.
+   */
   cardActions?: string;
 }
 
-interface CardActionsProps extends ReactToolbox.Props {
+export interface CardActionsProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
@@ -33,40 +50,78 @@ interface CardActionsProps extends ReactToolbox.Props {
    * Classnames object defining the component style.
    */
   theme?: CardActionsTheme;
+  /**
+   * Additional properties passed to component root.
+   */
+  [key: string]: any;
 }
 
 export class CardActions extends React.Component<CardActionsProps, {}> { }
 
 export interface CardMediaTheme {
+  /**
+   * Added to the element root.
+   */
   cardMedia?: string;
+  /**
+   * Used for the content element.
+   */
   content?: string;
+  /**
+   * Added to content element if its overlayed.
+   */
   contentOverlay?: string;
+  /**
+   * Added to content element if its squared.
+   */
   square?: string;
+  /**
+   * Added to content element if its wide.
+   */
   wide?: string;
 }
 
-interface CardMediaProps extends ReactToolbox.Props {
+export interface CardMediaProps extends ReactToolbox.Props {
+  /**
+   * Forces a 16:9 or 1:1 aspect ratio respectively. Unset, the media area will have a flexible height.
+   */
   aspectRatio?: "wide" | "square";
   /**
    * Children to pass through the component.
    */
   children?: React.ReactNode;
+  /**
+   * Sets the background color.
+   */
   color?: string;
+  /**
+   * Creates a dark overlay underneath the child components.
+   */
   contentOverlay?: boolean;
+  /**
+   * Can be used instead of children. Accepts an element or a URL string.
+   */
   image?: React.ReactNode | string;
   /**
    * Classnames object defining the component style.
    */
   theme?: CardMediaTheme;
+  /**
+   * Additional properties passed to component root.
+   */
+  [key: string]: any;
 }
 
 export class CardMedia extends React.Component<CardMediaProps, {}> { }
 
 export interface CardTextTheme {
+  /**
+   * Used for the main root element.
+   */
   cardText?: string;
 }
 
-interface CardTextProps extends ReactToolbox.Props {
+export interface CardTextProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
@@ -75,28 +130,57 @@ interface CardTextProps extends ReactToolbox.Props {
    * Classnames object defining the component style.
    */
   theme?: CardTextTheme;
+  /**
+   * Additional properties passed to component root.
+   */
+  [key: string]: any;
 }
 
 export class CardText extends React.Component<CardTextProps, {}> { }
 
 export interface CardTitleTheme {
+  /**
+   * Class used for the root element.
+   */
+  cardTitle?: string;
+  /**
+   * Added to the root element when the card has no avatar.
+   */
   large?: string;
+  /**
+   * Added to the title element.
+   */
   title?: string;
+  /**
+   * Added to the root element when the card has avatar.
+   */
   small?: string;
+  /**
+   * Added to the subtitle element.
+   */
   subtitle?: string;
 }
 
-interface CardTitleProps extends ReactToolbox.Props {
+export interface CardTitleProps extends ReactToolbox.Props {
+  /**
+   * A string URL or Element to specify an avatar in the left side of the title.
+   */
   avatar?: React.ReactNode | string;
   /**
    * Children to pass through the component.
    */
   children?: React.ReactNode;
+  /**
+   * Text used for the sub header of the card.
+   */
   subtitle?: React.ReactNode | string;
   /**
    * Classnames object defining the component style.
    */
   theme?: CardTitleTheme;
+  /**
+   * Text used for the title of the card.
+   */
   title?: React.ReactNode | string;
 }
 
diff --git a/components/checkbox/index.d.ts b/components/checkbox/index.d.ts
index 29c1045e7..64bd4a1c9 100644
--- a/components/checkbox/index.d.ts
+++ b/components/checkbox/index.d.ts
@@ -32,12 +32,16 @@ export interface CheckboxTheme {
   text?: string;
 }
 
-interface CheckboxProps extends ReactToolbox.Props {
+export interface CheckboxProps extends ReactToolbox.Props {
   /**
    * Value for the checkbox, can be true or false.
    * @default false
    */
   checked?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
   /**
    * If true, the checkbox shown as disabled and cannot be modified.
    * @default false
@@ -63,6 +67,10 @@ interface CheckboxProps extends ReactToolbox.Props {
    * Classnames object defining the component style.
    */
   theme?: CheckboxTheme;
+  /**
+   * Additional properties passed to inner input element.
+   */
+  [key: string]: any;
 }
 
 export class Checkbox extends React.Component<CheckboxProps, {}> { }
diff --git a/components/chip/index.d.ts b/components/chip/index.d.ts
index 832ca408c..f51e1fbd6 100644
--- a/components/chip/index.d.ts
+++ b/components/chip/index.d.ts
@@ -28,7 +28,7 @@ export interface ChipTheme {
   deleteX?: string;
 }
 
-interface ChipProps extends ReactToolbox.Props {
+export interface ChipProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
diff --git a/components/date_picker/index.d.ts b/components/date_picker/index.d.ts
index 6a8ffe91e..7595298d1 100644
--- a/components/date_picker/index.d.ts
+++ b/components/date_picker/index.d.ts
@@ -84,12 +84,30 @@ export interface DatePickerTheme {
   yearsDisplay?: string;
 }
 
-interface DatePickerProps extends ReactToolbox.Props {
+export interface DatePickerProps extends ReactToolbox.Props {
+  /**
+   * Allows to control if the picker should be shown from outside. Beware you should update the prop when the Dialog is closed.
+   * @default false
+   */
+  active?: boolean;
   /**
    * Automatically selects a date upon clicking on a day
    * @default false
    */
   autoOk?: boolean;
+  /**
+   * Label used for cancel button on Dialog.
+   * @default "Cancel"
+   */
+  cancelLabel?: string;
+  /**
+   * An array of date objects which will be disabled in the calendar. All other dates will be enabled.
+   */
+  disabledDates?: Date[];
+  /**
+   * An array of date objects which will be enabled in the calendar. All other dates will be disabled.
+   */
+  enabledDates?: Date[];
   /**
    * Give an error node to display under the field.
    */
@@ -110,6 +128,11 @@ interface DatePickerProps extends ReactToolbox.Props {
    * The text string to use for the floating label element in the input component.
    */
   label?: string;
+  /**
+   * Sets locale for the Dialog.
+   * @default "en"
+   */
+  locale?: "de" | "no" | "en" | "es" | "af" | "ar" | "be" | "bg" | "bn" | "bo" | "br" | "bs" | "ca" | "gl" | "eu" | "pt" | "it" | "fr" | "ru" | "ua" | DatePickerLocale;
   /**
    * Date object with the maximum selectable date.
    */
@@ -122,14 +145,31 @@ interface DatePickerProps extends ReactToolbox.Props {
    * Name for the input field.
    */
   name?: string;
+  /**
+   * Label used for 'OK' button on Dialog.
+   * @default "Ok"
+   */
+  okLabel?: string;
   /**
    * Callback called when the picker value is changed.
    */
   onChange?: Function;
+  /**
+   * Callback fired on Input click.
+   */
+  onClick?: Function;
+  /**
+   * Callback fired after dismissing the Dialog.
+   */
+  onDismiss?: Function;
   /**
    * Callback called when the ESC key is pressed with the overlay active.
    */
   onEscKeyDown?: Function;
+  /**
+   * Callback invoked on Input key press.
+   */
+  onKeyPress?: Function;
   /**
    * Callback to be invoked when the dialog overlay is clicked.
    */
@@ -138,6 +178,11 @@ interface DatePickerProps extends ReactToolbox.Props {
    * The input element will be readonly and look like disabled.
    */
   readonly?: boolean;
+  /**
+   * Set week's first day to Sunday. Default week's first day is Monday.
+   * @default false
+   */
+  sundayFirstDayOfWeek?: boolean;
   /**
    * Classnames object defining the component style.
    */
@@ -148,6 +193,29 @@ interface DatePickerProps extends ReactToolbox.Props {
   value?: Date | string;
 }
 
+export interface DatePickerLocale {
+  /**
+   * Month names.
+   */
+  months?: string[];
+  /**
+   * Month short names.
+   */
+  monthsShort?: string[];
+  /**
+   * Day names starting from Sunday.
+   */
+  weekdays?: string[];
+  /**
+   * Day short names starting from Sunday.
+   */
+  weekdaysShort?: string[];
+  /**
+   * Day letters starting from Sunday.
+   */
+  weekdaysLetter?: string[];
+}
+
 export class DatePicker extends React.Component<DatePickerProps, {}> { }
 
 export default DatePicker;
diff --git a/components/dialog/index.d.ts b/components/dialog/index.d.ts
index eb95ee3ae..e02af38d5 100644
--- a/components/dialog/index.d.ts
+++ b/components/dialog/index.d.ts
@@ -28,7 +28,7 @@ export interface DialogTheme {
   title?: string;
 }
 
-interface DialogActionProps {
+export interface DialogActionProps {
   /**
    * The text string to use for the name of the button.
    */
@@ -39,7 +39,7 @@ interface DialogActionProps {
   onClick?: Function;
 }
 
-interface DialogProps extends ReactToolbox.Props {
+export interface DialogProps extends ReactToolbox.Props {
   /**
    * A array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons.
    */
@@ -83,9 +83,9 @@ interface DialogProps extends ReactToolbox.Props {
   title?: string;
   /**
    * Used to determine the size of the dialog. It can be small, normal or large.
-   * @default normal
+   * @default "normal"
    */
-  type?: string;
+  type?: "small" | "normal" | "large" | string;
 }
 
 export class Dialog extends React.Component<DialogProps, {}> { }
diff --git a/components/drawer/index.d.ts b/components/drawer/index.d.ts
index 2c0a84783..d090305d6 100644
--- a/components/drawer/index.d.ts
+++ b/components/drawer/index.d.ts
@@ -24,7 +24,7 @@ export interface DrawerTheme {
   right?: string;
 }
 
-interface DrawerProps extends ReactToolbox.Props {
+export interface DrawerProps extends ReactToolbox.Props {
   /**
    * If true, the drawer will be visible.
    * @default false
diff --git a/components/dropdown/index.d.ts b/components/dropdown/index.d.ts
index ebf3b10e3..7a3da482c 100644
--- a/components/dropdown/index.d.ts
+++ b/components/dropdown/index.d.ts
@@ -30,6 +30,10 @@ export interface DropdownTheme {
    * Used for the the label element.
    */
   label?: string;
+  /**
+   * Used when dropdown has required attribute.
+   */
+  required?: string;
   /**
    * Used to highlight the selected value.
    */
@@ -52,7 +56,7 @@ export interface DropdownTheme {
   values?: string;
 }
 
-interface DropdownProps extends ReactToolbox.Props {
+export interface DropdownProps extends ReactToolbox.Props {
   /**
    * If true the dropdown will preselect the first item if the supplied value matches none of the options' values.
    * @default true
@@ -110,6 +114,7 @@ interface DropdownProps extends ReactToolbox.Props {
   value?: string | number;
   /**
    * If true, the dropdown has a required attribute.
+   * @default false
    */
   required?: boolean;
 }
diff --git a/components/font_icon/index.d.ts b/components/font_icon/index.d.ts
index 11ca3c014..12c0deb3f 100644
--- a/components/font_icon/index.d.ts
+++ b/components/font_icon/index.d.ts
@@ -1,7 +1,7 @@
 import * as React from "react";
 import ReactToolbox from "../index";
 
-interface FontIconProps extends ReactToolbox.Props {
+export interface FontIconProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
@@ -10,6 +10,10 @@ interface FontIconProps extends ReactToolbox.Props {
    * The key string for the icon you want be displayed.
    */
   value?: React.ReactNode | string;
+  /**
+   * Additional properties passed to component root.
+   */
+  [key: string]: any
 }
 
 export class FontIcon extends React.Component<FontIconProps, {}> { }
diff --git a/components/input/index.d.ts b/components/input/index.d.ts
index b0c082516..1eb9074c1 100644
--- a/components/input/index.d.ts
+++ b/components/input/index.d.ts
@@ -52,7 +52,7 @@ export interface InputTheme {
   withIcon?: string;
 }
 
-interface InputProps extends ReactToolbox.Props {
+export interface InputProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
@@ -117,12 +117,17 @@ interface InputProps extends ReactToolbox.Props {
    * @default false
    */
   required?: boolean;
+  /**
+   * The number of rows the multiline input field has.
+   */
+  rows?:number;
   /**
    * Classnames object defining the component style.
    */
   theme?: InputTheme;
   /**
-   * Type of the input element. It can be a valid HTML5 input type
+   * Type of the input element. It can be a valid HTML5 input type.
+   * @default "text"
    */
   type?: string;
   /**
diff --git a/components/layout/index.d.ts b/components/layout/index.d.ts
index 10004fc25..f06fd16be 100644
--- a/components/layout/index.d.ts
+++ b/components/layout/index.d.ts
@@ -8,7 +8,7 @@ export interface LayoutTheme {
   layout?: string;
 }
 
-interface LayoutProps extends ReactToolbox.Props {
+export interface LayoutProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
@@ -33,11 +33,15 @@ export interface NavDrawerTheme {
   /**
    * Added to the root class for large drawer.
    */
-  lgPermangent?: string;
+  lgPermanent?: string;
+  /**
+   * Added to the root class for large drawer (tablet landscape).
+   */
+  lgTabletPermanent?: string;
   /**
    * Added to the root class for medium drawer.
    */
-  mdPermangent?: string;
+  mdPermanent?: string;
   /**
    * Root class for the drawer.
    */
@@ -58,6 +62,10 @@ export interface NavDrawerTheme {
    * Added to the root class for small drawer.
    */
   smPermanent?: string;
+  /**
+   * Added to the root class for small drawer (tablet portrait).
+   */
+  smTabletPermanent?: string;
   /**
    * Added to the root class if width is wide.
    */
@@ -69,14 +77,14 @@ export interface NavDrawerTheme {
   /**
    * Added to the root class for super big drawer.
    */
-  xxlPermangent?: string;
+  xxlPermanent?: string;
   /**
    * Added to the root class for largest possible drawer.
    */
-  xxxlPermangent?: string;
+  xxxlPermanent?: string;
 }
 
-interface NavDrawerProps extends ReactToolbox.Props {
+export interface NavDrawerProps extends ReactToolbox.Props {
   /**
    * If true, the drawer will be shown as an overlay.
    * @default false
@@ -93,7 +101,7 @@ interface NavDrawerProps extends ReactToolbox.Props {
   /**
    * The breakpoint at which the drawer is automatically pinned.
    */
-  permanentAt?: "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
+  permanentAt?: "sm" | "smTablet" | "md" | "lg" | "lgTablet" | "xl" | "xxl" | "xxxl";
   /**
    * If true, the drawer will be pinned open. pinned takes precedence over active.
    * @default false
@@ -128,11 +136,15 @@ export interface PanelTheme {
   scrollY?: string;
 }
 
-interface PanelProps extends ReactToolbox.Props {
+export interface PanelProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
   children?: React.ReactNode;
+  /**
+   * Callback function to be invoked when the component scrolls.
+   */
+  onScroll?: Function;
   /**
    * If true, the panel will vertically scroll all content.
    * @default false
@@ -165,7 +177,7 @@ export interface SidebarTheme {
   sidebarContent?: string;
 }
 
-interface SidebarProps extends ReactToolbox.Props {
+export interface SidebarProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
diff --git a/components/link/index.d.ts b/components/link/index.d.ts
index 67da3fa11..36ae45b4c 100644
--- a/components/link/index.d.ts
+++ b/components/link/index.d.ts
@@ -16,7 +16,7 @@ export interface LinkTheme {
   link?: string;
 }
 
-interface LinkProps extends ReactToolbox.Props {
+export interface LinkProps extends ReactToolbox.Props {
   /**
    * If true, adds active style to link.
    * @default false
@@ -46,6 +46,10 @@ interface LinkProps extends ReactToolbox.Props {
    * Classnames object defining the component style.
    */
   theme?: LinkTheme;
+  /**
+   * Additional parameters passed to anchor element.
+   */
+  [key: string]: any;
 }
 
 export class Link extends React.Component<LinkProps, {}> { }
diff --git a/components/list/index.d.ts b/components/list/index.d.ts
index ad4ace447..c3b197ca3 100644
--- a/components/list/index.d.ts
+++ b/components/list/index.d.ts
@@ -8,7 +8,7 @@ export interface ListTheme {
   list?: string;
 }
 
-interface ListProps extends ReactToolbox.Props {
+export interface ListProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
@@ -48,25 +48,9 @@ export interface ListCheckboxTheme {
    * Used for the inner content of a list item.
    */
   item?: string;
-  /**
-   * Used for the content wrapper element in list item.
-   */
-  itemContentRoot?: string;
-  /**
-   * Added to the text inside of the list item.
-   */
-  itemText?: string;
-  /**
-   * Added to the content wrapper element if size is large.
-   */
-  large?: string;
-  /**
-   * Added to the text inside of the list item if its primary.
-   */
-  primary?: string;
 }
 
-interface ListCheckboxProps extends ReactToolbox.Props {
+export interface ListCheckboxProps extends ReactToolbox.Props {
   /**
    * Main text of the item. Required.
    */
@@ -120,7 +104,7 @@ export interface ListDividerTheme {
   inset?: string;
 }
 
-interface ListDividerProps extends ReactToolbox.Props {
+export interface ListDividerProps extends ReactToolbox.Props {
   /**
    * If true, will leave a space at the left side.
    */
@@ -135,81 +119,195 @@ export class ListDivider extends React.Component<ListDividerProps, {}> { }
 
 export interface ListItemTheme {
   /**
-   * Added to the inner content if its a disabled item.
+   * Used for the root element of the list.
    */
-  disabled?: string;
+  listItem?: string;
+}
+
+export interface ListItemProps extends ReactToolbox.Props {
   /**
-   * Used for the inner content of a list item.
+   * Children to pass through the component.
    */
-  item?: string;
+  children?: React.ReactNode;
+  /**
+   * If true, the item is displayed as disabled and is not clickable.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If true, the item displays a ripple effect on click. By default it's inherited from the parent element.
+   */
+  ripple?: boolean;
+  /**
+   * Classnames object defining the component style.
+   * @default false
+   */
+  theme?: ListItemTheme;
+  /**
+   * In case you want to provide the item as a link, you can pass this property to specify the href.
+   */
+  to?: string;
+}
+
+export class ListItem extends React.Component<ListItemProps, {}> { }
+
+export interface ListSubHeaderTheme {
+  /**
+   * Used as a wrapper class for the subheader element.
+   */
+  subheader?: string;
+}
+
+export interface ListSubHeaderProps extends ReactToolbox.Props {
+  /**
+   * Text that will be displayed.
+   */
+  caption?: string;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: ListSubHeaderTheme;
+}
+
+export class ListSubHeader extends React.Component<ListSubHeaderProps, {}> { }
+
+export interface ListItemActionTheme {
   /**
    * Used for each action element (left/right).
    */
   itemAction?: string;
+}
+
+export interface ListItemActionProps {
+  /**
+   * List item action.
+   */
+  action?: React.ReactNode;
+  /**
+   * Object defining the component class name mappings.
+   */
+  theme?: ListItemActionTheme;
+}
+
+export class ListItemAction extends React.Component<ListItemActionProps, {}> { }
+
+export interface ListItemActionsTheme {
+  /**
+   * Added for the element that wraps left actions.
+   */
+  left?: string;
+  /**
+   * Added for the element that wraps right actions.
+   */
+  right?: string;
+}
+
+export interface ListItemActionsProps {
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Object defining the component class name mappings.
+   */
+  theme?: ListItemActionsTheme & ListItemActionTheme;
+  /**
+   * List item action type.
+   */
+  type?: "left" | "right";
+}
+
+export class ListItemActions extends React.Component<ListItemActionsProps, {}> { }
+
+export interface ListItemContentTheme {
+  /**
+   * Added to the content wrapper element if type is "auto".
+   */
+  auto?: string;
   /**
    * Used for the content wrapper element in list item.
    */
   itemContentRoot?: string;
   /**
-   * Added to the text inside of the list item.
+   * Added to the content wrapper element if type is "large".
    */
-  itemText?: string;
+  large?: string;
   /**
-   * Added to the content wrapper element if size is large.
+   * Added to the content wrapper element if type is "normal".
    */
-  large?: string;
+  normal?: string;
+}
+
+export interface ListItemContentProps {
   /**
-   * Added for the element that wraps left actions.
+   * Main text of the item.
    */
-  left?: string;
+  caption?: React.ReactNode;
   /**
-   * Used for the root element of the list.
+   * Children to pass through the component.
    */
-  listItem?: string;
+  children?: React.ReactNode;
   /**
-   * Added to the text inside of the list item if its primary.
+   * Secondary text to display under the caption.
    */
-  primary?: string;
+  legend?: string;
   /**
-   * Added for the element that wraps right actions.
+   * Object defining the component class name mappings.
    */
-  right?: string;
+  theme?: ListItemContentTheme;
+  /**
+   * List item content type.
+   */
+  type?: "auto" | "normal" | "large";
+}
+
+export class ListItemContent extends React.Component<ListItemContentProps, {}> { }
+
+export interface ListItemLayoutTheme {
+  /**
+   * Added to the inner content if its a disabled item.
+   */
+  disabled?: string;
   /**
-   * Added to the inner content if its a selectable item.
+   * Used for the inner content of a list item.
+   */
+  item?: string;
+  /**
+   * Added when layout is selectable.
    */
   selectable?: string;
 }
 
-interface ListItemProps extends ReactToolbox.Props {
+export interface ListItemLayoutProps extends ReactToolbox.Props {
   /**
    * A string URL to specify an avatar in the left side of the item.
    */
-  avatar?: React.ReactNode | string;
+  avatar?: string | React.ReactElement<any>;
   /**
    * Main text of the item.
    */
   caption?: string;
-  /**
+    /**
    * Children to pass through the component.
    */
   children?: React.ReactNode;
   /**
-   * If true, the item is displayed as disabled and is not clickable.
+   * If true, the item is displayed as disabled and it's not clickable.
    * @default false
    */
   disabled?: boolean;
   /**
-   * An element that will be displayed as the item. If set, this will override caption and legend.
+   * Layout content.
    */
-  itemContent?: React.ReactNode;
+  itemContent?: React.ReactChild;
   /**
    * A list of elements that are placed on the left side of the item and after the avatar attribute.
    */
-  leftActions?: React.ReactNode;
+  leftActions?: React.ReactNode[];
   /**
    * A string key of a font icon or element to display an icon in the left side of the item.
    */
-  leftIcon?: React.ReactNode | string;
+  leftIcon?: string | React.ReactElement<any>;
   /**
    * Secondary text to display under the caption.
    */
@@ -217,49 +315,57 @@ interface ListItemProps extends ReactToolbox.Props {
   /**
    * A list of elements that are placed on the right side of the item and after the rightIcon attribute.
    */
-  rightActions?: React.ReactNode;
+  rightActions?: React.ReactNode[];
   /**
    * The same as the leftIcon but in this case the icon is displayed in the right side.
    */
-  rightIcon?: React.ReactNode | string;
-  /**
-   * If true, the item displays a ripple effect on click. By default it's inherited from the parent element.
-   */
-  ripple?: boolean;
+  rightIcon?: string | React.ReactElement<any>;
   /**
    * If true, the elements in the list will display a hover effect and a pointer cursor. Inherited from the parent.
    * @default false
    */
   selectable?: boolean;
   /**
-   * Classnames object defining the component style.
-   * @default false
+   * Object defining the component class name mappings.
    */
-  theme?: ListItemTheme;
+  theme?: ListItemLayoutTheme & ListItemContentTheme & ListItemActionsTheme;
   /**
    * In case you want to provide the item as a link, you can pass this property to specify the href.
    */
   to?: string;
 }
 
-export class ListItem extends React.Component<ListItemProps, {}> { }
+export class ListItemLayout extends React.Component<ListItemLayoutProps, {}> { }
 
-export interface ListSubHeaderTheme {
+export interface ListItemTextTheme {
   /**
-   * Used as a wrapper class for the subheader element.
+   * Added to the text inside of the list item.
    */
-  subheader?: string;
+  itemText?: string;
+  /**
+   * Added to the text inside of the list item if its primary.
+   */
+  primary?: string;
 }
 
-interface ListSubHeaderProps extends ReactToolbox.Props {
+export interface ListItemTextProps extends ReactToolbox.Props {
   /**
-   * Text that will be displayed.
+   * Children to pass through the component.
    */
-  caption?: string;
+  children?: React.ReactNode;
   /**
-   * Classnames object defining the component style.
+   * Whether list item text should have 'primary' look.
+   * @default
    */
-  theme?: ListSubHeaderTheme;
+  primary?: boolean;
+  /**
+   * Object defining the component class name mappings.
+   */
+  theme?: ListItemTextTheme;
+  /**
+   * Additional properties passed to root container.
+   */
+  [key: string]: any;
 }
 
-export class ListSubHeader extends React.Component<ListSubHeaderProps, {}> { }
+export class ListItemText extends React.Component<ListItemTextProps, {}> { }
diff --git a/components/menu/index.d.ts b/components/menu/index.d.ts
index 5d9fccdfd..d8de21a22 100644
--- a/components/menu/index.d.ts
+++ b/components/menu/index.d.ts
@@ -44,7 +44,7 @@ export interface MenuTheme {
   topRight?: string;
 }
 
-interface MenuProps extends ReactToolbox.Props {
+export interface MenuProps extends ReactToolbox.Props {
   /**
    * If true, the menu will be displayed as opened by default.
    * @default false
@@ -68,7 +68,7 @@ interface MenuProps extends ReactToolbox.Props {
   onShow?: Function;
   /**
    * If true the menu wrapper will show an outline with a soft shadow.
-   * @default false
+   * @default true
    */
   outline?: boolean;
   /**
@@ -83,7 +83,7 @@ interface MenuProps extends ReactToolbox.Props {
   ripple?: boolean;
   /**
    * If true, the menu will keep a value to highlight the active child item.
-   * @default false
+   * @default true
    */
   selectable?: boolean;
   /**
@@ -109,7 +109,7 @@ export interface IconMenuTheme {
   iconMenu?: string;
 }
 
-interface IconMenuProps extends ReactToolbox.Props {
+export interface IconMenuProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
@@ -170,7 +170,7 @@ export interface MenuDividerTheme {
   menuDivider?: string;
 }
 
-interface MenuDividerProps extends ReactToolbox.Props {
+export interface MenuDividerProps extends ReactToolbox.Props {
   /**
    * Classnames object defining the component style.
    */
@@ -206,7 +206,7 @@ export interface MenuItemTheme {
   shortcut?: string;
 }
 
-interface MenuItemProps extends ReactToolbox.Props {
+export interface MenuItemProps extends ReactToolbox.Props {
   /**
    * The text to include in the menu item. Required.
    */
diff --git a/components/navigation/index.d.ts b/components/navigation/index.d.ts
index a2795a8da..07dfaba3b 100644
--- a/components/navigation/index.d.ts
+++ b/components/navigation/index.d.ts
@@ -20,7 +20,7 @@ export interface NavigationTheme {
   vertical?: string;
 }
 
-interface NavigationProps extends ReactToolbox.Props {
+export interface NavigationProps extends ReactToolbox.Props {
   /**
    * Array of objects that will be represented as <Button/> so the keys will be transferred as properties the Button Component.
    */
diff --git a/components/overlay/index.d.ts b/components/overlay/index.d.ts
new file mode 100644
index 000000000..6dc9293d0
--- /dev/null
+++ b/components/overlay/index.d.ts
@@ -0,0 +1,55 @@
+import * as React from "react";
+
+export interface OverlayTheme {
+  /**
+   * Active class name.
+   */
+  active?: string;
+  /**
+   * Backdrop class name.
+   */
+  backdrop?: string;
+  /**
+   * Invisible class name.
+   */
+  invisible?: string;
+  /**
+   * Overlay class name.
+   */
+  overlay?: string;
+}
+
+
+export interface OverlayProps {
+  /**
+   * Whether overlay is active.
+   */
+  active?: boolean;
+  /**
+   * Nodes to be nested inside Overlay.
+   */
+  children?: React.ReactNode;
+  /**
+   * Additional class name(s) for root container.
+   */
+  className?: string;
+  /**
+   * Whether Overlay should have 'invisible' styles.
+   * @default false
+   */
+  invisible?: boolean;
+  /**
+   * Callback invoked on Overlay click.
+   */
+  onClick?: Function;
+  /**
+   * Callback invoked on ESC key.
+   */
+  onEscKeyDown?: Function;
+  /**
+   * Overlay theme.
+   */
+  theme?: OverlayTheme;
+}
+
+export default class Overlay extends React.Component<OverlayProps, {}> { }
diff --git a/components/progress_bar/index.d.ts b/components/progress_bar/index.d.ts
index 8b0b961e1..90db36011 100644
--- a/components/progress_bar/index.d.ts
+++ b/components/progress_bar/index.d.ts
@@ -36,7 +36,7 @@ export interface ProgressBarTheme {
   value?: string;
 }
 
-interface ProgressBarProps extends ReactToolbox.Props {
+export interface ProgressBarProps extends ReactToolbox.Props {
   /**
    * Value of a secondary progress bar useful for buffering.
    * @default 0
diff --git a/components/radio/index.d.ts b/components/radio/index.d.ts
index 8cc2695de..3e8bbb58a 100644
--- a/components/radio/index.d.ts
+++ b/components/radio/index.d.ts
@@ -1,7 +1,7 @@
 import * as React from "react";
 import ReactToolbox from "../index";
 
-interface RadioGroupProps extends ReactToolbox.Props {
+export interface RadioGroupProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
@@ -28,18 +28,6 @@ interface RadioGroupProps extends ReactToolbox.Props {
 export class RadioGroup extends React.Component<RadioGroupProps, {}> { }
 
 export interface RadioButtonTheme {
-  /**
-   * Used to for the radio element.
-   */
-  radio?: string;
-  /**
-   * Used for the radio element when it's checked.
-   */
-  radioChecked?: string;
-  /**
-   * To provide styles for the ripple.
-   */
-  ripple?: string;
   /**
    * Added to the root of the Radio in case it's disabled.
    */
@@ -58,12 +46,16 @@ export interface RadioButtonTheme {
   text?: string;
 }
 
-interface RadioButtonProps extends ReactToolbox.Props {
+export interface RadioButtonProps extends ReactToolbox.Props {
   /**
    * If true, the input element will be selected by default. Transferred from the parent.
    * @default false
    */
   checked?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
   /**
    * If true, the item will be displayed as disabled.
    * @default false
@@ -92,7 +84,7 @@ interface RadioButtonProps extends ReactToolbox.Props {
   /**
    * Classnames object defining the component style.
    */
-  theme?: RadioButtonTheme;
+  theme?: RadioButtonTheme & RadioTheme;
   /**
    * Value for the radio button.
    */
@@ -100,3 +92,38 @@ interface RadioButtonProps extends ReactToolbox.Props {
 }
 
 export class RadioButton extends React.Component<RadioButtonProps, {}> { }
+
+export interface RadioTheme {
+  /**
+   * Used to for the radio element.
+   */
+  radio?: string;
+  /**
+   * Used for the radio element when it's checked.
+   */
+  radioChecked?: string;
+  /**
+   * To provide styles for the ripple.
+   */
+  ripple?: string;
+}
+
+export interface RadioProps {
+  /**
+   * If true, the input element will be selected by default. Transferred from the parent.
+   * @default false
+   */
+  checked?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Callback invoked on mouse down.
+   */
+  onMouseDown?: Function;
+  /**
+   * Additional properties passed to Radio container.
+   */
+  [key: string]: any;
+}
diff --git a/components/ripple/index.d.ts b/components/ripple/index.d.ts
index 998de2ab1..171d18478 100644
--- a/components/ripple/index.d.ts
+++ b/components/ripple/index.d.ts
@@ -20,7 +20,7 @@ export interface RippleTheme {
   rippleWrapper?: string;
 }
 
-interface RippleProps {
+export interface RippleProps {
   /**
    * Children to pass through the component.
    */
@@ -43,8 +43,19 @@ interface RippleProps {
    * Classnames object defining the component style.
    */
   theme?: RippleTheme;
+  /**
+   * Additional properties passed to rippled component.
+   */
+  [key: string]: any;
 }
 
-export class Ripple extends React.Component<RippleProps, {}> { }
+export interface RippledComponentFactory {
+  <P, RippledComponent extends (React.ComponentClass<P> | React.SFC<P>)>(component: RippledComponent): RippledComponent;
+}
+
+export function rippleFactory(
+  options: RippleProps
+): RippledComponentFactory;
+
 
-export default Ripple;
+export default rippleFactory;
diff --git a/components/slider/index.d.ts b/components/slider/index.d.ts
index 3a58538a4..b33f1e3b3 100644
--- a/components/slider/index.d.ts
+++ b/components/slider/index.d.ts
@@ -56,7 +56,7 @@ export interface SliderTheme {
   snaps?: string;
 }
 
-interface SliderProps extends ReactToolbox.Props {
+export interface SliderProps extends ReactToolbox.Props {
   /**
    * If true, an input is shown and the user can set the slider from keyboard value.
    * @default false
diff --git a/components/snackbar/index.d.ts b/components/snackbar/index.d.ts
index cc95d3a88..9286938da 100644
--- a/components/snackbar/index.d.ts
+++ b/components/snackbar/index.d.ts
@@ -32,7 +32,7 @@ export interface SnackbarTheme {
   warning?: string;
 }
 
-interface SnackbarProps extends ReactToolbox.Props {
+export interface SnackbarProps extends ReactToolbox.Props {
   /**
    * Label for the action component inside the Snackbar.
    */
@@ -43,9 +43,17 @@ interface SnackbarProps extends ReactToolbox.Props {
    */
   active?: boolean;
   /**
-   * Text to display in the content. Required.
+   * Children to pass through the component.
    */
-  label: string;
+  children?: React.ReactNode;
+  /**
+   * Text to display in the content.
+   */
+  label?: string;
+  /**
+   * Callback function that will be called when the button action is clicked.
+   */
+  onClick?: Function;
   /**
    * Callback function when finish the set timeout.
    */
diff --git a/components/switch/index.d.ts b/components/switch/index.d.ts
index fd1ab6e0e..03fc29716 100644
--- a/components/switch/index.d.ts
+++ b/components/switch/index.d.ts
@@ -36,7 +36,7 @@ export interface SwitchTheme {
   thumb?: string;
 }
 
-interface SwitchProps extends ReactToolbox.Props {
+export interface SwitchProps extends ReactToolbox.Props {
   /**
    * If true, the switch will be enabled.
    * @default false
diff --git a/components/table/index.d.ts b/components/table/index.d.ts
index 044b5141b..a4946bd34 100644
--- a/components/table/index.d.ts
+++ b/components/table/index.d.ts
@@ -1,30 +1,14 @@
 import * as React from "react";
 import ReactToolbox from "../index";
 
-export interface TableTheme {
-  /**
-   * It will be added to a row in case it is editable.
-   */
-  editable?: string;
-  /**
-   * Used for the row element.
-   */
-  row?: string;
-  /**
-   * It will be added to a row in case it is selectable.
-   */
-  selectable?: string;
-  /**
-   * Added to a row in case it is selected.
-   */
-  selected?: string;
+export interface TableTheme extends TableRowTheme {
   /**
    * Classname used for the root element.
    */
   table?: string;
 }
 
-interface TableProps extends ReactToolbox.Props {
+export interface TableProps extends ReactToolbox.Props {
   /**
    * If true, component will show a heading using model field names.
    * @default true
@@ -38,6 +22,10 @@ interface TableProps extends ReactToolbox.Props {
    * Callback function that is fired when an item in a row changes. If set, rows are editable.
    */
   onChange?: Function;
+  /**
+   * Callback fired when row was clicked.
+   */
+  onRowClick?: Function;
   /**
    * Callback function invoked when the row selection changes.
    */
@@ -68,4 +56,96 @@ interface TableProps extends ReactToolbox.Props {
 
 export class Table extends React.Component<TableProps, {}> { }
 
+export interface TableHeadTheme {
+  /**
+   * It will be added to a row in case it is selectable.
+   */
+  selectable?: string;
+}
+
+export interface TableHeadProps extends ReactToolbox.Props {
+  /**
+   * Object describing the data model that represents each object in the source.
+   */
+  model?: any;
+  /**
+   * If true, the header and each row will display a checkbox to allow the user to select multiple rows.
+   */
+  multiSelectable?: boolean;
+  /**
+   * Callback function invoked when the row selection changes.
+   */
+  onSelect?: Function;
+  /**
+   * If true, each row will display a checkbox to allow the user to select that one row.
+   * @default true
+   */
+  selectable?: boolean;
+  /**
+   * Whether header should look selected.
+   * @default false
+   */
+  selected?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: TableHeadTheme;
+}
+
+export class TableHead extends React.Component<TableHeadProps, {}> { }
+
+export interface TableRowTheme extends TableHeadTheme {
+  /**
+   * It will be added to a row in case it is editable.
+   */
+  editable?: string;
+  /**
+   * Used for the row element.
+   */
+  row?: string;
+  /**
+   * Added to a row in case it is selected.
+   */
+  selected?: string;
+}
+
+export interface TableRowProps {
+  /**
+   * Single row data.
+   */
+  data?: any;
+  /**
+   * Row index.
+   */
+  index?: number;
+  /**
+   * Object describing the data model that represents each object in the source.
+   */
+  model?: any;
+  /**
+   * Callback function that is fired when an item in a row changes. If set, rows are editable.
+   */
+  onChange?: Function;
+  /**
+   * Callback fired when row was clicked.
+   */
+  onRowClick?: Function;
+  /**
+   * Callback function invoked when the row selection changes.
+   */
+  onSelect?: Function;
+  /**
+   * If true, each row will display a checkbox to allow the user to select that one row.
+   * @default true
+   */
+  selectable?: boolean;
+  /**
+   * Whether table row should look selected.
+   * @default false
+   */
+  selected?: boolean;
+}
+
+export class TableRow extends React.Component<TableRowProps, {}> { }
+
 export default Table;
diff --git a/components/tabs/index.d.ts b/components/tabs/index.d.ts
index 1dbdeda09..35750cb0e 100644
--- a/components/tabs/index.d.ts
+++ b/components/tabs/index.d.ts
@@ -1,15 +1,35 @@
 import * as React from "react";
 import ReactToolbox from "../index";
 
-export interface TabsTheme {
+export interface TabsTheme extends TabTheme, TabContentTheme {
   /**
-   * Added to the active tab content and header.
+   * Class used for arrows.
    */
-  active?: string;
+  arrow?: string;
+  /**
+   * Class used for arrow container.
+   */
+  arrowContainer?: string;
+  /**
+   * Class used when 'disableAnimatedBottomBorder' is true.
+   */
+  disableAnimation?: string;
+  /**
+   * Used to make the 'fixed tabs'.
+   */
+  fixed?: string;
+  /**
+   * Used to invert the colors.
+   */
+  inverse?: string;
   /**
    * Used for the navigation element.
    */
   navigation?: string;
+  /**
+   * Used for navigation container.
+   */
+  navigationContainer?: string;
   /**
    * Used for the moving underline element.
    */
@@ -18,13 +38,9 @@ export interface TabsTheme {
    * Used as a root classname for the component.
    */
   tabs?: string;
-  /**
-   * Used for the tab content element.
-   */
-  tab?: string;
 }
 
-interface TabsProps extends ReactToolbox.Props {
+export interface TabsProps extends ReactToolbox.Props {
   /**
    * Children to pass through the component.
    */
@@ -83,9 +99,17 @@ export interface TabTheme {
    * Added to the navigation tab element in case it's active.
    */
   label?: string;
+  /**
+   * Class added when icon is set.
+   */
+  withIcon?: string;
+  /**
+   * Class added when label is set.
+   */
+  withText?: string;
 }
 
-interface TabProps extends ReactToolbox.Props {
+export interface TabProps extends ReactToolbox.Props {
   /**
    * If true, the current component is visible.
    */
@@ -104,6 +128,10 @@ interface TabProps extends ReactToolbox.Props {
    * @default false
    */
   hidden?: boolean;
+  /**
+   * Icon to be used in inner FontIcon.
+   */
+  icon?: React.ReactNode;
   /**
    * Label text for navigation header. Required.
    */
@@ -116,6 +144,42 @@ interface TabProps extends ReactToolbox.Props {
    * Classnames object defining the component style.
    */
   theme?: TabTheme;
+  /**
+   * Additional properties passed to Tab root container.
+   */
+  [key: string]: any;
 }
 
 export class Tab extends React.Component<TabProps, {}> { }
+
+export interface TabContentTheme {
+  /**
+   * Added when tab is active.
+   */
+  active?: string;
+  /**
+   * Used for the tab content element.
+   */
+  tab?: string;
+}
+
+export interface TabContentProps extends ReactToolbox.Props {
+  /**
+   * Whether tab is active.
+   */
+  active?: boolean;
+  /**
+   * Tab content.
+   */
+  children?: React.ReactNode;
+  /**
+   * Current tab index.
+   */
+  tabIndex?: number;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: TabContentTheme;
+}
+
+export class TabContent extends React.Component<TabContentProps, {}> { }
diff --git a/components/time_picker/index.d.ts b/components/time_picker/index.d.ts
index 63f6237e3..5180e1219 100644
--- a/components/time_picker/index.d.ts
+++ b/components/time_picker/index.d.ts
@@ -96,7 +96,17 @@ export interface TimePickerTheme {
   small?: string;
 }
 
-interface TimePickerProps {
+export interface TimePickerProps {
+  /**
+   * Whether time picker is active.
+   * @default false
+   */
+  active?: boolean;
+  /**
+   * Label used for cancel button.
+   * @default "Cancel"
+   */
+  cancelLabel?: string;
   /**
    * Provide error text which will be displayed under the field.
    */
@@ -111,17 +121,46 @@ interface TimePickerProps {
   inputClassName?: string;
   /**
    * Format to display the clock. It can be 24hr or ampm.
-   * @default false
+   * @default "24hr"
    */
   format?: "24hr" | "ampm";
   /**
    * The text string to use for the floating label element in the input component.
    */
   label?: string;
+  /**
+   * Label used for 'OK' button on Dialog.
+   * @default "Ok"
+   */
+  okLabel?: string;
   /**
    * Callback called when the picker value is changed.
    */
   onChange?: Function;
+  /**
+   * Callback fired on Input click.
+   */
+  onClick?: Function;
+  /**
+   * Callback fired after dismissing the Dialog.
+   */
+  onDismiss?: Function;
+  /**
+   * Callback called when the ESC key is pressed with the overlay active.
+   */
+  onEscKeyDown?: Function;
+  /**
+   * Callback invoked on Input key press.
+   */
+  onKeyPress?: Function;
+  /**
+   * Callback to be invoked when the dialog overlay is clicked.
+   */
+  onOverlayClick?: Function;
+  /**
+   * The input element will be readonly and look like disabled.
+   */
+  readonly?: boolean;
   /**
    * Classnames object defining the component style.
    */
@@ -130,6 +169,10 @@ interface TimePickerProps {
    * Datetime object with currrently selected time.
    */
   value?: Date;
+  /**
+   * Additional attributes passed to inner Input component.
+   */
+  [key: string]: any;
 }
 
 export class TimePicker extends React.Component<TimePickerProps, {}> { }
diff --git a/components/tooltip/index.d.ts b/components/tooltip/index.d.ts
index 35523937f..3b4cfae1c 100644
--- a/components/tooltip/index.d.ts
+++ b/components/tooltip/index.d.ts
@@ -1,4 +1,5 @@
 import * as React from "react";
+
 export interface TooltipTheme {
   /**
    * Added to the tooltip element.
@@ -14,17 +15,34 @@ export interface TooltipTheme {
   tooltipWrapper?: string;
 }
 
-interface TooltipProps {
+export interface TooltipProps {
+  /**
+   * Additional class added to composed component.
+   */
+  className?: string;
+  /**
+   * Callback to be invoked when Component is clicked.
+   */
+  onClick?: Function;
+  /**
+   * Callback called when the mouse enters the Component.
+   */
+  onMouseEnter?: Function;
+  /**
+   * Callback called when the mouse leaves the Component.
+   */
+  onMouseLeave?: Function;
   /**
    * Classnames object defining the component style.
    */
   theme?: TooltipTheme;
   /**
-   * The text string to use for the tooltip.
+   * The text (or node) used for the tooltip.
    */
-  tooltip?: string;
+  tooltip?: React.ReactNode;
   /**
    * Amount of time in miliseconds spent before the tooltip is visible.
+   * @default 0
    */
   tooltipDelay?: number;
   /**
@@ -32,6 +50,20 @@ interface TooltipProps {
    * @default true
    */
   tooltipHideOnClick?: boolean;
+  /**
+   * Tooltip position.
+   * @default "vertical"
+   */
+  tooltipPosition?: "bottom" | "top" | "left" | "right" | "horizontal" | "vertical";
+  /**
+   * Determines the tooltip should be toggled when clicked. This is useful for mobile where there is no mouse enter.
+   * @default false
+   */
+  tooltipShowOnClick?: boolean;
+  /**
+   * Additional attributes passed to composed component.
+   */
+  [key: string]: any;
 }
 
 declare class TooltipComponent<P, S> extends React.Component<P, S> {

From ca8e4c6c1d191cfbb65c4b758f16bd51a045a57b Mon Sep 17 00:00:00 2001
From: katzoo <katzoo@users.noreply.github.com>
Date: Mon, 19 Dec 2016 20:39:07 +0100
Subject: [PATCH 1002/1024] fix few missing propTypes

---
 components/app_bar/AppBar.js       | 1 +
 components/app_bar/readme.md       | 1 +
 components/autocomplete/readme.md  | 1 +
 components/button/readme.md        | 1 +
 components/card/readme.md          | 2 +-
 components/checkbox/readme.md      | 1 +
 components/date_picker/readme.md   | 6 +++++-
 components/layout/NavDrawer.js     | 2 ++
 components/list/ListItemContent.js | 7 +++++--
 components/snackbar/Snackbar.js    | 1 -
 components/tabs/Tab.js             | 4 +++-
 components/tabs/Tabs.js            | 4 ++++
 12 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/components/app_bar/AppBar.js b/components/app_bar/AppBar.js
index 00913f706..60da12b93 100644
--- a/components/app_bar/AppBar.js
+++ b/components/app_bar/AppBar.js
@@ -28,6 +28,7 @@ const factory = (IconButton) => {
         flat: PropTypes.string,
         leftIcon: PropTypes.string,
         rightIcon: PropTypes.string,
+        scrollHide: PropTypes.string,
         title: PropTypes.string
       }),
       title: PropTypes.string
diff --git a/components/app_bar/readme.md b/components/app_bar/readme.md
index 8eae071d0..f68ecf123 100644
--- a/components/app_bar/readme.md
+++ b/components/app_bar/readme.md
@@ -41,6 +41,7 @@ The `AppBar` component provides properties for the common use cases of `title`,
 | `onLeftIconClick`  | `Function` | `null`  | Called on left icon click event.|
 | `rightIcon`        | `String|Element`   | `null`  | Right icon.|
 | `onRightIconClick` | `Function` | `null`  | Called on right icon click event.|
+| `scrollHide`       | `Bool`     | `false` | Whether AppBar should be hidden during scroll.|
 
 ## Theme
 
diff --git a/components/autocomplete/readme.md b/components/autocomplete/readme.md
index 2812be86a..2b7b8a3ab 100644
--- a/components/autocomplete/readme.md
+++ b/components/autocomplete/readme.md
@@ -48,6 +48,7 @@ If you want to provide a theme via context, the component key is `RTAutocomplete
 | `direction`                     | `String`                      | `auto`  | Determines the opening direction. It can be `auto`, `top` or `down`. |
 | `disabled`                      | `Bool`                        | `false` | If true, component will be disabled. |
 | `error`                         | `String` or `Node`            |         | Sets the error string for the internal input element. |
+| `keepFocusOnChange`             | `Bool`                        | `false` | Whether component should keep focus after value change. |
 | `label`                         | `String` or `Node`            |         | The text string to use for the floating label element. |
 | `multiple`                      | `Bool`                        | `true`  | If true, component can hold multiple values. |
 | `onBlur`                        | `Function`                    |         | Callback function that is fired when component is blurred. |
diff --git a/components/button/readme.md b/components/button/readme.md
index 9bbe4ac36..e53de77c3 100644
--- a/components/button/readme.md
+++ b/components/button/readme.md
@@ -54,6 +54,7 @@ If you want to provide a theme via context, the component key is `RTButton`.
 | `raised`          | `Boolean`             | `false`     | If true, the button will have a raised look. |
 | `ripple`          | `Boolean`             | `true`      | If true, component will have a ripple effect on click.|
 | `theme`           | `Object`              |             | Theme object will classnames that will be used to style the component.|
+| `type`            | `String`              | `button`    | Component root container type.|
 
 By default it will have neutral colors and a flat aspect even though the `flat` property is `false` by default. Also, some properties exclude others, for example a button cannot be `flat` and `raised` at the same time.
 
diff --git a/components/card/readme.md b/components/card/readme.md
index 897a22157..292d8a492 100644
--- a/components/card/readme.md
+++ b/components/card/readme.md
@@ -90,7 +90,7 @@ Used for displaying media such as images or videos on a card. Can also be used w
 | `aspectRatio` | `enum`(`'wide'`,`'square'`) |  | Forces a 16:9 or 1:1 aspect ratio respectively. Unset, the media area will have a flexible height. |
 | `children` | `Any` |  | Usually an image/video element or a `<CardTitle>` component. |
 | `className` | `String` |  | Additional class(es) for custom styling. |
-| `color` | `String` |  | Sets the background color |
+| `color` | `String` |  | Sets the background color. |
 | `contentOverlay` | `Boolean` |  | Creates a dark overlay underneath the child components. |
 | `image` | `String`, `Element` |  | Can be used instead of children. Accepts an element or a URL string. |
 
diff --git a/components/checkbox/readme.md b/components/checkbox/readme.md
index b14af09e1..5f7e21f62 100644
--- a/components/checkbox/readme.md
+++ b/components/checkbox/readme.md
@@ -44,6 +44,7 @@ If you want to provide a theme via context, the component key is `RTCheckbox`.
 | Name              | Type          | Default         | Description|
 |:-----|:-----|:-----|:-----|
 | `checked`       | `Boolean`       | `false`         | Value for the checkbox, can be `true` or `false`. |
+| `children`      | `String`, `Element` or `Array` |  | Children to pass through the component. |
 | `className`     | `String`        | `''`            | Sets a class to give customized styles to the checkbox field.|
 | `disabled`      | `Boolean`       | `false`         | If true, the checkbox shown as disabled and cannot be modified.|
 | `label`         | `String` of `node`        |                 | Text label to attach next to the checkbox element.|
diff --git a/components/date_picker/readme.md b/components/date_picker/readme.md
index 8410f60de..b9db41f31 100644
--- a/components/date_picker/readme.md
+++ b/components/date_picker/readme.md
@@ -48,17 +48,21 @@ If you want to provide a theme via context, the component key is `RTDatePicker`.
 |:-----|:-----|:-----|:-----|
 | `active`        | `Boolean`       | `false`       | Allows to control if the picker should be shown from outside. Beware you should update the prop when the Dialog is closed. |
 | `autoOk`        | `Boolean`       | `false`       | Automatically selects a date upon clicking on a day. |
+| `cancelLabel`   | `String`        | `'Cancel'`    | Label used for cancel button on date picker dialog. |
 | `className`     | `String`        |               | This class will be placed at the top of the `DatePickerDialog` component so you can provide custom styles.|
 | `disabledDates`     | `Array`        |               | An array of date objects which will be disabled in the calendar. All other dates will be enabled.|
 | `enabledDates`     | `Array`        |               | An array of date objects which will be enabled in the calendar. All other dates will be disabled.|
 | `inputClassName`| `String`        |               | This class will be applied to `Input` component of `DatePicker`. |
 | `inputFormat`   | `Function`      |               | Function to format the date displayed on the input. |
 | `label`         | `String`        |               | The text string to use for the floating label element in the input component.|
-| `locale`        | `String` or `Object` | `'en'`     | Set the locale for the date picker dialog ('de','en','es','af','ar','be','bg','bn','bo','br','bs','ca','gl','eu','pt','it',fr'). Object is supported too (see example above). |
+| `locale`        | `String` or `Object` | `'en'`     | Set the locale for the date picker dialog ('de','no','en','es','af','ar','be','bg','bn','bo','br','bs','ca','gl','eu','pt','it','fr','ru','ua'). Object is supported too (see example above). |
 | `maxDate`       | `Date`          |               | Date object with the maximum selectable date. |
 | `minDate`       | `Date`          |               | Date object with the minimum selectable date. |
 | `onChange`      | `Function`      |               | Callback called when the picker value is changed.|
+| `onClick`       | `Function`      |               | Callback fired on Input click.|
+| `onDismiss`     | `Function`      |               | Callback fired after dismissing the Dialog.|
 | `onEscKeyDown`  | `Function`      |               | Callback called when the ESC key is pressed with the overlay active. |
+| `onKeyPress`    | `Function`      |               | Callback invoked on Input key press.
 | `onOverlayClick`| `Function`      |               | Callback to be invoked when the dialog overlay is clicked.|
 | `readonly`      | `Boolean`       |               | The input element will be readonly and look like disabled.|
 | `sundayFirstDayOfWeek` | `Boolean`| `false`       | Set week's first day to Sunday. Default week's first day is Monday ([ISO 8601](https://en.wikipedia.org/wiki/ISO_8601#Week_dates)). |
diff --git a/components/layout/NavDrawer.js b/components/layout/NavDrawer.js
index f484bc518..631ea5e3d 100644
--- a/components/layout/NavDrawer.js
+++ b/components/layout/NavDrawer.js
@@ -37,12 +37,14 @@ NavDrawer.propTypes = {
     active: PropTypes.string,
     drawerContent: PropTypes.string,
     lgPermanent: PropTypes.string,
+    lgTabletPermanent: PropTypes.string,
     mdPermanent: PropTypes.string,
     navDrawer: PropTypes.string,
     pinned: PropTypes.string,
     scrim: PropTypes.string,
     scrollY: PropTypes.string,
     smPermanent: PropTypes.string,
+    smTabletPermanent: PropTypes.string,
     wide: PropTypes.string,
     xlPermanent: PropTypes.string,
     xxlPermanent: PropTypes.string,
diff --git a/components/list/ListItemContent.js b/components/list/ListItemContent.js
index d7fe630ea..c02438edf 100644
--- a/components/list/ListItemContent.js
+++ b/components/list/ListItemContent.js
@@ -16,8 +16,10 @@ const factory = (ListItemText) => {
       children: PropTypes.any,
       legend: PropTypes.string,
       theme: PropTypes.shape({
+        auto: PropTypes.string,
         itemContentRoot: PropTypes.string,
-        large: PropTypes.string
+        large: PropTypes.string,
+        normal: PropTypes.string
       }),
       type: PropTypes.oneOf(types)
     };
@@ -34,8 +36,9 @@ const factory = (ListItemText) => {
 
     render () {
       const {children, caption, legend, theme} = this.props;
+      const contentType = this.getType();
       const className = classnames(theme.itemContentRoot, {
-        [theme[this.getType()]]: theme[this.getType()]
+        [theme[contentType]]: theme[contentType]
       });
 
       return (
diff --git a/components/snackbar/Snackbar.js b/components/snackbar/Snackbar.js
index 2f6374871..399a8118b 100644
--- a/components/snackbar/Snackbar.js
+++ b/components/snackbar/Snackbar.js
@@ -24,7 +24,6 @@ const factory = (Overlay, Button) => {
         active: PropTypes.string,
         button: PropTypes.string,
         cancel: PropTypes.string,
-        icon: PropTypes.string,
         label: PropTypes.string,
         snackbar: PropTypes.string,
         warning: PropTypes.string
diff --git a/components/tabs/Tab.js b/components/tabs/Tab.js
index 13e9f0de5..0fe773183 100644
--- a/components/tabs/Tab.js
+++ b/components/tabs/Tab.js
@@ -19,7 +19,9 @@ class Tab extends Component {
       active: PropTypes.string,
       disabled: PropTypes.string,
       hidden: PropTypes.string,
-      label: PropTypes.string
+      label: PropTypes.string,
+      withIcon: PropTypes.string,
+      withText: PropTypes.string
     })
   };
 
diff --git a/components/tabs/Tabs.js b/components/tabs/Tabs.js
index 94782d3da..359905b35 100644
--- a/components/tabs/Tabs.js
+++ b/components/tabs/Tabs.js
@@ -18,9 +18,13 @@ const factory = (Tab, TabContent, FontIcon) => {
       inverse: PropTypes.bool,
       onChange: PropTypes.func,
       theme: PropTypes.shape({
+        arrow: PropTypes.string,
+        arrowContainer: PropTypes.string,
+        disableAnimation: PropTypes.string,
         fixed: PropTypes.string,
         inverse: PropTypes.string,
         navigation: PropTypes.string,
+        navigationContainer: PropTypes.string,
         pointer: PropTypes.string,
         tabs: PropTypes.string
       })

From 323ea320d1b738be5bc82751c80c0e141171b402 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 4 Jan 2017 02:20:27 +0100
Subject: [PATCH 1003/1024] Fixes #1032

---
 package.json |  2 +-
 yarn.lock    | 20 ++++++++++----------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 6680216a6..6c8b16f2d 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
     "classnames": "^2.2.5",
     "core-js": "^2.4.0",
     "normalize.css": "^4.2.0",
-    "react-css-themr": "^1.7.0"
+    "react-css-themr": "^1.7.1"
   },
   "devDependencies": {
     "autoprefixer": "^6.5.4",
diff --git a/yarn.lock b/yarn.lock
index e7f2653bf..904c9a815 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4701,9 +4701,9 @@ react-addons-test-utils@^15.4.1:
   version "15.4.1"
   resolved "https://registry.yarnpkg.com/react-addons-test-utils/-/react-addons-test-utils-15.4.1.tgz#1e4caab151bf27cce26df5f9cb714f4fd8359ae1"
 
-react-css-themr@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/react-css-themr/-/react-css-themr-1.7.0.tgz#dd8b04027e3967ed4ecfdd87922d215f4bc55be7"
+react-css-themr@^1.7.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/react-css-themr/-/react-css-themr-1.7.1.tgz#ac0959ee64f020a05e2f3f4e1c9c7489964f8556"
   dependencies:
     invariant "^2.2.1"
 
@@ -4760,11 +4760,10 @@ read-pkg@^1.0.0:
     normalize-package-data "^2.3.2"
     path-type "^1.0.0"
 
-"readable-stream@^2.0.0 || ^1.1.13", readable-stream@^2.1.0, readable-stream@~2.1.4:
-  version "2.1.5"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.1.5.tgz#66fa8b720e1438b364681f2ad1a63c618448c9d0"
+"readable-stream@^2.0.0 || ^1.1.13", readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@~2.0.0:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.0.6.tgz#8f90341e68a53ccc928788dacfcd11b36eb9b78e"
   dependencies:
-    buffer-shims "^1.0.0"
     core-util-is "~1.0.0"
     inherits "~2.0.1"
     isarray "~1.0.0"
@@ -4772,10 +4771,11 @@ read-pkg@^1.0.0:
     string_decoder "~0.10.x"
     util-deprecate "~1.0.1"
 
-readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@~2.0.0:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.0.6.tgz#8f90341e68a53ccc928788dacfcd11b36eb9b78e"
+readable-stream@^2.1.0, readable-stream@~2.1.4:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.1.5.tgz#66fa8b720e1438b364681f2ad1a63c618448c9d0"
   dependencies:
+    buffer-shims "^1.0.0"
     core-util-is "~1.0.0"
     inherits "~2.0.1"
     isarray "~1.0.0"

From bf00d92d68027bc27bf61eadc6c4100ab387eb30 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Wed, 4 Jan 2017 15:14:26 +0100
Subject: [PATCH 1004/1024] Fixes #1034

---
 components/autocomplete/Autocomplete.js | 4 ++--
 spec/components/autocomplete.js         | 6 ++++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index 68d06c38b..18ba36bc5 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -120,10 +120,10 @@ const factory = (Chip, Input) => {
      this.setState({query: value, showAllSuggestions: false, active: null});
    };
 
-   handleQueryFocus = () => {
+   handleQueryFocus = (event) => {
      this.suggestionsNode.scrollTop = 0;
      this.setState({active: '', focus: true});
-     if (this.props.onFocus) this.props.onFocus();
+     if (this.props.onFocus) this.props.onFocus(event);
    };
 
    handleQueryKeyDown = (event) => {
diff --git a/spec/components/autocomplete.js b/spec/components/autocomplete.js
index 0db10e01e..e9d2f9303 100644
--- a/spec/components/autocomplete.js
+++ b/spec/components/autocomplete.js
@@ -14,6 +14,11 @@ class AutocompleteTest extends React.Component {
     }
   };
 
+  handleFocus = (event) => {
+    console.log('This is focused');
+    console.log(event);
+  };
+
   handleMultipleArrayChange = (value) => {
     this.setState({
       multipleArray: value,
@@ -48,6 +53,7 @@ class AutocompleteTest extends React.Component {
           allowCreate
           keepFocusOnChange
           label="Pick multiple elements..."
+          onFocus={this.handleFocus}
           onChange={this.handleMultipleArrayChange}
           source={this.state.countriesObject}
           suggestionMatch="anywhere"

From fa97709c52ff83b07ab7877d47e0396f8318e4e7 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 5 Jan 2017 02:13:15 +0100
Subject: [PATCH 1005/1024] Fixes #750

---
 components/list/theme.scss | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/components/list/theme.scss b/components/list/theme.scss
index e432fcccb..566b2df73 100644
--- a/components/list/theme.scss
+++ b/components/list/theme.scss
@@ -11,6 +11,16 @@
   text-align: left;
   white-space: nowrap;
   list-style: none;
+
+  & > a {
+    cursor: pointer;
+    display: block;
+    text-decoration: none;
+
+    &:hover {
+      background-color: $list-item-hover-color;
+    }
+  }
 }
 
 .subheader {

From f7da37a4b7bf840fad691264097999a6a50c7cec Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 5 Jan 2017 02:13:24 +0100
Subject: [PATCH 1006/1024] Fixes #750

---
 components/list/theme.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/list/theme.scss b/components/list/theme.scss
index 566b2df73..c2e779625 100644
--- a/components/list/theme.scss
+++ b/components/list/theme.scss
@@ -13,9 +13,9 @@
   list-style: none;
 
   & > a {
-    cursor: pointer;
     display: block;
     text-decoration: none;
+    cursor: pointer;
 
     &:hover {
       background-color: $list-item-hover-color;

From 8b25e9636007b692c688b3489851d5338badc065 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 5 Jan 2017 02:38:21 +0100
Subject: [PATCH 1007/1024] Fix linter

---
 components/dropdown/__test__/index.spec.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/dropdown/__test__/index.spec.js b/components/dropdown/__test__/index.spec.js
index febdaf36b..472e5a55b 100644
--- a/components/dropdown/__test__/index.spec.js
+++ b/components/dropdown/__test__/index.spec.js
@@ -1,6 +1,5 @@
 import expect from 'expect';
 import React from 'react';
-import ReactDOM from 'react-dom';
 import {
   renderIntoDocument,
   scryRenderedDOMComponentsWithClass,
@@ -8,7 +7,7 @@ import {
 } from 'react-addons-test-utils';
 import sinon from 'sinon';
 import theme from '../theme.scss';
-import Dropdown, { Dropdown as RawDropdown } from '../Dropdown';
+import Dropdown from '../Dropdown';
 
 
 describe('Dropdown', function () {

From 8f61374ddf8798e0518f306a55d98940dfe7a65e Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 5 Jan 2017 02:39:20 +0100
Subject: [PATCH 1008/1024] Release 1.3.4

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2f48c90fb..3fa440213 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "react-toolbox",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "homepage": "http://www.react-toolbox.com/",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "main": "./lib",
   "author": {
     "name": "React Toolbox Team",

From 8d564331036b3785d30eb09b39fa8adc18ec471f Mon Sep 17 00:00:00 2001
From: Linken Dinh <beckend@users.noreply.github.com>
Date: Wed, 18 Jan 2017 11:16:57 +0100
Subject: [PATCH 1009/1024] export the property (#1141)

---
 components/ripple/index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/ripple/index.js b/components/ripple/index.js
index 7299f9fb3..634eeb545 100644
--- a/components/ripple/index.js
+++ b/components/ripple/index.js
@@ -1,4 +1,5 @@
 import rippleFactory from './Ripple.js';
 import theme from './theme.scss';
 
-export default (options) => rippleFactory({ ...options, theme });
+export const Ripple = (options) => rippleFactory({ ...options, theme });
+export default Ripple;

From 683973fadfb33bb87d0240662d772509afdfa4dd Mon Sep 17 00:00:00 2001
From: Justin Sacks <sacksjust@gmail.com>
Date: Fri, 20 Jan 2017 02:27:49 -0500
Subject: [PATCH 1010/1024] Fixed #894

---
 components/dialog/Dialog.js  | 7 ++++++-
 components/dialog/theme.scss | 4 ++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/components/dialog/Dialog.js b/components/dialog/Dialog.js
index 7e49f2746..08937cc26 100644
--- a/components/dialog/Dialog.js
+++ b/components/dialog/Dialog.js
@@ -17,6 +17,8 @@ const factory = (Overlay, Button) => {
       [props.theme.active]: props.active
     }, props.className);
 
+    const bodyClassName = props.disableScrolling ? props.theme.body : classnames(props.theme.body, props.theme.scroll);
+
     return (
       <Overlay
         active={props.active}
@@ -27,7 +29,7 @@ const factory = (Overlay, Button) => {
         onMouseUp={props.onOverlayMouseUp}
       >
         <div data-react-toolbox='dialog' className={className}>
-          <section role='body' className={props.theme.body}>
+          <section role='body' className={bodyClassName}>
             {props.title ? <h6 className={props.theme.title}>{props.title}</h6> : null}
             {props.children}
           </section>
@@ -47,6 +49,7 @@ const factory = (Overlay, Button) => {
     active: PropTypes.bool,
     children: PropTypes.node,
     className: PropTypes.string,
+    disableScrolling: PropTypes.bool,
     onEscKeyDown: PropTypes.func,
     onOverlayClick: PropTypes.func,
     onOverlayMouseDown: PropTypes.func,
@@ -58,6 +61,7 @@ const factory = (Overlay, Button) => {
       button: PropTypes.string,
       dialog: PropTypes.string,
       navigation: PropTypes.string,
+      scroll: PropTypes.string,
       title: PropTypes.string
     }),
     title: PropTypes.string,
@@ -67,6 +71,7 @@ const factory = (Overlay, Button) => {
   Dialog.defaultProps = {
     actions: [],
     active: false,
+    disableScrolling: false,
     type: 'normal'
   };
 
diff --git a/components/dialog/theme.scss b/components/dialog/theme.scss
index 8757bdf0b..cf7be8ff0 100644
--- a/components/dialog/theme.scss
+++ b/components/dialog/theme.scss
@@ -72,6 +72,10 @@
   color: $color-text-secondary;
 }
 
+.scroll {
+  overflow: hidden;
+}
+
 .navigation {
   flex-grow: 0;
   padding: $dialog-navigation-padding;

From 62f04e4a7038aa72aa8a6f2b7b8eaf3d67ebf06c Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 21 Jan 2017 12:09:13 +0100
Subject: [PATCH 1011/1024] Add carbon

---
 docs/app/components/Carbon.js                 | 26 ++++++++++
 docs/app/components/layout/home/index.js      |  2 +
 docs/app/components/layout/home/style.scss    | 38 +++++++++++++-
 .../layout/main/components/navigation.js      |  4 +-
 .../layout/main/components/navigation.scss    | 49 ++++++++++++++++---
 5 files changed, 110 insertions(+), 9 deletions(-)
 create mode 100644 docs/app/components/Carbon.js

diff --git a/docs/app/components/Carbon.js b/docs/app/components/Carbon.js
new file mode 100644
index 000000000..c37559328
--- /dev/null
+++ b/docs/app/components/Carbon.js
@@ -0,0 +1,26 @@
+import React, { Component, PropTypes } from 'react';
+
+class Carbon extends Component {
+  static propTypes = {
+    className: PropTypes.string
+  };
+
+  componentDidMount () {
+    const script = document.createElement('script');
+    script.src = '//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=reacttoolboxcom';
+    script.async = true;
+    script.id = '_carbonads_js';
+    this.carbonNode.appendChild(script);
+  }
+
+  render () {
+    return (
+      <div
+        className={this.props.className}
+        ref={node => { this.carbonNode = node; }}
+      />
+    );
+  }
+}
+
+export default Carbon;
diff --git a/docs/app/components/layout/home/index.js b/docs/app/components/layout/home/index.js
index 7151e329d..aca827398 100644
--- a/docs/app/components/layout/home/index.js
+++ b/docs/app/components/layout/home/index.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { Link } from 'react-router';
 import Button from 'react-toolbox/button';
 import {Card, CardTitle, CardMedia, CardText, CardActions} from 'react-toolbox/card';
+import Carbon from '../../Carbon';
 import Logo from '../../logo';
 import Navigation from '../../navigation';
 import style from './style';
@@ -35,6 +36,7 @@ const Home = () => (
       <h2 className={style.title}>React Toolbox</h2>
       <h4 className={style.subtitle}>Bootstrap your application with beautiful Material Design Components</h4>
       <Navigation className={style.navigation} />
+      <Carbon className={style.ad} />
     </header>
 
     <section className={style.content}>
diff --git a/docs/app/components/layout/home/style.scss b/docs/app/components/layout/home/style.scss
index 7203229b9..969207a59 100644
--- a/docs/app/components/layout/home/style.scss
+++ b/docs/app/components/layout/home/style.scss
@@ -2,7 +2,7 @@
 @import "http://github.com/config";
 
 $twitter-color: #55acee;
-$content-offset: 4.8 * $unit;
+$content-offset: 2.8 * $unit;
 $content-width: 740px;
 
 .header {
@@ -175,3 +175,39 @@ $content-width: 740px;
     background-color: transparent;
   }
 }
+
+.ad {
+  display: block;
+  padding: $hero-item-spacing / 2 0;
+  margin: 0 auto;
+
+  > div {
+    display: inline-block;
+    max-width: 330px;
+    padding: 10px 10px 10px 160px;
+    overflow: hidden;
+    font-size: 13px;
+    line-height: 1.5;
+    text-align: left;
+    border: solid $palette-indigo-500;
+    border-width: 1px;
+    border-radius: 4px;
+
+    a {
+      color: #fff;
+      text-decoration: none;
+    }
+  }
+
+  :global {
+    .carbon-img {
+      float: left;
+      margin-left: -145px;
+    }
+
+    .carbon-poweredby {
+      display: block;
+      color: #cdbfe3 !important;
+    }
+  }
+}
diff --git a/docs/app/components/layout/main/components/navigation.js b/docs/app/components/layout/main/components/navigation.js
index 8d6a5a245..33a4b3940 100644
--- a/docs/app/components/layout/main/components/navigation.js
+++ b/docs/app/components/layout/main/components/navigation.js
@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react';
 import { List, ListItem } from 'react-toolbox';
 import classnames from 'classnames';
+import Carbon from '../../../Carbon';
 import components from '../modules/components';
 import style from './navigation.scss';
 
@@ -24,7 +25,8 @@ const MainNavigation = ({ className }, { router }) => {
         {drawerItems}
       </List>
       <footer className={style.footer}>
-        <span>React Toolbox © 2016</span>
+        <span className={style.footerLegend}>React Toolbox © 2017</span>
+        <Carbon className={style.ad} />
       </footer>
     </aside>
   );
diff --git a/docs/app/components/layout/main/components/navigation.scss b/docs/app/components/layout/main/components/navigation.scss
index 37203cc20..774b306b4 100644
--- a/docs/app/components/layout/main/components/navigation.scss
+++ b/docs/app/components/layout/main/components/navigation.scss
@@ -14,7 +14,7 @@
 }
 
 .item {
-  > span{
+  > span {
     padding: $navigation-v-padding $navigation-h-padding;
   }
   [data-react-toolbox="list-item-text"] {
@@ -28,13 +28,48 @@
 }
 
 .footer {
-  flex-grow: 0;
-  padding: $navigation-h-padding;
-  overflow: hidden;
+  padding: 20px 10px 5px;
+  border-top: 1px solid rgb(224, 224, 224);
+}
+
+.footerLegend {
+  display: block;
   font-size: $font-size-small;
   color: $color-text-secondary;
-  border-top: $navigation-footer-border;
-  > * {
-    display: block;
+}
+
+.ad {
+  display: block;
+  margin: 10px auto 0;
+
+  > div {
+    display: inline-block;
+    width: 100%;
+    margin: 0 auto;
+    overflow: hidden;
+    font-size: 13px;
+    line-height: 1.5;
+    text-align: left;
+    border-radius: 4px;
+
+    a {
+      display: block;
+      width: 100%;
+      color: #757575 !important;
+      text-decoration: none;
+    }
+  }
+
+  :global {
+    .carbon-img {
+      display: block;
+      margin: 0 auto;
+    }
+
+    .carbon-poweredby {
+      display: inline-block;
+      color: #757575 !important;
+    }
   }
 }
+

From 95a67b70297a9639794dbd63d9de7cd2f15c9053 Mon Sep 17 00:00:00 2001
From: Izak Filmalter <izak@steeple.ai>
Date: Sun, 29 Jan 2017 04:35:36 -0800
Subject: [PATCH 1012/1024] Add $input-icon-right-space var to add the correct
 spacing to the input based on Material Spec. (#1187)

https://material.io/guidelines/components/text-fields.html#text-fields-s
ingle-line-text-field
---
 components/input/_config.scss | 1 +
 components/input/theme.scss   | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/input/_config.scss b/components/input/_config.scss
index ff9f58cda..9b8966456 100644
--- a/components/input/_config.scss
+++ b/components/input/_config.scss
@@ -16,5 +16,6 @@ $input-underline-height:  2 * $unit !default;
 $input-icon-font-size: 2.4 * $unit !default;
 $input-icon-size: 2 * $input-icon-font-size !default;
 $input-icon-offset: 1.6 * $unit !default;
+$input-icon-right-space: 2 * $unit !default;
 $input-chevron-offset: .8 * $unit !default;
 $input-hint-opacity: 1 !default;
diff --git a/components/input/theme.scss b/components/input/theme.scss
index 9e29b9b4a..948556a3c 100644
--- a/components/input/theme.scss
+++ b/components/input/theme.scss
@@ -7,14 +7,14 @@
   position: relative;
   padding: $input-padding 0;
   &.withIcon {
-    margin-left: $input-icon-size;
+    margin-left: $input-icon-size + $input-icon-right-space;
   }
 }
 
 .icon {
   position: absolute;
   top: $input-icon-offset;
-  left: -$input-icon-size;
+  left: -($input-icon-size + $input-icon-right-space);
   display: block;
   width: $input-icon-size;
   height: $input-icon-size;

From 892f351871e5d1b1fc072dccd914b956487eb227 Mon Sep 17 00:00:00 2001
From: Justin Sacks <sacksjust@gmail.com>
Date: Tue, 31 Jan 2017 14:10:31 -0500
Subject: [PATCH 1013/1024] Use correct overflow rule in scroll style (#1199)

* Fixed #894 by adding a disableScrolling prop

* Fixing scroll style
---
 components/dialog/theme.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/dialog/theme.scss b/components/dialog/theme.scss
index cf7be8ff0..d722c0b78 100644
--- a/components/dialog/theme.scss
+++ b/components/dialog/theme.scss
@@ -73,7 +73,7 @@
 }
 
 .scroll {
-  overflow: hidden;
+  overflow: auto;
 }
 
 .navigation {

From cdb6bb01c00997810b307f1279c3405608e2d005 Mon Sep 17 00:00:00 2001
From: Jeremy Martin <jmar777@gmail.com>
Date: Thu, 2 Feb 2017 09:08:34 -0500
Subject: [PATCH 1014/1024] Fixes #1086 (#1208)

---
 components/dropdown/Dropdown.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/dropdown/Dropdown.js b/components/dropdown/Dropdown.js
index 5f28dbdc0..db3cf1156 100644
--- a/components/dropdown/Dropdown.js
+++ b/components/dropdown/Dropdown.js
@@ -81,6 +81,7 @@ const factory = (Input) => {
     });
 
     open = (event) => {
+      if (this.state.active) return;
       const client = event.target.getBoundingClientRect();
       const screenHeight = window.innerHeight || document.documentElement.offsetHeight;
       const up = this.props.auto ? client.top > ((screenHeight / 2) + client.height) : false;

From 298a88b685c03f4e345acd362272602d82d7c9e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20=C5=A0=C5=A5ov=C3=AD=C4=8Dek?=
 <stovmascript@users.noreply.github.com>
Date: Sun, 19 Feb 2017 12:19:16 +0100
Subject: [PATCH 1015/1024] Add Czech locale (#1243)

---
 components/date_picker/readme.md | 2 +-
 components/utils/time.js         | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/components/date_picker/readme.md b/components/date_picker/readme.md
index b9db41f31..54f7bbcbb 100644
--- a/components/date_picker/readme.md
+++ b/components/date_picker/readme.md
@@ -55,7 +55,7 @@ If you want to provide a theme via context, the component key is `RTDatePicker`.
 | `inputClassName`| `String`        |               | This class will be applied to `Input` component of `DatePicker`. |
 | `inputFormat`   | `Function`      |               | Function to format the date displayed on the input. |
 | `label`         | `String`        |               | The text string to use for the floating label element in the input component.|
-| `locale`        | `String` or `Object` | `'en'`     | Set the locale for the date picker dialog ('de','no','en','es','af','ar','be','bg','bn','bo','br','bs','ca','gl','eu','pt','it','fr','ru','ua'). Object is supported too (see example above). |
+| `locale`        | `String` or `Object` | `'en'`     | Set the locale for the date picker dialog ('cs','de','no','en','es','af','ar','be','bg','bn','bo','br','bs','ca','gl','eu','pt','it','fr','ru','ua'). Object is supported too (see example above). |
 | `maxDate`       | `Date`          |               | Date object with the maximum selectable date. |
 | `minDate`       | `Date`          |               | Date object with the minimum selectable date. |
 | `onChange`      | `Function`      |               | Callback called when the picker value is changed.|
diff --git a/components/utils/time.js b/components/utils/time.js
index 4b4bc35ab..f560392f7 100644
--- a/components/utils/time.js
+++ b/components/utils/time.js
@@ -1,4 +1,11 @@
 const dateLocales = {
+  cs: {
+    months: 'Leden_Únor_Březen_Duben_Květen_Červen_Červenec_Srpen_Září_Říjen_Listopad_Prosinec'.split('_'),
+    monthsShort: 'Led_Úno_Bře_Dub_Kvě_Čvn_Čvc_Srp_Zář_Říj_Lis_Pro'.split('_'),
+    weekdays: 'Neděle_Pondělí_Úterý_Středa_Čtvrtek_Pátek_Sobota'.split('_'),
+    weekdaysShort: 'Ne_Po_Út_St_Čt_Pá_So'.split('_'),
+    weekdaysLetter: 'N_P_Ú_S_Č_P_S'.split('_')
+  },
   de: {
     months: 'Januar_Februar_März_April_Mai_Juni_Juli_August_September_Oktober_November_Dezember'.split('_'),
     monthsShort: 'Jan_Feb_März_Apr_Mai_Juni_Juli_Aug_Sept_Okt_Nov_Dez'.split('_'),

From 8f4f5e43d8d8fb361f265579a0914359d11d4072 Mon Sep 17 00:00:00 2001
From: Gerhard Sletten <gerhardsletten@gmail.com>
Date: Sun, 2 Apr 2017 14:05:45 +0200
Subject: [PATCH 1016/1024] Fix radio-buttons for touch-devices (#1298)

---
 components/radio/RadioButton.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/radio/RadioButton.js b/components/radio/RadioButton.js
index 8add1fe6d..37251e1c1 100644
--- a/components/radio/RadioButton.js
+++ b/components/radio/RadioButton.js
@@ -61,6 +61,7 @@ const factory = (Radio) => {
           className={_className}
           onMouseEnter={onMouseEnter}
           onMouseLeave={onMouseLeave}
+          onTouchEnd={this.handleClick}
         >
           <input
             {...others}

From 11dca84f8d087d099a6fc18dcf8b17236f38ca46 Mon Sep 17 00:00:00 2001
From: LachlanStuart <Lachlan@LachlanStuart.com>
Date: Mon, 3 Apr 2017 00:08:06 +1200
Subject: [PATCH 1017/1024] Change Autocomplete to update state.direction when
 focus is set or props are changed, instead of in shouldComponentUpdate
 (#1327)

---
 components/autocomplete/Autocomplete.js | 20 +++++++-------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
index 18ba36bc5..900a05f61 100644
--- a/components/autocomplete/Autocomplete.js
+++ b/components/autocomplete/Autocomplete.js
@@ -80,16 +80,10 @@ const factory = (Chip, Input) => {
          query: this.query(nextProps.value)
        });
      }
-   }
-
-   shouldComponentUpdate (nextProps, nextState) {
-     if (!this.state.focus && nextState.focus && this.props.direction === POSITION.AUTO) {
-       const direction = this.calculateDirection();
-       if (this.state.direction !== direction) {
-         this.setState({ direction });
-       }
+     if (this.state.focus && this.props.direction !== nextProps.direction) {
+       const direction = this.calculateDirection(nextProps.direction);
+       this.setState({ direction });
      }
-     return true;
    }
 
    handleChange = (values, event) => {
@@ -122,7 +116,7 @@ const factory = (Chip, Input) => {
 
    handleQueryFocus = (event) => {
      this.suggestionsNode.scrollTop = 0;
-     this.setState({active: '', focus: true});
+     this.setState({active: '', focus: true, direction: this.calculateDirection(this.props.direction)});
      if (this.props.onFocus) this.props.onFocus(event);
    };
 
@@ -158,14 +152,14 @@ const factory = (Chip, Input) => {
      this.setState({active: event.target.id});
    };
 
-   calculateDirection () {
-     if (this.props.direction === 'auto') {
+   calculateDirection (propsDirection) {
+     if (propsDirection === 'auto') {
        const client = ReactDOM.findDOMNode(this.inputNode).getBoundingClientRect();
        const screen_height = window.innerHeight || document.documentElement.offsetHeight;
        const up = client.top > ((screen_height / 2) + client.height);
        return up ? 'up' : 'down';
      } else {
-       return this.props.direction;
+       return propsDirection;
      }
    }
 

From 7b20622e9158dfb367b987101901a5dd6fdae63a Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 3 Apr 2017 09:58:05 +0200
Subject: [PATCH 1018/1024] Revert PR #1298

---
 components/radio/RadioButton.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/radio/RadioButton.js b/components/radio/RadioButton.js
index 37251e1c1..8add1fe6d 100644
--- a/components/radio/RadioButton.js
+++ b/components/radio/RadioButton.js
@@ -61,7 +61,6 @@ const factory = (Radio) => {
           className={_className}
           onMouseEnter={onMouseEnter}
           onMouseLeave={onMouseLeave}
-          onTouchEnd={this.handleClick}
         >
           <input
             {...others}

From 332c0da2cb17dcf4c50762108b25fcb7101c4725 Mon Sep 17 00:00:00 2001
From: Samuel Scheiderich <sams@servantpc.com>
Date: Mon, 24 Jul 2017 10:34:37 -0400
Subject: [PATCH 1019/1024] Replaced tab label with button element for keyboard
 accessibility.

---
 components/tabs/Tab.js     | 4 ++--
 components/tabs/theme.scss | 3 +++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/tabs/Tab.js b/components/tabs/Tab.js
index 0fe773183..08c499eab 100644
--- a/components/tabs/Tab.js
+++ b/components/tabs/Tab.js
@@ -59,10 +59,10 @@ class Tab extends Component {
     }, className);
 
     return (
-      <label {...other} data-react-toolbox='tab' className={_className} onClick={this.handleClick}>
+      <button {...other} data-react-toolbox='tab' className={_className} onClick={this.handleClick}>
         {icon && <FontIcon className={theme.icon} value={icon}/>}
         {label}
-      </label>
+      </button>
     );
   }
 }
diff --git a/components/tabs/theme.scss b/components/tabs/theme.scss
index 85ae18bec..e7400f15a 100644
--- a/components/tabs/theme.scss
+++ b/components/tabs/theme.scss
@@ -38,12 +38,15 @@
 
 .label {
   padding: $tab-label-v-padding $tab-label-h-padding;
+  font-family: inherit;
   font-size: $tab-text-height;
   font-weight: $font-weight-semi-bold;
   line-height: 1;
   color: $tab-text-inactive-color;
   text-align: center;
   text-transform: uppercase;
+  background: none;
+  border: 0;
   transition-timing-function: $animation-curve-default;
   transition-duration: $animation-duration;
   transition-property: box-shadow, color;

From 8b32309aa974b26be24df2b1de211ef28ce6513b Mon Sep 17 00:00:00 2001
From: peterdivvito <peter@divvito.com>
Date: Thu, 3 Aug 2017 02:15:22 +1000
Subject: [PATCH 1020/1024] Issue #1581 - Fixed toggling of am to pm (#1582)

---
 components/utils/__test__/time.spec.js | 17 +++++++++++++++++
 components/utils/time.js               |  2 +-
 2 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 components/utils/__test__/time.spec.js

diff --git a/components/utils/__test__/time.spec.js b/components/utils/__test__/time.spec.js
new file mode 100644
index 000000000..f88a05a23
--- /dev/null
+++ b/components/utils/__test__/time.spec.js
@@ -0,0 +1,17 @@
+/* global describe */
+/* global it */
+import expect from 'expect';
+import time from '../time';
+
+describe('time', function () {
+  describe('toggleTimeMode', function () {
+    it('changes from am to pm', function () {
+      const date = new Date(107, 2, 2, 10, 30);
+      expect(time.toggleTimeMode(date).getTime()).toEqual(new Date(107, 2, 2, 22, 30).getTime());
+    });
+    it('changes from pm to am', function () {
+      const date = new Date(107, 2, 2, 22, 30);
+      expect(time.toggleTimeMode(date).getTime()).toEqual(new Date(107, 2, 2, 10, 30).getTime());
+    });
+  });
+});
diff --git a/components/utils/time.js b/components/utils/time.js
index f560392f7..b28ff35de 100644
--- a/components/utils/time.js
+++ b/components/utils/time.js
@@ -261,7 +261,7 @@ const time = {
     const newDate = this.clone(d);
     const hours = newDate.getHours();
 
-    newDate.setHours(hours - (hours > 12 ? -12 : 12));
+    newDate.setHours(hours + (hours > 12 ? -12 : 12));
     return newDate;
   },
 

From 50accd46966521e0a968e42fc4161d9efe3e8a3e Mon Sep 17 00:00:00 2001
From: timurgarif <tgarifulin@gmail.com>
Date: Wed, 2 Aug 2017 19:24:44 +0300
Subject: [PATCH 1021/1024] Update Tabs.js (#1567)

---
 components/tabs/Tabs.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/components/tabs/Tabs.js b/components/tabs/Tabs.js
index 359905b35..92625317e 100644
--- a/components/tabs/Tabs.js
+++ b/components/tabs/Tabs.js
@@ -47,8 +47,12 @@ const factory = (Tab, TabContent, FontIcon) => {
       this.handleResize();
     }
 
-    componentWillReceiveProps (nextProps) {
-      this.updatePointer(nextProps.index);
+    componentDidUpdate (prevProps) {
+      const { index, children } = this.props;
+      const { index: prevIndex, children: prevChildren } = prevProps;
+      if (index !== prevIndex || children !== prevChildren) {
+        this.updatePointer(index);
+      }
     }
 
     componentWillUnmount () {

From 2e8481192b963d75cd3961a491abc4db258ba95e Mon Sep 17 00:00:00 2001
From: Samuel Scheiderich <samsch@users.noreply.github.com>
Date: Thu, 3 Aug 2017 11:09:28 -0400
Subject: [PATCH 1022/1024] Fixed missing type="button" in Tab.js.

Without type="button", the tab buttons default to submitting any html form which contains them.
---
 components/tabs/Tab.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/tabs/Tab.js b/components/tabs/Tab.js
index 08c499eab..8b9cb7721 100644
--- a/components/tabs/Tab.js
+++ b/components/tabs/Tab.js
@@ -59,7 +59,7 @@ class Tab extends Component {
     }, className);
 
     return (
-      <button {...other} data-react-toolbox='tab' className={_className} onClick={this.handleClick}>
+      <button type="button" {...other} data-react-toolbox='tab' className={_className} onClick={this.handleClick}>
         {icon && <FontIcon className={theme.icon} value={icon}/>}
         {label}
       </button>

From fdd7939e0868774a2ee9dfb500bbabb3aae08d5f Mon Sep 17 00:00:00 2001
From: Yuliya Haluza <yuliya_haluza@epam.com>
Date: Wed, 31 Jan 2018 13:48:00 +0300
Subject: [PATCH 1023/1024] Adding Event to be passed for Radio Group for
 handleClick function similar as other components #1544

---
 components/radio/RadioGroup.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/radio/RadioGroup.js b/components/radio/RadioGroup.js
index d15d50371..c73c1e77b 100644
--- a/components/radio/RadioGroup.js
+++ b/components/radio/RadioGroup.js
@@ -20,8 +20,8 @@ const factory = (RadioButton) => {
       disabled: false
     };
 
-    handleChange = (value) => {
-      if (this.props.onChange) this.props.onChange(value);
+    handleChange = (value, event) => {
+      if (this.props.onChange) this.props.onChange(value, event);
     };
 
     renderRadioButtons () {

From 59ec6cb244717d05a4c0e04f07ab5cb884850851 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas.hallock@providence.org>
Date: Fri, 22 Jun 2018 11:37:24 -0700
Subject: [PATCH 1024/1024] document the arguments passed to onChange props,
 because they are not consistent with the arguments passed to onChange
 handlers by the DOM

---
 components/autocomplete/readme.md | 4 ++--
 components/checkbox/readme.md     | 2 +-
 components/date_picker/readme.md  | 2 +-
 components/dropdown/readme.md     | 2 +-
 components/input/readme.md        | 2 +-
 components/list/readme.md         | 6 +++---
 components/radio/readme.md        | 4 ++--
 components/slider/readme.md       | 2 +-
 components/switch/readme.md       | 2 +-
 components/time_picker/readme.md  | 2 +-
 10 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/components/autocomplete/readme.md b/components/autocomplete/readme.md
index 2b7b8a3ab..394337a3a 100644
--- a/components/autocomplete/readme.md
+++ b/components/autocomplete/readme.md
@@ -52,8 +52,8 @@ If you want to provide a theme via context, the component key is `RTAutocomplete
 | `label`                         | `String` or `Node`            |         | The text string to use for the floating label element. |
 | `multiple`                      | `Bool`                        | `true`  | If true, component can hold multiple values. |
 | `onBlur`                        | `Function`                    |         | Callback function that is fired when component is blurred. |
-| `onChange`                      | `Function`                    |         | Callback function that is fired when the components's value changes. |
-| `onQueryChange`                 | `Function`                    |         | Callback function that is fired when the components's query input value changes. |
+| `onChange`                      | `Function`                    |         | Called with (value, event) when the components's value changes. |
+| `onQueryChange`                 | `Function`                    |         | Called with (value) when the components's query input value changes. |
 | `onFocus`                       | `Function`                    |         | Callback function that is fired when component is focused. |
 | `source`                        | `Object` or `Array`           |         | Object of key/values or array representing all items suggested. |
 | `selectedPosition`              | `String`                      | `above` | Determines if the selected list is shown above or below input. It can be `above`, `below` or `none`. |
diff --git a/components/checkbox/readme.md b/components/checkbox/readme.md
index 5f7e21f62..4d2284ff8 100644
--- a/components/checkbox/readme.md
+++ b/components/checkbox/readme.md
@@ -50,7 +50,7 @@ If you want to provide a theme via context, the component key is `RTCheckbox`.
 | `label`         | `String` of `node`        |                 | Text label to attach next to the checkbox element.|
 | `name`          | `String`        | `false`         | The name of the field to set in the input checkbox.|
 | `onBlur`        | `Function`      |                 | Callback called when the checkbox is blurred.|
-| `onChange`      | `Function`      |                 | Callback called when the checkbox value is changed.|
+| `onChange`      | `Function`      |                 | Called with (isChecked, event) when the checkbox value is changed.|
 | `onFocus`       | `Function`      |                 | Callback called when the checkbox is focused |
 
 ## Theme
diff --git a/components/date_picker/readme.md b/components/date_picker/readme.md
index 54f7bbcbb..f6cf6acff 100644
--- a/components/date_picker/readme.md
+++ b/components/date_picker/readme.md
@@ -58,7 +58,7 @@ If you want to provide a theme via context, the component key is `RTDatePicker`.
 | `locale`        | `String` or `Object` | `'en'`     | Set the locale for the date picker dialog ('cs','de','no','en','es','af','ar','be','bg','bn','bo','br','bs','ca','gl','eu','pt','it','fr','ru','ua'). Object is supported too (see example above). |
 | `maxDate`       | `Date`          |               | Date object with the maximum selectable date. |
 | `minDate`       | `Date`          |               | Date object with the minimum selectable date. |
-| `onChange`      | `Function`      |               | Callback called when the picker value is changed.|
+| `onChange`      | `Function`      |               | Called with (date, event) when the picker value is changed.|
 | `onClick`       | `Function`      |               | Callback fired on Input click.|
 | `onDismiss`     | `Function`      |               | Callback fired after dismissing the Dialog.|
 | `onEscKeyDown`  | `Function`      |               | Callback called when the ESC key is pressed with the overlay active. |
diff --git a/components/dropdown/readme.md b/components/dropdown/readme.md
index 7d7870a4c..174dab783 100644
--- a/components/dropdown/readme.md
+++ b/components/dropdown/readme.md
@@ -46,7 +46,7 @@ If you want to provide a theme via context, the component key is `RTDropdown`.
 | `error`      | `String`   |         | Give an error string to display under the field.|
 | `label`      | `String`   |         | The text string to use for the floating label element.|
 | `onBlur`     | `Function` |         | Callback function that is fired when the component is blurred.|
-| `onChange`   | `Function` |         | Callback function that is fired when the component's value changes.|
+| `onChange`   | `Function` |         | Called with (item.value, event) when the component's value changes.|
 | `onFocus`    | `Function` |         | Callback function that is fired when the component is focused.|
 | `source`     | `Array`    |         | Array of data objects with the data to represent in the dropdown.|
 | `template`   | `Function` |         | Callback function that returns a JSX template to represent the element.|
diff --git a/components/input/readme.md b/components/input/readme.md
index f05b54467..77dfb63d7 100644
--- a/components/input/readme.md
+++ b/components/input/readme.md
@@ -44,7 +44,7 @@ If you want to provide a theme via context, the component key is `RTInput`.
 | `multiline`     | `Boolean`               | `false`         | If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.|
 | `rows`          | `Number`                |                 | The number of rows the multiline input field has.|
 | `onBlur`        | `Function`              |                 | Callback function that is fired when component is blurred.|
-| `onChange`      | `Function`              |                 | Callback function that is fired when the component's value changes.|
+| `onChange`      | `Function`              |                 | Called with (value, event) when the value changes.|
 | `onFocus`       | `Function`              |                 | Callback function that is fired when component is focused.|
 | `onKeyPress`    | `Function`              |                 | Callback function that is fired when a key is pressed.|
 | `required`      | `Boolean`               | `false`         | If true, the html input has a required attribute.|
diff --git a/components/list/readme.md b/components/list/readme.md
index edc4c93de..8e1354962 100644
--- a/components/list/readme.md
+++ b/components/list/readme.md
@@ -107,9 +107,9 @@ A special type of item that has a checkbox control on the left side. It implemen
 | `disabled`      | `String`        | `false`       | If true, the item is displayed as disabled and it's not clickable.|
 | `legend`        | `String`        |               | Secondary text to display under the caption.|
 | `name`          | `String`        |               | Name for the checkbox input item.|
-| `onBlur`        | `Function`      |               | Callback called when the input element is blurred.|
-| `onChange`      | `Function`      |               | Callback called when the input element is changed.|
-| `onFocus`       | `Function`      |               | Callback called when the input element is focused.|
+| `onBlur`        | `Function`      |               | Passed through to the wrapped Checkbox component.|
+| `onChange`      | `Function`      |               | Passed through to the wrapped Checkbox component.|
+| `onFocus`       | `Function`      |               | Passed through to the wrapped Checkbox component.|
 
 ### Theme
 | Name     | Description|
diff --git a/components/radio/readme.md b/components/radio/readme.md
index 78f8df4f5..a5123a00d 100644
--- a/components/radio/readme.md
+++ b/components/radio/readme.md
@@ -41,7 +41,7 @@ A radio selector is mean to get a value from a set of choices, that's why a radi
 | `className`   | `String`      | `''`        | Set a class to give custom styles to the group.|
 | `disabled`    | `Boolean`     | `false`     | If true, the group will be displayed as disabled.|
 | `name`        | `String`      |             | Name for the input element group. |
-| `onChange`    | `Function`    |             | Callback function that will be invoked when the value changes. |
+| `onChange`    | `Function`    |             | Called with (value, event) when the value changes.|
 | `value`       | `Any`         |             | Default value selected in the radio group. |
 
 
@@ -59,7 +59,7 @@ The inner component to compose radio selectors. They will be rendered as radio i
 | `label`       | `String` of `node`  | `''`        | Label for the radio button.|
 | `name`        | `String`      |             | Name for the input element. |
 | `onBlur`      | `Function`    |             | Callback function that will be invoked when the input is blurred. |
-| `onChange`    | `Function`    |             | Callback function that will be invoked when the value changes. |
+| `onChange`    | `Function`    |             | Called with (value, event) when the value changes. Context is bound to the parent RadioGroup.|
 | `onFocus`     | `Function`    |             | Callback function that will be invoked when the input is focused. |
 | `value`       | `Any`         |             | Value for the radio button. |
 
diff --git a/components/slider/readme.md b/components/slider/readme.md
index 57eaa2558..fe3654d78 100644
--- a/components/slider/readme.md
+++ b/components/slider/readme.md
@@ -47,7 +47,7 @@ This component can be styled by context providing a theme with the key `RTSlider
 | `editable`    | `Boolean`     | `false`   | If true, an input is shown and the user can set the slider from keyboard value.|
 | `max`         | `Number`      | `100`     | Maximum value permitted.|
 | `min`         | `Number`      | `0`       | Minimum value permitted.|
-| `onChange`    | `Function`    |           | Callback function that will be invoked when the slider value changes.|
+| `onChange`    | `Function`    |           | Called with (value) when the slider value changes.|
 | `pinned`      | `Boolean`     | `false`   | If true, a pin with numeric value label is shown when the slider thumb is pressed. Use for settings for which users need to know the exact value of the setting.|
 | `snaps`       | `Boolean`     | `false`   | If true, the slider thumb snaps to tick marks evenly spaced based on the step property value.|
 | `step`        | `Number`      | `0.01`    | Amount to vary the value when the knob is moved or increase/decrease is called.|
diff --git a/components/switch/readme.md b/components/switch/readme.md
index 41d814147..1e9654958 100644
--- a/components/switch/readme.md
+++ b/components/switch/readme.md
@@ -54,7 +54,7 @@ This component can be styled by context providing a theme with the key `RTSwitch
 | `label`        | `String`         |               | The text string to use for the floating label element.|
 | `name`         | `String`         |               | The text string used as name of the input.|
 | `onBlur`       | `Function`       |               | Callback function that is fired when when the switch is blurred.|
-| `onChange`     | `Function`       |               | Callback function that is fired when the component's value changes.|
+| `onChange`     | `Function`       |               | Called with (checked, event) when the component's value changes.|
 | `onFocus`      | `Function`       |               | Callback function that is fired when the switch is focused.|
 
 ## Theme
diff --git a/components/time_picker/readme.md b/components/time_picker/readme.md
index 2224128e4..c0184d574 100644
--- a/components/time_picker/readme.md
+++ b/components/time_picker/readme.md
@@ -41,7 +41,7 @@ If you want to provide a theme via context, the component key is `RTTimePicker`.
 | `inputClassName`| `String`        |         | This class will be applied to `Input` component of `TimePicker`. |
 | `format`        | `String`    | `24hr`      | Format to display the clock. It can be `24hr` or `ampm`.|
 | `label`         | `String`    |             | The text string to use for the floating label element in the input component.|
-| `onChange`      | `Function`  |             | Callback called when the picker value is changed.|
+| `onChange`      | `Function`  |             | Called with (value, event) when the picker value changes.|
 | `readonly`      | `Boolean`   |             | The input element will be readonly and look like disabled.|
 | `value`         | `Date`      |             | Datetime object with currrently selected time. |