(function (global, factory) {
  if (typeof define === "function" && define.amd) {
    define(['exports', 'react', 'styled-components'], factory);
  } else if (typeof exports !== "undefined") {
    factory(exports, require('react'), require('styled-components'));
  } else {
    var mod = {
      exports: {}
    };
    factory(mod.exports, global.react, global.styledComponents);
    global.index = mod.exports;
  }
})(this, function (exports, _react, _styledComponents) {
  'use strict';

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

  var _react2 = _interopRequireDefault(_react);

  var _styledComponents2 = _interopRequireDefault(_styledComponents);

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

  var _templateObject = _taggedTemplateLiteral(['\n  height          : 4rem;\n  background-color: var(--px-view-header-background-color, whitesmoke);\n  padding-left    : 1rem;\n  padding-right   : 1rem;\n  display         : flex;\n  align-items     : center;\n  flex-direction  : row;\n  position: relative;\n  user-select:none;\n'], ['\n  height          : 4rem;\n  background-color: var(--px-view-header-background-color, whitesmoke);\n  padding-left    : 1rem;\n  padding-right   : 1rem;\n  display         : flex;\n  align-items     : center;\n  flex-direction  : row;\n  position: relative;\n  user-select:none;\n']),
      _templateObject2 = _taggedTemplateLiteral(['\n  padding-left : 1rem;\n  padding-right: 1rem;\n  flex         : initial;\n  min-width    : 0;\n  margin-left  : auto;\n  margin-right : auto;\n  min-width: 1px; \n'], ['\n  padding-left : 1rem;\n  padding-right: 1rem;\n  flex         : initial;\n  min-width    : 0;\n  margin-left  : auto;\n  margin-right : auto;\n  min-width: 1px; \n']),
      _templateObject3 = _taggedTemplateLiteral(['\n  text-align: center;\n  color     : var(--px-view-header-title-color, black);\n  overflow     : hidden;\n  text-overflow: ellipsis;\n  white-space  : nowrap;\n'], ['\n  text-align: center;\n  color     : var(--px-view-header-title-color, black);\n  overflow     : hidden;\n  text-overflow: ellipsis;\n  white-space  : nowrap;\n']),
      _templateObject4 = _taggedTemplateLiteral(['\n  text-align: center;\n  color     : var(--px-view-header-subtitle-color, gray);\n  font-size  : 0.8rem;\n  line-height: 1.66667;\n  font-weight: 400;\n  overflow     : hidden;\n  text-overflow: ellipsis;\n  white-space  : nowrap;\n'], ['\n  text-align: center;\n  color     : var(--px-view-header-subtitle-color, gray);\n  font-size  : 0.8rem;\n  line-height: 1.66667;\n  font-weight: 400;\n  overflow     : hidden;\n  text-overflow: ellipsis;\n  white-space  : nowrap;\n']),
      _templateObject5 = _taggedTemplateLiteral(['\n  position: absolute;\n  left: 1rem;\n'], ['\n  position: absolute;\n  left: 1rem;\n']),
      _templateObject6 = _taggedTemplateLiteral(['\n  position: absolute;\n  right: 1rem;\n'], ['\n  position: absolute;\n  right: 1rem;\n']);

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

  var VHeader = _styledComponents2.default.div(_templateObject);
  var VHeaderText = _styledComponents2.default.div(_templateObject2);
  var VHeaderTitle = _styledComponents2.default.div(_templateObject3);
  var VHeaderSubTitle = _styledComponents2.default.div(_templateObject4);
  var VHeaderLeft = _styledComponents2.default.div(_templateObject5);
  var VHeaderRight = _styledComponents2.default.div(_templateObject6);

  exports.default = function (_ref) {
    var title = _ref.title,
        subtitle = _ref.subtitle,
        onMenuButtonClick = _ref.onMenuButtonClick,
        onBackButtonClick = _ref.onBackButtonClick,
        showMenuButton = _ref.showMenuButton,
        showBackButton = _ref.showBackButton,
        backButtonLabel = _ref.backButtonLabel,
        leftContent = _ref.leftContent,
        rightContent = _ref.rightContent,
        children = _ref.children;
    return _react2.default.createElement(
      VHeader,
      null,
      _react2.default.createElement(
        VHeaderLeft,
        null,
        leftContent,
        children && _react2.default.Children.map(children[0], function (child) {
          return child;
        })
      ),
      _react2.default.createElement(
        VHeaderText,
        null,
        _react2.default.createElement(
          VHeaderTitle,
          null,
          title
        ),
        subtitle && _react2.default.createElement(
          VHeaderSubTitle,
          null,
          subtitle
        )
      ),
      _react2.default.createElement(
        VHeaderRight,
        null,
        rightContent,
        children && _react2.default.Children.map(children[1], function (child) {
          return child;
        })
      )
    );
  };
});