'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

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

var TopNav = _styledComponents2.default.header.withConfig({ displayName: 'TopNav' }).withConfig({
  displayName: 'TopNav__TopNav'
})(['background: ', ';color: ', ';border-bottom: 1px solid ', ';padding: ', ';display: flex;justify-content: space-between;z-index: 1000;/* we don\'t want the nav to expand or collapse, just keep its natural size */flex: 0 0 auto;'], function (_ref) {
  var theme = _ref.theme;
  return theme.topNav.bg;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.topNav.fg;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.shadow.color;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.topNav.padding;
});

TopNav.usage = '\n# TopNav\n\nThe header above a page which contains page title and navigation.\n\n```\n<TopNav>\n  <LogoHeader>Bandwidth</LogoHeader>\n  <TabGroup>\n    <!-- ... -->\n  </TabGroup>\n</TopNav>\n```\n';

exports.default = TopNav;