How to use the @artsy/palette.Box function in @artsy/palette

}, (0, _isFunction2.default)(navItemLabel) ? // NavItem children can be called as renderProps so that contents
  // can operate on UI behaviors (such as changing the color of an
  // icon on hover).
  navItemLabel({
    hover: hover
  }) : navItemLabel))), showMenu && _react.default.createElement(_reactSpring.animated.div, {
    style: animatedStyle
  }, _react.default.createElement(MenuContainer, {
    top: (0, _palette.space)(6)
  }, _react.default.createElement(Menu, null))), showOverlay && _react.default.createElement(Overlay, {
    hover: hover
  }));
};

exports.NavItem = NavItem;
var MenuContainer = (0, _styledComponents.default)(_palette.Box).withConfig({
  displayName: "NavItem__MenuContainer",
  componentId: "sc-1ekz3i7-0"
})(["position:absolute;top:", "px;margin-top:-1px;transform:translateX(-78%);"], _NavBar.NavBarHeight);
//# sourceMappingURL=NavItem.js.map

py: 2,
    className: className,
    display: display,
    position: "relative",
    style: {
      cursor: "pointer"
    },
    onClick: function onClick() {
      trackClick();
      _onClick && _onClick();
    }
  }, _react.default.createElement(_palette.Sans, {
    size: "3",
    weight: "medium",
    color: hoverColor
  }, _react.default.createElement(_palette.Box, {
    height: 25
  }, (0, _isFunction2.default)(navItemLabel) ? // NavItem children can be called as renderProps so that contents
  // can operate on UI behaviors (such as changing the color of an
  // icon on hover).
  navItemLabel({
    hover: hover
  }) : navItemLabel))), showMenu && _react.default.createElement(_reactSpring.animated.div, {
    style: animatedStyle
  }, _react.default.createElement(MenuContainer, {
    top: (0, _palette.space)(6)
  }, _react.default.createElement(Menu, null))), showOverlay && _react.default.createElement(Overlay, {
    hover: hover
  }));
};

}

  function handleSubmit(actions, result) {
    createCreditCardAndUpdatePhone(relay.environment, result.phoneNumber, result.token.id).then(function () {
      createBidder().then(function (data) {
        trackRegistrationSuccess(data.createBidder.bidder.id);
        window.location.assign("".concat(_sharify.data.APP_URL, "/auction/").concat(sale.id, "/confirm-registration"));
      }).catch(function (error) {
        handleMutationError(actions, error);
      });
    }).catch(function (error) {
      handleMutationError(actions, error);
    });
  }

  return _react.default.createElement(_AppContainer.AppContainer, null, _react.default.createElement(_reactHead.Title, null, "Auction Registration"), _react.default.createElement(_palette.Box, {
    maxWidth: 550,
    px: [2, 0],
    mx: "auto",
    mt: [1, 0],
    mb: [1, 100]
  }, _react.default.createElement(_palette.Serif, {
    size: "10"
  }, "Register to Bid on Artsy"), _react.default.createElement(_palette.Separator, {
    mt: 1,
    mb: 2
  }), _react.default.createElement(_RegistrationForm.StripeWrappedRegistrationForm, {
    onSubmit: handleSubmit,
    trackSubmissionErrors: trackRegistrationFailed
  })));
};

