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

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

  var _react2 = _interopRequireDefault(_react);

  var _styledComponents2 = _interopRequireDefault(_styledComponents);

  var _propTypes2 = _interopRequireDefault(_propTypes);

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

  var _templateObject = _taggedTemplateLiteral(['\n  font-family: "GE Inspira Sans";\n  outline: none;\n  user-select: none;\n  display: inline-block;\n  overflow: visible;\n  height: var(--px-btn-height, auto);\n  min-height: var(--px-btn-min-height, 2rem);\n  min-width: var(--px-btn-min-width, 4.66667em);\n  margin: 0;\n  border: 1px solid var(--px-btn-border-color, transparent);\n  border-radius: 0 !important;\n  padding: calc(var(--px-btn-height, 2em) / 10) calc(var(--px-btn-height, 2em) / 2);\n  \n  box-shadow: var(--px-btn-shadow--light, none);\n  font: inherit;\n  line-height: calc(var(--px-btn-height, 2em) - 2px);\n  \n  cursor: pointer;\n  text-align: center;\n  text-decoration: none;\n  text-transform: none;\n  white-space: nowrap;\n  background-color: var(--px-btn-background, #d8e0e5);\n  transition: background .4s, border-color .4s, color .4s;\n  -webkit-appearance: button;\n  -webkit-font-smoothing: antialiased;\n\n  color: var(--px-btn-color, #2c404c);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  &:link,\n  &:visited,\n  &:hover,\n  &:active {\n    color: var(--px-btn-color, #2c404c);\n  }\n\n  &:hover,\n  &:focus{\n    border-color: var(--px-btn-border-color--hover, transparent);\n    box-shadow: var(--px-btn-shadow, none);\n    background-color: var(--px-btn-background--hover, #a3b5bf);\n  }\n  &:active{\n    outline: none;\n    border-color: var(--px-btn-border-color--pressed, transparent);\n    box-shadow: none;\n    background-color: var(--px-btn-background--pressed, #889aa5);\n  }\n\n  \n  \n  ', '\n\n  ', '\n\n  ', '\n\n  ', '\n\n  ', '\n\n  ', '\n\n  ', '\n\n  ', '\n\n  ', '\n  ', '\n  ', '\n\n  ', '\n\n'], ['\n  font-family: "GE Inspira Sans";\n  outline: none;\n  user-select: none;\n  display: inline-block;\n  overflow: visible;\n  height: var(--px-btn-height, auto);\n  min-height: var(--px-btn-min-height, 2rem);\n  min-width: var(--px-btn-min-width, 4.66667em);\n  margin: 0;\n  border: 1px solid var(--px-btn-border-color, transparent);\n  border-radius: 0 !important;\n  padding: calc(var(--px-btn-height, 2em) / 10) calc(var(--px-btn-height, 2em) / 2);\n  \n  box-shadow: var(--px-btn-shadow--light, none);\n  font: inherit;\n  line-height: calc(var(--px-btn-height, 2em) - 2px);\n  \n  cursor: pointer;\n  text-align: center;\n  text-decoration: none;\n  text-transform: none;\n  white-space: nowrap;\n  background-color: var(--px-btn-background, #d8e0e5);\n  transition: background .4s, border-color .4s, color .4s;\n  -webkit-appearance: button;\n  -webkit-font-smoothing: antialiased;\n\n  color: var(--px-btn-color, #2c404c);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  &:link,\n  &:visited,\n  &:hover,\n  &:active {\n    color: var(--px-btn-color, #2c404c);\n  }\n\n  &:hover,\n  &:focus{\n    border-color: var(--px-btn-border-color--hover, transparent);\n    box-shadow: var(--px-btn-shadow, none);\n    background-color: var(--px-btn-background--hover, #a3b5bf);\n  }\n  &:active{\n    outline: none;\n    border-color: var(--px-btn-border-color--pressed, transparent);\n    box-shadow: none;\n    background-color: var(--px-btn-background--pressed, #889aa5);\n  }\n\n  \n  \n  ', '\n\n  ', '\n\n  ', '\n\n  ', '\n\n  ', '\n\n  ', '\n\n  ', '\n\n  ', '\n\n  ', '\n  ', '\n  ', '\n\n  ', '\n\n']),
      _templateObject2 = _taggedTemplateLiteral(['\n    height: var(--px-btn-height, 2em);\n    width: var(--px-btn-height, 2em);\n    min-width: var(--px-btn-height, 2em);\n    padding-right: 0;\n    padding-left: 0;\n    border: var(--px-btn-icon-border, 0px solid) !important;\n    background-color: var(--px-btn-icon-background, transparent) !important;\n  '], ['\n    height: var(--px-btn-height, 2em);\n    width: var(--px-btn-height, 2em);\n    min-width: var(--px-btn-height, 2em);\n    padding-right: 0;\n    padding-left: 0;\n    border: var(--px-btn-icon-border, 0px solid) !important;\n    background-color: var(--px-btn-icon-background, transparent) !important;\n  ']),
      _templateObject3 = _taggedTemplateLiteral(['\n    font-size: 1.33333rem;\n  '], ['\n    font-size: 1.33333rem;\n  ']),
      _templateObject4 = _taggedTemplateLiteral(['\n    height: 1.66667em;\n    font-size: 0.8rem;\n    line-height: calc(1.66667em - 2px);\n  '], ['\n    height: 1.66667em;\n    font-size: 0.8rem;\n    line-height: calc(1.66667em - 2px);\n  ']),
      _templateObject5 = _taggedTemplateLiteral(['\n    font-size: 2rem;\n  '], ['\n    font-size: 2rem;\n  ']),
      _templateObject6 = _taggedTemplateLiteral(['\n    width: 100%;\n    padding-right: 0;\n    padding-left: 0;\n  '], ['\n    width: 100%;\n    padding-right: 0;\n    padding-left: 0;\n  ']),
      _templateObject7 = _taggedTemplateLiteral(['\n    color: var(--px-btn-primary-color, white);\n    border-color: var(--px-btn-primary-border-color, transparent);\n    box-shadow: var(--px-btn-shadow, none);\n    background-color: var(--px-btn-primary-background, #364c59);\n\n    &:link,\n    &:visited,\n    &:hover,\n    &:active {\n      color: var(--px-btn-primary-color, white);\n    }\n    &:hover,\n    &:focus {\n      border-color: transparent;\n      background-color: var(--px-btn-primary-background--hover, #23343f);\n    }\n    &:active {\n      border-color: transparent;\n      background-color: var(--px-btn-primary-background--pressed, #121f26);\n    }\n  '], ['\n    color: var(--px-btn-primary-color, white);\n    border-color: var(--px-btn-primary-border-color, transparent);\n    box-shadow: var(--px-btn-shadow, none);\n    background-color: var(--px-btn-primary-background, #364c59);\n\n    &:link,\n    &:visited,\n    &:hover,\n    &:active {\n      color: var(--px-btn-primary-color, white);\n    }\n    &:hover,\n    &:focus {\n      border-color: transparent;\n      background-color: var(--px-btn-primary-background--hover, #23343f);\n    }\n    &:active {\n      border-color: transparent;\n      background-color: var(--px-btn-primary-background--pressed, #121f26);\n    }\n  ']),
      _templateObject8 = _taggedTemplateLiteral(['\n    border-color: var(--px-btn-tertiary-border-color, #889aa5);\n    border: 1px solid;\n    box-shadow: none;\n    background-color: var(--px-btn-tertiary-background, white);\n    &:link,\n    &:visited,\n    &:hover,\n    &:active {\n      border-color: var(--px-btn-tertiary-border-color, #889aa5);\n      color: var(--px-btn-tertiary-color, #007acc);\n    }\n    &:hover,\n    &:focus {\n      color: var(--px-btn-tertiary-color--hover, #005c99);\n      border-color: var(--px-btn-tertiary-border-color, #889aa5);\n      box-shadow: none;\n      background-color: var(--px-btn-tertiary-background--hover, #c5d1d8);\n    }\n    &:active {\n      color: var(--px-btn-tertiary-color--pressed, #003d66);\n      border-color: var(--px-btn-tertiary-border-color, #889aa5);\n      box-shadow: none;\n      background-color: var(--px-btn-tertiary-background--pressed, #96a8b2);\n    }\n  '], ['\n    border-color: var(--px-btn-tertiary-border-color, #889aa5);\n    border: 1px solid;\n    box-shadow: none;\n    background-color: var(--px-btn-tertiary-background, white);\n    &:link,\n    &:visited,\n    &:hover,\n    &:active {\n      border-color: var(--px-btn-tertiary-border-color, #889aa5);\n      color: var(--px-btn-tertiary-color, #007acc);\n    }\n    &:hover,\n    &:focus {\n      color: var(--px-btn-tertiary-color--hover, #005c99);\n      border-color: var(--px-btn-tertiary-border-color, #889aa5);\n      box-shadow: none;\n      background-color: var(--px-btn-tertiary-background--hover, #c5d1d8);\n    }\n    &:active {\n      color: var(--px-btn-tertiary-color--pressed, #003d66);\n      border-color: var(--px-btn-tertiary-border-color, #889aa5);\n      box-shadow: none;\n      background-color: var(--px-btn-tertiary-background--pressed, #96a8b2);\n    }\n  ']),
      _templateObject9 = _taggedTemplateLiteral(['\n    border: 0 !important;\n    border-radius: 0 !important;\n    line-height: inherit;\n    padding-left: 0;\n    padding-right: 0;\n    box-shadow: none;\n    background: none;\n    outline: none;\n    &:link,\n    &:visited,\n    &:hover,\n    &:active {\n      box-shadow: none;\n      background: none;\n      outline: none;\n      color: var(--px-btn-bare-color, #2c404c);\n    }\n    &:hover,\n    &:focus {\n      color: var(--px-btn-bare-color--hover, #007acc);\n    }\n    &:active {\n      color: var(--px-btn-bare-color--pressed, #003d66);\n    }\n  '], ['\n    border: 0 !important;\n    border-radius: 0 !important;\n    line-height: inherit;\n    padding-left: 0;\n    padding-right: 0;\n    box-shadow: none;\n    background: none;\n    outline: none;\n    &:link,\n    &:visited,\n    &:hover,\n    &:active {\n      box-shadow: none;\n      background: none;\n      outline: none;\n      color: var(--px-btn-bare-color, #2c404c);\n    }\n    &:hover,\n    &:focus {\n      color: var(--px-btn-bare-color--hover, #007acc);\n    }\n    &:active {\n      color: var(--px-btn-bare-color--pressed, #003d66);\n    }\n  ']),
      _templateObject10 = _taggedTemplateLiteral(['\n    border: 0 !important;\n    border-radius: 0 !important;\n    line-height: inherit;\n    padding-left: 0;\n    padding-right: 0;\n    box-shadow: none;\n    background: none;\n    outline: none;\n    color: var(--px-btn-primary-bare-color--visited, #007acc);\n    &:disabled{\n      color: var(--px-btn-disabled-color, rgba(0, 0, 0, 0.2));\n    }\n    &:link,\n    &:visited,\n    &:hover,\n    &:active {\n      box-shadow: none;\n      background: none;\n      outline: none;\n    }\n    &:hover,\n    &:focus {\n      color: var(--px-btn-primary-bare-color--hover, #005c99);\n    }\n    &:active, {\n    &:focus {\n        color: var(--px-btn-primary-bare-color--pressed, #003d66);\n    }\n  '], ['\n    border: 0 !important;\n    border-radius: 0 !important;\n    line-height: inherit;\n    padding-left: 0;\n    padding-right: 0;\n    box-shadow: none;\n    background: none;\n    outline: none;\n    color: var(--px-btn-primary-bare-color--visited, #007acc);\n    &:disabled{\n      color: var(--px-btn-disabled-color, rgba(0, 0, 0, 0.2));\n    }\n    &:link,\n    &:visited,\n    &:hover,\n    &:active {\n      box-shadow: none;\n      background: none;\n      outline: none;\n    }\n    &:hover,\n    &:focus {\n      color: var(--px-btn-primary-bare-color--hover, #005c99);\n    }\n    &:active, {\n    &:focus {\n        color: var(--px-btn-primary-bare-color--pressed, #003d66);\n    }\n  ']),
      _templateObject11 = _taggedTemplateLiteral(['\n    color: var(--px-btn-call-to-action-color, white);\n    border-color: var(--px-btn-call-to-action-border-color, transparent);\n    box-shadow: var(--px-btn-shadow, none);\n    background-color: var(--px-btn-call-to-action-background, #007acc);\n    &:link,\n    &:visited,\n    &:hover,\n    &:active {\n      color: var(--px-btn-call-to-action-color, white);\n    }\n    &:hover,\n    &:focus {\n      background-color: var(--px-btn-call-to-action-background--hover, #005c99);\n    }\n    &:active {\n      background-color: var(--px-btn-call-to-action-background--pressed, #003d66);\n    }\n  '], ['\n    color: var(--px-btn-call-to-action-color, white);\n    border-color: var(--px-btn-call-to-action-border-color, transparent);\n    box-shadow: var(--px-btn-shadow, none);\n    background-color: var(--px-btn-call-to-action-background, #007acc);\n    &:link,\n    &:visited,\n    &:hover,\n    &:active {\n      color: var(--px-btn-call-to-action-color, white);\n    }\n    &:hover,\n    &:focus {\n      background-color: var(--px-btn-call-to-action-background--hover, #005c99);\n    }\n    &:active {\n      background-color: var(--px-btn-call-to-action-background--pressed, #003d66);\n    }\n  ']),
      _templateObject12 = _taggedTemplateLiteral(['\n    color: var(--px-btn-disabled-color, rgba(0, 0, 0, 0.2));\n    border: 1px solid;\n    border-color: var(--px-btn-disabled-border-color, rgba(0, 0, 0, 0.2));\n    box-shadow: none;\n    background-color: var(--px-btn-disabled-background, transparent);\n    pointer-events: none;\n  '], ['\n    color: var(--px-btn-disabled-color, rgba(0, 0, 0, 0.2));\n    border: 1px solid;\n    border-color: var(--px-btn-disabled-border-color, rgba(0, 0, 0, 0.2));\n    box-shadow: none;\n    background-color: var(--px-btn-disabled-background, transparent);\n    pointer-events: none;\n  ']);

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

  var Button = _styledComponents2.default.button(_templateObject, function (props) {
    return props.icon && (0, _styledComponents.css)(_templateObject2);
  }, function (props) {
    return props.size === 'large' && (0, _styledComponents.css)(_templateObject3);
  }, function (props) {
    return props.size === 'small' && (0, _styledComponents.css)(_templateObject4);
  }, function (props) {
    return props.size === 'large' && (0, _styledComponents.css)(_templateObject3);
  }, function (props) {
    return props.size === 'huge' && (0, _styledComponents.css)(_templateObject5);
  }, function (props) {
    return props.size === 'full' && (0, _styledComponents.css)(_templateObject6);
  }, function (props) {
    return props.theme === 'primary' && (0, _styledComponents.css)(_templateObject7);
  }, function (props) {
    return props.theme === 'tertiary' && (0, _styledComponents.css)(_templateObject8);
  }, function (props) {
    return props.theme === 'bare' && (0, _styledComponents.css)(_templateObject9);
  }, function (props) {
    return props.theme === 'bare-primary' && (0, _styledComponents.css)(_templateObject10);
  }, function (props) {
    return props.theme === 'call-to-action' && (0, _styledComponents.css)(_templateObject11);
  }, function (props) {
    return props.disabled && (0, _styledComponents.css)(_templateObject12);
  });

  Button.displayName = 'Button';

  Button.defaultProps = {
    className: 'px-button',
    type: null,
    theme: null,
    size: null,
    icon: null
  };

  Button.propTypes = {
    theme: _propTypes2.default.string,
    type: _propTypes2.default.string,
    size: _propTypes2.default.string
  };

  exports.default = Button;
});