'use strict';

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

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _icons = require('../helpers/icons');

var _icons2 = _interopRequireDefault(_icons);

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

var Button = _styledComponents2.default.button.withConfig({
  displayName: 'Button__Button'
})(['font-size: ', ';text-decoration: none;font-weight: ', ';font-family: ', ';text-transform: ', ';background: ', ';border: 1px solid ', ';color: ', ';border-radius: 3em;padding: ', ';display: inline-block;line-height: normal;white-space: nowrap;vertical-align: middle;text-align: center;cursor: pointer;-webkit-user-drag: none;/* should get auto-prefixed */user-select: none;box-sizing: border-box;transition: all 0.25s ease;outline: none;position: relative;overflow: hidden;&:hover:not(:disabled), &:focus {background-color: ', ';border-color: ', ';color: ', ';box-shadow: 0 2px 4px ', ';}&:disabled {background: ', ';color: ', ';border: ', ';cursor: default;}&::before, &::after {position: absolute;height: 100%;font-size: 125%;color: ', ';transition: all 0.3s;speak: none;font-family: \'Bandwidth\';}&:hover::before, &:hover::after {color: ', ';}&::before {content: \'', '\';left: -200px;}&::after {content: \'', '\';right: -200px;}&:hover:not(:disabled)::before {left: 10px;}&:hover:not(:disabled)::after {right: 10px;}'], function (_ref) {
  var theme = _ref.theme;
  return theme.button.fontSize;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.button.fontWeight;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.button.fontFamily;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.button.textTransform;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.colors.primary;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.colors.primary;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.colors.white;
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.button.padding;
}, function (_ref9) {
  var theme = _ref9.theme;
  return theme.button.activeBG;
}, function (_ref10) {
  var theme = _ref10.theme;
  return theme.button.activeBG;
}, function (_ref11) {
  var theme = _ref11.theme;
  return theme.button.activeFG;
}, function (_ref12) {
  var theme = _ref12.theme;
  return theme.shadow.color;
}, function (_ref13) {
  var theme = _ref13.theme;
  return theme.button.disabledBG;
}, function (_ref14) {
  var theme = _ref14.theme;
  return theme.button.disabledFG;
}, function (_ref15) {
  var theme = _ref15.theme;
  return theme.button.disabledBorder;
}, function (_ref16) {
  var theme = _ref16.theme;
  return theme.button.fg;
}, function (_ref17) {
  var theme = _ref17.theme;
  return theme.button.activeFG;
}, function (_ref18) {
  var leftIcon = _ref18.leftIcon,
      iconHelper = _ref18.iconHelper;
  return iconHelper(leftIcon);
}, function (_ref19) {
  var rightIcon = _ref19.rightIcon,
      iconHelper = _ref19.iconHelper;
  return iconHelper(rightIcon);
});

Button.defaultProps = {
  leftIcon: null,
  rightIcon: null,
  iconHelper: _icons2.default
};

Button.usage = '\n# Button\n\nThe trusty button. Renders a `<button` tag with styling. You can add fancy little icons with animations using the `leftIcon` and `rightIcon` props. These icons should be names from the icons list (see `components/helpers/icons`).\n\nChange the color with themes, not on the button itself!\n\n```\n<Button rightIcon="checkmark">Ok</Button>\n```\n\n```\n<ThemeProvider theme={secondaryTheme}>\n  <Button>Secondary!</Button>\n</ThemeProvider>\n```\n';

exports.default = Button;