Theme UI Stack with dividers

Stack.tsx

import * as React from 'react'
import { Box, Flex } from 'theme-ui'
import { ResponsiveStyleValue } from '@theme-ui/css'
import { BoxProps } from '@theme-ui/components'

interface Props extends BoxProps {
	gap?: ResponsiveStyleValue<number>
	dividers?: boolean
	dividerColor?: ResponsiveStyleValue<string>
}

const Stack: React.FC<Props> = ({
	gap = 0,
	dividers,
	dividerColor = 'border',
	children,
	sx,
	...props
}) => {
	const items = React.Children.toArray(children)

	return (
		<Flex
			sx={{
				flexFlow: 'column nowrap',
				gap,
				...sx,
			}}
			{...props}
		>
			{items.map((child, index) => (
				<Box
					key={index}
					sx={{
						'& + &': {
							borderTop: dividers ? 1 : 0,
							borderColor: dividerColor,
							paddingTop: dividers ? gap : 0,
						},
					}}
				>
					{child}
				</Box>
			))}
		</Flex>
	)
}

export default Stack