@mui/material 6.0.0-alpha.1 → 6.0.0-alpha.3

package/legacy/Grow/Grow.js

@@ -1,253 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import useTimeout from '@mui/utils/useTimeout';
-import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
-import { Transition } from 'react-transition-group';
-import useTheme from '../styles/useTheme';
-import { getTransitionProps, reflow } from '../transitions/utils';
-import useForkRef from '../utils/useForkRef';
-import { jsx as _jsx } from "react/jsx-runtime";
-function getScale(value) {
-  return "scale(".concat(value, ", ").concat(Math.pow(value, 2), ")");
-}
-var styles = {
-  entering: {
-    opacity: 1,
-    transform: getScale(1)
-  },
-  entered: {
-    opacity: 1,
-    transform: 'none'
-  }
-};
-
-/*
- TODO v6: remove
- Conditionally apply a workaround for the CSS transition bug in Safari 15.4 / WebKit browsers.
- */
-var isWebKit154 = typeof navigator !== 'undefined' && /^((?!chrome|android).)*(safari|mobile)/i.test(navigator.userAgent) && /(os |version\/)15(.|_)4/i.test(navigator.userAgent);
-
-/**
- * The Grow transition is used by the [Tooltip](/material-ui/react-tooltip/) and
- * [Popover](/material-ui/react-popover/) components.
- * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
- */
-var Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
-  var addEndListener = props.addEndListener,
-    _props$appear = props.appear,
-    appear = _props$appear === void 0 ? true : _props$appear,
-    _children = props.children,
-    easing = props.easing,
-    inProp = props.in,
-    onEnter = props.onEnter,
-    onEntered = props.onEntered,
-    onEntering = props.onEntering,
-    onExit = props.onExit,
-    onExited = props.onExited,
-    onExiting = props.onExiting,
-    style = props.style,
-    _props$timeout = props.timeout,
-    timeout = _props$timeout === void 0 ? 'auto' : _props$timeout,
-    _props$TransitionComp = props.TransitionComponent,
-    TransitionComponent = _props$TransitionComp === void 0 ? Transition : _props$TransitionComp,
-    other = _objectWithoutProperties(props, ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"]);
-  var timer = useTimeout();
-  var autoTimeout = React.useRef();
-  var theme = useTheme();
-  var nodeRef = React.useRef(null);
-  var handleRef = useForkRef(nodeRef, _children.ref, ref);
-  var normalizedTransitionCallback = function normalizedTransitionCallback(callback) {
-    return function (maybeIsAppearing) {
-      if (callback) {
-        var node = nodeRef.current;
-
-        // onEnterXxx and onExitXxx callbacks have a different arguments.length value.
-        if (maybeIsAppearing === undefined) {
-          callback(node);
-        } else {
-          callback(node, maybeIsAppearing);
-        }
-      }
-    };
-  };
-  var handleEntering = normalizedTransitionCallback(onEntering);
-  var handleEnter = normalizedTransitionCallback(function (node, isAppearing) {
-    reflow(node); // So the animation always start from the start.
-    var _getTransitionProps = getTransitionProps({
-        style: style,
-        timeout: timeout,
-        easing: easing
-      }, {
-        mode: 'enter'
-      }),
-      transitionDuration = _getTransitionProps.duration,
-      delay = _getTransitionProps.delay,
-      transitionTimingFunction = _getTransitionProps.easing;
-    var duration;
-    if (timeout === 'auto') {
-      duration = theme.transitions.getAutoHeightDuration(node.clientHeight);
-      autoTimeout.current = duration;
-    } else {
-      duration = transitionDuration;
-    }
-    node.style.transition = [theme.transitions.create('opacity', {
-      duration: duration,
-      delay: delay
-    }), theme.transitions.create('transform', {
-      duration: isWebKit154 ? duration : duration * 0.666,
-      delay: delay,
-      easing: transitionTimingFunction
-    })].join(',');
-    if (onEnter) {
-      onEnter(node, isAppearing);
-    }
-  });
-  var handleEntered = normalizedTransitionCallback(onEntered);
-  var handleExiting = normalizedTransitionCallback(onExiting);
-  var handleExit = normalizedTransitionCallback(function (node) {
-    var _getTransitionProps2 = getTransitionProps({
-        style: style,
-        timeout: timeout,
-        easing: easing
-      }, {
-        mode: 'exit'
-      }),
-      transitionDuration = _getTransitionProps2.duration,
-      delay = _getTransitionProps2.delay,
-      transitionTimingFunction = _getTransitionProps2.easing;
-    var duration;
-    if (timeout === 'auto') {
-      duration = theme.transitions.getAutoHeightDuration(node.clientHeight);
-      autoTimeout.current = duration;
-    } else {
-      duration = transitionDuration;
-    }
-    node.style.transition = [theme.transitions.create('opacity', {
-      duration: duration,
-      delay: delay
-    }), theme.transitions.create('transform', {
-      duration: isWebKit154 ? duration : duration * 0.666,
-      delay: isWebKit154 ? delay : delay || duration * 0.333,
-      easing: transitionTimingFunction
-    })].join(',');
-    node.style.opacity = 0;
-    node.style.transform = getScale(0.75);
-    if (onExit) {
-      onExit(node);
-    }
-  });
-  var handleExited = normalizedTransitionCallback(onExited);
-  var handleAddEndListener = function handleAddEndListener(next) {
-    if (timeout === 'auto') {
-      timer.start(autoTimeout.current || 0, next);
-    }
-    if (addEndListener) {
-      // Old call signature before `react-transition-group` implemented `nodeRef`
-      addEndListener(nodeRef.current, next);
-    }
-  };
-  return /*#__PURE__*/_jsx(TransitionComponent, _extends({
-    appear: appear,
-    in: inProp,
-    nodeRef: nodeRef,
-    onEnter: handleEnter,
-    onEntered: handleEntered,
-    onEntering: handleEntering,
-    onExit: handleExit,
-    onExited: handleExited,
-    onExiting: handleExiting,
-    addEndListener: handleAddEndListener,
-    timeout: timeout === 'auto' ? null : timeout
-  }, other, {
-    children: function children(state, childProps) {
-      return /*#__PURE__*/React.cloneElement(_children, _extends({
-        style: _extends({
-          opacity: 0,
-          transform: getScale(0.75),
-          visibility: state === 'exited' && !inProp ? 'hidden' : undefined
-        }, styles[state], style, _children.props.style),
-        ref: handleRef
-      }, childProps));
-    }
-  }));
-});
-process.env.NODE_ENV !== "production" ? Grow.propTypes /* remove-proptypes */ = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * Add a custom transition end trigger. Called with the transitioning DOM
-   * node and a done callback. Allows for more fine grained transition end
-   * logic. Note: Timeouts are still used as a fallback if provided.
-   */
-  addEndListener: PropTypes.func,
-  /**
-   * Perform the enter transition when it first mounts if `in` is also `true`.
-   * Set this to `false` to disable this behavior.
-   * @default true
-   */
-  appear: PropTypes.bool,
-  /**
-   * A single child content element.
-   */
-  children: elementAcceptingRef.isRequired,
-  /**
-   * The transition timing function.
-   * You may specify a single easing or a object containing enter and exit values.
-   */
-  easing: PropTypes.oneOfType([PropTypes.shape({
-    enter: PropTypes.string,
-    exit: PropTypes.string
-  }), PropTypes.string]),
-  /**
-   * If `true`, the component will transition in.
-   */
-  in: PropTypes.bool,
-  /**
-   * @ignore
-   */
-  onEnter: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onEntered: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onEntering: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onExit: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onExited: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onExiting: PropTypes.func,
-  /**
-   * @ignore
-   */
-  style: PropTypes.object,
-  /**
-   * The duration for the transition, in milliseconds.
-   * You may specify a single timeout for all transitions, or individually with an object.
-   *
-   * Set to 'auto' to automatically calculate transition time based on height.
-   * @default 'auto'
-   */
-  timeout: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.shape({
-    appear: PropTypes.number,
-    enter: PropTypes.number,
-    exit: PropTypes.number
-  })])
-} : void 0;
-Grow.muiSupportAuto = true;
-export default Grow;

