InBetweenSpacing.js

function Spacer({ size }) {
  return (
    <span
      className={css({
        display: "block",
        width: `var(--spacing-${size})`,
        height: `var(--spacing-${size})`
      })}
      aria-hidden
    />
  );
}

function InBetweenSpacing({ size, children }) {
  return Children.toArray(children).map((child, index, children) => (
    <Fragment key={index}>
      {child.type === Fragment ? (
        <InBetweenSpacing size={size}>{child.props.children}</InBetweenSpacing>
      ) : (
        child
      )}
      {children[index + 1] && <Spacer size={size} />}
    </Fragment>
  ));
}