flexLayout = ({ items, gap, direction, sizes = [] }) => {
  let lastSize = 0;
  // filter() for filtering out empty strings
  return items.filter(Boolean).map((item, i) => {
    const size = sizes[i] || 0;
    let transform = `translate(${lastSize}, 0)`;
    if (direction === "column") {
      transform = `translate(0, ${lastSize})`;
    }
    lastSize += size + gap;
    return `<g transform="${transform}">${item}</g>`;
  });
}
Auto layout utility, allows us to layout things vertically or horizontally with
proper gaping.

@param {object} props Function properties.
@param {string[]} props.items Array of items to layout.
@param {number} props.gap Gap between items.
@param {"column" | "row"=} props.direction Direction to layout items.
@param {number[]=} props.sizes Array of sizes for each item.
@returns {string[]} Array of items with proper layout.