package/legacy/Grow/index.js

@@ -1,3 +0,0 @@
-'use client';
-
-export { default } from './Grow';

package/legacy/Hidden/Hidden.js

@@ -1,147 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import HiddenJs from './HiddenJs';
-import HiddenCss from './HiddenCss';
-
-/**
- * Responsively hides children based on the selected implementation.
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-function Hidden(props) {
-  var _props$implementation = props.implementation,
-    implementation = _props$implementation === void 0 ? 'js' : _props$implementation,
-    _props$lgDown = props.lgDown,
-    lgDown = _props$lgDown === void 0 ? false : _props$lgDown,
-    _props$lgUp = props.lgUp,
-    lgUp = _props$lgUp === void 0 ? false : _props$lgUp,
-    _props$mdDown = props.mdDown,
-    mdDown = _props$mdDown === void 0 ? false : _props$mdDown,
-    _props$mdUp = props.mdUp,
-    mdUp = _props$mdUp === void 0 ? false : _props$mdUp,
-    _props$smDown = props.smDown,
-    smDown = _props$smDown === void 0 ? false : _props$smDown,
-    _props$smUp = props.smUp,
-    smUp = _props$smUp === void 0 ? false : _props$smUp,
-    _props$xlDown = props.xlDown,
-    xlDown = _props$xlDown === void 0 ? false : _props$xlDown,
-    _props$xlUp = props.xlUp,
-    xlUp = _props$xlUp === void 0 ? false : _props$xlUp,
-    _props$xsDown = props.xsDown,
-    xsDown = _props$xsDown === void 0 ? false : _props$xsDown,
-    _props$xsUp = props.xsUp,
-    xsUp = _props$xsUp === void 0 ? false : _props$xsUp,
-    other = _objectWithoutProperties(props, ["implementation", "lgDown", "lgUp", "mdDown", "mdUp", "smDown", "smUp", "xlDown", "xlUp", "xsDown", "xsUp"]);
-  if (implementation === 'js') {
-    return /*#__PURE__*/_jsx(HiddenJs, _extends({
-      lgDown: lgDown,
-      lgUp: lgUp,
-      mdDown: mdDown,
-      mdUp: mdUp,
-      smDown: smDown,
-      smUp: smUp,
-      xlDown: xlDown,
-      xlUp: xlUp,
-      xsDown: xsDown,
-      xsUp: xsUp
-    }, other));
-  }
-  return /*#__PURE__*/_jsx(HiddenCss, _extends({
-    lgDown: lgDown,
-    lgUp: lgUp,
-    mdDown: mdDown,
-    mdUp: mdUp,
-    smDown: smDown,
-    smUp: smUp,
-    xlDown: xlDown,
-    xlUp: xlUp,
-    xsDown: xsDown,
-    xsUp: xsUp
-  }, other));
-}
-process.env.NODE_ENV !== "production" ? Hidden.propTypes /* remove-proptypes */ = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * The content of the component.
-   */
-  children: PropTypes.node,
-  /**
-   * Specify which implementation to use.  'js' is the default, 'css' works better for
-   * server-side rendering.
-   * @default 'js'
-   */
-  implementation: PropTypes.oneOf(['css', 'js']),
-  /**
-   * You can use this prop when choosing the `js` implementation with server-side rendering.
-   *
-   * As `window.innerWidth` is unavailable on the server,
-   * we default to rendering an empty component during the first mount.
-   * You might want to use a heuristic to approximate
-   * the screen width of the client browser screen width.
-   *
-   * For instance, you could be using the user-agent or the client-hints.
-   * https://caniuse.com/#search=client%20hint
-   */
-  initialWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-  /**
-   * If `true`, component is hidden on screens below (but not including) this size.
-   * @default false
-   */
-  lgDown: PropTypes.bool,
-  /**
-   * If `true`, component is hidden on screens this size and above.
-   * @default false
-   */
-  lgUp: PropTypes.bool,
-  /**
-   * If `true`, component is hidden on screens below (but not including) this size.
-   * @default false
-   */
-  mdDown: PropTypes.bool,
-  /**
-   * If `true`, component is hidden on screens this size and above.
-   * @default false
-   */
-  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']).isRequired)]),
-  /**
-   * If `true`, component is hidden on screens below (but not including) this size.
-   * @default false
-   */
-  smDown: PropTypes.bool,
-  /**
-   * If `true`, component is hidden on screens this size and above.
-   * @default false
-   */
-  smUp: PropTypes.bool,
-  /**
-   * If `true`, component is hidden on screens below (but not including) this size.
-   * @default false
-   */
-  xlDown: PropTypes.bool,
-  /**
-   * If `true`, component is hidden on screens this size and above.
-   * @default false
-   */
-  xlUp: PropTypes.bool,
-  /**
-   * If `true`, component is hidden on screens below (but not including) this size.
-   * @default false
-   */
-  xsDown: PropTypes.bool,
-  /**
-   * If `true`, component is hidden on screens this size and above.
-   * @default false
-   */
-  xsUp: PropTypes.bool
-} : void 0;
-export default Hidden;

