Better PropType syntax and delete required className api

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
    };

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
   };

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 = {

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
   })
 };
 

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
   })
 };
 

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
   })
 };
 

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
   })
 };
 

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,

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
     })
   };
 

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
       })
     };
 

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
     })
   };
 

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
     };

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
   };

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
   };

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),

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
     };

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

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'])
   };

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,

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
   })
 };
 

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 = {

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
   })
 };
 

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 = {

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
   })
 };
 

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
       })
     };
 

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
     })
   };
 

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
   })
 };
 

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
     };

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
   })
 };
 

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'])
   };

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)
     };

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
   };

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
   })
 };
 

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
       })
     };
 

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
       })
     };
 

components/menu/MenuDivider.js

@@ -8,7 +8,7 @@ const MenuDivider = ({ theme }) => (
 
 MenuDivider.propTypes = {
   theme: PropTypes.shape({
-    menuDivider: PropTypes.string.isRequired
+    menuDivider: PropTypes.string
   })
 };
 

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
       })
     };
 

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'])
   };

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
     })
   };
 

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
     })
   };
 

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
     };

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
         })
       };
 

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({

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
   };

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
   };

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
     })
   };
 

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
     })
   };
 

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
     };

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
     };