diff --git a/dist/components/PropTable.js b/dist/components/PropTable.js
new file mode 100644
index 000000000000..3b90d6d31663
--- /dev/null
+++ b/dist/components/PropTable.js
@@ -0,0 +1,146 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _map = require('babel-runtime/core-js/map');
+
+var _map2 = _interopRequireDefault(_map);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var PropTypesMap = new _map2.default();
+for (var typeName in _react2.default.PropTypes) {
+  if (!_react2.default.PropTypes.hasOwnProperty(typeName)) {
+    continue;
+  }
+  var type = _react2.default.PropTypes[typeName];
+  PropTypesMap.set(type, typeName);
+}
+
+var PropTable = function (_React$Component) {
+  (0, _inherits3.default)(PropTable, _React$Component);
+
+  function PropTable() {
+    (0, _classCallCheck3.default)(this, PropTable);
+    return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(PropTable).apply(this, arguments));
+  }
+
+  (0, _createClass3.default)(PropTable, [{
+    key: 'render',
+    value: function render() {
+      var comp = this.props.comp;
+
+      if (!comp) {
+        return null;
+      }
+
+      var props = [];
+      for (var property in comp.propTypes) {
+        if (!comp.propTypes.hasOwnProperty(property)) {
+          continue;
+        }
+        var _type = comp.propTypes[property];
+        var propType = PropTypesMap.get(_type) || 'other';
+        var required = _type.isRequired === undefined ? 'yes' : 'no';
+        var defaults = '-';
+        props.push({ property: property, propType: propType, required: required, defaults: defaults });
+      }
+
+      return _react2.default.createElement(
+        'table',
+        null,
+        _react2.default.createElement(
+          'thead',
+          null,
+          _react2.default.createElement(
+            'tr',
+            null,
+            _react2.default.createElement(
+              'th',
+              null,
+              'property'
+            ),
+            _react2.default.createElement(
+              'th',
+              null,
+              'propType'
+            ),
+            _react2.default.createElement(
+              'th',
+              null,
+              'required'
+            ),
+            _react2.default.createElement(
+              'th',
+              null,
+              'defaults'
+            )
+          )
+        ),
+        _react2.default.createElement(
+          'tbody',
+          null,
+          props.map(function (row) {
+            return _react2.default.createElement(
+              'tr',
+              null,
+              _react2.default.createElement(
+                'td',
+                null,
+                row.property
+              ),
+              _react2.default.createElement(
+                'td',
+                null,
+                row.propType
+              ),
+              _react2.default.createElement(
+                'td',
+                null,
+                row.required
+              ),
+              _react2.default.createElement(
+                'td',
+                null,
+                row.defaults
+              )
+            );
+          })
+        )
+      );
+    }
+  }]);
+  return PropTable;
+}(_react2.default.Component);
+
+PropTable.displayName = 'PropTable';
+PropTable.propTypes = {
+  comp: _react2.default.PropTypes.func
+};
+exports.default = PropTable;
\ No newline at end of file
diff --git a/dist/components/Story.js b/dist/components/Story.js
index 8cde65957462..bfdef6b49f93 100644
--- a/dist/components/Story.js
+++ b/dist/components/Story.js
@@ -32,10 +32,6 @@ var _inherits2 = require('babel-runtime/helpers/inherits');
 
 var _inherits3 = _interopRequireDefault(_inherits2);
 
-var _map = require('babel-runtime/core-js/map');
-
-var _map2 = _interopRequireDefault(_map);
-
 var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
@@ -44,21 +40,16 @@ var _reactRemarkable = require('react-remarkable');
 
 var _reactRemarkable2 = _interopRequireDefault(_reactRemarkable);
 
+var _PropTable = require('./PropTable');
+
+var _PropTable2 = _interopRequireDefault(_PropTable);
+
 var _Node = require('./Node.js');
 
 var _Node2 = _interopRequireDefault(_Node);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var PropTypesMap = new _map2.default();