package/legacy/Hidden/HiddenCss.js

@@ -1,168 +0,0 @@
-'use client';
-
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import * as React from 'react';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-import composeClasses from '@mui/utils/composeClasses';
-import capitalize from '../utils/capitalize';
-import styled from '../styles/styled';
-import useTheme from '../styles/useTheme';
-import { getHiddenCssUtilityClass } from './hiddenCssClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-var useUtilityClasses = function useUtilityClasses(ownerState) {
-  var classes = ownerState.classes,
-    breakpoints = ownerState.breakpoints;
-  var slots = {
-    root: ['root'].concat(_toConsumableArray(breakpoints.map(function (_ref) {
-      var breakpoint = _ref.breakpoint,
-        dir = _ref.dir;
-      return dir === 'only' ? "".concat(dir).concat(capitalize(breakpoint)) : "".concat(breakpoint).concat(capitalize(dir));
-    })))
-  };
-  return composeClasses(slots, getHiddenCssUtilityClass, classes);
-};
-var HiddenCssRoot = styled('div', {
-  name: 'PrivateHiddenCss',
-  slot: 'Root'
-})(function (_ref2) {
-  var theme = _ref2.theme,
-    ownerState = _ref2.ownerState;
-  var hidden = {
-    display: 'none'
-  };
-  return _extends({}, ownerState.breakpoints.map(function (_ref3) {
-    var breakpoint = _ref3.breakpoint,
-      dir = _ref3.dir;
-    if (dir === 'only') {
-      return _defineProperty({}, theme.breakpoints.only(breakpoint), hidden);
-    }
-    return dir === 'up' ? _defineProperty({}, theme.breakpoints.up(breakpoint), hidden) : _defineProperty({}, theme.breakpoints.down(breakpoint), hidden);
-  }).reduce(function (r, o) {
-    Object.keys(o).forEach(function (k) {
-      r[k] = o[k];
-    });
-    return r;
-  }, {}));
-});
-
-/**
- * @ignore - internal component.
- */
-function HiddenCss(props) {
-  var children = props.children,
-    className = props.className,
-    only = props.only,
-    other = _objectWithoutProperties(props, ["children", "className", "only"]);
-  var theme = useTheme();
-  if (process.env.NODE_ENV !== 'production') {
-    var unknownProps = Object.keys(other).filter(function (propName) {
-      var isUndeclaredBreakpoint = !theme.breakpoints.keys.some(function (breakpoint) {
-        return "".concat(breakpoint, "Up") === propName || "".concat(breakpoint, "Down") === propName;
-      });
-      return !['classes', 'theme', 'isRtl', 'sx'].includes(propName) && isUndeclaredBreakpoint;
-    });
-    if (unknownProps.length > 0) {
-      console.error("MUI: Unsupported props received by `<Hidden implementation=\"css\" />`: ".concat(unknownProps.join(', '), ". Did you forget to wrap this component in a ThemeProvider declaring these breakpoints?"));
-    }
-  }
-  var breakpoints = [];
-  for (var i = 0; i < theme.breakpoints.keys.length; i += 1) {
-    var breakpoint = theme.breakpoints.keys[i];
-    var breakpointUp = other["".concat(breakpoint, "Up")];
-    var breakpointDown = other["".concat(breakpoint, "Down")];
-    if (breakpointUp) {
-      breakpoints.push({
-        breakpoint: breakpoint,
-        dir: 'up'
-      });
-    }
-    if (breakpointDown) {
-      breakpoints.push({
-        breakpoint: breakpoint,
-        dir: 'down'
-      });
-    }
-  }
-  if (only) {
-    var onlyBreakpoints = Array.isArray(only) ? only : [only];
-    onlyBreakpoints.forEach(function (breakpoint) {
-      breakpoints.push({
-        breakpoint: breakpoint,
-        dir: 'only'
-      });
-    });
-  }
-  var ownerState = _extends({}, props, {
-    breakpoints: breakpoints
-  });
-  var classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(HiddenCssRoot, {
-    className: clsx(classes.root, className),
-    ownerState: ownerState,
-    children: children
-  });
-}
-process.env.NODE_ENV !== "production" ? HiddenCss.propTypes = {
-  /**
-   * The content of the component.
-   */
-  children: PropTypes.node,
-  /**
-   * @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 are hidden.
-   */
-  lgDown: PropTypes.bool,
-  /**
-   * If `true`, screens this size and up are hidden.
-   */
-  lgUp: PropTypes.bool,
-  /**
-   * If `true`, screens this size and down are hidden.
-   */
-  mdDown: PropTypes.bool,
-  /**
-   * If `true`, screens this size and up are 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 are hidden.
-   */
-  smDown: PropTypes.bool,
-  /**
-   * If `true`, screens this size and up are hidden.
-   */
-  smUp: PropTypes.bool,
-  /**
-   * If `true`, screens this size and down are hidden.
-   */
-  xlDown: PropTypes.bool,
-  /**
-   * If `true`, screens this size and up are hidden.
-   */
-  xlUp: PropTypes.bool,
-  /**
-   * If `true`, screens this size and down are hidden.
-   */
-  xsDown: PropTypes.bool,
-  /**
-   * If `true`, screens this size and up are hidden.
-   */
-  xsUp: PropTypes.bool
-} : void 0;
-export default HiddenCss;

