content: import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
  import React from 'react';
  import PropTypes from 'prop-types';
  import capitalize from '../utils/capitalize';
  import withStyles from '../styles/withStyles';
  import useTheme from '../styles/useTheme';
  
  const styles = theme => {
    const hidden = {
      display: 'none'
    };
    return theme.breakpoints.keys.reduce((acc, key) => {
      acc[`only${capitalize(key)}`] = {
        [theme.breakpoints.only(key)]: hidden
      };
      acc[`${key}Up`] = {
        [theme.breakpoints.up(key)]: hidden
      };
      acc[`${key}Down`] = {
        [theme.breakpoints.down(key)]: hidden
      };
      return acc;
    }, {});
  };
  /**
   * @ignore - internal component.
   */
  
  
  function HiddenCss(props) {
    const {
      children,
      classes,
      className,
      only
    } = props,
          other = _objectWithoutPropertiesLoose(props, ["children", "classes", "className", "only"]);
  
    const theme = useTheme();
  
    if (process.env.NODE_ENV !== 'production') {
      const unknownProps = Object.keys(other).filter(propName => {
        const isUndeclaredBreakpoint = !theme.breakpoints.keys.some(breakpoint => {
          return `${breakpoint}Up` === propName || `${breakpoint}Down` === propName;
        });
        return isUndeclaredBreakpoint;
      });
  
      if (unknownProps.length > 0) {
        console.error(`Material-UI: unsupported props received by \`<Hidden implementation="css" />\`: ${unknownProps.join(', ')}. Did you forget to wrap this component in a ThemeProvider declaring these breakpoints?`);
      }
    }
  
    const clsx = [];
  
    if (className) {
      clsx.push(className);
    }
  
    for (let i = 0; i < theme.breakpoints.keys.length; i += 1) {
      const breakpoint = theme.breakpoints.keys[i];
      const breakpointUp = props[`${breakpoint}Up`];
      const breakpointDown = props[`${breakpoint}Down`];
  
      if (breakpointUp) {
        clsx.push(classes[`${breakpoint}Up`]);
      }
  
      if (breakpointDown) {
        clsx.push(classes[`${breakpoint}Down`]);
      }
    }
  
    if (only) {
      const onlyBreakpoints = Array.isArray(only) ? only : [only];
      onlyBreakpoints.forEach(breakpoint => {
        clsx.push(classes[`only${capitalize(breakpoint)}`]);
      });
    }
  
    return React.createElement("div", {
      className: clsx.join(' ')
    }, children);
  }
  
  process.env.NODE_ENV !== "production" ? HiddenCss.propTypes = {
    /**
     * The content of the component.
     */
    children: PropTypes.node,
  
    /**
     * Override or extend the styles applied to the component.
     * See [CSS API](#css) below for more details.
     */
    classes: PropTypes.object.isRequired,
  
    /**
     * @ignore
     */
    className: PropTypes.string,
  
    /**
     * Specify which implementation to use.  'js' is the default, 'css' works better for
     * server-side rendering.
     */
    implementation: PropTypes.oneOf(['js', 'css']),
  
    /**
     * If `true`, screens this size and down will be hidden.
     */
    lgDown: PropTypes.bool,
  
    /**
     * If `true`, screens this size and up will be hidden.
     */
    lgUp: PropTypes.bool,
  
    /**
     * If `true`, screens this size and down will be hidden.
     */
    mdDown: PropTypes.bool,
  
    /**
     * If `true`, screens this size and up will be hidden.
     */
    mdUp: PropTypes.bool,
  
    /**
     * Hide the given breakpoint(s).
     */
    only: PropTypes.oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']), PropTypes.arrayOf(PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']))]),
  
    /**
     * If `true`, screens this size and down will be hidden.
     */
    smDown: PropTypes.bool,
  
    /**
     * If `true`, screens this size and up will be hidden.
     */
    smUp: PropTypes.bool,
  
    /**
     * If `true`, screens this size and down will be hidden.
     */
    xlDown: PropTypes.bool,
  
    /**
     * If `true`, screens this size and up will be hidden.
     */
    xlUp: PropTypes.bool,
  
    /**
     * If `true`, screens this size and down will be hidden.
     */
    xsDown: PropTypes.bool,
  
    /**
     * If `true`, screens this size and up will be hidden.
     */
    xsUp: PropTypes.bool
  } : void 0;
  export default withStyles(styles, {
    name: 'PrivateHiddenCss'
  })(HiddenCss);