function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: 30px;\n  padding: 0 10px;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", ";\n  &:active,\n  &:focus {\n    outline: 0;\n  }\n\n  > svg + span,\n  > span + svg {\n    margin-left: 10px;\n  }\n  > svg g {\n    stroke: ", ";\n  }\n\n  ", "\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import Text from '../Text';
import colors from '../../theme/colors';
var PickerButton = styled(function (props) {
  return /*#__PURE__*/React.createElement(Text, _extends({
    as: "button",
    fontWeight: "semiBold",
    color: props.isActive ? 'mediumBlue' : 'greyDark'
  }, props));
})(_templateObject(), function (_ref) {
  var theme = _ref.theme;
  return theme.main.colors.white;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.main.colors.darkGrey;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.main.sizes.borderRadius;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.main.colors.greyDark;
}, function (_ref5) {
  var isActive = _ref5.isActive,
      theme = _ref5.theme;
  return isActive ? "\n        background-color: ".concat(theme.main.colors.lightBlue, ";\n        border: 1px solid ").concat(theme.main.colors.darkBlue, ";\n        color: ").concat(theme.main.colors.mediumBlue, ";\n        > svg g {\n          stroke: ").concat(theme.main.colors.mediumBlue, ";\n        }\n      ") : "\n        &:hover {\n          background-color: ".concat(theme.main.colors.lightestGrey, ";\n        }\n      ");
});
PickerButton.defaultProps = {
  isActive: false,
  type: 'button',
  // TODO : This is temporary
  theme: {
    main: {
      colors: colors,
      sizes: {
        borderRadius: '2px',
        fonts: {
          xs: '11px',
          sm: '12px',
          md: '13px',
          lg: '18px'
        }
      },
      fontWeights: {
        regular: 400,
        semiBold: 500,
        bold: 600,
        black: 900
      }
    }
  }
};
PickerButton.propTypes = {
  isActive: PropTypes.bool,
  type: PropTypes.string
};
export default PickerButton;