How to use the @babel/runtime/helpers/extends function in @babel/runtime

} = _this$props,
          other = _objectWithoutProperties(_this$props, ["children", "onEnter", "onEntering", "onExit", "onExited", "style", "theme"]);

    let style = {}; // We use this state to handle the server-side rendering.
    // We don't know the width of the children ahead of time.
    // We need to render it.

    if (!this.props.in && !this.mounted) {
      style.visibility = 'hidden';
    }

    style = _objectSpread({}, style, styleProp, React.isValidElement(children) ? children.props.style : {});
    return React.createElement(EventListener, {
      target: "window",
      onResize: this.handleResize
    }, React.createElement(Transition, _extends({
      onEnter: this.handleEnter,
      onEntering: this.handleEntering,
      onExit: this.handleExit,
      onExited: this.handleExited,
      appear: true,
      style: style,
      ref: ref => {
        this.transitionRef = ReactDOM.findDOMNode(ref);
      }
    }, other), children));
  }

open,
      resumeHideDuration,
      TransitionComponent,
      transitionDuration,
      TransitionProps
    } = _this$props,
          other = _objectWithoutProperties(_this$props, ["action", "anchorOrigin", "autoHideDuration", "children", "classes", "className", "ClickAwayListenerProps", "ContentProps", "disableWindowBlurListener", "message", "onClose", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "TransitionComponent", "transitionDuration", "TransitionProps"]); // So we only render active snackbars.


    if (!open && this.state.exited) {
      return null;
    }

    return React.createElement(ClickAwayListener, _extends({
      onClickAway: this.handleClickAway
    }, ClickAwayListenerProps), React.createElement("div", _extends({
      className: classNames(classes.root, classes[`anchorOrigin${capitalize(vertical)}${capitalize(horizontal)}`], className),
      onMouseEnter: this.handleMouseEnter,
      onMouseLeave: this.handleMouseLeave
    }, other), React.createElement(EventListener, {
      target: "window",
      onFocus: disableWindowBlurListener ? undefined : this.handleResume,
      onBlur: disableWindowBlurListener ? undefined : this.handlePause
    }), React.createElement(TransitionComponent, _extends({
      appear: true,
      in: open,
      onEnter: onEnter,
      onEntered: onEntered,
      onEntering: onEntering,
      onExit: onExit,
      onExited: createChainedFunction(this.handleExited, onExited),
      onExiting: onExiting,

disabled: false
    };

    if (activeStep === index) {
      state.active = true;
    } else if (!nonLinear && activeStep > index) {
      state.completed = true;
    } else if (!nonLinear && activeStep < index) {
      state.disabled = true;
    }

    return [!alternativeLabel && connector && index > 0 && React.cloneElement(connector, _objectSpread({
      key: index
    }, state)), React.cloneElement(step, _objectSpread({}, controlProps, step.props, state))];
  });
  return React.createElement(Paper, _extends({
    square: true,
    elevation: 0,
    className: className
  }, other), steps);
}

var QueryRendererWithTotals = function QueryRendererWithTotals(_ref) {
  var query = _ref.query,
      restProps = _objectWithoutProperties(_ref, ["query"]);

  return React.createElement(QueryRenderer, _extends({
    queries: {
      totals: _objectSpread({}, query, {
        dimensions: [],
        timeDimensions: query.timeDimensions ? query.timeDimensions.map(function (td) {
          return _objectSpread({}, td, {
            granularity: null
          });
        }) : undefined
      }),
      main: query
    }
  }, restProps));
};

const flexData = this.state.flexData[index];

      const newProps = _objectSpread({}, child.props, {
        maxSize: child.props.maxSize || Number.MAX_VALUE,
        orientation: this.props.orientation,
        minSize: child.props.minSize || 1,
        events: this.events,
        flex: flexData.flex,
        ref: flexData.guid,
        index
      });

      return React.cloneElement(child, newProps);
    });
    return React.createElement("div", _extends({}, getDataProps(this.props), {
      style: this.props.style,
      className: className
    }), this.children);
  }

