<PointerBox m={4} p={2} minHeight={100} bg="green.1" borderColor="green.5">
  PointerBox
</PointerBox>

function PointerBoxDemo(props) {
  const [pos, setPos] = React.useState('top')
  return (
    <Box>
      <Heading as="h3" fontSize={3}>Caret Position</Heading>
      <CaretSelector current={pos} onChange={setPos} />
      <Relative pt={4}>
        <PointerBox m={4} p={2} minHeight={100} bg="green.1" borderColor="green.5" caret={pos}> Content </PointerBox>
      </Relative>
    </Box>
  )
}
function CaretSelector(props) {
  const choices = [
    'top',         'bottom',      'left',         'right',
    'left-bottom', 'left-top',    'right-bottom', 'right-top',
    'top-left',    'bottom-left', 'top-right',    'bottom-right'
  ].map((dir) => (
    <label>
      <input key={dir} type='radio' name='caret' value={dir}
        checked={dir === props.current} onChange={() => props.onChange(dir)} /> {dir}
    </label>
))
  return (
    <Grid gridTemplateColumns="repeat(4, auto)" gridGap={3} my={2}>
      {choices}
    </Grid>
  )
}
render(<PointerBoxDemo />)