sample about page

.gitignore

@@ -1,2 +1,3 @@
 node_modules
-.clasp*
+.clasp*
+creds.json

dist/about.html

@@ -50,27 +50,10 @@
         return __webpack_require__.d(getter, "a", getter), getter;
     }, __webpack_require__.o = function(object, property) {
         return Object.prototype.hasOwnProperty.call(object, property);
-    }, __webpack_require__.p = "", __webpack_require__(__webpack_require__.s = 31);
+    }, __webpack_require__.p = "", __webpack_require__(__webpack_require__.s = 8);
 }([ function(module, exports, __webpack_require__) {
     "use strict";
-    module.exports = __webpack_require__(9);
+    module.exports = __webpack_require__(3);
-}, function(module, exports, __webpack_require__) {
-    module.exports = __webpack_require__(15)();
-}, function(module, exports) {
-    module.exports = function(obj) {
-        return obj && obj.__esModule ? obj : {
-            "default": obj
-        };
-    };
-}, function(module, exports, __webpack_require__) {
-    "use strict";
-    !function checkDCE() {
-        if ("undefined" != typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" == typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE) try {
-            __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(checkDCE);
-        } catch (err) {
-            console.error(err);
-        }
-    }(), module.exports = __webpack_require__(10);
 }, function(module, exports, __webpack_require__) {
     "use strict";
     var getOwnPropertySymbols = Object.getOwnPropertySymbols, hasOwnProperty = Object.prototype.hasOwnProperty, propIsEnumerable = Object.prototype.propertyIsEnumerable;
@@ -105,56 +88,16 @@
     };
 }, function(module, exports, __webpack_require__) {
     "use strict";
-    exports.__esModule = !0, exports["default"] = void 0;
+    !function checkDCE() {
-    var _default = !("undefined" == typeof window || !window.document || !window.document.createElement);
+        if ("undefined" != typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" == typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE) try {
-    exports["default"] = _default, module.exports = exports["default"];
+            __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(checkDCE);
+        } catch (err) {
+            console.error(err);
+        }
+    }(), module.exports = __webpack_require__(4);
 }, function(module, exports, __webpack_require__) {
     "use strict";
-    exports.__esModule = !0, exports.nameShape = undefined, exports.transitionTimeout = function(transitionType) {
+    var k = __webpack_require__(1), n = "function" == typeof Symbol && Symbol["for"], p = n ? Symbol["for"]("react.element") : 60103, q = n ? Symbol["for"]("react.portal") : 60106, r = n ? Symbol["for"]("react.fragment") : 60107, t = n ? Symbol["for"]("react.strict_mode") : 60108, u = n ? Symbol["for"]("react.profiler") : 60114, v = n ? Symbol["for"]("react.provider") : 60109, w = n ? Symbol["for"]("react.context") : 60110, x = n ? Symbol["for"]("react.concurrent_mode") : 60111, y = n ? Symbol["for"]("react.forward_ref") : 60112, z = n ? Symbol["for"]("react.suspense") : 60113, aa = n ? Symbol["for"]("react.memo") : 60115, ba = n ? Symbol["for"]("react.lazy") : 60116, A = "function" == typeof Symbol && Symbol.iterator;
-        var timeoutPropName = "transition" + transitionType + "Timeout", enabledPropName = "transition" + transitionType;
-        return function(props) {
-            if (props[enabledPropName]) {
-                if (null == props[timeoutPropName]) return new Error(timeoutPropName + " wasn't supplied to CSSTransitionGroup: this can cause unreliable animations and won't be supported in a future version of React. See https://fb.me/react-animation-transition-group-timeout for more information.");
-                if ("number" != typeof props[timeoutPropName]) return new Error(timeoutPropName + " must be a number (in milliseconds)");
-            }
-            return null;
-        };
-    };
-    _interopRequireDefault(__webpack_require__(0));
-    var _propTypes2 = _interopRequireDefault(__webpack_require__(1));
-    function _interopRequireDefault(obj) {
-        return obj && obj.__esModule ? obj : {
-            "default": obj
-        };
-    }
-    exports.nameShape = _propTypes2["default"].oneOfType([ _propTypes2["default"].string, _propTypes2["default"].shape({
-        enter: _propTypes2["default"].string,
-        leave: _propTypes2["default"].string,
-        active: _propTypes2["default"].string
-    }), _propTypes2["default"].shape({
-        enter: _propTypes2["default"].string,
-        enterActive: _propTypes2["default"].string,
-        leave: _propTypes2["default"].string,
-        leaveActive: _propTypes2["default"].string,
-        appear: _propTypes2["default"].string,
-        appearActive: _propTypes2["default"].string
-    }) ]);
-}, function(module, exports, __webpack_require__) {
-    var content = __webpack_require__(27);
-    "string" == typeof content && (content = [ [ module.i, content, "" ] ]);
-    var options = {
-        hmr: !0,
-        transform: void 0
-    };
-    options.insertInto = undefined;
-    __webpack_require__(29)(content, options);
-    content.locals && (module.exports = content.locals);
-}, function(module, exports, __webpack_require__) {
-    "use strict";
-    module.exports = __webpack_require__(14);
-}, function(module, exports, __webpack_require__) {
-    "use strict";
-    var k = __webpack_require__(4), n = "function" == typeof Symbol && Symbol["for"], p = n ? Symbol["for"]("react.element") : 60103, q = n ? Symbol["for"]("react.portal") : 60106, r = n ? Symbol["for"]("react.fragment") : 60107, t = n ? Symbol["for"]("react.strict_mode") : 60108, u = n ? Symbol["for"]("react.profiler") : 60114, v = n ? Symbol["for"]("react.provider") : 60109, w = n ? Symbol["for"]("react.context") : 60110, x = n ? Symbol["for"]("react.concurrent_mode") : 60111, y = n ? Symbol["for"]("react.forward_ref") : 60112, z = n ? Symbol["for"]("react.suspense") : 60113, aa = n ? Symbol["for"]("react.memo") : 60115, ba = n ? Symbol["for"]("react.lazy") : 60116, A = "function" == typeof Symbol && Symbol.iterator;
     function B(a) {
         for (var b = arguments.length - 1, d = "https://reactjs.org/docs/error-decoder.html?invariant=" + a, c = 0; c < b; c++) d += "&args[]=" + encodeURIComponent(arguments[c + 1]);
         !function(a, b, d, c, e, g, h, f) {
@@ -448,7 +391,7 @@
     module.exports = Z["default"] || Z;
 }, function(module, exports, __webpack_require__) {
     "use strict";
-    var aa = __webpack_require__(0), n = __webpack_require__(4), r = __webpack_require__(11);
+    var aa = __webpack_require__(0), n = __webpack_require__(1), r = __webpack_require__(5);
     function x(a) {
         for (var b = arguments.length - 1, c = "https://reactjs.org/docs/error-decoder.html?invariant=" + a, d = 0; d < b; d++) c += "&args[]=" + encodeURIComponent(arguments[d + 1]);
         !function(a, b, c, d, e, f, g, h) {
@@ -4850,7 +4793,7 @@
     module.exports = Xi["default"] || Xi;
 }, function(module, exports, __webpack_require__) {
     "use strict";
-    module.exports = __webpack_require__(12);
+    module.exports = __webpack_require__(6);
 }, function(module, exports, __webpack_require__) {
     "use strict";
     (function(global) {
@@ -5114,7 +5057,7 @@
         }, exports.unstable_pauseExecution = function() {}, exports.unstable_getFirstCallbackNode = function() {
             return d;
         };
-    }).call(this, __webpack_require__(13));
+    }).call(this, __webpack_require__(7));
 }, function(module, exports) {
     var g;
     g = function() {
@@ -5126,755 +5069,10 @@
         "object" == typeof window && (g = window);
     }
     module.exports = g;
-}, function(module, exports, __webpack_require__) {
-    "use strict";
-    exports.__esModule = !0;
-    var _extends = Object.assign || function(target) {
-        for (var i = 1; i < arguments.length; i++) {
-            var source = arguments[i];
-            for (var key in source) Object.prototype.hasOwnProperty.call(source, key) && (target[key] = source[key]);
-        }
-        return target;
-    }, _react2 = _interopRequireDefault(__webpack_require__(0)), _propTypes2 = _interopRequireDefault(__webpack_require__(1)), _TransitionGroup2 = _interopRequireDefault(__webpack_require__(17)), _CSSTransitionGroupChild2 = _interopRequireDefault(__webpack_require__(21)), _PropTypes = __webpack_require__(6);
-    function _interopRequireDefault(obj) {
-        return obj && obj.__esModule ? obj : {
-            "default": obj
-        };
-    }
-    function _possibleConstructorReturn(self, call) {
-        if (!self) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-        return !call || "object" != typeof call && "function" != typeof call ? self : call;
-    }
-    _PropTypes.nameShape.isRequired, _propTypes2["default"].bool, _propTypes2["default"].bool, 
-    _propTypes2["default"].bool, (0, _PropTypes.transitionTimeout)("Appear"), (0, _PropTypes.transitionTimeout)("Enter"), 
-    (0, _PropTypes.transitionTimeout)("Leave");
-    var CSSTransitionGroup = function(_React$Component) {
-        function CSSTransitionGroup() {
-            var _temp, _this;
-            !function(instance, Constructor) {
-                if (!(instance instanceof Constructor)) throw new TypeError("Cannot call a class as a function");
-            }(this, CSSTransitionGroup);
-            for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
-            return _temp = _this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [ this ].concat(args))), 
-            _this._wrapChild = function(child) {
-                return _react2["default"].createElement(_CSSTransitionGroupChild2["default"], {
-                    name: _this.props.transitionName,
-                    appear: _this.props.transitionAppear,
-                    enter: _this.props.transitionEnter,
-                    leave: _this.props.transitionLeave,
-                    appearTimeout: _this.props.transitionAppearTimeout,
-                    enterTimeout: _this.props.transitionEnterTimeout,
-                    leaveTimeout: _this.props.transitionLeaveTimeout
-                }, child);
-            }, _possibleConstructorReturn(_this, _temp);
-        }
-        return function(subClass, superClass) {
-            if ("function" != typeof superClass && null !== superClass) 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: !1,
-                    writable: !0,
-                    configurable: !0
-                }
-            }), superClass && (Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass);
-        }(CSSTransitionGroup, _React$Component), CSSTransitionGroup.prototype.render = function() {
-            return _react2["default"].createElement(_TransitionGroup2["default"], _extends({}, this.props, {
-                childFactory: this._wrapChild
-            }));
-        }, CSSTransitionGroup;
-    }(_react2["default"].Component);
-    CSSTransitionGroup.displayName = "CSSTransitionGroup", CSSTransitionGroup.propTypes = {}, 
-    CSSTransitionGroup.defaultProps = {
-        transitionAppear: !1,
-        transitionEnter: !0,
-        transitionLeave: !0
-    }, exports["default"] = CSSTransitionGroup, module.exports = exports["default"];
-}, function(module, exports, __webpack_require__) {
-    "use strict";
-    var ReactPropTypesSecret = __webpack_require__(16);
-    function emptyFunction() {}
-    function emptyFunctionWithReset() {}
-    emptyFunctionWithReset.resetWarningCache = emptyFunction, module.exports = function() {
-        function shim(props, propName, componentName, location, propFullName, secret) {
-            if (secret !== ReactPropTypesSecret) {
-                var err = new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");
-                throw err.name = "Invariant Violation", err;
-            }
-        }
-        function getShim() {
-            return shim;
-        }
-        shim.isRequired = shim;
-        var ReactPropTypes = {
-            array: shim,
-            bool: shim,
-            func: shim,
-            number: shim,
-            object: shim,
-            string: shim,
-            symbol: shim,
-            any: shim,
-            arrayOf: getShim,
-            element: shim,
-            elementType: shim,
-            instanceOf: getShim,
-            node: shim,
-            objectOf: getShim,
-            oneOf: getShim,
-            oneOfType: getShim,
-            shape: getShim,
-            exact: getShim,
-            checkPropTypes: emptyFunctionWithReset,
-            resetWarningCache: emptyFunction
-        };
-        return ReactPropTypes.PropTypes = ReactPropTypes, ReactPropTypes;
-    };
-}, function(module, exports, __webpack_require__) {
-    "use strict";
-    module.exports = "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";
-}, function(module, exports, __webpack_require__) {
-    "use strict";
-    exports.__esModule = !0;
-    var _extends = Object.assign || function(target) {
-        for (var i = 1; i < arguments.length; i++) {
-            var source = arguments[i];
-            for (var key in source) Object.prototype.hasOwnProperty.call(source, key) && (target[key] = source[key]);
-        }
-        return target;
-    }, _chainFunction2 = _interopRequireDefault(__webpack_require__(18)), _react2 = _interopRequireDefault(__webpack_require__(0)), _propTypes2 = _interopRequireDefault(__webpack_require__(1)), _ChildMapping = (_interopRequireDefault(__webpack_require__(19)), 
-    __webpack_require__(20));
-    function _interopRequireDefault(obj) {
-        return obj && obj.__esModule ? obj : {
-            "default": obj
-        };
-    }
-    _propTypes2["default"].any, _propTypes2["default"].func, _propTypes2["default"].node;
-    var TransitionGroup = function(_React$Component) {
-        function TransitionGroup(props, context) {
-            !function(instance, Constructor) {
-                if (!(instance instanceof Constructor)) throw new TypeError("Cannot call a class as a function");
-            }(this, TransitionGroup);
-            var _this = function(self, call) {
-                if (!self) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-                return !call || "object" != typeof call && "function" != typeof call ? self : call;
-            }(this, _React$Component.call(this, props, context));
-            return _this.performAppear = function(key, component) {
-                _this.currentlyTransitioningKeys[key] = !0, component.componentWillAppear ? component.componentWillAppear(_this._handleDoneAppearing.bind(_this, key, component)) : _this._handleDoneAppearing(key, component);
-            }, _this._handleDoneAppearing = function(key, component) {
-                component.componentDidAppear && component.componentDidAppear(), delete _this.currentlyTransitioningKeys[key];
-                var currentChildMapping = (0, _ChildMapping.getChildMapping)(_this.props.children);
-                currentChildMapping && currentChildMapping.hasOwnProperty(key) || _this.performLeave(key, component);
-            }, _this.performEnter = function(key, component) {
-                _this.currentlyTransitioningKeys[key] = !0, component.componentWillEnter ? component.componentWillEnter(_this._handleDoneEntering.bind(_this, key, component)) : _this._handleDoneEntering(key, component);
-            }, _this._handleDoneEntering = function(key, component) {
-                component.componentDidEnter && component.componentDidEnter(), delete _this.currentlyTransitioningKeys[key];
-                var currentChildMapping = (0, _ChildMapping.getChildMapping)(_this.props.children);
-                currentChildMapping && currentChildMapping.hasOwnProperty(key) || _this.performLeave(key, component);
-            }, _this.performLeave = function(key, component) {
-                _this.currentlyTransitioningKeys[key] = !0, component.componentWillLeave ? component.componentWillLeave(_this._handleDoneLeaving.bind(_this, key, component)) : _this._handleDoneLeaving(key, component);
-            }, _this._handleDoneLeaving = function(key, component) {
-                component.componentDidLeave && component.componentDidLeave(), delete _this.currentlyTransitioningKeys[key];
-                var currentChildMapping = (0, _ChildMapping.getChildMapping)(_this.props.children);
-                currentChildMapping && currentChildMapping.hasOwnProperty(key) ? _this.keysToEnter.push(key) : _this.setState(function(state) {
-                    var newChildren = _extends({}, state.children);
-                    return delete newChildren[key], {
-                        children: newChildren
-                    };
-                });
-            }, _this.childRefs = Object.create(null), _this.state = {
-                children: (0, _ChildMapping.getChildMapping)(props.children)
-            }, _this;
-        }
-        return function(subClass, superClass) {
-            if ("function" != typeof superClass && null !== superClass) 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: !1,
-                    writable: !0,
-                    configurable: !0
-                }
-            }), superClass && (Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass);
-        }(TransitionGroup, _React$Component), TransitionGroup.prototype.componentWillMount = function() {
-            this.currentlyTransitioningKeys = {}, this.keysToEnter = [], this.keysToLeave = [];
-        }, TransitionGroup.prototype.componentDidMount = function() {
-            var initialChildMapping = this.state.children;
-            for (var key in initialChildMapping) initialChildMapping[key] && this.performAppear(key, this.childRefs[key]);
-        }, TransitionGroup.prototype.componentWillReceiveProps = function(nextProps) {
-            var nextChildMapping = (0, _ChildMapping.getChildMapping)(nextProps.children), prevChildMapping = this.state.children;
-            for (var key in this.setState({
-                children: (0, _ChildMapping.mergeChildMappings)(prevChildMapping, nextChildMapping)
-            }), nextChildMapping) {
-                var hasPrev = prevChildMapping && prevChildMapping.hasOwnProperty(key);
-                !nextChildMapping[key] || hasPrev || this.currentlyTransitioningKeys[key] || this.keysToEnter.push(key);
-            }
-            for (var _key in prevChildMapping) {
-                var hasNext = nextChildMapping && nextChildMapping.hasOwnProperty(_key);
-                !prevChildMapping[_key] || hasNext || this.currentlyTransitioningKeys[_key] || this.keysToLeave.push(_key);
-            }
-        }, TransitionGroup.prototype.componentDidUpdate = function() {
-            var _this2 = this, keysToEnter = this.keysToEnter;
-            this.keysToEnter = [], keysToEnter.forEach(function(key) {
-                return _this2.performEnter(key, _this2.childRefs[key]);
-            });
-            var keysToLeave = this.keysToLeave;
-            this.keysToLeave = [], keysToLeave.forEach(function(key) {
-                return _this2.performLeave(key, _this2.childRefs[key]);
-            });
-        }, TransitionGroup.prototype.render = function() {
-            var _this3 = this, childrenToRender = [], _loop = function(key) {
-                var child = _this3.state.children[key];
-                if (child) {
-                    var isCallbackRef = "string" != typeof child.ref, factoryChild = _this3.props.childFactory(child), ref = function(r) {
-                        _this3.childRefs[key] = r;
-                    };
-                    factoryChild === child && isCallbackRef && (ref = (0, _chainFunction2["default"])(child.ref, ref)), 
-                    childrenToRender.push(_react2["default"].cloneElement(factoryChild, {
-                        key: key,
-                        ref: ref
-                    }));
-                }
-            };
-            for (var key in this.state.children) _loop(key);
-            var props = _extends({}, this.props);
-            return delete props.transitionLeave, delete props.transitionName, delete props.transitionAppear, 
-            delete props.transitionEnter, delete props.childFactory, delete props.transitionLeaveTimeout, 
-            delete props.transitionEnterTimeout, delete props.transitionAppearTimeout, delete props.component, 
-            _react2["default"].createElement(this.props.component, props, childrenToRender);
-        }, TransitionGroup;
-    }(_react2["default"].Component);
-    TransitionGroup.displayName = "TransitionGroup", TransitionGroup.propTypes = {}, 
-    TransitionGroup.defaultProps = {
-        component: "span",
-        childFactory: function(child) {
-            return child;
-        }
-    }, exports["default"] = TransitionGroup, module.exports = exports["default"];
-}, function(module, exports) {
-    module.exports = function() {
-        for (var len = arguments.length, args = [], i = 0; i < len; i++) args[i] = arguments[i];
-        return 0 === (args = args.filter(function(fn) {
-            return null != fn;
-        })).length ? undefined : 1 === args.length ? args[0] : args.reduce(function(current, next) {
-            return function() {
-                current.apply(this, arguments), next.apply(this, arguments);
-            };
-        });
-    };
-}, function(module, exports, __webpack_require__) {
-    "use strict";
-    module.exports = function() {};
-}, function(module, exports, __webpack_require__) {
-    "use strict";
-    exports.__esModule = !0, exports.getChildMapping = function(children) {
-        if (!children) return children;
-        var result = {};
-        return _react.Children.map(children, function(child) {
-            return child;
-        }).forEach(function(child) {
-            result[child.key] = child;
-        }), result;
-    }, exports.mergeChildMappings = function(prev, next) {
-        function getValueForKey(key) {
-            return next.hasOwnProperty(key) ? next[key] : prev[key];
-        }
-        prev = prev || {}, next = next || {};
-        var nextKeysPending = {}, pendingKeys = [];
-        for (var prevKey in prev) next.hasOwnProperty(prevKey) ? pendingKeys.length && (nextKeysPending[prevKey] = pendingKeys, 
-        pendingKeys = []) : pendingKeys.push(prevKey);
-        var i = void 0, childMapping = {};
-        for (var nextKey in next) {
-            if (nextKeysPending.hasOwnProperty(nextKey)) for (i = 0; i < nextKeysPending[nextKey].length; i++) {
-                var pendingNextKey = nextKeysPending[nextKey][i];
-                childMapping[nextKeysPending[nextKey][i]] = getValueForKey(pendingNextKey);
-            }
-            childMapping[nextKey] = getValueForKey(nextKey);
-        }
-        for (i = 0; i < pendingKeys.length; i++) childMapping[pendingKeys[i]] = getValueForKey(pendingKeys[i]);
-        return childMapping;
-    };
-    var _react = __webpack_require__(0);
-}, function(module, exports, __webpack_require__) {
-    "use strict";
-    exports.__esModule = !0;
-    var _extends = Object.assign || function(target) {
-        for (var i = 1; i < arguments.length; i++) {
-            var source = arguments[i];
-            for (var key in source) Object.prototype.hasOwnProperty.call(source, key) && (target[key] = source[key]);
-        }
-        return target;
-    }, _addClass2 = _interopRequireDefault(__webpack_require__(22)), _removeClass2 = _interopRequireDefault(__webpack_require__(24)), _requestAnimationFrame2 = _interopRequireDefault(__webpack_require__(25)), _properties = __webpack_require__(26), _react2 = _interopRequireDefault(__webpack_require__(0)), _propTypes2 = _interopRequireDefault(__webpack_require__(1)), _reactDom = __webpack_require__(3), _PropTypes = __webpack_require__(6);
-    function _interopRequireDefault(obj) {
-        return obj && obj.__esModule ? obj : {
-            "default": obj
-        };
-    }
-    function _possibleConstructorReturn(self, call) {
-        if (!self) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-        return !call || "object" != typeof call && "function" != typeof call ? self : call;
-    }
-    var events = [];
-    _properties.transitionEnd && events.push(_properties.transitionEnd), _properties.animationEnd && events.push(_properties.animationEnd);
-    _propTypes2["default"].node, _PropTypes.nameShape.isRequired, _propTypes2["default"].bool, 
-    _propTypes2["default"].bool, _propTypes2["default"].bool, _propTypes2["default"].number, 
-    _propTypes2["default"].number, _propTypes2["default"].number;
-    var CSSTransitionGroupChild = function(_React$Component) {
-        function CSSTransitionGroupChild() {
-            var _temp, _this;
-            !function(instance, Constructor) {
-                if (!(instance instanceof Constructor)) throw new TypeError("Cannot call a class as a function");
-            }(this, CSSTransitionGroupChild);
-            for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
-            return _temp = _this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [ this ].concat(args))), 
-            _this.componentWillAppear = function(done) {
-                _this.props.appear ? _this.transition("appear", done, _this.props.appearTimeout) : done();
-            }, _this.componentWillEnter = function(done) {
-                _this.props.enter ? _this.transition("enter", done, _this.props.enterTimeout) : done();
-            }, _this.componentWillLeave = function(done) {
-                _this.props.leave ? _this.transition("leave", done, _this.props.leaveTimeout) : done();
-            }, _possibleConstructorReturn(_this, _temp);
-        }
-        return function(subClass, superClass) {
-            if ("function" != typeof superClass && null !== superClass) 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: !1,
-                    writable: !0,
-                    configurable: !0
-                }
-            }), superClass && (Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass);
-        }(CSSTransitionGroupChild, _React$Component), CSSTransitionGroupChild.prototype.componentWillMount = function() {
-            this.classNameAndNodeQueue = [], this.transitionTimeouts = [];
-        }, CSSTransitionGroupChild.prototype.componentWillUnmount = function() {
-            this.unmounted = !0, this.timeout && clearTimeout(this.timeout), this.transitionTimeouts.forEach(function(timeout) {
-                clearTimeout(timeout);
-            }), this.classNameAndNodeQueue.length = 0;
-        }, CSSTransitionGroupChild.prototype.transition = function(animationType, finishCallback, timeout) {
-            var node = (0, _reactDom.findDOMNode)(this);
-            if (node) {
-                var className = this.props.name[animationType] || this.props.name + "-" + animationType, activeClassName = this.props.name[animationType + "Active"] || className + "-active", timer = null, removeListeners = void 0;
-                (0, _addClass2["default"])(node, className), this.queueClassAndNode(activeClassName, node);
-                var finish = function(e) {
-                    e && e.target !== node || (clearTimeout(timer), removeListeners && removeListeners(), 
-                    (0, _removeClass2["default"])(node, className), (0, _removeClass2["default"])(node, activeClassName), 
-                    removeListeners && removeListeners(), finishCallback && finishCallback());
-                };
-                timeout ? (timer = setTimeout(finish, timeout), this.transitionTimeouts.push(timer)) : _properties.transitionEnd && (removeListeners = function(node, listener) {
-                    return events.length ? events.forEach(function(e) {
-                        return node.addEventListener(e, listener, !1);
-                    }) : setTimeout(listener, 0), function() {
-                        events.length && events.forEach(function(e) {
-                            return node.removeEventListener(e, listener, !1);
-                        });
-                    };
-                }(node, finish));
-            } else finishCallback && finishCallback();
-        }, CSSTransitionGroupChild.prototype.queueClassAndNode = function(className, node) {
-            var _this2 = this;
-            this.classNameAndNodeQueue.push({
-                className: className,
-                node: node
-            }), this.rafHandle || (this.rafHandle = (0, _requestAnimationFrame2["default"])(function() {
-                return _this2.flushClassNameAndNodeQueue();
-            }));
-        }, CSSTransitionGroupChild.prototype.flushClassNameAndNodeQueue = function() {
-            this.unmounted || this.classNameAndNodeQueue.forEach(function(obj) {
-                obj.node.scrollTop, (0, _addClass2["default"])(obj.node, obj.className);
-            }), this.classNameAndNodeQueue.length = 0, this.rafHandle = null;
-        }, CSSTransitionGroupChild.prototype.render = function() {
-            var props = _extends({}, this.props);
-            return delete props.name, delete props.appear, delete props.enter, delete props.leave, 
-            delete props.appearTimeout, delete props.enterTimeout, delete props.leaveTimeout, 
-            delete props.children, _react2["default"].cloneElement(_react2["default"].Children.only(this.props.children), props);
-        }, CSSTransitionGroupChild;
-    }(_react2["default"].Component);
-    CSSTransitionGroupChild.displayName = "CSSTransitionGroupChild", CSSTransitionGroupChild.propTypes = {}, 
-    exports["default"] = CSSTransitionGroupChild, module.exports = exports["default"];
-}, function(module, exports, __webpack_require__) {
-    "use strict";
-    var _interopRequireDefault = __webpack_require__(2);
-    exports.__esModule = !0, exports["default"] = function(element, className) {
-        element.classList ? element.classList.add(className) : (0, _hasClass["default"])(element, className) || ("string" == typeof element.className ? element.className = element.className + " " + className : element.setAttribute("class", (element.className && element.className.baseVal || "") + " " + className));
-    };
-    var _hasClass = _interopRequireDefault(__webpack_require__(23));
-    module.exports = exports["default"];
-}, function(module, exports, __webpack_require__) {
-    "use strict";
-    exports.__esModule = !0, exports["default"] = function(element, className) {
-        return element.classList ? !!className && element.classList.contains(className) : -1 !== (" " + (element.className.baseVal || element.className) + " ").indexOf(" " + className + " ");
-    }, module.exports = exports["default"];
-}, function(module, exports, __webpack_require__) {
-    "use strict";
-    function replaceClassName(origClass, classToRemove) {
-        return origClass.replace(new RegExp("(^|\\s)" + classToRemove + "(?:\\s|$)", "g"), "$1").replace(/\s+/g, " ").replace(/^\s*|\s*$/g, "");
-    }
-    module.exports = function(element, className) {
-        element.classList ? element.classList.remove(className) : "string" == typeof element.className ? element.className = replaceClassName(element.className, className) : element.setAttribute("class", replaceClassName(element.className && element.className.baseVal || "", className));
-    };
-}, function(module, exports, __webpack_require__) {
-    "use strict";
-    var _interopRequireDefault = __webpack_require__(2);
-    exports.__esModule = !0, exports["default"] = void 0;
-    var compatRaf, cancel = "clearTimeout", raf = function(fn) {
-        var curr = new Date().getTime(), ms = Math.max(0, 16 - (curr - prev)), req = setTimeout(fn, ms);
-        return prev = curr, req;
-    }, getKey = function(vendor, k) {
-        return vendor + (vendor ? k[0].toUpperCase() + k.substr(1) : k) + "AnimationFrame";
-    };
-    _interopRequireDefault(__webpack_require__(5))["default"] && [ "", "webkit", "moz", "o", "ms" ].some(function(vendor) {
-        var rafKey = getKey(vendor, "request");
-        if (rafKey in window) return cancel = getKey(vendor, "cancel"), raf = function(cb) {
-            return window[rafKey](cb);
-        };
-    });
-    var prev = new Date().getTime();
-    (compatRaf = function(cb) {
-        return raf(cb);
-    }).cancel = function(id) {
-        window[cancel] && "function" == typeof window[cancel] && window[cancel](id);
-    };
-    var _default = compatRaf;
-    exports["default"] = _default, module.exports = exports["default"];
-}, function(module, exports, __webpack_require__) {
-    "use strict";
-    var _interopRequireDefault = __webpack_require__(2);
-    exports.__esModule = !0, exports["default"] = exports.animationEnd = exports.animationDelay = exports.animationTiming = exports.animationDuration = exports.animationName = exports.transitionEnd = exports.transitionDuration = exports.transitionDelay = exports.transitionTiming = exports.transitionProperty = exports.transform = void 0;
-    var prefix, transitionEnd, animationEnd, transitionProperty, transitionDuration, transitionTiming, transitionDelay, animationName, animationDuration, animationTiming, animationDelay, _inDOM = _interopRequireDefault(__webpack_require__(5)), transform = "transform";
-    if (exports.transform = transform, exports.animationEnd = animationEnd, exports.transitionEnd = transitionEnd, 
-    exports.transitionDelay = transitionDelay, exports.transitionTiming = transitionTiming, 
-    exports.transitionDuration = transitionDuration, exports.transitionProperty = transitionProperty, 
-    exports.animationDelay = animationDelay, exports.animationTiming = animationTiming, 
-    exports.animationDuration = animationDuration, exports.animationName = animationName, 
-    _inDOM["default"]) {
-        var _getTransitionPropert = function() {
-            for (var transitionEnd, animationEnd, style = document.createElement("div").style, vendorMap = {
-                O: function(e) {
-                    return "o" + e.toLowerCase();
-                },
-                Moz: function(e) {
-                    return e.toLowerCase();
-                },
-                Webkit: function(e) {
-                    return "webkit" + e;
-                },
-                ms: function(e) {
-                    return "MS" + e;
-                }
-            }, vendors = Object.keys(vendorMap), prefix = "", i = 0; i < vendors.length; i++) {
-                var vendor = vendors[i];
-                if (vendor + "TransitionProperty" in style) {
-                    prefix = "-" + vendor.toLowerCase(), transitionEnd = vendorMap[vendor]("TransitionEnd"), 
-                    animationEnd = vendorMap[vendor]("AnimationEnd");
-                    break;
-                }
-            }
-            !transitionEnd && "transitionProperty" in style && (transitionEnd = "transitionend");
-            !animationEnd && "animationName" in style && (animationEnd = "animationend");
-            return style = null, {
-                animationEnd: animationEnd,
-                transitionEnd: transitionEnd,
-                prefix: prefix
-            };
-        }();
-        prefix = _getTransitionPropert.prefix, exports.transitionEnd = transitionEnd = _getTransitionPropert.transitionEnd, 
-        exports.animationEnd = animationEnd = _getTransitionPropert.animationEnd, exports.transform = transform = prefix + "-" + transform, 
-        exports.transitionProperty = transitionProperty = prefix + "-transition-property", 
-        exports.transitionDuration = transitionDuration = prefix + "-transition-duration", 
-        exports.transitionDelay = transitionDelay = prefix + "-transition-delay", exports.transitionTiming = transitionTiming = prefix + "-transition-timing-function", 
-        exports.animationName = animationName = prefix + "-animation-name", exports.animationDuration = animationDuration = prefix + "-animation-duration", 
-        exports.animationTiming = animationTiming = prefix + "-animation-delay", exports.animationDelay = animationDelay = prefix + "-animation-timing-function";
-    }
-    var _default = {
-        transform: transform,
-        end: transitionEnd,
-        property: transitionProperty,
-        timing: transitionTiming,
-        delay: transitionDelay,
-        duration: transitionDuration
-    };
-    exports["default"] = _default;
-}, function(module, exports, __webpack_require__) {
-    (exports = module.exports = __webpack_require__(28)(!1)).push([ module.i, "@import url(https://fonts.googleapis.com/css?family=Lora|Mukta);", "" ]), 
-    exports.push([ module.i, "input {\n    width: 130px;\n    margin-left: 8px;\n}\n\nbutton {\n\t-webkit-transition-duration: 0.4s; /* Safari */\n\tbackground-color: #f44336;\n\tborder: 1px solid #f44336;\n\tcolor: white;\n\tdisplay: inline-block;\n\tfont-family: 'Mukta', sans-serif;\n\tfont-size: 11px;\n\theight: 20px;\n\tline-height: 15px;\n\tmargin-left: 3px;\n\tmargin-right: 11px;\n\tpadding: 3px;\n\ttext-transform: uppercase;\n\ttransition-duration: 0.6s;\n\tvertical-align: middle;\n\twidth: 20px;\n}\n\nbutton:hover {\n    background-color: white;\n    color: black;\n}\n\nbutton:active {\n\tbackground-color: #fafafa;\n\ttransform: translateY(1px);\n\ttransition-duration: 0.3s;\n}\n\nbutton:focus {\n\toutline: none;\n}\n\n.formBlock {\n    display: -webkit-box;\n    font-family: 'Lora', serif;\n    font-weight: 700;\n}\n\n.sheetLine {\n\tcursor: pointer;\n\tline-height: 3;\n\theight: 30px;\n}\n\n.sheetNameText {\n\tfont-size: 14px;\n\tfont-family: 'Lora', serif;\n}\n\n.sheetNameText.active-sheet {\n\tborder-bottom: 3px solid #338236;\n}\n\n/*\nReactCSSTransitionGroup styling\n */\n.sheetNames-enter {\n  opacity: 0.01;\n}\n\n.sheetNames-enter.sheetNames-enter-active {\n  opacity: 1;\n  transition: opacity 800ms ease-in;\n}\n\n.sheetNames-leave {\n  opacity: 1;\n}\n\n.sheetNames-leave.sheetNames-leave-active {\n  opacity: 0.01;\n  transition: opacity 100ms ease-in;\n}\n\n.sheetNames-appear {\n  opacity: 0.01;\n}\n\n.sheetNames-appear.sheetNames-appear-active {\n  opacity: 1;\n  transition: opacity .5s ease-in;\n}", "" ]);
-}, function(module, exports) {
-    module.exports = function(useSourceMap) {
-        var list = [];
-        return list.toString = function() {
-            return this.map(function(item) {
-                var content = function(item, useSourceMap) {
-                    var content = item[1] || "", cssMapping = item[3];
-                    if (!cssMapping) return content;
-                    if (useSourceMap && "function" == typeof btoa) {
-                        var sourceMapping = (sourceMap = cssMapping, "/*# sourceMappingURL=data:application/json;charset=utf-8;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + " */"), sourceURLs = cssMapping.sources.map(function(source) {
-                            return "/*# sourceURL=" + cssMapping.sourceRoot + source + " */";
-                        });
-                        return [ content ].concat(sourceURLs).concat([ sourceMapping ]).join("\n");
-                    }
-                    var sourceMap;
-                    return [ content ].join("\n");
-                }(item, useSourceMap);
-                return item[2] ? "@media " + item[2] + "{" + content + "}" : content;
-            }).join("");
-        }, list.i = function(modules, mediaQuery) {
-            "string" == typeof modules && (modules = [ [ null, modules, "" ] ]);
-            for (var alreadyImportedModules = {}, i = 0; i < this.length; i++) {
-                var id = this[i][0];
-                "number" == typeof id && (alreadyImportedModules[id] = !0);
-            }
-            for (i = 0; i < modules.length; i++) {
-                var item = modules[i];
-                "number" == typeof item[0] && alreadyImportedModules[item[0]] || (mediaQuery && !item[2] ? item[2] = mediaQuery : mediaQuery && (item[2] = "(" + item[2] + ") and (" + mediaQuery + ")"), 
-                list.push(item));
-            }
-        }, list;
-    };
-}, function(module, exports, __webpack_require__) {
-    var fn, memo, stylesInDom = {}, isOldIE = (fn = function() {
-        return window && document && document.all && !window.atob;
-    }, function() {
-        return void 0 === memo && (memo = fn.apply(this, arguments)), memo;
-    }), getElement = function(fn) {
-        var memo = {};
-        return function(target, parent) {
-            if ("function" == typeof target) return target();
-            if ("undefined" == typeof memo[target]) {
-                var styleTarget = function(target, parent) {
-                    return parent ? parent.querySelector(target) : document.querySelector(target);
-                }.call(this, target, parent);
-                if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) try {
-                    styleTarget = styleTarget.contentDocument.head;
-                } catch (e) {
-                    styleTarget = null;
-                }
-                memo[target] = styleTarget;
-            }
-            return memo[target];
-        };
-    }(), singleton = null, singletonCounter = 0, stylesInsertedAtTop = [], fixUrls = __webpack_require__(30);
-    function addStylesToDom(styles, options) {
-        for (var i = 0; i < styles.length; i++) {
-            var item = styles[i], domStyle = stylesInDom[item.id];
-            if (domStyle) {
-                domStyle.refs++;
-                for (var j = 0; j < domStyle.parts.length; j++) domStyle.parts[j](item.parts[j]);
-                for (;j < item.parts.length; j++) domStyle.parts.push(addStyle(item.parts[j], options));
-            } else {
-                var parts = [];
-                for (j = 0; j < item.parts.length; j++) parts.push(addStyle(item.parts[j], options));
-                stylesInDom[item.id] = {
-                    id: item.id,
-                    refs: 1,
-                    parts: parts
-                };
-            }
-        }
-    }
-    function listToStyles(list, options) {
-        for (var styles = [], newStyles = {}, i = 0; i < list.length; i++) {
-            var item = list[i], id = options.base ? item[0] + options.base : item[0], part = {
-                css: item[1],
-                media: item[2],
-                sourceMap: item[3]
-            };
-            newStyles[id] ? newStyles[id].parts.push(part) : styles.push(newStyles[id] = {
-                id: id,
-                parts: [ part ]
-            });
-        }
-        return styles;
-    }
-    function insertStyleElement(options, style) {
-        var target = getElement(options.insertInto);
-        if (!target) throw new Error("Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.");
-        var lastStyleElementInsertedAtTop = stylesInsertedAtTop[stylesInsertedAtTop.length - 1];
-        if ("top" === options.insertAt) lastStyleElementInsertedAtTop ? lastStyleElementInsertedAtTop.nextSibling ? target.insertBefore(style, lastStyleElementInsertedAtTop.nextSibling) : target.appendChild(style) : target.insertBefore(style, target.firstChild), 
-        stylesInsertedAtTop.push(style); else if ("bottom" === options.insertAt) target.appendChild(style); else {
-            if ("object" != typeof options.insertAt || !options.insertAt.before) throw new Error("[Style Loader]\n\n Invalid value for parameter 'insertAt' ('options.insertAt') found.\n Must be 'top', 'bottom', or Object.\n (https://github.com/webpack-contrib/style-loader#insertat)\n");
-            var nextSibling = getElement(options.insertAt.before, target);
-            target.insertBefore(style, nextSibling);
-        }
-    }
-    function removeStyleElement(style) {
-        if (null === style.parentNode) return !1;
-        style.parentNode.removeChild(style);
-        var idx = stylesInsertedAtTop.indexOf(style);
-        idx >= 0 && stylesInsertedAtTop.splice(idx, 1);
-    }
-    function createStyleElement(options) {
-        var style = document.createElement("style");
-        if (options.attrs.type === undefined && (options.attrs.type = "text/css"), options.attrs.nonce === undefined) {
-            var nonce = function() {
-                0;
-                return __webpack_require__.nc;
-            }();
-            nonce && (options.attrs.nonce = nonce);
-        }
-        return addAttrs(style, options.attrs), insertStyleElement(options, style), style;
-    }
-    function addAttrs(el, attrs) {
-        Object.keys(attrs).forEach(function(key) {
-            el.setAttribute(key, attrs[key]);
-        });
-    }
-    function addStyle(obj, options) {
-        var style, update, remove, result;
-        if (options.transform && obj.css) {
-            if (!(result = options.transform(obj.css))) return function() {};
-            obj.css = result;
-        }
-        if (options.singleton) {
-            var styleIndex = singletonCounter++;
-            style = singleton || (singleton = createStyleElement(options)), update = applyToSingletonTag.bind(null, style, styleIndex, !1), 
-            remove = applyToSingletonTag.bind(null, style, styleIndex, !0);
-        } else obj.sourceMap && "function" == typeof URL && "function" == typeof URL.createObjectURL && "function" == typeof URL.revokeObjectURL && "function" == typeof Blob && "function" == typeof btoa ? (style = function(options) {
-            var link = document.createElement("link");
-            return options.attrs.type === undefined && (options.attrs.type = "text/css"), options.attrs.rel = "stylesheet", 
-            addAttrs(link, options.attrs), insertStyleElement(options, link), link;
-        }(options), update = function(link, options, obj) {
-            var css = obj.css, sourceMap = obj.sourceMap, autoFixUrls = options.convertToAbsoluteUrls === undefined && sourceMap;
-            (options.convertToAbsoluteUrls || autoFixUrls) && (css = fixUrls(css));
-            sourceMap && (css += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + " */");
-            var blob = new Blob([ css ], {
-                type: "text/css"
-            }), oldSrc = link.href;
-            link.href = URL.createObjectURL(blob), oldSrc && URL.revokeObjectURL(oldSrc);
-        }.bind(null, style, options), remove = function() {
-            removeStyleElement(style), style.href && URL.revokeObjectURL(style.href);
-        }) : (style = createStyleElement(options), update = function(style, obj) {
-            var css = obj.css, media = obj.media;
-            media && style.setAttribute("media", media);
-            if (style.styleSheet) style.styleSheet.cssText = css; else {
-                for (;style.firstChild; ) style.removeChild(style.firstChild);
-                style.appendChild(document.createTextNode(css));
-            }
-        }.bind(null, style), remove = function() {
-            removeStyleElement(style);
-        });
-        return update(obj), function(newObj) {
-            if (newObj) {
-                if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap) return;
-                update(obj = newObj);
-            } else remove();
-        };
-    }
-    module.exports = function(list, options) {
-        if ("undefined" != typeof DEBUG && DEBUG && "object" != typeof document) throw new Error("The style-loader cannot be used in a non-browser environment");
-        (options = options || {}).attrs = "object" == typeof options.attrs ? options.attrs : {}, 
-        options.singleton || "boolean" == typeof options.singleton || (options.singleton = isOldIE()), 
-        options.insertInto || (options.insertInto = "head"), options.insertAt || (options.insertAt = "bottom");
-        var styles = listToStyles(list, options);
-        return addStylesToDom(styles, options), function(newList) {
-            for (var mayRemove = [], i = 0; i < styles.length; i++) {
-                var item = styles[i];
-                (domStyle = stylesInDom[item.id]).refs--, mayRemove.push(domStyle);
-            }
-            newList && addStylesToDom(listToStyles(newList, options), options);
-            for (i = 0; i < mayRemove.length; i++) {
-                var domStyle;
-                if (0 === (domStyle = mayRemove[i]).refs) {
-                    for (var j = 0; j < domStyle.parts.length; j++) domStyle.parts[j]();
-                    delete stylesInDom[domStyle.id];
-                }
-            }
-        };
-    };
-    var textStore, replaceText = (textStore = [], function(index, replacement) {
-        return textStore[index] = replacement, textStore.filter(Boolean).join("\n");
-    });
-    function applyToSingletonTag(style, index, remove, obj) {
-        var css = remove ? "" : obj.css;
-        if (style.styleSheet) style.styleSheet.cssText = replaceText(index, css); else {
-            var cssNode = document.createTextNode(css), childNodes = style.childNodes;
-            childNodes[index] && style.removeChild(childNodes[index]), childNodes.length ? style.insertBefore(cssNode, childNodes[index]) : style.appendChild(cssNode);
-        }
-    }
-}, function(module, exports) {
-    module.exports = function(css) {
-        var location = "undefined" != typeof window && window.location;
-        if (!location) throw new Error("fixUrls requires window.location");
-        if (!css || "string" != typeof css) return css;
-        var baseUrl = location.protocol + "//" + location.host, currentDir = baseUrl + location.pathname.replace(/\/[^\/]*$/, "/");
-        return css.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi, function(fullMatch, origUrl) {
-            var newUrl, unquotedOrigUrl = origUrl.trim().replace(/^"(.*)"$/, function(o, $1) {
-                return $1;
-            }).replace(/^'(.*)'$/, function(o, $1) {
-                return $1;
-            });
-            return /^(#|data:|http:\/\/|https:\/\/|file:\/\/\/|\s*$)/i.test(unquotedOrigUrl) ? fullMatch : (newUrl = 0 === unquotedOrigUrl.indexOf("//") ? unquotedOrigUrl : 0 === unquotedOrigUrl.indexOf("/") ? baseUrl + unquotedOrigUrl : currentDir + unquotedOrigUrl.replace(/^\.\//, ""), 
-            "url(" + JSON.stringify(newUrl) + ")");
-        });
-    };
 }, function(module, __webpack_exports__, __webpack_require__) {
     "use strict";
     __webpack_require__.r(__webpack_exports__);
-    var react = __webpack_require__(0), react_default = __webpack_require__.n(react), react_dom = __webpack_require__(3), react_dom_default = __webpack_require__.n(react_dom), react_addons_css_transition_group = __webpack_require__(8), react_addons_css_transition_group_default = __webpack_require__.n(react_addons_css_transition_group), prop_types = __webpack_require__(1), prop_types_default = __webpack_require__.n(prop_types);
+    var react = __webpack_require__(0), react_default = __webpack_require__.n(react), react_dom = __webpack_require__(2);
-    __webpack_require__(7);
+    __webpack_require__.n(react_dom).a.render(react_default.a.createElement(() => react_default.a.createElement("div", null, "By Elisha Nuchi ©2019"), null), document.getElementById("index"));
-    function FormInput(props) {
-        const [text, setText] = Object(react["useState"])("");
-        return react_default.a.createElement("div", {
-            className: "formBlock"
-        }, react_default.a.createElement("span", null, "Add a sheet: "), react_default.a.createElement("form", {
-            onSubmit: event => {
-                event.preventDefault(), 0 !== text.length && (props.newSheetFormHandler(event, text), 
-                setText(""));
-            }
-        }, react_default.a.createElement("input", {
-            onChange: event => setText(event.target.value),
-            value: text
-        })));
-    }
-    FormInput.propTypes = {
-        newSheetFormHandler: prop_types_default.a.func
-    };
-    const SheetButton = props => {
-        const {name: name, deleteButtonHandler: deleteButtonHandler, clickSheetNameHandler: clickSheetNameHandler} = props, {sheetIndex: sheetIndex, text: text, isActive: isActive} = name;
-        return react_default.a.createElement("div", {
-            className: "sheetLine"
-        }, react_default.a.createElement("button", {
-            onClick: e => deleteButtonHandler(e, sheetIndex)
-        }, "X"), react_default.a.createElement("span", {
-            onClick: e => clickSheetNameHandler(e, text),
-            className: "sheetNameText " + (isActive ? "active-sheet" : "")
-        }, text));
-    };
-    var sheet_button = SheetButton;
-    SheetButton.propTypes = {
-        name: prop_types_default.a.object,
-        deleteButtonHandler: prop_types_default.a.func,
-        clickSheetNameHandler: prop_types_default.a.func
-    };
-    const serverMethods = {}, ignoredMethods = [ "withFailureHandler", "withLogger", "withSuccessHandler", "withUserObject" ];
-    for (const method in google.script.run) ignoredMethods.includes(method) || (serverMethods[method] = ((...args) => new Promise((resolve, reject) => {
-        google.script.run.withSuccessHandler(resolve).withFailureHandler(reject)[method](...args);
-    })));
-    var server = serverMethods;
-    react_dom_default.a.render(react_default.a.createElement(function() {
-        const {getSheetsData: getSheetsData, addSheet: addSheet, deleteSheet: deleteSheet, setActiveSheet: setActiveSheet} = server, [names, setNames] = Object(react["useState"])([]);
-        Object(react["useEffect"])(() => {
-            getSheetsData().then(setNames)["catch"](alert);
-        }, []);
-        const deleteButtonHandler = (e, sheetIndex) => {
-            deleteSheet(sheetIndex).then(setNames)["catch"](alert);
-        }, clickSheetNameHandler = (e, sheetName) => {
-            setActiveSheet(sheetName).then(setNames)["catch"](alert);
-        };
-        return react_default.a.createElement("div", null, react_default.a.createElement(FormInput, {
-            newSheetFormHandler: (e, newSheetTitle) => {
-                addSheet(newSheetTitle).then(setNames)["catch"](alert);
-            }
-        }), react_default.a.createElement(react_addons_css_transition_group_default.a, {
-            transitionName: "sheetNames",
-            transitionAppear: !0,
-            transitionEnterTimeout: 100,
-            transitionLeaveTimeout: 100
-        }, names.length ? names.map(name => react_default.a.createElement(sheet_button, {
-            name: name,
-            deleteButtonHandler: deleteButtonHandler,
-            clickSheetNameHandler: clickSheetNameHandler,
-            key: name.sheetName
-        })) : null));
-    }, null), document.getElementById("index"));
 } ]);</script></body>
 </html>

