Vanilla Storybook render with a map function outputs commas

[givensuman]

I have a Vanilla Storybook project set up to test some styles for a TailwindCSS component library/theme I'm working on. For my button component, I want to display each of the variants for each of the colors, which the following code does:

const colors = ["slate", "gray", "zinc", "neutral", "stone", "red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose"]
const variants = ["ghost", "outline", "link"]

export const Colors = {
  render: () => {
    return `
    <div class="flex flex-col space-y-2">
      ${[...colors].map(color => {
        return `
          <div class="flex space-x-2">
            <button class="btn is-${color}">Click Me</button>
            ${[...variants].map(variant => {
              return `
                <button class="btn is-${color} is-${variant}">Click Me</button>
              `
            })}
          </div>
        `
      })}
    </div>
    `
  }
}

This works, but for some reason this is outputting commas in between the returned buttons:

This happens whenever using map, nested or not. Is this a bug or am I doing something stupid? I've tried removing newlines from the string templates but it had no effect, so I put them back for readability.

Thanks in advance!