text: import React, { PureComponent } from 'react';
  import styled from 'styled-components';
  
  function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
      throw new TypeError("Cannot call a class as a function");
    }
  }
  
  function _defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
      var descriptor = props[i];
      descriptor.enumerable = descriptor.enumerable || false;
      descriptor.configurable = true;
      if ("value" in descriptor) descriptor.writable = true;
      Object.defineProperty(target, descriptor.key, descriptor);
    }
  }
  
  function _createClass(Constructor, protoProps, staticProps) {
    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
    if (staticProps) _defineProperties(Constructor, staticProps);
    return Constructor;
  }
  
  function _defineProperty(obj, key, value) {
    if (key in obj) {
      Object.defineProperty(obj, key, {
        value: value,
        enumerable: true,
        configurable: true,
        writable: true
      });
    } else {
      obj[key] = value;
    }
  
    return obj;
  }
  
  function _inherits(subClass, superClass) {
    if (typeof superClass !== "function" && superClass !== null) {
      throw new TypeError("Super expression must either be null or a function");
    }
  
    subClass.prototype = Object.create(superClass && superClass.prototype, {
      constructor: {
        value: subClass,
        writable: true,
        configurable: true
      }
    });
    if (superClass) _setPrototypeOf(subClass, superClass);
  }
  
  function _getPrototypeOf(o) {
    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
      return o.__proto__ || Object.getPrototypeOf(o);
    };
    return _getPrototypeOf(o);
  }
  
  function _setPrototypeOf(o, p) {
    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
      o.__proto__ = p;
      return o;
    };
  
    return _setPrototypeOf(o, p);
  }
  
  function _assertThisInitialized(self) {
    if (self === void 0) {
      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
    }
  
    return self;
  }
  
  function _possibleConstructorReturn(self, call) {
    if (call && (typeof call === "object" || typeof call === "function")) {
      return call;
    }
  
    return _assertThisInitialized(self);
  }
  
  function _taggedTemplateLiteral(strings, raw) {
    if (!raw) {
      raw = strings.slice(0);
    }
  
    return Object.freeze(Object.defineProperties(strings, {
      raw: {
        value: Object.freeze(raw)
      }
    }));
  }
  
  function createCommonjsModule(fn, module) {
  	return module = { exports: {} }, fn(module, module.exports), module.exports;
  }
  
  /*
  object-assign
  (c) Sindre Sorhus
  @license MIT
  */
  /* eslint-disable no-unused-vars */
  var getOwnPropertySymbols = Object.getOwnPropertySymbols;
  var hasOwnProperty = Object.prototype.hasOwnProperty;
  var propIsEnumerable = Object.prototype.propertyIsEnumerable;
  
  function toObject(val) {
  	if (val === null || val === undefined) {
  		throw new TypeError('Object.assign cannot be called with null or undefined');
  	}
  
  	return Object(val);
  }
  
  function shouldUseNative() {
  	try {
  		if (!Object.assign) {
  			return false;
  		}
  
  		// Detect buggy property enumeration order in older V8 versions.
  
  		// https://bugs.chromium.org/p/v8/issues/detail?id=4118
  		var test1 = new String('abc');  // eslint-disable-line no-new-wrappers
  		test1[5] = 'de';
  		if (Object.getOwnPropertyNames(test1)[0] === '5') {
  			return false;
  		}
  
  		// https://bugs.chromium.org/p/v8/issues/detail?id=3056
  		var test2 = {};
  		for (var i = 0; i < 10; i++) {
  			test2['_' + String.fromCharCode(i)] = i;
  		}
  		var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
  			return test2[n];
  		});
  		if (order2.join('') !== '0123456789') {
  			return false;
  		}
  
  		// https://bugs.chromium.org/p/v8/issues/detail?id=3056
  		var test3 = {};
  		'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
  			test3[letter] = letter;
  		});
  		if (Object.keys(Object.assign({}, test3)).join('') !==
  				'abcdefghijklmnopqrst') {
  			return false;
  		}
  
  		return true;
  	} catch (err) {
  		// We don't expect any of the above to throw, but better to be safe.
  		return false;
  	}
  }
  
  var objectAssign = shouldUseNative() ? Object.assign : function (target, source) {
  	var from;
  	var to = toObject(target);
  	var symbols;
  
  	for (var s = 1; s < arguments.length; s++) {
  		from = Object(arguments[s]);
  
  		for (var key in from) {
  			if (hasOwnProperty.call(from, key)) {
  				to[key] = from[key];
  			}
  		}
  
  		if (getOwnPropertySymbols) {
  			symbols = getOwnPropertySymbols(from);
  			for (var i = 0; i < symbols.length; i++) {
  				if (propIsEnumerable.call(from, symbols[i])) {
  					to[symbols[i]] = from[symbols[i]];
  				}
  			}
  		}
  	}
  
  	return to;
  };
  
  /**
   * Copyright (c) 2013-present, Facebook, Inc.
   *
   * This source code is licensed under the MIT license found in the
   * LICENSE file in the root directory of this source tree.
   */
  
  var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
  
  var ReactPropTypesSecret_1 = ReactPropTypesSecret;
  
  var printWarning = function() {};
  
  if (process.env.NODE_ENV !== 'production') {
    var ReactPropTypesSecret$1 = ReactPropTypesSecret_1;
    var loggedTypeFailures = {};
  
    printWarning = function(text) {
      var message = 'Warning: ' + text;
      if (typeof console !== 'undefined') {
        console.error(message);
      }
      try {
        // --- Welcome to debugging React ---
        // This error was thrown as a convenience so that you can use this stack
        // to find the callsite that caused this warning to fire.
        throw new Error(message);
      } catch (x) {}
    };
  }
  
  /**
   * Assert that the values match with the type specs.
   * Error messages are memorized and will only be shown once.
   *
   * @param {object} typeSpecs Map of name to a ReactPropType
   * @param {object} values Runtime values that need to be type-checked
   * @param {string} location e.g. "prop", "context", "child context"
   * @param {string} componentName Name of the component for error messages.
   * @param {?Function} getStack Returns the component stack.
   * @private
   */
  function checkPropTypes(typeSpecs, values, location, componentName, getStack) {
    if (process.env.NODE_ENV !== 'production') {
      for (var typeSpecName in typeSpecs) {
        if (typeSpecs.hasOwnProperty(typeSpecName)) {
          var error;
          // Prop type validation may throw. In case they do, we don't want to
          // fail the render phase where it didn't fail before. So we log it.
          // After these have been cleaned up, we'll let them throw.
          try {
            // This is intentionally an invariant that gets caught. It's the same
            // behavior as without this statement except with a better message.
            if (typeof typeSpecs[typeSpecName] !== 'function') {
              var err = Error(
                (componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' +
                'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.'
              );
              err.name = 'Invariant Violation';
              throw err;
            }
            error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret$1);
          } catch (ex) {
            error = ex;
          }
          if (error && !(error instanceof Error)) {
            printWarning(
              (componentName || 'React class') + ': type specification of ' +
              location + ' `' + typeSpecName + '` is invalid; the type checker ' +
              'function must return `null` or an `Error` but returned a ' + typeof error + '. ' +
              'You may have forgotten to pass an argument to the type checker ' +
              'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' +
              'shape all require an argument).'
            );
  
          }
          if (error instanceof Error && !(error.message in loggedTypeFailures)) {
            // Only monitor this failure once because there tends to be a lot of the
            // same error.
            loggedTypeFailures[error.message] = true;
  
            var stack = getStack ? getStack() : '';
  
            printWarning(
              'Failed ' + location + ' type: ' + error.message + (stack != null ? stack : '')
            );
          }
        }
      }
    }
  }
  
  var checkPropTypes_1 = checkPropTypes;
  
  var printWarning$1 = function() {};
  
  if (process.env.NODE_ENV !== 'production') {
    printWarning$1 = function(text) {
      var message = 'Warning: ' + text;
      if (typeof console !== 'undefined') {
        console.error(message);
      }
      try {
        // --- Welcome to debugging React ---
        // This error was thrown as a convenience so that you can use this stack
        // to find the callsite that caused this warning to fire.
        throw new Error(message);
      } catch (x) {}
    };
  }
  
  function emptyFunctionThatReturnsNull() {
    return null;
  }
  
  var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
    /* global Symbol */
    var ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
    var FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec.
  
    /**
     * Returns the iterator method function contained on the iterable object.
     *
     * Be sure to invoke the function with the iterable as context:
     *
     *     var iteratorFn = getIteratorFn(myIterable);
     *     if (iteratorFn) {
     *       var iterator = iteratorFn.call(myIterable);
     *       ...
     *     }
     *
     * @param {?object} maybeIterable
     * @return {?function}
     */
    function getIteratorFn(maybeIterable) {
      var iteratorFn = maybeIterable && (ITERATOR_SYMBOL && maybeIterable[ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]);
      if (typeof iteratorFn === 'function') {
        return iteratorFn;
      }
    }
  
    /**
     * Collection of methods that allow declaration and validation of props that are
     * supplied to React components. Example usage:
     *
     *   var Props = require('ReactPropTypes');
     *   var MyArticle = React.createClass({
     *     propTypes: {
     *       // An optional string prop named "description".
     *       description: Props.string,
     *
     *       // A required enum prop named "category".
     *       category: Props.oneOf(['News','Photos']).isRequired,
     *
     *       // A prop named "dialog" that requires an instance of Dialog.
     *       dialog: Props.instanceOf(Dialog).isRequired
     *     },
     *     render: function() { ... }
     *   });
     *
     * A more formal specification of how these methods are used:
     *
     *   type := array|bool|func|object|number|string|oneOf([...])|instanceOf(...)
     *   decl := ReactPropTypes.{type}(.isRequired)?
     *
     * Each and every declaration produces a function with the same signature. This
     * allows the creation of custom validation functions. For example:
     *
     *  var MyLink = React.createClass({
     *    propTypes: {
     *      // An optional string or URI prop named "href".
     *      href: function(props, propName, componentName) {
     *        var propValue = props[propName];
     *        if (propValue != null && typeof propValue !== 'string' &&
     *            !(propValue instanceof URI)) {
     *          return new Error(
     *            'Expected a string or an URI for ' + propName + ' in ' +
     *            componentName
     *          );
     *        }
     *      }
     *    },
     *    render: function() {...}
     *  });
     *
     * @internal
     */
  
    var ANONYMOUS = '<<anonymous>>';
  
    // Important!
    // Keep this list in sync with production version in `./factoryWithThrowingShims.js`.
    var ReactPropTypes = {
      array: createPrimitiveTypeChecker('array'),
      bool: createPrimitiveTypeChecker('boolean'),
      func: createPrimitiveTypeChecker('function'),
      number: createPrimitiveTypeChecker('number'),
      object: createPrimitiveTypeChecker('object'),
      string: createPrimitiveTypeChecker('string'),
      symbol: createPrimitiveTypeChecker('symbol'),
  
      any: createAnyTypeChecker(),
      arrayOf: createArrayOfTypeChecker,
      element: createElementTypeChecker(),
      instanceOf: createInstanceTypeChecker,
      node: createNodeChecker(),
      objectOf: createObjectOfTypeChecker,
      oneOf: createEnumTypeChecker,
      oneOfType: createUnionTypeChecker,
      shape: createShapeTypeChecker,
      exact: createStrictShapeTypeChecker,
    };
  
    /**
     * inlined Object.is polyfill to avoid requiring consumers ship their own
     * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
     */
    /*eslint-disable no-self-compare*/
    function is(x, y) {
      // SameValue algorithm
      if (x === y) {
        // Steps 1-5, 7-10
        // Steps 6.b-6.e: +0 != -0
        return x !== 0 || 1 / x === 1 / y;
      } else {
        // Step 6.a: NaN == NaN
        return x !== x && y !== y;
      }
    }
    /*eslint-enable no-self-compare*/
  
    /**
     * We use an Error-like object for backward compatibility as people may call
     * PropTypes directly and inspect their output. However, we don't use real
     * Errors anymore. We don't inspect their stack anyway, and creating them
     * is prohibitively expensive if they are created too often, such as what
     * happens in oneOfType() for any type before the one that matched.
     */
    function PropTypeError(message) {
      this.message = message;
      this.stack = '';
    }
    // Make `instanceof Error` still work for returned errors.
    PropTypeError.prototype = Error.prototype;
  
    function createChainableTypeChecker(validate) {
      if (process.env.NODE_ENV !== 'production') {
        var manualPropTypeCallCache = {};
        var manualPropTypeWarningCount = 0;
      }
      function checkType(isRequired, props, propName, componentName, location, propFullName, secret) {
        componentName = componentName || ANONYMOUS;
        propFullName = propFullName || propName;
  
        if (secret !== ReactPropTypesSecret_1) {
          if (throwOnDirectAccess) {
            // New behavior only for users of `prop-types` package
            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'
            );
            err.name = 'Invariant Violation';
            throw err;
          } else if (process.env.NODE_ENV !== 'production' && typeof console !== 'undefined') {
            // Old behavior for people using React.PropTypes
            var cacheKey = componentName + ':' + propName;
            if (
              !manualPropTypeCallCache[cacheKey] &&
              // Avoid spamming the console because they are often not actionable except for lib authors
              manualPropTypeWarningCount < 3
            ) {
              printWarning$1(
                'You are manually calling a React.PropTypes validation ' +
                'function for the `' + propFullName + '` prop on `' + componentName  + '`. This is deprecated ' +
                'and will throw in the standalone `prop-types` package. ' +
                'You may be seeing this warning due to a third-party PropTypes ' +
                'library. See https://fb.me/react-warning-dont-call-proptypes ' + 'for details.'
              );
              manualPropTypeCallCache[cacheKey] = true;
              manualPropTypeWarningCount++;
            }
          }
        }
        if (props[propName] == null) {
          if (isRequired) {
            if (props[propName] === null) {
              return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required ' + ('in `' + componentName + '`, but its value is `null`.'));
            }
            return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required in ' + ('`' + componentName + '`, but its value is `undefined`.'));
          }
          return null;
        } else {
          return validate(props, propName, componentName, location, propFullName);
        }
      }
  
      var chainedCheckType = checkType.bind(null, false);
      chainedCheckType.isRequired = checkType.bind(null, true);
  
      return chainedCheckType;
    }
  
    function createPrimitiveTypeChecker(expectedType) {
      function validate(props, propName, componentName, location, propFullName, secret) {
        var propValue = props[propName];
        var propType = getPropType(propValue);
        if (propType !== expectedType) {
          // `propValue` being instance of, say, date/regexp, pass the 'object'
          // check, but we can offer a more precise error message here rather than
          // 'of type `object`'.
          var preciseType = getPreciseType(propValue);
  
          return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.'));
        }
        return null;
      }
      return createChainableTypeChecker(validate);
    }
  
    function createAnyTypeChecker() {
      return createChainableTypeChecker(emptyFunctionThatReturnsNull);
    }
  
    function createArrayOfTypeChecker(typeChecker) {
      function validate(props, propName, componentName, location, propFullName) {
        if (typeof typeChecker !== 'function') {
          return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside arrayOf.');
        }
        var propValue = props[propName];
        if (!Array.isArray(propValue)) {
          var propType = getPropType(propValue);
          return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an array.'));
        }
        for (var i = 0; i < propValue.length; i++) {
          var error = typeChecker(propValue, i, componentName, location, propFullName + '[' + i + ']', ReactPropTypesSecret_1);
          if (error instanceof Error) {
            return error;
          }
        }
        return null;
      }
      return createChainableTypeChecker(validate);
    }
  
    function createElementTypeChecker() {
      function validate(props, propName, componentName, location, propFullName) {
        var propValue = props[propName];
        if (!isValidElement(propValue)) {
          var propType = getPropType(propValue);
          return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement.'));
        }
        return null;
      }
      return createChainableTypeChecker(validate);
    }
  
    function createInstanceTypeChecker(expectedClass) {
      function validate(props, propName, componentName, location, propFullName) {
        if (!(props[propName] instanceof expectedClass)) {
          var expectedClassName = expectedClass.name || ANONYMOUS;
          var actualClassName = getClassName(props[propName]);
          return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + actualClassName + '` supplied to `' + componentName + '`, expected ') + ('instance of `' + expectedClassName + '`.'));
        }
        return null;
      }
      return createChainableTypeChecker(validate);
    }
  
    function createEnumTypeChecker(expectedValues) {
      if (!Array.isArray(expectedValues)) {
        process.env.NODE_ENV !== 'production' ? printWarning$1('Invalid argument supplied to oneOf, expected an instance of array.') : void 0;
        return emptyFunctionThatReturnsNull;
      }
  
      function validate(props, propName, componentName, location, propFullName) {
        var propValue = props[propName];
        for (var i = 0; i < expectedValues.length; i++) {
          if (is(propValue, expectedValues[i])) {
            return null;
          }
        }
  
        var valuesString = JSON.stringify(expectedValues);
        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of value `' + propValue + '` ' + ('supplied to `' + componentName + '`, expected one of ' + valuesString + '.'));
      }
      return createChainableTypeChecker(validate);
    }
  
    function createObjectOfTypeChecker(typeChecker) {
      function validate(props, propName, componentName, location, propFullName) {
        if (typeof typeChecker !== 'function') {
          return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside objectOf.');
        }
        var propValue = props[propName];
        var propType = getPropType(propValue);
        if (propType !== 'object') {
          return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an object.'));
        }
        for (var key in propValue) {
          if (propValue.hasOwnProperty(key)) {
            var error = typeChecker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
            if (error instanceof Error) {
              return error;
            }
          }
        }
        return null;
      }
      return createChainableTypeChecker(validate);
    }
  
    function createUnionTypeChecker(arrayOfTypeCheckers) {
      if (!Array.isArray(arrayOfTypeCheckers)) {
        process.env.NODE_ENV !== 'production' ? printWarning$1('Invalid argument supplied to oneOfType, expected an instance of array.') : void 0;
        return emptyFunctionThatReturnsNull;
      }
  
      for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
        var checker = arrayOfTypeCheckers[i];
        if (typeof checker !== 'function') {
          printWarning$1(
            'Invalid argument supplied to oneOfType. Expected an array of check functions, but ' +
            'received ' + getPostfixForTypeWarning(checker) + ' at index ' + i + '.'
          );
          return emptyFunctionThatReturnsNull;
        }
      }
  
      function validate(props, propName, componentName, location, propFullName) {
        for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
          var checker = arrayOfTypeCheckers[i];
          if (checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret_1) == null) {
            return null;
          }
        }
  
        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`.'));
      }
      return createChainableTypeChecker(validate);
    }
  
    function createNodeChecker() {
      function validate(props, propName, componentName, location, propFullName) {
        if (!isNode(props[propName])) {
          return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`, expected a ReactNode.'));
        }
        return null;
      }
      return createChainableTypeChecker(validate);
    }
  
    function createShapeTypeChecker(shapeTypes) {
      function validate(props, propName, componentName, location, propFullName) {
        var propValue = props[propName];
        var propType = getPropType(propValue);
        if (propType !== 'object') {
          return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
        }
        for (var key in shapeTypes) {
          var checker = shapeTypes[key];
          if (!checker) {
            continue;
          }
          var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
          if (error) {
            return error;
          }
        }
        return null;
      }
      return createChainableTypeChecker(validate);
    }
  
    function createStrictShapeTypeChecker(shapeTypes) {
      function validate(props, propName, componentName, location, propFullName) {
        var propValue = props[propName];
        var propType = getPropType(propValue);
        if (propType !== 'object') {
          return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
        }
        // We need to check all keys in case some are required but missing from
        // props.
        var allKeys = objectAssign({}, props[propName], shapeTypes);
        for (var key in allKeys) {
          var checker = shapeTypes[key];
          if (!checker) {
            return new PropTypeError(
              'Invalid ' + location + ' `' + propFullName + '` key `' + key + '` supplied to `' + componentName + '`.' +
              '\nBad object: ' + JSON.stringify(props[propName], null, '  ') +
              '\nValid keys: ' +  JSON.stringify(Object.keys(shapeTypes), null, '  ')
            );
          }
          var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
          if (error) {
            return error;
          }
        }
        return null;
      }
  
      return createChainableTypeChecker(validate);
    }
  
    function isNode(propValue) {
      switch (typeof propValue) {
        case 'number':
        case 'string':
        case 'undefined':
          return true;
        case 'boolean':
          return !propValue;
        case 'object':
          if (Array.isArray(propValue)) {
            return propValue.every(isNode);
          }
          if (propValue === null || isValidElement(propValue)) {
            return true;
          }
  
          var iteratorFn = getIteratorFn(propValue);
          if (iteratorFn) {
            var iterator = iteratorFn.call(propValue);
            var step;
            if (iteratorFn !== propValue.entries) {
              while (!(step = iterator.next()).done) {
                if (!isNode(step.value)) {
                  return false;
                }
              }
            } else {
              // Iterator will provide entry [k,v] tuples rather than values.
              while (!(step = iterator.next()).done) {
                var entry = step.value;
                if (entry) {
                  if (!isNode(entry[1])) {
                    return false;
                  }
                }
              }
            }
          } else {
            return false;
          }
  
          return true;
        default:
          return false;
      }
    }
  
    function isSymbol(propType, propValue) {
      // Native Symbol.
      if (propType === 'symbol') {
        return true;
      }
  
      // 19.4.3.5 Symbol.prototype[@@toStringTag] === 'Symbol'
      if (propValue['@@toStringTag'] === 'Symbol') {
        return true;
      }
  
      // Fallback for non-spec compliant Symbols which are polyfilled.
      if (typeof Symbol === 'function' && propValue instanceof Symbol) {
        return true;
      }
  
      return false;
    }
  
    // Equivalent of `typeof` but with special handling for array and regexp.
    function getPropType(propValue) {
      var propType = typeof propValue;
      if (Array.isArray(propValue)) {
        return 'array';
      }
      if (propValue instanceof RegExp) {
        // Old webkits (at least until Android 4.0) return 'function' rather than
        // 'object' for typeof a RegExp. We'll normalize this here so that /bla/
        // passes PropTypes.object.
        return 'object';
      }
      if (isSymbol(propType, propValue)) {
        return 'symbol';
      }
      return propType;
    }
  
    // This handles more types than `getPropType`. Only used for error messages.
    // See `createPrimitiveTypeChecker`.
    function getPreciseType(propValue) {
      if (typeof propValue === 'undefined' || propValue === null) {
        return '' + propValue;
      }
      var propType = getPropType(propValue);
      if (propType === 'object') {
        if (propValue instanceof Date) {
          return 'date';
        } else if (propValue instanceof RegExp) {
          return 'regexp';
        }
      }
      return propType;
    }
  
    // Returns a string that is postfixed to a warning about an invalid type.
    // For example, "undefined" or "of type array"
    function getPostfixForTypeWarning(value) {
      var type = getPreciseType(value);
      switch (type) {
        case 'array':
        case 'object':
          return 'an ' + type;
        case 'boolean':
        case 'date':
        case 'regexp':
          return 'a ' + type;
        default:
          return type;
      }
    }
  
    // Returns class name of the object, if any.
    function getClassName(propValue) {
      if (!propValue.constructor || !propValue.constructor.name) {
        return ANONYMOUS;
      }
      return propValue.constructor.name;
    }
  
    ReactPropTypes.checkPropTypes = checkPropTypes_1;
    ReactPropTypes.PropTypes = ReactPropTypes;
  
    return ReactPropTypes;
  };
  
  function emptyFunction() {}
  
  var factoryWithThrowingShims = function() {
    function shim(props, propName, componentName, location, propFullName, secret) {
      if (secret === ReactPropTypesSecret_1) {
        // It is still safe when called from React.
        return;
      }
      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'
      );
      err.name = 'Invariant Violation';
      throw err;
    }  shim.isRequired = shim;
    function getShim() {
      return shim;
    }  // Important!
    // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
    var ReactPropTypes = {
      array: shim,
      bool: shim,
      func: shim,
      number: shim,
      object: shim,
      string: shim,
      symbol: shim,
  
      any: shim,
      arrayOf: getShim,
      element: shim,
      instanceOf: getShim,
      node: shim,
      objectOf: getShim,
      oneOf: getShim,
      oneOfType: getShim,
      shape: getShim,
      exact: getShim
    };
  
    ReactPropTypes.checkPropTypes = emptyFunction;
    ReactPropTypes.PropTypes = ReactPropTypes;
  
    return ReactPropTypes;
  };
  
  var propTypes = createCommonjsModule(function (module) {
  /**
   * Copyright (c) 2013-present, Facebook, Inc.
   *
   * This source code is licensed under the MIT license found in the
   * LICENSE file in the root directory of this source tree.
   */
  
  if (process.env.NODE_ENV !== 'production') {
    var REACT_ELEMENT_TYPE = (typeof Symbol === 'function' &&
      Symbol.for &&
      Symbol.for('react.element')) ||
      0xeac7;
  
    var isValidElement = function(object) {
      return typeof object === 'object' &&
        object !== null &&
        object.$$typeof === REACT_ELEMENT_TYPE;
    };
  
    // By explicitly using `prop-types` you are opting into new development behavior.
    // http://fb.me/prop-types-in-prod
    var throwOnDirectAccess = true;
    module.exports = factoryWithTypeCheckers(isValidElement, throwOnDirectAccess);
  } else {
    // By explicitly using `prop-types` you are opting into new production behavior.
    // http://fb.me/prop-types-in-prod
    module.exports = factoryWithThrowingShims();
  }
  });
  
  function _templateObject9() {
    var data = _taggedTemplateLiteral(["\n  &:hover {\n    color: #fff;\n    background-color: #e81123;\n    opacity: 1;\n  }\n  &:hover:active {\n    color: #fff;\n    background-color: #bf0f1d;\n    transition: none;\n    opacity: 1;\n  }\n"]);
  
    _templateObject9 = function _templateObject9() {
      return data;
    };
  
    return data;
  }
  
  function _templateObject8() {
    var data = _taggedTemplateLiteral(["\n  -webkit-app-region: no-drag;\n  display: inline-block;\n  position: relative;\n  width: 45px;\n  height: 100%;\n  padding: 0;\n  margin: 0;\n  overflow: hidden;\n  border: none;\n  box-shadow: none;\n  border-radius: 0;\n  color: #FFF;\n  background-color: transparent;\n  transition: background-color 0.25s ease;\n  opacity: 0.5;\n\n  & svg {\n    fill: currentColor;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover {\n    background-color: rgba(255,255,255,0.3);\n    opacity: 1;\n  }\n\n  &:hover:active {\n    background-color: rgba(255,255,255,0.2);\n    transition: none;\n    opacity: 1;\n  }\n"]);
  
    _templateObject8 = function _templateObject8() {
      return data;
    };
  
    return data;
  }
  
  function _templateObject7() {
    var data = _taggedTemplateLiteral(["\n  border: 1px solid #e1a116;\n  background-color: #ffbd2e;\n\n  & svg {\n    width: 6px;\n    height: 6px;\n    position: absolute;\n    top: 1px;\n    left: 1px;\n    opacity: 0;\n  }\n\n  &:hover {\n    svg {\n      opacity: 1;\n    }\n  }\n\n  &:active {\n    border-color: #ad7d15;\n    background-color: #bf9123;\n  }\n"]);
  
    _templateObject7 = function _templateObject7() {
      return data;
    };
  
    return data;
  }
  
  function _templateObject6() {
    var data = _taggedTemplateLiteral(["\n  border: 1px solid #e2463f;\n  background-color: #ff5f57;\n  margin-left: 10px;\n\n  & svg {\n    width: 4px;\n    height: 4px;\n    position: absolute;\n    top: 2px;\n    left: 2px;\n    opacity: 0;\n  }\n\n  &:hover {\n    svg {\n      opacity: 1;\n    }\n  }\n\n  &:active {\n    border-color: #ad3934;\n    background-color: #bf4943;\n  }\n"]);
  
    _templateObject6 = function _templateObject6() {
      return data;
    };
  
    return data;
  }
  
  function _templateObject5() {
    var data = _taggedTemplateLiteral(["\n  border: 1px solid #12ac28;\n  background-color: #28c940;\n\n  & svg.fullscreen-svg {\n    width: 6px;\n    height: 6px;\n    position: absolute;\n    top: 1px;\n    left: 1px;\n    opacity: 0;\n  }\n\n  & svg.maximize-svg {\n    width: 6px;\n    height: 6px;\n    position: absolute;\n    top: 1px;\n    left: 1px;\n    opacity: 0;\n    display: none;\n  }\n\n  &:hover {\n    svg.fullscreen-svg {\n      opacity: ", ";\n      display: ", ";\n    }\n\n    svg.maximize-svg {\n      opacity: ", ";\n      display: ", ";\n    }\n  }\n\n  &:active {\n    border-color: #128622;\n    background-color: #1f9a31;\n  }\n"]);
  
    _templateObject5 = function _templateObject5() {
      return data;
    };
  
    return data;
  }
  
  function _templateObject4() {
    var data = _taggedTemplateLiteral(["\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  margin: 0px 4px;\n  line-height: 0;\n  padding: 0px;\n  -webkit-app-region: no-drag;\n  display: inline-block;\n  position: relative;\n  overflow: hidden;\n  border: none;\n  box-shadow: none;\n"]);
  
    _templateObject4 = function _templateObject4() {
      return data;
    };
  
    return data;
  }
  
  function _templateObject3() {
    var data = _taggedTemplateLiteral(["\n  flex-grow: 0;\n  flex-shrink: 0;\n  margin-left: auto;\n  height: 100%;\n"]);
  
    _templateObject3 = function _templateObject3() {
      return data;
    };
  
    return data;
  }
  
  function _templateObject2() {
    var data = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 0 10px;\n  justify-content: ", ";\n  align-content: center;\n  align-items: center;\n  flex-grow: 1;\n  text-align: center;\n  font-family: 'Helvetica Neue', Helvetica;\n  font-size: 12px;\n  line-height: 22px;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  -webkit-app-region: drag;\n  user-select: none;\n"]);
  
    _templateObject2 = function _templateObject2() {
      return data;
    };
  
    return data;
  }
  
  function _templateObject() {
    var data = _taggedTemplateLiteral(["\n  height: ", ";\n  display: flex;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  user-select: none;\n  width: 100%;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", Arial, sans-serif;\n  background-color: '", "';\n  color: #FFF;\n  -webkit-app-region: drag;\n  flex-direction: row;\n"]);
  
    _templateObject = function _templateObject() {
      return data;
    };
  
    return data;
  }
  var Container = styled.div(_templateObject(), function (props) {
    return props.isWin ? '28px' : '24px';
  }, function (props) {
    return props.backgroundColor;
  });
  var Text = styled.div(_templateObject2(), function (props) {
    return props.isWin ? 'flex-start' : 'center';
  });
  var Controls = styled.div(_templateObject3());
  var ButtonMac = styled.button(_templateObject4());
  var ButtonMacMaximize = styled(ButtonMac)(_templateObject5(), function (props) {
    return props.showMaximize ? '0' : '1';
  }, function (props) {
    return props.showMaximize ? 'none' : 'block';
  }, function (props) {
    return props.showMaximize ? '1' : '0';
  }, function (props) {
    return props.showMaximize ? 'block' : 'none';
  });
  var ButtonMacClose = styled(ButtonMac)(_templateObject6());
  var ButtonMacMinimize = styled(ButtonMac)(_templateObject7());
  var ButtonWindows = styled.button(_templateObject8());
  var CloseButtonWindows = styled(ButtonWindows)(_templateObject9());
  
  var _window$require = window.require('electron'),
      remote = _window$require.remote;
  
  var KEY_ALT = 18;
  var currentWindow = remote.getCurrentWindow();
  
  var Titlebar =
  /*#__PURE__*/
  function (_PureComponent) {
    _inherits(Titlebar, _PureComponent);
  
    function Titlebar() {
      var _getPrototypeOf2;
  
      var _this;
  
      _classCallCheck(this, Titlebar);
  
      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }
  
      _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Titlebar)).call.apply(_getPrototypeOf2, [this].concat(args)));
  
      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
        keyAltDown: false,
        isMaximized: currentWindow.isMaximized()
      });
  
      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "isWindows", window.clientInformation.platform === 'Win32');
  
      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleClose", function () {
        currentWindow.close();
      });
  
      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleKeyDown", function (e) {
        if (e.keyCode === KEY_ALT) {
          _this.setState({
            keyAltDown: true
          });
        }
      });
  
      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleKeyUp", function (e) {
        if (e.keyCode === KEY_ALT) {
          _this.setState({
            keyAltDown: false
          });
        }
      });
  
      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleMinimize", function () {
        currentWindow.minimize();
      });
  
      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleMaximize", function () {
        if (_this.isWindows) {
          if (currentWindow.isMaximizable()) {
            if (currentWindow.isMaximized()) {
              currentWindow.unmaximize();
  
              _this.setState({
                isMaximized: false
              });
            } else {
              currentWindow.maximize();
  
              _this.setState({
                isMaximized: true
              });
            }
          }
        } else {
          var keyAltDown = _this.state.keyAltDown;
  
          if (keyAltDown) {
            if (currentWindow.isMaximizable()) {
              if (currentWindow.isMaximized()) {
                currentWindow.unmaximize();
              } else {
                currentWindow.maximize();
              }
            }
          } else {
            currentWindow.setFullScreen(!currentWindow.isFullScreen());
          }
        }
      });
  
      return _this;
    }
  
    _createClass(Titlebar, [{
      key: "componentDidMount",
      value: function componentDidMount() {
        if (!this.isWindows) {
          document.body.addEventListener('keydown', this.handleKeyDown);
          document.body.addEventListener('keyup', this.handleKeyUp);
        }
      }
    }, {
      key: "componentWillUnmount",
      value: function componentWillUnmount() {
        if (!this.isWindows) {
          document.body.removeEventListener('keydown', this.handleKeyDown);
          document.body.removeEventListener('keyup', this.handleKeyUp);
        }
      }
    }, {
      key: "renderMac",
      value: function renderMac() {
        var keyAltDown = this.state.keyAltDown;
        return React.createElement(Controls, {
          key: "title-controls"
        }, React.createElement(ButtonMacClose, {
          tabIndex: "-1",
          onClick: this.handleClose
        }, React.createElement("svg", {
          x: "0px",
          y: "0px",
          viewBox: "0 0 6.4 6.4"
        }, React.createElement("polygon", {
          fill: "#4d0000",
          points: "6.4,0.8 5.6,0 3.2,2.4 0.8,0 0,0.8 2.4,3.2 0,5.6 0.8,6.4 3.2,4 5.6,6.4 6.4,5.6 4,3.2"
        }))), React.createElement(ButtonMacMinimize, {
          tabIndex: "-1",
          onClick: this.handleMinimize
        }, React.createElement("svg", {
          x: "0px",
          y: "0px",
          viewBox: "0 0 8 1.1"
        }, React.createElement("rect", {
          fill: "#995700",
          width: "8",
          height: "1.1"
        }))), React.createElement(ButtonMacMaximize, {
          showMaximize: keyAltDown,
          tabIndex: "-1",
          onClick: this.handleMaximize
        }, React.createElement("svg", {
          className: "fullscreen-svg",
          x: "0px",
          y: "0px",
          viewBox: "0 0 6 5.9"
        }, React.createElement("path", {
          fill: "#006400",
          d: "M5.4,0h-4L6,4.5V0.6C5.7,0.6,5.3,0.3,5.4,0z"
        }), React.createElement("path", {
          fill: "#006400",
          d: "M0.6,5.9h4L0,1.4l0,3.9C0.3,5.3,0.6,5.6,0.6,5.9z"
        })), React.createElement("svg", {
          className: "maximize-svg",
          x: "0px",
          y: "0px",
          viewBox: "0 0 7.9 7.9"
        }, React.createElement("polygon", {
          fill: "#006400",
          points: "7.9,4.5 7.9,3.4 4.5,3.4 4.5,0 3.4,0 3.4,3.4 0,3.4 0,4.5 3.4,4.5 3.4,7.9 4.5,7.9 4.5,4.5"
        }))));
      }
    }, {
      key: "renderWindows",
      value: function renderWindows() {
        var isMaximized = this.state.isMaximized;
        return React.createElement(Controls, {
          key: "title-controls"
        }, React.createElement(ButtonWindows, {
          "aria-label": "minimize",
          tabIndex: "-1",
          onClick: this.handleMinimize
        }, React.createElement("svg", {
          version: "1.1",
          "aria-hidden": "true",
          width: "10",
          height: "10"
        }, React.createElement("path", {
          d: "M 0,5 10,5 10,6 0,6 Z"
        }))), React.createElement(ButtonWindows, {
          "aria-label": "maximize",
          tabIndex: "-1",
          onClick: this.handleMaximize
        }, isMaximized ? React.createElement("svg", {
          version: "1.1",
          "aria-hidden": "true",
          width: "10",
          height: "10"
        }, React.createElement("path", {
          d: "m 2,1e-5 0,2 -2,0 0,8 8,0 0,-2 2,0 0,-8 z m 1,1 6,0 0,6 -1,0 0,-5 -5,0 z m -2,2 6,0 0,6 -6,0 z"
        })) : React.createElement("svg", {
          version: "1.1",
          "aria-hidden": "true",
          width: "10",
          height: "10"
        }, React.createElement("path", {
          d: "M 0,0 0,10 10,10 10,0 Z M 1,1 9,1 9,9 1,9 Z"
        }))), React.createElement(CloseButtonWindows, {
          "aria-label": "close",
          tabIndex: "-1",
          onClick: this.handleClose
        }, React.createElement("svg", {
          "aria-hidden": "true",
          version: "1.1",
          width: "10",
          height: "10"
        }, React.createElement("path", {
          d: "M 0,0 0,0.7 4.3,5 0,9.3 0,10 0.7,10 5,5.7 9.3,10 10,10 10,9.3 5.7,5 10,0.7 10,0 9.3,0 5,4.3 0.7,0 Z"
        }))));
      }
    }, {
      key: "render",
      value: function render() {
        var _this$props = this.props,
            backgroundColor = _this$props.backgroundColor,
            title = _this$props.title;
        var elements = [];
  
        if (this.isWindows) {
          elements.push(React.createElement(Text, {
            key: "title-text",
            isWin: this.isWindows
          }, title));
          elements.push(this.renderWindows());
        } else {
          elements.push(this.renderMac());
          elements.push(React.createElement(Text, {
            key: "title-text",
            isWin: this.isWindows
          }, title));
        }
  
        return React.createElement(Container, {
          isWin: this.isWindows,
          backgroundColor: backgroundColor
        }, elements);
      }
    }]);
  
    return Titlebar;
  }(PureComponent);
  
  Titlebar.defaultProps = {
    title: null,
    backgroundColor: '#000000'
  };
  Titlebar.propTypes = {
    title: propTypes.string,
    backgroundColor: propTypes.string
  };
  
  export default Titlebar;
  //# sourceMappingURL=index.es.js.map
  