Vue-Styleguidist have default example use kebab-case instead of PascalCase

Question

I'm setting up Vue-styleguidist to generate documentation for a Vue.js project and its components.

There is an option to automatically generate examples in the documentation. The examples are showing with PascaleCase, but we normally use kebab-case. Would like the generated examples to do the same.

The generated examples look like:

<ExampleButton textSize="md" />

I would like it to be like this instead:

<example-button text-size="md" />

Any one know how this could be done. I tried using a MarkDown template for defaultExample option but it doesn't seem to change anything.

Here is my docgen.config.js file

/** @type import("vue-docgen-cli").DocgenCLIConfig */
module.exports = {
  docsRepo: 'vue-styleguidist/vue-styleguidist',
  docsBranch: 'dev',
  docsFolder: 'examples/docgen',
  componentsRoot: 'src/components',
  components: '**/[A-Z]*.(vue|ts)',
  outDir: './docs/components',
  defaultExamples: './docs/templates/DefaultExample.md'
}

Here is the contents of my ./docs/templates/DefaultExample.md file

<test __COMPONENT__ />