text: import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';
  import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized';
  import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
  import React from 'react';
  import PropTypes from 'prop-types';
  import invariant from 'invariant';
  import json2mq from 'json2mq';
  
  var MediaQueryList =
  /*#__PURE__*/
  function () {
    function MediaQueryList(targetWindow, query, listener) {
      var _this = this;
  
      this.nativeMediaQueryList = targetWindow.matchMedia(query);
      this.active = true; // Safari doesn't clear up listener with removeListener
      // when the listener is already waiting in the event queue.
      // Having an active flag to make sure the listener is not called
      // after we removeListener.
  
      this.cancellableListener = function () {
        _this.matches = _this.nativeMediaQueryList.matches;
  
        if (_this.active) {
          listener.apply(void 0, arguments);
        }
      };
  
      this.nativeMediaQueryList.addListener(this.cancellableListener);
      this.matches = this.nativeMediaQueryList.matches;
    }
  
    var _proto = MediaQueryList.prototype;
  
    _proto.cancel = function cancel() {
      this.active = false;
      this.nativeMediaQueryList.removeListener(this.cancellableListener);
    };
  
    return MediaQueryList;
  }();
  
  /**
   * Conditionally renders based on whether or not a media query matches.
   */
  
  var Media =
  /*#__PURE__*/
  function (_React$Component) {
    _inheritsLoose(Media, _React$Component);
  
    function Media() {
      var _this;
  
      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }
  
      _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
  
      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
        matches: _this.props.defaultMatches
      });
  
      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "updateMatches", function () {
        var matches = _this.mediaQueryList.matches;
  
        _this.setState({
          matches: matches
        });
  
        var onChange = _this.props.onChange;
  
        if (onChange) {
          onChange(matches);
        }
      });
  
      return _this;
    }
  
    var _proto = Media.prototype;
  
    _proto.componentWillMount = function componentWillMount() {
      if (typeof window !== 'object') return;
      var targetWindow = this.props.targetWindow || window;
      !(typeof targetWindow.matchMedia === 'function') ? process.env.NODE_ENV !== "production" ? invariant(false, '<Media targetWindow> does not support `matchMedia`.') : invariant(false) : void 0;
      var query = this.props.query;
      if (typeof query !== 'string') query = json2mq(query);
      this.mediaQueryList = new MediaQueryList(targetWindow, query, this.updateMatches);
      this.updateMatches();
    };
  
    _proto.componentWillUnmount = function componentWillUnmount() {
      this.mediaQueryList.cancel();
    };
  
    _proto.render = function render() {
      var _this$props = this.props,
          children = _this$props.children,
          render = _this$props.render;
      var matches = this.state.matches;
      return render ? matches ? render() : null : children ? typeof children === 'function' ? children(matches) : !Array.isArray(children) || children.length // Preact defaults to empty children array
      ? matches ? React.Children.only(children) : null : null : null;
    };
  
    return Media;
  }(React.Component);
  
  _defineProperty(Media, "defaultProps", {
    defaultMatches: true
  });
  
  if (process.env.NODE_ENV !== "production") {
    Media.propTypes = {
      defaultMatches: PropTypes.bool,
      query: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.arrayOf(PropTypes.object.isRequired)]).isRequired,
      render: PropTypes.func,
      children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
      targetWindow: PropTypes.object,
      onChange: PropTypes.func
    };
  }
  
  export default Media;
  