Merge master and solve conflicts

.bumpedrc

@@ -0,0 +1,35 @@
+files: [
+  'package.json'
+]
+
+plugins:
+
+  prerelease:
+
+    'Linting config files':
+      plugin: 'bumped-finepack'
+
+    'Linting projects files':
+      plugin: 'bumped-terminal'
+      command: 'npm run lint'
+
+    'Preparing build':
+      plugin: 'bumped-terminal'
+      command: 'npm run prepublish'
+
+  postrelease:
+
+    'Generating CHANGELOG file':
+      plugin: 'bumped-changelog'
+
+    'Publishing CHANGELOG at Github':
+      plugin: 'bumped-terminal'
+      command: 'git add CHANGELOG.md && git commit CHANGELOG.md -m "$newVersion release" && git push origin master'
+
+    'Publishing tag at Github':
+      plugin: 'bumped-terminal'
+      command: 'git tag $newVersion && git push origin $newVersion'
+
+    'Publishing at NPM':
+      plugin: 'bumped-terminal'
+      command: 'npm publish'

README.md

@@ -24,7 +24,7 @@ Once you have the workflow ready, you can just require and use the components:
 
 ```jsx
 import React from 'react';
-import Button from 'react-toolbox/button';
+import Button from 'react-toolbox/lib/button';
 
 const CustomButton = () => (
   <Button label="Hello world" kind="raised" accent />

components/app_bar/readme.md

@@ -3,7 +3,7 @@
 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.
 
 ```jsx
