@instructure/ui-responsive 11.7.3 → 11.7.4-pr-snapshot-1781695314229

package/lib/Responsive/v1/index.js

@@ -1,167 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Responsive = void 0;
-var _react = require("react");
-var _deepEqual = require("@instructure/ui-utils/lib/deepEqual.js");
-var _console = require("@instructure/console");
-var _addElementQueryMatchListener = require("../../utils/v1/addElementQueryMatchListener");
-var _addMediaQueryMatchListener = require("../../utils/v1/addMediaQueryMatchListener");
-var _findDOMNode = require("@instructure/ui-dom-utils/lib/findDOMNode.js");
-var _props = require("./props");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-/**
----
-category: components
----
-
-**/class Responsive extends _react.Component {
-  static displayName = "Responsive";
-  static allowedProps = _props.allowedProps;
-  static defaultProps = {
-    children: null,
-    match: 'element',
-    props: null
-  };
-  ref = null;
-  _matchListener = null;
-  state = {
-    matches: [],
-    hasRendered: false
-  };
-  handleRef = el => {
-    const {
-      elementRef
-    } = this.props;
-    this.ref = el;
-    if (typeof elementRef === 'function') {
-      elementRef(el);
-    }
-  };
-  componentDidMount() {
-    (0, _console.logError)(!!(this.props.render || this.props.children), `[Responsive] must have either a \`render\` prop or \`children\` prop.`);
-    if (this.props.match === 'element') {
-      // Because Responsive renders an empty div initially, it always needs to
-      // re-render with the children provided. If there are no matches the match
-      // listener won't trigger an update, so we handle this update explicitly.
-      const initialMatches = (0, _addElementQueryMatchListener.updateElementMatches)(this.props.query, this) || [];
-      this.setState({
-        matches: initialMatches,
-        hasRendered: true
-      });
-    } else {
-      this.setState({
-        hasRendered: true
-      });
-    }
-    this._matchListener = this.addMatchListener(this.props.query, this.updateMatches);
-  }
-  componentWillUnmount() {
-    this.removeMatchListener();
-  }
-  componentDidUpdate(prevProps) {
-    const {
-      match,
-      query
-    } = this.props;
-    if (match !== prevProps.match || !(0, _deepEqual.deepEqual)(query, prevProps.query)) {
-      this.removeMatchListener();
-      this._matchListener = this.addMatchListener(query, this.updateMatches, match);
-    }
-  }
-  addMatchListener(query, updateMatches, match = this.props.match) {
-    const matchListener = match === 'element' ? _addElementQueryMatchListener.addElementQueryMatchListener : _addMediaQueryMatchListener.addMediaQueryMatchListener;
-    return matchListener(query, () => (0, _findDOMNode.findDOMNode)(this), updateMatches);
-  }
-  removeMatchListener() {
-    if (this._matchListener) {
-      this._matchListener.remove();
-    }
-  }
-  updateMatches = (matches, cb) => {
-    this.setState({
-      matches
-    }, () => {
-      if (typeof cb === 'function') {
-        cb();
-      }
-    });
-  };
-  mergeProps(matches, props) {
-    if (!props) {
-      return null;
-    }
-    const mergedProps = {};
-    matches.forEach(match => {
-      const matchProps = props[match];
-
-      // Iterate over the props for the current match. If that the prop is
-      // already in `mergedProps` that means that the prop was defined for
-      // multiple breakpoints, and more than one of those breakpoints is being
-      // currently applied so we log a warning.
-      Object.keys(matchProps).forEach(prop => {
-        const currentValue = mergedProps[prop];
-        (0, _console.warn)(!(prop in mergedProps), [`[Responsive] The prop \`${prop}\` is defined at 2 or more breakpoints`, `which are currently applied at the same time. Its current value, \`${currentValue}\`,`, `will be overwritten as \`${matchProps[prop]}\`.`].join(' '));
-        mergedProps[prop] = matchProps[prop];
-      });
-    });
-    return mergedProps;
-  }
-  render() {
-    const {
-      matches,
-      hasRendered
-    } = this.state;
-    const {
-      props,
-      render,
-      children,
-      display
-    } = this.props;
-    let renderFunc;
-    // Responsive needs to render once to measure the dom and obtain matches.
-    // Calling the render prop on this initial render can cause visual side
-    // effects and is slower than rendering an empty div.
-    if (hasRendered) {
-      // Render via the children or render method, whichever is supplied. If
-      // both are supplied, give preference to children.
-      renderFunc = children || render;
-    }
-    return (0, _jsxRuntime.jsx)("div", {
-      ref: this.handleRef,
-      style: {
-        display
-      },
-      "data-cid": this.props['data-cid'],
-      children: renderFunc && renderFunc(this.mergeProps(matches, props), matches)
-    });
-  }
-}
-exports.Responsive = Responsive;
-var _default = exports.default = Responsive;

