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

function createLocation(path, state, key, currentLocation) {
  var location;

  if (typeof path === 'string') {
    // Two-arg form: push(path, state)
    location = parsePath(path);
    location.state = state;
  } else {
    // One-arg form: push(location)
    location = _extends({}, path);
    if (location.pathname === undefined) location.pathname = '';

    if (location.search) {
      if (location.search.charAt(0) !== '?') location.search = '?' + location.search;
    } else {
      location.search = '';
    }

    if (location.hash) {
      if (location.hash.charAt(0) !== '#') location.hash = '#' + location.hash;
    } else {
      location.hash = '';
    }

    if (state !== undefined && location.state === undefined) location.state = state;
  }

function log(level, event, payload) {
    if (payload === void 0) {
      payload = {};
    }

    if (!isBrowser()) {
      return logger; // eslint-disable-line no-use-before-define
    }

    if (prefix) {
      event = prefix + "_" + event;
    }

    var logPayload = _extends({}, objFilter(payload), {
      timestamp: Date.now().toString()
    });

    for (var _i6 = 0; _i6 < payloadBuilders.length; _i6++) {
      var builder = payloadBuilders[_i6];
      extendIfDefined(logPayload, builder(logPayload));
    }

    enqueue(level, event, logPayload);
    print(level, event, logPayload);
    return logger; // eslint-disable-line no-use-before-define
  }

var type = props.type || 'text';
  var addonAfter = props.addonAfter && !props.multi ? React.createElement("div", {
    className: "x-input__addon-after"
  }, props.addonAfter) : '';
  var addonBefore = props.addonBefore && !props.multi ? React.createElement("div", {
    className: "x-input__addon-before"
  }, props.addonBefore) : '';
  var css = cn('x-input', {
    'x-input--error': props.error,
    'x-input--multi': props.multi,
    'x-input--disabled': props.disabled
  }, props.className);
  var inputprops = ignore(props, ['addonAfter', 'addonBefore', 'multi', 'error']);
  return React.createElement("div", {
    className: css
  }, addonBefore, props.multi ? React.createElement("textarea", _extends({}, inputprops, {
    className: "x-input__ipt",
    value: props.value,
    onChange: props.onChange,
    type: type
  })) : React.createElement("input", _extends({}, inputprops, {
    className: "x-input__ipt",
    value: props.value,
    onChange: props.onChange,
    type: type
  })), addonAfter);
};

function addBasename(basename, location) {
  if (!basename) return location;
  return _extends({}, location, {
    pathname: addLeadingSlash(basename) + location.pathname
  });
}

_proto.render = function render() {
    var css = cn('x-modal', "x-modal--" + this.state.ani, this.props.className);
    var domprops = ignore(this.props, ['onBgClick', 'height', 'visible']);
    var height = this.props.height ? this.props.height : '';

    if (height && !isNaN(height - 0)) {
      height = height + '%';
    }

    return React.createElement("div", _extends({}, domprops, {
      className: css,
      style: {
        display: this.state.visible ? '' : 'none'
      }
    }), React.createElement("div", {
      className: "x-modal__bg",
      onClick: this.props.onBgClick
    }), React.createElement("div", {
      className: "x-modal__inner",
      style: {
        height: height
      },
      onAnimationEnd: this._onAnimationEnd
    }, this.props.children));
  };

var LayoutFooter = function LayoutFooter(props) {
  var css = cn('x-app-footer', props.className);

  if (props.visible === false) {
    return null;
  }

  var domprops = ignore(props, ['visible']);
  return React.createElement("footer", _extends({}, domprops, {
    className: css
  }), props.children);
};

function setState(nextState) {
    _extends(history, nextState);

    history.length = globalHistory.length;
    transitionManager.notifyListeners(history.location, history.action);
  }

if (!Array.isArray(children)) {
      children = [children];
    }

    children = children.map(function (res, index) {
      return cloneElement(res, {
        value: res.props.value || '',
        key: index,
        onClick: props.onClick,
        arrow: props.arrow
      });
    });
  }

  var domprops = ignore(props, ['indentLine', 'onClick', 'arrow']);
  return React.createElement("section", _extends({}, domprops, {
    className: css
  }), children);
};