package/legacy/Hidden/HiddenJs.js

@@ -1,123 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import exactProp from '@mui/utils/exactProp';
-import withWidth, { isWidthDown, isWidthUp } from './withWidth';
-import useTheme from '../styles/useTheme';
-
-/**
- * @ignore - internal component.
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-function HiddenJs(props) {
-  var children = props.children,
-    only = props.only,
-    width = props.width;
-  var theme = useTheme();
-  var visible = true;
-
-  // `only` check is faster to get out sooner if used.
-  if (only) {
-    if (Array.isArray(only)) {
-      for (var i = 0; i < only.length; i += 1) {
-        var breakpoint = only[i];
-        if (width === breakpoint) {
-          visible = false;
-          break;
-        }
-      }
-    } else if (only && width === only) {
-      visible = false;
-    }
-  }
-
-  // Allow `only` to be combined with other props. If already hidden, no need to check others.
-  if (visible) {
-    // determine visibility based on the smallest size up
-    for (var _i = 0; _i < theme.breakpoints.keys.length; _i += 1) {
-      var _breakpoint = theme.breakpoints.keys[_i];
-      var breakpointUp = props["".concat(_breakpoint, "Up")];
-      var breakpointDown = props["".concat(_breakpoint, "Down")];
-      if (breakpointUp && isWidthUp(_breakpoint, width) || breakpointDown && isWidthDown(_breakpoint, width)) {
-        visible = false;
-        break;
-      }
-    }
-  }
-  if (!visible) {
-    return null;
-  }
-  return /*#__PURE__*/_jsx(React.Fragment, {
-    children: children
-  });
-}
-process.env.NODE_ENV !== "production" ? HiddenJs.propTypes = {
-  /**
-   * The content of the component.
-   */
-  children: PropTypes.node,
-  /**
-   * If `true`, screens this size and down are hidden.
-   */
-  // eslint-disable-next-line react/no-unused-prop-types
-  lgDown: PropTypes.bool,
-  /**
-   * If `true`, screens this size and up are hidden.
-   */
-  // eslint-disable-next-line react/no-unused-prop-types
-  lgUp: PropTypes.bool,
-  /**
-   * If `true`, screens this size and down are hidden.
-   */
-  // eslint-disable-next-line react/no-unused-prop-types
-  mdDown: PropTypes.bool,
-  /**
-   * If `true`, screens this size and up are hidden.
-   */
-  // eslint-disable-next-line react/no-unused-prop-types
-  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 are hidden.
-   */
-  // eslint-disable-next-line react/no-unused-prop-types
-  smDown: PropTypes.bool,
-  /**
-   * If `true`, screens this size and up are hidden.
-   */
-  // eslint-disable-next-line react/no-unused-prop-types
-  smUp: PropTypes.bool,
-  /**
-   * @ignore
-   * width prop provided by withWidth decorator.
-   */
-  width: PropTypes.string.isRequired,
-  /**
-   * If `true`, screens this size and down are hidden.
-   */
-  // eslint-disable-next-line react/no-unused-prop-types
-  xlDown: PropTypes.bool,
-  /**
-   * If `true`, screens this size and up are hidden.
-   */
-  // eslint-disable-next-line react/no-unused-prop-types
-  xlUp: PropTypes.bool,
-  /**
-   * If `true`, screens this size and down are hidden.
-   */
-  // eslint-disable-next-line react/no-unused-prop-types
-  xsDown: PropTypes.bool,
-  /**
-   * If `true`, screens this size and up are hidden.
-   */
-  // eslint-disable-next-line react/no-unused-prop-types
-  xsUp: PropTypes.bool
-} : void 0;
-if (process.env.NODE_ENV !== 'production') {
-  process.env.NODE_ENV !== "production" ? HiddenJs.propTypes = exactProp(HiddenJs.propTypes) : void 0;
-}
-export default withWidth()(HiddenJs);