package/lib/exports/a.js

@@ -1,47 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Responsive", {
-  enumerable: true,
-  get: function () {
-    return _v.Responsive;
-  }
-});
-Object.defineProperty(exports, "ResponsivePropTypes", {
-  enumerable: true,
-  get: function () {
-    return _ResponsivePropTypes.ResponsivePropTypes;
-  }
-});
-Object.defineProperty(exports, "addElementQueryMatchListener", {
-  enumerable: true,
-  get: function () {
-    return _addElementQueryMatchListener.addElementQueryMatchListener;
-  }
-});
-Object.defineProperty(exports, "addMediaQueryMatchListener", {
-  enumerable: true,
-  get: function () {
-    return _addMediaQueryMatchListener.addMediaQueryMatchListener;
-  }
-});
-Object.defineProperty(exports, "jsonToMediaQuery", {
-  enumerable: true,
-  get: function () {
-    return _jsonToMediaQuery.jsonToMediaQuery;
-  }
-});
-Object.defineProperty(exports, "parseQuery", {
-  enumerable: true,
-  get: function () {
-    return _parseQuery.parseQuery;
-  }
-});
-var _v = require("../Responsive/v1");
-var _addElementQueryMatchListener = require("../utils/v1/addElementQueryMatchListener");
-var _addMediaQueryMatchListener = require("../utils/v1/addMediaQueryMatchListener");
-var _parseQuery = require("../utils/v1/parseQuery");
-var _jsonToMediaQuery = require("../utils/v1/jsonToMediaQuery");
-var _ResponsivePropTypes = require("../utils/v1/ResponsivePropTypes");

package/lib/package.json

@@ -1 +0,0 @@
-{"type":"commonjs"}

package/lib/utils/v1/QueryType.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

package/lib/utils/v1/ResponsivePropTypes.js

@@ -1,69 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ResponsivePropTypes = void 0;
-var _jsonToMediaQuery = require("./jsonToMediaQuery");
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-const ResponsivePropTypes = exports.ResponsivePropTypes = {
-  /**
-   * Verify that the given prop is a properly formatted query object
-   * with exactly one key and one corresponding valid value of type
-   * string or number. The object key should be one of `minWidth`,
-   * `maxWidth`, `minHeight`, or `maxHeight`. Note that key values
-   * should be camel cased.
-   *
-   *
-   * The following are examples of valid query objects:
-   *
-   * ```js
-   * { minWidth: 350 }
-   * { maxHeight: '400px' }
-   * { maxWidth: '20rem' }
-   * ```
-   *
-   * The following are examples of invalid query objects:
-   *
-   * ```js
-   * { minwidth: 300 } // should be minWidth (case sensitive)
-   * { minHeight: 200, maxHeight: 300 } // should consist of exactly one key
-   * ```
-   * @param {Object} props - object containing the component props
-   * @param {string} propName - name of the given prop
-   * @param {string} componentName - name of the component
-   * @returns {Error} if prop is an invalid query
-   */
-  validQuery(props, propName, componentName) {
-    try {
-      (0, _jsonToMediaQuery.jsonToMediaQuery)(props[propName]);
-      return null;
-    } catch (e) {
-      return new Error(`Invalid query prop supplied to \`${componentName}\`. ${e.message}`);
-    }
-  }
-};
-var _default = exports.default = ResponsivePropTypes;

package/lib/utils/v1/addElementQueryMatchListener.js

