import { ReactNode } from 'react' ; import styled from 'styled-components' ; import { FOOTER_HEIGHT } from '../WizardFooter/WizardFooter' ; type Props = { children : ReactNode | ReactNode [ ] ; withFooter ? : boolean ; } ; /**
 * A helper component to easily generate full-page steps where the content is centered
 */ export default function FullPageCenteredStep ( { children , withFooter } ) { return < StyledPage withFooter = { withFooter } > { children } < /StyledPage>; } const StyledPage = styled . div < { withFooter ? : boolean ; } > `
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100vh - ${ ( { withFooter } ) => ( withFooter ? FOOTER_HEIGHT : 0 ) }px);
` ;