-import AppBar from 'react-toolbox/app_bar';
+import AppBar from 'react-toolbox/lib/app_bar';
 
 const AppBarTest = () => (
   <AppBar fixed flat>

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/button';
+import Button from 'react-toolbox/lib/button';
 
 const TestButtons = () => (
   <div>

components/card/readme.md

@@ -4,7 +4,7 @@ A [card](https://www.google.com/design/spec/components/cards.html) is a piece of
 
 <!-- example -->
 ```jsx
-import Card from 'react-toolbox/card';
+import Card from 'react-toolbox/lib/card';
 
 const actions = [
   { label: 'Play', icon: 'play-arrow'},

components/checkbox/readme.md

@@ -4,7 +4,7 @@
 
 <!-- example -->
 ```jsx
-import Checkbox from 'react-toolbox/checkbox';
+import Checkbox from 'react-toolbox/lib/checkbox';
 
 class TestCheckbox extends React.Component {
   state = {

components/date_picker/readme.md

@@ -4,7 +4,7 @@ A [dialog](https://www.google.com/design/spec/components/pickers.html#pickers-da
 
 <!-- example -->
 ```jsx
-import DatePicker from 'react-toolbox/date_picker';
+import DatePicker from 'react-toolbox/lib/date_picker';
 
 const selectedDate = new Date(1995, 11, 17);
 const DatePickerTest = () => (

components/dialog/readme.md

@@ -4,7 +4,7 @@
 
 <!-- example -->
 ```jsx
-import Dialog from 'react-toolbox/dialog';
+import Dialog from 'react-toolbox/lib/dialog';
 
 class DialogTest extends React.Component {
   state = { 

components/drawer/readme.md

@@ -4,7 +4,7 @@ The [navigation drawer](https://www.google.com/design/spec/patterns/navigation-d
 
 <!-- example -->
 ```jsx
-import Drawer from 'react-toolbox/drawer';
+import Drawer from 'react-toolbox/lib/drawer';
 
 class DrawerTest extends React.Component {
   state = {

components/dropdown/readme.md

@@ -4,7 +4,7 @@ The Dropdown selects an option between multiple selections. The element displays
 
 <!-- example -->
 ```jsx
-import Dropdown from 'react-toolbox/dropdown';
+import Dropdown from 'react-toolbox/lib/dropdown';
 
 const countries: [
   { value: 'EN-gb', label: 'England' },

components/font_icon/readme.md

@@ -4,7 +4,7 @@ The font icon component is used to represent an icon from the [Google Material D
 
 <!-- example -->
 ```jsx
-import FontIcon from 'react-toolbox/font_icon';
+import FontIcon from 'react-toolbox/lib/font_icon';
 
 const FontIcons = () => (
   <span>

components/input/readme.md

@@ -4,7 +4,7 @@ Although we are calling then Inputs they actually correspond to Material Design
 
 <!-- example -->
 ```jsx
-import Input from 'react-toolbox/input';
+import Input from 'react-toolbox/lib/input';
 
 class InputTest extends React.Component {
   state = { name: '', phone: '', email: '' };

components/input/style.scss

@@ -44,7 +44,7 @@
       color: $input-text-highlight-color;
     }
   }
-  &:focus, &.filled {
+  &:focus, &.filled, &[type='date'], &[type='time']{
     ~ .label:not(.fixed) {
       top: $input-focus-label-top;
       font-size: $input-label-font-size;

components/link/readme.md

@@ -4,7 +4,7 @@ The link is a very simple component that acts mostly as a wrapper for the HTML a
 
 <!-- example -->
 ```jsx
-import Link from 'react-toolbox/link';
+import Link from 'react-toolbox/lib/link';
 
 const LinksTest = () => (
   <nav>

components/navigation/readme.md

@@ -4,7 +4,7 @@ This component is intended to be a common wrapper for a group of links or button
 
 <!-- example -->
 ```jsx
-import Navigation from 'react-toolbox/navigation';
+import Navigation from 'react-toolbox/lib/navigation';
 
 const links = [
   { href: 'http://', icon: 'person', label: 'Profile' },

components/progress_bar/readme.md

@@ -4,7 +4,7 @@ Minimize visual changes that occur while your app loads content by representing
 
 <!-- example -->
 ```jsx
-import ProgressBar from 'react-toolbox/progress_bar';
+import ProgressBar from 'react-toolbox/lib/progress_bar';
 
 const ProgressTest = () => (
   <div>

components/switch/readme.md

@@ -4,7 +4,7 @@ On/off switches toggle the state of a single settings option. The option that th
 
 <!-- example -->
 ```jsx
-import Switch from 'react-toolbox/switch';
+import Switch from 'react-toolbox/lib/switch';
 
 const SwitchTest = () => (
   <fieldset>

components/table/components/row.jsx

@@ -68,9 +68,9 @@ class Row extends React.Component {
   renderCellSelectable () {
     if (this.props.onSelect) {
       return (
-        <th className={style.selectable}>
+        <td className={style.selectable}>
           <Checkbox onChange={this.handleSelectChange} checked={this.props.selected}/>
-        </th>
+        </td>
       );
     }
   }

components/table/readme.md

@@ -4,7 +4,7 @@ The Table component is an enhanced version of the standard HTML `<table>`. A dat
 
 <!-- example -->
 ```jsx
-import Table from 'react-toolbox/table';
+import Table from 'react-toolbox/lib/table';
 
 const UserModel = {
   name: {type: String}

components/time_picker/readme.md

@@ -4,7 +4,7 @@ A [dialog picker](https://www.google.com/design/spec/components/pickers.html#pic
 
 <!-- example -->
 ```jsx
-import TimePicker from 'react-toolbox/time_picker';
+import TimePicker from 'react-toolbox/lib/time_picker';
 
 let selectedTime = new Date();
 selectedTime.setHours(17);

components/tooltip/readme.md

@@ -4,8 +4,8 @@ A tooltip is Useful for show information on hover in any kind of component. Out
 
 <!-- example -->
 ```jsx
-import Button from 'react-toolbox/button';
-import Tooltip from 'react-toolbox/tooltip';
+import Button from 'react-toolbox/lib/button';
+import Tooltip from 'react-toolbox/lib/tooltip';
 
 const TooltipTest = () => (
   <div>

docs/app/components/layout/home/index.jsx

@@ -12,7 +12,7 @@ const Home = () => (
       <div className={style.github}>
         <iframe src='https://ghbtns.com/github-btn.html?user=react-toolbox&amp;repo=react-toolbox&amp;type=star&amp;count=true' frameBorder='0' scrolling='0' />
         <iframe src='https://ghbtns.com/github-btn.html?user=react-toolbox&amp;repo=react-toolbox&amp;type=fork&amp;count=true' frameBorder='0' scrolling='0' />
-        <a className={style.donate} href='https://www.paypal.com/javivelasco' target='_blank'>
+        <a className={style.donate} href='https://www.paypal.me/javivelasco' target='_blank'>
           <span className={style.legend}>support</span>
           <span className={style.paypal}>paypal</span>
         </a>

docs/app/components/layout/install/install.md

@@ -18,7 +18,7 @@ Once you have the workflow ready, you can just require and use the components:
 
 ```jsx
 import React from 'react';
-import Button from 'react-toolbox/button';
+import Button from 'react-toolbox/lib/button';
 
 const CustomButton = () => (
   <Button label="Hello world" kind="raised" accent />

package.json

@@ -81,7 +81,7 @@
     "redbox-react": "^1.1.1",
     "rimraf": "^2.4.3",
     "sass-loader": "^3.0.0",
-    "sinon": "git://github.com/cjohansen/Sinon.JS#sinon-2.0",
+    "sinon": "git://github.com/sinonjs/sinon.git#b672042043517b9f84e14ed0fb8265126168778a",
     "style-loader": "^0.13.0",
     "toolbox-loader": "0.0.2",
     "webpack": "^1.12.0",

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.4</small></h1>
       <ButtonToolbox
         accent
         className={style.github}