import { a as classCallCheck, b as createClass, c as defineProperty, d as inherits, e as objectWithoutProperties, f as possibleConstructorReturn, g as slicedToArray, h as _typeof, i as _extends } from '../chunk-aad905a2.js';
import React from 'react';
import PropTypes from 'prop-types';
import { a as withNano, b as classNames } from '../chunk-566df01b.js';
import ExitIcon from '../Icons/Exit/index.js';
import Text from '../Text/index.js';
import '../chunk-aeb80e51.js';
import '../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: 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: 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: defineProperty({
      height: 'calc(100vh - 72px)',
      backgroundColor: theme.palette.white90,
      display: 'flex',
      flexDirection: 'column'
    }, theme.breakpoints.up('sm'), {
      height: 'auto',
      background: theme.palette.white
    }),
    title: 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 = objectWithoutProperties(_ref, ['title', 'onClose', 'children', 'isOpen', 'classes', 'className']);
  return React.createElement(
    'div',
    { className: classNames(classes.overlay, isOpen && classes.show) },
    React.createElement(
      'div',
      _extends({ className: classNames(classes.container, className) }, rest),
      React.createElement(
        'div',
        { className: classes.header },
        React.createElement(
          'div',
          { className: classes.title },
          React.createElement(
            Text,
            { bold: true, size: 'md' },
            title
          )
        ),
        onClose && React.createElement(
          'div',
          {
            className: classes.exit,
            onClick: onClose,
            onKeyPress: function onKeyPress(e) {
              if (e.keyCode === 'ESC') onClose();
            },
            role: 'button',
            tabIndex: isOpen ? 0 : -1
          },
          React.createElement(ExitIcon, { color: 'grey90', hoverColor: 'black' })
        )
      ),
      React.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 = withNano(styles)(Modal);

export default Modal$1;
//# sourceMappingURL=index.js.map
