How to use the grommet.Anchor function in grommet

var _grommetIcons = require('grommet-icons');

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _lib = require('../../lib');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

// Note: I shouldn't have to define the fill color
// This is a bug in v2: https://github.com/grommet/grommet/issues/2141
var StyledSocialAnchor = exports.StyledSocialAnchor = (0, _styledComponents2.default)(_grommet.Anchor)(_templateObject, _lib.whichTealColorForTheme, _lib.whichTealColorForTheme);

function SocialAnchor(_ref) {
  var colorTheme = _ref.colorTheme,
      hrefs = _ref.hrefs,
      service = _ref.service;

  var icons = {
    facebook: _react2.default.createElement(_grommetIcons.FacebookOption, { size: 'small' }),
    instagram: _react2.default.createElement(_grommetIcons.Instagram, { size: 'small' }),
    twitter: _react2.default.createElement(_grommetIcons.Twitter, { size: 'small' })
  };

  return _react2.default.createElement(
    _styledComponents.ThemeProvider,
    { theme: { mode: colorTheme } },
    _react2.default.createElement(StyledSocialAnchor, {

setTabIndex = _useState8[1];

  var theme = (0, _react.useMemo)(function () {
    return (0, _utils.deepMerge)((0, _base.generate)(baseSize), themes[themeName]);
  }, [baseSize, themeName]);
  var themeCanMode = (0, _react.useMemo)(function () {
    return theme && theme.global.colors.background && theme.global.colors.background.dark;
  }, [theme]);
  var content = [_react["default"].createElement(_grommet.Box, {
    key: "type",
    align: "start"
  }, _react["default"].createElement(_grommet.Heading, {
    margin: {
      top: 'none'
    }
  }, "Heading"), _react["default"].createElement(_grommet.Paragraph, null, "Paragraph"), _react["default"].createElement(_grommet.Text, null, "Text"), _react["default"].createElement(_grommet.Anchor, {
    href: ""
  }, "Anchor"), _react["default"].createElement(_grommet.Menu, {
    label: "Menu",
    items: [{
      label: 'One',
      onClick: function onClick() {}
    }, {
      label: 'Two'
    }]
  }), _react["default"].createElement(_grommet.Button, {
    label: "Button",
    onClick: function onClick() {}
  })), _react["default"].createElement(_grommet.Box, {
    key: "input",
    gap: "small"
  }, _react["default"].createElement(_grommet.Select, {

var _NavListItem = require('./components/NavListItem');

var _NavListItem2 = _interopRequireDefault(_NavListItem);

var _zooniverseLogo = require('../../zooniverse-logo');

var _zooniverseLogo2 = _interopRequireDefault(_zooniverseLogo);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var StyledHeader = exports.StyledHeader = (0, _styledComponents2.default)(_grommet.Box)(_templateObject);

var StyledLogoAnchor = exports.StyledLogoAnchor = (0, _styledComponents2.default)(_grommet.Anchor)(_templateObject2);

var ZooHeader = function ZooHeader(props) {
  var adminNavLinkLabel = props.adminNavLinkLabel,
      adminNavLinkURL = props.adminNavLinkURL,
      authContainer = props.authContainer,
      isAdmin = props.isAdmin,
      mainHeaderNavListLabels = props.mainHeaderNavListLabels,
      mainHeaderNavListURLs = props.mainHeaderNavListURLs,
      theme = props.theme;


  return _react2.default.createElement(
    _grommet.Grommet,
    { theme: theme },
    _react2.default.createElement(
      StyledHeader,

var Disabled = function Disabled() {
  return _react["default"].createElement(_grommet.Grommet, {
    theme: _themes.grommet
  }, _react["default"].createElement(_grommet.Box, {
    align: "center",
    pad: "large"
  }, _react["default"].createElement(_grommet.Box, {
    margin: "small"
  }, _react["default"].createElement(_grommet.Anchor, {
    disabled: true,
    label: "Disabled Anchor"
  }))));
};

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _grommet = require('grommet');

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var StyledNavListItem = exports.StyledNavListItem = (0, _styledComponents2.default)(_grommet.Anchor)(_templateObject);

function NavListItem(_ref) {
  var label = _ref.label,
      url = _ref.url;

  return _react2.default.createElement(
    StyledNavListItem,
    { href: url },
    label
  );
}

NavListItem.propTypes = {
  label: _propTypes2.default.string.isRequired,
  url: _propTypes2.default.string.isRequired
};

}, ['xxlarge', 'xlarge', 'large', 'medium', 'small', 'xsmall'].map(function (size) {
    return _react["default"].createElement(_grommet.Box, {
      key: size,
      margin: "small"
    }, _react["default"].createElement(_grommet.Anchor, {
      size: size,
      label: size,
      href: "#"
    }));
  })));
};

var Inline = function Inline() {
  return _react["default"].createElement(_grommet.Grommet, {
    theme: _themes.grommet
  }, _react["default"].createElement(_grommet.Box, {
    align: "center",
    pad: "large"
  }, _react["default"].createElement(_grommet.Paragraph, null, "This is ", _react["default"].createElement(_grommet.Anchor, {
    label: "an inline link",
    href: "#"
  }), " with surrounding text.")));
};

var Default = function Default() {
  return _react["default"].createElement(_grommet.Grommet, {
    theme: _themes.grommet
  }, _react["default"].createElement(_grommet.Box, {
    align: "center",
    pad: "large"
  }, _react["default"].createElement(_grommet.Anchor, {
    href: "#"
  }, "Link")));
};

},
    _react2.default.createElement(
      StyledFooterSection,
      {
        direction: 'row',
        fill: 'horizontal',
        justify: 'between',
        pad: { horizontal: 'large', vertical: 'medium' },
        margin: { horizontal: 'large', vertical: 'none' },
        tag: 'section'
      },
      _react2.default.createElement(
        _grommet.Box,
        null,
        _react2.default.createElement(
          _grommet.Anchor,
          { href: 'https://www.zooniverse.org' },
          _react2.default.createElement(StyledZooniverseLogotype, null)
        ),
        props.zooTagline
      ),
      _react2.default.createElement(
        _grommet.Box,
        {
          className: 'footer__nav',
          direction: 'row',
          gap: 'medium',
          responsive: false
        },
        props.socialNavList.map(function (navItem, i) {
          return createKeyedAnchorItem(navItem, i);
        })

var _zooniverseLogotype = require('../../zooniverse-logotype');

var _zooniverseLogotype2 = _interopRequireDefault(_zooniverseLogotype);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

_counterpart2.default.registerTranslations('en', _en2.default);

var StyledFooterSection = exports.StyledFooterSection = (0, _styledComponents2.default)(_grommet.Box)(_templateObject);

var StyledNavListContainer = exports.StyledNavListContainer = (0, _styledComponents2.default)(_grommet.Box)(_templateObject2);

var StyledSmallNavListItem = exports.StyledSmallNavListItem = (0, _styledComponents2.default)(_grommet.Anchor)(_templateObject3);

var StyledLogoAnchor = exports.StyledLogoAnchor = (0, _styledComponents2.default)(_grommet.Anchor)(_templateObject4, _lib.whichTealColorForTheme);

var StyledDivider = exports.StyledDivider = _styledComponents2.default.hr(_templateObject5);

var StyledEasterEgg = exports.StyledEasterEgg = (0, _styledComponents2.default)(_grommet.Image)(_templateObject6);

var ZooFooter = function ZooFooter(props) {
  var aboutNavListLabels = props.aboutNavListLabels,
      aboutNavListURLs = props.aboutNavListURLs,
      buildNavListLabels = props.buildNavListLabels,
      buildNavListURLs = props.buildNavListURLs,
      colorTheme = props.colorTheme,
      getInvolvedNavListLabels = props.getInvolvedNavListLabels,
      getInvolvedNavListURLs = props.getInvolvedNavListURLs,
      newsNavListLabels = props.newsNavListLabels,