jobiqo-cl/lib/es/src/components/02-atoms/15-modal/index.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

import { __rest } from '../../../../node_modules/tslib/tslib.es6.js';
import React__default from 'react';
import styled, { css, createGlobalStyle } from 'styled-components';
import { space } from '../../../../node_modules/@styled-system/space/dist/index.esm.js';
import '../../../../node_modules/styled-system/dist/index.esm.js';
import { CloseIcon } from '../../../icons/Close.js';
import { DialogOverlay, DialogContent } from '../../../../node_modules/@reach/dialog/es/index.js';
import * as reachDialogGlobbalStyle from '../../../../node_modules/@reach/dialog/styles.css.js';

const dialogStyles = css `
  body [data-reach-dialog-content] {
    position: relative;
    box-shadow: ${props => props.theme.modal.boxShadow};
    background: ${props => props.theme.modal.background};
    max-width: ${props => (props.maxWidth ? props.maxWidth : '750px')};
    width: 90vw;
    ${props => props.theme.mediaQueries.small} {
      width: 70vw;
    }
    ${props => props.theme.mediaQueries.medium} {
      width: 60vw;
    }
    ${space}
  }
  body [data-reach-dialog-overlay] {
    background: ${props => props.theme.modal.overlay.background};
    z-index: 100;
  }
`;
const GlobalDialogStyle = createGlobalStyle `
  ${reachDialogGlobbalStyle}
  ${dialogStyles}
`;
const StyledCloseButton = styled.button `
  position: absolute;
  cursor: pointer;
  border: none;
  top: ${props => props.theme.modal.close.top};
  right: ${props => props.theme.modal.close.right};
  left: ${props => props.theme.modal.close.left};
  bottom: ${props => props.theme.modal.close.bottom};
  color: ${props => props.theme.modal.close.color};
`;
const Modal = (_a) => {
    var { children, isShown, onHide, showClose = true, closeTitle = 'Close' } = _a, props = __rest(_a, ["children", "isShown", "onHide", "showClose", "closeTitle"]);
    return (React__default.createElement(React__default.Fragment, null,
        React__default.createElement(GlobalDialogStyle, Object.assign({}, props)),
        React__default.createElement(DialogOverlay, { isOpen: isShown, onDismiss: () => onHide() },
            React__default.createElement(DialogContent, { "aria-label": "Modal content" },
                React__default.createElement("div", null, children),
                showClose && (React__default.createElement(StyledCloseButton, { onClick: () => onHide() },
                    React__default.createElement(CloseIcon, { title: closeTitle })))))));
};

export { GlobalDialogStyle, Modal, StyledCloseButton, dialogStyles };