@@ -1,166 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.addElementQueryMatchListener = void 0;
-exports.updateElementMatches = updateElementMatches;
-var _parseQuery = require("./parseQuery");
-var _findDOMNode = require("@instructure/ui-dom-utils/lib/findDOMNode.js");
-var _getBoundingClientRect = require("@instructure/ui-dom-utils/lib/getBoundingClientRect.js");
-var _debounce = require("@instructure/debounce");
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-/**
- * ---
- * category: utilities/layout
- * ---
- * Given an object of named queries, listens for changes in the
- * element size and notifies which queries match via a function
- * callback. The callback method is only called when the query
- * matches change, not on all element resizes. (If you are looking
- * to call a method on all element resizes use
- * [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) instead)
- *
- *
- * This function shares an interface with
- * [addMediaQueryMatchListener](addMediaQueryMatchListener)
- * so that they can be used interchangeably.
- *
- * The [Responsive](Responsive) component with the `match` prop
- * set to `element` utilizes this function. This is a low level
- * utility method and, in most cases, [Responsive](Responsive)
- * should be used instead.
- *
- * ```js-code
- * class MyComponent extends Component {
- *   state = {
- *     matches: []
- *   }
- *
- *   _listener = null
- *
- *   componentDidMount () {
- *     const query = {myFirstQuery: { minWidth: 100 }, mySecondQuery: { maxHeight: '30rem'}}
- *     const el = findDOMNode(this)
- *
- *     this._listener = addElementQueryMatchListener(query, el, this.updateMatches)
- *   }
- *
- *   componentWillUnmount () {
- *     if (this._listener) {
- *       this._listener.remove()
- *     }
- *   }
- *
- *   updateMatches = (matches) => {
- *     this.setState({ matches })
- *   }
- *   ...
- * }
- * ```
- * @module addElementQueryMatchListener
- * @param {Object} query - object consisting of names and query objects
- * @param {Node|Window|React.ReactElement|React.Component|function} el - a DOM node or a function returning a DOM node
- * @param {function} cb - called with an array of the names of the currently
- * matching queries whenever a matching query changes
- * @returns {function} remove() function to call to remove the listener
- */
-const addElementQueryMatchListener = (query, el, cb) => {
-  const node = typeof el === 'function' ? el() : el;
-  const {
-    width,
-    height
-  } = (0, _getBoundingClientRect.getBoundingClientRect)(node);
-  let matches = [];
-  const update = size => {
-    const newMatches = updateElementMatches(query, node, matches, size);
-    if (newMatches) {
-      matches = newMatches;
-      cb(matches);
-    }
-    return;
-  };
-  const debounced = (0, _debounce.debounce)(update, 100, {
-    leading: false,
-    trailing: true
-  });
-  const elementResizeListener = new ResizeObserver(entries => {
-    for (const entry of entries) {
-      const {
-        width: newWidth,
-        height: newHeight
-      } = entry.contentRect;
-      if (width !== newWidth) {
-        debounced({
-          width: newWidth,
-          height: newHeight
-        });
-      }
-    }
-  });
-  elementResizeListener.observe(node);
-  update({
-    width,
-    height
-  });
-  return {
-    remove() {
-      if (elementResizeListener) {
-        elementResizeListener.disconnect();
-      }
-      if (debounced) {
-        debounced.cancel();
-      }
-    }
-  };
-};
-exports.addElementQueryMatchListener = addElementQueryMatchListener;
-function updateElementMatches(query, el, matches = [], size) {
-  const node = (0, _findDOMNode.findDOMNode)(el);
-  let {
-    width,
-    height
-  } = size || (0, _getBoundingClientRect.getBoundingClientRect)(node);
-
-  // round dimensions to make sure matcher can match queries with integer values
-  width = Math.floor(width);
-  height = Math.floor(height);
-  const matchingQueries = (0, _parseQuery.parseQuery)(query, node)({
-    width,
-    height
-  });
-  const newMatches = Object.keys(matchingQueries).filter(key => matchingQueries[key]).map(key => key);
-
-  // only return matches if they have changed
-  if (matches.length !== newMatches.length) {
-    return newMatches;
-  }
-  if (matches.filter(match => newMatches.indexOf(match) === -1).length > 0) {
-    return newMatches;
-  }
-  return null;
-}
-var _default = exports.default = addElementQueryMatchListener;

package/lib/utils/v1/addMediaQueryMatchListener.js

