jsx import { CSSObject , jsx } from '@emotion/core' ; import React from 'react' ; import { COLOR } from '../Identity' ; import { ANIMATION , DURATION , EASE } from '../Identity/motions' ; import { QueryKeys , media } from '../mediaQueries' ; import { noop } from '../util' ; export type OverlayWrapperProps < T = HTMLDivElement > = React . HTMLProps < T > ; export const overlayWrapperStyle = ( ) => ( { bottom : 0 , display : 'flex' , left : 0 , overflowY : 'auto' , padding : '24px' , position : 'fixed' , right : 0 , top : 0 , zIndex : 9997 , } ) ; export const OverlayWrapper = ( props ) => < div css = { overlayWrapperStyle } { ... props } />; export const OverlayContent = ( props ) => ( < div css = { { '*' : { color : COLOR . WHITE , } , alignItems : 'center' , display : 'flex' , flexDirection : 'column' , justifyContent : 'space-between' , margin : 'auto' , maxWidth : '100%' , overflowY : 'auto' , position : 'relative' , transform : 'translate3d(0, 0, 0)' , zIndex : 9999 , [ media [ QueryKeys . TABLET_DOWN ] ] : { width : '100%' , } , } } { ... props } />); export type OverlayBackgroundProps < T = HTMLDivElement > = React . HTMLProps < T > ; export const overlayBackgroundStyle = ( ) => ( { animation : `${ ANIMATION . fadeIn } ${ DURATION . PROACTIVE_SLOW }ms ${ EASE . QUART }` , background : 'rgba(0, 0, 0, 0.88)' , height : '100vh' , left : 0 , position : 'fixed' , top : 0 , width : '100vw' , zIndex : 9998 , } ) ; export const OverlayBackground = ( props ) => < div css = { overlayBackgroundStyle } { ... props } />; export interface OverlayProps < T = HTMLDivElement > extends React . HTMLProps < T > { onBackgroundClick ? : ( ) => void ; } export const Overlay = ( { onBackgroundClick = noop , children = null , ... props } ) => ( < OverlayWrapper { ... props } data - uie - name = "modal" > < OverlayContent > { children } < /OverlayContent> < OverlayBackground onClick = { onBackgroundClick } data - uie - name = "overlay-background" / > < /OverlayWrapper>);