var InnerForm = function InnerForm(props) {
  var touched = props.touched,
      errors = props.errors,
      isSubmitting = props.isSubmitting,
      values = props.values,
      setFieldValue = props.setFieldValue,
      setFieldTouched = props.setFieldTouched;
  return _react.default.createElement(_formik.Form, null, _react.default.createElement(_palette.Box, {
    mt: 4
  }, _react.default.createElement(_palette.Box, {
    mb: 2
  }, _react.default.createElement(_palette.Serif, {
    size: "3t",
    mb: 0.5
  }, "Credit card"), _react.default.createElement(_CreditCardInput.CreditCardInput, {
    error: {
      message: errors.creditCard
    }
  }))), _react.default.createElement(_palette.Box, {
    mt: 4
  }, _react.default.createElement(_palette.Box, {
    mt: 2
  }, _react.default.createElement(_AddressForm.AddressForm, {
    value: values.address,

setFieldValue("selectedBid", value);
          setFieldTouched("selectedBid");
        },
        options: displayIncrements
      }), touched.selectedBid && errors.selectedBid && _react.default.createElement(_palette.Sans, {
        mt: 1,
        color: "red100",
        size: "2"
      }, errors.selectedBid), showPricingTransparency && _react.default.createElement(_PricingTransparency.PricingTransparency, null)), _react.default.createElement(_palette.Flex, {
        pb: 3,
        flexDirection: "column",
        justifyContent: "center",
        width: "100%"
      }, requiresCheckbox && _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_palette.Separator, {
        mb: 3
      }), _react.default.createElement(_palette.Box, {
        mx: "auto",
        mb: 3
      }, _react.default.createElement(_ConditionsOfSaleCheckbox.ConditionsOfSaleCheckbox, {
        selected: values.agreeToTerms,
        onSelect: function onSelect(value) {
          setFieldValue("agreeToTerms", value);
          setFieldTouched("agreeToTerms");
        }
      }), touched.agreeToTerms && errors.agreeToTerms && _react.default.createElement(_palette.Sans, {
        mt: 1,
        color: "red100",
        size: "2",
        textAlign: "center"
      }, errors.agreeToTerms))), status && _react.default.createElement(_palette.Sans, {
        textAlign: "center",
        size: "3",

var InnerForm = function InnerForm(props) {
  var touched = props.touched,
      errors = props.errors,
      isSubmitting = props.isSubmitting,
      values = props.values,
      setFieldValue = props.setFieldValue,
      setFieldTouched = props.setFieldTouched;
  return _react.default.createElement(_formik.Form, null, _react.default.createElement(_palette.Box, {
    mt: 4
  }, _react.default.createElement(_palette.Box, {
    mb: 2
  }, _react.default.createElement(_palette.Serif, {
    size: "3t",
    mb: 0.5
  }, "Credit card"), _react.default.createElement(_CreditCardInput.CreditCardInput, {
    error: {
      message: errors.creditCard
    }
  }))), _react.default.createElement(_palette.Box, {
    mt: 4
  }, _react.default.createElement(_palette.Box, {
    mt: 2
  }, _react.default.createElement(_AddressForm.AddressForm, {
    value: values.address,
    onChange: function onChange(address, _key) {
      setFieldValue("address", address);

value: function render() {
      return _react.default.createElement(_palette.Box, {
        width: "100%"
      }, _react.default.createElement(_Responsive.Media, {
        greaterThan: "xs"
      }, _react.default.createElement(LargeCarousel, this.props)), _react.default.createElement(_Responsive.Media, {
        at: "xs"
      }, _react.default.createElement(SmallCarousel, this.props)));
    }
  }]);

}).map(function (inc) {
    return {
      value: inc.cents.toString(),
      text: inc.display
    };
  });
  var selectedBid = getSelectedBid({
    initialSelectedBid: initialSelectedBid,
    displayIncrements: displayIncrements
  });

  var _determineDisplayRequ = determineDisplayRequirements(saleArtwork.sale.registrationStatus, me),
      requiresCheckbox = _determineDisplayRequ.requiresCheckbox;

  var validationSchema = requiresCheckbox ? validationSchemaForUnregisteredUsersWithCreditCard : validationSchemaForRegisteredUsers;
  return _react.default.createElement(_palette.Box, {
    maxWidth: 550
  }, _react.default.createElement(_formik.Formik, {
    initialValues: {
      selectedBid: selectedBid,
      agreeToTerms: false
    },
    validationSchema: validationSchema,
    onSubmit: onSubmit,
    render: function render(_ref3) {
      var values = _ref3.values,
          touched = _ref3.touched,
          errors = _ref3.errors,
          isSubmitting = _ref3.isSubmitting,
          setFieldValue = _ref3.setFieldValue,
          setFieldTouched = _ref3.setFieldTouched,
          status = _ref3.status;

}).catch(function (error) {
          return onJsError(actions, error, bidderId);
        });
      }, 1000);
      pollCount += 1;
    } else if (status === "WINNING") {
      trackConfirmBidSuccess(position.id, bidderId, selectedBid);
      window.location.assign("".concat(_sharify.data.APP_URL, "/artwork/").concat(artwork.id));
    } else {
      actions.setStatus(messageHeader);
      actions.setSubmitting(false);
      trackConfirmBidFailed(bidderId, [messageHeader]);
    }
  }

  return _react.default.createElement(_AppContainer.AppContainer, null, _react.default.createElement(_reactHead.Title, null, "Confirm Bid | Artsy"), _react.default.createElement(_palette.Box, {
    maxWidth: 550,
    px: [2, 0],
    mx: "auto",
    mt: [1, 0],
    mb: [1, 100]
  }, _react.default.createElement(_palette.Serif, {
    size: "8"
  }, "Confirm your bid"), _react.default.createElement(_palette.Separator, null), _react.default.createElement(_LotInfo.LotInfoFragmentContainer, {
    artwork: artwork,
    saleArtwork: artwork.saleArtwork
  }), _react.default.createElement(_palette.Separator, null), _react.default.createElement(_BidForm.BidFormFragmentContainer, {
    initialSelectedBid: getInitialSelectedBid(props.location),
    showPricingTransparency: false,
    saleArtwork: saleArtwork,
    onSubmit: handleSubmit,
    me: me

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var SuggestionsPopoverContainer = (0, _styledComponents.default)(_palette.Box).withConfig({
  displayName: "FollowArtistButton__SuggestionsPopoverContainer",
  componentId: "sc-18qm6tr-0"
})(["position:absolute;z-index:1;"]);
var FollowArtistButton = (_dec = (0, _reactTracking.default)(), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_React$Component) {
  _inherits(FollowArtistButton, _React$Component);

  function FollowArtistButton() {
    var _getPrototypeOf2;

    var _this;

    _classCallCheck(this, FollowArtistButton);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {