/** @jsx jsx */
import { jsx } from "theme-ui"

import { Children } from 'react'

import { FullBox } from '../FullBox/FullBox'

export const Stack = (props) => {
  const wrappedChildren = Children.map(props.children, (child) => (
    <FullBox>
      {child}
    </FullBox>
  ))

  return (
    <div {...props} sx={{
      position: 'relative',
    }}>
      {wrappedChildren}
    </div>
  )
}