export var MediaQueryWrapper = function MediaQueryWrapper() {
  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

  var dispatch = props.dispatch,
      fakeWidth = props.fakeWidth,
      children = props.children,
      other = _objectWithoutProperties(props, ["dispatch", "fakeWidth", "children"]);

  var values = {
    deviceWidth: fakeWidth,
    width: fakeWidth
  };
  return React.createElement(MediaQuery, _extends({}, other, {
    values: values
  }), children);
};
MediaQueryWrapper.propTypes = {

className: classnames(classes.textarea, classes.shadow),
      readOnly: true,
      ref: this.handleRefSinglelineShadow,
      rows: "1",
      tabIndex: -1,
      value: ""
    }), React.createElement("textarea", {
      "aria-hidden": "true",
      className: classnames(classes.textarea, classes.shadow),
      defaultValue: defaultValue,
      readOnly: true,
      ref: this.handleRefShadow,
      rows: rows,
      tabIndex: -1,
      value: value
    }), React.createElement("textarea", _extends({
      rows: rows,
      className: classnames(classes.textarea, className),
      defaultValue: defaultValue,
      value: value,
      onChange: this.handleChange,
      ref: this.handleRefInput,
      style: {
        height: this.state.height
      }
    }, other)));
  }

other = _objectWithoutProperties(_this$props, ["autoComplete", "autoFocus", "children", "className", "defaultValue", "error", "FormHelperTextProps", "fullWidth", "helperText", "id", "InputLabelProps", "inputProps", "InputProps", "inputRef", "label", "multiline", "name", "onBlur", "onChange", "onFocus", "placeholder", "required", "rows", "rowsMax", "select", "SelectProps", "type", "value", "variant"]);

    process.env.NODE_ENV !== "production" ? warning(!select || Boolean(children), 'Material-UI: `children` must be passed when using the `TextField` component with `select`.') : void 0;
    const InputMore = {};

    if (variant === 'outlined') {
      if (InputLabelProps && typeof InputLabelProps.shrink !== 'undefined') {
        InputMore.notched = InputLabelProps.shrink;
      }

      InputMore.labelWidth = this.labelNode ? this.labelNode.offsetWidth : 0;
    }

    const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
    const InputComponent = variantComponent[variant];
    const InputElement = React.createElement(InputComponent, _extends({
      autoComplete: autoComplete,
      autoFocus: autoFocus,
      defaultValue: defaultValue,
      fullWidth: fullWidth,
      multiline: multiline,
      name: name,
      rows: rows,
      rowsMax: rowsMax,
      type: type,
      value: value,
      id: id,
      inputRef: inputRef,
      onBlur: onBlur,
      onChange: onChange,
      onFocus: onFocus,
      placeholder: placeholder,

render() {
    const _this$props = this.props,
          {
      children,
      className,
      onBlur,
      onKeyDown
    } = _this$props,
          other = _objectWithoutProperties(_this$props, ["children", "className", "onBlur", "onKeyDown"]);

    return React.createElement(List, _extends({
      role: "menu",
      ref: ref => {
        this.listRef = ReactDOM.findDOMNode(ref);
      },
      className: className,
      onKeyDown: this.handleKeyDown,
      onBlur: this.handleBlur
    }, other), React.Children.map(children, (child, index) => {
      if (!React.isValidElement(child)) {
        return null;
      }

      process.env.NODE_ENV !== "production" ? warning(child.type !== React.Fragment, ["Material-UI: the MenuList component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n')) : void 0;
      return React.cloneElement(child, {
        tabIndex: index === this.state.currentTabIndex ? 0 : -1,
        ref: child.props.selected ? ref => {

function StepConnector(props) {
  const {
    active,
    alternativeLabel,
    classes,
    className: classNameProp,
    completed,
    disabled,
    orientation
  } = props,
        other = _objectWithoutProperties(props, ["active", "alternativeLabel", "classes", "className", "completed", "disabled", "orientation"]);

  return React.createElement("div", _extends({
    className: classNames(classes.root, classes[orientation], {
      [classes.alternativeLabel]: alternativeLabel,
      [classes.active]: active,
      [classes.completed]: completed,
      [classes.disabled]: disabled
    }, classNameProp)
  }, other), React.createElement("span", {
    className: classNames(classes.line, {
      [classes.lineHorizontal]: orientation === 'horizontal',
      [classes.lineVertical]: orientation === 'vertical'
    })
  }));
}