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

href: href,
    color: hoverColor,
    underlineBehavior: "none",
    px: 1,
    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

_defineProperty(_assertThisInitialized(_this), "renderTab", function (text, to) {
      var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
      var exact = options.exact,
          count = options.count;
      var tabName = text.replace(/[0-9]/g, "").trim();
      return _react.default.createElement(_v.RouteTab, {
        to: to,
        exact: exact,
        onClick: function onClick() {
          _this.trackClick(tabName, to);
        },
        key: to
      }, _react.default.createElement(_palette.Flex, null, text, count != null && _react.default.createElement(_palette.Sans, {
        ml: 0.5,
        size: "3t",
        weight: "regular"
      }, "(", count, ")")));
    });

}, _react.default.createElement(_palette.Flex, {
        flexDirection: "column",
        py: 4
      }, _react.default.createElement(_palette.Serif, {
        pb: 0.5,
        size: "4t",
        weight: "semibold",
        color: "black100"
      }, "Set your max bid"), _react.default.createElement(_palette.LargeSelect, {
        selected: values.selectedBid,
        onSelect: function onSelect(value) {
          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) {

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",
        color: "red100",
        mb: 2
      }, status, "."), _react.default.createElement(_palette.Button, _extends({
        size: "large",
        width: "100%",
        loading: isSubmitting
      }, {
        type: "submit"
      }), "Confirm bid"))));
    }
  }));

billing: true,
    showPhoneNumberInput: true
  }))), _react.default.createElement(_palette.Flex, {
    mt: 4,
    mb: 2,
    flexDirection: "column",
    justifyContent: "center"
  }, _react.default.createElement(_palette.Box, {
    mx: "auto"
  }, _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)), _react.default.createElement(_palette.Button, _extends({
    mt: 1,
    size: "large",
    width: "100%",
    loading: isSubmitting
  }, {
    type: "submit"
  }), "Register"));
};