message: remove css import from reach-dialog
diff: import React from 'react'
  import {Dialog as ReachDialog} from '@reach/dialog'
  -import raw from 'raw.macro'
  import styled, {createGlobalStyle} from 'styled-components'
  import PropTypes from 'prop-types'
  import {XIcon} from '@primer/octicons-react'
  import StyledOcticon from './StyledOcticon'
  -import {COMMON, LAYOUT} from './constants'
  +import {COMMON, LAYOUT, get} from './constants'
  import theme from './theme'
  import sx from './sx'
  import Text from './Text'
  import Flex from './Flex'
  -const reachStyles = raw('@reach/dialog/styles.css')
  -
  const ReachGlobalStyle = createGlobalStyle`
  - ${reachStyles}
  -
  [data-reach-dialog-overlay] {
  + background: hsla(0, 0%, 0%, 0.33);
  + position: fixed;
  + top: 0;
  + right: 0;
  + bottom: 0;
  + left: 0;
  + overflow: auto;
  z-index: 1000002; /* Higher than the Dropdown and Tooltip */
  }
  `
  -/* !important's below are needed to override reach styles */
  -/* can be removed when we remove ReachDialog */
  -
  const StyledDialog = styled(ReachDialog)`
  box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.35);
  - border-radius: 4px;
  - padding: 0 !important;
  + border-radius: ${get('radii.2')};
  position: relative;
  + background-color: ${get('colors.white')};
  + width: 50vw;
  + margin: 10vh auto;
  + outline: none;
  @media screen and (max-width: 750px) {
  - width: 100vw !important;
  - margin: 0 !important;
  + width: 100vw;
  + margin: 0;
  border-radius: 0;
  height: 100vh;
  }
  