@@ -1,114 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.addMediaQueryMatchListener = void 0;
-var _matchMedia = require("@instructure/ui-dom-utils/lib/matchMedia.js");
-var _jsonToMediaQuery = require("./jsonToMediaQuery");
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-/**
- * ---
- * category: utilities/layout
- * ---
- * Given an object of named queries, listens for changes in the
- * window size and notifies which queries match via a function
- * callback. The callback method is only called when the query
- * matches change, not on all window resizes.
- *
- * This function shares an interface with
- * [addElementQueryMatchListener](addElementQueryMatchListener)
- * so that they can be used interchangeably.
- *
- * The [Responsive](Responsive) component with the `match` prop
- * set to `media` utilizes this function. This is a low level utility
- * method and, in most cases, [Responsive](Responsive) should be
- * used instead.
- *
- * ```js-code
- * class MyComponent extends Component {
- *   state = {
- *     matches: []
- *   }
- *
- *   _listener = null
- *
- *   componentDidMount () {
- *     const query = {myFirstQuery: { minWidth: 100 }, mySecondQuery: { maxHeight: '30rem'}}
- *     const el = findDOMNode(this)
- *
- *     this._listener = addMediaQueryMatchListener(query, el, this.updateMatches)
- *   }
- *
- *   componentWillUnmount () {
- *     if (this._listener) {
- *       this._listener.remove()
- *     }
- *   }
- *
- *   updateMatches = (matches) => {
- *     this.setState({ matches })
- *   }
- *   ...
- * }
- * ```
- * @module addMediaQueryMatchListener
- * @param {Object} query - object consisting of names and query objects
- * @param {Node|Window|React.ReactElement|React.Component|function} el - a DOM node or a function returning a DOM node
- * @param {function} cb - called with an array of the names of the currently matching queries whenever a matching query changes
- * @param {object} matchMedia - called with an array of the names of the currently matching queries whenever a matching query changes
- * @returns {function} remove() function to call to remove the listener
- */
-const addMediaQueryMatchListener = (query, el, cb, matchMedia = _matchMedia.matchMedia) => {
-  const node = typeof el === 'function' ? el() : el;
-  const updateMediaMatches = mediaQueryLists => {
-    const matches = Object.keys(mediaQueryLists).filter(key => mediaQueryLists[key].matches).map(key => key);
-    cb(matches);
-  };
-  const mediaQueryLists = {};
-  const listenerCallback = () => {
-    updateMediaMatches(mediaQueryLists);
-  };
-  Object.keys(query).forEach(key => {
-    const mediaQueryList = matchMedia((0, _jsonToMediaQuery.jsonToMediaQuery)(query[key], node), node);
-    if (mediaQueryList) {
-      mediaQueryList.addListener(listenerCallback);
-      mediaQueryLists[key] = mediaQueryList;
-    }
-  });
-  updateMediaMatches(mediaQueryLists);
-  return {
-    remove() {
-      if (mediaQueryLists) {
-        Object.keys(mediaQueryLists).forEach(key => {
-          mediaQueryLists[key].removeListener(listenerCallback);
-        });
-      }
-    }
-  };
-};
-exports.addMediaQueryMatchListener = addMediaQueryMatchListener;
-var _default = exports.default = addMediaQueryMatchListener;

package/lib/utils/v1/jsonToMediaQuery.js

@@ -1,86 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-exports.jsonToMediaQuery = jsonToMediaQuery;
-var _px = require("@instructure/ui-utils/lib/px.js");
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-/**
- * ---
- * category: utilities/layout
- * ---
- *
- * Given a valid json query object, converts it to a standard media query
- * string. Valid queries should be an object consisting of condition:breakpoint
- * pairs with the following condition types `minWidth`, `maxWidth`, `minHeight`,
- * or `maxHeight` where breakpoint value is either a string or a number.
- *
- * Example input
- * ```js-code
- * { minWidth: 350, maxWidth: 600 }
- * ```
- * Example output
- * ```js-code
- * '(min-width: 350px) and (max-Width: 600px)'
- * ```
- * @module jsonToMediaQuery
- * @param {Object} query - an object consisting of the query type and value
- * @param {Document | Window | Node | React.ReactElement | React.Component} el - component or DOM node which will be passed to the pixel conversion if the unit type is `em`
- * @returns {string} media query string
- */
-function jsonToMediaQuery(query, el) {
-  // Ensure the query is of the correct form
-  const keys = Object.keys(query);
-  if (keys.length > 4) {
-    throw new Error('Expected maximum 4 keys in query object.');
-  }
-  let mediaQuery = '';
-  const QUERY_SEPARATOR = 'and';
-  for (const key of keys) {
-    const validKeys = ['minHeight', 'maxHeight', 'minWidth', 'maxWidth'];
-    if (validKeys.indexOf(key) === -1) {
-      throw new Error(`Invalid key \`${key}\` in query object. Valid keys should consist of one of the following: ` + `${validKeys.join(', ')} (case sensitive)`);
-    }
-    const value = query[key];
-
-    // TS catches this, but we want to throw error in runtime too
-    if (typeof value !== 'string' && typeof value !== 'number') {
-      throw new Error('The value of the query object must be a string or number.');
-    }
-    if (!value) {
-      throw new Error('No value supplied for query object');
-    }
-    mediaQuery += `(${hyphenateQueryKey(key)}: ${(0, _px.px)(value, el)}px) ${QUERY_SEPARATOR} `;
-  }
-  return mediaQuery.slice(0, -QUERY_SEPARATOR.length - 2);
-}
-function hyphenateQueryKey(key) {
-  const lowerCaseKey = key.toLowerCase();
-  return lowerCaseKey.slice(0, 3) + '-' + lowerCaseKey.slice(3);
-}
-var _default = exports.default = jsonToMediaQuery;