-for (var typeName in _react2.default.PropTypes) {
-  if (!_react2.default.PropTypes.hasOwnProperty(typeName)) {
-    continue;
-  }
-  var type = _react2.default.PropTypes[typeName];
-  PropTypesMap.set(type, typeName);
-}
-
 var Story = function (_React$Component) {
   (0, _inherits3.default)(Story, _React$Component);
 
@@ -109,28 +100,16 @@ var Story = function (_React$Component) {
   }
 
   (0, _createClass3.default)(Story, [{
-    key: 'openInfo',
-    value: function openInfo() {
-      this.setState({ open: true });
-      return false;
-    }
-  }, {
-    key: 'closeInfo',
-    value: function closeInfo() {
-      this.setState({ open: false });
-      return false;
-    }
-  }, {
     key: 'render',
     value: function render() {
       if (this.props.showInline) {
-        return this.renderInline();
+        return this._renderInline();
       }
-      return this.renderOverlay();
+      return this._renderOverlay();
     }
   }, {
-    key: 'renderInline',
-    value: function renderInline() {
+    key: '_renderInline',
+    value: function _renderInline() {
       return _react2.default.createElement(
         'div',
         null,
@@ -149,8 +128,8 @@ var Story = function (_React$Component) {
       );
     }
   }, {
-    key: 'renderOverlay',
-    value: function renderOverlay() {
+    key: '_renderOverlay',
+    value: function _renderOverlay() {
       var _this2 = this;
 
       var linkStyle = (0, _extends3.default)({}, this.stylesheet.link.base, this.stylesheet.link.topRight);
@@ -159,15 +138,23 @@ var Story = function (_React$Component) {
         infoStyle.display = 'none';
       }
 
+      var openOverlay = function openOverlay() {
+        _this2.setState({ open: true });
+        return false;
+      };
+
+      var closeOverlay = function closeOverlay() {
+        _this2.setState({ open: false });
+        return false;
+      };
+
       return _react2.default.createElement(
         'div',
         null,
         this.props.children,
         _react2.default.createElement(
           'a',
-          { style: linkStyle, onClick: function onClick() {
-              return _this2.openInfo();
-            } },
+          { style: linkStyle, onClick: openOverlay },
           '?'
         ),
         _react2.default.createElement(
@@ -175,9 +162,7 @@ var Story = function (_React$Component) {
           { style: infoStyle },
           _react2.default.createElement(
             'a',
-            { style: linkStyle, onClick: function onClick() {
-                return _this2.closeInfo();
-              } },
+            { style: linkStyle, onClick: closeOverlay },
             '×'
           ),
           _react2.default.createElement(
@@ -265,111 +250,22 @@ var Story = function (_React$Component) {
     key: '_getPropTables',
     value: function _getPropTables() {
       if (!this.props.propTables) {
-        return '';
-      }
-      var tables = this.props.propTables.map(this._getPropTable.bind(this));
-      return _react2.default.createElement(
-        'div',
-        null,
-        tables
-      );
-    }
-  }, {
-    key: '_getPropTable',
-    value: function _getPropTable(Comp) {
-      if (!Comp) {
-        return '';
-      }
-
-      var rows = [];
-      for (var property in Comp.propTypes) {
-        if (!Comp.propTypes.hasOwnProperty(property)) {
-          continue;
-        }
-        var _type = Comp.propTypes[property];
-        var propType = PropTypesMap.get(_type) || '-';
-        var required = _type.isRequired === undefined ? 'yes' : 'no';
-        var defaults = this._getDefaultProp(property);
-        rows.push({ property: property, propType: propType, required: required, defaults: defaults });
+        return null;
       }
 
-      return _react2.default.createElement(
-        'main',
-        null,
-        _react2.default.createElement(
-          'h3',
-          null,
-          Comp.displayName || Comp.name,
-          ' PropTypes'
-        ),
-        _react2.default.createElement(
-          'table',
+      return this.props.propTables.map(function (comp) {
+        return _react2.default.createElement(
+          'div',
           null,
           _react2.default.createElement(
-            'thead',
+            'h3',
             null,
-            _react2.default.createElement(
-              'tr',
-              null,
-              _react2.default.createElement(
-                'th',
-                null,
-                'property'
-              ),
-              _react2.default.createElement(
-                'th',
-                null,
-                'propType'
-              ),
-              _react2.default.createElement(
-                'th',
-                null,
-                'required'
-              ),
-              _react2.default.createElement(
-                'th',
-                null,
-                'defaults'
-              )
-            )
+            comp.displayName || comp.name,
+            ' PropTypes'
           ),
-          _react2.default.createElement(
-            'tbody',
-            null,
-            rows.map(function (row) {
-              return _react2.default.createElement(
-                'tr',
-                null,
-                _react2.default.createElement(
-                  'td',
-                  null,
-                  row.property
-                ),
-                _react2.default.createElement(
-                  'td',
-                  null,
-                  row.propType
-                ),
-                _react2.default.createElement(
-                  'td',
-                  null,
-                  row.required
-                ),
-                _react2.default.createElement(
-                  'td',
-                  null,
-                  row.defaults
-                )
-              );
-            })
-          )
-        )
-      );
-    }
-  }, {
-    key: '_getDefaultProp',
-    value: function _getDefaultProp(property) {
-      return '-';
+          _react2.default.createElement(_PropTable2.default, { comp: comp })
+        );
+      });
     }
   }]);
   return Story;
diff --git a/src/components/PropTable.js b/src/components/PropTable.js
new file mode 100644
index 000000000000..ce415185a479
--- /dev/null
+++ b/src/components/PropTable.js
@@ -0,0 +1,60 @@
+import React from 'react';
+
+const PropTypesMap = new Map();
+for (let typeName in React.PropTypes) {
+  if (!React.PropTypes.hasOwnProperty(typeName)) {
+    continue
+  }
+  const type = React.PropTypes[typeName];
+  PropTypesMap.set(type, typeName);
+}
+
+export default class PropTable extends React.Component {
+  static displayName = 'PropTable';
+  static propTypes = {
+    comp: React.PropTypes.func
+  };
+
+  render () {
+    const comp = this.props.comp;
+
+    if (!comp) {
+      return null;
+    }
+
+    const props = [];
+    for (let property in comp.propTypes) {
+      if (!comp.propTypes.hasOwnProperty(property)) {
+        continue
+      }
+      const type = comp.propTypes[property];
+      const propType = PropTypesMap.get(type) || 'other';
+      const required = type.isRequired === undefined ? 'yes' : 'no';
+      const defaults = '-';
+      props.push({property, propType, required, defaults});
+    }
+
+    return (
+      <table>
+        <thead>
+          <tr>
+            <th>property</th>
+            <th>propType</th>
+            <th>required</th>
+            <th>defaults</th>
+          </tr>
+        </thead>
+        <tbody>
+          {props.map(row => (
+            <tr>
+              <td>{row.property}</td>
+              <td>{row.propType}</td>
+              <td>{row.required}</td>
+              <td>{row.defaults}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    );
+  }
+}
diff --git a/src/components/Story.js b/src/components/Story.js
index 8955980f99e9..323871772051 100644
--- a/src/components/Story.js
+++ b/src/components/Story.js
@@ -1,15 +1,7 @@
 import React from 'react';
 import Remarkable from 'react-remarkable';
-import Node from './Node.js'
-
-const PropTypesMap = new Map();
-for (let typeName in React.PropTypes) {
-  if (!React.PropTypes.hasOwnProperty(typeName)) {
-    continue
-  }
-  const type = React.PropTypes[typeName];
-  PropTypesMap.set(type, typeName);
-}
+import PropTable from './PropTable';
+import Node from './Node.js';
 
 export default class Story extends React.Component {
   static displayName = 'Story';
@@ -63,24 +55,14 @@ export default class Story extends React.Component {
     this.state = {open: false};
   }
 
-  openInfo() {
-    this.setState({open: true});
-    return false;
-  }
-
-  closeInfo() {
-    this.setState({open: false});
-    return false;
-  }
-
   render() {
     if (this.props.showInline) {
-      return this.renderInline();
+      return this._renderInline();
     }
-    return this.renderOverlay();
+    return this._renderOverlay();
   }
 
-  renderInline() {
+  _renderInline() {
     return (
       <div>
         { this.props.children }
@@ -95,7 +77,7 @@ export default class Story extends React.Component {
     );
   }
 
-  renderOverlay() {
+  _renderOverlay() {
     const linkStyle = {
       ...this.stylesheet.link.base,
       ...this.stylesheet.link.topRight,
@@ -105,12 +87,22 @@ export default class Story extends React.Component {
       infoStyle.display = 'none';
     }
 
+    const openOverlay = () => {
+      this.setState({open: true});
+      return false;
+    }
+
+    const closeOverlay = () => {
+      this.setState({open: false});
+      return false;
+    }
+
     return (
       <div>
         { this.props.children }
-        <a style={linkStyle} onClick={() => this.openInfo()}>?</a>
+        <a style={linkStyle} onClick={openOverlay}>?</a>
         <div style={infoStyle}>
-          <a style={linkStyle} onClick={() => this.closeInfo()}>×</a>
+          <a style={linkStyle} onClick={closeOverlay}>×</a>
           <div className='storybook-story-info-page'>
             <div className='storybook-story-info-body'>
               { this._getInfoHeader() }
@@ -173,57 +165,14 @@ export default class Story extends React.Component {
 
   _getPropTables() {
     if (!this.props.propTables) {
-      return '';
-    }
-    const tables = this.props.propTables.map(this._getPropTable.bind(this));
-    return <div>{tables}</div>;
-  }
-
-  _getPropTable(Comp) {
-    if (!Comp) {
-      return '';
-    }
-
-    const rows = [];
-    for (let property in Comp.propTypes) {
-      if (!Comp.propTypes.hasOwnProperty(property)) {
-        continue
-      }
-      const type = Comp.propTypes[property];
-      const propType = PropTypesMap.get(type) || '-';
-      const required = type.isRequired === undefined ? 'yes' : 'no';
-      const defaults = this._getDefaultProp(property);
-      rows.push({property, propType, required, defaults});
+      return null;
     }
 
-    return (
-      <main>
-        <h3>{Comp.displayName || Comp.name} PropTypes</h3>
-        <table>
-          <thead>
-            <tr>
-              <th>property</th>
-              <th>propType</th>
-              <th>required</th>
-              <th>defaults</th>
-            </tr>
-          </thead>
-          <tbody>
-            {rows.map(row => (
-              <tr>
-                <td>{row.property}</td>
-                <td>{row.propType}</td>
-                <td>{row.required}</td>
-                <td>{row.defaults}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </main>
-    );
-  }
-
-  _getDefaultProp(property) {
-    return '-';
+    return this.props.propTables.map(comp => (
+      <div>
+        <h3>{comp.displayName || comp.name} PropTypes</h3>
+        <PropTable comp={comp} />
+      </div>
+    ));
   }
 }