dist/appsscript.json

@@ -5,5 +5,8 @@
   "oauthScopes": [
     "https://www.googleapis.com/auth/script.container.ui",
     "https://www.googleapis.com/auth/spreadsheets"
-  ] 
+  ],
+  "executionApi": {
+    "access": "ANYONE"
+  }
 }

package-lock.json

@@ -2191,6 +2191,12 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "clasp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/clasp/-/clasp-1.0.0.tgz",
+      "integrity": "sha512-JkgxdZvYBtqIlGPvC5oRZ548eHpfx+81z5GXckpXcMkRTZDddkQfwK60w1YE32n8ovGoSW88pbsIvCPOKM6hyA==",
+      "dev": true
+    },
     "class-utils": {
       "version": "0.3.6",
       "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",

package.json

@@ -34,6 +34,7 @@
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
     "babel-plugin-transform-es3-property-literals": "^6.22.0",
+    "clasp": "^1.0.0",
     "clean-webpack-plugin": "^0.1.19",
     "copy-webpack-plugin": "^4.6.0",
     "css-loader": "^1.0.1",

src/client/about.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { AboutPage } from './components/about-sidebar';
+
+ReactDOM.render(
+  <AboutPage />,
+  document.getElementById('index')
+);

src/client/components/about-sidebar.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const AboutPage = () => (
+  <div>
+    By Elisha Nuchi ©2019
+  </div>
+);

webpack.config.js

@@ -19,12 +19,12 @@ const webpackCleanPlugin = new WebpackCleanPlugin([
 const clientEntrypoints = [
   {
     name: "CLIENT - main dialog",
-    entry: "./src/client/index.jsx",
+    entry: "./src/client/main.jsx",
     filename: "main.html"
   },
   {
     name: "CLIENT - about sidebar",
-    entry: "./src/client/index.jsx",
+    entry: "./src/client/about.jsx",
     filename: "about.html"
   },
 ];
@@ -123,10 +123,6 @@ const clientConfigs = clientEntrypoints.map((clientEntrypoint) => {
     ],
   })
 });
-    // };
-  // };
-
-console.log(clientConfigs)
 
 const serverConfig = {
   ...sharedConfigSettings,