'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var __chunk_3 = require('../chunk-6d243953.js');
var React = require('react');
var React__default = _interopDefault(React);
var PropTypes = _interopDefault(require('prop-types'));
var __chunk_1 = require('../chunk-f817ce38.js');
var index$3 = require('../Icons/Exit/index.js');
var index$1 = require('../Text/index.js');
require('../chunk-2b268ae7.js');
require('../Icons/Icon/index.js');

var styles = (function (theme) {
  return {
    overlay: {
      position: 'fixed',
      left: '0',
      right: '0',
      top: '0',
      bottom: '0',
      transition: 'transform 0.3s ease-in-out',
      transform: 'translateY(100vh)',
      zIndex: '20',
      backgroundColor: 'rgba(255, 255, 255, 0.75)',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center'
    },
    show: {
      transform: 'translateY(0)'
    },
    container: __chunk_3.defineProperty({
      width: '100%',
      minHeight: '100vh'
    }, theme.breakpoints.up('sm'), {
      position: 'relative',
      width: '490px',
      borderRadius: '4px',
      boxShadow: '0 2px 6px 0 rgba(36, 47, 51, 0.16)',
      border: 'solid 1px #FBFBFB',
      backgroundColor: theme.palette.white,
      minHeight: 'auto'
    }),
    header: __chunk_3.defineProperty({
      display: 'flex',
      justifyContent: 'space-between',
      height: '56px',
      backgroundColor: theme.palette.white,
      borderBottom: 'solid 1px #d3d3db',
      padding: '8px 16px'
    }, theme.breakpoints.up('sm'), {
      position: 'absolute',
      right: 0,
      justifyContent: 'flex-end',
      border: 'none',
      backgroundColor: 'transparent'
    }),
    exit: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      cursor: 'pointer',
      transition: 'transform 0.3s ease-in-out',
      outline: 'none',
      '&:hover': {
        transform: 'rotate(90deg)'
      }
    },
    content: __chunk_3.defineProperty({
      height: 'calc(100vh - 72px)',
      backgroundColor: theme.palette.white90,
      display: 'flex',
      flexDirection: 'column'
    }, theme.breakpoints.up('sm'), {
      height: 'auto',
      background: theme.palette.white
    }),
    title: __chunk_3.defineProperty({
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center'
    }, theme.breakpoints.up('sm'), {
      display: 'none'
    })
  };
});

var Modal = function Modal(_ref) {
  var title = _ref.title,
      onClose = _ref.onClose,
      children = _ref.children,
      isOpen = _ref.isOpen,
      classes = _ref.classes,
      className = _ref.className,
      rest = __chunk_3.objectWithoutProperties(_ref, ['title', 'onClose', 'children', 'isOpen', 'classes', 'className']);
  return React__default.createElement(
    'div',
    { className: __chunk_1.classNames(classes.overlay, isOpen && classes.show) },
    React__default.createElement(
      'div',
      __chunk_3._extends({ className: __chunk_1.classNames(classes.container, className) }, rest),
      React__default.createElement(
        'div',
        { className: classes.header },
        React__default.createElement(
          'div',
          { className: classes.title },
          React__default.createElement(
            index$1,
            { bold: true, size: 'md' },
            title
          )
        ),
        onClose && React__default.createElement(
          'div',
          {
            className: classes.exit,
            onClick: onClose,
            onKeyPress: function onKeyPress(e) {
              if (e.keyCode === 'ESC') onClose();
            },
            role: 'button',
            tabIndex: isOpen ? 0 : -1
          },
          React__default.createElement(index$3, { color: 'grey90', hoverColor: 'black' })
        )
      ),
      React__default.createElement(
        'div',
        { className: classes.content },
        isOpen && children
      )
    )
  );
};

Modal.defaultProps = {
  isOpen: true
};

Modal.propTypes = {
  title: PropTypes.string,
  onClose: PropTypes.func,
  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
  isOpen: PropTypes.bool,
  classes: PropTypes.object,
  className: PropTypes.string
};

var Modal$1 = __chunk_1.withNano(styles)(Modal);

module.exports = Modal$1;
//# sourceMappingURL=index.js.map
